/* ==========================================================================
   FOIA Agent — "Civic Archive" design system
   Brand-aligned to brand.foiaagent.dev:
   Brand Navy grounds · Action Blue leads · Civic Teal verifies ·
   Seal Gold certifies · Error Red warns. Warm paper surfaces keep it alive.
   Color is never the only signal — status = hue + label + icon.
   ========================================================================== */

:root {
  /* ---- Surfaces (warm, so the page stays alive, not clinical) ---- */
  --paper: #F6F4EF;
  --paper-warm: #EFEBE1;
  --paper-card: #FFFFFF;
  --paper-fcard: #FCFBF8;

  /* ---- Ink / navy foundation (brand: Brand Navy #0F2E5E, Ink #1A1C1E) ---- */
  --ink: #0F2E5E;          /* Brand Navy — headlines, masthead, dark bands */
  --ink-deep: #0A2247;     /* deeper navy for gradients / band floors */
  --ink-2: #14284A;
  --ink-soft: #46566B;
  --ink-faint: #6B7889;
  --body: #1A1C1E;         /* Ink — body text (AAA) */

  /* ---- Lines ---- */
  --line: #D8D2C4;
  --line-soft: #E7E2D7;
  --line-navy: #223A5E;    /* borders inside dark bands */

  /* ---- Action Blue (primary actions, links) ---- */
  --blue: #1B53A6;
  --blue-deep: #143F80;
  --blue-tint: #E6EDF7;
  --blue-light: #6D98D6;   /* on-navy accent text */

  /* ---- Civic Teal (verified, released) ---- */
  --teal: #00696E;
  --teal-deep: #024F53;
  --teal-tint: #DDEEEE;
  --teal-light: #5FB8BC;   /* on-navy accent text */

  /* ---- Seal Gold (seals & certifications) ---- */
  --gold: #B08544;
  --gold-deep: #8A6730;
  --gold-tint: #F5ECD9;
  --gold-light: #D9B877;

  /* ---- Error Red (overdue, denied) ---- */
  --red: #BA1A1A;
  --red-tint: #FBE4E4;

  /* legacy aliases (kept so component rules read cleanly) */
  --green: var(--teal);
  --green-deep: var(--teal-deep);
  --green-tint: var(--teal-tint);
  --amber: var(--gold-deep);
  --amber-tint: var(--gold-tint);
  --redact: #0F2E5E;
  --white: #FFFFFF;

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Spacing scale (4px base grid, per brand) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 7rem;

  --radius: 14px;
  --radius-sm: 8px;
  --container: 74rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: inline-block; vertical-align: middle; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 var(--s-2); font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 var(--s-2); }
a { color: var(--blue); }
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.section { padding-block: clamp(3.5rem, 4vw + 2rem, 6.5rem); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--white); padding: 0.6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 300;
  transform: scaleX(0); transform-origin: left; pointer-events: none;
  background: linear-gradient(90deg, var(--blue), var(--teal) 55%, var(--gold));
  box-shadow: 0 1px 6px rgba(27, 83, 166, 0.4);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.9375rem; line-height: 1;
  padding: 0.8rem 1.3rem; min-height: 44px;
  border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease),
    border-color 200ms var(--ease), transform 200ms var(--ease-spring),
    box-shadow 200ms var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn svg { transition: transform 250ms var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-lg { padding: 1rem 1.6rem; font-size: 1rem; }
.btn-primary { background: var(--blue); color: var(--white); box-shadow: 0 6px 18px -8px rgba(27, 83, 166, 0.6); }
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(27, 83, 166, 0.65); }
/* sheen sweep on primary hover */
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 620ms var(--ease); pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.btn-ghost { color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--blue-tint); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: var(--white); transform: translateY(-2px); }
.btn-outline-light { border-color: rgba(247, 244, 238, 0.55); color: var(--paper); background: transparent; }
.btn-outline-light:hover { border-color: var(--paper); background: rgba(247, 244, 238, 0.12); }

