/* ===========================================================================
   MSA MENTAL CINEMATIC · homepage
   Блоки 00–21. Кожен блок — один із чотирьох режимів:
   cinematic overlay · editorial plate · product demo · quiet screen.
   =========================================================================== */

/* ===========================================================================
   1 · КІНЕМАТОГРАФІЧНИЙ ШАР
   =========================================================================== */

.story-stage {
	position: fixed;
	inset: 0;
	z-index: var(--z-canvas);
	pointer-events: none;
	overflow: hidden;
	background: var(--navy);
}

.story-stage__poster,
.story-stage__canvas {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* <picture> сам не має object-fit — його має внутрішній <img>. */
.story-stage__poster > img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.story-stage__poster {
	transition: opacity var(--dur-slow) var(--ease-out);
}

/*
 * Динамічні шари chapter posters. Два шари підмінюють один одного
 * кросфейдом, тому між главами немає ані спалаху, ані порожнього кадру.
 */
.story-stage__poster--dyn {
	opacity: 0;
	transition: opacity 900ms var(--ease-out);
}

.story-stage__poster--dyn.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.story-stage__poster--dyn { transition-duration: 260ms; }
}

/* Коли canvas готовий рендерити кадри — постери згасають під ним */
.story--canvas-ready .story-stage__poster { opacity: 0; }

.story-stage__canvas { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.story--canvas-ready .story-stage__canvas { opacity: 1; }

/* Приглушення кадру під щільним контентом.
   Керується JS через --stage-veil (0 → 1). */
.story-stage__veil {
	position: absolute;
	inset: 0;
	background: var(--navy);
	opacity: calc(var(--stage-veil, 0) * .86);
	transition: opacity 260ms linear;
}

/* Локальний градієнт під текстом hero, а не сіра плівка на весь кадр */
.story-stage__grade {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 78% at 18% 88%, rgba(13, 19, 26, .88) 0%, rgba(13, 19, 26, 0) 62%),
		linear-gradient(180deg, rgba(13, 19, 26, .55) 0%, rgba(13, 19, 26, 0) 26%, rgba(13, 19, 26, 0) 58%, rgba(13, 19, 26, .72) 100%);
}

/* Ненав'язлива плівка зерна — фактура, а не noise заради noise */
.story-stage__grain {
	position: absolute;
	inset: -50%;
	opacity: .05;
	background-image: var(--grain-src);
	background-size: 180px 180px;
	mix-blend-mode: overlay;
}

/* Контент завжди над сценою */
.site-main,
.site-header,
.site-footer { position: relative; z-index: var(--z-content); }

/* ===========================================================================
   2 · 00 · ВЕРХНЯ ПАНЕЛЬ
   Компактна центрована навігація в дусі референса, але власна.
   =========================================================================== */

.site-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--z-header);
	display: flex;
	justify-content: center;
	padding-inline: var(--gutter);
	pointer-events: none;
}

.nav-shell {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: clamp(.75rem, 2vw, 2.1rem);
	max-width: calc(var(--container) - 2rem);
	width: 100%;
	padding: .55rem .6rem .55rem 1.05rem;
	border: 1px solid var(--rule-dark);
	border-block-start: 0;
	border-start-start-radius: 0;
	border-start-end-radius: 0;
	border-end-start-radius: var(--r-lg);
	border-end-end-radius: var(--r-lg);
	background: rgba(13, 19, 26, .72);
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	transition: background var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
}

.story--scrolled .nav-shell { background: rgba(13, 19, 26, .93); }

.brand {
	display: inline-flex;
	align-items: center;
	gap: .38rem;
	/*
	 * Широкий логотип сам вищий за 44px, тож окремий padding-block для
	 * touch target більше не потрібен — інакше він просто додавав би
	 * 9.6px до плашки. Натомість фіксуємо СТАРУ висоту коробки бренду як
	 * мінімум: там, де логотип дрібніший (планшет, вузький десктоп),
	 * nav-shell лишається рівно тієї ж висоти, що й був, і не «сідає».
	 * Крива — це попередня висота логотипа плюс ті самі 9.6px.
	 */
	min-block-size: clamp(45.6px, 43.2px + .486vw, 49.6px);
	font-size: clamp(.82rem, .74rem + .3vw, 1rem);
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
	color: var(--chalk);
	white-space: nowrap;
	flex: none;
}

.brand__msa { color: var(--chalk); }
.brand__mental { color: var(--gold); font-weight: 500; letter-spacing: .1em; }

/* Логотип хедера. Фіксована висота + width/height в розмітці = нуль CLS. */
/* <picture> лише обгортка — розміри тримає сам <img>. */
.brand > picture {
	display: block;
	flex: none;
	min-inline-size: 0;
}

.brand__logo {
	display: block;
	/*
	 * Логотип широкий (1665x296, 5.625:1), тож веде ширина, а не висота.
	 * 21.9vw дає 280px на 1280 і 315px на 1440; стеля 320px тримає приріст
	 * висоти плашки в межах ~7px, підлога 230px — планшетний мінімум.
	 */
	inline-size: clamp(230px, 21.9vw, 320px);
	block-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
	flex-shrink: 0;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: clamp(.7rem, 1.6vw, 1.7rem);
	margin-inline-start: auto;
}

/*
 * Пункти приходять із wp_nav_menu(), тож між .nav-menu і посиланнями тепер
 * стоять ul/li. Щоб геометрія не зрушила ні на піксель: список переймає
 * рівно той самий flex і той самий gap (через inherit — значення лишається
 * в одному місці), а li стає flex-контейнером, тому <a> знову блоковий, як
 * було, коли він був прямим flex-елементом .nav-menu.
 * Скоуп — тільки ці класи, жодного правила для всіх ul/li/a сайту.
 */
.nav-menu__list {
	display: flex;
	align-items: center;
	gap: inherit;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-menu__list > li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-menu a {
	font-size: var(--fs-micro);
	color: var(--on-dark-2);
	text-decoration: none;
	white-space: nowrap;
	padding: .45rem .1rem;
	transition: color var(--dur-fast) var(--ease-out);
}
.nav-menu a:hover { color: var(--chalk); }

.nav-cta { flex: none; }
.nav-cta .btn { padding: .6rem 1.05rem; min-height: 40px; }

/* Мобільне меню — деталі (details/summary), без JS-залежності */
.nav-toggle { display: none; }

/* У дереві доступності лишається рівно одна підказка зі стану кнопки. */
.nav-toggle:not([open]) .nav-toggle__label--close,
.nav-toggle[open] .nav-toggle__label--open { display: none; }

/* Дубль CTA живе в панелі й вмикається тільки на мобільному (див. 480px). */
.nav-toggle__cta { display: none; }

@media (max-width: 940px) {
	.nav-shell { padding-right: .55rem; gap: .6rem; }
	.nav-menu { display: none; }

	/*
	 * Поруч із кнопкою «Меню» і CTA місця менше — логотип плавно вужчає.
	 * 34vw тримає його великим на планшеті (260px від 765px і вище), а
	 * підлога 185px лишає ~25px просвіту до бургера на найвужчій ширині
	 * цього діапазону (481px), де фіксована 200px не мала б жодного запасу.
	 */
	.brand__logo { inline-size: clamp(185px, 34vw, 260px); }

	.nav-toggle {
		display: block;
		margin-inline-start: auto;
		position: relative;
	}
	.nav-toggle > summary {
		list-style: none;
		display: inline-flex;
		align-items: center;
		gap: .45rem;
		min-height: 44px;
		padding: .5rem .85rem;
		border: 1px solid var(--rule-dark);
		border-radius: var(--r-pill);
		font-size: var(--fs-micro);
		color: var(--on-dark-2);
		cursor: pointer;
	}
	.nav-toggle > summary::-webkit-details-marker { display: none; }

	.nav-toggle__panel {
		position: absolute;
		inset-block-start: calc(100% + .5rem);
		inset-inline-end: 0;
		min-inline-size: 15rem;
		padding: .6rem;
		border: 1px solid var(--rule-dark);
		border-radius: var(--r-md);
		background: rgba(13, 19, 26, .97);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		box-shadow: var(--shadow-dark);
		display: grid;
		gap: .15rem;
	}
	.nav-toggle__list {
		display: grid;
		gap: inherit;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.nav-toggle__list > li { margin: 0; padding: 0; list-style: none; }

	.nav-toggle__list a {
		display: block;
		padding: .7rem .8rem;
		border-radius: var(--r-sm);
		font-size: var(--fs-small);
		color: var(--on-dark-2);
		text-decoration: none;
		min-height: 44px;
	}
	.nav-toggle__list a:hover { background: rgba(236, 231, 217, .08); color: var(--chalk); }
}

/* ---------------------------------------------------------------------------
   00 · Мобільна плашка: широкий логотип + іконкова кнопка меню.

   Рядок складається рівно з двох елементів. Логотип тягнеться, кнопка —
   фіксовані 44x44. CTA не зникає: та сама кнопка виводиться всередині
   випадної панелі (одночасно видима завжди тільки одна з двох).
   Бокові поля плашки стиснуті, але не прибрані.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.nav-shell { padding: .55rem .45rem .55rem .55rem; gap: .375rem; }

	/* Логотип — гнучка колонка, кнопка — фіксована; накладання неможливе. */
	.brand {
		flex: 1 1 auto;
		min-inline-size: 0;
		min-block-size: 44px;
		font-size: .78rem;
		letter-spacing: .02em;
	}

	.brand > picture,
	.brand__logo { max-inline-size: 100%; }

	.brand__logo {
		inline-size: clamp(230px, 72vw, 285px);
		block-size: auto;
	}

	/* Квадратна кнопка-іконка: мінімум 44x44 незалежно від напису. */
	.nav-toggle { flex: none; margin-inline-start: 0; }

	.nav-toggle > summary {
		display: grid;
		place-items: center;
		inline-size: 44px;
		block-size: 44px;
		min-height: 44px;
		padding: 0;
	}

	/*
	 * Напис прибирається саме візуально, а не display:none — розмітка
	 * лишається тією самою на всіх ширинах. Правила ті ж, що в
	 * .visually-hidden із base.css.
	 */
	.nav-toggle__text {
		position: absolute !important;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* CTA переїжджає в панель: у рядку лишаються тільки логотип і кнопка. */
	.nav-cta { display: none; }

	.nav-toggle__cta {
		display: block;
		margin-block-start: .5rem;
		padding-block-start: .6rem;
		border-block-start: 1px solid var(--rule-dark);
	}

	.nav-toggle__cta .btn {
		inline-size: 100%;
		justify-content: center;
		text-align: center;
		padding: .7rem 1rem;
		min-height: 46px;
		font-size: var(--fs-small);
	}
}

/* ---------------------------------------------------------------------------
   00 · Планшет 768—939px: свідомо компактне меню, а не стиснутий десктоп.

   Пункти не влазять у рядок разом із логотипом і CTA, тому лишається кнопка
   «Меню» — але плашка, панель і CTA отримують планшетні пропорції, щоб це
   читалося як окремий стан, а не як мобільний хедер на широкому екрані.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 939.98px) {
	.nav-shell { padding: .7rem .75rem .7rem 1.25rem; gap: 1rem; }

	/* Стара висота коробки бренду (42px логотип + 9.6px) — плашка не сідає. */
	.brand { min-block-size: 51.6px; }

	.nav-toggle > summary {
		min-height: 46px;
		padding: .55rem 1.1rem;
		font-size: var(--fs-small);
		letter-spacing: .01em;
	}

	.nav-toggle__panel { min-inline-size: 19rem; padding: .7rem; }
	.nav-toggle__panel a { padding: .8rem .95rem; }

	.nav-cta .btn { padding: .7rem 1.25rem; min-height: 46px; }
}

/* ---------------------------------------------------------------------------
   00 · Мобільна панель меню не має виходити за екран.

   Панель прив'язана правим краєм до кнопки «Меню» й має власну мінімальну
   ширину, тож на 320—400px її лівий край опинявся за межами viewport.
   Ставимо стелю по ширині екрана, а мінімум робимо умовним.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.nav-toggle__panel {
		--nav-panel-max: calc(100vw - 2 * var(--gutter) - .6rem);
		min-inline-size: min(15rem, var(--nav-panel-max));
		max-inline-size: var(--nav-panel-max);
	}

	/* Стрілка в CTA зайва на вузькій кнопці — лишається лише напис по центру. */
	:is(.nav-cta, .nav-toggle__cta) .btn { justify-content: center; text-align: center; }
	:is(.nav-cta, .nav-toggle__cta) .btn__arrow { display: none; }
}

/* ===========================================================================
   3 · STORY RAIL · 0.8
   =========================================================================== */

.story-rail {
	position: fixed;
	inset-inline-end: clamp(.9rem, 2vw, 2rem);
	inset-block-start: 50%;
	translate: 0 -50%;
	z-index: var(--z-rail);
	display: grid;
	gap: .1rem;
	pointer-events: auto;
	opacity: 0;
	transition: opacity var(--dur-mid) var(--ease-out);
}

.story--scrolled .story-rail { opacity: 1; }

.story-rail__item {
	display: grid;
	grid-template-columns: 2.6rem auto;
	align-items: center;
	gap: .65rem;
	padding: .38rem 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: start;
	color: var(--on-dark-3);
	transition: color var(--dur-fast) var(--ease-out);
}

.story-rail__item:hover { color: var(--on-dark-2); }

.story-rail__bar {
	block-size: 2px;
	inline-size: 100%;
	background: currentColor;
	opacity: .45;
	transform-origin: right center;
	transition: opacity var(--dur-mid) var(--ease-out), scale var(--dur-mid) var(--ease-out);
}

.story-rail__label {
	font-size: .6rem;
	font-weight: 640;
	letter-spacing: .17em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: .0;
	translate: -4px 0;
	transition: opacity var(--dur-mid) var(--ease-out), translate var(--dur-mid) var(--ease-out);
}

.story-rail:hover .story-rail__label,
.story-rail__item:focus-visible .story-rail__label { opacity: .8; translate: 0 0; }

.story-rail__item[aria-current="true"] { color: var(--gold); }
.story-rail__item[aria-current="true"] .story-rail__bar { opacity: 1; scale: 1.35 1; }
.story-rail__item[aria-current="true"] .story-rail__label { opacity: 1; translate: 0 0; }

.story-rail__num {
	font-variant-numeric: tabular-nums;
	font-size: .6rem;
	letter-spacing: .1em;
}

/*
 * Mobile: компактний індикатор 01/05.
 *
 * Суто декоративний (<p aria-hidden>), тож не перехоплює вказівник: він
 * стоїть рівно над другою CTA в hero і, будучи прозорим на початку сторінки,
 * з'їдав тап по її центру.
 */
.story-chapter {
	position: fixed;
	inset-block-end: .85rem;
	inset-inline-start: 50%;
	translate: -50% 0;
	z-index: var(--z-rail);
	display: none;
	pointer-events: none;
	align-items: baseline;
	gap: .5rem;
	padding: .42rem .85rem;
	border: 1px solid var(--rule-dark);
	border-radius: var(--r-pill);
	background: rgba(13, 19, 26, .86);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	font-size: .64rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--on-dark-2);
	opacity: 0;
	transition: opacity var(--dur-mid) var(--ease-out);
}

.story-chapter__num { color: var(--gold); font-variant-numeric: tabular-nums; font-weight: 660; }

.story--scrolled .story-chapter { opacity: 1; }

@media (max-width: 1080px) {
	.story-rail { display: none; }
	.story-chapter { display: flex; }
}

/* Схований, коли скрол дійшов до футера */
.story--outro .story-rail,
.story--outro .story-chapter { opacity: 0; pointer-events: none; }

/* ===========================================================================
   4 · 01 · HERO
   =========================================================================== */

.hero {
	position: relative;
	min-block-size: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-block: 6rem clamp(1rem, 2vw, 2rem);
	padding-inline: var(--gutter);
	overflow: hidden;
}

/* Округлений кінематографічний viewport — рамка навколо сцени */
.hero::after {
	content: "";
	position: absolute;
	inset: clamp(.5rem, 1vw, 1rem);
	border: 1px solid var(--rule-dark);
	border-radius: var(--r-xl);
	pointer-events: none;
}

.hero__inner {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.4rem, 3vw, 2.6rem);
	position: relative;
}

.hero__top { max-width: 42ch; }

.hero__title {
	font-size: var(--fs-h1);
	/* Ширина в em, а не в ch: заголовок має ламатися рівно там, де стоїть <br>. */
	max-width: 14.5em;
	line-height: 1.04;
	letter-spacing: var(--tr-head);
	font-weight: 620;
	color: var(--chalk);
	text-shadow: 0 2px 30px rgba(13, 19, 26, .55);
}

.hero__sub {
	margin-top: var(--sp-4);
	font-size: var(--fs-h4);
	font-weight: 500;
	color: var(--gold-soft);
	letter-spacing: -.01em;
	text-shadow: 0 1px 22px rgba(9, 13, 18, .85);
}

.hero__body {
	margin-top: var(--sp-5);
	max-width: 46ch;
	color: var(--on-dark-2);
	font-size: var(--fs-small);
	line-height: 1.6;
}

.hero__body p + p { margin-top: .8em; }
.hero__body strong { color: var(--chalk); font-weight: 620; }

.hero__cta { margin-top: var(--sp-5); }

/* Брендове слово — великий декоративний шар, обрізаний краєм.
   Не замінює H1 і схований від скрін-рідера. */
.hero__wordmark {
	font-size: var(--fs-display);
	line-height: .78;
	letter-spacing: -.055em;
	font-weight: 640;
	color: var(--chalk);
	opacity: .13;
	margin-block-start: clamp(1rem, 3vw, 2.5rem);
	margin-inline-start: -.06em;
	user-select: none;
	pointer-events: none;
	white-space: nowrap;
}

.hero__scroll {
	position: absolute;
	/* Абсолютне позиціювання рахується від padding box, тому відступ ставимо явно. */
	inset-block-end: var(--gutter);
	inset-inline-end: var(--gutter);
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: .62rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--on-dark-3);
}

@media (min-width: 768px) {
	.hero__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
		grid-template-areas:
			"top    top"
			"word   cta";
		align-items: end;
	}
	.hero__top  { grid-area: top; max-width: none; }
	.hero__word { grid-area: word; }
	/* Нижній відступ тримає CTA вище підказки про скрол у правому куті. */
	.hero__side { grid-area: cta; padding-block-end: clamp(2.6rem, 4vw, 4.4rem); }
	.hero__body { margin-top: 0; }
	.hero__wordmark { margin-block-start: 0; }

	/*
	 * Заголовок піднімається вище: сітка притиснута до низу екрана, тому
	 * збільшений міжрядковий проміжок відсуває рядок «top» угору, не чіпаючи
	 * ні wordmark, ні CTA. На мобільному лишається базовий gap.
	 */
	.hero__inner { row-gap: clamp(4rem, 9vw, 8rem); }
}

@media (min-width: 1200px) {
	:root {
		--desktop-wordmark-outset: clamp(.192rem, .072rem + .564vw, .57rem);
		--desktop-nav-left-inset: calc(max(var(--gutter), calc(50% - 640px)) - var(--desktop-wordmark-outset));
		--desktop-nav-right-inset: max(calc(var(--gutter) + .52rem), calc(50% - 40.9rem));
	}

	.site-header {
		padding-inline-start: var(--desktop-nav-left-inset);
		padding-inline-end: var(--desktop-nav-right-inset);
	}

	.nav-shell { max-width: none; }

	/*
	 * Спільний контейнер під ширину .nav-shell.
	 *
	 * Плашка меню з 1200px тягнеться між --desktop-nav-left-inset і
	 * --desktop-nav-right-inset і вона НЕсиметрична, тож синхронізувати
	 * секції треба саме цими змінними, а не --container. Клас вішається на
	 * звичайний .container і нижче 1200px нічого не робить.
	 */
	.container--shell {
		width: auto;
		max-width: none;
		margin-inline-start: var(--desktop-nav-left-inset);
		margin-inline-end: var(--desktop-nav-right-inset);
		padding-inline: 0;
	}

	/*
	 * Модифікатор для секцій, де сам .container — видима плашка: її бокс
	 * рівний .nav-shell, а власні поля лишаються всередині.
	 */
	.container--shell.container--plate { padding-inline: var(--gutter); }

	.hero__top {
		position: relative;
		top: clamp(-90px, calc(130px - 17.5vw), -80px);
	}

	.hero__side {
		position: relative;
		left: clamp(10px, calc(38.75vw - 486px), 72px);
	}

	/* -------------------------------------------------------------------
	   01 · Підказка про скрол — замкнена рамка.

	   Була окрема вертикальна риска праворуч: вона тягнула увагу на
	   себе сильніше, ніж сам напис. Замість неї — тонкий контур по всьому
	   периметру, який повільно дихає однаково з усіх боків.

	   Прив’язка до кута (inset-block-end / inset-inline-end = --gutter) не змінена,
	   тож відстань рамки до правого й нижнього краю та сама.
	   ------------------------------------------------------------------- */
	.hero__scroll {
		/*
		 * Хвостовий letter-spacing (.2em) відштовхує останню літеру від
		 * правого краю; без компенсації пілюля виглядає несиметрично.
		 */
		padding: .52rem 1.05rem;
		padding-inline-end: calc(1.05rem - .2em);
		border-radius: var(--r-pill);
	}

	/*
	 * Рамка живе на псевдоелементі, а не на самому боксі: так її
	 * прозорість анімується окремо від тексту, а сам контур не ловить курсор.
	 */
	.hero__scroll::after {
		content: "";
		position: absolute;
		inset: 0;
		border: 1px solid var(--gold);
		border-radius: inherit;
		opacity: .4;
		pointer-events: none;
		animation: msa-hint-breathe 3.6s var(--ease-io) infinite;
		transition: opacity var(--dur-mid) var(--ease-out), box-shadow var(--dur-mid) var(--ease-out);
	}

	/*
	 * На hover анімація знімається цілком — інакше вона перебиває
	 * статичне значення opacity. Перехід вище згладжує перехоплення.
	 * Розмір і положення не змінюються.
	 */
	.hero__scroll:hover::after {
		animation: none;
		opacity: .9;
		box-shadow: 0 0 10px rgba(197, 160, 106, .22);
	}

	.trust-strip { display: none; }
}

/*
 * Однакова яскравість по всьому периметру: береться opacity всього
 * контуру плюс box-shadow без зміщення й без spread — жодного рухомого
 * сегмента, жодного обертання, жодної зміни геометрії.
 */
@keyframes msa-hint-breathe {
	0%, 100% { opacity: .4; box-shadow: 0 0 8px rgba(197, 160, 106, 0); }
	50%      { opacity: .8; box-shadow: 0 0 8px rgba(197, 160, 106, .18); }
}

/* Без руху рамка лишається повною, просто з середньою прозорістю. */
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
	.hero__scroll::after {
		animation: none;
		transition: none;
		opacity: .6;
		box-shadow: none;
	}
}

/* ---------------------------------------------------------------------------
   01 · Низькі desktop-екрани: заголовок не заходить під меню.

   Підйом .hero__top у блоці вище рахується ТІЛЬКИ від ширини вікна
   (clamp(-90px, 130px - 17.5vw, -80px)) і не знає нічого про його висоту.
   На висоті ~700—800px сітка hero і так притиснута до низу коротким екраном,
   тож той самий підйом заганяє перший рядок H1 під плашку меню. Заміряно:

     viewport    було (titleTop − navBottom)
     1200x700    -51.6      1280x768    +11.9
     1200x768    -18.7      1366x768     -6.9
     1280x720    -36.1      1440x800    +15.6

   Тут підйом стає функцією висоти: 60% від того, наскільки вікно нижче за
   ~700px «нульової» точки, зі стелею -80px. Так на кожній висоті лишається
   рівно стільки підйому, скільки екран може віддати, і проміжок під меню
   ніде не падає нижче 16px. Від 821px діє попереднє правило без змін —
   там воно вже дає 33px і більше.
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) and (max-height: 820px) {
	.hero__top { top: clamp(-80px, calc(421px - 60vh), 0px); }
}

/* ---------------------------------------------------------------------------
   01 · Високі desktop-екрани (≥821px): заголовок тримається над кортом.

   Базовий підйом вище (clamp(-90px, 130px - 17.5vw, -80px)) рахує тільки
   ширину вікна. Але сітка hero притиснута до низу viewport, а постер лежить
   object-fit:cover по центру — тому з ростом висоти вікна текст їде вниз
   швидше, ніж далекий край корту, і другий рядок H1 разом з підзаголовком
   лягають на глину. Заміряно на чинній верстці (низ .hero__sub мінус верхній
   край корту; − значить «на корті»):

     1440x900   −48.5      1891x910   −57.9
     1920x1080  −144.9     2560x1440  −369.7

   Тут підйом стає функцією самого кадру. Постер 1600x900, cover, центр:
   верхній край плато лежить на y=338 у координатах картинки, тобто
   min(50vh − 7vw, 37.556vh) у координатах viewport — перша гілка працює на
   ширших за 16:9 вікнах, друга на решті. Від цієї лінії відкладаємо вниз
   висоту текстової групи (202.7px) і 14px повітря — і зміщуємо групу з її
   статичної (притиснутої до низу) позиції рівно на цю різницю.

   --hero-rows — сума трьох clamp-ів, які й задають статичну позицію групи:
   нижній padding hero, padding-block-end .hero__side і row-gap сітки.
   Нижня межа (--hero-lift-floor) не дає заголовку підійти до плашки меню
   ближче ніж на 16px; -80px згори зберігає щонайменше базовий підйом.

   Екрани ≤820px сюди не потрапляють: там висоти на такий підйом немає,
   і правило вище лишається чинним без змін. Нижня межа ширини — 1280px, а не 1200px:
   на 1200—1279px права колонка hero ламається на зайві рядки, нижній ряд
   сітки виростає на ~50px і статична позиція групи вже не описується
   цими трьома clamp-ами — нижня межа там бреше й заголовок йшов під меню.
   --------------------------------------------------------------------------- */
