/* ============================================================
   Asveera Data Protection and Compliance Practice
   LIVE SCHEME: Light dominant + Azure blue

   White ground, pale blue section bands, navy retained for the
   navigation shell and the footer. Azure is the brand and
   interactive colour. Green carries one meaning only: complete.
   Amber means pending, crimson means gap.

   The navy and emerald alternative is kept at style-navy.css.
   To switch, change the stylesheet link in each page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&family=Open+Sans:wght@500;600;700&display=swap');

:root {
  /* Dominant — Deep Trust Navy */
  --navy-900: #0A192F;
  --navy-850: #0F172A;
  --navy-800: #16233C;
  --navy-700: #1E293B;
  --navy-600: #334155;

  /* Supporting — Shield Silver / Slate */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;

  /* Accent — Compliant Emerald */
  --emerald:      #10B981;
  --emerald-deep: #047857;
  --emerald-lite: #34D399;
  --emerald-soft: #D1FAE5;
  --emerald-line: #6EE7B7;

  /* Alert system */
  --crimson:      #EF4444;
  --crimson-text: #B91C1C;
  --crimson-soft: #FEE2E2;
  --crimson-line: #FCA5A5;
  --amber:        #F59E0B;
  --amber-text:   #B45309;
  --amber-soft:   #FEF3C7;
  --amber-line:   #FCD34D;

  /* Semantic surfaces */
  --page:        #F8FAFC;
  --surface:     #FFFFFF;
  --surface-alt: #F1F5F9;
  --border:      #E2E8F0;
  --border-firm: #CBD5E1;

  --fg:       #0F172A;
  --fg-muted: #475569;
  --fg-faint: #64748B;

  --band:        #0F172A;
  --band-fg:     #F1F5F9;
  --band-muted:  #94A3B8;
  --band-border: #1E293B;
  --band-card:   #16233C;

  --accent-text: #047857;
  --rule-grid:   rgba(148, 163, 184, 0.18);

  --font-head: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Open Sans', 'SF Mono', Consolas, monospace;

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;

  --maxw: 1200px;
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 86px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--page);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.95rem; }
p { line-height: 1.72; }

a { color: inherit; }

::selection { background: var(--emerald-soft); color: var(--emerald-deep); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--emerald); color: #04221A; padding: 0.6rem 1rem;
  font-weight: 600; border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0; }

/* ============================================================
   LAYOUT
   ============================================================ */

.pad { padding-inline: clamp(1rem, 4vw, 2.5rem); }
.inner { max-width: var(--maxw); margin-inline: auto; }
.section { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }
.section-tight { padding-block: clamp(2rem, 4vw, 3rem); }

.band { background: var(--band); color: var(--band-fg); }
.band h1, .band h2, .band h3, .band h4 { color: var(--band-fg); }
.band-edge { border-top: 1px solid var(--band-border); border-bottom: 1px solid var(--band-border); }

.kicker {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text);
  display: block; margin-bottom: 0.75rem;
}
.band .kicker { color: var(--emerald-lite); }

.lede { font-size: 1rem; color: var(--fg-muted); max-width: var(--maxw); margin-top: 0.9rem; }
.band .lede { color: var(--band-muted); }

.prose p { font-size: 0.95rem; color: var(--fg-muted); max-width: var(--maxw); margin-bottom: 1rem; }
.band .prose p { color: var(--band-muted); }
.prose p b, .prose p strong { color: var(--fg); font-weight: 600; }
.band .prose p b, .band .prose p strong { color: var(--band-fg); }
.prose p:last-child { margin-bottom: 0; }

/* ============================================================
   NAV
   ============================================================ */

.nav {
  background: var(--band);
  border-bottom: 1px solid var(--band-border);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 70;
}
.nav-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 0.8rem;
}

.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; flex-shrink: 0; }
.brand-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--band-border); border-radius: var(--r-md);
  display: grid; place-items: center; background: rgba(16, 185, 129, 0.08);
}
.brand-mark svg {
  width: 20px; height: 20px; stroke: var(--emerald-lite); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.brand-txt { display: flex; flex-direction: column; line-height: 1.12; }
.brand-txt b {
  font-family: var(--font-head); font-size: 0.95rem; font-weight: 700;
  color: #fff; letter-spacing: -0.02em;
}
.brand-txt span {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500;
  color: var(--band-muted); letter-spacing: 0.1em; text-transform: uppercase;
}

.nav-links { display: flex; align-items: center; gap: 1.4rem; }
.nav-links a {
  font-size: 0.85rem; font-weight: 500; color: var(--band-muted);
  text-decoration: none; white-space: nowrap;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--band-border);
  border-radius: var(--r-md); width: 38px; height: 34px; cursor: pointer;
  padding: 0; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
}
.nav-toggle span { display: block; width: 16px; height: 1.5px; background: var(--band-muted); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
  padding: 0.6rem 1.1rem; border-radius: var(--r-md);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--emerald); color: #04221A; border-color: var(--emerald); }
.btn-primary:hover { background: var(--emerald-lite); border-color: var(--emerald-lite); }
.btn-outline { background: transparent; color: var(--band-fg); border-color: var(--band-border); }
.btn-outline:hover { border-color: var(--slate-400); }
.btn-light { background: var(--surface); color: var(--fg); border-color: var(--border-firm); }
.btn-light:hover { border-color: var(--slate-400); }
.btn-sm { font-size: 0.8rem; padding: 0.45rem 0.85rem; }
.btn-full { width: 100%; }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  background: var(--band); color: var(--band-fg);
  background-image:
    linear-gradient(var(--rule-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  border-bottom: 1px solid var(--band-border);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
  padding-block: clamp(2.75rem, 5.5vw, 4.5rem);
}
.hero h1 { color: #fff; max-width: 18ch; }
.hero-sub { font-size: 1.02rem; color: var(--band-muted); max-width: 52ch; margin-top: 1.1rem; }
.hero-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.75rem; }

.hero-short { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }
.hero-short h1 { max-width: 22ch; }
.hero-short .hero-sub { max-width: 62ch; }

.badge-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.pill {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.3rem 0.6rem; border-radius: var(--r-sm);
  border: 1px solid var(--band-border); color: var(--band-muted);
}
.pill.on { border-color: var(--emerald-line); color: var(--emerald-lite); background: rgba(16, 185, 129, 0.08); }

.hero-foot {
  display: flex; gap: 1.6rem; flex-wrap: wrap;
  margin-top: 1.9rem; padding-top: 1.4rem; border-top: 1px solid var(--band-border);
}
.hero-foot div { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--band-muted); }
.hero-foot svg {
  width: 15px; height: 15px; stroke: var(--emerald-lite); fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}

