/* ============================================================
   Лендинг «На потоке» v4 — базовые стили (фаза Ф2).
   Палитра «Глубина»: цвета берутся ТОЛЬКО из css/tokens.css
   (var(--deep-*), var(--vk*), var(--type-*), каналы var(--*-rgb)).
   Сырых HEX в этом файле нет.

   Моушн-идентичность (см. docs/landing-v4/motion-storyboard.md):
   характер «premium» — easing cubic-bezier(.4, 0, .2, 1),
   длительности 200 / 400 / 600 мс, вход «fade-up» 16–24 px.
   Анимируются только transform и opacity.
   ============================================================ */

/* ---------- 0. Шрифт (Inter Variable, сабсет кириллица) ---------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable-cyr.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Нецветовые токены ---------- */
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Шкала кеглей (mobile → desktop) */
  --fs-xs:   0.8125rem;                               /* 13 */
  --fs-sm:   0.875rem;                                /* 14 */
  --fs-base: 1rem;                                    /* 16 */
  --fs-lead: clamp(1rem, 0.86rem + 0.55vw, 1.25rem);       /* 16 → 20 */
  --fs-h3:   clamp(1.125rem, 1rem + 0.6vw, 1.375rem);      /* 18 → 22 */
  --fs-h2:   clamp(1.75rem, 1.2rem + 2.3vw, 2.75rem);      /* 28 → 44 */
  --fs-h1:   clamp(2rem, 0.6rem + 6.2vw, 3.5rem);           /* 32 → 34 на 390; с 768 — см. ниже */

  --lh-tight: 1.06;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --track-tight: -0.02em;

  /* Форма */
  --radius-sm:   10px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* Сетка: контейнер 1200, gutter 16 / 24 / 40 */
  --container: 1200px;
  --gutter: 16px;
  --space-section: clamp(64px, 6vw + 24px, 112px);
  --topbar-h: 64px;

  /* Моушн-константы (premium) */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick: 200ms;
  --dur: 400ms;
  --dur-slow: 600ms;

  /* Тени и свечение */
  --shadow-card:
    inset 0 1px 0 rgb(var(--deep-ink-rgb) / 0.05),
    0 24px 60px -24px rgb(var(--deep-bg-rgb) / 0.9);
  --shadow-float: 0 20px 50px -20px rgb(var(--deep-bg-rgb) / 0.95);
  --glow-accent:
    0 0 0 1px rgb(var(--deep-accent-rgb) / 0.35),
    0 0 48px -8px rgb(var(--deep-accent-rgb) / 0.55);
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --topbar-h: 72px;
    --fs-h1: clamp(2.5rem, 1.1rem + 3.3vw, 3.5rem);   /* 43 → 56; «Посты выходят сами. Вашим голосом» = 1 строка с 900 px (≈1001 px при 56 px) */
  }
}
@media (min-width: 1200px) {
  :root { --gutter: 40px; }
}

/* ---------- 2. Сброс и база ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 8px);
  /* Фолбэк: overflow-x: clip не знают старые Android и Safari 15 — без hidden бегущая строка (marquee, transform)
     начинает скроллить страницу вбок. hidden стоит перед clip: кто понимает clip — берёт его, кто нет — hidden */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;      /* фолбэк: 100svh не знают старые Safari/Android */
  min-height: 100svh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--deep-ink);
  background: var(--deep-bg);
  /* Ф4: оптический размер (ось opsz Inter) — только у заголовков и крупных цифр (правило ниже), основной текст 13–19 px —
     с opsz 14 (значение шрифта по умолчанию; при auto было бы 13–19, на глаз неотличимо). Причина — скорость первой
     раскладки: каждое новое сочетание «размер × насыщенность» вариативного шрифта создаёт свой экземпляр, и с opsz auto
     он дороже (замер Ф4: 2,7 мс против 1,5 мс без CPU-замедления; на странице ~30 сочетаний) */
  font-optical-sizing: none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";       /* табличные цифры везде: цены, лимиты, калькулятор */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;     /* фолбэк перед clip (см. html выше) */
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture img { width: 100%; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--deep-accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--deep-accent-strong); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--deep-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgb(var(--deep-accent-rgb) / 0.35);
  color: var(--deep-ink);
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--deep-accent);
  color: var(--deep-bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-quick) var(--ease);
}
.skip-link:focus-visible { transform: none; outline-offset: 0; }

/* ---------- 3. Типографика ---------- */
h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: 760;
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: 720;
  line-height: 1.1;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: 640;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
/* Заголовки и крупные цифры — с оптическим размером, как было (см. body, Ф4) */
h1, h2, h3, .h1, .h2, .h3, .tariff-sum, .num, .pain-outcome { font-optical-sizing: auto; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--deep-muted);
  text-wrap: pretty;
}
.muted  { color: var(--deep-muted); }
.accent { color: var(--deep-accent); }
.small  { font-size: var(--fs-sm); }
.xs     { font-size: var(--fs-xs); }
.tnum   { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep-accent);
}

/* ---------- 4. Сетка ---------- */
.container {
  width: min(100% - var(--gutter) * 2, var(--container));
  margin-inline: auto;
}
.container-narrow { max-width: 760px; }

.section { position: relative; padding-block: var(--space-section); }
.section-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }

.grid { display: grid; gap: var(--gutter); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-3-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 5. Иконки (inline SVG, без библиотек) ---------- */
.icon {
  width: 1.125em;
  height: 1.125em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Ф7: знак «скалярия» (symbol #i-logo, моно currentColor) — 30 px, как на утверждённом превью; спрайт — 0×0 вне потока,
   не display:none (маска знака внутри display:none-поддерева применяется не во всех браузерах) */
.mark { width: 30px; height: 30px; flex: none; color: var(--deep-accent); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 6. Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-quick) var(--ease),
    border-color var(--dur-quick) var(--ease),
    color var(--dur-quick) var(--ease),
    box-shadow var(--dur-quick) var(--ease),
    transform var(--dur-quick) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--deep-accent); outline-offset: 3px; }
.btn .icon { transition: transform var(--dur-quick) var(--ease); }
.btn:hover .icon { transform: translateX(2px); }

/* Primary — акцент; текст на заливке акцента ТЁМНЫЙ (var(--deep-bg)), не белый */
.btn-primary {
  background: var(--deep-accent);
  color: var(--deep-bg);
  box-shadow: 0 10px 30px -12px rgb(var(--deep-accent-rgb) / 0.55);
}
.btn-primary:hover { background: var(--deep-accent-strong); color: var(--deep-bg); }

/* Secondary — прозрачная с кромкой */
.btn-secondary {
  background: transparent;
  color: var(--deep-ink);
  border-color: var(--deep-border);
}
.btn-secondary:hover { background: var(--deep-raised); border-color: var(--deep-muted); color: var(--deep-ink); }

/* VK — единственный «чужой» цвет; светлый текст допустим по правилам палитры.
   Ф6b (требование заказчика: контраст текста кнопок ≥ 4,5:1): заливка в покое — --vk-hover, на hover — --vk. На --vk
   текст --deep-ink даёт 3,68:1 (даже чисто белый — 4,13:1, 4,5:1 недостижимо), на --vk-hover — 4,75:1 (расчёт — reports/f6b.md).
   Оба цвета — токены палитры; на hover кнопка становится светлее */
.btn-vk {
  background: var(--vk-hover);
  color: var(--deep-ink);
  border-color: rgb(var(--deep-ink-rgb) / 0.28);   /* Ф6b (§8): тонкая светлая кромка — граница кнопки читается на тёмной воде */
  box-shadow: 0 12px 32px -12px rgb(var(--vk-rgb) / 0.65);
}
.btn-vk:hover { background: var(--vk); color: var(--deep-ink); }
.btn-vk:focus-visible { outline-color: var(--deep-ink); }

.btn-sm { min-height: 40px; padding: 0.5rem 0.875rem; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.btn-lg { min-height: 56px; padding: 1rem 1.5rem; font-size: 1.1875rem; font-weight: 700; }
.btn-block { width: 100%; }

/* ---------- 7. Поля формы ---------- */
.field { display: grid; gap: 0.5rem; min-width: 0; }
.field-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--deep-muted);
}
.input {
  width: 100%;
  min-height: 56px;
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--deep-border);
  background: var(--deep-surface);
  color: var(--deep-ink);
  font-size: var(--fs-base);
  transition: border-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease);
}
.input::placeholder { color: rgb(var(--deep-muted-rgb) / 0.85); }   /* Ф4: контраст 4.81:1 на --deep-surface (было 0.6 → 3.11:1) */
.input:hover { border-color: var(--deep-muted); }
.input:focus {
  outline: none;
  border-color: var(--deep-accent);
  box-shadow: 0 0 0 3px rgb(var(--deep-accent-rgb) / 0.25);
}

/* ---------- 8. Карточка «стекло» с подсвеченной кромкой ---------- */
.card {
  position: relative;
  isolation: isolate;
  padding: clamp(20px, 2.5vw, 28px);
  border-radius: var(--radius-lg);
  background: rgb(var(--deep-surface-rgb) / 0.72);
  border: 1px solid rgb(var(--deep-border-rgb) / 0.9);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
/* Кромка-свет: градиентная рамка 1 px через маску, цвет — акцент */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    160deg,
    rgb(var(--deep-accent-rgb) / 0.55),
    rgb(var(--deep-ink-rgb) / 0.08) 38%,
    transparent 70%
  );
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.card-solid { background: var(--deep-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
.card-raised { background: var(--deep-raised); }
.card-accent { box-shadow: var(--shadow-card), var(--glow-accent); }
.card-accent::before {
  background: linear-gradient(160deg, rgb(var(--deep-accent-rgb) / 0.9), rgb(var(--deep-accent-rgb) / 0.25) 50%, rgb(var(--deep-accent-rgb) / 0.08));
}

/* ---------- 9. Плашки статуса: заливка 10 %, граница 40 % ---------- */
.pill {
  --pill-rgb: var(--deep-accent-rgb);
  --pill-color: var(--deep-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 28px;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--pill-color);
  background: rgb(var(--pill-rgb) / 0.1);              /* fallback */
  border: 1px solid rgb(var(--pill-rgb) / 0.4);
}
@supports (color: color-mix(in srgb, red 10%, transparent)) {
  .pill {
    background: color-mix(in srgb, var(--pill-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--pill-color) 40%, transparent);
  }
}
.pill .icon { width: 1em; height: 1em; }
.pill-success { --pill-rgb: var(--deep-success-rgb); --pill-color: var(--deep-success); }
.pill-warning { --pill-rgb: var(--deep-warning-rgb); --pill-color: var(--deep-warning); }
.pill-neutral { --pill-rgb: var(--deep-neutral-rgb); --pill-color: var(--deep-neutral); }
.pill-danger  { --pill-rgb: var(--deep-danger-rgb);  --pill-color: var(--deep-danger); }
.pill-muted   { --pill-rgb: var(--deep-muted-rgb);   --pill-color: var(--deep-muted); }
/* Типы постов (ценность / личное / вовлечение / предложение услуги) */
.pill-type-value      { --pill-rgb: var(--type-value-rgb);      --pill-color: var(--type-value); }
.pill-type-personal   { --pill-rgb: var(--type-personal-rgb);   --pill-color: var(--type-personal); }
.pill-type-engagement { --pill-rgb: var(--type-engagement-rgb); --pill-color: var(--type-engagement); }
.pill-type-cta        { --pill-rgb: var(--type-cta-rgb);        --pill-color: var(--type-cta); }

/* Чип-факт: нейтральная плашка с иконкой-акцентом */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--deep-border);
  background: rgb(var(--deep-raised-rgb) / 0.7);
  color: var(--deep-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.chip .icon { color: var(--deep-accent); width: 1.125rem; height: 1.125rem; }

/* ---------- 10. Фоновое свечение «свет в толще воды» (только CSS) ---------- */
.glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.glow::before,
.glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
/* Главный свет: сверху справа, как луч, уходящий в глубину */
.glow::before {
  width: clamp(520px, 72vw, 980px);
  aspect-ratio: 1;
  top: -22%;
  right: -18%;
  background: radial-gradient(
    closest-side,
    rgb(var(--deep-accent-rgb) / 0.26),
    rgb(var(--deep-accent-rgb) / 0.08) 48%,
    transparent 74%
  );
}
/* Отражённый свет: слева внизу, холоднее и слабее */
.glow::after {
  width: clamp(360px, 48vw, 640px);
  aspect-ratio: 1;
  left: -16%;
  bottom: -28%;
  background: radial-gradient(
    closest-side,
    rgb(var(--deep-accent-strong-rgb) / 0.16),
    rgb(var(--deep-accent-strong-rgb) / 0.05) 50%,
    transparent 74%
  );
}
/* Световой столб сверху и взвесь-«частицы» (точки из radial-gradient, без canvas) */
.glow-shaft {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--deep-accent-rgb) / 0.07), transparent 38%),
    radial-gradient(1.5px 1.5px at 12% 28%, rgb(var(--deep-ink-rgb) / 0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 64%, rgb(var(--deep-ink-rgb) / 0.3) 50%, transparent 51%),
    radial-gradient(2px 2px at 58% 18%, rgb(var(--deep-accent-rgb) / 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 52%, rgb(var(--deep-ink-rgb) / 0.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 74%, rgb(var(--deep-accent-rgb) / 0.32) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 88%, rgb(var(--deep-ink-rgb) / 0.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 34%, rgb(var(--deep-ink-rgb) / 0.28) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 80%, rgb(var(--deep-accent-rgb) / 0.3) 50%, transparent 51%);
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
  background-size: 100% 100%, 520px 440px, 610px 530px, 740px 620px, 460px 500px, 680px 560px, 590px 470px, 500px 640px, 630px 580px;
  opacity: 0.9;
}

/* ---------- 11. Топбар ----------
   Правка заказчика 2026-10-28: топбар одинаков в обоих состояниях — прозрачный фон, светлый текст (--deep-ink),
   без капсул-подложек. На первом экране он лежит прямо на видео (hero заходит под него, §12), но теперь полоса за
   топбаром затемняется вместе со всем hero (у .hero-shade снята маска, §12) — светлая подложка под тёмный текст
   больше не нужна. После 24 px скролла (.is-scrolled, main.js, §14) добавляется плотная плашка и граница, текст
   остаётся светлым. Отступы не меняются — без сдвигов. Граница 1 px есть всегда (в покое прозрачная) — высота
   топбара = --topbar-h + 1px в обоих состояниях. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--topbar-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--deep-ink);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--deep-ink); }
.brand .mark { color: var(--deep-accent); transition: transform var(--dur) var(--ease); }
.brand:hover .mark { transform: translateX(2px); }

.nav { display: none; align-items: center; gap: 0.25rem; padding: 4px; border-radius: var(--radius-pill); }
.nav a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-pill);
  color: var(--deep-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;   /* «Примеры постов» не переносится в две строки при сжатии топбара (900–1100 px) */
  transition: color var(--dur-quick) var(--ease), background-color var(--dur-quick) var(--ease);
}
.nav a:hover { color: var(--deep-ink); background: var(--deep-raised); }
@media (min-width: 900px) {
  .nav { display: flex; }
}

/* Бренд + бейдж VK бизнес ID в одну строку (правка заказчика 2026-10-24); подложки-капсулы нет — только отступы,
   знак стоит там же, где стоял бы без обёртки */
.brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-left: -10px;                     /* обёртка выступает влево — знак стоит там же, где и без неё */
  padding: 4px 14px 4px 10px;
  border-radius: var(--radius-pill);
}
.vkid-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--deep-border);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--deep-ink);
  transition: color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.vkid-logo { width: 22px; height: 22px; flex: none; }
