/* ─────────────────────────────────────────────────────────────────────
   Страница-лекция Анны Ващенко.

   Лейаут снят с VSL «Товарщики»: центрированный первый экран
   (лейбл → заголовок → буллиты → видео → кнопка), ниже лонгрид в
   колонке 700px, фото и схемы выходят на 940px, снизу липкая кнопка.

   Палитра — светлая версия её фирменной: белая бумага, почти чёрный
   текст, золото на акцентах. Золото на белом берётся темнее, чем на
   чёрном фоне квиза: светлое #e9b44c даёт на белом 1.9:1 и не
   читается. В тексте #8f6411 (4.9:1), светлое — только линии и заливки.
───────────────────────────────────────────────────────────────────── */

:root {
  /* Лист тёплый, карточки на нём белые - так собран лонгрид Дианы.
     Белый экран с бежевыми островами выглядел недоделанным. */
  --paper: #f3eee8;
  --surface: #ffffff;
  --surface-2: #e9e0d2;
  --ink: #16130f;
  --ink-2: #3c3630;
  --muted: #6b6459;
  --line: #e8e1d5;
  --line-2: #d6ccbb;

  --gold: #c69a3f;
  --gold-text: #8f6411;
  --gold-dark: #7a550c;
  --mark: rgba(233, 180, 76, 0.55);

  --h: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --b: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Ширина строки как у Дианы: 660px текста при 700px контейнера.
     Длиннее строка - тяжелее читать. */
  --col: 660px;
  --mid: 820px;
  --wide: 940px;

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17.5px/1.66 var(--b);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 760px) {
  body {
    font-size: 19px;
  }
}

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

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--gold-text);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

::selection {
  background: var(--mark);
}

/* ─── Колонки и ритм ──────────────────────────────────────────────── */

.col,
.mid,
.wide {
  width: 100%;
  margin-inline: auto;
  padding-inline: 20px;
}

.col {
  max-width: calc(var(--col) + 40px);
}

.mid {
  max-width: calc(var(--mid) + 40px);
}

.wide {
  max-width: calc(var(--wide) + 40px);
}

/* У Дианы до заголовка 64px. У нас было 86: сумма нижнего и верхнего
   поля секции плюс отступ шапки главы. Ужимаем до тех же 60. */
section {
  padding-block: clamp(18px, 2.6vw, 26px);
}

/* Тонированных глав больше нет: тон фона не меняется нигде по
   странице - иначе лонгрид распадается на острова. Класс оставлен,
   чтобы не править разметку, но фон он не трогает.
   Роман, 2 ноября 2026: «тон везде... не меняется тон, это важно». */
.tint {
  background: none;
}

.stack {
  display: grid;
  gap: 17px;
}

.stack-lg {
  display: grid;
  gap: 28px;
}

.center {
  text-align: center;
}

.center .lab,
.center .lab-grey,
.center .tag {
  justify-self: center;
}

/* Плашка над заголовком - как в лонгриде Дианы. */
.tag {
  display: inline-block;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 9px 18px;
  font: 600 13.5px/1.4 var(--b);
  color: var(--ink-2);
}

/* ─── Типографика ─────────────────────────────────────────────────── */

h1,
h2,
h3 {
  font-family: var(--h);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink);
}

h1 {
  font-size: clamp(28px, 4.8vw, 44px);
  line-height: 1.12;
}

h2 {
  font-size: clamp(24px, 3.4vw, 33px);
}

h3 {
  font-size: clamp(20px, 2.6vw, 23px);
  font-weight: 700;
}

p {
  margin: 0;
  overflow-wrap: break-word;
}

.sub {
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.55;
  color: var(--ink-2);
}

