/* base.css — СОБРАН автоматически (_build-css.mjs) из fonts.css + tokens.css + design.css.
   НЕ редактировать вручную: правьте исходники и пересобирайте  ->  node _build-css.mjs
   Система Titan (refero). @import Google Fonts стоит первым, далее токены и компоненты. */

/* fonts.css — локальные шрифты системы Titan (self-hosted woff2, вариативные).
   Geist (текст и заголовки, latin + cyrillic) + Geist Mono (только цифры/статистика, latin).
   Файлы в assets/fonts/ — из @fontsource-variable (Geist by Vercel, OFL), скачаны 17.06.2026.
   Локальный хостинг надёжнее Google Fonts для РФ-аудитории и лучше для Core Web Vitals.
   Inter в стеке (tokens.css) остаётся как системный фолбэк, по сети не грузится. */

/* Geist — кириллица (основной язык сайта) */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/geist-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Geist — латиница, пунктуация, типографские символы */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist Mono — цифры и моноширинные значения (latin покрывает цифры и символы) */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* tokens.css — дизайн-токены системы Titan (refero).
   Источник: styles.refero.design/style/964b9215-...  Тема: light, монохром, бумага+чернила.
   В стек Geist добавлен Inter — кириллический фолбэк (сайт русскоязычный). */

:root {
  /* Цвета */
  --color-obsidian: #111111;
  --color-paper: #ffffff;
  --color-linen: #e9eaeb;
  --color-sand: #d8d3cc;
  --color-graphite: #615e5b;
  --color-ash: #888888;
  --color-onyx: #000000;

  /* Шрифты (Inter добавлен для кириллицы) */
  --font-geist: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Типографика — шкала */
  --text-caption: 10px;   --leading-caption: 1.3;   --tracking-caption: 0.2px;
  --text-label: 12px;     --leading-label: 1.3;     --tracking-label: 0.36px;
  --text-body-sm: 14px;   --leading-body-sm: 1.5;
  --text-body: 16px;      --leading-body: 1.5;
  --text-body-lg: 18px;   --leading-body-lg: 1.5;
  --text-heading-sm: 24px;--leading-heading-sm: 1.2;
  --text-stat: 28px;      --leading-stat: 1;        --tracking-stat: -0.28px;
  --text-heading: 32px;   --leading-heading: 1.2;   --tracking-heading: -0.96px;
  --text-heading-lg: 40px;--leading-heading-lg: 1.1;--tracking-heading-lg: -1.2px;
  --text-display: 60px;   --leading-display: 1;     --tracking-display: -1.8px;

  /* Веса */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Отступы (база 4px) */
  --spacing-unit: 4px;
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px; --spacing-32: 32px;
  --spacing-36: 36px; --spacing-40: 40px; --spacing-52: 52px; --spacing-56: 56px;
  --spacing-60: 60px; --spacing-64: 64px; --spacing-80: 80px; --spacing-88: 88px;

  /* Лейаут */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 24px;

  /* Радиусы (только эти значения, по системе) */
  --radius-lg: 10px;
  --radius-2xl: 20px;
  --radius-3xl: 32px;
  --radius-full: 140px;
  --radius-full-2: 160px;
  --radius-tags: 20px;
  --radius-cards: 32px;
  --radius-buttons: 160px;
  --radius-nav-pills: 140px;
  --radius-small-elements: 10px;

  /* Поверхности */
  --surface-paper-canvas: #ffffff;
  --surface-linen-wash: #e9eaeb;
  --surface-sand-accent: #d8d3cc;
  --surface-onyx-block: #000000;
}

/* design.css — система Titan, применённая к компонентам СтопСтраховки.
   Монохром (бумага + чернила), без теней и градиентов. Разделение — хейрлайн-границы 1px
   и сдвиг поверхностей (paper -> linen -> sand). Цифры — Geist Mono. Токены в tokens.css. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* плавная прокрутка к якорям (оглавление, ссылки на нормы); уважает reduce-motion */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-obsidian);
  font-family: var(--font-geist);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-feature-settings: "ss02" on, "ss03" on; /* фирменная геометрия Geist (a, g) */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- типографика ---- */
