:root{--y:#ffcc1a;--ink:#111;--pap:#fbf7ec;--w:#fff;--v:#5a38f0;--vl:#e6dfff;--m:#7ff0c2;--mut:#3d3a33;
--disp:"Anybody","Arial Black",Impact,sans-serif;--txt:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pap);color:var(--ink);font:400 17px/1.6 var(--txt);counter-reset:band}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--v);outline-offset:3px}
.b-violet :focus-visible,.b-ink :focus-visible{outline-color:var(--y)}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:12px;top:-80px;z-index:99;background:var(--ink);color:var(--y);padding:12px 16px;font:700 14px var(--mono)}
.skip:focus{top:12px}

/* buttons: slabs that collapse onto their shadow */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.55rem 1.25rem;font:800 1rem/1.15 var(--disp);font-stretch:105%;
background:var(--v);color:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);text-decoration:none;text-align:center;cursor:pointer;border-radius:0;transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--ink)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.btn.big{min-height:58px;padding:.7rem 1.6rem;font-size:1.12rem}
.btn.alt,.btn.ghost{background:var(--w);color:var(--ink)}
.btn.sm{min-height:44px;padding:.4rem .9rem;font-size:.9rem}
.btn[disabled]{opacity:.6;cursor:wait}
.b-violet .btn{background:var(--y);color:var(--ink)}
.b-ink .btn{background:var(--y);color:var(--ink);border-color:var(--pap);box-shadow:6px 6px 0 var(--v)}
.b-ink .btn:hover{box-shadow:3px 3px 0 var(--v)}

/* header */
.top{position:sticky;top:0;z-index:50;background:var(--pap);border-bottom:3px solid var(--ink)}
.top-in{display:flex;align-items:center;gap:14px;min-height:66px;position:relative}
.logo{display:inline-flex;align-items:center;gap:10px;min-width:0;min-height:44px;text-decoration:none;font:900 1.02rem/1 var(--disp);font-stretch:82%;letter-spacing:.01em}
.logo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mark{width:34px;height:34px;flex:none;overflow:visible}
.top .logo{flex:1}
.burger{flex:none;width:46px;height:46px;display:grid;place-content:center;gap:5px;background:var(--y);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;padding:0}
.burger i{display:block;width:20px;height:3px;background:var(--ink)}
.burger[aria-expanded=true]{transform:translate(3px,3px);box-shadow:none;background:var(--ink)}
.burger[aria-expanded=true] i{background:var(--y)}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--pap);border-bottom:3px solid var(--ink);padding:18px 20px 24px}
.nav.open{display:block}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.keys a{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 14px;background:var(--w);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
font:700 .82rem var(--mono);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;transition:transform .08s,box-shadow .08s}
.keys a:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.keys a[aria-current]{background:var(--ink);color:var(--y);transform:translate(4px,4px);box-shadow:none}
.nav .cta{width:100%}
@media(min-width:980px){
.burger{display:none}
.nav{display:flex;position:static;align-items:center;gap:22px;padding:0;border:0;background:none}
.keys{display:flex;gap:10px;margin:0}
.keys a{min-height:44px}
.nav .cta{width:auto}
}

