/*
 * ПЕРВЫЙ ЭКРАН ХАБА АНГЛИЙСКОГО (patterns/english-hero.php).
 *
 * Файл посекционный и подключается ТОЛЬКО на шаблоне page-english
 * (карта eps_template_assets_map() в inc/enqueue.php). В base.css и в
 * pages/home.css отсюда не переезжает ничего: home.css обслуживает первый экран
 * ещё четырёх языковых хабов, и правка там задела бы их все разом.
 *
 * Все селекторы под префиксом .enhero-* — hero четырёх остальных хабов живёт на
 * .hero/.hero-grid/.hero-copy и с этим файлом не пересекается ни одним классом.
 *
 * ПОРЯДОК ЧТЕНИЯ ФАЙЛА:
 *   1. Раскладка секции и переключатель редакций текста wide/narrow
 *   2. Бейдж, H1 с маркером, подзаголовок
 *   3. Шкала уровней A1 → C1
 *   4. Ценовой блок
 *   5. Кнопки первичного действия
 *   6. Медиа-карточка 4:5 + наложенные бейдж-цитата и карточка набора
 *   7. Липкая нижняя панель (телефон)
 *   8. Модалка лид-формы
 *   9. Тёмная тема, движение, печать
 *
 * Подход mobile-first: базовые правила — телефон, расширения через min-width.
 * Точек две и у каждой своя работа:
 *   768px  — граница «телефон / всё остальное»: переключаются редакции текстов
 *            и выключается липкая панель;
 *   1024px — граница «одна колонка / две»: копи и медиа расходятся по колонкам,
 *            H1 переходит на второй, крупный диапазон кегля.
 */

/* ============================================================
   1. РАСКЛАДКА И ПЕРЕКЛЮЧАТЕЛЬ РЕДАКЦИЙ ТЕКСТА
   ============================================================ */

.enhero {
  position: relative;
  overflow: clip;
  /* Верхний подступ почти нулевой: каждый пиксель здесь — пиксель, отнятый у
     первичной кнопки, которая обязана попадать в фолд 360×640 (критерий
     приёмки). Нижний — обычный ритм секции. */
  padding-block: 6px clamp(26px, 5vw, 46px);
  /* Тёплая подложка вместо плоского фона страницы: снимок 4:5 и коралловые
     акценты на чистом белом читались как вырезанные из другого макета. */
  background:
    radial-gradient(120% 90% at 88% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 62%),
    radial-gradient(90% 70% at 0% 100%, color-mix(in srgb, var(--violet) 7%, transparent), transparent 60%),
    var(--bg);
}

/* Тонкая диагональная штриховка поверх подложки — та же фактура, что у заглушки
   фото, поэтому первый экран читается одним материалом. Держим почти на пороге
   видимости: это атмосфера, а не узор. */
.enhero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--ink) 4%, transparent) 0 1px,
    transparent 1px 14px);
  mask-image: radial-gradient(120% 80% at 80% 0%, #000, transparent 70%);
}

.enhero > .wrap { position: relative; z-index: 1; }

/* Крошки: базовые 14px + 14px воздуха под 24-пиксельной строкой — на телефоне
   это две трети высоты самой строки, а фолд считает каждый пиксель. Тач-цель
   звена не страдает: её задаёт min-height ссылки, а не отступ блока. */
.enhero .crumbs { padding-top: 0; padding-bottom: 8px; margin-bottom: 6px; }

.enhero-grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
}

/* Две колонки только с 1024px. Копи ~55% — как на макете; медиа-колонка при
   этом не растягивается выше разумного, иначе снимок 4:5 съедает высоту экрана
   на ноутбуках 1280×800. */
