/* Spunfor v4: "spun together". Heavy Unbounded display type, rotation motion, orbital geometry, modules that spin into place and snap together.
   Palette: ink #0D0D0C, bone #F3EFE4, lime #C8F31D, tomato #FF4A1C. No gradients, no glass, no thread. */
@font-face{font-family:"Unbounded";src:url(fonts/unbounded.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/dm-mono.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Mono";src:url(fonts/dm-mono-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{
  --ink:#0D0D0C;--bone:#F3EFE4;--bone2:#E7E1D0;--lime:#C8F31D;--tom:#FF4A1C;--mute:#5A574D;--mute-d:#B9B5A6;
  --disp:"Unbounded","Arial Black",system-ui,sans-serif;--body:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --snap:cubic-bezier(.2,1.35,.35,1);--pad:clamp(18px,4.5vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.55;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:var(--ink);padding:10px 16px;border-radius:99px;font-weight:800;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--tom);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--disp);font-weight:900;margin:0;letter-spacing:-.05em;line-height:.98}
em{font-style:normal}
.k{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin:0 0 18px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.k b{background:var(--ink);color:var(--lime);border-radius:99px;padding:3px 10px;font-weight:500}
.sub{font-size:clamp(1.05rem,2.2vw,1.3rem);max-width:46ch;margin:18px 0 0;color:var(--mute);font-weight:500}
.fine{font-size:.85rem;color:var(--mute)}
.mono{font-family:var(--mono)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--disp);font-weight:800;font-size:.95rem;letter-spacing:-.02em;text-decoration:none;border:3px solid var(--ink);background:var(--ink);color:var(--lime);border-radius:99px;padding:14px 26px;min-height:52px;cursor:pointer;transition:transform .35s var(--snap),background .2s,color .2s}
.btn:hover{transform:rotate(-2.5deg) scale(1.04);background:var(--tom);border-color:var(--ink);color:var(--ink)}
.btn.big{font-size:clamp(1rem,2.4vw,1.15rem);padding:18px 32px;min-height:64px}
.btn.small{padding:8px 18px;min-height:44px;font-size:.85rem}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--lime);color:var(--ink)}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn.lime:hover{background:var(--bone)}
.btn .arr{display:inline-block;transition:transform .5s var(--snap)}
.btn:hover .arr{transform:rotate(360deg)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* nav */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--pad);background:var(--bone);border-bottom:3px solid var(--ink)}
.logo img{height:36px;width:auto}
.nav nav{display:flex;align-items:center;gap:6px}
.nav nav a:not(.btn){font-family:var(--disp);font-weight:700;font-size:.8rem;letter-spacing:-.02em;text-decoration:none;padding:10px 12px;border-radius:99px}
.nav nav a:not(.btn):hover{background:var(--lime)}
@media(max-width:860px){.nav nav a:not(.btn):not(.saas-tab){display:none}.nav nav a.saas-tab{display:inline-flex;font-size:.85rem;padding:9px 12px;background:var(--lime);border:2px solid var(--ink)}.logo img{height:32px}.nav{gap:8px}}

/* giant disc that turns as you scroll */
.bigdisc{position:fixed;right:-28vmin;top:12vh;width:92vmin;height:92vmin;pointer-events:none;z-index:0;opacity:.09;transform:rotate(var(--spin,0deg))}
.bigdisc svg{width:100%;height:100%}
.bigdisc path{stroke:var(--ink);stroke-width:5;stroke-linecap:round;fill:none}
main{position:relative}
main>section,.ticker{position:relative;z-index:1}

