/* ============================================================
   NorthQuinn — Design System v2 ("Fluent" light)
   Microsoft-grade enterprise look: light surfaces, Segoe type,
   navy + gold brand accents, layered depth, restrained motion.
   ============================================================ */

:root {
  /* Brand */
  --navy-900: #0B1220;
  --navy-800: #101A33;
  --navy-700: #16264D;
  --navy-600: #1E3466;
  --navy-500: #2A4480;
  --link: #1D4FA1;
  --link-hover: #163C7C;
  --gold-600: #A07E2E;
  --gold-500: #B8933F;
  --gold-400: #C9A86A;
  --gold-100: #F5EEDE;

  /* Neutrals */
  --ink: #171C26;
  --ink-2: #454E5D;
  --ink-3: #667082;
  --bg: #FFFFFF;
  --bg-alt: #F7F8FB;
  --bg-soft: #EEF1F6;
  --line: #E3E7EE;
  --line-2: #D2D8E2;

  /* Depth (Fluent elevation) */
  --shadow-2: 0 1.6px 3.6px rgba(16, 26, 51, .07), 0 .3px .9px rgba(16, 26, 51, .05);
  --shadow-8: 0 6.4px 14.4px rgba(16, 26, 51, .11), 0 1.2px 3.6px rgba(16, 26, 51, .08);
  --shadow-16: 0 12.8px 28.8px rgba(16, 26, 51, .13), 0 2.4px 7.4px rgba(16, 26, 51, .09);

  --radius: 8px;
  --radius-lg: 14px;
  --max: 1180px;
  --nav-h: 60px;

  --font: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "SF Mono", Consolas, "Roboto Mono", monospace;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy-900); margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.015em; font-weight: 600; }
p { margin: 0 0 1em; }
::selection { background: var(--gold-100); color: var(--navy-900); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-800); color: #fff; padding: 10px 18px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; border-radius: 2px; }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section.alt { background: var(--bg-alt); }
.section-head { max-width: 720px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 4vw, 38px); }
.section-head p.lede { font-size: 18px; color: var(--ink-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-600); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold-400); border-radius: 1px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 15px/1 var(--font); letter-spacing: .01em;
  padding: 13px 26px; border-radius: 6px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--navy-800); color: #fff; box-shadow: var(--shadow-2); }
.btn-primary:hover { background: var(--navy-600); color: #fff; box-shadow: var(--shadow-8); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--navy-800); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--navy-600); color: var(--navy-600); background: #fff; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-outline-light:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-gold { background: var(--gold-500); color: #fff; text-shadow: 0 1px 2px rgba(16, 26, 51, .25); }
.btn-gold:hover { background: var(--gold-400); color: #fff; transform: translateY(-1px); }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn .arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.text-link { font-weight: 600; font-size: 14.5px; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 6px; }
.text-link::after { content: "→"; transition: transform .15s ease; }
.text-link:hover::after { transform: translateX(3px); }
.text-link:hover { text-decoration: none; }

/* ---------- Top navigation ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
/* backdrop-filter makes .topbar the containing block for fixed children,
   which traps the mobile menu behind the header. Drop it while the menu
   is open so the menu positions against the viewport again. */
.nav-open .topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
.topbar-inner { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--navy-900); font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; color: var(--navy-900); }
.brand svg { width: 32px; height: 32px; }

.nav { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.nav > .nav-item { position: relative; }
.nav a.nav-link, .nav button.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 14.5px/1 var(--font); color: var(--ink-2);
  padding: 10px 13px; border-radius: 6px; background: none; border: 0; cursor: pointer;
}
.nav a.nav-link:hover, .nav button.nav-link:hover { color: var(--navy-900); background: var(--bg-soft); text-decoration: none; }
.nav .nav-link .caret { width: 9px; height: 9px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.nav-item.open .nav-link .caret { transform: rotate(225deg) translateY(-1px); }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 300px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-16); padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-item.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 11px 13px; border-radius: 8px; color: var(--ink); }
.dropdown a:hover { background: var(--bg-alt); text-decoration: none; }
.dropdown a .dd-title { display: block; font-weight: 600; font-size: 14.5px; color: var(--navy-900); }
.dropdown a .dd-desc { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.45; }
.dropdown .dd-rule { height: 1px; background: var(--line); margin: 8px 6px; }

.topbar-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-cta .btn { padding: 10px 20px; font-size: 14px; }

