/* ─────────────────────────────────────────────────────────────
   Антон Росс — вариант d27 «Выбор Антона» (основа — d22 «Один лист»).
   Сборка по отзыву Антона 08.10 (Серия 3.6): телефон — экран 1 и финальный
   блок карточками варианта 2 (d21), между ними лента варианта 1 естественной
   высоты; компьютер — лента d22, экраны 4a/6/7 без лишних фото как в d23.
   Блок d27 с переопределениями — в конце файла.
   Ниже исходное описание d22:
   Одна сплошная стеклянная лента от шапки до подвала. Экраны —
   отрезки ленты ровно в окно, стоят вплотную, у каждого своё стекло;
   стык прикрыт тонкой линией с ярлыком главы («02 — Как устроена
   тревога»). Внутри как в d21: без плашек, списки, две колонки.
   Контракт «сплошной лист» (Серия 3.3): --fit-sheet, --fit-hdr, --fit-g.
   Порядок: токены → база → компоненты → лента → компьютер → эффекты.
   ───────────────────────────────────────────────────────────── */

:root {
  --font: "Manrope", "Onest", sans-serif;

  --ink: #1F2A22;
  --ink-2: #3a463d;
  --ink-3: #6a7368;
  --pine: #2F5A41;
  --pine-d: #234531;
  --pine-l: #5b8467;
  --pine-1: #e6ece2;
  --amber: #B7792B;
  --amber-d: #7a4f17;
  --cream: #fbf9f4;

  /* льняное стекло ленты */
  --sheet: rgba(251, 249, 244, .76);
  --sheet-brd: rgba(255, 255, 255, .66);
  --line: rgba(31, 42, 34, .12);
  --line-2: rgba(31, 42, 34, .2);
  --seam: rgba(31, 42, 34, .17);
  --shadow: 0 1px 2px rgba(28, 34, 24, .05), 0 18px 40px -22px rgba(28, 34, 24, .3), 0 60px 110px -60px rgba(28, 34, 24, .45);
  --r: 24px;

  /* контракт «сплошной лист» */
  --fit-sheet: 1;
  --fit-hdr: 60px;
  --fit-g: 10px;
  --board-h: calc(100vh - var(--fit-hdr));

  /* внутренние поля ленты (телефон): одинаковые у всех экранов */
  --px: 18px;
  --pt: clamp(14px, 2svh, 20px);
  --py: clamp(16px, 2.4svh, 26px);
  --mg: clamp(10px, 1.7svh, 18px);
}
@supports (height: 100svh) { :root { --board-h: calc(100svh - var(--fit-hdr)); } }
@media (min-width: 600px) { :root { --fit-g: 12px; --px: 26px; } }
@media (max-width: 1023px) and (max-height: 700px) { :root { --fit-hdr: 54px; } }
@media (min-width: 1024px) { :root { --fit-hdr: 64px; --fit-g: clamp(16px, 2.25vw, 56px); } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #e6e3d8;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums;
  touch-action: pan-y;
  overscroll-behavior-y: none;
  overflow-x: clip;
}
img { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: var(--pine); -webkit-tap-highlight-color: transparent; }
p { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; }
b { font-weight: 700; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
blockquote { margin: 0; }
:focus-visible { outline: 3px solid rgba(47, 90, 65, .45); outline-offset: 2px; }
.nw { white-space: nowrap; }
.todo { color: var(--ink-3); font-style: italic; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ic { width: 18px; height: 18px; flex: 0 0 auto; }

/* ── Фон: сосновый лес, один неподвижный слой, тёплая льняная дымка ── */
.page-bg {
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background: #d9d8cb;
}
.page-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/site/forest-rays.webp) center 30% / cover no-repeat;
  filter: saturate(.78) sepia(.1) brightness(1.04);
}
.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 70% 0%, rgba(255, 240, 214, .38) 0%, rgba(255, 240, 214, 0) 70%),
    linear-gradient(180deg, rgba(248, 244, 234, .16) 0%, rgba(248, 244, 234, .3) 55%, rgba(242, 238, 226, .5) 100%);
}

/* ── Типографика ── */
.h1 {
  font-size: clamp(25px, min(7.4vw, 3.6svh), 40px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.032em;
  color: var(--ink);
  text-wrap: balance;
}
.h2 {
  font-size: clamp(22px, min(6.4vw, 3.2svh), 36px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.028em;
  color: var(--ink);
  text-wrap: balance;
}
.h3 {
  font-size: clamp(17.5px, min(4.9vw, 2.45svh), 23px);
  line-height: 1.26;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
}
.lead {
  margin: 0;
  font-size: clamp(15.5px, min(4.3vw, 2.1svh), 19px);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}
.kicker {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pine);
}
.kicker--amber { color: var(--amber); }
.sub {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pine);
}

/* ярлык главы: висит под линией стыка, номер и название мелко */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--ink-3);
}
.eyebrow__n {
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--pine);
  font-variant-numeric: lining-nums tabular-nums;
}
.eyebrow__n::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 14px;
  height: 1px;
  margin: -2px 0 0 10px;
  background: currentColor;
  opacity: .6;
}
.eyebrow__t { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* ── Кнопки ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: -.008em;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s, box-shadow .2s, transform .2s, border-color .2s, color .2s;
}
.btn .ic { width: 19px; height: 19px; transition: transform .25s; }
.btn:hover .ic { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--pine);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 24px -14px rgba(26, 52, 36, .85);
}
.btn--primary:hover { background: var(--pine-d); }
.btn--primary:disabled { opacity: .42; cursor: default; box-shadow: none; }
.btn--primary:disabled .ic { transform: none; }
.btn--soft {
  background: rgba(255, 255, 255, .5);
  color: var(--pine-d);
  border: 1.5px solid rgba(47, 90, 65, .42);
}
.btn--soft:hover { background: rgba(255, 255, 255, .85); border-color: var(--pine); }
.btn--sm { min-height: 40px; padding: 8px 18px; font-size: 14.5px; }
.btn--lg { min-height: 56px; padding: 14px 28px; font-size: 16.5px; }

/* ── Шапка: полоса во всю ширину, плотный фон ── */
.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--fit-hdr);
  background: rgba(249, 247, 241, .93);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(30, 43, 36, .08);
  transition: box-shadow .3s, background-color .3s;
}
.hdr.is-scrolled { background: rgba(249, 247, 241, .95); box-shadow: 0 12px 30px -26px rgba(20, 36, 26, .6); }
.hdr__in {
  height: 100%;
  padding: 0 var(--fit-g);
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  margin-right: auto;
  min-width: 0;
  padding-left: 4px;
  color: var(--ink);
  text-decoration: none;
}
.brand__leaf {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(47, 90, 65, .16);
}
.brand__leaf img { display: block; width: auto; height: 25px; filter: brightness(.8) saturate(1.25); }
.brand__leaf--sm { width: 28px; height: 28px; }
.brand__leaf--sm img { height: 18px; }
.brand__txt { display: flex; flex-direction: column; min-width: 0; }
.brand__name { font-size: 16.5px; line-height: 1.15; font-weight: 700; letter-spacing: -.018em; }
.brand__role { font-size: 12.5px; line-height: 1.25; font-weight: 400; color: var(--ink-3); }

.hnav { display: none; }
.hdr__cta { opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .25s, visibility .25s, transform .25s, background-color .2s; }
.hdr.show-cta .hdr__cta { opacity: 1; visibility: visible; transform: none; }

.burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: var(--ink);
  transition: background-color .2s;
}
.burger:hover { background: rgba(47, 90, 65, .07); }
.burger__lines { position: relative; display: block; width: 20px; height: 14px; }
.burger__lines i {
  position: absolute;
  left: 0; right: 0;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s, opacity .2s, top .25s;
}
.burger__lines i:nth-child(1) { top: 0; }
.burger__lines i:nth-child(2) { top: 6px; }
.burger__lines i:nth-child(3) { top: 12px; }
.burger[aria-expanded="true"] .burger__lines i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__lines i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.burger__t { display: none; font-size: 15px; font-weight: 600; }

/* меню — сплошной фон (стекло поверх стекла просвечивает) */
.menu {
  position: absolute;
  top: calc(100% + 8px);
  right: var(--fit-g);
  left: var(--fit-g);
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--cream);
  border: 1px solid rgba(30, 43, 36, .08);
  border-radius: 20px;
  box-shadow: 0 30px 60px -30px rgba(20, 36, 26, .55);
  max-height: calc(100svh - var(--fit-hdr) - 24px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
.menu__label { margin: 4px 14px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.menu a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--ink);
  font-weight: 500;
  font-size: 16.5px;
  text-decoration: none;
  transition: background-color .2s;
}
.menu a:hover { background: rgba(47, 90, 65, .07); }
.menu__cta { margin-top: 8px; }

/* ═════════════ Лента: одна сплошная плашка от шапки до подвала ═════════════ */
/* обёртка без стекла: только общая мягкая тень и скругления ленты */
.ribbon {
  margin: calc(var(--fit-hdr) + var(--fit-g)) var(--fit-g) calc(var(--fit-g) + env(safe-area-inset-bottom));
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
main#top { display: flex; flex-direction: column; }

/* экран = отрезок ленты ровно в окно; у каждого своё стекло (не один гигантский слой с blur — iOS),
   отрезки вплотную, без своих теней и скруглений; на телефоне у разделённых разделов — подэкраны */
.sheet, .part, .site-footer {
  position: relative;
  min-width: 0;
  background: var(--sheet);
  border-left: 1px solid var(--sheet-brd);
  border-right: 1px solid var(--sheet-brd);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
}
.sheet, .part {
  min-height: var(--board-h);
  display: flex;
  flex-direction: column;
  gap: var(--mg);
  padding: var(--pt) var(--px) var(--py);
  scroll-margin-top: var(--fit-hdr);
}
/* верх ленты — первый экран: короче на поле над лентой, скругление сверху */
.s1 {
  min-height: calc(var(--board-h) - var(--fit-g));
  border-top: 1px solid var(--sheet-brd);
  border-radius: var(--r) var(--r) 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  scroll-margin-top: calc(var(--fit-hdr) + var(--fit-g));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sheet, .part, .site-footer { background: rgba(251, 249, 244, .95); }
}
.sheet > *, .part > * { min-width: 0; }

/* стык отрезков: линия 1px по внутренним полям ленты, ярлык главы висит под её началом */
.site-footer::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: var(--px); right: var(--px);
  top: 0;
  height: 1px;
  background: var(--seam);
  pointer-events: none;
}
@media (max-width: 1023px) {
  [data-screen-m]:not([data-screen-m="1"])::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: var(--px); right: var(--px);
    top: 0;
    height: 1px;
    background: var(--seam);
    pointer-events: none;
  }
}
@media (min-width: 1024px) {
  [data-screen]:not([data-screen="1"])::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: var(--px); right: var(--px);
    top: 0;
    height: 1px;
    background: var(--seam);
    pointer-events: none;
  }
  .eyebrow--m { display: none; }
}

/* нижняя строка листа: тонкая линия над ней */
.foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-top: var(--mg);
  border-top: 1px solid var(--line);
}
.foot__text { margin: 0; font-size: 16px; line-height: 1.42; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.foot__text .h3 { margin-bottom: 4px; }
.foot__text p { margin: 0; font-size: 15px; font-weight: 400; color: var(--ink-2); }

/* указатель вниз: строка с текстом и стрелкой в кружке */
.hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;
  text-decoration: none;
}
.hint__ic {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(47, 90, 65, .45);
  color: var(--pine);
  transition: background-color .25s, color .25s, border-color .25s;
}
.hint__ic .ic { width: 18px; height: 18px; animation: bob 3s ease-in-out infinite; }
.hint:hover .hint__ic { background: var(--pine); border-color: var(--pine); color: #fff; }
@keyframes bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }

/* ── Видео: переключатель и обложка ── */
.vswitch {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
}
.vswitch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 18px;
  border-radius: 999px;
  color: var(--pine-d);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.vswitch__btn .ic { width: 15px; height: 15px; }
.vswitch__btn.is-on { background: var(--pine); color: #fff; }
.vswitch__btn:not(.is-on):hover { background: rgba(47, 90, 65, .08); }

.vplayer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #1b3325;
  box-shadow: 0 2px 4px rgba(20, 36, 26, .08), 0 24px 44px -26px rgba(16, 32, 22, .7);
  isolation: isolate;
}
.vplayer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  pointer-events: none;
}
.vplayer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vcover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  text-align: left;
  color: #fff;
  background:
    radial-gradient(90% 120% at 0% 100%, rgba(91, 132, 103, .5) 0%, rgba(91, 132, 103, 0) 60%),
    linear-gradient(120deg, #18301f 0%, #24432f 55%, #32563e 100%);
  overflow: hidden;
}
.vcover__photo {
  position: absolute;
  top: 0; right: 0;
  width: 58%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.vcover--alt .vcover__photo { object-position: center 38%; }
.vcover:hover .vcover__photo { transform: scale(1.025); }
.vcover__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 36, 25, .74) 0%, rgba(18, 36, 25, .34) 50%, rgba(18, 36, 25, 0) 74%),
    linear-gradient(0deg, rgba(18, 36, 25, .38) 0%, rgba(18, 36, 25, 0) 40%);
}
.vcover__txt {
  position: absolute;
  left: 16px; top: 16px;
  width: 62%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.vcover__kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #d9eadb;
}
.vcover__title {
  font-size: clamp(15px, 4.4vw, 26px);
  line-height: 1.16;
  font-weight: 600;
  letter-spacing: -.012em;
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(10, 24, 16, .35);
}
.vcover__play {
  position: absolute;
  left: 16px; bottom: 16px;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--pine);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .18), 0 14px 30px -10px rgba(0, 0, 0, .55);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.vcover__play svg { position: relative; width: 42%; height: 42%; margin-left: 8%; }
