/* ============================================================
   JUST SPEAK IT — главная страница
   Порт макета design-mockups/variant-2-perk.html:
   структура, отступы и размеры перенесены один в один,
   лаймовый акцент #beff50 заменён на фирменный жёлтый #FFDD2D.
   ============================================================ */

:root {
  --accent: #FFDD2D;
  --ink:    #14140f;
  --bg:     #f5f5eb;
  --muted:  #6e6e64;
  --line:   #d2d2c8;
  --white:  #ffffff;
  --panel:  #30302a;

  --r-lg:   28px;
  --r-md:   18px;
  --r-pill: 9999px;

  /* Ширина колонки контента. 1560, а не прежние 1200: с 01.08.2026
     сайт живёт на широкой сетке — на мониторе контент разворачивается
     почти во всю ширину, а не стоит узким столбцом посередине.
     Число одно на весь сайт, страницы про него не знают. */
  --maxw:  1560px;
  --pad-x: clamp(20px, 5vw, 64px);
  --pad-y: clamp(72px, 9vw, 120px);

  /* Плавающая шапка-капсула */
  --nav-gap:    12px;                     /* отступ от верхней кромки экрана */
  --nav-edge:   clamp(10px, 2vw, 22px);   /* поля по бокам в покое */
  --nav-radius: 22px;                     /* радиус, когда пилюля не к месту */
  --nav-bleed:  100px;                    /* насколько сжатая капсула шире контента */
  --nav-h:      68px;                     /* высота капсулы, уточняет app.js */
  /* Место, которое шапка занимает над первым экраном. Шапка вынесена
     из потока, поэтому первый экран отступает сверху сам. Плюс 12px
     воздуха: без них хлебные крошки на внутренних страницах почти
     упираются в капсулу. */
  --nav-space:  calc(var(--nav-h) + var(--nav-gap) * 2 + 12px);
}

/* Широкая сетка: поля и воздух подрастают вместе с колонкой.
   Нижние границы clamp совпадают со значениями базовых формул
   на 1240px — при перетаскивании окна нет скачка. */
@media (min-width: 1240px) {
  :root {
    --pad-x: clamp(62px, 5vw, 88px);
    --pad-y: clamp(111px, 9vw, 140px);

    /* Насколько сжатая капсула шапки шире контента. Колонка стала
       шире — напуск тоже, иначе рамка вокруг контента читалась бы
       тонкой ниткой. */
    --nav-bleed: 132px;
  }
}

/* ---------- Прокрутка ----------
   scroll-behavior касается только «прыжков»: клика по якорю в меню
   и вызовов scrollTo. Обычную прокрутку колесом сглаживает app.js.

   scroll-padding-top обязателен: шапка плавает поверх контента,
   и без запаса якорь уводил бы заголовок ровно под неё. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-space) + 8px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

*, *::before, *::after { box-sizing: border-box; }

/* display: flex/grid ниже перебил бы атрибут hidden — возвращаем ему силу */
[hidden] { display: none !important; }

/* overflow-x: clip, а не hidden: hidden делает страницу скролл-контейнером
   и ломает position: sticky у шапки. clip обрезает так же, но контейнер не создаёт. */
html, body { max-width: 100%; overflow-x: clip; }

/* ---------- Полоса прокрутки ----------
   Ползунок — фирменный жёлтый, дорожка — фон страницы.

   Два набора правил, потому что браузеры договорились не сразу:
   Firefox знает только стандартные scrollbar-color/scrollbar-width,
   Chrome и Safari умеют ::-webkit-scrollbar и рисуют по нему скруглённую
   пилюлю с полями. Chrome понимает и стандартные свойства — но если их
   задать, он предпочтёт их и нарисует простую тонкую полосу. Поэтому
   отдаём их только тем, у кого нет ::-webkit-scrollbar, то есть Firefox. */

@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--accent) var(--bg); scrollbar-width: thin; }
}

::-webkit-scrollbar { width: 12px; height: 12px; }

::-webkit-scrollbar-track { background: var(--bg); }

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: var(--r-pill);
  /* Рамка цветом дорожки: ползунок получает поля и читается пилюлей,
     а не полосой во всю ширину. Фон под рамку не подставить — border-box. */
  border: 3px solid var(--bg);
}
/* Наведение — тот же жёлтый на пару тонов глубже. Это состояние
   элемента интерфейса, а не второй фирменный цвет: в палитру не выносим. */
::-webkit-scrollbar-thumb:hover { background: #f0c800; }

::-webkit-scrollbar-corner { background: var(--bg); }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 500; margin: 0; }
p { margin: 0; }
img { display: block; max-width: 100%; }
button { font-family: inherit; color: inherit; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--muted); }

::selection { background: var(--accent); color: var(--ink); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
  left: 16px; top: 16px; z-index: 100;
  background: var(--ink); color: var(--bg);
  padding: 10px 18px; border-radius: var(--r-pill);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Контейнеры ---------- */

.container         { max-width: var(--maxw); margin: 0 auto; width: 100%; padding: var(--pad-y) var(--pad-x); }
/* Вложенные контейнеры намеренно уже основной колонки: строку прайса,
   вопрос FAQ и текст статьи неудобно читать во всю ширину монитора.
   Пропорцию к широкой сетке сохраняем. */
.container--narrow { max-width: 1180px; }  /* прайс */
.container--tight  { max-width: 1040px; }  /* FAQ, текст статьи */

/* ---------- Сквозные элементы ---------- */

.eyebrow {
  display: block;
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted);
}
.eyebrow--on-dark   { color: var(--accent); }
.eyebrow--on-accent { color: var(--ink); }

/* Потолки clamp подняты под широкую сетку: заголовок растёт вместе
   с колонкой. На узком экране работает средний аргумент, поэтому
   мобильные размеры от этого не меняются. */
.h2 {
  font-size: clamp(32px, 4.4vw, 68px);
  letter-spacing: -0.03em; line-height: 1;
  margin: 16px 0 0;
}
.h2--xl      { font-size: clamp(36px, 5.5vw, 88px); line-height: 0.9; }
.h2--display { font-size: clamp(36px, 6.5vw, 100px); line-height: 0.9; }

.lead { font-size: 16px; line-height: 1.5; color: var(--muted); }

.btn {
  display: inline-block; font-weight: 500;
  border: none; border-radius: var(--r-pill);
  white-space: nowrap; cursor: pointer;
}
.btn--dark         { background: var(--ink); color: var(--bg); }
.btn--dark:hover   { color: var(--white); }
.btn--accent       { background: var(--accent); color: var(--ink); }
.btn--accent:hover { color: var(--ink); opacity: 0.85; }

.btn--nav   { font-size: 15px; padding: 12px 22px; }
.btn--sm    { font-size: 15px; padding: 13px 22px; }
.btn--md    { font-size: 16px; padding: 16px 28px; }
.btn--trial { font-size: 16px; padding: 15px 26px; }
.btn--lg    { font-size: 17px; padding: 16px 30px; }

/* Две кнопки рядом. У .btn стоит white-space: nowrap, поэтому на узком
   экране они не сжимаются, а переносятся — flex-wrap кладёт их друг
   под друга, и gap держит отступ в обоих направлениях. */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.link-underline {
  display: inline-block; font-weight: 500; font-size: 16px;
  border-bottom: 1px solid var(--ink); padding-bottom: 2px;
}
.link-underline:hover { color: var(--muted); border-color: var(--muted); }
.link-underline--sm { font-size: 15px; }
.link-underline--xs { font-size: 14px; }

.rule      { border-top: 1px solid var(--line); }
.rule--ink { border-top: 1px solid var(--ink); }

/* Заглушки под будущий контент */
/* Место под ещё не присланное фото. Раньше это был серый пунктирный
   прямоугольник с текстом «TODO: …» — техническая пометка, которую
   видел посетитель. Теперь это фирменная плашка: тот же размер, но
   выглядит как оформление, а не как незагруженная картинка.
   Сам текст остаётся в разметке — он подсказывает нам, что сюда
   встанет, — но скрыт и от глаз, и от скринридера. */
.ph {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12px;
  background:
    repeating-linear-gradient(135deg,
      rgba(20, 20, 15, .045) 0 2px, transparent 2px 12px),
    var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
/* Подпись внутри заглушки: что за кадр сюда встанет.
   Раньше была скрыта — заказчик проверяет страницы глазами, и
   немая серая плашка не говорила, чего именно не хватает.
   Теперь текст виден: над водяным знаком, спокойным тоном. */
.ph > span {
  display: block;
  max-width: 88%; margin: 0 auto 6px;
  font-size: 12px; line-height: 1.35; text-align: center;
  color: rgba(20, 20, 15, .5);
}
/* Узкие вертикальные обложки: подпись не влезает, оставляем фактуру */
.ph--9x16 > span { display: none; }

/* Подпись-водяной знак вместо картинки. Спокойный тон, а не акцент:
   заглушек на сайте много (обложки рилсов, карта, фото занятия), и
   жёлтым они перебивали бы кнопки — а на жёлтом первом экране
   вовсе слились бы с фоном. */
.ph::after {
  content: 'JUST SPEAK IT';
  font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(20, 20, 15, .32);
}

/* Узкие обложки рилсов: подпись поперёк не влезает, оставляем фактуру */
.ph--9x16::after { font-size: 9px; letter-spacing: .12em; }

/* На жёлтом первом экране белая плашка читалась как дыра в макете.
   Тонкая рамка и более заметная подпись возвращают ей вид намеренного
   элемента, пока не пришло живое фото. */
.chero .ph {
  border-color: rgba(20, 20, 15, .16);
  box-shadow: 0 18px 40px rgba(20, 20, 15, .10);
}
.chero .ph::after { color: rgba(20, 20, 15, .42); }
.ph--9x16   { aspect-ratio: 9 / 16; }
.ph--report { width: 260px; max-width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-md); }
/* Заглушка-карточка в сетке: занимает ячейку целиком, в отличие от
   .ph--report с его фиксированными 260px. */
.ph--card   { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r-md); }
.ph--map    { width: 100%; aspect-ratio: 16 / 7; background: var(--white); }
.ph--photo  { width: 100%; aspect-ratio: 4 / 3; background: var(--white); }

/* ============================================================
   Шапка
   ============================================================ */

/* Плавающая капсула поверх контента.

   position: fixed, а не sticky — принципиально. Sticky занимает место
   в потоке, и первый экран начинался бы под шапкой, оставляя полосу
   сверху. Fixed выносит капсулу из потока: жёлтый первый экран доходит
   до самой кромки страницы, а капсула плывёт поверх него. Расплата —
   первому экрану нужен отступ сверху, см. --nav-space ниже.

   В покое капсула почти во всю ширину и залита сплошным белым.
   При прокрутке сжимается ровно по ширине контента и становится
   стеклом. Классы вешает app.js. */
.nav {
  position: fixed;
  top: var(--nav-gap);
  left: 0; right: 0;
  z-index: 50;

  width: calc(100% - 2 * var(--nav-edge));
  max-width: none;
  margin-inline: auto;

  display: flex; align-items: center; flex-wrap: wrap;
  justify-content: space-between; gap: 16px;
  padding: 12px clamp(16px, 2vw, 24px);
  border-radius: var(--r-pill);

  /* Размытие включено всегда, но под непрозрачным белым его не видно:
     так переход к стеклу идёт плавно, без рывка от включения фильтра. */
  background: var(--white);
  backdrop-filter: blur(5px) saturate(200%) brightness(1.04) contrast(1.03);
  -webkit-backdrop-filter: blur(5px) saturate(200%) brightness(1.04) contrast(1.03);

  border: 1px solid transparent;   /* кромку рисует ::after — ровно 1px */
  box-shadow:
    0 12px 34px rgba(20, 20, 15, 0.13),
    0 2px 8px rgba(20, 20, 15, 0.05);

  /* Полсекунды и почти линейная кривая со сглаженными концами. Кривая
     важнее длительности: у резких (ease-out, пружина) девять десятых
     пути проезжают за первую треть времени, и движение читается рывком
     с долгим доползанием. Здесь путь размазан ровно.
     max-width в списке нет: он не меняется. */
  transition:
    width     0.5s cubic-bezier(0.4, 0.1, 0.6, 0.9),
    padding   0.5s cubic-bezier(0.4, 0.1, 0.6, 0.9),
    transform 0.4s cubic-bezier(0.22, 0.9, 0.25, 1),
    border-radius 0.4s ease, background 0.42s ease, box-shadow 0.45s ease;
}

/* Содержимое — поверх стеклянных слоёв */
.nav > * { position: relative; z-index: 1; }

/* Прокрутили: капсула подбирается под ширину контента и становится
   стеклом. Формула повторяет .container, плюс --nav-bleed: капсула
   чуть шире текста, по 22px с каждой стороны — так она читается как
   рамка над контентом, а не как его продолжение.

   Первым аргументом min() идёт ширина в покое: без неё на узком
   экране «контент + напуск» оказался бы шире самого экрана. */
.nav.is-scrolled {
  width: min(
    calc(100% - 2 * var(--nav-edge)),
    calc(100% - 2 * var(--pad-x) + var(--nav-bleed)),
    calc(var(--maxw) - 2 * var(--pad-x) + var(--nav-bleed))
  );
  padding-top: 9px; padding-bottom: 9px;
  background: rgba(255, 255, 255, 0.26);
  box-shadow:
    0 18px 48px rgba(20, 20, 15, 0.16),
    0 4px 12px rgba(20, 20, 15, 0.07);
}

/* Отблеск на поверхности: не размывает ничего, просто свет, лежащий
   на стекле сверху. Именно он отличает глянец от матовости. */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.16) 38%,
      rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0) 82%,
      rgba(255, 255, 255, 0.14) 100%);
}

/* Кромка в один пиксель. Маска из двух заливок с вычитанием
   content-box оставляет полосу ровно в толщину padding. */
.nav::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.3) 30%,
    rgba(255, 255, 255, 0.12) 55%,
    rgba(255, 255, 255, 0.65) 100%
  );
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
          mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.nav::before, .nav::after { transition: background 0.3s ease; }

/* Покачивание: короткий доводчик в момент смены состояния. Класс
   is-wobble вешает и снимает app.js, поэтому эффект срабатывает
   и на сжатии, и на возврате. Масштаб держим в пределах 1.5%:
   больше — и текст в шапке «желеет». */
@keyframes nav-settle {
  0%   { transform: scale(1, 1); }
  24%  { transform: scale(1.010, 0.968); }
  56%  { transform: scale(0.996, 1.016); }
  80%  { transform: scale(1.002, 0.995); }
  100% { transform: scale(1, 1); }
}
.nav.is-wobble { animation: nav-settle 0.55s cubic-bezier(0.33, 0.6, 0.3, 1); }

