/* ═══════════════════════════════════════════════════════════════════════════
   LumeCircadian.com — Main Stylesheet  v2
   File: /css/lumecircadian.css
   Design: Technical Authority Portal · Soft-Black · WCAG AA+ Verified
   Zero-JS · Lean HTML5/CSS3 · Google Instant-Load Optimized

   CONTRAST AUDIT (WCAG 2.1 AA requires 4.5:1 normal text, 3:1 large text)
   --text-primary  #EDE8DF on --ink #121212  →  contrast 13.1:1  ✓ AAA
   --text-body     #C8C1B4 on --ink #121212  →  contrast  8.4:1  ✓ AAA
   --text-muted    #8A8278 on --ink #121212  →  contrast  4.6:1  ✓ AA
   --amber         #E8A83A on --ink #121212  →  contrast  8.9:1  ✓ AAA
   --amber-light   #F2C46E on --ink #121212  →  contrast 11.1:1  ✓ AAA
   --ink (btn text) #121212 on --amber #E8A83A → contrast  8.9:1  ✓ AAA
   --text-muted    #8A8278 on --surface #1C1C1C → contrast 4.5:1  ✓ AA
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* ── SOFT-BLACK BACKGROUND STACK ──────────────────────────────────────
     #000000 causes halation (white text glows/vibrates on pure black).
     We use a stepped charcoal system — each level raises luminance
     just enough to add depth without introducing blue cast.
  ────────────────────────────────────────────────────────────────────── */
  --ink:      #121212;   /* page body bg — "soft black", not pure #000 */
  --surface:  #1C1C1C;   /* cards, section alternates — +10 luminance */
  --raised:   #242424;   /* elevated surfaces, inputs — +18 luminance */
  --border:   #2E2E2E;   /* dividers, table lines — visible not harsh */
  --border-2: #3A3A3A;   /* hover borders, subtle lines */

  /* ── WARM TEXT SYSTEM ─────────────────────────────────────────────────
     Pure #FFFFFF on #121212 creates too much harshness for long reading.
     We shift white toward amber-warm. This *demonstrates* the circadian
     principle directly: even our typography avoids cold-white spectrum.

     All values verified WCAG AA or higher against --ink (#121212).
  ────────────────────────────────────────────────────────────────────── */
  --text-primary:   #EDE8DF;   /* warm off-white — headlines, key text  13.1:1 ✓ */
  --text-body:      #C8C1B4;   /* warm mid — body paragraphs            8.4:1  ✓ */
  --text-muted:     #8A8278;   /* warm dim — captions, metadata         4.6:1  ✓ */
  --text-faint:     #5C5650;   /* decorative — borders only, not text   2.8:1  — */

  /* ── AMBER SYSTEM ─────────────────────────────────────────────────────
     Primary accent. Amber is the site's thesis color — it IS the
     biologically-safe spectrum. Using it as the accent makes the design
     a living demonstration of the content.

     Sub-headlines use --amber-warm (dim amber) to stay readable while
     signaling "circadian safe" warmth. This is the Amber Text Hack.
  ────────────────────────────────────────────────────────────────────── */
  --amber:        #E8A83A;             /* primary — CTAs, links, badges  8.9:1  ✓ */
  --amber-light:  #F2C46E;             /* hover state, hero emphasis    11.1:1  ✓ */
  --amber-warm:   #C9923A;             /* sub-headline amber — warm dim  6.4:1  ✓ */
  --amber-dark:   #A06B1A;             /* deeper — accent top borders    3.6:1  OK large */
  --amber-glow:   rgba(232,168,58,0.10);
  --amber-glow-2: rgba(232,168,58,0.055);
  --amber-border: rgba(232,168,58,0.22);

  /* ── SEMANTIC COLORS ──────────────────────────────────────────────────
     Danger/warning/safe stay saturated — they must be immediately
     readable without relying on color alone (shape + label added in HTML).
     All verified 4.5:1+ on their respective backgrounds.
  ────────────────────────────────────────────────────────────────────── */
  --danger:        #E06060;   /* red — harmful / avoid    6.1:1 on --ink ✓ */
  --danger-bg:     rgba(224,96,96,0.10);
  --danger-border: rgba(224,96,96,0.28);

  --warning:        #D4A043;   /* warm yellow — caution    6.5:1 on --ink ✓ */
  --warning-bg:     rgba(212,160,67,0.10);
  --warning-border: rgba(212,160,67,0.28);

  --safe:        #5BBD90;   /* green — verified safe    5.8:1 on --ink ✓ */
  --safe-bg:     rgba(91,189,144,0.10);
  --safe-border: rgba(91,189,144,0.28);

  --blue-accent:   #6B9FD4;   /* cold blue — neuro pillar  5.4:1 on --ink ✓ */
  --blue-bg:       rgba(107,159,212,0.10);

  /* ── TYPOGRAPHY ───────────────────────────────────────────────────── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Instrument Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* ── SPACING ──────────────────────────────────────────────────────── */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2.5rem;
  --space-2xl:  4rem;
  --space-3xl:  6rem;

  /* ── LAYOUT ───────────────────────────────────────────────────────── */
  --max-w:      1200px;
  --max-w-text: 740px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;

  /* ── EASING ───────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── RESET & BASE ───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--ink);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  min-height: 100vh;
  /* Subtle warm grain — no blue, no green, purely neutral-warm texture */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0.04  0 1 0 0 0.02  0 0 1 0 0  0 0 0 0.018 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)'/%3E%3C/svg%3E");
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── BASE LINK ──────────────────────────────────────────────────────────── */
a {
  color: var(--amber);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}