/* hero */
.hero{padding:clamp(34px,6vw,84px) 0 clamp(40px,7vw,96px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:center}
.hero h1{font-size:clamp(2.55rem,10.4vw,6.1rem);line-height:.92;letter-spacing:-.05em;margin:0 0 26px}
.hero h1 .l{display:block}
.spunword{display:inline-block;background:var(--lime);padding:.02em .16em .06em;border-radius:.2em;transform:rotate(-3deg);box-shadow:.06em .06em 0 var(--ink);animation:spunin 1.3s var(--snap) both .1s}
@keyframes spunin{from{transform:rotate(-200deg) scale(.4);opacity:0}to{transform:rotate(-3deg);opacity:1}}
.lead{font-size:clamp(1.1rem,2.3vw,1.4rem);max-width:34ch;font-weight:600;margin:0 0 30px;line-height:1.4}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.vows{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.vows li{font-family:var(--mono);font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--ink);border-radius:99px;padding:5px 14px}
.hero-art{position:relative;width:100%;max-width:560px;justify-self:center;aspect-ratio:1}
.orrery{width:100%;height:100%;overflow:visible}
.ring{fill:none;stroke-width:46;transform-box:view-box;transform-origin:50% 50%;transform:rotate(-90deg)}
.ring.thin{stroke-width:30}
.r-lime{stroke:var(--lime)}.r-ink{stroke:var(--ink)}.r-tom{stroke:var(--tom)}.r-bone{stroke:var(--bone2)}
.snap,.drift{transform-box:view-box;transform-origin:50% 50%}
.a1{animation:snap1 1.5s var(--snap) both .2s}.a2{animation:snap2 1.6s var(--snap) both .35s}.a3{animation:snap3 1.7s var(--snap) both .5s}.a4{animation:snap4 1.8s var(--snap) both .65s}
@keyframes snap1{from{transform:rotate(-250deg)}to{transform:rotate(0)}}
@keyframes snap2{from{transform:rotate(300deg)}to{transform:rotate(0)}}
@keyframes snap3{from{transform:rotate(-340deg)}to{transform:rotate(0)}}
@keyframes snap4{from{transform:rotate(420deg)}to{transform:rotate(0)}}
.d1{animation:drift 46s linear infinite 2s}.d2{animation:drift 34s linear infinite reverse 2s}.d3{animation:drift 28s linear infinite 2s}.d4{animation:drift 20s linear infinite reverse 2s}
@keyframes drift{to{transform:rotate(360deg)}}
.hubspiral{transform-box:fill-box}
.badge-ring{position:absolute;right:-4%;bottom:-3%;width:34%;aspect-ratio:1;background:var(--tom);border:3px solid var(--ink);border-radius:50%;display:grid;place-items:center;animation:spin 18s linear infinite}
.badge-ring svg{position:absolute;inset:4%;width:92%;height:92%}
.badge-ring text{font-family:var(--disp);font-weight:800;font-size:15.5px;letter-spacing:.04em;fill:var(--ink)}
.badge-ring b{font-family:var(--disp);font-weight:900;font-size:clamp(1.6rem,5vw,2.6rem);color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.hero-art{max-width:420px}.badge-ring{right:0}}

/* ticker */
.ticker{background:var(--ink);color:var(--lime);overflow:hidden;border-block:3px solid var(--ink);padding:14px 0}
.ticker-in{display:flex;gap:28px;width:max-content;font-family:var(--disp);font-weight:900;font-size:clamp(1.4rem,4vw,2.6rem);letter-spacing:-.05em;text-transform:uppercase;white-space:nowrap;animation:tick 40s linear infinite}
.ticker-in i{font-style:normal;color:var(--tom);font-size:.6em;align-self:center}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
.section{padding:clamp(56px,9vw,128px) 0}
.sec-h{margin-bottom:clamp(30px,5vw,60px)}
.sec-h h2{font-size:clamp(2.1rem,7.2vw,5rem);max-width:15ch;letter-spacing:-.06em}
.sec-h h2 em,.m-top h2 em{color:var(--ink);background:var(--lime);padding:0 .12em;border-radius:.16em;display:inline-block;transform:rotate(-2deg)}
.dark-sec{background:var(--ink);color:var(--bone)}
.dark-sec .k b{background:var(--lime);color:var(--ink)}
.dark-sec .sub{color:var(--mute-d)}
.dark-sec .fine{color:var(--mute-d)}

/* modules: pieces that spin into place */
.reveal{opacity:0;transform:rotate(var(--r0,-7deg)) translateY(46px) scale(.94);transform-origin:20% 80%;transition:opacity .5s ease,transform .9s var(--snap)}
.reveal.in{opacity:1;transform:none}
.mods{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,2vw,22px)}
.mod{grid-column:span 2;border:3px solid var(--ink);border-radius:32px;padding:clamp(20px,3vw,32px);position:relative;overflow:hidden;min-height:310px;display:flex;flex-direction:column;justify-content:flex-end}
.mod h3{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 10px}
.mod p{margin:0;font-weight:600;max-width:32ch}
.mod .disc{position:absolute;right:-34px;top:-34px;width:150px;height:150px;border-radius:50%;border:26px solid currentColor;border-right-color:transparent;border-bottom-color:transparent;animation:spin 12s linear infinite}
.mod:nth-child(even) .disc{animation-direction:reverse;animation-duration:16s}
.m1{background:var(--lime);--r0:-9deg}.m2{background:var(--ink);color:var(--bone);--r0:7deg}.m2 .disc{color:var(--tom)}
.m3{background:var(--tom);--r0:-6deg}.m4{background:var(--bone2);--r0:8deg}.m5{background:var(--lime);--r0:-8deg}
.m4,.m5{grid-column:span 3}
.m1 .disc,.m3 .disc,.m5 .disc{color:var(--ink)}.m4 .disc{color:var(--tom)}
@media(max-width:860px){.mods{grid-template-columns:1fr}.mod,.m4,.m5{grid-column:auto;min-height:0;padding-top:96px}}

