/* ================================================================
   ПЕРВЫЙ ЭКРАН · НАТЁК - стекло, стёкшее вниз и застывшее.

   МАСШТАБ. Первая сборка задавала и осу, и панель в долях ширины
   кадра. На телефоне это работало, а на мониторе 1833 оса получала
   бокс в 2163 пикселя и заливала весь экран. Поэтому у всех размеров
   ПОТОЛОК в пикселях, а композиция на широком экране ДРУГАЯ: панель с
   текстом слева, оса справа заходит под её правую кромку.

   МАТЕРИАЛ снят с образца 25 библиотеки (glass-launch-screen):
   стопка mirror -> veil -> edge, зеркало на обычном filter, вуаль из
   двух градиентов, кромка двуслойная (тёмный контур снаружи, светлая
   линия сразу за ним) плюс мягкая фаска внутрь.

   ⚠️ ОТЛИЧИЕ ОТ ОБРАЗЦА 25, И ОНО ВЫНУЖДЕННОЕ. Там панель - скруглённый
   прямоугольник, и весь профиль кромки собран шестью inset-тенями. У
   натёка грань КРИВАЯ, а inset box-shadow рисуется по границе бокса, а
   не по контуру обрезки - светлой кромки на кривой грани он не даст
   вовсе. Поэтому тот же профиль здесь рисуется тремя обводками одного
   и того же пути (glow -> dark -> line), а разная яркость сторон, у
   образца заданная четырьмя тенями, взята вертикальным градиентом
   обводки: свет приходит сверху.
   ================================================================ */

@font-face { font-family: Manrope; src: url(fonts/manrope-400.woff2) format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: Manrope; src: url(fonts/manrope-700.woff2) format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: Manrope; src: url(fonts/manrope-800.woff2) format('woff2'); font-weight: 800; font-display: block; }

:root {
  --ink: #f2f4fb;
  --ink-2: #b7bdd1;
  --ink-3: #8189a1;
  --accent-lift: #4d7dff;      /* базовый синий системы, поднятый под тёмный фон */
  --accent-core: #1b3bf0;      /* базовый синий системы, он же в образце 25 */
  --accent-edge: #1e42f7;      /* торцы кнопки светлее середины */
  --bg: #07080f;

  /* ручки материала (образец 25, пересчитаны от ширины ПАНЕЛИ) */
  --blur-k: 0.020;             /* радиус размытия зеркала (зажат в px в spill.js) */
  --pad-k: 0.075;              /* запас копии за кромкой, обязан быть больше размытия */
  --glass-sat: 1.10;
  --glass-bright: 0.99;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: Manrope, system-ui, sans-serif; }
body { -webkit-font-smoothing: antialiased; }

.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- сцена ----------
   Сцена остаётся DOM: оса - обычный <img>, и это условие задачи, а не
   удобство. Стекло снимает сцену КЛОНОМ УЗЛА (glass.js), поэтому
   пыльца живёт отдельной канвой: cloneNode не копирует пиксели канвы,
   и её содержимое переносится в клон одним drawImage за кадр.

   isolation обязателен: без него потомки со своим z-index спорят со
   слоем стекла напрямую и рисуются ПОВЕРХ панели, а снаружи это
   читается как «стекло не мутит». */
.scene { position: absolute; inset: 0; isolation: isolate; overflow: hidden; }
.scene__dust { position: absolute; inset: 0; opacity: .55; }
/* канва - замещаемый элемент: inset ноль её НЕ растягивает, размеры явные */
.scene__pollen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
/* ⚠️ HEIGHT:AUTO ОБЯЗАТЕЛЕН И ЭТО НЕ ПОДСТРАХОВКА. У картинки есть
   атрибуты width/height (без них Chrome не грузит отложенную картинку
   с нулевым боксом), а они в браузере работают не только соотношением
   сторон, но и ПРЕЗЕНТАЦИОННОЙ ПОДСКАЗКОЙ свойств width и height.
   Раскладка задаёт осе inline-стилем одну ширину, высоты в CSS не было -
   и подсказка height=853 применилась буквально: коробка 401x853 вместо
   401x267, оса растянута втрое, маячок сердца уехал на долю 0.15 вместо
   0.48. Соотношение сторон из атрибутов работает только когда высота
   auto - тогда её считает оно. */