.nav-burger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--navy-900); margin: 5px 0; border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }
.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background:
    radial-gradient(900px 480px at 85% -10%, rgba(201, 168, 106, .13), transparent 60%),
    radial-gradient(1100px 600px at -10% 110%, rgba(22, 38, 77, .08), transparent 55%),
    linear-gradient(180deg, #FDFDFE 0%, #F5F7FA 100%);
  border-bottom: 1px solid var(--line);
}
.hero::after { /* faint compass ring */
  content: ""; position: absolute; right: -180px; top: -120px; width: 560px; height: 560px;
  border: 1.5px solid rgba(22, 38, 77, .07); border-radius: 50%; pointer-events: none;
}
.hero-inner { position: relative; padding: 108px 0 84px; max-width: 780px; }
.hero h1 { font-size: clamp(38px, 6vw, 64px); font-weight: 650; letter-spacing: -.025em; line-height: 1.06; margin-bottom: 22px; }
.hero h1 .accent { color: var(--navy-600); }
.hero p.lede { font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); max-width: 620px; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Sub-page hero */
.hero.compact .hero-inner { padding: 84px 0 64px; }

/* Stat band */
.stat-band { border-top: 1px solid var(--line); background: rgba(255,255,255,.6); position: relative; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 26px 22px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat .stat-num { font-family: var(--font-display); font-size: 30px; font-weight: 650; color: var(--navy-800); letter-spacing: -.02em; }
.stat .stat-num em { font-style: normal; color: var(--gold-600); }
.stat .stat-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-top: 2px; }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 22px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-2);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.card:hover { box-shadow: var(--shadow-8); transform: translateY(-3px); border-color: var(--line-2); }
.card h3 { font-size: 18.5px; margin: 0 0 8px; }
.card p { color: var(--ink-2); font-size: 15px; margin-bottom: 0; }
.card .text-link { margin-top: 18px; }
.card-icon {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--bg-soft), #fff); border: 1px solid var(--line);
  color: var(--navy-700); margin-bottom: 18px;
}
.card-icon svg { width: 22px; height: 22px; }
.card-num { font-family: var(--font-display); font-weight: 650; font-size: 14px; color: var(--gold-600); letter-spacing: .08em; margin-bottom: 10px; }

/* List cards (checkmarks) */
.check-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 32px; color: var(--ink-2); font-size: 15.5px; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold-100); border: 1px solid var(--gold-400);
}
.check-list li::after {
  content: ""; position: absolute; left: 5px; top: 8px; width: 7px; height: 4px;
  border-left: 1.8px solid var(--gold-600); border-bottom: 1.8px solid var(--gold-600); transform: rotate(-45deg);
}

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-2); }
.step .step-num {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy-800); color: var(--gold-400); font: 650 15px var(--font-display);
  margin-bottom: 16px;
}
.step h3 { font-size: 17px; }
.step p { font-size: 14.5px; color: var(--ink-2); margin: 0; }

/* Detailed phases (approach page) */
.phase { display: grid; grid-template-columns: 96px 1fr; gap: 28px; padding: 38px 0; border-top: 1px solid var(--line); }
.phase:last-child { border-bottom: 1px solid var(--line); }
.phase-num { font-family: var(--font-display); font-size: 40px; font-weight: 650; color: var(--line-2); letter-spacing: -.02em; line-height: 1; }
.phase h3 { font-size: 22px; }
.phase p { color: var(--ink-2); max-width: 760px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
  font: 600 11.5px/1 var(--font); letter-spacing: .09em; text-transform: uppercase;
  color: var(--navy-700); background: var(--bg-soft); border: 1px solid var(--line-2);
  padding: 7px 12px; border-radius: 999px;
}
.chip.gold { color: var(--gold-600); background: var(--gold-100); border-color: var(--gold-400); }