@media (min-width: 1280px) and (min-height: 821px) {
	.hero__top {
		--hero-rows: calc(min(2vw, 32px) + min(4vw, 70.4px) + min(9vw, 128px));
		--hero-court-top: min(calc(50svh - 7vw), 37.556svh);
		--hero-lift-ideal: calc(var(--hero-court-top) - 100svh + 195.5px + var(--hero-rows));
		--hero-lift-floor: calc(503.8px - 100svh + var(--hero-rows));
		top: min(-80px, max(var(--hero-lift-floor), var(--hero-lift-ideal)));
	}
}

/* ---------------------------------------------------------------------------
   01 · Compact-режим hero: 768—1199.98px, ландшафт.

   Композиція та сама, що на повному десктопі — заголовок угорі, слово
   ліворуч, текст і CTA праворуч. Змінюється лише межа колонок, і змінюється
   БЕЗПЕРЕРВНО, без стрибка на 1025px.

   Чому не десктопна пропорція 1.15fr / .85fr: у ландшафті кадр обрізається
   по висоті, спортсмен стоїть на ~53—54% ширини й займає ~49.5—58% —
   і на 1024x768 десктопна межа (58.2%) лягає рівно на його правий край.

   Крива: перша колонка = 522.8px + 8.52vw, обмежена 52%—66% контейнера.
   Це лінійна функція ширини вікна, підібрана на дві точки:
     • 1024px → 610px  (межа на 66% — текст із запасом сходить зі спортсмена);
     • 1200px → 625px  (рівно те, що дає десктопний 1.15fr / .85fr).
   На 1199.98px і 1200px ліва межа тексту збігається з точністю до 0.2px,
   тож перехід на повну desktop-композицію візуально безшовний.

   Решту (row-gap, padding, кегль слова, ширину тексту, відступ .hero__side)
   свідомо НЕ перевизначаємо: вони вже спільні з десктопом від 768px, і будь-яке
   локальне значення знову створило б стрибок на межі 1200px.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: landscape) {
	.hero__inner {
		grid-template-columns:
			minmax(0, clamp(52%, 522.8px + 8.52vw, 66%))
			minmax(0, 1fr);
	}

	/* Підказка про скрол — частина повної desktop-композиції. */
	.hero__scroll { display: none; }
}

/* ---------------------------------------------------------------------------
   01 · Compact-режим hero: 768—1199.98px, портрет.

   У портреті кадр обрізається по ширині, і спортсмен опиняється рівно в
   центрі — приблизно на 57% ширини й між 47% і 68% висоти. Жодна вертикальна
   межа колонок його не обходить, тому композиція розкладається по вертикалі:
   заголовок над ним, слово-підкладка на його рівні, текст і CTA — у чистій
   нижній третині кадру. Фон і його позиція не змінюються.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) and (orientation: portrait) {
	.hero {
		justify-content: flex-start;
		padding-block: 8rem clamp(1.4rem, 3vw, 2.6rem);
	}

	.hero__inner {
		flex: 1 1 auto;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"top"
			"word"
			"cta";
		grid-template-rows: auto minmax(0, 1fr) auto;
		row-gap: clamp(1.4rem, 3.5vw, 2.6rem);
		align-items: stretch;
	}

	.hero__top { grid-area: top; }

	.hero__wordmark {
		grid-area: word;
		align-self: end;
		font-size: clamp(4rem, 15vw, 9rem);
	}

	.hero__side {
		grid-area: cta;
		display: block;
		padding-block-end: 0;
	}

	.hero__body   { max-width: 52ch; }
	.hero__cta    { margin-top: var(--sp-5); }
	.hero__scroll { display: none; }
}

/* ---------------------------------------------------------------------------
   01 · Мобільний hero (≤767px).

   Кадр фіксований, і голова спортсмена на ньому завжди припадає приблизно на
   50% висоти viewport. Тому текст притиснутий до верху, а CTA лишаються внизу
   екрана: між ними стоїть один розтяжний рядок сітки. .hero__side розкрито
   через display:contents, щоб текст і кнопки стали окремими рядками.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
	/*
	 * Верхній відступ = висота плашки меню (62.6px) плюс повітря під нею.
	 * 6.4rem дають 102.4px, тобто ~39.8px просвіту між низом .nav-shell і
	 * верхом заголовка. Зсувається весь верхній текст одразу: рядки "top"
	 * і "body" сітки. CTA й слово MENTAL прив'язані до низу hero через
	 * розтяжний рядок "word", тому вони лишаються на місці.
	 */
	.hero {
		justify-content: flex-start;
		padding-block: 6.4rem calc(.9rem + env(safe-area-inset-bottom, 0px));
	}

	.hero__scroll   { display: none; }

	.hero__inner {
		flex: 1 1 auto;
		gap: 1rem;
		grid-template-areas:
			"top"
			"body"
			"word"
			"cta";
		grid-template-rows: auto auto minmax(0, 1fr) auto;
	}

	.hero__side     { display: contents; }
	.hero__top      { grid-area: top;  max-width: none; }

	/*
	 * Заголовок — рівно два рядки.
	 *
	 * Перенос керований і живе в розмітці (<br> між фразами), тому ділити
	 * заголовок на span не треба: nowrap лише забороняє браузеру доламувати
	 * довшу фразу ще раз. Кегль підібраний за фактичною шириною рядка
	 * «На тренуванні виходить.» — 10.7px на кожен 1px кегля при цьому
	 * letter-spacing. На 320px між гатерами лишається 292px, тобто стеля
	 * 27px; 22px тримають запас навіть на резервному Segoe UI.
	 */
	.hero__title {
		font-size: clamp(22px, 6.7vw, 26px);
		line-height: 1.04;
		letter-spacing: -.04em;
		white-space: nowrap;
	}

	.hero__sub      { margin-top: .6rem; }
	.hero__body     { grid-area: body; margin-top: 0; font-size: var(--fs-micro); }
	.hero__body p + p { margin-top: .6em; }
	.hero__wordmark { grid-area: word; }

	.hero__cta {
		grid-area: cta;
		margin-top: 0;
		align-self: end;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		gap: .6rem;
	}

	.hero__cta .btn {
		inline-size: 100%;
		max-inline-size: 260px;
		min-height: 46px;
		justify-content: center;
		text-align: center;
	}

	/* Вторинна вужча за основну — ієрархія читається без кольору. */
	.hero__cta .btn--ghost  { max-inline-size: 172px; }
	.hero__cta .btn__arrow  { display: none; }
}

/* ---------------------------------------------------------------------------
   01 · Мобільний hero: вуаль під верхнім текстом і слово MENTAL.

   Слово — той самий .hero__wordmark, що й на десктопі, а не другий елемент:
   на мобільному воно просто перестає бути прихованим і переїжджає в рядок
   "word", який уже є в сітці між текстом і кнопками. Тому воно за побудовою
   стоїть НАД CTA і не може на них наїхати: align-self:end притискає його до
   низу свого рядка, а між рядками лишається gap сітки.

   Горизонтально слово живе в лівій половині кадру. На мобільному постері
   спортсмен займає приблизно 50—76% ширини, тож ліва межа рядка "word"
   (padding-inline hero = --gutter) і nowrap-ширина слова лишають його
   ліворуч від фігури, не чіпаючи ні корпус, ні ракетку.

   Вуаль — локальний градієнт самого hero, а не шар сцени: .story-stage
   лишається недоторканим, тож кадр, його crop і позиція не змінюються.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.hero::before {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline: 0;
		block-size: 58%;
		z-index: 0;
		pointer-events: none;
		background: linear-gradient(
			180deg,
			rgba(13, 19, 26, .74) 0%,
			rgba(13, 19, 26, .40) 46%,
			rgba(13, 19, 26, 0) 100%
		);
	}

	/* Контент — над вуаллю; слово — під контентом, але над кадром. */
	.hero__inner { z-index: 1; }
	.hero__top,
	.hero__body,
	.hero__cta { position: relative; z-index: 2; }

	.hero__wordmark {
		display: block;
		grid-area: word;
		align-self: end;
		justify-self: start;
		z-index: 1;
		margin-block-start: 0;
		/* Ліва межа збігається з внутрішнім відступом hero: --gutter мінус
		   оптичний винос лівої вертикалі «M». */
		margin-inline-start: -.05em;
		/*
		 * Кегль прив'язаний до ширини вікна, бо межа праворуч теж від неї:
		 * cover-кадр масштабується по ширині, тому фігура спортсмена завжди
		 * починається приблизно на 52.5% ширини viewport (заміряно по пікселях
		 * мобільного постера). 12.4vw лишає слову ~20px повітря до фігури на
		 * 390 і 430 і не дає йому наїхати на корпус чи ракетку.
		 */
		font-size: clamp(38px, 12.4vw, 54px);
		font-weight: 500;
		line-height: .82;
		letter-spacing: -.06em;
		white-space: nowrap;
		color: rgba(236, 232, 221, .12);
		opacity: 1;
		user-select: none;
		pointer-events: none;
	}

	/* Одна тонка акцентна лінія, що згасає вправо. */
	.hero__wordmark::after {
		content: "";
		display: block;
		block-size: 1px;
		margin-block-start: .34em;
		margin-inline-start: .05em;
		background: linear-gradient(
			90deg,
			rgba(222, 181, 121, .42),
			rgba(222, 181, 121, 0)
		);
	}
}

/*
 * Низькі мобільні екрани. Висота кадру фіксована, а текстовий блок — ні,
 * тому на 660—800px висоти стискаємо саме вертикальний ритм: кегль
 * заголовка, інтерліньяж і проміжки. Основний текст лишається 12px+.
 */
@media (max-width: 767px) and (max-height: 800px) {
	.hero { padding-block-start: 6rem; }
	.hero__inner { gap: .8rem; }
	.hero__title { font-size: clamp(21px, 6.2vw, 24px); line-height: 1.04; }
	.hero__sub   { margin-top: .5rem; font-size: clamp(.95rem, .9rem + .35vw, 1.12rem); }
}

@media (max-width: 767px) and (max-height: 700px) {
	.hero { padding-block-start: 5.5rem; }
	.hero__inner { gap: .6rem; }
	.hero__title { font-size: clamp(20px, 5.8vw, 22px); line-height: 1.02; }
	.hero__body  { line-height: 1.45; }
	.hero__body p + p { margin-top: .45em; }
	.hero__cta { gap: .5rem; }
	.hero__cta .btn { min-height: 44px; padding-block: .55rem; }
}

/*
 * Слово MENTAL на низьких екранах. Кегль падає разом із рештою вертикального
 * ритму, щоб рядок "word" не з'їдав простір у тексту й кнопок. На найнижчих
 * першою прибирається акцентна лінія — вона декоративна.
 */
@media (max-width: 767.98px) and (max-height: 800px) {
	.hero__wordmark { font-size: clamp(41px, 12.5vw, 48px); }
}

@media (max-width: 767.98px) and (max-height: 700px) {
	.hero__wordmark {
		font-size: clamp(38px, 11.5vw, 44px);
		color: rgba(236, 232, 221, .10);
	}

	.hero__wordmark::after { display: none; }
}

/* ===========================================================================
   5 · 02 · TRUST STRIP
   =========================================================================== */

.trust-strip {
	border-block: 1px solid var(--rule-dark);
	background: rgba(13, 19, 26, .82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.trust-strip__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem clamp(1rem, 2.4vw, 2.4rem);
	min-block-size: 60px;
	padding-block: 1rem;
	font-size: var(--fs-micro);
	color: var(--on-dark-2);
}

.trust-strip__list li { display: flex; align-items: center; }
.trust-strip__list li + li::before {
	content: "";
	inline-size: 3px;
	block-size: 3px;
	margin-inline-end: clamp(1rem, 2.4vw, 2.4rem);
	border-radius: 50%;
	background: var(--gold);
	opacity: .7;
	flex: none;
}
.trust-strip__list strong { color: var(--chalk); font-weight: 620; }

/* ===========================================================================
   6 · СЕКЦІЇ: спільна механіка
   =========================================================================== */

.section { padding-block: var(--section-y); position: relative; }

/* Editorial plate — непрозора площина поверх приглушеного canvas */
.plate {
	background: var(--paper);
	color: var(--ink);
}
.plate--alt { background: var(--paper-2); }

.plate .lead,
.plate .rich { color: var(--ink-2); }
.plate h1, .plate h2, .plate h3, .plate h4, .plate strong { color: var(--ink); }

/*
 * Quiet screen — типографічна пауза, крізь яку видно фільм.
 *
 * Сама секція ПРОЗОРА: інакше кадр за нею не видно взагалі, і історія
 * розпадається на «hero → фінальний CTA». Читабельність тексту забезпечує
 * не суцільна плита на весь екран, а компактна scrim-картка під самим
 * текстом — навколо неї кадр лишається відкритим.
 */
.quiet {
	background: transparent;
	color: var(--on-dark);
}

.quiet > .container,
.magnet > .container {
	position: relative;
	padding-block: clamp(1.6rem, 3.5vw, 3rem);
	border-radius: var(--r-lg);
	background: rgba(9, 13, 18, .82);
	border: 1px solid var(--rule-dark);
	backdrop-filter: blur(16px) saturate(.92);
	-webkit-backdrop-filter: blur(16px) saturate(.92);
	box-shadow: var(--shadow-dark);
}

/* Браузери без backdrop-filter отримують щільніший фон — контраст важливіший. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.quiet > .container,
	.magnet > .container { background: rgba(9, 13, 18, .93); }
}

/*
 * Маніфест і петля — повноекранні кінематографічні паузи. Тут картка вбила б
 * задум, тому замість неї м'який scrim по центру: текст читається, а кадр
 * лишається видимим по краях і у верхній та нижній третині.
 */
.manifesto,
.loop { position: relative; isolation: isolate; }

.manifesto::before,
.loop::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(ellipse 88% 74% at 50% 50%,
		rgba(9, 13, 18, .90) 0%,
		rgba(9, 13, 18, .84) 42%,
		rgba(9, 13, 18, .52) 72%,
		rgba(9, 13, 18, .18) 100%);
}

/* Cinematic overlay — текст поверх активного кадру */
.cinematic { background: transparent; }

.section__head { max-width: 62ch; }
.section__head .lead { margin-top: var(--sp-4); }

/* Плавна поява при вході у в'юпорт. Без scroll-scrub. */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
}

.no-js .reveal { opacity: 1; transform: none; }

/* ===========================================================================
   7 · 03 · ВПІЗНАВАННЯ
   =========================================================================== */

.recognition__grid {
	display: grid;
	gap: clamp(1.6rem, 3.5vw, 3.2rem);
	margin-top: var(--sp-7);
}

@media (min-width: 940px) {
	.recognition__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; }
	.recognition__side { position: sticky; top: 6.5rem; }
}

/* ---------------------------------------------------------------------------
   03 · Планшет 768—1199px.

   Бічна панель-відповідь стає повноцінною лише від 1200px, тому до неї сітку
   не ділимо: чек-лист забирає всю ширину плашки й розкладається у дві
   колонки — так само, як на десктопі, тільки без sticky-колонки.
   --------------------------------------------------------------------------- */
@media (min-width: 700px) and (max-width: 1199.98px) {
	.recognition__grid { grid-template-columns: minmax(0, 1fr); }
	.recognition__side { position: static; }

	.recognition .check-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .7rem;
	}

	.recognition .check-list > li { min-width: 0; }
	.recognition .check-item { height: 100%; align-items: center; }
}

.check-list { display: grid; gap: .5rem; }

.check-item {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: .82rem 1rem;
	min-height: 46px;
	border: 1px solid var(--rule-light);
	border-radius: var(--r-md);
	background: #fff;
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
	font-size: var(--fs-small);
	line-height: 1.45;
}

.check-item:hover { border-color: color-mix(in srgb, var(--clay) 40%, transparent); }

.check-item input {
	appearance: none;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	margin: .18rem 0 0;
	flex: none;
	border: 1.5px solid var(--ink-3);
	border-radius: var(--r-xs);
	background: transparent;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.check-item input:checked {
	background: var(--clay) var(--tick-src) center / .78rem no-repeat;
	border-color: var(--clay);
}

.check-item:has(input:checked) {
	border-color: var(--clay);
	background: rgba(176, 90, 60, .06);
}

.recognition__count[hidden] { display: none; }

/* Desktop enhancement; the added meter stays inert below 1200px. */
.recognition__meter { display: none; }

.recognition__response {
	margin-top: var(--sp-4);
	padding: clamp(1.1rem, 2.4vw, 1.8rem);
	border: 1px solid var(--rule-light);
	border-left: 2px solid var(--clay);
	border-radius: var(--r-md);
	background: #fff;
}

.recognition__response[hidden] { display: none; }

.recognition__count {
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: var(--sp-3);
}

.recognition__cta { margin-top: var(--sp-5); }
.recognition__cta[hidden] { display: none; }

@media (min-width: 1200px) {
	.recognition > .container {
		--desktop-wordmark-outset: clamp(.192rem, .072rem + .564vw, .57rem);
		--desktop-nav-left-inset: calc(max(var(--gutter), calc(50% - 640px)) - var(--desktop-wordmark-outset));
		--desktop-nav-right-inset: max(calc(var(--gutter) + .52rem), calc(50% - 40.9rem));
		max-width: none;
		padding-inline-start: var(--desktop-nav-left-inset);
		padding-inline-end: var(--desktop-nav-right-inset);
	}

	.recognition .section__head { max-width: none; }

	.recognition .section__head h2 {
		max-width: none;
		font-size: clamp(42px, 3.65vw, 56px);
		line-height: 1.04;
		letter-spacing: -.035em;
	}

	/*
	 * Висоту рядка задає природна висота чек-листа з п'яти рядів, панель
	 * тягнеться до неї. Тому її низ завжди збігається з низом останнього
	 * чекпоінта — і за 1, і за 9 позначок, без стрибка layout.
	 */
	.recognition__grid {
		grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
		gap: clamp(1.5rem, 2vw, 2rem);
		align-items: stretch;
		margin-top: clamp(3rem, 4.5vw, 4.5rem);
	}

	.recognition__checklist { min-width: 0; }

	.recognition .check-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(5, minmax(0, auto));
		grid-auto-flow: column;
		gap: .75rem;
	}

	.recognition .check-list > li { min-width: 0; }

	.recognition .check-item {
		height: 100%;
		min-height: 72px;
		align-items: center;
		padding: .9rem 1rem;
		border-color: var(--rule-light);
		border-radius: var(--r-md);
		background: color-mix(in srgb, var(--paper) 72%, var(--chalk-warm));
		transition-duration: 180ms;
	}

	.recognition .check-item input { margin-top: 0; transition-duration: 180ms; }

	.recognition .check-item:has(input:checked) {
		border-color: color-mix(in srgb, var(--clay) 74%, transparent);
		background: color-mix(in srgb, var(--clay) 7%, var(--paper));
	}

	/*
	 * БЕЗ block-size. Фіксовані 36vw робили панель на ~98px вищою за чек-лист,
	 * а решту висоти з'їдав auto-spacer під CTA. Тепер висота — це висота
	 * рядка сітки, а вміст притиснутий до верху контрольованими проміжками.
	 */
	.recognition__side {
		position: sticky;
		top: 6.5rem;
		align-self: stretch;
		min-width: 0;
		display: grid;
		grid-template-rows: auto auto auto;
		align-content: start;
		padding-inline: clamp(1.75rem, 2.4vw, 2.25rem);
		padding-block: clamp(2rem, 2.6vw, 2.25rem) clamp(1.75rem, 2.3vw, 2rem);
		border: 1px solid var(--rule-dark);
		border-radius: var(--r-lg);
		background: var(--navy-2);
		color: var(--on-dark);
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		pointer-events: none;
		transition:
			opacity 200ms var(--ease-out),
			transform 200ms var(--ease-out),
			visibility 0s linear 200ms;
	}

	.recognition__side:not(.is-visible) {
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		pointer-events: none;
	}

	.recognition__side.is-visible {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		transition-delay: 0s;
	}

	.recognition .recognition__count {
		min-height: 1.4em;
		margin: 0;
		color: var(--clay-soft);
		font-weight: 660;
		letter-spacing: .16em;
	}

	.recognition .recognition__count[hidden] {
		display: block;
		visibility: hidden;
	}

	.recognition__meter {
		display: grid;
		grid-template-columns: repeat(9, minmax(0, 1fr));
		gap: .4rem;
		margin-top: var(--sp-3);
	}

	.recognition__meter-segment {
		block-size: 4px;
		border-radius: var(--r-pill);
		background: var(--navy-line);
		transition: background 180ms var(--ease-out);
	}

	.recognition__meter-segment.is-active { background: var(--clay); }

	.recognition .recognition__response {
		min-height: 0;
		display: grid;
		align-content: start;
		row-gap: clamp(1.5rem, 1.9vw, 1.85rem);
		margin-top: clamp(1.75rem, 2.2vw, 2rem);
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.recognition .recognition__response[hidden] { display: none; }

	.recognition .recognition__response .rich {
		color: var(--on-dark-2);
		font-size: clamp(.93rem, 1.08vw, 1.03rem);
		line-height: 1.58;
	}

	.recognition .recognition__response .rich p:first-child {
		color: var(--chalk);
		font-size: 1.08em;
		font-weight: 620;
	}

	/* Кнопка йде одразу за текстом — відстань задає row-gap, а не spacer. */
	.recognition .recognition__cta {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.recognition .recognition__cta[hidden] { display: none; }

	.recognition .recognition__cta .btn {
		width: 100%;
		min-block-size: 48px;
		justify-content: space-between;
		white-space: normal;
	}
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
	.recognition .check-item,
	.recognition .check-item input,
	.recognition__meter-segment,
	.recognition__side {
		transition: none;
	}

	.recognition__side { transform: none; }
}

/* ===========================================================================
   8 · 04 · REFRAME — split comparison
   =========================================================================== */

.reframe__split {
	display: grid;
	gap: 1px;
	margin-top: var(--sp-7);
	border: 1px solid var(--rule-dark);
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--rule-dark);
}

/* 768px — перша планшетна ширина: обидві колонки читаються поруч. */
@media (min-width: 768px) {
	.reframe__split { grid-template-columns: 1fr 1fr; }
}

.reframe__col {
	padding: clamp(1.4rem, 3vw, 2.5rem);
	background: rgba(13, 19, 26, .94);
}

.reframe__col--match { background: rgba(28, 39, 50, .94); }

.reframe__col h3 {
	font-size: var(--fs-micro);
	font-weight: 660;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: var(--sp-4);
}

/* Виміряно на кадрі: чистий --clay-soft давав 4.44:1 — трохи світлішаємо. */
.reframe__col--match h3 { color: color-mix(in srgb, var(--clay-soft) 68%, var(--chalk)); }

.reframe__col ul { display: grid; gap: .55rem; }
.reframe__col li {
	display: flex;
	gap: .7rem;
	align-items: baseline;
	font-size: var(--fs-small);
	color: var(--on-dark-2);
}
.reframe__col li::before {
	content: "";
	inline-size: 4px; block-size: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
	flex: none;
	translate: 0 -.25em;
}

.reframe__conclusion { margin-top: var(--sp-6); }

@media (min-width: 1200px) {
	.section.quiet.reframe > .container {
		width: auto;
		max-width: none;
		margin-inline-start: var(--desktop-nav-left-inset);
		margin-inline-end: var(--desktop-nav-right-inset);
	}

	/*
	 * Заголовок в один рядок. Ламав його не <br> і не span, а спільний
	 * .section__head { max-width: 62ch } — 732px проти 930px, потрібних
	 * тексту. Знімаємо обмеження лише тут: у плашці є 1213px (1440),
	 * 1117px (1280) і 1044px (1200), тож запас лишається щонайменше 200px
	 * і nowrap не спричиняє overflow. Лівий край і розмір шрифту ті самі.
	 */
	.reframe .section__head { max-width: none; }

	.reframe .section__head h2 { white-space: nowrap; }
}

/* ===========================================================================
   9 · 05 · МАНІФЕСТ — quiet screen
   =========================================================================== */

.manifesto {
	min-block-size: 92svh;
	display: grid;
	place-items: center;
	text-align: center;
	background: transparent;          /* кадр видно навколо scrim-картки */
}

.manifesto__title {
	font-size: clamp(1.85rem, 1.2rem + 3.1vw, 4.1rem);
	line-height: 1.06;
	letter-spacing: -.028em;
	font-weight: 620;
	color: var(--chalk);
	max-width: 20ch;
	margin-inline: auto;
}

.manifesto__sub {
	margin-top: var(--sp-5);
	font-size: clamp(1.05rem, .9rem + .9vw, 1.75rem);
	font-weight: 400;
	color: var(--gold-soft);
	max-width: 26ch;
	margin-inline: auto;
	line-height: 1.32;
}

.manifesto__lines {
	margin-top: clamp(2.6rem, 6vw, 5rem);
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.9rem);
	max-width: 40ch;
	margin-inline: auto;
}

.manifesto__lines li {
	font-size: var(--fs-lead);
	line-height: 1.4;
	color: var(--on-dark-2);
	padding-block: .3rem;
}

.manifesto__lines li + li { border-top: 1px solid var(--rule-dark); padding-top: clamp(1rem, 2.4vw, 1.9rem); }

/* Крива та примусові переноси — суто десктопні. */
.manifesto__path,
.manifesto__desktop-break { display: none; }

