/* nsfwchatbot.top - factory signboard: riveted enamel plates, blue-white barrier stripes, stencil caps */
:root{
  --wall:#dde5e9;--seam:#ccd7dd;--plate:#f8fbfc;--ink:#0b2530;--mut:#3a5360;
  --blue:#0a5f80;--cyan:#25bdf0;--dark:#082733;--deep:#04161d;--steel:#0b2f3d;
  --r1:#eef4f6;--r2:#8097a2;--signh:150px;
  --disp:"Saira Stencil One","Arial Black",Impact,sans-serif;
  --body:Barlow,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Overpass Mono",ui-monospace,Menlo,Consolas,monospace;
  --stripes:repeating-linear-gradient(-45deg,var(--blue) 0 12px,#f8fbfc 12px 24px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 1.0625rem/1.62 var(--body);color:var(--ink);overflow-x:clip;
  background:linear-gradient(var(--seam) 2px,transparent 2px) 0 0/100% 220px,linear-gradient(90deg,var(--seam) 2px,transparent 2px) 0 0/220px 100%,var(--wall)}
[hidden]{display:none!important}
img,svg{max-width:100%}
a{color:var(--blue);text-underline-offset:.18em}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 7px var(--cyan)}
h1,h2,h3,p,ul,ol{margin:0}
h1,h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:.015em;line-height:1.04;overflow-wrap:break-word}
h1{font-size:clamp(1.95rem,4.5vw,3.5rem)}
h2{font-size:clamp(1.45rem,2.8vw,2.1rem)}
h3{font:700 1.14rem/1.25 var(--body)}
.wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 28px}
.wrap.narrow{max-width:820px}
.skip{position:absolute;left:12px;top:-80px;z-index:99;background:var(--plate);color:var(--ink);border:2px solid var(--ink);padding:12px 18px;font-weight:700;border-radius:6px}
.skip:focus{top:12px}
.stripe{display:block;height:12px;background:var(--stripes)}
.disc{display:block;border-radius:50%;flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:.55rem 1.3rem;font:700 .93rem/1.15 var(--body);letter-spacing:.08em;text-transform:uppercase;text-align:center;text-decoration:none;cursor:pointer;
  background:var(--blue);color:#fff;border:2px solid var(--ink);border-radius:6px;box-shadow:0 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{color:#fff;transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.btn.big{min-height:58px;padding:.7rem 1.7rem;font-size:1.05rem}
.btn.big::after{content:"";width:9px;height:9px;border:solid currentColor;border-width:3px 3px 0 0;transform:rotate(45deg)}
.btn.ghost{background:var(--plate);color:var(--ink)}
.btn.ghost:hover{color:var(--ink);background:#fff}
.btn.sm{min-height:44px;padding:.35rem .9rem;font-size:.78rem;box-shadow:0 3px 0 var(--ink)}
.dark .btn:not(.ghost),.band .btn,.hcta,.ft .btn{background:var(--cyan);color:#03191f;border-color:var(--deep);box-shadow:0 4px 0 #0f5873}
.dark .btn:not(.ghost):hover,.band .btn:hover,.hcta:hover,.ft .btn:hover{color:#03191f;background:#6ad4f7;box-shadow:0 2px 0 #0f5873}

/* ---------- header: gantry + bar ---------- */
.hd{position:sticky;top:calc(-1*var(--signh));z-index:50}
.gantry{position:relative;height:var(--signh);overflow:hidden;color:#cfe9f3;
  background:radial-gradient(circle at 22px 22px,#3d6e82 0 2px,transparent 2.6px) 0 0/44px 44px,var(--dark)}
.gantry .stripe{position:absolute;left:0;right:0;bottom:0;height:14px;border-top:2px solid var(--deep)}
.gin{height:calc(100% - 14px);display:flex;align-items:center;justify-content:space-between;gap:28px}
.nameplate{display:flex;align-items:center;gap:20px;min-width:0;padding:15px 40px 15px 30px;color:var(--ink);border:2px solid var(--deep);border-radius:10px;box-shadow:0 5px 0 var(--deep);
  background:radial-gradient(circle at 11px 11px,var(--r1) 0 1.5px,var(--r2) 1.6px 3.8px,transparent 4.4px),radial-gradient(circle at calc(100% - 11px) 11px,var(--r1) 0 1.5px,var(--r2) 1.6px 3.8px,transparent 4.4px),radial-gradient(circle at 11px calc(100% - 11px),var(--r1) 0 1.5px,var(--r2) 1.6px 3.8px,transparent 4.4px),radial-gradient(circle at calc(100% - 11px) calc(100% - 11px),var(--r1) 0 1.5px,var(--r2) 1.6px 3.8px,transparent 4.4px),var(--plate)}
.nameplate .disc{width:66px;height:66px}
.nm{font:400 clamp(1.6rem,5.4vw,4rem)/1 var(--disp);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.tagplate{flex:none;max-width:340px;text-align:right;font:400 .78rem/1.5 var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:12px 18px;border:2px solid #2f6f88;border-radius:6px;background:var(--dark)}
.tagplate span{display:block}
.tagplate b{display:block;color:var(--cyan);font-weight:600;margin-top:4px}
.bar{position:relative;background:var(--steel);border-bottom:2px solid var(--deep);box-shadow:0 6px 14px -8px rgba(4,22,29,.7)}
.barin{display:flex;align-items:center;gap:16px;height:62px}
.logo{display:flex;align-items:center;gap:11px;min-height:44px;color:#fff;text-decoration:none;font:400 1.3rem/1 var(--disp);text-transform:uppercase;letter-spacing:.03em}
.logo:hover{color:var(--cyan)}
.logo .disc{width:34px;height:34px;box-shadow:0 0 0 2px #f8fbfc}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;color:#d6ecf4;font:600 .86rem/1 var(--body);text-transform:uppercase;letter-spacing:.1em;text-decoration:none;border-radius:4px}
.nav a:hover{color:var(--cyan)}
.nav a[aria-current]{background:var(--plate);color:var(--ink)}
.hcta{min-height:44px;padding:.35rem 1.05rem;font-size:.84rem;white-space:nowrap}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:44px;padding:0 10px;background:transparent;border:2px solid #4b8298;border-radius:6px;cursor:pointer}
.burger i{display:block;height:3px;background:#f8fbfc;border-radius:1px}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .logo span{animation:lg linear both;animation-timeline:scroll(root);animation-range:60px 150px}
  }
}
@keyframes lg{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* ---------- plates ---------- */
.pl{position:relative;min-width:0;padding:clamp(1.6rem,3.3vw,2.9rem);border:2px solid var(--ink);border-radius:10px;box-shadow:0 4px 0 rgba(11,37,48,.3),0 18px 26px -18px rgba(11,37,48,.45);
  background:radial-gradient(circle at 13px 13px,var(--r1) 0 1.6px,var(--r2) 1.7px 4.2px,transparent 4.8px),radial-gradient(circle at calc(100% - 13px) 13px,var(--r1) 0 1.6px,var(--r2) 1.7px 4.2px,transparent 4.8px),radial-gradient(circle at 13px calc(100% - 13px),var(--r1) 0 1.6px,var(--r2) 1.7px 4.2px,transparent 4.8px),radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),var(--r1) 0 1.6px,var(--r2) 1.7px 4.2px,transparent 4.8px),var(--pbg,var(--plate))}
.pl.dark{--pbg:var(--dark);--r1:#9cc7d8;--r2:#2b6077;color:#e4f2f7;border-color:var(--deep)}
.dark p{color:#c6dfe9}
.dark a:not(.btn){color:var(--cyan)}
.pl>.stripe{position:absolute;top:0;left:0;right:0;border-radius:8px 8px 0 0;border-bottom:2px solid var(--ink)}
.sec{padding:clamp(1.4rem,3vw,2.4rem) 0}
.sh{display:flex;align-items:center;gap:16px;margin-bottom:clamp(1.2rem,2.4vw,1.9rem);counter-increment:pl}
.no{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:40px;padding:0 10px;background:var(--blue);color:#fff;border:2px solid var(--ink);border-radius:5px;font:600 .95rem/1 var(--mono);letter-spacing:.08em}
.no::before{content:counter(pl,decimal-leading-zero)}
.dark .no{background:var(--cyan);color:#03191f;border-color:var(--deep)}
main{counter-reset:pl;padding-bottom:clamp(2rem,4vw,3.5rem)}
@media (min-width:1040px){
  .sec:not(.flat):nth-of-type(odd)>.wrap>.pl{margin-right:8.5%}
  .sec:not(.flat):nth-of-type(even)>.wrap>.pl{margin-left:8.5%}
}

/* ---------- grids / cards ---------- */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cd{min-width:0;padding:20px 20px 22px;background:#fff;border:2px solid #b7c6ce;border-top:7px solid var(--blue);border-radius:6px}
.cd h3{margin-bottom:.45em}
.cd p{color:var(--mut);font-size:1rem;line-height:1.55}
.steps{counter-reset:st;gap:0}
.steps .cd{counter-increment:st;background:transparent;border:0;border-left:2px dashed #2f6f88;border-radius:0;padding:4px 24px 6px}
.steps .cd:first-child{border-left:0;padding-left:0}
.steps .cd::before{content:counter(st,decimal-leading-zero);display:block;font:400 3.4rem/1 var(--disp);color:var(--cyan);margin-bottom:.25em}
.steps .cd h3{color:#fff}
.steps .cd p{color:#c6dfe9}
.uses .cd{position:relative;border-top-width:2px;padding-left:40px}
.uses .cd::before{content:"";position:absolute;left:0;top:0;bottom:0;width:18px;background:var(--stripes);border-right:2px solid #b7c6ce;border-radius:3px 0 0 3px}
.ex .cd{border-top:2px solid #b7c6ce;border-left:7px solid var(--blue)}
.ex .cd p{font:400 .92rem/1.6 var(--mono);color:var(--ink)}

/* ---------- facts ---------- */
.facts{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.facts li{min-width:0;display:flex;flex-direction:column;gap:6px;padding:20px 16px 16px;background:radial-gradient(circle at 50% 9px,var(--r1) 0 1.4px,var(--r2) 1.5px 3.6px,transparent 4.2px),var(--plate);border:2px solid var(--ink);border-radius:8px;box-shadow:0 3px 0 rgba(11,37,48,.3)}
.facts b{font:400 clamp(1.3rem,2.3vw,1.9rem)/1.05 var(--disp);color:var(--blue);text-transform:uppercase;overflow-wrap:anywhere}
.facts span{font:400 .74rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--mut)}
.factsec{padding:1.2rem 0 .6rem}
.facts.mini{grid-template-columns:1fr;gap:0;border:2px solid var(--ink);border-radius:8px;background:var(--plate);overflow:hidden}
.facts.mini li{flex-direction:row;align-items:baseline;justify-content:space-between;gap:14px;padding:11px 16px;border:0;border-radius:0;box-shadow:none;background:none;border-bottom:2px dashed #b7c6ce}
.facts.mini li:last-child{border-bottom:0}
.facts.mini b{order:2;font-size:1.2rem;text-align:right;flex:none;max-width:55%}
.facts.mini span{order:1}

/* ---------- hero ---------- */
.hero{padding:clamp(1.5rem,3.4vw,2.8rem) 0 clamp(1rem,2vw,1.6rem)}
.herogrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;margin-bottom:26px}
.heroplate{z-index:1;padding-right:clamp(1.6rem,5vw,4.4rem)}
.eyebrow,.tabtag,.stamp,.sub,.toch{font:600 .78rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.12em}
.eyebrow{display:inline-block;margin-bottom:1.1rem;padding:6px 12px;background:var(--ink);color:#fff;border-radius:4px}
h1::after{content:"";display:block;width:132px;height:10px;margin-top:.55em;background:var(--stripes);border:2px solid var(--ink);border-radius:2px}
.lead{margin-top:1.1rem;font-size:clamp(1.08rem,1.5vw,1.24rem);line-height:1.55;color:var(--mut);max-width:62ch}
.chk{list-style:none;padding:0;margin-top:1.3rem;display:grid;gap:.6rem}
.chk li{position:relative;padding-left:34px;font-weight:500;line-height:1.45}
.chk li::before{content:"";position:absolute;left:0;top:.12em;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#f8fbfc 0 3px,var(--blue) 3.6px 8px,#f8fbfc 8.6px 9.6px,var(--blue) 10.2px)}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.7rem}
.codeplate{z-index:2;margin:74px 0 0 -34px;padding:22px 22px 24px}
.tabtag{color:var(--cyan);margin:2px 0 14px 14px}

/* ---------- code ---------- */
.codetabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.codetabs button{min-height:44px;padding:0 16px;background:transparent;color:#cfe9f3;border:2px solid #2f6f88;border-radius:5px;font:600 .8rem/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.codetabs button[aria-selected="true"]{background:var(--cyan);border-color:var(--cyan);color:#03191f}
pre.code{position:relative;margin:0;padding:3.5rem 1.1rem 1.1rem;overflow-x:auto;max-width:100%;background:#051a23;color:#dceef5;border:2px solid #1d4a5d;border-radius:6px;font:400 .86rem/1.65 var(--mono);tab-size:2}
pre.code code{font:inherit;background:none;padding:0;border:0;color:inherit;white-space:pre}
pre.code .k{color:#63d2f8}pre.code .s{color:#a9f0da}pre.code .c{color:#86a5b3}
button.copy{position:absolute;top:6px;right:6px;min-width:64px;min-height:44px;padding:0 12px;background:#0d3545;color:#e4f2f7;border:2px solid #3a7d96;border-radius:5px;font:600 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;cursor:pointer}
button.copy:hover{background:var(--cyan);color:#03191f;border-color:var(--cyan)}

/* ---------- prose ---------- */
.prose{min-width:0}
.prose>*{max-width:74ch}
.prose>pre,.prose>table,.prose>form,.prose>div{max-width:100%}
.prose>*+*{margin-top:1.05em}
.prose h2{margin-top:2em;padding-top:1.1em;border-top:2px dashed #a9bbc4;scroll-margin-top:92px;font-size:clamp(1.35rem,2.3vw,1.75rem)}
.prose>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{margin-top:1.7em;font-size:1.2rem;scroll-margin-top:92px}
.prose>h3:first-child{margin-top:0}
.prose h3+p{margin-top:.6em}
.prose h2+*{margin-top:.95em}
.prose ul,.prose ol{padding-left:1.35em}
.prose li+li{margin-top:.4em}
.prose ul li::marker{color:var(--blue)}
.prose ol li::marker{font-family:var(--mono);font-weight:600;color:var(--blue)}
.prose strong{font-weight:700}
.prose :not(pre)>code,.keyout code{font:400 .88em var(--mono);background:#e1eaee;border:1px solid #bccbd3;border-radius:4px;padding:.08em .38em;overflow-wrap:anywhere}
.prose table{display:block;overflow-x:auto;border-collapse:collapse;font-size:.95rem;border:2px solid var(--ink);border-radius:6px}
.prose th,.prose td{padding:10px 14px;text-align:left;border-bottom:1px solid #b7c6ce;vertical-align:top}
.prose th{background:var(--dark);color:#fff;font:600 .76rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.prose tr:last-child td{border-bottom:0}
.prose blockquote{margin-left:0;margin-right:0;padding:.3em 0 .3em 1.2em;border-left:8px solid var(--blue)}

/* ---------- page head / crumbs ---------- */
.phead{padding:clamp(1.5rem,3.2vw,2.6rem) 0 clamp(.6rem,1.4vw,1rem)}
.ph .lead{max-width:70ch}
.crumbs{margin-bottom:.9rem}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;font:600 .76rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em}
.crumbs li{display:inline-flex;align-items:center;min-height:44px;color:var(--mut)}
.crumbs li+li::before{content:"";width:7px;height:7px;margin:0 12px 0 10px;border:solid var(--blue);border-width:2px 2px 0 0;transform:rotate(45deg)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.sub,.stamp{margin-top:1.2rem;display:inline-block;padding:7px 12px;border:2px solid var(--ink);border-radius:4px;background:#fff}
.legal{margin-top:24px}

/* ---------- two-column docs / article ---------- */
.two{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start}
.rail{position:sticky;top:86px;display:grid;gap:22px;min-width:0}
.toc{padding:26px 20px 20px}
.toch{color:var(--blue);margin-bottom:8px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.toc ol{list-style:none;padding:0;counter-reset:tc;max-height:46vh;overflow:auto}
.toc li{counter-increment:tc;border-bottom:1px dashed #b7c6ce}
.toc li:last-child{border-bottom:0}
.toc a{display:flex;gap:10px;align-items:center;min-height:44px;padding:7px 2px;color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem;line-height:1.3}
.toc a::before{content:counter(tc,decimal-leading-zero);font:600 .74rem var(--mono);color:var(--blue)}
.toc a:hover{color:var(--blue);text-decoration:underline}
.side{padding:28px 22px 26px}
.sideh{font-size:1.25rem;color:#fff}
.side p{margin:.7em 0 1.1em;font-size:.97rem}
.side .btn{width:100%}
.artcol{min-width:0;display:grid;gap:24px}
.takes{padding-top:calc(clamp(1.6rem,3.3vw,2.6rem) + 12px)}
.takes h2{font-size:1.4rem}
.main-prose{font-size:1.09rem;line-height:1.7}

/* ---------- key page ---------- */
.keytop{padding:clamp(1.2rem,2.6vw,2.2rem) 0 clamp(1rem,2vw,1.6rem)}
.keygrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);grid-template-areas:"h f" "s f";grid-template-rows:auto 1fr;gap:22px 56px;align-items:start}
.kh{grid-area:h;min-width:0}
.kform{grid-area:f;padding:calc(clamp(1.4rem,2.6vw,2rem) + 12px) clamp(1.2rem,2.6vw,2rem) clamp(1.4rem,2.6vw,2rem)}
.kside{grid-area:s;min-width:0}
.kside .lead{margin:0 0 1.4rem}
.tabs2{display:grid;grid-template-columns:1fr 1fr;margin-bottom:16px;border:2px solid var(--ink);border-radius:6px;overflow:hidden}
.tabs2 button{min-height:46px;padding:4px 8px;background:#fff;color:var(--ink);border:0;font:700 .84rem/1.15 var(--body);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.tabs2 button+button{border-left:2px solid var(--ink)}
.tabs2 button[aria-selected="true"]{background:var(--ink);color:#fff}
.tabs2 button:focus-visible{outline-offset:-5px;box-shadow:none;outline-color:var(--cyan)}
.msg{margin-bottom:14px;padding:10px 14px;border:2px solid var(--blue);border-radius:6px;background:#e6f4f9;color:#06425a;font-weight:600;font-size:.96rem}
.msg:empty{display:none}
.msg.err{border-color:#8c1c13;background:#fdecea;color:#8c1c13}
.row{margin-bottom:14px}
.row label,.calc label{display:block;margin-bottom:6px;font:600 .75rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em}
input,select,textarea{width:100%;min-height:48px;padding:10px 13px;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:6px;font:400 1rem/1.4 var(--body)}
textarea{min-height:150px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--blue);outline-offset:1px;box-shadow:0 0 0 6px rgba(37,189,240,.45)}
.note,.mut{font-size:.86rem;line-height:1.45;color:var(--mut)}
.note{margin:.45rem 0 0}
.form .btn[data-submit]{width:100%;min-height:56px;margin-top:4px}
.form .btn.ghost[data-gauth]{box-shadow:0 3px 0 var(--ink);text-transform:none;letter-spacing:.01em;font-size:1rem}
.keyout{display:none}
.keyout.on{display:block}
.keyout h3{font:400 1.5rem/1.1 var(--disp);text-transform:uppercase;margin-bottom:12px}
.keybox{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;background:var(--dark);color:#c5f1ff;border:2px solid var(--deep);border-radius:6px;font:400 .9rem/1.4 var(--mono)}
.keybox span{flex:1;min-width:0;overflow-wrap:anywhere}
.keybox .btn{background:var(--cyan);color:#03191f;box-shadow:none;flex:none}
.keyout p{margin-top:12px;line-height:1.8}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.supp form{margin-top:1.4rem}
.supp .btn{min-width:180px}
.supp [data-support-msg]{font-weight:600}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:end;margin-bottom:22px;background:none;border:0;padding:0}
.calc>div{min-width:0}
.calc label{color:#c6dfe9}
.calc input{font-family:var(--mono);border-color:var(--deep)}
.calc output{display:flex;align-items:center;min-height:48px;padding:0 14px;border:2px dashed #3a7d96;border-radius:6px;font:400 clamp(1.6rem,3vw,2.2rem)/1 var(--disp);color:var(--cyan);overflow-wrap:anywhere}

/* ---------- FAQ ---------- */
.fq{border:2px solid var(--ink);border-radius:6px;background:#fff}
.fq+.fq{margin-top:10px}
.fq summary{position:relative;display:flex;align-items:center;min-height:52px;padding:12px 56px 12px 18px;font-weight:600;font-size:1.05rem;line-height:1.35;cursor:pointer;list-style:none}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"";position:absolute;right:16px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:linear-gradient(#fff,#fff) 50% 50%/12px 3px no-repeat,linear-gradient(#fff,#fff) 50% 50%/3px 12px no-repeat,var(--blue);transition:transform .15s}
.fq[open] summary::after{transform:rotate(45deg)}
.fq[open] summary{border-bottom:2px dashed #b7c6ce}
.fq p{padding:14px 18px 18px;color:var(--mut);max-width:80ch}

/* ---------- CTA band ---------- */
.band{margin-top:clamp(1.4rem,3vw,2.4rem);background:var(--dark);color:#fff;border-top:14px solid transparent;border-bottom:14px solid transparent;border-image:var(--stripes) 14;padding:clamp(2rem,4.5vw,3.4rem) 0}
.bandin{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.bandtx{min-width:0;flex:1 1 420px}
.band h2{font-size:clamp(1.6rem,3.4vw,2.6rem)}
.band p{margin-top:.7rem;color:#c6dfe9;max-width:60ch;font-size:1.1rem}
main>.band:last-child{margin-bottom:calc(-1*clamp(2rem,4vw,3.5rem))}

/* ---------- 404 ---------- */
.nf .ph{text-align:center;padding-top:calc(clamp(1.6rem,3.3vw,2.9rem) + 16px)}
.nfdisc .disc{width:110px;height:110px;margin:0 auto 1.4rem}
.nf h1::after{margin-left:auto;margin-right:auto}
.nf .lead{margin-left:auto;margin-right:auto}
.nflinks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin:1.6rem 0}
.nflinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--ink);border-radius:5px;background:#fff;color:var(--ink);font:600 .82rem var(--mono);text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.nflinks a:hover{background:var(--ink);color:#fff}

/* ---------- footer ---------- */
.ft{background:#061d26;color:#bdd7e1}
.ft .stripe{height:14px}
.ftin{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:36px;padding-top:44px;padding-bottom:30px}
.ftlogo{display:flex;align-items:center;gap:12px;color:#fff;font:400 1.5rem/1 var(--disp);text-transform:uppercase;letter-spacing:.03em}
.ftlogo .disc{width:38px;height:38px;box-shadow:0 0 0 2px #f8fbfc}
.ftb p{margin:14px 0 20px;max-width:38ch}
.ftn{display:flex;flex-direction:column;align-items:flex-start}
.ftn a{display:inline-flex;align-items:center;min-height:44px;color:#d6ecf4;text-decoration:none;font-weight:500}
.ftn a::before{content:"";width:8px;height:8px;margin-right:11px;background:var(--cyan);border-radius:50%}
.ftn a:hover{color:var(--cyan);text-decoration:underline}
.legalnote{padding:18px 0 30px;border-top:2px dashed #25586c;font:400 .76rem/1.6 var(--mono);color:#a5c3cf}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .tagplate{max-width:260px}
  .nav a{padding:0 9px;letter-spacing:.06em}
}
@media (max-width:980px){
  .burger{display:flex}
  .hcta{margin-left:auto}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:4px;padding:10px 16px 16px;background:var(--steel);border-bottom:2px solid var(--deep);box-shadow:0 14px 20px -10px rgba(4,22,29,.8)}
  .nav.open{display:flex}
  .nav a{min-height:48px;padding:0 14px;font-size:.95rem;border-bottom:1px dashed #2f6f88;border-radius:0}
  .nav a[aria-current]{border-radius:4px;border-bottom-color:transparent}
  .herogrid{grid-template-columns:minmax(0,1fr);gap:18px}
  .heroplate{padding-right:clamp(1.6rem,3.3vw,2.9rem)}
  .codeplate{margin:0}
  .facts{grid-template-columns:repeat(6,minmax(0,1fr))}
  .facts li{grid-column:span 2}
  .facts li:nth-child(-n+2){grid-column:span 3}
  .facts.mini{grid-template-columns:1fr}
  .facts.mini li,.facts.mini li:nth-child(-n+2){grid-column:auto}
  .g3{grid-template-columns:minmax(0,1fr)}
  .steps .cd,.steps .cd:first-child{border-left:0;border-top:2px dashed #2f6f88;padding:18px 0 6px 76px;position:relative}
  .steps .cd:first-child{border-top:0;padding-top:4px}
  .steps .cd::before{position:absolute;left:0;top:16px;font-size:2.8rem}
  .steps .cd:first-child::before{top:2px}
  .two{grid-template-columns:minmax(0,1fr)}
  .rail{position:static}
  .rail .side{display:none}
  .toc ol{max-height:none}
  .keygrid{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "f" "s";grid-template-rows:auto;gap:18px}
  .ftin{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ftb{grid-column:1/-1}
}
@media (max-width:760px){
  :root{--signh:92px}
  body{font-size:1rem}
  .wrap{padding:0 16px}
  .tagplate{display:none}
  .gin{justify-content:center}
  .nameplate{gap:12px;padding:10px 24px 10px 20px;box-shadow:0 4px 0 var(--deep)}
  .nameplate .disc{width:38px;height:38px}
  .barin{height:58px;gap:10px}
  .pl{padding:26px 18px 24px;border-radius:8px}
  .kform{padding-top:36px}
  .takes{padding-top:38px}
  .g2{grid-template-columns:minmax(0,1fr)}
  .calc{grid-template-columns:minmax(0,1fr)}
  .facts{gap:10px}
  .facts li{padding:18px 10px 12px}
  .facts span{font-size:.68rem;letter-spacing:.03em}
  .btns .btn{flex:1 1 100%}
  .band .btn{width:100%}
  .sh{gap:12px}
  .no{min-width:46px;height:36px}
  .keytop h1{font-size:1.75rem}
  .keytop .crumbs{margin-bottom:.2rem}
  pre.code{font-size:.8rem}
}
@media (max-width:520px){
  .logo span{display:none}
  .hcta{padding:.35rem .8rem;font-size:.8rem;letter-spacing:.05em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}