/* ═══════════════════════════════════════════════════════════
   Дизайн-система v2: база, компоненты, шапка и подвал, главная
   ═══════════════════════════════════════════════════════════
   Правила — docs/DESIGN.md v2.0; эталон — VisualReferences/
   prototype/glavnaya.html (роль ДИЗАЙНЕР, принято владельцем
   2026-09-27). Токены — tokens.css.

   Три слоя в этом файле:

   1. БАЗА — типографика элементов. Ограничена селектором
      body.v2: head.php ставит этот класс на каждую страницу сайта.
   2. КОМПОНЕНТЫ И ГЛАВНАЯ — btn, field, index, toc, reg, steps,
      clauses, faq, hero, appeal… Объявлены без ограничителя.
   3. ШАПКА И ПОДВАЛ — hdr/nav/sheet/ftr/mbar/float, окна заявки
      и пасхалки (modal-back/modal-box).

   Имена, разошедшиеся с прототипом осознанно: .container → .wrap,
   .row → .rowi. В разметке сайта живут утилиты Tailwind
   container, flex-row, grid — совпадение имени класса
   переопределило бы их на всех страницах.
   ═══════════════════════════════════════════════════════════ */

/* ───────────── 1. БАЗА (только страницы v2) ───────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.v2 {
  margin: 0;
  background: var(--paper-0);
  color: var(--ink-0);
  font-family: var(--font-serif);
  font-size: var(--t-body);
  line-height: 1.5;
  font-feature-settings: "kern", "liga", "onum";   /* минускульные цифры в тексте — как в книге */
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  cursor: auto;
}

.v2 h1, .v2 h2, .v2 h3, .v2 h4 {
  font-family: var(--font-serif); font-weight: 400; margin: 0; color: var(--ink-0);
  text-wrap: balance; font-feature-settings: "kern", "liga", "lnum";
}
.v2 h1 { font-size: var(--t-hero); line-height: .98; letter-spacing: -.015em; font-weight: 500; }
.v2 h2 { font-size: var(--t-h2); line-height: 1.05; letter-spacing: -.01em; }
.v2 h3 { font-size: var(--t-h3); line-height: 1.2; }
.v2 p { margin: 0; }
.v2 p + p { margin-top: var(--s-4); }
/* Ссылка в тексте — чернила с бронзовым подчёркиванием. Кнопка
   ссылкой не считается: :not(.btn) обязателен, иначе это правило
   перебивает собственный цвет .btn--primary (у него специфичность
   ниже) и подпись чёрной кнопки становится чёрной. */
.v2 main a:not(.btn) {
  color: var(--ink-0); text-decoration: underline; text-decoration-color: var(--bronze);
  text-decoration-thickness: 1px; text-underline-offset: .16em;
  transition: color var(--dur), text-decoration-color var(--dur);
}
.v2 main a:not(.btn):hover { color: var(--bronze-ink); text-decoration-color: var(--bronze-ink); }
.v2 main a.more, .v2 main .index a, .v2 main .toc__grp a,
.v2 main .reg a, .v2 main .attach { text-decoration: none; }
.v2 main .reg a:hover { text-decoration: underline; }
.v2 strong { font-weight: 600; }
.v2 ul, .v2 ol { margin: 0; padding: 0; }
.v2 img, .v2 svg { display: block; max-width: 100%; }
/* :where — чтобы сброс не перебивал компоненты: при `.v2 button`
   (0,1,1) он сильнее `.btn--primary` (0,1,0), и подпись чёрной
   кнопки-<button> наследовала чёрный цвет — «Получить консультацию»
   в форме была пустым прямоугольником, а кнопки меню набирались
   антиквой вместо Inter. */
.v2 :where(button) { font: inherit; color: inherit; }
/* Утилита .hidden (Tailwind) скрывает то, что скрипт открывает позже:
   строку «Прикрепить файлы», блок вложений, список файлов. В tailwind.css
   она объявлена раньше, чем .field / .more / .attach__list здесь, и при
   равной специфичности проигрывала им — в окне заявки одновременно
   стояли и строка-переключатель, и сам блок вложений. */
.v2 .hidden { display: none !important; }
.v2 ::selection { background: var(--bronze-tint); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Текстовые роли разметки v2 */
.lead { font-size: var(--t-lead); line-height: 1.4; color: var(--ink-1); max-width: 30em; }
.text-2 { color: var(--ink-2); }
.measure { max-width: 34em; }
.small { font-family: var(--font-ui); font-size: var(--t-small); line-height: 1.5; }
.caption { font-family: var(--font-ui); font-size: var(--t-caption); line-height: 1.5; color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "lnum", "tnum"; }

/* Капитель: реквизит, не украшение — надзаголовок главы, код стандарта, метка поля */
.cap {
  font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--bronze-ink);
}

/* Сетка */
.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.chapter { padding-top: var(--chapter); padding-bottom: var(--chapter); }
.chapter--tint { background: var(--paper-1); }
.chapter + .chapter { border-top: 1px solid var(--line); }
.chapter--tint + .chapter, .chapter + .chapter--tint { border-top: 0; }
.stack > * + * { margin-top: var(--s-4); }
.rowi { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* Глава: римская цифра на левом поле остаётся на месте, пока глава читается */
.ch { display: grid; grid-template-columns: 1fr; gap: var(--s-8); }
@media (min-width: 1000px) { .ch { grid-template-columns: 200px 1fr; gap: var(--s-16); } }
.ch__rail { align-self: start; }
@media (min-width: 1000px) { .ch__rail { position: sticky; top: 112px; } }
.ch__num { font-family: var(--font-serif); font-size: clamp(2.5rem, 2rem + 2vw, 4rem); line-height: 1; color: var(--ink-0); font-feature-settings: "lnum"; }
.ch__rail .cap { display: block; margin-top: var(--s-3); }
.ch__rail::after { content: ""; display: block; width: 40px; height: 1px; background: var(--bronze); margin-top: var(--s-4); }
.ch__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 64px); }
.ch__head--flush { margin-bottom: 0; }
.ch__head .lead { margin-top: var(--s-6); }
.ch__head .text-2 { margin-top: var(--s-6); }

/* Появление при прокрутке — один раз, коротко, с отключением по reduce.
   Класс is-in ставит скрипт v2, active — прежний скрипт: оба состояния
   означают «показано», пока не переехали все страницы. */
