/* Marsho French
   Идея: французская школьная тетрадь. Белый лист — фон всей страницы, тёмно-синие чернила — шапка,
   вкладки, контуры и заголовки, красная ручка учителя — действия и исправления, сиреневые линии Seyès — структура.
   С 2026-10-15 сайт светлый: тёмных блоков во всю ширину больше нет, тёмная только шапка (решение владельца). */

:root {
  --ink: #0F1D4A;
  --ink-2: #172A63;
  --ink-line: rgba(185, 178, 242, .2);
  --on-ink: #EEF0FA;
  --on-ink-muted: #A9B1D6;

  --paper: #FFFFFF;
  --tint: #EEF1FA; /* светло-синий: карточки отзывов, наведение */
  --card: #FFFFFF;
  --text: #0F1D4A;
  --muted: #4E5878;
  --line: #E2E0EE;

  --seyes: 139, 127, 217;
  --red: #D62F35;
  --red-hover: #BC252B;
  --red-on-ink: #FF7A7C;
  --pen: #1F3FBF;
  --lilac: #B9B2F2;

  /* цвета имён в отзывах: читаются на светло-синей карточке --tint, белая буква — на кружке этого цвета */
  --n1: #5B4FC9;
  --n2: #C2373D;
  --n3: #18744A;
  --n4: #8A5A00;
  --n5: #1E6DB0;

  --f-display: "Spectral", Georgia, "Times New Roman", serif;
  --f-body: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --margin-w: 168px;

  /* одна кривая для плавных переходов: быстрый старт, мягкая остановка */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- База ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 1rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 720px) {
  body { font-size: 1.0625rem; }
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; }

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 8px;
}
.skip:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--pen);
  outline-offset: 3px;
  border-radius: 6px;
}
.topbar :focus-visible { outline-color: var(--lilac); }

::selection { background: rgba(var(--seyes), .3); }

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

/* блок ниже экрана ждёт, пока до него докрутят, и мягко проявляется (script.js → setupReveal) */
.will-reveal { opacity: 0; }
@media print {
  .will-reveal { opacity: 1; }
}

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

