/* Дизайн-система лендинга КУБ.
 *
 * Имена переменных и классов НЕ произвольные: контент страниц (content/*.html)
 * снят 1:1 со старого сайта и ссылается на них (--spacing-*, --primary-text,
 * card-premium, btn, blog-card…). Меняем ЗНАЧЕНИЯ и внешний вид — не имена,
 * иначе править пришлось бы 19 страниц контента. */

:root {
  --primary-cta: #9A4FF5;   /* бренд КУБ v2 (дизайн-пакет «ETRN (5)») */
  --primary-cta-hover: #8A3BF0;
  --accent-purple: #9A4FF5;
  --success: #10B981;
  --warning: #EF4444;

  /* Нейтрали — из дизайн-системы кабинета (etnr-web: n50/n200/n500/n700/n900),
     чтобы лендинг и ЛК читались как один продукт. */
  --background: #F9FAFB;
  --color-surface: #ffffff;
  --surface: #ffffff;
  --primary-text: #111827;
  --secondary-text: #374151;
  --tertiary-text: #6B7280;
  --border: #E5E7EB;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --spacing-4: 4px;  --spacing-8: 8px;   --spacing-12: 12px;
  --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px;
  --spacing-48: 48px; --spacing-64: 64px;

  --shadow-card: 0 1px 2px rgb(26 26 46 / 4%), 0 8px 24px rgb(154 79 245 / 7%);
  --shadow-card-hover: 0 2px 4px rgb(26 26 46 / 6%), 0 16px 40px rgb(154 79 245 / 14%);
  --banner-h: 42px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #12121f;
    --color-surface: #1a1a2e;
    --surface: #1a1a2e;
    --primary-text: #f3f4f6;
    --secondary-text: #d1d5db;
    --tertiary-text: #8080a0;
    --border: #2c2c45;
    --accent-purple: #B47DF8;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 25%);
    --shadow-card-hover: 0 2px 4px rgb(0 0 0 / 35%), 0 16px 44px rgb(154 79 245 / 30%);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--primary-text);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgb(154 79 245 / 22%); }

h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.015em; }
h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; }
h2 { font-size: clamp(24px, 3.6vw, 32px); font-weight: 700; }
h3 { font-size: 20px; font-weight: 650; }

a { color: var(--accent-purple); }
p { margin-top: 0; }

img, svg, table { max-width: 100%; }
table { border-collapse: collapse; }
td, th { border: 1px solid var(--border); padding: var(--spacing-8) var(--spacing-12); text-align: left; }

  position: absolute;
  right: var(--spacing-12);
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgb(255 255 255 / 16%);
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  transition: background 0.15s;
.logo {
  font-size: 22px;
  font-weight: 800;
  text-decoration: none;
  background: linear-gradient(90deg, #7c3aed, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.01em;
}
.btn-cabinet { white-space: nowrap; }

/* ── Каркас контента ───────────────────────────────────────────────────── */

.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--spacing-24); }
.section { padding: var(--spacing-48) 0; }
main.section { padding-top: var(--spacing-32); }

.accent-purple {
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(120deg, #7c3aed, #8b5cf6);
  color: #fff;
  box-shadow: 0 4px 14px rgb(154 79 245 / 30%);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgb(154 79 245 / 42%); }
.btn-secondary {
  background: transparent;
  color: var(--accent-purple);
  border-color: color-mix(in srgb, var(--accent-purple) 45%, transparent);
}
.btn-secondary:hover { background: rgb(154 79 245 / 8%); }

/* ── Карточки ──────────────────────────────────────────────────────────── */

.card-premium, .feature-card, .contact-card, .blog-card {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.card-premium { padding: var(--spacing-24); }
.card-premium:hover, .feature-card:hover, .blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--accent-purple) 35%, var(--border));
}
.blog-card { display: block; padding: var(--spacing-24); text-decoration: none; color: inherit; }

.contact-card { padding: var(--spacing-24); text-align: center; }

/* ── Модалка заявки ────────────────────────────────────────────────────── */

.lead-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }
.lead-modal[hidden] { display: none; }
.lead-modal-backdrop { position: absolute; inset: 0; background: rgb(10 8 24 / 55%); backdrop-filter: blur(3px); }
.lead-modal-card {
  position: relative;
  width: min(430px, calc(100vw - 32px));
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-24);
  box-shadow: 0 24px 70px rgb(0 0 0 / 35%);
}
.lead-modal-card h3 { margin: 0 0 var(--spacing-4); }
.lead-modal-sub { color: var(--secondary-text); font-size: 14px; margin-bottom: var(--spacing-16); }
.lead-modal-card label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--secondary-text);
  margin-bottom: var(--spacing-12);
}
.lead-modal-card input {
  display: block;
  width: 100%;
  margin-top: var(--spacing-4);
  padding: 10px 12px;
  font-size: 15px;
  color: var(--primary-text);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lead-modal-card input:focus {
  outline: none;
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px rgb(154 79 245 / 18%);
}
.lead-modal-submit { width: 100%; margin-top: var(--spacing-8); }
.lead-modal-close {
  position: absolute;
  top: var(--spacing-12);
  right: var(--spacing-12);
  border: 0;
  background: transparent;
  color: var(--tertiary-text);
  font-size: 15px;
  cursor: pointer;
}
.lead-modal-ok { color: var(--success); font-weight: 600; margin: var(--spacing-12) 0 0; }
.lead-modal-err { color: var(--warning); font-size: 14px; margin: var(--spacing-12) 0 0; }
body.modal-open { overflow: hidden; }

/* ── Футер ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card-premium, .feature-card, .blog-card { transition: none; }
}

/* ── Адаптив контента (снятого 1:1 со старого сайта) ───────────────────── */
/* Контент несёт инлайн-стили; на узких экранах их приходится перебивать. */

@media (max-width: 720px) {
  .container { padding: 0 var(--spacing-16); }
  .section { padding: var(--spacing-32) 0; }

  /* жёсткие двухколоночные гриды из контента → в одну колонку */
  main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* герой и крупные абзацы с инлайн font-size:20px не должны душить экран */
  main [style*="font-size:20px"] { font-size: 17px !important; }
  main [style*="padding:var(--spacing-64)"] { padding: var(--spacing-32) !important; }

    .btn-cabinet { padding: 8px 12px; font-size: 14px; }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .container { padding: 0 var(--spacing-24); }
}

/* таблицы (тарифы, сравнения в блоге) скроллятся сами, страница — нет */
main table { display: block; overflow-x: auto; white-space: nowrap; }
main table td, main table th { white-space: normal; min-width: 140px; }

/* касания: зоны не меньше 40px */
@media (pointer: coarse) {
  .btn { padding-top: 11px; padding-bottom: 11px; }
  }

/* ── Кнопка «Личный кабинет»: главное действие шапки ───────────────────── */
/* Пользователей пускают в ЛК (24.08.2026), заявка ушла из шапки в блоки
   страниц — вход остался единственной кнопкой и носит основной стиль
   (btn-p). Своя палитра тут не нужна, только снятие подчёркивания у ссылки
   и запрет переноса. */
.btn.btn-cabinet { text-decoration: none; }

/* ── Иконки-буллеты в карточках: плитка вместо голого контура ──────────── */
/* «Объёмнее»: контурный SVG ложится на градиентную плитку с мягкой тенью. */
.feature-card { padding: var(--spacing-24); }
.feature-card > svg:first-child {
  width: 64px;
  height: 64px;
  padding: 13px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgb(154 79 245 / 14%), rgb(147 51 234 / 7%) 55%, transparent),
    var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--accent-purple) 22%, var(--border));
  box-shadow:
    0 6px 16px rgb(154 79 245 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 55%);
  margin-bottom: var(--spacing-12);
}
@media (prefers-color-scheme: dark) {
  .feature-card > svg:first-child {
    box-shadow:
      0 6px 18px rgb(0 0 0 / 45%),
      0 0 24px rgb(154 79 245 / 22%),
      inset 0 1px 0 rgb(255 255 255 / 8%);
  }
}

