/* ==========================================================================
   Страница программы SAT – нода Figma 32417:2808 (1920×12889).

   Файл подключается сам по слугу страницы (см. inc/enqueue.php), зависит
   от base.css и, через него, от variables.css.

   ЭТО ШАБЛОН ДЛЯ ВСЕХ СТРАНИЦ ПРОГРАММ. Классы .prog-* описывают не «SAT»,
   а тип блока, и рассчитаны на переиспользование в page-ielts.css,
   page-ap.css и т.д. Если такой странице нужен тот же блок – копируйте
   разметку и не трогайте классы; если нужен другой – заводите новый
   модификатор, а не переопределяйте общий класс под свою страницу.

   Локальные токены ниже – значения, которых НЕТ в variables.css: кегли 36,
   40 и 64, цвета остановок градиентов и размеры повторяющихся элементов.
   Всё остальное берётся из переменных темы; хардкода цветов здесь нет.
   ========================================================================== */

.prog-page {

  /* --- Кегли, которых нет в системе ------------------------- [РЕНДЕР] --- */
  /* Заголовок секции: 36px, но трекинг -0.06em и интерлиньяж 0.9 – это НЕ
     переменная text_36_med из Figma (у неё 1 и -0.08em). Два разных стиля
     на одном кегле, так в макете. */
  --prog-fs-title:      36px;
  --prog-lh-title:      .9;
  --prog-ls-title:      -.02em;

  /* Заголовок карточки = Figma text_36_med */
  --prog-fs-title-lg:   36px;
  --prog-lh-title-lg:   1;
  --prog-ls-title-lg:   -.03em;

  /* Крупный заголовок синих блоков и слово «видео» на заглушках */
  --prog-fs-display:    64px;
  --prog-lh-display:    .9;
  --prog-ls-display:    -.03em;

  /* Заголовок финального блока – единственные 40px на странице */
  --prog-fs-final:      40px;
  --prog-lh-final:      1.2;
  --prog-ls-final:      -.02em;

  /* --- Размеры повторяющихся элементов ---------------------- [РЕНДЕР] --- */
  --prog-num:           48px;    /* кружок с номером карточки */
  --prog-icon:          93px;    /* плашка с иконкой */
  --prog-icon-radius:   15.5px;  /* её радиус: не 16, так в макете */
  --prog-check:         52px;    /* галочка/крестик в списках */
  --prog-pad-bleed:     96px;    /* боковые поля синих блоков во всю ширину */
  --prog-gap-40:        40px;    /* отступ, которого нет в шкале space-* */
  --prog-gap-50:        50px;
  --prog-tile:          225.667px; /* плитка «01/02/03» на синем */
  --prog-tile-h:        253px;

  /* --- Цвета: остановки градиентов -------------------------- [РЕНДЕР] --- */
  /* В переменные Figma не вынесены, сняты с нод 32417:3017-3019. */
  --prog-orb-mid-end:   #D7ECFF;
  --prog-orb-out-start: rgba(75, 169, 255, .06);
  --prog-orb-out-end:   #85C5FF;

  /* Заливки заглушек «видео» и карточки-подложки. Углы – из макета,
     это уже CSS-градусы, пересчитывать не надо. */
  --prog-grad-info:   linear-gradient(131.086deg, #F2F2F8 13.262%, #B5DCFF 127.31%);
  --prog-grad-lilac:  linear-gradient(136.565deg, #E6DBFF 13.411%, #B5DCFF 97.274%);
  --prog-grad-lilac2: linear-gradient(127.53deg,  #E6DBFF 13.411%, #B5DCFF 97.274%);
  --prog-grad-lilac3: linear-gradient(116.537deg, #E6DBFF 13.411%, #B5DCFF 97.274%);
  --prog-grad-mint:   linear-gradient(218.359deg, #2AA7A4 5.865%,  #AAE2E0 93.213%);
  --prog-grad-red:    linear-gradient(-28.463deg, #FFC0C5 3.404%,  #FF6672 96.821%);
  --prog-grad-purple: linear-gradient(219.294deg, #845BEA 4.933%,  #D2C0FF 97.662%);
  --prog-grad-yellow: linear-gradient(128.023deg, #F7A602 6.158%,  #FFEABE 95.523%);
  --prog-grad-blue:   linear-gradient(140.881deg, #2597FF 2.979%,  #C8E5FF 97.198%);
}

/* Ритм страницы: 140px между секциями – единственный промежуток макета. */
.prog-page > .prog-section + .prog-section { margin-top: var(--section-gap); }


/* ==========================================================================
   ОБЩИЕ ЭЛЕМЕНТЫ СЕКЦИЙ
   ========================================================================== */

/* --- Шапка секции: подпись с точкой + заголовок --------------------------- */

.prog-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}
.prog-head--center { align-items: center; text-align: center; }

.prog-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-body);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-body);
}
.prog-eyebrow__dot {
  flex: none;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.prog-title {
  font-size: var(--prog-fs-title);
  line-height: var(--prog-lh-title);
  font-weight: var(--fw-h2);
  letter-spacing: var(--prog-ls-title);
}
.prog-title--narrow { max-width: 764px; }

.prog-title-lg {
  font-size: var(--prog-fs-title-lg);
  line-height: var(--prog-lh-title-lg);
  font-weight: var(--fw-h2);
  letter-spacing: var(--prog-ls-title-lg);
}

.prog-display {
  font-size: var(--prog-fs-display);
  line-height: var(--prog-lh-display);
  font-weight: var(--fw-h2);
  letter-spacing: var(--prog-ls-display);
}

.prog-lead {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-body);   /* в макете 28px именно Regular */
  letter-spacing: var(--ls-h2);
}

.prog-subtitle {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
}
.prog-subtitle--center { text-align: center; }

/* Приглушённый текст. В макете это не отдельный цвет, а прозрачность 60 % –
   поэтому opacity, а не --color-text-muted. */
.prog-muted { opacity: .6; }

/* Цветные фрагменты внутри заголовков: цвет несёт смысл (этап пути, уровень),
   поэтому берётся из категорийной палитры. */
.prog-accent--blue   { color: var(--color-brand); }
.prog-accent--red    { color: var(--color-red); }
.prog-accent--green  { color: var(--color-green); }
.prog-accent--mint   { color: var(--color-mint); }
.prog-accent--purple { color: var(--color-purple); }
.prog-accent--yellow { color: var(--color-yellow); }

/* --- Вводный блок под заголовком: лид слева, пояснение справа ------------- */

.prog-intro {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-20);
  margin-top: var(--space-48);
}
.prog-intro__note { grid-column: 2 / span 2; max-width: 541px; }
.prog-intro--stack { display: flex; flex-direction: column; gap: 25px; }

/* --- Таблетка-ярлык ------------------------------------------------------ */
/*
   Отличается от базового .badge: в макете программ у неё высота по контенту
   (padding 2.82px) и вес 500, а не 600. Поэтому свой класс, а не модификатор
   базового – иначе пришлось бы переопределять три свойства из четырёх.

   Угол наклона задаётся из разметки через --rot: у каждой плашки он свой,
   и это не случайность – так нарисовано.
*/
.prog-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2.82px 11.278px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text-invert);
  white-space: nowrap;
  vertical-align: middle;
  transform: rotate(var(--rot, 0deg));
}
.prog-pill--sm { padding-inline: var(--space-12); font-size: var(--fs-body); line-height: var(--lh-h3); }
.prog-pill--lg { padding-inline: var(--space-16); }

.prog-pill--red    { background: var(--color-red); }
.prog-pill--green  { background: var(--color-green); }
.prog-pill--mint   { background: var(--color-mint); }
.prog-pill--purple { background: var(--color-purple); }
.prog-pill--yellow { background: var(--color-yellow); }
.prog-pill--blue   { background: var(--color-brand); }

/* --- Карточка ------------------------------------------------------------ */
/*
   Базовый .card из base.css не подошёл: там центрирование и фиксированный
   светло-синий фон, а здесь карточка бывает и серой, и белой, и с раскладкой
   space-between. Общего осталось только скругление – дублировать ради него
   каскад не стоит.
*/
.prog-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
}
.prog-card--soft { background: var(--color-bg-soft); }
.prog-card--cold { background: var(--color-bg-cold); }
.prog-card--center {
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  text-align: center;
}

.prog-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.prog-card__body { display: flex; flex-direction: column; gap: var(--space-20); }

.prog-card__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--prog-num);
  height: var(--prog-num);
  border-radius: var(--radius-pill);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  letter-spacing: var(--ls-h3);
  color: var(--color-text-invert);
}
.prog-card__num--red    { background: var(--color-red); }
.prog-card__num--green  { background: var(--color-green); }
.prog-card__num--mint   { background: var(--color-mint); }
.prog-card__num--purple { background: var(--color-purple); }
.prog-card__num--yellow { background: var(--color-yellow); }
.prog-card__num--blue   { background: var(--color-brand); }