.vcover__play i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .7);
  opacity: 0;
  animation: ring 4.8s ease-out infinite;
}
.vcover__play i + i { animation-delay: 2.4s; }
@keyframes ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.75); opacity: 0; } }
/* малое кольцо-пульс вокруг Play (d27: у всех обложек, чтобы не наползало на заголовок) */
@keyframes ringSm { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }
.vcover:hover .vcover__play,
.vcover:focus-visible .vcover__play { transform: scale(1.06); box-shadow: 0 0 0 11px rgba(255, 255, 255, .22), 0 16px 34px -10px rgba(0, 0, 0, .6); }

/* ── Фото в листе (одно на экран) ── */
.pic { position: relative; overflow: hidden; border-radius: 16px; background: var(--pine-1); }
.pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pic img[src$="breathing.webp"] { object-position: 80% 40%; transform-origin: 80% 40%; }

/* ═════════════ Лист 1 ═════════════ */
.s1 { justify-content: space-between; }
.s1__text, .s1__media, .media__box { display: contents; }
.s1 .eyebrow { order: 0; }
.s1 .h1 { order: 1; }
.s1 .vswitch { order: 2; }
.s1 .vplayer { order: 3; }
.s1 .ticks { order: 4; }
.s1__cta { order: 5; }
.s1__foot { order: 6; }

.ticks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ticks li { display: flex; align-items: center; gap: 7px; font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--ink-2); }
.ticks .ic { width: 16px; height: 16px; color: var(--pine); }

.s1__cta { display: grid; gap: 8px; }
.s1__cta .btn { width: 100%; }
.s1__note { margin: 0; font-size: clamp(12.5px, 1.7svh, 14px); line-height: 1.45; color: var(--ink-3); text-wrap: pretty; }
.s1__foot { padding-top: 6px; }

/* ═════════════ Лист 2 ═════════════ */
.s2__head .lead { margin-top: 8px; }
.col { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.s2__trap { flex: 1 1 auto; }
.s2__trap .h3, .s2__way .h3 { margin-bottom: 4px; }
.s2__div { display: none; }

/* круг паники: кольцо, четыре узла на нём, стрелки по ходу, точка бежит по кругу */
.loop-box { flex: 1 1 auto; min-height: 200px; display: grid; place-items: center; container-type: size; }
.loop {
  --icn: max(34px, 15cqi);
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1;
  container-type: inline-size;
}
@supports (width: 1cqh) { .loop { width: min(100cqw, 100cqh, 760px); } }
.loop__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.loop__ring circle { fill: none; stroke: rgba(183, 121, 43, .5); stroke-width: .5; stroke-dasharray: 1.2 1.6; stroke-linecap: round; }
.loop__node {
  position: absolute;
  z-index: 1;
  width: 40cqi;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4cqi;
  text-align: center;
  color: var(--amber-d);
  font-size: clamp(11.5px, 5cqi, 21px);
  line-height: 1.18;
  font-weight: 550;
}
.loop__node--1, .loop__node--2 { flex-direction: column-reverse; top: calc(25.96% + var(--icn) / 2); transform: translate(-50%, -100%); }
.loop__node--3, .loop__node--4 { top: calc(74.04% - var(--icn) / 2); transform: translateX(-50%); }
.loop__node--1, .loop__node--4 { left: 25.96%; }
.loop__node--2, .loop__node--3 { left: 74.04%; }
.loop__ic {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--icn); height: var(--icn);
  border-radius: 50%;
  background: #fffaf2;
  border: 1.5px solid rgba(183, 121, 43, .55);
  color: var(--amber);
}
.loop__ic svg { width: 54%; height: 54%; }
.loop__lbl { text-wrap: balance; }
.loop__arr {
  position: absolute;
  z-index: 1;
  width: 7cqi; height: 7cqi;
  min-width: 20px; min-height: 20px;
  margin: max(-3.5cqi, -10px) 0 0 max(-3.5cqi, -10px);
  display: grid;
  place-items: center;
  color: var(--amber);
}
.loop__arr svg { width: 100%; height: 100%; }
.loop__arr--t { left: 50%; top: 16%; }
.loop__arr--r { left: 84%; top: 50%; }
.loop__arr--b { left: 50%; top: 84%; }
.loop__arr--l { left: 16%; top: 50%; }
.loop__arr--r svg { transform: rotate(90deg); }
.loop__arr--b svg { transform: rotate(180deg); }
.loop__arr--l svg { transform: rotate(-90deg); }
.loop__core {
  position: absolute;
  left: 50%; top: 50%;
  width: 12cqi; height: 12cqi;
  min-width: 34px; min-height: 34px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--amber);
  background: rgba(183, 121, 43, .1);
}
.loop__core svg { width: 58%; height: 58%; }
.loop__orbit { position: absolute; inset: 16%; z-index: 2; border-radius: 50%; pointer-events: none; }
.loop__orbit::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #e9a64c;
  box-shadow: 0 0 0 4px rgba(233, 166, 76, .2), 0 0 16px 5px rgba(233, 166, 76, .5);
}

/* путь выхода: пять шагов вертикальной линией */
.path {
  --dot: clamp(38px, 5.4svh, 52px);
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  max-height: calc(5 * var(--dot) + 4 * 40px);
  margin: 6px 0;
}
.path__step { position: relative; display: flex; align-items: center; gap: 14px; }
.path__dot {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--dot);
  height: var(--dot);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fbfdf9;
  border: 1.5px solid rgba(47, 90, 65, .42);
  color: var(--pine);
}
.path__dot svg { width: 50%; height: 50%; }
.path__txt { font-size: 16.5px; line-height: 1.25; font-weight: 550; color: var(--ink); }
.path__step--end .path__dot { background: var(--pine); border-color: var(--pine); color: #fff; }
.path__step--end .path__txt { font-size: 19px; font-weight: 650; color: var(--pine); }
.path::before, .path::after {
  content: "";
  position: absolute;
  left: calc(var(--dot) / 2 - 1px);
  top: calc(var(--dot) / 2);
  bottom: calc(var(--dot) / 2);
  width: 2px;
  border-radius: 2px;
}
.path::before { background: rgba(47, 90, 65, .16); }
.path::after { background: var(--pine-l); transform-origin: 50% 0; }

.note { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14.5px; line-height: 1.42; font-weight: 500; text-wrap: pretty; }
.note__ic { flex: 0 0 auto; width: 22px; height: 22px; margin-top: -1px; }
.note--amber { color: var(--amber-d); }
.note--amber .note__ic { color: var(--amber); }
.note--green { color: var(--pine-d); font-weight: 600; }
.note--green .note__ic { color: var(--pine); }

/* ═════════════ Лист 3 ═════════════ */
.s3__head .lead { margin-top: 8px; }
.s3__media { display: flex; flex-direction: column; gap: 10px; }
.s3__a { justify-content: space-between; }
.feats { counter-reset: f; display: flex; flex-direction: column; flex: 1 1 auto; justify-content: space-around; }
.feat {
  counter-increment: f;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  padding: clamp(10px, 1.6svh, 16px) 0;
  border-top: 1px solid var(--line);
}
.feat:first-child { border-top: 0; padding-top: 0; }
.feat::before {
  content: counter(f, decimal-leading-zero);
  grid-row: 1 / span 2;
  min-width: 1.6em;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--pine);
  font-variant-numeric: lining-nums tabular-nums;
}
.feat__t { font-size: clamp(17px, 2.3svh, 20px); line-height: 1.3; font-weight: 600; color: var(--ink); }
.feat p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }

/* ═════════════ Лист 4a ═════════════ */
.s4a__text { display: flex; flex-direction: column; gap: var(--mg); }
.s4a .sub { margin-top: 2px; }
.changes li { display: flex; align-items: flex-start; gap: 14px; padding: clamp(10px, 1.6svh, 16px) 0; border-top: 1px solid var(--line); }
.changes li:first-child { border-top: 0; padding-top: 2px; }
.changes__ic { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(47, 90, 65, .3); color: var(--pine); }
.changes__ic svg { width: 19px; height: 19px; }
.changes p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.changes b { color: var(--ink); font-weight: 600; }
.s4a__pic { flex: 1 1 0; min-height: 140px; }
.s4a__pic img { object-position: 50% 30%; }

/* ═════════════ Лист 4b: история последовательностью ═════════════ */
.cases { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; }
.cases__track {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: calc(2 * var(--px));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}
.cases__track::-webkit-scrollbar { display: none; }
.cases__track:focus-visible { outline-offset: -3px; }
.case {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4svh, 14px);
}
.case__head { display: flex; align-items: center; gap: 12px; }
.case__ava {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background: var(--pine);
  font-size: 17px;
  font-weight: 600;
}
.case--draft .case__ava { color: var(--pine); background: none; box-shadow: inset 0 0 0 1.5px rgba(47, 90, 65, .4); }
.case__name { font-size: 18px; line-height: 1.2; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.case__ctx { margin: 2px 0 0; font-size: 14px; color: var(--ink-3); }
.case__line { display: flex; flex-direction: column; justify-content: center; gap: 6px; flex: 1 1 auto; }
.case__step p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.case__label {
  display: block;
  margin-bottom: 3px;
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pine);
}
.case__step--was .case__label { color: var(--ink-3); }
.case__arr { display: grid; place-items: center; width: 18px; height: 18px; color: var(--pine-l); }
.case__arr svg { width: 16px; height: 16px; transform: rotate(90deg); }
.case__insight { padding-left: 14px; border-left: 2px solid var(--pine-l); }
.case__insight p { font-size: 16px; line-height: 1.42; font-weight: 500; color: var(--ink); }
.case--draft .case__step p, .case--draft .case__ctx { color: var(--ink-3); font-style: italic; }
.case__shot {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 2px;
  color: var(--pine-d);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(47, 90, 65, .35);
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
.case__shot:hover { text-decoration-color: var(--pine); }
.case__shot .ic { width: 18px; height: 18px; }

.cases__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 14px; }
.cases__nav { display: flex; align-items: center; gap: 4px; }
.round-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  color: var(--pine-d);
  transition: border-color .2s, opacity .2s, background-color .2s;
}
.round-btn svg { width: 19px; height: 19px; }
.round-btn:hover:not(:disabled) { border-color: var(--pine); background: rgba(47, 90, 65, .06); }
.round-btn:disabled { opacity: .35; cursor: default; }
.cases__dots { display: flex; align-items: center; }
/* точки: видимые как прежде, а область нажатия 44x44 (соседние чуть заходят друг на друга, центр точки — свой) */
.cases__dots { padding-inline: 6px; }
.cases__dots button { position: relative; width: 44px; height: 44px; margin: 0 -6px; }
.cases__dots button::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 99px;
  background: rgba(30, 43, 36, .22);
  transition: width .3s, margin .3s, background-color .3s;
}
.cases__dots button.on::before { width: 22px; margin-left: -11px; background: var(--pine); }
.fineprint { margin: 0; font-size: 12px; line-height: 1.35; color: var(--ink-3); }

