/* ===== Audience pages (policymakers / partners / donors) + contact ===== */

/* --- Motion primitives --- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.barfill {
  width: 0 !important;
  transition: width 1.1s var(--ease);
}
.reveal.in .barfill,
.barfill.in {
  width: var(--w) !important;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .barfill { transition: none; }
}

/* --- Hero (image + branded scrim + slow ken-burns) --- */
.aud-hero {
  position: relative;
  overflow: hidden;
}
.aud-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg, rgba(9, 18, 20, 0.95) 0%, rgba(9, 18, 20, 0.74) 46%, rgba(9, 18, 20, 0.5) 100%),
    var(--aud-img) center / cover no-repeat;
  transform: scale(1.04);
  animation: audKen 22s ease-out both;
}
@keyframes audKen {
  from { transform: scale(1.12); }
  to { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .aud-hero-bg { animation: none; transform: none; }
}
.aud-hero .page-hero-inner { position: relative; z-index: 2; }
.aud-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.aud-hero .page-hero-lead { margin-bottom: 0; }
.aud-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: var(--space-xl) 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}
.aud-proof svg { width: 1rem; height: 1rem; color: var(--teal-bright); }
.aud-proof a { color: var(--teal-bright); font-weight: 600; }

/* --- Tension + signature (2-col) --- */
.aud-tension-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}
.aud-tension-grid .section-lead { margin-bottom: 0; }

.sig {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}
/* weeks bars */
.sig-bar-row { margin-bottom: var(--space-md); }
.sig-bar-lab { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.35rem; }
.sig-bar-track { height: 2.5rem; border-radius: var(--radius-sm); background: var(--color-bg-alt); overflow: hidden; }
.sig-bar {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: #fff;
  white-space: nowrap;
}
.sig-slow { background: linear-gradient(90deg, #6b747a, #9aa0a5); }
.sig-fast { background: linear-gradient(90deg, var(--color-primary), var(--teal-bright)); }
.sig-stat {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
}
.sig-stat strong { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; color: var(--color-primary-dark); }
.sig-stat span { font-size: 0.85rem; color: var(--color-text-muted); }

/* bring ↔ gain */
.sig-bringgain { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-md); align-items: center; }
.sig-col-h { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-sm); }
.sig-col-gain .sig-col-h { color: var(--color-accent-dark); }
.sig-bringgain ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.sig-bringgain li { font-size: 0.9rem; color: var(--color-text); line-height: 1.4; }
.sig-swap { font-size: 1.5rem; color: var(--color-primary-light); }

/* funding gap */
.sig-gap { background: linear-gradient(90deg, #a8402c, var(--color-accent)); }
.sig-fundgap .sig-bar { justify-content: flex-end; }
.sig-cap { margin: var(--space-md) 0 0; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5; }
.sig-cap strong { color: var(--color-text); }

/* --- The turn: dark "why" section --- */
.aud-why {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(64% 55% at 92% 0%, rgba(21, 128, 122, 0.3), transparent 55%),
    linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%);
  border-block: 1px solid rgba(255, 255, 255, 0.06);
}
.aud-why h2 { color: #fff; }
.aud-why .impact-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: var(--shadow-lg);
}
.aud-why .impact-card::before { background: linear-gradient(var(--teal-bright), var(--color-primary-light)); }
.aud-why .impact-card h3 { color: #fff; }
.aud-why .impact-card p { color: rgba(255, 255, 255, 0.68); }
.aud-why .impact-idx { color: var(--teal-bright); }

/* --- Proof band (inside dark CTA) --- */
.proofband {
  list-style: none;
  margin: 0 0 var(--space-2xl);
  padding: 0 0 var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.proofband strong { display: block; font-family: var(--font-display); font-size: 2rem; line-height: 1; color: #fff; }
.proofband span { display: block; margin-top: var(--space-xs); font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); }

/* --- What you get --- */
.aud-get { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-3xl); align-items: start; }
.aud-get-head h2 { margin-top: var(--space-xs); }
.aud-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.aud-list li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); align-items: start;
  padding: var(--space-md) 0; border-top: 1px solid var(--color-border);
  font-size: 1.0625rem; line-height: 1.5; color: var(--color-text);
}
.aud-list li:first-child { border-top: none; }
.aud-list svg { width: 1.4rem; height: 1.4rem; color: var(--color-primary); margin-top: 0.15rem; flex: 0 0 auto; }

@media (max-width: 860px) {
  .aud-tension-grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .aud-get { grid-template-columns: 1fr; gap: var(--space-lg); }
  .proofband { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}
@media (max-width: 560px) {
  .sig-bringgain { grid-template-columns: 1fr; }
  .sig-swap { transform: rotate(90deg); justify-self: center; }
}

/* ===== Distinct per-page structures ===== */
.aud-dark {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(64% 55% at 92% 0%, rgba(21, 128, 122, 0.3), transparent 55%),
    linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%);
  border-block: 1px solid rgba(255, 255, 255, 0.06);
}
/* `.section h2` in site.css has the same specificity as a bare `.aud-dark h2`,
   so the winner would depend on stylesheet order. Qualify with `.section` to
   win on specificity instead and keep these headings readable on dark. */
.section.aud-dark h2 { color: #fff; }
.section.aud-dark .section-lead { color: rgba(255, 255, 255, 0.85); }

/* Policymakers — why as rows */
.why-rows { list-style: none; margin: var(--space-xl) 0 0; padding: 0; }
.why-rows li {
  display: grid;
  grid-template-columns: 2.5rem 11rem 1fr;
  gap: var(--space-lg);
  align-items: baseline;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-border);
}
.why-rows li:first-child { border-top: none; }
.why-rows-n { font-family: var(--font-display); font-weight: 700; color: var(--color-primary); }
.why-rows strong { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; color: var(--color-text); }
.why-rows p { margin: 0; color: var(--color-text-muted); line-height: 1.6; }

/* Partners — standards strip + engage steps */
.std-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-top: var(--space-2xl); }
.std-chip {
  display: flex; align-items: center; gap: 0.6rem;
  padding: var(--space-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-md);
  color: #fff; font-size: 0.9rem; font-weight: 600; line-height: 1.3;
}
.std-chip svg { width: 1.4rem; height: 1.4rem; color: var(--teal-bright); flex: 0 0 auto; }
.engage { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-2xl); }
.engage-step {
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.engage-n {
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full);
  background: var(--teal-50); border: 1px solid var(--teal-100);
  color: var(--color-primary); font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
}
.engage-step strong { display: block; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 600; margin: var(--space-md) 0 0.3rem; color: var(--color-text); }
.engage-step p { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.55; }

/* Donors — de-risked ladder + big metrics */
.aud-ladder-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start; }
.aud-ladder-head h2 { margin-top: var(--space-xs); }
.ladder { list-style: none; margin: var(--space-sm) 0 0; padding: 0; }
.ladder-step {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-lg);
  padding-bottom: var(--space-xl); padding-left: 0.2rem;
}
.ladder-step:not(:last-child)::before {
  content: ''; position: absolute; left: 1.1rem; top: 2.4rem; bottom: 0; width: 2px;
  background: rgba(255, 255, 255, 0.14);
}
.ladder-n {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center; z-index: 1;
  background: rgba(95, 212, 206, 0.14); border: 1px solid rgba(95, 212, 206, 0.3);
  color: var(--teal-bright); font-family: var(--font-display); font-weight: 700;
}
.ladder-step strong { display: block; font-family: var(--font-display); color: #fff; font-size: 1.0625rem; }
.ladder-step p { margin: 0.25rem 0 0; color: rgba(255, 255, 255, 0.68); font-size: 0.92rem; line-height: 1.55; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-top: var(--space-2xl); }
.metric strong { display: block; font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--color-primary-dark); }
.metric span { display: block; margin-top: var(--space-sm); color: var(--color-text-muted); font-size: 0.95rem; max-width: 14rem; }

@media (max-width: 860px) {
  .std-strip { grid-template-columns: 1fr 1fr; }
  .engage { grid-template-columns: 1fr; }
  .aud-ladder-wrap { grid-template-columns: 1fr; gap: var(--space-xl); }
  .metrics { grid-template-columns: 1fr; gap: var(--space-lg); }
  .why-rows li { grid-template-columns: 1fr; gap: 0.3rem; }
}
/* Design-system documentation page (route: /design) */
.ds-page {
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
}

.ds-header {
  background:
    radial-gradient(90% 140% at 90% 0%, rgba(21, 128, 122, 0.24), transparent 55%),
    linear-gradient(150deg, var(--ink-800), var(--ink-900));
  color: #fff;
  padding: var(--space-2xl) var(--space-xl) 0;
}
.ds-header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xl);
}
.ds-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin: 0 0 var(--space-sm);
}
.ds-h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.02em;
}
.ds-lead {
  max-width: 44rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  margin: 0 0 var(--space-xl);
}
.ds-back {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.9rem;
}
.ds-nav {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ds-nav a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.ds-nav a:hover { color: var(--teal-bright); }

.ds-main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
}
.ds-section {
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--color-border);
}
.ds-h2 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-lg);
}
.ds-h3 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-xl) 0 var(--space-md);
}

.ds-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-lg);
}
.ds-swatch { display: flex; flex-direction: column; gap: 4px; }
.ds-chip {
  height: 4.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.ds-chip-dark { border-color: rgba(255, 255, 255, 0.15); }
.ds-swatch code { font-size: 0.78rem; color: var(--color-text); }
.ds-hex { font-size: 0.72rem; color: var(--color-text-muted); font-family: var(--mono, ui-monospace, monospace); }

.ds-type-row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--space-lg);
  align-items: baseline;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border);
}
.ds-type-meta { font-size: 0.75rem; color: var(--color-text-muted); font-weight: 600; }
.ds-type-sample { margin: 0; }

.ds-scale-row { display: flex; align-items: center; gap: var(--space-lg); padding: 6px 0; }
.ds-scale-row code { width: 8rem; font-size: 0.78rem; }
.ds-bar { height: 1.1rem; border-radius: 3px; display: block; }

.ds-radius-box { height: 4.5rem; background: var(--color-primary); border: 1px solid var(--color-border); }
.ds-shadow-box { height: 4.5rem; background: var(--color-surface); border-radius: var(--radius-md); }

.ds-row-dark {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--ink-800), var(--ink-900));
  margin-bottom: var(--space-md);
}

