/* Hallmark · genre: modern-minimal · design-system: DESIGN-SITE.md (system-managed)
 * macrostructure: Catalogue (/ceny/ — визуальный индекс всего парка с ценами)
 *               + Split Studio (карточка машины — кадр слева, панель заказа справа)
 * nav: N9 edge-aligned · footer: Ft4 dense colophon
 * enrichment: Tier C generated still + Tier A CSS-шкала ставок · signature: выноска с числом
 * motion: один приём — прорисовка засечек шкалы (animation-timeline: view())
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 *
 * ⚠ Ротация nav намеренно не выполняется: шапка у сайта одна и совпадает
 * с главной (N9 из hero.css). Разные шапки на страницах одного сайта —
 * не разнообразие, а поломка навигации.
 *
 * Внутренние страницы: /ceny/ (полный прайс) и карточка машины.
 * Правило зоны: tokens.css и hero.css только читаются, ни одна их строка здесь
 * не переопределяется — новые классы, новые имена.
 *
 * Макросетка страницы — рейка слева, контент справа: то же левое выравнивание
 * и та же асимметрия, что на первом экране. Внутри блоков данных — плотная
 * приборная упаковка (таблицы без воздуха между строк, хайрлайн вместо рамок).
 */

/* ───────────────────────────── Каркас листа ────────────────────────────── */
.sheet {
  width: 100%; max-width: 1720px; margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Раздел: заголовок стоит на рейке слева, данные справа. Ниже 1100 рейка
   ложится сверху — колонка в 220px на планшете съедает половину таблицы. */
.block {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0 clamp(var(--space-lg), 3vw, var(--space-3xl));
  padding-block: clamp(var(--space-xl), 4vw, var(--space-3xl));
  border-top: var(--hair) solid var(--edge);
}
.block__head { position: relative; }
.block__title {
  margin: 0;
  font-family: var(--font-display); font-variation-settings: "SHRP" var(--shrp);
  font-weight: 700; font-size: clamp(1.25rem, 1.1vw + .9rem, 1.75rem);
  line-height: 1.05; letter-spacing: -.025em; text-transform: uppercase;
}
.block__note {
  margin: var(--space-sm) 0 0; max-width: 30ch;
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  line-height: 1.6; color: var(--label);
}
.block__body { min-width: 0; }

/* ── Точечно: раздел «Считаем по звонку» на /ceny/ ──────────────────────────
   Заказчик 31.08.2026 про этот блок: «Не красиво выглядит». Два дефекта
   ловятся здесь, третий (ширина плашки) — ниже, у .pending.

   1. Заголовок «СЧИТАЕМ ПО ЗВОНКУ» в рейке 240 px ломался как «СЧИТАЕМ ПО /
      ЗВОНКУ» — предлог повисал в конце строки. text-wrap: balance выравнивает
      строки по длине и уводит «ПО» вниз, к своему слову. Где свойство не
      поддержано, заголовок просто переносится по-старому — вёрстка не зависит
      от него ничем.
   2. Подпись под заголовком набрана моношрифтом 12 px цветом лейбла и в пять
      строк читалась как технический вывод, а не как текст (замечание оттуда же).
      Шрифт и кегль не трогаем — это язык всех разделов сайта, — поднимаем
      только тон: --text-2 вместо --label, 8,0:1 к фону вместо 5,2:1.

   3. Плашка занимала всю колонку раздела (1036 px на 1440), а последний абзац
      внутри — 615 (у него своя мера 62ch): справа оставалась пустая треть
      светлого фона, и блок читался обрывающимся. Теперь фон кончается там же,
      где текст, а перечень позиций идёт в одну меру с абзацем.

   ⚠ Правила намеренно привязаны к id одного раздела: у остальных .block__head
   и .pending на сайте вид не меняется. Проверено замером — общий `.pending`
   без этой привязки утягивал и плашку внутри формы на /uslugi/vyvoz-snega/
   (909 → 774 px), а её заказчик не трогал. Откатить — удалить этот блок. */
#po-zvonku .block__title { text-wrap: balance; }
#po-zvonku .block__note { color: var(--text-2); }
#po-zvonku .pending { max-width: 78ch; }
@media (min-width: 1100px) {
  /* заголовок держится у верхнего края экрана, пока идёт его таблица —
     в прайсе на 21 строку иначе теряешь, какой раздел читаешь */
  .block__head { position: sticky; top: var(--space-lg); align-self: start; }
}
@media (max-width: 1099px) {
  .block { grid-template-columns: minmax(0, 1fr); }
  .block__head { margin-bottom: var(--space-lg); }
  .block__note { max-width: 60ch; }
}

/* ──────────────────────────── Хлебные крошки ───────────────────────────── */
.crumbs {
  border-bottom: var(--hair) solid var(--edge);
  font-family: var(--font-mono); font-size: var(--text-mono-label);
}
.crumbs__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-xs);
  list-style: none; margin: 0; padding: 0;
}
.crumbs__list li { display: flex; align-items: center; gap: var(--space-xs); }
.crumbs__list li + li::before { content: "/"; color: var(--edge-strong); }
/* область нажатия 44px набрана вертикальными полями, а не высотой строки:
   строка крошек не должна раздуваться в полосу */
