/*
  Вёрстка сайта. Версия дизайн-системы C.

  Источник значений — макеты `03_DESIGN/handoff`, файл `COMP_BOARD_C.dc.html`
  и страницы 01–22 в двух ширинах. Значения сняты из самих макетов, а не
  из подписей под ними: макет — живая страница.

  Правила системы, которые здесь закреплены и не подбираются на месте:
  · палитра закрыта, новый цвет вводится дизайнером, а не вёрсткой;
  · радиус 6px — единственный;
  · шкала отступов кратна 4: 4 8 12 16 20 24 32 48 64;
  · поля страницы 56px на десктопе, 16px на мобильном;
  · моноширинный только в номерах дел, Cormorant только в монограмме;
  · хит-таргеты на мобильном не ниже 44px.

  Точки переключения ширины (задал архитектор):
  1280 — боковая колонка остаётся, поля сокращаются;
  1024 — боковая уходит под контент;
  768  — раскладка мобильная.
*/

/* ---------------------------------------------------------------
   1. Токены версии C
   --------------------------------------------------------------- */

:root {
	/* тёмные плоскости */
	--ink: #0B0D12;
	--panel: #141417;
	--panel-2: #1A1A1E;
	--panel-line: #2A2A2E;
	--panel-line-2: #4A4A50;
	--panel-line-3: #3A3A3F;

	/* светлые плоскости */
	--bg: #EFEDE8;
	--surface: #F4F2ED;
	--white: #FFFFFF;

	/* линии */
	--line: #E0DCD4;
	--line-soft: #EFEDE8;
	--field-line: #C9C6C0;

	/* текст */
	--text: #0B0D12;
	--text-2: #3D4451;
	--text-3: #5C6472;
	--text-dim: #8A8781;
	--on-dark: #F2F0EC;
	--on-dark-2: #B5B2AC;
	--on-dark-3: #D6D3CD;
	/* Самый тихий текст на тёмном. В макете подвала стоит #6E6A63,
	   но на #0B0D12 он даёт контраст 3,6 — ниже требуемых 4,5.
	   Взят ближайший по шкале #8A8781: 5,0. Отступление от макета
	   ради числового критерия приёмки, внесено в отчёт. */
	--on-dark-4: #8A8781;

	/* золото двухсоставное: светлое — на тёмном, тёмное — текстом на светлом */
	--gold: #C9A96E;
	--gold-hover: #DCC28E;
	--gold-press: #B08F52;
	--gold-text: #8A6A32;
	--gold-text-hover: #71562A;
	--gold-bg: #FBF6EA;
	--gold-line: #E4CE9C;
	--on-gold: #0E0E10;
	--on-gold-2: #5C4519;

	/* исход спора */
	--gain: #0F6B45;
	--gain-bg: #F1F7F3;
	--gain-line: #A9C9B8;
	--gain-dark: #5FBF8E;
	--demand: #9E3B30;
	--demand-line: #C4584A;
	--demand-bg: #FDF4F2;

	/* недоступное */
	--off-bg: #E4DED2;
	--off-text: #8A8781;

	/* размеры */
	--r: 6px;
	--pad-x: 56px;
	--cw: 1440px;
	--rail: 300px;
	--sticky: 100px;

	/* совместимость с прежними правилами темы */
	--visual: var(--surface);
	--accent: var(--gold-text);
	--accent-hover: var(--gold-text-hover);
	--on-accent: #FFFFFF;
	--line-2: var(--field-line);
	--field: var(--field-line);
}

/* ---------------------------------------------------------------
   2. Основание
   --------------------------------------------------------------- */

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

body.lizing {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
		webkit-font-smoothing: antialiased;
}

.lizing img { max-width: 100%; height: auto; }

/* Полотно страницы. На макете 1440 контент лежит на белом,
   фон #EFEDE8 виден по краям окна шире 1440. */
.wrap {
	max-width: var(--cw);
	margin: 0 auto;
	background: var(--white);
}
.pad { padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* Суммы: табличные цифры основной гарнитурой. Разряды соединяются
   неразрывным пробелом на стороне PHP — иначе сумма рвётся переносом. */
.mono {
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
	white-space: nowrap;
}

/* Единственное место моноширинного — номер дела и номер ВС. */
.caseno {
	font-family: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
	font-weight: 600;
}

/* Монограмма — единственное место Cormorant. */
.znak { display: flex; align-items: center; }
.znak-b {
	font-family: 'Cormorant', Georgia, serif;
	font-size: 30px; line-height: 1; font-weight: 600; color: var(--on-dark);
}
.znak-l { width: 1.5px; height: 32px; background: var(--gold); margin: 0 -2px 0 -4px; }

.lizing a:not(.btn) { color: var(--gold-text); text-decoration: none; }
.lizing a:not(.btn):hover { color: var(--gold-text-hover); }
.lizing a:not(.btn).podchyorknuta { text-decoration: underline; text-underline-offset: 2px; }

/* Фокус — двойное кольцо: белое 2px и тёмное 2px. Работает и на светлом,
   и на тёмном фоне, поэтому вариантов не два, а один. Убирать нельзя. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink);
	border-radius: var(--r);
}

.visually-hidden,
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------
   3. Типографика
   --------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: pretty; }
h1 { font-size: 44px; line-height: 1.08; }
h2 { font-size: 32px; line-height: 1.12; }
h3 { font-size: 22px; line-height: 1.2; font-weight: 600; }
h4 { font-size: 18px; line-height: 1.25; font-weight: 600; }

.lead { font-size: 18px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.sub  { font-size: 14px; line-height: 1.45; color: var(--text-3); }

/* Надзаголовок-рубрикатор. Моноширинного здесь нет: Golos Text 600
   прописными с разрядкой .1em — так задано в системе. */
.nadzag {
	font-weight: 600; font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--text-dim);
}
.nadzag-zoloto { color: var(--gold-text); }
.nadzag-na-tyomnom { color: var(--gold); }
.nadzag-gain { color: var(--gain); }
.nadzag-demand { color: var(--demand); }

/* ---------------------------------------------------------------
   4. Кнопки. Закрытый список подписей, перенос запрещён.
   --------------------------------------------------------------- */

.btn {
	height: 52px; padding: 0 26px; border-radius: var(--r);
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1;
	white-space: nowrap; text-decoration: none; cursor: pointer;
	border: 1px solid transparent; background: none; color: inherit;
	transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-wide { width: 100%; }
.btn-sm { height: 44px; padding: 0 18px; font-size: 14px; }
.btn-md { height: 48px; font-size: 14px; }

/* главная — одна на экран */
.btn-primary { background: var(--gold); color: var(--on-gold); }
.btn-primary:hover { background: var(--gold-hover); color: var(--on-gold); }
.btn-primary:active { background: var(--gold-press); }

/* на светлом */
.btn-ghost { border-color: var(--field-line); color: var(--text); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-text-hover); }
.btn-ghost:active { border-color: var(--gold); background: var(--gold-bg); color: var(--gold-text-hover); }

/* на тёмном */
.btn-dark { border-color: var(--panel-line-2); color: var(--on-dark); }
.btn-dark:hover { border-color: var(--gold); color: var(--gold); }
.btn-dark:active { border-color: var(--gold); background: rgba(201, 169, 110, .14); color: var(--gold); }

/* Недоступна — собственный цвет, а не прозрачность:
   прозрачная кнопка на тёмной полосе выглядит сломанной. */
.btn[disabled],
.btn[aria-disabled="true"],
.btn.off {
	background: var(--off-bg); border-color: var(--off-bg);
	color: var(--off-text); cursor: not-allowed; pointer-events: none;
}

/* Загрузка: подпись меняется на глагол в первом лице, добавляется кольцо.
   Ширину кнопка фиксирует до нажатия — иначе прыгает. */
.btn.gruzhu { opacity: .85; pointer-events: none; }
.btn.gruzhu::before {
	content: ''; width: 16px; height: 16px; flex: none;
	border: 2px solid currentColor; border-right-color: transparent;
	border-radius: 50%; animation: lizing-krug 900ms linear infinite;
}
@keyframes lizing-krug { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.btn.gruzhu::before { animation: none; }
}

/* Ссылка-действие внутри блока: «Все дела →» */
.dalee { font-size: 16px; font-weight: 600; color: var(--gold-text); white-space: nowrap; }
.dalee:hover { color: var(--gold-text-hover); }

/* ---------------------------------------------------------------
   5. Поля формы. Высота 48px, рамка 1px, при фокусе и ошибке 2px.
   --------------------------------------------------------------- */

.pole { display: flex; flex-direction: column; gap: 8px; }
.pole > label,
.pole-lab { font-size: 12px; font-weight: 500; color: var(--text-3); }

.vvod {
	height: 48px; width: 100%; box-sizing: border-box;
	border: 1px solid var(--field-line); border-radius: var(--r);
	padding: 0 12px; font-family: inherit; font-size: 16px; color: var(--text);
	background: var(--white); appearance: none;
}
textarea.vvod { height: auto; min-height: 100px; padding: 12px; line-height: 1.5; }
.vvod::placeholder { color: var(--text-dim); }
.vvod:focus { outline: none; border-width: 2px; border-color: var(--gold); padding: 0 11px; }
textarea.vvod:focus { padding: 11px; }

.pole-podskazka { font-size: 12px; color: var(--text-3); }
.pole-prinyato { font-size: 12px; color: var(--gain); }

/* Ошибка появляется после ухода из поля, а не во время набора,
   и говорит, что сделать, а не что нарушено. */
.pole.oshibka > label { color: var(--demand); }
.pole.oshibka .vvod {
	border-width: 2px; border-color: var(--demand-line);
	background: var(--demand-bg); padding: 0 11px;
}
.pole.oshibka textarea.vvod { padding: 11px; }
.pole-oshibka { font-size: 12px; color: var(--demand); }

.vvod[readonly],
.vvod[disabled] {
	border-color: var(--line); background: var(--surface); color: var(--text-dim);
}

/* Поля на тёмной полосе */
.tyomno .pole > label,
.tyomno .pole-lab { color: var(--on-dark-2); }
.tyomno .vvod {
	background: transparent; border-color: var(--panel-line-2); color: var(--on-dark);
}
.tyomno .vvod::placeholder { color: var(--text-dim); }
.tyomno .vvod:focus { border-color: var(--gold); }

/* Согласие 152-ФЗ */
.soglasie { display: flex; gap: 12px; align-items: flex-start; }
.soglasie input {
	width: 20px; height: 20px; flex: none; margin: 2px 0 0;
	accent-color: var(--gold-text);
}
.soglasie span { font-size: 14px; line-height: 1.45; color: var(--text-3); }
.tyomno .soglasie span { color: var(--text-dim); }
.tyomno .soglasie a { color: var(--gold); }