.eyebrow,
.sheet__margin {
  font: 500 .75rem/1.4 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow { color: var(--red); }

.display {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.display em { font-style: italic; }

/* красная ручка подчёркивает главное слово крупного заголовка: «для жизни», «бесплатного».
   Высота мазка в пикселях, а не в em: на телефоне он не становится тоньше. Рисуется — в блоке «Ручка учителя» ниже */
/* предлог не остаётся в конце строки отдельно от подчёркнутого слова: «с бесплатного» */
.nowrap { white-space: nowrap; }
/* цельный блок: если строка переносится сразу после слова, у обычного inline ширина мазка выходит нулевой */
.pen-under {
  position: relative;
  display: inline-block;
}
.pen-line {
  position: absolute;
  left: 0; bottom: .05em; /* ближе к строке: у заголовка тесный интервал, ниже мазок задел бы буквы следующей строки */
  width: 100%; height: 10px;
  overflow: visible;
  fill: none;
  stroke: var(--red);
  stroke-width: 2.6;
  stroke-linecap: round;
  pointer-events: none;
}
/* на первом экране под «для жизни» строка без высоких букв («в новой стране»), поэтому черту можно опустить ниже:
   на iPhone при .05em она касалась низа букв (скриншот владельца 2026-10-31) */
.hero .pen-line { bottom: -.04em; }

.h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.lead {
  max-width: 34em;
  color: var(--muted);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  line-height: 1.55;
}

.sub {
  max-width: 40em;
  margin-top: 12px;
  color: var(--muted);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font: 600 .95rem/1.2 var(--f-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
/* при наведении красная ручка «растекается» мягким ореолом по листу */
.btn:hover {
  background: var(--red-hover);
  box-shadow:
    0 0 0 4px rgba(255, 122, 124, .14),
    0 12px 30px -10px rgba(255, 90, 95, .55);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover { transform: translateY(-2px); }
}
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 0 4px rgba(255, 122, 124, .14);
}

.btn--sm {
  min-height: 38px;
  padding: 8px 16px;
  font-size: .875rem;
}

.btn--main {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  gap: 8px;
  font-size: 1rem;
}
/* мягкий блик проходит по главной кнопке записи раз в 7 с — кнопка в шапке без него */
.btn--main::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .26) 50%, transparent 65%);
  transform: translateX(-110%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .btn--main::after { animation: glint 7s ease-in-out 2s infinite; }
}
@keyframes glint {
  0% { transform: translateX(-110%); }
  16%, 100% { transform: translateX(110%); }
}
@media (min-width: 520px) {
  .btn--main {
    width: auto;
    padding: 16px 28px;
    gap: 10px;
    font-size: 1.0625rem;
  }
}

.btn__icon {
  flex: none;
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.btn--ghost {
  background: transparent;
  color: var(--on-ink);
  border: 1px solid var(--ink-line);
}
.btn--ghost:hover {
  background: var(--ink-2);
  border-color: rgba(185, 178, 242, .5);
  box-shadow: none;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 32px;
}
.cta__hint {
  color: var(--muted);
  font: 400 .78rem/1.5 var(--f-mono);
}

/* Короткий путь к ценам: на телефоне в шапке нет меню.
   Небольшая кнопка-контур — второе действие после красной; стрелка пару раз подсказывает «ниже» */
.cta__alt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 8px;
  padding: 0 18px 0 20px;
  border: 1px solid rgba(31, 63, 191, .35);
  border-radius: 999px;
  background: rgba(31, 63, 191, .04);
  color: var(--ink);
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.cta__alt:hover {
  background: rgba(31, 63, 191, .09);
  border-color: var(--pen);
}
.cta__arrow {
  flex: none;
  width: 18px; height: 18px;
  fill: none;
  stroke: var(--pen);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: nudge-down 1.4s var(--ease) 1.5s 4;
}
@keyframes nudge-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* тонкая линия под ссылкой; при наведении поверх неё красная ручка ведёт черту слева направо */
.link {
  padding-bottom: 3px;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat,
    linear-gradient(rgba(214, 47, 53, .35), rgba(214, 47, 53, .35)) 0 100% / 100% 1px no-repeat;
  color: var(--red);
  font-weight: 600;
  text-decoration: none;
  transition: background-size .4s cubic-bezier(.6, 0, .3, 1);
}
.link:hover { background-size: 100% 2px, 100% 1px; }
/* стрелка в ссылке при наведении делает шаг вперёд */
.link > span[aria-hidden="true"],
.reel__more > span[aria-hidden="true"] {
  display: inline-block;
  transition: transform .25s var(--ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .link:hover > span[aria-hidden="true"],
  .reel:hover .reel__more > span[aria-hidden="true"] { transform: translateX(4px); }
}

/* ---------- Шапка ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 29, 74, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-line);
  color: var(--on-ink);
}

.topbar__in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: .28em;
  font-family: var(--f-display);
  font-size: 1.35rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.logo__a { font-weight: 500; }
.logo__b { font-style: italic; font-weight: 300; color: var(--lilac); }
/* Эйфелева башня перед названием: стоит на линии текста, красная — как ручка учителя
   и красный цвет флага Франции рядом с синим и белым сайта (символ #tower в начале index.html) */
.logo__mark {
  flex: none;
  width: .79em; height: 1.05em;
  fill: var(--red-on-ink);
}
.logo--quiet .logo__mark { fill: var(--red); }
/* огоньки на башне, как у настоящей по вечерам: один раз после загрузки и при наведении на логотип */
.logo__sparks { fill: #fff; }
.logo__sparks circle {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .logo__sparks circle { animation: spark 1.4s ease-in-out 1.2s 2 both; }
  .logo__sparks circle:nth-child(2) { animation-delay: 1.5s; }
  .logo__sparks circle:nth-child(3) { animation-delay: 1.35s; }
  .logo__sparks circle:nth-child(4) { animation-delay: 1.7s; }
  .logo__sparks circle:nth-child(5) { animation-delay: 1.25s; }
  .logo__sparks circle:nth-child(6) { animation-delay: 1.6s; }
  .logo__sparks circle:nth-child(7) { animation-delay: 1.45s; }
  .logo:hover .logo__sparks circle { animation-name: spark-again; animation-iteration-count: infinite; }
}
@keyframes spark { 0%, 100% { opacity: 0; scale: .3; } 50% { opacity: 1; scale: 1; } }
@keyframes spark-again { 0%, 100% { opacity: 0; scale: .3; } 50% { opacity: 1; scale: 1; } }

.topnav {
  display: none;
  gap: 28px;
  margin-left: auto;
  font-size: .95rem;
}
.topnav a {
  position: relative;
  color: var(--on-ink-muted);
  text-decoration: none;
  transition: color .2s ease;
}
.topnav a:hover,
.topnav a[aria-current="true"] { color: var(--on-ink); }

/* раздел, который сейчас на экране, подчёркнут красной ручкой (script.js → setupNav) */
.topnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--red-on-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease);
}
.topnav a[aria-current="true"]::after { transform: scaleX(1); }

.topbar .btn { margin-left: auto; }

@media (min-width: 960px) {
  .topnav { display: flex; }
  .topbar .btn { margin-left: 0; }
}

/* ---------- Главный экран ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 44px 72px;
}

/* Едва заметный синий свет за тетрадью: на белом фоне даёт листу глубину.
   На компьютере мягко идёт за курсором (script.js → setupLamp) */
.hero__lamp {
  --size: 760px;
  --glow: .06;
  position: absolute;
  z-index: -1;
  left: 84%;
  top: 8%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  background: radial-gradient(closest-side,
    rgba(31, 63, 191, var(--glow)),
    rgba(31, 63, 191, calc(var(--glow) * .4)) 48%,
    rgba(31, 63, 191, 0));
  pointer-events: none;
  transition: transform 1.1s cubic-bezier(.2, .75, .25, 1);
}
/* на широком экране лист закрывает центр света, поэтому свет ярче и чуть выше листа */
@media (min-width: 1024px) {
  .hero__lamp { --size: 1100px; --glow: .09; left: 72%; top: 38%; }
}

/* Эйфелева башня тонкими линиями, как карандашный набросок (svg.page-tower в начале index.html), на всю высоту экрана.
   Она стоит на месте, а страница прокручивается поверх неё, так что фон не пустеет до самого низа
   (решение владельца: на телефоне 2026-10-21, на компьютере 2026-10-23). У светлых блоков нет своего фона,
   поэтому башню видно; белые карточки лежат поверх, как листы на столе.
   Линии заметно бледнее любого текста поверх них (ai-clone/feedback/text-over-pattern.md) */
.page-tower {
  position: fixed;
  z-index: -1;
  top: 85px; /* под шапкой (61 px) с отступом */
  height: calc(100vh - 109px);
  height: calc(100svh - 109px);
  aspect-ratio: 3 / 4;
  fill: none;
  stroke: rgba(31, 63, 191, .075);
  stroke-width: .7; /* в единицах рисунка: на экране около 1 px */
  pointer-events: none;
  will-change: transform; /* свой слой: при прокрутке башня не перерисовывается */
}
/* телефон: во всю ширину экрана. Башня вытянута по экрану (у svg preserveAspectRatio="none"):
   у настоящей высота больше ширины примерно в 2,6 раза, так даже ближе к жизни */
@media (max-width: 719px) {
  .page-tower {
    left: 12px;
    width: calc(100vw - 24px);
    aspect-ratio: auto;
  }
}
/* планшет: по центру, за заголовком и кнопками */
@media (min-width: 720px) and (max-width: 1023px) {
  .page-tower { left: 50%; translate: -50% 0; }
}
/* компьютер: справа, на первом экране за тетрадью — шпиль над листом, ноги под ним */
@media (min-width: 1024px) {
  .page-tower { right: max(2%, calc(50% - 640px)); }
}
/* огонёк на шпиле: точка остаётся круглой, даже когда башня вытянута по экрану */
.page-tower .tw-spark {
  stroke: var(--red);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .7;
}
.page-tower .tw-spark--glow { stroke-width: 16; opacity: .12; }

/* Башня строится, как путь ученика от нуля до B1 (решение владельца 2026-10-30, plans/2026-10-30-motion-blocks.md).
   При открытии пером рисуется силуэт. Решётка заполняется ярусами снизу вверх по ходу прокрутки: нижний ярус
   у «С чем ко мне приходят», средний у отзывов и цен, верхний к шагам. У финального блока на шпиле загорается огонёк.
   Прокрутку ведёт сам браузер (animation-timeline), скрипт в этом не участвует (ai-clone/feedback/scroll-motion-css-not-js.md).
   Если браузер так не умеет, ярусы и огонёк дорисовываются сразу после силуэта. При reduce башня видна целиком.
   У каждого пути длина 1 (pathLength в index.html). */
@media (prefers-reduced-motion: no-preference) {
  .page-tower .tw-base,
  .page-tower .tw-tier {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tower-draw 2.8s var(--ease) .3s forwards;
  }
  .page-tower .tw-tier { animation-duration: 1.2s; animation-delay: 2.4s; }
  .page-tower .tw-tier--2 { animation-delay: 3.1s; }
  .page-tower .tw-tier--3 { animation-delay: 3.8s; }
  .page-tower .tw-spark { animation: spire-light .8s ease 4.8s backwards; }

  @supports (animation-timeline: scroll()) {
    .page-tower .tw-tier,
    .page-tower .tw-spark {
      animation: tower-draw linear both;
      animation-duration: auto;
      animation-timeline: scroll(root);
    }
    .page-tower .tw-spark { animation-name: spire-light; }
    /* доли всей прокрутки страницы. Замер 2026-10-30 от 360 до 1920 px: блоки входят в экран почти на одних долях —
       «С чем ко мне приходят» 1–8 %, ролики 23–31 %, отзывы 34–39 %, цены 44–47 %, шаги 74–76 %, финал 92–94 % */
    .page-tower .tw-tier--1 { animation-range: 4% 28%; }
    .page-tower .tw-tier--2 { animation-range: 32% 58%; }
    .page-tower .tw-tier--3 { animation-range: 62% 80%; }
    .page-tower .tw-spark { animation-range: 91% 98%; }
  }

  /* свет на первом экране медленно «дышит»; на компьютере он к тому же идёт за курсором (script.js → setupLamp) */
  .hero__lamp { animation: lamp-breathe 14s ease-in-out infinite alternate; }
}
@keyframes tower-draw { to { stroke-dashoffset: 0; } }
@keyframes spire-light { from { opacity: 0; } }
@keyframes lamp-breathe {
  from { scale: 1; translate: 0 0; }
  to { scale: 1.15; translate: -4% 3%; }
}

.hero__grid {
  display: grid;
  gap: 56px;
}

/* Ритм первого экрана: внутри группы 8–12 px, между группами 20–28 px, перед действием 32–40 px.
   Отступы растут вместе с заголовком: на телефоне 20/32 px, на широком экране 28/40 px */
.hero .lead {
  margin-top: clamp(20px, .95rem + .6vw, 28px);
  text-wrap: balance; /* строки вступления примерно равной длины, без висящего хвоста */
}
.hero .cta { margin-top: clamp(32px, 1.7rem + .6vw, 40px); }
/* главное во вступлении светлее и с новой строки, подробности приглушены */
.lead__key {
  display: block;
  color: var(--text);
}

.hero__demo { max-width: 540px; }

.hero__label {
  margin-bottom: 14px;
  color: var(--muted);
  font: 400 .78rem/1.5 var(--f-mono);
}

/* На телефоне и планшете первый экран — одна колонка с кнопкой во всю ширину.
   Выравниваем его по центру, как обложку: текст вокруг кнопки стоит с ней по одной оси. */
@media (max-width: 1023px) {
  .hero__text,
  .hero__label { text-align: center; }
  .hero .lead { margin-inline: auto; }
  .hero .cta { align-items: center; }
  .hero__demo { margin-inline: auto; }
  .scenes { justify-content: center; }
}

/* Телефон: первый экран — обложка на высоту экрана, заголовок и кнопки посередине, чуть выше центра.
   Тетрадь начинается ниже, проявляется при прокрутке и поднимается к кнопкам, чтобы между ними
   не было пустой полосы (script.js → setupReveal, setupRise). Раньше она выглядывала
   краем из-под кнопок, и сколько её видно, зависело от телефона и панелей браузера.
   svh — высота экрана при открытых панелях браузера; 105 px — шапка (61) и верхний отступ главного экрана (44) */
@media (max-width: 719px) {
  .hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 105px);
    min-height: calc(100svh - 105px);
    padding-bottom: 6svh;
  }
}