/* Вход виден в шапке на ЛЮБОЙ ширине, включая телефоны: место освободила
   ушедшая из шапки «Оставить заявку». Проверено на 375px — лого, кнопка и
   бургер помещаются с запасом. Пункт входа в мобильном дровере остаётся
   вторым путём для тех, кто открыл меню. */
@media (max-width: 560px) {
  .v2-head .btn-cabinet { padding: 0 12px; font-size: 13.5px; }
}

/* ── Дизайн-проход №2 ──────────────────────────────────────────────────── */

/* Герой: свечение и сетка точек вместо плоского фона. Только первый section
   главной и внутренних — глубина первого экрана без единого нового элемента. */
main.section { position: relative; }
main.section::before {
  content: "";
  position: absolute;
  inset: -120px 0 auto 0;
  height: 520px;
  pointer-events: none;
  background:
    radial-gradient(560px 300px at 50% 10%, rgb(154 79 245 / 10%), transparent 70%),
    radial-gradient(340px 220px at 78% 4%, rgb(147 51 234 / 7%), transparent 70%);
}
main.section::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 420px;
  pointer-events: none;
  background-image: radial-gradient(rgb(154 79 245 / 13%) 1px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 8%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 8%, transparent 82%);
}
main.section > * { position: relative; z-index: 1; }
@media (prefers-color-scheme: dark) {
  main.section::before {
    background:
      radial-gradient(560px 300px at 50% 10%, rgb(139 92 246 / 17%), transparent 70%),
      radial-gradient(340px 220px at 78% 4%, rgb(147 51 234 / 12%), transparent 70%);
  }
}

/* Активный раздел в шапке */
.nav-link-active {
  color: var(--accent-purple);
  background: rgb(154 79 245 / 9%);
  font-weight: 600;
}

/* Мера строки на текстовых страницах: во всю ширину юртексты нечитаемы */
body.long-form main :is(p, li, blockquote) { max-width: 72ch; }
body.long-form main li { margin-bottom: var(--spacing-4); }

/* Карточки блога: стрелка-приглашение при ховере */
.blog-card { position: relative; }
.blog-card::after {
  content: "→";
  position: absolute;
  right: var(--spacing-24);
  bottom: var(--spacing-16);
  font-size: 18px;
  color: var(--accent-purple);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.18s, transform 0.18s;
}
.blog-card:hover::after { opacity: 1; transform: translateX(0); }

/* Появление карточек при скролле. Классы вешает client.js ТОЛЬКО когда
   IntersectionObserver доступен — без JS всё видно сразу. */
.pre-reveal { opacity: 0; transform: translateY(14px); }
.in-view { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease; }
@media (prefers-reduced-motion: reduce) {
  .pre-reveal { opacity: 1; transform: none; }
}

/* Клавиатурный фокус: видимое кольцо в цвет бренда */
:focus-visible {
  outline: 2px solid var(--accent-purple);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Таблицы: зебра и мягкая рамка (юртексты, сравнения в блоге) */
main table { border: 1px solid var(--border); border-radius: var(--radius-sm); }
main tbody tr:nth-child(even) { background: color-mix(in srgb, var(--accent-purple) 4%, transparent); }
main th { background: color-mix(in srgb, var(--accent-purple) 8%, transparent); font-weight: 650; }

/* 404 */
.err-code { font-size: clamp(72px, 16vw, 130px); font-weight: 800; line-height: 1; margin: 0 0 var(--spacing-8); }

/* honeypot: физически за экраном, скринридеру не объявляется */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ── Компоненты внутренних страниц (с дизайн-прохода №3) ── */

.btn-lg { padding: 13px 22px; font-size: 16px; border-radius: 12px; }

/* 🪤 Свечение героя — псевдоэлемент, вылезающий за края (inset: … -12%).
 * На узком экране это ровно те 27px, из-за которых страница ехала вбок, а
 * getBoundingClientRect по элементам ничего не показывал: у псевдоэлементов
 * его нет. `overflow-x: clip` (не hidden!) обрезает вылет, НЕ создавая
 * скролл-контейнер — иначе сломались бы якорные переходы и sticky. */
main.section { overflow-x: clip; }

/* плавное «дыхание» окна; выключается с reduced-motion */

.bento-tile { position: relative; overflow: hidden;
  border-radius: var(--radius-lg); padding: var(--spacing-24);
  background: var(--color-surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.bento-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--accent-purple) 35%, var(--border)); }
.bento-tile h3 { margin: 0 0 var(--spacing-8); font-size: 19px; }
.bento-tile p { margin: 0; font-size: 14.5px; color: var(--secondary-text); }

.guide-card { display: block; padding: var(--spacing-16) var(--spacing-24);
  border-radius: var(--radius-md); text-decoration: none; color: inherit;
  background: var(--color-surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-card); transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.guide-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--accent-purple) 35%, var(--border)); }