/* --- Плашка с иконкой ---------------------------------------------------- */

.prog-iconbox {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--prog-icon);
  height: var(--prog-icon);
  border-radius: var(--prog-icon-radius);
}
/* Иконки, где заливка плашки уже вшита в картинку: у них глиф собран из
   десятка векторов, и разбирать его на CSS-фон нет смысла.
   --fill: глиф нарисован во весь квадрат, фон при этом остаётся на CSS. */
.prog-iconbox--bare img,
.prog-iconbox--fill img { width: var(--prog-icon); height: var(--prog-icon); }

.prog-iconbox--red    { background: var(--color-red); }
.prog-iconbox--green  { background: var(--color-green); }
.prog-iconbox--mint   { background: var(--color-mint); }
.prog-iconbox--purple { background: var(--color-purple); }
.prog-iconbox--yellow { background: var(--color-yellow); }
.prog-iconbox--blue   { background: var(--color-brand); }

/* --- Списки с галочками -------------------------------------------------- */

.prog-checklist { display: flex; flex-direction: column; gap: var(--space-12); }
.prog-checklist--wide { gap: var(--space-24); }
.prog-checklist > li { display: flex; align-items: center; gap: var(--space-4); }
.prog-checklist--wide > li { align-items: flex-start; }
.prog-checklist img { flex: none; width: var(--prog-check); height: var(--prog-check); }

/* Маркированный список внутри карточки уровня – единственные буллиты страницы. */
.prog-bullets { list-style: disc; padding-left: 30px; }

/* --- Кнопки -------------------------------------------------------------- */
/*
   Геометрия у кнопок программ своя: 57px против 48px у базовой .btn, поля 20
   вместо 24 и кегль 20/600. Поэтому .btn--prog – модификатор, а не новый
   компонент: сброс, скругление и переходы берутся из base.css.

   Состояний наведения в макете нет ни у одной кнопки, кроме той, что уже
   описана в base.css для .btn--primary. Своих hover здесь не добавлено.
*/
.btn--prog {
  min-height: var(--btn-height);
  padding-inline: var(--space-20);
  gap: var(--space-4);
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: var(--fw-btn);
  letter-spacing: var(--ls-btn);
  text-align: center;
}
.btn--prog-white   { background: var(--color-bg); color: var(--color-text); }
.btn--prog-ghost   { background: var(--color-brand); color: var(--color-text-invert); border: 1px solid var(--color-bg); }
.btn--prog-outline { border: 1px solid var(--color-brand); color: var(--color-brand); }