/* app sample tiles */
.tix{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);align-items:start}
.t{background:var(--bone);color:var(--ink);border-radius:28px;padding:22px;border:3px solid var(--bone)}
.t.t3{--r0:-6deg}.t.t1{--r0:5deg;background:var(--lime);border-color:var(--lime)}.t.t2{--r0:-4deg}
.t .k{justify-content:space-between;font-size:.7rem;margin-bottom:12px}
.t h4{font-size:1.5rem;margin:0 0 14px;letter-spacing:-.05em}
.t .stop{display:flex;gap:12px;align-items:center}
.t .stop i{font-style:normal;font-family:var(--disp);font-weight:900;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;flex:none;font-size:.85rem}
.t .stop small{color:var(--mute);font-family:var(--mono)}
.t .leg{margin:6px 0 6px 16px;padding-left:28px;border-left:4px dotted var(--tom);font-family:var(--mono);font-size:.8rem;color:var(--mute)}
.t .row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-top:2px solid var(--ink)}
.t .row small{display:block;font-family:var(--mono);font-size:.75rem}
.t .st{font-family:var(--mono);font-size:.7rem;font-weight:500;border:2px solid var(--ink);border-radius:99px;padding:2px 10px;flex:none}
.t .st.on{background:var(--ink);color:var(--lime)}
.t .ring{position:relative;width:min(100%,220px);aspect-ratio:1;margin:8px auto}
.t .ring i{position:absolute;border-radius:50%;border:4px solid var(--ink);inset:0;animation:spin 20s linear infinite;border-top-color:var(--tom);border-right-color:transparent}
.t .ring i:nth-child(2){inset:18%;animation-direction:reverse;animation-duration:14s;border-color:var(--ink);border-left-color:transparent}
.t .ring i:nth-child(3){inset:38%;border-color:var(--tom);animation-duration:9s;border-bottom-color:transparent}
.tix-note{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;margin-top:clamp(30px,5vw,56px)}
@media(max-width:860px){.tix{grid-template-columns:1fr}}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,30px)}
.steps li{border-top:6px solid var(--ink);padding-top:22px;--r0:-5deg}
.steps .num{display:grid;place-items:center;width:clamp(68px,9vw,96px);aspect-ratio:1;border-radius:50%;background:var(--tom);border:3px solid var(--ink);font-family:var(--disp);font-weight:900;font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:20px;letter-spacing:-.05em}
.steps li:nth-child(2) .num{background:var(--lime)}.steps li:nth-child(3) .num{background:var(--ink);color:var(--lime)}
.reveal.in .num{animation:spin 1s var(--snap) both}
.steps h3{font-size:clamp(1.3rem,2.8vw,1.8rem);margin-bottom:10px}
.steps p{margin:0;font-weight:600;max-width:30ch}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* chat */
.chat-sec{background:var(--lime)}
.chat-sec .k b{background:var(--ink);color:var(--lime)}
.chat-sec .sub{color:var(--ink)}
.chat-sec .sec-h h2 em{background:var(--ink);color:var(--lime)}
.bp{display:grid;grid-template-columns:minmax(0,1fr) 130px;background:var(--ink);color:var(--bone);border-radius:36px;overflow:hidden;border:3px solid var(--ink);box-shadow:10px 10px 0 var(--tom)}
.bp-main{padding:clamp(18px,3vw,32px);display:flex;flex-direction:column;min-width:0}
.bp-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.bp-head strong{font-family:var(--disp);font-weight:900;font-size:1.1rem;letter-spacing:-.04em}
.progress{font-family:var(--mono);font-size:.78rem;background:var(--lime);color:var(--ink);padding:3px 12px;border-radius:99px;font-weight:500}
.link{margin-left:auto;background:none;border:2px solid var(--mute-d);color:var(--bone);border-radius:99px;padding:6px 16px;font:600 .85rem var(--body);cursor:pointer;min-height:36px}
.link:hover{background:var(--bone);color:var(--ink)}
.log{height:clamp(260px,44vh,400px);overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 4px 10px 0;scrollbar-width:thin;scrollbar-color:var(--tom) transparent}
.msg{max-width:88%;padding:12px 18px;border-radius:24px;font-weight:600;font-size:1rem;line-height:1.4;overflow-wrap:anywhere;animation:pop .5s var(--snap) both}
@keyframes pop{from{transform:rotate(-4deg) scale(.8);opacity:0}to{transform:none;opacity:1}}
.msg.bot{background:var(--bone);color:var(--ink);border-bottom-left-radius:6px;align-self:flex-start}
.msg.user{background:var(--lime);color:var(--ink);border-bottom-right-radius:6px;align-self:flex-end}
.msg.typing{opacity:.7;letter-spacing:.3em}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;min-height:0}
.quick button{background:transparent;border:2px solid var(--lime);color:var(--lime);border-radius:99px;padding:8px 16px;font:700 .9rem var(--body);cursor:pointer;min-height:44px;transition:transform .3s var(--snap),background .2s,color .2s}
.quick button:hover{background:var(--lime);color:var(--ink);transform:rotate(-3deg)}
.composer{display:flex;gap:10px;margin-top:14px;align-items:flex-end}
.composer textarea{flex:1;min-width:0;resize:none;background:var(--bone);color:var(--ink);border:3px solid var(--bone);border-radius:24px;padding:14px 20px;font:600 1rem/1.4 var(--body);max-height:140px}
.composer textarea:focus{outline:none;border-color:var(--lime)}
.composer textarea::placeholder{color:#6d6a5f}
.send{flex:none;width:56px;height:56px;border-radius:50%;border:3px solid var(--lime);background:var(--lime);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .4s var(--snap)}
.send:hover{transform:rotate(90deg)}
.dial{background:var(--tom);color:var(--ink);display:grid;place-items:center;position:relative;border-left:3px solid var(--ink)}
.dial svg{width:120px;height:120px;transform:rotate(-90deg)}
.dtrack{fill:none;stroke:var(--ink);stroke-opacity:.25;stroke-width:12}
.dfill{fill:none;stroke:var(--ink);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .9s var(--snap)}
.dnum{position:absolute;display:grid;justify-items:center;line-height:1}
.dnum b{font-family:var(--disp);font-weight:900;font-size:2.2rem;letter-spacing:-.06em}
.dnum span{font-family:var(--mono);font-size:.7rem;font-weight:500;text-transform:uppercase;margin-top:4px}
.chat-fine{color:var(--ink);font-weight:500;margin-top:20px;max-width:70ch}
@media(max-width:700px){.bp{grid-template-columns:1fr;border-radius:28px;box-shadow:6px 6px 0 var(--tom)}.dial{border-left:0;border-top:3px solid var(--ink);padding:10px;grid-auto-flow:column;justify-content:center;order:-1;height:76px}.dial svg{width:56px;height:56px}.dnum{position:static;grid-auto-flow:column;gap:8px;align-items:baseline;margin-left:10px}.dnum b{font-size:1.6rem}.dial{display:flex;align-items:center;justify-content:flex-start;gap:0;padding:10px 20px}}

/* preview */
.result{margin-top:clamp(36px,6vw,64px);scroll-margin-top:90px}
.pv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:start}
.spec{background:var(--bone);border:3px solid var(--ink);border-radius:36px;padding:clamp(20px,3vw,32px);position:relative;box-shadow:10px 10px 0 var(--ink);--r0:-6deg;animation:specin 1s var(--snap) both}
@keyframes specin{from{transform:rotate(-12deg) scale(.9);opacity:0}to{transform:none;opacity:1}}
.spec .top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:500;margin-bottom:16px}
.spec .top span:last-child{background:var(--ink);color:var(--lime);border-radius:99px;padding:3px 12px}
.spec .route{font-family:var(--disp);font-weight:900;font-size:clamp(1.8rem,5vw,3rem);letter-spacing:-.06em;line-height:1;margin:6px 0 18px;overflow-wrap:anywhere}
.spec .route em{background:var(--lime);padding:0 .1em;border-radius:.14em}
.spec dl{margin:0;display:grid;gap:0}
.spec dl>div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;padding:9px 0;border-top:2px solid var(--ink)}
.spec dt{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;font-weight:500;color:var(--mute)}
.spec dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.spec .mods-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.spec .mods-row span{font-family:var(--mono);font-size:.75rem;font-weight:500;border:2px solid var(--ink);border-radius:99px;padding:3px 12px;background:var(--lime)}
.sticker{position:absolute;right:-12px;top:-18px;background:var(--tom);border:3px solid var(--ink);border-radius:99px;padding:6px 16px;font-family:var(--disp);font-weight:900;font-size:.85rem;letter-spacing:-.03em;transform:rotate(7deg);color:var(--ink)}
.sticker.ok{background:var(--lime)}
.pv-copy h3{font-size:clamp(1.8rem,4.6vw,3.2rem);letter-spacing:-.06em;margin:0 0 16px}
.pv-copy .sub{color:var(--ink);margin-top:0}
.pv-strip{display:flex;gap:6px;margin:22px 0 14px;flex-wrap:wrap}
.pv-strip span{font-family:var(--disp);font-weight:800;font-size:.78rem;border:2px solid var(--ink);border-radius:99px;padding:6px 14px}
.pv-strip .on{background:var(--ink);color:var(--lime)}
.pv-lockrow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.pv-lockrow span{font-family:var(--mono);font-size:.78rem;border-radius:99px;padding:4px 12px;background:rgba(13,13,12,.12);filter:blur(.4px)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn.dk{color:var(--ink)}
@media(max-width:860px){.pv{grid-template-columns:1fr}}

/* modal */
.modal-wrap{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:14px;opacity:0;transition:opacity .2s}
.modal-wrap.on{opacity:1}
.modal-wrap[hidden]{display:none}
.scrim{position:absolute;inset:0;background:rgba(13,13,12,.8)}
.modal{position:relative;width:min(560px,100%);max-height:calc(100dvh - 28px);overflow-y:auto;background:var(--bone);border:3px solid var(--ink);border-radius:36px;box-shadow:10px 10px 0 var(--lime);color:var(--ink);transform:rotate(-6deg) scale(.85);transition:transform .6s var(--snap)}
.modal-wrap.on .modal{transform:none}
.modal:focus{outline:none}
.m-x{position:absolute;right:14px;top:14px;width:48px;height:48px;border-radius:50%;border:3px solid var(--ink);background:var(--bone);font:900 1.6rem/1 var(--disp);cursor:pointer;z-index:2;display:grid;place-items:center;padding:0;transition:transform .4s var(--snap)}
.m-x:hover{transform:rotate(180deg);background:var(--tom)}
.m-top{padding:clamp(22px,4vw,34px) clamp(20px,4vw,34px) 20px}
.m-top h2{font-size:clamp(1.6rem,5.4vw,2.4rem);letter-spacing:-.06em;margin:4px 56px 12px 0;line-height:1}
.m-top .sub{font-size:1rem;margin:0 0 12px;color:var(--mute)}
.center-t{text-align:center}.center-t h2{margin-inline:auto!important}
.testbanner{display:inline-flex;gap:8px;align-items:center;font-family:var(--mono);font-size:.74rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em}
.testbanner span{background:var(--tom);border:2px solid var(--ink);border-radius:99px;padding:2px 12px;font-weight:500}
.perks{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.perks li{position:relative;padding-left:34px;font-weight:600;font-size:.98rem}
.perks li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;border:4px solid var(--ink);border-top-color:var(--tom);border-right-color:var(--lime)}
.m-stub{background:var(--ink);color:var(--bone);padding:clamp(20px,4vw,30px) clamp(20px,4vw,34px) clamp(22px,4vw,32px);border-radius:0 0 32px 32px;display:grid;gap:12px}
.price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.price b{font-family:var(--disp);font-weight:900;font-size:clamp(2.6rem,10vw,3.8rem);letter-spacing:-.07em;color:var(--lime);line-height:1}
.price span{font-family:var(--mono);font-size:.78rem;color:var(--mute-d);text-transform:uppercase;letter-spacing:.08em}
.promo{display:flex;gap:8px}
.promo input,.fld input{flex:1;min-width:0;background:var(--bone);color:var(--ink);border:3px solid var(--bone);border-radius:18px;padding:12px 16px;font:700 1rem var(--body);min-height:52px}
.promo input:focus,.fld input:focus{outline:none;border-color:var(--lime)}
.promo button{border:3px solid var(--lime);background:transparent;color:var(--lime);border-radius:99px;padding:0 22px;font:900 .9rem var(--disp);cursor:pointer;min-height:52px;letter-spacing:-.02em}
.promo button:hover{background:var(--lime);color:var(--ink)}
.msgline{min-height:1.3em;font-weight:700;font-size:.9rem;color:var(--mute-d)}
.msgline.ok{color:var(--lime)}.msgline.err{color:#FF8A6B}
.m-btn{width:100%;background:var(--lime);border-color:var(--lime);color:var(--ink);font-size:1.05rem;padding:16px 24px;min-height:60px}
.m-btn:hover{background:var(--tom);border-color:var(--tom)}
.m-sub{background:none;border:0;color:var(--bone);font:700 .95rem var(--body);cursor:pointer;text-decoration:underline;text-underline-offset:4px;min-height:44px}
.order{margin-top:14px;display:grid;gap:0;font-weight:600}
.order>div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:2px solid var(--ink)}
.order .tot{font-family:var(--disp);font-weight:900;font-size:1.15rem;letter-spacing:-.04em}
.order small{font-weight:500;color:var(--mute)}
.hint{font-size:.88rem;color:var(--mute);margin:14px 0 0}
.hint code,.hint b{color:var(--ink)}
code{font-family:var(--mono);background:var(--lime);padding:1px 6px;border-radius:6px;font-weight:500;color:var(--ink)}
.fld{display:grid;gap:6px}
.fld label{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mute-d);font-weight:500}
.fld.two{grid-template-columns:1fr 1fr;gap:12px}
.fld.two>div{display:grid;gap:6px}
#payForm{display:grid;gap:12px}
.m-body{padding:clamp(28px,5vw,44px) clamp(20px,4vw,34px)}
.spinner{width:64px;height:64px;border-radius:50%;border:9px solid var(--ink);border-top-color:var(--tom);border-right-color:var(--lime);margin:0 auto 18px;animation:spin .8s linear infinite}
.okmark{display:inline-block;font-family:var(--disp);font-weight:900;background:var(--lime);border:3px solid var(--ink);border-radius:99px;padding:6px 22px;transform:rotate(-4deg);margin:14px 0 12px;animation:specin .8s var(--snap) both}
.receipt{display:grid;gap:0;font-weight:600;margin-bottom:6px}
.receipt>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:2px solid #35342f;font-size:.92rem}
.receipt code{background:var(--bone);color:var(--ink)}
a.m-btn{text-decoration:none}

