/* ═══════════════════════════════════════════════════════════════════
   content.css — стили статических контент-страниц (гайды / FAQ).
   Дизайн-язык «Ledger» (s42): тёплая бумага/ink, Onest для заголовков,
   зелёный = акцент (не заливка), card-ledger без green-flood, kicker-лейблы.
   Токены синхронизированы с src/index.css (OKLCH, light). Источник правды по
   палитре/идиомам — src/index.css; при изменении бренда обновить обе точки.
   Эти страницы статические (вне SPA/Tailwind), поэтому стили автономны.
   ═══════════════════════════════════════════════════════════════════ */

/* Шрифты Inter (тело) + Onest (заголовки) подключаются через <link> в <head>
   страницы (см. scripts/build-content.mjs) — быстрее render-blocking @import. */

:root {
  --background: oklch(0.987 0.007 84);            /* тёплая бумага */
  --foreground: oklch(0.215 0.014 70);            /* глубокий тёплый ink */
  --card: oklch(0.996 0.004 84);                  /* near-white warm */
  --muted: oklch(0.955 0.006 84);                 /* warm light grey */
  --muted-foreground: oklch(0.495 0.013 72);      /* warm muted text */
  --text-secondary: oklch(0.37 0.012 72);         /* читаемый вторичный */
  --border: oklch(0.895 0.008 84);                /* warm hairline */
  --border-soft: oklch(0.94 0.006 84);
  --primary: oklch(0.55 0.125 152);
  --primary-strong: oklch(0.47 0.13 152);         /* darker green для emphasis */
  --primary-soft: oklch(0.55 0.125 152 / 0.08);
  --primary-foreground: oklch(0.99 0 0);
  --cta-bg: oklch(0.505 0.13 152);                /* зелёный кнопки: AA-контраст с белым (≥4.5:1) */
  --warn: oklch(0.52 0.13 50);                    /* пометка риска в списках выпусков */
  --radius: 0.875rem;
  --font-display: "Onest", "Inter", system-ui, -apple-system, sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Geist-style depth: стек низко-opacity теней + hairline-ring (как .card-ledger) */
  --shadow-card:
    0 0 0 1px oklch(0.22 0.01 70 / 0.06),
    0 2px 3px oklch(0.22 0.01 70 / 0.04),
    0 10px 16px -10px oklch(0.22 0.01 70 / 0.10);
  --shadow-card-hover:
    0 0 0 1px oklch(0.22 0.01 70 / 0.09),
    0 4px 6px oklch(0.22 0.01 70 / 0.05),
    0 16px 28px -12px oklch(0.22 0.01 70 / 0.16);
}

/* Тёмная тема — зеркалит :root.dark из src/index.css (тёплый charcoal Ledger).
   Активируется анти-вспышка-скриптом/тогглом по ключу bondsmate_theme. */
:root.dark {
  --background: oklch(0.145 0.006 70);            /* тёплый почти-чёрный */
  --foreground: oklch(0.95 0.006 84);            /* warm white */
  --card: oklch(0.185 0.007 70);                 /* чуть светлее bg */
  --muted: oklch(0.225 0.007 70);
  --muted-foreground: oklch(0.66 0.011 78);
  --text-secondary: oklch(0.74 0.011 78);
  --border: oklch(0.27 0.008 72);                /* warm hairline */
  --border-soft: oklch(0.23 0.007 72);
  --primary: oklch(0.70 0.14 152);               /* brighter forest green на тёмном */
  --primary-strong: oklch(0.78 0.13 152);        /* ссылки/emphasis ярче на тёмном */
  --primary-soft: oklch(0.70 0.14 152 / 0.14);
  --primary-foreground: oklch(0.16 0.01 70);     /* тёмный текст на ярко-зелёной кнопке */
  --cta-bg: oklch(0.70 0.14 152);                /* кнопка: bright green + тёмный текст */
  --warn: oklch(0.78 0.12 60);
  --shadow-card:
    0 0 0 1px oklch(0 0 0 / 0.5),
    0 4px 6px oklch(0 0 0 / 0.35),
    0 16px 28px -12px oklch(0 0 0 / 0.5);
  /* dark hover — чёрные тени (light-значение почти невидимо на тёмном фоне; Codex P3 s55) */
  --shadow-card-hover:
    0 0 0 1px oklch(0 0 0 / 0.6),
    0 6px 10px oklch(0 0 0 / 0.42),
    0 22px 40px -14px oklch(0 0 0 / 0.6);
}

