:root{
    --bg:#F5F1E8;
    --surface:#EFE9DC;
    --tile-a:#E4DCCA;
    --tile-b:#D6CDB8;
    --line:#DFD7C6;
    --text:#2E2B26;
    --muted:#7C7365;
    --accent:#6B7355;
    --accent-hover:#5B6348;
    --on-accent:#F7F4EC;
    --scrim:rgba(46,43,38,.5);
    --chip:rgba(247,244,236,.88);
    --chip-text:#2E2B26;
    --track:rgba(46,43,38,.42);
    --fill:rgba(247,244,236,.94);
    --focus:#B8265F;
    --on-focus:#FFF9F5;   /* текст на плашке цвета ошибки: всплывашка «не подошло» */
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#282A24;
      --surface:#31342B;
      --tile-a:#3C4034;
      --tile-b:#4B5040;
      --line:#3D4136;
      --text:#EAE6DA;
      --muted:#A5A08E;
      --accent:#9CAB7E;
      --accent-hover:#B2C08F;
      --on-accent:#282A24;
      --scrim:rgba(20,22,17,.5);
      --chip:rgba(40,42,36,.82);
      --chip-text:#EAE6DA;
      --track:rgba(234,230,218,.17);
      --fill:rgba(234,230,218,.88);
      --focus:#FF8A4C;
    --on-focus:#241A12;
    }
  }
  :root[data-theme="dark"]{
    --bg:#282A24;
    --surface:#31342B;
    --tile-a:#3C4034;
    --tile-b:#4B5040;
    --line:#3D4136;
    --text:#EAE6DA;
    --muted:#A5A08E;
    --accent:#9CAB7E;
    --accent-hover:#B2C08F;
    --on-accent:#282A24;
    --scrim:rgba(20,22,17,.5);
    --chip:rgba(40,42,36,.82);
    --chip-text:#EAE6DA;
      --track:rgba(234,230,218,.17);
      --fill:rgba(234,230,218,.88);
    --focus:#FF8A4C;
    --on-focus:#241A12;
  }

  *{box-sizing:border-box}
  /* iPhone умеет сам «раздувать» текст в отдельных блоках, и в скрипте размер при этом
     остаётся прежним: строка, которую страница подогнала по замеру, рисуется шире и лезет
     за край. 100% — «рисуй ровно как написано». На Android и компьютере ничего не меняет
     (там раздувания и так нет при width=device-width). 17.09, после живого iPhone. */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  /* hidden сильнее любого display: иначе .cta с display:inline-block видна вопреки атрибуту */
  [hidden]{display:none!important}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:"Golos Text","Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    transition:background-color .35s ease,color .35s ease;
  }
  .page{max-width:1080px;margin:0 auto;padding:0 clamp(12px,3vw,24px) 96px}
  /* Безопасные зоны (17.09, разбор 16.09): страница объявлена viewport-fit=cover и заходит
     под чёлку и полосу жестов iPhone (на Android — под системную полосу, где Chrome это
     разрешает). Отступы — не меньше выреза сбоку и плюс полоса снизу. Где выреза нет,
     env() = 0 и всё как было; браузер без env() и max() эти строки пропускает. */
  .page{
    padding-left:max(clamp(12px,3vw,24px),env(safe-area-inset-left,0px));
    padding-right:max(clamp(12px,3vw,24px),env(safe-area-inset-right,0px));
    padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));
  }

  /* Перепрыгивалка «К главному» (Елена, 17.09): первая остановка Tab на каждом экране.
     Глазами её нет — спрятана над страницей; встали с клавиатуры — выезжает под шапку
     и выглядит как обычная тёмная плашка. Мышью её не достать и не задеть. */
  .skip{
    /* fixed, а не absolute: страницу могли прокрутить, а ссылка должна выехать
       там, где человек смотрит. top — из-под чёлки, как у шапки */
    position:fixed;left:50%;top:env(safe-area-inset-top,0px);z-index:60;
    transform:translate(-50%,-160%);
    padding:9px 18px;border-radius:0 0 12px 12px;
    background:var(--accent);color:var(--on-accent);
    font-family:"Golos Text",sans-serif;font-size:13.5px;text-decoration:none;
    transition:transform .18s ease;
  }
  .skip:focus{transform:translate(-50%,0)}
  /* у самого <main> рамки фокуса нет: на него прыгают, а не нажимают */
  main:focus{outline:none}

  /* ---------- шапка ---------- */
  /* Две группы по краям (Елена, 18.09): слева LENATION, меню и «назад», справа
     языки и солнце. Середина пустая, поэтому колонок больше нет — группы просто
     расходятся по краям, и каждая занимает ровно столько, сколько ей нужно. */
  header{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;padding:22px 0 0;
    padding-top:calc(22px + env(safe-area-inset-top,0px));   /* под чёлкой, если страница под неё зашла */
  }
  /* левый край одной строкой: логотип, вплотную меню, за ним «назад» */
  .side{display:flex;align-items:center;gap:8px;min-width:0}
  .brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);flex:none}
  /* «Назад» — круглая кнопка со стрелкой, ровно такая же, как солнце (Елена, 18.09).
     Словом она была до того, как языки переехали влево: пятеро в строке телефона,
     и слово упиралось в логотип. Размер и повадки общие с .theme — держим их
     рядом в файле, чтобы кнопки не разъехались при следующей правке. */
  .nav-back{
    width:40px;height:40px;display:grid;place-items:center;flex:none;
    border:1px solid var(--line);border-radius:999px;
    background:var(--surface);color:var(--muted);text-decoration:none;
    transition:color .2s ease,border-color .2s ease;
  }
  .nav-back svg{width:19px;height:19px;display:block}
  a.nav-back:hover{color:var(--text);border-color:var(--muted)}
  /* Знак чуть крупнее квадратика меню и на две точки ниже (Елена, 18.09, на глаз
     с телефона). До этого он был ровно вровень — сначала 34 в край кнопки, потом 32
     в её цветную часть, — и оба раза Елена видела разницу: залитый цветом квадрат
     рядом с бледной кнопкой читается иначе, чем показывают замеры. Поэтому размер
     и посадка тут не «как у соседа», а на глаз: 36 и вниз на 2. Скругление при 36
     выходит те же 9 точек, что у кнопки, — формы совпадают сами собой.
     Сдвиг — transform, а не отступ: он не толкает соседей и не двигает слово. */
  .brand svg{display:block;width:42px;height:42px;flex:none;transform:translateY(2px)}
  .brand span{
    font-family:"Jost","Golos Text",sans-serif;
    font-weight:500;font-size:17px;text-transform:uppercase;
    letter-spacing:.02em;
  }
  /* Правый край — одна вещь, а не две (Елена, 18.09): языки и солнце слиты в общую
     оправу. Рамка и подложка теперь у всей группы, а у языков и у солнца своих нет —
     иначе внутри пилюли рисовались бы рамки в рамке. */
  .controls{
    display:flex;align-items:center;gap:4px;
    border:1px solid var(--line);border-radius:999px;
    background:var(--surface);padding:3px;
  }
  /* нет связи (17.09): плашка под шапкой, при прокрутке держится у верха экрана */
  .offline{
    position:sticky;top:8px;top:calc(8px + env(safe-area-inset-top,0px));z-index:40;
    width:fit-content;max-width:100%;margin:12px auto 0;padding:8px 16px 8px 30px;
    font-family:"Golos Text",sans-serif;font-size:13px;line-height:1.4;text-align:center;text-wrap:balance;
    color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:18px;
    box-shadow:0 8px 24px -16px var(--scrim);
  }
  .offline::before{
    content:"";position:absolute;left:13px;top:50%;width:8px;height:8px;margin-top:-4px;
    border-radius:999px;background:var(--focus);
  }

  /* своей оправы у языков больше нет — она общая с солнцем, см. .controls */
  .lang{display:flex;align-items:center}
  .lang button{
    font-family:"Jost","Golos Text",sans-serif;
    font-size:13px;font-weight:500;letter-spacing:.08em;
    padding:7px 14px;border:0;border-radius:999px;cursor:pointer;
    background:transparent;color:var(--muted);
    transition:background-color .2s ease,color .2s ease;
  }
  .lang button[aria-pressed="true"]{background:var(--bg);color:var(--text)}
  .lang button:hover{color:var(--text)}

  /* Солнце живёт внутри той же пилюли, что и языки: без своей рамки и подложки,
     ростом с кнопку языка (30, а не 34) — иначе оправа раздувается и правый край
     становится выше левого. */
  .theme{
    width:34px;height:34px;display:grid;place-items:center;
    border:0;border-radius:999px;
    background:transparent;color:var(--muted);cursor:pointer;
    transition:color .2s ease,background-color .2s ease;
  }
  .theme:hover{color:var(--text)}
  .theme svg{width:18px;height:18px}
  .theme .sun{display:block}
  .theme .moon{display:none}
  :root[data-theme="dark"] .theme .sun{display:none}
  :root[data-theme="dark"] .theme .moon{display:block}
  /* В узком окне шапка плотнее: слева трое (логотип, меню, «назад»), справа языки
     и солнце — без этого на телефоне края сходятся. Кнопки языка ужаты с боков,
     промежутки с 12 до 8 и до 6. Блок стоит после правил .lang и .controls
     нарочно: при равной специфичности побеждает тот, что ниже. */
  @media (max-width:560px){
    header{gap:8px}
    .side{gap:6px}
    .lang button{padding:7px 5px}
  }
  /* Когда слово Lenation прячется, оставляя один знак. Пороги перемеряны 18.09,
     после того как всё в шапке выросло «в упор» под Redmi 7 (Елена):
     · на экранах с «назад» — до 395px. Слева там трое, логотип, меню и стрелка,
       и слово рядом с ними помещается только на Motorola (412) и шире;
     · на всех остальных — до 355px. На Redmi (360) слово остаётся, но стоит
       впритык к пилюле, в 12 точках: так и задумано, крупнее уже некуда.
     Запаса в 15 точек, как у прежних порогов, здесь нет нарочно: этот запас и был
     тем местом, которое Елена просила отдать значкам. */
  @media (max-width:395px){
    header[data-back] .brand span{display:none}
  }
  @media (max-width:355px){
    header .brand span{display:none}
  }

  /* ---------- меню ---------- */
  /* Правка 18.09 (Елена): «кнопочка меню» в шапке. Три чёрточки в квадратике со
     скруглением — той же формы, что логотип: слева квадрат с буквой, справа квадрат
     с чёрточками. Стоит вплотную к логотипу, слева; открыто — верхняя и нижняя чёрточки
     складываются в крестик, средняя гаснет. Панель висит под кнопкой и прибита к
     левому краю шапки (с 18.09 кнопка меню стоит слева, у логотипа), поэтому у шапки
     появился position:relative — панель вынута из потока, строка шапки её не видит. Ширина панели — 280px или ширина окна
     минус поля, что меньше: на узком телефоне она не упирается в края.
     Языки остаются в шапке на всех экранах (Елена вернула их 18.09 после пробы с
     переездом в меню). Расплата — место: пятый предмет в строке телефона лишний,
     и слово LENATION на экранах уже 400px прячется, остаётся знак. */
  header{position:relative}
  .burger{
    /* крупнее соседей: 45 против 40 у «назад» и знака — так захотела Елена 18.09,
       подгоняя шапку на глаз с телефона */
    width:45px;height:45px;display:grid;place-items:center;
    /* 11.8px на 45px — то же отношение стороны к скруглению, что у логотипа (16 на 64) */
    border:1px solid var(--line);border-radius:11.8px;
    background:var(--surface);color:var(--muted);cursor:pointer;
    transition:color .2s ease,border-color .2s ease;
  }
  .burger:hover{color:var(--text);border-color:var(--muted)}
  .burger svg{width:21px;height:21px}
  .burger .b1,.burger .b2,.burger .b3{
    transform-box:view-box;transform-origin:center;
    transition:transform .22s ease,opacity .16s ease;
  }
  /* сначала чёрточка съезжает к середине, потом поворачивается — порядок в CSS
     читается справа налево, поэтому translateY стоит вторым */
  .burger[aria-expanded="true"] .b1{transform:rotate(45deg) translateY(4px)}
  .burger[aria-expanded="true"] .b2{opacity:0}
  .burger[aria-expanded="true"] .b3{transform:rotate(-45deg) translateY(-4px)}

  .menu{
    position:absolute;top:100%;left:0;z-index:50;
    margin-top:10px;width:min(280px,calc(100vw - 32px));
    display:flex;flex-direction:column;padding:8px;
    background:var(--surface);border:1px solid var(--line);border-radius:18px;
    box-shadow:0 18px 40px -22px var(--scrim);
    opacity:0;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s ease;
  }
  .menu.on{opacity:1;transform:none}
  .menu a{
    padding:11px 14px;border-radius:12px;
    font-family:"Jost","Golos Text",sans-serif;
    font-size:15.5px;font-weight:400;letter-spacing:.01em;
    color:var(--text);text-decoration:none;
    transition:background-color .15s ease,color .15s ease;
  }
  .menu a:hover{background:var(--bg)}
  /* страница, на которой стоишь: тем же цветом, что и всё главное на сайте */
  .menu a[aria-current="page"]{color:var(--accent)}

  /* ---------- страницы за меню ---------- */
  /* Столбик по центру, как на экране согласия: одна строка вместо заголовка,
     короткие абзацы, при надобности ряд карточек и кнопка. Отдельный класс,
     а не общий с .consent, нарочно: у согласия своя судьба, эти страницы —
     чтение, и правки одного не должны ездить по другому. */
  .doc{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:clamp(20px,3.6vw,40px) 0 0;
    gap:clamp(14px,2.2vw,20px);
  }
  .doc .u-label{margin-bottom:clamp(2px,.6vw,6px)}
  .doc .services{margin-top:0}
  .doc .cta{margin-top:clamp(10px,1.8vw,18px)}
  /* цена и другие числа, ради которых человек пришёл на страницу */
  .doc .big{
    margin:0;font-family:"Jost","Golos Text",sans-serif;
    font-weight:300;font-size:clamp(30px,5.4vw,46px);
    line-height:1.05;letter-spacing:-.015em;color:var(--text);
  }
  /* почта: не кнопка, но и не просто строка — трогать хочется */
  .doc .mail{
    font-family:"Jost","Golos Text",sans-serif;
    font-size:clamp(18px,2.4vw,24px);font-weight:400;letter-spacing:.01em;
    color:var(--accent);text-decoration:none;
    border-bottom:1px solid transparent;transition:border-color .2s ease;
  }
  .doc .mail:hover{border-bottom-color:var(--accent)}

  /* ---------- герой ---------- */
  /* Правка 11.09, третий заход. Все три промежутка первого экрана — над
     заголовком, между ним и кнопкой, между кнопкой и лентой — сжаты ещё
     примерно на треть от прошлого захода. Заголовок стоит почти под шапкой,
     видео начинаются сразу за кнопкой. Верхняя граница клампов для
     десктопа, нижняя — для телефона. */
  .hero{padding:clamp(14px,3vw,36px) 0 clamp(18px,3vw,32px);text-align:center}
  h1{
    font-family:"Jost","Golos Text",sans-serif;
    font-weight:300;
    font-size:clamp(29px,6.2vw,64px);
    line-height:1.08;letter-spacing:-.015em;
    text-wrap:balance;margin:0 auto;max-width:15ch;
  }
  h1 em{font-style:normal;color:var(--accent);font-weight:400}
  .cta{
    margin-top:clamp(12px,2vw,20px);
    font-family:"Jost","Golos Text",sans-serif;
    font-size:clamp(12px,1.4vw,14px);font-weight:500;letter-spacing:.16em;
    padding:clamp(15px,2vw,20px) clamp(34px,6vw,52px);
    border:0;border-radius:999px;cursor:pointer;
    display:inline-block;text-decoration:none;
    background:var(--accent);color:var(--on-accent);
    transition:background-color .2s ease,transform .12s ease;
  }
  .cta:hover{background:var(--accent-hover)}
  .cta:active{transform:translateY(1px)}
  /* Кнопка главной — самая длинная надпись пути («Создаём вирусный ролик с тобой»,
     Елена 12.09). На телефоне ей оставлены отступы по 22px вместо 34, чтобы
     надпись меньше мельчала; с 567px и шире — как у всех кнопок. Сама надпись
     под самоподгонкой (data-fit="10"), см. fitLines() в app.js. */
  .hero .cta{padding-left:clamp(22px,6vw,52px);padding-right:clamp(22px,6vw,52px)}
  @media (max-width:420px){ .hero .cta{letter-spacing:.12em} } /* на телефоне разрядка чуть уже: 30 букв */

  /* ---------- лента: три в строке, на телефоне две ---------- */
  /* minmax(0,1fr), а не 1fr: у 1fr нижняя граница — min-content самой карточки,
     а в ней есть кнопка «СО МНОЙ» с white-space:nowrap. Страховка, чтобы сетка
     на узком экране ни при каких подписях не выросла шире окна. */
  .grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(6px,1.2vw,13px);
    width:100%;max-width:660px;margin-inline:auto;
  }
  /* Правка 11.09. Три плитки на узком экране оставляли карточке около
     120 пикселей: числа и подписи в ней не читались. Две в строке — и
     карточка снова понятна без прищура. */
  @media (max-width:560px){
    .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  }

  .more{
    display:block;width:fit-content;margin:clamp(30px,5vw,46px) auto 0;
    font-family:"Golos Text",sans-serif;font-size:13.5px;color:var(--muted);
    background:none;border:0;cursor:pointer;text-decoration:none;
    transition:color .2s ease;
  }
  .more:hover{color:var(--text)}

  :is(button,a):focus-visible{outline:2px solid var(--focus);outline-offset:3px}

  /* Строка только для диктора (17.09): глазами её нет, вслух читается. Так сказаны
     вещи, которых на экране нет словами, — «показано 12 роликов из 24», «5 вариантов».
     Не display:none и не visibility:hidden: спрятанное так диктор тоже не читает. */
  .aloud{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation:none!important;transition:none!important}
  }
  /* ================= экран 2: витрина ================= */
  /* Правка 12.09. Второй экран подогнан под первый: строка видео начинается
     ровно на той же высоте, и при переходе лента не прыгает.
     Первый экран стоит на месте дважды — до ~467px все его клампы лежат на
     минимуме, после 1200px все на максимуме. Поэтому шесть промежутков
     второго экрана едут по той же дороге — двумя отрезками, потому что
     заголовок главной растёт до 1032px быстро, а дальше почти стоит:
     --ramp-a это 467→1032px, --ramp-b это 1032→1200px.
     Сумма шести промежутков: 62px на телефоне, 155px на 1032, 162px дальше —
     ровно высота героя главной. Меняешь первый экран — перемерь этот.
     Мерилка: prototype/_align.html, открыть в headless Chrome. */
  :root{
    --ramp-a:clamp(0px,calc(100vw - 467px),565px);
    --ramp-b:clamp(0px,calc(100vw - 1032px),168px);
  }
  .ask{
    padding:calc(16px + var(--ramp-a) * .0658 + var(--ramp-b) * .0238) 0
            calc(12px + var(--ramp-a) * .0230 + var(--ramp-b) * .0060);
    text-align:center;
  }
  .ask-title{
    font-family:"Jost","Golos Text",sans-serif;
    font-weight:300;font-size:clamp(25px,4.4vw,42px);
    line-height:1.12;letter-spacing:-.012em;margin:0;max-width:none;
    text-wrap:balance; /* если вопрос всё же переносится — ровно пополам */
  }
  .slot{
    display:flex;flex-direction:column;align-items:center;
    --sg:clamp(9px,1.5vw,13px);
    gap:var(--sg);
    margin-top:calc(8px + var(--ramp-a) * .0198 + var(--ramp-b) * .0060);
  }
  .slot[hidden]{display:none}
  .field{
    width:min(440px,100%);
    font-family:"Golos Text",sans-serif;font-size:clamp(14px,1.7vw,16px);
    text-align:center;color:var(--text);
    background:var(--surface);
    border:1px solid var(--line);border-radius:999px;
    padding:clamp(14px,2vw,17px) 22px;
    transition:border-color .2s ease,background-color .2s ease;
  }
  /* iPhone увеличивает всю страницу, когда касаешься поля мельче 16px, и сама она обратно
     не возвращается. Запретить это нельзя: Apple с 2016 года игнорирует запрет нарочно,
     ради людей со слабым зрением. Лекарство одно — 16px; у полей карты (.cf) так и сделано.
     Елена, 17.09: поднимать только на iPhone, на Android вид оставить как был. Телефоны
     Apple отличаем по -webkit-touch-callout — его поддерживает только их браузер.
     Набранный текст от этого не мельчает: у поля fitLines() правит лишь подсказку (--ph).
     18.09: убрана рамка «экран не шире 560px». Повернул телефон горизонтально — экран стал
     844px, лечение отваливалось, и страница снова прыгала при касании поля. Теперь 16px на
     любом устройстве Apple в любом повороте; на компьютере и на Android всё как было. */
  @supports (-webkit-touch-callout:none){
    .field{font-size:16px}
  }
  /* --ph ставит fitPlaceholder() в app.js, когда подсказка шире поля; без неё — 1em */
  .field::placeholder{color:var(--muted);opacity:1;font-size:var(--ph,1em)}
  /* Пока поле пустое и на него не нажали, курсор не мигает посреди подсказки: текст
     читается ровно по центру. Правка 18.09 (Елена: «на Redmi не мог вставить»): курсор
     прячем только до касания. Раньше его не было и в фокусе — а Android вешает всплывающее
     «Вставить» именно на курсор: цепляться было не за что, и меню не выходило. */
  .field:placeholder-shown:not(:focus){caret-color:transparent}
  .field:focus{outline:none;border-color:var(--accent);background:var(--bg)}
  .hint{
    margin:0;font-family:"Golos Text",sans-serif;
    font-size:13px;color:var(--muted);
  }
  /* ---- ошибка: одна строка на весь сайт (Елена, 18.09) ----
     Раньше каждая ошибка была нарисована по-своему: серая под полем, розовая на оплате,
     чёрная в ленте — семь видов. Серая — худшая из них: «Кажется, в номере карты опечатка»
     стояла среди примечаний вроде «Без подписки» и читалась как сноска, а что это беда,
     выдавала одна рамка поля. Решение Елены: подсказки остаются серыми, но как только это
     ошибка — строка окрашивается. Чуть крупнее подсказки: её читают, а не проглядывают.
     Класс ставит и снимает LEN.oops — он же снимает .hint, чтобы порядок правил не решал. */
  .oops{
    margin:0;font-family:"Golos Text",sans-serif;
    font-size:14px;line-height:1.45;color:var(--focus);text-wrap:balance;
  }
  .oops.mid{text-align:center}
  /* На экране 3 ошибка занимает место обещания — это главная строка экрана,
     и размер у неё её же (см. .vow), меняется только цвет. Цвет повторяем здесь:
     .vow стоит в файле ниже и при равном весе перебил бы .oops. */
  .vow.oops{font-size:clamp(15px,1.7vw,17px);color:var(--focus)}
  /* Ждущая кнопка (17.09): выглядит ровно как раньше, но для клавиатуры и читалки
     остаётся на месте — «пока нельзя» и причину говорит aria-disabled (см. LEN.wait). */
  .cta[disabled],.cta[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
  .cta[disabled]:hover,.cta[aria-disabled="true"]:hover{background:var(--accent)}

  .rule{
    border:0;border-top:1px solid var(--line);
    margin:calc(10px + var(--ramp-a) * .0296 + var(--ramp-b) * .0060) auto
           calc(8px + var(--ramp-a) * .0132);
    width:min(600px,86%);
  }
  .section-label{
    text-align:center;margin:0 0 calc(8px + var(--ramp-a) * .0132);
    font-family:"Golos Text",sans-serif;font-size:13.5px;
    color:var(--muted);letter-spacing:.01em;
    text-wrap:balance; /* на самом узком телефоне подпись переносится ровно пополам */
  }

  /* aria-disabled, а не disabled: погасшая по-настоящему кнопка теряет фокус,
     и человек с клавиатуры оказывается в начале страницы (17.09) */
  .more[aria-disabled="true"]{cursor:default;opacity:.65}
  .more[aria-disabled="true"]:hover{color:var(--muted)}

  .back{
    font-family:"Golos Text",sans-serif;font-size:13px;
    color:var(--muted);background:none;border:0;cursor:pointer;
    padding:2px 4px;text-decoration:none;transition:color .2s ease;
  }
  .back:hover{color:var(--text)}

  /* «Хочу такой» ближе к подсказке про 18 секунд: половина общего зазора.
     Работает только когда кнопка идёт сразу за подсказкой, поэтому
     закрытое состояние на второй странице не съезжает. */
  .slot .hint + .cta{margin-top:calc(var(--sg) / -2)}

  /* Кнопка внутри слота не наследует большой отступ от героя главной —
     иначе зазор до заголовка держится независимо от настроек слота. */
  .slot .cta{margin-top:0}

  /* Правка 16.09, Елена: на витрине зазор между «Кинь ссылку на ролик» и чертой был
     «вообще ни о чём» — 54px на компьютере, 22 на телефоне. Теперь он как на 2b:
     12px на телефоне, 20 на компьютере. Ужат только он, поэтому лента витрины начинается
     выше, чем на главной (на телефоне на 10px, на компьютере на 34) — равнение 12.09
     из комментария выше на витрине этим снято. */
  .showcase .ask{padding-bottom:0}
  .showcase .rule{margin-top:clamp(12px,1.8vw,20px)}

  /* ================= экран 2b: витрина под профессию ================= */
  /* Правка 15.09, Елена: сюда ведёт кнопка главной, когда «кто ты» выбрано. Похоже
     на витрину, но компактнее: подписи «или выбери из трендов» нет, промежутки ужаты —
     лента начинается выше, чтобы ролики было хорошо видно. Размер вопроса и кнопки —
     как на витрине: ужимаются только отступы (Елена, 15.09).
     Верх — отступ над вопросом и до кнопки — не трогаем: вопрос стоит ровно там же,
     где на 2а, а поле 2а встаёт на место кнопки. Нажал «Кинь ссылку» — ничего не прыгает
     (Елена, 15.09). Ужаты только промежутки ниже кнопки.
     С главной на одну высоту здесь не равняемся нарочно: лента всё равно другая. */
  .mine .ask{padding-bottom:0}
  .mine .rule{margin:clamp(12px,1.8vw,20px) auto}
  .mine .whoami.under{margin-bottom:clamp(10px,1.6vw,18px)}

  /* ================= экран 2а: инструкция про ссылку ================= */
  /* Правка 12.09, решение Елены. Под «Хочу такой» — ссылка-текст; она
     раскрывает три площадки, площадка — два шага с картинками. Всё на этом
     же экране, открыта всегда одна площадка. Картинки — схемы телефона
     (см. 2a.html), настоящие скриншоты лягут в howto/ и подменят их сами. */
  .howto{
    display:flex;flex-direction:column;align-items:center;
    gap:clamp(10px,1.6vw,14px);width:min(440px,100%);
  }
  .howto-open{
    font-family:"Golos Text",sans-serif;font-size:13px;line-height:1.45;
    color:var(--muted);background:none;border:0;cursor:pointer;padding:2px 4px;
    text-decoration:underline;text-decoration-style:dotted;
    text-decoration-color:var(--muted);text-underline-offset:3px;
    text-wrap:balance;transition:color .2s ease;
  }
  .howto-open:hover,.howto-open.on{color:var(--text)}

  /* Три площадки — всегда в одну строку (Елена, 12.09: на Redmi «YouTube» уезжал
     на вторую). Все размеры ряда — в em от --tab: если ряд шире колонки,
     fitLines() в app.js уменьшает --tab, и вместе со шрифтом ужимаются
     отступы, зазоры и иконки. Сам ряд стал плотнее: зазор 6px вместо 8,
     отступы 12px вместо 15, разрядка .07em вместо .1em. */
  .howto-tabs{
    display:flex;flex-wrap:wrap;justify-content:center;
    font-size:var(--tab,12px);gap:.5em;
  }
  .tab{
    display:inline-flex;align-items:center;gap:.5em;white-space:nowrap;
    font-family:"Jost","Golos Text",sans-serif;
    font-size:1em;font-weight:500;letter-spacing:.07em;
    padding:.75em 1em;border:1px solid var(--line);border-radius:999px;
    background:var(--surface);color:var(--text);cursor:pointer;
    transition:border-color .2s ease,background-color .2s ease,color .2s ease;
  }
  .tab:hover{border-color:var(--muted)}
  /* иконка из ленты: там она белая с тенью на обложке, здесь — цвет текста */
  .tab .plat{width:1.15em;height:1.15em;color:currentColor;filter:none}
  .tab[aria-selected="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

  .howto-panel{
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,16px);
    width:100%;
  }
  .step{
    margin:0;display:flex;flex-direction:column;align-items:center;
    gap:8px;text-align:center;min-width:0;
  }
  .step .pic{position:relative;width:min(100%,190px)}
  /* номер шага — наклейкой в левом верхнем углу картинки (Елена, 12.09);
     под картинкой только текст */
  .step .pic::before{
    content:counter(step);counter-increment:step;
    position:absolute;top:9px;left:9px;z-index:1;
    display:grid;place-items:center;width:22px;height:22px;border-radius:999px;
    background:var(--accent);color:var(--on-accent);
    font-family:"Jost","Golos Text",sans-serif;font-size:12px;font-weight:500;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  .step .pic svg,.step .pic img{display:block;width:100%;height:auto;border-radius:14px}
  .step .pic img{border:1px solid var(--line)}
  .step figcaption{
    font-size:13px;line-height:1.45;color:var(--text);
    max-width:22ch;text-wrap:pretty;
  }
  .howto-panel{counter-reset:step}

  /* Правка 17.09, Елена: от «Инструкции…» до черты было слишком далеко — 26px на телефоне,
     58 на компьютере, а под чертой до подписи ленты 9 и 16. Теперь черта ровно посередине:
     над ней столько же, сколько под ней. Отступ черты на 3px меньше нижнего — столько
     добавляют поля и межстрочный воздух самой кнопки-ссылки. Лента 2а из-за этого
     начинается выше, чем на главной, — равнение 12.09 здесь снято, как на витрине. */
  .ownlink .ask{padding-bottom:0}
  .ownlink .rule{margin-top:calc(5px + var(--ramp-a) * .0132)}
  /* раскрытая инструкция кончается таблетками или подписями шагов — без запаса они
     ложатся на черту вплотную (5px на телефоне); запас — тот же шаг, что внутри слота */
  .ownlink .howto.open{padding-bottom:var(--sg)}

  /* ================= экран 3: твой ролик ================= */
  /* По схеме из проектирования пути: «назад» в шапке, ролик целиком (9:16,
     в ленте кадр режется до 3:4, а здесь человек должен увидеть, что выбрал),
     одна фраза про лицо и голос, одна кнопка. Один столбик на любом экране. */
  .pick{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:clamp(8px,1.5vw,14px) 0 0; /* вплотную к шапке */
  }

  /* Строка-вопрос под роликом (Елена, 18.09: «перенеси под видео, чтобы он был между
     этим видео и "твоё лицо и твой голос остаются"»). Отступы поменялись местами вместе
     с ней: сверху прижата к кадру (10-14px), снизу — вплотную к обещанию (6-9px, отступ
     .vow). Вышло с третьего раза. Сначала стояло 12 сверху и 14 снизу — вопрос висел ровно
     посередине и принадлежал обоим соседям. Потом отступ снизу развели вдвое (18-24) —
     Елена в тот же час: «поближе друг к другу сделай эти текста, что на компьютере,
     что на телефоне, слишком далеко друг от друга». Теперь наоборот: снизу теснее, чем
     сверху, и две строки читаются как один блок под роликом — вопрос и ответ на то,
     что будет с лицом и голосом.
     Сначала просили покрупнее и пожирнее,
     и она стояла в Jost 700; в тот же день, посмотрев: «этот слишком жирный и слишком
     какой-то странный шрифт, поменяй, сделай это как-то попроще». Жирная кириллица Jost
     и правда выглядит чужой: буквы геометрические, штрихи тяжёлые, и рядом с лёгким
     обещанием под кадром строка кричала. Теперь вес обычный, 400 — тот же Jost, которым
     на сайте говорят все заголовки (главная и витрина — 300), то есть ничего особенного
     на этом экране больше не происходит. Вместе с весом ушёл и вызов из 3.html: жирный
     Jost со шрифтовой службы больше не тянем.
     Размер чуть скромнее прежнего (22-30px вместо 24-32): строка перестала упираться
     в края телефона — на Redmi 360px колонка 320px, испанский вопрос просит 288px.
     Ниже 18px не мельчаем (data-fit в 3.html), но до этой планки дело не доходит.
     В беде («ролика уже нет», «не загрузился», «нужен покороче») строка скрывается:
     спрашивать «этот ли ролик» над пустой рамкой не о чем — см. oopsVow в 3.html. */
  .pick-ask{
    /* max-width:none — у общего h1 колонка 15ch (так же снято у .u-label на 5 и 7):
       строке нужна вся ширина экрана, иначе она ломается уже на компьютере */
    margin:clamp(10px,1.6vw,14px) 0 0;max-width:none;
    font-family:"Jost","Golos Text",sans-serif;
    font-weight:400;font-size:clamp(22px,2.6vw,30px);
    letter-spacing:.005em;line-height:1.2;color:var(--text);
    text-wrap:balance;
  }

  .stage{
    margin:0;display:flex;flex-direction:column;gap:10px;
    width:min(280px,60vw);
  }
  .frame{
    position:relative;aspect-ratio:9/16;
    border-radius:16px;overflow:hidden;
    background:linear-gradient(160deg,var(--tile-a),var(--tile-b));
    border:1px solid var(--line);
    box-shadow:0 24px 48px -28px var(--scrim);
  }
  .frame .cover,.frame .clip{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;
  }
  .frame .clip{opacity:0;transition:opacity .3s ease;pointer-events:none}
  .frame.playing .clip{opacity:1}
  /* ссылку не узнали — тихая иконка вместо кадра */
  .frame .s-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}
  .frame .s-empty svg{width:30px;height:30px;opacity:.6}

  /* чужой плеер: карточке Instagram нужно не меньше 326 px ширины,
     высоту она сообщает сама — поэтому рамка без фиксированной пропорции */
  .pick.embed .stage{width:min(340px,100%)}
  .frame.embed{aspect-ratio:auto;background:#fff}
  .frame.embed iframe{display:block;width:100%;height:100%;border:0}
  /* обрезанная карточка Instagram: видно только квадрат с видео */
  .frame.embed.crop{background:#fff}
  .frame.embed.crop iframe{height:auto}

  .credit{
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:13px;color:var(--muted);min-width:0;
  }
  .credit .c-who{
    color:var(--text);font-weight:500;text-decoration:none;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
  }
  .credit a.c-who:hover{color:var(--accent)}
  .credit .c-plat::before{content:"·";margin-right:8px}

  .vow{
    /* вплотную к вопросу над ним (Елена, 18.09: «слишком далеко друг от друга»):
       меньше, чем зазор ролик-вопрос, — два текста живут одним блоком */
    margin:clamp(6px,.8vw,9px) 0 0;max-width:40ch;
    font-size:clamp(15px,1.7vw,17px);line-height:1.5;color:var(--text);
    text-wrap:balance;
  }
  .pick .cta{margin-top:clamp(4px,.8vw,6px)} /* вплотную к фразе «потом удаляются сами» */

  @media (max-width:720px){
    .stage{width:min(200px,54vw)}
  }

  /* ================= экран 4: фото и голос ================= */
  /* По схеме: «назад» в шапке, блок «Фото» с пятью слотами, блок «Голос»
     с одной записью (загрузку убрали 18.09), галочка про условия, одна кнопка
     «дальше», внизу «удалить всё».
     Один столбик, минимум текста, ничего никуда не уходит из браузера. */
  .upload{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:clamp(20px,3.6vw,40px) 0 0;
    gap:clamp(26px,4.4vw,44px);
  }
  .block{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vw,14px)}
  .u-label{
    /* max-width и text-wrap — вслед за тем, что строка стала названием экрана (h1) на 5 и 7:
       у общего h1 колонка 15ch и перенос «поровну», а этим строкам нужно как было (17.09) */
    margin:0;max-width:none;text-wrap:wrap;font-family:"Jost","Golos Text",sans-serif;
    font-weight:400;font-size:clamp(20px,2.6vw,26px);
    line-height:1.1;letter-spacing:-.005em;
  }
  .u-text{
    margin:0;max-width:34ch;
    font-size:clamp(15px,1.7vw,17px);line-height:1.5;color:var(--text);
    text-wrap:balance;
  }

  /* пять слотов в ряд, всегда — на телефоне ужимаются вместе с окном */
  .cells{
    display:grid;grid-template-columns:repeat(5,1fr);
    gap:clamp(6px,1.2vw,10px);
    width:min(460px,100%);margin-top:clamp(4px,.8vw,8px);
  }
  .cell{
    position:relative;aspect-ratio:3/4;
    border:1px solid var(--line);border-radius:clamp(8px,1.4vw,12px);
    background:var(--surface);color:var(--muted);
    display:grid;place-items:center;padding:0;cursor:pointer;
    overflow:hidden;
    transition:border-color .2s ease,color .2s ease,background-color .2s ease;
  }
  button.cell:hover{border-color:var(--muted);color:var(--text)}
  .cell svg{width:clamp(18px,2.6vw,24px);height:clamp(18px,2.6vw,24px)}
  .cell.full{cursor:default;border-color:transparent}
  .cell.full img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .cell .x{
    position:absolute;top:4px;right:4px;width:22px;height:22px;
    display:grid;place-items:center;padding:0;border:0;border-radius:999px;
    background:var(--chip);color:var(--chip-text);cursor:pointer;
    opacity:.92;transition:opacity .2s ease;
  }
  .cell .x svg{width:11px;height:11px}
  .cell .x:hover{opacity:1}

  /* пока файлы летят в окно — все свободные ячейки светятся, видно куда попадёшь */
  .cells.drop .cell:not(.full){border-color:var(--accent);color:var(--accent);background:var(--surface)}

  /* подсказка про мультивыбор нужна только там, где есть мышь: на телефоне
     системный выбор фото и так многострочный, а перетаскивать нечем */
  .u-hint{display:none}
  @media (hover:hover) and (pointer:fine){
    .u-hint{
      display:block;margin:0;
      font-size:clamp(12px,1.3vw,13px);line-height:1.4;color:var(--muted);
    }
  }

  /* кнопка голоса: одна тихая таблетка (до 18.09 их было две — рядом стояла «загрузить») */
  .voice{
    display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:clamp(8px,1.4vw,12px);margin-top:clamp(4px,.8vw,8px);min-height:48px;
  }
  .ghost{
    font-family:"Jost","Golos Text",sans-serif;
    font-size:clamp(12px,1.4vw,13px);font-weight:500;letter-spacing:.14em;
    padding:clamp(12px,1.6vw,15px) clamp(22px,3.4vw,30px);
    border:1px solid var(--line);border-radius:999px;cursor:pointer;
    background:var(--surface);color:var(--text);
    display:inline-flex;align-items:center;gap:10px;
    transition:border-color .2s ease,background-color .2s ease,transform .12s ease;
  }
  .ghost:hover{border-color:var(--muted);background:var(--bg)}
  .ghost:active{transform:translateY(1px)}
  /* идёт запись: точка дышит, таймер бежит */
  .ghost.live{border-color:var(--focus);color:var(--text)}
  .ghost .dot{width:9px;height:9px;border-radius:999px;background:var(--focus);animation:breathe 1.2s ease-in-out infinite}
  .ghost .clock{font-family:"Golos Text",sans-serif;font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums;min-width:8ch;text-align:left}
  @keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}

  /* голос есть: послушать, длина, заново */
  .have{display:inline-flex;align-items:center;gap:12px}
  .play{
    width:44px;height:44px;display:grid;place-items:center;padding:0;
    border:1px solid var(--line);border-radius:999px;cursor:pointer;
    background:var(--surface);color:var(--text);
    transition:border-color .2s ease,background-color .2s ease;
  }
  .play:hover{border-color:var(--muted);background:var(--bg)}
  .play svg{width:18px;height:18px}
  .have .len{font-size:15px;font-variant-numeric:tabular-nums;color:var(--text)}

  .upload .cta{margin-top:clamp(2px,.6vw,6px)}

  /* Галочка про условия (Елена, 18.09) — стоит вплотную над кнопкой, вместе с ней
     одной группой: пока не отмечена, «Дальше» серая. Настоящий <input> на месте
     (его видят клавиатура и читалка), глазами — квадратик рядом со строкой.
     Слово «условиями» — тихая ссылка на экран 5, пунктиром, как «Инструкция» на 2а. */
  .agree{
    display:flex;flex-direction:column;align-items:center;
    gap:clamp(10px,1.6vw,14px);width:100%;
  }
  .tick{
    position:relative;display:inline-flex;align-items:center;gap:10px;
    padding:8px 4px;cursor:pointer;max-width:34ch;
    font-size:clamp(14px,1.6vw,16px);line-height:1.4;color:var(--text);
    text-align:left;
  }
  .tick input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
  .mark{
    flex:none;width:22px;height:22px;display:grid;place-items:center;
    border:1px solid var(--line);border-radius:6px;background:var(--surface);
    color:transparent;
    transition:border-color .2s ease,background-color .2s ease,color .2s ease;
  }
  .mark svg{width:14px;height:14px}
  .tick:hover .mark{border-color:var(--muted)}
  .tick input:checked + .mark{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .tick input:focus-visible + .mark{outline:2px solid var(--focus);outline-offset:3px}
  /* слово «условиями» — кнопка внутри строки: голосом и пунктиром как «Инструкция»
     на 2а, но ростом со строку, в которой стоит */
  .terms-open{
    font:inherit;color:var(--text);background:none;border:0;padding:0;cursor:pointer;
    text-decoration:underline;text-decoration-style:dotted;
    text-decoration-color:var(--muted);text-underline-offset:3px;
    transition:color .2s ease;
  }
  .terms-open:hover,.terms-open.on{color:var(--accent);text-decoration-color:var(--accent)}

  /* Окошко с условиями (Елена, 18.09): то же, что на экране 5, только короче.
     Открывается под галочкой и отодвигает «Дальше» вниз — ничего не заслоняет
     и ничего не уводит с экрана, как инструкция на 2а. */
  .terms{
    width:min(420px,100%);margin:0;
    display:flex;flex-direction:column;gap:clamp(8px,1.4vw,11px);
    padding:clamp(14px,2.2vw,18px) clamp(15px,2.4vw,20px);
    border:1px solid var(--line);border-radius:14px;background:var(--surface);
    text-align:left;
  }
  .terms p{
    margin:0;font-family:"Golos Text",sans-serif;
    font-size:clamp(13px,1.5vw,14px);line-height:1.5;color:var(--text);
    text-wrap:pretty;
  }
  .terms b{font-weight:500}

  /* «удалить всё» — внизу, тихая таблетка. Есть на экранах 4–6. С экрана 7 убрана
     (Елена, 18.09): «не дай бог ещё нажму туда после оплаты» — там заказ уже в работе */
  .wipe{
    margin-top:clamp(6px,1.4vw,14px);
    font-family:"Jost","Golos Text",sans-serif;
    font-size:12px;font-weight:500;letter-spacing:.14em;
    padding:12px 24px;border:1px solid var(--line);border-radius:999px;
    background:transparent;color:var(--muted);cursor:pointer;
    transition:color .2s ease,border-color .2s ease;
  }
  .wipe:hover{color:var(--text);border-color:var(--muted)}
  /* спрашивает «точно?» — тревожным цветом, чтобы второе нажатие было осознанным (LEN.sure) */
  .wipe.armed{color:var(--focus);border-color:var(--focus)}

  /* ================= экран 5: согласие ================= */
  /* По схеме: одна строка вместо заголовка, три абзаца, «согласен», внизу
     «удалить всё». Ни галочек, ни «я прочитал» — согласие и есть кнопка. */
  .consent{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:clamp(20px,3.6vw,40px) 0 0;
    gap:clamp(14px,2.2vw,20px);
  }
  .consent .u-label{margin-bottom:clamp(2px,.6vw,6px)}
  .c-text{
    margin:0;max-width:42ch;
    font-size:clamp(15px,1.7vw,17px);line-height:1.5;color:var(--text);
    text-wrap:pretty;
  }
  /* кто именно трогает фото и голос: три тихие карточки, имя и роль */
  /* ряд — продолжение абзаца после двоеточия, поэтому зазор сверху вдвое меньше общего */
  .services{
    list-style:none;margin:clamp(-7px,-1.1vw,-10px) 0 0;padding:0;
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:clamp(6px,1.2vw,10px);max-width:100%;
  }
  .services li{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:clamp(9px,1.4vw,12px) clamp(12px,2vw,18px);
    border:1px solid var(--line);border-radius:14px;background:var(--surface);
    min-width:0;
  }
  .services b{font-weight:500;font-size:clamp(13px,1.5vw,15px);white-space:nowrap}
  .services span{font-size:12px;color:var(--muted);letter-spacing:.02em}
  .consent .cta{margin-top:clamp(10px,1.8vw,18px)}
  .consent .wipe{margin-top:clamp(10px,2vw,20px)}
  /* узкий телефон (Redmi 7 — 360px): три карточки не влезали в ряд, а ручной
     перенос после двоеточия ломал абзац на четыре рваные строки */
  @media (max-width:380px){
    .c-text br{display:none}
    .services{gap:6px}
    .services li{padding:9px 8px}
    .services b{font-size:12.5px}
  }

  /* ================= экран 6: оплата ================= */
  /* Один ролик, одна цена. Столбик чекаута шириной 400px: строка чека,
     кошелёк устройства одной кнопкой, карта тремя полями, сумма на кнопке,
     строка доверия. Внизу «удалить всё», как на 4 и 5. */
  .pay{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    padding:clamp(20px,3.6vw,40px) 0 0;
    gap:clamp(12px,2vw,16px);
  }
  .pay > *{width:min(400px,100%)}
  .order{
    display:flex;align-items:center;gap:14px;text-align:left;
    padding:12px 16px 12px 12px;
    border:1px solid var(--line);border-radius:18px;background:var(--surface);
  }
  .thumb{
    flex:none;position:relative;width:42px;aspect-ratio:9/16;
    border-radius:8px;overflow:hidden;
    background:linear-gradient(160deg,var(--tile-a),var(--tile-b));
    display:grid;place-items:center;color:var(--muted);
  }
  .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .thumb svg{width:18px;height:18px}
  .what{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .what b{font-weight:500;font-size:15px}
  .what span{font-size:13px;color:var(--muted)}
  .price{
    font-family:"Jost","Golos Text",sans-serif;font-weight:400;
    font-size:clamp(21px,2.6vw,25px);letter-spacing:-.01em;white-space:nowrap;
  }
  .pay-note{margin:-2px 0 0;font-size:13.5px;color:var(--muted)}
  /* оплата не прошла (?fail=pay, 17.09): строка под чеком — общая .oops, по центру */

  /* ---- оплата по коду: главный путь (Елена, 12.09) ----
     «Люди боятся вписывать данные карты» — поэтому сверху стоит код, где
     вводить нечего: поймал камерой, банк спросил, согласился. Карточка кода
     белая в любой теме: камера читает код только на белом. Знак Lenation —
     в вырезе посередине; вырез 22% ширины, код при этом читается (проверено
     декодером на 60 ссылках, уровень M держит до 15% потери). */
  .qrpay{
    display:flex;flex-direction:column;align-items:center;
    gap:clamp(9px,1.5vw,13px);
    padding:clamp(16px,2.4vw,22px) clamp(14px,2vw,20px);
    border:1px solid var(--line);border-radius:22px;background:var(--surface);
  }
  .qr-head{
    font-family:"Jost","Golos Text",sans-serif;font-weight:400;
    font-size:clamp(14px,1.8vw,16px);letter-spacing:.02em;color:var(--text);
  }
  .qr-box{
    position:relative;width:clamp(168px,46vw,206px);aspect-ratio:1;
    padding:10px;border-radius:14px;background:#fff;
  }
  .qr-box svg{display:block;width:100%;height:100%}
  /* знак в вырезе — меньше самого выреза, чтобы вокруг остался белый зазор */
  .qr-mark{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:15%;aspect-ratio:1;line-height:0;
  }
  .qr-mark svg{width:100%;height:100%;border-radius:22%}
  .qr-note{margin:0;max-width:31ch;font-size:13px;line-height:1.45;color:var(--muted)}
  /* «ждём оплату» — живая строка: в жизни касса узнаёт о платеже сама */
  .qr-wait{display:none;align-items:center;justify-content:center;gap:8px;margin:0;font-size:13px;color:var(--muted)}
  .qr-wait.live{display:flex}
  .qr-wait .dot{width:8px;height:8px;border-radius:999px;background:var(--focus);animation:breathe 1.2s ease-in-out infinite}
  .qr-sbp{margin:0;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);opacity:.85}
  .qrpay .cta.wide{width:100%}
  /* телефоном свой же экран не сканируют: там кнопка в банк, код — под ссылкой */
  .qrpay.on-phone .qr-box{margin-top:2px}

  /* код устарел (18.09): не прячем, а гасим — человек видит, что это тот же код,
     просто уже мёртвый, и рядом кнопка за новым. Серым, не в цвет: наводить камеру
     на него больше незачем. Переход мягкий, чтобы код не «моргнул» на глазах. */
  .qr-box{transition:opacity .3s, filter .3s}
  .qrpay.stale .qr-box{opacity:.3;filter:grayscale(1)}
  .qrpay.stale .qr-head,
  .qrpay.stale .qr-note{opacity:.5}
  @media (prefers-reduced-motion: reduce){ .qr-box{transition:none} }

  /* тихая кнопка-ссылка: тот же голос, что у «Инструкции» на экране 2а */
  .linky{
    font-family:"Golos Text",sans-serif;font-size:13px;line-height:1.45;
    color:var(--muted);background:none;border:0;cursor:pointer;padding:2px 4px;
    text-decoration:underline;text-decoration-style:dotted;
    text-decoration-color:var(--muted);text-underline-offset:3px;
    transition:color .2s ease;
  }
  .linky:hover{color:var(--text)}
  .linky.open{font-size:14px;color:var(--text);text-decoration-color:var(--line)}

  /* кошелёк: чёрная таблетка в светлой теме, белая в тёмной — как велят Apple и Google */
  .xpay{
    height:50px;border:0;border-radius:999px;cursor:pointer;
    background:#111;color:#fff;
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    font-size:17px;font-weight:500;letter-spacing:.01em;
    transition:opacity .2s ease,transform .12s ease;
  }
  .xpay:hover{opacity:.86}
  .xpay:active{transform:translateY(1px)}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .xpay{background:#fff;color:#111}
  }
  :root[data-theme="dark"] .xpay{background:#fff;color:#111}

  .or{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
  .or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}

  .cardform{display:flex;flex-direction:column;gap:10px}
  .cardform .row{display:flex;gap:10px}
  .cardform .row .cf{flex:1;min-width:0}
  .cf{
    width:100%;
    font-family:"Golos Text",sans-serif;font-size:16px; /* 16 — чтобы iPhone не зумил поле */
    color:var(--text);background:var(--surface);
    border:1px solid var(--line);border-radius:999px;
    padding:14px 20px;font-variant-numeric:tabular-nums;
    transition:border-color .2s ease,background-color .2s ease;
  }
  .cf::placeholder{color:var(--muted);opacity:1;letter-spacing:0}
  .cf:focus{outline:none;border-color:var(--accent);background:var(--bg)}
  .cf.bad{border-color:var(--focus)}
  /* ошибка поля карты словами, не только рамкой (17.09) — общая .oops, по центру */
  .cta.wide{width:100%;margin-top:2px;padding-left:20px;padding-right:20px}
  .busy{cursor:progress;opacity:.75}

  .trust{
    display:flex;align-items:center;justify-content:center;gap:7px;
    margin:0;font-size:13px;color:var(--muted);
  }
  .trust svg{width:14px;height:14px;flex:none}
  .pay .wipe{width:auto;margin-top:clamp(10px,2vw,20px)}

  /* ================= экран 7: ожидание ================= */
  /* Заплачено, ролик делается. Задача экрана — чтобы ожидание не было пустым:
     кадр наполняется цветом снизу вверх (сколько цвета — столько готово),
     шаг работы назван человеческими словами, время сказано честно, и можно
     уйти, оставив почту. Никаких процентов и никаких «рендеров».
     «Назад» в шапке нет: из оплаченного заказа возвращаться в кассу некуда. */
  .wait{position:relative;padding:clamp(20px,3.6vw,40px) 0 0}
  /* всё содержимое экрана — один лист: его накрывает новая страница календаря, когда
     ролик готов (Елена, 18.09). Раскладка, что была у секции, теперь у листа */
  .wait .sheet{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:clamp(12px,2vw,18px);
  }
  .wait .sheet > *{max-width:100%}
  .wait .sheet{position:relative;z-index:1}
  /* старая страница: снимок ожидания, лежит под новой и ничего не ловит.
     Класс .past, а не .ghost: .ghost на сайте уже занят кнопкой экрана 4 */
  .wait .sheet.past{position:absolute;left:0;right:0;z-index:0;pointer-events:none}
  /* новая страница ложится сверху вниз: сама она такого же цвета, как страница, —
     видно не бумагу, а тень под опускающимся краем (.edge) */
  .wait .sheet.cover{background:var(--bg);animation:sheet-cover .85s cubic-bezier(.22,.61,.36,1) both}
  @keyframes sheet-cover{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
  .wait .edge{
    position:absolute;left:0;right:0;height:18px;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,var(--scrim),transparent);
    animation:sheet-edge .85s cubic-bezier(.22,.61,.36,1) both;
  }
  @keyframes sheet-edge{from{transform:translateY(0)}to{transform:translateY(var(--fall))}}
  @media (prefers-reduced-motion:reduce){
    .wait .sheet.cover{animation:none}
    .wait .edge{display:none}
  }
  .wait .slot{width:min(440px,100%)}
  .wait .stage{width:min(228px,52vw)}
  .wait .frame{--cut:100%}
  /* низ кадра — приглушённый, верх — живой; граница ползёт вверх */
  /* «ещё не сделано» — серо и не в фокусе; так граница видна на любой обложке */
  .wait .frame .dim{filter:grayscale(1) brightness(.5) blur(3px);transform:scale(1.04)}
  .wait .frame .live{clip-path:inset(var(--cut) 0 0 0);transition:clip-path .35s linear}
  .wait .frame .live.paint{background:linear-gradient(180deg,var(--accent),var(--accent-hover));opacity:.5}
  .wait .glow{
    position:absolute;left:0;right:0;top:var(--cut);height:2px;
    background:linear-gradient(90deg,transparent,var(--fill),transparent);
    box-shadow:0 0 12px 2px var(--fill);
    transform:translateY(-1px);transition:top .35s linear;pointer-events:none;
  }
  /* пока работа идёт, кадр тихо дышит тенью — видно, что это не картинка */
  .wait .frame.cooking{animation:cook 2.8s ease-in-out infinite}
  /* сборка сорвалась (18.09): кадр замирает там, где встал, и теряет цвет.
     Дышать он перестаёт вместе с классом cooking — работа не идёт, и вид об этом говорит */
  .wait .frame.dead{filter:grayscale(.85);opacity:.85;transition:filter .5s, opacity .5s}
  @media (prefers-reduced-motion: reduce){ .wait .frame.dead{transition:none} }
  @keyframes cook{
    0%,100%{box-shadow:0 24px 48px -28px var(--scrim)}
    50%{box-shadow:0 26px 64px -26px var(--scrim)}
  }
  .wait #mailed b{font-weight:500;overflow-wrap:anywhere}
  .wait #mailnote b{font-weight:500;overflow-wrap:anywhere}

  /* почта: кружок со стрелкой стоит внутри поля, справа (Елена, 18.09). Раньше он был
     отдельной кнопкой рядом, и связь «впиши сюда — нажми туда» приходилось угадывать.
     Ширину, рамку и дыхание пустого поля даёт .lit-field — тот же приём, что у строки
     «кто ты» на главной и у поля ссылки на 2а: пока адреса нет, слот тихо светится.
     Три состояния прежние — пусто (подсказка по центру, стрелка спит), печатает
     (текст слева, стрелка живая), сохранено (поле серое, справа крестик). */
  .mailrow{--mailgo:clamp(52px,10vw,58px)}
  .mailrow .field{width:100%;text-align:left;padding-right:var(--mailgo)}
  /* пустое поле — подсказка ровно по центру, как в схеме: место под стрелку отводим
     и слева, иначе «почта» стояла бы левее середины */
  .mailrow .field:placeholder-shown{text-align:center;padding-left:var(--mailgo)}
  .mailrow .field.bad{border-color:var(--focus)}
  .send{
    position:absolute;top:50%;right:6px;transform:translateY(-50%);
    width:clamp(40px,7vw,44px);height:clamp(40px,7vw,44px);
    display:grid;place-items:center;
    color:var(--muted);background:var(--bg);
    border:1px solid var(--line);border-radius:999px;
    cursor:pointer;
    transition:color .2s ease,border-color .2s ease,background-color .2s ease,opacity .2s ease;
  }
  .send svg{width:15px;height:15px}
  .send .x{display:none}
  .send:disabled,.send[aria-disabled="true"]{cursor:default;opacity:.4}
  /* есть что сохранять — треугольник заливается акцентом: видно, что он живой */
  .send.live{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
  .send.live:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
  .send:not(:disabled):not([aria-disabled="true"]):not(.live):hover{color:var(--accent);border-color:var(--accent)}
  /* сохранено: поле уходит в фон — заметно серее белого, чтобы состояние читалось */
  .mailrow.saved .field{background:var(--tile-a);color:var(--muted);border-color:var(--tile-a)}
  .mailrow.saved .field:focus{border-color:var(--tile-a);background:var(--tile-a)}
  .mailrow.saved .send .go{display:none}
  .mailrow.saved .send .x{display:block}
  .wait .sheet > .cta{margin-top:clamp(2px,.6vw,6px)}

  /* ---- ролик готов (Елена, 18.09) ----
     «СМОТРЕТЬ» и «СКАЧАТЬ» — на одном уровне, в одну строку; под ними во всю ширину
     «попробуй, создай ещё один», а под ней — слот с почтой (его вниз переставляет
     сам экран). Залитая кнопка одна: смотреть. Остальные обводкой — иначе три
     цветные таблетки подряд спорят, какая главная. */
  .done{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(440px,100%)}
  .done .duo{display:flex;gap:10px;width:100%}
  .done .cta{margin-top:0}
  .done .duo .cta{flex:1;padding-left:12px;padding-right:12px;text-align:center;white-space:nowrap}
  .done .again{width:100%}
  /* почта переезжает сюда же, внутрь блока: зазор до неё такой же, как между кнопками */
  .done .slot{width:100%;margin-top:0}
  /* лента прилетает в конце — мягко, а не хлопком: полсекунды подъёма из прозрачного */
  .later{animation:later-in .5s ease-out both}
  @keyframes later-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){ .later{animation:none} }
  /* Все три кнопки одного цвета (Елена, 18.09): «скачать» такая же, как «смотреть».
     «Попробуй, создай ещё один» отличается не заливкой, а бликом — раз в 7 секунд по
     ней медленно проходит мягкая полоса. Приём тот же, что у кнопок «не выбираю» и
     «выбираю и перехожу» в списке «кто ты» (--sheen и who-sheen ниже): блик лежит под
     текстом (z-index:-1 при isolation:isolate) и обрезается скруглением кнопки. */
  .cta.sheen{--sheen:rgba(255,255,255,.24);position:relative;overflow:hidden;isolation:isolate}
  :root[data-theme="dark"] .cta.sheen{--sheen:rgba(255,255,255,.28)}
  .cta.sheen::after{
    content:"";position:absolute;top:0;bottom:0;left:0;width:90%;z-index:-1;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--sheen) 50%,transparent);
    transform:translateX(-115%) skewX(-18deg);
    animation:who-sheen 7s ease-in-out infinite;
  }
  @media (prefers-reduced-motion:reduce){ .cta.sheen::after{animation:none;display:none} }

  /* ================= «кто ты»: строка под кнопкой главной ================= */
  /* Правка 14.09, решение Елены: под кнопкой «Создаём вирусный ролик с тобой» — пустая
     строка «Ищешь тренд под себя? Выбери, кто ты» со стрелкой справа (вторым заходом
     14.09 строку ставили над кнопкой, 16.09 Елена вернула: сначала кнопка, потом строка).
     Нажал — раскрылся список профессий по сферам и поиск; выбрал — лента ниже
     тут же перестраивается под эту сферу, страница та же. Первая строка списка —
     «не выбирать», тогда лента как была. Список — who.json, логика — LEN.who()
     в app.js. На витрине та же строка стоит под подписью ленты (`.whoami.under`):
     выбор общий, и лента на обоих экранах начинается на одной высоте —
     строка занимает одинаково места, только отступ у неё сверху или снизу.
     Список раскрывается поверх ленты (z-index) — это обычное поведение выпадашки. */
  .whoami{
    position:relative;width:min(440px,100%);
    margin:clamp(12px,2vw,20px) auto 0;
    text-align:left;
  }
  .whoami.under{margin:0 auto clamp(12px,2vw,20px)}
  .who-box{position:relative}
  .who-in{
    width:100%;display:block;
    padding-left:46px;padding-right:46px; /* одинаково с двух сторон: текст по центру, стрелка не сдвигает */
    cursor:pointer;
    /* «Ищешь тренд под себя? Выбери, кто ты» жирнее и контрастнее (Елена, 16.09: «плохо
       видно»): вес 500, цвет — текст на 85%, контраст 7,5 вместо 3,9. С того же дня
       подсказку рисует слой .who-ph, вес 500 у поля остался для набранного слова */
    font-weight:500;
  }
  /* подсказку рисует слой .who-ph ниже, свой placeholder у поля невидим */
  .who-in::placeholder{color:transparent}
  .whoami.open .who-in{border-color:var(--accent);background:var(--bg);cursor:text}
  .whoami.has .who-in{color:var(--accent);font-weight:500}
  /* Подсказка строки поверх поля (Елена, 16.09), логика — place() и arrive() в app.js.
     Закрыто: «Ищешь тренд под себя? Выбери, кто ты» (a + b) по центру, слой ловит касание
     сам — поле фокус не получает, клавиатура не выезжает. Список открыт: строка плавно
     едет влево (--x0 → --x1), a тает, въезжает c («, или вводи сам»), слой касания
     пропускает — второе касание в поле. Доехала (.ready) — многоточие d дышит.
     Слой накрывает поле целиком (стрелка лежит выше), чтобы касание у края тоже не
     звало клавиатуру. Слева край мягкий: уходящая фраза растворяется, а не обрезается;
     справа текст кончается до стрелки. Цвет и вес — как у подсказки было: текст на 85%, 500. */
  .who-ph{
    /* Края, где подсказка тает: слева она растворяется, уезжая при открытии списка,
       справа кончается до стрелки. Эти же два числа читает place() в app.js и по ним
       подгоняет шрифт — потому они переменными, чтобы маска и подгонка не разошлись.
       На телефоне левый край уже (26 вместо 40): фразе нужна ширина, иначе шрифт мельчает
       (Елена, 18.09, живой iPhone: «слишком мелко»). Справа 45 — впритык к стрелке. */
    --fade-l:40px;
    --fade-r:45px;
    position:absolute;inset:0;
    overflow:hidden;cursor:pointer;
    -webkit-mask-image:linear-gradient(90deg,transparent calc(var(--fade-l) - 26px),#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent calc(100% - var(--fade-r) + 4px));
            mask-image:linear-gradient(90deg,transparent calc(var(--fade-l) - 26px),#000 var(--fade-l),#000 calc(100% - var(--fade-r)),transparent calc(100% - var(--fade-r) + 4px));
  }
  @media (max-width:560px){
    .who-ph{--fade-l:26px}
  }
  .whoami.open .who-ph{pointer-events:none}
  /* в строке слово — подсказки не видно, но первое касание слой ловит всё так же */
  .whoami.full .who-run{visibility:hidden}
  .who-run{
    position:absolute;left:0;top:50%;
    white-space:pre;line-height:1.2;
    font-family:"Golos Text",sans-serif;font-weight:500;color:var(--text);
    transform:translate(var(--x0,0px),-50%);
    transition:transform .8s cubic-bezier(.45,0,.2,1);
  }
  .whoami.open .who-run{
    transform:translate(var(--x1,0px),-50%);
    transition-duration:1.2s;
  }
  .who-run>span{opacity:.85;transition:opacity .5s ease}
  .whoami.open .who-run .a{opacity:0;transition-duration:.75s}
  .who-run .c,.who-run .d{opacity:0;transition-duration:.3s}
  .whoami.open .who-run .c{opacity:.85;transition-duration:.7s;transition-delay:.4s}
  .whoami.ready .who-run .d{opacity:.85;transition-duration:.35s}
  .who-run .d i{font-style:normal}
  /* три точки → две → одна → ни одной → снова три по одной */
  .whoami.ready .who-run .d i{animation:2.6s ease-in-out infinite}
  .whoami.ready .who-run .d i:nth-child(1){animation-name:who-dot1}
  .whoami.ready .who-run .d i:nth-child(2){animation-name:who-dot2}
  .whoami.ready .who-run .d i:nth-child(3){animation-name:who-dot3}
  @keyframes who-dot1{0%,50%{opacity:1}60%,72%{opacity:0}80%,100%{opacity:1}}
  @keyframes who-dot2{0%,30%{opacity:1}40%,78%{opacity:0}86%,100%{opacity:1}}
  @keyframes who-dot3{0%,10%{opacity:1}20%,84%{opacity:0}92%,100%{opacity:1}}
  /* перемер (язык, поворот) — без езды */
  .whoami.still .who-run,.whoami.still .who-run>span{transition:none}
  @media (prefers-reduced-motion:reduce){
    .who-run,.whoami.open .who-run,.who-run>span{transition:none}
    .whoami.ready .who-run .d i{animation:none}
  }
  /* Кнопки строки (Елена, 16.09). Справа стрелка: вниз — список закрыт, вверх — открыт.
     Крестик (.who-clr, wipe в app.js) стоит, пока в строке что-то есть — выбранное,
     напечатанное, «Искать под «…»», — и стирает всё сразу. Пока список открыт, крестик
     слева, стрелка справа. Список закрылся с выбором (стрелкой, мимо, «Выбираю и перехожу
     к поиску») — крестик плавно едет направо, на место стрелки, а стрелка гаснет; открыл
     снова — едет обратно, стрелка проявляется. Размер кнопок --bw — от высоты поля (ставит
     place() в app.js): круг стоит ровно в закруглении края, отступ 7px со всех сторон
     (телефон — 34px, компьютер — 43px). */
  .who-btn,.who-clr{
    position:absolute;right:7px;top:50%;transform:translateY(-50%);
    width:var(--bw,34px);height:var(--bw,34px);border-radius:999px;border:0;
    background:transparent;color:var(--muted);cursor:pointer;
    display:grid;place-items:center;padding:0;
  }
  .who-btn{transition:color .2s ease,background-color .2s ease,opacity .25s ease .2s,visibility 0s}
  .who-btn svg,.who-clr svg{width:53%;height:53%;transition:transform .2s ease}
  .whoami.open .who-btn .v{transform:rotate(180deg)}
  .whoami.has:not(.open) .who-btn{
    opacity:0;visibility:hidden;
    transition:color .2s ease,background-color .2s ease,opacity .15s ease,visibility 0s linear .15s;
  }
  .who-clr{
    right:auto;left:7px;
    opacity:0;visibility:hidden;transform:translateY(-50%) scale(.7);
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s,color .2s ease,background-color .2s ease;
  }
  .whoami:not(.open) .who-clr{left:calc(100% - 7px - var(--bw,34px))}
  .whoami.full .who-clr{
    opacity:1;visibility:visible;transform:translateY(-50%);
    transition:left .5s cubic-bezier(.45,0,.2,1),opacity .18s ease,transform .18s ease,visibility 0s,color .2s ease,background-color .2s ease;
  }
  @media (hover:hover){
    .who-btn:hover,.who-clr:hover{color:var(--text);background:var(--surface)}
  }
  /* компьютер: кнопки крупнее — текст отступает от края на их ширину */
  @media (min-width:561px){
    .who-in{padding-left:50px;padding-right:50px}
  }
  /* перемер (поворот, окно) — крестик не едет */
  .whoami.still .who-clr{transition:none}
  @media (prefers-reduced-motion:reduce){
    .who-btn,.who-clr,.whoami.has:not(.open) .who-btn,.whoami.full .who-clr{transition:none}
  }

  .who-panel{
    /* на 4px шире строки с каждой стороны: пока строка стояла над кнопкой (14–16.09),
       кнопка на 3px шире строки проглядывала по краям списка зелёными полосками */
    position:absolute;left:-4px;right:-4px;top:calc(100% + 8px);z-index:40;
    background:var(--bg);border:1px solid var(--line);border-radius:22px;
    box-shadow:0 14px 40px var(--who-shadow,rgba(46,43,38,.16));
    /* dvh — видимая высота сейчас: у vh на iPhone панели Safari не вычтены (17.09) */
    max-height:min(58vh,440px);max-height:min(58dvh,440px);overflow:auto;overscroll-behavior:contain;
    padding:6px 8px 10px;
    -webkit-overflow-scrolling:touch;
  }
  :root[data-theme="dark"] .who-panel{--who-shadow:rgba(0,0,0,.45)}
  /* На телефоне список дотянут до низа экрана (reach в app.js, Елена, 16.09): снизу он
     уходит за край, а под ним, от его верха до низа экрана, — подложка цвета страницы,
     чтобы лента не выглядывала ни у скруглённых углов, ни по бокам. Касание подложки —
     «мимо строки», список закрывается (away в app.js) */
  .whoami.reach .who-panel{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:0}
  /* сам список уходит под полосу жестов (фон сплошной), а последний пункт докручивается выше неё (17.09) */
  .whoami.reach .who-panel{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .whoami.reach::before{
    content:"";position:fixed;left:0;right:0;top:var(--reach-top,0px);bottom:0;z-index:39;
    background:var(--bg);
  }
  /* На iPhone окно страницы кончается выше экрана: под плавающей панелью Safari остаётся
     полоса, страница рисует в ней ленту, а подложка туда не достаёт — по правилам Safari
     прибитое к окну (position:fixed) ниже окна не рисуется. Выглядело так, будто список
     «не доехал до низа», и снизу торчали ролики (Елена, снимок с живого телефона 17.09:
     окно 393×695 при экране выше; в Chrome не воспроизводится даже нарочно).
     Поэтому, пока список дотянут до низа, ленту просто прячем — она вся под ним.
     visibility, а не display: высота страницы не меняется, ничего не прыгает,
     лента не пересобирается. Метку ставит reach() в app.js. */
  html.who-reach .grid,
  html.who-reach .more{visibility:hidden}

  .who-h{
    font-family:"Jost","Golos Text",sans-serif;font-weight:500;font-size:11px;
    text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
    padding:12px 8px 6px;margin:0;
  }
  .who-g{display:flex;flex-wrap:wrap;gap:6px;padding:0 2px 4px}
  .who-opt{
    font-family:"Golos Text",sans-serif;font-size:13.5px;line-height:1.25;
    padding:7px 12px;border:1px solid var(--line);border-radius:999px;
    background:var(--surface);color:var(--text);cursor:pointer;
    transition:border-color .15s ease,background-color .15s ease,color .15s ease;
  }
  .who-opt:hover,.who-opt.on{border-color:var(--accent)}
  .who-opt.now{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  /* «ещё 12» — не выбор, а разворот длинной группы: звучит тише обычной таблетки */
  .who-opt.wide{background:transparent;border-style:dashed;color:var(--muted)}
  .who-opt.wide:hover,.who-opt.wide.on{color:var(--text);border-color:var(--accent)}
  /* «даю свою ссылку» и «искать под …» — во всю ширину, отдельными строками */
  .who-opt.none,.who-opt.free{
    display:block;width:100%;border-radius:14px;padding:10px 12px;margin:4px 0 2px;
  }
  /* Кнопки в начале списка — таблетки светлее кнопки над строкой: «Не выбираю, даю свою ссылку
     на ролик» (главная, ведёт на 2а, Елена, 15.09; с 16.09 не цветом кнопки главной, а светлее —
     «по такому же принципу») и «Выбираю и перехожу к поиску» (2 и 2b, onwardRow в app.js, 16.09).
     Днём текст светлый (Елена, 16.09: «не тёмным, а светлым») — поэтому оливка чуть темнее
     прежней #B5BC9D, на которой белое не читалось: #838B6B, белый 3,6:1, лёгкая тень под буквами.
     Ночью — светлая #C5CFAE и тёмный текст, как было.
     Обе чуть переливаются (Елена, 16.09): раз в 7 с по кнопке медленно проходит широкий мягкий
     блик — ::after под текстом. Узкая быстрая полоса (3,6 с, белый 50%) напрягала глаз, а «море»
     из блуждающих бликов (17 и 23 с) Елене не понравилось — «верни как было»: осталась эта.
     rise — «Выбираю…» проявляется в момент выбора */
  .who-opt.none,.who-opt.onward{
    --soft:#838B6B;--soft-hover:#7A8262;--on-soft:#FFFFFF;
    --sheen:rgba(255,255,255,.24);--ink-shadow:0 1px 2px rgba(38,45,27,.28);
    display:block;width:100%;border-radius:999px;margin:6px 0 4px;
    text-align:center;font-weight:500;
    /* без рамки: блик под overflow:hidden до неё не достаёт, и по краям полосы оставалась
       тёмная линия. Отступы на 1px больше — размер кнопки прежний (11px 14px + рамка) */
    border:0;padding:12px 15px;
    background:var(--soft);color:var(--on-soft);text-shadow:var(--ink-shadow);
    position:relative;overflow:hidden;isolation:isolate;
  }
  :root[data-theme="dark"] .who-opt.none,
  :root[data-theme="dark"] .who-opt.onward{
    --soft:#C5CFAE;--soft-hover:#D0D9BB;--on-soft:#282A24;
    --sheen:rgba(255,255,255,.28);--ink-shadow:none;
  }
  .who-opt.none:hover,.who-opt.none.on,
  .who-opt.onward:hover,.who-opt.onward.on{background:var(--soft-hover)}
  .who-opt.none::after,.who-opt.onward::after{
    content:"";position:absolute;top:0;bottom:0;left:0;width:90%;z-index:-1;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--sheen) 50%,transparent);
    transform:translateX(-115%) skewX(-18deg);
    animation:who-sheen 7s ease-in-out infinite;
  }
  /* полоса шириной 90% кнопки, наклонена: от -115% своей ширины до 125% — из-за левого края
     за правый, ~5 с идёт, ~2 с пауза. Градиент ровный, наклон — skewX: у косого градиента
     край полосы был резким */
  @keyframes who-sheen{0%{transform:translateX(-115%) skewX(-18deg)}72%,100%{transform:translateX(125%) skewX(-18deg)}}
  .who-opt.onward.rise{animation:who-rise .5s ease-out both}
  @keyframes who-rise{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .who-opt.onward.rise{animation:none}
    .who-opt.none::after,.who-opt.onward::after{animation:none;display:none}
  }
  .who-opt.free em{font-style:normal;color:var(--accent);font-weight:500}
  .who-opt.now.free em{color:inherit}
  /* список не пришёл — строка в раскрытом списке: вид общий (.oops), здесь только отступы */
  .who-empty{margin:10px 8px 6px}
  /* список не пришёл — «ещё раз» под строкой; нажали — гаснет до ответа (17.09) */
  .who-retry{margin:4px 8px 10px}
  .who-retry[disabled]{opacity:.5;cursor:default}
  /* под «Искать под «…»»: что это за занятие (словарь тем или ответ службы api/who),
     «Ищем похожее…», пока служба думает, или честное «такого мы пока не знаем» */
  .who-sub{margin:3px 12px 6px;font-size:12.5px;line-height:1.35;color:var(--muted)}
  .who-sub.wait{animation:who-wait 1.2s ease-in-out infinite}
  @keyframes who-wait{0%,100%{opacity:.45}50%{opacity:1}}
  @media (prefers-reduced-motion:reduce){.who-sub.wait{animation:none}}

  /* Слот светится (Елена, 16.09). Сперва проба на главной, в тот же день — «такую же логику
     на втором, втором А, втором Б»: метка .lit на строке «кто ты» в index.html, 2.html,
     2b.html; на 2а строки «кто ты» нет — там так же светится поле ссылки (.lit-field ниже).
     1) Слот контрастнее фона сайта в обеих темах: светлее страницы («приподнят»),
        рамка темнее, лёгкая тень. Фон одинаковый и закрытым, и открытым — меняется
        только рамка (акцент), как было.
     2) Пока строка ждёт второго касания — список открыт, фраза доехала (.ready), поле
        пустое и без фокуса — вокруг слота мягко дышит свет: 2,6 с, как многоточие,
        и в такт с ним. Свет — тень псевдоэлемента, мигает только его прозрачность:
        это дёшево и на Redmi 7. Нажал в строку или выбрал — свет гаснет.
     3) И сам слот дышит навстречу свету (Елена, 16.09: «магическое появление»): ореол
        горит — слот светлый (--lit-bg), ореол погас — слот темнее (--lit-dim). Пока фраза
        едет, слот плавно темнеет, поэтому дыхание начинается без скачка. */
  .whoami.lit,.lit-field{
    --lit-bg:#FFFDF8;
    --lit-dim:#EAE3D2;
    --lit-line:#D0C6AF;
    --lit-shadow:0 1px 2px rgba(46,43,38,.06),0 4px 14px rgba(46,43,38,.07);
    /* на светлом тёмный ореол читается тенью — берём акцент ярче и зеленее, чтобы был свет */
    --lit-glow:rgba(146,166,92,.36);
    --lit-ring:rgba(146,166,92,.18);
  }
  :root[data-theme="dark"] .whoami.lit,:root[data-theme="dark"] .lit-field{
    --lit-bg:#3A3E33;
    --lit-dim:#2D3027;
    --lit-line:#565C48;
    --lit-shadow:0 1px 2px rgba(0,0,0,.25),0 4px 14px rgba(0,0,0,.28);
    --lit-glow:rgba(156,171,126,.34);
    --lit-ring:rgba(156,171,126,.16);
  }
  .whoami.lit .who-in{
    background:var(--lit-bg);border-color:var(--lit-line);box-shadow:var(--lit-shadow);
    transition:border-color .2s ease,background-color 1.2s ease;
  }
  .whoami.lit.open .who-in{background:var(--lit-bg);border-color:var(--accent)}
  .whoami.lit.open:not(.full) .who-box:not(:focus-within) .who-in{background:var(--lit-dim)}
  .whoami.lit.open.ready:not(.full) .who-box:not(:focus-within) .who-in{
    animation:who-lit-bg 2.6s ease-in-out infinite;
  }
  @keyframes who-lit-bg{0%,100%{background-color:var(--lit-dim)}50%{background-color:var(--lit-bg)}}
  .whoami.lit .who-box::after,.lit-glow{
    content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
    box-shadow:0 0 0 4px var(--lit-ring),0 0 22px 4px var(--lit-glow);
    opacity:0;
  }
  .whoami.lit.open.ready:not(.full) .who-box:not(:focus-within)::after{
    animation:who-lit 2.6s ease-in-out infinite;
  }
  @keyframes who-lit{0%,100%{opacity:0}50%{opacity:1}}
  /* 2а: поле «вставь ссылку» — та же логика без списка. Пустое и без фокуса — ждёт ссылку
     и дышит так же; нажал или вставил — перестаёт, поле светлое. Дыхание стартует через
     1,2 с: за это время поле переходом темнеет, и цикл начинается из тёмного — без скачка
     и на входе, и когда человек ушёл из пустого поля. Свет — соседний <i class="lit-glow">:
     у поля ввода псевдоэлементов не бывает. */
  .lit-field{position:relative;width:min(440px,100%)}
  .lit-field .field{
    width:100%;
    background:var(--lit-bg);border-color:var(--lit-line);box-shadow:var(--lit-shadow);
    transition:border-color .2s ease,background-color 1.2s ease;
  }
  .lit-field .field:focus{border-color:var(--accent)}
  /* 2а: в поле не ссылка — рамка цветом ошибки, и в фокусе тоже (17.09) */
  .lit-field .field.bad,.lit-field .field.bad:focus{border-color:var(--focus)}
  .lit-field .field:placeholder-shown:not(:focus){
    background:var(--lit-dim);
    animation:who-lit-bg 2.6s ease-in-out 1.2s infinite;
  }
  .lit-field .field:placeholder-shown:not(:focus) + .lit-glow{animation:who-lit 2.6s ease-in-out 1.2s infinite}
  @media (prefers-reduced-motion:reduce){
    .whoami.lit.open.ready:not(.full) .who-box:not(:focus-within)::after,
    .whoami.lit.open.ready:not(.full) .who-box:not(:focus-within) .who-in,
    .lit-field .field:placeholder-shown:not(:focus),
    .lit-field .field:placeholder-shown:not(:focus) + .lit-glow{animation:none}
  }
  /* ---- «Вставить» своей кнопкой (Елена, 18.09) ----
     С Redmi ссылка не вставлялась: системное меню «Вставить» на Android держится за
     курсор в поле, а курсора в пустом поле не было (починено выше), и на слабом телефоне
     меню к тому же срывалось от дыхания поля. Поэтому у экрана 2а теперь своя кнопка:
     коснулся поля — справа появилось слово «Вставить», нажал — ссылка встала сама.
     Показывается только пока поле пустое и в него нажали, дальше прячется: иначе она
     съела бы место у подсказки «вставь ссылку на ролик…», которая и так еле влезает
     на 360px. Пока кнопка на виду, подсказку внутри поля прячем — под ней курсор. */
  .lit-field .field:focus::placeholder{color:transparent}
  /* Вставленная ссылка длиннее поля: по центру было видно её хвост (…igsh=MzRl), а начало
     уезжало. Показываем начало — как в поле почты на экране 7. */
  .lit-field .field:not(:placeholder-shown){text-align:left}
  .paste{
    position:absolute;top:50%;right:7px;transform:translateY(-50%);
    font-family:"Golos Text",sans-serif;font-size:13.5px;font-weight:500;
    /* без своей плашки: в тёмной теме она вышла тёмным пятном на светлом поле.
       Слово стоит прямо в строке — место под ним свободно, подсказка на время нажатия ушла */
    color:var(--accent);background:none;
    border:0;border-radius:999px;padding:12px 14px;cursor:pointer;   /* палец: 40px по высоте */
    transition:opacity .2s ease;
  }
  .paste:active{opacity:.7}
  .paste:focus-visible{outline:2px solid var(--focus);outline-offset:2px}