/* Лендинг «/». Значения — из узлов Figma, переменные — public/css/tokens.css.
   Карта секций и их узлы — plan/30-landing.md §Карта. Mobile-first, 980px. */

/* ── Титульный блок ── 141:1030 (402×669) / 50:502 (1728×720) ─────────────────
   Кадр секции включает шапку (186:1481 / 141:1032 — дети 50:502 / 141:1030),
   поэтому partial header.phtml рендерится внутри .hero, а не в layout.
   Стопка: шапка → gap → «содержимое» (поля по бокам и снизу). */

.hero {
	--hero_h: 66.9rem; /* absoluteBoundingBox.height 141:1030 */
	--hero_gap: 3.2rem; /* itemSpacing 141:1030: шапка → содержимое */
	--hero_pad-x: 1.6rem; /* padding 141:1033 */
	--hero_pad-t: 5.8rem; /* шапка кончается на 184, 141:1034 — на 274, минус gap */
	--hero_pad-b: 3.5rem;
	--hero_column-gap: 17.6rem; /* itemSpacing 141:1035 / 50:506 */
	--hero_body-gap: 3.6rem; /* itemSpacing 141:1036 / 50:507 */
	--hero_glow-src: url("/img/hero/glow-mobile.svg");

	position: relative;
	isolation: isolate; /* свой контекст наложения — см. z-index у __glow */
	display: flex;
	flex-direction: column;
	min-height: var(--hero_h);
	overflow: clip; /* clipsContent: true */
	background-color: var(--color-green-deep); /* #0f3327 */
	color: var(--color-on-dark);
}

/* «градиент» 50:503 / 141:1031 — один и тот же эллипс 1972×1546, сдвинутый на
   (-343.5, -250) от угла кадра, с радиальной заливкой, opacity .8 и размытием
   220. ponytail: CSS так не умеет (radial-gradient не повернуть, blur(220px)
   на пол-экрана — дорого), поэтому берём svg-экспорт узла, как в подвале.
   Холст экспорта уже обрезан кадром: 402×477 и 1695×720 — растягиваем на бокс. */
.hero__glow {
	position: absolute;
	/* Спозиционированный элемент красится позже обычного текста рядом, поэтому
	   полупрозрачное свечение ложилось на буквы. Уводим под содержимое; фон
	   секции при этом не прячется — у неё isolation: isolate. */
	z-index: -1;
	inset: 0;
	background: var(--hero_glow-src) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
	user-select: none;
}

.hero > .header,
.hero__content {
	position: relative; /* над свечением */
}

.hero__content {
	margin-top: var(--hero_gap);
	padding: var(--hero_pad-t) var(--hero_pad-x) var(--hero_pad-b);
}

.hero__column {
	display: flex;
	flex-direction: column;
	align-items: center; /* counterAxisAlignItems CENTER */
	gap: var(--hero_column-gap);
}

/* counterAxisAlignItems CENTER, но оба ребёнка — FILL по ширине, так что
   растягиваем их (умолчание flex) и центрируем текст, а не коробки. */
.hero__body {
	display: flex;
	flex-direction: column;
	gap: var(--hero_body-gap);
	align-self: stretch; /* layoutAlign STRETCH у 50:507 */
}

/* «заголовок» 141:1038 (80/68) / 50:509 (160/136, ls -1.6). Заливка #e5af57
   на обоих кадрах. textCase ORIGINAL — прописную даёт сам Epos, поэтому
   text-transform не ставим (см. plan/progress/0.3-tokens-check.md). */
.hero__title {
	margin: 0;
	color: var(--color-sand);
	text-align: center;
}

/* «подпись опен-колла» 141:1042 (30/28) / 50:591 (80/68) — три строки с
   жёсткими переносами из макета, бейдж-сноска стоит вплотную к «опен-колл». */
.hero__caption {
	--hero_caption-size: 4rem; /* 141:1044, 141:1046 */
	--hero_caption-lh: 3.4rem;

	font-family: var(--font-display);
	font-size: var(--hero_caption-size);
	line-height: var(--hero_caption-lh);
	text-align: center;
}

/* Бейдж 141:1045 — 10×10 с цифрой 10; на десктопе 50:594 — 18×18 (умолчание
   блока .footnote). Прижат к верху строки: y бейджа = y строки на обоих кадрах. */
.hero__caption .footnote {
	--footnote_badge-size: 1rem;
	--footnote_badge-text: 1rem;

	vertical-align: top;
}

/* «кнопка / основная» 141:1048 (296×30) / 56:464 (234×40), вариант outlined:
   заливка #e5af57, обводка #212026 10%, подпись #084d36, cornerRadius 40. */
.hero__cta {
	--hero_cta-w: 18rem; /* 334:1401 */
	--hero_cta-h: 3rem;

	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--hero_cta-w);
	height: var(--hero_cta-h);
	border: 1px solid rgba(33, 32, 38, .1);
	border-radius: var(--radius-l); /* cornerRadius 40 */
	background-color: var(--color-sand);
	color: var(--color-green);
	font-size: 1.5rem; /* 334:1402 — 15/16 */
	line-height: 1.6rem;
	letter-spacing: var(--t-caption-xs-ls);
	text-decoration: none;
}

/* «кнопки» 50:515 — на мобильном кадре весь ряд скрыт (141:1049 не виден). */
.hero__actions {
	display: none;
}

/* ── Тема ── 141:1053 (402×1840) / 6:418 (1728×1278) ──────────────────────────
   Заголовок и восемь абзацев — родные дети секции с общим itemSpacing, поэтому
   одна flex-стопка без обёртки. counterAxisAlignItems CENTER: заголовок
   растянут (layoutAlign STRETCH), колонка текста центрируется max-width'ом. */

.theme {
	--theme_pad-b: var(--section-pad-bottom-mobile);
	--theme_pad-x: var(--page-margin-mobile);
	--theme_gap: var(--gap-32); /* itemSpacing 141:1053 */
	--theme_col-w: none; /* ширина абзаца 141:1055 */

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--theme_gap);
	padding: var(--section-pad-top) var(--theme_pad-x) var(--theme_pad-b);
	overflow: clip; /* clipsContent: true */
}

/* «лонгрид / заголовок» 141:1054 / 6:419 — Display/80 вместо умолчания h2. */
.theme__title {
	align-self: stretch;
	color: var(--color-green);
	font-size: var(--t-display-80-size);
	line-height: var(--t-display-80-lh);
	text-align: center;
}

/* Кегль и цвет абзаца = умолчание body (Paragraph/L, #212026) — не дублируем. */
.theme__text {
	width: 100%;
	max-width: var(--theme_col-w);
}

/* 141:1062 / 54:150 — стиль Paragraph/L-italic (54:151). */
.theme__text--outro {
	font-style: italic;
	text-align: center;
}

/* ── Приз ── 141:1063 (402×1502) / 15:123 (1728×1070) ────────────────────────
   Стопка как в «теме» (заголовок, два абзаца, подзаголовок), плюс блок
   «карточки экспертов» 141:1069 / 54:195: layoutMode NONE, но дети стоят
   ровным рядом (десктоп) и ровной колонкой (мобилка) — обычный flex. */

