/* РКН Аудит — дизайн-система v2 (визуальный язык lania.ai)
   Единственный источник цвета, типографики и ритма. В разметке цветов нет. */

:root{
  --paper:#ffffff;
  --paper-2:#f4f4f2;
  --ink:#0e0e10;
  --text:#2b2b2b;
  --muted:#6b6b70;   /* было #9a9a9e — контраст 2.55:1 на светлом, ниже нормы 4.5 */
  --muted-2:#5b5b60;
  --accent:#0b84e0;
  --accent-ink:#0a6ab5;
  --on-dark:#f2f2f0;
  --on-dark-muted:#9a9a9e;
  --rule:rgba(14,14,16,.12);
  --rule-dark:rgba(242,242,240,.14);

  --font:"Inter",-apple-system,"Segoe UI",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;

  --gap:1.5rem;
  /* Вертикальная шкала. Было clamp(4rem,9vw,8rem) → 115px сверху и снизу на 1280,
     то есть 230px воздуха на стык: на экран 800px не влезала одна смысловая единица.
     Стало 56px/56px. Единственный источник вертикального ритма секций. */
  --section-y:clamp(2.25rem,4.4vw,3.5rem);
  --measure:68ch;

  /* Шаг вертикального ритма внутри секции. Все блочные компоненты отбиваются
     кратно ему, иначе между соседними блоками получается то 0, то 40px. */
  --stack:1.25rem;
  --stack-lg:2rem;

  /* ── Радиусы (A5). Ровно три значения, четвёртого быть не должно ───────
     --r-pill  — только чипы и кнопки (капсулы);
     --r       — самостоятельный блок: панель, врезка, лист меню, pre, полоса;
     --r-sm    — элемент внутри блока: поле ввода, инлайновый code.
     Ячейки .cell радиуса НЕ имеют: они складываются в сетку-хайрлайн,
     скругление даётся контейнеру .grid, а не каждой ячейке. */
  --r-pill:999px;
  --r:12px;
  --r-sm:8px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--text);
  /* 18px/1.55 давали строку 28px: абзац из шести строк занимал полэкрана.
     17px/1.5 — плотность lania.ai, читаемость не теряется. */
  font-family:var(--font);font-size:1.0625rem;line-height:1.5;
  font-weight:400;letter-spacing:normal;
  -webkit-font-smoothing:antialiased;
}

/* ── Контейнеры и секции ───────────────────────────────── */
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gap)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--gap)}
.section{padding-block:var(--section-y);border-top:1px solid var(--rule)}
.section:first-of-type{border-top:0}
.section-dark{background:var(--ink);color:var(--on-dark);border-top:0}
.section-dark .lead,.section-dark .muted{color:var(--on-dark-muted)}
.section-dark .eyebrow{color:var(--on-dark-muted)}
.section-dark h1,.section-dark h2,.section-dark h3{color:var(--on-dark)}
.section-alt{background:var(--paper-2)}

/* ── Типографика ───────────────────────────────────────── */
.eyebrow{
  font-family:var(--font-mono);font-size:.6875rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin:0 0 .625rem;display:block;
}
/* Заголовки уменьшены на шаг: h1 был 76.8px на 1280 — одна строка съедала
   десятую часть экрана. Кегль по-прежнему доминирует, но не заменяет собой блок. */
h1,.h1{
  font-size:clamp(2.125rem,4.4vw,3.5rem);line-height:1.05;letter-spacing:-.015em;
  font-weight:400;color:var(--ink);margin:0 0 1rem;max-width:18ch;
}
h2,.h2{
  font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1.15;letter-spacing:-.02em;
  font-weight:400;color:var(--ink);margin:0 0 .75rem;
}
h3,.h3{
  font-size:1.1875rem;line-height:1.3;letter-spacing:-.015em;
  font-weight:500;color:var(--ink);margin:0 0 .375rem;
}
p{margin:0 0 .75rem;max-width:var(--measure)}
.lead{font-size:1.0625rem;line-height:1.5;color:var(--muted-2);max-width:var(--measure)}
.muted{color:var(--muted)}
.small{font-size:.9375rem}
a{color:var(--accent);text-underline-offset:.2em}
a:hover{color:var(--accent-ink)}
.section-dark a{color:var(--on-dark)}

ul.list{margin:0 0 var(--stack);padding:0;list-style:none;max-width:var(--measure)}
ul.list li{padding:.4375rem 0 .4375rem 1.5rem;border-bottom:1px solid var(--rule);position:relative}
ul.list li::before{content:"—";position:absolute;left:0;color:var(--muted)}

