/* =====================================================================
   ЭМОС. Общий лист стилей сайта.
   Собран из site/BRAND.md версия 1.0. Подключается и главной,
   и страницей по экспертизе подписи. Источник значений один, этот файл.
   ===================================================================== */

/* =====================================================================
   0. ШРИФТЫ. Локально, внешних запросов со страниц нет ни одного.
   Подключено 7 сентября 2026, до этого работал системный стек.

   Три набора на гарнитуру, и latin-ext здесь ОБЯЗАТЕЛЕН.
   ⚠️ Знак рубля U+20BD не входит ни в latin, ни в cyrillic, он живёт
   в latin-ext. Без этого файла ₽ на всех ценах рисуется системным
   шрифтом, и это ровно тот дефект, который в проекте EI Tempo прожил
   на демо неделю. Цена это главное число страницы, её знак валюты
   не может быть набран чужой гарнитурой.

   ⚠️ Bitter и Commissioner ВАРИАТИВНЫЕ. Веса объявляются диапазоном,
   по одному нельзя. При объявлении по отдельности на каждый вес придёт
   один и тот же файл, и 500 с 600 отрисуются как 400, молча.
   IBM Plex Mono статический, у него ровно 400, и вес там набирается
   разрядкой, а не насыщенностью.

   Лицензии всех трёх лежат рядом, OFL 1.1, перехостить разрешено.
   ===================================================================== */