/* Тетрадь поднимается к кнопкам, как только страницу начинают листать (script.js → setupRise).
   Подъём — CSS-переход transform: браузер ведёт его сам, поэтому на iPhone он плавный.
   Если сдвигать лист из JS на каждом кадре, он отстаёт: Safari прокручивает страницу
   с частотой 120 Гц, а скрипт обновляет картинку 60 раз в секунду и на кадр позже */
@media (max-width: 719px) and (prefers-reduced-motion: no-preference) {
  .hero__demo {
    transition: transform .6s var(--ease);
    will-change: transform;
  }
  .hero__demo.is-risen { transform: translateY(calc(-1 * var(--rise, 0px))); }
}

@media (min-width: 1024px) {
  .hero { padding-block: 88px 120px; }
  .hero__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 72px;
    align-items: center;
  }
  .hero__demo { justify-self: end; width: 100%; }
}

/* Переключатель ситуаций */

.scenes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.scenes__tab {
  position: relative;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid rgba(15, 29, 74, .18);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: 500 .875rem/1 var(--f-body);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.scenes__tab:hover {
  color: var(--pen);
  border-color: var(--pen);
}
/* выбранная ситуация — тёмно-синяя заливка, как выбранная валюта в ценах */
.scenes__tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
/* тетрадь листает ситуации сама: полоска под выбранной вкладкой — время до следующей (script.js → setupCahier) */
.scenes.is-autoplay .scenes__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--red-on-ink);
  transform-origin: left center;
  animation: scene-progress 7s linear forwards;
}
@keyframes scene-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* на узких телефонах все четыре ситуации — в одну строку */
@media (max-width: 389px) {
  .scenes__tab { padding-inline: 9px; }
}

