/* Витрина для гостей. Оформление — жёсткий минимализм в духе ElevenLabs:
   почти монохром, много воздуха, вся выразительность в типографике и
   движении. Имена токенов те же, что в дашборде и на странице входа, но
   светлая тема здесь белая (а не серая): страница читается как лист
   бумаги, панели — чуть темнее фона, а не наоборот. */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --paper: #ffffff;
  --panel: #f7f7f8;
  --ink: #09090b;
  --ink-soft: #52525b;
  --ink-faint: #8a8a93;
  --line: #e7e7ea;
  --line-soft: #f0f0f2;
  /* заливка вложенных карточек — те же значения, что в дашборде:
     на витрине по ней живут карточки тарифов, собранные один в один
     с кабинетом */
  --sunken: #f3f4f6;
  /* кнопки: тёмная пилюля на светлом листе и наоборот в тёмной теме */
  --btn-dark: #09090b;
  --btn-dark-hover: #27272a;
  --btn-dark-ink: #ffffff;
  --shadow: 0 1px 2px 0 rgb(0 0 0 / .04), 0 8px 24px -12px rgb(0 0 0 / .12);
  --cta-bg: #09090b;
  --cta-ink: #ffffff;
  --r: 14px;
  --r-lg: 22px;
  /* отступ карточки первого экрана от краёв окна (в образце ~2% ширины);
     от него же считается шапка — она стоит поверх верха карточки, и её
     логотип должен попадать ВНУТРЬ скругления, а не висеть над ним */
  --edge: clamp(10px, 1.4vw, 20px);
  /* потолок ширины карточки первого экрана (просьба 2026-08-06
     «сделай видео уже»): на широком мониторе она стоит по центру, а не
     распирается на все 2000 px. По этой же ширине выравнивается шапка —
     иначе на широком экране светлый логотип уехал бы за край карточки
     на белый фон страницы и пропал. */
  --hero-w: 1880px;
  /* боковое поле внутри шапки, оно же расстояние от края карточки до
     логотипа; вынесено в переменную, потому что ширина .top-inner
     считается из него */
  --top-pad: clamp(18px, 2.2vw, 34px);
  /* высота шапки: 13 + логотип 44 + 13. Одна на все состояния —
     с 2026-08-06 шапка стоит НАД первым экраном и на нём не
     распахивается, поэтому прежней пары «просторная / собранная»
     (--top-compact) больше нет */
  --top-h: 70px;
  /* Блок «Оригинал → ИИ-Дубляж» шёл вторым на странице через приём
     «выглядывает из-под первого экрана» (просьба 2026-08-08): высота
     .hero-card считалась от 100vh минус доля видимого блока, и в
     несколько заходов эту долю поднимали (--ba-show: .5 → .7 → .85),
     а зазор перед блоком сжимали (--ba-gap-top: 34px → 16px → 6px →
     0px). Приём снят в тот же день прямой просьбой: заголовок,
     подзаголовок и кнопка первого экрана не должны двигаться от того,
     сколько видно следующего блока — .hero-card теперь высотой по
     своему содержимому, а .ba идёт сразу под кнопкой в обычном потоке.
     --ba-gap-top остался — это просто зазор перед блоком, без
     вычислений от вьюпорта. Высоту кадров по-прежнему задаёт
     --ba-frame-h (ширину считает пропорция 16:9, см. .ba-frame) —
     кадру нужна известная высота независимо от способа размещения
     блока на странице. */
  --ba-frame-h: clamp(200px, 32vh, 420px);  /* было clamp(150px,24vh,300px)
                                                — увеличено по просьбе
                                                2026-08-08 */
  --ba-gap-top: 0px;       /* зазор между кнопкой первого экрана и
                               блоком — сжат по прямой просьбе
                               2026-08-08 («видео прямо под кнопкой») */
  /* одна кривая на всю страницу: резкий старт, длинный мягкий выход */
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* фон блока «Возможности» (2026-08-08): точечная сетка и мягкое
     свечение под карточками. Отдельными токенами, а не rgba() по
     месту, потому что нужны РАЗНЫЕ значения в двух темах: на белом
     листе точка тёмная и еле видная, на почти чёрном — светлая и
     чуть заметнее, иначе её не разглядеть вовсе. */
  --feat-dot: rgb(9 9 11 / .07);
  --feat-glow: rgb(9 9 11 / .05);
  /* переключатель-сегмент (табы «Для кого подойдёт дубляж» и языки
     ролика): полоска-фон и «пилюля» активной кнопки. Своими токенами,
     потому что в двух темах они идут в РАЗНЫЕ стороны: на белом листе
     пилюля светлее полоски, на почти чёрном — наоборот, темнее фона
     страницы, но светлее полоски */
  --seg-bg: #f3f4f6;
  --seg-thumb: #ffffff;
  --seg-shadow: 0 1px 2px 0 rgb(0 0 0 / .06), 0 1px 3px 0 rgb(0 0 0 / .1);
}
:root[data-theme="dark"] {
  --paper: #08080a;
  --panel: #121214;
  --ink: #fafafa;
  --ink-soft: #a1a1aa;
  --ink-faint: #71717a;
  --line: #232326;
  --line-soft: #17171a;
  /* в тёмной теме карточка тарифа тоже тёмно-серая, как в кабинете */
  --sunken: #171717;
  --btn-dark: #fafafa;
  --btn-dark-hover: #e4e4e7;
  --btn-dark-ink: #08080a;
  --shadow: 0 1px 2px 0 rgb(0 0 0 / .5), 0 8px 24px -12px rgb(0 0 0 / .8);
  /* светлее панели, иначе карточка призыва сливается с фоном */
  --cta-bg: #17171a;
  --cta-ink: #fafafa;
  /* на тёмном точка светлая и заметнее, чем на белом: тёмная по
     тёмному не читается вовсе */
  --feat-dot: rgb(250 250 250 / .05);
  --feat-glow: rgb(250 250 250 / .04);
  --seg-bg: #131316;
  --seg-thumb: #26262a;
  --seg-shadow: 0 1px 2px 0 rgb(0 0 0 / .5);
}

html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 "Plus Jakarta Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* ряды флагов в блоке языков шире экрана */
}
h1, h2, h3 {
  font-family: "Onest", system-ui, sans-serif;
  line-height: 1.08; letter-spacing: -.03em; font-weight: 600;
}
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }

/* ── общая раскладка ──────────────────────────────────────────────
   Композиция всегда по центру, потолок ширины — по содержимому:
   блоки-сетки шире, сплошной текст уже. */
section { padding: clamp(72px, 10vw, 132px) 24px; }
section[id], footer[id] { scroll-margin-top: 88px; }
/* Карточки возможностей — цели пунктов выпадающего меню в шапке.
   Отступ считается от ЖИВОЙ высоты липкого блока (--top-h ставит
   setTopH в landing.js: полоска акции + шапка), а не от числа 88:
   полоска на телефоне переносится на две строки, и фиксированное
   значение оставило бы карточку под шапкой. */
.feat[id] { scroll-margin-top: calc(var(--top-h) + 18px); }
.wrap { max-width: 1120px; margin: 0 auto; }
.wrap-narrow { max-width: 760px; margin: 0 auto; }

/* «шапочка» над заголовком блока: мелкие прописные, как метка раздела */
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.h2 {
  margin-top: 14px;
  font-size: clamp(28px, 4.2vw, 46px);
}
.lead {
  margin-top: 16px; font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink-soft); max-width: 640px;
}
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.sec-head { max-width: 720px; }
.sec-head.center { margin: 0 auto; }

/* ── кнопки ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r);
  border: 1px solid transparent; font: inherit; font-weight: 600;
  font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--btn-dark); color: var(--btn-dark-ink); }
.btn.primary:hover { background: var(--btn-dark-hover); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink-faint); background: var(--panel); }
.btn.big { padding: 15px 30px; font-size: 16px; }
.btn.small { padding: 8px 15px; font-size: 14px; }
.btn .ico { width: 17px; height: 17px; }

/* ── полоска акции ────────────────────────────────────────────────
   Скидка 25% на месячную Creator и Pro — сутки с первого визита
   (2026-08-17). Дедлайн приходит с сервера, там же считается и цена
   платежа (promo.py); прежний зашитый в скрипт дедлайн 10.08 протух и
   показывал нули. Досчитал до нуля — таймер прячется, а на его место
   встаёт кнопка .promo-cta «Создать аккаунт». Цвет — не
   токены страницы (акционная полоска обязана быть заметной что в
   светлой, что в тёмной теме, а не подстраиваться под них). Стоит
   Раньше стояла ДО шапки просто в потоке и уезжала со скроллом —
   по прямой просьбе 2026-08-08 «полоска всегда сверху» это снято:
   теперь полоска и шапка вместе — один sticky-блок .top-stack (см.
   ниже), обе остаются на экране при любой прокрутке. */