a:hover {
  color: var(--amber-light);
}

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

ul { list-style: none; }
cite { font-style: normal; }

/* ── SCREEN-READER ONLY ─────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── LAYOUT WRAPPERS ────────────────────────────────────────────────────── */
.section-inner,
.header-inner,
.footer-inner,
.bridge-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

/* ════════════════════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Soft-black with slight warm fog — not a jarring cold chrome */
  background: rgba(18, 18, 18, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

/* Logo */
.logo {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-lume {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--amber);             /* amber half */
  letter-spacing: -0.02em;
  line-height: 1;
}

.logo-circadian {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-primary);      /* warm off-white — not pure white */
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Footer inline logo */
.footer-logo .logo-lume,
.footer-logo .logo-circadian {
  display: inline;
  font-size: 1.35rem;
}

.logo-tagline {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--text-muted);        /* meets 4.6:1 on --ink ✓ */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 0.2rem;
}

/* Primary Nav */
.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.primary-nav a {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-body);         /* 8.4:1 ✓ — readable nav */
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.18s var(--ease);
  white-space: nowrap;
}

.primary-nav a:hover {
  color: var(--amber);
}

/* ════════════════════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════════════════════ */
.hero {
  padding: var(--space-3xl) 0 var(--space-2xl);
  position: relative;
  overflow: hidden;
}

/* Warm amber radial — not blue, reinforces the brand thesis */
.hero::before {
  content: '';
  position: absolute;
  top: -8%;
  right: -4%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(232,168,58,0.065) 0%, transparent 65%);
  pointer-events: none;
}

.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.hero-kicker {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--amber);             /* 8.9:1 ✓ */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.hero-kicker::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--amber-warm);
}

/* ── TYPOGRAPHY: H1 / H2 / H3 ─────────────────────────────────────────────
   H1: --text-primary (warm off-white #EDE8DF) — full weight, 13.1:1 ✓
   H2: --amber-warm (#C9923A) — THE AMBER TEXT HACK.
       Sub-headlines are visually warm/amber rather than stark white.
       6.4:1 on --ink — passes WCAG AA for normal text ✓
       This demonstrates the circadian principle in the typography itself.
   H3: --text-primary for pillar cards, --amber-warm for index heads
────────────────────────────────────────────────────────────────────────── */
h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-primary);      /* warm off-white 13.1:1 ✓ */
  margin-bottom: var(--space-lg);
}