.guide-card b { display: block; margin-bottom: 4px; color: var(--primary-text); }
.guide-card span { font-size: 13.5px; color: var(--tertiary-text); }

.step { position: relative; padding: var(--spacing-24); border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero);
  display: inline-grid; place-items: center; margin-bottom: var(--spacing-12);
  font-size: 13px; font-weight: 800; letter-spacing: 0.04em;
  width: 40px; height: 40px; border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  box-shadow: 0 6px 16px rgb(154 79 245 / 30%); }
.step h3 { margin: 0 0 var(--spacing-8); font-size: 18px; }
.step p { margin: 0; font-size: 14.5px; color: var(--secondary-text); }

.price-card { position: relative; display: flex; flex-direction: column; text-align: left;
  padding: var(--spacing-32) var(--spacing-24) var(--spacing-24);
  border-radius: var(--radius-lg); background: var(--color-surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-card);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.price-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.price-card .btn { margin-top: auto; width: 100%; text-align: center; }

.quote-card { position: relative; padding: var(--spacing-24); border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.quote-card::before { content: "“"; position: absolute; top: 6px; right: 18px;
  font-size: 64px; line-height: 1; font-family: Georgia, serif;
  color: color-mix(in srgb, var(--accent-purple) 22%, transparent); }

/* Планшет (≈700–1000). Раньше здесь всё схлопывалось в одну колонку уже на
 * 1000px: три коротких шага растягивались во всю ширину, а тарифы ложились
 * 2+1 — для СРАВНЕНИЯ тарифов это худший вариант, читать их надо либо в ряд,
 * либо честно друг под другом. Держим тройки в ряд, поджав типографику. */
@media (min-width: 700px) and (max-width: 1000px) {
  .step { padding: var(--spacing-16); }
  .step h3 { font-size: 16px; }
  .step p { font-size: 13.5px; }

  
  .price-card { padding: var(--spacing-24) var(--spacing-16) var(--spacing-16); }
}

/* Якорные переходы (#features, #pricing) — заголовок уезжал под липкую шапку:
 * при smooth-scroll браузер ставит верх секции ровно под низ header'а. */
main [id] { scroll-margin-top: calc(var(--banner-h) + 42px); }

/* ── Блог: индекс и страница статьи ────────────────────────────────────── */
/* Индекс собирается из content/posts.json (см. build.tsx), поэтому классы
 * ниже — единственное описание вида карточки: править вёрстку 11 раз не надо. */

.blog-head { max-width: 40em; margin: 0 auto var(--spacing-32); text-align: center; }
.blog-eyebrow { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-purple); font-weight: 700; margin-bottom: var(--spacing-8); }
.blog-head h1 { margin: 0 0 var(--spacing-12); }
.blog-sub { color: var(--secondary-text); margin: 0; }

/* Метка рубрики. Цвет несёт смысл: разбор закона глаз отделяет от практики,
 * не читая заголовок. Поэтому оттенки РАЗНЫЕ, а не один бренд-фиолетовый. */
.rubric { display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 10px;
  border-radius: 999px; white-space: nowrap; }
.rubric-law   { color: #b45309; background: rgb(251 191 36 / 16%); }
.rubric-howto { color: #047857; background: rgb(16 185 129 / 14%); }
.rubric-vs    { color: #6d28d9; background: rgb(154 79 245 / 13%); }
.rubric-tech  { color: #0e7490; background: rgb(34 211 238 / 14%); }
@media (prefers-color-scheme: dark) {
  .rubric-law { color: #fbbf24; } .rubric-howto { color: #34d399; }
  .rubric-vs { color: #a78bfa; } .rubric-tech { color: #22d3ee; }
}

/* Фильтр рубрик — чипы со счётчиками; фильтрация в client.js без перезагрузки. */
.rubric-filter { display: flex; flex-wrap: wrap; gap: var(--spacing-8);
  margin-bottom: var(--spacing-24); }
.rubric-chip { display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
  color: var(--secondary-text); background: var(--color-surface);
  border: 1px solid var(--border); transition: color 0.15s, border-color 0.15s, background 0.15s; }
.rubric-chip span { font-size: 12px; font-weight: 700; color: var(--tertiary-text); }
.rubric-chip:hover { border-color: color-mix(in srgb, var(--accent-purple) 40%, var(--border)); }
.rubric-chip.is-on { color: #fff; border-color: transparent;
  background: linear-gradient(120deg, #7c3aed, #8b5cf6);
  box-shadow: 0 4px 14px rgb(154 79 245 / 28%); }
.rubric-chip.is-on span { color: rgb(255 255 255 / 75%); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--spacing-24); }
.post-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.post-card { display: flex; flex-direction: column; gap: var(--spacing-8);
  padding: var(--spacing-24); border-radius: var(--radius-md); text-decoration: none;
  color: inherit; background: var(--color-surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover);
  border-color: color-mix(in srgb, var(--accent-purple) 35%, var(--border)); }
.post-card .rubric { align-self: flex-start; }
.post-card h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.post-card p { margin: 0; font-size: 14.5px; color: var(--secondary-text); flex: 1; }
.post-meta { font-size: 12.5px; color: var(--tertiary-text);
  font-variant-numeric: tabular-nums; }
.post-card[hidden] { display: none; }

/* ── Страница статьи ── */

/* Полоса прогресса чтения: у длинного разбора закона нужно понимать, сколько
 * ещё осталось. Ширину двигает client.js. */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0;
  z-index: 60; background: linear-gradient(90deg, #7c3aed, #a855f7, #22d3ee);
  transition: width 0.1s linear; }

/* Оглавление: липкое сбоку на широком экране, сворачиваемое сверху на узком.
 * Строится из h2 в client.js — статьи писались без оглавления, и размечать
 * 11 файлов руками ради него не нужно. */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 232px;
  gap: var(--spacing-48); align-items: start; }
.toc { position: sticky; top: calc(var(--banner-h) + 74px); font-size: 13.5px; }
.toc-title { font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--tertiary-text); font-weight: 700; margin: 0 0 var(--spacing-12); }
.toc ol { list-style: none; margin: 0; padding: 0 0 0 var(--spacing-12);
  border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 9px; }
.toc a { display: block; color: var(--secondary-text); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--accent-purple); }
.toc li.is-current { margin-left: -14px; padding-left: 12px;
  border-left: 2px solid var(--accent-purple); }
.toc li.is-current a { color: var(--accent-purple); font-weight: 600; }

/* Типографика статьи: мера строки уже ограничена long-form (72ch), здесь —
 * ритм и акценты. */
body.long-form main h2 { margin-top: var(--spacing-48); scroll-margin-top: calc(var(--banner-h) + 74px); }
body.long-form main h3 { margin-top: var(--spacing-32); }
body.long-form main :is(p, li) { font-size: 16.5px; line-height: 1.75; }
body.long-form main blockquote { margin: var(--spacing-24) 0; padding: var(--spacing-16) var(--spacing-24);
  border-left: 3px solid var(--accent-purple); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--accent-purple) 6%, transparent); font-style: normal; }
body.long-form main blockquote p:last-child { margin-bottom: 0; }

/* «Читать дальше» + CTA в хвосте статьи */
.related { padding-top: var(--spacing-48); margin-top: var(--spacing-48);
  border-top: 1px solid var(--border); }
.related-title { margin: 0 0 var(--spacing-24); font-size: 20px; }
.article-cta { margin-top: var(--spacing-48); text-align: center; color: #fff;
  border-radius: var(--radius-lg); padding: var(--spacing-48) var(--spacing-24);
  position: relative; overflow: hidden; background: #17102e;
  border: 1px solid rgb(139 92 246 / 35%); }
.article-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 80% at 20% 10%, rgb(154 79 245 / 45%), transparent 70%),
    radial-gradient(45% 70% at 85% 90%, rgb(147 51 234 / 32%), transparent 70%); }
