.art {
		inline-size: 100%;
		max-inline-size: 340px;
		block-size: auto;
		overflow: visible;
	}

	.art__halo {
		fill: url(#art-halo);
	}

	.art__floor {
		fill: url(#art-floor);
	}

	/* Граница «контура» — пунктиром: данные внутри, наружу не уходят. */
	.art__contour {
		fill: none;
		stroke: var(--art-mint-deep);
		stroke-opacity: 0.45;
		stroke-width: 1.5;
		stroke-dasharray: 5 6;
	}

	.art__paper {
		fill: url(#art-paper);
		stroke: var(--art-paper-edge);
		stroke-width: 1.5;
	}

	.art__depth {
		fill: var(--art-paper-depth);
	}

	.art__frame {
		fill: none;
		stroke: var(--art-line);
		stroke-width: 1.2;
	}

	.art__line {
		fill: var(--art-line);
	}

	.art__line--strong {
		fill: var(--art-line-strong);
	}

	.art__sign {
		fill: none;
		stroke: var(--art-line-strong);
		stroke-width: 2;
		stroke-linecap: round;
	}

	.art__mint {
		fill: url(#art-mint);
	}

	.art__mint-depth {
		fill: var(--art-mint-depth);
	}

	.art__mint-soft {
		fill: var(--art-mint-soft);
	}

	.art__mint-dot,
	.art__mint-bar {
		fill: var(--art-mint-deep);
	}

	.art__mint-bar {
		opacity: 0.6;
	}

	.art__ribbon,
	.art__mint-edge {
		fill: var(--art-mint-edge);
	}

	.art__sheen {
		fill: url(#art-sheen);
		opacity: 0.55;
	}

	.art__ring {
		fill: none;
		stroke: var(--art-paper);
		stroke-opacity: 0.5;
		stroke-width: 1.5;
	}

	.art__glyph {
		fill: none;
		stroke: var(--art-paper);
		stroke-width: 5;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	/* Экран телефона, скрытые данные и канал передачи (страница
	   «Безопасность»). */
	.art__screen-soft {
		fill: var(--art-paper-shade);
	}

	.art__ink-soft {
		fill: var(--art-line-strong);
	}

	.art__mask {
		fill: var(--art-line-strong);
	}

	.art__channel {
		fill: none;
		stroke: var(--art-mint-deep);
		stroke-width: 3;
		stroke-linecap: round;
		stroke-dasharray: 2 7;
		opacity: 0.7;
	}

	.art__keyhole {
		fill: var(--art-mint-depth);
	}

	.art__shackle {
		fill: none;
		stroke: var(--art-mint-edge);
		stroke-width: 7;
		stroke-linecap: round;
	}

	.art__shackle-sheen {
		fill: none;
		stroke: var(--art-paper);
		stroke-opacity: 0.55;
		stroke-width: 2;
		stroke-linecap: round;
	}

	.art__glyph--sm {
		stroke-width: 3;
	}

	.art__glyph--xs {
		stroke-width: 2;
	}

	.art__glyph-dot {
		fill: var(--art-paper);
	}

	/* Наведение на колонку чуть приподнимает рисунок — видно, что его можно
	   рассмотреть. */
	.figcol .art {
		transition: translate 320ms var(--rise-ease, ease);
	}

	.figcol:hover .art,
	.figcol:focus-within .art {
		translate: 0 -4px;
	}

	/* Появление: знак подпрыгивает, галочка дорисовывается. Только когда
	   работает скрипт появления (html.motion) и движение не отключено. */
	@media (prefers-reduced-motion: no-preference) {
		html.motion .figcol .art__pop {
			transform-box: fill-box;
			transform-origin: center;
			transition:
				scale 560ms var(--ease-spring) 260ms,
				opacity 300ms ease 260ms;
		}

		html.motion .figcol:not(.is-in) .art__pop {
			scale: 0.6;
			opacity: 0;
		}

		html.motion .figcol .art__mark {
			stroke-dasharray: 1;
			stroke-dashoffset: 0;
			transition: stroke-dashoffset 520ms var(--ease-out) 620ms;
		}

		html.motion .figcol:not(.is-in) .art__mark {
			stroke-dashoffset: 1;
		}
	}
/* Слой лежит на самой странице, а не поверх окна: при прокрутке Люм
	   едет вместе со страницей, как всё остальное. Раньше слой был
	   прибит к окну, и скрипт каждый кадр догонял прокрутку — на кадр
	   позже, отчего Люм подрагивал. По ширине слой обрезает всё, что
	   вылезло за край (искорки), — иначе страницу можно было бы листать
	   вбок. */
	.lum-guide__layer {
		position: absolute;
		inset: 0 0 auto;
		block-size: 0;
		overflow-x: clip;
		overflow-y: visible;
		/* Ниже островка навигации: у верхнего края Люм уходит под него. */
		z-index: 9;
		pointer-events: none;
	}

	.lum-guide {
		position: absolute;
		inset: 0 auto auto 0;
		inline-size: 100px;
		block-size: 100px;
		pointer-events: auto;
		opacity: 0;
		transition: opacity 420ms ease;
		&.is-tracking {
			will-change: transform;
		}

		&.is-on {
			opacity: 1;
		}

		&.is-hidden {
			visibility: hidden;
		}

		&.no-shadow .lum__shadow {
			display: none;
		}
	}
/* Невидимые иллюстрации не расходуют кадры. Без JS класс не ставится. */
	.is-motion-paused,
	.is-motion-paused *,
	.is-motion-paused::before,
	.is-motion-paused::after,
	.is-motion-paused *::before,
	.is-motion-paused *::after {
		animation-play-state: paused !important;
	}

	/* Очередь карточек (data-sequence): перед повтором рисунки на миг гаснут,
	   чтобы возврат в начало сюжета не был рывком. */
	.is-seq > li .wpanel {
		transition: opacity 240ms ease;
	}

	/* Возврат карточки в начало: когда с элементов снимается is-play / is-done,
	   начальные значения из «ждёт очереди» не вступают рывком, а доезжают
	   переходом. :where обнуляет специфичность: свои transition у элементов
	   перевешивают этот. Когда карточка начинает играть, правило перестаёт
	   действовать, а переходы снимаются — дальше ведут анимации. */
	@media (prefers-reduced-motion: no-preference) {
		:where(.is-seq) > li:not(.is-play, .is-done) :where(*, *::before, *::after) {
			transition: all var(--reset-dur) ease;
		}
	}

	.is-seq.is-rewind > li .wpanel {
		opacity: 0;
	}
@container (width < 700px) {
		.wrap .swipe {
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: min(86%, 340px);
			grid-template-columns: none;
			grid-template-rows: none;
			gap: var(--space-3);
			overflow-x: auto;
			overflow-y: hidden;
			overscroll-behavior-inline: contain;
			scroll-snap-type: inline mandatory;
			scroll-padding-inline: var(--gutter);
			/* Лента выходит за поля страницы до края экрана. */
			margin-inline: calc(var(--gutter) * -1);
			padding-inline: var(--gutter);
			/* Запас снизу под подъём карточек при появлении (translateY),
			   чтобы лента не получала собственную вертикальную прокрутку. */
			padding-block-end: 24px;
			margin-block-end: -24px;
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}

			> * {
				grid-column: auto;
				grid-row: auto;
				scroll-snap-align: start;
			}
		}
	}
.install {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
	}

	.install__main {
		padding: 14px var(--space-6);
		white-space: nowrap;

		/* .button задаёт display и перевешивает hidden. */
		&[hidden] {
			display: none;
		}
	}

	/* Значок магазина на кнопке и круглая кнопка другого магазина — только
	   на телефоне, когда скрипт узнал, какой у человека магазин. */
	.install__icon,
	.install__alt {
		display: none;
	}

	.install[data-platform="ios"] .install__icon[data-for="ios"],
	.install[data-platform="android"] .install__icon[data-for="android"] {
		display: inline-grid;
	}

	.install[data-platform="ios"] .install__alt[data-for="android"],
	.install[data-platform="android"] .install__alt[data-for="ios"] {
		display: grid;
	}

	.install__alt {
		place-items: center;
		inline-size: 48px;
		block-size: 48px;
		border: 1px solid var(--color-border-strong);
		border-radius: var(--radius-pill);
		background: var(--color-surface);
		color: var(--color-text);
		transition: background var(--dur-fast) var(--ease-out);

		&:hover {
			background: var(--color-surface-2);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accent);
			outline-offset: 3px;
		}
	}

	/* --- Окно на компьютере --- */

	/* Окно наследует оформление того места, где стоит кнопка (в призыве —
	   текст по центру), поэтому основное задаём заново. */
	.install__dialog {
		inline-size: min(100% - 2 * var(--gutter), 640px);
		max-inline-size: none;
		max-block-size: calc(100dvh - 2 * var(--gutter));
		padding: 0;
		border: 1px solid var(--wpanel-border);
		border-radius: var(--radius-xl);
		background: var(--color-surface);
		box-shadow: var(--wpanel-shadow);
		color: var(--color-text);
		font-size: var(--text-base);
		line-height: var(--lh-normal);
		text-align: start;

		&::backdrop {
			background: color-mix(in srgb, var(--shade-deep) 45%, transparent);
			backdrop-filter: blur(6px);
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.install__dialog[open] {
			animation: install-in var(--dur-slow) var(--ease-out);
		}

		.install__dialog[open]::backdrop {
			animation: install-fade var(--dur-slow) ease;
		}
	}

	@keyframes install-in {
		from {
			opacity: 0;
			translate: 0 12px;
			scale: 0.98;
		}
	}

	@keyframes install-fade {
		from {
			opacity: 0;
		}
	}

	/* Пока окно открыто, страница под ним не прокручивается. */
	html:has(.install__dialog[open]) {
		overflow: hidden;
	}

	.install__sheet {
		padding: var(--space-8);
	}

	.install__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);

		form {
			margin: 0;
		}
	}

	.install__title {
		margin: 0;
		font-family: var(--font-display);
		font-size: var(--text-display-m);
		line-height: var(--lh-snug);
		letter-spacing: var(--ls-display);
	}

	.install__close {
		display: grid;
		place-items: center;
		inline-size: 40px;
		block-size: 40px;
		border: 0;
		border-radius: var(--radius-pill);
		background: var(--color-surface-2);
		color: var(--color-text);
		cursor: pointer;

		&:hover {
			background: var(--color-surface-inset);
		}

		&:focus-visible {
			outline: 2px solid var(--color-accent);
			outline-offset: 2px;
		}
	}

	.install__lead {
		margin: var(--space-2) 0 0;
		color: var(--color-text-secondary);
	}

	.install__markets {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: var(--space-4);
		margin: var(--space-6) 0 0;
		padding: 0;
		list-style: none;

		li {
			display: grid;
			justify-items: center;
			gap: var(--space-3);
			padding: var(--space-5);
			border-radius: var(--radius-lg);
			background: var(--color-surface-2);
			text-align: center;
		}
	}

	.install__name {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		margin: 0;
		font-weight: var(--fw-semibold);
	}

	.install__url {
		max-inline-size: 100%;
		font-size: var(--text-xs);
		color: var(--color-accent-ink);
		overflow-wrap: anywhere;
	}

	.install__qr {
		display: block;
		inline-size: 168px;
		block-size: auto;
		aspect-ratio: 1;
		padding: var(--space-3);
		border-radius: var(--radius-md);
		background: var(--white);
	}
.language-switcher {
		ul {
			display: flex;
			flex-wrap: wrap;
			gap: var(--space-2);
			margin: 0;
			padding: 0;
			list-style: none;
		}

		a,
		.is-current {
			display: inline-flex;
			align-items: center;
			padding: 7px var(--space-4);
			border-radius: var(--radius-pill);
			font-size: var(--text-xs);
			font-weight: var(--fw-medium);
			text-decoration: none;
		}

		a {
			border: 1px solid var(--color-border);
			color: var(--color-text-secondary);
			transition:
				background-color 200ms var(--ease-out),
				color 200ms var(--ease-out);

			&:hover {
				background: var(--color-surface);
				color: var(--color-text);
			}
		}

		/* Текущий язык залит: на него не нажимают, он показывает, где ты. */
		.is-current {
			border: 1px solid transparent;
			background: var(--color-text);
			color: var(--color-background);
		}
	}
/* Угол поворота всего кольца. Зарегистрирован, чтобы его можно было
	   анимировать: карточки берут его, чтобы встать на место и при этом
	   остаться прямыми. */
	@property --orbit-spin {
		syntax: "<angle>";
		inherits: true;
		initial-value: 0deg;
	}

	.orbit {
		/* Радиус кольца — от ширины самого блока. */
		--orbit-r: 37cqi;
		container-type: inline-size;
		position: relative;
		/* Люм — единственный элемент в потоке, сетка ставит его в центр.
		   Не абсолютом с margin: auto — Safari тянет такой блок на всю
		   высоту, и Люм уезжал вверх. */
		display: grid;
		place-items: center;
		inline-size: min(100%, 560px);
		aspect-ratio: 1;
		margin-inline: auto;
		animation: orbit-spin 90s linear infinite;
	}

	@keyframes orbit-spin {
		to { --orbit-spin: 360deg; }
	}

	/* Свет за Люмом. */
	.orbit::before {
		content: "";
		position: absolute;
		inset: 18%;
		border-radius: 50%;
		background: radial-gradient(closest-side, var(--lum-glow), var(--lum-glow-halo) 60%, transparent);
		filter: blur(24px);
	}

	.orbit__ring {
		position: absolute;
		inset: calc(50% - var(--orbit-r));
		border: 1px solid var(--color-border-strong);
		border-radius: 50%;
	}

	.orbit__lum {
		position: relative;
		inline-size: 34%;
	}

	.orbit__cards {
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Слот стоит в центре, уезжает по радиусу на свой угол и поворачивается
	   обратно — карточка всегда прямая. */
	.orbit__slot {
		--at: calc(var(--a) + var(--orbit-spin));
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		translate: -50% -50%;
		transform: rotate(var(--at)) translateY(calc(-1 * var(--orbit-r))) rotate(calc(-1 * var(--at)));
	}

	.orbit__card {
		padding: var(--space-2) var(--space-3);
		border: 1px solid var(--wpanel-border);
		border-radius: var(--radius-md);
		background: var(--color-surface);
		box-shadow: var(--wpanel-shadow);
		white-space: nowrap;
		animation: orbit-float 5s ease-in-out infinite alternate;
		animation-delay: calc(var(--i) * -1.3s);
	}

	@keyframes orbit-float {
		from { translate: 0 -4px; }
		to   { translate: 0 4px; }
	}

	.orbit__card p {
		margin: 0;
	}

	.orbit__value {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		font-size: var(--text-sm);
		font-weight: var(--fw-semibold);
		color: var(--color-text);

		small {
			font-size: var(--text-xs);
			font-weight: var(--fw-regular);
			color: var(--color-text-muted);
		}
	}

	.orbit__icon {
		display: inline-grid;
		margin-inline-end: var(--space-1);
		color: var(--color-accent-ink);
	}

	.orbit__label {
		font-size: var(--text-xs);
		color: var(--color-text-muted);
	}

	@media (prefers-reduced-motion: reduce) {
		.orbit,
		.orbit__card {
			animation: none;
		}
	}
.iphone {
		--iphone-w: 300px;
		position: relative;
		inline-size: var(--iphone-w);
		aspect-ratio: 432 / 904;
		color: var(--color-text);
		isolation: isolate;
	}

	/* Рамка всегда тёмная — независимо от цветовой схемы страницы.
	   Статус-бар наследует --color-text и корректно адаптируется. */
	.iphone__ring {
		stroke: oklch(12% 0 0);
	}

	/* Экран повторяет внутренний скруглённый прямоугольник рамки: отступы
	   15/432 и 15/904 от края viewBox, радиус 66 по горизонтали и вертикали. */
	.iphone__screen {
		position: absolute;
		inset: 1.66% 3.47%;
		border-radius: 16.4% / 7.55%;
		overflow: hidden;
		background: var(--color-background);
		container: screen / size;
		font-size: calc(var(--iphone-w) / 24);
		color: var(--color-text);
	}

	.iphone__chrome {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		z-index: 2;
		pointer-events: none;
		filter:
			drop-shadow(0 0 0.5px rgb(0 0 0 / 38%))
			drop-shadow(0 3px 14px rgb(0 0 0 / 14%));
	}

	/* Токены цвета UI внутри рамки: статус-бар сверху и домашняя черта снизу.
	   По умолчанию наследуют цвет самой рамки, сцена может переопределить
	   через :has() — например, когда верхняя половина экрана тёмная. */
	.iphone__chrome-top rect,
	.iphone__chrome-top path { fill: var(--chrome-top, currentColor); }
	.iphone__chrome-bot rect { fill: var(--chrome-bot, currentColor); }
.ds-scene {
		position: absolute;
		inset: 0;
		display: grid;
		grid-template-rows: 42cqh 1fr;
		background: var(--color-background);
		font-family: var(--font-sans);
		color: var(--color-text);
		overflow: hidden;
	}

	/* Эта сцена переопределяет цвет верхнего UI рамки на белый: статус-бар
	   стоит на тёмной подложке. Низ (домашняя черта) остаётся в дефолте. */
	.iphone:has(.ds-scene) { --chrome-top: var(--white); }

	/* --- Верх: тёмная плашка с мелкой точечной текстурой, в ней — миниатюра. */
	.ds-top {
		position: relative;
		padding: 8cqh 5cqw 3cqh;
		display: grid;
		place-items: center;
		overflow: hidden;
		background:
			radial-gradient(circle at 1px 1px, rgb(255 255 255 / 10%) 0.6px, transparent 1px) 0 0 / 5px 5px,
			linear-gradient(180deg, #1a2026, #0e1216);
	}

	/* Миниатюра держит собственную пропорцию и влезает по меньшей стороне. */
	.ds-image {
		position: relative;
		margin: 0;
		block-size: 100%;
		aspect-ratio: 1080 / 1255;
		max-inline-size: 100%;
		border-radius: 0.3em;
		overflow: hidden;
		box-shadow:
			0 10px 24px rgb(0 0 0 / 45%),
			0 2px 4px rgb(0 0 0 / 35%),
			0 0 0 1px rgb(255 255 255 / 6%);
		/* Внутренний контекст контейнера, чтобы 100cqh у линии сканирования
		   считалось от высоты миниатюры, а не экрана айфона. */
		container: imgbox / size;
	}
	.ds-image img {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		object-position: top;
	}

	.ds-scan {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 0;
		block-size: 3px;
		background: var(--sig-green);
		box-shadow: 0 0 18px 6px color-mix(in srgb, var(--sig-green) 60%, transparent);
		opacity: 0;
	}

	/* --- Низ: белая плашка с заголовком, подписью и списком. */
	.ds-bottom {
		padding: 1em 1.1em 0;
		display: grid;
		grid-template-rows: auto auto 1fr;
		grid-template-areas: "title" "meta" "rows";
		gap: 0.2em;
		background: var(--color-surface);
		color: var(--color-text);
		overflow: hidden;
	}

	/* Два заголовка живут в одной ячейке грида и переключаются прозрачностью:
	   высота под них зарезервирована, чтобы «готово» не прыгало. */
	.ds-title {
		grid-area: title;
		margin: 0;
		min-block-size: 1.3em;
		font-family: var(--font-display);
		font-weight: var(--fw-regular);
		font-size: 1.75em;
		line-height: var(--lh-tight);
		letter-spacing: var(--ls-display);
		display: flex;
		align-items: center;
		gap: 0.35em;
		transition: opacity 300ms var(--ease-out);
	}
	.ds-title--done { opacity: 0; }

	.ds-spin {
		inline-size: 0.85em;
		block-size: 0.85em;
		border: 1px solid var(--sig-green);
		border-block-start-color: transparent;
		border-radius: 50%;
		animation: ds-spin 900ms linear infinite;
		flex: 0 0 auto;
	}

	.ds-meta {
		grid-area: meta;
		margin: 0 0 0.6em;
		font-size: 0.75em;
		color: var(--color-text-muted);
		opacity: 0;
		transition: opacity 300ms var(--ease-out);
	}

	/* Таблица — поток, лишние строки уходят под нижний край с мягким
	   градиентом в фон плашки: обрез не читается как обрыв. */
	.ds-rows {
		grid-area: rows;
		list-style: none;
		margin: 0;
		padding: 0;
		font-size: 0.95em;
		overflow: hidden;
		min-block-size: 0;
		line-height: var(--lh-snug);
		mask-image: linear-gradient(to bottom, black 0, black 70%, transparent 100%);
	}

	.ds-row {
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: baseline;
		gap: 0.7em;
		padding: 0.5em 0;
		border-block-end: 1px solid var(--color-border);
		opacity: 0;
		transition: opacity 350ms var(--ease-out);
	}
	.ds-row__name {
		color: var(--color-text-secondary);
		min-inline-size: 0;
		overflow-wrap: anywhere;
		hyphens: auto;
		margin-inline-end: 0.5rem;

		small { color: var(--color-text-muted); font-size: 0.9em; }
	}
	.ds-row__val {
		font-weight: var(--fw-semibold);
		font-variant-numeric: tabular-nums;
		color: var(--color-text);
	}
	.ds-row__val--high { color: var(--sig-red); }
	.ds-row__val--low  { color: var(--amber-ink); }
	.ds-row__unit {
		color: var(--color-text-muted);
		font-variant-numeric: tabular-nums;
		min-inline-size: 3.2em;
		text-align: end;
	}

	@keyframes ds-spin    { to { rotate: 360deg; } }
	@keyframes ds-fade-in { to { opacity: 1; } }
	@keyframes ds-sweep {
		from { translate: 0 0;      opacity: 0.3; }
		12%  { opacity: 1; }
		88%  { opacity: 1; }
		to   { translate: 0 100cqh; opacity: 0; }
	}

	/* Этапы, которыми управляет контроллер (data-doc-scan). На сбросе
	   контроллер снимает .is-filled, и всё в нижней плашке плавно уходит
	   обратно к дефолту (opacity: 0). Верх (бумага и фон) не затронут. */
	.ds-scene.is-scanning .ds-scan { animation: ds-sweep 2.2s cubic-bezier(.4,0,.6,1) both; }

	.ds-scene.is-filled .ds-title--loading { opacity: 0; }
	.ds-scene.is-filled .ds-title--done    { opacity: 1; }
	.ds-scene.is-filled .ds-meta           { opacity: 1; transition-delay: 120ms; }
	.ds-scene.is-filled .ds-row {
		animation: ds-fade-in 260ms calc(var(--i) * 50ms + 200ms) both;
	}

	@media (prefers-reduced-motion: reduce) {
		.ds-scan, .ds-spin { display: none; }
		.ds-title--loading { display: none; }
		.ds-title--done, .ds-meta { opacity: 1; }
		.ds-row { opacity: 1; animation: none; }
	}
.moo-scene {
		position: absolute;
		inset: 0;
		padding: 7cqh 4cqw 4cqh;
		display: flex;
		flex-direction: column;
		gap: 0.6em;
		background: var(--color-background);
		font-family: var(--font-sans);
		color: var(--color-text);
		overflow: hidden;
		font-size: 1em;
	}

	/* FA-иконки: даём размер и разрешаем выезжать за viewBox, чтобы не
	   обрезались. Правило применяем точечно — у волн и Люма размеры свои. */
	.moo-mood__face svg,
	.moo-appt__ic,
	.moo-water__add svg,
	.moo-meds__chk svg {
		block-size: 1em;
		inline-size: auto;
		overflow: visible;
	}
	svg.svg-inline--fa { overflow: visible; }

	.moo-head {
		text-align: center;
		margin-block-start: 1.5rem;
		margin-block-end: 1rem;
	}
	.moo-hd {
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--fw-regular);
		font-size: 2.4em;
		line-height: var(--lh-tight);
		letter-spacing: var(--ls-display);
	}

	/* --- Квадратная сетка 4 × 8. Один «юнит» = ширина колонки, высота
	   ряда — та же, так что ячейки квадратные при любой ширине экрана.
	   Если низ не влезает, его режет overflow:hidden сцены. */
	.moo-grid {
		container: moo-grid / inline-size;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: calc((100cqw - 3 * 0.5em) / 4);
		gap: 0.5em;
		min-block-size: 0;
		mask-image: linear-gradient(to bottom, black 0, black 85%, transparent 100%);
	}

	.moo-card {
		background: var(--color-surface);
		border-radius: 1.5em;
		padding: 0.8em 0.9em;
		box-shadow: 0 2px 14px light-dark(rgb(10 22 16 / 10%), rgb(0 0 0 / 35%));
		position: relative;
		overflow: hidden;
	}

	/* --- Настроение: 4 × 2. */
	.moo-mood {
		grid-column: 1 / -1;
		grid-row: span 2;
		display: grid;
		grid-template-rows: auto 1fr;
		gap: 0.6em;
	}

	.moo-mood__faces {
		list-style: none;
		margin: 0;
		padding: 8px 0;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 0.3em;
	}

	.moo-mood__slot {
		display: grid;
		place-items: center;
	}

	.moo-mood__face {
		display: grid;
		place-items: center;
		border: 0;
		background: transparent;
		color: var(--color-text-secondary);
		font-size: 2.1em;
		padding: 0.1em;
		cursor: pointer;
		transition: scale 220ms var(--ease-spring);
	}
	/* Иконки стоят друг над другом в одной ячейке грида; переключаем
	   прозрачностью, а не display — так классы точно работают поверх любых
	   других правил на svg. */
	.moo-mood__face > svg {
		grid-area: 1 / 1;
		transition: opacity 180ms var(--ease-out);
	}
	.moo-mood__face > .moo-mood__face-fill { opacity: 0; }
	.moo-mood__face.is-on {
		scale: 1.18;
		animation: moo-pop 420ms var(--ease-spring) 1;
	}
	.moo-mood__face.is-on > .moo-mood__face-outline { opacity: 0; }
	.moo-mood__face.is-on > .moo-mood__face-fill    { opacity: 1; }

	.moo-mood__field {
		position: relative;
		padding: 0.6em 0.8em;
		border-radius: 0.9em;
		background: var(--color-surface-inset);
		color: var(--color-text);
		font-size: 1em;
		line-height: 1.3;
		overflow: hidden;
	}
	.moo-mood__ph {
		position: absolute;
		inset: 0.6em 0.8em auto;
		color: var(--color-text-muted);
		transition: opacity 200ms var(--ease-out);
		pointer-events: none;
	}
	.moo-mood__text { margin: 0; }
	.moo-mood__text reveal-text p { margin: 0; }
	.moo-mood__field:has(reveal-text) .moo-mood__ph { opacity: 0; }

	/* --- Приём врача: 2 × 2. Иконка + «завтра/сегодня» сверху, название
	       и имя снизу. */
	.moo-appt {
		grid-column: 1 / span 2;
		grid-row: span 2;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 1em;
	}
	.moo-appt__title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--fw-regular);
		font-size: 1.25em;
		line-height: var(--lh-tight);
		letter-spacing: var(--ls-display);
	}
	.moo-appt__clinic {
		font-family: var(--font-sans);
		line-height: var(--lh-snug);
		font-size: 0.65em;
		letter-spacing: var(--ls-body);
		color: var(--color-text-muted);
	}
	.moo-appt__when {
		margin: 0;
		font-family: var(--font-display);
		font-size: 1.5em;
		letter-spacing: var(--ls-display);
		text-align: end;
		line-height: 1.1;

		small {
			display: block;
			font-family: var(--font-sans);
			font-size: 0.5em;
			color: var(--color-text-secondary);
			letter-spacing: var(--ls-body);
			margin-block-start: 0.2em;
		}
	}
	.moo-appt__day {
		position: relative;
		display: inline-block;
		font-style: italic;
		color: var(--color-text);
	}
	.moo-appt__day-s {
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 0;
		opacity: 0;
		color: var(--sig-red);
	}

	/* --- Вода: 2 × 2. Волны на весь фон, цифра и кнопка поверх. */
	.moo-water {
		grid-column: span 2 / -1;
		grid-row: span 2;
		display: grid;
		grid-template-rows: 1fr auto;
		align-content: space-between;
		isolation: isolate;
		color: var(--color-text);
	}
	.moo-water__num {
		margin: 0;
		font-family: var(--font-display);
		letter-spacing: var(--ls-display);
		line-height: 1;
		font-size: 2.4em;
		z-index: 1;
		display: flex;
		align-items: baseline;
		gap: 0.3em;
		font-variant-numeric: lining-nums tabular-nums;

		b { font-weight: var(--fw-regular); }
		.moo-water__lbl {
			font-size: 0.55em;
			margin-inline-start: -0.1em;
		}
		small {
			font-size: 0.32em;
			color: var(--color-text-secondary);
			font-family: var(--font-sans);
			letter-spacing: var(--ls-body);
		}
	}
	.moo-water__add {
		justify-self: start;
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.8em 1.2em;
		border: 0;
		border-radius: 999px;
		background: #0a84ff;  /* iOS systemBlue */
		color: var(--white);
		font-weight: var(--fw-semibold);
		font-size: 1em;
		cursor: pointer;
		box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 30%), 0 1px 3px rgb(10 132 255 / 35%);
		transition: scale 180ms var(--ease-spring), background 180ms var(--ease-out);
		z-index: 1;
	}
	.moo-water__add.is-tapped {
		scale: 0.92;
		background: #5ac8fa;  /* iOS systemBlue light — короткая вспышка на тап */
	}

	.moo-water__fill {
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		block-size: var(--level, 48%);
		background: linear-gradient(180deg, #64d2ff 0%, #0a84ff 100%);
		transition: block-size 900ms var(--ease-out);
		pointer-events: none;
		z-index: 0;
	}

	/* --- БАДы: 4 × 4. */
	.moo-meds {
		grid-column: 1 / -1;
		grid-row: span 4;
		font-size: 1em;
	}
	.moo-meds__h {
		margin: 0.2em 0 0.2em 0;
		font-family: var(--font-display);
		font-size: 1.3em;
		letter-spacing: var(--ls-display);
	}
	.moo-meds__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
	}
	.moo-meds__item {
		display: grid;
		grid-template-columns: 1.4em 1fr auto;
		align-items: center;
		gap: 0.8em;
		padding-block: 0.75em;
		border-block-end: 1px solid var(--color-border);

		&:last-child { border-block-end: 0; }
	}
	.moo-meds__chk {
		display: grid;
		place-items: center;
		inline-size: 1.3em;
		block-size: 1.3em;
		border-radius: 0.3em;
		background: var(--color-surface-inset);
		color: var(--white);
		transition: background 220ms var(--ease-out);

		svg {
			inline-size: 65%;
			block-size: 65%;
			overflow: visible;
		}

		/* Галка — отрезок пути длиной ~17 единиц в viewBox 0 0 24 24.
		   dasharray = длина, dashoffset сдвигает её влево вне рамки, при
		   is-done — ноль, галка «прорисовывается». */
		path {
			stroke-dasharray: 20;
			stroke-dashoffset: 20;
			transition: stroke-dashoffset 420ms var(--ease-out);
		}
	}
	.moo-meds__item.is-done .moo-meds__chk {
		background: var(--sig-green);
	}
	.moo-meds__item.is-done .moo-meds__chk path {
		stroke-dashoffset: 0;
	}
	.moo-meds__item.is-done .moo-meds__name {
		color: var(--color-text-muted);
		text-decoration: line-through;
		text-decoration-color: var(--color-border);
	}
	.moo-meds__list small {
		color: var(--color-text-muted);
		font-variant-numeric: tabular-nums;
	}

	@keyframes moo-pop { 40% { scale: 1.35; } }
/* Инлайн FA-иконки на этой сцене — высота по font-size, overflow явно. */
	.talk-scene svg {
		display: inline-block;
		overflow: visible;
	}
	.talk-scene i svg,
	.talk-top__nav svg,
	.talk-bot svg {
		block-size: 1em;
		inline-size: auto;
	}

	.talk-scene {
		position: absolute;
		inset: 0;
		display: grid;
		grid-template-rows: auto 1fr auto;
		background: var(--color-background);
		color: var(--color-text);
		font-family: var(--font-sans);
		overflow: hidden;
		font-size: 1.05em;
	}

	/* --- Шапка: плавает над телом чата, фон — градиент. */
	.talk-top {
		grid-row: 1;
		grid-column: 1;
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		gap: 0.5em;
		padding: 7.5cqh 3cqw 0.7em;
		background: linear-gradient(to bottom, var(--color-background) 55%, transparent);
	}
	.talk-top__who {
		display: flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.3em 1em 0.3em 0.35em;
		border-radius: 999px;
		background: var(--color-surface);
		box-shadow: 0 1px 4px light-dark(rgb(10 22 16 / 10%), rgb(0 0 0 / 30%));
		flex: 1 1 auto;
		min-inline-size: 0;
	}
	.talk-top__who .lum-avatar {
		inline-size: 2.2em;
		block-size: 2.2em;
		border-radius: 50%;
		/*background: var(--color-surface);*/
	}
	.talk-top__name {
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--fw-regular);
		font-size: 1.15em;
		letter-spacing: var(--ls-display);
		line-height: 1.1;
	/*color: var(--color-accent);*/
	}
	.talk-top__nav {
		display: flex;
		gap: 0.4em;
		align-self: stretch;
		align-items: center;
	}
	/* Размер совпадает с высотой пилюли (align-self: stretch + aspect-ratio),
	   белый фон маскирует контент чата, который прокручивается под шапкой. */
	.talk-top__nav button {
		display: grid;
		place-items: center;
		align-self: stretch;
		aspect-ratio: 1;
		border: 0;
		border-radius: 50%;
		background: var(--color-surface);
		box-shadow: 0 1px 4px light-dark(rgb(10 22 16 / 10%), rgb(0 0 0 / 30%));
		color: var(--color-text);
		font-size: 0.9em;
	}

	/* --- Тело разговора: занимает весь грид, скролл под прозрачными шапкой и подвалом. */
	.talk-body {
		grid-row: 1 / -1;
		grid-column: 1;
		overflow: auto;
		padding: calc(7cqh + 4em) 0.9em calc(3.5cqh + 2.5em);
		scrollbar-width: none;
		mask-image: linear-gradient(
			to bottom,
			transparent 0,
			black calc(7cqh + 2.5em),
			black calc(100% - 3.5cqh - 2em),
			transparent 100%
		);
	}
	/* На сенсорном экране своя прокрутка разговора перехватывала палец,
	   и страница переставала листаться. Там она закрыта; разговор сам
	   едет за ответом (скрипт ниже). */
	@media (hover: none) {
		.talk-body {
			overflow: hidden;
		}
	}
	.talk-body .chat-conversation { margin: 0; }
	/* Переносов в экране нет: в узком пузыре они рвали почти каждую
	   строку. */
	.talk-body .chat-thread {
		hyphens: manual;
		font-size: 0.82em;
		column-gap: 0.5em;
		max-inline-size: none;
		grid-template-columns: minmax(0, 1fr);
	}
	.talk-body .chat-thread > * { grid-column: 1; }
	/* Сбрасываем is-fixed: в сцене скролл ведёт .talk-body, не conversation. */
	.talk-scene .chat-conversation,
	.talk-scene .chat-conversation.is-fixed {
		block-size: auto !important;
		overflow: visible !important;
	}

	/* Первый ответ скрыт до анимации; добавленные через сценарии видны сразу. */
	.talk-scene .chat-thread .chat-reply:first-of-type { display: none; }
	.talk-scene .chat-thread .chat-reply:first-of-type.is-ready { display: grid; }

	/* Первый пузырь — вопрос пользователя — зелёный акцент. */
	.talk-body .chat-ask {
		font-size: var(--text-screen);
		padding: 0.5em 0.8em;
		margin-block-end: 0.5em;
		border-radius: 1.1em 1.1em 0.3em 1.1em;
		background: var(--color-accent);
		color: var(--color-accent-contrast);
		opacity: 0;
		transition: opacity 300ms var(--ease-out);
	}
	.talk-body .chat-ask.is-visible { opacity: 1; }
	.talk-body .chat-reply {
		font-size: var(--text-screen);
		margin-block-end: 0.5em;
		margin-block-start: 0.3em;
		p {
			margin-block-end: 0.7em;
		}
	}


	.talk-body .chat-answer > * + * { margin-block-start: 0.5em; }

	/* Совместная карточка для обоих графиков. */
	.talk-charts {
		position: relative;
		isolation: isolate;
		border-radius: 1em;
		overflow: hidden;
		background: var(--color-surface);
		box-shadow: 0 2px 14px light-dark(rgb(10 22 16 / 10%), rgb(0 0 0 / 35%));
		margin-block-end: 0.7em;
	}
	/* Шиммер — диагональная полоса, скользит 2 раза; z-index: -1 держит его
	   под контентом, isolation на родителе — над его фоном. */
	.talk-charts::before {
		content: "";
		position: absolute;
		inset-block: -50%;
		inset-inline-start: -40%;
		inline-size: 40%;
		background: linear-gradient(
			to right,
			transparent 0,
			light-dark(rgb(0 0 0 / 4%), rgb(255 255 255 / 4%)) 50%,
			transparent 100%
		);
		rotate: -20deg;
		animation: tc-shimmer 1.4s ease-in-out 2;
		animation-fill-mode: forwards;
		pointer-events: none;
		z-index: -1;
	}
	@keyframes tc-shimmer {
		from { translate: 0 0; }
		to   { translate: 360% 0; }
	}
	@media (prefers-reduced-motion: reduce) {
		.talk-charts::before { display: none; }
	}
	.talk-charts biomarker-chart .bm-chart {
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 10px;
	}
	.talk-charts__div {
		block-size: 1px;
		background: var(--color-border);
		margin: 0;
	}

	.bm-glucose .bm-chart__x span {
		display: none;
	}

	biomarker-chart .bm-glucose {
		padding: 4px;
		padding-bottom: 0px !important;
	}

	biomarker-chart .bm-glucose {
		padding: 4px;
		padding-top: 0px !important;
	}


	/* Графики в узком окне — компактнее; высоту можно менять через
	   --talk-chart-height снаружи. */
	.talk-body .bm-chart {
		--bm-height: var(--talk-chart-height, 5.2em);
		--bm-inset: 10px;
		padding: 0.6em 0.8em;
		font-size: 0.72em;
	}
	/* Заголовок — крупный, акцидентный. */
	.talk-body .bm-chart__title {
		font-family: var(--font-display);
		font-size: 1.7em;
		font-weight: var(--fw-regular);
		line-height: var(--lh-tight);
		letter-spacing: var(--ls-body);
		margin: 4px 6px -4px 10px;

	}
	/* Метки осей — мельче. */
	.talk-body .bm-chart__x span,
	.talk-body .bm-chart__y span {
		font-size: 0.72em;
	}
	.talk-body .bm-chart__now b { font-size: 1em; }
	.talk-body .bm-chart__plot { column-gap: 0.3em; }

	/* В этом экране единица уже в самом названии графика. */
	.talk-body .bm-chart__subtitle,
	.talk-body .bm-chart__unit,
	.talk-body .bm-chart__now { display: none; }

	/* Анимация графиков — без задержки по точкам; всё появляется сразу. */
	.talk-body .bm-line,
	.talk-body .bm-dot,
	.talk-body .bm-bar,
	.talk-body .bm-zone.is-current {
		animation-delay: 0ms;
	}

	/* Вода — все столбики синие, полоса нормы скрыта. */
	.talk-body .bm-chart--bar .bm-bar {
		background: var(--sig-blue);
	}
	.bm-water .bm-zone { display: none; }

	/* Подсказки под ответом — пилюли. */
	.talk-body .chat-suggestions {
		margin: 0.6em 0 0.5em;
		gap: 0.35em;

		button {
			padding: 0.4em 0.7em;
			font-size: var(--text-xs);
			border-radius: 999px;
		}
	}

	/* --- Нижняя плашка — зеркало шапки. */
	.talk-bot {
		grid-row: 3;
		grid-column: 1;
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.7em 3cqw 5cqh;
		background: linear-gradient(to top, var(--color-background) 55%, transparent);
	}
	.talk-bot__field {
		flex: 1 1 auto;
		min-inline-size: 0;
		padding: 0.3em 1em;
		border-radius: 999px;
		background: var(--color-surface);
		box-shadow: 0 1px 4px light-dark(rgb(10 22 16 / 10%), rgb(0 0 0 / 30%));
		color: var(--color-text);
		line-height: 1.3;
		min-block-size: 2.8em;
		display: flex;
		align-items: center;
	}
	.talk-bot__ph { color: var(--color-text-muted); font-size: var(--text-screen); }
	.talk-bot__round {
		display: grid;
		place-items: center;
		align-self: stretch;
		aspect-ratio: 1;
		border: 0;
		border-radius: 50%;
		background: var(--color-surface);
		box-shadow: 0 1px 4px light-dark(rgb(10 22 16 / 10%), rgb(0 0 0 / 30%));
		color: var(--color-text);
		font-size: 0.9em;
	}
	.talk-bot__send {
		background: var(--color-accent);
		color: var(--color-accent-contrast);
	}
