@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/assets/fonts/source-serif.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(/assets/fonts/courier-prime.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--paper:#F4F6F3;--ink:#16212B;--soft:#4A5866;--rule:#C3CBC3;--blue:#1D3FBA;--onblue:#fff;--hi:#F6E05E;--red:#B3261E;--sheet:#fff;
--sans:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--serif:"Source Serif 4",Georgia,"Times New Roman",serif;--type:"Courier Prime","Courier New",monospace}
@media (prefers-color-scheme:dark){:root{--paper:#10171D;--ink:#E6ECEA;--soft:#A3B0B8;--rule:#2F3B45;--blue:#93ABFF;--onblue:#10171D;--hi:#5C5314;--red:#FF9A90;--sheet:#17212A}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.65 var(--serif);overflow-wrap:break-word}
a{color:var(--blue);text-underline-offset:.15em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;font:600 1rem var(--sans);z-index:9}
.skip:focus{left:0}
.wrap{max-width:68rem;margin:0 auto;padding:0 1rem}
header.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.6rem 1rem;padding:1rem 0;border-bottom:2px dashed var(--rule);font-family:var(--sans)}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.3rem;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand svg{width:1.6rem;height:1.6rem;flex:none;color:var(--ink)}
header.top nav{display:flex;gap:.35rem 1.1rem;flex-wrap:wrap}
header.top nav a{white-space:nowrap;font-weight:500;font-size:.95rem}
@media (max-width:40rem){header.top nav{width:100%;gap:1.1rem}}
@media (max-width:30rem){.brand{font-size:1.1rem}header.top nav{gap:.85rem}header.top nav a{font-size:.9rem}}
h1,h2,h3{font-family:var(--sans);line-height:1.1;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.15rem,5.8vw,3.7rem);font-weight:800;max-width:17ch;overflow-wrap:break-word}
h2{font-size:1.55rem;font-weight:700;margin:2.9rem 0 .8rem}
h3{font-size:1.1rem;font-weight:700}
p{margin:0 0 1rem}
.lead{font-size:1.25rem;max-width:40rem}
.quip{font:600 1.15rem/1.4 var(--sans);margin-top:-.25rem}
.hero{padding:2.5rem 0 1.5rem}
.hero .lead{margin-top:1.25rem}
/* hero: copy + key tag */
.herogrid{display:grid;gap:1rem 3rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:62rem){.herogrid{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}.herogrid .tagwrap{padding-top:4.5rem}}
.tagwrap{padding:4.5rem 1.1rem 1.1rem .4rem;max-width:21rem}
.keytag{position:relative;background:var(--sheet);border:2px solid var(--ink);border-radius:12px;padding:2.9rem 1.4rem 3.9rem;transform:rotate(2.5deg);box-shadow:10px 10px 0 var(--blue);font-family:var(--sans)}
.keytag:before{content:"";position:absolute;top:.85rem;left:50%;width:1.1rem;height:1.1rem;margin-left:-.55rem;border:2px solid var(--ink);border-radius:50%;background:var(--paper)}
.keytag .ring{position:absolute;left:50%;top:-3.95rem;width:5rem;margin-left:-2.5rem;color:var(--soft);z-index:1}
.k-top{font:600 .95rem/1.2 var(--sans);color:var(--soft);margin:0}
.k-state{font:800 1.9rem/1.05 var(--sans);letter-spacing:-.02em;margin:.15rem 0 1.1rem}
.k-label{font:600 .92rem/1.2 var(--sans);color:var(--soft);margin:0 0 .35rem}
.k-date{font:400 1.35rem/1.35 var(--type);margin:0;min-height:1.8rem}
.keytag mark{padding:.05em .3em}
.stamp{position:absolute;right:-.9rem;bottom:.95rem;border:3px solid var(--red);color:var(--red);padding:.2rem .6rem;font:800 1.05rem/1.1 var(--sans);text-transform:uppercase;letter-spacing:.05em;transform:rotate(-9deg);background:var(--sheet);opacity:0;pointer-events:none}
.stamp.on{opacity:1;animation:thump .32s cubic-bezier(.2,.9,.3,1.25)}
@keyframes thump{from{transform:rotate(-9deg) scale(1.9);opacity:0}to{transform:rotate(-9deg) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.stamp.on{animation:none}}
.trust{display:flex;flex-wrap:wrap;gap:.7rem 2.4rem;margin:1.8rem 0 0;font:400 .95rem/1.4 var(--sans);color:var(--soft)}
.trust b{display:block;font-weight:700;color:var(--ink)}
.layout{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:62rem){.layout{grid-template-columns:minmax(0,1fr) 19.5rem;gap:3.5rem}.rail{position:sticky;top:1.25rem;align-self:start}}
.main{max-width:41rem}
.main h2:first-child{margin-top:0}
/* calculator */
.calc{border-left:4px solid var(--blue);padding:.25rem 0 .25rem 1.1rem;margin:1.75rem 0 .5rem;max-width:41rem}
.calc .row{display:flex;flex-wrap:wrap;gap:.9rem 1.25rem;align-items:end}
.calc label{display:block;font:600 .9rem var(--sans);margin-bottom:.3rem}
.calc select,.calc input{font:400 1rem var(--sans);color:var(--ink);background:var(--sheet);border:1px solid var(--soft);border-radius:4px;padding:.65rem .75rem;min-width:11rem;min-height:2.9rem}
.calc select{min-width:14rem}
.calc-out{margin-top:1.1rem;min-height:3.2rem;font-family:var(--sans)}
.calc-out .line{font-weight:700;font-size:clamp(1.15rem,3.4vw,1.5rem);line-height:1.35;margin:0 0 .35rem}
.calc-out .status{margin:0 0 .35rem;font-weight:500}
.calc-out .late{color:var(--red);font-weight:700}
.calc-out .fine{font:400 .92rem/1.5 var(--serif);color:var(--soft);margin:0}
.calc-out .idle{color:var(--soft);margin:0;font-weight:500}
mark{background:var(--hi);color:inherit;padding:.05em .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.calc-out mark{background-image:linear-gradient(var(--hi),var(--hi));background-color:transparent;background-repeat:no-repeat;background-size:100% 100%;animation:swipe .55s ease-out}
@keyframes swipe{from{background-size:0 100%}to{background-size:100% 100%}}
@media (prefers-reduced-motion:reduce){.calc-out mark{animation:none}}
/* facts */
dl.facts{margin:0;border-top:1px solid var(--rule)}
dl.facts>div{display:grid;gap:.15rem 1.5rem;padding:.9rem 0;border-bottom:1px solid var(--rule)}
@media (min-width:40rem){dl.facts>div{grid-template-columns:10.5rem minmax(0,1fr)}}
dl.facts dt{font:600 .95rem/1.4 var(--sans)}
dl.facts dd{margin:0}
/* steps: a real sequence, so numbered */
ol.steps{list-style:none;counter-reset:s;padding:0;margin:0 0 1rem}
ol.steps li{counter-increment:s;position:relative;padding-left:3.1rem;margin-bottom:1.15rem;min-height:2.2rem}
ol.steps li:before{content:counter(s);position:absolute;left:0;top:.05rem;width:2.15rem;height:2.15rem;border:2px solid var(--ink);border-radius:50%;background:var(--hi);color:var(--ink);font:800 1rem/1.9rem var(--sans);text-align:center}
/* letter preview */
.letter{font:400 .95rem/1.55 var(--type);background:var(--sheet);border:1px solid var(--rule);padding:1.25rem 1.4rem;max-height:23rem;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent);white-space:pre-wrap;overflow-wrap:anywhere}
.letter p{margin:0 0 .9rem}
.blank{background:var(--hi);color:inherit}
/* kit box */
.kit{border:2px solid var(--ink);background:var(--sheet);padding:1.25rem 1.3rem;font-family:var(--sans);box-shadow:8px 8px 0 var(--blue)}
.kit h2,.kit h3{margin:0 0 .5rem;font-size:1.2rem}
.kit p{font:400 .98rem/1.5 var(--sans);margin:0 0 .8rem}
.kit ul{margin:0 0 1rem;padding-left:1.15rem;font:400 .95rem/1.5 var(--sans)}
.kit li{margin-bottom:.25rem}
.kit .price{font-weight:800;font-size:1.6rem;margin:0 0 .6rem}
.kit .fine{font-size:.85rem;color:var(--soft);margin:.7rem 0 0}
.btn{display:inline-block;background:var(--blue);color:var(--onblue);font:700 1rem var(--sans);padding:.85rem 1.25rem;border-radius:4px;text-decoration:none;text-align:center}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(2px)}
.kit .btn{display:block}
.inline-cta{margin:2.2rem 8px 2.2rem 0}
.notice{border-left:4px solid var(--hi);background:var(--sheet);padding:.8rem 1rem;margin:1.25rem 0;font:400 .95rem/1.5 var(--sans)}
.notice.warn{border-left-color:var(--red)}
details.faq{border-top:1px solid var(--rule);padding:.8rem 0}
details.faq:last-of-type{border-bottom:1px solid var(--rule)}
details.faq summary{cursor:pointer;font:600 1.02rem/1.4 var(--sans)}
details.faq p{margin:.6rem 0 0}
ul.states{list-style:none;margin:0;padding:0;columns:12.5rem;column-gap:1.5rem;font-family:var(--sans);font-size:.98rem}
ul.states li{margin-bottom:.35rem;break-inside:avoid}
ul.states a[aria-current]{color:var(--ink);font-weight:700;text-decoration:none}
.fine{font-size:.9rem;color:var(--soft)}
.src{font:400 .88rem/1.5 var(--sans);overflow-wrap:anywhere}
footer{margin-top:4rem;border-top:2px dashed var(--rule);padding:1.5rem 0 3rem;font:400 .9rem/1.6 var(--sans);color:var(--soft)}
footer a{display:inline-block;margin:0 1rem .2rem 0}
footer .joke{font-style:italic}
.bc{font:400 .9rem var(--sans);margin:1rem 0 0;color:var(--soft)}
.bc a{color:var(--soft)}