.promo-bar { background: #2540f2; color: #fff; text-align: center; }
/* Строка полоски — обычный текст, а НЕ flex-ряд (просьба 2026-09-01
   «чтобы таймер был в одну линию с текстом»). Во flex счётчик был
   отдельным элементом ряда и на узком экране переносился на свою
   строку по центру — полоска становилась в два этажа. Теперь он идёт
   в потоке предложения и встаёт сразу за двоеточием. */
.promo-inner {
  display: block; text-align: center;
  /* высота полоски правлена 2026-08-08: 12px → 7px → 4px
     вертикального паддинга («сделай линию тоньше» — про толщину самой
     полосы, не про начертание текста, его уже облегчили отдельно) */
  padding: 4px var(--edge);
  max-width: var(--hero-w); margin: 0 auto;
  font-size: 15px; font-weight: 400; line-height: 1.5;
}
.promo-count {
  display: inline-block; background: #fff; color: #2540f2;
  margin-left: 8px; padding: 1px 10px; border-radius: 7px;
  font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* иначе display: inline-block перебьёт атрибут hidden и прочерк-заглушка
   останется висеть после конца акции (жалоба 2026-09-04) */
.promo-count[hidden] { display: none; }
/* кнопка на месте досчитавшего таймера: те же размеры и та же белая
   плашка, что у счётчика, — полоска не должна дёргаться по высоте в
   секунду, когда акция кончилась */
.promo-cta {
  display: inline-block; background: #fff; color: #2540f2;
  margin-left: 8px; padding: 1px 10px; border-radius: 7px;
  font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background .18s var(--ease);
}
.promo-cta:hover { background: #e8ecff; }
.promo-cta[hidden] { display: none; }
/* полная цена рядом с акционной — зачёркнутой и тише */
.plan-price-was {
  margin-left: 8px; font-size: .62em; font-weight: 300;
  color: var(--ink-faint); text-decoration-thickness: 1px;
}
@media (max-width: 640px) {
  .promo-inner { font-size: 14px; padding: 6px 14px; }
}
/* Телефон: полоска в одну строку вместе с таймером. Перенос запрещён,
   а кегль под ширину экрана подбирает fitPromoBar() в landing.js.
   overflow: hidden — страховка на случай, если скрипт не загрузился:
   без него nowrap растянул бы страницу вбок. */
@media (max-width: 560px) {
  .promo-bar { overflow: hidden; }
  .promo-inner { font-size: 13px; padding: 4px 6px; white-space: nowrap; }
  .promo-count, .promo-cta { margin-left: 5px; padding: 1px 5px;
                             border-radius: 5px; }
}

/* ── полоска + шапка вместе ──────────────────────────────────────
   Просьба 2026-08-08 «полоска всегда сверху»: .promo-bar и .top
   раньше сидели каждый сам по себе (шапка — sticky, полоска — просто
   в потоке и уезжала первой). Обёртка .top-stack делает их одним
   sticky-блоком: он прилипает к верху ЦЕЛИКОМ, полоска никуда не
   девается, а высоту дальше не считает никто — с ней не нужно ни
   знать высоту полоски заранее, ни держать её в переменной. */
.top-stack { position: sticky; top: 0; z-index: 20; }

/* ── шапка ────────────────────────────────────────────────────────
   Шапка стоит НАД видео, а не поверх него (просьба 2026-08-06 «чтобы
   хедер был не на видео, чтобы видео было ниже хедера»): полоса на
   фоне листа в потоке страницы, карточка первого экрана начинается
   под ней. Раньше шапка была fixed и наплывала на верх карточки —
   отсюда прозрачный фон, светлые надписи на видео и запас
   `--top-h` в её padding; всё это больше не нужно. */
.top {
  padding: 13px calc(var(--edge) + var(--top-pad));
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
/* тронулись с места — под шапкой поехало содержимое, и её нужно
   отделить чертой; фон полупрозрачный с размытием, как и был */
.top.scrolled {
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
/* Потолок ширины — тот же, что у карточки первого экрана, минус её
   внутреннее поле: логотип и меню стоят РОВНО у краёв карточки, а не
   у краёв окна. Пока окно уже потолка, ограничение не срабатывает и
   всё держится на padding самой шапки. */
.top-inner {
  display: flex; align-items: center; gap: 20px;
  max-width: calc(var(--hero-w) - 2 * var(--top-pad));
  margin: 0 auto;
}
/* логотип крупнее, чем в сайдбаре дашборда (static/index.css, 38px/23px) —
   просьба 2026-08-06 «сделай хедер больше», намеренное расхождение */
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand img { width: 44px; height: 44px; border-radius: 8px; }
.brand .word {
  font-family: "Lexend", system-ui, sans-serif; font-weight: 500;
  font-size: 26px; letter-spacing: 0; white-space: nowrap;
}

.top-nav { display: flex; align-items: center; gap: 2px; margin: 0 auto; }
/* Крупнее и в полный, а не приглушённый цвет (--ink, не --ink-soft) —
   на просьбу 2026-08-06 сделать текст в шапке заметнее. Затемнение при
   наведении делаем через прозрачность, а не через ink-soft, иначе
   ховер на первом экране высветлял бы текст ещё сильнее вместо
   потемнения. */
/* Начертание всех надписей шапки — 400 (просьба 2026-08-08 «сделай
   надписи тоньше, кроме той, что рядом с логотипом»). Плотнее только
   .brand .word (500): так слово «WorldSpeak.me» остаётся единственным
   тяжёлым элементом строки и держит на себе взгляд. Если правишь вес
   здесь — не забывай парные правила мобильного меню ниже
   (.top-menu nav a, .top-menu-foot .btn): это те же ссылки и кнопки,
   просто в раскрытом на телефоне виде. */
.top-nav a {
  padding: 9px 13px; border-radius: 8px; text-decoration: none;
  font-size: 17px; font-weight: 400; color: var(--ink);
  white-space: nowrap; transition: opacity .18s var(--ease);
}
.top-nav a:hover { opacity: .7; }

/* ── выпадающее «Возможности» в шапке ─────────────────────────────
   Просьба 2026-08-08: пользователь прислал готовый компонент shadcn
   NavigationMenu (React + Next + Tailwind + Radix). Поставить его
   сюда нельзя — в проекте нет ни React, ни сборки, витрина на чистых
   HTML/CSS/JS. Поведение воспроизведено своими силами: панель на CSS,
   открытие/закрытие в setupFeatMenu (landing.js), там же таймеры
   наведения и клавиатура.
   Стрелка, «мостик» через зазор и таймеры устроены ровно как у выбора
   языка (.lang-pick) — не копия ради копии, а один и тот же приём:
   если правишь один, проверь и второй. */
.nav-pick { position: relative; }
.nav-drop {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: 8px;
  border: 0; background: transparent; cursor: pointer;
  font: 400 17px/1 "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--ink); white-space: nowrap;
  transition: opacity .18s var(--ease);
}
.nav-drop:hover { opacity: .7; }
/* 300 мс — как duration-300 у стрелки в присланном компоненте */
.nav-drop .chev {
  width: 14px; height: 14px; flex-shrink: 0;
  transition: transform .3s var(--ease);
}
.nav-drop[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Невидимый «мостик» на высоту зазора до панели: без него мышь,
   идущая от кнопки к списку, на секунду оказывается над пустотой и
   меню захлопывается на полпути. Та же беда была у выбора языка. */
.nav-pick.open::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 100%; height: 10px;
}
/* ШИРИНА ЗДЕСЬ ОБЯЗАТЕЛЬНА, и это не вкусовщина — без неё панель
   разваливается (поймано 2026-08-08 на живой странице). Абсолютный
   блок без width считает ширину «по содержимому», но не свободно: у
   него есть потолок — ширина содержащего блока минус смещение left.
   Содержащий блок здесь .nav-pick, а он шириной с кнопку (~150px),
   и при left: 50% потолок выходит 150 − 75 = 75px. Колонки
   minmax(0, …) послушно сжались почти в ноль, текст вывалился за
   границы панели и лёг друг на друга.
   Задали width — ширина стала определённой, «сжатие по содержимому»
   не применяется вовсе, и колонки считаются от неё. По той же причине
   колонки теперь 1fr, а не minmax: доли делят известную ширину и в
   ноль схлопнуться не могут. */
.nav-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 30;
  width: 560px; max-width: calc(100vw - 32px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 2px; padding: 8px;
  border-radius: var(--r); background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  /* Появление и уход — как у присланного компонента shadcn: там это
     fade-in + zoom-in-95 на открытии и fade-out + zoom-out-95 на
     закрытии, длительностью 200 мс. Здесь то же самое на обычном
     transition.
     Прятать через display или атрибут hidden нельзя: display не
     анимируется, и панель просто мигала бы. Поэтому закрытое
     состояние — прозрачность 0, уменьшение до 0.95 и visibility.
     visibility взята не для красоты: без неё закрытая панель
     осталась бы в дереве доступности и ловила бы фокус табом.
     Её переход идёт БЕЗ длительности, но с задержкой на время
     затухания (visibility 0s linear .2s) — иначе панель исчезала бы
     мгновенно, не дав анимации проиграться. На открытии задержки
     нет, показать надо сразу. */
  transform-origin: top center;
  transform: translateX(-50%) scale(.95);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease),
              visibility 0s linear .2s;
}
.nav-menu.open {
  transform: translateX(-50%) scale(1);
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .2s var(--ease), transform .2s var(--ease),
              visibility 0s;
}
/* Состояние ДО запуска скрипта: пока JS не взял меню под контроль,
   оно скрыто атрибутом — иначе при медленной загрузке панель успела
   бы мелькнуть раскрытой. Скрипт снимает атрибут один раз на старте
   и дальше управляет классом (см. setupFeatMenu в landing.js). */
.nav-menu[hidden] { display: none; }   /* иначе display:grid перебьёт hidden */
/* Иконка — своя колонка слева, растянутая на обе строки (grid-row
   1/3), чтобы заголовок и подпись сами легли в оставшуюся колонку без
   обёрточного div: автораскладка грида находит для них единственную
   свободную ячейку в своей строке. Монолинейные SVG того же языка,
   что у .fit-ico — currentColor, без заливки (2026-08-21, просьба
   «добавь иконок» к этому меню). */
.nav-menu a {
  display: grid; grid-template-columns: 19px 1fr;
  column-gap: 11px; row-gap: 3px; padding: 10px 12px; border-radius: 10px;
  white-space: normal;              /* .top-nav a запрещает перенос */
  transition: background .18s var(--ease);
}
.nav-menu a:hover { background: var(--panel); opacity: 1; }
.nav-menu a .nm-ico {
  grid-row: 1 / 3; width: 19px; height: 19px; margin-top: 1px;
  color: var(--ink-soft); opacity: .7; flex-shrink: 0;
  transition: opacity .18s var(--ease);
}
.nav-menu a:hover .nm-ico { opacity: 1; }
.nav-menu a b {
  font-size: 14.5px; font-weight: 500; color: var(--ink); line-height: 1.3;
}
.nav-menu a span {
  font-size: 13px; line-height: 1.4; color: var(--ink-soft);
}
/* Карточка, к которой привёл пункт меню, коротко подсвечивается —
   иначе на длинной странице непонятно, куда именно тебя привезло. */
.feat:target { border-color: var(--ink-faint); }

.top-actions { display: flex; align-items: center; gap: 7px; }
/* Кегль пробовали поднять до 18px у обеих кнопок (2026-08-08) —
   откачено в тот же день по просьбе, вернулись прежние размеры:
   «Войти» 17px, «Регистрация» 15px. Разными они и задуманы. */
.top-signin {
  padding: 9px 13px; border-radius: 8px; text-decoration: none;
  font-size: 17px; font-weight: 400; color: var(--ink);
  white-space: nowrap; transition: opacity .18s var(--ease);
}
.top-signin:hover { opacity: .7; }
/* кнопка регистрации в шапке растёт вместе с ней, не трогая .btn.small
   в остальных местах страницы (например, в подвале); вес перебивает
   font-weight: 600 у базовой .btn — только у кнопки В ШАПКЕ.
   Кегль 16px при вертикальном паддинге 9.5px (просьба 2026-08-08
   «текст на пиксель больше, кнопку не менять»): высота кнопки
   складывается из кегля и паддингов, поэтому прибавку к тексту
   компенсирует убавка паддинга — 15+2×10 = 16+2×9.5 = 35px, кнопка
   ровно та же. Ширина держится тем же горизонтальным паддингом;
   она подрастает на доли пикселя от самих букв — этого не избежать,
   не сжимая насильно межбуквенное расстояние. */
.top-actions .btn.small {
  padding: 9.5px 18px; font-size: 16px; font-weight: 400;
}

/* круглые кнопки языка и темы */
/* Кружок-обводка снят по просьбе 2026-08-08 («удали фон у этих
   кнопок» — видимым «фоном» была именно рамка, background и так был
   прозрачный). Осталась голая иконка; чтобы наведение всё-таки
   отзывалось, вместо рамки светлеет подложка. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  font: 600 13.5px/1 "Plus Jakarta Sans", system-ui, sans-serif;
  cursor: pointer;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.icon-btn:hover { color: var(--ink); background: var(--panel); }

/* ── выбор языка интерфейса ───────────────────────────────────────
   Просьба 2026-08-08 «сделай выбор на всех языках»: кнопка EN раньше
   просто гоняла ru⇄en. Теперь под ней выпадает список из UI_LANG_META
   (общий с дашбордом, лежит в static/flags.js). Меню absolute внутри
   position:relative обёртки, поэтому шапку не растягивает; список
   длинный (17 языков) — своя прокрутка, потолок по высоте. */
.lang-pick { position: relative; }
/* Флаг на самой кнопке (просьба 2026-08-08 — вместо кода языка) и
   шеврон рядом с ним (просьба 2026-08-08). Кнопка перестала быть
   кругом 40×40: ширину теперь диктует содержимое (флаг + стрелка),
   высота прежняя. Скругление оставлено пилюлей. */
#lang {
  width: auto; gap: 5px; padding: 0 8px;
}
#lang .fl {
  display: block; width: 24px; aspect-ratio: 3 / 2;
  border-radius: 3px; overflow: hidden; border: 1px solid var(--line);
}
#lang .fl svg { width: 100%; height: 100%; object-fit: cover; }
/* стрелка переворачивается, когда список открыт */
#lang .chev {
  width: 14px; height: 14px; flex-shrink: 0;
  transition: transform .2s var(--ease);
}
#lang[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* «Мостик» через зазор между кнопкой и меню (открытие по наведению,
   просьба 2026-08-08): без него мышь, идущая от кнопки к списку,
   теряет наведение ровно в этих 8 пикселях, и меню захлопывается на
   полпути. Полоса невидимая и живёт ТОЛЬКО пока меню открыто — иначе
   она перехватывала бы клики по тому, что под ней. Внутрь .lang-menu
   её положить нельзя: у меню своя прокрутка, псевдоэлемент обрезало
   бы. Класс ставит setLangMenu в landing.js. */
.lang-pick.open::after {
  content: ""; position: absolute; top: 100%; right: 0;
  width: 100%; height: 10px;
}
/* Размер ПАНЕЛИ (просьба 2026-08-17 «сделай выбор языка больше — именно
   не иконка открытия, а борд, который открывается»): панель была
   210 px шириной с пунктами в 14.5 px — на широком экране читалась как
   мелкая сноска. Теперь 300 px и потолок высоты выше; сама кнопка в
   шапке осталась прежней. max-width держит панель в экране на телефоне:
   без него 300 px при right: 0 вылезли бы за край. */
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  min-width: 300px; max-width: calc(100vw - 24px);
  max-height: min(66vh, 520px); overflow-y: auto;
  padding: 8px; border-radius: var(--r);
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.lang-menu[hidden] { display: none; }
/* Поле поиска первым пунктом (просьба 2026-08-08). Липкое: список под
   ним прокручивается, поле остаётся на виду. Фон непрозрачный — иначе
   уезжающие под него пункты просвечивали бы. */
/* Отрицательные поля обязаны совпадать с padding самой панели — иначе
   липкая шапка не дотянется до её краёв и под ней просвечивали бы
   уезжающие пункты (панель 8px → тут -8px и top: -8px). */
.lang-search {
  position: sticky; top: -8px; z-index: 1;
  margin: -8px -8px 6px; padding: 8px;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.lang-search input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--ink);
  font: 400 15.5px/1.2 "Plus Jakarta Sans", system-ui, sans-serif;
  outline: none;
}
.lang-search input:focus { border-color: var(--ink-faint); }
/* крестик очистки у type=search в вебките — лишняя деталь в узком поле */
.lang-search input::-webkit-search-decoration,
.lang-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.lang-empty {
  padding: 12px; text-align: center;
  font-size: 14.5px; color: var(--ink-faint);
}
.lang-empty[hidden] { display: none; }

.lang-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink); cursor: pointer;
  font: 400 16px/1.2 "Plus Jakarta Sans", system-ui, sans-serif;
  text-align: left;
}
.lang-menu button[hidden] { display: none; }
.lang-menu button:hover { background: var(--panel); }
.lang-menu button[aria-selected="true"] {
  background: var(--panel); font-weight: 600;
}
/* флаг в списке: та же плашка 3×2, что и везде на странице */
.lang-menu .fl {
  display: block; flex: 0 0 auto; width: 28px; aspect-ratio: 3 / 2;
  border-radius: 4px; overflow: hidden; border: 1px solid var(--line);
}
.lang-menu .fl svg { width: 100%; height: 100%; object-fit: cover; }
.icon-btn svg { width: 19px; height: 19px; }
/* солнце и луна лежат друг на друге: видна та, что по теме */
.icon-btn .moon { display: none; }
:root[data-theme="dark"] .icon-btn .moon { display: block; }
:root[data-theme="dark"] .icon-btn .sun { display: none; }

/* бургер: иконка одним путём морфится в крестик через stroke-dasharray */
.burger {
  display: none; width: 40px; height: 40px; flex-shrink: 0;
  align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); cursor: pointer;
}
.burger svg { width: 21px; height: 21px; transition: transform .4s ease-in-out; }
.burger[aria-expanded="true"] svg { transform: rotate(-45deg); }
.burger .morph {
  stroke-dasharray: 12 63;
  transition: stroke-dasharray .4s ease-in-out, stroke-dashoffset .4s ease-in-out;
}
.burger[aria-expanded="true"] .morph {
  stroke-dasharray: 20 300; stroke-dashoffset: -32.42px;
}

/* Меню на телефоне — панель, выезжающая справа (просьба 2026-09-01:
   «боковое меню, а не листать сверху»). До этого оно раскрывалось на
   весь экран под шапкой. */
