@font-face{font-family:'Baza Hero Inter';font-style:normal;font-display:swap;font-weight:600;src:url('/baza-assets/f9a06e79cd3a-inter-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'Baza Hero Inter';font-style:normal;font-display:swap;font-weight:600;src:url('/baza-assets/6c2a37f82a67-inter-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0400-052F,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:'Baza Hero Inter';font-style:normal;font-display:swap;font-weight:900;src:url('/baza-assets/d5c0ed7b8b5d-inter-latin-900-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'Baza Hero Inter';font-style:normal;font-display:swap;font-weight:900;src:url('/baza-assets/b077cd77ee8e-inter-cyrillic-900-normal.woff2') format('woff2');unicode-range:U+0400-052F,U+2DE0-2DFF,U+A640-A69F}

/* ===== Tokens ===== */
:root{
  --ink:#0b0b0c; --ink-2:#121316; --ink-3:#1a1c20;
  --paper:#f1ede4; --paper-2:#e6e0d3; --on-paper:#151515; --on-paper-muted:#5d5a54;
  --red:#e32737; --red-hi:#f04b59; --yellow:#f4ce45;
  --text:#f3f2ef; --muted:#a3a8aa; --muted-2:#7d8286; --line:rgba(243,242,239,.14);
  --hand-r:#eca655; --hand-l:#81e8f5;
  --display:'Oswald','Roboto Condensed','Arial Narrow',Impact,sans-serif;
  --body:Inter,Arial,Helvetica,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-back:cubic-bezier(.34,1.56,.64,1);
  --wrap:1220px; --gutter:24px;
}
*{box-sizing:border-box;-webkit-user-select:none;user-select:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text}
html{scroll-behavior:smooth;background:#000;touch-action:pan-x pan-y}
body{margin:0;background:#000;touch-action:pan-x pan-y;color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
html{overflow-x:clip}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
[data-bpm-section][hidden]{display:none!important}

/* ===== Shared type ===== */
.h-display{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:-.01em;text-wrap:balance}
.h-xl{font-size:clamp(46px,7vw,104px)}
.h-l{font-size:clamp(38px,5vw,72px)}
.h-m{font-size:clamp(30px,3.4vw,48px)}
.red{color:var(--red)} .on-dark .red{color:var(--red-hi)}
.copy{max-width:52ch;margin:0;color:var(--muted);font-size:clamp(16px,1.35vw,19px);line-height:1.6;text-wrap:pretty}
.kicker{display:inline-flex;align-items:center;gap:12px;margin:0 0 22px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.kicker::before{content:'';width:28px;height:2px;background:var(--red)}
.on-paper .kicker{color:var(--on-paper-muted)}
.idx{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--red)}

/* ===== Sections & background rhythm ===== */
.sec{position:relative;padding:clamp(72px,9vw,128px) 0}
.on-dark{background:var(--ink);color:var(--text)}
.on-dark-2{background:var(--ink-2);color:var(--text)}
.on-paper{background:var(--paper);color:var(--on-paper)}
.on-paper .copy{color:var(--on-paper-muted)}
.on-red{background:var(--red);color:#fff}
.on-yellow{background:var(--yellow);color:#141414}
.sec + .sec.on-red::before,.edge-top::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.25),transparent)}

/* ===== Buttons & links ===== */
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:66px;padding:20px 24px;border:2px solid #ff2424;border-radius:0;background:#ff2424;color:#080808;font:900 13px/1.3 var(--body);letter-spacing:.015em;text-decoration:none;text-transform:uppercase;transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:#ff2424}
.btn--ink{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--ink)}
.tlink{color:inherit;font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:5px}
.tlink:hover{color:var(--red)}
.btn:focus-visible,.tlink:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ===== Photo slots (author photos; tag shows in draft mode) ===== */
.ph{position:relative;margin:0;overflow:hidden;background:#111;isolation:isolate}
.ph>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:contrast(1.08) saturate(.9)}
.ph::after{content:'';position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay;z-index:2}
.ph--grade::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 80% at 70% 15%,transparent 40%,rgba(0,0,0,.55) 100%),linear-gradient(180deg,transparent 55%,rgba(0,0,0,.75))}
.slot-tag{display:none}
.is-draft .slot-tag{display:block;position:absolute;z-index:5;left:10px;top:10px;padding:5px 8px;border-radius:3px;background:rgba(255,212,71,.95);color:#111;font:700 10px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;max-width:calc(100% - 20px)}
.todo{outline:1px dashed rgba(227,39,55,.7);outline-offset:3px}

/* ===== Drumscammer quote ===== */
.ds-quote{position:relative;display:flex;align-items:flex-start;gap:12px;max-width:420px;margin:0}
.ds-quote__face{flex:0 0 42px;width:42px;height:42px;margin-top:2px;border-radius:50%;overflow:hidden;background:#222;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 6px 18px rgba(0,0,0,.35)}
.ds-quote__face img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.9);transform-origin:50% 14%}
.ds-quote__bubble{position:relative;padding:13px 17px 12px;border-radius:4px 16px 16px 16px;background:rgba(20,21,24,.82);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(255,255,255,.1);color:#f3f2ef;box-shadow:0 18px 50px rgba(0,0,0,.32)}
.ds-quote__bubble p{margin:0;font:500 16px/1.45 var(--body);letter-spacing:-.008em;text-wrap:pretty}
.ds-quote__bubble cite{display:flex;align-items:center;gap:7px;margin-top:9px;color:#8f9398;font:600 11px/1 var(--body);font-style:normal;letter-spacing:.04em}
.ds-quote__bubble cite::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red)}
/* ===== Reveal motion ===== */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
.rv.is-in{opacity:1;transform:none}
.pop{opacity:0;transform:scale(.6) translateY(10px);transform-origin:0 100%;transition:opacity .35s ease,transform .55s var(--ease-back);transition-delay:var(--d,0ms)}
.pop.is-in{opacity:1;transform:none}
.words .w{display:inline-block;opacity:0;transform:translateY(.25em);transition:opacity .5s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i)*70ms + var(--d,0ms))}
.words.is-in .w{opacity:1;transform:none}

