/* ==========================================================================
   Экосистема 99Percentile – страница «Внешкольная деятельность»

   Источник: Figma нода 32585:4081 (1920×10383, 12 прямых детей).
   Ноды секций перечислены в _figma/02-screens/vneshkolnaya-deyatelnost.md,
   значения по каждой сняты через get_design_context, а не подобраны на глаз.

   ПРАВИЛА ФАЙЛА
   • Цвета, кегли, радиусы и отступы берутся из variables.css. Литерал
     остаётся только там, где в макете есть значение, для которого токена
     нет – каждый такой случай подписан комментарием.
   • Теней нет ни в одной секции: в макете их нет вообще (см. variables.css).
   • Hover / focus / active не описаны: в макете эти состояния не нарисованы.
     Появившийся здесь :hover – отсебятина.

   АДАПТИВ
   Мобильного макета НЕТ: нарисован только ПК 1920. Поэтому адаптив здесь
   минимальный – он не выдумывает несуществующий мобильный дизайн, а только
   не даёт вёрстке разъехаться и убирает горизонтальный скролл. Такие
   правила помечены «[АДАПТИВ – в макете нет]».
   ========================================================================== */

.extra-page {

	/* --- Кегли, которых нет в variables.css -------------------------------- */
	/* Сняты с конкретных нод этой страницы. Когда дизайнер вынесет их в
	   переменные Figma – переехать отсюда в variables.css. */

	--fs-section-title: 36px;   /* h2 всех секций. --fs-h2 = 28px, не подходит */
	--fs-card-title:    28px;   /* заголовок карточки и лид правой колонки     */
	--fs-card-lead:     32px;   /* подпись под названием траектории            */
	--fs-cta-title:     40px;   /* заголовок секции записи на консультацию     */

	/* Трекинг −6 %: в variables.css есть −5 % (--ls-h3) и −8 % (--ls-h1),
	   а −6 % встречается на h2 секций и заголовке CTA. */
	--ls-tight: -0.02em;

	/* Радиусы, которых нет в variables.css. Все сняты с нод: дизайнер
	   задавал их числом, а не из системы (отсюда и дробные значения). */
	--radius-24:       24px;      /* карточка CTA, плитки логотипов          */
	--radius-note:     11.829px;  /* белая плашка с иконкой (32585:4779)     */
	--radius-icon-box: 15.5px;    /* цветной квадрат 93×93 под иконку        */
	--radius-icon-lg:  20px;      /* цветной квадрат 115×115 в секции 5      */
	--radius-icon-sm:  9.167px;   /* цветной квадрат 55×55 в плитке хиро     */
	--radius-photo:    18.521px;  /* фотография внутри карточки              */

	/* Прозрачность вторичного текста. В макете это opacity слоя, а не
	   отдельный цвет – поэтому и здесь opacity, а не новый токен. */
	--opacity-muted: .6;

	/* Градиенты. В Figma заведены переменные lin_gradient_1…4, но API
	   отдаёт по ним пустую строку, поэтому значения сняты с самих нод. */
	--gradient-eval:  linear-gradient(128.454deg, #F2F2F8 13.262%, #B5DCFF 127.31%);
	--gradient-red:   linear-gradient(135.569deg, #FF6672 14.571%, #F2ABB1 87.989%);
	--gradient-blue:  linear-gradient(136.006deg, #2597FF 2.979%,  #C8E5FF 97.198%);
	--gradient-purple:linear-gradient(124.689deg, #845BEA 6.9423%, #CDB9FF 96.107%);
}

/* Вертикальный ритм страницы: в макете все 10 промежутков между секциями
   равны 140px – это и есть --section-gap. Отступ до подвала такой же. */
.extra-page > section + section { margin-top: var(--section-gap); }
.extra-page { padding-bottom: var(--section-gap); }

/* Якоря плиток хиро ведут внутрь страницы – иначе заголовок секции
   упирается в верхнюю кромку окна. */
.extra-page [id] { scroll-margin-top: var(--space-24); }

/* ==========================================================================
   Общее для секций: метка раздела, заголовок, правая колонка шапки
   ========================================================================== */

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

	font-size: var(--fs-body);
	line-height: var(--lh-h3);          /* 1.2, а не 1.3 как у --lh-body */
	font-weight: 500;
	letter-spacing: var(--ls-h3);
}

.extra-label__dot {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: var(--radius-pill);
	background: var(--color-brand);
}

.extra-title {
	margin-top: var(--space-16);

	font-size: var(--fs-section-title);
	/* Интерлиньяж 0.9 – так у всех h2 этой страницы. Значения в макете
	   ниже единицы: строки заголовка намеренно поджаты. */
	line-height: .9;
	font-weight: 500;
	letter-spacing: var(--ls-tight);
}

.extra-accent { color: var(--color-link); }

/*
   Шапка из двух колонок: слева метка и h2, справа лид и пояснение.
   В макете правая колонка начинается на x=815 (секция 3) и x=970
   (секции 4 и 6) – то есть примерно с середины контейнера. Делим 50/50,
   а разброс гасим max-width на самих абзацах.
*/
.extra-head--split {
	display: flex;
	align-items: flex-start;
	gap: var(--space-32);
}

.extra-head--split .extra-head__left,
.extra-head--split .extra-head__right {
	flex: 1 1 0;
	min-width: 0;
}

.extra-head--split .extra-title { max-width: 640px; }

.extra-head--center { text-align: center; }
.extra-head--center .extra-label { justify-content: center; }

.extra-head__lead {
	font-size: var(--fs-card-title);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	max-width: 613px;
}

.extra-head__desc {
	margin-top: var(--space-24);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	opacity: var(--opacity-muted);
	max-width: 600px;
}

/* Вариант без правой колонки: пояснение стоит под заголовком (секции 5, 8). */
.extra-head__desc--narrow {
	margin-top: var(--space-32);
	max-width: 707px;
}

/* Расстояние от шапки до содержимого секции – 48px во всех секциях. */
.extra-head + * { margin-top: var(--space-48); }

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

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

	width: 48px;
	height: 48px;
	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);
}

.extra-num--lg { width: 52px; height: 52px; }

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

/* На цветной подложке кружок белый, а цифра – цвета карточки. */
.extra-num--on-color            { background: var(--color-bg); }
.extra-num--on-color.extra-num--blue   { color: var(--color-brand); }
.extra-num--on-color.extra-num--red    { color: var(--color-red); }
.extra-num--on-color.extra-num--purple { color: var(--color-purple); }

/* --- Цветной квадрат 93×93 под иконку ------------------------------------- */

.extra-box {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;

	width: 93px;
	height: 93px;
	border-radius: var(--radius-icon-box);
}

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

/* --- Белая плашка с иконкой (хиро и CTA) ----------------------------------
   Нода 32585:4801: карточки не на всю колонку – 828px и 652px (fit-content
   по тексту 671 / 495 + иконка 93 + gap 24 + padding 40). */

.extra-note {
	display: flex;
	align-items: center;
	gap: var(--space-24);

	width: fit-content;
	max-width: 100%;
	padding: var(--space-20);
	background: var(--color-bg);
	border: 1px solid var(--color-bg-soft);
	border-radius: var(--radius-note);
}

.extra-note__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;

	width: 93px;
	height: 93px;
	border-radius: var(--radius-icon-box);
}