@media (min-width: 1024px) {
  .enhero-grid { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
  .enhero-media { justify-self: end; width: 100%; max-width: 460px; }
}
@media (min-width: 1440px) {
  .enhero-media { max-width: 500px; }
}

.enhero-grid > * { min-width: 0; }

/*
 * РЕДАКЦИИ ТЕКСТА ПОД УЗКИЙ И ШИРОКИЙ ЭКРАН.
 * Владелец утвердил для семи слотов по две редакции — короткую и полную.
 * Печатаются обе (вёрстка не знает ширину вьюпорта), лишняя гасится display:none.
 * Именно display:none, а не visibility/clip: скрытый им узел выпадает и из
 * дерева доступности, поэтому скринридер на каждой ширине слышит ровно одну
 * редакцию, без дубля.
 *
 * ПРАВИЛО ТОЛЬКО ПРЯЧЕТ И НИКОГДА НЕ НАЗНАЧАЕТ display — в этом вся суть.
 * Первая редакция была написана «mobile-first»: base прятал широкую редакцию, а
 * с 768px возвращал её через display:revert. Revert возвращает элементу его
 * СОБСТВЕННЫЙ дефолт по типу тега — и второй пункт списка скидок, у которого
 * стоит data-w="wide", получал list-item вместо flex, заданного компонентом
 * (.enhero-price-off li). Селектор с атрибутом весит больше (0,2,0 против 0,1,1)
 * и выигрывал у компонента. Симметричная пара медиазапросов ниже назначением
 * display не занимается вовсе, поэтому конфликтовать ей не с чем — ни здесь,
 * ни в любом будущем компоненте с нестандартным display.
 */
@media (max-width: 767.98px) { .enhero [data-w="wide"] { display: none; } }
@media (min-width: 768px) { .enhero [data-w="narrow"] { display: none; } }

/* ============================================================
   2. БЕЙДЖ, H1, ПОДЗАГОЛОВОК
   ============================================================ */

/*
 * ЖЁСТКАЯ ТИПОГРАФИЧЕСКАЯ ШКАЛА ПЕРВОГО ЭКРАНА — ЧЕТЫРЕ СТУПЕНИ, НЕ ВОСЕМЬ.
 *
 * Ревизия 19.08.2026. В первой редакции на телефоне жило восемь различимых
 * кеглей (замер uk/360): 11,84 (подпись шкалы, сноска) · 12,48 (подпись цены,
 * скидка, метки пилюль) · 12,8 (бейдж) · 13,44 (код уровня) · 14,4
 * (подзаголовок) · 17 (кнопки) · 24,72 (H1) · 26,4 (сумма). Пары вроде
 * 11,84/12,48/12,8 отличаются на доли пикселя — глаз не читает их как разные
 * уровни, он читает их как неаккуратность. Плюс сумма (26,4) была КРУПНЕЕ
 * заголовка (24,72), то есть иерархия была перевёрнута.
 *
 * ЗНАЧЕНИЯ МОБИЛЬНЫХ СТУПЕНЕЙ ЗАДАНЫ ВЛАДЕЛЬЦЕМ (разметка на снимках 19.08.2026)
 * и здесь не «подобраны», а перенесены как есть:
 *   --eh-fs-h1     32px    заголовок, интерлиньяж 1.3;
 *   --eh-fs-lead   26px    сумма цены со скидкой;
 *   --eh-fs-body   18px    подзаголовок И текст бейджа — один размер на оба;
 *   --eh-fs-note   15px    средний слой: метки пилюль A1/C1, подпись над ценой,
 *                          зачёркнутая базовая цена, метка скидки;
 *   --eh-fs-meta   12,5px  остаток вторичного: цитата и карточка набора
 *                          поверх снимка.
 * Шаг между ступенями 1,23 / 1,44 / 1,20 / 1,20 — ни одна пара не попадает в
 * зону «почти одинаково» (до 18%), из-за которой набор читался неряшливым.
 * Кегль кнопок (17px) в шкалу не входит намеренно: это размер управляющего
 * элемента, он задан компонентом .btn в base.css и одинаков на всём сайте.
 *
 * ПОЧЕМУ СУММА 26px, А НЕ БОЛЬШЕ. Владелец назвал 24px нижней границей и
 * попросил укрупнить ВЕСЬ ценовой блок. Верхнюю границу здесь задаёт
 * заголовок: при 28px отношение H1/сумма падает до 1,14, то есть ровно в ту
 * зону «почти одинаково», ради выхода из которой всё и переделывалось, — и
 * заголовок перестаёт читаться главным. Поэтому сумма подросла умеренно
 * (24 → 26), а «крупнее целиком» дал средний слой: подпись, зачёркнутая цена
 * и метка скидки поднялись с 12,5 до 15px, то есть на 20%.
 *
 * ЗАЧЕМ ПЕРЕМЕННЫЕ, А НЕ ЧИСЛА ПО МЕСТУ. Все четыре ступени переопределяются
 * с 768px обратно на прежние значения одним блоком: числа владельца сняты с
 * МОБИЛЬНОГО вьюпорта, а на широких ширинах у первого экрана две колонки,
 * другой запас по высоте и откалиброванная под старые кегли геометрия баннера
 * согласия (блок 9.1). Переменные держат эту границу в одном месте.
 *
 * ОДИН НЕЙТРАЛЬНЫЙ ТОН ДЛЯ ВТОРИЧНОГО ТЕКСТА. Раньше мелкий текст был окрашен
 * пятью способами (muted, зелёный текст скидки, зелёная иконка щита, тёмная
 * метка A1, белая метка на коралловой C1). Осталось два сигнала: var(--text-muted)
 * везде и зелёный ровно в одной строке — там, где он кодирует выгоду («−10%»).
 */
.enhero {
  --eh-fs-h1: 2rem;
  --eh-fs-lead: 1.625rem;
  --eh-fs-body: 1.125rem;
  --eh-fs-note: .94rem;
  --eh-fs-meta: .78rem;

  /*
   * РОЗОВАЯ ПОДЛОЖКА СТАРТОВОЙ ПИЛЮЛИ A1 (владелец, 19.08.2026).
   *
   * Выведена ИЗ --primary, а не задана шестнадцатеричным литералом: розовый на
   * этом экране обязан быть тем же кораллом, что кнопка и метка скидки, только
   * разбавленным. Готового светлого варианта акцента в токенах нет —
   * --eps-color-surface-soft (#fff6f2) это почти белый крем, владелец как раз
   * его и назвал «кремово-бежевым». Поэтому смешиваем сами.
   *
   * Смешиваем с --surface, а НЕ с белым: в тёмной теме --surface тёмный, и та
   * же формула сама даёт приглушённый тёмно-розовый вместо светлой плашки,
   * которая в тёмной теме выглядела бы дырой и вдобавок столкнулась бы со
   * светлой пилюлей C1. Отдельного правила для [data-theme="dark"] не нужно.
   *
   * 18% — потолок по контрасту, а не «на глаз». Дальше подложка темнеет, и
   * подпись «с нуля» цветом --text-muted перестаёт держать AA. В теме это уже
   * ловили (коммит «Текст меток и бейджей отвязан от бренд-цвета подложки»),
   * поэтому здесь замерено по пикселям рендера: 5,6:1 в светлой и 5,4:1
   * в тёмной для самой слабой пары «подпись на подложке».
   */
  --eh-pill-a1-bg: color-mix(in srgb, var(--primary) 18%, var(--surface));
  --eh-pill-a1-line: color-mix(in srgb, var(--primary) 32%, transparent);

  /*
   * ЦВЕТ ПОДЗАГОЛОВКА — ПОЧТИ ЧЁРНЫЙ, А НЕ ПРИГЛУШЁННЫЙ (владелец, 19.08.2026).
   *
   * Было var(--text-muted) (#5b5870) — на кадрах описание читалось блёклым.
   * Владелец назвал #211f2c: это почти цвет основного текста (#1e1b3a), то есть
   * подзаголовок сознательно перестаёт быть «вторичным по цвету» и остаётся
   * вторичным только по кеглю и весу (18px/400 против 32px/800).
   *
   * ОТДЕЛЬНОЕ ЗНАЧЕНИЕ ДЛЯ ТЁМНОЙ ТЕМЫ ОБЯЗАТЕЛЬНО. #211f2c — тёмный цвет; на
   * тёмном фоне (--bg #14122b) он дал бы 1,3:1, то есть подзаголовок исчез бы
   * с экрана совсем. Ставим зеркальный светлый: #e9e6f4 — на полтона темнее
   * заголовка (--ink #f4f2fa), ровно как #211f2c на полтона светлее заголовка
   * в светлой теме. Роль сохраняется в обеих: «почти как заголовок, но не он».
   * Замер по пикселям рендера: 15,6:1 в светлой и 15,1:1 в тёмной (заголовок
   * для сравнения — 16,5:1 и 17,0:1).
   */
  --eh-sub-color: #211f2c;
}

[data-theme="dark"] .enhero { --eh-sub-color: #e9e6f4; }

.enhero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: var(--eh-fs-body);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .005em;
  box-shadow: var(--sh-md);
  white-space: nowrap;
}

/*
 * БЕЙДЖ НА ТЕЛЕФОНЕ: ПОДЖАТАЯ ГЕОМЕТРИЯ ПЛЮС ПЕРЕНОС КАК СТРАХОВКА.
 *
 * 19.08.2026 владелец поднял кегль бейджа до 18px и трижды правил текст;
 * итоговый — «Английский · занятия онлайн» / «Англійська · заняття онлайн».
 * На 360px колонке достаётся 313px, и при штатной геометрии пилюли
 * (padding-right 14px, зазор 8px) в одну строку укладывалась только
 * украинская редакция:
 *   нужно в одну строку: uk 307px — влезает, ru 316px — не хватает 3px.
 * Три пикселя, но при nowrap и overflow:clip у секции они означали бы
 * обрезку текста по краю экрана, а с переносом — второй этаж пилюли,
 * +18px высоты и лишние 18px, отнятые у фолда.
 *
 * Кегль и формулировка — решения владельца, поэтому 3px отыграны там, где
 * решения нет: правый паддинг 14 → 11px и зазор 8 → 6px. Это −5px, то есть
 * ru просит 311px при 313px доступных. Запас невелик, но детерминирован:
 * Manrope самохостится (assets/fonts/), метрики одинаковы на всех машинах,
 * а на 375px и шире колонка только шире.
 *
 * white-space:normal оставлен СОЗНАТЕЛЬНО, хотя перенос теперь не нужен: это
 * страховка на случай, когда woff2 не доехал и подставился метрический
 * фолбэк с другими ширинами глифов. Тогда пилюля станет двухэтажной, но
 * текст останется целым — обрезка по краю экрана хуже переноса.
 */
@media (max-width: 767.98px) {
  .enhero-badge {
    white-space: normal;
    align-items: flex-start;
    padding-right: 11px;
    gap: 6px;
  }
  .enhero-badge-en { margin-top: -1px; }
}

/*
 * ЗНАЧОК EN — НЕЙТРАЛЬНЫЙ КРУЖОК, А НЕ ЕЩЁ ОДНО КРАСНОЕ ПЯТНО.
 *
 * Был залит кнопочным кораллом --btn-primary-bg. По контрасту к нему претензий
 * нет (белый на #d6383e — 4,67:1), но по композиции есть: в столбик на телефоне
 * выстраивались четыре коралловых пятна — логотип шапки, этот значок, пилюля C1
 * и первичная кнопка со свечением. Акцентная роль обязана остаться у ОДНОГО
 * элемента — у кнопки. Поэтому значок собран из тех же нейтралей, что и сама
 * пилюля: светлая поверхность + основной текст. Пара --surface/--text
 * инвертируется вместе с темой сама, отдельного правила для тёмной не нужно.
 */
.enhero-badge-en {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .66rem;
  letter-spacing: .02em;
}

/*
 * КЕГЛЬ H1 — СОБСТВЕННАЯ КАЛИБРОВКА, ДВА ДИАПАЗОНА.
 *
 * Флаг .is-short из home-hero здесь неприменим: он включается только при пустом
 * суффиксе после выделенного слова, а тут маркер стоит в СЕРЕДИНЕ и суффикс
 * непустой. Поэтому кегль задан напрямую и разрезан по 1024px — там, где копи
 * перестаёт занимать всю ширину и уезжает в колонку 55%.
 *
 * Нижняя граница 1.5rem выбрана по фолду: заголовок «Научим говорить, а не
 * переводить в голове» (41 знак ru, 43 uk) на 360px укладывается в три строки,
 * четвёртая съела бы ~28px и вытолкнула кнопку за 560px. Про потолок широкого
 * диапазона — комментарий внутри самого медиазапроса ниже.
 *
 * text-wrap:balance ТОЛЬКО с 1024px. На телефоне он выравнивает строки по длине
 * и раскладывает 41 знак в четыре короткие вместо трёх плотных — тот же дефект,
 * что чинили в pages/home.css: на узком экране важнее высота, чем ровный край.
 */
.enhero-h1 {
  /* 10px, а не 12: бейдж и заголовок — один смысловой узел («что за курс» +
     «что обещаем»), и внутри узла отступ обязан быть заметно меньше, чем
     разрывы между узлами (22px, см. разбор ритма в блоке 2.1 ниже). */
  margin-top: 10px;
  font-family: var(--font-head);
  font-weight: 800;
  /* 32px при интерлиньяже 1.3 — значения владельца. Кегль фиксированный, без
     clamp: диапазон был нужен, пока заголовок обязан был влезать в три строки
     на 360px; при 32px он в любом случае занимает четыре, и «плавность» между
     360 и 767 только маскировала бы это. */
  font-size: var(--eh-fs-h1);
  line-height: 1.3;
  letter-spacing: -.025em;
  text-wrap: wrap;
  overflow-wrap: break-word;
}
/* Планшет и выше: геометрия заголовка возвращается к прежней. Ревизия 19.08
   сделана по мобильному макету и намеренно НЕ утягивает за собой широкие
   ширины — там у первого экрана две колонки, воздуха втрое больше, и на
   1440×900 у ряда кнопок остаётся всего ~50px запаса до сгиба. */
@media (min-width: 768px) {
  .enhero-h1 {
    margin-top: 12px;
    font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.1rem);
    line-height: 1.1;
  }
}
@media (min-width: 1024px) {
  .enhero-h1 {
    /* ОБЕ ГРАНИЦЫ ДИАПАЗОНА ПОСТАВЛЕНЫ ПО ЗАМЕРУ ЧИСЛА СТРОК, А НЕ НА ГЛАЗ.
       Макет требует двух строк, но двухколоночная раскладка отдаёт заголовку не
       всю ширину, а колонку в ~57%: 505px на 1024, 649 на 1280, 740 на 1440,
       795 на 1536. Замер (обе локали, кегль → строк):
         1024 → 36,2px → 3 строки (ru и uk)
         1280 → 43,2px → 2 строки ru, 3 uk
         1440 → 46,4px → 2 строки (ru и uk)
         1536 → 46,4px → 2 строки (ru и uk)
       Потолок 2.9rem: при 3.5rem даже на 1440 строка «Научим говорить,»
       занимала 645px из 740 и «а не» уже не входило — три строки.
       Пол 2rem: при 2.3rem (=45px на 1024) заголовок раскладывался на ЧЕТЫРЕ
       короткие строки. Три строки на 1024 и у украинского на 1280 оставлены
       сознательно: чтобы свести их к двум, кегль пришлось бы уронить до ~34px,
       то есть отказаться от «очень крупного H1» ради одной ширины. */
    font-size: clamp(2rem, .5rem + 2.75vw, 2.9rem);
    line-height: 1.06;
    /* Ширину заголовку задаёт сама колонка, а не мера в ch: у Unbounded 800
       знак «0» заметно шире средней буквы, и max-width:15ch резал строку
       раньше времени — на 1440 заголовок ложился в три строки вместо двух.
       balance при полной ширине колонки раскладывает его на две соразмерные. */
    text-wrap: balance;
  }
}

