/* РевизорБОТ — общая вёрстка контентных страниц: /, /pricing, /security,
   /partners, /kalkulyator-kompensacii (56_тексты_публичных_страниц_v2.md).
   Подключается в base.html после landing.css. Только токены из tokens.css,
   слой components (порядок слоёв объявлен в fonts.css).

   Три уровня веса (56_, 0.4 п. 2): крупно — заголовок, цена, выгода;
   обычным — что получите; мелко (.fine, .tag-note, <details>) — условия.
   Абзацы — «прозаической» ширины (~65ch), а блоки (таблицы, FAQ, сетки
   плиток) — на всю ширину контейнера.

   Компоненты (разметка — в шаблонах, макросы — app/templates/_content.html):
     .page-head          первый экран внутренней страницы: h1 + .lead + .actions + .fine
     .section-head       заголовок секции (eyebrow + h2 + .lead), .center — по центру
     .prose              текстовый блок ~65ch
     .fine / .section-foot  второстепенное под блоком: мелко, приглушённо
     .feature-grid > .feature  плитки «иконка + h3 + 1–2 предложения» (2×2 или 4 в ряд)
     .cmp-wrap > .cmp    таблица сравнения, .is-us — выделенная колонка;
                         на узком контейнере (<640px) — карточки по строкам
     .timeline           горизонтальный таймлайн (десктоп) / вертикальный (телефон)
     .faq-groups > .faq-group  FAQ с группами: заголовок группы слева, вопросы справа
     .faq-list           аккордеон на всю ширину, вопрос — тап-зона ≥44px
     .split              секция «H2 слева — текст справа» (/security)
     .fact-row           строка из 2–4 фактов с иконками
     .mini-table         компактная таблица цен (кабинеты, примеры цены документа)
     .final-cta .actions финальный призыв: 1–2 кнопки + строка снятия возражения */

@layer components {

/* ---------- Первый экран внутренней страницы ---------- */
.page-head { padding: var(--space-6) 0 var(--space-7); max-width: 780px; }
@media (max-width: 720px) { .page-head { padding: var(--space-3) 0 var(--space-6); } }
.page-head h1 { font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3rem); margin-bottom: var(--space-4); }
.page-head .lead { max-width: 62ch; margin-bottom: 0; }
.page-head .actions { margin-top: var(--space-5); }
.page-head .eyebrow { margin-bottom: var(--space-3); }
.page-head .lead + .fine { margin-top: var(--space-3); }
.page-head .actions + .fine { margin: var(--space-3) 0 0; }

/* ---------- Заголовок секции ---------- */
.section-head { max-width: 720px; }
.section-head h2 { margin-bottom: var(--space-3); }
.section-head .lead { margin: 0; max-width: 62ch; }
.section-head .eyebrow { margin-bottom: var(--space-3); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }
.section-head.center .eyebrow { justify-content: center; }

/* ---------- Текст ---------- */
.prose { max-width: 65ch; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin-bottom: var(--space-3); }
/* Второстепенное: уточнение, условие, подпись под блоком. Мельче основного
   текста и приглушено, но не мельче --fs-small — читается без усилий. */
.fine { font-size: var(--fs-small); color: var(--color-ink-muted); line-height: 1.5; }
.section-foot {
  margin-top: var(--space-5);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-5);
  font-size: var(--fs-small); color: var(--color-ink-muted);
}
.section-foot > * { margin: 0; }
.section-foot.center { justify-content: center; text-align: center; }
.nw { white-space: nowrap; }
.link-arrow { font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }

/* Ряд кнопок + подпись под ним (снятие возражения одной строкой). */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.actions + .fine, .actions + .hero-fine { margin-top: var(--space-3); }
@media (max-width: 480px) {
  .actions > .btn { flex: 1 1 100%; }
  .actions > .btn.lg { --btn-px: var(--space-4); }
}