.crumbs a, .crumbs__here {
  display: inline-block; padding: 14px 2px; min-height: 44px;
  color: var(--label); text-decoration: none; letter-spacing: .03em;
}
.crumbs a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--edge-strong); }
.crumbs__here { color: var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover { color: var(--text); text-decoration-color: var(--chrome); }
}

/* ─────────────────────────── Шапка страницы ────────────────────────────── */
.top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(var(--space-lg), 3vw, var(--space-3xl));
  align-items: end;
  padding-block: clamp(var(--space-xl), 4vw, var(--space-3xl));
}
.top__kicker {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: .04em; color: var(--label);
}
.top__title {
  margin: 0 0 var(--space-md); max-width: 20ch;
  font-family: var(--font-display); font-variation-settings: "SHRP" var(--shrp);
  font-weight: 800; font-size: clamp(1.875rem, 2.6vw + 1rem, 3.25rem);
  line-height: 1.02; letter-spacing: -.035em; text-transform: uppercase;
  overflow-wrap: break-word;
}
/* Первый абзац — прямой ответ с числами. Он же то, что цитируют нейросети,
   поэтому стоит до всякой подводки и не прячется ни за какой клик. */
.top__answer { margin: 0; max-width: 62ch; font-size: var(--text-lead); line-height: 1.55; color: var(--text-2); }
.top__answer b { color: var(--text); font-weight: 600; }
@media (max-width: 899px) {
  .top { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .top__title { max-width: 16ch; }
}

/* Ключевое число страницы, набранное как размер на чертеже: полка, засечка,
   моноширинная подпись. Тот же приём, что у выносок на кадре. */
.headline-rate {
  border-top: 2px solid var(--chrome);
  padding-top: var(--space-sm);
}
.headline-rate__key {
  display: block; font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-2);
}
.headline-rate__val {
  display: block; margin-top: var(--space-2xs);
  font-family: var(--font-display); font-variation-settings: "SHRP" var(--shrp);
  font-weight: 700; font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
  letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums;
}
.headline-rate__unit { font-size: 1rem; color: var(--text-2); font-weight: 500; letter-spacing: 0; }
.headline-rate__note {
  display: block; margin-top: var(--space-2xs);
  font-family: var(--font-mono); font-size: var(--text-mono-label); color: var(--label);
}

/* ──────────────── Правила расчёта — основная надпись листа ─────────────── */
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--hair) solid var(--edge); background: var(--surface); }
.rules__cell { padding: var(--space-md) var(--space-lg); border-left: var(--hair) solid var(--edge); min-width: 0; }
.rules__cell:first-child { border-left: 0; }
.rules__key {
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: .05em; text-transform: uppercase; color: var(--label);
}
.rules__val {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-display); font-variation-settings: "SHRP" var(--shrp);
  font-weight: 600; font-size: clamp(1rem, 1vw + .72rem, 1.25rem);
  color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.rules__note { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-mono-label); color: var(--text-2); letter-spacing: 0; }
@media (max-width: 1023px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules__cell:nth-child(odd) { border-left: 0; }
  .rules__cell:nth-child(n+3) { border-top: var(--hair) solid var(--edge); } }
@media (max-width: 559px) { .rules { grid-template-columns: minmax(0, 1fr); }
  .rules__cell { border-left: 0; border-top: var(--hair) solid var(--edge); }
  .rules__cell:first-child { border-top: 0; } }

/* ──────────────────────────── Таблицы прайса ───────────────────────────── */
.tbl-wrap { min-width: 0; }
/* Единственная таблица с четырьмя числовыми колонками прокручивается вбок
   на узких экранах — страница при этом не двигается. */
.tbl-wrap--scroll { overflow-x: auto; }
/* Подсказка о прокрутке — строкой НАД таблицей, а не тенью на кромке:
   фон контейнера с overflow едет вместе с содержимым, и градиент-намёк
   уползал бы за край вместе с ним. Видна только там, где прокрутка есть.
   Раньше строка стояла под таблицей — на 375 человек добирался до неё через
   полтора экрана, уже успев прочитать обрезанные посреди цифр «3 6 /час»
   и решить, что вёрстка сломана. */
