/* =====================================================================
   vseshoditsya.ru — домен-сателлит холодной рассылки.
   Направление «финансовый документ», доведённое до предела: страница
   не оформлена «под документ», она и есть документ. Отсюда все решения
   ниже — сетка бланка, левое поле с номерами параграфов, линейки вместо
   теней, моноширинные цифры с табличными ширинами, приложение с актом
   и колонтитул с выходными данными.

   Токены продублированы, а не импортированы из src/styles/tokens.css
   НАМЕРЕННО: это отдельный статический сайт в своём каталоге на сервере,
   он не собирается Astro и не должен зависеть от сборки основного.
   Значения обязаны совпадать с tokens.css — при смене палитры править оба.

   CSP этого домена (deploy/Caddyfile): default-src 'self'; script-src
   'none'; style-src 'self'; form-action 'none'. Поэтому здесь нет и не
   может быть ни строчки JS, ни одного <style>, ни одного атрибута style=,
   ни одного внешнего ресурса и ни одной формы. Всё «живое» на странице —
   :hover, :focus-visible и :target.
   ===================================================================== */

:root {
  --paper: #FAF9F5;
  --paper-2: #F2F5F2;
  --paper-3: #F1EEE5;
  --card: #FFFFFF;
  --ink: #17150F;
  --ink-2: #56513F;
  --ink-3: #6E6857;
  --rule: #E4DFD4;
  --rule-2: #EFEBE2;
  --line: #CFC9BC;

  --accent: #1D5C42;
  --accent-dark: #143F2D;
  --accent-soft: #BCD3C6;

  --alert: #8C3A2B;
  --mark: #FBF3D9;

  /* Текст по чернильному полю. Полупрозрачной бумагой его красить нельзя:
     на антиалиасинге тонкие штрихи уходят в кашу. Два непрозрачных тона,
     оба с запасом по контрасту (11,7:1 и 7,6:1 на --ink). */
  --on-ink: #E7E3D9;
  --on-ink-2: #ADA694;

  --sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;

  --radius: 3px;

  /* ── шкала кеглей ────────────────────────────────────────────────
     Восемь ступеней, и ни одного размера мимо них. Раньше здесь жили
     четырнадцать значений, подогнанных руками по полпикселя: половина
     различий не читалась вовсе, а работу делала — то есть страница
     платила сложностью, ничего не получая взамен.
     Шаг между соседними ступенями примерно 1,15–1,45 — достаточно,
     чтобы разница была видна без линейки. Верхняя ступень одна на два
     элемента: заголовок и слово «отписаться». Это не совпадение,
     а заявление — страница отвечает на «чем вы занимаетесь» и на «как
     от вас избавиться» одним и тем же голосом.

     Вся шкала поднята на ступень 05.09.2026 по замечанию «текст мелкий».
     Прежние значения (11 / 12.5 / 13.5 / 15 …) брались от вёрстки для
     экрана, а здесь документ, который читают сорокалетние финдиры и
     распечатывают для бухгалтера. Нижняя ступень 11px была за гранью:
     на ней набраны метки полей бланка, то есть навигация по документу.
     Одновременно с этим лист расширен до 1180px — иначе выросший кегль
     сузил бы строку акта. */
  --s1: 12px;     /* моно-метки полей, сноски-номера, колонтитул */
  --s2: 13.5px;   /* легенда акта, пояснения в таблице, примечания */
  --s3: 15px;     /* поля бланка, описания находок, реквизиты */
  --s4: 16.5px;   /* проводка: абзацы, ячейки таблицы, кнопки */
  --s5: 18.5px;   /* лид, бренд, заголовки третьего уровня, итог акта */
  --s6: 22px;     /* имя подписанта, нижняя граница h2 */
  --s7: 30px;     /* h2, нижняя граница h1 */
  --s8: 47px;     /* h1 и «отписаться» — верхняя ступень */

  /* Документ существует только в светлой схеме — как бумага. Объявляем
     это явно, иначе браузер в тёмной теме перекрашивает полосы прокрутки
     и системные элементы, и лист получает чужую рамку. */
  color-scheme: light;

  /* Поля листа. У бумажного бланка они щедрые и одинаковые со всех
     сторон — это половина ощущения «документ», вторая половина линейки. */
  --pad: clamp(18px, 4.4vw, 52px);

  /* Ширина левого поля с номерами параграфов. Внутрь помещается «§ 4»
     моноширинным. Вертикальных подписей разделов здесь больше нет:
     они добавляли странице четвёртое направление чтения и первыми
     ломались при системном увеличении шрифта. Номера достаточно. */
  --marg-w: clamp(54px, 8vw, 96px);
}

