/*
 * Секции главной языка обучения (шаблон page-polskij).
 * Также подключается на money-page легализации (page-dlya-legalizacii),
 * которая переиспользует эти секции (расписание, лестница, карусель, тарифы).
 * Грузится после base.css.
 *
 * @package easy-peasy
 */
/* ─── Money-hero H1 + баланс сетки (хаб языка + легализация) ─────────────────
 * Базовый примитив .hero h1 (base.css) рассчитан на КОРОТКИЙ оффер: потолок
 * clamp 4.25rem. После разведения интентов H1 стал зонтичным и длинным (PL ~90,
 * DE ~110 симв.). Даже на прежнем потолке 3rem/24ch (=48px, мера 576px) 90-символьный
 * H1 при крупном кегле рвётся «лестницей» в 7–8 коротких строк, доминирует над всем
 * первым экраном, уходит за сгиб и делает копи-колонку намного выше лид-карты справа —
 * из-за чего карта «повисает» с пустотой снизу (тот самый «провал»). Калибруем ТОЛЬКО
 * money-hero (home.css грузится лишь на page-polskij + page-dlya-legalizacii; курсовой
 * .hero--sc, root- и program-hero, schedule-hero не затронуты — там свои ассеты):
 *  · спокойнее потолок кегля (2.15rem ≈ 34px) — заголовок сильный, но не давит;
 *  · мера в em (стабильна на всех ширинах) — цель 3–4 строки;
 *  · text-wrap:balance — ровные строки, без слов-сирот. */
.hero-grid .hero-copy h1{font-size:clamp(1.5rem, 0.9rem + 2vw, 2.15rem);line-height:1.14;max-width:18em;text-wrap:balance}
@media(min-width:1024px){.hero-grid .hero-copy h1{max-width:21em}}

/* ─── КОРОТКИЙ H1: СВОЯ ТИПОГРАФИЧЕСКАЯ ЛЕСТНИЦА (16.08.2026) ────────────────
 * Флаг .is-short ставит patterns/home-hero.php по длине заголовка (≤45 знаков
 * при пустом суффиксе) — разбор там же. Сейчас под него попадает только
 * английский хаб: «Курсы английского языка» / «Курси англійської мови».
 *
 * ЗАЧЕМ. Калибровка выше рассчитана на зонтичный H1 в 90–110 знаков, и на
 * 23-знаковом она даёт 17,6px на 360px и 34,4px на 1440px. На телефоне это
 * мельче заголовка лид-формы (16px) и почти вровень с ценовой строкой (14px):
 * самый крупный объект первого экрана — кнопка отправки, то есть иерархия
 * перевёрнута (правило visual-hierarchy: ранг задаётся размером, интервалом
 * и контрастом). На десктопе тот же кегль оставляет левую колонку на 230px
 * короче лид-карты — воздух под ней читается провалом, а не паузой.
 *
 * ДВУХСТРОЧНАЯ СВЯЗКА, А НЕ СВОБОДНЫЙ ПЕРЕНОС. .grad переводится в блок:
 * строка 1 — «Курсы» цветом текста, строка 2 — «английского языка» градиентом.
 * Так перелом стоит там, где его поставил бы наборщик, — по границе смысловых
 * частей и по границе окраски. Свободный перенос ломает иначе: при balance на
 * 1024–1280 получалось «Курсы» / «английского языка» (тот же результат, но
 * случайно), а на 360px жадный перенос давал «Курсы английского» / «языка» —
 * градиент разрывался посреди фразы, и клип фона считался для каждой строки
 * отдельно, из-за чего вторая строка начиналась не тем оттенком, каким
 * кончилась первая. text-wrap:wrap обязателен: balance, унаследованный сверху,
 * при жёстком блочном переломе уже ничего не выравнивает, но продолжает мешать.
 *
 * КАК СЧИТАН КЕГЛЬ. Ограничитель — длинная строка связки, «английского языка»:
 * в Unbounded это 12,33px ширины на каждый пиксель кегля (замер canvas +
 * letter-spacing -.02em). Отсюда потолки: 360px → 25,4px кегля, 1024px (колонка
 * 446px) → 36,2px, 1440px (колонка 648px) → 52,6px. Значения ниже взяты с
 * запасом 12–15% к этим потолкам — на случай другого фолбэк-шрифта и локали с
 * более длинным словом. Украинский короче русского (10,89px/px), он не биндит.
 *
 * ТРИ ДИАПАЗОНА, А НЕ ОДИН CLAMP: ширина строки скачет вместе с раскладкой —
 * на ≥1000px колонка вдвое уже вьюпорта, и сквозной clamp по vw либо мельчил бы
 * телефон, либо переполнял колонку. Границы совпадают с уже существующими
 * порогами файла (600 — уплотнение фолда, 1000 — две колонки), новых точек
 * перелома не заводим. Стыки диапазонов сведены: на 599px и 600px кегль один
 * и тот же (31,2px), скачка при повороте планшета нет. */
.hero-grid:has(> .hero-aside) .hero-copy h1.is-short{line-height:1.08;max-width:none;text-wrap:wrap;font-size:clamp(1.45rem, 6.2vw, 1.95rem)}
.hero-grid:has(> .hero-aside) .hero-copy h1.is-short .grad{display:block}
@media(min-width:600px){
  .hero-grid:has(> .hero-aside) .hero-copy h1.is-short{font-size:clamp(1.95rem, 4.6vw, 2.9rem)}
}
@media(min-width:1000px){
  .hero-grid:has(> .hero-aside) .hero-copy h1.is-short{font-size:clamp(2rem, 3.1vw, 3rem);letter-spacing:-.025em}
}
/* Порог двух колонок money-hero опущен 1200 -> 1000 (13.08.2026). Прежний гейт
 * оставлял 1024–1199 одноколоночным «мёртвым» диапазоном: экран уже широкий,
 * а лид-форма растянута во всю ширину и кнопка отправки уходит под сгиб. Точка
 * перелома найдена замером, а не назначена: при 960px колонка формы 416px и
 * строка «код страны + номер» держит 338px — теснее, чем на 480px телефоне,
 * но ещё рабоче; запас до первой поломки берём один шаг сетки, отсюда 1000.
 * Прежний довод «копи-колонка слишком узка для H1» снят укороченным H1
 * (три цели вместо пяти) — на 1000px он укладывается в 4 строки. */

/* ─── ЕДИНАЯ ГЕОМЕТРИЯ ЛИД-ФОРМЫ 50/50: hero + финальный CTA ─────────────────
 * На каждой из страниц, что грузят этот файл (корневая витрина, хаб языка,
 * легализация), лид-форма встречается ДВАЖДЫ — в hero и в финальном CTA — и это
 * ОДИН компонент .lead-card: те же паддинги, поля, радиусы, типографика. Значит и
 * ширина у него обязана быть одна: пользователь скроллит мимо той же карточки, и
 * «переезд» её границ читается как сбой вёрстки, а не как замысел.
 * Каноном берём базовый .final-grid (base.css) — «1fr 1fr»: форма получает
 * ПОЛОВИНУ контейнера (~648px на 1440), а не треть (было clamp(360px,33%,460px)
 * = 443.8px в hero против 648px внизу — расхождение в 1.46×).
 * Почему половина безопасна для длинного зонтичного H1: копи-колонка сжимается с
 * 852px до 648px, но H1 здесь калиброван (потолок 2.15rem ≈ 34px, text-wrap:balance)
 * и держится в 3–5 ровных строк; мера в 21em (=720px) при этом просто перестаёт
 * биндить — ограничителем становится сама колонка. Лид/промис/спич (44rem ≈ 704px)
 * аналогично: их мера на 648px — комфортные ~70 знаков в строке, ровно в целевом
 * коридоре 65–75 для десктопа (правило line-length-control), то есть читаемость от
 * сужения не падает, а РАСТЁТ (на 852px строка была ~92 знака — выше нормы).
 * Общие примитивы base.css (.hero-grid, .final-grid) НЕ трогаем — их делят десятки
 * посадочных (курсы, программа, пробный, тест уровня, промо и т.д.). Правим здесь:
 * home.css грузится ровно на трёх шаблонах (page-main-page, page-language,
 * page-dlya-legalizacii — см. eps_template_assets_map()), и на всех трёх hero
 * устроен одинаково. page-schedule тоже тянет home.css, но ради компонента .sched*:
 * его hero — .hero--page без .hero-grid, поэтому под правило не попадает.
 * Единый порог 1200px и единый gap у ОБЕИХ сеток обязательны, иначе карты разъедутся:
 *  · без гейта финала на 1200 — на 980–1199 final уже 2 колонки, а hero ещё одна;
 *  · без выравнивания gap — на доли пикселя (hero clamp(36,3.4vw,52) vs базовый
 *    final clamp(28,4vw,48)).
 * Ниже 1200 — одна колонка: H1 во всю ширину (широкая мера → 3–4 ровные строки),
 * форма следом, во всю ширину (mobile-first, без горизонтального скролла). Порог
 * именно 1200, а не 1024: при 2 колонках с 1024 копи сжималась бы до ~500px и H1 при
 * почти-потолочном кегле рвался на 6 строк.
 * align-items:start прижимает карту к верху рядом с оффером — «провал» справа
 * (карта короче копи и повисает с пустотой снизу) устранён.
 * Курсовой .hero--sc, program-hero и schedule-hero живут в своих файлах и не затронуты. */
#lead-final .final-grid{grid-template-columns:1fr}
/* Порог 1000 — у hero с разрезанной копи (гейт :has(> .hero-aside)). С
 * 15.08.2026 таких hero ДВА: хаб языка (home-hero.php) и корневая витрина
 * (root-hero.php) — витрину привели к общему с хабом виду, и она перешла из
 * нижней ветки в верхнюю вместе со всеми правилами фолда. Без разреза остались
 * легализация (leg-hero.php) и расписание: их первый экран не перестраивался,
 * трогать его незачем, и они держат прежние 1200. Ниже — их пара правил,
 * слово в слово, как было. */
@media(min-width:1000px){
  .hero .hero-grid:has(> .hero-aside){grid-template-columns:1fr 1fr;gap:clamp(36px,3.4vw,52px);align-items:start}
}
@media(min-width:1200px){
  .hero .hero-grid:not(:has(> .hero-aside)){grid-template-columns:1fr 1fr;gap:clamp(36px,3.4vw,52px);align-items:start}
}
@media(min-width:1024px) and (max-width:1199.98px){
  .hero .hero-grid:not(:has(> .hero-aside)){grid-template-columns:1fr}
}
/* Финальный CTA остаётся на 1200: его колонка несёт длинный H2 секции, а не
 * короткий оффер, и на 1000px разъезжается. Единая геометрия формы, ради
 * которой оба блока держали один порог, сохраняется — обе формы по-прежнему
 * занимают половину своей сетки, просто перелом у них теперь разный. */
@media(min-width:1200px){
  #lead-final .final-grid{grid-template-columns:1fr 1fr;gap:clamp(36px,3.4vw,52px);align-items:start}
}
/* Мера H2 финального CTA. Базовый .sec-title несёт hyphens:auto (нужен длинным
 * заголовкам секций на мобильных), а в паттернах на H2 висел инлайн max-width
 * (18–20ch = 324–360px при 36px кегля) — вдвое уже своей колонки. На такой мере
 * украинские композиты не помещались в строку и рвались переносами: «безко-штовний
 * про-бний урок». Меру вынесли из инлайнов сюда (инлайн перебивал бы любой CSS) и
 * дали заголовку нормальный размах: 15em ≈ 540px — внутри колонки (648px на 1440),
 * 2–3 ровные строки. hyphens:manual запрещает авто-перенос внутри слова (как у
 * .hero h1), text-wrap:balance выравнивает строки без слов-сирот. */
#lead-final .final-copy .sec-title{max-width:15em;hyphens:manual;text-wrap:balance}

/* Лид и info-чип money-hero заполняют ширину копи-колонки по правый край H1.
 * Базовые примитивы base.css узкие для этого зонтичного hero: .hero-lede=52ch (~520px),
 * .hero-speech=48ch (~442px) — заметно левее правого края H1 (21em ≈ 720px), из-за чего
 * справа зиял провал. Тянем оба к краю заголовка (44rem ≈ 704px — чуть внутри H1, без
 * выступа), сохраняя комфортную меру на 1440/1536 (строка не длиннее H1, ~36em лида).
 * Ниже 1200 копи-колонка одна: max-width лишь капнёт на широких, на моб/планшете
 * лид и чип и так на всю ширину. Сюда же info-чип .hero-promise (CEFR-обещание,
 * base=46ch ≈ 340px) — узкая коробочка справа от полноширинного лида давала тот самый
 * провал; тянем её к общему правому краю (44rem). Только money-hero — base-примитивы
 * прочих hero целы. */
/* Лид и спич-строка переехали из .hero-copy в .hero-aside — на хабе 13.08.2026,
 * на корневой витрине 15.08.2026, — но мера у них та же: это по-прежнему правый
 * край копи-колонки, а не свойство конкретного блока. Поэтому селекторы
 * перечисляют ОБА места: легализация (leg-hero.php) разреза не имеет и держит
 * лид со спичем в .hero-copy, и её ширины меняться не должны. */
.hero-grid .hero-copy .hero-lede,
.hero-grid .hero-aside .hero-lede{max-width:44rem}
.hero-grid .hero-copy .hero-promise{max-width:44rem}
.hero-grid .hero-copy .hero-speech,
.hero-grid .hero-aside .hero-speech{max-width:44rem}

