@font-face{font-family:'Public Sans';font-style:normal;font-weight:400;font-display:swap;
src:url(/assets/fonts/public-sans-latin-400-normal.36274b57.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:600;font-display:swap;
src:url(/assets/fonts/public-sans-latin-600-normal.c7842f97.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:700;font-display:swap;
src:url(/assets/fonts/public-sans-latin-700-normal.dace7416.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;
src:url(/assets/fonts/newsreader-latin-400-normal.e6606781.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;
src:url(/assets/fonts/newsreader-latin-400-italic.fa9b9004.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.08949f72.woff2) format('woff2')}
:root{
--paper:#F4F5F1;--surface:#FBFBF8;--sunk:#EBEDE6;
--ink:#191C1A;--ink-2:#4A524C;--ink-3:#666D67;
--rule:#D6D9D0;--border:#879179;
--spruce:#2F5D50;--spruce-lift:#3E7A69;--brass:#866622;
--pass:#3E7550;--kill:#98362E;--chip:#E4E8DF;--on-accent:#F4F5F1;
--shadow:0 1px 2px rgba(25,28,26,.05),0 8px 24px -12px rgba(25,28,26,.14);
--maxw:1120px;--read:68ch;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
--paper:#15181A;--surface:#1C2022;--sunk:#101314;
--ink:#E7E9E4;--ink-2:#A6ADA6;--ink-3:#808881;
--rule:#2C3134;--border:#606C71;
--spruce:#7FBBA8;--spruce-lift:#9BD0BE;--brass:#D6AC5A;
--pass:#7FB98C;--kill:#DE8479;--chip:#252B2C;--on-accent:#15181A;
--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
--paper:#15181A;--surface:#1C2022;--sunk:#101314;
--ink:#E7E9E4;--ink-2:#A6ADA6;--ink-3:#808881;
--rule:#2C3134;--border:#606C71;
--spruce:#7FBBA8;--spruce-lift:#9BD0BE;--brass:#D6AC5A;
--pass:#7FB98C;--kill:#DE8479;--chip:#252B2C;--on-accent:#15181A;
--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
font-family:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
font-feature-settings:"kern" 1;overflow-x:hidden}
/* ambient background — pure CSS, 0 JS */
body::before{content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;
background:
 linear-gradient(var(--rule) 1px,transparent 1px) 0 0/48px 48px,
 linear-gradient(90deg,var(--rule) 1px,transparent 1px) 0 0/48px 48px;
opacity:.30}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{opacity:.2}}
:root[data-theme="dark"] body::before{opacity:.2}
body::after{content:"";position:fixed;inset:-40%;z-index:-1;pointer-events:none;
background:radial-gradient(45rem 30rem at 30% 12%,color-mix(in srgb,var(--spruce) 11%,transparent),transparent 70%);
animation:drift 44s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-3%,-2%,0)}to{transform:translate3d(4%,3%,0)}}
h1,h2,h3,h4{font-family:'Newsreader',Georgia,'Times New Roman',serif;text-wrap:balance;margin:0;
font-weight:400;letter-spacing:-.015em;line-height:1.15}
h1{font-size:clamp(2.1rem,5vw,3.3rem);line-height:1.05;letter-spacing:-.022em}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin:2.6rem 0 .9rem}
h3{font-size:1.3rem;font-weight:600;margin:2rem 0 .6rem}
p,ul,ol{margin:0 0 1.1rem}
a{color:var(--spruce);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--spruce-lift)}
strong{font-weight:600}
:focus-visible{outline:2px solid var(--spruce);outline-offset:3px;border-radius:2px}
code,.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;font-size:.88em}
.num{font-variant-numeric:tabular-nums}
img,svg{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--spruce);color:var(--paper);
padding:.7rem 1.1rem;z-index:200;border-radius:0 0 3px 0;font-weight:600}
.skip:focus{left:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2.5rem)}
.col{max-width:var(--read)}
/* header */
header.site{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--paper) 88%,transparent);
backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:1.2rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);
font-family:'Newsreader',Georgia,'Times New Roman',serif;font-size:1.22rem;letter-spacing:-.02em;font-weight:600;flex-shrink:0}
.brand svg{flex-shrink:0}
.brand b{font-weight:600}
.brand i{font-style:normal;color:var(--spruce)}
nav.main{margin-left:auto;display:flex;gap:.25rem;align-items:center}
nav.main a{color:var(--ink-2);text-decoration:none;font-size:.94rem;padding:.55rem .7rem;
border-radius:3px;font-weight:600}
nav.main a:hover,nav.main a[aria-current]{color:var(--ink);background:var(--chip)}
nav.main a.btn,nav.main a.btn:hover{color:var(--on-accent);background:var(--spruce)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
background:var(--spruce);color:var(--on-accent);border:1px solid var(--spruce);
padding:.6rem 1.05rem;border-radius:3px;text-decoration:none;font-weight:600;font-size:.94rem;
min-height:44px;cursor:pointer;font-family:inherit;transition:transform .12s ease}
.btn:hover{background:var(--spruce-lift);border-color:var(--spruce-lift);color:var(--paper);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--spruce);border-color:var(--border)}
.btn.ghost:hover{background:var(--chip);color:var(--spruce)}
.iconbtn{background:transparent;border:1px solid var(--border);color:var(--ink-2);
width:44px;height:44px;min-width:44px;border-radius:3px;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center}
.iconbtn:hover{background:var(--chip);color:var(--ink)}
.menu-btn{display:none}
@media(max-width:900px){
 nav.main{position:fixed;inset:64px 0 auto;background:var(--surface);
  border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;
  padding:.6rem clamp(1rem,4vw,2.5rem) 1.2rem;gap:.1rem;margin:0;box-shadow:var(--shadow)}
 nav.main[hidden]{display:none}
 nav.main a{padding:.85rem .6rem;font-size:1rem;min-height:44px;display:flex;align-items:center}
 nav.main .btn{margin-top:.6rem}
 .menu-btn{display:inline-flex}
 .bar{gap:.5rem}
}
/* hero */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem);
display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
@media(min-width:940px){.hero{grid-template-columns:1.05fr .95fr}}
.eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--spruce);margin:0 0 1rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.lede{font-size:1.15rem;color:var(--ink-2);line-height:1.6;margin:1.4rem 0 0;max-width:56ch}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem;align-items:center}
.cta-note{font-size:.85rem;color:var(--ink-3)}
/* hero animation */
.heroart{background:var(--surface);border:1px solid var(--rule);border-radius:4px;
padding:1.6rem;box-shadow:var(--shadow)}
.heroart svg{display:block;width:100%;height:auto}
.doc-card{opacity:0;animation:slot .5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes slot{from{opacity:0;transform:translateY(-14px) scaleY(.94)}to{opacity:1;transform:none}}
/* sections */
section{padding:clamp(2.5rem,5vw,4rem) 0}
.sec-h{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.4rem}
.sec-h .n{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;font-size:.72rem;font-weight:600;
color:var(--spruce);letter-spacing:.08em;padding-top:.45rem;flex-shrink:0}
/* stat strip */
.stats{margin:2.6rem 0 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);
display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.stat{padding:1.15rem 1.25rem 1.3rem;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
@media(max-width:700px){.stat{border-right:0;border-bottom:1px solid var(--rule)}
 .stat:last-child{border-bottom:0}}
.stat dt{font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
color:var(--ink-3);margin:0}
.stat dd{margin:.4rem 0 0;font-family:'Newsreader',Georgia,'Times New Roman',serif;font-size:1.75rem;line-height:1.1;
font-variant-numeric:tabular-nums}
.stat p{margin:.3rem 0 0;font-size:.78rem;color:var(--ink-3);line-height:1.45}
/* cards */
.grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:1.4rem;
display:flex;flex-direction:column;transition:transform .14s ease,box-shadow .14s ease}
a.card{text-decoration:none;color:inherit}
a.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border)}
.card h3{margin:0 0 .5rem;font-size:1.16rem}
.card p{color:var(--ink-2);font-size:.94rem;margin:0 0 .8rem}
.card .more{margin-top:auto;color:var(--spruce);font-weight:600;font-size:.9rem}
/* In a row of product cards the descriptions are different lengths, so without
   this the buy buttons land at different heights and the row looks unfinished.
   Pushing the button down puts every call to action on the same line. */
