@layer screens {
  .logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
  }

  /* The logo in the tab bar shows only once it becomes the desktop top bar. */
  .tabbar__logo {
    display: none;
  }

  .logo__dot {
    width: 14px;
    height: 14px;
    background: var(--color-orange);
    border: var(--border);
    border-radius: 50%;
  }

  /* Sign in */
  .auth-intro {
    margin-top: 20px;
  }

  .display {
    font-size: 34px;
  }

  .wave-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 170px;
    margin-top: auto;
    padding: 20px;
    background: var(--color-yellow);
    border: var(--border);
    border-radius: 32px;

    .wave {
      flex-grow: 0;
      gap: 4px;
      height: auto;
    }

    .wave__bar {
      width: 6px;
      background: var(--color-ink);
      border-radius: 3px;
    }
  }

  .mint-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--color-mint);
    border: var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    font-weight: 600;

    svg { flex-shrink: 0; }
  }

  /* Feed */
  .note-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* A note that slides left over its delete button (swipe_controller.js). Grids all the way down so
     the card fills its box: in the tablet grid a short note stretches to its row and still hides the
     button. */
  .swipe {
    position: relative;
    display: grid;
  }

  /* Same box and shadow as the card, so the two read as a pair. */
  .swipe__action {
    position: absolute;
    inset: 0 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 112px;
    background: var(--color-danger);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--color-paper);
    font-size: 14px;
    font-weight: 700;

    /* Reached only by a finger; focus comes back to it when the sheet closes. */
    &:focus { outline: none; }

    /* No touch screen, no swipe: with a mouse a note is deleted from its menu. */
    @media not (any-pointer: coarse) { display: none; }
  }

  .swipe__card {
    position: relative;
    display: grid;
    touch-action: pan-y;
  }

  .note-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .note-card__time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .note-card__title {
    display: -webkit-box;
    margin-top: 8px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
  }

  .note-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  .note-card .progress {
    margin-top: 10px;
  }

  .empty {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px;
    border: 2px dashed var(--color-ink);
    border-radius: var(--radius);
  }

  .empty__title {
    font-size: 17px;
    font-weight: 700;
  }

  /* Note */
  .note-layout,
  .note-layout__main,
  .note-layout__side {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .note-title {
    font-size: 22px;
    line-height: 1.2;
  }

  /* The buttons stay put whatever the title's length: it lines up with them by its first line,
     and a long one stops at two lines (the whole title is in the tab and on the edit page). */
  .note-header {
    align-items: flex-start;
    gap: 14px;

    .note-title {
      flex: 1;
      min-width: 0;
      padding-top: calc((44px - 1lh) / 2);
      font-size: 20px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      overflow-wrap: anywhere;
    }
  }

  .player {
    overflow: hidden;
    background: var(--color-blue);
    border: var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
  }

  .player__body {
    padding: 16px;

    audio {
      width: 100%;
      height: 48px;
    }
  }

  .transcript {
    font-size: 16px;
    line-height: 1.55;
    white-space: pre-line;
  }

  .result {
    font-size: 17px;
    line-height: 1.5;

    p + p { margin-top: 0.6em; }
  }

  /* Free-form prompt */
  .context {
    padding: 12px 16px;
    background: var(--color-soft);
    border-radius: 18px;
  }

  .context__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 15px;
    font-weight: 600;
  }

  /* Account */
  .profile {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 24px;
  }

  .profile__text {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .profile__name {
    font-size: 18px;
    font-weight: 700;
  }

  .info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    svg { flex-shrink: 0; margin-top: 1px; }
  }

  .info-card__title {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
  }

  /* Landing */
  .landing-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
  }

  .hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    padding-block: 24px 64px;
  }

  .hero__copy {
    display: flex;
    flex: 1 1 340px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .hero__title {
    font-size: clamp(36px, 8vw, 68px);
    line-height: 1.05;
  }

  .mark {
    padding: 0 8px;
    background: var(--color-pink);
    border-radius: 10px;
    color: inherit;
  }

  .hero__lead {
    max-width: 520px;
    font-size: 18px;
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
  }

  .hero__demo {
    display: flex;
    flex: 1 1 340px;
    flex-direction: column;
    gap: 12px;
  }

  .demo-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
    box-shadow: var(--shadow-big);
  }

  .demo-card__player {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .play-dot {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: var(--color-blue);
    border-radius: 50%;
    color: var(--color-paper);
  }

  .demo-arrow {
    display: grid;
    place-items: center;
    align-self: center;
    width: 44px;
    height: 44px;
    background: var(--color-yellow);
    border: var(--border);
    border-radius: 50%;
  }

  .band {
    background: var(--color-paper);

    &.band--ink { background: var(--color-ink); color: var(--color-paper); }
    &.band--mint { background: var(--color-mint); }
    &.band--lilac { background: var(--color-lilac); }
  }

  .band__inner {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-block: 56px 64px;

    &.band__inner--row {
      flex-flow: row wrap;
      align-items: flex-start;
      gap: 20px;
      padding-block: 48px;
    }

    &.band__inner--center {
      align-items: center;
      gap: 36px;
      padding-block: 64px;
    }
  }

  .band__intro {
    display: flex;
    flex: 1 1 300px;
    flex-direction: column;
    gap: 12px;
  }

  .band__title {
    font-size: clamp(26px, 5vw, 40px);

    &.band__title--small { font-size: clamp(22px, 4vw, 30px); }
  }

  .band__lead {
    max-width: 640px;
    margin-top: 8px;
    font-size: 17px;
  }

  .band__intro .band__lead {
    margin-top: 0;
  }

  .round-badge {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--color-paper);
    border: var(--border);
    border-radius: 50%;
  }

  .steps {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
  }

  .step {
    display: flex;
    flex: 1 1 280px;
    align-items: flex-start;
    gap: 16px;
  }

  .step__number {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border: var(--border);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;

    &.step__number--blue { background: var(--color-blue); color: var(--color-paper); }
    &.step__number--pink { background: var(--color-pink); }
    &.step__number--yellow { background: var(--color-yellow); }
  }

  .step__title {
    font-family: var(--font-body);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.5;
  }

  .price-card {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    gap: 18px;
    max-width: 460px;
  }

  .price {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
  }

  .price__period {
    font-size: 16px;
    font-weight: 600;
  }

  .checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;

    li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
  }

  .check {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: var(--color-mint);
    border: var(--border);
    border-radius: 50%;
  }

  .landing-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 36px;
  }

  .landing-footer__brand {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
  }
}