/* ---------- Nav ---------- */
.nav-wrap {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 300ms var(--ease), background 300ms var(--ease), border-color 300ms var(--ease);
}
/* subtle lift once you scroll past the hero */
.nav-wrap.scrolled {
  box-shadow: 0 6px 24px -14px rgba(15, 46, 94, 0.35);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom-color: var(--line);
}
.nav { display: flex; align-items: center; gap: var(--s-3); height: 4.25rem; transition: height 300ms var(--ease); }
.nav-wrap.scrolled .nav { height: 3.75rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }

/* ---- Official FOIA Agent shield mark (assets/logo-mark.svg) ----
   The mark is a taller-than-wide navy shield (~0.73 aspect). We size by height
   so it sits cleanly beside the wordmark; a gentle lift/rotate plays on hover. */
.brand-mark { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-mark img {
  height: 32px; width: auto; display: block;
  transition: transform 500ms var(--ease-spring), filter 300ms var(--ease);
}
.brand:hover .brand-mark img { transform: rotate(-6deg) scale(1.06); }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink); }
.brand-dot { display: inline-block; width: 0.28em; }
.nav-links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav-links a {
  position: relative;
  color: var(--ink-soft); text-decoration: none; font-weight: 600; font-size: 0.9375rem;
  padding: 0.5rem 0; transition: color 180ms var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .nav-links a::after { transition: none; }
}
.nav-ctas { display: flex; gap: 0.5rem; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: none; color: var(--ink);
  padding: 0.6rem; cursor: pointer; border-radius: var(--radius-sm); min-width: 44px; min-height: 44px;
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(3rem, 6vw, 6rem) clamp(3.5rem, 5vw, 5.5rem); position: relative; overflow: clip; }
/* ruled-paper grain + navy corner glow */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(15, 46, 94, 0.02) 30px 31px);
}
/* drifting civic aurora — teal + action-blue washes behind the hero */
.hero-aurora {
  position: absolute; inset: -20% 0 auto; height: 130%; z-index: 0;
  pointer-events: none; filter: blur(8px); opacity: 0.9; will-change: transform;
  overflow: clip;
}
.hero-aurora span {
  position: absolute; border-radius: 50%;
  mix-blend-mode: multiply; will-change: transform;
}
.hero-aurora .ha-1 { width: 42rem; height: 30rem; right: -6%; top: -8%;
  background: radial-gradient(circle at 50% 50%, rgba(27, 83, 166, 0.16), transparent 62%);
  animation: auroraDrift 22s var(--ease) infinite alternate; }
.hero-aurora .ha-2 { width: 34rem; height: 26rem; right: 18%; top: 22%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 105, 110, 0.14), transparent 62%);
  animation: auroraDrift2 26s var(--ease) infinite alternate; }
.hero-aurora .ha-3 { width: 24rem; height: 22rem; left: -4%; bottom: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(176, 133, 68, 0.10), transparent 62%);
  animation: auroraDrift 30s var(--ease) infinite alternate; }
@keyframes auroraDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-3rem, 2rem, 0) scale(1.08); } }
@keyframes auroraDrift2 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(2.5rem, -1.5rem, 0) scale(1.1); } }

.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem); align-items: center;
}
/* grid/flex items default to min-width:auto, which lets long content push the
   track past the viewport on mobile — pin to 0 so copy wraps instead of overflowing */
.hero-copy, .hero-visual { min-width: 0; }
/* hero copy entrance — staggered rise */
.hero-copy > * { opacity: 0; transform: translateY(18px); animation: heroRise 700ms var(--ease) forwards; }
.hero-copy > .eyebrow { animation-delay: 60ms; }
.hero-copy > .hero-h1 { animation-delay: 160ms; }
.hero-copy > .hero-sub { animation-delay: 300ms; }
.hero-copy > .hero-ctas { animation-delay: 420ms; }
.hero-copy > .trust-bar { animation-delay: 540ms; }
@keyframes heroRise { to { opacity: 1; transform: none; } }
.hero-visual { animation: heroVisIn 900ms var(--ease) 260ms both; }
@keyframes heroVisIn { from { opacity: 0; transform: translateY(28px) scale(0.98); } to { opacity: 1; transform: none; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--s-3);
}
.eyebrow-stamp {
  border: 1.5px solid var(--teal); color: var(--teal); border-radius: 4px;
  padding: 0.2rem 0.5rem; font-weight: 600; transform: rotate(-2deg);
}
.hero-h1 { font-size: clamp(2.1rem, 1.5rem + 2.9vw, 3.5rem); font-weight: 600; }
.hero-h1:focus { outline: none; }
.hero-sub { font-size: 1.2rem; color: var(--ink-soft); max-width: 34rem; margin-bottom: var(--s-4); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: var(--s-4); }