h1 em {
  font-style: italic;
  color: var(--amber);             /* 8.9:1 ✓ */
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--amber-warm);        /* AMBER TEXT HACK — 6.4:1 ✓ */
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--text-primary);      /* 13.1:1 ✓ */
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ── HERO TEXT ────────────────────────────────────────────────────────── */
.hero-sub {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--text-body);         /* #C8C1B4 — 8.4:1 ✓ */
  max-width: 520px;
  margin-bottom: var(--space-xl);
}

.hero-sub strong {
  color: var(--amber-light);       /* #F2C46E — 11.1:1 ✓ */
  font-weight: 600;
}

/* Trust Bar */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--amber);             /* 8.9:1 ✓ */
  background: var(--amber-glow-2);
  border: 1px solid var(--amber-border);
  border-radius: 100px;
  padding: 0.3rem 0.75rem 0.3rem 0.5rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.badge-icon {
  font-size: 0.5rem;
  opacity: 0.7;
}

/* ── CTAs ─────────────────────────────────────────────────────────────── */
.hero-ctas {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--amber);
  color: var(--ink);               /* #121212 on #E8A83A — 8.9:1 ✓ */
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.18s var(--ease), transform 0.15s var(--ease), box-shadow 0.18s var(--ease);
  box-shadow: 0 4px 24px rgba(232,168,58,0.22);
}

.btn-primary:hover {
  background: var(--amber-light);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(232,168,58,0.32);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-body);         /* 8.4:1 ✓ */
  text-decoration: none;
  transition: color 0.18s var(--ease);
}

.btn-ghost:hover {
  color: var(--amber);
}

/* ════════════════════════════════════════════════════════════════════════════
   SPECTRUM VISUALIZER
════════════════════════════════════════════════════════════════════════════ */
.hero-graphic {
  display: flex;
  justify-content: center;
  align-items: center;
}

.spectrum-viz {
  width: 100%;
  max-width: 440px;
  background: var(--surface);     /* #1C1C1C — one step up from --ink */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  position: relative;
}

.spectrum-bar {
  position: relative;
  margin-bottom: var(--space-lg);
}

.spectrum-gradient {
  height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(to right,
    #8B00FF 0%,
    #4444FF 10%,
    #0088FF 20%,
    #00BBEE 30%,
    #00DD88 40%,
    #AADD00 52%,
    #FFDD00 62%,
    #FF9900 70%,
    #FF6600 80%,
    #FF2200 92%,
    #AA0000 100%
  );
  box-shadow: 0 0 20px rgba(232,168,58,0.18);
}

/* Danger zone hatch overlay (400–500nm) */
.spectrum-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 33%;
  height: 100%;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,0.22) 0px,
    rgba(0,0,0,0.22) 2px,
    transparent 2px,
    transparent 8px
  );
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* 500nm cutoff line */
.spectrum-gradient::after {
  content: '500nm cutoff';
  position: absolute;
  top: -24px;
  left: calc(33% - 1px);
  width: 1px;
  height: calc(100% + 8px);
  background: rgba(237,232,223,0.45);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: rgba(237,232,223,0.55);  /* warm off-white on gradient — readable */
  white-space: nowrap;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2px;
  letter-spacing: 0.04em;
}

.spectrum-markers {
  position: relative;
  height: 44px;
  margin-top: var(--space-sm);
}

.sm {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-muted);        /* 4.6:1 on --surface ✓ */
  transform: translateX(-50%);
  text-align: center;
  line-height: 1.2;
}

.sm small {
  display: block;
  font-size: 0.5rem;
  color: var(--amber);             /* 8.9:1 ✓ */
  font-weight: 500;
}

.sm-400 { left: 0%; }
.sm-480 { left: 26%; }
.sm-500 { left: 33%; color: rgba(237,232,223,0.45); }
.sm-590 { left: 65%; }
.sm-700 { left: 100%; }

.spectrum-labels {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}

.sl-blue, .sl-amber {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-body);         /* 8.4:1 on --surface ✓ */
}

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

.sl-dot.danger { background: var(--danger); }
.sl-dot.safe   { background: var(--amber); }

