/* Логикстрим — сайт компании.
   Пара шрифтов: Golos Text (текст) + JetBrains Mono (показания портала).
   Мотив всей страницы — строка находки: острота, показатель, число. */

@font-face {
	font-family: 'Golos Text';
	src: url('шрифты/golos-cyrillic.woff2') format('woff2');
	font-weight: 400 700;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Golos Text';
	src: url('шрифты/golos-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-display: swap;
	unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+2215;
}

@font-face {
	font-family: 'JetBrains Mono';
	src: url('шрифты/jbmono-cyrillic.woff2') format('woff2');
	font-weight: 400 700;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'JetBrains Mono';
	src: url('шрифты/jbmono-latin.woff2') format('woff2');
	font-weight: 400 700;
	font-display: swap;
	unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+2215;
}

:root {
	--бумага: #F4F7FA;
	--белое: #FFFFFF;
	--чернила: #0F1A26;
	--текст: #33475B;
	--приглушённое: #5E7185;
	--линия: #DCE5ED;
	--акцент: #17466B;
	--акцент-тёмный: #0E3552;
	--подложка-акцента: #E8EFF6;
	--тёмное: #0D1926;
	--тёмное-карточка: #16283B;
	--острая: #C0392B;
	--средняя: #B4690E;
	--спокойная: #5B7B99;

	--поле: clamp(1.25rem, 4vw, 2.5rem);
	--радиус: 4px;
	/* Текст идёт по той же ширине, что и карточки: правый край общий, при
	   сужении окна текст и сетки сжимаются вместе. До 30.08.2026 ширин было
	   семь — 42, 46, 47, 48, 52, 60 rem и 22ch, и текст выглядел сбитым влево.
	   Плата за общий край — длинная строка, поэтому ниже поднят интерлиньяж. */
	--ширина-текста: 100%;
	--текст-шрифт: 'Golos Text', -apple-system, 'Segoe UI', Roboto, sans-serif;
	--моно-шрифт: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Корневой размер поднят с 16 до 19px 30.08.2026: текст идёт по ширине
   карточек, а длинная строка требует более крупного кегля — иначе глаз
   теряет начало следующей. Заголовки ниже пересчитаны так, чтобы остаться
   прежними: у них своя логика, и расти вместе с текстом им не нужно. */
html {
	font-size: 118.75%;
	-webkit-text-size-adjust: 100%;
	/* Шапка липкая, и без этого отступа переход по «Этапы», «Цены» или
	   «Контакты» прятал начало секции под ней: человек попадал на середину
	   первого абзаца и не видел, куда пришёл. 84 = высота шапки плюс воздух. */
	scroll-padding-top: 84px;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--бумага);
	color: var(--текст);
	font-family: var(--текст-шрифт);
	line-height: 1.7;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	color: var(--чернила);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.021em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(1.88rem, 5.4vw, 3.07rem);
	letter-spacing: -0.032em;
}

h2 {
	font-size: clamp(1.48rem, 3.4vw, 2.02rem);
	letter-spacing: -0.026em;
}

h3 {
	font-size: 1.03rem;
	line-height: 1.28;
}

p {
	margin: 0 0 1.1em;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--акцент);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--акцент-тёмный);
}

:focus-visible {
	outline: 2px solid var(--акцент);
	outline-offset: 3px;
}

.секция--тёмная :focus-visible,
.подвал :focus-visible {
	outline-color: #A8BFD3;
}

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

/* ── Каркас ───────────────────────────────────────────── */

.обёртка {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--поле);
}

.секция {
	padding: clamp(3.5rem, 8vw, 6.5rem) 0;
	border-top: 1px solid var(--линия);
}

.секция--белая {
	background: var(--белое);
}

.секция--тёмная {
	background: var(--тёмное);
	border-top: 0;
}

.секция--тёмная h2,
.секция--тёмная h3 {
	color: var(--белое);
}

.секция--тёмная p {
	color: #A8BFD3;
}