.small {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

strong {
  font-weight: 700;
  color: var(--ink);
}

em {
  font-style: italic;
  color: var(--ink-2);
}

/* Маркер по ключевым фразам — главный приём «живости» текста. */
mark {
  background: linear-gradient(180deg, transparent 58%, var(--mark) 58%);
  color: inherit;
  padding: 0 1px;
}

.lab {
  display: inline-block;
  font: 700 11px/1 var(--h);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.lab-grey {
  display: inline-block;
  font: 700 11px/1 var(--h);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── Прогресс чтения ─────────────────────────────────────────────── */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  z-index: 50;
  transition: width 0.1s linear;
}

/* ─── Первый экран ────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(30px, 4.4vw, 52px) clamp(30px, 4vw, 46px);
}

.hero h1 u {
  text-decoration: none;
  color: var(--gold-text);
}

.hero .sub {
  max-width: 620px;
  margin-inline: auto;
}

/* Контейнера-рамки нет: каждый пункт - своя карточка, как в лонгриде
   Дианы. Так список читается по одному пункту, а не стеной текста. */
.gets {
  display: grid;
  gap: 14px;
  text-align: left;
}

.gets ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

/* Маркер выносится абсолютом, а не колонкой грида: при гриде любой
   <strong> внутри пункта становится отдельным элементом сетки, и
   остаток текста уезжает в колонку шириной 16px - по слову в строку. */
.gets li {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px 16px 46px;
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.gets li::before {
  content: '→';
  position: absolute;
  left: 20px;
  top: 17px;
  font: 700 13px/1.5 var(--h);
  color: var(--gold-text);
}

.gets a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}

.gets a:hover {
  color: var(--ink);
  border-color: var(--gold);
}

/* ─── Видео ───────────────────────────────────────────────────────── */

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--paper);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 46px -22px rgba(22, 19, 15, 0.45);
}

.player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player-empty {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  color: #cfc6b5;
}

.player-empty b {
  font: 800 15px/1 var(--h);
  color: var(--gold);
}

.player-empty span {
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 360px;
}

/* Плеер свой: <video> на весь кадр, поверх него слой для клика и
   полоса по нижнему краю. Всё лежит в .player-stage - в обычном виде
   сцена совпадает с рамкой, в полном экране вписывается в экран.

   Кадр нигде не масштабируем: разрешение отдаётся как есть. Серая
   рамка, вшитая в ролик, из-за этого видна - убрать её можно только
   пересборкой самого файла. */
.player-stage {
  position: absolute;
  inset: 0;
}

.player-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #15120e;
}

.player-tap {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: transparent;
  display: grid;
  place-items: center;
  transition: background 0.25s ease;
}

.player.playing .player-tap {
  background: transparent;
}