/* breadcrumb */
.crumb {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--band-muted); margin-bottom: 1rem;
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--emerald-lite); }

/* ============================================================
   READINESS WIDGET
   ============================================================ */

.score-card { background: var(--band-card); border: 1px solid var(--band-border); border-radius: var(--r-lg); overflow: hidden; }
.score-hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap; padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--band-border);
}
.score-hd b { font-family: var(--font-head); font-size: 0.9rem; font-weight: 700; color: #fff; }
.score-hd span {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--band-muted);
}
.score-body { display: flex; gap: 1.25rem; align-items: center; padding: 1.2rem 1.1rem; flex-wrap: wrap; }
.gauge { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.gauge svg { width: 100%; height: 100%; transform: rotate(135deg); }
.gauge circle { fill: none; stroke-linecap: round; }
.gauge .track { stroke: var(--navy-700); stroke-width: 11; }
.gauge .val {
  stroke: var(--amber); stroke-width: 11;
  stroke-dasharray: 245 327; stroke-dashoffset: 245;
  animation: gaugeFill 1.3s cubic-bezier(.3, .8, .3, 1) .25s forwards;
}
@keyframes gaugeFill { to { stroke-dashoffset: 152; } }
@media (prefers-reduced-motion: reduce) { .gauge .val { animation: none; stroke-dashoffset: 152; } }
.gauge-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-txt b {
  font-family: var(--font-head); font-size: 2.1rem; font-weight: 800;
  color: #fff; line-height: 1; font-variant-numeric: tabular-nums;
}
.gauge-txt small {
  font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--band-muted); margin-top: 0.25rem;
}
.score-list { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 0.5rem; }
.score-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.8rem; color: var(--band-fg); }
.score-foot {
  padding: 0.7rem 1.1rem; border-top: 1px solid var(--band-border);
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--band-muted); line-height: 1.6;
}

/* ============================================================
   STATUS BADGES
   ============================================================ */

.status {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.18rem 0.45rem; border-radius: var(--r-sm);
  border: 1px solid; white-space: nowrap; flex-shrink: 0;
}
.st-ok   { background: var(--emerald-soft); color: var(--emerald-deep); border-color: var(--emerald-line); }
.st-pend { background: var(--amber-soft);   color: var(--amber-text);   border-color: var(--amber-line); }
.st-gap  { background: var(--crimson-soft); color: var(--crimson-text); border-color: var(--crimson-line); }
.st-opt  { background: var(--surface-alt);  color: var(--fg-faint);     border-color: var(--border-firm); }

.band .st-ok   { background: rgba(16, 185, 129, 0.12); color: var(--emerald-lite); border-color: rgba(110, 231, 183, 0.3); }
.band .st-pend { background: rgba(245, 158, 11, 0.12); color: #FBBF24; border-color: rgba(252, 211, 77, 0.3); }
.band .st-gap  { background: rgba(239, 68, 68, 0.12);  color: #F87171; border-color: rgba(252, 165, 165, 0.3); }
.band .st-opt  { background: rgba(255, 255, 255, 0.04); color: var(--band-muted); border-color: var(--band-border); }

/* ============================================================
   CAPABILITY STRIP
   ============================================================ */

.strip { border-bottom: 1px solid var(--border); background: var(--surface); }
.strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); }
.strip-item { background: var(--surface); padding: 1.25rem clamp(0.9rem, 2vw, 1.5rem); }
.strip-item svg {
  width: 22px; height: 22px; stroke: var(--emerald); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 0.65rem;
}
.strip-item h3 { font-size: 0.92rem; margin-bottom: 0.25rem; }
.strip-item p { font-size: 0.82rem; color: var(--fg-muted); line-height: 1.6; }

/* ============================================================
   TABS
   ============================================================ */

.tabs {
  display: inline-flex; padding: 3px; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: 2px;
}
.band .tabs { background: var(--band-card); border-color: var(--band-border); }
.tab {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  color: var(--fg-muted); background: none; border: 1px solid transparent;
  border-radius: var(--r-md); padding: 0.5rem 1.05rem; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.band .tab { color: var(--band-muted); }
.tab[aria-selected="true"] { background: var(--surface); color: var(--fg); border-color: var(--border-firm); }
.band .tab[aria-selected="true"] { background: var(--navy-700); color: #fff; border-color: var(--navy-600); }
.tab-note { font-family: var(--font-mono); font-size: 0.7rem; color: var(--fg-faint); margin-bottom: 1rem; line-height: 1.6; }
.band .tab-note { color: var(--band-muted); }

/* ============================================================
   TABLES
   ============================================================ */

.tbl-card { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.band .tbl-card { border-color: var(--band-border); background: var(--band-card); }
.tbl-scroll { overflow-x: auto; }

table { border-collapse: collapse; width: 100%; min-width: 560px; }
caption {
  text-align: left; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint);
  padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.band caption { color: var(--band-muted); border-color: var(--band-border); background: rgba(255, 255, 255, 0.02); }
th {
  text-align: left; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint);
  padding: 0.65rem 1.1rem; border-bottom: 1px solid var(--border);
}
.band th { color: var(--band-muted); border-color: var(--band-border); }
td { padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; vertical-align: top; color: var(--fg); }
.band td { border-color: var(--band-border); color: var(--band-fg); }
tbody tr:last-child td { border-bottom: none; }
td.area { font-weight: 600; width: 23%; }
td.mono { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-text); white-space: nowrap; font-weight: 500; }
.band td.mono { color: var(--emerald-lite); }

/* ============================================================
   CALLOUT
   ============================================================ */

.callout {
  display: flex; gap: 0.75rem; align-items: flex-start;
  border: 1px solid var(--border); border-left: 3px solid var(--emerald);
  background: var(--surface); border-radius: var(--r-md);
  padding: 0.95rem 1.1rem; margin-top: 1.25rem; max-width: var(--maxw);
}
.band .callout { background: var(--band-card); border-color: var(--band-border); border-left-color: var(--emerald); }
.callout svg {
  width: 18px; height: 18px; stroke: var(--emerald); fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; margin-top: 2px;
}
.callout p { font-size: 0.88rem; color: var(--fg-muted); line-height: 1.65; }
.band .callout p { color: var(--band-muted); }
.callout p b { color: var(--fg); font-weight: 600; }
.band .callout p b { color: var(--band-fg); }

/* ============================================================
   CARD GRIDS
   ============================================================ */

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem; }
.band .card { background: var(--band-card); border-color: var(--band-border); }
.card h3 { margin-bottom: 0.4rem; }
.card p { font-size: 0.85rem; color: var(--fg-muted); line-height: 1.65; }
.band .card p { color: var(--band-muted); }
.card .mk {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  color: var(--accent-text); display: block; margin-bottom: 0.6rem; letter-spacing: 0.06em;
}
.band .card .mk { color: var(--emerald-lite); }