@media (max-width: 768px) {
  .ds-header, .ds-main { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .ds-header-inner { flex-direction: column; }
  .ds-type-row { grid-template-columns: 1fr; gap: 4px; }
}
/* Legal pages (privacy / terms / disclaimer) */
.legal-prose {
  max-width: 46rem;
}
.legal-updated {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}
.legal-prose h2 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: var(--space-2xl) 0 var(--space-sm);
}
.legal-prose p,
.legal-prose li {
  color: var(--color-text-muted);
  line-height: 1.7;
  font-size: 1rem;
}
.legal-prose p {
  margin: 0 0 var(--space-md);
}
.legal-prose ul {
  margin: 0 0 var(--space-md);
  padding-left: 1.25rem;
}
.legal-prose li {
  margin-bottom: var(--space-sm);
}
.legal-prose strong {
  color: var(--color-text);
}
.legal-prose a {
  color: var(--color-primary);
  font-weight: 500;
}
.legal-back {
  margin-top: var(--space-2xl) !important;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
/* EECA Health Sovereignty Hub — ODS-inspired design with distinct color palette */

:root {
  /* ── Brand: deep jewel teal (institutional, trustworthy) — v2 ── */
  --color-primary: #0c5b57;
  --color-primary-dark: #08403c;
  --color-primary-light: #178f88;
  --teal-bright: #5fd4ce; /* on-dark accent (eyebrows, marks) */

  --teal-50: #eef6f5;
  --teal-100: #d7ebe9;
  --teal-200: #b0dbd6;
  --teal-600: #128079;
  --teal-800: #0a3d3a;
  --teal-950: #062523;

  /* ── Brand: logo navy (replaces coral; used for CTAs + the 3rd component color) ── */
  --color-navy: #023a6d;
  --color-navy-light: #145a94;
  --color-navy-dark: #011f3d;
  --color-navy-abyss: #010f1e;
  --color-accent: var(--color-navy);
  --color-accent-light: var(--color-navy-light);
  --color-accent-dark: var(--color-navy-dark);
  --amber-50: #fbeeea;
  --amber-100: #f2d3c9;

  /* ── Neutral slate scale (cool, professional) ── */
  --neutral-25: #fafbfb;
  --neutral-50: #f5f6f7;
  --neutral-100: #eceef0;
  --neutral-200: #e0e3e6;
  --neutral-300: #cbd0d4;
  --neutral-400: #9aa0a5;
  --neutral-500: #6b747a;
  --neutral-600: #4d565c;
  --neutral-700: #384046;
  --neutral-800: #262c31;
  --neutral-900: #171c20;

  /* ── Ink (deep neutral surfaces — heroes, footer, CTA) ── */
  --ink-900: #14191c;
  --ink-800: #1d2429;
  --ink-700: #29323a;

  /* ── Semantic neutrals (v2 — a touch warmer so white isn't clinical) ── */
  --color-bg: #fafbf9;
  --color-bg-alt: #f0f3f1;
  --color-surface: #ffffff;
  --color-text: #1a2124;
  --color-text-muted: #566169;
  --color-border: #e3e7e6;
  --color-border-strong: #ccd4d2;

  /* ── Typography (v3 — Space Grotesk display + Inter text, all-sans) ── */
  --font-serif: 'Space Grotesk', 'Inter', system-ui, sans-serif; /* display (legacy var name) */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  /* ── Radii ── */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* ── Elevation — soft, ink-tinted, layered ── */
  --shadow-xs: 0 1px 2px rgba(16, 41, 47, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 41, 47, 0.06), 0 1px 2px rgba(16, 41, 47, 0.04);
  --shadow-md: 0 6px 14px -6px rgba(16, 41, 47, 0.12), 0 2px 5px -2px rgba(16, 41, 47, 0.06);
  --shadow-lg: 0 18px 32px -12px rgba(16, 41, 47, 0.16), 0 6px 12px -6px rgba(16, 41, 47, 0.08);
  --shadow-xl: 0 32px 60px -16px rgba(10, 46, 44, 0.24);

  --ring: 0 0 0 3px rgba(14, 95, 92, 0.28);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 180ms var(--ease);

  /* ── Layout ── */
  --container-max: 72rem;
  --header-height: 4.25rem;
  --scroll-offset: calc(var(--header-height) + var(--space-md));
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

::selection {
  background: var(--color-primary);
  color: #fff;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

img {
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 1000;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-primary);
  color: white;
  border-radius: 4px;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: var(--space-md);
}

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-height);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-xl);
}
/* While the mobile menu is open, body scroll is locked via overflow:hidden,
   which breaks position:sticky's scroll-container math and lets the header
   scroll away with the (frozen) page underneath. Pin it with fixed instead. */
.header.nav-open {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
/* Frosted-glass background lives on a pseudo-element, not .header itself —
   backdrop-filter on .header would make it a containing block for its
   position:fixed descendants (the mobile nav), breaking their viewport-relative
   positioning once the page is scrolled. */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
}

.logo-mark {
  height: 1.75rem;
  width: auto;
  display: block;
}

.footer-logo .logo-mark {
  height: 1.625rem;
}

.logo-text {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.25;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: nowrap;
}

.nav ul {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.nav ul a {
  position: relative;
  padding-block: 0.35rem;
}
.nav ul a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav ul a:hover::after {
  transform: scaleX(1);
}
.nav a:hover {
  color: var(--color-primary);
}
.nav a.is-active {
  color: var(--color-primary);
  font-weight: 700;
}
.nav ul a.is-active::after {
  content: none;
}
.nav-drop-btn.is-active {
  color: var(--color-primary);
  font-weight: 700;
}

/* Participate dropdown */
.nav-has-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding-block: 0.35rem;
}
.nav-drop-btn svg { transition: transform var(--transition); }
.nav-has-drop:hover .nav-drop-btn,
.nav-has-drop:focus-within .nav-drop-btn { color: var(--color-primary); }
.nav-has-drop:hover .nav-drop-btn svg,
.nav-has-drop:focus-within .nav-drop-btn svg { transform: rotate(180deg); }
.nav-has-drop .nav-drop {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.55rem;
  min-width: 13.5rem;
  list-style: none;
  padding: 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 120;
}
.nav-has-drop:hover .nav-drop,
.nav-has-drop:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-drop li { border: none !important; }
.nav-drop a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-text);
}
.nav-drop a::after { display: none; }
.nav-drop a:hover { background: var(--teal-50); color: var(--color-primary); }

@media (max-width: 1024px) {
  /* Must match (or beat) .nav-has-drop .nav-drop's specificity (0,2,0) —
     a bare .nav-drop selector here loses to that closed-state rule
     regardless of media-query order, leaving the submenu invisible. */
  .nav-has-drop .nav-drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    margin: 0;
    padding: 0 0 0 var(--space-md);
  }
  .nav-drop-btn { pointer-events: none; width: 100%; padding: var(--space-md) 0; font-size: 1rem; }
  .nav-drop-btn svg { display: none; }
  .nav-drop a { padding: 0.35rem 0; font-size: 0.875rem; }
}

.nav-consultation-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem var(--space-lg);
  background: linear-gradient(180deg, var(--color-accent-dark), var(--color-navy-abyss));
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  flex-shrink: 0;
}

.nav-consultation-cta:hover {
  background: linear-gradient(180deg, var(--color-accent-light), var(--color-accent));
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.nav-consultation-cta[aria-current="page"] {
  box-shadow: inset 0 0 0 2px var(--color-primary-dark);
}

/* Bar CTA: always visible on phones; menu CTA: desktop nav drawer */
.nav-consultation-bar {
  display: none;
}

.nav-consultation-menu {
  display: inline-flex;
}

/* Language switcher */
.lang-switcher {
  display: flex;
  align-items: center;
  margin-left: 0;
  padding-left: var(--space-md);
  border-left: 1px solid var(--color-border);
  flex-shrink: 0;
}

.lang-btn {
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.lang-btn:hover {
  color: var(--color-primary);
  background: rgba(13, 92, 92, 0.06);
}

.lang-btn.is-active,
.lang-btn[aria-pressed="true"] {
  background: var(--color-primary);
  color: white;
}

.lang-btn.is-active:hover,
.lang-btn[aria-pressed="true"]:hover {
  background: var(--color-primary-dark);
  color: white;
}

/* Mobile menu toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle-bar {
  display: block;
  width: 1.25rem;
  height: 2px;
  margin: 0 auto;
  background: var(--color-text);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}

.header.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.header.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-backdrop {
  display: none;
}

/* Shared inner page hero (team, etc.) */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(110% 140% at 10% 0%, rgba(21, 128, 122, 0.24), transparent 58%),
    linear-gradient(150deg, var(--ink-800) 0%, var(--ink-900) 100%);
  color: white;
  padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 100% at 80% 0%, #000, transparent 70%);
}

.page-hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
}

.page-hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin: 0 0 var(--space-md);
}

.page-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  margin: 0 0 var(--space-md);
  line-height: 1.2;
  max-width: 40rem;
}

.page-hero-lead {
  font-size: 1.0625rem;
  line-height: 1.7;
  opacity: 0.9;
  max-width: 42rem;
  margin: 0;
}

/* Hero (ODS-style hero block) */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(21, 128, 122, 0.28), transparent 58%),
    radial-gradient(70% 120% at 100% 100%, rgba(21, 128, 122, 0.12), transparent 55%),
    linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 100%);
  color: #fff;
  padding: calc(var(--space-3xl) + 1.25rem) var(--space-xl);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(120% 120% at 50% 0%, #000, transparent 72%);
}

.hero-content {
  max-width: 52rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5.2vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-lg);
  line-height: 1.12;
  text-wrap: balance;
}

.hero-subtitle {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  margin: 0 0 var(--space-md);
  opacity: 0.96;
  font-weight: 500;
  line-height: 1.4;
}

.hero-tagline {
  font-size: 1.0625rem;
  margin: 0 auto var(--space-xl);
  opacity: 0.85;
  max-width: 38rem;
  line-height: 1.6;
}

/* ── Feature hero (full-bleed + floating stat card) ── */
.hero.hero-feature {
  padding: 0;
  min-height: min(90vh, 860px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-feature .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Photo base (falls back to ink gradient if the file is missing) */
  --hero-photo: url('/assets/images/hero.webp');
  background:
    var(--hero-photo, none) center / cover no-repeat,
    linear-gradient(150deg, var(--ink-800) 0%, var(--ink-900) 100%);
}

/* Branded scrim over the photo: dark for text legibility (left) + teal wash */
.hero-feature .hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(102deg, rgba(9, 18, 20, 0.95) 0%, rgba(9, 18, 20, 0.74) 42%, rgba(9, 18, 20, 0.42) 100%),
    radial-gradient(80% 110% at 90% 6%, rgba(21, 128, 122, 0.42), transparent 60%),
    linear-gradient(0deg, rgba(9, 18, 20, 0.55), transparent 55%);
}

.hero-feature .hero-inner {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: end;
}

.hero-feature .hero-content {
  text-align: left;
  max-width: none;
  margin: 0;
}

.hero-feature .hero-content,
.hero-statcard {
  min-width: 0;
}

.hero-feature h1,
.hero-lead,
.statcard-text {
  overflow-wrap: break-word;
}

.hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 0.6em;
  max-width: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin: 0 0 var(--space-lg);
}
.hero-eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 1.75rem;
  height: 2px;
  background: var(--teal-bright);
}
.hero-feature h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-lg);
  color: #fff;
  text-wrap: balance;
}
.hero-accent {
  color: var(--color-accent-light);
  font-style: normal;
}

.hero-lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 34rem;
  margin: 0 0 var(--space-xl);
}

.hero-feature .hero-buttons {
  justify-content: flex-start;
}

/* Floating glass stat card */
.hero-statcard {
  align-self: end;
  background: rgba(12, 22, 24, 0.5);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-xl);
}
.statcard-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin: 0 0 var(--space-sm);
}
.statcard-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 var(--space-lg);
}
.statcard-text a {
  color: var(--teal-bright);
  font-weight: 600;
  text-decoration-color: rgba(95, 212, 206, 0.45);
}
.statcard-text a:hover {
  text-decoration-color: var(--teal-bright);
}
.statgrid {
  list-style: none;
  margin: 0;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg) var(--space-md);
}
.statgrid li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.statgrid strong {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  line-height: 1;
  color: #fff;
}
.statgrid span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.3;
}

@media (max-width: 1024px) {
  .hero-feature .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: var(--space-2xl) var(--space-lg);
    align-items: start;
  }
  .hero.hero-feature {
    min-height: 0;
    align-items: stretch;
  }
  .hero-statcard {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(12, 22, 24, 0.62);
  }
}
@media (max-width: 480px) {
  .statgrid strong {
    font-size: 1.55rem;
  }
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
}

.btn-hero-secondary {
  color: white;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: white;
  color: white;
  transform: translateY(-2px);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.8rem var(--space-xl);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition),
    box-shadow var(--transition), border-color var(--transition);
  min-height: 2.9rem;
  box-sizing: border-box;
}

.btn-primary {
  background: linear-gradient(180deg, var(--color-accent-dark), var(--color-navy-abyss));
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--color-accent), var(--color-accent-dark));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: transparent;
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: white;
  transform: translateY(-2px);
}

/* Same "secondary" button family, translated for light/tinted section
   backgrounds — a ghost/outline button in brand teal instead of white,
   since white-on-white has no legibility here. Thin border by design. */