/* ─── ПОРЯДОК БЛОКОВ HERO ХАБА: форма сразу под H1 на узких ширинах ──────────
 * Задача из ads-structure §6.3.3. Хаб — приёмник платного трафика всех трёх
 * кампаний, 72–91% его посетителей мобильные, а медианная вовлечённость 7 секунд:
 * страницу не читают, до формы не доходят. Причина не в «слабом оффере», а в
 * порядке: одна колонка ниже 1200px выкладывала пилюли → H1 → лид → промис →
 * два CTA → четыре буллета → и только потом форму.
 *
 * Решение — разрез копи на .hero-copy (до формы) и .hero-aside (после) в САМОЙ
 * разметке (patterns/home-hero.php). Поэтому мобильный порядок не требует ни
 * одного правила: он и есть порядок DOM. Здесь только обратная сборка на
 * десктопе — grid-областями, чтобы левая колонка снова читалась как единый оффер.
 *
 * Почему области, а не order/display:contents: и то и другое разводит визуальный
 * порядок с порядком чтения и таб-фокуса (WCAG §1.3.2, §2.4.3). Области же
 * оставляют обе части в одной колонке и в том же порядке, что в DOM.
 *
 * Гейт `:has(> .hero-aside)` обязателен: home.css грузится ещё и на легализации
 * (leg-hero.php) и расписании — там hero устроен по-старому, и правила ниже их
 * не должны касаться. Корневая витрина (root-hero.php) в этом списке БЫЛА и
 * с 15.08.2026 из него ушла: её копи разрезана точно так же, узел .hero-aside
 * у неё есть, и под гейт она попадает намеренно. Из-за отсутствия этого узла
 * вся серия правок первого экрана 13–14.08 прошла мимо витрины: кнопка отправки
 * стояла у неё на y=1792 при окне 597 (замер 336×597, ru), то есть почти на
 * третьем экране. После разреза — 543, выше сгиба.
 *
 * Четвёртая строка `1fr` — не декорация: .hero-lead спанит все строки левой
 * колонки, и без «поглотителя» лишняя высота карточки растащила бы копи и aside
 * по вертикали (auto-строки растут под спан-элемент). */
.hero-grid:has(> .hero-aside) > .hero-aside{min-width:0}
@media(min-width:1000px){
  .hero .hero-grid:has(> .hero-aside){
    grid-template-areas:"copy lead" "aside lead" ". lead";
    grid-template-rows:auto auto 1fr;
    column-gap:clamp(36px,3.4vw,52px);
    row-gap:0;
  }
  .hero .hero-grid:has(> .hero-aside) > .hero-copy{grid-area:copy}
  .hero .hero-grid:has(> .hero-aside) > .hero-lead{grid-area:lead}
  .hero .hero-grid:has(> .hero-aside) > .hero-aside{grid-area:aside;margin-top:22px}
}
/* Мера вторичного блока — та же, что у лида и H1 (см. комментарий выше). */
.hero-aside .hero-promise{max-width:44rem}
.hero-aside .hero-pills{margin-bottom:0}
.hero-aside .hero-promise,
.hero-aside .hero-cta{margin-top:18px}
/* ─── ПРОМИС: ЧТО ПЕЧАТАТЬ — РЕШАЕТ PHP, НА КАКОЙ ШИРИНЕ ПОКАЗЫВАТЬ — CSS ─────
 * Два РАЗНЫХ вопроса, и каждый решается там, где на него есть ответ.
 *
 * 1. ЕСТЬ ЛИ у языка чем занять слот. Это про контент, ширина тут ни при чём,
 *    и решает это patterns/home-hero.php: `empty($hero['facts']) && !empty(...)`.
 *    Раньше вместо условия здесь стояло БЕЗУСЛОВНОЕ `display:none` (13.08.2026),
 *    и оно гасило чип на польском, немецком, испанском и французском хабах, где
 *    факт-строки нет и заменить его нечем, — дыра в первом экране на четырёх
 *    посадочных из пяти, включая флагманскую /polish/. Плюс мёртвый узел в DOM
 *    и нерисуемое ACF-поле «Измеримое обещание». Условие вернули в PHP — верно.
 *
 * 2. НА КАКОЙ ШИРИНЕ показывать то, что напечатано. Это про раскладку, и в PHP
 *    ответа нет вовсе: ширину вьюпорта сервер не знает, а гадать по User-Agent —
 *    заведомо неверно. Значит гейт по ширине обязан быть здесь, и его отсутствие
 *    с 14.08.2026 — не решение, а побочный эффект удаления правила из п. 1.
 *
 * ЗАЧЕМ ГЕЙТ (замер по всем четырём хабам в обеих локалях, 14.08.2026). Ниже
 * 1000px порядок чтения — H1 → форма → ЛИД → пилюли → ПРОМИС, то есть чип стоит
 * через один блок после лида. А промис на всех четырёх хабах один и тот же
 * генерик, и два его утверждения из трёх лид уже произнёс дословно:
 *  · «живая речь с первого занятия» — ср. PL «с живой речью на каждом занятии»,
 *    ES/FR «большим объёмом разговорной практики с первого занятия»;
 *  · «под вашу цель» — ср. концовку лида «Выберите свою цель ниже — под каждую
 *    отдельная программа» (дословно на всех четырёх, в обеих локалях).
 * Уникально в чипе ровно одно — «понятная дорога по уровням CEFR», — и оно на
 * той же странице раскрыто целой секцией «Программа по уровням» (9 упоминаний
 * CEFR в документе). То есть на телефоне чип не сообщает НИЧЕГО нового, а стоит
 * около сотни пикселей (base.css: padding 13/17, margin-top 20, мера 46ch → на
 * 360px две-три строки) — ровно в том фолде, который вся серия правок 13–14.08
 * и разгружала, и ровно перед вторичным CTA, который он отодвигает вниз.
 *
 * ПОЧЕМУ ИМЕННО display:none, А НЕ visibility/clip: элемент не должен оставаться
 * в порядке чтения скринридера, если его нет на экране (§1.3.2 «Meaningful
 * Sequence» + правило voiceover-sr). display:none убирает узел из обоих деревьев
 * разом, расхождения «слышно, но не видно» не возникает. Это тот же приём и тот
 * же довод, что у .lead-sub и .eps-phone__hint ниже по файлу. Порядок DOM не
 * трогается, ни order, ни display:contents (§1.3.2, §2.4.3). Информация не
 * теряется (§1.1.1): на десктопе чип на месте, на телефоне его единственный
 * несовпадающий с лидом тезис живёт в секции уровней.
 *
 * ПОЧЕМУ ПОРОГ 999.98, А НЕ ПРЕЖНИЙ 1199.98: 1199.98 достался от времён, когда
 * money-hero разъезжался на две колонки с 1200px. В этой же серии порог опущен
 * до 1000 (см. верх файла), и с 1000px .hero-aside снова стоит в левой колонке
 * рядом с формой — гаси чип по старому порогу, и на 1000–1199 в этой колонке
 * появится та самая дыра, которую закрывал коммит 14.08, просто в другой полосе
 * ширин. Гейт обязан совпадать с порогом раскладки, а не жить своей жизнью.
 * Скоуп `.hero-aside` намеренный: у легализации (leg-hero.php) чип лежит в
 * .hero-copy и правила не касается. Печатает промис внутри .hero-aside только
 * home-hero.php: у корневой витрины aside с 15.08.2026 тоже есть, но промиса в
 * нём нет вовсе, а trial-hero и kids-hero промиса не содержат в принципе. */
@media(max-width:999.98px){
  .hero-aside .hero-promise{display:none}
}
/* ─── ПОЛОСА ДОВЕРИЯ ХАБА — СТОЛБЕЦ, А НЕ РВАНЫЙ РЯД (16.08.2026) ────────────
 * Базовый примитив .hero-assure (base.css) — flex-wrap-ряд, и он был прав, пока
 * все три пункта были ярлыками в 2–3 слова («Живые преподаватели · Группы
 * одного уровня · Гарантия результата»): такой ряд укладывался в строку и
 * читался одной линией доверия.
 *
 * Третий пункт английского хаба владелец заменил на конкретное обещание —
 * «Гарантия: повтор ступени за полцены в течение 2 лет», 50 знаков вместо 18.
 * Ряду он не по мерке ни на одной ширине: в колонке 648px (1440) три пункта
 * требуют около 740px, поэтому обёртка кладёт два пункта в первый ряд и один
 * в никем не занятый второй — правый край рвётся, а одинокий длинный пункт
 * читается сноской к первым двум, хотя он-то и есть сильнейший довод.
 *
 * Правим геометрию, а не текст: один столбец на всех ширинах. Это не потеря,
 * а приведение к тому, что уже происходит де-факто — ниже 1000px колонка одна
 * и пункты и так стоят тремя строками (замер 360px: 999 / 1031 / 1063).
 * Столбец из трёх галок — канонический чек-лист: одинаковый левый край,
 * предсказуемая длина строки, и длина третьего пункта перестаёт быть проблемой.
 * Вертикали это стоит около 33px в колонке, которая после сокращения H1 на
 * 230px короче лид-карты, — то есть тратим ровно то, чего в избытке.
 *
 * СКОУП — МОДИФИКАТОР, А НЕ ВСЕ ХАБЫ. Класс ставит patterns/home-hero.php по
 * длине третьего пункта (>30 знаков), разбор — там же. На четырёх остальных
 * хабах пункт короткий и ряд укладывается в строку; безусловный столбец стоил
 * бы им 73px высоты hero (замер 1440: низ .hero 985–1061 против 912–988) и
 * ничего бы не дал взамен. Модификатор печатает только home-hero.php, поэтому
 * курсовой .hero--sc, пробный урок, тест уровня и программа со своими
 * .hero-assure правила не касаются вовсе. */
.hero-assure--stack{display:grid;grid-template-columns:1fr;gap:10px}
.hero-assure--stack .hero-assure-item{align-items:flex-start}
.hero-assure--stack .hero-assure-item svg{margin-top:2px}
@media(max-width:1199.98px){
  .hero-aside .hero-assure{margin-top:20px;padding-top:18px}
}
/* Сжатие вертикали money-hero на телефонах — БЕЗ правки текста.
 * H1 и лид хаба сейчас длинные (17 и 60 слов) и заморожены до нового текста от
 * marketer, поэтому единственный доступный рычаг — вертикальные интервалы. Это
 * не косметика: на 360px карточка формы начиналась ровно на границе экрана, и
 * пользователь видел только край плашки «Бесплатно · 60 минут». Три правки —
 * меньше воздуха сверху, меньше разрыв между копи и формой, плотнее лид —
 * поднимают заголовок и подпись формы в первый экран.
 * Гейт :has(> .hero-aside) прежний по форме, но с 15.08.2026 ловит и корневую
 * витрину — у неё та же разрезанная копи и та же карточка, значит и тот же
 * бюджет фолда. Вне гейта остаются легализация и расписание: они тоже грузят
 * home.css, а их hero трогать нельзя. */
@media(max-width:599.98px){
  .hero:has(.hero-aside){padding-block:clamp(20px,4vw,32px)}
  .hero .hero-grid:has(> .hero-aside){gap:22px}
  .hero-grid:has(> .hero-aside) > .hero-aside .hero-lede{font-size:.97rem;line-height:1.5}
}
/* ─── ДВА РАЗМЕНА НА УЗКИХ ЭКРАНАХ (≤430px) ─────────────────────────────────
 * После уплотнения карточки кнопка отправки на 360×640 не доходила до сгиба
 * ровно на полсотни пикселей, а украинская локаль длиннее русской на 6–12%
 * (H1 64 знака против 58, текст согласия — на строку), поэтому запас нужен
 * не символический. Два элемента первого экрана дублируют соседей и уступают
 * место кнопке — только ниже 430px, на планшете и десктопе оба на месте:
 *
 * 1. Подпись формы. Её работу в фолде уже делают плашка «Бесплатно · 60 минут»
 *    (что это и сколько длится) и факт-строка над карточкой (цена и состав).
 *    Обещание звонка в тот же день остаётся на странице ниже — в блоке L16
 *    и в финальном CTA, где та же форма показывается с подписью целиком.
 * 2. Подсказка формата телефона. Формат уже показан двумя способами рядом:
 *    выбранный код страны (+380) и плейсхолдер «XX XXX XX XX», а ввод
 *    форматируется маской по ходу набора.
 *
 * Оба скрыты через display:none, а не clip/visibility: элемент не должен
 * оставаться в порядке чтения скринридера, если его нет визуально, — иначе
 * пользователь VoiceOver слышит подпись, которой на экране нет. Обязательного
 * для формы контента здесь нет: лейблы полей, требования и текст согласия
 * (RODO/GDPR) остаются на месте на всех ширинах. */
@media(max-width:429.98px){
  .hero-grid:has(> .hero-aside) .lead-card .lead-sub{display:none}
  .hero-grid:has(> .hero-aside) .lead-grid .eps-phone__hint{display:none}
}

/* ─── НИЗКОЕ ОКНО НА ДЕСКТОПЕ: КНОПКА ВЫШЕ СГИБА ────────────────────────────
 * Гейт по ВЫСОТЕ, а не по ширине, и это не педантизм: на 1440×900 карточка
 * укладывается сама (кнопка на 743), а на 1024×768 и 1280×800 — нет (816–818),
 * при том что ширина там разная, а не хватает одного и того же — вертикали.
 * Ноутбук с окном 768–800px и есть типичный десктоп платного трафика, который
 * откроется 19.08 после снятия понижающего модификатора ставок.
 * Уплотнение мягче мобильного: поля 48px (против 44 на телефоне и 52 на
 * просторном экране), потому что мышь не палец и промахов здесь нет.
 * Единая геометрия с финальным CTA этим не нарушается: тот стоит внизу
 * страницы, куда доскроллили сознательно, и борьбы за первый экран не ведёт. */
@media(min-width:1000px) and (max-height:849.98px){
  .hero-grid:has(> .hero-aside) .lead-card{padding:22px 24px 24px}
  .hero-grid:has(> .hero-aside) .lead-card .lead-sub{margin-bottom:14px}
  .hero-grid:has(> .hero-aside) .lead-grid fieldset{gap:10px}
  .hero-grid:has(> .hero-aside) .lead-grid input[type=text],
  .hero-grid:has(> .hero-aside) .lead-grid input[type=tel],
  .hero-grid:has(> .hero-aside) .lead-grid .ff-el-form-control,
  .hero-grid:has(> .hero-aside) .lead-grid .eps-phone input,
  .hero-grid:has(> .hero-aside) .lead-grid .eps-phone__btn{min-height:48px;height:48px}
  .hero-grid:has(> .hero-aside) .lead-grid .ff-btn-submit,
  .hero-grid:has(> .hero-aside) .lead-grid .ff-btn{min-height:52px;height:52px}
  .hero-grid:has(> .hero-aside) .lead-foot-note{margin-top:10px}
}