.rv { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
.rv.is-in, .rv.active { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 80ms; } .rv-d2 { transition-delay: 160ms; } .rv-d3 { transition-delay: 240ms; } .rv-d4 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  /* Штрих колоннады рисуется анимацией: без неё пунктир остался бы
     сдвинутым, и знак просто не появился бы на экране. */
  .colonnade .draw { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* Полоса прокрутки — в цветах листа. */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper-1); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* Поле-ловушка для роботов: вне экрана, человек его не видит. */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Знак © в подвале — пасхалка. Намеренно неотличим от обычного
   текста: находится случайно. */
.egg-trigger {
  background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
  transition: color var(--dur) ease;
}
.egg-trigger:hover { color: var(--bronze-ink); }
.egg-trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Окна поверх страницы: заявка (modal.php) и пасхалка (easter.php). */
.modal-back {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(21,21,21,0.45);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) ease;
}
.modal-back.open { opacity: 1; pointer-events: auto; }
.modal-box {
  transform: translateY(16px);
  transition: transform 260ms var(--ease);
}
.modal-back.open .modal-box { transform: translateY(0); }

/* ───────────── 2. КОМПОНЕНТЫ ───────────── */

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 48px; padding: 0 var(--s-6);
  font-family: var(--font-ui); font-weight: 500; font-size: var(--t-ui); line-height: 1.2; text-decoration: none; white-space: nowrap;
  border-radius: var(--radius); border: 1px solid var(--action); cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn--primary { background: var(--action); color: var(--on-dark); }
.btn--primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: #FFF; }
.btn--secondary { background: transparent; color: var(--ink-0); }
.btn--secondary:hover { background: var(--paper-2); color: var(--ink-0); }
.btn--lg { min-height: 56px; padding: 0 var(--s-8); font-size: 1rem; }
.btn--block { width: 100%; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn .arr { transition: transform var(--dur) var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
/* На очень узком экране длинная подпись («Прислать заключение на
   рецензию») в одну строку не помещается и раздвигает страницу —
   там кнопка переносит текст. */
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding: var(--s-3) var(--s-4); }
}

/* Ссылка-переход */
.more { font-family: var(--font-ui); font-size: var(--t-ui); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-0); }
.more::after { content: "→"; transition: transform var(--dur) var(--ease); }
.more:hover { color: var(--bronze-ink); }
.more:hover::after { transform: translateX(4px); }

/* Field — подпись капителью над полем, линия снизу: поле бланка */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field + .field { margin-top: var(--s-6); }
.field__label { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.field__label .opt { text-transform: none; letter-spacing: 0; color: var(--ink-3); font-family: var(--font-ui); font-size: var(--t-caption); }
.field__input {
  width: 100%; min-height: 48px; padding: var(--s-3) 0;
  font-family: var(--font-serif); font-size: 1.25rem; color: var(--ink-0); background: transparent;
  border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__input::placeholder { color: var(--ink-3); }
.field__input:hover { border-bottom-color: var(--ink-1); }
.field__input:focus { outline: none; border-bottom-color: var(--ink-0); box-shadow: 0 1px 0 0 var(--ink-0); }
/* Обводка только для клавиатуры: мышиный фокус остаётся тихим. */
.field__input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.field--error .field__input { border-bottom-color: var(--danger); box-shadow: 0 1px 0 0 var(--danger); }
/* Скрипт формы помечает само поле классом fld-err (так было в тёмной
   версии и так осталось в site.js) — правило ниже держит оба способа. */
.field__input.fld-err { border-bottom-color: var(--danger); box-shadow: 0 1px 0 0 var(--danger); }
.field__error { display: none; font-family: var(--font-ui); font-size: var(--t-caption); color: var(--danger); }
.field--error .field__error { display: block; }
textarea.field__input { min-height: 72px; resize: vertical; line-height: 1.4; }

/* Способ ответа — чипы-переключатели вместо чекбоксов с квадратиками */
.opts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.opt-chip { position: relative; }
.opt-chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt-chip span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--font-ui); font-size: var(--t-small); color: var(--ink-1); transition: border-color var(--dur), background-color var(--dur), color var(--dur); }
.opt-chip input:checked + span { background: var(--ink-0); border-color: var(--ink-0); color: var(--on-dark); }
.opt-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.opt-chip:hover span { border-color: var(--ink-1); }

/* Attach — строка бланка */
.attach { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: var(--s-3) 0; border-bottom: 1px dashed var(--line-strong); cursor: pointer; font-family: var(--font-ui); font-size: var(--t-small); color: var(--ink-1); transition: border-color var(--dur); }
.attach:hover { border-bottom-color: var(--ink-1); }
.attach svg { color: var(--bronze-ink); flex: none; }
.attach__list { list-style: none; margin: var(--s-2) 0 0; padding: 0; font-family: var(--font-ui); font-size: var(--t-caption); color: var(--ink-2); display: grid; gap: var(--s-1); }
.attach__list .is-big { color: var(--danger); }

.notice { padding: var(--s-3) var(--s-4); font-family: var(--font-ui); font-size: var(--t-small); border-left: 2px solid; }
.notice--danger { background: var(--danger-tint); border-color: var(--danger); color: var(--ink-0); }
.notice--ok { background: var(--ok-tint); border-color: var(--ok); color: var(--ink-0); }

/* Указатель — строки со стрелкой, книжная линейка */
.index { list-style: none; border-top: 1px solid var(--line-ink); margin: 0; padding: 0; }
.index li { border-bottom: 1px solid var(--line); }
.index a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; min-height: 48px; text-decoration: none; color: var(--ink-0); font-size: 1.1875rem; }
.index a:hover { color: var(--bronze-ink); }
.index a:hover .idx-arr { transform: translateX(4px); }
.idx-arr { color: var(--bronze); transition: transform var(--dur) var(--ease); }

/* Каталог направлений — книжное оглавление в колонках */
.toc { columns: 1; column-gap: var(--s-12); }
@media (min-width: 640px) { .toc { columns: 2; } }
@media (min-width: 1100px) { .toc { columns: 3; } }
.toc__grp { break-inside: avoid; margin-bottom: var(--s-8); }
.toc__grp .cap { display: block; padding-bottom: var(--s-2); border-bottom: 1px solid var(--line-ink); margin-bottom: var(--s-2); }
.toc__grp ul { list-style: none; margin: 0; padding: 0; }
.toc__grp a { display: block; padding: 6px 0; text-decoration: none; color: var(--ink-0); font-size: 1.0625rem; line-height: 1.35; }
.toc__grp a:hover { color: var(--bronze-ink); }
/* До 640 оглавление в одну колонку — 32 строки; показываем первые группы, остальное по кнопке */
@media (max-width: 639px) {
  .toc.is-capped { max-height: 560px; overflow: hidden; position: relative; }
  .toc.is-capped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--paper-0)); pointer-events: none; }
}
.toc-more { display: none; margin-top: var(--s-4); }
@media (max-width: 639px) { .toc.is-capped + .toc-more { display: inline-flex; } }