/* --- Bitter, заголовки и числа. Вариативный, 400 до 700 --- */
@font-face {
  font-family: "Bitter";
  src: url("assets/fonts/bitter-cyrillic.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Bitter";
  src: url("assets/fonts/bitter-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bitter";
  src: url("assets/fonts/bitter-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Commissioner, бегущий текст. Вариативный, 400 до 700 --- */
@font-face {
  font-family: "Commissioner";
  src: url("assets/fonts/commissioner-cyrillic.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Commissioner";
  src: url("assets/fonts/commissioner-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Commissioner";
  src: url("assets/fonts/commissioner-latin-ext.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- IBM Plex Mono, служебные подписи. Статический, ровно 400 --- */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/plexmono-cyrillic.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/plexmono-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/plexmono-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================================================
   1. ТОКЕНЫ. Единственный источник значений.
   Блок скопирован из site/BRAND.md раздел 2 целиком, без правок.
   Ручных hex вне :root на странице нет.
   ===================================================================== */
:root {
  /* --- Грунты и поверхности --- */
  --paper:        #F1EDE5; /* фон страницы, тёплый тон писчей бумаги */
  --sheet:        #FCFBF8; /* лист контента, таблица, карточка, поле формы */
  --sheet-2:      #E7E2D7; /* только полоса-подложка, шапка таблицы, строка итога */

  /* --- Текст --- */
  --ink:          #1A1815; /* основной текст, заголовки, цифры, единица измерения */
  --ink-2:        #57524A; /* оговорки, подписи к иллюстрациям, сноски */

  /* --- Линии. На них держится вся структура вместо теней --- */
  --rule:         #8F8674; /* границы листов и таблиц, вертикальная линейка полей */
  --rule-strong:  #6E665A; /* подчёркивание шапки таблицы, линии на sheet-2, вторичная кнопка */

  /* --- Отметка эксперта. Единственная работа красного --- */
  --mark:         #A81F14; /* стрелка на подписи, различающийся признак, текст ошибки формы */
  --mark-ink:     #FFF7F4; /* цифра внутри красного кружка номера признака */
  --mark-weak:    #F7E2DD; /* парная подсветка строки признака, только вместе с левой линией mark */

  /* --- Процедурный синий. Цвет шариковой ручки --- */
  --proc:         #14417F; /* ссылки, ссылки на нормы, кольцо фокуса */

  /* --- Совпадение --- */
  --agree:        #1C5637; /* совпадающий признак, «это установить можно», успех формы */

  /* --- Тёмная панель отказа. Единственный инвертированный блок сайта --- */
  --stop:         #191713; /* грунт панели */
  --stop-paper:   #EDE8DE; /* основной текст на панели, он же заливка кнопки на панели */
  --stop-muted:   #A9A296; /* пояснения на панели */
  --rule-on-stop: #6B6459; /* линии внутри панели */
  --mark-on-stop: #F0897E; /* отметка внутри панели, обычный mark тут не проходит */
  --proc-on-stop: #8FB4E8; /* ссылка и кольцо фокуса внутри панели */
  --agree-on-stop:#7FBF97; /* «что делать вместо этого», успешный исход внутри панели */

  /* --- Семейства --- */
  --font-display: "Bitter", Georgia, "Times New Roman", serif;
  --font-text:    "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* --- Шкала кегля. Шаг 1,25, ни одного значения на глаз --- */
  --text-xs:      .8rem;    /* только моно-подписи и номера признаков */
  --text-sm:      .9rem;    /* оговорка под числом, сноска, подпись к иллюстрации */
  --text-base:    1rem;     /* абзац */
  --text-lg:      1.125rem; /* лид под H1, важный абзац */
  --text-xl:      1.4rem;   /* H3 */
  --text-2xl:     1.75rem;  /* H2 на узкой ширине, крупная цифра в таблице цен */
  --text-3xl:     clamp(1.6rem, 4vw, 2.4rem);   /* H2 */
  --text-4xl:     clamp(2.05rem, 5vw, 3.2rem);  /* H1, самый крупный элемент страницы */
  --text-num:     clamp(2.2rem, 4.6vw, 3rem);   /* цифра цены и срока в первом экране */

  /* --- Интерлиньяж и трекинг --- */
  --leading-tight:  1.12; /* H1 и крупные числа */
  --leading-normal: 1.55; /* абзацы */
  --leading-loose:  1.65; /* длинные объяснения про образцы и про копии */
  --tracking-normal: 0;
  --tracking-wide:   .02em; /* только моно-подписи, только положительный */

  /* --- Шаг. База 4px, магических чисел нет --- */
  --space-1:  .25rem;
  --space-2:  .5rem;
  --space-3:  .75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Контейнеры --- */
  --container:       1120px; /* не 1200, иначе правая колонка разворота расползается */
  --container-text:  640px;  /* строка абзаца, примерно 65-75 знаков по-русски */
  --gutter:          clamp(1rem, 4vw, 2rem);
  --margin-rail:     var(--space-8); /* левое поле документа под норму права */

  /* --- Радиус. Словарь из двух значений --- */
  --radius-0:  0;   /* листы, панели, таблицы, изображения, тёмная панель */
  --radius-sm: 3px; /* кнопка, поле ввода, кружок номера признака */

  /* --- Тень. Ровно два случая, оба названы --- */
  --shadow-sheet: 0 1px 0 rgba(26, 24, 21, .10); /* лист лежит на столе, без размытия */
  --shadow-lift:  0 4px 14px rgba(26, 24, 21, .12); /* только подсказка и модальное окно */

  /* --- Движение --- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* --- Слои --- */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-tooltip: 300;
  --z-modal: 400;
}

/* =====================================================================
   2. БАЗА. Обязательная под русский текст, BRAND.md раздел 2.
   ===================================================================== */
h1, h2, h3, p, a, button, li, td, th { overflow-wrap: break-word; }
.grid > *, .flex > * { min-width: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--font-text); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: 0;
  letter-spacing: var(--tracking-normal);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
p  { margin: 0; }
strong, b { font-weight: 600; } /* вес из словаря системы, не браузерный bolder */
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--proc); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--proc);
  outline-offset: 2px;
}

/* Табличные цифры обязательны везде, где цифры стоят колонкой */
.num, table td, table th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-2);
}

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.measure { max-width: var(--container-text); }

/* Отбивки между секциями намеренно разные по роли раздела,
   ровный ритм читается как сгенерированная страница */
.sect { padding-block: var(--space-16); scroll-margin-top: var(--space-16); }
.sect--tight { padding-block: var(--space-12); }
.sect--wide  { padding-block: var(--space-24); }

.sect__head { margin-bottom: var(--space-8); }
.sect__head p { color: var(--ink-2); margin-top: var(--space-3); }

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius-0);
}

/* =====================================================================
   3. КНОПКИ. Красной заливки в системе нет, красный это отметка и ошибка.
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.2;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--ink); color: var(--sheet); }
.btn--primary:hover { background: var(--rule-strong); }
.btn--primary:active { background: var(--ink); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
  font-variant-numeric: tabular-nums;
}
.btn--ghost:hover { border-color: var(--ink); background: var(--sheet); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* =====================================================================
   4. ШАПКА
   ===================================================================== */
.hdr {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.hdr__in {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 64px;
  padding-block: var(--space-3);
}
.brand { text-decoration: none; color: var(--ink); line-height: 1.1; }
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
}
.brand__kind { display: block; margin-top: var(--space-1); }
.hdr__nav { display: flex; gap: var(--space-6); margin-left: auto; }
.hdr__nav a { color: var(--ink); text-decoration: none; font-size: var(--text-sm); }
.hdr__nav a:hover { color: var(--proc); text-decoration: underline; }
.hdr__tel {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hdr__tel:hover { color: var(--proc); }

/* =====================================================================
   5.1. ПЕРВЫЙ ЭКРАН. Деление 7 на 5, шесть на шесть в проекте запрещено.
   ===================================================================== */
.hero { padding-block: var(--space-16) var(--space-24); }
.hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  grid-template-areas:
    "title proof"
    "lead  proof"
    "nums  proof"
    "acts  proof";
  column-gap: var(--space-12);
  align-items: start;
}
.hero__title { grid-area: title; max-width: 15ch; }
.hero__lead  { grid-area: lead; font-size: var(--text-lg); color: var(--ink-2); margin-top: var(--space-4); max-width: 40ch; }
.hero__nums  { grid-area: nums; margin-top: var(--space-8); }
.hero__acts  { grid-area: acts; margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__proof { grid-area: proof; }

.nums { display: grid; grid-template-columns: 1fr 1fr; }
.nums__cell { padding-right: var(--space-6); }
.nums__cell + .nums__cell {
  border-left: 1px solid var(--rule);
  padding-left: var(--space-6);
  padding-right: 0;
}
.nums__val {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-num);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Единица измерения набирается цветом --ink, не --mark. Паспорт 5.1.
   Красный на сайте означает отметку эксперта и ошибку формы, и слова
   «за одну подпись» цветом ошибки читались бы как звёздочка мелким шрифтом */
.nums__unit {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
}
/* Ровно одна строка оговорки на число. Вторая превращает честность в мямленье */
.nums__note {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-2);
  max-width: 30ch;
}

/* Правая колонка, состояние A. Иллюстрационная таблица признаков
   заблокирована до ответа эксперта, поэтому здесь состав заключения */
.proof { padding: var(--space-6); }
.proof__norm { display: block; margin-bottom: var(--space-3); color: var(--proc); }
.proof__title { font-size: var(--text-xl); }
.proof__list { margin-top: var(--space-4); }
.proof__list li {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
  font-size: var(--text-sm);
}
.proof__list li:first-child { border-top: 0; padding-top: 0; }
.proof__foot { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--ink-2); }