/* ---------------------------------------------------------------------------
   05 · Маніфест до 1200px.

   Десктопна композиція — маркер глави ліворуч, три пронумеровані тези вздовж
   кривої. Крива на вузькому екрані не працює, але маркер і нумерація — так:
   вони й тримають ту саму ієрархію. Тому нижче 1200px секція лишається
   вертикальною, проте вирівняною по лівому краю та з номерами 01—03.
   --------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.manifesto { text-align: start; }

	.manifesto__title,
	.manifesto__sub,
	.manifesto__lines { margin-inline: 0; }

	.manifesto__marker {
		display: flex;
		align-items: center;
		gap: .8rem;
		margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
		font-size: var(--fs-eyebrow);
		font-weight: 660;
		letter-spacing: .2em;
		text-transform: uppercase;
		color: var(--clay-soft);
	}

	.manifesto__marker-line {
		display: block;
		block-size: 1px;
		inline-size: clamp(2rem, 7vw, 4.5rem);
		background: currentColor;
		opacity: .5;
	}

	.manifesto__lines li {
		display: grid;
		grid-template-columns: 2.6rem minmax(0, 1fr);
		align-items: baseline;
		gap: 0 .4rem;
	}

	.manifesto__number {
		display: block;
		color: var(--clay-soft);
		font-size: .78rem;
		font-weight: 680;
		letter-spacing: .13em;
		line-height: inherit;
		font-variant-numeric: tabular-nums;
	}

	.manifesto__copy { display: block; }
}

/* До 1200px спільний контейнер не існує як бокс — мобільна верстка не змінюється. */
.manifesto__stage { display: contents; }

@media (min-width: 1200px) {
	/*
	 * Стабільна сцена. Зовнішній runway дає відстань для скролу, внутрішній
	 * stage прибитий sticky і завжди дорівнює висоті екрана. Уся композиція
	 * рахується від --m-top — безпечного відступу під nav-shell.
	 */
	.manifesto {
		--m-top: max(6.4rem, 13svh);
		--m-track-top: calc(var(--m-top) + 33svh);
		--m-track-h: calc(100svh - var(--m-track-top) - 3svh);

		/* Логічна 12-колонкова сітка всередині спільного контейнера. */
		--m-gap: 1.5rem;
		--m-col: calc((100% - var(--m-gap) * 11) / 12);
		--m-step: calc(var(--m-col) + var(--m-gap));
		--m-span: calc(var(--m-col) * 3 + var(--m-gap) * 2);

		min-block-size: 100svh;
		display: block;
		padding-block: 0;
		text-align: left;
	}

	.manifesto-scroll-ready .manifesto { min-block-size: 170svh; }

	.manifesto__inner {
		position: relative;
		block-size: 100svh;
		min-block-size: 100svh;
		max-width: none;
		padding-inline: 0;
	}

	/*
	 * Спільний контейнер секції. Геометрія один-в-один як у .nav-shell: та
	 * плашка з 1200px тягнеться між --desktop-nav-left-inset і
	 * --desktop-nav-right-inset (вона несиметрична), тож беремо ті самі
	 * змінні, а не --container. Усе — маркер, заголовок, блоки й SVG —
	 * живе всередині цього контейнера.
	 */
	.manifesto__stage {
		display: block;
		position: absolute;
		inset-block: 0;
		left: var(--desktop-nav-left-inset);
		right: var(--desktop-nav-right-inset);
		width: auto;
	}

	.manifesto-scroll-ready .manifesto__inner {
		position: sticky;
		top: 0;
	}

	.manifesto__marker {
		position: absolute;
		top: calc(var(--m-top) + 2.4rem);
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: .72rem;
		margin: 0;
		color: var(--clay-soft);
		font-size: .7rem;
		font-weight: 650;
		letter-spacing: .18em;
		line-height: 1;
		text-transform: uppercase;
	}

	.manifesto__marker-line {
		display: block;
		inline-size: 2.7rem;
		block-size: 1px;
		background: currentColor;
		opacity: .78;
	}

	.manifesto__title,
	.manifesto__sub {
		position: absolute;
		left: 0;
		right: 0;
		margin-inline: auto;
		text-align: center;
		transform: none;
	}

	.manifesto .manifesto__title.reveal,
	.manifesto .manifesto__sub.reveal,
	.manifesto .manifesto__lines .reveal {
		transition: none;
	}

	.manifesto .manifesto__title.reveal,
	.manifesto .manifesto__sub.reveal,
	.manifesto .manifesto__lines .reveal {
		opacity: 1;
		transform: none;
	}

	.manifesto__title {
		top: var(--m-top);
		max-width: 56rem;
		font-size: clamp(3.4rem, 4.35vw, 4.5rem);
		line-height: 1.03;
		letter-spacing: -.04em;
		font-weight: 610;
	}

	.manifesto__sub {
		top: calc(var(--m-top) + 18.5svh);
		max-width: 34rem;
		font-size: clamp(1.14rem, 1.48vw, 1.4rem);
		line-height: 1.4;
		color: color-mix(in srgb, var(--gold-soft) 62%, var(--clay-soft));
	}

	.manifesto__desktop-break { display: initial; }

	.manifesto__path,
	.manifesto__lines {
		position: absolute;
		top: var(--m-track-top);
		left: 0;
		width: 100%;
		height: var(--m-track-h);
		margin: 0;
		max-width: none;
	}

	.manifesto__path {
		display: block;
		z-index: 0;
		overflow: visible;
		pointer-events: none;
	}

	/*
	 * БЕЗ vector-effect: non-scaling-stroke. З ним Chrome рахує штрих у
	 * екранних пікселях, а getTotalLength() повертає довжину в координатах
	 * viewBox — dasharray не збігається з довжиною, візерунок повторюється
	 * і хвіст лінії проступає окремим фрагментом. viewBox 1000×326 близький
	 * до пропорцій робочої області, тож масштаб майже ізотропний.
	 */
	.manifesto__path path {
		fill: none;
		stroke: var(--clay-soft);
		stroke-width: .95;
		stroke-linecap: round;
		stroke-linejoin: round;
		opacity: .8;
	}

	.manifesto__lines {
		display: block;
		z-index: 1;
	}

	.manifesto__lines li {
		position: absolute;
		width: var(--m-span);
		padding: 0;
		border: 0;
		color: var(--chalk);
		font-size: clamp(1.02rem, 1.42vw, 1.32rem);
		font-weight: 430;
		line-height: 1.34;
		text-align: left;
		will-change: opacity, transform;
	}

	.manifesto__lines li + li {
		padding-top: 0;
		border-top: 0;
	}

	/* Колонки 1–3 · 5–7 · 10–12. Правий край 03 = правий край контейнера. */
	.manifesto__lines li:nth-child(1) { top: 11%; left: 0; }
	.manifesto__lines li:nth-child(2) { top: 40%; left: calc(var(--m-step) * 4); }
	.manifesto__lines li:nth-child(3) { top: 70%; left: calc(var(--m-step) * 9); }

	.manifesto__number {
		display: block;
		width: max-content;
		margin-bottom: .9rem;
		color: var(--clay-soft);
		font-size: .78rem;
		font-weight: 680;
		letter-spacing: .13em;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	.manifesto__copy { display: block; }

	.manifesto-scroll-ready .manifesto__lines li:nth-child(1) {
		opacity: 1;
		transform: none;
	}

	/* До першого кадру JS кроки 02/03 сховані — інакше блимають. */
	.manifesto-scroll-ready .manifesto__lines li[data-manifesto-step="2"],
	.manifesto-scroll-ready .manifesto__lines li[data-manifesto-step="3"] {
		opacity: 0;
		transform: translateY(10px);
	}

	/*
	 * Поки маніфест тримає екран, правий HUD-маркер глави сховано: у секції
	 * має бути рівно один маркер «02 · ТИСК» — зліва. Функціональність рейки
	 * лишається, повертається сама після виходу з секції (через ту саму
	 * opacity-транзицію, тому без блимання).
	 */
	.manifesto-active .story-rail,
	.hud-quiet .story-rail {
		opacity: 0;
		pointer-events: none;
	}
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
	.manifesto,
	.manifesto-scroll-ready .manifesto { min-block-size: 100svh; }

	.manifesto__inner,
	.manifesto-scroll-ready .manifesto__inner { position: relative; }

	.manifesto .manifesto__lines li {
		opacity: 1 !important;
		transform: none !important;
		will-change: auto;
	}

	.manifesto__path path {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}
}

/* ===========================================================================
   10 · 06 · ЩО САМЕ ТРЕНУЄТЬСЯ
   =========================================================================== */

.train__groups {
	display: grid;
	gap: clamp(1.2rem, 2.6vw, 2rem);
	margin-top: var(--sp-7);
}

/* Планшет: три картки не влазять у рядок, тому 2 + 1 на всю ширину. */
@media (min-width: 620px) and (max-width: 859.98px) {
	.train__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.train__groups > .train__group:last-child { grid-column: 1 / -1; }
}

@media (min-width: 860px) { .train__groups { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 1200px) {
	/* Сітка тягнеться на всю ширину .nav-shell, картки — рівні 1fr. */
	.train__groups { gap: 1.6rem; }

	/*
	 * Стопка карток притискається до правої межі контейнера. Картки
	 * повернуті, тому getBoundingClientRect() у них ширший за макетний бокс —
	 * padding-inline-end гасить цей виступ, щоб плашка не вилазила за межу.
	 */
	.what-we-train .cue-stack {
		justify-items: end;
		padding-inline-end: 6px;
	}

	.what-we-train .cue-card--b {
		margin-inline-start: 0;
		margin-inline-end: clamp(0px, 4vw, 2.4rem);
	}
}

.train__group {
	padding: clamp(1.3rem, 2.6vw, 2rem);
	border: 1px solid var(--rule-light);
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: var(--shadow-card);
}

.train__group > h3 {
	font-size: var(--fs-h4);
	margin-bottom: var(--sp-5);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--rule-light);
}

.train__group dl { display: grid; gap: var(--sp-4); }
.train__group dt { font-weight: 660; font-size: var(--fs-small); color: var(--ink); }
.train__group dd { margin: .18rem 0 0; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.52; }

.train__tangible {
	margin-top: clamp(3rem, 6vw, 5.5rem);
	display: grid;
	gap: clamp(1.8rem, 4vw, 3.5rem);
}

@media (min-width: 960px) {
	.train__tangible { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); align-items: start; }
}

.train__list { display: grid; gap: .7rem; margin-top: var(--sp-5); }
.train__list li {
	display: flex;
	gap: .8rem;
	align-items: baseline;
	font-size: var(--fs-small);
	color: var(--ink-2);
	line-height: 1.5;
}
.train__list li::before {
	content: "";
	inline-size: 14px; block-size: 1px;
	background: var(--clay);
	flex: none;
	translate: 0 -.32em;
}
.train__list strong { color: var(--ink); }

/* --- Cue-картка як фізичний об'єкт (3.3) ---------------------------------- */
/*
 * Трек сітки мусить бути обмеженим: без minmax(0, …) auto-трек росте до
 * max-content формули на картці, і повернута картка вилазить за плашку.
 * Бокові поля гасять виступ, який дає rotate() на вузьких екранах.
 */
.cue-stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(.9rem, 2vw, 1.4rem);
	padding-inline: 4px;
	perspective: 1200px;
}

.cue-card {
	position: relative;
	inline-size: min(100%, 22rem);
	aspect-ratio: 85 / 54;                 /* реальний масштаб картки в сумці */
	padding: clamp(1rem, 2.2vw, 1.5rem);
	border-radius: var(--r-md);
	background: linear-gradient(155deg, #fffdf7 0%, #f1ece0 100%);
	border: 1px solid rgba(17, 23, 30, .1);
	box-shadow: var(--shadow-lift);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: var(--ink);
}

.cue-card--a { rotate: -2.1deg; }
.cue-card--b { rotate: 1.6deg; margin-inline-start: clamp(0px, 4vw, 2.4rem); }

/*
 * На вузькому екрані зсув другої картки більше не поміщається: він виносив
 * її правий край за viewport. Стопка лишається живою за рахунок поворотів.
 */
@media (max-width: 620px) {
	.cue-card--b { margin-inline-start: 0; }
	.cue-card--a { rotate: -1.4deg; }
	.cue-card--b { rotate: 1.1deg; }
}

.cue-card__formula {
	font-size: clamp(.92rem, .82rem + .5vw, 1.18rem);
	font-weight: 680;
	line-height: 1.35;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.cue-card__formula .arrow { color: var(--clay); font-weight: 500; padding-inline: .1em; }

.cue-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	font-size: .62rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.cue-note { margin-top: var(--sp-5); font-size: var(--fs-small); color: var(--ink-2); }

/* ===========================================================================
   11 · 07 · НОРМАЛІЗАЦІЯ — три рівнозначні картки
   =========================================================================== */

.levels {
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.6rem);
	margin-top: var(--sp-7);
}

@media (min-width: 1024px) {
	.normalization { container-type: inline-size; }

	.normalization > .container {
		--normalization-shell-left: var(--desktop-nav-left-inset, var(--gutter));
		--normalization-shell-right: var(--desktop-nav-right-inset, var(--gutter));

		width: auto;
		max-width: none;
		margin-inline-start: var(--normalization-shell-left);
		margin-inline-end: var(--normalization-shell-right);
		padding-inline: 0;
		display: grid;
		justify-items: center;
	}

	.normalization__inner {
		--normalization-original-width: calc(
			min(
				calc(100% + var(--normalization-shell-left) + var(--normalization-shell-right) + 2px),
				var(--container)
			)
			- 2px
		);

		width: var(--normalization-original-width);
		padding-inline: var(--gutter);
		position: relative;
		inset-inline-start: 0;
		inset-inline-start: calc(
			(
				max(calc(var(--gutter) + .52rem), calc(50cqw - 40.9rem))
				- calc(max(var(--gutter), calc(50cqw - 640px)) - var(--desktop-wordmark-outset))
			) / 2
			+ var(--desktop-nav-left-inset) - var(--desktop-nav-left-inset)
		);
	}
}

/* Планшет: 2 + 1, щоб рядки тексту не стискалися до 30 знаків. */
@media (min-width: 640px) and (max-width: 839.98px) {
	.levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.levels > .level:last-child { grid-column: 1 / -1; }
}

@media (min-width: 840px) { .levels { grid-template-columns: repeat(3, 1fr); } }

.level {
	padding: clamp(1.3rem, 2.6vw, 1.9rem);
	border: 1px solid var(--rule-dark);
	border-radius: var(--r-lg);
	background: rgba(19, 28, 38, .92);
}

.level h3 {
	font-size: var(--fs-h4);
	color: var(--chalk);
	margin-bottom: .3rem;
}

.level__when {
	display: block;
	font-size: var(--fs-micro);
	font-weight: 500;
	color: var(--gold);
	letter-spacing: .01em;
	margin-bottom: var(--sp-4);
}

.level p { font-size: var(--fs-small); color: var(--on-dark-2); line-height: 1.55; }

/* ===========================================================================
   12 · 08 · ПРОЦЕС — вертикальний таймлайн
   =========================================================================== */

/* Desktop-only presentation hooks stay inert in the existing tablet/mobile flow. */
.process__layout { display: contents; }
.process__route,
.process__display-num { display: none; }

.process__steps {
	margin-top: var(--sp-7);
	display: grid;
	gap: 0;
	border-inline-start: 1px solid var(--rule-light);
}

.process__step {
	position: relative;
	padding: 0 0 clamp(2rem, 4vw, 3rem) clamp(1.3rem, 3vw, 2.6rem);
}

.process__step:last-child { padding-bottom: 0; }

.process__step::before {
	content: "";
	position: absolute;
	inset-inline-start: -4.5px;
	inset-block-start: .45em;
	inline-size: 9px;
	block-size: 9px;
	border-radius: 50%;
	background: var(--clay);
}

.process__num {
	font-size: var(--fs-micro);
	font-weight: 660;
	letter-spacing: .16em;
	color: var(--clay);
	font-variant-numeric: tabular-nums;
}

.process__step h3 { margin-top: .25rem; }
.process__step p { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--ink-2); line-height: 1.58; max-width: 62ch; }
.process__step p + p { margin-top: .85em; }

.process__step ul { margin-top: var(--sp-4); display: grid; gap: .45rem; }
.process__step li {
	display: flex; gap: .7rem; align-items: baseline;
	font-size: var(--fs-small); color: var(--ink-2);
}
.process__step li::before {
	content: ""; inline-size: 4px; block-size: 4px; border-radius: 50%;
	background: var(--clay); flex: none; translate: 0 -.25em; opacity: .8;
}

.process__aside {
	margin-top: var(--sp-4);
	padding: clamp(.9rem, 2vw, 1.3rem);
	border-radius: var(--r-md);
	background: rgba(176, 90, 60, .07);
	border-left: 2px solid var(--clay);
	font-size: var(--fs-small);
	color: var(--ink-2);
	line-height: 1.55;
	max-width: 62ch;
}

.process__pull {
	margin-top: var(--sp-4);
	font-size: var(--fs-h4);
	font-weight: 620;
	color: var(--ink);
	letter-spacing: -.012em;
	max-width: 30ch;
}

/* ---------------------------------------------------------------------------
   08 · Процес до 1200px.

   Десктоп малює п'ять карток «змійкою» з великим примарним номером і кривою
   між ними. Крива вимагає двох колонок, тож на вузькому екрані вона зникає —
   але сама мова композиції лишається: кожен крок і далі є карткою з тим самим
   фоном, рамкою та примарним номером, а зв'язок між кроками тримає одна
   вертикальна лінія маршруту зліва.
   --------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.process__steps {
		position: relative;
		margin-top: clamp(2.4rem, 6vw, 4rem);
		gap: clamp(1rem, 2.6vw, 1.6rem);
		border-inline-start: 0;
		padding-inline-start: clamp(1.4rem, 4vw, 2.4rem);
	}

	/* Лінія маршруту — вертикальний слід тієї самої кривої. */
	.process__steps::before {
		content: "";
		position: absolute;
		inset-block: .6rem;
		inset-inline-start: 4px;
		inline-size: 1px;
		background: linear-gradient(
			180deg,
			transparent 0,
			color-mix(in srgb, var(--clay) 55%, transparent) 4%,
			color-mix(in srgb, var(--clay) 55%, transparent) 96%,
			transparent 100%);
	}

	.process__step {
		--process-card-pad: clamp(1.15rem, 3.4vw, 1.85rem);
		position: relative;
		overflow: hidden;
		isolation: isolate;
		padding: var(--process-card-pad);
		border: 1px solid color-mix(in srgb, var(--clay) 32%, transparent);
		border-radius: var(--r-md);
		background: color-mix(in srgb, var(--clay) 6%, var(--paper));
	}

	.process__step:last-child { padding-bottom: var(--process-card-pad); }

	/* Вузол маршруту — там, де картка чіпляється до лінії. */
	.process__step::before {
		inset-inline-start: calc(-1 * clamp(1.4rem, 4vw, 2.4rem) + 1px);
		inset-block-start: calc(var(--process-card-pad) + .35em);
		inline-size: 7px;
		block-size: 7px;
		border: 1px solid var(--clay);
		background: var(--paper);
	}

	.process__step > :not(.process__display-num) { position: relative; z-index: 1; }

	.process__display-num {
		display: block;
		position: absolute;
		z-index: 0;
		inset-block-start: calc(var(--process-card-pad) - .35rem);
		inset-inline-end: calc(var(--process-card-pad) - .5rem);
		font-size: clamp(58px, 14vw, 96px);
		font-weight: 300;
		line-height: .78;
		letter-spacing: -.06em;
		color: color-mix(in srgb, var(--clay) 26%, var(--paper));
		opacity: .55;
		user-select: none;
		pointer-events: none;
	}

	.process__step h3 { max-width: 15ch; }
	.process__step p  { max-width: 56ch; }

	.process__pull {
		margin-top: var(--sp-5);
		padding-top: var(--sp-4);
		border-top: 1px solid var(--rule-light);
	}
}

/* Планшет: п'ятий крок отримує свій десктопний двоколонковий список. */
@media (min-width: 700px) and (max-width: 1199.98px) {
	.process__step:nth-child(5) ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .6rem 2rem;
	}
}

@media (min-width: 1200px) {
	.process > .container { max-width: 1320px; }

	.process .section__head {
		max-width: 700px;
	}

	.process .section__head .eyebrow {
		margin-bottom: var(--sp-5);
		letter-spacing: .2em;
	}

	.process .section__head h2 {
		max-width: 700px;
		font-size: clamp(52px, 4.5vw, 72px);
		line-height: 1.02;
		letter-spacing: -.035em;
	}

	.process__layout {
		display: block;
		position: relative;
		margin-top: clamp(5rem, 6.5vw, 6.5rem);
	}

	.process__steps {
		position: relative;
		z-index: 1;
		max-width: 1200px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: minmax(0, 520px) minmax(0, 540px);
		justify-content: space-between;
		row-gap: clamp(3.75rem, 5vw, 5.5rem);
		align-items: start;
		border-inline-start: 0;
	}

	.process-card {
		--process-card-pad: clamp(2.5rem, 3.25vw, 3.25rem);
		min-width: 0;
		width: 100%;
		padding: var(--process-card-pad);
		border: 1px solid color-mix(in srgb, var(--clay) 34%, transparent);
		border-radius: var(--r-md);
		background: color-mix(in srgb, var(--clay) 7%, var(--paper));
		overflow: hidden;
		isolation: isolate;
	}

	.process__step.process-card:last-child { padding-bottom: var(--process-card-pad); }

	.process__step:nth-child(1) { grid-column: 1; grid-row: 1; }
	.process__step:nth-child(2) { grid-column: 2; grid-row: 2; }
	.process__step:nth-child(3) { grid-column: 1; grid-row: 3; }
	.process__step:nth-child(4) { grid-column: 2; grid-row: 4; }
	.process__step:nth-child(5) { grid-column: 1; grid-row: 5; }

	/* На desktop робочі номери не мають крапки; вузли маршруту лишаються. */
	.process-card::before { content: none; display: none; }

	.process__step > :not(.process__display-num) {
		position: relative;
		z-index: 1;
	}

	.process__display-num {
		display: block;
		position: absolute;
		z-index: 0;
		inset-block-start: 1.5rem;
		inset-inline-start: 2rem;
		font-size: clamp(84px, 8vw, 140px);
		font-weight: 300;
		line-height: .78;
		letter-spacing: -.065em;
		color: color-mix(in srgb, var(--clay) 24%, var(--paper));
		opacity: .3;
		user-select: none;
		pointer-events: none;
	}

	.process .process__num {
		margin-top: 0;
		font-size: var(--fs-micro);
		font-weight: 700;
		letter-spacing: .19em;
		color: var(--clay);
	}

	.process__step h3 {
		max-width: 17ch;
		margin-top: .65rem;
		font-size: clamp(1.55rem, 2vw, 2rem);
		line-height: 1.08;
		letter-spacing: -.025em;
	}

	.process__step p {
		line-height: 1.62;
	}

	.process__step:nth-child(2) h3 {
		max-width: 15ch;
		font-size: clamp(1.9rem, 2.65vw, 2.55rem);
	}

	.process__step:nth-child(2) > p:last-child { max-width: 52ch; }

	.process .process__aside {
		max-width: 100%;
		margin-top: var(--sp-5);
		padding: clamp(1.125rem, 1.5vw, 1.375rem);
		border: 0;
		border-left: 2px solid var(--clay);
		border-radius: 0 var(--r-md) var(--r-md) 0;
		background: color-mix(in srgb, var(--clay) 11%, var(--paper));
	}

	.process .process__pull {
		max-width: 28ch;
		margin-top: var(--sp-5);
		padding-top: var(--sp-4);
		border-top: 1px solid var(--rule-light);
		font-size: clamp(1.12rem, 1.45vw, 1.32rem);
		line-height: 1.38;
	}

	.process__step:nth-child(5) h3 { max-width: 20ch; }

	.process__step:nth-child(5) ul {
		position: relative;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem 3rem;
		margin-top: var(--sp-5);
	}

	.process__step:nth-child(5) ul::after {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 50%;
		inline-size: 1px;
		background: var(--rule-light);
	}

	.process__step:nth-child(5) li {
		line-height: 1.5;
	}

	.process__step:nth-child(5) li:nth-child(odd) { padding-inline-end: 1rem; }
	.process__step:nth-child(5) li:nth-child(even) { padding-inline-start: 1rem; }

	.process__route {
		display: block;
		position: absolute;
		z-index: 0;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		overflow: visible;
		pointer-events: none;
		opacity: 0;
	}

	.process__route.is-ready { opacity: 1; }

	.process__route-link {
		fill: none;
		stroke: var(--clay);
		stroke-width: 1.75;
		stroke-linecap: round;
		stroke-linejoin: round;
		vector-effect: non-scaling-stroke;
		opacity: .72;
	}

	.process__route-node {
		fill: color-mix(in srgb, var(--clay) 7%, var(--paper));
		stroke: var(--clay);
		stroke-width: 1.75;
		vector-effect: non-scaling-stroke;
	}
}

/* ===========================================================================
   13 · 09 · ПЕТЛЯ — quiet screen, замкнена схема (3.2)
   =========================================================================== */

.loop {
	min-block-size: 100svh;
	display: grid;
	align-content: center;
	background: transparent;          /* кадр видно навколо scrim-картки */
}

.loop__grid {
	display: grid;
	gap: clamp(2.4rem, 5vw, 4.5rem);
	align-items: center;
}

/*
 * Два стовпці — лише від 1200px, разом із десктопною схемою --wide.
 * До 1200px схема стоїть під текстом і забирає всю ширину контейнера:
 * інакше в 980—1199px її колонка стискається до ~455px, і підписи
 * кругової схеми падають нижче 11px екранних.
 */
@media (min-width: 1200px) {
	.loop__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}

.loop__title { max-width: 16ch; }
.loop__title-line { display: inline; }

.loop__text { margin-top: var(--sp-5); max-width: 52ch; color: var(--on-dark-2); font-size: var(--fs-small); line-height: 1.62; }
.loop__text p + p { margin-top: 1em; }
.loop__text strong { color: var(--chalk); font-weight: 620; }

.loop__chain {
	margin-top: var(--sp-5);
	font-size: var(--fs-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold);
	line-height: 1.9;
}

.loop__figure { display: grid; place-items: center; }

.loop-diagram { inline-size: min(100%, 36rem); block-size: auto; }

