:root { --canvas:#F2F4F3; --surface:#fff; --ink:#0B1F1A; --ink-2:#475953; --ink-3:#85948E; --line:#E1E6E3; --line-2:#CDD6D1; --green:#0B7A55; --green-2:#15A374; --mint:#E2F3EA; --night:#0B1F1A; --glow:#5BE3B4; --amber:#8A5A00; --amberbg:#FFF4DB;
  --font:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --shadow: 0 1px 2px rgba(11,31,26,.04), 0 2px 6px -2px rgba(11,31,26,.05), 0 18px 40px -24px rgba(11,31,26,.18); }
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:84px; scroll-behavior:smooth; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.7; font-feature-settings:"tnum" 1; -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom,0px); }
body::before { content:''; position:absolute; left:0; right:0; top:0; height:620px; z-index:-1; pointer-events:none; background: radial-gradient(60% 70% at 15% 0%, rgba(21,163,116,.10), transparent 70%), radial-gradient(50% 60% at 95% 10%, rgba(203,211,207,.55), transparent 70%); }
a { color:var(--green); text-underline-offset:3px; }
a:hover { color:var(--ink); }
:focus-visible { outline:2px solid var(--green-2); outline-offset:2px; border-radius:6px; }
.wrap { max-width:1120px; margin:0 auto; padding-left:28px; padding-right:28px; }