* { box-sizing: border-box; }

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

/* Контейнер-оболочка — ЗЕРКАЛО SPA `.shell-container` (src/index.css): заполняем
   ширину до 110rem (1760), выше — cap; fluid padding. Единый источник ширины =
   шапка/футер/контент статики выровнены с приложением (цельность, не «вырвано»). */
.shell {
  width: 100%;
  margin-inline: auto;
  max-width: 110rem;
  padding-inline: 1rem;
}
@media (min-width: 640px)  { .shell { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .shell { padding-inline: 2rem; } }
@media (min-width: 1536px) { .shell { padding-inline: 2.5rem; } }
@media (min-width: 1920px) { .shell { padding-inline: 3.5rem; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--primary-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Клавиатурный фокус — тот же бренд-акцент, что и hover (a11y, link-heavy страницы) */
:focus-visible {
  outline: 2px solid var(--primary-strong);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible { outline-offset: 3px; }

/* ── Типографический кикер: small-caps лейбл + hairline-рул (бренд-идиома Ledger) ── */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 14px;
}
.kicker::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: color-mix(in oklch, var(--primary), transparent 35%);
}

/* ── Header — ЗЕРКАЛО SPA AppShell: sticky blur, 3-кол грид (бренд/нав/действия),
   BrandMark ₽-монета, shadcn-кнопки. Цельность с приложением. ── */
.site-header {
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklch, var(--background), transparent 20%);
  backdrop-filter: saturate(180%) blur(12px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: 64px;
  gap: 16px;
}
.brand {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--foreground);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand:hover { text-decoration: none; }
/* BrandMark «₽-монета» — тот же знак, что в SPA (кольцо var(--primary) + ₽ currentColor) */
.brand-mark { width: 34px; height: 34px; flex: none; color: var(--foreground); transition: transform 0.2s; }
.brand:hover .brand-mark { transform: scale(1.04); }

/* Центральная навигация — pill-ссылки (зеркало SPA NAV_LINKS) */
.site-nav { justify-self: center; display: flex; gap: 4px; align-items: center; }
.site-nav a {
  color: var(--muted-foreground);
  font-weight: 500;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.site-nav a:hover { background: color-mix(in oklch, var(--muted), transparent 40%); text-decoration: none; color: var(--foreground); }
.site-nav a.is-active { color: var(--foreground); background: var(--muted); }

/* Блок «Поддержать · Отзыв» в конце страницы — замена плавающим кружкам на телефоне. */
.bm-inline-actions {
  display: none;
  gap: 10px; flex-wrap: wrap; justify-content: center;
  margin: 28px 0 8px;
}
.bm-inline-actions .bm-float { position: static; }

/* Действия справа: тема + Войти(ghost) + Калькулятор/Попробовать(primary) — зеркало shadcn Button */
.site-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.btn-ghost, .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.btn-ghost { color: var(--text-secondary); background: transparent; }
.btn-ghost:hover { background: color-mix(in oklch, var(--muted), transparent 40%); color: var(--foreground); text-decoration: none; }
.btn-primary {
  background: var(--cta-bg);
  color: var(--primary-foreground);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 2px 8px -3px oklch(0.55 0.125 152 / 0.4);
}
.btn-primary:hover { background: var(--primary-strong); color: var(--primary-foreground); text-decoration: none; }

/* Переключатель темы — компактная иконка-кнопка (зеркалит тоггл SPA). */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { background: var(--muted); color: var(--foreground); }
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Layout ── */
/* Шапка/футер живут в `.shell` (full-width 1760 = цельность с SPA). Сам ДОКУМЕНТ гайда
   живёт в `.guide-doc` — docs-tier вёрстка (как Stripe/Linear/Vercel docs): читаемая
   центр-колонка между функциональными рейками, НЕ текст в 1760px (нечитаемо) и НЕ
   одинокая узкая колонка. Ширину заполняют ДВЕ рейки (действия слева + оглавление справа). */
main { padding-block: 16px 72px; }

.guide-doc { max-width: 90rem; margin-inline: auto; }

/* 3-зонная сетка: [действия 13rem] [проза ≤54rem] [оглавление 16.5rem], центрирована.
   Колонка прозы фиксированной читаемой ширины — текст ЗАПОЛНЯЕТ её (без внутр. пустоты),
   а группа колонок центрируется. minmax(0,…) даёт прозе сжиматься на узких экранах (нет overflow). */
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 52px); }
@media (min-width: 1024px) {
  .article-grid { grid-template-columns: minmax(0, 44rem) 16.5rem; justify-content: center; align-items: start; }
}
@media (min-width: 1280px) {
  .article-grid { grid-template-columns: 13rem minmax(0, 44rem) 16.5rem; column-gap: clamp(32px, 3.5vw, 64px); }
}
/* Центр-колонка (col2): проза + CTA + related + дисклеймер выровнены по ОДНОЙ читаемой
   мере (~44rem ≈ 75–80ch при 17px; docs-эталон Stripe/Vercel). Текст ЗАПОЛНЯЕТ колонку
   (без внутр. пустоты), ширину страницы добирают рейки + full-width chrome. */
.guide-main { min-width: 0; }
.prose { min-width: 0; }
.prose .lede { max-width: 62ch; }

/* Юр/utility-документы (terms/privacy/refund) — читаемая центрированная мера (чистая проза,
   не маркетинг; full-width здесь неуместен). На бренд-оболочке (шапка/футер/тема). */
.legal-doc { max-width: 50rem; margin-inline: auto; }
.legal-doc h1 { max-width: none; }
.legal-doc .updated { margin-bottom: 28px; }

.breadcrumbs { font-size: 14px; color: var(--muted-foreground); margin: 28px 0 18px; }
.breadcrumbs a { color: var(--muted-foreground); }
.breadcrumbs a:hover { color: var(--foreground); }

/* ── Дисплейная типографика (Onest, плотный трекинг) ── */
h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.034em;
  margin: 0 0 14px;
}
.lede {
  font-size: 19px;
  color: var(--text-secondary);
  margin: 0 0 10px;
  line-height: 1.6;
  max-width: 65ch;
}
.updated { font-size: 13.5px; color: var(--muted-foreground); margin: 0 0 32px; }