.vkid-logo .vkid-sq { fill: var(--vk); }
.vkid-logo .vkid-bg { fill: #fff; }
/* Телефон: знак + бейдж + кнопка в одну строку не влезают — в топбаре прячем слово «На потоке» (имя есть в aria-label ссылки и в футере) */
@media (max-width: 479.98px) {
  .brand-pill { flex: none; gap: 6px; padding-right: 10px; }
  .topbar .brand > span { display: none; }
  .vkid-badge { padding-left: 6px; gap: 4px; font-size: 0.75rem; }
  .vkid-logo { width: 18px; height: 18px; }
}
.topbar-cta { flex: none; }

/* Кнопки справа в шапке (правка заказчика 2026-10-29): «Войти в сервис» + «Получить первый пост» в один ряд.
   Вход — второстепенная кнопка (контур), основное действие по-прежнему одно.
   Бюджет шапки: бренд с бейджем VK ≈ 265 px, меню ≈ 428, вход ≈ 137, CTA ≈ 190, зазоры 3 × 16 и гуттер 2 × 14 —
   всё вместе влезает в ширину раскладки от ≈ 1100 px. Порог медиа-запроса 1120: он считается по ширине окна
   с полосой прокрутки (классические скроллбары Windows отнимают ещё ≈ 15 px), а раскладке нужны именно 1100.
   Ниже порога вход скрыт: иначе сжимается капсула бренда и надписи наезжают на меню (проверено на 900–1119 px).
   Войти на телефоне и планшете можно с той же кнопки «Получить первый пост» — в приложении для этого есть
   кнопка «У меня уже есть аккаунт». */
.topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.topbar-login { display: none; }
@media (min-width: 1120px) {
  .topbar-login { display: inline-flex; }
}

/* ---------- 12. Hero (статика, без JS) ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(36px, 5vw, 64px) clamp(56px, 7vw, 96px);
  /* Решение заказчика 2026-10-24: hero (и видео) начинается под прозрачным топбаром — сдвиг вверх на высоту топбара
     и столько же добавлено к верхнему отступу: содержимое стоит там же, где раньше, раскладка не меняется (CLS 0) */
  margin-top: calc(-1 * (var(--topbar-h) + 1px));
  padding-top: calc(var(--topbar-h) + 1px + clamp(36px, 5vw, 64px));
}
/* Ф6c (сториборд §13.3 + правка заказчика 2026-10-24): сверху — H1 по центру; на телефоне: шаги с формой внутри шага 1,
   итог, карточка «Ваш месяц» (порядок DOM = порядок чтения). На desktop (≥ 900 px) колонки меняются местами: слева карточка
   «Ваш месяц», справа шаги, итог — отдельной строкой под ними по центру (см. §12 ниже) */
.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
/* H1 (правка заказчика 2026-10-24): в две строки по смыслу — «7 минут и контент в вашем голосе / на месяц готов»; с 640 px
   каждая строка — блок (H1 над обеими колонками, §12 ниже), на телефоне строки обычные — перенос по ширине (3 строки) */
.hero-title { text-align: center; text-wrap: balance; font-variant-numeric: normal; font-feature-settings: normal; }
.hero-title .accent { color: var(--deep-accent); }
@media (min-width: 640px) {
  .h1-l { display: block; }
}

.hero-copy {
  display: grid;
  gap: 18px;
  align-content: center;
  min-width: 0;
  /* табличные цифры (body, "tnum") в Inter расширяют и дефис: «Контент-план» читался как «Контент - план» (дефис 11 px
     вместо 8 при 17 px). В тексте первого экрана — обычные; табличные остаются у времени шагов (.hs-time) */
  font-variant-numeric: normal;
  font-feature-settings: normal;
}

/* Шаги: кружок с номером · время крупно · действие (≥ 640 — в одну строку; уже — время над действием).
   Кружок — слои, как у кружков степпера Ф6b: .hs-n (номер, «ждёт»), .hs-on (акцентный кружок, «активен»), .hs-ok (галочка, «готово»);
   подсветка строки .hs-hl — отдельный слой без текста. Тексты шагов всегда в полном цвете (контраст в любой фазе цикла).
   Между кружками — линия-«поток» (::after, статична). Финальный кадр (разметка по умолчанию): все три — галочки */
.hero-steps { display: grid; margin-top: 4px; }
.hs {
  --hs-num: 32px;
  --hs-pad: 10px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--hs-num) minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding-block: var(--hs-pad);
}
.hs::after {
  content: "";
  position: absolute;
  z-index: -2;
  left: calc(var(--hs-num) / 2 - 1px);
  top: calc(var(--hs-pad) + var(--hs-num) + 6px);
  bottom: calc(6px - var(--hs-pad));
  width: 2px;
  border-radius: 1px;
  background: var(--deep-border);
}
.hs-hl,
.hd-hl {
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  align-self: stretch;               /* у строки align-items: start — без этого пустой слой схлопывается в 0 */
  z-index: -1;
  margin: -6px -10px -4px;           /* снизу ближе: кромка подсветки шага 1 — в 12 px от кнопки ВК (граница кнопки ≥ 3:1) */
  border-radius: var(--radius);
  background: rgb(var(--deep-accent-rgb) / 0.09);
  border: 1px solid rgb(var(--deep-accent-rgb) / 0.4);
  opacity: 0;
}
.hs-num {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: var(--hs-num);
  height: var(--hs-num);
  border-radius: 50%;
  border: 1px solid var(--deep-border);
  background: var(--deep-bg);
  display: grid;
  place-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
.hs-n { font-style: normal; color: var(--deep-muted); opacity: 0; }
.hs-on,
.hs-ok,
.hd-ok {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.hs-on { background: var(--deep-accent); color: var(--deep-bg); opacity: 0; }
.hs-ok {
  background: rgb(var(--deep-success-rgb) / 0.15);
  border: 1px solid rgb(var(--deep-success-rgb) / 0.55);
  color: var(--deep-success);
}
.hs-ok svg,
.hd-ok svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hs-time {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.25rem;
  font-weight: 760;
  line-height: var(--hs-num);
  letter-spacing: -0.01em;
  color: var(--deep-accent);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-optical-sizing: auto;
  white-space: nowrap;
}
.hs-text {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.45;
  color: var(--deep-ink);
}
.hs .hero-form { position: relative; isolation: isolate; grid-column: 2; grid-row: 3; margin-top: 16px; }
/* Мягкая тёмная подложка под формой шага 1 (статичный слой без текста, края растушёваны тенью): на 390 форма стоит выше,
   чем в Ф6b, — на светлых лучах воды кромка кнопки ВК давала 2,6:1 к фону вокруг; с подложкой ≥ 3:1 (WCAG 1.4.11,
   замер contrast* в f6c-checks). Саму кнопку ВК не трогаем (--vk-hover + кромка, решение заказчика) */
.hs .hero-form::before {
  content: "";
  position: absolute;
  inset: -8px -10px;
  z-index: -1;
  border-radius: 20px;
  background: rgb(var(--deep-bg-rgb) / 0.42);
  box-shadow: 0 0 18px 10px rgb(var(--deep-bg-rgb) / 0.42);
  pointer-events: none;
}

/* Итог (правка заказчика 2026-10-24): отдельная строка под обеими колонками, по центру страницы; тот же язык, что у
   кружков шагов — галочка .hd-ok (заливка --deep-success, как «готово» в приложении) + подпись. Подсветка — отдельный
   слой .hd-hl: тянется по размеру строки, поэтому строка — по содержимому (width: fit-content) и центрируется. */
.hero-done {
  --hs-num: 40px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--hs-num) auto;
  column-gap: 14px;
  align-items: center;
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  padding: 12px 24px 12px 12px;
}
.hero-done .hd-hl {
  position: absolute;
  inset: 0;
  margin: 0;
  /* абсолютный потомок грида с явным grid-area берёт её за containing block — сбрасываем, чтобы inset: 0 совпал
     с padding-box всей строки (иначе подсветка «съезжает» на отступы и не покрывает текст) */
  grid-column: auto;
  grid-row: auto;
  border-radius: var(--radius-pill);
  background: rgb(var(--deep-success-rgb) / 0.1);
  border: 1px solid rgb(var(--deep-success-rgb) / 0.45);
  opacity: 1;
}
/* Итог крупнее (правка заказчика 2026-10-24). На телефоне упор — ширина: текст 18 px на 375 (на 360 — ≈ 17 px через vw),
   отступы ужаты, чтобы строка оставалась в одну линию */
.hero-done { column-gap: 10px; padding: 10px 16px 10px 10px; }
.hero-done .hd-ok svg { width: 24px; height: 24px; }
.hero-done .hd-text { padding-top: 0; font-size: clamp(1rem, 4.8vw, 1.125rem); }
.hd-ic {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: var(--hs-num);
  height: var(--hs-num);
  border-radius: 50%;
  border: 1px dashed var(--deep-border);
  background: var(--deep-bg);
}
.hd-ok { background: var(--deep-success); color: var(--deep-bg); }
.hd-text {
  grid-column: 2;
  grid-row: 1;
  padding-top: calc((var(--hs-num) - 1.45em) / 2);
  font-size: var(--fs-base);
  font-weight: 700;                  /* итог — «Посты уходят в отложку ВК» (правка заказчика 2026-10-24) */
  line-height: 1.45;
  color: var(--deep-ink);
}

@media (min-width: 640px) {
  /* в одну строку: кружок · время · действие; форма — под временем и действием */
  .hs { --hs-num: 36px; column-gap: 14px; grid-template-columns: var(--hs-num) auto minmax(0, 1fr); }
  /* Итог крупнее шагов (правка заказчика 2026-10-24), чтобы чуть выделялся */
  .hero-done { --hs-num: 58px; column-gap: 18px; padding: 16px 36px 16px 16px; }
  .hero-done .hd-ok svg { width: 32px; height: 32px; }
  .hero-done .hd-text { font-size: 1.5rem; }
  .hs-hl { grid-row: 1; }
  .hs-time { font-size: 1.5rem; }
  .hs-text {
    grid-column: 3;
    grid-row: 1;
    padding-top: calc((var(--hs-num) - 1.45em) / 2);
    font-size: 1.0625rem;
  }
  .hs .hero-form { grid-column: 2 / -1; grid-row: 2; }
  .hd-text { grid-column: 2 / -1; font-size: 1.0625rem; }
}

/* Телефон (правки заказчика 2026-10-24): шаги — плашки во всю ширину колонки, как поле и кнопка: одинаковые края,
   радиус --radius и рамка --deep-border (как у .input), фон --deep-surface; зазор между всеми блоками — 8 px.
   Внутри плашки: кружок слева по центру, справа время и текст (текст — в одну строку: на 360–375 «Загрузите фото
   и выберите, как писать» влезает при ≈ 15 px). Сетка плашки — 5 колонок (поле 12 · кружок · 12 · текст · поле 12)
   и строки (12 · время · текст · 12 · форма): рамки .hs::before и подсветка .hs-hl ложатся ровно на плашку,
   а форма шага 1 под ней — во всю ширину, теми же краями. Линия-«поток» (::after) на телефоне не нужна */
@media (max-width: 639.98px) {
  .hero-steps { gap: 8px; margin-top: 0; }
  .hs {
    --hs-num: 28px;
    grid-template-columns: 12px var(--hs-num) 10px minmax(0, 1fr) 10px;
    grid-template-rows: 11px auto auto 11px auto;
    column-gap: 0;
    align-items: center;
    padding-block: 0;
  }
  .hs::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1 / 5;
    align-self: stretch;
    z-index: -2;
    border-radius: var(--radius);
    border: 1px solid var(--deep-border);
    background: rgb(var(--deep-surface-rgb) / 0.92);
  }
  .hs::after { display: none; }
  .hs-hl { grid-column: 1 / -1; grid-row: 1 / 5; margin: 0; }
  .hs-num { grid-column: 2; grid-row: 2 / 4; font-size: 0.8125rem; }
  .hs-ok svg { width: 16px; height: 16px; }
  .hs-time { grid-column: 4; grid-row: 2; font-size: 1.0625rem; line-height: 1.25; }
  .hs-text {
    grid-column: 4;
    grid-row: 3;
    font-size: clamp(0.8125rem, 3.8vw, 0.9375rem);
    line-height: 1.35;
    white-space: nowrap;
  }
  .hs .hero-form { grid-column: 1 / -1; grid-row: 5; margin-top: 8px; gap: 8px; }
  .hs .hero-form::before { inset: -4px 0; }
  .hero-done { width: 100%; justify-content: center; }   /* итог — те же края, что у шагов и календаря */
}