/* Шаги идут перед айфоном: на компьютере слева от него, на телефоне
	   над ним. */
	.demo {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
		align-items: center;
		padding-block: var(--section-gap);
	}

	@media (min-width: 900px) {
		.demo {
			grid-template-columns: minmax(0, 1fr) auto;
			gap: var(--space-16);
		}
	}

	.demo__text h2 {
		margin: 0 0 var(--space-8);
		text-wrap: balance;
	}

	/* Карточки шагов одной ширины — по самой широкой, а не во всю колонку.
	   position — чтобы скрипт мерил сдвиг карточки от ленты. */
	.demo__list {
		position: relative;
		display: grid;
		inline-size: fit-content;
		max-inline-size: 100%;
		gap: var(--space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* Весь пункт — мишень: кнопка в заголовке растянута на него. */
	.demo__item {
		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--space-5);
		align-items: start;
		padding: var(--space-5);
		border-radius: var(--radius-lg);
		transition:
			background var(--dur-base) var(--ease-out),
			box-shadow var(--dur-base) var(--ease-out);

		&:hover {
			background: var(--color-surface);
		}

		&.is-active {
			background: var(--color-surface);
			box-shadow: var(--wpanel-shadow);
		}

		&:has(:focus-visible) {
			outline: 2px solid var(--color-accent);
			outline-offset: 2px;
		}
	}

	.demo__n {
		display: grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border: 1px solid var(--color-border-strong);
		border-radius: var(--radius-pill);
		font-size: var(--text-lg);
		font-weight: var(--fw-medium);
		font-variant-numeric: tabular-nums;
		color: var(--color-text-secondary);
		transition:
			background var(--dur-base) var(--ease-out),
			border-color var(--dur-base) var(--ease-out),
			color var(--dur-base) var(--ease-out);
	}

	.demo__item.is-active .demo__n {
		border-color: var(--color-accent);
		background: var(--color-accent);
		color: var(--color-accent-contrast);
	}

	/* Заголовок и текст держит одна колонка: заголовок не шире текста. */
	.demo__copy {
		max-inline-size: 26rem;

		h3 {
			margin: 0 0 var(--space-2);
			font-size: var(--text-display-m);
			font-weight: var(--fw-semibold);
			text-wrap: balance;
		}

		p {
			margin: 0;
			font-size: var(--text-lg);
			color: var(--color-text-secondary);
			text-wrap: pretty;
		}
	}

	.demo__pick {
		all: unset;
		cursor: pointer;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
		}
	}

	/* На телефоне шаги — лента карточек той же ширины, что «Примеры
	   сценариев» (.lane__track): листается вбок, выходит за поля страницы,
	   чтобы был виден срез следующей. Текст и номер мельче — лента
	   невысокая, айфон сразу под ней. */
	@media (max-width: 899px) {
		.demo__text h2 {
			margin-block-end: var(--space-5);
		}

		.demo__list {
			grid-auto-flow: column;
			grid-auto-columns: min(78vw, 320px);
			inline-size: auto;
			max-inline-size: none;
			gap: var(--space-4);
			margin-inline: calc(var(--gutter) * -1);
			padding: var(--space-1) var(--gutter) var(--space-4);
			overflow-x: auto;
			overscroll-behavior-inline: contain;
			scroll-snap-type: inline mandatory;
			scroll-padding-inline: var(--gutter);
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.demo__item {
			gap: var(--space-3);
			padding: var(--space-4);
			background: var(--color-surface);
			scroll-snap-align: start;

			&.is-active {
				box-shadow:
					inset 0 0 0 1.5px var(--color-accent),
					var(--wpanel-shadow);
			}
		}

		.demo__n {
			inline-size: 1.75rem;
			block-size: 1.75rem;
			font-size: var(--text-sm);
		}

		.demo__copy {
			max-inline-size: none;

			h3 {
				margin-block-end: var(--space-1);
				font-size: var(--text-base);
			}

			p {
				font-size: var(--text-sm);
			}
		}
	}

	/* Сцена: айфон. */
	.demo__stage {
		position: relative;
		justify-self: center;

		.iphone {
			--iphone-w: 320px;
		}
	}

	/* Хром: отменяем глобальное правило doc-scan, управляем через атрибут
	   от скрипта. Меняется сразу при смене сцены, не ждёт конца перехода. */
	.demo__stage .iphone:has(.ds-scene) {
		--chrome-top: currentColor;
	}

	.demo__stage .iphone[data-demo-cur="0"] {
		--chrome-top: var(--white);
	}

	/* Рельсы внутри экрана: все три сцены — абсолютные листы. */
	.demo__rail,
	.demo__slide {
		position: absolute;
		inset: 0;
	}

	.demo__rail {
		overflow: hidden;
	}

	/* Перелистывание: оба слайда движутся с одной кривой, как единая
	   полоса. Входящий — поверх (z-index ставит скрипт). */
	.demo__slide.is-entering,
	.demo__slide.is-leaving {
		animation-duration: 360ms;
		animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		animation-fill-mode: both;
	}

	.demo__slide.is-entering {
		animation-name: demo-enter;
	}

	.demo__slide.is-leaving {
		animation-name: demo-leave;
	}

	@keyframes demo-enter {
		from { translate: 100% 0; }
		to   { translate: 0 0; }
	}

	@keyframes demo-leave {
		from { translate: 0 0; }
		to   { translate: -100% 0; }
	}

	@media (prefers-reduced-motion: reduce) {
		.demo__slide.is-entering,
		.demo__slide.is-leaving {
			animation: none;
		}
	}
.lane__hint {
		margin: 0;
		font-size: var(--text-sm);
		color: var(--color-text-muted);
	}

	@media (min-width: 900px) {
		.lane__hint {
			display: none;
		}
	}

	.lane__track {
		display: grid;
		gap: var(--space-4);
		/* Запас по вертикали 36px: в него помещаются подъём карточки при
		   появлении и тень при наведении; отрицательный margin его гасит. */
		margin: calc(var(--space-6) - 36px) 0 -36px;
		padding: 36px 0;
		list-style: none;
		grid-auto-flow: column;
		grid-auto-columns: min(78vw, 320px);
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-inline: contain;
		scroll-snap-type: inline mandatory;
		scroll-padding-inline: var(--gutter);
		/* Лента выходит за поля страницы, чтобы у края был виден срез
		   следующей карточки — так понятно, что можно листать. */
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		scrollbar-width: none;
	}

	.lane__track::-webkit-scrollbar {
		display: none;
	}

	@media (min-width: 900px) {
		.lane__track {
			grid-auto-flow: row;
			grid-template-columns: repeat(3, 1fr);
			grid-auto-columns: auto;
			gap: var(--space-5);
			overflow: visible;
			margin: var(--space-6) 0 0;
			padding: 0;
		}
	}

	.lane__card {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		min-block-size: clamp(320px, 30vw, 380px);
		padding: var(--space-6);
		border-radius: var(--radius-xl);
		background: var(--tone);
		color: var(--color-text);
		scroll-snap-align: start;
	}

	.lane__card--sand {
		--tone: var(--tone-sand);
		--tone-deep: var(--tone-sand-deep);
		--tone-ink: var(--tone-sand-ink);
	}

	.lane__card--iris {
		--tone: var(--tone-iris);
		--tone-deep: var(--tone-iris-deep);
		--tone-ink: var(--tone-iris-ink);
	}

	.lane__card--leaf {
		--tone: var(--tone-leaf);
		--tone-deep: var(--tone-leaf-deep);
		--tone-ink: var(--tone-leaf-ink);
	}

	.lane__when {
		margin: 0;
		font-size: var(--text-xs);
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--tone-ink);
	}

	.lane__card h3 {
		margin: 0;
		font-size: var(--text-display-m);
		text-wrap: balance;
	}

	/* Виджет занимает низ карточки: белая панель на цветной подложке. */
	.lane__proof {
		display: grid;
		flex: 1;
		align-content: center;
		margin-block: var(--space-2);
	}

	.lane__proof .wpanel {
		padding: 14px 16px 16px;
	}

	.lane__note {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		margin: 0;
		font-size: var(--text-sm);
		color: var(--tone-ink);
	}

	/* === после приёма ======================================================= */

	.ln-doc {
		display: grid;
		gap: 10px;
	}

	.ln-doc__head {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		font-size: 0.8125rem;

		b {
			font-weight: var(--fw-semibold);
		}

		.w-meta {
			margin-inline-start: auto;
		}
	}

	.ln-doc__icon {
		display: grid;
		place-items: center;
		inline-size: 24px;
		block-size: 24px;
		border-radius: 7px;
		background: var(--tone-sand);
		color: var(--tone-sand-ink);
	}

	.ln-doc__text {
		margin: 0;
		font-size: 0.9375rem;
		line-height: 1.45;
		color: var(--color-text-secondary);

		mark {
			padding: 1px 3px;
			border-radius: 4px;
			background: color-mix(in srgb, var(--sig-amber) 22%, transparent);
			color: var(--color-text);
		}
	}

	.ln-doc__switch {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 2px 0 0;
		font-size: 0.8125rem;
		font-weight: var(--fw-medium);
	}

	/* Переключатель в положении «включён». */
	.ln-switch {
		position: relative;
		flex: none;
		inline-size: 34px;
		block-size: 20px;
		border-radius: var(--radius-pill);
		background: var(--color-accent);

		i {
			position: absolute;
			inset-block-start: 2px;
			inset-inline-start: 16px;
			inline-size: 16px;
			block-size: 16px;
			border-radius: var(--radius-pill);
			background: var(--white);
			box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-color) 25%, transparent);
		}
	}

	.ln-doc__plain {
		margin: 0;
		padding: 10px 12px;
		border-radius: 12px;
		background: color-mix(in srgb, var(--color-accent) 10%, transparent);
		font-size: 0.875rem;
		line-height: 1.45;
	}

	/* === между приёмами ===================================================== */


	/* Метка на шкале стоит на своём значении: --ln-pin-to задаёт карточка
	   (доля шкалы, где 0 — слева, нижняя граница нормы — 16,7 %, верхняя —
	   83,3 %). */
	.ln-lab {

		display: grid;
		gap: 6px;
	}

	.ln-lab__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		font-size: 0.875rem;
		color: var(--color-text-secondary);
	}

	.ln-lab__flag {
		padding: 2px 8px;
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--sig-amber) 18%, transparent);
		font-size: 0.75rem;
		font-weight: var(--fw-medium);
		color: color-mix(in srgb, var(--sig-amber) 70%, var(--color-text));
	}

	.ln-lab__value {
		margin: 0;
		font-size: 0.875rem;
		color: var(--color-text-muted);

		b {
			font-size: 2rem;
			font-weight: var(--fw-semibold);
			line-height: 1.1;
			letter-spacing: -0.02em;
			font-variant-numeric: tabular-nums;
			color: var(--color-text);
		}
	}

	/* Шкала: вся длина — 0…180, зелёная часть — норма 30…150. */
	.ln-lab__scale {
		position: relative;
		block-size: 8px;
		margin-block-start: 6px;
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--color-text) 8%, transparent);
	}

	.ln-lab__range {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 16.7%;
		inline-size: 66.6%;
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--sig-green) 45%, transparent);
	}

	.ln-lab__pin {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: var(--ln-pin-to, 13.3%);
		inline-size: 16px;
		block-size: 16px;
		border: 3px solid var(--sig-amber);
		border-radius: var(--radius-pill);
		background: var(--wpanel);
		box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow-color) 18%, transparent);
		translate: -50% -50%;
	}

	.ln-lab__ticks {
		position: relative;
		block-size: 14px;
		margin: 0;
		font-size: 0.6875rem;
		font-variant-numeric: tabular-nums;
		color: var(--color-text-muted);

		span {
			position: absolute;
			translate: -50% 0;
		}

		span:nth-child(1) {
			inset-inline-start: 0;
			translate: 0 0;
		}

		span:nth-child(2) {
			inset-inline-start: 16.7%;
		}

		span:nth-child(3) {
			inset-inline-start: 83.3%;
		}
	}

	.ln-lab__verdict {
		display: grid;
		margin: 6px 0 0;
		font-size: 0.8125rem;
		font-weight: var(--fw-medium);

		> span {
			display: inline-flex;
			grid-area: 1 / 1;
			align-items: center;
			gap: 7px;
		}
	}

	.ln-lab__busy {
		color: var(--color-text-muted);
		opacity: 0;
	}

	.ln-lab__dot {
		flex: none;
		inline-size: 8px;
		block-size: 8px;
		border-radius: var(--radius-pill);
		background: var(--sig-amber);
	}

	/* === перед приёмом ====================================================== */

	@property --ln-rows {
		syntax: "<number>";
		inherits: true;
		initial-value: 9;
	}

	.ln-pack {
		display: grid;
		gap: 10px;
	}

	.ln-pack__head {
		display: flex;
		flex-direction: column;
		gap: 1px;
		margin: 0;

		b {
			font-size: 0.9375rem;
			font-weight: var(--fw-semibold);
		}
	}

	.ln-pack__rows {
		display: flex;
		flex-direction: column;
		gap: 7px;
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 0.875rem;

		li {
			--on: clamp(0, var(--ln-rows) - var(--i), 1);
			display: flex;
			align-items: center;
			gap: 8px;
			opacity: calc(0.35 + var(--on) * 0.65);
		}

		.w-meta {
			margin-inline-start: auto;
		}
	}

	.ln-pack__tick {
		display: grid;
		flex: none;
		place-items: center;
		inline-size: 18px;
		block-size: 18px;
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--color-accent) calc(var(--on) * 100%), transparent);
		box-shadow: inset 0 0 0 1.5px
			color-mix(in srgb, var(--color-accent) calc(var(--on) * 100%), var(--color-border-strong));
		color: var(--color-accent-contrast);

		.icon {
			opacity: var(--on);
			stroke-width: 2.6;
		}
	}

	/* На самом узком телефоне кнопка уходит под подпись, а не за край. */
	.ln-pack__foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 10px;
		margin: 4px 0 0;
		padding-block-start: 10px;
		border-block-start: 1px solid var(--color-border);
	}

	/* Кнопка становится активной, когда в выписке собрано всё. */
	.ln-pack__send {
		--sig: var(--color-text);
		block-size: 34px;
		padding-inline: 14px;
		font-size: 0.8125rem;
		color: var(--color-background);
	}

	/* === движение ===========================================================
	   Карточки играют по очереди, с нахлёстом: после приёма → между
	   приёмами → перед приёмом — один раз, когда блок на экране; снова —
	   когда до блока докрутят ещё раз или наведут на карточку. Пока карточка ждёт очереди, она
	   в начале сюжета; в свою очередь (is-play) проигрывает его один раз
	   за --play; потом (is-done) стоит на итоге. Итог — это обычный вид
	   карточки: его же видно без скриптов и при отказе от движения.
	   ====================================================================== */

	.lane__card--sand {
		--play: 3750ms;
	}

	.lane__card--iris {
		--play: 4500ms;
	}

	.lane__card--leaf {
		--play: 4000ms;
	}

	/* Наведение: рамка карточки чуть светится своим цветом — видно, что
	   карточка живая, и её сюжет тут же проигрывается заново. */
	@media (hover: hover) {
		.lane__card {
			box-shadow:
				inset 0 0 0 1px transparent,
				0 0 0 0 transparent;
			transition: box-shadow 420ms var(--ease-out);

			&:hover {
				box-shadow:
					inset 0 0 0 1px color-mix(in srgb, var(--tone-ink) 30%, transparent),
					0 10px 36px -14px color-mix(in srgb, var(--tone-ink) 45%, transparent);
			}
		}
	}

	/* --- ждёт своей очереди: начало сюжета --- */
	.is-seq > li:not(.is-play, .is-done) {
		.ln-doc mark {
			background: transparent;
		}

		.ln-switch {
			background: var(--color-border-strong);
		}

		.ln-switch i {
			inset-inline-start: 2px;
		}

		.ln-doc__plain {
			opacity: 0;
			translate: 0 -6px;
			clip-path: inset(0 0 100% 0 round 12px);
		}

		.ln-lab__pin {
			opacity: 0;
			scale: 0;
		}

		.ln-lab__flag {
			opacity: 0;
			scale: 0.85;
		}

		.ln-lab__done {
			opacity: 0;
			translate: 0 4px;
		}

		.ln-pack {
			--ln-rows: 0;
		}

		.ln-pack__send {
			background: color-mix(in srgb, var(--color-text) 14%, transparent);
			color: var(--color-text-muted);
		}
	}

	/* --- своя очередь: сюжет один раз --- */
	.is-seq > li.is-play {
		.ln-doc mark {
			animation: ln-mark var(--play) ease both;
		}

		.ln-switch {
			animation: ln-switch var(--play) ease both;
		}

		.ln-switch i {
			animation: ln-knob var(--play) var(--rise-ease, ease) both;
		}

		.ln-doc__plain {
			animation: ln-plain var(--play) var(--rise-ease, ease) both;
		}

		.ln-lab__pin {
			animation: ln-pin var(--play) cubic-bezier(0.4, 0, 0.2, 1) both;
		}

		.ln-lab__flag {
			animation: ln-flag var(--play) ease both;
		}

		.ln-lab__busy {
			animation: ln-busy var(--play) ease both;
		}

		.ln-lab__done {
			animation: ln-done var(--play) ease both;
		}

		.ln-pack {
			animation: ln-rows var(--play) linear both;
		}

		.ln-pack__send {
			animation: ln-send var(--play) ease both;
		}
	}

	/* После приёма: термин подсвечивается → тумблер «простыми словами»
	   включается → выезжает перевод. */
	@keyframes ln-mark {
		0%,
		6% {
			background: transparent;
		}

		18%,
		100% {
			background: color-mix(in srgb, var(--sig-amber) 22%, transparent);
		}
	}

	@keyframes ln-switch {
		0%,
		30% {
			background: var(--color-border-strong);
		}

		38%,
		100% {
			background: var(--color-accent);
		}
	}

	@keyframes ln-knob {
		0%,
		30% {
			inset-inline-start: 2px;
		}

		40%,
		100% {
			inset-inline-start: 16px;
		}
	}

	@keyframes ln-plain {
		0%,
		44% {
			opacity: 0;
			translate: 0 -6px;
			clip-path: inset(0 0 100% 0 round 12px);
		}

		66%,
		100% {
			opacity: 1;
			translate: 0 0;
			clip-path: inset(0 0 0 0 round 12px);
		}
	}

	/* Между приёмами: на шкале вырастает точка значения →
	   «ниже нормы» → Люм смотрит историю → вывод о срочности. */
	@keyframes ln-pin {
		0%,
		6% {
			opacity: 0;
			scale: 0;
		}

		10% {
			opacity: 1;
			scale: 1.35;
		}

		14%,
		100% {
			opacity: 1;
			scale: 1;
		}
	}

	@keyframes ln-flag {
		0%,
		26% {
			opacity: 0;
			scale: 0.85;
		}

		34%,
		100% {
			opacity: 1;
			scale: 1;
		}
	}

	@keyframes ln-busy {
		0%,
		42% {
			opacity: 0;
		}

		46%,
		72% {
			opacity: 1;
		}

		76%,
		100% {
			opacity: 0;
		}
	}

	@keyframes ln-done {
		0%,
		74% {
			opacity: 0;
			translate: 0 4px;
		}

		84%,
		100% {
			opacity: 1;
			translate: 0 0;
		}
	}

	/* Перед приёмом: пункты отмечаются через равные промежутки → кнопка
	   становится активной и коротко вспыхивает: выписку можно отправить. */
	@keyframes ln-rows {
		0%,
		10% {
			--ln-rows: 0;
		}

		14%,
		30% {
			--ln-rows: 1;
		}

		34%,
		50% {
			--ln-rows: 2;
		}

		54%,
		100% {
			--ln-rows: 3;
		}
	}

	@keyframes ln-send {
		0%,
		64% {
			background: color-mix(in srgb, var(--color-text) 14%, transparent);
			color: var(--color-text-muted);
			scale: 1;
			box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-text) 30%, transparent);
		}

		72% {
			background: var(--color-text);
			color: var(--color-background);
			scale: 1.05;
			box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-text) 30%, transparent);
		}

		86%,
		100% {
			background: var(--color-text);
			color: var(--color-background);
			scale: 1;
			box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-text) 0%, transparent);
		}
	}

	/* На телефоне нижняя строка карточки лишняя: сюжет и так виден. */
	@media (max-width: 899px) {
		.lane__note {
			display: none;
		}
	}