/* До 1200px працює історична схема, desktop-редизайн вимкнено. */
.loop-diagram--wide { display: none; }

.loop-diagram .ring {
	fill: none;
	stroke: var(--rule-dark);
	stroke-width: 1.25;
}

.loop-diagram .ring-live {
	fill: none;
	stroke: var(--clay);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: var(--ring-len, 880);
	stroke-dashoffset: var(--ring-len, 880);
}

.loop__figure.is-in .loop-diagram .ring-live {
	animation: msa-ring 2200ms var(--ease-io) forwards;
}

.no-js .loop-diagram .ring-live { stroke-dashoffset: 0; }

@keyframes msa-ring { to { stroke-dashoffset: 0; } }

.loop-diagram .node-dot { fill: var(--navy); stroke: var(--gold); stroke-width: 1.6; }
.loop-diagram .node-label {
	fill: var(--chalk);
	font-family: var(--font-sans);
	font-size: 14.5px;
	font-weight: 620;
	letter-spacing: .01em;
}
.loop-diagram .node-index {
	fill: var(--gold);
	font-family: var(--font-sans);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .12em;
}
.loop-diagram .arrow-head { fill: var(--clay); }

/*
 * Desktop-схема: тонкий терактовий контур, приглушені допоміжні лінії,
 * дрібні вузли замість великих кружків, шеврони замість масивних стрілок.
 */
.loop-diagram--wide .ring { stroke-width: 1; opacity: .8; }

.loop-diagram--wide .ring-guide {
	fill: none;
	stroke: var(--rule-dark);
	stroke-width: 1;
	stroke-dasharray: 2 7;
	opacity: .65;
}

.loop-diagram--wide .ring-live { stroke-width: 1.4; }

.loop-diagram--wide .node-tick {
	stroke: var(--clay-soft);
	stroke-width: 1;
	opacity: .5;
}

.loop-diagram--wide .node-halo {
	fill: none;
	stroke: var(--clay);
	stroke-width: 1;
	opacity: .55;
}

.loop-diagram--wide .node-dot {
	fill: var(--clay-soft);
	stroke: none;
}

.loop-diagram--wide .node-dot.is-current { fill: var(--clay); }

.loop-diagram--wide .arrow-chevron {
	fill: none;
	stroke: var(--clay);
	stroke-width: 1.35;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .72;
}

.loop-diagram--wide .node-label { font-size: 13.5px; font-weight: 600; }

.loop-diagram--wide .node-index {
	font-size: 9px;
	letter-spacing: .16em;
	font-variant-numeric: tabular-nums;
}

.loop-diagram--wide .center-label { font-size: 9.5px; letter-spacing: .24em; }

/* ---------------------------------------------------------------------------
   09 · Кругова схема на 480—1199px.

   viewBox має 640 одиниць, а сама схема — не ширша за 36rem, тож екранний
   кегль підпису = font-size x (ширина SVG / 640). При 14.5px це давало
   10—13px залежно від ширини. 17px тримає щонайменше 11.7px на всьому
   діапазоні й лишається під стелею обрізання: найдовший підпис
   «Наступне завдання» прив'язаний правим краєм до x=176 viewBox і при
   18px уже виходить за ліву межу кадру.

   Блок стоїть після базових правил .node-*, інакше програє їм по порядку.
   --------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.loop-diagram--compact .node-label   { font-size: 17px; }
	.loop-diagram--compact .node-index   { font-size: 17px; }
	.loop-diagram--compact .center-label { font-size: 15px; }
}

/* ---------------------------------------------------------------------------
   09 · Вертикальна вісь 01–05 — до 1200px (мобільні + планшети).

   Кругова схема на цих ширинах не масштабується: 640 одиниць viewBox на
   320px екрана дають 8px підписи. Замість неї — та сама петля вертикально:
   тонка золота вісь, п'ять однакових кіл на ній, підписи почергово
   ліворуч/праворуч і окремий зворотний контур 05 → вгору → 01 із делікатним
   шевроном біля 01. «І знову» — підпис на цьому зворотному шляху.

   Уся геометрія — від чотирьох змінних (--node, --tie, --row, --arrow-x),
   тому композиція тримається на будь-якій ширині без прив'язки до одного
   viewport. Від 1200px блок вимкнено, desktop-схема --wide не зачеплена.
   --------------------------------------------------------------------------- */
.loop-route { display: none; }

@media (max-width: 1199.98px) {
	.loop-diagram--compact { display: none; }

	.loop-route {
		--node: clamp(30px, 8.6vw, 38px);   /* діаметр кола */
		--tie: clamp(10px, 3.4vw, 18px);    /* перемичка коло → підпис */
		--row: clamp(62px, 15vw, 86px);     /* крок по вертикалі */
		--arrow-x: clamp(8px, 3vw, 22px);   /* права вертикаль від краю блоку */
		--route-line: var(--gold);
		--route-tie: var(--rule-dark);

		position: relative;
		display: block;
		inline-size: 100%;
		max-inline-size: 33rem;
		margin-inline: auto;
	}

	.loop-route__list {
		position: relative;
		display: grid;
		grid-auto-rows: var(--row);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Центральна вісь: від центру 01 до центру 05; кола перекривають її фоном. */
	.loop-route__list::before {
		content: "";
		position: absolute;
		inset-block: calc(var(--row) / 2);
		inset-inline-start: 50%;
		margin-inline-start: -.5px;
		inline-size: 1px;
		background: var(--route-line);
		pointer-events: none;
	}

	.loop-route__step {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--node) minmax(0, 1fr);
		column-gap: var(--tie);
		align-items: center;
		padding: 0;
	}

	/* Коротка нейтральна перемичка від кола до підпису. */
	.loop-route__step::before {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inline-size: var(--tie);
		block-size: 1px;
		background: var(--route-tie);
		pointer-events: none;
	}

	.loop-route__step:nth-child(odd)::before { inset-inline-end: calc(50% + var(--node) / 2); }
	.loop-route__step:nth-child(even)::before { inset-inline-start: calc(50% + var(--node) / 2); }

	/* Однакові кола 01–05: діаметр, обведення, фон і кегль спільні для всіх. */
	.loop-route__n {
		grid-area: 1 / 2;
		position: relative;
		z-index: 1;
		display: grid;
		place-items: center;
		inline-size: var(--node);
		block-size: var(--node);
		border: 1px solid var(--gold);
		border-radius: 50%;
		background: color-mix(in srgb, var(--navy) 92%, transparent);
		color: var(--gold);
		font-size: clamp(.6rem, 2.1vw, .72rem);
		font-weight: 700;
		letter-spacing: .04em;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	.loop-route__label {
		font-size: clamp(.8rem, .5rem + 1.3vw, 1rem);
		font-weight: 620;
		line-height: 1.28;
		letter-spacing: -.01em;
		color: var(--chalk);
	}

	/* Ліві підписи — спільна права межа, праві — спільна ліва. */
	.loop-route__step:nth-child(odd) .loop-route__label {
		grid-area: 1 / 1;
		justify-self: end;
		text-align: right;
	}

	.loop-route__step:nth-child(even) .loop-route__label {
		grid-area: 1 / 3;
		justify-self: start;
		text-align: left;
		/* Праворуч лишається коридор під стрілку — підпис у нього не заходить. */
		max-inline-size: calc(100% - var(--arrow-x) - var(--tie));
	}

	/*
	 * Зворотний шлях одним контуром: від правого краю 05 праворуч, угору
	 * правою вертикаллю й ліворуч до 01. Ліва грань відкрита, тому лінія
	 * ніде не перетинає вісь, кола й підписи.
	 */
	.loop-route::after {
		content: "";
		position: absolute;
		inset-block: calc(var(--row) / 2 - .5px);
		inset-inline: calc(50% + var(--node) / 2) var(--arrow-x);
		border: 1px solid var(--route-line);
		border-inline-start: 0;
		border-start-end-radius: 12px;
		border-end-end-radius: 12px;
		pointer-events: none;
	}

	/* Відкритий наконечник «<» біля 01: два тонкі штрихи, без трикутника. */
	.loop-route::before {
		content: "";
		position: absolute;
		inset-block-start: calc(var(--row) / 2);
		inset-inline-start: calc(50% + var(--node) / 2 + 2px);
		inline-size: 9px;
		block-size: 9px;
		border-block-start: 1px solid var(--route-line);
		border-inline-start: 1px solid var(--route-line);
		transform: translateY(-50%) rotate(-45deg);
		pointer-events: none;
	}

	/* Підпис зворотного шляху — усередині контуру, між 02 і 04. */
	.loop-route__again {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-end: calc(var(--arrow-x) + clamp(8px, 2.5vw, 16px));
		margin: 0;
		transform: translateY(-50%);
		font-size: clamp(.62rem, 2vw, .72rem);
		font-weight: 600;
		letter-spacing: .2em;
		text-transform: uppercase;
		white-space: nowrap;
		color: var(--gold);
	}
}
.loop-diagram .center-label {
	fill: var(--on-dark-3);
	font-family: var(--font-sans);
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

@media (min-width: 1200px) {
	/*
	 * Ширина секції синхронізована з .nav-shell через спільний
	 * .container--shell (див. блок 02). Сітка — дві колонки: ліва трохи
	 * ширша, щоб формула процесу лягала в один рядок; права має мінімум
	 * 360px під діаграму.
	 */
	.loop__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
		gap: clamp(3rem, 4.5vw, 4.5rem);
	}

	/*
	 * Заголовок рівно у два рядки. 16ch різали його на три, тому обмеження
	 * знімається, а рядки задає розмітка: два span-и з display: block.
	 * nowrap страхує від «Zoom» на власному рядку — за найвужчої desktop
	 * колонки (≈604px на 1200px) довший рядок займає ≈533px.
	 */
	.loop__title {
		max-width: none;
		margin-top: var(--sp-3);
	}

	.loop__title-line {
		display: block;
		white-space: nowrap;
	}

	/* Формула процесу — один технічний рядок, без надмірного трекінгу. */
	.loop__chain {
		margin-top: var(--sp-6);
		font-size: clamp(.74rem, .35rem + .55vw, .85rem);
		letter-spacing: .035em;
		line-height: 1.5;
		white-space: nowrap;
	}

	.loop__text {
		margin-top: var(--sp-6);
		max-width: 46ch;
	}

	.loop-diagram--compact { display: none; }

	.loop-diagram--wide {
		display: block;
		inline-size: min(100%, 28.5rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.loop-diagram .ring-live { stroke-dashoffset: 0; animation: none; }
}

/* ===========================================================================
   14 · 10 · MENTAL REPORTS — product demo (3.1)
   =========================================================================== */

.reports__intro { max-width: 64ch; }

.reports__sub { margin-top: var(--sp-4); font-size: var(--fs-lead); color: var(--ink-2); line-height: 1.45; }
.reports__sub strong { color: var(--ink); }

/* --- Demo прогресії -------------------------------------------------------- */
.demo {
	margin-top: clamp(2.4rem, 5vw, 4rem);
	border: 1px solid var(--rule-light);
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.demo__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: clamp(.9rem, 2vw, 1.2rem) clamp(1rem, 2.4vw, 1.6rem);
	border-bottom: 1px solid var(--rule-light);
	background: var(--paper);
}

.demo__label {
	font-size: var(--fs-micro);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 620;
}

.demo__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	padding: .25rem;
	border: 1px solid var(--rule-light);
	border-radius: var(--r-pill);
	background: #fff;
}

.demo__tab {
	padding: .5rem .95rem;
	min-height: 40px;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--ink-2);
	font-size: var(--fs-micro);
	font-weight: 620;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.demo__tab:hover { background: rgba(17, 23, 30, .05); }
.demo__tab[aria-selected="true"] { background: var(--clay); color: var(--accent-on); }

.demo__panels {
	--demo-pad: clamp(1.2rem, 3vw, 2.2rem);
	padding: var(--demo-pad);
}
.demo__panel[hidden] { display: none; }

.demo__split {
	display: grid;
	gap: clamp(1.2rem, 3vw, 2.6rem);
	align-items: start;
}

@media (min-width: 880px) {
	.demo__split { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
	.demo__split .demo__panel-lead { position: sticky; top: 7rem; }
}

.demo__panel-lead {
	font-size: var(--fs-small);
	color: var(--ink-2);
	max-width: 46ch;
	margin: 0;
}

/* Макет однієї форми звіту */
.report-card {
	inline-size: min(100%, 26rem);
	padding: clamp(1rem, 2.2vw, 1.4rem);
	border: 1px solid var(--rule-light);
	border-radius: var(--r-md);
	background: linear-gradient(170deg, #fffdf8 0%, #f6f2e8 100%);
	box-shadow: var(--shadow-card);
}

.report-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	padding-bottom: .7rem;
	margin-bottom: .85rem;
	border-bottom: 1px solid var(--rule-light);
}

.report-card__title { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.report-card__date  { font-size: .66rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.report-card__q { display: grid; gap: .7rem; }

.report-card__q li { font-size: .82rem; line-height: 1.4; color: var(--ink-2); }
.report-card__q li span { display: block; color: var(--ink-3); font-size: .72rem; margin-bottom: .2rem; }

.report-card__answer {
	display: block;
	padding: .45rem .6rem;
	border-radius: var(--r-xs);
	background: #fff;
	border: 1px solid var(--rule-light);
	color: var(--ink);
	font-size: .8rem;
}

.report-card__answer--blank { color: var(--ink-3); background: rgba(17, 23, 30, .03); }
.report-card__answer--mark  { border-color: var(--clay); background: rgba(176, 90, 60, .09); font-weight: 600; }

.report-card__foot { margin-top: .9rem; display: flex; justify-content: flex-end; }

/* Стан «5 звітів» — стос */
.report-fan {
	display: grid;
	gap: .8rem;
}

@media (min-width: 780px) {
	.report-fan { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); align-items: start; }
}

.report-mini {
	padding: .8rem .85rem;
	border: 1px solid var(--rule-light);
	border-radius: var(--r-sm);
	background: #fff;
	font-size: .74rem;
	color: var(--ink-2);
	line-height: 1.4;
}

.report-mini__date { display: block; font-size: .64rem; color: var(--ink-3); margin-bottom: .45rem; font-variant-numeric: tabular-nums; }
.report-mini__line { display: block; padding: .28rem .4rem; border-radius: var(--r-xs); background: rgba(17, 23, 30, .04); }
.report-mini__line + .report-mini__line { margin-top: .3rem; }
.report-mini__line--mark { background: rgba(176, 90, 60, .14); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--clay); }

.repeat-note {
	margin-top: var(--sp-5);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--fs-micro);
	font-weight: 620;
	color: var(--clay);
	letter-spacing: .04em;
}
.repeat-note::before {
	content: "";
	inline-size: 18px; block-size: 1px; background: currentColor; flex: none;
}

/* Стан «1 місяць» — Monthly Review (3.6) */
.review-sheet {
	inline-size: min(100%, 32rem);
	padding: clamp(1.1rem, 2.4vw, 1.7rem);
	border: 1px solid var(--rule-light);
	border-radius: var(--r-md);
	background: linear-gradient(170deg, #fffdf8 0%, #f6f2e8 100%);
	box-shadow: var(--shadow-card);
}

.review-sheet__head {
	display: flex; align-items: center; justify-content: space-between; gap: .6rem;
	padding-bottom: .8rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule-light);
}

.review-sheet__title { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.review-meter { margin-bottom: 1.1rem; }
.review-meter__row { display: flex; align-items: baseline; justify-content: space-between; font-size: .74rem; color: var(--ink-3); margin-bottom: .4rem; }
.review-meter__val { font-size: 1.05rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.review-meter__track { block-size: 6px; border-radius: var(--r-pill); background: rgba(17, 23, 30, .08); overflow: hidden; }
.review-meter__fill  { block-size: 100%; inline-size: 75%; background: var(--clay); border-radius: var(--r-pill); }

.review-sheet dl { display: grid; gap: .75rem; }
.review-sheet dt { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 660; }
.review-sheet dd { margin: .15rem 0 0; font-size: .85rem; color: var(--ink); line-height: 1.42; }

/* Стан «Наступна ціль» */
.next-goal {
	display: grid;
	gap: var(--sp-5);
	padding: clamp(1.4rem, 3.5vw, 3rem) 0;
}

.next-goal__phrase {
	font-size: clamp(1.4rem, 1rem + 2.4vw, 2.9rem);
	line-height: 1.15;
	letter-spacing: -.022em;
	font-weight: 620;
	color: var(--ink);
	max-width: 20ch;
	text-wrap: balance;
}

.next-goal__meta { font-size: var(--fs-small); color: var(--ink-2); max-width: 46ch; }

/*
 * Схема корта. Нижче 1024px її просто немає: планшет і мобільний лишаються
 * рівно такими, якими були.
 */
.next-goal__court { display: none; }

@media (min-width: 1024px) {
	/*
	 * Дві рівні половини: текст ліворуч (52%), корт праворуч (48%).
	 * Корт виведений з потоку — висоту панелі задає текст, тож картка не
	 * росте (панель лишається в межах ~330px, як і була).
	 */
	.next-goal {
		position: relative;
		align-content: center;
		min-block-size: 21rem;
		padding-block: clamp(1.6rem, 2.8vw, 2.6rem);
	}

	.next-goal__phrase {
		font-size: clamp(2rem, .35rem + 2.5vw, 3.1rem);
		max-width: 52%;
	}

	/* Контрольовані три рядки заголовка — розрив задає розмітка, не <br>. */
	.next-goal__line { display: block; }

	.next-goal__meta { max-width: 52%; }

	/* Плашка «приклад» — окремим рядком під описом. */
	.next-goal__meta .example-tag {
		display: flex;
		inline-size: fit-content;
		margin-block-start: var(--sp-4);
	}

	.next-goal__court {
		--court-line: var(--chalk-deep);

		display: block;
		position: absolute;
		/* Дотягуємось до країв картки — низ корта зрізає overflow самої .demo. */
		inset-block: calc(-1 * var(--demo-pad));
		inset-inline-end: calc(-1 * var(--demo-pad));
		inline-size: calc(48% + var(--demo-pad));
		overflow: hidden;
		pointer-events: none;

		/* Ближче до тексту корт розчиняється — жодної розділювальної лінії. */
		-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 11%, #000 32%);
		        mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .5) 11%, #000 32%);
	}

	.next-goal__court .court {
		display: block;
		inline-size: 100%;
		block-size: 100%;
	}

	.court__lines path,
	.court__net path {
		fill: none;
		stroke: var(--court-line);
		stroke-width: 1.2;
	}

	.court__mesh-line { fill: none; stroke: var(--court-line); stroke-width: .75; opacity: .8; }
	.court__net-mesh  { fill: url(#msa-court-mesh); stroke: none; }
	.court__net-cord  { stroke-width: 1.7; }

	/* Траєкторія — той самий теракотовий, що й у кнопки «Записатися». */
	.court__trail-stop { stop-color: var(--clay); }

	.court__trail {
		fill: none;
		stroke: url(#msa-court-trail);
		stroke-width: 2.4;
		stroke-linecap: round;
	}

	.court__target-ring { fill: #fff; stroke: var(--clay); stroke-width: 1.6; }
	.court__target-dot  { fill: var(--clay); }

	/*
	 * Поява при переключенні на вкладку. Панель ховається через [hidden] →
	 * display: none, тож CSS-анімація сама стартує заново щоразу, коли таб
	 * стає активним. Від прокрутки не залежить, JS не потрібен.
	 */
	.court__trail {
		stroke-dasharray: 100;
		stroke-dashoffset: 100;
		animation: msa-court-trail 720ms var(--ease-io) 80ms forwards;
	}

	.court__target {
		opacity: 0;
		animation: msa-court-target 300ms var(--ease-out) 700ms forwards;
	}

	@keyframes msa-court-trail  { to { stroke-dashoffset: 0; } }
	@keyframes msa-court-target { to { opacity: 1; } }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
	.court__trail  { animation: none; stroke-dashoffset: 0; }
	.court__target { animation: none; opacity: 1; }
}

/* ---------------------------------------------------------------------------
   10 · «Наступна ціль» — подача для телефонів і планшетів.

   Схема корта та її анімація належать desktop-у: тут вони лише вимикаються,
   жодне їхнє правило не переписується. Замість них — статична траєкторія
   м'яча в окремому SVG, який стоїть поза потоком у нижньому полі картки,
   тому висоту контенту не збільшує й тексту не перетинає.

   Ширина траєкторії й нижнє поле рахуються з одних змінних, тож пропорція
   viewBox (118 / 300) тримається на будь-якій ширині без magic numbers.
   Усі селектори прив'язані до #demo-panel-goal — інші панелі демо не
   зачеплені, від 1200px не діє жодне правило звідси.
   --------------------------------------------------------------------------- */
#demo-panel-goal .next-goal__arc { display: none; }

@media (max-width: 1199.98px) {
	#demo-panel-goal {
		--goal-arc-w: min(100%, 22rem);
		--goal-arc-ratio: .3934;
	}

	/* Корт з анімацією — тільки від 1200px. */
	#demo-panel-goal .next-goal__court { display: none; }

	#demo-panel-goal .next-goal {
		position: relative;
		align-content: start;
		min-block-size: 0;
		gap: var(--sp-4);
		padding-block:
			clamp(1.2rem, 4vw, 2rem)
			calc(var(--goal-arc-w) * var(--goal-arc-ratio) + var(--sp-5));
	}

	/*
	 * Кегль прив'язаний до ширини картки, а не до «красивого» clamp: найдовший
	 * рядок «після власної помилки» має вміщатися цілком навіть на 320px,
	 * інакше з нього зривається окреме слово й заголовок стає в чотири рядки.
	 */
	#demo-panel-goal .next-goal__phrase {
		max-inline-size: 24ch;
		font-size: clamp(1.28rem, 8.6vw - 6.6px, 2.1rem);
		line-height: 1.14;
	}

	/* Три рядки задає розмітка — окремого «висячого» слова не буде. */
	#demo-panel-goal .next-goal__line { display: block; }

	#demo-panel-goal .next-goal__meta { max-inline-size: 34ch; }

	/* Капсула «приклад» — окремим рядком під описом. */
	#demo-panel-goal .next-goal__meta .example-tag {
		display: flex;
		inline-size: fit-content;
		margin-block-start: var(--sp-4);
	}

	#demo-panel-goal .next-goal__arc {
		display: block;
		position: absolute;
		inset-inline-end: 0;
		inset-block-end: 0;
		inline-size: var(--goal-arc-w);
		pointer-events: none;
	}

	#demo-panel-goal .goal-arc {
		display: block;
		inline-size: 100%;
		block-size: auto;
	}

	#demo-panel-goal .goal-arc__base {
		stroke: var(--rule-light);
		stroke-width: 1;
	}

	#demo-panel-goal .goal-arc__trail {
		stroke: var(--clay);
		stroke-width: 1.2;
		stroke-linecap: round;
		opacity: .55;
	}

	#demo-panel-goal .goal-arc__ball {
		fill: #fff;
		stroke: var(--clay);
		stroke-width: 1.2;
	}

	#demo-panel-goal .goal-arc__dot { fill: var(--clay); }
}

/* Планшет — та сама композиція, більше повітря й довша траєкторія. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	#demo-panel-goal { --goal-arc-w: min(100%, 30rem); }

	#demo-panel-goal .next-goal { gap: var(--sp-5); }

	#demo-panel-goal .next-goal__phrase {
		max-inline-size: 26ch;
		font-size: clamp(2rem, 1.1rem + 2.2vw, 2.6rem);
	}

	#demo-panel-goal .next-goal__meta { max-inline-size: 44ch; }
}

/* Мобільна версія демо — вертикальна послідовність замість табів */
@media (max-width: 700px) {
	.demo__tabs { inline-size: 100%; justify-content: stretch; border-radius: var(--r-md); }
	.demo__tab { flex: 1 1 auto; text-align: center; }
}

/* --- Підблоки 10 ---------------------------------------------------------- */
.reports__blocks {
	margin-top: clamp(2.6rem, 5vw, 4.5rem);
	display: grid;
	gap: clamp(2rem, 4vw, 3.4rem);
}

@media (min-width: 900px) { .reports__blocks { grid-template-columns: 1fr 1fr; } }

.reports__block h3 {
	font-size: var(--fs-h4);
	padding-bottom: var(--sp-3);
	margin-bottom: var(--sp-4);
	border-bottom: 1px solid var(--rule-light);
}

.reports__block p { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; }
.reports__block p + p { margin-top: .9em; }

.reports__quote {
	font-size: var(--fs-h4);
	font-weight: 640;
	color: var(--ink);
	line-height: 1.35;
	margin-bottom: var(--sp-4);
	padding-left: 1rem;
	border-left: 2px solid var(--clay);
}

.reports__hyp { display: grid; gap: .6rem; margin-top: var(--sp-4); }
.reports__hyp li { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; display: flex; gap: .7rem; align-items: baseline; }
.reports__hyp li::before { content: ""; inline-size: 12px; block-size: 1px; background: var(--clay); flex: none; translate: 0 -.3em; }
.reports__hyp strong { color: var(--ink); }

.reports__monthly ul { display: grid; gap: .5rem; margin-top: var(--sp-4); }
.reports__monthly li { font-size: var(--fs-small); color: var(--ink-2); display: flex; gap: .7rem; align-items: baseline; }
.reports__monthly li::before { content: ""; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--clay); flex: none; translate: 0 -.25em; }