/* Форма: поле + кнопка цвета VK */
.hero-form { display: grid; gap: 0.75rem; }
.hero-form .btn { width: 100%; }
@media (min-width: 640px) {
  .hero-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .hero-form .btn { width: auto; }
}

/* Подпись + бейдж VK ID */
.hero-trust {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--deep-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.hero-trust .badge { flex: none; height: 28px; width: auto; margin-top: 2px; border-radius: var(--radius-pill); }
.hero-trust p { max-width: 52ch; }
.hero-copy > .hero-trust { margin-top: 6px; }   /* без бейджа — он в карточке «Официально с» (правка заказчика 2026-10-24) */

/* Фон «вода» (Ф6b, сториборд §8): постер <img> + <video> за всем hero (object-fit: cover), сверху слой затемнения.
   Клип проявляется классом .is-playing (ставит main.js, когда он реально заиграл) — переход только opacity.
   Без файлов в next/video слот пуст: <img alt=""> без файла ничего не рисует, работает CSS-свечение .glow (оно выше по DOM). */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.hero-video { opacity: 0; transition: opacity 1s var(--ease); }
.hero-video.is-playing { opacity: 1; }
.hero-video.is-away { display: none; }   /* hero вне экрана (main.js): слой <video> не участвует в композиции страницы */
/* Затемнение: базовый слой --deep-bg ≈ 50 % по всей площади; низ уходит в --deep-bg, чтобы переход к следующей секции
   был бесшовным. ::before — дополнительный градиент под текстовой колонкой: на 1440 — левая половина, до 900 px — вся
   площадь (контрасты — reports/f6b.md, замер по пикселям). Верхний градиент (0,78 над шапкой → 0,4 у её кромки → 0 за
   56 px ниже) — тёмная полоса под светлым текстом шапки: ≥ 4,5 : 1 на любом кадре воды, включая светлую поверхность.
   Правка заказчика 2026-10-28: затемнение снова накрывает полосу за топбаром (маска снята) — верх hero не светлее
   остального экрана; топбар — светлый текст на этом фоне (CSS §11) */
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--deep-bg-rgb) / 0.84) 0, rgb(var(--deep-bg-rgb) / 0.52) calc(var(--topbar-h) + 4px), transparent calc(var(--topbar-h) + 64px)),
    linear-gradient(180deg, transparent 70%, rgb(var(--deep-bg-rgb) / 0.7) 92%, var(--deep-bg) 100%),
    rgb(var(--deep-bg-rgb) / 0.5);
}
.hero-shade::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--deep-bg-rgb) / 0.36);
}
/* Поверх футажа CSS-свечение приглушено (лучи уже в клипе); без файлов фона — это и есть фон, как в Ф2–Ф4 */
.hero .glow { opacity: 0.65; }

@media (min-width: 900px) {
  .hero {
    display: grid;
    align-content: center;
    min-height: calc(min(calc(100vh - var(--topbar-h)), 860px) + var(--topbar-h) + 1px);   /* фолбэк без svh */
    min-height: calc(min(calc(100svh - var(--topbar-h)), 860px) + var(--topbar-h) + 1px);   /* + зона под топбаром */
    padding-block: clamp(40px, 4vw, 56px) clamp(56px, 6vw, 80px);
    padding-top: calc(var(--topbar-h) + 1px + clamp(40px, 4vw, 56px));
  }
  /* Ф6c (сториборд §13.3 + правка заказчика 2026-10-24): H1 в две строки по центру — над обеими колонками; ниже две колонки
     ≈ 1 : 1,15 — слева карточка «Ваш месяц», справа шаги, по центру по вертикали; итог — отдельной строкой под ними по центру.
     В DOM шаги раньше календаря (на телефоне форма первая) — на desktop колонки расставляем явно */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: clamp(32px, 4vw, 56px);
    row-gap: 28px;
    align-items: center;
  }
  .hero-title { grid-column: 1 / -1; grid-row: 1; }
  .month { grid-column: 1; grid-row: 2; }
  .hero-copy { grid-column: 2; grid-row: 2; gap: 20px; }
  .hero-done { grid-column: 1 / -1; grid-row: 3; }
  /* Затемнение под текстом — теперь правая колонка: градиент зеркальный */
  .hero-shade::before {
    background: linear-gradient(270deg, rgb(var(--deep-bg-rgb) / 0.7) 0, rgb(var(--deep-bg-rgb) / 0.6) 38%, rgb(var(--deep-bg-rgb) / 0.14) 56%, transparent 70%);
  }
}
/* Узкая колонка шагов (900–1099 px): поле и кнопка формы шага 1 — друг под другом (иначе поле ≈ 110 px) */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .hs .hero-form { grid-template-columns: minmax(0, 1fr); }
  .hs .hero-form .btn { width: 100%; }
}

/* ---------- 13. Моушн (Ф3a): состояния «до анимации» ----------
   Включаются ТОЛЬКО классом html.js-motion, который ставит js/motion.js
   (и только при prefers-reduced-motion: no-preference). Без скрипта всё видно.
   Анимируются только opacity и transform. */

/* Вход hero (Ф4) — CSS @keyframes вместо GSAP-timeline Ф3a, хореография та же: задержки и длительности = позиции
   timeline × tl.duration (0.9 с с 768 px → коэффициент 0.75; 0.6 с на телефоне → 0.5), easing power2.out (у света —
   power1.out). Зачем: анимация стартует с первой отрисовкой и не ждёт скачивания и выполнения GSAP — фото hero (LCP)
   больше не скрыто до конца загрузки скриптов (Lighthouse Ф4: «задержка отрисовки» LCP 1 с). Анимируются opacity и
   отдельные свойства translate / scale: они складываются с transform, который GSAP пишет для параллакса и ухода hero,
   и не спорят с ним. fill-mode backwards: до старта — начальное состояние, после конца анимация ничего не держит.
   Проявление — с opacity 0.01, а не 0: элемент под композиторной анимацией от opacity 0 Chrome засчитывает в LCP только
   в конце анимации (замер Ф4: LCP фото и H1 = конец fade, +0.3–0.5 с к первой отрисовке), от 0.01 — с первой отрисовки.
   На глаз 0.01 и 0 не отличить. Без motion.js вход тоже играет (чистый CSS); при prefers-reduced-motion: reduce анимации нет. */
@keyframes hero-up       { from { opacity: 0.01; translate: 0 24px; } }
@keyframes hero-down     { from { opacity: 0.01; translate: 0 -8px; } }
@keyframes hero-fade     { from { opacity: 0.01; } }
@keyframes hero-figure   { from { opacity: 0.01; translate: 0 32px; scale: 0.98; } }   /* Ф6b / Ф6c: карточка «Ваш месяц» входит паттерном фото */
@keyframes hero-figure-m { from { opacity: 0.01; translate: 0 32px; } }                /* на телефоне без scale */
@keyframes hero-step     { from { opacity: 0.01; translate: 0 12px; } }                /* шаги: лёгкое проявление по очереди */
@media (prefers-reduced-motion: no-preference) {
  [data-hero] {
    --hero-k: 0.5;                    /* телефон: timeline 1.2 с ужат до 0.6 с */
    --hero-t: 0;                      /* позиция в timeline Ф3a, с */
    --hero-d: 0.4;                    /* длительность в timeline Ф3a, с */
    animation: hero-up calc(var(--hero-d) * var(--hero-k) * 1s) cubic-bezier(0.215, 0.61, 0.355, 1) calc(var(--hero-t) * var(--hero-k) * 1s) backwards;
  }
  [data-hero="glow"],
  [data-hero="bg"]       { --hero-d: 1.2; animation-name: hero-fade; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  [data-hero="bar"]      { --hero-t: 0.05; animation-name: hero-down; }
  .hero-title[data-hero] { --hero-t: 0.05; --hero-d: 0.6; }
  [data-hero="demo"]     { --hero-t: 0.15; --hero-d: 0.9; animation-name: hero-figure-m; }   /* Ф6c: карточка «Ваш месяц» */
  /* Шаги (правка заказчика 2026-10-24): шаг проявляется тогда, когда на него переходит рамка демо-цикла
     (motion.js heroDemo, STEP = 1,6: s1 — 0, s2 — 1,6 с, s3 — 3,2 с, итог — 6,4 с от старта цикла; старт цикла = HERO_STEPS_START_S
     = 0,5 с — держать синхронно). Внутри шага части проявляются быстро по очереди: кружок → время → текст → поле → кнопка
     (шаг 0,1 с, проявление 0,45 с со сдвигом 12 px). Время — в секундах, без ужатия --hero-k.
     Задержка части = --hs-b (начало шага) + --hs-o (место части в шаге). Линия-«поток» (::after) шага N встаёт вместе
     с кружком шага N + 1. Подсветку .hs-hl цикл пишет inline-opacity; CSS-анимация её не трогает. */
  .hs[data-hero] { animation: none; }
  .hs > .hs-num, .hs > .hs-time, .hs > .hs-text,
  .hs .hero-form > .field, .hs .hero-form > .btn, .hs::after, .hs::before {
    animation: hero-step 0.45s cubic-bezier(0.22, 1, 0.36, 1) calc((var(--hs-b) + var(--hs-o, 0)) * 1s) backwards;
  }
  .hs[data-hs="1"] { --hs-b: 0.5; }
  .hs[data-hs="2"] { --hs-b: 2.1; }
  .hs[data-hs="3"] { --hs-b: 3.7; }
  .hs > .hs-time { --hs-o: 0.1; }
  .hs > .hs-text { --hs-o: 0.2; }
  .hs .hero-form > .field { --hs-o: 0.3; }
  .hs .hero-form > .btn { --hs-o: 0.4; }
  .hs[data-hs="1"]::after,
  .hs[data-hs="2"]::after { --hs-o: 1.6; }
  .hs[data-hs="3"]::after { --hs-o: 3.2; }     /* линия к итогу — вместе с итогом */
  .hero-done[data-hero]  { --hero-k: 1; --hero-t: 6.9; --hero-d: 0.45; animation-name: hero-step; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  .hero-trust[data-hero] { --hero-t: 0.5; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  [data-hero] { --hero-k: 0.75; }     /* с 768 px: timeline 1.2 с ужат до 0.9 с */
  [data-hero="demo"] { animation-name: hero-figure; }
}

/* Дети групп перечислены тегами (Ф4): правило вида «группа > :not(.is-in)» без тега/класса справа заставляет браузер при
   появлении класса js-motion пересчитывать стили всей страницы (≈1600 элементов); с тегами — только нужные (замер Ф4:
   −30 % на старте motion.js). Сейчас дети групп — только li, p, details; новый тег в группе — добавить сюда. */
html.js-motion [data-reveal]:not([data-reveal="group"]):not(.is-in),
html.js-motion [data-reveal="group"] > :is(li, p, details):not(.is-in) { opacity: 0; transform: translateY(24px); }
html.js-motion [data-reveal="scale"]:not(.is-in) { transform: scale(0.98); }
/* reveal только вне pinned-контекста (там шагами управляет timeline) */
@media not all and (min-width: 1024px) and (pointer: fine) {
  html.js-motion [data-reveal-m]:not([data-reveal-m="group"]):not(.is-in),
  html.js-motion [data-reveal-m="group"] > :is(li, p, details):not(.is-in) { opacity: 0; transform: translateY(24px); }
}

/* Календарь how (Ф6b: сетка статична, уже заполнена): до pinned-сцены на desktop прячутся только строка подключения
   и чипы ядра (визуалы шагов 1–2). Оба класса ставит motion.js при старте и только в desktop-контексте: стартовые
   transform — по html.js-motion, прозрачность — по .plan.is-empty (снятие меняет только opacity, без layout).
   На телефоне и при reduce панель видна целиком сразу */
html.js-motion .plan [data-plan="connect"],
html.js-motion .plan [data-plan="chip"] { transform: translateY(8px); }
html.js-motion .plan.is-empty [data-plan="connect"],
html.js-motion .plan.is-empty [data-plan="chip"] { opacity: 0; }

/* Дрейф света в hero: только CSS, только desktop (при reduce глушится в §18) */
@keyframes glow-drift {
  from { transform: translate(-3%, 2%); }
  to   { transform: translate(3%, -2%); }
}
@media (min-width: 1024px) {
  .hero .glow::before { animation: glow-drift 24s ease-in-out infinite alternate; }
}

/* ---------- 14. Топбар при скролле (класс ставит main.js) ---------- */
.topbar {
  transition: background-color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.topbar.is-scrolled {
  background: rgb(var(--deep-bg-rgb) / 0.92);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--deep-border);
}

/* ---------- 15. Кнопка в топбаре — только после прокрутки ниже формы hero (Ф6c, сториборд §13.3) ----------
   На первом экране кнопка «Получить первый пост» одна — в шаге 1. Класс html.cta-hold ставит скрипт в <head> до первой
   отрисовки (кнопка не мигает при загрузке); .is-shown — main.js, когда форма hero ушла из экрана (IntersectionObserver).
   Скрыта через visibility — не фокусируется с клавиатуры; место в топбаре занято всегда (без сдвигов). Проявление —
   opacity ≤ 0,25 с (A.5). Без JS класса нет — кнопка видна всегда */
html.cta-hold .topbar-cta {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-quick) var(--ease), visibility 0s linear var(--dur-quick),
    background-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease);
}
html.cta-hold .topbar-cta.is-shown {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur-quick) var(--ease), visibility 0s,
    background-color var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease);
}