.scene__wasp { position: absolute; display: block; pointer-events: none;
               height: auto; }
/* ---------- маячок сердца ----------
   Вспышка идёт ОТ ТЕКУЩЕГО УРОВНЯ ВВЕРХ и возвращается к нему: маячок
   лежит поверх осы и в тишине имеет нулевую прозрачность, поэтому в
   покое сердце выглядит ровно так, как выглядело всегда, а на пике
   добавляет своего света. Ничего не гасит и не перекрашивает.
   ⚠️ Прозрачность в CSS - НОЛЬ, и это не про покой, а про клон: стекло
   снимает сцену cloneNode ОДИН раз, инлайновая яркость в копию не
   попадает, и без нуля в копии навсегда застыло бы пятно на полной силе.
   ⚠️ Точка отсчёта преобразования - центр: маячок садится по своему
   центру в ядро сердца, и лёгкое раздувание на пике обязано расходиться
   от него в обе стороны, иначе вспышка ползёт вбок.
   ⚠️ Режима смешения тут нет намеренно. Сцена изолирована (isolation на
   .scene), внутри неё фон прозрачный, и screen на прозрачном даёт тот же
   результат, что обычная отрисовка, - но в WebKit добавляет элементу
   собственный композитный слой и лишний повод для расхождения движков.
   Страница почти чёрная, белое пятно и без смешения читается светом. */
.scene__heart {
  position: absolute; display: block; pointer-events: none;
  opacity: 0; transform-origin: 50% 50%;
  will-change: opacity, transform;
  /* ⚠️ ПЛАТО БЕЛОГО УБРАНО НАМЕРЕННО. Первая версия держала почти
     непрозрачный белый до 13 % радиуса, и на пике вспышка читалась
     лампой: ровный диск гасил проволочную структуру грудки, а вместе с
     ней и то, что светится именно сердце. Свет обязан ПРОСВЕЧИВАТЬ
     фигуру, а не закрывать её, поэтому плотность падает с первых
     процентов, а объём даёт длинный ореол. */
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.98)  0%,
    rgba(255,255,255,.74)  6%,
    rgba(236,246,255,.42) 14%,
    rgba(198,224,255,.20) 27%,
    rgba(150,192,255,.08) 48%,
    rgba(120,170,255,.02) 72%,
    rgba(120,170,255,0)  100%);
}

/* ---------- стекло ----------
   Материал перенесён из сборки 506dccc (glass-canvas.js + её spill.css) -
   Арсен показал её скриншотом и попросил повторить точь-в-точь.
   Стопка: подложка -> зеркало -> ЛИНЗА -> вуаль -> кромка. */
.gc { position: absolute; z-index: 2; pointer-events: none; }
/* ⚠️ подложка обязательна: сцена рисует пыль и пыльцу на прозрачном
   фоне, значит и копия прозрачна между ними, и сквозь эти дырки виден
   РЕЗКИЙ оригинал - замер тогда честно показывает падение около
   единицы при большом радиусе размытия */
.gc__base { position: absolute; inset: 0; background: var(--bg); }
/* зеркало - сильно размытая копия сцены; линза - почти резкая копия,
   открытая маской-кольцом только у кромки. Именно она даёт ощущение
   толщи и яркий рант, за который Арсен и держится. */