/* ═════════════ Лист 5: аккордеон «Обо мне» ═════════════ */
.acc { display: flex; flex-direction: column; }
.acc__item + .acc__item { border-top: 1px solid var(--line); }
.acc__sum {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 0;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.acc__sum::-webkit-details-marker { display: none; }
.acc__num {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(47, 90, 65, .35);
  color: var(--pine);
  font-size: 15px;
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  transition: background-color .3s, color .3s, box-shadow .3s;
}
.acc__item[open] .acc__num { background: var(--pine); color: #fff; box-shadow: none; }
.acc__title { flex: 1; min-width: 0; font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.acc__item--me .acc__title { font-size: clamp(22px, min(6.2vw, 3.1svh), 32px); font-weight: 650; }
.acc__chev { flex: 0 0 auto; width: 26px; height: 26px; color: var(--pine); transition: transform .3s; }
.acc__item[open] .acc__chev { transform: rotate(180deg); }
.acc__sum:hover .acc__title { color: var(--pine-d); }
.acc__body { padding: 4px 0 18px; }
.acc__item:not([open]) > .acc__body, .faq__item:not([open]) > .faq__a { display: none; }

.about { display: flex; flex-direction: column; gap: 16px; }
.about__photo { height: clamp(170px, 26svh, 300px); }
.about__photo img { object-position: 50% 24%; }
.about__text { display: flex; flex-direction: column; gap: 14px; }
.about__quote {
  padding-left: 16px;
  border-left: 2px solid var(--pine-l);
  font-size: clamp(18px, min(5vw, 2.6svh), 22px);
  line-height: 1.38;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.about__read p { color: var(--ink-2); }
.about__more { display: none; }
.about__more.is-open { display: block; }
.about__more p { color: var(--ink-3); }
.more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0 0 4px;
  color: var(--pine-d);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(47, 90, 65, .35);
  text-underline-offset: 4px;
}
.more-btn:hover { text-decoration-color: var(--pine); }
.more-btn .ic { width: 18px; height: 18px; transition: transform .3s; }
.more-btn[aria-expanded="true"] .ic { transform: rotate(180deg); }
.diplomas__title { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pine); }
.diplomas__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.diplomas__item {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(30, 43, 36, .1), 0 8px 16px -12px rgba(20, 36, 26, .5);
  transition: transform .25s, box-shadow .25s;
}
.diplomas__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diplomas__item:hover { transform: translateY(-3px); }

.acc__intro .lead { margin-bottom: 10px; }
.acc__intro p { color: var(--ink-2); }
.micro { counter-reset: m; margin-top: 14px; }
.micro li { counter-increment: m; position: relative; padding: 14px 0 14px 40px; border-top: 1px solid var(--line); }
.micro li::before { content: counter(m); position: absolute; left: 0; top: 13px; font-size: 22px; line-height: 1; font-weight: 300; color: var(--pine); }
.micro__title { margin-bottom: 6px; font-size: 16.5px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.micro li p { margin: 0; font-size: 15px; color: var(--ink-2); }
.ev__world p { color: var(--ink-2); }
.marks { display: flex; flex-wrap: wrap; align-items: center; margin: 10px 0 12px; }
.marks li { padding: 2px 16px; border-left: 1px solid var(--line-2); font-size: 18px; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); }
.marks li:first-child { padding-left: 0; border-left: 0; }
.ev__title { margin: 24px 0 6px; }
.facts { display: grid; margin-top: 12px; }
.fact { padding: 14px 0; border-top: 1px solid var(--line); }
.fact__num { margin: 0 0 6px; font-size: 40px; line-height: 1; font-weight: 300; letter-spacing: -.02em; color: var(--pine); font-variant-numeric: lining-nums tabular-nums; }
.fact__num--word { font-size: 30px; line-height: 1.1; }
.fact__title { margin-bottom: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.fact p:last-child { font-size: 15px; color: var(--ink-2); }
.papers { display: grid; margin-top: 10px; }
.paper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.paper__title { font-size: 16.5px; line-height: 1.3; font-weight: 600; color: var(--ink); transition: color .2s; }
.paper:hover .paper__title { color: var(--pine); }
.paper__meta { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.paper p { font-size: 15px; color: var(--ink-2); }
.paper b { color: var(--ink); }
.paper__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--pine); }
.paper__link .ic { width: 16px; height: 16px; }

/* ═════════════ Лист 6a ═════════════ */
.s6a__lead { display: flex; flex-direction: column; gap: var(--mg); flex: 1 1 auto; }
.s6a__title { font-size: clamp(28px, min(8.4vw, 4.6svh), 48px); line-height: 1.06; }
.s6a__pic { flex: 1 1 0; min-height: 140px; }
.nowork li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(12px, 2svh, 20px) 0;
  border-top: 1px solid var(--line);
  font-size: clamp(16.5px, min(4.6vw, 2.4svh), 21px);
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
}
.nowork li:first-child { border-top: 0; }
.nowork .ic {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  padding: 9px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(30, 43, 36, .28);
  color: var(--ink-2);
}

/* ═════════════ Лист 6b ═════════════ */
.s6b__side { display: contents; }
.s6b .eyebrow { order: 0; }
.s6b .h2 { order: 1; }
.s6b__pic { display: none; }
.faq__list { order: 2; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-around; }
.s6b__cta { order: 3; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:first-child { border-top: 0; }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding: clamp(8px, 1.3svh, 14px) 0;
  list-style: none;
  cursor: pointer;
  font-size: 15.5px;
  line-height: 1.32;
  font-weight: 500;
  color: var(--ink);
  transition: color .2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .ic { width: 22px; height: 22px; color: var(--pine); transition: transform .3s; }
.faq__item[open] summary { color: var(--pine-d); }
.faq__item[open] summary .ic { transform: rotate(180deg); }
.faq__item summary:hover { color: var(--pine); }
.faq__a { padding: 0 34px 12px 0; color: var(--ink-2); font-size: 15px; }

/* ═════════════ Лист 7 ═════════════ */
.s7__pic { flex: 1 1 0; min-height: 150px; }
.s7__pic img { object-position: 40% 40%; }
.s7__head .lead { margin-top: 10px; }
.s7__b { justify-content: space-between; }
.s7__step { display: flex; flex-direction: column; gap: 10px; }
.s7__sub { margin-bottom: 2px; }
.steps li { display: flex; align-items: center; gap: 14px; padding: clamp(9px, 1.5svh, 14px) 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.42; color: var(--ink-2); }
.steps li:first-child { border-top: 0; padding-top: 4px; }
.steps__ic { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(47, 90, 65, .3); color: var(--pine); }
.steps__ic svg { width: 19px; height: 19px; }
.s7__step .btn { width: 100%; margin-top: 6px; }
.s7__ask .h3 { font-size: 17.5px; }
.ask__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.msg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, background-color .2s, transform .2s;
}
.msg-btn:hover { border-color: var(--pine); background: rgba(255, 255, 255, .55); }
.msg-btn__ic { width: 24px; height: 24px; flex: 0 0 auto; }

/* ── Подвал: последний отрезок ленты, компактный, скругление снизу ── */
.site-footer {
  border-bottom: 1px solid var(--sheet-brd);
  border-radius: 0 0 var(--r) var(--r);
  padding: 18px var(--px) 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.site-footer__inner { display: grid; gap: 10px; }
.site-footer__main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.site-footer__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 500; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer a { color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(30, 43, 36, .25); text-underline-offset: 3px; }
.site-footer a:hover { color: var(--pine); }
.site-footer__note { margin: 0; font-size: 12.5px; }

/* ═════════════ Всплывающие окна (сплошной фон) ═════════════ */
html.modal-open { overflow: hidden; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(16, 28, 20, .52);
  opacity: 0;
  transition: opacity .25s;
}
.modal.is-open { opacity: 1; }
.modal__box {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 20px 22px;
  border-radius: var(--r);
  background: var(--cream);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 40px 90px -30px rgba(0, 0, 0, .55);
  transform: translateY(14px) scale(.985);
  transition: transform .34s cubic-bezier(.2, .8, .2, 1);
}
.modal.is-open .modal__box { transform: none; }
.modal__close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(30, 43, 36, .06);
  color: var(--ink-2);
  transition: background-color .2s;
}
.modal__close svg { width: 20px; height: 20px; }
.modal__close:hover { background: rgba(30, 43, 36, .12); }

/* квиз */
.quiz__head { display: flex; align-items: flex-start; gap: 14px; padding-right: 40px; }
.quiz.is-later .quiz__head { align-items: center; }
.face {
  display: block;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--pine-1);
  box-shadow: 0 0 0 1px rgba(47, 90, 65, .2), 0 8px 18px -10px rgba(20, 36, 26, .6);
}
.face img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(2.1); transform-origin: 51% 27%; }
.quiz__ava { flex: 0 0 64px; width: 64px; height: 64px; }
.quiz__title { font-size: 21px; line-height: 1.2; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.quiz__lead { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.quiz.is-later .quiz__lead { display: none; }
.quiz__progress { display: flex; align-items: center; gap: 12px; margin: 18px 0 16px; }
.quiz__bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(47, 90, 65, .12); overflow: hidden; }
.quiz__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--pine); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.quiz__pct { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--pine); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.qstep { margin: 0; padding: 0; border: 0; min-width: 0; }
.qstep.is-enter { animation: qIn .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes qIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.qstep__q { display: block; margin: 0 0 14px; padding: 0; font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.qstep__hint { margin: -8px 0 12px; font-size: 14px; color: var(--ink-3); }
.qopts { display: grid; gap: 8px; }
.qopt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid rgba(30, 43, 36, .13);
  cursor: pointer;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 500;
  transition: border-color .15s, background-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.qopt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.qopt::before {
  content: "";
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(30, 43, 36, .28);
  background: #fff center / 14px no-repeat;
  transition: background-color .15s, border-color .15s;
}
.qopt--multi::before { border-radius: 7px; }
.qopt:hover { border-color: rgba(47, 90, 65, .45); }
.qopt:focus-within { outline: 3px solid rgba(47, 90, 65, .3); outline-offset: 1px; }
.qopt.is-checked { border-color: var(--pine); background: #f2f7f1; }
.qopt.is-checked::before {
  border-color: var(--pine);
  background-color: var(--pine);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.qnext { width: 100%; margin-top: 16px; }
.qdoubt { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: #f5f0e4; border: 1px solid rgba(183, 121, 43, .35); font-size: 15px; line-height: 1.5; color: var(--amber-d); }
.qdoubt .qnext { margin-top: 12px; }
.qfields { display: grid; gap: 12px; }
.qfield__label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.qfield input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(30, 43, 36, .18);
  background: #fff;
  font: 400 17px/1.3 var(--font);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.qfield input:focus { outline: none; border-color: var(--pine-l); box-shadow: 0 0 0 4px rgba(47, 90, 65, .14); }
.qfield input.is-bad { border-color: #b4483a; box-shadow: 0 0 0 4px rgba(180, 72, 58, .1); }
.qnote { margin: 12px 0; padding: 11px 14px; border-radius: 14px; background: rgba(47, 90, 65, .08); font-size: 14.5px; line-height: 1.45; font-weight: 500; color: var(--pine-d); }
.qconsent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; font-size: 14px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.qconsent input { flex: 0 0 20px; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pine); }
.qerr { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #fbede8; font-size: 14px; font-weight: 600; color: #a23a2c; }
.qsubmit { width: 100%; }
.qprivacy { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; text-align: center; color: var(--ink-3); }
.qprivacy a { color: var(--ink-3); }
.quiz__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 16px 0 10px;
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color .2s, color .2s;
}
.quiz__back:hover { background: rgba(47, 90, 65, .07); color: var(--pine-d); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* заявка отправлена */
.done { text-align: center; padding-top: 34px; }
.done__photo { width: 128px; height: 128px; margin: 0 auto 18px; border-width: 3px; box-shadow: 0 0 0 6px rgba(229, 238, 228, .9), 0 16px 30px -16px rgba(20, 36, 26, .7); }
.done__photo img { transform: scale(1.75); }
.done__title { margin-bottom: 10px; font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.done__lead { font-size: 17px; font-weight: 600; color: var(--pine-d); }
.done p { color: var(--ink-2); }
.done .btn { margin-top: 12px; min-width: 190px; }

/* текстовая версия видео */
.read { width: min(720px, 100%); padding: 28px 22px 26px; }
.read .kicker { margin-bottom: 10px; }
.read__title { margin: 0 44px 16px 0; font-size: clamp(21px, 1vw + 17px, 28px); line-height: 1.2; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
.read__body { padding-top: 14px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.6; color: var(--ink-2); }

/* скриншот и диплом */
.shot { width: min(420px, 100%); padding: 12px; background: #fff; }
.shot img { display: block; width: 100%; height: auto; max-height: calc(100svh - 80px); object-fit: contain; border-radius: 14px; }
.zoom { width: min(980px, 100%); padding: 12px; background: #fff; }
.zoom img { display: block; width: 100%; height: auto; max-height: calc(100svh - 64px); object-fit: contain; border-radius: 10px; }
.shot .modal__close, .zoom .modal__close { background: rgba(255, 255, 255, .94); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4); }

@media (max-width: 719px) {
  .modal--sheet { align-items: flex-end; padding: 0; }
  .modal--sheet .modal__box {
    width: 100%;
    max-height: 94svh;
    border-radius: 24px 24px 0 0;
    padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(40px);
  }
  .modal--sheet.is-open .modal__box { transform: none; }
  .quiz__ava { flex-basis: 56px; width: 56px; height: 56px; }
  .quiz__title { font-size: 19px; }
  .hdr__cta { display: none; }
}
@media (min-width: 720px) {
  .modal__box { padding: 32px 30px 26px; }
  .burger { width: auto; padding: 0 18px 0 14px; box-shadow: inset 0 0 0 1px var(--line-2); }
  .burger__t { display: inline; }
  .menu { left: auto; width: 360px; padding: 12px; border-radius: 22px; }
  .site-footer__links { margin-left: auto; }
}

/* ═════════════ Телефон и планшет стоя: разделённые разделы — подэкраны подряд ═════════════ */
@media (max-width: 1023px) {
  .sheet--split { display: contents; }
  .ticks li { white-space: nowrap; }
  /* круг паники: размер от высоты доски (cqh во flex-колонке с min-height в Chrome даёт 0) */
  .loop-box { container-type: inline-size; min-height: 0; }
  .loop { width: min(100%, 440px, max(200px, calc(var(--board-h) - 400px))); }
  .s2__way { flex: 1 1 auto; }
  .s2__way .path { max-height: calc(5 * var(--dot) + 4 * 34px); }
  .s2__b { justify-content: space-between; }
  /* видео 10 мин забирает свободную высоту, но не уже 4:3 */
  /* видео 3 — горизонтальное 16:9; свободная высота подэкрана уходит в воздух вокруг него */
  .s3__a { justify-content: flex-start; }
  .s3__media { flex: 1 1 auto; justify-content: center; }
  .s3__media .media__box { display: flex; flex-direction: column; gap: 10px; }
  .s3__a .h2 { font-size: clamp(22px, min(7.4vw, 3.8svh), 36px); }
  /* длинные кнопки в одну строку */
  .btn { padding-inline: 18px; font-size: 15.5px; gap: 8px; }
  .btn .ic { width: 17px; height: 17px; }
  .s7__b { justify-content: flex-start; }
  .s7__step { flex: 1 1 auto; }
  .s7__step .steps { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; }
}
@media (max-width: 479px) {
  .ask__btns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .btn { padding-inline: 12px; font-size: 14.5px; gap: 6px; letter-spacing: -.01em; }
  .btn .ic { width: 16px; height: 16px; }
  :root { --px: 14px; }
}

/* ═════════════ Компьютер: отрезок ленты во всё окно, размеры от --u (1px при 1920x1080) ═════════════ */
@media (min-width: 1024px) {
  :root {
    --u: min(calc(100vw / 1920), calc(100vh / 1130));
    --px: max(26px, calc(60 * var(--u)));
    --pt: max(18px, calc(30 * var(--u)));
    --py: max(20px, calc(44 * var(--u)));
    --cg: max(34px, calc(76 * var(--u)));
    --rg: max(14px, calc(26 * var(--u)));
    --mg: var(--rg);
    --r: max(22px, calc(30 * var(--u)));
  }
  @supports (height: 100svh) { :root { --u: min(calc(100vw / 1920), calc(100svh / 1130)); } }

  .part { display: contents; }
  .sheet {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--cg);
    row-gap: var(--rg);
    align-content: stretch;
    padding: var(--pt) var(--px) var(--py);
  }
  /* одно и то же стекло у всех отрезков и подвала, иначе на стыке скачет яркость */
  .sheet, .site-footer {
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
  }
  .eyebrow { grid-column: 1 / -1; gap: max(10px, calc(14 * var(--u))); font-size: clamp(11.5px, calc(14 * var(--u)), 19px); }
  .eyebrow__n::after { width: max(14px, calc(20 * var(--u))); margin-left: max(10px, calc(14 * var(--u))); }
  .foot { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--cg); padding-top: var(--rg); }
  .foot__text { flex: 1 1 auto; font-size: clamp(15.5px, calc(21 * var(--u)), 30px); }
  .foot__text p { font-size: clamp(14.5px, calc(18 * var(--u)), 26px); }
  .foot .btn { flex: 0 0 auto; }
  .hint { font-size: clamp(15px, calc(19 * var(--u)), 27px); min-height: max(44px, calc(56 * var(--u))); }
  .hint__ic { width: max(40px, calc(52 * var(--u))); height: max(40px, calc(52 * var(--u))); }
  .hint__ic .ic { width: 42%; height: 42%; }

  /* типографика */
  .h1 { font-size: clamp(32px, calc(70 * var(--u)), 104px); line-height: 1.05; }
  .h2 { font-size: clamp(26px, calc(50 * var(--u)), 76px); }
  .h3 { font-size: clamp(18px, calc(27 * var(--u)), 40px); }
  .lead { font-size: clamp(15.5px, calc(22 * var(--u)), 32px); }
  .kicker, .sub { font-size: clamp(12px, calc(15 * var(--u)), 21px); }
  .btn { min-height: max(48px, calc(62 * var(--u))); padding-inline: max(22px, calc(32 * var(--u))); font-size: clamp(15px, calc(19 * var(--u)), 27px); }
  .btn .ic { width: 1.15em; height: 1.15em; }
  .btn--lg { min-height: max(52px, calc(68 * var(--u))); }

  /* видео: переключатель, обложка строго 16:9 и (на экране 1) теги под ней — одной стопкой.
     Коробка — контейнер размера: ширина обложки = min(ширина колонки, свободная высота * 16/9),
     переключатель и теги выравниваются по краям обложки, стопка прижата вправо и стоит по центру высоты */
  .vswitch__btn { min-height: 0; height: 100%; padding-inline: max(16px, calc(24 * var(--u))); font-size: clamp(14.5px, calc(18 * var(--u)), 25px); }
  .vswitch__btn .ic { width: .9em; height: .9em; }
  .media { display: flex; flex-direction: column; min-height: 0; }
  .media__box {
    --sw-h: max(52px, calc(60 * var(--u)));
    --tg-h: 0px;
    --gap: max(10px, calc(16 * var(--u)));
    --rest: calc(var(--sw-h) + var(--gap));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap);
    flex: 1 1 auto;
    min-height: 220px;
    container-type: size;
  }
  .media__box > * { --vw: min(100cqw, calc((100cqh - var(--rest)) * 16 / 9)); }
  .media__box .vswitch { flex: 0 0 auto; height: var(--sw-h); align-self: flex-start; margin-left: calc(100cqw - var(--vw)); }
  .media__box .vplayer { flex: 0 0 auto; width: var(--vw); aspect-ratio: 16 / 9; height: auto; align-self: flex-end; border-radius: max(16px, calc(24 * var(--u))); }
  .vcover__txt { left: max(20px, calc(44 * var(--u))); top: max(20px, calc(44 * var(--u))); width: 56%; gap: max(8px, calc(14 * var(--u))); }
  .vcover__kicker { font-size: clamp(11px, calc(14 * var(--u)), 19px); }
  .vcover__title { font-size: clamp(19px, calc(40 * var(--u)), 58px); }
  .vcover__play { left: max(20px, calc(44 * var(--u))); bottom: max(20px, calc(44 * var(--u))); width: max(60px, calc(104 * var(--u))); height: max(60px, calc(104 * var(--u))); }
  .pic { border-radius: max(16px, calc(22 * var(--u))); }

  /* 1: слева заголовок и запись; справа переключатель, видео 16:9 и теги под ним; внизу указатель */
  .s1 { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "text media" "foot foot"; }
  .s1 .h1, .s1 .vswitch, .s1 .vplayer, .s1 .ticks, .s1__cta, .s1__foot { order: 0; }
  .s1__text { grid-area: text; display: flex; flex-direction: column; justify-content: space-between; gap: var(--rg); min-height: 0; }
  .s1__media { grid-area: media; display: flex; }
  .s1__foot { grid-area: foot; padding-top: max(10px, calc(18 * var(--u))); }
  /* теги — небольшой ряд сразу под обложкой, в её ширину */
  .s1 .media__box { --tg-h: max(30px, calc(40 * var(--u))); --rest: calc(var(--sw-h) + var(--tg-h) + 2 * var(--gap)); }
  .s1 .ticks { flex: 0 0 auto; align-self: flex-end; width: var(--vw); height: var(--tg-h); flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: max(10px, calc(16 * var(--u))); }
  .s1 .ticks li { gap: max(6px, calc(9 * var(--u))); padding: 0; border: 0; font-size: clamp(13px, calc(17.5 * var(--u)), 24px); white-space: nowrap; color: var(--ink-2); }
  .s1 .ticks .ic { width: 1.05em; height: 1.05em; }
  .s1__cta { justify-items: start; gap: max(10px, calc(16 * var(--u))); }
  .s1__cta .btn { width: auto; }
  .s1__note { font-size: clamp(14px, calc(17.5 * var(--u)), 25px); max-width: 34em; }

  /* 2: заголовок на всю ширину; ловушка → линия со стрелкой → решение; строка записи и указатель */
  .s2 {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "head head head" "trap div way" "foot foot foot";
  }
  .s2__head { grid-area: head; }
  .s2__head .lead { margin-top: max(6px, calc(12 * var(--u))); }
  .s2__trap { grid-area: trap; }
  .s2__way { grid-area: way; }
  .s2__foot { grid-area: foot; }
  .s2 .col { align-items: center; text-align: center; gap: max(4px, calc(8 * var(--u))); }
  .s2 .col .h3 { margin-bottom: max(4px, calc(10 * var(--u))); }
  .s2 .note { max-width: 30em; text-align: left; font-size: clamp(14.5px, calc(19 * var(--u)), 27px); }
  .s2 .note__ic { width: 1.3em; height: 1.3em; }
  .s2__div { grid-area: div; position: relative; display: grid; place-items: center; width: max(40px, calc(52 * var(--u))); }
  .s2__div::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
  .s2__div-ic { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; background: #f7f7f2; border: 1px solid var(--line-2); color: var(--pine); }
  .s2__div-ic svg { width: 44%; height: 44%; }
  .loop-box { width: 100%; min-height: 0; }
  /* подписи круга — тем же кеглем, что шаги пути выхода */
  .loop__node { font-size: clamp(13px, min(5cqi, calc(23 * var(--u))), 33px); }
  .path { --dot: clamp(34px, calc(62 * var(--u)), 92px); align-self: center; width: fit-content; max-height: calc(5 * var(--dot) + 4 * 60 * var(--u)); text-align: left; }
  .path__txt { font-size: clamp(15.5px, calc(23 * var(--u)), 33px); }
  .path__step--end .path__txt { font-size: clamp(17px, calc(27 * var(--u)), 38px); }
  .s2__foot .hint { flex: 0 0 auto; gap: max(12px, calc(18 * var(--u))); padding-left: var(--cg); border-left: 1px solid var(--line); }

  /* 3: слева заголовок и три преимущества, справа видео; внизу «С чего мы начнём?» */
  .s3 { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head media" "feats media" "foot foot"; }
  .s3__head { grid-area: head; }
  .s3__head .lead { margin-top: max(8px, calc(14 * var(--u))); }
  .s3__media { grid-area: media; }
  .feats { grid-area: feats; justify-content: space-evenly; min-height: 0; }
  .feat { column-gap: max(14px, calc(22 * var(--u))); padding: max(8px, calc(16 * var(--u))) 0; }
  .feat:first-child { padding-top: max(8px, calc(16 * var(--u))); border-top: 1px solid var(--line); }
  .feat::before { font-size: clamp(14px, calc(19 * var(--u)), 27px); line-height: 1.35; }
  .feat__t { font-size: clamp(16.5px, calc(25 * var(--u)), 36px); }
  .feat p { margin-top: max(2px, calc(6 * var(--u))); font-size: clamp(13.5px, calc(17 * var(--u)), 24px); }
  .s3__foot { grid-area: foot; }
  .s3__foot .h3 { font-size: clamp(17px, calc(25 * var(--u)), 36px); }

  /* 4a без фото (по ТЗ): заголовок крупно во всю ширину; ниже «Что реально меняется» — три колонки
     через тонкие линии: сверху крупный тонкий номер и иконка, снизу вывод и пояснение; между ними через
     все три колонки идёт схема — рваная линия тревоги затухает до ровной (строки колонок общие, subgrid) */
  .s4a { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "text"; }
  .s4a__text { grid-area: text; justify-content: flex-start; gap: max(16px, calc(36 * var(--u))); min-height: 0; }
  .s4a .h2 { max-width: 23em; font-size: clamp(30px, calc(64 * var(--u)), 96px); line-height: 1.08; letter-spacing: -.032em; }
  .s4a__lower { flex: 1 1 auto; min-height: 0; }
  .s4a__lower .sub { margin: 0 0 max(10px, calc(18 * var(--u))); }
  .s4a .changes {
    counter-reset: ch;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .s4a .changes li:not(.changes__wave) {
    counter-increment: ch;
    grid-row: 1 / 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-rows: subgrid;
    align-items: start;
    gap: 0 max(12px, calc(20 * var(--u)));
    padding: max(14px, calc(28 * var(--u))) calc(var(--cg) / 2) max(14px, calc(30 * var(--u)));
    border-top: 0;
    border-left: 1px solid var(--line);
  }
  .s4a .changes li:first-child { grid-column: 1; padding-top: max(14px, calc(28 * var(--u))); padding-left: 0; border-left: 0; }
  .s4a .changes li:nth-child(2) { grid-column: 2; }
  .s4a .changes li:nth-child(3) { grid-column: 3; padding-right: 0; }
  .s4a .changes li:not(.changes__wave)::before {
    content: counter(ch, decimal-leading-zero);
    grid-area: 1 / 1;
    font-size: clamp(44px, calc(118 * var(--u)), 172px);
    line-height: .84;
    font-weight: 200;
    letter-spacing: -.05em;
    color: var(--pine);
    font-variant-numeric: lining-nums tabular-nums;
  }
  .changes__ic { width: max(36px, calc(54 * var(--u))); height: max(36px, calc(54 * var(--u))); }
  .changes__ic svg { width: 50%; height: 50%; }
  .s4a .changes__ic { grid-area: 1 / 2; }
  .s4a .changes p { grid-area: 3 / 1 / 4 / 3; font-size: clamp(14.5px, calc(21 * var(--u)), 30px); line-height: 1.5; text-wrap: pretty; }
  .s4a .changes b { display: block; margin-bottom: .4em; font-size: 1.5em; line-height: 1.2; font-weight: 650; letter-spacing: -.016em; text-wrap: balance; }
  .changes li:hover::before { color: var(--pine-d); }
  /* схема в средней строке: поверх линий-разделителей колонок, как график по сетке */
  .s4a .changes__wave {
    position: relative;
    display: block;
    grid-row: 2;
    grid-column: 1 / -1;
    min-height: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
  }
  /* рисунок не задаёт высоту строки: лежит внутри неё с полями сверху и снизу */
  .changes__wave { --wp: max(16px, calc(34 * var(--u))); }
  .changes__wave svg { position: absolute; left: 0; top: var(--wp); display: block; width: 100%; height: calc(100% - 2 * var(--wp)); overflow: visible; opacity: .85; }
  .changes__line { fill: none; stroke: url(#chWave); stroke-width: max(1.4px, calc(2 * var(--u))); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  .changes__base { fill: none; stroke: rgba(31, 42, 34, .16); stroke-width: 1px; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }

  /* 4b: история в одну линию, было → стало → главный инсайт */
  .s4b { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .cases { display: grid; grid-template-rows: minmax(0, 1fr); gap: 0; }
  .cases__track { grid-area: 1 / 1; gap: calc(2 * var(--px)); }
  .cases__bar { grid-area: 1 / 1; z-index: 2; align-self: end; justify-self: end; flex-wrap: nowrap; gap: var(--cg); }
  .case { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--rg); }
  .case__head { gap: max(12px, calc(20 * var(--u))); }
  .case__ava { width: max(44px, calc(68 * var(--u))); height: max(44px, calc(68 * var(--u))); font-size: clamp(17px, calc(27 * var(--u)), 38px); }
  .case__name { font-size: clamp(20px, calc(36 * var(--u)), 52px); }
  .case__ctx { font-size: clamp(14px, calc(20 * var(--u)), 28px); }
  .case__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.75fr);
    column-gap: max(18px, calc(34 * var(--u)));
    align-items: start;
    align-content: center;
    padding: var(--rg) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .case__label { margin-bottom: max(6px, calc(12 * var(--u))); font-size: clamp(11.5px, calc(14 * var(--u)), 20px); }
  .case__step p { font-size: clamp(15px, calc(25 * var(--u)), 36px); line-height: 1.5; }
  .case__arr { width: max(22px, calc(34 * var(--u))); height: max(22px, calc(34 * var(--u))); margin-top: -.15em; }
  .case__arr svg { width: 100%; height: 100%; transform: none; }
  .case__insight { padding-left: max(18px, calc(30 * var(--u))); border-left-width: max(2px, calc(3 * var(--u))); }
  .case__insight p { font-size: clamp(18px, calc(42 * var(--u)), 60px); line-height: 1.32; }
  .case__shot { min-height: max(44px, calc(56 * var(--u))); font-size: clamp(14.5px, calc(18 * var(--u)), 26px); }
  .case__shot .ic { width: 1.2em; height: 1.2em; }
  .round-btn { width: max(42px, calc(56 * var(--u))); height: max(42px, calc(56 * var(--u))); }
  .fineprint { font-size: clamp(12.5px, calc(15 * var(--u)), 21px); }

  /* 5: «Обо мне» открыт; фото слева, колонка чтения справа; пункты 2 и 3 строкой ниже */
  .s5 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .acc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; min-height: 0; }
  .acc__item { grid-column: 1 / -1; min-width: 0; }
  .acc:has(> .acc__item--me[open]) { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
  .acc:has(> .acc__item--me[open]) > .acc__item:not(.acc__item--me) { grid-column: auto; }
  .acc:has(> .acc__item--me[open]) > .acc__item:nth-child(2) { padding-right: calc(var(--cg) / 2); }
  .acc:has(> .acc__item--me[open]) > .acc__item:nth-child(3) { padding-left: calc(var(--cg) / 2); border-left: 1px solid var(--line); }
  .acc__sum { gap: max(12px, calc(18 * var(--u))); min-height: 0; padding: max(8px, calc(16 * var(--u))) 0; }
  .acc__num { width: max(32px, calc(44 * var(--u))); height: max(32px, calc(44 * var(--u))); font-size: clamp(14px, calc(19 * var(--u)), 27px); }
  .acc__title { font-size: clamp(17px, calc(25 * var(--u)), 36px); }
  .acc__item--me .acc__title { font-size: clamp(26px, calc(50 * var(--u)), 76px); }
  .acc__item--me > .acc__sum { padding-top: 0; }
  .acc__chev { width: max(24px, calc(34 * var(--u))); height: max(24px, calc(34 * var(--u))); }
  .acc__body { padding: max(4px, calc(8 * var(--u))) 0 max(16px, calc(28 * var(--u))); }
  /* открытый первый пункт растягивается по высоте листа: фото во всю высоту колонки */
  .acc__item--me[open] { display: flex; flex-direction: column; min-height: 0; }
  .acc__item--me[open]::details-content { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .acc__item--me[open] .acc__body { flex: 1 1 auto; display: flex; flex-direction: column; padding-bottom: var(--rg); }
  .about { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--cg); align-items: stretch; }
  .about__photo { height: auto; min-height: 260px; }
  .about__text { justify-content: center; gap: max(12px, calc(22 * var(--u))); }
  .about__quote { padding-left: max(18px, calc(28 * var(--u))); border-left-width: max(2px, calc(3 * var(--u))); font-size: clamp(18px, calc(34 * var(--u)), 50px); line-height: 1.32; }
  .about__read p { font-size: clamp(15px, calc(20 * var(--u)), 29px); line-height: 1.55; }
  .about__more.is-open { columns: 2; column-gap: var(--cg); }
  .about__more p { break-inside: avoid; font-size: clamp(14px, calc(17.5 * var(--u)), 25px); }
  .more-btn { font-size: clamp(14.5px, calc(18 * var(--u)), 26px); }
  .diplomas { display: flex; align-items: center; gap: var(--cg); padding-top: max(10px, calc(20 * var(--u))); border-top: 1px solid var(--line); }
  .diplomas__title { flex: 0 0 auto; max-width: 9em; margin: 0; font-size: clamp(11.5px, calc(14 * var(--u)), 20px); }
  .diplomas__grid { flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, max(96px, calc(170 * var(--u))))); gap: max(8px, calc(16 * var(--u))); }
  .acc__intro { max-width: 60em; }
  .micro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg); }
  .micro li { padding-left: 0; padding-top: max(40px, calc(54 * var(--u))); }
  .micro li::before { top: max(12px, calc(16 * var(--u))); }
  .micro__title { font-size: clamp(16px, calc(21 * var(--u)), 30px); }
  .micro li p { font-size: clamp(14.5px, calc(18 * var(--u)), 26px); }
  .facts { grid-template-columns: 1fr 1fr; column-gap: var(--cg); }
  .papers { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--cg); }
  .s5__foot { grid-row: 2; }

  /* 6: на компьютере один экран (в ТЗ это и есть один экран 6), без фото: слева «С чем я НЕ работаю» —
     три пункта крупно, строки делят высоту поровну; справа «Частые вопросы» одной колонкой; внизу строка записи.
     Части 6a/6b здесь без своих коробок (display: contents), их содержимое — ячейки сетки листа */
  .s6 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "t1 t2" "l1 l2" "foot foot";
  }
  .s6a__title, .s6b__title { font-size: clamp(28px, calc(58 * var(--u)), 86px); line-height: 1.06; }
  .s6a__title { grid-area: t1; }
  .s6b__title { grid-area: t2; }
  .nowork { grid-area: l1; display: grid; grid-auto-rows: minmax(0, 1fr); min-height: 0; }
  .nowork li { gap: max(16px, calc(28 * var(--u))); padding: max(10px, calc(20 * var(--u))) 0; font-size: clamp(19px, calc(36 * var(--u)), 52px); line-height: 1.2; }
  .nowork li:first-child { border-top: 1px solid var(--line); }
  .nowork .ic { width: max(40px, calc(64 * var(--u))); height: max(40px, calc(64 * var(--u))); padding: max(10px, calc(18 * var(--u))); }
  .faq__list { grid-area: l2; justify-content: space-between; min-height: 0; }
  /* строки вопросов делят высоту поровну, вопрос посередине строки (где details умеет flex) */
  .faq__item { flex: 1 1 auto; display: flex; flex-direction: column; }
  .faq__item summary { flex: 1 1 auto; }
  .faq__item:first-child { border-top: 1px solid var(--line); }
  .faq__item summary { padding: max(8px, calc(16 * var(--u))) 0; font-size: clamp(15.5px, calc(23 * var(--u)), 33px); }
  .faq__item summary .ic { width: max(22px, calc(30 * var(--u))); height: max(22px, calc(30 * var(--u))); }
  .faq__a { padding-right: 15%; font-size: clamp(14.5px, calc(19 * var(--u)), 27px); }
  .s6b__cta { grid-area: foot; }

  /* 7: одно фото СРЕДНЕГО размера (по ТЗ): треть ширины и не во всю высоту — под ним вопрос и мессенджеры,
     как карточка контакта; справа заголовок, первый шаг и кнопка */
  .s7 {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "pic head" "pic step" "ask step";
  }
  .s7__pic { grid-area: pic; min-height: 0; max-height: none; }
  .s7__head { grid-area: head; margin: 0; }
  .s7__head .lead { margin-top: max(10px, calc(16 * var(--u))); max-width: 40em; }
  .s7__step { grid-area: step; justify-content: center; gap: max(10px, calc(18 * var(--u))); min-height: 0; }
  .s7__sub { font-size: clamp(18px, calc(32 * var(--u)), 46px); }
  .steps li { gap: max(14px, calc(22 * var(--u))); padding: max(10px, calc(20 * var(--u))) 0; font-size: clamp(15px, calc(22 * var(--u)), 31px); }
  .steps__ic { width: max(36px, calc(56 * var(--u))); height: max(36px, calc(56 * var(--u))); }
  .steps__ic svg { width: 48%; height: 48%; }
  .s7__step .btn { width: auto; align-self: flex-start; margin-top: max(6px, calc(12 * var(--u))); }
  .s7__ask { grid-area: ask; flex-direction: column; align-items: stretch; gap: max(10px, calc(16 * var(--u))); }
  .s7__ask .foot__text { flex: 0 0 auto; }
  .s7__ask .h3 { font-size: clamp(16.5px, calc(24 * var(--u)), 34px); }
  .ask__btns { display: flex; flex-wrap: wrap; gap: max(8px, calc(12 * var(--u))); }
  .msg-btn { flex: 1 1 auto; min-height: max(48px, calc(60 * var(--u))); padding-inline: max(16px, calc(24 * var(--u))); font-size: clamp(14.5px, calc(18 * var(--u)), 26px); }
  .msg-btn__ic { width: 1.4em; height: 1.4em; }

  /* шапка по линии начала текста ленты */
  .hdr__in { padding-inline: calc(var(--fit-g) + var(--px)); }
  .brand { padding-left: 0; }
  .site-footer { padding-top: max(18px, calc(26 * var(--u))); padding-bottom: max(20px, calc(28 * var(--u))); }
}

/* узкий компьютер (1024–1199): три тега в ширину видео не помещаются — ряд переносится на две строки */
@media (min-width: 1024px) and (max-width: 1199px) {
  .s1 .media__box { --tg-h: 50px; }
  .s1 .ticks { flex-wrap: wrap; justify-content: flex-start; align-content: center; gap: 4px 18px; }
}

/* шапка: ссылки на разделы строкой, когда помещаются */
@media (min-width: 1200px) {
  .hnav { display: flex; align-items: center; gap: 2px; margin-right: 8px; }
  .hnav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s, background-color .2s;
  }
  .hnav a:hover { color: var(--pine-d); background: rgba(47, 90, 65, .07); }
  .burger { display: none; }
}
@media (min-width: 1600px) {
  .hnav a { font-size: 15.5px; padding-inline: 15px; }
}
@media (min-width: 2200px) {
  :root { --fit-hdr: 76px; }
  .brand__leaf { width: 46px; height: 46px; }
  .brand__leaf img { height: 30px; }
  .brand__name { font-size: 19.5px; }
  .brand__role { font-size: 14.5px; }
  .hnav a { font-size: 17.5px; padding-inline: 18px; min-height: 46px; }
  .btn--sm { min-height: 48px; padding-inline: 24px; font-size: 17px; }
}

/* ── Компьютер, низкие окна: плотнее ── */
@media (min-width: 1024px) and (max-height: 820px) {
  :root { --rg: max(12px, calc(22 * var(--u))); }
  .s2 .h2 { font-size: clamp(26px, calc(44 * var(--u)), 76px); }
  .path { --dot: clamp(32px, calc(54 * var(--u)), 92px); gap: 6px; }
  .s3 .h2 { font-size: clamp(26px, calc(44 * var(--u)), 76px); }
  .s3__foot .h3 { margin-bottom: 2px; }
  .s3 .lead { font-size: 15px; line-height: 1.42; }
  .case__step p { font-size: clamp(15px, calc(23 * var(--u)), 36px); }
  .case__insight p { font-size: clamp(18px, calc(38 * var(--u)), 60px); }
  .feat__t { font-size: clamp(16px, calc(25 * var(--u)), 36px); }
  .h1 { font-size: clamp(30px, calc(60 * var(--u)), 104px); }
  .ticks li { padding-block: 7px; }
  .s1__note { font-size: 13.5px; line-height: 1.42; }
  .s2 .col .h3 { margin-bottom: 2px; }
  .feat p { font-size: 13.5px; line-height: 1.42; }
  .feat { padding-block: 6px; }
  .feat:first-child { padding-top: 6px; }
  .s3__foot .foot__text p { font-size: 14.5px; }
  .about__quote { font-size: clamp(17px, calc(30 * var(--u)), 50px); }
  .about__read p { font-size: 14.5px; line-height: 1.5; }
  .diplomas__grid { grid-template-columns: repeat(4, minmax(0, 92px)); }
  .acc__sum { padding-block: 7px; }
  .faq__item summary { padding-block: 9px; }
}

/* ── 4a: подзаголовок и список одной группой ── */
.s4a__lower .sub { margin-bottom: 10px; }

/* ═════════════ Эффекты: текст «дышит», порядок чтения ═════════════ */

/* 1. Появление строго в порядке чтения: индекс --i ставит скрипт (левая колонка, потом правая) */
.js .rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.js .rv.is-in { opacity: 1; transform: none; }

/* 3. Акценты: маркер под ключевой фразой, прорисовка при появлении */
mark.hl { position: relative; isolation: isolate; background: none; color: inherit; font-weight: inherit; white-space: nowrap; }
mark.hl::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.1em; right: -.1em; bottom: .06em;
  height: .44em;
  border-radius: .2em;
  background: rgba(183, 121, 43, .26);
  transform-origin: 0 50%;
}
.js .rv mark.hl::before { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 85ms + .55s); }
.js .rv.is-in mark.hl::before { transform: none; }
@media (max-width: 380px) { mark.hl { white-space: normal; } }

/* 2. Живой круг паники: по кольцу бежит светлая точка, узел под ней подсвечивается */
.loop__ic::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(183, 121, 43, .5), 0 0 26px 8px rgba(240, 190, 120, .55);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .loop__orbit { animation: loopOrbit 7.2s linear infinite; }
  .loop__ic::after { animation: loopGlow 7.2s linear infinite; }
  .loop__node--2 .loop__ic::after { animation-delay: -6.3s; }
  .loop__node--3 .loop__ic::after { animation-delay: -4.5s; }
  .loop__node--4 .loop__ic::after { animation-delay: -2.7s; }
  .loop__node--1 .loop__ic::after { animation-delay: -.9s; }
  .loop__core { animation: corePulse 6s ease-in-out infinite; }
}
@keyframes loopOrbit { to { transform: rotate(1turn); } }
@keyframes loopGlow { 0%, 100% { opacity: 1; } 11%, 89% { opacity: 0; } }
@keyframes corePulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.12); } }