/* ---------- Тёмная подложка ----------
   Скрипт вешает is-on-dark, когда середина капсулы заходит на блок
   с атрибутом data-nav-dark. Работает только вместе с is-scrolled:
   в покое капсула залита белым, и светлый текст на ней исчез бы. */

.nav .nav__brand,
.nav .nav__menu a { transition: color 0.3s ease; }
.nav .nav__brand img { transition: filter 0.3s ease; }

.nav.is-scrolled.is-on-dark .nav__brand,
.nav.is-scrolled.is-on-dark .nav__menu a { color: var(--bg); }

/* Логотип растровый, перекрасить нельзя: выбеливаем целиком.
   brightness(0) гасит всё в чёрный, invert(1) переводит в белый. */
.nav.is-scrolled.is-on-dark .nav__brand img { filter: brightness(0) invert(1); }

.nav.is-scrolled.is-on-dark { background: rgba(20, 20, 15, 0.34); }

/* На тёмном отблеск и кромка приглушаются: в полную силу они
   выглядели бы белой окантовкой. */
.nav.is-on-dark::before {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.07) 38%,
      rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0) 82%,
      rgba(255, 255, 255, 0.06) 100%);
}
.nav.is-on-dark::after {
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.18) 30%,
    rgba(255, 255, 255, 0.07) 55%,
    rgba(255, 255, 255, 0.4) 100%
  );
}

/* Без поддержки backdrop-filter стекло выглядело бы дырой — плотный фон.
   В покое шапка и так белая, подменяем только прокрученное состояние. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-scrolled { background: rgba(255, 255, 255, 0.96); }
  .nav.is-scrolled.is-on-dark { background: rgba(20, 20, 15, 0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
  .nav.is-wobble { animation: none; }
}
.nav__brand {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  font-weight: 600; font-size: 17px;
  letter-spacing: -0.02em; text-transform: uppercase;
}
/* Знак в полтора раза крупнее прежних 34px (решение заказчика 01.08.2026).
   Те же числа стоят в атрибутах width/height в partials/header.html —
   они держат место до загрузки картинки, менять надо оба. */
.nav__brand img { width: 51px; height: 51px; object-fit: contain; }
.nav__menu {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(12px, 2.5vw, 32px);
  font-size: 14px; font-weight: 500;
  list-style: none; margin: 0; padding: 0;
}
.nav__cta { flex: 0 0 auto; }

/* ---------- Выпадающий список курсов в шапке ----------
   Курсов девять, в строку они не помещаются, а без них человек с
   внутренней страницы не мог попасть на соседний курс иначе как через
   подвал. Кнопка, а не ссылка: элемент ничего не открывает по адресу,
   он раскрывает список — значит это кнопка, и с клавиатуры она ведёт
   себя правильно. */
.nav__drop { position: relative; }
.nav__drop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.nav__drop-arrow { transition: transform 0.2s ease; }
.nav__drop-btn[aria-expanded="true"] .nav__drop-arrow { transform: rotate(180deg); }

.nav__drop-list {
  position: absolute; top: calc(100% + 14px); left: -18px;
  min-width: 262px; padding: 10px;
  display: none; flex-direction: column; gap: 2px;
  list-style: none; margin: 0;
  background: var(--white); border-radius: var(--r-md);
  box-shadow: 0 18px 44px rgba(20, 20, 15, 0.16), 0 2px 8px rgba(20, 20, 15, 0.06);
}
.nav__drop-btn[aria-expanded="true"] + .nav__drop-list { display: flex; }
.nav__drop-list a {
  display: block; padding: 9px 12px; border-radius: 12px;
  white-space: nowrap;
}
.nav__drop-list a:hover { background: var(--bg); }
.nav__drop-list a[aria-current="page"] { background: var(--accent); }

/* Открытый раздел подсвечивается и в свёрнутом виде: человек видит,
   что находится внутри «Курсов», даже когда список закрыт. */
.nav__drop-btn.is-current { text-decoration: underline; text-underline-offset: 5px; }



/* Гамбургер и иконка внутри кнопки живут только на узком экране */
.nav__burger { display: none; }
.nav__cta-icon { display: none; }

/* Внутренние страницы начинаются со светлого блока, и белая капсула
   в покое сливалась бы с ним. Бежевая подложка шапки страницы решает
   это и заодно отделяет заголовок от контента. */
.page-head { background: var(--bg); }

/* ============================================================
   01 · Hero
   ============================================================ */

.hero { background: var(--accent); }
.hero__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(56px, 8vw, 120px) var(--pad-x);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(40px, 5vw, 72px);
}
.hero__copy { flex: 1 1 460px; min-width: 0; }
.hero__badge {
  display: inline-block;
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  padding: 7px 16px; margin-bottom: 28px;
}
.hero h1 {
  font-size: clamp(48px, 8.5vw, 104px);
  line-height: 0.89; letter-spacing: -0.03em;
}
.hero__sub { font-size: 18px; line-height: 1.5; margin-top: 28px; max-width: 44ch; }
.hero__cta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px; margin-top: 36px;
}
.hero__media { flex: 0 1 420px; min-width: 260px; }
.hero__card {
  width: 100%; aspect-ratio: 4 / 5;
  background: var(--white);
  border-radius: var(--r-lg); overflow: hidden;
}
.hero__card img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   02 · Полоса доверия
   ============================================================ */

.stats { background: var(--bg); }
.stats__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) var(--pad-x);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px 0;
}
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 0 clamp(20px, 3vw, 40px);
  text-align: center;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left-color: transparent; }
.stat__value {
  font-weight: 500; font-size: clamp(38px, 4.2vw, 62px);
  letter-spacing: -0.03em; line-height: 1;
  /* «165 000+» разрывалось по пробелу на две строки, и подписи
     соседних ячеек переставали стоять на одной линии. */
  white-space: nowrap;
}
.stat__label { font-size: 14px; color: var(--muted); max-width: 22ch; }
/* Вертикальные разделители осмысленны только в полном ряду.
   Когда сетка переносится (узкий экран) — убираем, чтобы не было чёрточек сбоку. */
@media (max-width: 900px) {
  .stat { border-left: 0; }
}

/* ============================================================
   03 · JSI Events — афиша
   ============================================================ */

.agenda {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: var(--pad-y) var(--pad-x);
  display: flex; flex-wrap: wrap; gap: clamp(40px, 5vw, 80px);
}
.agenda__intro { flex: 1 1 320px; min-width: 0; }
.agenda__intro .h2 { margin: 16px 0 20px; }
.agenda__intro .lead { margin-bottom: 24px; max-width: 40ch; }
.agenda__list { flex: 1 1 440px; min-width: 0; }

.event {
  display: flex; align-items: center; gap: 20px;
  padding: clamp(20px, 2.5vw, 28px) 0;
  border-top: 1px solid var(--line);
}
.event__date {
  flex: 0 0 auto; background: var(--accent); color: var(--ink);
  font-weight: 500; font-size: 13px;
  padding: 8px 14px; border-radius: var(--r-pill); white-space: nowrap;
}
.event__date--todo { background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.event__body { flex: 1 1 auto; min-width: 0; }
.event__title { font-weight: 500; font-size: clamp(18px, 2vw, 22px); }
.event__time { font-size: 14px; color: var(--muted); margin-top: 2px; }
.event__btn {
  flex: 0 0 auto; font-weight: 500; font-size: 14px;
  padding: 10px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; white-space: nowrap;
}
.event__btn:hover { background: var(--ink); color: var(--bg); }

/* ============================================================
   04 · Квиз — тёмный остров
   ============================================================ */

.quiz {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: 0 var(--pad-x) var(--pad-y);
}
.quiz__island {
  background: var(--panel); color: var(--bg);
  border-radius: var(--r-lg); padding: clamp(32px, 5vw, 64px);
  display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px);
}
.quiz__intro { flex: 1 1 300px; min-width: 0; }
.quiz__intro h2 {
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.03em; line-height: 1.02;
  margin: 16px 0 18px;
}
.quiz__intro p {
  font-size: 16px; line-height: 1.5;
  color: rgba(245, 245, 235, 0.65); max-width: 38ch;
}
.quiz__body { flex: 1 1 420px; min-width: 0; }
.quiz__dots { display: flex; gap: 6px; margin-bottom: 28px; }
.quiz__dot {
  flex: 1; height: 4px; border-radius: var(--r-pill);
  background: rgba(245, 245, 235, 0.2);
}
.quiz__dot.is-on { background: var(--accent); }
.quiz__counter {
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(245, 245, 235, 0.5); margin-bottom: 12px;
}
.quiz__q { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.02em; margin-bottom: 12px; }
.quiz__opt {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; text-align: left;
  font-weight: 400; font-size: 17px; color: var(--bg);
  padding: 18px 0; border: none;
  border-bottom: 1px solid rgba(245, 245, 235, 0.18);
  background: none; cursor: pointer;
}
.quiz__opt span { color: var(--accent); }
.quiz__opt:hover { color: var(--accent); }