.article-cta > * { position: relative; z-index: 1; }
.article-cta h3 { color: #fff; font-size: 22px; margin: 0 0 var(--spacing-8); }
.article-cta p { color: rgb(255 255 255 / 82%); max-width: 34em; margin: 0 auto var(--spacing-24); }

@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 1fr; gap: var(--spacing-24); }
  /* Оглавление уезжает наверх и сворачивается: липкий сайдбар на планшете
     съедал бы половину меры строки. */
  .toc { position: static; padding: var(--spacing-16); border-radius: var(--radius-md);
    background: var(--color-surface); border: 1px solid var(--border); }
  .toc ol { padding-left: var(--spacing-12); }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
}

.article-meta { display: flex; align-items: center; gap: var(--spacing-12);
  flex-wrap: wrap; margin: 0 0 var(--spacing-24); }

/* Согласие на обработку ПДн: мелко, но читаемо; ссылка на политику — обычная */
.consent-row { display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; font-weight: 400; color: var(--tertiary-text);
  line-height: 1.45; margin: var(--spacing-4) 0 var(--spacing-12); cursor: pointer; }
.consent-row input { width: auto; margin: 2px 0 0; accent-color: var(--accent-purple); flex: none; }
.consent-row a { color: var(--accent-purple); }

/* ═══════════════════════════════════════════════════════════════════════
   Дизайн v2 (пакет «ETRN (5)», «КУБ - сайт.html»): фирменные шрифты, новая
   шапка/футер и главная страница. Классы старого контента выше НЕ трогаем —
   их обслуживают 20 остальных страниц. Брейкпоинты: 1120 → 900 → 560 → 420.
   ═══════════════════════════════════════════════════════════════════════ */

/* Manrope (OFL) — вариативный: один файл на всю типографику сайта, веса
   200–800. Пришёл на смену декоративному AuchentallerC: тот рисовал
   заголовки узнаваемо, но нечитаемо — «ФИКСИРОВАННАЯ АБОНЕНТСКАЯ ПЛАТА»
   разбиралась по буквам. Выбран из четырёх кандидатов (18.08). */
@font-face {
  font-family: 'Manrope';
  src: url('/assets/Manrope.d0639be45d.ttf') format('truetype');
  font-weight: 200 800; font-display: swap;
}