.extra-note__icon--blue  { background: var(--color-brand); }
.extra-note__icon--green { background: var(--color-green); }

.extra-note__text {
	flex: 0 1 auto;
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	letter-spacing: var(--ls-small);
	color: var(--color-text);
	opacity: var(--opacity-muted);
}

/* Ширины контейнеров из макета 32585:4779 / 32585:4790. */
.extra-note--wide   { width: 828px; max-width: 100%; }
.extra-note--narrow { width: 652px; max-width: 100%; }

.extra-note--wide   .extra-note__text { max-width: 671px; }
.extra-note--narrow .extra-note__text { max-width: 495px; }

/* ==========================================================================
   Секция 1 – хиро. Нода 32585:4085, 1920×946
   ========================================================================== */

.extra-hero {
	position: relative;
	background: var(--color-brand);
	color: var(--color-text-invert);
}

/*
   В макете шапка лежит ПОВЕРХ синего хиро, но в разметке темы <header>
   идёт до <main> и занимает первые 100px потока (24px отступ + 76px
   полосы). Дотягиваем синий вверх псевдоэлементом: z-index −1 оставляет
   шапку сверху. Править header.php / header.css нельзя – это общие файлы,
   расхождение вынесено в отчёт. Приём тот же, что в front.css.
*/
.extra-hero::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	/* --header-h – фактическая высота шапки (замер в main.js). */
	top: calc(-1 * var(--header-h));
	height: var(--header-h);
	background: var(--color-brand);
	z-index: -1;
}