.quiz__result {
  background: var(--accent); color: var(--ink);
  border-radius: var(--r-md); padding: clamp(24px, 3vw, 32px);
}
.quiz__result-label {
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px;
}
.quiz__result h3 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -0.02em; margin-bottom: 12px; }
.quiz__result p { font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
.quiz__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.quiz__reset {
  background: none; border: none; color: var(--ink);
  font-size: 14px; text-decoration: underline;
  cursor: pointer; padding: 0; margin-left: auto;
}

/* ============================================================
   05 · Направления
   ============================================================ */

.courses { background: var(--bg); }
.courses .h2 { margin: 16px 0 clamp(32px, 4vw, 48px); max-width: 16ch; }
.courses__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.course {
  display: flex; flex-direction: column; gap: 20px;
  background: var(--white); color: var(--ink);
  border-radius: var(--r-lg); padding: clamp(28px, 3vw, 40px);
  min-height: 220px;
}
.course:hover { color: var(--ink); }
.course--featured { background: var(--accent); }
.course__top { display: flex; align-items: center; justify-content: space-between; }
.course__num { font-weight: 500; font-size: 14px; color: var(--muted); }
.course__body { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.course__title { font-weight: 500; font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -0.02em; }
.course__desc { font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ============================================================
   06 · Методика
   ============================================================ */

.method {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: var(--pad-y) var(--pad-x);
  display: flex; flex-wrap: wrap; gap: clamp(40px, 5vw, 72px);
}
.method__intro { flex: 1 1 380px; min-width: 0; }
.method__intro .h2 { margin: 16px 0 22px; }
.method__intro p {
  font-size: 16px; line-height: 1.55; color: var(--muted);
  max-width: 44ch; margin-bottom: 14px;
}
.method__intro p:last-of-type { margin-bottom: 0; }
.method__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tag {
  font-weight: 500; font-size: 13px;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--bg);
}
.tag--accent { background: var(--accent); }
.method__list { flex: 1 1 420px; min-width: 0; }

.acc { border-top: 1px solid var(--line); }
.acc__btn {
  width: 100%; display: flex; align-items: baseline; gap: 18px;
  padding: clamp(18px, 2.2vw, 24px) 0;
  background: none; border: none; cursor: pointer; text-align: left;
}
.acc__num { flex: 0 0 auto; font-weight: 500; font-size: 15px; color: var(--muted); }
.acc__title {
  flex: 1 1 auto; font-weight: 500;
  font-size: clamp(17px, 1.9vw, 22px); letter-spacing: -0.01em;
}
.acc__sign { flex: 0 0 auto; font-size: 24px; color: var(--muted); line-height: 1; }
.acc__panel {
  padding: 0 0 clamp(20px, 2.4vw, 26px) 33px;
  display: flex; flex-direction: column; gap: 14px;
}
.acc__panel p { font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 52ch; }

/* ============================================================
   07 · Reels
   ============================================================ */

.reels { background: var(--bg); }
.reels .h2 { margin: 16px 0 8px; max-width: 16ch; }
.reels .lead { margin-bottom: clamp(32px, 4vw, 44px); max-width: 52ch; }
.reels__grid {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  list-style: none; margin: 0; padding: 0 0 6px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.reels__grid::-webkit-scrollbar { display: none; }
.reel {
  /* Ширина = 1/5 контейнера: на десктопе все пять рилсов видны сразу.
     Когда 1/5 становится меньше min-width — включается прокрутка. */
  flex: 0 0 calc((100% - 4 * 16px) / 5); min-width: 150px;
  scroll-snap-align: start;
  aspect-ratio: 9 / 16; border-radius: var(--r-lg);
  overflow: hidden; background: var(--white);
}
.reel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reels__note { font-size: 15px; color: var(--muted); margin-top: clamp(24px, 3vw, 32px); }
.reels__note a { border-bottom: 1px solid var(--ink); }

/* Обложка — кнопка: клик открывает плеер */
.reel__open {
  position: relative; display: block;
  width: 100%; height: 100%; padding: 0;
  border: 0; background: none; cursor: pointer;
  border-radius: inherit; overflow: hidden;
}
.reel__play {
  position: absolute; left: 50%; top: 50%;
  width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: var(--r-pill); background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(20, 20, 15, 0.35);
  transition: transform 0.25s cubic-bezier(0.22, 0.9, 0.25, 1);
}
/* Треугольник на CSS, чтобы не тянуть иконку.
   margin-left — оптическая компенсация: у треугольника центр масс левее центра фигуры. */
.reel__play::before {
  content: '';
  border-left: 15px solid var(--ink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.reel__open:hover .reel__play,
.reel__open:focus-visible .reel__play { transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
  .reel__play { transition: none; }
}

/* ---------- Плеер роликов ---------- */
.vmodal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 32px);
}
.vmodal[hidden] { display: none; }
.vmodal__backdrop {
  position: absolute; inset: 0;
  width: 100%; padding: 0; border: 0;
  background: rgba(20, 20, 15, 0.88);
  cursor: pointer;
}
/* Задаём только ширину, высоту выводит aspect-ratio — иначе на узком
   экране ширина упёрлась бы в него, а высота осталась прежней, и ролик
   перестал бы быть 9:16. Ширина = меньшее из: сколько есть на экране и
   сколько можно себе позволить по высоте. */
.vmodal__box {
  position: relative; z-index: 1;
  aspect-ratio: 9 / 16;
  width: min(100%, calc(min(84vh, 760px) * 9 / 16));
}
.vmodal__stage {
  width: 100%; height: 100%;
  border-radius: var(--r-lg); overflow: hidden;
  background: #000;
}
.vmodal__video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
/* Заглушка в модалке — тот же .ph, но растянутый на сцену */
.vmodal__stage .ph { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.vmodal__close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 0; background: rgba(20, 20, 15, 0.6); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.vmodal__close:hover { background: var(--accent); color: var(--ink); }
.vmodal__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Лента с горизонтальной прокруткой: общая обёртка
   для рилсов и преподавателей ----------
   Карточки считают ширину от контейнера (1/5 для рилсов, 1/4 для
   преподавателей), поэтому на десктопе ряд помещается целиком и
   прокрутки нет — стрелки в этот момент скрыты (disabled из JS).
   Когда min-width карточки перевешивает — ряд начинает скроллиться. */
.lane { position: relative; }
.lane__btn {
  /* --btn — размер кнопки: от него же считается вылет за контейнер */
  --btn: 40px;
  position: absolute; top: 50%; z-index: 2;
  width: var(--btn); height: var(--btn); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(20, 20, 15, 0.12);
  transform: translateY(-50%);
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.lane__btn:hover { background: var(--accent); border-color: var(--accent); }
.lane__btn:disabled { opacity: 0; pointer-events: none; }
/* Стрелки стоят в боковом поле контейнера, за границей ряда карточек.
   Вылет = ширине кнопки, но не больше самого поля, иначе кнопка
   уехала бы за край экрана. */
.lane__btn--prev { left:  calc(-1 * min(var(--btn), var(--pad-x))); }
.lane__btn--next { right: calc(-1 * min(var(--btn), var(--pad-x))); }
/* Поле сужается вместе с экраном — кнопка тоже, чтобы в него влезать */
@media (max-width: 900px) { .lane__btn { --btn: 36px; font-size: 15px; } }
/* Стрелки — для мыши/трекпада; на тач-устройствах хватает свайпа */
@media (hover: none), (max-width: 640px) {
  .lane__btn { display: none; }
}

/* ============================================================
   08 · Преподаватели
   ============================================================ */

.teachers .h2 { margin: 16px 0 8px; max-width: 18ch; }
.teachers .lead { margin-bottom: clamp(32px, 4vw, 48px); max-width: 52ch; }
.teachers__lane {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 10px; margin: 0 0 -10px;
  list-style: none;
  scrollbar-width: none; -ms-overflow-style: none;
}
.teachers__lane::-webkit-scrollbar { display: none; }
.teacher {
  display: flex; flex-direction: column;
  /* Ширина = 1/4 контейнера: на десктопе все четверо видны сразу.
     Когда 1/4 становится меньше min-width — включается прокрутка. */
  flex: 0 0 calc((100% - 3 * 20px) / 4); min-width: 220px;
  scroll-snap-align: start;
  background: var(--bg); border-radius: var(--r-lg); overflow: hidden;
}
.teacher__photo { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--line); }
.teacher__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.teacher__body {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(20px, 2vw, 28px); flex: 1 1 auto;
}
.teacher__name {
  font-weight: 500; font-size: 18px;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.teacher__label {
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin-bottom: 5px;
}
.teacher__edu { font-size: 13px; line-height: 1.5; color: var(--muted); }
.teacher__quote { font-size: 14px; line-height: 1.5; flex: 1 1 auto; }
.teacher__exp {
  align-self: flex-start; margin-top: auto;
  background: var(--accent); color: var(--ink);
  font-weight: 500; font-size: 12px;
  padding: 7px 14px; border-radius: var(--r-pill);
}
.teachers__link { margin-top: clamp(40px, 5vw, 56px); }

/* Заглушка вместо карточек: во flex-дорожке ей нужна своя ширина и
   высота, иначе она схлопнется в полоску и заказчик её не заметит. */
.teachers__lane > .ph { flex: 1 1 auto; min-height: 220px; }

/* Пометка под дорожкой преподавателей: дорожка задаёт свои отступы,
   поэтому заглушке нужен собственный воздух сверху. */
.teachers .todo { margin-top: 28px; }

/* ============================================================
   09 · Комьюнити
   ============================================================ */

.community { background: var(--accent); }
.community .h2 { margin: 16px 0 clamp(32px, 4vw, 48px); max-width: 18ch; }
.community__cols { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 56px); }
.community__tabs  { flex: 1 1 300px; min-width: 0; order: 2; }
.community__panels { flex: 1 1 380px; min-width: 0; order: 1; }
.community__panel { display: flex; flex-direction: column; gap: 20px; }

.ctab {
  width: 100%; display: flex; align-items: baseline; gap: 16px;
  text-align: left; padding: clamp(16px, 2vw, 22px) 0;
  border: none; border-top: 1px solid var(--ink);
  background: transparent; cursor: pointer;
}
.ctab__num { font-weight: 500; font-size: 14px; color: rgba(20, 20, 15, 0.4); }
.ctab__label {
  flex: 1 1 auto; font-weight: 500;
  font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.02em;
  color: rgba(20, 20, 15, 0.5);
}
.ctab[aria-selected="true"] .ctab__num,
.ctab[aria-selected="true"] .ctab__label { color: var(--ink); }

.community__media {
  border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--white);
}
.community__media img { width: 100%; height: 100%; object-fit: cover; }
.community__desc { font-size: 16px; line-height: 1.55; }
.community__cta { align-self: flex-start; }

/* ============================================================
   10 · Тест на уровень
   ============================================================ */

.leveltest {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: clamp(80px, 10vw, 160px) var(--pad-x);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.leveltest h2 { max-width: 14ch; }
.leveltest p { font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 48ch; }
.leveltest__cta {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center; align-items: center; margin-top: 8px;
}

/* ============================================================
   11 · Стоимость
   ============================================================ */

.pricing { background: var(--bg); }
.pricing__head {
  display: flex; flex-wrap: wrap; gap: 24px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 20px;
}
.pricing__toggle { display: inline-flex; gap: 8px; }
.pricing__toggle button {
  font-weight: 500; font-size: 15px;
  padding: 10px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer;
}
.pricing__toggle button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
/* Подзаголовок прайса. Раньше прижимался вплотную к крупному H2 и
   ужимался в узкую колонку — читался как подпись под картинкой, а не
   как вводная фраза. Даём воздух сверху и нормальную длину строки. */
.pricing__note {
  font-size: 16px; line-height: 1.55; color: var(--muted);
  margin-top: 14px;
  margin-bottom: clamp(28px, 3.5vw, 40px);
  max-width: 68ch;
}

.price {
  display: flex; align-items: baseline; gap: 16px;
  padding: clamp(16px, 2vw, 22px) 0;
  border-top: 1px solid var(--line);
}
.price__body { flex: 1 1 auto; min-width: 0; }
.price__format { font-weight: 500; font-size: clamp(17px, 1.9vw, 22px); letter-spacing: -0.01em; }
.price__who { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.price__value {
  flex: 0 0 auto; font-weight: 500;
  font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.01em; white-space: nowrap;
}

.free {
  margin-top: clamp(28px, 4vw, 40px);
  background: var(--white); border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 40px);
}
.free__pill {
  display: inline-block; background: var(--accent); color: var(--ink);
  font-weight: 500; font-size: 14px;
  padding: 7px 16px; border-radius: var(--r-pill); margin-bottom: 20px;
}
.free__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; font-size: 15px;
  list-style: none; margin: 0; padding: 0;
}
.pricing__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
  margin-top: clamp(24px, 3vw, 32px);
}
.pricing__foot p { font-size: 13px; color: var(--muted); }

/* ============================================================
   12 · Отзывы
   ============================================================ */

.reviews .h2 { margin: 16px 0 clamp(32px, 4vw, 48px); max-width: 18ch; }
.reviews__videos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px; margin-bottom: clamp(48px, 6vw, 72px);
  list-style: none; padding: 0;
}
.reviews__lead { font-size: 15px; color: var(--muted); margin-bottom: 24px; max-width: 60ch; }
.reviews__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(48px, 6vw, 72px);
}
/* Агрегированный рейтинг площадок */
.rating-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.rating { display: flex; align-items: center; gap: 12px; }
.rating__score {
  font-weight: 500; font-size: clamp(32px, 3.4vw, 44px);
  letter-spacing: -0.03em; line-height: 1;
}
.rating__meta {
  font-size: 12px; font-weight: 500; line-height: 1.35;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.rating-row__link { margin-left: auto; }

.quote {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--ink); padding-top: 20px; margin: 0;
}
.quote p {
  font-weight: 500; font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 16px;
}
.quote__meta {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: auto;  /* подписи выравниваются по низу карточек разной высоты */
}
.quote cite {
  font-size: 14px; font-weight: 500; font-style: normal; color: var(--ink);
}
.quote__source {
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.certs {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px);
  align-items: baseline;
  border-top: 1px solid var(--line); padding-top: 28px;
}
.cert__score {
  font-weight: 500; font-size: clamp(44px, 5vw, 72px);
  letter-spacing: -0.03em; line-height: 0.9;
  color: var(--line);
}
.cert__label {
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin-top: 6px;
}
.reviews__link { margin-top: 32px; }

/* ============================================================
   13 · Филиалы
   ============================================================ */

.branches { background: var(--bg); }
.branches .h2 { margin: 16px 0 8px; max-width: 16ch; }
.branches .lead { margin-bottom: clamp(32px, 4vw, 44px); max-width: 52ch; }
.branches__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  column-gap: clamp(32px, 5vw, 64px);
}
.branch {
  display: flex; align-items: baseline; gap: 16px;
  padding: clamp(16px, 2vw, 22px) 0;
  border-top: 1px solid var(--line);
}
.branch__num { flex: 0 0 auto; font-weight: 500; font-size: 14px; color: var(--muted); }
.branch__body { flex: 1 1 auto; min-width: 0; }
.branch__name {
  display: block; font-weight: 500;
  font-size: clamp(17px, 1.9vw, 22px); letter-spacing: -0.01em;
}
.branch__addr {
  display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.branch__arrow { flex: 0 0 auto; font-size: 20px; }
.branches__link { margin-top: 28px; }

/* ============================================================
   14 · FAQ
   ============================================================ */

.faq .h2 { margin: 16px 0 clamp(32px, 4vw, 44px); max-width: 16ch; }
.faq__item { border-top: 1px solid var(--line); }
.faq__btn {
  width: 100%; display: flex; align-items: baseline; gap: 16px;
  padding: clamp(18px, 2.4vw, 24px) 0;
  background: none; border: none; cursor: pointer; text-align: left;
}
.faq__q {
  flex: 1 1 auto; font-weight: 500;
  font-size: clamp(17px, 1.9vw, 22px); letter-spacing: -0.01em;
}
.faq__sign { flex: 0 0 auto; font-size: 26px; color: var(--muted); line-height: 1; }
.faq__a {
  padding-bottom: clamp(20px, 2.4vw, 26px);
  font-size: 15.5px; line-height: 1.55; color: var(--muted); max-width: 64ch;
}

/* ============================================================
   Финальный CTA
   ============================================================ */

.final { background: var(--accent); }
.final__inner {
  max-width: 1100px; margin: 0 auto;
  padding: clamp(80px, 10vw, 160px) var(--pad-x);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.final p { font-size: 17px; line-height: 1.5; max-width: 52ch; }
.final .btn { margin-top: 8px; }

/* ============================================================
   Футер
   ============================================================ */

.footer {
  background: var(--ink); color: var(--bg);
  padding: clamp(56px, 7vw, 96px) var(--pad-x) 40px;
}
/* Поля футера задаёт его собственный padding, а у .container они лежат
   внутри колонки --maxw. При равных числах футер начинался бы левее
   контента ровно на ширину поля — вычитаем поля из максимума, и колонки
   футера встают под колонки страницы. */
.footer__inner { max-width: calc(var(--maxw) - 2 * var(--pad-x)); margin: 0 auto; }
.footer__wordmark {
  font-weight: 500; font-size: clamp(40px, 8vw, 90px);
  letter-spacing: -0.03em; line-height: 0.9;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.footer__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
}
.footer__title {
  font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 18px; color: var(--line);
}
.footer__list {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px; list-style: none; margin: 0; padding: 0;
}
.footer a { color: var(--bg); }
.footer a:hover { color: var(--accent); }
.footer__lang { display: flex; gap: 8px; margin-top: 18px; }
.footer__lang a {
  font-weight: 500; font-size: 13px;
  padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(245, 245, 235, 0.3);
  color: rgba(245, 245, 235, 0.6);
}
.footer__lang a.is-active {
  border-color: var(--accent); background: var(--accent); color: var(--ink);
}
.footer__bottom {
  margin-top: 48px; padding-top: 20px;
  border-top: 1px solid rgba(245, 245, 235, 0.14);
  font-size: 13px; color: rgba(245, 245, 235, 0.5);
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  align-items: baseline; justify-content: space-between;
}
/* Юридические ссылки: тише подписи, но кликабельны и на мобильном
   не слипаются друг с другом. */
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer__legal a { color: inherit; border-bottom: 1px solid transparent; }
.footer__legal a:hover { color: var(--bg); border-color: rgba(245, 245, 235, 0.4); }

/* ============================================================
   Внутренние страницы: шапка страницы, секции
   ============================================================ */

.page-head .container { padding-bottom: clamp(32px, 4vw, 48px); }
.page-head__lead { margin-top: 20px; max-width: 60ch; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.crumbs a { color: var(--muted); border-bottom: 1px solid var(--line); }

.section-plain .container { padding-top: 0; }
.section-alt { background: var(--bg); }

.widget-block { margin-top: clamp(40px, 5vw, 64px); }
.widget-block__title {
  font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.02em;
  margin-bottom: 20px;
}

/* ============================================================
   Виджет отзывов SmartWidgets — перекраска под бренд

   Виджет рендерится в обычный DOM (не iframe, не Shadow DOM),
   поэтому его классы sw-* можно переопределять.

   Про специфичность. Свой <style> виджет вставляет в <head> ПОСЛЕ нашей
   таблицы, и на каждый экземпляр генерирует персональное правило вида
   #sw-app-<id> .sw-review-item — это (1,1,0), столько же, сколько у
   #reviews-widget .sw-review-item, но оно идёт позже и выигрывает.
   Поэтому добавляем в цепочку .sw-app: получается (1,2,0) — перебиваем
   без !important.

   Логотипы 2GIS и Google внутри виджета не трогаем — чужие товарные знаки.
   ============================================================ */

#reviews-widget div.sw-app,
#reviews-widget .sw-app .sw-app-body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
}

/* Карточка отзыва — под наши скругления и границы, без чужих теней */
#reviews-widget .sw-app .sw-review-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: none;
}
#reviews-widget .sw-app .sw-review-item-user { font-weight: 500; color: var(--ink); }
#reviews-widget .sw-app .sw-review-item-date,
#reviews-widget .sw-app .sw-review-item-message { color: var(--muted); }
#reviews-widget .sw-app .sw-review-item-message { line-height: 1.55; }

/* Звёзды и рейтинг — фирменный жёлтый */
#reviews-widget .sw-app .sw-review-item-stars svg,
#reviews-widget .sw-app .sw-reviews-rating svg { fill: var(--accent); color: var(--accent); }
#reviews-widget .sw-app .sw-review-box-tab.active { border-color: var(--ink); }
#reviews-widget .sw-app .sw-reviews-rating-val {
  font-weight: 500; letter-spacing: -0.02em; color: var(--ink);
}