/* «Подробнее» без JS: раскрывающийся <details> второстепенного веса. */
.more { margin-top: var(--space-3); }
.more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; font-size: var(--fs-small); font-weight: 600; color: var(--color-primary);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary .icon { width: 16px; height: 16px; transition: transform var(--transition); }
.more[open] > summary .icon { transform: rotate(180deg); }
.more > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.more-body {
  font-size: var(--fs-small); color: var(--color-ink-muted);
  border-left: 2px solid var(--color-border); padding: 2px 0 2px var(--space-4); margin: var(--space-2) 0 0;
}
.more-body > :last-child { margin-bottom: 0; }
.more-body ol, .more-body ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }

/* ---------- Плитки «иконка + заголовок + 1–2 предложения» ---------- */
.feature-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .feature-grid.cols-3, .feature-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .feature-grid, .feature-grid.cols-3, .feature-grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
}
.feature {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
}
.feature .f-ic {
  width: 40px; height: 40px; border-radius: var(--radius); flex: none; margin-bottom: var(--space-1);
  display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary);
}
.feature h3 { font-size: 1.1rem; margin: 0; }
.feature p { margin: 0; color: var(--color-ink-muted); }
@media (max-width: 600px) {
  /* На телефоне плитка — строкой: иконка слева, текст справа. Экономит
     полэкрана на четырёх плитках и читается как список. */
  .feature { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-4); row-gap: 2px; padding: var(--space-4); }
  .feature .f-ic { grid-row: span 2; margin: 0; }
}

/* ---------- Таблица сравнения ---------- */
/* Колонка «Контроль» — первая после подписей строк, на тонированном фоне;
   остальные колонки нейтральные и мельче. На узком контейнере — карточки по
   строкам (не горизонтальный скролл): подпись строки → «Контроль» первой
   тонированной строкой → остальные способы мелко. Раскладку решает ширина
   обёртки (@container), а не окна. */
.cmp-wrap {
  container-type: inline-size;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden;
}
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--fs-small); }
.cmp th, .cmp td {
  padding: 14px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  text-transform: none; letter-spacing: 0; font-size: inherit;
}
.cmp thead th {
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--color-ink);
  vertical-align: bottom; background: var(--color-surface-2);
}
.cmp thead th:first-child { width: 21%; }
.cmp thead th.is-us { width: 23%; }
.cmp tbody th { font-weight: 600; color: var(--color-ink); }
.cmp td { color: var(--color-ink-muted); }
.cmp .is-us { background: var(--color-primary-soft); color: var(--color-ink); }
.cmp thead th.is-us { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)); }
.cmp td.is-us { font-weight: 500; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cell { display: inline-flex; align-items: flex-start; gap: 8px; }
.cmp .cell { display: flex; }
.cell-text { min-width: 0; }
/* 60_замечания_владельца п.10: значки читаются в обеих темах, контраст
   знака к фону ≥3:1 (и к белому/тёмному фону карточки, и к тонированной
   колонке «Контроль»). Иерархия веса: ✓ — залитый зелёный круг; ≈ —
   янтарное кольцо; — — нейтральное серое кольцо. Смысл дублирует текст
   рядом и скрытая подпись для скринридера.
   Светлая: ✓ #2D7A55 5.2:1 · ≈ #9A6700 4.9:1 (4.1:1 на «Контроле») · — #6F7C77 4.4:1 (3.7:1).
   Тёмная:  ✓ #4FBF9F 7.3:1 · ≈ #F2B93B 9.2:1 · — #8A9993 5.5:1 (4.6:1). */
:root { --mark-yes: var(--color-success); --mark-yes-ink: var(--color-primary-ink); --mark-part: #9A6700; --mark-no: #6F7C77; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --mark-part: var(--amber-400); --mark-no: #8A9993; }
}
:root[data-theme="dark"] { --mark-part: var(--amber-400); --mark-no: #8A9993; }
.mark {
  flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center;
}
.mark .icon { width: 13px; height: 13px; stroke-width: 2.8; }
.mark.yes { background: var(--mark-yes); color: var(--mark-yes-ink); }
.mark.part { background: transparent; color: var(--mark-part); box-shadow: inset 0 0 0 1.75px var(--mark-part); }
.mark.no { background: transparent; color: var(--mark-no); box-shadow: inset 0 0 0 1.5px var(--mark-no); }
.cmp-legend {
  list-style: none; margin: 0 0 var(--space-3); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
  font-size: var(--fs-small); color: var(--color-ink-muted);
}
.cmp-legend li { display: inline-flex; align-items: center; gap: 8px; }

/* 60_ п.5: строка «Несколько кабинетов?» под карточками тарифов (_plans.html)
   — второй акцент: без карточки и заливки, тонкая линейка сверху. */
.plans-more {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3);
  margin: var(--space-5) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border);
  font-size: var(--fs-small); color: var(--color-ink-muted);
}
.plans-more > .icon { width: 18px; height: 18px; color: var(--color-primary); }
.plans-more-text { flex: 1 1 320px; min-width: 0; }
.plans-more-text strong { color: var(--color-ink); font-weight: 600; }
.plans-more .link-arrow { min-height: 32px; }
/* /agentstvam (60_ п.5): сноска под списком для бухгалтера и карточка
   «Рекомендуете сервис клиентам?» — текст слева, ссылка справа. */