/* --- Заглушка «видео» ---------------------------------------------------- */
/*
   В макете это цветной прямоугольник со словом «видео» на 22 % прозрачности.
   Плеера нет – значит и здесь его нет. Когда появятся ролики, разметка
   меняется внутри .prog-video, класс остаётся.
*/
.prog-video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.prog-video > span {
  font-size: var(--prog-fs-display);
  line-height: var(--prog-lh-display);
  font-weight: var(--fw-h2);
  letter-spacing: var(--prog-ls-display);
  color: var(--color-text);
  opacity: .22;
  text-align: center;
}
.prog-video--plate  { background: var(--color-bg); }
.prog-video--lilac  { background: var(--prog-grad-lilac); }
.prog-video--mint   { background: var(--prog-grad-mint); }
.prog-video--red    { background: var(--prog-grad-red); }
.prog-video--purple { background: var(--prog-grad-purple); }
.prog-video--yellow { background: var(--prog-grad-yellow); }
.prog-video--blue   { background: var(--prog-grad-blue); }

/* --- Круги-подложки на синем --------------------------------------------- */
/*
   Три вложенных круга: сплошной, с градиентом вниз и почти прозрачный.
   В макете это три SVG-круга, но заливки простые – незачем тянуть картинки.
   Размеры и координаты задаются модификатором, X в процентах от 1920, чтобы
   на узких экранах облако не уезжало за край.
*/
.prog-orbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.prog-orbs__c { position: absolute; display: block; border-radius: 50%; }
.prog-orbs__c--1 { background: var(--color-blue-light); }
.prog-orbs__c--2 { background: linear-gradient(180deg, var(--color-blue-light) 0%, var(--prog-orb-mid-end) 100%); }
.prog-orbs__c--3 { background: linear-gradient(180deg, var(--prog-orb-out-start) 0%, var(--prog-orb-out-end) 100%); }

/* --- Плавающие иконки на синем ------------------------------------------- */

.prog-deco {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.prog-deco__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--s);
  height: var(--s);
  border-radius: var(--r);
}
.prog-deco__item img { width: var(--g); height: var(--g); object-fit: contain; }

.prog-deco__item--red    { background: var(--color-red); }
.prog-deco__item--green  { background: var(--color-green); }
.prog-deco__item--mint   { background: var(--color-mint); }
.prog-deco__item--purple { background: var(--color-purple); }
.prog-deco__item--yellow { background: var(--color-yellow); }
.prog-deco__item--blue   { background: var(--color-brand); }

/* --- Синий блок во всю ширину -------------------------------------------- */
/*
   Высота у таких блоков в макете фиксированная, а содержимое отцентровано
   по вертикали – вертикальные поля из Figma при этом не работают, их роль
   играет центрирование. Поэтому height + justify-content: center, а не
   padding-block. overflow: hidden обязателен: круги и фотография намеренно
   выходят за границы блока.
*/
.prog-bleed {
  position: relative;
  overflow: hidden;
  background: var(--color-brand);
  color: var(--color-text-invert);
}
.prog-bleed__inner {
  position: relative;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--prog-pad-bleed);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-64);
}

/* --- Плитки «01/02/03» на синем ------------------------------------------ */

.prog-tiles { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.prog-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  width: var(--prog-tile);
  height: var(--prog-tile-h);
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-cold);
  color: var(--color-text);
  text-align: center;
}
.prog-tile > p {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
}
.prog-tile--intro {
  background: var(--color-brand);
  border: 1px solid var(--color-bg);
  color: var(--color-text-invert);
  align-items: flex-start;
}
.prog-tile--wide { width: 463px; }


/* ==========================================================================
   1. ХИРО – нода 32417:3016, 1920×917
   ========================================================================== */

/*
 * Шапка в макете стоит НА синем хиро, а в теме – в потоке до него, и до
 * 2026-08-06 полоса шапки оставалась белой. Красим её в brand, когда за
 * шапкой идёт это хиро – тот же приём, что у club-hero / adm-hero.
 * Верх хиро SAT плоский (декор ниже), поэтому сплошная заливка совпадает
 * с фоном и работает при любой высоте шапки.
 */
.site-header:has(+ .site-main .prog-hero) {
  position: relative;
  z-index: var(--z-header);
  background: var(--color-brand);
}

/* ==========================================================================
   1. Хиро — редизайн 2026-08-25: два инфо-блока с иконками вместо стопки
   карточек «Формула», три плавающих бейджа (AP/IELTS/9-12), водяной знак
   SAT вместо орбов, лента стран одной строкой со скроллом вместо облака.
   Адаптив теперь настоящий (клампы + точки перелома), см. секцию АДАПТИВ.
   ========================================================================== */

.prog-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(circle at 92% 8%, rgba(255,255,255,.09), transparent 27rem), var(--color-brand);
}

.prog-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 480px;
  height: 480px;
  right: -280px;
  top: 160px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 50%;
  box-shadow: 0 0 0 85px rgba(255,255,255,.025), 0 0 0 170px rgba(255,255,255,.018);
}

.prog-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--page-width);
  margin-inline: auto;
  padding: 96px var(--prog-pad-bleed) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr);
  gap: clamp(38px, 5vw, 78px);
  align-items: center;
}