.top-menu {
  /* Панель во всю высоту экрана и ПОВЕРХ шапки (просьба 2026-09-04).
     Раньше она начиналась под шапкой (top: var(--top-h)), чтобы
     бургер-крестик остался доступен; теперь закрывает панель своя
     кнопка .menu-close внутри неё, и подпорка не нужна.
     z-index выше .top-stack (20): панель лежит вне шапки, см.
     комментарий в landing.html. */
  position: fixed; right: 0; top: 0; bottom: 0; left: auto;
  /* 78vw, а не 86: на 339 px панель шириной 292 px оставляла слева
     полоску в 47 px, и это читалось как сбой вёрстки, а не как
     задуманная боковая панель (жалоба 2026-09-01). Теперь просвет
     явно шире и панель видно как панель. */
  z-index: 22; width: min(300px, 78vw);
  /* Всё содержимое собрано СВЕРХУ. При space-between между «Новости» и
     кнопками зияла дыра почти в пол-экрана — панель выглядела
     сломанной (жалоба 2026-09-01). */
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 18px; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 20px calc(22px + env(safe-area-inset-bottom));
  background: var(--paper); border-left: 1px solid var(--line);
  box-shadow: -18px 0 46px -18px rgb(0 0 0 / .3);
  animation: top-menu-in .22s ease-out;
}
@keyframes top-menu-in { from { transform: translateX(100%) } }
@media (prefers-reduced-motion: reduce) { .top-menu { animation: none } }
.top-menu[hidden] { display: none; }   /* иначе display:flex перебьёт hidden */
/* затемнение под панелью */
.top-scrim {
  position: fixed; inset: 0; z-index: 21; background: rgb(0 0 0 / .45);
  animation: top-scrim-in .22s ease-out;
}
@keyframes top-scrim-in { from { opacity: 0 } }
.top-scrim[hidden] { display: none; }
/* строка с крестиком: он стоит у правого поля панели, там же, где
   был бургер в шапке — панель открывается «из-под» кнопки */
/* слева тема и язык, справа крестик */
.top-menu-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  /* якорь для выпадающего списка языков: он растягивается по ширине
     ЭТОЙ строки, а не кнопки-флага (см. .top-menu-tools .lang-menu) */
  position: relative;
}
.menu-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background .18s var(--ease);
}
.menu-close:hover { background: var(--panel); }
.menu-close svg { width: 20px; height: 20px; }
.top-menu nav { display: grid; gap: 2px; }
/* вес 400 — та же просьба 2026-08-08, что и у строки шапки выше: это
   те же самые ссылки, просто раскрытые на телефоне */
.top-menu nav a {
  padding: 9px 2px; display: flex; align-items: center;
  text-decoration: none;
  font-family: "Onest", system-ui, sans-serif;
  font-size: 18px; font-weight: 400; letter-spacing: -.03em;
}
/* Тема и язык, переехавшие из шапки (см. placeTools в landing.js).
   Вид у них ТОТ ЖЕ, что в строке шапки — голая иконка солнца и пилюля
   с флагом и шевроном (просьба 2026-09-05); своих рамок и растяжки на
   всю ширину блок не навязывает. */
.top-menu-tools { display: flex; align-items: center; gap: 4px; }
.top-menu-tools:empty { display: none; }   /* шире телефона кнопок тут нет */
/* Список раскрывается ПО ШИРИНЕ ПАНЕЛИ, а не от кнопки-флага: своих
   300px хватало, чтобы уехать за край экрана (жалоба 2026-09-05).
   Для этого снимаем относительность с .lang-pick — тогда список
   считает края от .top-menu-head, у которого position: relative. */
.top-menu-tools .lang-pick { position: static; }
.top-menu-tools .lang-menu {
  left: 0; right: 0; width: auto; min-width: 0; max-width: none;
  /* панель сама прокручивается, поэтому потолок ниже обычного —
     иначе список упирался бы в низ экрана */
  max-height: min(52vh, 420px);
}
.top-menu-foot {
  display: grid; gap: 10px; padding-top: 18px;
  border-top: 1px solid var(--line);
}
/* «Войти» и «Регистрация» в раскрытом меню — пара к .top-actions
   .btn.small: перебиваем font-weight: 600 базовой .btn */
.top-menu-foot .btn { font-weight: 400; }
body.menu-open { overflow: hidden; }
/* Пока меню открыто, фон шапки сплошной: у .scrolled он полупрозрачный
   с размытием, и сквозь него просвечивало бы содержимое под меню. */
body.menu-open .top { background: var(--paper); }

/* ── первый экран ─────────────────────────────────────────────────
   Чистый лист и один заголовок по центру (2026-08-06, просьба
   пользователя). До этого здесь была тёмная карточка с фоновым видео,
   подзаголовком, двумя кнопками и строкой про токены — всё снято, и
   вместе с ними ушла вся обслуживавшая их машинерия: светлые токены
   внутри карточки, text-shadow под буквами (он держал белый текст
   читаемым на светлом небе ролика) и слои с z-index. Текст теперь
   обычного цвета страницы, тени ему не нужны. */
/* Сверху — обычный воздух под шапкой (без него, пока карточка не
   растягивалась на весь вьюпорт, заголовок липнет прямо к шапке —
   поймали визуально 2026-08-08 сразу после отказа от min-height).
   Снизу — просто зазор до блока «Оригинал → ИИ-Дубляж»
   (--ba-gap-top), больше ни во что не пересчитывается. */
.hero { padding: clamp(48px, 9vh, 108px) var(--edge) var(--ba-gap-top); }
/* Точечная сетка (просьба 2026-08-06, образец — «Dot Pattern»). Чёрный
   фон карточки снят по прямой просьбе 2026-08-08 — точки и текст
   теперь на обычном фоне страницы (--paper) и цветах страницы
   (--ink), а не зашиты белым под тёмную подложку, как раньше. */
.hero-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  /* Высота — по содержимому (просьба 2026-08-08 «заголовок, подзаголовок
     и кнопка не должны двигаться»): раньше карточка растягивалась под
     остаток вьюпорта, чтобы следующий блок выглядывал строго нужной
     долей — из-за этого при любой правке зазора или доли видимого сама
     карточка меняла высоту и утаскивала за собой текст с кнопкой.
     Теперь блок ниже просто идёт следующим в потоке, ничего не
     подгоняется под 100vh. */
  max-width: var(--hero-w); margin: 0 auto;
  padding: clamp(24px, 4vh, 44px) 22px;
  border-radius: clamp(18px, 2.2vw, 34px);
  color: var(--ink);
  text-align: center;
}
/* Сами точки — один повторяющийся радиальный градиент. К краям поле
   растворяется эллиптической маской (как в образце): двумя линейными
   градиентами это потребовало бы mask-composite. Цвет точек —
   color-mix от --ink, а не жёсткий rgba: на светлом фоне (light-тема)
   нужны тёмные точки, на тёмном (dark-тема) — светлые, сам --ink
   переключается между темами. */
.hero-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle,
                    color-mix(in srgb, var(--ink) 22%, transparent) 1px,
                    transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%,
                      #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%,
              #000 0%, transparent 78%);
  pointer-events: none;
}
.hero-mid { position: relative; z-index: 1; width: 100%; }
/* <br> в разметке убран (просьба 2026-08-08 «в одну строку») —
   переносится теперь только сам браузер на узком экране. Потолок
   50px (просьба 2026-08-08, было 55px). */
.hero h1 {
  margin: 0 auto;
  max-width: none;
  font-size: clamp(28px, 4.4vw, 50px);
  font-weight: 500;
  letter-spacing: -.02em; word-spacing: -.08em; line-height: 1.06;
}
/* Подзаголовок первого экрана — вернули точечно 2026-08-08 (экран
   специально держали без него с 2026-08-06, снято по прямой просьбе
   поверх того решения). Цвет — через --ink-soft, как в остальной
   странице (с 2026-08-08 карточка больше не тёмная безусловно, см.
   .hero-card — правки должны идти вместе). Кегль фиксированный 20px
   (просьба 2026-08-08, правлено в тот же день 33px → 30px → 20px) —
   раньше был clamp с
   потолком 16.5px под короткую жирную строку + серую цифру; с одним
   предложением делить текст на акцент и пояснение стало не на чем,
   поэтому и .hero-sub strong снят. Текст переносится на две строки
   явным <br> (просьба 2026-08-08), поэтому max-width поднят с 32em до
   38em — первая строка «Функция дубляжа аудио и видео на основе
   искусственного интеллекта» сама по себе 34.9em при этом кегле
   (замер по метрикам Onest), и на 32em браузер ломал её ЕЩЁ раз,
   получалось три строки вместо двух. Число — не с потолка: короче
   ширины карточки на любом экране, а совпадать с длиной строки
   один-в-один не обязано, важно лишь не быть у́же неё. */
.hero-sub {
  margin: 14px auto 0; max-width: 38em;
  font-size: 20px;
  color: var(--ink-soft);
  line-height: 1.5;
}
/* Кнопка первого экрана (просьба 2026-08-08 «чёрная кнопка»). Не
   отдельный жёстко-чёрный цвет, а тот же .btn.primary, что и везде на
   странице (шапка, тарифы): пилюля --btn-dark чёрная на светлой теме
   и белая на тёмной — так кнопка не сливается с фоном карточки на
   тёмной теме (там --paper почти чёрный, и буквально чёрная кнопка
   была бы не видна). display:inline-flex у .btn центрируется через
   text-align:center родителя без обёртки. */
/* Размер кнопки — крупнее 16px/15px 30px, что даёт .btn.big: рядом с
   заголовком в 38–56px она читалась мелкой. Подбирался в два захода
   2026-08-08: сперва 19px и поля 17×34 («сделай надпись больше»),
   потом на шаг назад — 17px и поля 15×30 («чуть меньше»). Поля едут
   вместе с кеглем: оставишь большие при мелком тексте — пилюля станет
   пустой и рыхлой. Селектор ОБЯЗАТЕЛЬНО из двух классов: одиночный
   .hero-cta (0,1,0) проигрывает .btn.big (0,2,0), и размер молча не
   применился бы. */
.btn.hero-cta {
  margin-top: 28px;
  font-size: 17px; padding: 15px 30px;
}

/* ── «Оригинал → ИИ-Дубляж» ───────────────────────────────────────
   Вторым блоком страницы (просьба 2026-08-08, по макету пользователя).
   С 2026-08-17 кадр ОДИН, а дорожку выбирает переключатель-сегмент над
   ним (просьба «как на референсе, только без „дубляж + оригинал“»):
   .badm — колонка «ряд кнопок → кадр», всё по центру. Стили самого
   сегмента лежат вместе с .fit-tabs/.langdemo-tabs — там же, где живёт
   .seg-thumb; здесь только размер кнопок и отступ.
   Правила .ba-grid / .ba-cap / .ba-arrow ниже НЕ мертвы: по ним
   собраны пары кадров в блоке «Для кого подойдёт дубляж» (#fit).
   Цвета — токенами страницы: блок стоит на обычном фоне, а не на
   тёмной подложке (её сняли в тот же день, см. .hero-card). */
.badm {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
}
.badm-tab { padding: 9px 18px; font-size: 15px; }
/* Колонки по содержимому и вся тройка по центру: кадры теперь заданы
   в пикселях (высота × 16/9), поэтому растягивать колонки на 1fr
   нельзя — кадр прижался бы к краю своей половины. */
.ba {
  /* та же переменная, что и нижний паддинг .hero — общий зазор между
     кнопкой и блоком, .hero-card эту цифру больше не считает */
  padding-top: var(--ba-gap-top);
}
.ba-grid {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 3.5vw, 56px);
}
.ba-item { margin: 0; }
.ba-cap {
  margin-bottom: 14px; text-align: center;
  font-family: "Onest", system-ui, sans-serif;
  font-size: clamp(15px, 1.7vw, 21px); font-weight: 500;
  letter-spacing: -.01em; color: var(--ink);
}
/* Размер кадра задаётся здесь, а не файлом: пока ролика нет, пустая
   рамка обязана занимать столько же места, сколько займёт видео,
   иначе при подстановке файла вся страница поедет. Ведёт ВЫСОТА
   (--ba-frame-h), ширину считает пропорция 16:9 — пропорция должна
   остаться 16:9 и после подстановки настоящих роликов. */
.ba-frame {
  height: var(--ba-frame-h);
  width: calc(var(--ba-frame-h) * 16 / 9);
  max-width: 100%;
  overflow: hidden;
  border-radius: clamp(8px, 1vw, 14px);
  background: var(--panel);
  /* якорь для крупной кнопки play поверх кадра (см. .play-badge) */
  position: relative;
}
/* cursor: pointer — весь кадр кликабелен и запускает ролик
   (landing.js, setupClickToPlay), курсор об этом сообщает */
.ba-frame video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }

/* ── крупная кнопка play поверх кадра (просьба 2026-09-07) ────────
   Нативная кнопка плеера мелкая и живёт в углу; эта — по центру и
   заметная. Элемент строит landing.js, в разметке его нет: кадров
   на странице много, и держать копию значка в каждом — лишний код.
   pointer-events: none — КЛЮЧЕВОЕ: значок только рисуется, а клик
   проходит СКВОЗЬ него к самому <video>, где уже висит play/pause.
   Иначе пришлось бы дублировать запуск ещё и на кнопке.
   Прячется классом is-playing на рамке, а не удалением: на паузе
   значок должен вернуться. */
.play-badge {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(52px, 13%, 80px); aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, .52);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
  display: grid; place-items: center;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.play-badge svg {
  width: 38%; height: 38%; fill: #fff;
  /* треугольник визуально тяжелее слева — сдвигаем, иначе кажется,
     что значок стоит не по центру круга */
  margin-left: 8%;
}
.ba-frame.is-playing .play-badge,
.langdemo-frame.is-playing .play-badge {
  opacity: 0; transform: translate(-50%, -50%) scale(.86);
}
/* На телефоне значка нет вовсе, и клик по кадру ролик не запускает
   (просьба 2026-09-08: палец задевает кадр при прокрутке). Порог тот
   же, что у вёрстки блока ниже; парная проверка — в landing.js,
   setupClickToPlay. Курсор-указатель тоже убираем: обещать нажатие,
   которого нет, нельзя. */
@media (max-width: 760px) {
  .play-badge { display: none; }
  .ba-frame video, .langdemo-frame video { cursor: default; }
}
/* заглушка на время, пока файлы не положены (см. комментарий в
   landing.html): ровно та же геометрия, просто без содержимого */