/* ---------- Dark bands (quote / CTA) ---------- */
.band-dark {
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(201, 168, 106, .1), transparent 55%),
    linear-gradient(160deg, var(--navy-900), var(--navy-800) 55%, var(--navy-700));
  color: #C7CEDC;
  padding: 84px 0;
}
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .eyebrow { color: var(--gold-400); }
.band-dark .eyebrow::before { background: var(--gold-500); }
.band-dark a { color: var(--gold-400); }
.band-dark .btn-gold, .band-dark .btn-gold:hover { color: #fff; }
blockquote.pull {
  margin: 0; max-width: 860px;
  font-family: var(--font-display); font-size: clamp(20px, 3vw, 28px); font-weight: 500;
  line-height: 1.45; color: #EDF0F5; letter-spacing: -.01em;
}
blockquote.pull footer { margin-top: 22px; font: 600 12.5px var(--font); letter-spacing: .14em; color: var(--gold-400); text-transform: uppercase; }
.quote-mark { font-family: Georgia, serif; font-size: 64px; line-height: 0; color: var(--gold-500); display: block; margin-bottom: 26px; }

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
.cta-band p { max-width: 640px; margin: 0 auto 30px; font-size: 17px; color: #B9C2D2; }

/* ---------- Split / feature rows ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split .side-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-8); padding: 34px;
}

/* Timeline (about) */
.timeline { position: relative; margin-top: 8px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line-2); border-radius: 1px; }
.tl-item { position: relative; padding: 0 0 34px 40px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--gold-500);
}
.tl-item .tl-year { font: 650 13px var(--font-display); letter-spacing: .12em; color: var(--gold-600); text-transform: uppercase; }
.tl-item h3 { font-size: 17.5px; margin: 4px 0 6px; }
.tl-item p { font-size: 14.5px; color: var(--ink-2); margin: 0; max-width: 660px; }

/* Leader card */
.leader { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
.leader-badge {
  aspect-ratio: 1; border-radius: var(--radius-lg); display: grid; place-items: center;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-700));
  color: var(--gold-400); font-family: var(--font-display); font-size: 64px; font-weight: 650;
  box-shadow: var(--shadow-8);
}
.leader-photo { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-8); border: 1px solid var(--line); object-fit: cover; }
.leader .role { font: 600 12.5px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 6px; }
.leader h3 { font-size: 26px; margin-bottom: 12px; }