.prog-hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-32); }
.prog-hero__texts { display: flex; flex-direction: column; gap: var(--space-24); }

.prog-hero__title {
  max-width: 700px;
  margin: 0;
  font-size: clamp(36px, 3.4vw, 50px);
  font-weight: 560;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--color-text-invert);
}

.prog-hero__lead {
  max-width: 620px;
  margin: 0;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 430;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--color-text-invert);
}

.prog-hero__buttons { width: min(100%, 420px); display: grid; gap: var(--space-12); }
.prog-hero__buttons .btn { width: 100%; }

.prog-hero__aside {
  position: relative;
  isolation: isolate;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding-block: var(--space-32);
}

.prog-hero__mark {
  position: absolute;
  z-index: -1;
  right: -30px;
  top: -10px;
  color: transparent;
  font-size: clamp(120px, 13vw, 190px);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.08em;
  -webkit-text-stroke: 1px rgba(255,255,255,.18);
  transform: rotate(-7deg);
  user-select: none;
}

.prog-highlight-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-20) var(--space-24);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 22px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 20px 44px rgba(7,67,121,.16);
  color: var(--color-text);
  transition: translate .22s var(--m-ease, ease), box-shadow .22s var(--m-ease, ease);
}

.prog-highlight-card:first-of-type  { translate: -28px 0; }
.prog-highlight-card:nth-of-type(2) { translate: 20px 0; }

@media (hover: hover) and (pointer: fine) {
  .prog-highlight-card:hover { translate: 0 -3px; box-shadow: 0 26px 52px rgba(7,67,121,.22); }
  .prog-highlight-card:first-of-type:hover  { translate: -28px -3px; }
  .prog-highlight-card:nth-of-type(2):hover { translate: 20px -3px; }
}

.prog-highlight-card__icon {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #fff;
}
.prog-highlight-card__icon--coral  { background: var(--color-red); }
.prog-highlight-card__icon--purple { background: var(--color-purple); }
.prog-highlight-card__icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prog-highlight-card__label {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 6px;
  padding: 3px 9px 4px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-cold);
  color: var(--color-brand);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
}

.prog-highlight-card__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.35;
  letter-spacing: -.015em;
}

.prog-hero__badge {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(7,67,121,.15);
}
.prog-hero__badge--ap    { right: 20px; top: -6px;   background: var(--color-purple); transform: rotate(7deg); }
.prog-hero__badge--ielts { right: -10px; bottom: 30px; background: var(--color-green);  transform: rotate(-6deg); }
.prog-hero__badge--grade { left: -50px; bottom: 60px; width: 68px; background: var(--color-yellow); transform: rotate(4deg); }

.prog-hero__tags-wrap {
  position: relative;
  z-index: 2;
  max-width: var(--page-width);
  margin-inline: auto;
  padding: var(--space-32) var(--prog-pad-bleed) var(--space-64);
}

.prog-hero__tags {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-4);
  row-gap: var(--space-16);
}

.prog-tag {
  --tag-angle: 0deg;
  --tag-shift: 0px;
  flex: 0 0 auto;
  padding: 7px var(--space-12) 8px;
  border-radius: var(--radius-pill);
  color: var(--color-text-invert);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(var(--tag-shift)) rotate(var(--tag-angle));
  transition: translate .18s var(--m-ease, ease);
}

@media (hover: hover) and (pointer: fine) {
  .prog-tag:hover { translate: 0 -2px; }
}

.prog-tag:nth-child(5n+1) { background: var(--color-red); }
.prog-tag:nth-child(5n+2) { background: var(--color-green); }
.prog-tag:nth-child(5n+3) { background: var(--color-purple); }
.prog-tag:nth-child(5n+4) { background: var(--color-yellow); }
.prog-tag:nth-child(5n)   { background: var(--color-mint); }

.prog-tag:nth-child(1)  { --tag-angle: -2deg; --tag-shift: 4px; }
.prog-tag:nth-child(2)  { --tag-angle: 1deg;  --tag-shift: -4px; }
.prog-tag:nth-child(3)  { --tag-angle: 2deg;  --tag-shift: 3px; }
.prog-tag:nth-child(4)  { --tag-angle: -3deg; --tag-shift: -5px; }
.prog-tag:nth-child(5)  { --tag-angle: 2deg;  --tag-shift: 2px; }
.prog-tag:nth-child(6)  { --tag-angle: -1deg; --tag-shift: 5px; }
.prog-tag:nth-child(7)  { --tag-angle: -3deg; --tag-shift: -3px; }
.prog-tag:nth-child(8)  { --tag-angle: 2deg;  --tag-shift: 4px; }
.prog-tag:nth-child(9)  { --tag-angle: 1deg;  --tag-shift: -4px; }
.prog-tag:nth-child(10) { --tag-angle: -2deg; --tag-shift: 3px; }


/* ==========================================================================
   2. КОМУ ПОДОЙДЕТ – нода 32460:6724, 1841×638
   ========================================================================== */

.prog-audience__body {
  display: grid;
  grid-template-columns: minmax(0, 909px) minmax(0, 910px);
  gap: 21px;
  margin-top: var(--space-48);
}
.prog-audience__left { display: flex; flex-direction: column; gap: var(--prog-gap-50); }
.prog-audience__intro { max-width: 643px; }

/* Две серые панели с ярлыком, наезжающим на верхний край.
   Панели выровнены по нижней границе – ярлыки над ними разной высоты. */
