/* =============================================================
   AI4EBITDA — Science Page Stylesheet
   File: assets/css/science.css
   WCAG 2.1/2.2 AA compliant. Verified: zero AA failures across
   all text/background pairings.
   IMPORTANT: --g3 (#2a4055) is a BORDER token only. Never use
   for text. Other low-contrast values (--blue, --red) have been
   tuned for 4.5:1+ on every dark surface.
   ============================================================= */

/* ===================== VARIABLES (matches v24) ===================== */
:root {
  --teal:   #33BECA;
  --teal-dark: #146570;  /* WCAG: 7.2:1 on white. Use for accents/eyebrows on light backgrounds */
  --navy:   #215968;
  --ink:    #0a1a26;     /* Headlines on light. ~17:1 on white */
  --ink2:   #2a4055;     /* Body text on light. ~10:1 on white */
  --mute:   #4a6478;     /* Secondary text on light. ~6:1 on white */
  --light-bg:  #ffffff;
  --light-bg2: #eef4f8;  /* Subtle alternate. Mid-market exec readable */
  --light-card: #ffffff;
  --light-bdr: #d4dde6;  /* Card borders on light */
  --amber-dark: #8b5b00; /* WCAG AA: 7.0:1 on white, 6.3:1 on light-bg2 */
  --red-dark: #b3261e;   /* WCAG: 6.5:1 on white */
  --blue-dark: #2c5aa0;  /* WCAG AA: 6.9:1 on white. Used for ACSI accents on light backgrounds */
  --lime:   #DBFA1A;
  --blue:   #6FA0DC;  /* WCAG AA: 6.0:1 on panel, 6.8:1 on void2. Brightened from #4F81BD (was 4.0:1 on panel) */
  --void:   #07090d;
  --void2:  #0d1520;
  --panel:  #132231;
  --light:  #f0f6fa;
  --white:  #f2f6fa;
  --g1:     #a8c4d8;
  --g2:     #8aa8c0;  /* WCAG AA: was #6a90a8, brightened for 5.7:1 on panel */
  --g3:     #2a4055;  /* borders only, never used for text */
  --bdr:    #1a2e40;
  --amber:  #f0b429;
  --red:    #ff7a7a;  /* WCAG AA: was #e35f5f, brightened for 5.7:1 on panel */
  --body-min: 1.08rem;
}

/* ===================== RESET ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Montserrat', sans-serif;
  background: var(--void);
  color: var(--white);
  font-size: var(--body-min);
  line-height: 1.7;
  overflow-x: hidden;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.012; pointer-events: none; z-index: 9998;
}
/* WCAG SC 1.4.1: links distinguishable by more than color (underline by default) */
a { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
/* Structural / button-like links opt out, they have other visual cues */
.btn-lime, .btn-teal, .btn-ghost,
.nav-links a, .footer-links a, .nav-logo,
.faq-btn, .skip-link { text-decoration: none; }
.btn-lime:hover, .btn-teal:hover, .btn-ghost:hover { text-decoration: none; }

/* WCAG SC 2.4.7: visible focus indicator on every interactive element */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  border-radius: 2px;
}
.btn-lime:focus-visible, .btn-teal:focus-visible {
  outline-color: var(--white);
  outline-offset: 3px;
}
.faq-btn:focus-visible {
  outline-offset: -2px;
}
.nav-links a:focus-visible {
  outline-offset: 4px;
}

/* WCAG SC 2.4.1: skip to main content link for keyboard users */
.skip-link {
  position: absolute;
  top: -50px;
  left: 1rem;
  background: var(--lime);
  color: var(--void);
  padding: .75rem 1.4rem;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  z-index: 10001;
  transition: top .15s ease;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.skip-link:focus { top: 1rem; }

/* WCAG SC 2.3.3: respect prefers-reduced-motion */
@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;
  }
  .rv { opacity: 1 !important; transform: none !important; }
}

p { font-weight: 400; color: var(--g1); font-size: var(--body-min); line-height: 1.75; }
h1,h2,h3,h4 { font-family: 'Montserrat', sans-serif; line-height: 1.15; }

/* ===================== UTILITY ===================== */
.container { max-width: 1180px; margin: 0 auto; padding: 0 1.8rem; }
.eyebrow {
  font-size: .88rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--teal); display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.1rem; font-weight: 700;
}
.eyebrow::before { content: ''; display: block; width: 2rem; height: 2px; background: var(--teal); flex-shrink: 0; }
.sec-title {
  font-size: clamp(1.8rem, 3.5vw, 2.9rem);
  font-weight: 800; line-height: 1.12; margin-bottom: 1.3rem; color: var(--white);
}
.sec-title em { font-style: italic; font-weight: 300; color: var(--teal); }
.sec-title .lime { color: var(--lime); }
.body-copy { font-weight: 400; color: var(--g1); font-size: var(--body-min); line-height: 1.8; }
.on-dark p, .on-dark .body-copy { color: var(--g1); }

/* sections */
.sec-dark  { background: var(--void); }
.sec-dark2 { background: var(--void2); }
.sec-panel { background: var(--panel); }
.section { padding: 5.5rem 0; }