.card-ico {
  width: 34px; height: 34px; border-radius: var(--r-md);
  border: 1px solid var(--border); display: grid; place-items: center;
  background: var(--surface-alt); margin-bottom: 0.9rem;
}
.band .card-ico { border-color: var(--band-border); background: rgba(255, 255, 255, 0.03); }
.card-ico svg {
  width: 18px; height: 18px; stroke: var(--emerald); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.band .card-ico svg { stroke: var(--emerald-lite); }

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.9rem; }
.card-top .card-ico { margin-bottom: 0; }

/* ============================================================
   STEP SECTIONS (the engagement)
   ============================================================ */

.step-block { border-top: 1px solid var(--border); padding-block: clamp(2rem, 4vw, 3rem); }
.band .step-block { border-color: var(--band-border); }
.step-block:first-of-type { border-top: none; }

.step-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.step-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: 0.7rem; }
.step-head p { font-size: 0.92rem; color: var(--fg-muted); line-height: 1.7; max-width: 46ch; }
.band .step-head p { color: var(--band-muted); }
.step-label {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text);
  display: block; margin-bottom: 0.6rem;
}
.band .step-label { color: var(--emerald-lite); }

.deliver-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.band .deliver-card { background: var(--band-card); border-color: var(--band-border); }
.deliver-hd {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint);
  padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface-alt);
  display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
}
.band .deliver-hd { color: var(--band-muted); border-color: var(--band-border); background: rgba(255, 255, 255, 0.02); }
.deliver-list { display: flex; flex-direction: column; }
.deliver-row {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--border);
}
.band .deliver-row { border-color: var(--band-border); }
.deliver-row:last-child { border-bottom: none; }
.deliver-row svg {
  width: 15px; height: 15px; stroke: var(--emerald); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; margin-top: 4px;
}
.band .deliver-row svg { stroke: var(--emerald-lite); }
.deliver-row div b { display: block; font-size: 0.88rem; font-weight: 600; color: var(--fg); margin-bottom: 0.1rem; }
.band .deliver-row div b { color: var(--band-fg); }
.deliver-row div span { font-size: 0.82rem; color: var(--fg-muted); line-height: 1.6; }
.band .deliver-row div span { color: var(--band-muted); }

/* ============================================================
   CHECKLIST / GAP LIST
   ============================================================ */

.gap-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; margin-top: 1.75rem; }
.band .gap-list { background: var(--band-border); border-color: var(--band-border); }
.gap-row { background: var(--surface); padding: 1rem 1.2rem; display: flex; gap: 1rem; align-items: flex-start; }
.band .gap-row { background: var(--band-card); }
.gap-row svg {
  width: 17px; height: 17px; stroke: var(--crimson); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; margin-top: 3px;
}
.gap-row div b { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.15rem; }
.gap-row div p { font-size: 0.84rem; color: var(--fg-muted); line-height: 1.6; }
.band .gap-row div p { color: var(--band-muted); }

/* ============================================================
   FACT TABLE
   ============================================================ */

.fact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.band .fact-card { background: var(--band-card); border-color: var(--band-border); }
.fact-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
.band .fact-row { border-color: var(--band-border); }
.fact-row:last-child { border-bottom: none; }
.fact-row span { color: var(--fg-muted); }
.band .fact-row span { color: var(--band-muted); }
.fact-row b { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; text-align: right; color: var(--fg); }
.band .fact-row b { color: var(--band-fg); }

/* ============================================================
   SPLIT
   ============================================================ */

.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-top: 1.5rem; }
.split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ============================================================
   STEPS (numbered process, contact page)
   ============================================================ */

.steps { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.4rem; }
.step { display: flex; gap: 0.85rem; align-items: flex-start; }
.step > b {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--band-border); color: var(--emerald-lite); background: rgba(16, 185, 129, 0.08);
}
.step div h4 { font-size: 0.9rem; margin-bottom: 0.15rem; }
.step div p { font-size: 0.84rem; color: var(--band-muted); line-height: 1.6; }

.mailbox { margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--band-border); }
.mailbox > span {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--band-muted); display: block; margin-bottom: 0.35rem;
}
.mailbox > a {
  font-family: var(--font-mono); font-size: 0.98rem; font-weight: 500;
  color: var(--emerald-lite); text-decoration: none;
  border-bottom: 1px solid rgba(52, 211, 153, 0.4); word-break: break-all;
}

/* ============================================================
   FORM
   ============================================================ */