.prize {
	--prize_pad-x: var(--page-margin-mobile);
	--prize_pad-b: var(--section-pad-bottom-mobile);
	--prize_gap: 3.5rem; /* itemSpacing 141:1063 */
	--prize_col-w: none; /* абзац 141:1066 */
	--prize_lead1-w: 31.4rem; /* 334:1368 — у первого абзаца своя ширина */
	--prize_sub-w: 33.6rem; /* подзаголовок 141:1068 / 334:1371 */
	--prize_lead-size: 2.7rem; /* 334:1369 — 27/28, ls 0 */
	--prize_lead-lh: 2.8rem;
	--prize_lead-ls: 0;
	--prize_sub-size: var(--t-display-50-size); /* 334:1372 — 50/42.5 */
	--prize_sub-lh: var(--t-display-50-lh);
	/* Стопка на мобилке неравномерная: 35 / 35 / 60 / 61 (141:1063) */
	--prize_sub-top: 2.5rem;
	--prize_cards-top: 2.6rem;
	--prize_cards-w: 48rem;
	--prize_cards-dir: column;
	--prize_cards-gap: 3.2rem; /* зазор карточек 141:1070 → 141:1071 */
	--prize_glow-src: url("/img/prize/glow-mobile.svg");
	--prize_glow-h: 96.3rem; /* высота холста экспорта 164:2114 */

	position: relative;
	isolation: isolate; /* свой контекст наложения — см. z-index у __glow */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--prize_gap);
	padding: var(--section-pad-top) var(--prize_pad-x) var(--prize_pad-b);
	overflow: clip; /* clipsContent: true */
}

/* Эллипс 164:2114 / 21:172 — ABSOLUTE, радиальный градиент + blur 120,
   opacity .8. Как в титульном блоке и подвале: svg-экспорт, растянутый на бокс.
   Холст обрезан кадром по ширине и границей размытия снизу, начало — угол. */
.prize__glow {
	position: absolute;
	z-index: -1; /* под текст, как в титульном блоке */
	top: 0;
	left: 0;
	width: 100%;
	height: var(--prize_glow-h);
	background: var(--prize_glow-src) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
	user-select: none;
}

/* 141:1065 / 15:124 — Display/80 коричневым вместо умолчания h2. */
.prize__title {
	align-self: stretch;
	color: var(--color-brown);
	font-size: var(--t-display-80-size);
	line-height: var(--t-display-80-lh);
	text-align: center;
}

/* 141:1066 / 15:125 — H3/Regular (17:130) зелёным по центру, не умолчание body. */
.prize__lead {
	width: 100%;
	max-width: var(--prize_col-w);
	color: var(--color-green);
	font-size: var(--prize_lead-size);
	line-height: var(--prize_lead-lh);
	letter-spacing: var(--prize_lead-ls);
	text-align: center;

	/* Первый абзац на мобилке уже колонки (334:1368 — 314 против 370). */
	&:first-of-type {
		max-width: var(--prize_lead1-w);
	}
}

/* 141:1068 / 21:126 — Display/60 (21:129) коричневым. */
.prize__subtitle {
	width: 100%;
	max-width: var(--prize_sub-w);
	margin-top: var(--prize_sub-top);
	color: var(--color-brown);
	font-family: var(--font-display); /* h3 в base.css семейства не задаёт (правки, п. 5) */
	font-size: var(--prize_sub-size);
	line-height: var(--prize_sub-lh);
	text-align: center;
}

.prize__cards {
	margin-top: var(--prize_cards-top);
	display: flex;
	flex-direction: var(--prize_cards-dir);
	gap: var(--prize_cards-gap);
	width: 100%;
	max-width: var(--prize_cards-w);
	counter-reset: prize;
}



/* «голос - карточка гостя» 141:1070 / 21:158. Вырезы по центру верхней и нижней
   грани — круги 32 цвета фона внутри карточки с clipsContent, то есть видна
   половина: дешевле нарисовать фоном, чем двумя элементами. */
.prize__card {
	--prize_card-h: 18.5rem;
	--prize_card-pad-x: 2rem;
	--prize_card-size: 1.9rem; /* 141:1070 текст, своего токена нет */
	--prize_card-lh: 2.4rem;
	--prize_card-notch: 1.6rem; /* радиус верхнего выреза, круг 32 */
	--prize_card-notch-b: .9rem; /* нижний — 334:1381, круг 18 (на десктопе 32) */
	--prize_badge-size: 3.3rem; /* 145:2078 */
	--prize_badge-text: 2.4rem;
	/* Второй заливкой поверх #e5af57 лежит GRADIENT_LINEAR с opacity .45; ручки
	   (0.5,1) → (0.5,0) — во всю высоту бокса, значит 0deg без пересчёта стопов,
	   прозрачность свёрнута в альфу. */
	--prize_card-sheen: linear-gradient(
		0deg,
		rgba(249, 224, 183, .45) 0,
		rgba(229, 175, 87, .45) 24.04%,
		rgba(206, 157, 77, .45) 47.6%,
		rgba(229, 175, 87, .45) 84.13%,
		rgba(249, 224, 183, .45) 96.63%);

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center; /* primaryAxisAlignItems: CENTER */
	min-height: var(--prize_card-h);
	padding: 4.8rem var(--prize_card-pad-x) 6.4rem;
	border-radius: var(--radius-l); /* cornerRadius 40 */
	background:
		radial-gradient(circle var(--prize_card-notch) at 50% 0, var(--color-bg) 99%, transparent),
		radial-gradient(circle var(--prize_card-notch-b) at 50% 100%, var(--color-bg) 99%, transparent),
		var(--prize_card-sheen),
		var(--color-sand);
	color: var(--color-on-dark);
	font-size: var(--prize_card-size);
	line-height: var(--prize_card-lh);
	text-align: center;
	counter-increment: prize;
}

/* «бейдж - цифра» 145:2078 / 122:1144 — сидит на верхней грани поверх выреза;
   цифра идёт из счётчика, в разметке её нет. */
.prize__card::before {
	content: counter(prize);
	position: absolute;
	top: 0;
	left: 50%;
	display: grid;
	place-items: center;
	width: var(--prize_badge-size);
	height: var(--prize_badge-size);
	border-radius: 50%;
	background-color: var(--color-brown);
	color: var(--color-on-dark);
	font-size: var(--prize_badge-text);
	font-style: italic; /* LyonTextCyr-RegularItalic */
	line-height: 1; /* lineHeightPx 16 на боксе 33 */
	translate: -50% -50%;
}

/* ── Что мы делаем ── 141:1076 (402×3338) / 24:203 (1728×2255) ────────────────
   Заголовок → лид → сетка 2×2 из карточек «картинка + заголовок + абзацы».
   Строки сетки (24:207, 24:224) в разметку не переносим: карточки в строке
   выровнены по верху, высота строки = высоте старшей — это и есть CSS-grid.
   Структура — plan/30-landing.md §2.4. */