/* Тетрадный лист Seyès: тонкие линии каждые 8 px, основные каждые 32 px, красные поля.
   Линии намеренно бледные: это фон, текст поверх них должен читаться с телефона */

.cahier {
  --row: 32px;
  --fine: 8px;
  --mx: 48px;
  --off: 6px;

  position: relative;
  /* высота — по самой длинной ситуации, чтобы лист не прыгал при переключении и не пустовал */
  min-height: calc(var(--row) * 12);
  padding: 24px 22px 32px calc(var(--mx) + 16px);
  border-radius: 3px;
  background-color: #fff;
  background-image:
    linear-gradient(to right,
      transparent calc(var(--mx) - 1px),
      rgba(214, 47, 53, .55) calc(var(--mx) - 1px),
      rgba(214, 47, 53, .55) calc(var(--mx) + 1px),
      transparent calc(var(--mx) + 1px)),
    linear-gradient(to bottom, rgba(var(--seyes), .26) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--seyes), .09) 1px, transparent 1px),
    linear-gradient(to right, #fff var(--mx), transparent var(--mx)),
    linear-gradient(to right, rgba(var(--seyes), .12) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% var(--row),
    100% var(--fine),
    100% 100%,
    var(--row) 100%;
  background-position:
    0 0,
    0 var(--off),
    0 var(--off),
    0 0,
    var(--mx) 0;
  /* белый лист на белом фоне: тонкий край и мягкая тень, чтобы он лежал «на столе» */
  box-shadow:
    0 0 0 1px rgba(15, 29, 74, .07),
    0 30px 60px -30px rgba(15, 29, 74, .35),
    0 10px 24px -12px rgba(15, 29, 74, .18);
  color: var(--pen);
  /* лист стоит ровно: повёрнутые тонкие линии на обычном экране ноутбука (Windows, масштаб 100 %)
     рисуются лесенкой, и красное поле выглядит ломаным (фото Рамзана 2026-10-23) */
}

/* на узких телефонах фразы переносятся чаще — лист выше */
@media (max-width: 389px) {
  .cahier { min-height: calc(var(--row) * 13.5); }
}

/* при смене ситуации старая фраза гаснет, новая проявляется (script.js → setupCahier) */
.cahier__body { transition: opacity .15s ease; }
.cahier.is-switching .cahier__body { opacity: 0; }

.cahier__date,
.cahier__title,
.cahier__line {
  font-family: var(--f-display);
  line-height: var(--row);
}

.cahier__date {
  font-style: italic;
  font-size: 1.125rem;
}

.cahier__title {
  margin-top: var(--fine);
  font-size: 1.3rem;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

/* строка ученика: над первой строкой — полстроки под исправление красной ручкой
   (оно всегда в первых словах фразы), перенос идёт через обычную строку, без пустого ряда */
.cahier__line {
  margin-top: var(--fine);
  padding-block: calc(var(--row) / 2);
  font-size: 1.375rem;
  font-style: italic;
}

.cahier__ru,
.cahier__note {
  font-family: var(--f-body);
  font-size: .9375rem;
  line-height: 24px;
}

.cahier__ru {
  margin-top: var(--fine);
  color: #464E72;
}

.cahier__note {
  margin-top: 16px;
  color: var(--red);
  font-weight: 500;
}

/* исправление красной ручкой */
.fix {
  position: relative;
  white-space: nowrap;
}

.fix s {
  position: relative;
  text-decoration: none;
}
.fix s::after {
  content: "";
  position: absolute;
  left: -3px; right: -3px;
  top: 55%;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: rotate(-7deg) scaleX(0);
  transform-origin: left center;
  /* --written: сколько ученик пишет фразу (script.js → setupCahier); учитель исправляет уже после */
  transition: transform .45s cubic-bezier(.6, 0, .3, 1) calc(var(--written, 0s) + .2s);
}

.fix ins {
  position: absolute;
  left: 50%;
  bottom: 88%;
  color: var(--red);
  font-size: .95em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px) rotate(-4deg);
  transition: opacity .3s ease calc(var(--written, 0s) + .6s), transform .3s ease calc(var(--written, 0s) + .6s);
}

/* вставка без зачёркивания: галочка снизу */
.fix--add {
  display: inline-block;
  width: 0;
}
.fix--add::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  width: 9px; height: 9px;
  border-top: 2px solid var(--red);
  border-left: 2px solid var(--red);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity .3s ease calc(var(--written, 0s) + .25s);
}
.fix--add ins { bottom: 1em; }

.cahier__note {
  opacity: 0;
  transition: opacity .4s ease calc(var(--written, 0s) + .9s);
}

/* фраза ученика пишется слово за словом, потом учитель её исправляет (слова и задержки — script.js → setupCahier) */
@media (prefers-reduced-motion: no-preference) {
  .js .cahier:not(.is-drawn) .w { opacity: 0; }
  .cahier.is-drawn .w { animation: word-in .35s ease calc(var(--i) * 60ms) backwards; }
}
@keyframes word-in { from { opacity: 0; } }

.is-drawn .fix s::after { transform: rotate(-7deg) scaleX(1); }
.is-drawn .fix ins { opacity: 1; transform: translate(-50%, 0) rotate(-4deg); }
.is-drawn .fix--add::before { opacity: 1; }
.is-drawn .cahier__note { opacity: 1; }

@media (min-width: 720px) {
  .cahier { --mx: 64px; padding-right: 32px; }
  .cahier__line { font-size: 1.5rem; }
}

/* ---------- Светлые «тетрадные» блоки ---------- */
/* своего фона у них нет: за страницей стоит большая башня (.page-tower) */

.sheet__grid { padding-block: 64px; }
.sheet + .sheet .sheet__grid { padding-top: 16px; }

.sheet__margin {
  margin-bottom: 14px;
  color: var(--red);
}

@media (min-width: 1024px) {
  /* красная линия полей проходит через все листы подряд */
  .sheet__grid {
    display: grid;
    grid-template-columns: var(--margin-w) minmax(0, 1fr);
    column-gap: 48px;
    padding-block: 104px;
    background: linear-gradient(rgba(214, 47, 53, .42), rgba(214, 47, 53, .42)) no-repeat;
    background-size: 1.5px 100%;
    background-position: calc(var(--gutter) + var(--margin-w) + 23px) 0;
  }
  .sheet + .sheet .sheet__grid { padding-top: 8px; }
  .sheet__margin {
    margin: 0;
    padding-top: 16px;
    text-align: right;
  }
}