/* путь выхода: линия ровно идёт сверху вниз, шаг загорается, когда линия до него дошла; «Спокойствие» заливается
   зелёным и светится один раз. Кружки и погашенными непрозрачные — линия за ними не просвечивает:
   гасим значок, номер, подпись и обводку, а не весь шаг */
.path__step:nth-child(2) { --s: 1; }
.path__step:nth-child(3) { --s: 2; }
.path__step:nth-child(4) { --s: 3; }
.path__step:nth-child(5) { --s: 4; }
.path__step--end .path__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(47, 90, 65, .2), 0 0 32px 10px rgba(130, 190, 130, .5);
  opacity: 0;
  pointer-events: none;
}
.js .path::after { transform: scaleY(0); transition: transform 1.6s linear .3s; }
.js .path.is-lit::after { transform: none; }
/* линия у центра шага N через .3 + N × .4 с; шаг начинает загораться чуть раньше — когда линия входит в кружок */
.js .path__step { --at: calc(.22s + var(--s, 0) * .4s); }
.js .path__dot svg, .js .path__n, .js .path__txt { opacity: .34; transition: opacity .45s ease var(--at); }
.js .path__dot { border-color: rgba(47, 90, 65, .16); transition: border-color .45s ease var(--at), background-color .45s ease var(--at), color .45s ease var(--at); }
.js .path__step--end .path__dot { background-color: #fbfdf9; color: var(--pine); }
.js .path.is-lit .path__dot svg, .js .path.is-lit .path__n, .js .path.is-lit .path__txt { opacity: 1; }
.js .path.is-lit .path__dot { border-color: rgba(47, 90, 65, .42); }
.js .path.is-lit .path__step--end .path__dot { background-color: var(--pine); border-color: var(--pine); color: #fff; }
.js .path.is-lit .path__step--end .path__dot::after { animation: calmGlow 2.6s ease 2.1s 1 both; }
@keyframes calmGlow { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .35; } }

/* 5. Живые фото: очень медленный наезд, только на компьютере и пока лист в окне */
@keyframes picZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .pic img { animation: picZoom 22s ease-in-out infinite alternate; transform-origin: 50% 35%; }
  .pic img[src$="breathing.webp"] { transform-origin: 80% 40%; }
}

