.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);
		}
	}
/* Зелёный фон (cover--leaf) — по умолчанию, синий и серый — ниже. */
	.cover {
		--cover-a: var(--tone-leaf);
		--cover-b: var(--tone-leaf-deep);
		--cover-shade: light-dark(var(--tone-leaf-ink), var(--black));

		position: relative;
		overflow: hidden;
		background: radial-gradient(130% 110% at 50% 0%, var(--cover-a) 35%, var(--cover-b));

		svg {
			display: block;
			inline-size: 100%;
			block-size: 100%;
		}
	}

	.cover--sky {
		--cover-a: var(--tone-sky);
		--cover-b: var(--tone-sky-deep);
		--cover-shade: light-dark(var(--tone-sky-ink), var(--black));
	}

	.cover--mist {
		--cover-a: var(--tone-mist);
		--cover-b: var(--tone-mist-deep);
		--cover-shade: light-dark(var(--tone-mist-ink), var(--black));
	}

	/* --- Детали сцен --- */

	.art__spot {
		fill: url(#art-spot);
	}

	.art__spark {
		fill: var(--art-paper);
		opacity: 0.9;
	}

	.art__line--faint {
		opacity: 0.6;
	}

	.art__pill-line {
		fill: var(--art-mint-deep);
		opacity: 0.35;
	}

	.art__ink {
		fill: var(--art-ink);
	}

	.art__paper-hole {
		fill: var(--art-paper-shade);
	}

	.art__box {
		fill: var(--art-paper);
		stroke: var(--art-line-strong);
		stroke-width: 1.6;
	}

	.art__shade {
		fill: var(--art-paper-shade);
		stroke: var(--art-paper-edge);
		stroke-width: 1;
	}

	.art__label {
		stroke-width: 1;
	}

	.art__slot {
		fill: var(--art-paper);
		stroke: var(--art-line);
		stroke-width: 1;
	}

	.art__face {
		fill: var(--art-paper);
		stroke: var(--art-line);
		stroke-width: 1.5;
	}

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

	.art__hand {
		fill: none;
		stroke: var(--art-ink);
		stroke-width: 3;
		stroke-linecap: round;
	}

	.art__glass {
		fill: var(--art-glass);
		stroke: var(--art-paper-edge);
		stroke-width: 1.5;
	}

	.art__glass-hi {
		fill: var(--art-paper);
		opacity: 0.85;
	}

	/* График и рукописная строка врача — синими чернилами. */
	.art__chart-area {
		fill: var(--art-sky);
		opacity: 0.45;
	}

	.art__chart-line,
	.art__pen {
		fill: none;
		stroke: var(--art-sky-deep);
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.art__chart-line {
		stroke-width: 3;
	}

	.art__pen {
		stroke-width: 2.2;
	}

	.art__chart-dot {
		fill: var(--art-paper);
		stroke: var(--art-sky-deep);
		stroke-width: 2;
	}

	.art__chart-end {
		stroke: var(--art-paper);
		stroke-width: 2;
	}

	/* Лупа. */
	.art__lens-bg {
		fill: var(--art-paper);
	}

	.art__lens-tint {
		fill: var(--art-sky);
		opacity: 0.12;
	}

	.art__lens-glare {
		fill: var(--art-paper);
		opacity: 0.55;
	}

	.art__lens-ring {
		fill: none;
		stroke: url(#art-mint);
		stroke-width: 6.5;
	}

	.art__lens-edge {
		fill: none;
		stroke: var(--art-mint-edge);
		stroke-width: 1;
		opacity: 0.6;
	}

	.art__lens-hi {
		fill: none;
		stroke: var(--art-paper);
		stroke-width: 2.4;
		stroke-linecap: round;
		opacity: 0.8;
	}

	.art__handle,
	.art__handle-cast,
	.art__handle-hi {
		fill: none;
		stroke-linecap: round;
	}

	.art__handle {
		stroke: var(--art-mint-deep);
		stroke-width: 10;
	}

	.art__handle-cast {
		stroke: var(--art-shadow);
		stroke-width: 9;
		opacity: 0.1;
	}

	.art__handle-hi {
		stroke: var(--art-paper);
		stroke-width: 2.2;
		opacity: 0.45;
	}

	/* --- Акценты сцен ---
	   Только цвета бренда: знак внимания и пробирки синие, календарь
	   и отметки мятные, третий ярлычок серый. */
	.art__alert,
	.art__liquid,
	.art__charge,
	.art__moon,
	.art__tag-a {
		fill: url(#art-sky);
	}

	.art__alert-depth {
		fill: var(--art-sky-depth);
	}

	.art__alert-soft {
		fill: var(--art-sky-soft);
	}

	.art__today {
		fill: var(--art-sky-soft);
		stroke: var(--art-sky-deep);
		stroke-width: 1.6;
	}

	.art__liquid-top {
		fill: var(--art-sky);
	}

	.art__cal-head,
	.art__tag-b {
		fill: url(#art-mint);
	}

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

	.art__sticker {
		fill: url(#art-sky);
		stroke: var(--art-paper);
		stroke-width: 3;
		stroke-linejoin: round;
	}
.posts {
		display: flex;
		flex-direction: column;
		gap: var(--space-12);
		margin-block-end: var(--space-6);
	}

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

		h2 {
			font-size: var(--text-display-l);
		}
	}

	.posts__grid {
		display: grid;
		/* Карточки компактные: на большом экране и ноутбуке — четыре в ряд,
		   на узком ноутбуке три, на планшете две. */
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
		gap: var(--space-4);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.posts__card {
		position: relative;
		background: var(--color-surface);

		h3 {
			font-size: var(--text-display-m);
		}

		a {
			text-decoration: none;

			/* Ссылка растянута на всю карточку: открывает и обложка. */
			&::after {
				content: "";
				position: absolute;
				inset: 0;
				border-radius: inherit;
			}
		}

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

	/* Обложка — во всю ширину карточки, до её краёв. */
	.posts__cover {
		aspect-ratio: 16 / 10;
		margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2);
		border-start-start-radius: calc(var(--radius-xl) - 1px);
		border-start-end-radius: calc(var(--radius-xl) - 1px);
	}

	/* В узкой колонке карточки плотнее: это список, его пробегают глазами. */
	@container (width < 700px) {
		.posts {
			gap: var(--space-10);
		}

		.posts__grid {
			gap: var(--space-2);
		}

		.posts__card {
			display: grid;
			grid-template-columns: 76px minmax(0, 1fr);
			column-gap: var(--space-4);
			align-items: center;
			padding: var(--space-4);

			h3 {
				font-size: var(--text-lg);
			}
		}

		.posts__cover {
			aspect-ratio: 1;
			margin: 0;
			border-radius: var(--radius-md);
		}
	}
.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);
		}
	}