.card>.btn{margin-top:auto}
.card>.btn+.cta-note{margin-bottom:0}
/* Licence line. Sits directly under a price, so it has to read as part of the
   offer rather than as small print — same weight as the body text, one line at
   most widths, and it wraps rather than clipping when it cannot be. */
.lic{font-size:.82rem;color:var(--ink-2);margin:-.4rem 0 .9rem;line-height:1.5;
border-left:2px solid var(--spruce);padding-left:.7rem}
.lic b,.lic strong{color:var(--ink);font-weight:600}
.tag{display:inline-block;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;font-size:.7rem;
background:var(--chip);color:var(--ink-2);padding:.22rem .5rem;border-radius:2px;
margin-bottom:.7rem;letter-spacing:.03em}
/* tables */
.tw{overflow-x:auto;margin:1.6rem 0;border:1px solid var(--rule);border-radius:4px;
background:var(--surface)}
.tw:focus-visible{outline:2px solid var(--spruce);outline-offset:2px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.92rem}
caption{text-align:left;padding:.9rem 1rem .2rem;color:var(--ink-3);font-size:.82rem}
th{text-align:left;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-3);padding:.8rem 1rem;border-bottom:1px solid var(--border);
background:var(--sunk);white-space:nowrap}
td{padding:.75rem 1rem;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td.f,th.f{text-align:left;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;word-break:break-all}
/* Key column — the "if" or "what" side of a two-column table. It holds prose,
   so it wraps. It used to carry .n, a numeric class with white-space:nowrap and
   a monospace right-align: sentences could not break, tables grew to 942px
   inside a 678px column, and the answers scrolled off the side of the screen. */
td.k{font-weight:600;color:var(--ink);padding-right:1.4rem}
/* Genuinely numeric cells: figures that should line up under each other. */
td.num,th.num{text-align:right;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
font-variant-numeric:tabular-nums;white-space:nowrap}
/* notes */
.note{border-left:3px solid var(--brass);padding:.15rem 0 .15rem 1.1rem;margin:1.6rem 0;
color:var(--ink-2);font-size:.96rem}
.note b{color:var(--ink);font-weight:600}
.note.risk{border-left-color:var(--kill)}
.note.good{border-left-color:var(--pass)}
/* figures */
figure{margin:2rem 0;background:var(--surface);border:1px solid var(--rule);border-radius:4px;
padding:1.4rem}
figcaption{font-size:.84rem;color:var(--ink-3);margin-top:.9rem}
details{margin-top:.9rem;border-top:1px solid var(--rule);padding-top:.8rem}
summary{cursor:pointer;font-size:.88rem;font-weight:600;color:var(--spruce);
padding:.35rem 0;min-height:32px}
summary:hover{color:var(--spruce-lift)}
details[open] summary{margin-bottom:.6rem}
details ol,details ul{font-size:.92rem;color:var(--ink-2)}
/* footer */
footer.site{margin-top:4rem;border-top:1px solid var(--rule);background:var(--surface);
padding:2.6rem 0 2rem;font-size:.9rem}
.fgrid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
footer.site h2{font-family:inherit;font-size:.7rem;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-3);margin:0 0 .7rem}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:.4rem}
footer.site a{color:var(--ink-2);text-decoration:none}
footer.site a:hover{color:var(--spruce);text-decoration:underline}
.legal{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--rule);
color:var(--ink-3);font-size:.82rem;line-height:1.6;max-width:78ch}
/* breadcrumb */
.crumb{font-size:.82rem;color:var(--ink-3);padding:1.1rem 0 .2rem}
.crumb a{color:var(--ink-3);text-decoration:none;display:inline-block;
padding:.35rem .1rem;min-height:24px;line-height:1.45}
.crumb a:hover{color:var(--spruce);text-decoration:underline}
.crumb span{margin:0 .4rem;opacity:.5}
/* article */
.meta{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.82rem;color:var(--ink-3);
margin:1.2rem 0 0;padding-bottom:1.4rem;border-bottom:1px solid var(--rule)}
article ul,article ol{padding-left:1.3rem}
article li{margin-bottom:.45rem}
.answer{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--spruce);
border-radius:4px;padding:1.2rem 1.4rem;margin:1.6rem 0;font-size:1.04rem}
.answer p:last-child{margin-bottom:0}
/* forms */
.field{margin-bottom:1rem}
label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.35rem}
input[type=email],input[type=text],input[type=password]{width:100%;padding:.7rem .85rem;
border:1px solid var(--border);border-radius:3px;background:var(--paper);color:var(--ink);
font-family:inherit;font-size:1rem;min-height:44px}
input:focus{outline:2px solid var(--spruce);outline-offset:1px;border-color:var(--spruce)}
.check{display:flex;gap:.65rem;align-items:flex-start;font-size:.9rem;color:var(--ink-2);
font-weight:400;line-height:1.5}
.check input{margin-top:.28rem;width:18px;height:18px;min-width:18px;accent-color:var(--spruce)}
.hp{position:absolute;left:-9999px}
.signup{background:var(--surface);border:1px solid var(--rule);border-radius:4px;
padding:1.6rem;margin:2.5rem 0}
.formmsg{font-size:.92rem;margin-top:.8rem}
.formmsg.ok{color:var(--pass)}
.formmsg.err{color:var(--kill)}
/* checker: rules live in the checker block further down */
fieldset{border:1px solid var(--rule);border-radius:4px;padding:1.4rem;margin:0 0 1.2rem}
legend{font-family:'Newsreader',Georgia,'Times New Roman',serif;font-size:1.3rem;padding:0 .5rem}
.badge{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;padding:.25rem .6rem;border-radius:2px;margin-bottom:.6rem}
.badge.yes{background:var(--pass);color:var(--on-accent)}
.badge.maybe{background:var(--brass);color:var(--on-accent)}
.badge.no{background:var(--chip);color:var(--ink-2)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
 transition-duration:.01ms!important;scroll-behavior:auto!important}
 .doc-card{opacity:1!important}
}
@media print{header.site,footer.site,.cta-row,body::before,body::after{display:none}}