.acc-note { margin: var(--space-5) 0 0; max-width: 65ch; }
.partner-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.partner-cta > div { flex: 1 1 380px; min-width: 0; }
.partner-cta h2 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.partner-cta p { margin: 0; color: var(--color-ink-muted); max-width: 60ch; }
@media (max-width: 560px) {
  .plans-more { align-items: flex-start; }
  .plans-more > .icon { margin-top: 2px; }
  .plans-more-text { flex-basis: calc(100% - 30px); }
  .plans-more .link-arrow { margin-left: 30px; min-height: 44px; }
}
@container (max-width: 640px) {
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* 60_ п.10: единая сетка во всех строках карточки — колонка подписи
     фиксированной ширины в rem (раньше em: у строки «Контроль» шрифт
     крупнее, и значки съезжали вправо), одинаковый горизонтальный отступ
     у тонированной и обычных строк, значок и текст — в одной колонке. */
  .cmp tr { padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); }
  .cmp tbody tr:last-child { border-bottom: 0; }
  .cmp tbody th { padding: 0 10px var(--space-2); border: 0; font-family: var(--font-display); font-size: 1rem; }
  .cmp td {
    border: 0; padding: 6px 10px; border-radius: var(--radius-sm);
    display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); column-gap: var(--space-3); align-items: start;
    font-size: var(--fs-small); line-height: 1.4;
  }
  .cmp td::before { content: attr(data-col); color: var(--color-ink-muted); font-size: var(--fs-micro); line-height: 1.55; padding-top: 1px; }
  .cmp td.is-us { padding-top: 8px; padding-bottom: 8px; margin-bottom: 4px; }
  .cmp td.is-us::before { color: var(--color-primary); font-weight: 600; font-size: var(--fs-small); line-height: 1.4; padding-top: 0; }
  .cmp .cell { gap: 10px; }
  .mark { margin-top: 0; }
}

/* ---------- Таймлайн ---------- */
/* <ol>, не таблица (56_, 8 п. 5). Десктоп — шаги в ряд, между точками линия;
   телефон — вертикальный список, день над текстом, линия слева. */
.timeline {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--tl-steps, 5), minmax(0, 1fr)); gap: var(--space-5);
}
.timeline > li { position: relative; padding-top: 34px; min-width: 0; }
.timeline > li::before {
  content: ""; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--color-surface); border: 3px solid var(--color-primary); box-sizing: border-box; z-index: 1;
}
.timeline > li::after {
  content: ""; position: absolute; top: 11px; left: 16px; right: calc(-1 * var(--space-5)); height: 2px;
  background: var(--color-border-strong);
}
.timeline > li:last-child::after { display: none; }
.timeline > li.is-money::before { border-color: var(--color-amber); background: var(--color-amber); }
.timeline > li.is-open::before { background: var(--color-primary); }
.tl-day {
  display: block; font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-primary); margin-bottom: 6px;
}
.tl-text { margin: 0 0 6px; color: var(--color-ink); font-weight: 500; }
.tl-note { margin: 0; font-size: var(--fs-small); color: var(--color-ink-muted); line-height: 1.5; }
@media (max-width: 860px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .timeline > li { padding: 0 0 var(--space-5) 34px; }
  .timeline > li:last-child { padding-bottom: 0; }
  .timeline > li::before { top: 2px; }
  .timeline > li::after { top: 20px; bottom: 0; left: 7px; right: auto; width: 2px; height: auto; }
}