h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.2;
  margin: 48px 0 14px;
  scroll-margin-top: 84px;
}
/* Тонкий зелёный акцент-тик над контентными подзаголовками (editorial, вместо green-pill) */
.prose > h2::before {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  margin-bottom: 0.85rem;
  border-radius: 2px;
  background: linear-gradient(to right, var(--primary), transparent 80%);
}
.cta-block h2::before, .related h2::before { display: none; }
h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.018em;
  margin: 30px 0 8px;
}
p { margin: 14px 0; }
ul, ol { margin: 14px 0; padding-left: 24px; }
li { margin: 7px 0; }
strong { font-weight: 600; }
code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--muted);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 1px 6px;
}

/* ── Callout / answer box: тёплая карточка + ЛЕВЫЙ зелёный руль (без green-flood) ── */
.answer {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 24px;
  margin: 22px 0 30px;
  font-size: 18px;
  line-height: 1.6;
  max-width: 82ch;
}
.answer strong:first-child { color: var(--primary-strong); }

/* ── Formula callout (формулы расчёта — обособленный блок) ── */
.prose .formula {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin: 18px 0;
  font-size: 17px;
  line-height: 1.5;
}
.prose .formula strong { font-weight: 600; }

/* ── Definition cards (заполняют широкую колонку статьи мульти-колонкой) ── */
.defs { display: grid; gap: 12px; margin: 22px 0; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.def {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.3s cubic-bezier(0.23,1,0.32,1), transform 0.3s cubic-bezier(0.23,1,0.32,1);
}
.def:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.def dt { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 4px; }
.def dd { margin: 0; color: var(--text-secondary); font-size: 16px; }

/* ── Table (spreadsheet-grade: tabular nums, тёплая шапка) ── */
.table-wrap {
  overflow-x: auto;
  margin: 22px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
td { font-variant-numeric: tabular-nums slashed-zero; }
tbody tr:last-child td { border-bottom: none; }
th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: var(--muted);
}
tbody tr:hover td { background: color-mix(in oklch, var(--muted), transparent 55%); }

/* ── Живые данные в гайдах (список выпусков, суммы под доход) ── */
.live-meta { font-size: 14px; color: var(--muted-foreground); margin: -2px 0 12px; }
.prose h3 { font-size: 18px; margin: 26px 0 6px; }
.isin { font-size: 12px; color: var(--muted-foreground); letter-spacing: 0.01em; }
.risk-flag { font-size: 12px; font-weight: 600; color: var(--warn); }
.table-note { font-size: 15px; color: var(--text-secondary); max-width: 82ch; }
table.bond-list, table.income-targets { font-size: 15px; }
table.bond-list td, table.bond-list th { padding: 10px 12px; }
table.bond-list td:first-child { min-width: 9.5rem; }
table.bond-list td:nth-child(n+2) { white-space: nowrap; }
/* Пометка риска переносится, иначе раздувает столбец доходности и уводит его за край телефона. */
table.bond-list .risk-flag { white-space: normal; display: inline-block; max-width: 7rem; line-height: 1.3; }
.bond-issuer { font-size: 14px; color: var(--text-secondary); }
table.income-targets td:first-child { white-space: nowrap; }
table.income-targets td:nth-child(n+2) { min-width: 10.5rem; }
/* Подсказка о листании нужна только там, где таблица шире экрана. */
.table-hint { display: none; font-size: 13px; color: var(--muted-foreground); margin: 10px 0 -12px; }
@media (max-width: 640px) {
  .table-hint { display: block; }
  table.bond-list, table.income-targets { font-size: 14px; }
  table.bond-list td, table.bond-list th, table.income-targets td, table.income-targets th { padding: 9px 10px; }
  table.bond-list td:first-child { min-width: 8.5rem; }
}
/* ── Каталог облигаций: страница выпуска (scripts/build-catalog.mjs) ── */
.bond-doc { max-width: 64rem; }
.bond-facts { display: grid; gap: 12px; margin: 8px 0 4px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bond-fact {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  min-width: 0;
}
.bond-fact p { margin: 0; }
.bond-fact-label { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); }
.bond-fact-value { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 4px !important; line-height: 1.15; }
.bond-fact-note { font-size: 14px; color: var(--text-secondary); margin-top: 4px !important; line-height: 1.35; }
table.bond-params th { text-align: left; font-weight: 500; color: var(--text-secondary); width: 42%; background: transparent; text-transform: none; letter-spacing: 0; font-size: 15px; }
table.bond-params td { font-size: 15px; }
table.bond-coupons { font-size: 15px; }
table.bond-coupons td:first-child { color: var(--muted-foreground); width: 3.5rem; }
table.bond-coupons tr.is-unknown td { color: var(--muted-foreground); }
.bond-more { margin: -8px 0 18px; }
.bond-more summary { cursor: pointer; font-weight: 500; color: var(--primary-strong); padding: 6px 0; }
.bond-siblings { list-style: none; padding: 0; display: grid; gap: 6px 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.bond-siblings li { margin: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; letter-spacing: 0.01em; }
.catalog-letters { display: flex; flex-wrap: wrap; gap: 6px 12px; font-weight: 600; }
.catalog-issuers { list-style: none; padding: 0; display: grid; gap: 10px 28px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.catalog-issuers li { margin: 0; line-height: 1.55; }
@media (max-width: 860px) { .bond-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  table.bond-params th { width: 46%; font-size: 14px; }
  table.bond-params td, table.bond-coupons { font-size: 14px; }
  .bond-fact { padding: 12px 14px; }
}

.live-cta {
  margin: 22px 0 30px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--card);
}
.live-cta p { margin: 0 0 12px; color: var(--text-secondary); }
.cta-block .cta-live { font-size: 15px; color: var(--muted-foreground); margin: -8px auto 20px; max-width: 62ch; }

/* ── FAQ (editorial divide-y, без зелёных боксов) ── */
.faq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: clamp(28px, 4vw, 56px); }
.faq-item { border-bottom: 1px solid var(--border); padding: 4px 0 16px; }
.faq-item p { max-width: 62ch; }
.faq-item:last-child { border-bottom: none; }
.faq-item h2, .faq-item h3 {
  font-size: 20px;
  margin: 22px 0 6px;
}
.faq-item h2::before, .faq-item h3::before { display: none; }
.faq > h2 { margin-top: 44px; }

/* ── CTA-блок (тёплая карточка + верхний зелёный руль-акцент) ── */
.cta-block {
  position: relative;
  margin: 52px 0 8px;
  padding: 32px 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.cta-block::before {
  content: '';
  position: absolute;
  top: -1px; left: 2rem; right: 2rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right, transparent, var(--primary), transparent);
}
.cta-block h2 { font-size: clamp(22px, 3.4vw, 27px); margin: 0 0 8px; }
.cta-block p { color: var(--text-secondary); margin: 0 0 20px; }
.btn {
  display: inline-block;
  background: var(--cta-bg);
  color: var(--primary-foreground);
  font-weight: 600;
  font-size: 16px;
  padding: 13px 28px;
  border-radius: 11px;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.25), 0 4px 14px -4px oklch(0.55 0.125 152 / 0.45);
  transition: background 0.15s, transform 0.15s;
}
.btn:hover { background: var(--primary-strong); text-decoration: none; color: var(--primary-foreground); transform: translateY(-1px); }

