:root{
  --paper:#ffffff; --ink:#1c1917; --body:#2e2a26; --muted:#6b6259;
  --line:#e5ded4; --wash:#faf6f0; --accent:#c2410c; --accent-ink:#9a3408;
  --dark:#1c1917; --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{background:var(--dark)}
.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:#fff;text-decoration:none;white-space:nowrap}
.wordmark span{color:#fb923c}
.site-nav{display:flex;gap:18px;margin-left:auto;font-size:.95rem}
.site-nav a{color:#d6d0c6;text-decoration:none}
.site-nav a:hover{color:#fff}
.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}
.priceband{background:var(--dark);color:#f5f1ea;border-radius:var(--radius);padding:18px 24px;margin:1.6em 0}
.priceband .range{font-family:var(--serif);font-size:1.9rem;color:#fdba74}
.priceband p{margin:.4em 0}
table.costs{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95rem}
table.costs th,table.costs td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
table.costs th{background:var(--wash);font-family:var(--serif);color:var(--ink)}
.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}.priceband .range{font-size:1.5rem}}
/* === 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(28,25,23,.07) 0 1px,transparent 1px 10px)}

@media(max-width:480px){
.site-nav{margin-left:0}
}