:root{--paper:#fafdff;--bar:#eef6fc;--white:#ffffff;--ink:#142f40;--mut:#4d697c;--v:#2262c3;--vd:#164b9a;--vl:#b8dcff;--rule:#aecde6;--panel:#0f2433;--panel2:#1a374a;--dim:#b0c8dc;--hole:#224258;--side:256px;--strip:30px;--pad:clamp(22px,4vw,60px);
--disp:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;--body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0313rem/1.65 var(--body);overflow-wrap:break-word}
img,svg{max-width:100%}
a{color:var(--v);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--vd)}
:focus-visible{outline:3px solid #7bbeff;outline-offset:2px;border-radius:2px}
h1,h2,h3{font-family:var(--disp);line-height:1.08;margin:0;letter-spacing:-.015em}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--white);color:var(--ink);padding:12px 16px;border:2px solid var(--ink)}
.skip:focus{left:8px}
.mut{color:var(--mut)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;background:var(--v);color:#ffffff;border:2px solid var(--v);border-radius:3px;font:600 .75rem/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;text-align:center;cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{background:var(--vd);border-color:var(--vd);color:#ffffff}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn.big{min-height:54px;padding:0 28px;font-size:.8125rem}
.btn.sm{min-height:44px;padding:0 14px;font-size:.6875rem;box-shadow:0 3px 0 var(--ink)}
.btn.ghost{background:var(--white);color:var(--ink);border-color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:var(--bar);color:var(--ink);border-color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- control panel (sidebar) ---------- */
.side{position:fixed;inset:0 auto 0 0;width:var(--side);z-index:20;background:var(--panel);color:#ffffff;display:flex;flex-direction:column;padding:26px 20px 22px;border-right:6px solid #081722;overflow-y:auto}
.side-top{padding-bottom:22px;margin-bottom:18px;border-bottom:1px solid #2a4e66;position:relative}
.side-top::after{content:"";position:absolute;left:0;bottom:8px;width:72px;height:5px;background:repeating-linear-gradient(90deg,#315770 0 3px,transparent 3px 7px)}
.logo{display:flex;align-items:center;gap:12px;color:#ffffff;text-decoration:none;font:800 1.2rem/1.05 var(--disp);letter-spacing:-.01em;min-height:44px}
.logo:hover{color:#ffffff}
.logo .mark{flex:none;border-radius:3px}
.top-cta,.burger{display:none}
.nav{display:flex;flex-direction:column;flex:1;gap:3px;min-height:0}
.nav>a:not(.btn){display:flex;align-items:center;gap:12px;min-height:46px;padding:0 10px;color:var(--dim);text-decoration:none;font:600 .95rem/1.2 var(--body);border-radius:3px;border:1px solid transparent}
.nav>a:not(.btn) span{flex:1;min-width:0}
.nav>a:not(.btn) b{font:400 .625rem var(--mono);color:#7397b0}
.led{width:9px;height:9px;border-radius:50%;background:#315770;flex:none;box-shadow:inset 0 0 0 1px #081722}
.nav>a:not(.btn):hover{color:#ffffff;background:var(--panel2)}
.nav>a[aria-current]{color:#ffffff;background:var(--panel2);border-color:#315770}
.nav>a[aria-current] .led{background:var(--vl);box-shadow:0 0 0 3px rgba(184,220,255,.22),0 0 12px var(--vl)}
.nav>a[aria-current] b{color:var(--vl)}
.btn.key{margin-top:18px;background:var(--vl);border-color:var(--vl);color:var(--panel);box-shadow:0 4px 0 #5592c9;min-height:52px}
.btn.key:hover{background:#ffffff;border-color:#ffffff;color:var(--panel)}
.lcd{margin-top:auto;padding:12px;background:#081722;border:1px solid #2a4e66;border-radius:3px;font:400 .625rem/1.6 var(--mono);color:var(--vl);display:grid;gap:2px;word-break:break-all}
.lcd span:last-child{color:#86a6bd}
.nav .btn.key+.lcd{margin-top:auto}
.nav .btn.key{margin-bottom:22px}

/* ---------- the sheet ---------- */
.sheet{margin-left:var(--side);position:relative;min-height:100vh;padding:0 var(--strip);display:flex;flex-direction:column;background:repeating-linear-gradient(180deg,transparent 0 64px,var(--bar) 64px 128px)}
.sheet::before,.sheet::after{content:"";position:absolute;top:0;bottom:0;width:var(--strip);background:radial-gradient(circle at 50% 14px,var(--hole) 0 5px,transparent 5.6px) 0 0/var(--strip) 28px repeat-y,var(--paper);z-index:2}
.sheet::before{left:0;border-right:1.5px dashed var(--rule)}
.sheet::after{right:0;border-left:1.5px dashed var(--rule)}
main{flex:1;min-width:0}
.job{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:46px;padding:6px var(--pad);border-bottom:2px dashed var(--rule);font:400 .6875rem/1.4 var(--mono);color:var(--mut);text-transform:uppercase;letter-spacing:.05em;background:var(--paper)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0}
.crumbs a{color:var(--mut);display:inline-flex;align-items:center;min-height:44px}
.crumbs i{font-style:normal;color:var(--rule)}
.crumbs span{color:var(--ink);font-weight:600}
.job-r{white-space:nowrap}
main>*{padding-left:var(--pad);padding-right:var(--pad)}
main>*>*{max-width:1060px}
.eyebrow{font:600 .6875rem/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--v);margin:0 0 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--v)}
.eyebrow time{color:var(--ink)}
h1{font-weight:800;font-size:clamp(2.15rem,4.5vw,3.85rem);line-height:1;letter-spacing:-.028em;text-wrap:balance}
.lead{font-size:clamp(1.08rem,1.5vw,1.25rem);line-height:1.55;color:#254458;margin:22px 0 0;max-width:62ch}
.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:3px solid var(--v);border-bottom:3px solid var(--v);transform:rotate(-45deg)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:clamp(28px,4vw,64px);align-items:center;padding-top:clamp(40px,6vw,76px);padding-bottom:clamp(40px,5vw,64px)}
.hero>*{min-width:0}
.hero .acts{margin-top:30px}
.pagehead{padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(28px,4vw,44px)}
.pagehead h1{font-size:clamp(2rem,4vw,3.3rem)}

/* job slip / receipt */
.slip,.rcpt,.take,.index{background:var(--white);border:1.5px solid var(--ink);font-family:var(--mono);position:relative}
.slip{padding:26px 22px 24px;transform:rotate(1.4deg);box-shadow:0 22px 34px -20px rgba(20,47,64,.5),6px 6px 0 var(--vl)}
.slip::before,.slip::after,.rcpt::before,.rcpt::after{content:"";position:absolute;left:10px;right:10px;border-top:2px dashed var(--rule)}
.slip::before,.rcpt::before{top:10px}.slip::after,.rcpt::after{bottom:10px}
.slip-h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;padding:8px 0 12px;border-bottom:3px double var(--ink);margin-bottom:6px}
.slip-h span{color:var(--mut)}
.slip dl,.rcpt dl{margin:0}
.lead-row{display:flex;align-items:baseline;gap:8px;padding:11px 0;border-bottom:1px solid var(--bar)}
.lead-row:last-child{border-bottom:0}
.lead-row dt{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;font-size:.6875rem;line-height:1.45;color:var(--mut)}
.lead-row dt::after{content:"";flex:1;min-width:14px;border-bottom:2px dotted var(--rule);transform:translateY(-3px)}
.lead-row dd{margin:0;font-weight:600;font-size:1rem;color:var(--ink);white-space:nowrap}

/* sections */
.sec{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px);border-top:2px dashed var(--rule)}
.sec-h{display:flex;align-items:baseline;gap:16px;margin-bottom:30px}
.sec-h .no{font:600 .75rem var(--mono);color:var(--white);background:var(--ink);padding:5px 8px;border-radius:2px;transform:translateY(-4px)}
h2{font-weight:800;font-size:clamp(1.6rem,2.8vw,2.3rem)}
h3{font-weight:600;font-size:1.2rem;line-height:1.2}
ol.items,ol.steps,ol.uses{list-style:none;margin:0;padding:0;display:grid;gap:0 32px}
.items{grid-template-columns:repeat(3,minmax(0,1fr))}
.items li{display:flex;gap:14px;padding:20px 0 22px;border-top:2px solid var(--ink)}
.items li>div,.steps li>div,.uses li>div{min-width:0}
.ln{font:600 .6875rem/1.9 var(--mono);color:var(--v)}
.items p,.steps p,.uses p{margin:8px 0 0;font-size:.97rem;line-height:1.6;color:#254458}
.steps{grid-template-columns:repeat(3,minmax(0,1fr));position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:30px;border-top:2px dashed var(--v)}
.steps li{position:relative}
.steps .ln{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--v);color:#ffffff;font:800 1.5rem var(--disp);margin-bottom:18px;box-shadow:0 0 0 8px var(--paper),4px 4px 0 8px var(--vl)}
.uses{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.uses li{display:flex;gap:14px;background:var(--white);border:1.5px solid var(--ink);border-left-width:8px;padding:20px 22px}

/* code */
.codebox{background:var(--panel);border-radius:4px;box-shadow:8px 8px 0 var(--vl);min-width:0}
.codetabs{display:flex;gap:4px;padding:10px 10px 0;border-bottom:1px solid #2a4e66;overflow-x:auto}
.codetabs button{min-height:44px;padding:0 18px;background:transparent;border:0;border-radius:3px 3px 0 0;color:var(--dim);font:600 .6875rem var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.codetabs button:hover{color:#ffffff}
.codetabs button[aria-selected=true]{background:var(--paper);color:var(--ink)}
pre.code{position:relative;margin:0;padding:52px 22px 22px;background:var(--panel);color:#e7f4ff;font:400 .75rem/1.75 var(--mono);overflow-x:auto;border-radius:4px;max-width:100%;-webkit-overflow-scrolling:touch;tab-size:2}
pre.code code{font:inherit;background:none;padding:0;color:inherit;white-space:pre}
.codebox pre.code{background:transparent;border-radius:0 0 4px 4px}
pre.code .k{color:var(--vl);font-weight:600}pre.code .s{color:#ffffff}pre.code .c{color:#91b1c8;font-style:italic}
.copy{position:absolute;top:6px;right:8px;min-width:44px;min-height:44px;padding:0 12px;background:var(--panel2);color:var(--vl);border:1px solid #3b6985;border-radius:3px;font:600 .625rem var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.copy:hover{background:var(--vl);color:var(--panel)}

/* prose */
.prose{max-width:740px;min-width:0}
.prose>*{max-width:100%}
.prose h2{margin:1.9em 0 .6em;font-size:clamp(1.45rem,2.3vw,1.9rem);scroll-margin-top:24px}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.6em 0 .5em}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.1em}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--v);font-weight:700}
.prose code{font:400 .82em var(--mono);background:var(--bar);padding:2px 5px;border-radius:2px;border:1px solid #d5e6f6}
.prose pre.code{margin:1.3em 0;box-shadow:6px 6px 0 var(--vl)}
.prose pre.code code{border:0}
.prose table{display:block;overflow-x:auto;max-width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.92rem;background:var(--white);border:1.5px solid var(--ink)}
.prose th,.prose td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{font:600 .6875rem var(--mono);text-transform:uppercase;letter-spacing:.05em;background:var(--ink);color:#ffffff;white-space:nowrap}
.prose tr:last-child td{border-bottom:0}
.prose blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:4px solid var(--v)}
.sec-prose{padding-top:clamp(40px,5vw,64px)}

/* faq */
.faq{max-width:820px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1.5px solid var(--ink)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:60px;padding:12px 0;cursor:pointer;list-style:none;font:600 1.1rem/1.3 var(--disp)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:26px;height:26px;border:1.5px solid var(--ink);border-radius:50%;background:linear-gradient(var(--ink),var(--ink)) center/12px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 12px no-repeat,var(--white);transition:transform .15s}
.faq details[open] summary i{transform:rotate(45deg);background-color:var(--vl)}
.faq details p{margin:0;padding:0 44px 20px 0;color:#254458}

/* closing stub */
.stub{background:var(--panel);color:#ffffff;border-top:2px dashed var(--vl);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding-top:clamp(36px,5vw,56px);padding-bottom:clamp(36px,5vw,56px)}
.stub>div{min-width:0}
.stub h2{color:#ffffff}
.stub p{color:var(--dim);margin:12px 0 0;max-width:52ch}
.stub .btn.big{background:var(--vl);border-color:var(--vl);color:var(--panel);box-shadow:0 4px 0 #5592c9}
.stub .btn.big:hover{background:#ffffff;border-color:#ffffff}
.stub .btn.ghost{background:transparent;color:#ffffff;border-color:#668ea8}
.stub .btn.ghost:hover{background:var(--panel2);color:#ffffff}
.stub-a{display:flex;flex-wrap:wrap;gap:14px}

/* key page */
.keyhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,440px);grid-template-areas:"t f" "b f";gap:0 clamp(28px,4vw,60px);align-items:start;padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(40px,5vw,64px)}
.key-t{grid-area:t;min-width:0}.key-b{grid-area:b;min-width:0}.key-f{grid-area:f;min-width:0}
.keyhero h1{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.key-b .ticks b{font-weight:700}
.form{background:var(--white);border:2px solid var(--ink);padding:26px 24px 24px;box-shadow:8px 8px 0 var(--vl);position:relative}
.form::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:8px;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,var(--v) 10px 20px)}
.key-f>.btn.ghost,.btn.ghost[data-gauth]{width:100%;min-height:48px;margin-bottom:6px}
.note{font-size:.82rem;line-height:1.5;color:var(--mut);margin:8px 0 0}
.key-f>.note{margin:8px 0 16px;text-align:center}
.tabs2{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--ink);margin:6px 0 18px}
.tabs2 button{min-height:44px;background:var(--white);border:0;color:var(--ink);font:600 .6875rem var(--mono);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.tabs2 button[aria-selected=true]{background:var(--ink);color:#ffffff}
.msg:empty{display:none}
.msg{padding:10px 12px;margin-bottom:14px;font-size:.9rem;border:1.5px solid var(--v);background:var(--bar)}
.msg.err{border-color:#a3129c;background:#fdeefc;color:#8a0f83}
.row{margin-bottom:14px}
.row label,.calc label{display:block;font:600 .6875rem/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.row input,.row select,.row textarea,.calc input{width:100%;min-height:48px;padding:10px 12px;background:var(--paper);border:1.5px solid var(--ink);border-radius:2px;color:var(--ink);font:400 1rem var(--body)}
.row textarea{min-height:140px;resize:vertical}
.row input:focus,.row select:focus,.row textarea:focus,.calc input:focus{outline:3px solid #7bbeff;outline-offset:1px;background:#ffffff}
form .btn{width:100%;margin-top:6px}
.keyout{display:none}.keyout.on{display:block}
.keyout h3{margin-bottom:12px}
.keybox{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;background:var(--bar);border:2px dashed var(--v);font:600 .8rem/1.5 var(--mono);word-break:break-all}
.keybox span{flex:1;min-width:0}
.keyout p{font-size:.92rem;margin:12px 0}
.keyout code{font:400 .8em var(--mono);word-break:break-all}
.keyout .acts{gap:10px;margin-top:14px}

/* pricing */
.price{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,3.5vw,48px);align-items:start;padding-bottom:clamp(44px,5vw,68px)}
.price>*{min-width:0}
.rcpt{padding:28px 26px 30px;box-shadow:8px 8px 0 var(--vl)}
.rcpt .lead-row{padding:14px 0}
.rcpt .lead-row dt{font-size:.75rem}
.rcpt .lead-row dd{font-size:1.35rem}
.rcpt-n{margin:8px 0 18px;padding-top:14px;border-top:3px double var(--ink);font:400 .75rem/1.6 var(--mono);color:var(--ink)}
.rcpt .btn{width:100%}
.calcbox{background:var(--panel);color:#ffffff;padding:28px 26px;border-radius:4px}
.calcbox h2{font-size:1.5rem;color:#ffffff;margin-bottom:20px}
.calc{display:grid;gap:16px}
.calc>div{min-width:0}
.calc label{color:var(--dim)}
.calc input{background:#081722;border-color:#3b6985;color:#ffffff;font:600 1.05rem var(--mono)}
.calc output{display:block;font:600 clamp(2rem,4vw,2.9rem)/1.1 var(--mono);color:var(--vl);padding-top:14px;border-top:3px double #3b6985;word-break:break-all}
.items.three li{flex-direction:column;gap:6px}

/* docs + article */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(28px,4vw,56px);align-items:start;padding-bottom:clamp(44px,5vw,68px)}
.index{padding:18px 18px 14px;position:sticky;top:24px;max-height:calc(100vh - 48px);overflow:auto;box-shadow:5px 5px 0 var(--vl)}
.index-h{font:600 .6875rem var(--mono);letter-spacing:.07em;text-transform:uppercase;margin:0 0 10px;padding-bottom:10px;border-bottom:3px double var(--ink)}
.index ol,.take ol{list-style:none;margin:0;padding:0}
.index a{display:flex;gap:10px;align-items:baseline;min-height:44px;padding:8px 0;border-bottom:1px dotted var(--rule);color:var(--ink);text-decoration:none;font:400 .6875rem/1.5 var(--mono)}
.index li:last-child a{border-bottom:0}
.index a span{color:var(--v);font-weight:600}
.index a:hover{color:var(--v)}
.read{padding-bottom:clamp(44px,5vw,68px)}
.read>*{max-width:760px}
.read .pagehead{padding-top:clamp(36px,5vw,64px);padding-bottom:28px}
.take{padding:20px 22px 12px;margin-bottom:22px;box-shadow:8px 8px 0 var(--vl)}
.take li{display:flex;gap:14px;padding:10px 0;border-bottom:1px dotted var(--rule)}
.take li:last-child{border-bottom:0}
.take li span{font:600 .6875rem/2.1 var(--mono);color:var(--v)}
.take li p{margin:0;font:400 .98rem/1.55 var(--body)}
.index.inline{position:static;max-height:none;box-shadow:none;margin-bottom:40px;background:var(--paper);border-style:dashed}
.index.inline ol{columns:2;column-gap:28px}
.index.inline li{break-inside:avoid}

/* support, legal, 404 */
.supp{padding-bottom:clamp(48px,6vw,80px)}
.supp>*{max-width:620px}
.supp form{background:var(--white);border:2px solid var(--ink);padding:26px 24px;box-shadow:8px 8px 0 var(--vl)}
.supp form button{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:6px;background:var(--v);color:#ffffff;border:2px solid var(--v);border-radius:3px;font:600 .75rem var(--mono);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 0 var(--ink)}
.supp form button:hover{background:var(--vd)}
.supp output,.supp [data-out]{display:block;margin-top:14px;font-size:.92rem}
.legal{padding-bottom:clamp(48px,6vw,80px)}
.nf{padding-top:clamp(40px,7vw,90px);padding-bottom:clamp(48px,7vw,90px)}
.nf-n{display:flex;align-items:center;gap:.08em;font:800 clamp(6rem,17vw,12rem)/.9 var(--disp);color:var(--v);margin:0 0 20px;letter-spacing:-.04em}
.nf-n i{width:.62em;height:.62em;border-radius:50%;background:var(--hole);box-shadow:0 0 0 .07em var(--vl);margin:0 .06em}
.nf-l{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-wrap:wrap;gap:0 22px;font:600 .75rem var(--mono);text-transform:uppercase}
.nf-l a{display:inline-flex;align-items:center;min-height:44px}

/* footer */
.foot{padding:30px var(--pad) 34px;border-top:2px dashed var(--rule);background:var(--paper);font:400 .6875rem/1.6 var(--mono);color:var(--mut);display:grid;gap:10px}
.foot-b{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.foot-b b{font:800 1.05rem var(--disp);color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 22px}
.foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.legal-n{margin:0}

/* ---------- responsive ---------- */
@media (max-width:1180px){
.items{grid-template-columns:repeat(2,minmax(0,1fr))}
.items.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols{grid-template-columns:minmax(0,1fr)}
.cols .index{order:-1;position:static;max-height:none}
.cols .index ol{columns:2;column-gap:28px}
.cols .index li{break-inside:avoid}
}
@media (max-width:1080px){
.hero{grid-template-columns:minmax(0,1fr)}
.slip{transform:none;max-width:460px}
.keyhero{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "f" "b";gap:26px 0}
.key-f{max-width:520px}
.price{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
:root{--strip:16px;--pad:16px}
html{scroll-padding-top:76px}
.side{position:sticky;top:0;inset:auto;width:auto;display:block;padding:0;border-right:0;border-bottom:4px solid #081722;overflow:visible}
.side-top{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:0;border:0}
.side-top::after{display:none}
.logo{flex:1;min-width:0;font-size:1rem;gap:9px}
.logo .mark{width:28px;height:28px}
.top-cta{display:inline-flex;min-height:44px;padding:0 12px;font-size:.625rem;background:var(--vl);border-color:var(--vl);color:var(--panel);box-shadow:0 3px 0 #5592c9;white-space:nowrap}
.burger{display:grid;place-content:center;gap:5px;width:44px;height:44px;flex:none;background:var(--panel2);border:1px solid #3b6985;border-radius:3px;cursor:pointer}
.burger i{display:block;width:18px;height:2px;background:#ffffff}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--panel);padding:10px 12px 16px;border-bottom:4px solid #081722;max-height:calc(100vh - 64px);overflow:auto}
.nav.open{display:flex}
.nav .btn.key{margin:12px 0}
.sheet{margin-left:0}
.sheet::before,.sheet::after{background:radial-gradient(circle at 50% 12px,var(--hole) 0 3.2px,transparent 3.8px) 0 0/var(--strip) 24px repeat-y,var(--paper)}
.job-r{display:none}
.items,.items.three,.steps,.uses{grid-template-columns:minmax(0,1fr)}
.steps{gap:26px}
.steps::before{left:29px;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed var(--v)}
.steps li{display:flex;gap:16px;align-items:flex-start}
.steps .ln{flex:none;margin:0}
.sec-h{gap:12px;margin-bottom:22px}
.index.inline ol,.cols .index ol{columns:1}
.stub-a,.stub-a .btn,.hero .acts .btn{width:100%}
.codebox,.form,.rcpt,.take,.supp form{box-shadow:5px 5px 0 var(--vl)}
.faq details p{padding-right:0}
pre.code{padding:52px 14px 16px;font-size:.6875rem}
.form{padding:24px 16px 18px}
.rcpt{padding:26px 16px}
.calcbox{padding:22px 16px}
.uses li{padding:16px}
}
@media (max-width:420px){
.logo span{font-size:.92rem}
.rcpt .lead-row dd{font-size:1.1rem}
.keybox{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}