/* С чем ко мне приходят: три ситуации, у каждой своя запись на пробный */

.needs {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}
@media (min-width: 900px) {
  .needs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.need {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
/* в углу карточки учитель ставит галочку: «это про меня» (рисуется — в блоке «Ручка учителя») */
.need::before {
  content: "";
  position: absolute;
  top: 26px; right: 22px;
  width: 15px; height: 8px;
  border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}

.need__title {
  padding-right: 26px; /* заголовок не заходит под галочку */
  font: 400 1.45rem/1.2 var(--f-display);
}
.need__text { color: var(--muted); }

/* ссылка прижата к низу карточки: в ряду все три стоят на одной линии */
.need__cta {
  margin-top: auto;
  padding-top: 6px;
}

/* Преподаватель */

.teacher {
  display: grid;
  gap: 28px;
  margin-top: 32px;
}

/* Фото Рамзана (с 2026-10-16): на телефоне — квадрат над текстом, на широком экране — колонка слева.
   Подпись под фото, а не поверх: на светлой рубашке белые буквы не читались бы */
.teacher__photo {
  display: grid;
  align-content: start;
  gap: 10px;
}
/* рамка держит скругление и обрезает фото, пока оно мягко «наезжает» из чуть большего масштаба */
.teacher__frame {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: var(--tint);
  box-shadow: 0 0 0 1px rgba(15, 29, 74, .06);
}
.teacher__photo img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 20%;
}
.teacher__photo figcaption {
  color: var(--muted);
  font: 500 .75rem/1 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 719px) {
  .teacher { gap: 20px; }
  .teacher__photo { max-width: 320px; }
}

@media (min-width: 720px) {
  .teacher {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .teacher__photo img { aspect-ratio: 4 / 5; }
}
@media (min-width: 1024px) {
  .teacher { grid-template-columns: 290px minmax(0, 1fr); gap: 56px; }
}

.teacher__intro {
  max-width: 36em;
  font-size: 1.125rem;
  line-height: 1.6;
}

/* Сколько учеников сейчас: число набегает от нуля, когда его видно (script.js → setupCount).
   Цифры одной ширины, чтобы подпись рядом не дёргалась, пока число растёт */
.stat {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
}
.stat__num {
  position: relative;
  min-width: 1.15em;
  color: var(--ink);
  font: 300 clamp(3.5rem, 2.8rem + 2.6vw, 5rem)/1 var(--f-display);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.02em;
}
/* досчитав до конца, красная ручка подчёркивает число (script.js → setupCount) */
.stat__num::after {
  content: "";
  position: absolute;
  left: .04em; right: .04em; bottom: -.08em;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
  transform: rotate(-2deg) scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.6, 0, .3, 1) .15s;
}
.stat.is-counted .stat__num::after,
html:not(.js) .stat__num::after { transform: rotate(-2deg) scaleX(1); }
.stat__label {
  max-width: 11em;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.35;
}

.facts,
.terms {
  border-top: 1px solid var(--line);
}
.facts { margin-top: 28px; }
/* у фактов линия под строкой — отдельный штрих: при появлении он прочерчивается слева направо, как в анкете от руки */
.facts > div::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--line);
  transform-origin: left;
}

.facts > div,
.terms > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  padding-block: 13px;
  border-bottom: 1px solid var(--line);
}
.facts > div {
  position: relative;
  border-bottom-color: transparent; /* линию рисует .facts > div::after выше */
}