/* ---------------------------------------------------------------
   6. Карточка с шапкой — рабочая лошадь версии C. Два ранга.
   --------------------------------------------------------------- */

.karta {
	border: 1px solid var(--line); border-radius: var(--r);
	background: var(--white); overflow: hidden;
	display: flex; flex-direction: column;
}
.karta-shapka {
	padding: 16px 20px; background: var(--surface);
	border-bottom: 1px solid var(--line);
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.karta-shapka.stolbik { flex-direction: column; align-items: stretch; gap: 4px; }
.karta-t { font-size: 16px; font-weight: 600; }
.karta-t-b { font-size: 18px; font-weight: 600; }
.karta-schyot { font-weight: 600; font-size: 12px; color: var(--text-dim); }
.karta-telo { padding: 22px; display: flex; flex-direction: column; gap: 16px; flex: 1; }

/* Выделенный ранг — золотая рамка. Один блок на экран:
   если выделены оба, не выделен ни один. */
.karta.vydelena { border-color: var(--gold); }
.karta.vydelena > .karta-shapka { background: var(--gold-bg); border-bottom-color: var(--gold-line); }
.karta.vydelena .karta-t,
.karta.vydelena .karta-t-b { color: var(--gold-text-hover); }
.karta.vydelena .karta-schyot { color: var(--gold-text); }

/* Тёмная шапка карточки — для боковой панели */
.karta.tyomnaya-shapka > .karta-shapka {
	background: var(--ink); border-bottom-color: var(--ink);
	flex-direction: column; align-items: stretch; gap: 4px;
}
.karta.tyomnaya-shapka .karta-t,
.karta.tyomnaya-shapka .karta-t-b { color: var(--on-dark); }

/* Строки списка внутри карточки: разделитель #EFEDE8, последняя без него */
.karta-stroki { display: flex; flex-direction: column; }
.karta-stroki > * {
	padding: 16px 20px; font-size: 16px; line-height: 1.45;
	border-bottom: 1px solid var(--line-soft);
}
.karta-stroki > *:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------
   7. Сетка без промежутков: gap:1px на подложке рамки, вместо теней
   --------------------------------------------------------------- */

.setka {
	display: grid; gap: 1px; background: var(--line);
	border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.setka-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setka-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.setka-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.setka > * { background: var(--white); min-width: 0; }
.setka .shire-2 { grid-column: span 2; }

.plitka { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
a.plitka, .plitka.klikaemaya { transition: background 150ms ease; }
a.plitka:hover, .plitka.klikaemaya:hover { background: var(--gold-bg); }
.plitka-t { font-size: 16px; font-weight: 600; }
.plitka-d { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.plitka.itogovaya { background: var(--gold-bg); }
.plitka.itogovaya .plitka-t { color: var(--gold-text-hover); }

/* Номер шага. В коммерческих блоках крупные цифры 1–2–3–4 не ставятся:
   номер живёт кружком 30px, а не набором в кегль заголовка. */
.shag-n {
	width: 30px; height: 30px; flex: none; border-radius: 50%;
	background: var(--ink); color: var(--gold);
	font-size: 14px; font-weight: 600;
	display: flex; align-items: center; justify-content: center;
}
.plitka.itogovaya .shag-n { background: var(--gold); color: var(--ink); }

/* Метка вместо номера: время, а не порядок абзаца */
.metka {
	align-self: flex-start; padding: 4px 12px; border-radius: var(--r);
	background: var(--ink); color: var(--gold); font-weight: 600; font-size: 12px;
}
.metka-zoloto { background: var(--gold); color: var(--ink); }
.metka-svetlaya {
	background: var(--gold-bg); border: 1px solid var(--gold-line);
	color: var(--gold-text-hover); font-size: 12px; letter-spacing: .06em;
	text-transform: uppercase; height: 26px; padding: 0 10px;
	display: inline-flex; align-items: center;
}

/* Строка-ссылка на ситуацию: иконка · текст · стрелка */
.stroka-ssylka {
	padding: 16px 20px; display: grid; grid-template-columns: 24px 1fr 16px;
	gap: 16px; align-items: center; background: var(--white);
	font-size: 16px; font-weight: 500; line-height: 1.35;
	color: var(--text); transition: background 150ms ease;
}
.lizing a.stroka-ssylka { color: var(--text); }
.lizing a.stroka-ssylka:hover { background: var(--gold-bg); color: var(--text); }
.stroka-ssylka .strelka { font-size: 14px; color: var(--gold-text); text-align: right; }

/* ---------------------------------------------------------------
   8. Цифры и деньги. Один способ записи на всём сайте.
   --------------------------------------------------------------- */

.summa { font-size: 26px; font-weight: 600; white-space: nowrap; }
.summa-krupno { font-size: 32px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.summa-trebovali {
	color: var(--demand); text-decoration: line-through; text-decoration-thickness: 1px;
}
.summa-ostalos { color: var(--gain); }

.polosa { height: 8px; background: var(--surface); border-radius: var(--r); overflow: hidden; }
.polosa > i { display: block; height: 100%; }
.polosa-demand > i { background: var(--demand-line); }
.polosa-gain > i { background: var(--gain); }
.polosa-gold > i { background: var(--gold); }
.polosa-tonkaya { height: 3px; background: var(--line); }
.polosa-6 { height: 6px; }

/* Итоговая полоса — всегда тёмная. Одна мысль, не длиннее двух строк. */
.itog {
	display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center;
	padding: 20px 24px; background: var(--ink); border-radius: var(--r);
}
.itog-lab {
	font-weight: 600; font-size: 12px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--gold); white-space: nowrap;
}
.itog-t { font-size: 18px; line-height: 1.45; color: var(--on-dark); text-wrap: pretty; }

/* Тёмная сводка внутри карточки (вывод калькулятора, вывод квиза) */
.svodka {
	background: var(--ink); border-radius: var(--r); padding: 20px;
	display: flex; flex-direction: column; gap: 8px;
}
.svodka-t { font-size: 16px; font-weight: 600; color: var(--on-dark); line-height: 1.35; }
.svodka-d { font-size: 12px; line-height: 1.45; color: var(--text-dim); }

/* ---------------------------------------------------------------
   9. Аккордеон. Плюс поворачивается на 45°, другой значок не вводится.
   --------------------------------------------------------------- */

.akk { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--white); }
.akk-item { border-bottom: 1px solid var(--line-soft); }
.akk-item:last-child { border-bottom: 0; }
.akk-q {
	list-style: none; cursor: pointer;
	padding: 18px 20px; display: flex; justify-content: space-between;
	align-items: center; gap: 16px; font-size: 16px; font-weight: 600;
}
.akk-q::-webkit-details-marker { display: none; }
.akk-q .plus {
	font-size: 22px; line-height: 1; color: var(--gold-text); flex: none;
	transition: transform 150ms ease;
}
.akk-item[open] > .akk-q { background: var(--surface); }
.akk-item[open] > .akk-q .plus { transform: rotate(45deg); }
.akk-a { padding: 0 20px 18px; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.akk-item[open] > .akk-a { background: var(--surface); }
.akk-a p { margin: 0 0 12px; }
.akk-a p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   10. Чипы фильтра. Активный тёмный, счётчик золотом.
       Чип с нулём не скрывается, а гаснет.
   --------------------------------------------------------------- */

.chipy { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
	height: 38px; padding: 0 16px; border-radius: var(--r);
	border: 1px solid var(--line); background: var(--white);
	font-family: inherit; font-size: 14px; color: var(--text);
	display: inline-flex; align-items: center; gap: 8px;
	white-space: nowrap; cursor: pointer; text-decoration: none;
	transition: border-color 150ms ease;
}
.lizing a.chip { color: var(--text); }
.chip:hover { border-color: var(--gold); }
.chip .n { color: var(--text-3); }
.chip.aktiven,
.lizing a.chip.aktiven {
	background: var(--ink); border-color: var(--ink);
	color: var(--on-dark); font-weight: 600;
}
.chip.aktiven .n { color: var(--gold); }
.chip.pust,
.lizing a.chip.pust { border-color: var(--line); color: var(--text-dim); }
.chip.pust .n { color: var(--text-dim); }

/* ---------------------------------------------------------------
   11. Зона загрузки файлов. Шесть состояний, тупиковых нет:
       в каждом отказе есть выход — другой файл или ссылка на облако.
   --------------------------------------------------------------- */

.zona {
	min-height: 150px; box-sizing: border-box;
	border: 1px dashed var(--field-line); border-radius: var(--r);
	background: var(--white); padding: 16px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; text-align: center; cursor: pointer;
	transition: border-color 150ms ease, background 150ms ease;
}
.zona-t { font-size: 15px; font-weight: 600; }
.zona-d { font-size: 13px; color: var(--text-3); }

/* 2 · файл над зоной */
.zona.nadneyu { border-width: 2px; border-color: var(--gold); background: var(--gold-bg); }
.zona.nadneyu .zona-t { color: var(--gold-text-hover); }

/* 3 · загрузка */
.zona.gruzhu {
	border-style: solid; border-color: var(--field-line);
	align-items: stretch; justify-content: center; text-align: left;
	padding: 20px; gap: 12px; cursor: default;
}
.zona-fayl { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.zona-fayl-n { font-size: 14px; font-weight: 600; }
.zona-fayl-r { font-size: 13px; color: var(--text-3); }

/* 4 · успех */
.zona.prinyato {
	border-style: solid; border-color: var(--gain-line); background: var(--gain-bg);
	align-items: stretch; text-align: left; padding: 20px; cursor: default;
}
.zona.prinyato .zona-t { color: var(--gain); display: flex; align-items: center; gap: 10px; }
.zona-spisok { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }

/* 5 · неверный формат, 6 · превышен размер */
.zona.otkaz {
	border-style: solid; border-width: 2px; border-color: var(--demand-line);
	background: var(--demand-bg); align-items: flex-start; text-align: left;
	padding: 20px; cursor: default;
}
.zona.otkaz .zona-t { color: var(--demand); }
.zona-vyhod {
	font-size: 14px; font-weight: 600; color: var(--gold-text-hover);
	text-decoration: underline; cursor: pointer;
}

/* Зона на тёмной полосе (форма главной) */
.tyomno .zona {
	border-width: 1.5px; border-color: var(--panel-line-2);
	background: transparent; align-items: flex-start; text-align: left; padding: 22px;
}
.tyomno .zona .zona-t { color: var(--on-dark); font-size: 16px; }
.tyomno .zona .zona-d { color: var(--text-dim); font-size: 14px; line-height: 1.45; }

/* ---------------------------------------------------------------
   12. Пустое состояние. Три обязательные части:
       что случилось, почему, куда идти.
   --------------------------------------------------------------- */

.pusto {
	border: 1px solid var(--line); border-radius: var(--r);
	background: var(--surface); padding: 24px;
	display: flex; flex-direction: column; gap: 10px;
}
.pusto-t { font-size: 16px; font-weight: 600; }
.pusto-d { font-size: 16px; line-height: 1.5; color: var(--text-2); }
.pusto-vyhod { font-size: 16px; font-weight: 600; color: var(--gold-text); }

/* ---------------------------------------------------------------
   13. Шапка
   --------------------------------------------------------------- */

.verh {
	height: 40px; padding: 0 var(--pad-x);
	display: flex; align-items: center; gap: 24px;
	background: var(--ink); color: var(--on-dark-2); font-size: 14px;
}
.lizing .verh a { color: var(--on-dark-2); }
.lizing .verh a:hover { color: var(--gold); }
.verh-tel, .lizing .verh a.verh-tel { color: var(--on-dark); font-weight: 600; }
.verh-geo { margin-left: auto; color: var(--gold); }

.nav {
	height: 76px; padding: 0 var(--pad-x);
	display: flex; align-items: center; gap: 32px;
	background: var(--panel); border-bottom: 1px solid var(--panel-line);
	position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--on-dark); }
.brand-sub { font-size: 12px; color: var(--text-dim); }

.menu { display: flex; gap: 24px; font-size: 16px; }
.lizing .menu a { color: var(--on-dark-3); }
.lizing .menu a:hover { color: var(--gold); }
.lizing .menu a[aria-current] { color: var(--gold); }

.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-cta .btn { height: 44px; font-size: 14px; }
.nav-cta .btn-primary { padding: 0 20px; }
.nav-cta .btn-dark { padding: 0 18px; border-color: var(--panel-line-3); color: var(--on-dark-3); }
.nav-cta .btn-dark:hover { border-color: var(--gold); color: var(--gold); }

/* Кнопка меню — только на узком экране */
.burger {
	margin-left: auto; width: 44px; height: 44px; flex: none;
	border-radius: var(--r); border: 1px solid var(--panel-line-3);
	background: none; display: none; align-items: center; justify-content: center;
	cursor: pointer;
}
.burger svg { stroke: var(--on-dark-3); }

.menu-shtora {
	display: none; background: var(--panel);
	border-bottom: 1px solid var(--panel-line); padding: 8px 16px 16px;
	flex-direction: column;
}
.menu-shtora.otkryta { display: flex; }
.lizing .menu-shtora a {
	color: var(--on-dark-3); font-size: 16px; min-height: 48px;
	display: flex; align-items: center; border-bottom: 1px solid var(--panel-line);
}
.lizing .menu-shtora a:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------
   14. Подвал
   --------------------------------------------------------------- */

.site-footer {
	background: var(--ink); padding: 48px var(--pad-x);
	display: flex; flex-direction: column; gap: 24px;
}
.footer-cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--on-dark-2); }
.footer-col h3 {
	font-weight: 600; font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--on-dark-4);
}
.footer-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.lizing .footer-col a { color: var(--on-dark-2); }
.lizing .footer-col a:hover { color: var(--gold); }
.footer-znak { display: flex; align-items: center; gap: 12px; }
.footer-znak .znak-b { font-size: 26px; }
.footer-znak .znak-l { height: 28px; }
.footer-znak-name { font-size: 16px; font-weight: 600; color: var(--on-dark); }
.footer-tel, .lizing .footer-col a.footer-tel { color: var(--on-dark); font-size: 16px; font-weight: 600; }
.footer-pravovoe { font-size: 14px; line-height: 1.45; color: var(--text-dim); }
.footer-liniya { height: 1px; background: var(--panel-line); }
.footer-bottom {
	display: flex; justify-content: space-between; gap: 24px;
	font-size: 14px; color: var(--on-dark-4);
}
.footer-bottom-ssylki { display: flex; gap: 24px; }
.lizing .footer-bottom a { color: var(--on-dark-4); }
.lizing .footer-bottom a:hover { color: var(--gold); }

/* Нижняя панель — только на мобильном, вместо боковой.
   Высота 76px, у страницы такой же нижний отступ. */
.nizhnyaya {
	display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
	padding: 12px 16px; background: rgba(11, 13, 18, .96);
	border-top: 1px solid var(--panel-line);
	grid-template-columns: 52px 1fr; gap: 12px;
}
.nizhnyaya .btn { height: 52px; width: 100%; }
.nizhnyaya .btn-ikonka { padding: 0; }

/* ---------------------------------------------------------------
   15. Секции и раскладка страницы
   --------------------------------------------------------------- */

.section { padding: 72px var(--pad-x); background: var(--white); }
.section.alt { background: var(--surface); }
.section.tyomnaya { background: var(--panel); }
.section.chernaya { background: var(--ink); }
.section.tight { padding-top: 0; }
.section-stolbik { display: flex; flex-direction: column; gap: 24px; }
.section-shapka { display: flex; align-items: baseline; gap: 20px; }
.section-shapka .dalee { margin-left: auto; }
.section-vvod { display: flex; flex-direction: column; gap: 12px; }

.tyomno, .section.tyomnaya, .section.chernaya { color: var(--on-dark); }
.tyomno h1, .tyomno h2, .tyomno h3,
.section.tyomnaya h2, .section.chernaya h2 { color: var(--on-dark); }
.tyomno .lead, .section.tyomnaya .lead, .section.chernaya .lead { color: var(--on-dark-2); }

/* Полотно с боковой панелью: контент 1fr, панель 300px */
.s-panelyu {
	display: grid; grid-template-columns: minmax(0, 1fr) var(--rail);
	gap: 48px; padding: 72px var(--pad-x); align-items: start;
	background: var(--white);
}
.polotno { display: flex; flex-direction: column; gap: 64px; min-width: 0; }

/* Боковая панель: одна на страницу, липнет с отступом 100px —
   ниже липкой шапки. Третьей карточки в панели нет. */
.panel {
	position: sticky; top: var(--sticky);
	display: flex; flex-direction: column; gap: 16px;
}
.panel .karta-telo { padding: 18px; gap: 12px; }
.panel-kontakty {
	display: flex; flex-direction: column; gap: 8px;
	padding-top: 6px; border-top: 1px solid var(--line-soft);
}
.panel-tel { font-size: 16px; font-weight: 600; }
.panel-mail { font-size: 14px; color: var(--text-3); }
.panel-vtoraya {
	border: 1px solid var(--line); border-radius: var(--r);
	background: var(--surface); padding: 14px 16px;
	display: flex; flex-direction: column; gap: 12px;
}

/* ---------------------------------------------------------------
   16. Хлебные крошки
   --------------------------------------------------------------- */

.crumbs {
	padding: 16px var(--pad-x); font-size: 14px; color: var(--text-3);
	background: var(--white); border-bottom: 1px solid var(--line-soft);
}
.crumbs span[aria-current] { color: var(--text-3); }

/* ---------------------------------------------------------------
   17. Тело статьи и таблицы
   --------------------------------------------------------------- */

.article-body { font-size: 18px; line-height: 1.6; color: var(--text); }
.article-body > * { margin: 0 0 20px; }
.article-body > *:last-child { margin-bottom: 0; }
.article-body h2 { font-size: 28px; margin: 48px 0 16px; }
.article-body h3 { font-size: 20px; margin: 32px 0 12px; }
.article-body ul, .article-body ol { padding-left: 24px; }
.article-body li { margin-bottom: 8px; }
.article-body strong { font-weight: 600; }

.table-scroll { overflow-x: auto; }
.tabl {
	width: 100%; border-collapse: collapse; font-size: 16px;
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
	overflow: hidden;
}
.tabl th {
	padding: 16px 20px; background: var(--ink); color: var(--text-dim);
	font-weight: 600; font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; text-align: left;
}
.tabl td { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.tabl tr:last-child td { border-bottom: 0; }
.tabl .chislo { text-align: right; font-weight: 600; white-space: nowrap; }
.tabl tr.besplatno td { background: var(--gain-bg); }
.tabl tr.besplatno .chislo { color: var(--gain); font-weight: 700; }
.tabl-snoska { font-size: 14px; line-height: 1.45; color: var(--text-3); max-width: 760px; }

/* Прайс строкой-сеткой: на 390 таблица становится списком «поле: значение» */
.prays { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.prays-shapka,
.prays-str { display: grid; grid-template-columns: minmax(0, 1fr) 200px; padding: 16px 20px; }
.prays-shapka {
	background: var(--ink); font-weight: 600; font-size: 11px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
}
.prays-str { font-size: 16px; border-bottom: 1px solid var(--line-soft); }
.prays-str:last-child { border-bottom: 0; }
.prays-str .cena { text-align: right; font-weight: 600; white-space: nowrap; }
.prays-str.besplatno { background: var(--gain-bg); }
.prays-str.besplatno .cena { color: var(--gain); font-weight: 700; }
.prays-shapka .cena { text-align: right; }

/* ---------------------------------------------------------------
   18. Первый экран
   --------------------------------------------------------------- */

.hero { background: var(--panel); position: relative; overflow: hidden; }
.hero-foto { position: absolute; right: 0; top: 0; bottom: 0; width: 640px; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 22%; filter: brightness(1.32) contrast(1.03); }
.hero-foto::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient(90deg, #141417 0%, rgba(20,20,23,.88) 26%, rgba(20,20,23,.18) 58%, rgba(20,20,23,0) 78%);
}
.hero-telo {
	position: relative; padding: 48px var(--pad-x) 52px;
	display: grid; grid-template-columns: 740px; gap: 20px;
}
.hero-nadzag { display: flex; align-items: center; gap: 12px; }
.hero-nadzag::before { content: ''; width: 26px; height: 1px; background: var(--gold); }
.hero h1 { color: var(--on-dark); max-width: 720px; }
.hero .lead { color: var(--on-dark-2); max-width: 520px; }
.hero-cta { display: flex; gap: 12px; margin-top: 4px; }

.hero-stats {
	display: grid; grid-template-columns: repeat(3, minmax(0, 210px));
	border-top: 1px solid var(--panel-line); margin-top: 16px;
}
.hero-stat { padding: 20px 24px 0; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--panel-line); }
.hero-stat:first-child { padding-left: 0; border-left: 0; }
.hero-stat-num { font-size: 26px; font-weight: 700; white-space: nowrap; color: var(--on-dark); }
.hero-stat-num.gain { color: var(--gain-dark); }
.hero-stat-num.gold { color: var(--gold); }
.hero-stat-lab { font-size: 14px; color: var(--text-dim); line-height: 1.35; }

/* Полоса «кто ведёт дело»: фото слева, текст справа */
.avtor-polosa { background: var(--panel); display: grid; grid-template-columns: 420px minmax(0, 1fr); align-items: stretch; }
.avtor-foto { min-height: 360px; }
.avtor-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* Снимка нет — колонки под него тоже нет. До 1 сентября полоса
   держала 420 px под фотографию всегда, и на живом сайте, где поля
   фото пустовали, это была пустая тёмная плашка во всю высоту блока. */
.avtor-polosa:not(:has(.avtor-foto)) { grid-template-columns: minmax(0, 1fr); }
.avtor-telo { padding: var(--pad-x); display: flex; flex-direction: column; gap: 20px; }
.avtor-telo p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--on-dark-2); max-width: 720px; text-wrap: pretty; }
.avtor-telo p.zoloto { color: var(--gold); max-width: 640px; }