/* ---------- Contact / forms ---------- */
.contact-layout { display: grid; grid-template-columns: 400px 1fr; gap: 56px; align-items: start; }
.contact-meta { display: grid; gap: 20px; margin-top: 28px; }
.meta-row { display: grid; gap: 2px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.meta-row .meta-label { font: 600 11.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.meta-row .meta-value { font-weight: 600; color: var(--navy-900); font-size: 15.5px; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-8); padding: 36px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font: 600 12.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: 400 15px var(--font); color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease; width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(30, 52, 102, .12);
}
.form-note { font-size: 13px; color: var(--ink-3); margin: 14px 0 0; }
.form-status { margin-top: 16px; font-weight: 600; font-size: 14.5px; display: none; }
.form-status.ok { display: block; color: #1F7A3D; }
.form-status.err { display: block; color: #B42318; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 760px; }
table.data th {
  text-align: left; font: 600 11.5px var(--font); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); background: var(--bg-alt); padding: 13px 16px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
}
table.data td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: #FAFBFD; }
table.data td strong, table.data td .cve { color: var(--navy-800); font-weight: 600; }
.cve { font-family: var(--mono); font-size: 13px; }

.badge { display: inline-block; font: 600 11px/1 var(--font); letter-spacing: .07em; padding: 5px 9px; border-radius: 999px; text-transform: uppercase; }
.badge.critical { background: #FDE8E6; color: #A4200F; border: 1px solid #F3B7B0; }
.badge.high { background: #FFF2DE; color: #935E10; border: 1px solid #F0CD96; }
.badge.medium { background: #EDF3FD; color: #275093; border: 1px solid #C0D4F2; }
.badge.unknown { background: var(--bg-soft); color: var(--ink-3); border: 1px solid var(--line-2); }
.badge.ransom { background: #FDE8E6; color: #A4200F; border: 1px solid #F3B7B0; }

/* Filter pills */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.filters button {
  font: 600 12.5px var(--font); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
  transition: all .15s ease;
}
.filters button:hover { border-color: var(--navy-600); color: var(--navy-700); }
.filters button.active { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 12px; box-shadow: var(--shadow-2); overflow: hidden; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; font-weight: 600; font-size: 16px; color: var(--navy-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 22px; height: 22px; position: relative; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; background: var(--gold-600); border-radius: 1px; transition: transform .2s ease; }
.faq summary .plus::before { left: 3px; right: 3px; top: 10px; height: 2px; }
.faq summary .plus::after { top: 3px; bottom: 3px; left: 10px; width: 2px; }
.faq details[open] summary .plus::after { transform: scaleY(0); }
.faq .faq-body { padding: 0 22px 20px; color: var(--ink-2); font-size: 15px; }

/* ---------- Terminal snippet ---------- */
.terminal { background: var(--navy-900); border-radius: var(--radius-lg); box-shadow: var(--shadow-16); overflow: hidden; border: 1px solid #1D2A47; }
.terminal-bar { display: flex; gap: 7px; padding: 12px 16px; background: rgba(255,255,255,.04); border-bottom: 1px solid #1D2A47; }
.terminal-bar i { width: 11px; height: 11px; border-radius: 50%; background: #2A3A63; }
.terminal pre { margin: 0; padding: 22px 24px; font-family: var(--mono); font-size: 13.5px; line-height: 1.8; color: #9FB0CF; }
.terminal pre .p { color: var(--gold-400); }
.terminal pre .k { color: #6FA8FF; }
.terminal pre .v { color: #7BD8A0; }

/* ---------- Legal pages ---------- */
.legal-layout { display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: start; }
.legal-toc { position: sticky; top: calc(var(--nav-h) + 28px); font-size: 13.5px; }
.legal-toc .toc-title { font: 600 11.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.legal-toc li a { display: block; padding: 6px 0 6px 16px; color: var(--ink-2); border-left: 2px solid transparent; margin-left: -2px; }
.legal-toc li a:hover { color: var(--navy-800); border-left-color: var(--gold-500); text-decoration: none; }
.legal-body { max-width: 760px; font-size: 15.5px; color: var(--ink-2); }
.legal-body h2 { font-size: 24px; margin: 2.2em 0 .6em; scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body h3 { font-size: 18px; margin: 1.8em 0 .5em; scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal-body ul { padding-left: 22px; }
.legal-body li { margin-bottom: .5em; }
.legal-body table.data { min-width: 0; }
.legal-body .table-scroll { margin: 1.2em 0 1.6em; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 26px; margin: 6px 0 0; font: 600 12px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.callout {
  border: 1px solid var(--gold-400); background: var(--gold-100); border-radius: var(--radius);
  padding: 18px 22px; margin: 1.4em 0; color: var(--navy-800); font-size: 15px;
}
.callout.navy { border-color: var(--line-2); background: var(--bg-alt); }
.legal-body dl dt { font-weight: 600; color: var(--navy-900); margin-top: 1em; }
.legal-body dl dd { margin: .25em 0 0 0; }

/* ---------- Footer ---------- */
footer.site {
  background: var(--bg-alt); border-top: 1px solid var(--line);
  padding: 64px 0 34px; font-size: 14px; color: var(--ink-2);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 46px; }
.footer-brand p { max-width: 300px; color: var(--ink-3); margin-top: 14px; font-size: 13.5px; }
footer.site h4 { font: 600 12px var(--font); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
footer.site ul a { color: var(--ink-2); }
footer.site ul a:hover { color: var(--navy-800); }
.footer-bottom {
  border-top: 1px solid var(--line); padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--ink-3);
}
.footer-bottom .links { display: flex; gap: 22px; }
.footer-bottom a { color: var(--ink-3); font: 600 11.5px var(--font); letter-spacing: .1em; text-transform: uppercase; }
.footer-bottom a:hover { color: var(--navy-800); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .step { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat { border-top: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: 0; }
  .split, .contact-layout { grid-template-columns: 1fr; gap: 44px; }
  .legal-layout { grid-template-columns: 1fr; gap: 20px; }
  .legal-toc { position: static; }
}
@media (max-width: 860px) {
  .nav, .topbar-cta { display: none; }
  .nav-burger { display: block; }
  .mobile-menu {
    display: none; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 99;
    background: #fff; overflow-y: auto; padding: 18px 24px 44px;
  }
  .nav-open .mobile-menu { display: block; }
  .mobile-menu a.mm-link { display: block; padding: 15px 4px; font: 600 17px var(--font); color: var(--navy-900); border-bottom: 1px solid var(--line); }
  .mobile-menu a.mm-sub { display: block; padding: 11px 4px 11px 20px; font-size: 15px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
  .mobile-menu .mm-label { font: 600 11.5px var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); padding: 18px 4px 8px; }
  .mobile-menu .btn { width: 100%; margin-top: 22px; }
}
@media (min-width: 861px) { .mobile-menu { display: none !important; } }
@media (max-width: 640px) {
  .section { padding: 60px 0; }
  .hero-inner { padding: 72px 0 56px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .steps { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .phase { grid-template-columns: 1fr; gap: 8px; }
  .leader { grid-template-columns: 1fr; }
  .leader-badge { max-width: 200px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}