.ba-empty {
  background: color-mix(in srgb, var(--ink) 14%, var(--paper));
  border: 1px solid var(--line);
}
.ba-arrow { color: var(--ink); }
.ba-arrow svg { width: clamp(34px, 5vw, 72px); height: auto; }

@media (max-width: 760px) {
  /* На телефоне пара встаёт друг под друга, стрелка поворачивается.
     Здесь кадр снова ведёт ШИРИНА: расчёт «половина блока под сгибом»
     на телефоне всё равно не работает (блок вдвое выше — две пары
     подписей и кадров подряд), а вписаться в узкий экран важнее. */
  .ba-grid { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
  .ba-item { width: 100%; }
  .ba-frame { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .ba-arrow { transform: rotate(90deg); }
}
.note { margin-top: 16px; font-size: 13.5px; color: var(--ink-faint); }

/* ── блок сравнения: два плеера рядом ─────────────────────────────
   Оба ролика играют всегда, звук слышно у одного. Логика синхронизации
   живёт в landing.js: ведём ТЕМПОМ, а не перемоткой. */
.vs { padding-top: 0; }
.vs-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); overflow: hidden;
}
.vs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line);
}
.vs-pane {
  position: relative; background: var(--paper);
  padding: 14px; transition: background .25s var(--ease);
}
.vs-pane.on { background: color-mix(in srgb, var(--ink) 4%, var(--paper)); }
.vs-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.vs-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
/* плашка «звук здесь» — появляется у активного плеера */
.vs-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  opacity: 0; transform: translateY(-3px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.vs-pane.on .vs-live { opacity: 1; transform: none; }
/* три палочки-эквалайзер внутри плашки */
.vs-live i {
  width: 2px; height: 9px; border-radius: 1px; background: currentColor;
  animation: eq .9s ease-in-out infinite;
}
.vs-live i:nth-child(2) { animation-delay: .15s; }
.vs-live i:nth-child(3) { animation-delay: .3s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 11px; } }

.vs-video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: #000; border-radius: 12px; cursor: pointer;
}
.vs-note {
  margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink-faint);
}

/* полоса управления под парой плееров */
.vs-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; border-top: 1px solid var(--line);
}
.vs-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--btn-dark); color: var(--btn-dark-ink);
  transition: transform .12s var(--ease);
}
.vs-play:active { transform: scale(.94); }
.vs-play svg { width: 16px; height: 16px; }
.vs-play .ic-pause { display: none; }
.vs-play.playing .ic-play { display: none; }
.vs-play.playing .ic-pause { display: block; }

.vs-seek {
  flex: 1; height: 4px; border-radius: 999px;
  background: var(--line); cursor: pointer; position: relative;
}
.vs-seek span {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 999px; background: var(--ink);
}
.vs-time {
  font-variant-numeric: tabular-nums; font-size: 13px;
  color: var(--ink-faint); flex-shrink: 0;
}

/* переключатель звука: индикатор ездит трансформом, не left/width */
.vs-switch {
  position: relative; display: flex; flex-shrink: 0;
  padding: 3px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line);
}
.vs-switch .knob {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px); border-radius: 999px; background: var(--ink);
  transition: transform .3s var(--ease);
}
.vs-switch[data-on="ws"] .knob { transform: translateX(100%); }
.vs-switch button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: 7px 16px; border-radius: 999px;
  font: 600 13.5px/1 "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--ink-soft); white-space: nowrap;
  transition: color .3s var(--ease);
}
.vs-switch button.on { color: var(--paper); }

.vs-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px; margin-top: 16px;
  font-size: 13px; color: var(--ink-faint);
}
/* пара «язык → язык» плашками, как на странице результата */
.vs-pair { display: inline-flex; align-items: center; gap: 8px; }
.vs-pair b {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}

/* ── полоса цифр ─────────────────────────────────────────────────── */
.stats { padding-block: clamp(48px, 6vw, 76px); }
.stat-grid {
  display: grid; gap: 28px 24px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-block: clamp(32px, 4vw, 48px);
}
.stat { text-align: center; }
.stat b {
  display: block;
  font-family: "Onest", system-ui, sans-serif;
  font-size: clamp(38px, 5vw, 56px); font-weight: 600; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block; margin-top: 6px; font-size: 14px; color: var(--ink-faint);
}

/* ── схема разделения дорожки ─────────────────────────────────────
   Разметки этого блока на витрине НЕТ (удалена вместе с блоком «Как
   это работает», 2026-08-08). Остатки, которые ждут решения: стили
   .split-* ниже, splitPlay и buildBars в landing.js, четыре mp3 в
   static/demo/split/ (они же в PUBLIC_PATHS в app.py) и ключи
   land.split* в i18n.js.
   Пять клеток в ряд: исходная дорожка → стрелка → пара «речь и фон» →
   стрелка → готовый микс. Столбики волн рисует landing.js, а вырастают
   они лесенкой, когда блок доехал до экрана. */
.split { background: var(--panel); border-block: 1px solid var(--line); }
.split-flow {
  display: grid; align-items: center; gap: 18px; margin-top: 52px;
  grid-template-columns: 1fr auto 1.18fr auto 1fr;
}
.split-arrow {
  width: 22px; height: 22px; color: var(--ink-faint);
  opacity: 0; transition: opacity .5s var(--ease) .45s;
}
.split-flow.in .split-arrow { opacity: 1; }
.split-pair { display: grid; gap: 14px; }
/* Карточка дорожки — кнопка (просьба 2026-08-08 «сделай блок
   реальным»): по щелчку играет настоящая дорожка из прогона.
   Сброс вида кнопки нужен целиком — по умолчанию у <button> свой фон,
   рамка, шрифт и выравнивание текста по центру. */
.split-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 17px 18px 19px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--paper);
  font: inherit; color: inherit;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.split-card:hover { border-color: var(--ink-faint); }
.split-card.playing { border-color: var(--ink); }
.split-cap {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}
.split-card.playing .split-cap { color: var(--ink); }
/* значок: треугольник «играть», на ходу — две полоски «пауза».
   Рисуем рамками, чтобы не тащить в разметку ещё два svg на карточку. */
.split-play {
  flex-shrink: 0; width: 16px; height: 16px; position: relative;
  border-radius: 50%; border: 1.4px solid currentColor;
}
.split-play::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 3.4px solid transparent; border-bottom: 3.4px solid transparent;
  transform: translateX(1px);
}
.split-card.playing .split-play::before {
  width: 5px; height: 6px; border: 0; transform: none;
  border-left: 1.8px solid currentColor; border-right: 1.8px solid currentColor;
  background: none;
}
/* речь — то, что заменяется: её колонка выделена рамкой потемнее */
.split-node.speech .split-card {
  border-color: color-mix(in srgb, var(--ink) 32%, var(--line));
}
.bars {
  display: flex; align-items: center; gap: 2px; height: 54px;
  margin-top: 13px; color: var(--ink-soft);
  position: relative;
}
.bars i {
  flex: 1 1 0; min-width: 2px; border-radius: 2px;
  background: currentColor; height: var(--h, 40%);
  transform: scaleY(.06); transform-origin: 50% 50%;
  transition: transform .55s var(--ease);
  transition-delay: calc(var(--i, 0) * 12ms);
}
.split-flow.in .bars i { transform: scaleY(1); }
/* Курсор воспроизведения: непроигранная часть волны приглушается
   полупрозрачной шторкой цвета карточки. Так — ОДНА правка стиля на
   кадр вместо перекраски полусотни столбиков по отдельности; сравнить
   номер столбика с прогрессом в CSS всё равно нечем.
   --played (0…1) двигает landing.js по timeupdate. */
.bars::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -2px;
  left: calc(var(--played, 0) * 100%);
  background: var(--paper); opacity: .62;
  pointer-events: none;
  transition: left .12s linear, opacity .2s var(--ease);
}
/* пока дорожка не играет, шторки нет вовсе — волна ровная */
.split-card:not(.playing) .bars::after { opacity: 0; }
.split-node.speech .bars { color: var(--ink); }
.split-node.bg .bars { color: var(--ink-faint); }
.split-hint {
  margin: 26px auto 0; text-align: center;
  font-size: 14px; color: var(--ink-faint);
}
.split-note {
  margin: 34px auto 0; max-width: 620px; text-align: center;
  font-size: 15px; color: var(--ink-soft);
}

/* ── возможности ─────────────────────────────────────────────────── */
/* Фон блока (просьба 2026-08-08 «на фон что-то добавь»). Сдержанно, в
   духе остальной витрины: точечная сетка 22px и мягкое свечение под
   карточками, без анимации. Рисуется псевдоэлементом, а не фоном самой
   секции, чтобы можно было растворить края маской и не городить
   отдельную обёртку в разметке.
   z-index: -1 работает только вместе с isolation: isolate у секции:
   без него слой уезжает ПОД фон body и не виден вовсе. Маска гасит
   сетку к краям — иначе она обрывалась бы по границе секции резкой
   линией и читалась как чужая плашка, а не как текстура листа. */
.feats { position: relative; isolation: isolate; }
.feats::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 42% at 50% 42%, var(--feat-glow), transparent 70%),
    radial-gradient(var(--feat-dot) 1px, transparent 1px);
  background-size: auto, 22px 22px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 50%, #000 42%, transparent 100%);
          mask-image: radial-gradient(72% 62% at 50% 50%, #000 42%, transparent 100%);
}
/* Bento-сетка (2026-08-08, референс magicui — тот же, что у блока
   «Как это работает»): три колонки шахматкой, высокая карточка чередуется
   с низкой, ряды одинаковые, высокая занимает два.
   Позиции раздаются по ПОРЯДКУ карточек, а не по их id: раскладку
   переопределяет медиазапрос, а id (специфичность 1,0,0) он бы не
   перебил. Значит, порядок карточек в разметке менять нельзя, не
   поправив здесь.
     колонка 1: 1 (высокая) / 4
     колонка 2: 2 / 5 (высокая)
     колонка 3: 3 (высокая) / 6
   Сетка 3×3 заполняется без дыр.
   Класс `tall` в разметке остался ПОМЕТКОЙ для читающего: своих стилей
   у него больше нет, высоту карточке даёт разворот на два ряда выше, а
   картинка внутри сама занимает то, что осталось от текста. */
/* Ряд задан минимумом, а не жёсткой высотой (minmax(..., auto)): на
   узком экране длинное описание переносится в три строки, и при
   фиксированной высоте нижняя строка уезжала бы под край карточки —
   теперь ряд просто подрастает. */
.feat-grid {
  display: grid; gap: 14px; margin-top: 44px; list-style: none;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(clamp(180px, 14vw, 194px), auto);
}
.feat-grid > li:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.feat-grid > li:nth-child(2) { grid-column: 2; grid-row: 1; }
.feat-grid > li:nth-child(3) { grid-column: 3; grid-row: 1 / 3; }
.feat-grid > li:nth-child(4) { grid-column: 1; grid-row: 3; }
.feat-grid > li:nth-child(5) { grid-column: 2; grid-row: 2 / 4; }
.feat-grid > li:nth-child(6) { grid-column: 3; grid-row: 3; }

/* Заливка ОБЯЗАТЕЛЬНА, а не украшение: карточка была прозрачной, и
   точечная сетка фона просвечивала сквозь неё — точки мигали под
   курсором. Непрозрачная карточка оставляет текстуру только в
   промежутках, как и задумано.
   КАРТОЧКА НЕ РЕАГИРУЕТ НА НАВЕДЕНИЕ (просьба 2026-08-08): ни подъёма,
   ни подсветки рамки, ни слоя поверх, ни увеличения картинки. Вместе с
   наведением ушла и ссылка «Попробовать бесплатно» — она ЖИЛА только
   раскрытием: текст уезжал вверх, из-под него выходила кнопка. В низкой
   карточке места на этот фокус не хватало, и скриншот перекрывался
   текстом (жалоба в тот же день). Теперь простой столбик: картинка
   сверху своим местом, текст под ней своим — наезжать нечему. */
.feat {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--paper);
  box-shadow: var(--shadow);
  transition: border-color .25s var(--ease);
}
/* тёмная тема: у референса вместо тени свечение изнутри — тень на
   почти чёрном листе не видна вовсе */
:root[data-theme="dark"] .feat {
  box-shadow: 0 -20px 80px -20px rgb(250 250 250 / .08) inset;
}

/* текст стоит на дне карточки: в высокой места больше, и картинка
   растягивается, а подпись остаётся на месте — иначе заголовки в ряду
   встали бы на разной высоте */
.feat-in { margin-top: auto; }
/* Текст крупнее картинки — намеренно (просьба 2026-08-08): сам блок
   ужимали ради компактности, но подписи от этого стали мельче, чем
   везде на витрине. Ряд сетки задан minmax(..., auto), поэтому от
   выросшего текста карточка просто подрастает, а не режет строку. */
.feat h3 { font-size: 19px; }
.feat p { margin-top: 7px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); }

/* ── иллюстрации в карточках ──────────────────────────────────────
   Пришли на смену иконке 40px (просьба 2026-08-08 «сделай более
   нативно понятно креативами», образец — Rask). Собраны из обычных
   элементов и токенов темы, без картинок: тёмная тема получается
   сама, лишних запросов нет, и текст внутри не нужен — а он и
   ЗАПРЕЩЁН, см. комментарий в landing.html (витрина на 17 языках,
   слова в иллюстрации остались бы русскими для всех).
   Иллюстрация НЕ фон карточки, а её верхний этаж (2026-08-08): она
   занимает всё свободное место над текстом и ни на что не наезжает.
   Прежде она лежала подложкой под текстом с растворением книзу — в
   низкой карточке текст ложился прямо на скриншот и читались оба
   плохо. Своей рамки и заливки у блока нет: рамку рисует сам
   «скриншот» внутри. Ничего не масштабируется — ни в высокой
   карточке, ни на наведении: у мини-скриншота от увеличения
   замыливаются таймкоды и коды языков. В высокой карточке картинка
   просто выше, потому что места больше. */