/* ---------- 16. Секция pain ---------- */
.pain { overflow: hidden; }   /* параллакс ±12 px и «призрачная» карточка не вылезают за край */
.pain-grid {
  display: grid;
  gap: 12px;   /* на телефоне две группы карточек читаются как один список (расстояние от фото — margin у визуала) */
}

/* Образ 1: иллюстрация «эксперт вечером за постами».
   Эксперт — центр композиции: блок по центру на всех брейкпоинтах, отступы симметричные
   (8 px по бокам — запас под «призрачную» карточку, 56 px снизу — под её свес:
   плашка должна свисать ниже и не закрывать спину эксперта). */
.pain-visual {
  position: relative;
  width: min(100%, 600px);
  margin-inline: auto;
  margin-bottom: clamp(16px, 3vw, 24px);   /* просвет от «призрачной» карточки до первой боли */
  padding: 0 8px 56px;
}
.pain-figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-float);
  background: var(--deep-surface);
}
.pain-figure::after {
  /* нижняя кромка уходит в фон страницы */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(var(--deep-bg-rgb) / 0.6), transparent 42%);
  pointer-events: none;
}
/* Иллюстрация — фоном, без <img>: иначе браузеры с «поиском по картинке» (Яндекс Браузер)
   на наведение показывают поверх снимка своё всплывающее окошко. */
.pain-photo {
  aspect-ratio: 1 / 1;
  background: url("../img/pain-720.webp") center / cover no-repeat;
  pointer-events: none;   /* курсор «не видит» картинку: всплывающим панелям браузера не за что зацепиться */
}
@media (min-width: 552px) {
  .pain-photo { background-image: url("../img/pain.webp"); }
}

/* Образ 2: мок группы, где последняя запись давно (иллюстрация, не метрика) */
.ghost {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 0;
  transform: translateX(-50%);      /* по центру композиции, а не сбоку от фото */
  width: min(76%, 300px);
  padding: 16px 16px 16px;
  display: grid;
  gap: 12px;
  box-shadow: var(--shadow-float), 0 0 0 1px rgb(var(--deep-bg-rgb) / 0.8);
}
.ghost::before {
  background: linear-gradient(160deg, rgb(var(--deep-muted-rgb) / 0.4), rgb(var(--deep-ink-rgb) / 0.06) 40%, transparent 70%);
}
.ghost-head { display: flex; align-items: center; gap: 10px; }
.ghost-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--deep-border);
  background: radial-gradient(circle at 35% 30%, rgb(var(--deep-muted-rgb) / 0.55), var(--deep-raised) 72%);
}
.ghost-meta { display: grid; line-height: 1.2; min-width: 0; }
.ghost-name { font-weight: 600; font-size: var(--fs-sm); }
.ghost-sub { font-size: var(--fs-xs); color: var(--deep-muted); }
.ghost-body { display: grid; gap: 10px; }
.ghost-post { display: grid; gap: 6px; }
.ghost-line { display: block; height: 8px; border-radius: 4px; background: rgb(var(--deep-ink-rgb) / 0.14); }
.ghost-line-short { width: 56%; }
.ghost-stats { display: flex; gap: 14px; font-size: var(--fs-xs); color: var(--deep-muted); }
.ghost-stats span { display: inline-flex; align-items: center; gap: 4px; }
.ghost-stats .icon { width: 14px; height: 14px; }
.ghost-note {
  position: absolute;
  top: -14px;                        /* высота плашки прежняя */
  left: 50%;
  right: auto;
  transform: translateX(-50%);       /* по центру мок-карточки, значит и композиции */
  background: var(--deep-raised);
  border-color: var(--deep-border);
  color: var(--deep-ink);
  box-shadow: 0 8px 20px -10px rgb(var(--deep-bg-rgb) / 0.9);
}
@supports (color: color-mix(in srgb, red 10%, transparent)) {
  .ghost-note { background: var(--deep-raised); border-color: var(--deep-border); }
}
.ghost-note .icon { color: var(--deep-warning); }

/* Карточки болей: две группы по три (на desktop — левая и правая колонки).
   Группа всегда одноколоночная: на 640–1023 px не появляется раскладка 2×2+2.
   До 1024 px (одна колонка) список не растягивается на всю ширину: 560 px по центру;
   в трёхколоночной раскладке max-width снимается — иначе колонки не растянутся. */
.pain-cards { display: grid; gap: 12px; max-width: 560px; margin-inline: auto; min-width: 0; }
.pain-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px 16px;                /* компактнее общей .card (там clamp(20px, 2.5vw, 28px)) */
  transition: transform var(--dur-quick) var(--ease);
}
/* Иконка и заголовок — в одну строку, текст ниже */
.pain-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pain-card::after {
  /* слой-свечение на hover (анимируется opacity, не box-shadow) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--glow-accent);
  opacity: 0;
  transition: opacity var(--dur-quick) var(--ease);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .pain-card:hover { transform: translateY(-2px); }
  .pain-card:hover::after { opacity: 1; }
}
.pain-card h3 { font-size: var(--fs-h3); line-height: 1.25; min-width: 0; }
.pain-card p { color: var(--deep-muted); }
.pain-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--deep-accent);
  background: rgb(var(--deep-accent-rgb) / 0.1);
  border: 1px solid rgb(var(--deep-accent-rgb) / 0.3);
}
.pain-icon .icon { width: 18px; height: 18px; }

/* Строка-вывод: сочувствие, не стыд */
.pain-outcome {
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 24ch;
  text-align: center;
  font-size: clamp(1.375rem, 1rem + 1.7vw, 2.125rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Desktop: эксперт в центре, три боли слева, три справа — одна строка, композиция симметрична.
   С 1024 px (раньше было 900): на 900–1023 боковые колонки выходили ~196 px, и заголовки ломались в 5–6 строк.
   Средняя колонка резиновая (34vw, 340–500 px): на 1024 — 348 px, с ~1470 упирается в 500
   (картинка заметно крупнее, а боковые колонки на 1024 остаются ~289 px — заголовки не рассыпаются). */
@media (min-width: 1024px) {
  .pain-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(340px, 34vw, 500px)) minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 32px);
    align-items: center;
  }
  .pain-cards { max-width: none; }   /* в колонках карточки занимают всю ширину трека */
  .pain-visual { grid-column: 2; grid-row: 1; width: 100%; margin: 0 auto; }
  .pain-cards--left { grid-column: 1; grid-row: 1; }
  .pain-cards--right { grid-column: 3; grid-row: 1; }
}

/* Телефон и планшет (до 1024 px): сначала список болей, образ эксперта — после него.
   Заголовок обещает «знакомые ситуации» — их и показываем в первом экране; раньше первым
   шёл визуал (383 px на 375-м экране) и первая боль начиналась на ~580 px от начала секции.
   Фото становится паузой перед выводом и подводит к нему по смыслу (группа молчит →
   «вы работаете за двоих»). Меняется только порядок (order): HTML и десктопная раскладка
   те же, — с 1024 px элементы размещены явно через grid-column/grid-row, а order
   на явно размещённые элементы не влияет. */
@media (max-width: 1023.98px) {
  .pain-cards--left { order: 1; }
  .pain-cards--right { order: 2; }
  .pain-visual { order: 3; margin: clamp(20px, 4vw, 32px) auto 0; }   /* фото теперь последнее: просвет нужен сверху, снизу — нет */
  .pain-outcome { margin-top: clamp(24px, 5vw, 32px); }   /* фото само даёт паузу перед выводом */
}

/* ---------- 17. Секция how: шаги + календарь, который заполняется сам ---------- */
.how-stage {
  display: grid;
  gap: clamp(32px, 5vw, 48px);
}

/* Шаги (вертикальный степпер) */
.steps { position: relative; }
.steps-line {
  display: none;
  position: absolute;
  left: 19px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(to bottom, var(--deep-accent), rgb(var(--deep-accent-rgb) / 0.12));
  transform-origin: top center;
}
.steps-list { display: grid; gap: 8px; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 10px 0;
}
.step-num {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--deep-accent);
  background: var(--deep-surface);
  box-shadow: 0 0 0 4px var(--deep-bg);   /* кольцо цвета фона перекрывает линию-«поток» */
}
/* Кромка номера — отдельный нетекстовый слой (Ф6b+): его можно приглушать opacity, цифру — нет */
.step-num::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgb(var(--deep-accent-rgb) / 0.45);
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.step-body { display: grid; gap: 6px; padding-top: 8px; }
.step-body h3 { font-size: var(--fs-h3); }
.step-body p { color: var(--deep-muted); font-size: 0.9375rem; }

/* Ф6b+: неактивный шаг pinned-сцены how (desktop + мышь; класс .is-dim ставит только motion.js — на телефоне, при reduce
   и без motion.js шаги яркие) приглушается ЦВЕТОМ, не opacity: текст непрозрачен, контраст к --deep-bg — заголовок
   --deep-muted 6,9:1, абзац muted 80 % / фон 20 % 4,9:1 (без color-mix — --deep-muted), цифра номера --deep-muted
   на --deep-surface 6,1:1. Кромка номера (::before, не текст) — opacity.
   transition: color 0,25 с — узкое исключение из A.5 (решение оркестратора, как плавная высота FAQ), только текст шагов how. */
.step-body h3,
.step-body p,
.step-num { transition: color 0.25s var(--ease); }
.step.is-dim .step-body h3,
.step.is-dim .step-num { color: var(--deep-muted); }
.step.is-dim .step-body p {
  color: var(--deep-muted);
  color: color-mix(in srgb, var(--deep-muted) 80%, var(--deep-bg));
}
.step.is-dim .step-num::before { opacity: 0.4; }

/* Панель плана */
.plan {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(16px, 2vw, 22px);
  display: grid;
  gap: 14px;
}
.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plan-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.plan-title .icon { color: var(--deep-accent); }

.plan-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.plan-field {
  flex: 1 1 150px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--deep-border);
  background: var(--deep-bg);
  color: var(--deep-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.plan-field .icon { color: var(--deep-accent); }

.plan-core { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.plan-core-label {
  margin-right: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deep-muted);
}
.chip-xs { min-height: 28px; padding: 4px 10px; font-size: var(--fs-xs); }

.plan-week,
.plan-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.plan-week {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--deep-muted);
}
.day {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 5px 5px 6px;
  border-radius: 9px;
  border: 1px dashed rgb(var(--deep-border-rgb) / 0.95);
  background: rgb(var(--deep-bg-rgb) / 0.55);
  display: flex;
  flex-direction: column;
}
.day-num {
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  color: var(--deep-muted);
}
/* мини-карточка поста: цветной кант по типу + две «строки» текста */
.day-post {
  display: grid;
  gap: 3px;
  margin-block: auto;
  padding-left: 5px;
  border-left: 2px solid var(--day-color, var(--deep-accent));
}
.day-line { display: block; height: 4px; border-radius: 2px; background: rgb(var(--deep-ink-rgb) / 0.24); }
.day-line:last-child { width: 62%; }
.day[data-type="value"]      { --day-color: var(--type-value); }
.day[data-type="personal"]   { --day-color: var(--type-personal); }
.day[data-type="engagement"] { --day-color: var(--type-engagement); }
.day[data-type="cta"]        { --day-color: var(--type-cta); }
.day-status {
  /* span-обёртка: GSAP анимирует HTML-элемент (у SVG он читает getBBox — дорого на 28 ячейках) */
  position: absolute;
  top: 4px;
  right: 4px;
  width: 13px;
  height: 13px;
}
.day-status svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.day[data-status="scheduled"] .day-status { color: var(--deep-muted); }
.day[data-status="published"] .day-status { color: var(--deep-success); }
@media (min-width: 768px) {
  .plan-week, .plan-grid { gap: 6px; }
  .day { padding: 7px 7px 8px; border-radius: 10px; }
  .day-num { font-size: 11px; }
  .day-post { gap: 4px; padding-left: 6px; }
  .day-line { height: 5px; }
  .day-status { width: 15px; height: 15px; top: 5px; right: 5px; }
}

.plan-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: var(--fs-xs);
  color: var(--deep-muted);
}
.plan-legend span { display: inline-flex; align-items: center; gap: 6px; }
.plan-legend .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.plan-legend-sep { width: 1px; height: 12px; align-self: center; background: var(--deep-border); }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-value      { background: var(--type-value); }
.dot-personal   { background: var(--type-personal); }
.dot-engagement { background: var(--type-engagement); }
.dot-cta        { background: var(--type-cta); }
.icon-scheduled { color: var(--deep-muted); }
.icon-published { color: var(--deep-success); }