@layer screens {
  /* Recording */
  body.dark {
    background: var(--color-ink);
    color: #fff;
  }

  .recorder {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    max-width: 480px;
    margin-inline: auto;
    padding: 24px 20px calc(28px + var(--safe-bottom));
    color: #fff;
  }

  .recorder__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .recorder__status {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding-inline: 16px;
    border: 2px solid #fff;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 700;
  }

  .recorder__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-muted);
  }

  .recorder__clock {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 64px;
    text-align: center;
  }

  .recorder__timer {
    font-family: var(--font-display);
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .recorder__hint {
    max-width: 280px;
    color: #b8b8b8;
  }

  .recorder__bars {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 130px;
    margin-top: 48px;
  }

  .recorder__bar {
    width: 6px;
    height: var(--h, 8px);
    border-radius: 3px;
    background: var(--color-yellow);
    opacity: var(--o, 1);
    transition: height 120ms ease-out;
  }

  .recorder__message {
    margin-top: 20px;
    padding: 12px 16px;
    border: 2px solid #fff;
    border-radius: 16px;
    font-size: 15px;

    &[data-kind="error"] { border-color: var(--color-orange); }
    a { text-decoration: underline; font-weight: 700; }
  }

  .recorder__controls {
    margin-top: auto;
    padding-top: 24px;
  }

  .recorder__idle,
  .recorder__active {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 28px;
  }

  .recorder__idle {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .recorder__control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 80px;

    &:nth-child(2) { width: 96px; }
  }

  .recorder__round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    color: #fff;

    &.recorder__round--small { width: 44px; height: 44px; }

    &.recorder__round--big {
      width: 96px;
      height: 96px;
      border-width: 3px;
      background: var(--color-orange);
      color: var(--color-ink);
    }
  }

  .recorder__square {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--color-ink);
  }

  .recorder__label {
    font-size: 13px;
    color: #b8b8b8;

    &.recorder__label--strong { color: #fff; font-weight: 700; }
  }

  /* An audio file or a text instead of recording. */
  .recorder__extras {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
    text-align: center;
  }

  .recorder__extras-row {
    display: flex;
    gap: 12px;
  }

  .recorder__upload {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    border: 2px solid #fff;
    border-radius: 26px;
    font-weight: 700;
  }

  /* Only the parts that make sense in the current state are shown. */
  .recorder[data-recorder-state-value="idle"] {
    .recorder__active { display: none; }
  }

  .recorder:not([data-recorder-state-value="idle"]) {
    .recorder__idle,
    .recorder__extras,
    .recorder__hint,
    [data-recorder-target="close"] { display: none; }
  }

  .recorder[data-recorder-state-value="recording"] .recorder__dot { background: var(--color-orange); }

  .recorder[data-recorder-state-value="saving"] .recorder__active { visibility: hidden; }

  @media (prefers-reduced-motion: reduce) {
    .recorder__bar { transition: none; }
  }
}

