@font-face{font-family:Geist;font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Geist-Regular.woff2') format('woff2')}
@font-face{font-family:Geist;font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Geist-Medium.woff2') format('woff2')}
@font-face{font-family:Geist;font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Geist-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/GeistMono-Regular.woff2') format('woff2')}
:root{--n1:#000;--n2:#202020;--n3:#2b2b2b;--n4:#383838;--n5:#505050;--hi:#fff;--lo:#a3a3a3;--lime:#cbff00;--L:48px;--S:15px;--r1:24px;--r2:16px;--r3:13px}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--n1);color:var(--hi);font:400 var(--S)/1.55 Geist,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.lo{color:var(--lo)}
.big{font-size:var(--L);line-height:1.1;letter-spacing:-.025em;font-weight:400}
header{display:flex;justify-content:space-between;align-items:center;max-width:1120px;margin:0 auto;padding:28px 32px}
header nav{display:flex;gap:28px}
section{max-width:1120px;margin:0 auto;padding:140px 32px}
.c{text-align:center}.c .big{max-width:760px;margin:0 auto}.hero .big{max-width:1000px}
.sub{margin-top:20px}
.hero{padding-top:120px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:96px;background:var(--n2);border-radius:var(--r1);padding:8px}
.tile{background:var(--n3);border-radius:var(--r2);padding:28px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px}
.offer{background:#fff;color:#000;border-radius:var(--r1);padding:96px 32px;text-align:center;max-width:880px;margin:0 auto}
.offer .lo{color:#6f6f6f}
.btn{display:inline-block;border-radius:999px;padding:12px 26px}
.offer .btn{background:#000;color:#fff;margin-top:40px}
.term{max-width:760px;margin:72px auto 0;background:#0c0c0c;border:1px solid var(--n4);border-radius:var(--r3);overflow:hidden;text-align:left}
.bar{height:34px;background:var(--n2);display:flex;align-items:center;padding:0 14px;gap:8px;position:relative}
.bar i{width:12px;height:12px;border-radius:50%;background:#ff5f57}.bar i:nth-child(2){background:#febc2e}.bar i:nth-child(3){background:#28c840}
.bar span{position:absolute;left:0;right:0;text-align:center;font:400 12px 'Geist Mono',monospace;color:#8a8a8a}
.term pre{font:400 13px/1.7 'Geist Mono',monospace;color:#b5b5b5;padding:20px 22px 24px;white-space:pre-wrap}
.term .w{color:#fff}.term .g{color:#7fd6c2}
.pager{display:flex;gap:4px;width:max-content;margin:28px auto 0;background:var(--n2);border-radius:999px;padding:4px}
.pager a{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--lo)}
.pager a.on{background:var(--n4);color:var(--hi)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:72px;background:var(--n2);border-radius:var(--r1);padding:8px}
.feat{background:var(--n3);border-radius:var(--r2);aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.feat svg{width:36px;height:36px;fill:none;stroke:var(--hi);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.faq{max-width:760px;margin:64px auto 0;text-align:left}
.row{display:flex;justify-content:space-between;padding:24px 0;border-top:1px solid var(--n4)}
.row:last-of-type{border-bottom:1px solid var(--n4)}
.res{display:block;text-align:center;margin-top:40px}
footer{max-width:1120px;margin:0 auto;padding:48px 32px 48px;display:flex;justify-content:space-between;border-top:1px solid var(--n3)}
.pin{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);translate:0 var(--dy,0px);will-change:translate;z-index:60;background:var(--lime);color:#000;border-radius:999px;padding:12px 26px;box-shadow:0 8px 24px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3);transition:transform 150ms var(--ease,cubic-bezier(.2,.8,.2,1)),box-shadow 150ms cubic-bezier(.2,.8,.2,1),filter 150ms cubic-bezier(.2,.8,.2,1)}
.pin:hover{filter:brightness(1.06);box-shadow:0 12px 32px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3)}
.pin:active{transform:translateX(-50%) translateY(1px) scale(.96)}
@media(max-width:640px){:root{--L:34px}section{padding:96px 20px}header{padding:22px 20px}.tiles{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.offer{padding:72px 24px}.term pre{font-size:11px}footer{padding:40px 20px 40px}}
:root{--ease:cubic-bezier(.2,.8,.2,1);--ease-l:cubic-bezier(.16,1,.3,1)}
.sw{font:inherit;color:var(--hi);background:var(--n3);border:0;border-radius:999px;padding:0 .28em;margin:0 .02em;cursor:pointer;display:inline-block;vertical-align:baseline;line-height:1.15;overflow:hidden;white-space:nowrap;transition:width 300ms var(--ease-l),background 150ms var(--ease)}
.sw:hover{background:var(--n4)}
.sw span{display:inline-block;transition:opacity 150ms var(--ease),filter 150ms var(--ease)}
.sw.out span{opacity:0;filter:blur(6px)}
.hl .ln{display:block;white-space:nowrap}.hl .mo{display:none}
.sw span{display:inline-flex;align-items:center;gap:.22em}.sw svg,.sw img{width:.72em;height:.72em;flex:none;border-radius:.16em}
.hl .sw{vertical-align:-.12em}
@media(max-width:640px){.hl .dt{display:none}.hl .mo{display:block}}
.hl{line-height:1.32}.hl .sw{line-height:1.1;padding:.02em .28em}

@media(max-width:640px){.hl .ln{white-space:normal}.hl .ln:has(.sw){white-space:nowrap}}
.hl br.mb{display:none}@media(max-width:640px){.hl br.mb{display:inline}}
/* hero pills v5 */
.sw{transition:width 420ms cubic-bezier(.34,1.3,.64,1),background 150ms var(--ease),transform 150ms var(--ease)}
.sw .in{display:inline-flex;align-items:center;gap:.22em}
.sw .ic{position:relative;width:.72em;height:.72em;flex:none;display:inline-block}
.sw .ix{position:absolute;inset:0;display:block}.sw .ix svg,.sw .ix img{width:100%;height:100%;display:block}
.sw .tx{position:relative;display:inline-block}
.sw .wd{display:inline-block;transition:opacity 200ms var(--ease),filter 200ms var(--ease)}
.sw .wd.gone{position:absolute;left:0;top:0;opacity:0;filter:blur(4px)}
.sw:hover{background:var(--n3)}.sw:active{transform:scale(.97)}
/* terminal */
.term.js .tl{opacity:0}.term.js .tl.on{opacity:1}
.term .tl{transition:opacity 120ms linear}.term .sp.ok{color:#7fd6c2}
.cur{animation:bl 1s steps(1) infinite}@keyframes bl{50%{opacity:0}}
/* faq */
.row{display:block;padding:0}
.q{all:unset;box-sizing:border-box;width:100%;display:flex;justify-content:space-between;align-items:center;padding:24px 0;cursor:pointer}
div.q{cursor:default}
.chev{width:18px;height:18px;fill:none;stroke:var(--lo);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 320ms cubic-bezier(.34,1.56,.64,1),stroke 150ms var(--ease)}
.q:hover .chev{stroke:var(--hi)}
.q[aria-expanded=true] .chev{transform:rotate(180deg)}
.pa{display:grid;grid-template-rows:0fr;transition:grid-template-rows 300ms var(--ease-l)}
.pa.on{grid-template-rows:1fr}.pa>div{overflow:hidden}.pa p{padding:0 40px 24px 0}
/* sheet */
dialog.sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:480px;max-height:none;border:0;background:var(--n2);color:var(--hi);border-radius:var(--r1) var(--r1) 0 0;padding:12px 28px 40px;transform:translateY(100%);transition:transform 300ms var(--ease-l);touch-action:none;font:inherit}
dialog.sheet.on{transform:translateY(0)}dialog.sheet.drag{transition:none}
dialog.sheet::backdrop{background:rgba(0,0,0,.6);opacity:0;transition:opacity 300ms var(--ease)}
dialog.sheet.on::backdrop{opacity:1}
.grab{width:36px;height:4px;border-radius:2px;background:var(--n5);margin:0 auto 28px;cursor:grab}
.st{display:flex;flex-direction:column;gap:8px}.st[hidden]{display:none}
.st input{font:inherit;color:var(--hi);background:var(--n3);border:1px solid var(--n4);border-radius:12px;padding:12px 14px;margin-top:16px;outline:0;transition:border-color 150ms var(--ease)}
.st input:focus{border-color:var(--lo)}.st input::placeholder{color:var(--lo)}
.st .code{letter-spacing:.4em;text-align:center}
.wb{background:#fff;color:#000;border:0;font:inherit;cursor:pointer;margin-top:8px;transition:background 150ms var(--ease),transform 150ms var(--ease)}
.lk{all:unset;cursor:pointer;text-align:center;padding:8px 0;transition:color 150ms var(--ease)}
.kv{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid var(--n4);text-align:left}
.kv:first-of-type{margin-top:12px}.kv input{margin:0;background:none;border:0;padding:0;text-align:right}
.kv.lk:last-child{border-bottom:1px solid var(--n4)}
/* press states, no hover lift */
.pin:hover{filter:none;box-shadow:0 8px 24px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.3)}
.btn,.pager a,header a,.res,.lk{transition:background 150ms var(--ease),color 150ms var(--ease),transform 150ms var(--ease)}
.btn:active,.wb:active,header a:active,.res:active,.lk:active,.q:active{transform:translateY(1px)}
.pager a:active{transform:scale(.97)}
header a.lo:hover,.res:hover,.lk.lo:hover{color:var(--hi)}
.offer .btn:hover{background:#202020}.wb:hover{background:#e6e6e6}
@media(prefers-reduced-motion:reduce){*{transition-duration:0s!important;animation:none!important}}
.lk.lo{color:var(--lo)}
/* v6 */
.wm:active{transform:translateY(1px)}
dialog.sheet{transition:transform 400ms var(--ease-l)}dialog.sheet::backdrop{transition:opacity 400ms var(--ease)}
.grid{grid-template-columns:repeat(4,1fr);gap:0;padding:0;background:none;border:1px solid var(--n4);border-radius:var(--r1);margin:72px auto 0;max-width:1000px}
.feat{aspect-ratio:auto;background:none;border-radius:0;align-items:flex-start;justify-content:flex-start;text-align:left;gap:0;padding:28px 28px 32px;border-left:1px solid var(--n4)}
.feat:first-child{border-left:0}
.feat svg{width:20px;height:20px;stroke:var(--lo);margin-bottom:28px}
.feat .lo{margin-top:4px}
.fq{max-width:824px}.fq .big{text-align:left}
.fq .faq{max-width:none;margin-top:72px}
.row{border-top:1px solid var(--n4)}.row:first-child{border-top:0}.row:last-of-type{border-bottom:0}
.q{padding:28px 0}
/* fan */
.fan{max-width:none;padding:20px 0 40px;overflow:hidden}
.fw{position:relative;height:380px;width:1300px;left:50%;margin-left:-650px}
.mc{position:absolute;top:0;left:50%;width:220px;margin-left:-110px;background:var(--n2);border:1px solid var(--n4);border-radius:var(--r2);padding:18px;display:flex;flex-direction:column;gap:8px;box-shadow:0 20px 40px rgba(0,0,0,.5);transform:translate3d(var(--x),var(--y),0) rotate(var(--r));will-change:transform,opacity}
.c1{--x:-480px;--y:110px;--r:-14deg;--d:-1s;z-index:1}.c2{--x:-320px;--y:55px;--r:-9deg;--d:-3s;z-index:2}.c3{--x:-160px;--y:20px;--r:-4deg;--d:-5s;z-index:3}.c4{--x:0px;--y:8px;--r:0deg;--d:-2s;z-index:4}.c5{--x:160px;--y:20px;--r:4deg;--d:-6s;z-index:3}.c6{--x:320px;--y:55px;--r:9deg;--d:-4s;z-index:2}.c7{--x:480px;--y:110px;--r:14deg;--d:-7s;z-index:1}
.mc.wt{background:#fff;color:#000;border-color:#fff}.mc.wt .lo{color:#6f6f6f}
.mc.mono{font-family:'Geist Mono',monospace}
.fld{border:1px solid var(--n4);border-radius:10px;padding:8px 10px;background:var(--n3)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pb{border-radius:999px;padding:8px;text-align:center;background:#fff;color:#000;margin-top:4px}.pb.dk{background:#000;color:#fff}.pb.gh{background:var(--n3);color:var(--hi);margin:0}
.kv2{display:flex;justify-content:space-between}
.otp{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:4px}.otp i{font-style:normal;height:40px;border:1px solid var(--n4);border-radius:8px;display:grid;place-items:center;background:var(--n3)}
@media(max-width:640px){.grid{grid-template-columns:1fr}.feat{border-left:0;border-top:1px solid var(--n4)}.feat:first-child{border-top:0}
}
.mc{width:200px;margin-left:-100px}
/* fan: arc on wide screens, flat looping row on phones */
.fan{touch-action:pan-y}
.fw{height:400px}
.fan.on .mc{opacity:0}
@media(max-width:600px){.fan{padding:88px 0 24px;cursor:grab;user-select:none;-webkit-user-select:none}.fan:active{cursor:grabbing}
.fw{left:0;margin-left:0;width:max-content;height:auto;display:flex;gap:16px;will-change:transform}
.mc,.fan.on .mc{position:relative;left:auto;margin-left:0;width:180px;flex-shrink:0;transform:none;opacity:1;box-shadow:none}}
/* task 6: spacing scale (8px base, 32/96 rhythm, after Graphical) */
:root{--s1:8px;--s2:16px;--s3:32px;--s4:64px;--s5:96px;--s6:192px;--sec-t:var(--s6);--sec-b:var(--s5);--gap-h:var(--s5);--hero-t:112px;--card:var(--s3)}
@media(max-width:640px){:root{--sec-t:var(--s4);--sec-b:var(--s4);--gap-h:48px;--hero-t:96px;--card:24px}}
section:not(.fan){padding-top:var(--sec-t);padding-bottom:var(--sec-b)}
.hero{padding-top:var(--hero-t)!important;padding-bottom:var(--s5)!important}
.sub{margin-top:var(--s3)}
.tsec{padding-top:0!important}.tsec .tiles{margin-top:0;text-align:left}
.tile{padding:var(--card)}
.offer{padding:var(--s5) var(--s3)}
@media(max-width:640px){.offer{padding:var(--s4) 24px}}
.term,.grid,.fq .faq{margin-top:var(--gap-h)}
.q{padding:36px 0}@media(max-width:640px){.q{padding:26px 0}}
.feat{padding:var(--card)}
/* task 6: JSC-style pill (form/feel from jsc.one CTA; our lime + Geist) */
@property --pop{syntax:'<length>';inherits:false;initial-value:0px}
.offer .btn,.pin{display:inline-flex;align-items:center;gap:12px;height:64px;padding:0 32px;line-height:24px;border-radius:9999px;box-shadow:none;transition:transform 150ms cubic-bezier(.4,0,.2,1),background 150ms cubic-bezier(.4,0,.2,1)}
.ar{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 150ms cubic-bezier(.4,0,.2,1)}
.offer .btn:hover .ar,.pin:hover .ar{transform:translateX(4px)}
.offer .btn:active{transform:scale(.97)}
.pin{--pop:120px;translate:0 calc(var(--dy,0px) + var(--pop));pointer-events:none;transition:transform 150ms cubic-bezier(.4,0,.2,1),--pop 220ms cubic-bezier(.4,0,1,1)}
.pin.up{--pop:0px;pointer-events:auto;transition:transform 150ms cubic-bezier(.4,0,.2,1),--pop 400ms cubic-bezier(.34,1.56,.64,1)}
.pin:active{transform:translateX(-50%) scale(.97)}
.pin:hover{box-shadow:none;filter:none}.pin{white-space:nowrap}
/* v9: anchored hero lines; fixed text never moves, pills grow to the right */
.hl .an{display:block;white-space:nowrap}
.hl .an .lw{display:inline-block;text-align:left;white-space:nowrap}
.hl .b2{display:none}
.hl .an.brk .lw{text-align:center}.hl .an.brk .b2{display:inline}
/* v9: heavier, bigger CTA label (accepted exception) */
.offer .btn,.pin{font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:26px;gap:12px}
.offer .btn .ar,.pin .ar{width:24px;height:24px;stroke-width:2.25}
/* v10: CTA label after Graphical's Buy (500, -0.02em), no arrow */
.offer .btn,.pin{font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:36px;height:72px;padding:0 36px;gap:0}
@media(max-width:640px){.offer .btn,.pin{font-size:22px;line-height:30px;height:60px;padding:0 28px}}
/* v10: checkout sheet (intent test) */
.co .big{margin-top:4px}.co>.lo:not(.msg){margin-top:-4px}
.co .pay{height:48px;border-radius:999px;margin-top:16px}
.co .pay:disabled{background:var(--n4);color:var(--lo);cursor:not-allowed;transform:none}
.co .msg{margin-top:8px;text-align:center}
/* v13: measured on graphicalui.com (30 Oct 2026). Top-edge links sit in a box 16px from the edge, each link 64px tall with 32px side padding, so the visible edge inset is 48px. */
header{max-width:none;margin:0;padding:16px;height:96px}
header>a{display:flex;align-items:center;height:64px;padding:0 32px}
/* hero fills the first view minus the header and a peek of the offer card (Graphical lets its next heading peek ~1 heading-height above the fold) */
:root{--peek:88px}
@media(max-width:640px){:root{--peek:72px}}
.hero{min-height:calc(100svh - 96px - var(--peek));display:flex;flex-direction:column;justify-content:center;padding-top:0!important;padding-bottom:var(--s5)!important}
@media(max-width:640px){.hero{padding-bottom:var(--s4)!important}}
.hero+section{padding-top:0}
/* one idea per view: Graphical uses 192 top / 96 bottom per section, 288 into a major demo */
.fsec{padding-top:288px!important;padding-bottom:192px!important}
.fsec .grid{margin-top:128px;max-width:1120px;border:0;border-radius:0;gap:32px}
.fsec .feat{border:1px solid var(--n4);border-radius:var(--r2);padding:var(--s3) var(--s3) 40px}
.fsec .feat svg{margin-bottom:64px}
@media(max-width:1100px){.fsec .grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.fsec{padding-top:192px!important;padding-bottom:128px!important}.fsec .grid{grid-template-columns:1fr;gap:16px;margin-top:64px}.fsec .feat,.fsec .feat:first-child{border:1px solid var(--n4)}.fsec .feat svg{margin-bottom:48px}}
footer{align-items:center}
.hero>.big{width:100%}
/* v13b: pill label sits on the text baseline. overflow:clip keeps the inline-block's text baseline (hidden would move it to the bottom edge); the label, not the icon, defines the flex baseline. */
.sw,.hl .sw{overflow:clip;vertical-align:baseline}
.sw .tx{align-self:baseline}
/* v13b: on phones the pill line is pre-broken before the script measures, so the first anchor() pass does not add a line (CLS). */
@media(max-width:480px){.hl .an:not(.ok) .b2{display:inline}.hl .an:not(.ok) .lw{text-align:center}}

/* v15: legal line. Body size, grey; links inherit grey and underline on hover. */
footer{gap:32px;flex-wrap:wrap}.legal{font-size:var(--S);text-align:right}.legal a:hover{color:var(--hi)}
@media(max-width:640px){footer{flex-direction:column;align-items:flex-start}.legal{text-align:left}}

/* ===== Hybrid: Graphical body copy only; headlines, pills, Buy pill, Login, spacing unchanged ===== */
.sub,.tile p,.feat p,.pa p,.legal{font-size:20px;line-height:32px;font-weight:400;letter-spacing:-.4px}
.tile p:first-child,.feat p:not(.lo),.q span{font-size:20px;line-height:32px;font-weight:500;letter-spacing:-.5px}
@media(max-width:640px){
 .sub,.tile p,.feat p,.pa p,.legal{font-size:18px;line-height:28px;letter-spacing:-.36px}
 .tile p:first-child,.feat p:not(.lo),.q span{font-size:20px;line-height:28px;letter-spacing:-.5px}
}