/* ---------- FAQ ---------- */
/* Аккордеон на всю ширину контейнера: вся строка вопроса — тап-зона
   (padding на summary, а не на details), ответ — прозаической ширины. */
.faq-list { border-top: 1px solid var(--color-border); }
.faq-list details, .faq-list details:first-child { padding: 0; }
.faq-list summary { padding: 14px 0; min-height: 56px; font-size: 1.02rem; }
.faq-list summary:hover .faq-q { color: var(--color-primary); }
.faq-list .accordion-body { padding: 0 0 var(--space-5); max-width: 75ch; }
.faq-list .accordion-body p { margin: 0 0 var(--space-2); }
.faq-list .accordion-body > :last-child { margin-bottom: 0; }
.faq-groups { display: grid; gap: var(--space-6); }
.faq-group { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: var(--space-3) var(--space-7); align-items: start; }
.faq-group > h3 {
  margin: 14px 0 0; font-size: var(--fs-small); font-family: var(--font-mono); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-ink-muted);
}
@media (max-width: 860px) {
  .faq-group { grid-template-columns: minmax(0, 1fr); }
  .faq-group > h3 { margin: 0; }
}

/* ---------- Секции «H2 слева — текст справа» ---------- */
.split-list { display: grid; }
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3) var(--space-7);
  padding: var(--space-6) 0; border-top: 1px solid var(--color-border);
}
.split:first-child { border-top: 0; padding-top: 0; }
.split > h2 { font-size: var(--fs-h3); margin: 0; }
.split > .prose { min-width: 0; }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); padding: var(--space-5) 0; }
}

/* ---------- Строка фактов с иконками ---------- */
.fact-row {
  list-style: none; margin: var(--space-5) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3) var(--space-5);
  font-size: var(--fs-small); color: var(--color-ink-muted);
}
.fact-row li { display: flex; align-items: flex-start; gap: 10px; }
.fact-row .icon { color: var(--color-success); margin-top: 1px; }

/* ---------- Компактная таблица цен ---------- */
.mini-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.mini-table th, .mini-table td { padding: 12px 0; border-bottom: 1px solid var(--color-border); vertical-align: baseline; }
.mini-table thead th {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-micro); color: var(--color-ink-muted);
  text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0;
}
.mini-table th + th, .mini-table td + td { padding-left: var(--space-4); }
.mini-table .num, .mini-table .end { text-align: right; white-space: nowrap; }
.mini-table tbody tr:last-child > * { border-bottom: 0; }
.mini-table .sub { display: block; font-size: var(--fs-micro); color: var(--color-ink-muted); font-family: var(--font-body); }
@media (max-width: 420px) { .mini-table .col-aux { display: none; } }

/* ---------- Две колонки «основное + сбоку» ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.duo.wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 860px) { .duo, .duo.wide-left { grid-template-columns: minmax(0, 1fr); } }
.card.soft { background: var(--color-surface-2); border-color: transparent; }
.card h3 + .fine, .card h3 + p { margin-top: 0; }

/* ---------- Кому подходит (второстепенно) ---------- */
.audience {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-7);
}
.audience li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); align-items: start; color: var(--color-ink-muted); }
.audience li strong { color: var(--color-ink); }
.audience .a-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--color-surface-2); color: var(--color-ink-muted); }
.audience .a-ic .icon { width: 18px; height: 18px; }
@media (max-width: 720px) { .audience { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Тарифы: доработки под тексты v2 ---------- */
/* Строка «для чего / за что цена» — одна строка обычного веса, приглушённо;
   подпись под кнопкой — самое мелкое в карточке. */
.plan-card p.plan-fine { font-size: var(--fs-small); color: var(--color-ink-muted); line-height: 1.45; }
.plan-card .plan-cta-note { font-size: var(--fs-micro); color: var(--color-ink-muted); text-align: center; }
.plan-card.featured { background: linear-gradient(180deg, var(--color-primary-soft), var(--color-surface) 45%); }
/* Две карточки уровней на /partners: та же карточка тарифа, но без бейджа —
   5 рядов subgrid вместо 6. */
.pricing-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .pricing-grid.cols-2 { grid-template-columns: minmax(0, 1fr); } }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 721px) {
    .plans.plans-5 { grid-template-rows: auto auto auto 1fr auto; row-gap: 0; column-gap: var(--space-5); }
    .plans.plans-5 > .plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; container-type: normal; }
  }
}