@layer screens {
  /* Subscription */
  .plan-status {
    font-size: 30px;
  }

  .eyebrow.eyebrow--light {
    color: var(--color-paper);
  }

  .meter {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: rgb(255 255 255 / 0.28);
  }

  .meter__bar {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: var(--color-yellow);
  }

  /* Account: what is left this month */
  .limits__item {
    padding: 16px;
    background: var(--color-paper);

    & + & { border-top: 1px solid var(--color-line); }
    & + .list__row { border-top: 1px solid var(--color-line); }
  }

  /* A question that unfolds its answer ("Что за минуты?") */
  .hint {
    summary {
      width: fit-content;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;
      list-style: none;

      &::-webkit-details-marker { display: none; }
    }

    &[open] summary { margin-bottom: 6px; }
  }

  .limits__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
  }

  .meter.meter--ink {
    height: 10px;
    background: var(--color-paper);
    outline: 2px solid var(--color-ink);

    .meter__bar { height: 10px; background: var(--color-ink); }
  }

  .center {
    text-align: center;
  }

  .btn:disabled {
    background: var(--color-soft);
    color: var(--color-muted);
    border-color: var(--color-line);
    cursor: not-allowed;
  }
}

@layer screens {
  .plan {
    gap: 16px;

    .chip { align-self: flex-start; }
  }
}

