/* ============================================================
   Добор для отдельного лендинга. Подключается ПОСЛЕ styles.css.
   styles.css скопирован из большого прототипа байт в байт —
   чтобы будущие сверки с прототипом были чистым диффом, правки
   в него не вносятся, а лежат здесь.

   Одно правило. В прототипе шапка на мобильном прячет навигацию
   в выезжающую панель и открывает её кнопкой-бургером. На
   одностраничнике в навигации осталось одно действие, бургер
   не нужен, — поэтому панель разворачивается обратно в строку.
   [вынос 1:1, 2026-08-23]
   ============================================================ */

@media (max-width: 860px) {
  .main-nav.is-standalone {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    overflow: visible;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .main-nav.is-standalone .header-cta {
    margin-top: 0;
    padding: 8px 14px !important;
    font-size: 14px;
  }
  /* ⟳ 2026-08-24. В навигации стало два действия. Правило прототипа для
     выезжающей панели растягивает ссылки на всю ширину и делает их 18px —
     в строке от этого второе действие уезжает за край экрана. */
  .main-nav.is-standalone a {
    width: auto;
    padding: 8px 0;
    border-bottom: 0;
    font-size: 14px;
  }
}

/* ------------------------------------------------------------
   Добор гейта 4: блоки, которых на прежней странице не было.
   Правки в styles.css по-прежнему не вносятся.
   ------------------------------------------------------------ */

/* Сноска под ценами. Класса с такой ролью в системе не оказалось. */
.footnote { margin: 26px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Пакетов два, а сетка в системе рассчитана на четыре колонки:
   без этого две карточки занимали половину ширины, а справа
   оставалась пустота. Блок с ценой — главный на странице, пустоты
   в нём быть не должно. */
@media (min-width: 861px) {
  .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* На мобильном система оставляет пакеты в двух колонках — в списке
   стекающихся сеток .package-grid не значится. При 375px это две колонки
   по 165px: заголовок пакета ломается посреди слова, цена и кнопка не
   помещаются. Для блока с ценой это неприемлемо — стекаем. */
@media (max-width: 860px) {
  .package-grid { grid-template-columns: minmax(0, 1fr); }
  .package-grid article { border-right: 0; }
}
.package-grid article { display: flex; flex-direction: column; }
.package-grid article > span { flex: 1 0 auto; }
.package-grid article .button { align-self: flex-start; max-width: 100%; margin-top: 28px; }
.package-grid article p strong { font-size: 21px; font-weight: 700; color: var(--black); }

/* Числовые плашки на тёмном фоне: чёрные линии системы на чёрном
   не видно. В системе такой вариант уже есть на странице орг-сессии
   (.proof-stats), но живёт он в её собственном файле. */
.section-dark .format-facts { border-top-color: rgba(255, 255, 255, .38); }
.section-dark .format-facts article { border-right-color: rgba(255, 255, 255, .28); border-bottom-color: rgba(255, 255, 255, .28); }
.section-dark .format-facts p { color: rgba(255, 255, 255, .72); }
.section-dark .quote-feature p { color: rgba(255, 255, 255, .72); }
.section-dark .boundary-note { border-color: rgba(255, 255, 255, .38); }

/* ------------------------------------------------------------
   Цена. Правка 2026-08-24: блок «Найближчий потік» называл дедлайн
   ранней цены, а саму цену показывал только через секцию, в карточках
   пакетов, — человек доходил до дедлайна и не находил числа. Цена
   поднята в блок потока и усилена в карточках.
   ------------------------------------------------------------ */
.cohort-price { display: grid; gap: 10px; margin: 0 0 26px; }
.cohort-price > div { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cohort-price dt { min-width: 62px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.cohort-price dd { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.cohort-price strong { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.cohort-price s { color: var(--muted); font-size: 16px; text-decoration-thickness: 1px; }

.package-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 28px 0 0 !important; }
.package-price strong { font-size: clamp(30px, 3.6vw, 40px) !important; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.package-price span { color: var(--muted); font-size: 14px; }
/* На зеленій картці Deep сірий текст майже не читається — тримаємо чорним. */
.package-featured .package-price span { color: rgba(5, 5, 5, .72); }

/* ------------------------------------------------------------
   Тёмная панель «Найближчий потік» и «Далі» (.cohort-panel).
   Правка 2026-08-24 по замечанию Ивана: чёрный фон занимал 1018px
   из 1159 — панель лежит внутри .shell с max-width и боковыми
   полями, поэтому подложка обрывалась. Плюс внутри неё часть
   текста оставалась чёрной: .kicker span и линии .cohort-price
   заданы чёрным, а тёмного варианта у них нет.
   ------------------------------------------------------------ */

/* Подложка — во всю ширину, содержимое остаётся на общей сетке.
   Боковые поля снимаются с самой секции и возвращаются панели, так
   что её край совпадает с краем .shell, а текст внутри стоит по той
   же вертикали, что и на остальных секциях.
   Через `width:100vw` не делаем: 100vw включает полосу прокрутки,
   панель вылезала на 7px и содержимое уезжало с общей сетки. */
/* ⟳ 2026-08-25: шелл держит max-width 1440px, и на экранах шире панель
   обрывалась белой полосой справа. Ограничение снято, содержимое
   возвращается на сетку шелла отступом. */
.cohort-section { width: 100%; max-width: none; padding-inline: 0; }

.cohort-section .cohort-panel {
  padding-inline: max(var(--x), calc((100% - var(--max)) / 2 + var(--x)));
}

/* Всё, что внутри тёмной панели, — на светлые токены.
   Заголовок красится отдельно: в системе есть правило `.section-dark h2`,
   но .cohort-panel — тёмная панель внутри светлой секции, и под это
   правило не попадает. Заголовок оставался чёрным на чёрном.
   Дефект унаследован из прототипа: там панель устроена так же. */
.cohort-panel h2, .cohort-panel h3, .cohort-panel strong { color: var(--white); }
.cohort-panel .cohort-price > div { border-bottom-color: rgba(255, 255, 255, .28); }
.cohort-panel .cohort-price s { color: rgba(255, 255, 255, .6); }
.cohort-panel .footnote { color: rgba(255, 255, 255, .72); }

/* Відео знайомство в блоці «Хто веде».
   Компонента під відео в системі немає — заведено тут, на тёмном плане. */
.video-embed {
  margin-top: 40px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: #000;
  overflow: hidden;
}

.video-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

@media (max-width: 860px) {
  .video-embed { margin-top: 28px; }
}

/* Факт-строка первого экрана: старт, объём, формат, цена «від».
   Первая цена стояла на 74% глубины страницы — для платного трафика поздно. */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 0;
  max-width: 680px;
  margin: 28px 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: 16px;
  line-height: 1.4;
  color: var(--muted);
}

.hero-facts li + li::before {
  content: "·";
  margin: 0 12px;
  opacity: .5;
}

.hero-facts strong {
  color: var(--black);
  font-weight: 700;
}

/* На узком экране строка переносится и точка-разделитель уезжает в начало
   строки. Поэтому на мобильном — сетка 2×2 без разделителей. */
@media (max-width: 560px) {
  .hero-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    font-size: 14px;
  }
  .hero-facts li + li::before { content: none; }
}

/* Блок входа в квиз. Лежит скрытым, пока не задан data-quiz-url. */
.quiz-entry[hidden] { display: none; }

/* ---------- Шапка ----------
   Липкость — правило дизайн-системы (.site-header в styles.css).
   Здесь только сжатие при скролле и вторая ссылка рядом с «Написати». */
.site-header { transition: background var(--ease), border-color var(--ease); }

/* Высота шапки при прокрутке БОЛЬШЕ НЕ МЕНЯЕТСЯ [исправлено 01.09].
   Шапка стоит в потоке, и сжатие с 88 до 64px двигало содержимое вверх
   ровно на 24px — на столько же, сколько порог включения класса. Выходила
   петля: класс включился → страница поднялась → прокрутка ушла ниже порога →
   класс выключился → страница опустилась. Отсюда и мигание при малейшем
   скролле. Теперь при прокрутке меняются только цвета. */

.site-header.is-scrolled {
  background: #fff;
  border-bottom-color: var(--line);
  /* Тени в системе не используем [решение Ивана 01.09]: страница держится
     на плоских планах, линиях и рамках. Границей шапки при прокрутке
     работает линия, а не тень. */
  border-bottom: 1px solid var(--line);
}

.header-inner { transition: min-height var(--ease); }

.header-quiz, .header-cta { white-space: nowrap; }

/* На узком экране полная надпись выталкивает соседа за край экрана.
   Короткий вариант — отдельным словом, а не обрезкой: display:none
   скрывает лишнее и от экранного диктора.
   [правка 26.08] То же и для правой кнопки: после переименования
   «Написати» → «Запитати про участь» её правый край уехал на 406
   при ширине 375. */
.header-quiz .on-narrow,
.header-cta .on-narrow { display: none; }

@media (max-width: 480px) {
  .header-quiz .on-wide, .header-cta .on-wide { display: none; }
  .header-quiz .on-narrow, .header-cta .on-narrow { display: inline; }
}

.brand { transition: width var(--ease), height var(--ease); }

@media (max-width: 860px) {
  /* Знак при прокрутке тоже не уменьшается: та же петля, что и с высотой
     шапки — смена размера двигала содержимое и дёргала класс. */
}

@media (max-width: 420px) {
  .main-nav.is-standalone { gap: 12px; }
  .main-nav.is-standalone a,
  .main-nav.is-standalone .header-cta { font-size: 12px; }
  .main-nav.is-standalone .header-cta { padding: 8px 11px !important; }
}

/* ============================================================
   Раунд правок Ивана 2026-08-24 (_edits_raw_2026-08-24.md).
   Учёт и статусы — EDITS.md.
   ============================================================ */

/* 2.1 · «Але десь усередині…» отдельной строкой, с воздухом до и после.
   [правка CH-21 п.2, 02.09] Виктор: «в цьому блоці забагато різних шрифтів
   4 — я би щось спростив і зробив однаковим». Было четыре начертания:
   серый абзац, жирный чёрный, жирный заголовок плашки, светлый текст
   плашки. Стало два: жирный остался один — заголовок плашки «Це не
   навчання і не мотивація». Здесь акцент даёт не вес, а цвет и курсив;
   курсив — потому что это внутренний голос, реплика от «я» посреди
   страницы на «ви». */
.copy-turn {
  margin-top: 22px !important;
  font-weight: 400;
  font-style: italic;
  color: var(--black);
}

/* Текст плашки — тем же цветом, что абзац выше. Четвёртое начертание
   давал именно он: светло-серый против тёмного текста рядом. */
.section-soft .boundary-note span { color: var(--ink); }

/* [правка CH-21 п.5, 02.09] Светлана: модули читались 1-3-5 в первом
   столбце и 2-4-6 во втором — обычный порядок строк в сетке из двух
   колонок. Колоночный поток с тремя явными строками даёт 1-2-3 / 4-5-6.
   На телефоне столбец один, поэтому там поток возвращается построчный:
   иначе три строки развернулись бы в лишние колонки. */
.module-list { grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
@media (max-width: 860px) {
  .module-list { grid-auto-flow: row; grid-template-rows: none; }
}

/* 2.2 · Воздух после черты последнего пункта в списке признаков. */
.section-soft .signal-list { margin-bottom: 12px; }

/* 3.1 · Три вопроса репликами. Первая и третья слева, вторая справа —
   так читается как разговор с собой, а не как список. */
.chat-bubbles {
  display: grid;
  gap: 14px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}

.chat-bubbles li {
  max-width: min(560px, 82%);
  justify-self: start;
}

.chat-bubbles li.is-reply { justify-self: end; }

.chat-bubbles p {
  position: relative;
  margin: 0;
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-radius: 22px 22px 22px 4px;
  background: var(--white);
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.35;
}

.chat-bubbles li.is-reply p {
  border-radius: 22px 22px 4px 22px;
  border-color: var(--black);
  background: var(--black);
  color: var(--white);
}

@media (max-width: 560px) {
  .chat-bubbles li { max-width: 92%; }
  .chat-bubbles p { padding: 15px 18px; }
}

/* 3.2 и 4.3 · «Чем это не является» — отдельными пунктами с крестиками. */
.cross-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
}

.cross-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.cross-list li::before {
  content: "✕";
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  opacity: .75;
}

.boundary-note .cross-list { grid-column: 1 / -1; }

/* 4.2 · Суть пункта вперёд, слова Виктора — хвостом.
   Пункт списка — грид на две колонки (номер + текст), поэтому суть и хвост
   заворачиваются в одну обёртку: иначе хвост уезжает в третью колонку. */
.signal-list.is-lead .lead-body {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.signal-list.is-lead strong {
  display: block;
  font-weight: 700;
}

.signal-list.is-lead .lead-tail {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 16px;
  font-style: normal;
  line-height: 1.45;
}

/* 4.4 · Одиночная цитата — в рамке и с кавычкой, как в ленте отзывов. */
.quote-feature {
  position: relative;
  padding: 34px 32px 30px;
  border: 1px solid var(--line);
}

.quote-feature::before {
  content: "”";
  position: absolute;
  top: 6px;
  left: 26px;
  color: var(--green);
  font-size: 64px;
  line-height: 1;
}

.quote-feature blockquote { margin: 0; }

.section-dark .quote-feature { border-color: rgba(255, 255, 255, .28); }

/* Прямая речь Виктора — не отзыв. Рамку и кавычку отзыва не получает:
   иначе его собственное заявление читается как чей-то отклик. */
.quote-feature.is-author { padding: 0; border: 0; }
.quote-feature.is-author::before { content: none; }

@media (max-width: 560px) {
  .quote-feature { padding: 30px 20px 24px; }
  .quote-feature::before { left: 16px; }
}


/* 5.1 · Заголовок фазы без номера, по левому краю рамки модулей
   [правка Ивана 2026-08-25]. Номера 01–03 убраны из разметки:
   счёт и так идёт по модулям 01–06 внутри рамок. */
/* .phase-head и .route-phase сняты 27.08 вместе с разделением блока 05:
   фаза больше не заголовок группы модулей, а карточка в ряду. */

/* Текст фазы начинается на одной вертикали с номером 01 в карточках:
   у карточек padding-left те же 24px, номер стоит первым. */

/* ============================================================
   Перестройка 2–5 (правки Ивана 2026-08-24). Учёт — EDITS.md.
   ============================================================ */

/* Реплики: все белые, хвостик слева, ступенькой вправо и обратно.
   Один голос в три момента, а не диалог двух людей. */
.chat-bubbles li { justify-self: start; }
.chat-bubbles li.is-reply { justify-self: start; }

.chat-bubbles li.shift-0 { margin-left: 0; }
.chat-bubbles li.shift-1 { margin-left: 16%; }
.chat-bubbles li.shift-2 { margin-left: 28%; }

.chat-bubbles li.is-reply p,
.chat-bubbles li p {
  border-radius: 22px 22px 22px 4px;
  border-color: var(--green);
  background: var(--green);
  color: var(--black);
  font-weight: 400;
}

@media (max-width: 560px) {
  .chat-bubbles li.shift-1 { margin-left: 4%; }
  .chat-bubbles li.shift-2 { margin-left: 8%; }
}

/* Модули ушли с тёмной плоскости на светлую (блок 06), поэтому правила
   .section-dark .module-list сняты 27.08 — они больше ни на что не ложатся. */
.module-list h4 { margin: 0 0 8px; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.15; }

/* Формат і участь: три части в одной секции, между ними воздух. */
#packages .cohort-section { margin: 20px 0; }
#packages > .shell + .shell { padding-top: 0; }

.sub-head { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; }

/* Правило «нечётный последний модуль на обе колонки» снято: шесть модулей
   в одном списке дают ровные 2×3, нечётного хвоста не бывает. */

/* ============================================================
   Раунд 2 правок Ивана 2026-08-24.
   ============================================================ */

/* Хвост пункта «для кого» набирался акцидентным шрифтом: правило системы
   `.signal-list span` красит ЛЮБОЙ span внутри пункта, а не только номер.
   Возвращаем текстовый шрифт явно. */
.signal-list .lead-body,
.signal-list .lead-tail {
  font-family: var(--dc-font-sans, Montserrat, sans-serif);
}

.signal-list.is-lead .lead-tail {
  font-family: var(--dc-font-sans, Montserrat, sans-serif);
  font-size: 16px;
  line-height: 1.45;
}

/* Одиночная цитата — тот же компонент, что в ленте отзывов.
   Отличие одно: не растягивается на всю колонку. */
.dc-quote--inline {
  max-width: 760px;
  min-height: 0;
  margin-top: 44px;
}

.dc-quote--inline blockquote p { font-size: clamp(19px, 2vw, 26px); }

.section-dark .dc-quote { border-color: rgba(255, 255, 255, .28); }
.section-dark .dc-quote blockquote p { color: var(--white); }
.section-dark .dc-quote__author { color: rgba(255, 255, 255, .6); }

/* Лента отзывов: карточки уезжают за правый край страницы,
   а полоса прокрутки остаётся в ширине основных колонок и зелёная. */
.dc-rail__track {
  margin-right: calc(var(--x) * -1);
  scrollbar-width: none;
}

.dc-rail__track::-webkit-scrollbar { display: none; }

/* Атрибут hidden на стрелках ленты сам по себе НИЧЕГО не прячет
   [правка Ивана 02.09]. В общем assets/ds/blocks.css лежит
   `.dc-rail__nav { display: flex }` — авторское правило, а браузерное
   `[hidden] { display: none }` живёт в UA-таблице и проигрывает любому
   авторскому. app.js исправно ставил hidden, полоса прокрутки (у неё
   правила display нет) послушно исчезала, а стрелки оставались на месте.
   Селектор с атрибутом даёт (0,2,0) против (0,1,0) — этого хватает,
   !important не нужен. */
.dc-rail__nav[hidden] { display: none; }

.dc-rail__bar {
  position: relative;
  height: 4px;
  margin-top: 26px;
  background: var(--line);
  cursor: pointer;
}

.dc-rail__bar span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 48px;
  background: var(--green);
  transition: none;
}

.dc-rail__bar.is-dragging { cursor: grabbing; }

/* Видео в начале страницы: до клика — картинка с кнопкой, без запросов
   на сторонние домены. Клик подставляет плеер. */
.video-lead__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 32px 48px;
  align-items: center;
}

.video-lead__grid > div p { margin: 14px 0 0; color: var(--muted); font-size: 16px; line-height: 1.5; }

.video-poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  background: #000;
  cursor: pointer;
  overflow: hidden;
}

/* Обложка своя, из съёмки Виктора [правка Ивана 01.09]. Раньше сюда шла
   миниатюра с ютуба — внешний запрос ради картинки, которая и так у нас
   есть. Затемнение снято: кадр уже приглушён в самом файле, и второй слой
   делал его мутным. */
.video-poster img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: var(--ease); }
.video-poster:hover img { opacity: 1; }

.video-poster__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--green);
  color: var(--black);
  font-size: 24px;
  line-height: 1;
  transform: translate(-50%, -50%);
  transition: var(--ease);
}