.feat .art {
  position: relative; z-index: 0; pointer-events: none;
  flex: 1 1 auto; min-height: 80px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}

/* --- общая волна: столбики по --h (доля высоты) ---
   Высота с потолком: в высокой карточке свободного места больше 250 px,
   и волна во все 100% превратилась бы в частокол на пол-экрана. */
.art-wave {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  height: 100%; max-height: 150px;
}
.art-wave i {
  display: block; width: 4px; border-radius: 2px;
  height: calc(var(--h) * 100%);
  background: var(--ink); opacity: .16;
}
/* участок речи — тот, что заменяется дубляжом */
.art-wave i.hi { opacity: .85; }
/* Значок замены держится за САМУ ВОЛНУ, а не за угол блока: место под
   картинку теперь высокое (в высокой карточке за 250 px), и от угла
   значок уезжал бы от волны на полкарточки. */
.art-badge {
  position: absolute; top: -9px; right: -9px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--ink);
}
.art-badge svg { width: 13px; height: 13px; }

/* ── мини-скриншоты интерфейса (просьба 2026-08-08) ─────────────────
   Пять карточек из шести показывают узнаваемый кусок настоящего
   экрана вместо абстракции (были силуэты, дужки-лучи, кружки —
   красиво, но на вопрос «как это выглядит у меня» они не отвечали).
   Собрано теми же токенами темы, что и весь сайт: картинок нет,
   тёмная тема получается сама, лишних запросов ноль.
   Слов внутри по-прежнему НЕТ (витрина на 17 языках): подписи —
   полоски, буквами написано только универсальное (EN/RU/ES, таймкод,
   номер спикера).
   Два общих кирпича: «окно» .ui (панель с шапкой — панель спикеров,
   поповер голоса, список фраз) и «кадр» .fr (кусок видео — надписи в
   кадре, плеер с дорожками). */

/* Окно не тянется во всю высоту высокой карточки: панель в 250 px с
   тремя строками наверху и пустотой под ними — это уже не «кусок
   экрана», а пустая коробка. Растёт до потолка и стоит по центру
   своего этажа. */
.art-ui .ui {
  display: flex; flex-direction: column;
  width: 100%; height: 100%; max-height: 176px;
  border-radius: 11px; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 12px 26px -20px rgb(0 0 0 / .55);
}
.art-ui .ui-bar {
  display: flex; align-items: center; gap: 5px; flex: none;
  padding: 7px 9px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.art-ui .ui-body { display: grid; gap: 5px; padding: 8px; }

/* ── три карточки НЕ скриншоты, а сцены (2026-08-08) ────────────────
   «Клон вашего голоса», «Надписи в кадре» и «Свой голос каждому»
   рисовались кусками интерфейса, как соседние три, и жалоба была
   ровно одна: «недостаточно интуитивно». Строки настроек с галочками
   честно повторяли экран, но с первого взгляда не отвечали, ЧТО
   происходит. Здесь важнее не узнаваемость экрана, а понятность
   действия — поэтому лицо, стрелка и код языка. Правило про слова в
   силе: букв в картинке только коды языков.
   Мини-скриншоты остались там, где сам экран и есть суть: список фраз
   редактора, меню дорожек плеера. */

/* --- трое говорящих: три лица, у каждого своя волна --- */
.art-people { gap: clamp(12px, 3vw, 28px); }
.art-people .pers { display: grid; justify-items: center; gap: 9px; }
/* фотография в круге: object-fit, потому что кадры квадратные, но
   разной крупности — иначе одно лицо было бы вплотную к краю круга,
   а другое терялось в середине */
/* Кругляш, а не квадрат: border-radius 50% плюс overflow у самой
   картинки — object-fit нужен потому, что кадры квадратные, но разной
   крупности, иначе одно лицо стояло бы вплотную к краю круга, а другое
   терялось в середине. Светлое кольцо и мягкая тень отделяют фото от
   листа: без них тёмный снимок сливался с рамкой карточки. */
.art-people img {
  /* Высота задана ЧИСЛОМ, а не aspect-ratio: .pers — грид, в нём
     картинка по умолчанию растягивается на всю ячейку (align-self:
     stretch), обе оси оказываются заданными, и пропорция молча
     игнорируется — выходил вытянутый овал вместо круга (жалоба
     2026-08-08). Отсюда же align-self: center. */
  --av: clamp(52px, 13vw, 66px);
  width: var(--av); height: var(--av); align-self: center;
  border-radius: 50%; overflow: hidden;
  object-fit: cover; display: block;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 10px 20px -12px rgb(0 0 0 / .45);
}
.art-people .wv { display: flex; align-items: center; gap: 3px; height: 16px; }
.art-people .wv i {
  display: block; width: 3px; border-radius: 2px;
  height: calc(var(--h) * 100%); background: var(--ink);
}
/* разная плотность волны — это и есть «разные голоса» */
.art-people .pers:nth-child(1) .wv i { opacity: .65; }
.art-people .pers:nth-child(2) .wv i { opacity: .42; }
.art-people .pers:nth-child(3) .wv i { opacity: .3; }

/* --- клон голоса: портрет в ореоле, языки пилюлями вокруг ---
   Оформление по присланному референсу (2026-08-08): крупная фигура
   тонкой монолинией, круг с расходящимся ореолом и подписи-пилюли
   поверх. Цвета в референсе тёмные, у нас берутся из токенов — витрина
   живёт в двух темах, зашивать чёрный нельзя.
   Пилюли стоят абсолютно, вокруг круга, поэтому у .art position:
   relative (он и так relative). Проценты, а не пиксели: карточка
   тянется по ширине колонки. */
/* Размер ореола ведётся от ВЫСОТЫ места, а не задан числом: в узкой
   раскладке карточка ниже, и кольцо в 112 px срезало бы краем. */
.art-clone .halo {
  position: relative; display: grid; place-items: center;
  height: min(112px, 100%); aspect-ratio: 1; flex: none;
}
/* три кольца — эхо голоса; гаснут наружу. Размеры долями, чтобы вся
   троица масштабировалась вместе с ореолом */
.art-clone .halo i {
  position: absolute; border-radius: 50%;
  border: 1px solid var(--ink); aspect-ratio: 1;
}
.art-clone .halo i:nth-child(1) { width: 66%; opacity: .16; }
.art-clone .halo i:nth-child(2) { width: 83%; opacity: .1; }
.art-clone .halo i:nth-child(3) { width: 100%; opacity: .055; }
.art-clone .face {
  position: relative; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
}
.art-clone .face svg { width: 30px; height: 30px; opacity: .6; }
.art-clone .chip {
  position: absolute; display: flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 12px 24px -18px rgb(0 0 0 / .5);
}
.art-clone .chip b {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-soft);
}
/* Флаг приходит из flags.js обёрнутым в span.fl (ставит buildChipFlags
   в landing.js по data-flag). Правило общее на весь блок: флаги стоят
   в пилюлях клона, в меню дорожек, в шапке колонок редактора и на
   плашке субтитра — размер задаётся по месту, пропорция 3:2 везде одна
   (общий холст всех флагов сервиса). */
.feats .fl {
  display: block; width: 16px; aspect-ratio: 3 / 2; flex: none;
  border-radius: 3px; overflow: hidden; border: 1px solid var(--line);
}
.feats .fl svg { width: 100%; height: 100%; object-fit: cover; }
.art-clone .chip .fl { width: 17px; }
.art-clone .wv { display: flex; align-items: center; gap: 2px; height: 12px; }
.art-clone .wv i {
  display: block; width: 2px; border-radius: 1px;
  height: calc(var(--h) * 100%); background: var(--ink); opacity: .45;
}
/* пилюли расставлены по кругу: слева сверху, справа посередине, слева
   снизу — так они не сходятся в столбик и не лезут под нижний край */
.art-clone .c1 { left: 2%; top: 12%; }
.art-clone .c2 { right: 2%; top: 42%; }
.art-clone .c3 { left: 14%; bottom: 24%; }

/* Карточка редактора — с фотофоном (просьба 2026-08-08, пейзаж
   выбрал пользователь). Поверх фото — затемнение, снизу гуще: без
   него текст на траве и небе не читается. Из-за фото цвета текста в
   ЭТОЙ карточке зашиты белым, а не токенами — фон одинаков в обеих
   темах. «Окно» редактора внутри остаётся на токенах: это скриншот
   интерфейса, ему положено следовать теме. */
#feat-editor {
  background:
    linear-gradient(180deg, rgb(9 9 11 / .22) 0%, rgb(9 9 11 / .82) 72%),
    url("/feat-editor-bg.jpg") center / cover no-repeat;
  border-color: rgb(255 255 255 / .16);
}
#feat-editor h3 { color: #fff; }
#feat-editor p { color: rgb(255 255 255 / .78); }

/* --- список фраз редактора: слева оригинал, справа перевод --- */
.art-edit .ui-bar.cols { gap: 0; padding: 0; }
/* в шапке колонок вместо кода языка стоит флаг (просьба 2026-08-08) */
.art-edit .ui-bar.cols b {
  flex: 1; padding: 6px 10px; display: flex; align-items: center;
}
.art-edit .ui-bar.cols b + b { border-left: 1px solid var(--line); }
.art-edit .ui-body { gap: 3px; padding: 6px; }
.art-edit .seg {
  display: grid; grid-template-columns: 36px 1fr 1fr; gap: 8px;
  align-items: start; padding: 6px; border-radius: 9px;
  border: 1px solid transparent;
}
.art-edit .seg.on { background: var(--panel); border-color: var(--line); }
.art-edit .meta { display: flex; align-items: center; gap: 5px; }
/* точка спикера: в редакторе она цветная, здесь монохром витрины —
   разные говорящие различаются насыщенностью */
.art-edit .dot {
  display: block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink); opacity: .28; flex: none;
}
.art-edit .seg:nth-child(2) .dot { opacity: .6; }
.art-edit .seg:nth-child(3) .dot { opacity: .42; }
.art-edit .meta b {
  font-size: 9px; font-weight: 600; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.art-edit .col { display: grid; gap: 5px; }
.art-edit .col i {
  display: block; width: var(--w); height: 5px; border-radius: 3px;
  background: var(--ink); opacity: .18;
}
.art-edit .seg.on .col i { opacity: .42; }
.art-edit .ln { display: flex; align-items: center; gap: 4px; }
/* курсор в правящейся строке */
.art-edit .ln em {
  display: block; width: 2px; height: 11px; border-radius: 1px;
  background: var(--ink); flex: none;
}

/* --- кадр ролика: общая рамка для двух последних карточек --- */
.art-shots { gap: 10px; }
/* ширину кадру задаёт пропорция от высоты, но сжиматься он ОБЯЗАН:
   на телефоне два кадра рядом шире карточки, и при flex: none правый
   просто срезало бы краем */
.art-shots .fr {
  position: relative; overflow: hidden; flex: 0 1 auto; min-width: 0;
  border-radius: 10px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel),
              color-mix(in srgb, var(--ink) 7%, var(--panel)));
  box-shadow: 0 12px 26px -20px rgb(0 0 0 / .55);
}

/* --- надписи в кадре: слева оригинал, справа перерисованный титр --- */
/* Кадр — настоящая фотография (static/faces/scene.jpg): полоски в
   пустой рамке не читались как надпись В КАДРЕ. Пропорция 16:9 от
   высоты места, поэтому кадр всегда целый, без обрезки по бокам. */
.art-text .fr {
  height: 100%; aspect-ratio: 16 / 9;
  display: grid; place-items: end center; padding: 9px;
}
.art-text img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Субтитр как вшитый: строки по центру внизу, БЕЗ подложки — только
   тень, как у настоящих субтитров на светлом кадре. Никаких флагов и
   зачёркиваний в самой надписи: в кадре им взяться неоткуда. */
.art-text .cap {
  position: relative; display: grid; gap: 4px; justify-items: center;
  margin-bottom: 2px;
}
.art-text .cap i {
  display: block; width: var(--w); height: 5px; border-radius: 3px;
  background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .85);
}
/* метка перевода — маленькая пилюля в углу кадра, как значок CC у
   плееров: флаг оригинала → флаг дубляжа */
.art-text .tag {
  position: absolute; top: 7px; right: 7px;
  display: flex; align-items: center; gap: 4px;
  padding: 3px 6px; border-radius: 999px;
  background: rgb(9 9 11 / .62); color: #fff;
  backdrop-filter: blur(2px);
}
.art-text .tag svg { width: 9px; height: 9px; opacity: .8; }
.art-text .fl { width: 14px; border-color: rgb(255 255 255 / .35); }

/* --- плеер с меню звуковых дорожек ------------------------------
   Нарочно похоже на YouTube (просьба 2026-08-08): именно там зритель
   и переключает языковую дорожку, и узнаваемость плеера — половина
   смысла картинки. Отсюда тёмный кадр, красная полоса с ползунком,
   панель снизу и тёмное меню настроек.
   Цвета внутри кадра СВОИ, а не токены страницы: настоящий плеер
   тёмный в любой теме сайта, и на белом листе светло-серый «плеер»
   на YouTube не похож вовсе. Красный — опознавательный знак ролика,
   без него полоса читается как обычный ползунок. */
.art-yt .fr {
  height: 100%; aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, #23242a, #0d0e11 70%);
  border-color: rgb(255 255 255 / .08);
}
/* меню настроек: тёмная панель, выбранное отмечено галочкой */
.art-yt .menu {
  position: absolute; right: 7px; top: 6px;
  display: grid; gap: 1px; padding: 5px; border-radius: 10px;
  background: rgb(28 28 28 / .95);
  box-shadow: 0 14px 28px -14px rgb(0 0 0 / .8);
}
/* строки нарочно тесные: в низкой карточке кадр всего 85–105 px
   высотой, и меню в полный рост наехало бы на полосу воспроизведения */