/* CTA под сценой */
.how-cta {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.cta-note { color: var(--deep-muted); font-size: var(--fs-sm); }

/* Desktop + мышь: две колонки, сцена высотой в экран под pin (motion.js, те же условия) */
@media (min-width: 1024px) and (pointer: fine) {
  .how-stage {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 5vw, 72px);
    align-items: center;
    align-content: center;
    min-height: calc(100vh - var(--topbar-h));   /* фолбэк без svh */
    min-height: calc(100svh - var(--topbar-h));
  }
  .steps-line { display: block; }
  .steps-list { gap: 4px; }
  .plan { margin: 0; justify-self: end; }
}

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* страховка: даже с классом js-motion ничего не скрыто */
  html.js-motion [data-hero],
  html.js-motion [data-reveal],
  html.js-motion [data-reveal="group"] > *,
  html.js-motion [data-reveal-m],
  html.js-motion [data-reveal-m="group"] > *,
  html.js-motion .plan [data-plan] { opacity: 1 !important; transform: none !important; }
  /* второй образ pain — сразу в конечном состоянии (угасший) */
  .ghost-body { opacity: 0.4; }
}

/* ---------- 19. Секция showcase (Ф3d): посты «как в ленте ВК», черты голоса, лента карточек ----------
   Главное в секции — текст постов. Посты статичны (без анимации появления и без анимаций на тексте).
   Раскрытие «Показать полностью…» — CSS-переход grid-template-rows 0fr → 1fr (зафиксированное исключение из A.5, как FAQ),
   подсветка фраз — слой <mark> под текстом, меняется только opacity. Лента карточек — один ряд, CSS-marquee (transform).
   Reduced motion — §23. */
.showcase { overflow: hidden; }

/* Шапка секции — одна колонка: заголовок → подсказка про ядро. Черты голоса живут отдельным рядом ниже. */
.showcase .section-head {
  max-width: none;
  gap: clamp(16px, 1.6vw, 20px);
  margin-bottom: 0;
}
.showcase .section-head .lead { max-width: 62ch; }

/* Черты голоса — горизонтальный ряд по центру: от заголовка отбиты большим воздухом, к постам стоят близко
   (это подпись к доказательству, а не продолжение заголовка) */
.voice-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(48px, 5vw, 72px);
  margin-bottom: clamp(24px, 2.6vw, 32px);
}
.voice-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--deep-border);
  background: rgb(var(--deep-raised-rgb) / 0.7);
  color: var(--deep-ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.voice-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--deep-muted);
  transition: background-color var(--dur-quick) var(--ease);
}
.voice-chip:hover { border-color: var(--deep-muted); }
.voice-chip.is-lit,
.voice-chip[aria-pressed="true"] {
  border-color: rgb(var(--deep-accent-rgb) / 0.6);
  background: rgb(var(--deep-accent-rgb) / 0.12);
  color: var(--deep-accent);
}
.voice-chip.is-lit .voice-dot,
.voice-chip[aria-pressed="true"] .voice-dot { background: var(--deep-accent); }

/* Три поста: телефон и планшет — колонка (до 560 px), с 1024 — три колонки */
.posts {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
  max-width: 560px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .posts { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

.vk-post {
  --clamp: 4;                           /* строк в свёрнутом посте: телефон 4, с 640 px — 6 */
  --post-fs: 0.9375rem;                 /* 15 px */
  --post-lh: 1.58;                      /* чуть свободнее прежних 1.5: текст дышит, кламп не давит */
  --media-max: 240px;                   /* вложение не перетягивает внимание с текста */
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--deep-surface);
  border: 1px solid var(--deep-border);
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) {
  .vk-post { --clamp: 6; --media-max: 260px; padding: 20px; }
}
.vk-post-head { display: flex; align-items: center; gap: 10px; }
.vk-post-ava {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--deep-bg);                /* тёмный текст на заливке акцента */
  background: linear-gradient(140deg, var(--deep-accent), var(--deep-accent-strong));
}
.vk-post-meta { display: grid; min-width: 0; line-height: 1.25; }
.vk-post-group { font-weight: 600; font-size: var(--fs-sm); color: var(--deep-ink); }
.vk-post-date { font-size: var(--fs-xs); color: var(--deep-muted); }

/* Текст: кламп + раскрытие на месте. Сам текст не двигается — меняется только высота обрезки.
   Покой (свёрнут): высота трека = высота текста в клампе (автоминимум grid-элемента без overflow) — без замеров.
   Раскрытие: main.js записывает текущую высоту в --collapsed-h (пол трека), снимает кламп и ставит .is-open → 0fr → 1fr.
   Сворачивание: main.js меряет высоту в клампе (.is-measure), ставит .is-closing (текст пока без клампа) → 1fr → 0fr
   до пола; по окончании перехода кламп возвращается — высота та же, скачка нет. */
.post-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease);
}
.vk-post.is-open .post-body { grid-template-rows: 1fr; }
.post-clip {
  position: relative;
  isolation: isolate;                   /* слой подсветки (z-index −1) остаётся внутри поста, под текстом */
  font-size: var(--post-fs);
  line-height: var(--post-lh);
  overflow-wrap: break-word;
}
.vk-post.is-open .post-clip,
.vk-post.is-closing .post-clip {
  min-height: var(--collapsed-h, 0px);
  overflow: hidden;
}
.post-text { color: var(--deep-ink); }
.post-text p + p,
.post-marks p + p { margin-top: 0.75em; }
/* Кламп включает main.js (класс .is-clamped у .posts): без JS пост виден целиком, а кнопка скрыта */
.posts.is-clamped .post-text,
.posts.is-clamped .post-marks {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--clamp);
  overflow: hidden;
}
.posts.is-clamped .vk-post.is-open .post-text,
.posts.is-clamped .vk-post.is-open .post-marks,
.posts.is-clamped .vk-post.is-closing .post-text,
.posts.is-clamped .vk-post.is-closing .post-marks {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
.posts.is-clamped .vk-post.is-open.is-measure .post-text {   /* на один замер перед сворачиванием */
  display: -webkit-box;
  -webkit-line-clamp: var(--clamp);
  overflow: hidden;
}

/* Слой подсветки — копия текста под ним (строит js/main.js): текст прозрачный, видны только заливки <mark>.
   Подсветка: заливка --deep-accent 15 % + линия снизу; появляется через opacity за 200 мс. box-shadow даёт поля маркера,
   не меняя раскладку (у копии и у текста переносы строк обязаны совпадать). */
.post-marks {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  color: transparent;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.post-marks mark {
  color: transparent;
  border-radius: 3px;
  background-color: rgb(var(--deep-accent-rgb) / 0.15);
  background-image: linear-gradient(rgb(var(--deep-accent-rgb) / 0.7), rgb(var(--deep-accent-rgb) / 0.7));
  background-size: 100% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 2px rgb(var(--deep-accent-rgb) / 0.15);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  opacity: 0;
  transition: opacity var(--dur-quick) var(--ease);
}
.showcase[data-voice="first"]  .post-marks mark[data-voice="first"],
.showcase[data-voice="honest"] .post-marks mark[data-voice="honest"],
.showcase[data-voice="images"] .post-marks mark[data-voice="images"],
.showcase[data-voice="reader"] .post-marks mark[data-voice="reader"] { opacity: 1; }

/* «Показать полностью…» — ссылка-кнопка, как в ВК */
.post-more {
  display: none;                        /* видна, когда кламп включён (.posts.is-clamped) */
  justify-self: start;
  margin-top: -2px;                     /* ближе к тексту, но не липнет к нему */
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--deep-accent);
  font-size: var(--post-fs);
  font-weight: 600;
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}
.posts.is-clamped .post-more { display: block; }
.post-more[hidden] { display: none; }
.post-more:hover { color: var(--deep-accent-strong); text-decoration: underline; text-underline-offset: 0.15em; }

/* Карточка как вложение: пропорции файла, высота не больше --media-max (высокая карточка — с полями, без обрезки) */
.vk-post-media {
  border-radius: 12px;
  overflow: hidden;
  background: var(--deep-bg);
  border: 1px solid rgb(var(--deep-ink-rgb) / 0.06);
}
.vk-post-media img {
  width: 100%;
  height: auto;
  max-height: var(--media-max);
  object-fit: contain;
}

/* Реакции без цифр — отделены волосяной линией: у поста появляется «подвал», а не ещё один этаж */
.vk-post-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--deep-border);
  color: var(--deep-muted);
  font-size: var(--fs-xs);
}
.vk-post-actions span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgb(var(--deep-raised-rgb) / 0.8);
}
.vk-post-actions .icon { width: 16px; height: 16px; }
.vk-post-actions .vk-post-views { margin-left: auto; padding-right: 0; background: none; }

/* Лента карточек — второстепенная: один ряд на всю ширину контейнера */
.cards-band {
  --row-h: 160px;                       /* телефон */
  --marquee-gap: 10px;
  --marquee-dur: 65s;                   /* ≈ 27 px/с */
  display: grid;
  gap: 14px;
  margin-top: clamp(64px, 8vw, 96px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--deep-border);   /* линия отделяет доказательство (посты) от обвязки (карточки) */
}
@media (min-width: 768px) {
  .cards-band { --row-h: 180px; --marquee-gap: 12px; --marquee-dur: 60s; }
}
@media (min-width: 1200px) {
  .cards-band { --row-h: 200px; }       /* ≈ 37 px/с */
}
.cards-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--deep-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cards-caption .icon { color: var(--deep-accent); }

.marquee { width: 100%; min-width: 0; }
.marquee-row {
  overflow: hidden;
  contain: layout paint style;          /* догрузка lazy-картинок не перекладывает ничего за пределами ряда */
  -webkit-mask-image: linear-gradient(to right, transparent, var(--deep-bg) 6%, var(--deep-bg) 94%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--deep-bg) 6%, var(--deep-bg) 94%, transparent);
}
/* Ф4: при reduced-motion ряд прокручивается и получает фокус (main.js, tabindex) — рамка фокуса внутри ряда (contain: paint) */
.marquee-row:focus-visible { outline-offset: -2px; border-radius: var(--radius); }
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-left var(--marquee-dur) linear infinite;
}
/* Трек = два одинаковых ряда; сдвиг на −50 % = ровно один ряд (отступы — margin у ячеек, не gap, чтобы половина делилась без шва) */
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
  position: relative;
  flex: none;
  width: var(--row-h);
  height: var(--row-h);
  contain: strict;                      /* размеры ячейки фиксированы: загрузка картинки — layout только внутри ячейки */
  margin-right: var(--marquee-gap);
  border-radius: 12px;
  overflow: hidden;
  background: var(--deep-surface);
  border: 1px solid rgb(var(--deep-ink-rgb) / 0.08);
  transition: transform var(--dur-quick) var(--ease);
}
.marquee-item.is-tall { width: calc(var(--row-h) * 2 / 3); }
.marquee-item picture, .marquee-item img { width: 100%; height: 100%; }
.marquee-item img { object-fit: cover; }
.marquee-item::after {
  /* кромка-свет на hover (opacity, не box-shadow в анимации) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(var(--deep-accent-rgb) / 0.6), inset 0 0 28px rgb(var(--deep-accent-rgb) / 0.22);
  opacity: 0;
  transition: opacity var(--dur-quick) var(--ease);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .marquee-item:hover { transform: translateY(-4px); }
  .marquee-item:hover::after { opacity: 1; }
}

/* Строка честности: по центру под лентой карточек */
.showcase-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  margin-top: clamp(32px, 4vw, 48px);
}
.showcase-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: var(--deep-muted);
  font-size: var(--fs-sm);
}
.showcase-note .icon { color: var(--deep-success); margin-top: 2px; }

/* ---------- 20. Секция calc: калькулятор (Ф3b) ---------- */
/* Заголовок — по центру; на десктопе одна строка (акцент «сколько забирает» внутри h2) */
.calc-head { max-width: none; margin-bottom: clamp(24px, 3vw, 40px); }
.calc-head h2 { text-wrap: balance; }
.calc-card {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  padding: clamp(20px, 3vw, 36px);
}
.calc-form { display: grid; gap: 18px; }
.field-hint { font-size: var(--fs-xs); color: var(--deep-muted); }
.calc-form .input { font-variant-numeric: tabular-nums; }

.calc-result { display: grid; gap: 18px; margin: 0; }
.calc-row { display: grid; gap: 6px; }
.calc-row dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--deep-muted);
}
.calc-row dd {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--deep-ink);
  text-wrap: pretty;
}
.calc-row .num {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 720;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}
.calc-row-left { padding-top: 18px; border-top: 1px solid var(--deep-border); }
.calc-row-left dt, .calc-row-left .num { color: var(--deep-accent); }
.calc-note { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--deep-muted); }

.calc-cta {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--deep-border);
  text-align: center;
}
@media (min-width: 900px) {
  .calc-card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 4vw, 56px);
    align-items: center;   /* форма и результат выровнены по центру друг друга */
  }
  .calc-cta { grid-column: 1 / -1; }
  .calc-head h2 { white-space: nowrap; }
}

