/* ─────────────────────────────────────────────────────────────────────────────
   Визитка — только то, чего нет в общем фундаменте.

   Ни одного цвета, кегля, скругления и отступа своими числами: всё через
   токены из `/kit/base.css`. Именно поэтому страница выглядит продолжением
   кабинета, а не «сайтом в похожих тонах» — и останется такой, когда палитру
   поправят в одном месте.

   Своё здесь ровно две вещи, которых в админке быть не может:

   1. **Раскладка длинной страницы**: полоса-шапка, экраны-секции, чередование
      подложек, крупная типографика первого экрана. Админка — это плотные
      рабочие экраны, ей такое не нужно.
   2. **Приёмы «бумажного» первого экрана**: карточка-тетрадь с решением и
      подписи от руки (`--ff-hand`). В PLAN.md §4.1 этот шрифт заявлен, но в
      продукте ему до сих пор не находилось места.

   Префикс `s-` — чтобы ни один класс визитки не мог случайно совпасть с
   классом приложения: файлы живут в одном браузере на соседних вкладках, но
   `base.css` у них общий, и коллизия имён была бы невидимой до первого сбоя.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Раскладка страницы ────────────────────────────────────────────────── */

.s-body {
  /* Якорная прокрутка не должна прятать заголовок под липкой шапкой. */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { .s-body { scroll-behavior: auto; } }

.s-in {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + var(--safe-left)) calc(var(--gutter) + var(--safe-right));
}

.s-sec {
  padding-block: clamp(44px, 3vw + 30px, 88px);
  scroll-margin-top: calc(var(--appbar-h) + var(--sp-4));
}

/* Чередование подложек — единственное, что отделяет секции друг от друга.
   Линий-разделителей нет намеренно: на бумажном фоне они читаются как шов.

   Первая секция после первого экрана — `#offer` — тоже `s-sec-alt`
   (2026-08-24). Первый экран сидит на `--bg`, и без этого «Z czym pomagam»
   шла бы следующей секцией на том же фоне: границы между ними физически нет,
   и там, где раньше стояла полоса цифр, остаётся необъяснимая пустота. Раз
   единственный законный разделитель здесь — смена подложки, чередование
   просто сдвинуто на шаг: `#offer` и `#panel` и `#about` и `#contact` теперь
   alt, `#how` и `#price` и `#faq` — нет. Правило то же самое, просто без
   первого экрана в общем счёте. */
.s-sec-alt { background: var(--surface2); }

.s-sec-head { max-width: 62ch; margin-bottom: clamp(24px, 2vw + 12px, 40px); }
.s-sec-head h2 {
  font-family: var(--ff-serif);
  font-size: clamp(23px, 1.4vw + 18px, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.s-lead {
  margin-top: var(--sp-3);
  color: var(--ink2);
  font-size: clamp(15px, 0.35vw + 14px, 18px);
  line-height: 1.6;
}

.s-note { font-size: var(--fs-sm); line-height: 1.55; }

/* Ссылка для клавиатуры: до неё доходят табом с самого начала страницы. */
.s-skip {
  position: absolute;
  left: var(--sp-4);
  top: calc(-1 * var(--sp-9));
  z-index: 60;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  transition: top var(--t-fast) var(--ease);
}
.s-skip:focus { top: var(--sp-3); }

/* ── Полоса «второй сайт» ────────────────────────────────── */

/*
  Зачем полоса и почему не бургер — в `scripts/site/shell.mjs` (`crossBar`).
  Здесь только вёрстка, и в ней три решения, которые легко снять по незнанию.

  1. **Ссылка — вся полоса целиком**, а не слова внутри неё. На телефоне это
     единственный способ дать цель во всю ширину экрана: попасть пальцем в
     строчку из двух слов с первого раза нельзя.

  2. **Полоса не липкая.** Её работа — первый экран: сказать пришедшему не
     туда, что сайта на хосте два. Дальше она обязана уйти, а не отъедать
     высоту вдвоём с липкой шапкой, которая стоит прямо под ней.

  3. **`--safe-top` есть и здесь, и у шапки, и это не дубль.** Вырез сверху
     обходит самый верхний элемент страницы: там, где полоса есть, — её, а
     где её нет (статьи, юрстраницы) — шапку. Снять отступ у шапки нельзя:
     она липкая и уезжает под тот же вырез, как только полоса прокручена.
*/
.s-cross {
  display: block;
  padding-top: var(--safe-top);
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  line-height: 1.35;
  transition: background var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .s-cross:hover {
    background: color-mix(in srgb, var(--accent-soft) 82%, var(--accent-ink));
    text-decoration: none;
  }
}

.s-cross-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1) var(--sp-3);
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-block: var(--sp-2);
  padding-inline: calc(var(--gutter) + var(--safe-left)) calc(var(--gutter) + var(--safe-right));
  text-align: center;
}