form.intake { background: var(--band-card); border: 1px solid var(--band-border); border-radius: var(--r-lg); padding: 1.35rem; }
.intake-hd {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--band-muted);
  padding-bottom: 0.8rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--band-border);
}
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.fld { margin-bottom: 0.9rem; }
.fld label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--band-fg); margin-bottom: 0.35rem; }
.fld input, .fld select, .fld textarea {
  width: 100%; font-family: var(--font-body); font-size: 0.875rem; color: var(--band-fg);
  background: var(--navy-900); border: 1px solid var(--band-border); border-radius: var(--r-md);
  padding: 0.6rem 0.75rem; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fld textarea { resize: vertical; min-height: 92px; }
.fld input::placeholder, .fld textarea::placeholder { color: #5A6B82; }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.f-note { font-size: 0.75rem; color: var(--band-muted); margin-top: 0.8rem; line-height: 1.55; }
.form-msg {
  display: none; margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: var(--r-md);
  background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(110, 231, 183, 0.3);
  color: var(--emerald-lite); font-size: 0.84rem;
}
.form-msg.show { display: block; }

/* ============================================================
   FAQ / ACCORDION
   ============================================================ */

.faq { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); margin-top: 1.5rem; }
.band .faq { background: var(--band-card); border-color: var(--band-border); }
.faq-item { border-bottom: 1px solid var(--border); }
.band .faq-item { border-color: var(--band-border); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-head); font-size: 0.95rem; font-weight: 600; color: var(--fg);
  padding: 1rem 1.2rem; letter-spacing: -0.015em;
}
.band .faq-q { color: var(--band-fg); }
.faq-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--fg-faint);
  transition: transform .18s ease, opacity .18s ease;
}
.band .faq-icon::before, .band .faq-icon::after { background: var(--band-muted); }
.faq-icon::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.faq-icon::after { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.faq-q[aria-expanded="true"] .faq-icon::after { opacity: 0; }
.faq-a { display: none; padding: 0 1.2rem 1.1rem; }
.faq-a.open { display: block; }
.faq-a p { font-size: 0.88rem; color: var(--fg-muted); line-height: 1.7; max-width: var(--maxw); }
.band .faq-a p { color: var(--band-muted); }

/* ============================================================
   GLOSSARY TERM
   ============================================================ */

.term {
  font: inherit; color: inherit; background: none; border: none; padding: 0;
  cursor: help; border-bottom: 1px dashed var(--emerald); position: relative;
}
.term:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: 2px; }
.term .tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max(220px, 18rem); max-width: 78vw;
  background: var(--navy-850); color: #E2E8F0;
  border: 1px solid var(--navy-700); border-radius: var(--r-md); padding: 0.6rem 0.75rem;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; line-height: 1.55;
  text-align: left; letter-spacing: 0; text-transform: none;
  opacity: 0; visibility: hidden; transition: opacity .13s ease; z-index: 90; pointer-events: none;
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.3);
}
.term .tip b {
  display: block; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--emerald-lite); margin-bottom: 0.25rem;
}
.term:hover .tip, .term:focus-visible .tip, .term.open .tip { opacity: 1; visibility: visible; }

/* ============================================================
   CTA
   ============================================================ */

.cta { text-align: center; }
.cta h2 { max-width: 24ch; margin-inline: auto; }
.cta .lede { margin-inline: auto; max-width: 54ch; }
.cta .hero-cta { justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */

footer { background: var(--band); border-top: 1px solid var(--band-border); }
.foot-in { padding-block: 2.5rem 1.6rem; }
.foot-top {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--band-border);
}
.foot-blurb { font-size: 0.85rem; color: var(--band-muted); line-height: 1.7; margin-top: 0.9rem; max-width: 44ch; }
.foot-col strong {
  display: block; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--band-muted); margin-bottom: 0.75rem;
}
.foot-col a { display: block; font-size: 0.85rem; color: var(--band-fg); text-decoration: none; margin-bottom: 0.45rem; }
.foot-col a:hover { color: var(--emerald-lite); }
.foot-bot {
  padding-top: 1.3rem; display: flex; justify-content: space-between;
  gap: 0.8rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--band-muted);
}
.foot-bot .mono { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {
  .hero-grid, .split, .split-even, .step-grid { grid-template-columns: 1fr; }
  .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--band); border-bottom: 1px solid var(--band-border);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem clamp(1rem, 4vw, 2.5rem) 1rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.6rem 0; border-bottom: 1px solid var(--band-border); font-size: 0.9rem; }
  .nav-links a:last-child { border-bottom: none; margin-top: 0.6rem; }
  .nav { position: relative; }
}

@media (max-width: 640px) {
  .strip-grid, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .f2 { grid-template-columns: 1fr; }
  .score-body { justify-content: center; }
  .hero-foot { gap: 0.8rem; flex-direction: column; }
  td.area { width: auto; }
}

/* ============================================================
   DEADLINE BAR
   ============================================================ */

.deadline-bar {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
}
.deadline-in {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  padding-block: 0.55rem;
}
.deadline-in .dl-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  flex-shrink: 0;
}
.deadline-in p {
  font-size: 0.8rem; color: var(--fg-muted); margin: 0; flex: 1; min-width: 230px;
}
.deadline-in p b { color: var(--fg); font-weight: 600; }
.deadline-in a {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500;
  color: var(--accent-text); text-decoration: none;
  border-bottom: 1px solid currentColor; white-space: nowrap;
}

/* ============================================================
   FOOTER CONTACT + DISCLAIMER
   ============================================================ */

.foot-contact { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.1rem; }
.foot-contact a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; color: var(--band-fg); text-decoration: none;
}
.foot-contact a:hover { color: var(--emerald-lite); }
.foot-contact svg {
  width: 15px; height: 15px; stroke: var(--emerald-lite); fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.foot-disclaimer {
  font-size: 0.75rem; line-height: 1.65; color: var(--band-muted);
  padding-top: 1.3rem; max-width: var(--maxw);
}
.foot-bot { padding-top: 0.9rem; }

/* ============================================================
   CONSENT BANNER
   ============================================================ */

.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--surface); border-top: 1px solid var(--border-firm);
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.10);
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.consent-inner {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.consent-text { flex: 1; min-width: 260px; }
.consent-text b { display: block; font-family: var(--font-head); font-size: 0.92rem; font-weight: 700; margin-bottom: 0.2rem; }
.consent-text p { font-size: 0.82rem; color: var(--fg-muted); line-height: 1.6; max-width: 76ch; }
.consent-text a { color: var(--accent-text); }
.consent-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; flex-shrink: 0; }