/* the "months → days" redaction flip
   The flip reserves only the width of the FINAL word ("days"), so the
   headline wraps identically before, during, and after the animation —
   "answered in days" always stays together on the same line. The longer
   word "months" is an absolute overlay that doesn't affect line breaks. */
/* Flip reserves only the width of the FINAL word ("days") in normal flow,
   so the headline wraps the same way throughout — "answered in days" always
   stays on one line. "months" is an absolute overlay that only exists during
   the animation and never affects line breaks. The period starts hugging
   "months" (shifted right), then slides in to hug "days". */
.redact-flip { position: relative; display: inline-block; vertical-align: baseline; white-space: nowrap; }
.rf-new { color: var(--teal); }
.rf-old {
  position: absolute; left: 0; top: 0; color: var(--ink-faint);
  animation: oldOut 1ms linear 1500ms forwards;
}
/* The bar lives inside .rf-old, so it spans exactly the width of "months". */
.rf-bar {
  position: absolute; left: 0; right: 0; top: 8%; height: 84%;
  background: var(--redact); border-radius: 4px;
  transform: scaleX(0); transform-origin: left;
  animation: barIn 900ms var(--ease) 700ms forwards, barOut 1ms linear 1500ms forwards;
}
/* "days" hidden under "months" until the bar burns in, then revealed. */
.rf-new { opacity: 0; animation: newIn 700ms var(--ease) 1500ms forwards; }
/* Period starts after "months" (--dot-shift right), slides back to "days". */
.rf-dot { color: var(--ink); transform: translateX(var(--dot-shift, 0)); animation: dotSlide 500ms var(--ease) 1600ms forwards; }
@keyframes barIn { to { transform: scaleX(1); } }
@keyframes barOut { to { opacity: 0; } }
@keyframes oldOut { to { opacity: 0; } }
@keyframes newIn { from { opacity: 0; transform: translateY(0.3em); } to { opacity: 1; transform: translateY(0); } }
@keyframes dotSlide { to { transform: translateX(0); } }
.rf-done .rf-old, .rf-done .rf-bar { display: none; }
.rf-done .rf-new { opacity: 1; }
.rf-done .rf-dot { transform: translateX(0); }

.trust-bar {
  list-style: none; margin: 0; padding: var(--s-2) 0 0; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.03em; color: var(--ink-faint);
}
.trust-bar li { display: flex; align-items: center; gap: 0.45rem; }
.trust-bar li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(0, 105, 110, 0.5); animation: trustPulse 2.6s ease-out infinite; }
.trust-bar li:nth-child(2)::before { animation-delay: 0.6s; }
.trust-bar li:nth-child(3)::before { animation-delay: 1.2s; }
.trust-bar li:nth-child(4)::before { animation-delay: 1.8s; }
@keyframes trustPulse { 0% { box-shadow: 0 0 0 0 rgba(0, 105, 110, 0.45); } 70%,100% { box-shadow: 0 0 0 6px rgba(0, 105, 110, 0); } }