.player-tap-btn {
  width: clamp(64px, 9vw, 88px);
  height: clamp(64px, 9vw, 88px);
  border-radius: 50%;
  background: linear-gradient(135deg, #dfb054, var(--gold) 55%, #a87f22);
  box-shadow: 0 14px 34px -10px rgba(22, 19, 15, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.5);
  display: grid;
  place-items: center;
  transition: transform 0.18s ease, opacity 0.25s ease;
}

.player-tap-btn::before {
  content: '';
  width: 0;
  height: 0;
  border-left: clamp(20px, 2.6vw, 26px) solid #1a1407;
  border-top: clamp(13px, 1.7vw, 17px) solid transparent;
  border-bottom: clamp(13px, 1.7vw, 17px) solid transparent;
  margin-left: clamp(5px, 0.7vw, 7px);
}

.player-tap:hover .player-tap-btn {
  transform: scale(1.07);
}

/* Во время просмотра кнопку убираем: клик по кадру ставит паузу. */
.player.playing .player-tap-btn {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

/* Панель «продолжить с…». Лежит выше слоя клика, иначе нажатие на неё
   просто включало бы видео. Тёмная подложка нужна потому, что кадр под
   ней может быть любым: на светлом белая ссылка не читается. */
.player-resume[hidden] {
  display: none;
}

.player-resume {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 12px;
  width: max-content;
  max-width: 88%;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(10, 9, 8, 0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.player-resume-go {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #dfb054, var(--gold) 55%, #a87f22);
  color: #1a1407;
  font: 700 14.5px/1 var(--h);
  padding: 13px 20px;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.6);
}

.player-resume-go b {
  font-weight: 800;
}

.player-resume-alt {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.92);
  font: 600 13.5px/1 var(--b);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px 6px;
}

.player-resume-alt:hover {
  color: var(--gold);
}

/* Когда предлагаем продолжить, большую кнопку убираем: две сразу
   только спорят друг с другом. */
.player.has-resume .player-tap-btn {
  opacity: 0;
  pointer-events: none;
}

/* Полоса лежит на нижнем крае кадра, как панель у обычного плеера.
   Сама полоса кликов не ловит, чтобы не мешать клику по кадру, -
   поэтому кнопкам возвращаем pointer-events отдельно. */
.player-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 44px 14px 12px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(10, 9, 8, 0.4) 45%,
    rgba(10, 9, 8, 0.88)
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* До первого запуска кадр чистый: ни полосы, ни кнопок. */
.player.started .player-bar {
  opacity: 1;
}

.player-bar-track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* Заливка полосы. Её ширину считает скрипт - не линейно, форма задана
   VBAR_CURVE в index.html. */
.player-bar-fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #f0cd82);
  transition: width 0.4s linear;
}

.player-rate {
  flex: 0 0 auto;
  pointer-events: auto;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(10, 9, 8, 0.72);
  color: #f6f1e9;
  font: 700 12.5px/1 var(--h);
  letter-spacing: 0.02em;
  padding: 7px 11px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.player-rate:hover,
.player-rate.on {
  border-color: var(--gold);
  color: var(--gold);
}

.player-full {
  flex: 0 0 auto;
  pointer-events: auto;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  background: rgba(10, 9, 8, 0.72);
  color: #f6f1e9;
  width: 32px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.player-full svg {
  width: 15px;
  height: 15px;
}

.player-full:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* Полный экран на компьютере и iPad. Кадр вписывается целиком, без
   растягивания: разрешение не трогаем. На экране 16:10 сверху и снизу
   останутся поля - так же, как в любом другом плеере.
   На iPhone откроется системный плеер Apple, это его ограничение. */
.player:fullscreen,
.player:-webkit-full-screen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.player:fullscreen .player-stage,
.player:-webkit-full-screen .player-stage {
  position: relative;
  inset: auto;
  width: min(100%, calc(100vh * 16 / 9));
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
}

/* В полном экране панель крупнее: на мониторе прежние 6 px полосы
   читаются как волосок. */
.player:fullscreen .player-bar,
.player:-webkit-full-screen .player-bar {
  padding: 72px 30px 24px;
  gap: 18px;
}

.player:fullscreen .player-bar-track,
.player:-webkit-full-screen .player-bar-track {
  height: 9px;
}

.player:fullscreen .player-rate,
.player:-webkit-full-screen .player-rate {
  font-size: 15px;
  padding: 10px 15px;
}

.player:fullscreen .player-full,
.player:-webkit-full-screen .player-full {
  width: 42px;
  height: 39px;
}

.player:fullscreen .player-full svg,
.player:-webkit-full-screen .player-full svg {
  width: 19px;
  height: 19px;
}

.vnote {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  align-items: center;
  justify-content: center;
  font: 500 13.5px/1.45 var(--b);
  color: var(--muted);
}

.vnote i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

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

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: 21px 24px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #dfb054, var(--gold) 55%, #a87f22);
  color: #1a1407;
  font: 800 18px/1.2 var(--h);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(168, 127, 34, 0.8);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn svg {
  flex: none;
  opacity: 0.9;
}

.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold-dark);
  outline-offset: 3px;
  border-radius: 6px;
}

.btn:active {
  transform: translateY(0);
}

.bnote {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  text-align: center;
  max-width: 540px;
  margin-inline: auto;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}

.trust span {
  font: 500 13px/1 var(--b);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 9px 13px;
  color: var(--ink-2);
}

/* Главный блок страницы. Карточку (белый фон, рамка, тень, золотая
   полоса сверху) пробовали 2 ноября 2026 и убрали в тот же день:
   страница должна читаться как лонгрид, а не как лендинг с островами.
   У Дианы в этом месте нет никакого контейнера - фон один и тот же от
   начала до конца, работают только жирный заголовок, полоса слева у
   списка и кнопка. Фон здесь не менять. */
.cta {
  margin-top: 40px;
}

.cta .in {
  display: grid;
  gap: 16px;
}

.cta .checklist {
  gap: 18px;
}

.cta .btn {
  margin-top: 6px;
}

/* ─── Главы ───────────────────────────────────────────────────────── */

.chapter {
  scroll-margin-top: 20px;
}

/* Блоки главы идут через тот же интервал, что и абзацы. Нужно затем,
   чтобы при выпавшем фото (файла ещё нет - блок удаляется скриптом)
   текст до и после не слипался в один абзац. Инлайновые margin-top в
   разметке перебивают это правило там, где нужен больший отступ. */
.chapter > div + div {
  margin-top: 16px;
}

/* Между главами нет линеек: статья читается одним потоком. */
.chapter + .chapter {
  border-top: 0;
}

.chapter-head {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-bottom: 21px;
  padding-top: clamp(22px, 4vw, 38px);
  text-align: center;
}

/* Абзацы короткие и идут плотно: ритм держат они сами, а не рамки. */
.body-text {
  display: grid;
  gap: 16px;
}

.body-text p {
  color: var(--ink);
}

.body-text h3 {
  margin-top: 30px;
  color: var(--ink);
}

/* ─── Списки ──────────────────────────────────────────────────────── */

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

.list li {
  position: relative;
  padding-left: 28px;
  color: var(--ink-2);
  line-height: 1.6;
}

.list li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  font: 700 13px/1.6 var(--h);
  color: var(--gold-text);
}

