/* ═══════════════════════════════════════════════════════════════════
   PurffleGrab — product page for purffle.com/purffle-grab/
   Same "Press" identity as purffle.com: warm paper + ink, hard rules,
   offset shadows, Archivo / Instrument Serif / JetBrains Mono.
   Product accent is the app's own violet; the brand flame drives CTAs.
═══════════════════════════════════════════════════════════════════ */

:root{
  --paper:#f4f1ea; --paper-2:#ebe7dd; --paper-3:#ded9cb;
  --ink:#12100e; --ink-2:#1c1917; --ink-3:#2a2621;
  --tx:#12100e; --tx-2:#4b4640; --tx-3:#7d766c;
  --rl:rgba(18,16,14,.15); --rl-2:rgba(18,16,14,.30); --rl-3:rgba(18,16,14,.55);
  --flame:#e0330c; --flame-2:#ff5c2e; --flame-w:#fff0eb;
  --ac:#7c3aed; --ac-2:#a78bfa; --ac-w:#f1ebff;
  --sp:#1db954; --yt:#ff0033;

  --line-c:#12100e; --surf-c:#f4f1ea; --surf2-c:#ebe7dd; --onl-c:#f4f1ea; --shad-c:#12100e;

  --w:1280px; --nav:70px;
  --fd:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs:'Instrument Serif',Georgia,serif;
  --fm:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --t:.32s cubic-bezier(.22,1,.36,1);
  --tl:.72s cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 18px);-webkit-text-size-adjust:100%;}
body{font-family:var(--fd);background:var(--paper);color:var(--tx);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}
::selection{background:var(--flame);color:#fff;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
img,svg,video{display:block;max-width:100%;}
button,input{font:inherit;color:inherit;}
button{cursor:pointer;border:none;background:none;}
:focus-visible{outline:2.5px solid var(--flame);outline-offset:3px;}
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--ink);color:var(--paper);padding:10px 16px;font-weight:700;}
.skip:focus{top:12px;}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 32px;}

h1,h2,h3,h4{font-family:var(--fd);font-weight:800;letter-spacing:-.045em;line-height:.95;}
em.s{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--flame);}
em.v{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--ac);}
b,strong{font-weight:700;}
code{font-family:var(--fm);font-size:.86em;background:var(--paper-2);border:1px solid var(--rl);padding:1px 6px;}

/* paper grain */
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ink bands flip every context token */
.ink{background:var(--ink);color:var(--paper);
  --tx:#f4f1ea; --tx-2:#b7b1a6; --tx-3:#8a847a;
  --rl:rgba(244,241,234,.16); --rl-2:rgba(244,241,234,.3); --rl-3:rgba(244,241,234,.6);
  --line-c:#f4f1ea; --surf-c:#12100e; --surf2-c:#1c1917; --onl-c:#12100e; --shad-c:rgba(244,241,234,.42);}
.ink em.s{color:var(--flame-2);}
.ink em.v{color:var(--ac-2);}
.ink code{background:var(--ink-3);}

/* ── progress, cursor ─────────────────────────────────────────── */
#prog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;z-index:1200;
  background:linear-gradient(90deg,var(--flame),var(--ac));}
.cur,.cur-r{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;border-radius:50%;mix-blend-mode:difference;opacity:0;transition:opacity .3s;}
.cur{width:7px;height:7px;background:#fff;margin:-3.5px 0 0 -3.5px;}
.cur-r{width:34px;height:34px;border:1.5px solid #fff;margin:-17px 0 0 -17px;transition:width .28s,height .28s,margin .28s,opacity .3s;}
body.cur-on .cur,body.cur-on .cur-r{opacity:1;}
body.cur-lg .cur-r{width:62px;height:62px;margin:-31px 0 0 -31px;}

/* ── ticker ───────────────────────────────────────────────────── */
.top{background:var(--ink);color:var(--paper);font-size:.72rem;overflow:hidden;}
.top-in{display:flex;gap:26px;width:max-content;padding:7px 0;animation:run 38s linear infinite;font-family:var(--fm);letter-spacing:.04em;}
.top-in span{white-space:nowrap;opacity:.82;}
.top-in b{color:var(--flame-2);font-weight:500;}
@keyframes run{to{transform:translateX(-50%);}}

/* ── nav ──────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:900;height:var(--nav);background:var(--paper);border-bottom:1.5px solid var(--line-c);transition:box-shadow var(--t);}
.nav.stuck{box-shadow:0 1px 0 var(--ink),0 8px 26px rgba(18,16,14,.09);}
.nav-in{max-width:var(--w);margin:0 auto;padding:0 32px;height:100%;display:flex;align-items:center;gap:8px;}
.mark{display:flex;align-items:center;gap:10px;margin-right:30px;flex-shrink:0;}
.mark .lg{width:32px;height:32px;background:var(--ink);color:var(--paper);display:grid;place-items:center;}
.mark .lg svg{width:20px;height:20px;}
.mark .n{font-weight:900;font-size:1.18rem;letter-spacing:-.05em;}
.mark .e{font-family:var(--fm);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3);border-left:1px solid var(--rl-2);padding-left:9px;line-height:1.25;}
.links{display:flex;align-items:center;gap:1px;margin-right:auto;}
.links a{position:relative;padding:8px 13px;font-size:.83rem;font-weight:600;letter-spacing:-.01em;color:var(--tx-2);transition:color var(--t);}
.links a::after{content:'';position:absolute;left:13px;right:13px;bottom:2px;height:2px;background:var(--flame);transform:scaleX(0);transform-origin:left;transition:transform var(--t);}
.links a:hover,.links a.on{color:var(--tx);}
.links a:hover::after,.links a.on::after{transform:scaleX(1);}
.nav-r{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.gh{display:flex;align-items:center;gap:7px;padding:7px 12px;border:1.5px solid var(--line-c);font-size:.78rem;font-weight:700;background:var(--surf-c);transition:background var(--t),color var(--t);}
.gh:hover{background:var(--line-c);color:var(--onl-c);}
.gh svg{width:15px;height:15px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 20px;font-family:var(--fd);font-weight:700;font-size:.84rem;letter-spacing:-.015em;
  border:1.5px solid var(--line-c);transition:transform var(--t),background var(--t),color var(--t),box-shadow var(--t);white-space:nowrap;position:relative;}
.btn svg{width:15px;height:15px;flex-shrink:0;}
.btn-fill{background:var(--flame);border-color:var(--flame);color:#fff;box-shadow:3px 3px 0 var(--shad-c);}
.btn-fill:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--shad-c);}
.btn-fill:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--shad-c);}
.btn-line{background:transparent;color:var(--tx);}
.btn-line:hover{background:var(--line-c);color:var(--onl-c);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--rl-2);}
.btn-lg{padding:16px 28px;font-size:.98rem;}
.btn-lg svg{width:18px;height:18px;}
.btn-sm{padding:8px 14px;font-size:.77rem;}
.l-sm{display:none;}
.burger{display:none;width:42px;height:42px;border:1.5px solid var(--line-c);align-items:center;justify-content:center;flex-direction:column;gap:4px;background:var(--surf-c);}
.burger b{width:16px;height:2px;background:var(--ink);display:block;transition:var(--t);}
.burger.on b:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger.on b:nth-child(2){opacity:0;}
.burger.on b:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.drawer{position:fixed;inset:var(--nav) 0 0;z-index:890;background:var(--paper);padding:22px 32px 50px;overflow-y:auto;transform:translateY(-6px);opacity:0;visibility:hidden;transition:var(--t);}
.drawer.on{transform:none;opacity:1;visibility:visible;}
.drawer a{display:flex;justify-content:space-between;padding:14px 0;font-size:1.12rem;font-weight:700;letter-spacing:-.03em;border-bottom:1px solid var(--rl);}
.drawer a span{font-family:var(--fm);font-size:.68rem;color:var(--tx-3);font-weight:400;letter-spacing:.04em;}
.drawer .btn{margin-top:24px;width:100%;}

/* ── shared section furniture ─────────────────────────────────── */
section{position:relative;}
.sec{padding:120px 0;}
.sec-sm{padding:80px 0;}
.alt{background:var(--paper-2);border-top:1.5px solid var(--line-c);border-bottom:1.5px solid var(--line-c);}
.kick{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);margin-bottom:22px;}
.kick::before{content:'';width:26px;height:1.5px;background:var(--flame);}
.kick .no{color:var(--flame);}
.ink .kick .no{color:var(--flame-2);}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:56px;flex-wrap:wrap;}
.h2{font-size:clamp(2.3rem,5.2vw,4.4rem);}
.h2-sm{font-size:clamp(1.9rem,3.8vw,3rem);}
.lede{font-size:1.08rem;line-height:1.7;color:var(--tx-2);max-width:560px;}
.lede b{color:var(--tx);}

