/* ============================================================
   ОПЕРАЦИЯ «ПЕРЕЗАГРУЗКА» — БАЗОВЫЕ СТИЛИ
   ============================================================
   Структура файла:
   1. Подключение шрифтов (Montserrat / IBM Plex Serif / JetBrains Mono)
   2. CSS Reset
   3. Дизайн-система (:root переменные)
   4. Базовая типографика
   5. Контейнеры и сетка
   6. Sticky TOP BAR
   7. Секции и вертикальный ритм
   8. Компоненты: моно-метки и §-теги
   9. Компоненты: стоп-фразы
   10. Компоненты: плашки с красной рамкой (protocol-card)
   11. Компоненты: курсивный вкладыш (цитата Прокурора)
   12. Компоненты: карточки отзывов
   13. Компоненты: карточки «Что входит» (§07)
   14. Компоненты: инсет-плашки «Полный состав фазы» (§05)
   15. Компоненты: фазы с линией маршрута (§05)
   16. Компоненты: сцены дня (§06)
   17. Компоненты: аккордеоны FAQ (§11)
   18. Компоненты: CTA-кнопки
   19. Компоненты: блок даты старта (§10)
   20. Компоненты: моно-блок личного дела (§04)
   21. Утилитарные классы
   22. Scroll-reveal анимация
   23. Адаптивность (медиа-запросы)
   ============================================================ */


/* ============================================================
   1. ШРИФТЫ — Montserrat (заголовки), IBM Plex Serif (проза),
      JetBrains Mono (служебные метки). Совпадают с витриной spyschool.ru.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=JetBrains+Mono:wght@400;500&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&display=swap');


/* ============================================================
   2. CSS RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}


/* ============================================================
   3. ДИЗАЙН-СИСТЕМА — CSS-ПЕРЕМЕННЫЕ
   ============================================================ */
:root {
  /* --- Цвета: фон и поверхности --- */
  --bg-page:        #0A0A0A;
  --bg-surface:     #111111;

  /* --- Цвета: границы --- */
  --border-line:    #1F1F1F;   /* разделители секций, границы карточек */

  /* --- Цвета: текст --- */
  --text-primary:   #E5E5E5;  /* основной текст */
  --text-secondary: #B0B0B0;  /* курсивные подзаголовки фаз, описания в карточках */
  --text-muted:     #888888;  /* sub-текст под CTA, подписи отзывов */
  --text-mono:      #9A9A9A;  /* серые моно-метки (01/VIDEO, ПОЛНЫЙ СОСТАВ ФАЗЫ) */
  --white:          #FFFFFF;

  /* --- Цвета: акцент --- */
  --accent-red:      #E70033;
  --accent-red-hover: #FF1A4D;
  --accent-red-glow: rgba(231, 0, 51, 0.2);

  /* --- Шрифты --- */
  /* Заголовки — как на витрине spyschool.ru */
  --font-head:  'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Контейнер --- */
  --container-width:   670px;
  --header-width:      820px;   /* хедер шире колонки: бренд и статус разнесены */
  --container-padding: 0px;   /* на десктопе колонка 580px без внутренних паддингов */

  /* --- Вертикальный ритм --- */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-section: 96px;      /* между секциями на десктопе */

  /* --- Типографика: размеры (десктоп) --- */
  --fs-h1:       60px;
  --fs-h1-sub:   28px;   /* подзаголовок H1 «И сила воли тут ни при чём.» */
  --fs-h2:       48px;
  --fs-h3:       32px;   /* названия фаз */
  --fs-body:     18px;   /* основной prose (Plex Serif) */
  --fs-body-sm:  17px;   /* мобильный prose */
  --fs-small:    16px;
  --fs-mono:     14px;   /* моно-метки секций */
  --fs-mono-sm:  13px;   /* мелкие моно-метки (карточки, состав) */
  --fs-accent:   26px;   /* стоп-фразы */
  --fs-date:     20px;   /* блок даты старта */

  /* --- Высота строки --- */
  --lh-body:     1.6;
  --lh-heading:  1.1;
  --lh-accent:   1.2;

  /* --- Прочее --- */
  --header-height:   56px;
  --btn-radius:      8px;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
}


/* ============================================================
   4. БАЗОВАЯ ТИПОГРАФИКА
   ============================================================ */
body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Заголовки — Montserrat Bold (единый шрифт с витриной spyschool.ru) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text-primary);
  line-height: var(--lh-heading);
}

h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
}

/* Prose — IBM Plex Serif */
p {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}


/* ============================================================
   5. КОНТЕЙНЕРЫ И СЕТКА
   ============================================================ */
.container,
main {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  text-align: left;
}


/* ============================================================
   6. STICKY TOP BAR
   ============================================================ */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background-color: var(--bg-page);
  border-bottom: 1px solid var(--border-line);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-mono);
}

/* Внутренний контейнер хедера.
   Шире колонки контента (--header-width > --container-width),
   чтобы бренд и dossier-статус были разнесены сильнее — как в Base44. */
