/* ==========================================================================
   Экосистема 99Percentile – страница «Advanced Placement (AP)»

   Источник: Figma нода 32417:1876 («АР», 1920×13232). Карта секций –
   _figma/02-screens/ar-v1.md. Размеры сняты через get_design_context.

   ЧТО ВАЖНО ЗНАТЬ ПРО ЭТУ СТРАНИЦУ

   • Вся раскладка сидит на сетке контейнера: 1840 = 4 колонки по 445 при
     gutter 20. Отсюда же 600 (3 колонки) и 910 (2 колонки). Поэтому
     колонки заданы долями (1fr), а не пикселями: на 1440 страница
     сжимается пропорционально и не даёт горизонтального скролла.

   • Кегль заголовков секций – 36px, а не 28px из --fs-h2. Переменная
     системы на H2 секций в макете не применена; фактические значения
     вынесены в локальные токены --ap-* ниже.

   • Декоративная графика (эллипсы хиро и CTA, облака иконок) лежит
     абсолютом внутри секций с overflow: hidden – иначе она вылезает за
     вьюпорт и даёт горизонтальную прокрутку.

   • В карте секций макета есть узлы vector с именами Vector 48…97. Это
     НЕ графика страницы, а красные галочки и обводки, которыми дизайнер
     размечал макет при вычитке (видно на рендере
     _figma/screens/d-32997-5007-ar-v2.png). В вёрстку они не попали –
     см. отчёт.
   ========================================================================== */

.ap-page {

  /* --- Локальные токены страницы --------------------------- [РЕНДЕР] ---- */
  /* Значения, которых нет в variables.css. Живут здесь, а не в общем
     файле: пока не подтверждено, что они общесайтовые. */

  /* H2 секций: 36px / 0.9 / 500 / -2.16px (= -0.06em) */
  --ap-fs-h2: 36px;   --ap-lh-h2: 0.9;   --ap-ls-h2: -0.02em;

  /* Крупный акцент: 32px. Встречается в двух вариантах интерлиньяжа –
     1 (заголовки карточек предметов, «AP»/«IB») и 1.2 («Свяжитесь с нами»). */
  --ap-fs-32: 32px;

  /* Заголовок CTA: 64px / 0.9 / 500 / -5.12px (= -0.08em) */
  --ap-fs-64: 64px;

  /* Кнопка внутри карточки маршрута – 38px, а не общие 57px */
  --ap-btn-height-sm: 38px;

  /* Квадратная иконка-плитка 93×93, радиус 15.5 – «Box Icon Container» */
  --ap-box: 93px;
  --ap-box-radius: 15.5px;

  /* Кружок с номером */
  --ap-num: 48px;
  --ap-num-sm: 40px;

  /* Приглушение вспомогательного текста: в макете это opacity, а не цвет */
  --ap-dim: 0.6;
}

/* ==========================================================================
   ОБЩЕЕ ДЛЯ СЕКЦИЙ
   ========================================================================== */

.ap-section {
  margin-top: var(--section-gap);
}

/* --- Надзаголовок «• Маршрут» -------------------------------------------- */

.ap-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);
  color: var(--color-text);
}

.ap-eyebrow__dot {
  flex: 0 0 auto;
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.ap-eyebrow__dot--red { background: var(--color-red); }

/* --- Заголовки и текст ---------------------------------------------------- */

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

.ap-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.ap-lead {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  letter-spacing: var(--ls-h2);
  color: var(--color-text);
  opacity: var(--ap-dim);
}

.ap-body-muted {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: var(--ap-dim);
}

/* Цветные вставки внутри строки. В макете это отдельные span'ы текста
   с другим цветом, а не отдельные абзацы. */
.ap-red   { color: var(--color-red); }
.ap-green { color: var(--color-green); }

/* --- Кнопки --------------------------------------------------------------- */
/*
   Наследуем раскладку от базового .btn, но перебиваем метрики: в макете
   у кнопок высота 57, padding 8/20, кегль 20 и начертание 600.
   Модификаторы цвета свои – базовый .btn--primary тянет за собой hover,
   которого в макете нет.
*/
.ap-btn {
  gap: var(--space-4);
  min-height: var(--btn-height);
  padding: var(--btn-padding);

  font-size: var(--fs-btn);
  line-height: var(--lh-btn);
  font-weight: var(--fw-btn);
  letter-spacing: var(--ls-btn);
  text-align: center;
}

/* Ширина кнопок в макете фиксированная (485px), а не по контенту. */
.ap-btn--fixed { width: var(--btn-w-hero); max-width: 100%; }

.ap-btn--white         { background: var(--color-bg); color: var(--color-text); }
.ap-btn--outline-white { background: var(--color-brand); color: var(--color-text-invert); border: 1px solid var(--color-bg); }
.ap-btn--blue          { background: var(--color-brand); color: var(--color-text-invert); }
.ap-btn--outline-blue  { background: transparent; color: var(--color-brand); border: 1px solid var(--color-brand); }

.ap-btn--small {
  min-height: var(--ap-btn-height-sm);
  width: 100%;
}

/* --- Таблетка с подписью -------------------------------------------------- */
/*
   Отличается от базового .badge: там высота 48 и кегль 24 из UI kit,
   здесь padding 2px/12px и высота по контенту. Значение 11.278px из
   макета – след масштабированной группы; округлено до токена 12.
*/
.ap-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 2px var(--space-12);
  border-radius: var(--radius-pill);

  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
  color: var(--color-text-invert);
  white-space: nowrap;
}

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

