.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);
		}
	}
/* Заголовок блока — одной строкой на широком экране: узкая колонка
	   текста сужает только абзац под ним. */
	.stages .prose {
		max-inline-size: none;

		.lead {
			max-inline-size: var(--container-text);
		}
	}

	.stages__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
		gap: var(--space-4);
		margin: var(--space-8) 0 0;
		padding: 0;
		list-style: none;
	}

	/* --- общее для трёх виджетов --- */

	.sg {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		inline-size: min(100%, 340px);
		padding: var(--space-4);
	}

	/* Название и срок — в строку, а на самом узком телефоне срок уходит
	   под название, а не за край панели. */
	.sg__head {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 0 var(--space-3);
		margin: 0;
	}

	/* Надписи одной стадии лежат стопкой и сменяют друг друга на месте. */
	.sg-swap {
		display: grid;
		justify-items: end;

		> * {
			grid-area: 1 / 1;
		}
	}

	.sg-ok {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		color: var(--color-accent-ink);
	}

	/* --- день 1: документы и первый вопрос --- */

	.sg-doc {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: 10px 12px;
		border: 1px solid var(--wpanel-border);
		border-radius: 14px;
	}

	.sg-doc__icon {
		display: grid;
		flex: none;
		place-items: center;
		inline-size: 34px;
		block-size: 34px;
		border-radius: 10px;
		background: var(--color-accent-soft);
		color: var(--color-accent-ink);
	}

	.sg-doc__icon--form {
		background: color-mix(in srgb, var(--sig-violet) 14%, transparent);
		color: var(--sig-violet);
	}

	.sg-doc__text {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-inline-size: 0;
		font-size: var(--text-xs);
		color: var(--color-text-muted);

		b {
			font-size: var(--text-sm);
			font-weight: var(--fw-medium);
			color: var(--color-text);
		}
	}

	.sg-doc__state {
		display: grid;

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

		.w-spinner {
			inline-size: 11px;
			block-size: 11px;
			border-width: 1.5px;
		}
	}

	.sg-ask {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.sg-ask__bubble {
		align-self: flex-end;
		max-inline-size: 88%;
		margin: 0;
		padding: 8px 12px;
		border-radius: 14px 14px 5px 14px;
		background: var(--color-accent);
		color: var(--color-accent-contrast);
		font-size: var(--text-sm);
	}

	.sg-ask__lum {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
	}

	/* --- первые недели: дневник --- */

	.sg-grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 6px;

		> span {
			font-size: 11px;
			text-align: center;
			color: var(--color-text-muted);
		}
	}

	.sg-cell {
		aspect-ratio: 1;
		border-radius: 8px;
		background: color-mix(in srgb, var(--color-accent) 30%, transparent);

		&.is-tired {
			background: color-mix(in srgb, var(--sig-amber) 55%, transparent);
		}
	}

	/* В третьей стадии Люм связывает усталые дни — они обводятся. */
	.sg-cell.is-tired {
		box-shadow: 0 0 0 2px var(--wpanel), 0 0 0 3.5px var(--sig-amber);
	}

	@media (prefers-reduced-motion: no-preference) {
		.sg-cell.is-tired.w-from1,
		.sg-cell.is-tired.w-from2,
		.sg-cell.is-tired.w-from3 {
			animation:
				var(--w-stage-name) var(--beat) var(--ease-out) var(--w-delay, 0s) infinite both,
				sg-ring var(--beat) ease infinite;
		}
	}

	/* Очередь: карточки играют по одной, с нахлёстом, один раз, когда блок
	   на экране; снова — когда до него докрутят ещё раз (motion.njk). */
	.stages__list > li {
		--play: 5000ms;
	}

	@media (prefers-reduced-motion: no-preference) {
		.is-seq > li.is-play .sg-cell.is-tired {
			animation:
				var(--w-play-name) var(--play) var(--ease-out) var(--w-delay, 0s) both,
				sg-ring-play var(--play) ease both;
		}
	}

	@keyframes sg-ring-play {
		0%,
		62% {
			box-shadow: 0 0 0 2px var(--wpanel), 0 0 0 3.5px transparent;
		}
		74%,
		100% {
			box-shadow: 0 0 0 2px var(--wpanel), 0 0 0 3.5px var(--sig-amber);
		}
	}

	@keyframes sg-ring {
		0% {
			box-shadow: 0 0 0 2px var(--wpanel), 0 0 0 3.5px var(--sig-amber);
		}
		4%,
		66.67% {
			box-shadow: 0 0 0 2px var(--wpanel), 0 0 0 3.5px transparent;
		}
		73.67%,
		100% {
			box-shadow: 0 0 0 2px var(--wpanel), 0 0 0 3.5px var(--sig-amber);
		}
	}

	.sg-insight {
		display: flex;
		align-items: flex-start;
		gap: 7px;
		margin: 0;
		padding: 9px 11px;
		border-radius: 12px;
		background: color-mix(in srgb, var(--sig-amber) 12%, transparent);
		font-size: var(--text-xs);
		line-height: 1.4;

		.icon {
			flex: none;
			margin-block-start: 1px;
			color: var(--sig-amber);
		}
	}

	/* --- дальше: коридор тренда сужается --- */

	.sg-chart {
		display: block;
		inline-size: 100%;
		block-size: auto;
		overflow: visible;
	}

	.sg-low {
		fill: color-mix(in srgb, var(--sig-amber) 8%, transparent);
	}

	.sg-norm {
		fill: none;
		stroke: color-mix(in srgb, var(--sig-amber) 60%, transparent);
		stroke-width: 1.2;
		stroke-dasharray: 4 5;
	}

	.sg-halo {
		fill: color-mix(in srgb, var(--color-accent) 12%, transparent);
		stroke: color-mix(in srgb, var(--color-accent) 45%, transparent);
		stroke-width: 1.2;
		stroke-dasharray: 3 4;
	}

	.sg-cone {
		fill: color-mix(in srgb, var(--color-accent) 12%, transparent);
	}

	.sg-cone--tight {
		fill: color-mix(in srgb, var(--color-accent) 20%, transparent);
	}

	.sg-dash,
	.sg-line {
		fill: none;
		stroke: var(--color-accent);
		stroke-width: 2.4;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.sg-dash {
		stroke-dasharray: 5 6;
	}

	.sg-pt {
		circle {
			fill: var(--wpanel);
			stroke: var(--color-accent);
			stroke-width: 2.4;
		}

		text {
			font-size: 12px;
			font-weight: var(--fw-semibold);
			text-anchor: middle;
			fill: var(--color-text);
		}
	}

	.sg-pt--low circle {
		stroke: var(--sig-amber);
	}

	.sg-month {
		font-size: 11px;
		text-anchor: middle;
		fill: var(--color-text-muted);
	}

	.sg-state {
		justify-items: start;
		margin: 0;
		font-size: var(--text-xs);
		color: var(--color-text-secondary);

		> span {
			display: inline-flex;
			align-items: center;
			gap: 6px;
		}

		> span:last-child {
			color: var(--color-text);
			font-weight: var(--fw-medium);

			.icon {
				color: var(--sig-amber);
			}
		}
	}
.uploads__kinds {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
		gap: var(--space-4);
		margin: var(--space-8) 0 0;
		padding: 0;
		list-style: none;
	}

	/* --- общее --- */

	.up {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		inline-size: min(100%, 340px);
		padding: var(--space-4);
	}

	.up-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-3);
		margin: 0;
	}

	.up-file {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}

	.up-file__text {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-inline-size: 0;
		font-size: var(--text-xs);
		color: var(--color-text-muted);

		b {
			font-size: var(--text-sm);
			font-weight: var(--fw-medium);
			color: var(--color-text);
		}
	}

	.up-state {
		display: grid;

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

		.w-spinner {
			inline-size: 11px;
			block-size: 11px;
			border-width: 1.5px;
		}
	}

	.up-ok {
		color: var(--color-accent-ink);
	}

	/* Миниатюра фото бланка: слегка повёрнутый листок со строчками. */
	.up-thumb {
		display: flex;
		flex: none;
		flex-direction: column;
		gap: 3px;
		inline-size: 34px;
		block-size: 42px;
		padding: 6px 5px;
		border: 1px solid var(--wpanel-border);
		border-radius: 6px;
		background: var(--paper);
		box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent);
		rotate: -4deg;

		i {
			block-size: 3px;
			border-radius: 2px;
			background: var(--color-border-strong);

			&:nth-child(2n) {
				inline-size: 70%;
			}
		}
	}

	.up-pdf {
		display: grid;
		flex: none;
		place-items: center;
		inline-size: 34px;
		block-size: 42px;
		border-radius: 6px;
		background: color-mix(in srgb, var(--sig-red) 14%, transparent);
		color: var(--sig-red);
		font-size: 11px;
		font-weight: var(--fw-semibold);
		letter-spacing: 0.02em;
	}

	/* --- анализы: таблица с нормами --- */

	.up-rows {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		border-block-start: 1px solid var(--color-border);
		list-style: none;

		li {
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: baseline;
			column-gap: var(--space-3);
			padding: 7px 8px;
			margin-inline: -8px;
			border-radius: 8px;
			font-size: var(--text-xs);
			color: var(--color-text-secondary);
		}

		b {
			font-size: var(--text-sm);
			font-weight: var(--fw-semibold);
			color: var(--color-text);
			text-align: end;

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

		.up-range {
			grid-column: 2;
			font-size: 0.6875rem;
			text-align: end;
			color: var(--color-text-muted);
		}
	}

	/* Вне нормы — подсветка строки в третьей стадии. */
	.up-rows li.is-low {
		background: color-mix(in srgb, var(--sig-amber) 12%, transparent);

		b {
			color: var(--amber-ink);
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.up-rows li.is-low {
			animation:
				var(--w-stage-name) var(--beat) var(--ease-out) var(--w-delay, 0s) infinite both,
				up-low var(--beat) ease infinite;
		}
	}

	/* Очередь: карточки играют по одной, с нахлёстом, один раз, когда блок
	   на экране; снова — когда до него докрутят ещё раз (motion.njk). */
	.uploads__kinds > li {
		--play: 4500ms;
	}

	@media (prefers-reduced-motion: no-preference) {
		.is-seq > li.is-play .up-rows li.is-low {
			animation:
				var(--w-play-name) var(--play) var(--ease-out) var(--w-delay, 0s) both,
				up-low-play var(--play) ease both;
		}

		.is-seq > li:not(.is-play, .is-done) .up-text mark {
			animation: none;
			background-size: 0% 100%;
		}

		.is-seq > li.is-play .up-text mark {
			animation: up-mark-play var(--play) var(--ease-out) var(--w-delay, 0s) both;
		}

		.is-seq > li.is-done .up-text mark {
			animation: none;
		}
	}

	@keyframes up-low-play {
		0%,
		62% {
			background: transparent;
		}
		74%,
		100% {
			background: color-mix(in srgb, var(--sig-amber) 12%, transparent);
		}
	}

	@keyframes up-mark-play {
		0%,
		30% {
			background-size: 0% 100%;
		}
		46%,
		100% {
			background-size: 100% 100%;
		}
	}

	@keyframes up-low {
		0% {
			background: color-mix(in srgb, var(--sig-amber) 12%, transparent);
		}
		4%,
		66.67% {
			background: transparent;
		}
		73.67%,
		100% {
			background: color-mix(in srgb, var(--sig-amber) 12%, transparent);
		}
	}

	.up-flag,
	.up-summary {
		display: inline-flex;
		align-items: center;
		align-self: flex-start;
		gap: 6px;
		margin: 0;
		padding: 5px 10px;
		border-radius: var(--radius-pill);
		font-size: var(--text-xs);
		font-weight: var(--fw-medium);
	}

	.up-flag {
		background: color-mix(in srgb, var(--sig-amber) 14%, transparent);
		color: var(--amber-ink-strong);
	}

	.up-summary {
		background: var(--color-accent-soft);
		color: var(--color-accent-ink);
	}

	/* --- заключение: маркер по главному, внизу — назначения --- */

	.up-text {
		margin: 0;
		font-size: var(--text-sm);
		line-height: 1.55;
		color: var(--color-text-secondary);

		mark {
			padding: 1px 2px;
			border-radius: 4px;
			background: linear-gradient(
					color-mix(in srgb, var(--color-accent) 22%, transparent),
					color-mix(in srgb, var(--color-accent) 22%, transparent)
				)
				no-repeat 0 0 / 100% 100%;
			color: var(--color-text);
			box-decoration-break: clone;
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.up-text mark {
			animation: up-mark var(--beat) var(--ease-out) var(--w-delay, 0s) infinite both;
		}
	}

	/* Маркер проходит по словам во второй стадии и держится до конца круга. */
	@keyframes up-mark {
		0% {
			background-size: 100% 100%;
		}
		4%,
		33.33% {
			background-size: 0% 100%;
		}
		44%,
		100% {
			background-size: 100% 100%;
		}
	}

	.up-items {
		display: flex;
		flex-direction: column;
		gap: 6px;
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			display: flex;
			align-items: center;
			gap: var(--space-2);
			padding: 7px 10px;
			border: 1px solid var(--wpanel-border);
			border-radius: 12px;
			font-size: var(--text-xs);
			font-weight: var(--fw-medium);
		}
	}

	.up-items__mark {
		display: grid;
		place-items: center;
		inline-size: 24px;
		block-size: 24px;
		border-radius: 8px;
		background: var(--color-accent-soft);
		color: var(--color-accent-ink);
	}

	/* --- выписка: стопка страниц → хронология --- */

	.up-dis {
		display: grid;

		> * {
			grid-area: 1 / 1;
		}
	}

	.up-pages {
		position: relative;
		display: grid;
		place-items: center;
		align-content: center;
		gap: var(--space-2);

		span {
			grid-area: 1 / 1;
			inline-size: 64px;
			block-size: 80px;
			border: 1px solid var(--wpanel-border);
			border-radius: 6px;
			background: var(--paper);
			box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-color) 7%, transparent);

			&:nth-child(1) {
				rotate: -8deg;
				translate: -10px 2px;
			}

			&:nth-child(3) {
				rotate: 7deg;
				translate: 10px 0;
			}
		}

		p {
			display: inline-flex;
			grid-row: 2;
			align-items: center;
			gap: 6px;
			margin: 0;
			font-size: var(--text-xs);
			color: var(--color-text-muted);
		}

		.w-spinner {
			inline-size: 11px;
			block-size: 11px;
			border-width: 1.5px;
		}
	}

	.up-events {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			position: relative;
			display: grid;
			grid-template-columns: 70px 1fr;
			gap: var(--space-2);
			padding: 6px 0 6px 18px;
			font-size: var(--text-xs);
			color: var(--color-text-secondary);

			/* Точка и нить хронологии. */
			&::before {
				content: "";
				position: absolute;
				inset-inline-start: 0;
				inset-block-start: 11px;
				inline-size: 8px;
				block-size: 8px;
				border-radius: var(--radius-pill);
				background: var(--color-accent);
			}

			&:not(:last-child)::after {
				content: "";
				position: absolute;
				inset-inline-start: 3.5px;
				inset-block: 21px -7px;
				inline-size: 1px;
				background: var(--color-border-strong);
			}
		}

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

	/* --- как снимать: видоискатель и три правила --- */

	.uploads__shots {
		margin-block-start: clamp(48px, 6vw, 88px);

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

	.cam-row {
		/* Свой такт, чуть короче общего: три совета проходят быстрее. */
		--beat: 11s;
		--stage: calc(var(--beat) / 3);
		display: grid;
		gap: clamp(28px, 4vw, 64px);
		align-items: center;
	}

	@media (min-width: 760px) {
		.cam-row {
			grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
		}
	}

	.cam {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-4);
		border-radius: var(--radius-xl);
		background: var(--wcard);
	}

	.cam__view {
		position: relative;
		display: grid;
		place-items: center;
		inline-size: 100%;
		aspect-ratio: 3 / 4;
		overflow: hidden;
		border-radius: 22px;
		background: radial-gradient(90% 70% at 50% 45%, var(--cam-glow), var(--cam-dark));
	}

	.cam__corners {
		position: absolute;
		inset: 8%;
		z-index: 2;
		inline-size: 84%;
		block-size: 84%;
		fill: none;
		stroke: var(--sig-green);
		stroke-width: 1.6;
		stroke-linecap: round;
		vector-effect: non-scaling-stroke;
	}

	.cam__corners path {
		vector-effect: non-scaling-stroke;
		stroke-width: 3;
	}

	.cam__doc {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: 9px;
		inline-size: 64%;
		aspect-ratio: 1 / 1.32;
		padding: 16% 12%;
		overflow: hidden;
		border-radius: 6px;
		/* Бумага в кадре чуть серее белого — как на фото при комнатном
		   свете. Иначе блик на ней не виден. */
		background: var(--cam-paper);
		box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-color) 45%, transparent);

		i {
			block-size: 5px;
			border-radius: 3px;
			background: var(--cam-ink-soft);

			&:nth-child(1) {
				inline-size: 55%;
				margin-block-end: 6px;
				background: var(--cam-ink);
			}

			&:nth-child(3n) {
				inline-size: 78%;
			}
		}
	}

	/* Блик засвечивает строчки: в этом месте бланк не прочитать. */
	.cam__glare {
		position: absolute;
		inset: 4% 2% auto auto;
		inline-size: 78%;
		aspect-ratio: 1;
		border-radius: 50%;
		background: radial-gradient(
			closest-side,
			var(--white) 0%,
			var(--white) 38%,
			color-mix(in srgb, var(--white) 70%, transparent) 60%,
			color-mix(in srgb, var(--white) 0%, transparent) 100%
		);
		opacity: 0;
	}

	.cam__hint {
		display: grid;
		justify-items: center;
		margin: 0;
		font-size: var(--text-sm);
		font-weight: var(--fw-medium);

		> span {
			grid-area: 1 / 1;
		}
	}

	@media (prefers-reduced-motion: no-preference) {
		.cam__doc {
			animation: cam-doc var(--beat) var(--ease-out) infinite;
		}

		.cam__glare {
			animation: cam-glare var(--beat) ease infinite;
		}

		.cam__corners {
			animation: cam-corners var(--beat) linear infinite;
		}
	}

	/* 1 — лист перекошен и выравнивается; 3 — снят слишком близко,
	   углы срезаны, отъезжает, пока не войдёт целиком. */
	@keyframes cam-doc {
		0% {
			opacity: 1;
			rotate: 0deg;
			scale: 1;
		}
		3% {
			opacity: 0;
			rotate: 0deg;
		}
		3.5% {
			opacity: 0;
			rotate: -10deg;
		}
		7% {
			opacity: 1;
			rotate: -10deg;
		}
		22%,
		66.67% {
			rotate: 0deg;
			scale: 1;
		}
		69%,
		74% {
			scale: 1.34;
		}
		88%,
		100% {
			opacity: 1;
			rotate: 0deg;
			scale: 1;
		}
	}

	/* 2 — вспыхивает блик и уходит. */
	@keyframes cam-glare {
		0%,
		33.33% {
			opacity: 0;
		}
		36%,
		44% {
			opacity: 1;
		}
		58%,
		100% {
			opacity: 0;
		}
	}

	/* Рамка зеленеет, когда кадр исправлен, и гаснет, пока в нём ошибка. */
	@keyframes cam-corners {
		0%,
		19% {
			stroke: color-mix(in srgb, var(--white) 55%, transparent);
		}
		22%,
		33.33% {
			stroke: var(--sig-green);
		}
		35%,
		55% {
			stroke: color-mix(in srgb, var(--white) 55%, transparent);
		}
		58%,
		66.67% {
			stroke: var(--sig-green);
		}
		68.5%,
		85% {
			stroke: color-mix(in srgb, var(--white) 55%, transparent);
		}
		88%,
		100% {
			stroke: var(--sig-green);
		}
	}

	/* Правило в списке горит, пока видоискатель его показывает. */
	@property --tip-on {
		syntax: "<number>";
		inherits: true;
		initial-value: 0;
	}

	.cam__tips {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			display: grid;
			grid-template-columns: auto 1fr;
			column-gap: var(--space-4);
			row-gap: 2px;
			padding: var(--space-4) var(--space-5);
			border-radius: var(--radius-lg);
			background: color-mix(in srgb, var(--color-accent) calc(var(--tip-on) * 7%), transparent);
		}

		b {
			font-size: var(--text-lg);
			font-weight: var(--fw-medium);
		}

		span:last-child {
			grid-column: 2;
			font-size: var(--text-sm);
			color: var(--color-text-secondary);
		}
	}

	.cam__num {
		display: grid;
		grid-row: span 2;
		place-items: center;
		inline-size: 28px;
		block-size: 28px;
		border: 1px solid color-mix(in srgb, var(--color-accent) calc(var(--tip-on) * 100%), var(--color-border-strong));
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--color-accent) calc(var(--tip-on) * 100%), transparent);
		color: color-mix(in srgb, var(--color-accent-contrast) calc(var(--tip-on) * 100%), var(--color-text-muted));
		font-size: var(--text-xs);
		font-weight: var(--fw-semibold);
	}

	@media (prefers-reduced-motion: no-preference) {
		.cam__tips li {
			animation: cam-tip var(--beat) linear infinite;
			animation-delay: calc((var(--i) - 1) * var(--stage) - var(--beat));
		}
	}

	@keyframes cam-tip {
		0% {
			--tip-on: 0;
		}
		4%,
		30% {
			--tip-on: 1;
		}
		33.33%,
		100% {
			--tip-on: 0;
		}
	}

	/* В узкой колонке видоискатель — маленький слева, советы — справа
	   плотным списком: вместо полутора экранов — один взгляд. */
	@container (width < 700px) {
		.cam-row {
			grid-template-columns: minmax(0, 112px) minmax(0, 1fr);
			gap: var(--space-4);
			align-items: start;
		}

		.cam {
			gap: var(--space-2);
			padding: var(--space-2);
			border-radius: var(--radius-lg);
		}

		.cam__view {
			border-radius: 14px;
		}

		.cam__hint {
			font-size: var(--text-xs);
			text-align: center;
		}

		.cam__tips {
			gap: 0;

			li {
				column-gap: var(--space-3);
				padding: var(--space-2) var(--space-3);
			}

			b {
				font-size: var(--text-base);
			}

			/* Пояснения к советам на телефоне не нужны: названия
			   «Ровно», «Без бликов», «Целиком» понятны сами. */
			span:last-child {
				display: none;
			}
		}

		.cam__num {
			inline-size: 24px;
			block-size: 24px;
		}
	}