/* =====================================================================
   5.2. КАРТОЧКА НАПРАВЛЕНИЯ. Иллюстраций внутри нет ни у одной,
   рисовать трещину, границу участка и автомобиль значит выдумывать предмет.
   ===================================================================== */
.dirs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.dir {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.dir:hover, .dir:focus-within { border-color: var(--rule-strong); }
.dir--wide { grid-column: 1 / -1; }
.dir__name { font-size: var(--text-xl); }
.dir--wide .dir__name { font-size: var(--text-2xl); }
.dir__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}
.dir__unit { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.dir__term { font-size: var(--text-sm); color: var(--ink-2); }
.dir__what { font-size: var(--text-sm); margin-top: auto; }
.dir__link { font-size: var(--text-sm); }

/* =====================================================================
   5.9. ТЁМНАЯ ПАНЕЛЬ. Единственный инвертированный блок на всём сайте.
   Внутри работают только роли на -on-stop, обычные ниже порога.
   ===================================================================== */
.stop { background: var(--stop); color: var(--stop-paper); }
.stop__in {
  padding-block: var(--space-16);
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-12);
  align-items: start;
}
.stop h2 { color: var(--stop-paper); max-width: 22ch; }
.stop__text { color: var(--stop-muted); margin-top: var(--space-4); }
.stop__aside {
  border-left: 1px solid var(--rule-on-stop);
  padding-left: var(--space-6);
}
.stop__label { color: var(--stop-muted); display: block; margin-bottom: var(--space-3); }
.stop__aside p { color: var(--stop-paper); }
.stop__aside p.stop__do,
.stop__do { color: var(--agree-on-stop); margin-top: var(--space-4); font-size: var(--text-sm); }
/* Кнопка на панели собирается наоборот, заливка stop-paper с текстом stop.
   Кнопка цвета ink на этом грунте даёт 1,01 и исчезает */