/* ---------- 21. Секция pricing: тарифы (Ф3b) ---------- */
.tariffs { display: grid; gap: 16px; }
.tariff {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.5vw, 28px);
  transition: transform var(--dur-quick) var(--ease);
}
.tariff::after {
  /* слой-свечение на hover (opacity, не box-shadow в анимации) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--glow-accent);
  opacity: 0;
  transition: opacity var(--dur-quick) var(--ease);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .tariff:hover { transform: translateY(-4px); }
  .tariff:hover::after { opacity: 1; }
}
.tariff-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}
.tariff-name { font-size: var(--fs-h3); }
/* Строка цены: «1 800 ₽ (зачёркнуто) 360 ₽ первый месяц» — три элемента в одну строку на десктопе,
   на узких карточках подпись переносится ниже, цена и старая цена остаются рядом */
.tariff-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.tariff-old {
  color: var(--deep-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--deep-danger);
}
.tariff-sum {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  font-weight: 740;
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.tariff-per { color: var(--deep-muted); font-size: var(--fs-sm); white-space: nowrap; }
.tariff-for { color: var(--deep-muted); font-size: 0.9375rem; text-wrap: pretty; }
.tariff-perpost { font-size: var(--fs-xs); color: var(--deep-muted); }
/* «Актуально 3 дня» — мягкая пометка об ограничении оффера (только у «Старта») */
.tariff-valid {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgb(var(--deep-accent-rgb) / 0.12);
  color: var(--deep-accent);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
}
/* Кнопки карточек стоят на одной линии: она прижата к низу, а карточки в ряду одной высоты */
.tariff .btn { margin-top: auto; }

/* «Старт»: подсвеченная кромка сразу, внешнее свечение — отдельным слоем (motion.js проявляет его после входа карточек) */
.tariff-recommended::before {
  background: linear-gradient(160deg, rgb(var(--deep-accent-rgb) / 0.9), rgb(var(--deep-accent-rgb) / 0.25) 50%, rgb(var(--deep-accent-rgb) / 0.08));
}
.tariff-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--glow-accent);
  pointer-events: none;
}

/* Строка «нужно больше» — между тарифами и блоком «что входит», по центру */
.pricing-more {
  max-width: 640px;
  margin-top: clamp(20px, 2.6vw, 28px);
  margin-inline: auto;
  color: var(--deep-muted);
  font-size: var(--fs-base);
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
}
/* С широких экранов строка идёт одной линией от края до края карточек тарифов.
   Кегль считаем от ширины контейнера: текст занимает ≈ 48.8em при 16 px, 96 px — запас на скроллбар и рендеринг шрифта.
   Потолок 24.2 px — при контейнере 1200 px строка упирается в его края, но не вылезает. */
@media (min-width: 900px) {
  .pricing-more {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(1rem, calc((100vw - 96px) / 48.8), 24.2px);
    line-height: 1.35;
  }
}
/* Сноска о законном использовании — под калькулятором, мелким, на всю ширину контейнера */
.legal-note {
  margin-top: 18px;
  color: var(--deep-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-align: center;
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .tariffs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .tariffs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

/* ---------- 22. Моушн Ф3b: состояния «до анимации» новых элементов ----------
   Включаются только классом html.js-motion (см. §13). Общее правило [data-reveal] прячет элемент (opacity 0 + translateY 24);
   здесь — свои стартовые transform. Страховка reduced-motion из §18 накрывает все [data-reveal]. */
html.js-motion [data-reveal="glow"]:not(.is-in)  { transform: none; }

/* ---------- 23. Reduced motion (Ф3b, Ф3d): лента статична и прокручивается нативно; пост раскрывается мгновенно ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; will-change: auto; }
  .marquee-row {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;            /* лента теперь внутри контейнера (Ф3d) — поля не нужны */
    padding-inline: 0;
    padding-bottom: 8px;                  /* место под полосу прокрутки */
    scrollbar-width: thin;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee-item[data-dup] { display: none; }
  .marquee-item { scroll-snap-align: start; }
  .post-body, .post-marks mark, .voice-chip, .voice-dot { transition: none; }
}

/* ---------- 24. Секция founder: автор (Ф3c) ----------
   Фото — портрет 4:5 (img/igor.*) слева на desktop, сверху на телефоне; история от первого лица; CTA. */
.founder { overflow: hidden; }   /* параллакс фото ±4 % не вылезает за край */
.founder-grid {
  display: grid;
  grid-template-areas: "title" "visual" "text" "cta";
  gap: clamp(24px, 3vw, 32px);
}
.founder-title { grid-area: title; max-width: 760px; }
.founder-visual {
  grid-area: visual;
  position: relative;
  isolation: isolate;
  width: min(100%, 400px);
  margin-inline: auto;
}
/* Параллакс двигает карточку автора целиком (motion.js берёт [data-parallax]).
   container-type — линейка для кегля подписи внутри карточки (cqw) */
.founder-parallax { container-type: inline-size; }
.founder-visual::before {
  /* свет за фото */
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6% -14% -10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--deep-accent-rgb) / 0.32), rgb(var(--deep-accent-rgb) / 0.1) 52%, transparent 76%);
}
.founder-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgb(var(--deep-ink-rgb) / 0.1);
  box-shadow: var(--shadow-float), 0 0 0 1px rgb(var(--deep-bg-rgb) / 0.6);
  background: var(--deep-surface);
}
.founder-figure picture { display: block; }   /* без зазора между фото и подписью */
.founder-figure img { display: block; width: 100%; height: auto; }

.founder-text {
  grid-area: text;
  display: grid;
  gap: 16px;
  max-width: 60ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);   /* 16 → 18 */
  line-height: 1.6;
  text-wrap: pretty;
}
/* Подпись автора — нижняя полоса внутри карточки фото (figcaption): имя, роль,
   авторство одной строкой, как подпись под снимком, а не отдельный блок.
   Кегль считается от ширины карточки (2.6cqw ≈ 12,5 px на десктопе и ≈ 9,3 px
   на телефоне), поэтому текст не переносится и не выходит за границы фото. */
.founder-plate {
  padding: 10px 10px;
  border-top: 1px solid var(--deep-border);
  background: var(--deep-surface);
  color: var(--deep-muted);
  font-size: min(0.875rem, 2.6cqw);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.founder-note {
  padding-left: 16px;
  border-left: 2px solid var(--deep-accent);
  font-weight: 560;
}
.founder-cta {
  grid-area: cta;
  display: grid;
  gap: 12px;
  justify-items: start;
}
@media (min-width: 900px) {
  .founder-grid {
    grid-template-columns: minmax(0, 5.5fr) minmax(0, 6.5fr);
    grid-template-areas: "visual title" "visual text" "visual cta";
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: 24px;
    align-items: start;
  }
  .founder-visual { width: 100%; max-width: 480px; margin: 0; align-self: center; }
}

/* ---------- 25. Секция fit: подходит / не подходит ---------- */
.fit-grid { display: grid; gap: 16px; }
.fit-col {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: clamp(20px, 2.5vw, 28px);
}
.fit-head { font-size: var(--fs-h3); }
.fit-col-yes .fit-head { color: var(--deep-accent); }
.fit-col-no .fit-head { color: var(--deep-muted); }
.fit-col-no::before {
  /* кромка «не подходит» — нейтральная, без акцента */
  background: linear-gradient(160deg, rgb(var(--deep-muted-rgb) / 0.4), rgb(var(--deep-ink-rgb) / 0.06) 40%, transparent 70%);
}
.fit-list { display: grid; gap: 14px; }
.fit-list li { display: flex; align-items: flex-start; gap: 12px; }
.fit-text { font-size: 0.9375rem; line-height: 1.55; text-wrap: pretty; }
.fit-col-no .fit-text { color: var(--deep-muted); }
.fit-ico {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
}
.fit-ico svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fit-ico-yes { color: var(--deep-accent); background: rgb(var(--deep-accent-rgb) / 0.12); border: 1px solid rgb(var(--deep-accent-rgb) / 0.35); }
.fit-ico-no  { color: var(--deep-muted);  background: rgb(var(--deep-muted-rgb) / 0.1);   border: 1px solid rgb(var(--deep-muted-rgb) / 0.3); }
@media (min-width: 768px) {
  .fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  /* Две карточки в ряду одной высоты: заголовок — по содержимому, список забирает
     остаток высоты (auto 1fr), а его ряды делят эту высоту поровну (grid-auto-rows: 1fr).
     Пункт в одну строку занимает столько же места, сколько пункт в две, поэтому
     ритм строк в «Подходит» и «Не подходит» одинаковый и оба списка заканчиваются
     на одном уровне с низом карточки. */
  .fit-col { grid-template-rows: auto 1fr; }
  .fit-list { grid-auto-rows: 1fr; }
}
/* Примечание под карточками «подходит / не подходит»: контекстные ссылки на страницы сравнения */
.fit-note {
  margin-top: clamp(16px, 2vw, 24px);
  max-width: 62ch;
  color: var(--deep-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* ---------- 26. Секция faq: аккордеон на <details> ----------
   Плавная высота — ЗАФИКСИРОВАННОЕ ИСКЛЮЧЕНИЕ из A.5 (только transform/opacity): CSS-переход grid-template-rows 0fr → 1fr
   на обёртке ответа (details::details-content), 250 мс, без JS. content-visibility переходит дискретно (allow-discrete),
   поэтому анимируется и закрытие. Браузеры без ::details-content открывают/закрывают мгновенно. Reduced motion — §30. */
.faq .section-head { margin-bottom: clamp(24px, 3vw, 40px); }
.faq-list { display: grid; gap: 10px; }
.faq-item {
  border-radius: 14px;
  border: 1px solid var(--deep-border);
  background: var(--deep-surface);
  transition: border-color var(--dur-quick) var(--ease);
}
.faq-item[open] { border-color: rgb(var(--deep-accent-rgb) / 0.45); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: inherit;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--deep-ink);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-quick) var(--ease);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-q:hover { color: var(--deep-accent); }
.faq-q:focus-visible { outline-offset: -2px; }
.faq-chev {
  width: 20px;
  height: 20px;
  color: var(--deep-muted);
  transition: transform var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.faq-item[open] .faq-chev { transform: rotate(180deg); color: var(--deep-accent); }

.faq-item::details-content {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 250ms var(--ease),
    opacity 250ms var(--ease),
    content-visibility 250ms allow-discrete;
}
.faq-item[open]::details-content { grid-template-rows: 1fr; opacity: 1; }
.faq-a { min-height: 0; overflow: hidden; }
.faq-a p {
  padding: 2px 18px 18px;
  color: var(--deep-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- 27. Секция final: последний призыв ---------- */
.final {
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}
.final-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(28px, 4vw, 40px);
  justify-items: center;
}
.final-head { margin: 0; justify-items: center; }
@media (min-width: 640px) {
  .final-line { display: block; }   /* H2 ровно в две строки */
}
/* Свечение секции — усиленное, по центру над карточкой; второй, отражённый свет не нужен */
.glow-final::before {
  top: -34%;
  right: auto;
  left: 50%;
  translate: -50% 0;
  width: clamp(560px, 80vw, 1100px);
  background: radial-gradient(closest-side, rgb(var(--deep-accent-rgb) / 0.3), rgb(var(--deep-accent-rgb) / 0.1) 46%, transparent 72%);
}
.glow-final::after { display: none; }

.final-card {
  width: min(100%, 680px);
  padding: clamp(20px, 3vw, 32px);
  display: grid;
  gap: 18px;
  text-align: left;
}
.final-card::before {
  background: linear-gradient(160deg, rgb(var(--deep-accent-rgb) / 0.8), rgb(var(--deep-accent-rgb) / 0.2) 50%, rgb(var(--deep-accent-rgb) / 0.08));
}
/* Лёгкий пульс рамки: слой со свечением, анимируется только opacity (сториборд §2.10) */
.final-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--glow-accent), 0 0 90px -16px rgb(var(--deep-accent-rgb) / 0.5);
  opacity: 0.55;
  pointer-events: none;
}
@keyframes final-pulse {
  from { opacity: 0.3; }
  to   { opacity: 0.85; }
}
@media (prefers-reduced-motion: no-preference) {
  .final-glow { animation: final-pulse 3.2s ease-in-out infinite alternate; will-change: opacity; }
}


/* ---------- 28. Футер (без анимации) ---------- */
.footer {
  border-top: 1px solid var(--deep-border);
  padding-block: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 32px);
  color: var(--deep-muted);
  font-size: var(--fs-sm);
}
.footer-inner { display: grid; gap: 24px; }
.footer-about { display: grid; gap: 12px; justify-items: start; }
/* Строка бренда: знак «На потоке» + бейдж VK бизнес ID слева, кнопка «Войти в сервис» справа.
   Одна линия по центру бренда, кнопка прижата к правому краю контейнера. */
.footer-brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  width: 100%;
}
/* Знак «На потоке» + бейдж VK бизнес ID в одну строку — как в капсуле шапки */
.footer-brand { display: inline-flex; align-items: center; }
.footer .vkid-badge { color: var(--deep-ink); border-left-color: var(--deep-border); }
.footer-tagline { max-width: 40ch; text-wrap: pretty; }
/* Строка ссылок: горизонтально, по центру, с переносом на телефоне.
   grid-column 1 / -1 выводит её отдельным рядом на всю ширину контейнера (под блоком бренда). */
.footer-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 24px;
  width: 100%;
  text-align: center;
  grid-column: 1 / -1;
}
.footer-nav a {
  padding-block: 4px;
  color: var(--deep-muted);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease);
}
.footer-nav a:hover { color: var(--deep-ink); }
/* Единственная ссылка футера — заметнее обычных: крупнее и со стрелкой.
   Живёт в строке бренда, а не в ряду юридических ссылок. */