/* Реестр — таблица-документ */
.reg { width: 100%; border-collapse: collapse; }
.reg th { text-align: left; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); padding: 0 var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line-ink); }
.reg td { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.reg td:last-child, .reg th:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.reg .code { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .06em; color: var(--bronze-ink); white-space: nowrap; }
.reg .money { font-family: var(--font-serif); font-size: 1.25rem; font-feature-settings: "lnum", "tnum"; }
.reg .status { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .06em; color: var(--ink-2); }
/* На узком экране правая колонка реестра («от 15 000 ₽», «действует»)
   в одну строку не обязана помещаться: иначе таблица задаёт странице
   ширину больше экрана и появляется горизонтальная прокрутка. */
@media (max-width: 420px) {
  .reg td, .reg th { padding-right: var(--s-2); }
  .reg td:last-child, .reg th:last-child { white-space: normal; }
}
.reg tr.is-hl td { background: var(--bronze-tint); }
.reg tr.is-hl td:first-child { padding-left: var(--s-3); }
.reg tr.is-hl td:last-child { padding-right: var(--s-3); }
/* Правая колонка реестра по умолчанию короткая и не переносится (цена,
   статус, дата). Там, где в ней текст — название документа, описание
   направления, — перенос обязателен: иначе строка задаёт таблице
   ширину больше экрана. */
.reg--wide td:last-child, .reg--wide th:last-child { white-space: normal; text-align: left; }


/* Порядок — шаги на одной линии */
.steps { list-style: none; counter-reset: step; display: grid; gap: var(--s-8); margin: 0; padding: 0; }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(5, 1fr); gap: var(--s-6); } }
.step { counter-increment: step; padding-top: var(--s-5); border-top: 1px solid var(--line-ink); position: relative; }
.step.is-free { border-top-color: var(--bronze); border-top-width: 2px; }
.step::before { content: counter(step, upper-roman); font-family: var(--font-serif); font-size: 1.75rem; line-height: 1; color: var(--ink-0); display: block; margin-bottom: var(--s-4); font-feature-settings: "lnum"; }
.step h3 { font-size: 1.375rem; }
.step p { margin-top: var(--s-3); font-size: 1.0625rem; color: var(--ink-2); line-height: 1.45; }
.step .free { display: inline-block; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-ink); margin-left: var(--s-2); vertical-align: middle; }

/* Список положений — с цифрами на поле */
.clauses { list-style: none; border-top: 1px solid var(--line-ink); margin: 0; padding: 0; }
.clauses li { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .clauses li { grid-template-columns: 72px 1fr 1.4fr; gap: var(--s-8); align-items: baseline; } }
.clauses .n { font-family: var(--font-serif); font-size: 1.5rem; color: var(--bronze-ink); line-height: 1; font-feature-settings: "lnum"; }
.clauses h3 { font-size: 1.375rem; }
.clauses p { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.45; }
.clauses .cap { display: block; margin-bottom: var(--s-2); }
@media (max-width: 899px) { .clauses p { grid-column: 2; margin-top: var(--s-2); } }

/* FAQ — details/summary */
.faq { border-top: 1px solid var(--line-ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 32px; gap: var(--s-6); align-items: baseline; padding: var(--s-6) 0; font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.25; color: var(--ink-0); transition: color var(--dur); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-serif); font-size: 1.75rem; line-height: 1; color: var(--bronze-ink); text-align: right; transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--bronze-ink); }
.faq .faq__a { padding: 0 56px var(--s-8) 0; color: var(--ink-1); max-width: 36em; }

/* Тёмная плоскость */
.panel-ink { background: var(--ink-panel); color: var(--on-dark); }
.panel-ink h2, .panel-ink h3 { color: var(--on-dark); }
.panel-ink .lead, .panel-ink p, .panel-ink .text-2 { color: var(--on-dark-2); }
.panel-ink .cap { color: var(--bronze-light); }
.v2 .panel-ink a:not(.btn) { color: var(--on-dark); text-decoration-color: var(--bronze-light); }
.panel-ink .btn--primary { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink-0); }
.panel-ink .btn--primary:hover { background: #FFF; border-color: #FFF; color: var(--ink-0); }
.panel-ink .btn--secondary { color: var(--on-dark); border-color: rgba(242,239,232,.45); }
.panel-ink .btn--secondary:hover { background: rgba(242,239,232,.08); color: #FFF; }

/* Колоннада — знак ВКСЭ, увеличенный до архитектуры. Штрих не масштабируется. */
.colonnade { width: 100%; height: auto; overflow: visible; }
.colonnade * { vector-effect: non-scaling-stroke; }
.colonnade .col { fill: none; stroke: var(--bronze); stroke-width: 1; }
.colonnade .base { stroke: var(--bronze); stroke-width: 1.5; }
.colonnade .hair { stroke: var(--line-strong); stroke-width: 1; }
.colonnade .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease) forwards; }
.colonnade .draw:nth-child(2) { animation-delay: .1s } .colonnade .draw:nth-child(3) { animation-delay: .2s } .colonnade .draw:nth-child(4) { animation-delay: .3s }
.colonnade .draw:nth-child(5) { animation-delay: .4s } .colonnade .draw:nth-child(6) { animation-delay: .5s } .colonnade .draw:nth-child(7) { animation-delay: .6s }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ───────────── 3. ШАПКА, МЕНЮ, ПОДВАЛ (все страницы) ───────────── */

.skip { position: absolute; left: var(--s-3); top: -60px; z-index: 100; padding: var(--s-2) var(--s-3); background: var(--ink-0); color: #fff; font-family: var(--font-ui); font-size: var(--t-small); text-decoration: none; }
.skip:focus { top: var(--s-3); }

/* Header */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur), box-shadow var(--dur); }
.hdr.is-scrolled { border-bottom-color: var(--line); }
.hdr__in { display: flex; align-items: center; gap: var(--s-6); min-height: 80px; }
@media (min-width: 1500px) { .hdr__in { gap: var(--s-8); } }
.logo { display: flex; align-items: center; gap: var(--s-4); text-decoration: none; color: var(--ink-0); flex: none; }
.logo__mark { width: 40px; height: 40px; flex: none; }
.logo__t { line-height: 1.05; }
.logo__t b { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.375rem; letter-spacing: .08em; }
/* Расшифровка знака под аббревиатурой — только там, где для неё есть
   место. Строка набрана капителью и занимает 252px: на ноутбуке 1366
   вместе с меню из четырёх пунктов, телефоном и кнопкой она выдавливала
   правый край шапки за экран. С 1500px место есть, ниже остаётся знак и
   «ВКСЭ» — полное имя стоит в подвале и в <title>. */
.logo__t span { display: none; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-top: 3px; }
@media (min-width: 1500px) { .logo__t span { display: block; } }