.box {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(20px, 2.6vw, 28px);
  display: grid;
  gap: 18px;
}

.box-title {
  font: 700 17px/1.4 var(--h);
  color: var(--ink);
}

/* ─── Акценты и цитаты ────────────────────────────────────────────── */

/* Акцент у Дианы - не плашка, а просто крупная жирная строка.
   Рамок на странице и так хватает: карточки, схемы, практика. */
.accent {
  margin-block: 10px;
}

.accent p {
  font: 700 clamp(19px, 2.5vw, 24px) / 1.38 var(--h);
  letter-spacing: -0.015em;
  color: var(--ink);
}

.accent p + p {
  margin-top: 12px;
}

.quote {
  border: 1px solid var(--line-2);
  border-radius: 16px;
  padding: 20px 24px;
  font-size: clamp(17px, 2.1vw, 18.5px);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.55;
}

/* ─── Фото ────────────────────────────────────────────────────────── */

figure {
  margin: 0;
  display: grid;
  gap: 10px;
}

figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

/* Квадратный студийный портрет во всю колонку выглядит огромным -
   ограничиваем ширину и ставим по центру. */
.photo-portrait {
  max-width: 420px;
  margin-inline: auto;
}

.photo-portrait > img {
  border-radius: 14px;
}

figcaption {
  font: 400 15px/1.55 var(--b);
  color: var(--muted);
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
}

/* Схемы вырезаны с её слайдов: круг программы, «знание и реакция»,
   лестница. Шире текстовой колонки, а на телефоне почти во всю ширину
   экрана - иначе подписи внутри картинки становятся нечитаемыми. */
.sketch {
  width: min(960px, calc(100vw - 24px));
  /* Центрируем по экрану, а не по колонке: иначе блок шире родителя
     уезжает вправо и тянет за собой горизонтальную прокрутку. */
  margin-left: 50%;
  transform: translateX(-50%);
}

.chapter > div.sketch,
.chapter > div.banner,
.sketch {
  margin-block: 26px;
}

.sketch img {
  width: 100%;
  height: auto;
  border-radius: 18px;
}

/* Высокие схемы на всю ширину колонки занимают целый экран и давят.
   Им отдельная, более узкая мера. */
.sketch--narrow {
  width: min(680px, calc(100vw - 24px));
}

@media (max-width: 640px) {
  .sketch {
    width: calc(100vw - 12px);
  }
  .chapter > div.sketch,
  .chapter > div.banner,
  .sketch {
    margin-block: 20px;
  }
}

/* Баннер - визуальный стоп посреди текста: одна сильная строка, на
   длинной странице глазу нужны такие остановки. Плашка была тёмной
   (--ink со светлым текстом) - это самая сильная смена тона на
   странице, и 2 ноября 2026 её убрали вместе с остальными: тон фона
   один на весь лонгрид. Остановку держат крупный кегль и золотая
   полоса слева - тот же приём, что у списка в оффере Дианы.
   Фото справа необязательно: пока файла нет, скрипт убирает рамку. */
.banner {
  width: min(960px, calc(100vw - 24px));
  /* Центрируем по экрану так же, как схемы. Блок должен лежать прямо
     в .chapter: внутри .body-text это грид-элемент, и процентный
     margin там не отрабатывает - баннер уезжает вправо. */
  margin-left: 50%;
  transform: translateX(-50%);
  margin-block: 32px;
  background: none;
  border-left: 3px solid var(--gold);
  border-radius: 0 18px 18px 0;
  overflow: hidden;
  display: grid;
}