.prog-flags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 18px;
}
.prog-flag { position: relative; padding-top: 34px; }
.prog-flag--shift { padding-top: 26px; }
.prog-flag__pill {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  --rot: -1.17deg;
  transform-origin: left center;
}
.prog-flag__box {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  height: 330px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}
.prog-flag__row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.prog-flag__row p {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
}
/* Крестик нарисован меньше галочки (30px против 52px) – поля добирают
   разницу, чтобы обе иконки занимали в строке одинаковое место. */
.prog-flag__icon { flex: none; width: var(--prog-check); height: var(--prog-check); }
.prog-flag__icon--cross { padding: 11px; }

/*
   Карточка с фотографией. ВНИМАНИЕ по всем фотографиям страницы: Figma
   отдаёт экспорт уже обрезанным по видимой части ноды, а не по её полному
   размеру. Здесь снимок в макете 1087×515 со сдвигом (166; 60), а файл –
   744×458: ровно то, что попадало в карточку. Поэтому ставим файл в его
   собственном размере, растягивать до размеров ноды нельзя – исказит.
*/
.prog-audience__info {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 518px;
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--prog-grad-info);
}
.prog-audience__photo {
  position: absolute;
  left: 166px;
  top: 60px;
  z-index: 0;
  width: 744px;
  height: 458px;
  max-width: none;
}
.prog-audience__info-text,
.prog-audience__buttons { position: relative; z-index: 1; }
.prog-audience__info-text { display: flex; flex-direction: column; gap: var(--space-20); }
.prog-audience__info-note { max-width: 519px; }
.prog-audience__buttons { display: flex; gap: var(--space-8); }


/* ==========================================================================
   3. СЦЕНАРИЙ – нода 32417:3083, 1841×1270
   ========================================================================== */

/* minmax(0, 1fr), а не 1fr: иначе колонка не может стать уже своего
   содержимого, и на 1440 сетка выталкивает страницу в горизонтальный скролл. */
.prog-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-20); }
.prog-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); }

.prog-scenario__cards { margin-top: var(--space-48); }
.prog-scenario__card { height: 524px; justify-content: space-between; }

.prog-scenario__bottom { margin-top: var(--space-20); }
.prog-scenario__bottom > * { height: 409px; }
.prog-scenario__system { align-items: center; justify-content: space-between; text-align: center; }
.prog-scenario__system-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
}
.prog-scenario__system-note { max-width: 418px; }
.prog-scenario__buttons { display: flex; gap: var(--space-8); width: 100%; }
.prog-scenario__buttons .btn { flex: 1; min-width: 0; }


/* ==========================================================================
   4. ДО И ПОСЛЕ SAT – нода 32417:3165, 1920×1084
   ========================================================================== */

.prog-around__top {
  display: grid;
  grid-template-columns: minmax(0, 910px) minmax(0, 910px);
  gap: var(--space-20);
}
.prog-around__note { max-width: 755px; }

/* Переключатель: одновременно видна одна панель (32242:4036 / 4035). */
.prog-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-48);
  height: var(--btn-height);
  padding: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}
.prog-toggle__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-12) var(--space-20);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  font: inherit;
  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: var(--fw-btn);
  letter-spacing: var(--ls-btn);
  color: var(--color-text-invert);
  white-space: nowrap;
  cursor: pointer;
}
.prog-toggle__item--on {
  background: var(--color-blue-light);
  border-color: var(--color-bg);
}

.prog-around__panels { margin-top: var(--space-48); }
.prog-around__cards { margin-top: 0; }

/* .prog-grid-4 { display:grid } перебивает UA [hidden] – без !important обе
   панели остаются на экране. */
.prog-around__cards[hidden] { display: none !important; }

.prog-around__cards > .prog-card { height: 274px; }

/* Карточка компонента: номер сверху слева, текст снизу, 36px (не center 24). */
.prog-around__card {
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  text-align: left;
}

.prog-card__num--sm {
  width: 40px;
  height: 40px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: var(--ls-body);
}

.prog-around__text {
  width: 100%;
  font-size: var(--prog-fs-title-lg);
  line-height: var(--prog-lh-title-lg);
  font-weight: 500;
  letter-spacing: var(--prog-ls-title-lg);
  color: var(--color-text);
}

/* «После SAT»: 4 в ряду + 2 снизу слева. */
.prog-around__cards--after { row-gap: var(--space-20); }

/* Синий блок прижат к карточкам на 40px, а не на общие 140. */
.prog-after { margin-top: var(--prog-gap-40); }
.prog-after .prog-bleed__inner { height: 545px; }
.prog-after__title { position: relative; z-index: 3; max-width: 858px; }
.prog-after__tiles { position: relative; z-index: 3; width: 939px; }
/* Снимок прижат к правому краю: файл – уже обрезанная видимая часть ноды
   (1307×545 вместо 1503×839), правым и верхним краем он совпадает с блоком. */
.prog-after__photo {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 1307px;
  height: 545px;
  max-width: none;
}
.prog-after__video {
  position: absolute;
  right: 38px;
  top: 236px;
  z-index: 3;
  width: 445px;
  height: 247px;
}

.prog-orbs--after .prog-orbs__c--1 { left: 41.77%; top: 164px; width: 1197px; height: 1197px; }
.prog-orbs--after .prog-orbs__c--2 { left: 43.88%; top: 204px; width: 1117px; height: 1117px; }
.prog-orbs--after .prog-orbs__c--3 { left: 46.02%; top: 245px; width: 1035px; height: 1035px; }


/* ==========================================================================
   5. БАЛЛЫ SAT – нода 32460:6723, 1920×1725
   ========================================================================== */

/* У этой секции своя раскладка вводного блока: пояснение начинается с трети
   ширины, а не со второй колонки четвёрки. */