.video-poster:hover .video-poster__play { transform: translate(-50%, -50%) scale(1.08); }

.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); }

@media (max-width: 860px) {
  .video-lead__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .video-poster__play { width: 62px; height: 62px; font-size: 20px; }
}

/* Блок «Формат і участь»: технічка и даты — таблицами, цена — отдельной панелью. */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  margin-top: 44px;
}

.table-label {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.facts-grid .footnote { margin-top: 16px; }

/* Две колонки только на десктопе. Без медиазапроса это правило перебивало
   стекание дизайн-системы: .cohort-panel у неё складывается в одну колонку
   на ≤860px, а моё правило шло позже и с той же специфичностью. */
@media (min-width: 861px) {
  .price-panel { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }
}

.price-panel .price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.price-grid article {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .28);
}

.price-grid article.is-deep { border-color: var(--green); }
.price-grid .eyeline { margin: 0 0 10px; }
.price-grid strong { color: var(--white); font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.price-grid s { color: rgba(255, 255, 255, .55); font-size: 14px; }
.price-grid span { margin-top: 10px; color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.45; }
.price-grid .button { margin-top: 18px; justify-self: stretch; padding-inline: 14px; text-align: center; }

@media (max-width: 860px) {
  .facts-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .price-panel .price-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Аккордеон: плюс рисуем сами, чтобы не тянуть картинку из дизайн-системы. */
.dc-faq__bar { width: 100%; gap: 24px; text-align: left; background: transparent; font-family: inherit; }

/* Правило выше перебивало подсветку раскрытого вопроса из дизайн-системы —
   бар оставался белым, а ответ под ним серым. Возвращаем. */
.dc-faq__item--open .dc-faq__bar { background: var(--dc-grey-050); }
.dc-faq__bar > span:first-child { flex: 1 1 auto; }

.dc-faq__plus {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  transition: transform .3s;
}

.dc-faq__plus::before,
.dc-faq__plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--black);
  transform: translateY(-50%);
}