@layer screens {
  /* Documents and consent */
  .check-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.4;

    input[type="checkbox"] {
      flex: none;
      width: 24px;
      height: 24px;
      margin: 0;
      accent-color: var(--color-ink);
    }

    a { text-decoration: underline; }
  }

  /* The survey (SurveysController): one question, its answers as rows to tap. */
  .choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;

    legend { margin-block-end: 12px; font-size: 20px; font-weight: 700; }
  }

  .choice {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 12px 18px;
    background: var(--color-soft);
    border: var(--border);
    border-radius: 18px;
    font-size: 17px;
    cursor: pointer;

    input[type="radio"] {
      flex: none;
      width: 22px;
      height: 22px;
      margin: 0;
      accent-color: var(--color-ink);
    }

    &:has(:checked) { background: var(--color-yellow); }
  }

  .plan__renewal {
    margin-block-start: 8px;

    a { text-decoration: underline; }
  }
  .card .button_to { margin-block-start: 8px; }
  .saved-card .button_to { display: inline; }

  .document {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .prose {
    gap: 12px;
    font-size: 16px;
    line-height: 1.55;

    h2 { margin-top: 12px; font-size: 18px; }
    p, ul { margin: 0; }
    ul { padding-left: 20px; list-style: disc; }
    li + li { margin-top: 6px; }
    a { text-decoration: underline; }
  }

  /* Help: a card per section in the app's colors, with a phone screenshot. */
  .help {
    .tile__label { font-size: 14px; }

    /* An odd tile out takes the whole row instead of squeezing into a column. */
    .tiles--grid > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  }

  .help-intro p { margin: 0; line-height: 1.55; }

  .help-section {
    display: grid;
    gap: 20px;
    padding: 20px;
    /* Jumping to a section keeps its title clear of the app's translucent navigation bar. */
    scroll-margin-top: calc(16px + env(safe-area-inset-top));
  }

  .help-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    font-size: 22px;
    line-height: 1.2;

    svg { flex-shrink: 0; }
  }

  .help-section.card--blue .prose a { color: inherit; }

  .help-shot {
    margin: 0;

    img {
      display: block;
      width: min(220px, 60%);
      height: auto;
      margin-inline: auto;
      background: var(--color-paper);
      border: var(--border);
      border-radius: 28px;
      box-shadow: var(--shadow);
    }
  }

  @media (min-width: 768px) {
    .help-section:has(.help-shot) {
      grid-template-columns: minmax(0, 1fr) 220px;
      align-items: start;
    }

    .help-shot img { width: 100%; }
  }

  .list__label--danger { color: var(--color-danger); }

  .btn.btn--danger {
    background: var(--color-danger);
    border-color: var(--color-ink);
    color: #fff;
    box-shadow: var(--shadow);
  }

  .landing-footer__links {
    display: flex;
    gap: 16px;

    a { text-decoration: underline; }
  }
}

@layer screens {
  /* Search and card actions */
  .card__actions {
    display: flex;
    align-items: center;
    gap: 8px;

    .button_to { display: contents; }
  }

  .search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding-inline: 16px;
    margin-bottom: 8px;
    background: var(--color-soft);
    border: var(--border);
    border-radius: 24px;

    input[type="search"] {
      flex: 1;
      min-width: 0;
      height: 100%;
      background: transparent;
      border: 0;
      outline: 0;
      font-size: 16px;
      appearance: none;
    }

    &:focus-within { box-shadow: 0 0 0 3px var(--color-blue); }
  }

  .search__clear {
    display: inline-flex;
    padding: 8px;
    margin-right: -8px;
  }
}

@layer screens {
  /* Tablet and desktop: top bar logo, the feed becomes a grid, the note gets two columns. */
  @media (min-width: 768px) {
    .tabbar__logo {
      display: inline-flex;
      margin-inline-end: auto;
    }

    /* The top bar already links to the account. */
    .app--tabbed .screen-header .avatar {
      display: none;
    }

    .note-group .stack {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 16px;
    }

    .note-header .note-title {
      font-size: 24px;
    }

    .document {
      max-width: 720px;
    }
  }

  @media (min-width: 960px) {
    .note-layout:has(.note-layout__side) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: start;
      gap: 32px;
    }
  }
}

/*
 * The iOS app (Hotwire Native) has its own navigation bar with the title and the back button,
 * and its own tab bar, so the page drops its versions of them. Last, so it wins over the screens above.
 */