/* Стрелки карусели — в тон интерфейсу */
#reviews-widget .sw-app .sw-review-arrow {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
}

/* ============================================================
   Плавающая кнопка WhatsApp (мобильная)
   ============================================================ */

.wa-sticky {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: none; align-items: center; gap: 8px;
  background: var(--accent); color: var(--ink);
  font-weight: 500; font-size: 14px;
  padding: 12px 18px; border-radius: var(--r-pill);
  box-shadow: 0 8px 24px rgba(20, 20, 15, 0.18);
}
.wa-sticky svg { fill: currentColor; }
.wa-sticky:hover { color: var(--ink); }

@media (max-width: 768px) {
  .wa-sticky.is-visible { display: inline-flex; }
}

/* ============================================================
   Мобильные уточнения
   ============================================================ */

/* Шапка уходит в мобильный вид с 767px, а не с 640, как раньше.
   Причина: полное меню (пять пунктов) вместе с логотипом и кнопкой
   требует ряда примерно в 730px. В полосе 641–767 оно не помещалось
   и капсула разъезжалась на две строки. Порог поднят до планшетного:
   ниже 768 шапка всегда собранная, с гамбургером. */
@media (max-width: 767px) {
  /* Шапка: логотип слева, круглая кнопка WhatsApp и гамбургер справа.
     Меню уезжает внутрь капсулы и раскрывается по нажатию.

     row-gap: 0 обязателен — схлопнутая строка меню имеет нулевую
     высоту, но отступ между строками всё равно занимал бы место,
     и закрытая капсула была бы на 12px выше без всякой причины. */
  .nav {
    border-radius: var(--nav-radius);
    row-gap: 0; column-gap: 12px;
  }

  /* Название чуть мельче: с круглой кнопкой и гамбургером ряд
     на 360px иначе идёт впритык. Знак — те же полтора раза, что
     и на десктопе (было 30px): 45px в ряд помещается с запасом,
     высоту капсулы не поднимает. */
  .nav__brand { order: 1; font-size: 16px; }
  .nav__brand img { width: 45px; height: 45px; }

  /* WhatsApp — круглая кнопка с иконкой вместо надписи. Цвета
     фирменные: жёлтый круг, знак цветом чернил; оригинальный зелёный
     выбивался бы из палитры. margin-left: auto прижимает её вправо,
     вплотную к гамбургеру. */
  .nav__cta {
    order: 2; margin-left: auto;
    width: 42px; height: 42px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .nav__cta-text { display: none; }
  .nav__cta-icon { display: block; }

  .nav__burger {
    display: flex; order: 3;
    align-items: center; justify-content: center;
    /* 44px — минимальная зона нажатия по WCAG: в 38 палец не попадал.
       Отрицательное поле выросло вместе с кнопкой, чтобы полоски иконки
       остались на прежнем месте. */
    flex: 0 0 auto; width: 44px; height: 44px; margin-left: -7px;
    padding: 0; border: none; background: transparent; cursor: pointer;
    border-radius: var(--r-pill); color: inherit;
  }
  .nav__burger-box { position: relative; display: block; width: 20px; height: 10px; }

  /* Обе полоски строятся от одной базы — от середины коробки, —
     и разъезжаются трансформацией. Если одну задавать через top,
     а другую через bottom, при дробном масштабе (зум браузера,
     экраны с нецелой плотностью) их края округляются по-разному
     и одна выглядит толще. */
  .nav__burger-box span {
    position: absolute; left: 0; right: 0;
    top: 50%; height: 2px; margin-top: -1px;
    background: currentColor; border-radius: 1px;
    transition: transform 0.3s cubic-bezier(0.4, 0.1, 0.6, 0.9), opacity 0.2s ease;
  }
  .nav__burger-box span:first-child { transform: translateY(-4px); }
  .nav__burger-box span:last-child  { transform: translateY(4px); }
  .nav.is-open .nav__burger-box span:first-child { transform: rotate(45deg); }
  .nav.is-open .nav__burger-box span:last-child  { transform: rotate(-45deg); }

  /* Обёртка меню — отдельной строкой во всю ширину. Высота едет через
     grid-template-rows 0fr → 1fr: не нужно угадывать max-height, и
     раскрытие остаётся плавным при любом числе пунктов. */
  .nav > nav {
    order: 4; flex: 1 0 100%;
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0.1, 0.6, 0.9);
  }
  .nav.is-open > nav { grid-template-rows: 1fr; }

  /* overflow и min-height нужны, чтобы схлопнутая строка сетки
     действительно имела нулевую высоту. */
  .nav__menu {
    flex-direction: column; align-items: stretch;
    flex-wrap: nowrap; overflow: hidden; min-height: 0;
    gap: 0; font-size: 16px;
  }
  .nav__menu li:first-child { margin-top: 10px; }
  .nav__menu a {
    display: block; padding: 12px 2px;
    border-top: 1px solid rgba(20, 20, 15, 0.12);
  }
  .nav__menu li:first-child a { border-top: none; }
  .nav.is-scrolled.is-on-dark .nav__menu a { border-top-color: rgba(245, 245, 235, 0.16); }

  /* Выпадающие курсы внутри бургер-меню: не всплывающая карточка,
     а вложенный список — на телефоне ей просто негде всплыть. */
  .nav__drop-btn {
    width: 100%; justify-content: space-between;
    padding: 12px 2px; font-size: 16px;
  }
  .nav__drop-list {
    position: static; min-width: 0;
    padding: 0 0 8px 14px; margin: 0;
    background: none; box-shadow: none; border-radius: 0;
  }
  .nav__drop-list a { padding: 10px 2px; border-radius: 0; white-space: normal; }
  .nav__drop-list a:hover { background: none; }
  .nav__drop-list a[aria-current="page"] { background: none; font-weight: 600; }
  .nav__drop + li > a, .nav__drop ~ li > a { border-top: 1px solid rgba(20, 20, 15, 0.12); }
}

/* Контент: ряд вертикальных плиток 9/16 на узком экране раздувается
   на весь экран — переводим его в горизонтальную ленту. Порог здесь
   свой, 640px: к шапке эти правила отношения не имеют. */
@media (max-width: 640px) {
  .reels__grid {
    margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x));
    padding-left: var(--pad-x); padding-right: var(--pad-x);
  }
  .reel { flex-basis: clamp(150px, 45vw, 190px); }

  .reviews__videos { grid-template-columns: repeat(2, 1fr); }
}

/* Совсем узкие экраны (320–343px, старые iPhone SE и подобные):
   логотип с надписью, круглая кнопка и гамбургер вместе требуют
   269px, а в ряду остаётся 256 — надпись уходит, знак остаётся. */
@media (max-width: 343px) {
  .nav__brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav > nav,
  .nav__burger-box span { transition: none; }
}

/* ============================================================
   «Вау»-слой: Onest в заголовках, вопрос-приманка в герое,
   появление при скролле, hover-состояния, бегущая строка.
   Добавлено поверх базового макета — базовые правила не меняются.
   ============================================================ */

/* ---------- Onest для крупной типографики ----------
   Мелкий UI-текст (меню, метки, адреса) остаётся на Inter — так читабельнее. */
h1, h2, .h2,
.stat__value,
.course__title,
.quiz__intro h2,
.rating__score, .cert__score,
.lt__code,
.pcard__title, .pcard__price,
.step__num, .ladder__name,
.card__title, .post__cta-title,
.footer__wordmark,
.marquee__track {
  font-family: 'Onest', 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
}

/* ---------- Маркер-подсветка под ключевым словом H1 ----------
   Фон первого экрана жёлтый, поэтому мазок белый — иначе не виден. */
.mark { position: relative; white-space: nowrap; }
.mark::before {
  content: ""; position: absolute;
  left: -0.06em; right: -0.06em; top: 0.08em; bottom: 0.02em;
  background: var(--white);
  border-radius: 8px 10px 9px 11px;   /* лёгкая неровность — читается как мазок, а не плашка */
  transform: scaleX(0); transform-origin: left center;
  z-index: -1;
}
.is-ready .mark::before {
  animation: mark-in 0.65s 0.35s cubic-bezier(0.22, 0.9, 0.25, 1) forwards;
}
@keyframes mark-in { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .mark::before { transform: scaleX(1); animation: none; }
}

/* ---------- Вопрос-приманка в герое ---------- */
.taste {
  flex: 1 1 420px; min-width: 280px;
  background: var(--white); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: 0 18px 44px rgba(20, 20, 15, 0.12);
}
.taste__eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--bg); color: var(--muted);
  padding: 6px 12px; border-radius: var(--r-pill);
  margin-bottom: 18px;
}
.taste__q {
  font-weight: 500; font-size: clamp(19px, 2.2vw, 26px);
  letter-spacing: -0.02em; line-height: 1.25;
  margin: 0 0 20px;
}
.taste__q em { font-style: normal; color: var(--muted); }
.taste__opts { display: flex; flex-direction: column; gap: 10px; }
.taste__opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; font-size: 16px; font-weight: 400;
  padding: 15px 18px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); color: var(--ink); cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.taste__opt:hover { border-color: var(--ink); transform: translateX(3px); }
.taste__opt::after {
  content: ""; flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--line);
}
.taste__opt.is-right { border-color: var(--ink); background: var(--accent); transform: none; }
.taste__opt.is-right::after {
  content: "✓"; display: grid; place-items: center;
  border-color: var(--ink); background: var(--ink); color: var(--accent); font-size: 11px;
}
.taste__opt.is-wrong { border-color: var(--line); background: var(--bg); color: var(--muted); transform: none; }
.taste__opt.is-wrong::after { content: "×"; display: grid; place-items: center; font-size: 13px; }
.taste__opt[disabled] { cursor: default; }
.taste__answer { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.taste__verdict { font-weight: 500; font-size: 17px; margin-bottom: 6px; }
.taste__why { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-bottom: 18px; }
.taste__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.taste__meta { font-size: 14px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .taste__opt { transition: none; }
}

/* ---------- Композиция героя: девушка за карточкой, видна по пояс ----------
   Слой девушки — ПОД слоем карточки (z-index ниже). Карточка-тест наезжает
   на неё снизу и перекрывает всё ниже пояса → она «выглядывает» по пояс.
   Порядок: фигура сверху, карточка чуть наползает на неё снизу.
   Три числа под подгон: figure width (размер), height (линия пояса),
   taste margin-top (насколько карточка наезжает). */
/* Оба столбца героя — одной высоты, чтобы низ карточки совпадал с низом
   кнопки WhatsApp (обе колонки заканчиваются на одном уровне). */
.hero .hero__inner { align-items: stretch; }

.hero__media {
  flex: 1 1 480px; min-width: 300px; max-width: 560px;
  align-self: stretch;
  display: flex; flex-direction: column; align-items: center;
}

/* Девушка — нижний слой, крупная; низ прячется за карточкой.
   object-position задаёт кадр: чем больше %, тем выше поднимается голова
   (срезается пустота над ней). Это «рычаг» для тонкой подстройки. */
.hero__figure {
  position: relative; z-index: 1; order: 1;
  width: min(100%, 400px);
  flex: 1 1 0; min-height: 200px;   /* тянется вниз до карточки → карточка уезжает в самый низ */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent);
          mask-image: linear-gradient(to bottom, #000 92%, transparent);
}
/* В PNG сверху ≈21% прозрачного воздуха над головой — срезаем его,
   чтобы голова встала к плашке. margin-top в % считается от ширины,
   поэтому один множитель работает и на десктопе, и на мобиле. */
.hero__figure img {
  width: 100%; height: auto; display: block;
  margin-top: -25%;
}

/* Карточка — верхний слой, наезжает на пояс девушки.
   Строка «вопрос слева | варианты справа», разбор — на всю ширину под ней. */
.hero__media .taste {
  position: relative; z-index: 2; order: 2;
  flex: none; width: 100%;
  margin-top: -30px;
}
.hero__media .taste__row {
  display: flex; align-items: center;
  gap: clamp(18px, 2.2vw, 32px);
}
.hero__media .taste__head { flex: 1 1 44%; min-width: 0; }
.hero__media .taste__opts { flex: 1 1 56%; min-width: 0; }
.hero__media .taste__eyebrow { margin-bottom: 12px; }
.hero__media .taste__q { margin: 0; }

/* Второй экран (разбор) — оверлей поверх строки вопроса.
   Строка остаётся в потоке (visibility:hidden держит высоту),
   поэтому карточка НЕ меняет размер при переходе вопрос → ответ. */
.hero__media .taste.is-answered .taste__row { visibility: hidden; }
.hero__media .taste__answer {
  position: absolute; inset: 0; margin: 0;
  padding: clamp(24px, 3vw, 36px); border-top: 0;
  background: var(--white); border-radius: inherit;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(10px, 1.4vw, 16px);
}
.hero__media .taste__verdict { font-size: clamp(18px, 2vw, 22px); margin-bottom: 4px; }
.hero__media .taste__why { margin-bottom: 0; }
.hero__media .taste__answer .taste__cta {
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; gap: 10px 16px; margin: 0;
}

/* ---------- Диалог вокруг фигуры ----------
   Реплики стоят по краям колонки с девушкой: две слева, две справа,
   в шахматном порядке. Они наезжают на фигуру примерно на треть —
   так читается разговор ВОКРУГ человека, а не подпись рядом.

   Позиции заданы в процентах от высоты колонки, а не в пикселях:
   колонка тянется по высоте текстовой половины героя и на разных
   ширинах экрана разная. Нижняя реплика стоит на 47% — ниже начинается
   карточка-вопрос, и на неё заезжать нельзя.

   pointer-events: none у обёртки — реплики декоративные и не должны
   перехватывать клики по фигуре и карточке. */
.hero__media { position: relative; }

/* Узкий экран (до 1120px) — разговор в потоке, над фигурой.
   По краям он там не помещается: колонка короткая, карточка-вопрос
   поднимается почти под фигуру, и два пузыря по бокам сошлись бы
   в середине, закрыв девушку. Поэтому на телефоне это обычная
   переписка над фотографией: вопрос слева, ответ справа.

   Реплик две вместо четырёх — на первом экране телефона и так
   плотно. Лишние скрыты, app.js проигрывает только видимые. */
.talk {
  display: flex; flex-direction: column; gap: 8px;
  order: 0; width: 100%; margin-bottom: 12px;
}
.talk__line--in  { align-self: flex-start; }
.talk__line--out { align-self: flex-end; }
.talk__line:nth-child(n+3) { display: none; }

@media (min-width: 1120px) {
  .talk {
    display: block;
    position: absolute; inset: 0; z-index: 3;
    margin-bottom: 0;
    pointer-events: none;
  }
  .talk__line:nth-child(n+3) { display: block; }
}

.talk__line {
  position: relative;   /* якорь для точек «печатает» */
  max-width: min(88%, 300px);
  margin: 0; padding: 11px 16px;
  font-size: 14.5px; line-height: 1.3;
  background: var(--white); color: var(--ink);
  border-radius: 18px 18px 18px 5px;
  box-shadow: 0 10px 24px rgba(20, 20, 15, 0.13);
  /* Пока реплику не «произнесли», её нет: без этого все четыре
     висели бы на первом экране одновременно. */
  opacity: 0; transform: translateY(10px) scale(0.96);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 0.9, 0.25, 1);
}
.talk__line.is-in { opacity: 1; transform: none; }