/* ===================== LIGHT SECTIONS (WCAG AA, mid-market exec readability) ===================== */
/* Light variants alternate with dark for visual rhythm and to reduce sustained-dark fatigue */
.sec-light  { background: var(--light-bg); color: var(--ink2); }
.sec-light2 { background: var(--light-bg2); color: var(--ink2); }

/* Headlines flip to dark ink */
.sec-light .sec-title, .sec-light2 .sec-title { color: var(--ink); }
.sec-light .sec-title em, .sec-light2 .sec-title em { color: var(--teal-dark); }
.sec-light .sec-title .lime, .sec-light2 .sec-title .lime { color: var(--teal-dark); }

/* Body copy flips to ink2 (10:1 on white) */
.sec-light p, .sec-light2 p,
.sec-light .body-copy, .sec-light2 .body-copy { color: var(--ink2); font-weight: 400; }

/* Eyebrow uses teal-dark for 7.2:1 contrast */
.sec-light .eyebrow, .sec-light2 .eyebrow { color: var(--teal-dark); }
.sec-light .eyebrow::before, .sec-light2 .eyebrow::before { background: var(--teal-dark); }

/* Inline em accents in body text flip from teal to teal-dark */
.sec-light p em, .sec-light2 p em,
.sec-light .body-copy em, .sec-light2 .body-copy em { color: var(--teal-dark); }

/* Density cells (45k → 1500) */
.sec-light .density, .sec-light2 .density { background: var(--light-bdr); border-color: var(--light-bdr); }
.sec-light .density-cell, .sec-light2 .density-cell { background: var(--light-card); }
.sec-light .density-cell.focus, .sec-light2 .density-cell.focus {
  background: #f4fafb; border-top: 3px solid var(--teal-dark);
}
.sec-light .density-cell.signal, .sec-light2 .density-cell.signal {
  background: #f8faec; border-top: 3px solid var(--amber-dark);
}
.sec-light .density-cell .dn, .sec-light2 .density-cell .dn { color: var(--ink); }
.sec-light .density-cell.focus .dn, .sec-light2 .density-cell.focus .dn { color: var(--teal-dark); }
.sec-light .density-cell.signal .dn, .sec-light2 .density-cell.signal .dn { color: var(--amber-dark); }
.sec-light .density-cell .dl, .sec-light2 .density-cell .dl { color: var(--ink); }
.sec-light .density-cell .dd, .sec-light2 .density-cell .dd { color: var(--ink2); }
.sec-light .wtype, .sec-light2 .wtype {
  color: var(--teal-dark); background: rgba(20,101,112,.08);
  border: 1px solid rgba(20,101,112,.3);
}

/* Callouts on light */
.sec-light .callout, .sec-light2 .callout {
  background: rgba(20,101,112,.06);
  border-left-color: var(--teal-dark);
}
.sec-light .callout.lime, .sec-light2 .callout.lime {
  background: rgba(160,105,8,.06);
  border-left-color: var(--amber-dark);
}
.sec-light .callout.amber, .sec-light2 .callout.amber {
  background: rgba(160,105,8,.06);
  border-left-color: var(--amber-dark);
}
.sec-light .callout-lbl, .sec-light2 .callout-lbl { color: var(--teal-dark); }
.sec-light .callout.lime .callout-lbl, .sec-light2 .callout.lime .callout-lbl { color: var(--amber-dark); }
.sec-light .callout.amber .callout-lbl, .sec-light2 .callout.amber .callout-lbl { color: var(--amber-dark); }
.sec-light .callout p, .sec-light2 .callout p { color: var(--ink); font-weight: 400; }
.sec-light .callout p em, .sec-light2 .callout p em { color: var(--teal-dark); }

/* Citation strips */
.sec-light .cite-strip, .sec-light2 .cite-strip {
  background: var(--light-card); border-color: var(--light-bdr);
}
.sec-light .cite-n, .sec-light2 .cite-n { color: var(--amber-dark); }
.sec-light .cite-n span, .sec-light2 .cite-n span { color: var(--mute); }
.sec-light .cite-text, .sec-light2 .cite-text { color: var(--ink2); }
.sec-light .cite-text strong, .sec-light2 .cite-text strong { color: var(--ink); }

/* Fingerprint cards */
.sec-light .fp-card, .sec-light2 .fp-card {
  background: var(--light-card); border-color: var(--light-bdr);
}
.sec-light .fp-card .fp-l, .sec-light2 .fp-card .fp-l { color: var(--teal-dark); }
.sec-light .fp-card .fp-v, .sec-light2 .fp-card .fp-v { color: var(--ink2); }
.sec-light .fp-card .fp-v em, .sec-light2 .fp-card .fp-v em {
  color: var(--amber-dark); font-style: italic;
}