.top-bar__inner {
  max-width: var(--header-width);
  margin-inline: auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

/* Бренд слева: ◐ ШКОЛА РАЗВЕДЧИКА */
.top-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  letter-spacing: 0.15em;
}

/* Логотип (изображение) в шапке — 32×32px, соответствует размеру из Base44 */
.top-bar__logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: block;
}

/* Десктоп: DOSSIER No. ПЗ-001 / STATUS: ACTIVE */
.top-bar__right {
  margin-left: auto;
  letter-spacing: 0.08em;
}

.top-bar__right span {
  margin: 0 var(--space-xs);
}


/* ============================================================
   7. СЕКЦИИ И ВЕРТИКАЛЬНЫЙ РИТМ
   ============================================================ */
section {
  padding-top: var(--space-section);
  padding-bottom: 0;
}

/* Hero — особый случай.
   min-height и внутренние отступы уменьшены, чтобы плашка «// БРИФ»
   и верх красной рамки попадали на первый экран десктопа (900px). */
.hero {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(24px, 3vw, 40px);
}

/* DOSSIER-метка в hero: уменьшенный трекинг и небольшой отступ
   до §00-тега (Base44 mb-8 был крупнее — здесь плотнее по правке). */
.hero .dossier-tag {
  letter-spacing: 0.02em;
  margin-bottom: var(--space-sm);
}

/* §00-тег в hero */
.hero .section-tag {
  margin-bottom: var(--space-sm);
}

/* Плашка «Первый поток собран. Ближайший старт — ...» — временный
   элемент для страницы продажи второго потока. Сдержанное оформление:
   текстовая рамка, без анимаций и мигания. */
.hero__status-plaque {
  display: inline-block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--accent-red);
  border: 1px solid var(--accent-red);
  padding: 6px 14px;
  margin-bottom: var(--space-md);
}

/* H1 в hero: кегль чуть меньше общего --fs-h1 и плотнее вертикальные
   отступы — чтобы плашка «// БРИФ» и рамка попадали на первый экран. */
.hero h1 {
  font-size: clamp(34px, 4vw, 48px);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

/* Подзаголовок Hero «И сила воли тут ни при чём.» */
.hero__subtitle {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: var(--fs-h1-sub);
  line-height: 1.3;
  color: var(--text-secondary);
  margin-top: 0;
}

/* ============================================================
   7.0.1 АЛЬТЕРНАТИВНЫЙ ВХОД ДЛЯ ВЫПУСКНИКОВ «КОДА ДОСТУПА»
   ============================================================
   Элементы этого входа скрыты по умолчанию через [hidden] и
   показываются из scripts.js только при ?diag=1 в адресе —
   этот параметр Игорь добавляет в ссылку, которую даёт
   выпускникам «Кода доступа». Одновременно скрываются обычный
   бриф и §01–§04.
   ============================================================ */

/* Служебное: [hidden] должен побеждать display у секций */
[hidden] {
  display: none !important;
}

.hero-h1__accent {
  color: var(--accent-red);
}

/* Ссылка внутри текстового абзаца (например, на «Код доступа») */
.inline-link {
  color: var(--text-primary);
  border-bottom: 1px solid var(--accent-red);
  padding-bottom: 1px;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.inline-link:hover,
.inline-link:focus-visible {
  color: var(--accent-red);
}

/* Рамка «После диагностики» в Hero: тот же вертикальный ритм,
   что между H1 и подзаголовком (var(--space-md)) */
#heroFrameDiag {
  margin-top: var(--space-md);
}

/* Воздух между абзацами prose внутри секции */
p + p {
  margin-top: var(--space-md);
}


/* ============================================================
   7.1 БЛОК «БРИФ» (§00, вторая секция)
   ============================================================ */

/* Отступ сверху: больше воздуха между подзаголовком hero и
   плашкой «// БРИФ», но не до общего --space-section (96px) —
   иначе плашка и рамка не попадают на первый экран десктопа. */
.brief {
  padding-top: var(--space-xl);
}

/* Шапка брифа: красная черта + метка // БРИФ */
.brief__header {
  margin-bottom: var(--space-sm);
}

.brief__header .accent-rule {
  margin-bottom: var(--space-sm);
}

.brief__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.1em;
  color: var(--accent-red);
}

/* Лид-абзац брифа (приглушённый серый, увеличенный интерлиньяж) */
.brief__lead {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-primary);
  margin-top: var(--space-md);
}

/* Блок основного текста брифа после красной рамки */
.brief__body {
  margin-top: var(--space-lg);
}

.brief__body p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

/* Отступ красной рамки от лид-абзаца */
.brief .hero-frame {
  margin-top: var(--space-lg);
}


/* ============================================================
   8. КОМПОНЕНТЫ: МОНО-МЕТКИ И §-ТЕГИ
   ============================================================
   Красные метки секций: §01 // ИДЕНТИФИКАЦИЯ
   Серые метки внутри блоков: ПОЛНЫЙ СОСТАВ ФАЗЫ 1
   ============================================================ */

/* Красная метка секции: §01 // ИДЕНТИФИКАЦИЯ */
.section-tag {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-mono);
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--accent-red);
  margin-bottom: var(--space-md);
}

