/* Zekon storefront. Same identity as the panel (dark, one gold accent,
   chamfered emphasis), customer-facing layout. Legacy classes used by
   /shop, /app, receipts and help pages are kept and rethemed below. */
/* Faces come from Google Fonts (base.html): Instrument Sans for display, Inter for body, IBM Plex Mono for code. */
/* Zekon design system (Pencil document, 14 Oct 2026): semantic tokens over the charcoal / tan / gray primitives. Actions are gray-90, the orange accent is decorative only (it fails body contrast), headings sit in the display face at a single medium weight with tight tracking. */
:root{--bg:#ffffff;--surface:#ffffff;--surface-2:#f5f2ee;--s3:#e8e3de;--line:#eaeae9;--line2:#abaaa8;--ink:#2c2a25;--ink-2:#565551;--mute:#9a958d;--dim:#9a958d;--tert:#9a958d;--gold:#0e0d0c;--gold2:#2c2a25;--gold-ink:#ffffff;--accent:#ff6e06;--tan:#faf8f5;--tan2:#f5f2ee;--ok:#2d6a4f;--danger:#e62837;--danger-bg:#f5b2b5;--info:#274249;--teal:#769399;--teal-10:#dce6e9;--robin-10:#e0ebf0;--pill:48px;
--sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--disp:"Instrument Sans",Inter,system-ui,sans-serif;--mono:"IBM Plex Mono",Menlo,Consolas,monospace;--wm:"Instrument Sans",Inter,sans-serif;--r:12px;--r-s:8px;--cut:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
*{box-sizing:border-box}html{color-scheme:light;scroll-behavior:smooth}
/* dark rooms inside the light store: the hero band, every terminal, and the floating key card keep the dark tokens */
.hx,.term,.hx-key,.dark{--bg:#0e0d0c;--surface:#1a1917;--surface-2:#242320;--s3:#2c2a25;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);--ink:#ffffff;--ink-2:#c5c1bb;--mute:#9a958d;--dim:#9a958d;--tert:#9a958d;--gold:#ffffff;--gold2:#eaeae9;--gold-ink:#0e0d0c;--ok:#8fd3a8;--danger:#f5b2b5;--info:#c0d7e2;color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:15.5px/1.55 var(--sans);-webkit-font-smoothing:auto}
a{color:inherit;text-decoration:none}a:hover{color:var(--gold)}button,input,select{font:inherit;color:inherit}
.wrap{max-width:1244px;margin:0 auto;padding:0 24px}
.num,code,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13.5px}code{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);padding:1px 6px;word-break:break-all}
pre{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;overflow:auto;margin:0;line-height:1.55}
.dim{color:var(--mute)}.small{font-size:13px}.gold{color:var(--gold)}.hide{visibility:hidden}
/* ---- header / footer ---- */
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{height:70px;display:flex;align-items:center;gap:32px}
.wordmark{font-family:var(--wm);font-weight:800;font-size:26px;letter-spacing:-.035em;color:var(--gold);line-height:1;white-space:nowrap}.top .brand:hover{color:var(--gold);opacity:.85}
.top nav{display:flex;gap:26px;font-size:16.5px;font-weight:500;color:var(--ink-2)}.top nav a{position:relative;padding:4px 0}.top nav a:hover{color:var(--ink)}.top nav a.on{color:var(--ink)}.top nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-24px;height:2px;background:var(--gold)}
.top .sp{flex:1}.top .who{font-size:13px;color:var(--mute)}
main{padding:0 0 64px}
.site-foot{border-top:1px solid var(--line);padding:40px 0 34px;margin-top:48px}.site-foot .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:22px;font-size:13.5px}.site-foot b{display:block;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}.site-foot a{display:block;color:var(--ink-2);margin:6px 0}.site-foot a:hover{color:var(--ink)}.site-foot p{color:var(--mute);margin:8px 0 0;max-width:340px}.site-foot .base{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:12px var(--mono);color:var(--mute)}
/* ---- type ---- */
h1{font:800 clamp(40px,5.2vw,62px)/.98 var(--disp);letter-spacing:.005em;text-transform:uppercase;margin:12px 0 16px}h1 span{color:var(--gold)}
h2,.h2{font:700 clamp(30px,4vw,46px)/1 var(--disp);text-transform:uppercase;margin:8px 0 8px}
.lead{font-size:17px;color:var(--ink-2);max-width:600px;margin:0 0 18px}
.k{display:inline-flex;align-items:center;gap:8px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}.k::before{content:"";width:8px;height:8px;background:var(--gold);clip-path:polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px);flex:none}
/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border:1px solid var(--line2);color:var(--ink);font:600 13px var(--sans);border-radius:var(--r);cursor:pointer;background:var(--surface-2);transition:background .15s,color .15s,border-color .15s;line-height:1}
.btn:hover{border-color:var(--gold);color:var(--ink)}.btn.p{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}.btn.p:hover{background:var(--gold2);color:var(--gold-ink)}.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}.btn.ghost:hover{color:var(--ink);border-color:transparent}
.btn.s{padding:7px 12px;font-size:12px}.btn.lg{padding:14px 22px;font-size:15px}.btn.w{width:100%}.btn.d{color:var(--danger);border-color:#4a2626}.btn[disabled]{opacity:.45;cursor:not-allowed}.btn:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* ---- cards / chips / status ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}.card>header{display:flex;align-items:baseline;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}.card>header .q{color:var(--mute);font-size:12.5px}.card .body{padding:16px}
.chip{display:inline-flex;align-items:center;gap:6px;font:12px var(--mono);padding:5px 10px;border:1px solid var(--line2);background:var(--surface-2);border-radius:4px;color:var(--ink-2);cursor:pointer}.chip b{color:var(--gold);font-weight:500}.chip.on{border-color:var(--gold);color:var(--gold)}
.st{display:inline-flex;align-items:center;gap:6px;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border:1px solid var(--line2);color:var(--ink-2);border-radius:3px}.st::before{content:"";width:6px;height:6px;background:currentColor}
.st.paid,.st.ok{color:var(--ok);border-color:color-mix(in oklab,var(--ok) 50%,transparent)}.st.pending{color:var(--gold);border-color:color-mix(in oklab,var(--gold) 50%,transparent)}.st.failed,.st.expired,.st.bad{color:var(--danger);border-color:color-mix(in oklab,var(--danger) 50%,transparent)}
.meter{height:8px;background:var(--s3);border:1px solid var(--line2);overflow:hidden;margin:6px 0 4px}.meter i{display:block;height:100%;background:var(--gold)}
.empty{padding:28px 16px;text-align:center;color:var(--mute);font-size:13.5px;border:1px dashed var(--line);border-radius:var(--r)}.empty b{display:block;color:var(--ink-2);font-weight:500;margin-bottom:4px}
/* ---- landing ---- */
.l-page{padding-top:28px}
.l-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:64px 0 40px}
.l-cta{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.ticks{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin:18px 0 0;padding:0;list-style:none}.ticks span,.ticks li{display:inline-flex;align-items:center;gap:8px}.ticks span::before,.ticks li::before{content:"";width:8px;height:8px;background:var(--gold);clip-path:polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px)}
.term{background:#0d0f13;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 20px 32px -20px rgba(0,0,0,.8)}
.term .tb{position:relative;display:flex;gap:8px;align-items:center;height:38px;padding:0 14px;background:linear-gradient(#2b2d33,#232529);border-bottom:1px solid rgba(0,0,0,.6);font:12px var(--mono);color:#9a9ca3}
.term .tb i{width:12px;height:12px;border-radius:50%;display:inline-block;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25)}.term .tb i:nth-child(2){background:#febc2e}.term .tb i:nth-child(3){background:#28c840}.term .tb i:first-child{background:#ff5f57}
.term .tb span{position:absolute;left:50%;transform:translateX(-50%);margin:0;letter-spacing:.02em;color:#b5b7bd;pointer-events:none;white-space:nowrap}
.term .tb .copy{margin-left:auto;padding:3px 9px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:rgba(255,255,255,.04);color:#c9cbd1;cursor:pointer;font:11px var(--mono);position:relative;z-index:1}.term .tb .copy:hover{border-color:var(--gold);color:var(--gold)}
.term pre{margin:0;padding:18px 20px;font:13px/1.7 var(--mono);color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;background:transparent;border:0;border-radius:0}.term .c2{color:var(--gold)}.term .c3{color:var(--ok)}.term .c4{color:var(--mute)}
.term .foot{border-top:1px solid var(--line);padding:10px 20px;font:12px var(--mono);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--mute)}.term .foot b{color:var(--gold);font-weight:500}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);margin:20px 0 0}.stats div{padding:18px 20px;border-right:1px solid var(--line);position:relative}.stats div::before{content:"";position:absolute;left:0;top:0;width:28px;height:2px;background:var(--gold)}.stats div:last-child{border-right:0}.stats b{display:block;font:700 34px/1 var(--disp)}.stats span{font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.l-sec{padding:72px 0;border-top:1px solid var(--line);content-visibility:auto;contain-intrinsic-size:auto 640px}.l-sec .head{max-width:640px;margin-bottom:28px}.l-sec .head p{color:var(--ink-2);margin:0}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.feat .card{display:flex;flex-direction:column;gap:8px;min-height:230px;padding:20px;transition:border-color .15s}.feat .card:hover{border-color:var(--line2)}.feat .idx{font:500 11px var(--mono);color:var(--mute);letter-spacing:.1em}.feat h3{font:700 22px/1 var(--disp);text-transform:uppercase;margin:0}.feat p{margin:0;color:var(--ink-2);font-size:14px}.feat .demo{margin-top:auto;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:10px 12px;font:12px/1.6 var(--mono);color:var(--ink-2)}.feat .demo .del{color:var(--danger)}.feat .demo .add{color:var(--ok)}.feat .wide{grid-column:span 2}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.step{padding:22px 20px 20px}.step .n{font:600 13px var(--mono);color:var(--gold-ink);background:var(--gold);width:28px;height:28px;display:grid;place-items:center;margin-bottom:12px;clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}.step h3{font:700 22px/1 var(--disp);text-transform:uppercase;margin:0 0 6px}.step .t{font:11px var(--mono);color:var(--mute);margin-bottom:10px}.step p{margin:0 0 12px;color:var(--ink-2);font-size:14px}.step .ui{background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:10px 12px;font:12px var(--mono);color:var(--ink-2)}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;align-items:center}.filters input{flex:1;min-width:200px;max-width:340px;padding:9px 12px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font:13px var(--mono);border-radius:var(--r)}
.models{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.card.m{padding:14px 16px 12px;min-height:118px;display:flex;flex-direction:column;gap:8px;color:inherit;border-radius:0;position:relative;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:border-color .15s,transform .15s}
.card.m::before{content:"";position:absolute;top:0;left:0;width:10px;height:10px;border-top:1px solid var(--line2);border-left:1px solid var(--line2);pointer-events:none;z-index:2}.card.m::after{content:"";position:absolute;bottom:0;right:0;width:10px;height:10px;border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);pointer-events:none;z-index:2}
.card.m:hover{border-color:var(--gold);transform:translateY(-2px);color:inherit}
.card.m .fam{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.card.m .fam::before{content:"//";color:var(--gold);margin-right:.5em}
.card.m code{font:13.5px var(--mono);color:var(--ink);background:transparent;border:0;padding:0;word-break:break-all}
.card.m .x{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end}
.card.m .x b{font:600 22px/1 var(--disp);letter-spacing:.01em;color:var(--ink)}.card.m .x .st{font-size:10px}
.tools{display:flex;gap:8px;flex-wrap:wrap}.tools span{padding:10px 16px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);font-weight:500;font-size:14px}
.cfg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.pk{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}.pk .card{display:flex;flex-direction:column;gap:4px;min-height:210px;padding:20px;color:inherit;transition:border-color .15s}.pk .card:hover{border-color:var(--line2);color:inherit}.pk .card.hot{border-color:var(--gold);background:linear-gradient(160deg,rgba(44,42,37,.14),var(--surface) 60%)}.pk .card.hot:hover{border-color:var(--gold)}.pk .card b{font:700 40px/1 var(--disp);margin-top:6px}.pk span.price{font:600 16px var(--mono);color:var(--gold)}.pk .mm{font:11.5px var(--mono);color:var(--mute)}.pk .btn{margin-top:auto}.pk .k.hide{visibility:hidden}
.note{font-size:13px;color:var(--mute);margin-top:12px}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.calc .card{padding:20px}
.row2{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px}.row2:last-child{border:0}
.tblwrap{overflow-x:auto;max-width:100%;min-width:0}.l-hero>*,.cfg>*,.calc>*,.faq2>*{min-width:0}.cmp{width:100%;border-collapse:collapse;font-size:14px}.cmp th,.cmp td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);background:transparent;height:auto}.cmp th{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}.cmp td:nth-child(2){color:var(--gold);font-weight:500}.cmp td:first-child{color:var(--mute)}.cmp tr:nth-child(even) td{background:rgba(255,255,255,.015)}
.faq2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.faq2 details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}.faq2 summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}.faq2 summary::-webkit-details-marker{display:none}.faq2 summary::after{content:"+";color:var(--gold)}.faq2 details[open] summary::after{content:"−"}.faq2 p{margin:10px 0 0;color:var(--ink-2);font-size:14px}
.cta2{background:linear-gradient(135deg,rgba(44,42,37,.18),rgba(44,42,37,.04));border:1px solid rgba(44,42,37,.55);clip-path:var(--cut);padding:44px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.cta2 h2{margin:0}
/* ---- legacy classes (/shop, /app, receipt, status, help) ---- */
.sec{margin-bottom:22px}.sec>h2{margin-bottom:10px;color:var(--ink-2);font:500 13px var(--sans);letter-spacing:.02em;text-transform:none}
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.pack{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;transition:border-color .15s,background .15s;text-align:left;display:flex;flex-direction:column;gap:4px;color:inherit}
.pack:hover{border-color:var(--line2);color:inherit}.pack.sel{border-color:var(--gold);background:linear-gradient(160deg,rgba(44,42,37,.12),var(--surface) 60%)}.pack .t{font:600 24px/1.1 var(--disp)}.pack .t small{font:400 12px var(--sans);color:var(--mute);margin-left:3px}
.pack .p{font-size:15px;font-weight:600;margin-top:4px}.pack .m{font-size:12px;color:var(--mute)}.pack.out{opacity:.5;cursor:not-allowed}.pack .lbl{font-size:12px;color:var(--gold)}.pack .price{font-size:20px;font-weight:600;color:var(--gold)}
.layout{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}@media(max-width:820px){.layout{grid-template-columns:1fr}.summary{position:static!important}}
.summary{position:sticky;top:78px}.summary .line{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}.summary .line:last-of-type{border-bottom:0}.summary .line b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}
.summary .total{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0 4px;font-size:15px}.summary .total b{font:600 26px var(--disp);color:var(--gold)}
.f{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}.f label{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.f .hint{font-size:12px;color:var(--mute)}.f.ok .hint{color:var(--ok)}.f.err .hint{color:var(--danger)}
.f input,.f select{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);height:40px;padding:0 12px;color:var(--ink);width:100%}.f input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.flash{padding:10px 14px;border-radius:var(--r-s);margin-bottom:16px;font-size:14px;border:1px solid;border-left-width:3px}.flash.ok{background:rgba(67,211,138,.08);border-color:rgba(67,211,138,.4);color:#bfeed5}.flash.err{background:rgba(255,106,92,.08);border-color:rgba(255,106,92,.4);color:#ffc1b9}
table{width:100%;border-collapse:collapse}th{text-align:left;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)}td{padding:0 12px;height:38px;border-bottom:1px solid var(--line);font-size:14px}tr:last-child td{border-bottom:0}td.num,th.r{text-align:right}td.id{font-family:var(--mono);font-size:12.5px}
.steps{display:flex;gap:0;margin:14px 0 18px}.steps div{flex:1;padding:8px 0;border-top:2px solid var(--line);font-size:12.5px;color:var(--mute)}.steps div.on{border-top-color:var(--gold);color:var(--ink)}.steps div.done{border-top-color:var(--ok);color:var(--ink-2)}
.qr{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}.qr img{width:220px;height:220px;background:#fff;padding:8px;border-radius:var(--r)}.qr .amt{font:600 30px var(--disp);color:var(--gold)}
.keybox{display:flex;gap:8px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px}.keybox code{background:none;border:0;padding:0;flex:1;font-size:13px}
.bar{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin:10px 0 6px}.bar i{display:block;height:100%;background:var(--gold)}.bar.low i{background:var(--danger)}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:560px){.kpi{grid-template-columns:1fr}}.kpi div small{display:block;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.kpi div b{font:600 26px var(--disp)}
.auth{max-width:420px;margin:40px auto}.tabs{display:flex;gap:4px;margin-bottom:14px}.tabs button{flex:1;height:36px;border:1px solid var(--line);background:transparent;border-radius:var(--r-s);color:var(--ink-2);cursor:pointer}.tabs button.on{border-color:var(--gold);color:var(--gold)}
.hidden{display:none!important}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.right{margin-left:auto}
.hero{padding:48px 0 24px;max-width:720px}.kicker{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.three h3{margin:0 0 6px;font:700 20px/1 var(--disp);text-transform:uppercase}
.faq details{border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;margin:0 0 8px;background:var(--surface)}.faq summary{cursor:pointer;font-weight:600}.faq p{margin:8px 0 0;color:var(--ink-2)}
.prose{max-width:720px;line-height:1.65}.prose h2{font-size:22px;margin:22px 0 6px}.prose li{margin:0 0 8px}
.tbl{border-collapse:collapse;width:100%;max-width:720px}.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;height:auto}
.auth-alt{margin-top:14px;text-align:center}.auth-alt .btn{margin:4px 2px}.auth-alt .dim{display:block;margin:6px 0}
/* help/app pages get the same gutters as the landing */
main>h1,main>.lead,main>.hero,main>.sec,main>.prose,main>.faq,main>.card,main>.layout,main>.auth,main>.kpi,main>.row,main>p,main>.tbl,main>.flash,main>.grid2,main>div:not(.wrap):not(.l-sec){max-width:1140px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
main>h1{padding-top:40px}main>.hero{padding-top:48px}main>.auth{margin-top:40px}
/* ---- responsive ---- */
@media(max-width:900px){.two{grid-template-columns:1fr;gap:20px}.two .lede{position:static}.flow{grid-template-columns:1fr;gap:18px}.head.row{flex-direction:column;align-items:flex-start}.l-hero{grid-template-columns:1fr;padding:40px 0 24px}.feat,.steps3{grid-template-columns:1fr}.feat .wide{grid-column:auto}.models{grid-template-columns:1fr 1fr}.pk{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.stats div:nth-child(2){border-right:0}.faq2,.cfg,.calc{grid-template-columns:1fr}.site-foot .cols{grid-template-columns:1fr 1fr}.top nav{display:none}.top nav a.on::after{display:none}.l-sec{padding:48px 0}}
@media(max-width:520px){.models,.pk{grid-template-columns:1fr}.wrap,main>h1,main>.lead,main>.hero,main>.sec,main>.prose,main>.faq,main>.card,main>.layout,main>.auth,main>.kpi,main>.row,main>p,main>.tbl,main>.flash,main>.grid2{padding-left:16px;padding-right:16px}.cta2{padding:28px}}
/* secondary pages */
.dsec{margin:0 0 28px;max-width:820px}.dsec>.k{margin-bottom:8px}.dsec p{margin:6px 0 12px;color:var(--ink-2);font-size:15px;line-height:1.6}.dsec .term{margin:0 0 10px}.dsec .row2{max-width:520px}
.faq2.one{grid-template-columns:1fr;max-width:820px}
.news{margin:0 0 24px;max-width:820px}.news .note{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:14px 16px;margin:8px 0 0}.news .note b{display:block;font-weight:600;margin-bottom:4px}.news .note p{margin:0 0 6px;color:var(--ink-2);font-size:14px}
.l-page .prose{max-width:720px;color:var(--ink-2);font-size:15px}.l-page .prose h2{font:700 22px/1 var(--disp);text-transform:uppercase;color:var(--ink);margin:26px 0 8px}.l-page .prose p,.l-page .prose li{margin:0 0 10px}.l-page .prose ul{padding-left:18px}
/* hero facts: one quiet line, not a card strip */
.spec{display:flex;flex-wrap:wrap;gap:6px 28px;margin:28px 0 0;padding:16px 0 0;border-top:1px solid var(--line);font-size:14px;color:var(--mute);line-height:1.6}
.spec b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
/* ledger + flow (feature section without cards) */
.two{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}.two .lede{position:sticky;top:92px}.two .lede h2{margin-top:0}.two .lede p{color:var(--ink-2);margin:0;max-width:420px}
.ledger{list-style:none;margin:0;padding:0}.ledger li{padding:22px 0;border-top:1px solid var(--line)}.ledger li:first-child{border-top:0;padding-top:4px}.ledger h3{font:700 22px/1 var(--disp);text-transform:uppercase;margin:0 0 8px}.ledger p{margin:0;color:var(--ink-2);max-width:560px}
.ledger .demo{margin-top:12px;max-width:560px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:10px 12px;font:12.5px/1.6 var(--mono);color:var(--ink-2)}.ledger .demo .del{color:var(--danger)}.ledger .demo .add{color:var(--ok)}
.flow{list-style:none;margin:56px auto 0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:f;font-size:14px;color:var(--ink-2)}.flow li{position:relative;padding-left:26px}.flow li::before{counter-increment:f;content:counter(f);position:absolute;left:0;top:2px;font:600 12px var(--mono);color:var(--gold)}.flow b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:none}.head.row>div{max-width:640px}.head.row .filters{margin:0 0 4px}
h2.h-s{font-size:clamp(26px,3vw,36px)}
/* provider strip: glyph field behind a scrolling vendor list */
.prov{position:relative;overflow:hidden;padding:34px 0 30px;border-top:1px solid var(--line);background:var(--tan2)}
.prov .plabel{position:relative;margin:0 0 18px;text-align:center;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.marquee{position:relative;overflow:hidden}.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}.marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}.marquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.marquee .track{display:flex;width:max-content;align-items:center;animation:marquee 32s linear infinite;will-change:transform;backface-visibility:hidden}.marquee .grp{display:flex;align-items:center;flex:none}
.marquee .v{display:inline-flex;align-items:center;gap:10px;padding:8px 34px;font:500 15px var(--sans);color:var(--ink-2);white-space:nowrap}
.marquee .v img{width:20px;height:20px;filter:invert(.82);opacity:.9}.marquee .v i{width:20px;height:20px;display:grid;place-items:center;font:700 11px var(--mono);color:var(--gold);border:1px solid var(--line2);clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.marquee .grp[aria-hidden]{display:none}}
/* ---- motion layer ---- */
html.js .l-hero>div:first-child>*,html.js .l-hero .term{opacity:0}
main{overflow-x:clip}
.top{transition:background .25s,border-color .25s,box-shadow .25s}.top.scrolled{border-bottom-color:var(--line2)}
.rv{opacity:0}
.btn{transition:transform .12s,background .15s,border-color .15s,color .15s}.btn:active{transform:scale(.97)}
.l-hero{position:relative;--hx:62%;--hy:38%}.l-hero::before{content:"";position:absolute;inset:-40px calc(50% - 50vw) 0;z-index:-1;pointer-events:none;background:radial-gradient(560px 360px at var(--hx) var(--hy),rgba(44,42,37,.14),transparent 65%),repeating-linear-gradient(-45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 14px)}
h1 em{font-style:normal}
.term pre .ln{display:inline}.term .cursor{display:inline-block;width:8px;height:15px;background:var(--gold);vertical-align:-2px;margin-left:2px;opacity:0}
.spot{position:relative;overflow:hidden;--x:50%;--y:50%}.spot::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px 200px at var(--x) var(--y),rgba(44,42,37,.13),transparent 70%)}.spot:hover::after{opacity:1}
.spot>*{position:relative;z-index:1}
.pk .card{transition:border-color .2s,transform .2s,box-shadow .2s}.pk .card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:0 18px 40px -28px rgba(44,42,37,.45)}
.chip{transition:border-color .15s,color .15s,transform .12s}.chip:hover{border-color:var(--gold);color:var(--gold)}.chip:active{transform:scale(.96)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1}.spot::after{display:none}}
/* ---- wide desktop: wider measure only, type sizes unchanged ---- */
@media(min-width:1200px){
.wrap,main>h1,main>.lead,main>.hero,main>.sec,main>.prose,main>.faq,main>.card,main>.layout,main>.auth,main>.kpi,main>.row,main>p,main>.tbl,main>.flash,main>.grid2,main>div:not(.wrap):not(.l-sec){max-width:1280px;padding-left:32px;padding-right:32px}
.top .wrap{gap:32px}
.l-hero{gap:44px;padding:76px 0 48px}
.l-sec{padding:84px 0}
.feat,.steps3,.cfg,.pk,.models,.faq2{gap:14px}
.feat .card{padding:24px}.step{padding:24px 22px 22px}.pk .card{padding:22px}
.cta2{padding:48px}
}
/* macOS traffic lights: glyphs appear when the title bar is hovered */
.term .tb i{position:relative;cursor:default;transition:filter .12s}.term .tb i::after{content:"";position:absolute;inset:0;display:grid;place-items:center;font:700 9px/1 var(--sans);color:rgba(0,0,0,.6);opacity:0;transition:opacity .12s}
.term .tb i:first-child::after{content:"\00d7";font-size:11px}.term .tb i:nth-child(2)::after{content:"\2013";font-size:11px;padding-bottom:1px}.term .tb i:nth-child(3)::after{content:"\002b";font-size:11px}
.term .tb:hover i::after{opacity:1}.term .tb i:active{filter:brightness(.75)}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:20px}.two .lede{position:static}.flow{grid-template-columns:1fr;gap:18px}.head.row{flex-direction:column;align-items:flex-start}.ledger p,.ledger .demo{max-width:none}}
.top .btn.s{padding:10px 16px;font-size:14.5px}
/* ---- phone ---- */
@media(max-width:520px){
.top .wrap{height:60px;gap:12px}.wordmark{font-size:21px}.top .btn.s{padding:9px 12px;font-size:13px}
.l-hero{padding:28px 0 8px;gap:22px}.l-hero .term{display:none}
h1{font-size:clamp(34px,10vw,44px);line-height:1;margin:0 0 18px}
.l-cta{gap:8px}.l-cta .btn.lg{padding:13px 16px;font-size:14.5px;flex:1 1 auto;justify-content:center}
.term{border-radius:10px}.term .tb{height:34px;padding:0 12px}.term .tb i{width:10px;height:10px}.term .tb span{font-size:11px}
.term pre{font-size:12px;line-height:1.65;padding:14px 14px;white-space:pre;overflow-x:auto;-webkit-overflow-scrolling:touch}
.prov{padding:22px 0 18px}.prov .plabel{font-size:10px;margin-bottom:12px}
.marquee .v{padding:6px 18px;font-size:13.5px;gap:8px}.marquee .v img,.marquee .v i{width:16px;height:16px}.marquee .track{animation-duration:26s}.marquee::before,.marquee::after{width:56px}
.two .lede h2,.l-sec .head h2{font-size:clamp(28px,8.6vw,36px)}
}
/* ---- docs: three-column documentation ---- */
.docs3{display:grid;grid-template-columns:230px minmax(0,1fr) 210px;gap:44px;padding-top:28px;padding-bottom:40px;align-items:start}
.dnav{position:sticky;top:71px;max-height:calc(100dvh - 71px);overflow-y:auto;overscroll-behavior:contain;padding:20px 0 24px;scrollbar-width:thin}.dnav summary{display:none}.dnav h4{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:18px 0 6px}.dnav h4:first-child{margin-top:0}.dnav a{display:block;padding:7px 10px;margin:1px 0;border-radius:4px;color:var(--ink-2);font-size:14.5px}.dnav a:hover{background:var(--surface);color:var(--ink)}.dnav a.on{background:var(--surface);color:var(--ink);box-shadow:inset 2px 0 0 var(--gold)}
.darticle{min-width:0;padding:20px 0 40px}.darticle>*{max-width:760px}.darticle h1{font:800 clamp(32px,3.4vw,44px)/1 var(--disp);text-transform:uppercase;margin:0 0 12px}.darticle .lead{font-size:16px;color:var(--ink-2);margin:0 0 22px;max-width:640px}
.darticle h2{font:700 22px/1.1 var(--disp);text-transform:uppercase;margin:30px 0 10px;scroll-margin-top:92px}.darticle h3{font:600 16px var(--sans);margin:18px 0 6px;scroll-margin-top:92px}.darticle p{color:var(--ink-2);margin:0 0 12px;line-height:1.65}.darticle p b{color:var(--ink);font-weight:600}.darticle .term{margin:12px 0 16px}.darticle .row2{max-width:none}.darticle .row2 .mono{text-align:right;word-break:break-all}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.dcard{display:block;padding:12px 14px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);color:var(--ink);font-weight:500;font-size:14px}.dcard:hover{border-color:var(--gold);color:var(--ink)}
.dtoc{position:sticky;top:71px;max-height:calc(100dvh - 71px);overflow-y:auto;overscroll-behavior:contain;padding:20px 0 24px;scrollbar-width:thin}.dtoc h4{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}.dtoc a{display:block;font-size:13px;color:var(--mute);padding:4px 0 4px 10px;border-left:1px solid var(--line)}.dtoc a.l3{padding-left:20px}.dtoc a:hover{color:var(--ink)}.dtoc a.on{color:var(--gold);border-left-color:var(--gold)}
@media(max-width:1100px){.docs3{grid-template-columns:220px minmax(0,1fr);gap:32px}.dtoc{display:none}}
@media(max-width:900px){.docs3{grid-template-columns:1fr;gap:18px;padding-top:20px}.dnav{position:static;max-height:none;overflow:visible;padding:0}.darticle{padding:0 0 20px}.dnav summary{display:block;cursor:pointer;font:600 14px var(--sans);padding:10px 12px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);list-style:none}.dnav summary::-webkit-details-marker{display:none}.dnav summary::after{content:"+";float:right;color:var(--gold)}.dnav details[open] summary::after{content:"\2013"}.dnav nav{padding:8px 4px 0}.dgrid{grid-template-columns:1fr 1fr}.darticle .row2{flex-direction:column;gap:2px}.darticle .row2 .mono{text-align:left}}
@media(max-width:520px){.dgrid{grid-template-columns:1fr}}
/* ---- buyer dashboard (shell like the operator panel) ---- */
body.dash{background:var(--bg)}
.auth-wrap{max-width:420px;margin:0 auto;padding:56px 20px 40px;text-align:center}.auth-wrap .wordmark{display:inline-block;margin-bottom:22px}.auth-card{text-align:left;margin-top:12px}.auth-card .body{padding:20px}
.login{min-height:100dvh;display:grid;grid-template-columns:1fr 1fr}
.auth-side{position:relative;padding:110px 56px 40px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line);overflow:hidden}
.auth-side::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(420px 420px at 8% 8%,rgba(44,42,37,.16),transparent 62%),radial-gradient(520px 520px at 92% 100%,rgba(44,42,37,.12),transparent 62%),repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 1px,transparent 1px 14px)}
.auth-side>*{position:relative;z-index:1}.auth-side .wordmark{position:absolute;top:36px;left:56px;font-size:24px;margin:0}
.auth-hero{max-width:640px}.auth-hero h1{font:800 clamp(40px,4.4vw,66px)/.94 var(--disp);text-transform:uppercase;margin:0 0 30px;letter-spacing:.01em}.auth-hero h1 .l1,.auth-hero h1 .l2{display:block;white-space:nowrap}.auth-hero h1 em{font-style:normal;color:var(--gold)}
.auth-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.auth-pts li{display:flex;gap:12px;align-items:center;color:var(--ink-2);font-size:16px}
.auth-pts svg{flex:none;width:20px;height:20px;padding:3px;fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;border:1px solid rgba(44,42,37,.5);clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.auth-main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 32px;gap:14px}
.auth-box{width:min(440px,100%);background:var(--surface);border:1px solid var(--line2);padding:30px 28px 24px;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.auth-box h2{font:700 34px/1 var(--disp);text-transform:uppercase;margin:0 0 8px}.auth-box>p.dim{margin:0 0 22px;font-size:14.5px;line-height:1.5}
.auth-under{margin:0;font-size:14px;color:var(--ink-2);text-align:center}.auth-under+.auth-under{margin-top:-6px}.auth-under a{color:var(--mute);text-decoration:underline}.auth-under a:hover{color:var(--ink)}
.sso-list{display:flex;flex-direction:column;gap:10px}
.sso{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;padding:0 16px;position:relative;background:var(--surface-2);border:1px solid var(--line2);color:var(--ink);font:600 15px var(--sans);cursor:pointer;text-align:left;text-decoration:none;transition:border-color .15s,color .15s,transform .12s,background-color .15s}.sso:hover,.sso:focus-visible{border-color:var(--gold);color:var(--gold);background:#181b22;outline:none}.sso:active{transform:scale(.99)}
.sso .ic{width:22px;height:22px;display:grid;place-items:center;flex:none}.sso .ic svg{width:22px;height:22px}.sso small{margin-left:6px;font:500 9.5px var(--mono);color:var(--mute);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line2);padding:2px 6px}.sso small:empty{display:none}.sso.off{opacity:.45;cursor:not-allowed;pointer-events:none}
.tgwait{padding:16px;border:1px solid var(--line2);background:var(--surface-2)}.tgwait b{font-weight:600}.tgwait>b{display:block;font-size:15px}.tgwait p{margin:6px 0 12px;color:var(--ink-2);font-size:14px;line-height:1.5}
.tgcode{display:flex;align-items:center;gap:12px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}.tgcode code{font:600 22px var(--mono);letter-spacing:.14em;color:var(--gold);background:none;border:0;padding:0}
.bar.wait{height:2px;background:var(--line);border-radius:0;margin:14px 0;overflow:hidden}.bar.wait i{width:40%;background:var(--gold);animation:waitbar 1.4s ease-in-out infinite}@keyframes waitbar{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
.fine{font-size:12.5px;color:var(--mute);margin:16px 0 0;line-height:1.5}.fine a{color:var(--ink-2);text-decoration:underline}.fine .back{display:block;margin-top:10px}
@media(prefers-reduced-motion:no-preference){.login .l1,.login .l2,.login .auth-pts,.login .auth-box,.login .auth-under{animation:lin .42s cubic-bezier(.22,1,.36,1) both}.login .l2{animation-delay:.06s}.login .auth-pts{animation-delay:.14s}.login .auth-box{animation-delay:.22s}.login .auth-under{animation-delay:.32s}@keyframes lin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}}
@media(max-width:900px){.login{grid-template-columns:1fr;min-height:0}.auth-side{border-right:0;border-bottom:1px solid var(--line);padding:24px 20px 24px;justify-content:flex-start}.auth-side .wordmark{position:static;display:inline-block;margin-bottom:22px}.auth-hero h1{font-size:38px;margin-bottom:18px}.auth-pts{gap:10px}.auth-pts li{font-size:15px}.auth-main{padding:22px 16px 36px}.auth-box{padding:22px 18px}.sso small{display:none}.sso>span{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.bar.wait i{animation:none;width:100%}}
/* topbar sits in a sticky wrapper without clip-path so the profile dropdown can hang below it */
.alert{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid rgba(44,42,37,.5);background:rgba(44,42,37,.08);font-size:13.5px}
.phead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}.phead h2{font:700 30px/1 var(--disp);text-transform:uppercase;margin:0 0 6px}.phead p{margin:0;color:var(--ink-2);max-width:640px}.pill{font:500 11px var(--mono);letter-spacing:.06em;padding:6px 10px;border:1px solid var(--line2);color:var(--ink-2)}
.hero2{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:stretch}
.wallet{position:relative;padding:22px 24px;background:linear-gradient(135deg,rgba(44,42,37,.22),rgba(44,42,37,.06) 60%,var(--surface));border:1px solid rgba(44,42,37,.55);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);display:flex;flex-direction:column}.wallet small{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}.wallet small::before{content:"//";margin-right:.5em}.wallet b{display:block;font:800 clamp(40px,4.4vw,60px)/1 var(--disp);margin:10px 0 6px}.wallet .sub{font:12px var(--mono);color:var(--ink-2)}.wallet .bar{margin:12px 0 0;background:rgba(0,0,0,.35)}.wallet .acts{display:flex;gap:8px;margin-top:auto;padding-top:18px}
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.kv small{display:block;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}.kv b{font:600 20px/1 var(--disp)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.tiles.t3{grid-template-columns:repeat(3,1fr)}
.tile{background:var(--surface);border:1px solid var(--line);position:relative;padding:14px 16px;min-height:96px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.tile::before{content:"";position:absolute;top:0;left:0;width:10px;height:10px;border-top:1px solid var(--line2);border-left:1px solid var(--line2)}.tile::after{content:"";position:absolute;bottom:0;right:0;width:10px;height:10px;border-bottom:1px solid var(--line2);border-right:1px solid var(--line2)}
.tile>small{display:block;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.tile>small::before{content:"//";color:var(--gold);margin-right:.5em}.tile>b{display:block;font:600 32px/1 var(--disp);margin:10px 0 4px;letter-spacing:.01em}.tile>b.small{font-size:15px;font-family:var(--mono);font-weight:500;word-break:break-all;margin-top:12px}.tile .sub{display:block;font:11.5px var(--mono);color:var(--mute)}.tile .btn.xs{position:absolute;right:12px;top:12px}
.dash .card{display:block;padding:0;min-height:0;border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.dash .card>header{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line)}.dash .card>header h2{font:600 15px var(--disp);text-transform:uppercase;margin:0;letter-spacing:.03em;white-space:nowrap}.dash .card>header h2::before{content:"//";color:var(--gold);margin-right:.5em}.dash .card>header .q{font:12px var(--mono);color:var(--mute);margin-left:auto}.dash .card .body{padding:16px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.two-col.w2{grid-template-columns:1.4fr 1fr}
.urlbar{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);background:var(--surface)}.urlbar small{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}.urlbar code{flex:1;font:13px var(--mono);color:var(--ink);background:none;border:0;padding:0}
.dash .in{height:38px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink);padding:0 10px;font:14px var(--sans);width:100%;min-width:0}.dash textarea.in{height:auto;padding:8px 10px}.dash .row{display:flex;gap:8px;align-items:center}.dash .row.wrap{flex-wrap:wrap}.dash .row .in{flex:1}.dash .btn.xs{padding:2px 7px;font-size:11px}
.dash table{width:100%}.dash td,.dash th{padding:8px 12px}.dash table.log td{white-space:nowrap;font-size:13px}.dash table.log .mono{font:12px var(--mono)}.dash .empty{margin:12px}
.chips{display:flex;gap:6px}.chips button{font:500 12px var(--mono);padding:6px 10px;border:1px solid var(--line2);background:var(--surface-2);color:var(--ink-2);cursor:pointer}.chips button.on{border-color:var(--gold);color:var(--gold)}
.chart{display:flex;align-items:flex-end;gap:3px;height:150px;position:relative;padding-bottom:18px}.cbar{flex:1;height:100%;display:flex;align-items:flex-end}.cbar i{display:block;width:100%;background:var(--gold);min-height:2px;opacity:.85}.cbar:hover i{opacity:1}.cax{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;font:10px var(--mono);color:var(--mute)}.chart .empty{width:100%;align-self:center}
.mgrp h4{display:flex;align-items:center;gap:8px;margin:0;padding:10px 16px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.mgrp h4 span{color:var(--mute);letter-spacing:0}.mrow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--line)}.mrow code{font:13.5px var(--mono);color:var(--ink);background:none;border:0;padding:0}.mrow .dim{font:12px var(--mono)}
.mlogo{width:28px;height:28px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line2);color:var(--ink);font:800 12px var(--wm);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}.mlogo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.mlogo.x{color:var(--mute)}
.mname{display:inline-flex;align-items:center;gap:10px;min-width:0;max-width:100%;padding:4px 0;background:none;border:0;color:var(--ink);cursor:pointer;text-align:left}.mname code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mname::after{content:"salin";font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);opacity:0;flex:none}.mname:hover code{text-decoration:underline dotted var(--mute);text-underline-offset:3px}.mname:hover::after,.mname:focus-visible::after{opacity:1}.mname:focus-visible{outline:2px solid var(--gold);outline-offset:1px}.mname.copied::after{content:"tersalin";color:var(--gold);opacity:1}
.dash .pk .card.pack{display:flex;flex-direction:column;gap:4px;padding:20px;min-height:200px;color:inherit}.dash .pk .card.pack b{font:700 36px/1 var(--disp);margin-top:6px}.dash .pk .card.pack .btn{margin-top:auto}
.keybox.big code{font-size:22px;letter-spacing:.08em;color:var(--gold)}
.steps-l{margin:0;padding-left:18px;color:var(--ink-2)}.steps-l li{margin:0 0 8px}
.dash .view{display:flex;flex-direction:column;gap:14px}
@media(max-width:1100px){.hero2{grid-template-columns:1fr}.two-col.w2{grid-template-columns:1fr}}
@media(max-width:520px){.tiles,.tiles.t3{grid-template-columns:1fr 1fr}.tile>b{font-size:24px}.phead h2{font-size:26px}.mrow{grid-template-columns:auto 1fr;gap:10px;padding:8px 12px}.mrow .dim{display:none}}