/* Плашка «Бесплатно · 60 минут» на самых узких экранах. Украинская локализация
 * («БЕЗКОШТОВНО · 60 ХВИЛИН») длиннее русской на 15 символов и на 360px рвалась
 * на две строки — вместо пилюли получался двухстрочный прямоугольник капсом.
 * Базовое правило base.css поджимает её с 400px, украинской строке этого мало.
 * Гейт по модификатору, а не по hero: карточка финального CTA на телефоне той же
 * ширины, и плашка в ней рвалась бы так же. Один компонент — один набор правил. */
@media(max-width:389.98px){
  .lead-ribbon--quiet{font-size:.69rem;gap:5px;padding-left:10px;padding-right:10px}
  .lead-ribbon--quiet svg{width:13px;height:13px}
}
/* ─── ФАКТ-СТРОКА ПЕРВОГО ЭКРАНА (все ширины) ────────────────────────────────
 * Цена, состав уровня и доля разговора — одной строкой сразу под H1. До этого
 * первое число встречалось только в ценовой полосе L1b на 1631px, то есть на
 * третьем экране телефона, и человек из платного трафика уходил, ни разу не
 * увидев ни стоимости, ни объёма курса (аудит 13.08.2026: 12,5 сек медианы).
 *
 * Гейта по ширине у строки НЕТ — она печатается везде (решение владельца
 * 13.08.2026, разбор ниже). Заголовок этого блока раньше обещал «≤1199px», а
 * следом шло «зеркалит .hero-promise: тот живёт только на десктопе ≥1200» —
 * оба утверждения устарели вместе с правилами, на которые ссылались.
 * Как обстоит на самом деле:
 *  · факт-строка — на всех ширинах, гейт только у её оформления (см. ниже);
 *  · промис — на ≥1000px, гейт стоит выше по файлу, порог общий с раскладкой.
 * Двух чипов на экране не бывает по-прежнему, но держит это не разведение по
 * брейкпоинтам, а взаимоисключающее условие в patterns/home-hero.php: язык либо
 * задал факт-строку, либо нет, и промис печатается только во втором случае.
 * Цифры внутри — tnum: одинаковая ширина знаков не даёт строке дёргаться.
 *
 * text-wrap:pretty (16.08.2026) — против слова-сироты в расшифровке цены. На
 * 480px жадный перенос оставлял последней строкой одно слово: «…21 занятие, 42»
 * / «часа», то есть число отрывалось от единицы измерения ровно в той строке,
 * ради которой строка и написана. pretty правит хвост абзаца, не трогая
 * остальные строки, и переносит перелом на запятую: «…21 занятие,» / «42 часа».
 * Это прогрессивное улучшение: браузер без поддержки просто переносит по-старому,
 * а неразрывный пробел внутрь текста не поставить — строку задаёт владелец
 * данными (inc/lang-hub.php), и вёрстка её править не вправе. */
.hero-facts{
  max-width:44rem;margin-top:12px;
  font-size:.92rem;line-height:1.5;color:var(--text);
  font-variant-numeric:tabular-nums;
  text-wrap:pretty;
}
/* Факт-строка нужна на ВСЕХ ширинах (решение владельца 13.08.2026): именно за
 * отсутствие цифр в первом экране десктоп получал 8/10 на ревью, а 19.08 с него
 * снимают понижающий модификатор ставок и туда пойдёт платный трафик.
 * На десктопе она занимает слот .hero-promise — почему промис при этом уходит,
 * а не встаёт рядом, разобрано выше по файлу (блок «ПРОМИС: ЧТО ПЕЧАТАТЬ»)
 * и в patterns/home-hero.php. Касается это только английского хаба: на
 * остальных четырёх факт-строки нет, и слот занимает как раз промис. */
@media(min-width:1000px){.hero-facts{font-size:.95rem;margin-top:14px}}
/* Ценовой якорь получает ранг выше подписи — только там, где он и работает
 * якорем, то есть в мобильном фолде (ниже 1000px копи-колонка одна и строка
 * стоит между H1 и формой). Задача от marketer 13.08 требует, чтобы в первом
 * экране была видна цена; строка её несла, но подавалась петитом 12.8px и
 * читалась как сноска к заголовку. Акцентная линейка слева поднимает её до
 * ранга «факт», не отнимая НИ ОДНОГО пикселя вертикали: растёт только левый
 * отступ. Линейка — не капсула и не заливка, спутать её с кнопкой нельзя
 * (ровно та ошибка, которую снимаем у .lead-ribbon ниже по файлу).
 *
 * ЛИНЕЙКА РАСПРОСТРАНЕНА НА ВСЕ ШИРИНЫ (14.08.2026). Была ограничена ≤999px из
 * соображения «на десктопе строка стоит в широкой колонке и в подпорке не
 * нуждается». Сравнение хабов бок о бок это опровергло: на четырёх хабах из
 * пяти в том же месте стоит .hero-promise — чип с иконкой и рамкой, — а на
 * английском голая серая строка петитом читалась не фактом, а подписью к
 * заголовку, то есть слабее соседей на том же брейкпоинте. Ради цифры в первом
 * экране десктоп и правился. Вертикали линейка по-прежнему не стоит нисколько:
 * растёт только левый отступ. */
.hero-grid:has(> .hero-aside) .hero-facts{
  padding-left:11px;
  border-left:3px solid color-mix(in srgb, var(--primary) 65%, transparent);
}

/* Лид-абзац переехал в .hero-aside и на десктопе обязан выглядеть так же, как
 * когда стоял в .hero-copy: aside уже несёт свой margin-top:22px, поэтому
 * собственный отступ лида здесь обнуляется — иначе на 1200+ между H1 и лидом
 * появился бы двойной интервал. Ниже 1200 лид идёт под ссылкой на тест и
 * отделяется от неё сам. */
.hero-aside .hero-lede{margin-top:0}
@media(max-width:999.98px){.hero-aside .hero-lede{margin-top:22px}}

/* ─── БЮДЖЕТ ПЕРВОГО ЭКРАНА НА ТЕЛЕФОНЕ (≤600px) ────────────────────────────
 * Цель приёмки одна и проверяемая: кнопка отправки лид-формы видна без
 * прокрутки на 360×640 (худшая реальная высота из записей платных сессий —
 * 660 минус адресная строка). Перестановка блоков и короткий H1 дают около
 * 130px, остального добираем плотностью карточки: воздух внутри неё считался
 * под десктоп, где вертикаль ничего не стоит.
 *
 * Ничего не уходит ниже пределов доступности: поля ввода 44px и кнопка 48px —
 * это touch-target 44×44 (WCAG 2.5.5 / Apple HIG), чекбокс согласия штатный
 * 24×24 (WCAG 2.5.8 AA), кегль подписи не опускается ниже 12px. Разметка формы,
 * её поля и обработчик не тронуты — только вертикальные интервалы и кегли. */
@media(max-width:599.98px){
  /* Подступы к карточке: каждый пиксель здесь — пиксель, отнятый у кнопки. */
  .hero:has(.hero-aside){padding-block:8px clamp(20px,4vw,32px)}
  /* Воздух под крошками. Здесь стоял селектор `.eps-breadcrumbs`, которого в
     теме нет вовсе: eps_render_breadcrumbs() печатает <nav class="crumbs">
     (inc/breadcrumbs.php). Правило было мёртвым — экономию, ради которой его
     писали, фолд не получал. Чиним селектор и берём экономию по-настоящему:
     базовые 14px padding-bottom (.crumbs) + 14px margin-bottom (.hero .crumbs)
     дают 28px воздуха под 24-пиксельной строкой звеньев — на десктопе это
     нормальный ритм секции, на телефоне это две трети высоты самой строки.
     8+8 оставляют крошки отдельным блоком и возвращают в бюджет фолда 12px
     (замер 360px: строка крошек 52px → 40px). Тач-цель звена не страдает:
     она задаётся min-height:24px у ссылки, а не отступами блока. */
  .hero:has(.hero-aside) .crumbs{padding-bottom:8px;margin-bottom:8px}
  .hero .hero-grid:has(> .hero-aside){gap:16px}

  /* H1: три строки вместо четырёх. Дело не только в кегле — text-wrap:balance
   * (base.css) выравнивает строки по длине и на 58 знаках раскладывает их в
   * четыре короткие вместо трёх плотных. На телефоне важнее высота, чем
   * ровный правый край, поэтому балансировку здесь отключаем. */
  .hero-grid:has(> .hero-aside) .hero-copy h1{font-size:1.2rem;line-height:1.16;text-wrap:wrap}
  /* Ценовая строка — 0.875rem/600, а не 0.8rem/400 (замер 16.08.2026).
   * Хаб языка становится ГЛАВНОЙ рекламной посадочной: английский бюджет
   * возвращается с карточек курса сюда, 94% расхода — мобильные. На 393px
   * замер показал перевёрнутую иерархию первого экрана: H1 19,2px, кнопка
   * отправки 17px, а единственный коммерческий факт экрана — цена — 12,8px
   * обычным весом, то есть самый мелкий текст на экране. Человек, купленный
   * по запросу «курсы английского цена», видит цифру петитом.
   * Цена стоит фолду ДВА пикселя: 14px в строке 314px шириной (замер на 360)
   * по-прежнему укладывается в одну строку, интерлиньяж 1.35 → 18,9 вместо
   * 17,3. Кнопка отправки остаётся выше сгиба на 360×640 с запасом ~76px.
   * Кегль H1 при этом НЕ трогаем: 1.2rem отвоёваны ради трёх строк вместо
   * четырёх (см. соседний блок), рост кегля вернул бы четвёртую и съел бы
   * тридцать с лишним пикселей — цену тех же денег, но дороже. */
  .hero-grid:has(> .hero-aside) .hero-facts{margin-top:6px;font-size:.875rem;line-height:1.35;font-weight:600}

  .hero-grid:has(> .hero-aside) .lead-card{padding:10px 15px 16px}
  .hero-grid:has(> .hero-aside) .lead-ribbon{margin-bottom:6px;padding-top:5px;padding-bottom:5px}
  /* Заголовок в одну строку: при 18.5px «Записаться на пробный урок» шло в две
   * (текст 300px против 279px доступных), 1.06rem укладывает его в строку. */
  /* balance убирает слово-сироту: «Записаться на пробный / урок» ложится
     двумя соразмерными строками вместо длинной и одинокого хвоста. */
  .hero-grid:has(> .hero-aside) .lead-card .lead-title{font-size:1rem;line-height:1.18;margin-bottom:3px;text-wrap:balance}
  .hero-grid:has(> .hero-aside) .lead-card .lead-sub{font-size:.82rem;line-height:1.38;margin-bottom:11px}
  .hero-grid:has(> .hero-aside) .lead-grid{gap:9px}

  /* Поля Fluent Forms: лейбл ближе к полю, поле — ровно touch-минимум 44px. */
  /* Главный источник воздуха внутри формы — не margin групп, а gap самого
     fieldset (Fluent Forms, 15px). Группы стоят вплотную к своему шагу. */
  .hero-grid:has(> .hero-aside) .lead-grid fieldset{gap:5px}
  .hero-grid:has(> .hero-aside) .lead-grid .ff-el-group{margin-bottom:0}
  /* Селект кода страны и поле номера — та же высота, что у остальных полей. */
  .hero-grid:has(> .hero-aside) .lead-grid .eps-phone input,
  .hero-grid:has(> .hero-aside) .lead-grid .eps-phone__btn{min-height:44px;height:44px}
  .hero-grid:has(> .hero-aside) .lead-grid .eps-phone__hint{font-size:.75rem;line-height:1.3;margin-top:2px;margin-bottom:0}
  .hero-grid:has(> .hero-aside) .lead-grid .ff-el-input--label{margin-bottom:1px}
  .hero-grid:has(> .hero-aside) .lead-grid .ff-el-input--label label{font-size:.78rem;line-height:1.2}
  /* Комбо «код страны + номер» несёт собственный внутренний воздух под десктоп. */
  .hero-grid:has(> .hero-aside) .lead-grid .eps-phone__combo{gap:8px}
  .hero-grid:has(> .hero-aside) .lead-grid input[type=text],
  .hero-grid:has(> .hero-aside) .lead-grid input[type=tel],
  .hero-grid:has(> .hero-aside) .lead-grid .ff-el-form-control{min-height:44px;height:44px;padding-top:8px;padding-bottom:8px}
  /* Подсказка формата остаётся (плейсхолдер её не заменяет — он исчезает при
     вводе), но кеглем 12px и без лишнего отступа. Ниже 12px не опускаемся. */
  .hero-grid:has(> .hero-aside) .lead-grid .ff-el-help-message{font-size:.75rem;line-height:1.3;margin-top:2px;margin-bottom:0}
  /* Текст согласия юридический, сокращать его нельзя — только кегль и интерлиньяж. */
  .hero-grid:has(> .hero-aside) .lead-grid .eps-rodo .ff-el-form-check-label,
  .hero-grid:has(> .hero-aside) .lead-grid .eps-rodo label{font-size:.75rem;line-height:1.25}
  .hero-grid:has(> .hero-aside) .lead-grid .eps-submit{margin-bottom:0}
  .hero-grid:has(> .hero-aside) .lead-grid .ff-btn-submit,
  .hero-grid:has(> .hero-aside) .lead-grid .ff-btn{min-height:48px;height:48px;padding-top:12px;padding-bottom:12px}
  /* Сноска «Без спама» стоит ПОД кнопкой и на её видимость не влияет —
     ужимаем только чтобы не растягивать карточку. */
  .hero-grid:has(> .hero-aside) .lead-foot-note{font-size:.78rem;line-height:1.35;margin-top:8px}
}

