/* Layout: one long marketing page. Light warm paper with alternating grey and charcoal bands; real product as every visual; orange is the only accent. Single deliberate look (it is the public site), so colours are set explicitly rather than following the viewer theme. */
:root{
  color-scheme:light;
  --paper:#fbfaf8; --white:#ffffff; --grey:#efeeeb; --line:#e4e1db;
  --ink:#18181b; --body:#4a4740; --muted:#77736b;
  --char:#121214; --char-2:#1b1b1f; --char-line:#2c2c31; --char-text:#b8b8c0;
  --orange:#f97316; --orange-deep:#ea580c; --orange-tint:#fff1e6;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --inst:"Instrument Serif",Georgia,serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --gutter:clamp(16px,4vw,48px);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
section{padding-block:clamp(64px,9vw,120px)}
h1,h2,h3{text-wrap:balance;margin:0}
h2{font-size:clamp(32px,4.2vw,56px);line-height:1.04;letter-spacing:-0.032em;font-weight:700}
h2 i,h1 i{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--orange);letter-spacing:-0.015em}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.kicker::before{content:"";width:22px;height:1.5px;background:var(--orange)}
.lede{font-size:clamp(17px,1.4vw,19px);color:var(--body);max-width:56ch;margin:18px 0 0}
.sechead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px 56px;align-items:end;margin-bottom:clamp(32px,4vw,52px)}
.sechead .lede{margin:0}
@media (max-width:900px){.sechead{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;border-radius:999px;padding:0 22px 0 24px;font-weight:600;font-size:15.5px;letter-spacing:-0.005em;text-decoration:none;border:1px solid transparent;white-space:nowrap;transition:background .25s var(--ease),box-shadow .25s var(--ease),border-color .25s,transform .25s var(--ease)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg.arr{transform:translateX(3px)}
.btn.pri{background:linear-gradient(180deg,#fb8636 0%,#f97316 55%,#f06a0c 100%);color:#fff;border-color:#e2640d;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 2px rgba(124,45,18,.25),0 10px 24px -10px rgba(249,115,22,.8)}
.btn.pri:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 4px rgba(124,45,18,.25),0 16px 30px -12px rgba(249,115,22,.85)}
.btn.pri:active{transform:translateY(0);box-shadow:inset 0 2px 4px rgba(124,45,18,.3)}
.btn.sec{background:var(--white);color:var(--ink);border-color:#e3dfd8;box-shadow:0 1px 2px rgba(24,24,27,.06),0 6px 16px -10px rgba(24,24,27,.25)}
.btn.sec:hover{border-color:#cfcac2;transform:translateY(-1px)}
.btn.sec .play{width:22px;height:22px;border-radius:50%;background:var(--orange-tint);color:var(--orange-deep);display:grid;place-items:center}
.btn.sec .play svg{width:9px;height:9px}
.btn.sm{height:40px;padding:0 16px 0 18px;font-size:14px}
.btn.ghost{border-color:var(--char-line);color:#f4f4f5}
.ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fine{font-size:13.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:16px}
.fine span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:2px}
.textlink{font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--orange);padding-bottom:1px}

/* frames */
.browser{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e7e5e1;box-shadow:0 1px 0 rgba(0,0,0,.04),0 40px 80px -34px rgba(24,24,27,.38)}
.browser .bar{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#f6f5f3;border-bottom:1px solid #ebe9e5}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:#dcd9d3}
.browser .bar .url{margin-left:12px;font-family:var(--mono);font-size:10.5px;color:#8a8780;background:#fff;border:1px solid #ebe9e5;border-radius:6px;padding:2px 10px}
.phone{border-radius:34px;padding:7px;background:#0b0b0c;box-shadow:0 40px 70px -30px rgba(0,0,0,.55),inset 0 0 0 1.5px #2b2b2e}
.phone img{border-radius:28px;width:100%}

/* ── nav ── */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(251,250,248,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:32px;height:68px}
.mark{height:26px;width:auto;color:var(--ink)}
.nav .links{display:flex;gap:26px;font-size:14.5px;margin-left:auto}
.nav .links a{text-decoration:none;color:var(--body)}
.nav .links a:hover{color:var(--ink)}
.nav .login{font-size:14.5px;text-decoration:none;color:var(--body)}
.nav .btn{padding:10px 18px;font-size:14px}
@media (max-width:860px){.nav .links,.nav .login{display:none}.nav .btn{margin-left:auto}}

/* ── 1 hero (rotator) ── */
.hero{padding-block:clamp(36px,6vw,84px) clamp(48px,6vw,88px)}
.hero .grid{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.hero h1{font-weight:700;font-size:clamp(42px,5.6vw,78px);line-height:1.01;letter-spacing:-0.038em;margin:0 0 24px}
.hero h1 .lead{display:block}
.hero .word{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--orange);letter-spacing:-0.02em;white-space:nowrap}
.caret{display:inline-block;width:3px;height:.8em;background:var(--orange);margin-left:4px;vertical-align:-0.05em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero .sub{font-size:clamp(17px,1.45vw,19.5px);line-height:1.55;color:var(--body);max-width:46ch;margin:0 0 30px}
.stage{position:relative;aspect-ratio:16/11.4;width:100%}
.slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .55s var(--ease),transform .7s var(--ease);pointer-events:none}
.slide.on{opacity:1;transform:none}
.slide .browser{width:100%}
.slide.ph{background:radial-gradient(60% 60% at 50% 55%,#ffe4cc 0%,rgba(255,228,204,0) 70%)}
.slide.ph .phone{width:38%;max-width:250px}
.slide.ph .phone + .phone{position:absolute;width:30%;max-width:200px;transform:translate(78%,10%) rotate(6deg)}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:22px;padding:4px;background:#f1efeb;border:1px solid #e8e5df;border-radius:16px;width:fit-content;max-width:100%}
.chip{border:0;background:transparent;color:#6b675f;border-radius:12px;padding:7px 12px 8px;font-size:13px;font-weight:500;position:relative;overflow:hidden;transition:background .3s var(--ease),color .3s,box-shadow .3s}
.chip:hover{color:var(--ink)}
.chip.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(24,24,27,.08),0 4px 10px -6px rgba(24,24,27,.25)}
.chip .fill{position:absolute;left:12px;right:auto;bottom:3px;height:2px;border-radius:2px;background:var(--orange);width:0;max-width:calc(100% - 24px)}
.chip.on .fill{animation:fill var(--dur,3.5s) linear forwards}
@keyframes fill{to{width:calc(100% - 24px)}}
@media (max-width:940px){.hero .grid{grid-template-columns:1fr}}

/* ── 3 reel picker ── */
.reels{background:var(--grey)}
.reels h2 i{font-family:var(--inst);font-weight:400}
.player{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:14px;align-items:start}
.screen{position:relative;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 40px 80px -40px rgba(0,0,0,.5);aspect-ratio:16/9}
.screen video{width:100%;height:100%;object-fit:cover}
.snd{position:absolute;right:14px;bottom:14px;background:rgba(17,17,19,.8);backdrop-filter:blur(8px);color:#fff;border:0;border-radius:999px;padding:9px 15px;font-size:13px;font-weight:600}
.now{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.94);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600}
.list{display:flex;flex-direction:column;gap:6px}
.job{display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:center;text-align:left;background:transparent;border:1px solid transparent;border-radius:12px;padding:6px;color:inherit}
.job img{border-radius:8px;aspect-ratio:16/9;object-fit:cover;width:76px}
.job b{display:block;font-size:14px;font-weight:600;line-height:1.25}
.job small{color:var(--muted);font-size:12px}
.job .d{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.job:hover{background:#f7f6f3}
.job.on{background:#fff;border-color:#e0ddd6;box-shadow:0 8px 20px -14px rgba(0,0,0,.4)}
.job.on .d{color:var(--orange)}
.reels .after{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:32px}
@media (max-width:980px){.player{grid-template-columns:1fr}.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}

/* ── 4 a day on Ravini: the to-do list + the phone ── */
.dx{position:relative;height:560vh;background:#f4f1ea;color:#1c1a17}
.dx .stk{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:4vw;align-items:center;max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.dx .lhs{min-width:0}
.dx .kick{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#b45309;display:flex;gap:10px;align-items:center}
.dx .kick::before{content:"";width:22px;height:1.5px;background:currentColor}
.dx h2{font-family:var(--inst);font-weight:400;font-size:clamp(38px,4.4vw,66px);line-height:.95;letter-spacing:-.01em;margin:12px 0 2.4vh}
.dx h2 i{color:#ea580c}
.dx .paper{position:relative;background:#fffdf8;border-radius:6px;padding:1.6vh 26px 1.6vh 40px;box-shadow:0 1px 0 #e8e1d3,0 40px 80px -50px rgba(60,40,10,.45)}
.dx .paper::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:1.5px;background:rgba(239,68,68,.35)}
.dx .ph{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#a8a29e;padding:6px 0 4px}
.dx .row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:5.2vh;border-bottom:1px solid #eee6d6;transition:background .45s}
.dx .row::after{content:"";position:absolute;inset:0 -26px 0 -40px;background:rgba(249,115,22,.1);opacity:0;transition:opacity .4s;pointer-events:none}
.dx .row.now::after{opacity:1}
.dx .task{position:relative;font-family:var(--inst);font-size:clamp(19px,1.75vw,27px);line-height:1.1;width:fit-content;max-width:100%;transition:color .5s}
.dx .task svg{position:absolute;left:-1%;top:50%;width:102%;height:20px;margin-top:-10px;overflow:visible;pointer-events:none}
.dx .task path{fill:none;stroke:#f97316;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s cubic-bezier(0.645,0.045,0.355,1)}
.dx .row.done .task{color:#a8a29e}
.dx .row.done .task path{stroke-dashoffset:0}
.dx .row .tm{font-family:var(--mono);font-size:12px;color:#c2410c;opacity:0;transform:translateX(8px);transition:opacity .4s,transform .5s;white-space:nowrap}
.dx .row.done .tm{opacity:1;transform:none}
.dx .last{display:flex;align-items:baseline;gap:16px;padding-top:1.2vh}
.dx .last span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#78716c}
.dx .last b{font-family:var(--inst);font-weight:400;font-size:clamp(40px,4.6vw,70px);line-height:.9;color:#ea580c;opacity:0;transform:translateY(14px);transition:opacity .7s,transform .8s cubic-bezier(0.215,0.61,0.355,1)}
.dx .last.on b{opacity:1;transform:none}
.dx .rhs{justify-self:center;position:relative}
/* iPhone: titanium band, black bezel, Dynamic Island, side buttons */
.ip{position:relative;width:min(300px,24vw,36vh);aspect-ratio:1206/2622;border-radius:15%/7%;padding:3.2%;background:linear-gradient(135deg,#d6d3cf 0%,#8d8a86 22%,#e9e6e2 48%,#7c7975 74%,#cfccc8 100%);box-shadow:0 0 0 1px rgba(0,0,0,.25),0 60px 110px -45px rgba(40,20,0,.7),0 30px 50px -30px rgba(0,0,0,.35)}
.ip::before{content:"";position:absolute;inset:1.2%;border-radius:14%/6.6%;background:#050505}
.ip .btn-s{position:absolute;width:1.4%;border-radius:2px;background:linear-gradient(90deg,#8d8a86,#d6d3cf)}
.ip .b1{left:-1.1%;top:17%;height:5%}.ip .b2{left:-1.1%;top:25%;height:9%}.ip .b3{left:-1.1%;top:36%;height:9%}.ip .b4{right:-1.1%;top:27%;height:14%}
.ip .scr{position:relative;height:100%;border-radius:12.6%/5.9%;overflow:hidden;background:#f9fafc;container-type:inline-size;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Geist",system-ui,sans-serif;color:#111827}
.ip .isl{position:absolute;left:50%;top:2.6cqw;width:31cqw;height:9.4cqw;margin-left:-15.5cqw;border-radius:6cqw;background:#000;z-index:30}
.ip .sb{position:absolute;left:0;right:0;top:0;height:11.6cqw;z-index:25;display:flex;align-items:center;justify-content:space-between;padding:1.2cqw 7.5cqw 0 9cqw;background:#fff;font-size:4.4cqw;font-weight:600;letter-spacing:-.01em}
.ip .sb .ic{display:flex;gap:1.4cqw;align-items:center}
.ip .sb svg{height:3.6cqw;width:auto;display:block}
.ip .stage{position:absolute;left:0;right:0;top:11.6cqw;bottom:0;overflow:hidden;aspect-ratio:auto;width:auto}
.ip .sc{position:absolute;inset:0;background:#f9fafc;transform:translateX(100%);transition:transform .55s cubic-bezier(.32,.72,0,1),filter .55s;will-change:transform}
.ip .sc.on{transform:none;z-index:3;box-shadow:-8px 0 24px -12px rgba(0,0,0,.25)}
.ip .sc.past{transform:translateX(-28%);filter:brightness(.9);z-index:2}
.ip .sc>img{width:100%;display:block}
/* code-built screens in the app's own style */
.ip .nav{height:12cqw;display:grid;grid-template-columns:10cqw 1fr 10cqw;align-items:center;background:#fff;border-bottom:1px solid #eef0f3;font-size:4.6cqw;font-weight:600;text-align:center}
.ip .nav svg{width:4.4cqw;height:4.4cqw;margin-left:4cqw;color:#111827}
.ip .bd{padding:3.6cqw;display:grid;gap:3cqw}
.ip .sub{font-size:3.1cqw;color:#6b7280;margin-top:-1cqw}
.ip .cd{background:#fff;border:1px solid #e5e7eb;border-radius:3.4cqw;padding:3.4cqw}
.ip .h{font-size:3.9cqw;font-weight:700}
.ip .m{font-size:3.2cqw;color:#4b5563;line-height:1.4}
.ip .tg{display:inline-flex;align-items:center;gap:1cqw;font-size:2.7cqw;font-weight:600;border-radius:99px;padding:.6cqw 2cqw;background:#eef4fb;color:#1b63ad}
.ip .tg.w{background:#fff4e5;color:#b45309}
.ip .st3{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw}
.ip .st3 div{background:#fff;border:1px solid #e5e7eb;border-radius:3cqw;padding:3cqw 2.6cqw}
.ip .st3 b{display:block;font-size:5.6cqw;letter-spacing:-.03em}
.ip .st3 span{font-size:2.7cqw;color:#6b7280}
.ip .row2{display:flex;gap:2.4cqw}
.ip .bt{flex:1;display:flex;align-items:center;justify-content:center;gap:1.4cqw;height:9.4cqw;border-radius:2.6cqw;font-size:3.5cqw;font-weight:600}
.ip .bt svg{width:3.6cqw;height:3.6cqw;flex:none}
.ip .bt.p{background:#1b63ad;color:#fff}.ip .bt.s{border:1px solid #1b63ad;color:#1b63ad;background:#fff}
.ip .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw}
.ip .thumbs div{position:relative;aspect-ratio:4/5;border-radius:2.4cqw;background:url(ld/class-post.jpg) center/cover;overflow:hidden}
.ip .thumbs div span{position:absolute;left:1.6cqw;right:1.6cqw;bottom:1.6cqw;color:#fff;font-weight:800;font-size:2.7cqw;line-height:1;text-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.6)}
.ip .tired{display:grid;grid-template-columns:14cqw 1fr;gap:3cqw;align-items:center}
.ip .tired i{display:block;aspect-ratio:1;border-radius:2.4cqw;background:url(ld/class-post.jpg) 30% center/cover;filter:grayscale(.6)}
.ip .post{position:relative;aspect-ratio:4/5;border-radius:3cqw;background:url(ld/class-post.jpg) center/cover;overflow:hidden}
.ip .post span{position:absolute;left:3.4cqw;bottom:3.4cqw;color:#fff;font-weight:800;font-size:6.2cqw;line-height:.95;letter-spacing:-.03em;text-shadow:0 .5cqw 1.6cqw rgba(0,0,0,.5)}
.ip .post span em{font-style:normal;color:#fb923c}
.ip .sizes{display:flex;gap:1.6cqw}
.ip .tabs{position:absolute;left:0;right:0;bottom:0;height:15cqw;background:#fff;border-top:1px solid #eef0f3;display:grid;grid-template-columns:repeat(4,1fr);padding-top:2.2cqw;font-size:2.6cqw;color:#6b7280;text-align:center}
.ip .tabs b{display:block;width:5cqw;height:5cqw;margin:0 auto 1cqw;border-radius:1.4cqw;border:1.6px solid currentColor}
.ip .tabs .on{color:#1b63ad}
/* notification banner + in-app toast */
.ip .bn{position:absolute;left:2.6cqw;right:2.6cqw;top:12.6cqw;z-index:40;display:grid;grid-template-columns:9cqw 1fr;gap:.6cqw 2.6cqw;align-items:center;padding:2.8cqw 3cqw;border-radius:5.4cqw;background:rgba(245,245,247,.86);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);box-shadow:0 2cqw 6cqw -1cqw rgba(0,0,0,.3);transform:translateY(-130%) scale(.96);opacity:0;transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .35s}
.ip .bn.on{transform:none;opacity:1}
.ip .bn .s{grid-row:span 3;width:9cqw;height:9cqw;border-radius:2.4cqw;display:grid;place-items:center;color:#fff}
.ip .bn .s svg{width:5cqw;height:5cqw}
.ip .bn .s.done{background:#16a34a}.ip .bn .s.appr{background:#f97316}
.ip .bn .a{display:flex;justify-content:space-between;font-size:2.7cqw;color:#6b7280;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.ip .bn .t{font-size:3.6cqw;font-weight:700;color:#111827}
.ip .bn .b{font-size:3.2cqw;color:#374151;line-height:1.3}
.ip .ts{position:absolute;left:5cqw;right:5cqw;bottom:19cqw;z-index:5;display:flex;align-items:center;gap:2.4cqw;padding:3cqw 3.6cqw;border-radius:3.6cqw;background:#111827;color:#fff;font-size:3.3cqw;font-weight:600;box-shadow:0 2cqw 6cqw -2cqw rgba(0,0,0,.5);transform:translateY(40%) scale(.9);opacity:0;transition:transform .5s cubic-bezier(.32,.72,0,1) .55s,opacity .35s .55s}
.ip .sc.on .ts{transform:none;opacity:1}
.ip .ts i{width:5.4cqw;height:5.4cqw;border-radius:50%;background:#16a34a;display:grid;place-items:center;flex:none}
.ip .ts i svg{width:3.4cqw;height:3.4cqw}
.dx .hint{position:absolute;left:50%;bottom:calc(100% + 16px);transform:translateX(-50%);white-space:nowrap;display:flex;flex-direction:row;align-items:center;gap:10px;background:#fffdf8;border:1px solid #e8e1d3;border-radius:999px;padding:7px 14px 7px 10px;box-shadow:0 10px 24px -16px rgba(60,40,10,.45);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#78716c;transition:opacity .5s;pointer-events:none}
.dx .hint i{width:18px;height:28px;border:1.5px solid #a8a29e;border-radius:12px;position:relative}
.dx .hint i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:#f97316;animation:wheel 1.6s cubic-bezier(0.645,0.045,0.355,1) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(11px);opacity:0}100%{opacity:0}}
.dx .hint.off{opacity:0}
@media (max-width:860px){.dx{height:auto}.dx .stk{position:relative;height:auto;grid-template-columns:1fr;padding-block:64px}.dx .rhs,.dx .hint{display:none}.dx .row .tm{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dx .hint i::after{animation:none}}
/* ── 5 your app (E) ── */
.app{--gym:#f97316;--hue:0deg;background:var(--paper);overflow:hidden}
.app .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.app h2 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--gym);transition:color .6s var(--ease)}
.app .btn.pri{background:var(--gym);box-shadow:0 12px 26px -12px color-mix(in srgb,var(--gym) 75%,transparent);transition:background .6s var(--ease)}
.picker{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:28px 0;font-size:13.5px;color:var(--muted)}
.sw{width:32px;height:32px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #d9d6d0;padding:0}
.sw.on{box-shadow:0 0 0 2px var(--ink)}
.feats{list-style:none;padding:0;margin:0 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;font-size:15px;color:var(--body)}
.feats li{display:flex;gap:10px;align-items:baseline}
.feats li::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:var(--gym);transform:translateY(-1px);transition:background .6s}
.astage{position:relative;aspect-ratio:1/0.95;width:100%}
.glow{position:absolute;inset:8% 6%;border-radius:40px;background:radial-gradient(60% 60% at 50% 50%,color-mix(in srgb,var(--gym) 26%,#fff) 0%,var(--paper) 75%);transition:background .6s var(--ease)}
.astage .phone{position:absolute;width:34%;transition:transform .9s var(--ease)}
.astage .phone img{filter:hue-rotate(var(--hue));transition:filter .6s var(--ease)}
.f1{left:33%;top:2%;z-index:3;width:36%!important}
.f2{left:4%;top:14%;transform:rotate(-7deg);z-index:2}
.f3{right:3%;top:14%;transform:rotate(7deg);z-index:2}
.astage:hover .f2{transform:rotate(-10deg) translateX(-10px)}
.astage:hover .f3{transform:rotate(10deg) translateX(10px)}
.gymname{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);z-index:4;background:var(--ink);color:#fff;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;white-space:nowrap;display:flex;gap:8px;align-items:center}
.gymname i{width:10px;height:10px;border-radius:50%;background:var(--gym);transition:background .6s}
@media (max-width:940px){.app .grid{grid-template-columns:1fr}}
@media (max-width:480px){.feats{grid-template-columns:1fr}}

/* ── 6 AI ── */
.ai{background:radial-gradient(70% 60% at 85% 0%,#2a1708 0%,var(--char) 62%);color:#f4f4f5}
.ai .kicker{color:#8e8e96}
.ai .lede{color:var(--char-text)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:var(--char-2);border:1px solid var(--char-line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.card .vis{aspect-ratio:4/3;background:radial-gradient(60% 70% at 50% 60%,#3a1e08 0%,#141416 75%);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.card .vis.full img{width:100%;height:100%;object-fit:cover;object-position:18% 50%}
.card .vis .phone{width:52%;transform:translateY(22%)}
.card .vis .browser{width:118%;transform:translate(9%,8%);border-color:#2c2c31}
.card .txt{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .name{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.card h3{font-size:21px;letter-spacing:-0.015em;line-height:1.2}
.card p{margin:0;color:var(--char-text);font-size:15px}
.card .q{font-family:var(--mono);font-size:13px;color:#e4e4e7;background:#0f0f11;border:1px solid var(--char-line);border-radius:10px;padding:9px 12px;margin-top:4px}
.card .q b{color:var(--orange);font-weight:500}
.ai .after{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin-top:36px;color:var(--char-text);font-size:15px}
.ai .textlink{color:#fff}
@media (max-width:940px){.cards{grid-template-columns:1fr;max-width:560px}}

/* ── 7 switch ── */
.switch .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:center}
.steps{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line);counter-increment:s}
.steps li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--orange-tint);color:var(--orange-deep);font-weight:700;display:grid;place-items:center;font-size:14px}
.steps b{display:block;font-size:17px;margin-bottom:2px}
.steps span{color:var(--body);font-size:15.5px}
.switch .vid{border-radius:16px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.4)}
@media (max-width:940px){.switch .grid{grid-template-columns:1fr}}

/* ── 8 founder ── */
.founder{background:var(--white);border-block:1px solid var(--line)}
.founder .grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.founder figure{margin:0;position:relative}
.founder figure img{border-radius:18px;width:100%;aspect-ratio:4/5;object-fit:cover}
.founder figcaption{position:absolute;left:14px;bottom:14px;background:rgba(255,255,255,.94);border-radius:12px;padding:10px 14px;font-size:13px;line-height:1.35}
.founder figcaption b{display:block;font-size:14px}
.founder blockquote{margin:0;font-family:var(--serif);font-size:clamp(26px,2.9vw,40px);line-height:1.16;letter-spacing:-0.02em;font-weight:500}
.founder .story{margin-top:26px;display:grid;gap:14px;color:var(--body);font-size:17px;max-width:58ch}
.founder .story p{margin:0}
.founder .sig{font-family:var(--inst);font-style:italic;font-size:30px;color:var(--ink);margin-top:6px}
@media (max-width:860px){.founder .grid{grid-template-columns:1fr}.founder figure{max-width:380px}}

/* ── 9 fit ── */
.fit .grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fit .box{border-radius:18px;padding:30px;border:1px solid var(--line);background:var(--white)}
.fit .box.no{background:transparent;border-style:dashed}
.fit h3{font-size:20px;margin-bottom:14px;letter-spacing:-0.01em}
.fit ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--body)}
@media (max-width:760px){.fit .grid{grid-template-columns:1fr}}

/* ── 10 pricing ── */
.pricing{background:var(--char);color:#f4f4f5}
.pricing .kicker{color:#8e8e96}
.pricing .lede{color:var(--char-text)}
.pgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px;align-items:stretch}
.plan{background:#fff;color:var(--ink);border-radius:22px;padding:clamp(24px,3vw,40px);display:grid;gap:22px}
.plan .top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.plan .amt{font-family:var(--serif);font-size:clamp(64px,7vw,96px);line-height:.9;letter-spacing:-0.04em;font-weight:500}
.plan .amt small{font-family:var(--sans);font-size:17px;letter-spacing:0;color:var(--muted);font-weight:500;margin-left:6px}
.plan .then{font-size:15px;color:var(--body);max-width:24ch;text-align:right}
.plan .then b{color:var(--ink)}
.plan .inc{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:9px 24px;font-size:15px}
.plan .inc li{display:flex;gap:10px;align-items:baseline}
.plan .inc li::before{content:"✓";color:var(--orange);font-weight:700;font-size:13px}
.plan .usage{background:var(--grey);border-radius:14px;padding:16px 18px;font-size:14.5px;color:var(--body)}
.plan .usage b{color:var(--ink)}
.plan .usage table{width:100%;border-collapse:collapse;margin-top:8px;font-variant-numeric:tabular-nums}
.plan .usage td{padding:5px 0;border-top:1px solid #dfdcd6}
.plan .usage td:last-child{text-align:right;font-weight:600;color:var(--ink)}
.plan .fine{margin-top:0}
.replace{border:1px solid var(--char-line);border-radius:22px;padding:clamp(24px,3vw,36px);background:var(--char-2);display:flex;flex-direction:column;gap:18px}
.replace h3{font-size:22px;letter-spacing:-0.015em}
.replace p{margin:0;color:var(--char-text);font-size:15px}
.replace ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.replace li{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:#151518;border:1px solid var(--char-line);font-size:15px}
.replace li s{text-decoration-color:var(--orange);text-decoration-thickness:2px;color:#d4d4d8}
.replace li span{font-family:var(--mono);font-size:12px;color:#8e8e96}
.replace .in{margin-top:auto;padding:14px;border-radius:12px;background:var(--orange);color:#fff;font-weight:600;display:flex;justify-content:space-between;gap:12px}
@media (max-width:940px){.pgrid{grid-template-columns:1fr}}
@media (max-width:520px){.plan .inc{grid-template-columns:1fr}.plan .then{text-align:left}}

/* ── 11 faq ── */
.faq .grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,80px)}
.faq details{border-top:1px solid var(--line);padding:20px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;font-size:18px;font-weight:600;display:flex;justify-content:space-between;gap:16px;letter-spacing:-0.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-weight:500;font-size:22px;line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:12px 0 0;color:var(--body);max-width:62ch}
@media (max-width:860px){.faq .grid{grid-template-columns:1fr}}

/* ── 12 final ── */
.final{background:var(--orange);color:#fff;text-align:left}
.final .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:28px 48px;align-items:end}
.final h2{font-size:clamp(34px,4.6vw,62px)}
.final h2 i{color:#fff;opacity:.92}
.final p{margin:16px 0 0;font-size:18px;color:#fff3e8;max-width:48ch}
.final .btn.pri{background:var(--ink);box-shadow:none}
.final .btn.pri:hover{background:#000}
.final .fine{color:#ffe7d4}
.final .fine span::before{background:#fff}
@media (max-width:820px){.final .wrap{grid-template-columns:1fr}}

footer{background:var(--char);color:#8e8e96;padding-block:48px;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:flex-start}
footer .mark{color:#f4f4f5}
footer nav{display:flex;flex-wrap:wrap;gap:12px 28px}
footer a{text-decoration:none;color:#c4c4cc}
footer p{margin:10px 0 0}


/* ── ticker ── */
.gyms{padding-block:30px 34px;border-block:1px solid var(--line);background:var(--white);overflow:hidden}
.gyms-h{max-width:none;padding-inline:16px;margin:0 0 18px;text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.track{list-style:none;margin:0;padding:0;display:flex;gap:28px;width:max-content;animation:tick 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track li{flex:none}
.track img{width:72px;height:72px;border-radius:18px;object-fit:cover;box-shadow:0 0 0 1px rgba(24,24,27,.08),0 8px 18px -12px rgba(24,24,27,.45)}
@keyframes tick{to{transform:translateX(calc(-50% - 14px))}}

/* ── VSL ── */
.tour{background:var(--paper);padding-top:clamp(56px,7vw,96px)}
.tourhead{text-align:center;max-width:760px;margin:0 auto clamp(28px,4vw,44px);display:flex;flex-direction:column;align-items:center}
.tourhead .kicker{justify-content:center}
.tourhead .lede{margin-inline:auto}
.vsl{position:relative;max-width:1080px;margin:0 auto;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:#111;box-shadow:0 50px 100px -50px rgba(24,24,27,.55),0 0 0 1px rgba(24,24,27,.06)}
.vsl>img,.vsl>video{width:100%;height:100%;object-fit:cover;display:block;background:#0b0b0d}
.vplay{position:absolute;left:6.2%;top:72%;transform:none;display:flex;align-items:center;gap:12px;border:0;border-radius:999px;padding:10px 22px 10px 10px;background:rgba(255,255,255,.95);color:var(--ink);font-weight:600;font-size:15.5px;box-shadow:0 20px 40px -16px rgba(0,0,0,.5);transition:transform .3s var(--ease)}
.vplay:hover{transform:scale(1.04)}
@media (max-width:640px){.vplay{left:50%;top:auto;bottom:16px;transform:translateX(-50%)}.vplay:hover{transform:translateX(-50%)}}
.vplay>span{width:44px;height:44px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;box-shadow:0 0 0 8px rgba(249,115,22,.18)}
.vplay>span svg{width:14px;height:14px;margin-left:2px}
.vplay[hidden]{display:none}
.vplay small{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:500}
.vplay b{font-weight:600}
.vplay .i-sound{display:none}
.vplay.muted{left:auto;right:16px;top:16px;bottom:auto;transform:none;padding:6px 16px 6px 6px;font-size:14px}
.vplay.muted:hover{transform:scale(1.04)}
.vplay.muted>span{width:34px;height:34px;box-shadow:0 0 0 6px rgba(249,115,22,.18)}
.vplay.muted .i-play,.vplay.muted small{display:none}
.vplay.muted .i-sound{display:block;width:18px;height:18px;margin:0}
@media (max-width:640px){.vplay.muted{right:10px;top:10px;min-height:44px;padding:4px 12px 4px 7px;font-size:13px;gap:8px}.vplay.muted>span{width:26px;height:26px;box-shadow:0 0 0 4px rgba(249,115,22,.18)}.vplay.muted .i-sound{width:14px;height:14px}}
.tourmore{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;align-items:baseline;margin-top:26px;font-size:15px}
.tourmore span{color:var(--muted);font-size:14px}
.vchap{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;flex-wrap:wrap;padding:14px;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent)}
.vchap span{font-size:12px;color:#fff;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border-radius:999px;padding:5px 10px}
@media (max-width:640px){.vchap{display:none}}

/* ── switching list ── */
.moves{list-style:none;padding:0;margin:26px 0 6px;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;font-size:15.5px}
.moves li{display:flex;gap:10px;align-items:baseline}
.moves li::before{content:"✓";color:var(--orange);font-weight:700;font-size:13px}
@media (max-width:480px){.moves{grid-template-columns:1fr}}

/* ── pricing summary ── */
.summary{margin-top:16px;border:1px solid var(--char-line);border-radius:18px;padding:20px 24px;background:var(--char-2)}
.summary p{margin:0;color:var(--char-text);font-size:15.5px;max-width:none}
.summary b{color:#fff}

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

.wm-v{fill:#F97316}
.sw[data-c="orange"]{background:#f97316}
.sw[data-c="blue"]{background:#2563eb}
.sw[data-c="green"]{background:#16a34a}
.sw[data-c="red"]{background:#dc2626}
.sw[data-c="teal"]{background:#0d9488}