.nav { display: none; margin: 0; padding: 0; }
@media (min-width: 1024px) { .nav { display: flex; align-items: center; gap: var(--s-2); margin-left: var(--s-6); } }
.nav > li { list-style: none; position: relative; }
.nav__btn, .nav__link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 var(--s-3); background: none; border: 0; text-decoration: none; color: var(--ink-0); font-family: var(--font-ui); font-size: var(--t-ui); font-weight: 500; cursor: pointer; white-space: nowrap; border-bottom: 1px solid transparent; transition: color var(--dur), border-color var(--dur); }
.nav__btn:hover, .nav__link:hover, .nav__btn[aria-expanded="true"] { color: var(--bronze-ink); border-bottom-color: var(--bronze); }
.nav__btn.is-active, .nav__link.is-active { color: var(--bronze-ink); border-bottom-color: var(--bronze); }
.nav__btn svg { transition: transform var(--dur) var(--ease); opacity: .6; }
.nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__menu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 300px; margin: 0; padding: var(--s-3) 0; background: var(--paper-0); border: 1px solid var(--line); box-shadow: var(--shadow-menu); display: none; list-style: none; }
.nav > li.is-open .nav__menu { display: block; }
/* Мостик через зазор между пунктом и выпавшим меню.
   Меню отстоит от кнопки на 10 px, и без этой полосы курсор,
   идущий вниз к пунктам, выходит за пределы <li>: срабатывает
   mouseleave, и меню закрывается раньше, чем до него доберутся.
   Полоса невидима, живёт только у раскрытого пункта и не мешает
   ничему за пределами шапки. */
.nav > li.is-open::after { content: ""; position: absolute; left: 0; top: 100%; width: 340px; max-width: 100vw; height: 12px; }
.nav__menu a { display: flex; justify-content: space-between; gap: var(--s-6); align-items: baseline; padding: 11px var(--s-6); text-decoration: none; color: var(--ink-0); font-family: var(--font-serif); font-size: 1.125rem; }
.nav__menu a:hover, .nav__menu a.is-active { background: var(--paper-1); color: var(--bronze-ink); }
.nav__menu a .note { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--ink-3); letter-spacing: .06em; }
.nav__menu .sep { height: 1px; background: var(--line); margin: var(--s-2) var(--s-6); }
.nav__menu .lbl { padding: var(--s-3) var(--s-6) var(--s-1); }

.hdr__cta { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
.hdr__phone { display: none; font-family: var(--font-mono); font-size: .875rem; letter-spacing: .04em; color: var(--ink-0); text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; }
.hdr__phone:hover { color: var(--bronze-ink); border-bottom-color: var(--bronze); }
@media (min-width: 1200px) { .hdr__phone { display: inline-flex; } }
.hdr__consult { display: none; }
@media (min-width: 560px) { .hdr__consult { display: inline-flex; } }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); background: var(--paper-0); color: var(--ink-0); cursor: pointer; text-decoration: none; transition: border-color var(--dur), color var(--dur); }
.icon-btn:hover { border-color: var(--ink-0); }
@media (min-width: 1024px) { .burger { display: none; } }
@media (min-width: 560px) { .hdr__call { display: none; } }

/* Мобильное меню — лист справа */
.sheet { position: fixed; inset: 0; z-index: 60; background: var(--paper-0); overflow-y: auto; transform: translateX(100%); transition: transform 280ms var(--ease); visibility: hidden; }
.sheet.is-open { transform: none; visibility: visible; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; min-height: 80px; border-bottom: 1px solid var(--line); }
.sheet__act { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); padding: var(--s-5) 0; }
.sheet__grp { padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.sheet__grp .cap { display: block; margin-bottom: var(--s-3); }
.sheet__grp ul { list-style: none; margin: 0; padding: 0; }
.sheet__grp a { display: flex; align-items: center; min-height: 48px; text-decoration: none; color: var(--ink-0); font-family: var(--font-serif); font-size: 1.375rem; }
.sheet__grp a.is-hub { font-weight: 500; }
.sheet__grp a.is-active { color: var(--bronze-ink); }
.sheet__lbl { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--line); }
.sheet__lbl .cap { display: block; margin-bottom: var(--s-1); color: var(--ink-2); }
.sheet__foot { padding: var(--s-6) 0 var(--s-24); border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: var(--t-small); color: var(--ink-2); }
.sheet__foot a { color: var(--ink-0); }

/* Подвал */
.ftr { padding: var(--s-16) 0 var(--s-8); font-family: var(--font-ui); font-size: var(--t-small); color: var(--ink-1); border-top: 1px solid var(--line); background: var(--paper-0); }
.ftr__grid { display: grid; gap: var(--s-8); }
@media (min-width: 640px) { .ftr__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .ftr__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Шесть колонок: знак и пять групп — те же, что в меню, плюс контакты. */
@media (min-width: 1100px) { .ftr__grid { grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr)); gap: var(--s-6); } }
.ftr .cap { display: block; margin-bottom: var(--s-4); }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr a { text-decoration: none; color: var(--ink-1); }
.ftr a:hover { color: var(--bronze-ink); text-decoration: underline; }
.ftr .about { margin: var(--s-5) 0 0; max-width: 32ch; color: var(--ink-2); font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.45; }
.ftr .contacts a { color: var(--ink-0); }
.ftr .contacts .tel { font-family: var(--font-serif); font-size: 1.25rem; font-feature-settings: "lnum"; }
.ftr__bot { margin-top: var(--s-12); padding-top: var(--s-6); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); font-size: var(--t-caption); color: var(--ink-2); }

/* Нижняя панель действий и плавающие мессенджеры */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: var(--s-2); padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
@media (min-width: 768px) { .mbar { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 72px; } }
.mbar .btn { min-height: 46px; padding: 0 var(--s-3); font-size: var(--t-small); }
/* 320 px: три кнопки в строку помещаются только с меньшими полями —
   иначе «Консультация» уходила за правый край экрана. */
@media (max-width: 359px) { .mbar { gap: 6px; padding-left: var(--s-2); padding-right: var(--s-2); } .mbar .btn { padding: 0 var(--s-2); font-size: var(--t-caption); } }
.float { position: fixed; right: var(--s-6); bottom: var(--s-6); z-index: 30; display: none; flex-direction: column; gap: var(--s-2); }
@media (min-width: 768px) { .float { display: flex; } }
.float a { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: var(--paper-0); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-0); box-shadow: var(--shadow-menu); transition: border-color var(--dur), color var(--dur); }
.float a:hover { border-color: var(--ink-0); color: var(--bronze-ink); }

/* ───────────── 4. ГЛАВНАЯ ───────────── */

/* Первый экран */
.hero { position: relative; overflow: hidden; }
.hero__in { display: grid; gap: var(--s-12); padding-top: clamp(32px, 5vw, 64px); padding-bottom: clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 992px) { .hero__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); min-height: min(calc(100vh - 80px), 860px); } }
.hero h1 { margin-top: var(--s-5); max-width: 11em; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--bronze-ink); }
.hero .lead { margin-top: var(--s-6); max-width: 26em; }
.hero__cta { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-4); }
.hero__art { position: relative; }
@media (max-width: 991px) { .hero__art { max-width: 420px; } }
.hero__art .cap { position: absolute; left: 0; bottom: -28px; color: var(--ink-3); }