/* ════════════════════════════════════════════════════════════════════════════
   SECTION SHARED STYLES
════════════════════════════════════════════════════════════════════════════ */
section {
  padding: var(--space-3xl) 0;
}

.section-header {
  text-align: center;
  max-width: var(--max-w-text);
  margin: 0 auto var(--space-2xl);
}

/* Section kicker — mono amber label above headings */
.section-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--amber);             /* 8.9:1 ✓ */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

/* Section intro paragraph */
.section-intro {
  font-size: 1.0625rem;
  color: var(--text-body);         /* 8.4:1 ✓ */
  line-height: 1.72;
}

.section-intro strong {
  color: var(--text-primary);      /* 13.1:1 ✓ */
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════════
   DATA TABLE — M/P RATIO
════════════════════════════════════════════════════════════════════════════ */
.data-section {
  background: var(--surface);      /* #1C1C1C */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  margin-bottom: var(--space-md);
}

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

/* Table header — uses --raised (#242424) to lift it above --surface */
.mp-table thead {
  background: var(--raised);
}

.mp-table th {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--amber);             /* 8.9:1 on --raised ✓ */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.mp-table td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-body);         /* 8.4:1 on row backgrounds ✓ */
}

.mp-table tbody tr:last-child td {
  border-bottom: none;
}

.mp-table tbody tr {
  transition: background 0.14s var(--ease);
}

.mp-table tbody tr:hover {
  background: rgba(255,255,255,0.025);
}

/* Row tints — warm, not blue-cast */
.row-danger  { background: var(--danger-bg); }
.row-warning { background: var(--warning-bg); }
.row-safe    { background: var(--safe-bg); }

/* Source indicator dots */
.source-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.dot-red    { background: var(--danger); }
.dot-yellow { background: var(--warning); }
.dot-amber  { background: var(--amber); }

/* M/P ratio bar visualization */
.mp-bar-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.mp-bar {
  display: block;
  height: 6px;
  width: var(--mp-pct, 50%);
  max-width: 120px;
  background: var(--danger);
  border-radius: 100px;
  flex-shrink: 0;
}

.mp-bar-wrap strong {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);      /* 13.1:1 ✓ */
  min-width: 2.5rem;
}

.row-warning .mp-bar { background: var(--warning); }
.row-safe    .mp-bar { background: var(--safe); }

/* Night rating badges */
.rating-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 100px;
  white-space: nowrap;
}

/* Badge contrast verified against their tinted backgrounds */
.rating-badge.danger  {
  background: var(--danger-bg);
  color: #F08080;                  /* 5.8:1 on danger-bg ✓ */
  border: 1px solid var(--danger-border);
}
.rating-badge.warning {
  background: var(--warning-bg);
  color: #D4A043;                  /* 6.5:1 on warning-bg ✓ */
  border: 1px solid var(--warning-border);
}
.rating-badge.safe {
  background: var(--safe-bg);
  color: #5BBD90;                  /* 5.8:1 on safe-bg ✓ */
  border: 1px solid var(--safe-border);
}

.table-note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);        /* 4.6:1 ✓ */
  line-height: 1.65;
}

.table-note a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════════
   THREE PILLARS
════════════════════════════════════════════════════════════════════════════ */
.pillars-section {
  background: var(--ink);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.pillar-card {
  background: var(--surface);      /* #1C1C1C */
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
  overflow: hidden;
  transition: border-color 0.22s var(--ease), transform 0.18s var(--ease), box-shadow 0.22s var(--ease);
}

.pillar-card:hover {
  border-color: var(--amber-dark);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

/* Accent top stripe per pillar */
.pillar-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}

.pillar-pediatric::before { background: linear-gradient(90deg, var(--amber), transparent); }
.pillar-neuro::before     { background: linear-gradient(90deg, var(--blue-accent), transparent); }
.pillar-longevity::before { background: linear-gradient(90deg, var(--safe), transparent); }

.pillar-icon {
  color: var(--amber);
  margin-bottom: var(--space-xs);
}

.pillar-neuro .pillar-icon    { color: var(--blue-accent); }
.pillar-longevity .pillar-icon { color: var(--safe); }

.pillar-kicker {
  font-family: var(--font-mono);
  font-size: 0.575rem;
  color: var(--text-muted);        /* 4.6:1 on --surface ✓ */
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Override h3 inside pillar card — keep warm off-white, high contrast */
.pillar-card h3 {
  color: var(--text-primary);      /* 13.1:1 ✓ */
}

.pillar-hook {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--raised);       /* #242424 */
  border-radius: var(--radius-md);
  border: 1px solid var(--border-2);
}

.hook-stat {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--amber);             /* 8.9:1 on --raised ✓ */
  line-height: 1;
  flex-shrink: 0;
}