/*
   Фотография и голубой круг вылезают за границы хиро – им нужен свой
   слой с обрезкой. На саму секцию overflow вешать нельзя: он срежет
   подложку под шапкой выше.

   Слой начинается от ВЕРХА СТРАНИЦЫ, а не от верха хиро: левый верхний
   круг в макете уходит под шапку, и обрезка по верху хиро рвала его
   горизонтальной линией на границе шапки (правка 2026-08-06). Координаты
   эллипсов ниже – от верха страницы, как в макете.
*/
.extra-hero__decor {
	position: absolute;
	inset: 0;
	top: calc(-1 * var(--header-h));
	overflow: hidden;
}

/*
   Ноды 32585:4086…4091 – по три эллипса в углу.
   Внешний: solid #4BA9FF, средний/внутренний: градиенты (как s13 на главной).
   Позиции/повороты из Figma 32585:4085; top сдвинут на высоту шапки в потоке
   (в макете Main Container начинается от верха страницы).
*/
.extra-hero__ellipse {
	position: absolute;
	max-width: none;
	pointer-events: none;
}

.extra-hero__ellipse--l1 {
	left: -426px;
	top: -445px;
	width: 781px;
	height: 781px;
	transform: rotate(-178.54deg);
}

.extra-hero__ellipse--l2 {
	left: -399.34px;
	top: -418.34px;
	width: 729px;
	height: 729px;
	transform: rotate(-178.54deg);
}

.extra-hero__ellipse--l3 {
	left: -371.67px;
	top: -390.67px;
	width: 675px;
	height: 675px;
	transform: rotate(-178.54deg);
}

.extra-hero__ellipse--r1 {
	left: 960px;
	top: 218px;
	width: 1197px;
	height: 1197px;
	transform: rotate(90deg);
}

.extra-hero__ellipse--r2 {
	left: 1000px;
	top: 258.5px;
	width: 1117px;
	height: 1117px;
	transform: rotate(90deg);
}

.extra-hero__ellipse--r3 {
	left: 1041px;
	top: 299px;
	width: 1035px;
	height: 1035px;
	transform: rotate(90deg);
}

/* Фото: в макете 1508×966 на x=688, y=155 при ширине страницы 1920.
   Привязываем к правому краю, чтобы на узких экранах не уезжал герой.
   Фото лежит в слое декора, который начинается от верха страницы –
   поэтому y макета берётся как есть. */
.extra-hero__photo {
	position: absolute;
	top: 155px;
	right: -276px;
	width: 1508px;
	max-width: none;
	height: auto;
}

.extra-hero__inner {
	position: relative;
	z-index: 1;

	display: flex;
	align-items: center;
	gap: var(--space-48);

	max-width: var(--page-width);
	margin-inline: auto;

	/* Макет: padding 128 / 96 / 64 / 40 при высоте 946. Из верхнего
	   отступа и высоты вычтена фактическая высота шапки в потоке. */
	min-height: calc(946px - var(--header-h));
	padding: max(16px, calc(128px - var(--header-h))) 96px 64px var(--side-padding);
}

/* --- Хиро, колонка плиток (нода 32597:5124) ------------------------------- */

.extra-hero__tiles {
	flex: 0 0 300px;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	height: 680px;
}

.extra-tile {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-12);

	padding: var(--space-8) var(--space-20);
	background: var(--color-bg);
	border-radius: var(--radius-md);
	color: var(--color-text);
	text-align: center;
}

.extra-tile__icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 55px;
	height: 55px;
	border-radius: var(--radius-icon-sm);
}

.extra-tile__icon--red    { background: var(--color-red); }
.extra-tile__icon--yellow { background: var(--color-yellow); }
.extra-tile__icon--green  { background: var(--color-green); }
.extra-tile__icon--purple { background: var(--color-purple); }