.btn-secondary-onLight {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary-light);
}
.btn-secondary-onLight::after {
  content: '→';
  transition: transform var(--transition);
}
.btn-secondary-onLight:hover {
  background: var(--teal-50);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.btn-secondary-onLight:hover::after {
  transform: translateX(2px);
}

/* Sections */
.section {
  padding: var(--space-3xl) var(--space-xl);
}

/* Soft tinted washes so frosted-glass cards read against them */
.section-alt {
  background:
    radial-gradient(80% 70% at 100% 0%, var(--teal-50) 0%, transparent 55%),
    linear-gradient(180deg, #eef4f2 0%, #f6faf8 100%);
  border-block: 1px solid var(--color-border);
}

/* ── Dark sections (Opportunity + Investment) ── */
#urgency,
#investment {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(64% 55% at 92% 0%, rgba(21, 128, 122, 0.3), transparent 55%),
    linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%);
  color: rgba(255, 255, 255, 0.8);
  border-block: 1px solid rgba(255, 255, 255, 0.06);
}
#urgency h2,
#investment h2 {
  color: #fff;
}
#urgency .section-lead,
#investment .section-lead {
  color: rgba(255, 255, 255, 0.72);
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-md);
}
.eyebrow-onDark {
  color: var(--teal-bright);
}

/* ── The Opportunity — editorial split: sticky intro + numbered list ── */
.opp-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-3xl);
  align-items: start;
}
.opp-aside {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
}
.opp-aside .section-lead {
  margin: var(--space-md) 0 var(--space-xl);
}
.opp-stat {
  border-left: 2px solid var(--teal-bright);
  padding-left: var(--space-lg);
}
.opp-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 3.25rem;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
}
.opp-stat span {
  display: block;
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.66);
  max-width: 22rem;
}
.opp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: opp;
}
.opp-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-xl) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.opp-item:first-child {
  padding-top: 0;
  border-top: none;
}
.opp-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  background: rgba(95, 212, 206, 0.12);
  border: 1px solid rgba(95, 212, 206, 0.3);
  color: var(--teal-bright);
}
.opp-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}
.opp-body h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0.2rem 0 0.35rem;
}
.opp-body p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}
.opp-idx {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.32);
}

/* ── The Investment — phased timeline with proportional budget bars ── */
.phase-track {
  margin-top: var(--space-2xl);
}
.phase-row {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-lg) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.phase-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: #fff;
}
.phase-meta span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}
.phase-viz {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.phase-bar-track {
  height: 2.75rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.phase-bar {
  height: 100%;
  min-width: 6rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--space-md);
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary-light) 70%, var(--teal-bright));
  box-shadow: 0 0 24px -6px rgba(95, 212, 206, 0.5);
}
.phase-amt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}
.phase-desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
}
.invest-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--teal-bright);
}
.invest-total span {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.invest-total strong {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: #fff;
  letter-spacing: -0.01em;
}

/* ── Urgency — header (on dark) ── */
.opp-header {
  max-width: 44rem;
  margin: 0 auto var(--space-2xl);
  text-align: center;
}
.opp .opp-header h2::after {
  content: none;
}
.opp-header .section-lead {
  margin: 0 auto;
}

/* ── Urgency — cost of inaction stat cards (on dark) ── */
.opp-inaction {
  margin-top: var(--space-2xl);
}
.opp-inaction-eyebrow {
  margin-bottom: var(--space-md);
}
.opp-inaction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.opp-inaction-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl);
  position: relative;
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}
.opp-inaction-card::before {
  content: '';
  position: absolute;
  left: var(--space-md);
  top: var(--space-lg);
  bottom: var(--space-lg);
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(var(--color-primary-light), var(--teal-bright));
}
.opp-inaction-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}
.opp-inaction-value {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-xs);
  line-height: 1.05;
}
.opp-inaction-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.45;
}
.opp-inaction-source {
  margin-top: var(--space-lg);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}
.opp-inaction-source a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 0.2em;
}
.opp-inaction-source a:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 1024px) {
  .opp-inaction-grid {
    grid-template-columns: 1fr;
  }
  .opp-inaction-value {
    font-size: 2rem;
  }
}

/* ── What Changes — impact outcomes (light) ── */
#impact {
  background:
    radial-gradient(70% 60% at 100% 0%, var(--teal-50), transparent 55%),
    linear-gradient(180deg, #f6faf8 0%, #fafbf9 100%);
}
.impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
.impact-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-xl) var(--space-xl) var(--space-2xl);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.impact-card::before {
  content: '';
  position: absolute;
  left: var(--space-lg);
  top: var(--space-xl);
  bottom: var(--space-xl);
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(var(--color-primary), var(--teal-bright));
}
.impact-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.impact-idx {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
}
.impact-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0.3rem 0 0.4rem;
}
.impact-card p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Who it's for — audience pathways */
.who-grid {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-border);
}
.who-card {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: gap var(--transition);
}
.who-card:hover {
  gap: calc(var(--space-md) + 0.3rem);
}
.who-card strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  flex-shrink: 0;
  min-width: 9rem;
}
.who-card > span:not(.who-arrow) {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  flex: 1;
}
.who-arrow {
  font-size: 0.9375rem !important;
  font-weight: 600;
  color: var(--color-primary) !important;
  flex-shrink: 0;
  transition: transform var(--transition), color var(--transition);
}
.who-card:hover .who-arrow {
  color: var(--color-primary-dark) !important;
  transform: translateX(2px);
}
@media (max-width: 640px) {
  .who-card { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .who-card strong { min-width: 0; }
  .who-arrow { display: none; }
}

/* The System — trust line */
.sol-trust {
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-primary-dark);
  margin: var(--space-2xl) 0 var(--space-xl);
  max-width: 36rem;
}

/* ── Signature piece: the Execution Loop (decision → delivered care) ── */
.loop {
  max-width: 64rem;
  margin: var(--space-2xl) auto 0;
}
.sol-engine-note {
  margin-top: var(--space-2xl);
}
.loop-flow {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
}
/* the connecting line, behind the markers */
.loop-flow::before {
  content: '';
  position: absolute;
  top: 1.75rem;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-primary-light), var(--teal-600), var(--color-primary-light));
  opacity: 0.45;
  z-index: 0;
}
.loop-node,
.loop-end {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 0;
  min-width: 0;
}
.loop-badge {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: radial-gradient(120% 120% at 30% 20%, var(--teal-100), var(--teal-50));
  border: 1px solid var(--teal-200);
  box-shadow: 0 0 0 6px var(--color-bg-alt);
}
.loop-badge svg { width: 1.55rem; height: 1.55rem; }
.loop-node strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  margin-top: var(--space-md);
}
.loop-role {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}
.loop-end .loop-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  margin-top: 1.25rem;
  background: var(--color-primary-dark);
  box-shadow: 0 0 0 6px var(--color-bg-alt);
}
.loop-end-out .loop-dot {
  background: var(--color-accent);
}
.loop-end-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  max-width: 6rem;
}
.loop-pulse {
  position: absolute;
  top: calc(1.75rem - 5px);
  left: 6%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 14px 2px var(--teal-bright);
  z-index: 2;
  animation: loopPulse 3.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes loopPulse {
  0% { left: 6%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 94%; opacity: 0; }
}
.loop-foundation {
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 200% at 0% 0%, rgba(21, 128, 122, 0.35), transparent 60%),
    var(--ink-900);
  text-align: center;
}
.loop-foundation span {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
}
.loop-caption {
  text-align: center;
  margin: var(--space-md) 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

@media (max-width: 720px) {
  .loop-flow {
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }
  .loop-flow::before {
    display: none;
  }
  .loop-pulse { display: none; }
  .loop-badge { box-shadow: 0 0 0 6px var(--color-surface); }
  .loop-end .loop-dot { margin-top: 0; box-shadow: 0 0 0 6px var(--color-surface); }
  .loop-end-label { margin-top: var(--space-xs); }
}

/* ── The Approach — phased path (on dark) ── */
.path {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.path-step {
  position: relative;
  padding-top: var(--space-lg);
  border-top: 2px solid rgba(255, 255, 255, 0.14);
}
.path-step::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 14px var(--teal-bright);
}
.path-num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--teal-bright);
}
.path-body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: #fff;
  margin: 0.35rem 0 0.15rem;
}
.path-when {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}
.path-body p {
  margin: 0.55rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}
.invest-note {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
}
.invest-note .link-arrow {
  color: var(--teal-bright);
  margin-top: 0;
}
.invest-note .link-arrow:hover {
  color: #86e1dc;
}

@media (max-width: 860px) {
  .impact-grid { grid-template-columns: 1fr; }
  .path { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .path { grid-template-columns: 1fr; }
}

/* ── What-is: editorial split + credibility strip ── */
.whatis-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-3xl);
  align-items: start;
}
.whatis-head h2 {
  margin-top: var(--space-xs);
}
.whatis-body p {
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0 0 var(--space-md);
}
.whatis-body p.whatis-urgent-lead {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
}
.credstrip {
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}
.credstrip-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.credstrip-label a {
  color: var(--color-primary);
  text-decoration-color: var(--teal-200);
}
.credstrip-label a:hover {
  text-decoration-color: var(--color-primary);
}
.country-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
.country-chips li {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-primary-dark);
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.8rem;
}

/* ── Governance org diagram ── */
.gov-chart {
  margin-top: var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gov-node {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.gov-node strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}
.gov-node span {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.gov-node-lead {
  max-width: 26rem;
  border-color: var(--color-primary);
  border-top: 3px solid var(--color-primary);
  background: linear-gradient(180deg, var(--teal-50), var(--color-surface));
}
.gov-stem {
  width: 2px;
  height: var(--space-2xl);
  background: linear-gradient(var(--color-primary), var(--color-border));
}
.gov-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  width: 100%;
  position: relative;
}
.gov-row::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-2xl) + 2px);
  /* Exact center of the outer columns in a 4-col grid: half a column's
     width, accounting for the 3 gaps between columns — not a flat 12.5%,
     which drifts off-center once `gap` eats into the row's width. */
  left: calc((100% - 3 * var(--space-lg)) / 8);
  right: calc((100% - 3 * var(--space-lg)) / 8);
  height: 2px;
  background: var(--color-border);
}
.gov-row .gov-node {
  position: relative;
}
.gov-row .gov-node::before {
  content: '';
  position: absolute;
  /* Spans the full gap between the horizontal bar and the node, so it
     actually touches the bar instead of stopping halfway. */
  top: calc(-1 * var(--space-2xl) + 2px);
  left: 50%;
  width: 2px;
  height: calc(var(--space-2xl) - 2px);
  background: var(--color-border);
}

@media (max-width: 860px) {
  .opp-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .opp-aside {
    position: static;
  }
  .phase-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .whatis-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .gov-row {
    grid-template-columns: 1fr 1fr;
    /* The per-node connector ticks don't make sense once the row wraps to
       two columns (which single line would a tick "belong" to?), so instead
       give the whole row one shared top border — the stem above still lands
       on it, so the hierarchy reads as "these four report to that one"
       rather than a line dangling with nothing to connect to. */
    padding-top: var(--space-lg);
    border-top: 2px solid var(--color-border);
  }
  .gov-row::before {
    display: none;
  }
  .gov-row .gov-node::before {
    display: none;
  }
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.section h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-md);
  line-height: 1.15;
  text-wrap: balance;
}

.section h2::after {
  content: '';
  display: block;
  width: 2.75rem;
  height: 3px;
  margin-top: var(--space-md);
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
}

.cta-section h2::after {
  background: rgba(255, 255, 255, 0.5);
}

section[id],
.page-hero,
.consult-hero,
#consultation-form,
#main-content {
  scroll-margin-top: var(--scroll-offset);
}

.section-lead {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: var(--space-lg) 0 var(--space-xl);
  max-width: 48rem;
}

.intro-block p {
  font-size: 1.0625rem;
  margin: 0 0 var(--space-md);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-lg);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition: gap var(--transition), color var(--transition);
}
.link-arrow::after {
  content: '→';
  transition: transform var(--transition);
}
.link-arrow:hover {
  color: var(--color-primary-dark);
  gap: 0.65em;
}
.link-arrow:hover::after {
  transform: translateX(2px);
}

/* Diagrams */
.diagram-block {
  margin: var(--space-2xl) 0;
}

.diagram-block figcaption {
  margin-top: var(--space-md);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* Crisis intersection diagram */
.crisis-intersection {
  position: relative;
  width: 100%;
  max-width: 28rem;
  height: 20rem;
  margin: 0 auto;
}

.crisis-intersection .diagram-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
  color: white;
  padding: var(--space-md) var(--space-lg);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  z-index: 2;
}