.tbl-hint { display: none; }
@media (max-width: 639px) {
  .tbl-hint {
    display: block; margin: 0 0 var(--space-xs);
    font-family: var(--font-mono); font-size: var(--text-mono-label); color: var(--label);
  }
  .tbl-hint::before { content: "→ "; color: var(--chrome-dim); }
  /* Подпись таблицы едет вбок вместе с содержимым и обрезается на полуслове
     («НДС 22% выделе…»). Прилипает к левому краю области и держит ширину
     экрана: строка про НДС читается целиком в любой позиции прокрутки. */
  .tbl-wrap--scroll .tbl caption {
    position: sticky; left: 0;
    width: calc(100vw - var(--gutter) * 2);
  }
}
/* Маску-градиент на правой кромке пробовал и убрал: она гасит крайнюю колонку
   и после того, как таблицу доскроллили до конца, — то есть прячет сумму НДС
   ровно в тот момент, когда человек до неё добрался. Подсказки сверху хватает. */
.tbl-wrap--scroll:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
@media (max-width: 639px) { .tbl-wrap--scroll .tbl { min-width: 540px; } }
/* table-layout: fixed — не косметика. С автоматическим макетом длинные
   названия машин и числа с nowrap раздували таблицу шире контейнера:
   на 320 она уходила до 380px и колонка «Смена 8 ч» обрезалась (замерено
   в браузере: tbl [16…380] при clientWidth 320). Фиксированный макет
   не даёт таблице выйти за колонку ни при каком содержимом. */
.tbl {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-variant-numeric: tabular-nums;
}
/* Доли колонок по типам таблиц. Первая колонка забирает остаток. */
.tbl--3 th:nth-child(2), .tbl--3 td:nth-child(2) { width: 26%; }
.tbl--3 th:nth-child(3), .tbl--3 td:nth-child(3) { width: 22%; }
.tbl--2 th:nth-child(2), .tbl--2 td:nth-child(2) { width: 58%; }
.tbl--4 th:nth-child(2), .tbl--4 td:nth-child(2) { width: 24%; }
.tbl--4 th:nth-child(3), .tbl--4 td:nth-child(3) { width: 20%; }
.tbl--4 th:nth-child(4), .tbl--4 td:nth-child(4) { width: 20%; }
/* На 320 колонка «Смена 8 ч» шириной 26% (75px) была уже, чем само число
   «22 000 ₽» в моноширинном (около 90px). Число с неразрывными пробелами
   переноситься не может и выходило за ячейку, съедая правое поле страницы.
   Поэтому на узких экранах числовые колонки шире, а моно чуть сжат трекингом. */
@media (max-width: 639px) {
  .tbl--3 th:nth-child(2), .tbl--3 td:nth-child(2) { width: 30%; }
  .tbl--3 th:nth-child(3), .tbl--3 td:nth-child(3) { width: 30%; }
  .tbl__num, .tbl__num-2 { letter-spacing: -.03em; }
  /* длинные слова в служебной колонке переносим по слогам,
     иначе «оплачиваемых» шире своей ячейки на 19px (замер на 320) */
  .tbl td, .tbl th { overflow-wrap: anywhere; hyphens: auto; }
  .tbl--4 th:nth-child(2), .tbl--4 td:nth-child(2) { width: 26%; }
  .tbl--4 th:nth-child(3), .tbl--4 td:nth-child(3) { width: 22%; }
  .tbl--4 th:nth-child(4), .tbl--4 td:nth-child(4) { width: 22%; }
}
.tbl caption {
  text-align: left; padding-bottom: var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  line-height: 1.6; color: var(--label);
}
.tbl th, .tbl td { text-align: left; padding: var(--space-sm) var(--space-md); vertical-align: baseline; }
.tbl thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--graphite);
  border-bottom: var(--hair) solid var(--edge-strong);
  font-family: var(--font-mono); font-weight: 400; font-size: var(--text-mono-label);
  letter-spacing: .04em; text-transform: uppercase; color: var(--label);
  white-space: nowrap;
}
.tbl tbody th, .tbl tbody td { border-bottom: var(--hair) solid var(--edge); }
.tbl tbody th { font-weight: 500; color: var(--text); padding-left: 0; }
.tbl__group th {
  padding: var(--space-lg) 0 var(--space-xs);
  border-bottom: var(--hair) solid var(--edge-strong);
  font-family: var(--font-mono); font-weight: 400; font-size: var(--text-mono-label);
  letter-spacing: .05em; text-transform: uppercase; color: var(--chrome-dim);
}
.tbl__num { white-space: nowrap; font-family: var(--font-mono); font-weight: 600; color: var(--chrome); }
.tbl__num-2 { white-space: nowrap; font-family: var(--font-mono); color: var(--text-2); }
/* Числа выровнены по правому краю своей колонки — как в спецификации,
   где разряды стоят под разрядами и суммы сравниваются взглядом. */
