/* Apeks landing, locked build (Gate F-lock, 30 Oct 2026). Brand: Satoshi, palette A, quick and never bouncy.
   The take (chapters I-III) is one pinned stage drawn on the comps' 1586x992 canvas: every length inside .cv is a canvas pixel.
   Engines: GSAP + ScrollTrigger own every transform/opacity/clip inside the take; CSS owns UI states and the strike/print reveals;
   plain JS owns the pill and the receipt calculator. Still twins (phones, reduced motion, Motion off) are pure CSS below. */
@font-face{font-family:Satoshi;src:url("assets/satoshi.woff2") format("woff2");font-weight:300 900;font-display:swap}
:root{--chalk:#F7F7F2;--ink:#191A20;--blue:#2C52D0;--coral:#FF725E;--yellow:#F0E99B;--lav:#C5B7EB;--mute:#5d5e66;
  --ease:cubic-bezier(.16,1,.3,1);--fast:.42s;--gut:clamp(16px,4vw,64px);--s:1;
  --grad:linear-gradient(90deg,#FF725E 0%,#E879A6 45%,#A99BF2 100%)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--chalk)}
body{margin:0;overflow-x:clip;background:var(--chalk);color:var(--ink);font:400 17px/1.5 Satoshi,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2{font-weight:700;margin:0}
p{margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:99}.skip:focus{left:8px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{max-width:1312px;margin:0 auto;padding:0 var(--gut)}

/* header: floats over the take, logo left, motion control right */
.hdr{position:absolute;z-index:40;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 var(--gut);pointer-events:none}
.hdr>*{pointer-events:auto}
.brand{color:var(--ink);display:flex}.lockup{height:24px;width:auto}
.motion{border:1px solid #191A2026;background:#F7F7F2b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:10px 14px;font:500 13px Satoshi;color:var(--ink);cursor:pointer;min-height:44px}

/* ---------- the take ---------- */
.stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--chalk)}
.cv{position:absolute;left:50%;top:50%;width:1586px;height:992px;transform:translate(-50%,-50%) scale(var(--s));transform-origin:50% 50%}
.sc{position:absolute;inset:0}
.pl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.eyebrow{font-weight:500;letter-spacing:.3em}

/* phone (photoreal frame + live screen). Screen box measured from phone.webp: 20.2% / 4.7% / 57.3% / 89%. */
.ph{position:absolute;aspect-ratio:1059/1485}
.ph-f{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:2;pointer-events:none}
.ph-s{position:absolute;left:20.2%;top:4.7%;width:57.3%;height:89%;border-radius:12%/5.4%;overflow:hidden;background:var(--chalk);container-type:inline-size;z-index:1}
.hs::before,.fs::before{content:"";position:absolute;z-index:5;left:37%;top:1.4%;width:26%;height:3.3%;border-radius:99px;background:#060608}

/* living screens */
.hs{position:absolute;overflow:hidden;border-radius:12%/5.6%;background:var(--chalk);container-type:inline-size;transform:rotate(var(--rot))}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;padding:17% 7% 7%;opacity:0;visibility:hidden;transform:translateY(8px);color:var(--ink);
  transition:opacity var(--fast) var(--ease),transform var(--fast) var(--ease),visibility 0s linear var(--fast)}
.scr.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mini{display:inline-flex;width:6cqw;height:6cqw}.mini svg{width:100%;height:100%}
.top{display:flex;justify-content:space-between;align-items:center;font-size:3.6cqw;font-weight:700;letter-spacing:.1em}
.sub{font-size:4.6cqw;color:var(--mute);margin:2cqw 0 0;text-align:center}.sub.l{text-align:left;margin-top:8%}
.scr-sun,.scr-notif{background:var(--ink);color:#F7F7F2}
.lock-t{text-align:center;margin:10% 0 12%}.lock-t b{display:block;font-size:19cqw;font-weight:600;letter-spacing:-.04em;line-height:1}.lock-t span{font-size:4.4cqw;opacity:.7}
.note{background:#ffffff17;border:1px solid #ffffff14;border-radius:6cqw;padding:4.6cqw 5cqw;color:#F7F7F2}.note.dim{opacity:.7;margin-top:3cqw}
.note-h{display:flex;align-items:center;gap:2cqw;font-size:3.2cqw;font-weight:700;letter-spacing:.08em;opacity:.8}
.note-h .mini{background:#F7F7F2;color:var(--ink);border-radius:1.6cqw;padding:.9cqw}
.note strong{display:block;font-size:5.3cqw;margin-top:2cqw}.note p{font-size:4.5cqw;line-height:1.35;margin:1cqw 0 0;opacity:.85}
.note.coral{background:var(--coral);border-color:transparent;color:var(--ink)}.note.coral .note-h .mini{background:var(--ink);color:var(--coral)}
.tick{width:48cqw;height:48cqw;margin:12% auto 6%}.tick svg{width:100%;height:100%}
.draw{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset .52s cubic-bezier(.65,0,.35,1) .16s}
.on .draw{stroke-dashoffset:0}
.big{display:block;text-align:center;font-size:10cqw;font-weight:700;letter-spacing:-.04em}
.crew{display:flex;align-items:center;gap:3cqw;margin-top:auto;background:#fff;border-radius:6cqw;padding:4cqw;font-size:4.2cqw;line-height:1.3;color:var(--ink)}
.faces{display:flex}.faces i{width:8.5cqw;height:8.5cqw;border-radius:50%;border:.8cqw solid #fff;margin-left:-2.4cqw}.faces i:first-child{margin-left:0}
.faces .you{background:var(--ink);color:#fff;font-style:normal;font-size:2.8cqw;display:grid;place-items:center;font-weight:700}
.title{display:block;font-size:9.4cqw;font-weight:600;letter-spacing:-.045em;line-height:1.02;margin:6% 0}
.scr .board{background:var(--ink);color:#F7F7F2;border-radius:7cqw;padding:5cqw}
.board-l{display:flex;justify-content:space-between;font-size:3.2cqw;letter-spacing:.08em;opacity:.7}
.count{display:flex;align-items:flex-end;gap:2cqw;margin:2cqw 0 3cqw}.count b{font-size:25cqw;line-height:.9;font-weight:600}
.count span{font-size:8cqw;color:var(--lav);line-height:1}.count small{display:block;font-size:3.4cqw;color:#F7F7F2b3;margin-top:1.5cqw}
.days{display:flex;justify-content:space-between}.days span{width:8.4cqw;height:8.4cqw;border-radius:50%;display:grid;place-items:center;font-size:3.2cqw;background:#ffffff14}
.days .on{background:var(--lav);color:var(--ink);font-weight:700}.days .next{background:none;border:.5cqw dashed var(--coral)}
.row{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:5cqw;padding:3.6cqw 4.4cqw;margin-top:3cqw;font-size:3.3cqw;letter-spacing:.06em}
.row b{display:block;font-size:4.6cqw;letter-spacing:-.01em;margin-top:.6cqw;font-weight:600}.row svg{width:5cqw;height:5cqw}.row.duo{background:var(--yellow)}
.price{display:block;font-size:23cqw;font-weight:700;letter-spacing:-.05em;line-height:1;margin:2% 0 6%}
.bars{display:flex;align-items:flex-end;gap:2.4cqw;height:30cqw}
.bars i{flex:1;height:var(--h);border-radius:2cqw 2cqw 1cqw 1cqw;background:var(--lav);transform-origin:bottom;transform:scaleY(.2);transition:transform .6s var(--ease) calc(var(--i)*60ms)}
.bars i:last-child{background:var(--blue)}.on .bars i{transform:none}
.scr .fine{font-size:3.2cqw;margin:auto 0 0;color:var(--mute)}
.scr-chart{background:#15161b;color:#F7F7F2}
.chart{display:flex;align-items:flex-end;gap:5cqw;height:46cqw;margin-top:auto;padding:0 3cqw 10cqw}.chart i{flex:1;height:var(--h);border-radius:2.4cqw}
.scr-notif .note{margin-top:4cqw}
.scr-morn{background:linear-gradient(165deg,#F4EFEA 0%,#F1E2D6 46%,#F5B9A3 78%,#F39C83 100%);padding:34% 4% 0}
.note.lt{display:flex;align-items:center;gap:3cqw;background:#ffffffe6;color:var(--ink);border:0;padding:3.6cqw;box-shadow:0 3cqw 6cqw -3cqw #0003}
.note.lt p{font-size:5.6cqw;line-height:1.3;margin:0;opacity:1}
.ni{flex:none;width:11cqw;height:11cqw;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center}.ni svg{width:62%;height:62%}

/* hero (F01) */
.sc-hero h1{position:absolute;left:0;right:0;top:60px;text-align:center;font-size:84px;line-height:76px;letter-spacing:-.055em;font-weight:800}
.sc-hero h1 em{font-style:normal;color:var(--blue)}
.sc-hero .lede{position:absolute;left:0;right:0;top:229px;text-align:center;font-size:21px;font-weight:500;letter-spacing:-.005em}
.btn{position:absolute;left:645px;top:270px;width:297px;height:46px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;background:var(--ink);color:#fff;
  font:500 19px Satoshi,sans-serif;text-decoration:none;transition:background .2s}
.btn svg{width:20px;height:20px}.btn:hover{background:#2a2b33}
.hcs{position:absolute;inset:0;pointer-events:none}
.hc{position:absolute;display:flex;align-items:center;gap:16px;background:#fffffff2;border-radius:20px;padding:0 18px 0 18px;
  box-shadow:0 1px 0 #fff inset,0 22px 44px -22px #0007,0 6px 14px -8px #0003;transition:opacity var(--fast) var(--ease),scale var(--fast) var(--ease)}
.hc-i{flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center}.hc-i svg{width:26px;height:26px}
.hc-t{font-size:18px;line-height:1.3;color:#3a3b42;letter-spacing:-.015em;white-space:nowrap}.hc-t b{font-weight:500;color:var(--ink)}
.hc.l1{left:240px;top:350px;width:308px;height:110px;rotate:4deg}.hc.l1 .hc-t{font-size:19px}
.hc.l2{left:200px;top:482px;width:363px;height:112px;rotate:2deg}.hc.l2 .hc-i{width:64px;height:64px}.hc.l2 .hc-i svg{width:34px;height:34px}.hc.l2 .hc-t{font-size:21px}
.hc.l3{left:268px;top:632px;width:260px;height:80px;rotate:1deg}.hc.l3 .hc-t{font-size:17px}.hc.l3 .hc-i{width:52px;height:52px}
.hc.r1{left:1040px;top:356px;width:325px;height:104px;rotate:-4deg}.hc.r1 .hc-t{font-size:16.5px}
.hc.r2{left:1050px;top:494px;width:358px;height:104px;rotate:-1.5deg}.hc.r2 .hc-t{font-size:19px}
.hc.r3{left:1080px;top:640px;width:353px;height:80px;rotate:1deg}.hc.r3 .hc-i{width:48px;height:48px}.hc.r3 .hc-t{font-size:15.5px}
.hc.lit{scale:1.03}
.pill{position:absolute;left:523px;top:873px;width:540px;height:53px;display:flex;align-items:center;padding:0 6px;border-radius:999px;background:var(--ink);box-shadow:0 18px 40px -16px #000a}
.pill button{all:unset;flex:1;text-align:center;cursor:pointer;position:relative;height:41px;line-height:41px;border-radius:999px;font:500 17px Satoshi;color:#F7F7F2cc;transition:background .2s,color .2s}
.pill button+button::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:1px;background:#ffffff40}
.pill button[aria-selected="true"]{background:#ffffff1f;color:#fff}.pill button[aria-selected="true"]::before,.pill button[aria-selected="true"]+button::before{opacity:0}
.pill button:hover{color:#fff}.pill button:focus-visible{outline:2px solid #fff;outline-offset:-2px}

/* I · Starts Monday (F03) */
.sc-mon .eyebrow{position:absolute;left:0;right:0;top:110px;text-align:center;font-size:21px}
.nodes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nodes text{font:600 27px Satoshi,sans-serif;letter-spacing:-.03em;text-anchor:middle;fill:var(--ink)}
.curve{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:.1 13}
.nd{transform-box:fill-box;transform-origin:50% 50%}
.npill{position:absolute;left:622px;top:384px;width:343px;height:49px;border-radius:999px;background:var(--ink);color:#F7F7F2;font-size:18px;font-weight:500;line-height:49px;text-align:center;box-shadow:0 14px 28px -14px #0007}
.lines{position:absolute;left:0;right:0;top:478px;text-align:center;font-size:108px;line-height:138px;letter-spacing:-.05em}
.lines span{display:block}.lines i{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.rest-mon{left:743px;top:175px;width:100px}

/* I · Your week (F05) */
.sc-week h2{position:absolute;left:98px;top:166px;font-size:110px;line-height:1;letter-spacing:-.065em}
.wline{position:absolute;left:104px;top:291px;font-size:24px;color:var(--mute);font-weight:500}
.board{position:absolute;left:88px;top:386px;width:1447px;height:444px;border-radius:36px;background:linear-gradient(#FDFDFE,#F6F6F8);transform-origin:50% 100%;
  box-shadow:0 1px 0 #fff inset,0 7px 0 -2px #ECECF0,0 13px 0 -5px #E3E3E8,0 50px 70px -36px #191A2055,0 20px 30px -20px #191A2026}
.rings i{position:absolute;top:-28px;width:24px;height:70px;border-radius:12px;background:linear-gradient(90deg,#8d8e95,#f2f2f4 40%,#c9cad0 60%,#7d7e85);box-shadow:0 4px 6px #0003}
.rings i:nth-child(1){left:158px}.rings i:nth-child(2){left:708px}.rings i:nth-child(3){left:1257px}
.bt{position:absolute;left:0;right:0;top:56px;text-align:center;font-size:40px;font-weight:600;letter-spacing:-.04em}
.cells{position:absolute;left:41px;top:119px;right:47px;height:213px;display:grid;grid-template-columns:repeat(7,1fr);gap:11px}
.cell{position:relative;border-radius:10px;background:#FCFCF8;border:1px solid #E7E7E2;text-align:center;overflow:hidden}
.cell::before{content:"";position:absolute;inset:0;background:var(--bg,transparent);opacity:var(--o,0)}
.cell>span{position:relative;display:block;margin-top:30px;font-size:21px;font-weight:500;letter-spacing:.02em;color:#2a2b31}
.tk{--bg:linear-gradient(#D5C8F7,#C6B6F2)}
.ck{position:absolute;left:50%;top:84px;width:68px;height:68px;margin-left:-34px;border-radius:50%;background:#1d1e23;color:#fff;display:grid;place-items:center;box-shadow:0 6px 12px -4px #0006}
.ck svg{width:40px;height:40px}.ck path{stroke-dasharray:24;stroke-dashoffset:var(--dash,0)}
.d-wed{--glow:0}.d-wed::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 40px #F6C9A0;opacity:var(--glow)}
.nx{--bg:linear-gradient(#F6EE9E,#F1E68A)}
.cal{position:absolute;left:50%;top:80px;width:52px;height:52px;margin-left:-26px;color:#1d1e23}.cal svg{width:100%;height:100%}
.nx em{position:absolute;left:0;right:0;top:150px;font-style:normal;font-size:23px;font-weight:500}
.d-fri.pulse .cal{animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1)}40%{transform:scale(1.12)}}
.bf{position:absolute;left:49px;top:376px;font-size:22px;font-weight:500}.bf::before{content:"";position:absolute;left:-7px;width:1357px;top:-34px;height:1px;background:#E2E2E6}

/* II · story (F07) */
.sc-story,.sc-rcpt{color:#F7F7F2}
.dusk{position:absolute;left:0;right:0;bottom:0;height:170%;background:linear-gradient(#191A2000,#191A20 42%)}
.bk{position:absolute;border-radius:30px;filter:blur(18px);opacity:.75}

.rest-story{left:612px;top:96px;width:352px;filter:blur(7px) brightness(.55)}
.sc-story h2{position:absolute;left:0;right:0;top:376px;text-align:center;letter-spacing:-.05em;z-index:3}
.sc-story h2 span{display:block;font-size:68px;line-height:84px;background:linear-gradient(90deg,#E9E3FB,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sc-story h2 em{display:block;font-style:normal;font-size:100px;line-height:100px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:12px}
.scs{position:absolute;inset:0}
.sc-card{position:absolute;display:flex;flex-direction:column;justify-content:center;padding:0 38px;border-radius:32px;color:var(--ink);background:var(--c);
  box-shadow:inset 0 2px 0 #ffffff80,inset 0 -12px 0 #0000001a,inset 0 0 30px #ffffff26,0 34px 60px -26px #000d,0 10px 20px -10px #0008}
.sc-card span{font-size:16px;font-weight:600;letter-spacing:.06em;opacity:.8}
.sc-card b{font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1.1;margin:8px 0 18px}
.bars3{display:flex;gap:10px}.bars3 u{display:block;height:14px;border-radius:99px;background:currentColor;opacity:.32}
.bars3 u:nth-child(1){width:84px}.bars3 u:nth-child(2){width:62px;opacity:.24}.bars3 u:nth-child(3){width:52px;opacity:.14}
.sc-card.dk{color:#fff}
.c-visit{--c:linear-gradient(160deg,#DCCDFB,#C4B0F2);left:315px;top:112px;width:280px;height:192px;rotate:4deg}
.c-crew{--c:linear-gradient(160deg,#F6EF9E,#EBDF79);left:1046px;top:130px;width:304px;height:186px;rotate:-4deg}.c-crew b{font-size:36px}
.c-duo{--c:linear-gradient(160deg,#FFFFFF,#E9E9EE);left:74px;top:364px;width:272px;height:188px;rotate:3deg}
.c-reels{--c:linear-gradient(160deg,#3D63E6,#2242B8);left:1262px;top:344px;width:288px;height:196px;rotate:-4deg}.c-reels b{font-size:36px}
.c-apex{--c:linear-gradient(160deg,#DCCDFB,#C1AEF0);left:1148px;top:612px;width:346px;height:168px;rotate:2deg}.c-apex b{font-size:28px}
.c-meter{--c:linear-gradient(160deg,#FF8A70,#F25F49);left:542px;top:662px;width:492px;height:282px;rotate:-3deg;padding:0 58px}.c-meter span{font-size:20px}.c-meter b{font-size:58px}
.c-meter .bars3 u{height:22px}.c-meter .bars3 u:nth-child(1){width:124px}.c-meter .bars3 u:nth-child(2){width:116px}.c-meter .bars3 u:nth-child(3){width:112px}

/* II · receipt (F10) */
.rc-copy{position:absolute;left:120px;top:250px;width:620px}
.sc-rcpt h2{font-size:128px;line-height:128px;letter-spacing:-.065em;color:#fff}
.rline{font-size:32px;margin-top:40px;color:#F7F7F2e6;letter-spacing:-.01em}
.lab{display:flex;justify-content:space-between;font-size:19px;color:#F7F7F2e6;margin-top:56px;width:607px}.lab+.lab,#visits+.lab{margin-top:44px}
.lab output{font-weight:700;color:#fff}
#visits{-webkit-appearance:none;appearance:none;width:607px;height:26px;margin:14px 0 0;background:none;cursor:pointer;--p:27%}
#visits::-webkit-slider-runnable-track{height:6px;border-radius:9px;background:linear-gradient(90deg,var(--blue) var(--p),#ffffff40 var(--p))}
#visits::-moz-range-track{height:6px;border-radius:9px;background:linear-gradient(90deg,var(--blue) var(--p),#ffffff40 var(--p))}
#visits::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;margin-top:-10px;box-shadow:0 2px 8px #0008}
#visits::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:#fff}
#fee{display:block;width:274px;height:58px;margin-top:14px;padding:0 24px;border-radius:6px;border:1.5px solid #ffffff59;background:#ffffff0d;color:#fff;font:400 28px Satoshi}
#fee::placeholder{color:#F7F7F2cc}
.note-s{font-size:17px;color:#F7F7F2b3;margin-top:8px}
.receipt{position:absolute;left:872px;top:-12px;width:548px;height:830px;rotate:-4.5deg;transform-origin:50% 0}
.receipt::before{content:"";position:absolute;left:-20px;right:-20px;top:-40px;height:60px;border-radius:0 0 18px 18px;background:linear-gradient(#2b2c33,#0e0f13);box-shadow:0 10px 18px #000a;z-index:2}
.paper{position:absolute;inset:0;padding:152px 48px 0 56px;background:#F3F1EA;color:#26272c;font-family:"Courier New",ui-monospace,Menlo,Consolas,monospace;font-weight:700;
  background-image: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'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(90deg,#e4e1d8,#F6F4EE 12%,#F6F4EE 80%,#dedbd2);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/18px 100%;
  box-shadow:0 40px 60px -20px #000c}
.paper p,.r-lines li{font-size:34px;letter-spacing:.02em;line-height:1;white-space:nowrap}
.r-mem{padding:28px 0;border-top:2px dashed #9a978e;border-bottom:2px dashed #9a978e}
.r-lines{list-style:none;margin:0;padding:0}
.r-lines li{position:relative;padding:32px 0;border-bottom:2px dashed #9a978e;width:max-content;min-width:100%}
.r-lines li::after{content:"";position:absolute;left:-10px;right:-14px;top:50%;height:3px;background:#2a2b30;transform:scaleX(0) rotate(-1.2deg);transform-origin:0 50%;transition:transform .45s cubic-bezier(.65,0,.35,1) calc(var(--i)*120ms)}
.struck .r-lines li.old::after{transform:scaleX(1) rotate(-1.2deg)}
.r-lines li.now{font-weight:800}
.stamp{position:absolute;left:58px;bottom:62px;padding:14px 24px;border:5px double var(--coral);border-radius:12px;color:var(--coral);rotate:-9deg;
  font:900 33px/1 Satoshi,sans-serif!important;letter-spacing:-.01em!important;white-space:nowrap;transform:scaleX(.86);transform-origin:0 50%;opacity:.92;mix-blend-mode:multiply}

/* II · past you (F12) */
.sc-past{color:#fff}
.pc{position:absolute;left:128px;top:300px}
.pc .eyebrow{font-size:24px;color:var(--lav);letter-spacing:.16em;font-weight:600}
.sc-past h2{font-size:106px;line-height:100px;letter-spacing:-.05em;margin-top:28px}
.pline{font-size:30px;margin-top:40px;color:#F7F7F2f0}
.vid{position:absolute;inset:0;overflow:hidden;background:#111}
.vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;transform:scale(1.04);transform-origin:50% 60%}
.vid.play img{animation:kb 20s linear forwards}
@keyframes kb{to{transform:scale(1.14) translateY(-2%)}}
.vid{container-type:inline-size}
.vl{position:absolute;left:0;right:0;top:12%;text-align:center;font-size:6.2cqw;color:#fff;text-shadow:0 1px 6px #0009}
.vp{position:absolute;left:8%;right:8%;bottom:7%;height:1.4cqw;min-height:4px;border-radius:9px;background:#ffffff59;overflow:hidden}
.vp u{position:absolute;inset:0;background:var(--lav);transform:scaleX(.08);transform-origin:0 50%}
.vid.play .vp u{animation:prog 20s linear forwards}
@keyframes prog{to{transform:scaleX(1)}}
.glow{position:absolute;inset:0;background:#fff;opacity:0}

/* III · the door (F15) */
.sc-door{color:var(--ink)}
.dc{position:absolute;left:1042px;top:176px}
.sc-door h2{font-size:104px;line-height:94px;letter-spacing:-.055em;font-weight:800}
.dline{font-size:34px;margin-top:22px;letter-spacing:-.01em}
.door-ph{left:641px;top:172px;width:440px;rotate:-3deg;transform:perspective(1400px) rotateY(-16deg);filter:drop-shadow(0 40px 40px #0006)}

/* travellers and effects */
.fx{position:absolute;inset:0;pointer-events:none;z-index:6}
.chip{position:absolute;left:0;top:0;width:60px;height:60px;border-radius:14px;background:var(--coral);opacity:0}
.blade{position:absolute;left:0;top:0;width:10px;height:10px;background:radial-gradient(ellipse at 50% 50%,#FFF8EE,#FFE7C8 60%,#FFE1BE00 100%);opacity:0;filter:blur(6px)}
.tp,.sp{z-index:7;opacity:0;pointer-events:none}.sp{z-index:2}.scs{z-index:3}
.tp .scr{transition:none}
.sp .scr-notif,.sp.lit .scr-chart{opacity:0;transition:opacity .3s}.sp.lit .scr-notif{opacity:1}

/* ---------- flat lay (F16), width-scaled ---------- */
.flat{position:relative;background:#EFEAE1}
.fcv{position:relative;aspect-ratio:1586/992;overflow:hidden}
.cv-w{left:0;top:0;transform:scale(var(--sw,1));transform-origin:0 0}
.fe{position:absolute;right:42px;top:56px;font-size:15px;letter-spacing:.24em;color:var(--ink);background:#F7F7F2d9;padding:10px 18px;border-radius:99px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fs{position:absolute;display:flex;flex-direction:column;align-items:center;background:var(--chalk);border-radius:12%/5.6%;container-type:inline-size;padding-top:134px;transform:rotate(var(--rot))}
.fs h2{font-size:15.4cqw;line-height:1.08;letter-spacing:-.05em;text-align:center;font-weight:600}
.tiles{display:flex;gap:4cqw;margin-top:12cqw}.tiles i{width:21cqw;height:21cqw;border-radius:5cqw;box-shadow:0 2cqw 3cqw -1cqw #0003}
.tiles i:nth-child(1){background:#C9BBF2;rotate:-5deg}.tiles i:nth-child(2){background:var(--coral);rotate:3deg;translate:0 -2cqw}.tiles i:nth-child(3){background:#EEE58C;rotate:6deg}
.fbtn{margin-top:auto;margin-bottom:9cqw;background:var(--ink);color:#fff;border-radius:99px;padding:5.2cqw 7cqw;font-size:5.4cqw;font-weight:500;white-space:nowrap}
.reveal .fs,.reveal .fe{opacity:0;translate:0 12px;transition:opacity .6s var(--ease),translate .6s var(--ease)}
.reveal.go .fs,.reveal.go .fe{opacity:1;translate:0 0}

/* ---------- questions (F17) ---------- */
.faq{padding:clamp(80px,14vw,240px) 0 clamp(70px,9vw,120px)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1440px;padding:0 clamp(16px,6.6vw,106px)}
.faq h2{font-size:clamp(38px,4.3vw,68px);line-height:1.05;letter-spacing:-.045em;font-weight:500}
.qs{border-top:1px solid #191A2033;max-width:612px;justify-self:end;width:100%}
details{border-bottom:1px solid #191A2033}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:clamp(18px,1.55vw,24px);min-height:76px;letter-spacing:-.01em}
summary::-webkit-details-marker{display:none}summary span{font-size:20px;transition:transform .2s var(--ease)}
details[open] summary span{transform:rotate(-90deg)}details p{margin:0 0 22px;color:var(--mute);max-width:560px}
.ftr{border-top:1px solid #191A2033;padding:32px 0 40px}.ftr .wrap{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;color:#45464d;font-size:14px;max-width:1440px}.ftr .lockup{height:22px;color:var(--ink)}


/* ---------- QA pass 2 (30 Oct): Starts Monday rows, depth story, studio stage, framed flat lay ---------- */
:root{--studio:radial-gradient(ellipse 70% 60% at 50% 55%,#3a3949 0%,#24242e 45%,#191A20 75%)}
/* I · Starts Monday, after the approved "Define your goal" section: small art that changes per line, lines rolling through a soft window */
.mon-title{position:absolute;left:0;right:0;top:500px;text-align:center;font-size:104px;line-height:120px;font-weight:700;letter-spacing:-.055em;clip-path:inset(0 100% 0 0)}
.art{position:absolute;inset:0}
.art-s{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.art text{font:600 27px Satoshi,sans-serif;letter-spacing:-.03em;text-anchor:middle;fill:var(--ink)}
.art .big-t{font-size:40px;font-weight:700;text-anchor:start;fill:#8E7BDA}.art .sm-t{font-size:20px;font-weight:500;text-anchor:start;fill:#6b6c74;letter-spacing:-.01em}
.art .sm-t.c{text-anchor:middle}.art .sm-t.b{fill:var(--blue);font-weight:600}
.ring{stroke-dasharray:100;stroke-dashoffset:100}
.a1,.a2{opacity:0}
.mon-mini{background:linear-gradient(160deg,#D9CCF8,#BBA8F0);padding:0;align-items:center;justify-content:center;color:var(--ink)}
.n2t{display:none}
.mon-mini b{font-size:46cqw;line-height:.9;letter-spacing:-.06em}.mon-mini span{font-size:16cqw;font-weight:600}
.rows-mask{position:absolute;left:0;right:0;top:432px;height:470px;perspective:1000px;-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent)}
.rows{position:absolute;inset:0;font-size:112px;line-height:140px;letter-spacing:-.055em;transform-style:preserve-3d}
.ln{position:absolute;left:0;right:0;top:165px;text-align:center;white-space:nowrap;transform-origin:50% 50% -60px;opacity:0;backface-visibility:hidden}
.ln i{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.cap{position:absolute;bottom:38px;font-size:13px;letter-spacing:.12em;color:#6b6c74}.cap-l{left:56px}.cap-r{right:56px;letter-spacing:.02em}
/* II · story in depth on a studio stage (no photo) */
.studio{position:absolute;inset:0;background:var(--studio)}
.studio .bk{filter:blur(40px);opacity:.5;border-radius:50%}
.studio .bk1{left:120px;top:60px;width:260px;height:200px;background:#FF8A5E;rotate:0deg}.studio .bk2{left:1230px;top:120px;width:220px;height:220px;background:#3E5BD8}
.studio .bk3{left:1100px;top:780px;width:300px;height:160px;background:#C5B7EB;rotate:0deg}.studio .bk4{left:180px;top:760px;width:240px;height:180px;background:#F0E99B;opacity:.25}
.sc-story h2{z-index:3}
.scs{z-index:4;perspective:1300px;perspective-origin:50% 46%;transform-style:preserve-3d}
.zc{position:absolute;inset:0;transform:translateZ(var(--zz,0px));pointer-events:none;will-change:transform,opacity}
.sc-card{filter:blur(var(--b,0px))}
.c-next{--c:linear-gradient(160deg,#3D63E6,#2242B8);left:150px;top:640px;width:300px;height:176px;rotate:-3deg}.c-next b{font-size:30px}
.c-ten{--c:linear-gradient(160deg,#FFFFFF,#E9E9EE);left:1240px;top:40px;width:300px;height:176px;rotate:3deg}.c-ten b{font-size:32px}
/* II · stamp → notification chip, and the light blade */
.chip{width:auto;height:auto;background:none;border:5px double var(--coral);border-radius:12px;padding:12px 20px;rotate:-9deg;color:var(--coral);white-space:nowrap}
.chip b{display:block;font:900 30px/1 Satoshi,sans-serif;transform:scaleX(.86);transform-origin:0 50%}
.blade{border-radius:40px;filter:blur(3px);background:linear-gradient(90deg,#FFE9C800,#FFEFD6 22%,#FFFDF8 50%,#FFEFD6 78%,#FFE9C800);box-shadow:0 0 80px 30px #FFD9A055}
/* II · past you: the phone on the studio stage */
.halo{position:absolute;left:820px;top:40px;width:560px;height:900px;border-radius:50%;background:radial-gradient(closest-side,#FFB98A55,#C5B7EB22 60%,#0000);filter:blur(10px)}
.scr-vid{padding:0;background:#111}
.sp .scr-vid,.sp.on-n .scr-chart,.sp.on-v .scr-chart,.sp.on-v .scr-notif{opacity:0;transition:opacity .3s}
.sp.on-n .scr-notif,.sp.on-v .scr-vid{opacity:1}
.rest-past{left:762px;top:50px;width:637px;rotate:-3deg}
html:not(.still) .rest-story,html:not(.still) .rest-past{display:none} /* their live screens set visibility:visible, so hiding the parent is not enough */
/* flat lay: framed, not full bleed */
.flat{padding:64px var(--gut) 0;background:var(--chalk)}
.fcv{max-width:1440px;margin:0 auto;border-radius:28px;box-shadow:0 30px 60px -40px #191A2055}
.still .sc-story,.still .sc-rcpt,.still .sc-past{background:var(--studio)}
.still .mon-title{display:none}
.still .ln{opacity:1}.still .ln1{transform:translateY(-150px)}.still .ln3{transform:translateY(150px)}
.still .rows-mask{-webkit-mask-image:none;mask-image:none}
.still .zc{transform:none}

/* hero v2 (30 Oct): approved city-view gym; the phone floats (no hand); chalk fade at the top as in the comp */
.sc-hero .pl{filter:blur(2px) saturate(.96);transform:scale(1.02)}
.sc-hero .scrim{position:absolute;inset:0;background:linear-gradient(#F7F7F2 0%,#F7F7F2f2 20%,#F7F7F2b8 32%,#F7F7F200 52%),linear-gradient(#191A2000 70%,#191A2055)}
.sc-hero .hs::before{display:none} /* the photoreal frame carries the island; a second drawn one doubled it */
.hero-frame{position:absolute;max-width:none;height:auto;filter:drop-shadow(0 40px 50px #000a) drop-shadow(0 8px 14px #0006);pointer-events:none}
/* flat lay v2: smaller phone in the approved plate */
.fs{padding-top:111px}

/* first paint: until the take is built, show only the hero (no stacked scenes flashing) */
.js:not(.ready) .take .sc:not(.sc-hero),.js:not(.ready) .tp,.js:not(.ready) .sp{opacity:0;visibility:hidden} /* opacity too: live screens set visibility:visible */

/* ---------- still twins: phones, reduced motion and Motion off ---------- */
.still .stage{height:auto;overflow:visible;background:none}
.still .stage .cv{position:relative;left:0;top:0;transform:none;width:1586px;height:auto;zoom:var(--z,1)}
.still .sc{position:relative;inset:auto;width:1586px;height:992px;overflow:hidden}
.still .tp,.still .sp,.still .fx{display:none}
.still .sc-door .pl-n{display:none}
.still .r-lines li.old::after{transform:scaleX(1) rotate(-1.2deg)}
.still .vid img{animation:none}
html:not(.still) .rest-mon{opacity:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}}
.still *{animation:none!important}

/* phones: the take becomes stacked stills in normal flow */
@media (max-width:700px){
  .hdr{height:60px}.lockup{height:20px}
  .still .stage .cv{width:auto;zoom:1}
  .sc{aspect-ratio:auto!important;width:auto!important;height:auto!important;display:flex;flex-direction:column;padding:88px var(--gut) 40px;min-height:auto}
  .sc .pl{position:absolute;inset:0;height:100%;object-fit:cover}
  .sc-hero{padding-top:84px;min-height:760px}
  .sc-hero .pl{object-position:0% 70%}
  .motion{display:none}
  .sc-hero h1,.sc-hero .lede,.sc-mon .eyebrow,.lines,.sc-week h2,.wline,.sc-story h2,.rc-copy,.pc,.dc,.npill{position:relative;inset:auto;left:auto;top:auto;width:auto}
  .sc-hero h1{font-size:44px;line-height:42px}
  .sc-hero .lede{font-size:16px;margin-top:14px;padding:0 4px}
  .btn{position:relative;left:auto;top:auto;width:auto;align-self:center;margin-top:18px;padding:0 22px;font-size:16px}
  .hcs{display:none}
  .hs{position:relative;left:auto!important;top:auto!important;width:62%!important;height:auto!important;aspect-ratio:9/19.5;margin:26px auto 0;transform:none;box-shadow:0 0 0 7px #111216,0 30px 50px -20px #000a}
  .pill{position:relative;left:auto;top:auto;width:100%;margin-top:22px;height:48px}.pill button{font-size:13px;height:38px;line-height:38px}
  .sc-mon,.sc-week{background:var(--chalk)}.sc-mon .pl,.sc-week .pl{opacity:.8}
  .sc-mon .eyebrow{font-size:12px;text-align:center}
  .nodes{position:relative;inset:auto;flex:none;width:305%;height:auto;aspect-ratio:1586/992;margin:-34.6% 0 -124.4% -101.9%}
  .rest-mon{display:none}
  .npill{align-self:center;width:auto;padding:0 18px;height:40px;line-height:40px;font-size:14px;margin-top:4px}
  .lines{font-size:40px;line-height:50px;margin-top:30px}
  .sc-week h2{font-size:44px}.wline{font-size:17px;margin-top:10px}
  .board{position:relative;left:auto;top:auto;width:100%;height:auto;margin-top:40px;padding:44px 14px 18px;border-radius:22px}
  .rings i{top:-18px;height:44px;width:16px}.rings i:nth-child(1){left:18%}.rings i:nth-child(2){left:calc(50% - 8px)}.rings i:nth-child(3){left:auto;right:18%}
  .bt{position:static;font-size:22px}
  .cells{position:static;height:auto;margin-top:16px;grid-template-columns:repeat(7,1fr);gap:4px}
  .cell{height:96px}.cell>span{font-size:11px;margin-top:10px}.ck{top:38px;width:30px;height:30px;margin-left:-15px}.ck svg{width:18px;height:18px}
  .cal{top:32px;width:24px;height:24px;margin-left:-12px}.nx em{top:62px;font-size:10px}
  .bf{position:static;margin-top:28px;font-size:14px}.bf::before{display:none}
  .sc-story,.sc-rcpt,.sc-past{background:var(--ink)}
  .sc-story h2{order:-1}.sc-story h2 span{font-size:30px;line-height:38px}.sc-story h2 em{font-size:42px;line-height:48px}
  .rest-story{position:absolute;left:50%;top:auto;bottom:-60px;width:60%;translate:-50% 0;opacity:.6}
  .scs{position:relative;inset:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
  .sc-card{position:relative;inset:auto!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;padding:18px 16px!important;rotate:0deg!important;border-radius:20px}
  .sc-card span{font-size:10px!important}.sc-card b{font-size:19px!important;margin:4px 0 10px}.bars3 u{height:8px!important;width:30%!important}
  .c-meter{grid-column:1/-1}
  .rc-copy{width:auto}.sc-rcpt h2{font-size:52px;line-height:50px}.rline{font-size:18px;margin-top:16px}
  .lab,#visits{width:100%}.lab{margin-top:28px}#fee{width:100%;height:50px;font-size:20px}.note-s{font-size:13px}
  .receipt{position:relative;left:auto;top:auto;width:100%;height:auto;rotate:0deg;margin-top:36px}.receipt::before{left:-8px;right:-8px;top:-12px;height:24px}
  .paper{position:relative;padding:34px 22px 120px}.paper p,.r-lines li{font-size:18px}.r-mem{padding:14px 0}.r-lines li{padding:16px 0}
  .r-lines li::after,.still .r-lines li.old::after,.struck .r-lines li.old::after{rotate:0deg;transform:scaleX(var(--sx,0))}.r-lines li.old{--sx:1}
  .stamp{left:22px;bottom:34px;font-size:20px!important;padding:8px 12px;border-width:4px}
  .sc-past .pl{display:none}.pc .eyebrow{font-size:13px}.sc-past h2{font-size:48px;line-height:48px;margin-top:12px}.pline{font-size:18px;margin-top:14px}
  .sc-door{min-height:640px;justify-content:flex-start}.sc-door .pl-m{object-position:30% 50%}
  .dc{background:#ffffffcc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;padding:22px;align-self:flex-end;margin-top:auto}
  .sc-door h2{font-size:48px;line-height:46px}.dline{font-size:18px;margin-top:10px}
  .door-ph{display:none}
  .fcv{aspect-ratio:auto;height:640px}.cv-w{transform:none;width:100%;height:100%}.flat .pl{object-position:45% 50%}
  .fe{top:18px;right:16px;font-size:11px}
  /* the plate is cover-scaled to 640px tall (s = .6452) at object-position 45%: place the screen on the plate phone */
  .fs{left:calc(449.3px + (100% - 1023.2px) * .45)!important;top:168.5px!important;width:128.3px!important;height:274.4px!important;transform:none;padding-top:72px}
  .hero-frame{display:none}
  .sc-hero .hs::before{display:block}
  .sc-hero .scrim{background:linear-gradient(#F7F7F2 0%,#F7F7F2f2 44%,#F7F7F2a6 56%,#F7F7F200 72%)}
  .faq-grid{grid-template-columns:1fr;gap:28px}.qs{justify-self:stretch}summary{min-height:64px}
}

@media (max-width:700px){
  .art{position:relative;inset:auto;flex:none;width:305%;height:auto;aspect-ratio:1586/992;margin:-34.6% 0 -124.4% -101.9%}
  .a1,.a2,.cap,.halo{display:none}
  .n2t{display:block}
  .rows-mask{position:relative;inset:auto;height:auto;margin-top:26px;-webkit-mask-image:none;mask-image:none;perspective:none}
  .rows{position:relative;font-size:40px;line-height:50px;text-align:center}
  .ln{position:relative;top:auto;display:block;opacity:1;transform:none!important;white-space:normal}
  .zc{display:contents}
  .studio{position:absolute}
  .flat{padding:24px 12px 0}.fcv{border-radius:20px}
  .rest-past{position:relative;left:auto;top:auto;width:72%;margin:20px auto 0;rotate:0deg}
}