@media (min-width: 760px) {
  .banner:has(.banner-photo) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  }
}

.banner p {
  margin: 0;
  padding: clamp(26px, 4vw, 44px);
  font: 800 clamp(21px, 3vw, 30px) / 1.3 var(--h);
  letter-spacing: -0.02em;
  color: var(--ink);
  align-self: center;
}

.banner-photo {
  margin: 0;
  min-height: 220px;
}

.banner-photo img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}

/* Кейс идёт сразу за своим этапом, как на слайдах 108-113. Слева
   текст, справа её сторис - это левая и правая половины её слайда. */
.case-block {
  display: grid;
  gap: 16px;
}

@media (min-width: 900px) {
  .case-block {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start;
  }
}

/* Сторис клиенток: «точка А» и «точка Б» рядом, как на её слайдах.
   Колонка одна - в две пара сжимается до нечитаемого мелкого шрифта. */
.stories {
  display: grid;
  gap: 26px;
}

.story {
  display: grid;
  gap: 10px;
}

.story-pair {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
}

.story img,
.story-pair img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
}

.story--single {
  max-width: 460px;
  margin-inline: auto;
}

/* Две фотографии рядом. На слайде они были склеены в одну картинку -
   здесь это два отдельных файла в своём разрешении, и на телефоне
   каждая переносится в свою строку. */
.photo-pair {
  display: grid;
  gap: 12px;
}

@media (min-width: 620px) {
  .photo-pair {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.photo-pair img {
  border-radius: 14px;
}

/* Кадры вырезаны со слайдов лекции: у них свой бежевый фон, скруглённые
   углы и просветы между снимками. Лист страницы теперь того же цвета,
   поэтому поля и просветы просто растворяются в нём. */
.photo-slide img {
  background: var(--paper);
  border-radius: 18px;
  padding: clamp(10px, 1.8vw, 18px);
}

/* ─── Автор ───────────────────────────────────────────────────────── */

.author {
  display: grid;
  gap: 22px;
}

@media (min-width: 700px) {
  .author {
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
  }
}

.author-photo {
  border-radius: 14px;
  border: 1px solid var(--line);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

.author-text {
  display: grid;
  gap: 16px;
}

.facts {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.facts div {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}

.facts div:last-child {
  border-bottom: 0;
}

.facts b {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  text-align: right;
}

/* ─── Схема: круг программы ───────────────────────────────────────── */

.scheme {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(20px, 2.6vw, 28px);
  display: grid;
  gap: 20px;
}

.cycle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.cycle li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}

.cycle b {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--gold);
  font: 700 12px/1 var(--h);
  color: var(--gold-text);
}

.cycle li:not(:last-child) b::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1px;
  height: 12px;
  background: var(--gold);
}

.cycle-loop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px dashed var(--gold);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--gold-text);
}

.cycle-loop span {
  font-size: 18px;
  line-height: 1;
}

/* ─── Три этапа ───────────────────────────────────────────────────── */

.stages {
  display: grid;
  gap: 14px;
}

@media (min-width: 760px) {
  .stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.stage {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.stage-no {
  font: 700 11px/1 var(--h);
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--gold-dark);
  padding: 7px 9px;
  border-radius: 5px;
  justify-self: start;
}

.stage b {
  font: 700 16px/1.35 var(--h);
  color: var(--ink);
}

.stage p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

/* ─── Пять убеждений ──────────────────────────────────────────────── */

.beliefs {
  display: grid;
  gap: 14px;
  counter-reset: belief;
}

@media (min-width: 820px) {
  .beliefs {
    grid-template-columns: 1fr 1fr;
  }
  .beliefs article:last-child {
    grid-column: 1 / -1;
  }
}

.belief {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  display: grid;
  gap: 12px;
  align-content: start;
}

/* Номер нужен не для красоты: в практике «Стоп-кадр» мы спрашиваем,
   какое из пяти убеждений включилось, и его надо чем-то назвать. */
.belief h3 {
  position: relative;
  padding-left: 38px;
}

.belief h3::before {
  counter-increment: belief;
  content: counter(belief);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold-dark);
  color: #fff;
  font: 700 13px/26px var(--h);
  text-align: center;
}