/* ============================================================
   LEGAL / LONG FORM PAGES
   ============================================================ */

.legal { max-width: 74ch; }
.legal h2 {
  font-size: 1.25rem; margin-top: 2.2rem; margin-bottom: 0.7rem;
  padding-top: 1.4rem; border-top: 1px solid var(--border);
}
.legal h2:first-of-type { margin-top: 1.4rem; }
.legal h3 { font-size: 1rem; margin-top: 1.4rem; margin-bottom: 0.45rem; }
.legal p { font-size: 0.92rem; color: var(--fg-muted); margin-bottom: 0.9rem; line-height: 1.75; }
.legal p b, .legal li b { color: var(--fg); font-weight: 600; }
.legal ul { margin: 0 0 1rem 1.1rem; padding: 0; }
.legal li { font-size: 0.92rem; color: var(--fg-muted); margin-bottom: 0.45rem; line-height: 1.7; }
.legal a { color: var(--accent-text); }
.legal .meta {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-faint);
  padding: 0.8rem 1rem; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 1.5rem;
}
.legal .tbl-card { margin: 1.2rem 0; }

.toc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.1rem 1.25rem; margin-bottom: 1.75rem;
}
.toc strong {
  display: block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 0.6rem;
}
.toc ol { margin: 0; padding-left: 1.1rem; }
.toc li { font-size: 0.86rem; margin-bottom: 0.3rem; }
.toc a { color: var(--fg); text-decoration: none; }
.toc a:hover { color: var(--accent-text); text-decoration: underline; }

/* ============================================================
   FORM CONSENT BLOCK
   ============================================================ */

.consent-field {
  display: flex; gap: 0.6rem; align-items: flex-start;
  margin-bottom: 0.7rem;
}
.consent-field input[type="checkbox"] {
  width: 16px; height: 16px; min-width: 16px; margin-top: 3px;
  accent-color: var(--emerald); cursor: pointer;
}
.consent-field label {
  font-size: 0.8rem; font-weight: 400; color: var(--band-fg);
  line-height: 1.55; margin: 0; cursor: pointer;
}
.consent-field label .req { color: var(--crimson); font-weight: 600; }
.consent-field label a { color: var(--emerald-lite); }
.notice-box {
  border: 1px solid var(--band-border); border-radius: var(--r-md);
  padding: 0.8rem 0.9rem; margin: 1.1rem 0 1rem;
  background: rgba(16, 185, 129, 0.05);
}
.notice-box b {
  display: block; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--emerald-lite); margin-bottom: 0.4rem;
}
.notice-box p { font-size: 0.78rem; color: var(--band-muted); line-height: 1.6; margin: 0; }
.notice-box p + p { margin-top: 0.45rem; }
.notice-box a { color: var(--emerald-lite); }
.form-err {
  display: none; margin-top: 0.5rem; font-size: 0.8rem; color: #F87171;
}
.form-err.show { display: block; }

/* ============================================================
   CONTACT CHANNEL CARDS
   ============================================================ */

.channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; margin-top: 1.25rem; }
.channel {
  display: flex; gap: 0.7rem; align-items: flex-start;
  border: 1px solid var(--band-border); border-radius: var(--r-md);
  padding: 0.9rem; text-decoration: none; background: var(--band-card);
}
.channel:hover { border-color: var(--emerald); }
.channel svg {
  width: 17px; height: 17px; stroke: var(--emerald-lite); fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 2px;
}
.channel b { display: block; font-size: 0.78rem; font-weight: 600; color: var(--band-fg); }
.channel span {
  display: block; font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--band-muted); margin-top: 0.1rem;
  text-transform: none; letter-spacing: 0; overflow-wrap: anywhere;
}
.channel b { text-transform: none; letter-spacing: 0; }

/* ============================================================
   COMPARISON TABLE (platform vs consultant)
   ============================================================ */

td.ans { white-space: nowrap; font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; }
td.ans.yes { color: var(--accent-text); }
.band td.ans.yes { color: var(--emerald-lite); }
td.ans.no { color: var(--fg-faint); }
.band td.ans.no { color: var(--band-muted); }
td.ans.part { color: var(--amber-text); }
th.us { color: var(--accent-text) !important; }
.band th.us { color: var(--emerald-lite) !important; }
td.us-col { background: var(--emerald-soft); }
.band td.us-col { background: rgba(16, 185, 129, 0.07); }

/* ============================================================
   SELF ASSESSMENT
   ============================================================ */

.quiz { max-width: 820px; }
.q-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.4rem; margin-bottom: 1rem;
}
.q-num {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text);
  display: block; margin-bottom: 0.4rem;
}
.q-card h3 { font-size: 1.02rem; margin-bottom: 0.9rem; }
.q-opts { display: flex; flex-direction: column; gap: 0.5rem; }
.q-opt {
  display: flex; gap: 0.65rem; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 0.6rem 0.8rem; cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.q-opt:hover { border-color: var(--border-firm); }
.q-opt input { margin-top: 3px; accent-color: var(--emerald); cursor: pointer; }
.q-opt span { font-size: 0.875rem; color: var(--fg-muted); line-height: 1.55; }
.q-opt.sel { border-color: var(--emerald); background: var(--emerald-soft); }
.q-opt.sel span { color: var(--fg); }

.result {
  display: none; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden; margin-top: 1.5rem;
}
.result.show { display: block; }
.result-hd {
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap;
  padding: 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.result-score { text-align: center; }
.result-score b {
  display: block; font-family: var(--font-head); font-size: 3rem; font-weight: 800;
  line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums;
}
.result-score span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.result-say { flex: 1; min-width: 240px; }
.result-say h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.result-say p { font-size: 0.9rem; color: var(--fg-muted); line-height: 1.65; }
.result-body { padding: 1.4rem 1.5rem; }
.result-body h4 { font-size: 0.95rem; margin-bottom: 0.7rem; }
.gap-out { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.3rem; }
.gap-out div { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.875rem; color: var(--fg-muted); line-height: 1.6; }
.gap-out div::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--crimson); flex-shrink: 0; margin-top: 8px; }
.quiz-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.5rem; }