/* ── Оглавление статьи (sticky-рейка справа) — заполняет ширину + быстрая навигация ── */
.toc-rail { display: none; }
@media (min-width: 1024px) { .toc-rail { display: block; } }
.toc-sticky { position: sticky; top: 88px; }
.toc-title {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 12px;
}
.toc-nav { display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.toc-nav a {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted-foreground);
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.toc-nav a:hover { color: var(--foreground); border-left-color: var(--primary); text-decoration: none; }

/* ── Левая utility-рейка гайда: первичный CTA + плашки «Поддержать» / «Отзыв» ──
   Зеркало SPA (DonatePill ♥ + FeedbackWidget ✎ видны везде). На >=1280 — вертикальная
   sticky-рейка слева (заполняет ширину, рядом с прозой). На < 1280 — горизонтальный
   бар `.guide-actions` над статьёй (рейки нет, но плашки видны на планшете/мобиле). */
.guide-rail { display: none; }
@media (min-width: 1280px) { .guide-rail { display: block; } }
.guide-rail-sticky { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 10px; }

.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
@media (min-width: 1280px) { .guide-actions { display: none; } }

.rail-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 11px;
  background: var(--cta-bg); color: var(--primary-foreground);
  font-weight: 600; font-size: 14px; white-space: nowrap;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 3px 12px -4px oklch(0.55 0.125 152 / 0.42);
  transition: background 0.15s, transform 0.15s;
}
.rail-cta:hover { background: var(--primary-strong); color: var(--primary-foreground); text-decoration: none; transform: translateY(-1px); }
.guide-rail .rail-cta { width: 100%; }