.art-yt .it {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 6px; border-radius: 5px;
}
.art-yt .it.on { background: rgb(255 255 255 / .12); }
/* название дорожки — полоска: слова в картинке запрещены */
.art-yt .it i {
  display: block; width: 30px; height: 4px; border-radius: 3px;
  background: rgb(255 255 255 / .35);
}
.art-yt .it.on i { background: rgb(255 255 255 / .8); }
.art-yt .it svg { width: 10px; height: 10px; color: #fff; flex: none; }
.art-yt .it .fl {
  display: block; width: 14px; aspect-ratio: 3 / 2; flex: none;
  border-radius: 2px; overflow: hidden;
}
.art-yt .it .fl svg { width: 100%; height: 100%; object-fit: cover; }

/* Полоса воспроизведения отдельной строкой НАД панелью — как в
   плеере, а не заодно с кнопками. Пройденное красное, остаток
   светло-серый; em — круглый ползунок на стыке. */
.art-yt .pg {
  position: absolute; left: 9px; right: 9px; bottom: 22px;
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #f00 42%,
              rgb(255 255 255 / .28) 42%);
}
.art-yt .pg em {
  position: absolute; left: 42%; top: 50%; width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #f00;
}
/* панель: play, громкость, время, шестерёнка и полный экран */
.art-yt .bar {
  position: absolute; left: 8px; right: 8px; bottom: 6px;
  display: flex; align-items: center; gap: 8px; color: #fff;
}
.art-yt .bar .ic { width: 12px; height: 12px; flex: none; opacity: .92; }
/* шестерёнка «нажата» — из неё и вышло меню */
.art-yt .bar .gear { margin-left: auto; }
.art-yt .bar b {
  font-size: 8px; font-weight: 500; letter-spacing: .02em;
  color: rgb(255 255 255 / .8); font-variant-numeric: tabular-nums;
}

/* Кнопка под сеткой — одна на весь блок, по центру. Отступ заметно
   больше зазора между карточками: впритык кнопка читалась как седьмая
   карточка ряда. Правило случайно стёрлось при переписывании стилей
   плеера 2026-08-08 (кнопка уехала влево) — не удалять. */
.feats-cta { margin-top: clamp(52px, 5vw, 72px); display: flex; justify-content: center; }
/* Кнопка крупнее общей .big: она одна и стоит в пустоте под широкой
   сеткой — в обычном размере терялась. Размер поднят только здесь:
   .btn.big носят и кнопки первого экрана с призывом внизу. */
.feats-cta .btn { padding: 18px 38px; font-size: 17px; border-radius: 16px; }

/* Узкий экран: шахматка складывается в две колонки, а потом в одну —
   разноразмерные карточки в 380 px читаются хуже одинаковых.
   Селектор с nth-child(n) нужен, чтобы перебить раскладку выше: у неё
   такая же специфичность, но она идёт раньше по файлу. */
@media (max-width: 1000px) {
  .feat-grid {
    grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto;
  }
  .feat-grid > li:nth-child(n) { grid-column: auto; grid-row: auto; }
  /* высота больше не задаётся рядами сетки — карточку держит её
     содержимое, а картинке нужен минимум, иначе от неё осталась бы
     полоска */
  .feat { min-height: 216px; }
}
@media (max-width: 640px) {
  .feat-grid { grid-template-columns: 1fr; }
}

/* ── языки: поле флагов и заголовок под ним ───────────────────────
   Ряды намеренно ШИРЕ экрана и стоят по центру: края уходят под
   обрез, и поле читается как продолжающееся за границами страницы.
   Растворение — одной эллиптической маской сразу во все стороны
   (два линейных градиента пришлось бы склеивать mask-composite,
   который в Safari живёт под своим именем). */
.langs { overflow: hidden; }
.flagfield {
  display: flex; flex-direction: column; gap: clamp(10px, 1.1vw, 16px);
  margin-bottom: clamp(28px, 4vw, 56px);
  mask-image: radial-gradient(ellipse 58% 74% at 50% 42%,
    #000 22%, rgba(0, 0, 0, .55) 58%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 58% 74% at 50% 42%,
    #000 22%, rgba(0, 0, 0, .55) 58%, transparent 100%);
}
/* Ряд едет: чётные влево, нечётные вправо (просьба 2026-09-05).
   Внутри ряда лежит .flagtrack — тот же набор флагов ДВАЖДЫ подряд,
   поэтому сдвиг ровно на половину трека склеивается бесшовно; без
   второй копии на месте уехавших флагов была бы дырка. Скорость у
   рядов чуть разная, иначе поле читается как один жёсткий блок. */
.flagrow { overflow: hidden; }
.flagtrack {
  display: flex; gap: clamp(10px, 1.1vw, 16px);
  width: max-content; flex-wrap: nowrap;
  animation: flag-left var(--dur, 80s) linear infinite;
}
.flagrow:nth-child(even) .flagtrack { animation-name: flag-right; }
@keyframes flag-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - clamp(5px, .55vw, 8px)), 0, 0); }
}
@keyframes flag-right {
  from { transform: translate3d(calc(-50% - clamp(5px, .55vw, 8px)), 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .flagtrack { animation: none; }
}
/* флаг приходит из flags.js обёрнутым в span.fl */
.flagrow .fl {
  display: block; flex: 0 0 auto;
  width: clamp(34px, 3.1vw, 48px); aspect-ratio: 3 / 2;
  border-radius: 4px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.flagrow .fl svg { width: 100%; height: 100%; object-fit: cover; }

/* честный перечень языков под заголовком: он же — текст для поиска */
.lang-list {
  max-width: 720px; margin: 18px auto 0; text-align: center;
  font-size: 14.5px; line-height: 1.7; color: var(--ink-faint);
}

/* ── таблица сравнения с обычным дубляжом ─────────────────────────── */
.cmp-tblwrap { margin-top: 48px; overflow-x: auto; }
.cmp {
  width: 100%; border-collapse: collapse; text-align: left;
  min-width: 640px;   /* на узком экране таблица прокручивается вбок */
}
.cmp th, .cmp td {
  padding: 17px 20px; border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 400; color: var(--ink-soft);
  vertical-align: top;
}
.cmp thead th {
  padding-bottom: 12px; font-size: 12px; font-weight: 600;
  color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em;
}
.cmp tbody th { width: 26%; font-weight: 600; color: var(--ink); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
/* своя колонка выделена заливкой во всю высоту таблицы */
.cmp .us { width: 37%; background: var(--panel); color: var(--ink); }
.cmp thead .us {
  color: var(--ink); font-weight: 700; text-transform: none;
  font-size: 15px; letter-spacing: -.01em;
}
.cmp tbody tr:first-child .us { border-radius: var(--r) var(--r) 0 0; }
.cmp tbody tr:last-child .us { border-radius: 0 0 var(--r) var(--r); }

/* ── честно: что получится, а что нет ────────────────────────────────────
   Блок честности: человек заранее видит, где сервис сработает плохо,
   и не платит за то, что ему не подойдёт. Обе карточки одинаковой
   тяжести — правая не оправдывается и не выглядит мелким шрифтом. */
.honest-grid {
  display: grid; gap: 20px; margin-top: 52px;
  grid-template-columns: 1fr 1fr;
}
.honest-card {
  padding: 30px 28px 32px; border-radius: var(--r-lg);
  border: 1px solid var(--line);
}
.honest-card.good { background: var(--panel); }
.honest-card h3 {
  display: flex; align-items: center; gap: 10px; font-size: 19px;
}
.honest-card h3 svg { width: 20px; height: 20px; flex-shrink: 0; }
.honest-card.good h3 svg { color: var(--ink); }
.honest-card.bad h3 svg { color: var(--ink-faint); }
.honest-card ul {
  list-style: none; display: grid; gap: 20px; margin-top: 24px; padding: 0;
}
.honest-card li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  align-items: start;
}
.honest-card li > svg {
  width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0;
  color: var(--ink-faint);
}
.honest-card li b { display: block; font-size: 15px; font-weight: 600; }
.honest-card li span {
  display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink-soft);
}
.honest-note {
  margin: 30px auto 0; max-width: 620px; text-align: center;
  font-size: 15px; color: var(--ink-faint);
}

/* Прежние стили тарифов (.pricing, .plan .price, .plan .badge,
   .plan.best) удалены 2026-08-09 вместе со своей разметкой: блок
   пересобран один в один с кабинетом, оформление лежит ниже, рядом с
   .plan-grid. */

/* ── вопросы ─────────────────────────────────────────────────────── */
.faq-list { margin-top: 48px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 22px 4px; border: 0; background: none; cursor: pointer;
  text-align: left; color: inherit;
  font: 600 17px/1.4 "Onest", system-ui, sans-serif; letter-spacing: -.02em;
  transition: color .2s var(--ease);
}
.faq-q:hover { color: var(--ink-soft); }
/* плюс превращается в минус: вертикальная палочка ложится набок */
.faq-sign { position: relative; width: 15px; height: 15px; flex-shrink: 0; }
.faq-sign::before, .faq-sign::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.faq-sign::before { inset: 7px 0 auto 0; height: 1.5px; }
.faq-sign::after { inset: 0 7px auto auto; width: 1.5px; height: 15px; }
.faq-item.open .faq-sign::after { transform: rotate(90deg); opacity: 0; }
/* раскрытие через grid-строку 0fr → 1fr: без вычисления высоты в JS */
.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding: 0 40px 24px 4px; font-size: 15.5px; color: var(--ink-soft);
  max-width: 68ch;
}
/* кнопка в ответе о цене: минус часть нижнего отступа абзаца, чтобы
   стояла при своём тексте, а не на полпути к следующему вопросу */
.faq-a .btn { margin: -8px 0 26px 4px; }

/* ── блог ─────────────────────────────────────────────────────────
   Карточки строит buildBlog() в landing.js из /api/news; вся секция
   скрыта, пока статей нет.
   История блока: карточки с обложками → тихий список «дата —
   заголовок» на линейках (2026-08-08) → три ТЕКСТОВЫЕ карточки
   (2026-08-09, выбор пользователя из трёх вариантов). Обложек здесь
   по-прежнему нет намеренно: витрина почти монохромная, и три чужие
   фотографии перетянули бы внимание с тарифов и FAQ. Зато у карточки
   есть тизер — это единственный живой текст блока для поиска и ИИ.
   Отступы секции остаются урезанными вдвое против общего правила для
   section: блог стоит между FAQ и «о сервисе» и не должен весить как
   они. */
.blog { padding-block: clamp(44px, 5vw, 64px); }
.blog-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px;
}
.blog-head h2 { font-size: 20px; letter-spacing: -.01em; }
.blog-head a {
  font-size: 14px; color: var(--ink-faint); text-decoration: none;
  transition: color .18s var(--ease);
}
.blog-head a:hover { color: var(--ink); }
.blog-grid {
  display: grid; gap: 16px; margin-top: 22px;
  grid-template-columns: repeat(3, 1fr);
}
/* Карточка намеренно легче, чем в «Возможностях»: там тень и заливка
   листом, здесь только тонкая рамка на прозрачном фоне — иначе два
   блока карточек подряд читались бы как один. */
.blog-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 20px 20px 18px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: transparent;
  color: var(--ink); text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.blog-card:hover { border-color: var(--ink-faint); background: var(--panel); }