.шапка-секции {
	max-width: var(--ширина-текста);
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.шапка-секции p {
	margin-top: 0.9rem;
	font-size: 1.06rem;
}

.метка {
	display: block;
	margin-bottom: 0.85rem;
	color: var(--приглушённое);
	font-family: var(--моно-шрифт);
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.секция--тёмная .метка {
	color: #7FA0BF;
}

/* ── Шапка сайта ──────────────────────────────────────── */

.шапка {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(244, 247, 250, 0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--линия);
}

.шапка__ряд {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 68px;
}

/* Название и ядровая фраза стоят столбиком: фраза — подпись компании,
   а не второе имя в строку. Решение 38, место в шапке — 29.08.2026. */
.знак {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.12rem;
	color: var(--чернила);
	font-size: 1.16rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-decoration: none;
}

.знак span {
	color: var(--приглушённое);
	font-family: var(--моно-шрифт);
	font-size: 0.66rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.шапка__меню {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.шапка__меню a {
	color: var(--текст);
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
}

.шапка__меню a:hover {
	color: var(--акцент);
}

.шапка__меню a[aria-current="page"] {
	color: var(--акцент);
	font-weight: 600;
}

/* Ниже 860px меню уходит — вместо него в шапке остаётся целевое действие.
   Селектор с двумя классами: иначе display из .кнопка ниже перебьёт это. */
.шапка .шапка__связь {
	display: none;
	padding: 0.55rem 1.15rem;
	font-size: 0.94rem;
}

/* ── Кнопки ───────────────────────────────────────────── */

.кнопка {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--радиус);
	background: var(--акцент);
	color: var(--белое);
	font-family: var(--текст-шрифт);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease;
}

.кнопка:hover {
	background: var(--акцент-тёмный);
	color: var(--белое);
}

.кнопка--тихая {
	background: transparent;
	border-color: var(--линия);
	color: var(--чернила);
}

.кнопка--тихая:hover {
	background: var(--подложка-акцента);
	border-color: var(--акцент);
	color: var(--акцент-тёмный);
}

/* ── Герой ────────────────────────────────────────────── */

.герой {
	padding: clamp(2.75rem, 6vw, 4.75rem) 0 clamp(3rem, 6.5vw, 5rem);
	border-top: 0;
}

/* Первый экран — только узнавание. Заголовок и один абзац во всю ширину:
   заказчик должен увидеть здесь себя, а не предложение. Лестница шагов и
   образец отчёта отсюда убраны 29.08.2026 — им место там, где человек уже
   согласился, что это про него. */
.герой h1 {
	max-width: var(--ширина-текста);
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.герой__боль {
	max-width: var(--ширина-текста);
	margin: 0;
	font-size: clamp(1.18rem, 2.1vw, 1.45rem);
	line-height: 1.55;
}

/* Такт между болью и её усилением: человек прочитал «у вас не работает»
   и должен сразу услышать «этим я и занимаюсь», иначе экран обрывается. */
.герой__ответ {
	max-width: var(--ширина-текста);
	margin: 1.6rem 0 0;
	padding-left: 1rem;
	border-left: 3px solid var(--акцент);
	font-size: 1.08rem;
}

/* Кнопки страницы 404. Своя обёртка, а не .герой__кнопки: у той нет
   собственного правила, и добавлять его значило бы менять отступ кнопки
   в блоке аудита на главной. Заведено 31.08.2026 вместе с 404.html. */
.ошибка__кнопки {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: 2rem;
}

/* ── Образец отчёта ───────────────────────────────────── */

/* Встроенный просмотрщик убран 30.08.2026: семь картинок весили 520 КБ и
   грузились ради того, что человек всё равно хочет открыть целиком.
   Пояснение к кнопке убрано следом — оно повторяло список выше. */
.образец__кнопка {
	margin-top: 1.5rem;
}

/* ── Боли ─────────────────────────────────────────────── */

.боли {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	gap: clamp(1rem, 1.8vw, 1.6rem);
}

/* Три строки подсетки: заголовок, симптом, ответ. Так подложки в ряду
   стоят на одной высоте при разной длине текста — без min-height. */
.боль {
	--отступ: clamp(1.4rem, 2.5vw, 1.9rem);
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	align-content: start;
	padding: var(--отступ);
	border: 1px solid var(--линия);
	border-radius: var(--радиус);
	overflow: hidden;
	background: var(--белое);
}

.боль h3 {
	margin-bottom: 0.5rem;
}

/* Абзац — последний в своей строке подсетки, нижний отступ ему не нужен:
   он только добавлял пустоты между симптомом и подложкой ответа. */
.боль p {
	margin-bottom: 0;
	font-size: 0.97rem;
}

/* Ответ прижат к низу карточки и лежит на подложке: симптом наверху,
   что делаем — внизу. Разная длина текста больше не рвёт ряд. */
.боль__ответ {
	position: relative;
	display: block;
	align-self: stretch;
	margin: 0.9rem calc(-1 * var(--отступ)) calc(-1 * var(--отступ));
	padding: 1rem var(--отступ) 1.05rem calc(var(--отступ) + 1.5rem);
	border-top: 1px solid var(--линия);
	background: var(--подложка-акцента);
	color: var(--акцент-тёмный);
	font-size: 0.97rem;
	font-weight: 500;
}

.боль__ответ::before {
	content: "→";
	position: absolute;
	top: 1rem;
	left: var(--отступ);
	color: var(--акцент);
	font-family: var(--моно-шрифт);
	font-size: 0.95rem;
}

/* ── Аудит ────────────────────────────────────────────── */

/* Секция аудита — одна колонка на всю ширину: боковые карточки убраны
   30.08.2026, их содержимое стало обычными абзацами внизу. Ширина строки
   ограничена, иначе на широком экране текст не читается. */
.аудит__текст {
	max-width: var(--ширина-текста);
}

.о-компании {
	max-width: var(--ширина-текста);
}

.список-галочек li {
	position: relative;
	padding: 0 0 0 1.9rem;
	margin-bottom: 0.85rem;
	font-size: 1.02rem;
}

.список-галочек li:last-child {
	margin-bottom: 0;
}

.список-галочек li::before {
	content: "";
	position: absolute;
	top: 0.52em;
	left: 0;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--акцент);
	border-bottom: 2px solid var(--акцент);
	transform: rotate(-45deg);
}

.карта {
	padding: clamp(1.5rem, 3vw, 2rem);
	border: 1px solid var(--линия);
	border-radius: var(--радиус);
	background: var(--белое);
}

.карта + .карта {
	margin-top: 1.25rem;
}

.карта h3 {
	margin-bottom: 0.75rem;
}

.карта p {
	font-size: 0.97rem;
}

.карта--граница {
	background: var(--подложка-акцента);
	border-color: #CBDCEB;
}

/* Три выхода из отчёта — развилка, а не перечисление: маркеры те же, что в ценах. */
.исходы {
	margin-top: 1rem;
}

.исходы li {
	position: relative;
	margin-bottom: 0.7rem;
	padding-left: 1.05rem;
	font-size: 0.94rem;
	line-height: 1.5;
}

.исходы li:last-child {
	margin-bottom: 0;
}

.исходы li::before {
	content: "";
	position: absolute;
	top: 0.66em;
	left: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--акцент);
	opacity: 0.5;
}

/* ── Этапы внутри аудита ──────────────────────────────── */

/* Аудит — не единая простыня, а четыре шага подряд. Номер и вертикальная
   линия показывают последовательность: где заказчик сейчас и что дальше.
   Размечено 30.08.2026. */
.этапы {
	max-width: var(--ширина-текста);
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	padding: 0;
	list-style: none;
	counter-reset: этап;
}

.этап {
	position: relative;
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr);
	gap: 0 1.25rem;
	padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}

.этап:last-child {
	padding-bottom: 0;
}

/* Линия идёт от номера вниз до следующего этапа — у последнего её нет. */
.этап:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 2.9rem;
	left: 1.28rem;
	bottom: 0.4rem;
	width: 1px;
	background: var(--линия);
}