/* bands + the patch cable */
.band{position:relative;border-top:3px solid var(--ink);padding:66px 0 62px;--cab:var(--ink);--jx:20px;counter-increment:band}
.band>.wrap{position:relative;z-index:2}
.band::before{content:counter(band,decimal-leading-zero);position:absolute;z-index:3;left:var(--jx);top:-23px;width:42px;height:42px;border:3px solid var(--ink);
background:var(--pap);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font:700 13px/36px var(--mono);text-align:center}
.band::after{content:"";position:absolute;z-index:1;left:calc(var(--jx) + 18px);width:6px;top:0;bottom:0;pointer-events:none;
background:linear-gradient(var(--cab),var(--cab)) top/100% 44px no-repeat,linear-gradient(var(--cab),var(--cab)) bottom/100% 34px no-repeat}
main>.band:first-child{border-top:0;padding-top:38px}
main>.band:first-child::before{content:none}
main>.band:first-child::after{background-size:0 0,100% 34px}
.b-yellow{background:var(--y)}
.b-paper{background:var(--pap)}
.b-white{background:var(--w)}
.b-mint{background:var(--m)}
.b-violet{background:var(--v);color:#fff}
.b-ink{background:var(--ink);color:var(--pap);--cab:var(--y)}
.b-ink::before{background:var(--y)}
.b-violet::before{background:var(--y)}
.b-yellow::before{background:var(--w)}
.strip{position:relative;background:var(--ink);color:var(--pap);border-top:3px solid var(--ink)}
@media(min-width:1340px){
.band{--jx:calc(50% - 580px - 80px)}
.band::after{background:var(--cab)}
.strip::after{content:"";position:absolute;left:calc(50% - 580px - 62px);width:6px;top:0;bottom:0;background:var(--y)}
main>.band:first-child::after{top:0}
}
.foot::after{display:none}
.foot::before{background:var(--ink);color:var(--y)}

/* type */
h1{font:900 clamp(2.05rem,4.5vw,3.7rem)/1.02 var(--disp);font-stretch:96%;letter-spacing:-.015em;overflow-wrap:break-word}
.sh{margin-bottom:34px}
.sh h2{display:inline;font:900 clamp(1.75rem,3.6vw,2.9rem)/1.12 var(--disp);font-stretch:118%;text-transform:uppercase;letter-spacing:-.01em;
background:var(--w);color:var(--ink);box-shadow:0 0 0 3px var(--ink),6px 6px 0 3px var(--ink);padding:.05em .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.b-violet .sh h2{background:var(--y)}
.b-yellow .sh h2,.b-mint .sh h2{background:var(--ink);color:var(--y);box-shadow:0 0 0 3px var(--ink),6px 6px 0 3px var(--v)}
.lead{font-size:1.14rem;line-height:1.55;max-width:38em;margin-top:20px}
.tag{display:inline-block;background:var(--ink);color:var(--y);font:700 .78rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:7px 11px}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:700 .78rem var(--mono);text-transform:uppercase;letter-spacing:.05em;margin-bottom:18px}
.crumb a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px;text-decoration-thickness:2px}
.crumb b{background:var(--ink);color:var(--y);padding:5px 9px;font-weight:700}
.acts{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}