/* Заголовок H2 контентной секции (Base44 mb-10 = 40px) */
.section-h2 {
  margin-bottom: 40px;
}

/* Блок prose-текста: воздух между абзацами (Base44 space-y-6 = 24px) */
.prose p + p {
  margin-top: var(--space-md);
}

.prose p {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

/* Курсивная приглушённая сноска внутри prose */
.prose p.prose__note {
  font-style: italic;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
}

/* Серая моно-метка (01/VIDEO, ОТЧЁТ 001, ПОЛНЫЙ СОСТАВ) */
.label-mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.05em;
  font-weight: 400;
  color: var(--text-mono);
}

/* DOSSIER-метка в Hero — accent-steel: стальной синевато-серый */
.dossier-tag {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.05em;
  font-weight: 500;
  color: #7db3d1;
  text-shadow:
    0 0 7px rgba(125, 179, 209, 0.6),
    0 0 20px rgba(125, 179, 209, 0.3);
}

/* Красная моно-метка внутри плашки (PROTOCOL 001-A, АРХИТЕКТУРА ДОСТУПА) */
.protocol-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--accent-red);
  margin-bottom: var(--space-sm);
}


/* ============================================================
   9. КОМПОНЕНТЫ: СТОП-ФРАЗЫ
   ============================================================
   «Это не вы. Это код. И он отключаем.»
   Красная черта-штамп сверху + красный текст Bold
   ============================================================ */
.stop-phrase {
  margin-top: var(--space-xl);
}

.stop-phrase__rule {
  width: 48px;
  height: 2px;
  background-color: var(--accent-red);
  margin-bottom: var(--space-sm);
}

.stop-phrase__text {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-accent);
  line-height: var(--lh-accent);
  color: var(--accent-red);
}


/* ============================================================
   10. КОМПОНЕНТЫ: ПЛАШКИ С КРАСНОЙ РАМКОЙ
   ============================================================
   // БРИФ (§00), PROTOCOL 001-A (§03),
   АРХИТЕКТУРА ДОСТУПА / PROTOCOL 002 (§07),
   СТАРТ / TIMESTAMP (§07),
   ЛИЧНЫЙ РАЗБОР / PROTOCOL FALLBACK (§09)
   ============================================================ */
.protocol-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--accent-red);
  padding: 32px;
  transition: box-shadow var(--transition-base);
}

.protocol-card:hover {
  box-shadow: 0 0 12px var(--accent-red-glow);
}

.protocol-card p {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--text-primary);
}

/* Красная метка внутри карточки — специфичность выше .protocol-card p */
.protocol-card .protocol-label {
  color: var(--accent-red);
}

/* Отступы между абзацами внутри карточки (Base44 mt-4 = 16px) */
.protocol-card p + p {
  margin-top: var(--space-sm);
}

/* Курсивная затемнённая сноска в конце карточки */
.protocol-card .protocol-card__note {
  font-style: italic;
  color: var(--text-muted);
}

/* Вертикальные отступы карточки в потоке (Base44 my-12 = 48px) */
.protocol-card--spaced {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Карточка только с рамкой, без фона (§09 ЛИЧНЫЙ РАЗБОР) */
.protocol-card--no-bg {
  background-color: transparent;
}

/* ============================================================
   10.1 СПИСОК ОБЕЩАНИЙ С ТИРЕ (§09)
   ============================================================ */
.pledge {
  display: flex;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.pledge__dash {
  flex-shrink: 0;
}

.pledge__marker {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-primary);
}

/* Вводная фраза «Поэтому я обещаю ровно три вещи:» */
.pledge-intro {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-primary);
  margin-top: 32px;
  margin-bottom: var(--space-md);
}


/* ============================================================
   11. КОМПОНЕНТЫ: КУРСИВНЫЙ ВКЛАДЫШ (ГОЛОС ПРОКУРОРА)
   ============================================================
   Красная вертикальная линия 2px слева + курсив серым
   Используется: §02, §09
   ============================================================ */
.quote-block {
  border-left: 2px solid var(--accent-red);
  padding-left: var(--space-sm);
  margin-top: 32px;
  margin-bottom: 32px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* Цитата-доказательство под таблицей сравнения тарифов (§07) —
   тот же quote-block, но с подписью и увеличенным отступом сверху:
   после плотной таблицы нужен более заметный зазор */
.compare__proof {
  margin-top: var(--space-xl);
}

/* Атрибуция (cite) внутри любой цитаты-врезки — не только под таблицей
   тарифов (.compare__proof), но и везде, где у quote-block есть автор:
   моно-шрифт без курсива, приглушённый цвет, отдельной строкой. */
.quote-block cite {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  font-style: normal;
  color: var(--text-mono);
}


/* ============================================================
   12. КОМПОНЕНТЫ: КАРТОЧКИ ОТЗЫВОВ (§08)
   ============================================================
   Красная вертикальная линия 2px слева + моно-метка ОТЧЁТ 001
   ============================================================ */
.testimonial-card {
  background-color: var(--bg-surface);
  border-left: 2px solid var(--accent-red);
  padding: clamp(24px, 4vw, 32px);
}

.testimonial-card__meta {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.05em;
  color: var(--text-mono);
  margin-bottom: var(--space-sm);
}

.testimonial-card__quote {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

.testimonial-card__author {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  font-style: normal;
  color: var(--text-secondary);
  margin-top: 20px;
  display: block;
}

.testimonial-card__author strong {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--text-secondary);
}

.testimonial-card + .testimonial-card {
  margin-top: var(--space-lg);
}

/* Отступ контейнера отзывов от вводного текста (Base44 mb-10 = 40px) */
.testimonial-list {
  margin-top: 40px;
}


/* ============================================================
   13. КОМПОНЕНТЫ: КАРТОЧКИ «ЧТО ВХОДИТ» (§07)
   ============================================================
   Фон #111111, тонкая граница, моно-метка 01/VIDEO
   ============================================================ */
.feature-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-line);
  padding: var(--space-md);
}