.what {
	--what_pad-x: var(--page-margin-mobile);
	--what_pad-b: var(--section-pad-bottom-mobile);
	--what_gap: var(--gap-32); /* itemSpacing 141:1076 */
	--what_title-w: 100%;
	--what_title-size: var(--t-display-60-size); /* умолчание h2 */
	--what_title-lh: var(--t-display-60-lh);
	--what_lead-w: 100%;
	--what_lead-size: var(--t-h4-size); /* 27/28, 141:1078 */
	--what_lead-lh: var(--t-h4-lh);
	--what_grid-cols: 1fr;
	--what_grid-gap: 4.8rem; /* itemSpacing 141:1079; в макете зазоры карточек
		разъехались (24/48/32) из-за перенесённых узлов иллюстраций — берём один */
	--what_grid-col-gap: 0;
	--what_card-gap: var(--gap-32); /* itemSpacing 141:1081 */
	--what_card-title-size: var(--t-display-50-size);
	--what_card-title-lh: var(--t-display-50-lh);
	--what_card-title-align: center;
	--what_img-w: 25rem; /* 145:2090 и соседи */
	--what_img-mx: auto;
	--what_text-w: 100%;
	--what_text-lh: var(--t-paragraph-l-lh);

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--what_gap);
	padding: var(--section-pad-top) var(--what_pad-x) var(--what_pad-b);
	overflow: clip; /* clipsContent: true */
}

/* 141:1077 / 21:205 — зелёный по центру. Ширина не декоративна: именно она
   переносит строку перед «Смысловая 226». */
.what__title {
	max-width: var(--what_title-w);
	color: var(--color-green);
	font-size: var(--what_title-size);
	line-height: var(--what_title-lh);
	text-align: center;
}

/* Имя сообщества внутри заголовка — коричневым (правки, п. 7). */
.what__title-accent {
	color: var(--color-brown);
}

/* 141:1078 / 58:92 — H4/Regular на мобилке, H3/Regular на десктопе, зелёный. */
.what__lead {
	max-width: var(--what_lead-w);
	color: var(--color-green);
	font-size: var(--what_lead-size);
	line-height: var(--what_lead-lh);
	text-align: center;
}

.what__grid {
	display: grid;
	grid-template-columns: var(--what_grid-cols);
	gap: var(--what_grid-gap) var(--what_grid-col-gap);
	width: 100%;
}

.what__card {
	display: flex;
	flex-direction: column;
	gap: var(--what_card-gap);
	min-width: 0; /* иначе автоминимум 1fr-колонки тянет её на самое длинное слово
		заголовка: у запасной Georgia «онлайн-журнал» в 50 px шире колонки 370 */
}

/* Абзацы первой карточки (24:221…24:223) идут без именованного стиля с
   интерлиньяжем 24 — одинаково на обоих кадрах, значит так и задумано. */
.what__card--authors {
	--what_text-lh: var(--t-caption-l-lh);
}

/* Ширина у каждой иллюстрации своя (fills IMAGE узлов «изображение»), высота —
   из атрибутов картинки. На мобилке все 250 и по центру. */
.what__img {
	width: var(--what_img-w);
	height: auto;
	margin-inline: var(--what_img-mx);
}

.what__card-title {
	color: var(--color-brown);
	font-family: var(--font-display);
	font-size: var(--what_card-title-size);
	line-height: var(--what_card-title-lh);
	letter-spacing: normal; /* умолчание h3 несёт ls стиля H3/Regular */
	text-align: var(--what_card-title-align);
}

/* «абзацы» 141:1084 / 24:220 — колонка 480 с шагом 20, умолчание body. */
.what__text {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	max-width: var(--what_text-w);
	line-height: var(--what_text-lh);
}

/* ── Регламент (врезка) ── 141:1106 (402×1989) / 59:93 (1728×1389) ────────────
   Стопка как в «теме»: заголовок, подзаголовок, ряд карточек, подзаголовок, ряд
   карточек, кнопка. Высоты карточек в макете стухли (356 при содержимом 228) —
   размер идёт из текста. Структура — plan/30-landing.md §2.5. */

.rules-teaser {
	--rules_pad-x: var(--page-margin-mobile);
	--rules_pad-b: var(--section-pad-bottom-mobile);
	--rules_gap: var(--gap-32); /* itemSpacing 141:1106 */
	--rules_col-w: 100%; /* подзаголовок 141:1109 */
	--rules_row-w: 100%; /* ряд 141:1110 */
	--rules_row-dir: column;
	--rules_row-gap: 2.4rem; /* зазор карточек 141:1111 → 141:1118 */
	--rules_text-size: inherit; /* мобилка — умолчание body (21/26) */
	--rules_text-lh: inherit;
	--rules_cta-w: 29.6rem; /* 141:1142 */
	--rules_glow-src: url("/img/rules-teaser/glow-mobile.svg");
	--rules_glow-top: 0;
	--rules_glow-h: 112.5rem; /* холст экспорта 164:2116 */

	position: relative;
	isolation: isolate; /* свой контекст наложения — см. z-index у __glow */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rules_gap);
	padding: var(--section-pad-top) var(--rules_pad-x) var(--rules_pad-b);
	overflow: clip; /* clipsContent: true */
}

/* Эллипс 164:2116 / 59:94 — как в «призе», svg-экспорт по absoluteRenderBounds.
   Отличие: десктопный холст начинается не от верха секции, а на 208 px ниже. */
.rules-teaser__glow {
	position: absolute;
	z-index: -1; /* под текст, как в титульном блоке */
	top: var(--rules_glow-top);
	left: 0;
	width: 100%;
	height: var(--rules_glow-h);
	background: var(--rules_glow-src) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
	user-select: none;
}

/* 141:1108 / 59:95 — Display/80 зелёным вместо умолчания h2. */
.rules-teaser__title {
	align-self: stretch;
	color: var(--color-green);
	font-size: var(--t-display-80-size);
	line-height: var(--t-display-80-lh);
	text-align: center;
}

/* 141:1109 / 62:94 — H3/Regular (= умолчание h3) коричневым по центру. */
.rules-teaser__subtitle {
	width: 100%;
	max-width: var(--rules_col-w);
	color: var(--color-brown);
	text-align: center;
}

.rules-teaser__row {
	display: flex;
	flex-direction: var(--rules_row-dir);
	gap: var(--rules_row-gap);
	width: 100%;
	max-width: var(--rules_row-w);
}

.rules-teaser__card {
	--rules_card-gap: 1.6rem; /* itemSpacing 59:169 */
	--rules_marker-x: 1.8rem; /* левый край точки, замер экспорта 59:169 */
	--rules_text-x: 4.1rem; /* левый край текста, он же шаг вложенности */

	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--rules_card-gap);
	min-width: 0;
	font-size: var(--rules_text-size);
	line-height: var(--rules_text-lh);

	& li {
		position: relative;
		padding-left: var(--rules_text-x);

		/* Точка маркера — она же у вложенного уровня, поэтому не list-style:
		   выключка второй строки должна идти по тексту, а не по маркеру. */
		&::before {
			content: "·";
			position: absolute;
			left: var(--rules_marker-x);
		}
	}

	/* Вложенный уровень («Что должно быть в заявке») лежит внутри своего li,
	   а его отступ уже равен шагу — своей добавки не нужно. */
	& ul {
		display: flex;
		flex-direction: column;
		gap: var(--rules_card-gap);
		margin-top: var(--rules_card-gap);
	}
}

/* Правая карточка ряда шире дышит: itemSpacing 32 у 59:174 и 62:109 (на мобилке
   во втором ряду макет съехал на 20/20 — нормализовали, decisions-log). */
