:root{--red:#FF4D00;--org:#FF4E00;--ink:#f2efe8;--ink2:#a29c93;--ink3:#7a766f;--fill:#232328;--hair:rgba(255,255,255,.15);--hair2:rgba(255,255,255,.08);--frame:#55534f;--shell:#17171b;--skwell:#101014;--l-shell:#f6f6f8;--l-ink:#141414;--l-ink2:#5c5c63;--l-ink3:#8e8e93;--l-hair:rgba(0,0,0,.11);--l-fill:#eeeef1;--disp:'Switzer',Arial,sans-serif;--caps:'CarbonPlus',Arial,sans-serif;--cond:'HeadingsNow',Arial,sans-serif;--wide:'Panchang',Arial,sans-serif;--sup:'Bebas Neue',Arial,sans-serif;--ease:cubic-bezier(.16,1,.3,1);--pad:clamp(20px,4.5vw,64px);--col:1240px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#000;color:var(--ink2);font-family:var(--disp);font-size:17px;line-height:1.52;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:color .2s}a:hover{color:var(--org)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--org);color:#fff}
.lab{display:block;font-family:var(--caps);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--org);flex:none;white-space:nowrap}
.mono{font-family:var(--caps);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.k{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 24px;border-radius:6px;font-family:var(--caps);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:opacity .2s,background .2s,color .2s}
.k1{background:var(--red);color:#fff}.k1:hover{opacity:.88;color:#fff}
.k3{background:var(--fill);color:var(--ink)}.k3:hover{background:#2c2c32;color:var(--ink)}
.ck{background:transparent;color:var(--ink);border:1px solid currentColor;opacity:.72}.ck:hover{opacity:1;color:var(--ink)}
.light .ck{color:var(--l-ink)}.light .ck:hover{color:var(--l-ink)}
.light .k3{background:var(--l-fill);color:var(--l-ink)}.light .k3:hover{background:#e3e3e7;color:var(--l-ink)}
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important}html{scroll-behavior:auto}[data-scroll]{--p:1!important}.kb{animation:none!important}}
[data-scroll]{--p:0}
.head{text-align:center;max-width:840px;margin:0 auto}
.eb{font-family:var(--caps);font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--org)}
.eb i{font-style:normal;color:var(--ink3);margin-left:14px}
.light .eb i{color:var(--l-ink3)}
.h{margin:22px 0 0;font-weight:200;font-size:clamp(2.4rem,5.4vw,80px);line-height:.98;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.h em{font-style:normal;font-weight:300;color:var(--org)}
.light .h{color:var(--l-ink)}
.sub{margin:26px auto 0;font-size:17px;line-height:1.55;color:var(--ink2);max-width:54ch;text-wrap:pretty}
.sub strong{color:var(--ink);font-weight:500}
.light .sub{color:var(--l-ink2)}.light .sub strong{color:var(--l-ink)}
.buy{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:34px}
.buy .only{font-family:var(--caps);font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.buy .only b{color:var(--ink);font-weight:600}
.light .buy .only{color:var(--l-ink2)}.light .buy .only b{color:var(--l-ink)}
.bdg{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:9px}
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:26px;height:62px;padding:0 var(--pad);border-bottom:1px solid transparent;transition:background .4s,border-color .4s}
.nav.stuck{background:rgba(0,0,0,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--hair2)}
.nav img{height:14px}
.nav .links{display:flex;gap:24px;margin-left:auto}
.nav .links a{font-family:var(--caps);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.nav .links a:hover{color:var(--ink)}
.nav a.login{font-family:var(--caps);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--org)}   /* THE MEMBER'S DOOR (JT 2026-09-23) — the one orange word in the nav, on every screen */
.nav .k{height:36px;padding:0 16px;font-size:10.5px}
.col{max-width:var(--col);margin:0 auto;padding:0 var(--pad);width:100%}
section{position:relative;padding:clamp(90px,10vw,150px) 0}
.light{background:#fff;color:var(--l-ink2)}
@keyframes blink{50%{opacity:0}}
/* ═ THE PORTAL WINDOW (shared by The studio + The prompt) ═ */
.device{position:relative;border-radius:10px;overflow:hidden;background:#000;border:1px solid var(--frame);box-shadow:0 60px 120px -50px rgba(0,0,0,.9);display:grid;grid-template-columns:224px 1fr;height:680px;font-size:13px;width:100%}
.shell{background:var(--shell);padding:0 10px;display:flex;flex-direction:column;color:var(--ink);border-right:1px solid rgba(255,255,255,.07);overflow:hidden}
.shell .brand{display:flex;align-items:center;justify-content:space-between;padding:18px 8px 19px;border-bottom:1px solid var(--hair)}
.shell .brand img{width:116px}
.shell .sec{font-family:var(--caps);font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);padding:14px 8px 8px}
.shell .navsec{padding-bottom:15px;border-bottom:1px solid var(--hair)}
.row{display:flex;align-items:center;gap:13px;padding:7px 8px;border-radius:7px;margin:1px 0}
.row.on{background:var(--fill)}
.row i{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;font-style:normal}
.row i.onwhite{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.row b{display:block;font-weight:500;font-size:14.5px;color:var(--ink);line-height:1.1}
.row span{display:block;margin-top:2px;font-family:var(--caps);font-size:8.8px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.shell .foot{margin-top:auto;padding:15px 0 16px}
.shell .av{width:40px;height:40px;border-radius:50%;background:var(--fill);display:flex;align-items:center;justify-content:center;font-family:var(--caps);font-size:11px;letter-spacing:.08em;color:var(--ink2)}
.shell .trk{height:6px;background:var(--fill);border-radius:3px;overflow:hidden;margin:7px 8px 0}
/* THE REAL PORTAL (2026-09-17): the nav's apps, the master's rail and the bench's sidebar follow the 0916 handoff */
.shell .usage{display:flex;justify-content:space-between;margin:12px 8px 0;font-family:var(--caps);font-size:8.4px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}.shell .usage b{color:var(--org);font-weight:600}
.side .fl,.pane .fl{display:block;margin:12px 0 4px;font-family:var(--caps);font-size:8.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.side .fl+.well,.pane .fl+.well{margin-top:0}
.pane .segr{display:flex;gap:4px;margin-top:6px;background:var(--fill);border:1px solid var(--hair);border-radius:6px;padding:3px}
.pane .sg{flex:1;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--caps);font-size:8.6px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.pane .sg i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.pane .sg--on{background:var(--stage);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink)}
.refth{display:block;width:56px;aspect-ratio:1080/1350;border-radius:5px;position:relative;margin-top:10px;border:1px solid var(--org);padding:2px}
.refth img{width:100%;height:100%;object-fit:cover;border-radius:3px;display:block}
.refth i{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--org);color:#fff;font-style:normal;font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center}
.k3s--full{margin-top:10px;width:100%;justify-content:flex-start}.k3s--full em{margin-left:auto;font-style:normal;color:var(--ink3);font-family:var(--caps);font-size:8.6px;letter-spacing:.14em}
.pane .prow.prow--menu{display:inline-flex;width:auto;align-self:flex-start;margin:8px 0 0;padding:6px 12px 6px 8px;gap:10px;background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair)}.pane .prow--menu .pn{flex:none}.pane .prow--menu>svg{flex:none;color:var(--ink3)}
.side--master{gap:16px}.side--master .prow{padding:6px 10px}.side--master .ssec--div{padding-top:16px}.side--master .fl{margin-top:8px}.side--master .well{font-size:13.6px;line-height:1.45;margin-top:6px}.side--master .pk1{margin-top:9px}
.covrow{display:flex;gap:8px;align-items:stretch;margin-top:10px}.covrow .refth{margin-top:0;flex:none;width:44px}.covrow .dropz{flex:1;margin-top:0;height:auto;min-height:54px}
.k3s--lib{flex:none;height:auto;min-height:54px;flex-direction:column;gap:6px;padding:0 12px;font-size:8.6px}.k3s--lib span{display:flex;flex-direction:column;align-items:center;gap:2px}.k3s--lib em{font-style:normal;color:var(--ink3);font-family:var(--caps);font-size:8.2px;letter-spacing:.12em}
.shell .trk i{display:block;height:100%;width:12%;background:var(--org)}
.work{position:relative;background:#000;color:var(--ink);min-width:0;overflow:hidden;display:flex;flex-direction:column;padding:0 26px 26px}
.whd{display:flex;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--hair);min-height:78px;flex:none}
.appbdg{width:40px;height:40px;border-radius:9px;background:#00D46A;display:flex;align-items:center;justify-content:center;flex:none}
.whd h3{margin:0;font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.whd .mono{font-size:8.6px}
.whd .bk{width:24px;height:24px;margin-left:-3px;display:flex;align-items:center;justify-content:center;color:var(--ink3);flex:none}
.whd .k{height:42px;font-size:11px;padding:0 20px}
.k3sq{width:42px;height:42px;border-radius:6px;background:var(--fill);display:flex;align-items:center;justify-content:center;flex:none;color:var(--ink)}
.plates{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:18px;margin-top:20px;flex:1;min-height:0}
.plate{perspective:900px;cursor:pointer;display:flex;flex-direction:column;min-height:0}
.pin{position:relative;flex:1;min-height:0;transform-style:preserve-3d;transition:transform .7s var(--ease)}
.plate.turn .pin{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:8px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.front{display:flex;flex-direction:column;justify-content:space-between;padding:12px 13px;background:var(--pc)}
.face.front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.face.front::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 45%,rgba(0,0,0,.6))}
.face.front b,.face.front u{position:relative;z-index:1;color:#fff}
.face.front b{font-weight:500;font-size:15px;line-height:1.2;letter-spacing:-.01em}
.face.front u{text-decoration:none;font-family:var(--caps);font-size:8px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.face.back{background:var(--fill);transform:rotateY(180deg);padding:13px 14px;display:flex;flex-direction:column;gap:8px}
.face.back em{font-style:normal;font-family:var(--caps);font-size:8px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--org)}
.face.back p{margin:0;font-size:12.6px;line-height:1.42;color:var(--ink2)}
.face.back hr{border:0;border-top:1px solid var(--hair);margin:auto 0 0}
.face.back q{quotes:none;font-weight:500;font-size:13px;line-height:1.3;color:var(--ink)}
/* the studio: plates deal on scroll */
.studio .plate{--k:clamp(0,calc((var(--p) - var(--a))*6),1);opacity:var(--k);transform:translateY(calc((1 - var(--k))*30px))}
.studio .device{margin-top:64px}
/* ═ THE TECHNIQUE schematic ═ */
.sch{margin-top:64px}
.sch>svg{width:100%;height:auto;overflow:visible}
.sch .sch--v{display:none}
@media (max-width:720px){.sch .sch--h{display:none}.sch .sch--v{display:block;max-width:420px;margin:0 auto}}
.sch .hl{fill:none;stroke:var(--frame);stroke-width:1}
.sch .box{fill:#000;stroke:var(--frame);stroke-width:1}.sch .box.o{stroke:var(--org)}
.sch .cap{font-family:var(--caps);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;fill:var(--ink3)}
.sch .cap.o{fill:var(--org)}.sch .cap.w{fill:var(--ink)}
.sch .tx{font-family:var(--disp);font-size:13.5px;fill:var(--ink2)}.sch .tx.w{fill:var(--ink)}
.sch .draw{stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,(var(--p) - var(--a,0))*var(--m,2),1))}
.sch .fx{opacity:clamp(0,calc((var(--p) - var(--a,0))*8),1)}
.sch .dsh{stroke:var(--org);stroke-dasharray:3 7}
.sch .arr{fill:var(--frame)}
.sch .wf{fill:none;stroke:#3a3835;stroke-width:1.2}.sch .wf.o{stroke:var(--org)}.sch .wf.w{stroke:#8E8B86}
.sch .wfs{fill:#3a3835}.sch .wfs.o{fill:var(--org)}.sch .wfs.g{fill:#5a5751}.sch .wfs.w{fill:#B7B4AE}
/* ═ BRAND kit ═ */
.kit{margin-top:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 26px}
.el{min-width:0;display:flex;flex-direction:column;--k:clamp(0,calc((var(--p) - var(--a))*5),1);opacity:var(--k);transform:translateY(calc((1 - var(--k))*30px))}
.el--wide{grid-column:span 2}
.art{position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;display:flex}
.el--wide .art{aspect-ratio:2/1}
/* the brand cards carry no hover state (JT 2026-09-23) */
.elhd{display:flex;align-items:baseline;gap:12px;margin-top:13px}
.elhd .mono{margin-left:auto;font-size:8.8px;color:var(--l-ink3)}
.markart{background:#111112;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:26px}
.markart .mrk{position:absolute;top:26px;left:26px;width:8.25%;min-width:18px}
.markart .lock{width:72%;max-width:224px}
.bands{flex-direction:column}
.band{flex:1.55;display:flex;align-items:center;justify-content:space-between;padding:0 14px;min-height:31px;transform:scaleX(var(--k));transform-origin:left}
.bn{font-family:var(--caps);font-size:8.8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.ladrow{display:grid;grid-template-columns:repeat(4,1fr);flex:1}
.ladcell{display:flex;align-items:center;padding:0 11px;min-width:0;overflow:hidden}
.typeart{background:#0B0B0B;padding:20px;flex-direction:column;justify-content:flex-end;color:#EFEDE8}
.t-cond{font-family:var(--cond);font-weight:500;font-size:64px;line-height:.9;letter-spacing:-.01em;text-transform:uppercase}
.t-wide{font-family:var(--wide);font-weight:800;font-size:19px;line-height:1;text-transform:uppercase;margin-top:12px;color:var(--org)}
.t-sup{font-family:var(--sup);font-size:22px;line-height:1;letter-spacing:.02em;text-transform:uppercase;margin-top:10px;color:#B7B4AE}
.t-copy{font-family:var(--disp);font-weight:300;font-size:14px;line-height:1.5;color:rgba(239,237,232,.8);margin:12px 0 0;max-width:34ch}
.imgart{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}
.islot{position:relative;display:block;border-radius:5px;overflow:hidden;aspect-ratio:1/1;transform:scale(calc(.9 + var(--k)*.1))}
.islot img{width:100%;height:100%;object-fit:cover}
.ilab{position:absolute;left:9px;bottom:8px;font-family:var(--caps);font-size:7.6px;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.voiceart{background:#FF4E00;padding:20px;flex-direction:column;justify-content:flex-end}
.vline{font-family:var(--disp);font-weight:300;font-size:31px;line-height:1.14;letter-spacing:-.032em;color:#fff}
.vchips{display:flex;gap:4px;margin-top:21px;flex-wrap:wrap}
.vchip{display:inline-flex;align-items:center;height:22px;border:1px solid rgba(255,255,255,.9);border-radius:3px;padding:0 6px;font-family:var(--caps);font-size:7.6px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:#fff}
/* the glyph strip — the dot grammar */
.glyphs{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.gl{display:flex;flex-direction:column;align-items:center;gap:8px;width:88px}
.gl .bdg{width:56px;height:56px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.gl .bdg svg{width:26px;height:26px}
.gl span{font-family:var(--caps);font-size:8.6px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--l-ink3)}
/* ═ BRAIN ═ */
.brain .col{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:clamp(30px,4vw,60px);align-items:center}
.brain .head{text-align:left;margin:0}.brain .sub{margin-left:0}
.sphere{position:relative;aspect-ratio:1/1;min-height:520px;cursor:grab;border-radius:8px}
.sphere:active{cursor:grabbing}
.sphere canvas{position:absolute;inset:0;width:100%;height:100%}
.sphere .rd{position:absolute;font-family:var(--caps);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);display:flex;gap:26px}
.sphere .rd.tl{left:0;top:0;flex-direction:column;gap:4px}.sphere .rd.tl b{color:var(--org);font-weight:600;font-size:10px}
.sphere .rd.bl{left:0;bottom:0}.sphere .rd.bl span{display:grid;gap:6px}.sphere .rd.bl b{font-family:var(--disp);font-weight:300;font-size:22px;letter-spacing:0;color:var(--ink);text-transform:none}
.coords{margin-top:38px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair2);border:1px solid var(--hair2)}
.coords div{background:#000;padding:16px 18px;display:flex;gap:12px;align-items:flex-start}
.coords .g{width:22px;height:22px;flex:none;color:var(--org)}
.coords b{display:block;font-family:var(--caps);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3)}
.coords span{display:block;margin-top:6px;font-size:15px;color:var(--ink)}
/* ═ THE PROMPT — a slideshow of real screens, clickable ═ */
.steps{display:flex;justify-content:center;gap:10px;margin-top:26px;flex-wrap:wrap}
.steps button{display:flex;align-items:center;gap:10px;font-family:var(--caps);font-size:9.6px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);padding:0 14px;height:38px;border:1px solid var(--hair2);border-radius:4px;transition:.3s;position:relative;overflow:hidden}
.steps button i{width:16px;height:16px;border-radius:50%;background:var(--fill);display:inline-flex;align-items:center;justify-content:center;font-style:normal;flex:none}
.steps button.on{color:var(--org);border-color:var(--org)}
.steps button.on i{background:var(--org)}
.steps button .pr{position:absolute;left:0;bottom:0;height:2px;background:var(--org);width:0}
.steps button.on .pr{animation:pr var(--dur,6s) linear forwards}
@keyframes pr{to{width:100%}}
.stage .device{margin-top:34px}
.stage .scene{position:absolute;inset:0;padding:0 26px 26px;opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none;display:flex;flex-direction:column}
.stage[data-state="a"] .scene-a,.stage[data-state="b"] .scene-b,.stage[data-state="c"] .scene-c,.stage[data-state="d"] .scene-d{opacity:1;transform:none;pointer-events:auto}
.stage .plate{opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--n)*70ms)}
.stage[data-state="b"] .plate,.stage[data-state="c"] .plate,.stage[data-state="d"] .plate{opacity:1;transform:none}
.plate.pick .face.front{outline:1.5px solid var(--org);outline-offset:3px}
/* pending plates (law 25) */
.pend{position:relative;border-radius:8px;background:var(--skwell);overflow:hidden}
.pend.wave::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.135) 50%,transparent 62%);background-attachment:fixed;background-size:60vw 100%;background-repeat:repeat;animation:skWave 3.4s linear infinite}
@keyframes skWave{0%{background-position:-60vw 0}60%,100%{background-position:60vw 0}}
.brainrow{margin-top:auto;padding-top:20px}
.brainrow .bar{width:100%}
.readout{display:flex;flex-direction:column;gap:8px;justify-content:center;height:42px;padding:0 16px;border-radius:6px;background:var(--fill);min-width:180px}
.readout b{font-family:var(--caps);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--org)}
.readout i{display:block;height:3px;border-radius:2px;background:#000;overflow:hidden;position:relative}
.readout i::after{content:"";position:absolute;inset:0;width:38%;background:var(--org)}
.master{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr);gap:26px;padding-top:26px;flex:1;min-height:0}
.master .plateart{height:100%;width:auto;max-width:100%;aspect-ratio:4/3;justify-self:center;border-radius:8px;overflow:hidden;position:relative;background:var(--skwell)}
.master .plateart img{width:100%;height:100%;object-fit:cover}
.master .plateart .ti{position:absolute;left:18px;top:16px;color:#fff;font-weight:500;font-size:22px;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.master .plateart .st{position:absolute;left:18px;bottom:16px;color:#fff;font-family:var(--caps);font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.side{display:grid;gap:0;align-content:start;overflow:hidden;min-height:0}
.side .lab{margin-bottom:8px}
.side h4{margin:0;font-weight:500;font-size:21px;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.side .meta{margin-top:6px;font-family:var(--caps);font-size:8.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.side hr{border:0;border-top:1px solid var(--hair);margin:18px 0}
.side .fmt{display:flex;align-items:center;gap:12px;padding:10px 0;font-size:14.4px;color:var(--ink)}
.side .fmt i{width:18px;height:18px;border-radius:50%;background:var(--fill);flex:none;display:flex;align-items:center;justify-content:center}
.side .fmt i.ok{background:var(--org)}
.side .fmt span{margin-left:auto;font-family:var(--caps);font-size:8.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.side .fmt.live{color:var(--org)}
.bench{display:grid;grid-template-columns:52px minmax(0,1fr) 260px;grid-template-rows:minmax(0,1fr);gap:22px;padding:26px 0 44px;flex:1;min-height:0}
.rail{display:grid;grid-template-rows:repeat(7,minmax(0,1fr));gap:8px;min-height:0}
.rail i{display:block;width:100%;min-height:0;border-radius:5px;background:var(--skwell);border:1px solid transparent}
.rail i.on{border-color:var(--org)}
.canvas{position:relative;display:grid;place-items:center;height:100%;min-height:0}
.canvas .slidebox{position:relative;height:100%;width:auto;max-width:100%;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:#0B0B0B;outline:1px solid var(--org);outline-offset:3px}
.canvas .slidebox>div{width:1080px;height:1350px;transform:scale(var(--s,.3));transform-origin:0 0;position:relative;font-family:var(--disp);font-weight:300;color:#EFEDE8;background:#0B0B0B;overflow:hidden}
.canvas .live{position:absolute;right:8px;top:8px;font-family:var(--caps);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.6);padding:5px 8px;border-radius:3px;z-index:2}
.canvas .vers{position:absolute;bottom:-38px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.canvas .vers i{width:30px;aspect-ratio:4/5;border-radius:5px;background:var(--skwell);display:block;border:1px solid transparent}
.canvas .vers i.on{border-color:var(--org)}
.side .bars{display:grid;gap:8px}
.side .bars i{display:block;height:9px;border-radius:2px;background:var(--fill)}
.side .drop{height:76px;border:1px dashed var(--frame);border-radius:6px;display:grid;place-items:center;font-family:var(--caps);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.side .k{width:100%;height:42px;font-size:10.5px;margin-top:14px}
.side .ckey{width:100%;height:42px;margin-top:8px;border:1px solid var(--hair);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--caps);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:.72}
.cp{font-family:var(--caps);letter-spacing:.24em;color:#B7B4AE;white-space:nowrap}
/* ═ THE COURSES — resource mini cards ═ */
.mcards{margin-top:54px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mcard{display:grid;grid-template-rows:auto 1fr;border:1px solid var(--hair2);border-radius:8px;overflow:hidden;background:var(--shell);transition:border-color .3s}
.mcard:hover{border-color:var(--frame)}
.mcard .mth{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--skwell)}
.mcard .mth img{width:100%;height:100%;object-fit:cover}
.mcard .mth .mtype{position:absolute;left:12px;top:12px;width:30px;height:30px;border-radius:6px;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;color:#fff}
.mcard .mbody{padding:18px 20px 20px;display:flex;flex-direction:column}
.mkind{display:flex;gap:8px;font-family:var(--caps);font-size:8.8px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.mkind b{color:var(--org)}
.mtl{margin:10px 0 0;font-weight:500;font-size:17.4px;color:var(--ink);line-height:1.25}
.mdesc{margin:6px 0 0;font-size:14.4px;line-height:1.45;color:var(--ink2)}
.mcard .k{margin-top:auto;padding-top:0;align-self:flex-start;height:40px;font-size:10.5px;margin-top:18px;background:var(--org)}
/* ═ FILMS ═ */
.seg{display:inline-flex;gap:10px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.seg button{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px 0 6px;border-radius:9px;background:transparent;border:1px solid var(--hair2);font-family:var(--caps);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);transition:.25s}
.seg button i{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none;font-style:normal}
.seg button.on{background:var(--fill);color:var(--ink);border-color:transparent}
.seg button:not(.on):hover{color:var(--ink);border-color:var(--hair)}
.player{position:relative;margin:40px auto 0;max-width:1100px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--skwell);border:1px solid var(--frame)}
.player iframe,.player .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.player .poster{opacity:0;transition:opacity .8s}.player .poster.on{opacity:1}
.player .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;height:44px;padding:0 22px 0 16px;border-radius:6px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.3);color:#fff;font-family:var(--caps);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;backdrop-filter:blur(8px);transition:.3s}
.player .play:hover{background:var(--red);border-color:var(--red)}
.player .vtag{position:absolute;left:16px;bottom:14px;font-family:var(--caps);font-size:9.6px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);border-radius:4px;padding:8px 12px}
.player .vtag b{color:var(--org);font-weight:600;margin-right:10px}
.player .drop{position:absolute;right:16px;bottom:14px;font-family:var(--caps);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#999;background:rgba(0,0,0,.55);border:1px dashed rgba(255,255,255,.3);border-radius:4px;padding:8px 12px}
.player.playing .play,.player.playing .drop,.player.playing .poster{display:none}
/* ═ PRICING — perks as glyph rows ═ */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:54px auto 0;max-width:960px}
.price{padding:34px;border-radius:8px;border:1px solid var(--l-hair);background:var(--l-shell);position:relative;text-align:left}
.price.best{background:#000;color:var(--ink2);border-color:#000}
.price .lab{color:var(--l-ink3)}.price.best .lab{color:var(--org)}
.pn{display:flex;align-items:flex-start;gap:3px;margin-top:20px;font-weight:200;font-size:72px;line-height:1;letter-spacing:-.04em;color:var(--l-ink)}
.price.best .pn{color:#fff}
.pn sup{font-size:24px;font-weight:300;margin-top:6px}
.pper{margin-top:8px;font-family:var(--caps);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--l-ink3)}
.price.best .pper{color:var(--ink3)}
.price .k{width:100%;margin-top:28px;height:48px;font-size:13px}
.perks{margin-top:28px;padding-top:22px;border-top:1px solid var(--l-hair);display:grid;gap:14px}
.price.best .perks{border-top-color:var(--hair)}
.perk{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;font-size:15px;line-height:1.35;color:var(--l-ink2)}
.price.best .perk{color:var(--ink2)}
.perk .g{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--l-ink);border:1px solid var(--l-hair);border-radius:8px}
.price.best .perk .g{color:var(--ink);border-color:var(--hair)}
.perk .g svg{width:18px;height:18px}
.perk b{color:var(--l-ink);font-weight:500}.price.best .perk b{color:var(--ink)}
.perk .apps{display:flex;gap:5px}.perk .apps .bdg{width:22px;height:22px;border-radius:5px}.perk .apps .bdg svg{width:11px;height:11px}
.tagbest{position:absolute;top:34px;right:34px;white-space:nowrap;font-family:var(--caps);font-size:9.6px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--org);border:1px solid var(--org);border-radius:4px;padding:6px 10px}
/* ═ CLOSER — the cover wall, cards flip ═ */
.closer{padding:0;position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden}
.wall{position:absolute;inset:-8% -4%;display:grid;grid-template-columns:repeat(8,1fr);gap:10px;transform:rotate(-4deg) translateY(calc(var(--p)*-6%)) scale(1.06);z-index:0;perspective:1400px}
.tile{position:relative;aspect-ratio:4/5;opacity:calc(.3 + var(--p)*.5);transform:translateY(calc((1 - var(--p))*var(--dy,40px)));transform-style:preserve-3d}
.tile .flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s var(--ease)}
.tile.f .flip{transform:rotateY(180deg)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:5px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--skwell)}
.tile img:last-child{transform:rotateY(180deg)}
.closer::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(0,0,0,.92),rgba(0,0,0,.6) 60%,rgba(0,0,0,.25) 100%);z-index:1}
.closer .col{position:relative;z-index:2;text-align:center;padding-top:120px;padding-bottom:120px}
.closer .big{font-weight:200;font-size:clamp(3rem,8vw,120px);line-height:.96;letter-spacing:-.045em;color:#fff}
.closer .big em{font-style:normal;font-weight:300;color:var(--org)}
footer{position:relative;z-index:2;border-top:1px solid var(--hair2);padding:40px 0 48px;background:#000}
footer .col{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;text-align:left}
footer .fl{display:grid;gap:9px;font-family:var(--caps);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
footer .fl a:hover{color:var(--ink)}
footer .about{font-size:14.4px;line-height:1.5;color:var(--ink2);max-width:36ch}
footer .about img{height:14px;margin-bottom:16px}
footer .copy{margin-top:40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--caps);font-size:9.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
@media (max-width:1100px){
.brain .col{grid-template-columns:1fr}.sphere{min-height:0;aspect-ratio:1/1;max-height:70vh}
.device{grid-template-columns:1fr;height:600px}.shell{display:none}
.master{grid-template-columns:1fr}.master .side{display:none}
.bench{grid-template-columns:52px 1fr}.bench .side{display:none}
.wall{grid-template-columns:repeat(5,1fr)}
.mcards{grid-template-columns:1fr}
}
@media (max-width:900px){.kit{grid-template-columns:repeat(2,1fr)}.el--wide{grid-column:span 2}}
@media (max-width:720px){
.nav .links{display:none}
.nav a.login{margin-left:auto}
.kit{grid-template-columns:1fr}.el--wide{grid-column:auto}.el--wide .art{aspect-ratio:1}
.plates{grid-template-columns:repeat(2,1fr);gap:12px}.work,.stage .scene{padding:0 16px 16px}
.device{height:520px}
.price-grid{grid-template-columns:1fr}
.coords{grid-template-columns:1fr}
.wall{grid-template-columns:repeat(4,1fr)}
footer .col{grid-template-columns:1fr 1fr}
.seg button{height:44px}.seg button i{width:32px;height:32px}
}

/* ═ SHOT screens, 1:1 with components/shot-1-home · shot-3-master · shot-4-carousel ═ */
.work{padding:0}
.whd{padding:18px 20px}
.whd .s{font-family:var(--caps);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.whd .s b{font-weight:600;color:var(--org)}
.kback{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;margin-left:-3px;color:var(--ink3)}
.k1s{display:inline-flex;align-items:center;height:42px;border-radius:6px;background:var(--red);color:#fff;font-family:var(--caps);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.k1s .k1lab{padding:0 18px}.k1s .k1x{display:flex;align-items:center;align-self:stretch;padding:0 13px;border-left:1px solid rgba(255,255,255,.32)}
.k3s{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border-radius:6px;background:var(--fill);color:var(--ink);font-family:var(--caps);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.k3s.sq{width:42px;padding:0}
.k3s .mdot{width:9px;height:9px;border-radius:50%;background:var(--org)}
.main{padding:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:26px;flex:1;min-height:0}
.icard{min-width:0;perspective:1400px;display:flex;flex-direction:column;min-height:0}
.flipwrap{position:relative;flex:1;min-height:0;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.22,.72,.16,1)}
.icard.is-back .flipwrap{transform:rotateY(180deg)}
.cover{position:absolute;inset:0;border-radius:6px;container-type:inline-size;padding:7% 7.5%;display:flex;flex-direction:column;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ctop{display:flex;align-items:center}
.ckeys{margin-left:auto;display:flex;gap:1.8cqw}
.ck{width:11cqw;height:11cqw;border:1px solid;border-radius:1.8cqw;display:flex;align-items:center;justify-content:center;opacity:.45}
.ck svg{width:54%;height:54%}
.cbadge{gap:.5em;display:inline-flex;align-items:center;border:1px solid;border-radius:3px;padding:1.6cqw 3.2cqw;font-family:var(--caps);font-weight:600;font-size:3.4cqw;letter-spacing:.16em;text-transform:uppercase}
.chead{margin-top:7cqw;font-family:var(--disp);font-weight:300;font-size:14cqw;line-height:.98;letter-spacing:-.035em}
.csub{margin-top:auto;padding-top:2.6cqw;font-family:var(--disp);font-weight:400;font-size:5.5cqw;line-height:1.34;text-wrap:pretty}
.cback{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg);border-radius:6px;background:var(--fill);padding:19px 20px 18px;display:flex;flex-direction:column;overflow:hidden}
.cbtop{display:flex;align-items:center;gap:10px}
.cdot{width:8px;height:8px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--hair)}
.cblab{font-family:var(--caps);font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--org)}
.cbwhy{margin:12px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink2)}
.cbfoot{margin-top:auto;padding-top:12px;border-top:1px solid var(--hair);display:grid;gap:4px}
.cbk{font-family:var(--caps);font-size:8.6px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.cbv{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.3}
.smeta{display:block;font-family:var(--caps);font-size:8.8px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-top:11px;white-space:nowrap}
.icard.pick .cover{outline:1px solid var(--org);outline-offset:2px}
.mbody{flex:1;display:grid;grid-template-columns:1fr 306px;grid-template-rows:minmax(0,1fr);gap:26px;padding:26px 26px 0;min-height:0}
.mstage{min-width:0;display:flex;align-items:center;justify-content:center;padding:10px 0 24px;min-height:0}
.cov{height:100%;width:auto;max-width:100%;aspect-ratio:4/5;border-radius:6px;background:#FF4E00;container-type:inline-size;padding:8.5% 8%;display:flex;flex-direction:column;overflow:hidden}
.cov .cbadge{border-color:rgba(7,7,9,.66);color:#0A0A0C;font-size:3.1cqw;padding:1.5cqw 3cqw}
.cov .chead{margin-top:auto;font-size:16.8cqw;letter-spacing:-.03em;color:#0A0A0C}
.cov .csub{margin-top:3.4cqw;padding-top:0;line-height:1.3;color:rgba(10,10,12,.84)}
.cov .cfoot{margin-top:8cqw;display:flex;justify-content:flex-end}
.side{min-width:0;display:flex;flex-direction:column;gap:22px;overflow:hidden}
.ssec{flex:none;display:flex;flex-direction:column}
.ssec--div{padding-top:22px;border-top:1px solid var(--hair)}
.stitle{display:block;margin-top:9px;font-family:var(--disp);font-weight:500;font-size:17px;line-height:1.2;letter-spacing:-.018em;color:var(--ink)}
.smeta2{display:block;margin-top:8px;font-family:var(--caps);font-size:8.6px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.prow{display:flex;align-items:center;gap:13px;padding:7px 10px;margin:0 -10px;border-radius:5px}
.prow--on{background:var(--fill)}
.ssec .prow:first-of-type{margin-top:7px}
.pdot{width:20px;height:20px;border-radius:50%;flex:none;background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair);display:flex;align-items:center;justify-content:center}
.pdot--on{background:var(--org);box-shadow:none}
.pn{flex:1;min-width:0;font-family:var(--caps);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal{display:flex;margin-top:11px;border-radius:5px;overflow:hidden}
.pchip{flex:1;min-width:0;height:15px}
.dropz{margin-top:11px;height:76px;border:1px dashed var(--hair);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--ink3)}
.dropt{font-family:var(--caps);font-size:8.8px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.lab--sub{margin-top:16px}
.well{margin-top:9px;font-size:14.4px;line-height:1.5;color:var(--ink2);text-wrap:pretty}
.pk1{margin-top:11px;display:flex;align-items:center;justify-content:center;width:100%;height:42px;border-radius:6px;background:var(--red);color:#fff;font-family:var(--caps);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.brainrow{padding:26px;flex:none}
.brainbar{width:100%;display:flex;align-items:center;gap:11px;height:54px;padding:0 7px 0 17px;background:var(--fill);border:1px solid var(--hair);border-radius:7px}
.bph{flex:1;min-width:0;font-size:15px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.isend{width:40px;height:40px;flex-shrink:0;background:var(--red);color:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center}
.cbody{flex:1;display:grid;grid-template-columns:74px 1fr 300px;grid-template-rows:minmax(0,1fr);gap:26px;padding:26px 26px 0;min-height:0}
.rail{display:flex;flex-direction:column;gap:7px;overflow:hidden;min-height:0}
.th{position:relative;border:1px solid transparent;border-radius:5px;padding:2px;flex:none}
.th--on{border-color:var(--org)}
.thin{position:relative;width:100%;aspect-ratio:1080/1350;border-radius:2px;container-type:inline-size;padding:8.5% 8%;display:flex;flex-direction:column;overflow:hidden}
/* THE MASTER COVER (2026-09-17): step 4 opens on the designed cover, the picture fills the slide */
.thin .mcov,.big .mcov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.dropz--filled,.pstage .drop--filled{flex-direction:row;justify-content:flex-start;gap:12px;padding:0 12px;border-style:solid}
.dropz--filled img,.pstage .drop--filled img{height:56px;aspect-ratio:1080/1350;object-fit:cover;border-radius:3px;flex:none}
.tno{font-family:var(--caps);font-weight:600;font-size:4.2cqw;letter-spacing:.16em}
.ttitle{font-family:var(--disp);font-weight:300;line-height:1.1;letter-spacing:-.02em;max-width:96%}
.tfoot{font-family:var(--caps);font-size:2.8cqw;letter-spacing:.16em;text-transform:uppercase}
.addth{height:26px;border-radius:3px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none;margin:0 3px}
.cstage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.stagecol{display:flex;flex-direction:column;align-items:center;gap:14px;height:100%;min-height:0}
.cstage .big{position:relative;aspect-ratio:1080/1350;height:calc(100% - 66px);width:auto;max-width:100%;border-radius:6px;container-type:inline-size;padding:8.5% 8%;display:flex;flex-direction:column;overflow:hidden}
.sact{position:absolute;top:4.2cqw;right:4.2cqw;display:inline-flex;align-items:center;gap:1.8cqw;padding:2.9cqw 4.2cqw;border-radius:4px;background:var(--org);color:#fff;font-family:var(--caps);font-size:3.1cqw;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.vers{display:flex;gap:8px;align-items:center;flex:none}
.vth{position:relative;width:40px;border:1px solid transparent;border-radius:5px;padding:2px;display:block;flex:none}
.vth--on{border-color:var(--org)}
.vthin{display:block;width:100%;aspect-ratio:1080/1350;border-radius:2px;overflow:hidden;position:relative}
.vth img{width:100%;height:100%;object-fit:cover}
.vl{position:absolute;left:4px;bottom:3px;font-family:var(--caps);font-size:6px;letter-spacing:.1em;text-transform:uppercase}
.pane{display:flex;flex-direction:column;overflow:hidden;min-height:0}
.phd{flex:none;padding-bottom:17px}
.psec{flex:none;padding:16px 0 17px;border-top:1px solid var(--hair)}
.stage .scene{position:absolute;inset:0;opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none;display:flex;flex-direction:column;overflow:hidden}
.stage[data-state="a"] .scene-a,.stage[data-state="b"] .scene-a,.stage[data-state="c"] .scene-c,.stage[data-state="d"] .scene-d{opacity:1;transform:none;pointer-events:auto}
.stage .icard{opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--n)*70ms)}
.stage.live .icard{opacity:1;transform:none}
.box{margin:54px auto 0;max-width:960px;background:#0a0a0a;border:1px solid #2a2a2a;border-radius:5px;padding:26px}
.box .strip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid #2a2a2a}
.inc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#2a2a2a;margin-top:22px;border:1px solid #2a2a2a}
.inc div{background:#0a0a0a;padding:18px;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center}
.inc .px{display:flex;align-items:center;justify-content:center;width:44px;height:44px}
.inc b{display:block;font-weight:500;font-size:14.5px;color:var(--ink);line-height:1.2}
.inc span{display:block;margin-top:3px;font-family:var(--caps);font-size:8.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.inc .apps{display:flex;gap:5px;margin-top:6px}.inc .apps .bdg{width:22px;height:22px;border-radius:5px}.inc .apps .bdg svg{width:11px;height:11px}
.g{display:inline-flex;align-items:center;justify-content:center;font-family:var(--caps)}
.g-batt{width:26px;height:13px;border:1px solid #f2efe8;border-radius:2px;position:relative;padding:2px;justify-content:flex-start}
.g-batt::after{content:'';position:absolute;right:-4px;top:3px;width:2px;height:5px;background:#f2efe8;border-radius:0 1px 1px 0}
.g-batt i{display:block;height:100%;width:65%;background:var(--org)}
.g-key{width:18px;height:18px;background:#f2efe8;color:#0a0a0a;border-radius:3px;font-size:10px;font-weight:700;box-shadow:2px 2px 0 var(--org)}
.g-key--blue{box-shadow:2px 2px 0 #3E9EF4}.g-key--pink{box-shadow:2px 2px 0 #FF3E8E}
.g-bar{border:1.5px solid #C8102E;border-right:none;color:#f2efe8;font-size:9px;font-weight:700;letter-spacing:.1em;padding:3px 7px 3px 5px}
.g-seg{font-size:26px;font-weight:500;color:#eef2f6;text-shadow:0 0 12px rgba(238,242,246,.35);font-variant-numeric:tabular-nums}
.g-seg .ghost{color:rgba(238,242,246,.13);text-shadow:none}
.g-char{font-size:15px;color:#f2efe8;font-family:var(--disp)}.g-char--red{color:#C8102E}.g-char--orange{color:var(--org)}
.g-txt{font-size:13px;font-weight:700;letter-spacing:.08em;color:#f2efe8}
.g-grid2{width:14px;height:14px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
.g-grid2 i{background:#3E9EF4}.g-grid2--mixed i:nth-child(1){background:var(--org)}.g-grid2--mixed i:nth-child(2){background:#FF3E8E}.g-grid2--mixed i:nth-child(3){background:#3E9EF4}
.g-main{background:var(--org);color:#fff;font-size:8px;font-weight:700;letter-spacing:.12em;border-radius:2px;padding:4px 8px}
.glyphs{margin-top:54px}
.gl span{color:var(--ink3)}
.gl.soon .bdg{opacity:.35;filter:saturate(.4)}
.brain .col{grid-template-columns:minmax(0,520px) minmax(0,1fr)}
@media (max-width:1100px){.mbody{grid-template-columns:1fr}.mbody .side{display:none}.cbody{grid-template-columns:74px 1fr}.cbody .pane{display:none}.inc{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.main{grid-template-columns:repeat(2,1fr);gap:12px;padding:16px}.inc{grid-template-columns:1fr}.cbody{grid-template-columns:1fr}.rail{display:none}}

.rail{display:grid;grid-template-rows:repeat(7,minmax(0,1fr)) 26px;gap:7px;min-height:0;overflow:visible}
.rail .th{min-height:0;display:flex;justify-content:center;flex:none}
.rail .thin{height:100%;width:auto;max-width:100%;aspect-ratio:1080/1350}
.rail .addth{margin:0 3px}

.studio .device{height:auto}
.studio .work{min-height:0}
.studio .scene-a{position:relative;opacity:1;transform:none;pointer-events:auto}
.studio[data-state="c"] .scene-a,.studio[data-state="d"] .scene-a{opacity:0;pointer-events:none}
.studio .main{grid-template-rows:auto;flex:none}
.studio .icard{display:block}
.studio .flipwrap{aspect-ratio:4/3;flex:none}
.studio .cover,.studio .cback{aspect-ratio:auto}
@media (max-width:1100px){.studio .device{height:auto}}
@media (max-width:720px){.studio .device{height:auto}}

.studio .cback{container-type:inline-size;padding:8% 9% 7.5%}
.studio .cblab{font-size:3.6cqw}
.studio .cbwhy{margin-top:4.5cqw;font-size:5.6cqw;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.studio .cbfoot{padding-top:4cqw;gap:1.5cqw}
.studio .cbk{font-size:3.4cqw}
.studio .cbv{font-size:5.6cqw;line-height:1.25}

.steps button{border-color:#55534f;color:var(--ink2)}
.steps button i{color:#fff;font-size:8.6px;font-weight:600;letter-spacing:0;background:#55534f}
.steps button.on i{background:var(--org)}
.th{padding:2px;border-width:1px}.rail .th{width:100%}.rail .thin{width:calc(100% - 0px)}
.rail .th{aspect-ratio:1080/1350;height:auto}.rail .thin{height:100%;width:100%}
.mkind{align-items:center;gap:10px}
.mkind b{font-family:var(--disp);font-size:17px;font-weight:300;letter-spacing:0;text-transform:none;color:var(--ink)}
.mkind span{margin-left:4px}.mkind span+span::before{content:"·";margin-right:10px;color:var(--ink3)}
.appsrow{padding:22px 0 22px;border-bottom:1px solid #2a2a2a}
.appl{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;margin-top:14px}
.appl span{display:grid;gap:4px;justify-items:start}
.appl i{width:40px;height:40px;border-radius:9px;margin-bottom:6px}.appl i svg{width:19px;height:19px}
.appl b{font-size:14.5px;font-weight:500;color:var(--ink)}
.appl em{font-style:normal;font-family:var(--caps);font-size:8.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.inc div{grid-template-columns:44px 1fr}
.inc b{font-size:15.5px}
.glyphs{gap:14px}.gl{width:96px}.gl span{font-size:10px;color:var(--ink2)}.gl.soon span{color:var(--ink3)}
.gl .bdg{width:56px;height:56px}
.tile{opacity:calc(.55 + var(--p)*.35)}
.wall{grid-template-columns:repeat(10,1fr);gap:8px;inset:-6% -3%;transform:rotate(-4deg) translateY(calc(var(--p)*-6%)) scale(1.04)}
@media (max-width:1100px){.appl{grid-template-columns:repeat(4,1fr)}.wall{grid-template-columns:repeat(6,1fr)}}
@media (max-width:720px){.appl{grid-template-columns:repeat(2,1fr)}.wall{grid-template-columns:repeat(4,1fr)}}

.nav img{height:17.5px}
.nav .links a{font-size:12px;color:var(--ink)}
.nav .links a:hover{color:var(--org)}


/* carousel rail: real 4:5 thumbs sized to the row */
.cbody{grid-template-columns:auto 1fr 300px}
.rail{display:grid;grid-template-rows:repeat(7,minmax(0,1fr)) 26px;gap:7px;min-height:0;overflow:visible}
.rail .th{height:100%;width:auto;aspect-ratio:1080/1350;min-height:0;display:block;padding:2px}
.rail .thin{width:100%;height:100%;aspect-ratio:auto}
.rail .addth{width:100%;margin:0}
/* pricing + box in one white section */
.light .box{margin-top:40px}
.price-grid{margin-top:48px}
/* the wall: massive */
.wall{grid-template-columns:repeat(24,1fr);gap:5px;inset:-4% -2%;transform:rotate(-4deg) translateY(calc(var(--p)*-4%)) scale(1.03)}
.tile{opacity:calc(.5 + var(--p)*.4)}.tile img{border-radius:2px}
@media (max-width:1100px){.wall{grid-template-columns:repeat(14,1fr)}}
@media (max-width:720px){.wall{grid-template-columns:repeat(8,1fr)}}

.eb{font-size:12px;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:6px 16px}
.eb i{margin-left:0;font-family:var(--disp);font-size:17px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink2)}
.light .eb i{color:var(--l-ink2)}
.brain .eb{justify-content:flex-start}

.light .box{background:var(--l-shell);border-color:var(--l-hair)}
.light .appsrow{border-bottom-color:var(--l-hair)}
.light .appl b{color:var(--l-ink)}.light .appl em{color:var(--l-ink3)}
.light .inc{background:var(--l-hair);border-color:var(--l-hair)}
.light .inc div{background:#fff}
.light .inc b{color:var(--l-ink)}.light .inc span{color:var(--l-ink3)}
.light .g-batt{border-color:#141414}.light .g-batt::after{background:#141414}
.inc div{grid-template-columns:44px 1fr;align-items:center}
.inc b{font-size:15.5px;line-height:1.25}.inc span{margin-top:4px}
.price-grid{grid-template-columns:1fr 1fr}

.price .pn{flex:none;min-width:auto;display:flex;align-items:flex-start;gap:3px;margin-top:20px;font-family:var(--disp);font-weight:200;font-size:72px;line-height:1;letter-spacing:-.04em;text-transform:none;overflow:visible;color:var(--l-ink)}
.price.best .pn{color:#fff}

.closer .wall{position:absolute;inset:-6% -3%;display:grid;grid-template-columns:repeat(16,1fr);gap:10px;transform:rotate(-4deg) translateY(calc(var(--p)*-5%)) scale(1.04);z-index:0;perspective:1400px}
.closer .tile{position:relative;aspect-ratio:4/5;opacity:calc(.5 + var(--p)*.4);transform:translateY(calc((1 - var(--p))*var(--dy,40px)));transform-style:preserve-3d}
.closer .tile img{border-radius:6px}
@media (max-width:1100px){.closer .wall{grid-template-columns:repeat(10,1fr)}}
@media (max-width:720px){.closer .wall{grid-template-columns:repeat(6,1fr)}}

.closer{min-height:0;height:720px}
.closer .wall{inset:-10% -4%;grid-template-columns:repeat(14,1fr);grid-auto-rows:min-content;gap:12px;align-content:center;transform:rotate(-4deg) translateY(calc(var(--p)*-4%)) scale(1.06)}
.closer .tile{opacity:calc(.45 + var(--p)*.35)}
.closer .col{padding-top:0;padding-bottom:0}
@media (max-width:1100px){.closer{height:620px}.closer .wall{grid-template-columns:repeat(9,1fr)}}
@media (max-width:720px){.closer{height:560px}.closer .wall{grid-template-columns:repeat(5,1fr)}}

/* ═ HERO — centered: slogan → your line → the ad → what was decided → join ═ */
.hero{position:relative;min-height:100vh;display:grid;align-content:center;padding:130px var(--pad) 80px;isolation:isolate;overflow:hidden;text-align:center}
.hero .col{display:grid;justify-items:center}
.hero h1{margin:0;font-weight:200;font-size:clamp(3rem,7vw,116px);line-height:.94;letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.hero .heb{margin:22px 0 18px;text-align:center;text-wrap:balance;color:var(--ink);opacity:.82}
.hero h1 b{display:block;font-weight:200;color:var(--ink3)}
.brief{width:min(840px,100%);margin-top:44px;text-align:left}
.bar{display:flex;align-items:center;gap:14px;height:90px;padding:0 12px 0 30px;border-radius:10px;background:var(--fill);border:1px solid var(--hair)}
.bar.sent{border-color:#55534f}
.bar .t{flex:1;min-width:0;font-weight:300;font-size:25px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .t::after{content:"";display:inline-block;width:1.5px;height:24px;background:#fff;margin-left:3px;vertical-align:-3px;animation:blink 1s steps(1) infinite}
.bar .send{width:64px;height:64px;border-radius:7px;background:var(--red);display:flex;align-items:center;justify-content:center;flex:none;transition:opacity .3s}
.bar .send svg{width:22px;height:22px}
.bar.sent .send{opacity:.5}
@keyframes blink{50%{opacity:0}}
.obj.on{transform:none;opacity:1}
.obj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s ease,transform 1.2s var(--ease)}
.obj img.on{opacity:1;transform:none}
.hero .buy{margin-top:48px}
.hero .buy .k{height:48px;padding:0 28px;font-size:12.5px}
@media (max-width:760px){.made{grid-template-columns:1fr 1fr}.obj{width:min(340px,78vw)}.bar{height:68px;padding:0 9px 0 20px}.bar .t{font-size:18px}.bar .send{width:50px;height:50px}.hero h1{font-size:clamp(2.6rem,12vw,4rem)}}

.nav .links a{white-space:nowrap}

.hero{min-height:0;padding:96px var(--pad) 64px}
.hero h1{margin-top:30px}
.brief{margin-top:30px}
.hero .buy{margin-top:34px}
@media (max-width:760px){.hero{padding:84px 16px 48px}.hero .obj{width:min(240px,60vw)}}

/* hero: wide plate behind (product right of centre), halo fades it, card above the words */
.hero{min-height:0;padding:110px var(--pad) 72px;isolation:isolate;overflow:hidden}
.hplates{position:absolute;inset:0;z-index:-2;background:#000;margin:0;display:block}
.hplates .pl{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;opacity:0;transition:opacity 1.6s ease;transform:scale(1.04)}
.hplates .pl.on{opacity:1}
.halo{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 46% 78% at 50% 50%,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 45%,rgba(0,0,0,.45) 75%,rgba(0,0,0,.18) 100%),linear-gradient(180deg,rgba(0,0,0,.75),transparent 25%,transparent 70%,#000 100%)}
.hero .obj{position:relative;width:min(300px,46vw);aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--skwell);box-shadow:0 60px 120px -30px rgba(0,0,0,.95),0 0 0 .75px rgba(255,255,255,.3)}
.hero .obj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .9s ease,transform 1.2s var(--ease)}
.hero .obj img.on{opacity:1;transform:none}
.hero h1{margin-top:34px;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.brief{margin-top:30px}
.brief .lab{display:block;text-align:center;margin-bottom:12px;color:var(--org);font-size:11px}
.hero .bar{background:rgba(35,35,40,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hero .buy{margin-top:34px}
/* throne: one row */
.seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.seg::-webkit-scrollbar{display:none}
.seg button{flex:none}
.vid-head{flex-wrap:nowrap}
/* studio steps: white live ring, dark idle discs, white numerals */
.steps button.on{border-color:#fff;color:#fff}
.steps button i{background:#2c2c32;color:#fff}
.steps button.on i{background:var(--org)}

@media (max-width:760px){.hero{padding:84px 16px 48px}.hero .obj{width:min(240px,60vw)}.hplates .pl{object-position:70% 50%}}

.hero{padding-top:150px}
.hero .obj{margin-top:0}

.hero{border-bottom:1px solid var(--hair);padding-bottom:84px}
.halo{background:radial-gradient(ellipse 46% 78% at 50% 50%,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 45%,rgba(0,0,0,.45) 75%,rgba(0,0,0,.18) 100%),linear-gradient(180deg,rgba(0,0,0,.75),transparent 25%)}
.hplates .pl{transform:scale(1.12)}
@media (max-width:760px){.hplates .pl{object-position:30% 50%!important}}

.hero h1 b{color:#fff}
.hsub{margin:26px auto 0;max-width:640px;font-size:19px;line-height:1.5;font-weight:400;color:var(--ink2);text-wrap:balance}
.brief{margin-top:28px}

/* plates composed for the page: subject at the edges, content in the middle — show the whole frame */
.hero{aspect-ratio:16/9;min-height:0;max-height:none;display:grid;align-content:center}
.hplates .pl{object-fit:cover;object-position:50% 50%;transform:none}
.halo{background:radial-gradient(ellipse 40% 70% at 50% 52%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.78) 45%,rgba(0,0,0,.3) 78%,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,.7),transparent 22%)}
.hsub{max-width:840px;font-size:18px;line-height:1.45}
@media (max-width:1100px){.hero{aspect-ratio:auto}}
@media (max-width:760px){.hplates .pl{object-position:50% 50%!important}}

.hero{aspect-ratio:auto;min-height:0;padding:150px var(--pad) 84px}
.hplates .pl{object-fit:cover;object-position:50% 50%}
.halo{background:radial-gradient(ellipse 52% 92% at 50% 50%,rgba(0,0,0,.78) 0%,rgba(0,0,0,.62) 35%,rgba(0,0,0,.3) 65%,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,.65),transparent 22%)}

.hplates .pl{object-position:50% 0}
.halo{background:radial-gradient(ellipse 52% 92% at 50% 50%,rgba(0,0,0,.78) 0%,rgba(0,0,0,.62) 35%,rgba(0,0,0,.3) 65%,rgba(0,0,0,0) 100%)}
.hero .bar{background:#000;border-color:rgba(255,255,255,.22)}
.steps button.on{border-color:var(--org);color:var(--org)}


.hero{margin-top:0}
.hero .obj{margin-top:0}
.hero>.col>*:first-child{margin-top:0}

.steps button .pr{display:none}
.stepx{margin:22px auto 0;max-width:720px;text-align:center;font-size:17px;line-height:1.5;color:var(--ink2);min-height:1.5em;transition:opacity .4s}
.stepx.sw{opacity:0}

.eb{font-family:var(--caps);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--org);display:block}
.eb i{display:none}

.steps button{position:relative;overflow:hidden;isolation:isolate;background:transparent}
.steps button .pr{display:block;position:absolute;left:0;top:0;bottom:0;height:auto;width:0;background:#2c2c32;z-index:-1;border-radius:0}
.steps button.on .pr{animation:pr var(--dur,6s) linear forwards}

.box{border-radius:12px}
.appsrow{border-bottom:0;padding-bottom:10px}
.appsrow .lab{display:none}
.appl em{display:none}
.appl span{justify-items:center;text-align:center}
.appl i{margin:0 0 4px}
.inc{margin-top:18px;gap:12px;background:transparent;border:0}
.inc>div{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:center;border-radius:10px;padding:22px 20px}
.inc>div>div{display:block}
.inc span{display:none}
.inc b{font-size:16px;line-height:1.3;white-space:normal}

.inc{gap:1px;background:var(--l-hair);border:1px solid var(--l-hair);border-radius:12px;overflow:hidden}
.inc>div{border-radius:0}
.inc>div>div>span{display:none}
.inc span.g{display:inline-flex}
.steps button .pr{background:#111114}

.closer .big em{color:#fff;font-weight:200}

.steps button .pr,.steps button.on .pr{background:#141418!important}

.seg{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;width:100%;max-width:1100px;margin:34px auto 0;overflow:visible;padding:0}
.seg button{flex:auto;width:100%;min-width:0;border:0;background:transparent;padding:0 10px 0 6px;justify-content:flex-start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg button.on{background:var(--fill)}
.seg button:not(.on):hover{background:rgba(255,255,255,.05);border:0}
.player{margin-top:14px}
@media (max-width:1100px){.seg{grid-template-columns:repeat(4,1fr)}}
@media (max-width:720px){.seg{grid-template-columns:repeat(2,1fr)}}

.closer .buy .k3{background:rgba(0,0,0,.72);border:1px solid #55534f;color:var(--ink);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.closer .buy .k3:hover{background:rgba(0,0,0,.85);border-color:#8a8781;color:#fff}

.closer .wall{grid-template-columns:repeat(11,1fr);gap:14px;inset:-12% -5%;align-content:center;transform:rotate(-4deg) translateY(calc(var(--p)*-4%)) scale(1.1)}
@media (max-width:1100px){.closer .wall{grid-template-columns:repeat(8,1fr)}}
@media (max-width:720px){.closer .wall{grid-template-columns:repeat(5,1fr)}}

/* radii harmonised: panels 8px, keys/badges 6px (law 20) */
.box,.inc,.price,.device,.player,.mcard,.el .art,.tile img,.hero .obj{border-radius:8px}
.appl i,.bdg,.k,.k1s,.k3s,.pk1,.isend,.brainbar,.seg button,.seg button i,.steps button,.tagbest,.closer .buy .k3{border-radius:6px}
.inc>div{border-radius:0}

.seg{display:flex;justify-content:space-between;gap:8px;flex-wrap:nowrap}
.seg button{width:auto;flex:0 1 auto;min-width:0;padding:0 14px 0 6px;overflow:visible;text-overflow:clip;letter-spacing:.14em;font-size:10px}
@media (max-width:1100px){.seg{flex-wrap:wrap;justify-content:center}}

.seg{gap:22px;justify-content:center}
.seg button{padding:0 20px 0 6px}

.seg button{padding:0 26px 0 6px!important;gap:16px}

.hero .obj{box-shadow:0 60px 120px -30px rgba(0,0,0,.95)}

.hero .bar{border-radius:10px}
.seg button,.seg button.on,.seg button:not(.on):hover{padding:0 28px 0 6px!important;gap:16px!important;border:0!important}
.seg button.on i{box-shadow:none!important}

.seg button{flex:none!important;width:auto!important;min-width:max-content}
.seg button:focus,.seg button:focus-visible,.steps button:focus,.steps button:focus-visible,.k:focus,.k:focus-visible,button:focus{outline:none}

/* eyebrows: readable (JT 2026-09-03: "Those orange titles are too small, unreadable") */
.eb{font-size:14px;letter-spacing:.2em}
@media (max-width:720px){.eb{font-size:12px}}

/* ═ MOBILE FINE-TUNE (JT 2026-09-03: "the images on mobile should be 2 per row… brain section, we need the sphere ABOVE the text… Pricing: on mobile we want the yearly first, full width") ═ */
@media (max-width:1100px){
.brain .col{grid-template-columns:1fr}
.sphere{width:100%;max-width:100%;min-height:0;aspect-ratio:1/1;max-height:none;overflow:hidden}
}
@media (max-width:900px){
.price-grid{grid-template-columns:1fr;max-width:560px}
.price.best{order:-1}
}
@media (max-width:720px){
.imgart{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:10px}
.el--wide .art{aspect-ratio:auto}
.islot{aspect-ratio:1/1;transform:none}
.brain .col{display:grid;grid-template-columns:1fr;gap:28px}
.brain .col>div:first-child{order:2}
.brain .sphere{order:1}
.sphere .rd{max-width:calc(100% - 20px)}
.sphere .rd.bl{flex-wrap:wrap;gap:10px 18px}
.price-grid{grid-template-columns:1fr;max-width:none}
.price{padding:26px}
.price.best{order:-1}
}

/* ═ THE STUDIO ON A PHONE (JT 2026-09-03: "These require the mobile screens for each step") ═
   Lifted from the design system's own phone frames — shot-9-mobile 32a (home grid) and 32b (mobile
   MASTER), shot-5-carousel-mobile 26e (the carousel on a phone). Dark only; every selector scoped
   to .pstage; the frames' own values, tokens and type (Switzer + CarbonPlus). The four scenes stack
   in one grid cell and cross-fade on the section's data-state, like the desktop scenes. */
.pstage{display:none;margin-top:34px;font-family:var(--disp);--stage:#000;--shell:#17171b;--fill:#232328;--ink:#f2efe8;--ink2:#a29c93;--ink3:#7a766f;--hair:rgba(255,255,255,.15);--edge:rgba(255,255,255,.07)}
.pstage{grid-template-columns:minmax(0,1fr)}
.pstage .pscene{grid-area:1/1;min-width:0;opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}
.stage[data-state="a"] .pscene[data-scene="a"],.stage[data-state="b"] .pscene[data-scene="b"],.stage[data-state="c"] .pscene[data-scene="c"],.stage[data-state="d"] .pscene[data-scene="d"]{opacity:1;transform:none;pointer-events:auto}
@media (max-width:720px){.studio .device{display:none}.studio .pstage{display:grid}}
/* ── the frame ── */
.pstage .dev{width:100%;max-width:100%;box-sizing:border-box;margin:0 auto;border:9px solid #16161a;border-radius:42px;overflow:hidden;background:var(--stage)}
.pstage .notch{height:28px;background:#111}
/* one screen, four states: the frame keeps a real phone's proportions and the fold lands under the
   third card, so every scene stands the same height and the cross-fade never moves the page. */
.pstage .scr{position:relative;background:var(--stage);overflow:hidden;display:flex;flex-direction:column;aspect-ratio:320/844}
.pstage .phd{flex:none;display:flex;align-items:center;justify-content:space-between;padding:13px 16px 14px;background:var(--shell)}
.pstage .plogo{display:flex;align-items:center;gap:8px;font-family:var(--caps);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.pstage .burger{display:flex;color:var(--ink3)}
.pstage .whd{flex:none;min-height:0;display:flex;align-items:center;gap:10px;padding:13px 15px 14px;border-bottom:1px solid var(--hair)}
.pstage .wtwrap{flex:1;min-width:0}
.pstage .wt{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pstage .whd .s{display:block;margin-top:3px;font-family:var(--caps);font-size:8.4px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* A HOME header carries the app badge; deeper screens carry a bare chevron and the item's name (law 14/21). */
.pstage .appbdg{width:34px;height:34px;border-radius:6px;flex:none;display:flex;align-items:center;justify-content:center;background:#00D46A}
.pstage .kback{width:24px;height:24px;margin-left:-3px;color:var(--ink3)}
.pstage .tt{flex:none;width:34px;height:34px;border-radius:6px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;margin-left:auto}
/* A key in a mobile header never exceeds the app badge beside it: 34px, radius 6 (law 17/20). */
.pstage .k1{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;border-radius:6px;background:var(--red);color:#fff;font-family:var(--caps);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;flex:none;overflow:hidden}
.pstage .k1--sq{width:34px;height:34px;padding:0}
.pstage .k1--full{width:100%;height:44px;margin-top:16px;font-size:11px}
.pstage .mbody{display:block;grid-template-columns:none;flex:1;min-height:0;overflow:hidden;padding:16px}
.pstage .brainrow{flex:none;margin-top:0;padding:0 16px 18px}
.pstage .brainbar{height:54px;padding:0 7px 0 17px;border-radius:7px}
.pstage .bph{font-size:15px}
.pstage .isend{width:40px;height:40px;border-radius:6px}
/* ── 32a · the home grid. One card per row: a square desktop plate becomes a wide rectangle (law 17) ── */
.pstage .igrid{display:grid;grid-template-columns:1fr;gap:12px}
.pstage .icard{min-width:0;display:block;perspective:1400px}
.pstage .flipwrap{position:relative;flex:none;min-height:0;aspect-ratio:16/10}
.pstage .cover{border-radius:6px;container-type:inline-size;padding:5.4% 5.6%}
.pstage .ctop{align-items:flex-start}
/* One key on a phone cover: DELETE. The card itself opens the shot (law 15). */
.pstage .ckeys{gap:2cqw}
.pstage .ck{width:8cqw;height:8cqw;border-radius:1.4cqw;opacity:.45}
.pstage .ck svg{width:56%;height:56%}
.pstage .ck[aria-label="Edit shot"]{display:none}
.pstage .cbadge{gap:1.4cqw;padding:1.5cqw 2.4cqw;font-size:3.1cqw}
.pstage .cbadge svg{width:1.05em;height:1.05em}
.pstage .chead{margin-top:4.4cqw;font-size:12.7cqw;line-height:1;letter-spacing:-.03em}
.pstage .csub{margin-top:auto;padding-top:2cqw;font-size:5.4cqw;line-height:1.28}
.pstage .smeta{font-size:8.8px;margin-top:11px}
/* the turned card — the desktop explainer at phone measure */
.pstage .cback{border-radius:6px;container-type:inline-size;padding:6.5% 6%}
.pstage .cblab{font-size:3.4cqw}
.pstage .cbwhy{margin:4cqw 0 0;font-size:5.2cqw;line-height:1.38;-webkit-line-clamp:3}
.pstage .cbfoot{padding-top:3.4cqw;gap:1.2cqw}
.pstage .cbk{font-size:3.2cqw}
.pstage .cbv{font-size:5.2cqw;line-height:1.25}
/* ── 32b · mobile MASTER ── */
.pstage .cov{height:auto;width:100%;max-width:none;border-radius:6px;container-type:inline-size;display:flex;flex-direction:column;overflow:hidden}
.pstage .cov--big{aspect-ratio:4/5;padding:8.5% 8%}
.pstage .cov .cbadge{border-color:rgba(7,7,9,.66);color:#0A0A0C;font-size:3.1cqw;padding:1.5cqw 3cqw}
.pstage .cov .chead{margin-top:4.4cqw;letter-spacing:-.03em}
.pstage .cov .csub{margin-top:auto;padding-top:2cqw;line-height:1.28}
.pstage .psec{flex:none;padding:16px 0 17px;border-top:1px solid var(--hair)}
.pstage .lab--sub{display:block;margin-top:16px}
.pstage .fl{display:block;margin:16px 0 7px;font-family:var(--caps);font-size:8.6px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.pstage .segr{display:flex;gap:4px;background:var(--fill);border:1px solid var(--hair);border-radius:6px;padding:3px}
.pstage .sg{flex:1;height:36px;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--caps);font-size:9.6px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.pstage .sg--on{background:var(--stage);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink)}
.pstage .sg i{width:9px;height:9px;border-radius:2px;flex:none;display:block}
.pstage .drop{margin-top:11px;height:76px;border:1px dashed var(--hair);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.pstage .dropi{display:flex;color:var(--ink3)}
.pstage .dropt{font-family:var(--caps);font-size:8.8px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.pstage .well{margin-top:9px;font-size:17px;font-weight:400;line-height:1.5;color:var(--ink2);text-wrap:pretty}
/* ── 26e · the carousel on a phone ── */
.pstage .pcanvas{display:flex;flex-direction:column;align-items:center;gap:13px}
.pstage .big{position:relative;width:100%;height:auto;max-width:100%;aspect-ratio:1080/1350;border-radius:6px;container-type:inline-size;padding:8.5% 8%;display:flex;flex-direction:column;overflow:hidden}
.pstage .setact{position:absolute;top:4.2cqw;right:4.2cqw;z-index:1;border-radius:4px;padding:3cqw 4.4cqw;background:var(--red);color:#fff;font-family:var(--caps);font-size:3.7cqw;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.pstage .setact--on{display:inline-flex;align-items:center;gap:1.8cqw;background:rgba(20,18,14,.09);color:rgba(20,18,14,.72);box-shadow:inset 0 0 0 1px rgba(20,18,14,.22)}
.pstage .tno{font-size:4.2cqw}
.pstage .tfoot{font-size:2.8cqw}
.pstage .ttitle{max-width:96%}
.pstage .vers{display:flex;gap:8px;align-items:center;flex:none}
.pstage .vth{position:relative;width:38px;border:1px solid transparent;border-radius:5px;padding:2px;display:block;flex:none}
.pstage .vthin{display:block;width:100%;aspect-ratio:1080/1350;border-radius:2px;overflow:hidden;position:relative}
.pstage .vth img{width:100%;height:100%;object-fit:cover;display:block}
.pstage .vth img+.vl{text-shadow:0 1px 3px rgba(0,0,0,.7)}
.pstage .vth--on{border-color:var(--org)}
.pstage .vl{position:absolute;left:4px;bottom:3px;font-family:var(--caps);font-size:6px;letter-spacing:.1em;text-transform:uppercase}
.pstage .ptop{flex:none;padding:22px 0 15px}
.pstage .ptitle{display:block;margin-top:9px;font-weight:500;font-size:17px;line-height:1.2;letter-spacing:-.018em;color:var(--ink)}
.pstage .pmeta{display:block;margin-top:8px;font-family:var(--caps);font-size:8.6px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}

/* ═ LAST ROUND, MOBILE (JT 2026-09-04) ═ */
/* section main headers: one step up, every width */
.h{font-size:clamp(2.9rem,6.3vw,96px)}
/* the hero column is a fixed track, so the typed line can never widen it and shift the centre */
.hero .col{grid-template-columns:minmax(0,1fr)}
.hero .brief{width:100%;max-width:840px;justify-self:stretch}
.hero .bar .t{min-width:0}
@media (max-width:720px){
.nav .k{margin-left:auto}
.h{font-size:clamp(2.5rem,11vw,3.6rem)}
.hero .brief{max-width:100%}
}

/* ═ HERO CENTRE + HEADER (JT 2026-09-08) ═ */
/* the brief bar was stretch-aligned to the column start; centre it like everything else */
.hero .brief{justify-self:center}
/* header: bigger logo; links + CTA appear only once the hero is scrolled past */
.nav img{height:21px}
.nav .links{opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.nav.past .links{opacity:1;visibility:visible}
/* the Join button never leaves the screen — only the links wait for the scroll (JT 2026-09-09) */
.nav>.k{margin-left:auto}
.nav.past .links{margin-left:auto}.nav.past>.k{margin-left:0}

/* ═ SHOT MOCK FIXES (JT 2026-09-09) ═ */
/* THE POSTS list: the pricing .pn rule (margin-top:20px) leaked into the post names and sank them below their dots */
.prow .pn{margin-top:0;display:block}
/* the selected row bleeds 10px past the column by design; the panel clipped it — clip top/bottom only */
.side{overflow:visible;clip-path:inset(0 -12px)}
/* carousel screen: the slide was sized from its height and pushed the pane past the frame; size it from the room it has */
.cstage{min-width:0;container-type:size}
.stagecol{width:100%}
.cstage .big{width:min(100%,calc((100cqh - 66px)*0.8));height:auto}
/* technique diagram: bigger, scannable labels */
.sch .cap.o{font-size:12px}
.sch .cap.w{font-size:15px;letter-spacing:.18em}
/* the Brain composer, 1:1 with apps/brain.css .brain-input__wrap: attach glyph rides inside the 17px pad */
.battach{flex:none;margin-left:-10px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.pstage .battach{width:34px;height:34px;margin-left:-8px}

/* ═ TECHNIQUE ROW + BLURB WEIGHT (JT 2026-09-09) ═ */
/* the five posts sit on a 60px rhythm with 20px inner padding; YouTube → Long form video (in the SVG) */
/* every little blurb is one weight and one colour — no bold turn */
.sub strong,.light .sub strong{font-weight:inherit;color:inherit}

/* posts row: five 204px boxes on a 30px gap, 20px inner padding; labels 14px so "LONG FORM VIDEO" fits */
.sch .cap.w{font-size:14px;letter-spacing:.16em}
/* blurbs a third wider (54ch → 72ch) */
.sub{max-width:72ch}

/* hero CTA + price one size up (JT 2026-09-09) */
.hero .buy{gap:26px}
.hero .buy .k{height:58px;padding:0 38px;font-size:14px}
.hero .buy .only{font-size:15px}

/* links arrive with the nav background, not later (JT 2026-09-09) */
.nav.stuck .links{opacity:1;visibility:visible;margin-left:auto}.nav.stuck>.k{margin-left:0}

/* closer CTA row matches the hero (JT 2026-09-09) */
.closer .buy{gap:26px}
.closer .buy .k{height:58px;padding:0 38px;font-size:14px}
.closer .buy .only{font-size:15px}

/* hero plates: a quick cut-fade, not a slow dissolve (JT 2026-09-09) */
.hplates .pl{transition:opacity .55s ease}

/* BRAIN sphere bleeds out of its box to the right and below (JT 2026-09-09) */
@media (min-width:1101px){
.brain{overflow:hidden}
.sphere{overflow:visible}
.sphere canvas{inset:auto;left:-8%;top:-14%;width:180%;max-width:none;height:160%}
.sphere .rd{z-index:2}
}
@media (min-width:1101px){.sphere .rd.tl{top:-72px}.sphere .rd.bl{left:auto;right:0;bottom:auto;top:-72px}}

/* JT 2026-09-17: blurbs 3pt bigger everywhere; the hero blurb as wide as the title */
.sub{font-size:20px}
.hsub{font-size:21px;line-height:1.5;max-width:min(100%,clamp(20rem,57vw,940px));text-wrap:pretty}
@media (max-width:760px){.hsub br{display:none}.sub{font-size:17px;line-height:1.5}.hsub{font-size:17px;line-height:1.5}}

/* ── THE RESULTS · THE ROADMAP · THE REVIEWS (JT 2026-09-18: "crystal clear, almost boring") ── */
.results{background:#000;padding-top:clamp(70px,8vw,120px)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair2);border:1px solid var(--hair2);border-radius:8px;overflow:hidden;margin:54px auto 0;max-width:1080px}
.stat{background:#0a0a0a;padding:32px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.stat b{display:block;font-family:var(--disp);font-weight:200;font-size:clamp(2.6rem,5vw,64px);line-height:1;letter-spacing:-.04em;color:var(--ink)}
.stat b i{font-style:normal;color:var(--org)}
.stat span{display:block;margin-top:12px;font-family:var(--caps);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);text-wrap:balance}
.road{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:54px auto 0;max-width:1080px}
.step{background:var(--l-shell);border:1px solid var(--l-hair);border-radius:8px;padding:30px 30px 28px}
.step .px{display:flex;align-items:center;height:44px;margin-bottom:22px}
.step i{display:block;font-style:normal;font-family:var(--caps);font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--org)}
.step b{display:block;margin-top:14px;font-weight:500;font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--l-ink)}
.step p{margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--l-ink2);text-wrap:pretty}
.honest{margin:34px auto 0;max-width:72ch;text-align:center;font-size:16px;line-height:1.6;color:var(--l-ink2);text-wrap:pretty}
.reviews{background:#000}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:54px auto 0;max-width:1180px}
.tcard{background:#0a0a0a;border:1px solid #2a2a2a;border-radius:8px;padding:26px 26px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:22px}
.tq{margin:0;font-size:16px;line-height:1.58;color:var(--ink);text-wrap:pretty}
.tw{display:flex;align-items:center;gap:13px}
.tw img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;background:var(--fill)}
.tw b{display:block;font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.15}
.tw span{display:block;margin-top:5px;font-family:var(--caps);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--org)}
@media (max-width:1100px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}.stat{padding:24px 16px}.road,.tgrid{grid-template-columns:1fr}.step{padding:24px 22px 22px}.step .px{height:38px;margin-bottom:18px}.step b{font-size:20px}}
/* ── THE FAQ (JT 2026-09-18: the objections, handled plainly) ── */
.faq{background:#000}
.faqlist{margin:48px auto 0;max-width:820px;border-top:1px solid var(--hair2)}
.faqlist details{border-bottom:1px solid var(--hair2)}
.faqlist summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-weight:500;font-size:19px;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary::after{content:"+";position:absolute;right:2px;top:18px;font-weight:200;font-size:26px;line-height:1;color:var(--org);transition:transform .25s var(--ease)}
.faqlist details[open] summary::after{transform:rotate(45deg)}
.faqlist p{margin:0;padding:0 44px 24px 0;font-size:16.5px;line-height:1.6;color:var(--ink2);text-wrap:pretty}
@media (max-width:720px){.faqlist summary{font-size:17px;padding:18px 36px 18px 0}.faqlist p{padding-right:0;font-size:16px}}
/* the founder in the strip (JT 2026-09-18: "add my avatar in a circle in the little table") */
.stats--5{grid-template-columns:1.25fr repeat(4,1fr)}
.stat--who{gap:0}
.stat--who img{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block;margin-bottom:14px;box-shadow:0 0 0 1px var(--hair2)}
.stat--who b{font-family:var(--disp);font-weight:500;font-size:17px;letter-spacing:-.01em;line-height:1.2}
.stat--who span{margin-top:6px}
@media (max-width:720px){.stats--5{grid-template-columns:repeat(2,1fr)}.stat--who{grid-column:1 / -1}}

/* THE DRESSED COVER (JT 2026-09-18): the picture, the mark at the top, the words in the lower third over an ellipse scrim — as the studio sets them; the title in a bolder Switzer */
.thin.dressed,.big.dressed{padding:0}
.dressed .dscrim:not(.dscrim--echo){display:none} /* JT 2026-09-18: no blurry ellipse on the cover — the words sit in the lower third, clear of the tag */
.dscrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 96% 34% at 50% 80%,rgba(5,5,5,.74) 0%,rgba(5,5,5,.52) 38%,rgba(5,5,5,.18) 72%,rgba(5,5,5,0) 100%),linear-gradient(180deg,rgba(5,5,5,.26) 0%,rgba(5,5,5,.06) 16%,rgba(5,5,5,0) 30%)}
.dmark{position:absolute;left:0;right:0;top:6cqw;display:flex;justify-content:center;color:#F4F1EA}
.dmark svg{width:7cqw;height:auto;display:block}
.dlock{position:absolute;left:7cqw;right:7cqw;bottom:9cqw;display:flex;flex-direction:column;align-items:center;text-align:center;color:#F4F1EA}
.dtitle{font-family:var(--disp);font-weight:600;font-size:15.5cqw;line-height:.98;letter-spacing:-.03em;text-wrap:balance}
.dsub{margin-top:3.2cqw;font-family:var(--disp);font-weight:400;font-size:5.2cqw;line-height:1.3;color:rgba(244,241,234,.86);text-wrap:balance}

/* THE CALLBACK (the closing slide): the cover's picture cropped closer under a heavier scrim, the line in the lower third — as the studio paints it */
.mcov--echo{object-position:50% 38%;transform:scale(1.5);transform-origin:50% 38%}
.dscrim--echo{background:radial-gradient(ellipse 92% 46% at 50% 76%,rgba(0,0,0,.78) 0%,rgba(0,0,0,.58) 42%,rgba(0,0,0,0) 100%),linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.10) 22%,rgba(0,0,0,0) 40%)}
.dlock--echo{bottom:19cqw}
.dline{font-family:var(--disp);font-weight:300;font-size:11cqw;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}

/* THE STEP KEYS, bigger; the timer's fill a shade lighter so the run reads (JT 2026-09-18) */
.steps{gap:12px;margin-top:30px}
.steps button{height:52px;padding:0 22px;font-size:12px;gap:13px}
.steps button i{width:24px;height:24px;font-size:11px}
.steps button .pr,.steps button.on .pr{background:#232329!important}
@media (max-width:720px){.steps{gap:8px}.steps button{height:46px;padding:0 14px;font-size:10.5px;gap:10px}.steps button i{width:20px;height:20px;font-size:10px}}

/* ═══ THE PHONE PASS (JT 2026-09-23, on his iPhone: "remove log in link… reduce the hero's height… see the can in the red one
   and the chicken wing in the yellow one… the screens finish wonky… all vertical sets of buttons are wonky… the text in the
   brain section should be centered"). One block, last in the file, so it wins every earlier hero layer at phone width. ═══ */
@media (max-width:760px){
  /* the nav: logo and the one key — a signed-in member is sent to the studio by the head script; the footer keeps a log in */
  .nav a.login{display:none}
  /* the hero: less tall, the ad card closer to the top, the headline and the subtitle tighter */
  .hero{min-height:0;padding:88px 16px 58px}
  .hero .obj{width:min(228px,58vw);margin-top:0}
  .hero h1{margin-top:32px;font-size:clamp(2.4rem,10.6vw,3.6rem);line-height:.94;letter-spacing:-.045em}
  .hero .hsub{margin:20px auto 0;max-width:32ch;font-size:16px;line-height:1.42;color:#e6e2da;text-shadow:0 1px 22px rgba(0,0,0,.7),0 0 4px rgba(0,0,0,.35)}
  .hero .brief{margin-top:28px}
  .hero .buy{margin-top:30px;display:grid;justify-items:center;gap:18px}
  /* each film shows its subject on a portrait crop: the can sits right of centre, the pill right, the wing left */
  .hplates .pl:nth-child(1){object-position:70% 50%!important}
  .hplates .pl:nth-child(2){object-position:66% 54%!important}
  .hplates .pl:nth-child(3){object-position:28% 46%!important}
  /* every vertical set of keys is one column, full width, the same height */
  .steps{display:grid;grid-template-columns:1fr;gap:8px;width:100%;max-width:360px;margin-left:auto;margin-right:auto;justify-content:stretch}
  .steps button{width:100%;height:42px;justify-content:flex-start;padding:0 16px}
  .seg{display:grid;grid-template-columns:1fr;gap:8px;width:100%;max-width:360px;margin-left:auto;margin-right:auto;overflow:visible;flex-wrap:wrap}
  .seg button{width:100%;height:48px;justify-content:flex-start;border-color:rgba(255,255,255,.16)}
  .seg button.on{border-color:transparent}
  /* a little more air between every eyebrow, headline and paragraph, and under every section head */
  .h{margin-top:26px}
  .sub{margin-top:24px}
  .steps,.seg{margin-top:34px}
  .studio .pstage{margin-top:40px}
  /* the brain section reads centred like every other head */
  .brain .head,.brain .head .eb,.brain .head .h,.brain .head .sub{text-align:center}
  .brain .eb{justify-content:center}
  .brain .sub{margin-left:auto;margin-right:auto}
  /* the four phone screens: one explicit height for all four (an aspect-ratio box grows with its content on Safari, so the
     scenes stood at different heights), only three cards on the home grid, and a fold under the last thing on screen so the
     brain bar never hides a cut line */
  .pstage .dev{container-type:inline-size}
  .pstage .scr{aspect-ratio:auto;height:calc(100cqw * 2.6375)}
  .pstage .mbody{position:relative}
  .pstage .mbody::after{content:'';position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(to bottom,rgba(0,0,0,0),var(--stage) 88%);pointer-events:none}
  .pstage .igrid .icard:nth-child(n+4){display:none}
}

/* ═══ THE FOOTER, READ AT A GLANCE (JT 2026-09-23: "structured better visually on mobile, and bigger on both") — three named
   columns, 12px caps, a 44px line on the phone so every word is a real tap; the same tone of grey as the nav ═══ */
footer .col{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
footer .fl{gap:12px;font-size:12px;letter-spacing:.16em;align-content:start}
footer .fl .fh{color:var(--ink3);font-size:9.6px;letter-spacing:.22em;margin-bottom:4px}
footer .fl a{display:inline-block;padding:2px 0}
@media (max-width:760px){
  footer{padding:36px 0 40px}
  footer .col{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:28px 20px;align-items:start}
  footer .about{grid-column:1/-1;max-width:none}
  footer .fl{gap:0}
  /* the long list stands on the left; Members and Follow stack on the right, so nothing is left hanging */
  footer .fl:nth-of-type(1){grid-column:1;grid-row:2/span 2}
  footer .fl:nth-of-type(2){grid-column:2;grid-row:2}
  footer .fl:nth-of-type(3){grid-column:2;grid-row:3}
  footer .fl a[hidden]{display:none}
  footer .fl .fh{margin-bottom:6px}
  footer .fl a{display:block;padding:12px 0;font-size:12.5px}
  footer .copy{margin-top:28px}
}



/* ═══ THE HERO'S LIGHT (JT 2026-09-23 "is the blurred ellipse in the hero OVER the headline?? fix that on both desktop and
   mobile") — no ellipse. The film is dimmed by two straight gradients only: a little at the top under the nav, and a floor
   that deepens from the headline down so the words read on any film. The headline's own glow goes too. ═══ */
.halo{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 54%,rgba(0,0,0,.46) 76%,rgba(0,0,0,.88) 93%,#000 100%)}   /* no top band either (JT): the nav takes its own background on scroll */
.hero{border-bottom:0;padding-bottom:96px}   /* the hero ends in black, no line — the floor runs straight into the next section */
.hsub .dbr{display:block}
@media (max-width:760px){
  .hsub .dbr{display:none}
  .halo{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.58) 60%,rgba(0,0,0,.86) 82%,#000 100%)}
}
.hero h1{text-shadow:0 1px 2px rgba(0,0,0,.35)}
.hero .hsub{text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* ═══ THE PHONE'S FILM NAVIGATION — previous, the badge over the name, next; a swipe on the row turns the film ═══ */
.vnav{display:none}
@media (max-width:760px){
  /* the key sits on the right edge of the phone header */
  .nav{justify-content:space-between}
  .nav .k{margin-left:auto}
  /* the taste graph's readouts read centred with the rest of the section */
  .sphere .rd.tl{left:0;right:0;max-width:none;align-items:center;text-align:center}
  .sphere .rd.bl{left:0;right:0;max-width:none;justify-content:center;flex-wrap:nowrap;gap:28px;text-align:center}
  .sphere .rd.bl span{justify-items:center;white-space:nowrap}
  /* the player first, the navigation under it; the seven keys are the desk's */
  .video .seg{display:none}
  .video .player{margin-top:34px}
  .vnav{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:360px;margin:22px auto 0;touch-action:pan-y;user-select:none;-webkit-user-select:none}
  .vnav .vk{width:48px;height:48px;flex:none;border-radius:6px;border:1px solid rgba(255,255,255,.16);color:var(--ink2);display:flex;align-items:center;justify-content:center}
  .vnav .vk:active{background:var(--fill);color:var(--ink)}
  .vnav .vcur{flex:1;min-width:0;display:grid;justify-items:center;gap:9px}
  .vnav .vbadge{width:48px;height:48px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-style:normal;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
  .vnav .vbadge svg{width:22px;height:22px}
  .vnav .vname{font-family:var(--caps);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
  .vnav .vpos{font-family:var(--caps);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
}

/* ═══ THE FILMS WEAR THE PORTAL'S PLATES (JT 2026-09-23 "the video thumbnails should be the same as the ones on the portal"):
   the four app films show the home's own plate — the app's colour, its mark, its name in CarbonPlus caps — at the home
   card's proportions; the three free lessons show the course's own cover. The footer's labels are orange. ═══ */
.player{container-type:inline-size}
.player .vplate{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:4.1cqw}
.player .vplate svg{width:9.8cqw;height:9.8cqw;display:block}
.player .vplate svg.pm{width:9.8cqw;height:5.9cqw}
.player .vplate .vname{font-family:var(--caps);font-weight:700;font-size:5.9cqw;letter-spacing:.2em;text-transform:uppercase;line-height:1}
/* the play key sits low so it never covers the plate's mark and name */
.player .play{top:auto;bottom:7%;transform:translateX(-50%)}
footer .fl .fh{color:var(--org)}

/* ═══ THE WORK (JT 2026-09-23 "a section with my clients' work… in the place of the social proof number"): the brands
   JT made content for, as a row of wordmarks under one line; the pieces themselves hang in the grid below as they
   arrive. The numbers moved down, just before the FAQ. ═══ */
.spot{background:#000;padding-top:clamp(60px,7vw,100px)}
.brands{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 56px;margin:38px auto 0;max-width:980px}
.brands li{font-family:var(--caps);font-size:13px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.workgrid:empty{display:none}
.workgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:44px auto 0;max-width:1100px;padding:4px}
.workgrid .piece{position:relative;display:block;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--skwell);border:1px solid var(--frame);outline:1px solid transparent;outline-offset:2px;transition:outline-color .2s}
@media (hover:hover){.workgrid .piece:hover{outline-color:var(--org);color:inherit}}   /* a tap on the phone must not leave the ring on */
.workgrid .piece img,.workgrid .piece video{width:100%;height:100%;object-fit:cover;display:block}
.workgrid .piece .tag{position:absolute;left:12px;bottom:10px;font-family:var(--caps);font-size:9.6px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);border-radius:4px;padding:7px 10px}
.workgrid .piece .tag b{color:var(--org);font-weight:600;margin-right:8px}
@media (max-width:760px){
  .brands{gap:14px 30px;margin-top:28px}
  .brands li{font-size:11.5px;letter-spacing:.22em}
  /* the three pieces stand top down, full width and short — a 16:10 crop on each post's own centre of interest — so the scroll stays light (JT 2026-09-23) */
  .workgrid{grid-template-columns:1fr;gap:12px;margin-top:30px;padding:4px 0}
  .workgrid .piece{aspect-ratio:16/10}
  .workgrid .piece img{object-position:var(--pos,50% 50%)}
}

/* ═══ THE NAV'S TWO KEYS (JT 2026-09-23 "the log in button on desktop… a medium grey border button… NOT move places once
   we scroll"): Log in is a key with a medium-grey hairline beside the orange one, and the links always hold their place
   at the right (invisible until the hero is passed), so nothing shifts when the background arrives. ═══ */
.nav .links{margin-left:auto}
.nav>.k{margin-left:0}
.nav.stuck>.k{margin-left:0}
.nav a.login{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:1px solid var(--frame);border-radius:6px;color:var(--ink);white-space:nowrap;transition:border-color .2s,color .2s}
.nav a.login:hover{border-color:var(--ink2);color:var(--ink)}

/* ═══ THE FOUR STEPS, READ (JT 2026-09-23 "put an orange number under the window, the text in white bigger switzer light…
   each header needs to be fixed and the divider full width"): the caption under the window is an orange number over one
   white line in Switzer light; a window's header rule runs edge to edge; a scene leaves at once and the next fades in —
   no two headers on screen together. ═══ */
.stepx{margin:30px auto 0;max-width:760px;font-size:22px;font-weight:300;line-height:1.4;letter-spacing:-.01em;color:var(--ink);min-height:0}
.stepx b{display:block;margin-bottom:12px;font-family:var(--caps);font-size:12px;font-weight:600;letter-spacing:.3em;color:var(--org)}
.stage .scene .whd{margin-left:-26px;margin-right:-26px;padding-left:26px;padding-right:26px}
.stage .scene{transition:opacity 0s,transform 0s}
.stage[data-state="a"] .scene-a,.stage[data-state="b"] .scene-a,.stage[data-state="c"] .scene-c,.stage[data-state="d"] .scene-d{transition:opacity .55s var(--ease) .05s,transform .65s var(--ease) .05s}
@media (max-width:720px){.stage .scene .whd{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}.stepx{font-size:19px}}
/* Log in: the grey key on the desk, hidden on the phone — this rule sits after the desk styling so the phone wins (JT 2026-09-23) */
@media (max-width:760px){.nav a.login{display:none!important}}
/* every section breathes a little less (JT 2026-09-23 "the padding top/bottom on each section is a little too big") */
section{padding:clamp(72px,8vw,118px) 0}
.spot{padding-top:clamp(48px,5.5vw,80px)}
.results{padding-top:clamp(56px,6.5vw,96px)}

/* ═══ A CHEVRON BETWEEN THE STEPS (JT 2026-09-23): one step leads to the next — across on the desk, down on the phone ═══ */
.steps .sep{display:flex;align-items:center;justify-content:center;color:var(--ink3);flex:none}
@media (max-width:760px){.steps .sep{height:14px}.steps .sep svg{transform:rotate(90deg)}}

/* ═══ THE NEWSLETTER IN THE FOOTER (JT 2026-09-23 "it's too cramped… work it out") — its own row across the top of the
   footer: the label and one sentence on the left, the composer bar on the right; a hairline; then the four columns ═══ */
footer .col.nlrow{display:block;padding-bottom:40px;margin-bottom:44px;border-bottom:1px solid var(--hair2)}   /* not the four-column grid the other .col wears */
.nlf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 60px;align-items:center}
.nlf .fh{display:block;font-family:var(--caps);font-size:9.6px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--org)}
.nlf__p{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--ink2);max-width:40ch}
.nlf__do{max-width:480px;justify-self:end;width:100%}
.nlf__bar{display:flex;align-items:center;gap:8px;height:54px;padding:0 6px 0 16px;border-radius:7px;background:var(--fill);border:1px solid var(--hair);transition:border-color .2s}
.nlf__bar:focus-within{border-color:#55534f}
.nlf__in{flex:1;min-width:0;height:100%;background:none;border:none;outline:none;color:#fff;font:inherit;font-size:16px;font-weight:300}
.nlf__in::placeholder{color:var(--ink3)}
.nlf__in:disabled{color:var(--ink3)}
.nlf__send{width:40px;height:40px;flex:none;border-radius:6px;background:var(--red);display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.nlf.sent .nlf__send{opacity:.5}
.nlf.done .nlf__send{opacity:.35;pointer-events:none}
.nlf__note{margin:10px 0 0;font-family:var(--caps);font-size:9.6px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.nlf__note.err{color:var(--org)}
.nlf__note a{color:var(--org);text-decoration:underline}
footer .about{max-width:30ch}
@media (max-width:760px){
  footer .nlrow{padding-bottom:28px;margin-bottom:28px}
  .nlf{grid-template-columns:1fr;gap:18px}
  .nlf__p{font-size:15.5px}
  .nlf__do{max-width:none;justify-self:stretch}
}
/* white at a lower opacity, not a solid grey (JT 2026-09-23 "grey feels severe") — the film shows through the blurb and the key's line */
.nav a.login{border-color:rgba(255,255,255,.36);color:rgba(255,255,255,.92)}
.nav a.login:hover{border-color:rgba(255,255,255,.7);color:#fff}
.hero .hsub{color:rgba(255,255,255,.78)}
.hero .buy .only{color:rgba(255,255,255,.62)}.hero .buy .only b{color:#fff}

/* THE TITLE TURNS WITH THE STEP (JT 2026-09-23 "remove the explainers under each screen… change the big title up top instead") */
.studio .head .h{transition:opacity .22s ease}
.studio .head .h.sw{opacity:0}
.studio .head .h .dbr{display:block}   /* two lines on every step on the desk (JT 2026-09-23) */
@media (max-width:760px){.studio .head .h .dbr{display:none}}

/* ═ THE FIRST WEEK, NO QUESTIONS (JT 2026-09-24, "a single line could suffice") — one orange band after the price: the sub's type, centred, the studio's orange, the deep brown the orange plates use for ink. ═ */
.guar{background:var(--org);color:#2B1A14;padding:clamp(26px,3vw,40px) 0}
.guar__line{margin:0 auto;max-width:62ch;text-align:center;font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:rgba(43,26,20,.86);text-wrap:pretty}
.guar__line b{font-weight:500;color:#2B1A14}

/* ═ THE FREE WEEK STARTS MONTHLY (JT 2026-09-24) — the monthly card carries the main key now, so on a phone it reads first; the yearly (Save 58%) follows as the second key. Undoes the two order:-1 rules above. ═ */
@media (max-width:900px){.price.best{order:0}}

/* ═ THE FREE WEEK's TITLE (JT 2026-09-24: "a larger switzer light title, not as big as the other sections, but bigger") ═ */
.guar{padding:clamp(34px,4vw,56px) 0}
.guar__h{margin:0 0 10px;text-align:center;font-family:var(--disp);font-weight:300;font-size:clamp(1.9rem,3.6vw,54px);line-height:1;letter-spacing:-.035em;color:#2B1A14;text-wrap:balance}

/* ═══ HOW IT WORKS, ON THE 0924 HANDOFF (JT 2026-09-24: "step 1 is the portal home where we say that the portal creates
   a new post for you each time you log in. Then it's the SHOT home, then the SHOT overview, then the carousel bench…
   use the little red white baby blue shop thing with the concept 'prices lie'"). Four scenes in the one window, every
   value the frame's own: 28B app-home.html · 30A shot-1-home.html · 17c shot-2-shot.html · 26A shot-3-carousel.html.
   The scenes carry their own prefixes (hm- sw- ov- cb-) so the older mock rules above never touch them. ═══ */
.studio .scene{padding:0}
.studio .scene .whd{margin:0;padding:18px 20px;min-height:0}
.studio .scene-b{position:absolute;inset:0;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity 0s,transform 0s;display:flex;flex-direction:column;overflow:hidden}
.studio[data-state="b"] .scene-a{opacity:0;pointer-events:none}
.studio[data-state="b"] .scene-b{opacity:1;transform:none;pointer-events:auto;transition:opacity .55s var(--ease) .05s,transform .65s var(--ease) .05s}
.studio .scene .k3s.sq{width:42px;height:42px}
/* ── 28B · the home — .whd 18 20 · .main 26 with 56 between the rows · .g3 three columns, 26 apart ── */
.hm-whd{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--hair)}
.hm-bdg{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:8px}
.hm-bdg--36{width:36px;height:36px}
.hm-bdg.onwhite{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.hm-greet{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.hm-date{display:block;margin-top:3px;font-family:var(--caps);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.hm-bell{position:relative;margin-left:auto;display:flex;color:var(--ink3)}
.hm-bell i{position:absolute;top:-1px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--org);box-shadow:0 0 6px rgba(255,78,0,.7)}
.hm-main{padding:26px;display:flex;flex-direction:column;gap:56px}
.hm-s{font-family:var(--caps);font-size:9.8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.hm-s--on{color:var(--org)}
.hm-lab{flex:none;white-space:nowrap;font-family:var(--caps);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--org)}
.hm-sec{display:flex;flex-direction:column;gap:16px;min-width:0}
.hm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:20px}
.hm-keys{display:flex;gap:8px}
.hm-rk{width:30px;height:30px;border-radius:6px;background:var(--fill);display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.hm-rail{display:flex;gap:24px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.hm-rail .hm-card{flex:0 0 calc((100% - 96px)/4.4)}
.hm-card{display:flex;flex-direction:column;min-width:0}
.hm-th{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#0a0a0a}
.hm-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hm-vl{display:flex;align-items:center;gap:10px}
.hm-vn{font-family:var(--caps);font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase}
.hm-pl{position:absolute;top:10px;left:10px;width:26px;height:26px;border-radius:5px;background:rgba(10,10,12,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.hm-pl--r{left:auto;right:10px}
.hm-dur{position:absolute;bottom:9px;right:9px;font-family:var(--caps);font-size:8.8px;letter-spacing:.12em;border-radius:3px;padding:3px 6px;background:rgba(10,10,12,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff}
.hm-pr{position:absolute;left:0;bottom:0;height:3px;background:var(--org)}
.hm-ti{display:block;font-size:15px;font-weight:400;line-height:1.3;color:var(--ink);margin-top:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-card>.hm-s{margin-top:8px}
.hm-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:stretch}
.hm-pn{border-radius:8px;background:var(--shell);padding:30px;display:flex;flex-direction:column;min-width:0}
.hm-ph{display:flex;align-items:center;gap:14px;min-width:0}
.hm-phn{flex:1;min-width:0;font-size:22px;font-weight:300;letter-spacing:-.01em;line-height:1.1;color:var(--ink);white-space:nowrap}
.hm-phn--w{color:#fff}
/* the shot panel: the hook bleeding to the panel's edges, the head and the keys on it, the badges on its floor */
.hm-shot{border-radius:8px;background:var(--shell);overflow:hidden;display:flex;flex-direction:column}
.hm-hook{position:relative;aspect-ratio:16/9;background:var(--fill);overflow:hidden}
.hm-hook img{position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;display:block}
.hm-hook::before,.hm-hook::after{content:"";position:absolute;left:-1px;right:-1px;z-index:1;pointer-events:none}
.hm-hook::before{top:-1px;height:46%;background:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,0))}
.hm-hook::after{bottom:-1px;height:40%;background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0))}
.hm-hook .hm-ph{position:absolute;z-index:2;top:30px;left:30px;right:30px}
.hm-pk{display:flex;gap:8px;flex:none}
.hm-ck{width:40px;height:40px;border:1px solid rgba(255,255,255,.62);border-radius:6px;background:rgba(10,10,12,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;opacity:.72}
.hm-fl{position:absolute;z-index:2;left:30px;right:30px;bottom:16px;display:flex;align-items:center;gap:8px}
.hm-sbadge{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border:1px solid rgba(255,255,255,.3);border-radius:5px;background:rgba(10,10,12,.36);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--caps);font-size:9.8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;white-space:nowrap}
.hm-count{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:5px;background:rgba(10,10,12,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--caps);font-size:9.8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--org);white-space:nowrap}
.hm-sbd{flex:1;display:flex;flex-direction:column;padding:22px 30px 30px}
.hm-chd{display:block;font-weight:300;font-size:25px;line-height:1.1;letter-spacing:-.022em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-csb{display:-webkit-box;margin-top:8px;font-size:14.4px;line-height:1.45;color:var(--ink2);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* the split keys (law 21): caps label flush at 16 on a 42 key (12 on a 34), the 1px white-32% line, the chevron cell */
.k1s.hm-k1,.k1s.sw-k1,.k1s.ov-ikey,.k1s.cb-ikey{display:flex;width:100%;height:42px;padding:0;justify-content:stretch;overflow:hidden}
.k1s.hm-k1>.k1lab,.k1s.sw-k1>.k1lab,.k1s.ov-ikey>.k1lab,.k1s.cb-ikey>.k1lab{flex:1;display:flex;align-items:center;padding:0 16px;white-space:nowrap}
.k1s.hm-k1>.k1x,.k1s.sw-k1>.k1x,.k1s.ov-ikey>.k1x,.k1s.cb-ikey>.k1x{padding:0 14px}
.k1s.hm-k1{margin-top:auto}
.hm-csb{margin-bottom:16px}
.hm-pmeta{display:flex;justify-content:space-between;margin-top:14px}
/* Brain: the four openers as its own chips, the composer at the floor */
.hm-chips{margin:auto 0;display:flex;flex-wrap:wrap;gap:10px;padding:26px 0}
.hm-chip{flex:1 1 auto;display:flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border:1px solid var(--hair);border-radius:6px;font-family:var(--caps);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.hm-ibar{display:flex;align-items:center;gap:11px;height:54px;padding:0 7px 0 17px;background:var(--fill);border:1px solid var(--hair);border-radius:7px;flex:none}
.hm-iph{flex:1;min-width:0;font-size:15px;font-weight:300;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-isend{width:40px;height:40px;flex:none;background:var(--red);color:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center}
/* Momentum: the streak, the month, the week */
.hm-strk{display:flex;align-items:flex-start;gap:14px;margin-top:26px}
.hm-num{font-family:var(--caps);font-weight:300;font-size:44px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:.9}
.hm-dots{display:grid;grid-template-columns:repeat(11,7px);justify-content:space-between;row-gap:16px;margin-top:26px}
.hm-dot{width:7px;height:7px;border-radius:50%;background:var(--fill);display:block}
.hm-dot--on{background:var(--org)}
.hm-dot--now{background:none;box-shadow:inset 0 0 0 1px var(--org)}
.hm-dl{display:flex;justify-content:space-between;margin-top:12px}
.hm-wkh{margin-top:auto;padding-top:26px}
.hm-wk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px;border:1px solid var(--hair);border-radius:6px}
.hm-wki{display:flex;flex-direction:column;gap:8px;padding:12px 14px;min-width:0}
.hm-wki+.hm-wki{border-left:1px solid var(--hair)}
.hm-wki .hm-s{white-space:normal;line-height:1.35}
.hm-wkv{font-family:var(--caps);font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;text-transform:uppercase}
/* the course cards: thumb → badge + Switzer light name / caps lesson + the tag → the bar → caps meta */
.hm-cr{display:flex;align-items:flex-start;gap:14px;margin-top:18px;min-width:0}
.hm-crt{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.hm-crn{font-size:22px;font-weight:300;letter-spacing:-.01em;line-height:1.1;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-tag{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;border:1px solid var(--org);border-radius:3px;font-family:var(--caps);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--org);white-space:nowrap}
.hm-trk{height:4px;background:var(--fill);border-radius:2px;overflow:hidden;margin:18px 0 0}
.hm-trk i{display:block;height:100%;background:var(--org)}
.hm-card .hm-row{margin-top:12px;min-height:0}
/* ── 30A · the shot wall — three shell cards of the frame's own px: hook 4:3, badge 26/9.8, keys 33, count 22, words 18 20 22, title 25, blurb 14.4, MAKE A POST 34/11.5 ── */
.sw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding:26px;flex:1;min-height:0;align-content:start}
.sw-card{position:relative;display:flex;flex-direction:column;background:var(--shell);border-radius:8px;overflow:hidden;opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--n)*70ms)}
.studio[data-state="b"] .sw-card{opacity:1;transform:none}
.sw-hook{position:relative;aspect-ratio:4/3;background:var(--fill);overflow:hidden;flex:none}
.sw-hook img{position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;display:block}
.sw-hook::before,.sw-hook::after{content:"";position:absolute;left:-1px;right:-1px;z-index:1;pointer-events:none}
.sw-hook::before{top:-1px;height:46%;background:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,0))}
.sw-hook::after{bottom:-1px;height:40%;background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0))}
.sw-top{position:absolute;z-index:2;top:10px;left:10px;right:10px;display:flex;align-items:center;gap:8px}
.sw-badge{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border:1px solid rgba(255,255,255,.34);border-radius:5px;background:rgba(7,7,9,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:var(--caps);font-size:9.8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;white-space:nowrap}
.sw-keys{margin-left:auto;display:flex;gap:8px}
.sw-ck{width:33px;height:33px;border:1px solid rgba(255,255,255,.62);border-radius:6px;background:rgba(7,7,9,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;opacity:.72}
.sw-count{position:absolute;z-index:2;left:10px;bottom:10px;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:5px;background:rgba(7,7,9,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:var(--caps);font-size:9.8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;white-space:nowrap}
.sw-count--none{color:var(--org)}
.sw-back{position:absolute;inset:0;z-index:3;background:#2b2b31;padding:20px 22px;display:flex;flex-direction:column}
.sw-bulb{display:block;width:20px;height:20px;color:var(--org);margin-bottom:14px}
.sw-bt{font-weight:400;font-size:18px;line-height:1.28;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.sw-bw{margin-top:8px;font-size:14.4px;line-height:1.48;color:var(--ink2);text-wrap:pretty}
.sw-card--back .sw-top,.sw-card--back .sw-count,.sw-card--back img{visibility:hidden}
.sw-words{display:flex;flex-direction:column;flex:1;padding:18px 20px 22px}
.sw-t{font-weight:300;font-size:25px;line-height:1.1;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.sw-s{display:-webkit-box;margin-top:8px;font-size:14.4px;line-height:1.45;color:var(--ink2);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sw-s{margin-bottom:16px}
.k1s.sw-k1{margin-top:auto;height:34px}
.k1s.sw-k1>.k1lab{padding:0 12px;font-size:11.5px}
.k1s.sw-k1>.k1x{padding:0 12px}
/* ── 17c · the shot overview — the hook at 400 wide, the words beside it, then the six launch pads ── */
.ov-body{flex:1;display:flex;flex-direction:column;gap:28px;padding:26px;min-height:0}
.ov-top{display:grid;grid-template-columns:400px minmax(0,1fr);column-gap:40px;align-items:center}
.ov-hook{position:relative;width:100%;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--fill)}
.ov-hook img{position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;display:block}
.ov-hook::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:34%;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,0));pointer-events:none}
.ov-mtop{position:absolute;z-index:1;top:12px;left:12px;right:12px;display:flex;align-items:center}
.ov-mbadge{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border:1px solid rgba(255,255,255,.3);border-radius:5px;background:rgba(10,10,12,.36);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--caps);font-size:9.8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#fff;white-space:nowrap}
.ov-mdl{margin-left:auto;width:33px;height:33px;border:1px solid rgba(255,255,255,.62);border-radius:6px;background:rgba(10,10,12,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;opacity:.72}
.ov-copy{display:flex;flex-direction:column;min-width:0}
.ov-mt{font-weight:300;font-size:34px;line-height:1.08;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.ov-ms{margin-top:8px;font-size:17px;line-height:1.52;color:var(--ink2)}
.ov-pal{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.ov-palc,.cb-dsl{font-family:var(--caps);font-size:9.8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.ov-palb,.cb-palb{display:grid;grid-template-columns:repeat(10,1fr);width:171px;height:15px;border-radius:4px;overflow:hidden}
.ov-palb i,.cb-palb i{display:block}
.k1s.ov-ikey{margin-top:16px;max-width:300px}
.k1s.ov-ikey>.k1lab{padding-left:16px}
.ov-hd{display:flex;align-items:baseline;gap:10px}
.ov-count{margin-left:auto;font-family:var(--caps);font-size:9.8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--org)}
.ov-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:-12px}
.ov-tile{display:flex;flex-direction:column;background:var(--shell);border-radius:8px;overflow:hidden}
.ov-pad{position:relative;height:196px;padding:18px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ov-go{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:6px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.ov-tf{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--hair2);color:var(--org)}
.ov-tn{font-family:var(--caps);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.ov-tm{margin-left:auto;font-family:var(--caps);font-size:9.8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.ov-lz{display:flex;opacity:.34}
.ov-lz i{display:block;height:6px;border-radius:2px;background:#2b2b31}
.ov-lz--car{gap:6px;align-items:center}
.ov-lzs{position:relative;width:62px;aspect-ratio:4/5;border-radius:3px;background:var(--fill);display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:8px 7px;overflow:hidden}
.ov-lzs i{width:100%}.ov-lzs i+i{width:62%}
.ov-lzs--img{padding:0}
.ov-lzs--img img,.ov-lz--reel img,.ov-lz--vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.35)}
.ov-lz--thr{flex-direction:column;gap:12px;width:82%}
.ov-lz--em{flex-direction:column;gap:9px;width:82%}
.ov-lz--em i{width:100%}
.ov-lzr{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:start}
.ov-lzr>span{display:flex;flex-direction:column;gap:5px}
.ov-lzr b{font-family:var(--caps);font-size:10px;font-weight:600;color:var(--org);line-height:6px}
.ov-lzsp{height:6px}
.ov-lz--reel{position:relative;width:64px;aspect-ratio:9/16;border-radius:4px;overflow:hidden;background:var(--fill)}
.ov-lz--vid{position:relative;width:150px;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:var(--fill)}
.ov-lzplay{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:rgba(10,10,12,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.ov-lzplay::after{content:"";position:absolute;left:9px;top:7px;border-left:6px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent}
/* ── 26A · the carousel bench — 74 / 1fr / 300, 26 apart; the cover carries the picture under the words ── */
.cb-body{flex:1;display:grid;grid-template-columns:74px 1fr 300px;grid-template-rows:minmax(0,1fr);gap:26px;padding:26px;min-height:0}
.cb-rail{display:flex;flex-direction:column;gap:7px;overflow:hidden;min-height:0}
.cb-th{position:relative;border:1px solid transparent;border-radius:5px;padding:2px;flex:none}
.cb-th--on{border-color:var(--org)}
.cb-thin,.cb-big{position:relative;width:100%;aspect-ratio:1080/1350;border-radius:2px;container-type:inline-size;padding:8.5% 8%;display:flex;flex-direction:column;overflow:hidden}
.cb-thin:has(> .cb-shdr){padding:6% 6%}
.cb-add{height:26px;border-radius:3px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex:none;margin:0 3px}
.cb-tbadge{display:inline-flex;align-items:center;border:1px solid;border-radius:3px;padding:1.5cqw 3cqw;font-family:var(--caps);font-weight:600;font-size:3.1cqw;letter-spacing:.16em;text-transform:uppercase}
.cb-ttitle{font-family:var(--disp);font-weight:300;line-height:1.1;letter-spacing:-.02em;max-width:96%}
.cb-tsub{margin-top:3.4cqw;font-family:var(--disp);font-weight:400;font-size:5.5cqw;line-height:1.3}
.cb-tfoot{font-family:var(--caps);font-size:2.8cqw;letter-spacing:.16em;text-transform:uppercase}
.cb-shdr{display:flex;align-items:center;justify-content:space-between;flex:none}
.cb-snum{font-family:var(--caps);font-size:4.2cqw;font-weight:500;letter-spacing:.12em;line-height:1;margin-left:auto}
.cb-sfoot{flex:none;display:flex;align-items:center;gap:4cqw;padding-top:3cqw;border-top:1px solid currentColor}
.cb-sttl{flex:1;min-width:0;font-family:var(--caps);font-size:2.9cqw;font-weight:500;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-pic{background:#111;isolation:isolate}
.cb-pic>img{position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;z-index:-2;display:block}
.cb-pic::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:82%;background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.66) 32%,rgba(0,0,0,.34) 62%,rgba(0,0,0,0) 100%);z-index:-1;pointer-events:none}
.cb-pic .cb-ttitle,.cb-pic .cb-tfoot{color:#fff}
.cb-pic .cb-tsub{color:rgba(255,255,255,.86)}
.cb-pic .cb-tbadge{border-color:rgba(255,255,255,.7);color:#fff}
.cb-sact{position:absolute;top:4.2cqw;right:4.2cqw;z-index:1;display:inline-flex;align-items:center;padding:2.9cqw 4.2cqw;border-radius:4px;background:rgba(10,10,12,.58);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);color:#fff;font-family:var(--caps);font-size:3.6cqw;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.cb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
.cb-col{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:470px}
.cb-big{width:min(100%,344px);border-radius:6px}
.cb-vers{display:flex;gap:8px;align-items:center}
.cb-vth{position:relative;width:40px;border:1px solid transparent;border-radius:5px;padding:2px;display:block;flex:none}
.cb-vth--on{border-color:var(--org)}
.cb-vthin{display:block;width:100%;aspect-ratio:1080/1350;border-radius:2px;overflow:hidden;position:relative}
.cb-vthin img{width:100%;height:100%;object-fit:cover;display:block}
.cb-vl{position:absolute;left:4px;bottom:3px;font-family:var(--caps);font-size:6px;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.cb-pane{display:flex;flex-direction:column;gap:28px;overflow:hidden;min-height:0}
.cb-psec{flex:none;display:flex;flex-direction:column;gap:10px}
.cb-psec .lab{color:var(--org)}
.cb-psec--slide{padding-top:28px;border-top:1px solid var(--hair)}
.cb-pkey{display:flex;align-items:center;gap:11px;width:100%;height:42px;padding:0 14px;border-radius:6px;background:var(--fill);color:var(--ink);font-family:var(--caps);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.cb-pkey>svg:first-child{color:var(--org)}
.cb-pkl{flex:1;text-align:left}
.cb-pkey>svg:last-child{color:var(--ink2)}
.cb-shrow{display:flex;align-items:center;gap:10px;min-height:20px}
.cb-srole{margin-left:auto;font-family:var(--caps);font-size:9.8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.cb-stl{font-size:17px;font-weight:500;line-height:1.25;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
.cb-well,.cb-capt{font-size:14.4px;font-weight:400;line-height:1.5;color:var(--ink2);text-wrap:pretty;padding-right:24px}
.cb-psec--slide .cb-well{margin-top:-6px}
.cb-gk{margin-left:auto;width:28px;height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.cb-capt--clamp{max-height:calc(1.5em*4 + 14px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);mask-image:linear-gradient(180deg,#000 58%,transparent)}
.cb-pal{display:flex;flex-direction:column;gap:8px}
.cb-palb{width:100%}
.cb-dsg{display:flex;flex-direction:column;gap:10px}
.cb-pal+.cb-dsg{margin-top:6px}.cb-dsg+.cb-dsg{margin-top:6px}
.cb-segr{display:flex;gap:4px;background:var(--fill);border-radius:6px;padding:3px}
.cb-sg{flex:1;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--caps);font-size:9.6px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.cb-sg--on{background:#000;box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink)}
.cb-sg i{width:9px;height:9px;border-radius:2px;flex:none;display:block}
.k1s.cb-ikey{margin-top:1px}
@media (max-width:1100px){.ov-top{grid-template-columns:1fr}.ov-hook{max-width:400px}.cb-body{grid-template-columns:74px 1fr}.cb-pane{display:none}}
/* the home's shot hook is artwork: its head row and floor ride the picture's width (the portal's own cqw rules), so a 260px column keeps the badge, the name and the three keys on one line */
.hm-hook{container-type:inline-size}
.hm-hook .hm-ph{top:5.5cqw;left:6.5cqw;right:6.5cqw;gap:2.8cqw}
.hm-hook .hm-bdg{width:11cqw;height:11cqw;border-radius:1.8cqw}
.hm-hook .hm-bdg svg{width:52%;height:52%}
.hm-hook .hm-phn{font-size:6.2cqw}
.hm-hook .hm-pk{gap:1.8cqw}
.hm-ck{width:11cqw;height:11cqw;border-radius:1.8cqw}
.hm-ck svg{width:54%;height:54%}
.hm-fl{left:6.5cqw;right:6.5cqw;bottom:5.5cqw;gap:6px}
.hm-sbadge,.hm-count{font-size:max(2.6cqw,8.5px)}
/* ── the four screens on a phone (app-home.mobile.html 31b + the SHOT screens' phone frames): .mbody{padding:16px;gap:40px},
   34px badges and keys, 19 names, the shot panel with its hook at 4:3, the wall one card per row, the overview stacked ── */
.pstage .pm{flex:1;min-height:0;overflow:hidden;padding:16px;display:flex;flex-direction:column;gap:40px}
.pstage .hm-mgr{display:flex;align-items:center;gap:11px}
.pstage .hm-greet{font-size:17px;font-weight:500}
.pstage .hm-date{margin-top:3px;font-size:8.8px}
.pstage .hm-sec{gap:16px}
.pstage .hm-rk{width:34px;height:34px}
.pstage .hm-rail{-webkit-mask-image:none;mask-image:none}
.pstage .hm-rail .hm-card{flex:0 0 100%}
.pstage .hm-hook{aspect-ratio:4/3}
.pstage .hm-hook .hm-ph{top:20px;left:20px;right:20px;gap:14px}
.pstage .hm-hook .hm-bdg{width:34px;height:34px;border-radius:7px}
.pstage .hm-hook .hm-phn{font-size:19px}
.pstage .hm-hook .hm-pk{gap:8px}
.pstage .hm-ck{width:34px;height:34px;border-radius:6px}
.pstage .hm-fl{left:20px;right:20px;bottom:14px;gap:8px}
.pstage .hm-sbadge,.pstage .hm-count{font-size:9.8px}
.pstage .hm-sbd{padding:16px 20px 20px}
.pstage .hm-chd{font-size:23px}
.pstage .k1s.hm-k1{height:44px}
.pstage .sw-grid{display:flex;flex-direction:column;gap:16px;padding:0}
.pstage .sw-card{opacity:1;transform:none;flex:none}
.pstage .sw-words{padding:14px 16px 18px}
.pstage .sw-t{font-size:23px}
.pstage .sw-s{margin-bottom:14px}
.pstage .ov{gap:0}
.pstage .ov-copy{margin-top:20px}
.pstage .ov-mt{font-size:28px}
.pstage .ov-ms{font-size:15px}
.pstage .k1s.ov-ikey{max-width:none}
.pstage .ov-hd{margin-top:40px}
.pstage .ov-grid{grid-template-columns:1fr;margin-top:16px}
.pstage .cb{gap:20px}
.pstage .cb-col{max-width:none;gap:10px}
.pstage .cb-big{width:100%;border-radius:8px}
.pstage .cb-strip{display:flex;gap:7px;overflow:hidden}
.pstage .cb-strip .cb-th{width:64px;flex:none}
.pstage .cb-pane{gap:20px;overflow:visible}
.pstage .cb-psec--slide{padding-top:20px}
/* the trio reads as one row (JT 2026-09-24 "cheat and resize the Brain and Momentum cards"): the shot card sets the height;
   its meta line hangs under it and never counts; Brain and Momentum tighten to fit it — 24 padding, 36 chips, a 50 bar,
   a 40 streak, 12 between the month's rows, 10 12 in the week's cells */
.hm-g3>div:first-child{position:relative}
.hm-pmeta{position:absolute;left:0;right:0;top:100%;margin-top:14px}
.hm-pn{padding:24px}
.hm-chips{margin:auto 0;padding:14px 0;gap:8px}
.hm-chip{height:36px;padding:0 14px;font-size:10px}
.hm-ibar{height:50px;padding:0 6px 0 14px}
.hm-isend{width:38px;height:38px}
.hm-strk{margin-top:14px}
.hm-num{font-size:40px}
.hm-dots{margin-top:16px;row-gap:12px}
.hm-dl{margin-top:10px}
.hm-wkh{padding-top:16px}
.hm-wk{margin-top:8px}
.hm-wki{padding:10px 12px;gap:6px}

/* ═══ THE AD'S SHADOW FOLLOWS THE AD (JT 2026-09-24 "this shadow on the little ads is still too intense… could stay the same on the blue one"): the red can and the sauce sit on a lighter, shorter shadow; the blue capsule keeps the deep one ═══ */
.hero .obj{transition:box-shadow .9s ease}
.hero .obj[data-ad="0"],.hero .obj[data-ad="2"]{box-shadow:0 40px 80px -36px rgba(0,0,0,.55),0 0 0 .75px rgba(255,255,255,.3)}

/* ═══ THE WINDOW MOVES WITH ITS SCREEN (JT 2026-09-24 "you have room to close the bottom of these UIs… for the carousel,
   simply close out after the pagination and hide a part of the right sidebar"): every scene sits absolute in the window;
   landing.js sets the window's height to the active screen's own floor (the home's last row, the wall's grid, the
   overview's tiles, the bench's versions strip) and the rest is clipped. The sidebar clips with it. ═══ */
.studio .device{height:var(--wh,auto);transition:height .6s var(--ease)}
.studio .work{height:100%;min-height:0}
.studio .scene-a{position:absolute;inset:0;opacity:0;transform:translateY(18px);pointer-events:none}
.studio[data-state="a"] .scene-a{opacity:1;transform:none;pointer-events:auto}
/* ═══ THE FOUR MOVES (JT 2026-09-24): the shot card zooms out of the home and settles back; the wall's cards turn to
   their explainers and back while NEW SHOT opens its menu; the overview's carousel pad comes alive; the bench walks
   the rail and shows the slides ═══ */
/* 1 · the zoom: the card lifts over the page (landing.js sets the translate to the window's centre) */
.hm-g3>div:first-child{position:relative;z-index:1}
.hm-shot{transition:transform .8s var(--ease),box-shadow .8s var(--ease);transform-origin:50% 50%}
.hm-shot.is-zoom{box-shadow:0 50px 100px -20px rgba(0,0,0,.85);z-index:8;position:relative}
/* 2 · the turn: the hook turns alone, the words stay (30A) */
.sw-hook{perspective:1400px}
.sw-hook::before,.sw-hook::after{display:none}
.sw-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.22,.72,.16,1)}
.sw-card.is-back .sw-flip{transform:rotateY(180deg)}
.sw-face,.sw-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.sw-face::before,.sw-face::after{content:"";position:absolute;left:-1px;right:-1px;z-index:1;pointer-events:none}
.sw-face::before{top:-1px;height:46%;background:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,0))}
.sw-face::after{bottom:-1px;height:40%;background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,0))}
.sw-back{transform:rotateY(180deg);z-index:auto}
.sw-card--back .sw-top,.sw-card--back .sw-count,.sw-card--back img{visibility:visible}
/* the NEW SHOT menu — the wall's own picker: the three intents, a hairline, then FREE FORM; orange glyph, the noun, the note */
.sw-menuwrap{position:relative;display:flex}
.sw-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:9;width:262px;display:none;flex-direction:column;padding:6px;background:var(--shell);border:1px solid var(--hair);border-radius:8px;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.sw-menuwrap.is-open .sw-menu{display:flex}
.sw-mrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:5px;color:var(--org)}
.sw-mrow:first-child{background:var(--fill)}
.sw-mn{font-family:var(--caps);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.sw-mrow b{margin-left:auto;font-family:var(--caps);font-size:9.8px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.sw-mrow--soon{opacity:.45}
.sw-msep{height:1px;margin:6px 8px;background:var(--hair)}
/* 3 · the pad comes alive: the three mini slides stand up one after another, the count reads one post */
.ov-lzs--t{background:#e8ebea;padding:6px 5px;justify-content:flex-start;gap:4px}
.ov-lzt{font-family:var(--disp);font-size:5.4px;line-height:1.25;font-weight:400;color:#0a1915;letter-spacing:-.01em}
.ov-lzs{transition:transform .55s var(--ease),opacity .55s ease}
.ov-tile .ov-lz{transition:opacity .55s ease}
.ov-tile.is-live{background:var(--fill)}
.ov-tile.is-live .ov-lz{opacity:1}
.ov-tile.is-live .ov-lzs--img img{filter:none}
.ov-tile.is-live .ov-lzs{transform:translateY(-8px)}
.ov-tile.is-live .ov-lzs:nth-child(2){transition-delay:.18s}
.ov-tile.is-live .ov-lzs:nth-child(3){transition-delay:.36s}
.ov-tile .ov-go{transition:opacity .3s ease,transform .3s ease}
.ov-tile.is-live .ov-go{opacity:0;transform:scale(.6)}
/* 4 · the walk: every slide stands on the stage, the active one shows; the rail slides up under the window's edge */
.cb-bigs{position:relative;width:min(100%,344px);aspect-ratio:1080/1350}
.cb-bigs .cb-big{position:absolute;inset:0;width:100%;opacity:0;transition:opacity .3s ease}
.cb-bigs .cb-big.is-on{opacity:1}
.cb-rail>*,.cb-strip>*{transition:transform .6s var(--ease),border-color .3s ease}
.pstage .cb-bigs{width:100%}
/* one height for the four screens: the bench's stage sits centred again, its rail shows every slide; the step keys never break their word */
.cb-stage{align-items:center}
.steps button{white-space:nowrap}

/* ═══ THE COVERS KEEP THEIR COLOUR (JT 2026-09-24 "the ellipse under the text steals some of the covers around the text to be full color"): a tighter, lighter ellipse just under the headline and the key; the tiles brighter; the headline carries its own soft shadow for legibility ═══ */
.closer::after{background:radial-gradient(ellipse 46% 38% at 50% 50%,rgba(0,0,0,.97),rgba(0,0,0,.72) 58%,rgba(0,0,0,0) 100%)}   /* darker and slightly bigger (JT 2026-09-24) */
.closer .tile{opacity:calc(.72 + var(--p)*.28)}
.closer .big{text-shadow:0 2px 6px rgba(0,0,0,.6),0 10px 40px rgba(0,0,0,.6)}

/* ═══ THE PHONES, ONE HEIGHT (JT 2026-09-24 "make all phone mockups the same height again, not too high, and make sure
   the content of those screens goes to the bottom of the phone"): the screen is 2:1 (700 tall on a 350 frame) and every
   scene's content runs past its fold. The bench follows 43b: the slides as a strip right under the header, then the slide,
   its versions, one hairline, then the slide's own blocks. ═══ */
.pstage .scr{aspect-ratio:1/2;min-height:0;height:auto}
.pstage .pm{overflow:visible}
.pstage .pm>*{flex:none}
.pstage .k1--dl{height:34px;padding:0 13px;font-size:10.5px;letter-spacing:.14em;margin-left:auto}
.pstage .cb-strip{display:flex;gap:8px;padding:12px 16px;overflow:hidden;flex:none;align-items:flex-start}
.pstage .cb-strip .cb-th{width:66px;flex:none;position:relative}
.pstage .cb-strip .cb-th--on:not([data-slide="1"])::after{content:"×";position:absolute;top:5px;right:5px;z-index:2;width:15px;height:15px;border-radius:3px;background:var(--red);color:#fff;font:600 11px/15px var(--disp);text-align:center}
.pstage .cb-add--m{width:62px;aspect-ratio:1080/1350;height:auto;border-radius:4px;font-size:18px;margin:2px 0 0}
.pstage .cb{gap:24px;padding-top:4px}
.pstage .cb-col{gap:10px}
.pstage .cb-pane{border-top:1px solid var(--hair);padding-top:24px;gap:24px}
.pstage .cb-psec--slide{padding-top:0;border-top:0}
/* the viewed slide's top lines up with the rail and the panel (JT 2026-09-24) */
.studio .scene-d .cb-stage{align-items:flex-start}

/* ═══ THE STEPS ON A PHONE (JT 2026-09-24): every title breaks the same way on the phone as on the desk — two lines, the
   break where it is written — so the type is sized to keep each line whole; the step keys are the numbers alone, on one row ═══ */
@media (max-width:760px){
  .studio .head .h .dbr{display:block}
  .studio .head .h{font-size:clamp(2rem,9.6vw,46px);white-space:nowrap}
  .steps{display:flex;grid-template-columns:none;flex-wrap:nowrap;gap:10px;width:auto;max-width:none;justify-content:center;margin-top:22px}
  .steps button .sl{display:none}
  .steps .sep{display:none}
  .steps button{width:auto;height:40px;padding:0 12px;gap:0;justify-content:center}
}

/* ═══ THE PHONE'S OWN MOVES (JT 2026-09-25 "on mobile, the animation… don't translate… highlight what's interesting in each
   step VISUALLY… we also lost the chevron between each step"): the chevrons come back between the numbers; the home's
   card comes forward while the rest of the screen dims; the overview's page slides up to its carousel pad (landing.js). ═══ */
@media (max-width:760px){
  .steps{gap:6px}
  .steps .sep{display:flex;height:auto}
  .steps .sep svg{transform:none}
}
.pstage .pm>*{transition:transform .9s var(--ease),opacity .6s var(--ease)}
.pstage .pscene[data-scene="a"].is-zoom .pm>*:not(:has(.hm-shot)){opacity:.16}
.pstage .hm-shot.is-zoom{box-shadow:0 30px 60px -10px rgba(0,0,0,.9)}
.pstage .pscene[data-scene="c"] .pm{overflow:hidden}   /* the page scrolls under its headers, never over them */

/* ═══ THE SCREENS CROSS-FADE (JT 2026-09-25 "the transition between each screen/phone step is very abrupt"): the leaving
   screen fades out over half a second while the next one fades in over most of a second, a beat behind it; the title
   and the window's height take the same unhurried time. The leaving screen's moves are put back only once it is gone. ═══ */
.stage .scene,.studio .scene-a,.studio .scene-b,.studio .scene-c,.studio .scene-d,.pstage .pscene{transition:opacity .55s var(--ease),transform .8s var(--ease)}
.stage[data-state="a"] .scene-a,.stage[data-state="b"] .scene-b,.stage[data-state="c"] .scene-c,.stage[data-state="d"] .scene-d,.studio[data-state="a"] .scene-a,.studio[data-state="b"] .scene-b,.studio[data-state="c"] .scene-c,.studio[data-state="d"] .scene-d,
.stage[data-state="a"] .pscene[data-scene="a"],.stage[data-state="b"] .pscene[data-scene="b"],.stage[data-state="c"] .pscene[data-scene="c"],.stage[data-state="d"] .pscene[data-scene="d"]{transition:opacity .9s var(--ease) .15s,transform 1s var(--ease) .15s}
.studio .head .h{transition:opacity .4s ease}
.studio .device{transition:height .9s var(--ease)}