.setka-tyomnaya {
	display: grid; gap: 1px; background: var(--panel-line);
	border: 1px solid var(--panel-line); border-radius: var(--r); overflow: hidden;
	margin-top: auto; max-width: 780px;
}
.setka-tyomnaya > * { background: var(--panel-2); padding: 22px; display: flex; flex-direction: column; gap: 4px; }
.setka-tyomnaya .num { font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--on-dark); white-space: nowrap; }
.setka-tyomnaya .num.gain { color: var(--gain-dark); }
.setka-tyomnaya .lab { font-size: 14px; color: var(--text-dim); }

/* ---------------------------------------------------------------
   19. Карточка дела: «требовали → осталось»
   --------------------------------------------------------------- */

.delo-shapka {
	padding: 16px 20px; background: var(--surface);
	border-bottom: 1px solid var(--line);
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.delo-no { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; font-size: 14px; }
.delo-opponent { font-size: 14px; color: var(--text-3); }
.delo-telo { padding: 22px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.delo-para { display: flex; flex-direction: column; gap: 8px; }
.delo-str { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.delo-str.otstup { padding-top: 6px; }
.delo-summa { font-size: 16px; font-weight: 600; white-space: nowrap; }
.delo-itog { font-size: 24px; font-weight: 700; color: var(--gain); white-space: nowrap; }
.delo-snoska {
	margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft);
	font-size: 14px; color: var(--text-3);
}

/* Карточка разбора практики */
.razbor { padding: 24px; display: flex; flex-direction: column; gap: 12px; background: var(--white); transition: background 150ms ease; }
.lizing a.razbor { color: var(--text); }
.lizing a.razbor:hover { background: var(--gold-bg); color: var(--text); }
.razbor-nomera {
	font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600;
	font-size: 12px; color: var(--text-3); display: flex; flex-direction: column; gap: 4px;
}
.razbor-sud { font-size: 12px; color: var(--text-dim); }
.razbor-t { font-size: 16px; font-weight: 600; line-height: 1.35; }
.razbor-dalee {
	margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft);
	font-size: 14px; font-weight: 600; color: var(--gold-text);
}

/* ---------------------------------------------------------------
   20. Квиз подбора
   --------------------------------------------------------------- */

.kviz-hod { display: flex; align-items: center; gap: 12px; }
.kviz-schyot { font-weight: 600; font-size: 12px; color: var(--text-dim); }
.kviz-vopros { font-size: 22px; font-weight: 600; line-height: 1.2; }
.kviz-otvety { display: flex; flex-direction: column; gap: 12px; }
.kviz-otvet {
	min-height: 48px; padding: 12px 16px; border-radius: var(--r);
	border: 1px solid var(--line); background: var(--white);
	font-family: inherit; font-size: 16px; text-align: left; color: var(--text);
	display: flex; align-items: center; cursor: pointer;
	transition: border-color 150ms ease;
}
.kviz-otvet:hover { border-color: var(--gold); }
.kviz-otvet.vybran {
	border-width: 2px; border-color: var(--gold); background: var(--gold-bg);
	color: var(--gold-text-hover); font-weight: 600;
}

/* ---------------------------------------------------------------
   21. Форма приёма документов на тёмной полосе
   --------------------------------------------------------------- */

.forma-polosa {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px;
	gap: 1px; background: var(--panel-line);
	border: 1px solid var(--panel-line); border-radius: var(--r); overflow: hidden;
}
.forma-kolonka { background: var(--panel-2); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.forma-obeshchanie { background: var(--gold); padding: 28px; display: flex; flex-direction: column; gap: 20px; }
/* Сумма и подпись — разными строками. Оба span-а, и без этого на узком
   экране они слипались в одну строку: до правки подпись была короткой
   и на широком экране перенос давал случайно верный вид. */
.forma-obeshchanie .summa-krupno,
.forma-obeshchanie .sub { display: block; }
.forma-obeshchanie .summa-krupno { color: var(--ink); }
.forma-obeshchanie .sub { color: var(--on-gold-2); }
/* Вторая строка подписи — только для телефона: на широком экране то же
   самое сказано пунктами ниже, а на телефоне пунктов нет. */
.sub-tolko-uzkie { display: none; }
.forma-obeshchanie .liniya { height: 1px; background: rgba(11, 13, 18, .2); }
.forma-punkty { display: flex; flex-direction: column; gap: 16px; }
.forma-punkt { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--ink); }
.forma-punkt svg { flex: none; margin-top: 2px; }

/* ---------------------------------------------------------------
   22. Ответ формы
   --------------------------------------------------------------- */

.otvet-ok, .otvet-oshibka {
	border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 8px;
}
.otvet-ok { border: 1px solid var(--gain-line); background: var(--gain-bg); }
.otvet-ok .t { font-size: 16px; font-weight: 600; color: var(--gain); }
.otvet-oshibka { border: 2px solid var(--demand-line); background: var(--demand-bg); }
.otvet-oshibka .t { font-size: 16px; font-weight: 600; color: var(--demand); }

/* ---------------------------------------------------------------
   23. Постраничная навигация
   --------------------------------------------------------------- */

.pagination { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
	min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--r);
	border: 1px solid var(--line); background: var(--white);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 15px; text-decoration: none;
}
.lizing .pagination a.page-numbers { color: var(--text); }
.pagination .page-numbers:hover { border-color: var(--gold); }
.pagination .page-numbers.current {
	background: var(--ink); border-color: var(--ink); color: var(--on-dark); font-weight: 600;
}