/* ---------- Карточки «что находим»: бейдж статуса функции ---------- */
.finding-card .fc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); }
.finding-card .fc-head h3 { margin: 0; }

/* ---------- Калькуляторы ---------- */
.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 860px) { .calc-layout { grid-template-columns: minmax(0, 1fr); } }
.calc-layout > .card, .calc-layout > .calc-box { margin-top: 0; }
.calc-box .field { margin-bottom: 0; }
.calc-box .calc-result { margin-top: var(--space-4); }
.calc-result .calc-breakdown { margin: 6px 0 0; }
.card-foot { margin: var(--space-4) 0 0; display: grid; gap: var(--space-2); }
.card-foot > * { margin: 0; }
.calc-doc-type button .opt-name { display: block; font-weight: 600; }
.calc-doc-type button .opt-range { display: block; font-family: var(--font-mono); font-size: var(--fs-micro); margin-top: 2px; }
/* Поля калькулятора партнёра: подпись, поле и подсказка — по одной сетке в обеих
   колонках, даже если подпись переносится на вторую строку. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 641px) {
    .pcalc-grid { grid-template-rows: auto auto auto; row-gap: 0; }
    .pcalc-grid > .field { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-items: end; }
    .pcalc-grid > .field > .hint { align-self: start; }
  }
}
.calc-rows { margin: 0; }
.calc-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--space-4);
  padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-small);
}
.calc-row > :last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-row.is-key { font-size: var(--fs-body); }
.calc-row.is-total { border-bottom: 0; padding-top: var(--space-3); }
.calc-row.is-total .calc-price { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.calc-row.is-aux { color: var(--color-ink-muted); border-bottom: 0; padding-top: 0; }
.calc-bridge {
  margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius);
  background: var(--color-primary-soft);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
}
.calc-bridge p { margin: 0; flex: 1 1 240px; font-size: var(--fs-small); color: var(--color-ink); }
.deadline-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); font-size: var(--fs-small); }
.deadline-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.deadline-list .icon { color: var(--color-ink-muted); width: 18px; height: 18px; margin-top: 2px; }
.card-h { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
@media (min-width: 861px) { .sticky-card { position: sticky; top: calc(var(--header-h) + var(--space-4)); } }
.calc-deadlines { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.calc-deadlines h3 { font-size: 1.05rem; margin: 0 0 var(--space-3); }
.calc-deadlines .tag-note { margin: var(--space-3) 0 0; }
.calc-rows + .tag-note { margin: var(--space-2) 0 0; }
.calc-disclaimer { margin-bottom: var(--space-2); }
.calc-disclaimer .more { margin-top: var(--space-1); }
.comp-form .checkbox-row { display: flex; margin: var(--space-2) 0 0; color: var(--color-ink); }
.hint-inline { display: block; font-size: var(--fs-micro); color: var(--color-ink-muted); margin-top: 2px; }
.field .hint + .more { margin-top: 0; }
.field .more > summary { min-height: 32px; font-size: var(--fs-micro); }

/* ---------- Финальный призыв ---------- */
@media (max-width: 720px) { .final-cta { padding: var(--space-6) 0; } }
.final-cta .lead { color: inherit; opacity: 0.88; margin: 0 auto var(--space-5); max-width: 56ch; }
.final-cta .actions { justify-content: center; }
.final-cta .fine { margin: var(--space-4) 0 0; }
/* На тёмной ленте главная кнопка — янтарная (56_, 0.1: [CTA primary]),
   вторая — контурная светлая. Раньше это был инлайн-стиль на каждой странице. */