.этап__номер {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--акцент);
	border-radius: 50%;
	background: var(--бумага);
	color: var(--акцент);
	font-family: var(--моно-шрифт);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
}

.этап__тело h3 {
	margin: 0.45rem 0 0.75rem;
}

.этап__тело p:last-child,
.этап__тело ul:last-child {
	margin-bottom: 0;
}

/* ── Процесс ──────────────────────────────────────────── */

.шаги {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, 0.09);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--радиус);
	overflow: hidden;
}

.шаг {
	padding: clamp(1.35rem, 2.5vw, 1.75rem);
	background: var(--тёмное-карточка);
}

/* Номер и нить: шаги — настоящая последовательность, линия её и показывает. */
.шаг__номер {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.85rem;
	color: #6E93B5;
	font-family: var(--моно-шрифт);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

.шаг__номер::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.14);
}

.шаг h3 {
	margin-bottom: 0.5rem;
	font-size: 1.08rem;
}

.шаг p {
	color: #A8BFD3;
	font-size: 0.93rem;
}

/* ── Цены ─────────────────────────────────────────────── */

.цены {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14.7rem, 100%), 1fr));
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Шесть строк подсетки: ступень, имя, описание, сумма, условие, список.
   Так цены и линии стоят на одной высоте при описаниях разной длины —
   тот же приём, что в карточках болей, вместо прежнего min-height,
   который угадывал высоту и промахивался при каждой правке текста. */