/* Вопрос — обычным весом: он адресует, а не зовёт. Зовёт вторая половина. */
.s-cross-q { color: color-mix(in srgb, var(--accent-ink) 78%, transparent); }

.s-cross-go {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 35%, transparent);
}

/* ── Шапка ─────────────────────────────────────────────────────────────── */

.s-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  padding-top: var(--safe-top);
}
.s-head-in {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--appbar-h);
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + var(--safe-left)) calc(var(--gutter) + var(--safe-right));
}

.s-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline: auto;
  min-width: 0;
  /* На узком экране пункты не переносятся в две строки и не выталкивают
     шапку за край — они прокручиваются пальцем. */
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.s-nav::-webkit-scrollbar { display: none; }
.s-nav a {
  flex: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  color: var(--ink2);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .s-nav a:hover { background: var(--surface3); color: var(--ink); text-decoration: none; }
}

.s-head-side { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; flex: none; }
.s-lang a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
@media (hover: hover) and (pointer: fine) { .s-lang a:hover { text-decoration: none; } }

/* До 900px в шапке остаются марка, язык и вход: шесть пунктов меню туда всё
   равно не влезают, а их место занимает содержимое страницы, которое и так
   идёт в том же порядке. Сам вход убирать нельзя — без него единственная
   ссылка в кабинет на телефоне лежала в подвале под всеми секциями
   (2026-08-25). */
@media (max-width: 900px) {
  .s-nav { display: none; }
}

/* На самых узких экранах марке, переключателю языка и входу втроём в одну
   строку уже тесно: полное имя марки — первое, чем можно пожертвовать, форма
   и логотип остаются узнаваемыми и без него. */
@media (max-width: 380px) {
  .brand-name { display: none; }
}

/* ── Первый экран ──────────────────────────────────────────────────────── */

.s-hero { padding-block: clamp(32px, 4vw + 16px, 76px) clamp(28px, 3vw, 56px); }
.s-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: calc(var(--gutter) + var(--safe-left)) calc(var(--gutter) + var(--safe-right));
}
@media (max-width: 860px) {
  .s-hero-in { grid-template-columns: minmax(0, 1fr); }
  /* Картинка уходит под текст: на телефоне первым экраном обязан быть ответ
     на вопрос «что это и сколько стоит», а не иллюстрация. */
  .s-hero-visual { order: 2; }
}

.s-eyebrow { color: var(--accent-ink); }