.talk__line--out {
  background: var(--ink); color: var(--bg);
  border-radius: 18px 18px 5px 18px;
}

/* На широком экране реплики уходят из потока к краям колонки.
   Позиции — в процентах от её высоты, а не в пикселях: колонка
   тянется по текстовой половине героя и на разных ширинах разная.
   Нижняя стоит на 45%: ниже начинается карточка-вопрос. */
@media (min-width: 1120px) {
  .talk__line { position: absolute; max-width: min(46%, 232px); }

  .talk__line--in  { left: 0; }
  .talk__line--out { right: 0; }

  .talk__line:nth-child(1) { top: 6%; }
  .talk__line:nth-child(2) { top: 20%; }
  .talk__line:nth-child(3) { top: 34%; }
  .talk__line:nth-child(4) { top: 45%; }
}

/* Три точки, пока реплику «печатают».

   На узком экране реплики стоят в потоке, и пузырь не имеет права
   менять размер: под ним фигура и карточка-вопрос, они бы дёргались.
   Поэтому фраза остаётся на месте и лишь прячется (visibility),
   а точки лежат поверх неё — пузырь всё время одного размера.

   На широком реплики вынесены из потока и ничего не двигают:
   там пузырь может всплыть маленьким и раскрыться под фразу. */
.talk__dots {
  display: none; align-items: center; gap: 4px;
  height: 1.3em;
}
.talk__line.is-typing .talk__dots {
  display: flex;
  position: absolute; left: 16px; top: 50%;
  margin-top: -0.65em;
}
.talk__line.is-typing .talk__text { visibility: hidden; }

@media (min-width: 1120px) {
  .talk__line.is-typing .talk__dots { position: static; margin-top: 0; }
  .talk__line.is-typing .talk__text { display: none; }
}

.talk__dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: 0.35;
  animation: talk-dot 1.1s infinite ease-in-out;
}
.talk__dots i:nth-child(2) { animation-delay: 0.15s; }
.talk__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes talk-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .talk__line { transition: none; }
  .talk__dots i { animation: none; }
}

/* На узком экране — вертикально: вопрос над вариантами; кнопка разбора на всю ширину */
@media (max-width: 900px) {
  .hero__media { max-width: 420px; margin: 0 auto; }
  .hero__figure { width: min(78%, 320px); flex: 0 0 auto; height: clamp(180px, 46vw, 240px); min-height: 0; }
  .hero__media .taste { margin-top: -24px; }
  .hero__media .taste__row { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero__media .taste__eyebrow { margin-bottom: 10px; }
  .hero__media .taste__answer .taste__cta .btn { width: 100%; text-align: center; white-space: normal; }
}

/* ---------- Появление при скролле ----------
   Прячем только на главной (класс reveal-home ставит инлайн-скрипт в <head>
   ДО отрисовки — без мигания). is-in навешивает app.js. */
.reveal-home .stat,
.reveal-home .course,
.reveal-home .branch,
.reveal-home .reel,
.reveal-home .quote,
.reveal-home .eyebrow,
.reveal-home .h2,
.reveal-home .lead {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.9, 0.25, 1);
}
.reveal-home .is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal-home .stat, .reveal-home .course, .reveal-home .branch,
  .reveal-home .reel, .reveal-home .quote, .reveal-home .eyebrow,
  .reveal-home .h2, .reveal-home .lead {
    opacity: 1; transform: none; transition: none;
  }
}

/* ---------- Hover-состояния, которых раньше не было ---------- */
.course { transition: transform 0.25s cubic-bezier(0.22, 0.9, 0.25, 1), box-shadow 0.25s ease; }
/* Карточка курса участвует и в reveal, и в hover — общий transition,
   иначе reveal-переход (0.55s) делает наведение вялым. */
.reveal-home .course {
  transition: opacity 0.45s ease,
              transform 0.25s cubic-bezier(0.22, 0.9, 0.25, 1),
              box-shadow 0.25s ease;
}
.course svg { transition: transform 0.25s cubic-bezier(0.22, 0.9, 0.25, 1); }
.course:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(20, 20, 15, 0.10); }
.course:hover svg { transform: rotate(-8deg) scale(1.08); }
.course--featured:hover { box-shadow: 0 18px 36px rgba(20, 20, 15, 0.18); }

/* Строка филиала: жёлтая заливка слева направо + уезжающая стрелка */
.branch { position: relative; overflow: hidden; }
.branch::before {
  content: ""; position: absolute; inset: 1px 0 0;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.25, 1);
  z-index: 0;
}
.branch__num, .branch__body, .branch__name, .branch__addr, .branch__arrow { position: relative; z-index: 1; }
.branch:hover::before { transform: scaleX(1); }
.branch:hover .branch__addr { color: var(--ink); }
.branch__arrow { transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.25, 1); }
.branch:hover .branch__arrow { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .course, .course svg, .branch::before, .branch__arrow { transition: none; }
}

/* ---------- Бегущая строка в футере ---------- */
.marquee { display: flex; overflow: hidden; margin-bottom: clamp(48px, 6vw, 72px); user-select: none; }
.marquee__track {
  display: flex; flex: 0 0 auto; gap: 0.4em; padding-right: 0.4em;
  font-size: clamp(40px, 8vw, 110px);
  letter-spacing: -0.03em; line-height: 1; white-space: nowrap;
  animation: marquee 24s linear infinite;
}
.marquee__track span { flex: 0 0 auto; }
.marquee__track span:nth-child(even) { color: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ============================================================
   Страница «Тест на уровень» (/englishleveltest)
   ============================================================ */

.lt { background: var(--accent); }
.lt__container { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }

/* ---------- Старт: обещание, фото и лесенка ----------
   Композиция в три доли: слева текст с кнопкой, справа фото со своей
   плашкой фактов, под ними во всю ширину — лесенка ступеней. Раньше
   весь текст жался в левую треть, а правая половина жёлтого экрана
   пустовала. */

.lt__intro { display: flex; flex-direction: column; gap: clamp(32px, 5vw, 64px); }

.lt__hero { display: grid; gap: clamp(28px, 3vw, 44px); align-items: center; }
@media (min-width: 900px) {
  /* Левая доля примерно вдвое шире правой, а не «всё остальное»: при
     свободной левой колонке текст упирался в свои 15ch и между ним и
     фотографией зияла пустая полоса шириной с саму фотографию. */
  .lt__hero { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); }
}

.lt__badge {
  display: inline-block; margin-bottom: 18px;
  padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--bg);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.lt__h1 {
  letter-spacing: -0.02em;
  font-size: clamp(36px, 4.6vw, 68px); line-height: 0.98;
  max-width: 17ch;
}
.lt__lead {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5;
  max-width: 52ch; margin: clamp(16px, 2vw, 24px) 0 clamp(24px, 3vw, 32px);
}
.lt__go { min-width: 220px; justify-content: center; }
.lt__kids { font-size: 15px; color: rgba(20, 20, 15, 0.7); margin-top: 22px; }
.lt__kids a { border-bottom: 1px solid var(--ink); }

/* Фото: снимок и приклеенная к нему снизу плашка с фактами. Факты
   держатся на изображении, а не висят отдельным списком под кнопкой. */
/* В одну колонку снимок разворачивался на всю ширину и забирал
   пол-экрана — держим его в разумном размере и по центру. */
.lt__shot { position: relative; margin: 0 auto; width: 100%; max-width: 420px; }
@media (min-width: 900px) {
  /* На широком экране приходит горизонтальный кадр (см. <picture>), и
     снимок встаёт вровень с текстом. Точную высоту задаёт текстовая
     колонка: картинка вынута из потока, иначе высота ряда зависела бы
     от снимка, а снимок — от ряда. С горизонтальным кадром подрезка
     по краям незаметна, с вертикальным она съедала бы полголовы. */
  .lt__hero { align-items: stretch; }
  .lt__copy { align-self: center; }
  .lt__shot { max-width: 620px; margin-right: 0; min-height: 320px; }
  .lt__shot picture { position: absolute; inset: 0; }
  /* Селектор с picture — иначе базовое правило ниже по файлу
     возвращает height: auto, и снимок не дотягивается до низа рамки. */
  .lt__shot picture img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
}
.lt__shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
}
.lt__shot-facts {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px;
  padding: 12px 16px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 13px; line-height: 1.3; color: var(--muted);
}
.lt__shot-facts b { display: block; font-size: 16px; font-weight: 500; color: var(--ink); }

/* Лесенка: пять столбиков растущей высоты. Показывает и порядок
   уровней, и механику — тест поднимается по ним, пока получается.
   Высота столбика считается от его номера (--i), а не задаётся
   пятью правилами подряд. */
.lt__ladder {
  background: var(--white); border-radius: var(--r-lg);
  padding: clamp(20px, 2.6vw, 30px);
}
.lt__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 14px); align-items: end;
}
.lt__step { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lt__step-bar {
  display: flex; align-items: flex-end; justify-content: center;
  height: calc(46px + var(--i) * clamp(8px, 1.4vw, 18px));
  padding-bottom: 8px; border-radius: 12px;
  background: rgba(20, 20, 15, calc(0.05 + var(--i) * 0.028));
}
.lt__step-code { font-weight: 600; font-size: clamp(14px, 1.4vw, 17px); letter-spacing: -0.01em; }
.lt__step-name {
  font-size: 12.5px; line-height: 1.3; color: var(--muted);
  text-align: center; overflow-wrap: anywhere;
}
.lt__ladder-note {
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
  max-width: 68ch;
}

@media (max-width: 640px) {
  /* На телефоне названия ступеней съедают всю строку — оставляем коды,
     а расшифровку даёт таблица CEFR ниже по странице. */
  .lt__step-name { display: none; }
  .lt__step-bar { height: calc(38px + var(--i) * 7px); }
}

.lt__resume {
  background: var(--white); border-radius: var(--r-lg);
  padding: clamp(20px, 2.5vw, 28px); max-width: 480px;
}
.lt__resume-text { font-size: 16px; line-height: 1.5; margin-bottom: 16px; }
.lt__resume-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lt__reset {
  border: 0; background: none; cursor: pointer;
  font-size: 15px; color: var(--muted);
  border-bottom: 1px solid var(--line); padding: 0 0 2px;
}
.lt__reset:hover { color: var(--ink); border-bottom-color: var(--ink); }
.lt__fail { font-size: 16px; line-height: 1.5; max-width: 46ch; }

/* ---------- Общая панель вопросов и результата ----------
   Белый лист по центру жёлтого поля. Ширину держим в узде: задание
   на чтение строкой во весь монитор перестаёт читаться. */
.lt__pane {
  background: var(--white); border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 48px);
  max-width: 820px; margin-inline: auto;
}
.lt__pane--wide { max-width: 940px; }

/* ---------- Вопросы ---------- */

.lt__progress { margin-bottom: clamp(24px, 3vw, 34px); }
.lt__progress-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 10px;
}
.lt__stage, .lt__counter {
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.lt__counter { color: var(--muted); }
.lt__bar {
  height: 4px; border-radius: var(--r-pill);
  background: rgba(20, 20, 15, 0.12); overflow: hidden;
}
.lt__bar-fill {
  display: block; height: 100%; width: 0;
  background: var(--ink); border-radius: var(--r-pill);
  transition: width 0.35s cubic-bezier(0.22, 0.9, 0.25, 1);
}
.lt__last { font-size: 13px; color: var(--muted); margin-top: 10px; }

.lt__q {
  font-weight: 500; letter-spacing: -0.01em;
  font-size: clamp(21px, 2.4vw, 30px); line-height: 1.3;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
/* Текст для задания на чтение: мельче вопроса и отбит слева — видно,
   что это материал, а не сам вопрос. */
.lt__passage {
  display: block;
  font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6;
  padding-left: 16px; border-left: 3px solid var(--accent);
  margin-bottom: 18px;
}

.lt__opts {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: 1fr;
}
.lt__opt {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--bg); border: 1px solid transparent;
  border-radius: 14px;
  padding: 16px 18px; min-height: 56px;
  font: inherit; font-size: 17px; color: var(--ink);
  display: flex; align-items: center; gap: 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* Буква варианта — как в бумажном тесте: глазу есть за что зацепиться. */
.lt__opt::before {
  content: attr(data-letter);
  flex: 0 0 auto; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--white);
  font-size: 13px; font-weight: 500;
}
.lt__opt:hover { border-color: var(--ink); background: var(--white); }
.lt__opt.is-picked { border-color: var(--ink); background: var(--accent); }
.lt__opt.is-picked::before { background: var(--white); }

.lt__back {
  margin-top: clamp(20px, 2.4vw, 28px);
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--muted);
}
.lt__back:hover { color: var(--ink); }