.band-dark .btn.on-band { background: var(--color-amber); color: var(--color-amber-ink); border-color: transparent; }
.band-dark .btn.on-band:hover { background: color-mix(in srgb, var(--color-amber) 88%, #fff); }
.band-dark .btn.secondary.on-band-alt {
  background: transparent; color: var(--color-band-ink); box-shadow: none;
  border-color: color-mix(in srgb, var(--color-band-ink) 45%, transparent);
}
.band-dark .btn.secondary.on-band-alt:hover { background: color-mix(in srgb, var(--color-band-ink) 12%, transparent); }
.band-dark .steps-cta { margin-top: var(--space-6); }

/* ---------- Плашка «как отличить нас от мошенников» ---------- */
.scam-warning p + p { margin-top: var(--space-2); }
.fact-row + .scam-warning, .trust-cols + .scam-warning { margin-top: var(--space-5); }
.split-list + .scam-warning { margin-top: var(--space-4); }
.page-actions { margin-top: var(--space-5); }
.actions > .fine { margin: 0; }
.trust-list.rules .icon { color: var(--color-ink-muted); }

/* ======================================================================
   59_QA_публичных_страниц_v2.md — доводка вёрстки (номера пунктов QA).
   ====================================================================== */

/* п.16, 23: у тёмной скруглённой панели нет разделителя сверху и снизу —
   линия .section + .section упиралась в скруглённые углы. */
.section.band-dark + .section, .section + .section.band-dark { border-top: 0; }

/* п.17, 28: страница кончается финальной панелью — вместо 64 + 96 px до
   линии подвала обычный отступ между блоками. */
.main-content:has(> .section.band-dark:last-child) { padding-bottom: 0; }
.main-content:has(> .section.band-dark:last-child) + .site-footer { margin-top: var(--space-7); }

/* п.13: определение сервиса под H2 — подписью, не вторым лидом. */
.section-head .section-sub { margin: 0; max-width: 68ch; font-size: var(--fs-small); color: var(--color-ink-muted); line-height: 1.5; }

/* п.2, 14, 19: карточки находок — 2 колонки на планшете; чип срока может
   перенестись, но не обрезаться; ссылка — в своём слоте внизу карточки
   (пустой слот у карточек без ссылки), поэтому суммы в ряду на одной линии. */
@media (min-width: 641px) and (max-width: 1023px) {
  .grid.cols-3.findings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.finding-card .fc-deadline { white-space: normal; max-width: 100%; }
.finding-card .fc-deadline .icon { flex: none; }
.finding-card .fc-foot { min-height: 32px; display: flex; align-items: center; }
.finding-card .fc-foot .fc-link { margin-top: 0; }
@media (max-width: 640px) { .finding-card .fc-foot:empty { display: none; } }

/* п.24, 25: «Три шага» на тёмной панели ниже 900px — в одну колонку,
   номер в строку с заголовком, шаги плотнее. */
@media (max-width: 900px) {
  .band-dark .grid.cols-3:has(> .step-card) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .band-dark .step-card { padding-top: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--space-3); align-items: center; }
  .band-dark .step-card .step-num { margin: 0; }
  .band-dark .step-card h3 { margin: 0; }
  .band-dark .step-card p { grid-column: 2; margin: 6px 0 0; }
}

/* п.9: пустое место шириной знака в строке таблицы сравнения. */
.mark.pad { background: none; box-shadow: none; }

/* п.3, 7: сноска под таблицей — своей строкой, под ней главная кнопка;
   такая же кнопка — сразу после таймлайна. */
.cmp-note { margin: var(--space-4) 0 0; font-size: var(--fs-small); }
.section-cta { margin-top: var(--space-5); }
.timeline + .section-cta { margin-top: var(--space-6); }
.section-cta + .section-foot { margin-top: var(--space-4); }

/* п.10: ползунок и поле — друг под другом на узком экране. */
@media (max-width: 480px) {
  .calc-slider-row { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .calc-slider-row input[type="range"] { flex: none; width: 100%; min-height: 32px; }
  .calc-slider-row .input { max-width: none; }
}

/* п.11, 22: две карточки калькулятора одной высоты (/pricing, /partners). */
.calc-layout.is-even { align-items: stretch; }
.calc-layout.is-even > .calc-box { display: flex; flex-direction: column; }
.calc-layout.is-even > .calc-box .calc-result { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.calc-box .calc-cta { margin-top: var(--space-4); }
@media (max-width: 480px) { .calc-box .calc-cta > .btn { flex: 1 1 100%; } }

/* п.21: сумма в разборе расчёта всегда справа в своей строке, переносится
   только подпись. */
.calc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); row-gap: 4px; }
.calc-row > :last-child { text-align: right; }

/* п.5: мини-панель итога калькулятора компенсации (≤860px). */
.comp-mini { display: none; }
@media (max-width: 860px) {
  .comp-mini.is-visible {
    display: flex; align-items: center; gap: var(--space-3);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid var(--color-border);
  }
  .comp-mini-label { font-size: var(--fs-small); color: var(--color-ink-muted); }
  .comp-mini-sum { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.15rem; white-space: nowrap; }
  .comp-mini-link { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; white-space: nowrap; }
}

/* п.20: калькулятор компенсации на десктопе — форма и сроки слева, разбор
   с итогом справа закреплён (.sticky-card) на всю высоту двух рядов. На
   телефоне порядок DOM: форма → разбор → сроки. */
@media (min-width: 861px) {
  .calc-layout.comp-layout { grid-template-areas: "form result" "dl result"; }
  .comp-layout > .comp-form { grid-area: form; }
  .comp-layout > .sticky-card { grid-area: result; align-self: start; }
  .comp-layout > .comp-deadlines { grid-area: dl; }
}
.card.comp-deadlines { margin-top: 0; padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
/* п.5: форма ближе к первому экрану на телефоне. */
.calc-disclaimer + .section { padding-top: var(--space-5); }
.comp-form > .field:first-child > label { margin-top: 0; }

/* п.26: справочные разделы /security — свёрнуты, как FAQ. Текст при
   раскрытии встаёт в правую колонку, как у раскрытых разделов выше. */
.split-more { display: block; padding: 0; border-top: 1px solid var(--color-border); }
.split-more:last-child { border-bottom: 1px solid var(--color-border); }
.split-more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); min-height: 56px; padding: 12px 0;
}
.split-more > summary::-webkit-details-marker { display: none; }
.split-more > summary h2 { font-size: 1.1rem; margin: 0; }
.split-more > summary:hover h2 { color: var(--color-primary); }
.split-more > summary .chevron { flex: none; width: 18px; height: 18px; color: var(--color-ink-muted); transition: transform var(--transition); }
.split-more[open] > summary .chevron { transform: rotate(180deg); }
.split-more > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
.split-more > .prose { padding: 0 0 var(--space-5); }
@media (min-width: 861px) {
  .split-more > .prose { margin-left: calc((100% - var(--space-7)) / 3 + var(--space-7)); }
}
.split + .split-more { margin-top: var(--space-3); }

/* п.27: карточки «Читаем / Не читаем» — на всю ширину правой колонки. */
.split > .prose:has(> .trust-cols) { max-width: none; }
.split > .prose:has(> .trust-cols) > p { max-width: 65ch; }

/* п.32: кнопки cookie-баннера на узком экране — в столбец, одинаковой
   ширины (/cookies обещает равнозначные кнопки). */
@media (max-width: 400px) {
  .cookie-banner .cookie-banner-actions { flex-direction: column; }
  .cookie-banner .cookie-banner-actions .btn { flex: none; width: 100%; }
}

/* ======================================================================
   60_замечания_владельца_моб_25-09.md п.16 — калькулятор компенсации.
   ====================================================================== */
.comp-form-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-4); margin-bottom: var(--space-3); }
.comp-form-title { font-size: 1.05rem; margin: 0; }
.comp-sources { margin: 0; }
.comp-sources > summary { min-height: 44px; }
.comp-sources[open] { flex-basis: 100%; }
.comp-src { margin: 0; display: grid; gap: 2px 0; }
.comp-src dt { font-weight: 600; color: var(--color-ink); margin-top: var(--space-2); }
.comp-src dt:first-child { margin-top: 0; }
.comp-src dd { margin: 0; }
/* Поля — сеткой 2 колонки: короткие числовые парами, цена и себестоимость
   на всю ширину. Одна колонка только на совсем узкой карточке. */