/* ---- dashboard motion: short, purposeful, native-feeling ---- */
@media(prefers-reduced-motion:no-preference){
.dash .view.enter{animation:dview .32s cubic-bezier(.22,1,.36,1) both}
@keyframes dview{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dash .view.enter>*{animation:dview .36s cubic-bezier(.22,1,.36,1) both}
.dash .view.enter>*:nth-child(2){animation-delay:.04s}.dash .view.enter>*:nth-child(3){animation-delay:.08s}.dash .view.enter>*:nth-child(4){animation-delay:.12s}.dash .view.enter>*:nth-child(5){animation-delay:.16s}
@keyframes dfade-out{to{opacity:0;transform:translateY(-4px)}}@keyframes dfade-in{from{opacity:0;transform:translateY(8px)}}
::view-transition-group(root){animation-duration:0s}::view-transition-old(root),::view-transition-new(root){animation:none}
.dash .btn{transition:transform .12s,background .15s,border-color .15s,color .15s,opacity .15s}.dash .btn:active{transform:scale(.96)}
.dash .tile,.dash .card{transition:border-color .2s}.dash .tile:hover{border-color:var(--line2)}
.dash .bar i{transition:width .6s cubic-bezier(.2,.7,.2,1)}
.dash .cbar i{transition:height .5s cubic-bezier(.2,.7,.2,1)}
.dash .chips button{transition:border-color .15s,color .15s,transform .12s}.dash .chips button:active{transform:scale(.95)}
.dash table tr{transition:background .15s}.dash table tr:hover td{background:rgba(255,255,255,.02)}
.dash .st{transition:opacity .2s}
.dash .view.enter .alert{animation:dview .3s cubic-bezier(.2,.7,.2,1) both}
.dash .view.enter .empty{animation:dview .3s both}
}
.dash .reply{margin-top:8px;padding:8px 10px;border-left:2px solid var(--gold);background:rgba(44,42,37,.06);color:var(--ink)}

/* ---- dashboard type scale (bigger) and threads ---- */
body.dash{font-size:16px}
.dash .btn:focus-visible,.dash .in:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.phead h2{font-size:34px}.phead p{font-size:16px}
.tile>small{font-size:11px}.tile>b{font-size:36px}.tile>b.small{font-size:16px}.tile .sub{font-size:12.5px}
.wallet b{font-size:clamp(46px,4.8vw,66px)}.wallet .sub{font-size:13px}
.kv b{font-size:22px}.kv small{font-size:11px}
.dash .card>header h2{font-size:16px}.dash .card>header .q{font-size:12.5px}.dash .card .body{font-size:15px}
.dash td,.dash th{padding:10px 12px;font-size:14px}.dash table.log td{font-size:13.5px}
.dash .in{height:40px;font-size:15px}.dash .btn{font-size:14px}.dash .btn.s{font-size:13px}.dash .btn.xs{font-size:11.5px}
.mrow code{font-size:14.5px}.dash .empty{font-size:14.5px}.dash .row2{font-size:14.5px}
.urlbar code{font-size:14px}.keybox code{font-size:14px}
.dash .badge{position:relative}.dash .badge::after{content:"";position:absolute;right:10px;top:50%;width:8px;height:8px;background:var(--gold);transform:translateY(-50%);clip-path:polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px)}
.thread{padding:14px 16px;border-bottom:1px solid var(--line)}.thread .th{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}.thread .th b{font-size:15px}.thread .th .st{margin-left:auto}
.thread .msg{padding:10px 12px;margin:6px 0;border-left:2px solid var(--line2);background:rgba(255,255,255,.03);white-space:pre-wrap;font-size:14.5px}.thread .msg.operator{border-left-color:var(--gold);background:rgba(44,42,37,.06)}.thread .msg .mono{display:block;font-size:11px;color:var(--mute);margin-bottom:4px}
/* key rows: name and value breathe */
.dash #keysbox td{padding:14px 12px;vertical-align:middle}.dash #keysbox td.id{line-height:1.9}.dash #keysbox td.id b{display:block;font-size:15px;margin-bottom:6px}.dash #keysbox td.id .dim{margin-left:6px}