/* ─────────── шрифты ───────────
   Шесть файлов — всё, что есть на сервере. Курсива нет ни в одном
   начертании, поэтому font-style: italic в этом файле не встречается
   нигде: браузер нарисовал бы синтетический наклон, а он в документе
   выглядит как брак печати. У засечного есть только 600. */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plex-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/source-serif-600.woff2') format('woff2');
}

/* ─────────── база ─────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Якорей на странице теперь много: строка быстрой отписки, чернильное
   поле и шесть сносок из акта в опись находок. Отступа хватает, чтобы
   цель не прилипала к верхней кромке экрана. */
[id] { scroll-margin-top: 28px; }

body {
  /* Лист лежит на столе: подложка на тон темнее бумаги. Ни тени, ни
     скруглений — только разница светлот и одна линейка по контуру. */
  margin: 0;
  background: var(--paper-3);
  color: var(--ink-2);
  font: 400 var(--s4)/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd, dt, figure, figcaption, table { margin: 0; }
dd { margin-inline-start: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }

a { color: var(--accent); text-decoration: none; }

/* Ссылки внутри текста подчёркиваются постоянно, а не только на :hover.
   Замерено: --accent #1D5C42 против --ink-2 #56513F даёт 1,01:1, против
   --ink-3 — 1,42:1 при пороге 3:1 для «отличается одним цветом». В сером
   и при протанопии ссылка была неотличима от прозы. Блоки, где ссылка
   и так подчёркнута рамкой (.sign-cont, .srow dd), не трогаем. */
.brow dd a,
.ptext a,
.nrow dd a,
.quickout a,
.colophon-links a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
/* На чернильном поле зелёная обводка неразличима — там своя */
.stopband :focus-visible { outline-color: var(--accent-soft); }

/* Выделение внутри текста делается насыщенностью ТОЛЬКО в санс-наборе:
   у Plex Sans на сервере лежат 400/500/600. В засечном насыщенности нет —
   там единственное начертание 600, и <b> внутри него браузер синтезировал
   бы грязный жир. Поэтому в любом засечном блоке выделение — это более
   тёмные чернила, а не вес. Правило записано наперёд: сегодня засечным
   набраны только заголовки и имя, но первая же правка текста, поставившая
   <b> внутрь .h2 или .sign-name, иначе сломала бы набор молча. */
b, strong { font-weight: 600; color: var(--ink); }
h1 b, .h2 b, .acttitle b, .sign-name b, .stop-word b {
  font-weight: inherit;
  color: var(--ink);
}

/* Моноширинный набор цифр с табличными ширинами: столбцы акта обязаны
   выстраиваться разряд под разрядом, иначе таблица перестаёт читаться
   как бухгалтерская и превращается в набор чисел. */
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─────────── лист ─────────── */

/* 1180px, а не 1000: на широком мониторе лист в тысячу пикселей оставлял
   по трети экрана пустой подложки с каждой стороны, и страница читалась
   как узкая колонка в поле, а не как документ на столе. Ширина подобрана
   под акт: пять колонок таблицы с поднятым кеглем требуют примерно
   1050px внутри полей. */
.doc {
  max-width: 1180px;
  margin: clamp(20px, 4vw, 56px) auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ─────────── шапка бланка ─────────── */

.mast { padding: var(--pad) var(--pad) clamp(26px, 3.6vw, 38px); }

.mast-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding-bottom: 14px;
  /* Верхняя линейка бланка тяжелее остальных: она держит всю страницу */
  border-bottom: 2px solid var(--ink);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--s5);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.brand svg { color: var(--accent); }

.mast-org {
  font-size: var(--s2);
  color: var(--ink-3);
}

/* Поля бланка «кому / предмет / обратный адрес». Двухколоночная сетка
   с линейками между строками — ровно так печатают шапку акта. */
.brow {
  display: grid;
  grid-template-columns: clamp(104px, 15vw, 148px) minmax(0, 1fr);
  gap: 4px 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}

.brow dt {
  font-family: var(--mono);
  font-size: var(--s1);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  /* Выравнивание по базовой линии соседней ячейки: моно и санс имеют
     разную высоту строки, без этого метка «уезжает» вверх */
  padding-top: 3px;
}

.brow dd {
  font-size: var(--s3);
  color: var(--ink-2);
}
.brow dd .mono { color: var(--ink); }

/* Воздух вокруг заголовка — единственное, чем страница показывает, что
   она не спешит продать. Сверху он больше, чем снизу: заголовок должен
   отлипнуть от полей бланка сильнее, чем от собственного лида. */
h1 {
  margin-top: clamp(34px, 5.4vw, 62px);
  font-family: var(--serif);
  font-size: clamp(var(--s7), 4.4vw, var(--s8));
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: pretty;
}

.lead {
  margin-top: 20px;
  max-width: 38em;
  font-size: clamp(var(--s4), 1.6vw, var(--s5));
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ─────────── кнопки ─────────── */

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 32px);
}