/* Наклон таблеток – из макета, углы сняты с нод (−0.89°, −1.78°, 0.54°). */
.ap-pill--tilt       { transform: rotate(-0.89deg); }
.ap-pill--tilt-left  { transform: rotate(-1.78deg); }
.ap-pill--tilt-right { transform: rotate(0.54deg); }

/* --- Кружок с номером ----------------------------------------------------- */

.ap-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: var(--ap-num);
  height: var(--ap-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);
}

.ap-num--sm {
  width: var(--ap-num-sm);
  height: var(--ap-num-sm);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  letter-spacing: var(--ls-body);
}

.ap-num--blue   { background: var(--color-brand); }
.ap-num--purple { background: var(--color-purple); }
.ap-num--green  { background: var(--color-green); }
.ap-num--yellow { background: var(--color-yellow); }
.ap-num--mint   { background: var(--color-mint); }
.ap-num--red    { background: var(--color-red); }
.ap-num--white  { background: var(--color-bg); color: var(--color-brand); }

/* --- Цветной квадрат с белой иконкой -------------------------------------- */
/* Размер, радиус и координаты приходят инлайном: в макете у каждой копии
   свои. Здесь только заливка и центрирование. */

.ap-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ap-box img { flex: 0 0 auto; }

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

/* --- Панель с плитками (хиро, «Диагностика», «Основной процесс», итоги) --- */
/*
   Один и тот же компонент «Key Benefits Section» повторяется на странице
   четыре раза: ноды 32997:5015, 32997:5971, 32997:5924, 32997:6008/6031.
*/
.ap-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  align-items: center;

  padding: var(--space-32) var(--space-24) var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

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

.ap-panel__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  align-items: center;
}

.ap-panel__note {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: var(--ap-dim);
  text-align: center;
}

.ap-panel__grid {
  display: grid;
  gap: var(--space-12);
  flex: 1 1 auto;
  width: 100%;
}

.ap-panel__grid--2 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
.ap-panel__grid--3 { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
.ap-panel__grid--4 { grid-template-columns: repeat(4, 1fr); }

.ap-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: center;
  justify-content: center;

  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.ap-tile--start {
  align-items: flex-start;
  justify-content: space-between;
}

.ap-tile__icon {
  flex: 0 0 auto;
  width: var(--ap-box);
  height: var(--ap-box);
}

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

/* ==========================================================================
   СЕКЦИЯ 1 – ХИРО. Нода 32997:5011, 1920×917
   ========================================================================== */
/*
   Шапка сайта лежит поверх синего фона: в макете полоса шапки начинается
   на y=24, а хиро – на y=0. В теме шапка стоит обычным потоком, поэтому:

   • хиро поднимается вверх на высоту шапки с её отступом (24 + 76);
   • синий фон рисует псевдоэлемент с z-index:-1 – так он уходит ПОД
     фон полосы шапки, и серая таблетка остаётся видимой. Без этого
     секция закрасила бы шапку: она идёт позже в потоке документа.
*/
.ap-hero {
  position: relative;
  /* --header-h – фактическая высота шапки (замер в main.js): расчётные
     100px на 1025–1430 оставляли белую щель над хиро. */
  margin-top: calc(-1 * var(--header-h));
  color: var(--color-text-invert);

  /* Эллипсы фона шире вьюпорта. Обрезка стоит на самой секции (на всю
     ширину окна), а не на .ap-hero__inner: инер ограничен 1920px, и на
     более широких экранах круги обрывались вертикальной линией по его
     границе (правка 2026-08-06). */
  overflow: clip;
}

.ap-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-brand);
}

.ap-hero__inner {
  position: relative;
  max-width: var(--page-width);
  min-height: 917px;
  margin-inline: auto;

  /* Внутренние поля хиро – 96px, а не 40px контейнера. Отступы сверху и
     снизу тоже входят в 917px высоты секции (box-sizing: border-box). */
  padding: 128px 96px var(--space-64);

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-64);
  /* overflow здесь не ставить: обрезкой эллипсов занимается .ap-hero –
     обрезка на инере рвала круги по границе 1920 на широких экранах. */
}

.ap-hero__decor {
  position: absolute;
  inset: 0;
  /* Ниже контента хиро; над шапкой не всплывает – у .site-header z-index. */
  z-index: 0;
  pointer-events: none;
}

/* Эллипсы 32417:1881–1883 – полные круги, координаты от левого края хиро. */
.ap-hero__decor img {
  position: absolute;
  max-width: none;
}

.ap-hero__decor img:nth-child(1) {
  left: 902px;
  top: -176px;
  width: 1368px;
  height: 1368px;
}
.ap-hero__decor img:nth-child(2) {
  left: 948px;
  top: -130px;
  width: 1277px;
  height: 1276px;
}
.ap-hero__decor img:nth-child(3) {
  left: 995px;
  top: -83px;
  width: 1183px;
  height: 1182px;
}

.ap-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-64);
  align-items: flex-start;
}

.ap-hero__head {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 752px;
}

.ap-hero__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-text-invert);
}

.ap-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--fw-lead);
  letter-spacing: var(--ls-lead);
}

.ap-hero__goal {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
  align-items: flex-start;
}

.ap-hero__note {
  max-width: 406px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  opacity: 0.9;
}

.ap-hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* Панель «В отличие от IELTS и SAT, AP:» – нода 32997:5015.
   Её правый край стоит на 40px от края страницы, а не на 96px поля хиро. */
.ap-hero__panel {
  position: absolute;
  z-index: 1;
  top: 178px;
  right: var(--side-padding);
  width: 811px;
  height: 636px;
  max-width: calc(100% - 96px * 2);
}

/* ==========================================================================
   СЕКЦИЯ 2 – «МАРШРУТ». Нода 32997:5063, 1840×764
   ========================================================================== */