/* ═══ ДВА ГЕЙТА ПО ВЫСОТЕ ОКНА: ПОЧЕМУ ИХ ДВА И ГДЕ ПРОХОДЯТ ГРАНИЦЫ ══════════
 * (пересчёт 14.08.2026; прежняя редакция строила порог по неверной величине)
 *
 * ЧТО МЕРЯЕТ `max-height`. Медиазапрос сравнивается с ВЫСОТОЙ LAYOUT-ВЬЮПОРТА
 * (в терминах CSS Values 4 — `lvh`, «большой» вьюпорт), а не с тем, что человек
 * реально видит. Chrome на Android и Safari на iOS верстают страницу в большой
 * вьюпорт и не пересчитывают медиазапросы, когда адресная строка выезжает и
 * прячется. Видимая же область — «маленький» вьюпорт `svh`, он же то, что
 * отдаёт window.innerHeight, он же то, что писал в события PostHog.
 *   svh = lvh − хром браузера
 * Замеренные величины хрома: Chrome Android — 56 (только верхняя адресная
 * строка); Safari iOS 15+ — 86 (эталонная пара iPhone 13: lvh 745 / svh 659);
 * браузеры с ДВУМЯ панелями (Samsung Internet, встроенные webview) — до 112.
 * Числа платного трафика 597–718 при медиане ~690 — это svh. Строить по ним
 * порог `max-height` напрямую, как было сделано 13.08, нельзя: он окажется
 * занижен ровно на величину хрома.
 *
 * ЧТО ИЗМЕНИЛОСЬ В САМОМ БЮДЖЕТЕ. Факт-строка укоротилась вдвое (91/93 знака →
 * 42/45, три строки петитом → одна), а воздух под крошками ужат с 28 до 16px
 * (см. выше про мёртвый селектор). Замер НИЖНЕЙ ГРАНИЦЫ КНОПКИ ОТПРАВКИ,
 * несжатое состояние, все пять хабов × обе локали, окно 900px:
 *   336px → 624–625 | 360px → 587–624 | 375px → 587–609
 *   384px → 568–609 | 411px → 569–592 | 430px → 620–675
 * Худшее в реальной полосе ширин (336–411, все окна трафика лежат в ней) —
 * 625px. На 430 хуже (675), но 430-пиксельные телефоны — это Pro Max с lvh 827+,
 * они не попадают ни под какой разумный порог и им ничего не нужно.
 *
 * ОТСЮДА ДВА ПОРОГА, А НЕ ОДИН. Считаем, кому что нужно:
 *   · кнопка ОБРЕЗАНА, если svh < 625;
 *   · кнопка есть, но упирается в край (читается как «форма продолжается ниже»),
 *     если 625 ≤ svh < 665 — берём 40px комфортного зазора, при нём под кнопкой
 *     видна и сноска «Без спама».
 * Переводим в lvh, по которому только и может сработать медиазапрос:
 *   · «обрезана» покрывается порогом ≥ 624 + 112 = 736;
 *   · «не нужно вообще» начинается с 665 + 56 = 721.
 * 736 > 721 — интервалы ПЕРЕСЕКАЮТСЯ. Это не ошибка расчёта, а свойство задачи:
 * разброс хрома (56…112) шире, чем зазор между «плохо» и «уже хорошо», поэтому
 * ОДИН порог математически не может разделить группы. Любое одно число либо
 * недоберёт тех, кому нужно, либо пережмёт тех, кому не нужно.
 *
 * Раз выбирать приходится, выбираем по цене ошибки — и снимаем её, разделив
 * гейт на два по признаку «что именно он делает»:
 *   ▸ МЯГКИЙ (≤779.98) — только воздух. Ни один элемент не исчезает, кегли не
 *     трогаются. Пережать им никого нельзя: на просторном телефоне это просто
 *     чуть плотнее свёрстанный первый экран.
 *   ▸ ЖЁСТКИЙ (≤739.98) — снимает крошки и уменьшает H1. Это уже потеря, и он
 *     остаётся на прежней границе: замер показывает, что КАЖДОЕ реальное
 *     устройство, которое он ловит, имеет ≤36px запаса (360×640 → −64;
 *     iPhone SE 375×667 → −48; 360×720 → +16; iPhone 12 mini → +17;
 *     360×740 → +36), то есть ловит он по делу.
 *
 * ПОЧЕМУ НЕ ~820, КАК ПРЕДПОЛАГАЛОСЬ. 820 пережимает: под него попадает
 * 360×800 с жестовой навигацией (lvh 776, svh 720 — запас 96px) и вплотную
 * подходят iPhone 14 Plus и Pixel 5 (lvh 827). Гасить крошки на телефоне,
 * у которого сотня пикселей свободна, — ровно та цена, которую платить не за что.
 * И исходная посылка «медианный пользователь не попадёт под гейт» после
 * укорочения факт-строки перестала быть проблемой: при svh 690 кнопка стоит
 * на 624 — она видна с запасом 66px, гейт ему не нужен вовсе. Проверять надо
 * было не медиану, а нижний край распределения, и он покрыт.
 *
 * ПРОВЕРКА НА ПРОПУСК. Кого жёсткий гейт не поймает при худшем хроме 112:
 * lvh 740 → svh 628, кнопка 624 — видна, пусть и впритык; мягкий гейт (740 ≤ 779.98
 * — работает) добавляет ей ~22px. Пользователя, у которого кнопка обрезана и при
 * этом не сработал ни один гейт, в диапазоне хрома 56…146 не существует.
 *
 * Приём в теме не новый — тем же способом (min-width:1000px)and(max-height:849.98px)
 * поднята кнопка на ноутбучных окнах. */

/* ─── МЯГКИЙ ГЕЙТ: ТОЛЬКО ВОЗДУХ, НИЧЕГО НЕ ИСЧЕЗАЕТ ────────────────────────
 * Отдаёт ~22px и не имеет права стоить ничего больше: крошки на месте, H1
 * прежнего кегля, все подписи и поля прежние. Стоит ПЕРЕД жёстким гейтом —
 * специфичность у них одинаковая, и порядок в файле решает, кто перебьёт. */
@media (max-width:599.98px) and (max-height:779.98px){
  .hero:has(.hero-aside){padding-block:6px clamp(20px,4vw,32px)}
  .hero:has(.hero-aside) .crumbs{padding-bottom:4px;margin-bottom:5px}
  .hero .hero-grid:has(> .hero-aside){gap:11px}
  .hero-grid:has(> .hero-aside) .hero-facts{margin-top:4px}
  .hero-grid:has(> .hero-aside) .lead-card{padding-top:6px}
  .hero-grid:has(> .hero-aside) .lead-ribbon{margin-bottom:4px}
}

/* ─── ЖЁСТКИЙ ГЕЙТ: КНОПКА ОТПРАВКИ ЦЕЛИКОМ ВЫШЕ СГИБА ──────────────────────
 * Замер ДО правок 13.08, 336×597 (Chrome, ru): шапка 0–73, крошки 81–117,
 * H1 131–220 (четыре строки), факт-строка 226–277, карточка 293–735,
 * КНОПКА ОТПРАВКИ 619–667 — на 70px ниже сгиба. На 360×597 — 580–628,
 * ниже сгиба на 31px. То есть человек из объявления видел форму, у которой
 * не видно кнопки: три поля, чекбокс согласия и обрыв.
 *
 * Ниже — только вертикальные интервалы и кегли служебных строк. Ни одно
 * поле, ни лейбл, ни текст согласия не тронуты; кнопка остаётся 48px,
 * поля 44px (WCAG 2.5.5), кегль подписей не ниже 12px.
 *
 * 1. КРОШКИ. Пятьдесят пикселей — восьмая часть окна — на цепочку
 *    «Главная › Английский» из двух звеньев. Ориентации она здесь не даёт
 *    (страница и есть второй уровень), навигация доступна из шапки, а
 *    WCAG 2.4.8 Location — уровень AAA, не AA. BreadcrumbList в JSON-LD
 *    печатает inc/schema.php независимо от визуальных крошек, разметка для
 *    поиска не страдает. На высоком телефоне и на планшете крошки на месте.
 * 2. H1. Кегль 1.2 → 1.1rem: на 336px заголовок ложится в три строки вместо
 *    четырёх. 17.6px для H1 на 336-пиксельном экране — это 5,2% ширины,
 *    ровно та же доля, что 24px на 460px; текст не мельчает по восприятию.
 * 3. ЗАГОЛОВОК ФОРМЫ. 1rem → .94rem укладывает «Записаться на пробный урок»
 *    в одну строку на 336 (при 16px он шёл в две).
 * 4. Оставшееся — воздух: отступ hero и gap сетки.
 *
 * Жёсткий диапазон целиком лежит внутри мягкого (739.98 < 779.98), поэтому
 * здесь перечислено ТОЛЬКО то, что жёстче мягкого гейта. Верхний паддинг
 * карточки и отступ плашки мягкий уже выставил, дублировать их здесь нельзя:
 * специфичность одинаковая, правило ниже по файлу перебьёт — и «жёсткий»
 * гейт молча ослабил бы мягкий. */
@media (max-width:599.98px) and (max-height:739.98px){
  .hero:has(.hero-aside) .crumbs{display:none}
  /* Без крошек H1 упирается в границу шапки. 12px — минимальный воздух,
     который отделяет заголовок от хрома и не съедает запас до сгиба. */
  .hero:has(.hero-aside){padding-block:12px clamp(20px,4vw,32px)}
  .hero .hero-grid:has(> .hero-aside){gap:10px}
  .hero-grid:has(> .hero-aside) .hero-copy h1{font-size:1.1rem;line-height:1.15}
  .hero-grid:has(> .hero-aside) .hero-facts{line-height:1.32}
  /* balance убирает слово-сироту «урок» на второй строке заголовка формы. */
  .hero-grid:has(> .hero-aside) .lead-card .lead-title{font-size:.94rem;text-wrap:balance}
}

/* Тач-цель крошки. WCAG 2.5.8 Target Size (Minimum) — уровень AA — требует
 * 24×24 CSS-пикселя; ссылка «Главная» отдавала 53×22 (замер 336px), то есть
 * не дотягивала двух пикселей по высоте. Ссылка переводится в inline-flex с
 * min-height:24px.
 * Цена правки — 2px вертикали, а не ноль: строка крошек растёт с 36 до 38px
 * (замер 360px, тема ru). Прежняя редакция комментария утверждала, что высота
 * не меняется, — это было неверно. Два пикселя платятся только там, где крошки
 * видны, то есть НЕ в низком окне: гейт ниже гасит крошки целиком, и в самом
 * тесном по вертикали сценарии правка не стоит ничего. */
.hero:has(.hero-aside) .crumbs a{display:inline-flex;align-items:center;min-height:24px}

/* ─── ПЛАШКА ФОРМЫ ПЕРЕСТАЁТ ПРИТВОРЯТЬСЯ КНОПКОЙ ────────────────────────────
 * Разбор платного трафика 13.08.2026. За день ноль событий $autocapture при
 * 15 сессиях: по кликабельным элементам не нажали НИ РАЗУ, хотя автозахват жив
 * и 10–11.08 давал 10–12 событий. В реплее 019ff9e3 (окно 365×673) человек
 * сделал четыре тапа за одиннадцать секунд и ушёл — ни один тап не попал в
 * ссылку, кнопку или поле. PostHog автозахватом ловит только a/button/input/
 * select/textarea/label, поэтому «четыре тапа без единого события» читается
 * однозначно: били по тому, что кнопкой не является.
 *
 * Замер первого экрана 336×597 объясняет, по чему именно. В фолде не было
 * НИ ОДНОГО объекта цвета бренда, кроме .lead-ribbon: сплошная заливка
 * var(--primary) #ff5a5f, радиус 999px, белый капс, brand-свечение — то есть
 * пилюля, неотличимая от primary-кнопки темы (та заливается #d6383e — тот же
 * коралл, лишь притемнённый ради AA). Настоящая кнопка отправки стояла на
 * y=619..667, за сгибом. Единственная «кнопка» в поле зрения оказалась
 * декоративным бейджем.
 *
 * Правило §4 primary-action: на экране один primary CTA, остальное визуально
 * подчинено. Плашка переводится в бейдж-паттерн, который в теме уже канон
 * (reviews.css .rb-goal, blog.css, blog-single.css): подложка --surface-soft,
 * текст --badge-coral-text (=#c9343a, замер 4.89:1 на surface-soft — AA для
 * мелкого текста), тонкий контур вместо brand-свечения. Смысл плашки
 * («бесплатно, 60 минут») сохранён полностью — уходит только ложный
 * аффорданс нажимаемости.
 *
 * ОБА ЭКЗЕМПЛЯРА НА СТРАНИЦЕ, А НЕ ТОЛЬКО HERO (14.08.2026). Плашка живёт на
 * странице дважды — в hero и в финальном CTA, и это один компонент. На хабе это
 * home-hero.php + home-lead-final.php, на корневой витрине (с 15.08.2026) —
 * root-hero.php + root-lead-final.php. Сначала правился только hero, из-за чего на одной странице
 * получилось два вида одного элемента: сверху бейдж, снизу коралловая пилюля.
 * Довод «внизу рядом настоящая кнопка, спутать не с чем» не выдерживает замера:
 * в карточке финального CTA кнопка отправки стоит на 360–400px ниже плашки
 * (замер 360px), то есть на телефоне они физически НЕ попадают в один экран —
 * ровно та ситуация, что и в hero, где ложный аффорданс уже стоил дня без
 * единого клика. А 72–91% трафика хаба мобильные. Значит различать контексты
 * нечем, и вид должен быть один.
 *
 * Реализация — модификатор, а не селектор по месту. `:has(> .hero-aside)`
 * описывал «плашка в hero, где есть aside» и до финального CTA не дотягивался
 * в принципе; селектор по `#lead-final` захватил бы легализацию, которая грузит
 * этот же файл, но своей плашки не меняла, — и расхождение просто переехало бы
 * к ней. Модификатор `--quiet` ставится в разметке ровно там, где нужен, и
 * читается как намерение: «эта плашка — подпись, а не действие». Сейчас это
 * четыре места в четырёх паттернах: hero и финальный CTA хаба, hero и финальный
 * CTA корневой витрины. Легализация свои плашки не трогала — тем и ценен
 * модификатор: он не расползается по страницам сам.
 *
 * Базовая пилюля `.lead-ribbon` (base.css) не тронута: её делят 15 паттернов
 * на десятке страниц, каждая проходила свою приёмку с пилюлей. Перевод всего
 * компонента в бейдж — правильный конечный вид и отдельная задача со своим
 * прогоном скриншотов; здесь чиним страницу, а не весь сайт. */