@media (max-width: 760px) {
  .channels { grid-template-columns: 1fr; }
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1; }
}

/* ============================================================
   VARIANT: Light dominant + Azure blue
   Loads the base system, then re-pitches the palette.

   What changes
   - Dominant flips from navy to white. Section bands become a
     pale blue tint instead of navy.
   - Navy is retained for the navigation shell and the footer only,
     so the brand keeps an anchor at the top and bottom of every page.
   - Brand and interactive colour becomes azure blue.
   - Green is demoted to a single job: the "complete" status badge.
     Amber means pending, crimson means gap, green means done.
   ============================================================ */


:root {
  /* ---- surfaces: white dominant ---- */
  --page:        #FFFFFF;
  --surface:     #FFFFFF;
  --surface-alt: #F4F7FC;
  --border:      #E3E9F2;
  --border-firm: #C8D4E4;

  --fg:       #0F1B2E;
  --fg-muted: #4A5A70;
  --fg-faint: #6B7A90;

  /* ---- bands: pale blue instead of navy ---- */
  --band:        #F3F7FD;
  --band-fg:     #0F1B2E;
  --band-muted:  #4A5A70;
  --band-border: #DCE5F2;
  --band-card:   #FFFFFF;

  /* ---- brand accent: azure blue (overrides the emerald tokens) ---- */
  --emerald:      #1D4FD8;
  --emerald-deep: #163C9E;
  --emerald-lite: #4F82F0;
  --emerald-soft: #E6EDFD;
  --emerald-line: #AFC6F8;
  --accent-text:  #163C9E;

  /* ---- status green, used only for "complete" ---- */
  --ok:      #0E9F6E;
  --ok-text: #046C4E;
  --ok-soft: #DEF7EC;
  --ok-line: #84E1BC;

  /* ---- navy shell for nav and footer ---- */
  --shell:        #0F1B2E;
  --shell-fg:     #E7EDF6;
  --shell-muted:  #9AAAC0;
  --shell-border: #223148;

  --rule-grid: rgba(29, 79, 216, 0.10);
}

/* ============================================================
   NAVY SHELL — navigation and footer keep the dark anchor
   ============================================================ */