.feature-card__mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.05em;
  color: var(--text-mono);
  margin-bottom: 12px;
}

.feature-card__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.feature-card__desc {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.feature-card + .feature-card {
  margin-top: var(--space-sm);
}

/* Крупная цена по центру (§07) */
.price {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.price__value {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 48px);
  color: var(--white);
}

/* Блок «// СОСТАВ» + «Что входит:» (§07) */
.composition {
  margin-top: clamp(32px, 4vw, 48px);
}

.composition__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: clamp(13px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--accent-red);
  margin-bottom: var(--space-sm);
}

.composition__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

/* Блок оплаты (§07) */
.payment {
  margin-top: var(--space-md);
}

.payment__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.payment p {
  margin-top: 0;
}


/* ============================================================
   14. КОМПОНЕНТЫ: ИНСЕТ-ПЛАШКИ «ПОЛНЫЙ СОСТАВ ФАЗЫ» (§05)
   ============================================================ */
.module-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-line);
  padding: var(--space-md);
  margin-top: var(--space-md);
}

.module-card__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.05em;
  color: var(--text-mono);
  margin-bottom: var(--space-sm);
}

/* Буллеты внутри module-card: чуть приглушены, но светлее метки-заголовка (как в Base44) */
.module-card .phase-item__bullets li {
  font-size: 16px;
  color: #CCCCCC;
}


/* ============================================================
   15. КОМПОНЕНТЫ: ФАЗЫ С ЛИНИЕЙ МАРШРУТА (§05)
   ============================================================
   Вертикальная линия слева, точки маршрута, двухстрочный заголовок
   ============================================================ */
.phase-list {
  position: relative;
  padding-left: 40px;
  margin-top: var(--space-lg);
}

/* Вертикальная линия маршрута (Base44: rgb(42,42,42) — чуть светлее border-line) */
.phase-list::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #2A2A2A;
}

.phase-item {
  position: relative;
  /* Больше, чем отступ перед «Что в итоге» внутри шага (--space-xl,
     см. .phase-item__lead ниже) — иначе оба разрыва визуально
     совпадают, и неясно, к какому шагу относится итог. */
  padding-bottom: var(--space-2xl);
}

/* Точка маршрута */
.phase-item::before {
  content: '';
  position: absolute;
  left: -40px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--accent-red);
  background-color: var(--bg-page);
}

/* Красная моно-метка ▸ ФАЗА N. */
.phase-item__tag {
  font-family: var(--font-mono);
  text-transform: uppercase;
  /* Крупнее --fs-mono (14px, используется для «ЧТО В ИТОГЕ» и других
     служебных меток) — иначе оба красных моно-заголовка одного шага
     визуально сливаются в одну и ту же по важности метку. */
  font-size: 18px;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: var(--accent-red);
  margin-bottom: var(--space-xs);
}

/* Название фазы (белый Bold) */
.phase-item__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}

/* Обещание шага — жирная строка под заголовком (новая структура §05) */
.phase-item__promise {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

/* Абзац «Что в итоге» — проза, а не буллеты */
.phase-item__outcome {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

/* Курсивный подзаголовок-обещание (legacy, оставлен на случай отката) */
.phase-item__subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

/* «Что в итоге:» — идёт после module-card, нужен отступ сверху */
/* «ЧТО В ИТОГЕ» — парная метка к «ЧТО ВХОДИТ В ШАГ» внутри module-card.
   Набрана тем же моно-шрифтом в верхнем регистре, но красным и с линией
   сверху: карточка состава закончилась, начинается результат. */
.phase-item__lead {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-red);
  /* Реальный отступ «упражнения → метка» = нижний padding карточки
     module-card (--space-md, 24px, она стоит прямо перед этим блоком)
     + margin-top и padding-top ниже. Он должен быть ровно вдвое
     меньше отступа между шагами (--space-2xl, 96px, на .phase-item):
     24 (карточка) + 8 (margin) + 16 (padding) = 48px = 96px / 2.
     Считать нужно от карточки, а не только от margin/padding самой
     метки — иначе цифры сходятся на бумаге, но не на экране. */
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-line);
}

