:root { --ink:#16202c; --muted:#566; --line:#dde3ea; --bg:#fff; --accent:#0b5cab; --accent-dark:#073f76; --soft:#f3f6fa; --win:#0a7d3a; --no:#b23; --maxw:980px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:28px 20px 64px; }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:10px 14px; z-index:1000; border-radius:0 0 6px 0; }
.skip-link:focus { left:0; }

/* Site header */
.site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.95); backdrop-filter:saturate(160%) blur(6px); border-bottom:1px solid var(--line); }
.site-header .bar { max-width:var(--maxw); margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.site-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.2px; }
.site-brand .mark { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; font-weight:800; font-size:15px; }
.site-brand .name { font-size:15px; line-height:1.1; }
.site-brand .name small { display:block; font-weight:600; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.6px; }
.site-nav { display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.site-nav a { text-decoration:none; color:var(--ink); font-size:14.5px; font-weight:600; padding:6px 2px; border-bottom:2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--accent); border-bottom-color:var(--accent); }

/* Hero */
.hero { background:linear-gradient(135deg,#0b5cab 0%,#073f76 100%); color:#fff; }
.hero .inner { max-width:var(--maxw); margin:0 auto; padding:34px 20px 30px; }
.hero .eyebrow { text-transform:uppercase; letter-spacing:1px; font-size:12px; font-weight:700; opacity:.9; }
.hero h1 { color:#fff; margin:.35em 0 .2em; }
.hero p.tagline { color:#e6eefc; font-size:1.1rem; max-width:680px; }
.hero .updated { color:#e6eefc; }
.hero .updated a { color:#fff; }
.breadcrumb { font-size:13px; opacity:.92; margin-bottom:8px; }
.breadcrumb a { color:#fff; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

/* Buttons */
.btn { display:inline-block; background:#fff; color:var(--accent-dark); font-weight:700; text-decoration:none; padding:11px 20px; border-radius:8px; margin:14px 10px 0 0; border:1px solid transparent; }
.btn:hover { background:#eef5ff; }
.btn.alt { background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn.alt:hover { background:rgba(255,255,255,.12); }
.btn.primary { background:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent-dark); }

.brand { font-weight:700; letter-spacing:.2px; color:var(--accent); text-transform:uppercase; font-size:13px; }
h1 { font-size:2rem; line-height:1.2; margin:.4em 0 .2em; }
h2 { font-size:1.4rem; margin:2.2em 0 .5em; padding-top:.3em; border-top:1px solid var(--line); }
h3 { font-size:1.12rem; margin:1.5em 0 .35em; }
p, li { color:var(--ink); }
.updated { color:var(--muted); font-size:.92rem; margin:.2em 0 1em; }
a { color:var(--accent); }
.lead { font-size:1.06rem; }
.answer-box { background:var(--soft); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; padding:16px 18px; }
.citation { font-weight:700; background:#eef5ff; border:1px solid #d4e4fb; border-radius:6px; padding:10px 12px; display:block; margin:14px 0 4px; }
nav.toc { background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:14px 18px; }
nav.toc ul { columns:2; margin:.3em 0 0; padding-left:1.1em; }
nav.toc li { margin:.15em 0; }
ul.takeaways li { margin:.4em 0; }
table { width:100%; border-collapse:collapse; margin:1em 0; font-size:.95rem; display:block; overflow-x:auto; }
caption { text-align:left; font-weight:600; color:var(--muted); margin-bottom:.4em; font-size:.9rem; }
th, td { border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
th { background:var(--soft); }
tbody tr:nth-child(odd) td { background:#fbfcfe; }
.win { color:var(--win); font-weight:700; }
.no { color:var(--no); font-weight:700; }
.profile { border:1px solid var(--line); border-radius:8px; padding:6px 18px 16px; margin:1em 0; background:#fff; }
.profile h3 { margin-top:.8em; }
.meta-list { font-size:.92rem; color:var(--muted); }
aside.recently-updated, .disclosure { background:var(--soft); border:1px solid var(--line); border-radius:8px; padding:14px 18px; }
.twocol { width:100%; }

/* Card grid (home / landing) */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:1.4em 0; }
.card { border:1px solid var(--line); border-radius:10px; padding:18px; background:#fff; transition:box-shadow .15s, transform .15s; }
.card:hover { box-shadow:0 6px 22px rgba(11,92,171,.12); transform:translateY(-2px); }
.card h3 { margin:.1em 0 .3em; }
.card p { font-size:.95rem; color:var(--muted); margin:0 0 .6em; }
.card a.more { font-weight:700; text-decoration:none; font-size:.95rem; }
.rank-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:1.2em 0; }
.rank-strip .r { border:1px solid var(--line); border-radius:10px; padding:14px; text-align:center; background:#fff; }
.rank-strip .r .n { display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; border-radius:50%; background:var(--soft); font-weight:800; color:var(--accent-dark); margin-bottom:6px; }
.rank-strip .r.first { border-color:var(--accent); box-shadow:0 0 0 2px rgba(11,92,171,.12) inset; }
.rank-strip .r strong { display:block; font-size:.95rem; }
.rank-strip .r span.sub { font-size:.8rem; color:var(--muted); }

/* Site footer */
.site-footer { background:#0c1722; color:#c7d2de; margin-top:48px; }
.site-footer .cols { max-width:var(--maxw); margin:0 auto; padding:40px 20px 24px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; }
.site-footer h3 { color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.6px; margin:0 0 12px; border:0; padding:0; }
.site-footer ul { list-style:none; margin:0; padding:0; }
.site-footer li { margin:.4em 0; }
.site-footer a { color:#c7d2de; text-decoration:none; font-size:14px; }
.site-footer a:hover { color:#fff; text-decoration:underline; }
.site-footer .about p { font-size:14px; color:#9fb0c0; }
.site-footer .foot-brand { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.site-footer .foot-brand .mark { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; }
.site-footer .foot-brand strong { color:#fff; }
.legal { border-top:1px solid #1e2c3a; }
.legal .inner { max-width:var(--maxw); margin:0 auto; padding:16px 20px 28px; font-size:12.5px; color:#8aa; display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; }
.legal a { color:#aab8c6; }
@media (max-width:760px){ .site-footer .cols{ grid-template-columns:1fr 1fr; } .cards{grid-template-columns:1fr 1fr;} .rank-strip{grid-template-columns:1fr 1fr 1fr;} }
@media (max-width:640px){ nav.toc ul{columns:1;} h1{font-size:1.6rem;} .site-nav{display:none;} .site-footer .cols{grid-template-columns:1fr;} .cards{grid-template-columns:1fr;} .rank-strip{grid-template-columns:1fr 1fr;} }