/* ---------- Workbench mock (hero) ---------- */
.hero-visual { position: relative; }
.workbench {
  background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(15, 46, 94, 0.28), 0 4px 14px rgba(15, 46, 94, 0.07);
  overflow: hidden; font-size: 0.8rem;
  animation: wbFloat 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes wbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.wb-titlebar {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--line-soft); background: var(--paper);
}
.wb-dots { display: inline-flex; gap: 5px; }
.wb-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.wb-title { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-badge {
  margin-left: auto; flex-shrink: 0; background: var(--blue-tint); color: var(--blue-deep);
  font-weight: 600; font-size: 0.66rem; padding: 0.18rem 0.5rem; border-radius: 999px;
  position: relative;
}
.wb-badge::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue); margin-right: 0.35rem; vertical-align: middle;
  animation: aiBlink 1.4s ease-in-out infinite;
}
@keyframes aiBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.wb-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.wb-doc { min-width: 0; padding: 1.1rem 1.2rem; font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.9; color: var(--ink-2); border-right: 1px solid var(--line-soft); }
.wb-line { margin: 0; white-space: nowrap; overflow: hidden; }
.wb-faded { color: var(--ink-faint); }
.pii { position: relative; border-radius: 3px; padding: 0.05em 0.15em; transition: background 300ms, color 300ms, box-shadow 300ms; }
.pii.pii-flag { background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--gold); animation: piiFlagIn 360ms var(--ease-spring); }
@keyframes piiFlagIn { 0% { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 6px rgba(176,133,68,0.28); } 100% { box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 0 rgba(176,133,68,0); } }
.pii.pii-redacted { background: var(--redact); color: var(--redact); box-shadow: none; transition: background 260ms var(--ease), color 260ms var(--ease); }
.wb-side { min-width: 0; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; background: #FCFBF8; }
.wb-side-head { display: flex; justify-content: space-between; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.wb-count { background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0 0.45rem; font-family: var(--font-mono); }
.wb-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.wb-findings li {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem;
  background: var(--white); border: 1px solid var(--line-soft); border-radius: 6px;
  font-size: 0.68rem; opacity: 0.45; transition: opacity 300ms, border-color 300ms;
}
.wb-findings li { transform: translateX(4px); }
.wb-findings li.f-active { opacity: 1; border-color: var(--teal); transform: translateX(0);
  box-shadow: 0 4px 12px -6px rgba(0, 105, 110, 0.4); }
.f-type { font-weight: 700; }
.f-ex { color: var(--gold-deep); font-family: var(--font-mono); }
.f-conf { margin-left: auto; color: var(--teal-deep); font-family: var(--font-mono); font-weight: 600; }
.wb-approve {
  margin-top: auto; display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.68rem; font-weight: 600; color: var(--green-deep);
  opacity: 0; transition: opacity 400ms;
}
.wb-approve.on { opacity: 1; }
.wb-approve-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: var(--white); flex-shrink: 0; }
.wb-statusbar {
  display: flex; justify-content: space-between; padding: 0.55rem 0.9rem;
  border-top: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-soft);
}
.wb-status-ok { color: var(--green-deep); font-weight: 600; }

.hero-stamp {
  position: absolute; right: -22px; bottom: -52px; width: 108px; height: 108px;
  color: var(--gold); opacity: 0; transform: rotate(-26deg) scale(1.4);
  filter: drop-shadow(0 4px 10px rgba(15, 46, 94, 0.18));
  animation: stampIn 620ms var(--ease-spring) 2100ms forwards;
}
@keyframes stampIn { to { opacity: 0.9; transform: rotate(-12deg) scale(1); } }
.hero-stamp text { font-family: var(--font-mono); font-weight: 600; }

/* ---------- Section scaffolding ---------- */
.section-head { max-width: 46rem; margin-bottom: var(--s-5); }
.kicker {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-deep);
  margin-bottom: 0.8rem;
}
.kicker-light { color: var(--teal-light); }
.section-lede { font-size: 1.15rem; color: var(--ink-soft); }
.sl-left { max-width: 30rem; }
.muted-strike { color: var(--ink-faint); }