.s-hero-text h1 {
  margin-top: var(--sp-3);
  font-family: var(--ff-serif);
  font-size: clamp(30px, 3.1vw + 18px, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.s-hero-text .s-lead { max-width: 54ch; }

.s-chips { margin-top: var(--sp-5); gap: var(--sp-2); }

.s-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.s-cta .btn { flex: 0 1 auto; }
@media (max-width: 520px) {
  /* Главная кнопка во всю ширину — на телефоне это основной путь дальше. */
  .s-cta .btn { flex: 1 1 100%; }
}

.s-hero-text .s-note { margin-top: var(--sp-4); max-width: 46ch; }

.s-photo {
  width: 100%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

/* Карточка-«тетрадь»: стоит вместо портрета, пока портрета нет. Это не
   заглушка — это тот же приём, что и на уроке: показать шаг, на котором
   теряют балл. */
.s-note-card {
  position: relative;
  margin: 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transform: rotate(-0.6deg);
}

/* Линейка тетради нарисована на самом блоке с решением, а не на карточке —
   тем же приёмом, что зернистость бумаги в `base.css`: градиентом, без
   единого запроса наружу. На карточке она зависела бы от высоты заголовка
   над ней и разъезжалась со строками при любом изменении кегля; здесь шаг
   линейки и высота строки — одно и то же число, и совпадение гарантировано. */
.s-solve {
  display: flex;
  flex-direction: column;
  margin: var(--sp-4) calc(-1 * var(--sp-5)) 0;
  padding-inline: var(--sp-5);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 27px,
    var(--line-soft) 27px 28px
  );
}
.s-solve-line {
  font-family: var(--ff-mono);
  font-size: clamp(14px, 0.6vw + 12px, 17px);
  line-height: 28px;
  color: var(--ink2);
  letter-spacing: -0.01em;
}
.s-solve-mark {
  align-self: flex-start;
  color: var(--ink);
  background: var(--warn-soft);
  box-shadow: 0 0 0 4px var(--warn-soft);
  border-radius: var(--radius-sm);
}
.s-hand {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--ff-hand);
  font-size: 21px;
  line-height: 1.25;
  color: var(--accent-ink);
  transform: rotate(-1.5deg);
}
.s-note-caption {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink3);
}

/* ── Списки с галочками ────────────────────────────────────────────────── */

.s-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.s-list li { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink2); }
.s-i { flex: none; }
.s-i-ok { color: var(--pos); margin-top: 2px; }
.s-i-inline { width: 14px; height: 14px; vertical-align: -2px; }

/* ── Что делаем ────────────────────────────────────────────────────────── */

.s-two { gap: var(--sp-5); }
@media (max-width: 860px) { .s-two { grid-template-columns: minmax(0, 1fr); } }
.s-offer-card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.s-offer-card .subtle { font-size: var(--fs-sm); line-height: 1.6; }

/* ── Шаги ──────────────────────────────────────────────────────────────── */