.btn, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 48px по WCAG 2.5.5: полоса под пальцем на телефоне */
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: var(--s4);
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn, .btn-ghost { text-decoration: none; }
.btn:hover, .btn-ghost:hover { text-decoration: none; }

.btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.btn-ghost {
  background: transparent;
  /* --ink-3 вместо --line: 5,27:1 против 1,57:1. Порог для границы
     нетекстового элемента — 3:1, старая рамка его не проходила. */
  border-color: var(--ink-3);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* Строка быстрой отписки в шапке. Тонкая рамка, а не заливка: это
   служебная сноска бланка, а не третья кнопка. Своё дело она делает
   как указатель — весь вес отписки лежит на чернильном поле в § 2. */
.quickout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: clamp(22px, 2.8vw, 30px);
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-soft);
  border-radius: var(--radius);
  font-size: var(--s3);
  color: var(--ink-3);
}
.quickout a { font-weight: 500; }

/* ─────────── параграфы с левым полем ─────────── */

/* Сетка ведомости: узкая колонка слева с номером параграфа, вертикальная
   линейка на всю высоту документа, содержание справа.
   Линейка рисуется псевдоэлементом СЕКЦИИ, а не границей колонки. Причина
   в акте: он вынесен на всю ширину листа (см. .wide), и граница колонки
   обрывалась бы на нём. Абсолютная линейка идёт насквозь и уходит ЗА
   белую распечатку — ровно так выглядит разлинованная форма, на которую
   положили приложение. */
.sec {
  position: relative;
  display: grid;
  grid-template-columns: var(--marg-w) minmax(0, 1fr);
  border-top: 1px solid var(--line);
}

.sec::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--marg-w);
  width: 1px;
  background: var(--rule);
}

.marg {
  padding: clamp(26px, 3.4vw, 38px) 12px clamp(26px, 3.4vw, 38px) var(--pad);
}