/* reveal on scroll — fade + rise */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 650ms var(--ease), transform 650ms var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* section headings rise in as you reach them */
.section-head { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.section-head.in { opacity: 1; transform: none; }

/* staggered children within a revealed group */
[data-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
[data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > *:nth-child(1) { transition-delay: 40ms; }
[data-stagger].in > *:nth-child(2) { transition-delay: 120ms; }
[data-stagger].in > *:nth-child(3) { transition-delay: 200ms; }
[data-stagger].in > *:nth-child(4) { transition-delay: 280ms; }
[data-stagger].in > *:nth-child(5) { transition-delay: 360ms; }
[data-stagger].in > *:nth-child(6) { transition-delay: 440ms; }

/* ---------- Manifesto band ---------- */
.manifesto {
  background:
    radial-gradient(60rem 30rem at 80% -10%, rgba(0, 105, 110, 0.22), transparent 60%),
    radial-gradient(50rem 30rem at 10% 120%, rgba(27, 83, 166, 0.20), transparent 60%),
    linear-gradient(180deg, var(--ink), var(--ink-deep));
  color: var(--paper); padding-block: clamp(3rem, 5vw, 5rem); position: relative; overflow: hidden;
}
.manifesto-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.manifesto .fc-redact-deco { justify-content: center; }
.manifesto-text {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.45rem, 1rem + 2vw, 2.4rem); line-height: 1.35; margin: 0;
}
.manifesto-text span { display: block; }
.manifesto-text .reveal { transform: translateY(14px); }
.manifesto-text span:nth-child(2) { transition-delay: 160ms; }
.manifesto-text span:nth-child(3) { transition-delay: 320ms; }
.manifesto-text em { font-style: normal; color: var(--teal-light); position: relative; }
/* the emphasized word gets a brief navy redaction bar that lifts to reveal it */
.manifesto-text em::after {
  content: ""; position: absolute; inset: -0.05em -0.15em; border-radius: 4px;
  background: var(--ink-deep); transform-origin: right; transform: scaleX(1);
  transition: transform 520ms var(--ease);
}
.reveal.in .manifesto-text em::after,
.manifesto-text .reveal.in em::after { transform: scaleX(0); }

/* ---------- Principle line ---------- */
.principle-line {
  display: inline-block; font-family: var(--font-mono); font-size: 0.85rem;
  letter-spacing: 0.04em; color: var(--ink-2);
  border: 1.5px solid var(--green); border-radius: 6px; padding: 0.45rem 0.8rem;
  transform: rotate(-1deg); margin-bottom: var(--s-2);
}
.principle-line strong { color: var(--green-deep); }

/* ---------- Problem cards ---------- */
.problem { background: var(--paper-warm); border-block: 1px solid var(--line-soft); }
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.pain-card {
  background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4); transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.pain-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(15, 46, 94, 0.25); }
.pain-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--ink); color: var(--paper); margin-bottom: var(--s-2);
}
.pain-card p { color: var(--ink-soft); margin: 0; }

/* ---------- Lifecycle ---------- */
.lifecycle-track {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3);
  counter-reset: step;
}
.lc-step { position: relative; padding-top: var(--s-3); border-top: 3px solid var(--line); }
.lc-step::before {
  content: ""; position: absolute; top: -3px; left: 0; height: 3px; width: 0;
  background: var(--green); transition: width 900ms var(--ease) 150ms;
}
.lc-step.in::before { width: 100%; }
.lc-num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--green-deep); font-weight: 600; display: block; margin-bottom: 0.5rem; }
.lc-step p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* ---------- Feature sections ---------- */
.feature-alt { background: var(--paper-warm); border-block: 1px solid var(--line-soft); }
.feature-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.feature-copy p { color: var(--ink-soft); }
.feature-copy .btn { margin-top: var(--s-2); }
.check-list { list-style: none; margin: var(--s-3) 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.check-list li { position: relative; padding-left: 1.9rem; color: var(--ink-2); font-size: 0.98rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.18em; width: 1.15em; height: 1.15em;
  border-radius: 50%; background: var(--green-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23095446' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 60%; background-position: center; background-repeat: no-repeat;
}

/* generic mock frame */
.mock {
  background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-3);
  box-shadow: 0 24px 48px -22px rgba(15, 46, 94, 0.2);
}

/* mock: before/after redaction */
.mock-head { display: flex; justify-content: space-between; margin-bottom: var(--s-2); }
.mock-chip { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; }
.mock-chip-ink { background: var(--paper-warm); color: var(--ink-soft); }
.mock-chip-green { background: var(--green-tint); color: var(--green-deep); }
.mock-doc-pair { display: flex; align-items: center; gap: var(--s-2); }
.mock-doc {
  flex: 1; display: flex; flex-direction: column; gap: 0.55rem;
  background: #FCFBF8; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 1rem;
}
.md-line { height: 8px; border-radius: 4px; background: var(--line); }
.md-flag { background: var(--amber-tint); box-shadow: inset 0 0 0 1px var(--amber); }
.md-bar { background: var(--redact); }
.w-50 { width: 50%; } .w-60 { width: 60%; } .w-70 { width: 70%; }
.w-75 { width: 75%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; }
.mock-arrow { color: var(--green); flex-shrink: 0; }
.mock-footer { margin-top: var(--s-2); }
.mock-log { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); }