.ap-route__title { margin-top: var(--space-16); }

/* Лид и приписка стоят на одной высоте: лид – от левого края, приписка –
   ровно с середины контейнера (в макете left: 50% + 10px). */
.ap-route__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  margin-top: var(--space-32);
}

.ap-route__lead { max-width: 579px; }

.ap-route__aside {
  max-width: 445px;

  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
  opacity: var(--ap-dim);
}

.ap-route__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-20);
  margin-top: var(--space-32);
}

.ap-step {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-24);

  min-height: 544px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

/* Четвёртая карточка выделена цветом – это «ключевой этап» макета. */
.ap-step--accent { background: var(--color-brand); }

.ap-step__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.ap-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: var(--ap-num);
  height: var(--ap-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);
}

.ap-step--purple .ap-step__num { background: var(--color-purple); }
.ap-step--blue   .ap-step__num { background: var(--color-brand); }
.ap-step--green  .ap-step__num { background: var(--color-green); }
.ap-step--yellow .ap-step__num { background: var(--color-yellow); }
.ap-step--mint   .ap-step__num { background: var(--color-mint); }
.ap-step--red    .ap-step__num { background: var(--color-red); }
.ap-step--accent .ap-step__num { background: var(--color-bg); color: var(--color-brand); }

.ap-step__icon {
  flex: 0 0 auto;
  max-height: 56px;
  width: auto;
}

.ap-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.ap-step__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

.ap-step__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: var(--ls-small);
  color: var(--color-text);
  opacity: var(--ap-dim);
}

.ap-step--accent .ap-step__title,
.ap-step--accent .ap-step__text { color: var(--color-text-invert); }

.ap-step__btn { margin-top: var(--space-4); }

.ap-step--purple .ap-step__btn { background: var(--color-purple); color: var(--color-text-invert); }
.ap-step--blue   .ap-step__btn { background: var(--color-brand);  color: var(--color-text-invert); }
.ap-step--green  .ap-step__btn { background: var(--color-green);  color: var(--color-text-invert); }
.ap-step--yellow .ap-step__btn { background: var(--color-yellow); color: var(--color-text-invert); }
.ap-step--mint   .ap-step__btn { background: var(--color-mint);   color: var(--color-text-invert); }
.ap-step--red    .ap-step__btn { background: var(--color-red);    color: var(--color-text-invert); }
.ap-step--accent .ap-step__btn { background: var(--color-bg);     color: var(--color-text); }

/* ==========================================================================
   СЕКЦИЯ 3 – «ТРЕКИ». Нода 32997:5139, 1841×570
   ========================================================================== */

.ap-tracks__title { margin-top: var(--space-16); }

.ap-tracks__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  margin-top: var(--space-48);
}

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

.ap-track {
  display: flex;
  gap: var(--space-12);
  flex: 1 1 0;
}

.ap-track__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  flex: 0 0 135px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  color: var(--color-text-invert);
  text-align: center;
  white-space: nowrap;
}

.ap-track__badge--blue  { background: var(--color-brand); }
.ap-track__badge--green { background: var(--color-green); }

.ap-track__label {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  opacity: var(--ap-dim);
}

.ap-track__short {
  font-size: var(--ap-fs-32);
  line-height: 1;
  font-weight: 400;
  letter-spacing: var(--ls-h3);
}

.ap-track__grades {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: var(--ls-small);
}

.ap-track__panel {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  flex: 1 1 auto;
  min-width: 0;

  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.ap-track__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  flex: 1 1 0;
  min-width: 0;
}

.ap-track__step-head {
  display: flex;
  align-items: center;
  gap: var(--space-20);
}

.ap-track__icon {
  flex: 0 0 auto;
  max-height: 61px;
  width: auto;
}

.ap-track__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  min-width: 0;
}

.ap-track__grades-inline {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: var(--ls-small);
}

.ap-track__grades-inline--blue  { color: var(--color-link); }
.ap-track__grades-inline--green { color: var(--color-green); }

.ap-track__text {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: var(--ls-small);
  color: var(--color-text);
  opacity: var(--ap-dim);
}

.ap-track__arrow {
  flex: 0 0 auto;
  align-self: center;
  width: 94px;
}

/*
   Плашка под видео. Градиент lin_gradient_3 в переменные Figma заведён,
   но API отдаёт по нему пустую строку – значение снято с ноды 32997:5192.
   В variables.css такого токена нет, поэтому литерал с пометкой.
*/
.ap-tracks__video {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 450px;
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  background: linear-gradient(133.829deg, rgb(230, 219, 255) 13.411%, rgb(181, 220, 255) 97.274%);
}

.ap-tracks__video-label {
  font-size: var(--ap-fs-64);
  line-height: var(--ap-lh-h2);
  font-weight: var(--fw-h2);
  letter-spacing: -0.03em;
  color: var(--color-text);
  opacity: 0.22;
}

/* ==========================================================================
   СЕКЦИЯ 4 – «ПРИНЦИП». Нода 32997:5194, 1840×917
   ========================================================================== */

.ap-principle__title { margin-top: var(--space-16); }

.ap-principle__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: var(--space-20);
  margin-top: var(--space-48);
}

.ap-principle__card {
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  gap: var(--space-12);

  min-height: 796px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
}

.ap-principle__card--psat { background: var(--color-bg-soft); }

/* lin_gradient_4, снят с ноды 32997:5201 – в variables.css не заведён. */
.ap-principle__card--ap {
  background: linear-gradient(105.508deg, rgb(242, 242, 248) 13.262%, rgb(181, 220, 255) 127.31%);
}

.ap-principle__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.ap-principle__photo {
  position: absolute;
  left: -21px;
  top: 84px;
  width: 532px;
  max-width: none;
  height: 713px;
  object-fit: cover;
}