/*
 * МАРКЕР НА СЛОВЕ В СЕРЕДИНЕ СТРОКИ.
 * Заливка — тот же --btn-primary-bg, что у значка EN и у первичной кнопки: белый
 * на нём 4.67:1. Бренд-коралл здесь не годится по контрасту (2.6:1), и это не
 * формальность — слово внутри маркера несёт смысл заголовка.
 * box-decoration-break:clone обязателен: без него перенос маркера на новую
 * строку рвёт скругление и обрезает паддинг с одной стороны.
 * Паддинг в em, а не в px, — маркер обязан масштабироваться вместе с кеглем,
 * который здесь меняется втрое между 360 и 1536.
 */
.enhero-mark {
  padding: .04em .2em .1em;
  border-radius: 8px;
  background: var(--btn-primary-bg);
  color: var(--on-primary);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (min-width: 1024px) { .enhero-mark { border-radius: 12px; } }

.enhero-sub {
  /* 8px — самый тесный отступ экрана: подзаголовок раскрывает заголовок и
     обязан читаться его продолжением, а не следующим пунктом списка. */
  margin-top: 8px;
  color: var(--eh-sub-color);
  font-size: var(--eh-fs-body);
  line-height: 1.45;
  max-width: 46ch;
}
/* Планшет и выше — прежние значения первой редакции: 18px владельца сняты с
   мобильного вьюпорта, а здесь подзаголовок стоит в колонке 55% и растёт
   собственным диапазоном до 1.15rem. Заодно возвращаются прежние кегли
   бейджа и суммы: числа мобильного макета широкие ширины не касаются. */
@media (min-width: 768px) {
  .enhero-sub { font-size: 1.05rem; line-height: 1.5; margin-top: 16px; }
  .enhero-badge { font-size: .8rem; }
}
@media (min-width: 1024px) { .enhero-sub { font-size: 1.15rem; max-width: 42ch; } }

/* ============================================================
   3. ШКАЛА УРОВНЕЙ A1 → C1
   ============================================================ */

/*
 * Подпись шкалы — не отдельная строка под пилюлями, а четвёртый элемент того же
 * ряда: на широком экране она встаёт справа от пилюль (как на макете), на узком
 * переносится сама, обычной обёрткой flex. Порядок в DOM при этом один и тот же
 * на всех ширинах — ни order, ни абсолютного позиционирования.
 */
/*
 * 3.1. РИТМ ОТСТУПОВ НА ТЕЛЕФОНЕ: ЧЕТЫРЕ ГРУППЫ, А НЕ ДЕСЯТЬ СТРОК ПОДРЯД.
 *
 * Было (замер uk/360): 12 · 12 · 14 · 14 · 14 · 10 — то есть между ЛЮБЫМИ
 * двумя соседними блоками стоял примерно один и тот же отступ. При таком
 * ритме десять элементов читаются десятью равноправными строками, и глаз не
 * видит, где кончается оффер и начинается цена. Это и есть «мусорность»:
 * не лишние элементы, а отсутствие группировки (закон близости).
 *
 * Стало — два уровня отступа, разведённые больше чем вдвое:
 *   внутри группы  8–10px
 *   между группами 20–22px
 * Группы:
 *   1) ОФФЕР      бейдж → H1 → подзаголовок
 *   2) ПРОГРАММА  шкала A1→C1 → подпись CEFR
 *   3) ЦЕНА       сумма с подписью → строка скидки
 *   4) ДЕЙСТВИЕ   первичная кнопка → вторичная кнопка
 * Отступы заданы в БАЗЕ (mobile-first) и восстановлены к прежним значениям
 * с 768px там, где прежнее значение было другим: ревизия сделана по мобильному
 * макету, а на широких ширинах ряд кнопок стоит в 50px от сгиба (1440×900) и
 * под потолком карточки согласия (разбор в блоке 9.1) — двигать его нельзя.
 */
.enhero-scale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 22px;
}
@media (min-width: 768px) { .enhero-scale { margin-top: 14px; } }