.crisis-intersection .diagram-node {
  position: absolute;
  width: 6rem;
  height: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 3px solid var(--color-accent);
  border-radius: 50%;
  font-weight: 700;
  color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.crisis-intersection .diagram-node small {
  font-size: 0.6rem;
  font-weight: 500;
  text-align: center;
  margin-top: 0.2rem;
  max-width: 5rem;
}

.crisis-intersection .node-1 { top: 0; left: 50%; transform: translateX(-50%); }
.crisis-intersection .node-2 { top: 50%; right: 0; transform: translateY(-50%); }
.crisis-intersection .node-3 { bottom: 0; left: 50%; transform: translateX(-50%); }
.crisis-intersection .node-4 { top: 50%; left: 0; transform: translateY(-50%); }

/* Hub architecture diagram */
.hub-architecture {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: center;
  align-items: center;
  padding: var(--space-2xl);
}

.hub-architecture .hub-core {
  flex: 1 1 100%;
  max-width: 20rem;
  margin: 0 auto;
  padding: var(--space-xl);
  background: var(--color-primary);
  color: white;
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.hub-architecture .hub-core strong {
  font-size: 1.25rem;
}

.hub-architecture .hub-core span {
  font-size: 0.875rem;
  opacity: 0.9;
}

.hub-architecture .pod {
  flex: 1 1 10rem;
  max-width: 12rem;
  padding: var(--space-lg);
  border-radius: 8px;
  text-align: center;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
}

.hub-architecture .pod strong {
  display: block;
  font-size: 1.5rem;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-sm);
}

.hub-architecture .pod span {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.hub-architecture .pod-a { border-color: var(--color-primary); }
.hub-architecture .pod-b { border-color: var(--color-primary-light); }
.hub-architecture .pod-c { border-color: var(--color-accent); }

/* Impact pathway diagram */
.impact-pathway {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--color-surface);
  border-radius: 12px;
  border: 2px dashed var(--color-border);
}

.pathway-step {
  flex: 1;
  min-width: 10rem;
  max-width: 14rem;
  padding: var(--space-lg);
  background: var(--color-bg-alt);
  border-radius: 8px;
  text-align: center;
  border-left: 4px solid var(--color-accent);
}

.pathway-step .step-num {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.pathway-step strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.pathway-step small {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

.pathway-arrow {
  font-size: 1.5rem;
  color: var(--color-accent);
  font-weight: 700;
}

@media (max-width: 600px) {
  .pathway-arrow { display: none; }
}

/* Crisis grid (ODS-style numbered cards) */
.crisis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

/* Unified card family — frosted glass over the tinted section washes */
.crisis-card,
.benefit-card,
.develop-card,
.roadmap-phase,
.investable-card,
.sol-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.46));
  backdrop-filter: blur(16px) saturate(135%);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.crisis-card:hover,
.benefit-card:hover,
.develop-card:hover,
.roadmap-phase:hover,
.investable-card:hover,
.sol-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-lg);
}

.crisis-card {
  padding: var(--space-xl);
}

/* Shared circular icon badge (crisis + benefit) — matches the Solution badge */
.card-badge {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-md);
  background: radial-gradient(120% 120% at 30% 20%, var(--teal-100), var(--teal-50));
  border: 1px solid var(--teal-200);
  color: var(--color-primary);
  box-shadow: var(--shadow-xs);
}
.card-badge svg {
  width: 1.6rem;
  height: 1.6rem;
}

/* Centered layout so crisis + benefit match the Solution cards */
.crisis-card,
.benefit-card {
  text-align: center;
}
.benefit-card p,
.crisis-card p {
  margin-left: auto;
  margin-right: auto;
}

/* Modern index chip (matches the icon language) */
.crisis-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius);
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.crisis-card h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
}

.crisis-card p {
  font-size: 0.9375rem;
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Components table */
.components-table {
  overflow-x: auto;
  margin-top: var(--space-xl);
}

.components-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.components-table th,
.components-table td {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.components-table th {
  background: var(--color-primary);
  color: white;
  font-weight: 600;
}

.components-table tbody tr:hover {
  background: rgba(13, 92, 92, 0.04);
}

/* Benefits grid (ODS-style "empresas têm papel") */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.benefit-card {
  padding: var(--space-2xl);
}

.benefit-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  border-radius: var(--radius);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

.benefit-card h3 {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
}

.benefit-tagline {
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0 0 var(--space-md);
}

.benefit-card p {
  font-size: 0.9375rem;
  margin: 0 0 var(--space-md);
  color: var(--color-text-muted);
}

.benefit-demo {
  margin-top: var(--space-md) !important;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem !important;
}

/* Governance */
.governance-content p {
  font-size: 1.0625rem;
  margin: 0 0 var(--space-md);
}

/* Production diagram assets */
.visual-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.visual-grid-two {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.visual-figure {
  margin: var(--space-2xl) 0 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.visual-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.visual-figure figcaption {
  margin-top: var(--space-md);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* CTA section */
.cta-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(90% 140% at 85% 0%, rgba(21, 128, 122, 0.26), transparent 58%),
    linear-gradient(150deg, var(--ink-800) 0%, var(--ink-900) 100%);
  color: white;
}

.cta-section h2 {
  color: white;
}

.cta-lead {
  font-size: 1.25rem;
  margin: 0 0 var(--space-md);
}

.cta-sub {
  margin: 0 0 var(--space-xl);
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.cta-buttons .btn-secondary {
  color: white;
  border-color: rgba(255,255,255,0.7);
}

/* Concept note modal */
.concept-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  border: none;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  background: rgba(0,0,0,0.5);
}

.concept-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.concept-modal::backdrop {
  background: rgba(0,0,0,0.5);
}

.modal-inner {
  background: var(--color-surface);
  max-width: 48rem;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.2);
  margin: var(--space-lg);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--color-primary-dark);
}

.modal-close {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: 4px;
}
.modal-close:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.modal-body {
  overflow-y: auto;
  padding: var(--space-xl);
}

.concept-note-content {
  font-size: 0.9375rem;
}

.concept-note-content h3 {
  font-size: 1.5rem;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-sm);
}

.concept-note-content .subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xl);
}

.concept-note-content h4 {
  font-size: 1rem;
  color: var(--color-primary);
  margin: var(--space-xl) 0 var(--space-md);
}

.concept-note-content p,
.concept-note-content li {
  margin: 0 0 var(--space-md);
}

.concept-note-content a {
  color: var(--color-primary);
  text-decoration-color: var(--teal-200);
}
.concept-note-content a:hover {
  text-decoration-color: var(--color-primary);
}

.concept-note-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
  font-size: 0.875rem;
}

.concept-note-content th,
.concept-note-content td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  text-align: left;
}

.concept-note-content th {
  background: var(--color-bg-alt);
  font-weight: 600;
}

.concept-note-content .table-scroll {
  overflow-x: auto;
  margin: var(--space-lg) 0;
  -webkit-overflow-scrolling: touch;
}

.concept-note-content .table-scroll table {
  min-width: 36rem;
}

/* Team page */
.team-page .section-lead {
  max-width: 58rem;
}

.team-list {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.team-profile {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-2xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.team-photo-wrap {
  margin: 0;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.team-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-xs);
  color: var(--color-text);
}

.team-content h2::after {
  display: none;
}

.team-profile {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.team-profile:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}

.team-title {
  display: inline-block;
  margin: 0 0 var(--space-md);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--teal-50);
  border: 1px solid var(--teal-100);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.8rem;
}

.team-content p {
  margin: 0 0 var(--space-sm);
}

.team-content p:last-child {
  margin-bottom: 0;
}

/* Footer */
.footer {
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(21, 128, 122, 0.18), transparent 55%),
    var(--ink-900);
  color: rgba(255, 255, 255, 0.66);
  padding: var(--space-3xl) var(--space-xl) var(--space-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  margin-bottom: var(--space-md);
}
.footer-logo strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.footer-brand p {
  margin: 0 0 var(--space-lg);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 26rem;
}

/* Footer nav columns */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.footer-col-h {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: var(--space-xs);
}
.footer-col a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--transition);
  width: fit-content;
}
.footer-col a:hover {
  color: var(--teal-bright);
}

.footer-partners {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}
.footer-partners-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-sm);
}
.partner-logo {
  display: block;
  padding: var(--space-sm) var(--space-md);
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
  width: fit-content;
}
.partner-logo:hover {
  transform: translateY(-2px);
}
.partner-logo img {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
}
/* Innerflect lockup: brand mark + wordmark, matched to the 40px partner system */
.partner-logo--lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.partner-logo--lockup img {
  height: 26px;
}
.partner-lockup-name {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink-900);
  line-height: 1;
}

/* Legal bar */
.footer-legal-bar {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.footer-disclaimer {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.45);
  max-width: 60rem;
}
.footer-rights {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ============================================
   Platform Preview Page
   ============================================ */

.platform-page .hero {
  padding: var(--space-2xl) var(--space-xl);
}

.platform-hero-content {
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: left;
}

.platform-hero-content h1 {
  margin-top: var(--space-md);
}

.platform-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.platform-highlights {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0;
}

.platform-highlights li {
  padding: var(--space-sm) 0;
  padding-left: 1.5em;
  position: relative;
}

.platform-highlights li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.platform-disclaimer {
  font-size: 0.9375rem;
  opacity: 0.95;
  max-width: 42rem;
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) var(--space-lg);
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
  border-left: 4px solid rgba(255,255,255,0.6);
}

.platform-preview-notice {
  margin: var(--space-lg) 0 var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.platform-preview-notice strong {
  color: var(--color-primary-dark);
}

.platform-hero-figure {
  margin: var(--space-2xl) 0 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.platform-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.platform-hero-figure figcaption {
  padding: var(--space-md);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.2);
}

/* Platform subnav */
.platform-subnav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 99;
  background: var(--color-surface);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.platform-subnav.is-visible {
  opacity: 1;
  visibility: visible;
}

.platform-subnav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

.platform-subnav a {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
}

.platform-subnav a:hover {
  color: var(--color-primary);
}

/* Scroll margin for subnav anchor targets */
.platform-page section[id] {
  scroll-margin-top: calc(var(--header-height) + 3.5rem);
}

/* Platform pillars diagram */
.platform-pillars-diagram {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--space-lg);
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--space-2xl);
}

.pillar-center {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 22rem;
  padding: var(--space-xl);
  background: var(--color-primary);
  color: white;
  border-radius: 12px;
  text-align: center;
}

.pillar-center strong {
  display: block;
  font-size: 1.125rem;
  margin-bottom: var(--space-xs);
}

.pillar-center span {
  font-size: 0.875rem;
  opacity: 0.9;
}

.pillar-box {
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: 8px;
  border: 2px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.pillar-box.pillar-1 { border-color: var(--color-primary); }
.pillar-box.pillar-2 { border-color: var(--color-primary-light); }
.pillar-box.pillar-3 { border-color: var(--color-accent); }

.pillar-box strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
}

.pillar-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.pillar-box li {
  padding: var(--space-xs) 0;
  padding-left: 1.25em;
  position: relative;
}

.pillar-box li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

.pillar-connector {
  display: none; /* Visual connectors optional for simpler layout */
}

/* Develop grid */
.develop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.develop-card {
  padding: var(--space-xl);
  background: var(--color-surface);
  border-radius: 12px;
  border-left: 4px solid var(--color-primary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.develop-card h3 {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-md);
}

.develop-card ul {
  margin: 0;
  padding: 0 0 0 1.25em;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.develop-card li {
  margin-bottom: var(--space-xs);
}

/* Preview blocks */
.preview-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  margin-top: var(--space-2xl);
}

.preview-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.preview-block-alt .preview-content {
  order: 1;
}

.preview-block-alt .preview-figure {
  order: 2;
}

.preview-figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.preview-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.preview-content h3 {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-md);
}

.preview-content p {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}