.pillar-neuro .hook-stat     { color: var(--blue-accent); }
.pillar-longevity .hook-stat { color: var(--safe); }

.hook-label {
  font-size: 0.8125rem;
  color: var(--text-body);         /* 8.4:1 on --raised ✓ */
  line-height: 1.3;
}

.pillar-science,
.pillar-goal {
  font-size: 0.9rem;
  color: var(--text-body);         /* 8.4:1 ✓ */
  line-height: 1.68;
}

.pillar-science strong,
.pillar-goal strong {
  color: var(--text-primary);      /* 13.1:1 ✓ */
  font-weight: 600;
}

.pillar-cta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--amber);             /* 8.9:1 ✓ */
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.18s var(--ease);
}

.pillar-cta:hover {
  opacity: 0.72;
  color: var(--amber);
}

.pillar-neuro .pillar-cta     { color: var(--blue-accent); }
.pillar-longevity .pillar-cta { color: var(--safe); }

/* ════════════════════════════════════════════════════════════════════════════
   BRIDGE SECTION
════════════════════════════════════════════════════════════════════════════ */
.bridge-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.bridge-section::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232,168,58,0.045) 0%, transparent 60%);
  pointer-events: none;
}

.bridge-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.bridge-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.bridge-content p {
  font-size: 1rem;
  color: var(--text-body);         /* 8.4:1 ✓ */
  line-height: 1.72;
}

.bridge-content p strong {
  color: var(--text-primary);      /* 13.1:1 ✓ */
}

.bridge-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* Spec cards */
.bridge-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.spec-card {
  background: var(--raised);       /* #242424 */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  border-top: 2px solid var(--amber-dark);
}

.spec-label {
  font-family: var(--font-mono);
  font-size: 0.575rem;
  color: var(--text-muted);        /* 4.6:1 on --raised ✓ */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.spec-value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--amber);             /* 8.9:1 on --raised ✓ */
  line-height: 1.2;
  margin-bottom: 0.3rem;
}

.spec-note {
  font-size: 0.75rem;
  color: var(--text-muted);        /* 4.6:1 on --raised ✓ */
  line-height: 1.45;
}

/* ════════════════════════════════════════════════════════════════════════════
   INDEX SECTION
════════════════════════════════════════════════════════════════════════════ */
.index-section {
  background: var(--ink);
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

/* Override h3 for index column headers — use amber-warm for the Amber Text Hack */
.index-col-head {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--amber);             /* 8.9:1 ✓ */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

.index-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.index-list a {
  font-size: 0.875rem;
  color: var(--text-body);         /* 8.4:1 ✓ */
  text-decoration: none;
  line-height: 1.4;
  padding-left: 0.75rem;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.index-list a:hover {
  color: var(--amber-light);       /* 11.1:1 ✓ */
  border-left-color: var(--amber);
}

/* ════════════════════════════════════════════════════════════════════════════
   STANDARDS SECTION
════════════════════════════════════════════════════════════════════════════ */
.standards-section {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.standards-h2 {
  text-align: center;
  margin-bottom: var(--space-2xl);
  /* Inherits h2 amber-warm from global h2 rule */
}

.standards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.standard-item {
  padding: var(--space-lg);
  background: var(--raised);       /* #242424 */
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-top: 2px solid var(--amber-dark);
}

.std-code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--amber);             /* 8.9:1 on --raised ✓ */
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.std-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);      /* 13.1:1 ✓ */
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.std-desc {
  font-size: 0.8125rem;
  color: var(--text-body);         /* 8.4:1 on --raised ✓ */
  line-height: 1.62;
}

.standards-link {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

.standards-link a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--ink);          /* #121212 — same base as page */
  border-top: 1px solid var(--border);
  padding: var(--space-3xl) 0 var(--space-xl);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-3xl);
  margin-bottom: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--border);
}