.btn--on-stop { background: var(--stop-paper); color: var(--stop); margin-top: var(--space-6); }
.btn--on-stop:hover { background: var(--stop-muted); }
.btn--on-stop:focus-visible { outline-color: var(--proc-on-stop); }
.stop a:not(.btn) { color: var(--proc-on-stop); }

/* =====================================================================
   5.11. РАЗВОРОТ «ОРИГИНАЛ И КОПИЯ». Деление 7 на 5, линия между.
   ===================================================================== */
.spread {
  display: grid;
  grid-template-columns: 7fr 5fr;
  margin-top: var(--space-8);
}
.spread__col { padding: var(--space-6); }
.spread__col + .spread__col { border-left: 1px solid var(--rule); }
/* Подпись стороны обязательна и на узкой ширине, без неё сличение теряет смысл */
.spread__side { display: block; margin-bottom: var(--space-3); color: var(--ink-2); }
.spread__col h3 { margin-bottom: var(--space-4); }
.can, .cant { display: block; font-weight: 600; font-size: var(--text-sm); }
.can  { color: var(--agree); }
.cant { color: var(--mark); }

/* =====================================================================
   5.4. ВХОД ПО СИТУАЦИИ. Строка, а не карточка. Человек узнаёт свою
   историю в первой строке. Три одинаковые карточки с иконками здесь
   запрещены, заголовок идёт ситуацией, а не названием услуги.
   ===================================================================== */
.entries { border-top: 1px solid var(--rule); }
.entry {
  display: grid;
  grid-template-columns: var(--space-32) 1fr;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4);
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid transparent;
  align-items: start;
  text-decoration: none;
  color: var(--ink);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-left-color var(--dur-fast) var(--ease-out);
}
/* Подсветка всегда идёт вместе с левой линией. Край mark-weak к paper
   даёт 1,07, и без линии подсветки просто не видно. Паспорт 5.4 */
.entry:hover, .entry:focus-visible {
  background: var(--mark-weak);
  border-left-color: var(--mark);
}
.entry__rail { padding-top: var(--space-1); }
.entry h3 { margin-bottom: var(--space-2); }
.entry p { color: var(--ink-2); font-size: var(--text-sm); max-width: 60ch; }
.entry__go { display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm); color: var(--proc); }

/* =====================================================================
   5.5. ШАГ ПРОЦЕССА и строки-входы. Слева поле, справа содержание.
   ===================================================================== */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  grid-template-columns: var(--space-32) 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.row__rail { padding-top: var(--space-1); }
.row h3 { margin-bottom: var(--space-2); }
.row p { color: var(--ink-2); max-width: 68ch; }

/* =====================================================================
   5.12. НОРМА ПРАВА НА ПОЛЯХ. На полях стоит только норма права,
   декоративной нумерации разделов вида 03 из 12 в системе нет.
   ===================================================================== */