.preview-content ul {
  margin: 0;
  padding: 0 0 0 1.25em;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.preview-content li {
  margin-bottom: var(--space-xs);
}

/* Investment comparison */
.investment-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  margin: var(--space-2xl) 0;
}

.investment-panel {
  padding: var(--space-2xl);
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
}

.investment-mvp {
  border-color: var(--color-primary);
  border-left-width: 6px;
}

.investment-scale {
  border-color: var(--color-accent);
  border-left-width: 6px;
}

.investment-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.investment-panel h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-primary-dark);
  margin: 0;
}

.investment-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-alt);
  border-radius: 4px;
  color: var(--color-text-muted);
}

.investment-position {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
  font-weight: 500;
}

.investment-scope {
  margin: 0;
  padding: 0 0 0 1.25em;
  font-size: 0.9375rem;
}

.investment-scope li {
  margin-bottom: var(--space-xs);
}

/* Maturity ladder */
.maturity-ladder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--color-bg-alt);
  border-radius: 12px;
  margin-top: var(--space-2xl);
}

.maturity-step {
  flex: 1;
  min-width: 10rem;
  max-width: 14rem;
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: 8px;
  text-align: center;
  border-top: 4px solid var(--color-primary);
}

.maturity-step strong {
  display: block;
  font-size: 1rem;
  margin-bottom: var(--space-xs);
}

.maturity-step span {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.maturity-num {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.maturity-arrow {
  font-size: 1.25rem;
  color: var(--color-accent);
  font-weight: 700;
}

/* Architecture stack */
.architecture-stack {
  max-width: 40rem;
  margin: var(--space-2xl) auto 0;
}

.arch-layer {
  padding: var(--space-lg) var(--space-xl);
  border: 2px solid var(--color-border);
  border-bottom: none;
  background: var(--color-surface);
}

.arch-layer:first-child {
  border-radius: 12px 12px 0 0;
}

.arch-layer:last-child {
  border-bottom: 2px solid var(--color-border);
  border-radius: 0 0 12px 12px;
}

.arch-layer strong {
  display: block;
  font-size: 1rem;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-xs);
}

.arch-layer span {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.arch-layer-1 { border-color: var(--color-primary); }
.arch-layer-2 { border-color: var(--color-primary-light); }
.arch-layer-3 { border-color: var(--color-accent); }
.arch-layer-4 { border-color: var(--color-primary); }
.arch-layer-5 { border-color: var(--color-primary-light); }

/* Roadmap phases */
.roadmap-phases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.roadmap-phase {
  padding: var(--space-xl);
  background: var(--color-surface);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.roadmap-phase-num {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}

.roadmap-phase h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-md);
}

.roadmap-phase ul {
  margin: 0 0 var(--space-md);
  padding: 0 0 0 1.25em;
  font-size: 0.9375rem;
}

.roadmap-phase p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Investable cards */
.investable-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.investable-card {
  padding: var(--space-xl);
  background: var(--color-surface);
  border-radius: 12px;
  border-top: 4px solid var(--color-accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.investable-card strong {
  display: block;
  font-size: 1rem;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-md);
}

.investable-card p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

/* Platform page responsive */
@media (max-width: 992px) {
  .platform-pillars-diagram {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }

  .pillar-center {
    grid-column: 1;
  }

  .preview-block,
  .preview-block-alt {
    grid-template-columns: 1fr;
  }

  .preview-block-alt .preview-content,
  .preview-block-alt .preview-figure {
    order: unset;
  }

  .investment-comparison {
    grid-template-columns: 1fr;
  }

  .roadmap-phases {
    grid-template-columns: 1fr;
  }

  .investable-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .header {
    padding: var(--space-md) var(--space-lg);
    padding-left: max(var(--space-lg), env(safe-area-inset-left));
    padding-right: max(var(--space-lg), env(safe-area-inset-right));
  }

  .header-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .nav-toggle {
    display: flex;
  }

  .nav-consultation-bar {
    display: none;
  }

  .nav-consultation-menu {
    display: inline-flex;
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: 98;
    border: none;
    background: rgba(26, 44, 52, 0.35);
    cursor: pointer;
  }

  .nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 99;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    padding: var(--space-lg);
    padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
    background: var(--color-surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-top: 1px solid var(--color-border);
  }

  .header.nav-open .nav {
    display: flex;
  }

  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav ul li {
    border-bottom: 1px solid var(--color-border);
  }

  .nav ul a {
    display: block;
    padding: var(--space-md) 0;
    font-size: 1rem;
  }

  .nav-consultation-cta {
    width: 100%;
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
    min-height: 2.75rem;
    white-space: normal;
    text-align: center;
  }

  .lang-switcher {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    justify-content: center;
    width: 100%;
  }

  .lang-btn {
    flex: 1;
    min-height: 2.75rem;
  }

  .logo-text {
    font-size: 0.7rem;
    white-space: nowrap;
    line-height: 1.3;
  }

  .platform-subnav {
    display: none;
  }

  .page-hero {
    padding: var(--space-2xl) var(--space-lg);
    padding-left: max(var(--space-lg), env(safe-area-inset-left));
    padding-right: max(var(--space-lg), env(safe-area-inset-right));
  }

  .develop-grid {
    grid-template-columns: 1fr;
  }

  .maturity-ladder {
    flex-direction: column;
  }

  .maturity-arrow {
    transform: rotate(90deg);
  }

  .investable-cards {
    grid-template-columns: 1fr;
  }

  .platform-hero-content {
    text-align: left;
  }

  .hero {
    padding: var(--space-2xl) var(--space-lg);
    padding-left: max(var(--space-lg), env(safe-area-inset-left));
    padding-right: max(var(--space-lg), env(safe-area-inset-right));
  }

  .section {
    padding: var(--space-2xl) var(--space-lg);
    padding-left: max(var(--space-lg), env(safe-area-inset-left));
    padding-right: max(var(--space-lg), env(safe-area-inset-right));
  }


  .hub-architecture .pod {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .benefits-grid,
  .visual-grid-two {
    grid-template-columns: 1fr;
  }

  .visual-figure {
    padding: var(--space-sm);
  }

  .team-profile {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg);
  }

  .team-photo-wrap {
    max-width: 100%;
  }

  .crisis-intersection {
    max-width: 100%;
    height: 17rem;
  }

  .crisis-intersection .diagram-node {
    width: 5rem;
    height: 5rem;
    font-size: 0.875rem;
  }

  .crisis-intersection .diagram-node small {
    font-size: 0.55rem;
    max-width: 4.25rem;
  }

  .components-table {
    margin-left: calc(-1 * var(--space-lg));
    margin-right: calc(-1 * var(--space-lg));
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    -webkit-overflow-scrolling: touch;
  }

  .components-table table {
    font-size: 0.8125rem;
  }

  .components-table th,
  .components-table td {
    padding: var(--space-sm) var(--space-md);
  }

  .footer {
    padding: var(--space-2xl) var(--space-lg);
    padding-bottom: max(var(--space-2xl), env(safe-area-inset-bottom));
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
  }

  .footer-partners {
    align-items: flex-start;
    text-align: left;
    width: 100%;
  }

  .modal-inner {
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    height: 100dvh;
  }

  .concept-modal[open] {
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .hero-subtitle {
    font-size: 1.0625rem;
  }

  .hero-tagline {
    font-size: 0.9375rem;
  }

  .section-lead {
    font-size: 1rem;
  }
}

/* ── Solution section: Engine · Bridge · Shield (aligned to $1.2M proposal) ── */
.sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
.sol-card {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
}
/* Centered header block */
.sol-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.sol-badge {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  color: var(--color-primary);
  background: radial-gradient(120% 120% at 30% 20%, var(--teal-100), var(--teal-50));
  border: 1px solid var(--teal-200);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-xs);
}
.sol-badge svg {
  width: 1.6rem;
  height: 1.6rem;
}
.sol-role {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary);
}
.sol-card h3 {
  font-family: var(--font-display);
  margin: 0.35em 0 0.15em;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.sol-fn {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  max-width: 22rem;
}
.sol-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text);
}
.sol-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0.55em 0;
}
.sol-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--teal-200);
  border: 1px solid var(--color-primary-light);
}
.sol-list li strong {
  color: var(--color-text);
}
.sol-foot {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
}
.sol-foundation {
  margin-top: var(--space-lg);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(23, 130, 126, 0.4), transparent 60%),
    var(--teal-950);
  color: #eaf4f4;
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  flex-wrap: wrap;
}
.sol-found-ico { font-size: 1.75rem; }
.sol-found-t { font-weight: 700; color: #fff; font-size: 1.0625rem; margin-bottom: 2px; }
.sol-found-s { font-size: 0.9rem; color: #cfe3e3; max-width: 760px; }
.sol-standards { margin-top: var(--space-2xl); }
.sol-std-eyebrow {
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}
.sol-std-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.sol-std {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.sol-std strong { display: block; color: var(--color-primary-dark); font-size: 0.95rem; margin-bottom: 0.2em; }
.sol-std span { font-size: 0.84rem; color: var(--color-text-muted); }
.sol-callout {
  margin-top: var(--space-2xl);
  background: var(--amber-50);
  border: 1px solid var(--amber-100);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-xl);
}
.sol-callout strong { color: var(--color-accent-dark); }
.sol-callout p { margin: 0.4em 0 0; color: #5f4a1f; font-size: 0.95rem; }

/* ── Solution page — product showcase (browser-framed app screenshots) ── */
.browser-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.6rem 0.85rem;
  background: var(--neutral-50);
  border-bottom: 1px solid var(--color-border);
}
.browser-dots {
  display: inline-flex;
  gap: 6px;
  flex: none;
}
.browser-dots i {
  width: 11px;
  height: 11px;
  border-radius: var(--radius-full);
  background: var(--neutral-300);
}
.browser-url {
  flex: 1;
  min-width: 0;
  margin-left: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.28rem 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-frame > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hero product shot under the page hero — pulled up to float over the hero's
   bottom edge, but not so far it crowds the lead text above it. */
.sol-shot {
  max-width: 62rem;
  margin: calc(-1 * var(--space-xl)) auto 0;
  position: relative;
  z-index: 2;
}
.sol-shot .browser-frame {
  box-shadow: var(--shadow-xl);
}
.sol-shot-cap {
  margin: var(--space-md) auto 0;
  max-width: 44rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Alternating image + text capability rows */
.sol-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  margin-top: var(--space-3xl);
}
.sol-show {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: var(--space-2xl);
  align-items: center;
}
.sol-show.is-alt .sol-show-media { order: 2; }
.sol-show.is-alt .sol-show-body { order: 1; }
.sol-show-media { margin: 0; }
.sol-show-cap {
  margin: var(--space-sm) 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.sol-show-body .sol-role { display: block; }
.sol-show-body h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0.25em 0 0.5em;
}
.sol-show-fn {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text);
  margin: 0 0 var(--space-md);
}
.sol-show-foot {
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Solution page — "In use" context photos */
.sol-inuse {
  margin-top: var(--space-2xl);
}
.sol-inuse-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0.5rem 0 var(--space-xl);
  max-width: 32rem;
}
.sol-inuse-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}
.sol-inuse-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.sol-inuse-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.sol-inuse-media {
  position: relative;
}
.sol-inuse-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.ai-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem 0.4rem 0.55rem;
  border-radius: 999px;
  background: rgba(10, 26, 32, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  user-select: none;
}
.ai-badge svg {
  color: var(--teal-bright);
  flex-shrink: 0;
}
.sol-inuse-card figcaption {
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.sol-inuse-card figcaption strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.005em;
}
.sol-inuse-card figcaption span {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

@media (max-width: 820px) {
  .sol-grid { grid-template-columns: 1fr; }
  .sol-std-grid { grid-template-columns: repeat(2, 1fr); }
  .sol-shot {
    margin-top: var(--space-xl);
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    padding-left: max(var(--space-lg), env(safe-area-inset-left));
    padding-right: max(var(--space-lg), env(safe-area-inset-right));
  }
  .sol-show { grid-template-columns: 1fr; gap: var(--space-lg); }
  .sol-show.is-alt .sol-show-media,
  .sol-show.is-alt .sol-show-body { order: unset; }
  .sol-inuse-grid { grid-template-columns: 1fr; }
  .sol-inuse-title { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   W1 — For Funders / Concept Note / Governance-Financials
   ═══════════════════════════════════════════════════════════════ */

/* Funders hero */
.funders-hero-cta {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
  align-items: center;
}
.funders-hero-proof {
  margin-top: var(--space-lg);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  max-width: 40rem;
}

/* Impact-per-dollar cards */
.funders-impact-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0.5rem 0 var(--space-md);
  max-width: 34rem;
}
.funders-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.funders-impact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.funders-impact-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.funders-impact-value {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: var(--space-sm);
}
.funders-impact-desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Use-of-funds chart */
.funders-uof-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  max-width: 48rem;
  --uof-engine: 40%;
  --uof-bridge: 25%;
  --uof-shield: 20%;
  --uof-gov: 15%;
}
.funders-uof-row {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: var(--space-md);
  align-items: center;
}
.funders-uof-lab strong {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
}
.funders-uof-bar-wrap {
  position: relative;
  background: var(--teal-50);
  border-radius: var(--radius-sm);
  height: 2.25rem;
  overflow: hidden;
}
.funders-uof-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-navy), var(--color-primary));
}
.funders-uof-bar[data-key="bridge"] {
  background: linear-gradient(90deg, var(--color-primary-dark), var(--color-primary-light));
}
.funders-uof-bar[data-key="shield"] {
  background: linear-gradient(90deg, var(--color-primary), var(--teal-bright));
}
.funders-uof-bar[data-key="gov"] {
  background: linear-gradient(90deg, var(--color-navy-light), var(--color-primary-light));
}
.funders-uof-pct {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text);
}
.funders-uof-caveat {
  margin-top: var(--space-lg);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Advisory Council strip */
.council-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.council-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.council-card.is-invited {
  background: var(--teal-50);
  border-style: dashed;
}
.council-card img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.council-photo-zoom {
  display: flex;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.council-photo-zoom img {
  width: 6.2rem;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}
.council-monogram {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-navy));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}
.council-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.council-meta strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.council-meta span {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Concept Note page — inherits the standard dark .page-hero background */
.concept-note-print-mark {
  display: none;
}
.concept-note-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
  align-items: center;
}
.concept-note-container {
  max-width: 52rem;
}
.concept-note-content {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.65;
}
.concept-note-content h3,
.concept-note-content h4 {
  font-family: var(--font-display);
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-top: var(--space-2xl);
}
.concept-note-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
}
.concept-note-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.concept-note-content p {
  margin: var(--space-md) 0;
}
.concept-note-content .subtitle {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin-top: 0;
}
.concept-note-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
  font-size: 0.9rem;
}
.concept-note-content th,
.concept-note-content td {
  border: 1px solid var(--color-border);
  padding: 0.625rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.concept-note-content th {
  background: var(--teal-50);
  font-weight: 600;
  font-family: var(--font-sans);
}
.concept-note-content ul,
.concept-note-content ol {
  padding-left: 1.25rem;
  margin: var(--space-md) 0;
}
.concept-note-content li {
  margin: 0.35rem 0;
}
.concept-note-content .table-scroll {
  overflow-x: auto;
  margin: var(--space-lg) 0;
}
.concept-note-error {
  padding: var(--space-xl);
  background: var(--teal-50);
  border-radius: var(--radius-md);
  color: var(--color-text);
}

/* Governance-financials stub */
.gov-financials-body {
  max-width: 44rem;
}
.gov-fin-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-xs);
}
.gov-fin-card h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}
.gov-fin-card p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}