.flow {
		/* Сколько длится один шаг, пока полоса над ним заполняется. */
		--flow-step: 4s;
		margin-block-start: clamp(40px, 5vw, 72px);
	}

	.flow__label {
		margin: 0 0 var(--space-5);
	}

	/* Сами радиокнопки не показываем, но и не прячем от клавиатуры:
	   иначе шаг нельзя выбрать стрелками. */
	.flow__pick {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		opacity: 0;
		pointer-events: none;
	}

	.flow__rail {
		display: grid;
		gap: 0 var(--space-3);
		margin: 0;
		padding: 0;
		list-style: none;
		grid-template-columns: repeat(2, 1fr);
	}

	@media (min-width: 720px) {
		.flow__rail {
			grid-template-columns: repeat(4, 1fr);
		}
	}

	/* Над каждым шагом — своя дорожка. Заливка поверх неё показывает,
	   какой шаг идёт сейчас и сколько ему осталось. */
	.flow__rail label {
		position: relative;
		display: flex;
		align-items: baseline;
		gap: var(--space-3);
		padding-block: var(--space-4) var(--space-3);
		cursor: pointer;

		&::before,
		&::after {
			content: "";
			position: absolute;
			inset: 0 0 auto;
			block-size: 3px;
			border-radius: var(--radius-pill);
		}

		&::before {
			background: var(--color-border);
		}

		&::after {
			background: var(--color-accent);
			scale: 0 1;
			transform-origin: 0 50%;
			transition: scale 360ms var(--ease-out), opacity 360ms ease;
		}

		&:dir(rtl)::after {
			transform-origin: 100% 50%;
		}

		&:hover .flow__name {
			color: var(--color-text);
		}
	}

	.flow__num {
		font-size: var(--text-xs);
		font-variant-numeric: tabular-nums;
		color: var(--color-text-muted);
		transition: color 260ms ease;
	}

	.flow__name {
		font-size: var(--text-lg);
		color: var(--color-text-secondary);
		transition: color 260ms ease;
	}

	.flow__stage {
		display: grid;
		gap: var(--space-5);
		align-items: center;
		margin-block-start: var(--space-4);
	}

	@media (min-width: 900px) {
		.flow__stage {
			grid-template-columns: minmax(0, 1fr) auto;
			gap: var(--space-8);
		}
	}

	/* Тексты и статусы лежат стопкой: высота не скачет при переключении. */
	.flow__notes,
	.flow__states {
		display: grid;

		> * {
			grid-area: 1 / 1;
			opacity: 0;
			translate: 0 6px;
			transition:
				opacity 320ms ease,
				translate 320ms var(--ease-out);
		}
	}

	.flow__notes p {
		margin: 0;
		max-inline-size: 60ch;
		font-size: var(--text-lg);
		line-height: 1.5;
		color: var(--color-text-secondary);
		text-wrap: pretty;
	}

	.flow__file {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		justify-self: start;
		min-inline-size: 290px;
		padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
		border: 1px solid var(--wpanel-border);
		border-radius: var(--radius-lg);
		background: var(--wpanel);
		box-shadow: var(--wpanel-shadow);
		transition: opacity 400ms ease;
	}

	.flow__doc {
		display: grid;
		place-items: center;
		inline-size: 40px;
		block-size: 40px;
		border-radius: 12px;
		background: var(--color-accent-soft);
		color: var(--color-accent-ink);
		transition:
			background 400ms ease,
			color 400ms ease;
	}

	.flow__meta {
		display: flex;
		flex-direction: column;
		gap: 3px;

		b {
			font-size: var(--text-sm);
			font-weight: var(--fw-medium);
			text-decoration-color: transparent;
			transition: color 400ms ease, text-decoration-color 400ms ease;
		}
	}

	.flow__states span {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: var(--text-xs);
		color: var(--color-accent-ink);
		white-space: nowrap;
	}

	

	#safety-flow-1:checked ~ .flow__rail li:nth-child(1) label::after {
		scale: 1 1;
	}

	#safety-flow-1:checked ~ .flow__rail li:nth-child(1) :is(.flow__num, .flow__name) {
		color: var(--color-text);
	}

	#safety-flow-1:checked ~ .flow__stage :is(.flow__notes, .flow__states) > :nth-child(1) {
		opacity: 1;
		translate: none;
	}
	
	/* Пройденные шаги остаются закрашенными, но тише текущего. */
	#safety-flow-2:checked ~ .flow__rail li:nth-child(-n + 1) label::after {
		scale: 1 1;
		opacity: 0.4;
	}

	#safety-flow-2:checked ~ .flow__rail li:nth-child(2) label::after {
		scale: 1 1;
	}

	#safety-flow-2:checked ~ .flow__rail li:nth-child(2) :is(.flow__num, .flow__name) {
		color: var(--color-text);
	}

	#safety-flow-2:checked ~ .flow__stage :is(.flow__notes, .flow__states) > :nth-child(2) {
		opacity: 1;
		translate: none;
	}
	
	/* Пройденные шаги остаются закрашенными, но тише текущего. */
	#safety-flow-3:checked ~ .flow__rail li:nth-child(-n + 2) label::after {
		scale: 1 1;
		opacity: 0.4;
	}

	#safety-flow-3:checked ~ .flow__rail li:nth-child(3) label::after {
		scale: 1 1;
	}

	#safety-flow-3:checked ~ .flow__rail li:nth-child(3) :is(.flow__num, .flow__name) {
		color: var(--color-text);
	}

	#safety-flow-3:checked ~ .flow__stage :is(.flow__notes, .flow__states) > :nth-child(3) {
		opacity: 1;
		translate: none;
	}
	
	/* Пройденные шаги остаются закрашенными, но тише текущего. */
	#safety-flow-4:checked ~ .flow__rail li:nth-child(-n + 3) label::after {
		scale: 1 1;
		opacity: 0.4;
	}

	#safety-flow-4:checked ~ .flow__rail li:nth-child(4) label::after {
		scale: 1 1;
	}

	#safety-flow-4:checked ~ .flow__rail li:nth-child(4) :is(.flow__num, .flow__name) {
		color: var(--color-text);
	}

	#safety-flow-4:checked ~ .flow__stage :is(.flow__notes, .flow__states) > :nth-child(4) {
		opacity: 1;
		translate: none;
	}
	

	/* Последний шаг: файла больше нет — имя зачёркнуто, значок гаснет. */
	#safety-flow-4:checked ~ .flow__stage .flow__file {
		.flow__doc {
			background: var(--color-surface-2);
			color: var(--color-text-muted);
		}

		b {
			color: var(--color-text-muted);
			text-decoration: line-through;
			text-decoration-color: currentcolor;
		}

		.flow__states span {
			color: var(--color-text-muted);
		}
	}

	/* Автопрокрутка: заливка текущего шага бежит от нуля до конца, скрипт
	   по её окончании включает следующий. Пока блок не на экране, под
	   курсором или в фокусе с клавиатуры — пауза. */
	@media (prefers-reduced-motion: no-preference) {
		
		.flow.is-auto #safety-flow-1:checked ~ .flow__rail li:nth-child(1) label::after {
			animation: flow-fill var(--flow-step) linear both;
		}
		
		.flow.is-auto #safety-flow-2:checked ~ .flow__rail li:nth-child(2) label::after {
			animation: flow-fill var(--flow-step) linear both;
		}
		
		.flow.is-auto #safety-flow-3:checked ~ .flow__rail li:nth-child(3) label::after {
			animation: flow-fill var(--flow-step) linear both;
		}
		
		.flow.is-auto #safety-flow-4:checked ~ .flow__rail li:nth-child(4) label::after {
			animation: flow-fill var(--flow-step) linear both;
		}
		

		.flow.is-auto:is(:not(.is-playing), :hover, :has(:focus-visible)) .flow__rail label::after {
			animation-play-state: paused;
		}
	}

	@keyframes flow-fill {
		from {
			scale: 0 1;
		}
		to {
			scale: 1 1;
		}
	}

	/* Видимая рамка фокуса нужна на подписи — сама кнопка невидима. */
	
	#safety-flow-1:focus-visible ~ .flow__rail li:nth-child(1) label {
		outline: 2px solid var(--color-accent);
		outline-offset: 4px;
		border-radius: 6px;
	}
	
	#safety-flow-2:focus-visible ~ .flow__rail li:nth-child(2) label {
		outline: 2px solid var(--color-accent);
		outline-offset: 4px;
		border-radius: 6px;
	}
	
	#safety-flow-3:focus-visible ~ .flow__rail li:nth-child(3) label {
		outline: 2px solid var(--color-accent);
		outline-offset: 4px;
		border-radius: 6px;
	}
	
	#safety-flow-4:focus-visible ~ .flow__rail li:nth-child(4) label {
		outline: 2px solid var(--color-accent);
		outline-offset: 4px;
		border-radius: 6px;
	}
	

	/* В узкой колонке шаги плотнее: номер над названием, мелким кеглем.
	   Четыре в строку помещаются только на широком телефоне — на обычном
	   «Шифрование» налезало на «Хранение», поэтому там два ряда по два. */
	@container (width < 700px) {
		.flow__label {
			margin-block-end: var(--space-3);
		}

		.flow__rail {
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 0 var(--space-2);
		}

		.flow__rail label {
			flex-direction: column;
			gap: 2px;
			padding-block: var(--space-3) var(--space-2);
		}

		.flow__name {
			font-size: var(--text-sm);
		}
	}

	@container (width < 500px) {
		.flow__rail {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-1) var(--space-4);
		}
	}