/* Полоса фактов под первым экраном */
.facts { border-top: 1px solid var(--line-ink); border-bottom: 1px solid var(--line); }
.facts__in { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .facts__in { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .facts__in { grid-template-columns: repeat(4, 1fr); } }
.fact { padding: var(--s-6) var(--s-6) var(--s-6) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .fact:nth-child(odd) { border-right: 1px solid var(--line); padding-left: 0; } .fact:nth-child(n+2) { padding-left: var(--s-6); } }
@media (min-width: 1000px) { .fact { border-bottom: 0; border-right: 1px solid var(--line); padding: var(--s-8) var(--s-6); } .fact:first-child { padding-left: 0; } .fact:last-child { border-right: 0; padding-right: 0; } }
.fact .cap { display: block; margin-bottom: var(--s-3); }
.fact p { font-size: 1.125rem; line-height: 1.35; color: var(--ink-1); }
.fact a { font-weight: 500; }

/* Обращение — лист */
.appeal { background: var(--paper-1); }
.appeal__in { display: grid; gap: var(--s-12); padding-top: var(--chapter); padding-bottom: var(--chapter); }
@media (min-width: 992px) { .appeal__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 112px); align-items: start; } }
@media (min-width: 992px) { .appeal__text { position: sticky; top: 112px; } }
.appeal__text h2 { margin-top: var(--s-5); }
.appeal__text .lead { margin-top: var(--s-6); }
.appeal__alt { margin-top: var(--s-10); padding-top: var(--s-6); border-top: 1px solid var(--line-ink); }
.appeal__alt .cap { display: block; margin-bottom: var(--s-3); }
.appeal__alt a.tel { font-family: var(--font-serif); font-size: 2rem; text-decoration: none; letter-spacing: .01em; font-feature-settings: "lnum"; }
.appeal__alt .msgs { margin-top: var(--s-3); font-family: var(--font-ui); font-size: var(--t-ui); color: var(--ink-2); }
.sheet-doc { background: var(--paper-0); box-shadow: var(--shadow-sheet); padding: clamp(28px, 4vw, 56px); position: relative; }
.sheet-doc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--bronze); }
.sheet-doc__head { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line-ink); margin-bottom: var(--s-8); }
.sheet-doc__head .to { font-family: var(--font-serif); font-size: 1.125rem; color: var(--ink-1); }
.sheet-doc__head .cap { color: var(--ink-2); }
.sheet-doc .row2 { display: grid; gap: var(--s-6); }
@media (min-width: 600px) { .sheet-doc .row2 { grid-template-columns: 1fr 1fr; gap: var(--s-8); } .sheet-doc .row2 .field + .field { margin-top: 0; } }
.sheet-doc .row2 + .field { margin-top: var(--s-6); }
.sheet-doc .submit { margin-top: var(--s-10); display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; justify-content: space-between; }
.sheet-doc .legal { font-family: var(--font-ui); font-size: var(--t-caption); color: var(--ink-2); max-width: 32em; line-height: 1.5; }

/* Глава I: входы */
.entries { display: grid; gap: var(--s-12); }
@media (min-width: 900px) { .entries { grid-template-columns: 1fr 1fr; gap: var(--s-16); } }
.entry h3 { margin-bottom: var(--s-5); }
.entry .cap { display: block; margin-bottom: var(--s-3); }
.review-box { padding: var(--s-8); background: var(--paper-1); border-top: 2px solid var(--bronze); }
.review-box p { margin-top: var(--s-4); color: var(--ink-1); }
.review-box .btn { margin-top: var(--s-6); }
.toc-wrap { margin-top: var(--chapter); }
.toc-wrap h3 { margin-bottom: var(--s-8); }
.toc-wrap .toc-foot { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-ink); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); align-items: baseline; }

/* Глава II: рецензия */
.review { display: grid; gap: var(--s-10); }
@media (min-width: 992px) { .review { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-16); align-items: start; } }

/* Глава III: цена */
.price { display: grid; gap: var(--s-10); }
@media (min-width: 992px) { .price { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-16); align-items: start; } }
.terms { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line-ink); }
.terms .cap { display: block; margin-bottom: var(--s-3); }
.terms p { color: var(--ink-1); font-size: 1.0625rem; line-height: 1.45; }

/* Глава IV: порядок */
.need { margin-top: var(--s-16); padding-top: var(--s-8); border-top: 1px solid var(--line-ink); display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .need { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-16); align-items: center; } }
.need .cap { display: block; margin-bottom: var(--s-3); }
.need p { color: var(--ink-1); }
@media (min-width: 900px) { .need .btn { justify-self: end; } }

/* Глава V: реестр стандартов */
.stdreg { margin-top: var(--s-16); }
.stdreg__head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-4); align-items: baseline; margin-bottom: var(--s-6); }
.stdreg__head h3 { margin-top: var(--s-2); }
.stdreg .reg td:nth-child(2) { width: 100%; }
@media (max-width: 640px) { .stdreg .reg th:last-child, .stdreg .reg td:last-child { display: none; } }

/* Адвокатам и юристам */
.pros { display: grid; gap: var(--s-8); padding: clamp(32px, 5vw, 64px) 0; border-top: 1px solid var(--line-ink); border-bottom: 1px solid var(--line-ink); }
@media (min-width: 900px) { .pros { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-16); align-items: center; } }
.pros h2 { margin-top: var(--s-4); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); }
.pros .lead { margin-top: var(--s-5); font-size: 1.25rem; }
.pros .stack .btn { width: 100%; }
.chapter--flush { padding-top: 0; padding-bottom: 0; }

/* Глава VII: вопросы */
.faqwrap { display: grid; gap: var(--s-8); }
@media (min-width: 992px) { .faqwrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-16); align-items: start; } }
.faqwrap .lead { margin-top: var(--s-6); }
.faqwrap .btn { margin-top: var(--s-8); }

/* Финал */
.final { padding: clamp(72px, 10vw, 144px) 0; position: relative; overflow: hidden; }
.final__in { display: grid; gap: var(--s-12); align-items: center; }
@media (min-width: 992px) { .final__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-20); } }
.final h2 { margin-top: var(--s-5); max-width: 13em; }
.final .lead { margin-top: var(--s-6); }
.final .rowi { margin-top: var(--s-10); }
.final .alt { margin-top: var(--s-6); font-family: var(--font-ui); font-size: var(--t-ui); color: var(--on-dark-2); }
.final__art { max-width: 360px; }
@media (min-width: 992px) { .final__art { justify-self: end; } }
.final .colonnade .col, .final .colonnade .base { stroke: var(--bronze-light); }
.final .colonnade .hair { stroke: rgba(242,239,232,.18); }