/* Mindset table */
.sec-light .mind-table, .sec-light2 .mind-table { border-color: var(--light-bdr); }
.sec-light .mind-table th, .sec-light2 .mind-table th {
  background: var(--ink); color: var(--white); border-bottom-color: var(--light-bdr);
}
.sec-light .mind-table td, .sec-light2 .mind-table td {
  background: var(--light-card); color: var(--ink2);
  border-bottom-color: var(--light-bdr);
}
.sec-light .mind-table tr:nth-child(even) td,
.sec-light2 .mind-table tr:nth-child(even) td { background: #f6fafc; }
.sec-light .mind-name, .sec-light2 .mind-name { color: var(--ink); }
.sec-light .mind-simple, .sec-light2 .mind-simple {
  color: var(--amber-dark); background: rgba(160,105,8,.08);
  border-color: rgba(160,105,8,.25);
}
.sec-light .mind-table td p, .sec-light2 .mind-table td p { color: var(--ink2); font-weight: 400; }

/* Work-style cards */
.sec-light .wt-card, .sec-light2 .wt-card {
  background: var(--light-card); border-color: var(--light-bdr); border-top-color: var(--teal-dark);
}
.sec-light .wt-card.t2, .sec-light2 .wt-card.t2 { border-top-color: var(--blue-dark); }
.sec-light .wt-card.t3, .sec-light2 .wt-card.t3 { border-top-color: var(--amber-dark); }
.sec-light .wt-card.t4, .sec-light2 .wt-card.t4 { border-top-color: var(--mute); }
.sec-light .wt-name, .sec-light2 .wt-name { color: var(--ink); }
.sec-light .wt-meta, .sec-light2 .wt-meta { color: var(--teal-dark); }
.sec-light .wt-card.t2 .wt-meta, .sec-light2 .wt-card.t2 .wt-meta { color: var(--blue-dark); }
.sec-light .wt-card.t3 .wt-meta, .sec-light2 .wt-card.t3 .wt-meta { color: var(--amber-dark); }
.sec-light .wt-card.t4 .wt-meta, .sec-light2 .wt-card.t4 .wt-meta { color: var(--mute); }
.sec-light .wt-desc, .sec-light2 .wt-desc { color: var(--ink2); }

/* Dysfunction / amplifier cards */
.sec-light .dys-h3.block, .sec-light2 .dys-h3.block { color: var(--red-dark); }
.sec-light .dys-h3.amp, .sec-light2 .dys-h3.amp { color: var(--amber-dark); }
.sec-light .dys-card, .sec-light2 .dys-card {
  background: var(--light-card); border-color: var(--light-bdr); border-left-color: var(--red-dark);
}
.sec-light .dys-card.exp, .sec-light2 .dys-card.exp { border-left-color: var(--amber-dark); }
.sec-light .dys-tag, .sec-light2 .dys-tag { color: var(--red-dark); }
.sec-light .dys-card.exp .dys-tag, .sec-light2 .dys-card.exp .dys-tag { color: var(--amber-dark); }
.sec-light .dys-name, .sec-light2 .dys-name { color: var(--ink); }
.sec-light .dys-desc, .sec-light2 .dys-desc { color: var(--ink2); }

/* Ethics cards */
.sec-light .eth-card, .sec-light2 .eth-card {
  background: var(--light-card); border-color: var(--light-bdr); border-left-color: var(--teal-dark);
}
.sec-light .eth-card.no, .sec-light2 .eth-card.no { border-left-color: var(--red-dark); }
.sec-light .eth-card.report, .sec-light2 .eth-card.report { border-left-color: var(--amber-dark); }
.sec-light .eth-tag, .sec-light2 .eth-tag { color: var(--teal-dark); }
.sec-light .eth-card.no .eth-tag, .sec-light2 .eth-card.no .eth-tag { color: var(--red-dark); }
.sec-light .eth-card.report .eth-tag, .sec-light2 .eth-card.report .eth-tag { color: var(--amber-dark); }
.sec-light .eth-name, .sec-light2 .eth-name { color: var(--ink); }
.sec-light .eth-desc, .sec-light2 .eth-desc { color: var(--ink2); }

/* FAQ on light */
.sec-light .faq-item, .sec-light2 .faq-item { border-bottom-color: var(--light-bdr); }
.sec-light .faq-q, .sec-light2 .faq-q { color: var(--ink); }
.sec-light .faq-icon, .sec-light2 .faq-icon { color: var(--teal-dark); }
.sec-light .faq-ans-inner, .sec-light2 .faq-ans-inner { color: var(--ink2); }
.sec-light .faq-ans-inner strong, .sec-light2 .faq-ans-inner strong { color: var(--ink); }
.sec-light .faq-btn:focus-visible, .sec-light2 .faq-btn:focus-visible {
  background: rgba(20,101,112,.08);
}

/* MRI vs Mirror on light section, "MRI" stays the hero card */
.sec-light .mri-box, .sec-light2 .mri-box {
  background: var(--light-card); border-color: var(--light-bdr);
  border-top-color: var(--mute);
}
.sec-light .mri-box.mri, .sec-light2 .mri-box.mri {
  background: linear-gradient(180deg, rgba(20,101,112,.06) 0%, var(--light-card) 60%);
  border-top: 4px solid var(--teal-dark);
  box-shadow: 0 8px 24px rgba(20,101,112,.08);
}
.sec-light .mri-tag, .sec-light2 .mri-tag { color: var(--mute); }
.sec-light .mri-box.mri .mri-tag, .sec-light2 .mri-box.mri .mri-tag { color: var(--teal-dark); }
.sec-light .mri-name, .sec-light2 .mri-name { color: var(--ink); }
.sec-light .mri-list-name, .sec-light2 .mri-list-name { color: var(--mute); }
.sec-light .mri-row, .sec-light2 .mri-row { border-top-color: var(--light-bdr); }
.sec-light .mri-row .lbl, .sec-light2 .mri-row .lbl { color: var(--teal-dark); }
.sec-light .mri-row .val, .sec-light2 .mri-row .val { color: var(--ink2); }
.sec-light .mri-box.mri .mri-row .val, .sec-light2 .mri-box.mri .mri-row .val { color: var(--ink); font-weight: 500; }

/* Validation grid on light section, source-tagged groups */
.sec-light .val-card, .sec-light2 .val-card {
  background: var(--light-card); border-color: var(--light-bdr);
  border-top-color: var(--teal-dark);
}
.sec-light .val-card.val-acsi, .sec-light2 .val-card.val-acsi { border-top-color: var(--blue-dark); }
.sec-light .val-card.val-link, .sec-light2 .val-card.val-link { border-top-color: var(--ink); }
.sec-light .val-n, .sec-light2 .val-n { color: var(--teal-dark); }
.sec-light .val-card.val-acsi .val-n, .sec-light2 .val-card.val-acsi .val-n { color: var(--blue-dark); }
.sec-light .val-card.val-link .val-n, .sec-light2 .val-card.val-link .val-n { color: var(--ink); }
.sec-light .val-l, .sec-light2 .val-l { color: var(--ink2); }

.sec-light .val-group-label, .sec-light2 .val-group-label { border-bottom-color: var(--light-bdr); }
.sec-light .vg-tag.vg-ours, .sec-light2 .vg-tag.vg-ours {
  color: var(--teal-dark); border-color: rgba(20,101,112,.4); background: rgba(20,101,112,.08);
}
.sec-light .vg-tag.vg-acsi, .sec-light2 .vg-tag.vg-acsi {
  color: var(--blue-dark); border-color: rgba(44,90,160,.4); background: rgba(44,90,160,.08);
}
.sec-light .vg-tag.vg-link, .sec-light2 .vg-tag.vg-link {
  color: var(--ink); border-color: var(--light-bdr); background: var(--light-bg2);
}
.sec-light .vg-desc, .sec-light2 .vg-desc { color: var(--ink2); font-weight: 400; }

/* Inline links inside light sections need darker teal for contrast */
.sec-light a:not(.btn-lime):not(.btn-teal):not(.btn-ghost),
.sec-light2 a:not(.btn-lime):not(.btn-teal):not(.btn-ghost) { color: var(--teal-dark); }

/* Section dividers (subtle horizontal rule between light sections) */
.sec-light + .sec-light, .sec-light + .sec-light2,
.sec-light2 + .sec-light, .sec-light2 + .sec-light2 {
  border-top: 1px solid var(--light-bdr);
}

/* ===================== END LIGHT SECTIONS ===================== */

/* Grid overlay for headers */
.grid-bg::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(33,89,104,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,89,104,.18) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 90% 80% at 30% 50%, black 0%, transparent 100%);
}