h1, h2, h3, h4 { color: var(--color-obsidian); margin: 0 0 var(--spacing-20); }
h1 {
  font-size: clamp(34px, 6vw, var(--text-display)); /* display, адаптивно */
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
}
h2 {
  font-size: clamp(24px, 3vw, var(--text-heading)); /* до 32px — подзаголовок не спорит с h1 60px */
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: 700; /* вес отделяет h2 от текста при меньшем кегле */
  margin-top: var(--spacing-52);
}
h3 {
  font-size: var(--text-body-lg);
  line-height: var(--leading-heading-sm);
  font-weight: 700;
  margin-top: var(--spacing-28);
  margin-bottom: var(--spacing-12);
}
p { margin: 0 0 var(--spacing-16); }
a { color: var(--color-obsidian); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-graphite); }
strong, b { font-weight: 700; }
main ol, main ul { padding-left: var(--spacing-24); }
main li { margin: var(--spacing-8) 0; }
hr { border: none; border-top: 1px solid var(--color-obsidian); margin: var(--spacing-40) 0; }

main {
  max-width: 760px; /* читаемая редакционная колонка */
  margin: 0 auto;
  padding: var(--spacing-40) var(--spacing-24) var(--spacing-88);
}
.lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-graphite);
  margin-bottom: var(--spacing-28);
}

/* ---- шапка: editorial masthead ---- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--spacing-16) var(--spacing-20);
  max-width: var(--page-max-width); margin: 0 auto;
  padding: var(--spacing-12) var(--spacing-24);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-obsidian);
}
.brand {
  flex: 0 0 auto; white-space: nowrap;
  font-weight: 700; font-size: var(--text-body-lg); /* 18px — компактно, в одной строке с меню */
  letter-spacing: -0.02em; text-decoration: none; color: var(--color-obsidian);
  margin-right: auto; /* лого слева, навигация — в оставшемся месте справа */
}
.brand b { font-weight: 700; }
/* навигация занимает место справа от лого и переносится ВНУТРИ себя — лого остаётся на строке */
.site-nav {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end;
  flex: 1 1 auto; min-width: 0;
}
/* пилюли с заливкой — явные кликабельные цели (удобнее текст-табов), но компактные */
.site-nav a {
  text-decoration: none; color: var(--color-obsidian);
  font-weight: 500; font-size: var(--text-body-sm); line-height: 1.15;
  padding: 6px 12px; border-radius: var(--radius-nav-pills);
  background: var(--color-linen); white-space: nowrap;
}
.site-nav a:hover { background: var(--color-sand); }
.site-nav a[aria-current="page"] { background: var(--color-obsidian); color: var(--color-paper); }
.nav-toggle {
  display: none; font: inherit; font-weight: 500;
  padding: 6px 14px; border: 1px solid var(--color-obsidian);
  border-radius: var(--radius-nav-pills); background: var(--color-paper); cursor: pointer;
}

/* ---- подвал ---- */
.site-foot {
  max-width: var(--page-max-width); margin: var(--spacing-80) auto 0;
  padding: var(--spacing-32) var(--spacing-24) var(--spacing-64);
  border-top: 1px solid var(--color-obsidian);
  font-size: var(--text-body-sm); color: var(--color-graphite);
}
.foot-links { margin: var(--spacing-16) 0; display: flex; flex-wrap: wrap; gap: var(--spacing-12); }
.foot-links a { color: var(--color-graphite); }
.disclaimer, .copy { color: var(--color-graphite); }
.foot-contact { margin: var(--spacing-16) 0 var(--spacing-8); color: var(--color-graphite); }
.foot-contact a { color: var(--color-obsidian); }