.rail-divider { height: 1px; background: var(--border); margin: 6px 0 2px; }
.rail-link { font-size: 13px; color: var(--muted-foreground); padding: 2px 2px; }
.rail-link:hover { color: var(--foreground); text-decoration: none; }

/* ── Related links (карточки-список) — внутри центр-колонки .guide-main ── */
.related { margin: 44px 0 0; }
.related h2 { font-size: 20px; margin-bottom: 14px; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.related li { margin: 0; }
.related li a {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-card);
  color: var(--foreground);
  font-weight: 500;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.related li a:hover {
  text-decoration: none;
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--primary), transparent 55%);
}

/* Индексные карточки гайдов (slug + lede) */
.guide-cards { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.guide-cards a { height: 100%; }
.guide-cards li { margin: 0; }
.guide-cards a {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  box-shadow: var(--shadow-card);
  color: var(--foreground);
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.guide-cards a:hover {
  text-decoration: none;
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--primary), transparent 55%);
}
.guide-cards a strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.018em;
  color: var(--foreground);
}
.guide-cards a span { display: block; margin-top: 5px; color: var(--text-secondary); font-size: 15.5px; line-height: 1.5; }

/* ── Disclaimer / footer ── */
.disclaimer {
  margin: 44px 0 0;
  padding: 18px 22px;
  background: var(--muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--muted-foreground);
  line-height: 1.6;
}
/* ── Footer — ЗЕРКАЛО SPA: богатый 3-кол (бренд+live-dot+дисклеймер / Продукт / Ресурсы) ── */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 56px;
  background: color-mix(in oklch, var(--card), transparent 70%);
}
.site-footer .shell { padding-block: 48px; }
.footer-cols {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .footer-cols { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer-brand { max-width: 22rem; }
.footer-brand .brand { margin-bottom: 16px; }
.footer-tagline { font-size: 13px; line-height: 1.6; color: var(--muted-foreground); margin: 0 0 16px; }
.footer-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-foreground); }
.footer-live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); flex: none;
}
/* Страница 404 (статический /404.html — честный HTTP 404 от Vercel; зеркалит SPA NotFound) */
.notfound-page { text-align: center; max-width: 28rem; margin: 48px auto; }
.notfound-kicker {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-foreground); margin: 0 0 20px;
}
.notfound-num {
  font-size: 72px; line-height: 1; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums; margin: 0 0 4px;
}
.notfound-page h1 { font-size: 25px; margin: 0 0 10px; }
.notfound-page > p:not(.notfound-kicker):not(.notfound-num):not(.notfound-actions) {
  font-size: 14px; color: var(--muted-foreground);
}
.notfound-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.notfound-actions a { text-decoration: none; }