.blog-tag {
  font-size: 12.5px; color: var(--ink-faint); margin-bottom: 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Заголовок и тизер режутся по строкам: длина статьи приходит из
   редактора, и без обрезки одна многословная не пустила бы соседей
   встать в ряд ровно. */
.blog-title {
  font-size: 18px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-teaser {
  margin-top: 8px; font-size: 14.5px; line-height: 1.5;
  color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Низ карточки прижат ко дну (margin-top: auto): у статей разной
   длины заголовки занимают одну-три строки, и без этого даты встали
   бы в ряду на разной высоте. */
.blog-foot {
  margin-top: auto; padding-top: 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.blog-date {
  font-size: 13px; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.blog-foot svg {
  flex: none; width: 16px; height: 16px; color: var(--ink-faint);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.blog-card:hover .blog-foot svg { opacity: 1; transform: none; color: var(--ink); }

/* Узкое окно: три карточки в ряд не читаются — становятся столбиком.
   Промежуточной пары колонок нет намеренно: статей ровно три, и
   третья висела бы одна под двумя. */
@media (max-width: 860px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-title { -webkit-line-clamp: 2; }
}

/* ── о сервисе ───────────────────────────────────────────────────── */
.about { background: var(--panel); border-block: 1px solid var(--line); }
.about-cols {
  display: grid; gap: 24px 48px; margin-top: 44px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.about-cols p { color: var(--ink-soft); font-size: 15.5px; }

/* ── карточка призыва перед подвалом ──────────────────────────────── */
.cta { padding-top: clamp(56px, 7vw, 96px); }
.cta-card {
  padding: clamp(64px, 9vw, 120px) 32px; border-radius: 28px; text-align: center;
  background: var(--cta-bg); color: var(--cta-ink);
}
.cta-card h2 {
  margin: 0 auto; max-width: 18ch;
  font-size: clamp(30px, 4.6vw, 56px); letter-spacing: -.035em;
}
.cta-card .lead {
  margin-inline: auto; color: color-mix(in srgb, var(--cta-ink) 70%, transparent);
}
.cta-card .btn {
  margin-top: 34px; background: var(--cta-ink); color: var(--cta-bg);
}
.cta-card .btn:hover {
  background: color-mix(in srgb, var(--cta-ink) 88%, var(--cta-bg));
}

/* ── подвал ───────────────────────────────────────────────────────
   Своей ЗАЛИВКИ у подвала нет и быть не должно (просьба 2026-08-08
   «сделай так, чтобы не было этого разного цвета»): серая подложка
   резала страницу полосой во всю ширину, и стык с белым листом читался
   как шов. Отсюда же в тот же день ушёл «приклеенный лист» — карточка
   со скотчем по углам: подвал переделан по новому образцу.
   Образец 2026-08-08: сверху призыв, ниже четыре колонки (бренд и три
   списка ссылок), тонкая линия и служебная строка. Прежний
   «приклеенный лист» со скотчем убран вместе с карточкой — с ним
   ушли и токены --tape, и символ #tape из разметки.
   Свечения-подложки (.foot::before с парой radial-gradient на токенах
   --feat-glow) больше НЕТ: в тёмной теме на чёрном фоне рядом с
   фотобаннером оно читалось как грязное пятно (жалоба 2026-08-09
   «у нас почему-то какое-то пятно»). Возвращать только по прямой
   просьбе. */
.foot {
  position: relative; isolation: isolate;
  padding: clamp(56px, 6vw, 92px) 24px 36px;
}

/* --- призыв над колонками: баннер на фотографии (2026-08-09) ---
   Прежняя живая зона загрузки #foot-drop удалена по просьбе
   пользователя (стили .fd-* сняты вместе с ней). Фото зашито
   картинкой static/cta-bg.jpg; поверх — виньетка ::before: затемнение
   сильнее к краям рамки и ровное в центре, без него белый текст
   тонул бы в светлом небе. Цвета текста и кнопки НЕ из токенов темы:
   фон здесь всегда фотография, в тёмной теме она не меняется, поэтому
   текст всегда белый, а кнопка всегда чёрная. */
.foot-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; text-align: center;
  padding: clamp(56px, 7vw, 104px) clamp(22px, 5vw, 64px);
  margin-bottom: clamp(48px, 6vw, 92px);
  border-radius: 40px;
  background: url("cta-bg.jpg") center / cover no-repeat #2e4a63;
  /* Контур — тот же, что у карточек «Возможностей» (просьба
     2026-08-09): рамка в 1 px и общая тень страницы. */
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
/* В тёмной теме у карточек вместо тени свечение изнутри — на почти
   чёрном листе тень не видна вовсе. Повторяем и здесь отдельным
   слоем (::after): своей inset-тени у блока быть не может, её
   закрыла бы фотография-фон. Слой стоит на z-index −1, то есть НАД
   затемнением ::before (оно объявлено раньше по дереву), но ПОД
   текстом — иначе белая дымка легла бы на заголовок. */
:root[data-theme="dark"] .foot-cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  pointer-events: none; border-radius: inherit;
  box-shadow: 0 -20px 80px -20px rgb(250 250 250 / .08) inset;
}
/* Затемнение стоит ПОД текстом и кнопкой пятном по центру и коротко
   растворяется к краям (просьба 2026-08-09 «короче»): прежняя
   виньетка кутала всю рамку и от фотографии оставался серый
   прямоугольник. Пятно шире текста (640 px — .foot-cta-in), чтобы у
   строк был запас по бокам, и полностью гаснет, не доходя до рамки,
   так что края неба остаются чистыми. */
.foot-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Восемь остановок вместо четырёх и затухание до самого края
     (просьба 2026-08-09 «ещё плавнее»): переход идёт по мягкой
     колоколообразной кривой, поэтому границы пятна не видно ни
     одной ступенькой. Прозрачный конец задан ЦВЕТОМ с нулевой
     прозрачностью, а не ключевым словом transparent: оно означает
     прозрачный ЧЁРНЫЙ и в переходе даёт сероватую муть. */
  background: radial-gradient(52% 60% at 50% 50%,
              rgba(6, 10, 16, .72) 0%,
              rgba(6, 10, 16, .69) 18%,
              rgba(6, 10, 16, .61) 34%,
              rgba(6, 10, 16, .49) 48%,
              rgba(6, 10, 16, .35) 61%,
              rgba(6, 10, 16, .21) 73%,
              rgba(6, 10, 16, .09) 86%,
              rgba(6, 10, 16, 0) 100%);
}
.foot-cta-in { max-width: 640px; }
.foot-cta .h2 {
  margin-top: 0; color: #fff;
  font-size: clamp(28px, 3.4vw, 42px);
  text-wrap: balance;
}
.foot-cta .lead {
  margin: 14px auto 0; max-width: 44ch;
  color: rgba(255, 255, 255, .85);
}
/* Кнопка переворачивается вместе с темой (просьба 2026-08-09): на
   светлой чёрная, на тёмной белая. Фон под ней — фотография, она в
   темах не меняется, поэтому цвет берётся не из --btn-dark (он в
   тёмной теме как раз светлеет), а зашит парой правил: так контраст
   с самим снимком остаётся высоким в обоих случаях. */
.foot-cta .btn {
  margin-top: clamp(26px, 3vw, 36px);
  padding: 17px 40px; font-size: 17px; border-radius: var(--r);
  background: #0b0d10; color: #fff;
}
.foot-cta .btn:hover { background: #23272e; }
:root[data-theme="dark"] .foot-cta .btn { background: #fff; color: #0b0d10; }
:root[data-theme="dark"] .foot-cta .btn:hover { background: #e4e4e7; }
/* Буквы кнопки пробовали ПРОРЕЗАТЬ, чтобы сквозь них было видно
   фотографию (mix-blend-mode: multiply в светлой теме и screen в
   тёмной, 2026-08-09). Затея отменена в тот же день: сквозь дырки
   виден не сам снимок, а снимок под затемнением — тёмно-серый, и
   надпись читалась заметно мягче обычной. Возвращать только по
   прямой просьбе; связка была жёсткая — цвет букв обязан быть
   противоположен заливке, а `isolation: isolate` у .foot-cta
   обязательна (без неё смешивание уходит за рамку баннера). */

/* --- четыре колонки --- */
.foot-main {
  display: grid; gap: 40px; align-items: start;
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  padding-bottom: clamp(36px, 4vw, 58px);
}
.foot-brand .brand img { width: 32px; height: 32px; }
.foot-brand .brand .word { font-size: 20px; }
.foot-brand p { margin-top: 16px; max-width: 270px;
                font-size: 14.5px; color: var(--ink-soft); }

.foot-col { display: flex; flex-direction: column; align-items: flex-start;
            gap: 14px; }
/* в образце заголовки колонок — крупные и жирные, не мелкий капс */
.foot-col h3 { font-size: 17px; }
.foot-col a { font-size: 15px; color: var(--ink-soft); text-decoration: none;
              transition: color .2s var(--ease); }
.foot-col a:hover { color: var(--ink); }

.foot-social { display: flex; gap: 18px; margin-top: 24px; }
.foot-social a { display: inline-flex; color: var(--ink);
                 transition: opacity .2s var(--ease); opacity: .75; }
.foot-social a:hover { opacity: 1; }
.foot-social .ico { width: 20px; height: 20px; }

/* --- служебная строка под линией --- */
.foot-base {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding-top: 26px; border-top: 1px solid var(--line);
}
.foot-copy { font-size: 13px; color: var(--ink-soft); }
.foot-req { margin-top: 6px; font-size: 12.5px; color: var(--ink-faint); }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
/* кнопка настроек cookie стоит в одном ряду со ссылками, поэтому и
   выглядеть должна ссылкой, а не кнопкой */
.foot-legal a, .foot-legal button {
  font: inherit; font-size: 13.5px; color: var(--ink-soft);
  text-decoration: none; background: none; border: 0; padding: 0;
  cursor: pointer; transition: color .2s var(--ease);
}
.foot-legal a:hover, .foot-legal button:hover { color: var(--ink); }

/* ── узкие экраны ────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  /* бренд — над колонками ссылок: рядом с тремя колонками ему тесно */
  .foot-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-brand p { max-width: 460px; }
  /* меню и «Войти» уезжают в бургер: в строку они уже не помещаются */
  .top-nav, .top-signin { display: none; }
  .burger { display: inline-flex; }
  /* Вправо строку шапки прижимал margin: 0 auto у .top-nav — вместе с
     скрытым меню пропадал и он, и кнопки с бургером липли к логотипу
     (жалоба 2026-09-04: «бургер не у правого края»). Возвращаем упор
     явно самим кнопкам — только здесь, где .top-nav уже нет. */
  .top-actions { margin-left: auto; }
  /* логотип на планшете уже мельче: в шапке остались бренд, тема,
     язык, «Создать аккаунт» и бургер — 44 px логотипа и слово в 26 px
     съедали ту самую сотню пикселей, которой не хватало кнопке */
  .brand img { width: 36px; height: 36px; }
  .brand .word { font-size: 21px; }
  .top-inner { gap: 12px; }
}

@media (max-width: 900px) {
  /* плееры встают друг под друга: рядом на такой ширине не разглядеть */
  .vs-grid { grid-template-columns: 1fr; }
  .vs-bar { flex-wrap: wrap; }
  .vs-seek { order: 3; flex-basis: 100%; }
  /* схема тоже разворачивается в столбик, стрелки ложатся вниз */
  .split-flow { grid-template-columns: 1fr; }
  .split-arrow { transform: rotate(90deg); margin: 0 auto; }
  .honest-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  section { padding: 56px 18px; }
  .top { padding-left: 18px; padding-right: 18px; }
  /* .hero-card высотой по содержимому и на телефоне тоже — прежний
     min-height от vh снят вместе с десктопным (см. .hero-card) */
  .hero-card { padding-left: 16px; padding-right: 16px; }
  .cta-card { border-radius: 20px; }
  .foot { padding-left: 18px; padding-right: 18px; }
  .foot-cta { border-radius: 28px; }
  .foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .foot-base { flex-direction: column; align-items: flex-start; gap: 18px; }
  .foot-legal { gap: 18px; }
  .top-menu nav a { font-size: 17px; }
  .vs-bar { gap: 12px; padding: 12px; }
  .vs-switch button { padding: 7px 12px; font-size: 13px; }
}


/* ── «Для кого подойдёт дубляж» ───────────────────────────────────
   Ряд табов, под ним панель с парой кадров. Пара кадров переиспользует
   готовые .ba-* из блока «Оригинал → ИИ-Дубляж»: композиция там ровно
   та же, а вторая копия тех же правил разъехалась бы с первой при
   первой же правке. Здесь — только табы, панель и подпись под ней.
   Высота панели держится кадром (--ba-frame-h), поэтому переключение
   табов не дёргает страницу: у всех четырёх пар геометрия одинаковая. */
/* ── переключатель-сегмент ────────────────────────────────────────
   Одна полоска-фон, внутри кнопки без своих рамок, активная помечена
   «пилюлей», которая ЕДЕТ к нажатой кнопке — как вкладки дорожек на
   странице результата в кабинете (.vtabs в static/index.css).
   Пилюля — отдельный элемент .seg-thumb, его вставляет и двигает
   скрипт (setupSeg в landing.js): собственный фон кнопки переезжать
   не умеет, он либо есть, либо нет. Размер и место скрипт ставит в
   пикселях по рамкам кнопок, поэтому ряд имеет право переноситься на
   вторую строку — считаются и сдвиг вбок, и сдвиг вниз.
   Скрипта нет (файл не загрузился) — пилюли не будет, но активная
   кнопка всё равно читается: у неё свой цвет текста. */
.fit-tabs, .langdemo-tabs, .badm-tabs {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2px; padding: 4px;
  width: max-content; max-width: 100%;
  background: var(--seg-bg); border: 1px solid var(--line);
  border-radius: 15px;
}
.seg-thumb {
  position: absolute; left: 0; top: 0; z-index: 0;
  border-radius: 11px; background: var(--seg-thumb);
  box-shadow: var(--seg-shadow);
  opacity: 0; pointer-events: none;
  transition: transform .34s var(--ease), width .34s var(--ease),
              height .34s var(--ease), opacity .2s linear;
}
.fit-tab, .langdemo-tab, .badm-tab {
  position: relative; z-index: 1;
  border: 0; background: none; border-radius: 11px;
  color: var(--ink-soft); cursor: pointer;
  font-family: inherit; font-weight: 500; line-height: 1.2;
  transition: color .2s var(--ease);
}
.fit-tab:hover, .langdemo-tab:hover, .badm-tab:hover { color: var(--ink); }
.fit-tab.is-on, .langdemo-tab.is-on, .badm-tab.is-on { color: var(--ink); }
.fit-tab:focus-visible, .langdemo-tab:focus-visible, .badm-tab:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .seg-thumb { transition: opacity .2s linear; }
}


.fit-tabs { margin: clamp(28px, 4vw, 44px) auto clamp(24px, 3.5vw, 38px); }
/* Кнопка со значком: flex, чтобы значок и подпись стояли на одной
   средней линии — у inline-svg своя базовая линия, и без flex значок
   съезжал бы вниз относительно текста. Запрещать перенос подписи
   нельзя: переводы длиннее русского (немецкий, польский), и на узком
   экране кнопка вылезла бы за край вместо того, чтобы перенести слово. */
.fit-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; font-size: 14.5px;
}
/* ОБЯЗАТЕЛЬНО следом за display выше (грабля 2026-09-07): скрытая
   вкладка с атрибутом hidden ПРОДОЛЖАЛА показываться — правило
   .fit-tab специфичнее браузерного [hidden], и inline-flex его
   перебивал. Скрывали «подкасты», а на витрине кнопка висела и
   вдобавок не работала: скрипт берёт только видимые табы. */
.fit-tab[hidden] { display: none; }
/* Значок гаснет вместе с подписью: цвет наследуется (currentColor),
   прозрачность у неактивной кнопки чуть ниже — иначе ряд рябил бы
   четырьмя одинаково яркими знаками и активная не читалась. */
.fit-ico {
  flex: none; width: 17px; height: 17px;
  opacity: .62; transition: opacity .2s var(--ease);
}
.fit-tab:hover .fit-ico { opacity: .8; }
.fit-tab.is-on .fit-ico { opacity: 1; }
.fit-note {
  max-width: 620px; margin: clamp(20px, 2.6vw, 30px) auto 0;
  text-align: center; color: var(--ink-soft);
  font-size: clamp(14.5px, 1.5vw, 16px); line-height: 1.55;
}

/* Подпись источника: ролики витрины взяты под лицензией Creative
   Commons Attribution, а она ОБЯЗЫВАЕТ назвать автора. Строка мелкая
   и приглушённая — это юридическая сноска, а не часть рассказа. */
.fit-src {
  max-width: 620px; margin: 10px auto 0; text-align: center;
  color: var(--ink-soft); opacity: .7;
  font-size: clamp(12px, 1.2vw, 13px); line-height: 1.5;
}
.fit-src a { color: inherit; text-decoration: underline; }

/* ── ролик с переключателем языков (в секции языков) ──────────────
   Кадр той же пропорции 16:9, что и пары выше, но шире: он один на
   строку. Ширину ведёт ВЫСОТА — как у .ba-frame, чтобы пустая рамка
   занимала столько же места, сколько займёт видео, и подстановка
   файла не двигала страницу. */
.langdemo { margin-top: clamp(30px, 4.5vw, 52px); }
.langdemo-frame {
  height: var(--ba-frame-h);
  width: calc(var(--ba-frame-h) * 16 / 9);
  max-width: 100%; margin: 0 auto;
  overflow: hidden; border-radius: clamp(8px, 1vw, 14px);
  background: var(--panel); border: 1px solid var(--line);
  position: relative;
}
.langdemo-frame video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.langdemo-tabs { margin: clamp(16px, 2.2vw, 24px) auto 0; }
/* Обёртки строк на компьютере не существуют: display: contents убирает
   сам блок, а кнопки становятся прямыми детьми полоски — ряд ровно
   такой же, как до разбиения на строки. Оживают только на телефоне
   (см. @media 620px). */
.langdemo-row { display: contents; }
.langdemo-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-size: 14px;
}
/* флаг вставляет скрипт (FLAG_SVG из flags.js) — рамка на случай
   светлого флага на светлой кнопке, иначе он растворяется */
.langdemo-flag {
  display: inline-flex; width: 21px; height: 14px; flex: none;
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .12);
}
.langdemo-flag svg { width: 100%; height: 100%; display: block; }

/* ── тарифы ───────────────────────────────────────────────────────
   Один в один с кабинетом (просьба 2026-08-09): те же классы и те же
   размеры, что в блоке «карточки планов» static/index.css. Правила
   здесь повторены, а не подключены файлом: витрина и дашборд — разные
   страницы со своими наборами токенов, и index.css гостю не отдаётся.
   Правишь карточку в одном месте — повторяй во втором, иначе гость и
   вошедший снова увидят разные тарифы.
   Отличия от кабинета два. Первое: секция стоит на общем листе
   витрины, поэтому ширину ей задаёт .wrap-plans (в кабинете это
   max-width самой сетки). Второе: весь блок МЕЛЬЧЕ примерно на пятую
   часть (просьба 2026-08-09 «сделай меньше масштаб»). В кабинете
   тарифы занимают отдельную страницу во весь экран, а здесь идут
   одним блоком среди прочих, и кабинетные 38 px имени и 41 px цены
   перекрикивали соседние секции. Пропорции и порядок при этом те же —
   уменьшен только размер. */
.wrap-plans { max-width: 1240px; }
.plan-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px; margin-top: clamp(30px, 4vw, 48px); align-items: stretch;
}
/* без рамки: карточки отделяет от фона сама заливка */
.plan-card {
  display: flex; flex-direction: column; min-width: 0;
  padding: 22px 20px 18px; border: 0;
  border-radius: 24px; background: var(--sunken);
}
/* min-height — чтобы плашка «Популярный» не делала свою шапку выше */
.plan-head {
  display: flex; align-items: center; gap: 10px;
  justify-content: space-between; margin-bottom: 15px; min-height: 24px;
}
.plan-title { display: flex; align-items: center; gap: 9px; }
.plan-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--ink); }
.plan-name {
  font-family: "Onest", system-ui, sans-serif;
  font-size: 29px; font-weight: 600; letter-spacing: -0.025em;
  color: var(--ink);
}
.plan-badge {
  font-size: 11px; font-weight: 300; padding: 5px 11px;
  border-radius: 999px; color: var(--paper); white-space: nowrap;
  border: 0; background: var(--ink); letter-spacing: 0; text-transform: none;
}
/* иконки внутри карточки рисуются штрихом, как в кабинете (.ico там
   общий, здесь его нет — задаём по месту) */
