/* Yango Deli — Медиакит для поставщиков
   Бренд: жёлтый #FFE033, чёрный #0B0B0B, шрифты Yango Headline / Yango Text.
   Наследует токены/паттерны донора (3. Yango Deli/08 - Сайт гипотез роста/styles.css) 1:1,
   расширяет их новым инвентарём под интерактивный медиакит.
   Собрано по DESIGN-SPEC.md + ARCHITECTURE.md. Файл самодостаточен, без препроцессоров. */

@font-face{
  font-family:"Yango Headline";
  src:url("assets/fonts/YangoHeadline-Black.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
  unicode-range:U+0000-04FF, U+2000-206F, U+20A0-20A9, U+20AB-20BF, U+2190-21FF, U+2200-22FF;
}
@font-face{
  font-family:"Yango Headline";
  src:url("assets/fonts/yango-headline-hebrew.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
  unicode-range:U+0590-05FF, U+20AA, U+FB1D-FB4F;
}
@font-face{ font-family:"Yango Text"; src:url("assets/fonts/YangoText_Rg.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Yango Text"; src:url("assets/fonts/YangoText_Md.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face{ font-family:"Yango Text"; src:url("assets/fonts/YangoText_Bd.woff2") format("woff2"); font-weight:700; font-display:swap; }

:root{
  /* --- донорские токены, 1:1 --- */
  --yellow:#FFE033;
  --yellow-14:rgba(255,224,51,.14);
  --black:#0B0B0B;
  --white:#FFFFFF;
  --ink:#141414;
  --ink-2:#3d3d3d;
  --ink-3:#565656;
  --muted:#6b6b6b;
  --line:#ececec;
  --bg:#f6f6f4;
  --green:#1e9e57;
  --green-ink:#15783f;
  --amber-ink:#8a6300;
  --amber-14:rgba(201,138,0,.14);
  --red:#c0392b;
  --red-06:rgba(192,57,43,.06);

  --radius-lg:22px;
  --radius:16px;
  --radius-sm:12px;
  --radius-xs:8px;
  --sh1:0 1px 2px rgba(11,11,11,.04), 0 4px 12px rgba(11,11,11,.06);
  --sh2:0 4px 8px rgba(11,11,11,.06), 0 16px 32px rgba(11,11,11,.10);
  --sh-lift:0 2px 4px rgba(11,11,11,.06), 0 28px 64px -22px rgba(11,11,11,.55);

  --wrap:1200px;
  --pad:40px;
  --sec-pad:clamp(72px,7.4vw,116px);
  --t-fast:150ms;
  --t:200ms;
  --t-slow:300ms;
  --ease:cubic-bezier(.16,1,.3,1);

  --topbar-h:72px;
  --chips-h:52px;

  --font-head:"Yango Headline","Arial Black",system-ui,sans-serif;
  --font-text:"Yango Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* --- новые токены медиакита (DESIGN-SPEC раздел 3) --- */
  --rail-grey:#DADADA;
  --glow-yellow:rgba(255,224,51,.18);
  --overlay-scrim:rgba(11,11,11,.55);
  --overlay-blur-bg:rgba(11,11,11,.72);
  --radius-phone-outer:54px;
  --radius-phone-screen:40px;
  --sh-device:0 12px 32px rgba(11,11,11,.20), 0 4px 10px rgba(11,11,11,.10);
  --split-desktop:56.6%;
  --split-rail:6.9%;
  --t-count:600ms;
  --brand-pinklady:#E0457C;
  --brand-strauss:#E2231A;
  --brand-baladi:#2E7D32;
  --brand-tara:#1565C0;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + 5px + var(--chips-h) + 8px)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-text); font-size:16px; line-height:1.63;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
button{font:inherit; color:inherit}
a{color:inherit}
input,textarea{font:inherit}

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

h1,h2,h3{font-family:var(--font-head); font-weight:900; word-spacing:.08em; margin:0}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:0; word-spacing:normal}

.skip{
  position:absolute; inset-inline-start:-9999px; top:8px; z-index:100;
  background:var(--yellow); color:var(--black); padding:10px 16px; border-radius:var(--radius-xs);
  font-weight:700; text-decoration:none;
}
.skip:focus{inset-inline-start:16px}

/* ============================================================
   TOPBAR / BRAND / LANGUAGE SWITCH (3 сегмента HE/EN/RU)
   ============================================================ */
.topbar{position:sticky; top:0; z-index:50; background:var(--black); color:var(--white); transition:box-shadow var(--t) var(--ease)}
.topbar.is-stuck{box-shadow:0 4px 16px rgba(11,11,11,.24)}
.topbar__inner{height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between; gap:16px}
.topbar__rule{height:5px; background:var(--yellow)}
.brand{display:flex; align-items:center; gap:14px; min-width:0; text-decoration:none; color:inherit}
.brand__logo{height:28px; width:auto; filter:invert(1)}
.brand__divider{width:1px; height:22px; background:rgba(255,255,255,.25)}
.brand__label{font-size:14px; font-weight:500; color:#d8d8d8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* 3-сегментная капсула — расширение донорской 2-позиционной pill */
.langs{position:relative; display:flex; background:rgba(255,255,255,.08); padding:4px; border-radius:999px}
.langs::before{
  content:""; position:absolute; top:4px; bottom:4px; inset-inline-start:4px; width:calc(33.333% - 4px);
  background:var(--yellow); border-radius:999px; transition:transform var(--t) var(--ease);
}
.langs[data-active="en"]::before{transform:translateX(100%)}
.langs[data-active="ru"]::before{transform:translateX(200%)}
[dir="rtl"] .langs[data-active="en"]::before{transform:translateX(-100%)}
[dir="rtl"] .langs[data-active="ru"]::before{transform:translateX(-200%)}
.lang{
  position:relative; z-index:1; appearance:none; border:0; background:transparent; color:rgba(255,255,255,.64);
  min-height:36px; min-width:44px; padding:6px 12px; border-radius:999px; cursor:pointer;
  font-weight:700; font-size:13px; letter-spacing:.02em; text-align:center;
  transition:color var(--t) var(--ease);
}
.lang:hover{color:var(--white)}
.lang.is-active{color:var(--black)}
.lang:focus-visible{outline:2px solid var(--yellow); outline-offset:2px}

/* ============================================================
   TOC CHIPS (desktop) — 1:1 с донором
   ============================================================ */
.chips{position:sticky; top:calc(var(--topbar-h) + 5px); z-index:40; background:var(--white); border-bottom:1px solid var(--line)}
.chips::before,.chips::after{content:""; position:absolute; top:0; bottom:1px; width:48px; pointer-events:none; opacity:0; transition:opacity var(--t) var(--ease)}
.chips::before{left:0; background:linear-gradient(to right, var(--white), rgba(255,255,255,0))}
.chips::after{right:0; background:linear-gradient(to left, var(--white), rgba(255,255,255,0))}
.chips.has-start::before{opacity:1}
.chips.has-end::after{opacity:1}
[dir="rtl"] .chips::before{left:auto; right:0; background:linear-gradient(to left, var(--white), rgba(255,255,255,0))}
[dir="rtl"] .chips::after{right:auto; left:0; background:linear-gradient(to right, var(--white), rgba(255,255,255,0))}
.chips__inner{height:var(--chips-h); display:flex; align-items:center; gap:8px; overflow-x:auto; scrollbar-width:none}
.chips__inner::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; text-decoration:none; white-space:nowrap; color:var(--ink-3);
  background:transparent; border:1px solid transparent; padding:8px 16px; border-radius:999px;
  font-size:14px; font-weight:500;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.chip:hover{background:var(--bg); color:var(--ink)}
.chip.is-current{background:var(--black); color:var(--yellow)}
.chip:focus-visible{outline:2px solid var(--black); outline-offset:2px}

/* ============================================================
   SECTIONS — общая сетка секций (донор)
   ============================================================ */
section{padding-block:var(--sec-pad)}
section + section{padding-top:0}
/* Каждый разворот — отдельная «страница», поэтому свой воздух сверху держит сам */
section + .spread,.spread + section,.spread + .spread{padding-top:var(--sec-pad)}
.spread__grid{min-height:min(620px,66vh)}

.spread__media .stage-free{margin-inline:auto}
@media (max-width:767px){ .spread__grid{min-height:0} }
/* Полноширинные цветные полосы держат собственный внутренний воздух:
   иначе тёмный фон начинается ровно на первой строке текста. */
section.report{padding-block:clamp(88px,8.6vw,132px)}
section.report + section{padding-top:clamp(56px,5.6vw,88px)}
.sec-head{margin-bottom:clamp(28px,3vw,44px)}
.sec-lead{margin:14px 0 0; max-width:62ch; font-size:17px; line-height:1.6; color:var(--ink-2); text-wrap:pretty}
.sec-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:500; letter-spacing:.10em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px;
}
.sec-kicker::before{content:""; width:48px; height:4px; background:var(--yellow); border-radius:2px}
.sec-title{font-size:clamp(28px,3.6vw,48px); line-height:1.13; letter-spacing:-.01em; max-width:20ch; text-wrap:balance}

/* Секции-«цитаты разреза» PDF — Hero, Live Demo, Report, Case (только эти 4, ≥1024px) держат рельс */
.has-rail{position:relative}

/* PDF-цитата 56.6/43.4 — используется только в Hero и Report */
.split{display:grid; grid-template-columns:1fr; gap:40px}
@media (min-width:1024px){ .split{grid-template-columns:var(--split-desktop) 1fr; gap:56px; align-items:start} }

/* ---------- Rail quote (RailQuote, DESIGN-SPEC §2) — только ≥1024px ---------- */
.rail{display:none}
@media (min-width:1024px){
  .rail{
    display:flex; align-items:center; justify-content:center; gap:12px; position:absolute; inset-block:0;
    /* якорь — внешний край .wrap, а не край окна: иначе рельс висит в пустоте */
    /* 22px ширины + 14px зазора => подпись всегда стоит в поле, а не наезжает на контент */
    inset-inline-end:max(4px, calc((100% - min(100%, var(--wrap))) / 2 + var(--pad) - 36px));
    width:22px; pointer-events:none; z-index:1;
  }
  /* волосяная линия ровно по высоте подписи, со стороны контента */
  .rail::before{content:""; flex:0 0 auto; width:1px; height:clamp(120px,26%,240px); background:var(--rail-grey)}
  .rail__text{
    /* max-height здесь ограничивал inline-размер вертикального текста
       и разливал подпись во вторую колонку поверх первой */
    writing-mode:vertical-rl; transform:rotate(180deg);
    font-family:var(--font-text); font-weight:500; font-size:11px; line-height:1;
    letter-spacing:.10em; white-space:nowrap; color:var(--muted);
  }
  [dir="ltr"] .rail__text{text-transform:uppercase}
  .report .rail::before{background:rgba(255,255,255,.24)}
  .report .rail__text{color:rgba(255,255,255,.52)}
}

/* ============================================================
   CTA / BUTTONS
   ============================================================ */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px; border-radius:999px; border:1.5px solid transparent;
  font-weight:700; font-size:15px; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.cta--primary{background:var(--yellow); color:var(--black)}
.cta--dark{background:var(--black); color:var(--yellow)}
@media (hover:hover){ .cta--primary:hover,.cta--dark:hover{transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(11,11,11,.45)} }
.cta:active{transform:translateY(0) scale(.99)}
.cta--outline{background:transparent; color:var(--black); border-color:rgba(11,11,11,.28)}
@media (hover:hover){ .cta--outline:hover{border-color:var(--black)} }
@media (hover:hover){ .cta--outline:hover{background:var(--black); color:var(--white)} }
/* фокус: жёлтый по жёлтому и жёлтый по светлому фону нечитаем — на светлом кольцо чёрное */
.cta:focus-visible{outline:2px solid var(--black); outline-offset:3px}
.report .cta:focus-visible,.footer .cta:focus-visible,.data-teaser .cta:focus-visible{outline-color:var(--yellow)}
.cta--full{width:100%}
.cta__ico{display:inline-flex; align-items:center; transition:transform var(--t-fast) var(--ease)}
[dir="rtl"] .cta__ico{transform:scaleX(-1)}
@media (hover:hover){
  .cta:hover .cta__ico,.proof__link:hover .cta__ico,.data-teaser__link:hover .cta__ico{transform:translateX(3px)}
  [dir="rtl"] .cta:hover .cta__ico,
  [dir="rtl"] .proof__link:hover .cta__ico,
  [dir="rtl"] .data-teaser__link:hover .cta__ico{transform:scaleX(-1) translateX(3px)}
}

/* ============================================================
   HERO — split 56.6/43.4 (десктоп ≥1024), телефон-тизер справа
   ============================================================ */
.hero{position:relative; overflow:hidden; padding-block:clamp(56px,7vw,96px)}
.hero__glow{
  position:absolute; inset-block-start:-15%; inset-inline-end:-8%; z-index:0;
  width:60vw; height:60vw; max-width:720px; max-height:720px;
  background:radial-gradient(closest-side, var(--glow-yellow), transparent); pointer-events:none;
}
.hero__grid{position:relative; z-index:1}
.hero__content{min-width:0}
.hero__kicker{color:var(--muted)}
.hero__title{
  font-family:var(--font-head); font-size:clamp(36px,6vw,64px); line-height:1.06; letter-spacing:-.02em;
  max-width:14ch; margin:0 0 20px;
}
.hero__title em{font-style:normal; color:var(--ink); background:var(--yellow); padding:0 6px; border-radius:4px; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.hero__sub{font-size:clamp(17px,1.6vw,19px); line-height:1.5; color:var(--ink-2); max-width:52ch; margin:0}
.hero__ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

/* stagger-вход: заголовок → подзаголовок → CTA-ряд → лента лого, 80ms между, 400ms/элемент */
.hero-stagger > *{opacity:0; transform:translateY(12px); transition:opacity 400ms var(--ease), transform 400ms var(--ease)}
.hero.is-in .hero-stagger > *{opacity:1; transform:none}
.hero-stagger > *:nth-child(1){transition-delay:0ms}
.hero-stagger > *:nth-child(2){transition-delay:80ms}
.hero-stagger > *:nth-child(3){transition-delay:160ms}
.hero-stagger > *:nth-child(4){transition-delay:240ms}

.hero__panel{
  position:relative; z-index:1; overflow:hidden;
  /* свет сверху + к краям уходит в чёрный: панель читается как студийная сцена, а не как заливка */
  background:
    radial-gradient(88% 56% at 50% -4%, rgba(255,224,51,.30) 0%, rgba(255,224,51,.07) 44%, transparent 68%),
    radial-gradient(118% 78% at 50% 2%, #2a2a2a 0%, #141414 46%, var(--black) 100%);
  border-radius:var(--radius-lg); padding:clamp(24px,2.4vw,34px);
  display:grid; place-items:center; min-height:340px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 68px -34px rgba(11,11,11,.72);
  opacity:0; transform:translateY(12px); transition:opacity 400ms var(--ease), transform 400ms var(--ease); transition-delay:360ms;
}
.hero.is-in .hero__panel{opacity:1; transform:none}
/* тёплое гало за аппаратом — единственный источник глубины на чёрном */
.hero__panel::before{
  content:""; position:absolute; z-index:0; inset-block-start:2%; inset-inline-start:50%;
  width:86%; aspect-ratio:1; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,224,51,.20), rgba(255,224,51,.04) 56%, transparent 72%);
  pointer-events:none; animation:halo 8s ease-in-out infinite;
}
@keyframes halo{0%,100%{opacity:.78; transform:translateX(-50%) scale(1)} 50%{opacity:1; transform:translateX(-50%) scale(1.05)}}
.hero__panel > *{position:relative; z-index:1}
@media (max-width:1023px){ .hero__panel{margin-top:8px; min-height:0} }

[dir="rtl"] .hero__title{font-size:clamp(39px,6.5vw,69px); line-height:1.12; letter-spacing:0}
@media (max-width:767px){
  .hero__title{font-size:36px; line-height:42px}
  [dir="rtl"] .hero__title{font-size:39px; line-height:44px}
  .hero__ctas{flex-direction:column; align-items:stretch}
}

/* ---------- Proof strip (мини-цифры кейса Franui в/под Hero) ---------- */
.proof{background:var(--white); border-block:1px solid var(--line)}
.proof__inner{display:flex; flex-wrap:wrap; align-items:center; gap:32px; padding-block:20px}
.proof__item{display:flex; align-items:baseline; gap:8px}
.proof__num{font-family:var(--font-head); font-size:22px; font-variant-numeric:tabular-nums}
.proof__label{font-size:13px; color:var(--muted)}
.proof__link{margin-inline-start:auto; font-size:13px; font-weight:700; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:6px}
.proof__link svg{width:12px; height:12px; fill:currentColor}
.proof__link:focus-visible{outline:2px solid var(--black); outline-offset:3px; border-radius:4px}
@media (max-width:767px){
  .proof__inner{gap:24px; padding-block:16px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none}
  .proof__inner::-webkit-scrollbar{display:none}
  .proof__item{flex:0 0 auto; flex-direction:column; align-items:flex-start; gap:2px; max-width:150px}
  .proof__label{line-height:1.35}
  .proof__link{margin-inline-start:16px; flex:0 0 auto; align-self:center}
}

/* ---------- Partner logos (Hero) ---------- */
.partners{margin-top:40px}
.partners__label{margin:0 0 12px; font-size:13px; color:var(--muted)}
.partners__row{display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.partners__name{font-size:14px; font-weight:700; color:var(--ink-3); white-space:nowrap; letter-spacing:.01em}
.partners__logo{height:24px; width:auto; object-fit:contain; opacity:.72; filter:grayscale(1); transition:opacity var(--t) var(--ease), filter var(--t) var(--ease)}
@media (hover:hover){ .partners__logo:hover{opacity:1; filter:none} }
@media (max-width:767px){
  .partners__row{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:24px}
  .partners__row::-webkit-scrollbar{display:none}
}

/* Опорная фраза позиционирования (positioningQuote) */
.quote{font-family:var(--font-head); font-weight:900; font-size:clamp(26px,3.4vw,44px); line-height:1.2; letter-spacing:-.02em; max-width:38ch; margin:0; text-wrap:balance}
[dir="rtl"] .quote{font-size:clamp(28px,3.6vw,46px); line-height:1.3; letter-spacing:0; max-width:34ch}
.quote-sub{margin:20px 0 0; max-width:58ch; font-size:16px; line-height:1.6; color:var(--ink-3); text-wrap:pretty}

/* ============================================================
   PHONE MOCKUP — чистый CSS, без картинок (PhoneMockup)
   ============================================================ */
.phone{
  position:relative; width:100%; max-width:360px; aspect-ratio:390/844;
  /* корпус с бликом по двум граням — иначе чёрный аппарат растворяется в чёрной панели */
  background:linear-gradient(157deg,#3a3a3a 0%,#151515 22%,var(--black) 62%,#242424 100%);
  border-radius:var(--radius-phone-outer); padding:12px;
  box-shadow:var(--sh-device);
  transition:transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.hero__panel .phone{box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 24px 48px -14px rgba(0,0,0,.75)}
.phone--teaser{max-width:220px}
@media (min-width:768px){ .phone--teaser{max-width:258px} }
@media (hover:hover){
  .phone--full:hover{transform:translateY(-4px) scale(1.01); box-shadow:0 20px 44px rgba(11,11,11,.26), 0 6px 14px rgba(11,11,11,.14)}
}
.phone__screen{position:relative; width:100%; height:100%; border-radius:var(--radius-phone-screen); background:var(--white); overflow:hidden}
/* стеклянный блик по диагонали экрана */
.phone__screen::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(203deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.03) 9%, transparent 17%);
}
.phone__notch{
  position:absolute; inset-block-start:0; inset-inline-start:50%; transform:translateX(-50%);
  width:100px; height:28px; border-radius:0 0 14px 14px; background:var(--black); z-index:3;
}
.phone__btn{position:absolute; inset-inline-end:-1.5px; width:3px; height:46px; background:#1a1a1a; border-radius:2px 0 0 2px; z-index:0}
.phone__btn--1{inset-block-start:96px}
.phone__btn--2{inset-block-start:154px}
.phone__sound{
  position:absolute; inset-block-start:12px; inset-inline-end:12px; z-index:4;
  width:32px; height:32px; border-radius:50%; background:rgba(11,11,11,.7); color:var(--white);
  border:0; display:grid; place-items:center; cursor:pointer; transition:background var(--t-fast) var(--ease);
}
.phone__sound:hover{background:rgba(11,11,11,.86)}
.phone__sound svg{width:16px; height:16px; fill:currentColor}
.phone__sound:focus-visible{outline:2px solid var(--yellow); outline-offset:2px}
@media (max-width:767px){
  .phone--full{cursor:grab; touch-action:pan-y}
  .phone--full:active{cursor:grabbing}
  .phone--teaser{max-width:180px}
}

/* ============================================================
   VIDEO SLOT — poster/video/play/скрим/бейдж-заглушка/shimmer
   вертикальный (9:16, в экране телефона) и горизонтальный (16:9)
   ============================================================ */
.video-slot{position:relative; overflow:hidden; background:var(--bg)}
.video-slot--vertical{position:absolute; inset:0; border-radius:var(--radius-phone-screen)}
.video-slot--horizontal{aspect-ratio:16/9; border-radius:var(--radius)}
.media-layer{position:absolute; inset:0; opacity:0; transition:opacity 200ms var(--ease)}
.media-layer.is-active{opacity:1; z-index:1}
.media-layer__media{width:100%; height:100%; object-fit:cover; display:block}
/* Свободная подача макета: картинка уже содержит корпус телефона или это плоский креатив */
.stage-free{position:relative; width:100%; max-width:520px; aspect-ratio:var(--media-ratio,1/1.06); margin-inline:auto}
.video-slot--device{position:absolute; inset:0; border-radius:var(--radius-sm); background:transparent}
.video-slot--device .media-layer__media{object-fit:contain; filter:drop-shadow(0 18px 30px rgba(11,11,11,.14))}
.video-slot--device .video-slot__scrim{display:none}
.video-slot--device .video-slot__badge{inset-block-end:8px; inset-inline-start:auto; inset-inline-end:8px; background:transparent; box-shadow:none}
@media (max-width:767px){ .stage-free{max-width:100%; aspect-ratio:1/1.1} }
.video-slot__scrim{position:absolute; inset-inline:0; inset-block-end:0; height:40%; z-index:2; background:linear-gradient(to top, var(--overlay-scrim), transparent); pointer-events:none}
.video-slot__play{
  position:absolute; inset-inline-start:50%; inset-block-start:50%; transform:translate(-50%,-50%); z-index:3;
  width:56px; height:56px; border-radius:50%; background:var(--overlay-blur-bg);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:0; cursor:pointer;
  display:grid; place-items:center; transition:transform 150ms var(--ease), background 150ms var(--ease);
}
.video-slot--horizontal .video-slot__play{width:72px; height:72px}
@media (max-width:767px){ .video-slot--horizontal .video-slot__play{width:56px; height:56px} }
.video-slot__play svg{width:18px; height:18px; fill:var(--yellow); margin-inline-start:2px}
@media (hover:hover){ .video-slot__play:hover{transform:translate(-50%,-50%) scale(1.06); background:rgba(11,11,11,.82)} }
.video-slot__play:focus-visible{outline:2px solid var(--yellow); outline-offset:3px}
.media-layer--placeholder{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg, #FFEA6B 0%, var(--yellow) 46%, #F2CE10 100%);
}
.media-layer__logo{width:38%; max-width:220px; opacity:.85}
.video-slot__badge{position:absolute; inset-block-end:12px; inset-inline-start:12px; z-index:3}
.video-slot__badge .qbadge{background:var(--white); color:var(--ink-2); box-shadow:var(--sh1)}
.video-slot__badge .qbadge svg{fill:var(--amber-ink)}
.video-slot__caption{margin:12px 0 0; font-size:14px; color:var(--muted); text-align:center}
.case__video{margin-block:36px}
.video-slot__loading{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(110deg,#e5e5e3 8%,#f0f0ee 18%,#e5e5e3 33%);
  background-size:200% 100%; animation:shimmer 1.2s linear infinite;
}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.video-slot.is-loaded .video-slot__loading{display:none}
@media (prefers-reduced-motion:reduce){ .media-layer{transition-duration:50ms !important} }

/* ============================================================
   BADGES — платформа / эксклюзив / «скоро»-заглушка (общая система, из донора)
   ============================================================ */
.cta svg,.cta__ico svg{width:16px; height:16px; flex:0 0 auto; fill:currentColor}
.cta .cta__ico{flex:0 0 auto}
@media (max-width:479px){
  .hero__ctas .cta{white-space:normal; min-width:0; text-align:center}
}
.qbadge{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 10px;
  font-size:11px; letter-spacing:.04em; text-transform:uppercase; font-weight:500;
}
.qbadge svg{width:12px; height:12px; fill:currentColor}
.qbadge.is-warn{background:var(--amber-14); color:var(--amber-ink)}
.qbadge.is-muted{background:var(--bg); color:var(--muted); border:1px solid var(--line)}
.qbadge.is-exclusive{background:var(--black); color:var(--yellow)}

/* ============================================================
   BRAND CHIP ROW (BrandChipRow / BrandChip)
   ============================================================ */
.brand-chips{display:flex; flex-wrap:wrap; gap:10px}
.brand-chips > *{flex:0 0 auto}
.brand-chip{
  display:inline-flex; align-items:center; gap:8px; height:38px; padding-inline:14px;
  border-radius:999px; border:1px solid var(--line); background:var(--white); color:var(--ink-2);
  font-size:13px; line-height:18px; font-weight:500; font-family:var(--font-text); cursor:pointer;
  white-space:nowrap;
  transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease);
}
@media (hover:hover){ .brand-chip:hover{border-color:rgba(11,11,11,.32); color:var(--ink)} }
.brand-chip__logo{width:20px; height:20px; border-radius:50%; object-fit:contain; background:var(--bg); flex:0 0 auto}
.brand-chip__initial{width:20px; height:20px; border-radius:50%; background:var(--bg); color:var(--muted); font-size:11px; font-weight:700; display:grid; place-items:center; flex:0 0 auto}
/* выбранное состояние — внутренним кольцом, чтобы ширина чипа не менялась */
.brand-chip.is-active{border-color:var(--black); color:var(--ink); box-shadow:inset 0 0 0 1px var(--black)}
.brand-chip:focus-visible{outline:2px solid var(--black); outline-offset:2px}
@media (max-width:1023px){
  .brand-chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
  .brand-chips::-webkit-scrollbar{display:none}
}

/* Свотч-индикатор бренда — только кружок/полоска, никогда фон под текстом */
.swatch{display:inline-block; border-radius:50%; flex:0 0 auto}
.swatch--10{width:10px; height:10px}
.swatch--pinklady{background:var(--brand-pinklady)}
.swatch--strauss{background:var(--brand-strauss)}
.swatch--baladi{background:var(--brand-baladi)}
.swatch--tara{background:var(--brand-tara)}

/* край ленты гаснет на мобильном — видно, что ряд брендов прокручивается */
@media (max-width:1023px){
  .brand-chips{
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 90%,transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 90%,transparent 100%);
  }
  [dir="rtl"] .brand-chips{
    -webkit-mask-image:linear-gradient(to left,#000 0,#000 90%,transparent 100%);
    mask-image:linear-gradient(to left,#000 0,#000 90%,transparent 100%);
  }
}

/* ============================================================
   FORMAT CARD — composite (§8 DESIGN-SPEC)
   ============================================================ */
.format-card{
  position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--sh1); padding:24px;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
@media (hover:hover){ .format-card:hover{transform:translateY(-2px); box-shadow:var(--sh2); border-color:var(--black)} }
.format-card:focus-visible{outline:2px solid var(--black); outline-offset:3px}
.format-card--compact{padding:16px; align-self:start}
.format-card--compact .format-card__desc{margin-top:12px}
.format-card__badges{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px}
/* эксклюзив виден по всей сетке ещё до чтения: чёрный контур карточки + чёрный бейдж */
.format-card--exclusive{border-color:var(--black); box-shadow:inset 0 0 0 1px var(--black), var(--sh1)}
@media (hover:hover){ .format-card--exclusive:hover{box-shadow:inset 0 0 0 1px var(--black), var(--sh2)} }
.format-card__body{transition:opacity 100ms var(--ease)}
.format-card__body.is-swapping{opacity:0}
@media (prefers-reduced-motion:reduce){ .format-card__body{transition-duration:50ms !important} }
.format-card__title{font-family:var(--font-text); font-weight:700; font-size:18px; line-height:24px; letter-spacing:-.005em; margin:0 0 6px; text-wrap:balance}
.format-card__lead{margin:0 0 18px; font-size:15px; line-height:1.47; color:var(--ink-2)}
.format-card__desc{margin:0; font-size:14px; line-height:1.5; color:var(--muted)}
.format-card__desc p{margin:0 0 10px}
.format-card__desc p:last-child{margin-bottom:0}
.format-card__desc ul{margin:10px 0 0; padding:0; list-style:none; display:grid; gap:7px}
.format-card__desc li{position:relative; padding-inline-start:16px; line-height:1.45}
.format-card__desc li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.6em;
  width:5px; height:5px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 1px rgba(11,11,11,.18);
}
/* цифры набора живут в общей подошве карточки — одна линия сканирования по всему ряду */
.format-card__metrics{margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.format-card__reach{margin:0; font-size:13px; line-height:1.4; color:var(--ink-3); font-variant-numeric:tabular-nums}
.format-card__reach sup{cursor:help; color:var(--muted)}
.format-card__price{font-family:var(--font-head); font-size:30px; line-height:34px; font-variant-numeric:tabular-nums; margin:6px 0 0; letter-spacing:-.01em}
[dir="rtl"] .format-card__price{font-size:32px; line-height:36px}
/* длинная формулировка цены — это заметка, а не пилюля: капслок и nowrap её ломали */
.format-card__price .qbadge{
  font-family:var(--font-text); display:inline-flex; align-items:flex-start; gap:8px;
  text-transform:none; letter-spacing:0; font-size:13px; line-height:1.45; font-weight:500;
  white-space:normal; border-radius:var(--radius-xs); padding:10px 12px;
}
.format-card__price .qbadge svg{margin-block-start:2px}
@media (max-width:767px){
  .format-card__title{font-size:17px; line-height:23px}
  .format-card__price{font-size:24px; line-height:28px}
  [dir="rtl"] .format-card__price{font-size:26px; line-height:30px}
}
/* выбрана в калькуляторе */
.format-card.is-selected{background:var(--yellow-14); border-color:rgba(11,11,11,.34)}
.format-card__check{
  position:absolute; inset-block-start:12px; inset-inline-end:12px; width:20px; height:20px;
  border-radius:50%; background:var(--black); display:none; place-items:center;
}
.format-card.is-selected .format-card__check{display:grid}
.format-card__check svg{width:10px; height:8px; fill:none; stroke:var(--white); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* Подстановка бренда — строка над заголовком («так это будет выглядеть для {Бренд}»).
   Контейнер рендерится всегда (пустой + [hidden] пока бренд не выбран), поэтому явный
   оверрайд для [hidden] обязателен — иначе display:flex того же класса его перебивает. */
.brand-line{display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:13px; color:var(--muted); border-radius:var(--radius-xs)}
.brand-line[hidden]{display:none}
@keyframes flash-yellow{0%{background:var(--yellow-14)}100%{background:transparent}}
.brand-line.is-flash{animation:flash-yellow 120ms var(--ease)}

/* Поля «פורמט» / «פלטפורמה» (+ «מדד» у сэмплинга) — как в оригинале PDF, метки подчёркнуты */
.format-card__fields{margin:0 0 18px; padding:0; display:grid; gap:10px}
.format-card__field{display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; font-size:14px; line-height:1.5; margin:0}
.format-card__field dt{
  flex:0 0 auto; font-weight:700; color:var(--ink);
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--yellow); text-decoration-thickness:2px;
}
.format-card__field dd{margin:0; color:var(--ink-2)}

/* Подпись над ценой/охватом — те же цифры, что раньше показывались без подписи */
.format-card__metric{margin-bottom:14px}
.format-card__metric:last-child{margin-bottom:0}
.format-card__metric-label{display:block; margin:0 0 4px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

/* ============================================================
   PAGE SPREAD — разворот формата (сайт повторяет разрез PDF-медиакита):
   слева макет, справа карточка формата. Фон секции и цвет карточки
   чередуются по разделам PDF (theme из content.js → deck):
   "light" (брендинговые инструменты) — белый фон + жёлтая карточка,
   "yellow" (инструменты в приложении) — жёлтый фон + белая карточка.
   ============================================================ */
.spread{position:relative; overflow:hidden}
.spread--light{background:var(--white)}
.spread--yellow{background:var(--yellow)}
.spread__grid{display:grid; grid-template-columns:1fr; gap:32px; align-items:center}
@media (min-width:1024px){
  .spread__grid{grid-template-columns:var(--split-desktop) 1fr; gap:56px; align-items:center}
}
.spread__media{display:flex; justify-content:center; min-width:0}
.spread__card-wrap{min-width:0}
.spread__card-wrap .format-card{box-shadow:none; cursor:default}
.spread__card-wrap .format-card--exclusive{box-shadow:inset 0 0 0 1px var(--black)}
@media (hover:hover){ .spread__card-wrap .format-card:hover{transform:none; box-shadow:none} }
@media (min-width:1024px){ .spread__card-wrap .format-card{padding:32px} }

/* раздел 1 PDF — карточка справа жёлтая на белом фоне секции; текст/акценты темнее для контраста */
.spread--light .format-card{background:var(--yellow); border-color:rgba(11,11,11,.12)}
.spread--light .format-card__lead,
.spread--light .format-card__desc,
.spread--light .format-card__field dd,
.spread--light .format-card__reach,
.spread--light .format-card__metric-label,
.spread--light .brand-line{color:var(--ink-2)}
.spread--light .format-card__field dt{text-decoration-color:var(--black)}
.spread--light .format-card__desc li::before{background:var(--black); box-shadow:none}
.spread--light .format-card__badges .qbadge.is-muted{background:rgba(255,255,255,.55); border-color:rgba(11,11,11,.16)}

/* ---------- Вводный разворот «Супер-приложение» (стр. 2 PDF) ---------- */
.spread--intro .spread__card{max-width:520px}
.spread__intro-title{font-size:clamp(28px,3.6vw,44px); margin:0 0 16px}
.spread__intro-text{margin:0; font-size:17px; line-height:1.5; font-weight:700; color:var(--black); max-width:34ch; text-wrap:pretty}

/* ---------- Страница-разделитель (стр. 3 и 8 PDF) — сплошной жёлтый, крупный белый заголовок ---------- */
.page-divider{
  background:var(--yellow); display:flex; align-items:center; justify-content:center;
  padding-block:clamp(80px,15vw,180px); text-align:center;
}
.page-divider__title{
  font-family:var(--font-head); color:var(--white); margin:0 auto; max-width:16ch;
  font-size:clamp(34px,7vw,84px); line-height:1.04; letter-spacing:-.02em; text-wrap:balance;
}

/* ---------- Разовый выбор бренда перед первым разворотом форматов ---------- */
.brand-picker{background:var(--bg)}
.brand-picker__inner{max-width:640px}
.brand-picker__title{font-size:clamp(22px,2.8vw,32px); margin:0 0 10px}
.brand-picker__lead{margin:0 0 24px; font-size:16px; line-height:1.55; color:var(--ink-2); max-width:56ch}
.brand-picker__custom{margin-top:16px; max-width:320px}

/* ============================================================
   BEYOND APP (инвентарь вне приложения) + DATA ANALYTICS TEASER
   ============================================================ */
/* колонки разной длины растягивались до самой высокой и копили белые дыры внутри рамки */
.beyond__grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:32px; align-items:start}
@media (min-width:768px){ .beyond__grid{grid-template-columns:repeat(2,1fr); gap:20px} }
@media (min-width:1024px){ .beyond__grid{grid-template-columns:repeat(4,1fr)} }
.beyond-group{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.beyond-group__head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px;
  background:transparent; border:0; text-align:start; font-family:var(--font-text); font-weight:500;
  font-size:16px; cursor:pointer;
}
.beyond-group__head svg{width:16px; height:16px; flex:0 0 auto; transition:transform var(--t) var(--ease)}
.beyond-group.is-open .beyond-group__head svg{transform:rotate(180deg)}
.beyond-group__head:focus-visible{outline:2px solid var(--black); outline-offset:-2px; border-radius:var(--radius)}
@media (hover:hover){ .beyond-group__head:hover svg{color:var(--ink)} }
.beyond-group__list{list-style:none; margin:0; padding:0 20px 20px}
.beyond-item{display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line)}
.beyond-item:first-child{border-top:0}
.beyond-item__icon{flex:0 0 auto; width:20px; height:20px; color:var(--muted)}
.beyond-item__icon svg{width:100%; height:100%; fill:currentColor}
.beyond-item__title{margin:0 0 2px; font-size:14px; font-weight:500}
.beyond-item__text{margin:0; font-size:13px; color:var(--muted); line-height:1.5}
@media (max-width:767px){
  .beyond-group__list{display:none}
  .beyond-group.is-open .beyond-group__list{display:block}
}
@media (min-width:1024px){
  .beyond-group__head{cursor:default; pointer-events:none}
  .beyond-group__head svg{display:none}
  .beyond-group__list{display:block !important}
}
.data-teaser{
  position:relative; overflow:hidden;
  grid-column:1 / -1; color:var(--white); border-radius:var(--radius); padding:32px;
  background:radial-gradient(130% 160% at 8% 0%, #1e1e1e 0%, var(--black) 58%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
@media (max-width:767px){ .data-teaser{order:-1} }
.data-teaser__title{font-family:var(--font-head); font-size:22px; margin:0 0 6px}
.data-teaser__text{margin:0; color:rgba(255,255,255,.78); font-size:15px; max-width:48ch}
.data-teaser__link{display:inline-flex; align-items:center; gap:8px; color:var(--yellow); text-decoration:none; font-weight:700; font-size:14px}
.data-teaser__link svg{width:14px; height:14px; fill:currentColor}
.data-teaser__link:focus-visible{outline:2px solid var(--yellow); outline-offset:3px}

/* ============================================================
   ОТЧЁТ ПО КАТЕГОРИИ (ReportSection) — тёмная секция, split 56.6/43.4
   ============================================================ */
.report{position:relative; background:var(--black); color:var(--white); overflow:hidden}
.report::before{
  content:""; position:absolute; inset-block-start:-12%; inset-inline-end:-8%; z-index:0;
  width:56vw; height:56vw; max-width:760px; max-height:760px;
  background:radial-gradient(closest-side, rgba(255,224,51,.24), rgba(255,224,51,.05) 55%, transparent 75%);
  pointer-events:none;
}
/* второй, холодный источник снизу — объём вместо плоской заливки */
.report::after{
  content:""; position:absolute; inset-block-end:-20%; inset-inline-start:-12%; z-index:0;
  width:46vw; height:46vw; max-width:620px; max-height:620px;
  background:radial-gradient(closest-side, rgba(255,255,255,.06), transparent 72%); pointer-events:none;
}
.report .sec-kicker{color:rgba(255,255,255,.62)}
.report .sec-title{color:var(--white)}
.report__grid{position:relative; z-index:1}
.report .sec-title{max-width:14ch}
.report__text > p{color:rgba(255,255,255,.80); font-size:17px; line-height:1.68; margin:0 0 16px; max-width:54ch; text-wrap:pretty}

/* карточки-цитаты «для маркетолога» / «для коммерческого директора» — донорский .needs, 1:1 */
.needs{list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.needs li{
  display:flex; flex-direction:column; gap:8px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-sm); padding:20px;
  font-size:15px; line-height:1.55; color:rgba(255,255,255,.86);
}
.needs li strong{color:var(--yellow); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
@media (max-width:900px){ .needs{grid-template-columns:1fr} }

.report__cta{margin-top:28px}

.report__doc{
  position:relative; z-index:1; background:var(--white); color:var(--ink);
  border-radius:var(--radius-lg); padding:clamp(24px,2.4vw,34px);
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 40px 90px -30px rgba(0,0,0,.86);
}
/* жёлтая грань сверху: документ, а не белый прямоугольник, наклеенный на чёрное */
.report__doc::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:clamp(24px,2.4vw,34px);
  height:4px; border-radius:0 0 3px 3px; background:var(--yellow);
}
.report__doc-head{
  margin:0 0 22px; padding-bottom:16px; border-bottom:1px solid var(--line);
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0}
.stat-placeholder{padding:18px 0; border-top:1px solid var(--line)}
.stat-placeholder:nth-child(1),.stat-placeholder:nth-child(2){border-top:0; padding-top:0}
.stat-placeholder:nth-child(odd){padding-inline-end:16px}
.stat-placeholder:nth-child(even){padding-inline-start:16px; border-inline-start:1px solid var(--line)}
.stat-placeholder__num{
  font-family:var(--font-head); font-size:clamp(32px,4.5vw,64px); line-height:1;
  font-variant-numeric:tabular-nums; margin:0 0 6px;
}
.stat-placeholder__num:not(.has-value){font-size:30px; line-height:1.2; color:var(--rail-grey); opacity:1}
[dir="rtl"] .stat-placeholder__num:not(.has-value){font-size:28px}
[dir="rtl"] .stat-placeholder__num{font-size:clamp(35px,4.9vw,69px)}
.stat-placeholder__label{margin:0; font-size:13px; line-height:1.4; color:var(--ink-3)}
.report__doc .form-note{color:var(--muted); line-height:1.5}
.report__doc .form-note:first-of-type{margin-top:22px; padding-top:16px; border-top:1px solid var(--line)}
@media (max-width:767px){
  .stat-grid{grid-template-columns:1fr 1fr; gap:16px}
  .stat-placeholder__num{font-size:36px; line-height:40px}
  [dir="rtl"] .stat-placeholder__num{font-size:39px}
}

/* ============================================================
   КЕЙС FRANUI — таймлайн + StatTile(донор) + EffectChips(донор) + оговорка
   ============================================================ */
.case{position:relative}

/* ---------- CaseTimeline ---------- */
.case-timeline{position:relative; margin:32px 0 40px; display:flex; justify-content:space-between; gap:12px}
/* линия начинается и кончается на крайних узлах, а не на краях блока */
.case-timeline__line{
  position:absolute; inset-inline:10%; inset-block-start:6px; height:2px; z-index:0;
  background:linear-gradient(to right, var(--rail-grey), var(--black) 18%, var(--black) 82%, var(--rail-grey));
}
.case-timeline__node{
  position:relative; z-index:1; flex:1; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; transform:translateX(8px); transition:opacity 250ms var(--ease), transform 250ms var(--ease);
}
[dir="rtl"] .case-timeline__node{transform:translateX(-8px)}
.case-timeline.is-in .case-timeline__node{opacity:1; transform:none}
.case-timeline__node:nth-child(1){transition-delay:0ms}
.case-timeline__node:nth-child(2){transition-delay:60ms}
.case-timeline__node:nth-child(3){transition-delay:120ms}
.case-timeline__node:nth-child(4){transition-delay:180ms}
.case-timeline__node:nth-child(5){transition-delay:240ms}
.case-timeline__node:nth-child(6){transition-delay:300ms}
.case-timeline__dot{width:13px; height:13px; border-radius:50%; background:var(--black); border:3px solid var(--bg); box-shadow:0 0 0 1.5px var(--black)}
/* старт эксклюзива — жёлтый узел; финал — полый, период читается с двух концов */
.case-timeline__node:nth-child(2) .case-timeline__dot{background:var(--yellow); box-shadow:0 0 0 2px var(--black)}
.case-timeline__node:last-child .case-timeline__dot{background:var(--bg); box-shadow:0 0 0 2px var(--black)}
.case-timeline__date{font-family:var(--font-text); font-weight:500; font-size:14px; line-height:20px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink)}
.case-timeline__label{margin:0; font-size:13px; line-height:1.45; color:var(--ink-3); max-width:18ch; text-wrap:pretty}
@media (max-width:767px){
  .case-timeline{flex-direction:column; align-items:stretch; gap:0}
  .case-timeline__line{
    inset-inline:6px auto; inset-block:6px 12px; width:2px; height:auto;
    background:linear-gradient(to bottom, var(--black) 0%, var(--black) 74%, rgba(11,11,11,0) 97%);
  }
  .case-timeline__node{
    display:grid; grid-template-columns:13px 1fr; column-gap:16px; align-items:start;
    text-align:start; padding-block-end:26px;
  }
  .case-timeline__node:last-child{padding-block-end:0}
  .case-timeline__dot{grid-column:1; grid-row:1; margin-block-start:3px}
  .case-timeline__date{grid-column:2; grid-row:1; font-size:13px; line-height:19px}
  .case-timeline__label{grid-column:2; grid-row:2; margin-block-start:4px; max-width:none}
}

/* ---------- StatTile — 1:1 донорский .stats/.stat ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.stat{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px 26px; box-shadow:var(--sh1);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
@media (hover:hover){ .stat:hover{transform:translateY(-2px); box-shadow:var(--sh2); border-color:rgba(11,11,11,.22)} }
/* два ряда зарезервированы под число: подписи всех четырёх плиток стоят на одной линии */
.stat__num{
  font-family:var(--font-head); word-spacing:.1em; font-size:clamp(36px,3.9vw,54px); line-height:1.06;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; margin:0 0 14px;
  min-height:calc(2 * 1.06em); text-wrap:balance;
}
.stat__txt{margin:auto 0 0; font-size:14px; line-height:1.45; color:var(--ink-3); text-wrap:pretty}
.stats-note{margin:18px 0 0; font-size:14px; line-height:1.55; color:var(--ink-3); max-width:76ch}
@media (max-width:1023px){ .stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){
  .stats{grid-template-columns:1fr; gap:12px}
  .stat{padding:20px}
  .stat__num{font-size:38px; min-height:0; margin-bottom:8px}
}

/* ---------- EffectChips — 1:1 донорские .effects/.echip ---------- */
.effects{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.echip{background:var(--white); border:1px solid var(--line); border-radius:999px; padding:11px 18px; display:inline-flex; align-items:baseline; gap:9px}
.echip b{color:var(--green-ink); font-family:var(--font-head); font-size:20px; font-weight:900; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.echip span{font-size:14px; color:var(--ink-3)}

.case__video{margin:32px auto; max-width:760px}

/* ---------- Honest caveat (HonestCaveat) ---------- */
.caveat{
  margin-top:32px; display:flex; gap:16px; align-items:flex-start; max-width:82ch;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--sh1); padding:24px 26px;
}
.caveat__icon{
  width:26px; height:26px; border-radius:50%; background:var(--black); color:var(--yellow);
  font-size:14px; font-weight:700; font-style:italic; font-family:Georgia,"Times New Roman",serif;
  display:grid; place-items:center; flex:0 0 auto; margin-block-start:1px;
}
.caveat p{margin:0; font-size:15px; line-height:1.62; color:var(--ink-2); text-wrap:pretty}
.caveat b{color:var(--ink); font-weight:700}
@media (max-width:767px){ .caveat{padding:20px; gap:12px} }
.case__press{margin:12px 0 0; font-size:13px; color:var(--muted)}

/* ============================================================
   ПРАЙС / КАЛЬКУЛЯТОР
   ============================================================ */
.calc__grid{display:grid; grid-template-columns:1fr; gap:24px; align-items:start}
@media (min-width:1024px){ .calc__grid{grid-template-columns:1fr 360px; gap:40px} }
.calc__group{margin-bottom:32px}
.calc__group:last-child{margin-bottom:0}
.calc__group-title{margin:0 0 16px; font-size:16px; font-weight:700}
.calc__group-note{margin:0 0 16px; font-size:13px; color:var(--muted)}

/* ---------- CalculatorRow — чекбокс-строка, FormatCard-паттерн выбранности ---------- */
/* стопка из 11 «парящих» карточек шумит: тени убраны, группу держит контур */
.calc-row{
  position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; margin-bottom:10px;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
@media (hover:hover){ .calc-row:hover{border-color:rgba(11,11,11,.24)} }
.calc-row.is-selected{background:var(--yellow-14); border-color:rgba(11,11,11,.34); box-shadow:inset 0 0 0 1px rgba(11,11,11,.16)}
.calc-row.is-flash{animation:flash-yellow 150ms var(--ease)}
.calc-row__label{flex:1 1 220px; display:flex; align-items:center; gap:14px; cursor:pointer; min-width:0}
.calc-row__text{display:flex; flex-direction:column; gap:5px; min-width:0}
.calc-row__title{font-size:15px; font-weight:500; transition:color var(--t-fast) var(--ease)}
.calc-row__price{font-family:var(--font-head); font-size:16px; line-height:1.3; color:var(--ink); font-variant-numeric:tabular-nums}
[dir="rtl"] .calc-row__price{font-size:17px}
.calc-row__field{flex:0 0 auto; display:flex; align-items:center; gap:8px}
.calc-row__input{
  width:96px; height:40px; border:1px solid var(--line); border-radius:var(--radius-xs); padding:0 12px;
  font:inherit; font-variant-numeric:tabular-nums; background:var(--white); color:var(--ink);
  transition:border-color var(--t-fast) var(--ease);
}
.calc-row__input:focus-visible{outline:2px solid var(--black); outline-offset:2px; border-color:var(--black)}
.calc-row__hint{flex-basis:100%; margin:0; font-size:13px; line-height:1.45; color:var(--muted)}
.calc-row__label:hover .calc-row__title{color:var(--black)}
.calc__group-note{line-height:1.55; max-width:74ch}
.calc__note{margin:24px 0 0; font-size:13px; color:var(--muted)}

/* кастомный чекбокс */
.calc-checkbox{
  appearance:none; -webkit-appearance:none; width:20px; height:20px; border-radius:4px;
  border:1.5px solid var(--black); background:var(--white); flex:0 0 auto; cursor:pointer;
  background-repeat:no-repeat; background-position:center; background-size:12px;
  transition:background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.calc-checkbox:checked{
  background-color:var(--black); border-color:var(--black);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FFFFFF' d='M6.2 11.4 3 8.2l1.1-1.1 2.1 2.1 5.7-5.7L13 4.6z'/%3E%3C/svg%3E");
}
.calc-checkbox:focus-visible{outline:2px solid var(--black); outline-offset:2px}

/* ---------- Sticky-панель итога (CalculatorSummaryPanel, десктоп) ---------- */
.calc-summary{position:sticky; top:calc(var(--topbar-h) + 5px + var(--chips-h) + 20px); background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 1px 2px rgba(11,11,11,.05), 0 18px 40px -18px rgba(11,11,11,.26); padding:28px}
.calc-summary__title{margin:0 0 20px; padding-bottom:14px; border-bottom:1px solid var(--line); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.calc-summary__line{display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--ink-3); padding:8px 0}
.calc-summary__line b{color:var(--ink); font-variant-numeric:tabular-nums; font-weight:500}
.calc-summary__rule{height:1px; background:var(--ink); opacity:.12; margin:12px 0}
.calc-summary__total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:24px}
.calc-summary__total-label{font-size:15px; font-weight:700}
.calc-total{font-family:var(--font-head); font-size:32px; line-height:36px; font-variant-numeric:tabular-nums}
[dir="rtl"] .calc-total{font-size:35px; line-height:39px}
@media (max-width:767px){ .calc-total{font-size:26px; line-height:30px} [dir="rtl"] .calc-total{font-size:28px; line-height:32px} }

/* ---------- Мобильная sticky-полоса + bottom-sheet (CalculatorMobileBar) ---------- */
.calc-summary--desktop{display:none}
@media (min-width:1024px){ .calc-summary--desktop{display:block} }
.calc-mobile-bar{display:none}
.calc-mobile-bar[hidden]{display:none !important}
@media (max-width:1023px){
  .calc-mobile-bar{
    position:fixed; inset-inline:0; inset-block-end:0; z-index:44; height:64px; background:var(--black); color:var(--white);
    display:flex; align-items:center; justify-content:space-between; gap:16px; padding-inline:16px;
    box-shadow:0 -4px 16px rgba(11,11,11,.16);
  }
}
.calc-mobile-bar__total{font-family:var(--font-head); font-size:18px; font-variant-numeric:tabular-nums}
.calc-mobile-bar__toggle{background:var(--yellow); color:var(--black); border:0; border-radius:999px; padding:10px 18px; font-weight:700; font-size:13px; cursor:pointer}
.calc-mobile-bar__toggle:focus-visible{outline:2px solid var(--white); outline-offset:2px}
.sheet .calc-summary{box-shadow:none; padding:20px 20px 24px}

/* ============================================================
   ЗАЯВКА (LeadForm)
   ============================================================ */
.lead-form{max-width:480px; margin-inline:auto}
.form-field{margin-bottom:20px}
.form-field:last-of-type{margin-bottom:24px}
.form-label{display:block; margin:0 0 8px; font-size:14px; font-weight:500; color:var(--ink)}
.form-input,.form-textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 16px;
  font:inherit; background:var(--white); color:var(--ink); transition:border-color var(--t-fast) var(--ease);
}
.form-textarea{min-height:120px; resize:vertical}
.form-input:focus-visible,.form-textarea:focus-visible{outline:2px solid var(--black); outline-offset:2px; border-color:var(--black)}
.form-note{margin:8px 0 0; font-size:13px; color:var(--muted)}
.form-input::placeholder,.form-textarea::placeholder,.calc-row__input::placeholder{color:var(--muted); opacity:1}
.form-input:hover,.form-textarea:hover,.calc-row__input:hover{border-color:rgba(11,11,11,.28)}

/* ============================================================
   FOOTER — расширение донора (команда/контакты)
   ============================================================ */
.footer{background:var(--black); color:var(--white); border-top:5px solid var(--yellow)}
.footer__inner{padding-block:64px; display:flex; flex-direction:column; gap:16px; align-items:flex-start}
.footer__note{margin:0; font-size:16px; font-weight:500}
.footer__meta{margin:0; font-size:14px; color:rgba(255,255,255,.56)}
.footer__team{display:flex; flex-wrap:wrap; gap:16px 24px; margin:4px 0 0; padding:0; list-style:none}
.footer__team li{font-size:14px; color:rgba(255,255,255,.72)}
.footer__team b{color:var(--white); font-weight:500}

/* ============================================================
   FAB + SHEET (мобильный TOC, наследуется 1:1) — переиспользован также как calc-sheet-контейнер
   ============================================================ */
.fab{
  display:none; position:fixed; inset-block-end:24px; inset-inline-end:16px; z-index:44;
  width:56px; height:56px; border-radius:50%; border:0; background:var(--black); color:var(--yellow);
  box-shadow:var(--sh2); cursor:pointer; place-items:center;
}
.fab svg{width:24px; height:24px; fill:currentColor}
.fab:focus-visible{outline:2px solid var(--black); outline-offset:3px}
.sheet{position:fixed; inset:0; z-index:60; display:none}
.sheet.is-open{display:block}
.sheet__ov{position:absolute; inset:0; background:rgba(11,11,11,.4); opacity:0; transition:opacity var(--t-fast) var(--ease)}
.sheet.is-open .sheet__ov{opacity:1}
.sheet__panel{
  position:absolute; inset-inline:0; bottom:0; background:var(--white);
  border-radius:16px 16px 0 0; padding:8px 0 max(16px, env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform 250ms var(--ease); max-height:76vh; overflow:auto;
}
.sheet.is-open .sheet__panel{transform:none}
.sheet__grab{width:40px; height:4px; border-radius:2px; background:var(--line); margin:8px auto 4px}
.sheet a{
  display:flex; align-items:center; gap:12px; padding:14px 20px; text-decoration:none;
  font-size:16px; border-bottom:1px solid var(--line); min-height:44px;
}
.sheet a:last-child{border-bottom:0}
.sheet a:hover{background:var(--bg)}
.sheet a:focus-visible{outline:2px solid var(--black); outline-offset:-2px}
.sheet a::before{content:""; width:8px; height:8px; border-radius:50%; background:transparent}
.sheet a.is-current::before{background:var(--yellow)}

/* ---------- To top — 1:1 донорский ---------- */
.totop{
  position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:45;
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:var(--black); color:var(--white); display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity var(--t) var(--ease), background var(--t-fast) var(--ease);
}
.totop svg{width:22px; height:22px; fill:currentColor}
.totop.is-on{opacity:1; pointer-events:auto}
.totop:hover{background:var(--yellow); color:var(--black)}
.totop:focus-visible{outline:2px solid var(--black); outline-offset:3px}

/* ============================================================
   REVEAL — 1:1 донорский IntersectionObserver-паттерн
   ============================================================ */
.reveal{opacity:0; transform:translateY(16px); transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .hero__panel::before,.video-slot__loading{animation:none !important}
}

/* ============================================================
   RTL / HEBREW TYPE — компенсация размеров H-стилей (§4 DESIGN-SPEC)
   ============================================================ */
[dir="rtl"] .sec-title{font-size:clamp(30px,3.9vw,52px); line-height:1.2}
[dir="rtl"] .data-teaser__title{font-size:23px}

/* ============================================================
   RESPONSIVE — консолидировано, брейкпоинты 375 / 768 / 1024 / 1440
   ============================================================ */
@media (max-width:1023px){
  :root{--pad:24px}
  .needs{grid-template-columns:1fr}
}
@media (max-width:767px){
  :root{--pad:16px; --topbar-h:60px}
  section{padding-block:56px}
  .sec-head{margin-bottom:20px}
  .brand__logo{height:22px}
  .brand__label,.brand__divider{display:none}
  .chips{display:none}
  .fab{display:grid}
  .totop{display:none}
  .footer__inner{padding-block:40px}
  html{scroll-padding-top:76px}
  /* нижняя sticky-полоса калькулятора не должна перекрывать контент секции заявки */
  #pricing{padding-bottom:88px}
}

/* ============================================================
   PRINT — сайт показывают и печатают на встречах
   ============================================================ */
@media print{
  .hero__panel,.rail{display:none !important}

  .topbar,.chips,.totop,.fab,.sheet,.skip,.hero__glow,
  .video-slot__play,.video-slot__loading,.phone__sound,.calc-mobile-bar{display:none !important}
  .report::before,.report::after,.hero__panel::before,.report__doc::before{display:none !important}
  body{background:#fff}
  .stat,.format-card,.calc-row,.stat-placeholder,.caveat{box-shadow:none; break-inside:avoid}
  .hero,.report,.footer,.hero__panel,.data-teaser,.spread--yellow,.page-divider{background:#fff !important; color:#000 !important; border:1px solid #ddd}
  .report__doc{box-shadow:none !important; border:1px solid #ddd}
  .hero__sub,.report__text > p,.footer__meta,.data-teaser__text,.needs li{color:#333 !important; background:#fff !important}
  .hero__title em{background:transparent; color:#000; padding:0}
  .report .sec-title,.report .sec-kicker{color:#000 !important}
  .brand__logo{filter:none}
  .phone{box-shadow:none; border:1px solid #ddd}
  section{padding-block:24px}
  .calc-summary{position:static; box-shadow:none; border:1px solid #ddd}
}

/* ------------------------------------------------------------------
   Разворот по образцу PDF: макет слева, карточка формата справа,
   цвет делит страницу пополам. Правила идут последними, чтобы
   перекрыть базовые стили карточки.
   ------------------------------------------------------------------ */
@media (min-width:1024px){
  [dir="rtl"] .spread__grid{direction:ltr}
  [dir="rtl"] .spread__grid > *{direction:rtl}
  .spread::before{
    content:""; position:absolute; top:0; bottom:0; right:0;
    width:43.4%; background:var(--yellow); pointer-events:none;
  }
  .spread--yellow{background:var(--yellow)}
  /* Белая карточка второго раздела в оригинале скруглена по внутреннему краю
     и уходит в обрез по правому краю листа */
  .spread--yellow::before{
    background:var(--white); right:0; left:auto; top:0; bottom:0;
    width:43.4%;
    border-radius:clamp(40px,4.4vw,84px) 0 0 clamp(40px,4.4vw,84px);
  }
  .spread__grid{position:relative; z-index:1}
  .spread--light .format-card,
  .spread--yellow .format-card,
  .spread .format-card{background:transparent; border:0; box-shadow:none; padding:0}

}

/* ------------------------------------------------------------------
   РАЗВОРОТ ВО ВЕСЬ ЭКРАН — как страница исходного PDF.
   Макет крупный и обрезан нижним краем страницы, заголовок формата
   в масштабе оригинала, цвет от края до края. Всё это только на
   больших экранах: на телефоне разворот остаётся обычной колонкой.
   ------------------------------------------------------------------ */
@media (min-width:1024px){
  .spread{min-height:min(92vh,920px); padding-block:0; display:flex; align-items:stretch; overflow:hidden}
  .spread > .wrap{max-width:none; width:100%; padding:0}
  .spread__grid{
    width:100%; min-height:inherit; gap:0;
    grid-template-columns:var(--split-desktop) 1fr; align-items:end;
  }
  .spread__media{align-self:end; justify-content:center; padding-inline:clamp(24px,3vw,56px)}
  /* Кадр держит постоянную площадь: высокий макет тянется по высоте,
     широкий — по ширине колонки. Иначе один разворот выглядит плакатом,
     а соседний маленькой картинкой. */
  .spread__media .stage-free{
    width:auto; height:min(78vh,780px); max-width:100%; max-height:none; margin:0;
  }
  .spread__media .stage-free.is-wide{width:100%; height:auto; max-height:min(72vh,720px)}
  /* Телефон, как в оригинале, уходит за нижний край страницы */
  .spread__media .phone{width:auto; height:min(88vh,880px); max-width:none; margin-block-end:min(-12vh,-96px)}
  /* Широкий кадр стоит по центру страницы, а не жмётся к низу */
  .spread__media:has(.is-wide){align-self:center}
  .spread--intro .spread__media .stage-free{height:min(66vh,660px); align-self:center}
  .spread--intro .spread__grid{align-items:center}

  /* В оригинале от границы цвета до текста около 9% ширины листа */
  .spread__card-wrap{
    align-self:center;
    padding-inline-start:clamp(48px,6vw,116px);
    padding-inline-end:clamp(40px,5vw,96px);
    padding-block:clamp(40px,6vh,72px);
  }
  /* Вертикальная подпись у края, как на каждой странице оригинала */
  .spread .rail{inset-inline-end:auto; inset-inline-start:0}
  .spread--yellow .rail__text{color:rgba(11,11,11,.42); border-inline-end-color:rgba(11,11,11,.18)}
  .spread .format-card__title{
    font-family:var(--font-head); font-weight:900;
    font-size:clamp(34px,4.2vw,62px); line-height:1.04; letter-spacing:-.01em;
    margin:0 0 14px;
  }
  [dir="rtl"] .spread .format-card__title{font-size:clamp(37px,4.6vw,67px); line-height:1.12; letter-spacing:0}
  .spread .format-card__lead,.spread .format-card__desc{font-size:17px; line-height:1.5}
  .spread .format-card__fields{font-size:16px}
  .spread .format-card__badges{margin-bottom:18px}
  .spread .format-card__divider{margin-block:22px}
}
@media (min-width:1440px){
  .spread .format-card__lead,.spread .format-card__desc{font-size:18px}
}

/* ------------------------------------------------------------------
   Обложка — первая страница PDF: сплошной жёлтый, огромная латиница
   по левому краю, логотип внизу слева. Направление всегда слева
   направо, как в оригинале, даже на иврите.
   ------------------------------------------------------------------ */
.cover{background:var(--yellow); padding-block:0; display:flex; align-items:center; min-height:min(78vh,820px)}
.cover > .wrap{width:100%; max-width:none; padding-inline:clamp(24px,5vw,96px)}
.cover__inner{direction:ltr; text-align:left}
.cover__line{
  display:block; font-family:var(--font-head); font-weight:900;
  font-size:clamp(64px,15.5vw,224px); line-height:.86; letter-spacing:-.02em;
}
.cover__line--1{color:var(--white)}
.cover__line--2{color:var(--black)}
.cover__logo{display:block; height:clamp(28px,4.2vw,60px); width:auto; margin-top:clamp(28px,5vh,64px)}
@media (max-width:767px){
  .cover{min-height:78vh}
  .cover__line{font-size:clamp(48px,17vw,120px)}
}

/* ------------------------------------------------------------------
   Точная композиция страницы оригинала:
   раздел 1 — белый лист, жёлтая панель со скруглением, справа от неё
   белая полоса с вертикальной подписью;
   раздел 2 — жёлтый лист, белая карточка уходит в обрез.
   ------------------------------------------------------------------ */
@media (min-width:1024px){
  .spread--light::before{
    right:var(--split-rail); left:auto; top:clamp(16px,3.4vh,40px); bottom:clamp(16px,3.4vh,40px);
    width:calc(43.4% - var(--split-rail));
    border-radius:clamp(40px,4.4vw,84px);
  }
  /* Полоса рельса — служебное поле листа, текст в неё не заходит */
  .spread .spread__card-wrap{padding-inline-end:calc(var(--split-rail) + clamp(28px,3vw,56px))}
  .spread--light .spread__card-wrap{padding-inline-end:calc(var(--split-rail) + clamp(40px,4.4vw,88px))}
  /* Рельс всегда у правого края листа, как в оригинале */
  .spread .rail{inset-inline:auto; left:auto; right:0; width:var(--split-rail); align-items:center}
  .spread--intro .spread__intro-title{font-size:clamp(34px,4.2vw,62px); line-height:1.06}
  [dir="rtl"] .spread--intro .spread__intro-title{font-size:clamp(37px,4.6vw,67px); line-height:1.14}
  .spread--intro .spread__intro-text{font-size:clamp(19px,1.8vw,26px); line-height:1.45; font-weight:700; color:var(--black); max-width:30ch}
  /* Панель вводной страницы отступает со всех сторон и скруглена по всем углам */
  .spread--intro::before{
    top:clamp(20px,4vh,48px); bottom:clamp(20px,4vh,48px);
    right:var(--split-rail); left:auto;
    width:calc(43.4% - var(--split-rail)); border-radius:clamp(40px,4.4vw,84px);
  }
  .spread--intro .spread__media .stage-free{height:min(84vh,860px); margin-block-end:min(-8vh,-64px)}
}

/* Светлый логотип в рельсе — как водяной знак в углу каждой страницы PDF */
.rail__mark{width:clamp(28px,2.4vw,42px); height:auto; opacity:.22; margin-block-end:14px}
@media (max-width:1023px){ .rail__mark{display:none} }

/* ------------------------------------------------------------------
   Сетка объектов на развороте — повторяет раскладку страниц оригинала,
   где слева лежит несколько плакатов, постов или листовок.
   ------------------------------------------------------------------ */
.tile-grid{position:relative; display:grid; gap:clamp(12px,1.6vw,22px); width:100%; margin-inline:auto}
.tile-grid--2{grid-template-columns:repeat(2,1fr); max-width:620px}
.tile-grid--3{grid-template-columns:repeat(3,1fr); max-width:720px}
.tile-grid--4{grid-template-columns:repeat(2,1fr); max-width:640px}
.tile{display:flex; align-items:center; justify-content:center; min-width:0}
.tile__img{width:100%; height:auto; display:block; border-radius:var(--radius-xs)}
.tile-grid__badge{position:absolute; inset-block-end:-34px; inset-inline-end:0}
/* Листовки в оригинале лежат под небольшим углом, как поляроиды */
.tile-grid--tilted .tile__img{
  box-shadow:0 10px 26px rgba(11,11,11,.16); border-radius:6px; background:var(--white);
}
.tile-grid--tilted .tile:nth-child(1) .tile__img{transform:rotate(-3.5deg)}
.tile-grid--tilted .tile:nth-child(2) .tile__img{transform:rotate(2.5deg)}
.tile-grid--tilted .tile:nth-child(3) .tile__img{transform:rotate(-1.5deg)}
@media (min-width:1024px){
  .spread__media .tile-grid--4{max-width:min(560px,92%)}
  .spread__media .tile-grid--3{max-width:min(660px,94%)}
  .spread__media .tile-grid--2{max-width:min(560px,92%)}
}
@media (max-width:767px){
  .tile-grid--3{grid-template-columns:repeat(3,1fr)}
  .tile-grid__badge{inset-block-end:-30px}
}
@media (prefers-reduced-motion:reduce){
  .tile-grid--tilted .tile__img{transform:none}
}

/* ------------------------------------------------------------------
   Карточка формата по анатомии страницы оригинала: подзаголовок
   жирный и примерно вдвое мельче заголовка, метка подчёркнута и
   стоит отдельной строкой, содержимое под ней.
   ------------------------------------------------------------------ */
.format-card__lead{margin:0 0 22px; font-weight:700; color:var(--black); font-size:17px; line-height:1.35; max-width:30ch}
.format-card__fields{display:flex; flex-direction:column; gap:18px; margin:0 0 24px}
.format-card__field{display:block; min-width:0}
.format-card__field-label{
  margin:0 0 6px; font-weight:700; color:var(--black);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px;
  font-size:16px;
}
.format-card__field-body{color:var(--ink); font-size:16px; line-height:1.45}
.format-card__field-body p{margin:0}
.format-card__field-body ul{margin:0; padding:0; list-style:none}
.format-card__field-body li{position:relative; padding-inline-start:16px; margin-block:2px}
.format-card__field-body li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--black);
}
@media (min-width:1024px){
  .spread .format-card__lead{font-size:clamp(18px,2.1vw,30px); line-height:1.3; margin-block-end:clamp(20px,3vh,34px)}
  [dir="rtl"] .spread .format-card__lead{font-size:clamp(19px,2.2vw,32px); line-height:1.38}
  .spread .format-card__field-label{font-size:clamp(16px,1.5vw,21px)}
  .spread .format-card__field-body{font-size:clamp(15px,1.45vw,20px); line-height:1.4}
  .spread .format-card__fields{gap:clamp(14px,2vh,24px)}
}

/* ------------------------------------------------------------------
   Сетка объектов: порядок плиток физический, как на странице
   оригинала, независимо от языка. Кадр стоит по центру листа.
   ------------------------------------------------------------------ */
[dir="rtl"] .tile-grid{direction:ltr}
@media (min-width:1024px){
  .spread__media:has(.tile-grid){align-self:center}
  .spread__media .tile-grid--4{max-width:min(640px,96%)}
  .spread__media .tile-grid--3{max-width:min(700px,96%)}
}

/* Листовки лежат внахлёст по диагонали, как на странице сэмплов */
.tile-grid--tilted{display:block; position:relative; aspect-ratio:1/.92; max-width:min(620px,96%)}
.tile-grid--tilted .tile{position:absolute; margin:0}
.tile-grid--tilted .tile__img{
  width:100%; height:auto; background:var(--white); padding:10px;
  border-radius:4px; box-shadow:0 12px 30px rgba(11,11,11,.18);
}
.tile-grid--tilted .tile:nth-child(1){width:56%; top:0; left:16%; transform:rotate(-5deg); z-index:1}
.tile-grid--tilted .tile:nth-child(2){width:52%; top:34%; left:0; transform:rotate(4deg); z-index:2}
.tile-grid--tilted .tile:nth-child(3){width:42%; top:30%; left:46%; transform:rotate(-2deg); z-index:3}
@media (max-width:767px){
  .tile-grid--tilted{aspect-ratio:1/1}
  .tile-grid--tilted .tile:nth-child(1){width:62%; left:10%}
  .tile-grid--tilted .tile:nth-child(2){width:58%; top:38%}
  .tile-grid--tilted .tile:nth-child(3){width:46%; top:34%; left:44%}
}
@media (prefers-reduced-motion:reduce){
  .tile-grid--tilted .tile{transform:none !important}
}

/* ------------------------------------------------------------------
   Правая полоса листа: логотип сверху, подпись, чёрточка и мышка снизу.
   Точка внутри мышки медленно уходит вниз — подсказка прокрутки.
   ------------------------------------------------------------------ */
.rail{display:flex; flex-direction:column; justify-content:space-between; align-items:center}
.rail__foot{display:flex; flex-direction:column; align-items:center; gap:14px}
.rail__dash{width:1px; height:22px; background:currentColor; opacity:.5}
.rail__mouse{display:block; color:var(--muted); opacity:.65}
.rail__mouse svg{width:18px; height:29px; display:block}
.rail__mouse-dot{animation:rail-scroll 2.4s var(--ease) infinite}
@keyframes rail-scroll{
  0%{transform:translateY(0); opacity:0}
  18%{opacity:1}
  70%{transform:translateY(11px); opacity:0}
  100%{transform:translateY(11px); opacity:0}
}
.spread--yellow .rail__mouse,.spread--yellow .rail__dash{color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){
  .rail__mouse-dot{animation:none}
}
@media (max-width:1023px){ .rail__foot{display:none} }

/* Полоса тянется во всю высоту листа: логотип у верхнего края,
   подпись с мышкой у нижнего — как в оригинале */
@media (min-width:1024px){
  .spread .rail{
    top:clamp(20px,4vh,44px); bottom:clamp(20px,4vh,44px);
    max-height:none; height:auto; transform:none;
  }
  .spread .rail__mark{margin:0}
}

/* ==================================================================
   Правки по сверке с оригиналом, круг 1
   ================================================================== */
@media (min-width:1024px){
  /* Текст карточки заходил на полосу рельса: отступы физические,
     потому что карточка всегда справа независимо от языка */
  .spread .spread__card-wrap{
    padding-inline:0;
    padding-right:calc(var(--split-rail) + clamp(28px,3.2vw,64px));
    padding-left:clamp(32px,4vw,80px);
  }
  .spread--light .spread__card-wrap{padding-right:calc(var(--split-rail) + clamp(36px,4vw,80px))}

  /* Кегли: в оригинале заголовок мельче, а подзаголовок, метка и текст
     под ней набраны почти одним размером */
  .spread .format-card__title{font-size:clamp(30px,3.1vw,46px); line-height:1.06}
  [dir="rtl"] .spread .format-card__title{font-size:clamp(32px,3.35vw,50px); line-height:1.14}
  .spread .format-card__lead{font-size:clamp(17px,1.7vw,24px); line-height:1.32}
  [dir="rtl"] .spread .format-card__lead{font-size:clamp(18px,1.8vw,25px); line-height:1.4}
  .spread .format-card__field-label{font-size:clamp(16px,1.6vw,23px)}
  .spread .format-card__field-body{font-size:clamp(16px,1.6vw,23px); line-height:1.38}

  /* Панель первого раздела в оригинале уходит в обрез сверху и снизу,
     скруглены только левые углы (исключение — вводная страница) */
  .spread--light:not(.spread--intro)::before{
    top:0; bottom:0;
    border-radius:clamp(40px,3.1vw,60px) 0 0 clamp(40px,3.1vw,60px);
  }
  .spread--yellow::before{border-radius:clamp(40px,3.1vw,60px) 0 0 clamp(40px,3.1vw,60px)}

  /* Линия рельса: сплошная, во всю высоту листа, слева от подписи */
  .spread .rail{border-left:3px solid var(--line)}
}

/* Разделитель — полноценная страница, как в оригинале:
   огромный белый заголовок в две строки по правому краю, логотип внизу */
.page-divider{
  background:var(--yellow); display:flex; align-items:center;
  min-height:min(92vh,920px); padding-block:0; position:relative;
}
.page-divider > .wrap{width:100%; max-width:none; padding-inline:clamp(24px,5vw,110px)}
.page-divider__inner{width:100%}
.page-divider__title{
  font-family:var(--font-head); color:var(--white); margin:0;
  font-size:clamp(48px,13vw,205px); line-height:.98; letter-spacing:-.02em;
  max-width:11ch; text-align:start; text-wrap:balance;
}
[dir="rtl"] .page-divider__title{line-height:1.06; letter-spacing:0}
.page-divider__logo{
  position:absolute; bottom:clamp(24px,5vh,60px); right:clamp(24px,5vw,110px);
  height:clamp(22px,2.6vw,46px); width:auto;
}
@media (max-width:767px){
  .page-divider{min-height:60vh}
  .page-divider__title{font-size:clamp(34px,11vw,64px)}
}

/* Выноска с рукописной стрелкой — как на странице брендированной категории */
.spread__note{position:absolute; display:flex; align-items:flex-start; gap:6px; color:var(--black); pointer-events:none}
.spread__note-text{font-family:var(--font-head); font-weight:900; font-size:clamp(15px,1.7vw,26px); line-height:1.1; max-width:9ch; text-align:center}
.spread__note-arrow{width:clamp(46px,5vw,80px); height:auto; transform:scaleX(-1)}
[dir="rtl"] .spread__note-arrow{transform:none}
@media (min-width:1024px){
  .spread__media{position:relative}
  .spread__note{top:34%; right:2%}
  [dir="rtl"] .spread__note{right:auto; left:2%}
}
@media (max-width:1023px){ .spread__note{display:none} }

/* Два аппарата рядом — страница главного баннера */
.screen-row{display:flex; gap:clamp(12px,2vw,28px); align-items:flex-end; justify-content:center; width:100%}
.screen-row .phone{flex:0 1 auto}
@media (min-width:1024px){
  .spread__media .screen-row .phone{height:min(78vh,780px); margin-block-end:0}
}

/* ==================================================================
   Круг 1, часть 2
   ================================================================== */
:root{ --rail-w:clamp(56px,6.9vw,110px); }

@media (min-width:1024px){
  /* Полоса и отступ текста считаются от одной величины, иначе текст
     заходил на подпись: процент у полосы брался от листа, а у отступа
     от колонки */
  .spread .rail{width:var(--rail-w)}
  .spread .spread__card-wrap{
    padding-right:calc(var(--rail-w) + clamp(28px,3vw,56px));
    padding-left:clamp(32px,4vw,80px);
  }
  .spread--light:not(.spread--intro)::before,
  .spread--intro::before{right:var(--rail-w); width:calc(43.4% - var(--rail-w))}

  /* Подзаголовок в оригинале чёрный, а не серый */
  .spread .format-card__lead{color:var(--black)}
}

/* Обложка: в оригинале блок прижат к низу листа, заголовок крупнее */
.cover{align-items:flex-end}
.cover > .wrap{padding-bottom:clamp(28px,6vh,72px)}
.cover__line{font-size:clamp(64px,16.5vw,250px)}
@media (max-width:767px){ .cover__line{font-size:clamp(52px,19vw,140px)} }

/* Подписи под плитками — как под макетами на странице соцконтента */
.tile__caption{
  margin:10px 0 0; text-align:center; font-weight:700; color:var(--black);
  font-size:clamp(13px,1.15vw,17px); line-height:1.25;
}
.tile{flex-direction:column}
/* Водяной знак в полосе — две строки, как в оригинале */
.rail__mark{
  font-family:var(--font-head); font-weight:900; font-style:italic;
  font-size:clamp(13px,1.15vw,18px); line-height:1.02; color:var(--muted);
  opacity:.5; text-align:center; letter-spacing:-.01em;
}

/* Режим указателя (?pick=1): подсветка элемента под курсором */
body.is-picking, body.is-picking *{cursor:crosshair !important}

/* ==================================================================
   Правая полоса листа — строго по оригиналу:
   одна тонкая линия во всю высоту, светлый логотип в две строки
   у верхнего края, ниже вертикальная подпись с разрядкой,
   короткая чёрточка и мышка у нижнего края.
   ================================================================== */
@media (min-width:1024px){
  .spread .rail::before{display:none}          /* лишняя вторая линия */
  .spread .rail{
    border-left:1px solid var(--rail-grey);
    justify-content:space-between; padding-block:0;
  }
  .spread .rail__mark{
    align-self:center; margin:0;
    font-size:clamp(14px,1.35vw,21px); line-height:1.0; opacity:.42;
  }
  .spread .rail__text{
    font-size:clamp(11px,1.0vw,15px); letter-spacing:.16em; color:var(--rail-grey);
  }
  .spread .rail__dash{width:1px; height:clamp(26px,3.4vh,40px); background:var(--rail-grey); opacity:1}
  .spread .rail__mouse{color:var(--rail-grey); opacity:1}
  .spread .rail__foot{gap:clamp(14px,2.4vh,26px); padding-block-end:clamp(10px,2vh,26px)}
  .spread--yellow .rail__text,.spread--yellow .rail__mark{color:var(--rail-grey)}

  /* Скругление карточки в оригинале мельче */
  .spread--light:not(.spread--intro)::before,
  .spread--yellow::before{
    border-radius:clamp(28px,2.9vw,56px) 0 0 clamp(28px,2.9vw,56px);
  }
}

/* Макеты на страницах 13-15 в оригинале крупнее и ниже */
@media (min-width:1024px){
  .spread__media .stage-free{height:min(84vh,840px)}
  .spread__media .stage-free.is-wide{max-height:min(76vh,760px)}
}

/* ==================================================================
   Закрывающая страница — жёлтый лист с крупным THANK YOU,
   как страница 18 оригинала, а под ним форма заявки.
   ================================================================== */
.closing{background:var(--yellow)}
.closing__mark{direction:ltr; text-align:left; margin-block-end:clamp(40px,7vh,88px)}
.closing__line{
  display:block; font-family:var(--font-head); font-weight:900; color:var(--white);
  font-size:clamp(56px,13vw,190px); line-height:.9; letter-spacing:-.02em;
}
.closing__logo{display:block; height:clamp(24px,3vw,52px); width:auto; margin-top:clamp(24px,4vh,52px)}
.closing .sec-kicker{color:var(--ink-2)}
.closing .lead-form{background:var(--white); border-radius:var(--radius); padding:clamp(20px,3vw,36px); max-width:720px}
.closing .form-input,.closing .form-textarea{background:var(--white)}

/* Жёлтая панель брендинговых страниц не доходит до краёв листа —
   между ней и следующим жёлтым остаётся просвет, как на странице 2 */
@media (min-width:1024px){
  .spread--light:not(.spread--intro)::before{
    top:clamp(20px,4vh,48px); bottom:clamp(20px,4vh,48px);
    border-radius:clamp(28px,2.9vw,56px);
  }
}

/* ==================================================================
   Закреплённая боковая полоса: одна на весь сайт, стоит на месте
   при прокрутке, прячется там, где её нет в оригинале.
   ================================================================== */
.rail--fixed{display:none}
@media (min-width:1024px){
  .rail--fixed{
    display:flex; position:fixed; z-index:30; pointer-events:none;
    top:calc(var(--topbar-h) + var(--chips-h) + 5px); bottom:0; right:0; left:auto;
    width:var(--rail-w); padding-block:clamp(18px,3vh,40px);
    border-left:1px solid var(--rail-grey); background:transparent;
    transition:opacity var(--t) var(--ease);
  }
  .rail--fixed::before{display:none}
  .rail--fixed.is-off{opacity:0}
  /* секционные полосы больше не рисуются */
  .spread .rail:not(.rail--fixed){display:none}
}
@media (prefers-reduced-motion:reduce){ .rail--fixed{transition:none} }

/* Полоса идёт через весь сайт; на жёлтых экранах перекрашивается в чёрный */
@media (min-width:1024px){
  .rail--fixed.is-off{opacity:1}
  .rail--fixed.is-on-yellow{border-left-color:rgba(11,11,11,.22)}
  .rail--fixed.is-on-yellow .rail__mark,
  .rail--fixed.is-on-yellow .rail__text{color:rgba(11,11,11,.5)}
  .rail--fixed.is-on-yellow .rail__dash{background:rgba(11,11,11,.5)}
  .rail--fixed.is-on-yellow .rail__mouse{color:rgba(11,11,11,.55)}
}

/* Линия слева от полосы убрана; подпись с мышкой поднята выше,
   чтобы не заходить на нижний край разворота */
@media (min-width:1024px){
  .rail--fixed{border-left:0}
  .rail--fixed.is-on-yellow{border-left-color:transparent}
  .rail--fixed .rail__foot{padding-block-end:clamp(48px,11vh,120px)}
}

/* ==================================================================
   ОБЛОЖКА: слева огромный заголовок, справа телефон, в котором
   открывается приложение. Заголовок выезжает строками из-под маски,
   телефон поднимается снизу, экран «включается».
   ================================================================== */
.cover__grid{display:grid; grid-template-columns:1fr; gap:clamp(24px,4vw,56px); align-items:end; width:100%}
@media (min-width:1024px){
  .cover__grid{grid-template-columns:1fr auto; align-items:end}
  [dir="rtl"] .cover__grid{direction:ltr}
  [dir="rtl"] .cover__grid > *{direction:rtl}
}
.cover__phone{display:flex; justify-content:center; align-items:flex-end}
.cover__phone .phone{
  width:auto; height:min(62vh,620px); max-width:none;
  box-shadow:0 30px 60px rgba(11,11,11,.28), 0 8px 18px rgba(11,11,11,.16);
}
@media (max-width:1023px){ .cover__phone .phone{height:min(46vh,420px)} }

/* Заголовок: каждая строка выезжает из-под маски */
.cover__line{overflow:hidden}
.cover__line > span{display:block}
.cover__line--1 > span{animation:cover-rise 760ms var(--ease) both}
.cover__line--2 > span{animation:cover-rise 760ms var(--ease) 120ms both}
.cover__logo{animation:cover-fade 700ms var(--ease) 420ms both}
.cover__phone{animation:cover-phone 900ms var(--ease) 240ms both}
.cover__phone .phone__screen{animation:cover-screen 900ms var(--ease) 700ms both}

@keyframes cover-rise{ from{transform:translateY(105%)} to{transform:translateY(0)} }
@keyframes cover-fade{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@keyframes cover-phone{ from{opacity:0; transform:translateY(60px) scale(.97)} to{opacity:1; transform:none} }
/* экран будто включается */
@keyframes cover-screen{ 0%{filter:brightness(.35) saturate(.6)} 60%{filter:brightness(1.05) saturate(1.05)} 100%{filter:none} }

@media (prefers-reduced-motion:reduce){
  .cover__line > span,.cover__logo,.cover__phone,.cover__phone .phone__screen{animation:none}
}

/* Логотип обложки — под заголовком слева, как в оригинале */
.cover__inner{display:block; direction:ltr; text-align:left}
.cover__logo{display:inline-block; margin:clamp(28px,5vh,64px) 0 0 0}

/* Логотип обложки прижат к левому краю под заголовком */