/* mock: concierge chat */
.mock-chat { display: flex; flex-direction: column; gap: 0.9rem; }
.chat-bubble { max-width: 88%; padding: 0.85rem 1rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.5; }
.chat-user { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 4px; }
.chat-ai { align-self: flex-start; background: var(--paper-warm); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; }
.chat-ai-tag { display: block; font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--green-deep); font-weight: 600; margin-bottom: 0.3rem; }
.chat-file {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.55rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.4rem 0.7rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-2);
}
.chat-deflect {
  align-self: center; display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--green-deep); font-weight: 600; font-size: 0.82rem;
  border: 1.5px dashed var(--green); border-radius: 999px; padding: 0.4rem 0.9rem;
}

/* mock: compliance dashboard */
.mock-dash { display: flex; flex-direction: column; gap: var(--s-2); }
.dash-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.dash-stat { background: #FCFBF8; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ds-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 600; }
.ds-value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.ds-value small { font-size: 0.9rem; }
.ds-green { color: var(--green-deep); }
.ds-amber { color: var(--amber); }
.ds-bar { height: 5px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.ds-bar i { display: block; height: 100%; width: var(--w); background: var(--green); border-radius: 3px; }
.ds-bar-amber i { background: var(--amber); }
.dash-queue { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); overflow: hidden; }
.dq-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 0.8rem; font-size: 0.8rem; border-bottom: 1px solid var(--line-soft); background: var(--white); }
.dq-row:last-child { border-bottom: none; }
.dq-id { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); flex-shrink: 0; }
.dq-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dq-due { margin-left: auto; flex-shrink: 0; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-soft); }
.dq-warn { color: var(--red); font-weight: 600; }
.dq-ok { color: var(--green-deep); font-weight: 600; }
.dq-done { opacity: 0.65; }
.dash-audit { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); }