/* Reveal */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.rv.on { opacity: 1; transform: none; }

/* Stagger */
.d1 { animation: fu .55s .05s both; }
.d2 { animation: fu .55s .15s both; }
.d3 { animation: fu .55s .28s both; }
.d4 { animation: fu .55s .4s both; }
.d5 { animation: fu .55s .52s both; }
@keyframes fu { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

/* ===================== BUTTONS ===================== */
.btn-lime {
  display: inline-block;
  background: var(--lime); color: var(--void);
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .65rem 1.5rem; font-weight: 700; cursor: pointer; border: none;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: opacity .2s, transform .15s;
}
.btn-lime:hover { opacity: .85; transform: translateY(-2px); }
.btn-teal {
  display: inline-block;
  background: var(--teal); color: var(--void);
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .65rem 1.5rem; font-weight: 700; cursor: pointer; border: none;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: opacity .2s, transform .15s;
}
.btn-teal:hover { opacity: .85; transform: translateY(-2px); }
.btn-ghost {
  display: inline-block;
  background: transparent; color: var(--g1); border: 1px solid var(--g3);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .65rem 1.5rem; font-weight: 600; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: color .2s, border-color .2s;
}
.btn-ghost:hover { color: var(--teal); border-color: var(--teal); }

/* ===================== NAV ===================== */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(7,9,13,.93); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--g3); min-height: 96px;
  display: flex; align-items: center;
}
.nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 1.8rem;
  display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: .7rem;
}
.nav-primary { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav-actions { display: flex; align-items: center; gap: .75rem; }
.nav-logo { display: flex; align-items: center; cursor: pointer; height: 32px; flex-shrink: 0; }
.nav-links {
  display: flex; gap: 1.4rem; align-items: center; justify-content: space-between;
  width: 100%; padding-top: .45rem; border-top: 1px solid rgba(255,255,255,.08);
}
.nav-links a {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--g2); padding: .25rem 0; border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s; font-weight: 600; cursor: pointer;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); border-bottom-color: var(--teal); }
.nav-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: .4rem; }
.nav-menu-toggle span { display: block; width: 22px; height: 2px; background: var(--g1); margin: 5px 0; transition: .3s; }