.ap-principle__cloud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ap-principle__cloud img {
  position: absolute;
  max-width: none;
}

.ap-principle__side {
  display: flex;
  flex-direction: column;
  gap: 56px;
  min-height: 796px;
}

.ap-principle__claim {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);

  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

/* Заголовок собран инлайном: в макете таблетка «переворачиваем» лежит
   отдельным слоем поверх пробелов в тексте (нода 32997:5230). */
.ap-principle__claim-title .ap-pill { vertical-align: middle; }

.ap-principle__ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  flex: 1 1 auto;
}

.ap-way {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);

  min-height: 596px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

/* Кружок-маркер выступает за угол плашки – так в макете (ноды 32997:5234,
   32997:5272). */
.ap-way__mark {
  position: absolute;
  left: -11px;
  top: -14px;
  width: var(--space-32);
  height: var(--space-32);
}

.ap-way--good .ap-way__mark {
  left: auto;
  right: 50%;
  top: -14px;
  transform: translateX(50%);
}

.ap-way__label {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 50px;
  padding: 2px var(--space-12);
  border-radius: var(--radius-pill);

  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
  color: var(--color-text-invert);
}

.ap-way__label--red   { background: var(--color-red); }
.ap-way__label--green { background: var(--color-green); }

.ap-way__steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  flex: 1 1 auto;
}

.ap-way__arrow {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  line-height: 1;
}

.ap-way--bad .ap-way__arrow  { color: var(--color-red); }
.ap-way--good .ap-way__arrow { color: var(--color-green); }

.ap-way__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex: 1 1 0;

  width: 100%;
  padding: var(--space-12);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  text-align: center;
}

.ap-way__step-title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
}

.ap-way__step-note {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: var(--ls-small);
  opacity: var(--ap-dim);
}

.ap-way__step--red   { color: var(--color-red); }
.ap-way__step--green { color: var(--color-green); }

/* ==========================================================================
   СЕКЦИЯ 5 – «ПРОБЛЕМА». Нода 32997:5487, 1840×789
   ========================================================================== */

.ap-problem__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

.ap-problem__head .ap-h2 { margin-top: var(--space-16); }

.ap-problem__sub {
  margin-top: var(--space-48);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

/* Круг с крестом стоит по центру страницы и наполовину заходит на плашку;
   в самой плашке под него вырезано отверстие (фигура Subtract). */
.ap-problem__mark {
  position: relative;
  z-index: 1;
  margin-top: var(--space-16);
  margin-bottom: -37px;
  width: 74px;
  height: 74px;
}

.ap-problem__grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--space-20);
  align-items: start;
}

.ap-problem__card {
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  gap: var(--space-12);

  min-height: 587px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-cold);
}

.ap-problem__card-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.ap-problem__photo {
  position: absolute;
  left: -21px;
  width: 532px;
  max-width: none;
  height: 713px;
  object-fit: cover;
}

.ap-problem__photo--left  { top: 84px; }
.ap-problem__photo--right { top: 20px; }

/*
   Плашка со списком – не прямоугольник: нода 32997:5488 «Subtract» это
   скруглённая форма с вырезом сверху под круг. Тянем SVG фоном, чтобы
   вырез оставался на месте при любой ширине колонки.
*/
.ap-problem__panel {
  min-height: 587px;
  padding: 74px 16.5px 19px;
  background-image: url('../img/ap/problem-panel.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.ap-problem__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  height: 494px;
}

.ap-problem__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: 1 1 0;

  padding: var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.ap-problem__item img {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
}

.ap-problem__item p {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

/* ==========================================================================
   СЕКЦИЯ 6 – «СТАРТ». Нода 32997:5956, 1700×636
   ========================================================================== */
/* Единственная секция, которая уже контейнера: её поля 109/111 px. */

.ap-start__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-20);
  padding-inline: 69px;
}

.ap-start__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  flex: 0 1 690px;
  padding-top: 103px;
}

.ap-start__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.ap-start__texts {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-top: var(--space-16);
}

/* Прозрачность 0.78 – не опечатка, значение снято с ноды 32997:5966. */
.ap-start__lead {
  max-width: 546px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  letter-spacing: var(--ls-h2);
  color: var(--color-text);
  opacity: 0.78;
}

.ap-start__note { max-width: 458px; }

.ap-start__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

/* Здесь ширина кнопок в макете по контенту, а не фиксированная. */
.ap-start__actions .ap-btn { width: auto; }

.ap-start__panel {
  flex: 0 1 811px;
  min-height: 636px;
}

/* ==========================================================================
   СЕКЦИЯ 7 – «ЧТО ИЗУЧАЮТ». Нода 32997:5274, 1840×1282
   ========================================================================== */

.ap-subjects__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ap-subjects__head .ap-h2   { margin-top: var(--space-16); }
.ap-subjects__head .ap-lead { max-width: 579px; margin-top: var(--space-32); }

.ap-subjects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-20);
  margin-top: var(--space-48);
}

.ap-subject {
  /* Контейнер для cq-единиц сцены: ширина его content-box = сцене (552
     при макете). ВАЖНО: container-type ставится именно сюда, а не на
     .ap-subject__media – собственные cq-единицы элементу недоступны, и
     высота сцены считалась бы от вьюпорта (ловилось на широких экранах,
     заказчик 2026-08-12). */
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);

  min-height: 521px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.ap-subject__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;

  width: var(--ap-num);
  height: var(--ap-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);
}