@media (min-width: 1200px) {
	/*
	 * Ширина секції синхронізована з .nav-shell через спільний
	 * .container--shell (див. блок 02) — клас доданий у розмітці, окремої
	 * контейнерної системи тут не заводимо. Бокс .container стає рівним
	 * плашці меню, тож маркер, заголовок, вступ, демо, підблоки й CTA
	 * стартують з тієї самої лівої межі й закінчуються на тій самій правій.
	 */

	/*
	 * Заголовок в один рядок. Ламав його не <br> і не span, а max-width на
	 * .section__head / .reports__intro: 756px проти 805px, потрібних тексту.
	 * Знімаємо обмеження лише тут — у плашці є 1303px (1440), 1199px (1280)
	 * і 1123px (1200), тож запас щонайменше 395px і nowrap не потрібен.
	 * Розмір шрифту, накреслення й колір лишаються ті самі.
	 */
	.reports .reports__intro { max-width: none; }

	/* Вступний абзац тягнеться на всю ширину контейнера — два рядки замість трьох. */
	.reports .reports__sub {
		width: 100%;
		max-width: none;
	}

	/*
	 * CTA секції = первинна кнопка «Записатися» з .nav-shell. Там це чистий
	 * .btn без модифікатора, тож просто повертаємо його токени --btn-*
	 * поверх .plate .btn--ghost. Нижче 1200px кнопка лишається ghost.
	 */
	.reports .btn-row .btn--ghost {
		--btn-bg: var(--clay);
		--btn-fg: var(--accent-on);
		--btn-bd: var(--clay);
		min-height: 48px;
	}

	.reports .btn-row .btn--ghost:hover {
		background: var(--clay-deep);
		border-color: var(--clay-deep);
	}

	/*
	 * Фокус — теж як у кнопки меню: на теракотовій заливці --clay-deep від
	 * .plate :focus-visible майже не читається, тож повертаємо --focus.
	 */
	.reports .btn-row .btn--ghost:focus-visible { outline-color: var(--focus); }
}

/* ===========================================================================
   15 · 11 · ОНЛАЙН
   =========================================================================== */

.online__points {
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.6rem);
	margin-top: var(--sp-7);
}


.online__point {
	padding: clamp(1.2rem, 2.4vw, 1.7rem);
	border: 1px solid var(--rule-light);
	border-radius: var(--r-lg);
	background: #fff;
}

.online__point h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.online__point p { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; }

/* ---------------------------------------------------------------------------
   11 · Онлайн до 1024px.

   Десктоп — одна суцільна картка: темна ліва панель із заголовком і світла
   права з пронумерованими картками. На вузькому екрані панель стає верхньою
   смугою тієї ж картки, а нумерація 01–03 лишається.
   --------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.online__card {
		--online-pad: clamp(1.3rem, 4vw, 2.2rem);
		border: 1px solid var(--rule-light);
		border-radius: var(--r-xl);
		background: #fff;
		overflow: hidden;
		counter-reset: msa-online;
	}

	.online__card > .section__head {
		max-width: none;
		margin: 0;
		padding: var(--online-pad);
		background: var(--navy-2);
		color: var(--on-dark);
	}

	.online__card .eyebrow { color: var(--clay-soft); }
	.online__card > .section__head h2 { color: var(--chalk); }
	.online__card > .section__head .rich { color: var(--on-dark-2); }

	.online__points {
		margin-top: 0;
		padding: var(--online-pad) var(--online-pad) 0;
	}

	.online__point {
		counter-increment: msa-online;
		border: 0;
		border-top: 1px solid var(--rule-light);
		border-radius: 0;
		padding: var(--sp-5) 0 0;
		background: transparent;
	}

	.online__points > .online__point:first-child { border-top: 0; padding-top: 0; }

	.online__point::before {
		display: block;
		content: counter(msa-online, decimal-leading-zero);
		margin-bottom: var(--sp-3);
		font-size: var(--fs-small);
		font-weight: 700;
		letter-spacing: .08em;
		color: var(--clay);
		font-variant-numeric: tabular-nums;
	}

	.online__example {
		margin: var(--online-pad);
		border-radius: var(--r-md);
	}
}

/* Планшет: перші дві картки поруч, третя — на всю ширину, як на десктопі. */
@media (min-width: 700px) and (max-width: 1023.98px) {
	.online__points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(1.4rem, 3vw, 2.4rem);
	}

	.online__point:nth-child(3) { grid-column: 1 / -1; }
	.online__points > .online__point:nth-child(2) { border-top: 0; padding-top: 0; }
}

.online__example {
	margin-top: var(--sp-6);
	padding: clamp(1.2rem, 2.6vw, 1.9rem);
	border-radius: var(--r-lg);
	background: var(--paper-2);
	border-left: 2px solid var(--clay);
	font-size: var(--fs-small);
	color: var(--ink-2);
	line-height: 1.6;
	max-width: 74ch;
}

/*
 * Desktop-композиція: одна суцільна картка — темна ліва панель + світла
 * права з картками 01–03 і блоком прикладу. Нижче 1024px усе лишається
 * як було: .online__card не має жодних правил і працює звичайним блоком.
 */
@media (min-width: 1024px) {
	/*
	 * Ширина картки = контент-бокс .container, а він і є бокс .nav-shell:
	 *   • до 1200px .nav-shell рахується з тих самих --container і --gutter
	 *     (max-width: calc(var(--container) - 2rem) всередині .site-header
	 *     з padding-inline: var(--gutter)), тож контент-бокс .container
	 *     збігається з ним один-в-один;
	 *   • від 1200px .container несе спільний .container--shell (блок 02),
	 *     який тягне його рівно між --desktop-nav-left-inset і
	 *     --desktop-nav-right-inset і обнуляє padding-inline.
	 * Власного max-width картка не має — жодного підбору «на око».
	 */
	.online__card {
		--online-pad-dark:  clamp(40px, 4vw, 68px);
		--online-pad-light: clamp(26px, 2.6vw, 40px);

		display: grid;
		grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
		grid-template-areas:
			"aside points"
			"aside example";
		column-gap: 0;
		row-gap: 20px;

		border: 1px solid var(--rule-light);
		border-radius: var(--r-xl);
		overflow: hidden;

		/*
		 * Колір половин лежить на самій картці, а не на .section__head:
		 * інакше reveal-трансформ панелі відкривав би світлу смугу згори.
		 * Межа 42% збігається з межею колонок, бо column-gap: 0.
		 */
		background: linear-gradient(90deg, var(--navy-2) 0 42%, var(--paper) 42% 100%);
	}

	/* --- Ліва темна панель --- */
	.online__card > .section__head {
		grid-area: aside;
		max-width: none;
		padding: var(--online-pad-dark);
	}

	.online__card .eyebrow { color: var(--clay-soft); }
	.online__card h2 { color: var(--chalk); }

	.online__card .rich {
		color: var(--on-dark-2);
		max-width: 42ch;
	}

	/* --- Права світла частина --- */
	.online__points {
		grid-area: points;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		margin-top: 0;
		padding: var(--online-pad-light) var(--online-pad-light) 0;
		counter-reset: msa-online;
	}

	/* 03 — нижча й на всю ширину правої колонки. */
	.online__point:nth-child(3) { grid-column: 1 / -1; }

	.online__point {
		counter-increment: msa-online;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"num  rule"
			"head head"
			"body body";
		align-content: start;
		align-items: center;
		padding: clamp(1.4rem, 1.8vw, 1.9rem) clamp(1.5rem, 2vw, 2rem);
	}

	/* Номер картки — рахує CSS, тому в розмітці й на мобільному тексту не додається. */
	.online__point::before {
		grid-area: num;
		content: counter(msa-online, decimal-leading-zero);
		font-size: var(--fs-small);
		font-weight: 700;
		letter-spacing: .08em;
		color: var(--clay);
		font-variant-numeric: tabular-nums;
	}

	.online__point::after {
		grid-area: rule;
		content: "";
		inline-size: 44px;
		block-size: 1px;
		margin-inline-start: .85rem;
		background: var(--clay);
		justify-self: start;
	}

	.online__point h3 {
		grid-area: head;
		margin-top: var(--sp-5);
		margin-bottom: var(--sp-3);
	}

	.online__point p { grid-area: body; }

	/* --- Блок прикладу --- */
	.online__example {
		grid-area: example;
		margin: 0 var(--online-pad-light) var(--online-pad-light);
		max-width: none;
		padding: clamp(1.4rem, 1.8vw, 1.9rem) clamp(1.5rem, 2vw, 2rem);
		border: 1px solid rgba(176, 90, 60, .34);
		border-radius: var(--r-lg);
		background: rgba(176, 90, 60, .045);
	}
}

/* ===========================================================================
   16 · 12 · ЧОМУ MSA + NEURO FOCUS
   =========================================================================== */

.formula {
	margin-top: var(--sp-7);
	font-size: clamp(1.15rem, .9rem + 1.5vw, 2.1rem);
	line-height: 1.28;
	letter-spacing: -.02em;
	font-weight: 620;
	color: var(--chalk);
	text-wrap: balance;
}

.formula .x { color: var(--clay-soft); font-weight: 400; padding-inline: .18em; }

.formula__legend { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); max-width: 76ch; }
.formula__legend li { font-size: var(--fs-small); color: var(--on-dark-2); line-height: 1.55; }
.formula__legend strong { color: var(--chalk); font-weight: 640; }

/* ---------------------------------------------------------------------------
   12 · Рівняння до 1024px.

   Десктоп розкладає три складові у вертикальне рівняння з великими номерами,
   лініями та знаком × у розриві. Дві колонки на вузькому екрані не потрібні,
   але сама мова — номер, лінія, × — переноситься один в один.
   --------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.formula__legend {
		--eq-rule: rgba(197, 160, 106, .22);
		gap: 0;
		counter-reset: eq;
		border-block-end: 1px solid var(--eq-rule);
	}

	.formula__legend > li {
		counter-increment: eq;
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		column-gap: clamp(.9rem, 3vw, 1.8rem);
		align-items: start;
		padding-block: clamp(1.1rem, 3vw, 1.6rem) clamp(1.4rem, 3.6vw, 2rem);
	}

	.formula__legend > li:first-child { border-block-start: 1px solid var(--eq-rule); }

	.formula__legend > li + li {
		background-image: linear-gradient(to right,
			var(--eq-rule) 0 calc(50% - 1.1rem),
			transparent calc(50% - 1.1rem) calc(50% + 1.1rem),
			var(--eq-rule) calc(50% + 1.1rem) 100%);
		background-repeat: no-repeat;
		background-size: 100% 1px;
		background-position: 0 0;
	}

	.formula__legend > li + li::after {
		content: "×" / "";
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 50%;
		translate: -50% -50%;
		font-size: 1.1rem;
		line-height: 1;
		font-weight: 400;
		color: var(--clay-soft);
		pointer-events: none;
		user-select: none;
	}

	.formula__legend > li::before {
		content: counter(eq, decimal-leading-zero) / "";
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
		font-size: clamp(2.6rem, 11vw, 4.4rem);
		line-height: .74;
		font-weight: 660;
		letter-spacing: -.05em;
		color: var(--chalk);
		opacity: .08;
		pointer-events: none;
		user-select: none;
	}

	.formula__legend > li > strong {
		grid-column: 2;
		grid-row: 1;
		display: block;
		font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
		line-height: 1.24;
		letter-spacing: -.015em;
	}

	.formula__dash { display: none; }

	.formula__def {
		grid-column: 2;
		grid-row: 2;
		display: block;
		margin-block-start: .5rem;
		line-height: 1.55;
	}
}

/* ---------------------------------------------------------------------------
   Верхній підблок «Чому MSA» — редакційне рівняння (від 1024px)

   Дві колонки 42 / 58: ліворуч маркер, заголовок і два абзаци, праворуч —
   три складові як вертикальна формула. Усе scoped на .why-lead, тому нижній
   підблок Neuro Focus (.neuro) не зачеплений жодним селектором.

   --why-lead-min тримає висоту верхнього підблоку такою, якою вона була до
   редизайну, щоб offsetTop у .neuro не зрушився. Значення зняті з реального
   рендеру: 1024→634, 1280→617, 1440→625, 1920→626 px.
   --------------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.why-lead {
		/* Лінії — приглушене золото; номери — крейда на дуже низькій opacity. */
		--eq-rule: rgba(197, 160, 106, .22);

		display: grid;
		grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
		column-gap: clamp(2.5rem, 4.4vw, 4.6rem);
		align-items: start;
		min-block-size: var(--why-lead-min, 0px);
	}

	/* --- Ліва колонка ---------------------------------------------------- */

	.why-lead .section__head {
		grid-column: 1;
		/* Глобальні 62ch ширші за колонку — тут ширину задає сітка. */
		max-width: none;
		margin: 0;
	}

	/*
	 * text-wrap: balance з базового h2 розкидає рядки по-своєму. Тут потрібне
	 * передбачуване перенесення на чотири рядки, яке дає сама ширина колонки.
	 */
	.why-lead .section__head h2 { text-wrap: wrap; }

	.why-lead .section__head .rich { line-height: 1.62; }
	.why-lead .section__head .rich p + p { margin-top: 1.5em; }

	/*
	 * Інлайн-формула на десктопі не показується: той самий зміст розгорнуто
	 * праворуч у вертикальному рівнянні. Текст лишається в DOM і в
	 * accessibility tree — це приховування, а не видалення.
	 */
	.why-lead .formula {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* --- Права колонка: вертикальне рівняння ----------------------------- */

	/*
	 * Рівняння тягнеться на всю висоту рядка сітки, тому нижня лінія
	 * закінчується там само, де й ліва колонка. Рядки — 1fr із підлогою
	 * min-content, щоб довгий опис 02 нікуди не вилазив.
	 */
	.why-lead .formula__legend {
		grid-column: 2;
		align-self: stretch;
		display: grid;
		grid-template-rows: repeat(3, minmax(min-content, 1fr));
		gap: 0;
		max-width: none;
		margin: 0;
		counter-reset: eq;
		border-block-end: 1px solid var(--eq-rule);
	}

	.why-lead .formula__legend > li {
		counter-increment: eq;
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		column-gap: clamp(1.8rem, 3.4vw, 3.4rem);
		align-items: start;
		/* Рядок розтягнутий на 1fr — контент пакується вгору, вільне поле знизу. */
		align-content: start;
		padding-block: clamp(1.4rem, 2vw, 2.1rem) clamp(2rem, 3vw, 3.1rem);
	}

	/* Перша лінія рівняння — суцільна. */
	.why-lead .formula__legend > li:first-child {
		border-block-start: 1px solid var(--eq-rule);
	}

	/*
	 * Лінії між блоками мають розрив по центру — у ньому стоїть знак ×.
	 * Розрив зроблено градієнтом, а не плашкою з фоном: підкладка секції
	 * напівпрозора, суцільний чіп на ній було б видно.
	 */
	.why-lead .formula__legend > li + li {
		background-image: linear-gradient(to right,
			var(--eq-rule) 0 calc(50% - 1.5rem),
			transparent calc(50% - 1.5rem) calc(50% + 1.5rem),
			var(--eq-rule) calc(50% + 1.5rem) 100%);
		background-repeat: no-repeat;
		background-size: 100% 1px;
		background-position: 0 0;
	}

	/* Знак × по центру розриву. Альт-текст порожній — у a11y-дерево не йде. */
	.why-lead .formula__legend > li + li::after {
		content: "\00d7" / "";
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 50%;
		translate: -50% -50%;
		font-size: clamp(1.2rem, 1.6vw, 1.6rem);
		line-height: 1;
		font-weight: 400;
		color: var(--clay-soft);
		pointer-events: none;
		user-select: none;
	}

	/*
	 * Великі номери 01–03. Лічильник, а не розмітка: у accessibility tree
	 * вони не потрапляють (порожній альт-текст), текст ними не перекритий —
	 * номер займає власну колонку сітки.
	 */
	.why-lead .formula__legend > li::before {
		content: counter(eq, decimal-leading-zero) / "";
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
		font-size: clamp(4.4rem, 8vw, 7.2rem);
		line-height: .74;
		font-weight: 660;
		letter-spacing: -.05em;
		color: var(--chalk);
		opacity: .06;
		pointer-events: none;
		user-select: none;
	}

	.why-lead .formula__legend > li > strong {
		grid-column: 2;
		grid-row: 1;
		display: block;
		font-size: clamp(1.1rem, .88rem + .5vw, 1.42rem);
		line-height: 1.2;
		letter-spacing: -.015em;
		font-weight: 660;
		color: var(--chalk);
	}

	/* Тире розділяло термін і пояснення в рядок; тут це робить сам рядок. */
	.why-lead .formula__dash { display: none; }

	.why-lead .formula__def {
		grid-column: 2;
		grid-row: 2;
		display: block;
		margin-block-start: .68rem;
		font-size: clamp(.92rem, .84rem + .3vw, 1.06rem);
		line-height: 1.58;
		color: var(--on-dark-2);
	}
}

@media (min-width: 1024px) and (max-width: 1199px) { .why-lead { --why-lead-min: 633.65625px; } }
@media (min-width: 1200px) and (max-width: 1399px) { .why-lead { --why-lead-min: 617px; } }
@media (min-width: 1400px) and (max-width: 1469px) { .why-lead { --why-lead-min: 624.28125px; } }
/* Від 1470px --fs-h2 упирається в стелю clamp, і базова висота стає сталою. */
@media (min-width: 1470px) { .why-lead { --why-lead-min: 625.65625px; } }

.neuro { margin-top: clamp(2.8rem, 6vw, 5rem); }

/* Desktop-only. До 1200px композиція блоку лишається без змін. */
.neuro__ghost,
.neuro-scale { display: none; }

.neuro__title-line { display: inline; }

.neuro__grid { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); margin-top: var(--sp-5); }

@media (min-width: 940px) { .neuro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: start; } }

.neuro__list { display: grid; gap: .55rem; margin-top: var(--sp-5); }
.neuro__list li { font-size: var(--fs-small); color: var(--on-dark-2); display: flex; gap: .7rem; align-items: baseline; }
.neuro__list li::before { content: ""; inline-size: 12px; block-size: 1px; background: var(--gold); flex: none; translate: 0 -.3em; }

/* Проста схема логіки (3.5) — без нейроестетики */
.neuro-flow {
	display: grid;
	gap: .6rem;
	padding: clamp(1.1rem, 2.4vw, 1.7rem);
	border: 1px solid var(--rule-dark);
	border-radius: var(--r-lg);
	background: rgba(19, 28, 38, .9);
}

.neuro-flow__step {
	display: grid;
	grid-template-columns: 1.7rem 1fr;
	gap: .8rem;
	align-items: center;
	padding: .75rem .85rem;
	border: 1px solid var(--rule-dark);
	border-radius: var(--r-md);
	background: rgba(13, 19, 26, .7);
	font-size: var(--fs-small);
	color: var(--on-dark);
}

.neuro-flow__n {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

.neuro-flow__arrow { justify-self: center; color: var(--clay-soft); font-size: .9rem; line-height: 1; }

/* ---------------------------------------------------------------------------
   Логіка 01–04 на mobile/tablet — «Сходинка»
   Замість чотирьох однакових карток зі стрілками: редакційні рядки на теплій
   лінії, кожен наступний рівень зі зсувом праворуч. Похиле з'єднання малює
   псевдоелемент усередині самого рядка, тож нічого не виходить за межі колонки
   й нічого не обрізається overflow'ом.

   Від 1200px .neuro__figure сховано (працює .neuro-scale), і жодне правило
   звідси туди не потрапляє — ПК-версія лишається без змін.
   --------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
	.neuro-flow {
		/*
		 * Уся геометрія сходинки — від двох величин:
		 *   --step-size — крок зміщення й водночас горизонтальний хід похилої;
		 *   --step-h    — висота рядка й водночас вертикальний хід похилої.
		 * Тому всі чотири похилі сегменти мають однакові кут і довжину.
		 * --step-hair компенсує нахил, щоб товщина похилої дорівнювала 1px
		 * горизонтальних ліній: √(h² + s²) / h.
		 */
		--step-size: 20px;
		--step-h: 58px;
		--step-hair: 1.06px;
		--step-num: 52px;
		--step-line: color-mix(in srgb, var(--clay) 58%, transparent);

		display: block;
		gap: 0;
		margin: 4px 0 0;
		padding: 4px 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		overflow: visible;
	}

	/* Стрілки потрібні лише в старій подачі — прибираємо їх до 1200px. */
	.neuro-flow__arrow { display: none; }

	.neuro-flow__step {
		--step-index: 0;
		--step-offset: calc(var(--step-index) * var(--step-size));

		position: relative;
		display: grid;
		grid-template-columns: var(--step-num) minmax(0, 1fr);
		gap: 0;
		align-items: center;

		inline-size: calc(100% - var(--step-offset));
		block-size: var(--step-h);
		min-block-size: var(--step-h);
		margin: 0 0 0 var(--step-offset);

		/*
		 * Відступ дорівнює кроку: контент починається там, де закінчується
		 * похила, тож лінія ніколи не перетинає цифру чи назву. Горизонтальна
		 * лінія — це border, він іде по всій ширині рядка разом із відступом.
		 */
		padding: 0 0 0 var(--step-size);

		border: 0;
		border-block-start: 1px solid var(--step-line);
		border-radius: 0;
		background: transparent;
		box-shadow: none;

		font-size: 14px;
		font-weight: 500;
		line-height: 1.25;
	}

	.neuro-flow__step:nth-of-type(2) { --step-index: 1; }
	.neuro-flow__step:nth-of-type(3) { --step-index: 2; }
	.neuro-flow__step:nth-of-type(4) { --step-index: 3; }

	/*
	 * Похиле з'єднання — по одному на кожен із чотирьох рівнів, включно з
	 * останнім. Іде від початку лінії цього рівня (верхній лівий кут) до
	 * початку наступної лінії: на --step-size правіше, рівно на нижній межі
	 * рядка. Псевдоелемент лежить усередині рядка, тож нічого не обрізається.
	 */
	.neuro-flow__step::before {
		content: "";
		position: absolute;
		inset-block: -1px 0;
		inset-inline-start: 0;
		inline-size: var(--step-size);
		background: var(--step-line);
		clip-path: polygon(0 0, var(--step-hair) 0, 100% 100%, calc(100% - var(--step-hair)) 100%);
		pointer-events: none;
	}

	/*
	 * П'ята, фінальна горизонтальна лінія: під останнім рядком і ще на один
	 * крок правіше — саме в неї впирається четверта похила.
	 */
	.neuro-flow__step:last-of-type::after {
		content: "";
		position: absolute;
		inset-block-end: -1px;
		inset-inline: var(--step-size) 0;
		block-size: 1px;
		background: var(--step-line);
		pointer-events: none;
	}

	.neuro-flow__n {
		font-size: 21px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: -.04em;
		opacity: .32;
	}
}

/* Планшет — та сама система, просторіша. */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.neuro-flow {
		--step-size: 26px;
		--step-h: 68px;
		--step-hair: 1.07px;
		--step-num: 64px;
	}
}

.neuro-limit {
	margin-top: var(--sp-6);
	padding: clamp(1.2rem, 2.6vw, 1.8rem);
	border: 1px solid var(--clay);
	border-radius: var(--r-lg);
	background: rgba(176, 90, 60, .1);
	max-width: 74ch;
}

.neuro-limit p { font-size: var(--fs-small); color: var(--on-dark); line-height: 1.55; }
.neuro-limit p + p { margin-top: .7em; color: var(--on-dark-2); }
.neuro-limit strong { color: var(--chalk); font-weight: 660; }

/* ---------------------------------------------------------------------------
   Neuro Focus — desktop editorial layout (від 1200px)
   12-колонкова сітка. .neuro__grid і .neuro__col повторюють ті самі колонки,
   тому вкладені елементи лягають на спільну сітку без subgrid — і при цьому
   .neuro__col лишається боксом, тож його reveal-анімація працює як раніше.
   --------------------------------------------------------------------------- */

@media (min-width: 1200px) {
	.neuro {
		--neuro-gap: 1.5rem;
		margin-top: clamp(4rem, 6vw, 6rem);
	}

	.neuro,
	.neuro__grid,
	.neuro__col {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--neuro-gap);
		align-items: start;
	}

	/* Явний рядок: інакше auto-placement обходить ghost і лишає порожню смугу. */
	.neuro__grid { grid-row: 2; }

	.neuro__grid,
	.neuro__col {
		grid-column: 1 / -1;
		row-gap: 0;
		margin: 0;
	}

	/* Вертикальну схему замінює горизонтальна шкала. */
	.neuro__figure { display: none; }

	.neuro__title {
		grid-column: 1 / 8;
		grid-row: 1;
		margin: 0;
		font-size: clamp(46px, 4.3vw, 68px);
		line-height: .98;
		letter-spacing: -.035em;
		font-weight: 620;
		color: var(--chalk);
		text-wrap: nowrap;
	}

	.neuro__title-line { display: block; }

	/*
	 * Декоративний напис. Тільки контур, низька контрастність — помітний
	 * при уважному погляді, але не конкурує із заголовком.
	 */
	.neuro__ghost {
		display: block;
		grid-column: 8 / -1;
		grid-row: 1;
		justify-self: end;
		align-self: start;
		margin: 0;
		font-size: clamp(84px, 8.6vw, 132px);
		line-height: .82;
		letter-spacing: -.06em;
		font-weight: 700;
		text-align: right;
		text-transform: uppercase;
		color: transparent;
		-webkit-text-stroke: 1px var(--on-dark-3);
		opacity: .11;
		pointer-events: none;
		user-select: none;
	}

	.neuro__ghost span { display: block; }

	.neuro__text {
		grid-column: 1 / 7;
		margin-top: clamp(1.6rem, 2.2vw, 2.2rem);
		font-size: var(--fs-small);
		line-height: 1.62;
		color: var(--on-dark-2);
	}

	.neuro__text strong { color: var(--chalk); font-weight: 660; }

	/* Горизонтальна шкала 01–04 ------------------------------------------ */

	.neuro-scale {
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: var(--neuro-gap);
		margin: clamp(3rem, 4.6vw, 4.6rem) 0 0;
		padding: 0 0 0;
		list-style: none;
		border-bottom: 1px solid var(--clay);
	}

	.neuro-scale__step {
		position: relative;
		padding-bottom: 1.75rem;
	}

	/* Короткий вертикальний штрих від етапу до суцільної лінії. */
	.neuro-scale__step::after {
		content: "";
		position: absolute;
		inset-block-end: 0;
		inset-inline-start: 0;
		inline-size: 1px;
		block-size: .9rem;
		background: var(--clay);
		opacity: .62;
	}

	.neuro-scale__n {
		display: block;
		margin-bottom: .55rem;
		color: var(--clay-soft);
		font-size: .72rem;
		font-weight: 700;
		letter-spacing: .16em;
		font-variant-numeric: tabular-nums;
	}

	.neuro-scale__label {
		display: block;
		color: var(--chalk);
		font-size: clamp(.95rem, 1.12vw, 1.1rem);
		font-weight: 620;
		line-height: 1.3;
		letter-spacing: -.01em;
	}

	/* Шість пунктів у дві колонки по три ---------------------------------- */

	.neuro .neuro__list {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column;
		column-gap: clamp(2.5rem, 5vw, 5rem);
		row-gap: .85rem;
		margin-top: clamp(2.2rem, 3vw, 3rem);
	}

	.neuro .neuro__list li {
		align-items: baseline;
		font-size: var(--fs-small);
		line-height: 1.5;
	}

	.neuro .neuro__list li::before {
		inline-size: 14px;
		background: var(--clay);
	}

	/* Підсумкова фраза ---------------------------------------------------- */

	.neuro .neuro__note {
		grid-column: 1 / -1;
		margin-top: clamp(2.2rem, 3vw, 3rem);
		font-size: clamp(1.02rem, 1.22vw, 1.2rem);
		line-height: 1.45;
		font-weight: 620;
		letter-spacing: -.012em;
		color: var(--chalk);
	}

	/* Нижня інформаційна смуга замість окремої картки --------------------- */

	.neuro .neuro-limit {
		position: relative;
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		column-gap: clamp(1rem, 1.6vw, 1.6rem);
		row-gap: .35rem;
		max-width: none;
		margin-top: clamp(2.6rem, 3.4vw, 3.4rem);
		padding: clamp(1.1rem, 1.5vw, 1.5rem) 0 0 1.15rem;
		border: 0;
		border-top: 1px solid var(--rule-dark);
		border-radius: 0;
		background: transparent;
	}

	.neuro .neuro-limit::before {
		content: "";
		position: absolute;
		inset-block-start: clamp(1.1rem, 1.5vw, 1.5rem);
		inset-inline-start: 0;
		inline-size: 1px;
		block-size: 1.35em;
		background: var(--clay);
	}

	.neuro .neuro-limit p {
		margin: 0;
		font-size: .93rem;
		line-height: 1.5;
	}

	.neuro .neuro-limit p + p {
		flex: 1 1 22rem;
		margin-top: 0;
		color: var(--on-dark-2);
	}
}