/* ===================== PAGE HEADER ===================== */
.page-hdr {
  padding: 10.5rem 0 4.5rem; position: relative; overflow: hidden;
  background: var(--void2);
}
.page-hdr::after {
  content: ''; position: absolute; top: -40px; right: -60px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(51,190,202,.08) 0%, transparent 70%);
  pointer-events: none;
}
.ph-eyebrow { font-size: .88rem; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); font-weight: 700; margin-bottom: 1rem; position: relative; z-index: 1; }
.ph-h1 {
  font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 800;
  line-height: 1.1; color: var(--white); margin-bottom: 1.2rem;
  position: relative; z-index: 1;
}
.ph-h1 em { font-style: italic; font-weight: 300; color: var(--teal); opacity: .85; }
.ph-sub {
  font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--g1); font-weight: 400;
  max-width: 720px; line-height: 1.8; position: relative; z-index: 1; margin-bottom: 2.4rem;
}

/* Hero stats */
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  border: 1px solid var(--g3); background: var(--g3); max-width: 880px;
  position: relative; z-index: 1;
}
.hs-item { background: var(--panel); padding: 1.4rem 1.5rem; }
.hs-num {
  font-family: 'DM Mono', monospace; font-size: 1.8rem; font-weight: 500;
  color: var(--lime); display: block; line-height: 1;
}
.hs-lbl {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--g1); font-weight: 600; display: block; margin-top: .55rem; line-height: 1.4;
}

/* ===================== DENSITY (45k → 1500) ===================== */
.density {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  border: 1px solid var(--g3); background: var(--g3); margin: 2rem 0 1rem;
}
.density-cell { background: var(--panel); padding: 2rem 1.8rem; position: relative; }
.density-cell.focus { background: #1a2c40; border-top: 3px solid var(--teal); }
.density-cell.signal { background: var(--void); border-top: 3px solid var(--lime); }
.density-cell .dn {
  font-family: 'DM Mono', monospace; font-size: 2.2rem; font-weight: 500;
  color: var(--white); margin-bottom: .5rem; line-height: 1;
}
.density-cell.focus .dn { color: var(--teal); }
.density-cell.signal .dn { color: var(--lime); }
.density-cell .dl {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--white); margin-bottom: .8rem;
}
.density-cell .dd { font-size: .92rem; color: var(--g1); line-height: 1.65; font-weight: 400; }
.wtypes { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1rem; }
.wtype {
  font-family: 'DM Mono', monospace; font-size: .7rem; font-weight: 500;
  color: var(--teal); background: rgba(51,190,202,.08); border: 1px solid rgba(51,190,202,.3);
  padding: .25rem .55rem; letter-spacing: .04em;
}

/* ===================== CALLOUT ===================== */
.callout {
  border-left: 3px solid var(--teal); background: rgba(51,190,202,.05);
  padding: 1.1rem 1.4rem; margin: 1.6rem 0; position: relative;
}
.callout.lime { border-left-color: var(--lime); background: rgba(219,250,26,.04); }
.callout.amber { border-left-color: var(--amber); background: rgba(240,180,41,.05); }
.callout-lbl {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-bottom: .4rem;
}
.callout.lime .callout-lbl { color: var(--lime); }
.callout.amber .callout-lbl { color: var(--amber); }
.callout p { font-size: .96rem; color: var(--white); margin: 0; line-height: 1.65; font-weight: 400; }
.callout p em { color: var(--teal); font-style: italic; font-weight: 400; }

/* ===================== CITATION STRIP ===================== */
.cite-strip {
  background: var(--panel); border: 1px solid var(--g3);
  padding: 1.4rem 1.6rem; margin: 1.6rem 0;
  display: grid; grid-template-columns: auto 1fr; gap: 1.8rem; align-items: center;
}
.cite-n {
  font-family: 'DM Mono', monospace; font-size: 2.4rem; font-weight: 500;
  color: var(--lime); line-height: 1;
}
.cite-n span { font-size: 1rem; color: var(--g2); margin-left: .15rem; }
.cite-text { font-size: .94rem; color: var(--g1); line-height: 1.65; font-weight: 400; }
.cite-text strong { color: var(--white); font-weight: 600; }

/* ===================== FINGERPRINTS ===================== */
.fp-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 1.4rem 0;
}
.fp-card {
  background: var(--void); border: 1px solid var(--g3);
  padding: 1.1rem 1.2rem;
}
.fp-card .fp-l {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin-bottom: .55rem;
}
.fp-card .fp-v { font-size: .88rem; color: var(--white); line-height: 1.55; font-weight: 400; }
.fp-card .fp-v em { font-style: italic; color: var(--lime); font-weight: 400; }

