.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);
		}
	}
.promises .figrow {
		margin: 0;
		padding: 0;
		list-style: none;
	}

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

	.promises .figcol__note {
		font-size: var(--text-base);
	}
.storage__table {
		inline-size: 100%;
		margin-block-start: var(--space-6);
		border-collapse: collapse;
		text-align: start;
	}

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

	.storage__table thead th {
		padding-block: 0 var(--space-3);
		border-block-start: 0;
		font-size: var(--text-xs);
		font-weight: var(--fw-medium);
		text-transform: uppercase;
		color: var(--color-text-muted);
	}

	/* Первая колонка — сама сущность, поэтому она заметнее остальных. */
	.storage__table tbody th {
		inline-size: 30%;
		font-size: var(--text-lg);
		color: var(--color-text);
	}

	.storage__table tbody td {
		font-size: var(--text-sm);
		color: var(--color-text-secondary);
	}

	.storage__table tbody tr:last-child th,
	.storage__table tbody tr:last-child td {
		border-block-end: 1px solid var(--color-border);
	}

	/* На телефоне таблица разваливается на карточки: подписи колонок
	   переезжают в ячейки, иначе значения теряют смысл. */
	@media (max-width: 860px) {
		.storage__table,
		.storage__table thead,
		.storage__table tbody,
		.storage__table tr,
		.storage__table th,
		.storage__table td {
			display: block;
		}

		.storage__table thead {
			display: none;
		}

		.storage__table tbody tr {
			padding-block: var(--space-5);
			border-block-start: 1px solid var(--color-border);
		}

		.storage__table tbody th,
		.storage__table tbody td {
			inline-size: auto;
			padding: 0;
			border: 0;
		}

		.storage__table tbody td {
			display: flex;
			justify-content: space-between;
			gap: var(--space-4);
			margin-block-start: var(--space-2);
		}

		.storage__table tbody td::before {
			content: attr(data-label);
			flex: none;
			font-size: var(--text-xs);
			text-transform: uppercase;
			color: var(--color-text-muted);
		}
	}

	/* В узкой колонке карточки строк листаются вбок (класс swipe у тела
	   таблицы): четыре одинаковые плашки столбиком занимали почти экран. */
	@container (width < 700px) {
		.storage__table tbody tr {
			padding: var(--space-4);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-lg);
			background: var(--color-surface);
		}

		.storage__table tbody th {
			font-size: var(--text-md);
		}
	}