.footer-app {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--deep-ink);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease);
}
.footer-app:hover { color: var(--deep-ink); }
.footer-app .icon { color: var(--deep-accent); transition: transform var(--dur) var(--ease); }
.footer-app:hover .icon { transform: translateX(3px); }
.footer-bottom {
  display: grid;
  gap: 6px;
  padding-top: 20px;
  border-top: 1px solid rgb(var(--deep-border-rgb) / 0.7);
  font-size: var(--fs-xs);
  text-align: center;
}
@media (min-width: 768px) {
  /* Одна колонка: бренд с кнопкой справа, ряд ссылок целиком по центру, копирайт снизу */
  .footer-inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .footer-bottom { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  /* Телефон: бренд сверху, кнопка «Войти в сервис» — следующей строкой по центру */
  .footer-brand-row { justify-content: center; }
  .footer-brand-row .footer-app { flex: 0 0 100%; justify-content: center; }
}

/* ---------- 29. Моушн Ф3c: состояния «до анимации» ----------
   Включаются только классом html.js-motion (§13). photo / card / col — свои триггеры в motion.js (не общий батч).
   Пункты «кому подходит» и их иконки прячутся через состояние колонки: страховка низа страницы (revealTail)
   ставит колонке .is-in — и пункты видны даже без своей последовательности. */
html.js-motion [data-reveal="photo"]:not(.is-in) { transform: scale(0.96); }
html.js-motion [data-reveal="card"]:not(.is-in)  { transform: translateY(24px) scale(0.98); }
html.js-motion [data-reveal="col"]:not(.is-in) .fit-list li       { opacity: 0; transform: translateY(16px); }
html.js-motion [data-reveal="col"]:not(.is-in) .fit-list .fit-ico { opacity: 0; transform: scale(0); }

/* ---------- 30. Reduced motion (Ф3c) ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-reveal="col"] .fit-list li,
  html.js-motion [data-reveal="col"] .fit-list .fit-ico { opacity: 1 !important; transform: none !important; }
  .faq-item::details-content { transition: none; }   /* высота — мгновенно; псевдоэлемент не накрывается правилом «*» из §18 */
  .faq-chev { transition: none; }
  .final-glow { animation: none; will-change: auto; }
}

/* ---------- 31. Боли на телефоне (< 640 px) ----------
   Шесть карточек одного веса подряд читаются стеной (~720 px), глазу не за что зацепиться.
   На телефоне «карточность» снимается: получается один чек-лист с волосяными разделителями
   (иконка в своей колонке, текст — под заголовком) — читается как «отметьте, что про вас».
   С 640 px карточки возвращаются. Порядок «список → образ → вывод» задан в §16 (до 1024 px),
   порядок пунктов прежний: 1–3 в левой группе, 4–6 в правой. */
@media (max-width: 639.98px) {
  /* Заголовок ближе к боли: обещание и первое доказательство — в одном экране */
  .pain .section-head { margin-bottom: 20px; }

  /* gap: 0 — две группы карточек (1–3 и 4–6) читаются как один список */
  .pain-grid { gap: 0; }
  .pain-visual { margin-top: clamp(28px, 7vw, 44px); }   /* просвет от списка до фото */

  /* Чек-лист вместо шести карточек: иконка в своей колонке, текст под заголовком */
  .pain-cards { gap: 0; }
  .pain-card {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 0;
    align-items: start;
    padding: 12px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgb(var(--deep-border-rgb) / 0.7);
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .pain-card::before,
  .pain-card::after { display: none; }                      /* кромка-свет и hover-свечение .card не нужны */
  .pain-cards--right .pain-card:last-child { border-bottom: 0; }   /* разделители — только между пунктами */
  .pain-head { display: contents; }                          /* иконка и заголовок — прямо в сетку пункта */
  .pain-icon {
    align-self: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
  }
  .pain-icon .icon { width: 17px; height: 17px; }
  .pain-card h3 {
    grid-column: 2;
    align-self: center;
    font-size: 1.0625rem;
    line-height: 1.25;
  }
  .pain-card p {
    grid-column: 2;
    margin-top: 4px;
    font-size: 0.9375rem;
    line-height: 1.45;
  }
}

/* ---------- 32. Ф3d+: полоса «Что ещё умеет» (после how, не секция) ---------- */
.more {
  position: relative;
  margin-top: calc(var(--space-section) * -0.35 - 8px);   /* ближе к how, к которому относится */
  padding-block: 8px;
}
.more-title {
  margin-bottom: clamp(26px, 2.6vw, 34px);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  text-align: center;
}
.more-grid { display: grid; gap: 20px; }  /* запас под иконки, выходящие в угол */
@media (min-width: 640px) {
  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .more-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Текст карточки — по центру, иконка уходит в верхний угол и не сдвигает текст */
.more-card {
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: center;
  padding: 30px 18px 22px;
  text-align: center;
}
.more-card h3 {
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--deep-ink);
  text-wrap: balance;
}
.more-card p { max-width: 36ch; color: var(--deep-muted); font-size: var(--fs-sm); text-wrap: pretty; }
/* Иконка-бейдж: центр ровно на левом верхнем углу карточки, половина выходит наружу */
.more-icon {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--deep-accent);
  /* непрозрачная плашка: рамка карточки не просвечивает через иконку */
  background:
    linear-gradient(rgb(var(--deep-accent-rgb) / 0.12), rgb(var(--deep-accent-rgb) / 0.12)),
    var(--deep-surface);
  border: 1px solid rgb(var(--deep-accent-rgb) / 0.4);
}
.more-icon .icon { width: 18px; height: 18px; }
/* На телефоне гаттер уже половины иконки — сдвигаем её внутрь, чтобы не обрезало краем экрана */
@media (max-width: 639px) {
  .more-icon { transform: translate(-30%, -50%); }
}

/* ---------- 33. Ф3d+: живая цифра под CTA калькулятора ---------- */

/* ---------- 34. Ф6c: карточка «Ваш месяц» и цикл первого экрана (hero-demo-storyboard.md §13, §5 «Данные календаря») ----------
   Разметка по умолчанию = ФИНАЛЬНЫЙ кадр: здесь описано именно оно (три галочки в шагах, итог горит, 12 дней заполнены,
   статусы на месте). Стартовое состояние цикла — класс .is-live на [data-demo] (ставит motion.js, ниже); дальше motion.js
   анимирует ТОЛЬКО opacity / transform и только слои без текста. Календарь — .app-cal из демо Ф6b без окна, вкладок и тем;
   все его размеры — в em от кегля .month (14 px на desktop, ≈ 11–12 px на 390), масштаб одним числом. Сырых HEX нет. */
.month {
  position: relative;
  display: grid;
  gap: 0.9em;
  min-width: 0;
  padding: 1.15em 1.2em 1.05em;
  border-radius: 1.1em;
  border: 1px solid var(--deep-border);
  background: var(--deep-surface);
  box-shadow: var(--shadow-float), 0 0 0 1px rgb(var(--deep-bg-rgb) / 0.5);
  font-size: 14px;
  line-height: 1.3;
  color: var(--deep-ink);
}
.month-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.month-title .icon { width: 1.15em; height: 1.15em; color: var(--deep-accent); }
/* Курсор-стрелка — только мышь + моушн; ходит только по дням 2, 4, 6 (motion.js, x / y) */
.month-cursor {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 1.4em;
  height: 1.4em;
  opacity: 0;
  fill: var(--deep-ink);
  stroke: var(--deep-bg);
  stroke-width: 1.3;
  stroke-linejoin: round;
  pointer-events: none;
}
@media (pointer: fine) {
  html.js-motion .month-cursor { display: block; }
}

/* Календарь 4 × 7: номер, цветная полоска темы, серая строка-заглушка, значок статуса; кольцо выбора — отдельный слой.
   Ячейка — блок фиксированной высоты без aspect-ratio / flex (урок перф-приёмки Ф6b: так дешевле первая раскладка) */
.app-cal { position: relative; display: grid; gap: 0.3em; }
.app-week,
.app-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3em;
}
.app-week { font-size: 0.65em; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; color: var(--deep-muted); }
.app-day {
  position: relative;
  height: 4.6em;
  min-width: 0;
  padding: 0.3em 0.35em;
  border: 1px solid var(--deep-border);
  border-radius: 0.45em;
  background: var(--deep-bg);
}
.app-day-num { display: block; font-size: 0.75em; font-weight: 600; line-height: 1; color: var(--deep-muted); }
.app-day-post { display: grid; gap: 0.22em; margin-top: 0.35em; }   /* полоска темы + строка-заглушка одним слоем (motion.js анимирует обёртку) */
.app-day-bar { display: block; height: 0.32em; border-radius: 0.2em; background: var(--app-type); }
.app-day-line { display: block; width: 70%; height: 0.2em; border-radius: 0.2em; background: var(--deep-border); }
.app-day-status { position: absolute; right: 0.28em; top: 0.28em; width: 0.85em; height: 0.85em; color: var(--deep-muted); transform-origin: 50% 50%; }
.app-day[data-status="published"] .app-day-status { color: var(--deep-success); }
.app-day-status svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.app-day-ring { position: absolute; inset: -1px; border-radius: 0.45em; border: 2px solid var(--deep-accent); opacity: 0; }
.month [data-type="value"]      { --app-type: var(--type-value); }
.month [data-type="personal"]   { --app-type: var(--type-personal); }
.month [data-type="engagement"] { --app-type: var(--type-engagement); }
.month [data-type="cta"]        { --app-type: var(--type-cta); }

/* Старт цикла (сториборд §13.4, фаза «старт»): шаг 1 активен, 2–3 ждут, итог не горит, сетка пустая (только номера дней).
   Класс .is-live ставит motion.js (heroDemo) перед созданием timeline — один класс вместо десятков inline-записей gsap.set
   на старте (урок перф-приёмки Ф6b). Без motion.js / при reduce класса нет — виден финальный кадр. Дальше inline-стили
   цикла (GSAP) перекрывают эти правила; при пересборке они снимаются (clearProps). Тексты здесь не меняются */
[data-demo].is-live .hs-n { opacity: 1; }
[data-demo].is-live .hs-ok { opacity: 0; transform: scale(0.7); }
[data-demo].is-live [data-hs="1"] .hs-n { opacity: 0; }
[data-demo].is-live [data-hs="1"] .hs-on,
[data-demo].is-live [data-hs="1"] .hs-hl { opacity: 1; }
[data-demo].is-live .hero-done .hd-hl { opacity: 0; }
[data-demo].is-live .hd-ok { opacity: 0; transform: scale(0.7); }
[data-demo].is-live .app-day-post { opacity: 0; }
[data-demo].is-live .app-day-status { opacity: 0; }
[data-demo].is-live .month-cursor { will-change: transform, opacity; }

/* До 900 px карточка во всю ширину колонки; кегль — от ширины экрана (390 → ≈ 11,7 px) */
@media (max-width: 899.98px) {
  .month { font-size: clamp(10.5px, 3vw, 14px); }
}
@media (max-width: 639.98px) {
  .month { padding: 0.75em 0.95em 0.75em; gap: 0.55em; }
  .app-day { height: 2.4em; }
  /* Телефон (правка заказчика 2026-10-24): на шаге 3 календарь должен быть на экране, а не под строкой итога.
     Порядок: шаги → «Ваш месяц» → итог (DOM не трогаем: на телефоне чтение «итог → календарь» и так не ломает смысл);
     отступы сверху и между блоками ужаты, клетки ниже — чтобы календарь влезал в первый экран 375 × 812 */
  .hero { padding-top: calc(var(--topbar-h) + 1px + 16px); }
  .hero-grid { gap: 18px; }
  .month { order: 1; }
  .hero-done { order: 2; }
}

/* ---------- 35. Узкие экраны (280–379 px): горизонтальные переливы ----------
   1) Подпись CTA. «Получить первый пост» в .btn (white-space: nowrap) даёт min-content ≈ 299,5 px и выпихивает
      карточки калькулятора и финальной формы за край: при 320 px контентная ширина карточки 248 px. На узких экранах
      слово «первый» скрыто — кнопка читается «Получить пост», с 380 px текст прежний символ-в-символ (span инлайновый,
      собственных стилей не добавляет).
   2) Сетка карточек не должна диктоваться min-content: одна колонка minmax(0, 1fr) вместо auto — ни один потомок
      не может растянуть карточку шире контейнера. */
@media (max-width: 899.98px) {
  .calc-card, .final-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 379.98px) {
  .cta-extra { display: none; }
}

/* 3) Совсем узкий экран (280–319 px, Galaxy Fold в сложенном виде): бюджет шапки 248 px не вмещает бренд + CTA
      (142,4 + 16 + 133,2 = 291,6 при доступных 258 с учётом margin-left: -10px у .brand-pill). Гуттер шапки 12 px,
      зазор 0, внутренние отступы капсулы ужаты — иконка и надписи остаются на месте, высота шапки не меняется.
   4) Приписка-плашка мока и подпись фото: на 280 px их nowrap-строка шире экрана — разрешаем перенос. */
@media (max-width: 319.98px) {
  .topbar-inner {
    width: min(100% - 24px, var(--container));   /* гуттер шапки 12 вместо 16 */
    gap: 0;
  }
  .brand-pill { gap: 4px; padding-right: 0; }
  .vkid-badge { padding-left: 4px; }
  .topbar-cta { padding-inline: 12px; }

  .ghost-note { max-width: calc(100vw - 16px); white-space: normal; }
  .founder-plate { white-space: normal; }
}

/* ---------- 36. Юридические страницы: тарифы, оферта, реквизиты, политика ----------
   Отдельные документы лендинга (/tarify, /oferta, /rekvizity, /privacy). Тот же тёмный фон, шапка и футер;
   текст — обычной колонкой не шире 820 px, чтобы строки не расползались на десктопе. */