.s-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: var(--sp-5);
  counter-reset: step;
}
.s-step { display: flex; align-items: flex-start; gap: var(--sp-3); }
.s-step h3 { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.s-step p { font-size: var(--fs-sm); line-height: 1.6; }
.s-step-n {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* ── Кабинет ───────────────────────────────────────────────────────────── */

/* Демонстрация — в широкой колонке слева, объяснение в узкой справа: сначала
   показать, потом объяснить. Порядок задаётся разметкой (демо идёт первым), а
   не `order`: иначе на телефоне, где колонка одна, объяснение оказалось бы
   выше того, что оно объясняет. */
.s-panel { gap: clamp(24px, 3vw, 48px); }
@media (max-width: 900px) { .s-panel { grid-template-columns: minmax(0, 1fr); } }

.s-demo { display: flex; flex-direction: column; gap: var(--sp-4); }
.s-demo-card { box-shadow: var(--shadow); }
.s-demo-hw { margin-left: clamp(0px, 3vw, 40px); }
@media (max-width: 640px) { .s-demo-hw { margin-left: 0; } }

.s-mini { min-width: 0; }
.s-mini-value {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 2px;
}

.s-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.s-task {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.s-task:last-child { border-bottom: none; }
.s-task-mark { display: inline-flex; flex: none; }
.s-task-label { color: var(--ink2); }
.s-task-hint { font-size: var(--fs-xs); min-width: 0; }
.s-task .chip { margin-left: auto; }

.s-hand-note {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line2);
  font-size: 20px;
}

.s-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.s-features h3 { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.s-features p { font-size: var(--fs-sm); line-height: 1.6; }

/* ── Цена ──────────────────────────────────────────────────────────────── */

@media (max-width: 860px) { .s-price { grid-template-columns: minmax(0, 1fr); } }
.s-price-value {
  font-family: var(--ff-serif);
  font-size: clamp(38px, 3vw + 24px, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.s-price-unit { font-size: var(--fs-sm); margin-top: var(--sp-2); }
.s-where h3 { font-size: var(--fs-md); }
.s-where .s-i { color: var(--ink3); }

/* ── Обо мне ───────────────────────────────────────────────────────────── */

.s-about-body { display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 40px); }
@media (max-width: 640px) { .s-about-body { flex-direction: column; } }
.s-about-photo {
  flex: none;
  width: clamp(120px, 14vw, 180px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.s-prose { max-width: 68ch; display: flex; flex-direction: column; gap: var(--sp-4); }
.s-prose p { color: var(--ink2); line-height: 1.65; }

/* Подпись от руки в конце рассказа о себе — единственное место, где страница
   переходит на «ты» без слов. Заодно закрывает пустоту справа от колонки
   текста на широком экране. */
.s-sign { margin: var(--sp-3) 0 0; }
.s-sign-name { font-size: 30px; margin-top: 0; }
.s-sign figcaption { margin-top: var(--sp-1); }

/* ── Вопросы ───────────────────────────────────────────────────────────── */

.s-faq-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.s-faq {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.s-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--ink);
  list-style: none;
}
/* Родной треугольник Safari рисуется поверх текста — свой значок ниже. */
.s-faq summary::-webkit-details-marker { display: none; }
.s-i-chev { color: var(--ink3); transform: rotate(90deg); transition: transform var(--t-fast) var(--ease); }
.s-faq[open] .s-i-chev { transform: rotate(-90deg); }
.s-faq-a { padding: 0 var(--sp-4) var(--sp-4); font-size: var(--fs-sm); line-height: 1.65; max-width: 68ch; }
@media (hover: hover) and (pointer: fine) { .s-faq summary:hover { background: var(--surface2); } }

/* ── Связаться ─────────────────────────────────────────────────────────── */

.s-contact-grid { gap: clamp(24px, 3vw, 44px); }
@media (max-width: 900px) { .s-contact-grid { grid-template-columns: minmax(0, 1fr); } }
.s-label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink3); }
.s-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.s-via { display: flex; flex-direction: column; gap: var(--sp-2); }
.s-radio { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink2); cursor: pointer; }
.s-submit { align-self: flex-start; }
@media (max-width: 520px) { .s-submit { align-self: stretch; } }
.s-form-note { line-height: 1.5; max-width: 52ch; }

/* Ловушка для ботов на заявке в бету (продуктовая страница).

   Не `display: none` и не `hidden`: простейшие сборщики форм пропускают
   скрытые так поля, и ловушка перестаёт ловить. Поле уводится за край экрана
   — для машины оно обычное и видимое, для человека его нет. `tabindex="-1"` в
   разметке не даёт попасть в него с клавиатуры, `aria-hidden` — скринридеру. */
.s-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.s-channels { display: flex; flex-direction: column; gap: var(--sp-3); }
.s-channels .btn { justify-content: flex-start; }

/* ── Подвал ────────────────────────────────────────────────────────────── */

.s-foot {
  border-top: 1px solid var(--line);
  background: var(--surface2);
  padding-block: clamp(28px, 3vw, 48px) calc(clamp(28px, 3vw, 48px) + var(--safe-bottom));
}
.s-foot-in { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-5) var(--sp-7); }
.s-foot-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-sm); margin-left: auto; }
.s-foot-note { flex: 1 1 100%; max-width: 70ch; line-height: 1.5; }

/* ── Статья-хаб ────────────────────────────────────────────────────────────

   Новых цветов, шрифтов и отступов здесь нет: всё те же токены, что у визитки,
   продукта и админки. Статья — не третий дизайн, а тот же дом с другим текстом.

   Своё у неё ровно одно: колонка текста уже, чем у лендинга. Лендинг читают
   по диагонали и он живёт секциями, статью читают строчками, а строка длиннее
   примерно семидесяти знаков теряется на возврате к началу следующей. */

