:root{--ink:#241f26;--muted:#63596a;--bg:#fbf9f7;--card:#ffffff;--accent:#8d4f66;--accent-dark:#6d3a4e;--line:#e8e1e4;--good:#2e7d4f;--warn:#a33;}
*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;height:auto}
body{font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:18px}
header{background:var(--ink);padding:14px 20px}
header .wrap{max-width:920px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:16px}
header a{color:#fff;text-decoration:none}
header .logo{font-weight:bold;font-size:1.15rem;letter-spacing:.5px}
header nav a{color:#cfd4dd;font-size:.85rem;margin-right:14px;font-family:Helvetica,Arial,sans-serif}
header nav a:hover{color:#fff}
header nav a[aria-current]{color:#fff;font-weight:bold}
main{max-width:920px;margin:0 auto;padding:28px 20px 60px}
h1{font-size:1.9rem;line-height:1.25;margin:10px 0 6px}
h2{font-size:1.4rem;margin:34px 0 10px}
h3{font-size:1.12rem;margin:24px 0 8px}
p{margin:12px 0}
ul,ol{margin:12px 0 12px 26px}
li{margin:6px 0}
a{color:var(--accent-dark)}
.meta{font-family:Helvetica,Arial,sans-serif;font-size:.8rem;color:var(--muted);margin-bottom:4px}
.disclosure{font-family:Helvetica,Arial,sans-serif;font-size:.78rem;color:var(--muted);background:#f6f1f3;border:1px solid var(--line);border-radius:6px;padding:8px 12px;margin:14px 0}
.btn{display:inline-block;font-family:Helvetica,Arial,sans-serif;background:var(--accent);color:#fff !important;text-decoration:none;font-weight:bold;font-size:.95rem;padding:12px 22px;border-radius:6px;margin:8px 0}
.btn:hover{background:var(--accent-dark)}
.btn.secondary{background:#fff;color:var(--accent-dark) !important;border:2px solid var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin:18px 0}
.card h3{margin-top:0}
.verdict{border-left:5px solid var(--accent);background:#fdf6f8;padding:14px 18px;margin:20px 0;border-radius:0 8px 8px 0}
.pros-cons{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0}
.pros-cons>div{flex:1;min-width:240px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.pros-cons h4{font-family:Helvetica,Arial,sans-serif;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.pros-cons .pros h4{color:var(--good)}.pros-cons .cons h4{color:var(--warn)}
.pros-cons ul{margin-left:18px;font-size:.95rem}
table{border-collapse:collapse;width:100%;margin:18px 0;font-family:Helvetica,Arial,sans-serif;font-size:.85rem}
th,td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
th{background:#f6f1f3}
tr:nth-child(even){background:#faf7f8}
.table-scroll{overflow-x:auto}
.badge{display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:.7rem;font-weight:bold;text-transform:uppercase;letter-spacing:.5px;background:var(--accent);color:#fff;border-radius:4px;padding:3px 8px;margin-bottom:8px}
.specbox{font-family:Helvetica,Arial,sans-serif;font-size:.88rem;background:#f6f1f3;border-radius:8px;padding:14px 18px;margin:14px 0}
.specbox strong{display:inline-block;min-width:150px}
footer{border-top:1px solid var(--line);background:#f6f1f3;margin-top:40px}
footer .wrap{max-width:920px;margin:0 auto;padding:24px 20px;font-family:Helvetica,Arial,sans-serif;font-size:.8rem;color:var(--muted)}
footer a{color:var(--muted);margin-right:14px}
.faq dt{font-weight:bold;margin-top:16px}
.faq dd{margin:6px 0 0 0}

figure{margin:18px 0}
figure img{display:block;width:100%;max-width:720px;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
figcaption{font-family:Helvetica,Arial,sans-serif;font-size:.78rem;color:var(--muted);margin-top:6px;max-width:720px}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn:active{background:var(--accent-dark);transform:translateY(1px)}
.tier{display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:.68rem;font-weight:bold;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;padding:2px 7px;margin-right:6px;border:1px solid var(--line);background:#f6f1f3;color:var(--muted)}
.split{display:flex;gap:16px;flex-wrap:wrap;margin:18px 0}
.split>div{flex:1;min-width:250px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.split h3{margin-top:0}
.stack-list{list-style:none;margin-left:0}
.stack-list li{margin:10px 0;padding-left:0}

.hero{margin:18px 0 4px}
.hero img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}

html{scroll-behavior:smooth}
.pagehero{display:block;width:100%;aspect-ratio:3/1;object-fit:cover;border-radius:8px;margin:0 0 26px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
h2[id],h3[id]{scroll-margin-top:18px}
.jump{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:20px 0 8px;padding:12px 16px;background:#f6f1f3;border:1px solid var(--line);border-radius:10px}
.jump b{font-family:Helvetica,Arial,sans-serif;font-size:.72rem;font-weight:bold;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
.jump a{font-family:Helvetica,Arial,sans-serif;font-size:.85rem;font-weight:bold;text-decoration:none;color:var(--accent-dark);background:#fff;border:1px solid var(--accent);border-radius:999px;padding:16px 20px;line-height:1.15;min-height:48px}
.jump a:hover{background:var(--accent);color:#fff}
.jump a:active{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.jump a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* mobile overrides last: equal-specificity rules are resolved by source order */
@media(max-width:600px){body{font-size:16.5px}h1{font-size:1.55rem}header nav{display:flex;flex-wrap:wrap;gap:0 18px}header nav a{display:flex;align-items:center;min-height:44px;margin-right:0}figure{overflow-x:auto;-webkit-overflow-scrolling:touch}figure img{max-width:none;width:auto}.jump{gap:8px}.jump a{flex:1 1 auto;text-align:center}}

/* --- Header nav dropdowns (added 2026-08-18) ------------------------------
   The 2026-08-18 nav sweep put every money page in the header, which is the
   rule (OPERATIONS.md s22) and is not up for debate. It produced 10 to 17
   top-level links. Tyson, same day: "10 to 17 links is too many."
   THE FIX IS NESTING, NOT DELETION. apply_nav.py emits
   <details class="navgroup"><summary>Reviews</summary><ul>...</ul></details>
   and every nested href still counts for check_nav's header coverage.

   NO JAVASCRIPT. Desktop opens on :hover AND :focus-within, and the
   :focus-within half is what makes it keyboard-reachable, so it is not
   optional. `::details-content{content-visibility:visible}` is what lets a
   CLOSED <details> show its panel on hover; without it the UA keeps the panel
   unrendered and the dropdown never appears. Verified in Chromium at 1280px:
   hover shows it, and two Tabs from the top of the page open it with no mouse.
   Mobile keeps the native <details> accordion, which needs no script at all.

   This block sits LAST in the file ON PURPOSE. It ends with the mobile
   overrides, which is the invariant at the top of base.css (source order beats
   intent), and its mobile half must beat the older `header nav{flex-wrap}`
   rule in the block above it. Append new NON-mobile rules above this block.
   -------------------------------------------------------------------------- */
header nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px}
header nav a{margin-right:0}
.navgroup{position:relative}
.navgroup>summary{list-style:none;cursor:pointer;color:#cfd4dd;font-size:.85rem;font-family:Helvetica,Arial,sans-serif}
.navgroup>summary::-webkit-details-marker{display:none}
.navgroup>summary::after{content:" \25BE";font-size:.72em;padding-left:3px}
.navgroup>summary:hover{color:#fff}
.navgroup>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.navgroup>ul{list-style:none;margin:0;padding:6px 0}
.navgroup>ul>li{margin:0}
.navgroup>ul>li>a{display:block;padding:9px 16px;white-space:nowrap}
.navgroup>ul>li>a:hover{color:#fff}
@media(min-width:601px){
.navgroup::details-content{content-visibility:visible;block-size:auto;overflow:visible}
.navgroup>ul{display:none;position:absolute;top:100%;left:-12px;z-index:60;background:var(--ink);border:1px solid rgba(255,255,255,.18);border-radius:8px;min-width:210px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.navgroup:hover>ul,.navgroup:focus-within>ul{display:block}
}
@media(max-width:600px){
header .wrap{flex-direction:column;align-items:stretch;gap:6px}
header nav{flex-direction:column;align-items:stretch;gap:0;width:100%}
header nav>a{display:flex;align-items:center;min-height:44px;margin-right:0}
.navgroup>summary{display:flex;align-items:center;min-height:44px}
.navgroup>ul{padding:0 0 6px 16px}
.navgroup>ul>li>a{display:flex;align-items:center;min-height:44px;padding:0}
}