/* ───────────── 5. ВНУТРЕННИЕ СТРАНИЦЫ ─────────────
   Слой компонентов внутренних страниц из принятого эталона
   (VisualReferences/prototype/vnutrennie.css, ДИЗАЙНЕР, принято
   владельцем; правила — DESIGN.md §4 и §12). Имена классов не
   переименовывались.

   Слой переезжает частями, вместе со своим шаблоном: класс здесь
   объявлен без ограничителя и действует на всех страницах сразу, а
   совпадение имени с разметкой тёмной эпохи перекрасило бы ещё не
   переехавшую страницу. Поэтому перед каждым переносом имена
   проверяются по разметке сайта.

   Переехало: с «Посадочной» — крошки, шапка страницы, колонка
   документа, врезка, полоса призыва, широкие положения, реестр на
   узком экране; со «Списком и реестром» и «Видом экспертизы» —
   строка списка и плиты сопоставления; со «Страницей для чтения» и
   «Стандартом» — метка состояния, реквизиты статьи, фильтры-рубрики,
   рельс оглавления, текст нормативного документа и текст образца.
   Ждут своих записей `people`/`person` и `calc`.

   Имя `badge` встречается в админке заявок, но она живёт на
   собственных стилях и `v2.css` не подключает — проверено перед
   переносом. ───────────── */

/* ───────── Хлебные крошки ───────── */
.crumbs { padding-top: var(--s-6); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.v2 main .crumbs a { color: var(--ink-2); text-decoration: none; }
.v2 main .crumbs a:hover { color: var(--bronze-ink); }
.crumbs .sep { color: var(--bronze); margin: 0 10px; }

/* ───────── Шапка страницы ─────────
   Надзаголовок капителью, H1, лид и столбец реквизитов справа:
   тот же приём, что полоса фактов на главной, но привязан к
   странице. Линия снизу — главная линейка листа. */
.phead { padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--line-ink); }
.phead__in { display: grid; gap: var(--s-10); }
/* min-width: 0 — иначе колонка сетки не может стать уже самого
   длинного слова («Профессиональный»), и заголовок раздвигает
   страницу на телефоне. Перенос по слогам сам по себе ширину
   колонки не уменьшает. */
.phead__in > * { min-width: 0; }
@media (min-width: 992px) { .phead__in { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(48px, 7vw, 112px); align-items: end; } }
/* Длинное слово в заголовке («Профессиональный», «Технико-
   криминалистическая») на телефоне шире экрана и раздвигает
   страницу. Переносим по слогам — язык страницы объявлен, — а в
   крайнем случае разрываем слово, но не ломаем вёрстку. */
.phead h1 { margin-top: var(--s-5); overflow-wrap: break-word; }
@media (max-width: 480px) { .phead h1, .phead .lead { hyphens: auto; } }
.phead h1 em { font-style: italic; font-weight: 400; color: var(--bronze-ink); }
.phead .lead { margin-top: var(--s-6); max-width: 34em; }
.phead__meta { display: grid; gap: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
@media (min-width: 992px) { .phead__meta { padding-top: 0; padding-left: var(--s-8); border-top: 0; border-left: 1px solid var(--line); } }
.phead__meta .cap { display: block; margin-bottom: var(--s-2); }
.phead__meta p { font-size: 1.0625rem; line-height: 1.35; color: var(--ink-1); }
.phead__badges { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ───────── Колонка документа: проза главы, перечень ─────────
   Заголовки внутри текста мельче страничных. Мера строки — 38em. */
.doc { max-width: 38em; }
.doc > * + * { margin-top: var(--s-5); }
.doc h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; margin-top: var(--s-12); }
.doc h3 { font-size: 1.375rem; margin-top: var(--s-8); }
.doc p { line-height: 1.6; }
.doc ul, .doc ol { padding-left: 0; list-style: none; }
.doc li { position: relative; padding-left: var(--s-6); line-height: 1.6; }
.doc li + li { margin-top: var(--s-3); }
.doc ul li::before { content: "—"; position: absolute; left: 0; color: var(--bronze); }
.doc ol { counter-reset: docol; }
.doc ol li { counter-increment: docol; }
.doc ol li::before { content: counter(docol) "."; position: absolute; left: 0; font-feature-settings: "lnum"; color: var(--bronze-ink); }

/* Врезка: «Важно», «Что важно понимать», ограничение нормы */
.callout { border-left: 2px solid var(--line-strong); background: var(--paper-1); padding: var(--s-5) var(--s-6); }
.callout .cap { display: block; margin-bottom: var(--s-2); color: var(--ink-2); }
.callout p { color: var(--ink-1); font-size: 1.0625rem; line-height: 1.5; }
.callout--bronze { border-left-color: var(--bronze); background: var(--bronze-tint); }
.callout--bronze .cap { color: var(--bronze-ink); }
/* Врезка-предупреждение нормативного текста («ошибка», «нельзя»). */
.callout--danger { border-left-color: var(--danger); background: var(--danger-tint); }
.callout--danger .cap { color: var(--danger); }

/* Врезка на подложке главы (chapter--tint) совпала бы с фоном —
   лист остаётся белым, линейка держит границу. */
.chapter--tint .callout { background: var(--paper-0); }
.chapter--tint .callout--bronze { background: var(--bronze-tint); }
/* Перечень внутри врезки уже имеет её отступы. */
.callout .doc { max-width: none; }

/* ───────── Полоса призыва в середине и в конце страницы ───────── */
.cta { display: grid; gap: var(--s-6); padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--line-ink); border-bottom: 1px solid var(--line-ink); }
@media (min-width: 900px) { .cta { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-16); align-items: center; } }
.cta .cap { display: block; margin-bottom: var(--s-3); }
.cta h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.cta p { margin-top: var(--s-4); color: var(--ink-1); }
/* У полосы призыва посадочной заголовка нет: предложение идёт сразу
   под капителью, и двойной отступ там не нужен. */
.cta .cap + .lead { margin-top: 0; }
@media (min-width: 900px) { .cta .stack { justify-self: end; width: 100%; max-width: 320px; } }
.cta .stack .btn { width: 100%; }

/* ───────── Пронумерованный список без пояснений ─────────
   Компонент «положения» (.clauses) раскладывает строку в три
   колонки: номер, заголовок, пояснение. Там, где пояснения нет —
   типовые вопросы эксперту, перечень органов, — третья колонка
   пустует, а текст зажимается в узкую среднюю. Вариант ниже
   отдаёт тексту всю строку. */
@media (min-width: 900px) {
  .clauses--wide li { grid-template-columns: 72px minmax(0, 1fr); }
}
.clauses--wide h3 { font-weight: 400; line-height: 1.3; }