@media (min-width: 640px) {
  .tbl--3 th:nth-child(n+2), .tbl--3 td:nth-child(n+2),
  .tbl--4 th:nth-child(n+3), .tbl--4 td:nth-child(n+3) { text-align: right; }
}
.tbl__unit { font-family: var(--font-mono); font-size: var(--text-mono-label); color: var(--label); }
.tbl__from { font-family: var(--font-body); font-size: var(--text-mono-label); font-weight: 400; color: var(--label); }
.tbl tbody tr:not(.tbl__group) { transition: background-color var(--dur-instant) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tbl tbody tr:not(.tbl__group):hover { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) { .tbl tbody tr { transition: none; } }

/* Узкие экраны: колонки жмутся, но таблица остаётся таблицей — переверстать
   её в блоки значит потерять роли для скринридера и связь «строка ↔ цена». */
@media (max-width: 639px) {
  .tbl th, .tbl td { padding: var(--space-sm) var(--space-xs); }
  .tbl thead th { font-size: var(--text-mono-label); white-space: normal; }
  .tbl tbody th { padding-left: 0; overflow-wrap: anywhere; hyphens: auto; }
  /* Само число остаётся неразрывным (₽ не должен отрываться от суммы),
     а единица уезжает на вторую строку — иначе ячейка требует ширины,
     которой на 320 нет. */
  .tbl__num, .tbl__num-2 { white-space: normal; }
  .tbl__num > .tbl__unit, .tbl__num-2 > .tbl__unit { display: block; }
}
@media (max-width: 359px) {
  .tbl th, .tbl td { padding: 10px 4px; }
}

/* Ссылка вглубь раздела: моно-строка над таблицей, не карточка и не кнопка */
.block__more { margin: 0 0 var(--space-lg); font-family: var(--font-mono); font-size: var(--text-mono-label); line-height: 1.7; color: var(--label); }
.block__more a { color: var(--text-2); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .block__more a:hover { color: var(--green-signal); } }

/* ──────── SIGNATURE листа цен · шкала ставок, как шкала прибора ─────────
   Не украшение: показывает, где машина стоит в диапазоне 2 500–7 000 ₽/час.
   Позиции засечек считаются из прайса при сборке, руками не ставятся. */
.scale { margin: 0 0 var(--space-xl); padding-top: var(--space-lg); }
.scale__bar { position: relative; height: 72px; border-bottom: var(--hair) solid var(--edge-strong); }
.scale__tick { position: absolute; bottom: 0; left: var(--p); width: var(--hair); height: 12px; background: var(--chrome-dim); }
.scale__tick--major { height: 26px; background: var(--chrome); width: 2px; }
/* Два уровня подписей: соседние отметки на 1440 стоят в 287px друг от друга,
   и на одной строке подписи наезжали (проверено на рендере). */
.scale__label {
  position: absolute; bottom: calc(30px + var(--lvl, 0) * 22px);
  left: var(--p); translate: var(--shift, -50%) 0;
  white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--text-mono-label); color: var(--text-2);
}
.scale__label b { color: var(--chrome); font-weight: 600; }
.scale__foot {
  display: flex; justify-content: space-between; gap: var(--space-md);
  margin-top: var(--space-xs);
  font-family: var(--font-mono); font-size: var(--text-mono-label); color: var(--label);
}
@media (max-width: 639px) { .scale { display: none; } }  /* на 320-639 засечки сливаются */

/* ─────────────────────── Позиции, которых нет в прайсе ─────────────────── */
/* Жёлтый по системе живёт ровно в двух местах: звонок и «без этого не посчитаем».
   Это второй случай — цены нет, и мы говорим об этом прямо, а не молчим. */
.pending { border-left: 2px solid var(--amber); padding: var(--space-md) 0 var(--space-md) var(--space-lg); background: var(--surface); }
.pending__title { margin: 0 0 var(--space-xs); font-size: var(--text-md); font-weight: 600; }
/* Маркер — короткая засечка, как отчерк на полях чертежа, а не браузерная точка */
.pending__list { list-style: none; margin: 0 0 var(--space-sm); padding: 0; color: var(--text-2); }
.pending__list li { margin-bottom: var(--space-2xs); padding-left: 1.4em; text-indent: -1.4em; }
.pending__list li::before { content: "— "; color: var(--chrome-dim); }
.pending__text { margin: 0; color: var(--text-2); max-width: 62ch; }
/* Телефон здесь — не «просто ссылка», а тот самый жёлтый звонок из системы.
   Без своего цвета браузер рисовал его синим (видно на рендере 1440):
   чужой цвет в палитре и контраст около 2:1 на графите. */