/* 6. Свет в лесу: один мягкий слой над фоном медленно «дышит» */
.page-light {
  position: fixed;
  left: -8%; right: -8%; top: -12%;
  height: 90vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 72% 18%, rgba(255, 240, 210, .5) 0%, rgba(255, 240, 210, 0) 72%),
    radial-gradient(30% 40% at 24% 34%, rgba(255, 248, 230, .32) 0%, rgba(255, 248, 230, 0) 72%);
  opacity: .7;
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .page-light { animation: lightBreath 12s ease-in-out infinite alternate; }
}
@keyframes lightBreath {
  from { opacity: .45; transform: translate3d(-1.5%, 0, 0) scale(1); }
  to { opacity: 1; transform: translate3d(1.5%, 1.2%, 0) scale(1.05); }
}

/* анимации за краем экрана и в скрытой вкладке спят */
.is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }
html.is-hidden *, html.is-hidden *::before, html.is-hidden *::after { animation-play-state: paused !important; }

/* 7. Наведение (компьютер): строки списков чуть сдвигаются, иконки двигаются, по кнопкам проходит блик */
@media (hover: hover) and (pointer: fine) {
  /* сдвигается содержимое строки, линия-разделитель остаётся на месте */
  .ticks li > *, .feat > *, .changes li > *, .nowork li > *, .steps li > * { transition: translate .35s cubic-bezier(.2, .7, .2, 1), color .2s, background-color .25s; }
  .ticks li:hover > *, .feat:hover > *, .changes li:hover > *, .nowork li:hover > *, .steps li:hover > * { translate: 4px 0; }
  .changes li:hover .changes__ic, .steps li:hover .steps__ic { translate: 4px -2px; background: var(--pine); color: #fff; }
  .nowork li:hover .ic { translate: 4px -2px; }
  .feat:hover::before { color: var(--pine-d); font-weight: 500; }
  .btn { position: relative; overflow: hidden; }
  .btn::after {
    content: "";
    position: absolute;
    top: -20%; bottom: -20%; left: 0;
    width: 40%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
    transform: translateX(-170%) skewX(-18deg);
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
  }
  .btn:hover::after { transform: translateX(330%) skewX(-18deg); }
}
@media (hover: none) {
  .diplomas__item:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* не transition-duration на «*»: свойство по умолчанию «all», и размеры от cq-единиц начинают «переезжать» */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .js .path .path__dot svg, .js .path .path__n, .js .path .path__txt { opacity: 1; }
  .js .path .path__dot { border-color: rgba(47, 90, 65, .42); }
  .js .path .path__step--end .path__dot { background-color: var(--pine); border-color: var(--pine); color: #fff; }
  .js .path::after, .js .rv mark.hl::before { transform: none; }
}

/* ── Низкие телефоны (375x667 и т.п.): плотнее ── */
@media (max-width: 1023px) and (max-height: 700px) {
  :root { --py: 14px; --mg: 8px; }
  .eyebrow { font-size: 12px; }
  .h1 { font-size: 23px; }
  .h2 { font-size: 22px; }
  .lead { font-size: 15px; }
  .s1__note { font-size: 12.5px; line-height: 1.4; }
  .s1__foot { padding-top: 2px; }
  .btn { min-height: 48px; }
  .feat { padding-block: 7px; }
  .feat p { font-size: 13.5px; line-height: 1.4; }
  .feat__t { font-size: 16.5px; }
  .changes li { padding-block: 9px; }
  .changes p { font-size: 14.5px; line-height: 1.42; }
  .case { gap: 7px; }
  .case__ava { width: 38px; height: 38px; font-size: 16px; }
  .case__name { font-size: 17px; }
  .case__ctx { font-size: 13px; }
  .case__arr { display: none; }
  .case__line { gap: 7px; }
  .case__label { display: inline; margin: 0 6px 0 0; }
  .case__step p { display: inline; font-size: 13.5px; line-height: 1.42; }
  .case__step { font-size: 13.5px; line-height: 1.42; }
  .case__insight p { font-size: 14.5px; line-height: 1.4; }
  .fineprint { font-size: 11.5px; }
  .foot__text { font-size: 15px; }
  .faq__item summary { min-height: 44px; padding-block: 6px; font-size: 14.5px; line-height: 1.3; }
  .s6a__title { font-size: 28px; }
  .nowork li { font-size: 16px; padding-block: 10px; }
  .s7__sub { font-size: 17px; }
  .steps li { gap: 10px; padding-block: 7px; font-size: 14px; line-height: 1.38; }
  .steps__ic { width: 30px; height: 30px; }
  .steps__ic svg { width: 16px; height: 16px; }
  .s7__ask .h3 { font-size: 16px; }
  .foot__text p { font-size: 14px; }
  .msg-btn { min-height: 44px; }
}

/* телефоны пониже (360x740 и т.п.): фото в 4a убираем, истории плотнее */
@media (max-width: 1023px) and (max-height: 780px) {
  .s4a__pic { display: none; }
  .s4a__text { flex: 1 1 auto; justify-content: flex-start; }
  .s4a__lower { flex: 1 1 auto; display: flex; flex-direction: column; }
  .s4a .changes { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; }
  .case__arr { display: none; }
  .case__line { gap: 8px; }
  .case__label { display: inline; margin: 0 6px 0 0; }
  .case__step p { display: inline; }
  .case__step { font-size: 14px; line-height: 1.42; }
  .case { gap: 8px; }
  .case__insight p { font-size: 15px; line-height: 1.4; }
}
/* узкие телефоны: первый экран и вопросы плотнее */
@media (max-width: 380px) {
  .s1 { --mg: 10px; }
  .s1 .h1 { font-size: clamp(22px, min(6.9vw, 3.4svh), 26px); }
  .ticks li { font-size: 13px; }
  .ticks { gap: 2px 12px; }
  .s1__note { font-size: 12.5px; line-height: 1.4; }
  .faq__item summary { padding-block: 7px; font-size: 14.5px; }
}
@media (max-width: 380px) and (max-height: 700px) {
  .s1 { --mg: 7px; }
  .s1 .h1 { font-size: 22px; }
}

/* ── Планшет стоя (600–1023): мобильная разбивка, кегли крупнее ── */
@media (min-width: 600px) and (max-width: 1023px) and (min-height: 860px) {
  :root { --px: 32px; --py: 30px; --mg: 20px; }
  body { font-size: 17px; }
  .eyebrow { font-size: 14px; }
  .h2 { font-size: 36px; }
  .h3 { font-size: 25px; }
  .lead { font-size: 19.5px; }
  .kicker, .sub { font-size: 14px; }
  .btn { min-height: 58px; font-size: 17.5px; padding-inline: 28px; }
  .foot__text { font-size: 19px; }
  .foot__text p { font-size: 17px; }
  .hint { font-size: 17px; }
  .vswitch__btn { min-height: 48px; font-size: 16.5px; }
  .ticks li { font-size: 16px; }
  .s1__note { font-size: 15.5px; }
  .note { font-size: 17px; }
  .path { --dot: 64px; max-height: none; }
  .path__txt { font-size: 21px; }
  .path__step--end .path__txt { font-size: 25px; }
  .feat::before { font-size: 18px; }
  .feat__t { font-size: 24px; }
  .feat p { font-size: 17px; margin-top: 6px; }
  .changes__ic { width: 44px; height: 44px; }
  .changes p { font-size: 18px; }
  .case__ava { width: 52px; height: 52px; font-size: 20px; }
  .case__name { font-size: 24px; }
  .case__ctx { font-size: 16px; }
  .case__label { font-size: 13px; }
  .case__step p { font-size: 18px; }
  .case__insight p { font-size: 23px; }
  .case__shot { font-size: 16.5px; }
  .fineprint { font-size: 14px; }
  .acc__title { font-size: 21px; }
  .about__photo { height: clamp(220px, 28svh, 380px); }
  .about__quote { font-size: 25px; }
  .about__read p { font-size: 18px; }
  .s6a__title { font-size: 52px; }
  .nowork li { font-size: 24px; }
  .nowork .ic { width: 48px; height: 48px; padding: 13px; }
  .faq__item summary { font-size: 19px; }
  .faq__item summary .ic { width: 26px; height: 26px; }
  .faq__a { font-size: 17px; }
  .s7__sub { font-size: 27px; }
  .steps li { font-size: 19px; gap: 18px; }
  .steps__ic { width: 48px; height: 48px; }
  .steps__ic svg { width: 24px; height: 24px; }
  .s7__ask .h3 { font-size: 22px; }
  .msg-btn { min-height: 56px; font-size: 16.5px; }
  .s1__cta .btn, .s7__step .btn, .foot .btn { width: auto; align-self: flex-start; }
  .s7__step { justify-content: center; gap: 16px; }
  .s7__step .steps { flex: 0 1 auto; }
  .steps li { padding-block: 22px; }
  .case__line { gap: 12px; }
  .case__arr { width: 22px; height: 22px; }
  .case__arr svg { width: 20px; height: 20px; }
  .case__insight p { font-size: 26px; }
}

/* телефон и планшет: заголовок обложки в 3 строки, Play ниже него, без наложения */
@media (max-width: 1023px) {
  .vcover__txt { left: clamp(12px, 3.2vw, 22px); top: clamp(10px, 3vw, 20px); gap: 4px; }
  .vcover__kicker { font-size: clamp(10px, 2.6vw, 12px); }
  .vcover__title { font-size: clamp(13px, 3.6vw, 22px); line-height: 1.14; }
  .vcover__play { left: clamp(12px, 3.2vw, 22px); bottom: clamp(10px, 3vw, 20px); width: clamp(44px, 12vw, 64px); height: clamp(44px, 12vw, 64px); box-shadow: 0 0 0 5px rgba(255, 255, 255, .18), 0 12px 24px -10px rgba(0, 0, 0, .55); }
}

/* длинный текст «Читать»: крестик остаётся на виду при прокрутке окна */
.modal__box.read > .modal__close { position: sticky; top: 10px; right: auto; float: right; margin: -14px -14px 6px 12px; }

/* ═════════════════════════════════════════════════════════════
   Серия 3.6 (08.10): d27 «Выбор Антона» — по отзыву Антона на мобильную версию.
   Везде: без ярлыков экранов, из маркеров остался один («биохимической сигнализации»),
   тихий переключатель «Смотреть / Читать», обложки видео Антона с Play по центру,
   три пункта под видео 1, номера 1–5 у шагов выхода, «Было» и «Стало» на цветных
   подложках, компактное «С чем я НЕ работаю», 18+ в подвале, кнопки анкеты всегда видны.
   ═════════════════════════════════════════════════════════════ */
:root {
  /* визуал варианта 2 (d21): экраны 1 и 7 — шрифт везде, карточки — на телефоне */
  --font-21: "Onest", "Manrope", sans-serif;
  --sheet-21: rgba(250, 250, 246, .72);
  --sheet-21-brd: rgba(255, 255, 255, .72);
  --shadow-21: 0 1px 1px rgba(20, 36, 26, .04), 0 12px 26px -16px rgba(20, 36, 26, .22), 0 44px 80px -44px rgba(20, 36, 26, .42);
  /* подложки «Было» и «Стало» (как в варианте 3, d14) */
  --was-bg: rgba(247, 231, 206, .64);
  --now-bg: rgba(218, 236, 215, .8);
}

/* экраны 1 и 7 — шрифт и чернила варианта 2 */
.s1, .s7 { font-family: var(--font-21); --ink: #1E2B24; --ink-2: #3b4a41; --ink-3: #69766d; }
.s1 .h1 { font-weight: 650; letter-spacing: -.028em; }
.s7 .h2 { font-weight: 650; letter-spacing: -.022em; }
.s7 .h3 { font-weight: 600; letter-spacing: -.012em; }
.s1 .btn, .s7 .btn { font-weight: 600; letter-spacing: -.004em; }

/* переключатель «Смотреть / Читать» — тише видео и кнопки записи:
   без тёмной заливки; активная кнопка светлая с тонкой рамкой, «Читать» — приглушённый текст */
.vswitch { gap: 4px; padding: 0; border: 0; }
.vswitch__btn { border: 1px solid transparent; color: var(--ink-3); font-weight: 500; }
.vswitch__btn.is-on {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(47, 90, 65, .24);
  color: var(--pine);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(20, 36, 26, .05);
}
.vswitch__btn:not(.is-on):hover { background: rgba(47, 90, 65, .06); color: var(--pine-d); }

/* обложки видео — наши, как в d22 (зелёный градиент, фото Антона, заголовок), без кикеров.
   Фото крупно: квадратный кадр с лицом в коробке 58% ширины, лицо целиком в непрозрачной части (затухание 0–28%).
   Play строго по центру; заголовок — колонкой между краем и Play (ширина считается от размера Play), под Play не попадает */
.vcover { container-type: inline-size; --play: clamp(56px, 14vw, 64px); --tx: clamp(11px, 4cqi, 44px); }
.vcover__photo {
  object-position: 50% 26%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
}
.vcover__txt { left: var(--tx); top: var(--tx); width: calc(50% - var(--play) / 2 - var(--tx) - 10px); gap: 0; }
.vcover__title { font-size: clamp(12.5px, 4cqi, 54px); line-height: 1.14; font-weight: 650; letter-spacing: -.012em; text-wrap: balance; }
.vcover__play { inset: 0; margin: auto; width: var(--play); height: var(--play); box-shadow: 0 0 0 5px rgba(255, 255, 255, .18), 0 14px 30px -10px rgba(0, 0, 0, .55); }
.vcover__play i { animation-name: ringSm; }
.vcover:hover .vcover__play, .vcover:focus-visible .vcover__play { box-shadow: 0 0 0 8px rgba(255, 255, 255, .22), 0 16px 34px -10px rgba(0, 0, 0, .6); }
/* видео 2: зеркально — фото слева (профиль смотрит вправо, внутрь обложки), тень справа, заголовок справа сверху */
.vcover--flip {
  background:
    radial-gradient(90% 120% at 100% 100%, rgba(91, 132, 103, .5) 0%, rgba(91, 132, 103, 0) 60%),
    linear-gradient(240deg, #18301f 0%, #24432f 55%, #32563e 100%);
}
.vcover--flip .vcover__photo {
  left: 0; right: auto;
  object-position: 50% 24%;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 28%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 28%);
}
.vcover--flip .vcover__shade {
  background:
    linear-gradient(270deg, rgba(18, 36, 25, .74) 0%, rgba(18, 36, 25, .34) 50%, rgba(18, 36, 25, 0) 74%),
    linear-gradient(0deg, rgba(18, 36, 25, .38) 0%, rgba(18, 36, 25, 0) 40%);
}
.vcover--flip .vcover__txt { left: auto; right: var(--tx); }

/* три пункта под видео 1 — столбиком, галочка у первой строки */
.s1 .ticks { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
.s1 .ticks li { align-items: flex-start; white-space: normal; }
.s1 .ticks .ic { margin-top: .1em; }

/* путь выхода: номер шага 1–5 — кружок на значке шага */
.path__n {
  position: absolute;
  z-index: 2;
  top: -5px; right: -7px;
  min-width: max(20px, calc(var(--dot) * .4));
  height: max(20px, calc(var(--dot) * .4));
  padding: 0 4px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--pine);
  color: #fff;
  font-family: var(--font);
  font-size: max(12px, calc(var(--dot) * .22));
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  box-shadow: 0 0 0 2px #fbf9f4;
}
.path__step--end .path__n { background: #fff; color: var(--pine); box-shadow: 0 0 0 1.5px var(--pine), 0 0 0 3.5px #fbf9f4; }

/* истории: «Было» и «Стало» на подложках разного цвета, «Главный инсайт» в светлой рамке с линией слева */
.case__step--was, .case__step--now { border-radius: 14px; }
.case__step--was { background: var(--was-bg); }
.case__step--now { background: var(--now-bg); }
.case__step--was .case__label { color: var(--amber-d); }
.case__step--now .case__label { color: var(--pine-d); }
.case__step--was p, .case__step--now p { color: var(--ink); }
.case__insight {
  border-left: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .58);
  box-shadow: inset 3px 0 0 var(--pine-l);
}
.case--draft .case__step p { color: var(--ink-3); }

/* подвал: знак 18+ рядом с ИНН — спокойный, читаемый */
.site-footer__age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(30, 43, 36, .24);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: .02em;
  font-variant-numeric: lining-nums;
}

/* анкета: кнопка шага всегда видна — полоса прилипает к низу листа анкеты,
   плотная подложка с мягким градиентом сверху, варианты уезжают под неё */
.qbar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 12px -16px 0;
  padding: 16px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(251, 249, 244, 0) 0, var(--cream) 16px);
}
.qbar .qnext, .qbar .qsubmit { margin-top: 0; }
/* нижний отступ листа анкеты — в конце содержимого, а не у самого листа: иначе полоса прилипает
   выше края на величину отступа и под ней просвечивают варианты */