/* Сверху — только общий зазор между блоками: свой отступ здесь его
	   удваивал, и над Люмом зияла пустота. Снизу — воздух до подвала. */
	.cta {
		padding-block: 0 var(--section-gap);
		/* Свет за Люмом шире колонки — по горизонтали его просто не видно
		   за краем, прокрутки вбок он не даёт. */
		overflow-x: clip;
	}

	.cta__stage {
		position: relative;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;

		.eyebrow {
			margin: var(--space-4) 0 0;
		}

		h2 {
			margin: var(--space-2) 0 0;
			text-wrap: balance;
		}

		.lead {
			margin: var(--space-3) 0 0;
		}
	}

	/* Свет за Люмом: сходит на нет раньше, чем кончается слой, поэтому
	   краёв у него нет. Сглаживание ступеней — общий --dither. */
	.cta__glow {
		position: absolute;
		inset: -8% 0 -4%;
		z-index: -1;
		background:
			var(--dither),
			radial-gradient(
				closest-side at 50% 42%,
				var(--lum-glow) 0%,
				var(--lum-glow-halo) 55%,
				transparent 100%
			);
		background-size: var(--dither-size), auto;
		pointer-events: none;
	}

	.cta__lum {
		inline-size: clamp(166px, 15vw, 226px);
		cursor: pointer;
	}

	.cta__install {
		justify-content: center;
		margin-block-start: var(--space-8);
	}

	/* Под кнопкой — тихая строка-гарантия, без рамки и значков. */
	.cta__note {
		margin: var(--space-6) 0 0;
		font-size: var(--text-sm);
		color: var(--color-text-secondary);
		text-wrap: balance;
	}

	/* В узкой колонке Люм поменьше — блок целиком помещается в экран
	   телефона. */
	@container (width < 700px) {
		.cta__lum {
			inline-size: 136px;
		}

		.cta__install {
			margin-block-start: var(--space-6);
		}

		/* Примечание про бесплатность на телефоне не нужно: над
		   заголовком уже стоит «Ореол бесплатный». */
		.cta__note {
			display: none;
		}
	}