.enhero-scale-track {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.enhero-step {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  /* Пилюли укрупнены по отдельной пометке владельца («крупнее», 19.08.2026):
     кегль 12,5 → 15px, паддинг 7/13 → 9/16. Стрелка между ними растёт вместе
     с ними (см. .enhero-scale-arrow svg ниже) — иначе связка «A1 → C1»
     рассыпается на две плашки и потерявшийся значок посередине. */
  padding: 9px 16px;
  border-radius: var(--r-pill);
  /* Старт шкалы — розовый тинт акцента (см. --eh-pill-a1-bg выше). Финиш
     переопределяет обе строки ниже, в .enhero-step--goal. */
  background: var(--eh-pill-a1-bg);
  border: 1px solid var(--eh-pill-a1-line);
  font-size: var(--eh-fs-note);
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
}
/*
 * ОБЕ ЧАСТИ ПИЛЮЛИ НАБРАНЫ ОДИНАКОВО (решение владельца 19.08.2026).
 *
 * Было: код уровня — Unbounded 800, подпись рядом — Manrope 500 и другим
 * кеглем. В пилюле высотой 30px это читалось как два разных шрифта, случайно
 * оказавшихся в одной плашке. Стало: обе части — Manrope одного веса и одного
 * размера, различие несёт только цвет подписи (--text-muted) и порядок слов.
 * letter-spacing у кода оставлен: «A1»/«C1» — прописные с цифрой, без него
 * пара выглядит слипшейся. Правило общее для светлой A1 и тёмной C1.
 */
.enhero-step b {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--eh-fs-note);
  letter-spacing: .01em;
}
.enhero-step > span { font-weight: 600; color: var(--text-muted); }

/*
 * ФИНИШ ШКАЛЫ — КОНТРАСТНАЯ, НО НЕЙТРАЛЬНАЯ ПИЛЮЛЯ.
 *
 * Был кнопочный коралл. Проблема не в контрасте (белый на #d6383e — 4,67:1),
 * а в том, что цель шкалы визуально звучала так же громко, как единственное
 * действие экрана: на телефоне коралловая пилюля C1 стоит ровно над коралловой
 * кнопкой «Бесплатный пробный урок» и отбирает у неё половину внимания.
 * Акцент оставлен кнопке, а C1 набрана максимальным НЕЙТРАЛЬНЫМ контрастом —
 * инверсной пилюлей: заливка цветом текста, текст цветом фона.
 *
 * Пара --ink/--bg переворачивается вместе с темой сама, поэтому отдельного
 * правила для тёмной не нужно и быть не должно: в светлой это почти чёрная
 * плашка с почти белой надписью, в тёмной — зеркально. Контраст в обеих
 * 14,9:1, то есть с запасом к AAA, а разница с обычной пилюлей A1
 * (surface-2 + рамка) остаётся максимально возможной — сильнее любого цвета.
 */
.enhero-step--goal {
  background: var(--ink);
  border-color: transparent;
  color: var(--bg);
}
/*
 * Подпись внутри пилюли НАСЛЕДУЕТ цвет, а не гасится прозрачностью.
 * Было rgba(255,255,255,.88) — и это ломалось дважды: в светлой теме белый с
 * альфой .88 на коралловой подложке давал 3.9:1, то есть ниже AA для текста
 * в 12,5px, а в тёмной подложка светлела и почти белый текст падал до 2:1.
 * Иерархию внутри пилюли держит начертание (код 800, подпись 500), цвет для
 * этого не нужен — тем более теперь, когда подложка нейтральная.
 */
.enhero-step--goal > span { color: inherit; }

.enhero-scale-arrow { flex: none; color: var(--text-muted); opacity: .7; }
.enhero-scale-arrow svg { width: 24px; height: 24px; }

.enhero-scale-note {
  font-size: var(--eh-fs-meta);
  line-height: 1.3;
  color: var(--text-muted);
  max-width: 22ch;
}

/* ============================================================
   4. ЦЕНОВОЙ БЛОК
   ============================================================ */

/*
 * НА ТЕЛЕФОНЕ БЛОК — ОДНА КОЛОНКА, С 768px — ДВЕ ЧАСТИ В РЯД.
 *
 * Владелец поставил метку условия ПОД ценой (мобильный макет 19.08.2026).
 * Прежняя раскладка «сумма слева, метки справа» на 360px всё равно не
 * помещалась и переносилась сама, но переносилась КАК ПОЛУЧИТСЯ; теперь
 * порядок задан явно. С 768px ширины хватает, и метки возвращаются вправо
 * от суммы с разделительной линией — эта раскладка на широких экранах
 * утверждена и не менялась.
 */
.enhero-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .enhero-price {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    margin-top: 22px;
  }
}

/*
 * КОЛОНКА ЦЕНЫ СВЕРХУ ВНИЗ: подпись «Стоимость курса (42 ч)» → ряд
 * «цена со скидкой + зачёркнутая базовая» → метка условия «−10%…».
 * Порядок задан владельцем 19.08.2026 и одинаков на всех ширинах: подпись
 * СНАЧАЛА называет, за что сумма, и только потом идёт сама сумма — так строка
 * читается утверждением, а не ценником с пояснением вдогонку.
 */
.enhero-price-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/*
 * ПОДПИСЬ НАД СУММОЙ НЕ ДОЛЖНА СЛИВАТЬСЯ С ПОДЗАГОЛОВКОМ.
 *
 * Над ней в потоке стоит подзаголовок в 18px того же нейтрального цвета, и
 * два текстовых блока подряд легко читаются одним абзацем. Разводим тремя
 * независимыми признаками сразу, чтобы хватило и на телефоне:
 *   · кегль 15px против 18px (шаг 1,2 — заметен);
 *   · вес 600 против 400 — подпись читается меткой, а не фразой;
 *   · между ними лежит целая группа «программа» (пилюли A1→C1) и разрыв
 *     в 20px, то есть физически это не соседние строки.
 * Прописных букв и разрядки здесь намеренно нет: на экране уже есть один
 * набор в верхнем регистре (значок EN), второй сделал бы шумно.
 */
.enhero-price-cap {
  font-size: var(--eh-fs-note);
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted);
}

/*
 * ДВЕ СУММЫ ВЫРОВНЕНЫ ПО ЦЕНТРУ, А НЕ ПО БАЗОВОЙ ЛИНИИ.
 *
 * Пометка владельца «center» на снимке. При baseline мелкая зачёркнутая сумма
 * садилась на базовую линию 24-пиксельной и прижималась к её низу: сверху у
 * строки в 12,5px оставалось ~11px пустоты, и пара читалась как «сумма и
 * что-то, упавшее ей под ноги». center ставит старую цену в оптический центр
 * новой — так их и читают как «было / стало».
 */
.enhero-price-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 9px;
}

/*
 * ЗАЧЁРКНУТАЯ БАЗОВАЯ ЦЕНА.
 *
 * Тег <s> несёт смысл «этой цены больше нет» (пояснение для скринридера —
 * в .sr-only рядом, см. разбор в паттерне). Цвет — общий нейтральный
 * --text-muted, тот же, что у всего вторичного текста экрана: делать её
 * бледнее «чтобы отличалась» нельзя, у неё та же норма AA, что у остального
 * мелкого текста (замер по пикселям рендера: 6,6:1 в светлой, 7,6:1 в тёмной).
 * Иерархию несут кегль (15 против 26) и линия зачёркивания, а не блёклость.
 * text-decoration-thickness задан явно: у Manrope дефолтная линия в этом
 * кегле тоньше волоса и на телефоне пропадает.
 */