.dc-faq__plus::after { transform: translateY(-50%) rotate(90deg); }

.dc-faq__item--open .dc-faq__plus { transform: rotate(45deg); }

.dc-faq__content { display: none; }
.dc-faq__item--open .dc-faq__content { display: block; }

/* ============================================================
   Раунд 3 правок Ивана 2026-08-24.
   ============================================================ */

/* Первый экран: фотография сверху, белый план снизу.
   Зелёная подложка под заголовком снята — её роль теперь у снимка. */
.page-hero--photo {
  display: block;
  min-height: 0;
  padding: 0 0 clamp(56px, 6vw, 96px);
}

.page-hero--photo .dc-bleed { background: none; }

.hero-photo {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 8vw, 118px);
  background: #0d1c10 url("img/hero-bg-min.webp") center 38% / cover no-repeat;
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .12) 45%, rgba(0, 0, 0, .34) 100%);
}

.hero-photo__inner { position: relative; z-index: 1; }

.hero-photo h1 { margin: 0; color: var(--white); }
.hero-photo h1 em { font-style: normal; }

/* Нижняя половина: слева текст, справа видео.
   [правка 26.08, Світлана] Было наоборот — текст читался приложением
   к ролику, хотя именно он объясняет, что такое «Траєкторія». */
.hero-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: start;
  padding-top: clamp(38px, 4vw, 58px);
}

.hero-lower .lead { max-width: none; margin: 0; }
.hero-lower .hero-facts { max-width: none; margin-left: 0; }
.hero-lower .page-actions { margin-top: 30px; }

.video-caption { margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Вторая строка лида [правка 2, комментарий Виктора 30.08]. Лид разведён на
   два абзаца: первый — что это (его подзаголовок с ноушена), второй — для
   кого и зачем. Одним абзацем в 23px это пять строк на первом экране.
   Кегль 17px уже есть в шкале, нового не заводим; вес тот же — иерархию
   даёт размер, а не начертание. */
.hero-sub {
  max-width: 620px;
  margin: 14px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
}


@media (max-width: 860px) {
  .hero-lower {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }
  /* На мобильном порядок обратный: текст и кнопки, видео последним. */
  .hero-lower__video { order: 1; }
  .hero-photo { padding-bottom: clamp(48px, 12vw, 84px); }
}

/* Маршрут: три фазы списком в заходе, подпись «Фаза N» над названием. */
.route-intro { display: grid; gap: 14px; }
.route-intro p { margin: 0; }
.route-intro ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
.route-intro li { color: var(--muted); font-size: 16px; line-height: 1.5; }

/* Метка фазы чёрная, а не зелёная: 11 пикселей зелёного на #f2f3f1
   дают контраст 1,6:1 — на светлом плане это нечитаемо. */
.phase-word {
  display: block;
  margin-bottom: 6px;
  color: var(--black);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* «На виході» — что человек уносит из модуля. Скрывали как повтор описания
   шага; Виктор в комментарии 14 сказал обратное — «не вистачає опису кожного
   модулю, з чим людина вийде». Возвращено [решение Ивана 31.08]. */
.module-outcome[hidden] { display: none; }

/* Селектор с двумя классами не для красоты: в styles.css стоит
   `.module-list p { margin: 0; color: var(--muted) }`, оно специфичнее
   одного класса и убивало и отступ, и цвет — «На виході» вставало вплотную
   к описанию и было с ним одного цвета. Найдено замером 31.08. */
.module-list .module-outcome {
  /* Отступ вдвое больше, чем между названием модуля и описанием (8px):
     «На виході» — отдельное утверждение, а не продолжение строки выше,
     и должно отцепляться глазом [правка Ивана 31.08]. */
  margin: 16px 0 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.module-list .module-outcome strong { font-weight: 700; }

/* Ячейка модуля жмётся к содержимому [правка Ивана 31.08]. В базовом стиле
   стоит min-height:170px, и при коротком описании низ ячейки оставался
   пустым — отступ сверху 28px, снизу вдвое больше. Теперь оба по 28px,
   и блок стал компактнее ровно на пустоту. */
.module-list li { min-height: 0; }

/* Кнопка маршрута — вправо на десктопе. */
@media (min-width: 861px) {
  #route .page-actions { justify-content: flex-end; }
}

/* Блок «Що лишиться з вами» — карточками в карусели.
   Компонент .depth-card перенесён со страницы орг-сессии прототипа. */
.depth-track { grid-auto-columns: minmax(300px, calc((100% - 48px) / 3)) !important; }

.depth-card {
  display: flex;
  flex-direction: column;
  /* Скрин 4 · Было 420px — карточка стояла наполовину пустой: текста в ней
     три-четыре строки [правка Ивана 31.08]. */
  min-height: 320px;
  /* 28/24 минус 2px рамки — та же линия, что у карточек без рамки. */
  padding: 26px 22px;
  border: 2px solid var(--black);
  scroll-snap-align: start;
}

.depth-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.depth-card-top span { font-family: var(--dc-font-display, Montserrat), sans-serif; font-size: 26px; letter-spacing: .08em; }
.depth-card-top small { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.depth-card h3 { margin: 40px 0 12px; line-height: 1.12; }
.depth-card > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.depth-card dl { margin: auto 0 0; padding-top: 24px; }
.depth-card dl div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.depth-card dl div:last-child { border-bottom: 1px solid var(--line); }
.depth-card dt { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.depth-card dd { margin: 0; font-size: 14px; }

.depth-card.depth-core { background: var(--green); border-color: var(--green); }
.depth-card.depth-core > p,
.depth-card.depth-core dt,
.depth-card.depth-core .depth-card-top small { color: rgba(5, 5, 5, .72); }
.depth-card.depth-core dl div { border-color: rgba(5, 5, 5, .25); }

@media (max-width: 860px) {
  .depth-track { grid-auto-columns: 84% !important; }
  .depth-card { min-height: 0; padding: 22px; }
  .depth-card h3 { margin-top: 28px; }
}

/* Сноска-оговорка: курсивом, отдельно от таблицы. */
.note-aside {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
}

#packages .dc-table { margin-top: 44px; }
#packages .format-facts { margin-bottom: 8px; }

.price-grid h4 {
  margin: 0 0 14px;
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

/* Блок «Хто веде»: зелёная плашка, на ней чёрно-белое вырезанное фото. */
.guide-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 48px;
  /* Плашка тянется на всю высоту ряда — её верх встаёт вровень
     с надзаголовком «10 Хто веде» [правка Ивана 28.08].
     Было align-items: end: плашка прижималась к низу, и сверху
     оставалось 77px пустого зелёного. */
  align-items: stretch;
}

.guide-plate {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 420px;
  padding-top: 32px;
  background: var(--green);
}

/* Фото занимает всю высоту плашки, ширина подстраивается по пропорции.
   Было 420px по ширине при исходнике 928×1100 — меньше половины
   оригинала, запас на увеличение большой. object-position прижимает
   фигуру к нижнему краю: Виктор «стоит» на плашке, а не висит. */
.guide-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: grayscale(1) contrast(1.05);
}

/* 28px, как в девяти остальных секциях: было 18px и ломало ритм
   открытия блока [ревизия отступов 28.08]. */
.guide-text .kicker { margin-bottom: 28px; }
.guide-text h2 { margin: 0 0 22px; }
.guide-text .lead { max-width: 620px; margin: 0 0 30px; }

.guide-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 24px 0;
  border-top: 2px solid var(--black);
  border-bottom: 1px solid var(--line);
}

.guide-facts strong {
  display: block;
  font-family: var(--dc-font-display, Montserrat), sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
}

.guide-facts span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.35; }

.guide-quote {
  margin: 28px 0 0;
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 400;
  line-height: 1.35;
}

/* Логотипы клиентов — ровной сеткой, серыми, без рамок. */
.logo-band { padding-top: 8px; }

/* ⟳ 2026-08-25: сетка сменена на бегущую ленту (два ряда на десктопе,
   три на мобильном); ряды строит app.js. */
.logo-row.logo-marquee {
  display: grid;
  gap: 28px;
  margin-top: 18px;
}

.logo-lane {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.logo-lane:active { cursor: grabbing; }

.logo-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  will-change: transform;
}

.logo-cell { display: grid; place-items: center; flex: none; height: 44px; width: 128px; }

.logo-cell img {
  max-width: 100%;
  max-height: 100%;
  filter: grayscale(1);
  opacity: .55;
  transition: var(--ease);
}

.logo-cell img:hover { opacity: 1; }

.button-ghost.is-light { background: transparent; border-color: var(--white); color: var(--white); }
.button-ghost.is-light:hover { background: var(--white); color: var(--black); }

@media (max-width: 860px) {
  .guide-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .guide-plate { min-height: 320px; }

  /* На узком экране плашка одна на всю ширину и растягивать фото по её
     высоте нечего: ширина колонки и задаёт размер, как было до правки. */
  .guide-plate img { height: auto; max-width: 420px; }
  .guide-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .logo-row.logo-marquee { gap: 20px; }
  .logo-track { gap: 44px; }
  .logo-cell { height: 36px; width: 104px; }
}

/* Подвал целиком зелёный. */
.site-footer { background: var(--green) !important; color: var(--black) !important; }

.site-footer .footer-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 32px 48px;
  align-items: center;
}

.footer-brand-mark { width: 104px; height: 54px; }
.footer-brand-mark img { width: 100%; height: 100%; object-fit: contain; }

.footer-lines { display: grid; gap: 6px; }
.footer-lines strong { font-size: 16px; font-weight: 700; }
.footer-lines span { color: rgba(5, 5, 5, .72); font-size: 14px; line-height: 1.45; }

.footer-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }

.site-footer .footer-links a {
  color: var(--black);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

.site-footer .footer-links a:hover { border-bottom-color: var(--black); }

.site-footer .footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(5, 5, 5, .25);
  color: rgba(5, 5, 5, .66);
  font-size: 14px;
}

@media (max-width: 860px) {
  .site-footer .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .site-footer .footer-bottom { flex-direction: column; gap: 6px; }
}

/* ============================================================
   Раунд 4 правок Ивана 2026-08-25.
   ============================================================ */

/* Аккордеон: строка вопроса — кнопка, а у кнопки есть своя рамка по
   умолчанию. Дизайн-система стилизует ссылку, поэтому там её нет и в
   спецификации она не упомянута. Отсюда прямоугольники вокруг вопросов. */
.dc-faq__bar {
  border: 0;
  border-bottom: 1px solid var(--dc-hairline);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}

.dc-faq__item--open .dc-faq__bar { border-bottom-color: transparent; }

/* Карточки цен по центру: подписи «формат перший/другий» сняты. */
.price-grid article {
  justify-items: center;
  padding: 28px 24px;
  text-align: center;
}

/* Заголовок второй карточки в две строки — без выравнивания цены
   встают на разной высоте. */
.price-grid h4 { margin: 0 0 18px; min-height: 2.5em; font-size: 16px; display: flex; align-items: center; }
.price-grid s { margin-top: 4px; }
.price-grid span { margin-top: 14px; }
.price-grid .button { justify-self: center; margin-top: 22px; }

/* Хайлайты: цифра и заголовок в одну строку — блок ниже на треть. */
.fact-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}

/* Система красит акцидентным шрифтом только прямого ребёнка article > span;
   обёртка .fact-head вывела цифру из-под селектора — возвращаем явно. */
.fact-head span {
  font-family: "Miratrix ua", Montserrat, sans-serif;
  font-size: 26px;
  line-height: 1;
}

.format-facts .fact-inline h3 { margin: 0 !important; }
.format-facts .fact-inline > p { margin: 0; }

/* Блок артефактов: светло-серая секция, карточки без рамок — только заливка. */
.artefacts-section .depth-card {
  border: 0;
  background: var(--white);
}

/* Зелёный на белом даёт 1,8:1 при норме 3:1. Тёмно-зелёный из набора
   дизайн-системы — 4,6:1 [ревизия цвета 28.08]. */
.artefacts-section .depth-card .depth-card-top span { color: var(--dc-green-deep); }
.artefacts-section .depth-card dl div { border-color: var(--line); }
.artefacts-section .depth-card.depth-core { background: var(--green); }
.artefacts-section .depth-card.depth-core .depth-card-top span { color: var(--black); }

@media (max-width: 860px) {
  /* Две карточки цен в узкой колонке не читаются — ставим одна под другой. */
  .price-panel .price-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .fact-head { gap: 10px; }
}

/* На узком экране «+» у последней плашки съедает место у слова. */
@media (max-width: 480px) {
  .format-facts .fact-inline:last-child .fact-head span { display: none; }
}

/* Лента отзывов красит свою подложку в белый — это план `light` дизайн-системы.
   На светло-серой секции артефактов она читается лишним прямоугольником:
   карточки и так белые. Подложку снимаем. */
.artefacts-section .dc-rail { background: transparent; }

/* Карточки форматов: выключка влево, а не по центру. */
.price-grid article {
  justify-items: start;
  text-align: left;
}

.price-grid h4 { min-height: 0; }
.price-grid .button { justify-self: start; }

/* Крестик у раскрытого вопроса уезжал влево на 40px.
   Причина: у бара стояла width: 100%. Дизайн-система выводит подложку за
   поля отрицательными margin и возвращает текст padding-ом — но с width:100%
   ширина берётся от контейнера, margin только сдвигает коробку, и правый
   край уходит внутрь на 20px, а padding добавляет ещё 20px. */
/* ⟳ 2026-08-25: width:auto чинил сдвиг крестика, но кнопка с width:auto
   сжимается по контенту — плюсы вставали кто где, а не в одну ось у правого
   края. Правильно: закрытый бар — 100% колонки; открытый, который выходит
   за поля отрицательными margin, — на 40px шире, чтобы правый край совпал. */
.dc-faq__bar { width: 100%; }
.dc-faq__item--open .dc-faq__bar { width: calc(100% + 40px); }

/* Финальный блок прилегает к подвалу: между тёмной панелью и зелёным
   подвалом была белая полоса — нижнее поле секции на белом фоне страницы. */
.final-section { padding-bottom: 0 !important; }

/* Зелёная плашка Виктора уходит до левого края страницы.
   Плашка — колонка сетки внутри оболочки, поэтому дотянуть её отрицательным
   полем нельзя: до края экрана оттуда неизвестно сколько. Дорисовываем
   продолжение псевдоэлементом, вылет ловит body { overflow-x: hidden }. */
.guide-plate::before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  bottom: 0;
  width: 100vw;
  background: var(--green);
}

/* ============================================================
   Раунд 10 (2026-08-25). Квиз — полная зелёная плашка.
   Белая карточка терялась на серой секции и выглядела служебной;
   зелёная полоса во всю ширину — фирменный ход системы, и здесь
   она подаёт второе действие страницы как продукт.
   ============================================================ */
.quiz-entry { background: var(--green); }

.quiz-band {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 32px 48px;
  align-items: center;
}

.quiz-entry .kicker { color: rgba(5, 5, 5, .62); }

.quiz-band h3 {
  margin: 14px 0 16px;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -.02em;
}

.quiz-band__meta {
  max-width: 560px;
  margin: 0;
  color: rgba(5, 5, 5, .72);
  font-size: 16px;
  line-height: 1.5;
}

.quiz-band__action {
  display: grid;
  gap: 20px;
  justify-self: end;
  justify-items: end;
  text-align: right;
}

.quiz-band__action .quiz-band__meta { max-width: 440px; }

/* Кнопка на зелёном — чёрная сплошная, как на зелёных плашках системы. */
.quiz-entry .button {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.quiz-entry .button:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

@media (max-width: 860px) {
  .quiz-band { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .quiz-band__action { justify-self: start; justify-items: start; text-align: left; }
}

/* Хайлайты формата ниже: системная карточка держит min-height 260px под
   вертикальную композицию «цифра сверху, слово внизу» — у нас цифра и слово
   в одну строку, и запас превращался в пустоту под текстом. */
#packages .format-facts article {
  min-height: 0;
  /* 28/24 — общий падинг плотных карточек [ревизия отступов 28.08]. */
  padding: 28px 24px;
}

/* Ряды двух карточек цен — в общих осях [правка Ивана]: заголовок второй
   в две строки, и без общей сетки цена, описание и кнопка съезжали.
   Subgrid делит ряды контейнера между обеими карточками. */
@media (min-width: 861px) {
  .price-panel .price-grid { grid-template-rows: repeat(5, auto); }

  .price-grid article {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    align-content: start;
  }

  .price-grid article > * { align-self: start; }
}

/* Между FAQ и «Хто веде» читалась «белая плашка»: это стык двух белых
   секций, у каждой по 116px вертикального поля. Нижнее поле FAQ ужато. */
.faq-layout.section-pad { padding-bottom: 32px; }

/* ============================================================
   Ревизия отступов [правка Ивана 2026-08-25]: вертикальный ритм
   чуть плотнее — один токен, чтобы все секции ужались равномерно.
   Было clamp(88px, 10vw, 156px) / 82px на мобильном.
   ============================================================ */
:root { --y: clamp(72px, 8vw, 116px); }

@media (max-width: 860px) {
  :root { --y: 64px; }
}

/* «Хто веде»: логотипы ближе к блоку с фото — между ними было два полных
   секционных поля (низ первого блока + верх второго). */
.guide-section .section-pad:first-child { padding-bottom: 28px; }
.guide-section .logo-band { padding-top: 0; }

/* 11 «Далі»: тёмный фон на всю ширину экрана. Секция теряет ограничение
   шелла, панель тянется от края до края, а содержимое возвращается на
   сетку шелла отступом: на широких экранах это половина свободного поля
   плюс обычный боковой отступ. */
/* Финал покрыт общим правилом .cohort-section выше. */

/* Оверлей опроса: квиз — настоящая страница, здесь она показывается
   поверх лендинга без перезагрузки. Свой крестик у квиза внутри. */
.quiz-overlay {
  position: fixed;
  z-index: 200;
  inset: 0;
  background: var(--white);
}

.quiz-overlay iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ============================================================
   Правки 26.08 по комментариям Светланы.
   Разбор и вес каждого — CHANGELOG_2026-08-26.md рядом с файлом.
   Способ везде взят из системы: где предложенный способ спорил
   с палитрой или шкалой, менялся способ, а не задача.
   ============================================================ */

/* 5.1 · Кикер «Коли це на часі» просили сделать заметнее.
   Размер не трогаем: 11px — токен --dc-size-micro, шкала капс-подписей,
   он один на все двенадцать блоков. Берём контрастом: #707070 на #f2f3f1
   давало ~4,4:1 при норме 4,5 — кикер формально не проходил по
   читаемости. Чёрный решает и заметность, и это.
   [правка 26.08, вторая] Первая версия правила была без :not() и перебила
   .kicker-light из styles.css — специфичность та же, а этот файл грузится
   позже. Чёрный текст лёг на три тёмные плоскости: первый экран, блок 05
   и финал; на блоке 05 фон #050505, то есть надпись пропала совсем.
   Теперь тёмные плоскости правило не трогает вовсе. */
.kicker:not(.kicker-light) { color: var(--black); }

/* 5.1a · На тёмном надзаголовок белый вместо #a7a7a7 [правка Ивана 26.08].
   Серый там читался как выключённый; номер рядом остаётся зелёным. */
.kicker-light { color: var(--white); }

/* 5.2 · «Але десь усередині щімляче відчуття, що:» стояло далеко от
   пунктов, и весь акцент забирал заголовок «Життя мчить уперед».
   Подводка прижимается к списку — акцент уходит на сами ситуации. */
.intro-grid.section-pad { padding-bottom: clamp(16px, 1.6vw, 24px); }
.intro-grid .section-copy { padding-top: 40px; }
.copy-turn { margin-top: 26px !important; }

/* 5.3 · Фильтр отказа на плашке. Красных крестиков не делаем — красного
   в палитре нет. Вес даёт белая плашка с рамкой на сером фоне секции,
   чёрные крестики вместо серых и кегль body вместо small. */
.boundary-note--plate {
  margin-top: 44px;
  padding: clamp(24px, 3vw, 34px);
  background: var(--white);
  border: 2px solid var(--black);
}

.boundary-note--plate strong { font-size: 16px; }
.boundary-note--plate .cross-list li { color: var(--black); font-size: 16px; }
.boundary-note--plate .cross-list li::before { color: var(--black); opacity: 1; }

/* 5.4 · Цену не зачёркиваем: зачёркнутое число читается как уценка.
   Вместо него строка словами — видно, что 999 € это ранняя цена. */
.price-when {
  margin-top: 6px;
  color: rgba(255, 255, 255, .62);
  font-size: 14px;
  line-height: 1.4;
}

/* 5.5 · Кнопки посередине страницы: между блоком 05 и ценами было
   3,6 экрана без единого действия. */
.mid-cta { margin-top: clamp(34px, 4vw, 52px); }

/* 5.6 · Текст слева, видео справа — правка сделана в самом правиле
   .hero-lower выше, а не перекрытием здесь: правило в хвосте файла
   било бы и по медиазапросу мобильной раскладки. */


/* ============================================================
   Разделение блока 05 [правка Ивана 2026-08-27].
   Фазы и модули стояли в одном блоке: три заголовка фаз, под каждым
   свой кусок списка — 3 + 2 + 1. Ряды рвались, читалось как каша.
   Теперь фазы — свой ряд карточек на тёмном (блок 05), модули —
   ровная матрица 2×3 на светлом (блок 06).
   ============================================================ */

/* 6.1 · Три фазы в строку. Рамки собираются в одну сетку, как в
   .module-list: линия сверху и слева у контейнера, справа и снизу
   у карточек — тогда на стыках не двоится. */
/* [правка Івана 27.08] Фазы переехали с чёрного плана на светло-серый:
   блок 04 слит с составом модулей и стал одноцветным. Белые границы и
   белый текст заменены на линии и чёрный — иначе на сером не видно. */
.phase-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--black);
  border-left: 1px solid var(--line);
}