.faq {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: clamp(48px, 6vw, 88px);
	}

	/* Заголовок — над лентой и по её левому краю. */
	.faq__head {
		inline-size: 100%;
		max-inline-size: 960px;
		margin-block-end: calc(var(--space-6) - clamp(48px, 6vw, 88px));
	}

	/* Лента не во всю ширину: длинная строка вопроса неудобна для чтения,
	   а короткая колонка оставляет воздух справа. */
	.faq__list {
		inline-size: 100%;
		max-inline-size: 960px;
		margin-inline: auto;
		border-block-end: 1px solid var(--color-border);
	}

	/* Название раздела — метка внутри ленты, а не отдельный заголовок. */
	.faq__group {
		margin: 0;
		padding-block: var(--space-6) var(--space-3);
		border-block-start: 1px solid var(--color-border);
		font-family: var(--font-sans);
		font-size: var(--text-xs);
		font-weight: var(--fw-medium);
		text-transform: uppercase;
		color: var(--color-text-muted);
	}

	.faq__group:first-child {
		border-block-start: 0;
		padding-block-start: 0;
	}

	.faq__row {
		border-block-start: 1px solid var(--color-border);
	}

	.faq__row summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-5);
		padding-block: var(--space-5);
		cursor: pointer;
		list-style: none;

		&::-webkit-details-marker {
			display: none;
		}
	}

	.faq__question {
		font-size: var(--text-lg);
		line-height: 1.35;
		transition: color 200ms ease;
	}

	.faq__row summary:hover .faq__question {
		color: var(--color-accent-ink);
	}

	/* Плюс нарисован двумя линиями и поворачивается в крестик — иконочный
	   шрифт ради одного знака не нужен, а поворот читается как действие. */
	.faq__sign {
		position: relative;
		flex: none;
		inline-size: 20px;
		block-size: 20px;
		transition: transform 280ms var(--rise-ease, ease);

		&::before,
		&::after {
			content: "";
			position: absolute;
			inset-block-start: 50%;
			inset-inline-start: 50%;
			inline-size: 16px;
			block-size: 1.5px;
			border-radius: 1px;
			background: var(--color-text-secondary);
			translate: -50% -50%;
		}

		&::after {
			rotate: 90deg;
		}
	}

	.faq__row[open] .faq__sign {
		transform: rotate(135deg);
	}

	.faq__answer {
		max-inline-size: 72ch;
		padding-block-end: var(--space-6);
		font-size: var(--text-base);
		line-height: 1.6;
		color: var(--color-text-secondary);

		p {
			margin: 0;
		}

		p + p {
			margin-block-start: var(--space-3);
		}

		a {
			color: var(--color-accent-ink);
		}
	}

	/* Без разделов первая строка ленты — без черты сверху, как и раздел. */
	.faq__list > .faq__row:first-child {
		border-block-start: 0;
	}

	.faq__pending {
		margin-block-start: var(--space-3) !important;
		font-size: var(--text-sm);
		color: var(--color-text-muted);
	}

	/* Плавное раскрытие. Там, где браузер этого ещё не умеет, ответ просто
	   появляется сразу — содержимое от этого не страдает. */
	@media (prefers-reduced-motion: no-preference) {
		.faq__row::details-content {
			block-size: 0;
			overflow: hidden;
			transition:
				block-size 320ms var(--rise-ease, ease),
				content-visibility 320ms allow-discrete;
		}

		.faq__row[open]::details-content {
			block-size: auto;
		}
	}

	/* Про угрозу жизни не прячем под раскрытие: этот ответ виден всегда. */
	.faq__row--urgent {
		padding-block: var(--space-5);
	}

	.faq__row--urgent .faq__question {
		display: block;
		margin: 0 0 var(--space-2);
		color: var(--color-accent-ink);
	}

	.faq__answer--open {
		padding-block-end: 0;
	}

	/* Призыв под лентой — по центру, как и всё на странице. */
	.faq__ask {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
		inline-size: 100%;
		max-inline-size: 860px;
		text-align: center;
	}

	/* Заголовок с тире должен помещаться в строку: перенос по тире оставляет
	   вторую строку начинающейся со знака — так не набирают. */
	.faq__ask h2 {
		margin: 0;
		text-wrap: balance;
	}

	.faq__ask .lead {
		margin: 0;
	}

	.faq__ask-actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-3);
		margin: var(--space-2) 0 0;
	}

	/* В узкой колонке строки вопросов плотнее — список пробегают глазами.
	   Строка всё равно выше 44px: попасть пальцем легко. */
	@container (width < 700px) {
		.faq__group {
			padding-block: var(--space-5) var(--space-2);
		}

		.faq__row summary {
			gap: var(--space-4);
			padding-block: var(--space-4);
		}

		.faq__question {
			font-size: var(--text-base);
		}
	}