.prog-scores .prog-intro { grid-template-columns: 622px minmax(0, 425px) 1fr; gap: 0; }
.prog-scores__lead { max-width: 573px; opacity: .9; }
.prog-intro__note--third { grid-column: 2; }

.prog-scores__rows {
  display: flex;
  flex-direction: column;
  gap: 1px;                       /* 32417:3355 – ряды вплотную */
  margin-top: var(--space-48);
}

/*
   Строка уровня (32417:3356…3372): номер по вертикали по центру,
   таблетка у ВЕРХА (~y=24), текст справа с x≈931.
   Колонка 889px: 20+48+(1800−48−889)=931 – как в макете.
*/
.prog-score {
  display: grid;
  grid-template-columns: var(--prog-num) minmax(0, 1fr) minmax(0, 889px);
  align-items: start;
  padding: var(--space-20);
  border: 1px solid var(--color-bg);
  border-radius: var(--radius-lg);
}
.prog-score--soft { background: var(--color-bg-soft); }
.prog-score--cold { background: var(--color-bg-cold); }

.prog-score .prog-card__num { align-self: center; }

.prog-score__pill {
  justify-self: end;
  align-self: start;
  margin-right: 34px;            /* 931 − (717+182) ≈ 32 */
  /* Figma text_24_med – не --sm (20px). */
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
}

.prog-score__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* Нижний блок 32460:6698 – 1841×328. */
.prog-meanings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
  height: 328px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.prog-meanings > .prog-subtitle {
  max-width: 577px;
  text-align: center;
}

.prog-meanings__list {
  display: flex;
  flex: 1;
  gap: var(--space-12);
  width: 100%;
  min-height: 0;
}

.prog-meaning {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.prog-meaning .prog-pill {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
}


/* ==========================================================================
   5b. СИНИЙ ПРИЗЫВ – нода 32417:3420, 1920×595
   Внутри группы «Баллы SAT» (32460:6723): после рядов 30px, не section-gap.
   ========================================================================== */

.prog-cta { margin-top: 30px; }
.prog-cta .prog-bleed__inner { height: 595px; align-items: center; text-align: center; }
.prog-cta__title { position: relative; z-index: 3; max-width: 1116px; margin: 0; }
.prog-cta__buttons {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-8);
}
.prog-cta__buttons .btn { width: var(--btn-w-hero); }

.prog-orbs--cta-right .prog-orbs__c--1 { left: 64.01%; top: 157px; width: 1090px; height: 1090px; }
.prog-orbs--cta-right .prog-orbs__c--2 { left: 65.89%; top: 193px; width: 1018px; height: 1018px; }
.prog-orbs--cta-right .prog-orbs__c--3 { left: 67.86%; top: 231px; width: 942px;  height: 942px; }

/* Левое облако отражено по вертикали – так градиент уходит вверх. */
.prog-orbs--cta-left .prog-orbs__c { transform: scaleY(-1); }
.prog-orbs--cta-left .prog-orbs__c--1 { left: -32.66%; top: -739px; width: 1090px; height: 1090px; }
.prog-orbs--cta-left .prog-orbs__c--2 { left: -30.78%; top: -703px; width: 1018px; height: 1018px; }
.prog-orbs--cta-left .prog-orbs__c--3 { left: -28.80%; top: -665px; width: 942px;  height: 942px; }


/* ==========================================================================
   6. КАК УСТРОЕНА ПОДГОТОВКА – нода 32417:3309, 1840×2669
   ========================================================================== */

.prog-steps__lead { max-width: 445px; }
.prog-steps__notes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-20); }
.prog-steps__notes > p { max-width: 425px; }

.prog-steps__grid { margin-top: var(--space-48); }
.prog-steps__grid > * { height: 450px; }
.prog-step { align-items: center; justify-content: center; gap: var(--space-24); text-align: center; }


/* ==========================================================================
   8. КАК ПРОХОДИТ ОБУЧЕНИЕ – нода 32476:3732, 1840×795
   ========================================================================== */

.prog-format__body {
  display: grid;
  grid-template-columns: minmax(0, 445px) minmax(0, 445px) minmax(0, 910px);
  gap: var(--space-20);
  margin-top: var(--space-48);
}
.prog-format__side {
  position: relative;
  overflow: hidden;
  height: 675px;
  gap: var(--space-12);
}
.prog-format__side-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
/* Размеры – по файлу (он уже обрезан по видимой части ноды), не по ноде. */
.prog-format__photo { position: absolute; z-index: 0; max-width: none; }
.prog-format__photo--hybrid { left: 0;    top: 291px; width: 445px; height: 384px; }
.prog-format__photo--groups { left: 24px; top: 121px; width: 421px; height: 554px; }

.prog-format__why { height: 675px; align-items: center; gap: var(--space-48); }
.prog-format__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-12);
  flex: 1;
  width: 100%;
}
.prog-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-24);
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  text-align: center;
}
.prog-benefit--text { gap: var(--space-24); }


/* ==========================================================================
   9. ПРОЦЕСС ПОДГОТОВКИ – нода 32417:3431, 1840×985
   ========================================================================== */

.prog-process__body {
  display: grid;
  grid-template-columns: minmax(0, 910px) minmax(0, 910px);
  gap: var(--space-20);
  margin-top: var(--space-48);
}
.prog-process__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--space-20);
  height: 865px;
}
.prog-process__card { justify-content: space-between; }
.prog-process__photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--prog-grad-lilac2);
}
.prog-process__photo img {
  position: absolute;
  left: 0;
  top: 7px;
  width: 445px;
  height: 268px;
  max-width: none;
}
.prog-process__video { height: 865px; }