@media (max-width: 820px) {
  .funders-impact-grid { grid-template-columns: 1fr; }
  .funders-uof-row { grid-template-columns: 1fr; gap: var(--space-xs); }
  .council-strip { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   W2 — Home funder-impact block (above cost of inaction)
   ═══════════════════════════════════════════════════════════════ */
.funder-impact-home {
  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);
  border-bottom: 1px solid var(--color-border);
}
.home-funder-title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.05;
  margin: 0.5rem 0 var(--space-md);
  max-width: 34rem;
}
.home-funder-lead {
  max-width: 44rem;
  margin: 0 0 var(--space-2xl);
}
.home-council {
  margin-top: var(--space-2xl);
}
.home-council-eyebrow {
  margin-bottom: var(--space-md);
}
.working-pilot-proof-home {
  margin-top: var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: var(--teal-50);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 500;
}
.home-funder-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-xl);
}
@media (max-width: 820px) {
  .home-funder-title { font-size: 1.75rem; }
}

/* ═══════════════════════════════════════════════════════════════
   W3 — Trust strip (above footer, site-wide)
   ═══════════════════════════════════════════════════════════════ */
.trust-strip {
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) var(--space-xl);
}
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1;
}
.trust-chip-icon {
  display: inline-flex;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--color-primary);
  flex-shrink: 0;
}
.trust-chip-icon svg {
  width: 100%;
  height: 100%;
}
.trust-chip-label {
  letter-spacing: 0.01em;
}
@media (max-width: 820px) {
  .trust-strip {
    padding: var(--space-md) var(--space-lg);
    padding-left: max(var(--space-lg), env(safe-area-inset-left));
    padding-right: max(var(--space-lg), env(safe-area-inset-right));
  }
  .trust-strip-inner {
    justify-content: flex-start;
    gap: var(--space-sm) var(--space-md);
  }
  .trust-chip { font-size: 0.78rem; }
}

/* ═══════════════════════════════════════════════════════════════
   W4 — Tier grid + Funder-fit form
   ═══════════════════════════════════════════════════════════════ */
.tier-section {
  margin-top: var(--space-2xl);
}
.tier-head {
  max-width: 40rem;
  margin-bottom: var(--space-2xl);
}
.tier-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0.5rem 0 var(--space-md);
}
.tier-axis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.tier-axis-point {
  position: relative;
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-border-strong);
}
.tier-axis-point::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
}
.tier-axis-point span {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-primary-dark);
}
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
}
.tier-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.tier-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}
.tier-card-head {
  margin-bottom: var(--space-lg);
}
.tier-badge {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--teal-100);
  color: var(--color-primary-dark);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--space-md);
}
.tier-tagline {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}
.tier-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}
.tier-benefits li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-text);
}
.tier-benefits li svg {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

/* Funder-fit form */
/* Funders roadmap — delivery phase + the funding role it opens, one row each */
.roadmap {
  list-style: none;
  margin: var(--space-2xl) 0 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.roadmap-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(11rem, 15rem) 1fr;
  gap: var(--space-lg);
  align-items: start;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border);
}
.roadmap-num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  padding-top: 0.2rem;
}
.roadmap-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.roadmap-when {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.roadmap-head strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}
.roadmap-scope {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.roadmap-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}
.roadmap-body p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}
/* No border-top here — the last roadmap row already draws one. */
.roadmap-note {
  margin-top: var(--space-lg);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
@media (max-width: 760px) {
  .roadmap-row {
    grid-template-columns: 2rem 1fr;
    gap: var(--space-sm) var(--space-md);
  }
  .roadmap-body {
    grid-column: 2;
    margin-top: var(--space-sm);
  }
}

.funders-fit-hint {
  margin-top: var(--space-md);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
}
.funders-fit-hint .link-arrow {
  color: var(--teal-bright);
  font-weight: 700;
}
.funders-fit-hint .link-arrow:hover {
  color: #fff;
}
.ff-container {
  max-width: 44rem;
}
.ff-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.ff-field {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ff-label {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.95rem;
  padding: 0;
}
.ff-req {
  font-style: normal;
  color: var(--color-primary);
  font-weight: 700;
}
.ff-input,
.ff-textarea {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  width: 100%;
  box-sizing: border-box;
}
.ff-input:focus,
.ff-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(12, 91, 87, 0.15);
}
.ff-textarea {
  resize: vertical;
  min-height: 6rem;
}
.ff-radio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.ff-radio {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--color-surface);
  font-size: 0.92rem;
  transition: border-color var(--transition), background var(--transition);
}
.ff-radio:hover {
  border-color: var(--color-border-strong);
}
.ff-radio input[type="radio"] {
  margin-top: 0.15rem;
  accent-color: var(--color-primary);
}
.ff-radio:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--teal-50);
}
.ff-error {
  color: #b7292a;
  font-size: 0.9rem;
  margin: 0;
}
.ff-actions {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}
.ff-done {
  padding: var(--space-2xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-xs);
}
.ff-done h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin: 0 0 var(--space-md);
  color: var(--color-text);
}
.ff-done p {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .tier-grid { grid-template-columns: 1fr; }
  .tier-axis { display: none; }
  .ff-radio-grid { grid-template-columns: 1fr; }
  .tier-title { font-size: 1.6rem; }
}

/* ═══════════════════════════════════════════════════════════════
   W5 — Activity strip + AI-badge inside browser frames
   ═══════════════════════════════════════════════════════════════ */
.activity-section {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.activity-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0.5rem 0 var(--space-xl);
}
.activity-strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}
.activity-item {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}
.activity-date {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  letter-spacing: 0.02em;
}
.activity-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.activity-item-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.activity-item-desc {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.activity-link {
  color: var(--color-primary);
  font-size: 1.25rem;
  text-decoration: none;
  transition: transform var(--transition), color var(--transition);
  display: inline-flex;
  align-items: center;
  padding: 0.5rem;
}
.activity-link:hover {
  color: var(--color-primary-dark);
  transform: translateX(3px);
}

/* AI-badge overlay tuned for browser frames (already exists for photos) */
.browser-frame-media {
  position: relative;
}
.ai-badge.ai-badge-mockup {
  top: 46px;
  right: 12px;
  background: rgba(10, 26, 32, 0.6);
}
@media (max-width: 820px) {
  .activity-item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date link"
      "body body";
    gap: 0.35rem var(--space-md);
  }
  .activity-date { grid-area: date; }
  .activity-body { grid-area: body; }
  .activity-link { grid-area: link; padding: 0.25rem 0.5rem; }
  .activity-title { font-size: 1.4rem; }
  .ai-badge.ai-badge-mockup { top: 40px; right: 8px; }
}

/* ═══════════════════════════════════════════════════════════════
   W6 — Team LinkedIn + footer governance line
   ═══════════════════════════════════════════════════════════════ */
.team-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.team-heading h2 {
  margin: 0;
}
.team-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #0a66c2;
  background: rgba(10, 102, 194, 0.08);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.team-linkedin:hover {
  background: #0a66c2;
  color: #fff;
  transform: translateY(-1px);
}