.lead-ribbon--quiet{
  background:var(--surface-soft);
  color:var(--badge-coral-text);
  border:1px solid color-mix(in srgb, var(--primary) 26%, transparent);
  box-shadow:none;
}

/* Тест уровня — вторичный вход, текстовой ссылкой под карточкой формы.
 * Кнопкой рядом с записью на пробный урок он выигрывал у неё просто потому,
 * что дешевле по усилию (ads-structure §6.3.3). Высота 44px — touch-target. */
.hero-test-link{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:14px;min-height:44px;padding:10px 14px;border-radius:var(--r-md);
  font-weight:700;font-size:.92rem;line-height:1.35;text-align:center;
  color:var(--accent-strong);text-decoration:none;
  transition:background-color .18s ease,color .18s ease;
}
.hero-test-link svg{width:17px;height:17px;flex:none;transition:transform .18s ease}
.hero-test-link:hover{background:var(--surface-soft);text-decoration:underline;text-underline-offset:3px}
.hero-test-link:hover svg{transform:translateX(3px)}
/* Кольцо фокуса — глобальное правило base.css (:focus-visible → var(--ring)). */
@media(prefers-reduced-motion:reduce){
  .hero-test-link,.hero-test-link svg{transition:none}
  .hero-test-link:hover svg{transform:none}
}

.courses-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:600px){.courses-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.courses-grid{grid-template-columns:repeat(3,1fr)}}
.crs{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden;position:relative;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.crs:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:color-mix(in srgb,var(--primary) 30%,var(--line))}
.crs-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:20px 22px 0}
.crs-body{display:flex;flex-direction:column;gap:13px;padding:14px 22px 0;flex:1}
.crs-langrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.crs-title{font-size:1.22rem;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.crs-desc{color:var(--text-muted);font-size:.92rem;line-height:1.55}
.crs-metrics{display:grid;grid-template-columns:repeat(3,1fr);margin-top:auto;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface-2)}
.crs-metric{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;padding:13px 8px;border-right:1px solid var(--line);min-width:0}
.crs-metric:last-child{border-right:none}
.crs-metric .m-val{font-family:var(--font-head);font-weight:800;font-size:1.02rem;line-height:1.05;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.crs-metric .m-val small{font-family:var(--font-body);font-size:.66em;font-weight:700}
.crs-metric .m-lab{font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);line-height:1.2}
.crs-foot{display:flex;flex-direction:column;gap:14px;padding:16px 22px 22px;margin-top:16px;border-top:1px solid var(--line)}
.crs-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price{font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--text);line-height:1}
.price small{font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--text-muted);display:block;margin-top:3px}
.crs-price .price{font-size:1.45rem}
.crs-price .price-old{font-size:.92rem;font-weight:600;color:var(--text-muted);text-decoration:line-through}
.crs-cta{display:grid;grid-template-columns:1fr auto;gap:10px}
.crs-cta .btn{width:100%}
.crs-cta .btn-secondary{width:auto;padding-inline:16px}
.crs-cta .btn-secondary svg{transition:transform .2s ease}
.crs:hover .crs-cta .btn-secondary svg{transform:translateX(3px)}
.crs-accent{border-color:transparent;box-shadow:var(--sh-md)}
.crs-accent::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--acc);z-index:1}
.crs-accent .crs-top{padding-top:24px}
.crs-ico{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc);flex:none}
.crs-ico svg{width:24px;height:24px}
.crs-accent .pill-acc{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);border-radius:var(--r-pill);padding:5px 11px;align-self:flex-start}
.crs-acc-blue{--acc:var(--blue)}
.crs-acc-violet{--acc:var(--violet)}
.crs-acc-amber{--acc:#C77F0A}
[data-theme="dark"] .crs-acc-amber{--acc:var(--amber)}
.crs-accent .btn-primary{background:var(--acc);box-shadow:0 12px 26px color-mix(in srgb,var(--acc) 34%,transparent)}
.crs-accent .btn-primary:hover{background:color-mix(in srgb,var(--acc) 85%,black);transform:translateY(-2px)}
.crs-accent:hover{border-color:color-mix(in srgb,var(--acc) 35%,var(--line))}

/* Feature-карточка (акцентный спец-курс) — на десктопе разворачивается на всю
   ширину ряда горизонтальным лейаутом, на мобиле ведёт себя как обычная карточка. */
.crs--feature .crs-feature-main{display:flex;flex-direction:column;gap:14px;padding:24px 22px 0;flex:1}
.crs--feature .crs-feature-head{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico badge" "titles titles";align-items:center;gap:12px 14px}
.crs--feature .crs-ico{grid-area:ico}
.crs--feature .crs-feature-titles{grid-area:titles;display:flex;flex-direction:column;gap:9px;min-width:0}
.crs--feature .crs-feature-head .badge{grid-area:badge;justify-self:end}
.crs--feature .crs-feature-aside{display:flex;flex-direction:column;gap:16px;padding:16px 22px 22px;margin-top:16px}
.crs--feature .crs-metrics{margin-top:0}
@media(min-width:980px){
  .crs--feature{grid-column:1 / -1;display:grid;grid-template-columns:1.55fr .9fr;align-items:stretch}
  .crs--feature .crs-feature-main{justify-content:center;gap:16px;padding:34px 38px}
  .crs--feature .crs-feature-head{grid-template-columns:auto 1fr auto;grid-template-areas:"ico titles badge";gap:18px}
  .crs--feature .crs-feature-head .badge{align-self:center}
  .crs--feature .crs-title{font-size:1.42rem}
  .crs--feature .crs-desc{max-width:58ch;font-size:.98rem}
  .crs--feature .crs-feature-aside{justify-content:center;gap:18px;margin-top:0;padding:32px 36px;border-left:1px solid var(--line);background:var(--surface-2)}
  .crs--feature .crs-feature-aside .crs-metrics{background:var(--surface)}
}

/* ============================================================
   РАСПИСАНИЕ / ГОРЯЧИЕ СТАРТЫ
   ============================================================ */
.sched{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-md);overflow:hidden}
.sched-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:clamp(18px,3vw,26px) clamp(16px,3vw,28px);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface-soft),transparent)}
[data-theme="dark"] .sched-head{background:linear-gradient(180deg,var(--surface-2),transparent)}
.sched-head-titles{display:flex;flex-direction:column;gap:6px;margin-right:auto;min-width:0}
.sched-kicker{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--primary)}
.sched-kicker .pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--primary);flex:none}
.sched-kicker .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--primary);opacity:.5;animation:schedPulse 2s ease-out infinite}
@keyframes schedPulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.sched-title{font-size:var(--fs-h3);font-weight:800;line-height:1.15}
.sched-online{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.84rem;color:var(--badge-green-text);background:color-mix(in srgb,var(--green) 14%,transparent);border-radius:var(--r-pill);padding:8px 14px;flex:none}
.sched-online svg{width:16px;height:16px;flex:none}
.sched-tabs{display:flex;gap:8px;flex-wrap:wrap;width:100%;order:3}
@media(min-width:560px){.sched-tabs{width:auto;order:0}}
.sched-tab{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);font-weight:600;font-size:.86rem;color:var(--text);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:9px 15px;min-height:42px;cursor:pointer;transition:border-color .16s ease,color .16s ease,background .16s ease}
.sched-tab svg{width:16px;height:16px;flex:none;color:var(--text-muted);transition:color .16s ease}
.sched-tab:hover{border-color:var(--primary);color:var(--primary)}
.sched-tab:hover svg{color:var(--primary)}
.sched-tab.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sched-tab.is-active svg{color:var(--paper)}
[data-theme="dark"] .sched-tab.is-active{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
[data-theme="dark"] .sched-tab.is-active svg{color:var(--on-primary)}
.sched-tab:focus-visible{box-shadow:var(--ring)}
.start-card{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-md);padding:16px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.start-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.start-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.start-date{display:flex;flex-direction:column;gap:1px;min-width:0}
.start-date b{font-family:var(--font-head);font-weight:800;font-size:1.18rem;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.start-date span{font-size:.8rem;color:var(--text-muted);font-weight:600}
.start-time{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);flex:none;white-space:nowrap}
.start-time svg{width:13px;height:13px;flex:none}
/* Пилюли времени — текст через --badge-*-text: бренд-цвета на своей подложке дают
   3.9–4.6:1 при кегле .7rem, порог 4.5:1 (правка 16.08.2026, дефект D-2). */
.time-morning{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--badge-amber-text)}
.time-evening{background:var(--surface-violet);color:var(--badge-violet-text)}
.time-combo{background:var(--surface-blue);color:var(--badge-blue-text)}
.start-meta{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-muted);flex-wrap:wrap}
.start-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-muted);opacity:.5;flex:none}
.start-meta .online-mini{display:inline-flex;align-items:center;gap:5px;color:var(--badge-green-text);font-weight:600}
.start-meta .online-mini svg{width:13px;height:13px}
.start-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.start-card.is-full{background:var(--surface-2);border-style:dashed;border-color:var(--line)}
.start-card.is-full:hover{transform:none;box-shadow:none;border-color:var(--line)}
.start-card.is-full .start-date b,.start-card.is-full .start-time{opacity:.55}
.sched-levels{display:flex;flex-direction:column}
.level-row{border-bottom:1px solid var(--line)}
.level-row:last-child{border-bottom:none}
.level-head{display:flex;align-items:center;gap:14px;width:100%;padding:16px clamp(16px,3vw,24px);background:transparent;border:none;cursor:pointer;font-family:var(--font-body);text-align:left;transition:background .16s ease}
.level-head:hover{background:var(--surface-soft)}
.level-head:focus-visible{box-shadow:var(--ring);border-radius:var(--r-sm)}
.level-head .chip-level{flex:none;font-size:.86rem;min-width:42px;justify-content:center}
.level-info{display:flex;flex-direction:column;gap:2px;min-width:0;margin-right:auto}
.level-name{font-weight:700;font-size:.98rem;color:var(--text)}
.level-count{font-size:.8rem;color:var(--text-muted)}
.level-count b{color:var(--text);font-weight:700}
.level-caret{width:20px;height:20px;color:var(--text-muted);flex:none;transition:transform .25s ease}
.level-row.is-open .level-caret{transform:rotate(180deg)}
.level-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.level-row.is-open .level-body{grid-template-rows:1fr}
.level-body-inner{overflow:hidden;min-height:0}
.level-starts{display:grid;gap:12px;padding:4px clamp(16px,3vw,24px) 20px}
@media(min-width:560px){.level-starts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.level-starts{grid-template-columns:repeat(3,1fr)}}
.level-empty{padding:4px clamp(16px,3vw,24px) 20px;color:var(--text-muted);font-size:.88rem;display:flex;align-items:center;gap:8px}
.level-empty svg{width:16px;height:16px;color:var(--text-muted);flex:none}
.sched-matrix{display:none}
@media(min-width:1024px){
  .sched-levels{display:none}
  .sched-matrix{display:block;padding:clamp(8px,1.2vw,14px) 0}
  .mx-row{display:grid;grid-template-columns:168px 1fr;align-items:stretch;border-bottom:1px solid var(--line)}
  .mx-row:last-child{border-bottom:none}
  .mx-level{position:sticky;left:0;z-index:2;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:20px clamp(16px,2vw,24px);background:var(--surface);border-right:1px solid var(--line)}
  .mx-level .chip-level{align-self:flex-start;font-size:.92rem;min-width:46px;justify-content:center}
  .mx-level .level-name{font-size:.96rem}
  .mx-level .level-count{font-size:.78rem}
  .mx-track{display:flex;gap:14px;padding:16px clamp(16px,2vw,24px);overflow-x:auto;min-width:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-snap-type:x proximity}
  .mx-track::-webkit-scrollbar{height:8px}
  .mx-track::-webkit-scrollbar-track{background:transparent}
  .mx-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-pill)}
  .mx-track .start-card{flex:0 0 248px;scroll-snap-align:start}
  .mx-track .start-card.is-full{flex-basis:200px}
  .mx-track.is-empty{align-items:center;color:var(--text-muted);font-size:.9rem;gap:8px}
  .mx-track.is-empty svg{width:17px;height:17px;flex:none}
  .mx-row:nth-child(even) .mx-level{background:var(--surface-2)}
  .mx-row:nth-child(even) .mx-track{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
  .start-ghost{flex:0 0 220px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;border:1.5px dashed var(--line);border-radius:var(--r-md);padding:16px;background:transparent;color:var(--text-muted);cursor:pointer;text-align:left;font-family:var(--font-body);transition:border-color .18s ease,color .18s ease,background .18s ease}
  .start-ghost:hover{border-color:var(--primary);color:var(--primary);background:var(--surface-soft)}
  .start-ghost:focus-visible{box-shadow:var(--ring)}
  .start-ghost .gh-ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--primary)}
  .start-ghost:hover .gh-ico{background:color-mix(in srgb,var(--primary) 14%,transparent)}
  .start-ghost .gh-ico svg{width:18px;height:18px}
  .start-ghost b{font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--text)}
  .start-ghost span{font-size:.8rem}
}
.start-ghost{display:none}
@media(min-width:1024px){.start-ghost{display:flex}}
.sched-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px clamp(16px,3vw,28px);border-top:1px solid var(--line);background:var(--surface-2)}
.sched-foot p{font-size:.86rem;color:var(--text-muted);margin-right:auto}
.sched-hint{display:none;align-items:center;gap:6px;font-size:.76rem;font-weight:700;color:var(--primary)}
.sched-hint svg{width:14px;height:14px}
@media(min-width:1024px){.sched-hint{display:inline-flex}}