.rules-teaser__card:nth-child(2) {
	--rules_card-gap: var(--gap-32);
}

/* ponytail: третий инстанс «кнопки / основной» (после .hero__cta) — вынести общий
   блок .button, когда его попросит форма (фаза 3), не раньше. Здесь вариант
   outlined с подписью #fff0d7: 62:130 / 141:1142, аннотация — ссылка на /rules. */
.rules-teaser__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--rules_cta-w);
	height: 4rem;
	border: 1px solid rgba(33, 32, 38, .1);
	border-radius: var(--radius-l); /* cornerRadius 40 */
	background-color: var(--color-sand);
	color: var(--color-on-dark);
	font-size: var(--t-caption-m-size); /* 17/20, ls .085 */
	line-height: var(--t-caption-m-lh);
	letter-spacing: var(--t-caption-m-ls);
	text-decoration: none;
}

/* ── Сроки ── 141:1143 (402×1265) / 62:133 (1728×1508) ────────────────────────
   Таймлайн: заголовок + семь пар «дата → событие» (<dl>). Обёртка «строка»
   62:137 / 141:1147 с единственным ребёнком в разметку не идёт.
   Структура — plan/30-landing.md §2.6. */

.dates {
	--dates_pad-x: var(--page-margin-mobile);
	--dates_pad-b: var(--section-pad-bottom-mobile);
	--dates_gap: var(--gap-32); /* itemSpacing 141:1143 и зазор карточек */
	--dates_item-w: 100%; /* карточка 141:1148 */
	--dates_date-size: var(--t-display-50-size);
	--dates_date-lh: var(--t-display-50-lh);
	--dates_event-w: 26rem; /* «абзацы» 141:1151 */
	--dates_event-size: var(--t-h4-size); /* 27/28.35 — округлено до токена H4 */
	--dates_event-lh: var(--t-h4-lh);
	--dates_glow-src: url("/img/dates/glow-mobile.svg");
	--dates_glow-h: 97.7rem; /* холст экспорта 164:2118 */

	position: relative;
	isolation: isolate; /* свой контекст наложения — см. z-index у __glow */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dates_gap);
	padding: var(--section-pad-top) var(--dates_pad-x) var(--dates_pad-b);
	overflow: clip; /* clipsContent: true */
}

/* Эллипс 164:2118 / 62:134 — как в «призе»: svg-экспорт от верхнего левого угла
   секции, обрезанный кадром. */
.dates__glow {
	position: absolute;
	z-index: -1; /* под текст, как в титульном блоке */
	top: 0;
	left: 0;
	width: 100%;
	height: var(--dates_glow-h);
	background: var(--dates_glow-src) 0 0 / 100% 100% no-repeat;
	pointer-events: none;
	user-select: none;
}

/* 141:1146 / 62:135 — Display/80 коричневым вместо умолчания h2. */
.dates__title {
	align-self: stretch;
	color: var(--color-brown);
	font-size: var(--t-display-80-size);
	line-height: var(--t-display-80-lh);
	text-align: center;
}

.dates__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dates_gap);
	width: 100%;
	margin: 0; /* dl в reset base.css не входит */
}

.dates__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.2rem; /* itemSpacing 141:1148 */
	width: 100%;
	max-width: var(--dates_item-w);
}

/* Дата — Epos зелёным; в макете выравнивание гуляет между CENTER и RIGHT внутри
   hug-обёртки, визуально везде центр колонки. Колонка «абзацы» (401 на десктопе,
   370 на мобилке) не ограничивает: самая длинная дата 394 — max-width не ставим,
   иначе запасная Georgia переносит строку (decisions-log). */
.dates__date {
	color: var(--color-green);
	font-family: var(--font-display);
	font-size: var(--dates_date-size);
	line-height: var(--dates_date-lh);
	text-align: center;
}

/* Событие — Lyon Text Cyr курсивом коричневым (H3/Italic 17:129 на десктопе). */
.dates__event {
	max-width: var(--dates_event-w);
	margin: 0; /* умолчание dd — отступ 40 слева */
	color: var(--color-brown);
	font-size: var(--dates_event-size);
	font-style: italic;
	line-height: var(--dates_event-lh);
	text-align: center;
}

/* ── Подать заявку ── 141:1183 (402×1300) / 69:243 (1728×1261) ────────────────
   Вкладка «о себе». Стопка: заголовок → вкладки → форма (блок полей + блок
   отправки). Зазоры между этими тремя на брейкпоинтах разные (72/72/40 против
   48/32/48), поэтому они висят margin'ами на заголовке и вкладках, а gap формы
   отвечает только за «поля → отправка». «Градиент» (69:244 / 141:1184) скрыт на
   обоих кадрах — ассета у секции нет. */

.apply {
	--apply_pad-x: var(--page-margin-mobile); /* padding 141:1183 */
	--apply_pad-b: var(--section-pad-bottom-mobile);
	--apply_col-w: 100%; /* форма 141:1186 = ширина кадра минус поля */
	--apply_title-gap: var(--gap-48); /* заголовок → форма, 141:1183 */
	--apply_tabs-gap: var(--gap-32); /* вкладки → поля, 141:1187 */
	--apply_form-gap: var(--gap-48); /* поля → отправка, 141:1186 */
	--apply_tab-size: var(--t-caption-m-size); /* I205:5532;3063:5880 — 17/20 */
	--apply_tab-lh: var(--t-caption-m-lh);
	--apply_tab-ls: var(--t-caption-m-ls);
	--apply_row-cols: 1fr;
	--apply_row-gap: 2.4rem; /* два поля в «строке» друг под другом, 141:1197 */
	--apply_submit-w: 29.6rem; /* 141:1232 */
	--apply_pane-gap: 1.6rem; /* название → подсказка → редактор, 205:5369 */
	--apply_editor-h: 30.8rem; /* 205:5378 = 38 + 234 + 36 */
	--apply_editor-radius: 1.6rem; /* cornerRadius 205:3886 */

	padding: var(--section-pad-top) var(--apply_pad-x) var(--apply_pad-b);
}

/* Заголовок здесь коричневый Display/80, как в «призе» и «сроках»
   (умолчание h2 — Display/60, перекрываем). */
.apply__title {
	margin-bottom: var(--apply_title-gap);
	color: var(--color-brown);
	font-size: var(--t-display-80-size);
	line-height: var(--t-display-80-lh);
	text-align: center;
}

/* Ряд вкладок: 40 = 24 содержимого + 16 нижнего поля, снизу линия #212026 10%.
   Обводки здесь, как и у поля, INSIDE — рисуем внутренней тенью, иначе border
   отъедает пиксель у содержимого и всё съезжает на полшага вверх. */
.apply__tabs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-48); /* itemSpacing 205:3987 / 205:5531 */
	width: var(--apply_col-w);
	height: 4rem;
	margin: 0 auto var(--apply_tabs-gap);
	padding-bottom: 1.6rem;
	box-shadow: inset 0 -1px 0 rgba(33, 32, 38, .1);
}

/* Активная вкладка отличается только подчёркиванием внутреннего фрейма
   (I205:3988;3063:5879 — обводка снизу 1 px #8d5714, у остальных visible: false). */