.footer-governance {
  max-width: var(--container-max, 78rem);
  margin: 0 auto;
  padding: var(--space-sm) 0 var(--space-md);
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.footer-governance a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 0.18em;
  font-weight: 500;
}
.footer-governance a:hover {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.9);
}
.footer-governance-sep {
  opacity: 0.5;
}
@media (max-width: 820px) {
  .footer-governance {
    font-size: 0.75rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
  /* On its own line, the separator only pushes the link off the left edge */
  .footer-governance-sep { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   W7 — UseOfFundsChart (used on /for-funders + /concept-note)
   ═══════════════════════════════════════════════════════════════ */
.uof-chart {
  max-width: 48rem;
}
.uof-chart-head {
  margin-bottom: var(--space-xl);
}
.uof-chart-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin: 0.5rem 0 var(--space-md);
}
.uof-chart-lead {
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  max-width: 40rem;
}
.uof-chart-body {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  margin-top: var(--space-lg);
}
.uof-pie {
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}
.uof-pie path {
  transition: d 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.uof-pie-pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
}
.uof-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.uof-legend-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.uof-legend-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--radius-xs, 3px);
  flex-shrink: 0;
}
.uof-legend-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  flex: 1;
}
.uof-chart-caveat {
  margin-top: var(--space-lg);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-style: italic;
}
.uof-chart.is-compact .uof-chart-title { font-size: 1.5rem; }
.uof-chart.is-compact .uof-chart-lead { font-size: 0.92rem; }
.uof-chart.is-compact .uof-pie { width: 160px; height: 160px; }
@media (max-width: 820px) {
  .uof-chart-body { flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
  .uof-chart-title { font-size: 1.6rem; }
}

/* ── Print (also used by scripts/build-pdf.sh to export the concept-note.pdf) ── */
@media print {
  @page {
    margin: 1.75cm;
  }
  * {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  html,
  body {
    background: #fff;
  }
  .header,
  .skip-link,
  .footer,
  .trust-strip,
  .nav-backdrop,
  .concept-note-actions {
    display: none !important;
  }
  .concept-note-hero {
    background: none;
    color: var(--color-text);
    padding: 0 0 var(--space-xl);
    border-bottom: 2px solid var(--color-primary-dark);
    margin-bottom: var(--space-xl);
  }
  .concept-note-hero::after {
    display: none;
  }
  .concept-note-print-mark {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--space-lg);
  }
  .concept-note-print-mark img {
    width: 1.75rem;
    height: 1.75rem;
  }
  .concept-note-print-mark span {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--color-primary-dark);
  }
  .concept-note-hero .page-hero-eyebrow {
    color: var(--color-primary-dark);
  }
  .concept-note-hero h1,
  .concept-note-hero .page-hero-lead {
    color: var(--color-text);
  }
  .concept-note-body-section {
    padding-top: 0;
  }
  .concept-note-content .table-scroll {
    overflow: visible;
  }
  .concept-note-content .table-scroll table {
    min-width: 0;
  }
  .concept-note-content h3,
  .concept-note-content h4 {
    page-break-after: avoid;
    break-after: avoid;
  }
  .concept-note-content table,
  .concept-note-content tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
/* Consultation page — uses site.css design tokens for consistency */

/* ---- PAGE HERO (matches site .hero palette) ---- */
.consult-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 10% 0%, rgba(21, 128, 122, 0.26), transparent 58%),
    radial-gradient(70% 120% at 100% 100%, rgba(21, 128, 122, 0.12), transparent 55%),
    linear-gradient(160deg, var(--ink-800) 0%, var(--ink-900) 100%);
  padding: var(--space-3xl) var(--space-xl);
  color: white;
}

.consult-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(120% 120% at 20% 0%, #000, transparent 72%);
}

.consult-hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
}

.consult-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-bright);
  margin-bottom: var(--space-lg);
}

.consult-eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.75rem;
  height: 2px;
  background: var(--teal-bright);
}

.consult-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  color: white;
  line-height: 1.15;
  margin: 0 0 var(--space-lg);
  letter-spacing: -0.02em;
  max-width: 36rem;
}

.consult-hero h1 em {
  font-style: normal;
  color: var(--color-accent-light);
}

.consult-hero-sub {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.75;
  max-width: 40rem;
  margin: 0 0 var(--space-md);
}

.consult-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin: var(--space-xl) 0 var(--space-lg);
}

.consult-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  padding: 0.4rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.consult-cta-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.consult-hero .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.consult-hero .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.consult-privacy {
  padding: var(--space-md) var(--space-lg);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.12);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  max-width: 40rem;
}

.consult-privacy strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

/* ---- FORM SECTION ---- */
.form-wrap {
  background: var(--color-bg);
  padding: var(--space-3xl) var(--space-xl);
  min-height: 50vh;
  scroll-margin-top: var(--scroll-offset);
}

#consultation-thanks {
  scroll-margin-top: var(--scroll-offset);
}

.form-box {
  max-width: 46rem;
  margin: 0 auto;
}

/* PROGRESS */
.prog-wrap {
  margin-bottom: var(--space-xl);
}

.prog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.prog-label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.prog-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
}

.prog-track {
  height: 4px;
  background: var(--color-border);
  border-radius: 100px;
  overflow: hidden;
}

.prog-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 100px;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  width: 3%;
}

/* STEP CARD */
.step {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-2xl) var(--space-xl);
  display: none;
  animation: fadeUp 0.32s ease;
  font-family: var(--font-sans);
  box-shadow: var(--shadow-md);
}

.step.active {
  display: block;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.step-tag {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.step h2 {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
  line-height: 1.3;
}

.step-hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
  line-height: 1.6;
}

/* FIELD */
.c-field {
  margin-bottom: var(--space-lg);
}

.c-field:last-child {
  margin-bottom: 0;
}

.c-field-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  line-height: 1.4;
}

.c-field-label .req {
  color: #c0392b;
  margin-left: 2px;
}

.c-field-label .opt {
  color: var(--color-text-muted);
  font-weight: 400;
  font-size: 0.75rem;
  margin-left: var(--space-sm);
}

.c-field-sep {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-lg) 0;
}

.c-field-err {
  color: #c0392b;
  font-size: 0.75rem;
  margin-top: 0.35rem;
  display: none;
  font-family: var(--font-sans);
}

.c-field-err.show {
  display: block;
}

/* INPUTS */
.f-select,
.f-input,
.f-textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 2.75rem;
  box-sizing: border-box;
}

.f-select {
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%234a6472' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  appearance: none;
  cursor: pointer;
}

.f-select:focus,
.f-input:focus,
.f-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(12, 91, 87, 0.12);
}

.f-input::placeholder,
.f-textarea::placeholder {
  color: var(--color-text-muted);
}

.f-textarea {
  resize: vertical;
  min-height: 7rem;
  line-height: 1.65;
}

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* RADIO / CHECKBOX / SELECT CARDS */
.r-cards,
.u-cards,
.c-cards,
.s-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.r-card,
.u-card,
.c-card,
.s-card {
  display: flex;
  align-items: flex-start;
  gap: 0.8125rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  background: var(--color-surface);
  user-select: none;
  min-height: 2.75rem;
  -webkit-tap-highlight-color: transparent;
}

.r-card:hover,
.u-card:hover,
.c-card:hover,
.s-card:hover {
  border-color: var(--color-primary-light);
  background: var(--color-bg-alt);
}

.r-card.sel,
.u-card.sel,
.c-card.sel,
.s-card.sel {
  border-color: var(--color-primary);
  background: rgba(12, 91, 87, 0.06);
}

.r-card input,
.u-card input,
.c-card input,
.s-card input {
  accent-color: var(--color-primary);
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}

.r-card-body strong,
.u-text strong,
.rank-body strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 2px;
}

.r-card-body span,
.rank-body span,
.c-card-text,
.s-card-text,
.u-text {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.r-card-body span:empty {
  display: none;
}

.entry-cards .r-card {
  padding: 1.125rem 1.375rem;
}

.entry-cards .r-card strong {
  font-size: 1rem;
}

.entry-cards .r-card span {
  font-size: 0.875rem;
}

.u-card {
  align-items: center;
}

.u-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.u-dot.cr { background: #c0392b; }
.u-dot.hi { background: #d97706; }
.u-dot.mo { background: var(--color-accent); }
.u-dot.lo { background: var(--color-primary-light); }
.u-dot.un { background: var(--color-border); }

.max-note,
.rank-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  font-style: italic;
  font-family: var(--font-sans);
}

.rank-hint {
  text-align: center;
}

/* RANKING */
.rank-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.rank-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8125rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.22s;
  background: var(--color-surface);
  user-select: none;
  min-height: 2.75rem;
  -webkit-tap-highlight-color: transparent;
}

.rank-item:hover {
  border-color: var(--color-primary-light);
}

.rank-item[data-rank='1'] {
  border-color: var(--color-primary);
  background: rgba(12, 91, 87, 0.06);
}

.rank-item[data-rank='2'] {
  border-color: var(--color-primary-light);
  background: rgba(26, 122, 122, 0.08);
}

.rank-item[data-rank='3'] {
  border-color: var(--color-accent-dark);
  background: rgba(196, 146, 46, 0.08);
}

.rank-badge {
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  transition: all 0.22s;
  background: var(--color-surface);
}

.rank-item[data-rank='1'] .rank-badge {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.rank-item[data-rank='2'] .rank-badge {
  background: var(--color-primary-light);
  color: white;
  border-color: var(--color-primary-light);
}

.rank-item[data-rank='3'] .rank-badge {
  background: var(--color-accent);
  color: #1a1a1a;
  border-color: var(--color-accent);
}

.rank-body span:empty {
  display: none;
}

/* CONDITIONAL */
.cond-wrap {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-top: var(--space-md);
  display: none;
}

.cond-wrap.vis {
  display: block;
}

/* STEP NAV */
.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-lg);
  gap: var(--space-md);
}

.btn-back {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.18s;
  min-height: 2.75rem;
  box-sizing: border-box;
}

.btn-back:hover:not(:disabled) {
  border-color: var(--color-text-muted);
  color: var(--color-text);
}

.btn-back:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-next {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: 4px;
  background: var(--color-accent);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: all 0.18s;
  margin-left: auto;
  min-height: 2.75rem;
  box-sizing: border-box;
}

.btn-next:hover:not(:disabled) {
  background: var(--color-accent-light);
  color: #fff;
  transform: translateY(-1px);
}

.btn-next:active {
  transform: scale(0.98);
}

.btn-next:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  color: #fff;
}

/* THANK YOU */
.ty-wrap {
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  padding: var(--space-3xl) var(--space-xl);
  text-align: center;
  display: none;
  box-shadow: 0 1px 3px rgba(26, 44, 52, 0.06);
}

.ty-icon {
  width: 3.75rem;
  height: 3.75rem;
  background: rgba(12, 91, 87, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-lg);
  font-size: 1.5rem;
}

.ty-wrap h2 {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.ty-wrap > p {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 30rem;
  margin: 0 auto var(--space-xl);
}

.ty-box {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-lg) var(--space-xl);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  max-width: 28rem;
  margin: 0 auto;
  line-height: 1.65;
}

.ty-box strong {
  font-weight: 600;
  color: var(--color-text);
}

.ty-email {
  display: inline-block;
  margin-top: var(--space-sm);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.875rem;
}