/* === Никогда ============================================================ */

	.pl-never {
		display: grid;
		gap: clamp(28px, 4vw, 64px);
		align-items: center;
	}

	@media (min-width: 1000px) {
		.pl-never {
			grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		}
	}

	.pl-never__copy {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);

		h2,
		.lead {
			margin: 0;
		}
	}

	.pl-never__stage {
		display: grid;
		place-items: center;
		padding: clamp(20px, 3vw, 40px);
		border-radius: var(--radius-xl);
		background: var(--wcard);
	}

	/* Тёмное «устройство» в обеих темах — как у уровней срочности. */
	.pl-device {
		container-type: inline-size;
		inline-size: min(100%, 560px);
		padding: 6px;
		border-radius: 28px;
		background: var(--device-bg);
		box-shadow:
			0 0 0 1px var(--device-edge),
			var(--device-shadow);
		color: var(--device-text);
	}

	.pl-device__head {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 14px 16px;
		font-size: 0.875rem;

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

		> span:last-child {
			margin-inline-start: auto;
			font-size: 0.8125rem;
			color: color-mix(in srgb, var(--device-text) 50%, transparent);
		}
	}

	.pl-device__mark {
		display: grid;
		color: var(--sig-green);
	}

	.pl-reqs {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pl-req {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 12px;
		padding: 12px 14px;
		border-radius: 20px;
		background: color-mix(in srgb, var(--white) 5%, transparent);
	}

	.pl-req__icon {
		display: grid;
		place-items: center;
		inline-size: 34px;
		block-size: 34px;
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--white) 8%, transparent);
		color: color-mix(in srgb, var(--device-text) 78%, transparent);
	}

	.pl-req__text {
		display: flex;
		flex-direction: column;
		gap: 1px;
		min-inline-size: 0;
		font-size: 0.8125rem;
		color: color-mix(in srgb, var(--device-text) 55%, transparent);

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

	/* Статус: «входящий запрос» и штамп лежат в одной ячейке. */
	.pl-req__state {
		display: grid;
		justify-items: end;

		> span {
			display: inline-flex;
			grid-area: 1 / 1;
			align-items: center;
			gap: 6px;
			padding: 5px 10px;
			border-radius: var(--radius-pill);
			font-size: 0.75rem;
			font-weight: var(--fw-semibold);
			white-space: nowrap;
		}
	}

	/* Узко — штамп уходит под текст, иначе он сжимает имя в столбик. */
	@container (max-width: 460px) {
		.pl-req {
			grid-template-columns: auto minmax(0, 1fr);
			align-items: start;
		}

		.pl-req__state {
			grid-column: 2;
			justify-items: start;
		}
	}

	/* Подпись под ответом сотрудника длинная: одной строкой она раздвигала
	   столбец ответа, и его срезал край карточки. */
	@container (width < 700px) {
		.pl-human .w-meta {
			white-space: normal;
		}
	}

	/* На самом узком телефоне строке не хватало нескольких пикселей
	   под штамп «Только с вашего согласия». */
	@container (width < 300px) {
		.pl-req {
			gap: 10px;
			padding: 10px 12px;
		}
	}

	.pl-req__in {
		background: color-mix(in srgb, var(--white) 8%, transparent);
		color: color-mix(in srgb, var(--device-text) 70%, transparent);

		i {
			inline-size: 6px;
			block-size: 6px;
			border-radius: var(--radius-pill);
			background: var(--sig-blue);
		}
	}

	.pl-req__verdict {
		background: color-mix(in srgb, var(--sig) 18%, transparent);
		color: color-mix(in srgb, var(--sig) 78%, var(--white));

		.icon {
			stroke-width: 2.4;
		}
	}

	.pl-tally {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 4px 0 0;
		padding: 14px 16px 12px;
		font-size: 0.875rem;
		color: color-mix(in srgb, var(--device-text) 62%, transparent);

		/* Не счётчик, а обещание: «никогда». Цифра «0» читалась так, будто
		   однажды она вырастет. */
		b {
			font-size: 1.125rem;
			font-weight: var(--fw-semibold);
			line-height: 1;
			color: var(--sig-green);
		}
	}

	/* === Всегда ============================================================= */

	.pl-always__heading {
		margin: clamp(56px, 7vw, 104px) 0 var(--space-8);
	}

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

	/* Подписи в две строки у всех: иначе заголовки карточек в ряду
	   стоят на разной высоте — короткая подпись опускает свой вниз. */
	.pl-always .wcard__note {
		min-block-size: calc(2lh);
	}

	.pl-w {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		inline-size: min(100%, 300px);
		padding: var(--space-4);
	}

	.pl-swap {
		display: grid;
		margin: 0;

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

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

	/* --- выгрузить --- */

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

	.pl-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);
	}

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

		b {
			overflow: hidden;
			font-size: var(--text-sm);
			font-weight: var(--fw-medium);
			color: var(--color-text);
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	.pl-bar {
		display: block;
		block-size: 6px;
		overflow: hidden;
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--color-text) 8%, transparent);

		i {
			display: block;
			block-size: 100%;
			border-radius: inherit;
			background: var(--color-accent);
			transform-origin: 0 50%;
		}
	}

	.pl-status {
		font-size: var(--text-xs);
		color: var(--color-text-muted);

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

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

	.pl-action {
		position: relative;
		align-self: flex-start;
	}

	.pl-dl {
		--sig: var(--sig-green);
	}

	.pl-dl [data-state]:not(:last-child) {
		opacity: 0;
	}

	.pl-cursor {
		opacity: 0;
	}

	.pl-cursor--dl {
		inset-block-start: 58%;
		inset-inline-start: 60%;
	}

	/* --- удалить --- */

	.pl-erase {
		min-block-size: 196px;
	}

	.pl-erase > :is(.pl-erase__list, .pl-confirm, .pl-empty) {
		grid-area: 1 / 1;
	}

	.pl-erase {
		display: grid;
	}

	.pl-erase__list {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);

		ul {
			display: flex;
			flex-direction: column;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		li {
			display: flex;
			justify-content: space-between;
			padding: 8px 0;
			border-block-end: 1px solid var(--color-border);
			font-size: var(--text-sm);
		}
	}

	.pl-danger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		block-size: 38px;
		border: 1.5px solid color-mix(in srgb, var(--sig-red) 60%, transparent);
		border-radius: var(--radius-pill);
		color: var(--sig-red);
		font-size: var(--text-sm);
		font-weight: var(--fw-semibold);
	}

	/* Подтверждение — лист снизу поверх списка. */
	.pl-confirm {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-self: end;
		gap: var(--space-3);
		padding: var(--space-4);
		border-radius: 18px;
		background: var(--wpanel);
		box-shadow:
			0 0 0 1px var(--wpanel-border),
			0 -12px 30px color-mix(in srgb, var(--shadow-color) 12%, transparent);
		text-align: center;

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

	.pl-confirm__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2);

		span {
			display: grid;
			place-items: center;
			block-size: 36px;
			border-radius: var(--radius-pill);
			background: color-mix(in srgb, var(--color-text) 7%, transparent);
			font-size: var(--text-sm);
			font-weight: var(--fw-medium);
		}
	}

	.pl-confirm__yes {
		background: var(--sig-red) !important;
		color: var(--white);
	}

	.pl-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		text-align: center;

		b {
			margin-block-start: var(--space-2);
			font-size: var(--text-md);
			font-weight: var(--fw-semibold);
		}

		> span:last-child {
			font-size: var(--text-xs);
			color: var(--color-text-muted);
		}
	}

	.pl-empty__mark {
		display: grid;
		place-items: center;
		inline-size: 44px;
		block-size: 44px;
		border-radius: var(--radius-pill);
		background: var(--color-accent-soft);
		color: var(--color-accent-ink);

		.icon {
			stroke-width: 2.2;
		}
	}

	.pl-cursor--erase {
		inset-block-start: 74%;
		inset-inline-start: 56%;
	}

	/* --- врачи --- */

	.pl-access__row {
		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: var(--space-3);
		padding: 12px;
		border: 1px solid var(--wpanel-border);
		border-radius: 16px;

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

	.pl-access__doc {
		display: grid;
		place-items: center;
		inline-size: 34px;
		block-size: 34px;
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--sig-violet) 14%, transparent);
		color: var(--sig-violet);
	}

	/* Переключатель; итоговое положение — включён. */
	.pl-switch {
		position: relative;
		inline-size: 44px;
		block-size: 26px;
		border-radius: var(--radius-pill);
		background: var(--sig-green);

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

	.pl-cursor--switch {
		inset-block-start: 58%;
		inset-inline-end: 4px;
	}

	.pl-access__state {
		font-size: var(--text-xs);
		line-height: 1.4;
		color: var(--color-text-muted);

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

		.icon {
			flex: none;
			margin-block-start: 1px;
		}
	}

	/* --- человек --- */

	.pl-bubble {
		margin: 0;
		padding: 8px 12px;
		border-radius: 14px 14px 14px 5px;
		background: color-mix(in srgb, var(--color-text) 6%, transparent);
		font-size: var(--text-sm);
		line-height: 1.4;
	}

	.pl-bubble--me {
		align-self: flex-end;
		max-inline-size: 86%;
		border-radius: 14px 14px 5px 14px;
		background: var(--color-accent);
		color: var(--color-accent-contrast);
	}

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

	.pl-agent__face {
		position: relative;
		display: grid;
		flex: none;
		place-items: center;
		inline-size: 30px;
		block-size: 30px;
		border-radius: var(--radius-pill);
		background: var(--tone-sand-deep);
		color: var(--tone-sand-ink);
		font-size: 12px;
		font-weight: var(--fw-semibold);

		/* «В сети». */
		i {
			position: absolute;
			inset: auto -1px -1px auto;
			inline-size: 9px;
			block-size: 9px;
			border: 2px solid var(--wpanel);
			border-radius: var(--radius-pill);
			background: var(--sig-green);
		}
	}

	.pl-agent__reply {
		flex: 1;
		min-inline-size: 0;
	}

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

	.pl-agent__answer {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	/* === Движение: три стадии на общем такте ================================ */

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

		.pl-tally b {
			animation: pl-tally var(--beat) var(--ease-out) infinite;
		}

		.pl-bar i {
			animation: pl-progress var(--beat) var(--ease-out) infinite;
		}

		.pl-dl {
			animation: pl-dl var(--beat) ease infinite;
		}

		.pl-dl [data-state]:nth-child(1) {
			animation: pl-dl-1 var(--beat) ease infinite;
		}

		.pl-dl [data-state]:nth-child(2) {
			animation: pl-dl-2 var(--beat) ease infinite;
		}

		.pl-dl [data-morph] {
			animation: pl-dl-width var(--beat) var(--ease-out) infinite;
		}

		.pl-cursor--dl {
			animation: pl-cursor-dl var(--beat) var(--ease-out) infinite;
		}

		.pl-cursor--erase {
			animation: pl-cursor-erase var(--beat) var(--ease-out) infinite;
		}

		.pl-danger {
			animation: pl-press-1 var(--beat) ease infinite;
		}

		.pl-confirm__yes {
			animation: pl-press-2 var(--beat) ease infinite;
		}

		.pl-switch {
			animation: pl-switch-bg var(--beat) ease infinite;
		}

		.pl-switch i {
			animation: pl-switch-knob var(--beat) var(--ease-out) infinite;
		}

		.pl-cursor--switch {
			animation: pl-cursor-switch var(--beat) var(--ease-out) infinite;
		}
	}

	/* Штамп: во второй стадии падает сверху с отскоком, строки по очереди. */
	@keyframes pl-stamp {
		0% {
			opacity: 1;
			scale: 1;
		}
		3%,
		33.33% {
			opacity: 0;
			scale: 1.4;
		}
		37% {
			opacity: 1;
			scale: 0.94;
		}
		40%,
		100% {
			opacity: 1;
			scale: 1;
		}
	}

	/* Итог загорается в третьей стадии. */
	@keyframes pl-tally {
		0% {
			scale: 1;
			text-shadow: 0 0 18px color-mix(in srgb, var(--sig-green) 70%, transparent);
		}
		4%,
		66.67% {
			scale: 1;
			opacity: 0.45;
			text-shadow: none;
		}
		70% {
			scale: 1.18;
			opacity: 1;
		}
		74%,
		100% {
			scale: 1;
			opacity: 1;
			text-shadow: 0 0 18px color-mix(in srgb, var(--sig-green) 70%, transparent);
		}
	}

	/* Архив: собирается в первой стадии, дособирается во второй. */
	@keyframes pl-progress {
		0% {
			scale: 1 1;
		}
		3% {
			scale: 0.04 1;
		}
		31% {
			scale: 0.64 1;
		}
		33.33% {
			scale: 0.66 1;
		}
		40%,
		100% {
			scale: 1 1;
		}
	}

	/* Кнопка: неактивна, пока архив не готов → тёмная → нажата → зелёная. */
	@keyframes pl-dl {
		0% {
			background: var(--sig-green);
			color: var(--white);
			opacity: 1;
			scale: 1;
		}
		4%,
		33.33% {
			background: var(--color-text);
			color: var(--color-background);
			opacity: 0.3;
			scale: 1;
		}
		38%,
		62% {
			background: var(--color-text);
			color: var(--color-background);
			opacity: 1;
			scale: 1;
		}
		64% {
			scale: 0.95;
		}
		66.67% {
			background: var(--color-text);
			color: var(--color-background);
			scale: 1;
		}
		71%,
		100% {
			background: var(--sig-green);
			color: var(--white);
			opacity: 1;
			scale: 1;
		}
	}

	@keyframes pl-dl-1 {
		0%,
		2% {
			opacity: 0;
		}
		5%,
		67% {
			opacity: 1;
		}
		69%,
		100% {
			opacity: 0;
		}
	}

	@keyframes pl-dl-2 {
		0% {
			opacity: 1;
		}
		2%,
		68% {
			opacity: 0;
		}
		72%,
		100% {
			opacity: 1;
		}
	}

	@keyframes pl-dl-width {
		0% {
			inline-size: var(--w2);
		}
		5%,
		67% {
			inline-size: var(--w1);
		}
		72%,
		100% {
			inline-size: var(--w2);
		}
	}

	/* Курсор приходит во второй стадии и жмёт «Скачать». */
	@keyframes pl-cursor-dl {
		0%,
		36% {
			opacity: 0;
			translate: 60px 50px;
			scale: 1;
		}
		40% {
			opacity: 1;
			translate: 60px 50px;
		}
		56%,
		62% {
			opacity: 1;
			translate: 0 0;
			scale: 1;
		}
		64% {
			scale: 0.82;
		}
		66.67% {
			opacity: 1;
			translate: 0 0;
			scale: 1;
		}
		74%,
		100% {
			opacity: 0;
			translate: 30px 50px;
			scale: 1;
		}
	}

	/* Курсор: в первой стадии жмёт «Удалить всё», во второй — «Удалить». */
	@keyframes pl-cursor-erase {
		0%,
		4% {
			opacity: 0;
			translate: 40px 60px;
			scale: 1;
		}
		8% {
			opacity: 1;
			translate: 40px 60px;
		}
		22%,
		28% {
			opacity: 1;
			translate: 0 0;
			scale: 1;
		}
		30% {
			scale: 0.82;
		}
		33.33% {
			translate: 0 0;
			scale: 1;
		}
		50%,
		60% {
			opacity: 1;
			translate: 44px 6px;
			scale: 1;
		}
		62% {
			scale: 0.82;
		}
		66.67% {
			opacity: 1;
			translate: 44px 6px;
			scale: 1;
		}
		72%,
		100% {
			opacity: 0;
			translate: 70px 60px;
			scale: 1;
		}
	}

	@keyframes pl-press-1 {
		0%,
		29% {
			scale: 1;
			background: transparent;
		}
		30% {
			scale: 0.95;
			background: color-mix(in srgb, var(--sig-red) 12%, transparent);
		}
		33%,
		100% {
			scale: 1;
			background: transparent;
		}
	}

	@keyframes pl-press-2 {
		0%,
		61% {
			scale: 1;
		}
		62% {
			scale: 0.94;
		}
		65%,
		100% {
			scale: 1;
		}
	}

	/* Переключатель: выключен, во второй стадии курсор его щёлкает. */
	@keyframes pl-switch-bg {
		0% {
			background: var(--sig-green);
		}
		4%,
		62% {
			background: color-mix(in srgb, var(--color-text) 18%, transparent);
		}
		66%,
		100% {
			background: var(--sig-green);
		}
	}

	@keyframes pl-switch-knob {
		0% {
			translate: 18px 0;
		}
		4%,
		62% {
			translate: 0 0;
		}
		66%,
		100% {
			translate: 18px 0;
		}
	}

	@keyframes pl-cursor-switch {
		0%,
		36% {
			opacity: 0;
			translate: 30px 50px;
			scale: 1;
		}
		40% {
			opacity: 1;
			translate: 30px 50px;
		}
		54%,
		60% {
			opacity: 1;
			translate: 0 0;
			scale: 1;
		}
		62% {
			scale: 0.82;
		}
		66.67% {
			opacity: 1;
			translate: 0 0;
			scale: 1;
		}
		74%,
		100% {
			opacity: 0;
			translate: 24px 50px;
			scale: 1;
		}
	}
.review__steps {
		display: grid;
		gap: var(--space-4);
		margin: var(--space-8) 0 0;
		padding: 0;
		list-style: none;
		grid-template-columns: 1fr;
	}

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

	.rv-mark {
		display: grid;
		flex: none;
		place-items: center;
		inline-size: 24px;
		block-size: 24px;
		border-radius: 8px;
		background: var(--color-surface-2);
	}

	/* === 1. ответ =========================================================== */

	@property --rv-words {
		syntax: "<number>";
		inherits: true;
		initial-value: 99;
	}

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

	.rv-stream {
		display: grid;
		gap: 12px;
		padding: 16px 18px 18px;
	}

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

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

	.rv-status {
		display: grid;
		color: var(--color-text-muted);

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

	.rv-status__busy {
		opacity: 0;
	}

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

	/* Слова проявляются по одному: у каждого свой номер, общий счётчик идёт. */
	.rv-stream__text {
		max-inline-size: 30ch;
		margin: 0;
		font-size: 1.0625rem;
		line-height: 1.45;

		span {
			opacity: clamp(0, var(--rv-words) - var(--i), 1);
		}
	}

	.rv-stream__sources {
		display: flex;
		flex-wrap: nowrap;
		gap: 6px;
		margin: 0;
	}

	.rv-src {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 4px 10px 4px 8px;
		border-radius: var(--radius-pill);
		background: var(--color-surface-2);
		font-size: 0.75rem;
		white-space: nowrap;
		color: var(--color-text-secondary);
		opacity: clamp(0, var(--rv-srcs) - var(--i), 1);
		translate: 0 calc((1 - clamp(0, var(--rv-srcs) - var(--i), 1)) * 6px);

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

	/* === 2. проверка врачом ================================================= */

	@property --rv-read {
		syntax: "<percentage>";
		inherits: true;
		initial-value: 100%;
	}

	.rv-check {
		display: grid;
		gap: 14px;
		inline-size: min(100%, 320px);
		padding: 16px;
	}

	/* Маркер идёт по цитате — врач читает ответ. */
	.rv-check__quote {
		margin: 0;
		font-size: 0.9375rem;
		line-height: 1.45;
		color: var(--color-text-secondary);

		mark {
			padding-block: 1px;
			background: linear-gradient(
					color-mix(in srgb, var(--sig-amber) 26%, transparent),
					color-mix(in srgb, var(--sig-amber) 26%, transparent)
				)
				no-repeat 0 100% / var(--rv-read) 100%;
			color: var(--color-text);
			box-decoration-break: clone;
			-webkit-box-decoration-break: clone;
		}
	}

	.rv-check__row {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.rv-avatar {
		display: grid;
		flex: none;
		place-items: center;
		inline-size: 38px;
		block-size: 38px;
		border-radius: var(--radius-pill);
		background: var(--tone-iris);
		color: var(--tone-iris-ink);
		font-size: 0.8125rem;
		font-weight: var(--fw-semibold);
	}

	.rv-check__who {
		display: flex;
		flex-direction: column;
		gap: 1px;

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

	.rv-check__sub {
		display: grid;
		font-size: 0.8125rem;
		color: var(--color-text-muted);

		> span {
			grid-area: 1 / 1;
			white-space: nowrap;
		}
	}

	.rv-check__busy {
		opacity: 0;
	}

	.rv-check__foot {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	/* Итог — зелёная «Подтверждено». */
	.rv-verdict {
		--sig: var(--sig-green);
		position: relative;
		block-size: 36px;
		padding-inline: 14px;
		font-size: 0.875rem;
	}

	.rv-verdict [data-state]:first-child {
		opacity: 0;
	}

	/* === 3. разбор ========================================================== */

	@property --rv-strike {
		syntax: "<percentage>";
		inherits: true;
		initial-value: 100%;
	}

	@property --rv-type {
		syntax: "<percentage>";
		inherits: true;
		initial-value: 0%;
	}

	.rv-fix {
		display: grid;
		gap: 8px;
		inline-size: min(100%, 320px);
		padding: 16px;
	}

	.rv-fix__head {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 4px;

		.w-badge {
			color: var(--tone-iris-ink);
		}
	}

	/* Строки правки — как в сравнении версий: минус красный, плюс зелёный. */
	.rv-fix__line {
		display: flex;
		align-items: baseline;
		gap: 10px;
		margin: 0;
		padding: 8px 12px;
		border-radius: 10px;
		font-size: 0.9375rem;
		line-height: 1.35;
	}

	.rv-fix__line--old {
		background: color-mix(in srgb, var(--sig-red) 10%, transparent);
		color: var(--color-text-secondary);
	}

	.rv-fix__line--new {
		background: color-mix(in srgb, var(--sig-green) 12%, transparent);
	}

	.rv-fix__sign {
		flex: none;
		inline-size: 10px;
		font-weight: var(--fw-semibold);
		font-variant-numeric: tabular-nums;
	}

	.rv-fix__line--old .rv-fix__sign {
		color: var(--sig-red);
	}

	.rv-fix__line--new .rv-fix__sign {
		color: var(--sig-green);
	}

	/* Зачёркивание рисуется линией, которая растёт слева направо. */
	.rv-fix__line--old .rv-fix__text {
		background: linear-gradient(currentcolor, currentcolor) no-repeat 0 55% / var(--rv-strike) 1.5px;
	}

	/* Новая формулировка впечатывается слева направо. */
	.rv-fix__line--new .rv-fix__text {
		clip-path: inset(0 var(--rv-type) 0 0);
	}

	.rv-fix__why {
		display: flex;
		align-items: flex-start;
		gap: 6px;
		margin: 4px 0 0;
		font-size: 0.8125rem;
		line-height: 1.4;
		color: var(--color-text-muted);

		.icon {
			flex: none;
			margin-block-start: 2px;
			color: var(--color-accent-ink);
		}
	}

	/* === движение ===========================================================
	   Три общие стадии (см. --beat):
	     1 — Люм начинает отвечать, ответ ждёт проверки, в разборе старая
	         формулировка;
	     2 — ответ дописан, врач читает (маркер идёт по цитате), старая
	         формулировка зачёркнута;
	     3 — подтянулись источники, «подтверждено», впечатана новая
	         формулировка и причина.
	   ====================================================================== */

	@media (prefers-reduced-motion: no-preference) {
		.rv-stream__text {
			animation: rv-words var(--beat) linear infinite;
		}

		.rv-stream__sources {
			animation: rv-srcs var(--beat) var(--rise-ease, ease) infinite;
		}

		.rv-status__busy {
			animation: rv-busy var(--beat) ease infinite;
		}

		.rv-status__done {
			animation: rv-done var(--beat) ease infinite;
		}

		.rv-check__quote {
			animation: rv-read var(--beat) ease-in-out infinite;
		}

		.rv-check__busy {
			animation: rv-sub-busy var(--beat) ease infinite;
		}

		.rv-check__done {
			animation: rv-sub-done var(--beat) ease infinite;
		}

		.rv-verdict {
			animation: rv-verdict var(--beat) ease infinite;
		}

		.rv-verdict [data-state]:first-child {
			animation: rv-verdict-a var(--beat) ease infinite;
		}

		.rv-verdict [data-state]:last-child {
			animation: rv-verdict-b var(--beat) ease infinite;
		}

		.rv-verdict [data-morph] {
			animation: rv-verdict-width var(--beat) var(--rise-ease, ease) infinite;
		}

		.rv-check__time {
			animation: rv-time var(--beat) ease infinite;
		}

		.rv-fix {
			animation: rv-fix var(--beat) linear infinite;
		}

		.rv-fix__why {
			animation: rv-why var(--beat) ease infinite;
		}
	}

	/* 1. Ответ: половина слов → всё → источники. */
	@keyframes rv-words {
		0%,
		1.5% {
			--rv-words: 16;
		}

		2% {
			--rv-words: 0;
		}

		9%,
		33.33% {
			--rv-words: 7;
		}

		41%,
		100% {
			--rv-words: 16;
		}
	}

	@keyframes rv-srcs {
		0% {
			--rv-srcs: 3;
		}

		2%,
		66.67% {
			--rv-srcs: 0;
		}

		73.67%,
		100% {
			--rv-srcs: 3;
		}
	}

	@keyframes rv-busy {
		0% {
			opacity: 0;
		}

		3%,
		66.67% {
			opacity: 1;
		}

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

	@keyframes rv-done {
		0% {
			opacity: 1;
		}

		2%,
		68% {
			opacity: 0;
		}

		71%,
		100% {
			opacity: 1;
		}
	}

	/* 2. Проверка: ждёт → маркер идёт по цитате → «подтверждено». */
	@keyframes rv-read {
		0% {
			--rv-read: 100%;
		}

		2%,
		33.33% {
			--rv-read: 0%;
		}

		42%,
		100% {
			--rv-read: 100%;
		}
	}

	@keyframes rv-sub-busy {
		0% {
			opacity: 0;
		}

		3%,
		66.67% {
			opacity: 1;
		}

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

	@keyframes rv-sub-done {
		0% {
			opacity: 1;
		}

		2%,
		68% {
			opacity: 0;
		}

		71%,
		100% {
			opacity: 1;
		}
	}

	@keyframes rv-verdict {
		0% {
			background: var(--sig-green);
		}

		3%,
		66.67% {
			background: var(--sig-amber);
		}

		70%,
		100% {
			background: var(--sig-green);
		}
	}

	@keyframes rv-verdict-a {
		0% {
			opacity: 0;
		}

		3%,
		66.67% {
			opacity: 1;
		}

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

	@keyframes rv-verdict-b {
		0% {
			opacity: 1;
			translate: 0 0;
		}

		2%,
		68% {
			opacity: 0;
			translate: 0 4px;
		}

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

	@keyframes rv-verdict-width {
		0% {
			inline-size: var(--w2);
		}

		3%,
		66.67% {
			inline-size: var(--w1);
		}

		72%,
		100% {
			inline-size: var(--w2);
		}
	}

	@keyframes rv-time {
		0% {
			opacity: 1;
			translate: 0 0;
		}

		2%,
		68.5% {
			opacity: 0;
			translate: -4px 0;
		}

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

	/* 3. Разбор: старое → зачёркнуто → новое впечатано. */
	@keyframes rv-fix {
		0% {
			--rv-strike: 100%;
			--rv-type: 0%;
		}

		2%,
		33.33% {
			--rv-strike: 0%;
			--rv-type: 100%;
		}

		40%,
		66.67% {
			--rv-strike: 100%;
			--rv-type: 100%;
		}

		74%,
		100% {
			--rv-strike: 100%;
			--rv-type: 0%;
		}
	}

	@keyframes rv-why {
		0% {
			opacity: 1;
			translate: 0 0;
		}

		2%,
		70% {
			opacity: 0;
			translate: 0 4px;
		}

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

	/* В узкой карточке шапка и источники переносятся на новую строку:
	   одной строкой они были шире панели и обрезались краем карточки. */
	@container (width < 700px) {
		.rv-stream {
			grid-template-columns: minmax(0, 1fr);
		}

		.rv-stream__head,
		.rv-stream__sources {
			flex-wrap: wrap;
		}

		.rv-stream__head .w-meta {
			margin-inline-start: auto;
		}
	}
.lv__head {
		margin-block-end: var(--space-8);
	}

	/* Слева высокая карточка на два ряда, справа сетка два на два. */
	.lv__grid {
		display: grid;
		gap: var(--space-4);
		grid-template-columns: 1fr;
	}

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

		.lv__list {
			grid-column: 1 / -1;
		}
	}

	@media (min-width: 1100px) {
		.lv__grid {
			grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr));
		}

		.lv__list {
			grid-column: 1;
			grid-row: 1 / span 2;
		}
	}

	/* === 1. Три уровня ===================================================== */

	/* Устройство прижато к верху и обрезано правым краем карточки — как
	   у Family. Без растворения: чёрное, растворяясь на светлом, серело. */
	.lv__list .wcard__stage {
		place-items: start start;
		padding-block-start: calc(var(--wcard-pad) + 4px);
	}

	/* Тёмное «устройство» в обеих темах: чёрная рамка, строки — плитки. */
	.lv-device {
		justify-self: start;
		inline-size: calc(100% + var(--wcard-pad) + 64px);
		padding: 6px;
		border-radius: 30px;
		background: var(--device-bg);
		/* Волосяная кромка: на почти чёрной тёмной теме без неё корпус
		   сливался с карточкой. На светлой она не видна. */
		box-shadow:
			0 0 0 1px var(--device-edge),
			var(--device-shadow);
		color: var(--device-text);
	}

	/* В узкой колонке устройство лишь доходит до края карточки — иначе
	   срез съедал подписи уровней. */
	@container (width < 700px) {
		.lv-device {
			inline-size: calc(100% + var(--wcard-pad));
		}

		/* На телефоне в панели — названия уровней и сроки, без пояснений:
		   иначе эта карточка выше всех и тянет за собой весь ряд. */
		.lv-row {
			padding: 12px 14px;
		}

		.lv-row__note {
			display: none;
		}
	}

	.lv-device__head {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 14px 18px 16px;
		font-size: 0.875rem;

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

		span:last-child {
			color: var(--device-text-muted);
		}
	}

	.lv-device__mark {
		display: grid;
		place-items: center;
		inline-size: 26px;
		block-size: 26px;
		border-radius: 8px;
		background: var(--device-tile-lift);
	}

	.lv-device__rows {
		display: flex;
		flex-direction: column;
		gap: 5px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.lv-row {
		display: flex;
		align-items: flex-start;
		gap: 14px;
		padding: 18px 20px;
		border-radius: 24px;
		background: var(--device-tile);
	}

	.lv-row__text {
		display: flex;
		flex-direction: column;
		gap: 4px;
		min-inline-size: 0;
	}

	.lv-row__head {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;

		b {
			font-size: 1.1875rem;
			font-weight: var(--fw-semibold);
			letter-spacing: -0.01em;
		}

		.w-badge {
			color: var(--device-text-muted);
		}
	}

	.lv-row__note {
		max-inline-size: 30ch;
		font-size: 0.9375rem;
		line-height: 1.4;
		color: var(--device-text-muted);
	}

	/* Без анимаций выделен первый уровень. */
	.lv-row:first-child {
		background: var(--device-tile-on);
	}

	/* === 2. Напоминание ===================================================== */

	.lv-note {
		display: grid;
		gap: 3px;
		inline-size: min(100%, 320px);
		padding: 14px 16px 16px;
	}

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

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

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

	.lv-note__mark {
		display: grid;
		place-items: center;
		inline-size: 22px;
		block-size: 22px;
		border-radius: 7px;
		background: var(--color-surface-2);
	}

	.lv-note__action {
		position: relative;
		justify-self: start;
		margin-block-start: 12px;
	}

	/* Кнопка в конечном состоянии — зелёная «Напомню …». */
	.lv-note__pill {
		--sig: var(--sig-green);
		position: relative;
	}

	.lv-note__pill [data-state]:not(:last-child) {
		opacity: 0;
	}

	.lv-note__cursor {
		inset-block-start: 60%;
		inset-inline-start: 62%;
		opacity: 0;
	}

	/* === 3. Выписка ========================================================= */

	@property --lv-p {
		syntax: "<number>";
		inherits: true;
		initial-value: 2;
	}

	.lv-tl {
		padding: 6px 0 6px 18px;

		ol {
			margin: 0;
			padding: 0;
			list-style: none;
		}
	}

	/* 0 — ждёт, 1 — в работе, 2 — готово. Всё остальное считается отсюда. */
	.lv-tl__row {
		--done: clamp(0, var(--lv-p) - 1, 1);
		--busy: calc(clamp(0, var(--lv-p), 1) - var(--done));
		position: relative;
		display: grid;
		grid-template-columns: 22px auto 1fr;
		align-items: center;
		column-gap: 14px;
		block-size: 52px;
	}

	.lv-tl__row + .lv-tl__row::before {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline: 36px 0;
		border-block-start: 1px solid var(--color-border);
	}

	.lv-tl__node {
		position: relative;
		display: grid;
		place-items: center;
		inline-size: 22px;
		block-size: 22px;
		border: 2px solid
			color-mix(
				in srgb,
				var(--color-accent) calc((var(--done) + var(--busy)) * 100%),
				var(--color-border-strong)
			);
		border-radius: var(--radius-pill);
		background: color-mix(in srgb, var(--color-accent) calc(var(--done) * 100%), transparent);
		color: var(--color-accent-contrast);

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

	/* Линия к следующему пункту наполняется, когда этот готов. */
	.lv-tl__row:not(:last-child) .lv-tl__node::after {
		content: "";
		position: absolute;
		inset-block-start: 20px;
		inset-inline-start: 8px;
		inline-size: 2px;
		block-size: 32px;
		background: color-mix(
			in srgb,
			var(--color-accent) calc(var(--done) * 100%),
			var(--color-border)
		);
	}

	.lv-tl__ring {
		position: absolute;
		inset: -2px;
		border: 2px solid var(--color-accent);
		border-inline-end-color: transparent;
		border-radius: var(--radius-pill);
		opacity: var(--busy);
	}

	.lv-tl__label {
		font-size: 1rem;
		font-weight: var(--fw-semibold);
		color: color-mix(
			in srgb,
			var(--color-accent-ink) calc((var(--done) + var(--busy)) * 100%),
			var(--color-text-muted)
		);
	}

	.lv-tl__meta {
		opacity: var(--done);
	}

	/* В узкой карточке название пункта сжимается и при нужде переносится,
	   а счётчик стоит у правого края одной строкой — иначе он вылезал. */
	@container (width < 700px) {
		.lv-tl__row {
			grid-template-columns: 22px minmax(0, 1fr) auto;
		}
	}

	/* === 4. Срочно ========================================================== */

	.lv-urgent {
		display: grid;
		gap: 12px;
		inline-size: min(100%, 320px);
		padding: 16px;
	}

	/* Статус и текст — по два слоя в одной ячейке: «проверяет» и
	   «срочно», жалоба и совет. Без анимации видны конечные. */
	.lv-urgent__status,
	.lv-urgent__body {
		display: grid;
		margin: 0;

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

	.lv-urgent__status > span {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 0.875rem;
		font-weight: var(--fw-semibold);
		white-space: nowrap;
	}

	.lv-urgent__checking {
		color: var(--color-text-muted);
		opacity: 0;
	}

	.lv-urgent__alert {
		color: var(--sig-red);
	}

	.lv-urgent__symptom,
	.lv-urgent__text {
		margin: 0;
		font-size: 0.9375rem;
		line-height: 1.4;
	}

	.lv-urgent__symptom {
		color: var(--color-text-secondary);
		opacity: 0;
	}

	.lv-urgent__call {
		--sig: var(--sig-red);
		justify-self: start;
	}

	.lv-urgent__phone {
		display: grid;
		place-items: center;
	}

	.lv-urgent__num {
		display: grid;
		overflow: hidden;

		b {
			grid-area: 1 / 1;
			font-weight: var(--fw-semibold);
			font-variant-numeric: tabular-nums;
		}

		b + b {
			opacity: 0;
		}
	}

	/* === 5. Границы ========================================================= */

	.lv-qa {
		display: grid;
		inline-size: min(100%, 330px);
	}

	.lv-qa__pair {
		display: flex;
		flex-direction: column;
		gap: 10px;
		grid-area: 1 / 1;
	}

	.lv-qa__pair--1 {
		opacity: 0;
	}

	/* Вопрос человека — тёмный пузырь справа. */
	.lv-qa__q {
		align-self: flex-end;
		max-inline-size: 85%;
		margin: 0;
		padding: 10px 14px;
		border-radius: 18px 18px 6px 18px;
		background: var(--color-text);
		color: var(--color-background);
		font-size: 0.9375rem;
		line-height: 1.35;
	}

	.lv-qa__reply {
		display: grid;
	}

	.lv-qa__typing,
	.lv-qa__a {
		grid-area: 1 / 1;
	}

	.lv-qa__typing {
		align-self: start;
		justify-self: start;
		margin-inline-start: 34px;
		padding: 12px 14px;
		border: 1px solid var(--wpanel-border);
		border-radius: 18px 18px 18px 6px;
		background: var(--wpanel);
		opacity: 0;
	}

	.lv-qa__a {
		display: flex;
		align-items: flex-end;
		gap: 8px;
		margin: 0;
	}

	.lv-qa__mark {
		display: grid;
		flex: none;
		place-items: center;
		inline-size: 26px;
		block-size: 26px;
		border-radius: var(--radius-pill);
		background: var(--wpanel);
		box-shadow: var(--wpanel-shadow);
	}

	.lv-qa__bubble {
		padding: 10px 14px;
		border: 1px solid var(--wpanel-border);
		border-radius: 18px 18px 18px 6px;
		background: var(--wpanel);
		box-shadow: var(--wpanel-shadow);
		font-size: 0.9375rem;
		line-height: 1.4;

		.w-badge {
			margin-inline-end: 4px;
			color: var(--color-accent-ink);
			vertical-align: 1px;
		}
	}

	/* === движение ===========================================================
	   Три стадии на весь сайт, все виджеты переключаются разом (см. --beat):
	     стадия 1 — первый уровень, напоминание не поставлено, выписка
	                в работе, Люм проверяет симптомы, человек спрашивает;
	     стадия 2 — второй уровень, «ставлю…», выписка почти собрана,
	                предупреждение, Люм печатает;
	     стадия 3 — третий уровень, «напомню», выписка готова, кнопка
	                звонка, честный ответ.
	   Между сменами ничего не движется — кроме крутящихся «в работе».
	   ====================================================================== */

	@media (prefers-reduced-motion: no-preference) {
		/* 1. Подсветка уровней: стадия n — уровень n. */
		.lv-row,
		.lv-row .lv-row__text,
		.lv-row .w-icon {
			animation-duration: var(--beat);
			animation-timing-function: ease;
			animation-iteration-count: infinite;
			animation-delay: calc(var(--i) * var(--stage) - var(--beat));
		}

		.lv-row {
			animation-name: lv-row;
		}

		.lv-row .lv-row__text,
		.lv-row .w-icon {
			animation-name: lv-row-ink;
		}

		/* 2. Напоминание. */
		.lv-note__pill {
			animation: lv-note-pill var(--beat) ease infinite;
		}

		.lv-note__pill [data-state]:nth-child(1) {
			animation: lv-state-1 var(--beat) ease infinite;
		}

		.lv-note__pill [data-state]:nth-child(2) {
			animation: lv-state-2 var(--beat) ease infinite;
		}

		.lv-note__pill [data-state]:nth-child(3) {
			animation: lv-state-3 var(--beat) ease infinite;
		}

		.lv-note__pill [data-morph] {
			animation: lv-note-width var(--beat) var(--rise-ease, ease) infinite;
		}

		.lv-note__cursor {
			animation: lv-cursor var(--beat) var(--rise-ease, ease) infinite;
		}

		/* 3. Выписка. */
		.lv-tl ol {
			animation: lv-tl-dip var(--beat) ease infinite;
		}

		.lv-tl__row--1 {
			animation: lv-tl-1 var(--beat) linear infinite;
		}

		.lv-tl__row--2 {
			animation: lv-tl-2 var(--beat) linear infinite;
		}

		.lv-tl__ring {
			animation: w-spin 0.9s linear infinite;
		}

		/* 4. Срочно. */
		.lv-urgent__checking {
			animation: lv-u-checking var(--beat) ease infinite;
		}

		.lv-urgent__alert {
			animation: lv-u-alert var(--beat) ease infinite;
		}

		.lv-urgent__symptom {
			animation: lv-u-symptom var(--beat) ease infinite;
		}

		.lv-urgent__text {
			animation: lv-u-text var(--beat) ease infinite;
		}

		.lv-urgent__call {
			animation: lv-u-call var(--beat) var(--rise-ease, ease) infinite;
		}

		.lv-urgent__phone {
			animation: lv-ring var(--beat) ease-in-out infinite;
		}

		/* Номер меняется каждый такт — в момент сброса, когда кнопки нет. */
		.lv-urgent__num b {
			animation: lv-num-a calc(var(--beat) * 2) step-end infinite;
			animation-delay: calc(var(--beat) * 0.035);
		}

		.lv-urgent__num b + b {
			animation-name: lv-num-b;
		}

		/* 5. Границы: вопрос → «печатает» → ответ; пары меняются каждый такт. */
		.lv-qa__pair {
			animation: lv-qa-pair calc(var(--beat) * 2) ease infinite;
		}

		.lv-qa__pair--1 {
			animation-delay: calc(var(--beat) * -1);
		}

		.lv-qa__q {
			animation: lv-qa-q var(--beat) var(--rise-ease, ease) infinite;
		}

		.lv-qa__typing {
			animation: lv-qa-typing var(--beat) ease infinite;
		}

		.lv-qa__a {
			animation: lv-qa-a var(--beat) var(--rise-ease, ease) infinite;
		}
	}

	/* --- 1. уровни: горит в своей стадии --- */

	@keyframes lv-row {
		0% {
			background: var(--device-tile);
		}

		7%,
		33.33% {
			background: var(--device-tile-on);
		}

		40.33%,
		100% {
			background: var(--device-tile);
		}
	}

	@keyframes lv-row-ink {
		0% {
			opacity: 0.5;
		}

		7%,
		33.33% {
			opacity: 1;
		}

		40.33%,
		100% {
			opacity: 0.5;
		}
	}

	/* --- 2. напоминание: «напомнить» → нажатие, «ставлю…» → «напомню» --- */

	@keyframes lv-note-pill {
		0% {
			background: var(--sig-green);
			color: var(--white);
			scale: 1;
		}

		4%,
		33.33% {
			background: var(--color-text);
			color: var(--color-background);
			scale: 1;
		}

		35% {
			background: var(--color-text);
			color: var(--color-background);
			scale: 0.95;
		}

		37%,
		66.67% {
			background: var(--color-text);
			color: var(--color-background);
			scale: 1;
		}

		71%,
		100% {
			background: var(--sig-green);
			color: var(--white);
			scale: 1;
		}
	}

	@keyframes lv-state-1 {
		0%,
		2% {
			opacity: 0;
		}

		5%,
		34.5% {
			opacity: 1;
		}

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

	@keyframes lv-state-2 {
		0%,
		35.5% {
			opacity: 0;
		}

		38%,
		66.67% {
			opacity: 1;
		}

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

	@keyframes lv-state-3 {
		0% {
			opacity: 1;
			translate: 0 0;
		}

		2%,
		68% {
			opacity: 0;
			translate: 0 4px;
		}

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

	@keyframes lv-note-width {
		0% {
			inline-size: var(--w3);
		}

		5%,
		34.5% {
			inline-size: var(--w1);
		}

		38%,
		66.67% {
			inline-size: var(--w2);
		}

		72%,
		100% {
			inline-size: var(--w3);
		}
	}

	/* Курсор подводится к кнопке, нажимает её и уходит в третьей стадии. */
	@keyframes lv-cursor {
		0% {
			opacity: 0;
			translate: 64px 44px;
			scale: 1;
		}

		2% {
			opacity: 1;
			translate: 64px 44px;
			scale: 1;
		}

		7%,
		33.33% {
			opacity: 1;
			translate: 0 0;
			scale: 1;
		}

		35% {
			scale: 0.82;
		}

		37%,
		66.67% {
			opacity: 1;
			translate: 0 0;
			scale: 1;
		}

		71%,
		100% {
			opacity: 0;
			translate: 36px 56px;
			scale: 1;
		}
	}

	/* --- 3. выписка: ✓ ◐ ○ → ✓ ✓ ◐ → ✓ ✓ ✓ --- */

	@keyframes lv-tl-dip {
		0%,
		7%,
		100% {
			opacity: 1;
		}

		3.5% {
			opacity: 0.35;
		}
	}

	@keyframes lv-tl-1 {
		0%,
		3.4% {
			--lv-p: 2;
		}

		3.5%,
		33.33% {
			--lv-p: 1;
		}

		38%,
		100% {
			--lv-p: 2;
		}
	}

	@keyframes lv-tl-2 {
		0%,
		3.4% {
			--lv-p: 2;
		}

		3.5%,
		33.33% {
			--lv-p: 0;
		}

		36%,
		66.67% {
			--lv-p: 1;
		}

		71%,
		100% {
			--lv-p: 2;
		}
	}

	/* --- 4. срочно: проверяет → «это может быть срочно» → кнопка --- */

	@keyframes lv-u-checking {
		0% {
			opacity: 0;
		}

		4%,
		33.33% {
			opacity: 1;
		}

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

	@keyframes lv-u-alert {
		0% {
			opacity: 1;
			translate: 0 0;
		}

		2%,
		34.5% {
			opacity: 0;
			translate: 0 4px;
		}

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

	@keyframes lv-u-symptom {
		0% {
			opacity: 0;
		}

		4%,
		33.33% {
			opacity: 1;
		}

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

	@keyframes lv-u-text {
		0% {
			opacity: 1;
			translate: 0 0;
		}

		2%,
		34.5% {
			opacity: 0;
			translate: 0 6px;
		}

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

	@keyframes lv-u-call {
		0% {
			opacity: 1;
			scale: 1;
		}

		3%,
		66.67% {
			opacity: 0;
			scale: 0.9;
		}

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

	/* Трубка звенит короткой серией, когда кнопка появляется. */
	@keyframes lv-ring {
		0%,
		70% {
			rotate: 0deg;
		}

		71.2%,
		73.6%,
		76% {
			rotate: -14deg;
		}

		72.4%,
		74.8%,
		77.2% {
			rotate: 14deg;
		}

		78.4%,
		100% {
			rotate: 0deg;
		}
	}

	@keyframes lv-num-a {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}
	}

	@keyframes lv-num-b {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}
	}

	/* --- 5. границы: вопрос → «печатает» → ответ --- */

	@keyframes lv-qa-pair {
		0% {
			opacity: 0;
		}

		2%,
		50% {
			opacity: 1;
		}

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

	@keyframes lv-qa-q {
		0%,
		1% {
			opacity: 0;
			translate: 0 8px;
		}

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

	@keyframes lv-qa-typing {
		0%,
		33.33% {
			opacity: 0;
		}

		36%,
		66.67% {
			opacity: 1;
		}

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

	@keyframes lv-qa-a {
		0%,
		67.5% {
			opacity: 0;
			translate: 0 8px;
		}

		72%,
		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;
	}
.company__split {
		display: grid;
		gap: clamp(32px, 4vw, 64px);
		grid-template-columns: 1fr;
		align-items: start;
	}

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

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

		h2,
		p {
			margin: 0;
		}

		.lead {
			max-inline-size: 46ch;
		}
	}

	.company__logo {
		inline-size: 180px;
		margin-block-start: var(--space-2);
	}

	/* Документы — строками реестра: значок, название, волосяная линия. */
	.company__docs {
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
		list-style: none;
		border-block-start: 1px solid var(--color-border);

		li {
			display: flex;
			align-items: center;
			gap: var(--space-4);
			padding-block: var(--space-5);
			border-block-end: 1px solid var(--color-border);
			font-size: var(--text-lg);
		}
	}

	.company__doc-mark {
		display: grid;
		place-items: center;
		flex: none;
		inline-size: 38px;
		block-size: 38px;
		border-radius: var(--radius-md);
		background: var(--tone-leaf);
		color: var(--tone-leaf-ink);
	}

	/* --- финал --- */

	.closing-note__plate {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-3);
		padding: clamp(40px, 6vw, 88px) var(--gutter);
		border-radius: var(--radius-2xl);
		text-align: center;
		isolation: isolate;
		overflow: hidden;

		h2,
		p {
			margin: 0;
		}

		.lead {
			max-inline-size: 52ch;
		}
	}

	/* Через плиту: её сброс отступов у абзацев иначе перебивает этот.
	   В ряд — только на широком экране; на телефоне «Скоро», значки
	   и кнопка стоят колонкой одной ширины (soon-stack). */
	.closing-note__plate .closing-note__actions {
		margin-block-start: var(--space-2);
	}

	@media (min-width: 720px) {
		.closing-note__plate .closing-note__actions {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: var(--space-3);
		}
	}

	/* Подложка и плитки — разными слоями: иначе одна прозрачность на двоих,
	   и в тёмной теме белые плитки превращаются в серые кирпичи. */
	.closing-note__plate::before,
	.closing-note__plate::after {
		content: "";
		position: absolute;
		inset: -8px;
		/* Плита растворяется по всем четырём краям. Растяжка длинная и с
		   промежуточными ступенями: на тёмном фоне разница между плитой
		   и страницей — единицы уровней яркости, и короткая линейная
		   растяжка ложится видимыми полосами. */
		mask-image:
			linear-gradient(
				to right,
				transparent 0,
				rgb(0 0 0 / 0.18) 10%,
				rgb(0 0 0 / 0.58) 22%,
				#000 38%,
				#000 62%,
				rgb(0 0 0 / 0.58) 78%,
				rgb(0 0 0 / 0.18) 90%,
				transparent 100%
			),
			linear-gradient(
				to bottom,
				transparent 0,
				rgb(0 0 0 / 0.18) 12%,
				rgb(0 0 0 / 0.58) 26%,
				#000 42%,
				#000 58%,
				rgb(0 0 0 / 0.58) 74%,
				rgb(0 0 0 / 0.18) 88%,
				transparent 100%
			);
		mask-composite: intersect;
		mask-repeat: no-repeat;
		mask-size: 100% 100%;
	}

	.closing-note__plate::before {
		z-index: -2;
		background: var(--color-surface-2);
	}

	.closing-note__plate::after {
		z-index: -1;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104'%3E%3Crect x='4' y='4' width='96' height='96' rx='22' fill='%23ffffff'/%3E%3C/svg%3E");
		background-size: 104px 104px;
		opacity: 0.55;
	}

	/* В тёмной теме гаснут сами плитки, а не слой поверх них: у каждой
	   своя прозрачность, убывающая к краям. Растяжки поверх рисунка нет —
	   значит нет и линии, по которой он обрывался бы. Края у плиток
	   при этом остаются чёткими. */
	/* Подложки нет вовсе: любая заливка даёт прямоугольный край, а он
	   и был виден. Остаются одни плитки, гаснущие к краям. */
	:root[data-theme="dark"] .closing-note__plate::before {
		display: none;
	}

	/* Плита в тёмной теме выше: поле плиток должно уместиться целиком
	   вместе с затуханием. Раньше край плиты резал крайние ряды по прямой —
	   эта линия и была видна. Теперь поле меньше плиты и её не касается. */
	:root[data-theme="dark"] .closing-note__plate {
		padding-block: clamp(72px, 9vw, 120px);
	}

	:root[data-theme="dark"] .closing-note__plate::after {
		inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1352' height='416'%3E%3Crect x='108' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.102'/%3E%3Crect x='212' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.215'/%3E%3Crect x='316' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.287'/%3E%3Crect x='420' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='524' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='628' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='732' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='836' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='940' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.287'/%3E%3Crect x='1044' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.215'/%3E%3Crect x='1148' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.102'/%3E%3Crect x='4' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.048'/%3E%3Crect x='108' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.349'/%3E%3Crect x='212' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.736'/%3E%3Crect x='316' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.985'/%3E%3Crect x='420' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='524' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='628' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='732' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='836' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='940' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.985'/%3E%3Crect x='1044' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.736'/%3E%3Crect x='1148' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.349'/%3E%3Crect x='1252' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.048'/%3E%3Crect x='4' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.048'/%3E%3Crect x='108' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.349'/%3E%3Crect x='212' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.736'/%3E%3Crect x='316' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.985'/%3E%3Crect x='420' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='524' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='628' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='732' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='836' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='940' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.985'/%3E%3Crect x='1044' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.736'/%3E%3Crect x='1148' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.349'/%3E%3Crect x='1252' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.048'/%3E%3Crect x='108' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.102'/%3E%3Crect x='212' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.215'/%3E%3Crect x='316' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.287'/%3E%3Crect x='420' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='524' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='628' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='732' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='836' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='940' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.287'/%3E%3Crect x='1044' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.215'/%3E%3Crect x='1148' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.102'/%3E%3C/svg%3E");
		background-size: auto;
		background-position: center;
		background-repeat: no-repeat;
		mask-image: none;
		opacity: 0.045;
	}

	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) .closing-note__plate::before {
			display: none;
		}

		:root:not([data-theme="light"]) .closing-note__plate {
			padding-block: clamp(72px, 9vw, 120px);
		}

		:root:not([data-theme="light"]) .closing-note__plate::after {
			inset: 0;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1352' height='416'%3E%3Crect x='108' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.102'/%3E%3Crect x='212' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.215'/%3E%3Crect x='316' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.287'/%3E%3Crect x='420' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='524' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='628' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='732' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='836' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='940' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.287'/%3E%3Crect x='1044' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.215'/%3E%3Crect x='1148' y='4' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.102'/%3E%3Crect x='4' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.048'/%3E%3Crect x='108' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.349'/%3E%3Crect x='212' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.736'/%3E%3Crect x='316' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.985'/%3E%3Crect x='420' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='524' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='628' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='732' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='836' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='940' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.985'/%3E%3Crect x='1044' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.736'/%3E%3Crect x='1148' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.349'/%3E%3Crect x='1252' y='108' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.048'/%3E%3Crect x='4' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.048'/%3E%3Crect x='108' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.349'/%3E%3Crect x='212' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.736'/%3E%3Crect x='316' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.985'/%3E%3Crect x='420' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='524' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='628' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='732' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='836' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='1.0'/%3E%3Crect x='940' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.985'/%3E%3Crect x='1044' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.736'/%3E%3Crect x='1148' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.349'/%3E%3Crect x='1252' y='212' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.048'/%3E%3Crect x='108' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.102'/%3E%3Crect x='212' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.215'/%3E%3Crect x='316' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.287'/%3E%3Crect x='420' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='524' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='628' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='732' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='836' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.292'/%3E%3Crect x='940' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.287'/%3E%3Crect x='1044' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.215'/%3E%3Crect x='1148' y='316' width='96' height='96' rx='22' fill='%23fff' fill-opacity='0.102'/%3E%3C/svg%3E");
			background-size: auto;
			background-position: center;
			background-repeat: no-repeat;
			mask-image: none;
			opacity: 0.045;
		}
	}

	/* В узкой колонке документы компании — плотным списком. */
	@container (width < 700px) {
		.company__docs li {
			gap: var(--space-3);
			padding-block: var(--space-3);
			font-size: var(--text-base);
		}

		.company__doc-mark {
			inline-size: 30px;
			block-size: 30px;
		}
	}
.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);
		}
	}