/* ============================================================
   «ЧТО В ИТОГЕ» ВНУТРИ КАРТОЧКИ (§05)
   ============================================================
   Метка и абзац(ы) итога переехали внутрь той же карточки
   module-card, что и список упражнений — единый контейнер вместо
   двух визуально разорванных блоков. Разделитель внутри карточки
   тоньше внешней границы страницы и окрашен в акцентный красный —
   переход к результату мягче, но акцент на нём сохраняется.
   ============================================================ */
.module-card--with-outcome .phase-item__lead {
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(231, 0, 51, 0.25);
}


/* Буллеты фазы */
.phase-item__bullets {
  list-style: none;
  padding: 0;
}

.phase-item__bullets li {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  padding-left: 24px;
  position: relative;
  margin-bottom: var(--space-sm);
}

.phase-item__bullets li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--text-mono);
}


/* ============================================================
   16. КОМПОНЕНТЫ: СЦЕНЫ ДНЯ (§06)
   ============================================================
   Двухколоночный layout: маркер красным слева, prose справа
   ============================================================ */
.scene {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-md);
  align-items: baseline;
}

/* Контейнер сцен: отступы сверху и снизу (Base44 mb-10 = 40px) */
.scene-list {
  margin-top: 40px;
  margin-bottom: 40px;
}

.scene + .scene {
  margin-top: 32px;
}

.scene__marker {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  color: var(--accent-red);
}

.scene__text {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}


/* ============================================================
   17. КОМПОНЕНТЫ: АККОРДЕОНЫ FAQ (§11)
   ============================================================ */
.faq-item {
  border-bottom: 1px solid var(--border-line);
}

/* Кнопка-вопрос: стрелка + текст, выравнивание по верху */
.faq-item__question {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  padding: 20px 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
}

/* Стрелка-маркер ▸ */
.faq-item__marker {
  color: var(--accent-red);
  font-family: var(--font-mono);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform 0.2s ease;
}

/* Поворот стрелки при открытии */
.faq-item.is-open .faq-item__marker {
  transform: rotate(90deg);
}

/* Анимируемая обёртка ответа */
.faq-item__panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Внутренний контейнер ответа: отступ слева под стрелку */
.faq-item__answer {
  padding: 0 0 24px 32px;
}

.faq-item__answer p {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-secondary);
  white-space: pre-line;
}

.faq-item__answer p + p {
  margin-top: var(--space-sm);
}


/* ============================================================
   18. КОМПОНЕНТЫ: CTA-КНОПКИ
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 18px 48px;
  border-radius: var(--btn-radius);
  transition: background-color var(--transition-base);
  text-align: center;
}

.btn-primary {
  background-color: var(--accent-red);
  color: var(--white);
  border: none;
}

.btn-primary:hover {
  background-color: var(--accent-red-hover);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Sub-текст под CTA (курсивная подпись) */
.btn-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: var(--space-sm);
}


/* ============================================================
   19. КОМПОНЕНТЫ: БЛОК ДАТЫ СТАРТА (§10)
   ============================================================
   Красная черта-штамп + Plex Sans Semibold, без курсива
   ============================================================ */
.timestamp-block {
  margin-top: var(--space-lg);
}

.timestamp-block__rule {
  width: 48px;
  height: 2px;
  background-color: var(--accent-red);
  margin-bottom: var(--space-sm);
}

.timestamp-block__text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-date);
  line-height: 1.5;
  color: var(--text-primary);
  font-style: normal;
}


/* ============================================================
   20. КОМПОНЕНТЫ: МОНО-БЛОК ЛИЧНОГО ДЕЛА (§04)
   ============================================================
   Карточка с полями СУБЪЕКТ / ЗВАНИЕ / СЛУЖБА / ПРАКТИКА
   ============================================================ */
.dossier-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-line);
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 2;
  color: var(--text-primary);
}

/* Строка данных: метка + значение, без линий-разделителей (как в Base44) */
.dossier-card__row {
  display: block;
}

/* Серая метка поля (СУБЪЕКТ:, ЗВАНИЕ:, ...) — фикс. ширина для ровного столбца */
.dossier-card__key {
  display: inline-block;
  min-width: 130px;
  color: var(--text-secondary);
}

/* Фото-плейсхолдер рядом с моно-блоком */
.dossier-photo {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-line);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.dossier-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Текст-плейсхолдер [ФОТО АВТОРА] до загрузки реального фото */
.dossier-photo__placeholder {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--text-mono);
}

/* Layout фото + моно-блок (Base44: фото фикс. 224px, карточка — остальное) */
.dossier-header {
  display: flex;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.dossier-header__photo {
  flex-shrink: 0;
  width: 224px;
}

.dossier-header__data {
  flex: 1;
}


/* ============================================================
   21. УТИЛИТАРНЫЕ КЛАССЫ
   ============================================================ */

/* Красная горизонтальная черта-штамп (переиспользуемая) */
.accent-rule {
  width: 48px;
  height: 2px;
  background-color: var(--accent-red);
}

/* Горизонтальный разделитель */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--border-line);
}