/* Выделенное положение — бронзовая подложка строки реестра
   (.reg tr.is-hl того же набора), а не рамка тёмной эпохи. */
.clauses li.is-mark { background: var(--bronze-tint); padding-left: var(--s-3); padding-right: var(--s-3); }
.clauses li.is-mark .n { color: var(--bronze-ink); }
/* Выделенная строка указателя — тот же приём, что у выделенного
   положения и строки реестра: бронзовая подложка, не рамка. */
.index li.is-mark a { background: var(--bronze-tint); padding-left: var(--s-3); padding-right: var(--s-3); }


/* ───────── Реестр из трёх колонок на узком экране ─────────
   Таблица на телефоне в три колонки не помещается: код набран
   моноширинным и не переносится, и строка задаёт странице ширину
   больше экрана. До 560px строка реестра разворачивается в блок.
   Модификатор, а не правило для всех .reg: таблица цен на главной
   принята владельцем в нынешнем виде и остаётся двухколоночной. */
@media (max-width: 560px) {
  .reg--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .reg--stack tr { display: block; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
  .reg--stack tr.is-hl { background: var(--bronze-tint); padding-left: var(--s-3); padding-right: var(--s-3); }
  .reg--stack td { display: block; border: 0; padding: 0; }
  .reg--stack td:last-child { text-align: left; margin-top: var(--s-2); }
  .reg--stack .code { display: block; margin-bottom: var(--s-2); white-space: normal; }
}

/* Колонка содержания главы: между заголовком главы и её частями
   отступ держит сам .ch__head, а части (проза, положения, реестр,
   врезка, указатель) разделяются шагом листа. В прототипах эти
   отступы проставлены руками у каждого блока — на движке их ставит
   одно правило. */
.ch__body > * + * { margin-top: var(--s-10); }
/* Положения — список <ol>: правило `.v2 ol` гасит ему верхний отступ, и
   абзац перед положениями (вводный, «до») прилипал к верхней линейке. */
.ch__body > * + .clauses { margin-top: var(--s-10); }
.ch__body > .ch__head + * { margin-top: 0; }


/* ───────── Перенесено с шаблонами «Список и реестр» и «Вид экспертизы»
   (Задача 008): строка списка с описанием и реквизитами, две плиты
   сопоставления. Дословно из принятого слоя, без переименования. ───────── */

/* ───────── Список-реестр с описанием ─────────
   Лента статей, образцы документов, реестр стандартов, указатель
   справок: строка листа, а не плитка. Правая колонка — реквизиты
   (дата, рубрика, код, статус). */
.list { border-top: 1px solid var(--line-ink); }
.list__row { border-bottom: 1px solid var(--line); }
.v2 main .list__row > a { display: grid; gap: var(--s-2); padding: var(--s-6) 0; text-decoration: none; color: var(--ink-0); }
@media (min-width: 900px) { .v2 main .list__row > a { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--s-10); align-items: baseline; } }
.list__row h3 { font-size: 1.375rem; line-height: 1.25; transition: color var(--dur); }
.list__row p { margin-top: var(--s-3); color: var(--ink-2); font-size: 1.0625rem; line-height: 1.45; }
.list__row:hover h3 { color: var(--bronze-ink); }
.list__side { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; font-family: var(--font-ui); font-size: var(--t-small); color: var(--ink-2); }
@media (min-width: 900px) { .list__side { justify-content: flex-end; text-align: right; } }
.list__side .code { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .06em; color: var(--bronze-ink); }
.list__side .date { font-variant-numeric: tabular-nums; }
.list__grp { margin-top: var(--s-12); }
.list__grp:first-child { margin-top: 0; }
.list__grp > .cap { display: block; padding-bottom: var(--s-2); margin-bottom: var(--s-4); border-bottom: 1px solid var(--line-ink); }

/* ───────── Две колонки сопоставления ─────────
   «Даёт / не даёт», «ВКСЭ — это / это не»: две плоскости листа
   без карточек, разделённые толщиной верхней линейки. */
.cols2 { display: grid; gap: var(--s-8); }
@media (min-width: 900px) { .cols2 { grid-template-columns: 1fr 1fr; gap: var(--s-12); } }
.col-box { border-top: 2px solid var(--line-ink); padding-top: var(--s-5); }
.col-box--soft { border-top-color: var(--line-strong); }
.col-box .cap { display: block; margin-bottom: var(--s-4); }
.col-box ul { list-style: none; margin: 0; padding: 0; }
.col-box li { position: relative; padding-left: var(--s-6); line-height: 1.5; color: var(--ink-1); }
.col-box li + li { margin-top: var(--s-4); }
.col-box li::before { content: "—"; position: absolute; left: 0; color: var(--bronze); }
.col-box--soft li::before { color: var(--ink-3); }
/* Плита-предупреждение («типичные ошибки»): бронзовая линейка сверху
   вместо бронзовой рамки слева, как у карточки тёмной эпохи. */
.col-box--mark { border-top-color: var(--bronze); }
/* Три плиты в строку — «эксперту / юристу / суду»: та же сетка
   сопоставления, но на три колонки. */
@media (min-width: 900px) { .cols2--three { grid-template-columns: repeat(3, 1fr); } }
/* В плите бывает не список, а абзац. */
.col-box p { color: var(--ink-1); line-height: 1.5; }
/* Абзац и пункты (или два абзаца) в одной плите — тот же шаг, что между пунктами. */
.col-box p + p, .col-box p + ul { margin-top: var(--s-4); }




/* ───────── Перенесено с шаблонами «Страница для чтения» и «Стандарт»
   (Задача 009): метка состояния, реквизиты статьи, фильтры-рубрики,
   рельс оглавления с текстом нормативного документа, текст образца.
   Дословно из принятого слоя, без переименования. ───────── */

/* ───────── Метка состояния ───────── */
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.badge--active { border-color: var(--bronze); color: var(--bronze-ink); }
.badge--draft { background: var(--paper-2); }


/* ───────── Фильтры-ссылки ─────────
   Рубрики статей, направления корпуса: те же чипы, что «способ
   ответа» в форме, но ссылки, а не переключатели. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.v2 main .chip-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--font-ui); font-size: var(--t-small); color: var(--ink-1); text-decoration: none; transition: border-color var(--dur), background-color var(--dur), color var(--dur); }
.v2 main .chip-link:hover { border-color: var(--ink-1); color: var(--ink-0); }
.v2 main .chip-link.is-on { background: var(--ink-0); border-color: var(--ink-0); color: var(--on-dark); }

/* ───────── Рельс оглавления ─────────
   Стандарт Коллегии: длинный нормативный текст, оглавление
   прилипает и подсвечивает раздел. То же место, что римская
   цифра главы на главной, — левое поле. */