.apply__tab {
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--apply_tab-size);
	line-height: var(--apply_tab-lh);
	letter-spacing: var(--apply_tab-ls);
	cursor: pointer;
}

.apply__tab--active {
	box-shadow: inset 0 -1px 0 var(--color-brown);
}

.apply__form {
	display: flex;
	flex-direction: column;
	gap: var(--apply_form-gap);
	width: var(--apply_col-w);
	margin-inline: auto;
}

/* Приманка для ботов: человек её не видит и не таббится в неё, бот заполняет все
   поля подряд — сервер отбрасывает такую заявку молча (40 §Сервер). */
.apply__trap {
	display: none;
}

/* Панель вкладки. Скрытую гасит атрибут hidden (его ставит /js/tabs.js), поэтому
   без скрипта видны все три — поля формы от этого не теряются. */
.apply__pane {
	display: flex;
	flex-direction: column;
	gap: var(--apply_pane-gap);
}

.apply__pane[hidden] {
	display: none;
}

.apply__pane--about {
	gap: var(--gap-32); /* itemSpacing 80:262 / 141:1187 */
}

/* Подсказка 205:3885 / 213:1467 — Caption/caption-S 15/18, #212026 50 %.
   У синопсиса мобильный текст свой (205:5377), короче десктопного. */
.apply__hint {
	color: var(--color-ink-muted);
	font-size: var(--t-caption-s-size);
	line-height: var(--t-caption-s-lh);
	letter-spacing: var(--t-caption-s-ls);
}

.apply__hint--desktop {
	display: none;
}

/* Коробка редактора 205:3886 / 205:5378: радиус 16, белая заливка, обводка
   INSIDE 1 px #212026 10 %. Внутри полосы: тулбар (линия снизу), поле ввода на
   остаток высоты и строка счётчика (линия сверху). Высота коробки фиксированная,
   поэтому нижнее поле ввода в макете (220 / 200) — добор до неё, а не ритм:
   повторяем верхнее. */
.editor {
	--editor_input-pad: 1.6rem; /* 205:5385 */
	--editor_counter-pad: .8rem 1.2rem 1rem; /* 205:5387 = 8 + 18 + 10 */
	--editor_toolbar-pad: .6rem .8rem;
	--editor_line: rgba(33, 32, 38, .1);

	display: flex;
	flex-direction: column;
	height: var(--apply_editor-h);
	border-radius: var(--apply_editor-radius);
	background-color: var(--color-white);
	box-shadow: inset 0 0 0 1px var(--editor_line);
	overflow: clip; /* содержимое не должно вылезать за скруглённый угол */
}

/* Тулбара в макете нет (PRO-88, 9 авг) — оформляем зеркально счётчику: тот же
   масштаб полей и та же линия-разделитель, только снизу. */
.editor__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	padding: var(--editor_toolbar-pad);
	box-shadow: inset 0 -1px 0 var(--editor_line);
}

.editor__btn {
	padding: .4rem .8rem;
	border: 0;
	border-radius: .8rem;
	background: none;
	color: var(--color-ink-muted);
	font-size: var(--t-caption-s-size);
	line-height: var(--t-caption-s-lh);
	letter-spacing: var(--t-caption-s-ls);
	cursor: pointer;
}

.editor__btn:hover {
	background-color: var(--editor_line);
	color: inherit;
}

.editor__btn--import {
	margin-left: auto;
}

/* Подсказка про copy-paste и импорт — видна всегда (правки клиента, п. 14),
   строка ошибки импорта появляется на её месте только при отказе сервера. */
.editor__hint,
.editor__error {
	padding: var(--editor_counter-pad);
	box-shadow: inset 0 1px 0 var(--editor_line);
	color: var(--color-ink-muted);
	font-size: var(--t-caption-s-size);
	line-height: var(--t-caption-s-lh);
	letter-spacing: var(--t-caption-s-ls);
}

.editor__error {
	color: var(--color-error);
}

.editor__input {
	flex: 1;
	padding: var(--editor_input-pad);
	overflow-y: auto;
	font-size: var(--t-caption-m-size); /* 205:3894 — 17/20 */
	line-height: var(--t-caption-m-lh);
	letter-spacing: var(--t-caption-m-ls);
}

/* base.css гасит margin у абзацев и списков — в поле ввода они нужны, иначе
   импортированный из Word текст слипается в одну простыню.
   ponytail: «сова» вместо margin у каждого тега — набор тегов задаёт чистка. */
.editor__input > * + * {
	margin-top: 1em;
}

/* base.css гасит маркеры у всех списков — здесь они нужны, иначе кнопка списка
   выглядит бездействующей. */
.editor__input ul,
.editor__input ol {
	padding-left: 2.4rem;
	list-style: revert;
}

/* Вложенная картинка (3.7) не должна распирать поле ввода. */
.editor__input img {
	max-width: 100%;
	height: auto;
}

/* Плейсхолдер 205:3894 «Начните вводить текст…», #212026 50 %. Пустоту держит
   /js/editor.js — гасит <br>, который contenteditable оставляет после правок. */
.editor__input:empty::before {
	content: attr(data-placeholder);
	color: var(--color-ink-muted);
}

/* Текстового узла в «строка / счётчик» нет; формат «введено / лимит» — из
   40 §3.4, прижат вправо (primaryAxisAlignItems MAX у 205:3895 / 205:5387). */
.editor__counter {
	padding: var(--editor_counter-pad);
	box-shadow: inset 0 1px 0 var(--editor_line);
	color: var(--color-ink-muted);
	font-size: var(--t-caption-s-size);
	line-height: var(--t-caption-s-lh);
	letter-spacing: var(--t-caption-s-ls);
	text-align: right;
}

.apply__row {
	display: grid;
	grid-template-columns: var(--apply_row-cols);
	gap: var(--apply_row-gap);
}

/* «Откуда узнали» (92:799) — единственный ряд во всю ширину формы. */
.apply__row--full {
	--apply_row-cols: 1fr;
}

/* Поле 3150:1792 / 3159:1831: пилюля 52 = 16 + 20 + 16, cornerRadius 40,
   заливка #fffcf6, обводка INSIDE 1 px #fff0d7 20%. Обводку рисуем внутренней
   тенью, а не border: border-box съел бы 2 px высоты и сдвинул текст. */
.field {
	width: 100%;
	height: 5.2rem;
	padding: 1.6rem 2.4rem;
	border: 0;
	border-radius: var(--radius-l);
	background-color: var(--color-surface);
	box-shadow: inset 0 0 0 1px rgba(255, 240, 215, .2);
	color: var(--color-ink);
	font-size: var(--t-caption-m-size); /* Label 3150:1793 — 17/20 */
	line-height: var(--t-caption-m-lh);
	letter-spacing: var(--t-caption-m-ls);
}

/* Подпись макета живёт внутри пилюли — это плейсхолдер, а не отдельный лейбл. */
.field::placeholder {
	color: var(--color-ink-muted); /* #212026 50% */
	opacity: 1;
}

/* Выпадающий: правое поле 16 вместо 24, справа chevron 20×20 (3159:1833). */
.field--select {
	padding-right: 3.6rem;
	background: var(--color-surface) url("/img/apply/chevron.svg") right 1.6rem center / 2rem 2rem no-repeat;
	appearance: none;
	color: var(--color-ink-muted);
}