.c-field input[type='file'] {
  width: 100%;
  max-width: 100%;
  font-size: 0.9375rem;
  padding: var(--space-sm) 0;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .consult-hero {
    padding: var(--space-2xl) var(--space-lg);
    padding-left: max(var(--space-lg), env(safe-area-inset-left));
    padding-right: max(var(--space-lg), env(safe-area-inset-right));
  }

  .consult-hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .consult-hero-sub {
    font-size: 1rem;
  }

  .consult-meta {
    gap: var(--space-sm);
  }

  .consult-pill {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
  }

  .form-wrap {
    padding: var(--space-2xl) var(--space-lg);
    padding-left: max(var(--space-lg), env(safe-area-inset-left));
    padding-right: max(var(--space-lg), env(safe-area-inset-right));
    padding-bottom: max(var(--space-2xl), env(safe-area-inset-bottom));
  }

  .step {
    padding: var(--space-xl) var(--space-md);
  }

  .step h2 {
    font-size: 1.2rem;
  }

  .input-row {
    grid-template-columns: 1fr;
  }

  .step-nav {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .btn-back,
  .btn-next {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .prog-top {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .ty-wrap {
    padding: var(--space-2xl) var(--space-lg);
  }

  .entry-cards .r-card {
    padding: 1rem;
  }
}

/* Persistent Concept Note access bar (every form step) — per Gaya's review */
.concept-access {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.concept-access-note {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.concept-note-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.concept-note-link:hover {
  opacity: 0.8;
}
.admin-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  font-family: var(--font-sans);
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.admin-header h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--color-primary-dark);
}

.admin-header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.admin-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.admin-tabs button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  background: white;
  border-radius: 6px;
  cursor: pointer;
}

.admin-tabs button.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.admin-filters input,
.admin-filters select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.875rem;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.admin-table th,
.admin-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.admin-table th {
  background: var(--color-bg-alt);
  font-weight: 600;
}

.admin-login-wrap {
  min-height: calc(100dvh - var(--header-height) - 12rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

.admin-login-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-login-card label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.admin-login-card input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.admin-login-card button {
  padding: 0.65rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
}

.admin-error,
.admin-alert {
  color: #b91c1c;
  font-size: 0.875rem;
  margin: 0;
}

.admin-loading {
  padding: 3rem;
  text-align: center;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.admin-stat-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}

.admin-stat-num {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.25rem 0 0;
  color: var(--color-primary);
}

.admin-analytics-section {
  margin-bottom: 2rem;
}

.admin-analytics-section h2 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

.admin-detail-meta {
  background: var(--color-bg-alt);
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

.admin-detail-section {
  margin-bottom: 2rem;
}

.admin-answer-block {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.admin-answer-block ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.admin-tier {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.admin-empty {
  padding: 2rem;
  text-align: center;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .admin-shell {
    padding: 1.25rem 1rem 3rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .admin-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .admin-header-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .admin-tabs {
    flex-wrap: wrap;
  }

  .admin-tabs button {
    flex: 1 1 auto;
    min-height: 2.75rem;
  }

  .admin-filters {
    flex-direction: column;
  }

  .admin-filters input,
  .admin-filters select {
    width: 100%;
    min-height: 2.75rem;
    font-size: 1rem;
    box-sizing: border-box;
  }

  .admin-table {
    font-size: 0.8125rem;
  }

  .admin-table th,
  .admin-table td {
    padding: 0.5rem;
    white-space: nowrap;
  }

  .admin-stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-login-card input {
    font-size: 1rem;
    min-height: 2.75rem;
  }

  .admin-login-card button {
    min-height: 2.75rem;
  }
}

@media (max-width: 480px) {
  .admin-stat-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   Hidden funder-outreach pages — 2026 design system
   Pages: /partners/foundations · /partners/tech · /partners/targets
   ============================================================ */
.pp{
  /* Aligned to the main design tokens (teal brand · coral action · ink · Space Grotesk/Inter) */
  --ink:var(--color-text); --soft:var(--color-text-muted); --line:var(--color-border);
  --bg:var(--color-bg); --white:var(--color-surface);
  --accent:var(--color-primary); --accent2:var(--teal-bright);
  --deep:var(--ink-900); --deep2:var(--ink-800); --tint:var(--teal-50);
  --serif:var(--font-display);
  --radius:var(--radius-lg); --shadow:var(--shadow-md);
  --maxw:var(--container-max);
  color:var(--ink); background:var(--bg);
  font-family:var(--font-sans);
  line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh;
}
/* page accents now inherit the unified palette (no per-page gold/teal split) */
.pp.found, .pp.tech{ --serif:var(--font-display); }
.pp *{box-sizing:border-box}
.pp-wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.pp a{color:var(--accent)}
.pp .eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;font-weight:700}
.pp h1,.pp h2,.pp h3,.pp h4{font-family:var(--font-display);letter-spacing:-.01em}

/* entrance motion */
@keyframes ppUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pp .rise{animation:ppUp .7s cubic-bezier(.2,.7,.2,1) both}
.pp .rise.d1{animation-delay:.08s}.pp .rise.d2{animation-delay:.16s}.pp .rise.d3{animation-delay:.24s}
@media(prefers-reduced-motion:reduce){.pp .rise{animation:none}}

/* ---------- HERO ---------- */
.pp-hero{position:relative;overflow:hidden;color:#eef6f6;
  background:radial-gradient(120% 140% at 85% -10%, color-mix(in srgb,var(--accent) 38%, transparent), transparent 60%),
             linear-gradient(155deg,var(--deep),var(--deep2));}
.pp-hero::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent)}
.pp-hero-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;
  padding:72px 0 80px}
.pp-hero .eyebrow{color:var(--accent2)}
.pp-hero h1{font-family:var(--serif);font-size:2.55rem;line-height:1.1;margin:.45em 0 .35em;
  font-weight:780;letter-spacing:-.01em;color:#fff}
.pp-lede{font-size:1.12rem;max-width:560px;color:#dfecec}
.pp-hero-cta{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.pp-trustline{margin-top:16px;font-size:.82rem;color:#bcd3d3;display:flex;align-items:center;gap:8px}
.pp-trustline svg{width:16px;height:16px;flex:0 0 auto;color:var(--accent2)}
.pp-btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;border-radius:11px;
  padding:13px 20px;transition:transform .15s ease,box-shadow .15s ease}
.pp-btn-primary{background:linear-gradient(180deg,var(--color-accent),var(--color-accent-dark));color:#fff;
  box-shadow:var(--shadow-sm)}
.pp.tech .pp-btn-primary{color:#fff}
.pp-btn-primary:hover{transform:translateY(-2px)}
.pp-btn-ghost{color:#eaf4f4;border:1px solid rgba(255,255,255,.28)}
.pp-btn-ghost:hover{background:rgba(255,255,255,.08)}
/* hero art */
.pp-art{position:relative;display:grid;place-items:center;min-height:260px}
.pp-art svg{width:100%;max-width:380px;height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}

/* ---------- STAT STRIP ---------- */
.pp-stats{background:var(--ink-900);color:#fff}
.pp.found .pp-stats{background:var(--ink-900)}
.pp-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:26px 0}
.pp-stat{text-align:center;padding:8px 10px;border-right:1px solid rgba(255,255,255,.08)}
.pp-stat:last-child{border-right:0}
.pp-stat b{display:block;font-family:var(--serif);font-size:1.9rem;font-weight:800;color:var(--accent2);line-height:1}
.pp-stat span{display:block;margin-top:6px;font-size:.78rem;color:#c7d6d6;letter-spacing:.02em}

/* ---------- SECTIONS ---------- */
.pp-sec{padding:68px 0}
.pp-sec.alt{background:radial-gradient(80% 70% at 100% 0%, var(--teal-50), transparent 55%),linear-gradient(180deg,#eef4f2,#f6faf8);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pp-sec.tinted{background:radial-gradient(70% 60% at 92% -5%, var(--teal-50), transparent 55%),linear-gradient(180deg,#f1f6f4,#fafbfa)}
.pp-head{max-width:720px;margin-bottom:34px}
.pp-head .eyebrow{color:var(--accent)}
.pp-head h2{font-family:var(--serif);font-size:1.85rem;margin:.25em 0 .2em;font-weight:760;letter-spacing:-.01em}
.pp-head p{color:var(--soft);font-size:1.04rem}

/* urgency band */
.pp-urgency{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;
  background:linear-gradient(135deg,var(--deep),var(--deep2));color:#eef6f6;border-radius:var(--radius);
  padding:30px 32px}
.pp-urgency .big{font-family:var(--serif);font-size:3rem;font-weight:820;color:var(--accent2);line-height:.95}
.pp-urgency p{color:#dceaea;margin:0;font-size:1.02rem}
.pp-urgency b{color:#fff}

/* benefit cards */
.pp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pp-grid.two{grid-template-columns:repeat(2,1fr)}
.pp-card{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.46));
  backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%);
  border:1px solid rgba(255,255,255,.75);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pp-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.95);box-shadow:var(--shadow-lg)}
.pp-ico{width:3.5rem;height:3.5rem;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;
  background:var(--teal-50);border:1px solid var(--teal-100);color:var(--color-primary)}
.pp-ico svg{width:1.6rem;height:1.6rem}
.pp-card h3{font-size:1.12rem;margin:0 0 .3em}
.pp-card p{color:var(--soft);font-size:.95rem;margin:0}
.pp-num{font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--accent)}

/* component mini-cards */
.pp-comp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.pp-comp .c{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px}
.pp-comp .tag{font-size:.7rem;font-weight:800;letter-spacing:.12em;color:var(--accent)}
.pp-comp h4{margin:.3em 0 .25em;font-size:1.02rem}
.pp-comp p{font-size:.9rem;color:var(--soft);margin:0}

/* trust / standards */
.pp-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.pp-chip{display:inline-flex;align-items:center;gap:7px;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:8px 14px;font-size:.85rem;font-weight:600;color:var(--ink)}
.pp-chip svg{width:15px;height:15px;color:var(--accent)}
.pp-logos{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;margin-top:14px;
  font-size:.82rem;color:var(--soft);font-weight:600}
.pp-logos span{display:inline-flex;align-items:center;gap:7px}
.pp-logos b{color:var(--ink)}

/* steps / how to partner */
.pp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.pp-step{position:relative;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:24px 22px}
.pp-step .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(180deg,var(--color-primary-light),var(--color-primary));color:#fff;margin-bottom:12px}
.pp.tech .pp-step .n{color:#fff}
.pp-step h4{margin:0 0 .25em;font-size:1.02rem}
.pp-step p{margin:0;font-size:.9rem;color:var(--soft)}

/* benefit list (rows) */
.pp-benefit{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.pp-benefit:last-child{border-bottom:0}
.pp-benefit .bi{flex:0 0 auto;width:3rem;height:3rem;border-radius:50%;background:var(--teal-50);border:1px solid var(--teal-100);color:var(--color-primary);
  display:grid;place-items:center}
.pp-benefit .bi svg{width:22px;height:22px}
.pp-benefit b{display:block;font-size:1rem}
.pp-benefit span{font-size:.94rem;color:var(--soft)}

/* quote */
.pp-quote{position:relative;background:var(--tint);border-radius:var(--radius);padding:38px 40px;max-width:860px;margin:0 auto}
.pp-quote::before{content:"\201C";position:absolute;left:18px;top:-6px;font-family:var(--serif);
  font-size:5rem;color:var(--accent);opacity:.35;line-height:1}
.pp-quote p{font-family:var(--serif);font-size:1.4rem;line-height:1.4;color:var(--ink);margin:0}
.pp-quote cite{display:block;margin-top:14px;font-style:normal;font-size:.86rem;color:var(--soft);font-weight:600}

/* CTA band */
.pp-cta-band{position:relative;overflow:hidden;border-radius:var(--radius);padding:46px 44px;text-align:center;
  background:radial-gradient(120% 160% at 50% -30%, color-mix(in srgb,var(--accent) 40%, transparent), transparent 60%),
             linear-gradient(150deg,var(--deep),var(--deep2));color:#eef6f6}
.pp-cta-band h2{font-family:var(--serif);color:#fff;font-size:1.9rem;margin:0 0 .3em}
.pp-cta-band p{color:#dceaea;max-width:600px;margin:0 auto 22px}

.pp-foot{padding:30px 0 58px;color:var(--soft);font-size:.8rem;text-align:center}

/* ---------- TARGETS TABLE (internal page) ---------- */
.pp-cat{margin-top:34px}
.pp-cat h2{display:flex;align-items:baseline;gap:10px;font-size:1.3rem}
.pp-cat .cnt{font-size:.8rem;font-weight:700;color:var(--accent)}
.pp-cat .blurb{font-size:.92rem;margin:.2em 0 12px;color:var(--soft)}
.pp-table{width:100%;border-collapse:collapse;font-size:.86rem;background:#fff;border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
.pp-table th{text-align:left;background:var(--ink-900);color:#fff;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;padding:9px 11px;font-weight:700}
.pp-table td{padding:10px 11px;border-top:1px solid var(--line);vertical-align:top}
.pp-table tr:nth-child(even) td{background:var(--color-bg-alt)}
.pp-name{font-weight:700;color:var(--ink)}
.pp-flag{display:block;margin-top:4px;font-size:.78rem;color:var(--color-text-muted);font-style:italic}
.fit{font-weight:800;font-size:.74rem;padding:3px 8px;border-radius:999px;white-space:nowrap}
.fit-High{background:#dff2ec;color:#0a5b48}.fit-Medium{background:#fdf3da;color:#8a6312}.fit-Low{background:#eef1f3;color:#5a6b74}
.pp-route{font-size:.82rem;color:var(--soft)}
.pp-note{background:var(--amber-50);border:1px solid var(--amber-100);border-left:4px solid var(--color-accent);border-radius:var(--radius);
  padding:16px 18px;font-size:.9rem;color:var(--color-accent-dark);margin-top:24px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .pp-hero-inner{grid-template-columns:1fr;gap:24px;padding:54px 0 60px}
  .pp-art{order:-1;min-height:auto}.pp-art svg{max-width:280px}
  .pp-hero h1{font-size:2rem}
  .pp-stats-grid{grid-template-columns:repeat(2,1fr)}
  .pp-grid,.pp-grid.two,.pp-comp,.pp-steps{grid-template-columns:1fr}
  .pp-urgency{grid-template-columns:1fr;text-align:center}
  .pp-table{display:block;overflow-x:auto;white-space:nowrap}
}