/* ============================================================================
   ЕГЭЛЭНД · Landing System v0.2 — core.css
   Одно ядро на все посадочные поддомена. Правки — только здесь, не в странице.
   Офлайн, без CDN. Шрифты — fonts.css рядом. Гайд с описаниями — system.html.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* Нейтраль — снята пипеткой с макета дизайнеров */
  --page:#ffffff;
  --surface:#f3f4f4;      /* карточка — основная поверхность */
  --surface-2:#e9eaea;    /* вложенный блок, hover */
  --line:#e4e5e5;
  --ink:#000000;          /* заголовки */
  --ink-2:#616262;        /* текст */
  --ink-3:#6a6b6b;        /* подписи, легал. Ступени: #9a9b9b (2.79) → #767777 (4.49) → #747575
                             (4.62 на белом, но 3.83 на вложенном блоке). Считать надо по САМОЙ
                             светлой поверхности применения, а не по странице: теперь 5.35 на белом
                             и 4.43 на самой светлой из остальных. */
  --tag:#202020;          /* чёрная пилюля-тег, круглая стрелка */
  --on-dark:#ffffff;

  /* ─── Семантическая палитра. Цвет = роль, а не украшение.
         Роли одинаковы на всех страницах — это и держит семейство. */
  /* Бренд затемнён относительно макета (#5d78db): белый текст на нём давал 4.06
     при пороге 4.5. #5470d4 даёт 4.52, на глаз неотличим. Решение владельца 20.08 —
     единственное расхождение палитры с макетом, дизайнерам сказать. */
  --brand:#5470d4; --brand-2:#748ee9; --brand-pale:#eef1fd; --brand-deep:#2f3f8f; /* бренд, CTA, ссылки */
  --proc:#8b6cf0;  --proc-pale:#f0edff;  --proc-deep:#4b2fa0;  /* процесс: шаги, «сейчас идёт» */
  --done:#12b46a;  --done-pale:#d4fae6;  --done-deep:#0a6b40;  /* результат: план, «получите» */
  --warm:#fd9b65;  --warm-pale:#ffeade;  --warm-deep:#a34a19;  /* люди: преподаватели, отзывы */
  --hot:#f2605d;   --hot-pale:#ffe4e3;   --hot-deep:#a32a27;   /* срочность: дедлайн, места */
  --sun:#e0ca01;   --sun-pale:#fdf6cf;   --sun-deep:#7a6c00;   /* награда: бонус, скидка, приз */
  --mint:#2ae881;         /* только мелкие пилюли-статусы: «Онлайн», «Бесплатно» */
  --stripe:#b6a4ff;       /* диагональная полоса-разделитель */

  /* Акцент страницы — на него настроены маркер, крупные цифры, вторичный CTA.
     По умолчанию бренд. Меняется на <body data-accent="proc|done|warm|hot|sun">. */
  --a:#5470d4; --a-pale:#eef1fd; --a-deep:#2f3f8f; --a-on:#fff;

  /* Контрастная поверхность (квиз, чёрная карточка, рамка экрана) */
  --contrast:#000000; --on-contrast:#ffffff;
  /* «Бумага» полей и опций — не инвертируется в ночной теме */
  /* --paper-hint было #9a9b9b — 2.79 на белом поле, то самое значение, которое
     забраковали для --ink-3 двумя строками выше и почему-то оставили здесь. */
  --paper:#ffffff; --paper-ink:#000000; --paper-hint:#6a6b6b;

  /* Тетрадь (.tex-paper). Нейтраль, НЕ роль: бумага тёплая, сетка холодная —
     этим тетрадь и отличается от бланка. Раньше подложка и линии брались
     из акцента, и синий интерфейс сливался с синей фактурой. */
  /* Линии полупрозрачные, а не плотные: фактура должна читаться фоном, а не сеткой
     поверх содержимого. Плотный #dde2ee выделялся сильнее, чем нужно. */
  --paper-bg:#f9f6ec; --paper-line:rgba(88,116,176,.15); --paper-margin:rgba(0,0,0,.15);
  /* Контур невыбранного контрола. НЕ --line: та рассчитана на разделители,
     на бумаге давала 1.17 при пороге 3.0 для нетекстовых элементов. */
  --control:#7c8089;
  --paper-card:#ffffff;   /* карточки и чипы на бумаге — белые, чтобы не спорить с сеткой */
  --paper-2:#eceadf;      /* вложенный блок и hover на бумаге */
  --paper-edge:#e2ded0;   /* разделители на бумаге: теплее общего --line */

  /* Градиент — ТОЛЬКО плашка приёма «выход за край» (.rise__plate).
     Собирается из роли --rise-c, отдельных градиент-токенов не держим. */

  /* Радиусы */
  /* Сверено по Figma API с фреймом 2136143177: крупные карточки 40, не 28.
     Прежние 28/20 были сняты пипеткой со скриншота и занижены. */
  --r-xl:40px; --r-lg:24px; --r-md:16px; --r-sm:10px; --r-pill:999px;

  /* Ритм. Шаг 4px */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --gap:20px;        /* между карточками. Замер эталона 348:25384: 19.4 / 19.8 / 20.1 */
  --shell:1240px;    /* контейнер; в макете контентная колонка 1200 */

  /* Типографика. Модульная шкала ≈1.27 */
  --f-display:'Onest', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-text:'Golos Text', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-xs:13px; --t-sm:15px; --t-md:17px; --t-lg:21px;
  --t-h3:clamp(18px,2.2vw,22px);
  --t-h2:clamp(28px,3.6vw,44px);
  --t-h1:clamp(32px,5vw,60px);
  --t-hero:clamp(38px,7vw,92px);   /* только центрированный герой-афиша */
  --t-num:clamp(38px,5vw,60px);

  --tex:#e4e5e5;
  --dur:.16s; --ease:cubic-bezier(.2,.7,.3,1);
}