.ap-subject--blue   .ap-subject__num { background: var(--color-brand); }
.ap-subject--purple .ap-subject__num { background: var(--color-purple); }
.ap-subject--yellow .ap-subject__num { background: var(--color-yellow); }
.ap-subject--mint   .ap-subject__num { background: var(--color-mint); }
.ap-subject--red    .ap-subject__num { background: var(--color-red); }
.ap-subject--green  .ap-subject__num { background: var(--color-green); }

/* Сцена иконок в макете – Frame 128, 552×249, и вся она масштабируется
   cqi-единицами от ширины карточки: при макетных 552 масштаб 1:1, на
   узких карточках фото, плашки и чипы ужимаются пропорционально – раньше
   фикс-координаты в px выталкивали плашку за карточку (заказчик,
   2026-08-12). 1cqi = 5.52px макета. Координаты чипов и линии приходят
   инлайном из шаблона тоже в cqi. */
.ap-subject__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  height: 45.109cqi;                /* 249 */
  overflow: visible;
}

.ap-subject__photo {
  width: 45.109cqi;                 /* 249 */
  height: 45.109cqi;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

/* Карточка 04: фото в макете 261×261. */
.ap-subject--mint .ap-subject__photo {
  width: 261px;
  height: 261px;
}

/* Крупная плитка с иконкой – «Container» 115×115, радиус 20. */
.ap-subject__badge {
  position: absolute;
  left: 64.674cqi;                  /* 357 */
  top: -5.616cqi;                   /* −31 */
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20.833cqi;                 /* 115 */
  height: 20.833cqi;
  border-radius: 3.623cqi;          /* 20 */
}

.ap-subject__badge img {
  width: 61%;
  height: 61%;
  object-fit: contain;
}

.ap-subject--purple .ap-subject__badge {
  left: 69.746cqi;                  /* 385 */
  top: -5.072cqi;                   /* −28 */
}

.ap-subject--blue   .ap-subject__badge { background: var(--color-brand); }
.ap-subject--purple .ap-subject__badge { background: var(--color-purple); }
.ap-subject--yellow .ap-subject__badge { background: var(--color-yellow); }
.ap-subject--mint   .ap-subject__badge { background: var(--color-mint); }
.ap-subject--red    .ap-subject__badge { background: var(--color-red); }
.ap-subject--green  .ap-subject__badge { background: var(--color-green); }

.ap-subject__line {
  position: absolute;
  max-width: none;
}

.ap-subject__chip {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;

  width: 8.696cqi;                  /* 48 */
  height: 8.696cqi;
  border-radius: max(4px, 1.449cqi);
}

.ap-subject__chip img {
  width: 66.7%;
  height: 66.7%;
  object-fit: contain;
}

.ap-subject__chip--round { border-radius: var(--radius-pill); }

.ap-subject--blue   .ap-subject__chip { background: var(--color-brand); }
.ap-subject--purple .ap-subject__chip { background: var(--color-purple); }
.ap-subject--yellow .ap-subject__chip { background: var(--color-yellow); }
.ap-subject--mint   .ap-subject__chip { background: var(--color-mint); }
.ap-subject--red    .ap-subject__chip { background: var(--color-red); }
.ap-subject--green  .ap-subject__chip { background: var(--color-green); }

/* Карточка 04: иконки собраны в одну группу (нода 32997:5406). */
.ap-subject__cluster {
  position: absolute;
  left: 24.638cqi;                  /* 136 */
  top: -6.522cqi;                   /* −36 */
  width: 60.688cqi;                 /* 335 */
  height: 52.355cqi;                /* 289 */
  max-width: none;
}

.ap-subject__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: auto;
}

.ap-subject__title {
  font-size: var(--ap-fs-32);
  line-height: 1;
  font-weight: 400;
  letter-spacing: var(--ap-ls-h2);
  color: var(--color-text);
}

/* ==========================================================================
   СЕКЦИЯ 8 – «КАРЬЕРНЫЕ ТРЕКИ». Нода 32997:5519, 1840×1073
   ========================================================================== */

/* Надзаголовок и заголовок в макете стоят на ОДНОЙ высоте: «Карьерные
   треки» у левого края, заголовок – со второй колонки сетки. */
.ap-career__top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
}

.ap-career__head {
  grid-column: 2 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.ap-career__head .ap-h2   { max-width: 845px; }
.ap-career__head .ap-lead { max-width: 488px; }

/*
   Контейнер карточек обрезан по высоте: в макете overflow clip на 770px,
   видно ровно два ряда по 375 плюс промежуток 20. Ниже – кнопка
   «Показать еще →». Скрипта раскрытия в макете нет, поэтому обрезка
   воспроизведена как есть.
*/
.ap-career__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 375px;
  gap: var(--space-20);

  margin-top: var(--space-20);
  max-height: 770px;
  overflow: hidden;
}

.ap-career__grid.is-open {
  max-height: none;
  overflow: visible;
}

/* Первый ряд в макете сдвинут на колонку вправо – под заголовком. */
.ap-career__card--note { grid-column: 2; }

.ap-career__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-20);

  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

/* Карточка «Важно» – единственная с обводкой вместо заливки. */
.ap-career__card--note {
  align-items: center;
  background: transparent;
  border: 1px solid var(--color-border);
}

.ap-career__note-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

.ap-career__note-label {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: var(--ls-small);
  color: var(--color-text);
  opacity: var(--ap-dim);
}

.ap-career__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.ap-career__icon {
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  /* PNG иконок выгружены с непрозрачными серыми углами: в макете их
     клипает скругление ноды (radius ≈ 15.5 при 93px). Без скругления в
     вёрстке серые углы вылезали наружу (заказчик, 2026-08-12). */
  border-radius: var(--ap-box-radius);
}

.ap-career__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.ap-career__card-body--tight { gap: var(--space-12); }