.site-footer {
		position: relative;
		margin-block-start: var(--section-gap);
		padding-block-start: clamp(36px, 4vw, 56px);
		border-block-start: 1px solid var(--color-border);
		/* Имя внизу срезается краем страницы — поэтому обрезка здесь. */
		overflow: hidden;
	}

	/* Одна сетка на весь подвал. Отдельной нижней полосы нет: оговорки и
	   копирайт встают вторым рядом под своими колонками, и подвал
	   не растягивается пустотой. */
	.site-footer__grid {
		display: grid;
		gap: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 56px);
		grid-template-columns: 1fr;
	}

	@media (min-width: 900px) {
		.site-footer__grid {
			grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, 1fr));
		}

		.site-footer__brand {
			grid-column: 1;
			grid-row: 1;
		}

		/* Оговорки начинаются от левого края, под знаками: это продолжение
		   рассказа о себе, а не подпись к колонкам ссылок. Тянутся на три
		   колонки — иначе текст ломается на шесть строк. */
		.site-footer__notes {
			grid-column: 1 / 4;
			grid-row: 2;
		}

		.site-footer__side {
			grid-column: 4;
			grid-row: 2;
			align-self: end;
			justify-content: flex-end;
		}
	}

	.site-footer__brand {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}

	/* Задаём ширину, а не высоту: общее правило для картинок с размерами
	   ставит высоту в auto и весом перебивает класс. Высота считается
	   от пропорций файла и совпадает со знаком Ореола. */
	.site-footer__parent {
		inline-size: 150px;
		opacity: 0.85;
	}

	/* Две колонки: значок и текст. Значок живёт в ячейке высотой в одну строку
	   текста (1lh) и центрируется по первой строке, а не по всему абзацу. */
	.site-footer__about {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--space-3) var(--space-3);
		max-inline-size: 38ch;
		font-size: var(--text-sm);
		line-height: var(--lh-normal);
		color: var(--color-text-secondary);

		p {
			margin: 0;
		}
	}

	.site-footer__icon {
		display: grid;
		place-items: center;
		block-size: 1lh;
		inline-size: 26px;
	}

	.site-footer__column {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);

		.eyebrow {
			margin: 0;
		}

		ul {
			display: flex;
			flex-direction: column;
			gap: var(--space-3);
			margin: 0;
			padding: 0;
			list-style: none;
		}

		a {
			color: var(--color-text);
			text-decoration: none;
			transition: color 200ms var(--ease-out);

			&:hover {
				color: var(--color-accent-ink);
			}
		}
	}

	.site-footer__notes {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		align-self: end;
		max-inline-size: 62ch;

		p {
			margin: 0;
			font-size: var(--text-sm);
			line-height: var(--lh-normal);
			color: var(--color-text-muted);
		}
	}

	.site-footer__contact a,
	.site-footer__pending {
		color: var(--color-text-secondary);
	}

	.site-footer__side {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.site-footer__copy {
		margin: 0;
		font-size: var(--text-sm);
		color: var(--color-text-muted);
	}

	/* Имя во всю ширину. Нижняя половина уходит за край страницы — так это
	   читается как тиснение на обложке, а не как ещё одна строка текста. */
	/* Надпись уходит под содержимое: она подтянута вверх и заходит под
	   нижние строки, а не ложится поверх них. */
	.site-footer__inner {
		position: relative;
		z-index: 1;
	}

	.site-footer__wordmark {
		position: relative;
		z-index: 0;
		/* Подтягиваем вверх: у крупного шрифта над буквами остаётся заметный
		   просвет строки, и без этого надпись висит далеко от текста. */
		margin: -0.05em 0 -0.22em;
		padding-inline: var(--gutter);
		font-family: var(--font-display);
		font-size: clamp(5rem, 25vw, 23rem);
		line-height: 0.78;
		letter-spacing: var(--ls-display);
		text-align: center;
		white-space: nowrap;
		/* Прозрачность задаём цветом, а не opacity: opacity — число, и
		   light-dark() в нём молча не работает — надпись выходила чёрной. */
		color: color-mix(in srgb, var(--color-text) 6%, transparent);
		user-select: none;
		/* Нижний край растворяется, чтобы срез не читался как обрезка. */
		mask-image: linear-gradient(to bottom, #000 0, #000 52%, transparent 92%);
		mask-repeat: no-repeat;
		mask-size: 100% 100%;
	}

	/* В узкой колонке ссылки — в две колонки: «Продукт» и «Доверие» рядом,
	   «Документы» — под ними во всю ширину, строки там длинные. */
	@container (width < 700px) {
		.site-footer__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-5) var(--space-4);
		}

		.site-footer__brand,
		.site-footer__column:last-of-type,
		.site-footer__notes,
		.site-footer__side {
			grid-column: 1 / -1;
		}

		/* На телефоне абзацы о компании и о Люме лишние. Оговорка про 103 и 112
		   остаётся. */
		.site-footer__about {
			display: none;
		}
	}

	/* На телефоне большая надпись внизу подвала не нужна: она удлиняла
	   каждую страницу, ничего не сообщая. */
	@media (max-width: 719px) {
		.site-footer__wordmark {
			display: none;
		}

		.site-footer {
			padding-block-end: var(--space-6);
		}
	}