/* phone: tabs slide in the direction of travel */
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
.dash .view.enter{animation:dslide-in-r .26s cubic-bezier(.22,1,.36,1) both}html[data-dir=prev] .dash .view.enter{animation-name:dslide-in-l}
.dash .view.enter>*,.dash .view.enter .alert,.dash .view.enter .empty{animation:none}
@keyframes dslide-in-r{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}@keyframes dslide-in-l{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
}
.emailbox{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.emailbox .f{margin-bottom:10px}.emailbox .f label{display:block;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}.emailbox .btn.w{width:100%}
/* ---- account features this shop has beyond the original storefront: key sign-in, bansos, webhook page, in-dashboard checkout ---- */
[data-no-tg] .tg-only{display:none!important}
.sso-alt{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.sso-alt:has(>.sso.hidden){grid-template-columns:1fr}.sso-alt .sso{min-height:44px;font-size:14px}.sso.on{border-color:var(--gold);color:var(--gold)}
.sso .ic svg.ln{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.toaster{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;padding:10px 14px;background:var(--s3);border:1px solid var(--line2);border-left:2px solid var(--ok);font-size:13.5px;max-width:min(340px,calc(100vw - 32px));box-shadow:0 14px 34px -16px rgba(0,0,0,.9);animation:dview .22s cubic-bezier(.22,1,.36,1) both}.toast.bad{border-left-color:var(--danger)}
.ksec{font-family:var(--mono);word-break:break-all}td .ksec{word-break:normal;white-space:nowrap}.keybox code{flex:1;min-width:0;background:none;border:0;padding:0}
.lgq{flex:1;min-width:180px}
.chips a{font:500 11px var(--mono);letter-spacing:.06em;padding:6px 10px;border:1px solid var(--line2);color:var(--ink-2);cursor:pointer}.chips a[aria-selected=true]{border-color:var(--gold);color:var(--gold)}
/* model cards: maker mark, display name, id to copy, context window and billing multiplier */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.mcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s,transform .15s;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.mcard:hover,.mcard:focus-visible{border-color:var(--gold);transform:translateY(-1px)}.mcard.copied{border-color:var(--ok)}
.mlogo[data-maker] svg{width:16px;height:16px;fill:currentColor;stroke:none}.mlogo[data-maker=generic]{color:var(--mute)}
.mcard .mbody{display:flex;flex-direction:column;gap:2px;min-width:0}.mcard .mbody b{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcard .msub{font:11px var(--mono);color:var(--mute)}.mcard .mid code{font-size:12.5px;color:var(--ink-2);background:none;border:0;padding:0}
.mcard .mside{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.mrate{font:500 11px var(--mono);padding:2px 7px;border:1px solid var(--line2);color:var(--ink-2)}.mrate.up{color:var(--gold);border-color:rgba(44,42,37,.45)}.mrate.down{color:var(--ok);border-color:color-mix(in oklab,var(--ok) 45%,transparent)}
.mcard .out{font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--danger)}
/* bansos: the shared free pool */
.bhero{gap:0}.bhero .bh-main{display:flex;align-items:center;gap:20px}.bhero.closed{background:var(--surface);border-color:var(--line2)}.bhero.closed b{color:var(--ink-2)}
.bhero .bh-note{margin:14px 0 0;font-size:13.5px;color:var(--ink-2);max-width:620px}.bhero .bh-note:empty{display:none}
.ring{position:relative;width:84px;height:84px;flex:none;display:grid;place-items:center}.ring[hidden]{display:none}.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:6}.ring .tr{stroke:rgba(255,255,255,.1)}.ring .pr{stroke:var(--gold);stroke-linecap:round;transition:stroke-dasharray .4s}
.ring[data-level=warn] .pr{stroke:var(--gold2)}.ring[data-level=bad] .pr{stroke:var(--danger)}.ring b{position:relative;font:600 17px var(--disp)!important;color:var(--ink)}
/* checkout dialog: method, then QRIS or Binance Pay, then the receipt */
dialog.sheet{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;overflow:auto;color:var(--ink);background:var(--surface);border:1px solid var(--line2);border-radius:var(--r);box-shadow:0 30px 80px -24px #000}
dialog.sheet::backdrop{background:rgba(6,7,9,.72);backdrop-filter:blur(3px)}
.sheet-in{margin:0}.sheet header{padding:18px 20px 14px;border-bottom:1px solid var(--line)}.sheet header[hidden]{display:none}
.sheet header h3{margin:0;font:700 26px/1 var(--disp);text-transform:uppercase;display:flex;align-items:center;gap:10px}.sheet header p{margin:6px 0 0;font:12.5px var(--mono);color:var(--ink-2)}
.sheet header.ok h3{color:var(--ok)}
.sheet section{padding:16px 20px 18px}.sheet section[hidden]{display:none}
.sheet footer{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.seg[hidden]{display:none}.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;padding:10px;border:1px solid var(--line2);background:var(--surface-2);font:600 13.5px var(--sans);cursor:pointer}
.seg input:checked+span{border-color:var(--gold);color:var(--gold)}.seg input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}.seg label.off span{opacity:.45;cursor:not-allowed}
.plist{margin:0 0 10px}.plist>div{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}.plist dt{color:var(--mute)}.plist dd{margin:0;text-align:right;font-family:var(--mono);font-size:13.5px}
.plist dd.big{font:600 24px var(--disp);color:var(--gold)}.plist .sum dd{font:600 22px var(--disp);color:var(--gold)}.plist .paid-ok{color:var(--ok)}
.sheet:has(input[value=binance]:checked) .plist[data-pm=qris],.sheet:not(:has(input[value=binance]:checked)) .plist[data-pm=binance],.sheet:not(:has(input[value=binance]:checked)) #pm-bn-note{display:none}
.sheet .note{margin:8px 0 0;font-size:13px;color:var(--ink-2)}.sheet .note:empty,.sheet .note[hidden]{display:none}.sheet .note.bad{color:var(--danger)}.sheet .note.c{text-align:center}
.sheet img.qr{display:block;width:220px;height:220px;margin:4px auto 10px;padding:10px;background:#fff;border-radius:var(--r-s)}.sheet img.qr[hidden],.sheet .qrph[hidden]{display:none}
.sheet .qrph{padding:28px 16px;text-align:center;border:1px dashed var(--line2);color:var(--mute);font-size:13.5px}
.sheet .how{margin:10px 0;padding-left:18px;font-size:13.5px;color:var(--ink-2)}.sheet .how li{margin-bottom:6px}
.sheet .claim{display:flex;gap:8px;margin:10px 0}.sheet .claim .in{flex:1;min-width:0}
.kcopy{background:none;border:0;border-bottom:1px dashed var(--line2);padding:0;font:13.5px var(--mono);color:var(--ink);cursor:pointer}.kcopy:hover{color:var(--gold)}
/* price page calculator */
.calc .card>label{display:block;margin-top:14px;font-size:13.5px;color:var(--ink-2)}.calc .card>label span{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}.calc .card>label b{font-family:var(--mono);color:var(--ink);font-weight:500}
.calc input[type=range]{width:100%;accent-color:var(--gold)}
.calc .out{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:14px;color:var(--ink-2)}.calc .out b{font:500 14px var(--mono);color:var(--ink)}.calc .out.big b{font:600 28px var(--disp);color:var(--gold)}
.calc .note{margin:12px 0 0;font-size:13px;color:var(--mute)}
.pk .per{font:12px var(--mono);color:var(--mute)}
.order-act{display:flex;gap:6px;justify-content:flex-end}
@media(max-width:520px){.mgrid{grid-template-columns:1fr}.bhero .bh-main{gap:14px}.ring{width:68px;height:68px}.sheet footer .btn{flex:1}}
@media(prefers-reduced-motion:reduce){.toast{animation:none}.mcard{transition:none}.mcard:hover{transform:none}}
/* ---- sign-in: a lock screen. Dark wallpaper with the gold glow, the clock, one round mark, pill fields, round sign-in doors ---- */
/* ---- landing: point-mesh hero, twin terminal, floating key card, feature cards, multiplier bars ---- */
.top{background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
@media(min-width:901px){.top .wrap{position:relative}.top nav{position:absolute;left:50%;transform:translateX(-50%)}}
.eyebrow{margin:0 0 10px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}.eyebrow::before{content:"//";margin-right:.6em;opacity:.7}
.hx{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);color:var(--ink)}
.hx-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent 100%);mask-image:linear-gradient(to bottom,#000 60%,transparent 100%)}
.hx-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(760px 480px at 14% 8%,rgba(44,42,37,.13),transparent 62%),radial-gradient(620px 460px at 92% 78%,rgba(44,42,37,.07),transparent 62%)}
.hx-bg canvas{position:relative;display:block;width:100%;height:100%}
.hx-in{display:grid;grid-template-columns:minmax(0,5.6fr) minmax(0,6.4fr);gap:40px;align-items:center;min-height:min(calc(100svh - 71px),860px);padding-top:56px;padding-bottom:64px}
.hx-l,.hx-r{min-width:0}
.hx h1{font-size:clamp(40px,4.5vw,64px);margin:0 0 18px}
.hx .l-cta{margin-top:26px}.btn .arr{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}.btn:hover .arr{transform:translateX(3px)}
.hx-r{position:relative;padding-bottom:92px}
.hx-term{border-radius:14px;background:rgba(13,15,19,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hx-term .tb{background:transparent;border-bottom:1px solid rgba(255,255,255,.07)}.hx-term .tb i:nth-child(n){background:rgba(255,255,255,.16);box-shadow:none;width:9px;height:9px}
.panes{display:grid;grid-template-columns:1fr 1fr}.pane{min-width:0}.pane+.pane{border-left:1px solid rgba(255,255,255,.07)}
.pane .ph{display:flex;align-items:center;gap:9px;padding:11px 20px;border-bottom:1px solid rgba(255,255,255,.07);font:12px var(--mono);color:var(--ink-2)}.pane .ph img{filter:invert(.8)}
.pane .pb{padding:18px 20px 22px;min-height:372px;font:12.5px/1.95 var(--mono);color:#c3c7cf}
.tl{display:flex;flex-wrap:wrap;column-gap:.7ch;white-space:pre-wrap;overflow-wrap:anywhere;padding-left:2.4ch;position:relative;min-height:1.95em}
.tl.gap{margin-top:10px}.tl.dimr{color:var(--mute)}.tl.hi,.tl .hi{color:var(--ink);font-weight:500}
.tl>b:first-child{position:absolute;left:0;font-weight:400;color:var(--mute)}.tl>b.ok{color:var(--ok)}
.tl>b.dot{top:.78em;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.tl .c1{color:var(--info)}.tl .c2{color:var(--gold2)}.tl .c3{color:var(--ok)}.tl .add{color:var(--ok)}.tl .del{color:var(--danger)}
.tl .cursor,.ty.typing::after{content:"";display:inline-block;width:.6em;height:1.15em;margin-left:1px;vertical-align:-.2em;background:var(--gold);animation:hxblink 1.05s steps(1) infinite}
html.js .hx .tl{opacity:0}html.js .hx .tl.on{opacity:1}
@keyframes hxblink{50%{opacity:0}}
.hx-key{position:absolute;right:-6px;bottom:0;width:min(300px,78%);padding:16px;background:rgba(35,33,30,.94);border:1px solid var(--line2);border-radius:14px;box-shadow:0 24px 60px -24px #000,inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:hxfloat 7s ease-in-out infinite}
@keyframes hxfloat{50%{transform:translateY(-8px)}}
.hx-key .kh{display:flex;align-items:center;justify-content:space-between;gap:10px}.hx-key small{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.hx-key .live{display:inline-flex;align-items:center;gap:7px;padding:3px 9px;border-radius:999px;background:var(--s3);font:500 11px var(--sans);color:var(--ink)}
.hx-key .live i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--ok)}.hx-key .live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ok);animation:hxping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes hxping{75%,to{opacity:0;transform:scale(2.6)}}
.hx-key .kk{margin:12px 0 10px;padding:10px 12px;border-radius:9px;background:var(--bg);border:1px solid var(--line)}.hx-key .kk code{background:none;border:0;padding:0;font-size:13px;color:var(--gold2)}
.hx-key .kr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:7px;font-size:12.5px;color:var(--mute)}.hx-key .kr b{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);min-width:0}.hx-key .kr b.mono{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx-key .logos{display:inline-flex;gap:5px}.hx-key .logos img{filter:invert(.86)}
html.js .hx-l>*,html.js .hx-r>*{opacity:0}
/* feature cards, steps */
@media(max-width:1100px){.hx-in{grid-template-columns:1fr;gap:36px;min-height:0;padding-top:44px}.hx-key{right:8px}}
@media(max-width:640px){.panes{grid-template-columns:1fr}.pane+.pane{border-left:0;border-top:1px solid rgba(255,255,255,.07)}.pane .pb{min-height:0}.hx-key{position:relative;right:auto;width:auto;margin-top:14px;animation:none}.hx-r{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){.hx-key,.hx-key .live i::after,.tl .cursor,.ty.typing::after{animation:none}}
/* ---- family strip: big maker mark, family name, maker; scrolls right to left without a seam (site.js fills the track) ---- */
.prov.fam{background:none;padding:40px 0 46px}
.prov-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.prov-h .plabel{margin:0;text-align:left}
.prov-h .more{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--sans);color:var(--ink);white-space:nowrap}.prov-h .more:hover{color:var(--gold)}
.prov-h .more svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}.prov-h .more:hover svg{transform:translateX(3px)}
.prov.fam .v{gap:14px;padding:10px 42px;color:var(--ink-2);opacity:.6;transition:opacity .2s,color .2s}
.prov.fam .v:hover,.prov.fam .v:focus-visible{opacity:1;color:var(--ink)}
.prov.fam .mk{flex:none;width:42px;height:42px;display:grid;place-items:center}
.prov.fam .mk svg{width:40px;height:40px;filter:grayscale(1) brightness(1.75);transition:filter .2s}.prov.fam .v:hover .mk svg{filter:none}
.prov.fam .vt{display:flex;flex-direction:column;gap:3px;text-align:left}.prov.fam .vt b{font:600 21px/1.05 var(--sans);letter-spacing:-.01em}.prov.fam .vt small{font:400 12.5px/1 var(--sans);color:var(--mute)}
.marquee.fill .track{animation:marqueeShift var(--dur,40s) linear infinite}
.marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused}
@keyframes marqueeShift{to{transform:translate3d(calc(-1*var(--shift,50%)),0,0)}}
@media(max-width:640px){.prov.fam{padding:28px 0 32px}.prov.fam .v{padding:8px 24px;gap:11px}.prov.fam .mk{width:32px;height:32px}.prov.fam .mk svg{width:30px;height:30px}.prov.fam .vt b{font-size:17px}.prov.fam .vt small{font-size:11.5px}}
/* ---- landing "sekilas": figures read from the catalog and the packages, plus the failover sketch ---- */
.fo{min-width:0;display:flex;align-items:center}
.fo-n{flex:none;position:relative;padding:11px 14px;border:1px solid var(--line2);background:var(--surface-2);font:500 12.5px var(--mono);color:var(--ink);white-space:nowrap;border-radius:var(--r)}
.fo-n em{display:block;margin-top:3px;font:11px var(--mono);font-style:normal;color:var(--mute)}
.fo-l{flex:1;min-width:18px;height:2px;background:var(--line2)}
.fo-n.bad{border-color:var(--danger);color:var(--danger)}.fo-n.ok{border-color:var(--ok);color:var(--ok)}
@media(max-width:640px){.fo{flex-direction:column;align-items:stretch}.fo-l{flex:none;width:2px;height:22px;min-width:0;margin:0 auto}.fo-n{text-align:center}}
/* ---- small screens: brand in the middle, one menu button, and the menu as a floating card ---- */
.brand{display:inline-flex;align-items:center;gap:10px}.brand:hover{color:inherit;opacity:.88}
.bmark{display:none;width:38px;height:38px;place-items:center;border-radius:50%;color:var(--gold);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(44,42,37,.5);box-shadow:0 0 0 4px rgba(44,42,37,.07),inset 0 1px 0 rgba(255,255,255,.14)}.bmark .mark{width:20px;height:20px}
.top-act{display:flex;align-items:center;gap:12px}
.mtog{display:none;position:relative;width:42px;height:42px;padding:0;border:1px solid var(--line2);border-radius:11px;background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s}
.mtog:hover{border-color:var(--gold)}.mtog:focus-visible,.mm-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mtog i{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink)}.mtog i:first-child{top:16px}.mtog i:last-child{top:24px}
.mmenu,.mm-shade{display:none}
@media(max-width:900px){
.top .wrap{position:relative;justify-content:flex-end}
.top .wrap>.brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.bmark{display:grid}.top-act,.top .sp{display:none}.mtog{display:block}
.mm-shade:not([hidden]){display:block;position:absolute;left:0;right:0;top:0;height:100dvh;background:rgba(4,5,7,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:mmfade .2s ease both}
.mmenu:not([hidden]){display:block;position:absolute;z-index:1;top:10px;left:12px;right:12px;max-width:440px;margin:0 auto;max-height:calc(100dvh - 20px);overflow:auto;padding:16px;background:radial-gradient(360px 220px at 0 0,rgba(44,42,37,.12),transparent 70%),var(--surface);border:1px solid var(--line2);border-radius:22px;box-shadow:0 30px 70px -20px #000,0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);transform-origin:50% 0;animation:mmpop .26s cubic-bezier(.22,1,.36,1) both}
.mm-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 12px}
.mm-x{width:38px;height:38px;display:grid;place-items:center;padding:0;border:1px solid var(--line2);border-radius:10px;background:var(--surface-2);color:var(--ink-2);cursor:pointer;transition:border-color .15s,color .15s}.mm-x:hover{border-color:var(--gold);color:var(--gold)}
.mm-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.mmenu nav{display:flex;flex-direction:column;gap:2px}
.mmenu nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 12px;border-radius:12px;font:600 16.5px var(--sans);color:var(--ink);transition:background .15s,color .15s}
.mmenu nav a svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--mute);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s}
.mmenu nav a:hover,.mmenu nav a:focus-visible{background:rgba(255,255,255,.05);color:var(--ink);outline:0}.mmenu nav a:hover svg,.mmenu nav a:focus-visible svg{transform:translateX(3px);stroke:var(--gold)}
.mmenu nav a.on{color:var(--gold)}.mmenu nav a.on svg{stroke:var(--gold)}
.mmenu hr{height:1px;margin:8px 4px;border:0;background:var(--line2)}
.mm-login{display:flex;align-items:center;gap:10px;width:100%;margin-top:6px;padding:15px 18px;border:1px solid var(--gold);border-radius:14px;background:rgba(44,42,37,.1);color:var(--gold);font:600 15.5px var(--sans);transition:background .15s,color .15s}.mm-login:hover,.mm-login:focus-visible{background:rgba(44,42,37,.18);color:var(--gold2);outline:0}.mm-login span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mm-login svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mm-login .arr{transition:transform .2s}.mm-login:hover .arr{transform:translateX(3px)}
.mm-buy{display:flex;width:100%;margin-top:10px;border-radius:14px;padding:16px 18px;font-size:15.5px}
html.mm-open{overflow:hidden}
}
@keyframes mmfade{from{opacity:0}to{opacity:1}}
@keyframes mmpop{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mmenu:not([hidden]),.mm-shade:not([hidden]){animation:none}}
/* ---- tools: auto setup (pick agents, copy one command) ---- */
.as .body{display:flex;flex-direction:column;gap:16px}
.as-step>small,.as-row label{display:block;margin-bottom:8px;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.as-chips{display:flex;flex-wrap:wrap;gap:8px}
.as-chips button{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line2);border-radius:999px;background:var(--surface-2);color:var(--ink-2);font:600 13.5px var(--sans);cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.as-chips button::before{content:"";width:14px;height:14px;border:1.5px solid var(--line2);border-radius:50%;transition:border-color .15s,background .15s}
.as-chips button:hover{border-color:var(--gold);color:var(--ink)}.as-chips button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.as-chips button[aria-checked=true]{border-color:var(--gold);background:rgba(44,42,37,.12);color:var(--gold)}
.as-chips button[aria-checked=true]::before{border-color:var(--gold);background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1500' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/10px no-repeat}
.as-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.3fr) auto;gap:14px;align-items:end}.as-row .f{margin:0;min-width:0}
.as-save{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);cursor:pointer}.as-save input{width:16px;height:16px;accent-color:var(--gold)}
.as .term pre{min-height:64px;white-space:pre-wrap;word-break:break-all;color:var(--ink)}
.as-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.as-act .btn{flex:none}.as-act .dim{flex:1;min-width:220px}
@media(max-width:900px){.as-row{grid-template-columns:1fr}.as-act .btn{width:100%}}