.цена {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 6;
	align-content: start;
	row-gap: 0.55rem;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border: 1px solid var(--линия);
	border-radius: var(--радиус);
	background: var(--белое);
}

.цена__ступень {
	display: block;
	color: var(--приглушённое);
	font-family: var(--моно-шрифт);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.цена h3 {
	margin-bottom: 0;
}

/* Отступы между строками даёт row-gap подсетки: собственные margin
   элементов складывались с ним и разводили строки на лишние десятки
   пикселей. */
.цена__описание {
	margin: 0.35rem 0 0;
	font-size: 0.96rem;
}

.цена__сумма {
	display: block;
	color: var(--чернила);
	font-family: var(--моно-шрифт);
	font-size: 1.42rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

/* «/мес.» мельче самой суммы: в один кегль строка не помещалась и
   переносилась на вторую, ломая выравнивание карточек. */
.цена__период {
	font-size: 0.62em;
	letter-spacing: -0.02em;
}

.цена__условие {
	display: block;
	margin: 0;
	color: var(--приглушённое);
	font-size: 0.85rem;
}

.цена ul {
	margin-top: 0.75rem;
	padding-top: 1.3rem;
	border-top: 1px solid var(--линия);
}

.цена li {
	position: relative;
	margin-bottom: 0.65rem;
	padding-left: 1.05rem;
	font-size: 0.94rem;
	line-height: 1.5;
}

.цена li:last-child {
	margin-bottom: 0;
}

.цена li::before {
	content: "";
	position: absolute;
	top: 0.66em;
	left: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--акцент);
	opacity: 0.5;
}


.сноска-цен {
	margin-top: 1.75rem;
	color: var(--приглушённое);
	font-size: 0.94rem;
}

/* ── За что уже платите ───────────────────────────────── */

.оплачено {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(11.2rem, 100%), 1fr));
	gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
}

.оплачено__пункт h3 {
	margin-bottom: 0.5rem;
	padding-top: 0.85rem;
	border-top: 2px solid var(--акцент);
	font-size: 1.08rem;
}

.оплачено__пункт p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
}

.оплачено__итог {
	max-width: var(--ширина-текста);
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--линия);
	font-size: 1.02rem;
}

/* ── Гарантии ─────────────────────────────────────────── */

/* Четыре условия — значит два ряда по два, а не три и одинокое.
   auto-fit раскладывал их 3 + 1, и последняя карточка висела в пустоте. */
.гарантии {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 620px) {
	.гарантии {
		grid-template-columns: minmax(0, 1fr);
	}
}

.гарантия h3 {
	margin-bottom: 0.55rem;
	padding-top: 1rem;
	border-top: 2px solid var(--акцент);
	font-size: 1.05rem;
}

.гарантия p {
	font-size: 0.96rem;
}

/* ── Платформа и вопросы ──────────────────────────────── */

.платформа {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(12.6rem, 100%), 1fr));
	gap: 1.4rem 2.5rem;
}

.платформа h3,
.платформа h4 {
	margin-bottom: 0.4rem;
	font-size: 1.02rem;
}

.платформа p {
	font-size: 0.94rem;
}