/* ── Сетки ─────────────────────────────────────────────── */
.grid{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cell{background:var(--paper);padding:1.5rem}
.section-alt .cell{background:var(--paper-2)}

/* ── Карточка-переключатель (выбор периода оплаты) ───────────
   Radio спрятан в .sr-only, потому что кликают по всей карточке. До этого
   выбранный вариант ничем не отличался от невыбранного: сумма в счёте внизу
   менялась, а какой тариф выбран — по карточкам было не видно.
   :has(:checked) даёт состояние без единой строки JS. */
label.cell:has(input[type="radio"]){cursor:pointer;transition:border-color .12s ease,background-color .12s ease}
label.cell:has(input[type="radio"]:checked){
  background:rgba(11,132,224,.06);
  box-shadow:inset 0 0 0 2px var(--accent);
}
label.cell:has(input[type="radio"]:checked) strong{color:var(--accent)}
/* Клавиатура: radio невидим, поэтому фокус показываем на самой карточке. */
label.cell:has(input[type="radio"]:focus-visible){
  outline:2px solid var(--accent);
  outline-offset:2px;
}
@media (hover:hover){
  label.cell:has(input[type="radio"]:not(:checked)):hover{background:var(--paper-2)}
}

/* ── Чипы статуса ──────────────────────────────────────── */
.chip{
  display:inline-block;font-family:var(--font-mono);font-size:.625rem;
  letter-spacing:.2em;text-transform:uppercase;padding:.25rem .625rem;
  border:1px solid var(--rule);border-radius:999px;color:var(--muted-2);
}
.chip-ok{border-color:var(--accent);color:var(--accent)}
.chip-warn{border-color:var(--text);color:var(--text)}
.section-dark .chip{border-color:var(--rule-dark);color:var(--on-dark-muted)}

/* ── Кнопки ────────────────────────────────────────────── */
.btn{
  display:inline-block;font-size:1rem;font-weight:500;text-decoration:none;
  padding:.75rem 1.5rem;border-radius:var(--r-pill);border:1px solid transparent;
  background:var(--ink);color:var(--on-dark);transition:opacity .15s;
}
.btn:hover{opacity:.85;color:var(--on-dark)}
.btn-accent{background:var(--accent);color:#fff}
.btn-ghost{background:transparent;border-color:var(--rule);color:var(--ink)}
.section-dark .btn{background:var(--on-dark);color:var(--ink)}
/* Акцентная кнопка остаётся акцентной и на тёмной секции: правило выше перебивало
   .btn-accent просто потому, что идёт ниже по файлу, и кнопка запуска скана
   на первом экране теряла цвет. */
.section-dark .btn-accent{background:var(--accent);color:#fff}
.section-dark .btn-ghost{background:transparent;border-color:var(--rule-dark);color:var(--on-dark)}

/* ── Определения (реквизиты) ───────────────────────────── */
.defs{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:0;margin:0}
.defs dt{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding:.625rem 1.5rem .625rem 0;
  border-top:1px solid var(--rule)}
.defs dd{margin:0;padding:.625rem 0;border-top:1px solid var(--rule);color:var(--ink)}

/* ── Шапка и подвал ────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  padding-block:1rem;gap:var(--gap)}
.brand{display:flex;align-items:center;gap:.5rem;font-size:1rem;color:var(--ink);
  text-decoration:none;letter-spacing:-.01em}
.site-nav{display:flex;gap:1.75rem;font-family:var(--font-mono);font-size:.6875rem;
  letter-spacing:.16em;text-transform:uppercase}
.site-nav a{color:var(--muted-2);text-decoration:none}
.site-nav a:hover{color:var(--ink)}
.site-foot{border-top:1px solid var(--rule);padding-block:3rem;
  font-size:.875rem;color:var(--muted)}
.site-foot a{color:var(--muted-2);text-decoration:none}

.crumbs{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1.25rem}
.crumbs a{color:var(--muted);text-decoration:none}

@media(max-width:700px){
  .site-nav{display:none}
  .defs{grid-template-columns:1fr}
  .defs dd{border-top:0;padding-top:0}
  .cell{padding:1.5rem}
}

/* ── Формы ─────────────────────────────────────────────── */
.form-row{display:flex;gap:.75rem;flex-wrap:wrap;max-width:640px}
.field{
  flex:1 1 260px;font:inherit;font-size:1rem;color:var(--ink);
  padding:.75rem 1.25rem;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r-pill);outline:none;
}
.field:focus{border-color:var(--accent)}
.section-dark .field{background:transparent;color:var(--on-dark);border-color:var(--rule-dark)}
.section-dark .field::placeholder{color:var(--muted)}
.hint{font-size:.8125rem;color:var(--muted);margin:.75rem 0 0}
.consent{display:flex;gap:.625rem;align-items:flex-start;font-size:.8125rem;
  color:var(--muted);line-height:1.5;max-width:640px;margin-top:1rem}
.consent input{margin-top:.25rem;flex:none;width:1rem;height:1rem;accent-color:var(--accent)}

/* ── Тарифы ────────────────────────────────────────────── */
.price{font-size:2rem;line-height:1;letter-spacing:-.03em;color:var(--ink);margin:.375rem 0 .75rem}
.price-unit{font-size:1rem;color:var(--muted);letter-spacing:0}
.cell-feature{background:var(--paper-2)}

/* ── Нумерованные шаги ─────────────────────────────────── */
.step-num{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.2em;
  color:var(--muted);display:block;margin-bottom:.625rem}

/* ── Отметка-сигнал (было: красный бейдж) ──────────────── */
.signal{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:1.25rem}
.signal::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--accent)}

/* ── Граф «проверки → нормы» ───────────────────────────── */
.mesh{width:100%;height:auto;display:block;overflow:visible}
.mesh-edges line{stroke:var(--rule-dark);stroke-width:1;
  transition:stroke .3s,stroke-opacity .3s}
.mesh-edges line.lit{stroke:var(--accent);stroke-opacity:1}
.node circle{fill:var(--on-dark);fill-opacity:.55;transition:r .18s,fill-opacity .18s;
  animation-name:mesh-breathe;animation-iteration-count:infinite;
  animation-timing-function:ease-in-out}
.node-hub circle{fill:var(--accent);fill-opacity:.9}
.node text{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;fill:var(--on-dark-muted);opacity:0;
  transition:opacity .2s;pointer-events:none}
.node text.sub{fill:var(--accent);font-size:8px}
.node-hub text{opacity:.85;font-size:10px;fill:var(--on-dark)}
.node:hover circle,.node:focus circle{r:8;fill-opacity:1}
.node:hover text,.node:focus text{opacity:1}
.node:focus{outline:none}
.mesh.dimmed .node:not(.lit) circle{fill-opacity:.18}
.mesh-caption{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-top:2rem}

@keyframes mesh-breathe{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.node{transform-box:fill-box;transform-origin:center}

@media(prefers-reduced-motion:reduce){
  .node circle{animation:none}
  .mesh-edges line,.node circle,.node text{transition-duration:.01ms}
}

/* ── Документ (оферта, политика, согласие) ─────────────── */
/* Сплошной юридический текст: одна колонка, без секций-полос и надрубрик.
   Заголовки работают как оглавление, а не как рубрикация лендинга. */
.doc{padding-block:var(--section-y)}
.doc h1{font-size:clamp(1.75rem,3.2vw,2.5rem);max-width:26ch;margin-bottom:1.5rem}
.doc h2{font-size:1.25rem;letter-spacing:-.015em;margin:2rem 0 .75rem;
  padding-top:1rem;border-top:1px solid var(--rule)}
.doc h3{font-size:1.0625rem;margin:1.25rem 0 .375rem}
.doc p,.doc li{font-size:1rem;line-height:1.55;color:var(--text)}
.doc ol,.doc ul{padding-left:1.25rem;margin:0 0 1rem;max-width:var(--measure)}
.doc li{margin-bottom:.3125rem}
.doc .updated{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1.5rem}
/* Штамп .updated рассчитан на одну строку («ДАТА РАЗМЕЩЕНИЯ: 9 МАЯ 2026 Г.»).
   История редакций документа — это абзац на тысячу знаков, и в моноширинном
   капслоке он превращался в отдельную серую простыню, набранную не тем шрифтом,
   чем весь остальной документ. Для неё — обычный текст служебного размера. */
.doc .updated-note{font-size:.875rem;line-height:1.55;color:var(--muted-2);
  margin-bottom:1.5rem;max-width:var(--measure)}

/* ── Транзакционные страницы (оплата, возврат, статус заказа) ───
   Появились после того, как исполнитель на order_return.html не нашёл нужных
   компонентов и написал 75 инлайновых стилей. Отсутствие компонента в словаре —
   это дефект системы, а не повод импровизировать в разметке. */
.page-head{text-align:center;margin-bottom:var(--stack-lg)}
.page-head h1,.page-head h2{max-width:none;margin-left:auto;margin-right:auto}
.page-head p{margin-left:auto;margin-right:auto}

.status-icon{width:4rem;height:4rem;margin:0 auto 1rem;border-radius:999px;
  background:var(--paper-2);display:grid;place-items:center;font-size:2rem;
  border:1px solid var(--rule)}
.status-icon-ok{border-color:var(--accent);color:var(--accent)}

.panel{border:1px solid var(--rule);background:var(--paper-2);
  padding:1.25rem;border-radius:var(--r);text-align:left}
.panel + .panel{margin-top:var(--stack)}

.note{border-left:3px solid var(--accent);background:var(--paper-2);
  padding:.875rem 1.125rem;margin:var(--stack) 0;font-size:.9375rem;line-height:1.5;
  border-radius:0 var(--r-sm) var(--r-sm) 0}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.875rem;margin:0 0 var(--stack)}
