/* ===========================================================
   MLPivot — site stylesheet
   Adapted from the supplied theme. Structure, spacing scale and
   component classes are the theme's; the accent ramp was moved
   from red/orange to green.
   =========================================================== */

:root {
  --navy:        #0f1b2d;
  --navy-2:      #16273f;
  --navy-3:      #1e3350;

  --bg:          #ffffff;
  --bg-alt:      #f2f6f4;
  --surface:     #ffffff;
  --surface-2:   #f7faf8;
  --surface-3:   #e9f0ec;

  --ink:         #0f1b2d;
  --ink-2:       #3a4a61;
  --ink-3:       #5f7085;
  --ink-4:       #8496ab;
  --on-navy:     #ffffff;
  --on-navy-2:   #b8c7da;
  --on-navy-3:   #8ba0ba;

  --line:        #dde7e2;
  --line-2:      #c3d5cb;
  --line-3:      #9dbdac;
  --line-navy:   #2a4362;

  /* green accent ramp (was blue/red in the theme) */
  --accent:      #0e8f5a;
  --accent-2:    #0a6f46;
  --accent-3:    #075233;
  --accent-wash: #e6f5ee;
  --accent-line: #a8dcc4;

  /* CTA green (was the theme's red) */
  --cta:         #16a34a;
  --cta-2:       #12833c;
  --cta-wash:    #e8f7ee;

  --good:        #037f51;
  --good-bg:     #e3f5ed;
  --warn:        #8d6605;
  --warn-bg:     #fdf4e0;
  --bad:         #a4231a;
  --bad-bg:      #fdecea;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs:   12px;
  --fs-sm:   13.5px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   21px;
  --fs-2xl:  27px;
  --fs-3xl:  34px;
  --fs-4xl:  44px;
  --fs-5xl:  56px;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px;

  --radius:    4px;
  --radius-lg: 8px;
  --maxw:      1280px;
  --maxw-prose: 780px;
  --header-h:  68px;

  --shadow-1: 0 1px 2px rgba(15,27,45,.08);
  --shadow-2: 0 1px 3px rgba(15,27,45,.08), 0 6px 16px rgba(15,27,45,.08);
  --shadow-3: 0 10px 30px rgba(15,27,45,.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1220; --bg-alt: #0f1b2d;
    --surface: #12203a; --surface-2: #16273f; --surface-3: #1e3350;
    --ink: #eef3f9; --ink-2: #c0cfe0; --ink-3: #94a8c0; --ink-4: #6f849d;
    --line: #22374f; --line-2: #2e4863; --line-3: #3d5a78;
    --accent: #34d399; --accent-2: #6ee7b7; --accent-wash: #10281f; --accent-line: #1f4a38;
    --cta: #22c55e; --cta-2: #16a34a; --cta-wash: #10281f;
    --good: #3fcf8e; --good-bg: #0c2b1e;
    --warn: #f5c453; --warn-bg: #2c2410;
    --bad:  #f77066; --bad-bg:  #2d1513;
    --shadow-1: 0 1px 2px rgba(0,0,0,.45);
    --shadow-2: 0 1px 3px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.4);
    --shadow-3: 0 10px 30px rgba(0,0,0,.55);
  }
}

[data-theme="dark"] {
  --bg: #0a1220; --bg-alt: #0f1b2d;
  --surface: #12203a; --surface-2: #16273f; --surface-3: #1e3350;
  --ink: #eef3f9; --ink-2: #c0cfe0; --ink-3: #94a8c0; --ink-4: #6f849d;
  --line: #22374f; --line-2: #2e4863; --line-3: #3d5a78;
  --accent: #34d399; --accent-2: #6ee7b7; --accent-wash: #10281f; --accent-line: #1f4a38;
  --cta: #22c55e; --cta-2: #16a34a; --cta-wash: #10281f;
  --good: #3fcf8e; --good-bg: #0c2b1e;
  --warn: #f5c453; --warn-bg: #2c2410;
  --bad:  #f77066; --bad-bg:  #2d1513;
  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 1px 3px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.4);
  --shadow-3: 0 10px 30px rgba(0,0,0,.55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.021em; color: var(--ink); margin: 0; font-weight: 650; }