:root {
  --ink:#14101F; --ink2:#3A3348; --muted:#6E6880; --line:#E7E3EF; --soft:#F7F5FC;
  --brand:#502683; --brand2:#9A4FF5; --brand-soft:#F3ECFF;
  --display:'Manrope',Inter,-apple-system,system-ui,sans-serif;
  --bodyf:'Manrope',Inter,-apple-system,system-ui,sans-serif;
--rl2:24px;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.display { font-family: var(--display); font-weight: 800; letter-spacing: -.2px; line-height: 1.04; text-transform: uppercase; }

/* кнопки дизайна v2 (btn-p/btn-g/btn-o) — рядом со старым .btn, имена не пересекаются */
.btn-p, .btn-g, .btn-o { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 26px; border-radius: 12px; font-family: var(--bodyf); font-size: 16px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; text-decoration: none; }
.btn-p:hover, .btn-g:hover, .btn-o:hover { transform: translateY(-1px); }
.btn-p { background: var(--brand2); color: #fff; box-shadow: 0 8px 24px rgba(154,79,245,.35); }
.btn-p:hover { background: #8A3BF0; color: #fff; }
.btn-g { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-g:hover { background: rgba(255,255,255,.18); color: #fff; }
.btn-o { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-o:hover { border-color: var(--brand2); color: var(--brand); }
.btn-sm { height: 44px; padding: 0 18px; font-size: 14.5px; }

/* ── Шапка v2 ── */
.v2-head { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
/* Бюджет шапки (06.10.2026): колонка .wrap — 1132px (1180 − поля 24×2), шире
   она не становится. Лого 110 + меню из 10 пунктов + «Личный кабинет» 156 +
   2 зазора. При 15px и зазоре 20 меню занимало 927px, вся шапка — 1241px: на
   ЛЮБОМ десктопе лого сжималось в ноль, а до ~1290px кнопка входа уезжала
   за край и страница скроллилась вбок. Сейчас 14px и зазор 12: меню ~805px,
   шапка ~1111px — запас ~20px. Новый пункт меню в него НЕ влезет: сначала
   убрать другой или поднять порог бургера ниже (@media max-width: 1180px).
   11.10.2026: добавлены «Новости» (+73px) — место нашлось без потерь:
   «О платформе» → «О нас» (как в подвале) и зазор 12 → 10. Замер в браузере
   на колонке 1132px: свободно 30px (было 27). Поднимать порог бургера
   бесполезно: .wrap не шире 1180, колонка шапки не растёт с экраном. */
.v2-head .nav { display: flex; align-items: center; gap: 20px; height: 72px; }
.v2-head .nav-logo { flex: none; }
.v2-head .nav-logo img { height: 30px; width: auto; display: block; }
.v2-head nav { display: flex; gap: 10px; margin-left: auto; }
/* Вход в мобильном дровере: на десктопе его роль играет кнопка в шапке. */
.nav-cabinet-mob { display: none; }
.v2-head nav a { color: var(--ink2); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.v2-head nav a:hover, .v2-head nav a.nav-link-active { color: var(--brand); }
/* Вход в ЛК — главное действие шапки (24.08.2026). Шапка светлая на всех
   страницах, включая главную, поэтому вход везде цвета бренда: белая кнопка
   на белой шапке терялась. */
.v2-head .btn-cabinet { background: var(--brand2); color: #fff; border: 1px solid transparent; border-radius: 12px; font-family: var(--bodyf); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.v2-head .btn-cabinet:hover { color: #fff; filter: brightness(1.06); }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 11px; background: #fff; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
#mnav { display: none; }

/* ── Футер v2 (тёмный) ── */
.v2-foot { background: var(--ink); color: rgba(255,255,255,.62); padding: 64px 0 32px; margin-top: 0; }
.v2-foot .f-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.12); }
.v2-foot img { height: 30px; width: auto; margin-bottom: 16px; }
.v2-foot .f-about { font-size: 14.5px; line-height: 1.6; max-width: 280px; }
.v2-foot h5 { color: #fff; font-size: 14px; font-weight: 700; margin: 0 0 16px; }
.v2-foot a { display: block; color: rgba(255,255,255,.62); font-size: 14.5px; margin-bottom: 11px; text-decoration: none; }
.v2-foot a:hover { color: #fff; }
.v2-foot .f-bot { display: flex; gap: 20px; padding-top: 26px; font-size: 13.5px; flex-wrap: wrap; }
.v2-foot .f-bot div { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.v2-foot .f-bot a { display: inline; margin: 0; }

/* ── Главная (пересборка 02.11.2026) ──
   Первый экран фиолетовый (решение владельца), справа — свежие обновления:
   с порога видно, что платформа живая. Ниже — светлые секции, белая и
   лавандовая (--soft) по очереди. Заголовки обычным регистром: капс читался
   криком, а на длинных словах ломал строки. Без градиентов и бликов. */
.hero2 { position: relative; isolation: isolate; overflow: hidden; background: var(--brand); color: #fff; padding: 72px 0 80px; }
/* Сетка подложки — плитка 48 px: горизонталь, вертикаль и диагональ 45° (под
   ней в знаке сдвинута задняя грань). Под заголовком гаснет — текст читается. */
.hero2::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 .5H48M.5 0V48' fill='none' stroke='%23fff' stroke-opacity='.075'/%3E%3Cpath d='M0 48L48 0' fill='none' stroke='%23fff' stroke-opacity='.05'/%3E%3C/svg%3E");
  background-position: center top;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 62%); }
/* Знак КУБ чертежом: передняя грань — рамка вокруг карточки обновлений (на
   30–65 px шире её со всех сторон), задняя уходит за верх и правый край.
   Привязка к центру героя, как у сетки .wrap: центр передней грани = центр
   правой колонки (50% + 310 px). svg 1060 px → 1 единица знака = 1,99 px;
   центр грани — в точке (202,5; 314,5) единицы от угла svg. */
.hero-kub { position: absolute; z-index: -1; pointer-events: none; left: calc(50% - 93px); top: calc(50% - 627px);
  width: 1060px; height: auto; overflow: visible; }
.hero-kub path, .hero-kub circle { vector-effect: non-scaling-stroke; }
.hk-kontur path { fill: none; stroke: #fff; stroke-opacity: .32; stroke-width: 1.5; }
.hk-skrytye path { fill: none; stroke: #fff; stroke-opacity: .2; stroke-width: 1.2; stroke-dasharray: 7 7; }
.hk-uzly circle { fill: var(--brand); stroke: #fff; stroke-opacity: .6; stroke-width: 1.5; }
.hk-uzly .hk-skryt { stroke-opacity: .3; stroke-dasharray: 2 3; }
/* Один раз прорисовать знак при загрузке — и только если человек не просил меньше движения. */
@media (prefers-reduced-motion: no-preference) {
  .hk-kontur path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hk-chertit 1.8s cubic-bezier(.4, 0, .2, 1) .2s forwards; }
  .hk-skrytye, .hk-uzly { opacity: 0; animation: hk-proyavit .8s ease 1.6s forwards; }
}
@keyframes hk-chertit { to { stroke-dashoffset: 0; } }
@keyframes hk-proyavit { to { opacity: 1; } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.hero2 h1 { font-family: var(--display); font-weight: 800; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -.02em; margin: 0; max-width: 640px; overflow-wrap: anywhere; }
.hero2 p.lead { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: rgba(255,255,255,.86); margin: 20px 0 0; max-width: 520px; }
.cta-row { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-ops { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 36px 0 0; padding: 0; }
.hero-ops li { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: rgba(255,255,255,.9); }
.hero-ops i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 800; font-style: normal; color: #fff; }

/* Обновления в первом экране: пять свежих записей, ссылки ведут к записи в ленте. */
.hero-upd { background: #fff; color: var(--ink); border-radius: var(--rl2); padding: 22px 24px 18px; box-shadow: 0 24px 60px rgba(20,16,31,.28); }
.hero-upd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.hero-upd-head h2 { font-family: var(--display); font-size: 19px; font-weight: 800; margin: 0; color: var(--ink); }
.hero-upd-head a { font-size: 14px; font-weight: 600; color: var(--brand2); text-decoration: none; white-space: nowrap; }
.hero-upd-head a:hover { text-decoration: underline; }
.hero-upd-list { list-style: none; margin: 0; padding: 0; }
.hero-upd-list li + li { border-top: 1px solid var(--line); }
.hero-upd-list a { display: block; padding: 11px 0; text-decoration: none; color: inherit; border-radius: 8px; }
.hero-upd-list a:hover .hero-upd-title { color: var(--brand); }
.hero-upd-meta { display: flex; gap: 10px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hero-upd-meta span { color: var(--brand2); font-weight: 600; }
.hero-upd-title { display: block; margin-top: 3px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.hero-upd-foot { margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }

.v2sec { padding: 88px 0; }
.v2sec-soft { background: var(--soft); }
.sec-head { max-width: 680px; margin: 0 0 40px; }
.sec-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.015em; margin: 0; color: var(--ink); }
.sec-head p { font-size: 17px; color: var(--muted); margin: 16px 0 0; line-height: 1.6; }
.sec-head p a, .feat p a, .tarif-notes a { color: var(--brand); font-weight: 600; }

/* Как проходит рейс: титулы у разных операторов, статусы — текстом, как в кабинете. */
.reys { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.reys .sec-head { margin: 0; }
.tcard { background: #fff; border: 1px solid var(--line); border-radius: var(--rl2); box-shadow: 0 20px 50px rgba(80,38,131,.10); overflow: hidden; color: var(--ink); }
.tcard-h { display: flex; align-items: baseline; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.tcard-h b { font-size: 15px; font-weight: 700; }
.tcard-h span { margin-left: auto; font-size: 13px; color: var(--muted); }
.tl { list-style: none; margin: 0; padding: 4px 22px 10px; }
.tl-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.tl-row + .tl-row { border-top: 1px solid var(--line); }
.tl-n { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 800; }
.tl-b { flex: 1; min-width: 0; }
.tl-b b { display: block; font-size: 14.5px; font-weight: 600; }
.tl-b span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.st { flex: none; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--muted); background: #F1EFF5; white-space: nowrap; }
.st-ok { color: #0B7A55; background: #E7F7EF; }
.st-wait { color: #9A5B00; background: #FFF3DB; }
.tl-next { opacity: .6; }

.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.role { background: #fff; border: 1px solid var(--line); border-radius: var(--rl2); padding: 28px; }
.role h3, .feat h3 { font-family: var(--display); font-size: 19px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; color: var(--ink); }
.role p, .feat p { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0; }

.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 64px; }
.feat svg { display: block; color: var(--brand2); margin-bottom: 14px; }
.feat p { max-width: 470px; }

/* Как начать — настоящая последовательность, поэтому с номерами. */
.start-steps { list-style: none; counter-reset: shag; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; }
.start-steps li { counter-increment: shag; background: #fff; border: 1px solid var(--line); border-radius: var(--rl2); padding: 24px; }
.start-steps li::before { content: counter(shag); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 800; font-size: 15px; margin-bottom: 16px; }
.start-steps b { display: block; font-size: 16.5px; line-height: 1.35; color: var(--ink); }
.start-steps span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

/* Тарифы строками: семь карточек занимали три экрана, строка — 60 px.
   h3 / .price / .sig внутри [data-plan] — крючки гидрации (client.js). */
.tarify { border: 1px solid var(--line); border-radius: var(--rl2); overflow: hidden; background: #fff; }
.tarif { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 24px; }
.tarif + .tarif { border-top: 1px solid var(--line); }
.tarif h3 { font-family: var(--display); font-size: 17px; font-weight: 700; margin: 0; color: var(--ink); }
.tarif .who2 { font-size: 14.5px; color: var(--muted); }
.tarif .sig { font-size: 14.5px; font-weight: 600; color: var(--brand); }
.tarif .price { font-family: var(--bodyf); font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-align: right; white-space: nowrap; }
.tarif .price small { font-size: 13.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tarif-notes { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.55; color: var(--muted); max-width: 860px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; margin: 0; color: var(--ink); }
.cta-band p { font-size: 16.5px; color: var(--muted); margin: 10px 0 0; max-width: 560px; line-height: 1.55; }
.cta-band .cta-row { margin-top: 0; }
.hero2 a:focus-visible, .v2sec a:focus-visible, .v2sec button:focus-visible { outline: 2px solid var(--brand2); outline-offset: 3px; }
.hero-main a:focus-visible { outline-color: #fff; } /* на фиолетовом фиолетовая рамка не видна */

/* ── Адаптив v2 ── */
/* Шапка складывается в бургер с 1180px: уже ниже полное меню не помещается
   (бюджет — у .v2-head .nav выше). До 06.10.2026 порог был 900px, и на
   901–1290px кнопка входа уезжала за край. */
@media (max-width: 1180px) {
  .v2-head .nav { flex-wrap: nowrap; position: relative; height: auto; min-height: 72px; gap: 10px; padding: 0 16px; }
  .v2-head .nav-logo { flex: 0 0 auto; }
  /* Прижатие к правому краю унаследовано от ушедшей «Оставить заявку»:
     без него кнопка входа вставала вплотную к лого. */
  .v2-head .btn-cabinet { margin-left: auto; padding: 0 14px; font-size: 14px; white-space: nowrap; }
  .v2-head nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; gap: 0; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--rl2); box-shadow: 0 18px 44px rgba(20,16,31,.13); padding: 8px; z-index: 60; }
  .v2-head nav a { padding: 13px 14px; border-radius: 10px; font-size: 16px; }
  .v2-head nav a:hover { background: var(--soft); }
  /* Вход — последним пунктом дровера, отделён чертой и цветом бренда. */
  .nav-cabinet-mob {
    display: block;
    margin-top: 4px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
    color: var(--brand) !important;
    font-weight: 700;
  }
  .v2-head .nav:has(#mnav:checked) nav { display: flex; }
  .burger { display: flex; }
  .v2-head .nav:has(#mnav:checked) .burger { background: var(--soft); border-color: var(--brand); }
}
/* На планшете и узком ноутбуке меню — выпадашка под бургером, а не простыня
   во всю ширину экрана; на телефоне (≤720px) — по-прежнему во всю ширину. */
@media (min-width: 721px) and (max-width: 1180px) {
  .v2-head nav { left: auto; right: 16px; width: 320px; }
}
@media (max-width: 900px) {
  .hero-grid, .reys { grid-template-columns: 1fr; gap: 40px; }
  .roles { grid-template-columns: 1fr; gap: 14px; }
  .feats { grid-template-columns: 1fr; gap: 32px; }
  .start-steps { grid-template-columns: 1fr 1fr; }
  .v2-foot .f-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .v2sec { padding: 64px 0; }
  .hero2 { padding: 48px 0 56px; }
  .hero-kub { left: auto; right: -300px; top: auto; bottom: -170px; width: 760px; }
  .hero2::before { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5), #000 40%, rgba(0,0,0,.6)); mask-image: linear-gradient(180deg, rgba(0,0,0,.5), #000 40%, rgba(0,0,0,.6)); }
}
@media (max-width: 700px) {
  .tarif { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n p" "s s" "w w"; gap: 2px 12px; padding: 14px 18px; }
  .tarif h3 { grid-area: n; }
  .tarif .price { grid-area: p; font-size: 19px; }
  .tarif .sig { grid-area: s; }
  .tarif .who2 { grid-area: w; font-size: 13.5px; }
}
@media (max-width: 560px) {
  .v2-foot .f-grid { grid-template-columns: 1fr; gap: 26px; padding-bottom: 32px; }
  .v2sec { padding: 52px 0; }
  .wrap { padding: 0 18px; }
  .sec-head { margin-bottom: 28px; }
  .sec-head p { font-size: 16px; }
  .start-steps { grid-template-columns: 1fr; gap: 12px; }
  .role, .start-steps li { padding: 22px; }
  .hero-upd { padding: 18px 18px 14px; }
}
@media (max-width: 420px) {
  .v2-head .nav { gap: 8px; padding: 0 12px; }
  .v2-head .nav-logo img { height: 26px; }
  .v2-head .btn-cabinet { padding: 0 12px; font-size: 13.5px; }
}

/* ── Темы ──
   Дизайн v2 одно-темный (светлый): главная пинится к light независимо от
   prefers-color-scheme — иначе тёмная схема браузера красит унаследованные
   заголовки в белый на белых карточках. Цвета заголовков задаём явно по той
   же причине: база старой темы переключается медиа-запросом, а поверхности
   v2 всегда светлые. */
body.v2home { background: #fff; color: var(--ink); color-scheme: light; }

/* Внутренние страницы остались в старой адаптивной теме — светлой шапке v2
   нужен тёмный вариант, чтобы не висеть белой плашкой над тёмным контентом. */
@media (prefers-color-scheme: dark) {
  body:not(.v2home) .v2-head { background: rgba(18,18,31,.86); border-bottom-color: #2c2c45; }
  /* фиолетовый логотип тонет на тёмной шапке — перекрашиваем в белый */
  body:not(.v2home) .nav-logo img { filter: brightness(0) invert(1); }
  body:not(.v2home) .v2-head nav a { color: #d1d5db; }
  body:not(.v2home) .v2-head nav a:hover,
  body:not(.v2home) .v2-head nav a.nav-link-active { color: #B47DF8; }
  body:not(.v2home) .burger { background: #1a1a2e; color: #f3f4f6; border-color: #2c2c45; }
  body:not(.v2home) .v2-head nav { background: #1a1a2e; border-color: #2c2c45; }
  body:not(.v2home) .v2-head .nav:has(#mnav:checked) .burger { background: #232338; border-color: #B47DF8; }
}

/* Главная v2 живёт от края до края: гасим рамку main для страниц с hero2 */
main.section:has(.hero2) { padding: 0; }

/* ── Лента обновлений: страница /updates/ ──
 * На главной лента — пятью строками в первом экране (.hero-upd выше); здесь
 * запись — метка, дата, заголовок и три строки. Ссылка (upd-link) есть только
 * там, где действительно есть куда вести. */

.upd-top { display: flex; align-items: center; gap: var(--spacing-8);
  justify-content: space-between; }
.upd-date { font-size: 12.5px; color: var(--tertiary-text);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.upd-link { align-self: flex-start; font-size: 14px; font-weight: 600;
  color: var(--accent-purple); text-decoration: none; }
.upd-link:hover { text-decoration: underline; }

/* ── Страница обновлений: поиск, отбор, лента по месяцам ─────────────────
   Сплошной список карточек читался как стена: не видно границ месяцев, нельзя
   найти знакомое слово и не отличить изменения в API от изменений в апке.
   Ось с точками даёт ленте направление, липкий заголовок месяца отвечает на
   «где я» при прокрутке. */
.upd-page { max-width: 860px; }

.upd-tools { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--spacing-12); margin-bottom: var(--spacing-32);
  position: sticky; top: 64px; z-index: 5; padding: var(--spacing-12) 0;
  background: linear-gradient(var(--background) 82%, transparent); }
.upd-tools .rubric-filter { margin: 0; }

.upd-search { position: relative; display: flex; align-items: center; flex: 1 1 240px; }
.upd-search svg { position: absolute; left: 13px; width: 17px; height: 17px;
  fill: none; stroke: var(--tertiary-text); stroke-width: 1.8; stroke-linecap: round; }
.upd-search input { width: 100%; height: 40px; padding: 0 14px 0 38px;
  font: inherit; font-size: 14.5px; color: var(--primary-text);
  background: var(--color-surface); border: 1px solid var(--border);
  border-radius: 999px; outline: none; transition: border-color .12s ease; }
.upd-search input::placeholder { color: var(--tertiary-text); }
.upd-search input:focus-visible { border-color: var(--accent-purple);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-purple) 18%, transparent); }
.upd-search input::-webkit-search-cancel-button { cursor: pointer; }

.upd-timeline { display: grid; gap: var(--spacing-32); }
.upd-month[hidden] { display: none; }
.upd-month-title { display: flex; align-items: center; gap: var(--spacing-8);
  margin: 0 0 var(--spacing-16); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tertiary-text);
  position: sticky; top: 120px; z-index: 4;
  padding: var(--spacing-8) 0; background: var(--background); }
.upd-month-count { font-style: normal; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0; color: var(--tertiary-text); background: var(--border);
  border-radius: 999px; padding: 1px 8px; }
.upd-month-items { display: grid; gap: 2px; }

/* Ось слева: линия рисуется самой точкой через ::before, поэтому у последней
   записи месяца хвост не свисает в пустоту. */
.upd-item { display: grid; grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--spacing-16); scroll-margin-top: 140px; }
.upd-item[hidden] { display: none; }
.upd-rail { position: relative; display: flex; justify-content: center; padding-top: 22px; }
.upd-dot { position: relative; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent-purple); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-purple) 14%, transparent); }
.upd-dot-law   { background: #b45309; box-shadow: 0 0 0 4px rgb(251 191 36 / 18%); }
.upd-dot-howto { background: #047857; box-shadow: 0 0 0 4px rgb(16 185 129 / 16%); }
.upd-dot-vs    { background: #6d28d9; box-shadow: 0 0 0 4px rgb(154 79 245 / 15%); }
.upd-dot-tech  { background: #0e7490; box-shadow: 0 0 0 4px rgb(34 211 238 / 16%); }
.upd-item:not(:last-child) .upd-rail::after { content: ""; position: absolute;
  top: 38px; bottom: -8px; width: 2px; border-radius: 2px; background: var(--border); }

.upd-body { padding: var(--spacing-16) var(--spacing-24) var(--spacing-24);
  border-radius: var(--radius-md); background: var(--color-surface);
  border: 1px solid var(--border); display: flex; flex-direction: column;
  gap: var(--spacing-8); transition: border-color .12s ease, box-shadow .12s ease; }
.upd-item:hover .upd-body { border-color: color-mix(in srgb, var(--accent-purple) 32%, var(--border));
  box-shadow: var(--shadow-card); }
.upd-body h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.upd-body p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--secondary-text); }

.upd-empty { text-align: center; color: var(--tertiary-text); font-size: 15px;
  padding: var(--spacing-32) 0; }
.upd-empty[hidden] { display: none; }

/* Широкий экран: ось посередине, записи по обе стороны.
   Одна колонка на 1600 пикселях выглядит как ущелье — половина экрана пустая,
   а лента всё равно читается сверху вниз. Здесь ось становится центральной,
   карточки чередуются, и глаз ловит ритм: где месяц сменился и какого раздела
   записей больше, видно не читая.

   Сторона берётся из data-side, а не из :nth-child: CSS считает и скрытые
   отбором записи, поэтому после фильтра зигзаг съезжал бы на одну сторону.
   Атрибут ставит сборка, а клиент пересчитывает после каждого отбора. */
@media (min-width: 1080px) {
  .upd-page { max-width: 1160px; }
  .upd-month-items { position: relative; gap: var(--spacing-16); }
  /* Ось рисуется одной линией на весь месяц, а не хвостами у каждой точки:
     при чередовании хвосты дают разрывы на стыках. */
  .upd-month-items::before { content: ""; position: absolute; top: 14px; bottom: 14px;
    left: 50%; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--border); }
  .upd-item { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: start; }
  .upd-item .upd-rail { grid-column: 2; padding-top: 18px; }
  .upd-item .upd-rail::after { display: none; }
  .upd-item[data-side="l"] .upd-body { grid-column: 1; }
  .upd-item[data-side="r"] .upd-body { grid-column: 3; }
  .upd-dot { z-index: 1; box-shadow: 0 0 0 4px var(--background),
    0 0 0 7px color-mix(in srgb, var(--accent-purple) 16%, transparent); }
  .upd-dot-law   { box-shadow: 0 0 0 4px var(--background), 0 0 0 7px rgb(251 191 36 / 22%); }
  .upd-dot-howto { box-shadow: 0 0 0 4px var(--background), 0 0 0 7px rgb(16 185 129 / 20%); }
  .upd-dot-vs    { box-shadow: 0 0 0 4px var(--background), 0 0 0 7px rgb(154 79 245 / 20%); }
  .upd-dot-tech  { box-shadow: 0 0 0 4px var(--background), 0 0 0 7px rgb(34 211 238 / 20%); }
  /* Метка и дата разворачиваются к оси — так пара «раздел + дата» читается
     как подпись к точке, а не как случайная строка в углу карточки. */
  .upd-item[data-side="l"] .upd-top { flex-direction: row-reverse; }
  .upd-month-title { justify-content: center; top: 124px; }
}

@media (max-width: 720px) {
  .upd-tools { position: static; background: none; padding: 0; }
  .upd-month-title { position: static; }
  .upd-item { grid-template-columns: 14px minmax(0, 1fr); gap: var(--spacing-12); }
  .upd-body { padding: var(--spacing-16); }
}

/* ── Хлебные крошки (FAQ, новости) ── */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--tertiary-text);
  margin-bottom: var(--spacing-16); }
.crumbs a { color: var(--primary-cta); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ── FAQ: страница /faq/ ──
 * Собирается из content/faq.json (build.tsx). Аккордеон — родной <details>:
 * работает без скриптов (CSP режет инлайн, а старый React-аккордеон после
 * переезда на статику умер — см. 🩸 в build.tsx), открывается с клавиатуры,
 * ответ виден поисковикам. Селекторы с .faq-page — чтобы перебить общие
 * правила long-form для статей. */
.faq-page { max-width: 960px; }
.faq-page h1 { margin: 0 0 var(--spacing-16); }
.faq-page .faq-intro { font-size: 16px; color: var(--secondary-text); max-width: 700px;
  margin: 0 0 var(--spacing-48); }
.faq-sec { margin-bottom: var(--spacing-48); }
.faq-page .faq-sec-title { margin: 0 0 var(--spacing-16); font-size: 24px; font-weight: 650;
  color: var(--primary-cta); }
.faq-sec-title span { color: var(--secondary-text); font-size: 18px; font-weight: 500; }
.faq-list { display: flex; flex-direction: column; gap: var(--spacing-12); }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--color-surface); transition: border-color .15s, box-shadow .15s; }
.faq-item:hover { border-color: color-mix(in srgb, var(--accent-purple) 35%, var(--border)); }
.faq-item[open] { border-color: color-mix(in srgb, var(--accent-purple) 45%, var(--border));
  box-shadow: var(--shadow-card); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: var(--spacing-16); padding: 20px var(--spacing-24);
  font-size: 16.5px; font-weight: 600; line-height: 1.4; color: var(--primary-text);
  border-radius: var(--radius-md); }
.faq-item summary::-webkit-details-marker { display: none; }
/* Шеврон: вниз — закрыт, вверх — открыт. */
.faq-item summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2px solid var(--accent-purple); border-bottom: 2px solid var(--accent-purple);
  transform: rotate(45deg); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 2px; }
.faq-a { padding: 0 var(--spacing-24) 20px; }
.faq-page .faq-a p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--secondary-text);
  max-width: none; }
.faq-a a { color: var(--accent-purple); font-weight: 600; text-decoration: none; white-space: nowrap; }
.faq-a a:hover { text-decoration: underline; }
.faq-cta { margin-top: var(--spacing-64); text-align: center; color: #fff;
  border-radius: var(--radius-lg); padding: var(--spacing-48) var(--spacing-24);
  background: linear-gradient(135deg, var(--primary-cta) 0%, var(--accent-purple) 100%); }
.faq-page .faq-cta h2 { color: #fff; margin: 0 0 var(--spacing-12); }
.faq-page .faq-cta p { color: rgb(255 255 255 / 90%); font-size: 17px; margin: 0 auto var(--spacing-24);
  max-width: 34em; }
.faq-cta-btn { background: #fff; color: var(--primary-cta); font-weight: 700; text-decoration: none; }
.faq-cta-btn:hover { color: var(--primary-cta-hover); }

@media (max-width: 640px) {
  .faq-item summary { padding: 16px; font-size: 16px; }
  .faq-a { padding: 0 16px 16px; }
}