@media (min-width: 720px) { .lt__opts { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .lt__opt, .lt__bar-fill { transition: none; }
}

/* ---------- Результат ---------- */

.lt__verdict {
  display: grid; gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(24px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .lt__verdict { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); align-items: start; }
}
.lt__code {
  letter-spacing: -0.03em;
  font-size: clamp(56px, 8vw, 96px); line-height: 0.9;
  margin: 8px 0 4px;
}
/* Слово длиннее своей колонки не вылезает на соседнюю, а переносится.
   На детском тесте «Свободнее сверстников» кеглем 44px выезжало на
   описание уровня и перечёркивало первую строку. */
.lt__verdict-badge > * { overflow-wrap: anywhere; }
.lt__name { font-size: clamp(16px, 1.6vw, 19px); font-weight: 500; color: var(--muted); }
.lt__text { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; }
.lt__text + .lt__text { margin-top: 12px; }

/* Разбор ошибок */
.lt__review, .lt__plan { margin-top: clamp(24px, 3vw, 34px); }
.lt__review-title, .lt__plan-title {
  font-size: 12px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted); margin-bottom: 16px;
}
.lt__review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lt__miss { background: var(--bg); border-radius: 14px; padding: clamp(14px, 1.8vw, 18px); }
.lt__miss-q { font-weight: 500; font-size: 16px; line-height: 1.4; margin-bottom: 10px; }
.lt__miss-row { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.lt__miss-bad { color: var(--muted); text-decoration: line-through; }
.lt__miss-good b { font-weight: 500; }
.lt__miss-why { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.lt__perfect {
  margin-top: clamp(24px, 3vw, 34px); font-size: 16px; line-height: 1.5;
  background: var(--bg); border-radius: 14px; padding: 16px 18px;
}

/* План */
.lt__plan-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .lt__plan-row { grid-template-columns: repeat(3, 1fr); } }
.lt__plan-cell { background: var(--accent); border-radius: 14px; padding: clamp(14px, 1.8vw, 18px); }
.lt__plan-value {
  display: block; font-weight: 500;
  font-size: clamp(19px, 2.2vw, 26px); letter-spacing: -0.01em; line-height: 1.15;
}
.lt__plan-label {
  display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.4;
  color: rgba(20, 20, 15, 0.74);
}
.lt__plan-note { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-top: 14px; }

/* Рекомендованный курс приходит из шаблона уровня */
.lt__rec-title { font-size: 15px; font-weight: 500; margin: 20px 0 10px; }
.lt__rec {
  display: block; background: var(--bg); border-radius: var(--r-md);
  padding: clamp(16px, 2vw, 22px);
  transition: transform 0.2s cubic-bezier(0.22, 0.9, 0.25, 1);
}
.lt__rec:hover { transform: translateY(-3px); color: var(--ink); }
.lt__rec-name { display: block; font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.lt__rec-desc { display: block; font-size: 15px; line-height: 1.5; color: var(--muted); }
.lt__alt { font-size: 15px; color: var(--muted); margin-top: 12px; }
.lt__alt a { border-bottom: 1px solid var(--ink); }

.lt__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px;
  margin-top: clamp(26px, 3.2vw, 36px);
}
.lt__note { font-size: 13px; color: var(--muted); max-width: 52ch; margin-top: 16px; }
.lt__res .lt__kids { margin-top: 10px; }
.lt__retry {
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--muted);
  border-bottom: 1px solid var(--line); padding: 0 0 2px;
}
.lt__retry:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .lt__rec { transition: none; }
  .lt__rec:hover { transform: none; }
}

/* Пока идёт тест — не перебиваем его плавающей кнопкой */
body.lt-active .wa-sticky { display: none; }

/* ---------- Шкала CEFR ---------- */

.cefr .h2 { margin: 16px 0 8px; max-width: 20ch; }
.cefr .lead { margin-bottom: clamp(32px, 4vw, 44px); max-width: 56ch; }
.cefr__list { display: flex; flex-direction: column; }
.cefr .acc__panel p + p { margin-top: 10px; }
/* Строка своего уровня: подсвечена и раскрыта скриптом */
.cefr .acc.is-you { background: var(--accent); border-radius: var(--r-md); }
.cefr .acc.is-you .acc__btn,
.cefr .acc.is-you .acc__panel { padding-left: 20px; padding-right: 20px; }

/* ---------- Почему верить ---------- */

.trust-why { background: var(--bg); }
.trust-why .h2 { margin-bottom: clamp(32px, 4vw, 44px); max-width: 20ch; }
.trust-why__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(20px, 2.5vw, 28px);
  grid-template-columns: 1fr;
}
.trust-why__list > li {
  background: var(--white); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px);
}
.trust-why__t { font-size: 18px; font-weight: 500; margin-bottom: 10px; }
.trust-why__list p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.trust-why__note {
  margin-top: clamp(28px, 3.5vw, 36px);
  font-size: clamp(17px, 1.8vw, 22px); line-height: 1.4;
  max-width: 40ch;
}
@media (min-width: 860px) {
  .trust-why__list { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Чего тест не умеет ---------- */

.honest { background: var(--white); }
/* Блок «честно» объявлен ниже модификаторов фона и перебивал их.
   На детском тесте он идёт сразу за белой таблицей уровней, и без
   этого правила две секции подряд оказывались одного цвета. */
.honest.section-alt { background: var(--bg); }
.honest .h2 { margin-bottom: 20px; max-width: 20ch; }
.honest .lead + .lead { margin-top: 14px; }
.honest .btn { margin-top: clamp(24px, 3vw, 32px); }

/* ---------- Полоса фактов (без анимации, в отличие от главной) ----------
   margin: 0 auto — как у базового .stats__inner. Раньше здесь стоял
   margin: 0, из-за чего полоса прижималась к левому краю и не совпадала
   с колонкой контента (H1, цены, филиалы центрированы в .container той же
   ширины). Центрируем — и ряд встаёт вровень с остальной страницей. */

/* Полоса цифр без карточки. Ряд не растягиваем на всю колонку: на
   широком мониторе четыре числа разъезжались на полтора метра и
   переставали читаться как один факт о школе. */
/* Колонки равной ширины — тогда и разделители стоят на равном
   расстоянии. Раньше здесь были равные доли от всей колонки страницы,
   и «165 000+» в свою треть не помещалось: перенос ему запрещён, число
   вылезало за ячейку, наезжало на соседнее и закрывало разделитель.
   Лечится не переносом, а тем, что ряд уже, а кегль в этом варианте
   блока меньше — числу хватает места, ряд остаётся ровным. */
.stats--flat .stats__inner {
  margin: 0 auto;
  max-width: 1240px;
  /* minmax(0, 1fr), а не 1fr: иначе самая широкая ячейка не даёт
     остальным сжаться, и колонки выходят разной ширины — а вместе
     с ними разъезжаются и разделители. */
  grid-template-columns: minmax(0, 1fr);
}
.stats--flat .stat { padding: 0 clamp(14px, 1.8vw, 26px); }
.stats--flat .stat__value { font-size: clamp(32px, 3.4vw, 48px); }

@media (min-width: 620px) {
  .stats--flat .stats__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .stats--flat .stats__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Когда под рядом стоит ссылка, нижний отступ ряда лишний: иначе между
   цифрами и ссылкой зияет 80px, и она читается как отдельный блок. */
.stats--flat .stats__inner:has(+ .stats__foot) { padding-bottom: clamp(18px, 2.2vw, 28px); }
/* Ссылка под рядом — по центру, а не в левом углу секции: иначе
   она висит сама по себе и не выглядит частью блока. */
.stats__foot {
  text-align: center;
  padding: 0 var(--pad-x) clamp(40px, 5vw, 68px);
}
.stats__link { display: inline-block; margin-top: clamp(24px, 3vw, 32px); }

/* ============================================================
   Страницы курсов
   Компоненты общие для /kursy-angliyskogo-almaty и следующих
   продуктовых страниц (/online, /ielts, /teenagers…).
   ============================================================ */

/* ---------- Первый экран продуктовой страницы ----------
   Не .hero с главной: там на медиа-колонку навешана композиция
   «девушка за карточкой» с отрицательными отступами. Здесь колонка
   обычная, поэтому отдельный блок, а не набор отмен чужих правил. */

.chero { background: var(--accent); }
.chero__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--pad-x);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(32px, 4.5vw, 64px);
}
.chero__copy { flex: 1 1 460px; min-width: 0; }

.chero h1 {
  font-size: clamp(38px, 6.6vw, 74px);
  line-height: 0.94; letter-spacing: -0.03em;
}
.chero__sub { font-size: 17px; line-height: 1.55; margin-top: 24px; max-width: 46ch; }
.chero__cta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px; margin-top: clamp(28px, 3.5vw, 36px);
}
.chero__media { flex: 1 1 360px; min-width: 260px; }
.chero__card {
  width: 100%; aspect-ratio: 4 / 3;
  background: var(--white);
  border-radius: var(--r-lg); overflow: hidden;
}
.chero__card img { width: 100%; height: 100%; object-fit: cover; }

/* Хлебные крошки на жёлтом: серый по .crumbs теряется, берём чернила */
.chero .crumbs, .chero .crumbs a { color: var(--ink); }
.chero .crumbs a { border-bottom-color: rgba(20, 20, 15, 0.35); }

/* ---------- Форматы и цены: карточки ----------
   На главной прайс идёт строками — он там один из пятнадцати блоков.
   Здесь это главный блок страницы: у каждого формата есть строка
   «кому подходит», а строкой она не читается. */

.pcards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
}
.pcard {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--white); border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 34px);
}
.pcard--featured { background: var(--accent); }

/* Форматов семь, и в три колонки последний оставался один в пустом
   ряду. Главный формат занимает две колонки: ряды заполняются целиком
   (2+1, 3, 3), а флагманское предложение заодно получает вес,
   которого у него не было. */
@media (min-width: 900px) {
  .pcards > .pcard--featured { grid-column: span 2; }
  .pcard--featured .pcard__num  { font-size: clamp(46px, 5vw, 62px); }
  .pcard--featured .pcard__desc { max-width: 52ch; }
}
/* Прайс должен читаться как прайс, а не как набор карточек: название
   уходит в подпись, цена становится главным, что видит глаз, а
   описание отделяется линией — как строка тарифа. */
.pcard__title {
  order: 1;
  font-size: 14px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.pcard__price {
  order: 2;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px;
  margin: 2px 0 4px;
  line-height: 1;
}
.pcard__from { font-size: 15px; font-weight: 400; color: var(--muted); }
.pcard__num  { font-size: clamp(34px, 3.6vw, 46px); letter-spacing: -0.03em; }
.pcard__unit { font-size: 15px; font-weight: 400; color: var(--muted); }

.pcard__desc {
  order: 3;
  margin-top: 4px; padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 15px; line-height: 1.5; color: var(--muted);
  flex: 1 1 auto;
}

/* Плашка на главном формате — обычный приём прайс-листов: сразу видно,
   какой вариант основной. Текст не выдуман, он из описания курса. */
.pcard__badge {
  order: 0; align-self: flex-start;
  margin-bottom: 6px; padding: 4px 12px;
  background: var(--ink); color: var(--accent);
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
.pcard--featured .pcard__title,
.pcard--featured .pcard__from,
.pcard--featured .pcard__unit { color: rgba(20, 20, 15, .62); }
.pcard--featured .pcard__desc {
  color: var(--ink);
  border-top-color: rgba(20, 20, 15, .18);
}
/* order обязателен: у соседей по карточке порядок задан явно, и без
   него ссылка уезжала в самый верх, вперёд названия. */
.pcard__link { order: 4; align-self: flex-start; margin-top: 12px; }

.pricing__switch { margin-top: clamp(24px, 3vw, 32px); }

/* ---------- Что входит в цену, кроме уроков ----------
   Плашка .free с прайса главной, но живёт отдельной секцией. */

.free__grid a { border-bottom: 1px solid var(--line); }
.free__grid a:hover { border-color: var(--muted); }
.free__note { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 24px; max-width: 60ch; }

/* Карточки-перечисление внутри белой плашки .free (только эта страница).
   Явные 3/2/1 колонки, а не auto-fit: раньше пять пунктов в четырёх
   колонках оставляли одинокую сироту в новом ряду. Три колонки дают
   3 + 2 — последний ряд по левому краю, как в обычной сетке. Карточки
   растягиваются на всю ширину колонки и потому одинаковы; фон бежевый
   (--bg), чтобы читались на белой плашке. */
.perks {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; list-style: none; margin: 20px 0 0; padding: 0;
}
.perk {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg); border-radius: var(--r-md);
  padding: 18px 20px;
}
@media (max-width: 900px) { .perks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .perks { grid-template-columns: 1fr; } }
.perk__check {
  flex: none; width: 24px; height: 24px; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--ink); border-radius: 50%;
}
.perk__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.perk__name { font-weight: 500; color: var(--ink); }
a.perk__name { align-self: flex-start; border-bottom: 1px solid var(--line); }
a.perk__name:hover { border-color: var(--muted); }
.perk__desc { font-size: 14px; line-height: 1.45; color: var(--muted); }

/* ---------- Карта филиалов ---------- */
.branches__map { margin-bottom: clamp(28px, 3.5vw, 40px); }

/* ---------- Фоны секций ----------
   .pricing, .branches и .courses задают фон сами. Эти модификаторы
   идут ниже по файлу и перебивают его — так на продуктовых страницах
   собирается чередование, а блоки остаются теми же. */
.section-white   { background: var(--white); }
.section-accent  { background: var(--accent); }

/* ---------- Карточка .free в акценте ----------
   Для главного бесплатного оффера страницы: жёлтая плашка вместо
   белой. Пилюля внутри становится тёмной — жёлтая на жёлтом
   растворилась бы, а галочки наоборот светлеют. */
.free--accent { background: var(--accent); }
.free--accent .free__pill { background: var(--ink); color: var(--bg); }
.free--accent .perk { background: rgba(255, 255, 255, 0.72); }
.free--accent .perk__check { background: var(--ink); color: var(--accent); }
/* Серый --muted на светлой плашке поверх жёлтого даёт контраст ~4:1 —
   ниже нормы для обычного текста. Берём чернила с прозрачностью. */
.free--accent .perk__desc { color: rgba(20, 20, 15, 0.74); }
.free .cta-row { margin-top: clamp(20px, 2.5vw, 28px); }

/* ---------- Карточки-сценарии белыми плашками ----------
   Базовый .scen__card залит бежевым и рассчитан на белую секцию.
   Модификатор переворачивает: белая плашка с тонкой рамкой — для
   бежевой секции. Метка над заголовком из серой подписи становится
   жёлтой пилюлей: это и есть цветовой акцент внутри блока. */
.scen--plates .scen__card {
  background: var(--white);
  border: 1px solid var(--line);
}
.scen--plates .scen__meta {
  display: inline-block;
  background: var(--accent); color: var(--ink);
  padding: 5px 12px; border-radius: var(--r-pill);
  letter-spacing: 0.06em; margin-bottom: 14px;
}

/* Карточки цен в рамке: когда секция белая, белая .pcard без рамки
   с фоном сливается. Тот же приём, что у .scen--plates. */
.pcards--framed .pcard { border: 1px solid var(--line); }
.pcards--framed .pcard--featured { border-color: transparent; }

/* То же для карточек-направлений: белая .course на белой секции
   без рамки сливается с фоном. */