@layer screens {
  /* An app that shows the page's menu in its navigation bar (bridge/menu_controller.js): the page's
     own header with that menu goes. Older app builds without it keep the header. */
  html[data-bridge-components~="menu"] .native .screen-header--spread { display: none; }

  /* The page sits under the app's translucent navigation bar; WebKit reports its height as the safe area. */
  body.native {
    padding-top: env(safe-area-inset-top);
  }

  .native {
    .screen-header:not(.screen-header--spread) { display: none; }
    .screen-header--spread > a.icon-btn:first-child { visibility: hidden; }

    /* The navigation bar shows the note's title already. */
    .note-title { display: none; }

    /* Full-height screens (sign-in with its wave card, the recorder) fit between the bars, not under them. */
    .app, .recorder { min-height: calc(100dvh - env(safe-area-inset-top)); }
    .app:not(.app--tabbed, .app--bottom-bar) { padding-bottom: calc(24px + var(--safe-bottom)); }
    .app.app--tabbed { padding-bottom: calc(120px + var(--safe-bottom)); }

    /* In a sheet the bar goes after the content and sticks to the bottom only when the content is
       longer: in a short sheet the fixed bar would lie over the last lines. From tablet width up
       it is in the page anyway (layout.css). */
    @media (max-width: 767px) {
      .app.app--bottom-bar { padding-bottom: 0; }
      .bottom-bar {
        position: sticky;
        left: auto;
        translate: none;
        width: auto;
        margin: auto -20px 0;
      }
    }

    .fab.fab--floating {
      position: fixed;
      top: auto;
      right: 20px;
      bottom: calc(20px + var(--safe-bottom));
      left: auto;
      z-index: 20;
      display: grid;
      width: 72px;
      height: 72px;
      padding: 0;
      translate: none;
      border-radius: 50%;
    }
  }
}

@layer screens {
  /* The apps: buttons on the landing page and the empty feed, «Ну, всё! в телефоне» (/apps), reminders on the website */
  .stores { display: flex; flex-direction: column; gap: 10px; }
  .stores__label { font-size: 14px; font-weight: 600; color: var(--color-muted); }
  .stores__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .stores--feed { margin-top: 8px; }
  .stores__qr { display: none; }

  /* A computer with a mouse: the apps go on the phone through the QR code. */
  @media (min-width: 768px) and (pointer: fine) {
    .stores--feed .stores__row { display: none; }
    .stores--feed .stores__qr { display: flex; align-items: center; gap: 16px; max-width: 420px; text-decoration: none; color: inherit; }
    .stores__qr img { flex-shrink: 0; width: 120px; height: 120px; }
  }

  /* Apple's badge as it comes, at the same height as our Android button. */
  .appstore-badge { display: inline-flex; }
  .appstore-badge img { display: block; height: 48px; width: auto; }

  .store {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 18px 0 14px;
    border: var(--border);
    border-radius: 12px;
    line-height: 1.1;
    background: var(--color-ink);
    color: var(--color-paper);
    box-shadow: 0 4px 0 var(--color-mint);
    transition: transform 0.08s, box-shadow 0.08s;
    --eye: var(--color-ink);

    &:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--color-mint); }
    &:active { transform: translateY(4px); box-shadow: 0 0 0 var(--color-mint); }
  }
  .store__icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--color-mint); }
  .store__text { display: flex; flex-direction: column; gap: 2px; }
  .store__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
  .store__name { font-family: var(--font-display); font-size: 16px; font-weight: 700; }

  .apps-page { display: flex; flex-direction: column; gap: 24px; padding-block: 16px 56px; }
  .apps-page__back { padding-block: 16px 0; }
  @media (min-width: 768px) { .apps-page__back { display: none; } } /* the site's top bar is there */
  .apps-page__title { font-size: clamp(30px, 6vw, 44px); line-height: 1.05; text-wrap: balance; }

  .apps-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .app-card { padding: 22px; align-items: flex-start; }
  .app-card .btn { align-self: stretch; }
  .apps-qr { display: none; }

  @media (min-width: 900px) {
    .apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) 230px; }
    .apps-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px; text-align: center; }
    .apps-qr img { width: 168px; height: 168px; }
  }

  .apps-steps { padding: 22px; }

  .fingerprint {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--color-soft);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px;
    word-break: break-all;
  }

  .recorder__apps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;

    span { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 4px; }
    svg { flex-shrink: 0; }
  }
  .recorder:not([data-recorder-state-value="idle"]) .recorder__apps { display: none; }

  .apps-card,
  .update-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
  }
  .apps-card__icons { display: flex; flex-shrink: 0; gap: 4px; --eye: var(--color-mint); }
  .apps-card__text,
  .update-banner__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
  .apps-card__title,
  .update-banner__title { font-weight: 700; }
  .update-banner { margin-bottom: 4px; }
}