/* Разделитель внутри секции с моно-меткой (// ЭФФЕКТ) */
.section-break {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.section-break__rule {
  width: 48px;
  height: 2px;
  background-color: var(--accent-red);
  margin-bottom: 12px;
}

.section-break__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-mono);
  letter-spacing: 0.05em;
  color: var(--accent-red);
}

/* Итог-резюме (§05 финальный абзац) */
.summary-block {
  padding-top: var(--space-xl);
}

.summary-block .accent-rule {
  margin-bottom: var(--space-md);
}

.summary-block__text {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.4;
  color: var(--text-primary);
}

/* Inline Bold-маркер в начале абзаца */
.inline-marker {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-primary);
}

/* Имена врагов (Прокурор, Страж, Диверсант) — Bold красный в prose */
.enemy-name {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--accent-red);
}

/* Красная рамка для текста в Hero (блок «Десять недель...») */
.hero-frame {
  border: 1px solid var(--accent-red);
  padding: 32px;
}

.hero-frame p {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: var(--lh-body);
  color: var(--text-primary);
  font-weight: 400;  /* не Bold */
}

/* Развилка маршрутов (§10) */
.route-divider {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  color: var(--accent-red);
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Курсивная сноска (§09 гарантия первого потока) */
.footnote-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* P.S. */
.ps-block {
  margin-top: clamp(40px, 5vw, 48px);
}

.ps-block__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.ps-block__text {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
}

/* Интро-строка §10 */
.intro-line {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-top: var(--space-sm);
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* ============================================================
   21.1 КОМПОНЕНТЫ: МАРШРУТЫ ВХОДА (§10)
   ============================================================ */
/* Моно-метка маршрута: МАРШРУТ А / CLEARANCE: ACCESS GRANTED */
.route__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.08em;
  color: var(--accent-red);
  margin-bottom: var(--space-sm);
}

/* Текст-описание маршрута */
.route__text {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

/* Жирный подзаголовок внутри маршрута Б */
.route__heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}


/* ============================================================
   22. SCROLL-REVEAL АНИМАЦИЯ
   ============================================================
   Только opacity fade-in. Без сдвигов и масштабирования.
   Применять к: H2, стоп-фразам, плашкам protocol-card.
   Prose-абзацы НЕ анимировать.
   ============================================================ */
.reveal {
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.reveal.visible {
  opacity: 1;
}


/* ============================================================
   23. АДАПТИВНОСТЬ
   ============================================================ */

/* --- Tablet (768–1024px) --- */
@media (max-width: 1024px) {
  :root {
    --space-section: 80px;
    --fs-h1: 48px;
    --fs-h1-sub: 24px;
    --fs-h2: 40px;
    --fs-h3: 28px;
  }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 768px) {
  :root {
    --container-padding: 24px;
    --space-section: 64px;
    --fs-h1: 44px;
    --fs-h1-sub: 22px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-body: 17px;
    --fs-accent: 22px;
    --fs-date: 18px;
    --fs-mono: 14px;     /* чуть крупнее на мобиле */
    --fs-mono-sm: 13px;
  }

  /* Метка «▸ Шаг N.» — на мобиле рядом с уменьшенным --fs-h3 (24px)
     фиксированные 18px десктопа выглядят непропорционально крупно */
  .phase-item__tag {
    font-size: 16px;
  }

  /* TOP BAR — только ◐ ШКОЛА РАЗВЕДЧИКА */
  .top-bar__right {
    display: none;
  }

  /* Плашки — уменьшить padding */
  .protocol-card {
    padding: 20px;
  }

  .hero-frame {
    padding: 20px;
  }

  /* CTA — на всю ширину */
  .btn {
    width: 100%;
    padding: 16px 24px;
  }

  /* Сцены дня — одна колонка на мобиле */
  .scene {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .scene__marker {
    font-size: 17px;
  }

  /* §05 — скрыть линию маршрута */
  .phase-list {
    padding-left: 0;
  }

  .phase-list::before {
    display: none;
  }

  .phase-item::before {
    display: none;
  }

  /* §04 — фото и моно-блок в столбик */
  .dossier-header {
    flex-direction: column;
  }

  .dossier-header__photo {
    width: 100%;
  }

  /* Intro-строка §10 */
  .intro-line {
    font-size: 22px;
  }
}

/* --- Уменьшение анимаций --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   ФУТЕР
   ============================================================
   Повторяет структуру оригинала Base44: тонкая линия сверху,
   центрированный моно-текст (dossier-статус, копирайт, ссылки
   на юридические документы), тонкая линия снизу.
   ============================================================ */
.site-footer {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-lg);
}

.site-footer__inner {
  width: 100%;
}

.site-footer__rule {
  width: 100%;
  height: 1px;
  background-color: var(--border-line);
}

.site-footer__meta {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.05em;
  color: var(--text-mono);
}

.site-footer__status {
  margin-bottom: var(--space-sm);
}

.site-footer__status span {
  margin: 0 var(--space-xs);
}

.site-footer__copyright {
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.site-footer__links {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.site-footer__link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-base);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--text-primary);
  text-decoration: underline;
}

.site-footer__divider {
  color: var(--border-line);
}

@media (max-width: 480px) {
  .site-footer__links {
    flex-direction: column;
    gap: var(--space-xs);
  }
  .site-footer__divider {
    display: none;
  }
}


/* ============================================================
   МОДАЛЬНЫЕ ОКНА (Оферта / Политика конфиденциальности)
   ============================================================
   Затемняющий фон + центрированное окно с прокруткой.
   Открытие/закрытие управляется через scripts.js добавлением/
   снятием атрибута [hidden] и класса .is-open (для анимации).
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(4px);
  animation: modal-fade-in 0.2s ease;
}

.modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  max-height: 85vh;
  overflow-y: auto;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-line);
  border-radius: var(--btn-radius);
  animation: modal-slide-up 0.25s ease;
}

.modal__header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background-color: var(--bg-surface);
  border-bottom: 1px solid var(--border-line);
}

.modal__title {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.15em;
  line-height: 1.2;
  color: var(--accent-red);
  margin: 0;
}

.modal__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--accent-red);
  border-radius: var(--btn-radius);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.modal__close:hover,
.modal__close:focus-visible {
  color: var(--white);
  background-color: var(--accent-red);
}

.modal__body {
  padding: var(--space-lg);
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-primary);
}

.modal__updated {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.05em;
  color: var(--text-mono);
  margin-bottom: var(--space-lg);
}

.modal__body h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-primary);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.modal__body h3:first-of-type {
  margin-top: 0;
}

.modal__body p {
  font-size: inherit;
  line-height: inherit;
  margin-bottom: var(--space-sm);
}

.modal__body ul {
  margin: 0 0 var(--space-sm);
  padding-left: 20px;
  list-style: none;
}

.modal__body ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: var(--space-xs);
}

.modal__body ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--text-secondary);
}

.modal__body strong {
  font-weight: 600;
  color: var(--text-primary);
}

.modal__body p:last-child {
  margin-bottom: 0;
}

/* Блокировка скролла страницы, когда открыто модальное окно */
body.modal-open {
  overflow: hidden;
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .modal__dialog {
    max-height: 90vh;
  }
  .modal__header {
    padding: var(--space-sm) var(--space-md);
  }
  .modal__title {
    font-size: 13px;
    letter-spacing: 0.1em;
  }
  .modal__body {
    padding: var(--space-md);
    font-size: 15px;
    line-height: 1.65;
  }
}


/* ============================================================
   STICKY CTA — «ВЫБРАТЬ МАРШРУТ»
   ============================================================
   Плавающая кнопка внизу экрана. Скрыта по умолчанию (opacity/
   pointer-events), появляется по классу .visible при скролле
   (управляется через scripts.js, см. раздел 4).
   ============================================================ */
/* ============================================================
   STICKY CTA — минималистичная иконка-стрелка на §10
   ============================================================
   Появляется, когда пользователь долистывает до Фазы 1 в §05
   (начинает читать конкретное содержание программы).
   Приглушённая в покое, чтобы не отвлекать от чтения;
   активируется только при наведении.
   ============================================================ */
.sticky-cta {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  left: auto;
  margin: 0;
  width: max-content;
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.sticky-cta.visible {
  opacity: 1;
  pointer-events: auto;
}

.sticky-cta__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--text-primary);
  background-color: rgba(10, 10, 10, 0.9);
  border: 1px solid rgba(231, 0, 51, 0.35);
  backdrop-filter: blur(4px);
  font-size: 17px;
  line-height: 1;
  transition: all var(--transition-base);
  animation: sticky-cta-pulse 2.8s ease-in-out infinite;
}