.courses--framed .course { border: 1px solid var(--line); }
.courses--framed .course--featured { border-color: transparent; }

/* ---------- Строки-ориентиры: балл крупнее строки прайса ----------
   Число здесь — главный ориентир блока, а не приписка к названию. */
.bands .price__format { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.02em; }
.bands .price__value { align-self: center; }

/* ---------- Вертикальный ритм блока ----------
   Ставится на обёртку: <div class="container flow">.

   Зачем: у компонентов сайта вертикальные поля свои у каждого
   (.h2 — 16px, .scen — 44, .reviews__grid — 72, .pricing__note — 14),
   и в новом блоке они складываются в разнобой: замер на /ielts до
   правки дал зазоры 0, 14, 20, 24, 28, 32, 40, 44, 48, 72 и 104px.
   Внутри .flow собственные поля потомков гасятся, а расстояния
   задаются здесь — тремя значениями на всю страницу.

   Селектор с двумя классами (.container.flow) — не для красоты:
   секционные правила вида «.reviews .h2 { margin-bottom: 48px }»
   весят столько же, сколько одиночный .flow, и перебивали бы сброс. */
.container.flow > * { margin-top: 0; margin-bottom: 0; }
.container.flow > * + * { margin-top: clamp(20px, 2.4vw, 28px); }

/* Заголовок → содержание блока: главный «вдох» */
.container.flow > .h2 + * { margin-top: clamp(32px, 4vw, 48px); }

/* Заголовочная группа: метка → заголовок → вводный абзац — плотнее.
   Идут после правила выше и перебивают его для текстовых соседей. */
.container.flow > .eyebrow + .h2 { margin-top: 14px; }
.container.flow > .h2 + .lead,
.container.flow > .h2 + .pricing__note,
.container.flow > .h2 + .reviews__lead { margin-top: 18px; }

/* Вводный абзац → содержание: тот же «вдох», что после заголовка */
.container.flow > .lead + *,
.container.flow > .pricing__note + *,
.container.flow > .reviews__lead + * { margin-top: clamp(32px, 4vw, 48px); }

/* ---------- Мелкие утилиты ----------
   .cta-row — ряд кнопок по левому краю (у .leveltest__cta центрирование,
   для рядовых блоков оно не годится). */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.note { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Видимая пометка «сюда встанет контент от заказчика». Пунктир, а не
   обычный текст: заглушку должно быть видно как заглушку. */
.todo {
  font-size: 13px; line-height: 1.45; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--r-md);
  padding: 10px 14px;
}
/* Заглушка бывает и куском внутри абзаца (хвост ответа FAQ): без этого
   правила рамка облегала бы каждую строку переноса отдельно. */
span.todo { display: inline-block; margin-top: 6px; }

/* Заглушка-цитата: карточка отзыва, в которой ещё нет отзыва. Пунктир
   вместо чернильной линейки — чтобы дырка не притворялась контентом. */
.quote--todo { border-top: none; border: 1px dashed var(--line); border-radius: var(--r-md); padding: 16px; }
.quote--todo p { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.quote--todo cite, .quote--todo .quote__source { color: var(--muted); }

/* Серому тексту на жёлтой заливке не хватает контраста (3,83:1 при норме
   4,5): на акцентных секциях вместо --muted — полупрозрачные чернила.
   Тот же приём, что в .free--accent. */
.courses--accent .course__desc,
.courses--accent .course__num { color: rgba(20, 20, 15, .74); }
.chero .todo, .hero .todo, .lt__hero .todo {
  color: rgba(20, 20, 15, .74);
  border-color: rgba(20, 20, 15, .35);
}

/* Мелкая метка в карточке-сценарии: длительность модуля, время,
   любой короткий факт над заголовком. */
.scen__meta {
  display: block;
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin-bottom: 8px;
}

/* Акцентная врезка: одна мысль на жёлтой плашке. Появилась для
   страницы подростков («ошибаться — часть плана»), но ничего
   подросткового в ней нет — переиспользуемая. */
.callout {
  background: var(--accent); color: var(--ink);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.5vw, 28px);
  font-weight: 500; font-size: clamp(17px, 1.9vw, 21px);
  letter-spacing: -0.01em; line-height: 1.4;
  margin: clamp(20px, 2.5vw, 28px) 0 0;
}
.courses--accent { background: var(--accent); }

/* ---------- Мелочи блока методики ---------- */
.method__note { margin-top: 20px; }

/* ============================================================
   Место под плавающую шапку

   Шапка вынесена из потока, поэтому первый экран каждой страницы
   отступает сверху сам. max(), а не сумма: у первых экранов уже
   есть свои отступы, и складывать их с высотой шапки — значит
   увести заголовок далеко вниз, особенно на мобильной.

   Блок стоит в самом конце файла намеренно: у .lt__container и
   .chero__inner собственные padding объявлены ниже базовых правил,
   и раньше они перебивали этот отступ — заголовок упирался
   в капсулу.
   ============================================================ */

.hero__inner          { padding-top: max(clamp(56px, 8vw, 120px), var(--nav-space)); }
.lt__container        { padding-top: max(clamp(48px, 7vw, 88px),  var(--nav-space)); }
.chero__inner         { padding-top: max(clamp(48px, 7vw, 96px),  var(--nav-space)); }
.page-head .container { padding-top: max(var(--pad-y), var(--nav-space)); }

/* ---------- Первые экраны внутренних страниц: воздух поровну ----------
   Та же логика, что у главной ниже, только для .chero и теста.

   Было: сверху стоял max(воздух, --nav-space), то есть отступ ровно
   такой, чтобы заголовок не залез под капсулу. От нижней кромки
   капсулы до контента оставалось 24px, а снизу блока — 96. На глаз
   первый экран прижат к шапке и провисает внизу.

   Стало: сверху — высота капсулы с её отступом плюс тот же воздух,
   что снизу. Тогда видимые поля над контентом и под ним равны. */

.chero__inner {
  padding-top: calc(var(--nav-gap) + var(--nav-h) + clamp(48px, 7vw, 96px));
  padding-bottom: clamp(48px, 7vw, 96px);
}

.lt__container {
  padding-top: calc(var(--nav-gap) + var(--nav-h) + clamp(48px, 7vw, 88px));
  padding-bottom: clamp(48px, 7vw, 88px);
}

/* Шапка страницы (отзывы, блог, 404) — то же правило. Нижний отступ
   у неё свой, меньше обычного: следом идёт блок с нулевым верхним
   полем, и они читаются как один экран. */
.page-head .container {
  padding-top: calc(var(--nav-gap) + var(--nav-h) + clamp(32px, 4vw, 48px));
  padding-bottom: clamp(32px, 4vw, 48px);
}
/* Собственное верхнее поле первого элемента прибавлялось к отступу
   блока: на 404 заголовок начинался на 16px ниже, чем на соседях. */
.page-head .container > :first-child { margin-top: 0; }

/* Статья блога начинается сразу с крошек, без шапки-подложки, и в
   формулу отступа шапка не входила: на мобильном крошки заезжали
   ПОД капсулу (замер: −11px). Воздух сверху берём тот же, что у
   шапок остальных страниц. Нижнее поле статьи не трогаем — оно
   отделяет текст от блока «похожие», а не закрывает первый экран. */
.post > .container {
  padding-top: calc(var(--nav-gap) + var(--nav-h) + clamp(32px, 4vw, 48px));
}

/* Колонки первого экрана — по верхнему краю, а не по центру.
   При центрировании фото-карточка (она выше текста) вылезала над
   хлебными крошками и уходила ниже кнопки: четыре разных отступа
   вместо двух. Растягиваем карточку на высоту текстовой колонки —
   тогда верх и низ обеих колонок совпадают. */
@media (min-width: 901px) {
  .chero__inner { align-items: stretch; }
  .chero__media { display: flex; }
  .chero__card {
    flex: 1 1 auto;
    aspect-ratio: auto; min-height: 360px;
  }
}

/* ---------- Первый экран главной: контент строго по центру ----------
   На десктопе воздух сверху и снизу должен быть одинаковым — но мерить
   его надо не от кромки экрана, а от НИЖНЕЙ кромки капсулы: шапка
   вынесена из потока и «съедает» верхний отступ. Отсюда формула:
   сверху = высота капсулы с её отступом + тот же воздух, что снизу.
   max() выше этого не делает: там верхний отступ просто не даёт
   заголовку залезть под шапку, а центра не получается.
   Правило стоит последним, потому что перебивает строку .hero__inner. */
@media (min-width: 901px) {
  .hero__inner {
    padding-top: calc(var(--nav-gap) + var(--nav-h) + clamp(56px, 8vw, 120px));
    padding-bottom: clamp(56px, 8vw, 120px);
  }
}

/* ---------- Единый воздух над и под первым экраном — десктоп ----------
   Решение заказчика 01.08.2026: везде ровно 75px, а не свои clamp()
   на каждой странице. Мобильные значения (clamp в правилах выше)
   не трогаем — там свои пропорции под узкий экран.
   Стоит последним в файле — перебивает все клампы над этим блоком,
   включая только что заданную симметрию главной. */
@media (min-width: 901px) {
  .hero__inner,
  .chero__inner,
  .lt__container,
  .page-head .container {
    padding-top: calc(var(--nav-gap) + var(--nav-h) + 75px);
    padding-bottom: 75px;
  }
}

/* ============================================================
   Страница онлайн-курсов (/online) и преподаватели онлайна
   ============================================================ */

/* ---------- Сценарии-карточки: «живой урок» и «кому подходит» ----------
   Сетка 2×2, на планшете и мобиле складывается в столбик. Карточки
   цвета фона — блок ставится на section-white. */
.scen {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin-top: clamp(28px, 4vw, 44px);
}
.scen__card {
  background: var(--bg); border-radius: var(--r-lg);
  padding: clamp(20px, 2.5vw, 28px);
}
.scen__title { font-size: 17px; font-weight: 500; margin: 0 0 8px; }
.scen__desc { font-size: 14px; line-height: 1.55; color: var(--muted); }
@media (max-width: 720px) { .scen { grid-template-columns: 1fr; } }

/* ---------- Как начать: три пронумерованные карточки ---------- */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: clamp(28px, 4vw, 44px);
}
.step {
  background: var(--bg); border-radius: var(--r-lg);
  padding: clamp(20px, 2.5vw, 28px);
  display: flex; flex-direction: column; gap: 10px;
}
.step__num { font-size: clamp(28px, 3vw, 36px); letter-spacing: -0.02em; line-height: 1; }
.step__title { font-size: 17px; font-weight: 500; }
.step__desc { font-size: 14px; line-height: 1.55; color: var(--muted); }
.step__desc a { color: inherit; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Лестница уровней ----------
   Семь ступеней, каждая следующая выше предыдущей — путь виден
   буквально. На узком экране — горизонтальная прокрутка. */
.ladder {
  display: flex; gap: 12px; align-items: flex-end;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 10px; margin-top: clamp(28px, 4vw, 44px);
  scrollbar-width: none; -ms-overflow-style: none;
}
.ladder::-webkit-scrollbar { display: none; }
.ladder__step {
  flex: 1 0 124px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 14px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
}
.ladder__name { font-size: 14px; letter-spacing: -0.01em; }
.ladder__count { font-size: 12px; color: var(--muted); }
.ladder__step:nth-child(2) { padding-top: 28px; }
.ladder__step:nth-child(3) { padding-top: 40px; }
.ladder__step:nth-child(4) { padding-top: 52px; }
.ladder__step:nth-child(5) { padding-top: 64px; }
.ladder__step:nth-child(6) { padding-top: 76px; }
.ladder__step:nth-child(7) { padding-top: 88px; background: var(--accent); border-color: var(--accent); }
.ladder__step:nth-child(7) .ladder__count { color: var(--ink); }
.ladder__note { margin-top: 16px; font-size: 14px; color: var(--muted); max-width: 62ch; }

/* ---------- Сетка преподавателей (/online/teachers) ----------
   Карточка .teacher та же, что в лентах; здесь — сетка без прокрутки,
   смотрят всех сразу. */
.tgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: clamp(28px, 4vw, 44px);
  list-style: none; padding: 0;
}
.tgrid .teacher { flex: none; min-width: 0; width: auto; }
@media (max-width: 960px) { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tgrid { grid-template-columns: 1fr; } }

/* Заглушка вместо фото преподавателя, пока заказчик не прислал */
.teacher__photo--todo {
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px; text-align: center; padding: 12px;
}

/* ============================================================
   Блог: хаб /blog и страница статьи
   ============================================================ */

/* ---------- Рубрики-переключатели ---------- */

.chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 32px;
}

.chip {
  padding: 9px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font: inherit; font-size: 15px;
  cursor: pointer;
}
.chip:hover  { border-color: var(--ink); }
.chip--on    { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---------- Карточки статей ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Секция списка — на фоне страницы, чтобы белые карточки читались.
   Заголовок раздела выше уже на этом фоне, поэтому шва между ними нет. */
.blog { background: var(--bg); }
.blog .container { padding-top: 0; }

.card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  color: inherit; text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(20, 20, 15, .10);
}

/* Место под картинку. Одна и та же пропорция у обложки и у заглушки —
   поэтому сетка не перестраивается, когда фото наконец появится. */
.card__media {
  display: block; position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--bg);
}
.card__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Заглушка: фирменное жёлтое поле с крупной буквой рубрики.
   Диагональная штриховка добавляет фактуру, чтобы плашка не читалась
   как «не загрузилась картинка». */