/* Значок Product Radar: light/dark варианты, переключение классом .dark (как в SPA) */
.footer-pr-badge { display: inline-block; margin-top: 20px; opacity: 0.9; transition: opacity 0.15s; }
.footer-pr-badge:hover { opacity: 1; }
.footer-pr-badge .pr-badge-dark { display: none; }
.dark .footer-pr-badge .pr-badge-light { display: none; }
.dark .footer-pr-badge .pr-badge-dark { display: inline; }
.footer-coltitle {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: color-mix(in oklch, var(--muted-foreground), transparent 25%);
  margin: 0 0 16px;
}
.footer-col nav { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13.5px; color: var(--muted-foreground); width: fit-content; }
.footer-col a:hover { color: var(--foreground); text-decoration: none; }
.footer-legal {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.6;
  color: color-mix(in oklch, var(--muted-foreground), transparent 25%);
}
.footer-legal p { margin: 0 0 6px; }
.footer-legal a { color: inherit; text-decoration: underline; }
.footer-legal a:hover { color: var(--foreground); }

/* На узких экранах: компактная одностроковая шапка — бренд + CTA. Вторичные
   ссылки (Гайды/FAQ/О проекте) скрыты, т.к. дублируются в футере, хлебных
   крошках и блоках «Читайте также» (анти-громоздкий 4-строчный wrap). */
/* На узких экранах: одностроковая шапка — бренд-знак + тема + Попробовать.
   Центральная навигация и «Войти» скрыты (дублируются в футере/крошках) —
   тот же приём, что в SPA (там центральная навигация скрыта < sm, есть бургер). */