.rail {
  display: grid;
  grid-template-columns: var(--space-32) 1fr;
  gap: var(--space-6);
}
.rail__note { color: var(--proc); text-align: right; padding-top: var(--space-1); }
.rail__body { border-left: 1px solid var(--rule); padding-left: var(--space-6); }

/* =====================================================================
   5.3. ЦЕНОВОЙ ЛИСТ. Не сетка тарифов, а одна разлинованная таблица.
   ===================================================================== */
.tablewrap { overflow-x: auto; margin-top: var(--space-8); }
table { width: 100%; border-collapse: collapse; background: var(--sheet); border: 1px solid var(--rule); }
caption { text-align: left; font-size: var(--text-sm); color: var(--ink-2); padding-bottom: var(--space-3); }
th, td { text-align: left; padding: var(--space-4); vertical-align: top; font-size: var(--text-sm); }
/* Шапка на sheet-2 подчёркивается rule-strong, обычная rule там даёт 2,79 */
thead th {
  background: var(--sheet-2);
  border-bottom: 2px solid var(--rule-strong);
  font-family: var(--font-text);
  font-weight: 600;
  white-space: nowrap;
}
tbody tr + tr td { border-top: 1px solid var(--rule); }
.cell-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); }
.cell-price { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); white-space: nowrap; }
.cell-unit { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink); }

/* Пересчёт. Человек получает вилку, а не одну красивую цифру */
.calc { margin-top: var(--space-8); padding: var(--space-6); display: grid; gap: var(--space-4); }
.calc__ctl { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.calc__ctl label { font-size: var(--text-sm); }
.stepper { display: inline-flex; align-items: center; gap: var(--space-2); }
.stepper button {
  width: 40px; height: 40px;
  font-size: var(--text-lg);
  font-family: var(--font-text);
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.stepper button:hover { border-color: var(--rule-strong); }
.stepper input {
  width: 72px; height: 40px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
}
.calc__out {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid var(--rule);
  display: inline-block;
  padding-bottom: var(--space-2);
  transition: border-color var(--dur-fast) var(--ease-out);
}
/* Подчёркивание на 120ms уходит в mark и возвращается.
   Счётчик набегающих цифр это театр, он делает вид, что число вычисляется */
.calc__out.is-changed { border-color: var(--mark); }
.calc__unit { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink); }
.calc__note { font-size: var(--text-sm); color: var(--ink-2); max-width: 60ch; }

/* =====================================================================
   РАБОЧАЯ ПОМЕТКА. Место, где нет данных заказчицы.
   В боевую сборку такие блоки не идут, правило BRAND.md жёсткое,
   заглушка запрещена, блока нет совсем, пока нет данных.
   На прототипе они видны намеренно, чтобы было понятно, чего не хватает.
   ===================================================================== */
.pending {
  border: 1px dashed var(--rule-strong);
  background: var(--sheet);
  padding: var(--space-6);
  opacity: .86;
}
.pending__label,
.pending .pending__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--mark);
  margin-bottom: var(--space-3);
}
.pending__list li {
  font-size: var(--text-sm);
  color: var(--ink-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--rule);
}
.pending__list li:first-child { border-top: 0; }
.pending p { font-size: var(--text-sm); color: var(--ink-2); }
.pending--inline { padding: var(--space-3) var(--space-4); }
.pending--inline .pending__label { margin-bottom: var(--space-1); }

/* =====================================================================
   5.7. ФОРМА ЗАЯВКИ. Полей ровно три, выпадающего списка видов
   экспертизы нет, человек не знает, как называется его случай.
   ===================================================================== */
.form { padding: var(--space-8); display: grid; gap: var(--space-6); }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; }
.field .hint { font-size: var(--text-sm); color: var(--ink-2); }
.field input, .field textarea {
  font-family: var(--font-text);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  width: 100%;
}
.field input:hover, .field textarea:hover { border-color: var(--rule-strong); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--rule-strong); }
.field textarea { min-height: 168px; resize: vertical; line-height: var(--leading-loose); }
/* Ошибка это текст плюс граница. Красный работает второй раз,
   поэтому одной границы мало, текст обязателен всегда */