.facts dt,
.terms dt {
  padding-top: .15em;
  color: var(--muted);
  font: 500 .75rem/1.8 var(--f-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Ролики: обложка, значок «играть», подпись; открываются в Instagram, своих скриптов Meta на сайте нет.
   На телефоне карточки листаются вбок и встают по одной, на широком экране — три в ряд */
.reels {
  display: flex;
  gap: 14px;
  margin: 28px calc(var(--gutter) * -1) 0;
  padding: 4px var(--gutter) 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.reels::-webkit-scrollbar { display: none; }

.reel {
  display: grid;
  align-content: start;
  gap: 10px;
  flex: none;
  width: min(62vw, 240px); /* на телефоне справа виден край следующего ролика */
  scroll-snap-align: start;
  color: inherit;
  text-decoration: none;
}
.reel__cover {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: var(--tint);
  box-shadow: 0 0 0 1px rgba(15, 29, 74, .06);
}
.reel__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* «играть» — в углу, а не по центру: на обложках посередине часто стоит надпись ролика */
.reel__play {
  position: absolute;
  left: 12px; bottom: 12px;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px -8px rgba(15, 29, 74, .5);
  transition: transform .25s var(--ease);
}
.reel__play svg {
  width: 22px; height: 22px;
  fill: var(--red);
}
.reel__title {
  font-weight: 600;
  line-height: 1.35;
}
.reel__more {
  color: var(--muted);
  font-size: .9rem;
}
.reel:hover .reel__title { color: var(--pen); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .reel:hover .reel__play { transform: scale(1.08); }
}

@media (min-width: 720px) {
  .reels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 760px;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .reel { width: auto; }
}

/* Форматы и цены */

.prices__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}

/* Тёмная подложка переезжает к выбранной валюте. Кнопки одной ширины, поэтому сдвиг — ровно на одну кнопку.
   Какая валюта выбрана, подложке сообщает data-active (script.js → setupCurrency); без JS выбраны евро, подложка слева */
.currency {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}
.currency::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--ink);
  transition: transform .35s var(--ease);
}
.currency[data-active="rub"]::before { transform: translateX(100%); }
.currency__btn {
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  font-size: .875rem;
  cursor: pointer;
  transition: color .2s ease;
}
.currency__btn:hover { color: var(--text); }
.currency__btn[aria-pressed="true"] { color: #fff; }

/* цены при смене валюты въезжают снизу, как цифры на табло (script.js → setupCurrency): для этого им нужен свой блок */
.money { display: inline-block; }

.plans {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}
@media (min-width: 720px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
@media (min-width: 1024px) {
  .plan { padding: 28px; }
}

/* карточка приподнимается, как лист, который взяли со стола */
@media (hover: hover) {
  .plan:not(.plan--soon):hover {
    border-color: rgba(var(--seyes), .45);
    box-shadow:
      0 2px 4px -2px rgba(15, 29, 74, .08),
      0 24px 48px -28px rgba(15, 29, 74, .45);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .plan:not(.plan--soon):hover { transform: translateY(-4px); }
}

.plan__name {
  font: 400 1.6rem/1.15 var(--f-display);
}

.plan__meta {
  color: var(--muted);
  font: 400 .8rem/1.4 var(--f-mono);
}

.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 8px;
}
.plan__price > .money:first-child {
  font: 400 2.6rem/1 var(--f-display);
  font-variant-numeric: lining-nums;
  letter-spacing: -.01em;
}
/* старую цену зачёркивает красная ручка, как ошибку в тетради */
.plan__old {
  position: relative;
  color: var(--muted);
  font: 400 1.15rem/1 var(--f-display);
  text-decoration: none;
}
.plan__old::after {
  content: "";
  position: absolute;
  left: -3px; right: -3px;
  top: 52%;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: rotate(-8deg);
  transform-origin: left center;
}
.plan__unit {
  color: var(--muted);
  font-size: .95rem;
}

.plan__rows {
  margin-top: auto;
  padding-top: 8px;
}
.plan__rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-block: 9px;
  border-bottom: 1px dashed var(--line);
  font-size: .95rem;
}
.plan__rows li:first-child { border-top: 1px solid var(--line); }
.plan__rows .money {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plan__rows em {
  margin-left: 6px;
  color: var(--red);
  font: 500 .72rem/1 var(--f-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* «берут чаще всего» учитель обводит ручкой: неровный овал, конец заходит за начало */
.plan__rows .pen-mark {
  position: relative;
  margin-left: 14px; /* место для овала, чтобы он не задевал «уроков» */
}
.pen-oval {
  position: absolute;
  left: -14px; top: -9px;
  width: calc(100% + 24px);
  height: calc(100% + 18px);
  overflow: visible;
  fill: none;
  stroke: var(--red);
  stroke-width: 1.3;
  stroke-linecap: round;
  pointer-events: none;
}

.plan__per {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 400 .8rem/1.4 var(--f-mono);
}

/* запись на пробный из карточки: сообщение в WhatsApp называет формат (script.js → CONFIG.messages) */
.plan__cta { padding-top: 4px; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chips li {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--seyes), .12);
  font-size: .85rem;
}

.plan--soon {
  grid-column: 1 / -1;
  border: 1.5px dashed rgba(var(--seyes), .55);
  background: transparent;
}
.plan--soon .plan__text { max-width: 40em; }

.tag {
  color: var(--red);
  font: 500 .72rem/1.4 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.included { margin-top: 48px; }

.included__title {
  color: var(--muted);
  font: 500 .75rem/1.4 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.included__list {
  display: grid;
  gap: 14px 32px;
  margin-top: 18px;
}
@media (min-width: 720px) {
  .included__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.included__list li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
}
/* галочка учителя */
.included__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: .35em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}

/* ---------- Ручка учителя: пометки рисуются, когда до них докрутят ---------- */
/* Элемент с data-pen получает класс .is-penned один раз, когда входит в экран (script.js → setupPen).
   Без JS и при reduce пометки сразу нарисованы: прячем их только до .is-penned и только при обычном движении.
   Переход задан только у .is-penned: прячутся пометки мгновенно, когда скрипт ставит .js, а рисуются плавно */
@media (prefers-reduced-motion: no-preference) {
  /* овал вокруг «берут чаще всего» — после того как карточка проявилась */
  .pen-oval path { stroke-dasharray: 1; }
  .js .pen-mark:not(.is-penned) .pen-oval path { stroke-dashoffset: 1; }
  .pen-mark.is-penned .pen-oval path { transition: stroke-dashoffset .9s cubic-bezier(.6, 0, .3, 1) .55s; }

  /* у «Вдвоём» сначала зачёркнута старая цена, потом проявляется новая */
  .js .plan__price[data-pen]:not(.is-penned) .plan__old::after { transform: rotate(-8deg) scaleX(0); }
  .js .plan__price[data-pen]:not(.is-penned) > .money:first-child { opacity: 0; translate: 0 6px; }
  .plan__price.is-penned .plan__old::after { transition: transform .45s cubic-bezier(.6, 0, .3, 1) .5s; }
  .plan__price.is-penned > .money:first-child { transition: opacity .4s ease 1s, translate .4s var(--ease) 1s; }

  /* галочки ставятся по очереди: в своих координатах галочка открывается слева направо — короткий штрих, потом длинный */
  .js .included__list:not(.is-penned) li::before { clip-path: inset(0 100% 0 0); }
  .included__list.is-penned li::before { transition: clip-path .35s ease-out .3s; }
  .included__list.is-penned li:nth-child(2)::before { transition-delay: .5s; }
  .included__list.is-penned li:nth-child(3)::before { transition-delay: .7s; }
  .included__list.is-penned li:nth-child(4)::before { transition-delay: .9s; }

  /* подчёркивание в заголовке: на первом экране — сразу после открытия, у финала — когда до него докрутят */
  .pen-line path { stroke-dasharray: 1; }
  .js .pen-under:not(.is-penned) .pen-line path { stroke-dashoffset: 1; }
  .pen-under.is-penned .pen-line path { transition: stroke-dashoffset .8s cubic-bezier(.6, 0, .3, 1) .7s; }

  /* галочка в углу карточки «С чем ко мне приходят» — когда карточка проявилась */
  .js .need:not(.is-penned)::before { clip-path: inset(0 100% 0 0); }
  .need.is-penned::before { transition: clip-path .35s ease-out .55s; }

  /* фото «наезжает» из чуть большего масштаба */
  .js .teacher__photo:not(.is-penned) img { transform: scale(1.06); }
  .teacher__photo.is-penned img { transition: transform 1.6s var(--ease) .1s; }

  /* факты: строки появляются по очереди, линия под каждой прочерчивается слева направо */
  .js .facts:not(.is-penned) > div { opacity: 0; }
  .js .facts:not(.is-penned) > div::after { transform: scaleX(0); }
  .facts.is-penned > div { transition: opacity .4s ease var(--d, .2s); }
  .facts.is-penned > div::after { transition: transform .6s cubic-bezier(.6, 0, .3, 1) var(--d, .2s); }
  .facts > div:nth-child(2) { --d: .32s; }
  .facts > div:nth-child(3) { --d: .44s; }
  .facts > div:nth-child(4) { --d: .56s; }
  .facts > div:nth-child(5) { --d: .68s; }
}
/* на компьютере три карточки в ряд: галочки ставятся одна за другой */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .need.is-penned:nth-child(2)::before { transition-delay: .8s; }
  .need.is-penned:nth-child(3)::before { transition-delay: 1.05s; }
}
.included__list strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}

.terms { margin-top: 40px; }
.terms dd { color: var(--muted); }
.terms__more {
  margin-top: 18px;
  font-size: .95rem;
}
.terms__more a {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: rgba(var(--seyes), .6);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .2s ease;
}
.terms__more a:hover { color: var(--pen); }

/* ---------- Отзывы ---------- */

.reviews { padding-block: 72px 56px; }
.reviews .h2 { margin-top: 14px; }
@media (min-width: 1080px) {
  .reviews { padding-block: 112px 88px; }
}

.reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
}

/* стрелки для мыши и для тех, кто не привык листать вбок (script.js → setupReviews) */
.chat-nav { display: flex; gap: 8px; }
.chat-nav[hidden] { display: none; }
.chat-nav__btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid rgba(15, 29, 74, .18);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.chat-nav__btn svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-nav__btn:hover:not(:disabled) {
  background: var(--tint);
  border-color: var(--pen);
}
.chat-nav__btn:disabled {
  opacity: .3;
  cursor: default;
}

/* Лента сообщений листается вбок и встаёт по карточкам; края ленты мягко гаснут.
   Маска срезает всё за рамкой, поэтому обводка фокуса — внутри. */
.chat-scroller {
  margin: 28px calc(var(--gutter) * -1) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
}
.chat-scroller::-webkit-scrollbar { display: none; }
.chat-scroller:focus-visible { outline-offset: -2px; }
.chat-scroller { position: relative; }

/* Отзывы приходят, как в мессенджере (script.js → setupReviews): пока ленту не видно, сообщения ждут,
   на месте первого — «печатает…», потом пузыри появляются друг за другом. Один раз; при reduce и без JS всё видно сразу */
.chat.is-waiting .msg { opacity: 0; }
.chat-typing {
  position: absolute;
  z-index: 1;
  top: 6px; left: var(--gutter);
  display: flex;
  gap: 5px;
  padding: 16px 18px;
  border-radius: 18px 18px 18px 6px;
  background: var(--tint);
  transition: opacity .2s ease;
}
.chat-typing.is-gone { opacity: 0; }
.chat-typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: typing-dot 1s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: .35; translate: 0 0; }
  30% { opacity: 1; translate: 0 -3px; }
}
.msg { transform-origin: 0 100%; } /* пузырь растёт от «хвостика» снизу слева */