/* ===== Award banner ===== */
.banner-zone{position:relative;z-index:5;padding:28px var(--gutter) 16px;background:#000}
.review-banner{max-width:960px;height:44px;border-radius:100px;background:#151619;border:1px solid rgba(244,206,69,.28);margin:auto;display:flex;align-items:center;gap:12px;padding:4px 12px 4px 4px;color:#f3f2ef;box-shadow:0 10px 40px rgba(0,0,0,.45);white-space:nowrap}
.review-label{position:relative;isolation:isolate;overflow:hidden;flex:0 0 auto;border-radius:80px;background:var(--yellow);color:#111;height:34px;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;font-weight:900;letter-spacing:.02em}
.award-medal{position:absolute;z-index:0;left:50%;top:50%;transform:translate(-50%,-50%);font-size:62px;line-height:1;opacity:.22;pointer-events:none}
.award-label-text{position:relative;z-index:1}
@media(max-width:700px){.award-medal{font-size:48px}}
.review-quote{min-width:0;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:800}
.review-score{flex:0 0 auto;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:850}
.review-score .star{color:var(--yellow);font-size:16px;line-height:1;letter-spacing:1px}
.review-score .laurel{display:block;object-fit:contain;height:32px;width:20px;filter:grayscale(1) brightness(2.2);opacity:.55}
.review-score .laurel.left{transform:scaleX(-1)}
.banner-mobile,.review-label .mobile-only{display:none}

/* ===== HERO ===== */
.hero{--hero-title-gap:70px;position:relative;overflow:hidden;padding:0 0 clamp(64px,7vw,104px)}
.hero__glow{position:absolute;z-index:0;right:-10%;top:-10%;width:70vw;height:80vh;background:radial-gradient(closest-side,rgba(227,39,55,.28),transparent 70%);pointer-events:none}
.hero__grid{position:relative;display:flex;align-items:center;min-height:min(720px,84vh)}
.hero__text{padding:72px 0 40px;position:relative;z-index:3;text-align:center}
.lockup{display:flex;width:100%;flex-direction:column;align-items:center;margin:0 0 var(--hero-title-gap)}
.hero .kicker{margin-bottom:0}
.hero .lockup{margin-top:18px;gap:12px}
/* Source alpha bounds: y=67..234 on a 900×300 canvas. Crop transparent
   padding so both gaps around × are measured from visible artwork. */
.lockup__drumscammer{position:relative;display:block;width:min(100%,380px);aspect-ratio:900/172;overflow:hidden}
.hero .sticker{position:absolute;left:0;top:-37.2093%;display:block;width:100%;max-width:none;height:auto;margin:0;mix-blend-mode:screen}
.lockup__x{display:block;margin:0;color:#8a8e93;font:400 18px/18px var(--body)}
.lockup__bpm{margin:0;font:700 clamp(18px,1.7vw,24px)/1 "Space Grotesk",Inter,sans-serif;letter-spacing:.14em;color:#97d8eb}
.lockup__bpm em{font-style:normal;color:#8eeb75}
.hero h1{font-size:clamp(52px,6.6vw,104px);line-height:.92}
.hero h1 .l{display:block}
.hero .answer{margin:var(--hero-title-gap) 0 10px;font-size:clamp(26px,2.6vw,40px);font-weight:850;letter-spacing:-.045em;line-height:1.1}
.hero .answer strong{color:var(--red-hi);font-weight:900}
.hero .detail{max-width:34ch;margin:0 auto;color:var(--muted);font-size:clamp(16px,1.4vw,20px);line-height:1.5}
.hero__photo{position:absolute;right:0;top:0;height:min(820px,94vh);width:min(48vw,760px);z-index:1}
.hero__photo .ph{position:absolute;inset:0;background:transparent}
.hero__photo .ph img{object-position:50% 6%}
.hero__photo::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,var(--ink) 0,rgba(11,11,12,.6) 22%,transparent 50%),linear-gradient(0deg,var(--ink) 0,transparent 32%),linear-gradient(180deg,rgba(11,11,12,.7) 0,transparent 18%)}
.hero__grid>.hero__text{width:min(640px,55%);max-width:640px}
.hero .wrap{position:relative;z-index:2}
.hero__photo .ds-quote{position:absolute;left:-30px;bottom:110px;z-index:4;max-width:320px}
.video{position:relative;display:block;margin:12px auto 0;max-width:980px;aspect-ratio:16/9;background:#111318;overflow:hidden;border-radius:12px;outline:1px solid rgba(255,255,255,.15);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.video::before{content:"";position:absolute;inset:0;opacity:.5;background:linear-gradient(130deg,#1d2032 0%,#08090d 45%,#2b1d22 100%)}
.video-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff}
.playmark{border:2px solid rgba(255,255,255,.75);height:88px;width:88px;border-radius:100%;display:grid;place-items:center;font-size:28px;padding-left:6px;transition:transform .3s var(--ease-back)}
.video:hover .playmark{transform:scale(1.08)}
.video-caption{font-size:clamp(15px,2vw,26px);font-weight:750;letter-spacing:-.025em}
.video-hint{font-size:11px;letter-spacing:.21em;color:#adb0be;text-transform:uppercase}

/* ===== Not for all (kept hidden, restyled) ===== */

/* ===== Friction (paper, photo problem cards) ===== */
.friction__head{max-width:900px;margin:0 auto 56px;text-align:center}
.friction__cards{display:grid;align-items:start;grid-template-columns:1fr 1fr;gap:28px}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:10px;overflow:visible;box-shadow:0 18px 50px rgba(20,16,10,.12)}
.pcard__media{position:relative;aspect-ratio:4/3.3;border-radius:10px 10px 0 0;overflow:hidden}
.pcard__media .ph{position:absolute;inset:0}
.pcard__media .ph img{object-position:50% 14%}
.pcard__title{position:absolute;z-index:3;left:24px;right:24px;bottom:20px;margin:0;color:#fff;font:700 clamp(30px,3.3vw,50px)/.93 var(--display);text-transform:uppercase;text-shadow:0 4px 24px rgba(0,0,0,.5)}
.pcard__title .red{color:var(--red-hi)}
.pcard__body{padding:24px 26px 30px}
.pcard__body .idx{display:block;margin-bottom:10px}
.pcard__body p{margin:0;color:var(--on-paper-muted);font-size:17px;line-height:1.55}
.friction__quote{max-width:none;margin:26px 4px 0}
.friction__quote .ds-quote__bubble{padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--on-paper)}
.friction__quote .ds-quote__bubble cite{color:var(--on-paper-muted)}

/* ===== YouTube off ===== */
.yt{overflow:hidden}
.yt__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.yt h2{font-size:clamp(50px,6.6vw,104px)}
.yt__lines p{margin:0}
.yt__lines .copy{margin-top:26px}
.yt__lines .yt__setup{max-width:24ch;margin-top:26px;color:var(--text);font:650 clamp(22px,2.2vw,32px)/1.25 var(--body);letter-spacing:-.025em;text-wrap:balance}
.yt__challenge{margin:26px 0;font:800 clamp(26px,2.6vw,38px)/1.15 var(--body);letter-spacing:-.04em}
.screen{position:relative;aspect-ratio:16/10;border-radius:14px;background:#050505;border:1px solid #2a2c30;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.screen__play{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:78px;height:54px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:var(--red);color:#fff;cursor:pointer;box-shadow:0 8px 30px #0008;transition:background .2s}
.screen__play:hover{background:var(--red-hi)}
.screen__play:focus-visible{outline:3px solid var(--paper);outline-offset:5px}
.screen.is-off .screen__play{display:none}
.screen__img{position:absolute;inset:0;background:linear-gradient(180deg,#1b1d22,#0c0d10)}
.screen__img .ph{position:absolute;inset:0}
.screen__img .ph img{object-position:50% 20%}
.screen__bar{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:14px 16px;display:flex;align-items:center;gap:12px;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.screen__bar i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.25);position:relative}
.screen__bar i::before{content:'';position:absolute;left:0;top:0;bottom:0;width:38%;background:var(--red);border-radius:2px}
.screen__bar span{font:500 12px var(--mono);color:#ddd}
.screen__off{position:absolute;inset:0;z-index:6;display:grid;place-items:center;background:#050505;opacity:0;pointer-events:none}
.screen__noise{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:0;transition:opacity .6s .3s}
.screen.is-off .screen__noise{opacity:.42}
.screen__off::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);pointer-events:none}
.screen__off span{position:relative;z-index:2;padding:8px 14px;border-radius:3px;background:rgba(5,5,5,.75);font:500 13px var(--mono);letter-spacing:.2em;color:#c9cbcd;text-transform:uppercase;opacity:0;transition:opacity .4s .35s;animation:flick 3.2s steps(1) infinite}
@keyframes flick{0%,100%{opacity:1}47%{opacity:.6}48%{opacity:1}83%{opacity:.75}84%{opacity:1}}
.screen__line{position:absolute;z-index:7;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#fff;opacity:0;transform:scaleX(1)}
.screen.is-off .screen__img,.screen.is-off .screen__bar{animation:crt-off .32s cubic-bezier(.7,0,.84,0) forwards}
.screen.is-off .screen__line{animation:crt-line .5s .26s ease-out forwards}
.screen.is-off .screen__off{opacity:1;transition:opacity 0s .32s}
.screen.is-off .screen__off span{opacity:1}
@keyframes crt-off{0%{transform:none;filter:none}70%{transform:scaleY(.02);filter:brightness(3)}100%{transform:scaleY(0);filter:brightness(3)}}
@keyframes crt-line{0%{opacity:1;transform:scaleX(1)}60%{opacity:1;transform:scaleX(.02)}100%{opacity:0;transform:scaleX(0)}}
.yt__visual{position:relative}
.yt__visual .ds-quote{position:relative;max-width:420px;margin:26px 0 0 auto;opacity:0;transition:opacity .6s ease}
.yt__visual .ds-quote.is-in{opacity:1}
.yt__visual .ds-quote__bubble{padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--text)}
.yt__visual .ds-quote__face{flex-basis:60px;width:60px;height:60px;margin-top:0}
.yt__visual .ds-quote__face img{object-position:50% 35%;transform:scale(1.3);transform-origin:52% 43%}


/* ===== Bridge band ===== */
.bridge{padding:clamp(64px,8vw,110px) 0;text-align:center}
.bridge p{margin:0 auto;max-width:20ch;font:700 clamp(36px,5vw,76px)/1 var(--display);text-transform:uppercase;text-wrap:balance}
.bridge .sig{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font:500 13px var(--mono);letter-spacing:.08em;opacity:.85}
.bridge .sig img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 10%;border:2px solid #fff}

/* ===== Four questions ===== */
.fq__head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:46px}
.fq__count{display:flex;align-items:center;gap:22px;margin:0 0 14px;font-size:20px;color:var(--muted);font-weight:600}
.fq__four{font:700 clamp(90px,11vw,170px)/.8 var(--display);color:var(--red-hi);display:inline-block;transform-origin:50% 90%}
@keyframes spring-in{0%{transform:scale(.3) rotate(-8deg);opacity:0}60%{transform:scale(1.12) rotate(2deg);opacity:1}100%{transform:none}}
.fq__squares{display:grid;grid-template-columns:repeat(4,22px);gap:8px}
.fq__squares i{display:block;width:22px;height:22px;background:var(--c);opacity:0;transform:translateY(8px) scale(.92);transition:opacity .4s ease,transform .45s var(--ease-out);transition-delay:calc(var(--i)*140ms)}
.fq__squares.is-in i{opacity:1;transform:none}
.fq__tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fq__tile{margin:0;position:relative}
.fq__tile .art{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#111}
.fq__tile .art img{width:100%;height:100%;object-fit:cover;display:block}
.fq__tile .art b{position:absolute;left:12px;top:10px;font:500 13px var(--mono);color:#fff;opacity:.8}
.fq__tile figcaption{padding:18px 2px 0}
.fq__tile h3{margin:0;color:var(--aspect-color);font:700 clamp(24px,2.3vw,34px)/1 var(--display);text-transform:uppercase}
.fq__tile h3 span{color:var(--text)}
.fq__tile p{margin:8px 0 0;color:var(--muted);font-size:14px}
.fq__sting{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;margin-top:84px;padding-top:56px;border-top:1px solid var(--line)}
.fq__sting .ph{width:230px;aspect-ratio:3/4;border-radius:8px}
.fq__sting p{margin:0;font:800 clamp(26px,2.7vw,40px)/1.18 var(--body);letter-spacing:-.04em;text-wrap:balance}
.fq__sting p+p{margin-top:10px}
.fq__sting strong{color:var(--red-hi)}
.fade{opacity:0;transition:opacity .8s ease 1.2s}
.fade.is-in{opacity:1}
.fq__sting cite{display:block;margin-top:18px;color:var(--muted);font:500 12px var(--mono);letter-spacing:.08em;font-style:normal}

/* ===== How it works (existing demo) ===== */
.how__head{text-align:center;max-width:820px;margin:0 auto}
.how__head .copy{margin:18px auto 0}
.bpm-demo{max-width:1040px;margin:48px auto 0;text-align:left;background:#0f1012;border:1px solid #1f2124;border-radius:14px}
.bpm-demo__toolbar{display:flex;align-items:center;justify-content:space-between;margin:0;padding:14px 26px;color:#7d8186;font:500 12px var(--mono);letter-spacing:.06em}
.bpm-demo__toolbar button{border:1px solid #2c2e32;border-radius:100px;padding:8px 16px;background:#16171a;color:#d9d7d2;font:600 12px/1.2 var(--body);cursor:pointer}
.bpm-demo__toolbar button:hover{border-color:#55585d}
.demo-step{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--step-delay,0ms)}
.demo-step.is-in{opacity:1;transform:none}
.bpm-demo__panels{display:grid;grid-template-columns:.85fr 1.15fr}
.bpm-demo figure{min-width:0;margin:0;padding:30px 30px 32px}
.bpm-demo__variants{border-left:1px solid #1f2124}
.bpm-demo figcaption{font:700 clamp(24px,2.4vw,32px)/1.05 var(--display);text-transform:uppercase}
.bpm-demo__source{min-height:36px;margin:10px 0 18px;color:#8a8e93;font-size:13px;line-height:1.4}
.bpm-demo__counts,.bpm-demo__notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bpm-demo__counts{margin-bottom:8px;text-align:center;color:#55585d;font:500 11px var(--mono)}
.bpm-demo__counts span{position:relative;transition:color .1s}
.bpm-demo__counts span.is-current{color:#f3f2ef}
.bpm-demo__note{position:relative;display:grid;place-items:center;height:56px;border:1px solid transparent;border-radius:6px;background:#17181b;color:var(--hand-color);font:500 24px var(--mono);transition:background .15s,color .15s,border-color .15s}
.bpm-demo__pattern .bpm-demo__note{background:color-mix(in srgb,var(--hand-color) 12%,#17181b)}
.bpm-demo__variants .bpm-demo__note{color:color-mix(in srgb,var(--hand-color) 55%,#17181b)}
.bpm-demo__note.is-accent{background:color-mix(in srgb,var(--hand-color) 62%,#17181b);color:#0e0f11}
.bpm-demo__row.is-active-row .bpm-demo__note.is-current{color:var(--hand-color);border-color:color-mix(in srgb,var(--hand-color) 50%,transparent);background:color-mix(in srgb,var(--hand-color) 26%,#17181b)}
.bpm-demo__row.is-active-row .bpm-demo__note.is-accent.is-current{background:var(--hand-color);color:#0e0f11}
.bpm-demo__row{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:center;opacity:.32;transition:opacity .25s}
.bpm-demo__row.is-active-row{opacity:1}
.bpm-demo__rows{display:grid;gap:10px}
.bpm-demo__letter{color:#8a8e93;font:500 13px var(--mono)}
.bpm-demo__row.is-active-row .bpm-demo__letter{color:#f3f2ef}
.bpm-demo__variants-counts{padding-left:32px}
.bpm-demo__legend{margin:18px 0 0;color:#7d8186;font-size:12px;line-height:1.5}
.bpm-stickings{margin-top:26px;font-size:13px;line-height:1.5}
.bpm-stickings summary{width:fit-content;color:#d0ceca;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.bpm-stickings>p{color:var(--muted)}
.bpm-stickings__category{border-top:1px solid #34363a;padding:12px 0}
.bpm-stickings__category>summary{font-weight:700;text-decoration:none}
.bpm-stickings ul{list-style:none;margin:12px 0 0;padding:0}
.bpm-stickings li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:9px 0;border-top:1px solid #202429;color:#b6b5b3;font-size:11px}
.bpm-stickings__notes{display:flex;gap:5px;font-family:var(--mono);font-weight:500}
.bpm-stickings__notes i{font-style:normal}
.how__series{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start;max-width:1040px;margin:72px auto 0}
.how__series h3{margin:0 0 14px;font:700 clamp(30px,3vw,44px)/1 var(--display);text-transform:uppercase}
.bpm-alphabet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid #383838;border-left:1px solid #383838;text-align:left}
.bpm-alphabet__letter{min-width:0;padding:12px;border-right:1px solid #383838;border-bottom:1px solid #383838;color:#ddd;font:500 13px var(--mono);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease-out);transition-delay:calc(var(--i)*45ms)}
.bpm-alphabet__letter:nth-child(4n+1){background:#101010}.bpm-alphabet__letter:nth-child(4n+2){background:#1b1b1b}.bpm-alphabet__letter:nth-child(4n+3){background:#252525}.bpm-alphabet__letter:nth-child(4n+4){background:#303030}
.bpm-alphabet.is-in .bpm-alphabet__letter{opacity:1;transform:none}
.bpm-alphabet__hits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:10px}
.bpm-alphabet__hits i{height:12px;border:1px solid #3a3c40;border-radius:2px}
.bpm-alphabet__hits i.is-hit{background:var(--hand-color);border-color:var(--hand-color)}
.how__scope{margin:20px 0 0;color:var(--muted-2);font-size:14px;line-height:1.5}
.how__result{max-width:24ch;margin:72px auto 0;text-align:center;font:700 clamp(32px,3.6vw,54px)/1.02 var(--display);text-transform:uppercase;text-wrap:balance}
.how__result strong{color:var(--red-hi);font-weight:700}
.how__poly{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center;max-width:1040px;margin:80px auto 0;padding-top:56px;border-top:1px solid var(--line)}
.how__poly h3{margin:0 0 14px;font:700 clamp(28px,2.8vw,40px)/1.02 var(--display);text-transform:uppercase}
.how__poly-fig{margin:0}
.how__poly-fig figcaption{margin:0 0 12px;color:#7d8186;font:500 12px var(--mono);letter-spacing:.06em}
.bpm-alphabet__hits--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ===== Route: rhetoric + phone scroll story ===== */
.route{background:#070708}
.route__rhetoric{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center;max-width:980px;margin:0 auto}
.route-pre .route__rhetoric small,.route-pre .route__rhetoric cite{color:var(--on-paper-muted)}
.route-pre .route__rhetoric .a{color:var(--red)}
.route-pre .route__rhetoric .ph{width:300px;box-shadow:0 24px 60px rgba(20,16,10,.25)}
.route__rhetoric .ph{width:220px;aspect-ratio:3/4;border-radius:8px}
.route__rhetoric small{display:block;margin-bottom:14px;color:var(--muted-2);font:500 12px var(--mono);letter-spacing:.14em}
.route__rhetoric .q{margin:0;font:700 clamp(40px,5vw,78px)/.95 var(--display);text-transform:uppercase}
.route__rhetoric .a{margin:6px 0 0;font:700 clamp(40px,5vw,78px)/.95 var(--display);text-transform:uppercase;color:var(--red-hi)}
.route__rhetoric cite{display:block;margin-top:14px;color:var(--muted-2);font:500 12px var(--mono);font-style:normal;letter-spacing:.08em}
.route__head{text-align:center;max-width:960px;margin:0 auto}
.route__head .copy{margin:22px auto 0}
.route-demo{position:relative;padding:64px 0 0}
.route-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,6vw,110px);align-items:center;max-width:1100px;margin:0 auto;padding:0 var(--gutter)}
.route-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.route-steps li{position:relative;padding:22px 0 22px 64px;border-top:1px solid var(--line);color:#5e6266;transition:color .35s}
.route-steps li .chk{position:absolute;left:0;top:50%;width:34px;height:34px;margin-top:-17px;border:2px solid #2e3034;border-radius:50%;transition:border-color .3s,background .3s}
.route-steps li .chk::after{content:"";position:absolute;left:11px;top:6px;width:8px;height:15px;border:solid #0b0b0c;border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transition:transform .35s var(--ease-back)}
.route-steps li.is-on .chk{border-color:#8eeb75}
.route-steps li.is-done .chk{border-color:#8eeb75;background:#8eeb75}
.route-steps li.is-done .chk::after{transform:rotate(45deg) scale(1)}
.route-steps li b{display:block;font:700 clamp(28px,3.2vw,46px)/1 var(--display);text-transform:uppercase;letter-spacing:.005em}
.route-steps li.is-on{color:var(--text)}
.route-steps li.is-done{color:#d6d4d0}

/* phone frame + real app markup */
.lp-phone{--s:.782;position:relative;width:calc(414px*var(--s));height:calc(746px*var(--s));border:2px solid #393e40;border-radius:calc(44px*var(--s));padding:calc(12px*var(--s));background:#050505;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 8px rgba(255,255,255,.02)}
.lp-phone__glass{position:relative;width:100%;height:100%;border-radius:calc(32px*var(--s));overflow:hidden;background:#080808}
.lp-native{position:absolute!important;left:0;top:0;width:390px;height:722px;overflow:hidden;transform:scale(var(--s));transform-origin:left top;padding:22px 20px;background:#080808!important;--bpm-body:'Space Grotesk',Inter,Arial,sans-serif;--bpm-mono:'DM Mono',monospace;font-family:var(--bpm-body)}
.lp-native .phone-brand{font:700 15px/1 var(--bpm-body);letter-spacing:2px;color:#97d8eb;display:flex;gap:7px;margin:8px 0 18px}
.lp-native .phone-brand em{color:#8eeb75;font-style:normal}
.lp-native .journey-tabs{display:flex;gap:18px;font-size:11px;padding:0 0 14px;border-bottom:1px solid #263a42;margin:0 0 12px;color:#6a8a96}
.lp-native .journey-tabs span[aria-current]{color:#eeede7}
.lp-current{position:absolute;left:20px;right:20px;top:96px;transition:opacity .35s,transform .45s var(--ease-out)}
.lp-current--b{opacity:0;transform:translateX(30px)}
.lp-native .guided-current{margin:0;padding:10px;min-height:91px}
.lp-native .guided-current__cover{width:48px;height:58px}
.lp-native .guided-current__eyebrow{font-size:10px}
.lp-native .guided-current__title{font-size:17px}
.lp-native .guided-current__path{font-size:12px}
.lp-native .guided-current__play{font-size:13px;transition:transform .15s,filter .15s}
.lp-cover{position:absolute;left:20px;right:20px;top:208px;transition:opacity .3s}
.lp-native .guided-cover{aspect-ratio:auto;height:240px;min-height:240px}
.lp-native .guided-cover__type .guided-cover__heading{font-family:'Archivo Black',Arial,sans-serif;font-size:36px}
.lp-native .guided-letter-row{min-height:47px;padding:8px 12px}
.lp-native .guided-letter strong{font-size:16px}
.lp-native .guided-letter__rhythm i{width:4px;height:4px}
.lp-native .guided-cover__sticking{margin-top:12px}
.lp-native .guided-cover__stroke{font-size:20px}
.lp-native .guided-letter-row--done .guided-letter:first-child{background:color-mix(in srgb,#cc8489 22%,#1b1419)}
.lp-mark{position:absolute;left:14px;right:14px;bottom:22px;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:16px 12px;background:#0a1114;border:1px solid #97d8eb;color:#dbe4e7;font-size:13px;opacity:0;transform:translateY(24px);transition:opacity .3s,transform .45s var(--ease-out)}
.lp-mark button{background:#8eeb75;color:#080808;border:0;padding:10px 14px;font:700 15px var(--bpm-body)}
.lp-done{position:absolute;inset:0;z-index:30;opacity:0;pointer-events:none;transition:opacity .3s}
.lp-native .practice-complete{position:absolute;inset:0;padding:18px;background:#080808;align-items:center}
.lp-native .pc-panel{width:100%;max-width:100%;padding:22px;min-height:0;border-bottom:1px solid var(--pc-line);transform:translateY(40px);transition:transform .5s var(--ease-out)}
.lp-native .pc-status{font-size:17px}
.lp-native .pc-context__body>strong{font-size:23px}
.lp-native .pc-letters{gap:7px}
.lp-native .pc-letter{padding:16px 8px}
.lp-native .pc-letter>strong{font-size:25px}
.lp-native .pc-action{font-size:17px;min-height:50px}
.lp-tap{position:absolute;z-index:40;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.35);border:2px solid #fff;opacity:0;pointer-events:none;transition:left .5s var(--ease-out),top .5s var(--ease-out),opacity .25s}
.lp-tap.is-press{animation:tap .45s ease-out}
@keyframes tap{0%{transform:scale(1);opacity:1}40%{transform:scale(.75);opacity:1}100%{transform:scale(1.25);opacity:0}}
.lp-tap.is-press{animation-fill-mode:forwards}
/* sequencer screen */
.lp-seq{position:absolute;inset:0;z-index:25;padding:22px 20px;background:#080808;opacity:0;transform:translateX(100%);transition:transform .45s var(--ease-out),opacity .2s;font-family:var(--bpm-body);color:#dbe4e7}
.seq-head{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;column-gap:8px;row-gap:4px;align-items:center;padding:8px 0 16px;border-bottom:1px solid #1e2a30}
.seq-back{grid-row:span 2;font-size:26px;color:#6a8a96}
.seq-title{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:600}
.seq-path{font-size:11px;color:#6a8a96}
.seq-transport{display:flex;align-items:center;gap:14px;margin:20px 0 22px;font:500 11px var(--bpm-mono);color:#97d8eb}
.seq-pp{display:grid;place-items:center;width:30px;height:30px;border:1px solid #2a3a42}
.seq-transport b{font-size:24px;font-weight:500;margin-left:4px}
.seq-ts{margin-left:auto;color:#6a8a96}
.seq-grid{display:grid;gap:8px;margin-top:6px}
.seq-beats,.seq-row{display:grid;grid-template-columns:30px repeat(4,minmax(0,1fr));gap:6px;align-items:center}
.seq-gap{display:block}
.seq-beats span{text-align:center;font:500 12px var(--bpm-mono);color:#4f5b60;padding:3px 0;transition:color .08s,background .08s}
.seq-beats span.is-now{color:#dbe4e7}
.seq-lbl{font:600 11px var(--bpm-mono);color:var(--tc)}
.seq-cell{display:grid;place-items:center;aspect-ratio:1;border-radius:2px;background:#2a2c2f;opacity:.6;transition:opacity .08s,transform .12s,filter .12s}
.seq-cell img{width:62%;height:62%;object-fit:contain}
.seq-cell.is-hit{background:var(--tc);opacity:.85}
.seq-cell.is-now{opacity:1}
.seq-cell.is-hit.is-now{transform:scale(1.1);filter:brightness(1.25)}
.seq-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:34px 0 0;color:#4f5b60}
.seq-bars span{padding:14px 0 12px;border:1px solid #1e2a30;text-align:center;font:400 24px/1 "Archivo Black",sans-serif;letter-spacing:-.04em}
.seq-bars .is-on{color:#97d8eb;border-color:#97d8eb;background:rgba(151,216,235,.06)}
.seq-hint{margin:14px 0 0;font:500 11px var(--bpm-mono);color:#6a8a96;letter-spacing:.04em}
.seq-foot{position:absolute;left:20px;right:20px;bottom:24px}
.seq-done{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;border:1px solid #2a3a42;color:#6a8a96;font:600 15px var(--bpm-body);transition:background .3s,color .3s,border-color .3s}
.seq-done__check{display:grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;font-size:12px}
.lp-phone.is-passed .seq-done{background:#8eeb75;border-color:#8eeb75;color:#080808}
.lp-phone.is-passed .seq-cell.is-hit{opacity:1;animation:passed .5s ease-out}
.lp-phone.is-passed .seq-bars .is-on{background:rgba(142,235,117,.12);border-color:#8eeb75;color:#8eeb75}
@keyframes passed{0%{filter:brightness(1)}35%{filter:brightness(1.6)}100%{filter:brightness(1)}}
.lp-native .pc-footer{position:static;margin-top:24px;padding-bottom:0}
.lp-native .pc-letters{margin-bottom:0}
.lp-native .pc-status__mark{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border-radius:50%;background:#8eeb75;color:#080808;font-size:13px;transform:scale(0);transition:transform .45s var(--ease-back) .15s}
.lp-phone[data-state="done"] .pc-status__mark{transform:scale(1)}
.lp-native .pc-letter.is-complete{transition:background .4s .35s,border-color .4s .35s}
.lp-phone[data-state="done"] .pc-letter.is-complete{background:rgba(142,235,117,.1);border-color:#8eeb75}
/* phone states (looped) */
.lp-phone[data-state="card"] .lp-current--a .guided-current__play{filter:brightness(1.15);box-shadow:0 0 0 4px rgba(151,216,235,.25)}
.lp-phone[data-state="seq"] .lp-seq{opacity:1;transform:none}
.lp-phone[data-state="done"] .lp-done{opacity:1}
.lp-phone[data-state="done"] .pc-panel{transform:none}
.lp-phone[data-state="done"] .lp-cover,.lp-phone[data-state="done"] .lp-current{opacity:0}
.lp-phone[data-state="next"] .lp-current--a{opacity:0;transform:translateX(-30px)}
.lp-phone[data-state="next"] .lp-current--b{opacity:1;transform:none}
.lp-native .guided-letter-row--current .guided-letter{transition:background .4s,color .4s,opacity .4s}
.lp-phone[data-state="next"] .guided-letter-row--current .guided-letter:first-child{opacity:.45}
.lp-phone[data-state="next"] .guided-letter-row--current .guided-letter:nth-child(2){background:color-mix(in srgb,#cc8489 26%,#1b1419);border-color:#cc8489}
/* textbook + anywhere (from /independence) */
.route-demo::after{content:"";display:block;max-width:calc(1100px - 2*var(--gutter));margin:96px auto 0;border-top:1px solid var(--line)}
.book{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:56px;align-items:center;max-width:1100px;margin:96px auto 0;padding:0 var(--gutter)}
.book h3{margin:0;font:700 clamp(44px,5.4vw,84px)/.92 var(--display);text-transform:uppercase}
.book h3 .red{display:block}
.book__copy{margin:20px 0 0;font-size:20px;line-height:1.5;color:var(--muted)}
.pg{width:36px;height:36px;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;color:#d6d4d0;flex:0 0 auto}
.pg__strike{color:var(--red-hi);stroke-width:3}
.book__anti{display:flex;flex-wrap:nowrap;gap:28px;margin-top:26px}
.book__anti figure{display:flex;align-items:center;gap:10px;margin:0;white-space:nowrap}
.book__anti figcaption{color:var(--muted);font-size:13px}
.book__anywhere{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px 40px;margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
.book__anywhere p{margin:0;font-size:24px;font-weight:600;line-height:1.35;letter-spacing:-.025em}
.book__anywhere strong{font-weight:inherit;white-space:nowrap;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.book__places{display:flex;flex-wrap:nowrap;gap:26px;margin:0;padding:0;list-style:none}
.book__places li{display:flex;align-items:center;gap:10px}
.book__places span{color:#ccc;font-size:12px}
.book__scene{position:relative;margin:0}
.book__scene .ph{aspect-ratio:4/5;border-radius:12px}
.book__scene .ph img{object-position:68% 50%}
.book__sticker{position:absolute;z-index:6;top:-14px;right:-10px;padding:10px 16px;border:1px solid #111;background:var(--paper);color:#111;box-shadow:4px 4px 0 var(--red);transform:rotate(-7deg);font:900 14px/1.2 var(--body);letter-spacing:-.03em;text-transform:uppercase}
.book__scene figcaption{position:absolute;z-index:6;left:22px;right:22px;bottom:20px}
.book__scene figcaption p{margin:10px 0 0;color:#d6d4d0;font-size:15px}
.lap__pattern{display:flex;gap:12px;font:500 clamp(26px,2.4vw,34px) var(--mono)}
.lap__pattern b{font-weight:500;transition:transform .08s;text-decoration-thickness:3px;text-underline-offset:10px}
.lap__pattern b.is-hit{text-decoration:underline;transform:translateY(-3px)}

/* ===== More inside (paper) ===== */
.inside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:64px;margin-top:40px}
.icourse{border-bottom:1px solid #b9b2a3}
.icourse summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font:600 22px/1.3 var(--body);letter-spacing:-.025em}
.icourse summary::-webkit-details-marker{display:none}
.icourse summary:hover .icourse__toggle{color:var(--red)}
.icourse__toggle{position:relative;width:20px;height:20px;flex-shrink:0}
.icourse__toggle::before,.icourse__toggle::after{content:"";position:absolute;top:9px;left:2px;width:16px;height:2px;background:currentColor;transition:transform .25s}
.icourse__toggle::after{transform:rotate(90deg)}
.icourse[open] .icourse__toggle::after{transform:rotate(0)}
.icourse__body{padding-bottom:24px}
.icourse__body p{max-width:530px;margin:0 0 16px;color:#57534c;font-size:16px;line-height:1.6}
.icourse__body .icourse__benefit{color:var(--on-paper);font-weight:600}
.icourse--rud{border-top:1px solid #b9b2a3}
.icourse--rud summary{justify-content:flex-start;gap:22px}
.icourse--rud summary img{display:block;width:112px;height:112px;flex-shrink:0;object-fit:cover;background:#000;border-radius:4px}
.icourse--rud .icourse__toggle{margin-left:auto}
.icourse__rt{display:flex;flex-direction:column;gap:6px}
.icourse__rt strong{color:var(--red);font:700 30px/1 var(--display);text-transform:uppercase}
.icourse__cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 24px;padding:0;list-style:none;border-top:1px solid #cfc8b8}
.icourse__cats li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #cfc8b8;font-size:14px;font-weight:600}
.icourse__cats li>span{color:#8a8476;font:400 11px var(--mono)}
.icourse__claim{display:inline-flex;align-items:center;gap:18px;padding-bottom:5px;border-bottom:2px solid var(--red);color:var(--on-paper);font:600 13px var(--mono);text-decoration:none}
.icourse__claim:hover{color:var(--red)}
.inside__adv h3{margin:0 0 6px;color:#6b665d;font-size:14px;font-weight:500}
.inside__adv .icourse:first-of-type{border-top:1px solid #b9b2a3}
/* ===== Review (yellow) ===== */
.review{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center}
.review h2{margin-bottom:24px}
.review__card{position:relative;margin:0;background:#fff;border-radius:12px;padding:34px 34px 30px;border-left:6px solid var(--red);box-shadow:0 22px 60px rgba(60,40,0,.18)}
.review__card .label{font:700 11px var(--mono);letter-spacing:.2em;color:#8a7a50;text-transform:uppercase}
.review__rating{display:flex;align-items:center;gap:14px;margin:16px 0 18px}
.review__rating>span{color:#c69b5d;font-size:30px;letter-spacing:3px}
.review__rating>span span{color:#c9c4b8}
.review__rating strong{font:700 15px var(--mono)}
.review__card blockquote{margin:0;font:700 clamp(30px,3.4vw,52px)/1 var(--display);text-transform:uppercase;text-wrap:balance}
.review__stamp{position:absolute;right:-18px;top:-26px;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;text-align:center;background:var(--red);color:#fff;font:700 34px/1 var(--display);transform:rotate(12deg) scale(0);transition:transform .6s var(--ease-back) .3s}
.review__stamp small{display:block;font:500 10px var(--mono);letter-spacing:.1em}
.review.is-in .review__stamp{transform:rotate(12deg) scale(1)}
.review .ph{aspect-ratio:3/4;border-radius:10px;box-shadow:0 22px 60px rgba(60,40,0,.25)}

/* ===== Author ===== */
.author{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.author__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.author__grid .ph{aspect-ratio:4/5;border-radius:8px}
.author__grid figcaption{position:absolute;z-index:4;left:12px;bottom:10px;color:#fff;font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.author__name{display:flex;align-items:center;gap:16px;margin:26px 0 22px;padding-bottom:22px;border-bottom:1px solid #cfc8b8}
.author__name img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 10%;border:3px solid var(--red)}
.author__name b{display:block;font:700 34px/1 var(--display);text-transform:uppercase}
.author__name small{font:500 12px var(--mono);letter-spacing:.1em;color:var(--on-paper-muted)}
.author__bio p{margin:0 0 14px;font-size:17px;line-height:1.6;color:#3b3934}

/* ===== Subscription ===== */
.sub__head{text-align:center;max-width:820px;margin:0 auto}
.sub__head .copy{margin:20px auto 0}
.sub__included{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:30px auto 0;padding:0;list-style:none}
.sub__included li{padding:10px 16px;border:1px solid #33363b;border-radius:100px;color:#d0ceca;font-size:15px}
.sub__included li::before{content:'+';margin-right:8px;color:var(--red-hi);font-weight:800}
.sub__prices{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:860px;margin:46px auto 34px}
.price{position:relative;padding:32px 30px;border:1px solid #2f3236;border-radius:12px;background:var(--ink-2)}
.price--best{border-color:var(--red);background:linear-gradient(180deg,rgba(227,39,55,.12),var(--ink-2) 60%)}
.price h3{margin:0 0 14px;color:var(--muted);font:600 14px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.price__value{margin:0;font:700 clamp(46px,5vw,70px)/1 var(--display)}
.price__value span{color:var(--muted);font:400 16px var(--body);white-space:nowrap}
.price__note{margin:14px 0 0;color:var(--muted-2);font-size:14px;line-height:1.5}
.sub__cta{text-align:center}
.sub__terms{max-width:63ch;margin:20px auto 0;color:var(--muted-2);font-size:13px;line-height:1.6;text-align:center}
.refund{display:flex;align-items:center;justify-content:center;gap:16px;margin:46px auto 0;padding:20px 26px;max-width:620px;border:1px dashed #3c3f44;border-radius:14px}
.refund img{width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:50% 10%;border:2px solid var(--red);flex:0 0 60px}
.refund h3{margin:0 0 4px;font:800 20px/1.25 var(--body);letter-spacing:-.02em}

/* ===== Final ===== */
.final{position:relative;overflow:hidden;padding:0}
.final__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end;min-height:640px}
.final__text{padding:96px 0}
.final h2{font-size:clamp(58px,7.6vw,120px);line-height:1}
.final h2 .l2{display:block;color:var(--ink)}
.final .copy{margin-top:24px;color:rgba(255,255,255,.88)}
.final__actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:36px}
.final .tlink{color:#fff}
.final__photo{position:relative;align-self:stretch;margin-right:-24px}
.final__photo .ph{position:absolute;inset:0;background:transparent}

.final__photo .ph{background:#0b0b0c}
.final__photo .ph img{object-position:50% 5%;filter:none}
.site-footer{padding:28px 0;border-top:1px solid var(--line);color:var(--muted-2);font:500 12px var(--mono);letter-spacing:.1em}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px}
.footer-links a{color:var(--muted);font:500 12px/1.5 var(--body);letter-spacing:0;text-decoration:none}
.footer-links a:hover{color:var(--text)}

/* ===== Floating CTA ===== */
.float-cta{position:fixed;z-index:50;left:auto;right:max(20px,env(safe-area-inset-right));top:auto;bottom:calc(20px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:54px;padding:14px 20px;border:2px solid var(--red);border-radius:0;background:var(--red);color:var(--paper);font:900 12px/1.3 var(--body);text-transform:uppercase;letter-spacing:.015em;text-decoration:none;box-shadow:0 5px 24px #0008;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);transition:opacity .2s,transform .2s,visibility .2s}
.float-cta.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.float-cta:hover{background:var(--ink);color:var(--red)}
.float-cta:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.hero__action{display:none;text-align:center;margin:32px auto 0}
.hero__action .btn{min-width:310px;min-height:62px;padding:0 0 0 26px;gap:26px;border:1px solid var(--red);background:linear-gradient(135deg,var(--red),#bf1e2c);color:var(--paper);font:700 14px/1.25 var(--body);letter-spacing:.025em;box-shadow:0 8px 28px rgba(227,39,55,.15)}
.hero__action .btn span{display:grid;place-items:center;align-self:stretch;min-width:58px;border-left:1px solid rgba(255,255,255,.24);font-size:24px;font-weight:400}
.hero__action .btn:hover{background:var(--red-hi);border-color:var(--red-hi);color:#fff}

.debug-lang-switch {
  position: fixed;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(12px, var(--safe-area-inset-bottom, 0px));
  z-index: 2147483000;
  min-width: 72px;
  min-height: 56px;
  padding: 10px 14px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.debug-lang-switch:active {
  transform: scale(0.96);
  background: rgba(20, 20, 20, 0.92);
}

.debug-lang-switch__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0.55;
  line-height: 1;
}

.debug-lang-switch__value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

@media(min-width:701px){body:has(.debug-lang-switch) .float-cta{right:calc(104px + env(safe-area-inset-right,0px))}}

/* ===== Responsive ===== */
@media(max-width:1000px){
  .hero__grid{grid-template-columns:1fr;min-height:0}
  .hero__photo{position:relative;width:auto;height:58vh;max-height:520px;margin-top:0;top:auto}
  .hero__photo .ph img{transform:translateY(-12px)}
  .hero__photo::after{background:linear-gradient(0deg,var(--ink) 0,transparent 45%),linear-gradient(180deg,rgba(11,11,12,.6) 0,transparent 25%)}
  .hero__photo .ds-quote{left:auto;right:12px;bottom:40px;max-width:250px}
  .hero__text{padding:0 0 30px;margin-top:-110px;text-align:center}
  .hero__grid{display:block;min-height:0}
  .hero__grid>.hero__text{width:100%;margin-left:auto;margin-right:auto}
  .hero{--hero-title-gap:62px}
  .lockup{margin:0 auto var(--hero-title-gap)}
  .hero .lockup__drumscammer{width:min(78vw,340px)}
  .hero .detail{margin:0 auto}
  .hero .kicker::before{display:none}
  .yt__grid,.review,.author,.final__grid{grid-template-columns:1fr}
  .how__series{grid-template-columns:1fr;gap:28px}
  .inside{grid-template-columns:1fr;gap:26px}
  .how__poly{grid-template-columns:1fr;gap:24px;margin-top:56px;padding-top:40px}
  .book{grid-template-columns:1fr;gap:40px;margin-top:64px}
  .route-demo::after{margin:64px var(--gutter) 0}
  .book__scene{max-width:420px}
  .review .ph{max-width:360px}
  .final__photo{height:420px;margin:0 calc(var(--gutter)*-1)}
  .final__text{padding:72px 0 20px}
}
@media(min-width:701px) and (max-width:1180px){
  .hero__photo .ph img{object-fit:contain;object-position:50% 0}
}
@media(min-width:701px) and (max-width:1000px){
  .hero__photo{height:clamp(360px,56vh,560px);max-height:none;margin-top:0}
  .hero__text{margin-top:-40px}
  .fq__tiles{gap:14px}
  .fq__tile h3{font-size:clamp(18px,2.7vw,24px)}
  .fq__tile figcaption{padding-top:12px}
  .fq__tile p{font-size:13px}
}
@media(max-width:700px){
  :root{--gutter:18px}
  .banner-zone{padding:24px 10px 12px}
  .review-banner{height:36px;padding:3px 6px 3px 3px;gap:6px}
  .review-label{height:28px;font-size:9px;padding:0 9px;letter-spacing:0}
  .review-quote{font-size:10px;text-align:center}
  .banner-desktop,.review-label .desktop-only{display:none}
  .review-label .mobile-only,.banner-mobile{display:inline}
  .review-score{font-size:10px;gap:3px}.review-score .star{font-size:11px;letter-spacing:-1px}
  .review-score .laurel{height:24px;width:12px}
  .hero__photo{height:64vh;max-height:470px}
  .hero h1{font-size:clamp(42px,12vw,64px)}
  .ds-quote__bubble p{font-size:15px}
  .friction__cards{grid-template-columns:1fr;gap:64px}
  .yt__grid{gap:40px}
  .fq__head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:30px}
  .fq__tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .fq__tile h3{font-size:22px}
  .fq__sting{grid-template-columns:96px 1fr;gap:18px;margin-top:56px;padding-top:40px}
  .fq__sting .ph{width:96px}
  .fq__sting p{font-size:21px}
  .bpm-demo{border-radius:0;border-left:0;border-right:0;margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1)}
  .bpm-demo__panels{display:block}
  .bpm-demo figure{padding:24px var(--gutter)}
  .bpm-demo__variants{border-left:0;border-top:1px solid #2f3135}
  .bpm-demo__note{height:48px;font-size:22px}
  .bpm-demo__source{min-height:0}
  .route__rhetoric{grid-template-columns:110px 1fr;gap:18px}
  .route-pre .route__rhetoric .ph{width:110px}
  .route__rhetoric .q{font-size:34px}
  .route__rhetoric .a{font-size:34px}
  .route-demo{padding-top:44px}
  .route-stage{grid-template-columns:1fr;gap:26px;justify-items:center}
  .route-stage>div:first-child{order:2;width:100%}
  .route-steps li{padding:14px 0 14px 44px}
  .route-steps li .chk{width:28px;height:28px;margin-top:-14px}
  .route-steps li .chk::after{left:8px;top:4px;width:7px;height:13px}
  .route-steps li b{font-size:24px}
  .book__places{width:100%;justify-content:space-between}
  .book__places li{flex-direction:column;gap:6px}
  .book__anti{justify-content:space-between;gap:10px}
  .book__anti figure{flex-direction:column;gap:6px;text-align:center}
  .book__anti figcaption{font-size:11px}
  .pg{width:32px;height:32px}
  .book__anywhere p{font-size:21px}
  .icourse summary{font-size:19px}
  .icourse--rud summary img{width:84px;height:84px}
  .review{gap:34px}
  .review__stamp{width:80px;height:80px;font-size:24px;right:-6px;top:-30px}
  .author__grid{grid-template-columns:1fr 1fr}
  .sub__prices{grid-template-columns:1fr}
  .refund{flex-direction:column;text-align:center}
  .final__actions{flex-direction:column;align-items:flex-start}
  .hero__action{display:block}
  .float-cta{right:auto;bottom:auto;left:max(12px,env(safe-area-inset-left));top:calc(12px + env(safe-area-inset-top));max-width:calc(100vw - 24px);font-size:11px;padding:12px 16px;min-height:50px}
  .hero__action .btn{width:100%;min-width:0;max-width:420px;gap:18px;padding:0 0 0 20px;font-size:12px}
  .site-footer .wrap{align-items:flex-start}
  .footer-links{gap:12px clamp(6px,2vw,12px)}
  .footer-links a{font-size:clamp(10px,3.1vw,12px)}
}
@media(min-width:600px) and (max-width:1000px){.hero__photo .ph{background:#000}}
@media(min-width:600px) and (max-width:700px){
  .hero__photo{margin-top:0}
  .hero__photo .ph img{object-fit:contain;object-position:50% 0}
  .hero__text{margin-top:-40px}
  .fq__tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .fq__tile h3{font-size:17px}
  .fq__tile p{font-size:12px}
  .fq__tile figcaption{padding-top:12px}
}
@media(max-width:359px){.review-score .laurel{display:none}}
@media (prefers-reduced-motion:reduce){
  .screen.is-off .screen__img,.screen.is-off .screen__bar{animation:none;opacity:0}
  .screen.is-off .screen__line{animation:none}
  .rv,.pop,.fade,.demo-step,.words .w,.bpm-alphabet__letter,.fq__squares i{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
}

/* ===================== v5 visual pass (refs: herotypo, maybelearn, couldspend, fourquest, howdoes, series, polyobsessed, seeit, thatsnotall) ===================== */
:root{
  --display:'Oswald','Fira Sans Extra Condensed','Arial Narrow',Impact,sans-serif;
  --cond:'Fira Sans Condensed','Fira Sans Extra Condensed',Arial,sans-serif;
  --red:#e3202f; --red-hi:#ef2b3b; --text:#f3eee5; --paper:#f3efe8;
  --line:rgba(243,238,229,.13);
}
.h-display{font-weight:700;letter-spacing:-.003em;line-height:.9}
/* EN: Anton (Latin only) like the refs; RU: its sibling Oswald 700 (Cyrillic). No faux bold on Anton. */
html[lang="en"]{--display:'Anton','Oswald','Arial Narrow',Impact,sans-serif;font-synthesis-weight:none}
html[lang="en"] .h-display,html[lang="en"] .hero h1{letter-spacing:.004em}
.on-dark .h-display,.on-dark-2 .h-display,.route .h-display{color:var(--text)}
.copy{font-weight:400;letter-spacing:.005em}

/* label / kicker: letter-spaced condensed with red rules */
.kicker{gap:18px;font:500 15px/1.2 var(--cond);letter-spacing:.24em;color:#a7a9ab}
.kicker::before,.kicker::after{width:44px;height:3px}
.how__head .kicker::after,.sub__head .kicker::after{content:'';background:var(--red)}
.how__head .kicker{margin-bottom:26px}

/* action button (fourquest/herotypo) */
.btn,.hero__action .btn,.float-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:44px;min-height:64px;padding:0 28px;border:0;border-radius:0;background:var(--red);color:#170708;font:700 22px/1 var(--display);letter-spacing:.035em;text-transform:uppercase;text-decoration:none;box-shadow:0 10px 36px rgba(227,32,47,.28);transition:background .2s,transform .2s,box-shadow .2s}
.btn span,.hero__action .btn span,.float-cta span{display:inline;min-width:0;border:0;font:300 30px/1 var(--body);letter-spacing:0;align-self:auto}
.btn:hover,.hero__action .btn:hover,.float-cta:hover{background:#f2303f;color:#170708;transform:translateY(-1px);box-shadow:0 14px 44px rgba(227,32,47,.4)}
.btn--ink{background:var(--ink);color:var(--text);box-shadow:none}
.btn--ink:hover{background:#000;color:#fff}
.float-cta{min-height:54px;padding:0 22px;gap:32px;font-size:19px}
.float-cta span{font-size:26px}

/* HERO */
.hero h1{font-weight:900;font-size:clamp(56px,6.3vw,100px);line-height:.88;letter-spacing:-.005em;color:var(--text)}
.hero h1 .red{color:var(--red-hi)}
.hero .answer{font:700 clamp(28px,2.8vw,42px)/1.05 var(--cond);letter-spacing:-.01em;text-transform:none}
.hero .answer strong{font-weight:800}
.hero .detail{font-weight:400;color:#b4b6b8}
.hero__action{margin-top:38px}

/* quotes: refined, blinking red dot */
.ds-quote__bubble cite::before{animation:dot-blink 1.4s steps(1,end) infinite}
@keyframes dot-blink{0%,55%{opacity:1}56%,100%{opacity:.15}}
.yt__visual .ds-quote{align-items:center;gap:20px;margin-top:30px}
.yt__visual .ds-quote__face{flex-basis:72px;width:72px;height:72px;box-shadow:0 0 0 2px rgba(243,238,229,.85),0 0 0 5px rgba(227,32,47,.25)}
.yt__visual .ds-quote__bubble p{font:500 clamp(20px,1.8vw,25px)/1.3 var(--body);letter-spacing:-.012em}
.yt__visual .ds-quote__bubble cite{margin-top:10px;gap:10px;font:500 17px/1 var(--body);letter-spacing:0;color:#8e9195}
.yt__visual .ds-quote__bubble cite::before{width:9px;height:9px}
.friction__quote .ds-quote__bubble cite::before{width:8px;height:8px}

/* BRIDGE (maybelearn) */
.bridge{background:radial-gradient(120% 140% at 50% 50%,#e1323b 0,#cf2a33 55%,#b5222b 100%);padding:clamp(80px,10vw,140px) 0}
.bridge p{max-width:17ch;font:800 clamp(52px,7.4vw,118px)/.9 var(--display);letter-spacing:-.005em}
.bridge .ink{color:#0b0b0c}

/* FOUR QUESTIONS (fourquest + couldspend) */
.fq__head{display:block;margin-bottom:40px}
.fq__count{gap:18px;margin:0 0 10px;font:600 clamp(26px,2.4vw,36px)/1 var(--body);color:#a3a6a9;letter-spacing:-.01em}
.fq__four{font:900 clamp(110px,11vw,170px)/.78 var(--display);color:var(--red)}
.fq__head h2{max-width:20ch;font-weight:900;font-size:clamp(48px,6vw,96px);line-height:.9}
.fq__squares{grid-template-columns:repeat(4,44px);gap:26px;margin-top:28px}
.fq__squares i{width:44px;height:44px}
.fq__tiles{gap:20px}
.fq__tile{display:flex;flex-direction:column;overflow:hidden;border:1px solid #26282d;border-radius:12px;background:#0f1013}
.fq__idx{display:block;padding:16px 20px 0;font:500 20px/1 var(--cond);color:#c9cacc;letter-spacing:.02em}
.fq__tile .art{aspect-ratio:1;border-radius:0;margin-top:10px;background:#0f1013}
.fq__tile figcaption{padding:18px 20px 20px}
.fq__tile h3{font:700 clamp(24px,2.1vw,32px)/1 var(--display);letter-spacing:.005em}
.fq__tile h3 span{color:var(--text)}
.fq__tile p{margin-top:8px;font:400 16px/1.3 var(--body);color:#a3a6a9}
.fq__sting{grid-template-columns:auto 1fr;gap:clamp(24px,3vw,40px);align-items:center;margin-top:70px;padding:28px;border:1px solid #2a2c31;border-radius:14px;background:#000;position:relative}
.fq__sting::before{content:'';position:absolute;left:0;right:0;top:-36px;border-top:1px solid var(--line)}
.fq__sting .ph{width:clamp(150px,18vw,250px);aspect-ratio:3/4.1;border-radius:10px}
.fq__sting p{font:800 clamp(30px,3.4vw,54px)/.98 var(--display);letter-spacing:.003em;text-transform:uppercase;color:var(--text)}
.fq__sting p+p{margin-top:16px}
.fq__sting strong{color:var(--red-hi);font-weight:800}
.fq__sting cite,.route__rhetoric cite{display:flex;align-items:center;gap:16px;margin-top:26px;font:500 15px/1 var(--cond);letter-spacing:.26em;text-transform:uppercase;color:#9a9da1}
.fq__sting cite::before,.route__rhetoric cite::before{content:'';width:30px;height:1px;background:currentColor}

/* HOW IT WORKS (howdoes) */
.how__head h2{font-weight:900;font-size:clamp(64px,8vw,128px);line-height:.88}
.how__head .copy{max-width:34ch;font-size:clamp(18px,1.6vw,24px);line-height:1.45;color:#b9bbbd}
.bpm-demo{margin-top:56px;background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0}
.bpm-demo__panels{grid-template-columns:1fr 1.25fr}
.bpm-demo figure{padding:36px 34px 38px}
.bpm-demo__pattern{padding-left:0!important}
.bpm-demo__variants{border-left:1px solid var(--line)}
.bpm-demo figcaption{display:flex;align-items:center;gap:22px;font:800 clamp(28px,2.6vw,38px)/1 var(--display);letter-spacing:.005em}
.bpm-demo__num{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border:2px solid var(--red);border-radius:50%;font:600 20px/1 var(--cond);color:var(--text)}
.bpm-demo__source{min-height:0;margin:6px 0 30px 68px;font:400 17px/1.4 var(--body);color:#a9abae}
.bpm-demo__counts{font:500 15px var(--cond);color:#8b8e92;margin-bottom:12px}
.bpm-demo__counts span.is-current{color:#fff}
.bpm-demo__notes{gap:12px}
.bpm-demo__note{height:62px;border-radius:9px;border:1px solid #26282c;background:#141518;font:600 26px var(--cond)}
.bpm-demo__pattern .bpm-demo__note{background:color-mix(in srgb,var(--hand-color) 7%,#141518);border-color:color-mix(in srgb,var(--hand-color) 22%,#26282c)}
.bpm-demo__variants .bpm-demo__note{color:color-mix(in srgb,var(--hand-color) 80%,#141518)}
.bpm-demo__note.is-accent{background:color-mix(in srgb,var(--hand-color) 30%,#141518);border-color:color-mix(in srgb,var(--hand-color) 55%,#141518);color:var(--hand-color)}
.bpm-demo__row.is-active-row .bpm-demo__note.is-current{background:color-mix(in srgb,var(--hand-color) 18%,#141518);border-color:color-mix(in srgb,var(--hand-color) 45%,#26282c);color:var(--hand-color)}
.bpm-demo__row.is-active-row .bpm-demo__note.is-accent.is-current{background:color-mix(in srgb,var(--hand-color) 80%,#141518);border-color:var(--hand-color);color:#141518}
.bpm-demo__rows{gap:12px}
.bpm-demo__row{opacity:1;grid-template-columns:28px minmax(0,1fr);gap:12px}
.bpm-demo__row:not(.is-active-row) .bpm-demo__note{opacity:.72}
.bpm-demo__letter{font:500 16px var(--cond);color:#8b8e92}
.bpm-demo__variants-counts{padding-left:40px}
.bpm-demo__legend{margin-top:22px;font:400 16px var(--body);color:#a9abae}
.bpm-stickings summary{display:inline-flex;align-items:center;gap:14px;list-style:none;font:400 18px var(--body);color:var(--text);text-decoration:none}
.bpm-stickings>summary::-webkit-details-marker{display:none}
.bpm-stickings>summary::before{content:'';width:0;height:0;border-left:11px solid var(--text);border-top:7px solid transparent;border-bottom:7px solid transparent;transition:transform .2s}
.bpm-stickings[open]>summary::before{transform:rotate(90deg)}
.bpm-stickings>summary span,.bpm-stickings>summary{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}

/* SERIES (series) */
.how__series{margin-top:84px;align-items:center}
.how__series h3{font:800 clamp(44px,4.6vw,72px)/.92 var(--display);letter-spacing:.003em;color:var(--text)}
.how__series .copy{font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:#e4e1da}
.how__scope{position:relative;margin-top:34px;padding-top:30px;font:400 clamp(16px,1.3vw,19px)/1.5 var(--body);color:#a3a6a9}
.how__scope::before{content:'';position:absolute;left:0;top:0;width:60px;height:3px;background:var(--red)}
.how__scope .red{color:var(--red-hi)}
.bpm-alphabet{gap:0;border:1px solid #2c2e33;border-radius:10px;overflow:hidden;background:#141518}
.bpm-alphabet__letter{padding:16px 14px 18px;border:0;border-right:1px solid #2c2e33;border-bottom:1px solid #2c2e33;background:#141518!important;color:#f0ede6;font:600 19px/1 var(--cond)}
.bpm-alphabet__letter:nth-child(4n){border-right:0}
.bpm-alphabet__hits{gap:6px;margin-top:14px}
.bpm-alphabet__hits i{height:18px;border:1.5px solid #3b3d42;border-radius:4px;background:#101114}
.bpm-alphabet__hits i.is-hit{background:var(--hand-color);border-color:var(--hand-color)}
.how__result{position:relative;max-width:20ch;margin-top:96px;padding-top:56px;font:800 clamp(40px,4.8vw,76px)/.92 var(--display);letter-spacing:.003em;color:var(--text)}
.how__result::before{content:'';position:absolute;left:-30%;right:-30%;top:0;border-top:1px solid var(--line)}
.how__result::after{content:'';position:absolute;left:50%;top:-1px;width:84px;height:3px;margin-left:-42px;background:var(--red)}
.how__result strong{display:block;color:var(--red-hi);font-weight:800}

/* POLYRHYTHM (polyobsessed) */
.how__poly{margin-top:96px;padding-top:64px}
.how__poly h3{font:800 clamp(40px,4.2vw,66px)/.92 var(--display);letter-spacing:.003em;color:var(--text)}
.how__poly h3 .l{display:block}
.how__poly h3 .red{color:var(--red-hi)}
.how__poly h3 .devil{font-size:.62em;vertical-align:.12em}
.how__poly .copy{max-width:30ch;margin-top:18px;font-size:clamp(18px,1.6vw,24px);line-height:1.45;color:#b4b6b8}
.how__poly-fig figcaption{margin-bottom:18px;font:500 15px/1 var(--cond);letter-spacing:.26em;text-transform:uppercase;color:#8b8e92}

/* «not another thousand» paper band */
.route-pre .route__rhetoric .ph{border-radius:14px;box-shadow:0 30px 70px rgba(20,16,10,.28)}
.route__rhetoric .q,.route__rhetoric .a{font-weight:900;line-height:.9;letter-spacing:-.003em}
.route-pre .route__rhetoric cite{color:#5d5a54}

/* ROUTE steps */
.route-steps li b{font-weight:800;letter-spacing:.005em}

/* SEE IT (seeit) */
.book{align-items:start}
.book h3{font:900 clamp(60px,7vw,112px)/.88 var(--display);letter-spacing:-.003em;color:var(--text)}
.book h3 .red{color:var(--red-hi)}
.book__copy{margin-top:22px;font:300 clamp(20px,1.9vw,28px)/1.35 var(--body);letter-spacing:.02em;color:#c6c7c8}
.book__anti,.book__places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:36px;padding:0;list-style:none}
.book__anti figure,.book__places li{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;margin:0;padding:4px 10px;text-align:center;white-space:nowrap}
.book__anti figure+figure::before,.book__places li+li::before{content:'';position:absolute;left:0;top:18%;height:52%;border-left:1px solid #2e3035}
.book__anti .pg{width:64px;height:64px;color:#f3eee5;stroke-width:2.2}
.book__anti .pg__strike{color:var(--red);stroke-width:3.2}
.book__anti figcaption,.book__places span{font:500 15px/1.2 var(--cond);letter-spacing:.2em;text-transform:uppercase;color:#c9cacc}
.book__anywhere{display:block;margin-top:40px;padding-top:36px;border-top:1px solid var(--line)}
.book__anywhere p{font:700 clamp(30px,3vw,44px)/1.05 var(--cond);letter-spacing:-.01em;color:var(--text)}
.book__anywhere strong{font-weight:700;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:.22em}
.book__places{margin-top:30px}
.book__places .pg{width:54px;height:54px;color:#f3eee5;stroke-width:2}
.book__places span{color:#c9cacc}
.book__scene .ph{border:1px solid #26282d;border-radius:16px}

/* MORE INSIDE (thatsnotall) */
.more h2{font-weight:900;font-size:clamp(60px,7.4vw,118px);line-height:.9;color:#0e0e0e}
.more h2 .red{color:#d8262f}
.inside{margin-top:48px;gap:56px}
.icourse summary{font:600 clamp(28px,2.6vw,38px)/1.08 var(--cond);letter-spacing:-.012em;color:#111;padding:26px 0}
.icourse__toggle{width:34px;height:34px;color:#111}
.icourse__toggle::before,.icourse__toggle::after{top:16px;left:0;width:34px;height:2px}
.icourse--rud{border:1px solid #cfc8bb!important;border-radius:14px;background:rgba(255,255,255,.35);padding:0 24px}
.icourse--rud summary{gap:28px;padding:24px 0}
.icourse--rud summary img{width:clamp(120px,13vw,170px);height:clamp(120px,13vw,170px);border-radius:8px}
.icourse__rt{gap:10px}
.icourse__rt>span{font:600 clamp(26px,2.4vw,36px)/1.08 var(--cond);letter-spacing:-.012em}
.icourse__rt strong{font:900 clamp(46px,4.4vw,66px)/.9 var(--display);color:#d8262f;letter-spacing:.003em}
.inside__adv{padding-top:30px;border-top:1px solid #d6cfc2}
.inside__adv h3{margin:0 0 18px;font:600 15px/1 var(--cond);letter-spacing:.26em;text-transform:uppercase;color:#77726a}
.inside__adv .icourse:first-of-type{border-top:1px solid #d6cfc2}
.inside__adv .icourse{border-bottom:1px solid #d6cfc2}
.icourse__body p{font-size:17px}

@media(max-width:1000px){
  .bpm-demo__panels{grid-template-columns:1fr}
  .bpm-demo__variants{border-left:0;border-top:1px solid var(--line)}
  .bpm-demo figure{padding-left:0;padding-right:0}
  .inside__adv{padding-top:30px}
}
@media(max-width:700px){
  .btn,.hero__action .btn{min-height:58px;padding:0 22px;gap:28px;font-size:19px}
  .float-cta{min-height:50px;font-size:17px;gap:24px;padding:0 18px}
  .hero h1{font-size:clamp(52px,15vw,74px)}
  .bridge p{font-size:clamp(48px,13.5vw,70px)}
  .fq__count{font-size:30px}
  .fq__four{font-size:112px}
  .fq__head h2{font-size:clamp(46px,12.6vw,64px)}
  .fq__squares{grid-template-columns:repeat(4,34px);gap:22px;margin-top:22px}
  .fq__squares i{width:34px;height:34px}
  .fq__tiles{gap:12px}
  .fq__idx{padding:12px 14px 0;font-size:15px}
  .fq__tile .art{margin-top:6px}
  .fq__tile figcaption{padding:12px 14px 14px}
  .fq__tile h3{font-size:clamp(17px,4.6vw,22px)}
  .fq__tile p{font-size:13px}
  .fq__sting{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:18px;padding:16px}
  .fq__sting .ph{width:100%}
  .fq__sting p{font-size:clamp(22px,6.4vw,30px)}
  .fq__sting cite{font-size:12px;gap:10px;margin-top:16px}
  .how__head h2{font-size:clamp(56px,15vw,80px)}
  .kicker{font-size:12px;letter-spacing:.18em;gap:12px;white-space:nowrap}
  .kicker::before,.kicker::after{width:26px}
  .bpm-demo{margin-left:0;margin-right:0;border-left:0;border-right:0}
  .bpm-demo figure{padding:30px 0 32px}
  .bpm-demo figcaption{font-size:clamp(26px,7vw,32px);gap:16px}
  .bpm-demo__num{flex-basis:40px;width:40px;height:40px;font-size:18px}
  .bpm-demo__source{margin-left:56px;margin-bottom:24px;font-size:15px}
  .bpm-demo__notes{gap:8px}
  .bpm-demo__note{height:54px;font-size:24px}
  .how__series h3{font-size:clamp(42px,11.5vw,60px)}
  .bpm-alphabet__letter{padding:12px 10px 14px;font-size:16px}
  .bpm-alphabet__hits{gap:4px;margin-top:10px}
  .bpm-alphabet__hits i{height:15px;border-radius:3px}
  .how__result{font-size:clamp(36px,10vw,52px);padding-top:40px;margin-top:64px}
  .how__poly h3{font-size:clamp(34px,9.6vw,50px)}
  .route-pre .route__rhetoric{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:20px}
  .route-pre .route__rhetoric .ph{width:100%}
  .route__rhetoric .q,.route__rhetoric .a{font-size:clamp(32px,9vw,44px)}
  .route__rhetoric cite{font-size:12px;gap:10px}
  .book h3{font-size:clamp(56px,15vw,76px)}
  .book__copy{font-size:22px}
  .book__anti,.book__places{grid-template-columns:repeat(3,minmax(0,1fr))}
  .book__anti figure,.book__places li{padding:4px 4px;gap:12px}
  .book__anti .pg{width:50px;height:50px}
  .book__places .pg{width:44px;height:44px}
  .book__anti figcaption,.book__places span{font-size:12px;letter-spacing:.14em;white-space:normal}
  .book__anywhere p{font-size:clamp(28px,8vw,36px)}
  .more h2{font-size:clamp(56px,15.5vw,80px)}
  .icourse--rud{padding:0 16px}
  .icourse--rud summary{gap:18px;padding:16px 0}
  .icourse--rud summary img{width:104px;height:104px}
  .icourse__rt>span{font-size:clamp(22px,6vw,28px)}
  .icourse__rt strong{font-size:clamp(36px,10vw,48px)}
  .icourse summary{font-size:clamp(24px,6.6vw,30px)}
  .icourse__toggle{width:28px;height:28px}
  .icourse__toggle::before,.icourse__toggle::after{top:13px;width:28px}
}

/* v5 tune */
html[lang="ru"] :is(.h-display,.hero h1,.bridge p,.fq__head h2,.fq__sting p,.how__series h3,.how__result,.how__poly h3,.route__rhetoric .q,.route__rhetoric .a,.book h3,.more h2,.icourse__rt strong,.bpm-demo figcaption,.how__head h2){line-height:.98}
.btn,.hero__action .btn,.float-cta{white-space:nowrap;text-align:left}
.book__anti figcaption,.book__places span{font:400 16px/1.15 var(--display);letter-spacing:.14em}
html[lang="ru"] .book__anti figcaption,html[lang="ru"] .book__places span{font-weight:500}
@media(max-width:700px){
  .hero h1{font-size:clamp(46px,14.2vw,68px)}
  .btn,.hero__action .btn{font-size:clamp(15px,4.6vw,19px);gap:20px}
  .book h3{font-size:clamp(46px,13.6vw,66px)}
  .book__anti .pg{width:62px;height:62px}
  .book__places .pg{width:50px;height:50px}
  .book__anti figcaption,.book__places span{font-size:13px;letter-spacing:.1em}
  .route-pre .route__rhetoric{grid-template-columns:38% 1fr;gap:18px}
  .route__rhetoric .q,.route__rhetoric .a{font-size:clamp(26px,7.6vw,36px);overflow-wrap:break-word}
}
html[lang="en"] :is(.h-display,.hero h1,.bridge p,.fq__head h2,.fq__sting p,.how__series h3,.how__result,.how__poly h3,.route__rhetoric .q,.route__rhetoric .a,.book h3,.more h2,.icourse__rt strong,.bpm-demo figcaption,.how__head h2,.route-steps li b,.pcard__title,.review__card blockquote,.price__value){line-height:.96}
@media(max-width:700px){
  .fq__head h2{font-size:clamp(46px,13.4vw,66px)}
  .more h2{font-size:clamp(48px,13vw,70px)}
}

/* ===================== v6: mobile proportions measured from the refs (440px phone) ===================== */
/* action button = «whatif» ref: gradient red, white letter-spaced caps, thin long arrow, red glow */
.btn,.hero__action .btn,.float-cta{gap:22px;min-height:46px;padding:0 20px 0 22px;border:1px solid rgba(255,120,130,.35);border-radius:2px;background:linear-gradient(180deg,#ea2f3e 0%,#cf1d2c 100%);color:#fff;font:500 15px/1 'Oswald',var(--display);letter-spacing:.1em;box-shadow:0 8px 30px rgba(227,32,47,.32),inset 0 1px 0 rgba(255,255,255,.18)}
html[lang="en"] .btn,html[lang="en"] .hero__action .btn,html[lang="en"] .float-cta{font-family:'Oswald',sans-serif}
.btn span,.hero__action .btn span,.float-cta span{font:300 24px/1 var(--body);transform:translateY(-1px)}
.btn:hover,.hero__action .btn:hover,.float-cta:hover{background:linear-gradient(180deg,#f23a49,#d8202f);color:#fff}
.btn--ink{background:#0b0b0c;border-color:#0b0b0c;box-shadow:none}
.btn--ink:hover{background:#000}

/* «whatif» background + player */
.yt{background:radial-gradient(90% 55% at 50% 78%,rgba(200,24,40,.16),transparent 70%),linear-gradient(180deg,#151517 0%,#0c0c0d 55%,#0a0a0b 100%)}
.yt h2 .red{background:linear-gradient(180deg,#ff3a4c 0%,#d3192b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.yt h2.h-display{background:linear-gradient(180deg,#ffffff 0%,#d2d2d2 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.yt h2 .red{-webkit-text-fill-color:transparent}
.yt__lines .yt__setup{font:700 clamp(21px,2vw,30px)/1.22 var(--body);letter-spacing:-.015em}
.yt .copy{color:#a9abae}
.screen{border:1px solid rgba(255,255,255,.16);border-radius:14px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 20px 60px rgba(200,24,40,.28),0 0 90px rgba(200,24,40,.18)}
.screen__play{width:62px;height:62px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:none}
.screen__play:hover{background:rgba(0,0,0,.55)}
.screen__bar{gap:14px;padding:12px 16px;background:linear-gradient(transparent,rgba(0,0,0,.85) 55%);color:#fff}
.screen__bar svg{flex:0 0 auto}
.screen__bar i{height:4px}
.screen__bar span{font:500 13px var(--body);color:#fff}

/* knees photo: back to the plain rounded photo, keep the head in frame */
.book__scene .ph{border:0;border-radius:12px}
.book__scene .ph img{object-position:50% 18%}

@media(max-width:700px){
  :root{--gutter:20px}
  .sec{padding:56px 0}
  /* labels */
  .kicker{font-size:13px;letter-spacing:.2em;gap:14px}
  .kicker::before,.kicker::after{width:25px;height:2px}
  /* buttons */
  .btn,.hero__action .btn{min-height:46px;font-size:15px;gap:20px;padding:0 18px 0 22px}
  .float-cta{min-height:42px;padding:0 16px 0 18px;gap:18px;font-size:14px}
  .float-cta span{font-size:20px}

  /* whatif */
  .yt h2.h-display{font-size:13.2vw;line-height:.9}
  .yt__lines .yt__setup{max-width:none;margin-top:22px;font-size:5vw;text-wrap:wrap}
  .yt .copy{font-size:4vw;line-height:1.4}
  .yt__grid{gap:30px}
  .screen{border-radius:12px}
  .yt__visual .ds-quote{gap:16px;margin-top:26px}
  .yt__visual .ds-quote__face{flex-basis:60px;width:60px;height:60px}
  .yt__visual .ds-quote__bubble p{font-size:16.5px}
  .yt__visual .ds-quote__bubble cite{font-size:13px}
  .yt__visual .ds-quote__bubble cite::before{width:7px;height:7px}

  /* maybelearn */
  .bridge{padding:44px 0}
  .bridge p{font-size:11vw;line-height:.92}

  /* fourquest */
  .fq__head{margin-bottom:18px}
  .fq__count{gap:12px;margin-bottom:8px;font-size:18px}
  .fq__four{font-size:52px;line-height:.8}
  .fq__head h2{font-size:10.5vw;line-height:.93;max-width:none}
  .fq__squares{grid-template-columns:repeat(4,18px);gap:12px;margin-top:14px}
  .fq__squares i{width:18px;height:18px}
  .fq__tiles{gap:10px}
  .fq__tile{position:relative;border-radius:8px}
  .fq__idx{position:absolute;z-index:2;left:10px;top:8px;padding:0;font:500 12px/1 var(--cond);color:#d7d8da;text-shadow:0 1px 4px #000}
  .fq__tile .art{margin-top:0;aspect-ratio:1.32}
  .fq__tile .art img{object-position:50% 0}
  .fq__tile figcaption{padding:8px 10px 10px}
  .fq__tile h3{font:500 3.75vw/1.1 'Oswald',sans-serif;letter-spacing:.01em}
  .fq__tile p{margin-top:2px;font-size:11.5px}

  /* couldspend: photo height == text height */
  .fq__sting{grid-template-columns:117px 1fr;align-items:stretch;gap:17px;margin-top:44px;padding:13px 13px 17px;border-radius:10px}
  .fq__sting::before{top:-22px}
  .fq__sting .ph{width:100%;height:100%;aspect-ratio:auto;border-radius:8px}
  .fq__sting>div{padding-top:3px}
  .fq__sting p{font:600 5.05vw/1.25 'Oswald',sans-serif;letter-spacing:.03em}
  .fq__sting p+p{margin-top:10px}
  .fq__sting cite{margin-top:14px;font-size:10px;letter-spacing:.3em;gap:10px}
  .fq__sting cite::before{width:18px}

  /* howdoes */
  .how__head .kicker{margin-bottom:14px}
  .how__head h2{font-size:10.6vw;line-height:.95}
  .how__head .copy{margin-top:14px;font-size:16px;line-height:1.45}
  .bpm-demo{margin-top:30px}
  .bpm-demo figure{padding:24px 0 26px}
  .bpm-demo figcaption{font-size:5.7vw;gap:14px}
  .bpm-demo__num{flex-basis:28px;width:28px;height:28px;border-width:2px;font-size:14px}
  .bpm-demo__source{margin:4px 0 18px 42px;font-size:14px}
  .bpm-demo__counts{font-size:11px;margin-bottom:6px}
  .bpm-demo__notes{gap:8px}
  .bpm-demo__pattern .bpm-demo__note{height:40px;font-size:18px;border-radius:6px}
  .bpm-demo__variants .bpm-demo__note{height:30px;font-size:15px;border-radius:5px}
  .bpm-demo__rows{gap:6px}
  .bpm-demo__row{grid-template-columns:20px minmax(0,1fr);gap:8px}
  .bpm-demo__variants-counts{padding-left:28px}
  .bpm-demo__letter{font-size:12px}
  .bpm-demo__legend{margin-top:14px;font-size:13px}
  .bpm-stickings summary{font-size:14px;gap:10px}
  .bpm-stickings>summary::before{border-left-width:8px;border-top-width:5px;border-bottom-width:5px}

  /* series */
  .how__series{margin-top:44px;gap:20px}
  .how__series h3{font-size:10.2vw;line-height:.95}
  .how__series .copy{font-size:16.5px;line-height:1.35}
  .how__scope{margin-top:18px;padding-top:18px;font-size:15px}
  .bpm-alphabet{border-radius:6px}
  .bpm-alphabet__letter{padding:10px 12px 12px;font-size:13px}
  .bpm-alphabet__hits{gap:4px;margin-top:8px}
  .bpm-alphabet__hits i{height:13px;border-radius:2px;border-width:1px}
  .how__result{margin-top:48px;padding-top:30px;font-size:8.9vw;line-height:.95}
  .how__result::after{width:40px;margin-left:-20px}

  /* polyobsessed */
  .how__poly{margin-top:48px;padding-top:40px;gap:16px}
  .how__poly h3{font-size:9vw;line-height:.95}
  .how__poly h3 .devil{font-size:.5em;vertical-align:.25em}
  .how__poly .copy{margin-top:10px;font-size:17px;line-height:1.45}
  .how__poly-fig figcaption{margin-bottom:12px;font-size:11px}
  .bpm-alphabet__hits--3 i{height:13px}

  /* another thousand */
  .route-pre .route__rhetoric{grid-template-columns:144px 1fr;gap:26px;align-items:center}
  .route-pre .route__rhetoric .ph{width:144px;aspect-ratio:144/194;border-radius:10px}
  .route__rhetoric .q,.route__rhetoric .a{font-size:9vw;line-height:.92}
  .route__rhetoric cite{margin-top:14px;font-size:10px;letter-spacing:.3em}
  .route__rhetoric cite::before{width:10px}

  /* route steps */
  .route-steps li b{font-size:5.7vw}

  /* seeit — compact */
  .book{gap:24px;margin-top:40px}
  .route-demo::after{margin-top:40px}
  .book h3{font-size:13vw;line-height:.93}
  .book__copy{margin-top:12px;font-size:20px;line-height:1.25;letter-spacing:.01em}
  .book__anti,.book__places{margin-top:22px}
  .book__anti figure,.book__places li{gap:9px}
  .book__anti .pg{width:44px;height:44px}
  .book__places .pg{width:30px;height:30px}
  .book__anti figcaption,.book__places span{font:400 11px/1.2 'Oswald',sans-serif;letter-spacing:.12em}
  .book__anywhere{margin-top:22px;padding-top:24px}
  .book__anywhere p{font:700 6.05vw/1.1 'Fira Sans Extra Condensed',var(--cond);letter-spacing:0}
  .book__anywhere strong{text-decoration-thickness:2px;text-underline-offset:.18em}
  .book__places{margin-top:20px}
  .book__scene{max-width:none}

  /* thatsnotall */
  .more h2{font-size:13vw;line-height:.95}
  .inside{margin-top:26px;gap:20px}
  .icourse--rud{padding:0 13px;border-radius:10px}
  .icourse--rud summary{gap:20px;padding:13px 0}
  .icourse--rud summary img{width:95px;height:95px;border-radius:5px}
  .icourse__rt{gap:6px}
  .icourse__rt>span{font:700 4.5vw/1.12 'Fira Sans Extra Condensed',var(--cond)}
  .icourse__rt strong{font-size:6.4vw}
  .icourse__toggle{width:20px;height:20px}
  .icourse__toggle::before,.icourse__toggle::after{top:9px;width:20px;height:1.5px}
  .inside__adv{padding-top:20px}
  .inside__adv h3{margin-bottom:10px;font-size:11px}
  .icourse summary{padding:20px 0;font:700 5vw/1.1 'Fira Sans Extra Condensed',var(--cond)}
}

@media(max-width:700px){
  html[lang] .fq__sting p{line-height:1.25!important}
  html[lang="ru"] .yt h2.h-display{font-size:11.2vw}
  html[lang] .fq__four{font:900 54px/.8 var(--body);letter-spacing:-.04em}
}

/* ===================== v7: tablet (701–1023) and desktop (≥1024) layouts ===================== */
@media(min-width:1024px){
  .hero h1{font-size:clamp(76px,6.4vw,104px)}
  .video{max-width:880px}
  .yt__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
  .yt h2.h-display{font-size:clamp(56px,4.7vw,74px)}
  .how__head h2{font-size:clamp(72px,6.6vw,100px);max-width:none}
  .how__head{max-width:1000px}
  .how__series h3{font-size:clamp(48px,4vw,62px)}
  .how__poly{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px}
  .how__poly h3{font-size:clamp(38px,3.1vw,46px)}
  .how__poly h3 .devil{font-size:.55em}
  .final__photo{margin-right:calc(min(0px,(var(--wrap) - 100vw)/2) - var(--gutter))}
  .inside{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .icourse__rt>span{font-size:clamp(24px,2vw,30px)}
}
@media(min-width:701px) and (max-width:1023px){
  :root{--gutter:32px}
  .sec{padding:80px 0}
  .btn,.hero__action .btn{min-height:52px;font-size:17px;padding:0 22px 0 26px;gap:26px}
  .hero__action{display:block}
  .kicker{font-size:14px}
  /* hero */
  .hero h1{font-size:clamp(68px,10vw,96px);line-height:.9}
  .hero .answer{font-size:34px}
  .hero .detail{font-size:19px}
  .video{max-width:none}
  /* friction */
  .friction__head h2{font-size:clamp(52px,7.4vw,70px)}
  .pcard__title{font-size:clamp(30px,4.4vw,40px)}
  /* whatif */
  .yt__grid{grid-template-columns:1fr;gap:36px}
  .yt h2.h-display{font-size:clamp(70px,10.4vw,96px);line-height:.9}
  .yt__lines .yt__setup{max-width:none;font-size:30px}
  .yt .copy{max-width:40ch;font-size:20px}
  .yt__visual .ds-quote{margin:26px 0 0}
  .yt__visual .ds-quote__bubble p{font-size:22px}
  /* bridge */
  .bridge p{font-size:clamp(64px,9.4vw,90px)}
  /* four questions */
  .fq__count{font-size:26px}
  .fq__four{font-size:84px}
  .fq__head h2{font-size:clamp(62px,9vw,86px);max-width:none}
  .fq__squares{grid-template-columns:repeat(4,30px);gap:18px}
  .fq__squares i{width:30px;height:30px}
  .fq__tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .fq__tile .art{aspect-ratio:1.32}
  .fq__tile .art img{object-position:50% 0}
  .fq__idx{position:absolute;z-index:2;left:16px;top:14px;padding:0;font-size:17px;text-shadow:0 1px 4px #000}
  .fq__tile .art{margin-top:0}
  .fq__tile h3{font-size:clamp(26px,3.6vw,32px)}
  .fq__tile p{font-size:16px}
  .fq__sting{grid-template-columns:clamp(180px,26vw,240px) 1fr;align-items:stretch;padding:20px}
  .fq__sting .ph{width:100%;height:100%;aspect-ratio:auto}
  .fq__sting p{font:500 clamp(32px,4.6vw,42px)/1.15 'Oswald',sans-serif;letter-spacing:.02em}
  /* how */
  .how__head h2{font-size:clamp(72px,10.4vw,100px)}
  .how__head .copy{font-size:21px}
  .bpm-demo figcaption{font-size:34px}
  .how__series h3{font-size:clamp(56px,8vw,74px)}
  .how__series .copy{font-size:20px}
  .how__result{font-size:clamp(48px,7vw,66px)}
  .how__poly h3{font-size:clamp(48px,7vw,64px)}
  .how__poly h3 .devil{font-size:.5em}
  .how__poly .copy{font-size:20px}
  .bpm-alphabet__letter{font-size:17px}
  /* another thousand */
  .route-pre .route__rhetoric{grid-template-columns:clamp(200px,30vw,260px) 1fr;gap:40px}
  .route-pre .route__rhetoric .ph{width:100%}
  .route__rhetoric .q,.route__rhetoric .a{font-size:clamp(50px,7.4vw,70px)}
  /* route */
  .route__head h2{font-size:clamp(52px,7.6vw,72px)}
  .route-stage{grid-template-columns:minmax(0,1fr) auto;gap:36px}
  .route-steps li b{font-size:clamp(26px,3.6vw,34px)}
  /* see it */
  .book{grid-template-columns:1fr;gap:44px}
  .book h3{font-size:clamp(72px,11vw,104px)}
  .book__copy{font-size:24px}
  .book__anti .pg{width:60px;height:60px}
  .book__anywhere p{font-size:clamp(34px,4.8vw,44px)}
  .book__scene{max-width:none}
  .book__scene .ph{aspect-ratio:16/11}
  .book__scene .ph img{object-position:60% 25%}
  /* more inside */
  .more h2{font-size:clamp(72px,11vw,104px)}
  .icourse__rt>span{font-size:30px}
  .icourse__rt strong{font-size:52px}
  .icourse summary{font-size:32px}
  /* reviews */
  .review{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px}
  .review .ph{max-width:none}
  .review__card blockquote{font-size:clamp(30px,4.2vw,40px)}
  /* subscription + final */
  .sub__head h2{font-size:clamp(56px,8vw,76px)}
  .final__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);min-height:560px}
  .final__text{padding:80px 0}
  .final h2{font-size:clamp(60px,8.6vw,82px)}
  .final__photo{height:auto;margin:0 calc(var(--gutter)*-1) 0 0}
  .final__actions{flex-direction:column;align-items:flex-start;gap:20px}
}
@media(min-width:701px) and (max-width:860px){
  .route-stage{grid-template-columns:1fr;justify-items:center}
  .route-stage>div:first-child{order:2;width:100%}
}

/* ===================== v8: one card format for the four-questions tiles at every width ===================== */
.fq .fq__tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.fq .fq__tile{position:relative;container-type:inline-size;border:1px solid #232529;border-radius:10px;background:#000;overflow:hidden}
.fq .fq__tile .art{margin:0;aspect-ratio:1.32;border-radius:0;background:#000}
.fq .fq__tile .art img{object-position:50% 0}
.fq .fq__idx{position:absolute;z-index:2;left:5cqw;top:4cqw;padding:0;font:500 6cqw/1 var(--cond);color:#d7d8da;text-shadow:0 1px 4px #000}
.fq .fq__tile figcaption{padding:4.5cqw 5cqw 5.5cqw;background:#000}
.fq .fq__tile h3{font:500 8cqw/1.1 'Oswald',sans-serif;letter-spacing:.01em;white-space:nowrap}
.fq .fq__tile p{margin-top:1.2cqw;font-size:max(11px,5.6cqw);line-height:1.25}
@media(max-width:599px){.fq .fq__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* result line: more air, plain divider */
.how .how__result{margin-top:clamp(72px,9vw,130px);padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(40px,5vw,72px)}
.how .how__result::after{display:none}
.how .how__poly{margin-top:clamp(40px,5vw,72px)}

/* see-it block on desktop: compact, two equal columns, photo = text height */
@media(min-width:1024px){
  .book{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch;max-width:1100px}
  .book h3{font-size:clamp(56px,4.6vw,72px)}
  .book__copy{margin-top:16px;font-size:20px}
  .book__anti{margin-top:26px}
  .book__anti .pg{width:48px;height:48px}
  .book__anti figure,.book__places li{gap:12px}
  .book__anti figcaption,.book__places span{font-size:13px;letter-spacing:.16em}
  .book__anywhere{margin-top:26px;padding-top:26px}
  .book__anywhere p{font-size:clamp(26px,2.2vw,32px)}
  .book__places{margin-top:22px}
  .book__places .pg{width:36px;height:36px}
  .book__scene{display:flex}
  .book__scene .ph{flex:1;aspect-ratio:auto;min-height:100%}
  .book__scene .ph img{object-position:62% 30%}
}

/* ===================== v9: subscription — whole product, early access pricing ===================== */
.sub2__head{max-width:980px;margin:0 auto;text-align:center}
.sub2__head .kicker::after{content:'';background:var(--red)}
.sub2__head h2{font-size:clamp(48px,6.4vw,96px);line-height:.92;color:var(--text)}
.sub2__head h2 .l{display:block}
.sub2__lead{margin:22px 0 0;font:400 clamp(18px,1.6vw,22px)/1.4 var(--body);color:#b9bbbd}
.sub2__list{max-width:900px;margin:56px auto 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.sub2__list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.sub2__no{font:700 clamp(24px,2.3vw,34px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--text)}
.sub2__list p{margin:0;font:400 17px/1.5 var(--body);color:#a9abae}
.sub2__list li.is-own .sub2__no{color:var(--red-hi)}
.sub2__list li.is-own p{color:var(--text)}
.sub2__grow{max-width:900px;margin:28px auto 0;padding:20px 24px;border-left:3px solid var(--red);background:linear-gradient(90deg,rgba(227,32,47,.12),transparent 70%)}
.sub2__grow b{display:block;font:700 clamp(22px,2vw,28px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--red-hi)}
.sub2__grow p{margin:8px 0 0;font:400 16px/1.5 var(--body);color:#c9cacc}
.sub2__offer{max-width:900px;margin:64px auto 0}
.sub2__early{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin:0 0 22px;text-align:center}
.sub2__early b{padding:6px 12px;border:1px solid var(--red);border-radius:2px;font:500 14px/1 'Oswald',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(227,32,47,.14)}
.sub2__early>span:last-child{font:500 16px/1.3 var(--body);color:var(--text)}
.sub2__dot{width:9px;height:9px;border-radius:50%;background:var(--red-hi);box-shadow:0 0 12px var(--red);animation:dot-blink 1.4s steps(1,end) infinite}
.sub2__plans{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.plan{position:relative;padding:26px 26px 24px;border:1px solid #2a2c31;border-radius:12px;background:#0e0f12}
.plan--best{border-color:var(--red);background:linear-gradient(180deg,rgba(227,32,47,.14),#0e0f12 65%);box-shadow:0 18px 50px rgba(227,32,47,.16)}
.plan h3{margin:0;font:500 13px/1 var(--cond);letter-spacing:.24em;text-transform:uppercase;color:#a3a6a9}
.plan__tag{position:absolute;top:-11px;right:20px;padding:5px 10px;background:var(--red);color:#fff;font:500 12px/1 'Oswald',sans-serif;letter-spacing:.14em;text-transform:uppercase}
.plan__old{display:flex;align-items:center;gap:10px;margin:18px 0 4px}
.plan__old s{position:relative;font:400 20px/1 var(--display);color:#6f7378;text-decoration:none}
.plan__old s::after{content:'';position:absolute;left:-3px;right:-3px;top:52%;height:2px;background:var(--red-hi);transform:rotate(-8deg)}
.plan__old i{font:600 12px/1 var(--body);font-style:normal;color:var(--red-hi);padding:3px 6px;border:1px solid rgba(239,43,59,.5);border-radius:2px}
.plan__price{margin:0;font:400 clamp(52px,5vw,72px)/1 var(--display);letter-spacing:.005em;color:var(--text)}
.plan__price>b,.cmp__price>b{font:inherit}
.landing-currency{display:flex;justify-content:center;gap:3px;width:max-content;margin:0 auto 22px;padding:3px;border:1px solid #42464b;border-radius:3px;background:#101215}
.landing-currency button{min-width:64px;min-height:34px;padding:7px 14px;border:0;border-radius:1px;background:transparent;color:#969da5;font:500 12px/1 var(--mono);letter-spacing:.08em;cursor:pointer}
.landing-currency button[aria-pressed="true"]{background:#e4e7e9;color:#111519}
.landing-currency button:disabled{opacity:.35;cursor:default}
.landing-currency[hidden],[data-price-error][hidden],[data-year-comparison][hidden]{display:none}
html[lang="ru"] .plan__price{font-weight:700}
.plan__price span{margin-left:8px;font:400 16px var(--body);color:#a3a6a9;letter-spacing:0}
.plan__note{margin:12px 0 0;font:400 14px/1.45 var(--body);color:#9a9da1}
.sub2__cta{margin-top:28px;text-align:center}
.sub2__terms{max-width:60ch;margin:16px auto 0;text-align:center;font:400 13px/1.55 var(--body);color:var(--muted-2)}
.sub2 .refund{margin-top:40px}
@media(max-width:700px){
  .sub2__head h2{font-size:12vw}
  html[lang="ru"] .sub2__head h2{font-size:10.6vw}
  .sub2__lead{margin-top:14px;font-size:16.5px}
  .sub2__list{margin-top:34px}
  .sub2__list li{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .sub2__no{font-size:6.2vw}
  .sub2__list p{font-size:15px;line-height:1.4}
  .sub2__grow{margin-top:20px;padding:14px 16px}
  .sub2__grow b{font-size:6vw}
  .sub2__grow p{font-size:14.5px}
  .sub2__offer{margin-top:40px}
  .sub2__early{gap:8px 10px;margin-bottom:18px}
  .sub2__early b{font-size:12px}
  .sub2__early>span:last-child{flex-basis:100%;font-size:14.5px}
  .sub2__plans{grid-template-columns:1fr;gap:14px}
  .plan{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:12px;padding:16px 16px 14px}
  .plan h3{grid-column:1/-1}
  .plan__old{grid-column:2;grid-row:2;justify-content:flex-end;margin:12px 0 0}
  .plan__price{grid-column:1;grid-row:2;margin-top:12px;font-size:12vw}
  .plan__price span{font-size:14px}
  .plan__note{grid-column:1/-1;margin-top:8px;font-size:13px}
  .plan__old s{font-size:17px}
  .plan__tag{top:-10px;right:14px;font-size:11px}
  .sub2__cta .btn{width:100%}
}

/* v9.1: compact subscription on phones */
@media(max-width:700px){
  .sub2.sec{padding:44px 0 40px}
  .sub2__head .kicker{margin-bottom:14px}
  .sub2__head h2{font-size:8.6vw}
  html[lang="ru"] .sub2__head h2{font-size:9.6vw}
  .sub2__lead{margin-top:10px;font-size:14.5px}
  .sub2__list{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:22px;border-top:0}
  .sub2__list li{display:block;padding:11px 10px 12px 0;border-bottom:1px solid var(--line);border-top:0}
  .sub2__list li:nth-child(odd){padding-right:12px;border-right:1px solid var(--line)}
  .sub2__list li:nth-child(even){padding-left:12px}
  .sub2__list li:nth-child(-n+2){border-top:1px solid var(--line)}
  .sub2__no{display:block;font-size:4.4vw;line-height:1.05}
  .sub2__list p{margin-top:5px;font-size:12.5px;line-height:1.35}
  .sub2__grow{margin-top:14px;padding:10px 12px}
  .sub2__grow b{font-size:4.6vw}
  .sub2__grow p{margin-top:4px;font-size:12.5px;line-height:1.35}
  .sub2__offer{margin-top:26px}
  .sub2__early{flex-wrap:nowrap;gap:8px;margin-bottom:12px}
  .sub2__early b{flex:0 0 auto;padding:4px 8px;font-size:11px;letter-spacing:.14em}
  .sub2__early>span:last-child{flex-basis:auto;font-size:12.5px;text-align:left}
  .sub2__dot{flex:0 0 7px;width:7px;height:7px}
  .sub2__plans{grid-template-columns:1fr 1fr;gap:10px}
  .plan{display:block;padding:12px 12px 12px}
  .plan h3{font-size:11px;letter-spacing:.2em}
  .plan__old{margin:10px 0 2px;gap:6px}
  .plan__old s{font-size:15px}
  .plan__old i{font-size:10.5px;padding:2px 4px}
  .plan__price{margin-top:0;font-size:9.4vw}
  .plan__price span{display:block;margin:4px 0 0;font-size:12px}
  .plan__note{margin-top:6px;font-size:11.5px;line-height:1.35}
  .plan__tag{top:-9px;right:10px;padding:4px 7px;font-size:10px}
  .sub2__cta{margin-top:16px}
  .sub2__terms{margin-top:10px;font-size:11.5px;line-height:1.45}
  .sub2 .refund{flex-direction:row;gap:12px;margin-top:20px;padding:12px 14px;text-align:left;justify-content:flex-start}
  .sub2 .refund img{width:40px;height:40px;flex-basis:40px}
  .sub2 .refund h3{font-size:15px;margin-bottom:2px}
  .sub2 .refund .tlink{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.ds-quote__bubble cite::before,.sub2__dot{animation:none}}

/* Hero uses Independence's Inter weights, tracking and mobile type scale. */
html[lang] .hero h1.h-display{font-family:'Baza Hero Inter',Inter,Arial,sans-serif;font-size:clamp(32px,4vw,54px);font-weight:900;line-height:1.06;letter-spacing:-.06em;font-synthesis:none}
.hero{--hero-title-gap:42px}
.hero .answer{margin-top:30px;margin-bottom:14px;font-family:'Baza Hero Inter',Inter,Arial,sans-serif;font-size:clamp(24px,2.2vw,34px);font-weight:600;line-height:1.25;letter-spacing:-.035em}
.hero .answer strong{font-weight:900}
.hero .detail{max-width:36ch;line-height:1.55}
@media(max-width:1000px){
  .hero__text{padding-bottom:24px}
  .hero{--hero-title-gap:36px}
}
@media(max-width:700px){
  .hero{--hero-title-gap:34px;padding-bottom:56px}
  .hero__photo{height:clamp(300px,102vw,430px);max-height:none}
  .hero__text{margin-top:-72px;padding-bottom:0}
  .hero .kicker{font-size:11px;line-height:1.5;letter-spacing:.16em}
  .hero .lockup{margin-top:18px;gap:12px}
  .hero .lockup__drumscammer{width:min(80vw,340px)}
  .lockup__bpm{font-size:21px;line-height:24px}
  html[lang] .hero h1.h-display{font-size:clamp(24px,8vw,44px);line-height:1.08}
  .hero .answer{margin-top:28px;margin-bottom:12px;font-size:25px;line-height:1.25}
  .hero .detail{max-width:34ch;font-size:16px;line-height:1.55}
  .hero .video{margin-top:32px}
  .hero__action{margin-top:24px}
}
/* Keep the complete English question on two balanced lines at every width. */
html[lang="en"] .hero h1.h-display{font-size:min(46px,3.8vw)}
html[lang="en"] .hero h1 .l{white-space:nowrap}
@media(max-width:1000px){html[lang="en"] .hero h1.h-display{font-size:min(46px,7vw)}}
@media(max-width:700px){html[lang="en"] .hero h1.h-display{font-size:min(44px,calc(7.4vw - 2.7px))}}
@supports(container-type:inline-size){
  html[lang="en"] .hero__text{container-type:inline-size}
  html[lang="en"] .hero h1.h-display{font-size:min(54px,7.4cqi)}
}


/* Real app CSS (PracticeJourneyPage + PracticeCompletionScreen), used for the phone screens */
@property --guided-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #97d8eb;
}
@property --guided-secondary {
  syntax: '<color>';
  inherits: true;
  initial-value: #81e8f5;
}
@property --guided-tint {
  syntax: '<color>';
  inherits: true;
  initial-value: #0a1114;
}

.journey-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--bpm-line); margin-bottom: 28px; }
.journey-tabs a { padding: 0 0 13px; color: var(--bpm-gray); text-decoration: none; font-size: 12px; }
.journey-tabs a[aria-current="page"] { color: var(--bpm-brand); border-bottom: 2px solid currentColor; }
.journey-overline { font: 10px var(--bpm-mono); letter-spacing: .14em; color: var(--bpm-brand); text-transform: uppercase; }
.journey-intro { color: var(--bpm-light); font-size: 13px; line-height: 1.7; }
.journey-meter { height: 3px; background: var(--bpm-line); overflow: hidden; }
.journey-meter > span { display: block; height: 100%; background: var(--bpm-brand);  }
.journey-button { border: 1px solid var(--bpm-line-light); background: none; color: var(--bpm-white); padding: 12px 16px; font: 12px var(--bpm-body); cursor: pointer; }
.journey-button--primary { background: var(--bpm-brand); border-color: var(--bpm-brand); color: var(--bpm-black); font-weight: 600; margin-top: 20px; min-height: 46px; width: 100%; }
.journey-button:disabled { opacity: .5; cursor: wait; }
.journey-button:focus-visible, .journey-tabs a:focus-visible, .journey-contents summary:focus-visible { outline: 2px solid var(--bpm-brand); outline-offset: 4px; }
.journey-block-progress { margin: 22px 0; font: 11px var(--bpm-mono); color: var(--bpm-light); }
.journey-block-progress .journey-meter { margin-top: 12px; }
.journey-mission { padding: 24px 20px; background: var(--bpm-panel); border: 1px solid var(--bpm-line-light); }
.journey-mission-path { font-size: 12px; color: var(--bpm-light); line-height: 1.7; overflow-wrap: anywhere; }
.journey-mission-meta { display: flex; gap: 16px; font: 11px var(--bpm-mono); color: var(--bpm-gray); }
.journey-aspects { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.journey-aspects > div { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-size: 11px; }
.journey-aspects strong { font: 10px var(--bpm-mono); color: var(--bpm-gray); }
.journey-aspects .journey-meter { width: 100%; }
.journey-success { padding: 22px 0; color: var(--bpm-brand); font-size: 13px; line-height: 1.6; }
.journey-success h2 { font-size: 22px; font-weight: 500; }
.journey-success p { color: var(--bpm-light); }
.journey-error { border-left: 2px solid var(--bpm-red); padding: 0 0 0 16px; margin-bottom: 24px; font-size: 13px; line-height: 1.6; }
.journey-contents { margin-top: 28px; border-top: 1px solid var(--bpm-line); padding-top: 18px; }
.journey-contents summary { font-size: 12px; cursor: pointer; }
.journey-contents ol { list-style: none; padding: 0; }
.journey-contents li { padding: 14px 0; border-bottom: 1px solid var(--bpm-line); display: flex; align-items: center; gap: 12px; }
.journey-contents li > span { display: flex; gap: 12px; flex: 1; min-width: 0; font-size: 12px; }
.journey-contents li > span > strong { font: 10px var(--bpm-mono); min-width: 20px; color: var(--bpm-gray); }
.journey-contents small { display: block; font-size: 10px; color: var(--bpm-gray); margin-top: 6px; line-height: 1.5; overflow-wrap: anywhere; }
.journey-contents .journey-session--done > strong { color: var(--bpm-brand); }
.journey-replay { background: none; border: none; color: var(--bpm-light); cursor: pointer; font-size: 10px; padding: 10px 0; }
@media (prefers-reduced-motion: reduce) { .journey-meter > span {  } }
.practice-journey, .guided-release {
  --guided-paper: color-mix(in srgb, var(--guided-accent) 28%, #dbe4e7);
  --guided-muted: color-mix(in srgb, var(--guided-accent) 36%, #38454c);
  --guided-panel: var(--guided-tint);
  --bpm-brand: var(--guided-accent);
  --bpm-panel: var(--guided-panel);
  --bpm-white: var(--guided-paper);
  --bpm-gray: var(--guided-muted);
  --bpm-line: color-mix(in srgb, var(--guided-accent) 14%, transparent);
  --bpm-line-light: color-mix(in srgb, var(--guided-accent) 28%, transparent);
}
.practice-journey {
  --guided-accent: #97d8eb;
  --guided-secondary: #81e8f5;
  --guided-tint: #0a1114;
  --guided-paper: #97d8eb;
  --guided-muted: #6a8a96;
  background: var(--guided-panel);
  color: var(--guided-paper);
}
.practice-journey .journey-tabs { margin-bottom: 24px; }
.practice-journey .bpm-db__brand { color: #97d8eb; }
.practice-journey .bpm-db__brand em { color: #8eeb75; }
.journey-resume { padding: 0; }
.guided-current { display: flex; align-items: center; gap: 13px; width: 100%; margin: 0 0 20px; padding: 12px; text-align: left; background: var(--guided-panel); border: 1px solid color-mix(in srgb, var(--guided-accent) 22%, transparent); color: var(--guided-paper); font-family: var(--bpm-body); }
.guided-current__cover { width: 68px; height: 80px; flex-shrink: 0; object-fit: cover; object-position: top; background: #050505; }
.guided-current__body { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 7px; }
.guided-current__eyebrow { font: 8px var(--bpm-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--guided-muted); }
.guided-current__title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.guided-current__side { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 23px; height: 23px; border: 1px solid currentColor; color: #81e8f5; font: 11px var(--bpm-mono); }
.guided-current__side--r { color: var(--trainer-track-r, #eca655); }
.guided-current__side--l { color: var(--trainer-track-l, #81e8f5); }
.guided-current__path { font-size: 10px; color: var(--guided-muted); line-height: 1.5; overflow-wrap: anywhere; }
.guided-play-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #97d8eb; background: #97d8eb; color: #0a1114; font: 600 12px var(--bpm-body); cursor: pointer; }
.guided-current__play { min-height: 44px; padding: 10px 16px; }
.guided-play-button:hover:not(:disabled) { background: #b2e3f0; border-color: #b2e3f0; }
.guided-play-button:focus-visible { outline: 2px solid #97d8eb; outline-offset: 3px; }
.guided-play-button:disabled { opacity: .6; cursor: wait; }
.journey-mission h2 { font-size: 23px; font-weight: 500; margin: 12px 0; }
.journey-mission h2 > span { color: var(--bpm-brand); }
.guided-carousel { min-width: 0; }
.guided-carousel__position { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; color: var(--guided-muted); font: 9px var(--bpm-mono); }
.guided-carousel__dots { display: flex; gap: 5px; }
.guided-carousel__dots i { width: 16px; height: 2px; background: color-mix(in srgb, var(--guided-accent) 14%, transparent); }
.guided-carousel__dots .is-current { background: var(--guided-accent); }
.guided-carousel__dots .is-current.is-locked { background: var(--guided-muted); opacity: .5; }
.guided-carousel__slides { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.guided-carousel__slides:focus-visible { outline: 1px solid var(--guided-accent); outline-offset: -1px; }
.guided-carousel__slides::-webkit-scrollbar { display: none; }
.guided-carousel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.guided-cover {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  aspect-ratio: 1.45;
  overflow: hidden;
  border: 1px solid var(--trainer-line-light, #2a3a42);
  background: var(--guided-panel);
  color: var(--guided-paper);
}
.guided-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 72% 32%, color-mix(in srgb, var(--guided-accent) 11%, transparent), transparent 65%),
    radial-gradient(ellipse at 24% 70%, color-mix(in srgb, var(--guided-secondary) 6%, transparent), transparent 55%);
  
  pointer-events: none;
}
.guided-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--guided-panel) 0%, transparent) 36%, color-mix(in srgb, var(--guided-panel) 25%, transparent) 62%, color-mix(in srgb, var(--guided-panel) 92%, transparent) 100%);
  pointer-events: none;
}
.guided-cover__grid {
  position: absolute;
  inset: -55%;
  background-image: linear-gradient(color-mix(in srgb, var(--guided-accent) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--guided-accent) 7%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: rotate(-14deg);
  
  pointer-events: none;
}
.guided-cover__art { position: absolute; inset: 0; opacity: .66; pointer-events: none; }
.guided-cover__instrument {
  position: absolute;
  width: var(--art-width);
  height: var(--art-height);
  left: var(--art-x);
  top: var(--art-y);
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(var(--art-rotation));
  filter: var(--art-color-filter, invert(0)) drop-shadow(0 12px 12px #0009) drop-shadow(0 0 18px color-mix(in srgb, var(--guided-accent) 7%, transparent));
  pointer-events: none;
  user-select: none;
}
.guided-cover--inverted_doubles { --art-color-filter: invert(1); }
.guided-cover__art {  }
@media (hover: hover) {
  .guided-cover:hover .guided-cover__art { transform: translateY(-3px); }
}
.guided-cover__placeholder { position: absolute; width: 68%; height: 94%; top: -7%; right: -2%; color: color-mix(in srgb, var(--guided-accent) 33%, transparent); transform: rotate(-9deg); }
.guided-cover__scanlines {
  position: absolute;
  z-index: 1;
  inset: -4px 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #00000024 3px 4px);
  opacity: .55;
  
  pointer-events: none;
}
.guided-cover__type { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px; }
.guided-cover__meta { position: absolute; z-index: 2; top: 16px; left: 20px; right: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.guided-cover__time { padding: 4px 0; color: var(--guided-paper); font: 9px/1.4 var(--bpm-mono); letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 8px var(--guided-panel); }
.guided-cover__sticking { position: relative; display: flex; width: fit-content; gap: 5px; margin-top: 12px; }
.guided-cover__sticking::before { content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--guided-accent) 16%, transparent); }
.guided-cover__stroke { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 22px; font: 11px/1 var(--bpm-mono); }
.guided-cover__stroke--r { color: var(--trainer-track-r, #eca655); }
.guided-cover__stroke--l { color: var(--trainer-track-l, #81e8f5); }
.guided-cover__stroke--group { margin-left: 7px; }
.guided-cover__stroke i { display: block; width: 5px; height: 5px; background: currentColor; box-shadow: 0 0 8px color-mix(in srgb, var(--guided-accent) 8%, transparent); }
.guided-cover .guided-cover__heading {
  margin: 0;
  max-width: 100%;
  color: inherit;
  font: 700 clamp(34px, 10vw, 62px)/.92 var(--trainer-body, var(--bpm-body));
  font-size: clamp(30px, 11cqw, 62px);
  text-transform: uppercase;
  letter-spacing: -.065em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 16px var(--guided-panel);
}
.guided-cover--locked { color: var(--guided-muted); border-color: var(--trainer-line, #1e2a30); }
.guided-cover--locked .guided-cover__art { opacity: .36; filter: saturate(.55); }
.guided-cover--locked .guided-cover__sticking { opacity: .4; }
.guided-cover--locked .guided-cover__stroke { color: var(--guided-muted); }
.guided-cover__lock { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; margin-left: auto; border: 1px solid color-mix(in srgb, var(--guided-accent) 22%, transparent); background: color-mix(in srgb, var(--guided-panel) 80%, transparent); color: var(--guided-paper); }
.guided-lock { width: 20px; height: 20px; flex-shrink: 0; }
.guided-cover--still::before, .guided-cover--still .guided-cover__grid, .guided-cover--still .guided-cover__scanlines { animation-play-state: paused; }
@keyframes guided-grid-drift {
  from { transform: rotate(-14deg) translate3d(0, 0, 0); }
  to { transform: rotate(-14deg) translate3d(48px, 48px, 0); }
}
@keyframes guided-scanlines {
  from { transform: translateY(0); }
  to { transform: translateY(4px); }
}
@keyframes guided-cover-light {
  from { opacity: .45; }
  to { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  .practice-journey {  }
  .guided-cover::before, .guided-cover__grid, .guided-cover__scanlines {  }
  .guided-cover .guided-cover__art {  }
  .guided-cover:hover .guided-cover__art { transform: none; }
}
.guided-letter-blocks { display: grid; gap: 6px; margin-top: 10px; padding: 3px; }
.guided-letter-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px; border: 1px solid transparent; background: transparent; color: var(--guided-paper); text-align: left; cursor: pointer; }
.guided-letter-row:disabled { cursor: default; }
.guided-letter-row:disabled:not(.guided-letter-row--current):not(.guided-letter-row--done) .guided-letters { opacity: .45; }
.guided-letter-row:hover:not(:disabled), .guided-letter-row--selected { background: color-mix(in srgb, var(--guided-accent) 3%, transparent); }
.guided-letter-row:focus-visible { outline: 2px solid var(--guided-accent); outline-offset: 1px; }
.guided-letter-row--current, .guided-letter-row--current:hover:not(:disabled) { background: color-mix(in srgb, var(--guided-accent) 5%, transparent); }
.guided-letter-row--current .guided-letter { color: var(--guided-accent); }
.guided-letter-row__status { display: grid; place-items: center; flex: 0 0 22px; color: var(--guided-muted); font-size: 13px; }
.guided-letter-row--current .guided-letter-row__status, .guided-letter-row--done .guided-letter-row__status { color: var(--guided-accent); }
.guided-letters { display: grid; flex: 1; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.guided-letter { position: relative; display: flex; flex-direction: column; align-items: center; padding: 5px 8px 7px; color: var(--guided-paper); border: 1px solid color-mix(in srgb, var(--guided-accent) 16%, transparent); background: color-mix(in srgb, var(--guided-accent) 3%, var(--guided-panel)); min-width: 0; }
.guided-letter:nth-child(even) { background: color-mix(in srgb, var(--guided-accent) 6%, var(--guided-panel)); }
.guided-letter > strong { font: 400 clamp(24px, 7vw, 32px)/1 'Archivo Black', sans-serif; letter-spacing: -.06em; margin: 0 0 5px; }
.guided-letter__rhythm { display: flex; width: 100%; gap: 3px; }
.guided-letter__rhythm > i { flex: 1; height: 5px; border: 1px solid color-mix(in srgb, var(--guided-accent) 26%, transparent); }
.guided-letter__rhythm > .is-hit { background: var(--guided-accent); border-color: var(--guided-accent); }
.guided-review { max-height: 420px; overflow-y: auto; overscroll-behavior-y: contain; padding: 4px 8px 10px; border-bottom: 1px solid var(--bpm-line); color: var(--guided-paper); font-size: 12px; }
.guided-review__tree { list-style: none; margin: 0; padding: 0; }
.guided-review__tree .guided-review__tree { margin: 0 0 4px 12px; padding-left: 10px; border-left: 1px solid var(--bpm-line); }
.guided-review__branch-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--bpm-line); }
.guided-review__toggle, .guided-review__label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; }
.guided-review__toggle { min-height: 36px; cursor: pointer; }
.guided-review__chevron { flex: 0 0 8px; color: var(--guided-muted); font: 12px var(--bpm-mono); }
.guided-review__icon { flex: 0 0 26px; width: 26px; height: 28px; object-fit: contain; }
.guided-review__icon--cover { object-fit: cover; border: 1px solid var(--bpm-line); }
.guided-review__name { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.guided-review__node--layer > .guided-review__branch-row .guided-review__name { font-weight: 600; }
.guided-review__play { min-height: 36px; padding: 8px 10px; font-size: 10px; }
.guided-review button:focus-visible { outline: 2px solid #97d8eb; outline-offset: 2px; }
.guided-map { position: relative; margin-top: 30px; padding: 18px; border: 1px dashed color-mix(in srgb, var(--guided-accent) 15%, transparent); background: repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--guided-accent) 1%, transparent) 10px 11px); }
.guided-map__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.guided-map h2 { margin: 0; font-size: 18px; font-weight: 500; color: var(--guided-paper); }
.guided-map__top > span { font: 7px var(--bpm-mono); letter-spacing: .08em; color: var(--guided-muted); border: 1px solid color-mix(in srgb, var(--guided-accent) 15%, transparent); padding: 5px 6px; }
.guided-map__draft { display: flex; align-items: center; width: 65%; height: 35px; margin-top: 7px; opacity: .4; }
.guided-map__draft > i { width: 9px; height: 9px; border: 1px solid var(--guided-paper); transform: rotate(45deg); }
.guided-map__draft > span { flex: 1; border-top: 1px dashed var(--guided-paper); margin: 0 5px; }
.guided-map p { margin: 6px 0 0; color: var(--guided-muted); font: 9px var(--bpm-mono); letter-spacing: .04em; }
.guided-map__arrow { position: absolute; bottom: 16px; right: 18px; font-size: 24px; color: var(--guided-muted); }
.practice-complete {
  --pc-bg: var(--guided-tint, #0a1114);
  --pc-ink: color-mix(in srgb, var(--guided-accent, #97d8eb) 28%, #dbe4e7);
  --pc-accent: var(--guided-accent, #97d8eb);
  --pc-muted: #84959c;
  --pc-line: color-mix(in srgb, var(--pc-accent) 16%, transparent);
  --pc-top-space: max(20px, env(safe-area-inset-top, 0px));
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--pc-top-space) 0 0;
  background: rgb(5 9 11 / .66);
  color: var(--pc-ink);
  font-family: 'Space Grotesk', Arial, sans-serif;
}
.practice-complete *, .practice-complete *::before, .practice-complete *::after { box-sizing: border-box; }
.pc-panel {
  width: 100%;
  max-width: 470px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--pc-line) var(--pc-bg);
  background: var(--pc-bg);
  border: 1px solid var(--pc-line);
  border-bottom: 0;
  padding: 23px 22px 0;
  outline: none;
  
}
.pc-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 18px;
  color: var(--pc-muted);
  font: 400 10px/1.5 'DM Mono', Arial, sans-serif;
}
.pc-status__mark { color: #8eeb75; font-size: 12px; }
.practice-complete--error .pc-status, .practice-complete--error .pc-status__mark { color: #eb6b75; }
.pc-context { display: flex; align-items: center; gap: 13px; margin: 0 0 20px; }
.pc-context__body { flex: 1; min-width: 0; }
.pc-context__body > strong { display: block; font-size: 20px; font-weight: 500; letter-spacing: -.025em; overflow-wrap: anywhere; }
.practice-complete--aspect .pc-context__body > strong { font-size: 25px; letter-spacing: -.045em; }
.pc-context__cover { width: 62px; height: 76px; object-fit: cover; object-position: top; flex-shrink: 0; background: #050505; }
.pc-context-path { margin: 5px 0 0; color: var(--pc-muted); font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.pc-side-tag { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; flex-shrink: 0; border: 1px solid currentColor; color: #eca655; font: 11px 'DM Mono', monospace; }
.pc-side-tag--l { color: #81e8f5; }
.pc-letters { display: grid; gap: 6px; margin-bottom: 21px; }
.pc-letter { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 8px 9px; border: 1px solid var(--pc-line); background: color-mix(in srgb, var(--pc-accent) 3%, var(--pc-bg)); color: var(--pc-muted); opacity: .55; }
.pc-letter:nth-child(even) { background: color-mix(in srgb, var(--pc-accent) 6%, var(--pc-bg)); }
.pc-letter strong { font: 400 32px/1 'Archivo Black', 'Arial Black', sans-serif; letter-spacing: -.06em; }
.pc-letter.is-complete { color: var(--pc-ink); opacity: 1; }
.pc-letter.is-active { border-color: var(--pc-accent); color: var(--pc-accent); opacity: 1;  }
.pc-letter__rhythm { display: flex; gap: 3px; width: 100%; margin-top: 8px; }
.pc-letter__rhythm > i { flex: 1; height: 4px; border: 1px solid color-mix(in srgb, var(--pc-accent) 26%, transparent); }
.pc-letter__rhythm > .is-hit { background: currentColor; border-color: currentColor; }
.pc-letter__check { position: absolute; top: 3px; right: 5px; color: #8eeb75; font: 9px 'DM Mono', monospace; }
.pc-side-transfer { --pc-arrow-start: -3px; --pc-arrow-end: 3px; display: flex; align-items: center; justify-content: center; gap: 28px; margin: 20px 0 24px; font: 400 56px/1 'DM Mono', monospace; }
.pc-side-transfer--left { flex-direction: row-reverse; --pc-arrow-start: 3px; --pc-arrow-end: -3px; }
.pc-side-transfer__from { color: var(--pc-from-side); opacity: .45;  }
.pc-side-transfer__to { color: var(--pc-to-side);  }
.pc-side-transfer__arrow { color: var(--pc-to-side); font-size: 22px;  }
.pc-context-path--side { margin: 0 0 18px; }
.practice-complete--side .pc-letter, .practice-complete--complete .pc-letter { padding-block: 8px; }
.practice-complete--side .pc-letter strong, .practice-complete--complete .pc-letter strong { font-size: 26px; }
.pc-block-title { margin: 0 0 17px; font-size: 24px; font-weight: 500; letter-spacing: -.035em; line-height: 1.25; overflow-wrap: anywhere; }
.pc-block-choices:not(:empty) { border-top: 1px solid var(--pc-line); }
.pc-block-choice { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 67px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--pc-line); background: transparent; color: var(--pc-ink); text-align: left; font-family: inherit; cursor: pointer; }
.pc-block-choice > img { width: 39px; height: 43px; object-fit: contain; opacity: .7; }
.pc-block-choice > span:nth-child(2) { flex: 1; min-width: 0; }
.pc-block-choice strong { display: block; font-size: 14px; font-weight: 400; overflow-wrap: anywhere; }
.pc-block-choice small { display: block; margin-top: 5px; font: 10px/1.5 'DM Mono', monospace; color: var(--pc-muted); }
.pc-block-choice > span:last-child { color: #97d8eb; font-size: 20px; }
.pc-continuation-status, .pc-continuation-error { font-size: 11px; line-height: 1.6; color: var(--pc-muted); }
.pc-continuation-error { color: #eb6b75; }
.pc-continuation-error p { margin: 12px 0 6px; }
.pc-continuation-error button { min-height: 36px; border: 1px solid var(--pc-line); background: transparent; color: var(--pc-ink); padding: 7px 12px; font: inherit; cursor: pointer; }
.pc-footer { position: sticky; bottom: 0; z-index: 1; padding: 0 0 calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--pc-bg); }
.pc-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid #97d8eb; background: #97d8eb; color: #0a1114; text-align: left; font: 600 12px 'Space Grotesk', Arial, sans-serif; cursor: pointer; }
.pc-action > span:last-child { font: 18px/1 'DM Mono', monospace; }
.pc-exit { display: block; min-height: 36px; margin: 8px auto 0; padding: 8px 12px; border: 0; background: transparent; color: var(--pc-muted); font: 11px 'Space Grotesk', Arial, sans-serif; cursor: pointer; }
.pc-panel button:disabled { opacity: .55; cursor: wait; }
.pc-panel button:focus-visible { outline: 2px solid #97d8eb; outline-offset: 3px; }
.pc-action:hover:not(:disabled) { background: #b2e3f0; }
.pc-block-choice:hover:not(:disabled) strong, .pc-exit:hover:not(:disabled) { color: #97d8eb; }
html.trainer-tg-fullscreen .practice-complete { --pc-top-space: calc(108px + var(--trainer-tg-extra-top, 0px)); }
@keyframes pc-sheet-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pc-letter-active { from { border-color: var(--pc-line); } to { border-color: var(--pc-accent); } }
/* 430ms transfer, ~1.5s on the destination color, then a brief reset. */
@keyframes pc-side-from {
  0%, 8%, 98%, 100% { color: var(--pc-from-side); opacity: 1; }
  26%, 88% { color: var(--pc-from-side); opacity: .3; }
}
@keyframes pc-side-to {
  0%, 8%, 98%, 100% { color: var(--pc-to-side); opacity: .25; }
  26%, 88% { color: var(--pc-to-side); opacity: 1; }
}
@keyframes pc-side-arrow {
  0%, 8% { color: var(--pc-from-side); opacity: .65; transform: translateX(var(--pc-arrow-start)); }
  26%, 88% { color: var(--pc-to-side); opacity: .8; transform: translateX(var(--pc-arrow-end)); }
  94% { opacity: 0; transform: translateX(var(--pc-arrow-end)); }
  98%, 100% { color: var(--pc-from-side); opacity: .65; transform: translateX(var(--pc-arrow-start)); }
}
@media (max-width: 470px) { .pc-panel { border-left: 0; border-right: 0; padding-inline: 20px; } }
@media (prefers-reduced-motion: reduce) { .practice-complete *, .practice-complete *::before, .practice-complete *::after {   } }

.lp-native .guided-letter-row[aria-disabled] .guided-letters{opacity:.45}
.lp-native .guided-cover__scanlines{opacity:.5}

/* ===== Why Baza: four photos, four steps ===== */
.why{padding:clamp(72px,8vw,120px) 0}
.why__head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px 56px;align-items:end}
.why h2{font-size:clamp(54px,7vw,112px);font-weight:800;line-height:.9;color:#0e0e0e}
.why h2 .red{color:#d8262f}
.why__lead{max-width:30ch;margin:0 0 6px;font:600 clamp(20px,1.9vw,27px)/1.28 var(--body);letter-spacing:-.025em;color:#2a2926;text-wrap:balance}
.why__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,24px);margin:clamp(40px,4.6vw,64px) 0 0;padding:0;list-style:none}
.why__item{min-width:0}
.why__ph{aspect-ratio:4/5;border-radius:10px;box-shadow:0 18px 44px rgba(20,16,10,.18)}
.why__ph img{object-position:50% 22%}
.why__no{display:block;margin:18px 0 8px;font:500 13px/1 var(--mono);letter-spacing:.08em;color:#d8262f}
.why__item h3{margin:0;font:700 clamp(23px,2vw,29px)/1 var(--display);text-transform:uppercase;letter-spacing:.005em;color:#0e0e0e;text-wrap:balance}
.why__item p{margin:10px 0 0;font:400 15.5px/1.55 var(--body);color:var(--on-paper-muted);text-wrap:pretty}
.why__loop{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;margin-top:clamp(40px,4.6vw,64px);padding:14px clamp(22px,3vw,44px) 14px 14px;border-radius:14px;background:#0e0f12;color:var(--text)}
.why__loop-ph{width:clamp(150px,15vw,210px);aspect-ratio:4/5;border-radius:9px}
.why__loop-a{margin:0;font:700 clamp(28px,3vw,46px)/.98 var(--display);text-transform:uppercase;letter-spacing:.005em;text-wrap:balance}
.why__loop-b{margin:12px 0 0;font:400 clamp(16px,1.35vw,19px)/1.45 var(--body);color:#a3a8aa}
@media(max-width:1000px){
  .why__head{grid-template-columns:1fr;align-items:start}
  .why__list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
}
@media(max-width:700px){
  .why{padding:60px 0 64px}
  .why h2{font-size:clamp(48px,14vw,64px)}
  .why__lead{font-size:19px;max-width:none}
  .why__list{grid-template-columns:1fr;gap:0;margin-top:28px;border-top:1px solid #d6cfc2}
  .why__item{display:grid;grid-template-columns:108px minmax(0,1fr);gap:16px;align-items:start;padding:18px 0;border-bottom:1px solid #d6cfc2}
  .why__ph{border-radius:8px;box-shadow:none}
  .why__no{margin:2px 0 6px}
  .why__item h3{font-size:22px}
  .why__item p{margin-top:7px;font-size:14.5px;line-height:1.5}
  .why__loop{grid-template-columns:96px minmax(0,1fr);gap:16px;margin-top:28px;padding:12px 16px 12px 12px}
  .why__loop-ph{width:96px;border-radius:7px}
  .why__loop-a{font-size:22px}
  .why__loop-b{margin-top:8px;font-size:14.5px}
}
/* ===== Reviews: virtual columns of three, cycling ===== */
.revs{padding:clamp(64px,7vw,104px) 0}
.revs__grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(32px,4vw,64px);align-items:stretch}
.revs__side{display:flex;flex-direction:column;min-height:0}
.revs__main{min-width:0}
.revs h2{font-size:clamp(56px,6.4vw,104px);font-weight:800;line-height:.88;color:#111}
.revs__score{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;margin-top:22px}
.revs__score b{grid-row:1/3;font:800 54px/.9 var(--display);color:#111}
.revs__score>span{color:rgba(0,0,0,.28);font-size:22px;letter-spacing:3px;line-height:1}
.revs__score>span i{font-style:normal;color:#a8742a}
.revs__score small{font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(0,0,0,.55)}
.revs__photo{flex:1 1 0;min-height:240px;margin-top:28px;border-radius:10px;box-shadow:0 22px 60px rgba(60,40,0,.25)}
.revs__photo img{object-position:50% 18%}
.revs__bar{position:relative;height:2px;margin:0 0 18px;background:rgba(0,0,0,.12);overflow:hidden;cursor:pointer}
.revs__bar::before{content:'';position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.revs__bar i{position:absolute;inset:0;background:rgba(0,0,0,.5);transform-origin:0 50%;transform:scaleX(0)}
.revs__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.rcard{display:flex;flex-direction:column;padding:16px 18px 17px;border-radius:10px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 12px 30px rgba(70,50,0,.1)}
.rcard__stars{display:flex;gap:2px;color:rgba(0,0,0,.22);font-size:14px;letter-spacing:2px;line-height:1}
.rcard__stars i{font-style:normal;color:#a8742a}
.rcard h3{margin:10px 0 0;font:700 clamp(19px,1.5vw,22px)/1.06 var(--display);text-transform:uppercase;letter-spacing:.005em;color:#111;text-wrap:balance}
.rcard p{margin:7px 0 0;font:400 15px/1.45 var(--body);color:#3a3832;text-wrap:pretty}
.revs__view{display:none}
.revs.is-live .revs__list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.revs.is-live .revs__view{display:block;overflow:hidden;margin:-14px -14px -30px;padding:14px 14px 30px;touch-action:pan-y}
.revs__track{display:flex;gap:12px;will-change:transform}
.revs__col{flex:0 0 var(--col-w);display:flex;flex-direction:column;gap:12px;height:var(--col-h)}
.revs__col .rcard{flex:1 1 auto}
.revs__col.is-new{animation:revs-in .7s var(--ease-out) both}
.revs__col.is-new .rcard{animation:revs-card .6s var(--ease-out) both}
.revs__col.is-new .rcard:nth-child(2){animation-delay:.08s}
.revs__col.is-new .rcard:nth-child(3){animation-delay:.16s}
@keyframes revs-in{from{opacity:.0}to{opacity:1}}
@keyframes revs-card{from{transform:translateY(10px)}to{transform:none}}
@media(max-width:1000px){
  .revs__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .revs__side{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title photo" "score photo";column-gap:20px;align-items:end}
  .revs h2{grid-area:title}
  .revs__score{grid-area:score;margin-top:14px}
  .revs__side{display:grid}
  .revs__photo{grid-area:photo;flex:none;min-height:0;width:clamp(96px,22vw,150px);margin:0;aspect-ratio:1;border-radius:50%}
}
@media(max-width:700px){
  .revs{padding:56px 0 64px}
  .revs h2{font-size:52px}
  .revs__score b{font-size:42px}
  .revs__score>span{font-size:18px}
  .revs__score small{font-size:10.5px}
  .revs__grid{gap:22px}
  .revs__list{grid-template-columns:1fr}
  .revs__bar{margin-bottom:14px}
  .rcard{padding:14px 16px 15px}
  .rcard h3{font-size:19px;margin-top:8px}
  .rcard p{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.revs__col.is-new,.revs__col.is-new .rcard{animation:none}}

/* ===== Not for everyone: a face-control list, struck through ===== */
.nfa{padding:clamp(72px,8vw,112px) 0;text-align:left;background:#0b0b0c}
.nfa__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.nfa .kicker{margin-bottom:18px}
.nfa h2{font-size:clamp(46px,5.2vw,80px);line-height:.92;color:var(--text)}
.nfa h2 em{display:block;font-style:normal;color:var(--red-hi);font-size:1em}
.nfa__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.nfa__list li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;padding:22px 0 24px;border-bottom:1px solid var(--line)}
.nfa__x{position:relative;width:26px;height:26px;margin-top:4px;border:1.5px solid #3a3d42;border-radius:50%}
.nfa__x::before,.nfa__x::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--red-hi);border-radius:2px;transform:rotate(45deg) scaleX(0);transition:transform .35s var(--ease-out);transition-delay:calc(.35s + var(--i) * .45s + .5s)}
.nfa__x::after{transform:rotate(-45deg) scaleX(0);transition-delay:calc(.35s + var(--i) * .45s + .6s)}
.nfa__list.is-in .nfa__x::before{transform:rotate(45deg) scaleX(1)}
.nfa__list.is-in .nfa__x::after{transform:rotate(-45deg) scaleX(1)}
.nfa__list.is-in .nfa__x{border-color:rgba(240,75,89,.55);transition:border-color .3s calc(.35s + var(--i) * .45s + .5s)}
.nfa__list h3{margin:0;font:700 clamp(26px,2.5vw,38px)/1.02 var(--display);text-transform:uppercase;letter-spacing:.005em;color:var(--text)}
.nfa__s{background:linear-gradient(var(--red-hi),var(--red-hi)) no-repeat 0 56%/0% 3px;transition:background-size .55s cubic-bezier(.65,0,.35,1),color .4s;transition-delay:calc(.35s + var(--i) * .45s)}
.nfa__list.is-in .nfa__s{background-size:100% 3px;color:#8b8f94}
.nfa__list p{margin:10px 0 0;font:500 clamp(16px,1.35vw,19px)/1.45 var(--body);color:var(--text);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .6s var(--ease-out);transition-delay:calc(.75s + var(--i) * .45s)}
.nfa__list.is-in p{opacity:1;transform:none}
.nfa__note{margin:clamp(32px,4vw,48px) 0 0;text-align:right}
.nfa__note span{display:inline-flex;align-items:center;gap:12px;font:600 clamp(17px,1.4vw,20px)/1.3 var(--body);color:#c9cbcd}
.nfa__note span::after{content:'↓';color:var(--red-hi);font-weight:400}
@media(max-width:1000px){.nfa__grid{grid-template-columns:1fr;gap:28px}.nfa__note{text-align:left}}
@media(max-width:700px){
  .nfa{padding:60px 0 64px}
  .nfa h2{font-size:clamp(42px,12vw,54px)}
  .nfa__list li{grid-template-columns:26px minmax(0,1fr);gap:12px;padding:18px 0 20px}
  .nfa__x{width:22px;height:22px;margin-top:2px}
  .nfa__list h3{font-size:25px}
  .nfa__list p{font-size:15.5px;margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.nfa__s,.nfa__x::before,.nfa__x::after,.nfa__list p{transition:none}}

/* ===== Compare the cost ===== */
.cmp{padding:clamp(72px,8vw,112px) 0}
.cmp__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:20px 56px;align-items:end}
.cmp h2{font-size:clamp(48px,6vw,96px);font-weight:800;line-height:.9;color:#0e0e0e}
.cmp h2 .red{color:#d8262f}
.cmp__lead{max-width:34ch;margin:0 0 6px;font:500 clamp(18px,1.6vw,22px)/1.38 var(--body);letter-spacing:-.015em;color:#2a2926;text-wrap:pretty}
.cmp__lead b{color:#d8262f;font-weight:800}
.cmp__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:clamp(36px,4.5vw,60px) 0 0;padding:0;list-style:none}
.cmp__card{display:flex;flex-direction:column;padding:24px 22px 24px;border:1px solid #d6cfc2;border-radius:12px}
.cmp__card h3{margin:0 0 16px;font:700 clamp(22px,1.9vw,27px)/1 var(--display);text-transform:uppercase;letter-spacing:.005em;color:#111}
.cmp__card p{margin:0;font:400 15px/1.5 var(--body);color:var(--on-paper-muted)}
.cmp__card p+p{margin-top:6px}
.cmp__card .cmp__main{font-weight:600;color:#26241f}
.cmp__card--proxy{border-color:#0e0f12;background:#0e0f12;box-shadow:0 22px 50px rgba(20,16,10,.22)}
.cmp__card--proxy h3{color:#fff}
.cmp__price{margin:-4px 0 14px!important;font:700 clamp(40px,3.6vw,54px)/.9 var(--display)!important;color:var(--red-hi)!important}
.cmp__price span{margin-left:6px;font:500 14px var(--body);color:#a3a8aa}
.cmp__card--proxy .cmp__main{color:#fff}
.cmp__card--proxy p{color:#a3a8aa}
@media(max-width:1000px){.cmp__head{grid-template-columns:1fr;align-items:start}.cmp__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  .cmp{padding:60px 0 64px}
  .cmp h2{font-size:clamp(44px,12.5vw,56px)}
  .cmp__lead{font-size:17px}
  .cmp__list{grid-template-columns:1fr;gap:0;margin-top:28px;border-top:1px solid #d6cfc2}
  .cmp__card{display:grid;grid-template-columns:minmax(0,1fr);padding:16px 0;border:0;border-bottom:1px solid #d6cfc2;border-radius:0}
  .cmp__card h3{margin:0 0 8px;font-size:21px}
  .cmp__card p{font-size:14.5px}
  .cmp__card--proxy{grid-template-columns:1fr auto;margin-top:16px;padding:18px;border:0;border-radius:12px}
  .cmp__card--proxy h3{grid-row:auto;grid-column:1}
  .cmp__card--proxy h3{margin:0;align-self:center}
  .cmp__card--proxy .cmp__price{grid-column:2;grid-row:1;margin:0!important;font-size:38px!important}
  .cmp__card--proxy p:not(.cmp__price){grid-column:1/-1;margin-top:8px}
  .cmp__card--proxy p+p:not(.cmp__price){margin-top:4px}
}

/* ===== FAQ ===== */
.faq{padding:clamp(64px,7vw,104px) 0;background:var(--paper)}
.faq__grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq .kicker{margin-bottom:16px}
.faq h2{font-size:clamp(44px,5vw,76px);font-weight:800;line-height:.92;color:#0e0e0e}
.faq__head .tlink{display:inline-block;margin-top:22px;color:#151515}
.faq__list{border-top:1px solid #d6cfc2}
.faq__item{border-bottom:1px solid #d6cfc2}
.faq__item summary{position:relative;display:block;padding:20px 44px 20px 0;cursor:pointer;list-style:none;font:600 clamp(17px,1.45vw,20px)/1.3 var(--body);letter-spacing:-.015em;color:#151515}
.faq__item summary::-webkit-details-marker{display:none}
.faq__toggle{position:absolute;right:4px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:#151515}
.faq__toggle::before,.faq__toggle::after{content:'';position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;background:var(--paper);transition:transform .25s}
.faq__toggle::after{transform:rotate(90deg)}
.faq__item[open] .faq__toggle{background:#d8262f}
.faq__item[open] .faq__toggle::after{transform:rotate(0)}
.faq__item p{max-width:62ch;margin:-4px 0 0;padding:0 44px 22px 0;font:400 16px/1.6 var(--body);color:var(--on-paper-muted)}
.faq__item p .tlink{font-size:inherit}
@media(max-width:1000px){.faq__grid{grid-template-columns:1fr;gap:24px}}
@media(max-width:700px){
  .faq{padding:56px 0 60px}
  .faq h2{font-size:clamp(40px,11.5vw,50px)}
  .faq__item summary{padding:17px 38px 17px 0;font-size:16.5px}
  .faq__item p{padding-right:0;font-size:15px}
}