/* ---- крошки ---- */
.crumbs {
  font-size: var(--text-label); letter-spacing: var(--tracking-label);
  color: var(--color-graphite); margin-bottom: var(--spacing-12);
}
.crumbs a { color: var(--color-graphite); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---- кнопки ---- */
button.act, .btn-primary {
  font: inherit; font-weight: 500; font-size: var(--text-body-sm);
  text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--color-onyx); color: var(--color-paper);
  border: 1px solid var(--color-onyx);
  border-radius: var(--radius-buttons); /* 160px pill */
  padding: 11px 18px; cursor: pointer;
}
button.act:hover { background: #1a1a1a; }
button.act:focus-visible { outline: 2px solid var(--color-obsidian); outline-offset: 2px; }
/* вторичные действия (скачать/печать/копировать) — НЕ вторая primary-кнопка */
#zay-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-12); align-items: center; margin-top: var(--spacing-16); }
#zay-actions .act { background: var(--color-linen); color: var(--color-obsidian); border: 1px solid var(--color-obsidian); }
#zay-actions .act:hover { background: var(--color-sand); }

/* ---- карточки и блоки ---- */
.cta-block {
  background: var(--color-linen); border: none;
  border-radius: var(--radius-cards); /* 32px */
  padding: var(--spacing-24); margin: var(--spacing-32) 0;
}
.cta-block p { margin: 0 0 var(--spacing-12); }
.cta-block p:last-child { margin: 0; }
.note {
  background: var(--color-linen); border: none;
  border-radius: var(--radius-2xl); /* 20px */
  padding: var(--spacing-12) var(--spacing-16);
  font-size: var(--text-body-sm); color: var(--color-graphite);
  margin: var(--spacing-16) 0;
}
/* акцентная заметка над формой — заметнее обычной .note */
.callout {
  background: var(--color-linen);
  border-left: 3px solid var(--color-obsidian);
  border-radius: var(--radius-small-elements);
  padding: var(--spacing-12) var(--spacing-16);
  margin: var(--spacing-20) 0;
  font-size: var(--text-body-sm); color: var(--color-obsidian);
}
.callout a { font-weight: 500; }
.todo {
  background: var(--color-sand); border: none;
  border-radius: var(--radius-2xl); padding: var(--spacing-8) var(--spacing-12);
  font-size: var(--text-label); color: var(--color-graphite); margin: var(--spacing-16) 0;
}

/* ---- формы инструментов ---- */
.tool-form { margin: var(--spacing-24) 0; }
.tool-form fieldset {
  border: 1px solid var(--color-obsidian); border-radius: var(--radius-cards);
  padding: var(--spacing-20) var(--spacing-24); margin: 0 0 var(--spacing-24);
}
.tool-form legend {
  font-weight: 500; font-size: var(--text-label); text-transform: uppercase;
  letter-spacing: 0.03em; padding: 0 var(--spacing-8); color: var(--color-graphite);
}
.tool-form label { display: block; margin: var(--spacing-12) 0 var(--spacing-4); font-weight: 500; font-size: var(--text-body-sm); }
/* текстовые поля растягиваются на всю ширину — радио/чекбоксы НЕТ (иначе контрол уезжает в центр) */
.tool-form input:not([type="radio"]):not([type="checkbox"]),
.tool-form select, .tool-form textarea {
  width: 100%; font: inherit; font-size: var(--text-body);
  padding: 10px 14px; color: var(--color-obsidian); background: var(--color-paper);
  border: 1px solid var(--color-obsidian); border-radius: var(--radius-small-elements); /* 10px */
  transition: box-shadow 120ms ease;
}
.tool-form input::placeholder { color: var(--color-ash); }
.tool-form input:not([type="radio"]):not([type="checkbox"]):focus,
.tool-form select:focus, .tool-form textarea:focus {
  outline: none; box-shadow: inset 0 0 0 1px var(--color-obsidian); /* без glow — только усиление хейрлайна */
}
.tool-form .row2 { display: flex; gap: var(--spacing-16); flex-wrap: wrap; }
.tool-form .row2 > div { flex: 1 1 220px; }

/* кастомная стрелка select — нативная прижата вплотную к краю; даём ей воздух справа */
.tool-form select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}

/* кнопка действия не должна прилипать к полям формы */
.tool-form button[type="submit"] { margin-top: var(--spacing-20); }