/* ---- landing: facts strip, numbered flow and the failover sketch are text on rules, not cards ---- */
.flow.big{margin-top:8px;gap:36px;font-size:15px}.flow.big li{padding-left:48px;min-height:64px}.flow.big li::before{top:-4px;font:800 30px/1 var(--disp);color:var(--gold)}.flow.big b{font:700 22px/1.05 var(--disp);text-transform:uppercase;margin-bottom:8px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts>div{display:flex;flex-direction:column;gap:8px;padding:26px 22px 26px 0;margin-right:22px;border-right:1px solid var(--line)}.facts>div:last-child{border-right:0;margin-right:0}
.facts dt{font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}.facts dt::before{content:"//";margin-right:.6em;color:var(--gold)}
.facts dd{margin:0}.facts .num{font:700 clamp(34px,3.4vw,46px)/1 var(--disp);letter-spacing:.01em;color:var(--gold);font-variant-numeric:tabular-nums}.facts .big{font:700 clamp(28px,2.6vw,36px)/1 var(--disp);letter-spacing:.01em;color:var(--ink)}
.facts .sub{font-size:14px;line-height:1.5;color:var(--ink-2)}
.facts .go{margin-top:auto;padding-top:8px}.facts .go a{display:inline-flex;align-items:center;gap:7px;font:600 13px var(--sans);color:var(--ink)}.facts .go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}.facts .go a:hover{color:var(--gold)}.facts .go a:hover svg{transform:translateX(3px)}
.fo-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:center;padding-top:40px}
.fo-t h3{margin:0 0 8px;font:700 26px/1.05 var(--disp);text-transform:uppercase}.fo-t p{margin:0;color:var(--ink-2);max-width:420px}
@media(max-width:1100px){.facts{grid-template-columns:1fr 1fr}.facts>div:nth-child(2){border-right:0;margin-right:0}.facts>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:900px){.fo-row{grid-template-columns:1fr;gap:24px}.flow.big{gap:22px}.flow.big li{min-height:0}}
@media(max-width:640px){.facts{grid-template-columns:1fr}.facts>div{border-right:0;margin-right:0;padding:18px 0;border-bottom:1px solid var(--line)}.facts>div:last-child{border-bottom:0}}
/* ---- store header: the signed-in account is the same gold initial as the dashboard, so both surfaces read as one product ---- */
.top .acct{display:inline-flex;align-items:center;gap:9px;max-width:220px;padding:3px 11px 3px 3px;border:1px solid var(--line2);border-radius:var(--r-s);color:var(--ink);font:600 13px var(--sans);transition:border-color .15s}.top .acct:hover{border-color:var(--gold);color:var(--ink)}
.top .acct .av{flex:none;width:26px;height:26px;display:grid;place-items:center;background:var(--gold);color:var(--gold-ink);font:800 12px var(--wm);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.top .acct .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---- design system overrides: headings in the display face at one weight, pills for every button, hairline cards, eyebrows in Inter ---- */
body{font:16px/1.5 var(--sans);letter-spacing:0}
h1,h2,.h2,h3,.ledger h3,.flow.big b,.fo-t h3,.pk .card b,.bt>b,.facts .num,.facts .big,.sheet header h3,.card.m b{font-family:var(--disp);font-weight:500;text-transform:none;letter-spacing:-.03em}
h1{font-size:clamp(40px,5.2vw,74px);line-height:1;letter-spacing:-.03em;margin:12px 0 16px}h1 span{color:var(--tert)}.hx h1 span{color:#c5c1bb}
h2,.h2{font-size:clamp(32px,3.4vw,48px);line-height:1.05;letter-spacing:-.03em}
.two .lede h2,.l-sec .head h2{font-size:clamp(30px,3.4vw,44px)}
h3,.ledger h3,.flow.big b,.fo-t h3{font-size:22px;line-height:1.3;letter-spacing:-.02em}
.lead,.l-sec .head p,.two .lede p{font-size:18px;line-height:1.6;color:var(--ink-2)}
.k,.eyebrow,.facts dt,.tile>small,.bt small,.prov .plabel{font:600 12px var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow::before,.k::before,.facts dt::before{content:none}.eyebrow{color:var(--tert)}
.flow.big li::before{font:500 24px/1 var(--disp);color:var(--accent)}
.wordmark{font:600 22px var(--disp);letter-spacing:-.02em;color:var(--ink)}
.top{border-bottom:1px solid var(--line)}.top .wrap{height:62px}.top nav{font:500 14px var(--sans);gap:4px}.top nav a{padding:8px}.top nav a.on::after{display:none}.top nav a.on{color:var(--ink)}
.btn{border-radius:var(--pill);height:40px;padding:0 20px;font:400 14px var(--sans);letter-spacing:.21px;transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
.btn:hover{border-color:var(--line2)}.btn.p{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}.btn.p:hover{background:var(--gold2);border-color:var(--gold2)}
.btn.lg{height:50px;padding:0 24px;font-size:14px}.btn.s{height:32px;padding:0 14px;font-size:12px;font-weight:600}.btn.xs{height:28px;padding:0 10px;font-size:11.5px;font-weight:600}
.btn.d{color:var(--danger);border-color:var(--danger-bg)}
.card,.pk .card,.models .card,.term,.mcard{border-radius:16px}.chip,.st{border-radius:var(--pill)}
.st{font:600 11px var(--sans);letter-spacing:.02em;text-transform:none;padding:3px 10px;border:0}
.st.paid,.st.ok{background:#e3efe8;color:var(--ok)}.st.pending{background:var(--tan2);color:var(--ink-2)}.st.failed,.st.bad,.st.expired{background:var(--danger-bg);color:#8a1620}
.card{box-shadow:none}.pk .card:hover,.models .card:hover{box-shadow:0 7.4px 13.2px rgba(0,0,0,.08);border-color:var(--line)}
.pk .card.hot{border-color:var(--ink);background:var(--tan)}
.facts{border-color:var(--line)}.facts .num,.facts .big{color:var(--ink);font-size:clamp(32px,3.2vw,44px)}
.fo-n{border-radius:var(--r-s);font:500 13px var(--mono)}.fo-n.bad{border-color:var(--danger);color:var(--danger)}.fo-n.ok{border-color:var(--ok);color:var(--ok)}
.site-foot{border-top:1px solid var(--line);background:var(--tan)}.site-foot .wordmark{color:var(--ink)}
.l-sec{padding:96px 0}.l-sec .head{margin-bottom:36px}
.top .acct{border-radius:var(--pill);padding:3px 12px 3px 4px}.top .acct .av{clip-path:none;border-radius:50%;background:var(--ink);color:#fff;font:600 12px var(--sans)}
.hx .btn{border-color:rgba(255,255,255,.3)}.hx .btn.p{background:#fff;border-color:#fff;color:#0e0d0c}.hx .btn.p:hover{background:#eaeae9;border-color:#eaeae9}
.hx-key{border-radius:16px}
/* the Zekon mark: a solid Z in a charcoal tile beside the wordmark (lockup); white tile on dark panels (inverse) */
.bmark,.top .bmark{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:9px;background:var(--ink);color:#fff}.bmark .mark{width:18px;height:18px}.top .brand{gap:9px}.hx .bmark,.dark .bmark{background:#fff;color:#0e0d0c}
/* ---- pricing: unlimited plans above token packs ---- */
.sec-h{font:500 28px/1.1 var(--disp);letter-spacing:-.03em;margin:40px 0 4px}.sec-h+.lead{margin-top:4px;margin-bottom:16px}
.pk.unl .card b{font-size:34px}.pk.unl .card .k{color:var(--ink-2)}.pk.unl .card.hot .k{color:var(--ink)}
.pk.unl .card .lim{list-style:none;margin:10px 0 14px;padding:12px 0 0;border-top:1px solid var(--line);display:grid;gap:6px;font-size:13px;color:var(--ink-2)}
.pk.unl .card .lim li{display:flex;align-items:center;gap:8px}.pk.unl .card .lim li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.pk.unl .card .btn{margin-top:auto}
.calc .out b.ok{color:var(--ok)}.calc .out b.bad{color:var(--danger)}
/* ---- design tokens from untitled.pen (design/tokens.css, 14 Oct 2026). Components use the semantic names; the primitives sit above them ---- */
:root{--white:#FFFFFF;--black:#111317;--charcoal-60:#2C2A25;--charcoal-50:#565551;--charcoal-40:#807F7C;--charcoal-30:#ABAAA8;--charcoal-10:#F4F4F4;--gray-90:#0E0D0C;--gray-50:#9A958D;--gray-40:#C5C1BB;--gray-10:#EAEAE9;--tan-10:#FAF8F5;--tan-20:#F5F2EE;--tan-30:#E8E3DE;--khaki-10:#F3F3F0;--khaki-20:#E1E2D9;--khaki-50:#9C9E8F;--sage-40:#96A58D;--sage-50:#63725A;--teal-10:#DCE6E9;--teal-20:#769399;--teal-90:#274249;--robin-10:#E0EBF0;--robin-20:#C0D7E2;--robin-50:#698490;--eggshell:#EAEBE4;--orange:#FF6E06;--blue:#075FF7;--cyan:#47FFF4;--error-text:#E62837;--error-bg:#F5B2B5;
--text-primary:var(--charcoal-60);--text-secondary:var(--charcoal-50);--text-tertiary:var(--gray-50);--text-disabled:var(--gray-40);--text-inverse:var(--white);--text-link:var(--black);--text-accent:var(--orange);
--bg-page:var(--white);--bg-subtle:var(--tan-20);--bg-card:var(--tan-10);--bg-muted:var(--khaki-10);--bg-inverse:var(--gray-90);--bg-overlay:#000000BF;
--border-default:var(--gray-10);--border-subtle:var(--tan-30);--border-strong:var(--charcoal-30);--border-inverse:var(--white);
--action-primary:var(--gray-90);--action-primary-compact:var(--charcoal-60);--action-secondary:var(--white);
--tint-charcoal-5:#2C2A250D;--tint-charcoal-12:#2C2A251F;--tint-charcoal-25:#2C2A2540;--tint-charcoal-30:#2C2A254D;--tint-orange-22:#FF6E0638;
--surface-dark:var(--charcoal-60);--glass-fill:#FFFFFF0D;--glass-border:#FFFFFF1F;--glass-tile:#FFFFFF1A;--glass-router:#FFFFFF14;
--font-display:"Instrument Sans","Inter",sans-serif;--font-body:"Inter",system-ui,sans-serif;--font-serif:"IBM Plex Serif",Georgia,serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace;
--radius-xs:5px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-pill:48px;--radius-full:999px;
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-9:36px;--space-10:40px;--space-12:48px;--space-16:64px;--space-24:96px;--space-30:120px;
--page-width:1440px;--container-width:1196px;--sidebar-width:264px}
/* ---- hero from the Pencil document (node euZV2): bg-subtle band, 1196 container, 92 px display headline, Monitor 1196x640 (node UjVeV) as a scaling SVG ---- */
.hz{background:var(--bg-subtle);color:var(--text-primary);padding:72px 0 var(--space-24)}
.hz .wrap{max-width:calc(var(--container-width) + 48px);padding:0 24px}
.hz-in{display:flex;flex-direction:column;gap:44px}
.hz-text{width:720px;max-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.hz-live{display:inline-flex;align-items:center;gap:var(--space-2);height:30px;padding:0 var(--space-3) 0 10px;border-radius:var(--radius-pill);background:var(--bg-page);border:1px solid var(--border-default);font:600 12px var(--font-body);color:var(--text-secondary)}
.hz-live i{width:7px;height:7px;border-radius:50%;background:var(--sage-40)}
.hz .hz-h{margin:0;display:flex;flex-direction:column;font:400 92px/.98 var(--font-display);letter-spacing:-3.2px;color:var(--text-primary)}
.hz .hz-h span{color:inherit}.hz .hz-h .t2{color:var(--teal-20)}
.hz-sub{margin:0;max-width:600px;font:400 18px/1.6 var(--font-body);color:var(--text-secondary)}
.hz-cta{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.hz .btn.lg{height:50px;padding:0 var(--space-6);gap:var(--space-2);font:400 14px/1.2 var(--font-body);letter-spacing:.21px;background:var(--action-secondary);border:1px solid var(--border-default);color:var(--text-primary)}
.hz .btn.p.lg{background:var(--action-primary);border-color:var(--action-primary);color:var(--text-inverse)}.hz .btn.p.lg:hover{background:var(--action-primary-compact);border-color:var(--action-primary-compact)}
.hz .arr{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mon{position:relative;aspect-ratio:1196/640;border-radius:var(--radius-xl);background:var(--surface-dark);border:1px solid var(--charcoal-50);box-shadow:0 24px 64px var(--tint-charcoal-25);overflow:hidden}
.mon svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.mon .glass{fill:var(--glass-fill);stroke:var(--glass-border)}.mon .av{fill:var(--glass-border)}.mon .tile{fill:var(--glass-tile)}
.mon .rtg{fill:var(--surface-dark)}.mon .rt{fill:var(--glass-router);stroke:var(--orange)}.mon feDropShadow{flood-color:var(--orange);flood-opacity:.22}
.mon .nm{font:600 14px var(--font-body);fill:var(--tan-10);dominant-baseline:central}.mon .ini{font:600 11px var(--font-mono);fill:var(--tan-10);text-anchor:middle;dominant-baseline:central}
.mon .rl{font:600 24px var(--font-display);letter-spacing:-.72px;fill:var(--tan-10);text-anchor:middle;dominant-baseline:central}
.mon .glow{fill:none;stroke:var(--teal-20);stroke-width:10;stroke-opacity:.08}.mon .line{fill:none;stroke:var(--teal-20);stroke-width:1.5;stroke-opacity:.55}
.mon .pk{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:140 860;animation:monflow 2.6s linear infinite}.mon .pk.in{stroke:var(--robin-10)}.mon .pk.out{stroke:var(--orange)}
@keyframes monflow{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.mon .pk{animation:none;stroke-dasharray:none;stroke-opacity:.35}}
@media(max-width:900px){.hz{padding:48px 0 64px}.hz-in{gap:32px}.hz .hz-h{font-size:clamp(44px,11vw,72px);letter-spacing:-.035em}.hz-sub{font-size:16px}}
/* ---- landing v2 from the Pencil document (node Xdsrd). Shared pieces first: 1196 container, eyebrow, pill buttons ---- */
@media(min-width:1200px){.wrap{max-width:1244px;padding-left:24px;padding-right:24px}}
.eyebrow,.k,.facts dt,.tile>small,.bt small,.prov .plabel{font:400 11px/1 var(--font-mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--text-secondary);margin:0}
.btn-dark,.btn-light,.btn-white,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:40px;padding:0 18px;border-radius:var(--radius-pill);font:500 14px/1.2 var(--font-body);letter-spacing:.21px;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.btn-dark{background:var(--charcoal-60);color:var(--text-inverse)}.btn-dark:hover{background:var(--action-primary);color:var(--text-inverse)}
.btn-light{background:var(--action-secondary);border:1px solid var(--border-default);color:var(--text-primary);font-weight:600}.btn-light:hover{border-color:var(--border-strong);color:var(--text-primary)}
.btn-dark.lg,.btn-light.lg{height:44px;padding:0 var(--space-5)}
.btn-white,.btn-ghost{height:50px;padding:0 var(--space-6);font-weight:400}
.btn-white{background:var(--white);color:var(--charcoal-60)}.btn-white:hover{background:var(--gray-10);color:var(--charcoal-60)}
.btn-ghost{border:1px solid var(--charcoal-50);color:var(--tan-10)}.btn-ghost:hover{border-color:var(--tan-10);color:var(--tan-10)}
.btn-white .arr{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* nav (node Iq5jW): 64 high, Relay Z lockup, centred links, language toggle, Masuk, Beli paket */
.top{background:var(--bg-page);border-bottom:1px solid var(--border-default)}
.top .wrap{height:63px;gap:var(--space-8)}
.bmark,.top .bmark,.hx .bmark,.dark .bmark{display:grid;place-items:center;width:28px;height:28px;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--text-primary)}.bmark .mark{width:28px;height:28px}.mark .dot{fill:var(--orange)}
.dark .bmark,.hx .bmark{color:var(--tan-10)}
.top .brand{gap:var(--space-2)}.wordmark{font:600 22px/1 var(--font-display);letter-spacing:-.66px;color:var(--text-primary)}
.top nav{gap:var(--space-1);font:500 14px/1 var(--font-body)}.top nav a{padding:var(--space-2);border-radius:var(--radius-xs);color:var(--text-primary)}.top nav a:hover{background:var(--bg-subtle);color:var(--text-primary)}.top nav a.on{color:var(--text-primary)}
.top-act{gap:10px}
.top .lang{display:inline-flex;gap:2px;padding:2px;border-radius:var(--radius-pill);background:var(--bg-subtle)}
.top .lang a,.top .lang span{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:var(--radius-pill);font:600 12px var(--font-body);color:var(--text-tertiary);cursor:default}
.top .lang a.on{background:var(--bg-page);border:1px solid var(--border-default);color:var(--text-primary)}
.top .masuk{display:inline-flex;align-items:center;height:38px;padding:0 var(--space-2);border-radius:var(--radius-xs);font:500 14px/1 var(--font-body);color:var(--text-primary)}.top .masuk:hover{background:var(--bg-subtle)}
.top .beli{display:inline-flex;align-items:center;height:40px;padding:0 var(--space-5);border-radius:var(--radius-pill);background:var(--charcoal-60);color:var(--text-inverse);font:500 14px/1.2 var(--font-body);letter-spacing:.21px}.top .beli:hover{background:var(--action-primary);color:var(--text-inverse)}
.top .acct{border-radius:var(--radius-pill);height:38px}
/* provider strip (node pKKw7): monochrome 32 px marks spread across the container */
.strip{padding:44px 0}.strip-in{display:flex;justify-content:center;align-items:center;gap:113.5px}
.strip-logo{width:32px;height:32px;color:var(--text-secondary);flex:none}.strip-logo.dim{opacity:.45}
/* manifesto (node JZKSW): statement left, four numbered points on hairlines right */
.mani{background:var(--bg-subtle);padding:var(--space-24) 0}.mani-in{display:flex;gap:var(--space-16);align-items:flex-start}
.mani-st{width:520px;flex:none;display:flex;flex-direction:column;gap:var(--space-6)}
.mani-h{margin:0;font:400 48px/1.05 var(--font-display);letter-spacing:-1.44px;color:var(--text-primary)}
.mani-d{margin:0;font:400 17px/1.6 var(--font-body);color:var(--text-secondary)}
.mani-pts{list-style:none;margin:0;padding:0;flex:1;min-width:0}
.mani-pts li{display:flex;gap:var(--space-6);padding:22px 0;border-top:1px solid var(--border-strong)}
.mani-pts .num{flex:none;width:36px;font:600 13px var(--font-mono);color:var(--orange)}
.mani-pts div{display:flex;flex-direction:column;gap:6px;min-width:0}
.mani-pts h3{margin:0;font:400 22px/1.2 var(--font-display);letter-spacing:-.66px;color:var(--text-primary)}
.mani-pts p{margin:0;font:400 14px/1.55 var(--font-body);color:var(--text-secondary)}
/* cara kerja (node nf1gE): head, a three-dot timeline, three steps with chips */
.cara{padding:var(--space-24) 0}.cara-in{display:flex;flex-direction:column;gap:var(--space-12)}
.cara-head{display:flex;justify-content:space-between;align-items:flex-end;gap:0}.cara-head>div{flex:1;min-width:0}.cara-head>div{display:flex;flex-direction:column;gap:14px}
.cara-h{margin:0;font:400 40px/1 var(--font-display);letter-spacing:-1.44px;color:var(--text-primary);white-space:nowrap}
.cara-note{margin:0;flex:none;font:400 12px var(--font-mono);color:var(--text-tertiary);white-space:nowrap}
.cara-tl{position:relative;height:24px}.tl-line{position:absolute;left:12px;right:12px;top:11px;height:2px;background:var(--border-default)}
.tl-dot{position:absolute;top:0;width:24px;height:24px;display:grid;place-items:center;border-radius:var(--radius-full);background:var(--bg-page);border:1px solid var(--border-strong);font:600 11px var(--font-mono);color:var(--text-secondary)}
.tl-dot:nth-of-type(1){left:0}.tl-dot:nth-of-type(2){left:50%;transform:translateX(-50%)}.tl-dot:nth-of-type(3){right:0}
.tl-dot.on{background:var(--orange);border-color:var(--orange);color:var(--text-inverse)}
.cara-list{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-12)}.cara-list li{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}
.cara-list h3{margin:0;font:400 24px/1.25 var(--font-display);letter-spacing:-.72px;color:var(--text-primary)}
.cara-list p{margin:0;font:400 15px/1.55 var(--font-body);color:var(--text-secondary)}
.cara-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);padding-top:6px}.cara-chips span{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:var(--radius-pill);background:var(--bg-subtle);font:500 12px var(--font-body);color:var(--text-secondary)}.cara-chips.mono span{font-family:var(--font-mono)}
/* harga (node QzVbU): four plan cards from the store's unlimited plans, featured card on an orange border */
.plans-sec{background:var(--bg-subtle);padding:var(--space-24) 0}.plans-in{display:flex;flex-direction:column;gap:var(--space-12)}
.plans-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-12)}.plans-text{width:720px;max-width:100%;display:flex;flex-direction:column;gap:14px}
.plans-h{margin:0;font:400 40px/1.05 var(--font-display);letter-spacing:-1.44px;color:var(--text-primary)}
.plans-d{margin:0;font:400 16px/1.55 var(--font-body);color:var(--text-secondary)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-4)}
.plan{display:flex;flex-direction:column;gap:28px;padding:28px;background:var(--bg-page);border:1px solid var(--border-default);border-radius:var(--radius-lg)}.plan.featured{border-color:var(--orange)}
.plan-top{display:flex;flex-direction:column;gap:6px}.plan-hd{display:flex;justify-content:space-between;align-items:center;height:28px}
.plan h3{margin:0;font:400 24px/1.1 var(--font-display);letter-spacing:-.6px;color:var(--text-primary)}
.plan-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:var(--radius-pill);background:#FF6E061F;font:400 10px/1 var(--font-mono);letter-spacing:.8px;text-transform:uppercase;color:var(--orange)}
.plan-blurb{margin:0;font:400 14px/1.5 var(--font-body);color:var(--text-secondary)}
.plan-price{display:flex;flex-direction:column;gap:6px}.plan-price p{margin:0}
.plan-price .price{font:400 36px/1.05 var(--font-display);letter-spacing:-1.1px;color:var(--text-primary)}
.plan-price .once{font:400 13px/1.4 var(--font-body);color:var(--text-tertiary)}
.plan-price .perday{font:400 12px/1.4 var(--font-mono);letter-spacing:.2px;color:var(--text-secondary)}
.plan-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:var(--radius-pill);background:var(--bg-page);border:1px solid var(--border-default);font:600 14px/1.2 var(--font-body);letter-spacing:.21px;color:var(--text-primary);transition:border-color .2s,background .2s}
.plan-cta:hover{border-color:var(--border-strong);color:var(--text-primary)}.plan.featured .plan-cta{background:var(--action-primary);border-color:var(--action-primary);color:var(--text-inverse)}.plan.featured .plan-cta:hover{background:var(--charcoal-60);border-color:var(--charcoal-60)}
.plans-foot{display:flex;flex-direction:column;gap:var(--space-4)}
.plans-incl{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) 28px;font:400 14px/1.2 var(--font-body);color:var(--text-secondary)}.plans-incl b{font-weight:600;color:var(--text-primary)}
.plans-incl span{display:inline-flex;align-items:center;gap:var(--space-2)}.plans-incl svg{width:16px;height:16px;fill:none;stroke:var(--teal-90);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plans-note{margin:0;display:inline-flex;align-items:center;gap:var(--space-2);font:400 13px var(--font-body);color:var(--text-secondary)}.plans-note svg{width:14px;height:14px;fill:none;stroke:var(--text-tertiary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* developer (node SUJ1b): charcoal code card with tabs on the left, three points and two buttons on the right */
.dev{padding:var(--space-24) 0}.dev-in{display:flex;align-items:center;gap:var(--space-16)}
.dc{width:640px;flex:none;background:var(--surface-dark);border-radius:var(--radius-xl);overflow:hidden;color:var(--tan-10)}
.dc-tabs{display:flex;justify-content:space-between;align-items:center;height:44px;padding:0 var(--space-5);border-bottom:1px solid var(--charcoal-50)}
.dc-tablist{display:flex;gap:2px;height:100%}.dc-tablist button{padding:0 var(--space-3);border:0;border-bottom:2px solid transparent;background:none;font:400 12px var(--font-mono);color:var(--charcoal-30);cursor:pointer}
.dc-tablist button.on{color:var(--tan-10);border-bottom-color:var(--orange)}.dc-tablist button:hover{color:var(--tan-10)}
.dc-copy{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:400 11px var(--font-mono);color:var(--charcoal-30);cursor:pointer}.dc-copy:hover{color:var(--tan-10)}
.dc-copy svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dc-body{margin:0;padding:22px 24px 26px;background:transparent;border:0;border-radius:0;font:400 13px/1.65 var(--font-mono);color:var(--tan-10);white-space:pre;overflow-x:auto}
.dc-body .u{color:var(--teal-10)}.dc-body .s{color:var(--tan-30)}.dc-body .c{color:var(--charcoal-30)}.dc-body .ok{color:var(--sage-40)}
.dev-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-6)}
.dev-h{margin:0;font:400 40px/1.05 var(--font-display);letter-spacing:-1.44px;color:var(--text-primary)}
.dev-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}.dev-pts li{display:flex;gap:14px}
.dev-pts .ic{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--bg-subtle)}.dev-pts .ic svg{width:17px;height:17px;fill:none;stroke:var(--text-primary);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dev-pts div{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.dev-pts h3{margin:0;font:600 16px/1.3 var(--font-body);color:var(--text-primary)}.dev-pts p{margin:0;font:400 14px/1.5 var(--font-body);color:var(--text-secondary)}
.dev-btns{display:flex;flex-wrap:wrap;gap:var(--space-3)}
/* faq (node G971T): two columns of hairline items */
.faq-sec{background:var(--bg-subtle);padding:var(--space-24) 0}.faq-in{display:flex;flex-direction:column;gap:var(--space-12)}
.faq-head{display:flex;flex-direction:column;gap:14px}.faq-h{margin:0;font:400 40px/1 var(--font-display);letter-spacing:-1.44px;color:var(--text-primary)}
.faq-cols{display:flex;gap:var(--space-12);align-items:flex-start}.faq-col{flex:1;min-width:0;margin:0}
.faq-col>div{display:flex;flex-direction:column;gap:10px;padding:var(--space-5) 0;border-top:1px solid var(--border-strong)}
.faq-col dt{font:600 16px/1.4 var(--font-body);color:var(--text-primary)}.faq-col dd{margin:0;font:400 14px/1.55 var(--font-body);color:var(--text-secondary)}
/* cta (node Qywhs): charcoal panel, title and buttons left, four facts right */
.cta-sec{padding:var(--space-24) 0}main:has(>.cta-sec){padding-bottom:0}
.cta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-16);padding:var(--space-16) 72px;background:var(--surface-dark);border-radius:var(--radius-2xl)}
.cta-text{width:620px;max-width:100%;display:flex;flex-direction:column;gap:var(--space-5)}
.cta-h{margin:0;font:400 56px/1 var(--font-display);letter-spacing:-1.68px;color:var(--tan-10)}
.cta-d{margin:0;font:400 17px/1.6 var(--font-body);color:var(--tan-30)}
.cta-btns{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.cta-facts{width:336px;flex:none;margin:0;display:flex;flex-direction:column;gap:14px}
.cta-facts>div{display:flex;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--charcoal-50)}
.cta-facts dt{font:400 13px var(--font-body);color:var(--charcoal-30);white-space:nowrap}.cta-facts dd{margin:0;font:600 13px var(--font-body);color:var(--tan-10);text-align:right;white-space:nowrap}
/* footer (node t8dEN) */
.ft{border-top:1px solid var(--border-default);background:var(--bg-page);padding:var(--space-16) 0 var(--space-10)}.ft-in{display:flex;flex-direction:column;gap:var(--space-10)}
.ft-top{display:flex;gap:var(--space-12)}.ft-brand{width:380px;flex:none;display:flex;flex-direction:column;gap:var(--space-4)}.ft-brand p{margin:0;font:400 14px/1.5 var(--font-body);color:var(--text-secondary)}
.ft-cols{flex:1;display:flex;gap:var(--space-6)}.ft-cols>div{flex:1;display:flex;flex-direction:column;gap:14px}
.ft-cols b{font:600 14px/1 var(--font-body);color:var(--text-primary)}.ft-cols a{font:400 14px/1 var(--font-body);color:var(--text-secondary)}.ft-cols a:hover{color:var(--text-primary)}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding-top:var(--space-5);border-top:1px solid var(--border-default)}
.ft-bottom .copy{font:400 12px var(--font-mono);color:var(--text-tertiary)}.ft-bottom .contact{font:400 12px var(--font-body);color:var(--text-tertiary)}
/* landing v2 on narrow screens: sections stack */
@media(max-width:1100px){.mani-in,.dev-in{flex-direction:column;align-items:stretch}.mani-st,.dc{width:auto}.plans{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.cta{flex-direction:column;align-items:flex-start;padding:40px}.cta-facts{width:100%}}
@media(max-width:900px){.mani,.cara,.plans-sec,.dev,.faq-sec,.cta-sec{padding:64px 0}.mani-h,.cara-h,.plans-h,.dev-h,.faq-h{font-size:32px;letter-spacing:-1px}.cta-h{font-size:40px}.cara-head,.plans-head{flex-direction:column;align-items:flex-start;gap:var(--space-5)}.cara-list,.faq-cols{flex-direction:column}.cara-tl{display:none}.ft-top{flex-direction:column}.ft-brand{width:auto}.strip-in{flex-wrap:wrap;justify-content:center}}
@media(max-width:560px){.plans{grid-template-columns:1fr}.ft-cols{flex-direction:column}.dc-body{font-size:12px}}