/* ===================== PIPELINE ===================== */
.pipe-wrap { margin: 1.8rem 0 1rem; }
.pipe {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  border: 1px solid var(--g3); background: var(--g3); overflow: hidden;
}
.pipe-step {
  padding: 1.3rem 1rem; background: var(--panel); position: relative;
}
.pipe-n {
  font-family: 'DM Mono', monospace; font-size: .72rem; font-weight: 500;
  color: var(--g2); letter-spacing: .12em; margin-bottom: .55rem;
}
.pipe-num {
  font-family: 'DM Mono', monospace; font-size: 1.4rem; font-weight: 500;
  line-height: 1; margin-bottom: .45rem; color: var(--teal);
}
.pipe-step.s1 .pipe-num { color: var(--white); }
.pipe-step.s2 .pipe-num { color: var(--teal); }
.pipe-step.s3 .pipe-num { color: var(--blue); }
.pipe-step.s4 .pipe-num { color: var(--amber); }
.pipe-step.s5 .pipe-num { color: var(--teal); }
.pipe-step.s6 .pipe-num { color: var(--lime); font-size: 1.25rem; }
.pipe-title { font-size: .82rem; font-weight: 700; color: var(--white); margin-bottom: .35rem; letter-spacing: .02em; }
.pipe-desc { font-size: .76rem; color: var(--g1); line-height: 1.5; font-weight: 400; }
.pipe-caption {
  display: flex; justify-content: space-between; font-size: .74rem;
  color: var(--g2); margin-top: .8rem; font-family: 'DM Mono', monospace;
  letter-spacing: .08em;
}

/* ===================== MINDSETS TABLE ===================== */
.mind-wrap { overflow-x: auto; margin: 1.4rem 0; }
.mind-table {
  width: 100%; border-collapse: collapse;
  font-size: .92rem;
  border: 1px solid var(--g3);
}
.mind-table th {
  background: var(--void); color: var(--teal); font-size: .74rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--g3);
}
.mind-table td {
  padding: 1.05rem 1rem; border-bottom: 1px solid var(--g3);
  vertical-align: top; line-height: 1.55; background: var(--panel);
  color: var(--g1); font-weight: 400;
}
.mind-table tr:nth-child(even) td { background: var(--void2); }
.mind-table tr:last-child td { border-bottom: none; }
.mind-name { font-weight: 700; color: var(--white); font-size: .98rem; display: block; margin-bottom: .25rem; }
.mind-simple {
  display: inline-block; font-family: 'DM Mono', monospace; font-size: .7rem;
  font-weight: 500; color: var(--lime); background: rgba(219,250,26,.06);
  border: 1px solid rgba(219,250,26,.25);
  padding: .2rem .55rem; margin-top: .4rem; letter-spacing: .04em;
}
.mind-table td p { margin: 0; font-size: .9rem; color: var(--g1); font-weight: 400; }

/* ===================== WORK STYLES ===================== */
.wt-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.6rem 0;
}
.wt-card {
  background: var(--panel); border: 1px solid var(--g3);
  padding: 1.4rem 1.4rem; border-top: 3px solid var(--teal);
  transition: transform .2s, border-color .2s;
}
.wt-card:hover { transform: translateY(-3px); }
.wt-card.t2 { border-top-color: var(--blue); }
.wt-card.t3 { border-top-color: var(--amber); }
.wt-card.t4 { border-top-color: var(--g2); }
.wt-name { font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: .35rem; }
.wt-meta {
  font-family: 'DM Mono', monospace; font-size: .72rem; color: var(--teal);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: .85rem; font-weight: 500;
}
.wt-card.t2 .wt-meta { color: var(--blue); }
.wt-card.t3 .wt-meta { color: var(--amber); }
.wt-card.t4 .wt-meta { color: var(--g2); }
.wt-desc { font-size: .88rem; color: var(--g1); line-height: 1.6; font-weight: 400; }

/* ===================== DYSFUNCTIONS ===================== */
.dys-h3 {
  font-size: .85rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin: 1.6rem 0 .8rem;
}
.dys-h3.block { color: var(--red); }
.dys-h3.amp { color: var(--lime); }
.dys-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-bottom: 1rem;
}
.dys-card {
  background: var(--panel); border: 1px solid var(--g3);
  padding: 1.1rem 1.3rem; border-left: 3px solid var(--red);
}
.dys-card.exp { border-left-color: var(--lime); }
.dys-tag {
  font-family: 'DM Mono', monospace; font-size: .72rem; font-weight: 500;
  color: var(--red); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .55rem;
}
.dys-card.exp .dys-tag { color: var(--lime); }
.dys-name { font-size: .96rem; font-weight: 700; color: var(--white); margin-bottom: .4rem; }
.dys-desc { font-size: .84rem; color: var(--g1); line-height: 1.6; font-weight: 400; }