.phase-card {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 28px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.phase-card h3 {
  margin: 0;
  color: var(--black);
  font-size: clamp(19px, 1.8vw, 27px);
  line-height: 1.15;
}

/* Описание фазы [правка Ивана 31.08]. Виктор просил добавить в названия фаз
   «цінності», «картину майбутнього» и «конкретні кроки» — в заголовке это
   давало пять-семь слов и разваливало ряд из трёх карточек. Заголовок
   остаётся глаголом в два-три слова, добавленное живёт здесь.
   Кегль 16px — уже есть на странице (11 применений), нового не заводим:
   выше строки модулей (14px), ниже заголовка. auto снизу прижимает строку
   с модулями к низу — три карточки держат общую нижнюю линию, как и раньше. */
/* Селектор с двумя классами не для красоты: выше по файлу стоит
   `.phase-card p`, оно специфичнее одного класса и перебивало и прижатие
   вниз, и цвет. */
.phase-card .phase-note {
  margin: 12px 0 auto;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
}

/* Тем же правилом `.phase-card p` был убит и кегль строки модулей: в её
   собственном правиле стоит 14px, а рендерилось 16px — то есть описание и
   состав модулей выглядели одинаково, без всякой иерархии. Возвращаем то,
   что было задумано автором правила [найдено замером 31.08]. */
.phase-card .phase-modules {
  color: var(--muted);
  font-size: 14px;
}

.phase-modules {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* 6.2 · На узком экране три колонки не живут: 375 px делится на 125.
   Фаза становится компактной строкой — метка слева, название и состав
   справа. Три строки вместо трёх карточек в полтора экрана. */
@media (max-width: 860px) {
  .phase-row {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 30px;
    border-left: 0;
    border-top-width: 2px;
  }

  .phase-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 16px;
    min-height: 0;
    padding: 16px 0;
    border-right: 0;
  }

  .phase-card .phase-word { margin: 0; }
  .phase-card h3 { margin: 0; font-size: 19px; }
  /* В компактной строке описание и состав идут во второй колонке, под
     названием: метка «Фаза 1» остаётся слева и ни с чем не спорит.
     Два класса — чтобы перебить `.phase-card p`; с одним правило мёртвое.
     Кегль здесь не меняем: 16px тот же, что на широком, — лишний размер
     в шкалу не заводим. */
  .phase-card .phase-note { grid-column: 2; margin: 6px 0 0; }
  .phase-modules { grid-column: 2; margin-top: 6px; }
}

/* ============================================================
   ВЕРСИЯ 2 ЛЕНДИНГА (2026-08-27).
   Только то, чего не было в версии 1: полосы с репликами на стыках
   блоков и сетка нового блока 06 «Групова динаміка».
   Всё выше этой черты — общее с версией 1 и не тронуто.
   ============================================================ */

/* Полоса реплик на стыке блоков. Своя, а не .section-pad: между
   блоком и репликами нужен воздух меньше секционного, иначе полоса
   читается отдельной секцией, а не хвостом предыдущей мысли. */
/* Полоса на шве двух планов [подход Ивана 27.08].
   Реплики не свисают из соседней секции — они стоят на собственной
   полосе, у которой фон двухцветный: верхняя половина одного плана,
   нижняя другого. Граница цвета режет средний баббл.

   Почему так, а не отрицательным отступом (как было до 27.08):
     · работает одинаково на любой ширине и на мобильном;
     · не зависит от того, куда уведена стопка по горизонтали;
     · не надо чинить схлопывание отступов (display: flow-root).

   Отступы полосы обязательно симметричны: только тогда середина стопки
   совпадает с серединой полосы, где стоит граница цвета. Поэтому воздух
   у шва даёт сама полоса, а соседние секции свой отступ с этой стороны
   снимают — правило ниже. */
.seam-band {
  /* 47% — не «половина», а замер: реплики переносятся по-разному на
     разной ширине, и середина стопки гуляет. На 375 идеал 43,7%, на
     600–1081 — 47%, на 1440 — 50%. Одно число 47% держит шов внутри
     второй реплики на всех четырёх: запас ±6% от высоты полосы. */
  --seam-split: 47%;
  padding-block: var(--y);
  background: linear-gradient(to bottom,
    var(--seam-from) 0 var(--seam-split),
    var(--seam-to) var(--seam-split) 100%);
}

/* Вопросы ведущего: с серого на белый. Середина стопки попадает
   в середину полосы — граница режет вторую реплику. */
.seam-band--questions {
  --seam-from: var(--soft);
  --seam-to: var(--white);
}

/* Голоса участников: обратно, с белого на серый. Здесь первая реплика
   самая длинная, поэтому середина стопки уезжает в неё — шов сдвинут
   ниже, чтобы попадал во вторую. */
.seam-band--voices {
  --seam-from: var(--white);
  --seam-to: var(--soft);
  --seam-split: 51%;
}

/* Сосед сверху не даёт нижнего отступа, сосед снизу — верхнего. */
.section:has(+ .seam-band) { padding-bottom: 0; }
.section:has(+ .seam-band) > .section-pad { padding-bottom: 0; }
.seam-band + .section { padding-top: 0; }
.seam-band + .section > .section-pad { padding-top: 0; }

.seam-band .chat-bubbles { margin-top: 0; }

/* Стопка вопросов уведена вправо, чтобы не спорить с заголовком
   следующего блока — он стоит слева. */
.seam-band--questions .chat-bubbles { padding-left: 44%; }
.seam-band--questions .chat-bubbles li { max-width: 100%; }
.seam-band--questions li.shift-0 { margin-left: 4%; }
.seam-band--questions li.shift-1 { margin-left: 0; }
.seam-band--questions li.shift-2 { margin-left: 26%; }

/* На узком экране стопка возвращается влево: ширины на сдвиг нет.
   Шов при этом остаётся — он не зависит от горизонтали. */
@media (max-width: 860px) {
  .seam-band--questions .chat-bubbles { padding-left: 0; }
  .seam-band--questions li.shift-0 { margin-left: 0; }
  .seam-band--questions li.shift-1 { margin-left: 4%; }
  .seam-band--questions li.shift-2 { margin-left: 8%; }
}

/* На телефоне третья реплика переносится в три строки, стопка становится
   тяжёлой снизу и её середина уезжает вверх. Без поправки шов сползал
   к нижнему краю второй реплики — здесь замеренные 44%. */
@media (max-width: 560px) {
  .seam-band--questions { --seam-split: 44%; }
}

/* Голоса участников — белые реплики с тонкой чёрной обводкой.
   Отличие от зелёных в блоке 02 намеренное: там голос ведущего
   задаёт вопросы, здесь отвечают те, кто уже прошёл. */
.chat-bubbles--voices li { max-width: min(620px, 86%); }

.chat-bubbles--voices li p {
  border: 1px solid var(--black);
  background: var(--white);
  color: var(--black);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.4;
}

/* 05 · Групповая динамика. Мозаика [правка Ивана 27.08, четвёртая].

   Взято из карты бизнес-модели (образец Ивана): плитки разного размера,
   сплошные заливки вместо разлиновки, акцентная зелёная и чёрная плитки,
   вложенные тайлы внутри одной карточки.

   Не взято, сознательно:
     · номера в углу — сняты предыдущей правкой Ивана; на карте они
       индекс рубрики, здесь обещали бы последовательность, которой нет;
     · подписи заголовков капслоком 11px — на карте заголовок это имя
       рубрики («ПАРТНЁРЫ»), а здесь он несёт мысль («Провідник, а не
       лектор») и должен читаться заголовком. Капслок сплющил бы блок
       в схему. Кегли остались страничные: h3 24–31px, текст 16px.
   Капслоком набраны только вложенные тайлы — там подпись действительно
   ярлык, и длина строки та же, что в образце.

   Высоты по требованию Ивана: правая колонка своим гридом 1fr/1fr, поэтому
   «Коло своїх» и «Провідник» всегда равны между собой, а их сумма равна
   сумме «Дзеркало» + «Комбінація підходів». */
.group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 14px;
  margin-top: 46px;
}

.group-col {
  display: grid;
  grid-row: 1 / 3;
  grid-column: 2;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  min-height: 0;
}