/* ===========================================================================
   17 · 13 · МЕЖІ
   =========================================================================== */

.bounds { display: grid; gap: 0; margin-top: var(--sp-7); max-width: 82ch; }

.bounds__item {
	padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
	border-top: 1px solid var(--rule-light);
	display: grid;
	gap: .5rem;
}
.bounds__item:last-child { border-bottom: 1px solid var(--rule-light); }



.bounds__item h3 { font-size: var(--fs-h4); }
.bounds__item p { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.58; }

/* ---------------------------------------------------------------------------
   Desktop-композиція 13: п'ять меж як одна з'єднана система.

   Ширина = контент-бокс .container, а він і є бокс .nav-shell:
     • до 1200px .nav-shell рахується з тих самих --container і --gutter
       (max-width: calc(var(--container) - 2rem) всередині .site-header
       з padding-inline: var(--gutter));
     • від 1200px .container несе спільний .container--shell (блок 02),
       який тягне його між --desktop-nav-left-inset і --desktop-nav-right-inset.
   Заголовок і сітка лежать в одному й тому самому контейнері; власного
   вужчого max-width секція не має.

   Нижче 1024px нічого з цього не діє — лишається чинний список.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   13 · Межі до 1024px.

   Десктоп — п'ять зчеплених карток із великим номером у власній колонці.
   На вузькому екрані сітка стає одноколонковою (двоколонковою на планшеті),
   але картка, рамка, фон і номер лишаються: без них розділ перетворюється на
   звичайний список, а він у цій секції не читається як «межі».
   --------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.bounds {
		--bounds-line: rgba(176, 90, 60, .3);
		gap: clamp(.7rem, 2.4vw, 1rem);
		max-width: none;
		counter-reset: msa-bound;
	}

	.bounds__item {
		counter-increment: msa-bound;
		grid-template-columns: minmax(0, auto) minmax(0, 1fr);
		grid-template-areas:
			"num title"
			"num text";
		align-content: start;
		gap: .35rem clamp(.8rem, 3vw, 1.4rem);
		padding: clamp(1.1rem, 3.4vw, 1.7rem);
		border: 1px solid var(--bounds-line);
		border-radius: var(--r-md);
		background: rgba(176, 90, 60, .05);
	}

	.bounds__item:last-child { border-bottom: 1px solid var(--bounds-line); }

	.bounds__item::before {
		grid-area: num;
		content: counter(msa-bound, decimal-leading-zero);
		align-self: start;
		font-size: clamp(2.4rem, 10vw, 3.8rem);
		font-weight: 300;
		line-height: .85;
		letter-spacing: -.04em;
		color: rgba(176, 90, 60, .22);
		font-variant-numeric: tabular-nums;
	}

	.bounds__item h3 { grid-area: title; line-height: 1.25; }
	.bounds__item p  { grid-area: text;  margin-top: .15rem; }
}

/* Планшет: п'ять меж лягають у дві колонки, п'ята — на всю ширину. */
@media (min-width: 700px) and (max-width: 1023.98px) {
	.bounds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bounds__item:nth-child(5) { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
	.boundaries .section__head h2 {
		font-size: clamp(48px, 5.6vw, 84px);
		line-height: .95;
		letter-spacing: -.05em;
	}

	.bounds {
		--bounds-r-out: clamp(20px, 2.2vw, 30px);
		--bounds-r-in:  clamp(10px, 1.1vw, 16px);
		--bounds-line:  rgba(176, 90, 60, .32);
		--bounds-pad:   clamp(28px, 3.5vw, 52px);

		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		max-width: none;
		margin-top: clamp(2.2rem, 3.4vw, 3.4rem);
		counter-reset: msa-bound;
	}

	.bounds__item {
		counter-increment: msa-bound;
		grid-template-columns: minmax(0, 24%) minmax(0, 1fr);
		grid-template-areas:
			"num title"
			"num text";
		align-content: start;
		gap: 0 clamp(.6rem, 1vw, 1.1rem);
		padding: var(--bounds-pad);
		border: 1px solid var(--bounds-line);
		border-radius: var(--bounds-r-in);
		background: rgba(176, 90, 60, .05);
	}

	/*
	 * Плавні стики. Картки не роз'їхані проміжком і не мають подвійної
	 * лінії: сусідні рамки накладаються рівно на 1px негативним полем, тож
	 * шов лишається одинарним. Прямі ділянки країв дає --bounds-r-in ≈ 0
	 * кривизни, а самі кути на центральній осі — компактні дуги, які
	 * складаються в S-подібні переходи там, де сходяться чотири картки.
	 */
	.bounds__item:nth-child(2n)  { margin-inline-start: -1px; }
	.bounds__item:nth-child(n+3) { margin-block-start: -1px; }

	/* Великий радіус — лише на зовнішньому периметрі. */
	.bounds__item:nth-child(1) { border-start-start-radius: var(--bounds-r-out); }
	.bounds__item:nth-child(2) { border-start-end-radius: var(--bounds-r-out); }
	.bounds__item:nth-child(5) {
		border-end-start-radius: var(--bounds-r-out);
		border-end-end-radius: var(--bounds-r-out);
	}

	/* Нижня рамка останньої картки — теракотова, як і решта периметра. */
	.bounds .bounds__item:last-child { border-bottom: 1px solid var(--bounds-line); }

	/* Номери рахує CSS — у розмітку не додається жодного символу. */
	.bounds__item::before {
		grid-area: num;
		content: counter(msa-bound, decimal-leading-zero);
		align-self: start;
		font-size: clamp(64px, 7vw, 104px);
		font-weight: 300;
		line-height: .85;
		letter-spacing: -.04em;
		color: rgba(176, 90, 60, .22);
		font-variant-numeric: tabular-nums;
	}

	.bounds__item h3 { grid-area: title; line-height: 1.25; }
	.bounds__item p  { grid-area: text; margin-top: clamp(.85rem, 1.2vw, 1.15rem); }

	/* --- 05 · на всю ширину, три частини в один рядок --- */
	.bounds__item:nth-child(5) {
		position: relative;
		grid-column: 1 / -1;
		grid-template-columns:
			minmax(110px, .18fr)
			minmax(280px, .75fr)
			minmax(0, 1.25fr);
		grid-template-areas: "num title text";
		align-items: start;
		column-gap: clamp(1rem, 2vw, 2.2rem);
		padding-inline-start: calc(var(--bounds-pad) + 22px);
	}

	.bounds__item:nth-child(5) p { margin-top: 0; }

	/* Коротка navy-вставка вздовж лівого краю — акцент, а не смуга прокрутки. */
	.bounds__item:nth-child(5)::after {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: 12px;
		background: var(--navy);
		border-start-start-radius: inherit;
		border-end-start-radius: inherit;
		pointer-events: none;
	}
}

/* ===========================================================================
   18 · 14 · МАРІЯ
   =========================================================================== */

.mariia__grid { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); margin-top: var(--sp-6); }

@media (min-width: 900px) {
	.mariia__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
}

/*
 * До 900px портрет стоїть над текстом. У повну ширину плашки 4:5 дає
 * 600+ px висоти й перетягує на себе всю секцію, тому ставимо стелю:
 * фото лишається головним об'єктом, але не витісняє текст за екран.
 */
@media (max-width: 899.98px) {
	.mariia__photo {
		max-inline-size: min(100%, 340px);
		margin-inline: 0;
	}
}

.mariia__photo {
	position: relative;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--navy-3);
	aspect-ratio: 4 / 5;
	display: grid;
	place-items: center;
	border: 1px solid var(--rule-dark);
}

.mariia__photo picture {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.mariia__photo img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

.mariia__role {
	margin-top: var(--sp-3);
	font-size: var(--fs-h4);
	font-weight: 500;
	color: var(--gold);
}

.mariia__text { margin-top: var(--sp-5); max-width: 62ch; color: var(--on-dark-2); font-size: var(--fs-small); line-height: 1.62; }
.mariia__text p + p { margin-top: 1em; }

.mariia__quals { margin-top: var(--sp-6); display: grid; gap: .5rem; }
.mariia__quals li { font-size: var(--fs-small); color: var(--on-dark-2); display: flex; gap: .7rem; align-items: baseline; }
.mariia__quals li::before { content: ""; inline-size: 12px; block-size: 1px; background: var(--gold); flex: none; translate: 0 -.3em; }

/* Desktop: фото 40% + біографія 60%; мобільна композиція лишається базовою. */
@media (min-width: 1024px) {
	.mariia__grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		column-gap: clamp(2.5rem, 4.5vw, 4.75rem);
		align-items: start;
	}

	.mariia__photo {
		border-radius: 21px;
		box-shadow: 0 18px 42px rgba(3, 10, 18, .18);
	}

	.mariia__text {
		margin-top: 0;
		max-width: none;
	}
}

/* ===========================================================================
   19 · 15 · ФОРМАТИ
   =========================================================================== */

.formats { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); margin-top: var(--sp-7); }

@media (min-width: 860px) { .formats { grid-template-columns: 1fr 1fr; } }

.format {
	position: relative;
	padding: clamp(1.3rem, 2.6vw, 2rem);
	border: 1px solid var(--rule-light);
	border-radius: var(--r-lg);
	background: #fff;
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.format--start { border-color: var(--clay); }

.format__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.format__name { font-size: var(--fs-h4); font-weight: 660; }

.format__badge {
	padding: .18rem .55rem;
	border-radius: var(--r-pill);
	background: var(--clay);
	color: var(--accent-on);
	font-size: .62rem;
	font-weight: 660;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.format p { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; }
.format strong { color: var(--ink); }
.format__fit { font-style: italic; color: var(--ink-3); font-size: var(--fs-micro); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--rule-light); }

.formats__cta { margin-top: var(--sp-5); }

/* Артефакти (2.1 / 3.4 / 3.6) */
.artifacts { margin-top: clamp(2.8rem, 6vw, 5rem); }

.artifacts__grid {
	display: grid;
	gap: clamp(1.6rem, 3.5vw, 2.8rem);
	margin-top: var(--sp-5);
	align-items: start;
}

@media (min-width: 1000px) {
	.artifacts__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.artifacts__table { border: 1px solid var(--rule-light); border-radius: var(--r-lg); overflow: hidden; background: #fff; }

.artifacts__table tr + tr { border-top: 1px solid var(--rule-light); }
.artifacts__table th,
.artifacts__table td { padding: clamp(.75rem, 1.8vw, 1.05rem) clamp(.85rem, 2vw, 1.3rem); text-align: start; vertical-align: top; font-size: var(--fs-small); line-height: 1.5; }
.artifacts__table th { inline-size: 34%; font-weight: 660; color: var(--ink); white-space: nowrap; }
.artifacts__table td { color: var(--ink-2); }

@media (max-width: 620px) {
	.artifacts__table th { inline-size: auto; white-space: normal; }
	.artifacts__table th, .artifacts__table td { display: block; }
	.artifacts__table td { padding-top: 0; }
}

/* Mental Map (3.4) */
.map-card {
	inline-size: min(100%, 30rem);
	padding: clamp(1.2rem, 2.6vw, 1.8rem);
	border: 1px solid var(--rule-light);
	border-radius: var(--r-md);
	background: linear-gradient(170deg, #fffdf8 0%, #f4f0e5 100%);
	box-shadow: var(--shadow-lift);
}

.map-card__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-bottom: .8rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule-light); }
.map-card__title { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.map-card dl { display: grid; gap: .8rem; }
.map-card dt { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 660; }
.map-card dd { margin: .15rem 0 0; font-size: .85rem; color: var(--ink); line-height: 1.42; }
.map-card__note { margin-top: 1rem; font-size: .72rem; color: var(--ink-3); line-height: 1.5; }

.pricing {
	margin-top: clamp(2.4rem, 5vw, 4rem);
	padding: clamp(1.3rem, 3vw, 2.2rem);
	border-radius: var(--r-lg);
	background: var(--paper-2);
	max-width: 74ch;
}

.pricing h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-4); }
.pricing p { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; }
.pricing p + p { margin-top: .9em; }
.pricing .btn-row { margin-top: var(--sp-5); }

/* ---------------------------------------------------------------------------
   Performance dossier — desktop-композиція «Що сім'я отримує на руки».

   Ширина рамки = контент-бокс .container, а він і є бокс .nav-shell:
     • до 1200px .nav-shell рахується з тих самих --container і --gutter
       (max-width: calc(var(--container) - 2rem) всередині .site-header
       з padding-inline: var(--gutter));
     • від 1200px .container несе спільний .container--shell (блок 02),
       який тягне його рівно між --desktop-nav-left-inset і
       --desktop-nav-right-inset.
   Власного max-width рамка не має.

   Нижче 1024px жодне з цих правил не діє: .artifacts__dossier лишається
   звичайним блоком, .artifacts__grid — своєю двоколонковою сіткою з 1000px,
   а .pricing — окремим блоком під нею, як і було.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.artifacts__dossier {
		--dossier-inset: clamp(8px, .75vw, 12px);

		display: grid;
		grid-template-columns: minmax(250px, 24%) minmax(0, 1fr);
		grid-template-areas:
			"rail document"
			"rail pricing";
		column-gap: var(--dossier-inset);
		row-gap: 0;

		margin-top: var(--sp-6);
		padding: var(--dossier-inset);
		background: var(--navy);
		border: 1px solid var(--navy-line);
		border-radius: var(--r-xl);
		overflow: hidden;
	}

	/* Обгортка більше не малює власну сітку — її діти стають комірками досьє. */
	.artifacts__grid { display: contents; }

	/* --- Ліва панель матеріалів --- */
	/* Панель проходить по всій висоті — і документа, і блоку вартості. */
	.artifacts__rail { grid-area: rail; }

	.artifacts__table {
		border: 0;
		border-radius: 0;
		background: transparent;
		overflow: visible;
	}

	/*
	 * Таблиця розкладається в стовпчик: назва над описом. Ролі проставлені
	 * в розмітці, тож семантика переживає зміну display.
	 */
	.artifacts__table tbody,
	.artifacts__table tr,
	.artifacts__table th,
	.artifacts__table td { display: block; }

	.artifacts__table tr {
		position: relative;
		border-radius: var(--r-sm);
		padding: clamp(.85rem, 1.15vw, 1.15rem) clamp(.9rem, 1.2vw, 1.25rem);
	}

	.artifacts__table tr + tr { border-top: 1px solid var(--rule-dark); }

	.artifacts__table th,
	.artifacts__table td {
		inline-size: auto;
		white-space: normal;
		padding: 0;
	}

	.artifacts__table th {
		font-size: var(--fs-small);
		font-weight: 660;
		color: var(--chalk);
	}

	.artifacts__table td {
		margin-top: .3rem;
		font-size: var(--fs-micro);
		color: var(--on-dark-3);
		line-height: 1.45;
	}

	/* Активний матеріал — лише візуальний стан, без перемикання й без JS. */
	.artifacts__table tr.is-active { background: var(--clay); }
	.artifacts__table tr.is-active + tr { border-top-color: transparent; }
	.artifacts__table tr.is-active th { color: var(--accent-on); }
	.artifacts__table tr.is-active td { color: rgba(253, 249, 241, .82); }

	/* Короткий покажчик у бік документа — рівно в ширину міжколонкового поля. */
	.artifacts__table tr.is-active::after {
		content: "";
		position: absolute;
		inset-inline-end: calc(-1 * var(--dossier-inset));
		inset-block-start: 50%;
		translate: 0 -50%;
		inline-size: 0;
		block-size: 0;
		border-block: 9px solid transparent;
		border-inline-start: var(--dossier-inset) solid var(--clay);
	}

	/* --- Документ Mental Map --- */
	.map-card {
		grid-area: document;
		inline-size: auto;
		padding: clamp(32px, 4vw, 56px);
		border: 0;
		border-radius: var(--r-lg) var(--r-lg) 0 0;
		background: var(--paper);
		box-shadow: none;
	}

	.map-card__head {
		padding-bottom: clamp(1rem, 1.4vw, 1.4rem);
		margin-bottom: clamp(1.2rem, 1.8vw, 1.8rem);
	}

	.map-card__title {
		font-size: clamp(1rem, 1.25vw, 1.35rem);
		letter-spacing: .14em;
	}

	.map-card .example-tag { font-size: .72rem; padding: .35rem .85rem; }

	.map-card dl { gap: 0; }

	/* Тонкі розділювачі між змістовими блоками документа. */
	.map-card dl > div {
		padding-block: clamp(.9rem, 1.3vw, 1.25rem);
	}
	.map-card dl > div + div { border-top: 1px dashed var(--rule-light); }

	.map-card dt { font-size: .72rem; letter-spacing: .14em; }

	.map-card dd {
		margin-top: .55rem;
		font-size: var(--fs-small);
		line-height: 1.5;
	}

	.map-card__note {
		margin-top: 0;
		padding-top: clamp(.9rem, 1.3vw, 1.25rem);
		border-top: 1px dashed var(--rule-light);
		font-size: var(--fs-micro);
	}

	/* --- Вартість: та сама кремова площина, відділена тонкою межею --- */
	.pricing {
		grid-area: pricing;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(15rem, auto);
		column-gap: clamp(1.5rem, 3vw, 3rem);
		align-items: center;

		margin-top: 0;
		max-width: none;
		padding: clamp(1.8rem, 2.6vw, 2.6rem) clamp(32px, 4vw, 56px);
		border-top: 1px solid var(--rule-light);
		border-radius: 0 0 var(--r-lg) var(--r-lg);
		background: var(--paper-2);
	}

	.pricing h3,
	.pricing > p { grid-column: 1; }

	.pricing .btn-row {
		grid-column: 2;
		grid-row: 1 / span 3;
		flex-direction: column;
		align-items: stretch;
		margin-top: 0;
	}

	/* Обидві кнопки однакової ширини — колонка задає її обом. */
	.pricing .btn-row .btn { justify-content: center; }
}

/*
 * Вужчий desktop: на 1024–1199px права колонка вже, і текст вартості
 * стискався б у надто вузький стовпчик. Тут кнопки йдуть рядком під
 * текстом — так само однакової ширини.
 */
@media (min-width: 1024px) and (max-width: 1199.98px) {
	.pricing { grid-template-columns: minmax(0, 1fr); }

	/* Група лишається вертикальною, але переїжджає під текст і не розтягується. */
	.pricing .btn-row {
		grid-column: 1;
		grid-row: auto;
		margin-top: var(--sp-5);
		inline-size: min(100%, 22rem);
	}
}

/* ===========================================================================
   20 · 16 · КЕЙСИ
   =========================================================================== */

.cases { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); margin-top: var(--sp-7); }

@media (min-width: 980px) { .cases { grid-template-columns: 1fr 1fr; } }

@media (min-width: 1024px) {
	.cases-section { container-type: inline-size; }

	.cases-section > .container {
		--cases-shell-left: var(--desktop-nav-left-inset, var(--gutter));
		--cases-shell-right: var(--desktop-nav-right-inset, var(--gutter));

		width: auto;
		max-width: none;
		margin-inline-start: var(--cases-shell-left);
		margin-inline-end: var(--cases-shell-right);
		padding-inline: 0;
		display: grid;
		justify-items: center;
	}

	.cases-section__inner {
		--cases-original-width: calc(
			min(
				calc(100% + var(--cases-shell-left) + var(--cases-shell-right) + 2px),
				var(--container)
			)
			- 2px
		);

		width: var(--cases-original-width);
		padding-inline: var(--gutter);
		position: relative;
		inset-inline-start: 0;
		inset-inline-start: calc(
			(
				max(calc(var(--gutter) + .52rem), calc(50cqw - 40.9rem))
				- calc(max(var(--gutter), calc(50cqw - 640px)) - var(--desktop-wordmark-outset))
			) / 2
			+ var(--desktop-nav-left-inset) - var(--desktop-nav-left-inset)
		);
	}
}

.case {
	padding: clamp(1.4rem, 3vw, 2.2rem);
	border: 1px solid var(--rule-dark);
	border-radius: var(--r-lg);
	background: rgba(19, 28, 38, .92);
	display: grid;
	gap: var(--sp-4);
	align-content: start;
}

.case__tag {
	font-size: .64rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 660;
}

.case__block h4 { font-size: var(--fs-small); font-weight: 660; color: var(--chalk); margin-bottom: .35rem; }
.case__block p  { font-size: var(--fs-small); color: var(--on-dark-2); line-height: 1.55; }
.case__block ul { display: grid; gap: .4rem; margin-top: .5rem; }
.case__block li { font-size: var(--fs-small); color: var(--on-dark-2); display: flex; gap: .6rem; align-items: baseline; }
.case__block li::before { content: ""; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--clay-soft); flex: none; translate: 0 -.25em; }
.case__block strong { color: var(--chalk); }

.case__chain {
	font-size: var(--fs-h4);
	font-weight: 620;
	color: var(--gold-soft);
	letter-spacing: -.01em;
	padding-block: .3rem;
}

.cases__principle {
	margin-top: var(--sp-6);
	font-size: var(--fs-small);
	font-style: italic;
	color: var(--on-dark-3);
	max-width: 74ch;
	line-height: 1.6;
}

/* ===========================================================================
   21 · 17 · БАТЬКИ
   =========================================================================== */

/*
 * Вступні абзаци переїхали з .section__head у ліву колонку (десктопу
 * потрібен заголовок на всю ширину над обома колонками). Ці два відступи
 * компенсують переїзд, щоб мобільний ритм лишився байт-у-байт тим самим:
 * h2 → вступ = 24px, вступ → список = 56px, як і було.
 */
.parents__grid { display: grid; gap: clamp(1.8rem, 4vw, 3.2rem); margin-top: 0; }

@media (min-width: 940px) { .parents__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; } }

/*
 * Тези пронумеровані на всіх ширинах. Це та сама композиція, що на десктопі
 * (номер · вертикальна лінія · текст), тільки з вужчою колонкою номера —
 * лічильник і селектори свідомо ті самі, щоб стан не розходився.
 */
.parents__theses {
	display: grid;
	gap: 0;
	margin-top: calc(var(--sp-6) + var(--sp-5));
	counter-reset: msa-parents;
}

.parents__theses li {
	counter-increment: msa-parents;
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
	padding-block: clamp(.7rem, 2.2vw, 1rem);
	border-top: 1px solid var(--rule-light);
	font-size: var(--fs-small);
	color: var(--ink-2);
	line-height: 1.5;
}

/* Замикальна лінія списку — лише там, де під ним немає десктопної колонки. */
@media (max-width: 1023.98px) {
	.parents__theses li:last-child { border-bottom: 1px solid var(--rule-light); }
}

.parents__theses li::before {
	grid-area: 1 / 1;
	content: counter(msa-parents, decimal-leading-zero);
	align-self: center;
	font-size: 1.05rem;
	font-weight: 660;
	letter-spacing: -.01em;
	color: var(--clay);
	font-variant-numeric: tabular-nums;
}

.parents__theses li::after {
	grid-area: 1 / 2;
	content: "";
	inline-size: 1px;
	align-self: stretch;
	margin-block: .15rem;
	margin-inline: clamp(.7rem, 2.6vw, 1.1rem);
	background: var(--clay);
	opacity: .55;
}

.parents__theses li > span { grid-area: 1 / 3; align-self: center; }
.parents__theses strong { color: var(--ink); }

.parents__panel {
	padding: clamp(1.3rem, 2.8vw, 2rem);
	border: 1px solid var(--rule-light);
	border-radius: var(--r-lg);
	background: #fff;
}