.modal__box.quiz { padding-bottom: 0; }
.modal__box.quiz::after { content: ""; display: block; height: calc(18px + env(safe-area-inset-bottom)); }
.qbar--doubt { margin-top: 2px; }
.qdoubt { margin-top: 10px; padding: 12px 14px; font-size: 14.5px; line-height: 1.45; }
@media (min-width: 720px) {
  .qbar { margin-inline: -30px; padding-inline: 30px; }
  .modal__box.quiz::after { height: 24px; }
}
/* варианты чуть компактнее */
.qopts { gap: 7px; }
.qopt { min-height: 50px; padding: 10px 14px; line-height: 1.3; gap: 11px; }
.qstep__q { margin-bottom: 12px; }
.quiz__progress { margin: 14px 0 12px; }

/* ═════════════ d27, телефон и планшет стоя (< 1024) ═════════════ */
@media (max-width: 1023px) {
  /* обёртка страницы без своей тени: у карточек 1 и 7 и у ленты 2a…6b — свои */
  .ribbon { margin-bottom: 0; border-radius: 0; box-shadow: none; }

  /* ── экран 1 — отдельная карточка варианта 2 (d21): молочное стекло, скругление со всех сторон.
        Высота — ровно окно (низ карточки = низ окна), под ней поле леса и лента ── */
  .s1 {
    background: var(--sheet-21);
    border: 1px solid var(--sheet-21-brd);
    border-radius: var(--r);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--shadow-21);
    padding: var(--py) var(--px);
  }
  .s1 .h1 { font-size: clamp(25px, min(7.6vw, 3.7svh), 40px); line-height: 1.08; }
  .s1 .ticks li { font-size: 14px; line-height: 1.32; }
  /* пояснение под кнопкой — на лёгкой подложке, текст темнее */
  .s1__note {
    padding: 10px 13px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .6);
    color: var(--ink-2);
  }

  /* ── лента 2a…6b (вариант 1, d22): одна обёртка с тенью и скруглениями, отрезки естественной высоты ── */
  .band { margin-top: var(--fit-g); border-radius: var(--r); box-shadow: var(--shadow); }
  .band .sheet, .band .part {
    min-height: 0;
    justify-content: flex-start;
    gap: 14px;
    padding: 32px var(--px);
  }
  .band .s2__a { border-top: 1px solid var(--sheet-brd); border-radius: var(--r) var(--r) 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
  .band .s6b { border-bottom: 1px solid var(--sheet-brd); border-radius: 0 0 var(--r) var(--r); }
  /* линия между темами; у верха ленты и внутри темы «Метод» (видео → преимущества) её нет */
  .band .s2__a::before, .band .s3__b::before { content: none; }
  .changes .changes__wave { display: none; }

  /* 2a, 2b: круг паники и путь выхода своей высоты, без растягивания */
  .s2__trap, .s2__way { flex: none; }
  .loop-box { flex: none; }
  .loop { width: min(100%, 360px); }
  /* путь выхода — как в варианте 1 (d22) на обычном телефоне: круг 38–52 px от высоты окна, между кругами 34 px */
  .path { --dot: clamp(38px, 5.4svh, 52px); flex: none; justify-content: flex-start; gap: 34px; max-height: none; margin: 6px 0; }
  .s2__way .path { max-height: none; }

  /* 3a, 3b: видео сразу под подзаголовком, три преимущества сразу под видео, затем «С чего мы начнём?» */
  .s3__a .h2 { font-size: clamp(22px, min(6.4vw, 3.2svh), 36px); }
  .s3__media { flex: none; }
  .band .s3__a { padding-bottom: 10px; }
  .band .s3__b { padding-top: 16px; }
  .feats { flex: none; }

  /* 4a — компактно и без фото: при заходе в раздел сразу видно начало первой истории */
  .band .s4a { gap: 10px; padding-bottom: 18px; }
  .s4a .h2 { font-size: clamp(21px, 5.9vw, 26px); line-height: 1.16; }
  .s4a__text { gap: 10px; }
  .s4a__lower .sub { margin: 2px 0 4px; }
  .s4a .changes li { gap: 12px; padding: 8px 0; }
  .s4a .changes li:first-child { padding-top: 4px; }
  .s4a .changes__ic { width: 30px; height: 30px; }
  .s4a .changes__ic svg { width: 17px; height: 17px; }
  .s4a .changes p { font-size: 14.5px; line-height: 1.42; }

  /* 4b — карточка истории как в варианте 4 (d15), цвета варианта 1 */
  .band .s4b { padding-top: 18px; gap: 14px; }
  .cases { flex: none; gap: 10px; }
  .cases__track { flex: none; }
  .case {
    gap: 10px;
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .42);
    border: 1px solid rgba(255, 255, 255, .78);
  }
  .case__head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .case__line { flex: none; justify-content: flex-start; gap: 8px; }
  .case__arr { display: none; }
  .case__step--was, .case__step--now { padding: 10px 13px 11px; }
  .case__label { display: block; margin: 0 0 3px; }
  .case__step p { display: block; font-size: 15px; line-height: 1.45; }
  .case__insight { padding: 10px 13px 11px 16px; }
  .case__insight p { font-size: 15.5px; line-height: 1.45; }
  .case__shot {
    align-self: stretch;
    justify-content: center;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(47, 90, 65, .3);
    background: rgba(255, 255, 255, .55);
    text-decoration: none;
  }
  /* навигация отдельной строкой: стрелки по краям, точки посередине; под ней сноска */
  .cases__bar { flex-direction: column; align-items: stretch; gap: 0; }
  .cases__nav { justify-content: space-between; }
  .fineprint { padding-top: 2px; }

  /* 6a — «С чем я НЕ работаю»: без фото, намного меньше — заголовок и три пункта компактным списком */
  .band .s6a { gap: 8px; padding-top: 28px; padding-bottom: 24px; }
  .s6a__title { font-size: clamp(22px, 6.2vw, 28px); line-height: 1.12; }
  .nowork { display: block; }
  .nowork li { flex: none; gap: 12px; padding: 9px 0; font-size: 16px; line-height: 1.3; }
  .nowork li:first-child { padding-top: 4px; }
  .nowork .ic { width: 30px; height: 30px; padding: 8px; }

  /* 6b — вопросы своей высоты */
  .faq__list { flex: none; }

  /* ── финальный блок — как вариант 2 (d21): две карточки молочного стекла (7a, 7b) естественной высоты ── */
  .s7 .part {
    min-height: 0;
    margin-top: var(--fit-g);
    justify-content: flex-start;
    gap: 16px;
    padding: 24px var(--px);
    background: var(--sheet-21);
    border: 1px solid var(--sheet-21-brd);
    border-radius: var(--r);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--shadow-21);
  }
  .s7 .s7__a::before, .s7 .s7__b::before { content: none; }
  .s7 .h2 { font-size: clamp(23px, min(6.6vw, 3.3svh), 36px); line-height: 1.12; }
  /* фото как в варианте 2 (d21), который выбрал Антон: портретный кадр во всю ширину карточки, ~57% высоты окна */
  .s7__pic { flex: none; height: clamp(240px, 57svh, 500px); min-height: 0; }
  .s7__head { margin: 0; }
  .s7__step { flex: none; }
  .s7__step .steps { flex: none; justify-content: flex-start; }
  .s7__step .btn { margin-top: 8px; }

  /* ── подвал как в d21: светлая полоса во всю ширину после последней карточки ── */
  .site-footer {
    margin: var(--fit-g) calc(-1 * var(--fit-g)) 0;
    padding: 18px calc(var(--fit-g) + 4px) calc(20px + env(safe-area-inset-bottom));
    font-family: var(--font-21);
    background: rgba(248, 248, 243, .94);
    border: 0;
    border-top: 1px solid rgba(30, 43, 36, .07);
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-footer::before { content: none; }
  .site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer__links { gap: 0 20px; }
}