/* телефон: точки под лентой — какое сообщение сейчас открыто */
.chat-dots { display: none; }
@media (max-width: 719px) {
  .chat-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: -10px;
    transition: opacity .3s ease .3s;
  }
  .chat-dots.is-waiting { opacity: 0; transition: none; }
  .chat-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(var(--seyes), .35);
    transition: background-color .25s ease, transform .25s ease;
  }
  .chat-dots .is-current {
    background: var(--ink);
    transform: scale(1.35);
  }
}

/* поля сверху и снизу — чтобы подъём и свечение при наведении не обрезались */
.chat {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: max-content;
  padding: 6px var(--gutter) 28px;
}

.msg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  flex: none;
  width: min(84vw, 360px); /* на телефоне справа виден край следующего сообщения */
  scroll-snap-align: start;
  padding: 14px 16px 10px;
  border-radius: 18px 18px 18px 6px;
  background: var(--tint);
  font-size: .975rem;
  line-height: 1.55;
  transition: box-shadow .3s ease, transform .3s ease;
}
.msg__name,
.msg__text { flex-basis: 100%; }
.msg p + p { margin-top: .6em; }

/* длинное сообщение свёрнуто до 7 строк; кнопка плавно раскрывает его целиком */
.chat.is-clampable .msg__text {
  max-height: calc(1.55em * 7);
  overflow: hidden;
  transition: max-height .45s var(--ease);
}
.msg.is-clamped:not(.is-open) .msg__text {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.msg__more {
  min-height: 40px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--hue);
  font: 600 .9rem/1.2 var(--f-body);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.msg__more[hidden] { display: none; }

/* сообщение подсвечивается цветом имени автора */
@media (hover: hover) {
  .msg:hover {
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--hue) 45%, transparent),
      0 18px 44px -22px color-mix(in srgb, var(--hue) 45%, transparent);
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .msg:hover { transform: translateY(-3px); }
}

.msg__name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--hue);
  font-weight: 600;
}
/* кружок с силуэтом: женский или мужской (спрайт #ava-f / #ava-m в начале index.html) */
.msg__ava {
  flex: none;
  overflow: hidden;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--hue);
}
.msg__ava svg {
  display: block;
  width: 100%; height: 100%;
  fill: rgba(255, 255, 255, .92);
}
.sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}
.msg .msg__time {
  margin: 4px 0 0 auto;
  color: var(--muted);
  font: 400 .72rem/1 var(--f-mono);
  text-align: right;
}

/* ---------- Шаги ---------- */

.steps {
  display: grid;
  margin-top: 36px;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding: 20px 0 20px 56px;
  border-top: 1px solid var(--line);
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 4px; top: 14px;
  color: var(--red);
  font: 300 2.25rem/1 var(--f-display);
}
.steps h3 {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
}
.steps p {
  margin-top: 6px;
  color: var(--muted);
}

/* шаги соединяет линия ручки: на телефоне от цифры к цифре сверху вниз */
.steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px; top: 58px; bottom: -8px;
  width: 1.5px;
  background: rgba(214, 47, 53, .42);
  transform-origin: top;
}