.s-art-hero { padding-block: clamp(36px, 3vw + 24px, 72px) clamp(16px, 2vw, 28px); }
.s-art-hero h1 {
  margin-top: var(--sp-3);
  font-family: var(--ff-serif);
  font-size: clamp(28px, 2.4vw + 18px, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.s-art-hero .s-lead { max-width: 62ch; }

/* Оглавление. На узком экране меню в шапке скрыто, а статья длинная: без него
   единственный способ понять, о чём текст, — пролистать его целиком. */
.s-art-toc { padding-bottom: clamp(24px, 3vw, 44px); }
.s-art-toc-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  font-size: var(--fs-sm);
}
.s-art-toc-list li { counter-increment: toc; }
.s-art-toc-list li::before {
  content: counter(toc) ". ";
  font-family: var(--ff-mono);
  color: var(--ink3);
}

/* Карточка-разбор: образец отчёта, список того, чего ИИ не видит, расчёт часа.
   Подписи слева фиксированной ширины — глаз читает их как столбец, а не как
   начало каждой строки. Ниже 640 px столбец схлопывается: две колонки на
   телефоне дали бы подпись в три строки и текст в одно слово. */
.s-art-card { margin-top: var(--sp-6); }
.s-art-rows { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; }
.s-art-row {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-5);
}
.s-art-row + .s-art-row { border-top: 1px solid var(--line-soft); padding-top: var(--sp-4); }
.s-art-row dt {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-sm);
}
.s-art-row dd { margin: 0; line-height: 1.6; font-size: var(--fs-sm); }
@media (max-width: 640px) { .s-art-row { grid-template-columns: 1fr; } }

/* ── Юридические страницы ──────────────────────────────────────────────────

   Здесь длинный текст договора, а не лендинг: ширину колонки задаёт `.measure`
   на вложенном блоке (тот же идиом, что у остальных страниц), а всё, что ниже,
   отвечает только за читаемость самого документа — заголовки его разделов,
   таблицы обязанностей, поля бланка и правила печати.

   Новых цветов и шрифтов нет: те же токены `kit/base.css`, что у приложения. */