.rail-layout { display: grid; gap: var(--s-10); }
/* min-width: 0 — колонка сетки иначе не может стать уже самого узкого
   неразрывного содержимого (строка образца в моноширинном блоке,
   код стандарта), и на 320 px страница выезжает за экран на ширину
   полосы прокрутки. Тот же приём, что у .phead__in. */
.rail-layout > * { min-width: 0; }

@media (min-width: 1000px) { .rail-layout { grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-16); align-items: start; } }
.rail { align-self: start; }
@media (min-width: 1000px) { .rail { position: sticky; top: 112px; max-height: calc(100vh - 160px); overflow-y: auto; } }
.rail > .cap { display: block; padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-ink); margin-bottom: var(--s-3); }
.rail ul { list-style: none; margin: 0; padding: 0; }
/* На телефоне оглавление стоит перед текстом и в полный рост
   отодвигало бы сам стандарт на экран вниз: держим его в коробке
   на пять-шесть строк с прокруткой. */
@media (max-width: 999px) {
  .rail ul { max-height: 240px; overflow-y: auto; border-bottom: 1px solid var(--line); }
}
.v2 main .rail a { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: var(--s-2); padding: 7px var(--s-3); font-family: var(--font-ui); font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); text-decoration: none; border-left: 2px solid transparent; align-items: baseline; transition: color var(--dur) ease, border-color var(--dur) ease, background-color var(--dur) ease; }
.v2 main .rail a:hover { color: var(--ink-0); background: var(--paper-1); }
.v2 main .rail a.is-active { color: var(--bronze-ink); border-left-color: var(--bronze); background: var(--bronze-tint); }
.rail .n { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--ink-3); }
.rail a.is-active .n { color: var(--bronze-ink); }
.rail__l2 { padding-left: var(--s-6) !important; }

/* Текст стандарта: нумерованные разделы нормативного документа */
.norm { max-width: 42em; }
.norm h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1.15; margin-top: var(--s-16); padding-top: var(--s-8); border-top: 1px solid var(--line); scroll-margin-top: 112px; }
.norm h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.norm h2 .n { display: block; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .14em; color: var(--bronze-ink); margin-bottom: var(--s-3); }
.norm h3 { font-size: 1.375rem; margin-top: var(--s-10); scroll-margin-top: 112px; }
.norm h3 .n { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--bronze-ink); margin-right: var(--s-3); }
.norm p { margin-top: var(--s-4); line-height: 1.6; }
.norm ul, .norm ol { list-style: none; margin-top: var(--s-4); padding-left: 0; }
.norm li { position: relative; padding-left: var(--s-6); line-height: 1.6; }
.norm li + li { margin-top: var(--s-2); }
.norm ul li::before { content: "—"; position: absolute; left: 0; color: var(--bronze); }
.norm .check li::before { content: ""; position: absolute; left: 0; top: .45em; width: 12px; height: 12px; border: 1px solid var(--line-strong); }
.norm .callout { margin-top: var(--s-6); }
/* h4 нормативного текста: в эталоне такого уровня нет, а в стандартах
   Коллегии он встречается (пункт внутри подраздела). */
.norm h4 { font-size: 1.125rem; margin-top: var(--s-6); font-family: var(--font-ui); font-weight: 600; }


/* ───────── Текст образца документа ─────────
   Моноширинный, с сохранением переносов: в процессуальном
   документе отступы и пустые строки несут смысл. */
.pre-doc {
  margin: 0;
  padding: var(--s-6);
  background: var(--paper-0);
  border: 1px solid var(--line);
  border-left: 2px solid var(--bronze);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-1);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 620px;
  overflow-y: auto;
}


/* ───────── Перенесено с шаблоном «Каталог и карточка человека»
   (Задача 010). Дословно из принятого слоя. ───────── */

/* ───────── Люди ─────────
   Каталог эксперта и юриста строкой реестра: монограмма, имя,
   направление, реквизиты. Фотографий у Коллегии пока нет —
   монограмма честнее силуэта-заглушки. */
.people { border-top: 1px solid var(--line-ink); }
.person { border-bottom: 1px solid var(--line); }
.v2 main .person > a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5) 0; text-decoration: none; color: var(--ink-0); align-items: start; }
@media (min-width: 900px) { .v2 main .person > a { grid-template-columns: 48px minmax(0, 5fr) minmax(0, 4fr) minmax(0, 2fr); gap: var(--s-6); align-items: baseline; } }
.person__mono { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-strong); font-family: var(--font-serif); font-size: 1.125rem; color: var(--bronze-ink); }
.person__name { font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.2; }
.person:hover .person__name { color: var(--bronze-ink); }
.person__status { display: block; margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.person__spec { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.4; }
.person__side { font-family: var(--font-ui); font-size: var(--t-small); color: var(--ink-2); }
@media (min-width: 900px) { .person__side { text-align: right; } }
/* Ниже 900 px у строки четыре части, а колонки всего две: без этого
   правила описание и реквизиты попадали в узкую колонку монограммы и
   накладывались друг на друга (дефект найден ВЕБТЕСТЕРОМ на приёмке
   переезда страниц Коллегии). Под именем они идут одной колонкой. */
@media (max-width: 899px) {
  .person__spec, .person__side { grid-column: 2; }
  .person__spec { margin-top: var(--s-2); }
  .person__side { margin-top: var(--s-3); }
}



/* ───────── Перенесено с шаблоном «Инструмент» (Задача 011).
   Дословно из принятого слоя. ───────── */

/* ───────── Инструмент посетителя ─────────
   Калькулятор: поля слева, результат листом справа. Цифры
   табличные — разряды не прыгают при вводе. */
.calc { display: grid; gap: var(--s-8); }
@media (min-width: 700px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-12); align-items: start; } }
.calc__out { background: var(--paper-1); padding: var(--s-6); border-top: 2px solid var(--bronze); }
.calc__row { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-family: var(--font-ui); font-size: var(--t-small); color: var(--ink-1); }
.calc__row span:last-child { font-variant-numeric: tabular-nums; font-family: var(--font-serif); font-size: 1.0625rem; color: var(--ink-0); }
.calc__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-top: var(--s-5); }
.calc__total .cap { color: var(--ink-2); }
.calc__total b { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-feature-settings: "lnum", "tnum"; }
/* Строка выбора вопроса в конструкторе: флажок на поле, текст колонкой. */
.kv-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s-4); align-items: start; cursor: pointer; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.kv-row input { margin-top: 5px; accent-color: var(--bronze); }
.kv-row span { color: var(--ink-1); font-size: 1.0625rem; line-height: 1.45; }
.kv-row:hover span { color: var(--ink-0); }
/* Шкала хода работы: линия листа, заполненная бронзой. */
.progress { height: 2px; background: var(--line); }
.progress span { display: block; height: 100%; background: var(--bronze); }