/* ==========================================================================
   10. ФИНАЛЬНЫЙ ПРИЗЫВ – нода 32417:3502, 1920×1026
   ========================================================================== */

.prog-final .prog-bleed__inner { height: 1026px; } /* контент центрируется по вертикали → 64px сверху, как Subtitle y 64 в макете */
.prog-final__content { position: relative; z-index: 3; display: flex; flex-direction: column; gap: var(--space-48); }
.prog-final__texts { display: flex; flex-direction: column; gap: var(--space-16); }
.prog-final__title {
  max-width: 677px;
  font-size: var(--prog-fs-final);
  line-height: var(--prog-lh-final);
  font-weight: var(--fw-h2);
  letter-spacing: var(--prog-ls-final);
}
.prog-final__sub {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-h2);
  opacity: .6;
}
.prog-final__tiles { width: 873px; }
.prog-final__buttons {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 710px;
}
.prog-final__photo {
  position: absolute;
  right: 0;
  top: 246px;
  z-index: 1;
  width: 1268px;
  height: 780px;
  max-width: none;
}
.prog-final__video {
  position: absolute;
  right: 40px;
  top: 699px;
  z-index: 3;
  width: 445px;
  height: 247px;
}

/* Облако кругов финального блока повёрнуто – круг от поворота не меняется,
   меняется только направление градиента. Центры всех трёх совпадают. */
.prog-final .prog-orbs__c { transform: rotate(131.66deg) scaleY(-1); }
.prog-orbs--final .prog-orbs__c--1 { left: 41.41%; top: 147px; width: 1090px; height: 1090px; }
.prog-orbs--final .prog-orbs__c--2 { left: 43.28%; top: 183px; width: 1018px; height: 1018px; }
.prog-orbs--final .prog-orbs__c--3 { left: 45.26%; top: 221px; width: 942px;  height: 942px; }


/* ==========================================================================
   АДАПТИВ

   Мобильного и «ноутбучного» макета НЕТ – в Figma один размер, 1920.
   Ниже минимум, который не даёт вёрстке разъехаться и не пускает
   горизонтальную прокрутку. Это не дизайн-решение: как только появятся
   макеты под 1440 и 390, эти правила надо переписать, а не «донастроить».
   ========================================================================== */

/* Хиро перестаёт быть двухколоночным: правое облако с карточками не
   помещается рядом с заголовком шириной 1162px. */
@media (max-width: 1100px) {
  .prog-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(380px, .8fr); gap: 34px; }
  .prog-hero__title { font-size: clamp(34px, 4.2vw, 46px); }
  .prog-highlight-card:first-of-type,
  .prog-highlight-card:nth-of-type(2) { translate: 0 0; }
  .prog-hero__badge--grade { left: -18px; }
  .prog-hero__tags-wrap { padding: var(--space-24) var(--prog-pad-bleed) var(--space-48); }
  .prog-hero__tags { justify-content: flex-start; column-gap: var(--space-8); row-gap: var(--space-12); }
}

@media (max-width: 900px) {
  .prog-hero__inner { grid-template-columns: 1fr; padding: 64px var(--space-24) 0; gap: 34px; }
  .prog-hero__aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); padding-block: 0; }
  .prog-hero__mark,
  .prog-hero__badge { display: none; }
  .prog-highlight-card { height: 100%; grid-template-columns: 52px 1fr; gap: var(--space-12); padding: var(--space-20); border-radius: 18px; }
  .prog-highlight-card__icon { width: 52px; height: 52px; border-radius: 14px; }
  .prog-highlight-card__icon svg { width: 28px; height: 28px; }
  .prog-hero__tags-wrap { padding: var(--space-16) var(--space-24) var(--space-32); }
}

@media (max-width: 560px) {
  .prog-hero__inner { padding-inline: var(--space-16); padding-top: 48px; gap: 24px; }
  .prog-hero__title { font-size: clamp(30px, 8.5vw, 38px); }
  .prog-hero__lead { font-size: 17px; }
  .prog-hero__aside { grid-template-columns: 1fr; }
  .prog-hero__tags-wrap { padding-inline: var(--space-16); }
}

@media (prefers-reduced-motion: reduce) {
  .prog-highlight-card,
  .prog-tag { transition: none; }
}

/* Секции с четырьмя и тремя колонками складываются в две. Порог тот же, что
   у хиро: ниже 1700px макета просто нет, и держать раскладку 1920 незачем. */
@media (max-width: 1700px) {

  .prog-audience__body,
  .prog-around__top,
  .prog-process__body { grid-template-columns: minmax(0, 1fr); }

  .prog-format__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prog-format__why { grid-column: 1 / -1; }

  .prog-audience__info,
  .prog-format__side,
  .prog-format__why,
  .prog-process__grid,
  .prog-process__video { height: auto; min-height: 450px; }

  .prog-scores .prog-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); }
  .prog-intro__note--third { grid-column: auto; }

  /* «После SAT»: ряд из четырёх плиток с видео справа не помещается –
     плитки складываются 2×2 (2 × 225.667 + 12), видео ОСТАЁТСЯ справа.
     Требование заказчика 2026-08-07: вниз видео уходит только тогда,
     когда секция становится одноколоночной. */
  .prog-after__tiles { width: 463.334px; }

  /* «Финал»: плитки и кнопки держат макетную ширину (873 / 710), но не
     шире контейнера – на всю ширину их растягивает только блок ≤1000. */
  .prog-final__tiles { width: 873px; max-width: 100%; }
  .prog-final__buttons { width: 710px; max-width: 100%; }

  /* Строка уровня: без минимума средней колонки фиксированные 889px текста
     схлопывали её почти в ноль, и таблетка с баллами уезжала за левый край
     экрана (замер на 1100, 2026-08-06). С минимумом ужимается текст. */
  .prog-score { grid-template-columns: var(--prog-num) minmax(230px, 1fr) minmax(0, 889px); }
}