.ap-career__more {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
  margin-top: var(--space-32);
}

.ap-career__more .ap-btn {
  grid-column: 2;
  cursor: pointer;
  border: 0;
}

/* ==========================================================================
   СЕКЦИЯ 9 – «ПРОЦЕСС ОБУЧЕНИЯ». Нода 32997:5905, 1840×859.6
   ========================================================================== */

/* Наклонённая записка внизу справа выступает за карточки на 62px –
   в макете высота секции считается вместе с ней. */
.ap-process { padding-bottom: 62px; }

.ap-process__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ap-process__head .ap-h2 { margin-top: var(--space-16); }

.ap-process__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: var(--space-20);
  margin-top: var(--space-48);
}

.ap-process__card {
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  gap: var(--space-12);

  min-height: 675px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
}

.ap-process__card--hybrid { background: var(--color-bg-cold); }
.ap-process__card--sync   { background: var(--color-bg-soft); }

.ap-process__card-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.ap-process__card-text .ap-pill { vertical-align: middle; }

.ap-process__photo {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.ap-process__photo--1 { left: -89px; top: 291px; width: 624px; height: 574px; }
.ap-process__photo--2 { left: 24px;  top: 121px; width: 518px; height: 693px; }

.ap-process__panel {
  position: relative;
  min-height: 675px;
  padding: var(--space-24);
}

/* Наклонённая записка в правом нижнем углу – нода 32997:5954, поворот 2.35°. */
.ap-process__note {
  position: absolute;
  right: -24px;
  bottom: -62px;
  width: 360px;

  padding: var(--space-16);
  border-radius: 11.829px;
  background: var(--color-bg);
  border: 1px solid var(--color-bg-soft);
  transform: rotate(2.35deg);

  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-small);
  letter-spacing: var(--ls-small);
  color: var(--color-text);
  opacity: var(--ap-dim);
  text-align: center;
}

/* ==========================================================================
   СЕКЦИЯ 10 – «ПОЧЕМУ ЭТО ВАЖНО?». Нода 32997:5681, 1856×481.6
   ========================================================================== */

.ap-compare__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ap-compare__head .ap-h2 { margin-top: var(--space-16); }

/* 82px – расстояние от заголовка до карточек по макету; таблетки
   «С AP» / «Без AP» висят в этом промежутке. */
.ap-compare__grid {
  display: grid;
  grid-template-columns: 290fr 600fr 600fr 290fr;
  gap: var(--space-20);
  margin-top: 82px;
  align-items: start;
}

.ap-compare__photo {
  position: relative;
  overflow: hidden;

  height: 327px;
  padding: var(--space-20);
  border-radius: var(--radius-lg);
  background: var(--color-bg-cold);
}

/* Только фото, не маркер: иначе 32px-иконка раздувается до 378×506. */
.ap-compare__photo > img:first-child {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.ap-compare__photo--left > img:first-child  { left: -58px; top: -68px; width: 378px; height: 506px; }
.ap-compare__photo--right > img:first-child { left: -27px; top: 3px;   width: 317px; height: 387px; }

/* Кружки-маркеры выступают за карточки – так в макете. */
.ap-compare__mark {
  position: absolute;
  z-index: 1;
  width: var(--space-32);
  height: var(--space-32);
  max-width: none;
}

.ap-compare__mark--info  { left: -16px;  top: -16px; }
.ap-compare__mark--close { left: auto; right: -16px; top: -13px; }

.ap-compare__col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);

  height: 327px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.ap-compare__label {
  position: absolute;
  left: var(--space-8);
  top: -26px;
  padding-inline: var(--space-16);
}

.ap-compare__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  height: 100%;
}

.ap-compare__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: 1 1 0;

  padding: var(--space-16);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.ap-compare__item img {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
}

.ap-compare__item p {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--color-text);
}

/* ==========================================================================
   СЕКЦИЯ 11 – «КОМУ ПОДОЙДЕТ?». Нода 32997:5722, 1840×865.4
   ========================================================================== */

.ap-audience__title { margin-top: var(--space-16); }

.ap-audience__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
  margin-top: var(--space-48);
}

/* Карточка и весь её фоновый коллаж (фото, обложки, облако иконок)
   масштабируются cqi-единицами от ширины карточки: при макетных 445px
   масштаб 1:1, на узких колонках фон ужимается пропорционально – раньше
   фикс-px не уменьшались и кроп съезжал (заказчик, 2026-08-12).
   1cqi = 4.45px макета. Координаты облака иконок приходят инлайном из
   шаблона тоже в cqi. */