.secno {
  font-size: var(--s3);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.body {
  min-width: 0;
  padding: clamp(26px, 3.4vw, 38px) var(--pad) clamp(32px, 4.2vw, 46px) clamp(18px, 2.6vw, 32px);
}
/* Параграф, у которого ниже идёт приложение: нижнее поле отдаёт ему */
.body-open { padding-bottom: clamp(16px, 2.2vw, 24px); }

/* Текст ПОСЛЕ приложения. Отдельная строка сетки во второй колонке —
   так он остаётся справа от вертикальной линейки, хотя стоит ниже
   полноширинного акта. Пустой ячейки в разметке для этого не нужно. */
.body-cont {
  grid-column: 2;
  padding-top: clamp(18px, 2.4vw, 26px);
}

/* Полноширинные вкладки внутри параграфа: приложение и чернильное поле.
   position: relative обязателен — иначе абсолютная линейка .sec::before
   нарисовалась бы поверх них: позиционированные элементы рисуются
   в порядке дерева, и линейка объявлена первой. */
.wide {
  position: relative;
  grid-column: 1 / -1;
  padding-inline: var(--pad);
}

.h2 {
  font-family: var(--serif);
  font-size: clamp(var(--s6), 2.6vw, var(--s7));
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.ptext {
  margin-top: 14px;
  max-width: 46em;
  font-size: var(--s4);
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}
.ptext-tight { margin-top: 10px; }
.ptext-narrow { max-width: 42em; }

/* ─────────── § 1. Приложение № 1: акт расхождений ─────────── */

/* Вкладка на белом внутри тёплого листа: так в бумажном отчёте выглядит
   подшитая распечатка. Ни тени, ни рамки цветом — только смена бумаги
   и линейка по контуру. Рамка «Приложение № 1» важнее оформления: так
   таблица появляется не как рекламный блок «посмотрите наш продукт»,
   а как документ, приложенный к письму. */
.act {
  position: relative;
  margin-top: clamp(18px, 2.4vw, 26px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.acthead {
  padding: clamp(16px, 2.2vw, 22px) clamp(14px, 2.2vw, 22px) 12px;
  border-bottom: 1px solid var(--rule);
}

.att-no {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
  font-size: var(--s1);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.att-no svg { flex-shrink: 0; }

/* Метка «пример» видна на ЛЮБОЙ ширине. Раньше на её месте стоял штамп
   с наклоном в углу карточки — единственный скевоморфный жест страницы,
   и он же прятался ниже 820px, то есть исчезал ровно там, где карточки
   таблицы выглядят убедительнее всего. Синтетические числа без оговорки
   читаются как клиентские — цена ошибки здесь выше цены приёма. */
.flag {
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: var(--s1);
  letter-spacing: 0.1em;
  color: var(--alert);
  white-space: nowrap;
}

.acttitle {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: var(--s5);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.actmeta {
  margin-top: 6px;
  font-size: var(--s2);
  color: var(--ink-3);
}

/* Акт вынесен на всю ширину листа, поэтому таблица помещается целиком
   вплоть до 780px, где раскладка становится построчной. Прокрутка
   оставлена страховкой на случай крупного системного шрифта. */
.actscroll { overflow-x: auto; }

.acttable {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
}

.acttable thead th {
  padding: 12px clamp(8px, 1.1vw, 12px) 9px;
  font-family: var(--mono);
  font-size: var(--s1);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  vertical-align: bottom;
  /* Головка таблицы отбита чернильной линейкой — как в отпечатанной форме */
  border-bottom: 1.5px solid var(--ink);
}
.acttable thead th.c-num { text-align: right; }

/* Графа «Статья» шире остальных: в ней стоит название статьи плюс
   сноска на тип находки, и при 24 % номер сноски срывался на свою
   строку и висел там один. */
.c-item { width: 27%; }
.c-num { width: 15%; }
.c-why { width: 28%; }

.acttable tbody th {
  padding: 11px clamp(8px, 1.1vw, 12px);
  font-size: var(--s4);
  font-weight: 400;
  text-align: left;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-2);
}

.acttable td {
  padding: 11px clamp(8px, 1.1vw, 12px);
  border-bottom: 1px solid var(--rule-2);
  vertical-align: baseline;
}

/* У th браузерная таблица стилей наследует vertical-align: middle от группы
   строк, а у td здесь стоит baseline. В строках, где название статьи
   переносится на две строки («Штрафы и корректировки»), название вставало
   по центру, а цифры — по базовой линии первой строки, и весь ряд читался
   как съехавший. Ровно это и было видно глазом как «цифры не ровно». */
.acttable tbody th,
.acttable tfoot th { vertical-align: baseline; }

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--s3);
  text-align: right;
  color: var(--ink);
  white-space: nowrap;
}

/* Сходящаяся строка намеренно тихая: чтобы взгляд сам собрал вертикаль
   из подсвеченных ячеек, остальное должно уйти в фон. */
.zero { color: var(--ink-3); }

/* Ради этой ячейки страница и написана. Подсветка — тёплый жёлтый маркер
   ревизора плюс кирпичный цвет числа; вместе они дают единственную
   вертикаль, которую видно раньше, чем читается первая строка. */
.diff {
  background: var(--mark);
  color: var(--alert);
  font-weight: 500;
}

.why {
  font-size: var(--s2);
  line-height: 1.45;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* Галочку набираем строчным элементом, а не флексом: display:flex на
   ячейке выбивает её из табличной раскладки — браузер оборачивает её
   в анонимный td, и фиксированные ширины колонок перестают действовать
   именно на этой строке. Один сдвинутый столбец рушит весь смысл акта. */
.why.ok { color: var(--ink-3); }
.why.ok .tick {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 5px;
  color: var(--accent);
}

/* Сноска на тип находки. Приём документа, а не интерфейса: в акте
   у статьи стоит номер, по которому в описи ниже находится правило
   проверки. Единственная содержательная интерактивность, возможная
   при script-src 'none'. */
.tref {
  display: inline-block;
  min-width: 26px;
  margin-left: 5px;
  padding: 1px 5px 2px;
  border: 1px solid var(--accent-soft);
  border-radius: 2px;
  background: var(--paper-2);
  font-size: var(--s1);
  font-weight: 500;
  color: var(--accent);
  text-align: center;
  vertical-align: 1px;
}
.tref:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  text-decoration: none;
}

.acttable tbody tr:hover { background: var(--paper); }
/* Подсветка расхождения не должна тонуть под ховером строки */
.acttable tbody tr:hover .diff { background: var(--mark); }

/* Итог разложен на две встречные величины и общую сумму под ними.
   Складывать по модулю недоначисленное площадкой и переудержанное ею
   формально можно, но бухгалтерский читатель на этом спотыкается: это
   две разные претензии. Отсюда две подытоговые строки под тонкой
   чернильной линейкой и «Итого к выяснению» под двойной — конвенция,
   которую финансовый читатель узнаёт без подписи. */
.acttable tfoot th,
.acttable tfoot td {
  padding: 11px clamp(8px, 1.1vw, 12px);
  border-bottom: 0;
}
.acttable tfoot th {
  font-size: var(--s4);
  color: var(--ink);
  text-align: left;
}
.tf-sub th { font-weight: 400; }
.tf-total th { font-weight: 600; }
.total { font-size: var(--s5); font-weight: 500; }

/* Линейки итога живут ТОЛЬКО в табличной раскладке и потому объявлены
   внутри медиазапроса, а не перекрываются потом на телефоне. Перекрытие
   пришлось бы делать более специфичным селектором, чем «.acttable tfoot
   td» — а это ровно тот способ, которым такие правила молча ломаются
   при следующей правке. Здесь их просто нет, когда таблица становится
   списком карточек. */
@media print, (min-width: 781px) {
  .acttable tfoot tr:first-child th,
  .acttable tfoot tr:first-child td {
    border-top: 1.5px solid var(--ink);
    padding-top: 13px;
  }
  .tf-total th,
  .tf-total td {
    border-top: 3px double var(--ink);
    padding-top: 14px;
    padding-bottom: 15px;
  }
}

.actfoot {
  padding: 14px clamp(14px, 2.2vw, 22px) clamp(16px, 2.2vw, 20px);
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

/* Легенда набрана той же конструкцией dt/dd, что поля бланка, строки
   уведомления и реквизиты: одна сетка в четырёх масштабах — это система,
   а не набор приёмов. */
.lrow {
  display: grid;
  grid-template-columns: clamp(70px, 9vw, 88px) minmax(0, 1fr);
  gap: 2px 14px;
  padding: 7px 0;
}
.lrow + .lrow { border-top: 1px solid var(--rule-2); }

.lrow dt {
  font-family: var(--mono);
  font-size: var(--s1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 2px;
}
.lrow dd {
  font-size: var(--s2);
  line-height: 1.5;
  color: var(--ink-3);
}
.lrow dd .mono { color: var(--ink); }

.note {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--rule-2);
  font-size: var(--s2);
  line-height: 1.5;
  color: var(--ink-3);
}

/* ─────────── § 2. Рассылка ─────────── */

.nrows { margin-top: clamp(16px, 2.2vw, 22px); }

.nrow {
  display: grid;
  grid-template-columns: clamp(120px, 16vw, 160px) minmax(0, 1fr);
  gap: 6px 22px;
  padding: 15px 0;
  border-top: 1px solid var(--rule);
}
.nrow:last-child { border-bottom: 1px solid var(--rule); }

.nrow dt {
  font-family: var(--mono);
  font-size: var(--s1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 3px;
}

.nrow dd {
  font-size: var(--s4);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ── чернильное поле отписки ──
   Единственное тёмное место на листе и самое крупное слово страницы.
   Инструкцию, которую принято прятать в подвал 12-м кеглем, здесь
   набрали верхней ступенью шкалы: спрятанная отписка так не выглядит,
   и это самое дешёвое доказательство, что контора не занимается спамом.
   Плакатных 108px тут нет намеренно — у основного сайта потолок 53px,
   и чужая шкала сломала бы голос сильнее, чем помог бы масштаб.
   Работает не абсолютный кегль, а разрыв: 11px метка над 47px словом. */
.stopband {
  position: relative;
  grid-column: 1 / -1;
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(30px, 4.6vw, 52px) var(--pad) clamp(32px, 5vw, 56px);
}

.stop-lab {
  font-size: var(--s1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-ink-2);
}

/* Кликается САМО слово. В оригинале приёма гигантское «отписаться» было
   абзацем, а mailto прятался мелкой строкой под ним: самый крупный
   элемент страницы не нажимался. */
.stop-word {
  display: inline-block;
  margin: clamp(10px, 1.4vw, 16px) 0 clamp(20px, 2.8vw, 30px);
  font-family: var(--serif);
  font-size: clamp(var(--s7), 9vw, var(--s8));
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent-soft);
  border-bottom: 2px solid transparent;
}
.stop-word:hover {
  color: var(--accent-soft);
  text-decoration: none;
  border-bottom-color: var(--accent-soft);
}

.srow {
  display: grid;
  grid-template-columns: clamp(120px, 16vw, 160px) minmax(0, 1fr);
  gap: 6px 22px;
  padding: 14px 0;
  border-top: 1px solid rgb(231 227 217 / 20%);
}

.srow dt {
  font-family: var(--mono);
  font-size: var(--s1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-2);
  padding-top: 3px;
}

.srow dd {
  font-size: var(--s4);
  line-height: 1.6;
  color: var(--on-ink);
  max-width: 44em;
  text-wrap: pretty;
}
.srow dd a { color: var(--accent-soft); border-bottom: 1px solid rgb(188 211 198 / 45%); }
.srow dd a:hover { color: var(--accent-soft); text-decoration: none; border-bottom-color: var(--accent-soft); }

/* ─────────── § 3. Опись находок ─────────── */

/* Три графы: номер, находка, источники. Именно третья графа отличает
   опись от «шести карточек с преимуществами»: названия отчётов площадок
   невозможно подделать копирайтом, и они доказывают знание предмета
   быстрее любого абзаца про «глубокую аналитику». */
.finds {
  margin-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid var(--rule);
}

.find {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) clamp(190px, 22vw, 250px);
  gap: 0 clamp(14px, 1.8vw, 24px);
  padding: 16px 0 17px;
  border-bottom: 1px solid var(--rule);
  /* Корешок описи: сюда выезжает акцентная метка при переходе
     по сноске из акта */
  border-left: 3px solid transparent;
  padding-left: 11px;
  margin-left: -14px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Селектор утяжелён родителем намеренно: подсветка :target обязана
   выигрывать по специфичности у любого правила самого .find, которое
   появится здесь позже (полосатый :nth-child, ховер). Держать её
   на одном лишь порядке правил в файле — ошибка, которая ломается
   при первой же перестановке блоков. */
.finds .find:target {
  background: var(--mark);
  border-left-color: var(--accent);
}

.fno {
  font-family: var(--mono);
  font-size: var(--s5);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-3);
  padding-top: 1px;
}
.finds .find:target .fno { color: var(--accent-dark); }

.fbody h3 {
  font-size: var(--s5);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.fbody p {
  margin-top: 5px;
  font-size: var(--s3);
  line-height: 1.55;
  color: var(--ink-3);
  text-wrap: pretty;
}

.fsrc {
  padding-top: 2px;
  padding-left: clamp(12px, 1.4vw, 18px);
  border-left: 1px solid var(--rule-2);
}
.fsrc > div + div { margin-top: 8px; }

.fsrc dt {
  font-family: var(--mono);
  font-size: var(--s1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fsrc dd {
  margin-top: 2px;
  font-size: var(--s2);
  line-height: 1.4;
  color: var(--ink);
}

/* ─────────── § 4. Подписант ─────────── */

.sign { margin-top: clamp(18px, 2.4vw, 24px); }

.sign-role {
  font-size: var(--s1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Линия подписи: имя стоит НАД чертой, как в подписанном акте.
   Нарисованного автографа здесь нет и не будет — см. комментарий
   в конце файла. */
.sign-name {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: var(--s6);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.15;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
}

/* Расшифровка под чертой набрана обычным текстом, а не капителью:
   двух одинаковых моно-меток по обе стороны имени быть не должно —
   строка над чертой объявляет должность, строка под чертой её
   расшифровывает, и путать их нельзя. */
.sign-under {
  margin-top: 7px;
  font-size: var(--s3);
  color: var(--ink-3);
}

.sign-note {
  margin-top: 14px;
  max-width: 40em;
  font-size: var(--s4);
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Зазоры увеличены: строка контактов стояла в 22px от кнопки ниже, и на
   узком окне подпись, контакты и кнопка читались как один слипшийся блок. */
.sign-cont {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 26px;
  margin-bottom: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: var(--s3);
}
.sign-cont a { color: var(--ink); border-bottom: 1px solid var(--line); }
.sign-cont a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--ink); }

.cta-tight { margin-top: 30px; }

/* ─────────── колонтитул ─────────── */

.colophon {
  padding: clamp(24px, 3.2vw, 34px) var(--pad) clamp(26px, 3.4vw, 38px);
  /* Тяжёлая линейка внизу листа отвечает верхней в шапке: документ
     закрыт с обеих сторон, а не обрывается. */
  border-top: 2px solid var(--ink);
  background: var(--paper-3);
  border-radius: 0 0 var(--radius) var(--radius);
}

.req {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 52px);
}

.rrow {
  display: grid;
  grid-template-columns: clamp(100px, 12vw, 132px) minmax(0, 1fr);
  gap: 16px;
  /* Было 9px — реквизиты слипались в одну серую массу. У колонтитула
     бумажного бланка строки стоят свободно: это последнее, что человек
     читает, и читает он именно здесь, проверяя, существует ли контора. */
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}

/* Название юрлица — самое длинное значение в списке. В двухколоночной
   сетке оно переносилось на две строки и ломало ритм соседней колонки,
   отчего весь колонтитул читался как небрежный. Даём ему всю ширину:
   оставшиеся семь строк ложатся в две колонки ровно. */
.rrow:first-child { grid-column: 1 / -1; }

.rrow dt {
  font-family: var(--mono);
  font-size: var(--s2);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 1px;
}

.rrow dd {
  font-size: var(--s3);
  line-height: 1.55;
  color: var(--ink-2);
}
.rrow dd.mono, .rrow dd a { color: var(--ink); }

.colophon-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 18px;
  font-size: var(--s3);
}
.colophon-links .sep { color: var(--line); }

/* Выходные данные набраны САНСОМ, а не моношрифтом. Моноширинный хорош
   для того, что выравнивается в столбик, — цифр, адресов, идентификаторов.
   Целая строка прозы в нём превращается в плотную серую полосу, и это
   первое, обо что спотыкается глаз внизу листа. */
.colophon-foot {
  margin-top: 18px;
  font-size: var(--s2);
  line-height: 1.7;
  color: var(--ink-3);
}
.colophon-foot .mono { font-family: var(--mono); }

/* ─────────── адаптив ─────────── */

@media screen and (max-width: 900px) {
  /* Третья графа описи уходит под текст: на планшете она сжимает
     описание до двух слов в строке. */
  .find { grid-template-columns: 46px minmax(0, 1fr); }
  .fsrc {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin-top: 11px;
    padding: 9px 0 0;
    border-left: 0;
    border-top: 1px solid var(--rule-2);
  }
  .fsrc > div + div { margin-top: 0; }
  .fsrc > div { display: flex; align-items: baseline; gap: 7px; }
  .fsrc dd { margin-top: 0; }

  .req { grid-template-columns: minmax(0, 1fr); }
}

/* Ниже 780px акт перестаёт быть таблицей и становится списком карточек-
   строк: пять колонок на телефоне нечитаемы, а горизонтальная прокрутка
   прячет как раз тот столбец, ради которого всё сделано. Порог поднят
   с 820 до 780px после того, как акт получил всю ширину листа: до этой
   ширины таблица помещается целиком, и на планшете видно настоящий
   документ, а не карточки.
   Подписи колонок берутся из data-l — атрибут, а не инлайновый стиль,
   так что CSP не нарушается. */
@media screen and (max-width: 780px) {
  .actscroll { overflow-x: visible; }

  .acttable { min-width: 0; table-layout: auto; }
  .acttable,
  .acttable thead,
  .acttable tbody,
  .acttable tfoot,
  .acttable tr,
  .acttable th,
  .acttable td { display: block; }

  /* Шапку убираем с глаз, но не из дерева доступности: связь ячеек
     с заголовками нужна скринридеру и на телефоне. */
  .acttable thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .acttable tbody tr,
  .acttable tfoot tr {
    padding: 12px clamp(14px, 4vw, 20px) 14px;
    border-bottom: 1px solid var(--rule);
  }
  .acttable tbody tr:last-child { border-bottom: 0; }

  .acttable tbody th,
  .acttable tfoot th {
    padding: 0 0 8px;
    border-bottom: 0;
    font-size: var(--s4);
    font-weight: 600;
  }

  .acttable td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding: 5px 0;
    border-bottom: 0;
  }

  /* Метка колонки слева, значение справа — та же логика, что в бумажной
     форме, просто повёрнутая на 90°. */
  .acttable td::before {
    content: attr(data-l);
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: var(--s1);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* Подсвеченное расхождение на телефоне — целая строка-плашка,
     иначе маркер на одном числе теряется среди белого */
  .diff {
    padding: 5px 9px;
    margin: 2px 0;
    border-radius: var(--radius);
  }

  /* Пояснение на телефоне встаёт под свою метку в колонку: длинный
     русский текст, прижатый вправо в узкой ячейке, читается плохо */
  .why {
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding-top: 8px;
    margin-top: 3px;
    border-top: 1px solid var(--rule-2);
  }
  /* «Сходится» — короткая строка, ей колонка не нужна: метка слева,
     значение с галочкой справа, как в остальных строках */
  .why.ok {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .why.ok .tick { order: 2; margin-right: 0; margin-left: 6px; }
  .why.ok span { margin-left: auto; }

  /* Пустые ячейки итога на телефоне ничего не сообщают — только шум.
     Селектор утяжелён родителем НАМЕРЕННО: у «.acttable td» выше
     специфичность (0,1,1), и одинокий класс её не перебил бы —
     подытоги показывали бы две пустые строки «отчёт площадки» и
     «ваш учёт» с пустым значением. */
  .acttable .tf-empty { display: none; }

  /* Линейки итога переезжают с ячеек на строку целиком: на построчной
     раскладке ячеечная линейка нарисовалась бы под каждой меткой. */
  .acttable tfoot tr { background: var(--paper); }
  .acttable tfoot tr:first-child { border-top: 1.5px solid var(--ink); }
  .tf-total { border-top: 3px double var(--ink); }
  .acttable tfoot th { padding-bottom: 8px; }
}

@media screen and (max-width: 700px) {
  /* Заголовок на телефоне ломается сам: авторский перенос делит его на
     четыре строки с висячим словом, а это первое, что видит получатель
     письма с телефона. Пробелы перед <br /> уже стоят в разметке, поэтому
     скрытие переноса не склеивает слова. */
  h1 br { display: none; }

  /* Левое поле ложится горизонтальной шапкой параграфа: вертикальная
     линейка на узком экране съедала бы шестую часть ширины ради
     двух знаков. */
  .sec { grid-template-columns: minmax(0, 1fr); }
  .sec::before { display: none; }

  .marg {
    padding: 16px var(--pad) 12px;
    border-bottom: 1px solid var(--rule);
  }

  .body { padding: 20px var(--pad) 30px; }
  .body-open { padding-bottom: 14px; }
  .body-cont { grid-column: 1; padding-top: 16px; }

  .doc { margin: 0; border-inline: 0; border-radius: 0; }
  .colophon { border-radius: 0; }

  .brow { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .brow dt { padding-top: 0; }

  .nrow, .srow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .nrow dt, .srow dt { padding-top: 0; }

  .find { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .fno { font-size: var(--s3); letter-spacing: 0.08em; }
  .fno::before { content: '№ '; color: var(--ink-3); }
  .fsrc { grid-column: 1; }

  .cta > * { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─────────── печать ─────────── */

/* Страница, притворяющаяся документом, обязана документом и печататься.
   Это не украшение: половина этой аудитории проверяет подрядчика
   распечаткой для бухгалтера. */
@media print {
  @page { margin: 14mm; }

  body { background: #fff; }

  .doc {
    max-width: none;
    margin: 0;
    border: 0;
    background: #fff;
  }

  .colophon { background: #fff; }
  .actfoot { background: #fff; }

  .quickout, .cta { display: none; }

  /* Чернильное поле выворачивается обратно в бумагу: иначе принтер
     выливает на один блок весь картридж, а светлый текст по чёрному
     всё равно уходит в серое. Рамка сохраняет его как отдельный блок. */
  .stopband {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    padding-block: 18pt;
  }
  .stop-lab, .srow dt { color: #000; }
  .stop-word { color: #000; }
  .srow dd, .srow dd a { color: #000; border-bottom: 0; }
  .srow { border-top-color: #999; }

  /* На бумаге ссылка без адреса бесполезна */
  .body a[href^="http"]::after,
  .colophon-links a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-family: var(--mono);
    font-size: var(--s1);
    color: var(--ink-3);
  }

  /* .sec из списка убран: § 1 вместе с актом заведомо выше полезной
     высоты листа A4, и запрет разрыва заставлял Chrome выталкивать его
     на новый лист, оставляя пустой хвост, — а разорвать всё равно
     приходилось. Запрещаем разрыв только тому, что на лист помещается. */
  .act, .stopband, .find { break-inside: avoid; }
  h1, .h2, .acttitle { break-after: avoid; }

  /* Горизонтальная прокрутка на бумаге не существует: без этих двух
     правил правая графа акта обрезается по краю листа. Полезная ширина
     A4 при margin 14mm — 625 px против 640 px таблицы. */
  .actscroll { overflow: visible; }
  .acttable { min-width: 0; }

  /* Подсветка расхождений держится на жёлтой заливке, а фоны принтеры
     по умолчанию не печатают — на бумаге главный приём акта исчезал.
     Линейка слева работает и в чёрно-белой печати, и при дальтонизме. */
  .diff { border-left: 2px solid var(--alert); }
}

/* =====================================================================
   Чего здесь нет намеренно — чтобы не восстановили по недосмотру.

   1. Нарисованного инлайновым SVG автографа над строкой имени. Приём
      красивый, и в соседнем направлении он был. Но подпись реального
      человека, которую нарисовал не он, — это фальшивка на странице,
      вся работа которой в том, чтобы доказать: здесь ничего не выдумано.
      Строка «имя над чертой» ту же роль играет честно.
   2. Ряда бейджей доверия («работаем по договору · данные остаются
      у вас») под кнопками. Это первый из двух самых узнаваемых признаков
      сгенерированного лендинга; второй — ряд одинаковых скруглённых
      карточек с иконками. Ни того, ни другого на листе быть не должно.
   3. Теней. Ни одной, включая --shadow основного сайта: у документа
      линейки вместо теней.
   4. Курсива. Его нет в файлах шрифтов; браузер синтезировал бы наклон.
   ===================================================================== */