/* Выпадающий 112:658 / 112:608: пилюля + меню 3159:27872 / 3159:27885 — 420
   шириной, 8 под пилюлей, радиус 24, заливка #fffcf6, обводка 1 px #212026
   10 %, поля 16/24, шаг пунктов 32 (пункт 16 + зазор 16), подпись 13/16. */
.select {
	--select_menu-w: 42rem; /* menu 3159:27885 — 420 даже под полем 888 */
	--select_menu-gap: .8rem; /* 180 − (120 + 52) */
	--select_menu-pad: 1.6rem 2.4rem; /* option 1 в 15614,196 от меню 15590,180 */
	--select_menu-radius: 2.4rem; /* cornerRadius меню; в токенах такого нет */
	--select_option-gap: 1.6rem; /* 228 − (196 + 16) */
	--select_marker: 1.2rem; /* radio 3152:34895 */
	--select_marker-gap: .8rem; /* label 15634 − radio 15614 − 12 */

	position: relative;
}

.select__trigger {
	display: flex;
	align-items: center;
	cursor: pointer;
}

/* Выбранное значение — полный #212026 (112:706), подпись-плейсхолдер — 50 %. */
.select__value[data-placeholder] {
	color: var(--color-ink-muted);
}

.select__value:not([data-placeholder]) {
	color: var(--color-ink);
}

/* 118:363: «Другое» подменяет подпись полем ввода прямо в пилюле. */
.select__other {
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-ink);
	font: inherit;
	letter-spacing: inherit;
}

.select__menu {
	position: absolute;
	z-index: 1;
	top: calc(100% + var(--select_menu-gap));
	left: 0;
	display: flex;
	flex-direction: column;
	gap: var(--select_option-gap);
	width: 100%;
	max-width: var(--select_menu-w);
	margin: 0;
	padding: var(--select_menu-pad);
	border-radius: var(--select_menu-radius);
	box-shadow: inset 0 0 0 1px rgba(33, 32, 38, .1); /* обводка INSIDE, как у .field */
	background-color: var(--color-surface);
	list-style: none;
	font-size: var(--t-caption-xs-size); /* label 3152:34881 — 13/16 */
	line-height: var(--t-caption-xs-lh);
	letter-spacing: var(--t-caption-xs-ls);
}

.select__menu[hidden] {
	display: none;
}

/* Справочник стран (PRO-88): пунктов сотни, поэтому меню прокручивается,
   а поиск липнет к его верху. Само поле — клон `.select__other`. */
.select__menu--search {
	max-height: 24rem;
	overflow-y: auto;
}

.select__search-row {
	position: sticky;
	top: 0;
	background-color: var(--color-surface);
}

.select__search {
	width: 100%;
	padding: 0 0 .8rem;
	border: 0;
	border-bottom: 1px solid rgba(33, 32, 38, .1);
	background: none;
	color: var(--color-ink);
	font: inherit;
	letter-spacing: inherit;
}

.select__option {
	display: flex;
	align-items: center;
	gap: var(--select_marker-gap);
	cursor: pointer;
}

/* `display: flex` выше перебивает браузерное правило для [hidden] — без этого
   отсеянные поиском страны остаются на экране. */
.select__option[hidden] {
	display: none;
}

/* Кружок 12×12 обводкой 1 px, у выбранного — залит (112:706 option 2).
   У «откуда узнали» маркеров нет, кроме квадрата у выбранного «Другое». */
.select__menu--radio .select__option::before,
.select__option--other[aria-selected="true"]::before {
	content: "";
	flex: none;
	width: var(--select_marker);
	height: var(--select_marker);
	border: 1px solid var(--color-ink);
}

.select__menu--radio .select__option::before {
	border-radius: 50%;
}

.select__menu--radio .select__option[aria-selected="true"]::before {
	background-color: var(--color-ink);
}

.apply__send {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-32); /* itemSpacing 80:378 / 141:1230 */
}

/* Чекбокс 80:379 / 223:1397: 236 = 12 + 8 + 216, подпись Caption/XS в две строки. */
.apply__consent {
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	width: 23.6rem;
	font-size: var(--t-caption-xs-size);
	line-height: var(--t-caption-xs-lh);
	letter-spacing: var(--t-caption-xs-ls);
}

/* Подчёркнутая ссылка на документ согласия (правки клиента, п. 12). */
.apply__consent-link {
	text-decoration: underline;
}

/* Квадрат 12×12 с обводкой 1 px #212026 (I80:379;3074:42458 — vector без
   заливки). Заполненный 213:1520 — тот же квадрат с галочкой 5.9×5 внутри. */
.apply__checkbox {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.2rem;
	height: 1.2rem;
	margin: 0;
	border: 1px solid var(--color-ink);
	background: none;
	appearance: none;
}

/* ponytail: галочку рисуем уголком из двух границ — отдельный SVG ради 6×5
   не заводим, как и глифы тулбара редактора. */
.apply__checkbox:checked::after {
	content: "";
	width: .6rem;
	height: .3rem;
	margin-top: -.2rem;
	border-bottom: 1px solid var(--color-ink);
	border-left: 1px solid var(--color-ink);
	transform: rotate(-45deg);
}

/* «Кнопка / отправить» 80:382 / 141:1232 — заливной зелёный вариант «кнопки /
   основной»; иконка kebab в обоих кадрах скрыта.
   ponytail: общий блок .button так и не выносим — с .hero__cta и
   .rules-teaser__cta (песочный outlined) общего тут пять строк, а рефакторинг
   тронул бы две уже сверенные секции. Решение — plan/progress/decisions-log.md. */
.apply__submit {
	flex: none;
	width: var(--apply_submit-w);
	height: 4rem;
	border: 0;
	border-radius: var(--radius-l);
	background-color: var(--color-green);
	color: var(--color-on-dark);
	font-size: var(--t-caption-m-size);
	line-height: var(--t-caption-m-lh);
	letter-spacing: var(--t-caption-m-ls);
	cursor: pointer;
}

/* Неактивная кнопка 213:1498 — та же заливка, opacity 40 %. */
.apply__submit:disabled {
	opacity: .4;
	cursor: default;
}

/* Состояние 122:1027: у поля с ошибкой обводка и подпись — #8d2814. */
.field--error {
	box-shadow: inset 0 0 0 1px var(--color-error);
}

.field--error,
.field--error::placeholder,
.field--error .select__value {
	color: var(--color-error);
}

/* Коробка редактора той же ошибкой — своя обводка вместо серой линии. */
.editor--error {
	box-shadow: inset 0 0 0 1px var(--color-error);
}

/* Строка ошибки под полем. В макете её нет: там текст ошибки подменял подпись
   внутри пилюли, но одним «*Обязательное поле» ни перелимит знаков, ни ответ
   сервера не выразить (PRO-88, 10 авг). Поле и строка — один блок, поэтому
   строка не разъезжается с полем в двухколоночном ряду. */
.apply__field {
	display: flex;
	flex-direction: column;
	gap: .8rem;
}

.apply__error {
	padding-inline: 2.4rem; /* по тексту внутри пилюли (.field) */
	color: var(--color-error);
	font-size: var(--t-caption-xs-size);
	line-height: var(--t-caption-xs-lh);
	letter-spacing: var(--t-caption-xs-ls);
}

