/* ============================================================
   ГЛАВЫ КЕЙСА — раздел «Кейс — главы» дизайн-системы (Figma: pnemchenko.ru). Разметка — js/chapters.js, телефоны — js/phone.js.
   Размеры — из макета 1440 в единицах --u: один пиксель макета при текущей ширине кейса (js/case.js ставит --u на кейс).
   На 1440 и шире всё ровно как в Figma, уже — пропорционально меньше; кегли не мельче, чем нужно для чтения.
   На телефоне («столбик», то же условие, что в style.css) — свои раскладки: ленты листаются, колонки встают друг под другом.
   ============================================================ */

.case{ --u:1px; --ink-70:rgba(29,29,31,.7); --ink-10:rgba(29,29,31,.1); --card:#fff; --accent-c:#5c7eff; --accent-ink:#3d5fe0; }
/* макет в Display P3: акцентные цвета — как в Figma (js/case.js ставит .is-p3 проекту с colorSpace: 'p3') */
@supports (color: color(display-p3 1 1 1)){ .case.is-p3{ --accent-c:color(display-p3 .3608 .4941 1); --accent-ink:color(display-p3 .2392 .3725 .8784); } }

/* ---------- отступы между блоками: data-gap из содержимого (по макету) ---------- */
[data-gap="0"]{ --g:0; } [data-gap="20"]{ --g:20; } [data-gap="40"]{ --g:40; } [data-gap="60"]{ --g:60; }
[data-gap="80"]{ --g:80; } [data-gap="100"]{ --g:100; } [data-gap="120"]{ --g:120; } [data-gap="160"]{ --g:160; }
.case-blocks > .blk[data-gap],.band-in > .blk[data-gap]{ margin-top:calc(var(--g) * var(--gk, 1) * 1px); }
.case-blocks:has(> .blk[data-gap]:first-child){ margin-top:0; }
.band-in > .blk + .blk{ margin-top:calc(60px * var(--gk, 1)); }
.case .nl{ display:inline; }

/* ---------- общее: глава, пилюля, карточка ---------- */
.ch{ max-width:calc(800 * var(--u)); margin-left:auto; margin-right:auto; text-align:center; }
.ch-t{ margin:0; font:var(--w-title) clamp(34px, calc(56 * var(--u)), 56px)/1.08 var(--font); letter-spacing:var(--tr-title); text-wrap:balance; }
.ch-lead{ margin:25px 0 0; color:var(--mute); font:var(--w-text) clamp(18px, calc(24 * var(--u)), 24px)/1.4 var(--font-text); text-wrap:pretty; }
.ch--l{ max-width:none; margin:0; text-align:left; }
.case .pill{ display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:8px 14px; border:0; border-radius:100px; background:var(--ink-10); color:var(--ink-70); font:400 16px/1.35 var(--font-text); white-space:nowrap; }
.band[data-tone="dark"] .pill{ background:rgba(255,255,255,.14); color:rgba(255,255,255,.8); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- полоса на цвете (глава «Своя карта») ---------- */
.band{ width:100vw; margin-left:calc(50% - 50vw); padding:calc(120px * var(--gk, 1)) 0; background:var(--band); overflow:hidden; }
.band-in{ width:min(var(--case-w), calc(100% - var(--pad-x) * 2)); margin:0 auto; }
.band[data-tone="dark"]{ --fg:var(--ink-dark); --mute:rgba(244,246,246,.7); color:var(--fg); }

/* ---------- телефон (Figma: «Кейс / Телефон», L 350 / M 276 / S 208) ---------- */
.ph{ --pw:calc(276 * var(--u)); position:relative; flex:none; width:var(--pw); aspect-ratio:276 / 580; border-radius:calc(var(--pw) * .163); background:#1d1d1f;
  transform:perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.ph--L{ --pw:calc(350 * var(--u)); aspect-ratio:350 / 735; border-radius:calc(var(--pw) * .16); }
.ph--S{ --pw:calc(208 * var(--u)); aspect-ratio:208 / 437; }
.ph-scr{ position:absolute; inset:calc(var(--pw) * .0286); overflow:hidden; border-radius:calc(var(--pw) * .132); background:#e5e7eb; isolation:isolate; }
.ph-isl{ position:absolute; z-index:6; left:50%; top:calc(var(--pw) * .0257); width:calc(var(--pw) * .303); height:calc(var(--pw) * .0876); border-radius:999px; background:#000; transform:translateX(-50%); pointer-events:none; }
.ph-img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
/* экран 393×852 внутри — в точках макета экрана, масштаб --k ставит js/phone.js по ширине экрана */
.ph-st{ position:absolute; left:0; top:0; width:393px; height:852px; transform:scale(var(--k, .66)); transform-origin:0 0; }
.sc-c{ position:absolute; left:0; top:0; width:393px; will-change:transform; }
.sc-b{ display:block; width:393px; max-width:none; }
.sc-l{ position:absolute; will-change:transform, opacity; }
.sc-i,.sc-l img{ display:block; width:100%; height:100%; max-width:none; }
.sc-fx{ position:absolute; z-index:2; left:0; width:393px; max-width:none; pointer-events:none; }
.sc-fx--t{ top:0; } .sc-fx--b{ bottom:0; }
/* палец — как в шоуриле: круг 48, графит 22 %, белая обводка */
.sc-tap{ position:absolute; z-index:5; left:0; top:0; width:48px; height:48px; box-sizing:border-box; border:1.5px solid rgba(255,255,255,.75); border-radius:50%; background:rgba(35,37,42,.22); opacity:0; pointer-events:none; }
/* фокус — мягкая подсветка, как плитки у мамы в шоуриле: тонкая синяя рамка и лёгкий тон; экран не затемняем */
.sc-focus,.sc-f2{ position:absolute; z-index:3; left:0; top:0; width:0; height:0; box-sizing:border-box; border:2.5px solid rgba(58,115,246,.55); border-radius:16px; background:rgba(58,115,246,.06); box-shadow:0 0 0 5px rgba(58,115,246,.12), 0 10px 26px rgba(13,34,102,.14); opacity:0; pointer-events:none; }
.ph.is-manual .sc-focus{ opacity:0 !important; }
.ph.is-manual .sc-f2{ opacity:1; transition:left .4s cubic-bezier(.2,.8,.2,1), top .4s cubic-bezier(.2,.8,.2,1), width .4s, height .4s, opacity .25s; }
.sc-f2{ transition:opacity .25s; }
.sc-hot{ position:absolute; z-index:4; padding:0; border:0; border-radius:16px; background:transparent; cursor:pointer; }
.sc-hot:focus-visible{ outline:3px solid var(--accent-c); outline-offset:2px; }
.sc-go{ position:absolute; z-index:6; left:0; top:0; width:393px; height:852px; max-width:none; opacity:0; transition:opacity .35s; }
.sc-go.is-on{ opacity:1; }
/* пауза анимации: в углу телефона — видно при наведении, на клавиатуре и когда стоит на паузе */
.ph-ctl{ position:absolute; z-index:7; right:calc(var(--pw) * .07); bottom:calc(var(--pw) * .07); display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 2px 12px rgba(0,0,0,.16); cursor:pointer; opacity:0; transition:opacity .25s, transform .2s; }
.ph-ctl img{ grid-area:1 / 1; width:auto; height:15px; }
.ph-ctl-play{ display:none; }
.ph.is-paused .ph-ctl-pause{ display:none; } .ph.is-paused .ph-ctl-play{ display:block; margin-left:2px; }
.ph:hover .ph-ctl,.ph-ctl:focus-visible,.ph.is-paused .ph-ctl{ opacity:1; }
.ph-ctl:active{ transform:scale(.92); }
@media (hover:none){ .ph-ctl{ opacity:.7; } }

/* ---------- шоурил (Figma: «Slide 16:9» и кнопки «Frame 12242–12245») ---------- */
.reel{ margin:0; }
.reel-box{ position:relative; overflow:hidden; aspect-ratio:1206 / 676; border-radius:calc(56 * var(--u)); background:var(--card); isolation:isolate; }
.reel-v{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.reel-play{ position:absolute; z-index:2; left:50%; top:47.8%; display:grid; place-items:center; width:clamp(64px, calc(134 * var(--u)), 134px); aspect-ratio:1; padding:0; border:0; border-radius:50%;
  background:rgba(0,0,0,.1); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); cursor:pointer; transform:translate(-50%, -50%); transition:opacity .4s, transform .2s, background-color .25s; }
.reel-play img{ grid-area:1 / 1; width:51%; height:auto; }
.reel-play .i-play{ margin-left:6%; }
.reel-play .i-pause{ width:23%; display:none; }
.reel-play:active{ transform:translate(-50%, -50%) scale(.94); }
@media (hover:hover){ .reel-play:hover{ background:rgba(0,0,0,.16); } }
.reel.is-playing .reel-play .i-play{ display:none; } .reel.is-playing .reel-play .i-pause{ display:block; }
.reel-bar{ position:absolute; z-index:2; left:6.88%; right:6.88%; top:85.9%; display:flex; align-items:center; gap:calc(25 * var(--u)); color:var(--ink-70); transition:opacity .4s; }
.reel-t{ min-width:2.4em; font:400 clamp(14px, calc(28 * var(--u)), 28px)/1 var(--font); font-variant-numeric:tabular-nums; }
.reel-t:last-child{ text-align:right; }
.reel-track{ position:relative; flex:1; height:24px; cursor:pointer; }
.reel-track::before{ content:''; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; border-radius:2px; background:#000; opacity:.85; }
.reel-fill{ position:absolute; left:0; top:50%; height:3px; margin-top:-1.5px; width:calc(var(--p, 0) * 100%); background:#000; }
.reel-knob{ position:absolute; top:0; left:calc(var(--p, .5) * 100%); width:32px; height:24px; margin-left:-16px; border-radius:38px; background:#d9d9d9; border:3px solid #d9d9d9; box-sizing:border-box; transition:transform .2s; pointer-events:none; }
.reel:not(.is-started) .reel-knob{ left:50%; }
.reel-track input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.reel-track:focus-within .reel-knob{ outline:2px solid #1d1d1f; outline-offset:2px; }
/* пока смотрят — кнопки уходят, возвращаются от движения мыши */
.reel.is-playing:not(.is-awake) .reel-play,.reel.is-playing:not(.is-awake) .reel-bar{ opacity:0; }
.reel.is-dark .reel-play{ background:rgba(255,255,255,.1); }
.reel.is-dark .reel-play img{ filter:invert(1); }
.reel.is-dark .reel-bar{ color:rgba(255,255,255,.8); }
.reel.is-dark .reel-track::before,.reel.is-dark .reel-fill{ background:#fff; }

/* ---------- лента главного (Figma: «Кейс / Лента главного», «Карточка главного» 500×600) ---------- */
.rib-track{ display:flex; gap:calc(20 * var(--u)); width:100vw; margin-left:calc(50% - 50vw); padding:0 calc(50vw - 603 * var(--u)); scroll-padding:0 calc(50vw - 603 * var(--u));
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; outline:none; cursor:grab; }
.rib-track::-webkit-scrollbar,.scn-row::-webkit-scrollbar,.ps-strip::-webkit-scrollbar,.ld::-webkit-scrollbar{ display:none; }
.rib-track.is-drag,.scn-row.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.rib-track:focus-visible{ outline:2px solid var(--fg); outline-offset:6px; }
.rib-card{ flex:0 0 calc(500 * var(--u)); display:flex; flex-direction:column; align-items:center; gap:calc(30 * var(--u)); height:calc(600 * var(--u)); padding:calc(40 * var(--u)) calc(40 * var(--u)) 0; overflow:hidden;
  border-radius:calc(56 * var(--u)); background:var(--card); scroll-snap-align:start; }
.rib-cap{ margin:0; min-height:2.3em; font:400 clamp(20px, calc(28 * var(--u)), 28px)/1.15 var(--font); text-align:center; text-wrap:balance; }
.rib-vis{ position:relative; display:flex; justify-content:center; align-items:flex-start; width:100%; flex:1; min-height:0; }
.rib-img{ width:100%; height:100%; object-fit:contain; }
.rib-cyc{ position:relative; width:100%; height:100%; }
.rib-cyc img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transform:scale(.92) rotate(-3deg); transition:opacity .45s, transform .7s cubic-bezier(.3,1.5,.45,1); }
.rib-cyc img.is-on{ opacity:1; transform:none; }
.rib-ctl{ display:flex; justify-content:center; align-items:center; gap:20px; margin-top:calc(40 * var(--u)); }
.rib-btn{ display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:22px; background:rgba(29,29,31,.2); color:#1d1d1f; cursor:pointer; transition:opacity .25s, background-color .25s, transform .2s; }
.rib-btn:disabled{ opacity:.35; cursor:default; }
.rib-btn:active:not(:disabled){ transform:scale(.92); }
@media (hover:hover){ .rib-btn:hover:not(:disabled){ background:rgba(29,29,31,.3); } }
.rib-dots{ display:flex; gap:5px; }
.rib-dots i{ width:8px; height:8px; border-radius:4px; background:rgba(29,29,31,.2); transition:width .35s cubic-bezier(.2,.8,.2,1), background-color .35s; }
.rib-dots i.is-on{ width:30px; background:#1d1d1f; }

/* ---------- суть (Figma: «Кейс / Суть») ---------- */
.tl{ display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:calc(40 * var(--u)); text-align:center; }
.tl h3{ margin:0 0 10px; font:var(--w-title) clamp(28px, calc(40 * var(--u)), 40px)/1.15 var(--font); }
.tl p{ margin:0; font-size:clamp(16px, calc(20 * var(--u)), 20px); line-height:1.25; text-wrap:pretty; }

/* ---------- карточки-доводы (Figma: «Кейс / Карточка-довод») ---------- */
.duo-row{ display:grid; grid-template-columns:repeat(var(--cols, 2), minmax(0, 1fr)); gap:calc(20 * var(--u)); }
.duo-c{ display:flex; flex-direction:column; align-items:center; gap:calc(25 * var(--u)); padding:calc(40 * var(--u)); border-radius:calc(56 * var(--u)); background:var(--bg, var(--card)); color:#1d1d1f; text-align:center; }
.duo-ic{ display:block; width:auto; max-width:100%; height:calc(64 * var(--u)); object-fit:contain; }
.duo-tx{ display:flex; flex-direction:column; gap:10px; }
.duo-tx h3{ margin:0; font:400 clamp(22px, calc(28 * var(--u)), 28px)/1.15 var(--font); text-wrap:balance; }
.duo-tx p{ margin:0; color:var(--ink-70); font-size:clamp(16px, calc(20 * var(--u)), 20px); line-height:1.25; text-wrap:pretty; }
.duo-x{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--ink-10); font:400 20px/1 var(--font-text); }
.duo-c:has(.duo-x){ gap:20px; }
.duo-acc{ position:relative; z-index:2; width:calc(593 * var(--u)); margin:calc(-40 * var(--u)) auto 0; transform:rotate(2deg); }
.duo-acc .duo-ic{ height:calc(56 * var(--u)); }
.duo[data-anim] .duo-acc{ transform:translateY(60px) rotate(0deg); transition:transform .6s cubic-bezier(0,0,.5,1) .15s; }
.duo.is-on .duo-acc{ transform:rotate(2deg); }

/* ---------- голоса (Figma: «Кейс / Голос») ---------- */
.vo{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:calc(20 * var(--u)); padding-top:calc(35 * var(--u)); }
.vo-i{ position:relative; margin:0; min-height:calc(249 * var(--u)); padding:calc(113 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)); border-radius:calc(56 * var(--u)); background:var(--card); color:#1d1d1f; text-align:center; }
.vo-av{ position:absolute; left:50%; top:calc(-35 * var(--u)); width:calc(128 * var(--u)); height:calc(128 * var(--u)); border-radius:50%; object-fit:cover; transform:translateX(-50%); }
.vo-l{ display:grid; place-items:center; background:var(--accent-c); color:#fff; font:400 56px/1 var(--font); }
.vo blockquote{ margin:0; font:400 clamp(22px, calc(28 * var(--u)), 28px)/1.15 var(--font); text-wrap:balance; }

/* ---------- лесенка (Figma: «Кейс / Ступень»): вырастают снизу по очереди ---------- */
.ld{ display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)); align-items:end; gap:calc(20 * var(--u)); min-height:calc(640 * var(--u)); }
.ld-s{ display:flex; flex-direction:column; gap:10px; height:calc(var(--h) * var(--u)); padding:calc(30 * var(--u)) calc(30 * var(--u)) 0; overflow:hidden; border-radius:calc(32 * var(--u)); background:var(--bg); color:#1d1d1f; }
.ld-s h3{ margin:0; font:400 clamp(22px, calc(28 * var(--u)), 28px)/1.15 var(--font); }
.ld-s p{ margin:0; font-size:clamp(14px, calc(16 * var(--u)), 16px); line-height:1.35; text-wrap:pretty; }
.ld-s.is-dark{ color:#fff; } .ld-s.is-dark p{ color:rgba(255,255,255,.75); } .ld-s.is-dark.is-solid p{ color:#fff; }
.ld-img{ display:block; flex:1; min-height:0; width:100%; object-fit:contain; }
.ld[data-anim] .ld-s{ clip-path:inset(100% 0 0 0 round calc(32 * var(--u))); transition:clip-path .75s cubic-bezier(0,0,.5,1) calc(var(--i) * .1s); }
.ld.is-on .ld-s{ clip-path:inset(0 0 0 0 round calc(32 * var(--u))); }

/* ---------- схема уровней ---------- */
.fl{ display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); align-items:start; gap:calc(20 * var(--u)); }
.fl-c{ padding:calc(40 * var(--u)) calc(30 * var(--u)); border-radius:calc(32 * var(--u)); background:var(--card); color:#1d1d1f; }
.fl-c h3{ display:flex; align-items:center; gap:10px; margin:0 0 20px; font:400 clamp(22px, calc(28 * var(--u)), 28px)/1.15 var(--font); }
.fl-c h3 i{ flex:none; width:12px; height:12px; border-radius:50%; background:var(--c); }
.fl-c ol{ display:flex; flex-direction:column; margin:0; padding:0; list-style:none; }
.fl-c li{ position:relative; padding:15px 20px; border-radius:16px; background:var(--ink-10); font-size:16px; line-height:1.35; text-wrap:pretty; }
.fl-c li + li{ margin-top:42px; }
.fl-c li + li::before{ content:'↓'; position:absolute; left:50%; top:-32px; color:var(--ink-70); font-size:16px; line-height:22px; transform:translateX(-50%); }

/* ---------- шаги в телефоне (Figma: «Кейс / Шаги в телефоне»): телефон прилипает, шаги листаются ---------- */
.ps{ position:relative; height:calc(100vh + var(--n, 5) * 34vh); }
.ps-pin{ position:sticky; top:0; display:flex; align-items:center; justify-content:center; height:100vh; }
.ps-in{ display:flex; align-items:center; gap:calc(100 * var(--u)); }
.ps-list{ display:flex; flex-direction:column; gap:10px; width:calc(520 * var(--u)); margin:0; padding:0; list-style:none; }
.ps-b{ display:flex; align-items:flex-start; gap:20px; width:100%; padding:25px 30px; border:0; border-radius:32px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:background-color .4s; }
.ps-i.is-on .ps-b{ background:var(--card); }
@media (hover:hover){ .ps-i:not(.is-on) .ps-b:hover{ background:rgba(255,255,255,.5); } }
.ps-n{ flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--ink-10); color:var(--ink-70); font:500 17px/1 var(--font-text); transition:background-color .4s, color .4s; }
.ps-i.is-on .ps-n{ background:var(--accent-c); color:#fff; }
.ps-tx{ display:flex; flex-direction:column; min-width:0; padding-top:2px; }
.ps-t{ color:var(--ink-70); font:400 clamp(22px, calc(28 * var(--u)), 28px)/1.15 var(--font); transition:color .4s; }
.ps-i.is-on .ps-t{ color:#1d1d1f; }
.ps-d{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1); }
.ps-d > span{ overflow:hidden; color:var(--ink-70); font-size:clamp(16px, calc(20 * var(--u)), 20px); line-height:1.25; }
.ps-d > span::before{ content:''; display:block; height:5px; }
.ps-i.is-on .ps-d{ grid-template-rows:1fr; }
.ps-ph .ph-scr img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 0; opacity:0; transform:translateY(5%); transition:opacity .45s, transform .65s cubic-bezier(.2,.8,.2,1); }
.ps-ph .ph-scr img.is-on{ opacity:1; transform:none; }
.ps-ph .ph-scr img.is-past{ transform:translateY(-5%); }
.ps-strip{ display:none; }

/* ---------- сцена с предметами (глава «Своя карта») ---------- */
.stg-box{ position:relative; width:calc(350 * var(--u)); aspect-ratio:350 / 735; margin:0 auto; }
.stg-ph{ position:relative; z-index:2; }
.stg-o{ position:absolute; left:var(--l); top:var(--t); z-index:var(--z, 1); width:var(--w); height:auto; max-width:none; translate:0 var(--py, 0px); animation:stg-float 7s ease-in-out infinite; animation-delay:calc(var(--d) * -1.7s); pointer-events:none; }
@keyframes stg-float{ 50%{ transform:translateY(-12px) rotate(1.5deg); } }

/* ---------- стена карт: два ряда навстречу ---------- */
.mq{ display:flex; flex-direction:column; gap:15px; width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; }
.mq-in{ display:flex; gap:15px; width:max-content; padding-right:15px; animation:mq var(--dur, 60s) linear infinite; }
.mq-row.is-rev .mq-in{ animation-direction:reverse; animation-delay:calc(var(--dur, 60s) * -.37); }
.mq-c{ flex:none; display:block; width:calc(280 * var(--u)); min-width:150px; aspect-ratio:280 / 174; border-radius:14px; object-fit:cover; }
@keyframes mq{ to{ transform:translateX(-50%); } }
@media (hover:hover){ .mq:hover .mq-in{ animation-play-state:paused; } }

/* ---------- плитки в сетке ---------- */
.gr{ display:grid; grid-template-columns:repeat(var(--cols, 2), minmax(0, 1fr)); gap:calc(20 * var(--u)); }
.gr-i{ margin:0; overflow:hidden; aspect-ratio:var(--ar); border-radius:calc(56 * var(--u)); }
.gr-i img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover){ .gr-i:hover img{ transform:scale(1.03); } }
.gr-cap{ grid-column:1 / -1; margin-top:var(--sp-10); color:var(--mute); font-size:16px; line-height:1.35; text-align:center; }

/* ---------- экран с выносками (Figma: «Кейс / Экран с выносками») ---------- */
.co{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; width:min(100%, calc(1120 * var(--u))); margin:0 auto; }
.co-s{ display:flex; flex-direction:column; gap:calc(120 * var(--u)); }
.co-i{ display:flex; align-items:center; gap:15px; }
.co-s--l .co-i{ text-align:right; }
.co-s--r .co-i{ flex-direction:row-reverse; text-align:left; }
.co-tx{ flex:1; max-width:calc(300 * var(--u)); }
.co-s--l .co-tx{ margin-left:auto; }
.co-tx h3{ margin:0 0 10px; font:400 clamp(20px, calc(28 * var(--u)), 28px)/1.15 var(--font); text-wrap:balance; }
.co-tx p{ margin:0; color:var(--ink-70); font-size:clamp(15px, calc(20 * var(--u)), 20px); line-height:1.25; text-wrap:pretty; }
.co-p{ position:relative; flex:none; width:70px; height:10px; }
.co-p::before{ content:''; position:absolute; top:4.5px; width:60px; height:1px; background:#1d1d1f; }
.co-p::after{ content:''; position:absolute; top:0; width:10px; height:10px; border-radius:50%; background:var(--accent-c); }
.co-s--l .co-p::before{ left:0; } .co-s--l .co-p::after{ right:0; }
.co-s--r .co-p::before{ right:0; } .co-s--r .co-p::after{ left:0; }
.co[data-anim] .co-i{ opacity:0; transform:translateX(-24px); transition:opacity .6s, transform .7s cubic-bezier(0,0,.5,1); transition-delay:calc(.35s + var(--i) * .4s); }
.co[data-anim] .co-s--r .co-i{ transform:translateX(24px); }
.co.is-on .co-i{ opacity:1; transform:none; }

/* ---------- сценарий (Figma: «Кейс / Сценарий») ---------- */
.scn-row{ display:flex; justify-content:center; align-items:flex-start; gap:calc(30 * var(--u)); }
.scn-i{ display:flex; flex-direction:column; align-items:center; gap:20px; margin:0; }
.scn--or .scn-row{ gap:calc(60 * var(--u)); }
.scn-or{ align-self:flex-start; margin-top:calc(290 * var(--u) - 16px); color:var(--mute); font:400 28px/1.15 var(--font); }
.scn--track .scn-row{ justify-content:flex-start; width:100vw; margin-left:calc(50% - 50vw); padding:0 calc(50vw - 603 * var(--u)); scroll-padding:0 calc(50vw - 603 * var(--u)); overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; cursor:grab; outline:none; }
.scn--track .scn-i{ scroll-snap-align:start; }
.scn--or[data-anim] .scn-row > *{ opacity:0; transform:translateY(30px); transition:opacity .6s, transform .7s cubic-bezier(0,0,.5,1); transition-delay:calc(.15s + var(--i, 1) * .35s); }
.scn--or.is-on .scn-row > *{ opacity:1; transform:none; }

/* ---------- текст и телефон с пилюлями ---------- */
.ft{ display:grid; grid-template-columns:minmax(0, calc(593 * var(--u))) auto; justify-content:center; align-items:center; gap:calc(100 * var(--u)); padding-top:calc(60 * var(--u)); }
.ft--rev .ft-t{ order:2; }
.ft .ch-t,.ft .ch-lead{ text-align:left; }
.ft-pills{ display:flex; flex-wrap:wrap; gap:10px; max-width:calc(474 * var(--u)); margin-top:30px; }
.ft .pill{ cursor:pointer; transition:background-color .3s, color .3s; }
.ft .pill.is-on{ background:var(--accent-c); color:#fff; }
.ft .pill:focus-visible{ outline:2px solid var(--accent-c); outline-offset:2px; }

/* ---------- картинка на карточке ---------- */
.pl{ margin:0; }
.pl-box{ display:grid; place-items:center; overflow:hidden; aspect-ratio:var(--ar); border-radius:calc(56 * var(--u)); background:var(--bg, var(--card)); }
.pl-box img{ display:block; height:auto; }

/* ---------- эмоции: всплывают волной ---------- */
.stk{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px calc(20 * var(--u)); }
.stk-i{ display:flex; flex-direction:column; align-items:center; gap:10px; width:calc(225 * var(--u)); margin:0; }
.stk-b{ width:100%; aspect-ratio:1; overflow:hidden; border-radius:calc(32 * var(--u)); background:var(--card); }
.stk-b img{ display:block; width:100%; height:100%; object-fit:contain; transition:transform .55s cubic-bezier(.3,1.6,.45,1); }
@media (hover:hover){ .stk-i:hover .stk-b img{ transform:scale(1.08) rotate(-4deg); } }
.stk[data-anim] .stk-i{ opacity:0; transform:translateY(26px); transition:opacity .5s, transform .65s cubic-bezier(0,0,.5,1); transition-delay:calc(var(--i) * .05s); }
.stk.is-on .stk-i{ opacity:1; transform:none; }

/* ---------- бенто (Figma: «Кейс / Бенто») ---------- */
.bt-grid{ display:flex; flex-direction:column; gap:calc(20 * var(--u)); }
.bt-row{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:calc(20 * var(--u)); }
.bt{ position:relative; grid-column:span var(--span, 1); display:flex; flex-direction:column; gap:10px; height:calc(393 * var(--u)); padding:calc(40 * var(--u)); overflow:hidden; border-radius:calc(32 * var(--u)); background:var(--bg); color:#1d1d1f; }
.bt.is-dark{ color:#fff; }
.bt h3{ position:relative; z-index:2; margin:0; font:400 clamp(20px, calc(28 * var(--u)), 28px)/1.15 var(--font); text-wrap:balance; }
.bt-art{ position:relative; flex:1; min-height:0; }
.bt-art img{ display:block; width:100%; height:100%; object-fit:contain; }
.bt-art.is-place{ position:absolute; inset:0; }
.bt-art.is-place img{ position:absolute; height:auto; max-width:none; object-fit:initial; }
.bt-o{ position:absolute; z-index:1; height:auto; max-width:none; pointer-events:none; }
.bt-pal{ display:flex; gap:10px; margin-top:10px; }
.bt-sw{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:5px; min-width:0; height:calc(200 * var(--u)); padding:20px; border-radius:calc(32 * var(--u)); background:var(--sw); color:var(--swf); }
.bt-sw b{ font:500 clamp(14px, calc(17 * var(--u)), 17px)/1.2 var(--font-text); }
.bt-sw span{ font-size:clamp(13px, calc(16 * var(--u)), 16px); line-height:1.35; }
.bt-sw.is-ring{ box-shadow:inset 0 0 0 1px #1d1d1f; }

/* ---------- метрики словом ---------- */
.wd-row{ display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:calc(60 * var(--u)); }
.wd-i{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.wd-v{ margin:0; color:var(--accent-ink); font:400 clamp(48px, calc(80 * var(--u)), 80px)/1 var(--font); white-space:nowrap; }
.wd-l{ margin:0; color:var(--ink-70); font-size:clamp(16px, calc(20 * var(--u)), 20px); line-height:1.25; text-wrap:balance; }
.wd-note{ margin:calc(60 * var(--u)) auto 0; color:var(--ink-70); font-size:16px; line-height:1.35; text-align:center; text-wrap:balance; }

/* ---------- финал на цвете (Figma: «Кейс / Финал на цвете») ---------- */
.fin{ position:relative; aspect-ratio:1206 / 593; border-radius:calc(56 * var(--u)); background:var(--bg, var(--accent-c)); color:#fff; }
.fin-c{ position:absolute; z-index:2; left:5.33%; top:9.36%; }
.fin-t{ display:block; width:calc(719.4 * var(--u)); height:auto; }
.fin-l,.fin-bs{ margin-left:calc(15.7 * var(--u)) !important; }
.fin .ch-t{ font-size:clamp(40px, calc(96 * var(--u)), 96px); }
.fin-l{ margin:calc(16 * var(--u)) 0 0; font:300 clamp(17px, calc(24.7 * var(--u)), 24.7px)/1.4 var(--font-text); }
.fin-bs{ display:flex; gap:calc(12 * var(--u)); margin-top:calc(41 * var(--u)); }
.fin-b{ display:block; width:calc(241 * var(--u)); min-width:120px; border-radius:calc(15 * var(--u)); transition:transform .2s, filter .2s; }
.fin-b img{ display:block; width:100%; height:auto; }
a.fin-b:active{ transform:scale(.97); }
@media (hover:hover){ a.fin-b:hover{ filter:brightness(1.06); transform:translateY(-1px); } }
.fin-b.is-off{ cursor:default; }
.fin-v{ position:absolute; z-index:1; left:54.23%; top:3.88%; width:50.44%; height:auto; pointer-events:none; }

/* ---------- обложка «выглядывает»: логотип по центру, визуал выглядывает на факты (кейс «Свои деньги») ---------- */
.cover--peek{ display:block; }
.cover--peek .cover-text{ position:absolute; z-index:2; left:0; right:0; top:0; width:auto; padding:0; }
.cover--peek .cover-title{ position:absolute; left:10.95%; top:-3.19%; width:79.27%; padding:0; }
.cover--peek .cover-logo{ width:100%; max-width:none; max-height:none; }
.cover--peek .cover-visual{ z-index:3; left:20.65%; right:auto; top:26.1%; width:58.7%; aspect-ratio:auto; }
.cover--peek .cover-visual img{ height:auto; }
.case-top.is-peek .facts-card{ padding:calc(56 * var(--u)) calc(77 * var(--u)); }

/* ============================================================
   ТЕЛЕФОН И ПЛАНШЕТ В ПОРТРЕТЕ («столбик» — то же условие, что в style.css)
   ============================================================ */
@media (max-width:760px), (max-width:1024px) and (max-aspect-ratio:17/20){
  .case{ --gk:.67; }
  .case .nl{ display:none; }
  .ch{ max-width:none; }
  .ch-lead{ margin-top:16px; }

  /* лента главного: карточка уже, телефон меньше */
  .rib-track{ gap:12px; }
  .rib-card{ flex-basis:min(76vw, 340px); height:min(118vw, 520px); padding:24px 20px 0; gap:18px; border-radius:32px; }
  .rib-card .ph{ --pw:min(52vw, 230px); }
  .rib-ctl{ margin-top:24px; }

  .tl{ grid-template-columns:minmax(0, 1fr); gap:32px; }

  .duo-row{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  .duo-c{ padding:28px 22px; border-radius:32px; gap:18px; }
  .duo-ic{ height:44px; }
  .duo-acc{ width:100%; margin-top:-16px; }
  .duo-acc .duo-ic{ height:40px; }

  .vo{ grid-template-columns:minmax(0, 1fr); gap:56px; padding-top:44px; }
  .vo-i{ min-height:0; padding:72px 24px 28px; border-radius:32px; }
  .vo-av{ top:-44px; width:96px; height:96px; }

  /* лесенка — лентой: ступени так же растут, листаются вбок */
  .ld{ display:flex; align-items:flex-end; gap:12px; min-height:0; width:100vw; margin-left:calc(50% - 50vw); padding:0 calc(50vw - 603 * var(--u)); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .ld-s{ flex:0 0 64vw; max-width:260px; height:calc(var(--h) * .72px); padding:22px 22px 0; border-radius:24px; scroll-snap-align:start; }
  .ld[data-anim] .ld-s,.ld.is-on .ld-s{ clip-path:inset(0 0 0 0 round 24px); }
  .ld[data-anim]:not(.is-on) .ld-s{ clip-path:inset(100% 0 0 0 round 24px); }

  .fl{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  .fl-c{ padding:28px 20px; border-radius:24px; }

  /* шаги в телефоне — лентой экранов с подписями */
  .ps{ height:auto; }
  .ps-pin{ display:none; }
  .ps-strip{ display:flex; gap:16px; width:100vw; margin-left:calc(50% - 50vw); padding:0 calc(50vw - 603 * var(--u)); scroll-padding:0 calc(50vw - 603 * var(--u)); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .ps-m{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:16px; width:min(62vw, 250px); margin:0; scroll-snap-align:start; }
  .ps-m .ph{ --pw:min(62vw, 250px); }
  .ps-m figcaption{ display:grid; grid-template-columns:auto 1fr; gap:4px 10px; align-items:center; }
  .ps-m figcaption .ps-n{ width:28px; height:28px; font-size:14px; background:var(--accent-c); color:#fff; }
  .ps-m figcaption b{ font:400 22px/1.15 var(--font); }
  .ps-m figcaption span:last-child{ grid-column:1 / -1; color:var(--ink-70); font-size:15px; line-height:1.3; }

  /* сцена: телефон крупнее, предметы — ближе к нему и за ним, чтобы не уходили за край и не закрывали экран */
  .ph-ctl{ width:30px; height:30px; } .ph-ctl img{ height:12px; }
  .stg{ --sw:min(56vw, 260px); padding:calc(var(--sw) * .3) 0 calc(var(--sw) * .26); overflow:hidden; width:100vw; margin-left:calc(50% - 50vw); }
  .stg-box{ width:var(--sw); }
  .stg-box .ph{ --pw:var(--sw); }
  .stg-o{ left:var(--ml); top:var(--mt); width:var(--mw); z-index:var(--mz, 1); }

  .mq{ gap:10px; } .mq-in{ gap:10px; padding-right:10px; }
  .mq-c{ width:170px; min-width:0; border-radius:10px; }

  .gr{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  .gr-i{ border-radius:24px; }

  /* выноски — под телефоном списком */
  .co{ display:flex; flex-direction:column; align-items:center; gap:32px; width:100%; }
  .co-ph{ order:-1; }
  .co-ph .ph{ --pw:min(68vw, 300px); }
  .co-s{ display:contents; }
  .co-i,.co-s--l .co-i,.co-s--r .co-i{ flex-direction:row; align-items:flex-start; gap:14px; width:100%; text-align:left; }
  .co-tx{ max-width:none; margin:0 !important; }
  .co-p{ order:-1; width:10px; margin-top:8px; }
  .co-p::before{ display:none; }
  .co-s--l .co-p::after,.co-s--r .co-p::after{ left:0; right:auto; }
  .co[data-anim] .co-i,.co[data-anim] .co-s--r .co-i{ transform:translateY(18px); }
  .co.is-on .co-i{ transform:none; }

  /* сценарии — лентой */
  .scn:not(.scn--or) .scn-row{ justify-content:flex-start; gap:14px; width:100vw; margin-left:calc(50% - 50vw); padding:0 calc(50vw - 603 * var(--u)); scroll-padding:0 calc(50vw - 603 * var(--u)); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .scn:not(.scn--or) .scn-i{ scroll-snap-align:start; gap:14px; }
  .scn .ph{ --pw:min(52vw, 220px); }
  .scn--or .scn-row{ gap:10px; }
  .scn--or .ph{ --pw:min(39vw, 200px); }
  .scn--or .scn-or{ margin-top:calc(min(39vw, 200px) * 1.05 - 10px); font-size:20px; }
  .scn--or .pill{ white-space:normal; text-align:center; }

  .ft{ grid-template-columns:minmax(0, 1fr); gap:32px; padding-top:0; }
  .ft--rev .ft-t{ order:0; }
  .ft-ph{ justify-self:center; }
  .ft-ph .ph{ --pw:min(68vw, 300px); }
  .ft-pills{ max-width:none; }

  .pl-box{ border-radius:24px; }
  .pl-box img{ width:78% !important; }

  .stk{ gap:14px 10px; }
  .stk-i{ width:calc((100% - 20px) / 3); }
  .stk-b{ border-radius:20px; }
  .stk .pill{ min-height:30px; padding:5px 10px; font-size:13px; white-space:normal; text-align:center; }

  .bt-grid,.bt-row{ gap:12px; }
  .bt-row{ grid-template-columns:minmax(0, 1fr); }
  .bt{ grid-column:auto; height:auto; min-height:300px; padding:26px 22px; border-radius:24px; }
  .bt h3{ max-width:none !important; }
  .bt-pal{ flex-wrap:wrap; }
  .bt-sw{ flex:1 1 calc(33% - 10px); height:120px; padding:14px; border-radius:20px; }
  .bt-art{ min-height:200px; }

  .wd-row{ grid-template-columns:minmax(0, 1fr); gap:40px; }

  .fin{ aspect-ratio:auto; padding:28px 22px 30px; border-radius:32px; overflow:hidden; }
  .fin-c{ position:relative; left:auto; top:auto; width:100%; }
  .fin-t{ width:88%; }
  .fin-l{ margin-top:14px; max-width:16em; }
  .fin-bs{ flex-wrap:wrap; gap:10px; margin-top:22px; }
  .fin-b{ width:calc(50% - 5px); min-width:0; border-radius:10px; }
  .fin-v{ left:auto; right:-14%; top:-4%; width:62%; opacity:.95; }

  .reel-box{ border-radius:24px; }
  .reel-bar{ left:5%; right:5%; top:auto; bottom:7%; gap:12px; }
  .reel-knob{ width:22px; height:18px; margin-left:-11px; top:3px; }

  .cover--peek .cover-title{ left:7%; top:4%; width:86%; }
  .cover--peek .cover-visual{ position:absolute; left:16%; top:30%; width:68%; margin:0; }
  .case-top.is-peek .cover--peek{ aspect-ratio:1206 / 640; padding:0; }
  .case-top.is-peek .facts-card{ padding:32px 20px 28px; }
}

/* ---------- планшет вертикально: бенто по две плитки, как на макете — квадратами ---------- */
@media (min-width:561px) and (max-width:1024px) and (max-aspect-ratio:17/20){
  .bt-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
  .bt-row{ display:contents; }
  .bt{ height:min(56vw, 420px); min-height:0; }
  .bt-grid--odd .bt-row:last-child .bt:last-child{ grid-column:1 / -1; }
  .bt-sw{ height:96px; }
  .bt-art{ min-height:0; }
}