/* reveal */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity var(--tl),transform var(--tl);}
.js .rv.in{opacity:1;transform:none;}
.rv1{transition-delay:.08s}.rv2{transition-delay:.16s}.rv3{transition-delay:.24s}.rv4{transition-delay:.32s}.rv5{transition-delay:.4s}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em;}
.split .w>span{display:inline-block;transition:transform .9s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i)*55ms);}
.js .split .w>span{transform:translateY(105%);}
.js .split.in .w>span{transform:none;}

/* ── hero ─────────────────────────────────────────────────────── */
.hero{padding:72px 0 96px;overflow:hidden;}
.hero-g{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:64px;align-items:center;}
.hero h1{font-size:clamp(2.9rem,5.9vw,5.3rem);line-height:.9;letter-spacing:-.055em;}
.hero h1 .s{display:inline-block;}
.hero h1 em.s{padding-right:.06em;}
.hero-ld{font-size:1.14rem;line-height:1.7;color:var(--tx-2);margin:28px 0 34px;max-width:540px;}
.hero-ld b{color:var(--tx);}
.hero-ac{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.hero-meta{margin-top:18px;font-family:var(--fm);font-size:.72rem;letter-spacing:.03em;color:var(--tx-3);display:flex;gap:14px;flex-wrap:wrap;}
.hero-meta a{text-decoration:underline;text-underline-offset:3px;}
.hero-meta a:hover{color:var(--flame);}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px;}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border:1.5px solid var(--line-c);font-family:var(--fm);font-size:.68rem;letter-spacing:.04em;background:var(--surf-c);}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--sp);display:block;}
.chip.new{background:var(--ink);color:var(--paper);}
.chip.new i{background:var(--flame-2);animation:blink 1.6s infinite;}
@keyframes blink{50%{opacity:.25}}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1.5px solid var(--line-c);margin-top:44px;background:var(--surf-c);}
.stat{padding:16px 18px;border-right:1.5px solid var(--line-c);}
.stat:last-child{border-right:none;}
.stat .v{font-weight:900;font-size:1.9rem;letter-spacing:-.05em;line-height:1;}
.stat .v small{font-size:.55em;color:var(--flame);font-weight:800;}
.stat .l{font-family:var(--fm);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);margin-top:7px;}