/* ===================== MRI vs MIRROR ===================== */
.mri-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin: 1.8rem 0 1rem;
}
.mri-box {
  background: var(--panel); border: 1px solid var(--g3); padding: 1.6rem 1.7rem;
  border-top: 3px solid var(--g2);
}
.mri-box.mri { border-top-color: var(--lime); background: linear-gradient(180deg, rgba(219,250,26,.04) 0%, var(--panel) 50%); }
.mri-tag {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--g2); margin-bottom: .4rem;
}
.mri-box.mri .mri-tag { color: var(--lime); }
.mri-name { font-size: 1.35rem; font-weight: 700; color: var(--white); margin-bottom: .25rem; }
.mri-list-name {
  font-size: .76rem; color: var(--g2); margin-bottom: 1rem;
  font-family: 'DM Mono', monospace; letter-spacing: .04em;
}
.mri-row {
  display: flex; gap: 1rem; padding: .65rem 0;
  border-top: 1px solid var(--g3); font-size: .88rem;
}
.mri-row:first-of-type { border-top: none; }
.mri-row .lbl {
  font-size: .72rem; font-weight: 700; color: var(--teal);
  letter-spacing: .12em; text-transform: uppercase; width: 100px;
  flex-shrink: 0; padding-top: .15rem;
}
.mri-row .val { color: var(--g1); line-height: 1.55; flex: 1; font-weight: 400; }
.mri-box.mri .mri-row .val { color: var(--white); }

/* ===================== VALIDATION GRID ===================== */
.val-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.2rem 0;
}
.val-grid-3 { margin-bottom: 1.8rem; }
.val-card {
  background: var(--void); border: 1px solid var(--g3);
  padding: 1.5rem 1.6rem; text-align: center;
  border-top: 3px solid var(--lime);
}
.val-card.val-acsi { border-top-color: var(--blue); }
.val-card.val-link { border-top-color: var(--white); }
.val-n {
  font-family: 'DM Mono', monospace; font-size: 1.85rem; font-weight: 500;
  color: var(--lime); margin-bottom: .45rem; line-height: 1;
}
.val-card.val-acsi .val-n { color: var(--blue); }
.val-card.val-link .val-n { color: var(--white); }
.val-l { font-size: .82rem; color: var(--g1); line-height: 1.5; font-weight: 400; }

/* Source-tag label row above each validation group */
.val-group-label {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.6rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--g3);
}
.vg-tag {
  font-family: 'DM Mono', monospace;
  font-size: .82rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem .8rem;
  border: 1px solid;
  flex-shrink: 0;
}
.vg-tag.vg-ours { color: var(--lime); border-color: rgba(219,250,26,.4); background: rgba(219,250,26,.06); }
.vg-tag.vg-acsi { color: var(--blue); border-color: rgba(79,129,189,.5); background: rgba(79,129,189,.08); }
.vg-tag.vg-link { color: var(--white); border-color: rgba(242,246,250,.35); background: rgba(242,246,250,.05); }
.vg-desc { font-size: .94rem; color: var(--g1); font-weight: 400; line-height: 1.5; }

/* ===================== CAUSALITY CHAIN ===================== */
.chain {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin: 1.8rem 0 1rem; border: 1px solid var(--g3); background: var(--g3); overflow: hidden;
}
.chain-step { padding: 1.5rem 1.4rem; background: var(--panel); }
.chain-icn {
  font-family: 'DM Mono', monospace; font-size: .7rem; font-weight: 500;
  color: var(--teal); letter-spacing: .1em; margin-bottom: .55rem;
}
.chain-num {
  font-family: 'DM Mono', monospace; font-size: 1.4rem; font-weight: 500;
  color: var(--white); margin-bottom: .4rem; line-height: 1;
}
.chain-step.s2 .chain-num { color: var(--teal); }
.chain-step.s3 .chain-num { color: var(--amber); }
.chain-step.s4 .chain-num { color: var(--lime); }
.chain-title { font-size: .9rem; font-weight: 700; color: var(--white); margin-bottom: .25rem; }
.chain-desc { font-size: .8rem; color: var(--g1); line-height: 1.5; font-weight: 400; }