.sticky-cta__link:hover {
  color: var(--accent-red);
  border-color: var(--accent-red);
  box-shadow: 0 0 12px var(--accent-red-glow);
  animation-play-state: paused;
}

.sticky-cta__link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

@keyframes sticky-cta-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(231, 0, 51, 0.25);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(231, 0, 51, 0);
  }
}

/* Мобильная версия — остаётся в углу, чуть компактнее */
@media (max-width: 768px) {
  .sticky-cta {
    bottom: var(--space-sm);
    right: var(--space-sm);
  }

  .sticky-cta__link {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
}


/* ============================================================
   19. ЛИСТ ОЖИДАНИЯ (закрытый набор)
   ============================================================
   Показывается в §10 вместо кнопки оплаты, когда
   SITE_CONFIG.ENROLLMENT_OPEN = false (см. scripts.js).
   ============================================================ */
.waitlist {
  border: 1px solid var(--border-line);
  background-color: var(--bg-surface);
  padding: var(--space-lg);
}

/* Обязательно: у .waitlist задан свой display-контекст через padding/border,
   а глобальный [hidden] уже помечен !important — дублируем на всякий случай */
.waitlist[hidden] {
  display: none;
}

.waitlist__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.1em;
  color: var(--accent-red);
  margin-bottom: var(--space-sm);
}

.waitlist__lead {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
}

.waitlist__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.waitlist__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.waitlist__field-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mono);
}