/* «После SAT» ниже 1700: плитки уже 2×2 (см. блок выше), фиксированная
   высота 545 такому росту мала – отпускаем. Видео при этом остаётся
   абсолютом справа (top 236 внутри подросшего инера помещается). */
@media (max-width: 1700px) {
  .prog-after .prog-bleed__inner { height: auto; padding-block: var(--space-64); }

  /* Секция подросла, а фото было прибито к верху – снизу оставалась пустая
     полоса с торчащими кольцами. Фото садится на дно секции, кольца
     скрываются: они нарисованы под фикс-высоту 545 (заказчик, 2026-08-07). */
  .prog-after__photo { top: auto; bottom: 0; }
  .prog-orbs--after { display: none; }

  /* Иконки-стикеры позиционированы от верха секции и в % ширины ОКНА,
     а фото – фикс-шириной у правого края. При сужении окна иконки
     дрейфовали влево и ложились на лицо школьника (заказчик, 2026-08-07).
     Слой иконок прибивается к боксу фото (1307×545, справа-снизу), а
     координаты берутся из --xp – px от левого края фото. Композиция
     совпадает с макетом: иконки на уровне груди и пояса, лицо свободно. */
  .prog-after .prog-deco {
    inset: auto 0 0 auto;
    width: 1307px;
    max-width: 100%;
    height: 545px;
  }

  .prog-after .prog-deco__item { left: var(--xp, var(--x)); }
}

/* «Финал»: плиткам 873 справа нужно 485px под видео – пересекаются под
   1455px окна (замер 2026-08-07). Видео встаёт в поток под кнопки. */
@media (max-width: 1454px) {
  .prog-final .prog-bleed__inner { height: auto; padding-block: var(--space-64); }

  .prog-final__video {
    position: static;
    max-width: 100%;
    margin-top: var(--space-24);
  }
}

/* «После SAT»: блоку 2×2 (459px у левого края) и видео (445 + 38 справа)
   рядом нужно ~1060px окна – ниже видео встаёт в поток под плитки.
   С ≤1000 секция и так одноколоночная (общий планшетный блок ниже). */
@media (max-width: 1060px) {
  .prog-after__video {
    position: static;
    max-width: 100%;
    margin-top: var(--space-24);
  }
}

/* Планшет и уже: одна колонка, фиксированные высоты отпускаем. */
@media (max-width: 1000px) {

  .prog-grid-4,
  .prog-grid-2,
  .prog-intro,
  .prog-steps__notes,
  .prog-flags,
  .prog-format__body,
  .prog-format__grid,
  .prog-process__grid { grid-template-columns: minmax(0, 1fr); }

  .prog-intro__note,
  .prog-intro__note--third { grid-column: auto; }

  .prog-scenario__card,
  .prog-scenario__bottom > *,
  .prog-around__cards > .prog-card,
  .prog-steps__grid > *,
  .prog-hero__card,
  .prog-flag__box,
  .prog-meanings { height: auto; min-height: 0; }

  .prog-scenario__card,
  .prog-around__cards > .prog-card,
  .prog-steps__grid > *,
  .prog-hero__card { min-height: 275px; }

  .prog-around__cards--after { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .prog-meanings__list { flex-wrap: wrap; }
  .prog-meaning { flex: 1 1 200px; }

  /* Строка уровня разворачивается в столбик: ярлык встаёт под номер. */
  .prog-score { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
  .prog-score__pill { justify-self: start; margin-right: 0; }

  /* Крупные подписи на синем при такой ширине не читаются в 64px. */
  .prog-page { --prog-fs-display: 40px; }

  .prog-after .prog-bleed__inner,
  .prog-cta .prog-bleed__inner,
  .prog-final .prog-bleed__inner { height: auto; padding-block: var(--space-64); }

  .prog-after__video,
  .prog-final__video { position: static; width: 100%; }

  .prog-after__photo,
  .prog-final__photo,
  .prog-format__photo,
  .prog-audience__photo { display: none; }

  /* Иконки-стикеры – часть композиции с фото школьника: без него они
     бессмысленно висят на синем за плитками. */
  .prog-after .prog-deco { display: none; }

  .prog-tile,
  .prog-tile--wide { width: 100%; }

  /* Поля 96px съедают всю ширину телефона – переходим на поля контейнера. */
  .prog-page { --prog-pad-bleed: var(--side-padding); }
}

/* Телефон: поля и кнопки во всю ширину. */
@media (max-width: 600px) {

  .prog-page { --prog-fs-title: 28px; --prog-fs-title-lg: 28px; --prog-fs-final: 28px; }

  /* Заголовок хиро в 48px не помещается: «стандартизированный» одним словом
     шире экрана. Кегль по шкале темы, перенос по слогам не выдуман. */
  .prog-hero__title { font-size: var(--fs-h2); overflow-wrap: anywhere; }

  .prog-hero__buttons .btn,
  .prog-cta__buttons .btn { width: 100%; }

  .prog-scenario__buttons,
  .prog-audience__buttons { flex-direction: column; }

  .prog-flag__row { flex-direction: column; align-items: flex-start; }
  .prog-checklist > li { align-items: flex-start; }
}