/* mock: workflow */
.mock-flow { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.flow-node {
  background: #FCFBF8; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 0.65rem 1rem; font-size: 0.82rem; font-weight: 600; text-align: center; line-height: 1.35;
}
.flow-node small { font-family: var(--font-mono); font-weight: 400; font-size: 0.66rem; color: var(--ink-faint); }
.fn-start { border-color: var(--ink); }
.fn-cjis { border-color: var(--amber); background: var(--amber-tint); }
.fn-end { border-color: var(--green); background: var(--green-tint); color: var(--green-deep); display: inline-flex; align-items: center; gap: 0.45rem; }
.flow-branch { display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center; position: relative; }
.flow-branch::before, .mock-flow > .fn-end::before { content: none; }

/* ---------- Roles ---------- */
.roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.role-card {
  background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4); position: relative; overflow: hidden;
  transition: transform 250ms var(--ease), box-shadow 250ms var(--ease);
}
.role-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform 350ms var(--ease);
}
.role-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(15, 46, 94, 0.25); }
.role-card:hover::before { transform: scaleX(1); }
.role-card h3 { font-size: 1.12rem; }
.role-card p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.role-card-cta { background: var(--ink); border-color: var(--ink); }
.role-card-cta h3 { color: var(--paper); }
.role-card-cta p { color: #B4C0D0; margin-bottom: var(--s-3); }
.role-card-cta::before { background: var(--green); transform: scaleX(1); }

/* ---------- Comparison (dark) ---------- */
.compare {
  background:
    radial-gradient(50rem 30rem at 90% 0%, rgba(0, 105, 110, 0.16), transparent 55%),
    linear-gradient(180deg, var(--ink-deep), var(--ink));
  color: var(--paper);
}
.section-head-dark h2 { color: var(--paper); }
.section-head-dark .section-lede { color: #AAB6C7; }
.compare-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line-navy); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.95rem; }
.compare-table th, .compare-table td { text-align: left; padding: 0.95rem 1.2rem; border-bottom: 1px solid var(--line-navy); vertical-align: top; }
.compare-table thead th { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #8C9BB2; font-weight: 600; background: var(--ink-2); }
.compare-table tbody th { font-weight: 700; color: var(--paper); white-space: nowrap; }
.compare-table tbody td { color: #8C9BB2; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.ct-us { color: var(--paper) !important; background: rgba(0, 105, 110, 0.18); font-weight: 600; }
thead .ct-us { color: var(--teal-light) !important; }

.targets { margin-top: var(--s-5); }
.targets-note {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.03em; color: #8C9BB2;
  border-left: 3px solid var(--green); padding-left: 0.8rem; margin-bottom: var(--s-3); max-width: 40rem;
}
.targets-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.target { display: flex; flex-direction: column; }
.t-num, .t-unit, .t-prefix { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--teal-light); display: inline; }
.t-num { display: inline; }
.target > .t-num, .target > .t-unit, .target > .t-prefix { display: inline; }
.target { display: block; }
.t-label { display: block; margin-top: 0.5rem; color: #AAB6C7; font-size: 0.9rem; max-width: 12rem; }

/* ---------- Security strip ---------- */
.security { background: var(--paper-warm); border-block: 1px solid var(--line-soft); }
.security-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.security-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.security-list li { display: flex; gap: 0.9rem; align-items: flex-start; }
.security-list svg { color: var(--green-deep); flex-shrink: 0; margin-top: 0.2rem; }
.security-list strong { display: block; font-size: 0.98rem; }
.security-list span { color: var(--ink-soft); font-size: 0.85rem; }

/* ---------- Accessibility deadline ---------- */
.a11y-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.a11y-note { color: var(--ink-2); font-weight: 600; max-width: 32rem; }
.a11y-dates { display: flex; flex-direction: column; gap: var(--s-2); }
.a11y-date {
  display: flex; flex-direction: column; gap: 0.25rem;
  background: var(--paper-card); border: 1px solid var(--line); border-left: 5px solid var(--amber);
  border-radius: var(--radius-sm); padding: 1.1rem 1.3rem;
}
.a11y-date:first-child { border-left-color: var(--green); }
.ad-when { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; }
.ad-who { color: var(--ink-soft); font-size: 0.92rem; }
.a11y-fine { font-size: 0.78rem; color: var(--ink-faint); margin: 0; }

/* ---------- FAQ ---------- */
.faq-container { max-width: 52rem; }
.faq-list { display: flex; flex-direction: column; gap: 0.7rem; }
.faq-item {
  background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; transition: border-color 200ms var(--ease);
}
.faq-item[open] { border-color: var(--green); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.2rem; font-weight: 600; cursor: pointer; list-style: none; min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chevron { flex-shrink: 0; width: 10px; height: 10px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); transition: transform 250ms var(--ease); }
.faq-item[open] .faq-chevron { transform: rotate(-135deg); }
.faq-item p { padding: 0 1.2rem 1.1rem; margin: 0; color: var(--ink-soft); }

/* ---------- Final CTA + demo form ---------- */
.final-cta { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.final-cta h2 { color: var(--paper); font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3rem); }
.final-cta .demo-copy p { color: #AAB6C7; font-size: 1.12rem; }
.demo-points { list-style: none; margin: var(--s-3) 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.demo-points li { position: relative; padding-left: 1.7rem; color: #C2CDDC; font-size: 0.98rem; }
.demo-points li::before {
  content: ""; position: absolute; left: 0; top: 0.4em; width: 0.95em; height: 0.35em;
  border-radius: 3px; background: var(--green);
}
.fc-fine { font-family: var(--font-mono); font-size: 0.74rem !important; color: #6C7A90 !important; margin-top: var(--s-3); }
.fc-redact-deco { display: flex; gap: 0.5rem; margin-bottom: var(--s-3); }
.fc-redact-deco span { height: 10px; border-radius: 5px; background: rgba(247, 244, 238, 0.16); }
.fc-redact-deco span:nth-child(1) { width: 70px; }
.fc-redact-deco span:nth-child(2) { width: 34px; background: var(--green); }
.fc-redact-deco span:nth-child(3) { width: 52px; }
.fc-redact-deco span { height: 10px; border-radius: 5px; background: rgba(247, 244, 238, 0.16); }

.demo-form {
  background: var(--paper-card); color: var(--ink);
  border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; gap: 1rem;
}
.df-title { font-size: 1.4rem; margin: 0; }
.df-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.df-field { display: flex; flex-direction: column; gap: 0.35rem; }
.df-field label { font-weight: 600; font-size: 0.85rem; }
.df-field label span { color: var(--green-deep); }
.df-field input, .df-field select, .df-field textarea {
  font: inherit; font-size: 0.95rem; color: var(--ink);
  background: #FCFBF8; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem; min-height: 44px; width: 100%;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.df-field textarea { min-height: auto; resize: vertical; }
.df-field input:hover, .df-field select:hover, .df-field textarea:hover { border-color: var(--ink-faint); }
.df-field input:focus-visible, .df-field select:focus-visible, .df-field textarea:focus-visible {
  outline: none; border-color: var(--green); background: var(--white);
  box-shadow: 0 0 0 3px rgba(27, 83, 166, 0.2);
}
.df-field input::placeholder, .df-field textarea::placeholder { color: var(--ink-faint); }
.df-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.df-submit { justify-content: center; }
.df-submit[disabled] { opacity: 0.6; cursor: wait; }
.df-status { margin: 0; font-size: 0.9rem; font-weight: 600; min-height: 1.3em; }
.df-status.ok { color: var(--green-deep); }
.df-status.err { color: #B3261E; }
.df-note { margin: 0; font-size: 0.82rem; color: var(--ink-faint); }
.df-note a { color: var(--green-deep); }

/* ---------- Footer ---------- */
.footer { background: var(--paper); border-top: 1px solid var(--line-soft); padding-block: var(--s-5) var(--s-3); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: var(--s-4); margin-bottom: var(--s-4); }
.footer-brand p { color: var(--ink-soft); font-size: 0.9rem; margin-top: var(--s-2); max-width: 20rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col h3 { font-family: var(--font-body); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.3rem; }
.footer-col a { color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; transition: color 180ms; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  padding-top: var(--s-3); border-top: 1px solid var(--line-soft);
  font-size: 0.82rem; color: var(--ink-faint);
}
.footer-badges { font-family: var(--font-mono); font-size: 0.72rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid, .feature-grid, .security-grid, .demo-grid, .a11y-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .feature-alt .feature-grid .feature-visual { order: 2; }
  .lifecycle-track { grid-template-columns: 1fr 1fr; }
  .roles-grid { grid-template-columns: 1fr 1fr; }
  .targets-grid { grid-template-columns: 1fr 1fr; row-gap: var(--s-4); }
  .hero-visual { max-width: 40rem; }
  .hero-stamp { right: 6px; }
}

@media (max-width: 720px) {
  .nav-links, .nav-ctas { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links.open {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 4.25rem; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 0.5rem 1.25rem 1rem;
  }
  .nav-links.open a { padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft); }
  .nav-links.open a:last-child { border-bottom: none; }
  .cards-3, .lifecycle-track, .roles-grid { grid-template-columns: 1fr; }
  .security-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .wb-body { grid-template-columns: 1fr; }
  .wb-doc { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .mock-doc-pair { flex-direction: column; }
  .mock-arrow { transform: rotate(90deg); }
  .hero-stamp { width: 84px; height: 84px; bottom: -18px; }
  .df-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .targets-grid, .footer-grid { grid-template-columns: 1fr; }
  .btn-lg { width: 100%; justify-content: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal, .section-head, [data-stagger], [data-stagger] > *,
  .hero-copy > *, .hero-visual { opacity: 1 !important; transform: none !important; }
  .hero-aurora { display: none; }
  .scroll-progress { display: none; }
  .hero-stamp { opacity: 0.9; transform: rotate(-12deg); }
  .redact-flip { display: inline; }
  .rf-old, .rf-bar { display: none; }
  .rf-new { opacity: 1; transform: none; }
  .rf-dot { transform: none; }
  .wb-findings li { opacity: 1; transform: none; }
  .wb-approve { opacity: 1; }
  .manifesto-text em::after { transform: scaleX(0); }
  .pii { background: var(--redact); color: var(--redact); }
}