.enhero-price-old {
  font-size: var(--eh-fs-note);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--text-muted) 70%, transparent);
  white-space: nowrap;
}

/*
 * СУММА ВСЕГДА МЕЛЬЧЕ ЗАГОЛОВКА — ИНАЧЕ ИЕРАРХИЯ ПЕРЕВЁРНУТА.
 *
 * Прежний диапазон clamp(1.65rem, 1.15rem + 2.2vw, 2.5rem) обгонял H1 на трёх
 * ширинах из восьми (замер, кегль суммы против кегля заголовка):
 *   360  → 26,4 против 24,7   — сумма крупнее заголовка
 *   768  → 35,2 против 33,6   — крупнее
 *   1024 → 40,0 против 36,2   — крупнее
 *   1280 → 40,0 против 43,2   — ок
 *   1440+→ 40,0 против 46,4   — ок
 * Причина в том, что диапазоны росли с разной скоростью и упирались в потолки
 * в разных точках. Здесь диапазон разрезан по той же границе 1024px, что и у
 * заголовка, и обе границы подобраны так, чтобы отношение «сумма / H1»
 * оставалось в коридоре 0,79–0,89 на всех восьми ширинах приёмки:
 *   360 и 480 → 26/32 = 0,81 · 768 → 27,1/32,8 = 0,83
 *   1024 → 32,3/36,2 = 0,89 · 1280 → 37,1/43,2 = 0,86 · 1440 → 37,6/46,4 = 0,81
 *   1536 → 37,6/46,4 = 0,81
 * Сумма остаётся крупнейшим элементом СВОЕЙ группы (следующий кегль в ней —
 * 15px), поэтому цена не теряет вес; она перестаёт спорить с заголовком.
 */
.enhero-price-sum {
  font-family: var(--font-head);
  font-weight: 800;
  /* tabular-nums: цифры одной ширины, иначе сумма дёргает соседнюю подпись при
     смене прайса и между локалями. */
  font-variant-numeric: tabular-nums;
  /* Телефон — фиксированные 26px. С 768px возвращается диапазон, и его
     границы подобраны по отношению к H1, см. таблицу выше. */
  font-size: var(--eh-fs-lead);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--text);
  white-space: nowrap;
}
@media (min-width: 768px) {
  .enhero-price-sum { font-size: clamp(1.5rem, .78rem + 1.9vw, 1.75rem); }
}
@media (min-width: 1024px) {
  .enhero-price-sum { font-size: clamp(1.9rem, .8rem + 1.9vw, 2.35rem); }
}

/* Класса .enhero-price-unit больше нет: подпись под суммой заменена подписью
   НАД суммой (.enhero-price-cap выше) — решение владельца 19.08.2026. */

/* Разделитель — вертикальная линия слева от скидок, ровно как на макете. На
   телефоне колонка одна, линия превратилась бы в шов посреди строки, поэтому
   там её нет: блоки разводит собственный отступ. */