.cases__head {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);

		h2,
		.lead {
			margin: 0;
		}
	}

	.cases__hint {
		flex: none;
		font-size: var(--text-sm);
		color: var(--color-text-muted);
	}

	.cases__track {
		display: flex;
		gap: var(--space-4);
		margin: 0;
		padding: 0 0 var(--space-3);
		list-style: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;

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

	.case {
		display: flex;
		flex: 0 0 min(400px, 84vw);
		flex-direction: column;
		gap: var(--space-3);
		padding: var(--space-6);
		border-radius: var(--radius-xl);
		background: var(--wcard);
		scroll-snap-align: start;

		.eyebrow,
		h3 {
			margin: 0;
		}

		h3 {
			min-block-size: 2.5em;
			font-family: var(--font-sans);
			font-size: var(--text-lg);
			font-weight: var(--fw-semibold);
			line-height: 1.25;
			letter-spacing: -0.01em;
			text-wrap: balance;
		}
	}

	/* На широком экране три карточки помещаются в ряд: делят ширину
	   поровну, листать нечего — подсказка не нужна. Правило стоит после
	   базового .case — иначе то перебивало ширину. */
	@container (width >= 1000px) {
		.case {
			flex: 1 1 0;
		}

		.cases__hint {
			display: none;
		}
	}

	/* --- переписка --- */

	.case__chat {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		margin-block: var(--space-2);
		padding: var(--space-4);
	}

	.case__me {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 6px;
	}

	.case__file {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 10px;
		border: 1px solid var(--wpanel-border);
		border-radius: 12px;
		font-size: var(--text-xs);
		color: var(--color-text-secondary);

		.icon {
			color: var(--color-accent-ink);
		}
	}

	.case__bubble {
		margin: 0;
		padding: 9px 13px;
		border-radius: 16px 16px 16px 6px;
		background: color-mix(in srgb, var(--color-text) 5%, transparent);
		font-size: var(--text-sm);
		line-height: 1.45;

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

	.case__bubble--me {
		max-inline-size: 86%;
		border-radius: 16px 16px 6px 16px;
		background: var(--color-accent);
		color: var(--color-accent-contrast);
	}

	.case__lum {
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);

		.lum-avatar {
			margin-block-start: 2px;
		}
	}

	/* «Думает» и ответ лежат в одной ячейке: высота карточки не прыгает. */
	.case__reply {
		display: grid;
		flex: 1;
		min-inline-size: 0;

		> * {
			grid-area: 1 / 1;
		}
	}

	.case__busy {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		align-self: start;
		margin: 0;
		padding-block: 8px;
		font-size: var(--text-xs);
		color: var(--color-text-muted);
		opacity: 0;
	}

	.case__answer {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.case__chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 5px 10px;
		border-radius: var(--radius-pill);
		background: var(--color-accent-soft);
		color: var(--color-accent-ink);
		font-size: var(--text-xs);
		font-weight: var(--fw-medium);
	}

	.case__result {
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
		margin: auto 0 0;
		font-size: var(--text-sm);
		line-height: 1.45;
		color: var(--color-text-secondary);

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

	.case__result-mark {
		display: grid;
		flex: none;
		place-items: center;
		inline-size: 20px;
		block-size: 20px;
		margin-block-start: 1px;
		border-radius: var(--radius-pill);
		background: var(--color-accent);
		color: var(--color-accent-contrast);

		.icon {
			stroke-width: 2.4;
		}
	}

	/* Три стадии на общем такте. Без движения видна третья — ответ целиком. */
	@media (prefers-reduced-motion: no-preference) {
		.case__me {
			animation: case-send var(--beat) var(--ease-out) infinite;
		}

		.case__lum .lum-avatar {
			animation: case-avatar var(--beat) ease infinite;
		}

		.case__busy {
			animation: case-busy var(--beat) ease infinite;
		}

		.case__answer {
			animation: case-answer var(--beat) var(--ease-out) infinite;
		}
	}

	/* Очередь: карточки играют по одной, с нахлёстом, один раз за загрузку
	   страницы: ушли с блока и вернулись — итог так и стоит (motion.njk).
	   Ждёт — вопрос ещё не отправлен; своя очередь — вопрос уходит, Люм
	   думает, приходит ответ; потом — итог. */
	.cases__track > li {
		--play: 4250ms;
	}

	@media (prefers-reduced-motion: no-preference) {
		.is-seq > li:not(.is-play, .is-done) {
			.case__me {
				animation: none;
				opacity: 0;
				translate: 0 10px;
			}

			.case__lum .lum-avatar,
			.case__busy {
				animation: none;
				opacity: 0;
			}

			.case__answer {
				animation: none;
				opacity: 0;
				translate: 0 8px;
			}
		}

		.is-seq > li.is-play {
			.case__me {
				animation: case-send-play var(--play) var(--ease-out) both;
			}

			.case__lum .lum-avatar {
				animation: case-avatar-play var(--play) ease both;
			}

			.case__busy {
				animation: case-busy-play var(--play) ease both;
			}

			.case__answer {
				animation: case-answer-play var(--play) var(--ease-out) both;
			}
		}

		.is-seq > li.is-done :is(.case__me, .case__lum .lum-avatar, .case__busy, .case__answer) {
			animation: none;
		}
	}

	@keyframes case-send-play {
		0% {
			opacity: 0;
			translate: 0 10px;
		}
		16%,
		100% {
			opacity: 1;
			translate: 0 0;
		}
	}

	@keyframes case-avatar-play {
		0%,
		24% {
			opacity: 0;
		}
		34%,
		100% {
			opacity: 1;
		}
	}

	@keyframes case-busy-play {
		0%,
		28% {
			opacity: 0;
		}
		36%,
		60% {
			opacity: 1;
		}
		66%,
		100% {
			opacity: 0;
		}
	}

	@keyframes case-answer-play {
		0%,
		62% {
			opacity: 0;
			translate: 0 8px;
		}
		76%,
		100% {
			opacity: 1;
			translate: 0 0;
		}
	}

	/* 1 — вопрос уходит заново, 2 — Люм думает, 3 — ответ. */
	@keyframes case-send {
		0% {
			opacity: 1;
			translate: 0 0;
		}
		2.5% {
			opacity: 0;
			translate: 0 10px;
		}
		7%,
		100% {
			opacity: 1;
			translate: 0 0;
		}
	}

	@keyframes case-avatar {
		0% {
			opacity: 1;
		}
		4%,
		33.33% {
			opacity: 0;
		}
		40.33%,
		100% {
			opacity: 1;
		}
	}

	@keyframes case-busy {
		0%,
		33.33% {
			opacity: 0;
		}
		40.33%,
		66.67% {
			opacity: 1;
		}
		70%,
		100% {
			opacity: 0;
		}
	}

	@keyframes case-answer {
		0% {
			opacity: 1;
			translate: 0 0;
		}
		4%,
		66.67% {
			opacity: 0;
			translate: 0 8px;
		}
		73.67%,
		100% {
			opacity: 1;
			translate: 0 0;
		}
	}
/* Главная кнопка сайта: цвет, скругление и наведение — от общей .button,
	   здесь только размеры. Надпись не переносится. */
	.soon {
		margin: 0;
		padding: var(--space-3) var(--space-5);
		white-space: nowrap;
	}

	/* На телефоне «Скоро», значки магазинов и соседняя кнопка встают одной
	   колонкой одной ширины — по ширине пары значков: края совпадают,
	   ничего не гуляет. Класс продублирован намеренно: у блоков-хозяев
	   своя раскладка (flex в ряд), и без этого она перевешивала. */
	@media (max-width: 719px) {
		.soon-stack.soon-stack {
			display: grid;
			inline-size: fit-content;
			max-inline-size: 100%;
			gap: var(--space-3);

			> .stores {
				margin: 0;
			}
		}
	}

	.soon--lg {
		padding: 14px var(--space-6);
	}

	.soon--sm {
		padding-block: var(--space-2);
		font-size: var(--text-sm);
	}

	/* На тёмной плашке кнопка та же — акцентная, она читается на любом фоне. */

	/* Значки магазинов — только на телефоне: на компьютере приложение
	   не поставить, там остаётся одна надпись. ul.stores — не слабее
	   правил списков в текстовых страницах (там они столбиком). */
	ul.stores {
		display: none;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin: var(--space-3) 0 0;
		padding: 0;
		list-style: none;

		/* Размер — из width/height в разметке: у значка Google в самом файле
		   размера нет, и без них в строке он схлопывался в ноль. Высота обоих
		   одинаковая, 44 px. */
		img {
			display: block;
		}

		/* На самом узком телефоне (320 px) пара значков в 44 px не влезала
		   в строку и разъезжалась в два ряда — чуть ниже, и они снова рядом.
		   Атрибуты в селекторе — чтобы перевесить общее правило картинок. */
		@media (max-width: 340px) {
			img[width][height] {
				inline-size: auto;
				block-size: 42px;
			}
		}

		a {
			display: block;
			border-radius: 10px;

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

	@media (max-width: 719px) {
		ul.stores {
			display: flex;
		}
	}

	/* На странице «Начать» значки — единственное действие, их видно везде. */
	ul.stores.stores--always {
		display: flex;
	}

	.stores--center {
		justify-content: center;
	}

	.stores--start {
		justify-content: flex-start;
	}
.summary__note {
		margin: 0;
		font-size: var(--text-xs);
		color: var(--color-text-muted);
	}

	.summary__split {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
		gap: clamp(32px, 5vw, 56px);
		align-items: center;
	}

	.summary__copy {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);

		p {
			margin: 0;
		}
	}

	.sheet {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
		padding: var(--space-8);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background: var(--color-surface);
		font-size: var(--text-sm);
	}

	.sheet__head {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-3);
		padding-block-end: var(--space-4);
		border-block-end: 1px solid var(--color-border);

		b {
			display: block;
			font-weight: var(--fw-medium);
		}

		span span {
			color: var(--color-text-secondary);
		}
	}

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

	.sheet__table {
		inline-size: 100%;
		border-collapse: collapse;
		text-align: start;

		th,
		td {
			padding-block: var(--space-2);
			border-block-end: 1px solid var(--color-border);
			font-weight: var(--fw-regular);
			text-align: start;
			vertical-align: baseline;
		}

		thead th {
			font-size: var(--text-xs);
			letter-spacing: var(--ls-eyebrow);
			text-transform: uppercase;
			color: var(--color-text-muted);
		}

		tbody td:first-of-type {
			font-weight: var(--fw-medium);
		}
	}

	.sheet__block {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		line-height: 1.55;
		color: var(--color-text-secondary);

		ol {
			margin: 0;
			padding-inline-start: var(--space-5);
			display: flex;
			flex-direction: column;
			gap: var(--space-1);
		}
	}

	.sheet__foot {
		padding-block-start: var(--space-4);
		border-block-start: 1px solid var(--color-border);
		font-size: var(--text-xs);
		color: var(--color-text-muted);
	}

	/* На телефоне лист выписки показан сверху — с затуханием и кнопкой
	   «Показать целиком». Без скриптов лист виден весь: сворачивает его
	   скрипт, ставя блоку класс summary--peek. */
	.sheet__more {
		display: none;
	}

	@container (width < 700px) {
		.sheet {
			padding: var(--space-5);
		}

		.summary--peek .sheet {
			position: relative;
		}

		.summary--peek .sheet__more {
			display: inline-flex;
			align-self: center;
		}

		.summary--peek .sheet:not(.is-open) {
			max-block-size: 360px;
			overflow: hidden;

			&::after {
				content: "";
				position: absolute;
				inset-inline: 0;
				inset-block-end: 0;
				block-size: 150px;
				background: linear-gradient(to bottom, transparent, var(--color-surface) 70%);
				pointer-events: none;
			}

			.sheet__more {
				position: absolute;
				z-index: 1;
				inset-inline: 0;
				inset-block-end: var(--space-4);
				inline-size: fit-content;
				margin-inline: auto;
			}
		}
	}
/* Сверху — только общий зазор между блоками: свой отступ здесь его
	   удваивал, и над Люмом зияла пустота. Снизу — воздух до подвала. */
	.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;
		}
	}
.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);
		}
	}