@layer screens {
  /* Direct landing (/tvoi_diktofon): the home landing's parts plus the blocks of the landing method. */
  .band.band--yellow { background: var(--color-yellow); }
  .band.band--soft { background: var(--color-soft); }

  /* .band__intro grows to 300px for side-by-side bands; stacked above content it must not. */
  .band__inner:not(.band__inner--row) > .band__intro { flex: none; }

  .lp-audience { max-width: 520px; font-weight: 700; }

  .lp-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
  }

  .lp-tasks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 17px;

    li::before { content: "☐ "; }
  }

  .lp-pain {
    align-items: center;
    gap: 36px;
    padding-block: 64px;
  }

  .lp-questions {
    display: flex;
    flex: 1 1 420px;
    flex-direction: column;
    gap: 12px;

    li { padding: 18px 20px; font-size: 18px; font-weight: 700; }
  }

  .lp-why {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 20px;
  }

  .lp-why__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .lp-why__title { font-size: clamp(21px, 3.5vw, 28px); line-height: 1.2; }

  .lp-dark {
    background: var(--color-ink);
    color: var(--color-paper);
    --color-muted: #b8b8b8;
  }

  .lp-dots {
    display: flex;
    flex-direction: column;
    gap: 8px;

    li { display: flex; gap: 12px; }
    li::before {
      content: "";
      flex-shrink: 0;
      width: 10px;
      height: 10px;
      margin-top: 8px;
      background: var(--color-orange);
      border: var(--border);
      border-radius: 50%;
    }
  }

  .lp-crosses {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 17px;

    li { display: flex; align-items: flex-start; gap: 12px; }
    svg { flex-shrink: 0; color: var(--color-orange); }

    &.lp-crosses--muted { color: var(--color-muted); }
    &.lp-crosses--muted svg { color: var(--color-muted); }
  }

  .lp-subtitle { font-size: 19px; font-weight: 700; }

  .lp-shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 36px 28px;
  }

  .lp-shot {
    display: flex;
    flex-direction: column;
    gap: 24px;

    img {
      width: min(260px, 80%);
      height: auto;
      margin-inline: auto;
      border: var(--border);
      border-radius: 32px;
      box-shadow: var(--shadow-big);
    }
  }

  .lp-chip { align-self: flex-start; }

  .lp-versus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 20px;

    .card { display: flex; flex-direction: column; gap: 18px; }
    .checklist { font-size: 17px; }
  }

  .lp-versus__title { font-size: 20px; }

  .lp-outcomes { margin-top: 8px; font-size: 18px; }

  .lp-trial {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
  }

  .lp-next { text-align: center; }

  .lp-faq { max-width: 860px; }

  .lp-faq__list {
    > div {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-block: 20px;
      border-top: var(--border);
    }

    > div:last-child { border-bottom: var(--border); }
    dt { font-size: 18px; font-weight: 700; }
    dd { margin: 0; color: var(--color-muted); }
  }

  .lp-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-block: 48px;
    text-align: center;
  }

  .btn.lp-final__btn {
    background: var(--color-ink);
    color: var(--color-paper);
    box-shadow: none;
  }

  /* On a phone the sign-up buttons span the screen: easier to hit. */
  @media (max-width: 767px) {
    .lp-cta .btn,
    .btn.lp-final__btn { width: 100%; }
  }
}