:root{
  --ink:#141414; --paper:#fff; --bg:#f4f4f1; --red:#c8102e; --green:#00703c; --yellow:#ffd100; --muted:#505050; --rule:#d6d6d0;
  --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(--bg);color:var(--ink);font:1.0625rem/1.65 var(--sans)}
a{color:#a30d26;text-underline-offset:.15em;text-decoration-thickness:2px}
:focus-visible{outline:4px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem .75rem;z-index:5}
.stripe{height:.9rem;background:repeating-linear-gradient(-45deg,var(--ink) 0 14px,var(--yellow) 14px 28px)}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.25rem 2.5rem}
.site{margin:0;padding:1.1rem 0 .5rem;font-weight:800;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase}
.hero{padding:.5rem 0 1.75rem}
h1{margin:0 0 1rem;font-weight:900;font-size:clamp(2.2rem,7vw,4.4rem);line-height:1;letter-spacing:-.03em;max-width:12em}
.lead{margin:0;max-width:40rem;font-size:1.15rem;color:var(--muted)}

.chooser{display:grid;gap:1.25rem;margin-bottom:2.5rem}
@media(min-width:52rem){.chooser{grid-template-columns:18rem 1fr;align-items:start}.cards{position:sticky;top:1rem}}
fieldset.opts{margin:0;padding:0;border:0;display:grid;gap:.5rem}
legend{padding:0;margin-bottom:.5rem;font-weight:800;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:block;padding:.8rem 1rem;background:var(--paper);border:3px solid var(--ink);font-weight:700;line-height:1.25}
.opt:hover span{background:#fff7cc}
.opt input:checked + span{background:var(--ink);color:#fff}
.opt input:focus-visible + span{outline:4px solid var(--red);outline-offset:2px}

.spec{background:var(--paper);border:3px solid var(--ink)}
.spec[hidden]{display:none}
.spec header{background:var(--red);color:#fff;padding:1rem 1.25rem}
.kicker{margin:0 0 .15rem;font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;opacity:.92}
.spec h2{margin:0;font-weight:900;font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.1;letter-spacing:-.015em}
.spec dl{margin:0;padding:1.25rem}
.spec dt{margin-top:1rem;font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.spec dt:first-child{margin-top:0}
.spec dd{margin:.2rem 0 0;max-width:38rem}
.more{margin:0;padding:0 1.25rem 1.25rem;max-width:38rem}

.notes{background:var(--paper);border:3px solid var(--ink);padding:1.5rem}
@media(min-width:48rem){.notes{padding:2.25rem 2.5rem}}
.notes section{padding:1.25rem 0;border-top:2px solid var(--rule)}
.notes section:first-child{border-top:0;padding-top:0}
.notes section:last-child{padding-bottom:0}
.notes h2{margin:0 0 .75rem;font-weight:900;font-size:1.5rem;line-height:1.15}
.notes p{margin:0;max-width:40rem}
.three{display:grid;gap:1rem}
@media(min-width:40rem){.three{grid-template-columns:repeat(3,1fr)}}
.three h3{margin:0 0 .25rem;font-weight:800;font-size:1.05rem;color:var(--green)}
.three p{font-size:.98rem}
.foot{padding:1.5rem 0 .5rem;color:var(--muted);font-size:.88rem}.foot p{margin:0;max-width:44rem}