.enhero-price-off {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
@media (min-width: 768px) {
  /* align-self:stretch — чтобы линия шла на всю высоту ценового блока, а не
     только на высоту двух строк скидок: иначе она читается обрывком, а не
     разделителем. */
  .enhero-price-off { align-self: stretch; justify-content: center; padding-left: 20px; border-left: 1px solid var(--line); }
}

/*
 * 1024–1279: ЦЕНА И СКИДКИ СТОПКОЙ, РАЗДЕЛИТЕЛЬ СНЯТ.
 * Ловушка этого диапазона в том, что колонка копи здесь УЖЕ, чем на планшете:
 * 505px против 692px на 768 — вёрстка ушла в две колонки, и ценовой ряд
 * перестаёт помещаться. Он честно переносился обёрткой, но border-left ехал
 * вместе со скидками на новую строку и превращался в короткую вертикальную
 * чёрточку слева от них — мусор, а не разделитель (замер на uk/1024, где
 * «−20% за 2 сходинки · оплата частинами» длиннее русского варианта).
 * Поэтому в этом диапазоне ценовой блок ведёт себя как на телефоне: стопкой и
 * без линии. Ровно тот же диапазон, в котором стопкой стоят и кнопки, — полоса
 * 1024–1279 целиком читается как «узкий десктоп».
 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .enhero-price { flex-direction: column; align-items: flex-start; gap: 8px; }
  .enhero-price-off { align-self: flex-start; padding-left: 0; border-left: 0; }
}

/*
 * МЕТКА УСЛОВИЯ: ТОЛЬКО ТЕКСТ, КОРАЛЛОВЫЙ, БЕЗ ГАЛОЧКИ (владелец, 19.08.2026).
 *
 * Цвет берём --badge-coral-text, а НЕ --primary и не --btn-primary-bg. Это
 * отдельный токен ровно для такого случая: затемнённый коралл #c9343a, который
 * на светлых подложках даёт 5,2:1 против 2,6:1 у бренд-коралла — то есть
 * бренд-цвет для текста в 15px здесь просто запрещён по AA. В тёмной теме
 * токен сам разворачивается в яркий #ff6b70 (5,96:1 на тёмном фоне).
 *
 * ПОЧЕМУ ЭТО НЕ СПОРИТ С КНОПКОЙ. Совпадает семейство цвета, но не вес пятна:
 * у кнопки коралловая ЗАЛИВКА площадью ~313×56px, у метки — 15-пиксельная
 * строка без подложки, тени и рамки. Единственным акцентом-действием кнопка
 * остаётся ещё и потому, что вокруг метки нет ничего кликабельного: она не
 * ссылка и курсор на ней не меняется.
 * Смысл при этом цветом не передаётся — его несёт сам текст «−10% при оплате
 * сразу», поэтому потеря цвета (дальтонизм, ч/б печать) ничего не ломает.
 */
.enhero-price-off li {
  font-size: var(--eh-fs-note);
  font-weight: 600;
  line-height: 1.3;
  color: var(--badge-coral-text);
}

/* ============================================================
   5. КНОПКИ ПЕРВИЧНОГО ДЕЙСТВИЯ
   ============================================================ */

.enhero-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

/* Радиус 14px вместо базовой пилюли — решение макета. Переопределяем только
   внутри секции, чтобы кнопки остальных страниц остались пилюлями. */
.enhero-cta .btn,
.enhero-bar-cta { border-radius: 14px; }

/* На телефоне кнопки во всю ширину и стопкой, с 560px — в ряд по содержимому.
   ПОРЯДОК ОБЪЯВЛЕНИЙ ЗДЕСЬ ЗНАЧИМ: у `.enhero-cta .btn` вне медиазапроса и
   внутри него одинаковая специфичность, поэтому базовое width:100% обязано
   стоять ДО медиазапроса — иначе оно перебьёт width:auto и на десктопе кнопки
   останутся стопкой во всю колонку (так и было в первой редакции файла). */
.enhero-cta .btn { width: 100%; min-height: 52px; }
@media (min-width: 560px) {
  .enhero-cta { flex-direction: row; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
  .enhero-cta .btn { width: auto; }
}
@media (min-width: 1024px) { .enhero-cta .btn { min-height: 58px; } }

/*
 * 1024–1279: КНОПКИ СТОПКОЙ, И ЭТО РЕШЕНИЕ, А НЕ КАПИТУЛЯЦИЯ.
 * В ряд они здесь не помещаются ни при какой правке паддингов: колонка копи —
 * 505px на 1024, а две кнопки занимают 319 + 242 + 12 = 573px (ru; украинский
 * «Безкоштовний пробний урок» ещё на ~30px длиннее). Ужать до 493px можно было
 * только паддингом 16px и кеглем 15px — то есть превратив крупные CTA макета в
 * мелкие. Вместо этого возвращаем на два разрешения мобильную раскладку:
 * стопка, обе кнопки одной ширины, ограничены 420px, чтобы не растягиваться на
 * всю колонку. С 1280px места хватает (658px против 573), и ряд возвращается.
 */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .enhero-cta { flex-direction: column; align-items: flex-start; }
  .enhero-cta .btn { width: 100%; max-width: 420px; }
}

/*
 * ТЕНЬ ВМЕСТО ОРЕОЛА.
 *
 * Было две тени: собственно тень и кольцо `0 0 0 8px` в 9% коралла. Кольцо
 * читается не как глубина, а как розовый ореол вокруг кнопки — на телефоне
 * оно раздувало и без того самый крупный элемент экрана ещё на 16px по
 * ширине и утяжеляло его настолько, что кнопка спорила с заголовком.
 * Оставлена одна мягкая тень: элемент по-прежнему приподнят над фоном, но
 * акцент делает ЦВЕТ ЗАЛИВКИ, а не свечение вокруг. Держим на кораллово-
 * красном канале, чтобы в тёмной теме тень не белела.
 */
.enhero-cta-main {
  box-shadow: 0 8px 18px color-mix(in srgb, var(--btn-primary-bg) 24%, transparent);
}
.enhero-cta-main:hover {
  box-shadow: 0 12px 24px color-mix(in srgb, var(--btn-primary-bg) 32%, transparent);
}
/* Глобальный :focus-visible заменяет box-shadow целиком — дублируем кольцо
   вместе с тенью, иначе фокус «съедает» акцент (та же логика, что у
   .btn-primary в base.css). */
.enhero-cta-main:focus-visible {
  box-shadow: var(--ring), 0 8px 18px color-mix(in srgb, var(--btn-primary-bg) 24%, transparent);
}
.enhero-cta-main svg { width: 20px; height: 20px; }

/*
 * СНОСКА ПОД КНОПКАМИ СНЯТА (решение владельца 19.08.2026).
 *
 * Строка «Без спама. Перезвоним в тот же день, в рабочее время» с иконкой щита
 * стояла только на телефоне (data-w="narrow") и вместе с ним уносила два
 * лишних сигнала: девятый кегль (11,84px) и второе зелёное пятно на экране —
 * иконка щита была окрашена в --green, хотя ничего «зелёного» по смыслу не
 * кодировала. Разметка удалена в patterns/english-hero.php, правил стилей
 * здесь больше нет; отступ между второй кнопкой и медиа-блоком задаёт
 * .enhero-media { margin-top }, висячего margin от снятой сноски не остаётся.
 * Тем же решением обещание «перезвоним в тот же день» снято и из подписи
 * модалки лид-формы этого экрана (.enhero-modal-sub) — но ТОЛЬКО здесь:
 * подписи первого экрана остальных хабов и финальной формы страницы живут
 * в своих паттернах (home-hero.php, home-lead-final.php) и не тронуты.
 */

/* ============================================================
   6. МЕДИА-КАРТОЧКА 4:5 И НАЛОЖЕНИЯ
   ============================================================ */

.enhero-media { position: relative; margin-top: 18px; }
/* Пока колонка одна, снимок растёт вместе с ней — и на планшете 708px ширины
   давал бы 885px высоты, то есть целый лишний экран под одну картинку.
   Ограничиваем и центрируем: на телефоне (до 480px) кадр и так не больше 441px,
   там ограничитель не нужен и не мешает.
   Верхняя граница диапазона обязательна: max-width медиа-колонки на десктопе
   задан выше, в блоке раскладки (460/500px), а этот блок в файле идёт ПОЗЖЕ —
   открытый min-width:480px перебил бы его на всех больших ширинах. */
@media (min-width: 480px) and (max-width: 1023.98px) {
  /* Центрируем именно justify-self, а НЕ margin-inline:auto. Авто-поля у
     grid-элемента отменяют растяжку и заставляют браузер считать его ширину по
     содержимому, а содержимое здесь — коробка с aspect-ratio без собственной
     ширины и два абсолютно позиционированных наложения. Итог был буквально
     нулевой: колонка схлопывалась в 35px, снимок исчезал, а карточка набора
     висела узкой полосой поверх текста (замер на 480px). */
  .enhero-media { width: 100%; max-width: 400px; justify-self: center; }
}
@media (min-width: 1024px) { .enhero-media { margin-top: 0; } }

/*
 * Пропорция задана контейнером, поэтому подмена заглушки на реальное фото не
 * двигает ни пикселя (CLS = 0): картинка приходит в готовую коробку и кроется
 * object-fit:cover. Ширину/высоту у <img> тоже проставляем — для браузеров,
 * которые считают резерв по атрибутам.
 */
.enhero-shot {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  background: #f4e7dc;
  box-shadow: var(--sh-lg);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

/* Заглушка: бежевый холст в тонкую диагональную полоску. Чисто декоративна —
   в разметке помечена aria-hidden, здесь только рисунок. Лежит ПОД картинкой,
   поэтому появление фото её просто закрывает. */
.enhero-shot-fill {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(30, 27, 58, .07) 0 2px,
      transparent 2px 13px);
}

.enhero-shot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
   * ЛЁГКОЕ ПОТЕПЛЕНИЕ КАДРА. Фон снимка — холодная сине-серая стена, а весь
   * первый экран собран на тёплой бежево-коралловой подложке; без правки фото
   * читается вклеенным из другого макета. Даём минимум: +4% насыщенности и
   * поворот тона на 4° в тёплую сторону. Больше нельзя — кожа немедленно
   * желтеет, а на портрете это заметнее любой стены. Фильтр дешёвый
   * (композитный, без layout и paint) и на LCP не влияет.
   */
  filter: saturate(1.04) hue-rotate(-4deg);
}

/*
 * ВУАЛЬ ПОД КАРТОЧКОЙ НАБОРА.
 *
 * Только нижние 42% кадра и только до 55% плотности в самом низу: под карточкой
 * лежит расфокусированный разворот учебника, и без вуали белая плашка на нём
 * рябит. Верхний край градиента прозрачный — до лица и до пилюли-цитаты
 * затемнение не доходит вовсе.
 * Плотность подобрана по замеру пикселей рендера (uk/360, полоса кадра под
 * карточкой, самый светлый её пиксель против белой заливки карточки):
 * без вуали 1,90:1 — край карточки на светлых пятнах учебника пропадал;
 * с вуалью 4,42:1 — карточка читается отдельным объектом. Выше поднимать
 * плотность нельзя: низ снимка уходит в чёрную штору и кадр теряет глубину.
 * Лежит НАД картинкой, но ПОД наложениями: .enhero-quote и .enhero-group
 * позиционированы и создают свой контекст наложения выше по DOM.
 */
.enhero-shot-scrim {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(26, 22, 46, 0) 0%,
    rgba(26, 22, 46, .22) 45%,
    rgba(26, 22, 46, .55) 100%);
}

/*
 * Бейдж-цитата: белая пилюля поверх снимка, сверху слева. На широком экране
 * слегка свешивается за левый край карточки — приём, который отделяет её от
 * фото и не даёт первому экрану читаться двумя прямоугольниками. Свес маленький
 * и внутрь .wrap, горизонтального скролла не даёт.
 */
.enhero-quote {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  width: fit-content;
  max-width: calc(100% - 28px);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 7px;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--sh-md);
  font-size: .78rem;
  line-height: 1.25;
}
.enhero-quote b {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: -.01em;
  color: var(--text);
}
.enhero-quote span { color: var(--text-muted); font-weight: 500; }
@media (min-width: 1024px) { .enhero-quote { top: 18px; left: -16px; right: auto; max-width: calc(100% + 16px); } }

/* Карточка набора: белая плашка с тенью в нижней части снимка. */
.enhero-group {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--sh-lg);
}
@media (min-width: 480px) { .enhero-group { left: 16px; right: 16px; bottom: 16px; padding: 14px 16px; } }

/* Точка-индикатор набора. Цветом информация НЕ передаётся: рядом стоит слово
   «Идёт набор», точка лишь усиливает его. Пульсация — только там, где движение
   разрешено (блок @media в конце файла). */