.ap-audience__card {
  container-type: inline-size;
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  gap: var(--space-12);

  /* Высота пропорциональна ширине, как 445×745 в макете. Задавать её в
     cqi нельзя – карточка не видит собственных cq-единиц. */
  aspect-ratio: 445 / 745;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.ap-audience__card--cold { background: var(--color-bg-cold); }

.ap-audience__text {
  position: relative;
  z-index: 1;
  /* Кегль масштабируется с карточкой (28px при макетных 445, 1cqi = 3.97px):
     фиксированные 28px на узкой карточке разрастались на пол-высоты и
     ломали композицию с фото (заказчик, 2026-08-12). Нижний предел – чтобы
     текст оставался читаемым. */
  font-size: clamp(15px, 7.052cqi, 28px);
  line-height: var(--lh-h2);
  font-weight: 400;
  letter-spacing: var(--ls-h2);
  color: var(--color-text);
}

.ap-audience__photo {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

/* Файлы фото выгружены УЖЕ обрезанными ровно под карточку 445×745
   (photo-3 – 445×430, нижняя часть): юноша по торс, рабочий стол, школьник
   по грудь. Никакого репозиционирования не нужно – прежние координаты от
   исходных нод Figma растягивали готовый кроп вдвое, и в кадре оставались
   одни лица (заказчик, 2026-08-12). Проценты масштабируются вместе с
   карточкой на любой ширине. */
.ap-audience__photo--1 { inset: 0; width: 100%; height: 100%; }
.ap-audience__photo--3 { left: 0; top: auto; bottom: 0; width: 100%; height: auto; }
.ap-audience__photo--4 { inset: 0; width: 100%; height: 100%; }

/*
   Облако обложек университетов. В макете это 11 белых кружков, каждый
   с кропом одного и того же спрайта. Вырезано одним PNG из экспорта
   карточки (нода 32997:5733) – фон кропа совпадает с фоном карточки.
*/
.ap-audience__books {
  position: absolute;
  left: 0;
  top: 93.199cqi;                    /* 370 */
  width: 112.091cqi;                 /* 445 – до внешних краёв карточки */
  max-width: none;
  height: 94.458cqi;                 /* 375 */
}

.ap-audience__icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ap-audience__icons .ap-box img {
  width: 66%;
  height: 66%;
  object-fit: contain;
}

/* ==========================================================================
   СЕКЦИЯ 12 – «РЕЗУЛЬТАТ». Нода 32997:6000, 1840×924.4
   ========================================================================== */

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

/* Аватар вставлен прямо в строку заголовка – в макете он стоит в дырке
   из пробелов между «Что получает» и «ученик ?». */
.ap-result__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-20);
  flex-wrap: wrap;
}

.ap-result__avatar {
  width: 94px;
  height: 94px;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.ap-result__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-20);
  margin-top: var(--space-48);
}

.ap-result__main { min-height: 743px; }

.ap-result__side {
  display: flex;
  flex-direction: column;
  gap: 23px;
}

.ap-result__key {
  min-height: 458px;
  gap: var(--space-48);
}

.ap-result__key-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  letter-spacing: var(--ls-body);
  color: var(--color-text);
}

/* Иконка карточки «Сильное академическое портфолио» пришла растром:
   в макете это image 38 [Vectorized] – автотрассировка, чистого вектора
   у дизайнера нет. Подробности в _figma/05-assets/ASSETS.md. */
.ap-tile__icon--flat { border-radius: 0; }

.ap-result__final {
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  gap: var(--space-12);

  min-height: 262px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);

  /* lin_gradient_4 под другим углом – нода 32997:6060. */
  background: linear-gradient(149.883deg, rgb(242, 242, 248) 13.262%, rgb(181, 220, 255) 127.31%);
}

.ap-result__final-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  max-width: 465px;
}

.ap-result__final-photo {
  position: absolute;
  left: 452px;
  top: 13px;
  width: 458px;
  max-width: none;
  height: 391px;
  object-fit: cover;
}

/* ==========================================================================
   СЕКЦИЯ 13 – CTA «СВЯЖИТЕСЬ С НАМИ». Нода 32997:5813, 1920×821
   ========================================================================== */

.ap-cta {
  position: relative;
  overflow: hidden;

  margin-top: var(--section-gap);
  padding-block: 128px;
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.ap-cta__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Внутренняя система координат макета – 1920. Иконки и эллипсы стоят
     по абсолютным координатам из него и центрируются вместе с полотном. */
  width: var(--page-width);
  left: 50%;
  transform: translateX(-50%);
}

.ap-cta__ellipse {
  position: absolute;
  max-width: none;
}

/* Полные круги 32417:2716–2721 – не клип хиро. */
.ap-cta__ellipse--br1 { left: 1244px; top: 457.35px; width: 1090px; height: 1090px; }
.ap-cta__ellipse--br2 { left: 1280px; top: 493.35px; width: 1018px; height: 1018px; }
.ap-cta__ellipse--br3 { left: 1318px; top: 531.35px; width: 942px;  height: 942px; }

/* Левое облако: те же круги, отражены по Y (ноды 32417:2717/2719/2721). */
.ap-cta__ellipse--tl1 { left: -505px; top: -753.65px; width: 1090px; height: 1090px; transform: scaleY(-1); }
.ap-cta__ellipse--tl2 { left: -469px; top: -717.65px; width: 1018px; height: 1018px; transform: scaleY(-1); }
.ap-cta__ellipse--tl3 { left: -431px; top: -679.65px; width: 942px;  height: 942px;  transform: scaleY(-1); }

/* Две тонкие линии на y=278 (32417:2804 / 2805). */
.ap-cta__line {
  position: absolute;
  top: 278px;
  height: 1px;
  background: var(--color-border);
  opacity: 0.6;
}

.ap-cta__line--left  { left: -87px;  width: 965px; }
.ap-cta__line--right { left: 1042px; width: 1208px; }

.ap-cta__icon { position: absolute; }

.ap-cta__inner {
  position: relative;
  z-index: 1;

  max-width: var(--page-width);
  min-height: 565px;
  margin-inline: auto;
  padding-inline: 96px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-64);
}

.ap-cta__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-8);

  font-size: var(--ap-fs-32);
  line-height: var(--lh-h3);
  font-weight: 500;
  letter-spacing: var(--ls-h3);
}

.ap-cta__dot {
  width: var(--space-16);
  height: var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
}

.ap-cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-20);
  width: 100%;
  text-align: center;
}

.ap-cta__avatar {
  width: 164.333px;
  height: 164.333px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  object-fit: cover;
}

.ap-cta__title {
  font-size: var(--ap-fs-64);
  line-height: var(--ap-lh-h2);
  font-weight: var(--fw-h2);
  letter-spacing: -0.03em;
  color: var(--color-text-invert);
  margin-top: var(--space-4);
}