.belief h3 {
  font-size: 18px;
  line-height: 1.32;
}

.belief p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}

.belief .who {
  border-left: 2px solid var(--gold);
  padding-left: 14px;
  font-size: 16px;
  color: var(--muted);
}

/* ─── Самопроверка и практика ─────────────────────────────────────── */

.checklist {
  counter-reset: q;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.checklist li {
  position: relative;
  padding-left: 39px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}

.checklist li::before {
  counter-increment: q;
  content: counter(q);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold-text);
  font: 700 12px/1 var(--h);
}

.practice {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--line);
}

.practice li {
  border: 1px solid var(--line);
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.practice li::before {
  counter-increment: step;
  content: counter(step);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #1a1407;
  font: 800 13px/1 var(--h);
}

.practice .in {
  display: grid;
  gap: 7px;
}

.practice b {
  font: 700 11px/1 var(--h);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.practice p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}

.practice em {
  font-style: italic;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
  border-left: 2px solid var(--line);
  padding-left: 12px;
}

/* ─── Блок «Как попасть ко мне» ───────────────────────────────────── */
/* Раньше отступы в нём стояли инлайном (22/24/30px), а колонка была
   шире остальных глав - из-за этого блок выпадал из ритма страницы.
   Теперь единая сетка и та же колонка 700px, что везде. */

.offer {
  display: grid;
  gap: 28px;
}

.offer .chapter-head {
  margin-bottom: 0;
}

/* Абзац заканчивается двоеточием, поэтому список держится к нему
   ближе, чем к соседним блокам. */
.offer-what {
  display: grid;
  gap: 14px;
}

.offer-what p {
  color: var(--ink-2);
}

.cta .in h3 {
  margin: 0;
  font: 800 clamp(22px, 3.1vw, 28px) / 1.24 var(--h);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cta-lead {
  margin: -4px 0 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* «А что я ей напишу?» - последний вопрос перед кнопкой и обычная
   причина не написать вовсе. Готовые фразы снимают его: их можно
   просто повторить своими словами. Заливки под ними нет намеренно:
   только полоса слева, как у списка в оффере Дианы. */
.cta-say {
  display: block;
  margin: 9px 0;
  padding: 1px 0 1px 15px;
  border-left: 3px solid var(--gold);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.5;
}

.cta-say + .cta-say {
  margin-top: -2px;
}

/* ─── Два пути ────────────────────────────────────────────────────── */

.ways {
  display: grid;
  gap: 14px;
}

@media (min-width: 700px) {
  .ways {
    grid-template-columns: 1fr 1fr;
  }
}

.way {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.way.hot {
  border: 2px solid var(--gold);
}

.way .lab,
.way .lab-grey {
  margin-bottom: 2px;
}

.way p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ─── Безопасность, подвал, липкая кнопка ─────────────────────────── */

.safety {
  border: 1px dashed var(--line-2);
  border-radius: 14px;
  padding: clamp(20px, 2.6vw, 26px);
  display: grid;
  gap: 12px;
}

.safety p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

footer {
  background: none;
  border-top: 1px solid var(--line);
  border-top: 1px solid var(--line);
  padding-block: 30px 38px;
}

footer .col {
  display: grid;
  gap: 12px;
}

footer p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

.flinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
}

/* Вертикальные поля - ради зоны нажатия: голая строка в 14px даёт
   высоту около 20px при минимуме 44px по гайдлайнам Apple. */
.flinks a {
  display: inline-block;
  padding: 11px 0;
  color: var(--ink-2);
}

/* Предложение под видео. Стоит в потоке между плеером и «Эта лекция
   для вас, если», при загрузке скрыто и появляется через две минуты
   вовлечения (логика в конце index.html).

   Заливки нет - тон страницы один. Блок держат линии сверху и снизу:
   он должен читаться как пауза в чтении, а не как рекламная врезка. */
.afterv {
  margin: 26px 0;
  padding: 24px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.afterv.on {
  opacity: 1;
  transform: none;
}

.afterv p {
  margin: 0;
  max-width: 40ch;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.afterv .btn {
  max-width: 420px;
}

@media (max-width: 760px) {
  .afterv .btn {
    width: 100%;
    max-width: none;
  }
}

/* Пользователи с выключенной анимацией видят блок сразу на месте. */
@media (prefers-reduced-motion: reduce) {
  .afterv {
    transition: none;
    transform: none;
  }
}

/* ─── Этапы работы: что делаем и что получается ───────────────────── */

.work {
  display: grid;
  gap: 16px;
}

.work-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(20px, 2.6vw, 26px);
  display: grid;
  gap: 14px;
}

.work-item h3 {
  font: 700 clamp(19px, 2.3vw, 22px) / 1.3 var(--h);
  letter-spacing: -0.015em;
  color: var(--ink);
}

.work-row {
  display: grid;
  gap: 6px;
}

.work-row > span {
  font: 700 11px/1 var(--h);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.work-row p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}

.work-row.res {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.work-row.res > span {
  color: var(--gold-text);
}

.work-row.res p {
  color: var(--ink);
  font-weight: 500;
}

/* ─── Истории: с чем приходили и что изменилось ───────────────────── */

.cases {
  display: grid;
  gap: 14px;
}

.case {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.case b {
  font: 700 15px/1.3 var(--h);
  color: var(--gold-text);
}

.case p {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
}

.case .was {
  color: var(--muted);
}

/* «Было → Сегодня» - структура с её собственных слайдов 109-113. */
.case-row {
  display: grid;
  gap: 7px;
}

.case-row > span {
  font: 700 11px/1 var(--h);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.case-row.now {
  border-top: 1px solid var(--line);
  padding-top: 13px;
}

.case-row.now > span {
  color: var(--gold-text);
}

.case-row ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.case-row li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.case-row li::before {
  content: '–';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--muted);
}

.case-row.now li::before {
  content: '✓';
  font: 700 12px/1.5 var(--h);
  color: var(--gold-text);
}

.case-row.now li {
  color: var(--ink);
}

/* ─── Лестница: программу видно всё раньше ────────────────────────── */

.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

@media (min-width: 760px) {
  .ladder {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ladder li {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.ladder b {
  font: 700 14px/1.3 var(--h);
  color: var(--gold-text);
}

.ladder span {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ─── Вопросы и ответы ────────────────────────────────────────────── */

/* Вопросы: не карточки, а строки с тонкими разделителями и плюсом
   справа. Так блок не спорит с остальной страницей за внимание. */
.faq {
  display: grid;
}

.faq details {
  border-bottom: 1px solid var(--line-2);
}

.faq details:first-child {
  border-top: 1px solid var(--line-2);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font: 700 clamp(17px, 2.1vw, 19px) / 1.4 var(--h);
  color: var(--ink);
  transition: color 0.15s ease;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  flex: 0 0 auto;
  font: 400 28px/1 var(--h);
  color: var(--gold-text);
}

.faq details[open] summary::after {
  content: '-';
}

.faq summary:hover {
  color: var(--gold-dark);
}

.faq summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 4px;
}

.faq .ans {
  padding: 0 38px 24px 0;
  display: grid;
  gap: 12px;
}

.faq .ans p {
  font-size: 17.5px;
  line-height: 1.68;
  color: var(--ink-2);
}

/* Абзац внутри рамки .box - такой же, как в основном тексте. */
.box p {
  font-size: clamp(17px, 2.2vw, 18.5px);
  line-height: 1.7;
  color: var(--ink-2);
}


/* Выделение текста в палитре страницы, а не системным синим. */
::selection {
  background: rgba(233, 180, 76, 0.45);
  color: var(--ink);
}

/* ─── Согласие на cookie ──────────────────────────────────────────── */

/* Полоса внизу до первого ответа. Уведомление, а не выбор: счётчик
   Метрики работает всегда, логика показа в конце index.html.

   Фон - бумага, а не белый: тон страницы один. Кнопки «Отклонить»
   нет намеренно: счётчик работает в любом случае, и такая кнопка
   врала бы. Способ реально отказаться описан в политике. */
.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(243, 238, 232, 0.98);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookies.on {
  opacity: 1;
  transform: none;
}

.cookies p {
  margin: 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.cookies a {
  color: var(--gold-text);
}

.cookies .btn {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 12px 28px;
  font-size: 15px;
  box-shadow: none;
}

@media (max-width: 620px) {
  .cookies {
    text-align: center;
  }

  .cookies .btn {
    width: 100%;
  }
}