.extra-tile__label {
	font-size: var(--fs-body);
	line-height: var(--lh-h3);
	font-weight: 600;
	letter-spacing: var(--ls-h3);
}

/* --- Хиро, текстовая колонка (нода 32585:4778) ---------------------------- */

.extra-hero__text {
	flex: 1 1 auto;
	min-width: 0;

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

.extra-hero__heads {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.extra-hero__title {
	max-width: 636px;
	color: var(--color-text-invert);
	/* Кегль, интерлиньяж и трекинг – системные H1 из variables.css. */
}

.extra-hero__lead {
	max-width: 628px;
	font-size: var(--fs-lead);
	line-height: var(--lh-lead);
	letter-spacing: var(--ls-lead);
	color: var(--color-white-90);
}

.extra-hero__notes {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-12);
}

/* ==========================================================================
   Секция 3 – «Что оценивают зарубежные университеты?». Нода 32594:5047
   ========================================================================== */

/* Ширины колонок из макета: 369 / 369 / 600 / 445 при промежутке 20px.
   Третья карточка шире и залита градиентом – это та самая внешкольная
   деятельность, ради которой сделана страница. */
.extra-eval__grid {
	display: grid;
	grid-template-columns: 369fr 369fr 600fr 445fr;
	gap: var(--space-20);
}

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

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

.extra-eval__card--accent { background: var(--gradient-eval); }

.extra-eval__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-16);
}

.extra-eval__pic {
	width: 92px;
	height: 92px;
	flex: 0 0 auto;
}

.extra-eval__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

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

.extra-eval__desc {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	opacity: var(--opacity-muted);
}

/* Пояснение третьей карточки в макете уже самой карточки – 453 из 552. */
.extra-eval__card--accent .extra-eval__desc { max-width: 453px; }

/* ==========================================================================
   Секции 4 и 8 – карточка с фотографией. Ноды 32614:3772 и 32632:4896
   ========================================================================== */

.extra-photo-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-20);
}

.extra-photo-card {
	display: flex;
	flex-direction: column;

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

.extra-photo-card__pic {
	width: 100%;
	height: 250px;
	object-fit: cover;
	border-radius: var(--radius-photo);
}

.extra-photo-card__title {
	margin-top: var(--space-32);
	font-size: var(--fs-card-title);
	line-height: var(--lh-h3);
	font-weight: 500;
	letter-spacing: var(--ls-h3);
}

.extra-photo-card__desc {
	margin-top: var(--space-24);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	opacity: var(--opacity-muted);
}

/* ==========================================================================
   Секция 5 – «Семестровые программы и курсы». Нода 32652:4928
   ========================================================================== */

.extra-sem__wrap { position: relative; }

/*
   Наклонённая плашка над третьей карточкой (нода 32621:4435).
   В макете её левый край – 66.7 % ширины контейнера, а верх на 55px выше
   ряда карточек. min() не даёт ей вылезти за правый край на узких экранах.
   [АДАПТИВ – в макете нет: сам min()]
*/
.extra-sem__note {
	position: absolute;
	z-index: 1;
	top: -55px;
	left: min(66.7%, 100% - 292px);

	width: 292px;
	padding: var(--space-16);
	background: var(--color-bg);
	border: 1px solid var(--color-bg-soft);
	border-radius: var(--radius-note);

	font-size: var(--fs-small);
	line-height: var(--lh-small);
	letter-spacing: var(--ls-small);
	color: var(--color-text);
	text-align: center;
	opacity: var(--opacity-muted);

	transform: rotate(2.35deg);
}

.extra-sem__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-20);
}

.extra-sem__card {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);

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

/*
   Сцена медиа: ширина 100% карточки, высота по aspect-ratio макета
   (397×279 или 397×305). Координаты значков заданы inline в px макета
   и переводятся в % через --sem-w / --sem-h.
*/
.extra-sem__media {
	--sem-w: 397;
	--sem-h: 279;

	position: relative;
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 397 / 279;
	overflow: visible;
}

.extra-sem__card--purple .extra-sem__media,
.extra-sem__card--yellow .extra-sem__media {
	--sem-h: 305;
	aspect-ratio: 397 / 305;
}