.s-doc-title {
  font-family: var(--ff-serif);
  font-size: clamp(24px, 1.6vw + 18px, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.s-doc-stamp { margin-top: var(--sp-2); }
.s-doc-draft, .s-doc-blanks { margin-top: var(--sp-5); }
.s-doc-print { margin-top: var(--sp-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

/* Оглавление документа. У регулямина двенадцать разделов: без него человек,
   которому нужен один параграф, читает всё подряд или не читает вовсе. */
.s-doc-toc {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
/* Своей нумерации у оглавления нет намеренно: разделы документов пронумерованы
   в самих документах («1. Kto przetwarza dane»), и вторая нумерация давала бы
   «1. 1. Kto przetwarza dane». */
.s-doc-toc-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* ── Тело документа ─────────────────────────────────────────────────────── */

.s-doc-body { margin-top: var(--sp-6); }
.s-doc-body > * + * { margin-top: var(--sp-4); }
.s-doc-body p { color: var(--ink2); line-height: 1.65; }
.s-doc-body h2 {
  margin-top: var(--sp-7);
  font-family: var(--ff-serif);
  font-size: clamp(20px, 1vw + 16px, 26px);
  line-height: 1.2;
  scroll-margin-top: calc(var(--appbar-h) + var(--sp-4));
}
/* Отступ под липкую шапку — на всех уровнях, а не только на втором: оглавление
   ведёт на самый крупный заголовок документа, а он у половины пакета `h3`
   (`#` документа уже стал заголовком раздела страницы). Без этого ссылка из
   оглавления кладёт заголовок под шапку, и человек видит середину абзаца. */
.s-doc-body h3,
.s-doc-body h4 { scroll-margin-top: calc(var(--appbar-h) + var(--sp-4)); }
.s-doc-body h3 { margin-top: var(--sp-6); font-size: var(--fs-lg); }
.s-doc-body h4 { margin-top: var(--sp-5); }
.s-doc-list { margin: 0; padding-left: var(--sp-5); color: var(--ink2); line-height: 1.65; }
.s-doc-list li + li { margin-top: var(--sp-2); }
.s-doc-list .s-doc-list { margin-top: var(--sp-2); }
.s-doc-body code {
  font-family: var(--ff-mono);
  font-size: 0.92em;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 1px 4px;
}
.s-doc-body blockquote { margin: 0; }
.s-doc-body blockquote > * + * { margin-top: var(--sp-2); }
.s-doc-body hr { margin-block: var(--sp-6); }

/* Таблица обязанностей — то место, ради которого мы не взяли готовую
   библиотеку разметки: осыпавшаяся в абзац таблица читается как другой
   документ. На узком экране она прокручивается внутри себя (`.scroll-x`),
   а не растягивает страницу. */
.s-doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.s-doc-table th, .s-doc-table td {
  border: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  vertical-align: top;
}
.s-doc-table th { background: var(--surface2); color: var(--ink); font-weight: 600; }
.s-doc-table td { color: var(--ink2); }
.s-doc-table td:empty { background: var(--surface2); }

/* Таблица от четырёх колонок не сжимается до нечитаемых столбиков, а честно
   уезжает за край и прокручивается внутри `.scroll-x`. Пять колонок
   подпроцессоров на телефоне иначе дают по сто пикселей на колонку — слова
   переносятся по слогам, и таблица обязанностей перестаёт читаться как
   таблица. Обрезанный край при этом сам говорит, что её можно листать. */
.s-doc-table-wide { min-width: 620px; }

/* Незаполненный реквизит услугодавца — видимая дыра, а не пробел: пустое место
   читается как оплошность вёрстки, а помеченное — как «документ не дописан»,
   чем он и является, пока владелец не впишет данные. */
.s-doc-gap {
  background: var(--warn-soft);
  color: var(--warn-ink);
  border-radius: var(--radius-sm);
  padding: 0 4px;
}

/* Поле бланка. Заполняет его репетитор ручкой после печати — оно и обязано
   выглядеть полем, а не ошибкой сборки. */
.s-doc-blank {
  border-bottom: 1px dashed var(--line2);
  color: var(--ink3);
  font-family: var(--ff-mono);
  font-size: 0.92em;
}

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

   PDF мы не рисуем и кнопку «Pobierz PDF» не показываем: браузер печатает
   лучше любой библиотеки, а кнопка, за которой ничего нет, — обещание, которого
   код не выполняет. Задача этих правил — чтобы напечатанное было тем же
   документом: без меню и подвала, с раскрытыми адресами ссылок и с таблицами,
   которые не рвутся по строкам. */

@media print {
  .s-head, .s-foot, .s-skip, .s-cross, .s-doc-print, .s-doc-toc { display: none !important; }

  .s-body { background: #fff; }
  .s-sec, .s-sec-alt, .s-art-hero { background: #fff !important; padding-block: 0; }
  .s-in, .measure { max-width: none; width: auto; padding-inline: 0; }
  .s-doc + .s-doc { margin-top: 24pt; }

  /* На бумаге ссылка без адреса бесполезна: читателю остаётся подчёркнутое
     слово, за которым ничего нет. */
  .s-doc-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }

  /* Заголовок раздела не должен оставаться внизу листа один, а таблица
     обязанностей — рваться между листами по строке. */
  .s-doc-title, .s-doc-body h2, .s-doc-body h3 { break-after: avoid-page; }
  .s-doc-body table, .s-doc-body tr, .s-doc-body blockquote { break-inside: avoid; }
  .scroll-x { overflow: visible; }

  /* Рамка про черновик печатается намеренно: распечатанный документ обязан
     говорить о своём статусе так же ясно, как страница. */
  .s-doc-draft, .s-doc-blanks { border: 1pt solid #999; }
}