@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/bricolage-grotesque-800-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-500-latin.woff2) format("woff2")}
:root{
  color-scheme: dark light;
  --bg:#0e1013; --surface:#161a1f; --surface-2:#1d2229; --border:#2a313a;
  --text:#eef0f3; --muted:#a3aab4; --accent:#ff7a3d; --accent-ink:#1a0d05;
  --use:#3ddc84; --watch:#f5c542; --skip:#ff6b6b;
  --radius:14px; --max:1080px;
  --font: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display: "Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono: "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#fafaf8; --surface:#fff; --surface-2:#f7f7f4; --border:#dcdcd4;
    --text:#14161a; --muted:#4a5059; --accent:#c8460f; --accent-ink:#fff;
    --use:#12804a; --watch:#8a6500; --skip:#c22f2f;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skiplink{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;z-index:10;border-radius:0 0 8px 0}
.skiplink:focus{left:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
header.top{padding:1.25rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text)}
.brand img{display:block;height:48px;width:auto}
.fmark{height:24px;width:auto;vertical-align:-6px;margin-right:.6rem}
.top .wrap{display:flex;justify-content:space-between;align-items:center}
.top nav a{color:var(--muted);text-decoration:none;margin-left:1.25rem;font-size:.95rem}
.top nav a:hover{color:var(--text)}
@media(max-width:640px){.top .wrap{flex-wrap:wrap;gap:.75rem}.top nav{display:flex;flex-wrap:wrap;gap:.35rem .9rem;width:100%;justify-content:flex-start}.top nav a{margin-left:0;font-size:.88rem}}
.hero{padding:4.5rem 0 4rem;text-align:center;background:radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
.eyebrow{display:inline-block;font-family:var(--mono);font-weight:500;font-size:.82rem;color:var(--muted);border:1px solid var(--border);padding:.3rem .8rem;border-radius:999px;margin-bottom:1.5rem}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em}
h1{font-size:clamp(2.3rem,6vw,4.1rem);line-height:1.05;letter-spacing:-.035em;margin:0 auto 1.25rem;max-width:16ch}
h1 em{font-style:normal;color:var(--accent)}
.lede{max-width:56ch;margin:0 auto 2rem;color:var(--muted);font-size:1.15rem}
form.signup{display:flex;gap:.6rem;max-width:480px;margin:0 auto;flex-wrap:wrap}
form.signup input[type=email]{flex:1 1 240px;min-width:0;padding:.9rem 1rem;font:inherit;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text)}
form.signup input::placeholder{color:var(--muted)}
button.btn{padding:.9rem 1.4rem;font:inherit;font-weight:700;border:0;border-radius:10px;background:var(--accent);color:var(--accent-ink);cursor:pointer;transition:transform .15s,filter .15s}
a.btn{display:inline-block;padding:.9rem 1.6rem;font-weight:700;border-radius:10px;background:var(--accent);color:var(--accent-ink);text-decoration:none;transition:transform .15s,filter .15s}
a.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.signup-status{min-height:1.4em;margin-top:.75rem;font-size:.95rem;color:var(--muted)}
.signup-status[data-state=ok]{color:var(--use)}
.signup-status[data-state=err]{color:var(--skip)}
button.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.fine{color:var(--muted);font-size:.88rem;margin-top:.9rem}
.pills{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:2.25rem}
.v{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-weight:500;font-size:.9rem;padding:.3rem .8rem;border-radius:999px;border:1px solid currentColor;background:color-mix(in srgb,currentColor 10%,transparent)}
.v::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:currentColor}
.v.use{color:var(--use)}.v.watch{color:var(--watch)}.v.no{color:var(--skip)}
section{padding:4rem 0}
section.alt{background:var(--surface);border-block:1px solid var(--border)}
h2{font-size:clamp(1.7rem,3.5vw,2.3rem);line-height:1.15;margin:0 0 .75rem}
.sub{color:var(--muted);max-width:60ch;margin:0 0 2.25rem}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem}
.alt .card{background:var(--bg)}
.card h3{margin:0 0 .4rem;font-size:1.1rem}
.card p{margin:0;color:var(--muted);font-size:.98rem}
.card .n{font-family:var(--mono);font-weight:500;font-size:.8rem;color:var(--accent);margin-bottom:.5rem;display:block}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.steps li{counter-increment:s;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem}
.steps li::before{content:counter(s);display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-weight:500;margin-bottom:.8rem}
.steps h3{margin:0 0 .3rem;font-size:1.1rem}.steps p{margin:0;color:var(--muted);font-size:.98rem}
.callout{margin-top:1.5rem;padding:1.25rem 1.4rem;border-left:4px solid var(--accent);background:var(--surface-2);border-radius:0 var(--radius) var(--radius) 0}
.callout p{margin:0}
.verdict{border-top:4px solid currentColor}
.verdict.use{color:var(--use)}.verdict.watch{color:var(--watch)}.verdict.no{color:var(--skip)}
.verdict h3,.verdict p{color:inherit}
.verdict h3{color:var(--text)}.verdict p{color:var(--muted)}
.verdict .v{margin-bottom:.8rem}
details{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:.7rem}
summary{cursor:pointer;padding:1rem 1.2rem;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent);font-family:var(--mono);font-weight:500;font-size:1.2rem;line-height:1}
details[open] summary::after{content:"–"}
details p{margin:0;padding:0 1.2rem 1.1rem;color:var(--muted)}
.cta{text-align:center}
.cta .sub{margin-inline:auto}
footer{border-top:1px solid var(--border);padding:2rem 0 3rem;color:var(--muted);font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
footer a{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.page-head{padding:3.5rem 0 1rem;background:radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}
.page-head h1{max-width:none;margin:0 0 1rem;font-size:clamp(2rem,5vw,3.2rem)}
.page-head .lede{margin:0;max-width:62ch}
.prose{max-width:760px}
.prose p{color:var(--muted)}
.prose ul{color:var(--muted);padding-left:1.2rem}
.prose li{margin-bottom:.5rem}
.prose strong{color:var(--text)}
.tbl{width:100%;border-collapse:collapse;margin:0 0 1.25rem;font-size:.97rem}
.tbl th,.tbl td{text-align:left;padding:.7rem .9rem;border:1px solid var(--border);vertical-align:top}
.tbl th{background:var(--surface-2)}
.tbl td{color:var(--muted)}
.tbl td:first-child{color:var(--text);font-weight:600}
.tblwrap{overflow-x:auto}

@media print{
  header.top nav,.skiplink,a.btn{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  a{color:#000;text-decoration:underline}
  .page-head{background:none;padding-top:0}
  .card,.callout,details{break-inside:avoid;border-color:#ccc}
  footer{border-top:1px solid #ccc}
}
.prose ul.verdict-notes{margin-top:1.5rem}

/* Polish layer (2026-10-17): type hierarchy, rhythm, hover/focus states, small motion. Same block in home.css, how-we-test.css, 404.css. */
::selection{background:var(--accent);color:var(--accent-ink)}
html{scroll-padding-top:1rem}
h2,h3{text-wrap:balance}
.lede,.sub,.card p,.prose p{text-wrap:pretty}
a{text-underline-offset:.18em;text-decoration-thickness:1px;transition:color .15s}
a:hover{text-decoration-thickness:2px}
h1{line-height:1.03}
h2{font-size:clamp(1.75rem,3.6vw,2.4rem);margin-bottom:.6rem}
.card h3,.steps h3{font-size:1.2rem;line-height:1.2;letter-spacing:-.025em;margin-bottom:.45rem}
.card .n{letter-spacing:.12em;margin-bottom:.8rem}
.eyebrow{letter-spacing:.06em;padding:.35rem .9rem .35rem .8rem}
.eyebrow::before{content:"";display:inline-block;width:.45rem;height:.45rem;margin-right:.55rem;border-radius:50%;background:var(--accent);vertical-align:.08em}
.hero{padding:clamp(3rem,8vw,5.5rem) 0 clamp(3rem,6vw,4.5rem)}
section{padding:clamp(3.25rem,7vw,5.25rem) 0}
.sub{margin-bottom:2.5rem;font-size:1.05rem}
.grid,.steps{gap:1.1rem}
.card,.steps li{padding:1.5rem}
.top nav a{padding:.4rem 0;text-underline-offset:.45em;text-decoration-color:var(--accent)}
.top nav a:hover{color:var(--text);text-decoration:underline;text-decoration-thickness:2px}
form.signup input[type=email]{padding:1rem 1.1rem;transition:border-color .15s}
form.signup input[type=email]:hover{border-color:var(--muted)}
form.signup input[type=email]:focus{border-color:var(--accent)}
button.btn,a.btn{letter-spacing:-.005em}
button.btn:active,a.btn:active{transform:translateY(0);filter:brightness(.95)}
.signup-status{margin-top:.6rem}
.signup-status+.fine{margin-top:.3rem}
summary{align-items:center;padding:1.05rem 1.25rem;transition:color .15s}
summary::after{font-size:1.3rem}
details{transition:border-color .2s}
details[open]{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.callout{padding:1.3rem 1.5rem}
footer{padding:2.5rem 0 3.25rem}
footer .wrap{align-items:center;gap:1rem 2rem}
footer .wrap>div:last-child{font-family:var(--mono);font-size:.82rem}
footer a{text-underline-offset:.2em;white-space:nowrap}
footer a:hover{color:var(--text)}
@media(max-width:640px){
  .top nav{gap:.1rem 1.1rem}
  .top nav a{font-size:.92rem}
  footer .wrap{flex-direction:column;align-items:flex-start}
}
@media(max-width:520px){
  form.signup{flex-direction:column}
  form.signup input[type=email],form.signup button.btn{width:100%;flex:none}
  .actions a.btn{flex:1 1 100%;text-align:center}
}
@media(hover:hover){
  .card,.steps li{transition:border-color .2s}
  .card:hover,.steps li:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
  .verdict:hover{border-top-color:currentColor}
  details:hover{border-color:color-mix(in srgb,var(--muted) 60%,var(--border))}
  details[open]:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
  summary:hover{color:var(--accent)}
}
@media(prefers-reduced-motion:no-preference){
  @keyframes bs-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .hero .wrap>*,.page-head .wrap>*,main>.wrap>*{animation:bs-rise .55s cubic-bezier(.2,.7,.2,1) both}
  .hero .wrap>:nth-child(2),.page-head .wrap>:nth-child(2),main>.wrap>:nth-child(2){animation-delay:.06s}
  .hero .wrap>:nth-child(3),.page-head .wrap>:nth-child(3),main>.wrap>:nth-child(3){animation-delay:.12s}
  .hero .wrap>:nth-child(4),.page-head .wrap>:nth-child(4),main>.wrap>:nth-child(4){animation-delay:.18s}
  .hero .wrap>:nth-child(n+5),.page-head .wrap>:nth-child(n+5),main>.wrap>:nth-child(n+5){animation-delay:.24s}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}