.pending__text a {
  color: var(--amber); white-space: nowrap;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) { .pending__text a:hover { color: var(--amber-hi); } }

/* ──────────────────────────── Вопросы и ответы ─────────────────────────── */
/* Никакого аккордеона: ответ, спрятанный за клик, для краулера не существует,
   а человеку на телефоне лишний тап не нужен. */
.qa { display: grid; gap: var(--space-xl); max-width: 78ch; }
.qa__item { border-top: var(--hair) solid var(--edge); padding-top: var(--space-md); }
.qa__q { margin: 0 0 var(--space-xs); font-size: var(--text-lead); font-weight: 600; line-height: 1.3; }
.qa__a { margin: 0; color: var(--text-2); line-height: 1.6; }
.qa__a + .qa__a { margin-top: var(--space-sm); }
.qa__a b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ───────────────────── Светлый остров — блок звонка ─────────────────────
   По DESIGN-SITE светлыми делаются ровно три места, где решается заявка.
   Здесь именно оно: человек дочитал прайс и звонит. */
.island {
  background: var(--light-surface); color: var(--light-text);
  border-top: 2px solid var(--chrome);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--space-lg); align-items: center;
  padding: clamp(var(--space-lg), 3vw, var(--space-2xl)) 0;
}
.island-wrap { background: var(--light-surface); }
.island__title {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display); font-variation-settings: "SHRP" var(--shrp);
  font-weight: 700; font-size: clamp(1.25rem, 1.4vw + .8rem, 1.875rem);
  letter-spacing: -.02em; text-transform: uppercase; line-height: 1.05;
}
.island__text { margin: 0; max-width: 54ch; color: color-mix(in oklch, var(--light-text) 82%, var(--light-surface)); }
.island__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
/* кнопки на светлом: тот же силуэт, что на графите, но кромка и заливка
   пересчитаны под белый фон — на нём прежние цвета теряют контраст.
   Звонок и здесь жёлтый: по системе жёлтый живёт ровно в двух местах,
   и одно из них — кнопка звонка. Разный цвет одного действия на разных
   экранах — это уже два действия в голове у человека. */
.btn--dark { background: var(--graphite); color: var(--text); border-color: var(--graphite); }
.btn--outline { background: none; color: var(--light-text); border-color: color-mix(in oklch, var(--light-text) 45%, var(--light-surface)); }
/* Тот же жёлтый, что в шапке, но с кромкой: на светлом фоне заливка без кромки
   растворяется по краю. Текст графитом по янтарю — 10.2:1. */
.btn--call-light { border-color: color-mix(in oklch, var(--amber) 62%, var(--light-text)); }
@media (hover: hover) and (pointer: fine) {
  .btn--dark:hover { background: var(--green-brand); border-color: var(--green-brand); }
  .btn--outline:hover { border-color: var(--light-text); background: color-mix(in oklch, var(--light-text) 8%, transparent); }
}
@media (max-width: 767px) {
  .island { grid-template-columns: minmax(0, 1fr); }
  .island__actions { flex-direction: column; align-items: stretch; }
  .island__actions .btn { width: 100%; }
}

/* ─────────────────────────────── Дисклеймер ────────────────────────────── */
.disclaimer {
  padding-block: var(--space-lg);
  border-top: var(--hair) solid var(--edge);
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  line-height: 1.7; color: var(--label); max-width: 86ch;
}
.disclaimer a { color: var(--text-2); text-underline-offset: 3px; }
.disclaimer a:hover { color: var(--text); }

/* ─────────────────────── Подвал — штамп в конце листа ──────────────────── */
.foot { border-top: var(--hair) solid var(--edge); background: var(--surface); margin-top: auto; }
/* Графы соразмерны содержимому, а не равны механически: первая держит
   название и описание, последние две — списки ссылок. Раньше все четыре были
   по 1fr, и графа «Разделы» с 14 пунктами тянулась на 706px при соседях
   в 100–180px — подвал читался как один столбец справа и пустое поле слева. */
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .85fr);
  gap: 0;
}
.foot__cell { padding: var(--space-lg); border-left: var(--hair) solid var(--edge); min-width: 0; }
.foot__cell:first-child { border-left: 0; padding-left: 0; }
.foot__cell:last-child { padding-right: 0; }
.foot__key {
  display: block; margin-bottom: var(--space-xs);
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  letter-spacing: .05em; text-transform: uppercase; color: var(--label);
}
.foot__val { margin: 0; color: var(--text-2); line-height: 1.6; }
.foot__val strong { color: var(--text); font-weight: 600; }
.foot__links { list-style: none; margin: 0; padding: 0; }
/* Замер: строки-ссылки стояли встык (зазор 0 при норме 8px) — на телефоне
   промах уводил в соседний раздел. 8px разводит области нажатия и заодно
   даёт списку воздух, которого раньше не было. */