/* ============================================================
   ОТЗЫВЫ — КАРУСЕЛЬ (новый паттерн на базе card-review)
   ============================================================ */
.reviews-rating{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:32px}
.rating-card{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);flex:1;min-width:240px}
.rating-logo{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:var(--r-md);background:var(--surface-2)}
.rating-logo svg{width:26px;height:26px}
.rating-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.rating-score{display:flex;align-items:center;gap:8px}
.rating-score b{font-family:var(--font-head);font-weight:800;font-size:1.35rem;line-height:1}
.rating-score .stars svg{width:15px;height:15px}
.rating-meta{font-size:.82rem;color:var(--text-muted)}
.reviews-track-wrap{position:relative}
.reviews-track{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 18px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-overflow-scrolling:touch}
@media(min-width:600px){.reviews-track{grid-auto-columns:48%}}
@media(min-width:980px){.reviews-track{grid-auto-columns:31.5%}}
.reviews-track::-webkit-scrollbar{height:8px}
.reviews-track::-webkit-scrollbar-track{background:transparent}
.reviews-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-pill)}
.reviews-track .card-review{scroll-snap-align:start;height:100%}
.reviews-nav{display:flex;align-items:center;gap:10px}
.rev-arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:border-color .16s ease,color .16s ease,transform .16s ease;flex:none}
.rev-arrow:hover{border-color:var(--primary);color:var(--primary)}
.rev-arrow:active{transform:scale(.94)}
.rev-arrow:focus-visible{box-shadow:var(--ring)}
.rev-arrow svg{width:20px;height:20px}
.rev-arrow[disabled]{opacity:.4;cursor:not-allowed}
.reviews-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.reviews-hint{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-muted)}
.reviews-hint svg{width:15px;height:15px}

/* ============================================================
   ЦЕНЫ / ТАРИФЫ
   ============================================================ */
.pricing-grid{display:grid;gap:22px;grid-template-columns:1fr;align-items:stretch}
@media(min-width:720px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.pricing-grid{grid-template-columns:repeat(3,1fr)}}
.tier{display:flex;flex-direction:column;gap:18px;padding:28px 26px;border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);position:relative;transition:transform .2s ease,box-shadow .2s ease}
.tier:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.tier-name{font-family:var(--font-head);font-weight:800;font-size:1.18rem}
.tier-sub{color:var(--text-muted);font-size:.88rem;margin-top:-10px}
.tier-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tier-price .price{font-size:2.1rem}
.tier-price .per{font-size:.86rem;color:var(--text-muted);font-weight:600}
.tier-price .price-old{font-size:1rem;font-weight:600;color:var(--text-muted);text-decoration:line-through}
.tier-feats{display:flex;flex-direction:column;gap:11px;list-style:none;margin:0;padding:0;flex:1}
.tier-feats li{display:flex;align-items:flex-start;gap:10px;font-size:.92rem;line-height:1.45;color:var(--text)}
.tier-feats .tk{width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px;display:grid;place-items:center;background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.tier-feats .tk svg{width:13px;height:13px}
.tier-feats li.is-off{color:var(--text-muted)}
.tier-feats li.is-off .tk{background:var(--surface-2);color:var(--text-muted)}
.tier.is-popular{border-color:transparent;box-shadow:var(--sh-lg);background:var(--surface)}
.tier.is-popular::before{content:"";position:absolute;inset:0;border-radius:var(--r-xl);padding:2px;background:var(--grad-brand);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.tier-pop-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--on-primary);background:var(--primary);padding:6px 14px;border-radius:var(--r-pill);box-shadow:var(--sh-brand);white-space:nowrap}
.tier-pop-badge svg{width:14px;height:14px}
.pricing-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:26px;font-size:.88rem;color:var(--text-muted);text-align:center}
.pricing-note svg{width:17px;height:17px;color:var(--green);flex:none}