/* ---------- utility ---------- */
.spruce{color:var(--spruce)}
.srcs{font-size:.92rem}
.srcs li{margin-bottom:.35rem}
.mt0{margin-top:0}
.mt-lg{margin-top:1.4rem}
.big{font-size:1.3rem}
.ink2{color:var(--ink-2)}
.dim{color:var(--ink-3);font-size:.9rem}
.dim2{color:var(--ink-2);font-size:.95rem}
.mail{font-size:1.35rem;font-weight:600;margin:1.4rem 0;word-break:break-word}
.bordered{border-color:var(--border)}
hr.rule{border:0;border-top:1px solid var(--rule);margin:2.4rem 0 1.4rem}
.legal.copyline{margin-top:.8rem;border:0;padding:0}
ul.two{columns:2;column-gap:2.2rem}
ul.two li{break-inside:avoid}
@media (max-width:700px){ul.two{columns:1}}

/* ---------- storage notice ---------- */
.notice{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface);
border-top:1px solid var(--border);box-shadow:0 -6px 24px -16px rgba(0,0,0,.4)}
.notice-in{display:flex;gap:1.2rem;align-items:center;justify-content:space-between;
flex-wrap:wrap;padding:.9rem 0}
.notice-in p{margin:0;font-size:.9rem;color:var(--ink-2);max-width:80ch}
.notice-in .btn{flex:none}