/* ---- варианты выбора (radio / checkbox) ---- */
/* строка [контрол] [подпись]; контрол фиксированной ширины, кликабельна вся строка */
.tool-form fieldset label {
  display: flex; align-items: center; gap: var(--spacing-12);
  margin: 0; padding: var(--spacing-12) var(--spacing-4);
  font-weight: 400; font-size: var(--text-body); cursor: pointer;
  border-top: 1px solid var(--color-linen);
}
.tool-form fieldset > label:first-of-type { border-top: none; }
.tool-form input[type="radio"], .tool-form input[type="checkbox"] {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 0;
  accent-color: var(--color-obsidian); cursor: pointer;
}
.tool-form fieldset label:hover { color: var(--color-obsidian); }
/* поля-обёртки select внутри fieldset не должны получать flex-стиль метки */
.tool-form fieldset label:has(select),
.tool-form fieldset label:has(input:not([type="radio"]):not([type="checkbox"])) {
  display: block; padding: 0; border-top: none;
  margin: var(--spacing-12) 0 var(--spacing-4); font-weight: 500; font-size: var(--text-body-sm);
}

/* ---- вывод инструментов ---- */
.tool-out {
  background: var(--color-linen); border: none;
  border-radius: var(--radius-cards); padding: var(--spacing-24);
  margin-top: var(--spacing-20); white-space: pre-wrap;
  font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-obsidian);
}
/* числа в результатах — Geist Mono, как требует система (цифры = авторитет) */
.tool-out b, .num {
  font-family: var(--font-geist-mono); font-weight: 500; font-feature-settings: "ss08" on;
}
#zay-flash { font-family: var(--font-geist-mono); font-size: var(--text-body-sm); color: var(--color-graphite); }

/* ---- форма заявки (воронка /pomosch) ---- */
.tool-form .consent {
  display: flex; gap: var(--spacing-8); align-items: flex-start;
  font-weight: 400; font-size: var(--text-body-sm); margin: var(--spacing-16) 0 var(--spacing-20);
}
.tool-form .consent input { width: auto; flex: 0 0 auto; margin: 3px 0 0; }
.tool-form .consent-err {
  margin: 0 0 var(--spacing-16); padding: var(--spacing-8) var(--spacing-12);
  background: var(--color-sand); border-radius: var(--radius-2xl);
  color: var(--color-obsidian); font-size: var(--text-body-sm);
}
/* подсказка мягкого валидатора (не ошибка-блокер, а помощник) */
.field-hint {
  display: block; margin: var(--spacing-4) 0 0;
  font-size: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-graphite);
}
.tool-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tool-form input[aria-invalid="true"], .tool-form textarea[aria-invalid="true"] {
  border-color: var(--color-graphite); box-shadow: inset 0 0 0 1px var(--color-graphite);
}
.tool-out[data-state="ok"] { border-left: 3px solid var(--color-obsidian); }
.tool-out[data-state="err"] { background: var(--color-sand); border-left: 3px solid var(--color-graphite); }

/* ---- таблицы (ПСК, график платежей) ---- */
table { border-collapse: collapse; width: 100%; margin: var(--spacing-16) 0; font-size: var(--text-body-sm); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-linen); }
th { font-weight: 500; border-bottom: 1px solid var(--color-obsidian); font-family: var(--font-geist); }
td { font-family: var(--font-geist-mono); font-feature-settings: "ss08" on; } /* числовые ячейки */
td:first-child { font-family: var(--font-geist); }

/* ---- источники / правовая база ---- */
.sources {
  margin-top: var(--spacing-56); border-top: 1px solid var(--color-obsidian);
  padding-top: var(--spacing-16); font-size: var(--text-body-sm); color: var(--color-graphite);
}
.sources h2 { font-size: var(--text-heading-sm); margin: 0 0 var(--spacing-12); letter-spacing: normal; }
.sources ol { margin: 0; padding-left: var(--spacing-20); }
.sources li { margin: var(--spacing-8) 0; }
.sources cite { font-style: normal; color: var(--color-obsidian); }
.sources .updated { margin-top: var(--spacing-16); }