.parents__panel + .parents__panel { margin-top: var(--sp-5); }
.parents__panel h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-4); }
.parents__panel p { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.55; }
.parents__panel p + p { margin-top: .8em; }
.parents__panel ul { display: grid; gap: .45rem; margin-bottom: var(--sp-4); }
.parents__panel li { font-size: var(--fs-small); color: var(--ink-2); display: flex; gap: .7rem; align-items: baseline; }
.parents__panel li::before { content: ""; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--clay); flex: none; translate: 0 -.25em; }

.coach-quote {
	margin: var(--sp-4) 0;
	padding: clamp(.9rem, 2vw, 1.3rem);
	border-radius: var(--r-md);
	background: var(--paper-2);
	border-left: 2px solid var(--clay);
	font-size: var(--fs-small);
	color: var(--ink);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   Desktop-композиція 17: заголовок на всю ширину + дві колонки під ним.

   Ширина секції = контент-бокс .container, а він і є бокс .nav-shell:
     • до 1200px .nav-shell рахується з тих самих --container і --gutter
       (max-width: calc(var(--container) - 2rem) всередині .site-header
       з padding-inline: var(--gutter));
     • від 1200px .container несе спільний .container--shell (блок 02),
       який тягне його рівно між --desktop-nav-left-inset і
       --desktop-nav-right-inset.
   Власного max-width секція не має — заголовок, сітка й кнопки лежать
   в одному й тому самому контейнері.
   --------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.parents > .container {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr);
		grid-template-areas:
			"head head"
			"main aside";
		column-gap: clamp(32px, 5vw, 80px);
		row-gap: clamp(28px, 3vw, 44px);
		align-items: start;
	}

	.parents .section__head { grid-area: head; max-width: none; }

	/*
	 * Один рядок на всю ширину. Гарнітура дає ширину рядка ≈ 20 × кегль
	 * (Inter 620, letter-spacing -.045em), тож розмір підібраний так, щоб
	 * текст займав ≈94% контейнера: 44px при 1024 (880 з 941), 54.5px при
	 * 1280 (1090 з 1184) і 61px від 1440 (1220 з 1303). Стеля 61px — далі
	 * контейнер уже не росте, він упирається в інсети .nav-shell.
	 */
	#parents-title {
		font-size: clamp(44px, 2px + 4.1vw, 61px);
		line-height: .98;
		letter-spacing: -.045em;
		white-space: nowrap;
	}

	/* Сітка-обгортка більше не малює власну сітку — колонки задає контейнер. */
	.parents__grid { display: contents; }

	.parents__main  { grid-area: main; }
	.parents__aside { grid-area: aside; }

	/* --- Ліва колонка --- */
	.parents__main > .rich { margin-top: 0; }

	/* Список 01–07. Номери рахує CSS — у розмітку текст не додається. */
	.parents__theses {
		counter-reset: msa-parents;
		gap: 0;
		margin-top: clamp(28px, 3vw, 44px);
	}

	.parents__theses li {
		counter-increment: msa-parents;
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr);
		align-items: center;
		gap: 0;
		padding-block: clamp(.7rem, 1.1vw, 1rem);
		border-top: 1px solid var(--rule-light);
	}

	.parents__theses li::before {
		grid-area: 1 / 1;
		content: counter(msa-parents, decimal-leading-zero);
		inline-size: auto;
		block-size: auto;
		background: none;
		translate: none;
		font-size: clamp(1.15rem, 1.5vw, 1.55rem);
		font-weight: 660;
		letter-spacing: -.01em;
		color: var(--clay);
		font-variant-numeric: tabular-nums;
	}

	/* Коротка вертикальна риска між номером і текстом. */
	.parents__theses li::after {
		grid-area: 1 / 2;
		content: "";
		inline-size: 1px;
		align-self: stretch;
		margin-block: .15rem;
		margin-inline: clamp(.9rem, 1.4vw, 1.3rem);
		background: var(--clay);
		opacity: .55;
	}

	.parents__theses li > span { grid-area: 1 / 3; }

	/* --- Маніфест --- */
	.parents__main .key-line {
		--key-pad-y: clamp(1.1rem, 1.8vw, 1.6rem);
		--key-pad-x: clamp(1.2rem, 2vw, 1.8rem);

		position: relative;
		margin-top: clamp(28px, 3vw, 44px);
		padding: var(--key-pad-y) var(--key-pad-x);
		padding-left: calc(var(--key-pad-x) + 1.15rem);
		border: 1px solid rgba(176, 90, 60, .4);
		border-radius: var(--r-lg);
		background: rgba(176, 90, 60, .05);
	}

	/* Вертикальна риска всередині, а не замість рамки. */
	.parents__main .key-line::before {
		content: "";
		position: absolute;
		top: var(--key-pad-y);
		bottom: var(--key-pad-y);
		left: var(--key-pad-x);
		width: 2px;
		background: var(--clay);
	}

	/* Кнопки лежать просто на фоні секції — жодної рамки чи плашки навколо. */
	.parents__main .btn-row { margin-top: clamp(24px, 2.4vw, 34px); }

	/* --- Права панель: дві частини в одній картці --- */
	.parents__aside {
		padding: clamp(1.5rem, 2.4vw, 2.2rem);
		border: 1px solid rgba(176, 90, 60, .38);
		border-radius: var(--r-lg);
		background: #fff;
	}

	.parents__aside .parents__panel {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.parents__aside .parents__panel + .parents__panel {
		margin-top: clamp(1.4rem, 2.2vw, 2rem);
		padding-top: clamp(1.4rem, 2.2vw, 2rem);
		border-top: 1px solid rgba(176, 90, 60, .3);
	}

	.parents__aside .parents__panel ul {
		gap: .6rem;
		margin-top: .7rem;
	}

	/* Пункти — короткі теракотові риски. */
	.parents__aside .parents__panel li::before {
		inline-size: 10px;
		block-size: 1px;
		border-radius: 0;
		translate: 0 -.3em;
	}

	/* Цитата — світла inset-плашка, а не бічна лінійка. */
	.parents__aside .coach-quote {
		padding: clamp(.9rem, 1.4vw, 1.15rem) clamp(1rem, 1.6vw, 1.3rem);
		border: 1px solid rgba(176, 90, 60, .35);
		border-radius: var(--r-md);
		background: rgba(176, 90, 60, .05);
	}
}

/* ===========================================================================
   22 · 18 · LEAD MAGNET
   =========================================================================== */

.magnet {
	background: transparent;          /* кадр видно навколо scrim-картки */
}

@media (min-width: 1024px) {
	.magnet > .container {
		width: auto;
		max-width: none;
		margin-inline-start: var(--desktop-nav-left-inset, var(--gutter));
		margin-inline-end: var(--desktop-nav-right-inset, var(--gutter));
	}
}

.magnet__grid { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start; }

@media (min-width: 900px) { .magnet__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); } }

.magnet__list { display: grid; gap: .55rem; margin-top: var(--sp-5); }
.magnet__list li { font-size: var(--fs-small); color: var(--on-dark-2); display: flex; gap: .7rem; align-items: baseline; }
.magnet__list li::before { content: ""; inline-size: 12px; block-size: 1px; background: var(--gold); flex: none; translate: 0 -.3em; }

.magnet__form {
	padding: clamp(1.4rem, 3vw, 2.2rem);
	border: 1px solid var(--rule-dark);
	border-radius: var(--r-lg);
	background: rgba(19, 28, 38, .95);
}

.magnet__form .field + .field { margin-top: var(--sp-4); }
.magnet__form .btn-row { margin-top: var(--sp-5); }
.magnet__form .form-note { margin-top: var(--sp-4); }

/* ---------------------------------------------------------------------------
   Contact Form 7 у блоці lead magnet.

   Розмітку задає плагін (форма «Чек-лист для батьків»), тут вона приводиться
   до вигляду .dark-form: ті самі поля, відступи, окантовка й кнопка, що були
   в попередній ручній формі. wpcf7_autop додає власні <p> і <br> —
   їх гасимо, інакше з'являються зайві порожні рядки.
   --------------------------------------------------------------------------- */

.magnet__form .wpcf7,
.magnet__form .wpcf7-form { margin: 0; }

.magnet__form .msa-checklist-form p { margin: 0; }
.magnet__form .msa-checklist-form br { display: none; }

.magnet__form .msa-checklist-field + .msa-checklist-field { margin-top: var(--sp-4); }

.magnet__form .msa-checklist-field label {
	display: block;
	font-size: var(--fs-micro);
	font-weight: 620;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--on-dark-3);
	margin-bottom: .38rem;
}

.magnet__form .msa-checklist-optional {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: .8;
}

/* CF7 обгортає контрол у <span> — робимо його блоком, щоб інпут був на всю ширину. */
.magnet__form .wpcf7-form-control-wrap { display: block; }

.magnet__form .msa-checklist-input {
	width: 100%;
	padding: .78rem .95rem;
	min-height: 46px;
	border: 1px solid var(--rule-dark);
	border-radius: var(--r-sm);
	background: rgba(236, 231, 217, .06);
	color: var(--on-dark);
	transition: border-color var(--dur-fast) var(--ease-out);
}

.magnet__form .msa-checklist-input:hover { border-color: color-mix(in srgb, var(--clay) 45%, transparent); }
.magnet__form .msa-checklist-input::placeholder { color: var(--on-dark-3); opacity: .8; }

/* Кнопка — ті самі значення, що й у .btn. */
.magnet__form .msa-checklist-actions { margin-top: var(--sp-5); }

.magnet__form .msa-checklist-actions > p:first-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3) var(--sp-4);
}

.magnet__form .msa-checklist-submit {
	display: inline-block;
	padding: .82rem 1.4rem;
	min-height: 46px;
	border: 1px solid var(--clay);
	border-radius: var(--r-pill);
	background: var(--clay);
	color: var(--accent-on);
	font-size: var(--fs-small);
	font-weight: 620;
	line-height: 1.2;
	letter-spacing: -.005em;
	text-align: center;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out),
	            border-color var(--dur-fast) var(--ease-out),
	            transform var(--dur-fast) var(--ease-out);
}

.magnet__form .msa-checklist-submit:hover { background: var(--clay-deep); border-color: var(--clay-deep); }
.magnet__form .msa-checklist-submit:active { transform: translateY(1px); }

/* Під час відправки кнопка вимкнена (див. inline-скрипт у functions.php):
   ширина й текст не змінюються, лише курсор і легке приглушення. */
.magnet__form .msa-checklist-submit:disabled {
	transform: none;
	opacity: .62;
	background: var(--clay);
	border-color: var(--clay);
}

.magnet__form .msa-checklist-form p.msa-checklist-privacy {
	margin-top: var(--sp-4);
	font-size: var(--fs-micro);
	color: var(--on-dark-3);
	line-height: 1.5;
}

/* Штатний spinner CF7 — та сама анімація, кольори під темну панель.
   Поза відправкою прибираємо з потоку, щоб він не займав місце в рядку кнопки. */
.magnet__form .wpcf7-spinner {
	display: none;
	margin: 0;
	background-color: rgba(236, 231, 217, .26);
	opacity: 1;
}

.magnet__form form.submitting .wpcf7-spinner {
	display: inline-block;
	visibility: visible;
}

.magnet__form .wpcf7-spinner::before { background-color: var(--chalk); }

/* Помилка поля: акуратна помаранчева окантовка без зміни розмірів інпута. */
.magnet__form .msa-checklist-input.wpcf7-not-valid,
.magnet__form .msa-checklist-input.wpcf7-not-valid:hover {
	border-color: var(--clay);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--clay) 38%, transparent);
}

.magnet__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: .35rem;
	font-size: var(--fs-micro);
	font-weight: 400;
	line-height: 1.4;
	color: var(--clay-soft);
	overflow-wrap: anywhere;
}

/* Підсумкове повідомлення — вигляд колишнього .form-status, під кнопкою.
   Стани init / resetting / submitting плагін ховає сам. */
.magnet__form .wpcf7 form .wpcf7-response-output {
	margin: var(--sp-4) 0 0;
	padding: .8rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	font-size: var(--fs-small);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.magnet__form .wpcf7 form.sent .wpcf7-response-output {
	background: rgba(66, 122, 84, .12);
	border-color: rgba(66, 122, 84, .45);
	color: #a8d8ba;
}

.magnet__form .wpcf7 form.invalid .wpcf7-response-output,
.magnet__form .wpcf7 form.unaccepted .wpcf7-response-output,
.magnet__form .wpcf7 form.failed .wpcf7-response-output,
.magnet__form .wpcf7 form.aborted .wpcf7-response-output,
.magnet__form .wpcf7 form.spam .wpcf7-response-output,
.magnet__form .wpcf7 form.payment-required .wpcf7-response-output {
	background: rgba(176, 90, 60, .12);
	border-color: rgba(176, 90, 60, .5);
	color: #e8a48a;
}

.magnet__form .wpcf7-form-control:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ===========================================================================
   23 · 19 · FAQ
   =========================================================================== */

.faq__list { margin-top: var(--sp-7); border-top: 1px solid var(--rule-light); max-width: 84ch; }

.faq__item { border-bottom: 1px solid var(--rule-light); }

.faq__q {
	inline-size: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1rem, 2.2vw, 1.4rem) 0;
	min-height: 46px;
	background: none;
	border: 0;
	text-align: start;
	cursor: pointer;
	font-size: var(--fs-body);
	font-weight: 620;
	line-height: 1.4;
	letter-spacing: -.012em;
	color: var(--ink);
}

.faq__q:hover { color: var(--clay-deep); }

.faq__icon {
	position: relative;
	inline-size: 1.05rem;
	block-size: 1.05rem;
	flex: none;
	margin-top: .28em;
}

.faq__icon::before,
.faq__icon::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 1.5px;
	background: var(--clay);
	translate: 0 -50%;
	transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-mid) var(--ease-out);
}
.faq__icon::after { transform: rotate(90deg); }

.faq__q[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); opacity: 0; }

.faq__a {
	overflow: hidden;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--dur-mid) var(--ease-out);
}

/*
 * Кнопка живе всередині <h3>, тому сусідній селектор тут не працює —
 * стан читаємо з предка.
 */
.faq__item:has(.faq__q[aria-expanded="true"]) .faq__a { grid-template-rows: 1fr; }

.faq__a > div { min-block-size: 0; }

.faq__a p {
	padding-bottom: clamp(1rem, 2.2vw, 1.4rem);
	font-size: var(--fs-small);
	color: var(--ink-2);
	line-height: 1.62;
	max-width: 72ch;
}

/* Без JS акордеон залишається розкритим — контент доступний завжди */
.no-js .faq__a { grid-template-rows: 1fr; }
.no-js .faq__icon { display: none; }

/* ---------------------------------------------------------------------------
   19 · Адаптивна композиція до 1199px.

   Desktop (від 1200px) ставить sticky-вступ ліворуч і панель праворуч.
   Нижче обидві частини йдуть одна під одною, але дизайн-мова та сама:
   велика типографіка, тонка теракотова лінія, лічильник «01 / NN» і одна
   світла картка з номерами, круглими кнопками та делікатними розділювачами.
   --------------------------------------------------------------------------- */

/* Лічильник вмикається в кожному діапазоні окремо. */
.faq__counter { display: none; }

@media (max-width: 1199.98px) {

	/* --- Вступний блок ------------------------------------------------ */

	.faq .section__head { max-width: none; }

	.faq .section__head .eyebrow { margin-block-end: clamp(1.1rem, 3.6vw, 1.6rem); }

	.faq .section__head h2 {
		font-size: clamp(42px, 12vw, 56px);
		line-height: .96;
		letter-spacing: -.05em;
		/*
		 * Два рядки на мобільному робить не <br>, а межа рядка: 8ch вужче
		 * за «Часті питання» і ширше за найдовше слово «питання», тож розрив
		 * завжди падає між словами і не залежить від viewport.
		 */
		max-inline-size: 8ch;
	}

	/* Верхня межа лічильника і є та сама тонка теракотова лінія під заголовком. */
	.faq__counter {
		display: flex;
		align-items: baseline;
		gap: .42rem;
		margin-block-start: clamp(1.3rem, 4.4vw, 1.9rem);
		padding-block-start: clamp(.9rem, 3vw, 1.3rem);
		border-top: 1px solid rgba(176, 90, 60, .38);
		max-inline-size: 12rem;
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	.faq__counter-now   { font-size: clamp(34px, 9vw, 40px);   font-weight: 300; letter-spacing: -.03em; color: var(--clay); }
	.faq__counter-sep   { font-size: clamp(19px, 5vw, 23px);   font-weight: 300; color: rgba(176, 90, 60, .35); }
	.faq__counter-total { font-size: clamp(23px, 6.1vw, 28px); font-weight: 300; letter-spacing: -.03em; color: rgba(176, 90, 60, .5); }

	/* --- Одна світла картка на весь акордеон -------------------------- */

	.faq__list {
		--faq-num: 24px;
		--faq-gap: 12px;
		--faq-btn: 44px;

		margin-block-start: clamp(1.6rem, 6vw, 2.4rem);
		max-width: none;
		padding-inline: clamp(14px, 4vw, 18px);
		padding-block: 2px;
		border: 1px solid var(--rule-light);
		border-radius: 20px;
		background: #fff;
		box-shadow: var(--shadow-card);
		counter-reset: msa-faq;
	}

	.faq__item { counter-increment: msa-faq; }

	/* Останній рядок не малює зайву межу — її роль бере рамка картки. */
	.faq__item:last-child { border-bottom: 0; }

	/* --- Рядок: номер | питання | кругла кнопка ----------------------- */

	.faq__q {
		display: grid;
		grid-template-columns: var(--faq-num) minmax(0, 1fr) var(--faq-btn);
		column-gap: var(--faq-gap);
		gap: var(--faq-gap);
		align-items: start;
		padding-block: 16px;
		padding-inline: 0;
		min-height: 44px;
		font-size: clamp(16px, 4.2vw, 17px);
		line-height: 1.34;
	}

	/* Номер малює CSS — у розмітку не додано жодного символу. */
	.faq__q::before {
		content: counter(msa-faq, decimal-leading-zero);
		font-size: 11.5px;
		font-weight: 680;
		letter-spacing: .04em;
		line-height: 1;
		/* Оптичне вирівнювання по верхньому рядку питання. */
		margin-block-start: .34em;
		color: var(--clay);
		font-variant-numeric: tabular-nums;
	}

	/* --- Кругла кнопка «плюс» ----------------------------------------- */

	.faq__icon {
		inline-size: 40px;
		block-size: 40px;
		margin-block-start: 0;
		justify-self: end;
		border: 1px solid rgba(176, 90, 60, .45);
		border-radius: 50%;
		transition: border-color var(--dur-fast) var(--ease-out);
	}

	.faq__q:hover .faq__icon { border-color: var(--clay); }

	.faq__icon::before,
	.faq__icon::after {
		inset-inline-start: 50%;
		inline-size: 13px;
		translate: -50% -50%;
	}

	/* --- Відкрита відповідь: по осі тексту питання, не номера ---------- */

	.faq__a { padding-inline-start: calc(var(--faq-num) + var(--faq-gap)); }

	.faq__a p {
		/* Відступ згори дає нижній padding самого рядка запитання. */
		padding-block-start: 0;
		padding-block-end: 16px;
		font-size: clamp(15px, 3.9vw, 16px);
		line-height: 1.6;
	}
}

/* ---------------------------------------------------------------------------
   19 · Планшет 768—1199px.

   Той самий вертикальний порядок, але вступ уже витримує двоколонкову
   композицію: маркер на всю ширину, великий заголовок ліворуч, лічильник
   праворуч біля нижньої осі заголовка. Картка й рядки — просторіші.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199.98px) {

	.faq .section__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: clamp(24px, 4vw, 56px);
		align-items: end;
	}

	.faq .section__head .eyebrow { grid-column: 1 / -1; }

	.faq .section__head h2 {
		grid-column: 1;
		margin: 0;
		font-size: clamp(60px, 8vw, 84px);
		line-height: .94;
		letter-spacing: -.055em;
		/* Один рядок: обмеження ширини з мобільного тут зайве. */
		max-inline-size: none;
	}

	.faq__counter {
		grid-column: 2;
		justify-self: end;
		margin-block-start: 0;
		padding-block-start: clamp(.9rem, 1.6vw, 1.3rem);
		min-inline-size: 9rem;
		max-inline-size: none;
	}

	.faq__counter-now   { font-size: clamp(40px, 4.4vw, 50px); }
	.faq__counter-sep   { font-size: clamp(23px, 2.5vw, 28px); }
	.faq__counter-total { font-size: clamp(28px, 3.1vw, 35px); }

	.faq__list {
		--faq-num: 44px;
		--faq-gap: 20px;
		--faq-btn: 52px;

		margin-block-start: clamp(2.2rem, 4.4vw, 3.2rem);
		padding-inline: clamp(20px, 3vw, 34px);
		padding-block: 4px;
		border-radius: clamp(24px, 3vw, 30px);
	}

	.faq__q {
		align-items: center;
		padding-block: clamp(20px, 2.6vw, 26px);
		font-size: clamp(17px, 1.9vw, 19px);
		line-height: 1.38;
	}

	.faq__q::before {
		font-size: var(--fs-small);
		letter-spacing: .02em;
		line-height: 1;
		margin-block-start: 0;
	}

	.faq__icon { inline-size: 46px; block-size: 46px; }

	.faq__icon::before,
	.faq__icon::after { inline-size: 14px; }

	.faq__a { padding-inline-end: calc(var(--faq-btn) + var(--faq-gap)); }

	.faq__a p {
		padding-block-end: clamp(20px, 2.6vw, 26px);
		font-size: clamp(16px, 1.6vw, 17px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.faq__a,
	.faq__icon,
	.faq__icon::before,
	.faq__icon::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   Desktop-композиція 19: sticky-колонка ліворуч + одна світла панель FAQ.

   Ширина = контент-бокс .container, а він і є бокс .nav-shell:
     • до 1200px .nav-shell рахується з тих самих --container і --gutter
       (max-width: calc(var(--container) - 2rem) всередині .site-header
       з padding-inline: var(--gutter));
     • від 1200px .container несе спільний .container--shell (блок 02),
       який тягне його між --desktop-nav-left-inset і --desktop-nav-right-inset.
   Обидві колонки — прямі діти цього контейнера, вужчої обгортки немає.

   Поріг — 1200px, бо саме з нього працює .container--shell і плашка меню.
   Нижче (768—1199px) FAQ має власну планшетну композицію в одну колонку.
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
	.faq > .container {
		/*
		 * Плашка меню фіксована; заміряна висота — 66.7px (1024), 68.0px (1280),
		 * 68.5px (1440). Беремо стелю плюс --sp-5 повітря, щоб sticky-колонка
		 * ніколи не підлазила під меню.
		 */
		--faq-sticky-top: calc(69px + var(--sp-5));

		display: grid;
		/*
		 * Ліва колонка — 30% контейнера, права забирає весь залишок.
		 * Пара дробових треків тут не годиться: .3fr/.7fr лишає мертву зону
		 * праворуч, коли ліва впирається в мінімум 280px, а .3fr/1fr навпаки
		 * стискає ліву до цього мінімуму. Відсоток + 1fr тримає й пропорцію,
		 * і повне заповнення на всіх desktop-ширинах.
		 */
		grid-template-columns: minmax(280px, 30%) minmax(0, 1fr);
		column-gap: clamp(32px, 5vw, 72px);
		align-items: start;
	}

	/* --- Ліва sticky-колонка --- */
	.faq .section__head {
		position: sticky;
		inset-block-start: var(--faq-sticky-top);
		max-width: none;
	}

	.faq .section__head h2 {
		font-size: clamp(58px, 6vw, 90px);
		line-height: .92;
		letter-spacing: -.055em;
	}

	.faq__counter {
		display: flex;
		align-items: baseline;
		gap: .5rem;
		max-inline-size: 82%;
		margin-top: clamp(1.6rem, 2.4vw, 2.4rem);
		padding-top: clamp(1.2rem, 1.8vw, 1.8rem);
		border-top: 1px solid rgba(176, 90, 60, .38);
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	.faq__counter-now {
		font-size: clamp(2.2rem, 2.8vw, 3.1rem);
		font-weight: 300;
		letter-spacing: -.03em;
		color: var(--clay);
	}

	.faq__counter-sep {
		font-size: clamp(1.4rem, 1.8vw, 1.9rem);
		font-weight: 300;
		color: rgba(176, 90, 60, .35);
	}

	.faq__counter-total {
		font-size: clamp(1.7rem, 2.1vw, 2.3rem);
		font-weight: 300;
		letter-spacing: -.03em;
		color: rgba(176, 90, 60, .5);
	}

	/* --- Права панель --- */
	.faq__list {
		--faq-num: 52px;
		--faq-gap: 24px;
		--faq-btn: 56px;

		margin-top: 0;
		max-width: none;
		padding: clamp(1rem, 1.6vw, 1.5rem) clamp(1.6rem, 2.6vw, 2.4rem);
		border: 1px solid var(--rule-light);
		border-radius: clamp(26px, 2.2vw, 32px);
		background: #fff;
		box-shadow: var(--shadow-card);
		overflow: hidden;
		counter-reset: msa-faq;
	}

	.faq__item { counter-increment: msa-faq; }

	/* Останній рядок не малює зайву межу — її роль бере рамка панелі. */
	.faq__item:last-child { border-bottom: 0; }

	/* --- Рядок акордеона --- */
	.faq__q {
		display: grid;
		grid-template-columns: var(--faq-num) minmax(0, 1fr) var(--faq-btn);
		column-gap: var(--faq-gap);
		align-items: center;
		gap: var(--faq-gap);
		padding-block: clamp(1.1rem, 1.6vw, 1.5rem);
	}

	/* Номер малює CSS — у розмітку не додано жодного символу. */
	.faq__q::before {
		content: counter(msa-faq, decimal-leading-zero);
		font-size: var(--fs-small);
		font-weight: 620;
		letter-spacing: .02em;
		color: var(--clay);
		font-variant-numeric: tabular-nums;
	}

	/* --- Кругла кнопка «плюс» --- */
	.faq__icon {
		inline-size: 44px;
		block-size: 44px;
		margin-top: 0;
		justify-self: end;
		border: 1px solid rgba(176, 90, 60, .45);
		border-radius: 50%;
		transition: border-color var(--dur-fast) var(--ease-out);
	}

	.faq__q:hover .faq__icon { border-color: var(--clay); }

	.faq__icon::before,
	.faq__icon::after {
		inset-inline-start: 50%;
		inline-size: 14px;
		translate: -50% -50%;
		transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
	}

	/* --- Відкрита відповідь: по лівому краю запитання, не номера --- */
	.faq__a {
		padding-inline-start: calc(var(--faq-num) + var(--faq-gap));
		padding-inline-end: calc(var(--faq-btn) + var(--faq-gap));
	}
}

/* ===========================================================================
   24 · 20 · ФІНАЛЬНИЙ CTA — cinematic overlay
   =========================================================================== */

.final-cta {
	min-block-size: 100svh;
	display: grid;
	align-content: center;
	background: transparent;
}

.final-cta__inner { max-width: none; }

/* Дрібний eyebrow поверх відкритого кадру потребує власної підкладки. */
.final-cta .eyebrow,
.hero .eyebrow { text-shadow: 0 1px 14px rgba(9, 13, 18, .95), 0 0 30px rgba(9, 13, 18, .8); }

.final-cta__title {
	/* ch рахується від власного кегля заголовка, а не від базового тексту. */
	max-width: 24ch;
	font-size: clamp(1.9rem, 1.2rem + 3.3vw, 4.2rem);
	line-height: 1.06;
	letter-spacing: -.028em;
	font-weight: 620;
	color: var(--chalk);
	text-shadow: 0 2px 40px rgba(9, 13, 18, .7);
}

.final-cta__sub {
	margin-top: var(--sp-4);
	max-width: 24ch;
	font-size: clamp(1.05rem, .9rem + .95vw, 1.8rem);
	font-weight: 400;
	color: var(--gold-soft);
	line-height: 1.3;
	text-shadow: 0 1px 24px rgba(9, 13, 18, .8);
}

.final-cta__text {
	margin-top: var(--sp-5);
	max-width: 48ch;
	color: var(--on-dark-2);
	font-size: var(--fs-small);
	line-height: 1.6;
	text-shadow: 0 1px 20px rgba(9, 13, 18, .8);
}

.final-cta__cta { margin-top: var(--sp-6); }

/*
 * На десктопі текстовий блок іде вправо: у фінальному кадрі спортсмен стоїть
 * ліворуч, і копія більше його не перекриває. Ширина колонки підібрана так,
 * щоб заголовок лишився в трьох рядках. На вузьких екранах усе як було.
 */
@media (min-width: 900px) {
	.final-cta__inner {
		max-width: 48rem;
		margin-inline-start: auto;
	}
}

/*
 * Десктопна композиція «матч-поінт».
 *
 * Текст живе в правій частині кадру: ліворуч лишається чисте поле під
 * спортсмена. Колонка рахується відсотком від ширини шелу, а не від
 * координат конкретного кадру, тому геометрія тримається на 1280—1920 px.
 *
 * Правий край синхронізований з .nav-shell через .container--shell (блок 02):
 *   • до 1200px контент-бокс .container і так збігається з плашкою меню
 *     (ті самі --container і --gutter);
 *   • від 1200px обидва рахуються з --desktop-nav-*-inset.
 *
 * Нижче 1024px композиція не змінюється — працюють попередні правила.
 */
@media (min-width: 1024px) {
	.final-cta__inner {
		/* Лінії — приглушене золото з теракотою, між --gold і --clay. */
		--fc-rule: rgba(197, 160, 106, .26);
		--fc-frame: rgba(190, 132, 88, .34);
		/* Наскільки рамка виходить за текст угору й уліво. */
		--fc-frame-out: clamp(1.4rem, 2.2vw, 2.6rem);
		/* Скільки вертикаль НЕ доходить до низу: рамка не замикається. */
		--fc-frame-cut: clamp(7rem, 9.5vw, 9.5rem);

		position: relative;
		max-width: none;
		/*
		 * 52 % шелу. Силует у кадрі стоїть на ~0.427 ширини кадру, і при cover
		 * найправіше він опиняється на широких низьких вікнах. 52 % тримає
		 * запас ≥ 30 px між його правим краєм і лівою лінією рамки на 1024—1920.
		 */
		inline-size: max(30rem, 52%);
		margin-inline-start: auto;
		display: grid;
		grid-template-columns: 34fr 66fr;
		column-gap: clamp(1.6rem, 2.6vw, 3.2rem);
	}

	/* Живий контент — завжди над декоративними шарами. */
	.final-cta__inner > * { position: relative; z-index: 1; }

	/*
	 * L-подібна рамка: тільки верх і лівий бік. Картка не замикається:
	 * горизонталь іде на 44 % ширини, вертикаль обривається над кнопками.
	 */
	.final-cta__inner::before {
		content: "";
		position: absolute;
		z-index: 0;
		inset-block-start: calc(-1 * var(--fc-frame-out));
		inset-inline-start: calc(-1 * var(--fc-frame-out));
		inline-size: 44%;
		block-size: calc(100% - var(--fc-frame-cut));
		border-block-start: 1px solid var(--fc-frame);
		border-inline-start: 1px solid var(--fc-frame);
		pointer-events: none;
	}

	/*
	 * Майже непомітний watermark «05»: лише контур. Альтернативний текст
	 * порожній (content: "05" / ""), тому номер не дублюється в a11y-дереві.
	 */
	.final-cta__inner::after {
		content: "05" / "";
		position: absolute;
		z-index: 0;
		inset-block-start: -.06em;
		inset-inline-start: 33%;
		font-size: clamp(15rem, 22vw, 22rem);
		font-weight: 300;
		line-height: .78;
		letter-spacing: -.04em;
		color: transparent;
		-webkit-text-stroke: 1px var(--chalk);
		opacity: .04;
		pointer-events: none;
		user-select: none;
	}

	/* --- Chapter label: по правому краю композиції, без ведучого штриха --- */
	.final-cta .eyebrow {
		grid-column: 1 / -1;
		justify-content: flex-end;
		text-align: end;
		margin-block-end: clamp(1.1rem, 1.8vw, 1.9rem);
	}

	.final-cta .eyebrow::before { display: none; }

	/*
	 * Заголовок тягнеться на всю композицію: кегль підібраний так, щоб на
	 * широкому десктопі вийшло три рядки без самотніх слів. Нижня межа —
	 * тонкий розділювач між заголовком і нижнім інформаційним рядом.
	 */
	.final-cta__title {
		grid-column: 1 / -1;
		max-width: none;
		font-size: clamp(2.8rem, .2875rem + 4.014vw, 3.9rem);
		line-height: 1.02;
		padding-block-end: clamp(1.5rem, 2.4vw, 2.4rem);
		border-block-end: 1px solid var(--fc-rule);
	}

	/* --- Нижній інформаційний ряд: акцент ліворуч, пояснення праворуч --- */
	.final-cta__sub {
		grid-column: 1;
		margin-block-start: clamp(1.4rem, 2.2vw, 2.2rem);
		max-width: none;
		font-size: clamp(1.15rem, .72rem + .78vw, 1.62rem);
		line-height: 1.24;
	}

	.final-cta__text {
		grid-column: 2;
		margin-block-start: clamp(1.4rem, 2.2vw, 2.2rem);
		max-width: 62ch;
	}

	/* --- Кнопки — без змін, лише вирівнювання до правого краю --- */
	.final-cta__cta {
		grid-column: 1 / -1;
		justify-content: flex-end;
		margin-block-start: clamp(1.9rem, 2.9vw, 2.9rem);
	}
}

/* ===========================================================================
   25 · 21 · ФУТЕР — фінальні титри
   =========================================================================== */

.site-footer {
	background: var(--navy);
	border-top: 1px solid var(--rule-dark);
	padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.footer__grid {
	display: grid;
	gap: clamp(1.8rem, 4vw, 3rem);
}

/* Дві колонки посилань стають поруч уже на великому телефоні. */
@media (min-width: 600px) and (max-width: 779.98px) {
	.footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.footer__grid > *:first-child { grid-column: 1 / -1; }
}

@media (min-width: 780px) { .footer__grid { grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, .8fr)); } }

.footer__brand { font-size: clamp(1.1rem, .95rem + .7vw, 1.6rem); font-weight: 700; letter-spacing: .04em; color: var(--chalk); }
.footer__brand .brand__mental { font-weight: 400; }

.footer__logo {
	display: block;
	inline-size: clamp(240px, 30vw, 380px);
	max-inline-size: 100%;
	block-size: auto;
}

.footer__tag { margin-top: var(--sp-3); font-size: var(--fs-small); color: var(--on-dark-3); max-width: 32ch; line-height: 1.5; }

.footer__col h2 {
	font-size: .64rem;
	font-weight: 660;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: var(--sp-4);
}

.footer__col ul { display: grid; }
.footer__col a {
	font-size: var(--fs-small);
	color: var(--on-dark-2);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	padding-block: .55rem;
	min-height: 44px;
	transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: var(--chalk); }

.footer__bottom {
	margin-top: clamp(2.4rem, 5vw, 4rem);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--rule-dark);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-6);
	align-items: center;
	justify-content: space-between;
	font-size: var(--fs-micro);
	color: var(--on-dark-3);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: 0 var(--sp-4); }