/* footer */
.foot{background:var(--ink);color:var(--bone);padding:clamp(40px,6vw,72px) 0}
.foot-in{display:grid;gap:18px}
.foot img{height:36px;width:auto}
.foot p{margin:0;max-width:70ch;color:var(--mute-d);font-size:.9rem}

/* motion off */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .ticker-in{flex-wrap:wrap;width:auto;padding-inline:var(--pad);row-gap:4px}
  .bigdisc{transform:none}
}
.no-js .reveal{opacity:1;transform:none}

/* pricing: customization + business */
.cust{margin-top:14px;display:grid;gap:10px}.cust fieldset{border:2px solid var(--ink);border-radius:14px;padding:8px 12px;margin:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.cust legend{font-family:var(--mono);font-size:.75rem;padding:0 6px}.cust .opt{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.9rem;min-height:32px}
.cust .opt[hidden]{display:none}
.biz{border:3px solid var(--ink);border-radius:24px;padding:clamp(18px,3vw,32px);display:grid;gap:18px;max-width:760px;background:var(--bone,#F3EFE4)}
.biz-price b{font-size:clamp(2.2rem,6vw,3.6rem);letter-spacing:-.05em}.biz-price span{font-weight:700;margin-left:6px}.biz-price small{display:block;font-family:var(--mono);font-size:.75rem;margin-top:6px}
.talk{display:grid;gap:10px}.talk[hidden]{display:none}.talk input,.talk textarea{width:100%;font:inherit;padding:10px 12px;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink)}
.talk label{color:var(--ink)}

/* unlock modal: brand radios + checkboxes (custom, bold, AA, 44px targets) */
.cust .opt{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 14px 6px 10px;border:2px solid var(--ink);border-radius:99px;background:var(--bone);color:var(--ink);font-weight:700;font-size:.92rem;cursor:pointer;transition:background .2s,transform .3s var(--snap)}
.cust .opt:hover{transform:rotate(-1.5deg)}
.cust .opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.cust .opt::before{content:"";flex:none;width:22px;height:22px;border:3px solid var(--ink);background:#fff;box-sizing:border-box;transition:background .15s}
.cust .opt:has(input[type=radio])::before{border-radius:50%}
.cust .opt:has(input[type=checkbox])::before{border-radius:6px}
.cust .opt:has(input:checked){background:var(--lime)}
.cust .opt:has(input:checked)::before{background:var(--ink)}
.cust .opt:has(input[type=radio]:checked)::before{box-shadow:inset 0 0 0 3px var(--lime)}
.cust .opt:has(input[type=checkbox]:checked)::before{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23C8F31D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.cust .opt:has(input:focus-visible){outline:3px solid var(--tom);outline-offset:3px}
.cust .opt.colorrow input{position:static;opacity:1;width:44px;height:32px;padding:0;border:2px solid var(--ink);border-radius:8px}
.cust .opt.colorrow::before{display:none}.cust .opt.colorrow:has(input){background:var(--bone)}
.cust fieldset{gap:8px}
@media(max-width:480px){.cust .opt{flex:1 1 100%}}
@media(prefers-reduced-motion:reduce){.cust .opt,.cust .opt:hover{transition:none;transform:none}}

/* sub-pages (preview, SaaS) + honesty note */
#preview{padding-top:clamp(110px,14vw,150px)}
.honest-note{margin:0 0 14px;padding:12px 14px;border:2px solid currentColor;border-radius:12px;background:rgba(200,243,29,.18);font-weight:600;line-height:1.4}
.pv-empty{max-width:560px}
.saas-tab{font-weight:700}

/* live demo frame */
.demo-stage{margin:0 0 clamp(36px,5vw,56px)}
.demo-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.seg{display:inline-flex;border:3px solid var(--bone);border-radius:99px;overflow:hidden}
.seg-b{font-family:var(--disp);font-weight:800;font-size:.9rem;letter-spacing:-.02em;padding:11px 22px;background:transparent;color:var(--bone);border:0;cursor:pointer;min-height:44px}
.seg-b[aria-pressed=true]{background:var(--lime);color:var(--ink)}
.seg-b:disabled{opacity:.45;cursor:not-allowed}
.seg-b:focus-visible,#demoNew:focus-visible{outline:3px solid var(--tom);outline-offset:3px}
.demo-frame{margin:0 auto;background:var(--ink);border:3px solid var(--bone);transition:max-width .25s ease}
.demo-frame iframe{display:block;width:100%;border:0;background:#fff}
.demo-frame .chrome{display:none}
.demo-frame.is-mobile{max-width:390px;border-radius:44px;padding:14px;box-shadow:0 0 0 6px var(--ink),10px 10px 0 var(--lime)}
.demo-frame.is-mobile iframe{height:min(780px,78vh);min-height:560px;border-radius:30px}
.demo-frame.is-desktop{max-width:100%;border-radius:14px;overflow:hidden;box-shadow:10px 10px 0 var(--lime)}
.demo-frame.is-desktop .chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--bone2);color:var(--ink);border-bottom:3px solid var(--ink);font:600 .8rem var(--mono,monospace)}
.demo-frame.is-desktop .chrome i{width:12px;height:12px;border-radius:50%;background:var(--tom);border:2px solid var(--ink)}
.demo-frame.is-desktop .chrome i:nth-child(2){background:var(--lime)}
.demo-frame.is-desktop .chrome i:nth-child(3){background:var(--bone)}
.demo-frame.is-desktop .chrome span{margin-left:10px;flex:1;background:var(--bone);border:2px solid var(--ink);border-radius:99px;padding:4px 14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.demo-frame.is-desktop iframe{height:min(760px,80vh);min-height:520px}
.demo-fine{text-align:center;margin:16px 0 0}
@media(max-width:600px){.demo-bar{justify-content:center}.demo-frame.is-mobile{max-width:100%;border-radius:34px;padding:10px}}

/* intake answer chips */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0}
.chips-l{font:600 .72rem var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--mute-d);width:100%}
.chip{background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:7px 14px;font:600 .88rem var(--body);cursor:pointer;min-height:40px;text-align:left}
.chip b{font-family:var(--disp);font-weight:800;font-size:.72rem;letter-spacing:-.01em;text-transform:uppercase;margin-right:4px}
.chip:hover,.chip:focus-visible{background:var(--bone);outline:3px solid var(--tom);outline-offset:2px}

/* single-box intake */
.bp.bp1{display:block}
#tripText{width:100%;resize:vertical;min-height:120px;background:var(--bone);color:var(--ink);border:3px solid var(--bone);border-radius:24px;padding:16px 20px;font:600 1.05rem/1.45 var(--body)}
#tripText:focus{outline:none;border-color:var(--lime)}
#tripText::placeholder{color:#6d6a5f}
.bp .hint{color:var(--mute-d);margin:10px 2px 0}
.chip.warn{background:var(--tom);color:var(--ink)}
.chip.editing{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;background:var(--bone)}
.chip.editing input{min-width:0;width:min(220px,48vw);border:0;background:transparent;font:600 .9rem var(--body);color:var(--ink);padding:6px 4px}
.chip.editing input:focus{outline:2px solid var(--ink);border-radius:8px}
.chip-ok,.chip-x{border:0;background:var(--ink);color:var(--lime);border-radius:99px;min-width:34px;min-height:34px;font-weight:800;cursor:pointer}
.destnote{margin:10px 2px 0;font-weight:600;font-size:.92rem;color:var(--lime)}
.more{margin-top:14px;display:grid;gap:12px}
.more-h{font:600 .72rem var(--mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--mute-d);margin:0}
.mrow label{display:block;font-weight:700;font-size:.92rem;margin:0 0 4px}
.mrow label i{font-style:normal;font:600 .66rem var(--mono,monospace);background:var(--tom);color:var(--ink);border-radius:99px;padding:2px 8px;margin-left:6px;text-transform:uppercase}
.mrow-in{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mrow input{flex:1 1 220px;min-width:0;min-height:46px;background:var(--bone);color:var(--ink);border:3px solid var(--bone);border-radius:16px;padding:8px 16px;font:600 1rem var(--body)}
.mrow input:focus{outline:none;border-color:var(--lime)}
.mrow input::placeholder{color:#6d6a5f}
.mq{display:flex;flex-wrap:wrap;gap:6px}
.mq button{background:transparent;border:2px solid var(--lime);color:var(--lime);border-radius:99px;padding:6px 14px;font:700 .85rem var(--body);cursor:pointer;min-height:40px}
.mq button:hover{background:var(--lime);color:var(--ink)}
.bp-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
#buildMsg{margin:10px 2px 0}
.chips[hidden],.more[hidden],.destnote[hidden]{display:none!important}
.chips .chip{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.chip.editing{max-width:100%}
html,body{overflow-x:clip}
/* spin wheel modal */
.spin-row{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:14px 18px;align-items:center}
.spin-row .fine{max-width:52ch;margin:0}
.wheel-modal{width:min(480px,100%)}
.wchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.wchip{border:2px solid var(--ink);background:var(--bone);border-radius:999px;padding:6px 12px;font:700 .8rem var(--body);cursor:pointer;min-height:36px;max-width:100%;overflow-wrap:anywhere;text-align:left}
.wchip.set{background:var(--lime)}
.wchip.cur{box-shadow:3px 3px 0 var(--ink)}
.wheel-wrap{position:relative;display:grid;place-items:center;margin:8px 0}
.wheel-wrap canvas{max-width:100%;border-radius:50%}
.wptr{position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:20px solid var(--tom);z-index:2;filter:drop-shadow(0 2px 0 var(--ink))}
.wres{text-align:center;margin:8px 0;min-height:1.5em}
.wctl{display:grid;gap:10px;margin-top:6px}
.wsel select,.wother+input{width:100%;min-height:48px;border:2px solid var(--ink);border-radius:14px;padding:0 12px;font:600 1rem var(--body);background:#fff}
.wother{display:block;margin:12px 0 4px;font-weight:700;font-size:.9rem}
#wOther{width:100%;min-height:48px;border:2px solid var(--ink);border-radius:14px;padding:0 12px;font:600 1rem var(--body)}
.m-btn:disabled{opacity:.45;cursor:not-allowed}