/* Согласие и общие ошибки живут в центрированной колонке .apply__send —
   поля пилюли им не по чему выравнивать. */
.apply__field--consent .apply__error,
.apply__error--form {
	padding-inline: 0;
	text-align: center;
}

/* Оповещение 183:1443 «мало знаков»: карточка 464×226, cornerRadius 36,
   заливка #e5af57, обводка 1 px #212026 10 %, поля 40/64, шаг 16.
   В макете (122:909) карточка нарисована по центру формы; мы показываем её
   нативным <dialog>.showModal() — фокус и Esc достаются даром.
   См. plan/progress/decisions-log.md. */
.notice {
	--notice_radius: 3.6rem; /* cornerRadius 183:1443; в токенах такого нет */
	--notice_gap: 1.6rem; /* itemSpacing 183:1443 */

	/* position не трогаем: у `dialog:modal` браузер ставит fixed + margin auto,
	   и это единственное, что держит окно по центру экрана. С `position: relative`
	   окно вставало по месту в потоке, а страница уезжала к началу — ровно то,
	   на что жаловался клиент (правки, п. 15). Абсолютный крестик и так цепляется
	   за .notice: fixed тоже создаёт содержащий блок. */
	width: min(46.4rem, 100% - 3.2rem);
	padding: 4rem 2.4rem; /* мобильного кадра у оповещения нет: боковые поля 64 при
	                         ширине 402 не оставляют места кнопкам, режем до 24 */
	border: 0;
	border-radius: var(--notice_radius);
	box-shadow: inset 0 0 0 1px rgba(33, 32, 38, .1);
	background-color: var(--color-sand);
	color: var(--color-green);
	text-align: center;
}

/* <dialog> закрыт — display: none, открыт — display: block от UA; колонку
   включаем только в открытом состоянии, иначе перекроем скрытие. */
.notice[open] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--notice_gap);
}

.notice__title {
	margin: 0;
	font-size: var(--t-h4-size); /* 183:1444 — 27/28 */
	line-height: var(--t-h4-lh);
}

.notice__text {
	margin: 0;
	font-size: var(--t-caption-s-size); /* 183:1445 — 15/18 */
	line-height: var(--t-caption-s-lh);
	letter-spacing: var(--t-caption-s-ls);
}

.notice__actions {
	display: flex;
	flex-wrap: wrap; /* запас на узкий экран и на подмену шрифта */
	justify-content: center;
	gap: var(--notice_gap); /* itemSpacing 183:1446 */
}

/* button/general 183:1447 / 183:1448 — пилюля 40 высотой, поля 20, kebab в
   обоих инстансах вынесен за пределы кнопки, то есть скрыт (как у .apply__submit). */
.notice__button {
	height: 4rem;
	padding: 0 2rem;
	border: 0;
	border-radius: var(--radius-l);
	background-color: var(--color-green);
	color: var(--color-on-dark);
	font-size: var(--t-caption-m-size);
	line-height: var(--t-caption-m-lh);
	letter-spacing: var(--t-caption-m-ls);
	cursor: pointer;
}

/* icons/simple/cross 183:1449 — 16×16 в 28 от верхнего и правого края карточки.
   ponytail: крестик из двух границ, SVG не заводим. */