.promo-banner{display:flex;flex-wrap:wrap;align-items:center;gap:18px;border-radius:var(--r-lg);padding:22px 28px;background:linear-gradient(110deg,var(--surface-amber),#FFE9B8);border:1px solid color-mix(in srgb,var(--amber) 40%,transparent)}
[data-theme="dark"] .promo-banner{background:linear-gradient(110deg,#3a2f1a,#2c2414)}
.promo-icon{width:54px;height:54px;border-radius:var(--r-md);background:var(--amber);color:#3a2600;display:grid;place-items:center;flex:none}
.promo-icon svg{width:28px;height:28px}
.promo-text{flex:1;min-width:200px}
.promo-text strong{font-family:var(--font-head);font-weight:800;font-size:1.25rem;color:var(--ink);display:block}
[data-theme="dark"] .promo-text strong{color:var(--amber)}
.promo-text span{color:#7a5a10;font-weight:600;font-size:.9rem}
[data-theme="dark"] .promo-text span{color:#d4a94a}
.promo-timer{display:flex;gap:8px}
.timer-cell{background:var(--ink);color:#fff;border-radius:10px;padding:8px 11px;text-align:center;min-width:48px;font-family:var(--font-head);font-weight:700}
[data-theme="dark"] .timer-cell{background:#0E0C20}
.timer-cell small{display:block;font-family:var(--font-body);font-size:.58rem;font-weight:600;opacity:.7;text-transform:uppercase;letter-spacing:.05em;margin-top:2px}

/* ---------- Программа по уровням A1→C1 (лестница) ---------- */
/* Строка объёма ступени над лестницей (16.08.2026). Стоит между подзаголовком
   секции и первой панелью намеренно: она задаёт единицу, в которой посчитаны все
   сроки ниже, и без неё «3 месяца · 84 часа» на панели A1 приходится сводить с
   «9 000 грн за ступень — 1,5 месяца, 42 часа» из первого экрана в уме.
   Оформление — нейтральная плашка на surface-2, а не акцентная карточка:
   в секции уже есть два выделенных элемента (панель B1 с градиентной рамкой и
   синий .level-note внизу), третий акцент сделал бы иерархию плоской. */
.levels-unit{
  display:flex;gap:12px;align-items:flex-start;
  max-width:940px;margin:0 auto 22px;padding:13px 16px;
  border-radius:var(--r-md);background:var(--surface-2);
  border:1px solid var(--line);
  font-size:.88rem;line-height:1.55;color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.levels-unit b{color:var(--text);font-weight:700}
.levels-unit .lu-ico{display:grid;place-items:center;flex:none;width:22px;height:22px;color:var(--primary);margin-top:1px}
.levels-unit .lu-ico svg{width:19px;height:19px}
@media(max-width:479.98px){
  .levels-unit{gap:10px;padding:12px 13px;font-size:.85rem;margin-bottom:18px}
}
.levels{list-style:none;margin:0 auto;padding:0;max-width:940px;display:flex;flex-direction:column}
.level-step{display:grid;grid-template-columns:56px 1fr;gap:16px;padding-bottom:20px;position:relative}
.level-step:last-child{padding-bottom:0}
.level-node{display:flex;justify-content:center;position:relative;padding-top:3px}
.level-step:not(:last-child) .level-node::after{content:"";position:absolute;left:50%;top:54px;bottom:-20px;width:2px;transform:translateX(-50%);background:var(--line)}
.level-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:18px 20px;display:flex;flex-direction:column;gap:8px;transition:transform .2s ease,box-shadow .2s ease}
.level-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.level-flag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--on-primary);background:var(--primary);padding:5px 12px;border-radius:var(--r-pill);box-shadow:var(--sh-brand);margin-bottom:2px}
.level-flag svg{width:13px;height:13px}
.level-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.level-card-name{font-size:1.1rem;font-weight:800;line-height:1.2}
.level-dur{display:inline-flex;align-items:center;gap:7px;font-size:.84rem;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums}
.level-dur svg{width:15px;height:15px;color:var(--primary);flex:none}
/* Ступени метки CEFR: подпись-мост между двумя счётами программы (16.08.2026).
   Бейдж несёт номера («Ступени 1–2»), рядом обычным текстом — названия ступеней
   из лестницы /program/. Разделены на два элемента, чтобы на 360px строка
   переносилась по границе «номера / названия», а не рвала название пополам. */
.level-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:.82rem;line-height:1.4;margin-top:-2px}
/* ЦВЕТ ТЕКСТА БЕЙДЖА — --badge-coral-text, А НЕ --primary (правка 16.08.2026).
   Бренд-коралл #ff5a5f на собственной 10%-подложке даёт 2.61:1 (замер на
   .level-card, светлая тема) — для текста 12px это провал WCAG 2.1 AA (нужно
   4.5:1), а бейдж несёт номера ступеней, то есть содержание, а не декор.
   Токен --badge-coral-text заведён ровно под этот случай (tokens.css: «яркие
   бренд-цвета остаются для иконок и тинт-подложек, здесь затемнён ТОЛЬКО
   текст») и уже держит бейджи блога, отзывов и кейсов — берём канон темы, а не
   заводим шестой оттенок коралла. В тёмной теме токен сам возвращается к
   бренд-кораллу: там контраст и без затемнения в норме. */
.level-steps .ls-badge{
  flex:none;font-family:var(--font-head);font-weight:700;font-size:.75rem;
  letter-spacing:.01em;color:var(--badge-coral-text);
  background:color-mix(in srgb,var(--primary) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--primary) 26%,transparent);
  padding:3px 9px;border-radius:var(--r-pill);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.level-steps .ls-names{color:var(--text-muted);font-weight:600}
.level-out{font-size:.92rem;line-height:1.6;color:var(--text-muted)}
.level-out b{color:var(--text);font-weight:700}
.level-step.is-target .level-card{border-color:transparent;box-shadow:var(--sh-md)}
.level-step.is-target .level-card::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:2px;background:var(--grad-brand);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.level-note{display:flex;gap:15px;align-items:flex-start;max-width:940px;margin:30px auto 0;padding:20px 22px;border-radius:var(--r-lg);background:var(--surface-blue);border:1px solid color-mix(in srgb,var(--blue) 22%,transparent)}
.level-note .ln-ico{width:44px;height:44px;border-radius:var(--r-md);background:var(--blue);color:#fff;display:grid;place-items:center;flex:none}
.level-note .ln-ico svg{width:23px;height:23px}
.level-note p{font-size:.92rem;line-height:1.6;color:var(--text)}
.level-note b{font-weight:800}
.level-note .ln-fine{display:block;color:var(--text-muted);font-size:.84rem;margin-top:6px}

/* ---------- Тарифы: модификатор на 4 колонки + акцент «под экзамен» ---------- */
/* На 1024–1199 держим 2×2 (4 узкие колонки не влезают — цена «от ~899 zł» не сжимается),
   на ≥1200 — полноценные 4 колонки. minmax(0,1fr) страхует от горизонтального оверфлоу. */
@media(min-width:1024px){.pricing-grid.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1200px){.pricing-grid.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tier.is-exam{background:var(--ink);border-color:transparent;box-shadow:var(--sh-lg)}
.tier.is-exam .tier-name,.tier.is-exam .tier-feats li{color:#fff}
.tier.is-exam .tier-sub{color:#b4afd0}
.tier.is-exam .tier-price .price{color:#fff}
.tier.is-exam .tier-price .per{color:#b4afd0}
.tier.is-exam .tier-feats .tk{background:rgba(255,255,255,.16);color:#fff}
.tier.is-exam .tier-badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:var(--amber);padding:5px 12px;border-radius:var(--r-pill)}
.tier.is-exam .tier-badge svg{width:13px;height:13px}
[data-theme="dark"] .tier.is-exam{background:linear-gradient(165deg,#181333,#0C0A1E);border:1px solid color-mix(in srgb,var(--violet) 40%,transparent);box-shadow:0 26px 64px -30px color-mix(in srgb,var(--violet) 60%,transparent)}


/* ============================================================
   ТАРИФЫ EP · цена за уровень + лестница скидок (.eplan)
   ============================================================ */
.eplan{display:grid;gap:18px;grid-template-columns:1fr;align-items:stretch}
@media(min-width:920px){.eplan{grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);gap:24px}}

/* Главная цена — акцентная карта с градиентной рамкой */
.eplan-hero{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:clamp(26px,4vw,38px);border-radius:var(--r-xl);background:var(--surface);border:1px solid transparent;box-shadow:var(--sh-lg);overflow:hidden}
.eplan-hero::before{content:"";position:absolute;inset:0;border-radius:var(--r-xl);padding:1.5px;background:var(--grad-brand);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.eplan-hero::after{content:"";position:absolute;inset:auto -40% -55% auto;width:70%;aspect-ratio:1;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 16%,transparent),transparent 70%);pointer-events:none}
.eplan-hero-badge{position:relative;display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);border-radius:var(--r-pill);padding:6px 13px}
.eplan-price{position:relative;display:flex;align-items:baseline;gap:8px;margin-top:8px;line-height:1}
.eplan-sum{font-family:var(--font-head);font-weight:800;font-size:clamp(2.9rem,8vw,3.9rem);color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.eplan-cur{font-family:var(--font-head);font-weight:800;font-size:clamp(1.3rem,3.4vw,1.7rem);color:var(--text)}
.eplan-per{position:relative;font-size:.92rem;font-weight:600;color:var(--text-muted);margin-top:-2px}
.eplan-facts{position:relative;display:flex;flex-direction:column;gap:9px;list-style:none;margin:16px 0 4px;padding:0;width:100%}
.eplan-facts li{display:flex;align-items:center;gap:10px;font-size:.92rem;font-weight:600;color:var(--text)}
.eplan-facts svg{width:18px;height:18px;flex:none;color:var(--primary)}
.eplan-hero .btn{position:relative;margin-top:16px;width:100%}

/* Лестница скидок */
.eplan-ladder{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3.4vw,30px);border-radius:var(--r-xl);background:var(--surface-2);border:1px solid var(--line)}
.eplan-ladder-head{display:flex;flex-direction:column;gap:4px}
.eplan-ladder-title{font-family:var(--font-head);font-weight:800;font-size:1.15rem;color:var(--text)}
.eplan-steps{counter-reset:eplan;display:flex;flex-direction:column;gap:11px;list-style:none;margin:0;padding:0}
.eplan-step{--acc:var(--green);position:relative;display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);transition:transform .18s ease,box-shadow .18s ease}
.eplan-step:hover{transform:translateY(-2px);box-shadow:var(--sh-md,var(--sh-lg))}
.eplan-step.acc-green{--acc:var(--green)}
.eplan-step.acc-violet{--acc:var(--violet)}
.eplan-step.acc-amber{--acc:var(--amber)}
.eplan-step.acc-coral{--acc:var(--primary)}
.eplan-step::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;border-radius:3px;background:var(--acc)}
.eplan-step-pct{flex:none;min-width:74px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font-head);font-weight:800;font-size:.9rem;color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent);border-radius:var(--r-pill);padding:7px 10px;font-variant-numeric:tabular-nums;line-height:1.15}
.eplan-step-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.eplan-step-price{font-family:var(--font-head);font-weight:700;font-size:.98rem;color:var(--text)}
.eplan-step-text{font-size:.86rem;line-height:1.45;color:var(--text-muted)}

/* Нота брони/рассрочки */
.eplan-note{display:flex;align-items:flex-start;gap:10px;max-width:820px;margin:22px auto 0;font-size:.9rem;line-height:1.5;color:var(--text-muted);text-align:left}
.eplan-note svg{width:19px;height:19px;flex:none;margin-top:1px;color:var(--green)}

/* Два варианта графика (страница легализации) */
.eplan-graphs{display:grid;gap:14px;grid-template-columns:1fr;margin-top:22px}
@media(min-width:640px){.eplan-graphs{grid-template-columns:1fr 1fr}}
.eplan-graph{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.eplan-graph b{font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--text)}
.eplan-graph span:last-child{font-size:.88rem;line-height:1.5;color:var(--text-muted)}
.eplan-graph-tag{--acc:var(--violet);align-self:flex-start;display:inline-flex;align-items:center;font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--acc);background:color-mix(in srgb,var(--acc) 13%,transparent);border-radius:var(--r-pill);padding:5px 11px}
.eplan-graph-tag.acc-green{--acc:var(--green)}
.eplan-graph-tag.acc-violet{--acc:var(--violet)}
.eplan-graphs-note{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 0;font-size:.88rem;color:var(--text-muted);text-align:center}


/* ============================================================
   L14 · АКЦЕНТ-БЛОК — легализация / экзамен (условная секция)
   ============================================================ */
.accent-band{--acc:var(--violet);position:relative;display:grid;gap:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:clamp(24px,4vw,44px);padding-left:clamp(26px,4vw,48px);overflow:hidden}
.accent-band::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 45%,var(--blue)))}
@media(min-width:900px){.accent-band{grid-template-columns:1.32fr .68fr;gap:clamp(28px,4vw,52px);align-items:center}}
.accent-copy{display:flex;flex-direction:column;gap:16px;min-width:0}
.accent-kicker{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);border-radius:var(--r-pill);padding:7px 14px}
.accent-kicker svg{width:15px;height:15px;flex:none}
.accent-title{font-size:var(--fs-h2);font-weight:800;line-height:1.16;letter-spacing:-.01em;max-width:24ch}
.accent-lede{color:var(--text-muted);font-size:var(--fs-body);line-height:1.65;max-width:62ch}
.accent-lede b{color:var(--text);font-weight:800}
.accent-note{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;line-height:1.55;color:var(--text-muted);background:var(--surface-2);border-radius:var(--r-md);padding:13px 15px}
.accent-note svg{width:17px;height:17px;color:var(--acc);flex:none;margin-top:1px}
.accent-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.accent-band .btn-primary{background:var(--acc);box-shadow:0 12px 26px color-mix(in srgb,var(--acc) 34%,transparent)}
.accent-band .btn-primary:hover{background:color-mix(in srgb,var(--acc) 85%,black);transform:translateY(-2px)}
.accent-panel{position:relative;background:var(--surface-violet);border:1px solid color-mix(in srgb,var(--violet) 22%,transparent);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:15px}
.accent-panel-head{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:800;font-size:.92rem;color:var(--text)}
.accent-panel-head svg{width:19px;height:19px;color:var(--violet);flex:none}
.accent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.accent-list li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;line-height:1.5;color:var(--text)}
.accent-tk{width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px;display:grid;place-items:center;background:var(--violet);color:#fff}
.accent-tk svg{width:12px;height:12px}

/* ============================================================
   L16 · ТОЧКИ ВХОДА — три «двери»
   ============================================================ */
.entry-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:640px){.entry-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.entry-grid{grid-template-columns:repeat(3,1fr)}}
.entry-card{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:26px 24px;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.entry-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:color-mix(in srgb,var(--primary) 32%,var(--line))}
.entry-card:focus-visible{box-shadow:var(--ring)}
.entry-ico{width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);flex:none}
.entry-ico svg{width:27px;height:27px}
.entry-ico--blue{background:var(--surface-blue);color:var(--blue)}
.entry-ico--amber{background:var(--surface-amber);color:#B67608}
[data-theme="dark"] .entry-ico--amber{color:var(--amber)}
.entry-badge{position:absolute;top:24px;right:24px;font-family:var(--font-head);font-weight:700;font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap}
.entry-badge--free{color:#137a4a;background:color-mix(in srgb,var(--green) 16%,transparent)}
[data-theme="dark"] .entry-badge--free{color:var(--green)}
.entry-badge--blue{color:var(--blue);background:var(--surface-blue)}
.entry-badge--amber{color:#8a5f08;background:color-mix(in srgb,var(--amber) 26%,transparent)}
[data-theme="dark"] .entry-badge--amber{color:var(--amber)}
.entry-title{font-size:1.18rem;font-weight:800;line-height:1.22;letter-spacing:-.01em;margin-top:4px;padding-right:70px}
.entry-desc{color:var(--text-muted);font-size:.92rem;line-height:1.55;flex:1}
.entry-link{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.92rem;color:var(--primary);margin-top:2px}
.entry-link svg{width:17px;height:17px;transition:transform .2s ease}
.entry-card:hover .entry-link svg{transform:translateX(4px)}
.entry-card--magnet{background:linear-gradient(160deg,var(--surface-amber),color-mix(in srgb,var(--surface-amber) 45%,var(--surface)));border-color:color-mix(in srgb,var(--amber) 36%,transparent)}
.entry-card--magnet .entry-desc{color:#6f5717}
.entry-card--magnet .entry-link{color:#8a5f08}
[data-theme="dark"] .entry-card--magnet{background:linear-gradient(160deg,#332a17,#231c10);border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
[data-theme="dark"] .entry-card--magnet .entry-desc{color:var(--text-muted)}
[data-theme="dark"] .entry-card--magnet .entry-link{color:var(--amber)}

/* Точка входа S6 — единственный центрированный CTA под заголовком секции
   (без карточек). Отступ сверху отделяет кнопку от .sec-head. */
.entry-cta{display:flex;justify-content:center;margin-top:clamp(20px,3.4vw,32px)}

/* ============================================================
   L17 · БЛОГ ЯЗЫКА (динамика; скрыть при 0 статей)
   ============================================================ */
.lblog-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:600px){.lblog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.lblog-grid{grid-template-columns:repeat(3,1fr)}}
.lblog-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.lblog-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:color-mix(in srgb,var(--primary) 30%,var(--line))}
.lblog-card:focus-visible{box-shadow:var(--ring)}
.lblog-thumb{aspect-ratio:16/9;display:grid;place-items:center;color:#fff}
.lblog-thumb svg{width:52px;height:52px;opacity:.92}
.lblog-thumb--violet{background:linear-gradient(150deg,var(--violet),color-mix(in srgb,var(--violet) 58%,var(--blue)))}
.lblog-thumb--blue{background:linear-gradient(150deg,var(--blue),color-mix(in srgb,var(--blue) 52%,var(--primary)))}
.lblog-thumb--green{background:linear-gradient(150deg,var(--green),color-mix(in srgb,var(--green) 58%,var(--blue)))}
.lblog-body{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;flex:1}
.lblog-cat{align-self:flex-start;font-family:var(--font-head);font-weight:700;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--primary);background:color-mix(in srgb,var(--primary) 11%,transparent);border-radius:var(--r-pill);padding:5px 11px}
.lblog-title{font-size:1.1rem;font-weight:800;line-height:1.26;letter-spacing:-.01em}
.lblog-excerpt{color:var(--text-muted);font-size:.9rem;line-height:1.55;flex:1}
.lblog-meta{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--text-muted);font-weight:600;margin-top:2px;font-variant-numeric:tabular-nums}
.lblog-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--text-muted);opacity:.5;flex:none}

/* ============================================================
   ЧЕСТНАЯ TRUST-ПОЛОСА (rh-trust) — общий компонент.
   Замена скрытого фейкового соцдоказательства (карусель отзывов с вымышленными
   ФИО + сетка преподавателей с выдуманным стажем). Используется на: корневой
   витрине «/» (patterns/root-social.php), главной языка и money-page легализации
   (patterns/home-trust.php). Поэтому живёт в home.css — общий CSS этих шаблонов
   (page-main-page грузит home+root-home, page-language и page-dlya-legalizacii —
   home). Только проверяемые качественные тезисы, БЕЗ цифр (жёсткое правило).
   Инфо не только цветом (иконка+заголовок+текст). Сетка 1→2(≥560)→4(≥1024) без
   «дыр». Тёмная тема и tone-акценты — на токенах.
   ============================================================ */
.rh-trust-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:560px){.rh-trust-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(min-width:1024px){.rh-trust-grid{grid-template-columns:repeat(4,1fr)}}
.rh-trust-cell{display:flex;flex-direction:column;gap:14px;padding:24px 22px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.rh-trust-cell:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:color-mix(in srgb,var(--c,var(--primary)) 30%,var(--line))}
.rh-trust-ico{width:52px;height:52px;border-radius:var(--r-md);display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--c,var(--primary)) 14%,transparent);color:var(--c,var(--primary))}
.rh-trust-ico svg{width:26px;height:26px}
.rh-trust-body{display:flex;flex-direction:column;gap:7px}
.rh-trust-title{font-size:1.06rem;font-weight:800;line-height:1.28;color:var(--text)}
.rh-trust-sub{font-size:.9rem;line-height:1.55;color:var(--text-muted)}
.rh-trust-cell[data-tone="green"]{--c:var(--green)}
.rh-trust-cell[data-tone="blue"]{--c:var(--blue)}
.rh-trust-cell[data-tone="coral"]{--c:var(--primary)}
.rh-trust-cell[data-tone="violet"]{--c:var(--violet)}
@media(prefers-reduced-motion:reduce){.rh-trust-cell{transition:none}}

/* ─── L1b · ЦЕНОВАЯ ПОЛОСА ───────────────────────────────────────────────────
 * Сразу под hero. Задача — чтобы стоимость попадалась до четверти прокрутки
 * (хаб длинный, 19 секций). Поэтому это полоса, а не секция тарифов: тарифные
 * карточки — контент страницы курса, здесь нужен один факт и путь дальше.
 *
 * Секция-обёртка получает уменьшенные вертикальные отступы: полоса читается как
 * продолжение hero, а не как самостоятельный экран. */
.hprice-sec{padding-block:clamp(18px,3vw,28px)}
.hprice{
  display:grid;gap:18px;align-items:center;
  padding:clamp(18px,3vw,26px) clamp(18px,3vw,28px);
  border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--surface-soft),var(--surface-amber));
  border:1px solid color-mix(in srgb,var(--primary) 22%,var(--line));
}
.hprice-main{min-width:0}
.hprice-main .eyebrow{margin-bottom:8px}
/* baseline-выравнивание суммы, валюты и единицы: цифра крупная, а «₴» и
   «за ступень» должны сидеть на её базовой линии, а не по центру.
   ПРОБЕЛЫ ВОКРУГ «+» В clamp() ОБЯЗАТЕЛЬНЫ. Здесь стояло «1.2rem+2.6vw» —
   это синтаксическая ошибка (в математике CSS знак операции обязан быть
   отделён пробелами, иначе «+2.6vw» читается вторым значением подряд), вся
   декларация отбрасывалась, и сумма молча наследовала кегль body: 16.7px
   вместо расчётных 30–43px. Ошибка тихая — ни ошибки в консоли, ни развала
   раскладки, просто «9 000 ₴» на всех пяти хабах было ростом с обычный текст.
   Правится 13.08.2026 вместе с заменой единицы цены на «за ступень». */
/* ГРУППИРОВКА ПОСЛЕ ЗАМЕНЫ «₴» НА «грн» (16.08.2026). Строка ценника состоит
   из трёх кусков — «9 000» (43px), валюта, «за ступень» (15px, приглушённый), —
   и раньше валюта была одним узким глифом: спутать «₴» с началом единицы
   измерения было нельзя, поэтому одинаковый зазор 9px слева и справа работал.
   Слово из трёх букв тем же начертанием, что и число, читается двусмысленно:
   при равных зазорах «грн» одинаково притягивается и к сумме, и к «за ступень».
   Сумма и валюта — одно смысловое целое (правило whitespace-balance: интервал
   группирует), поэтому зазор перед единицей измерения увеличен вдвое — до 16px
   против 9px внутри пары. Разводим именно снаружи, а не поджимаем внутри:
   у .hprice-num стоит letter-spacing -.02em, и на 43px он съедает ещё почти
   пиксель справа от последнего нуля — при зазоре 5px «9 000грн» на 1440
   слипалось в одно слово (проверено скриншотом). Кегли не трогаем: 43/16.8/15.2 — уже рабочая
   тройка, менялась только ширина валюты (10px у глифа против 37px у слова),
   а она в композицию укладывается — строка на всех восьми ширинах остаётся
   однострочной (замер 360…1536). */