.extra-sem__stage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.extra-sem__photo {
	position: absolute;
	top: 0;
	/* left/width/height приходят inline в px макета → переводим в % */
	left: calc(var(--photo-x, 59) / var(--sem-w) * 100%);
	width: calc(var(--photo-s, 279) / var(--sem-w) * 100%);
	height: calc(var(--photo-s, 279) / var(--sem-h) * 100%);
	object-fit: cover;
	border-radius: var(--radius-pill);
}

.extra-sem__fig {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	left: calc(var(--fx) / var(--sem-w) * 100%);
	top: calc(var(--fy) / var(--sem-h) * 100%);
}

.extra-sem__fig img {
	display: block;
	max-width: 100%;
	height: auto;
}

.extra-sem__fig--big {
	width: calc(var(--fw, 115) / var(--sem-w) * 100%);
	aspect-ratio: 1 / 1;
	border-radius: 20px;
}

.extra-sem__fig--square,
.extra-sem__fig--round {
	width: calc(48 / var(--sem-w) * 100%);
	aspect-ratio: 1 / 1;
}

.extra-sem__fig--square { border-radius: var(--radius-sm); }
.extra-sem__fig--round  { border-radius: var(--radius-pill); }

.extra-sem__fig--loose {
	width: calc(var(--fw) / var(--sem-w) * 100%);
	height: calc(var(--fh) / var(--sem-h) * 100%);
}

.extra-sem__fig--blue   { background: var(--color-brand); }
.extra-sem__fig--purple { background: var(--color-purple); }
.extra-sem__fig--yellow { background: var(--color-yellow); }
.extra-sem__fig--red    { background: var(--color-red); }

.extra-sem__fig--square img,
.extra-sem__fig--round img {
	width: 66.67%;
	height: auto;
}

.extra-sem__fig--big img {
	width: auto;
	max-width: 76%;
	max-height: 76%;
}

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

.extra-sem__title {
	font-size: var(--fs-card-title);
	line-height: var(--lh-h3);
	font-weight: 500;
	letter-spacing: var(--ls-h3);
}

.extra-sem__desc {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	opacity: var(--opacity-muted);
}

/* ==========================================================================
   Секция 6 – «Научно-исследовательские проекты (Research)». Нода 32652:4927
   ========================================================================== */

/*
   Линия 32600:5211 идёт во всю ширину страницы (0…1920) и проходит ровно
   по центру кружков с номерами – на 24px ниже верха ряда. Отсюда
   псевдоэлемент на 100vw, а не рамка на контейнере.
*/
.extra-research__rule {
	position: relative;
	margin-top: var(--space-48);
}

.extra-research__rule::before {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 24px;
	width: 100vw;
	border-top: 1px solid var(--color-border);
}

.extra-research__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-32);
}

.extra-research__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
}

/* Кружок обязан перекрывать линию, а не прятаться под ней. */
.extra-research__col .extra-num { position: relative; }

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

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

.extra-research__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	width: 100%;
	text-align: center;
}

.extra-research__title {
	font-size: var(--fs-body);
	line-height: var(--lh-h3);
	font-weight: 500;
	letter-spacing: var(--ls-h3);
}

/* Пояснение здесь без opacity: в макете слой непрозрачный, разницу
   с заголовком даёт кегль. */
.extra-research__desc {
	font-size: var(--fs-small);
	line-height: var(--lh-small);
	letter-spacing: var(--ls-small);
}

/* ==========================================================================
   Секция 7 – примеры траекторий. Нода 32652:4926
   ========================================================================== */

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

.extra-tracks__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-20);
	align-items: stretch;
}

/* Во втором ряду схема слева, карточка справа. */
.extra-tracks__row--flip .extra-tracks__card { order: 2; }

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

	padding: var(--space-24);
	border-radius: var(--radius-lg);
	color: var(--color-text-invert);
	text-align: center;
}

.extra-tracks__card--red    { background: var(--gradient-red); }
.extra-tracks__card--blue   { background: var(--gradient-blue); }
.extra-tracks__card--purple { background: var(--gradient-purple); }

.extra-tracks__title {
	font-size: var(--fs-h1);
	/* 0.9 – так в макете; у H1 хиро --lh-h1 = 1.1, здесь строка одна. */
	line-height: .9;
	font-weight: var(--fw-h1);
	letter-spacing: var(--ls-h1);
}