/* Акцент страницы */
[data-accent="brand"]{--a:#5470d4;--a-pale:#eef1fd;--a-deep:#2f3f8f;--a-on:#fff}
[data-accent="proc"] {--a:#8b6cf0;--a-pale:#f0edff;--a-deep:#4b2fa0;--a-on:#fff}
[data-accent="done"] {--a:#12b46a;--a-pale:#d4fae6;--a-deep:#0a6b40;--a-on:#fff}
[data-accent="warm"] {--a:#fd9b65;--a-pale:#ffeade;--a-deep:#a34a19;--a-on:#fff}
[data-accent="hot"]  {--a:#f2605d;--a-pale:#ffe4e3;--a-deep:#a32a27;--a-on:#fff}
[data-accent="sun"]  {--a:#e0ca01;--a-pale:#fdf6cf;--a-deep:#7a6c00;--a-on:#000}

/* ------------------------------------------------------------ 2. ТЁМНАЯ ТЕМА */
/* Тёмная — ДЕТСКАЯ (средняя школа 6–9, инфлюенс-трафик). Светлая — РОДИТЕЛЬСКАЯ.
   Это не «день / ночь», а два читателя: в 6–8 решает родитель, ребёнок соучастник.

   Акцент — мята #2ae881, не кислотный лайм. Лайм по чернильному это буквально
   формула ОГЭ/ЕГЭ-лендов (#181818 + свой кислотный акцент у преподавателя),
   а СШ — другой юнит: там ставка и срок, здесь прогресс и привычка.
   Отличие от ОГЭ держим ФОРМАМИ (клетка, выход за край, скругление 40,
   заголовки без капслока и без Druk), а не насыщенностью палитры.

   Тот же набор токенов включает класс .slab — тёмное полотно внутри светлой
   страницы. Поэтому селектор двойной: тема целиком ИЛИ отдельный блок. */
[data-theme="night"],.slab,.kid-ink{
  --page:#14151c; --surface:#1e202b; --surface-2:#272a37; --line:#31344a;
  --ink:#f5f6fa; --ink-2:#a2a8bb; --ink-3:#8d93a6; --tag:#f5f6fa; --on-dark:#14151c;
  --contrast:#1e202b; --on-contrast:#f5f6fa; --tex:#31344a; --stripe:#3a2f66;
  --a:#2ae881; --a-pale:#12261c; --a-deep:#2ae881; --a-on:#08130c;
  --proc-pale:#1c1a2e; --done-pale:#12261c; --warm-pale:#2a1c12; --hot-pale:#2a1414; --sun-pale:#2a2606;
  --proc-deep:#b9a5ff; --done-deep:#2ae881; --warm-deep:#ffb98a; --hot-deep:#ff8f8c; --sun-deep:#f5d90a;
  --sun:#f5d90a;
  --mint:#2ae881;
  /* Тетрадь в тёмном: та же фактура, другая основа. Блок чуть светлее страницы,
     чтобы читался как блок, линии белые на 6% — как на полотне. */
  --paper-bg:#1e202b; --paper-line:rgba(255,255,255,.06); --paper-margin:rgba(255,255,255,.14);
  --control:#7b8298;
  --paper-card:#272a37; --paper-2:#313547; --paper-edge:#343850;
}
/* Тема применима к любому контейнеру, не только к body */
[data-theme="night"]{color:var(--ink); background-color:var(--page)}
[data-theme="night"] body{line-height:1.58}
/* Тёмное на тёмном не видно: главная кнопка становится акцентной */
[data-theme="night"] .btn--primary,.slab .btn--primary,.kid-ink .btn--primary{background:var(--a);color:var(--a-on)}
[data-theme="night"] .card,.slab .card{border:1px solid var(--line)}

/* ---------------------------------------- 2.2 ТОЧЕЧНОЕ ТЁМНОЕ (.kid-ink)
   Детский слой держится НЕ только полотном. Полотно — сильный ход и потому
   редкий: правило ритма (3.75) разрешает два-три тёмных экрана подряд, и после
   него страница обязана посветлеть. Если других носителей нет, детский ленд
   становится неотличим от родительского.

   .kid-ink — та же детская поверхность, но размером с объект, а не с экран:
   плитка с цифрой, карточка, чип, тело портрета. Тёмное приходит точками
   внутри светлых блоков, и «тёмных экранов подряд» при этом ноль.

   Клетки здесь нет намеренно: фактура принадлежит полотну. Две сетки рядом
   на одной странице перестают быть приёмом (правило «не больше двух клеток»). */
.kid-ink{background:var(--page);color:var(--ink);border-radius:var(--r-xl)}
.kid-ink h1,.kid-ink h2,.kid-ink h3,.kid-ink b{color:var(--ink)}
.kid-ink p,.kid-ink span,.kid-ink .sub,.kid-ink .sub-sm{color:var(--ink-2)}
/* Чип на светлой странице, но детский: тёмная пилюля с мятным значением.
   Двойной класс в селекторе обязателен: .chip объявлен ниже по файлу и при
   равной специфичности перебивал фон — чип оставался светлым, а мятная цифра
   ложилась на #f3f4f4 и давала контраст 1.47. */
.chip.chip--ink{background:#1e202b;color:#f5f6fa}
.chip.chip--ink b{color:#2ae881;font-weight:800}

/* ------------------------------------------------ 2.1 ТЁМНАЯ ПОЛОСА
   Секция во всю ширину на чернильном фоне — контраст между светлыми частями.
   Со светлой клеткой поверх (.band--tex) это третий тон приёма 3.6:
   линии белые на 6%, шаг тот же 26 px. Единственное, что уцелело
   из подростковой пересборки 20.08 — остальное откатили. */
.band{background:var(--contrast);color:var(--on-contrast);padding:var(--s8) 0;position:relative}
.band h1,.band h2,.band h3{color:var(--on-contrast)}
.band p,.band .sub{color:var(--on-contrast);opacity:.72}
.band .card{background:#242424}
.band--tex{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                           linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
           background-size:26px 26px}

/* ------------------------------------------------------------------ 3. BASE */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-text);font-size:var(--t-md);line-height:1.5;
     background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--a-deep)}
::selection{background:var(--a-pale);color:var(--a-deep)}
:focus-visible{outline:3px solid var(--a);outline-offset:2px;border-radius:var(--r-sm)}
/* Внутри залитой карточки ринг цвета --a совпал бы с её фоном */
.card--solid :focus-visible,.quiz--accent :focus-visible,.chain__i--now :focus-visible{outline-color:var(--contrast)}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--s3)}
.stack > * + *{margin-top:var(--gap)}

h1,h2,h3,.num,.hero-title{font-family:var(--f-display);letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
h1{font-size:var(--t-h1);font-weight:900}
h2{font-size:var(--t-h2);font-weight:800}
h3{font-size:var(--t-h3);font-weight:800;line-height:1.2;letter-spacing:-.01em}
p{max-width:66ch}
.sub{font-size:var(--t-md);color:var(--ink-2);max-width:60ch}
.sub-sm{font-size:var(--t-sm);color:var(--ink-2)}
.lead{font-size:var(--t-lg);line-height:1.35}
.legal{font-size:12px;line-height:1.45;color:var(--ink-3)}
/* Чекбокс согласия 152-ФЗ. Раньше был в банах 2.4 («снижает доходимость, хватает текста») —
   решение владельца 20.08 отменено под требование закона: явное действие обязательно,
   текста под кнопкой уже не достаточно. Не выбран по умолчанию. */
/* Тач-зона ряда — 44px, чекбокс 24px. Замер на мобильном: при 18px и ссылке
   ВНУТРИ лейбла 41–51% его площади уводила на внешнюю политику, и центр обеих
   строк попадал именно в ссылку — родитель целится в середину, как в любом
   чекбоксе, и уезжает с сайта без галочки. Ссылка вынесена из лейбла отдельной
   строкой, внутри остаётся только текст согласия. */
.agree{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:var(--t-sm);
  color:var(--ink-2);margin:var(--s3) 0 var(--s4);min-height:44px}
.agree input{width:24px;height:24px;flex:none;accent-color:var(--a);cursor:pointer}
.agree a{color:inherit;text-decoration:underline}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* --------------------------------------------------------------- 4. ПРИЁМЫ */

/* 4.1 Маркер — подсветка одной фразы в заголовке */
/* Высота подсветки задана явно, а не паддингом. С паддингом фон занимал 1.4em
   при интерлиньяже заголовка 1.04 — полоса налезала на выносные буквы строки выше
   и срезала хвосты «р», «у», «д». Теперь полоса ниже строки и в line-box помещается. */
.mark{display:inline;color:var(--a-deep);padding:0 .28em;
      background:linear-gradient(var(--a-pale),var(--a-pale)) no-repeat;
      background-size:100% .96em;background-position:0 .18em;
      box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mark--hard{color:var(--a-on);background:linear-gradient(var(--a),var(--a)) no-repeat;
      background-size:100% .96em;background-position:0 .18em}

/* 4.2 Цифра */
.num{display:block;font-size:var(--t-num);font-weight:900;color:var(--a);
     font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:.95;white-space:nowrap}
.num--ink{color:var(--ink)}
.num--long{font-size:clamp(28px,3.6vw,44px)}
.num-cap{display:block;font-size:var(--t-sm);color:var(--ink-2);margin-top:var(--s2);max-width:26ch}

/* 4.3 Стикер-плитка */
.sticker{width:64px;height:64px;flex:none;border-radius:var(--r-md);display:flex;align-items:center;
         justify-content:center;background:var(--a-pale);color:var(--a-deep)}
.sticker svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sticker--sm{width:40px;height:40px;border-radius:var(--r-sm)}
.sticker--sm svg{width:19px;height:19px}
.sticker--solid{background:var(--a);color:var(--a-on)}
.sticker--tilt{transform:rotate(-8deg)}
.sticker--tilt-r{transform:rotate(9deg)}

/* 4.4 Диагональная полоса — разделитель смысловых частей */
.stripe{height:64px;background:repeating-linear-gradient(114deg,var(--stripe) 0 26px,transparent 26px 52px)}
.stripe--thin{height:36px}

/* 4.5 Чёрная пилюля-тег */
.tag{display:inline-block;background:var(--tag);color:var(--on-dark);border-radius:var(--r-pill);
     padding:7px 15px;font-size:12.5px;font-weight:600;line-height:1.2}
.tag--pale{background:var(--a-pale);color:var(--a-deep)}
.tag--mint{background:var(--mint);color:#0b3d22}
/* Тег, залитый ролью. До этого его красили инлайном на каждой странице
   (style="background:var(--a)") — три места в гайде и рефе.
   Акцентный берёт пару --a/--a-on, как .btn--accent: она согласована во всех темах.
   Ролевые заливаются ГЛУБОКИМ тоном, а не основным: белый на --done (#12b46a)
   даёт 2.4 при пороге 4.5, на --sun 1.6. Глубокий держит контраст у всех шести. */
.tag--accent{background:var(--a);color:var(--a-on)}
.tag--done{background:var(--done-deep);color:#fff}
.tag--hot{background:var(--hot-deep);color:#fff}
.tag--proc{background:var(--proc-deep);color:#fff}

/* 4.6 Клетка — фактура тетради. Три тона, и ни один не берёт цвет из акцента:
   бумага (.tex-paper, 21.7) — нейтральная тёплая подложка с холодной сеткой;
   залитый ролью (.card--solid + .grid-tex) — линии белые на 13%;
   чернильный (.slab, 22) — белые на 6%. Фактура не несёт роли, поэтому
   и не красится ролью: цвет на экране остаётся за смыслом, а не за фоном. */
.grid-tex{background-image:linear-gradient(var(--tex) 1px,transparent 1px),
                          linear-gradient(90deg,var(--tex) 1px,transparent 1px);
          background-size:26px 26px;background-position:-1px -1px}
/* Линии приглушены: на залитой карточке было 20% — сетка спорила с текстом поверх неё. */
.card--solid{--tex:rgba(255,255,255,.13)} .card--ink,.quiz{--tex:rgba(255,255,255,.08)}

/* ------------------------------------------------------------- 5. КНОПКИ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
     font-family:var(--f-text);font-size:var(--t-md);font-weight:700;line-height:1;
     padding:20px 34px;border:none;border-radius:var(--r-pill);cursor:pointer;text-decoration:none;
     transition:background var(--dur) var(--ease),transform .1s var(--ease)}
.btn:active{transform:scale(.985)}
.btn--primary{background:var(--contrast);color:var(--on-contrast)}
.btn--accent{background:var(--a);color:var(--a-on)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.btn--ghost:hover{background:var(--surface)}
/* Чёрное к чёрному не ставим. Два случая, и раньше был закрыт только первый:
   рядом с тёмной формой акцентным становится CTA в соседней колонке — и внутри
   самой тёмной поверхности тоже. Без второй строки кнопка --primary (заливка
   --contrast) ложилась на карточку того же --contrast и пропадала целиком.
   .quiz--paper добавлен в исключения: светлая форма — не тёмная поверхность,
   и рядом с ней чёрный CTA правильный. */
.hero:has(.quiz:not(.quiz--surface):not(.quiz--pale):not(.quiz--paper)) .hero__copy .btn--primary,
.quiz:not(.quiz--surface):not(.quiz--pale):not(.quiz--paper) .btn--primary,
.card--ink .btn--primary{background:var(--a);color:var(--a-on)}
/* Решение отменено 20.08: широкие/крупные кнопки красились не-капсулой по замеру
   Фигма-макета (1208×92 R≈25, 651×55 R≈20–24) — но правило §1.3/§2.1 «форма одна,
   капсула, без исключений» сильнее конкретного макета. Капсула теперь везде. */
.btn--wide{width:100%;border-radius:var(--r-pill)}
.btn--lg{font-size:var(--t-lg);padding:26px 40px;border-radius:var(--r-pill)}
.btn--sm{font-size:var(--t-sm);padding:13px 22px;min-height:44px}   /* тач-зона: 15px+26 давало 41 */
/* Неактивная кнопка теряет заливку, а не гасится прозрачностью. Полупрозрачная
   заливка сохраняла форму активной кнопки: чёрная становилась серой, мятная —
   бледно-мятной, и обе продолжали читаться как «жми». */
/* Заливка --surface-2 сливалась с подложкой (замер силуэта на бумаге 1.11).
   Выключенная кнопка держит форму контуром, а не пятном, и не зависит
   от того, на какой поверхности стоит. */
.btn[disabled]{background:transparent;color:var(--ink-3);box-shadow:inset 0 0 0 1.5px var(--control);
  opacity:1;pointer-events:none}

.btn-round{width:48px;height:48px;flex:none;border-radius:50%;border:none;cursor:pointer;
  background:var(--tag);color:var(--on-dark);display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur) var(--ease)}
.btn-round:hover{transform:translateX(2px)}
.btn-round svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn-round--lg{width:52px;height:52px}
/* Пиксельный шеврон — деталь с макета дизайнеров. Тот же мотив, что у пиксель-иконок. */
.btn-round--pixel svg{width:14px;height:23px;fill:currentColor;stroke:none}

/* -------------------------------------------------------------- 6. КАРТОЧКИ */
.card{background-color:var(--surface);border-radius:var(--r-xl);padding:var(--s5);position:relative}
@media(min-width:760px){.card{padding:35px}}   /* макет: 35 со всех сторон */
.card--tight{padding:var(--s5)}
.card--pale{background-color:var(--a-pale)}
.card--pale h2,.card--pale h3{color:var(--a-deep)}
.card--pale p,.card--pale .sub,.card--pale .sub-sm{color:var(--a-deep);opacity:.82}
.card--solid{background-color:var(--a);color:var(--a-on)}
.card--solid h2,.card--solid h3,.card--solid p,.card--solid .sub{color:var(--a-on)}
/* Карточка роли «результат»: подтверждение, «что останется у вас», принятая заявка.
   Была нужна на каждой второй странице и каждый раз собиралась инлайном. */
.card--done{background-color:var(--done-pale)}
.card--done h2,.card--done h3{color:var(--done-deep)}
.card--done p,.card--done .sub,.card--done .sub-sm{color:var(--done-deep);opacity:.9}
/* Стикер держит роль карточки, а не свой дефолт «процесс» — иначе на зелёном
   результате всплывает чужой лавандовый чип, роль-паразит. */
.card--done .sticker{background:var(--page);color:var(--done-deep)}
.card--ink{background-color:var(--contrast);color:var(--on-contrast)}
.card--ink h2,.card--ink h3,.card--ink p{color:var(--on-contrast)}
.card--ink .sub{color:var(--on-contrast);opacity:.66}
/* Прижать подвал к низу карточки можно только во флекс-контейнере — иначе
   margin-top:auto молча ничего не делает, и ряд карточек рвётся по низу
   (замер витрины классов: разбег 22px между ценами соседних карточек). */
.card:has(.card__foot){display:flex;flex-direction:column}
.card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-top:auto;padding-top:var(--s5)}

.screen{background:var(--contrast);border-radius:var(--r-xl);padding:var(--s4)}
.screen img{border-radius:var(--r-md)}

/* ----------------------------------------------------------- 7. РАСКЛАДКИ */
.grid{display:grid;gap:var(--gap)}
.grid > *{min-width:0}
.grid-2,.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .grid-tilt{grid-template-columns:1.35fr 1fr}
  .grid-tilt-r{grid-template-columns:1fr 1.35fr}
  .span-2{grid-column:span 2}
}
/* Шапка секции в две колонки: H2 слева, пояснение справа. Раскладка макета. */
.head-2{display:grid;gap:var(--s4)}
@media(min-width:900px){.head-2{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}}
.head-2 > *{min-width:0}
.head-2 > :first-child{max-width:15ch}
.head-2 p{font-size:var(--t-md);color:var(--ink-2);line-height:1.45}
.head-2 p + p{margin-top:var(--s4)}

/* Шапка блока с управлением: заголовок слева, контрол справа, по краям.
   Не .head-2 — там вторая колонка это пояснение, и первой задано 15ch.
   На «Сколько стоит обучение» эти 15ch давали заголовок в три этажа. */
.head-row{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s6);align-items:center;
  justify-content:space-between}
/* min-width:0 обязателен: без него флекс-элемент не сжимается ниже содержимого,
   и переключатель срока распирал страницу на 390 (замер: 492 при 302).
   Тот же дефект уже ловили у .terms в грид-раскладке. */
.head-row > *{min-width:0;max-width:100%}
.head-row > :first-child{flex:1 1 auto}

/* Заголовок слева, поток справа */
.split{display:grid;gap:var(--s5)}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1.25fr;gap:var(--s7);align-items:start}
  /* top привязан к реальной высоте шапки (--hdr-h, её выставляет скрипт шапки 21.1),
   а не к фиксированному отступу: иначе при залипании обоих сразу заголовок раскладки
   уезжает под шапку — она выше 24px в любом её состоянии. */
.split__head{position:sticky;top:calc(var(--hdr-h,88px) + var(--s5))}
}