.notice__close {
	position: absolute;
	top: 2.8rem;
	right: 2.8rem;
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.notice__close::before,
.notice__close::after {
	content: "";
	position: absolute;
	inset: 50% -.3rem auto; /* −3 с каждой стороны: повёрнутая линия даёт 15.6 ≈ 15.06 */
	border-top: 1px solid currentColor;
	transform: rotate(45deg);
}

.notice__close::after {
	transform: rotate(-45deg);
}

@media (min-width: 980px) {
	.hero {
		--hero_h: 72rem; /* 50:502 */
		--hero_gap: var(--gap-48); /* itemSpacing 50:502 */
		--hero_pad-x: 2.4rem; /* padding 50:505 */
		--hero_pad-t: 0;
		--hero_pad-b: 2.4rem;
		--hero_column-gap: 6.4rem; /* itemSpacing 50:506 */
		--hero_body-gap: 2.4rem; /* itemSpacing 50:507 */
		--hero_glow-src: url("/img/hero/glow.svg");
	}

	.hero__title {
		font-size: var(--t-display-160-size);
		line-height: var(--t-display-160-lh);
		letter-spacing: var(--t-display-160-ls);
	}

	.hero__caption {
		--hero_caption-size: var(--t-display-80-size);
		--hero_caption-lh: var(--t-display-80-lh);
	}

	.hero__caption .footnote {
		--footnote_badge-size: 1.8rem;
		--footnote_badge-text: var(--t-caption-xs-size);
	}

	.hero__cta {
		--hero_cta-w: 23.4rem;
		--hero_cta-h: 4rem;

		font-size: var(--t-caption-m-size);
		line-height: var(--t-caption-m-lh);
		letter-spacing: var(--t-caption-m-ls);
	}

	/* Ряд круглых кнопок 50:515: три инстанса, виден только средний (50:517,
	   иконка share) — 50:516 и 50:518 скрыты. */
	.hero__actions {
		display: flex;
		justify-content: center;
		gap: .4rem; /* itemSpacing 50:515 */
	}

	.hero__share {
		position: relative; /* якорь для всплывающей подписи ниже */
		display: grid;
		place-items: center;
		width: 5.2rem;
		height: 5.2rem;
		padding: 0;
		border: 1px solid rgba(255, 240, 215, .2); /* strokes 50:517, opacity .2 */
		border-radius: 50%; /* cornerRadius 100 */
		background: none;
		color: inherit;
		cursor: pointer;

		&::before {
			content: "";
			width: 2.4rem;
			height: 2.4rem;
			background-color: currentcolor;
			mask: url("/img/hero/share.svg") center / contain no-repeat;
		}

		/* Ответ кнопки там, где системного меню шаринга нет (правки, п. 16):
		   подпись всплывает под кружком и через две секунды уходит. */
		&[data-flash]::after {
			content: attr(data-flash);
			position: absolute;
			top: calc(100% + .8rem);
			left: 50%;
			translate: -50%;
			padding: .4rem .8rem;
			border-radius: var(--radius-s);
			background-color: var(--color-surface-warm);
			color: var(--color-ink);
			font-size: var(--t-caption-xs-size);
			line-height: var(--t-caption-xs-lh);
			white-space: nowrap;
		}
	}

	.theme {
		--theme_pad-b: var(--section-pad-bottom); /* 128, 6:418 */
		--theme_pad-x: 0; /* заголовок 6:419 во всю ширину кадра */
		--theme_gap: var(--gap-48); /* itemSpacing 6:418 */
		--theme_col-w: 81.6rem; /* ширина абзаца 6:421 */
	}

	.prize {
		/* padding 20 у 15:123 даёт ряд карточек 1688, но заголовок 15:124 шире
		   поля (1728). Поэтому поле не на секции, а на ряду карточек. */
		--prize_pad-x: 0;
		--prize_pad-b: var(--section-pad-bottom); /* 128, 15:123 */
		--prize_gap: var(--gap-64); /* itemSpacing 15:123 — равномерный */
		--prize_sub-top: 0;
		--prize_cards-top: 0;
		--prize_col-w: 81.6rem; /* абзац 15:125 */
		--prize_lead1-w: var(--prize_col-w); /* на десктопе абзацы одной ширины */
		--prize_sub-w: 74.6rem; /* подзаголовок 21:126 */
		--prize_lead-size: var(--t-h3-size); /* 17:130 */
		--prize_lead-lh: var(--t-h3-lh);
		--prize_lead-ls: var(--t-h3-ls);
		--prize_sub-size: var(--t-display-60-size); /* 21:129 */
		--prize_sub-lh: var(--t-display-60-lh);
		--prize_cards-dir: row;
		--prize_cards-gap: 5.2rem; /* 21:158 → 54:190 */
		--prize_cards-w: 168.8rem; /* ряд 54:195: 1728 − 20 − 20 */
		--prize_glow-src: url("/img/prize/glow.svg");
		--prize_glow-h: 89.2rem; /* холст экспорта 21:172 */
	}

	.prize__card {
		--prize_card-h: 28.8rem;
		--prize_card-pad-x: 5.6rem;
		--prize_card-size: var(--t-h4-loose-size); /* 27/32 */
		--prize_card-lh: var(--t-h4-loose-lh);
		--prize_card-notch-b: 1.6rem; /* I54:190;3075:86096 — круг 32 */
		--prize_badge-size: 5.2rem; /* 122:1144 */
		--prize_badge-text: var(--t-numeral-size); /* 40 */
		flex: 1; /* три равные колонки: (1688 − 2 × 52) / 3 = 528 */
	}

	.what {
		--what_pad-x: 19.2rem; /* padding 24:203; даёт сетку 1344 */
		--what_pad-b: var(--section-pad-bottom); /* 128 */
		--what_gap: var(--gap-64); /* itemSpacing 24:203 */
		--what_title-w: 66rem; /* 21:205 */
		--what_title-size: var(--t-display-80-size);
		--what_title-lh: var(--t-display-80-lh);
		--what_lead-w: 81.6rem; /* 58:92 */
		--what_lead-size: var(--t-h3-size);
		--what_lead-lh: var(--t-h3-lh);
		--what_grid-cols: repeat(2, 1fr); /* 2 × 624 + 96 = 1344 */
		--what_grid-gap: var(--gap-64); /* itemSpacing 24:206 */
		--what_grid-col-gap: var(--gap-96); /* itemSpacing 24:207 */
		--what_card-title-size: var(--t-display-60-size);
		--what_card-title-lh: var(--t-display-60-lh);
		--what_card-title-align: left;
		--what_img-mx: 0;
		--what_text-w: 48rem; /* колонка абзацев 24:221 */
	}

	.what__card--authors { --what_img-w: 48rem; } /* 24:217 */
	.what__card--magazine { --what_img-w: 48.6rem; } /* 24:209 */
	.what__card--shop { --what_img-w: 50rem; } /* 24:226 */
	.what__card--home { --what_img-w: 37.4rem; } /* 24:232 */

	.rules-teaser {
		/* Поле 20 у 59:93 ни на что не влияет: ряд 1156, подзаголовок 816 и кнопка
		   400 уже уже поля, а заголовок 59:95 шире его (1728). */
		--rules_pad-x: 0;
		--rules_pad-b: var(--section-pad-bottom); /* 128, 59:93 */
		--rules_gap: var(--gap-64); /* itemSpacing 59:93 */
		--rules_col-w: 81.6rem; /* подзаголовок 62:94 */
		--rules_row-w: 115.6rem; /* ряд 59:168 */
		--rules_row-dir: row;
		--rules_row-gap: var(--gap-96); /* гаттер 59:169 → 59:174 */
		--rules_text-size: var(--t-h4-size); /* 27/28, стиль 62:97 */
		--rules_text-lh: var(--t-h4-lh);
		--rules_cta-w: 40rem; /* 62:130 */
		--rules_glow-src: url("/img/rules-teaser/glow.svg");
		--rules_glow-top: 20.77rem; /* 5650.66 − 5443, absoluteRenderBounds 59:94 */
		--rules_glow-h: 83.7rem;
	}

	.dates {
		/* Поле 20 у 62:133 ни на что не влияет: карточка 700, заголовок шире поля. */
		--dates_pad-x: 0;
		--dates_pad-b: var(--section-pad-bottom); /* 128, 62:133 */
		--dates_gap: var(--gap-72); /* itemSpacing 62:133 */
		--dates_item-w: 70rem; /* карточка 62:138 */
		--dates_date-size: var(--t-display-60-size);
		--dates_date-lh: var(--t-display-60-lh);
		--dates_event-w: 70rem;
		--dates_event-size: var(--t-h3-size); /* 34/36, стиль 17:129 (курсив) */
		--dates_event-lh: var(--t-h3-lh);
		--dates_glow-src: url("/img/dates/glow.svg");
		--dates_glow-h: 87.6rem; /* холст экспорта 62:134 */
	}

	.apply {
		/* Поле 20 у 69:243 ни на что не влияет: заголовок 69:246 шире поля
		   (1728 против 1688) — та же история, что в «призе» и «сроках».
		   Кадр секции FIXED 1261, содержимое кончается на 9406 — снизу
		   остаётся 195, а не 128 из padding'а. Секции стыкуются вплотную
		   (подвал 93:297 начинается на 9601), поэтому берём фактические 195. */
		--apply_pad-x: 0;
		--apply_pad-b: 19.5rem;
		--apply_col-w: var(--form-w); /* 888, форма 80:261 */
		--apply_title-gap: var(--gap-72); /* itemSpacing 69:243 */
		--apply_tabs-gap: var(--gap-72);
		--apply_form-gap: 7.5rem; /* 80:262 кончается на 9198, 80:378 — с 9273 */
		--apply_tab-size: var(--t-caption-l-size); /* I205:3988;3063:5880 — 21/24 */
		--apply_tab-lh: var(--t-caption-l-lh);
		--apply_tab-ls: var(--t-caption-l-ls);
		--apply_row-cols: repeat(2, 1fr); /* 420 + 48 + 420 = 888 */
		--apply_row-gap: var(--gutter); /* itemSpacing 93:382 — 48 */
		--apply_submit-w: 34rem; /* 80:382 */
		--apply_pane-gap: 2.4rem; /* 205:3877 / 213:1464 */
		--apply_editor-h: 34.2rem; /* 205:3886 = 44 + 260 + 38 */
	}

	.editor {
		--editor_input-pad: 2rem 2.4rem; /* 205:3893 */
		--editor_counter-pad: .8rem 1.6rem 1.2rem; /* 205:3895 = 8 + 18 + 12 */
	}

	.apply__hint--desktop {
		display: block;
	}

	.apply__hint--mobile {
		display: none;
	}

	/* 80:379 — 294 = 20 + 274 (подпись I80:379;3074:42459), Caption/M 17/16. */
	.apply__consent {
		width: 29.4rem;
		font-size: var(--t-caption-m-size);
		line-height: 1.6rem; /* lineHeightPx 16, у токена 20 */
	}

	.notice {
		padding: 4rem 6.4rem; /* padding 183:1443 */
	}
}