.extra-tracks__subtitle {
	font-size: var(--fs-card-lead);
	line-height: 1;             /* leading-none, токена под это нет */
	letter-spacing: var(--ls-h3);
	opacity: var(--opacity-muted);
}

/*
   Схема справа (910×534) – связка значков, подписей и кривых-стрелок.
   Выгружена из Figma одним SVG: текст в нём переведён в кривые, поэтому
   шрифт странице не нужен и картинка тянется без потери резкости.
   Подписи продублированы в alt.
*/
.extra-tracks__scheme {
	width: 100%;
	height: auto;
	border-radius: var(--radius-lg);
}

/* ==========================================================================
   Секция 8 – «Бизнес-проекты и предпринимательство». Нода 32652:4925
   ========================================================================== */

.extra-biz__row {
	display: flex;
	align-items: flex-start;
	/* 23px – фактический зазор макета между рядом карточек и блоком
	   логотипов (1414 → 1437). Токена под это значение нет. */
	gap: 23px;
}

.extra-biz__grid {
	flex: 1 1 0;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* 14px – промежуток именно этого ряда, у остальных сеток 20px. */
	gap: 14px;
}

.extra-photo-card--narrow { min-height: 514px; }

.extra-biz__partners {
	flex: 0 1 443px;
	min-width: 0;

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

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

.extra-biz__partners-title {
	max-width: 343px;
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-h3);
	letter-spacing: var(--ls-h3);
}

.extra-biz__logos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
}

.extra-biz__logos li { flex: 0 1 193px; }

.extra-biz__logos img {
	width: 100%;
	height: 88px;
	object-fit: cover;
	border-radius: var(--radius-24);
}

/* ==========================================================================
   Секция 9 – «Не существует универсального рецепта поступления».
   Нода 32652:4930. Карточки – компонент «Trajectory Card»
   ========================================================================== */

.extra-recipe__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-32);
}

/*
   Левая колонка в макете начинается на x=109, а не на 40 как остальные
   секции: 69px – её собственный сдвиг внутри контейнера.
*/
.extra-recipe__text {
	flex: 0 1 600px;
	min-width: 0;
	margin-left: 69px;
}

.extra-recipe__lead {
	margin-top: var(--space-32);
	max-width: 431px;
	font-size: var(--fs-card-title);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
}

.extra-recipe__paragraphs {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	margin-top: var(--space-32);

	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	opacity: var(--opacity-muted);
}

.extra-recipe__grid {
	flex: 0 1 910px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-24);
}

.extra-track-card {
	position: relative;
	overflow: hidden;
	min-height: 310px;
	/* Верхний отступ 26px – под цветной полосой; остальные 24px. */
	padding: 26px var(--space-24) var(--space-24);
	border-radius: var(--radius-lg);
}

.extra-track-card--grey { background: var(--color-bg-soft); }
.extra-track-card--cold { background: var(--color-bg-cold); }

/* Полоса 6px: в макете скруглены только верхние углы. */
.extra-track-card__strip {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 6px;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.extra-track-card__strip--blue   { background: var(--color-brand); }
.extra-track-card__strip--red    { background: var(--color-red); }
.extra-track-card__strip--yellow { background: var(--color-yellow); }
.extra-track-card__strip--green  { background: var(--color-green); }

/*
   Разделитель в макете стоит на фиксированной высоте 188px независимо от
   того, в одну строку заголовок или в две. Отсюда min-height у заголовка.
*/
.extra-track-card__title {
	margin-top: 22px;
	min-height: 88px;

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

.extra-track-card__desc {
	padding-top: var(--space-16);
	/* В макете Divider stroke #C8C8DC (--color-divider), не --color-border
	   (#E6E6E6) – на фоне #F2F2F8 / #EEF3FF бордер почти не читался. */
	border-top: 1px solid var(--color-divider);

	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	opacity: var(--opacity-muted);
}

/* ==========================================================================
   Секция 10 – FAQ. Нода 32594:4865
   ========================================================================== */

.extra-faq__inner {
	max-width: 1065px;
	margin-inline: auto;
}

.extra-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/*
   Аккордеон на <details>/<summary> (правка 2026-08-06): раньше список был
   статичным и все ответы стояли раскрытыми. Теперь вопросы закрыты, пока
   посетитель сам не раскроет; плюс/минус переключается по [open].
*/
.extra-faq__item {
	padding: var(--space-20);
	border: 1px solid var(--color-bg);
	border-radius: var(--radius-lg);
}

.extra-faq__item--grey { background: var(--color-bg-soft); }
.extra-faq__item--cold { background: var(--color-bg-cold); }

.extra-faq__summary {
	display: flex;
	align-items: center;
	list-style: none;
	cursor: pointer;
}

.extra-faq__summary::-webkit-details-marker { display: none; }

/* Кружок с номером занимает левую половину строки – так в макете. */
.extra-faq__aside {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
}

.extra-faq__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-32);
	padding-left: 10px;
}

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