.group-grid > .group-card:first-child { grid-column: 1; grid-row: 1; }
.group-card--outline { grid-column: 1; grid-row: 2; }
.group-card--wide { grid-column: 1 / -1; }

.group-card {
  min-width: 0;
  padding: 32px;
  background: var(--soft);
}

/* Кегль снят: базовый h3 даёт тот же шаг (31,7px на 1440 против 31).
   Своя лесенка была лишней — правка №1 шрифтовой ревизии 28.08. */
.group-card h3 {
  margin: 0 0 12px;
  line-height: 1.12;
}

.group-card p {
  max-width: 520px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

/* Зелёная — ядро блока: то, чего работа один на один не даёт вовсе.
   Текст на зелёном чёрный, как на плашке опроса. */
.group-card--accent { background: var(--green); }
.group-card--accent p { color: var(--black); }

/* Белая с обводкой — единственная карточка с вложенными тайлами;
   на образце так же выделена та, что содержит вложения. */
.group-card--outline {
  background: var(--white);
  border: 2px solid var(--black);
  /* На 2px меньше соседей: рамку карточка съедает снаружи,
     содержимое встаёт на общую линию. */
  padding: 30px;
}

/* Чёрная — граница. Другой регистр: не ценность, а правило. */
/* Пятая плитка [правка Ивана 31.08, комментарий Виктора 21]. Была чёрной —
   Виктор: «за-мрачний, я би брав зелений». Стала прозрачной с зелёной
   рамкой: заливки нет вовсе, сквозь плитку идёт белый план секции.
   Зелёный так работает контуром, а не пятном — «Дзеркало» остаётся
   единственной сплошной зелёной, и акцент не двоится.
   Рамка 4px, а не 2px как у белой плитки [решение Ивана 31.08]. Причина
   измеренная: зелёный на белом даёт контраст 1,82:1 против 20:1 у чёрной
   рамки соседа — на тусклом экране контур в 2px пропадал бы вовсе.
   Толщину набираем там, где не хватает цвета.
   Паддинг на 4px меньше базовых 32px — рамку карточка съедает снаружи,
   содержимое встаёт на общую линию с соседями. */
.group-card--wide {
  padding: 28px;
  background: transparent;
  border: 4px solid var(--green);
}

.group-card--wide h3,
.group-card--wide p { color: var(--black); }
.group-card--wide p { max-width: 760px; }

/* Вложенные тайлы: имя режима и ярлык под ним. */
.group-modes {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.group-modes li {
  padding: 14px 16px;
  background: var(--soft);
}

.group-modes b {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.group-modes span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .group-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    margin-top: 30px;
  }

  /* Столбец распускается: на одной колонке делить высоту не с чем. */
  .group-col {
    display: contents;
  }

  .group-grid > .group-card:first-child,
  .group-card--outline,
  .group-card--wide { grid-column: auto; grid-row: auto; }

  .group-card { padding: 24px 22px 28px; }
  .group-card--outline,
  .group-card--wide { padding: 22px 20px 26px; }
}

@media (max-width: 560px) {
  .chat-bubbles--voices li { max-width: 100%; }
  .chat-bubbles--voices li p { padding: 15px 18px; }
}

/* Промежуточный заголовок внутри блока 04 [правка Ивана 27.08].
   Надзаголовок «05 Склад програми» снят вместе со слиянием блоков —
   вместо него одна строка над матрицей. Кегль подобран между двумя
   уровнями, которые уже есть на странице: меньше главного h2
   (44–84px) и заметно больше названий фаз (21–27px) и модулей (21px). */
.sub-head {
  margin: clamp(56px, 6vw, 88px) 0 22px;
  color: var(--black);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
}

/* Кнопка идёт за матрицей модулей, а не за фазами — воздуха нужно больше. */
.module-list + .page-actions { margin-top: 48px; }

@media (max-width: 560px) {
  .sub-head { margin-top: 46px; }
}


/* ============================================================
   ПРАВКИ ПО СКРИНАМ ИВАНА, 2026-08-31
   ============================================================ */

/* Скрин 5 · Логотипы. Лента клиентов клипуется своим контейнером
   (.logo-lane { overflow: hidden }) — это марки, так и задумано. Но клип
   стоял по краю колонки текста, и логотипы обрезались посреди страницы,
   как будто их подрезали. Лента выходит на боковые отступы шелла: на
   экране до 1440 клип попадает на край экрана и читается как уход за
   кадр, а не как обрезка. */
.guide-section .logo-band .logo-row.logo-marquee {
  margin-inline: calc(var(--x) * -1);
}

/* Скрин 6 · Лента артефактов. Дорожка вылетала за правый край страницы
   (margin-right: -x), и четыре карточки укладывались в неё ровно —
   scrollWidth совпадал с clientWidth, прокрутки не было, стрелки честно
   прятались. Но на экране уже 1440 четвёртая карточка уезжала за край
   и становилась недостижимой: докрутить до неё было нечем.
   Вылет для этой ленты снят. Дорожка встаёт по колонке, четыре карточки
   в неё не помещаются, появляется прокрутка — и стрелки, которым теперь
   есть что делать. Карточки заодно стали шире: 320px → 406px на 1440.
   У ленты отзывов вылет остаётся: там четыре длинные цитаты и прокрутка
   есть и так. */
.artefacts-section .dc-rail--bleed .dc-rail__track {
  margin-right: 0;
}

/* Скрин 1 · Четыре артефакта встают в ряд целиком, без прокрутки и без
   обрезки [правка Ивана 31.08]. Прошлый заход делал «три с четвертью»,
   чтобы стрелкам было что двигать, — но резать четвёртую карточку ради
   работающих стрелок неправильно: стрелки нужны, когда содержимого
   больше экрана, а тут его ровно четыре.
   Лента на широком экране перестаёт быть лентой: обычный грид на четыре
   колонки, прокрутки нет, стрелки прячутся сами (draw() в app.js).
   Ниже 1080 возвращается прокрутка — четыре карточки туда не встают. */
@media (min-width: 1081px) {
  .artefacts-section .dc-rail__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto !important;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

/* Ширина карточки здесь задаётся явно, а не процентом. В базовом правиле
   стоит `calc((100% - 48px) / 3)`, но в горизонтально прокручиваемом гриде
   с auto-flow: column процент не разрешается — ширина падала на нижнюю
   границу minmax, к 300px, и четыре карточки не влезали ровно на 24px.
   Прокрутка была, но бессмысленная. Проверено замером на 1800.
   24vw даёт три карточки целиком и четвёртую на четверть: видно, что
   лента едет дальше, и стрелкам есть что двигать. */
@media (max-width: 1080px) {
  .artefacts-section .depth-track {
    grid-auto-columns: clamp(280px, 72vw, 360px) !important;
  }
}


/* Скрины 8 и 9 · Надзаголовок стал плашкой [правка Ивана 31.08].
   Раньше это была строка мелким капслоком того же серого, что и текст
   вокруг, — она терялась. Плашка отделяет её от заголовка и держит
   ритм блоков.

   Цвет плашки идёт от фона под ней, а не от типа блока:
     · светлый и чёрный фон — плашка зелёная;
     · зелёный фон — плашка белая, зелёное на зелёном не видно.
   Текст на плашке всегда чёрный. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 6px;
  color: var(--black);
  background: var(--green);
}

/* На зелёной плашке опроса — белая. */
.quiz-entry .kicker { color: var(--black); background: var(--white); }

/* Над фото и на чёрной панели финала — та же зелёная: по правилу цвет
   задаёт фон, а фото и чёрное здесь одного разряда. */
.kicker-light { color: var(--black); background: var(--green); }


/* Скрин 2 · Ячейка модуля стала кнопкой: описание ушло во всплывающее окно,
   в списке остаётся тема и результат. Кнопка лежит поверх всей ячейки —
   так кликается вся плитка, а не подпись под ней. */
.module-list li { position: relative; transition: background var(--ease); }

/* Скрин 3 · Ховер ярко-зелёный [правка Ивана 31.08]. Было 9% зелёного —
   на светло-сером фоне блока это не читалось как отклик вовсе. */
.module-list li:hover { background: var(--green); }
.module-list li:hover .module-outcome,
.module-list li:hover h4,
.module-list li:hover > span { color: var(--black); }

/* На мобильном ховера нет: подсвечивается тот модуль, который сейчас
   в середине экрана. Класс ставит app.js. */
.module-list li.is-centered { background: var(--green); }
.module-list li.is-centered .module-outcome,
.module-list li.is-centered h4,
.module-list li.is-centered > span { color: var(--black); }

.module-open {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.module-open:focus-visible { outline: 2px solid var(--black); outline-offset: -4px; }

/* Стрелка-подсказка, что ячейка открывается. Рисуется псевдоэлементом:
   лишнего узла в разметке не добавляем. */
.module-list li::after {
  content: "↗";
  position: absolute;
  top: 26px;
  right: 22px;
  color: var(--muted);
  font-size: 15px;
  transition: var(--ease);
}

.module-list li:hover::after { color: var(--black); }

/* ============================================================
   Всплывающие окна [скрины 4 и 7]
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.is-open { display: flex; }

.modal__back { position: absolute; inset: 0; background: rgba(5, 5, 5, .58); }

.modal__panel {
  position: relative;
  width: min(680px, 100%);
  /* Высота одна у всех окон [правка Ивана 31.08]: они читаются как один
     компонент, и при листании модулей рамка не дёргается. Прокрутка —
     внутри содержимого, не у панели. */
  height: min(86vh, 720px);
  overflow: hidden;
  padding: clamp(26px, 4vw, 44px);
  background: var(--white);
}

.modal--calendar .modal__panel { width: min(760px, 100%); }

/* Высота календаря — по содержимому [правка Ивана 31.08]. У окна модуля
   она фиксированная, потому что там текст меняется при листании и рамка
   бы дёргалась. Здесь содержимое одно и то же, и лишний воздух под
   сеткой выглядел как незаполненное окно. */
.modal--calendar .modal__panel { height: auto; max-height: min(86vh, 760px); overflow: auto; }
.cal { display: flex; flex-direction: column; }

.modal__x {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  color: var(--black);
  background: transparent;
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
}

.modal__x:hover { color: var(--black); }

/* ---------- Окно модуля ---------- */
/* Высота фиксированная и общая с календарём [правка Ивана 31.08]: при
   листании модулей окно больше не прыгает под длину текста, а два разных
   окна не выглядят двумя разными компонентами. Содержимое, которое не
   влезло, прокручивается внутри — прыгает текст, а не рамка. */
.mm { display: flex; flex-direction: column; height: 100%; }

.mm__top {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* В плашке только номер фазы; её название стоит рядом, без заливки. */
.mm__phase { padding: 6px 10px; color: var(--black); background: var(--green); }
.mm__phase-name { color: var(--muted); }

/* Полоса из шести делений — единственный индикатор места в маршруте. */
.mm__bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 18px 0 26px; }
.mm__bar i { height: 4px; background: var(--line); transition: background var(--ease); }
.mm__bar i.is-done { background: var(--black); }

.mm__head { margin-bottom: 20px; }
.mm__title { margin: 0; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; }
.mm__sub { margin: 8px 0 0; color: var(--muted); font-size: 15px; }

.mm__scroll { flex: 1; overflow: auto; }

.mm__block { padding-top: 18px; border-top: 1px solid var(--line); }
.mm__block + .mm__block { margin-top: 20px; }
.mm__block b { display: block; margin-bottom: 10px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mm__block p { margin: 0; font-size: 16px; line-height: 1.5; }

.mm__block ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.mm__block li { position: relative; padding-left: 18px; font-size: 16px; line-height: 1.45; }
.mm__block li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background: var(--green); }

.mm__block--out p { font-weight: 700; }

.mm__nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 22px; }

.mm__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--black);
  color: var(--black);
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  transition: var(--ease);
}

