:root{
  --paper:#ffffff; --ink:#17211b; --body:#2c3530; --muted:#5d6a62;
  --line:#dce5de; --wash:#f0f6f1; --accent:#166534; --accent-ink:#0f4a26;
  --radius:10px;
  --serif:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.66}
h1,h2,h3{font-family:var(--serif);color:var(--ink);line-height:1.22;font-weight:700}
h1{font-size:2.05rem;margin:.4em 0 .3em}
h2{font-size:1.45rem;margin:1.8em 0 .5em}
h3{font-size:1.12rem;margin:1.4em 0 .4em}
p{margin:.8em 0}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--accent-ink)}
.wrap{max-width:70ch;margin:0 auto;padding:0 22px}
.site-header{border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:26px;padding-top:14px;padding-bottom:14px}
.wordmark{font-family:var(--serif);font-weight:700;font-size:1.3rem;color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--accent)}
.site-nav{display:flex;gap:18px;margin-left:auto;font-size:.95rem}
.site-nav a{color:var(--body);text-decoration:none}
.site-nav a:hover{color:var(--accent)}
.hero{background:var(--wash);border-bottom:1px solid var(--line);padding:34px 0 30px}
.dek{font-size:1.1rem;max-width:58ch}
.meta{font-size:.85rem;color:var(--muted)}
.article{padding:26px 0 60px}
.step{border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:1.2em 0}
.step h3{margin:.1em 0 .3em}
.step .n{display:inline-block;background:var(--accent);color:#fff;font-family:var(--sans);font-weight:700;font-size:.85rem;border-radius:999px;width:1.7em;height:1.7em;line-height:1.7em;text-align:center;margin-right:.5em}
.promptbox{background:#17211b;color:#e8f0ea;border-radius:8px;padding:14px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;line-height:1.6;white-space:pre-wrap;margin:1em 0}
.keyline{border:2px solid var(--ink);border-radius:var(--radius);padding:16px 22px;margin:2em 0}
.keyline p:first-child{margin-top:0}
.card-list{list-style:none;margin:1.4em 0;padding:0;display:grid;gap:14px}
.card-list a{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;text-decoration:none}
.card-list a:hover{border-color:var(--accent)}
.card-list strong{font-family:var(--serif);font-size:1.15rem;color:var(--ink);display:block}
.card-list span{color:var(--muted);font-size:.93rem}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;padding:10px 22px;border-radius:8px;text-decoration:none}
.btn:hover{background:var(--accent-ink);color:#fff}
.disclosure-note{background:var(--wash);border:1px solid var(--line);border-radius:8px;padding:10px 16px;font-size:.88rem}
.site-footer{border-top:1px solid var(--line);padding:26px 0 40px;font-size:.9rem;color:var(--muted)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:12px}
.site-footer a{color:var(--muted)}
ul.tight li{margin:.35em 0}
@media(max-width:640px){h1{font-size:1.65rem}.site-nav{gap:12px;font-size:.88rem}}
/* === responsive + polish layer === */
img,svg,video,canvas,iframe{max-width:100%;height:auto}
body{overflow-x:hidden}
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.site-header .wrap{flex-wrap:wrap;row-gap:8px}
.site-nav{flex-wrap:wrap;row-gap:4px}
.site-nav a{padding:8px 2px}
.hero{position:relative;overflow:hidden}
.promptbox{overflow-x:auto}
@media(max-width:640px){
body{font-size:16px}
.wrap{padding:0 18px}
.hero{padding:26px 0 24px}
.scoreboard,.proscons{grid-template-columns:1fr}
.scoreboard>div+div{border-left:none;border-top:1px solid var(--line)}
table{font-size:.88rem}
th,td{padding:7px 9px}
.btn,.btn-ghost{display:block;text-align:center;margin:.4em 0}
.priceband .range{font-size:1.5rem}
.step .n{width:1.6em;height:1.6em;line-height:1.6em}
}
@media(max-width:400px){
h1{font-size:1.5rem}
.site-nav{font-size:.85rem;gap:10px}
.wordmark{font-size:1.1rem}
.dek{font-size:1rem}
}
.hero{background-image:repeating-linear-gradient(135deg,rgba(23,33,27,.07) 0 1px,transparent 1px 10px)}