/* шаг 1: начало сообщения, которое будет набрано в WhatsApp (печатается — script.js → setupTyping) */
.steps .steps__msg {
  position: relative;
  max-width: 17rem;
  margin-top: 14px;
  padding: 9px 13px 10px;
  border-radius: 16px 16px 4px 16px;
  background: var(--tint);
  color: var(--text);
  font-size: .9rem;
  line-height: 1.45;
}
.steps__rest { visibility: hidden; } /* ещё не напечатано, но место уже занято: пузырь не растёт */
.steps__caret { position: relative; }
.steps__caret::after {
  content: "";
  position: absolute;
  left: 0; bottom: -.15em;
  width: 1.5px; height: 1.15em;
  background: var(--pen);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
  }
  .steps li { padding: 64px 0 0; border-top: 0; }
  .steps li::before { left: 0; top: 16px; }
  /* на компьютере одна линия идёт слева направо через все шаги, вместе с промежутками между ними */
  .steps li::after,
  .steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0; right: -28px; top: 0; bottom: auto;
    width: auto; height: 2px;
    background: var(--ink);
    transform-origin: left;
  }
  .steps li:last-child::after { right: 0; }
}

/* Ручка ведёт линию, и цифра шага загорается красным, когда линия до неё дошла (класс .is-penned — script.js → setupPen).
   На телефоне каждый шаг загорается, когда до него докрутят; на компьютере все четыре по очереди */
@media (prefers-reduced-motion: no-preference) {
  .js .steps li:not(.is-penned)::before { color: rgba(var(--seyes), .55); }
  .js .steps li:not(.is-penned)::after { transform: scaleY(0); }
  .steps li.is-penned::before { transition: color .3s ease .05s; }
  .steps li.is-penned::after { transition: transform .6s var(--ease) .25s; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js .steps li:not(.is-penned)::after { transform: scaleX(0); }
  .steps li.is-penned::after { transition: transform .4s linear .15s; }
  .steps li.is-penned:nth-child(2)::before,
  .steps li.is-penned:nth-child(2)::after { transition-delay: .55s; }
  .steps li.is-penned:nth-child(3)::before,
  .steps li.is-penned:nth-child(3)::after { transition-delay: .95s; }
  .steps li.is-penned:nth-child(4)::before,
  .steps li.is-penned:nth-child(4)::after { transition-delay: 1.35s; }
}

/* ---------- Вопросы ---------- */

.faq {
  max-width: 820px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

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

.faq summary {
  position: relative;
  padding: 20px 44px 20px 0;
  font-weight: 500;
  font-size: 1.075rem;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--pen); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 8px; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--ease);
}
/* пока ответ плавно сворачивается, details ещё открыт — стрелку возвращаем сразу (script.js → setupFaq) */
.faq details[open]:not(.is-closing) summary::after { transform: translateY(-25%) rotate(-135deg); }
/* у открытого вопроса на полях появляется красная пометка учителя */
.faq summary::before {
  content: "";
  position: absolute;
  left: -10px; top: 20px; bottom: 20px;
  width: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s var(--ease);
}
.faq details[open]:not(.is-closing) summary::before { transform: scaleY(1); }
@media (min-width: 1024px) {
  .faq summary::before { left: -16px; }
}

.faq details p {
  max-width: 42em;
  padding-bottom: 22px;
  color: var(--muted);
}

/* ---------- Финал и подвал ---------- */

.final { padding-block: 80px 56px; }
.final__title { max-width: 13em; }
.final .lead { margin-top: 20px; }

@media (min-width: 1024px) {
  .final { padding-block: 128px 72px; }
}

.social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 40px;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.social[hidden] { display: none; }
.social__text {
  max-width: 30em;
  color: var(--muted);
}
.social__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.social__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid rgba(15, 29, 74, .18);
  border-radius: 999px;
  font-size: .9rem;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.social__list a:hover {
  border-color: var(--pen);
  background: var(--tint);
}

.footer {
  padding-block: 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .85rem;
}
.footer__in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}
.logo--quiet {
  color: var(--text);
  font-size: 1.1rem;
}
.logo--quiet .logo__b { color: var(--pen); }

/* ---------- Телефон: нажатие видно сразу ---------- */
/* На сенсорном экране кнопка на миг «вдавливается». На iPhone :active срабатывает только при обработчике touchstart
   (script.js → setupTap). Списки переходов повторяют основные правила выше и добавляют к ним scale */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease, scale .15s ease; }
  .cta__alt,
  .social__list a { transition: background-color .2s ease, border-color .2s ease, scale .15s ease; }
  .scenes__tab { transition: color .15s ease, border-color .15s ease, background-color .15s ease, scale .15s ease; }
  .currency__btn { transition: color .2s ease, scale .15s ease; }
  .chat-nav__btn { transition: background-color .2s ease, border-color .2s ease, opacity .2s ease, scale .15s ease; }
  .reel__cover { transition: scale .15s ease; }

  .btn:active,
  .cta__alt:active,
  .social__list a:active,
  .scenes__tab:active,
  .currency__btn:active,
  .chat-nav__btn:not(:disabled):active,
  .reel:active .reel__cover { scale: .96; }
}

/* ---------- Компьютер: красная линия полей прорисовывается вместе с прокруткой ---------- */
/* Вместо неподвижной линии-фона у каждого листа своя линия, она растёт сверху вниз, и её край идёт на 70 % высоты экрана.
   Движение ведёт браузер (view-timeline), это transform, без скрипта. Без поддержки и при reduce линия стоит, как раньше */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sheet__grid {
      position: relative;
      background-image: none;
      view-timeline: --sheet block;
      view-timeline-inset: 0% 30%;
    }
    .sheet__grid::before {
      content: "";
      position: absolute;
      top: 0; bottom: 0;
      left: calc(var(--gutter) + var(--margin-w) + 23px);
      width: 1.5px;
      background: rgba(214, 47, 53, .42);
      transform-origin: top;
      animation: margin-draw linear both;
      animation-duration: auto;
      animation-timeline: --sheet;
      animation-range: entry-crossing 0% entry-crossing 100%;
    }
  }
}
@keyframes margin-draw { from { transform: scaleY(0); } }