.hprice-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 9px;margin:0}
.hprice-num{font-family:var(--font-head);font-weight:800;font-size:clamp(1.9rem,1.2rem + 2.6vw,2.7rem);line-height:1;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.hprice-cur{font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:var(--text)}
.hprice-unit{font-size:.95rem;font-weight:600;color:var(--text-muted);margin-left:7px}
/* text-wrap:balance — из-за разделителей «·» в ноте. Обычный перенос рвёт её
   как попало: на 1280 вторая строка НАЧИНАЛАСЬ с «· 42 часа живой практики»
   (точка-разделитель в начале строки читается как маркер списка), на 1440
   внизу висело одинокое «практики» шириной 60px при первой строке в 431px.
   balance выравнивает строки по длине (замер 1440: было 431/60, стало
   244/246) и заодно уводит разделитель с начала строки. Прогрессивное
   улучшение: браузер без поддержки просто переносит как раньше, ломаться
   нечему. text-wrap:pretty здесь слабее — сироту на 1440 он чинит (387/103),
   а разделитель в начале строки на 1280 оставляет. */
.hprice-note{margin:8px 0 0;font-size:.86rem;line-height:1.5;color:var(--text-muted);text-wrap:balance}
.hprice-discounts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.hprice-disc{display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.hprice-disc-pct{font-family:var(--font-head);font-weight:800;font-size:.95rem;color:var(--accent-strong);font-variant-numeric:tabular-nums}
.hprice-disc-text{font-size:.82rem;font-weight:600;line-height:1.35;color:var(--text)}
.hprice-disc.is-best{border-color:color-mix(in srgb,var(--green) 45%,var(--line))}
/* Текст «−20%» — --badge-green-text, а не бренд-зелёный: на белой подложке
   плашки #16a34a даёт 3.30:1 при кегле 15.2px, то есть провал WCAG AA (4.5:1;
   под «крупный текст» 15.2px не подходит даже полужирным). Токен для того и
   заведён — затемнённая зелень для ТЕКСТА на светлом, в тёмной теме он сам
   возвращается к яркому бренд-цвету (tokens.css). Рамка плашки остаётся на
   --green: к декоративной границе требование 4.5:1 не применяется.
   Замер 13.08.2026: было 3.30:1, стало 5.79:1 (светлая), 9.47:1 (тёмная). */
.hprice-disc.is-best .hprice-disc-pct{color:var(--badge-green-text)}
.hprice-link{width:100%;justify-content:center}
.hprice-link svg{width:17px;height:17px;flex:none}
/* Порог 900, а не 720: на 768 две плашки скидок занимают 510px из 644, и
 * колонке суммы (1fr при auto у скидок) остаётся 111px. До 900px полоса
 * остаётся в одну колонку — там она читается свободнее, чем в тесной
 * двухколоночной раскладке.
 *
 * min-width колонки суммы — ГАРАНТИЯ, а не украшение. Ширину этой колонке
 * оставляют скидки и кнопка, то есть чужой контент, и порог медиазапроса про
 * неё ничего не знает: на 900 колонке доставалось 220px, на 1100 — 157px, а
 * строка «9 000 ₴ за ступень» при кегле 43px требует 255px (ru) / 264px (uk)
 * — замер max-content 13.08.2026 на /english/ и /uk/english/. Результат:
 * «за ступень» уезжало на вторую строку (на 1100 вместе с «₴»), а нота
 * складывалась в рваный столбец на 3–4 строки. 17.5rem = 280px закрывает
 * обе локали с запасом ~16px; не влезло — уступают скидки (см. ниже), а не
 * цена. Порогами это не лечится: до починки кегля (clamp с пробелами вокруг
 * «+», см. .hprice-num) сумма была 16.7px, влезала куда угодно, и порог 900
 * выглядел достаточным.
 *
 * Крупный шрифт (WCAG 1.4.4, Resize text) обслуживают две вещи сразу, потому
 * что увеличить текст можно двумя разными способами:
 *  · пороги в em (56.25em = те же 900px при штатном корне 16px, для обычного
 *    посетителя не меняется ничего) ловят НАСТРОЙКУ БРАУЗЕРА «размер шрифта»:
 *    в медиазапросе em считается от неё, а не от :root, и при 200% порог
 *    уезжает на 1800px — полоса сама возвращается в одну колонку;
 *  · min() с долей вьюпорта ловит второй способ — когда кегль корня задран
 *    стилями или расширением: медиазапрос этого не видит, и гарантия в 17.5rem
 *    превратилась бы в 560px внутри карточки шириной 757px (замер: +123px за
 *    край на 900/корень 32px). 32vw на пороге 900px даёт 288px, то есть при
 *    штатном кегле ограничитель не срабатывает никогда, а при задранном
 *    сумма переносится по строкам — это допустимая деградация, вылезание
 *    за карточку — нет. */
@media(min-width:56.25em){
  .hprice{grid-template-columns:1fr auto;grid-template-areas:"main disc" "main link";column-gap:clamp(20px,3vw,36px);row-gap:12px}
  .hprice-main{grid-area:main;min-width:min(17.5rem,32vw)}
  .hprice-discounts{grid-area:disc;justify-content:flex-end}
  .hprice-link{grid-area:link;width:auto;justify-self:end}
}
/* На широких экранах сумма забирает свободное место (1fr), а скидки и ссылка
 * стоят рядом справа. Обратная раскладка (1fr у скидок) разносила их с суммой
 * на полтора экрана: на 1536 между «9 000 ₴» и «−10%» зияло ~700px, и полоса
 * читалась как три несвязанных объекта вместо одного факта о цене.
 *
 * Порог 1250, а не 1100: третья колонка забирает под кнопку ещё 214px, и на
 * 1100 сумме оставалось 157px. В строку помещаются 280 (сумма) + 510 (скидки)
 * + 214 (кнопка) + 72 (два зазора по 36) = 1076px внутренней ширины карточки,
 * а столько она набирает как раз к 1250. Ниже — двухколоночная раскладка:
 * скидки в ряд, кнопка под ними.
 *
 * flex-wrap здесь НЕ переключаем в nowrap: на этих ширинах плашки и так стоят
 * в строку, а оставленный перенос — страховка. С nowrap колонка скидок не
 * умеет отдавать ширину, и любой будущий прирост (третья скидка, длиннее
 * подпись) выдавил бы полосу за карточку вместо того, чтобы сложить плашки
 * в два ряда.
 *
 * 78.125em = 1250px при корне 16px; em по той же причине, что и у порога
 * выше. */
@media(min-width:78.125em){
  .hprice{grid-template-columns:1fr auto auto;grid-template-areas:"main disc link";align-items:center}
  .hprice-discounts{justify-content:flex-start}
  .hprice-link{align-self:center}
}

/* ─── L5 · ФАКТ «80% УРОКА — ЖИВАЯ РЕЧЬ» В ПАНЕЛИ «ФОРМАТ ЗАНЯТИЙ» ───────────
 * Пятая карточка в сетке из четырёх — обычно верный признак, что контент кладут
 * не туда: в 2×2 она повисает сиротой в третьем ряду, а на широком экране рядом
 * с ней остаётся пустая ячейка. Здесь этого не происходит, потому что карточка
 * не пятая «такая же», а другого жанра: четыре верхние перечисляют, что даётся
 * вместе с курсом (Classroom, куратор, тесты, гарантия), а эта несёт ЧИСЛО.
 * Разный жанр — разная форма: span на всю ширину сетки, и ряд из двух ячеек
 * получает не хвост, а подвал. Панель «Формат занятий» до этого не содержала ни
 * одной цифры и читалась как четыре одинаковых серых прямоугольника.
 *
 * Меры предосторожности:
 *  · `grid-column:1/-1` работает и в одноколоночной раскладке (там span=1) —
 *    на телефоне карточка просто идёт пятой в столбик, ничего не ломается;
 *  · порядок DOM = визуальный порядок, ни order, ни display:contents (WCAG 1.3.2);
 *  · брейкпоинта правилу не нужно, и держится это на самом `1/-1`, а НЕ на
 *    инлайне в паттерне: раньше здесь было написано «сетка правой колонки
 *    принудительно двухколоночная инлайном», но инлайн `grid-template-columns`
 *    снят из home-method.php (см. разбор там же), и число колонок задаёт теперь
 *    только базовое правило .method-features (base.css: одна колонка, с 520px —
 *    две). На поведение это не влияет — `1/-1` растягивает карточку на столько
 *    колонок, сколько их есть, — но инварианта «колонок всегда две» больше нет.
 * mc-coral — недостающий член семейства mc-* (blue/green/violet/amber в base.css):
 * подложка и глиф на бренд-коралле. Собран по образцу mc-green — процентная
 * подмесь к прозрачному, а не готовый токен подложки: так плашка одинаково
 * работает и на белой карточке правой колонки, и на surface-2 в левой, и в
 * тёмной теме, где --accent-strong сам переключается на светлый коралл.
 * Живёт здесь, а не в base.css: единственный носитель — эта карточка.
 * Глиф декоративный (aria-hidden), порог для него 3:1; замер #c9343a на
 * подмешанной подложке поверх белой карточки — 4.5:1, с запасом. */
.mc-coral{background:color-mix(in srgb,var(--primary) 13%,transparent);color:var(--accent-strong)}
.method-features .cd-mcard.mcard--span{grid-column:1 / -1}
/* Число — главное в карточке, поэтому кегль подписи чуть выше карточного
 * (1.02rem у .cd-mcard b) и строка не переносится по слову-сироте. */
.method-features .mcard--span b{font-size:1.06rem;text-wrap:balance}

/* ─── L3b · ЯЗЫК ПОД ПРОФЕССИЮ ───────────────────────────────────────────────
 * Отдельный уровень навигации под целью «работа»: человек уже выбрал цель в L3
 * и здесь только сужает её до своей специальности. Поэтому карточки намеренно
 * компактнее и монохромнее плиток сегментов — они не конкурируют с L3 за
 * внимание, а служат оглавлением. Вся карточка — одна ссылка (цель клика больше
 * и на мобильном, и для клавиатуры), поэтому .hprof-go это НЕ вложенная ссылка,
 * а подпись-аффорданс. */
.hprof-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
.hprof-card{
  display:flex;flex-direction:column;gap:8px;height:100%;
  padding:16px 18px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);
  text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.hprof-title{font-family:var(--font-head);font-weight:800;font-size:1rem;line-height:1.3;color:var(--text)}
.hprof-offer{font-size:.86rem;line-height:1.5;color:var(--text-muted)}
.hprof-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.hprof-chip{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--r-pill);background:var(--surface-2,var(--surface-soft));border:1px solid var(--line);font-size:.72rem;font-weight:700;color:var(--text-muted)}
.hprof-go{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;color:var(--accent-strong)}
.hprof-go svg{width:15px;height:15px;flex:none;transition:transform .18s ease}
@media(hover:hover){
  .hprof-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:color-mix(in srgb,var(--primary) 34%,var(--line))}
  .hprof-card:hover .hprof-go svg{transform:translateX(3px)}
}
@media(min-width:560px){.hprof-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.hprof-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1280px){.hprof-grid{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){
  .hprof-card,.hprof-go svg{transition:none}
  .hprof-card:hover{transform:none}
}

/* ─── Горизонтальный скролл на телефонах: длинные подписи кнопок ─────────────
 * Найдено при съёмке quality-gate: на /polish/ и /uk/polish/ страница
 * прокручивалась вбок на 21px при 360 и 6px при 375 (WCAG 2.1 §1.4.10 Reflow —
 * контент обязан читаться без горизонтальной прокрутки). Виноваты две кнопки с
 * длинными подписями: у .btn глобально white-space:nowrap, и «Оставить заявку
 * для компании» (b2b, 323px) и «Не знаете свой уровень? Пройдите тест» (уровни)
 * не помещались в 360px и распирали свои контейнеры.
 *
 * Базовое правило в base.css уже делает ровно это для .hero-cta (там же порог
 * 419.98px) — здесь тот же приём для двух оставшихся мест хаба. Правим в
 * home.css, а не в base.css: обе секции принадлежат хабу и легализации.
 * Кнопка становится блочной на всю ширину — на телефоне это ещё и больший
 * тач-таргет, а не только починка ширины. */
@media(max-width:419.98px){
  .b2b-offer .btn,
  .courses-foot .btn{width:100%;white-space:normal;text-align:center;justify-content:center}
}
/* ДОБОР 13.08.2026, найдено на новой контрольной ширине 336px. Прежнее правило
 * оказалось нерабочим ровно там, где кнопок ДВЕ: .courses-foot — flex-строка
 * (base.css) без wrap и без gap, а width:100% у флекс-элемента задаёт лишь
 * желаемый размер. Обе кнопки просят по 289px, суммарно 578 при контейнере 289;
 * flex-shrink упирается в min-width:auto и дальше содержимого не жмёт — в итоге
 * на 336px они вылезали за оба края (замер: left -24, right 345 при клиентской
 * ширине 321) и давали 24px горизонтальной прокрутки ВСЕЙ страницы. На 360 и
 * выше пара помещалась, поэтому съёмки прежнего гейта дефект не показывали:
 * 336 — как раз та ширина, которую до сегодня ни разу не проверяли, а в окнах
 * платного трафика 13.08 она есть.
 * Чиним причину, а не симптом: строке разрешён перенос, задан gap (без него
 * кнопки стояли встык на 420–600px), а ниже 420 пара становится колонкой —
 * там любая из этих подписей в строку не читается. WCAG 2.1 §1.4.10 Reflow. */
.courses-foot{flex-wrap:wrap;gap:12px}
@media(max-width:419.98px){
  .courses-foot{flex-direction:column;align-items:stretch}
}