/* инлайн-маркер нормы */
.zakon { white-space: nowrap; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* актуальность (тонкая подпись) */
.updated {
  font-size: var(--text-label); letter-spacing: var(--tracking-label);
  color: var(--color-ash); margin: var(--spacing-4) 0 var(--spacing-20);
}
.updated time { color: var(--color-graphite); }

/* ---- оглавление статьи (TOC-рейка) ---- */
main.has-toc {
  max-width: 1080px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: var(--spacing-56);
  align-items: start;
}
.article-body { min-width: 0; max-width: 720px; } /* читаемая мера колонки сохраняется */
/* --head-h измеряется в site.js по реальной высоте шапки (она переносится по ширине).
   +32px — гарантированный зазор, чтобы оглавление и якоря не уходили под липкий хедер. */
main.has-toc h2, main.has-toc h1 { scroll-margin-top: calc(var(--head-h, 64px) + var(--spacing-32)); }
.toc {
  position: sticky; top: calc(var(--head-h, 64px) + var(--spacing-32));
  align-self: start; max-height: calc(100vh - var(--head-h, 64px) - var(--spacing-56)); overflow: auto;
  font-size: var(--text-body-sm);
}
.toc-title {
  margin: 0 0 var(--spacing-12);
  font-size: var(--text-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-graphite); font-weight: 500;
}
.toc nav { border-left: 1px solid var(--color-sand); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a {
  display: block; padding: 6px 0 6px var(--spacing-16);
  margin-left: -1px; border-left: 2px solid transparent;
  color: var(--color-graphite); text-decoration: none; line-height: 1.35;
}
.toc a:hover { color: var(--color-obsidian); }
.toc a[aria-current] { color: var(--color-obsidian); font-weight: 500; border-left-color: var(--color-obsidian); }

/* на узких экранах рейка прячется, статья — обычная колонка */
@media (max-width: 980px) {
  main.has-toc { display: block; max-width: 760px; }
  .toc { display: none; }
}

/* ============ SVG-иконки (монохром, тонкая линия — стиль Titan) ============ */
/* line-иконки заданы как mask-image: красятся currentColor, без цвета/теней/градиентов.
   Один источник правды — переменные ниже; используются и как .ico, и как ::before-маркеры. */
:root {
  --ico-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3Cpath d='M10 9H8'/%3E%3C/svg%3E");
  --ico-shield-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --ico-calc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z'/%3E%3Cpath d='M8 6h8'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
  --ico-percent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 5 5 19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E");
  --ico-coins: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M18.09 10.37A6 6 0 1 1 10.34 18'/%3E%3Cpath d='M7 6h1v4'/%3E%3Cpath d='m16.71 13.88.7.71-2.82 2.82'/%3E%3C/svg%3E");
  --ico-bank: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22h18'/%3E%3Cpath d='M6 18V11'/%3E%3Cpath d='M10 18V11'/%3E%3Cpath d='M14 18V11'/%3E%3Cpath d='M18 18V11'/%3E%3Cpath d='M4 7 12 2l8 5'/%3E%3Cpath d='M4 7h16'/%3E%3C/svg%3E");
  --ico-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
  --ico-scale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E");
  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --ico-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3C/svg%3E");
  --ico-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10.5 9-7.5 9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E");
  --ico-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
}

/* базовый инлайновый значок */
.ico {
  display: inline-block; width: 1.1em; height: 1.1em; flex: 0 0 auto;
  background: currentColor; vertical-align: -0.2em;
  -webkit-mask: var(--_m) center / contain no-repeat;
  mask: var(--_m) center / contain no-repeat;
}
.ico--doc { --_m: var(--ico-doc); }
.ico--shield-check { --_m: var(--ico-shield-check); }
.ico--calc { --_m: var(--ico-calc); }
.ico--percent { --_m: var(--ico-percent); }
.ico--coins { --_m: var(--ico-coins); }
.ico--clipboard { --_m: var(--ico-clipboard); }
.ico--scale { --_m: var(--ico-scale); }

/* крупный значок-шапка карточки-инструмента (как feature-card в доках) */
.tool-card .tool-ico {
  display: block; width: 28px; height: 28px; margin: 0 0 var(--spacing-16);
  color: var(--color-obsidian); vertical-align: baseline;
}
/* значок-маркер в cta-блоке */
.cta-ico { display: block; width: 26px; height: 26px; margin: 0 0 var(--spacing-12); color: var(--color-obsidian); }
.cta-block h2 { margin-top: 0; }

/* единый значок для карточек листингов (банки/страховые/база) — задаётся классом сетки */
.cards-bank .tool-card::before,
.cards-shield .tool-card::before,
.cards-doc .tool-card::before {
  content: ""; display: block; width: 26px; height: 26px; margin-bottom: var(--spacing-12);
  background: var(--color-obsidian);
  -webkit-mask: var(--_cm) center / contain no-repeat;
  mask: var(--_cm) center / contain no-repeat;
}
.cards-bank { --_cm: var(--ico-bank); }
.cards-shield { --_cm: var(--ico-shield); }
.cards-doc { --_cm: var(--ico-doc); }

/* автодекор повторяющихся редакционных блоков на внутренних страницах */
.crumbs a[href="/"]::before {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px;
  background: currentColor; -webkit-mask: var(--ico-home) center / contain no-repeat; mask: var(--ico-home) center / contain no-repeat;
}
.sources h2::before {
  content: ""; display: inline-block; width: 20px; height: 20px; margin-right: var(--spacing-8); vertical-align: -3px;
  background: currentColor; -webkit-mask: var(--ico-scale) center / contain no-repeat; mask: var(--ico-scale) center / contain no-repeat;
}
.toc-title::before {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px;
  background: currentColor; -webkit-mask: var(--ico-list) center / contain no-repeat; mask: var(--ico-list) center / contain no-repeat;
}
.note::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 7px; vertical-align: -3px;
  background: currentColor; -webkit-mask: var(--ico-info) center / contain no-repeat; mask: var(--ico-info) center / contain no-repeat;
}

/* ---- cookie ---- */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-12);
  background: var(--color-paper); border-top: 1px solid var(--color-obsidian);
  padding: var(--spacing-12) var(--spacing-24); font-size: var(--text-body-sm);
}
.cookie-bar a { color: var(--color-obsidian); }
.cookie-bar button {
  font: inherit; font-weight: 500; font-size: var(--text-body-sm);
  text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer;
  background: var(--color-onyx); color: var(--color-paper); border: none;
  border-radius: var(--radius-buttons); padding: 8px 16px; margin-left: auto;
}