.foot__links li + li { margin-top: 8px; }
/* Замер: телефон 131×38 и почта 145×38 при норме 44 — для пальца мало,
   а из подвала это единственный способ связаться. Ссылки разделов идут
   во всю ширину графы: кликается строка, а не одно слово. */
.foot__links a, .foot__val a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding-block: 6px;
  color: var(--text-2); text-decoration: none;
}
.foot__links a { display: flex; }
.foot__val a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .foot__links a:hover, .foot__val a:hover { color: var(--green-signal); }
}
.foot__val--addr { margin-top: var(--space-sm); }
.foot__legal {
  border-top: var(--hair) solid var(--edge);
  padding-block: var(--space-md);
  font-family: var(--font-mono); font-size: var(--text-mono-label); line-height: 1.7; color: var(--label);
}
.foot__note { margin: 0; }
/* Документы и служебные страницы — сноска под основной надписью, не раздел
   сайта. Разделитель рисуется точкой между пунктами, а не символом в тексте:
   скринридер читает список из четырёх ссылок, а не одну строку с точками. */
.foot__docs {
  list-style: none; margin: var(--space-xs) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; column-gap: var(--space-md);
}
.foot__docs li { display: flex; align-items: center; }
/* Разделитель ставится ПОСЛЕ пункта, а не перед следующим: при переносе строки
   точка остаётся в хвосте предыдущей строки, а не висит маркером в начале новой
   (замер на 768: со скобкой ::before вторая строка начиналась с «·»). */
.foot__docs li:not(:last-child)::after {
  content: "·"; margin-left: var(--space-md); color: var(--label);
}
/* На узком экране пункты встают столбцом — разделитель там лишний. */
@media (max-width: 559px) {
  .foot__docs { flex-direction: column; }
  .foot__docs li:not(:last-child)::after { content: none; }
}
/* То же, что в tpl.css: /ceny/ и /raschet/ собраны вручную и tpl.css не грузят,
   поэтому правовая строка подвала там оставалась браузерно-синей. */
.foot__legal a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-2);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--chrome-dim);
}
@media (hover: hover) and (pointer: fine) {
  .foot__legal a:hover { color: var(--green-signal); text-decoration-color: var(--green-signal); }
}
@media (max-width: 1023px) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__cell { padding: var(--space-md); }
  .foot__cell:nth-child(odd) { border-left: 0; padding-left: 0; }
  .foot__cell:nth-child(even) { padding-right: 0; }
  .foot__cell:nth-child(n+3) { border-top: var(--hair) solid var(--edge); }
}
@media (max-width: 559px) {
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__cell { border-left: 0; padding-inline: 0; border-top: var(--hair) solid var(--edge); }
  .foot__cell:first-child { border-top: 0; }
}

/* ═══════════════════════ Карточка машины ════════════════════════════════ */
.card-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
  padding-block: clamp(var(--space-lg), 3vw, var(--space-2xl));
  align-items: start;
}
@media (max-width: 1023px) { .card-top { grid-template-columns: minmax(0, 1fr); } }

/* Кадр с чертёжной выноской — тот же signature, что на первом экране.
   Классы .marks/.mark берутся из hero.css: приём один на весь сайт. */
.shot { position: relative; margin: 0; }
.shot__stage { position: relative; aspect-ratio: 1408 / 768; }
/* Оговорка про кадр: снимок один на три навески, и молчать об этом нельзя —
   цифра честно меняется на 3 750 ₽, а машина на снимке остаётся прежней. */
.shot__note {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-mono); font-size: var(--text-mono-label);
  line-height: 1.6; color: var(--label); max-width: 62ch;
}
.shot__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* У мобильного файла снизу добавлено поле листа (880×770 против 880×660
   картинки) — туда уходит подпись выноски. Пропорция коробки обязана
   совпадать с файлом, иначе проценты привязки уедут вместе с кадром. */
@media (max-width: 767px) { .shot__stage { aspect-ratio: 880 / 770; } }

/* Точки выносок — проценты внутри коробки кадра, поэтому держатся на любой
   ширине. Мобильный кроп другой, значит и проценты другие. */
/* Ставка — от заднего ковша, то есть от самой навески, за которую и платят.
   Подпись уходит вниз, на пол: по системе она не имеет права лечь на машину. */
.mark--hitch { --x: 21%; --y: 74%; --len: clamp(24px, 3.4vw, 48px); }