.comp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
.comp-grid > .field { margin: 0; min-width: 0; }
.comp-grid > .span-2 { grid-column: 1 / -1; }
@container (max-width: 220px) { .comp-grid { grid-template-columns: minmax(0, 1fr); } }
.comp-form .field label { margin-bottom: 6px; }
.comp-form .field .hint, .comp-form .field .error-text { margin: 6px 0 0; }
@media (max-width: 400px) {
  .comp-layout > .card { padding: var(--space-4); }
  .comp-layout .calc-bridge { padding: var(--space-3) var(--space-4); }
}
.label-opt { font-weight: 400; color: var(--color-ink-muted); font-size: var(--fs-micro); white-space: nowrap; }
/* Единица измерения — суффиксом внутри поля, число не наезжает на неё. */
.input-affix { position: relative; }
.input-affix > .input { padding-right: 44px; font-variant-numeric: tabular-nums; }
.input-affix > .affix {
  position: absolute; right: 0; top: 0; bottom: 0; width: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-muted); font-size: var(--fs-small); pointer-events: none;
}
/* Поле даты: iOS Safari рисует нативный контрол со своей минимальной
   шириной и текстом по центру — поле вылезало за карточку (IMG_3148). */
.input.input-date {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  -webkit-appearance: none; appearance: none;
  text-align: left; line-height: 44px;
}
.input.input-date::-webkit-date-and-time-value { text-align: left; margin: 0; }
.input.input-date::-webkit-calendar-picker-indicator { margin-left: auto; }
.comp-dates { border: 0; margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border); min-width: 0; }
.comp-dates > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--color-ink); }
.comp-dates > legend + * { clear: both; }
.comp-dates .field { margin-bottom: var(--space-3); }
.comp-form .comp-dates .checkbox-row { margin: 0; }