@media (max-width: 640px) {
  /* Flex (не grid): nav display:none иначе утянул бы действия в пустой средний трек.
     Бренд слева, тема + «Калькулятор» справа. */
  .site-header-inner { display: flex; justify-content: space-between; height: 56px; }
  .site-nav { display: none; }
  .site-header .brand-name { display: none; }
  .btn-ghost { display: none; }
  /* Блок «Поддержать · Отзыв» в потоке — на телефоне он заменяет плавающие кружки
     (те скрываются ниже, в медиазапросе ПОСЛЕ объявления .bm-floats: раньше правило
     перебивалось более поздним `.bm-floats{display:flex}` при равной специфичности). */
  .bm-inline-actions { display: flex; }
  h2 { scroll-margin-top: 76px; }
  h3 { scroll-margin-top: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Плавающие плашки (правый нижний угол) — зеркало SPA DonatePill ♥ + FeedbackWidget ✎.
   Видны на всех статических страницах. Pill-силуэт здесь УМЕСТЕН (это виджеты-флоаты,
   а не кнопки в потоке): тот же вид, что в приложении. ── */
.bm-floats {
  position: fixed; right: 20px; z-index: 60;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
.bm-float {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; width: 42px; padding: 0; justify-content: center; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card);
  color: var(--foreground); font-weight: 600; font-size: 13px; white-space: nowrap;
  cursor: pointer; font-family: inherit; text-decoration: none;
  box-shadow: 0 4px 16px oklch(0 0 0 / 0.08), 0 1px 4px oklch(0 0 0 / 0.06);
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}
.bm-float:hover { text-decoration: none; transform: translateY(-1px); }
/* В покое плашка — кружок 42px и умещается в поле страницы; подпись раскрывается
   по наведению или с клавиатуры. Иначе плашка шириной ~150px накрывала правый
   край текста карточек на /faq и /guides (сетка идёт почти до края при 1440). */
.bm-float span {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transition: max-width 0.18s ease, opacity 0.12s ease;
}
.bm-float:focus-visible { width: auto; padding: 0 16px; }
.bm-float:focus-visible span { max-width: 9rem; opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .bm-float:hover { width: auto; padding: 0 16px; }
  .bm-float:hover span { max-width: 9rem; opacity: 1; }
}
.bm-float svg { width: 16px; height: 16px; flex: none; transition: transform 0.15s; }
.bm-float:hover svg { transform: scale(1.1); }
/* «Поддержать» — тёплое сердечко (как DonatePill) */
.bm-float-donate svg { color: oklch(0.64 0.19 22); fill: oklch(0.64 0.19 22); }
.bm-float-donate:hover { border-color: oklch(0.72 0.14 30); background: oklch(0.72 0.14 30 / 0.07); color: oklch(0.55 0.18 25); }
:root.dark .bm-float-donate:hover { color: oklch(0.78 0.15 30); }
/* «Отзыв» — бренд-зелёный */
.bm-float-fb svg { color: var(--primary); }
.bm-float-fb:hover { border-color: color-mix(in oklch, var(--primary), transparent 50%); background: color-mix(in oklch, var(--primary), transparent 94%); color: var(--primary-strong); }
@media (max-width: 639px) { .bm-float { height: 44px; width: 44px; } }
/* Мобайл: клиренс снизу, чтобы стек плавающих плашек (fixed, ~120px зона у нижнего
   края: donate+gap+feedback+отступ) не накрывал правый край текста футера, когда
   страница пролистана до самого низа. */
@media (max-width: 639px) { .site-footer .shell { padding-bottom: 128px; } }

/* ── Модалка отзыва (форма прямо на странице, POST /api/feedback) ── */
.bm-fb-overlay {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: oklch(0 0 0 / 0.45); backdrop-filter: blur(2px);
}
.bm-fb-overlay[hidden] { display: none; }
.bm-fb-card {
  position: relative; width: 100%; max-width: 440px;
  background: var(--card); color: var(--foreground);
  border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px 22px;
  box-shadow: 0 20px 60px -12px oklch(0 0 0 / 0.35);
}
.bm-fb-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--muted-foreground);
  border-radius: 8px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.bm-fb-x:hover { background: var(--muted); color: var(--foreground); }
.bm-fb-x svg { width: 18px; height: 18px; }
.bm-fb-title { font-family: 'Onest', 'Inter', sans-serif; font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.bm-fb-sub { font-size: 13px; color: var(--muted-foreground); margin: 0 0 16px; line-height: 1.45; }
.bm-fb-label { display: block; font-size: 12px; font-weight: 600; margin: 12px 0 5px; }
.bm-fb-opt { font-weight: 400; color: var(--muted-foreground); }
.bm-fb-textarea, .bm-fb-input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px;
  color: var(--foreground); background: transparent;
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bm-fb-textarea { resize: vertical; min-height: 84px; }
.bm-fb-textarea:focus, .bm-fb-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary), transparent 78%); }
.bm-fb-err { font-size: 12px; color: oklch(0.55 0.2 25); margin: 10px 0 0; }
:root.dark .bm-fb-err { color: oklch(0.72 0.17 25); }
.bm-fb-actions { display: flex; gap: 10px; margin-top: 18px; }
.bm-fb-btn {
  flex: 1; height: 40px; border-radius: 10px; font-family: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s, opacity 0.15s; border: 1px solid transparent;
}
.bm-fb-btn:disabled { opacity: 0.55; cursor: default; }
.bm-fb-btn-ghost { background: transparent; border-color: var(--border); color: var(--foreground); }
.bm-fb-btn-ghost:hover { background: var(--muted); }
.bm-fb-btn-primary { background: var(--cta-bg); color: var(--primary-foreground); }
.bm-fb-btn-primary:hover { background: var(--primary-strong); }