/* ===================== FAQ ===================== */
.faq-section { padding: 5rem 0; background: var(--light-bg2); }
.faq-section .eyebrow { color: var(--teal-dark); }
.faq-section .eyebrow::before { background: var(--teal-dark); }
.faq-section .sec-title { color: var(--ink); }
.faq-section .sec-title em { color: var(--teal-dark); }
.faq-list { max-width: 740px; margin-top: 2rem; }
.faq-item { border-bottom: 1px solid var(--light-bdr); }
.faq-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 1.3rem 0; background: none; border: none; cursor: pointer; text-align: left;
}
.faq-q { font-size: 1.08rem; font-weight: 700; color: var(--ink); }
.faq-icon { font-size: 1.4rem; color: var(--teal-dark); transition: transform .3s; flex-shrink: 0; margin-left: 1rem; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-ans { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-ans-inner { padding: 0 0 1.3rem; font-size: 1rem; color: var(--ink2); font-weight: 400; line-height: 1.75; }
.faq-ans-inner strong { color: var(--ink); }
.faq-btn:focus-visible {
  outline-offset: -2px;
  background: rgba(20,101,112,.08);
}

/* ===================== CTA STRIP ===================== */
.cta-strip {
  background: var(--panel); border-top: 1px solid var(--g3); border-bottom: 1px solid var(--g3);
  padding: 3rem 0; text-align: center;
}
.cta-strip h3 {
  font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 800;
  color: var(--white); margin-bottom: .8rem;
}
.cta-strip h3 em { font-style: italic; font-weight: 300; color: var(--teal); }
.cta-strip p { max-width: 600px; margin: 0 auto 1.6rem; font-size: 1rem; }
.cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ===================== FOOTER ===================== */
footer { background: var(--void); border-top: 1px solid var(--g3); padding: 2.8rem 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.footer-logo { display: flex; align-items: center; }
.footer-links { display: flex; gap: 1.8rem; flex-wrap: wrap; }
.footer-links a { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g2); font-weight: 600; transition: color .2s; cursor: pointer; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--teal); }
.footer-copy { font-size: .76rem; letter-spacing: .12em; color: var(--g2); font-weight: 600; }
.footer-legal {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 1rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--g3);
}
.footer-legal span { font-size: .72rem; letter-spacing: .1em; color: var(--g2); font-weight: 400; }
.footer-legal a {
  font-size: .72rem; letter-spacing: .1em; color: var(--g2); font-weight: 400;
  cursor: pointer; padding-bottom: 1px; border-bottom: 1px solid var(--g3);
  transition: color .2s, border-color .2s; text-decoration: none;
}
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--teal); border-color: var(--teal); }

/* ===================== EXPERTS BAR ===================== */
.experts-bar { background: var(--void); border-top: 1px solid var(--g3); border-bottom: 1px solid var(--g3); padding: 2rem 0; }
.experts-row { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap; align-items: center; }
.expert {
  font-size: .82rem; color: var(--g1); font-weight: 400;
}
.expert strong { color: var(--white); font-weight: 600; }
.expert a { color: var(--teal); margin-left: .3rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }

/* ===================== ETHICS GRID ===================== */
.eth-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.4rem 0 0;
}
.eth-card {
  background: var(--panel); border: 1px solid var(--g3);
  padding: 1.4rem 1.5rem; border-left: 3px solid var(--teal);
}
.eth-card.no { border-left-color: var(--red); }
.eth-card.report { border-left-color: var(--lime); }
.eth-tag {
  font-family: 'DM Mono', monospace; font-size: .72rem; font-weight: 500;
  color: var(--teal); letter-spacing: .12em; text-transform: uppercase; margin-bottom: .6rem;
}
.eth-card.no .eth-tag { color: var(--red); }
.eth-card.report .eth-tag { color: var(--lime); }
.eth-name { font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: .55rem; }
.eth-desc { font-size: .9rem; color: var(--g1); line-height: 1.65; font-weight: 400; }

/* ===================== HUMAN + AI ===================== */
.hai-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.6rem 0;
}
.hai-card {
  background: var(--void); border: 1px solid var(--g3);
  padding: 1.6rem 1.6rem; border-top: 3px solid var(--lime);
  transition: transform .2s;
}
.hai-card:hover { transform: translateY(-3px); }
.hai-icn {
  font-family: 'DM Mono', monospace; font-size: 1.05rem; font-weight: 500;
  color: var(--lime); margin-bottom: .8rem; line-height: 1; letter-spacing: .04em;
}
.hai-name { font-size: 1.05rem; font-weight: 700; color: var(--white); margin-bottom: .5rem; }
.hai-desc { font-size: .9rem; color: var(--g1); line-height: 1.65; font-weight: 400; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .density, .pipe, .chain, .wt-grid, .dys-grid, .fp-row, .mri-grid, .val-grid, .hero-stats, .eth-grid, .hai-grid { grid-template-columns: repeat(2, 1fr); }
  .pipe { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1180px) {
  nav { min-height: 74px; }
  .nav-inner { gap: 0; }
  .nav-links { display: none; position: absolute; top: 74px; left: 0; right: 0; background: rgba(7,9,13,.97); border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid var(--g3); flex-direction: column; padding: 1.2rem 1.8rem 1.5rem; gap: .8rem; }
  .nav-links.open { display: flex; }
  .nav-menu-toggle { display: block; }
  .page-hdr { padding-top: 8.5rem; }
}
@media (max-width: 768px) {
  .density, .pipe, .chain, .wt-grid, .dys-grid, .fp-row, .mri-grid, .val-grid, .hero-stats, .eth-grid, .hai-grid { grid-template-columns: 1fr; }
  .section { padding: 4rem 0; }
  .page-hdr { padding: 8.5rem 0 3.5rem; }
  .cite-strip { grid-template-columns: 1fr; gap: 1rem; }
  .mri-row { flex-direction: column; gap: .35rem; }
  .mri-row .lbl { width: auto; }
}
@media (max-width: 480px) {
  .nav-inner { padding: 0 1rem; }
  .nav-logo svg { height: 26px; max-width: 190px; }
  .nav-actions { gap: .5rem; }
  .nav-actions .btn-lime { padding: .72rem .9rem; font-size: .7rem; }
}