.mm__arrow:hover:not([disabled]) { color: var(--black); background: var(--green); border-color: var(--green); }
.mm__arrow[disabled] { opacity: .28; cursor: default; }

@media (max-width: 560px) {
  /* Плашка фазы и её название стоят в одну строку и на узком экране
     [правка Ивана 31.08]. Чтобы длинное название не рвало строку, оно
     сжимается и обрезается многоточием — плашка при этом не сдавливается. */
  .mm__phase { flex: none; }
  .mm__phase-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
}

/* ---------- Окно календаря ---------- */
.cal__title { margin: 0 0 8px; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; }
.cal__sub { margin: 0 0 26px; color: var(--muted); font-size: 16px; }

/* Месяцы — лента с прокруткой, а не сетка [правка Ивана 31.08].
   На широком экране три месяца встают в ряд и прокручивать нечего:
   стрелки прячутся сами, как у ленты артефактов. На узком видно один
   месяц целиком, а соседние выглядывают краем — так понятно, что лента
   продолжается, и стрелки не приходится искать. */
.cal__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.cal__grid::-webkit-scrollbar { display: none; }

/* Месяц — карточка на светло-сером [правка Ивана 31.08]. Так зелёные дни
   встреч читаются как метки на плане, а не как пятна на белом, и соседний
   месяц виден именно карточкой: понятно, что лента продолжается. */
.cal__month {
  min-width: 0;
  padding: 18px 16px 20px;
  background: var(--soft);
  /* По центру, а не к краю: на октябре тогда выглядывают и сентябрь слева,
     и ноябрь справа — видно, что календарь есть в обе стороны. */
  scroll-snap-align: center;
}

@media (max-width: 720px) {
  /* 78% — месяц читается целиком, а по краям остаётся по кусочку соседа. */
  .cal__grid { grid-auto-columns: 78%; gap: 12px; }
  /* Боковых отступов у ленты нет намеренно. Пара padding + отрицательный
     margin считалась от разных баз и не сходилась: лента вылезала за панель
     на 3px, и всё окно ехало вбок. А нужды в ней нет — привязка по центру
     и так даёт то, что требовалось: на жовтні видно вересень слева и
     листопад справа, а крайние месяцы честно встают к своему краю. */
}

/* Стрелки — те же, что у лент на странице. Прячутся, когда лента
   помещается целиком.
   Пар две: в шапке — для широкого экрана, под лентой — для узкого. В шапке
   на мобильном они наезжали на подзаголовок, под лентой стоят там, где
   листают, и ничего не задевают. */
.cal__nav { display: flex; gap: 8px; }
.cal__nav[hidden] { display: none; }
.cal__nav--under { display: none; margin-top: 18px; }

@media (max-width: 720px) {
  .cal__head .cal__nav { display: none; }
  .cal__nav--under:not([hidden]) { display: flex; }
}

.cal__nav button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  aspect-ratio: 1;
  border: 2px solid var(--black);
  border-radius: 0;
  color: var(--black);
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  transition: var(--ease);
}

.cal__nav button:hover { color: var(--black); background: var(--green); border-color: var(--green); }

.cal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.cal__head > div { min-width: 0; }
.cal__month b { display: block; margin-bottom: 12px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

.cal__week, .cal__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__week s { color: var(--muted); font-size: 10px; font-weight: 700; text-align: center; text-decoration: none; text-transform: uppercase; }

.cal__days i {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  color: var(--ink);
  font-size: 13px;
  font-style: normal;
}

/* День встречи — зелёный квадрат: та же метка, что и строка дат в таблице. */
.cal__days i.is-on { font-weight: 700; color: var(--black); background: var(--green); }

.cal__list { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 700; }

/* Перечень по месяцам — строкой на месяц, как в таблице на странице.
   Показывается вместо сплошной строки на узком экране. */
.cal__list--rows { display: none; }
.cal__row { display: flex; gap: 8px; padding: 4px 0; font-weight: 400; }
.cal__row b { font-weight: 700; }

@media (max-width: 720px) {
  .cal__list:not(.cal__list--rows) { display: none; }
  .cal__list--rows { display: block; }
}
.cal__note { margin: 8px 0 0; color: var(--muted); font-size: 13px; font-style: italic; }

.calendar-cta { margin-top: 22px; }

@media (max-width: 560px) {
  .modal { padding: 0; }
  .modal__panel { width: 100%; height: 100dvh; }

  /* Календарь и на узком экране по содержимому, а не на весь экран
     [правка Ивана 31.08]: месяцы идут лентой по одному, и растягивать
     панель под пустоту не за чем. Прижат к низу — так до стрелок
     дотягивается большой палец. */
  .modal--calendar { align-items: flex-end; }
  .modal--calendar .modal__panel { height: auto; max-height: 92dvh; }
  .module-list li::after { top: 18px; right: 14px; }
}


/* Шапка ленты отзывов [правка Ивана 31.08]. Надпись «Голоси групи» снята,
   в ряду остались одни стрелки — а у ряда стоит space-between, и он прижал
   их к левому краю. Ставим на место: у ленты артефактов слева всё ещё есть
   надпись, там правило не трогаем. */
.dc-rail__head:not(:has(.dc-section__overline)) { justify-content: flex-end; }


/* ============================================================
   ПРАВКИ ИВАНА 31.08 — вторая пачка
   ============================================================ */

/* Зазор между заголовком блока и описанием. У .split-head стоит gap: 60px —
   на широком экране это расстояние между колонками, и оно правильное. На
   узком колонки схлопываются в одну, и тот же gap становится вертикальным
   провалом в 60px между h2 и текстом под ним. */
@media (max-width: 860px) {
  .split-head { gap: 24px; }
}

/* Перечень дат в календаре: полные названия на широком, сокращённые до трёх
   букв на узком. Обе строки лежат в разметке, показывается одна. */
.cal__list--short { display: none; }

@media (max-width: 720px) {
  .cal__list--full { display: none; }
  .cal__list--short { display: block; }
}

.cal__list b { font-weight: 700; }

/* Видео первого экрана на всю ширину окна [правка Ивана 31.08]: на узком
   боковые отступы шелла отрезали от кадра по 20px с каждой стороны, и ролик
   выглядел вставкой, а не частью экрана. */
@media (max-width: 860px) {
  .hero-lower__video { margin-inline: calc(var(--x) * -1); }
  .hero-lower__video .video-caption { padding-inline: var(--x); }
}


/* ============================================================
   РИТМ ОТСТУПОВ И ШАПКА — правки Ивана 31.08, третья пачка
   ============================================================ */

/* Единый ритм заголовков по всей странице: плашка → заголовок 28px,
   заголовок → описание 24px. До этой правки так было только в блоках
   с .section-head; блок «Коли це на часі» и плашка опроса устроены
   иначе и жили по своим числам — 88px и 42px соответственно. */

/* Блок «Коли це на часі»: на узком экране колонки схлопываются в одну,
   и горизонтальный gap 48px вместе с оптическим padding-top 40px давал
   провал в 88px под заголовком. На широком оба нужны — правило только
   для узкого. */
@media (max-width: 860px) {
  .intro-grid { gap: 24px; }
  .intro-grid .section-copy { padding-top: 0; }
}

/* Плашка опроса: своя сетка со своим шагом. Заголовок и текст лежат в
   РАЗНЫХ ячейках, поэтому зазор складывался из двух: row-gap сетки плюс
   собственный margin-bottom заголовка. Получалось 40px вместо 24. */
.quiz-band { row-gap: 24px; }
.quiz-band .kicker { margin-bottom: 28px; }
.quiz-band h3 { margin-top: 0; margin-bottom: 0; }

/* Финал: здесь наоборот — описание стояло вплотную к заголовку. */
.final-section .cohort-panel h2 { margin-bottom: 24px; }

/* Реплики на шве опускаются ниже [правка Ивана 31.08, только десктоп].
   Полоса и её высота не меняются — двигается стопка внутри неё, а вместе
   с ней и граница цвета: она обязана и дальше резать вторую реплику,
   ради этого её положение и подбиралось замером. */
@media (min-width: 1081px) {
  .seam-band--questions { --seam-split: 56%; padding-top: 155px; padding-bottom: 75px; }
}


/* Нижняя граница кнопки в шапке [найдено 31.08]. Причина, по которой низ
   кнопки выглядел обрезанным, оказалась не в высоте шапки: правило
   `.main-nav.is-standalone a { border-bottom: 0 }` — оно из мобильного меню,
   где ссылки разделяются линиями, — специфичнее собственного правила кнопки
   и снимало у неё нижнюю границу. Рамка рисовалась с трёх сторон, и коробка
   читалась открытой вниз. Возвращаем. */
/* currentColor, а не чёрный: на прозрачной шапке кнопка белая, и жёстко
   заданная чёрная граница снизу выглядела обрубком. */
.main-nav.is-standalone a.header-cta { border-bottom: 2px solid currentColor; }


/* Кнопки листания прижаты к низу окна и не прыгают [правка Ивана 31.08].
   Панель занимала всю высоту экрана, но между ней и содержимым стоял
   .modal__body — обычный блок высотой по тексту. Из-за него `.mm { height:
   100% }` считалась от 494px вместо 844, и кнопки вставали сразу под
   текстом: у модуля 02 на 520px, у модуля 06 на 568px. Протягиваем колонку
   насквозь — панель, тело, содержимое, — и свободное место забирает блок
   прокрутки, а не низ окна. */
.modal__panel { display: flex; flex-direction: column; }
.modal__body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mm { flex: 1; min-height: 0; }

/* Календарь высоту по содержимому сохраняет: расти ему некуда, и flex-grow
   на нём ничего не меняет. */
.cal { flex: 1; min-height: 0; }


/* ============================================================
   ПЕРВЫЙ ЭКРАН — направление A [решение Ивана 01.09]
   Кадр на всю высоту, текст на нём снизу, видео поверх границы.
   ============================================================ */

/* Кадр уходит ПОД шапку. Шапка стоит в потоке (sticky), поэтому без этого
   первый экран начинался бы под ней, и сверху оставалась бы светлая полоса —
   ровно то, от чего мы уходили. Секция поднимается на высоту шапки, а
   внутренний отступ такой же величины возвращает текст на место. */
.page-hero--cover {
  position: relative;
  /* Минус 1px сверх высоты шапки — это её нижняя граница. Переменная
     --header-height даёт 88px, а сама шапка занимает 89: граница входит в
     высоту, но не в переменную. Из-за расхождения сверху оставалась белая
     полоска в один пиксель — фон страницы между краем окна и кадром. */
  margin-top: calc(-1px - var(--header-height, 88px));
  padding: 0;
  /* У .page-hero стоит overflow: hidden — он и срезал нижнюю половину видео,
     которая по замыслу свисает на соседний блок. Кадр внутри клипует себя
     сам (.hero-cover), так что фотография никуда не вылезет. */
  overflow: visible;
}

.hero-cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Высокие окна кадр не растягивает [решение Ивана 01.09]. На ноутбуке
     (окно ~560 в высоту) остаётся ровно 100svh — экран и так плотный. На
     27-дюймовом (~970) кадр обрезается примерно на 120px: воздуха там было
     на лишнюю треть экрана, а следующий блок начинался за краем окна.
     Слагаемое 24vh держит пропорцию на очень высоких окнах — на 1440 кадр
     остаётся на две трети экрана, а не превращается в полосу.
     Перелом там, где 100svh = 620 + 24vh, то есть на 816px: ниже правило
     не работает вовсе. Содержимое прижато книзу, поэтому вместе с высотой
     вверх уезжают и текст, и свисающее видео. */
  min-height: min(100svh, 620px + 24vh);
  padding: var(--header-height, 88px) 0 clamp(70px, 9vh, 130px);
  overflow: hidden;
  background: var(--black) url("img/hero-bg-min.webp") center / cover no-repeat;
}