/* ---------- checker ---------- */
textarea{width:100%;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
font-size:.78rem;line-height:1.5;padding:1rem;border:1px solid var(--border);border-radius:4px;
background:var(--sunk);color:var(--ink);resize:vertical;white-space:pre;overflow-wrap:normal;
overflow-x:auto;tab-size:2}
textarea:focus-visible{outline:2px solid var(--spruce);outline-offset:2px}
fieldset.packs{border:1px solid var(--rule);border-radius:4px;padding:1rem 1.1rem 1.1rem;
margin:0 0 1.2rem;background:var(--paper)}
fieldset.packs legend{font-family:'Public Sans',-apple-system,sans-serif;font-size:.9rem;
font-weight:600;padding:0 .4rem;color:var(--ink)}
label.opt.small{padding:.5rem .7rem;min-height:40px;font-size:.94rem;margin-bottom:.35rem;
border-color:var(--rule)}
label.opt.small input{width:16px;height:16px;margin-top:.22rem}
select{width:100%;padding:.65rem .8rem;border:1px solid var(--border);border-radius:3px;
background:var(--paper);color:var(--ink);font-family:inherit;font-size:1rem;min-height:44px}
select:focus{outline:2px solid var(--spruce);outline-offset:1px}
textarea[name="note"]{font-family:inherit;font-size:1rem;line-height:1.55;white-space:pre-wrap;
background:var(--paper);padding:.7rem .8rem}
form#checker{margin:2rem 0 1rem}
.prow{display:flex;align-items:center;justify-content:space-between;gap:1rem;
flex-wrap:wrap;margin:0 0 1.1rem}
.btn.small{padding:.35rem .75rem;font-size:.82rem;min-height:32px}
.progress{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;font-size:.78rem;
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin:0}
fieldset.step{border:1px solid var(--border);border-radius:4px;padding:1.5rem;margin:0 0 1.2rem;
background:var(--surface)}
fieldset.step legend{font-family:'Newsreader',Georgia,'Times New Roman',serif;font-size:1.35rem;line-height:1.3;
padding:0 .5rem;color:var(--ink)}
.stepn{display:block;font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;font-size:.7rem;
letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.25rem}
.hint{font-size:.92rem;color:var(--ink-2);margin:.6rem 0 1.1rem}
.opts{display:flex;flex-direction:column;gap:.55rem}
label.opt{display:flex;gap:.75rem;align-items:flex-start;padding:.8rem .9rem;
border:1px solid var(--rule);border-radius:4px;cursor:pointer;background:var(--paper);
min-height:44px;line-height:1.45}
label.opt:hover{border-color:var(--spruce);background:var(--sunk)}
label.opt input{margin-top:.2rem;width:18px;height:18px;flex:none;accent-color:var(--spruce)}
label.opt:has(input:checked){border-color:var(--spruce);background:var(--sunk);
box-shadow:inset 0 0 0 1px var(--spruce)}
label.opt:focus-within{outline:3px solid var(--spruce);outline-offset:2px}
.steperr{color:var(--kill);font-size:.94rem;font-weight:600;margin:1.2rem 0 0;
border-left:3px solid var(--kill);padding-left:.9rem}
.stepdone{color:var(--ink);font-size:.94rem;font-weight:600;margin:1.4rem 0 0;
border-left:3px solid var(--pass);padding-left:.9rem}
.navrow{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.result{border:2px solid var(--spruce);border-radius:4px;padding:1.6rem;margin:1.6rem 0;
background:var(--surface)}
.result:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.result h2{margin-top:0}
.result h3{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline}
.result h3:first-of-type{margin-top:.6rem}
ul.next{margin:.8rem 0 0;padding-left:1.2rem}
ul.next li{margin-bottom:.3rem}

/* Home page hero animation. These rules used to live in a <style> element
   inside the hero SVG, where the site's own Content-Security-Policy
   (style-src 'self', no unsafe-inline) refused to apply them: the animation
   never ran and every visit logged a CSP error. Served from a file, they work.
   Scoped to .heroart so .dc and .cvr cannot collide with anything else. */
.heroart .dc{opacity:0;animation:slot .5s cubic-bezier(.2,.7,.3,1) forwards}
.heroart .dc:nth-of-type(1){animation-delay:.15s}
.heroart .dc:nth-of-type(2){animation-delay:.3s}
.heroart .dc:nth-of-type(3){animation-delay:.45s}
.heroart .dc:nth-of-type(4){animation-delay:.6s}
.heroart .dc:nth-of-type(5){animation-delay:.75s}
.heroart .dc:nth-of-type(6){animation-delay:.9s}
.heroart .dc:nth-of-type(7){animation-delay:1.05s}
.heroart .dc:nth-of-type(8){animation-delay:1.2s}
.heroart .cvr{opacity:0;animation:slot .6s cubic-bezier(.2,.7,.3,1) 1.5s forwards}
@keyframes slot{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .heroart .dc,.heroart .cvr{opacity:1!important;animation:none!important}
}