/* Машинист — от кабины ВВЕРХ, в тёмную стену студии. Раньше выноска росла
   вниз и подпись ложилась прямо на стрелу экскаватора (видно на рендере 1440),
   а по DESIGN-SITE линия обязана уводить подпись в свободное поле кадра.
   column-reverse ставит точку внизу, подпись сверху; блок закреплён нижним
   краем, поэтому точка остаётся ровно на кабине при любой ширине. */
.mark--crew2 {
  --x: 47%; --y: 39%; --len: clamp(28px, 4vw, 56px);
  left: auto; right: calc(100% - var(--x));
  top: auto; bottom: calc(100% - var(--y));
  flex-direction: column-reverse; align-items: flex-end; text-align: right;
}
.mark--crew2 .mark__dot { margin: 0 -3px -3px 0; }
@media (max-width: 767px) {
  /* Точка на заднем ковше пересчитана под кадр с полем: 500 из 770 = 65%. */
  .mark--hitch { --x: 13%; --y: 65%; --len: 22px; }
  .mark--crew2 { --x: 46%; --y: 22%; --len: 22px; }
  .mark__body { padding: var(--space-2xs) var(--space-xs) var(--space-xs); }
  .mark__val { font-size: var(--text-md); }
}
@media (max-width: 419px) { .mark--crew2 { display: none; } }  /* две подписи наезжают */

/* ── Выбор навески. Все три ставки лежат в HTML одновременно; переключатель
   меняет уже отрисованные значения, а не создаёт их (SITEMAP §4.3).
   Механика на :has() и :checked — без JS, поэтому работает и в curl-выдаче,
   и при отключённом JS. */
/* fieldset несёт свою рамку и поля по умолчанию — в системе рамок нет вообще,
   иерархию держит хайрлайн. Сбрасываем, иначе в панели появляется чужая
   браузерная рамка с вырезом под легендой (видно на рендере 1440). */
.hitch { border: 0; margin: 0; padding: 0; border-top: 2px solid var(--chrome); padding-top: var(--space-md); }
.hitch__legend { padding: 0; font-family: var(--font-mono); font-size: var(--text-mono-label); letter-spacing: .04em; text-transform: uppercase; color: var(--label); }
.hitch__row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-sm); }
/* Радио визуально убрано, но остаётся в потоке фокуса: нажимают его подписью
   (44px), кольцо фокуса рисуется на подписи. Размер 1px, а не 13px по умолчанию:
   иначе рядом с подписью висит собственная область нажатия в 13 пикселей. */
.hitch__opt { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hitch__label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md);
  border: var(--hair) solid var(--edge-strong); border-radius: var(--radius-btn);
  font-family: var(--font-mono); font-size: var(--text-mono-label); color: var(--text-2);
  cursor: pointer; user-select: none;
  /* высокочастотный элемент: отклик на переключение должен быть почти
     мгновенным, 180ms здесь читается как задержка */
  transition: border-color var(--dur-instant) var(--ease-out), color var(--dur-instant) var(--ease-out), background-color var(--dur-instant) var(--ease-out);
}
.hitch__opt:checked + .hitch__label { border-color: var(--chrome); background: var(--surface-2); color: var(--text); }
.hitch__opt:focus-visible + .hitch__label { outline: 2px solid var(--amber); outline-offset: 3px; box-shadow: 0 0 0 3px var(--graphite); }
@media (hover: hover) and (pointer: fine) { .hitch__label:hover { border-color: var(--chrome-dim); color: var(--text); } }

/* Значения. По умолчанию виден ковш; при выборе другой навески показывается
   соседнее значение — все три остаются в разметке. */
/* Значения по навескам. Пробовал проявлять новое значение за 120мс через
   allow-discrete + @starting-style — отменено: замер показал, что при первой
   загрузке ставка стартует с opacity 0 и появляется с задержкой, а это главная
   цифра страницы. Отклик на переключение даёт подсветка выбранной подписи,
   само число меняется на месте — моноширинное, без сдвига геометрии. */