/* Header */
.site-header { position:sticky; top:0; z-index:40; padding-top:env(safe-area-inset-top,0px); background:rgba(242,244,243,.82); backdrop-filter:saturate(170%) blur(16px); -webkit-backdrop-filter:saturate(170%) blur(16px); border-bottom:1px solid var(--line); }
.site-header .wrap { height:62px; display:flex; align-items:center; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:600; font-size:16px; letter-spacing:-.025em; }
.brand:hover { color:var(--ink); }
.brand-mark { width:30px; height:30px; border-radius:9px; background:var(--night); display:grid; place-items:center; }
.nav { margin-left:auto; display:flex; gap:4px; align-items:center; }
.nav a { white-space:nowrap; color:var(--ink-2); text-decoration:none; font-weight:500; font-size:14px; padding:8px 12px; border-radius:9px; }
.nav a:hover { color:var(--ink); background:rgba(11,31,26,.05); }
.nav a[aria-current="page"] { color:var(--ink); background:rgba(11,31,26,.06); }
.nav .cta { color:#fff; background:var(--ink); margin-left:6px; }
.nav .cta:hover { color:#fff; background:#17352D; }

/* Page hero */
.crumbs { padding-top:28px; font-size:14px; color:var(--ink-3); }
.crumbs a { color:var(--ink-2); text-decoration:none; }
.crumbs a:hover { color:var(--ink); text-decoration:underline; }
.page-hero { padding-top:28px; padding-bottom:32px; }
.eyebrow { display:inline-block; margin:0 0 14px; font-size:13px; font-weight:600; color:var(--green); }
.page-hero h1 { margin:0; font-size:clamp(34px,5vw,54px); font-weight:600; letter-spacing:-.045em; line-height:1.07; max-width:22ch; text-wrap:balance; }
.page-hero .lede { margin:18px 0 0; font-size:19px; line-height:1.55; color:var(--ink-2); max-width:64ch; }
.byline { display:flex; flex-wrap:wrap; gap:6px 16px; margin:20px 0 0; font-size:14px; color:var(--ink-3); }
.byline b { color:var(--ink-2); font-weight:600; }

/* Article layout */
.layout { display:grid; grid-template-columns: 220px minmax(0,1fr); gap:48px; align-items:start; padding-bottom:72px; }
.toc { position:sticky; top:92px; font-size:14px; }
.toc p { margin:0 0 10px; font-size:12px; font-weight:600; color:var(--ink-3); }
.toc ol { list-style:none; margin:0; padding:0; border-left:1px solid var(--line-2); }
.toc a { display:block; padding:5px 0 5px 14px; margin-left:-1px; border-left:2px solid transparent; color:var(--ink-2); text-decoration:none; line-height:1.4; }
.toc a:hover { color:var(--ink); }
.toc a.active { color:var(--ink); border-left-color:var(--green-2); font-weight:500; }
.doc { background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:44px 52px 48px; max-width:800px; }
.doc section + section { margin-top:36px; padding-top:34px; border-top:1px solid var(--line); }
.doc h2 { margin:0 0 12px; font-size:25px; font-weight:600; letter-spacing:-.03em; line-height:1.25; }
.doc h3 { margin:24px 0 8px; font-size:18px; font-weight:600; letter-spacing:-.015em; }
.doc p { margin:0 0 16px; color:var(--ink-2); }
.doc p:last-child { margin-bottom:0; }
.doc strong { color:var(--ink); font-weight:600; }
.doc ul, .doc ol { margin:0 0 16px; padding-left:22px; color:var(--ink-2); }
.doc li { margin:7px 0; padding-left:4px; }
.doc li::marker { color:var(--green-2); }
[data-live] { color:var(--ink); font-weight:600; }

/* Key stats */
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 12px; }
.stats div { padding:16px 18px; border-radius:16px; background:#F6F8F7; border:1px solid var(--line); }
.stats dt { font-size:13px; color:var(--ink-3); font-weight:500; }
.stats dd { margin:4px 0 0; font-size:24px; font-weight:600; letter-spacing:-.03em; color:var(--ink); line-height:1.2; }
.stats dd [data-live] { font-weight:600; }
.asof { font-size:13px; color:var(--ink-3); margin:0 0 26px !important; }
.asof [data-live-date] { color:var(--ink-3); font-weight:500; }

.table-scroll { overflow-x:auto; margin:0 0 16px; border:1px solid var(--line); border-radius:14px; }
table { width:100%; border-collapse:collapse; font-size:15px; min-width:460px; }
th, td { text-align:left; padding:11px 14px; vertical-align:top; border-bottom:1px solid var(--line); }
th { font-weight:600; color:var(--ink); background:#F6F8F7; font-size:13px; }
td { color:var(--ink-2); }
td.num, th.num { text-align:right; }
tr:last-child td { border-bottom:none; }
caption { caption-side:bottom; text-align:left; padding:10px 14px; font-size:13px; color:var(--ink-3); }

.callout { margin:0 0 22px; padding:18px 20px; border-radius:16px; background:var(--mint); border:1px solid rgba(21,163,116,.25); }
.callout p { margin:0; color:var(--ink); font-size:16px; }
.callout.warn { background:var(--amberbg); border-color:rgba(138,90,0,.2); }
.callout.warn p { color:#5c3d00; }
.faq details { border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin:0 0 10px; background:#FBFCFB; }
.faq summary { cursor:pointer; font-weight:600; color:var(--ink); }
.faq details p { margin:10px 0 0; }
.sources { font-size:14px; }
.sources li { margin:4px 0; }

.cta-band { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:30px 0 0; padding:26px 28px; border-radius:20px; background:var(--night); color:#EAF3EF; }
.cta-band h2, .cta-band p.h { margin:0 0 4px; color:#fff; font-size:20px; font-weight:600; }
.cta-band p { margin:0; color:#93ADA4; }
.btn { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:12px; background:var(--glow); color:var(--night); font-weight:600; font-size:15px; text-decoration:none; }
.btn:hover { color:var(--night); background:#7DEEC6; }

/* Related + blog index cards */
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.card { display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:20px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); color:var(--ink); text-decoration:none; transition:transform .15s, border-color .15s; }
.card:hover { transform:translateY(-2px); border-color:var(--line-2); color:var(--ink); }
.card .tick { align-self:flex-start; padding:3px 10px; border-radius:8px; background:var(--mint); color:var(--green); font-weight:600; font-size:13px; }
.card h2, .card h3 { margin:0; font-size:20px; font-weight:600; letter-spacing:-.025em; line-height:1.3; }
.card p { margin:0; color:var(--ink-2); font-size:15px; line-height:1.55; }
.card .meta { margin-top:auto; padding-top:8px; font-size:13px; color:var(--ink-3); }
.related { margin-top:36px; }
.related h2 { font-size:20px; margin:0 0 14px; }
.related .cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
.blog-list { padding-bottom:72px; }

footer { border-top:1px solid var(--line); padding:36px 0 48px; color:var(--ink-3); font-size:13px; }
.foot-row { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:18px; }
footer nav { display:flex; flex-wrap:wrap; gap:6px 18px; }
footer nav a { color:var(--ink-2); text-decoration:none; font-weight:500; font-size:14px; }
footer nav a:hover { color:var(--ink); }
footer p { margin:0 0 8px; max-width:92ch; line-height:1.6; }

@media (max-width: 900px) { .layout { grid-template-columns:minmax(0,1fr); gap:0; } .toc { display:none; } .cards { grid-template-columns:minmax(0,1fr); } }
@media (max-width: 640px) {
  .wrap { padding-left:16px; padding-right:16px; }
  .nav .hide-sm { display:none; }
  .nav { gap:2px; }
  .nav .cta .cap { text-transform:capitalize; }
  .brand { font-size:15px; }
  .page-hero .lede { font-size:17px; }
  .doc { padding:26px 20px 30px; border-radius:20px; }
  .doc h2 { font-size:22px; }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats dd { font-size:21px; }
  .related .cards { grid-template-columns:minmax(0,1fr); }
  .cta-band { padding:22px 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .card { transition:none; } }