.field.is-error input, .field.is-error textarea { border-color: var(--mark); }
.field__err { font-size: var(--text-sm); color: var(--mark); }
.form__ok { font-size: var(--text-sm); color: var(--agree); font-weight: 600; }
.form__consent { font-size: var(--text-sm); color: var(--ink-2); display: flex; gap: var(--space-3); align-items: flex-start; }
.form__consent input { width: 18px; height: 18px; margin-top: 3px; flex: none; }

/* =====================================================================
   КОНТАКТЫ И ПОДВАЛ
   ===================================================================== */
.contacts { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: start; }
.contacts dl { margin: 0; }
.contacts dt { font-size: var(--text-sm); color: var(--ink-2); margin-top: var(--space-4); }
.contacts dt:first-child { margin-top: 0; }
.contacts dd { margin: var(--space-1) 0 0; font-size: var(--text-base); }
.contacts dd a { font-variant-numeric: tabular-nums; }
.mapslot { border: 1px solid var(--rule); background: var(--sheet); padding: var(--space-4); }
.mapslot svg { display: block; width: 100%; height: 220px; }

.foot { border-top: 1px solid var(--rule); background: var(--paper); padding-block: var(--space-12); }
.foot__grid { display: grid; grid-template-columns: 5fr 4fr 3fr; gap: var(--space-8); }
.foot p, .foot li { font-size: var(--text-sm); color: var(--ink-2); }
.foot .req { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.9; color: var(--ink-2); }
.foot__nav li { padding: var(--space-1) 0; }

/* =====================================================================
   МОБИЛЬНАЯ ВЁРСТКА. Проверено на 1440, 1280, 1024, 768, 390 и 375.
   ===================================================================== */
@media (max-width: 960px) {
  .hdr__nav { display: none; }
  .dirs { grid-template-columns: 1fr 1fr; }
  .dir--wide { grid-column: 1 / -1; }
  .contacts { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* Порядок первого экрана задан жёстко, доказательство поднимается выше цены.
     Иначе первый экран превращается в ценовой баннер */
  .hero__grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "proof"
      "nums"
      "acts"
      "lead";
    row-gap: 0;
  }
  .hero__title { max-width: none; }
  .hero__proof { margin-top: var(--space-8); }
  .hero__lead { margin-top: var(--space-8); }
  .nums { grid-template-columns: 1fr; }
  .nums__cell { padding-right: 0; padding-bottom: var(--space-6); }
  .nums__cell + .nums__cell {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: var(--space-6);
    padding-bottom: 0;
  }
  .nums__note { max-width: none; }
  .hero__acts .btn { width: 100%; }

  .dirs { grid-template-columns: 1fr; }
  .stop__in { grid-template-columns: 1fr; gap: var(--space-8); }
  .stop__aside { border-left: 0; border-top: 1px solid var(--rule-on-stop); padding-left: 0; padding-top: var(--space-6); }

  /* Разворот превращается в два листа друг под другом,
     обязательно с сохранением подписи, какая сторона какая */
  .spread { grid-template-columns: 1fr; }
  .spread__col + .spread__col { border-left: 0; border-top: 1px solid var(--rule); }

  /* Поле уходит, норма встаёт строкой над заголовком блока */
  .rail, .row, .entry { grid-template-columns: 1fr; gap: var(--space-3); }
  .rail__note { text-align: left; }
  .rail__body { border-left: 0; padding-left: 0; }
  .row { gap: var(--space-2); padding: var(--space-6) 0; }

  .form { padding: var(--space-6); }
  .foot__grid { grid-template-columns: 1fr; }
  .sect, .sect--tight, .sect--wide { padding-block: var(--space-12); }
}

@media (max-width: 400px) {
  .hero { padding-block: var(--space-8) var(--space-12); }
  .proof { padding: var(--space-4); }
  .dir { padding: var(--space-4); }
  .pending { padding: var(--space-4); }
  th, td { padding: var(--space-3); }
}

/* При загрузке и при прокрутке не двигается ничего.
   Разрешённых движений три, все объясняют состояние */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}