/* Ответ продолжает правую колонку: половина карточки + отступ 10, справа
   место под знак (40) и зазор до него (32) – как у adm-faq. */
.extra-faq__answer {
	margin-top: var(--space-16);
	margin-left: 50%;
	padding-left: 10px;
	padding-right: calc(40px + var(--space-32));

	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
	opacity: var(--opacity-muted);
}

.extra-faq__sign {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
}

/* Закрыто – плюс, открыто – минус. */
.extra-faq__sign--minus { display: none; }
.extra-faq__item[open] .extra-faq__sign--plus  { display: none; }
.extra-faq__item[open] .extra-faq__sign--minus { display: block; }

/* ==========================================================================
   Секция 11 – запись на консультацию. Нода 32592:4825, 1920×1018
   ========================================================================== */

.extra-cta {
	position: relative;
	overflow: hidden;
	background: var(--color-brand);
	color: var(--color-text-invert);
}

.extra-cta__decor {
	position: absolute;
	left: 50%;
	top: 0;
	width: var(--page-width);
	height: 100%;
	transform: translateX(-50%);
	pointer-events: none;
}

/* Как front-consult__decor: шесть SVG-эллипсов (solid + градиенты). */
.extra-cta__decor img {
	position: absolute;
	max-width: none;
}

.extra-cta__decor img:nth-child(1) { left: -712px;   top: -817px;   width: 1090px;    height: 1090px;    transform: scaleY(-1); }
.extra-cta__decor img:nth-child(2) { left: -676px;   top: -781px;   width: 1018px;    height: 1018px;    transform: scaleY(-1); }
.extra-cta__decor img:nth-child(3) { left: -638px;   top: -743px;   width: 942px;     height: 942px;     transform: scaleY(-1); }
.extra-cta__decor img:nth-child(4) { left: 866.61px; top: 151.61px; width: 1197.66px; height: 1197.66px; transform: scaleY(-1) rotate(131.66deg); }
.extra-cta__decor img:nth-child(5) { left: 906.16px; top: 191.16px; width: 1118.55px; height: 1118.55px; transform: scaleY(-1) rotate(131.66deg); }
.extra-cta__decor img:nth-child(6) { left: 947.91px; top: 232.92px; width: 1035.05px; height: 1035.05px; transform: scaleY(-1) rotate(131.66deg); }

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

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-48);

	max-width: var(--page-width);
	margin-inline: auto;
	padding: 128px 96px;
}

.extra-cta__text {
	flex: 0 1 806px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-32);
}

.extra-cta__title {
	max-width: 603px;
	font-size: var(--fs-cta-title);
	line-height: var(--lh-h3);
	font-weight: 500;
	letter-spacing: var(--ls-tight);
}

.extra-cta__lead {
	max-width: 806px;
	font-size: var(--fs-card-title);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
}

/*
   Карточка справа – копия попапа записи (нода 32513:3984), вплоть до
   крестика закрытия. Своей формы здесь нет: заявку принимает один общий
   попап, поэтому весь блок сделан ссылкой на #consult. Строки полей –
   не поля ввода, а подписи из макета.
*/
.extra-cta__card {
	flex: 0 1 856px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-32);

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

.extra-cta__pic {
	width: 100%;
	height: 272px;
	object-fit: cover;
	border-radius: var(--radius-24);
}

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