.enhero-group-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent);
}

.enhero-group-txt {
  flex: 1 1 60%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.enhero-group-txt b {
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
}
.enhero-group-txt > span {
  font-size: var(--eh-fs-meta);
  line-height: 1.3;
  color: var(--text-muted);
}

.enhero-group-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Тач-цель 44px по высоте набирается паддингом: сама надпись мелкая, но
     нажимаемая область обязана быть полноценной (WCAG 2.5.5). */
  min-height: 44px;
  padding-inline: 2px;
  font-size: .8rem;
  font-weight: 800;
  color: var(--badge-coral-text);
  white-space: nowrap;
  transition: color .16s ease, transform .16s ease;
}
.enhero-group-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
.enhero-group-link:hover { color: var(--primary-hover); }
.enhero-group-link:hover svg { transform: translateX(3px); }
.enhero-group-link:focus-visible { box-shadow: var(--ring); border-radius: 8px; }

/* ============================================================
   7. ЛИПКАЯ НИЖНЯЯ ПАНЕЛЬ (ТОЛЬКО ТЕЛЕФОН)
   ============================================================ */

/*
 * Панель существует ТОЛЬКО ниже 768px и ТОЛЬКО на этой странице. Резерв высоты
 * висит на body через :has() — фиксированный элемент обязан не перекрывать
 * контент, иначе подвал уезжает под панель (правило fixed-element-offset).
 * Резервируем всегда, а не в момент показа: иначе появление панели дёргало бы
 * страницу на всю её высоту.
 */
.enhero-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(30, 27, 58, .1);
  /* Скрыта до прокрутки первого экрана; класс ставит JS. Без JS не показывается
     вовсе и ничему не мешает — оба действия панели продублированы кнопками в
     самом первом экране. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity .22s ease, transform .26s cubic-bezier(.22, 1, .36, 1), visibility .26s;
}
.enhero-bar.is-visible { opacity: 1; visibility: visible; transform: none; }

.enhero-bar-inner { display: flex; align-items: center; gap: 10px; }

.enhero-bar-msg {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  transition: transform .16s ease, border-color .16s ease, color .16s ease;
}
.enhero-bar-msg svg { width: 22px; height: 22px; }
.enhero-bar-msg:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.enhero-bar-msg:focus-visible { box-shadow: var(--ring); }

.enhero-bar-cta { flex: 1 1 auto; min-height: 50px; font-size: .95rem; }

@media (min-width: 768px) { .enhero-bar { display: none; } }

/* Резерв под панель + подъём плавающих кнопок темы и «Наверх», которые в теме
   стоят в левом нижнем углу и иначе оказались бы под ней. Оба правила заскоплены
   наличием .enhero-bar, то есть действуют только на этой странице. */
@media (max-width: 767.98px) {
  body:has(.enhero-bar) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body:has(.enhero-bar) .to-top,
  body:has(.enhero-bar) .theme-fab { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 72px); }
}

/* ============================================================
   8. МОДАЛКА ЛИД-ФОРМЫ
   ============================================================ */

/*
 * z-index 120 — выше всей шкалы темы: шапка 50, дропдауны 60, плавающие кнопки
 * 80, мобильное оффканвас-меню 100.
 * Скрытие через visibility/opacity, а не display:none: Fluent Forms и виджет
 * телефона собирают разметку по реальным габаритам, которых у display:none нет.
 * Из таб-порядка и дерева доступности visibility:hidden узел убирает так же
 * надёжно, плюс в разметке стоит inert (его снимает JS при открытии).
 */
.enhero-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s;
}
.enhero-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

/* Подложка размывает фон — это указание «фон отключён, кликом сюда закрываем»,
   а не украшение. Плотность 55% та же, что у мобильного оффканваса. */
.enhero-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 43, .55);
  backdrop-filter: blur(4px);
}

.enhero-modal-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: min(92dvh, 860px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Нижний отступ 28px, а не 24: со снятием футнота «Без спама…» кнопка
     отправки стала последним элементом карточки, и прежние 24px под ней
     читались обрезкой, а не полем. Сверху заголовок отбит теми же 22px —
     карточка получилась зрительно уравновешенной. */
  padding: 22px 20px 28px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
  transform: translateY(14px) scale(.97);
  transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}
.enhero-modal.is-open .enhero-modal-card { transform: none; }
@media (min-width: 560px) { .enhero-modal-card { padding: 26px 26px 28px; } }

/*
 * ШАПКА МОДАЛКИ ЖИВЁТ ПО ТЕМ ЖЕ ПРАВИЛАМ, ЧТО И ПЕРВЫЙ ЭКРАН.
 *
 * Модалка открывается ровно в тот момент, когда человек решился оставить
 * заявку, — и до ревизии 19.08 он попадал будто на другой сайт: свои кегли
 * (.68 / 1.25 / .86rem), свой акцентный цвет у плашки, свой ритм отступов.
 * Ниже всё сведено к тем же трём вещам, что на экране:
 *   · КЕГЛИ — только ступени общей шкалы: 26px заголовок (--eh-fs-lead),
 *     15px подпись (--eh-fs-note), 12,5px плашка (--eh-fs-meta). Промежуточных
 *     «почти таких же» размеров не осталось;
 *   · ЦВЕТ — описание тем же почти чёрным --eh-sub-color, что подзаголовок
 *     экрана (в тёмной теме он сам разворачивается в светлый);
 *   · РИТМ — внутри группы 8px, между шапкой и формой 22px, то есть тот же
 *     принцип «разрыв между группами заметно больше, чем внутри».
 * Разметку самой формы (Fluent Forms) правило не трогает вовсе.
 */
/*
 * padding-right 52px, а не 44: столько занимает кнопка закрытия (44px) плюс
 * воздух. Пока над заголовком стояла плашка «Бесплатно · 60 минут», первая
 * строка заголовка начиналась ниже крестика и упиралась в него только краем
 * коробки; со снятием плашки заголовок стал ПЕРВЫМ элементом шапки, и его
 * первая строка идёт вровень с крестиком. При 44px между краем текстовой
 * коробки и кнопкой оставалось 4px — формально не наезд, но на 360px, где
 * заголовок ложится в три строки, читалось прижатым.
 */
.enhero-modal-head { position: relative; padding-right: 52px; margin-bottom: 22px; }

/* Правил .enhero-modal-kicker здесь больше нет: плашка «Бесплатно · 60 минут»
   снята из разметки владельцем 19.08.2026 как дубль надписи на кнопке. */

.enhero-modal-title {
  font-family: var(--font-head);
  font-size: var(--eh-fs-lead);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.enhero-modal-sub {
  margin-top: 8px;
  font-size: var(--eh-fs-note);
  line-height: 1.45;
  color: var(--eh-sub-color);
}

.enhero-modal-close {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.enhero-modal-close svg { width: 19px; height: 19px; }
.enhero-modal-close:hover { color: var(--text); border-color: var(--primary); background: var(--surface-2); }
.enhero-modal-close:focus-visible { box-shadow: var(--ring); }

/* ============================================================
   9. ТЁМНАЯ ТЕМА, ДВИЖЕНИЕ
   ============================================================ */

/*
 * Почти всё переключается само: цвета берутся алиасами из tokens.css. Правим
 * только три места, где светлая логика не переносится буквально.
 */
[data-theme="dark"] .enhero-badge {
  /* В тёмной теме --ink светлый (это цвет ТЕКСТА), поэтому «почти чёрная»
     пилюля собирается из поверхности и рамки, а не из --ink. */
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--line);
  padding-block: 4px;
}
[data-theme="dark"] .enhero-shot { background: #2a2447; }
[data-theme="dark"] .enhero-shot-fill { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 13px); }
[data-theme="dark"] .enhero-bar { box-shadow: 0 -8px 24px rgba(0, 0, 0, .45); }
[data-theme="dark"] .enhero::before { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 14px); }