/* Затемнение двумя концами: густое снизу — под текстом, лёгкое сверху —
   под шапкой. Верхнее не для красоты: знак и кнопка там белые, а верх
   кадра светлее низа, и без него они пропадают на светлом склоне. */
.hero-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, .45) 0%, rgba(5, 5, 5, 0) 22%),
    linear-gradient(180deg, rgba(5, 5, 5, .18) 30%, rgba(5, 5, 5, .62) 62%, rgba(5, 5, 5, .86) 100%);
}

/* Ширину держат сами строки, а не обёртка. У .shell стоят автоотступы —
   с max-width на нём весь блок уезжал в центр экрана вместо левого края. */
.hero-cover__inner { position: relative; z-index: 1; color: var(--white); }
.hero-cover h1 { max-width: 820px; }

.hero-cover h1 { margin: 20px 0 0; color: var(--white); }
.hero-cover h1 em { font-style: normal; }

.hero-cover .lead { max-width: 660px; margin: 26px 0 0; color: var(--white); }
.hero-cover .hero-sub { max-width: 620px; margin: 12px 0 0; color: rgba(255, 255, 255, .8); }

/* Надзаголовок здесь без плашки: зелёный прямоугольник на фото спорил
   с кадром, а белым капслоком строка читается и так. */
/* Два класса в селекторе не для красоты: выше стоит
   `.kicker:not(.kicker-light) { color: var(--black) }` — из-за :not() оно
   специфичнее одного класса и красило надзаголовок в чёрный поверх фото. */
.kicker.kicker-bare {
  display: block;
  padding: 0;
  color: var(--white);
  background: transparent;
}

/* Факты одной строкой через точку, равным шагом. Сетка на четыре колонки
   растягивала их по всей ширине, и промежутки выходили разной длины. */
.hero-facts--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  max-width: none;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
}

.hero-facts--inline li { margin: 0; }
.hero-facts--inline li + li::before { content: "·"; margin-right: 14px; color: rgba(255, 255, 255, .4); }

/* Зазор до кнопок вдвое больше, чем между строками текста: кнопки —
   другое действие, и они не должны читаться продолжением абзаца. */
.hero-cover .page-actions {
  /* margin-left: 0 — обязателен: у .page-actions в другом месте стоит
     автоотступ слева, чтобы прижимать кнопки к правому краю. Здесь он
     уводил их под видео. */
  margin: 52px auto 0 0;
  max-width: none;
}

/* Видео выходит за нижнюю границу кадра и заходит на серый блок под ним.
   Отрицательный отступ ровно на половину его высоты — так наезд одинаков
   на любой ширине, а высота считается от ширины через 16:9. */
/* Видео вынуто из потока: иначе оно наращивало высоту первой секции, и его
   нижняя половина ложилась на белое поле этой же секции, а не на серый блок
   под ней. Теперь оно висит на нижней границе кадра и половиной заходит на
   соседа — как и задумано. Сдвиг задан процентом от собственной высоты:
   translateY(50%) — ровно половина, без арифметики. Через calc с min()
   не считается: min() внутри calc в трансформации не разрешается, и сдвиг
   выходил другим — проверено замером. */
.hero-video {
  position: absolute;
  /* Правый край видео стоит на той же линии, что текст и кнопка в шапке
     [правка Ивана 01.09]. Раньше здесь был просто var(--x) — отступ от края
     окна, а не от рамки контента; на широком экране видео уезжало за неё на
     две сотни пикселей. Формула повторяет геометрию .shell один в один:
     width:min(100%,--max) + margin-inline:auto даёт по краям ровно половину
     остатка, плюс собственный padding-inline. */
  right: calc((100% - min(100%, var(--max))) / 2 + var(--x));
  bottom: 0;
  z-index: 2;
  /* Ширина — доля рамки контента, а не фикс [правка Ивана 01.09]. Раньше
     стояло min(530px, 100% - --x*2): второе слагаемое включается только ниже
     722px, а мобильная раскладка начинается на 860 — то есть видео не
     уменьшалось никогда и на 900px кнопка «Умови і вартість» уходила под
     него. Доля берётся от той же рамки, что у .shell, поэтому работает
     одинаково и до потолка --max, и после него. */
  width: min(530px, calc((min(100%, var(--max)) - var(--x) * 2) * 0.425));
  transform: translateY(50%);
}

/* Секция под первым экраном отступает от свисающего видео. Отступ ДОБАВЛЯЕТСЯ
   к её собственному (.section-pad уже даёт --y), поэтому здесь нужна только
   разница, а не полная величина: раньше стояло 200px, и вместе с --y выходило
   167px воздуха над заголовком — слишком много [правка Ивана 01.09]. */
.page-hero--cover + .section { padding-top: clamp(88px, 7.6vw, 124px); }

/* Видео возвращается в поток раньше остальной мобильной раскладки — на 960,
   а не на 860 [правка Ивана 01.09]. В полосе 861–960 карточка с наездом
   ужималась до 316px и подходила к кнопке «Умови і вартість» на 12px: и
   мелко, и впритык. Во всю ширину там и крупнее, и без гонки за место. */
@media (max-width: 960px) {
  .hero-video { position: static; width: 100%; transform: none; }
  .hero-video .video-poster { border-left: 0; border-right: 0; }
  .page-hero--cover + .section { padding-top: 0; }
}

@media (max-width: 860px) {
  /* На узком кадр ниже и плотнее: видео уже в потоке (см. точку 960 выше). */
  .hero-cover { min-height: 88svh; padding-bottom: 44px; }
  .hero-cover__inner { max-width: none; }

  .hero-facts--inline { gap: 10px 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-facts--inline li + li::before { content: none; }

  .hero-cover .page-actions { margin-top: 40px; }
}


/* Шапка на первом экране прозрачная [решение Ивана 01.09]. Белая полоса
   над кадром резала фотографию пополам — теперь шапка лежит поверх неё.
   Знак и кнопка белые; при прокрутке всё переворачивается в чёрное на
   белом. Оба знака лежат в разметке, показывается один — переключать
   заливку у одного svg нечем. */
/* Прозрачная шапка — значит совсем прозрачная: ни фона, ни размытия, ни
   линии. В базовых стилях у .site-header стоит backdrop-filter: blur(12px)
   и граница снизу — над фотографией это давало мутную полосу с чертой. */
.site-header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}

.brand { position: relative; }
.brand img { position: absolute; inset: 0; transition: opacity var(--ease); }
.brand .brand-dark { opacity: 0; }
.brand .brand-light { opacity: 1; }

.site-header .header-cta { color: var(--white); border-color: var(--white); }
.site-header .header-cta:hover { color: var(--black); background: var(--white); }

.site-header.is-scrolled .brand .brand-dark { opacity: 1; }
.site-header.is-scrolled .brand .brand-light { opacity: 0; }
.site-header.is-scrolled .header-cta { color: var(--black); border-color: var(--black); }
.site-header.is-scrolled .header-cta:hover { color: var(--white); background: var(--black); }

/* ============================================================
   Подвал: ссылки на документы. Заявка CH-14.
   Подвал тёмный, поэтому цвет не из светлой части палитры.
   ============================================================ */
.footer-docs { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-docs a { color: #aaa; text-decoration: none; border-bottom: 1px solid #333; }
.footer-docs a:hover { color: var(--green); border-color: var(--green); }