.ap-cta__lead {
  max-width: 579px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  letter-spacing: var(--ls-h2);
}

.ap-cta__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}

/* ==========================================================================
   АДАПТИВ – ЗАГЛУШКА, А НЕ ВЁРСТКА ПО МАКЕТУ

   Мобильного макета этой страницы НЕТ: в файле единственный размер 1920.
   Правила ниже решают ровно одну задачу – не дать странице разъехаться и
   не пустить горизонтальный скролл на 1440 и 390. Это НЕ дизайн: как
   должны вести себя семь карточек маршрута или сравнение «С AP / Без AP»
   на узком экране, дизайнер не рисовал. См. _figma/00-INDEX.md.
   ========================================================================== */

@media (max-width: 1600px) {

  /* Панель хиро на узком экране перестаёт быть абсолютной и встаёт
     под текст – иначе она наезжает на заголовок. */
  .ap-hero__inner { min-height: 0; }

  .ap-hero__panel {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    margin-top: var(--space-48);
  }

  .ap-route__grid    { grid-template-columns: repeat(4, 1fr); }
  .ap-career__grid   { max-height: none; }
  .ap-career__head  { grid-column: 1 / -1; }
  .ap-career__more .ap-btn { grid-column: 1; }
  .ap-career__card--note { grid-column: auto; }
}

@media (max-width: 1200px) {
  .ap-principle__grid,
  .ap-process__grid  { grid-template-columns: 1fr 1fr; }
  .ap-principle__side,
  .ap-process__panel { grid-column: 1 / -1; }

  .ap-subjects__grid { grid-template-columns: repeat(2, 1fr); }
  .ap-compare__grid  { grid-template-columns: 1fr 1fr; }
  .ap-audience__grid { grid-template-columns: repeat(2, 1fr); }
  .ap-result__grid,
  .ap-tracks__grid   { grid-template-columns: 1fr; }

  .ap-problem__grid  { grid-template-columns: 1fr; }
  .ap-problem__panel { padding-inline: var(--space-24); }

  .ap-start__inner   { padding-inline: 0; flex-wrap: wrap; }
  .ap-start__content { flex-basis: 100%; padding-top: 0; }
  .ap-start__panel   { flex-basis: 100%; }

  .ap-hero__inner,
  .ap-cta__inner     { padding-inline: var(--side-padding); }
  .ap-hero { padding-block: 96px var(--space-48); }
}

@media (max-width: 900px) {
  .ap-page { --ap-fs-h2: 28px; --ap-fs-64: 40px; --ap-fs-32: 24px; }

  .ap-route__grid,
  .ap-subjects__grid,
  .ap-audience__grid,
  .ap-career__grid,
  .ap-compare__grid,
  .ap-principle__grid,
  .ap-process__grid,
  .ap-principle__ways { grid-template-columns: 1fr; }

  .ap-career__grid { grid-auto-rows: auto; }
  .ap-career__card,
  .ap-step,
  .ap-subject,
  .ap-audience__card,
  .ap-principle__card,
  .ap-process__card,
  .ap-way,
  .ap-compare__col,
  .ap-problem__card,
  .ap-problem__panel { min-height: 0; height: auto; }

  .ap-audience__card { aspect-ratio: auto; min-height: 0; }

  /* Фото-коллаж на ≤900 скрыт – облако иконок и обложки без него не имеют
     смысла и вылезали из невысокой карточки. */
  .ap-audience__icons,
  .ap-audience__books { display: none; }

  .ap-compare__list,
  .ap-problem__list  { height: auto; }

  .ap-route__head    { flex-direction: column; }
  .ap-route__aside   { width: 100%; max-width: none; margin-left: 0; }

  .ap-track          { flex-direction: column; }
  .ap-track__badge   { flex-basis: auto; flex-direction: row; gap: var(--space-12); }
  .ap-track__panel   { flex-direction: column; align-items: stretch; }
  .ap-track__arrow   { align-self: center; transform: rotate(90deg); }

  .ap-panel__grid--2,
  .ap-panel__grid--3,
  .ap-panel__grid--4 { grid-template-columns: 1fr; grid-auto-rows: auto; }

  /* Декоративные слои на узком экране только мешают: прячем, чтобы не
     тянуть лишние килобайты и не ловить переполнение. */
  .ap-hero__decor,
  .ap-cta__decor,
  .ap-principle__cloud,
  .ap-audience__icons,
  .ap-process__note { display: none; }

  .ap-btn--fixed    { width: 100%; }
  .ap-btn           { white-space: normal; }
}

/* ==========================================================================
   ПРАВКИ ПОСЛЕ СВЕРКИ (2026-08-04)

   Найдено замером горизонтальной прокрутки: страница уезжала на 21px
   при 1440 и на 161px при 390.
   ========================================================================== */

/*
 * Бейдж с иконкой стоял на фиксированных left: 357px внутри
 * .ap-subject__media. На холсте 1920 это ровно правый край блока
 * (357 + 115 = 472), но блок резиновый: на 1440 он уже, и бейдж вылезал
 * за пределы экрана, утаскивая за собой всю страницу.
 *
 * Прижимаем к правому краю – на 1920 позиция та же, что в макете,
 * на узких экранах бейдж остаётся внутри.
 */
.ap-subject__badge {
  left: auto;
  right: 0;
}

/*
 * Страховка от декора с абсолютными координатами: он рассчитан на холст
 * 1920 и на узких экранах неизбежно выходит за края. Обрезаем по секции,
 * а не по body – иначе не видно, что именно торчит.
 */
.ap-page > section { overflow-x: clip; }