.footer__legal a {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	padding-block: .7rem;
	min-height: 44px;
}
.footer__legal a:hover { color: var(--on-dark-2); }

/* Логотип став посиланням: бокс лишається тим самим, що й у голої картинки. */
.footer__brand-link { display: block; }

/* Обидва елементи вмикаються в центрованій подачі — на всіх ширинах. */
.footer__rights { display: none; }
.footer__social { display: none; }

/* ---------------------------------------------------------------------------
   21 · Соцмережі футера — однакові круглі кнопки.

   Ці правила свідомо спільні для мобільної та десктопної подачі: у
   медіазапитах нижче лишається тільки розкладка ряду. Тому всі три кнопки
   гарантовано однакового розміру на будь-якій ширині, а колір рамки й
   піктограми — той самий currentColor, тож розійтися вони не можуть.
   Колір узятий наявний, --on-dark-2: той самий кремово-сірий, що й у решті
   футера. Жодного нового кольору не заводимо.
   --------------------------------------------------------------------------- */
.site-footer .footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 46px;
	block-size: 46px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: var(--on-dark-2);
	transition: color var(--dur-fast) var(--ease-out),
	            background-color var(--dur-fast) var(--ease-out),
	            border-color var(--dur-fast) var(--ease-out);
}

/* 22px x 1.5. viewBox 0 0 24 24 — масштаб пропорційний. */
.site-footer .footer__social svg {
	display: block;
	inline-size: 33px;
	block-size: 33px;
	stroke: currentColor;
}

/* Наведення: коло заливається тим самим світлим, піктограма стає кольору
   фону футера. Теракоту не беремо — в інтерактиві футера її немає. */
.site-footer .footer__social a:hover,
.site-footer .footer__social a:focus-visible {
	color: var(--navy);
	background-color: var(--chalk);
	border-color: var(--chalk);
}

.site-footer .footer__social a:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

/* Натиснення — трохи глибший відтінок того ж кремового, без руху. */
.site-footer .footer__social a:active {
	background-color: var(--chalk-deep);
	border-color: var(--chalk-deep);
}

@media (prefers-reduced-motion: reduce) {
	.site-footer .footer__social a { transition: none; }
}

/* ---------------------------------------------------------------------------
   21 · Футер до 768px — та сама центрована подача, зменшена.

   Розмітка спільна: колонки не видаляються, а ховаються, логотип і соцмережі —
   ті самі елементи, що й на планшеті. Блок навмисно окремий від правил
   від 768px, щоб не чіпати вже прийняту планшетну й десктопну геометрію.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.site-footer { padding-block: 40px 36px; }

	/* Від сітки лишається тільки логотип — по центру. */
	.site-footer .footer__grid {
		display: block;
		gap: 0;
		text-align: center;
	}

	.site-footer .footer__grid > .footer__col,
	.site-footer .footer__tag { display: none; }

	.site-footer .footer__brand { margin: 0; }

	.site-footer .footer__brand-link {
		inline-size: fit-content;
		margin-inline: auto;
		border-radius: var(--r-sm);
	}

	.site-footer .footer__brand-link:focus-visible {
		outline: 2px solid var(--focus);
		outline-offset: 4px;
	}

	.site-footer .footer__logo { inline-size: clamp(190px, 58vw, 220px); }

	.site-footer .footer__bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		margin-top: 22px;
		padding-top: 0;
		border-top: 0;
		text-align: center;
	}

	.site-footer .footer__rights { display: inline; }

	.site-footer .footer__legal {
		justify-content: center;
		gap: 7px 14px;
	}

	.site-footer .footer__legal a {
		min-height: 32px;
		padding-block: 5px;
	}

	.site-footer .footer__legal a:focus-visible {
		color: var(--on-dark-2);
		outline: 2px solid var(--focus);
		outline-offset: 2px;
		border-radius: var(--r-xs);
	}

	.site-footer .footer__social {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 18px;
		margin: 10px 0 0;
		padding: 0;
		list-style: none;
	}
}

/* ---------------------------------------------------------------------------
   21 · Футер від 768px — центрована мінімалістична подача.

   Розмітка одна на всі ширини: колонки не видаляються, а ховаються, логотип
   лишається тим самим елементом .footer__logo, тож дублікатів немає й
   мобільний футер до 767.98px не змінюється жодним правилом звідси.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.site-footer { padding-block: 52px 44px; }

	/* Від сітки лишається тільки логотип — по центру. */
	.site-footer .footer__grid {
		display: block;
		gap: 0;
		text-align: center;
	}

	.site-footer .footer__grid > .footer__col,
	.site-footer .footer__tag { display: none; }

	.site-footer .footer__brand { margin: 0; }

	.site-footer .footer__brand-link {
		inline-size: fit-content;
		margin-inline: auto;
		border-radius: var(--r-sm);
	}

	.site-footer .footer__brand-link:focus-visible {
		outline: 2px solid var(--focus);
		outline-offset: 4px;
	}

	.site-footer .footer__logo { inline-size: 235px; }

	/* Copyright · юридичні посилання · соцмережі — однією центрованою колонкою. */
	.site-footer .footer__bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		margin-top: 22px;
		padding-top: 0;
		border-top: 0;
		text-align: center;
	}

	.site-footer .footer__rights { display: inline; }

	.site-footer .footer__legal {
		justify-content: center;
		gap: 0 var(--sp-5);
	}

	.site-footer .footer__legal a {
		min-height: 32px;
		padding-block: 5px;
	}

	.site-footer .footer__social {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 18px;
		margin: 12px 0 0;
		padding: 0;
		list-style: none;
	}
}

/* Десктоп — та сама композиція, більший логотип і більше повітря. */
@media (min-width: 1200px) {
	.site-footer { padding-block: 64px 54px; }

	.site-footer .footer__logo { inline-size: 280px; }

	.site-footer .footer__bottom { margin-top: 25px; }

	.site-footer .footer__social { margin-top: 12px; }
}

/* ===========================================================================
   26 · Форма запису
   Без JavaScript — звичайна секція внизу сторінки.
   З JavaScript — модальний діалог.
   =========================================================================== */

.booking {
	position: relative;
	z-index: var(--z-content);
	padding-block: var(--section-y);
	background: var(--navy-2);
	border-top: 1px solid var(--rule-dark);
}

.booking__panel {
	position: relative;
	padding: clamp(1.4rem, 3vw, 2.4rem);
	border: 1px solid var(--rule-dark);
	border-radius: var(--r-lg);
	background: rgba(19, 28, 38, .96);
}

.booking__intro { margin-top: var(--sp-3); color: var(--on-dark-2); }
.booking__form { margin-top: var(--sp-5); }
.booking__form .field + .field { margin-top: var(--sp-4); }
.booking__form .btn-row { margin-top: var(--sp-5); }
.booking__form .form-note { margin-top: var(--sp-4); }

.booking__close {
	position: absolute;
	inset-block-start: .75rem;
	inset-inline-end: .75rem;
	inline-size: 44px;
	block-size: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--rule-dark);
	border-radius: 50%;
	background: transparent;
	color: var(--on-dark-2);
	cursor: pointer;
}
.booking__close:hover { background: rgba(236, 231, 217, .09); color: var(--chalk); }

/* Діалоговий режим — вмикається з JS */
.booking--dialog {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: grid;
	place-items: center;
	padding: var(--gutter);
	overflow-y: auto;
	background: rgba(6, 9, 13, .8);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-top: 0;
}

.booking--dialog[hidden] { display: none; }
.booking--dialog .booking__panel { box-shadow: var(--shadow-dark); }

body.is-booking-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   Contact Form 7 · форма запису.

   Розмітку задає плагін (форма «Запис на першу зустріч»), тут вона
   приводиться до вигляду .dark-form: ті самі поля, відступи, окантовка
   й кнопка, що були в попередній статичній формі.

   Усе під .booking__form — селектори навмисно не глобальні, щоб не зачепити
   форму чек-листа в .magnet__form. wpcf7_autop додає власні <p> і <br>:
   їх гасимо, інакше виникають зайві порожні рядки.
   --------------------------------------------------------------------------- */

.booking__form .wpcf7,
.booking__form .wpcf7-form { margin: 0; }

.booking__form .msa-booking-form p { margin: 0; }
.booking__form .msa-booking-form br { display: none; }

.booking__form .msa-booking-field + .msa-booking-field { margin-top: var(--sp-4); }

.booking__form .msa-booking-field label {
	display: block;
	font-size: var(--fs-micro);
	font-weight: 620;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--on-dark-3);
	margin-bottom: .38rem;
}

.booking__form .msa-booking-hint,
.booking__form .msa-booking-optional {
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	opacity: .8;
}

/* CF7 обгортає контрол у <span> — робимо його блоком на всю ширину. */
.booking__form .wpcf7-form-control-wrap { display: block; }

.booking__form .msa-booking-input,
.booking__form .msa-booking-textarea {
	width: 100%;
	max-width: 100%;
	padding: .78rem .95rem;
	min-height: 46px;
	border: 1px solid var(--rule-dark);
	border-radius: var(--r-sm);
	background: rgba(236, 231, 217, .06);
	color: var(--on-dark);
	transition: border-color var(--dur-fast) var(--ease-out);
}

/* CF7 віддає textarea з rows="10" — тримаємо колишню висоту в три рядки. */
.booking__form .msa-booking-textarea {
	block-size: 7.2rem;
	min-block-size: 7.2rem;
	resize: vertical;
}

.booking__form .msa-booking-input:hover,
.booking__form .msa-booking-textarea:hover { border-color: color-mix(in srgb, var(--clay) 45%, transparent); }

.booking__form .msa-booking-input::placeholder,
.booking__form .msa-booking-textarea::placeholder { color: var(--on-dark-3); opacity: .8; }

.booking__form .wpcf7-form-control:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* У режимі діалогу поля прокручуються всередині .booking__scroll, а він через
   overflow-y: auto клипає й по горизонталі. Поле займає всю ширину скрол-бокса,
   тож обводка з outline-offset: 2px виходила за його межі й обрізалася зліва та
   справа. Для полів вводу малюємо ту саму обводку всередині поля — вона
   однакова з усіх чотирьох боків і не залежить від контейнера.
   :focus, а не :focus-visible, — щоб стан був помітний і при кліку, і при тапі. */
.booking__form :is(input:not([type="submit"]), textarea, select):focus {
	outline: 2px solid var(--focus);
	outline-offset: -2px;
	box-shadow: none;
}

@media (forced-colors: active) {
	.booking__form :is(input:not([type="submit"]), textarea, select):focus {
		outline: 2px solid CanvasText;
		outline-offset: -2px;
		box-shadow: none;
	}
}

/* Кнопка — ті самі значення, що й у .btn. */
.booking__form .msa-booking-actions { margin-top: var(--sp-5); }

.booking__form .msa-booking-actions > p:first-child {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3) var(--sp-4);
}

.booking__form .msa-booking-submit {
	display: inline-block;
	padding: .82rem 1.4rem;
	min-height: 46px;
	border: 1px solid var(--clay);
	border-radius: var(--r-pill);
	background: var(--clay);
	color: var(--accent-on);
	font-size: var(--fs-small);
	font-weight: 620;
	line-height: 1.2;
	letter-spacing: -.005em;
	text-align: center;
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out),
	            border-color var(--dur-fast) var(--ease-out),
	            transform var(--dur-fast) var(--ease-out);
}

.booking__form .msa-booking-submit:hover { background: var(--clay-deep); border-color: var(--clay-deep); }
.booking__form .msa-booking-submit:active { transform: translateY(1px); }

/* Під час відправки кнопка вимкнена (див. inc/contact-form.php):
   ширина й текст не змінюються, лише курсор і легке приглушення. */
.booking__form .msa-booking-submit:disabled {
	transform: none;
	opacity: .62;
	background: var(--clay);
	border-color: var(--clay);
}

.booking__form .msa-booking-form p.msa-booking-privacy {
	margin-top: var(--sp-4);
	font-size: var(--fs-micro);
	color: var(--on-dark-3);
	line-height: 1.5;
}

/* Штатний spinner CF7 — та сама анімація, кольори під темну панель.
   Поза відправкою прибираємо з потоку, щоб він не займав місце в рядку кнопки. */
.booking__form .wpcf7-spinner {
	display: none;
	margin: 0;
	background-color: rgba(236, 231, 217, .26);
	opacity: 1;
}

.booking__form .wpcf7 form.submitting .wpcf7-spinner {
	display: inline-block;
	visibility: visible;
}

.booking__form .wpcf7 form.submitting { cursor: progress; }

.booking__form .wpcf7-spinner::before { background-color: var(--chalk); }

/* Помилка поля: помаранчева окантовка без зміни розмірів контрола,
   підказка — одразу під своїм полем. */
.booking__form .msa-booking-input.wpcf7-not-valid,
.booking__form .msa-booking-textarea.wpcf7-not-valid,
.booking__form .msa-booking-input.wpcf7-not-valid:hover,
.booking__form .msa-booking-textarea.wpcf7-not-valid:hover {
	border-color: var(--clay);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--clay) 38%, transparent);
}

.booking__form .wpcf7-not-valid-tip {
	display: block;
	margin-top: .35rem;
	font-size: var(--fs-micro);
	font-weight: 400;
	line-height: 1.4;
	color: var(--clay-soft);
	overflow-wrap: anywhere;
}

/* Підсумкове повідомлення — під кнопкою, у вигляді колишнього .form-status.
   Стани init / resetting / submitting плагін ховає сам. */
.booking__form .wpcf7 form .wpcf7-response-output {
	margin: var(--sp-4) 0 0;
	padding: .8rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	font-size: var(--fs-small);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.booking__form .wpcf7 form.sent .wpcf7-response-output {
	background: rgba(66, 122, 84, .12);
	border-color: rgba(66, 122, 84, .45);
	color: #a8d8ba;
}

.booking__form .wpcf7 form.invalid .wpcf7-response-output,
.booking__form .wpcf7 form.unaccepted .wpcf7-response-output,
.booking__form .wpcf7 form.failed .wpcf7-response-output,
.booking__form .wpcf7 form.aborted .wpcf7-response-output,
.booking__form .wpcf7 form.spam .wpcf7-response-output,
.booking__form .wpcf7 form.payment-required .wpcf7-response-output {
	background: rgba(176, 90, 60, .12);
	border-color: rgba(176, 90, 60, .5);
	color: #e8a48a;
}

/* --- Висота діалогу ------------------------------------------------------
   З полем телефону форма стала вищою. Прокручується не панель, а внутрішній
   .booking__scroll — тоді кнопка закриття лишається на місці
   на невисоких екранах.
   -------------------------------------------------------------------------- */

.booking--dialog { padding: 16px; }

.booking--dialog .booking__panel {
	display: flex;
	flex-direction: column;
	max-height: calc(100svh - 32px);
}

.booking--dialog .booking__scroll {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(236, 231, 217, .26) transparent;
}

.booking--dialog .booking__scroll::-webkit-scrollbar { inline-size: 8px; }
.booking--dialog .booking__scroll::-webkit-scrollbar-track { background: transparent; }
.booking--dialog .booking__scroll::-webkit-scrollbar-thumb {
	background: rgba(236, 231, 217, .26);
	border-radius: var(--r-pill);
}
.booking--dialog .booking__scroll::-webkit-scrollbar-thumb:hover { background: rgba(236, 231, 217, .4); }

/* Контент прокручується під кнопкою закриття, тож у діалозі вона непрозора.
   Колір той самий, що й у панелі, — візуально нічого не змінюється. */
.booking--dialog .booking__close {
	background: rgba(19, 28, 38, .96);
	z-index: 2;
}

/* Заголовок не має заповзати під кнопку закриття. */
.booking--dialog .booking__scroll > .h3 { padding-inline-end: 3rem; }

.field__opt { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .8; }

/* ===========================================================================
   27 · Дрібні утиліти й фолбеки
   =========================================================================== */

.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

.cue-bridge {
	font-size: var(--fs-small);
	color: var(--ink-2);
	margin-block: .3rem;
}

/* Без JavaScript усі стани демо видно як вертикальну послідовність */
.no-js .demo__tabs { display: none; }
.no-js .demo__panel[hidden] { display: block; }
.no-js .demo__panel + .demo__panel { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--rule-light); }

/* Мобільна версія демо — вертикальна послідовність із чотирьох станів (3.1) */
@media (max-width: 620px) {
	.demo__tabs { display: none; }
	.demo__panel[hidden] { display: block; }
	.demo__panel + .demo__panel { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--rule-light); }
}