.form-grid .full{grid-column:1 / -1}
.label{display:block;font-family:var(--font-mono);font-size:.6875rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.375rem}
.req{color:#d92d20;font-weight:700}
.field-box{width:100%;font:inherit;font-size:.9375rem;color:var(--ink);
  padding:.5625rem .875rem;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r-sm);outline:none}
.field-box:focus{border-color:var(--accent)}

.spinner{width:1.25rem;height:1.25rem;border:2px solid var(--rule);
  border-top-color:var(--accent);border-radius:999px;display:inline-block;
  animation:v2-spin 1s linear infinite;vertical-align:-.2em}
@keyframes v2-spin{to{transform:rotate(360deg)}}

.status-line{font-size:.875rem;color:var(--muted);margin-top:.75rem;min-height:1.25rem}

@media(max-width:700px){
  .form-grid{grid-template-columns:1fr}
}

/* Визуально скрытая подпись: не видна, но читается скринридером и остаётся
   в тексте страницы для поисковика. Появился по запросу NEED-COMPONENT
   с reestr.html — форме нужен label, который не ломает раскладку. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Таблица данных ────────────────────────────────────────
   Запрошена через NEED-COMPONENT с monitoring_status.html: истории списаний
   и проверок в личном кабинете. Узкие экраны — горизонтальная прокрутка
   внутри таблицы, страница целиком по горизонтали не едет. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 var(--stack)}
table.data{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:32rem}
table.data th{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:400;text-align:left;
  padding:.625rem 1rem .625rem 0;border-bottom:1px solid var(--rule);white-space:nowrap}
table.data td{padding:.625rem 1rem .625rem 0;border-bottom:1px solid var(--rule);
  color:var(--text);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data .num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ── Серьёзность нарушений ─────────────────────────────────
   Запрошено через NEED-COMPONENT с report.html. В отчёте различие
   «критично / предупреждение / косметика» — функциональное: по нему клиент
   решает, что чинить первым. Монохром здесь неуместен.
   Оттенки приглушены под язык системы, но различимы и проходят контраст
   на светлом фоне (проверяемые пары — с --paper). */