/* ---- адаптив ---- */
/* HACK: бургер появляется до 720px — на этой ширине пилюли навигации перестают помещаться в один ряд */
@media (max-width: 720px) {
  .site-head { flex-wrap: wrap; } /* меню раскрывается отдельной строкой во всю ширину */
  .nav-toggle { display: inline-block; margin-left: auto; }
  .site-nav { display: none; flex-basis: 100%; }
  .site-nav.open { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-8); }
  .site-nav a { display: block; text-align: left; }
  main { padding-left: var(--spacing-16); padding-right: var(--spacing-16); }
}

/* ============ ГЛАВНАЯ: editorial-подача Titan ============ */
main.home { max-width: 1080px; }

/* hero 50/50: текст слева, проверенные цифры справа */
.hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--spacing-56);
  align-items: start; padding: var(--spacing-24) 0 var(--spacing-64);
  border-bottom: 1px solid var(--color-obsidian);
}
.hero-main h1 { margin-bottom: var(--spacing-24); }
.hero-main .lead { max-width: 32em; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--spacing-20); align-items: center; margin-top: var(--spacing-8); }

/* единственная primary-кнопка (onyx) — в hero */
.btn-primary {
  display: inline-block; text-decoration: none;
  font-weight: 500; font-size: var(--text-body-sm); text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--color-onyx); color: var(--color-paper);
  border: 1px solid var(--color-onyx); border-radius: var(--radius-buttons); padding: 12px 22px;
}
.btn-primary:hover { background: #1a1a1a; color: var(--color-paper); }
.btn-ghost {
  text-decoration: none; font-weight: 500; font-size: var(--text-body-sm);
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-obsidian);
}
.btn-ghost:hover { color: var(--color-graphite); }
/* вторичная pill (linen) — для остальных CTA, чтобы primary оставалась одна */
.btn-secondary {
  display: inline-block; text-decoration: none; font-weight: 500; font-size: var(--text-body-sm);
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-obsidian);
  background: var(--color-linen); border: 1px solid var(--color-obsidian);
  border-radius: var(--radius-buttons); padding: 11px 20px;
}
.btn-secondary:hover { background: var(--color-sand); color: var(--color-obsidian); }