/* ---------------------------------------------------------------
   24. Узкие экраны.
       1280 — боковая остаётся, поля сокращаются
       1024 — боковая уходит под контент
       768  — раскладка мобильная (макет 390)
   --------------------------------------------------------------- */

@media (max-width: 1280px) {
	:root { --pad-x: 32px; --rail: 280px; }
	.s-panelyu { gap: 32px; }
	.hero-foto { width: 46%; }
	.hero-telo { grid-template-columns: minmax(0, 640px); }
	.menu { gap: 18px; font-size: 15px; }
	.avtor-polosa { grid-template-columns: 340px minmax(0, 1fr); }
}

@media (max-width: 1024px) {
	:root { --pad-x: 24px; }
	.s-panelyu { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.panel { position: static; flex-direction: row; flex-wrap: wrap; }
	.panel > * { flex: 1 1 320px; }
	.setka-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.setka-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.forma-polosa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.forma-obeshchanie { grid-column: span 2; }
	.footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
	h1 { font-size: 36px; }
	.hero-foto { width: 40%; }
}

@media (max-width: 768px) {
	:root { --pad-x: 16px; --sticky: 76px; }

	/* 76 px самой панели плюс её верхняя линия: без этого пикселя
	   последняя строка страницы уходит под панель. */
	body.lizing { padding-bottom: 77px; }

	h1 { font-size: 28px; line-height: 1.12; }
	h2 { font-size: 24px; line-height: 1.15; }
	h3 { font-size: 20px; }
	.lead { font-size: 16px; }

	/* Шапка: топбар сокращается до телефона и часов, меню — под кнопку */
	.verh { height: 36px; padding: 0 16px; font-size: 12px; justify-content: space-between; gap: 12px; }
	.verh-skryt { display: none; }
	.verh-geo { margin-left: 0; }
	.nav { height: 60px; padding: 0 16px; gap: 12px; }
	.brand-name { font-size: 14px; }
	.brand-sub { font-size: 11px; }
	.znak-b { font-size: 26px; }
	.znak-l { height: 28px; }
	.menu, .nav-cta { display: none; }
	.burger { display: flex; }
	.nizhnyaya { display: grid; }

	/* Секции */
	.section { padding: 32px 16px; }
	.section-stolbik { gap: 16px; }
	.s-panelyu { padding: 32px 16px; gap: 32px; }
	.polotno { gap: 36px; }
	.panel { display: none; }

	/* Всё многоколоночное становится стопкой */
	.setka-2, .setka-3, .setka-4 { grid-template-columns: minmax(0, 1fr); }
	.setka .shire-2 { grid-column: auto; }
	.forma-polosa {
		grid-template-columns: minmax(0, 1fr);
		background: none; border: 0; border-radius: 0; gap: 16px;
	}
	.forma-kolonka { background: none; padding: 0; }
	/* Обещание идёт перед формой и говорит одной строкой — так в макете 390.
	   Три пункта на телефоне не показываются: там их нет, а не «они мельче».
	   Порядок задаётся здесь, а не в разметке: разметка одна на обе ширины. */
	.forma-polosa { display: flex; flex-direction: column; }
	.forma-obeshchanie { grid-column: auto; border-radius: var(--r); padding: 18px; gap: 8px; order: -1; }
	.forma-obeshchanie .liniya,
	.forma-punkty { display: none; }
	.sub-tolko-uzkie { display: inline; }
	.footer-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.footer-bottom { flex-direction: column; gap: 12px; }
	.footer-bottom-ssylki { flex-wrap: wrap; gap: 12px 20px; }

	/* Первый экран: фото сверху, статистика строками */
	.hero-foto { position: static; width: auto; height: 240px; }
	.hero-foto::after { background: linear-gradient(180deg, rgba(20,20,23,.1) 0%, rgba(20,20,23,.5) 62%, #141417 100%); }
	.hero-telo { padding: 0 16px 28px; margin-top: -8px; grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.hero h1, .hero .lead { max-width: none; }
	.hero-cta { flex-direction: column; }
	.hero-cta .btn { width: 100%; }
	.hero-stats {
		display: flex; flex-direction: column; gap: 1px;
		background: var(--panel-line); border: 1px solid var(--panel-line);
		border-radius: var(--r); overflow: hidden; margin-top: 4px;
	}
	.hero-stat {
		background: var(--panel-2); padding: 16px; border-left: 0;
		flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px;
	}
	.hero-stat-num { font-size: 22px; order: 2; }
	.hero-stat-lab { order: 1; }

	/* Полоса автора: фото сверху */
	.avtor-polosa { grid-template-columns: minmax(0, 1fr); }
	.avtor-foto { min-height: 0; height: 220px; }
	.avtor-telo { padding: 24px 16px 32px; gap: 16px; }
	.avtor-telo p { font-size: 16px; }
	.setka-tyomnaya { grid-template-columns: minmax(0, 1fr); max-width: none; }
	.setka-tyomnaya > * {
		padding: 14px 16px; flex-direction: row;
		justify-content: space-between; align-items: baseline; gap: 12px;
	}
	.setka-tyomnaya .num { font-size: 20px; order: 2; }
	.setka-tyomnaya .lab { order: 1; }

	/* Карточки и строки */
	.karta-telo { padding: 18px; gap: 12px; }
	.karta-shapka { padding: 14px 16px; }
	.plitka { padding: 18px; }
	.stroka-ssylka {
		min-height: 56px; padding: 14px 16px;
		grid-template-columns: 22px 1fr 14px; gap: 12px;
	}
	.itog { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px; }
	.svodka { padding: 16px; }
	.delo-telo { padding: 16px; gap: 12px; }
	.delo-shapka { padding: 12px 16px; }
	.delo-no, .delo-opponent { font-size: 12px; }
	.delo-itog { font-size: 22px; }
	.delo-snoska { margin-top: 0; padding-top: 8px; }
	.razbor { padding: 18px 16px; }

	/* Прайс: таблица становится списком «поле: значение» */
	.prays-shapka { display: none; }
	.prays-str {
		display: flex; justify-content: space-between; align-items: baseline;
		gap: 12px; padding: 14px 16px;
	}
	.tabl th, .tabl td { padding: 12px 14px; }

	/* Чипы уезжают горизонтальным скроллом */
	.chipy {
		flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
		margin: 0 -16px; padding: 0 16px;
	}
	.chipy::-webkit-scrollbar { display: none; }
	.chip { flex: none; min-height: 44px; }

	/* Поля и кнопки — хит-таргет не ниже 44px */
	.btn { height: 52px; width: 100%; }
	.nav-cta .btn, .chip, .burger { width: auto; }
	.vvod { height: 48px; font-size: 16px; }
	.kviz-otvet { min-height: 52px; padding: 14px 16px; }
	.kviz-vopros { font-size: 20px; line-height: 1.25; }

	/* Зона загрузки: во всю ширину, высота 132px, перетаскивание —
	   кнопкой выбора, потому что перетаскивать на телефоне нечем */
	.zona { min-height: 132px; padding: 18px; align-items: flex-start; text-align: left; }

	.article-body { font-size: 17px; }
	.article-body h2 { font-size: 22px; margin: 32px 0 12px; }
	.article-body h3 { font-size: 19px; margin: 24px 0 10px; }

	.crumbs { padding: 12px 16px; font-size: 13px; }
	.section-shapka { gap: 12px; }
	.section-shapka .dalee { font-size: 14px; }
}

/* ---------------------------------------------------------------
   25. Раскладка блоков главной
   --------------------------------------------------------------- */

/* Блок внутри полотна. Промежутки между блоками даёт само полотно;
   на узком экране полотно распадается, и отступы нужны блоку. */
.blok { display: flex; flex-direction: column; gap: 24px; }

/* Две-три карточки в ряд с настоящим промежутком — в отличие от
   .setka, где промежутка нет и роль линии играет фон подложки. */
.setka-ryadom {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px; align-items: stretch;
}
.setka-3-ryadom { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Строка прайса, которой на узком экране нет: в макете 390 показаны
   семь строк из четырнадцати. */
.tolko-shirokiy { display: none; }
@media (min-width: 769px) { .tolko-shirokiy { display: grid; } }

/* Форма на тёмной полосе занимает две доли ширины, обещание — третью.
   Внутри формы поля и приём файлов стоят в две колонки: так в макете. */
.forma-polosa > .lz-forma { grid-column: span 2; }

@media (max-width: 1024px) {
	.setka-3-ryadom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.setka-ryadom, .setka-3-ryadom { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.forma-polosa > .lz-forma { grid-column: auto; }

	/* Порядок блоков на 390 отличается от 1440: полоса «дело ведёт»
	   стоит до блока «как проходит работа». Разметку это не трогает —
	   полотно на узком экране распадается, и порядок задаётся здесь. */
	/* Порядок задаётся только на главной: там макет 390 переставляет
	   полосу «дело ведёт» выше блока «как проходит работа». На прочих
	   страницах порядок разметки и есть порядок макета, и общее
	   правило порядка сломало бы им первый экран. */
	body.home .wrap { display: flex; flex-direction: column; }
	body.home .s-panelyu, body.home .polotno { display: contents; }
	body.home .blok { padding: 32px 16px; gap: 16px; }
	body.home .blok + .blok { padding-top: 0; }

	body.home .verh { order: 1; }
	body.home .nav { order: 2; }
	body.home .menu-shtora { order: 3; }
	body.home .hero { order: 4; }
	body.home #situacii { order: 5; }
	body.home #kalkulyator { order: 6; }
	body.home .avtor-polosa { order: 7; }
	body.home .polotno > .blok:last-child { order: 8; }
	body.home .section { order: 9; }
	body.home #zayavka { order: 10; }
	body.home .site-footer { order: 11; }
	body.home .nizhnyaya { order: 12; }
}
/* ---------------------------------------------------------------
   26. Шапка внутренней страницы и общие полосы
   Значения из макетов 21_CALC_HUB, 17_SERVICE, 03_REGION.
   --------------------------------------------------------------- */

/* Тёмная шапка страницы: крошки, надзаголовок, H1, лид и, если есть,
   заметка справа. Заметка — не украшение: она снимает вопрос, который
   иначе задают в первом же письме. */
.shapka-stranicy {
	background: var(--panel); color: var(--on-dark);
	padding: 48px var(--pad-x) 44px;
	display: grid; grid-template-columns: minmax(0, 1fr) 420px;
	gap: 48px; align-items: end;
}
.shapka-stranicy.bez-zametki { grid-template-columns: minmax(0, 1fr); }
.shapka-vvod { display: flex; flex-direction: column; gap: 20px; }
.shapka-stranicy h1 { color: var(--on-dark); max-width: 860px; }
.shapka-stranicy .lead { color: var(--on-dark-2); max-width: 680px; }
.shapka-kroshki { display: flex; gap: 8px; font-size: 12px; color: var(--on-dark-4); flex-wrap: wrap; }
.lizing .shapka-kroshki a { color: var(--on-dark-4); }
.lizing .shapka-kroshki a:hover { color: var(--gold); }
.shapka-kroshki [aria-current] { color: var(--on-dark-2); }

.shapka-zametka {
	background: var(--panel-2); border: 1px solid var(--panel-line);
	border-radius: var(--r); padding: 24px;
	display: flex; flex-direction: column; gap: 14px;
	font-size: 16px; line-height: 1.55; color: var(--on-dark-2);
}
.shapka-zametka .liniya { height: 1px; background: var(--panel-line); }

/* Карточка инструмента в сетке без промежутков */
.instrument { padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.instrument-t { font-size: 24px; line-height: 1.2; font-weight: 700; }
.instrument-shapka { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.instrument-d { font-size: 17px; line-height: 1.55; color: var(--text-2); }
.instrument-fakty {
	display: flex; gap: 24px; flex-wrap: wrap; padding-top: 12px;
	border-top: 1px solid var(--line-soft); font-size: 15px; color: var(--text-3);
}
.instrument .btn { margin-top: auto; }
.instrument.glavnyy { background: var(--gold-bg); }
.instrument.glavnyy .instrument-t { color: var(--gold-text-hover); }
.instrument.glavnyy .instrument-fakty { border-top-color: var(--gold-line); }
.instrument.shirokiy {
	display: grid; grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px; align-items: center;
}
.instrument.shirokiy > div { display: flex; flex-direction: column; gap: 14px; }

/* Три пояснения в ряд — карточки с настоящим промежутком */
.tri-karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tri-karty > * {
	border: 1px solid var(--line); border-radius: var(--r); padding: 24px;
	display: flex; flex-direction: column; gap: 10px;
	font-size: 17px; line-height: 1.55; background: var(--white);
}

/* Полоса призыва с боковой карточкой «смотрите также» */
.cta-polosa {
	display: grid; grid-template-columns: minmax(0, 1fr) 380px;
	gap: 48px; align-items: start;
}
.cta-polosa .lead { max-width: 640px; }
.cta-polosa-knopki { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.smotrite { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.smotrite-shapka {
	padding: 16px 20px; background: var(--ink);
	font-weight: 600; font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--text-dim);
}
.smotrite ul { margin: 0; padding: 0; list-style: none; }
.smotrite li { border-bottom: 1px solid var(--line-soft); }
.smotrite li:last-child { border-bottom: 0; }
.lizing .smotrite a {
	display: block; padding: 16px 20px; font-size: 16px;
	font-weight: 500; color: var(--text);
}
.lizing .smotrite a:hover { background: var(--gold-bg); color: var(--text); }

@media (max-width: 1024px) {
	.shapka-stranicy { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.cta-polosa { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.tri-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.instrument.shirokiy { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 768px) {
	.shapka-stranicy { padding: 24px 16px 28px; gap: 16px; }
	.shapka-vvod { gap: 16px; }
	.shapka-zametka { padding: 18px; font-size: 15px; gap: 12px; }
	.tri-karty { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.tri-karty > * { padding: 18px; font-size: 16px; }
	.instrument { padding: 18px; gap: 12px; }
	.instrument-t { font-size: 20px; }
	.instrument-d { font-size: 16px; }
	.instrument-fakty { gap: 4px 16px; font-size: 14px; }
	.instrument.shirokiy { padding: 18px; }
	.cta-polosa-knopki { flex-direction: column; }
	.smotrite li a { padding: 14px 16px; }
}
/* Крошки на тёмном первом экране внутренней страницы. Лежат выше
   заголовка и поверх фотографии, поэтому им нужны свои поля. */
.hero-kroshki { position: relative; z-index: 1; padding: 48px var(--pad-x) 0; }
.hero-vnutri .hero-telo { padding-top: 24px; }
@media (max-width: 768px) {
	.hero-kroshki { padding: 16px 16px 0; }
	.hero-vnutri .hero-telo { padding-top: 16px; margin-top: 0; }
}
/* ---------------------------------------------------------------
   27. Услуга: карточка цены в шапке, врезка, перечни
   Значения из макета 17_SERVICE.
   --------------------------------------------------------------- */

/* Карточка стоимости и срока в тёмной шапке услуги. Показывает то,
   что человек ищет первым; если цены в записи нет, карточки нет вовсе —
   выдумывать сумму вёрстка не вправе. */
.shapka-cena { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.shapka-cena.odna { grid-template-columns: minmax(0, 1fr); }
.shapka-cena > div { display: flex; flex-direction: column; gap: 6px; }
.shapka-cena .num { font-size: 32px; line-height: 1; font-weight: 700; color: var(--on-dark); white-space: nowrap; }
.shapka-cena .lab { font-size: 13px; color: var(--text-dim); }

/* Врезка: полоса золотом слева, подложка #F4F2ED. Ставится там, где
   пропущенный срок стоит человеку денег. */
.vrezka {
	padding: 20px 24px; background: var(--surface);
	border-left: 2px solid var(--gold); border-radius: 0 var(--r) var(--r) 0;
	display: flex; flex-direction: column; gap: 8px;
	font-size: 17px; line-height: 1.5;
}

/* Перечень тире в две колонки: признаки, при которых услуга нужна */
.tire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tire > * { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: baseline; font-size: 17px; line-height: 1.5; }
.tire > *::before { content: '—'; color: var(--gold); font-size: 18px; }

/* Нумерованный перечень работ в сетке без промежутков */
.shagi-spisok { display: flex; flex-direction: column; }
.shagi-spisok > * {
	background: var(--white); padding: 20px 24px;
	display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: baseline;
	font-size: 17px; line-height: 1.5;
}
.shagi-spisok .n { font-size: 17px; font-weight: 700; color: var(--gold-text); }

@media (max-width: 1024px) {
	.tire { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
	.shapka-cena { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.shapka-cena .num { font-size: 26px; }
	.vrezka { padding: 16px 18px; font-size: 16px; }
	.tire > * { font-size: 16px; }
	.shagi-spisok > * { padding: 16px; font-size: 16px; grid-template-columns: 28px 1fr; gap: 12px; }
}
/* Сетка внутри карточки не рисует свою рамку: рамка уже есть у карточки,
   а две рамки в 1 px друг на друге дают линию в 2 px и ломают ритм. */
.karta > .setka { border: 0; border-radius: 0; }
.karta > .table-scroll .tabl { border: 0; border-radius: 0; }

/* ---------------------------------------------------------------
   28. Поправки контраста
   Критерий приёмки — 4,5:1 замеренные. Там, где цвет из макета
   этого не даёт, взят ближайший по шкале, а сам случай внесён
   в отчёт. Новых цветов не появилось: все замены из палитры.
   --------------------------------------------------------------- */

/* Надзаголовок и счётчик карточки: #8A8781 на белом даёт 3,2–3,6.
   На светлом фоне они набираются цветом второго плана #5C6472 (6,4),
   на тёмном остаются прежними — там #8A8781 даёт 8,2. */
.nadzag, .karta-schyot { color: var(--text-3); }
.tyomno .nadzag, .hero .nadzag, .site-footer .nadzag,
.shapka-stranicy .nadzag, .shapka-zametka .nadzag,
.karta.tyomnaya-shapka .nadzag, .karta.tyomnaya-shapka .karta-schyot,
.itog .nadzag, .svodka .nadzag, .setka-tyomnaya .nadzag { color: var(--text-dim); }
.nadzag-zoloto { color: var(--gold-text); }
.nadzag-na-tyomnom { color: var(--gold); }
.nadzag-gain { color: var(--gain); }
.nadzag-demand { color: var(--demand); }

/* Ссылка-действие на светлой плашке: #8A6A32 на #F4F2ED даёт 4,48.
   На плашке она набирается тёмным золотом #71562A. */
.section.alt .dalee, .alt .dalee { color: var(--gold-text-hover); }

/* Подпись на золотом поле обещания: #5C4519 на #C9A96E даёт 4,0.
   Взят чёрный цвет текста на золоте — тот же, что у подписи кнопки. */
.forma-obeshchanie .sub { color: var(--on-gold); }
/* Подпись суда в карточке разбора: #8A8781 на белом даёт 3,6.
   Тот же случай, что с надзаголовком — цвет второго плана. */
.razbor-sud { color: var(--text-3); }
/* ---------------------------------------------------------------
   29. Таблицы внутри текста записи
   Их пишет редактор, и ширину колонок предсказать нельзя. На 360
   такая таблица вылезала за край экрана. Перестроить чужую разметку
   в список «поле: значение» вёрстка не может, поэтому таблица
   прокручивается внутри себя — страница при этом не едет.
   --------------------------------------------------------------- */

.article-body table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 16px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r);
}
.article-body th {
	padding: 14px 18px; background: var(--ink); color: var(--text-dim);
	font-weight: 600; font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; text-align: left; white-space: nowrap;
}
.article-body td { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.article-body tr:last-child td { border-bottom: 0; }

@media (max-width: 768px) {
	.article-body th, .article-body td { padding: 12px 14px; }
}

/* ---------------------------------------------------------------
   30. Контраст на светлой плашке
   Найдено сплошным обходом 01.09: 174 замера ниже 4,5:1.
   Золото #8A6A32 даёт 5,01 на белом, но 4,48 на плашке #F4F2ED
   и на подложке #FBF6EA. Там, где фон не белый, золотой текст
   набирается тёмным #71562A — 6,3. Новых цветов не появилось.
   --------------------------------------------------------------- */

.vrezka .nadzag-zoloto,
.pusto .nadzag-zoloto,
.section.alt .nadzag-zoloto,
.alt .nadzag-zoloto,
.karta-shapka .nadzag-zoloto,
.karta.vydelena .nadzag-zoloto,
.plitka.itogovaya .nadzag-zoloto,
.panel-vtoraya .nadzag-zoloto { color: var(--gold-text-hover); }

.lizing .vrezka a:not(.btn),
.lizing .pusto a:not(.btn),
.lizing .section.alt a:not(.btn),
.lizing .alt a:not(.btn),
.lizing .panel-vtoraya a:not(.btn),
.lizing .karta-shapka a:not(.btn) { color: var(--gold-text-hover); }

.pusto-vyhod, .lizing .pusto-vyhod { color: var(--gold-text-hover); }
/* ---------------------------------------------------------------
   30. Скрытое остаётся скрытым
   ---------------------------------------------------------------
   `hidden` — единственный способ, которым скрипты темы прячут
   заготовки: итог калькулятора, ответ формы, сводку подбора.
   Браузер даёт этому атрибуту `display: none` слабейшим правилом,
   и любой класс с собственным `display` его отменяет. Так и вышло
   на живом сайте: сводка подбора `.lz-kviz-itog` объявлена `flex`
   в `forma.css` — под вопросами стояла пустая чёрная плашка,
   пока пользователь не ответит.
   Правило сквозное, а не точечное: тот же капкан ждёт любой
   будущий класс, который скрывают атрибутом. --------------------- */
[hidden] { display: none !important; }
/* ---------------------------------------------------------------
   31. Блоки ситуационной страницы (пилот «Изъятие», 01.09)
   ---------------------------------------------------------------
   Макеты `02_SITUATION_1440_C` и `02_SITUATION_390_C`. До пилота
   середина страницы была прозой; здесь формы, которые макет рисует:
   два чек-листа рядом, карточки шагов с метками времени, свёрнутый
   список, полоса сальдо, кейс «до → после», линии практики.
   Мобильные отличия — в общей ветке ниже, не отдельным файлом. ---- */

/* Два чек-листа рядом. Вторая карточка выделена золотым полем:
   в макете так отмечено то, что работает в пользу читателя. */
.cheklisty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.chk { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.chk-vydelen { border-color: var(--gold-line); }
.chk-shapka {
	display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
	padding: 16px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.chk-vydelen .chk-shapka { background: var(--gold-bg); border-bottom-color: var(--gold-line); }
.chk-t { font-size: 17px; font-weight: 600; color: var(--text); }
.chk-schet { font-size: 13px; color: var(--text-dim); white-space: nowrap; }
.chk-spisok { margin: 0; padding: 0; list-style: none; }
.chk-spisok li {
	padding: 16px 20px; font-size: 16px; line-height: 1.5; color: var(--text-2);
	border-bottom: 1px solid var(--line-soft); text-wrap: pretty;
}
.chk-spisok li:last-child { border-bottom: 0; }

/* Шаги первых дней. Метка времени — тёмная плашка: она отвечает
   на вопрос «когда», а он здесь важнее порядкового номера. */
.shagi-vremya { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shag-karta {
	display: flex; flex-direction: column; gap: 12px; padding: 20px;
	background: var(--white); border: 1px solid var(--line); border-left-width: 0;
}
.shag-karta:first-child { border-left-width: 1px; border-radius: var(--r) 0 0 var(--r); }
.shag-karta:last-child { border-radius: 0 var(--r) var(--r) 0; }
.shag-metka {
	align-self: flex-start; padding: 5px 10px; border-radius: 4px;
	background: var(--ink); color: var(--on-dark); font-size: 12px; font-weight: 600;
}
.shag-t { font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* Свёрнутый список «чего не делать». Форма та же, что у вопросов:
   на странице уже есть аккордеон, второго вида ему не нужно. */
.svertka { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.svertka-q {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 20px; cursor: pointer; list-style: none;
	font-size: 16px; font-weight: 600; color: var(--text);
}
.svertka-q::-webkit-details-marker { display: none; }
.svertka[open] .svertka-q .plus { transform: rotate(45deg); }
.svertka-spisok { margin: 0; padding: 0 20px 18px; list-style: none; }
.svertka-spisok li {
	padding: 12px 0 12px 22px; position: relative;
	font-size: 15px; line-height: 1.5; color: var(--text-2);
	border-top: 1px solid var(--line);
}
.svertka-spisok li::before {
	content: '—'; position: absolute; left: 0; top: 12px; color: var(--demand);
}

/* Сальдо: три числа и переход на расчёт. */
.saldo-shapka { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: start; }
.saldo-cta { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: center; }
.saldo-plashki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.saldo-pl {
	display: flex; flex-direction: column; gap: 6px; padding: 24px;
	background: var(--panel-2); border: 1px solid var(--panel-line); border-left-width: 0;
}
.saldo-pl:first-child { border-left-width: 1px; border-radius: var(--r) 0 0 var(--r); }
.saldo-pl:last-child { border-radius: 0 var(--r) var(--r) 0; }
.saldo-znach { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.pl-minus .saldo-znach { color: var(--demand-line); }
.pl-plyus .saldo-znach { color: var(--gain-dark); }
.pl-itog { background: var(--gold); border-color: var(--gold); }
.pl-itog .saldo-znach { color: var(--on-gold); }
.pl-itog .nadzag, .pl-itog .sub { color: var(--on-gold-2); }

/* Кейс «до → после». Полоса длины — единственный способ показать
   разницу сумм на телефоне, где две колонки чисел не помещаются. */
.keys-do-posle {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.kdp-delo, .kdp-do, .kdp-posle {
	display: flex; flex-direction: column; gap: 6px; padding: 20px 24px;
	border-left: 1px solid var(--line);
}
.kdp-delo { border-left: 0; }
.kdp-posle { background: var(--gain-bg); border-left-color: var(--gain-line); }
.kdp-nomer { font-size: 18px; font-weight: 600; color: var(--text); }
.kdp-summa { font-size: 26px; font-weight: 700; line-height: 1.15; }
.kdp-summa.demand { color: var(--demand); text-decoration: line-through; }
.kdp-summa.gain { color: var(--gain); }
.kdp-polosa { display: none; height: 6px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.kdp-polosa i { display: block; height: 100%; background: var(--demand-line); }
.kdp-posle .kdp-polosa i { background: var(--gain); }

/* Линии практики: три колонки с надзаголовком-меткой. */
.linii-sudov { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.liniya-sud { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.liniya-t { font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }

/* Прайс и карточка автора одной полосой. */
.prays-i-avtor { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); gap: 32px; align-items: start; }
.prays-kolonka { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.avtor-karta { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.avtor-karta picture, .avtor-karta img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: 50% 22%; }
.avtor-karta-telo { display: flex; flex-direction: column; gap: 10px; padding: 20px; }

/* Вопросы в две колонки — так в макете 1440. Порядок вопросов задан
   автором, поэтому колонки, а не переупорядочивание. */
.akk-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; }
.akk-2 .akk-item { align-self: start; }
.istochniki { display: block; margin-top: 8px; }

/* Связанные страницы — карточка с подписью, три в ряд. */
.svyaz-karta {
	display: flex; flex-direction: column; gap: 6px; padding: 20px 24px;
	border: 1px solid var(--line); border-radius: var(--r); background: var(--white);
	text-decoration: none; transition: border-color 150ms ease;
}
.svyaz-karta:hover { border-color: var(--gold); }
.svyaz-t { font-size: 16px; font-weight: 600; color: var(--text); }
/* --- Те же блоки на телефоне. Снято с макета `02_SITUATION_390_C`,
   а не выведено из десктопной раскладки: на 390 у страницы другой
   состав, и это уже ловили на форме главной. ------------------------ */
@media (max-width: 768px) {
	/* Чек-листы и шаги идут стопкой; скруглять надо каждую карточку,
	   а не первую и последнюю, как в ряду. */
	.cheklisty { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.chk-shapka { padding: 14px 16px; }
	.chk-spisok li { padding: 14px 16px; font-size: 15px; }

	.shagi-vremya { grid-template-columns: minmax(0, 1fr); }
	.shag-karta { border-left-width: 1px; border-top-width: 0; }
	.shag-karta:first-child { border-top-width: 1px; border-radius: var(--r) var(--r) 0 0; }
	.shag-karta:last-child { border-radius: 0 0 var(--r) var(--r); }

	.svertka-q { padding: 16px; font-size: 15px; }
	.svertka-spisok { padding: 0 16px 16px; }

	/* Кнопка сальдо уходит под заголовок: на 390 она стоит не сбоку. */
	.saldo-shapka { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.saldo-cta { text-align: left; }

	/* Плашки сальдо — строкой: надпись слева, число справа. Так в макете,
	   и так число видно, не пролистывая. */
	.saldo-plashki { grid-template-columns: minmax(0, 1fr); }
	.saldo-pl {
		display: grid; grid-template-columns: minmax(0, 1fr) auto;
		align-items: center; gap: 4px 16px; padding: 16px;
		border-left-width: 1px; border-top-width: 0;
	}
	.saldo-pl:first-child { border-top-width: 1px; border-radius: var(--r) var(--r) 0 0; }
	.saldo-pl:last-child { border-radius: 0 0 var(--r) var(--r); }
	.saldo-pl .nadzag { grid-column: 1; }
	.saldo-pl .saldo-znach { grid-column: 2; grid-row: 1 / span 2; font-size: 24px; text-align: right; }
	.saldo-pl .sub { grid-column: 1; }
	/* Разница — единственная плашка, где число крупное и под ним подпись:
	   в макете она выделена заливкой и стоит особняком. */
	.pl-itog { display: flex; flex-direction: column; }
	.pl-itog .saldo-znach { text-align: left; font-size: 28px; }

	/* Кейс: вместо трёх колонок — карточка с полосами длины сумм. */
	.keys-do-posle { grid-template-columns: minmax(0, 1fr); }
	.kdp-delo { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
	.kdp-delo .nadzag { display: none; }
	.kdp-do, .kdp-posle {
		display: grid; grid-template-columns: minmax(0, 1fr) auto;
		gap: 6px 12px; border-left: 0; border-top: 1px solid var(--line);
	}
	.kdp-posle { border-top-color: var(--gain-line); }
	.kdp-summa { font-size: 20px; text-align: right; }
	.kdp-polosa { display: block; grid-column: 1 / -1; }

	.linii-sudov { grid-template-columns: minmax(0, 1fr); gap: 20px; }

	/* Автор на телефоне идёт после прайса отдельной карточкой. */
	.prays-i-avtor { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.avtor-karta picture, .avtor-karta img { height: 260px; }

	.akk-2 { grid-template-columns: minmax(0, 1fr); }
	.svyaz-karta { padding: 16px; }
}
/* Оглавление в панели — как в макете: столбик коротких строк,
   первая помечена золотой чертой. Строится по выведенным блокам,
   поэтому ссылка не может привести в пустоту. */
.oglavlenie { display: flex; flex-direction: column; gap: 2px; }
.ogl-punkt {
	padding: 7px 0 7px 12px; border-left: 2px solid transparent;
	font-size: 15px; line-height: 1.4; color: var(--text-3); text-decoration: none;
	transition: color 150ms ease, border-color 150ms ease;
}
.ogl-punkt:first-of-type { color: var(--text); font-weight: 600; border-left-color: var(--gold); }
.ogl-punkt:hover { color: var(--gold-text-hover); border-left-color: var(--gold-line); }
/* Плашка первого экрана, которой на телефоне нет. В макете ситуации
   на 390 показателей два из трёх: «24 часа» уходит, остаются деньги
   и бесплатный расчёт. Убранное в мобильном макете прячется и на живом. */
@media (max-width: 768px) {
	.hero-stat.tolko-shirokie { display: none; }
}
/* Подпись имени в полосе автора. В макете её нет — заголовок блока
   обещает имя, а блок его не показывал. Ставится по указанию
   от 01.09; набор тот же, что в панели «кто ведёт дело». */
.avtor-podpis { display: flex; flex-direction: column; gap: 2px; margin: -8px 0 4px; }
.avtor-imya { font-size: 20px; font-weight: 600; color: var(--on-dark); }
.avtor-podpis .sub { color: var(--on-dark-4); }
/* Плашки полосы автора: колонка не уже своего содержимого.
   Пока колонки делились поровну, длинное значение «более 17 млн ₽»
   не помещалось и знак рубля срезало соседней плашкой. Числа здесь
   разной длины по существу — «3», «4» и денежный итог, — поэтому
   ширина идёт от содержимого, а не поровну. */
.setka-tyomnaya.setka-3 { grid-template-columns: repeat(3, minmax(min-content, auto)); }
.setka-tyomnaya .num { font-size: 28px; }
@media (max-width: 768px) {
	.setka-tyomnaya.setka-3 { grid-template-columns: minmax(0, 1fr); }
}
/* Один чек-лист вместо двух занимает всю ширину. Пока колонок было
   всегда две, страница с единственным чек-листом («Признаки
   несоразмерности» на неустойке) оставляла справа пустую половину. */
.cheklisty:has(> .chk:only-child) { grid-template-columns: minmax(0, 1fr); }
/* ---------------------------------------------------------------
   32. Двухколоночная секция не держит ширину при пустом соседе
   ---------------------------------------------------------------
   Родовая правка. На странице неустойки прайс не залился, и секция
   «прайс + автор» осталась двухколоночной: слева пустота во всю ширину
   колонки, справа одинокая карточка. Правило «пустое поле — блока нет»
   защищает сам блок, но не сетку вокруг него — и сетка маскировала
   пропажу, вместо того чтобы её показать.

   Здесь перечислены все двухколоночные секции, где один сосед может
   оказаться пустым по данным. Сетка схлопывается в одну колонку,
   когда содержимого нет: пустое место видно как пустое, а не как
   «так задумано». --------------------------------------------------- */

/* Прайс и карточка автора: прайса может не быть у страницы. */
.prays-i-avtor:has(> .prays-kolonka:empty) { grid-template-columns: minmax(0, 1fr); }
.prays-i-avtor > .prays-kolonka:empty { display: none; }

/* Сальдо: кнопки может не быть, тогда заголовок занимает всю ширину. */
.saldo-shapka:has(> .section-vvod:only-child) { grid-template-columns: minmax(0, 1fr); }

/* Чек-листы: второго может не быть — уже чинили, оставлено рядом
   с остальными, чтобы правило читалось одним куском. */
.cheklisty:has(> .chk:only-child) { grid-template-columns: minmax(0, 1fr); }

/* Вопросы в две колонки: один вопрос колонку не делит. */
.akk-2:has(> .akk-item:only-child) { grid-template-columns: minmax(0, 1fr); }

/* Сетки карточек: последний ряд не растягивает ячейки на пустые места. */
.setka-2:has(> :only-child),
.setka-3:has(> :only-child),
.setka-4:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
/* ---------------------------------------------------------------
   33. Каталог направлений на странице-хабе (макет 08_SERVICES)
   ---------------------------------------------------------------
   Хаб был свёрстан сносками: два десятка ссылок внутри абзацев.
   В макете это карточки — название, цена, одна строка сути.

   Мобильная ветка отдельная, а не сжатая: на 390 у группы вместо
   подписи счётчик «6 направлений», карточки идут одной колонкой,
   а строка «Разобрать →» убрана — карточка кликабельна целиком,
   и вторая цель внутри неё была бы ложной.
   --------------------------------------------------------------- */

.hab-shapka {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.hab-shapka h2 { margin: 0; }
.hab-podpis { color: var(--text-dim); font-size: 14px; }

/* Счётчик — мобильная замена подписи. */
.hab-schyot { display: none; color: var(--gold-text); font-size: 13px; white-space: nowrap; }

.hab-karty {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	background: var(--white);
}

/* Линии — внутренние: рамка карточки удвоила бы контур сетки. */
.hab-karta {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px;
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
	color: var(--text);
	text-decoration: none;
	background: var(--white);
}
.hab-karty > .hab-karta:nth-child(-n + 2) { border-top: 0; }
.hab-karty > .hab-karta:nth-child(odd) { border-left: 0; }
.hab-karta:hover { background: var(--surface); }
.hab-karta-glavnaya { background: var(--gold-bg); }
.hab-karta-glavnaya:hover { background: var(--gold-bg); }

.hab-karta-shapka {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}
.hab-karta-imya { font-weight: 600; line-height: 1.35; }
.hab-karta-glavnaya .hab-karta-imya { color: var(--gold-text); }
.hab-karta-cena {
	color: var(--text-2);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.hab-cena-besplatno { color: var(--gain); }
.hab-karta-sut { color: var(--text-3); font-size: 15px; line-height: 1.5; }
.hab-karta-hod {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--line-soft);
	color: var(--gold-text);
	font-size: 14px;
}
.hab-karta:hover .hab-karta-hod { color: var(--gold-text-hover); }

.hab-knopki { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 768px) {
	/* Подпись группы уступает место счётчику: в мобильном макете
	   справа от заголовка стоит «6 направлений», а не пояснение. */
	.hab-podpis { display: none; }
	.hab-schyot { display: inline; }

	.hab-karty { grid-template-columns: minmax(0, 1fr); }
	.hab-karta { padding: 18px 20px; border-left: 0; }
	.hab-karty > .hab-karta:first-child { border-top: 0; }
	.hab-karty > .hab-karta:nth-child(2) { border-top: 1px solid var(--line); }

	/* «Разобрать →» на телефоне нет: карточка сама и есть ссылка. */
	.hab-karta-hod { display: none; }

	/* Кнопка «Позвонить» в макете 390 отсутствует: её работу
	   делает нижняя липкая полоса. */
	.hab-tel { display: none; }
}
/* Нечётное число карточек: последняя занимает обе колонки. Иначе
   в рамке остаётся пустая половина ряда — та самая дырявая сетка,
   которую ищет обходчик. В макете такого случая нет: там в группах
   6, 6 и 4 карточки, а состав каталога живой и чётным не бывает. */
.hab-karty > .hab-karta:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* ---------------------------------------------------------------
   34. Неполный последний ряд в сетке карточек
   ---------------------------------------------------------------
   Связанные страницы на услугах — четыре карточки в три колонки:
   вторая половина ряда оставалась пустым полем с фоном контейнера.
   Обходчик такую дырку не видит (пустой ячейки в разметке нет),
   а глазом она читается как пропажа карточки.

   Последняя карточка добирает ряд до конца — тем же приёмом, что
   в каталоге направлений.
   --------------------------------------------------------------- */

.setka-3 > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.setka-3 > :last-child:nth-child(3n + 2) { grid-column: span 2; }
.setka-2 > :last-child:nth-child(odd)    { grid-column: 1 / -1; }
.setka-4 > :last-child:nth-child(4n + 1) { grid-column: 1 / -1; }
.setka-4 > :last-child:nth-child(4n + 2) { grid-column: span 3; }
.setka-4 > :last-child:nth-child(4n + 3) { grid-column: span 2; }

@media (max-width: 768px) {
	/* На узком экране сетки в одну колонку — растягивать нечего. */
	.setka-2 > :last-child,
	.setka-3 > :last-child,
	.setka-4 > :last-child { grid-column: auto; }
}
/* ---------------------------------------------------------------
   35. Блоки страницы услуги (макет 17_SERVICE)
   ---------------------------------------------------------------
   Часть `chasti/bloki-uslugi.php` была написана заранее, но ни к шаблону
   не подключена, ни стилями не покрыта: залитые поля никуда не выводились,
   а когда вывелись — заголовок шага слипся со сроком в одну строку.
   Здесь стили всех её классов.
   --------------------------------------------------------------- */

/* Поводы обратиться: две колонки на 1440, одна на телефоне. */
.povody {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 32px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.povody li {
	position: relative;
	padding-left: 18px;
	line-height: 1.55;
	color: var(--text-2);
}
.povody li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--gold-text);
}

.vrezka-t { display: block; margin-top: 6px; line-height: 1.6; }

/* Перечень работ — нумерованный: номер несёт смысл порядка. */
.rabot-spisok { margin: 0 0 16px; padding-left: 22px; }
.rabot-spisok li { margin-bottom: 10px; line-height: 1.55; color: var(--text-2); }
.rabot-spisok li::marker { color: var(--gold-text); font-weight: 600; }

/* Шаги работы: номер, заголовок и срок в одной строке — срок отделён
   и прижат вправо, иначе читается как продолжение заголовка. */
.shagi-raboty { display: flex; flex-direction: column; gap: 18px; }
.shag-raboty { border-top: 1px solid var(--line); padding-top: 14px; }
.shag-raboty:first-child { border-top: 0; padding-top: 0; }
.shag-shapka {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 6px;
}
.shag-zag { font-weight: 600; line-height: 1.35; }
.shag-srok {
	color: var(--gold-text);
	font-size: 13px;
	white-space: nowrap;
}
.shag-raboty .shag-t { display: block; padding-left: 40px; color: var(--text-3); line-height: 1.55; }
.shag-otdelno { background: var(--gold-bg); border-radius: var(--r); padding: 14px 16px; border-top: 0; }

/* Документы: галочка золотая у обязательного, серая — у остального.
   Это не украшение, а разница между «без этого не начну» и «если есть». */
.dokumenty { display: grid; gap: 12px; margin-bottom: 16px; }
.dok { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.dok-galka { color: var(--text-dim); line-height: 1.5; }
/* Золотая галочка у обязательного документа, серая — у остального. */
.dok-nuzhen .dok-galka { color: var(--gain); }
.dok-telo { display: block; }
.dok-name { display: block; font-weight: 600; line-height: 1.45; }
.dok-telo .sub { display: block; color: var(--text-3); line-height: 1.5; }

/* Прайс услуги — с колонкой срока. */
.prays-so-srokom .prays-shapka,
.prays-so-srokom .prays-str { grid-template-columns: minmax(0, 1fr) auto auto; }
.prays-so-srokom .srok {
	min-width: 132px;
	text-align: right;
	color: var(--text-3);
	font-size: 14px;
}
.prays-besplatno .cena { color: var(--gain); }

/* Заголовок с подписью справа. */
.zag-s-podpisyu { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.zag-s-podpisyu h2 { margin: 0; }

@media (max-width: 768px) {
	.povody { grid-template-columns: minmax(0, 1fr); }
	.shag-shapka { grid-template-columns: 28px 1fr; }
	/* Срок уходит под заголовок: в строку из трёх частей он не влезает
	   и рвёт заголовок посередине слова. */
	.shag-srok { grid-column: 2; white-space: normal; }
	.shag-raboty .shag-t { padding-left: 40px; }
	.prays-so-srokom .prays-shapka,
	.prays-so-srokom .prays-str { grid-template-columns: minmax(0, 1fr) auto; }
	.prays-so-srokom .srok { grid-column: 2; min-width: 0; }
}
/* Цена первого экрана словом: «по запросу» тем же местом, что и сумма,
   но без моноширинного начертания — это не число. */
.shapka-cena .num-slovom { font-size: 28px; font-weight: 700; line-height: 1.15; }
/* ---------------------------------------------------------------
   36. Демо-пример расчёта на флагмане сальдо
   ---------------------------------------------------------------
   Числа канонические и одни на весь сайт: слева название величины,
   справа сумма моноширинным — так столбцы сумм читаются взглядом
   сверху вниз, а не по строкам. Два сценария рядом: по расчёту
   лизингодателя и по рыночной цене; разница между ними и есть цена
   спора, поэтому она вынесена полосой итога.
   --------------------------------------------------------------- */

.demo-chisla {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--white);
	padding: 6px 20px;
	margin-bottom: 24px;
}
.demo-str {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line-soft);
}
.demo-str:last-child, .demo-str:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.demo-str > span:first-child { color: var(--text-2); }
.demo-str .mono { font-weight: 600; white-space: nowrap; }

.demo-scenarii {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 20px;
}
.demo-scenariy {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--white);
}
.demo-formula { color: var(--text-3); font-size: 14px; line-height: 1.5; }
.demo-itog { font-size: 26px; font-weight: 700; line-height: 1.15; }
/* Красным — доплата с клиента, зелёным — деньги в его пользу. */
.demo-trebovanie { border-color: var(--demand-line); background: var(--demand-bg); }
.demo-trebovanie .demo-itog { color: var(--demand); }
.demo-polza { border-color: var(--gain-line); background: var(--gain-bg); }
.demo-polza .demo-itog { color: var(--gain); }

@media (max-width: 768px) {
	.demo-chisla { grid-template-columns: minmax(0, 1fr); padding: 6px 16px; }
	.demo-str { border-bottom: 1px solid var(--line-soft); }
	.demo-str:last-child { border-bottom: 0; }
	.demo-scenarii { grid-template-columns: minmax(0, 1fr); }
	.demo-itog { font-size: 22px; }
}
/* ================================================================== *
 *  37. Служебные страницы: карта сайта и благодарность
 * ================================================================== *
 *  Своей вёрстки у них почти нет: карта сайта собрана из карточек
 *  и строк-ссылок хабов, благодарность — из шапки страницы и плиток.
 *  Здесь только то, чего в наборе не было.                            */

/* Номер обращения — реквизит записи, поэтому моноширинный, и строка
   стоит между заголовком и лидом, а не теряется в тексте. */
.spasibo-nomer {
	margin: 12px 0 0;
	font-size: 15px;
	color: var(--text-dim, #b9b3a8);
}
.spasibo-nomer .mono { font-size: 17px; letter-spacing: 0.02em; white-space: nowrap; }

/* Карта сайта: строк много, и группам нужен воздух между собой,
   иначе перечень читается сплошной простынёй. */
.karta + .karta { margin-top: 20px; }

@media (max-width: 600px) {
	.spasibo-nomer { font-size: 14px; }
	.karta + .karta { margin-top: 14px; }
}