:root{
  --crit:#c2372c;
  --warn:#9a6a12;
  --ok:#2f7a4d;
}
.sev-crit{color:var(--crit)}
.sev-warn{color:var(--warn)}
.sev-ok{color:var(--ok)}
.chip-crit{border-color:var(--crit);color:var(--crit)}
.chip-cosmetic{border-color:var(--rule);color:var(--muted)}
.status-icon-crit{border-color:var(--crit);color:var(--crit)}
.status-icon-warn{border-color:var(--warn);color:var(--warn)}
.section-dark .sev-crit{color:#f08b81}
.section-dark .sev-warn{color:#e0b25f}
.section-dark .sev-ok{color:#6fc292}

/* ── Печать ────────────────────────────────────────────────
   Отчёт клиенты сохраняют в PDF и показывают юристу. */
.no-print{display:initial}
.page-break{break-after:page}
@media print{
  .no-print,.site-head,.site-foot{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:1rem;border-top:1px solid #ccc}
  .section-dark{background:#fff;color:#000}
  .section-dark h1,.section-dark h2,.section-dark h3{color:#000}
  a{color:#000;text-decoration:underline}
  .panel,.note,.cell{border-color:#ccc;background:#fff}
  table.data{min-width:0}
}

/* ── Запрошено через NEED-COMPONENT с главной ──────────────
   .cell-wide — карточка во всю ширину сетки (тариф «Мониторинг» стоит особняком
   от разовых тарифов). .win — выигрышная колонка в таблице сравнения. */
.cell-wide{grid-column:1 / -1}
table.data th.win,table.data td.win{background:rgba(11,132,224,.06)}
table.data th.win{color:var(--accent)}

/* ── Мобильное меню ────────────────────────────────────────
   На <details>, без JS. Прежняя вёрстка держала бургер на скрипте с четырьмя id;
   при переносе шапки в базовый шаблон эти id исчезли бы, и на телефоне
   навигации не осталось бы вовсе. */
.nav-mobile{display:none;position:relative}
.nav-mobile > summary{list-style:none;cursor:pointer;padding:.5rem;margin:-.5rem;
  display:grid;place-items:center;width:2.75rem;height:2.75rem}
.nav-mobile > summary::-webkit-details-marker{display:none}
.nav-burger,.nav-burger::before,.nav-burger::after{
  display:block;width:20px;height:1.5px;background:var(--ink);content:"";
  transition:transform .2s,opacity .2s}
.nav-burger{position:relative}
.nav-burger::before{position:absolute;top:-6px}
.nav-burger::after{position:absolute;top:6px}
.nav-mobile[open] .nav-burger{background:transparent}
.nav-mobile[open] .nav-burger::before{transform:translateY(6px) rotate(45deg)}
.nav-mobile[open] .nav-burger::after{transform:translateY(-6px) rotate(-45deg)}
.nav-mobile-sheet{position:absolute;right:0;top:calc(100% + .75rem);z-index:50;
  min-width:14rem;background:var(--paper);border:1px solid var(--rule);
  border-radius:12px;padding:.5rem;display:flex;flex-direction:column}
.nav-mobile-sheet a{padding:.75rem 1rem;text-decoration:none;color:var(--ink);
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;border-radius:8px}
.nav-mobile-sheet a:hover{background:var(--paper-2)}

@media(max-width:700px){
  .nav-mobile{display:block}
}
@media(prefers-reduced-motion:reduce){
  .nav-burger,.nav-burger::before,.nav-burger::after{transition:none}
}

/* ── Служебные классы, которыми управляет JavaScript ───────
   app.js переключает экраны главной через classList.toggle('hidden') — 9 мест.
   В Tailwind этот класс приходил из фреймворка; в v2 фреймворка нет, поэтому
   класс обязан жить здесь. Без него все восемь экранов показались бы разом. */
.hidden{display:none!important}

/* Акцентная карточка. Нужна там, где блок обязан выделяться по существу дела,
   а не по вкусу: галочка подключения мониторинга — единственный повторяющийся
   тариф, и smoke-тест отдельно следит, чтобы она не превратилась в серую плашку. */
.panel-accent{border-color:var(--accent);background:rgba(11,132,224,.05)}

/* Акцентная часть заголовка. Нужна, чтобы ключевая фраза выделялась, а не гасла:
   при переносе главной её ошибочно перевели в .muted, и самое важное в h1
   стало самым незаметным. */
.hl{color:var(--accent)}
.section-dark .hl{color:#6ab7f5}

/* Префикс внутри поля ввода (запрошен через NEED-COMPONENT с главной):
   «https://» лежит поверх инпута слева, а не отдельной строкой над ним. */
.field-wrap{position:relative;flex:1 1 260px;display:flex}
.field-wrap .field{flex:1;padding-left:5.25rem}
.field-prefix{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:.875rem;color:var(--muted);
  pointer-events:none;user-select:none}
@media(max-width:700px){
  .field-prefix{display:none}
  .field-wrap .field{padding-left:1.25rem}
}

/* КРИТИЧНО. Карточки внутри тёмной секции наследовали светлый текст, а фон
   брали из .cell — получалось белым по белому, текст пропадал полностью.
   Проявилось на секции «Как это работает» главной. */
.section-dark .grid{background:var(--rule-dark);border-color:var(--rule-dark)}
.section-dark .cell{background:#17171a;color:var(--on-dark)}
.section-dark .cell h3,.section-dark .cell h2{color:var(--on-dark)}
.section-dark .cell p,.section-dark .cell .lead{color:var(--on-dark-muted)}
.section-dark ul.list li{border-bottom-color:var(--rule-dark)}
.section-dark .defs dt,.section-dark .defs dd{border-top-color:var(--rule-dark)}
.section-dark .panel{background:#17171a;border-color:var(--rule-dark);color:var(--on-dark)}
.section-dark table.data th{border-bottom-color:var(--rule-dark)}
.section-dark table.data td{border-bottom-color:var(--rule-dark);color:var(--on-dark)}

/* ── Код и моноширинные вставки ────────────────────────────
   На /bot строка User-Agent шириной 1663px тянула всю страницу в горизонтальный
   скролл: стилей для code/pre в системе не было вовсе. Длинные строки теперь
   переносятся, блоки кода прокручиваются внутри себя. */
code,kbd,samp{font-family:var(--font-mono);font-size:.875em;
  background:var(--paper-2);padding:.125em .375em;border-radius:4px;
  overflow-wrap:anywhere;word-break:break-word}
pre{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:8px;
  padding:1rem;margin:0 0 1rem;font-size:.875rem;line-height:1.5}
pre code{background:none;padding:0;white-space:pre}
.section-dark code,.section-dark kbd,.section-dark samp{
  background:rgba(242,242,240,.08);color:var(--on-dark)}
.section-dark pre{background:#17171a;border-color:var(--rule-dark);color:var(--on-dark)}

/* ── Витрина тарифов ───────────────────────────────────────
   NEED-COMPONENT с _index_marketing.html. Раньше четыре тарифа лежали
   одной сеткой с полными перечнями «что входит» — блок занимал несколько
   экранов, карточки были разной высоты, а «Мониторинг» (единственный
   повторяющийся тариф) схлопывался в узкую колонку с пустотой справа.
   Теперь: три разовых тарифа читаются шапкой (имя → для кого → цена),
   детали спрятаны в .disclose, «Мониторинг» вынесен в .price-band. */
.tariff{display:flex;flex-direction:column}
.tariff .price{margin-bottom:.75rem}
/* Кнопка прижата к низу карточки — колонка кнопок выравнивается
   независимо от того, сколько строк занял текст выше. */
.tariff-cta{margin-top:auto;align-self:flex-start}

/* Раскрывающийся перечень: текст не выброшен, но не занимает первый взгляд. */
.disclose{margin:0 0 var(--stack);border-top:1px solid var(--rule)}
.disclose > summary{
  list-style:none;cursor:pointer;padding:.75rem 1.5rem .75rem 0;position:relative;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);
}
.disclose > summary::-webkit-details-marker{display:none}
.disclose > summary::after{content:"+";position:absolute;right:0;top:.625rem;
  font-family:var(--font-mono);font-size:.875rem;color:var(--muted)}
.disclose[open] > summary::after{content:"–"}
.disclose > summary:hover{color:var(--ink)}
.disclose ul.list{margin-bottom:1rem}
.disclose .note{margin-bottom:0}

/* Внутри тарифных перечней маркер «—» из ul.list лишний: строки уже
   начинаются с ✓ / —, иначе получается двойной знак. */
.disclose ul.list li::before,
.price-band ul.list li::before,
.split ul.list li::before{content:none}
.disclose ul.list li,
.price-band ul.list li,
.split ul.list li{padding-left:0}

/* Тёмная полоса под сеткой — «Мониторинг» стоит особняком по существу
   (единственная подписка), а не как ещё одна карточка в ряду.
   Класс .section-dark здесь только ради его дочерних правил (чипы, кнопки,
   разделители), собственные отступы секции гасим. */
.price-band{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:1.5rem;padding:1.75rem;margin:var(--stack) 0;border-radius:var(--r);
}
.price-band > div > :last-child{margin-bottom:0}
.price-band .price{color:var(--on-dark)}
/* Акцент не должен теряться на тёмном: .section-dark .chip перекрашивает
   чип в muted, здесь возвращаем голубой. */
.price-band .chip-ok{border-color:var(--accent);color:#6ab7f5}
.price-band ul.list{max-width:none}

/* Две колонки «текст + список» без рамок сетки — для баннера бюджетного
   сегмента, где список раньше уезжал в узкую колонку под заголовком. */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:1.75rem;align-items:start}
.split ul.list{max-width:none}

/* Ряд кнопок: на 375px переносится, ничего не вылезает за край. */
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:0 0 1rem}

@media(max-width:700px){
  .price-band{padding:1.5rem;gap:1.5rem}
  .btn-row .btn{width:100%;text-align:center}
  .tariff-cta{align-self:stretch;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .disclose > summary{transition:none}
}

/* ── Правки по итогам UI/UX-аудита 09.09.2026 ─────────────── */

/* 1. Кнопки и поля набирались Arial: браузер не наследует шрифт у form-элементов,
      а мы это не переопределили. Рядом стояли <a class="btn"> в Inter и
      <button class="btn"> в Arial — отсюда ощущение «шрифты везде разные». */
button,input,select,textarea{font:inherit;color:inherit}

/* 4. Фокус с клавиатуры был невидим: у .btn оставался дефолтный тёмный контур
      (на тёмной секции не виден), у .field стоял outline:none. */
/* border-radius:4px из этого правила убран: он менял форму сфокусированного
   элемента (капсульное поле ввода на первом экране становилось прямоугольным
   — четвёртый радиус на странице). Форму задаёт компонент, фокус — только контур. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.section-dark :focus-visible{outline-color:#6ab7f5}
.btn:focus-visible,.field:focus-visible,.field-box:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 6. Единица цены прилипала к числу: «99 ₽разовая оплата». */
.price-unit{margin-left:.375rem}

/* 7. Двойные маркеры: ::before рисовал «—», а в тексте уже стоял ✓ или —.
      Маркер ставим только там, где строка начинается со слова. */
ul.list li::before{content:none}
ul.list li{padding-left:0}
ul.list li.dashed{padding-left:1.5rem}
ul.list li.dashed::before{content:"—";position:absolute;left:0;color:var(--muted)}

/* 10. Крупные числа .price внутри тёмной секции оставались цветом --ink:
       #0e0e16 на #0e0e10 — контраст 1.00, то есть невидимы. Тот же класс ошибок,
       что и с карточками, но .price в прошлую правку не попал. */
.section-dark .price,.section-dark .price *{color:var(--on-dark)}
.section-dark .price-unit{color:var(--on-dark-muted)}

/* 5. Заголовки не должны рвать неразрывные конструкции вроде «290 ₽/мес». */
h1,h2,h3{overflow-wrap:break-word;hyphens:none}

/* ── Блок согласий ─────────────────────────────────────────
   По аудиту: простыня 13px серого во всю ширину, крупнее самого оффера,
   с невидимыми системными чекбоксами. Текст согласия юридически значим —
   ни сокращать, ни прятать нельзя. Поэтому работаем типографикой:
   ограничиваем длину строки, поднимаем читаемость, делаем чекбокс заметным. */
.consent{max-width:56ch;font-size:.8125rem;line-height:1.55;
  align-items:flex-start;gap:.75rem;margin-top:1.25rem}
.consent + .consent{margin-top:.625rem}
.consent input[type=checkbox]{width:1rem;height:1rem;margin-top:.1875rem;
  accent-color:var(--accent);flex:none;cursor:pointer}
.consent a{text-decoration:underline;text-underline-offset:.15em}
.section-dark .consent{color:var(--on-dark-muted)}
.section-dark .consent a{color:var(--on-dark)}
/* Первое согласие обязательное, второе — нет. Разделяем их визуально,
   чтобы не читались как один сплошной текст. */
.consent + .consent{padding-top:.625rem;border-top:1px solid var(--rule)}
.section-dark .consent + .consent{border-top-color:var(--rule-dark)}

/* В центрированной шапке экрана форма и согласия тоже должны стоять по центру,
   иначе заголовок по центру, а поле ввода прижато влево. Текст согласия при этом
   остаётся выключенным влево — по центру такой объём не читается. */
.page-head .form-row{justify-content:center;margin-left:auto;margin-right:auto}
.page-head .hint{text-align:center}
.page-head .consent{margin-left:auto;margin-right:auto;text-align:left}
.page-head .btn-row{justify-content:center}

/* Составные величины вроде «290 ₽/мес» браузер рвёт после слэша. Текст правкам
   не подлежит (SEO-заголовок), поэтому оборачиваем в неразрывный span. */
.nowrap{white-space:nowrap}
h1,h2{text-wrap:balance}

/* ════════════════════════════════════════════════════════════════════
   Правки по приёмке 09.09.2026 — раздел A (системные) и B14 (подвал)
   ════════════════════════════════════════════════════════════════════ */

/* ── A1. Чужие шрифты ───────────────────────────────────────
   Аудит getComputedStyle по /, /o-nas, /oferta, /monitoring,
   /komplekt-dokumentov, /kejsy, /baza-znanij показал источник не-Inter,
   не объяснимый замыслом: cookie-баннер. Его собственный <style> в теле
   страницы задаёт font:14px/1.4 -apple-system — на Windows это Segoe UI.
   Баннер висит поверх любой страницы, поэтому «другой шрифт» видно
   первым же взглядом. Его стили идут ПОСЛЕ v2.css, поэтому перебиваем
   весом селектора (body .rkn-cookie-banner), а не !important.
   Заодно приводим его к системе: свой синий #1d6cf3 и радиусы 12/8
   заменяются на --accent и общую шкалу радиусов.
   Моноширинный остаётся по замыслу и только там, где служит меткой:
   .eyebrow, .site-nav, .chip, .label, .crumbs, .defs dt, table th,
   .step-num, .disclose summary, code/pre. Связного текста в mono нет. */
body .rkn-cookie-banner,
body .rkn-cookie-banner button{font-family:var(--font)}
body .rkn-cookie-banner{font-size:.875rem;line-height:1.5;border-radius:var(--r)}
body .rkn-cookie-banner button{font-size:.9375rem;font-weight:500;border-radius:var(--r-pill)}
body .rkn-cookie-banner .rkn-accept{background:var(--accent)}
body .rkn-cookie-banner a{color:var(--accent)}

/* ── A5. Один радиус на одну роль ───────────────────────────
   Было на соседних блоках: .cell 0, .panel 12, .note 0, .field-box 8,
   .price-band 0, .nav-mobile-sheet 12, pre 8, code 4 — «у одного блока
   квадратная рамка, у другого закруглённая». Правило теперь одно:
   капсула — только чипы и кнопки, --r — самостоятельный блок,
   --r-sm — элемент внутри блока. Сетка .grid скругляется целиком,
   ячейки внутри неё остаются прямыми. */
.grid{border-radius:var(--r);overflow:hidden}
.chip{border-radius:var(--r-pill)}
pre,.nav-mobile-sheet{border-radius:var(--r)}
code,kbd,samp{border-radius:var(--r-sm)}
.status-icon{border-radius:var(--r-pill)}

/* ── A4. Единая вертикальная шкала ──────────────────────────
   Блочные компоненты внутри секции отбиваются одним шагом --stack;
   последний элемент секции хвостовой отбивки не даёт, иначе к padding
   секции добавляется случайный «хвост» в 20–32px. */
.grid,.split,.table-wrap,.price-band,.btn-row,.form-row,.defs{margin-block:0 var(--stack)}
.section > .wrap > :last-child,
.section > .wrap-narrow > :last-child,
.cell > :last-child,.panel > :last-child{margin-bottom:0}
/* Стык двух тёмных секций подряд: границы у .section-dark нет, поэтому
   тёмные секции сливались в одно полотно с двойным воздухом на шве. */
.section-dark + .section-dark{padding-top:0}
.section-dark + .section-dark > .wrap,
.section-dark + .section-dark > .wrap-narrow{
  padding-top:var(--section-y);border-top:1px solid var(--rule-dark)}

/* ── A2. Смысловые акценты ──────────────────────────────────
   ПРАВИЛО. Цвет здесь не украшает, он кодирует ровно одно различие,
   и на блок приходится один акцент:

     --crit   (красный)  — нарушение или риск: то, что грозит штрафом;
                           то, чего у клиента НЕТ и должно быть.
     --warn   (охра)     — требует внимания, но не блокирует:
                           «частично», «нужен юрист», «не входит».
     --ok     (зелёный)  — норма выполнена, входит в пакет, бесплатно.
     --accent (синий)    — выбор сервиса: рекомендуемый тариф, основное
                           действие. Это НЕ статус и не оценка.
     без цвета           — нейтральные факты, косметика, справка.

   Модификатор .tone-* даёт фоновую заливку блока (7–9% тона) и рамку
   в тон — вешается на блок, который целиком про один смысл. Цвет текста
   при этом не меняется: читаемость держит основной --text. */
:root{
  --crit-bg:rgba(194,55,44,.07);    --crit-line:rgba(194,55,44,.35);
  --warn-bg:rgba(154,106,18,.09);   --warn-line:rgba(154,106,18,.35);
  --ok-bg:rgba(47,122,77,.08);      --ok-line:rgba(47,122,77,.35);
  --accent-bg:rgba(11,132,224,.06); --accent-line:rgba(11,132,224,.38);
}

/* Чипы. До правки .chip-warn красился в --text — тот же чёрный, что и весь
   текст: отличить «ПОДХОДИТ» от «БАЗА + ЮРИСТ» было нечем. */
.chip-ok{border-color:var(--ok-line);color:var(--ok);background:var(--ok-bg)}
.chip-warn{border-color:var(--warn-line);color:var(--warn);background:var(--warn-bg)}
.chip-crit{border-color:var(--crit-line);color:var(--crit);background:var(--crit-bg)}
.chip-accent{border-color:var(--accent-line);color:var(--accent);background:var(--accent-bg)}
.chip-cosmetic{border-color:var(--rule);color:var(--muted);background:transparent}
.section-dark .chip-ok{background:rgba(111,194,146,.12);border-color:rgba(111,194,146,.4);color:#6fc292}
.section-dark .chip-warn{background:rgba(224,178,95,.12);border-color:rgba(224,178,95,.4);color:#e0b25f}
.section-dark .chip-crit{background:rgba(240,139,129,.12);border-color:rgba(240,139,129,.4);color:#f08b81}
.section-dark .chip-accent{background:rgba(11,132,224,.2);border-color:rgba(106,183,245,.5);color:#6ab7f5}

/* Заливка блока: .cell, .panel, .note, .price-band — любой контейнер,
   целиком посвящённый одному смыслу. */
.tone-crit{background:var(--crit-bg);border-color:var(--crit-line)}
.tone-warn{background:var(--warn-bg);border-color:var(--warn-line)}
.tone-ok{background:var(--ok-bg);border-color:var(--ok-line)}
.tone-accent{background:var(--accent-bg);border-color:var(--accent-line)}
/* .cell фон получает из .grid / .section-alt — для тона задаём явно. */
.grid .cell.tone-crit,.section-alt .cell.tone-crit{background:var(--crit-bg)}
.grid .cell.tone-warn,.section-alt .cell.tone-warn{background:var(--warn-bg)}
.grid .cell.tone-ok,.section-alt .cell.tone-ok{background:var(--ok-bg)}
.grid .cell.tone-accent,.section-alt .cell.tone-accent{background:var(--accent-bg)}
/* Врезка .note — левая линейка в тон. */
.note-crit{border-left-color:var(--crit);background:var(--crit-bg)}
.note-warn{border-left-color:var(--warn);background:var(--warn-bg)}
.note-ok{border-left-color:var(--ok);background:var(--ok-bg)}
.panel-accent{border-color:var(--accent-line);background:var(--accent-bg)}

/* Строки перечней «входит / не входит»: различие несёт смысл покупки,
   монохромная галочка от монохромного прочерка не отличается.
   Разметка уже начинает такие строки знаком ✓ или — — красим знак. */
ul.list li.yes::first-letter{color:var(--ok)}
ul.list li.no{color:var(--muted)}
ul.list li.no::first-letter{color:var(--crit)}

/* Таблица сравнения: колонка-победитель уже подкрашена (.win),
   ячейки-статусы дают то же различие построчно. */
table.data td.yes{color:var(--ok)}
table.data td.no{color:var(--crit)}
table.data td.partial{color:var(--warn)}
table.data tr.tone-accent td{background:var(--accent-bg)}

/* «Бесплатно» обязано отличаться от платного не только словом. */
.price-free{color:var(--ok)}

/* ── B14. Подвал ────────────────────────────────────────────
   Был одной строкой копирайта. Стал функциональным блоком: четыре
   колонки — сервис, бесплатные инструменты, документы, оператор.
   Содержимое взято из существующих страниц (реквизиты и e-mail — с /o-nas),
   новых фактов не добавлено. */
.site-foot{border-top:1px solid var(--rule);padding-block:2.5rem 1.75rem;
  background:var(--paper-2);font-size:.875rem;color:var(--muted)}
.foot-grid{display:grid;gap:1.75rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding-bottom:1.75rem;border-bottom:1px solid var(--rule)}
.foot-col{display:flex;flex-direction:column;gap:.4375rem;align-items:flex-start}
.foot-col .eyebrow{margin:0 0 .25rem}
.foot-col a{color:var(--muted-2);text-decoration:none;line-height:1.45}
.foot-col a:hover{color:var(--ink)}
.foot-col p{margin:0;max-width:none;color:var(--muted-2);line-height:1.5}
.foot-col p + p{margin-top:.5rem}
.foot-base{display:flex;flex-wrap:wrap;gap:.375rem 1.5rem;
  justify-content:space-between;padding-top:1.25rem}
.foot-base p{margin:0;max-width:none}

/* Таблица с min-width:32rem, забытая без обёртки .table-wrap, утаскивала
   всю страницу в горизонтальный скролл на 375px (/komplekt-dokumentov).
   Прокручиваем такую таблицу внутри себя; обёрнутая ведёт себя по-прежнему. */
table.data{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap > table.data{display:table;overflow-x:visible}
/* Стилей для голого <table> в системе не было вовсе — а такие таблицы в
   шаблонах есть (/komplekt-dokumentov). Без правила они рисовались браузерным
   дефолтом (другая гарнитура метрик, другие рамки) и тянули страницу вбок. */
table:not(.data){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  width:100%;max-width:100%;border-collapse:collapse;font-size:.9375rem;
  margin:0 0 var(--stack)}
table:not(.data) th{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:400;text-align:left;
  padding:.625rem 1rem .625rem 0;border-bottom:1px solid var(--rule);white-space:nowrap}
table:not(.data) td{padding:.625rem 1rem .625rem 0;border-bottom:1px solid var(--rule);
  color:var(--text);vertical-align:top}

/* ── A6. Мобильная адаптация ────────────────────────────────
   375px: проверены /, /o-nas, /oferta, /monitoring,
   /komplekt-dokumentov, /kejsy, /baza-znanij. */
@media(max-width:480px){
  :root{--gap:1.125rem}
  body{font-size:1rem}
  .cell{padding:1.125rem}
  .panel{padding:1rem}
  .price-band{padding:1.25rem}
  /* Четыре колонки по 190px давали на телефоне одну длинную простыню. */
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem 1rem}
  .foot-base{padding-top:1rem}
  .defs dt{padding-bottom:.125rem}
  body .rkn-cookie-banner{left:8px;right:8px;bottom:8px;padding:14px}
  body .rkn-cookie-banner button{flex:1 1 auto}
}

/* ════════════════════════════════════════════════════════════════════
   Приёмка, круг 2 (09.09.2026) — A1 шрифты, A2 градации, E списки, F формы
   ════════════════════════════════════════════════════════════════════ */

/* ── A1. Один шрифт, одна шкала. Эталон — /bot ───────────────
   Снято getComputedStyle по /, /o-nas, /oferta, /monitoring,
   /komplekt-dokumentov, /kejsy, /baza-znanij, /dlya-shkol-i-sadov,
   /reestr, /buy-scan. Найдено три расхождения, и все — не про гарнитуру,
   а про то, что браузер подставляет вместо неё.

   1) <strong>/<b> набирались весом 700. Inter подключён начертаниями
      400/500/600 — 700 браузер СИНТЕЗИРУЕТ, растягивая 600-й контур.
      Синтетический жир и есть тот «другой шрифт», который видно внутри
      абзаца: /oferta, /dlya-shkol-i-sadov, /buy-scan, /komplekt-dokumentov.
      В .prose и .case вес уже был 600 — отсюда и ощущение разнобоя между
      страницами. Сводим к 600 везде. */
strong,b{font-weight:600}

/* 2) Длинный текст (.doc: оферта, политика, согласие, статьи, кейсы) жил
      на собственной шкале: h1 40px против 56px эталона, h2 20px против
      24px в статьях, тело 16px против 17px. Три источника кегля вместо
      одного. Оставляем ровно две роли — «страница» и «длинный текст» —
      и внутри каждой одно значение. Правила стоят ниже блока .doc,
      специфичность та же, поэтому перебивают его. */
.doc h1{font-size:clamp(2.125rem,4.4vw,3.5rem);line-height:1.05;letter-spacing:-.015em}
.doc h2{font-size:1.5rem;line-height:1.25;font-weight:500;letter-spacing:-.015em}
.doc h3{font-size:1.1875rem;line-height:1.3;font-weight:500}
.doc p,.doc li{font-size:1.0625rem;line-height:1.55}

/* 3) Моноширинные ярлыки шли кеглем 10, 11 и 12px — одна роль, три
      значения. Роль одна (метка), значит и кегль один: 11px. */
.chip,.mesh-caption,.step-num,
table.data th,table:not(.data) th{font-size:.6875rem}

/* ── A2. Градации акцентов: делаем различие видимым ──────────
   Система тонов (--crit/--warn/--ok/--accent) была, но читалась плохо:
   различие несла рамка в 1px и цвет текста на кегле 10px. На таком
   размере тон не различим — замечание про «однообразную палитру»
   повторилось именно поэтому. Добавляем чипу цветную точку: пятно
   тона размером 6px видно там, где 1px рамки не виден. */
.chip{display:inline-flex;align-items:center;gap:.4375rem;vertical-align:middle}
.chip-ok::before,.chip-warn::before,.chip-crit::before,
.chip-accent::before,.chip-free::before{
  content:"";width:6px;height:6px;border-radius:var(--r-pill);
  background:currentColor;flex:none;
}
/* Рекомендуемое/выбранное — синий: это выбор сервиса, а не оценка.
   Критичное — красный, «нужно внимание» — охра, «входит/бесплатно» —
   зелёный. Правило одно на весь сайт, см. блок A2 выше. */
.chip-accent{border-color:var(--accent-line);color:var(--accent);background:var(--accent-bg)}

/* Тона обязаны работать и на тёмной секции: до правки .section-dark
   перекрашивал только чипы, а .note и .panel оставались светлыми
   блоками со светлым текстом. */
.section-dark .note{background:rgba(242,242,240,.06);color:var(--on-dark)}
.section-dark .note-crit{background:rgba(240,139,129,.12);border-left-color:#f08b81}
.section-dark .note-warn{background:rgba(224,178,95,.12);border-left-color:#e0b25f}
.section-dark .note-ok{background:rgba(111,194,146,.12);border-left-color:#6fc292}
.section-dark .tone-crit{background:rgba(240,139,129,.12);border-color:rgba(240,139,129,.4)}
.section-dark .tone-warn{background:rgba(224,178,95,.12);border-color:rgba(224,178,95,.4)}
.section-dark .tone-ok{background:rgba(111,194,146,.12);border-color:rgba(111,194,146,.4)}
.section-dark .tone-accent{background:rgba(11,132,224,.18);border-color:rgba(106,183,245,.5)}

/* ── E1/E2. Плотный список карточек ─────────────────────────
   Кейсы и статьи выводились через .panel во всю ширину контейнера:
   карточка кейса 472px, карточка статьи 306px при экране 800px —
   на просмотр помещалась одна. Список — это перечень, а не серия
   отдельных полос: две колонки, компактная типографика, служебная
   строка мельче заголовка. Заголовки не переписаны, обрезки текста
   нет — описание ограничено тремя строками средствами вёрстки. */
.card-grid{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));
  margin:0 0 var(--stack)}
.card-grid > .panel{margin:0;padding:1.125rem 1.25rem;
  display:flex;flex-direction:column;gap:.375rem;border-radius:var(--r)}
.card-grid > .panel > *{margin:0;max-width:none}
.card-grid > .panel h2{font-size:1.125rem;line-height:1.3;font-weight:500;
  letter-spacing:-.01em}
.card-grid > .panel h2 a{color:var(--ink);text-decoration:none}
.card-grid > .panel h2 a:hover{color:var(--accent)}
.card-grid > .panel p{font-size:.9375rem;line-height:1.45}
/* Описания приходят разной длины: без ограничения соседние карточки
   в ряду разъезжаются по высоте и плотность теряется снова. */
.card-summary{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.card-grid > .panel .card-meta{font-size:.75rem;line-height:1.4;color:var(--muted);
  display:flex;flex-wrap:wrap;align-items:center;gap:.3125rem .375rem}
.card-grid > .panel .card-meta .chip{font-size:.625rem;padding:.125rem .4375rem;
  letter-spacing:.12em}
.card-grid > .panel .card-more{margin-top:auto;padding-top:.25rem;font-size:.875rem}
/* Метрики кейса внутри узкой карточки: подпись и значение в одну строку,
   без вертикальных полей .defs, иначе четыре метрики дают +160px. */
.card-grid .defs{grid-template-columns:1fr auto;margin:.25rem 0 0}
.card-grid .defs dt,.card-grid .defs dd{padding:.1875rem 0;font-size:.75rem;
  letter-spacing:.1em}
.card-grid .defs dt{padding-right:.75rem;line-height:1.35}
.card-grid .defs dd{text-align:right;font-variant-numeric:tabular-nums;
  line-height:1.35;white-space:nowrap}

/* ── F2. Блок согласий: по горизонтали, а не по вертикали ────
   Текст согласия юридически значим и не сокращён ни на слово. Меняется
   только подача: два согласия встают в две колонки вместо двух этажей,
   поля и междустрочие ужаты до значений служебного текста.
   Правило общее — тот же блок стоит на /buy-scan и в мастере. */
.consent{margin-top:.75rem}
.consent + .consent{margin-top:.5rem;padding-top:.5rem}


/* ── Шапка: смягчение контраста ────────────────────────────
   Первый экран тёмный, а шапка была чистой белой — на стыке получалась
   резкая светлая полоса, перетягивающая внимание с заголовка.
   Тёплый тон бумаги вместо белого и волосяная линия вместо явной границы. */
.site-head{background:rgba(244,244,242,.92);border-bottom-color:rgba(14,14,16,.07)}

/* ── Cookie-баннер: компактнее и к левому краю ─────────────
   Был плашкой во всю ширину экрана с крупным текстом — перекрывал форму
   сканера и читался как часть интерфейса, а не как служебное уведомление. */
body .rkn-cookie-banner{
  right:auto;                      /* прижимаем влево, а не растягиваем */
  max-width:26rem;
  padding:.875rem 1rem;
  gap:.625rem;
  font-size:.8125rem;
  line-height:1.45;
  box-shadow:0 6px 24px rgba(14,14,16,.14);
}
/* Текст занимает всю строку, обе кнопки — вторую: иначе «Принять» уезжала
   вправо, «Отклонить» падала под неё и плашка вырастала в три этажа. */
body .rkn-cookie-banner p{flex:1 1 100%}
body .rkn-cookie-banner button{
  font-size:.8125rem;
  padding:.4375rem .875rem;
}
@media(max-width:700px){
  body .rkn-cookie-banner{max-width:none;right:8px}
}

/* ── Блок согласия и кнопка оплаты на экранах оформления ─────
   Три замечания по приёмке, все про нестабильность:
   1) «то есть рамка, то нет» — своей рамки у .consent не было вовсе, её рисовал
      браузер вокруг незаполненного обязательного чекбокса после попытки отправки.
      Раз состояние всё равно показывается, показываем его сами и одинаково:
      блок всегда в тихой рамке, при ошибке она краснеет.
   2) кнопка меняла ширину вслед за суммой (319px на 290 ₽, 334px на 2 490 ₽) —
      при переключении тарифа «прыгала». Резервируем ширину.
   3) между согласием и кнопкой был нулевой отступ, они склеивались. */
.consent{
  padding:.625rem .75rem;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:var(--r-sm);
  max-width:none;
}
.section-dark .consent{background:rgba(255,255,255,.04);border-color:var(--rule-dark)}
.consent:focus-within{border-color:var(--accent)}
/* Браузерная подсветка невалидного чекбокса больше не нужна: состояние видно
   по нашей рамке, а UA-обводка ложилась поверх и выглядела случайной. */
.consent input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.consent + .consent{margin-top:.5rem}
.consent + .panel,
.consent + .note{margin-top:1rem}
.consent + .btn,
.consent + button{margin-top:1rem}

/* Сумма в подписи кнопки меняется — ширина не должна. */
.btn-price{
  min-width:22rem;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
@media(max-width:520px){ .btn-price{min-width:0;width:100%} }

/* CTA под сводкой отчёта: кнопка и пояснение в одну строку. */
.report-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;
  margin:1rem 0 1.5rem;
}

/* ── Экран отчёта: сводка на почту и тарифы рядом ────────────
   Замечание фаундера: человек жмёт «купить» в блоке цен, попадает на скан,
   после скана видит результат — а касса лежит ниже трёх экранов прокрутки.
   Ставим короткие кнопки тарифов справа от формы сводки: и то и другое —
   первый экран после результата. */
.report-split{display:grid;gap:1rem;grid-template-columns:minmax(0,1fr);margin-bottom:1.5rem}
@media(min-width:900px){
  .report-split{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
  .report-split > .panel{margin:0;height:100%}
}
.report-offers{display:flex;flex-direction:column;gap:.375rem}
.report-offers .eyebrow{margin-bottom:.25rem}
.report-offers .small{margin:0 0 .625rem}
.report-offers .small:last-child{margin-bottom:0}
/* Кнопка тарифа: название слева, цена справа — три кнопки читаются как прайс. */
.btn-offer{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;text-align:left;font-variant-numeric:tabular-nums;
}
.btn-offer-price{font-weight:600;white-space:nowrap}

/* Кликабельная карточка сделана через <label> — у него display:inline по умолчанию,
   и блочное содержимое внутри наезжает на соседние блоки. На шаге мастера из-за
   этого опция мониторинга накладывалась на блок согласия и на кнопку оплаты.
   Ровно те же классы на <div> вели себя правильно, поэтому лечим сам ярлык. */
label.panel,
label.note,
label.cell{display:block}
/* Между согласием и опцией мониторинга стоит скрытый блок льготы, поэтому
   соседский селектор их не связывает — отступ задаём самой карточке. */
label.panel{margin-top:1rem}
label.cell:has(input[type="radio"]){display:block}

/* ── Сравнение двух тарифов на странице для бюджетных учреждений ──────
   Списки у тарифов разной длины (10 пунктов против 6), поэтому цена, сноска
   и кнопка «Купить» стояли у соседей на разной высоте — ряд читался как две
   несвязанные колонки. Выстраиваем общий ритм: цена сразу под заголовком,
   список занимает остаток высоты, кнопка и подпись под ней прижаты к низу. */
.tariff-compare > .cell{display:flex;flex-direction:column}
.tariff-compare > .cell > .list{flex:0 0 auto;margin-bottom:1rem}
.tariff-compare > .cell > .btn{align-self:flex-start;margin-top:auto}
.tariff-compare > .cell > .btn + .small{margin-top:.625rem;margin-bottom:0}

/* Кнопка отправки формы после карточки-опции: без отступа она прилипала к
   нижней границе панели мониторинга и читалась как её часть. Тот же зазор,
   что и после блока согласия, плюс воздух под самой кнопкой — иначе форма
   упирается в край секции. */
.panel + .btn,
.panel + button,
.note + .btn,
.note + button{margin-top:1.5rem}
form > .btn:last-child,
form > button[type="submit"]:last-child{margin-bottom:.5rem}