/* home hero */
.hero-g{display:grid;gap:36px}
.hero-g>*,.key-g>*,.price-g>*,.doc-g>*,.doc-h>*,.art-h>*,.faq-g>*,.cta-g>*,.nf-g>*{min-width:0}
.hero .tag{margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.chips li{display:flex;align-items:center;gap:9px;background:var(--w);border:3px solid var(--ink);padding:7px 12px 7px 9px;font:700 .82rem/1.3 var(--mono)}
.chips li::before{content:"";flex:none;width:12px;height:12px;background:var(--v);border:2px solid var(--ink)}
.chips li:nth-child(2)::before{background:var(--m)}
.chips li:nth-child(3)::before{background:var(--y)}
.patch{display:block;width:100%;height:auto}
.plugged{position:relative;padding-top:4px}
.plugged::before{content:"";position:absolute;left:87.31%;width:1.54%;min-width:5px;top:-2px;height:60px;background:var(--ink)}
.plugged::after{content:"";position:absolute;left:calc(88.08% - 13px);top:44px;width:26px;height:20px;background:var(--m);border:3px solid var(--ink);z-index:2}
.tab{display:inline-block;position:relative;z-index:1;background:var(--ink);color:var(--y);font:700 .78rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;padding:10px 14px;min-height:40px;max-width:76%}
@media(min-width:980px){
.hero-g{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}
main>.band.hero{padding-top:54px;padding-bottom:70px}
}

/* code */
.codebox{position:relative;background:var(--w);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.codetabs{display:flex;gap:8px;padding:10px 10px 12px;border-bottom:3px solid var(--ink);background:var(--w);overflow-x:auto}
.codetabs button{min-height:44px;padding:0 16px;background:var(--w);color:var(--ink);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:700 .82rem var(--mono);cursor:pointer;border-radius:0}
.codetabs button[aria-selected=true]{background:var(--ink);color:var(--y);transform:translate(3px,3px);box-shadow:none}
pre.code{position:relative;margin:0;background:#141414;color:#f4f0e4;font:400 .86rem/1.65 var(--mono);padding:54px 18px 20px;overflow-x:auto;max-width:100%;tab-size:2;border:3px solid var(--ink)}
.codebox pre.code{border:0}
pre.code code{font:inherit;background:none;border:0;padding:0;white-space:pre;color:inherit}
pre.code .k{color:var(--y)}
pre.code .s{color:var(--m)}
pre.code .c{color:#a9a595}
.copy{position:absolute;top:8px;right:8px;min-height:36px;min-width:64px;padding:0 12px;background:var(--y);color:var(--ink);border:2px solid var(--ink);font:700 .74rem var(--mono);text-transform:uppercase;cursor:pointer;border-radius:0}
.copy::after{content:"";position:absolute;inset:-6px}
.copy:hover{background:var(--w)}
pre.code:focus-visible{outline-color:var(--v)}

/* facts strip */
.facts{display:grid;grid-template-columns:1fr 1fr}
.facts>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:2px;padding:18px 14px 18px 0;border-bottom:3px solid #333;min-width:0}
.facts>div:nth-child(even){padding-left:14px;border-left:3px solid #333}
.facts>div:last-child{grid-column:1/-1;border-bottom:0;border-left:0;padding-left:0}
.facts dd{font:900 1.9rem/1 var(--disp);font-stretch:110%;color:var(--y)}
.facts dt{font:400 .74rem/1.35 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:#e9e4d6}
@media(min-width:860px){
.facts{grid-template-columns:repeat(5,1fr)}
.facts>div,.facts>div:nth-child(even),.facts>div:last-child{grid-column:auto;padding:22px 16px;border-bottom:0;border-left:3px solid #333}
.facts>div:first-child{border-left:0;padding-left:0}
.facts dd{font-size:2.3rem}
}

/* blocks */
.g2,.g3,.g4{display:grid;gap:26px;counter-reset:b}
.blk{position:relative;min-width:0;background:var(--w);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:26px 22px 24px;counter-increment:b}
.blk h3,.blk h2{font:800 1.22rem/1.2 var(--disp);font-stretch:100%;margin-bottom:10px;overflow-wrap:anywhere}
.blk p{font-size:1rem;color:var(--mut)}
.ix{display:block;width:44px;height:30px;margin:-26px 0 18px -22px;background:var(--y);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);font:700 .78rem/27px var(--mono);text-align:center}
.ix::before{content:counter(b,decimal-leading-zero)}
.blk:nth-child(3n+2) .ix{background:var(--v);color:#fff}
.blk:nth-child(3n) .ix{background:var(--m)}
.feats .blk:nth-child(4n+1),.feats .blk:nth-child(4n+4){box-shadow:6px 6px 0 var(--v)}
@media(min-width:700px){.g2,.g3,.g4{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g4 .blk{padding:24px 18px}.g4 .ix{margin-left:-18px}}

/* steps: three sockets on one cable */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:40px;top:0;bottom:0;width:6px;background:var(--ink)}
.step{padding-top:24px;box-shadow:6px 6px 0 var(--ink)}
.step .ix{width:64px;height:64px;margin:-24px 0 18px -22px;background:var(--y)!important;color:var(--ink)!important;font:900 1.7rem/58px var(--disp);position:relative}
.step .ix::after{content:"";position:absolute;right:-17px;top:22px;width:14px;height:14px;background:var(--m);border:3px solid var(--ink)}
@media(min-width:1000px){.steps::before{left:0;right:0;top:54px;bottom:auto;width:auto;height:6px}.steps{gap:38px}}

/* use cases */
.use{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;padding:22px;box-shadow:6px 6px 0 var(--ink)}
.use .ix{grid-row:1/span 2;width:52px;height:52px;margin:0;border:3px solid var(--ink);line-height:46px;font-size:.9rem}
.use h3,.use p{grid-column:2}
.use:nth-child(odd) .ix{background:var(--ink)!important;color:var(--y)!important}
.use:nth-child(even) .ix{background:var(--v)!important;color:#fff!important}
@media(min-width:700px){.uses .use:nth-child(even){transform:translateY(18px)}.uses{padding-bottom:18px}}

/* body text as ruled rows */
.rsec{border-top:3px solid var(--ink);padding:30px 0 34px}
.rsec:first-child{border-top:0;padding-top:0}
.rsec:last-child{padding-bottom:0}
.rsec>h2{font:900 clamp(1.45rem,2.6vw,2.05rem)/1.12 var(--disp);font-stretch:100%;margin-bottom:16px;overflow-wrap:break-word;scroll-margin-top:90px}
.rsec>h2::before{content:"";display:block;width:54px;height:14px;background:var(--y);border:3px solid var(--ink);margin-bottom:14px}
.rsec:nth-child(even)>h2::before{background:var(--v)}
.rsec:nth-child(3n)>h2::before{background:var(--m)}
@media(min-width:900px){
.rsec{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:56px}
.rsec>*{grid-column:2;min-width:0}
.rsec>h2{grid-column:1;grid-row:1/span 30;align-self:start;margin:0}
.rsec.nohead>*{grid-column:1/-1}
}
.rsec>:not(h2),.prose>*{max-width:46em}
.rsec p,.prose p{margin:0 0 1.05em}
.rsec>:last-child,.prose>:last-child{margin-bottom:0}
.rsec ul,.rsec ol,.prose ul,.prose ol{margin:0 0 1.2em;padding-left:0;counter-reset:li}
.rsec li,.prose li{position:relative;padding-left:30px;margin-bottom:.5em;counter-increment:li}
.rsec ul>li::before,.prose ul>li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:12px;background:var(--y);border:2px solid var(--ink)}
.rsec ol>li::before,.prose ol>li::before{content:counter(li);position:absolute;left:0;top:.2em;width:22px;height:22px;background:var(--ink);color:var(--y);font:700 .72rem/22px var(--mono);text-align:center}
.rsec a,.prose a,.ans a{color:#3d1fd0;font-weight:600;text-decoration-thickness:2px;text-underline-offset:3px}
.rsec a:hover,.prose a:hover{background:var(--y);color:var(--ink)}
.rsec :not(pre)>code,.prose :not(pre)>code,.ans code{font:400 .86em var(--mono);background:var(--w);border:2px solid var(--ink);padding:.05em .32em;overflow-wrap:anywhere}
.b-white .rsec :not(pre)>code{background:#fff3c4}
.rsec pre.code,.prose pre.code{margin:1.4em 0 1.6em;box-shadow:6px 6px 0 var(--v);max-width:none}
.rsec h3,.prose h3{font:800 1.18rem/1.25 var(--disp);margin:1.6em 0 .6em}
.rsec table,.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1.4em 0 1.6em;font-size:.95rem;border:3px solid var(--ink);background:var(--w);width:max-content}
.rsec th,.prose th{background:var(--ink);color:var(--y);font:700 .76rem var(--mono);text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:11px 14px}
.rsec td,.prose td{padding:10px 14px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);vertical-align:top}
.rsec td:last-child,.prose td:last-child{border-right:0}
.rsec blockquote,.prose blockquote{margin:1.4em 0;padding:16px 20px;background:var(--y);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.rsec strong,.prose strong{font-weight:700}

/* docs + article */
.doc-h{display:grid;gap:30px;align-items:end}
.endp{background:var(--w);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:20px}
.endp dl>div{padding:0 0 14px;margin-bottom:14px;border-bottom:3px solid var(--ink)}
.endp dt{font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--mut)}
.endp dd{font:700 .8rem/1.45 var(--mono);overflow-wrap:anywhere}
.endp .btn{width:100%}
.doc-g{display:grid;gap:40px}
.side{display:grid;gap:26px;align-content:start}
.toc{background:var(--w);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.toc-h{background:var(--ink);color:var(--y);font:700 .78rem var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:11px 14px}
.toc ol{counter-reset:t}
.toc li{counter-increment:t;border-top:2px solid var(--ink)}
.toc li:first-child{border-top:0}
.toc a{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;min-height:44px;padding:8px 12px 8px 10px;font-size:.92rem;line-height:1.3;font-weight:500;text-decoration:none}
.toc a::before{content:counter(t,decimal-leading-zero);font:700 .72rem var(--mono);color:var(--mut)}
.toc a:hover{background:var(--y)}
.sidecard{background:var(--m);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:18px}
.sc-h{font:800 1.12rem/1.2 var(--disp);margin-bottom:6px}
.sidecard p+p{font-size:.95rem;margin-bottom:14px}
.sidecard .btn{width:100%}
.prose h2{font:900 clamp(1.5rem,2.6vw,2.05rem)/1.14 var(--disp);margin:2.1em 0 .7em;padding-top:22px;border-top:3px solid var(--ink);scroll-margin-top:84px;overflow-wrap:break-word}
.prose h2::before{content:"";display:block;width:54px;height:14px;background:var(--y);border:3px solid var(--ink);margin-bottom:14px}
.prose>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose.read{font-size:1.1rem;line-height:1.75}
.prose.read>*{max-width:38em}
.prose.read>pre.code,.prose.read>table{max-width:none}
.prose.narrow{max-width:46em}
.art-h{display:grid;gap:34px}
.art-h .tag{margin-top:22px}
.take{background:var(--w);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--v);padding:0 20px 8px;align-self:start}
.take h2{display:inline-block;margin:0 0 4px -20px;background:var(--ink);color:var(--y);font:700 .8rem var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:10px 14px}
.take ol{counter-reset:k}
.take li{counter-increment:k;display:grid;grid-template-columns:38px minmax(0,1fr);padding:13px 0;border-top:2px solid var(--ink);font-size:.98rem;line-height:1.45}
.take li:first-child{border-top:0}
.take li::before{content:counter(k,decimal-leading-zero);font:900 1.05rem/1.4 var(--disp);color:var(--v)}
@media(min-width:980px){
.doc-h{grid-template-columns:minmax(0,1fr) 390px;gap:56px}
.doc-g{grid-template-columns:284px minmax(0,1fr);gap:60px}
.side{position:sticky;top:92px;max-height:calc(100vh - 108px);overflow:auto;padding:0 8px 8px 0}
.art-h{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:60px;align-items:start}
}

/* key page */
.key-g{display:grid;gap:30px}
.keyhero h1{font-size:clamp(1.95rem,4vw,3.3rem)}
.mini{display:none}
.key-f{position:relative}
.form{position:relative;background:var(--w);border:3px solid var(--ink);box-shadow:10px 10px 0 var(--ink);padding:22px 20px 24px;scroll-margin-top:90px}
.tabs2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
.tabs2 button{min-height:48px;padding:0 10px;background:var(--w);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font:700 .82rem var(--mono);text-transform:uppercase;letter-spacing:.03em;cursor:pointer;border-radius:0}
.tabs2 button[aria-selected=true]{background:var(--ink);color:var(--y);transform:translate(4px,4px);box-shadow:none}
.msg:empty{display:none}
.msg{margin:0 0 16px;padding:12px 14px;font-weight:600;font-size:.95rem;border:3px solid var(--ink);background:var(--m)}
.msg.err{background:#ffd9d2;color:#7a1200;border-color:#7a1200;box-shadow:4px 4px 0 #7a1200}
.row{margin-bottom:16px}
.row label,.calc label{display:block;font:700 .76rem var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
.row input,.calc input{width:100%;min-width:0;height:54px;padding:0 14px;background:var(--pap);color:var(--ink);border:3px solid var(--ink);border-radius:0;font:500 1.05rem var(--mono);appearance:none;-webkit-appearance:none}
.row input:focus,.calc input:focus{outline:0;background:#fff3c4;box-shadow:4px 4px 0 var(--v)}
.note{font-size:.86rem;line-height:1.45;color:var(--mut);margin-top:8px}
.form .btn[data-submit]{width:100%;min-height:60px;font-size:1.08rem;margin-top:6px}
.form form>.note{margin-top:16px;padding-left:22px;position:relative}
.form form>.note::before{content:"";position:absolute;left:0;top:.28em;width:12px;height:12px;background:var(--m);border:2px solid var(--ink)}
.keyout{display:none}
.keyout.on{display:block}
.keyout h3{font:900 1.4rem/1.15 var(--disp);margin-bottom:14px}
.keybox{display:flex;align-items:center;gap:12px;background:var(--ink);padding:12px 12px 12px 14px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--y)}
.keybox span{flex:1;min-width:0;font:700 .92rem/1.45 var(--mono);color:var(--y);word-break:break-all}
.keybox .btn{flex:none;background:var(--y);color:var(--ink);box-shadow:none}
.keyout>p{margin-top:16px;font-size:.96rem;line-height:1.9;overflow-wrap:anywhere}
.keyout>p.note{line-height:1.45;margin-top:12px}
.keyout code{font:700 .86em var(--mono);background:#fff3c4;border:2px solid var(--ink);padding:.05em .3em}
.mut{color:var(--mut)}
.acts{align-items:center}
.keyout .acts{margin-top:20px;gap:12px}
@media(min-width:980px){
.key-g{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:start}
main>.band.keyhero{padding-top:46px;padding-bottom:80px}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:30px;border:3px solid var(--ink);background:var(--w);max-width:30em}
.mini li{display:flex;flex-direction:column;padding:12px 14px;border-top:3px solid var(--ink);min-width:0}
.mini li:nth-child(-n+2){border-top:0}
.mini li:nth-child(even){border-left:3px solid var(--ink)}
.mini b{font:900 1.45rem/1.1 var(--disp)}
.mini span{font:400 .72rem/1.35 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
.form{padding:28px 28px 30px}
.lead-in{position:absolute;right:54px;top:-49px;width:8px;height:52px;background:var(--ink)}
.lead-in::after{content:"";position:absolute;left:-10px;bottom:-12px;width:28px;height:22px;background:var(--m);border:3px solid var(--ink)}
.key-f .form{z-index:0}
.lead-in{z-index:1}
}

/* pricing */
.price-g{display:grid;gap:34px}
.pricehero .tag{margin-top:22px}
.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.tile{grid-column:span 2;min-width:0;background:var(--ink);color:var(--pap);border:3px solid var(--ink);padding:12px 10px;display:flex;flex-direction:column;gap:4px}
.tile b{font:900 1.3rem/1 var(--disp);color:var(--y);overflow-wrap:anywhere}
.tile span{font:400 .68rem/1.35 var(--mono);text-transform:uppercase;letter-spacing:.03em}
.tile.big{grid-column:span 3;background:var(--w);color:var(--ink);box-shadow:6px 6px 0 var(--ink);padding:18px 14px 16px;margin-bottom:8px}
.tile.big+.tile.big{background:var(--m)}
.tile.big b{font-size:clamp(2.1rem,6vw,3.6rem);color:var(--ink);font-stretch:92%}
.tile.big span{font-size:.74rem;font-weight:700}
.calc{display:grid;gap:22px}
.calc>div{min-width:0;background:var(--w);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:18px}
.calc input{font-size:1.25rem;font-weight:700;height:60px}
.calc>div:last-child{background:var(--y);display:flex;flex-direction:column;justify-content:space-between}
.calc output{display:block;font:900 clamp(2.6rem,7vw,3.8rem)/1 var(--disp);font-stretch:92%;overflow-wrap:anywhere}
.ex p{font-size:.96rem;overflow-wrap:anywhere}
@media(min-width:860px){.calc{grid-template-columns:1fr 1fr 1.15fr}}
@media(min-width:980px){.price-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}}

/* faq */
.faq-g{display:grid;gap:8px}
.qa{display:grid;gap:16px}
details{background:var(--w);color:var(--ink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:12px 14px 12px 18px;cursor:pointer;list-style:none;font:800 1.06rem/1.3 var(--disp)}
summary::-webkit-details-marker{display:none}
summary i{flex:none;position:relative;width:34px;height:34px;background:var(--y);border:3px solid var(--ink)}
summary i::before,summary i::after{content:"";position:absolute;left:6px;right:6px;top:11px;height:4px;background:var(--ink)}
summary i::after{transform:rotate(90deg)}
details[open] summary{background:var(--ink);color:var(--y)}
details[open] summary i{background:var(--v);border-color:var(--y)}
details[open] summary i::before{background:#fff}
details[open] summary i::after{display:none}
.ans{padding:16px 18px 18px;border-top:3px solid var(--ink)}
@media(min-width:980px){.faq-g{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}.faq .sh{position:sticky;top:96px}}

/* closing band */
.cta-g{display:grid;gap:30px;align-items:center}
.cta h2{font:900 clamp(2rem,4.6vw,3.5rem)/1.04 var(--disp);font-stretch:110%;color:var(--y);text-transform:uppercase}
.cta p{font-size:1.12rem;margin-top:14px;max-width:34em}
.cta-a{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.holes{display:flex;gap:10px}
.holes i{width:26px;height:26px;border:3px solid var(--pap)}
.holes i:nth-child(2){background:var(--v)}
.holes i:nth-child(3){background:var(--m)}
.holes i:nth-child(4){background:var(--y)}
@media(min-width:900px){.cta-g{grid-template-columns:minmax(0,1.5fr) auto;gap:60px}.cta-a{align-items:flex-end}}

/* 404 + legal */
.nf-g{display:grid;gap:30px;align-items:center}
.loose{display:block;width:100%;max-width:420px;height:auto}
main>.band.nf{padding-top:70px;padding-bottom:90px}
@media(min-width:900px){.nf-g{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}

/* footer */
.foot{background:var(--pap);padding-bottom:40px}
.foot-g{display:grid;gap:30px}
.foot-b p{margin:8px 0 18px;max-width:26em}
.foot-l{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-content:start}
.foot-l a{display:flex;align-items:center;min-height:44px;font-weight:600;text-decoration-thickness:2px;text-underline-offset:4px;border-top:2px solid var(--ink)}
.foot-l a:hover{background:var(--y)}
.legal-n{grid-column:1/-1;font:400 .76rem/1.6 var(--mono);color:var(--mut);border-top:3px solid var(--ink);padding-top:18px}
@media(min-width:860px){.foot-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 60px}}

@media(max-width:420px){
.btn.big{width:100%}
.acts{gap:14px}
.sh{margin-bottom:28px}
.logo{font-size:.9rem;font-stretch:75%;gap:8px}
.mark{width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