/* Итог — первым и крупно, разбор — ниже компактными шагами. */
.comp-result .card-h { font-size: 1.05rem; margin-bottom: var(--space-3); }
.comp-total { display: grid; gap: 2px; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--color-surface-2); }
.comp-total-label { font-size: var(--fs-small); color: var(--color-ink-muted); }
.comp-total .calc-price { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.7rem, 1.4rem + 1.6vw, 2.3rem); line-height: 1.15; font-weight: 600; overflow-wrap: anywhere; }
.comp-total-sub { font-size: var(--fs-small); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.comp-cost-line { margin: var(--space-3) 0 0; font-size: var(--fs-small); color: var(--color-ink-muted); }
.comp-cost-line strong { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-ink); white-space: nowrap; }
.comp-steps-title { font-size: var(--fs-small); font-family: var(--font-body); font-weight: 600; color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: var(--space-5) 0 var(--space-1); }
.comp-steps { list-style: none; padding: 0; margin: 0; }
.comp-steps .calc-row { padding: 8px 0; align-items: center; }
.comp-steps .calc-row:last-child { border-bottom: 0; }
.comp-steps .calc-row > span { display: grid; gap: 1px; }
.calc-f { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--color-ink-muted); }
.comp-steps .calc-row > strong { font-weight: 500; }
.comp-steps .calc-row.is-key > span { font-weight: 600; }
.comp-steps .calc-row.is-key > strong { font-weight: 600; }

} /* @layer components */

/* .fine на тёмной ленте: в том же слое, что и .muted-переопределение ленты
   (landing.css, @layer utilities) — иначе приглушённый цвет sage почти
   сливается с зелёным фоном в светлой теме. */
@layer utilities {
  .section.band-dark .fine, .section.band-dark .tl-note { color: color-mix(in srgb, var(--color-band-ink) 78%, transparent); }
}