.extra-cta__field {
	display: flex;
	align-items: center;

	min-height: 70px;
	padding: var(--space-16);
	background: var(--color-bg);
	border-radius: var(--radius-lg);

	font-size: var(--fs-body);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
}

.extra-cta__btn {
	/* 32px даёт gap карточки, ещё 16 добираем здесь – в макете 48. */
	margin-top: var(--space-16);

	display: flex;
	align-items: center;
	justify-content: center;

	min-height: var(--btn-height);
	padding: var(--btn-padding);
	background: var(--color-brand);
	border-radius: var(--radius-pill);

	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);
	text-align: center;
}

/* ==========================================================================
   АДАПТИВ – в макете нет.
   Ниже только защита от разъезда и горизонтальной прокрутки. Ни одного
   решения дизайнера здесь нет: мобильный макет не нарисован.
   ========================================================================== */

@media (max-width: 1600px) {

	/* Фиксированные 96px справа съедают контент раньше, чем контейнер. */
	.extra-hero__inner { padding-right: var(--space-64); }
	.extra-cta__inner  { padding-inline: var(--space-64); }

	/* Фото хиро перестаёт помещаться – сажаем его на правый край. */
	.extra-hero__photo { right: -140px; width: 1100px; }
}

@media (max-width: 1280px) {

	.extra-head--split { flex-direction: column; gap: var(--space-24); }
	.extra-head--split .extra-title { max-width: none; }

	.extra-eval__grid,
	.extra-photo-grid,
	.extra-sem__grid,
	.extra-research__grid,
	.extra-biz__grid { grid-template-columns: repeat(2, 1fr); }

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

	.extra-recipe__row { flex-direction: column; align-items: stretch; }
	.extra-recipe__text { flex: 1 1 auto; margin-left: 0; }
	.extra-recipe__grid { flex: 1 1 auto; }

	.extra-biz__row { flex-wrap: wrap; }
	.extra-biz__partners { flex: 1 1 100%; }
	.extra-biz__logos li { flex: 1 1 193px; }

	.extra-cta__inner { flex-direction: column; align-items: stretch; }
	.extra-cta__text  { flex: 1 1 auto; }
	.extra-cta__card  { flex: 1 1 auto; }
	.extra-cta__inner { padding-block: var(--space-64); }

	.extra-hero__inner { flex-direction: column; align-items: stretch; min-height: 0; }
	.extra-hero__tiles { flex: 0 0 auto; height: auto; flex-direction: row; }
	.extra-tile { flex: 1 1 0; }
	.extra-hero__photo { display: none; }
	.extra-hero__ellipse--r1,
	.extra-hero__ellipse--r2,
	.extra-hero__ellipse--r3 { display: none; }
}

@media (max-width: 900px) {

	.extra-tracks__row { grid-template-columns: 1fr; }
	.extra-tracks__row--flip .extra-tracks__card { order: 0; }

	.extra-recipe__grid { grid-template-columns: 1fr; }

	/* Плашка «круглый год» на узком экране перекрывает карточки. */
	.extra-sem__note { position: static; width: 100%; margin-bottom: var(--space-20); transform: none; }
}

@media (max-width: 700px) {

	.extra-page { --fs-section-title: 28px; --fs-card-title: 24px; --fs-cta-title: 28px; --fs-card-lead: 24px; }

	.extra-eval__grid,
	.extra-photo-grid,
	.extra-sem__grid,
	.extra-research__grid,
	.extra-biz__grid { grid-template-columns: 1fr; }

	.extra-hero__tiles { flex-wrap: wrap; }
	.extra-tile { flex: 1 1 45%; }

	.extra-hero__title { font-size: var(--fs-section-title); }
	.extra-tracks__title { font-size: var(--fs-section-title); }

	.extra-hero__inner,
	.extra-cta__inner { padding-inline: var(--side-padding); }

	.extra-note { flex-direction: column; align-items: flex-start; gap: var(--space-16); }

	.extra-faq__summary { align-items: flex-start; }
	.extra-faq__aside { flex: 0 0 auto; margin-right: var(--space-16); }
	.extra-faq__body { padding-left: 0; }

	/* Половинная колонка ответа на узком экране не имеет смысла. */
	.extra-faq__answer { margin-left: 0; padding-left: 0; padding-right: 0; }
}