.card__media--empty {
  background:
    repeating-linear-gradient(135deg,
      rgba(20, 20, 15, .05) 0 2px, transparent 2px 11px),
    linear-gradient(150deg, var(--accent) 0%, #ffe870 55%, #fff3ad 100%);
}
.card__letter {
  position: absolute; right: -.06em; bottom: -.30em;
  font-family: 'Onest', 'Inter', sans-serif;
  font-size: clamp(96px, 34cqw, 190px); font-weight: 600;
  line-height: 1; color: rgba(20, 20, 15, .13);
  user-select: none;
}
.card__mark {
  position: absolute; left: 20px; top: 18px;
  font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(20, 20, 15, .55);
}
.card__media { container-type: inline-size; }

.card__body   { display: flex; flex-direction: column; gap: 9px; padding: 22px 22px 20px; }
.card__rubric { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.card__title  { font-size: 20px; line-height: 1.22; letter-spacing: -0.015em; }
.card__desc   { color: var(--muted); font-size: 15px; line-height: 1.45; }
.card__meta   {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 13px;
}

/* Главная статья: на широком экране картинка слева, текст справа */
.cards--lead { grid-template-columns: 1fr; margin-bottom: 44px; }

@media (min-width: 760px) {
  .card--lead { flex-direction: row; align-items: stretch; }
  .card--lead .card__media { width: 48%; flex: none; aspect-ratio: auto; }
  .card--lead .card__body  { justify-content: center; padding: 40px 44px; }
  .card--lead .card__title { font-size: clamp(28px, 3vw, 38px); line-height: 1.1; }
  .card--lead .card__desc  { font-size: 17px; max-width: 56ch; }
  .card--lead .card__meta  { border-top: 0; padding-top: 4px; }
}

.blog__lead-label {
  margin: 0 0 12px;
  color: var(--muted); font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase;
}

.blog__title { margin: 0 0 20px; }
.blog__empty { color: var(--muted); }

.blog__more { margin-top: 32px; text-align: center; }
.blog__end  { color: var(--muted); font-size: 15px; }

/* ---------- Страница статьи ---------- */

.post__title {
  margin: 6px 0 10px;
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.post__meta { margin: 0 0 28px; color: var(--muted); font-size: 14px; }

.post__cover {
  display: block; width: 100%; height: auto;
  margin: 0 0 32px;
  border-radius: var(--r-md);
}

/* Оглавление: появляется только у длинных статей (>3 подзаголовков) */
.toc {
  margin: 0 0 32px; padding: 20px 24px;
  background: var(--bg);
  border-radius: var(--r-md);
}
.toc__title { margin: 0 0 10px; font-weight: 600; font-size: 15px; }
.toc__list  { margin: 0; padding-left: 20px; color: var(--muted); }
.toc__list li { margin-bottom: 6px; }
.toc__list a  { color: var(--ink); border-bottom: 1px solid var(--line); }

/* Текст статьи. Узкая колонка — читать длинные строки тяжело. */
.prose { max-width: 68ch; font-size: 18px; line-height: 1.65; }
.prose h2 { margin: 44px 0 14px; font-size: clamp(24px, 3vw, 30px); letter-spacing: -0.01em; scroll-margin-top: 90px; }
.prose h3 { margin: 32px 0 10px; font-size: 20px; }
.prose p, .prose ul, .prose ol { margin: 0 0 18px; }
.prose li { margin-bottom: 8px; }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }

/* Картинка между абзацами. Колонка статьи узкая (68ch) — снимок в неё
   ужимался бы до открытки, поэтому на широком экране figure чуть шире
   текста, симметрично в обе стороны. */
.prose__fig { margin: 32px 0; }
.prose__fig img { display: block; width: 100%; }
.prose__fig figcaption {
  margin-top: 10px;
  font-size: 14.5px; line-height: 1.45; color: var(--muted);
}
@media (min-width: 901px) {
  .prose__fig { margin-left: -40px; margin-right: -40px; }
  .prose__fig figcaption { margin-left: 40px; margin-right: 40px; }
}
.prose a { color: var(--ink); border-bottom: 1px solid var(--ink); }
.prose strong { font-weight: 600; }
.prose blockquote {
  margin: 0 0 18px; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 16px; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.prose th { font-weight: 600; }

/* Врезка в конце текста */
.post__cta {
  margin: 48px 0 0; padding: 28px;
  background: var(--bg);
  border-radius: var(--r-md);
}
.post__cta-title { margin: 0 0 6px; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.post__cta-text  { margin: 0 0 16px; color: var(--muted); }

.related { background: var(--bg); }

/* Таблица в статье шире экрана телефона — прокручивается сама */
@media (max-width: 640px) {
  .prose { font-size: 17px; }
  .prose table { display: block; overflow-x: auto; }
}

/* ============================================================
   ШИРОКАЯ СЕТКА — правила, которые включаются только на десктопе
   (принято 01.08.2026, обкатано на главной)

   Сама ширина колонки живёт в --maxw наверху файла. Здесь — то,
   что нужно доделать руками, когда колонка стала широкой:
   на 1400px свободного места auto-fit добавляет лишнюю колонку и
   в последнем ряду остаются одна-две карточки, а половинки
   двухколоночных секций дают строки в 90+ символов.

   Всё спрятано за min-width: 1120px — мобильный и планшет
   работают ровно так же, как до перехода на широкую сетку.
   ============================================================ */

@media (min-width: 1120px) {

  /* ---------- Первый экран главной ----------
     Колонка с фигурой и карточкой-тестом растёт вслед за экраном,
     но не бесконечно: выше 640px фигура выглядит постером. */
  .hero__media  { max-width: 640px; }
  .hero__figure { width: min(100%, 460px); }

  /* ---------- Сетки карточек ----------
     Число колонок фиксируем под фактическое количество блоков:
     6 курсов → 3×2, 6 отзывов → 3×2, 8 филиалов → 2×4. */
  .courses__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  /* Карточка шире — поднимаем и высоту, иначе курсы читались бы
     плоскими плашками. */
  .course { min-height: 260px; }

  .reviews__grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .branches__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .free__grid     { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Вертикальные ролики 9:16. Если дать им растянуться по всей
     ширине, каждый станет под 600px высотой и ряд займёт полтора
     экрана — ограничиваем ширину, остаток уходит в промежутки. */
  .reviews__videos {
    grid-template-columns: repeat(4, minmax(0, 300px));
    justify-content: space-between;
  }
  .reels__grid { justify-content: space-between; }
  .reel { flex-basis: calc((100% - 4 * 16px) / 5); max-width: 264px; }

  /* ---------- Двухколоночные секции ----------
     Текстовая колонка фиксируется, содержательная забирает остаток. */
  .agenda__intro { flex: 0 1 400px; }
  .agenda__list  { flex: 1 1 620px; }

  .method__intro { flex: 0 1 460px; }
  .method__list  { flex: 1 1 640px; }

  .quiz__intro   { flex: 0 1 400px; }
  .quiz__body    { flex: 1 1 640px; }
  .quiz__island  { padding: clamp(32px, 4.5vw, 80px); }

  /* Комьюнити — блок, который на широкой сетке не растягиваем.
     Фото задано пропорцией 4:3, и во всю колонку оно вырастало
     под 680px высоты: вместо иллюстрации получался постер.
     Обе колонки ограничены, свободная ширина уходит в промежуток
     между ними.

     Потолок задан через max-width, а не жёсткой основой: на
     ноутбуке 1280–1400 фиксированные 560+560 уже не влезали
     в строку, и вкладки сваливались под фото. */
  .community__cols   { justify-content: space-between; }
  .community__panels { flex: 1 1 440px; max-width: 560px; }
  .community__tabs   { flex: 1 1 380px; max-width: 560px; }

  /* ---------- Внутренние страницы ---------- */

  /* Карточки цен (/kursy-angliyskogo-almaty, /online). Сетка на
     широкой колонке даёт четыре карточки в ряд — размер тот же, что
     был на узкой, просто в ряд помещается больше. Но число карточек
     на страницах разное (7 и 8, а редактор может добавить ещё), и
     остаток последнего ряда болтался бы одинокой плашкой.
     Поэтому здесь flex, а не grid: карточки в неполном ряду
     растягиваются на его ширину — как это уже делает выделенная. */
  .pcards { display: flex; flex-wrap: wrap; }
  .pcards > .pcard { flex: 1 1 300px; }
  .pcards > .pcard--featured { flex: 2 1 620px; }

  /* Преподаватели онлайна (/online/teachers). Шесть карточек стоят
     сеткой 3×2, и во всю ширину каждая разъезжалась до 453px —
     портрет 4:5 превращался в постер. Ограничиваем ряд: карточка
     возвращается к размеру карточек преподавателей на главной. */
  .tgrid { max-width: 1200px; }

  /* ---------- Блоки, которые оставались узкой колонкой ----------
     Тест, прайс и FAQ верстались под сетку 1200 и на широкой
     смотрелись столбиком посреди пустого экрана. Разворачиваем их
     на всю колонку: где контента мало — в два столбца. */

  /* Тест на уровень. Был центрированный столбик; теперь заголовок
     слева, текст и кнопки — справа, как в остальных двухколоночных
     секциях. Заголовок занимает две строки сетки: без этого кнопки
     ушли бы вниз, под самый крупный шрифт страницы. */
  .leveltest {
    display: grid; align-items: start; text-align: left;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    column-gap: clamp(48px, 6vw, 96px); row-gap: 20px;
  }
  .leveltest .eyebrow { grid-column: 1; grid-row: 1; }
  .leveltest h2       { grid-column: 1; grid-row: 2 / span 2; max-width: 12ch; }
  .leveltest p        { grid-column: 2; grid-row: 2; max-width: none; }
  .leveltest__cta     { grid-column: 2; grid-row: 3; justify-content: flex-start; margin-top: 0; }

  /* Прайс. Строка «формат — цена» во всю ширину монитора превращалась
     бы в прочерк на полтора метра: между названием и суммой глазу
     не за что зацепиться. Поэтому строки идут в два столбца. */
  .pricing__rows {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(48px, 5vw, 80px);
  }
  .pricing__rows > .rule--ink { grid-column: 1 / -1; }

  /* FAQ — так же: восемь вопросов в два столбца, заголовок над ними.
     Открытый ответ растит свою строку сетки, соседний вопрос остаётся
     прижатым к верху — поэтому align-items: start. */
  .faq__list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(48px, 5vw, 80px);
    align-items: start;
  }
}

/* Карточка-не-ссылка (например «Учишься у нас» на /events) выглядит
   как остальные, но никуда не ведёт — значит, и подниматься под
   курсором не должна: подъём обещает клик, которого нет. */
.course:not(a):hover { transform: none; box-shadow: none; }

/* ---------- Адреса филиалов там, где они содержание ----------
   В общем списке .branch__addr обрезается многоточием: на главной это
   подпись под названием, и длинный адрес Манго растянул бы карточку.
   На хабе филиалов и на самих страницах филиалов адрес — то, ради чего
   человек пришёл, поэтому переносим его на вторую строку целиком. */
.branches--full .branch__addr { white-space: normal; overflow: visible; text-overflow: clip; }

/* ---------- Афиша мероприятий (/events) ----------
   Список «дата — событие», собирается из data/events.json. Дата стоит
   отдельной колонкой и не переносится: человек сканирует афишу по
   числам, а не по названиям. На узком экране колонки складываются
   в строки, потому что 130px под дату — это половина мобильного
   экрана, и названию не осталось бы места. */
.afisha__month {
  font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.02em;
  margin: clamp(28px, 3vw, 40px) 0 4px;
}
.afisha__month:first-child { margin-top: 0; }
.afisha__list { display: grid; }
.afisha__row {
  display: flex; gap: clamp(16px, 2vw, 28px);
  align-items: baseline;
  padding: clamp(14px, 1.8vw, 20px) 0;
  border-top: 1px solid var(--line);
}
.afisha__date {
  flex: 0 0 auto; min-width: 130px;
  font-size: 15px; color: var(--muted);
}
.afisha__date b { font-size: clamp(20px, 2vw, 24px); color: var(--ink); font-weight: 500; }
.afisha__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.afisha__title {
  font-weight: 500; font-size: clamp(16px, 1.7vw, 19px); letter-spacing: -0.01em;
}
.afisha__note {
  font-size: 13px; font-weight: 500;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--accent);
}
.afisha__where { flex: 1 0 100%; font-size: 13.5px; color: var(--muted); }

@media (max-width: 600px) {
  .afisha__row { flex-direction: column; gap: 6px; }
  .afisha__date { min-width: 0; }
}

/* ---------- Карточка команды (/team) ----------
   Не преподаватель: у человека из команды нет ни цитаты об уроках, ни
   строки опыта — есть должность. Поэтому своя карточка, а не .teacher
   с переименованными полями. Сетка та же, .tgrid. */
.tcard {
  background: var(--white); border-radius: var(--r-lg);
  padding: clamp(16px, 2vw, 22px); min-width: 0;
}
.section-white .tcard, .courses--framed .tcard { border: 1px solid var(--line); }
.tcard__photo {
  aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden;
  margin-bottom: 14px; background: var(--bg);
}
.tcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.tcard__name { font-weight: 500; font-size: clamp(17px, 1.8vw, 20px); letter-spacing: -0.01em; }
.tcard__role { font-size: 14px; color: var(--muted); margin-top: 2px; }
.tcard__bio { font-size: 14.5px; line-height: 1.5; margin-top: 10px; }

/* ---------- Второе событие того же дня ----------
   В воскресенье бывает и Speaking Club, и матч турнира: две отдельные
   строки, но дата написана один раз. Пустая ячейка держит колонку,
   чтобы названия остались на одной вертикали, а строка прижимается
   к предыдущей — так видно, что это один день. */
.afisha__row--same, .event--same { border-top: 0; padding-top: 0; }
.afisha__date--same, .event__date--same { visibility: hidden; }

@media (max-width: 600px) {
  /* В колонку пустая ячейка съела бы вертикальный ритм — прячем совсем. */
  .afisha__date--same { display: none; }
}

/* ---------- Детский тест (/test-dlya-detey) ----------
   Механика и панель общие со взрослым тестом, но за экраном сидит
   ребёнок: кнопки крупнее и всегда столбиком, прогресс — точками,
   а ступени названы словами вместо букв CEFR. */

.lt--kids .lt__opts { grid-template-columns: 1fr; }
.lt--kids .lt__opt { min-height: 64px; font-size: 18px; }
.lt--kids .lt__q { font-size: clamp(22px, 2.6vw, 32px); }

/* Точки вместо полосы: каждая закрашенная — маленькая награда,
   и видно, сколько осталось до конца ступени. */
.lt__dots { display: flex; gap: 8px; align-items: center; }
.lt__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(20, 20, 15, 0.14);
  transition: background 0.25s ease, transform 0.25s ease;
}
.lt__dot.is-done { background: var(--ink); }
.lt__dot.is-now { background: var(--accent); transform: scale(1.4); }
@media (prefers-reduced-motion: reduce) { .lt__dot { transition: none; } }

/* В результате крупно название ступени, буква — подписью: родителю
   нужна буква, ребёнку — слова. */
.lt__name--big {
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.05;
  font-size: clamp(26px, 2.8vw, 38px); color: var(--ink);
}
/* Колонка вердикта под название словами, а не под двухбуквенный код:
   «Свободнее сверстников» в 200px не помещается ни при каком кегле,
   который ещё читается как заголовок. */
@media (min-width: 720px) {
  .lt--kids .lt__verdict { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}
.lt__code--small { font-size: 15px; color: var(--muted); margin-top: 6px; }

/* Похвала ребёнку: любой результат заканчивается на добром слове. */
.lt__praise {
  margin-top: clamp(22px, 2.8vw, 30px);
  padding: 16px 18px; border-radius: 14px;
  background: var(--accent);
  font-size: 16px; line-height: 1.5;
}