h1 { font-size: var(--fs-3xl); letter-spacing: -.03em; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p  { margin: 0; }
code, kbd, .mono { font-family: var(--font-mono); font-size: .92em; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--cta); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; color: #fff; text-decoration: none; }

/* ---------- layout ---------- */
.wrap    { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s5); width: 100%; }
.prose-w { max-width: var(--maxw-prose); margin-left: auto; margin-right: auto; }
.stack > * + * { margin-top: var(--s4); }
.muted   { color: var(--ink-3); }
.small   { font-size: var(--fs-sm); }
.center  { text-align: center; }

.band      { background: var(--bg); }
.band-alt  { background: var(--bg-alt); border-block: 1px solid var(--line); }
.band-navy { background: var(--navy); color: var(--on-navy); }
.band-navy h1, .band-navy h2, .band-navy h3 { color: var(--on-navy); }
.band-navy p, .band-navy .muted, .band-navy li { color: var(--on-navy-2); }
.band-navy a { color: #6ee7b7; }
.sect    { padding: var(--s8) 0; }
.sect-sm { padding: var(--s7) 0; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: var(--navy);
  border-bottom: 1px solid var(--line-navy);
}
.hdr-in { display: flex; align-items: center; gap: var(--s6); height: var(--header-h); }
.logo {
  font-size: 25px; font-weight: 750; letter-spacing: -.04em;
  color: #fff; text-decoration: none; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 9px;
}
.logo:hover { text-decoration: none; color: #fff; }
.logo i { color: var(--cta); font-style: normal; }
.logo svg { width: 26px; height: 26px; flex: 0 0 auto; }

.nav { display: flex; gap: var(--s6); flex: 1; align-items: center; }
.nav a {
  color: var(--on-navy-2); font-size: var(--fs-md); font-weight: 600;
  padding: 8px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: #fff; border-color: var(--cta); text-decoration: none; }
.hdr-act { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1;
  padding: 10px 16px; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn-pri { background: var(--cta); color: #fff; font-weight: 700; }
.btn-pri:hover { background: var(--cta-2); color: #fff; }
.btn-sec { background: var(--surface); color: var(--ink-2); border-color: var(--line-2); }
.btn-sec:hover { border-color: var(--line-3); color: var(--ink); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn-ghost:hover { background: rgba(255,255,255,.09); color: #fff; }
.btn-lg { font-size: var(--fs-md); padding: 13px 24px; }

.icon-btn {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--radius); border: 1px solid var(--line-navy);
  background: transparent; color: var(--on-navy-2); cursor: pointer; padding: 0;
}
.icon-btn:hover { border-color: var(--on-navy-3); color: #fff; }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn .moon { display: none; }
[data-theme="dark"] .icon-btn .sun { display: none; }
[data-theme="dark"] .icon-btn .moon { display: block; }

/* ---------- chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .03em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent);
  border: 1px solid var(--accent-line);
}
.chip:hover { text-decoration: none; }
.chip-n { background: var(--surface-3); color: var(--ink-3); border-color: var(--line); }

/* ---------- page head ---------- */
.phead { padding: var(--s7) 0 var(--s5); }
.phead h1 { margin-bottom: var(--s3); }
.phead .lede { font-size: var(--fs-lg); color: var(--ink-3); max-width: 62ch; }
.eyebrow {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3);
}

/* ---------- hero ---------- */
.hero { background: var(--navy); color: var(--on-navy); padding: var(--s9) 0 var(--s8); position: relative; overflow: hidden; }
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(900px 400px at 88% -10%, rgba(22,163,74,.34), transparent 62%),
              radial-gradient(600px 320px at 12% 110%, rgba(14,143,90,.20), transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #fff; font-size: var(--fs-5xl); letter-spacing: -.035em; line-height: 1.06; max-width: 20ch; }
.hero .lede { color: var(--on-navy-2); font-size: var(--fs-xl); max-width: 62ch; margin-top: var(--s5); }
.hero .eyebrow { color: var(--cta); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

.phead-navy { background: var(--navy); color: var(--on-navy); padding: var(--s8) 0 var(--s7); }
.phead-navy h1 { color: #fff; font-size: var(--fs-4xl); max-width: 24ch; }
.phead-navy .lede { color: var(--on-navy-2); font-size: var(--fs-lg); max-width: 66ch; margin-top: var(--s4); }
.phead-navy .eyebrow { color: var(--cta); }

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: var(--fs-sm); color: var(--on-navy-3); margin-bottom: var(--s4); }
.crumbs a { color: var(--on-navy-2); }
.crumbs a:hover { color: #fff; }
.crumbs span { padding: 0 6px; opacity: .6; }

/* ---------- grids + cards ---------- */
.grid { display: grid; gap: var(--s4); }
.g2 { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s5) var(--s5) var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
  position: relative; box-shadow: var(--shadow-1);
  transition: border-color .16s, box-shadow .16s;
}
.card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cta); opacity: 0; transition: opacity .16s;
  border-radius: var(--radius) 0 0 var(--radius);
}
.card:hover::before { opacity: 1; }
.card:hover { box-shadow: var(--shadow-2); border-color: var(--line-2); }
.card h3 { font-size: var(--fs-md); line-height: 1.3; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--accent); text-decoration: none; }
.card p { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.55; }
.card-foot {
  font-size: var(--fs-xs); color: var(--ink-4); font-weight: 600;
  border-top: 1px solid var(--line); margin-top: auto; padding-top: var(--s3);
}
.card-foot a { color: var(--accent); }

/* card as a whole-surface link */
a.card { color: inherit; }
a.card:hover { text-decoration: none; }
a.card .card-foot { color: var(--accent); }

.card-ico {
  width: 34px; height: 34px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent);
  border: 1px solid var(--accent-line);
}
.card-ico svg { width: 18px; height: 18px; }

/* ---------- section headers ---------- */
.sect-head {
  display: flex; align-items: baseline; gap: var(--s4);
  margin-bottom: var(--s5); padding-bottom: var(--s3);
  border-bottom: 2px solid var(--navy);
}
.sect-head h2 { font-size: var(--fs-xl); margin: 0; }
.sect-head .count { font-size: var(--fs-sm); color: var(--ink-4); margin-left: auto; }
.band-navy .sect-head { border-color: var(--cta); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat { background: var(--surface); padding: var(--s5); }
.stat b { display: block; font-family: var(--font-mono); font-size: var(--fs-2xl); color: var(--ink); letter-spacing: -.02em; }
.stat span { font-size: var(--fs-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* ---------- flow diagram ---------- */
.flow {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  font-family: var(--font-mono); text-align: center;
}
.flow-node {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: var(--s3) var(--s5);
  font-size: var(--fs-sm); color: var(--ink-2); max-width: 100%;
}
.flow-node.is-key { background: var(--cta); border-color: var(--cta); color: #fff; font-weight: 700; letter-spacing: .04em; }
.flow-node.is-out { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent-2); font-weight: 650; }
.flow-arrow { width: 1px; height: 22px; background: var(--line-2); position: relative; }
.flow-arrow::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 6px solid var(--line-3);
}
.band-navy .flow-node { background: var(--navy-2); border-color: var(--line-navy); color: var(--on-navy-2); }
.band-navy .flow-node.is-key { background: var(--cta); border-color: var(--cta); color: #fff; }
.band-navy .flow-node.is-out { background: var(--navy-3); border-color: var(--cta); color: #fff; }
.band-navy .flow-arrow { background: var(--line-navy); }
.band-navy .flow-arrow::after { border-top-color: var(--on-navy-3); }

/* ---------- steps ---------- */
.steps { display: grid; gap: var(--s4); counter-reset: step; }
.step {
  display: grid; grid-template-columns: 44px 1fr; gap: var(--s4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s5);
}
.step-n {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent); border: 1px solid var(--accent-line);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm);
}
.step h3 { font-size: var(--fs-md); margin-bottom: 6px; }
.step p, .step ul { font-size: var(--fs-sm); color: var(--ink-3); }
.step ul { margin: 8px 0 0; padding-left: 1.15em; }

/* ---------- checklist ---------- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ticks li { position: relative; padding-left: 26px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 13px; height: 7px; border-left: 2px solid var(--cta); border-bottom: 2px solid var(--cta);
  transform: rotate(-45deg);
}
.band-navy .ticks li { color: var(--on-navy-2); }
.cols-2 { columns: 2; column-gap: var(--s6); }
.cols-3 { columns: 3; column-gap: var(--s6); }
.cols-2 li, .cols-3 li { break-inside: avoid; }

/* ---------- tag list ---------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.tags li {
  font-size: var(--fs-sm); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px 11px;
}
.band-navy .tags li { background: var(--navy-2); border-color: var(--line-navy); color: var(--on-navy-2); }

/* ---------- code block ---------- */
.code {
  background: #0d1117; color: #e6edf3; padding: var(--s4) var(--s5);
  border-radius: var(--radius); overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.65;
  margin: 0; border: 1px solid #1f2a37;
}
.code .k { color: #7ee2b8; }
.code .s { color: #a5d6ff; }
.code .n { color: #f0b775; }
.code-label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: var(--s2);
}
.io { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }

/* ---------- prose ---------- */
.prose { font-size: var(--fs-lg); line-height: 1.72; color: var(--ink-2); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: var(--fs-2xl); margin-top: 1.9em; margin-bottom: .55em; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
.prose h3 { font-size: var(--fs-xl); margin-top: 1.6em; margin-bottom: .4em; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin: .35em 0; }
.prose li::marker { color: var(--ink-4); }
.prose blockquote { margin: 1.6em 0; padding: 2px 0 2px var(--s4); border-left: 3px solid var(--cta); color: var(--ink-3); font-style: normal; }
.prose code { background: var(--surface-3); padding: 2px 6px; border-radius: 4px; color: var(--ink); }
.prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--accent-line); }
.prose p, .prose li, .prose h2, .prose h3 { overflow-wrap: break-word; }

/* ---------- callout ---------- */
.callout {
  font-size: var(--fs-md); line-height: 1.6; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--cta);
  border-radius: var(--radius); padding: var(--s5); margin: var(--s5) 0;
}
.callout strong { color: var(--ink); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy); color: #fff; padding: var(--s8) 0; text-align: center; position: relative; overflow: hidden; }
.cta-band::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(700px 300px at 50% -20%, rgba(22,163,74,.30), transparent 65%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: var(--fs-3xl); max-width: 22ch; margin: 0 auto; }
.cta-band p { color: var(--on-navy-2); max-width: 60ch; margin: var(--s4) auto 0; font-size: var(--fs-lg); }
.cta-band .hero-cta { justify-content: center; }

/* ---------- forms ---------- */
.form-grid { display: grid; gap: 0 var(--s4); grid-template-columns: 1fr 1fr; }
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s4); }
.form-row.full { grid-column: 1 / -1; }
.form-row label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.form-row .req { color: var(--cta); }
.form-row input, .form-row textarea, .form-row select {
  font-family: inherit; font-size: var(--fs-md); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 11px 12px; width: 100%;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent);
}
.form-row textarea { min-height: 170px; resize: vertical; }
.form-row .hint { font-size: var(--fs-xs); color: var(--ink-4); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--fs-sm); color: var(--ink-3); }
.form-msg { padding: var(--s4); border-radius: var(--radius); font-size: var(--fs-sm); margin-bottom: var(--s4); display: none; }
.form-msg.ok  { background: var(--good-bg); color: var(--good); display: block; }
.form-msg.err { background: var(--bad-bg);  color: var(--bad);  display: block; }
.form-row input[aria-invalid="true"], .form-row textarea[aria-invalid="true"] { border-color: var(--bad); }

.cform { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s6); box-shadow: var(--shadow-1); }

/* ---------- footer ---------- */
.ft { background: var(--navy); color: var(--on-navy-2); font-size: var(--fs-sm); }
.ft-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s6);
  display: grid; gap: var(--s6);
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
}
.ft-logo { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em; text-decoration: none; }
.ft-logo:hover { color: #fff; text-decoration: none; }
.ft-logo i { color: var(--cta); font-style: normal; }
.ft-logo svg { width: 22px; height: 22px; }
.ft-tag { margin: var(--s3) 0 0; color: var(--on-navy-3); max-width: 34ch; line-height: 1.55; }
.ft-col h3 { color: #fff; font-size: var(--fs-sm); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--s3); }
.ft-col ul { list-style: none; margin: 0; padding: 0; }
.ft-col li { margin-bottom: var(--s2); }
.ft-col a, .ft-links a { color: var(--on-navy-2); text-decoration: none; line-height: 1.5; }
.ft-col a:hover, .ft-links a:hover { color: var(--cta); text-decoration: underline; }
.ft-legal { border-top: 1px solid var(--line-navy); }
.ft-legal-inner {
  max-width: var(--maxw); margin: 0 auto; padding: var(--s4) var(--s5);
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; justify-content: space-between;
}
.ft-copy { margin: 0; color: var(--on-navy-3); }
.ft-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s4); margin: 0; padding: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .g2 { grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); } }
@media (max-width: 900px) {
  .ft-inner { grid-template-columns: 1fr 1fr; }
  .cols-3 { columns: 2; }
}
@media (max-width: 760px) {
  .hdr-in { height: auto; padding: 10px 0 6px; flex-wrap: wrap; gap: var(--s3); }
  .nav { order: 3; width: 100%; overflow-x: auto; gap: var(--s5); padding-bottom: 4px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; font-size: var(--fs-base); }
  .hdr-act { margin-left: auto; }
}
@media (max-width: 700px) {
  body { font-size: var(--fs-base); }
  .wrap { padding: 0 var(--s4); }
  h1 { font-size: var(--fs-2xl); }
  .hero { padding: var(--s7) 0 var(--s6); }
  .hero h1 { font-size: var(--fs-3xl); }
  .hero .lede { font-size: var(--fs-md); }
  .phead-navy { padding: var(--s6) 0 var(--s5); }
  .phead-navy h1 { font-size: var(--fs-2xl); }
  .phead-navy .lede { font-size: var(--fs-md); }
  .sect, .sect-sm { padding: var(--s6) 0; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .card { padding: var(--s4); }
  .cform { padding: var(--s4); }
  .form-grid { grid-template-columns: 1fr; }
  .cols-2, .cols-3 { columns: 1; }
  .prose { font-size: var(--fs-md); }
  .prose h2 { font-size: var(--fs-xl); }
  .cta-band h2 { font-size: var(--fs-2xl); }
  .hero-cta .btn { width: 100%; }
  .step { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ft-inner { grid-template-columns: 1fr; gap: var(--s5); }
  .ft-legal-inner { flex-direction: column; align-items: flex-start; }
}
@media (hover: none) { .nav a { padding: 8px 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
@media print {
  .hdr, .ft, .cta-band, .hero-cta { display: none; }
  body { color: #000; background: #fff; }
}