.nav { background: var(--shell); border-bottom-color: var(--shell-border); }
.nav .brand-mark { border-color: var(--shell-border); background: rgba(79, 130, 240, 0.14); }
.nav .brand-mark svg { stroke: #8FB4F7; }
.nav .brand-txt b { color: #fff; }
.nav .brand-txt span { color: var(--shell-muted); }
.nav .nav-links a { color: var(--shell-muted); }
.nav .nav-links a:hover, .nav .nav-links a.active { color: #fff; }
.nav .nav-toggle { border-color: var(--shell-border); }
.nav .nav-toggle span { background: var(--shell-muted); }

@media (max-width: 760px) {
  .nav .nav-links { background: var(--shell); border-bottom-color: var(--shell-border); }
  .nav .nav-links a { border-bottom-color: var(--shell-border); }
}

footer { background: var(--shell); border-top-color: var(--shell-border); }
footer .brand-mark { border-color: var(--shell-border); background: rgba(79, 130, 240, 0.14); }
footer .brand-mark svg { stroke: #8FB4F7; }
footer .brand-txt b { color: #fff; }
footer .brand-txt span { color: var(--shell-muted); }
footer .foot-top { border-bottom-color: var(--shell-border); }
footer .foot-blurb { color: var(--shell-muted); }
footer .foot-col strong { color: var(--shell-muted); }
footer .foot-col a { color: var(--shell-fg); }
footer .foot-col a:hover { color: #8FB4F7; }
footer .foot-bot { color: var(--shell-muted); }

/* ============================================================
   LIGHT BANDS — undo assumptions that bands are dark
   ============================================================ */

.hero h1 { color: var(--fg); }
.hero { border-bottom-color: var(--band-border); }

.brand-mark { background: var(--emerald-soft); }
.pill.on { background: var(--emerald-soft); border-color: var(--emerald-line); color: var(--emerald-deep); }
.pill { border-color: var(--border-firm); color: var(--fg-faint); }

.btn-primary { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.btn-primary:hover { background: #2A5FE4; border-color: #2A5FE4; }
.btn-outline { color: var(--fg); border-color: var(--border-firm); }
.btn-outline:hover { border-color: var(--emerald); color: var(--emerald-deep); }

/* readiness widget */
.score-card { box-shadow: 0 1px 2px rgba(15, 27, 46, 0.04); }
.score-hd b { color: var(--fg); }
.gauge .track { stroke: var(--surface-alt); }
.gauge-txt b { color: var(--fg); }

/* status badges: green now means one thing only */
.st-ok, .band .st-ok { background: var(--ok-soft); color: var(--ok-text); border-color: var(--ok-line); }
.st-pend, .band .st-pend { background: var(--amber-soft); color: var(--amber-text); border-color: var(--amber-line); }
.st-gap, .band .st-gap { background: var(--crimson-soft); color: var(--crimson-text); border-color: var(--crimson-line); }
.st-opt, .band .st-opt { background: var(--surface-alt); color: var(--fg-faint); border-color: var(--border-firm); }

/* tabs inside bands */
.band .tabs { background: var(--surface-alt); border-color: var(--border); }
.band .tab { color: var(--fg-muted); }
.band .tab[aria-selected="true"] { background: var(--surface); color: var(--fg); border-color: var(--border-firm); }

/* tables inside bands */
.band caption { background: var(--surface-alt); color: var(--fg-faint); border-color: var(--border); }

/* process steps on the contact page */
.step > b { border-color: var(--emerald-line); color: var(--emerald-deep); background: var(--emerald-soft); }
.step div p { color: var(--fg-muted); }

.mailbox { border-top-color: var(--band-border); }
.mailbox span { color: var(--fg-faint); }
.mailbox a { color: var(--emerald-deep); border-bottom-color: var(--emerald-line); }

/* form */
form.intake { box-shadow: 0 1px 2px rgba(15, 27, 46, 0.04); }
.intake-hd { color: var(--fg-faint); border-bottom-color: var(--border); }
.fld label { color: var(--fg); }
.fld input, .fld select, .fld textarea {
  background: var(--surface); color: var(--fg); border-color: var(--border-firm);
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--fg-faint); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(29, 79, 216, 0.14);
}
.f-note { color: var(--fg-faint); }
.form-msg {
  background: var(--emerald-soft);
  border-color: var(--emerald-line);
  color: var(--emerald-deep);
}

/* misc accents */
.skip { background: var(--emerald); color: #fff; }
.callout { border-left-color: var(--emerald); }
.term { border-bottom-color: var(--emerald); }
.deliver-row svg, .band .deliver-row svg { stroke: var(--emerald); }
.card-ico svg, .band .card-ico svg { stroke: var(--emerald); }
.hero-foot svg { stroke: var(--emerald); }
.hero-foot div { color: var(--fg-muted); }
.hero-foot { border-top-color: var(--band-border); }
.crumb { color: var(--fg-faint); }
.crumb a:hover { color: var(--emerald-deep); }
.band .kicker { color: var(--accent-text); }
.deliver-row div span, .band .deliver-row div span { color: var(--fg-muted); }
.band .card-ico { background: var(--surface-alt); border-color: var(--border); }
.band .deliver-hd { background: var(--surface-alt); color: var(--fg-faint); border-color: var(--border); }

/* cards on light bands need a hairline lift so they read as objects */
.band .card, .band .deliver-card, .band .tbl-card, .band .fact-card, .band .faq {
  box-shadow: 0 1px 2px rgba(15, 27, 46, 0.03);
}

/* ============================================================
   LATER COMPONENTS
   Added after the first colour pass. Mostly reversing the
   assumption that bands and the footer share one palette.
   ============================================================ */

/* deadline bar */
.deadline-bar { background: var(--surface-alt); border-bottom-color: var(--border); }
.deadline-in a { color: var(--emerald-deep); }

/* footer sits on navy, so its contact block needs light values */
footer .foot-contact a { color: var(--shell-fg); }
footer .foot-contact a:hover { color: #8FB4F7; }
footer .foot-contact svg { stroke: #8FB4F7; }
footer .foot-disclaimer { color: var(--shell-muted); border-top-color: var(--shell-border); }
footer .foot-bot { color: var(--shell-muted); }

/* consent banner */
.consent-banner { background: var(--surface); border-top-color: var(--border-firm); box-shadow: 0 -6px 24px rgba(15, 27, 46, 0.09); }
.consent-text a { color: var(--emerald-deep); }

/* form notice and consent boxes now sit on a white card */
.notice-box { background: var(--emerald-soft); border-color: var(--emerald-line); }
.notice-box b { color: var(--emerald-deep); }
.notice-box p { color: var(--fg-muted); }
.notice-box a { color: var(--emerald-deep); }
.consent-field label { color: var(--fg); }
.consent-field label a { color: var(--emerald-deep); }
.consent-field label .req { color: var(--crimson-text); }
.consent-field input[type="checkbox"] { accent-color: var(--emerald); }
.form-err { color: var(--crimson-text); }

/* contact channel cards */
.channel { background: var(--surface); border-color: var(--border); }
.channel:hover { border-color: var(--emerald); }
.channel svg { stroke: var(--emerald); }
.channel b { color: var(--fg); }
.channel span { color: var(--fg-muted); }
.mailbox { border-top-color: var(--border); }
.mailbox > span { color: var(--fg-faint); }
.mailbox > a { color: var(--emerald-deep); border-bottom-color: var(--emerald-line); }

/* readiness check */
.q-opt input { accent-color: var(--emerald); }
.q-opt.sel { border-color: var(--emerald); background: var(--emerald-soft); }
.result-hd { background: var(--surface-alt); border-bottom-color: var(--border); }

/* legal pages */
.legal a { color: var(--emerald-deep); }
.legal .meta { background: var(--surface-alt); border-color: var(--border); color: var(--fg-faint); }
.toc a:hover { color: var(--emerald-deep); }

/* comparison table */
td.ans.yes { color: var(--emerald-deep); }
td.us-col { background: var(--emerald-soft); }
th.us { color: var(--emerald-deep) !important; }

/* ============================================================
   ALTERNATING SECTION GROUNDS
   Backgrounds come from position rather than from a class, so
   every page alternates cleanly however its sections are ordered.
   Odd sections are white, even sections take the tint.

   --section-bg inherits, so anything inside a section that needs
   to sit flush with its ground reads the same value.
   ============================================================ */

:root {
  --tint: #EFF4FD;
  --band: #FFFFFF;
}

main > section:nth-of-type(even) { --section-bg: var(--tint); }

/* .band, .hero and .strip each set their own background, so the
   positional rule has to out-specify them rather than sit under them */
main > section,
main > section.band,
main > section.hero,
main > section.strip { background-color: var(--section-bg, var(--page)); }

/* the capability strip is built from flush panels, so they follow the ground */
.strip, .strip-item { background-color: var(--section-bg, var(--page)); }
.strip { border-bottom: none; }

/* colour now does the separating, so the hairlines come off */
.hero { border-bottom: none; }

/* white cards on a tinted ground need a defined edge, not a shadow */
.card, .deliver-card, .tbl-card, .fact-card, .faq,
.statute-card, .q-card, .result, .score-card, form.intake {
  border-color: var(--border-firm);
}
.band .card, .band .deliver-card, .band .tbl-card,
.band .fact-card, .band .faq, .band .statute-card {
  border-color: var(--border-firm);
  box-shadow: none;
}
.gap-list { background: var(--border-firm); border-color: var(--border-firm); }
.strip-grid { background: var(--border-firm); }

/* the two interactive surfaces keep a slight lift on either ground */
form.intake, .score-card { box-shadow: 0 1px 3px rgba(15, 27, 46, 0.06); }

/* table headers need to stay distinct from a tinted section behind them */
caption, th { background-color: var(--surface-alt); }
.band caption { background-color: var(--surface-alt); }

/* Long-form documents are a single section, so alternation would put a
   whole policy on the tint. Reading comfort wins over rhythm here. */
main > section:has(.legal) { --section-bg: var(--page); }

/* ============================================================
   LONG-FORM LAYOUT
   A 70ch column left-aligned inside a 1200px container leaves
   the right half of a wide screen empty. Centre it, and where a
   contents list exists, move it into that space as a sticky rail.
   ============================================================ */

.legal { margin-inline: auto; }

@media (min-width: 1080px) {
  .legal:has(.toc) {
    max-width: none;
    display: grid;
    grid-template-columns: 232px minmax(0, 72ch);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    justify-content: center;
    align-items: start;
  }
  .legal:has(.toc) > * { grid-column: 2; }
  .legal:has(.toc) > .toc {
    grid-column: 1;
    grid-row: 1 / span 500;
    position: sticky;
    top: 104px;
    margin-bottom: 0;
  }
  .legal:has(.toc) > .toc ol { padding-left: 1.05rem; }
  .legal:has(.toc) > .toc li { font-size: 0.82rem; line-height: 1.5; margin-bottom: 0.45rem; }
}

/* ============================================================
   ENGAGEMENT STEP SPACING
   Each step sat inside a padded section AND a padded block, so
   roughly 240px of air separated one step's content from the next.
   The section padding alone is enough now that the grounds alternate.
   ============================================================ */

.step-block { border-top: none; padding-block: 0; }
main > section:has(.step-block) { padding-block: clamp(1.75rem, 3.4vw, 2.75rem); }
.step-head p + p { margin-top: 0.7rem; }

/* the first heading needs no rule above it */
.legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0.4rem; }

/* ============================================================
   LINK CARDS
   A card that is a link has to look like one. These rules apply
   only to <a class="card">, so the plain <div class="card">
   blocks elsewhere on the site are left alone.
   ============================================================ */

a.card {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
  padding-bottom: 3.2rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

a.card > p:last-of-type { margin-bottom: 0; }

/* the cue sits on the bottom edge, so it lines up across a row
   however long each card's text runs */
a.card::after {
  content: "Read more";
  position: absolute;
  left: 1.25rem;
  bottom: 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  border-bottom: 1px solid var(--emerald-line);
  padding-bottom: 2px;
  transition: color 0.16s ease, border-color 0.16s ease;
}

a.card:hover {
  border-color: var(--emerald-line);
  box-shadow: 0 4px 14px rgba(15, 27, 46, 0.07);
  transform: translateY(-2px);
}

a.card:hover::after { color: var(--emerald); border-bottom-color: var(--emerald); }
a.card:hover h3 { color: var(--emerald-deep); }
a.card:hover .card-ico { background: var(--emerald-soft); border-color: var(--emerald-line); }

/* keyboard users get the same signal, plus a visible ring */
a.card:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
  border-color: var(--emerald-line);
}
a.card:focus-visible::after { color: var(--emerald); border-bottom-color: var(--emerald); }

@media (prefers-reduced-motion: reduce) {
  a.card { transition: none; }
  a.card:hover { transform: none; }
}
/* ============================================================
   TIMELINE (hero card, index)
   A vertical rail with one marker per milestone. Green marks a
   milestone already passed, which is the same meaning green
   carries everywhere else on the site. Azure marks where the
   reader is now and what they are working towards.
   ============================================================ */

.tl { padding: 1.15rem 1.25rem 0.35rem; }

.tl-row {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0 0 1.15rem 1.4rem;
}

/* the rail, drawn behind the markers and stopped at the last row */
.tl-row::before {
  content: "";
  position: absolute;
  left: 4px; top: 6px; bottom: -6px;
  width: 1px;
  background: var(--border-firm);
}
.tl-row:last-child { padding-bottom: 0.5rem; }
.tl-row:last-child::before { display: none; }

/* the marker */
.tl-row::after {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--page);
  border: 2px solid var(--border-firm);
  box-sizing: border-box;
}
.tl-row.is-done::after   { background: var(--ok); border-color: var(--ok); }
.tl-row.is-now::after    { background: var(--emerald); border-color: var(--emerald); }
.tl-row.is-target::after { background: var(--page); border-color: var(--emerald); border-width: 3px; }

.tl-when {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--fg-faint); padding-top: 1px;
}
.tl-row.is-now .tl-when,
.tl-row.is-target .tl-when { color: var(--accent-text); }

.tl-what b { display: block; font-size: 0.86rem; font-weight: 600; color: var(--fg); margin-bottom: 0.15rem; }
.tl-what p { font-size: 0.8rem; line-height: 1.6; color: var(--fg-muted); }

/* the deadline is the one row that should catch the eye */
.tl-row.is-target .tl-what {
  background: var(--emerald-soft);
  border: 1px solid var(--emerald-line);
  border-radius: var(--r-md);
  padding: 0.6rem 0.7rem;
  margin-top: -0.45rem;
}

@media (max-width: 420px) {
  .tl-row { grid-template-columns: 1fr; gap: 0.2rem; }
}
/* ============================================================
   LIGHT ONLY
   The site does not follow the viewer's dark setting. Backgrounds
   stay white whatever the operating system is set to, and native
   controls and scrollbars are told to render light so they match.

   The dark-capable stylesheet is kept at style-dual.css. To restore
   automatic dark mode, point the pages at that file instead.
   ============================================================ */

:root { color-scheme: light; }