/*
 * ДВИЖЕНИЕ — ТОЛЬКО ТАМ, ГДЕ ОНО ЧТО-ТО ЗНАЧИТ, И ТОЛЬКО ПО СОГЛАСИЮ.
 * H1, подзаголовок, кнопки и снимок НЕ анимируются намеренно: снимок — будущий
 * LCP-элемент, а заголовок — сегодняшний, и анимация появления откладывает их
 * отрисовку. Двигаются только надстройки поверх снимка (они приезжают чуть
 * позже и объясняют, что это «живая» карточка) и пульс точки набора.
 */
@media (prefers-reduced-motion: no-preference) {
  .enhero-quote,
  .enhero-group {
    animation: enhero-rise .5s cubic-bezier(.22, 1, .36, 1) both;
  }
  .enhero-quote { animation-delay: .12s; }
  .enhero-group { animation-delay: .2s; }

  .enhero-group-dot { animation: enhero-pulse 2.4s ease-out infinite; }
}

@keyframes enhero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes enhero-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 42%, transparent); }
  70% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--green) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); }
}

@media print {
  .enhero-bar,
  .enhero-modal { display: none !important; }
}

/* ============================================================
   9. БАННЕР СОГЛАСИЯ (Complianz) — КАЛИБРОВКА ПОД ЭТОТ ПЕРВЫЙ ЭКРАН
   ============================================================
   Геометрия баннера живёт в base.css и откалибрована по ЛИД-ФОРМЕ первого
   экрана: три режима подачи выбраны так, чтобы не накрыть её кнопку отправки.
   На этом хабе формы в первом экране нет, зато есть то, чего не было раньше, —
   ряд CTA-кнопок в середине левой колонки и липкая нижняя панель. Ниже правки
   ровно под эти два узла. Всё заскоплено `body:has(.enhero)`, то есть действует
   ТОЛЬКО на хабе английского; польский, немецкий, испанский и французский
   получают base.css без единого изменения.

   ЧТО ПРОВЕРЕНО И ЧТО НЕ ТРОГАЕМ (замеры 19.08.2026, ru-редакция баннера
   317 знаков, https://easy-peasy.school/english/):
   · Режим ВЕРХНЕЙ ПОЛОСЫ (>=768px ширины и >=900px высоты) исправен как есть:
     резерв body{padding-top} ничего не перекрывает, а первичный CTA остаётся
     в первом экране на самом низком вьюпорте режима — 1440x900 даёт низ ряда
     кнопок на y=847 при 900 доступных. 1280x900 → 819, 1920x1080 → 847,
     1024x1366 → 979, 768x1024 → 811. Ни одного правила этого режима не
     переопределяем.
   · Режим НИЖНЕГО ЛИСТА (<768px) оставлен как есть по существу: лист и правда
     ложится на кнопки первого экрана (390x844: лист от y=388, кнопки 448-568),
     но ровно так же он ложится на лид-форму четырёх остальных хабов (360x640:
     форма 275-564 под листом от 184). Это общий для всего сайта перекос старой
     калибровки, а не следствие нового экрана: чинить его точечно здесь значило
     бы развести пять хабов по поведению. Вынесено владельцу отдельной задачей.
   ============================================================ */

/*
 * 9.1. РЕЖИМ КАРТОЧКИ (>=768px ширины при высоте <900px) — карточка
 *      поднимается под крошки вместо вертикального центра.
 *
 * ПОЧЕМУ. Карточка base.css стоит по центру экрана слева именно потому, что у
 * СТАРОГО первого экрана CTA-кнопки лежали ниже сгиба (y=863 при vh=768) и
 * центр был безопасен. Здесь формы нет, экран короче, и ряд кнопок поднялся
 * в середину: замеры показывают перекрытие почти во всём диапазоне режима —
 * 768x800 (кнопки 515-571 против карточки 190-610), 900x768, 900x864,
 * 1000x800, 1199x800, 1200x800, 1024x899, 1440x899. Перекрывать ИНТЕРАКТИВНЫЙ
 * элемент нельзя — ни по конверсии, ни по WCAG 2.1 §2.4.11 Focus Not Obscured;
 * зато лежать на тексте (бейдж, H1, подзаголовок, шкала, цена) карточке можно,
 * этот принцип base.css мы и сохраняем.
 *
 * ГЕОМЕТРИЯ. Верх 160px — это низ крошек (y=151 при шапке 115px) плюс воздух:
 * крошки — ссылки, накрывать их тоже нельзя. Высота ограничена так, чтобы низ
 * карточки не доставал до САМОГО ВЫСОКОГО положения ряда кнопок в своей полосе
 * ширин. Полосы две, потому что на 1024px hero переходит в две колонки и ряд
 * кнопок опускается почти на сотню пикселей:
 *   768-1023px  → кнопки от y=515, потолок 336 → низ 496, запас 19px;
 *   >=1024px    → кнопки от y=592 (1200x800, минимум по замерам), потолок 400
 *                 → низ 560, запас 32px.
 * dvh-составляющая потолка (56/62) страхует совсем низкие окна: при vh=600 она
 * сама срезает карточку до 336/372, и та остаётся в экране целиком.
 *
 * ЦЕНА РЕШЕНИЯ — ЧЕСТНО. На 768-1023px карточка становится на 84px ниже, то
 * есть внутренний скролл .cmplz-body начинается раньше. Он там и без нас уже
 * есть (замер: 768x800 — 195px текста в 108px окна, 900x800 — 152 в 107), так
 * что режим карточки и раньше не показывал весь текст сразу; на >=1024px
 * потолок 400 не срабатывает вовсе — фактическая высота карточки 391-392.
 * Анимация переключена на общий cc-in: cc-in-side возит карточку за
 * translateY(-50%), которого здесь больше нет, а cc-in-top объявлен ВНУТРИ
 * медиазапроса верхней полосы и в этом диапазоне недоступен.
 */
@media (min-width: 768px) and (max-height: 899.98px) {
  body:has(.enhero) #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show {
    inset: 160px auto auto calc(max(18px, env(safe-area-inset-left)) + 70px) !important;
    transform: none;
    max-height: min(56dvh, 336px) !important;
    animation-name: cc-in;
  }
}

@media (min-width: 1024px) and (max-height: 899.98px) {
  body:has(.enhero) #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show {
    max-height: min(62dvh, 400px) !important;
  }
}

/*
 * 9.2. НИЖНИЙ ЛИСТ И ЛИПКАЯ ПАНЕЛЬ — не спорим за одну и ту же кромку.
 *
 * Оба узла position:fixed bottom:0 во всю ширину. Лист согласия печатается с
 * z-index 99999 и накрывает панель ЦЕЛИКОМ (замер 390x844: панель 773-844,
 * лист 388-844, elementFromPoint в центре кнопки панели возвращает узел
 * Complianz). При этом панель остаётся visibility:visible и в порядке
 * табуляции — то есть фокус уезжает под лист, а это ровно WCAG 2.1 §2.4.11
 * Focus Not Obscured. base.css гасит по той же причине .theme-fab и .to-top;
 * панель появилась позже, поэтому в тот список не попала.
 * Гасим на время показа листа: согласие обязано отвечаться первым, а после
 * ответа лист получает .cmplz-dismissed, правило перестаёт действовать, и
 * панель возвращается сама. Плашка чата это правило видит и трактует верно:
 * подъём над панелью считается по вычисленной visibility (см.
 * eps_chat_widget_lift_selector(), inc/chat-widget.php), поэтому пока лист
 * согласия наверху и панель погашена, плашка стоит на своём обычном месте,
 * а поднимается только вместе с вернувшейся панелью.
 */
@media (max-width: 767.98px) {
  body:has(.enhero):has(#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show) .enhero-bar {
    visibility: hidden;
  }
}