.gc__mirror, .gc__lens { position: absolute; overflow: hidden; }
.gc__veil { position: absolute; inset: 0; }
/* вуаль синеватая и плотнеет КНИЗУ - отсюда «снизу толще, сверху тоньше» */
.gc__veil { background: linear-gradient(180deg, rgba(150,180,255,.050), rgba(120,150,255,.105)); }
.gc__edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gc__edge path { fill: none; }
/* грань: тонкая яркая линия по самому краю */
.gc__edge path { stroke: rgba(226,236,255,.62); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
/* ⚠️ Свечение кромки - РОВНО 1 px, и это не описка. В исходной сборке
   ширина ставилась строкой `Math.max(6, edgeW * 0.55)`, которая стояла
   ВЫШЕ объявления `var edgeW`: из-за подъёма переменной там выходил
   NaN, атрибут становился невалидным и браузер брал свой дефолт - 1.
   То есть широкий световод не рисовался НИ РАЗУ, и одобрен был именно
   этот тонкий вид. Переносим отрисованное, а не задуманное. */
.gc__edge path.gc__glow { stroke: rgba(150,185,255,.20); stroke-width: 1; vector-effect: none; filter: blur(3px); }

/* ---------- слой поверх стекла ---------- */
.over { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.over a, .over button { pointer-events: auto; }

.bar {
  position: absolute; left: 0; right: 0; top: 0; height: 58px;
  display: flex; align-items: center; gap: 10px; padding: 0 18px;
}
.bar__logo { font-size: 17px; font-weight: 800; letter-spacing: .04em; color: var(--ink); text-decoration: none; }
.bar__logo i { color: var(--accent-lift); font-style: normal; }
.bar__sp { flex: 1; }
.bar__nav { display: none; gap: 22px; }
.bar__nav a { font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
/* КНОПКА ШАПКИ. ⚠️ Синяя точка из удалённого бейджа сюда переезжала и
   в тот же день УБРАНА - «не вписывается» (Арсен, 22.08.2026). Поля
   вернулись к прежним 13 px, ширина кнопки та же, что и была: от неё
   зависит зазор от крыла осы, а он утверждён отдельно. */
.bar__cta {
  font-size: 12px; font-weight: 700; color: var(--ink); text-decoration: none;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(77,125,255,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
/* БУРГЕР - «штрихи» (выбор Арсена 22.08.2026 из четырёх проб черновика).
   Контейнера нет намеренно: стеклянные здесь сами линии - у каждой
   светлый верх, синеватый низ и свечение вокруг, как у кромки панели.
   Разная длина штрихов уводит их от чертёжного значка меню. */
.bar__burger { width: 24px; display: grid; gap: 6px; justify-items: end;
  background: none; border: 0; padding: 0; }
.bar__burger span {
  height: 3px; border-radius: 3px;
  background: linear-gradient(180deg, rgba(226,236,255,.74), rgba(140,170,255,.30));
  box-shadow: 0 0 7px rgba(150,185,255,.45), inset 0 0.8px 0 rgba(255,255,255,.75);
}
.bar__burger span:first-child { width: 24px; }
.bar__burger span:last-child { width: 15px; }

/* ---------- текст ----------
   Положение и ширину ставит JS: текст живёт внутри формы натёка, а она
   меняет и место, и пропорции между телефоном и монитором. */
.tx { position: absolute; }

/* ЗАГОЛОВОК. Верхнего отступа нет: с уходом бейджа он стал первым в
   блоке и встал на его место.

   ⚠️ КЕГЕЛЬ ЗАДАЁТ НЕ ВКУС, А ДЛИНА СТРОКИ «который продаёт.» - Арсен
   22.08.2026: она обязана держаться ОДНОЙ строкой, одиноким может
   остаться только слово «Сайт». Строка занимает 8.70 px на каждый
   пиксель кегля, а колонка внутри натёка на высоте заголовка узкая:
   на кадрах 360 и 390 она упирается в пол 240 px (это ровно ширина
   пары кнопок под текстом), и потолок выходит 27.5 px. Отсюда вилка:
   нижняя граница 27 держит 360 и 390, доля 6.9 vw поднимает 430 до
   29.7, потолок 30 - предел кадра 430x750.

   ⚠️ Второй потолок - ОСА: когда текст перестаёт помещаться, раскладка
   последним рычагом убавляет её саму, а она эталон. Порог 30 px на
   360x620 и 34 px на 390x660 (прибор Рабочее Эльзы/try-h1b.mjs, он же
   печатает, на сколько строк разъехался каждый кусок заголовка). */
.tx__h1 { margin: 0; font-size: 27px; line-height: 1.10; font-weight: 800; letter-spacing: -.018em; }
.tx__h1 span { display: block; }
.tx__h1 em { font-style: italic; color: var(--accent-lift); }

.tx__lead { margin: 13px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.tx__acts { margin: 20px 0 0; display: flex; gap: 9px; }
.tx__btn {
  position: relative; overflow: hidden;
  font-size: 12.5px; font-weight: 700; height: 42px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 16px; white-space: nowrap; text-decoration: none;
}
.tx__btn span { position: relative; z-index: 1; }

/* СИНЯЯ КНОПКА - образец 25.
   Свечение живёт ВНУТРИ: торцы светлее середины, снаружи ореола нет
   вовсе. Тени, обводки и наружного свечения у неё нет намеренно. */
.tx__btn--a {
  color: #fff;
  background: linear-gradient(90deg, var(--accent-edge) 0%, var(--accent-core) 24%,
                                     var(--accent-core) 76%, var(--accent-edge) 100%);
}
/* ⚠️ Тёмное пятно раскладывается в ПРОИЗВЕДЕНИЕ горизонтального и
   вертикального профилей - так ведёт себя размытый прямоугольник, а не
   радиальный градиент. Горизонталь даёт фон слоя, вертикаль - маска,
   которая умножает его альфу. */
.tx__btn--a::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(5,11,7,0.033) 0%, rgba(5,11,7,0.133) 7.7%, rgba(5,11,7,0.273) 14.7%,
    rgba(5,11,7,0.673) 21.7%, rgba(5,11,7,0.900) 28.5%, rgba(5,11,7,0.993) 42.5%,
    rgba(5,11,7,1) 50%, rgba(5,11,7,0.993) 57.5%, rgba(5,11,7,0.900) 71.5%,
    rgba(5,11,7,0.673) 78.3%, rgba(5,11,7,0.273) 85.3%, rgba(5,11,7,0.133) 92.3%,
    rgba(5,11,7,0.033) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.41) 0%,
    rgba(0,0,0,0.61) 11.5%, rgba(0,0,0,0.72) 18%, rgba(0,0,0,0.81) 25%,
    rgba(0,0,0,0.90) 50%, rgba(0,0,0,0.81) 75%, rgba(0,0,0,0.72) 82%,
    rgba(0,0,0,0.61) 88.5%, rgba(0,0,0,0.41) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.41) 0%,
    rgba(0,0,0,0.61) 11.5%, rgba(0,0,0,0.72) 18%, rgba(0,0,0,0.81) 25%,
    rgba(0,0,0,0.90) 50%, rgba(0,0,0,0.81) 75%, rgba(0,0,0,0.72) 82%,
    rgba(0,0,0,0.61) 88.5%, rgba(0,0,0,0.41) 100%);
}
/* у образца состояний нет - он статичный эталон; живой кнопке hover
   нужен, но сдержанный: материал не меняем, только поднимаем яркость */
.tx__btn--a:hover { filter: brightness(1.10); }

/* ВТОРАЯ КНОПКА - стекло НАД СТЕКЛОМ.
   Материал образца 25 (копия -> вуаль -> двуслойная кромка на обычном
   filter), форма капсулы и профиль фаски - образца 1.
   ⚠️ Под кнопкой лежит не сцена, а уже обработанная панель: замер до
   первой правки дал локальную дисперсию 0.19 при размахе 1-2 из 255.
   Растворять нечего, поэтому толщу держат ВУАЛЬ, ФАСКА и КРОМКА, а не
   размытие - его радиус здесь ничего не меняет. Разбор в spill.js. */
/* ⚠️ МАТЕРИАЛ «ТОЛЩА» - выбор Арсена 22.08.2026 из трёх проб черновика,
   и главное его условие: ОБВОДОК НЕТ ВОВСЕ. Ни светлых линий по кромке
   (верх, низ, бока), ни тёмного контура по периметру. Технически это
   значит, что в box-shadow не осталось ни одной тени с нулевым
   размытием - именно такая и рисует линию.

   Кнопка читается литым куском стекла, ЛЕЖАЩИМ на панели: вуаль даёт
   толщу, широкая размытая фаска - свод, отдельный слой .bsh под ней -
   тень на панель.

   ⚠️ Плотность подобрана ЗАМЕРОМ, а не на глаз. Первая версия давала
   контраст к панели 17.6, а версия без обводок - 20.9 при 13.6 у
   главной: вторая кнопка становилась ЯРЧЕ первой и ломала иерархию
   пары. Итог - 12.3 против 13.6: сильная, но остающаяся второй.
   Прибор - Рабочее Эльзы/btn-measure.mjs. */
.tx__btn--b { color: #eaf0ff; }
.tx__btn--b > .bg__l { position: absolute; display: block; pointer-events: none; }
/* ВУАЛЬ - толща стекла: светлее у свода, плотнее к низу, оба конца
   тёплого синего семейства панели */
.tx__btn--b > .bb__veil {
  inset: 0;
  background:
    linear-gradient(180deg, rgba(226,238,255,.075) 0%, rgba(160,190,255,.028) 32%,
                            rgba(120,150,255,.038) 68%, rgba(140,172,255,.070) 100%);
}
/* ФАСКА без единой линии: широкий свет по своду сверху и отражённый
   подсвет снизу, оба размытые. ⚠️ box-shadow здесь законен - у капсулы
   граница совпадает с боксом; у панели грань КРИВАЯ, и там тот же
   профиль пришлось рисовать обводками пути. */
.tx__btn--b > .bb__edge {
  inset: 0;
  box-shadow:
    inset 0 9px 13px -9px rgba(233,241,255,.30),
    inset 0 -10px 14px -10px rgba(170,200,255,.24),
    inset 0 0 16px rgba(150,185,255,.07);
  transition: box-shadow .22s cubic-bezier(.22,1,.36,1);
}
.tx__btn--b > .bb__veil { transition: background .22s cubic-bezier(.22,1,.36,1); }
/* ТЕНЬ НА ПАНЕЛЬ - отдельным слоем ПОД кнопкой.
   ⚠️ Самой кнопке наружную тень дать нельзя: на ней стоит обрезка
   clip-path (без неё на iOS из-под скругления торчат прямые уголки), и
   всё, что выходит за контур, срезается. Геометрию слоя ставит JS. */
.bsh {
  position: absolute;
  pointer-events: none;
  box-shadow: 0 10px 20px -8px rgba(2,4,10,.78), 0 3px 7px rgba(2,4,10,.48);
}

/* СОСТОЯНИЯ. Кнопку при нажатии НЕ масштабируем: слой-копия
   отмасштабировался бы вместе с ней, и подложка под стеклом «вспухла»
   бы - именно это на телефоне читается дефектом. Нажатие показывают
   вдавливание тенью и плотность вуали. */
.tx__btn--b:hover > .bb__veil {
  background:
    linear-gradient(180deg, rgba(226,238,255,.105) 0%, rgba(160,190,255,.040) 32%,
                            rgba(120,150,255,.052) 68%, rgba(140,172,255,.095) 100%);
}
/* нажатие НЕ масштабирует кнопку: слой-копия уехал бы вместе с ней, и
   подложка под стеклом «вспухла» бы - на телефоне это читается дефектом.
   Кнопка просто уходит вниз, к своей тени */
.tx__btn--b:active { transform: translateY(2px); }
/* ⚠️ Фокусного кольца здесь НЕТ намеренно, и это не забывчивость:
   обрезка clip-path на самой кнопке срезала бы outline, то есть кольцо
   не нарисовалось бы вовсе. Показывать фокус пришлось бы собственной
   геометрией (как у панели), но у главной кнопки его тоже нет - делать
   его только у второй значило бы развести пару. Вынесено в отчёт. */

/* ---------- пробы второй кнопки ----------
   Материал не считается работающим, пока не подтверждён числом, а число
   берётся сравнением кадра С эффектом и БЕЗ него. Классы ставит
   __labBtnProbe (spill.js), значение им придаёт этот блок.
     none - материала нет вовсе: видно, что под кнопкой лежит на самом деле
     flat - остаётся ТОЛЬКО слой-копия, все собственные приёмы кнопки сняты.
            Копия воспроизводит панель, значит кнопка обязана СЛИТЬСЯ с ней;
            расхождение flat против none и есть мера совмещения. Размытие
            копии тут не снимается намеренно - оно не приём кнопки, а
            воспроизведение подложки.
   Надписи гасятся отдельно: кромки букв дают на порядок больше дисперсии,
   чем фактура, и замер иначе меряет буквы. */
.btn-nolabel .tx__btn span { visibility: hidden; }
.btn-probe-none .tx__btn--b { box-shadow: none; }
.btn-probe-none .tx__btn--b > .bg__l { display: none; }
.btn-probe-flat .tx__btn--b { box-shadow: none; }
.btn-probe-flat .tx__btn--b > .bb__veil,
.btn-probe-flat .tx__btn--b > .bb__edge { display: none; }


/* ---------- широкий экран ----------
   Ставится ПОСЛЕ мобильного: при равной специфичности побеждает
   последнее правило в файле, а медиазапрос специфичность не поднимает. */
@media (min-width: 900px) {
  .bar { height: 76px; padding: 0 44px; gap: 28px; }
  .bar__nav { display: flex; }
  .bar__burger { display: none; }
  .bar__cta { font-size: 13px; padding: 10px 18px; }

  /* ⚠️ 39 px - ПОТОЛОК ФОРМЫ на этой ступени, а не осторожность: на кадре
     900x700 колонка 380 px, а строка «А не просто красив.» занимает 9.64
     px на пиксель кегля, то есть при 40 уже 386 и ломается надвое. Это
     на 1 px ниже прежних 40 - плата за то, чтобы ни одна строка
     заголовка не разъезжалась ни на одном кадре. */
  .tx__h1 { font-size: 39px; line-height: 1.06; margin-top: 0; }
  .tx__lead { font-size: 14.5px; margin-top: 16px; }
  .tx__acts { margin-top: 20px; gap: 12px; }
  .tx__btn { font-size: 14px; height: 50px; padding: 0 22px; }
}

/* ⚠️ Ступени заголовка идут не круглыми числами, а по ЗАМЕРЕННОМУ
   потолку: панель натёка расширяется с шириной кадра, вместе с ней
   растёт колонка, и кегль поднимается ровно настолько, насколько обе
   длинные строки ещё держатся одной строкой каждая. 1400 держит только
   41, 1440 держит 48, а 54 становится возможным с 1700. */
@media (min-width: 1440px) {
  .tx__h1 { font-size: 48px; }
}

@media (min-width: 1500px) {
  .tx__lead { font-size: 15.5px; }
}

@media (min-width: 1700px) {
  .tx__h1 { font-size: 54px; }
}

/* ---------- ЛИД КРУПНЕЕ, КНОПКИ НИЖЕ ----------
   Правка Арсена 22.08.2026: «доп описание сделай крупнее, чтобы читалось
   легче; кнопки сдвинь чуть ниже, но не впритык к панели».
   Лид 12.5 -> 14 px, отступ кнопок 16 -> 20, а на высоком кадре 30.

   ⚠️ РЕШАЕТ РАСКЛАДКА, А НЕ МЕДИАЗАПРОС - и это исправление двух моих
   ошибок подряд. Прибавка не бесплатна: высота текста через резерв
   задаёт панель, панель задаёт осу, и на низком кадре панель уже стоит
   на пределе, где прибавка немедленно УЖИМАЕТ ОСУ.
   Сначала я закрыла это порогом по ВЫСОТЕ (от 680 px) - и отсекла ровно
   тот кадр, с которого Арсен смотрит: у него Safari съедает низ, высота
   около 640. Его ответ: «никакого увеличения текста я не вижу».
   Потом порогом по ШИРИНЕ - и получила кошки-мышки: 390x635 держит, а
   402x635 уже нет, потому что оса растёт с шириной кадра, и граница
   гуляет по обеим осям сразу.
   Поэтому порога нет вовсе: `layout()` считает раскладку с крупным
   текстом, СМОТРИТ, не ужалась ли оса, и только тогда переключается на
   компактный вариант. Гарантия по построению, а не по таблице кадров.

   ⚠️ Компактный класс должен ПЕРЕБИВАТЬ медиазапросы, поэтому у него два
   класса в селекторе, а не один: у правил в медиазапросах вес ниже. */
.tx--compact .tx__lead { font-size: 12.5px; line-height: 1.52; }
.tx--compact .tx__acts { margin-top: 16px; }

/* высокий кадр - места хватает, кнопки уходят ниже */
@media (min-height: 700px) {
  .tx__acts { margin-top: 30px; }
}

@media (min-width: 900px) {
  .tx__lead { font-size: 16px; }
  .tx__acts { margin-top: 36px; }
}

@media (min-width: 1500px) {
  .tx__lead { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero * { animation: none !important; transition: none !important; }
}