.plan-card .ico {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* список возможностей: у каждого пункта своя иконка, без плашки */
.plan-feats {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
/* иконка крупная, подпись мелкая: сначала читается ряд значков,
   а текст только уточняет — поэтому он выровнен по центру иконки */
.plan-feats li {
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 300; line-height: 1.35; color: var(--ink);
}
.chk {
  display: grid; place-items: center; width: 23px; height: 23px;
  flex-shrink: 0;
}
/* линии тоньше, чем были у галочки: у неё один штрих, а у нот, глобуса
   и микшера при 2.6 детали слипались в пятно */
.chk svg {
  width: 21px; height: 21px; fill: none; stroke: var(--ink);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.plan-feats li.only-pro { font-weight: 400; }

/* подвал карточки */
.plan-foot { margin-top: auto; padding-top: 17px; }
.plan-priceline {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px; margin-bottom: 11px;
}
/* цена — самый крупный элемент карточки, но тоже тонким начертанием:
   выделяется размером, а не весом */
.plan-price {
  font-family: "Onest", system-ui, sans-serif;
  font-size: clamp(26px, 2.3vw, 32px); font-weight: 300;
  letter-spacing: -0.045em; line-height: 1; color: var(--ink);
}
.plan-per-mo { font-size: 13px; font-weight: 300; color: var(--ink-faint); }
/* квота — своей строкой над ценой: фраза «токенов сразу» слишком
   длинная, чтобы прижимать её к правому краю строки с ценой */
.plan-per {
  flex-basis: 100%; order: -1; margin: 0 0 6px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  font-size: 14px; font-weight: 300; color: var(--ink-faint);
}
/* само число токенов — крупнее подписи, чтобы читалось первым */
.plan-per b {
  color: var(--ink); font-weight: 400; font-size: 19px;
  letter-spacing: -0.02em;
}
.plan-per .bolt { width: 15px; height: 15px; }

/* кнопка-таблетка во всю ширину. Заливка осталась только у Free
   (2026-08-17, просьба «сделай кнопки не яркими, а белыми с чёрной
   обводкой, кнопку „Попробовать бесплатно“ оставь как есть»): четыре
   тёмные таблетки подряд перекрикивали и сами карточки, и главный
   призыв страницы. Теперь заливка ровно одна — на бесплатном тарифе,
   с него и начинают. Правка ТОЛЬКО витрины: в кабинете (index.css)
   кнопки планов остались тёмными, там они не конкурируют ни с чем. */
.plan-card .btn.plan-cta {
  width: 100%; justify-content: center;
  padding: 12px 16px; border-radius: 999px;
  font-size: 14.5px; font-weight: 400;
  background: var(--btn-dark); color: var(--btn-dark-ink);
  border-color: transparent;
}
.plan-card .btn.plan-cta:hover { background: var(--btn-dark-hover); }
/* платные тарифы: лист с обводкой. Цвета токенами, поэтому в тёмной
   теме кнопка зеркалится сама — тёмный лист со светлой обводкой, а не
   белое пятно. Обводка цветом текста (var(--ink)), не бледной
   var(--line): бледная на белой карточке почти не читается, и кнопка
   переставала быть кнопкой */
.plan-card:not([data-plan="free"]) .btn.plan-cta {
  background: var(--paper); color: var(--ink);
  border-color: var(--ink);
}
.plan-card:not([data-plan="free"]) .btn.plan-cta:hover {
  background: var(--panel);
}
/* подпись под кнопкой: сколько это минут дубляжа (рисует dubMins по
   data-mins, см. drawDynamic в landing.js) */
.plan-mins {
  min-height: 19px; margin-top: 9px; text-align: center;
  font-size: 13.5px; font-weight: 300; color: var(--ink-faint);
}

/* выделенная карточка: фон как у обычных, выделяет только рамка */
.plan-card.hot { border: 2px solid var(--ink); }

/* пороги те же, что в кабинете: четыре карточки в ряд помещаются
   только на широком экране, дальше два ряда, потом столбик */
@media (max-width: 1100px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .wrap-plans { max-width: 720px; }
}
@media (max-width: 700px) {
  .plan-grid { grid-template-columns: 1fr; gap: 18px; }
  .wrap-plans { max-width: 400px; }
}
@media (max-width: 620px) {
  /* на телефоне кадр снова ведёт ШИРИНА — та же оговорка, что у .ba-grid */
  .langdemo-frame { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  /* Плашка переезжает с ряда на КАЖДУЮ строку (просьба 2026-09-05):
     пять языков на телефон одной строкой не влезают, и общий фон
     оставлял пустые углы под короткой второй строкой. Сам ряд
     остаётся точкой отсчёта для едущей подложки (position: relative
     ниже по файлу не трогаем) — она позиционируется по рамкам кнопок
     и переезжает между строками так же, как между кнопками. */
  .langdemo-tabs {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; padding: 0; width: 100%;
    background: none; border: 0; border-radius: 0;
  }
  .langdemo-row {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 2px; padding: 4px;
    width: max-content; max-width: 100%;
    background: var(--seg-bg); border: 1px solid var(--line);
    border-radius: 15px;
  }
  .fit-tab, .langdemo-tab { font-size: 13.5px; padding: 8px 13px; }
  /* значок ужимается вместе с подписью, иначе на телефоне он
     перевешивает слово и ряд занимает три строки вместо двух */
  .fit-tab { gap: 7px; }
  .fit-ico { width: 15px; height: 15px; }
}

/* ── кому движение мешает ─────────────────────────────────────────
   Выключаем всё разом. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .bars i { transform: none; }
  .split-arrow { opacity: 1; }
}

/* ── телефон: единый мелкий масштаб ──────────────────────────────
   Правка 2026-09-01, вторая попытка. В первой текст сделали мельче, а
   кнопкам подняли высоту до 48 px — получилась каша: огромная кнопка
   рядом с мелкой надписью. Здесь всё уменьшается ОДНИМ шагом — шрифт,
   отступы и кнопки в одной пропорции. Палец при этом не страдает:
   мишень держится внутренним полем (10-12 px), а не жёсткой высотой,
   и выходит те же 38-42 px. */
@media (max-width: 560px) {
  /* — шапка — */
  .top { padding: 8px 14px; }
  .top-inner { gap: 10px; }
  .brand img { width: 30px; height: 30px; border-radius: 6px; }
  /* Кнопка «Создать аккаунт» ВЕРНУЛАСЬ в строку (просьба 2026-09-04).
     Раньше она тут пряталась: логотип со словом, тема, язык, бургер и
     она — это было заведомо больше 375 px. Место освободили двумя
     ходами: имя стало мелким, а тема с языком уехали в боковое меню
     (placeTools в landing.js). Осталось: логотип, имя, бургер и
     кнопка. Кегль и поля кнопки мельче общих — иначе на 360 px
     впритык. */
  /* nowrap обязателен: ниже .btn на телефоне разрешает перенос строк
     (кнопкам на самой странице так надо), и в шапке надпись ломалась
     на две строки, раздувая её вдвое по высоте. */
  .top-actions .btn.primary.small {
    padding: 8px 12px; font-size: 13px;
    white-space: nowrap; flex-shrink: 0;
  }
  /* Имя ПОЛНОЕ, но мелкое (просьба 2026-09-05): сокращение до «WS.me»
     отменено. 13px — предел, при котором в строку ещё влезают логотип,
     имя, бургер и кнопка «Создать аккаунт» на экране в 360 px. */
  .brand .word { font-size: 14px; }
  .top-actions { gap: 6px; }
  /* Бургер слева от «Создать аккаунт» (просьба 2026-09-05). Меняем
     местами порядком во flex, а не в разметке: на компьютере строка
     должна остаться прежней — там бургера вообще нет. */
  .burger { order: -1; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn svg { width: 17px; height: 17px; }

  /* — общий масштаб страницы — */
  section { padding: 38px 14px; }
  .eyebrow { font-size: 10.5px; }
  .h2 { font-size: 21px; margin-top: 10px; }
  .lead { font-size: 14px; margin-top: 10px; }
  .hero { padding: 26px 14px var(--ba-gap-top); }
  .hero h1 { font-size: 23px; }
  .hero-card { padding: 20px 14px; border-radius: 18px; }
  .stat b { font-size: 26px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr));
               gap: 18px 14px; padding-block: 24px; }
  .cta { padding-top: 40px; }
  .cta-card { padding: 34px 18px; border-radius: 20px; }
  .cta-card h2 { font-size: 21px; }
  .foot-cta { padding: 34px 18px; margin-bottom: 34px; border-radius: 24px; }
  .foot-cta .h2 { font-size: 20px; }
  .plan-price { font-size: 22px; }
  .about-cols p { font-size: 14px; }

  /* — кнопки: мельчают вместе со всем остальным — */
  .btn { padding: 10px 16px; font-size: 14px;
         white-space: normal; text-align: center; }
  .btn.small { padding: 8px 13px; font-size: 13px; }
  .btn.big, .btn.hero-cta { padding: 12px 22px; font-size: 15px; }
  .feats-cta { margin-top: 32px; }
  .feats-cta .btn { padding: 12px 24px; font-size: 15px;
                    border-radius: 12px; }
  .fit-tab, .langdemo-tab, .badm-tab { padding: 8px 12px; font-size: 13px; }

  /* ничто не выпускаем за правый край: длинные слова рвём переносом */
  h1, h2, .h2, p, li { overflow-wrap: anywhere; }

  /* Правила ниже перебиваются не специфичностью, а порядком: сами
     .foot-cta .btn, .faq-q, .plan-name и .fit-tab описаны ДАЛЬШЕ по
     файлу, поэтому весь этот блок и стоит в самом конце. */
  .foot-cta .btn { padding: 12px 24px; font-size: 15px; }
  .faq-q { padding: 15px 2px; font-size: 15px; gap: 12px; }
  .faq-list { margin-top: 26px; }
  .plan-name { font-size: 23px; }
  .plan-card .plan-price { font-size: 22px; }
  .fit-tab, .langdemo-tab { font-size: 12.5px; padding: 7px 11px; }
}