/* телефон: низкие окна (390x664 — iPhone 13 в Safari с панелями, 375x667): экран 1 плотнее */
@media (max-width: 1023px) and (max-height: 700px) {
  .s1 { --mg: 5px; padding-block: 12px; }
  .s1 .h1 { font-size: 22px; }
  .s1 .ticks { gap: 2px; }
  .s1 .ticks li { font-size: 13.5px; line-height: 1.24; }
  .s1__cta { gap: 6px; }
  .s1__note { padding: 8px 12px; font-size: 12.5px; line-height: 1.38; }
}
/* узкие телефоны (360 и уже) */
@media (max-width: 380px) {
  .s1 .h1 { font-size: clamp(22px, min(6.9vw, 3.4svh), 26px); }
  .s1 .ticks li { font-size: 13px; }
  .s1__note { padding: 9px 12px; }
}
@media (max-width: 380px) and (max-height: 700px) {
  .s1 .h1 { font-size: 22px; }
}
/* узкие телефоны: карточка истории чуть плотнее, «Посмотреть скриншот переписки» в одну строку */
@media (max-width: 380px) {
  .case { padding-inline: 12px; }
  .case__shot { padding: 0 10px; gap: 6px; font-size: 14px; }
}

/* планшет стоя: кегли крупнее, как в d21 / d22 */
@media (min-width: 600px) and (max-width: 1023px) and (min-height: 860px) {
  .band .sheet, .band .part { padding-block: 40px; }
  .s1 .ticks li { font-size: 16px; }
  .s1__note { padding: 12px 16px; font-size: 15.5px; }
  .s4a .h2 { font-size: 32px; }
  .s4a .changes p { font-size: 17px; }
  .s4a .changes__ic { width: 40px; height: 40px; }
  .case__step p { font-size: 17.5px; }
  .case__insight p { font-size: 19px; }
  .s6a__title { font-size: 34px; }
  .nowork li { font-size: 19px; }
  .nowork .ic { width: 38px; height: 38px; padding: 10px; }
  .path { --dot: 64px; }
  .s7 .part { padding: 30px var(--px); }
}