.legal-page { padding-top: clamp(16px, 2.4vw, 28px); }
.legal-head { display: grid; gap: 12px; max-width: 820px; margin-bottom: clamp(24px, 3vw, 36px); }
.legal-head h1 { font-size: var(--fs-h2); line-height: 1.12; text-wrap: balance; }
.legal-body { display: grid; gap: 24px; max-width: 820px; }
.legal-body--after { margin-top: clamp(28px, 3.4vw, 44px); }
.legal-body section { display: grid; gap: 12px; }
.legal-body h2 { font-size: var(--fs-h3); }
.legal-body p { color: var(--deep-muted); line-height: 1.6; text-wrap: pretty; }
.legal-body strong { color: var(--deep-ink); font-weight: 600; }
.legal-body ul { display: grid; gap: 8px; }
.legal-body ul li { position: relative; padding-left: 20px; color: var(--deep-muted); line-height: 1.55; }
.legal-body ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--deep-accent);
}
/* Реквизиты: подпись слева, значение справа (с 640 px); на телефоне — друг под другом */
.legal-facts { display: grid; gap: 14px; margin: 0; }
.legal-facts > div { display: grid; gap: 4px; }
.legal-facts dt { color: var(--deep-muted); font-size: var(--fs-sm); }
.legal-facts dd { margin: 0; }
@media (min-width: 640px) {
  .legal-facts > div { grid-template-columns: 220px minmax(0, 1fr); align-items: baseline; gap: 16px; }
}
.legal-footnote { margin-top: 18px; max-width: 820px; color: var(--deep-muted); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }
.legal-cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 37. Страница /smm-specialist: таблица сравнения специалиста и сервиса ----------
   Одна таблица под юридической колонкой (.legal-body). На телефоне не сжимается до нечитаемого:
   таблица шире экрана и прокручивается по горизонтали внутри своей рамки. */
.compare {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--deep-border);
  border-radius: 14px;
  background: var(--deep-surface);
}
.compare table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--deep-border); }
.compare thead th { color: var(--deep-ink); font-weight: 600; background: var(--deep-raised); }
.compare tbody th { color: var(--deep-ink); font-weight: 600; }
.compare td { color: var(--deep-muted); }
.compare td:last-child { color: var(--deep-ink); background: rgb(var(--deep-accent-rgb) / 0.06); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.fit-col h3 { margin-bottom: 2px; font-size: 1.0625rem; color: var(--deep-ink); }

/* ---------- 38. SMM-страница: воздух, цифры и инфографика ----------
   Страница /smm-specialist перевёрстана из «просто текста» в воздушную: крупные цифры в первом экране,
   чипсы-навигация, барами показана цена поста, услуги — карточками с иконками, шаги — номерами.
   Все новые правила — только с префиксом .smm- или внутри .smm-page (класс <body> этой страницы),
   поэтому другие страницы лендинга не меняются. Палитра — только токены --deep-*, иконки — инлайн-спрайт. */

/* Оболочка страницы: колонка уже основной (1200), чтобы строки не расползались */
.smm-main { --container: 1040px; padding-block: clamp(20px, 3vw, 32px) clamp(40px, 5vw, 64px); }

/* Первый экран */
.smm-hero-sec { padding-block: clamp(24px, 4vw, 40px) clamp(20px, 3vw, 28px); }
.smm-hero { display: grid; gap: clamp(16px, 2.2vw, 22px); max-width: 880px; }
.smm-hero h1 { text-wrap: balance; }

/* Две карточки-цифры: на телефоне друг под другом, с 760 px — в ряд */
.smm-stats { display: grid; gap: 12px; margin-top: clamp(6px, 1.4vw, 12px); }
.smm-stat {
  display: grid;
  gap: 6px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--deep-border);
  border-radius: var(--radius-lg);
  background: var(--deep-surface);
}
.smm-stat-value {
  font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.125rem);
  font-weight: 720;
  line-height: 1.12;
  letter-spacing: var(--track-tight);
  color: var(--deep-ink);
  font-variant-numeric: tabular-nums;
}
.smm-stat-note { color: var(--deep-muted); font-size: var(--fs-sm); line-height: 1.45; text-wrap: pretty; }
/* Акцентная — сервис: своя рамка и мягкое свечение */
.smm-stat-accent {
  border-color: var(--deep-accent);
  background: linear-gradient(180deg, rgb(var(--deep-accent-rgb) / 0.06), rgb(var(--deep-surface-rgb) / 0.9));
  box-shadow: 0 24px 56px -32px rgb(var(--deep-accent-rgb) / 0.08), 0 0 40px -12px rgb(var(--deep-accent-rgb) / 0.08);
}
.smm-stat-accent .smm-stat-value { color: var(--deep-accent); }

/* Кнопка стоит по правому краю первого экрана — ровно под акцентной карточкой «1 800 ₽» (правая колонка сетки).
   До 760 px карточки стоят в столбик и кнопка занимает всю ширину. */
.smm-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 16px; }
@media (max-width: 759.98px) {
  .smm-hero-actions { justify-content: stretch; }
  .smm-hero-actions .btn { width: 100%; }
}
/* Плашка «×15–30 дешевле» внутри акцентной карточки */
.smm-stat-badge {
  display: inline-block;
  width: fit-content;
  justify-self: start;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(var(--deep-accent-rgb) / 0.12);
  color: var(--deep-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* Секции: воздух, одна колонка, сетка текста не шире 760 px */
.smm-sec { padding-block: clamp(48px, 8vw, 96px); }
.smm-sec-head { display: grid; gap: 12px; max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); }
.smm-prose { display: grid; gap: 10px; max-width: 760px; }
.smm-prose p { color: var(--deep-muted); line-height: 1.6; text-wrap: pretty; }
.smm-prose strong { color: var(--deep-ink); font-weight: 600; }
.smm-note { margin-top: clamp(18px, 2.4vw, 24px); color: var(--deep-muted); line-height: 1.6; text-wrap: pretty; }
.smm-footnote { margin-top: 18px; max-width: 760px; color: var(--deep-muted); font-size: var(--fs-sm); line-height: 1.5; text-wrap: pretty; }

/* Инфографика цены: два бара «цена одного поста» */
.smm-bars {
  display: grid;
  gap: clamp(18px, 2.4vw, 24px);
  max-width: 760px;
  margin-top: clamp(24px, 3vw, 34px);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--deep-border);
  border-radius: var(--radius-lg);
  background: rgb(var(--deep-surface-rgb) / 0.6);
}
.smm-bars-title {
  color: var(--deep-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.smm-bar { display: grid; gap: 8px; }
.smm-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.smm-bar-label { color: var(--deep-muted); font-size: var(--fs-sm); }
.smm-bar-value { color: var(--deep-ink); font-size: var(--fs-base); font-weight: 700; font-variant-numeric: tabular-nums; }
.smm-bar-value-accent { color: var(--deep-accent); }
.smm-bar-track { height: 14px; border-radius: var(--radius-pill); background: rgb(var(--deep-raised-rgb) / 0.9); overflow: hidden; }
.smm-bar-fill { display: block; width: 100%; height: 100%; min-width: 8px; border-radius: inherit; background: var(--deep-muted); }
.smm-bar-fill-accent { width: 7.5%; background: var(--deep-accent); }
.smm-bar-note { color: var(--deep-muted); font-size: var(--fs-xs); line-height: 1.4; }
.smm-bars-note { color: var(--deep-muted); font-size: var(--fs-xs); line-height: 1.5; }

/* Услуги: 4 карточки с иконкой в кружке (на телефоне — в столбик) */
.smm-features { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.smm-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--deep-border);
  border-radius: var(--radius-lg);
  background: var(--deep-surface);
  transition: border-color var(--dur-quick) var(--ease);
}
.smm-feature:hover { border-color: rgb(var(--deep-accent-rgb) / 0.45); }
.smm-feature-text { color: var(--deep-ink); font-weight: 500; line-height: 1.4; }
.smm-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-pill);
  border: 1px solid rgb(var(--deep-accent-rgb) / 0.32);
  background: rgb(var(--deep-accent-rgb) / 0.1);
  color: var(--deep-accent);
}
.smm-ico .icon { width: 22px; height: 22px; }
.smm-ico-sm { width: 34px; height: 34px; }
.smm-ico-sm .icon { width: 18px; height: 18px; }

/* Пункты с галочкой (маркерный список) */
.smm-checks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; max-width: 760px; }
.smm-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(16px, 2.2vw, 20px) clamp(16px, 2.4vw, 24px);
  border: 1px solid var(--deep-border);
  border-radius: var(--radius);
  background: rgb(var(--deep-surface-rgb) / 0.6);
  color: var(--deep-ink);
  line-height: 1.5;
}
.smm-check > span:last-child { padding-top: 6px; }

/* Таблица сравнения — облегчённая только здесь: без вертикальных линий, зебра, акцент на колонке сервиса */
.smm-page .compare { background: transparent; border-radius: var(--radius-lg); }
.smm-page .compare table { border-collapse: separate; border-spacing: 0; }
.smm-page .compare th,
.smm-page .compare td { padding-block: 14px; }
.smm-page .compare thead th { background: transparent; border-bottom: 1px solid var(--deep-border); }
.smm-page .compare thead th:last-child { color: var(--deep-accent); }
.smm-page .compare td:last-child { background: transparent; }
.smm-page .compare tbody tr:nth-child(odd) > th,
.smm-page .compare tbody tr:nth-child(odd) > td { background: rgb(var(--deep-surface-rgb) / 0.6); }
.smm-page .compare tbody tr:last-child > th,
.smm-page .compare tbody tr:last-child > td { border-bottom: 0; }

/* Три шага: крупный номер, иконка, подпись; на десктопе — в ряд с тонкой линией между карточками */
.smm-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.smm-step {
  position: relative;
  display: grid;
  gap: 10px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--deep-border);
  border-radius: var(--radius-lg);
  background: var(--deep-surface);
}
.smm-step-num {
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.25rem);
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--deep-accent);
  font-variant-numeric: tabular-nums;
}
.smm-step-ico { width: 38px; height: 38px; }
.smm-step-text { color: var(--deep-ink); line-height: 1.5; text-wrap: pretty; }

/* Кому что подходит: две карточки со списком */
.smm-fits { display: grid; gap: 12px; }
.smm-fit {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--deep-border);
  border-radius: var(--radius-lg);
  background: var(--deep-surface);
}
.smm-fit-service { border-color: rgb(var(--deep-accent-rgb) / 0.45); }
.smm-fit-title { margin: 0; font-size: 1.0625rem; color: var(--deep-ink); }
.smm-fit-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.smm-fit-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--deep-muted); font-size: var(--fs-sm); line-height: 1.5; }
.smm-fit-mark { flex: none; width: 1em; color: var(--deep-neutral); text-align: center; }
.smm-fit-check { width: 16px; height: 16px; margin-top: 3px; color: var(--deep-accent); }
.smm-fit-service .smm-fit-list li { color: var(--deep-ink); }

/* Призыв: карточка с акцентной рамкой */
.smm-cta {
  display: grid;
  gap: clamp(14px, 2vw, 18px);
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--deep-accent);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgb(var(--deep-accent-rgb) / 0.06), rgb(var(--deep-surface-rgb) / 0.9));
  box-shadow: 0 30px 70px -44px rgb(var(--deep-accent-rgb) / 0.08);
}
.smm-cta h2 { max-width: 640px; }
.smm-cta-price { color: var(--deep-muted); line-height: 1.55; text-wrap: pretty; }
.smm-cta .hero-form { max-width: 520px; margin-top: 4px; }
.smm-cta-link { justify-self: start; color: var(--deep-accent); font-weight: 600; text-decoration: none; }
.smm-cta-link:hover { color: var(--deep-accent-strong); text-decoration: underline; }

/* Частые вопросы: те же <details>, но карточками */
.smm-faq-list { display: grid; gap: 10px; max-width: 820px; }
.smm-faq {
  border: 1px solid var(--deep-border);
  border-radius: 14px;
  background: var(--deep-surface);
  transition: border-color var(--dur-quick) var(--ease);
}
.smm-faq[open] { border-color: rgb(var(--deep-accent-rgb) / 0.45); }
.smm-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: inherit;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--deep-ink);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-quick) var(--ease);
}
.smm-faq-q::-webkit-details-marker { display: none; }
.smm-faq-q::marker { content: ""; }
.smm-faq-q:hover { color: var(--deep-accent); }
.smm-faq-q:focus-visible { outline-offset: -2px; }
.smm-faq-chev {
  width: 20px;
  height: 20px;
  color: var(--deep-muted);
  transition: transform var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.smm-faq[open] .smm-faq-chev { transform: rotate(180deg); color: var(--deep-accent); }
.smm-faq-a p { padding: 2px 18px 18px; color: var(--deep-muted); font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }

/* С 760 px сетки раскрываются в 2–3 колонки */
@media (min-width: 760px) {
  .smm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .smm-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .smm-fits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .smm-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  /* Тонкая соединительная линия между шагами — только оформление, в дерево доступности не попадает */
  .smm-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, var(--deep-border), rgb(var(--deep-accent-rgb) / 0.45));
  }
}

/* ---------- 39. Нейросеть: страница ----------
   /neyroset-dlya-postov переиспользует кит §38 (.smm-*): тело получает класс smm-page, поэтому
   вся инфографика, карточки, шаги, CTA и вопросы оформляются теми же правилами. Здесь — только то,
   чего в ките нет: полоса «7 минут» (1,5 % от 480 минут) и подпись в карточке «Что входит». */
.neuro-bar-fill-7 { width: 1.5%; }
.neuro-lead { max-width: 760px; color: var(--deep-muted); line-height: 1.6; text-wrap: pretty; }
.neuro-feature-text { display: grid; gap: 2px; }
.neuro-feature-title { color: var(--deep-ink); font-weight: 600; line-height: 1.35; }
.neuro-feature-note { color: var(--deep-muted); font-size: var(--fs-sm); line-height: 1.45; text-wrap: pretty; }