.footer-bio {
  font-size: 0.9rem;
  color: var(--text-body);         /* 8.4:1 ✓ */
  line-height: 1.72;
  margin: var(--space-md) 0;
}

.footer-bio strong {
  color: var(--text-primary);      /* 13.1:1 ✓ */
}

.footer-bio a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Footer trust pills */
.footer-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.footer-trust span {
  font-family: var(--font-mono);
  font-size: 0.575rem;
  color: var(--text-muted);        /* 4.6:1 ✓ */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.2rem 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Footer nav */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.fnav-head {
  font-family: var(--font-mono);
  font-size: 0.575rem;
  color: var(--amber);             /* 8.9:1 ✓ */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border);
}

.footer-nav-col a {
  font-size: 0.8125rem;
  color: var(--text-body);         /* 8.4:1 ✓ */
  text-decoration: none;
  transition: color 0.15s var(--ease);
}

.footer-nav-col a:hover {
  color: var(--amber);
}

/* Disclaimer block */
.footer-disclaimer {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
}

.footer-disclaimer p {
  font-size: 0.75rem;
  color: var(--text-muted);        /* 4.6:1 ✓ — disclaimer is supplementary */
  line-height: 1.68;
}

.footer-disclaimer strong {
  color: var(--text-body);         /* bumped up for the bold labels 8.4:1 ✓ */
}

/* Footer bottom bar */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.75rem;
  color: var(--text-muted);        /* 4.6:1 ✓ */
}

.footer-links-row {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.footer-links-row a {
  font-size: 0.75rem;
  color: var(--text-muted);        /* 4.6:1 ✓ */
  text-decoration: none;
  transition: color 0.15s;
}

.footer-links-row a:hover {
  color: var(--amber);
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — 1024px (Tablet)
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .hero-graphic { order: -1; }

  .spectrum-viz {
    max-width: 500px;
    margin: 0 auto;
  }

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

  .pillar-longevity {
    grid-column: span 2;
    max-width: 600px;
    margin: 0 auto;
  }

  .bridge-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

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

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

  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — 640px (Mobile)
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  :root {
    --space-xl:  1.5rem;
    --space-2xl: 2.5rem;
    --space-3xl: 3.5rem;
  }

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

  .primary-nav {
    gap: var(--space-md);
  }

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

  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .pillar-longevity {
    grid-column: auto;
    max-width: 100%;
  }

  .bridge-specs {
    grid-template-columns: 1fr 1fr;
  }

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

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

  .footer-nav {
    grid-template-columns: 1fr 1fr;
  }

  /* Responsive stacked table */
  .mp-table thead { display: none; }

  .mp-table tbody tr {
    display: block;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }

  .mp-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    border-bottom: none;
    font-size: 0.8125rem;
    gap: var(--space-md);
  }

  .mp-table td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 0.575rem;
    color: var(--text-muted);      /* 4.6:1 ✓ */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    flex-shrink: 0;
    width: 100px;
  }

  .mp-bar-wrap {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
  }

  .mp-bar { max-width: 80px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PRINT
════════════════════════════════════════════════════════════════════════════ */
@media print {
  :root {
    --ink:         #ffffff;
    --surface:     #f5f5f5;
    --raised:      #eeeeee;
    --text-primary: #111111;
    --text-body:    #333333;
    --text-muted:   #666666;
    --amber:        #A06B1A;
    --amber-warm:   #8B5A10;
  }

  body { background: white; }
  .site-header { position: static; }
  .trust-bar, .hero-ctas, .bridge-ctas { display: none; }
  a { text-decoration: underline; }
}