.waitlist__input {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
  background-color: var(--bg-page);
  border: 1px solid var(--border-line);
  padding: 14px 16px;
  width: 100%;
  transition: border-color var(--transition-base);
}

.waitlist__input::placeholder {
  color: var(--text-muted);
}

.waitlist__input:focus {
  outline: none;
  border-color: var(--accent-red);
}

.waitlist__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-secondary);
  cursor: pointer;
}

.waitlist__consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent-red);
  cursor: pointer;
}

/* Ссылка на политику — <button>, чтобы переиспользовать существующую
   модалку; сбрасываем кнопочные стили до вида ссылки */
.waitlist__consent-link {
  background: none;
  border: none;
  border-bottom: 1px solid var(--accent-red);
  padding: 0;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
}

.waitlist__consent-link:hover {
  color: var(--accent-red);
}

/* Подсказка под кнопкой — описывает реальную последовательность
   экранов после отправки (капча → письмо с подтверждением) */
.waitlist__note {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-muted);
}

.waitlist__form .btn {
  align-self: flex-start;
}

.waitlist__form .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .waitlist {
    padding: var(--space-md);
  }

  .waitlist__form .btn {
    align-self: stretch;
    text-align: center;
  }
}

/* Якорь начала §07 — сюда ведут sticky-кнопка, кнопка в §10 и кнопка
   ниже в этом же блоке. Висит на самой метке «§07 // УСЛОВИЯ ОПЕРАЦИИ»,
   а не на теге <section>: у section есть встроенный padding-top
   (--space-section, 96px общего вертикального ритма), и якорь на самой
   секции оставлял бы метку за кадром — прыжок демонстрировал бы хвост
   предыдущей фразы вместо начала §07. scroll-margin-top компенсирует
   только липкую шапку (--header-height), сам padding уже учтён тем,
   что якорь стоит после него, на видимом контенте. */
#pricing {
  scroll-margin-top: calc(var(--header-height) + var(--space-sm));
}

/* Кнопка-якорь после рамки «Условие входа», в самом конце §07 —
   если читатель дочитал до сюда и не выбрал тариф, возвращает
   к началу секции (#pricing), а не отправляет дальше вниз. */
.terms__cta {
  margin-top: var(--space-lg);
}

/* Переходная фраза к следующему разделу («Теперь о том, сколько это стоит»).
   Отступ заметно больше, чем над рамкой disclaimer (48px), — чтобы
   читалось как начало новой мысли, а не как подпись к рамке. */
.transition-line {
  margin-top: var(--space-2xl);
}

/* ============================================================
   22. СРАВНЕНИЕ ТАРИФОВ (§07)
   ============================================================
   Десктоп: таблица «признак | Базовый | Расширенный» на CSS Grid.
   Мобильный: строки разворачиваются в карточки — три колонки
   на узком экране схлопнулись бы в нечитаемые столбики.
   ============================================================ */
.compare {
  margin: var(--space-lg) 0;
}

.compare__head,
.compare__row {
  display: grid;
  grid-template-columns: 1fr 150px 150px;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-line);
}

.compare__head {
  padding-top: 0;
  border-bottom-color: var(--text-muted);
}

.compare__head .compare__col {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--text-primary);
}

.compare__feature {
  font-family: var(--font-serif);
  font-size: var(--fs-body-sm);
  line-height: 1.45;
  color: var(--text-primary);
}

.compare__col {
  text-align: center;
}

.compare__yes {
  font-size: 20px;
  color: var(--accent-red);
  line-height: 1;
}

.compare__no {
  font-size: 20px;
  color: var(--text-muted);
  line-height: 1;
}

/* Счётчик мест — по умолчанию скрыт атрибутом [hidden]. Обычная
   строка текста без анимаций, таймеров и красного цвета. */
.compare__seats-counter {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  text-align: center;
  padding: var(--space-sm) 0;
}

/* Подзаголовок-разделитель «ДОПОЛНИТЕЛЬНО» */
.compare__section-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mono);
  padding: var(--space-md) 0 var(--space-sm);
  border-bottom: 1px solid var(--border-line);
}

/* Строка с ценой */
.compare__row--price .compare__feature {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-mono);
}

.compare__price {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 22px;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Строка с кнопками */
.compare__row--cta {
  border-bottom: none;
  align-items: stretch;
}

.compare__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 64px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
}

/* ---------- Мобильный: строки → карточки ---------- */
@media (max-width: 768px) {
  .compare__head {
    display: none;             /* заголовки колонок заменяют data-label */
  }

  .compare__row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: var(--space-md) 0;
  }

  .compare__feature {
    font-size: var(--fs-body-sm);
    margin-bottom: var(--space-xs);
  }

  /* Подпись тарифа слева, значок справа */
  .compare__col {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 4px 0;
  }

  .compare__col::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: var(--fs-mono-sm);
    letter-spacing: 0.06em;
    color: var(--text-mono);
  }

  .compare__row--cta .compare__col::before {
    content: none;
  }

  .compare__row--cta {
    gap: var(--space-sm);
  }

  .compare__btn {
    min-height: 56px;
  }
}