/* hero demo — a live, self-running mock of the app */
.stage{position:relative;perspective:1400px;}
.demo{position:relative;background:#16151c;color:#e9e7f1;border:1.5px solid var(--ink);box-shadow:10px 10px 0 var(--ink);
  transform:rotateY(-7deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .5s cubic-bezier(.22,1,.36,1);font-size:.8rem;}
.demo-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08);background:#111016;}
.demo-bar i{width:10px;height:10px;border-radius:50%;background:#3a3842;display:block;}
.demo-bar i:nth-child(1){background:#ff5f57}.demo-bar i:nth-child(2){background:#febc2e}.demo-bar i:nth-child(3){background:#28c840}
.demo-bar span{margin-left:10px;font-family:var(--fm);font-size:.66rem;color:#8d8a99;letter-spacing:.04em;}
.demo-body{display:grid;grid-template-columns:128px 1fr;min-height:390px;}
.demo-side{border-right:1px solid rgba(255,255,255,.07);padding:14px 10px;display:flex;flex-direction:column;gap:3px;}
.demo-side .br{display:flex;align-items:center;gap:7px;font-weight:800;font-size:.78rem;margin-bottom:12px;padding:0 6px;}
.demo-side .br svg{width:15px;height:15px;color:#fff;}
.demo-side a{padding:6px 8px;border-radius:6px;color:#9e9bab;font-size:.7rem;font-weight:600;}
.demo-side a.on{background:rgba(124,58,237,.22);color:#fff;}
.demo-side .h{font-family:var(--fm);font-size:.52rem;letter-spacing:.14em;color:#5e5b69;margin:9px 8px 2px;text-transform:uppercase;}
.demo-main{padding:18px 18px 16px;min-width:0;}
.demo-main h4{font-size:1.05rem;letter-spacing:-.03em;font-weight:800;color:#fff;}
.demo-main .sub{color:#8d8a99;font-size:.68rem;margin:3px 0 12px;}
.demo-in{border:1px solid rgba(255,255,255,.1);background:#1d1c24;border-radius:9px;padding:10px 12px;min-height:44px;font-family:var(--fm);font-size:.68rem;color:#d9d6e4;display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;}
.demo-in .src{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:#555;transition:background .3s;}
.demo-in .src.sp{background:var(--sp);} .demo-in .src.yt{background:var(--yt);}
.demo-in .caret{width:1.5px;height:14px;background:var(--ac-2);animation:blink 1s steps(1) infinite;flex-shrink:0;}
.demo-in .tx{overflow:hidden;text-overflow:ellipsis;}
.demo-row{display:flex;justify-content:space-between;align-items:center;margin:10px 0 12px;gap:8px;}
.demo-pre{display:flex;gap:5px;flex-wrap:wrap;}
.demo-pre span{padding:3px 8px;border-radius:999px;background:#25232d;color:#b9b6c6;font-size:.6rem;font-weight:600;transition:background .3s,color .3s;}
.demo-pre span.on{background:var(--ac);color:#fff;}
.demo-go{padding:6px 14px;border-radius:7px;background:var(--ac);color:#fff;font-weight:700;font-size:.68rem;transition:transform .2s,filter .2s;}
.demo-go.press{transform:scale(.93);filter:brightness(1.25);}
.demo-card{border:1px solid rgba(255,255,255,.08);background:#1b1a22;border-radius:10px;padding:10px;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s;}
.demo-card.show{opacity:1;transform:none;}
.demo-hd{display:flex;gap:10px;align-items:center;margin-bottom:8px;}
.demo-art{width:38px;height:38px;border-radius:6px;background:linear-gradient(135deg,#7c3aed,#ff5c2e);flex-shrink:0;display:grid;place-items:center;color:#fff;font-weight:900;font-size:.8rem;}
.demo-art.yt{background:linear-gradient(135deg,#ff0033,#ffb199);}
.demo-hd .t{font-weight:700;font-size:.74rem;color:#fff;}
.demo-hd .m{font-size:.6rem;color:#8d8a99;}
.demo-hd .tag{margin-left:auto;font-family:var(--fm);font-size:.55rem;padding:2px 6px;border-radius:4px;background:rgba(29,185,84,.16);color:#4ade80;letter-spacing:.06em;}
.demo-hd .tag.yt{background:rgba(255,0,51,.15);color:#ff6b81;}
.trk{display:grid;grid-template-columns:14px 1fr 44px;gap:8px;align-items:center;padding:5px 2px;font-size:.66rem;color:#cfccda;}
.trk .ck{width:12px;height:12px;border-radius:3px;background:var(--ac);display:grid;place-items:center;}
.trk .ck svg{width:9px;height:9px;color:#fff;}
.trk .nm{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.trk .bar{height:4px;border-radius:4px;background:#2a2833;overflow:hidden;grid-column:2/3;margin-top:-2px;}
.trk .bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ac),#c084fc);border-radius:4px;}
.trk .st{font-family:var(--fm);font-size:.56rem;color:#8d8a99;text-align:right;}
.trk .st.ok{color:#4ade80;}
/* floating stickers */
.stk{position:absolute;z-index:3;padding:7px 12px;border:1.5px solid var(--ink);background:var(--paper);font-family:var(--fm);font-size:.7rem;font-weight:500;letter-spacing:.04em;
  box-shadow:3px 3px 0 var(--ink);white-space:nowrap;animation:bob 6s ease-in-out infinite;will-change:transform;}
.stk b{color:var(--flame);font-weight:500;}
.stk.a{top:-18px;right:8%;animation-delay:-1s;}
.stk.b{bottom:-20px;left:-4%;background:var(--ac);color:#fff;animation-delay:-3s;}
.stk.b b{color:#fff;}
.stk.c{top:auto;bottom:22%;right:-5%;background:var(--flame);color:#fff;border-color:var(--ink);animation-delay:-2s;}
.stk.c b{color:#fff;}
.stk.d{top:14%;left:-7%;animation-delay:-4.5s;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}

/* ── marquee band ─────────────────────────────────────────────── */
.mq{overflow:hidden;border-top:1.5px solid var(--line-c);border-bottom:1.5px solid var(--line-c);padding:22px 0;}
.mq-in{display:flex;gap:48px;width:max-content;animation:run 40s linear infinite;align-items:center;}
.mq:hover .mq-in{animation-play-state:paused;}
.mq span{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.045em;white-space:nowrap;}
.mq span.s{font-family:var(--fs);font-style:italic;font-weight:400;color:var(--flame-2);letter-spacing:-.01em;}
.mq svg{width:26px;height:26px;color:var(--ac-2);flex-shrink:0;}

/* ── tour ─────────────────────────────────────────────────────── */
.tour{display:grid;grid-template-columns:260px minmax(0,1fr);border:1.5px solid var(--line-c);background:var(--surf-c);box-shadow:8px 8px 0 var(--shad-c);}
.tour-tabs{border-right:1.5px solid var(--line-c);display:flex;flex-direction:column;}
.tt{position:relative;text-align:left;padding:15px 18px;border-bottom:1px solid var(--rl);display:flex;gap:12px;align-items:baseline;transition:background var(--t);overflow:hidden;}
.tt:last-child{border-bottom:none;}
.tt .ix{font-family:var(--fm);font-size:.66rem;color:var(--tx-3);}
.tt .nm{font-weight:700;font-size:.9rem;letter-spacing:-.02em;}
.tt:hover{background:var(--surf2-c);}
.tt.on{background:var(--ink);color:var(--paper);}
.tt.on .ix{color:var(--flame-2);}
.tt .pg{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--flame-2);transform:scaleX(0);transform-origin:left;}
.tt.on .pg{animation:fill var(--dur,6s) linear forwards;}
.tour.paused .tt.on .pg{animation-play-state:paused;}
@keyframes fill{to{transform:scaleX(1);}}
.tour-view{position:relative;min-width:0;display:flex;flex-direction:column;}
.tour-screen{position:relative;aspect-ratio:1440/900;overflow:hidden;background:#15141a;border-bottom:1.5px solid var(--line-c);cursor:zoom-in;}
.tour-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:scale(1.035);transition:opacity .6s ease,transform 1.2s cubic-bezier(.22,1,.36,1);}
.tour-screen img.on{opacity:1;transform:none;}
.tour-cap{padding:20px 24px;display:flex;gap:24px;align-items:flex-start;justify-content:space-between;}
.tour-cap h3{font-size:1.3rem;letter-spacing:-.035em;line-height:1.1;}
.tour-cap p{color:var(--tx-2);font-size:.93rem;margin-top:6px;max-width:620px;}
.tour-cap .ct{font-family:var(--fm);font-size:.7rem;color:var(--tx-3);white-space:nowrap;padding-top:4px;}

/* lightbox */
.lb{position:fixed;inset:0;z-index:1500;background:rgba(18,16,14,.92);display:flex;align-items:center;justify-content:center;padding:4vw;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;}
.lb.on{opacity:1;visibility:visible;}
.lb img{max-width:100%;max-height:100%;border:1.5px solid var(--paper);box-shadow:8px 8px 0 rgba(244,241,234,.3);}
.lb button{position:absolute;top:18px;right:18px;width:44px;height:44px;border:1.5px solid var(--paper);color:var(--paper);font-size:1.3rem;}

/* ── features bento ───────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));border-top:1.5px solid var(--line-c);border-left:1.5px solid var(--line-c);}
.fc{grid-column:span 4;border-right:1.5px solid var(--line-c);border-bottom:1.5px solid var(--line-c);padding:30px 28px 32px;position:relative;background:var(--surf-c);transition:background var(--t);overflow:hidden;}
.fc.w6{grid-column:span 6;}
.fc.w8{grid-column:span 8;}
.fc:hover{background:var(--surf2-c);}
.fc .ix{font-family:var(--fm);font-size:.66rem;color:var(--tx-3);letter-spacing:.1em;}
.fc .ic{width:46px;height:46px;border:1.5px solid var(--line-c);display:grid;place-items:center;margin:18px 0 22px;background:var(--paper);transition:transform var(--t),box-shadow var(--t),background var(--t),color var(--t);}
.fc .ic svg{width:22px;height:22px;}
.fc:hover .ic{transform:translate(-3px,-3px) rotate(-4deg);box-shadow:4px 4px 0 var(--ink);background:var(--flame);color:#fff;}
.fc h3{font-size:1.32rem;letter-spacing:-.035em;line-height:1.05;margin-bottom:10px;}
.fc p{color:var(--tx-2);font-size:.93rem;line-height:1.62;}
.fc .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;}
.fc .tags span{font-family:var(--fm);font-size:.64rem;padding:3px 8px;border:1px solid var(--rl-2);color:var(--tx-2);}
.fc.hl{background:var(--ink);color:var(--paper);--tx-2:#b7b1a6;--tx-3:#8a847a;--rl-2:rgba(244,241,234,.3);}
.fc.hl .ic{background:var(--ac);color:#fff;border-color:var(--ac);}
.fc.hl:hover{background:var(--ink-2);}
.fc.hl:hover .ic{box-shadow:4px 4px 0 var(--paper);}
.eqv{display:flex;gap:4px;align-items:flex-end;height:54px;margin-top:20px;}
.eqv i{flex:1;background:linear-gradient(180deg,var(--ac-2),var(--ac));height:30%;animation:eq 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.13s);}
@keyframes eq{0%{height:14%}40%{height:88%}70%{height:42%}100%{height:66%}}

/* ── deep dives (YouTube / Spotify) ───────────────────────────── */
.dive{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:72px;align-items:center;}
.dive.rev{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
.dive.rev .dive-tx{order:2;}
.dive h2{font-size:clamp(2.1rem,4.3vw,3.5rem);margin-bottom:20px;}
.dive .lede{margin-bottom:26px;}
.ul{border-top:1px solid var(--rl-2);}
.ul li{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--rl);font-size:.95rem;color:var(--tx-2);}
.ul li b{color:var(--tx);}
.ul .ix{font-family:var(--fm);font-size:.68rem;color:var(--flame);padding-top:4px;}
.ink .ul .ix{color:var(--flame-2);}
.dive-ac{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;}
.frame{position:relative;border:1.5px solid var(--line-c);box-shadow:10px 10px 0 var(--shad-c);background:#15141a;transition:transform var(--tl),box-shadow var(--tl);}
.frame:hover{transform:translate(-4px,-4px);box-shadow:14px 14px 0 var(--shad-c);}
.frame img{width:100%;height:auto;}
.frame .lbl{position:absolute;left:-1.5px;top:-30px;font-family:var(--fm);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;background:var(--line-c);color:var(--onl-c);}
.src-badge{display:flex;width:max-content;align-items:center;gap:8px;font-family:var(--fm);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;padding:6px 11px;border:1.5px solid var(--line-c);}
.src-badge i{width:9px;height:9px;border-radius:50%;display:block;}

/* ── steps ────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:0;position:relative;border:1.5px solid var(--line-c);background:var(--surf-c);}
.step{padding:32px 26px 34px;border-right:1.5px solid var(--line-c);position:relative;}
.step:last-child{border-right:none;}
.step .n{font-weight:900;font-size:4.2rem;letter-spacing:-.06em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--tx);transition:color var(--t);}
.step:hover .n{color:var(--flame);-webkit-text-stroke-color:var(--flame);}
.step h3{font-size:1.2rem;letter-spacing:-.03em;margin:22px 0 10px;}
.step p{font-size:.92rem;color:var(--tx-2);}
.steps-line{position:absolute;left:0;top:-1.5px;height:3px;width:100%;background:var(--flame);transform:scaleX(0);transform-origin:left;transition:transform 1.6s cubic-bezier(.22,1,.36,1);}
.steps.in .steps-line{transform:scaleX(1);}
.note{margin-top:28px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:22px 24px;border:1.5px dashed var(--rl-3);font-size:.93rem;color:var(--tx-2);}
.note .t{font-family:var(--fm);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--flame);padding-top:3px;white-space:nowrap;}
.note b{color:var(--tx);}

/* ── formats ──────────────────────────────────────────────────── */
.fmts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1.5px solid var(--line-c);border-left:1.5px solid var(--line-c);}
.fm{border-right:1.5px solid var(--line-c);border-bottom:1.5px solid var(--line-c);padding:22px 18px;transition:background var(--t),color var(--t);}
.fm:hover{background:var(--line-c);color:var(--onl-c);}
.fm .x{font-weight:900;font-size:1.6rem;letter-spacing:-.05em;}
.fm .d{font-family:var(--fm);font-size:.64rem;letter-spacing:.06em;color:var(--tx-3);margin-top:4px;}
.fm:hover .d{color:inherit;opacity:.7;}
.fm .k{display:inline-block;margin-top:12px;font-family:var(--fm);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border:1px solid currentColor;opacity:.7;}

/* ── video ────────────────────────────────────────────────────── */
.vid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:center;}
.yt{position:relative;aspect-ratio:16/9;border:1.5px solid var(--line-c);box-shadow:10px 10px 0 var(--shad-c);background:#000 center/cover no-repeat;overflow:hidden;cursor:pointer;}
.yt img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1),filter .4s;}
.yt:hover img{transform:scale(1.04);filter:brightness(.8);}
.yt .pl{position:absolute;inset:0;display:grid;place-items:center;}
.yt .pl span{width:86px;height:86px;border-radius:50%;background:var(--flame);display:grid;place-items:center;border:1.5px solid var(--paper);box-shadow:4px 4px 0 var(--paper);transition:transform var(--t);}
.yt:hover .pl span{transform:scale(1.08);}
.yt .pl svg{width:30px;height:30px;color:#fff;margin-left:4px;}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.vid-l{margin-top:22px;display:flex;flex-direction:column;gap:10px;}
.vid-l a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--line-c);font-weight:700;font-size:.9rem;transition:background var(--t),color var(--t);}
.vid-l a:hover{background:var(--line-c);color:var(--onl-c);}
.vid-l a span{font-family:var(--fm);font-size:.66rem;font-weight:400;opacity:.7;}

/* ── compare ──────────────────────────────────────────────────── */
.cmp{border:1.5px solid var(--line-c);overflow-x:auto;background:var(--surf-c);-webkit-overflow-scrolling:touch;}
.cmp table{width:100%;border-collapse:collapse;min-width:760px;font-size:.92rem;}
.cmp th,.cmp td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--rl);vertical-align:top;}
.cmp thead th{font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3);font-weight:500;border-bottom:1.5px solid var(--line-c);}
.cmp thead th.me{background:var(--ink);color:var(--paper);}
.cmp td.me{background:var(--flame-w);font-weight:700;}
.cmp tbody tr:last-child td{border-bottom:none;}
.cmp tbody tr{transition:background var(--t);}
.cmp tbody tr:hover{background:var(--paper-2);}
.cmp tbody th{font-weight:700;}
.c-y{color:#15803d;font-weight:700;}
.c-n{color:var(--flame);}
.cmp small{display:block;font-size:.76rem;color:var(--tx-3);font-weight:400;margin-top:2px;}

/* ── platforms / download ─────────────────────────────────────── */
.plats{display:grid;grid-template-columns:repeat(var(--pc,3),minmax(0,1fr));gap:24px;}
.pl-c{border:1.5px solid var(--line-c);padding:28px 26px;background:var(--surf-c);display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t);}
.pl-c:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--shad-c);}
.pl-c.me{border-color:var(--flame-2);box-shadow:6px 6px 0 var(--flame-2);}
.pl-c .hd{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.pl-c .hd svg{width:30px;height:30px;}
.pl-c h3{font-size:1.5rem;letter-spacing:-.04em;}
.pl-c .yours{margin-left:auto;font-family:var(--fm);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;background:var(--flame-2);color:#fff;display:none;}
.pl-c.me .yours{display:inline-block;}
.pl-c dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.84rem;margin-bottom:20px;}
.pl-c dt{font-family:var(--fm);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);padding-top:3px;}
.pl-c dd{color:var(--tx-2);}
.pl-c .fl{display:flex;flex-direction:column;gap:8px;margin-top:auto;}
.pl-c .fl .btn{width:100%;justify-content:space-between;}
.pl-c .fl .btn span.sz{font-family:var(--fm);font-size:.68rem;font-weight:400;opacity:.85;}
.pl-c .how{margin-top:16px;font-size:.8rem;color:var(--tx-3);line-height:1.55;}
.pl-c .how code{font-size:.74rem;}

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start;}
.faq-g .side{position:sticky;top:calc(var(--nav) + 30px);}
.faq details{border-top:1.5px solid var(--line-c);}
.faq details:last-child{border-bottom:1.5px solid var(--line-c);}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 2px;font-weight:700;font-size:1.04rem;letter-spacing:-.02em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';font-family:var(--fm);font-weight:400;font-size:1.3rem;line-height:1;transition:transform var(--t);color:var(--flame);flex-shrink:0;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .a{padding:0 2px 22px;color:var(--tx-2);font-size:.96rem;line-height:1.7;max-width:720px;}
.faq .a p+p{margin-top:10px;}
.faq .a a{text-decoration:underline;text-underline-offset:3px;}

/* ── guides ───────────────────────────────────────────────────── */
.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.gd{border:1.5px solid var(--line-c);background:var(--surf-c);display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t);}
.gd:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--shad-c);}
.gd .im{aspect-ratio:16/9;overflow:hidden;border-bottom:1.5px solid var(--line-c);background:#15141a;}
.gd .im img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .8s cubic-bezier(.22,1,.36,1);}
.gd:hover .im img{transform:scale(1.05);}
.gd .bd{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.gd .k{font-family:var(--fm);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--flame);}
.gd h3{font-size:1.22rem;letter-spacing:-.035em;line-height:1.12;margin:10px 0 8px;}
.gd p{font-size:.9rem;color:var(--tx-2);}
.gd .go{margin-top:auto;padding-top:16px;font-weight:700;font-size:.84rem;display:flex;align-items:center;gap:6px;}
.gd .go svg{width:14px;height:14px;transition:transform var(--t);}
.gd:hover .go svg{transform:translateX(4px);}

/* ── CTA ──────────────────────────────────────────────────────── */
.cta{background:var(--flame);color:#fff;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);padding:110px 0;overflow:hidden;position:relative;}
.cta h2{font-size:clamp(2.6rem,7vw,6rem);line-height:.9;max-width:12ch;}
.cta h2 em{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.01em;}
.cta p{font-size:1.12rem;max-width:520px;margin:24px 0 34px;opacity:.92;}
.cta .btn-fill{background:var(--ink);border-color:var(--ink);box-shadow:4px 4px 0 #fff;}
.cta .btn-fill:hover{box-shadow:7px 7px 0 #fff;}
.cta .btn-line{border-color:#fff;color:#fff;}
.cta .btn-line:hover{background:#fff;color:var(--flame);box-shadow:5px 5px 0 var(--ink);}
.cta-big{position:absolute;right:-2vw;bottom:-6vw;font-weight:900;font-size:26vw;letter-spacing:-.08em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.28);pointer-events:none;user-select:none;}
.cta-g{position:relative;z-index:1;}

/* ── footer ───────────────────────────────────────────────────── */
footer{border-top:1.5px solid var(--line-c);padding:64px 0 32px;}
.ft-g{display:grid;grid-template-columns:1.8fr repeat(3,minmax(0,1fr));gap:40px;margin-bottom:52px;}
.ft-g .mark .lg{background:var(--paper);color:var(--ink);}
.ft-bl{font-size:.9rem;line-height:1.65;color:var(--tx-2);margin:18px 0 0;max-width:340px;}
.ft-h{font-family:var(--fm);font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;color:var(--tx-3);margin-bottom:16px;}
.ft-c li{margin-bottom:10px;}
.ft-c a{font-size:.88rem;color:var(--tx-2);transition:color var(--t);}
.ft-c a:hover{color:var(--flame-2);}
.ft-legal{font-size:.8rem;color:var(--tx-3);line-height:1.6;border-top:1px solid var(--rl);padding-top:22px;margin-bottom:18px;max-width:900px;}
.ft-b{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--fm);font-size:.7rem;color:var(--tx-3);}
.ft-b a:hover{color:var(--flame-2);}

.totop{position:fixed;right:22px;bottom:22px;z-index:800;width:46px;height:46px;background:var(--flame);color:#fff;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:var(--t);}
.totop.on{opacity:1;visibility:visible;transform:none;}
.totop:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.totop svg{width:18px;height:18px;}

/* ── article pages (guides) ───────────────────────────────────── */
.art-hero{padding:64px 0 48px;border-bottom:1.5px solid var(--line-c);}
.crumbs{font-family:var(--fm);font-size:.7rem;letter-spacing:.04em;color:var(--tx-3);margin-bottom:26px;}
.crumbs a{text-decoration:underline;text-underline-offset:3px;}
.crumbs a:hover{color:var(--flame);}
.art-hero h1{font-size:clamp(2.4rem,5.6vw,4.6rem);max-width:17ch;}
.art-hero .lede{margin-top:22px;max-width:720px;font-size:1.12rem;}
.art-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px;font-family:var(--fm);font-size:.7rem;color:var(--tx-3);}
.art{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;padding:64px 0 100px;}
.toc{position:sticky;top:calc(var(--nav) + 28px);align-self:start;}
.toc p{font-family:var(--fm);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);margin-bottom:12px;}
.toc a{display:block;font-size:.84rem;color:var(--tx-2);padding:6px 0 6px 12px;border-left:1.5px solid var(--rl);transition:color var(--t),border-color var(--t);}
.toc a:hover,.toc a.on{color:var(--tx);border-left-color:var(--flame);}
.toc a.btn{display:flex;margin-top:22px;width:100%;padding:11px 16px;border:1.5px solid var(--flame);color:#fff;font-size:.84rem;}
.toc a.btn:hover{color:#fff;border-color:var(--flame);}
.prose{max-width:760px;}
.prose section{margin-bottom:56px;}
.prose h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:18px;}
.prose h3{font-size:1.2rem;letter-spacing:-.03em;margin-bottom:8px;}
.prose p{color:var(--tx-2);font-size:1.02rem;line-height:1.75;margin-bottom:14px;}
.prose p strong,.prose li strong{color:var(--tx);}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--flame);}
.prose a:hover{color:var(--flame);}
.prose ul.dots{margin:0 0 16px 0;}
.prose ul.dots li{position:relative;padding-left:22px;color:var(--tx-2);margin-bottom:8px;line-height:1.7;}
.prose ul.dots li::before{content:'';position:absolute;left:2px;top:.72em;width:8px;height:8px;background:var(--flame);}
.prose .steps-v{border:1.5px solid var(--line-c);margin:10px 0 26px;background:var(--surf-c);counter-reset:s;}
.prose .steps-v article{padding:22px 24px 20px 78px;border-bottom:1px solid var(--rl);position:relative;}
.prose .steps-v article:last-child{border-bottom:none;}
.prose .steps-v article::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:22px;top:18px;font-weight:900;font-size:1.9rem;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.2px var(--tx);}
.prose .steps-v article p{margin-bottom:0;font-size:.97rem;}
.prose figure{margin:26px 0;}
.prose figure .frame{box-shadow:8px 8px 0 var(--shad-c);}
.prose figcaption{font-family:var(--fm);font-size:.7rem;color:var(--tx-3);margin-top:14px;}
.prose .cmp{margin:8px 0 16px;}
.prose .cmp table{min-width:620px;}
.prose .faq{margin-top:8px;}
.callout{border:1.5px solid var(--line-c);background:var(--flame-w);padding:18px 22px;margin:18px 0;font-size:.95rem;color:var(--tx-2);}
.callout b{color:var(--tx);}
.term{font-family:var(--fm);font-size:.84rem;background:var(--ink);color:var(--paper);padding:16px 18px;margin:12px 0 18px;overflow-x:auto;white-space:pre;}
.term code{background:none;border:0;padding:0;font-size:inherit;color:inherit;}
.steps-v .term{margin:12px 0 0;}
.term .p{color:var(--flame-2);user-select:none;}
.related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.related a{border:1.5px solid var(--line-c);padding:18px 20px;display:block;text-decoration:none!important;transition:background var(--t),color var(--t);}
.related a:hover{background:var(--line-c);color:var(--onl-c)!important;}
.related a b{display:block;font-size:1rem;letter-spacing:-.02em;}
.related a span{font-family:var(--fm);font-size:.66rem;color:var(--tx-3);}
.related a:hover span{color:inherit;opacity:.75;}

/* ── responsive ───────────────────────────────────────────────── */
@media (max-width:1180px){
  .links a{padding:8px 9px;}
  .links a::after{left:9px;right:9px;}
  .mark{margin-right:14px;}
  .mark .e{display:none;}
}
@media (max-width:1024px){
  .links{display:none;}
  .burger{display:flex;}
  .nav-r{margin-left:auto;}
  .hero-g{grid-template-columns:minmax(0,1fr);gap:72px;}
  .stage{max-width:640px;margin:0 auto;width:100%;}
  .dive,.dive.rev{grid-template-columns:minmax(0,1fr);gap:48px;}
  .dive.rev .dive-tx{order:0;}
  .tour{grid-template-columns:minmax(0,1fr);}
  .tour-tabs{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1.5px solid var(--line-c);scrollbar-width:none;}
  .tour-tabs::-webkit-scrollbar{display:none;}
  .tt{border-bottom:none;border-right:1px solid var(--rl);flex-shrink:0;padding:13px 16px;}
  .fc,.fc.w6,.fc.w8{grid-column:span 6;}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .step:nth-child(2){border-right:none;}
  .step:nth-child(-n+2){border-bottom:1.5px solid var(--line-c);}
  .fmts{grid-template-columns:repeat(3,minmax(0,1fr));}
  .vid{grid-template-columns:minmax(0,1fr);gap:36px;}
  .plats{grid-template-columns:minmax(0,1fr);}
  .faq-g{grid-template-columns:minmax(0,1fr);gap:36px;}
  .faq-g .side{position:static;}
  .guides{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ft-g{grid-template-columns:repeat(2,minmax(0,1fr));}
  .art{grid-template-columns:minmax(0,1fr);gap:0;}
  .toc{display:none;}
}
@media (max-width:640px){
  .wrap,.nav-in{padding:0 16px;}
  .drawer{padding:18px 16px 40px;}
  .sec{padding:84px 0;}
  .sec-sm{padding:60px 0;}
  .hero{padding:44px 0 72px;}
  .gh{display:none;}
  .mark{margin-right:6px;}
  .mark .n{font-size:1.06rem;}
  .l-lg{display:none;}.l-sm{display:inline;}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stat:nth-child(2){border-right:none;}
  .stat:nth-child(-n+2){border-bottom:1.5px solid var(--line-c);}
  .demo{transform:none!important;box-shadow:6px 6px 0 var(--ink);}
  .demo-body{grid-template-columns:minmax(0,1fr);min-height:0;}
  .demo-side{display:none;}
  .stk.c,.stk.d{display:none;}
  .stk.a{right:4px;}
  .stk.b{left:4px;}
  .fc,.fc.w6,.fc.w8{grid-column:span 12;}
  .steps{grid-template-columns:minmax(0,1fr);}
  .step{border-right:none;border-bottom:1.5px solid var(--line-c);}
  .step:last-child{border-bottom:none;}
  .fmts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tour{box-shadow:5px 5px 0 var(--shad-c);}
  .tour-cap{flex-direction:column;gap:6px;padding:18px;}
  .guides{grid-template-columns:minmax(0,1fr);}
  .ft-g{grid-template-columns:minmax(0,1fr);}
  .frame{box-shadow:6px 6px 0 var(--shad-c);}
  .note{grid-template-columns:minmax(0,1fr);gap:8px;}
  .related{grid-template-columns:minmax(0,1fr);}
  .prose .steps-v article{padding:18px 18px 18px 64px;}
  .prose .steps-v article::before{left:16px;font-size:1.6rem;}
  .cta{padding:84px 0;}
}
@media (max-width:420px){
  .mark{flex-shrink:1;min-width:0;}
  .mark .n{font-size:.96rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
@media (hover:none){.cur,.cur-r{display:none;}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .js .rv{opacity:1;transform:none;}
  .js .split .w>span{transform:none;}
  .top-in,.mq-in{animation:none!important;}
  .demo{transform:none;}
}

/* ═══ product hero demos (shared file; each page uses one) ═══════ */
/* Claude Multi */
.cm-body{display:grid;grid-template-columns:150px 1fr;min-height:390px;font-size:.72rem;background:#1f1e1b;color:#e8e4dc;}
.cm-side{border-right:1px solid rgba(255,255,255,.07);padding:12px 10px;display:flex;flex-direction:column;gap:4px;}
.cm-side .br{display:flex;align-items:center;gap:7px;font-weight:800;font-size:.76rem;margin-bottom:10px;}
.cm-side .br i{width:18px;height:18px;border-radius:5px;background:#d97757;display:grid;place-items:center;color:#fff;font-style:normal;font-size:.7rem;}
.cm-side .h{font-family:var(--fm);font-size:.5rem;letter-spacing:.14em;color:#77736b;margin:8px 4px 3px;text-transform:uppercase;}
.cm-acc{display:grid;grid-template-columns:18px 1fr;gap:7px;align-items:center;padding:6px 6px;border-radius:7px;transition:background .35s;}
.cm-acc .av{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.55rem;font-weight:800;color:#fff;}
.cm-acc .nm{font-weight:700;font-size:.66rem;line-height:1.1;}
.cm-acc .st{font-family:var(--fm);font-size:.52rem;color:#8d887e;display:block;margin-top:2px;}
.cm-acc.on{background:rgba(217,119,87,.18);}
.cm-acc.cool .st{color:#e3a64b;}
.cm-acc.on .st{color:#6ed19a;}
.cm-main{display:flex;flex-direction:column;min-width:0;position:relative;}
.cm-top{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.07);font-weight:700;font-size:.7rem;}
.cm-chip{font-family:var(--fm);font-size:.55rem;padding:3px 8px;border-radius:999px;background:rgba(110,209,154,.14);color:#6ed19a;transition:all .4s;}
.cm-log{flex:1;padding:12px 14px;display:flex;flex-direction:column;gap:8px;overflow:hidden;}
.cm-u{align-self:flex-end;max-width:80%;background:#34322d;padding:7px 10px;border-radius:10px;font-size:.66rem;}
.cm-a{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:.66rem;line-height:1.5;color:#dcd7cd;}
.cm-a .ic{width:18px;height:18px;border-radius:5px;background:#d97757;color:#fff;display:grid;place-items:center;font-size:.6rem;}
.cm-tool{border:1px solid rgba(255,255,255,.1);border-radius:7px;padding:5px 8px;font-family:var(--fm);font-size:.56rem;color:#b9b4a9;margin-top:5px;display:flex;justify-content:space-between;}
.cm-tool b{color:#6ed19a;font-weight:500;}
.cm-toast{position:absolute;left:50%;top:46px;transform:translate(-50%,-14px);opacity:0;background:#2b2926;border:1px solid #e3a64b;color:#f4e6cf;border-radius:9px;padding:8px 12px;font-size:.62rem;width:84%;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:all .45s cubic-bezier(.22,1,.36,1);z-index:2;}
.cm-toast.show{opacity:1;transform:translate(-50%,0);}
.cm-toast b{color:#e3a64b;}
.cm-in{margin:0 12px 12px;border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:8px 10px;color:#77736b;font-size:.62rem;display:flex;justify-content:space-between;}
.cm-in span:last-child{font-family:var(--fm);font-size:.55rem;}
.cm-cursor{display:inline-block;width:6px;height:11px;background:#d97757;vertical-align:-1px;margin-left:2px;animation:blink 1s steps(1) infinite;}

/* Chartwright */
.cw-body{display:grid;grid-template-columns:1.35fr 1fr;min-height:390px;background:#0f0e0c;color:#e9e3d6;font-size:.7rem;}
.cw-chart{position:relative;border-right:1px solid rgba(255,255,255,.07);padding:10px 8px 8px;display:flex;flex-direction:column;}
.cw-hd{display:flex;gap:8px;align-items:baseline;font-family:var(--fm);font-size:.56rem;color:#9c9587;margin-bottom:6px;}
.cw-hd b{color:#f1e9da;font-size:.7rem;font-weight:500;}
.cw-hd .ch{color:#6ed19a;}
.cw-svg{flex:1;width:100%;min-height:280px;}
.cw-svg .lv{stroke-dasharray:4 3;stroke-width:1;opacity:0;transition:opacity .6s;}
.cw-svg .lv.show{opacity:1;}
.cw-svg text{font-family:'JetBrains Mono',monospace;font-size:8px;}
.cw-note{font-family:var(--fm);font-size:.5rem;color:#6d675c;margin-top:4px;}
.cw-panel{padding:12px 12px;display:flex;flex-direction:column;gap:8px;}
.cw-read{font-family:var(--fs);font-size:1.02rem;line-height:1.2;color:#f1e9da;min-height:2.5em;}
.cw-read em{color:#e3b34b;}
.cw-tags{display:flex;gap:4px;flex-wrap:wrap;}
.cw-tags span{font-family:var(--fm);font-size:.5rem;padding:2px 5px;border:1px solid rgba(255,255,255,.18);color:#c8c0b0;letter-spacing:.04em;}
.cw-agree{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px;}
.cw-agree div{font-family:var(--fm);font-size:.5rem;color:#8d8678;letter-spacing:.1em;}
.cw-agree b{display:block;font-family:var(--fd);font-size:1.5rem;color:#f1e9da;letter-spacing:-.04em;line-height:1;margin-top:3px;}
.cw-agree i{display:block;height:3px;background:#2b2823;margin-top:5px;position:relative;overflow:hidden;}
.cw-agree i::after{content:'';position:absolute;inset:0;width:var(--w,0%);background:var(--c,#6ed19a);transition:width 1s cubic-bezier(.22,1,.36,1);}
.cw-checks{display:flex;flex-direction:column;gap:3px;}
.cw-ck{display:grid;grid-template-columns:12px 1fr auto;gap:6px;font-size:.6rem;color:#cfc7b7;opacity:0;transform:translateX(8px);transition:all .35s;}
.cw-ck.show{opacity:1;transform:none;}
.cw-ck .m{font-weight:800;}
.cw-ck .m.y{color:#6ed19a;} .cw-ck .m.n{color:#f07b6b;}
.cw-ck .w{font-family:var(--fm);font-size:.5rem;color:#8d8678;}
.cw-foot{font-family:var(--fm);font-size:.5rem;color:#8d8678;border-top:1px solid rgba(255,255,255,.08);padding-top:6px;margin-top:auto;}

/* PurffleShorts */
.ps-wrap{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;}
.ps-phone{position:relative;width:220px;aspect-ratio:9/16;border:1.5px solid var(--ink);border-radius:26px;background:#000;overflow:hidden;box-shadow:10px 10px 0 var(--ink);}
.ps-bg{position:absolute;inset:-12%;background-size:cover;background-position:center;transition:opacity .8s;animation:kb 7s ease-in-out infinite alternate;}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.15) translate(-3%,-4%)}}
.ps-hook{position:absolute;left:12px;right:12px;top:40px;text-align:center;font-weight:900;font-size:1.02rem;letter-spacing:-.03em;line-height:1.05;color:#fff;text-shadow:0 2px 0 #000,0 0 16px rgba(0,0,0,.6);opacity:0;transform:translateY(-8px);transition:all .5s;}
.ps-hook.show{opacity:1;transform:none;}
.ps-cap{position:absolute;left:10px;right:10px;bottom:74px;text-align:center;font-weight:900;font-size:1.28rem;letter-spacing:-.02em;color:#fff;text-transform:uppercase;line-height:1.05;text-shadow:0 3px 0 #000,0 0 3px #000;min-height:2.2em;}
.ps-cap span{display:inline-block;margin:0 3px;transition:transform .15s,color .15s;}
.ps-cap span.on{color:#ffe14d;transform:scale(1.12);}
.ps-prog{position:absolute;left:0;bottom:0;height:4px;width:0;background:#ffe14d;}
.ps-ui{position:absolute;right:10px;bottom:110px;display:flex;flex-direction:column;gap:12px;color:#fff;font-size:.62rem;text-align:center;opacity:.85;}
.ps-ui i{display:block;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);margin:0 auto 3px;}
.ps-steps{display:flex;flex-direction:column;gap:0;border:1.5px solid var(--line-c);background:var(--surf-c);box-shadow:6px 6px 0 var(--shad-c);}
.ps-st{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--rl);font-size:.84rem;transition:background .3s;}
.ps-st:last-child{border-bottom:none;}
.ps-st .n{font-family:var(--fm);font-size:.64rem;color:var(--tx-3);}
.ps-st b{font-weight:700;letter-spacing:-.02em;}
.ps-st small{display:block;font-size:.72rem;color:var(--tx-3);font-weight:400;}
.ps-st .s{font-family:var(--fm);font-size:.62rem;color:var(--tx-3);}
.ps-st.run{background:var(--flame-w);}
.ps-st.run .s{color:var(--flame);}
.ps-st.ok .s{color:#15803d;}
.ps-st.ok .n{color:#15803d;}
@media (max-width:640px){
  .cm-body{grid-template-columns:minmax(0,1fr);}
  .cm-side{display:none;}
  .cw-body{grid-template-columns:minmax(0,1fr);}
  .cw-panel{border-top:1px solid rgba(255,255,255,.07);}
  .ps-wrap{grid-template-columns:minmax(0,1fr);justify-items:center;}
  .ps-steps{width:100%;}
}