/* ═════════════ d27, компьютер (≥ 1024): лента d22, каждый экран ровно в окно ═════════════ */
@media (min-width: 1024px) {
  /* ярлыков экранов нет — над содержимым под линией стыка чуть больше воздуха */
  :root { --pt: max(24px, calc(42 * var(--u))); }
  /* обёртка экранов 2–6 без своей коробки: экраны — прямые отрезки общей ленты, как в d22 */
  .band { display: contents; }
  /* переключатель ниже и тише */
  .media__box { --sw-h: max(44px, calc(52 * var(--u))); }
  /* Play обложек на компьютере — 88–110 px */
  .vcover { --play: clamp(88px, calc(104 * var(--u)), 110px); }
  .vcover__play { box-shadow: 0 0 0 7px rgba(255, 255, 255, .18), 0 14px 30px -10px rgba(0, 0, 0, .55); }
  .vswitch__btn { padding-inline: max(14px, calc(22 * var(--u))); }
  /* три пункта под видео 1: ряд из трёх колонок в ширину видео, каждая не больше двух строк */
  .s1 .media__box { --tk-fs: clamp(13px, calc(17 * var(--u)), 23px); --tg-h: calc(2 * 1.32 * var(--tk-fs)); }
  .s1 .ticks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 0 max(14px, calc(26 * var(--u)));
  }
  .s1 .ticks li { gap: max(6px, calc(9 * var(--u))); font-size: var(--tk-fs); line-height: 1.32; white-space: normal; text-wrap: balance; }
  /* 4a: подзаголовок и колонки «Что реально меняется» забирают высоту листа (схема-волна посередине) */
  .s4a__lower { display: flex; flex-direction: column; }
  /* 4b: сверху «Было» → «Стало» двумя цветными плашками по высоте текста, под ними «Главный инсайт»
     во всю ширину — крупно, по центру светлой рамки с линией слева; рамка забирает оставшуюся высоту листа */
  .case__line {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "was arr now" "ins ins ins";
    row-gap: var(--rg);
    align-items: stretch;
    align-content: stretch;
    padding: var(--rg) 0;
    border-top: 0;
    border-bottom: 0;
  }
  .case__step--was { grid-area: was; }
  .case__step--now { grid-area: now; }
  .case__arr:nth-of-type(1) { grid-area: arr; align-self: center; margin-top: 0; }
  .case__arr:nth-of-type(2) { display: none; }
  .case__step--was, .case__step--now, .case__insight {
    padding: max(14px, calc(26 * var(--u))) max(18px, calc(32 * var(--u)));
    border-radius: max(14px, calc(22 * var(--u)));
  }
  .case__step--was p, .case__step--now p { font-size: clamp(15px, calc(24 * var(--u)), 34px); line-height: 1.45; }
  .case__insight {
    grid-area: ins;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding-left: max(22px, calc(44 * var(--u)));
    box-shadow: inset max(3px, calc(4 * var(--u))) 0 0 var(--pine-l);
  }
  .case__insight p { font-size: clamp(19px, calc(46 * var(--u)), 66px); line-height: 1.3; max-width: 30em; }
  /* кнопка скриншота — по ширине своего текста (иначе её середина уходит под стрелки карусели) */
  .case__shot { justify-self: start; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .case__step--was p, .case__step--now p { font-size: clamp(14.5px, calc(22 * var(--u)), 34px); }
  .case__insight p { font-size: clamp(18px, calc(40 * var(--u)), 60px); }
}

/* ═════════════ d27, телефон и планшет (< 1024): прокрутка без живого размытия — iPhone/Safari ═════════════
   Раньше каждый экран размывал лес под собой (backdrop-filter), и при прокрутке видеокарта считала размытие
   в каждом кадре — на iPhone это лаги. Теперь лес уже тонирован и размыт в файле (_build/forest-soft.py),
   экраны — те же полупрозрачные листы без фильтров; на вид то же самое, работы видеокарте в ~5 раз меньше */
@media (max-width: 1023px) {
  .page-bg::before { background-image: url(assets/site/forest-rays-soft.webp); filter: none; }
  .sheet, .part, .site-footer { -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* шапка сплошная: без размытия полупрозрачная шапка показывала бы текст под собой */
  .hdr, .hdr.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: #f9f7f1; }
}


/* ═════════════ компьютер (≥ 1024): без живого размытия — меньше нагрузка на видеокарту ═════════════
   Экраны ленты размывали лес под собой (backdrop-filter 18px), а под ними всё время «дышит» свет и пульсирует Play —
   видеокарта пересчитывала размытие в каждом кадре, даже когда страница стоит. Теперь в полосе ленты лежит заранее
   размытый лес (.page-soft, assets/forest-rays-soft-d.webp), по краям — чёткий и уже тонированный (forest-rays-tone.webp);
   у экранов и шапки фильтров нет. На вид то же самое. Файлы фона — _build/forest-soft.py */
.page-soft { display: none; }
@media (min-width: 1024px) {
  .page-bg::before { background-image: url(assets/site/forest-rays-tone.webp); filter: none; }
  /* видна только полоса ленты: по бокам поля с чётким лесом, сверху — под шапкой */
  .page-soft {
    display: block;
    position: fixed;
    left: 0; top: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -2;
    pointer-events: none;
    clip-path: inset(var(--fit-hdr) var(--fit-g) 0);
  }
  /* та же дымка, что у .page-bg::after, поверх размытого леса */
  .page-soft::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(80% 60% at 70% 0%, rgba(255, 240, 214, .38) 0%, rgba(255, 240, 214, 0) 70%),
      linear-gradient(180deg, rgba(248, 244, 234, .16) 0%, rgba(248, 244, 234, .3) 55%, rgba(242, 238, 226, .5) 100%),
      url(assets/site/forest-rays-soft-d.webp) center 30% / cover no-repeat;
  }
  /* в самом начале страницы над первым экраном и в самом конце под подвалом лес чёткий: размытая полоса
     идёт ровно за лентой (край следует за прокруткой первые и последние --fit-g px; без поддержки — полоса чуть шире) */
  @supports (animation-timeline: scroll()) {
    .page-soft, .page-soft::before { animation-timing-function: linear; animation-fill-mode: both; }
    .page-soft { animation-name: softTop; animation-timeline: scroll(root); animation-range: 0 var(--fit-g); }
    .page-soft::before { animation-name: softEnd; animation-timeline: scroll(root); animation-range: calc(100% - var(--fit-g)) 100%; }
  }
  .sheet, .part, .site-footer { -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* шапка сплошная: без размытия сквозь полупрозрачную читался бы текст */
  .hdr, .hdr.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: #f9f7f1; }
}
@keyframes softTop { from { clip-path: inset(calc(var(--fit-hdr) + var(--fit-g)) var(--fit-g) 0); } to { clip-path: inset(var(--fit-hdr) var(--fit-g) 0); } }
@keyframes softEnd { from { clip-path: inset(0); } to { clip-path: inset(0 0 var(--fit-g)); } }
/* это не движение, а граница фона: работает и при «уменьшить движение» */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: scroll()) {
    .page-soft { animation: softTop linear both !important; animation-timeline: scroll(root) !important; animation-range: 0 var(--fit-g) !important; }
    .page-soft::before { animation: softEnd linear both !important; animation-timeline: scroll(root) !important; animation-range: calc(100% - var(--fit-g)) 100% !important; }
  }
}


/* ═════════════ правки Антона 09.10 ═════════════ */
/* обложка видео 2: заголовок короткий — шрифт крупнее (у первой обложки текст длиннее, её размер прежний):
   самый крупный, при котором слово «спокойствию» (~7.2 em) целиком входит в колонку между Play и краем */
.vcover--flip .vcover__title { font-size: min(5.8cqi, calc((50cqi - var(--play) / 2 - var(--tx) - 10px) / 7.4)); line-height: 1.1; }
@media (min-width: 1024px) {
  /* экран 1: три пункта — в левой колонке под заголовком вместо пустоты (заголовок, пункты и кнопка
     распределены по высоте колонки); справа переключатель и видео без строки пунктов */
  .s1 .media__box { --tg-h: 0px; --rest: calc(var(--sw-h) + var(--gap)); }
  .s1 .ticks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: auto;
    width: auto;
    height: auto;
    gap: max(8px, calc(14 * var(--u)));
  }
  .s1 .ticks li { gap: .55em; font-size: clamp(16px, calc(22 * var(--u)), 30px); line-height: 1.3; font-weight: 500; color: var(--ink-2); text-wrap: pretty; }
  .s1 .ticks .ic { width: 1em; height: 1em; margin-top: .15em; }
}


/* ═════════════ ответы на частые вопросы (тексты Антона 10.10) ═════════════ */
/* ответ: пункты с подзаголовком (.faq__h) и списками, в конце — приглашение на разбор (.faq__end) на подложке «Стало».
   Телефон и планшет: ответ раскрывается в списке на всю ширину. Компьютер: экран вопросов не растёт —
   app.js показывает ответ в окне #faq-read (как текст видео), поэтому стрелка у вопроса смотрит вправо */
.faq__a { padding-right: 0; line-height: 1.55; }
.faq__a p, .faq-read__body p { margin: 0 0 8px; }
.faq__pt { margin: 0 0 16px; }
.faq__pt > :last-child, .faq__end > :last-child { margin-bottom: 0; }
.faq__h { font-weight: 650; color: var(--ink); }
.faq__ul { margin: 0 0 8px; }
.faq__ul li { margin: 0 0 6px; }
.faq__ul li { position: relative; padding-left: 1.05em; }
.faq__ul li::before { content: ""; position: absolute; left: .1em; top: .66em; width: 6px; height: 6px; border-radius: 50%; background: var(--pine-l); }
.faq__pt > * + .faq__h { margin-top: 14px; }
.faq__btn { margin: 14px 0 4px; }
.faq__ul b { font-weight: 600; color: var(--ink); }
.faq__end { margin: 18px 0 4px; padding: 12px 14px 13px; border-radius: 14px; background: var(--now-bg); color: var(--ink); }
.faq-read__body .faq__pt { margin-bottom: 22px; }
.faq-read__cta { display: flex; margin-top: 22px; }
@media (min-width: 1024px) {
  .faq__item summary .ic { transform: rotate(-90deg); }
  .js .faq__item[open] > .faq__a { display: none; }
}
/* в редакторе (/admin) ответы раскрываются в списке и на компьютере: в окне была бы копия текста */
.js body.cms-editing .faq__item[open] > .faq__a { display: block; }