/* Плавающие кружки на узком экране ложатся поверх текста статьи: правый край строк
   уходит под них (замер 10.09.2026 на iPhone 13 — кружки перекрывали ~2 слова в строке).
   На телефоне те же два действия живут блоком в конце страницы (.bm-inline-actions),
   поэтому функция не теряется. Правило стоит ПОСЛЕ объявления .bm-floats — при равной
   специфичности побеждает последнее, и в раннем медиазапросе оно не срабатывало. */
@media (max-width: 640px) {
  .bm-floats { display: none; }
}

/* Призыв в середине длинной статьи — только на телефоне: на широком экране ту же роль
   играет липкая боковая рейка (.guide-rail-sticky), и второй призыв там был бы шумом. */
.mid-cta { display: none; }
@media (max-width: 640px) {
  .mid-cta {
    display: block;
    margin: 32px 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
  }
  .mid-cta p { margin: 0 0 14px; font-size: 15px; color: var(--text-secondary); }
  .mid-cta .btn { width: 100%; justify-content: center; }
}

/* Главная кнопка шапки на телефоне ведёт В ПРОДУКТ, а не в регистрацию: замер 10.09.2026
   дал 0 расчётов из 26 мобильных визитов на гайде против 41 % с компьютера, где ссылка
   «Калькулятор» видна в шапке постоянно. Регистрация остаётся в футере, в мобильном меню
   приложения и на самой странице расчёта — аккаунт не нужен, чтобы получить результат.

   Селектор из двух классов (0-2-0) — намеренно: одноклассовое правило перебивалось более
   поздним `.btn-ghost, .btn-primary { display: inline-flex }` при равной специфичности,
   и кнопка показывалась на ЛЮБОЙ ширине, дублируя ссылку из .site-nav на компьютере.
   Поймано мутацией: гейт остался зелёным при вырезанном правиле — значит правило не
   работало вовсе. */
.site-actions .btn-calc-mobile { display: none; }

@media (max-width: 640px) {
  .site-actions .btn-calc-mobile { display: inline-flex; }
  .site-actions .btn-try { display: none; }
}