/* стат-триптих — авторитет цифр (Geist Mono), бордюр-карточка */
.hero-aside {
  border: 1px solid var(--color-obsidian); border-radius: var(--radius-cards);
  padding: var(--spacing-28) var(--spacing-32); display: flex; flex-direction: column;
}
/* шапка-рамка блока — даёт цифрам контекст, чтобы он не «терялся» */
.aside-head {
  margin: 0 0 var(--spacing-20); padding-bottom: var(--spacing-16);
  border-bottom: 1px solid var(--color-obsidian);
  font-size: var(--text-heading-sm); letter-spacing: -0.01em;
  font-weight: 700; color: var(--color-obsidian);
}
/* каждая цифра — отдельная «строка», разделители-хейрлайны вместо большого зазора */
.stat { display: flex; flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-20) 0; }
.stat:first-of-type { padding-top: 0; }
.stat + .stat { border-top: 1px solid var(--color-sand); }
.stat-num {
  font-family: var(--font-geist-mono); font-weight: 500;
  font-size: clamp(32px, 4vw, 40px); line-height: 1; letter-spacing: -0.02em;
  color: var(--color-obsidian); font-feature-settings: "ss08" on;
}
/* подпись под цифрой — крупнее и читабельнее (было 12px и терялось) */
.stat-label { font-size: var(--text-body); line-height: 1.35; color: var(--color-graphite); letter-spacing: normal; }
.stat-src {
  margin: var(--spacing-16) 0 0; padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-sand);
  font-size: var(--text-caption); letter-spacing: var(--tracking-caption); color: var(--color-ash);
}

/* нумерованные шаги-строки (process) */
.steps { list-style: none; padding: 0; margin: var(--spacing-24) 0 0; }
.steps .step { margin: 0; } /* перекрываем общий main li */
.step {
  display: flex; gap: var(--spacing-20); align-items: baseline;
  padding: var(--spacing-20) 0; border-bottom: 1px solid var(--color-obsidian);
}
.step-n {
  flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--color-obsidian);
  border-radius: var(--radius-buttons); display: grid; place-items: center;
  font-weight: 500; font-size: var(--text-body); font-family: var(--font-geist-mono);
}
.step-b { flex: 1; }
.step-b a { font-weight: 500; font-size: var(--text-body-lg); text-decoration: none; }
.step-b a:hover { text-decoration: underline; }
.step-b p { margin: 6px 0 0; color: var(--color-graphite); }

/* сетка карточек-инструментов (editorial feature cards) */
.tool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--spacing-24); margin: var(--spacing-24) 0 var(--spacing-32); /* нижний отступ — текст под сеткой не прижимается */
}
.tool-card {
  background: var(--color-linen); border-radius: var(--radius-cards);
  padding: var(--spacing-24); text-decoration: none; color: var(--color-obsidian); display: block;
}
.tool-card:hover { background: var(--color-sand); color: var(--color-obsidian); }
.tool-card h3 { margin: 0 0 var(--spacing-8); font-size: var(--text-body-lg); font-weight: 500; }
.tool-card p { margin: 0; color: var(--color-graphite); font-size: var(--text-body-sm); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: var(--spacing-32); }
}