.v { display: none; }
.v--bucket { display: inline; }
.card:has(#hitch-forks:checked)   .v--bucket { display: none; }
.card:has(#hitch-forks:checked)   .v--forks  { display: inline; }
.card:has(#hitch-breaker:checked) .v--bucket { display: none; }
.card:has(#hitch-breaker:checked) .v--breaker{ display: inline; }
/* Фолбэк там, где :has() не поддержан: показываем все три значения подряд
   с подписью навески — цифры не пропадают ни при каком раскладе. */
@supports not selector(:has(a)) {
  .v { display: inline; }
  .v::after { content: " (" attr(data-hitch) ")"; color: var(--label); font-size: .8em; }
  /* Прячем только ряд-ПРОКСИ вверху страницы: без :has() он ничего не
     переключает визуально. Ряд в форме (--form) остаётся всегда — это
     единственное поле выбора позиции, без него заявку не отправить. */
  .hitch__row:not(.hitch__row--form) { display: none; }
}

.card-rate { border-top: 2px solid var(--chrome); padding-top: var(--space-sm); margin-top: var(--space-lg); }
.card-rate__key { display: block; font-family: var(--font-mono); font-size: var(--text-mono-label); letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.card-rate__val {
  display: block; margin-top: var(--space-2xs);
  font-family: var(--font-display); font-variation-settings: "SHRP" var(--shrp);
  font-weight: 700; font-size: clamp(2rem, 3vw + 1rem, 3.25rem); letter-spacing: -.035em;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1;
}
.card-rate__unit { font-size: 1rem; color: var(--text-2); font-weight: 500; letter-spacing: 0; }
.card-rate__shift { display: block; margin-top: var(--space-xs); font-family: var(--font-mono); font-size: var(--text-mono-label); color: var(--label); }
.card-rate__shift b { color: var(--chrome); font-weight: 600; }
.card__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
@media (max-width: 419px) { .card__actions { flex-direction: column; align-items: stretch; } .card__actions .btn { width: 100%; } }

/* Что входит в ставку / что нет — две колонки, знак вместо иконки-в-кружочке */
.incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-xl); }
.incl__col { min-width: 0; }
.incl__key { margin: 0 0 var(--space-sm); font-family: var(--font-mono); font-size: var(--text-mono-label); letter-spacing: .05em; text-transform: uppercase; color: var(--label); }
.incl__list { list-style: none; margin: 0; padding: 0; }
.incl__list li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-xs) 0; border-bottom: var(--hair) solid var(--edge); color: var(--text-2); }
.incl__list li::before { font-family: var(--font-mono); line-height: 1.6; }
.incl--yes li::before { content: "+"; color: var(--green-signal); }
.incl--no  li::before { content: "−"; color: var(--chrome-dim); }
.incl__list b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .incl { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }

/* Заготовка паспортных характеристик. Публичной страницей это не станет:
   в превью блок показывает формат и говорит, каких данных ждём от заказчика. */
.tbd { border: var(--hair) dashed var(--edge-strong); padding: var(--space-md) var(--space-lg); }
.tbd__key { display: block; font-family: var(--font-mono); font-size: var(--text-mono-label); letter-spacing: .05em; text-transform: uppercase; color: var(--amber); margin-bottom: var(--space-xs); }
.tbd__text { margin: 0 0 var(--space-sm); color: var(--text-2); max-width: 62ch; }
.tbd__fields { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); font-family: var(--font-mono); font-size: var(--text-mono-label); color: var(--label); }
.tbd__fields li::before { content: "· "; color: var(--edge-strong); }

/* Похожие машины — строки прайса, а не карточки-с-иконками */
.similar { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--edge); }
.similar li { border-bottom: var(--hair) solid var(--edge); }
.similar a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md);
  align-items: baseline; min-height: 56px; padding: var(--space-sm) 0;
  color: var(--text); text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.similar__rate { font-family: var(--font-mono); font-weight: 600; color: var(--chrome); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .similar a:hover { color: var(--green-signal); } }

/* ──────────────────────────────── Движение ─────────────────────────
   Приём ровно один, и он привязан к signature: засечки шкалы ставок
   прорисовываются снизу вверх, как их наносят на чертёж. Всё остальное
   просто есть — раздел, который проявляется при подходе к нему, здесь был бы
   тринадцатым fade-up подряд, а это именованный AI-тель.

   ⚠️ 11.08.2026 — ПЕРЕПИСАНО ПОСЛЕ АВАРИИ. Было: `animation: tick-draw
   linear both` из кадра `from { transform: scaleY(0) }` по
   `animation-timeline: view()`. В WebKit 26.5 таймлайн не продвигается,
   а fill-mode both держит первый кадр — засечки не отрисовывались вовсе.
   Замер модели мёртвого таймлайна (оба движка, 1440): 0 засечек из 21,
   то есть signature страницы цен исчезал целиком.

   Сейчас: базовое состояние — засечка стоит. Сжать её вправе только
   `.has-reveal`, то есть сторож из /js/reveal.js, который умеет открыть
   обратно. Движение — transition по `.is-in`, у него нет первого кадра,
   в котором можно застрять. Наблюдаем не 21 засечку по отдельности,
   а полосу `.scale__bar`: засечки входят в кадр одновременно, 21 подписка
   вместо одной ничего бы не добавила. */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .scale__bar .scale__tick {
    transform-origin: bottom; transform: scaleY(0);
    transition: transform 520ms var(--ease-out);
  }
  .has-reveal .scale__bar.is-in .scale__tick { transform: scaleY(1); }
}