/* Число колонок задано явно: auto-fit при широком экране разложил бы шесть
   направлений на пять колонок и оставил одинокую карточку во втором ряду. */
@media (min-width: 900px) {
	.платформа--три {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.платформа--две {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.платформа-сноска {
	margin-top: 1.6rem;
	max-width: var(--ширина-текста);
	color: var(--приглушённое);
	font-size: 0.96rem;
}

/* Перечень инструментов внутри карточки: состав направления идёт списком,
   как его перечисляет вендор, а не пересказом. */
.платформа li {
	padding: 0.42rem 0;
	border-bottom: 1px solid var(--линия);
	font-size: 0.94rem;
	color: var(--текст);
}

.платформа li:last-child {
	border-bottom: 0;
}

.платформа article > h3 {
	padding-bottom: 0.55rem;
	border-bottom: 2px solid var(--акцент);
}

.вопросы {
	max-width: var(--ширина-текста);
}

.вопрос {
	padding: 1.2rem 0;
	border-bottom: 1px solid var(--линия);
}

.вопрос:first-child {
	border-top: 1px solid var(--линия);
}

.вопрос summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	color: var(--чернила);
	font-size: 1.05rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.вопрос summary::-webkit-details-marker {
	display: none;
}

.вопрос summary::after {
	content: "+";
	color: var(--акцент);
	font-family: var(--моно-шрифт);
	font-size: 1.2rem;
	line-height: 1;
}

.вопрос[open] summary::after {
	content: "−";
}

.вопрос__ответ {
	margin-top: 0.85rem;
	font-size: 0.99rem;
}

/* ── Контакты и подвал ────────────────────────────────── */

/* Ряд ломается только пополам: auto-fit давал 3 + 1, и одинокая
   четвёртая плитка висела в пустом ряду. */
.связь {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--радиус);
	overflow: hidden;
}

.связь__канал {
	padding: 1.5rem 1.2rem;
	background: var(--тёмное-карточка);
	text-decoration: none;
	display: block;
	transition: background 0.15s ease;
}

.связь__канал:hover {
	background: #1D3450;
}

.связь__канал span {
	display: block;
	color: #7FA0BF;
	font-family: var(--моно-шрифт);
	font-size: 0.72rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

/* Значение — одной строкой: идентификатор Max длиннее прочих и при
   переносе оставлял на второй строке одну букву. Кегль подобран так,
   чтобы самый длинный из четырёх помещался целиком. */
.связь__канал strong {
	display: block;
	margin-top: 0.5rem;
	color: var(--белое);
	font-size: 0.96rem;
	font-weight: 600;
	white-space: nowrap;
}

.реквизиты {
	margin: 0 0 0.7rem;
	color: #7B99B5;
	font-family: var(--моно-шрифт);
	font-size: 0.83rem;
	line-height: 1.75;
}

.подвал {
	padding: 2.25rem 0 2.75rem;
	background: var(--тёмное);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: #7B99B5;
	font-size: 0.87rem;
}

.подвал a {
	color: #BBD2E6;
}

.подвал p {
	max-width: var(--ширина-текста);
	margin-bottom: 0.7rem;
}

/* ── Страница политики ────────────────────────────────── */

.документ {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
}

.документ > * {
	max-width: 38rem;
}

.документ .таблица {
	margin-bottom: 1.5rem;
	overflow-x: auto;
}

.документ .таблица table {
	margin-bottom: 0;
}


.документ h1 {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin-bottom: 2rem;
}

.документ h2 {
	margin: 2.5rem 0 0.9rem;
	font-size: 1.3rem;
}

.документ h3 {
	margin: 1.75rem 0 0.6rem;
}

.документ ul {
	margin: 0 0 1.1em;
	padding-left: 1.3rem;
	list-style: disc;
}

.документ li {
	margin-bottom: 0.45rem;
}

.документ table {
	width: 100%;
	margin-bottom: 1.5rem;
	border-collapse: collapse;
	font-size: 0.94rem;
}

.документ th,
.документ td {
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--линия);
	text-align: left;
	vertical-align: top;
}

.документ th {
	background: var(--подложка-акцента);
	color: var(--чернила);
	font-weight: 600;
}

.назад {
	display: inline-block;
	margin-bottom: 2rem;
	font-family: var(--моно-шрифт);
	font-size: 0.82rem;
	text-decoration: none;
}

/* ── Узкие экраны ─────────────────────────────────────── */

@media (max-width: 980px) {
	.шаги {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.герой h1 {
		max-width: none;
	}

	.шапка__меню {
		display: none;
	}

	.шапка .шапка__связь {
		display: inline-flex;
	}
}

@media (max-width: 1040px) {
	.связь {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.шаги {
		grid-template-columns: minmax(0, 1fr);
	}

	/* В одну колонку подсетка только тянет пустоту: ряда, по которому
	   выравнивать, больше нет. */
	.боль {
		display: block;
		grid-row: auto;
	}

	/* Таблицы политики прокручиваются внутри рамки, но чем меньше
	   прокручивать, тем лучше: на телефоне реквизиты влезают почти целиком. */
	.документ table {
		font-size: 0.82rem;
	}

	.документ th,
	.документ td {
		padding: 0.5rem 0.6rem;
	}
}

@media (max-width: 520px) {
	body {
		font-size: 16px;
	}

	.связь {
		grid-template-columns: minmax(0, 1fr);
	}

	.герой__кнопки .кнопка {
		width: 100%;
		justify-content: center;
	}

	/* Прежде здесь пряталась строка «Битрикс24 · аудит · доработка», и прятать
	   её было незачем. Теперь под названием стоит ядровая фраза — она
	   остаётся и на телефоне, только мельче и в две строки: рядом с кнопкой
	   «Связаться» она в одну не помещается и раздвигала страницу вширь. */
	.знак {
		min-width: 0;
		font-size: 1rem;
	}

	.знак span {
		font-size: 0.55rem;
		letter-spacing: 0.05em;
		white-space: normal;
	}

	/* На 320 пикселях название и кнопка не расходились: flex сжимал знак,
	   а буквы вылезали под кнопку. Полтора ремa зазора между двумя
	   элементами шапки — роскошь такой ширины. */
	.шапка__ряд {
		gap: 0.75rem;
	}
}

/* ── Согласие на сбор статистики ───────────────────────
   Ставится 05.09.2026: Метрика грузится только после «Принять», выбор
   помнится в localStorage. Разметку и логику строит `согласие.js` — одним
   файлом на все четыре страницы, потому что четыре копии гейта разъехались
   бы молча, а расхождение здесь — состав по ч. 1 ст. 13.11 КоАП.

   Виджет чата стоит справа снизу и не гейтится (cookie функциональные,
   п. 10.4 политики) — поэтому окно прижато влево, чтобы кнопка чата
   осталась нажимаемой, пока посетитель выбирает. На телефоне места на
   двоих нет, и там окно идёт поверх: z-index кнопки виджета 10100,
   проверено в браузере 05.09.2026. */
.согласие {
	position: fixed;
	z-index: 10200;
	left: var(--поле);
	bottom: var(--поле);
	width: min(30rem, calc(100vw - var(--поле) * 2));
	padding: 1.35rem 1.5rem 1.5rem;
	background: var(--белое);
	border: 1px solid var(--линия);
	border-radius: var(--радиус);
	box-shadow: 0 12px 32px rgba(15, 26, 38, 0.18);
}

.согласие__текст {
	margin: 0 0 0.6rem;
	max-width: 100%;
	font-size: 0.87rem;
	line-height: 1.6;
	color: var(--текст);
}

.согласие__ссылка {
	margin: 0 0 1.1rem;
	max-width: 100%;
	font-size: 0.87rem;
}

.согласие__кнопки {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.согласие__кнопки .кнопка {
	padding: 0.7rem 1.35rem;
	font-size: 0.93rem;
}

/* На телефоне окно занимает всю ширину и садится к нижнему краю: кнопка
   чата на это время перекрывается, и это правильно — выбор из двух кнопок
   делается один раз, а канал остаётся на месте после него. */
@media (max-width: 620px) {
	.согласие {
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
		border-radius: 0;
		padding: 1.1rem var(--поле) 1.25rem;
	}

	.согласие__кнопки .кнопка {
		flex: 1 1 8rem;
		justify-content: center;
	}
}