@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@600;800&family=Source+Sans+3:wght@400;600;700&display=swap");
:root {
  --paper: #f3f5f9; --surface: #ffffff; --ink: #14213a; --muted: #56627a; --line: #d5dbe6;
  --band: #12264a; --band-muted: #c3d0e6; --rule: #b22234; --accent: #1d4e9e; --tint: #eef2f8;
  --display: "Libre Franklin", "Franklin Gothic Medium", Arial, sans-serif;
  --body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0d1422; --surface: #151f33; --ink: #e4e9f2; --muted: #9aa7bf; --line: #2a3752;
    --band: #0b1a36; --band-muted: #a9b9d6; --rule: #d23a4c; --accent: #86adf0; --tint: #1c2840; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.6; }
a { color: var(--accent); }
.wrap { max-width: 760px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.nav { background: var(--band); }
.nav .wrap { max-width: 1120px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 12px; flex-wrap: wrap; }
.brand { color: #fff; font-family: var(--display); font-weight: 800; text-decoration: none; font-size: 19px; }
.cta-sm { background: #fff; color: #12264a; text-decoration: none; font-weight: 700; padding: 6px 12px; border-radius: 4px; font-size: 15px; }
.hero { background: var(--band); color: #fff; border-bottom: 6px solid var(--rule); padding-block: 40px 44px; }
.eyebrow { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--band-muted); margin: 0 0 8px; }
h1 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 5vw, 44px); line-height: 1.08; margin: 0; text-wrap: balance; }
.lead { color: var(--band-muted); font-size: 19px; margin: 14px 0 0; }
.article { padding-block: 24px 48px; }
.article h2 { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.2; margin: 36px 0 8px; text-wrap: balance; }
.article ul, .article ol { padding-left: 24px; display: grid; gap: 6px; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); font-size: 16px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--tint); }
.ba td:first-child { color: var(--muted); }
.box { background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--rule); border-radius: 6px; padding: 4px 22px 14px; margin-top: 36px; }
.box h2 { margin-top: 18px; }
.fine { font-size: 14px; color: var(--muted); margin-top: 28px; }
footer { border-top: 1px solid var(--line); padding-block: 22px; font-size: 14px; color: var(--muted); }