/* ===== @property: animatable custom properties ===== */
@property --reveal { syntax: '<percentage>'; initial-value: 0%; inherits: false; }
@property --scan { syntax: '<percentage>'; initial-value: 0%; inherits: false; }

/* ===== Design tokens ===== */
:root{
  color-scheme: light dark;
  --green: #3FC919;
  --green-text: #1a7a0a;
  --green-hover: #15940a;
  --green-light: #E2FBDB;
  --green-glow: rgba(63,201,25,0.12);
  --green-glow-strong: rgba(63,201,25,0.25);
  --paper: #FAFAF7;
  --paper-dark: #F2F2EE;
  --ink: #1A1A17;
  --ink-secondary: #4A4D45;
  --ink-muted: #6B6E66;
  --rule: #E0E2DC;
  --rule-dark: #C8CCC4;
  --scanline: rgba(63,201,25,0.04);
  --grid-line: rgba(0,0,0,0.025);
  --red-flag: #d31952;
  --shadow-card: 0 1px 3px rgba(26,26,23,0.04), 0 1px 2px rgba(26,26,23,0.06);
  --shadow-lifted: 0 10px 30px rgba(26,26,23,0.08), 0 3px 10px rgba(26,26,23,0.04);
  --shadow-green-glow: 0 0 30px rgba(63,201,25,0.15);
  --ease-out-expo: cubic-bezier(0.16,1,0.3,1);
  --ease-out-quart: cubic-bezier(0.25,1,0.5,1);
  --ease-in-out-circ: cubic-bezier(0.85,0,0.15,1);
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.5rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;
  --font-serif: ui-serif, Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --max-width: 48rem;
  --measure: 62ch;
}
@media (prefers-color-scheme: dark){
  :root{
    --green-text: #3FC919;
    --red-flag: #ff5c8a;
    --green-hover: #4fd82a;
    --green-light: #132d0a;
    --green-glow: rgba(63,201,25,0.18);
    --green-glow-strong: rgba(63,201,25,0.35);
    --paper: #0A0B09;
    --paper-dark: #141613;
    --ink: #E8E9E4;
    --ink-secondary: #B8BAB4;
    --ink-muted: #8A8D85;
    --rule: #2A2D27;
    --rule-dark: #3A3E37;
    --scanline: rgba(63,201,25,0.025);
    --grid-line: rgba(255,255,255,0.025);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-lifted: 0 10px 30px rgba(0,0,0,0.5), 0 3px 10px rgba(0,0,0,0.3);
    --shadow-green-glow: 0 0 40px rgba(63,201,25,0.18);
  }
}

/* ===== Reset & base ===== */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{
  font-size: 118.75%;
  line-height: 1.7;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  overflow-x: clip;
}
@media (prefers-color-scheme: dark){
  html{
    background: repeating-linear-gradient(to bottom, var(--scanline) 0 1px, transparent 1px 3px), var(--paper);
  }
}
body{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem var(--space-2xl);
  overflow-x: hidden;
}
/* Film grain: inline SVG turbulence tile, purely decorative */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.04;
}
@media (prefers-color-scheme: dark){
  body::after{ opacity: 0.06; }
}
@media (prefers-reduced-transparency: reduce){
  body::after{ display: none; }
}
html{ scrollbar-width: thin; scrollbar-color: var(--rule-dark) transparent; }
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: var(--rule-dark);
  border-radius: 999px;
  border: 3px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover{ background: var(--ink-muted); }
::selection{ background: var(--green-light); color: var(--ink); }
@media (prefers-color-scheme: dark){
  ::selection{ background: rgba(63,201,25,0.25); color: var(--ink); }
}
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--green-hover);
}
@keyframes focus-pulse{
  0%{ box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--green-hover), 0 0 12px var(--green-glow-strong); }
  100%{ box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--green-hover); }
}
:focus-visible{ animation: focus-pulse 0.4s var(--ease-out-expo); }
img, svg{ max-width: 100%; height: auto; display: block; }

/* ===== Typography ===== */
h1, h2, h3{ font-weight: 600; line-height: 1.15; color: var(--ink); text-wrap: balance; }
h1{
  font-family: var(--font-serif);
  font-size: clamp(3rem, 9.5vw, 5.75rem);
  letter-spacing: -0.04em;
  font-weight: 700;
  line-height: 1;
}
h2{
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: var(--space-md);
  letter-spacing: -0.025em;
  font-weight: 700;
}
h3{ font-size: clamp(1.125rem, 2.5vw, 1.25rem); margin-bottom: var(--space-xs); letter-spacing: -0.01em; }
p{
  margin-bottom: var(--space-md);
  color: var(--ink-secondary);
  max-width: var(--measure);
  line-height: 1.65;
  text-wrap: pretty;
}
p:last-child{ margin-bottom: 0; }
a{
  color: var(--green-text);
  text-decoration: none;
  font-weight: 600;
  background-image: linear-gradient(var(--green-text), var(--green-text));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.3s var(--ease-out-quart), color 0.15s;
}
@media (hover: hover){
  a:hover{ background-size: 100% 1px; color: var(--green-hover); }
}
strong{ color: var(--ink); font-weight: 600; }
em{ color: var(--ink); font-style: italic; }
small{ font-size: 0.8rem; color: var(--ink-muted); }
.section-kicker{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green-text);
  margin-bottom: var(--space-sm);
}

/* ===== Layout primitives ===== */
.section{
  padding: var(--space-xl) 0;
  position: relative;
}
.section::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule) 12%, var(--rule) 88%, transparent);
}
.section-header{ margin-bottom: var(--space-lg); max-width: 42rem; }
.section-header h2{ margin-bottom: var(--space-xs); }
.section-header p{ font-size: 1.05rem; color: var(--ink-secondary); max-width: 38rem; }

/* Inverted full-bleed band: scoped token overrides, components adapt automatically */
.section-invert{
  --paper: #0D0F0C;
  --paper-dark: #151812;
  --ink: #ECEEE8;
  --ink-secondary: #C3C7BF;
  --ink-muted: #9AA196;
  --rule: #262B24;
  --rule-dark: #3A3F38;
  --green-text: #3FC919;
  --green-light: #132d0a;
  --shadow-card: none;
  --shadow-lifted: 0 10px 30px rgba(0,0,0,0.5);
  --scanline: rgba(63,201,25,0.03);
  background:
    repeating-linear-gradient(to bottom, var(--scanline) 0 1px, transparent 1px 3px),
    var(--paper);
  box-shadow: inset 0 1px 0 var(--rule), inset 0 -1px 0 var(--rule);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}

/* ===== Skip link ===== */
.skip-link{
  position: absolute;
  top: -100%;
  left: 0;
  padding: var(--space-xs) var(--space-md);
  background: var(--green);
  color: #000;
  font-weight: 600;
  z-index: 200;
  border-radius: 0 0 4px 0;
  background-image: none;
}
.skip-link:focus{ top: 0; background-size: 0; }

/* ===== Scroll progress bar ===== */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--green);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 150;
  pointer-events: none;
}

/* ===== Nav ===== */
.nav-toggle{
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
#nav-check:focus-visible ~ header .nav-burger{
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--green-hover);
}
header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  transition: padding 0.3s var(--ease-out-quart), box-shadow 0.3s;
}
@media (prefers-color-scheme: dark){
  header{
    background: color-mix(in srgb, var(--paper) 85%, transparent);
    box-shadow: 0 1px 6px rgba(0,0,0,0.4);
  }
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) 0;
  transition: padding 0.3s var(--ease-out-quart);
}
.nav-logo{
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  background-image: none;
}
.nav-logo svg{ width: 26px; height: 26px; flex-shrink: 0; }
.nav-links{ display: flex; gap: var(--space-md); font-size: 0.85rem; }
.nav-links a{ font-weight: 500; padding: var(--space-xs) 0; position: relative; }
.nav-links a.active{ color: var(--green-text); background-size: 100% 1px; }
.nav-disclaimer{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-muted); font-weight: 500; }
.nav-burger{ display: none; }

/* Mobile nav (CSS checkbox hack) */
@media (max-width: 599px){
  .nav-links{
    display: none;
    position: absolute;
    top: 100%; left: -1rem; right: -1rem;
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: var(--space-sm) 1.5rem;
    box-shadow: var(--shadow-lifted);
  }
  .nav-links a{ padding: var(--space-sm) 0; border-bottom: 1px solid var(--rule); }
  .nav-links a:last-child{ border-bottom: none; }
  .nav-burger{
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--rule);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--ink-secondary);
    background: var(--paper-dark);
    -webkit-tap-highlight-color: transparent;
  }
  .nav-burger svg{ width: 18px; height: 18px; }
  #nav-check:checked ~ header .nav-links{ display: flex; }
  .nav-disclaimer{ display: none; }
}

/* ===== Buttons ===== */
.btn{
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background 0.2s var(--ease-out-quart), border-color 0.2s, color 0.2s, transform 0.2s var(--ease-out-quart), box-shadow 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  background-image: none;
}
.btn-primary{ background: var(--green); color: #000; }
@media (hover: hover){
  .btn-primary:hover{ background: var(--green-hover); color: #000; transform: translateY(-2px); box-shadow: var(--shadow-green-glow); }
}
.btn-primary:active{ transform: translateY(0); transition-duration: 0.05s; }
.btn-outline{ border: 2px solid var(--rule-dark); color: var(--ink-secondary); background: transparent; }
@media (hover: hover){
  .btn-outline:hover{ border-color: var(--ink-muted); color: var(--ink); transform: translateY(-2px); }
}
.btn-outline:active{ transform: translateY(0); transition-duration: 0.05s; }

/* ===== Hero ===== */
.hero{
  padding: var(--space-3xl) 0 var(--space-2xl);
  text-align: center;
  position: relative;
}
.hero::before{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: min(620px, 120vw);
  aspect-ratio: 1;
  transform: translate(-50%, -55%);
  background:
    repeating-radial-gradient(circle at center, transparent 0 38px, rgba(63,201,25,0.05) 38px 39px),
    radial-gradient(circle at center, rgba(63,201,25,0.06), transparent 60%);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}
@media (prefers-color-scheme: dark){
  .hero::before{
    background:
      repeating-radial-gradient(circle at center, transparent 0 38px, rgba(63,201,25,0.08) 38px 39px),
      radial-gradient(circle at center, rgba(63,201,25,0.1), transparent 60%);
  }
}
.hero-badge{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green-text);
  background: linear-gradient(135deg, var(--green-light), color-mix(in srgb, var(--green) 20%, var(--paper)));
  border-radius: 999px;
  padding: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-md);
}
@media (prefers-color-scheme: dark){
  .hero-badge{ background: linear-gradient(135deg, var(--green-light), #1a3d0f); }
}
.hero h1{ margin-bottom: var(--space-md); line-height: 1.02; }
.hero .subtitle{
  font-size: 1.2rem;
  color: var(--ink-secondary);
  max-width: 34rem;
  margin: 0 auto var(--space-lg);
  line-height: 1.55;
}
.hero-cta{
  display: inline-flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-xl);
}

/* CSS-animated hero visual: radar sweep + license plate scan */
.hero-radar{
  position: relative;
  width: min(240px, 56vw);
  aspect-ratio: 1;
  margin: 0 auto var(--space-md);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center, transparent 0 14px, rgba(63,201,25,0.07) 14px 15px),
    radial-gradient(circle at center, rgba(63,201,25,0.04), transparent 70%);
  overflow: hidden;
}
@media (prefers-color-scheme: dark){
  .hero-radar{
    background:
      repeating-radial-gradient(circle at center, transparent 0 14px, rgba(63,201,25,0.12) 14px 15px),
      radial-gradient(circle at center, rgba(63,201,25,0.08), transparent 70%);
  }
}
.hero-radar::before{
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(63,201,25,0.35) 30deg, transparent 60deg, transparent 360deg);
  border-radius: 50%;
  animation: radar-sweep 4s linear infinite;
}
.hero-radar::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  transform: translate(-50%, -50%);
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--green);
}
@keyframes radar-sweep{ to{ transform: rotate(360deg); } }

.scroll-cue{
  margin: var(--space-xl) auto 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
  animation: fade-in 1s var(--ease-out-expo) 1.5s both;
}
.scroll-cue svg{ width: 14px; height: 14px; margin: 0 auto var(--space-2xs); color: var(--green); }
@keyframes fade-in{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: none; }
}

/* ===== Live-scan ticker (decorative) ===== */
.ticker{
  margin-top: var(--space-xl);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-xs) 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track{
  display: flex;
  width: max-content;
  animation: ticker-scroll 42s linear infinite;
}
.ticker-track span{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  white-space: nowrap;
  padding-right: var(--space-2xl);
}
@keyframes ticker-scroll{ to{ transform: translateX(-50%); } }
@media (hover: hover){
  .ticker:hover .ticker-track{ animation-play-state: paused; }
}

/* ===== Feature cards ===== */
.feature-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-md); }
.feature-card{
  position: relative;
  overflow: hidden;
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: var(--space-lg);
  transition: box-shadow 0.2s var(--ease-out-quart), border-color 0.2s, transform 0.2s var(--ease-out-quart), opacity 0.2s;
}
.feature-card::after{
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, var(--green-glow), transparent);
  transform: skewX(-12deg);
  transition: left 0.7s var(--ease-out-expo);
  pointer-events: none;
}
@media (hover: hover){
  .feature-card:hover{ box-shadow: var(--shadow-lifted); border-color: var(--green); transform: translateY(-4px); }
  .feature-card:hover::after{ left: 130%; }
  .feature-card:hover .icon{ box-shadow: 0 0 0 8px var(--green-glow); }
  .feature-grid:has(.feature-card:hover) .feature-card:not(:hover){ opacity: 0.55; }
}
.feature-card .icon{
  width: 38px; height: 38px;
  margin-bottom: var(--space-md);
  color: var(--green);
  border-radius: 50%;
  transition: box-shadow 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
}
.feature-card h3{ font-size: 1.05rem; margin-bottom: var(--space-xs); }
.feature-card p{ font-size: 0.9rem; color: var(--ink-secondary); line-height: 1.55; }

/* ===== Spotting ===== */
.spotting-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-bottom: var(--space-lg); }
@media (max-width: 640px){
  .spotting-grid{ grid-template-columns: 1fr; }
}
.spot-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-text);
  border: 1px solid var(--rule-dark);
  border-radius: 999px;
  padding: 2px var(--space-xs);
  margin-bottom: var(--space-xs);
}
.spotting-item{
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: var(--space-lg);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s var(--ease-out-quart);
}
@media (hover: hover){
  .spotting-item:hover{ box-shadow: var(--shadow-lifted); border-color: var(--green); transform: translateY(-2px); }
}
.spotting-item .icon{ width: 30px; height: 30px; margin-bottom: var(--space-sm); color: var(--green); }
.spotting-item h3{ font-size: 0.98rem; margin-bottom: var(--space-2xs); }
.spotting-item p{ font-size: 0.88rem; color: var(--ink-secondary); line-height: 1.5; }

/* ===== Signal cards ===== */
.signal-list{ display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-xs); margin: var(--space-md) 0 var(--space-lg); }
@media (min-width: 641px) and (max-width: 850px){
  .signal-list{ grid-template-columns: repeat(2, 1fr); }
}
.signal-card{
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--green);
  border-radius: 6px;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.signal-card .icon{ width: 20px; height: 20px; color: var(--green); flex-shrink: 0; }
.scanline-sweep{ position: relative; overflow: hidden; }
.scanline-sweep::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: var(--scan);
  height: 3px;
  background: linear-gradient(to right, transparent, var(--green), transparent);
  box-shadow: 0 0 16px var(--green);
  pointer-events: none;
}
.signals-closer{
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  text-align: center;
  color: var(--ink);
  max-width: 40rem;
  margin: var(--space-lg) auto 0;
  line-height: 1.4;
  font-style: italic;
}
.signals-closer em{ color: var(--green-text); font-style: italic; }

/* ===== Privacy ===== */
.privacy-list{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-bottom: var(--space-md); }
@media (max-width: 640px){
  .privacy-list{ grid-template-columns: 1fr; }
}
.privacy-item{
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: var(--space-md) var(--space-lg);
  box-shadow: inset 3px 0 0 0 var(--green);
  transition: box-shadow 0.4s var(--ease-out-expo);
}
@media (hover: hover){
  .privacy-item:hover{ box-shadow: inset 3px 0 0 0 var(--green), 0 0 0 1px var(--green-glow); }
}
.privacy-item h3{ font-size: 0.95rem; margin-bottom: var(--space-2xs); }
.privacy-item p{ font-size: 0.86rem; color: var(--ink-secondary); line-height: 1.55; }
.privacy-item.compress p{ font-size: 0.82rem; line-height: 1.5; }

/* ===== Stats ===== */
.stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--space-sm);
  grid-auto-flow: dense;
}
.stat-card{
  text-align: center;
  padding: var(--space-md) var(--space-sm);
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--green);
  border-radius: 0 0 10px 10px;
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s;
}
.stat-value{
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  font-weight: 700;
  color: var(--green-text);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .stat-value{
    background: linear-gradient(180deg, var(--green-text), color-mix(in srgb, var(--green-text) 68%, var(--ink)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.stat-label{ display: block; font-size: 0.78rem; color: var(--ink-muted); margin-top: var(--space-2xs); line-height: 1.3; }
/* Compact stats on small screens: 2-up cards, tighter type */
@media (max-width: 640px){
  .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
  .stat-card{ padding: var(--space-xs) var(--space-2xs); border-radius: 0 0 10px 10px; }
  .stat-value{ font-size: 1.2rem; letter-spacing: -0.02em; }
  .stat-label{ font-size: 0.64rem; line-height: 1.35; }
  .stats-closer{ margin-top: var(--space-md); }
}

.stats-closer{
  margin: var(--space-lg) auto 0;
  max-width: 36rem;
  text-align: center;
  color: var(--ink-secondary);
  font-style: italic;
  text-wrap: balance;
}
.stats-closer .glow{ color: var(--green-text); font-weight: 600; font-style: normal; }

/* ===== Fact list / table / rail / odometer ===== */
.factlist{ list-style: none; max-width: var(--measure); margin: 0 0 var(--space-md); }
.factlist li{
  padding: var(--space-xs) 0 var(--space-xs) 1.25rem;
  position: relative;
  color: var(--ink-secondary);
}
.factlist li::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  transform: translateY(-50%);
}
.table-wrap{ overflow-x: auto; margin: var(--space-md) 0; }
.comp-table{ width: 100%; border-collapse: collapse; }
.comp-table th{
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  border-bottom: 2px solid var(--rule-dark);
  padding: var(--space-xs) var(--space-sm);
}
.comp-table td{
  padding: var(--space-sm);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-secondary);
  vertical-align: top;
}
.comp-table td:first-child{ font-weight: 600; color: var(--ink); white-space: nowrap; }
@media (hover: hover){
  .comp-table tbody tr:hover td{ background: var(--paper-dark); }
}
@media (max-width: 480px){
  .comp-table td:first-child{ white-space: normal; }
}
.scan-odo{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin-top: var(--space-lg);
}
.scan-odo #odo{ color: var(--green-text); font-weight: 700; }
.rail{
  display: none;
  position: fixed;
  right: clamp(0.5rem, 2vw, 1.5rem);
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 12px;
  z-index: 90;
}
.rail a{
  position: relative;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--rule-dark);
  transition: background 0.2s, transform 0.2s var(--ease-out-quart), box-shadow 0.2s;
}
.rail a::before{ content: ""; position: absolute; inset: -8px; }
.rail a:hover{ background: var(--ink-muted); }
.rail a.active{
  background: var(--green);
  transform: scale(1.5);
  box-shadow: 0 0 0 4px var(--green-glow);
}
@media (min-width: 1100px) and (hover: hover) and (pointer: fine){
  .rail{ display: flex; }
}
/* Quotes closer note */
.quotes-note{ margin-top: 1.5rem; text-align: center; color: var(--ink-muted); }

/* Load-guard banner (shown only when style.css fails to load).
   Uses literal colors ON PURPOSE: custom properties are unavailable
   in exactly the failure mode this banner exists for. */
.load-guard{
  margin: 0 auto;
  padding: 12px 16px;
  font-family: system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: #fff3f3;
  border-bottom: 2px solid #c0392b;
  color: #5a1414;
}

/* ===== Field-note callout ===== */
.field-note{
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--green);
  border-radius: 14px;
  padding: var(--space-lg);
}
.field-note .icon{
  width: 34px; height: 34px;
  flex-shrink: 0;
  color: var(--green);
}
.field-note h3{ margin-bottom: var(--space-xs); }
.field-note p{ font-size: 0.92rem; margin-bottom: 0; }
@media (max-width: 520px){
  .field-note{ flex-direction: column; }
}

/* ===== Timeline legacy marker ===== */
/* ===== Timeline ===== */
.timeline{ position: relative; padding-left: var(--space-lg); }
.timeline::before{
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 2px;
  height: var(--reveal);
  background: linear-gradient(to bottom, var(--green) 0%, var(--green) 80%, color-mix(in srgb, var(--green) 40%, var(--rule-dark)) 100%);
}
.timeline-item{
  display: block;
  padding: var(--space-sm) var(--space-sm);
  border-radius: 12px;
  margin: 0 calc(-1 * var(--space-sm));
  position: relative;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s var(--ease-out-quart);
}
.timeline-item summary{
  display: flex;
  gap: var(--space-md);
  align-items: center;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.timeline-item summary::-webkit-details-marker{ display: none; }
.timeline-item .tl-title{ font-weight: 600; color: var(--ink); font-size: 1rem; }
.timeline-item summary::after{
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--green-text);
  font-weight: 700;
  transition: transform 0.25s var(--ease-out-quart);
}
.timeline-item[open] summary::after{ transform: rotate(45deg); }
.timeline-item::before{
  content: "";
  position: absolute;
  left: -1.125rem;
  top: 1.35rem;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid var(--green);
  box-shadow: 0 0 0 3px var(--paper);
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  z-index: 1;
}
.timeline-item::after{
  content: "";
  position: absolute;
  left: -0.625rem;
  top: 1.55rem;
  width: 0.625rem;
  height: 1px;
  background: var(--rule-dark);
  z-index: 1;
  transition: width 0.2s;
}
.timeline-item.milestone::before{
  width: 16px; height: 16px;
  left: -1.25rem;
  top: 1.2rem;
  background: var(--green);
  border-width: 3px;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--green-light);
}
.timeline-item.milestone::after{ left: -0.75rem; top: 1.6rem; }
.timeline-item:last-child::before{ animation: pulse 2.5s ease-in-out infinite; }
.timeline-item:last-child .rec-indicator{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--red-flag);
  margin-left: var(--space-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.rec-indicator::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red-flag);
  animation: blink 1.2s steps(2) infinite;
}
@keyframes blink{ 50%{ opacity: 0.2; } }
@keyframes pulse{
  0%, 100%{ box-shadow: 0 0 0 3px var(--paper), 0 0 0 0 var(--green-glow-strong); }
  50%{ box-shadow: 0 0 0 3px var(--paper), 0 0 0 10px transparent; }
}
@media (hover: hover){
  .timeline-item:hover{ background: var(--paper-dark); box-shadow: var(--shadow-card); transform: translateX(3px); }
  .timeline-item:hover::before{ background: var(--green); transform: scale(1.3); }
  .timeline-item:hover::after{ width: 0.9rem; }
  .timeline-item.milestone:hover::before{ transform: scale(1.2); }
}
.timeline-year{
  flex-shrink: 0;
  min-width: 4.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--green-text);
  background: var(--green-light);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  letter-spacing: -0.01em;
  align-self: flex-start;
  margin-top: 0.15rem;
  transition: background 0.2s, color 0.2s;
}
@media (hover: hover){
  .timeline-item:hover .timeline-year{ background: var(--green); color: #000; }
}
.timeline-body{ font-size: 0.95rem; margin-top: var(--space-xs); padding-left: calc(3.4rem + var(--space-sm)); color: var(--ink-secondary); line-height: 1.55; max-width: 36rem; }

/* ===== Quotes ===== */
.quotes{ display: flex; flex-direction: column; gap: var(--space-md); }
.quote-block{
  position: relative;
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  border-radius: 0 8px 8px 0;
  box-shadow: inset 3px 0 0 0 var(--green);
  padding: var(--space-md) var(--space-lg);
  transition: box-shadow 0.3s var(--ease-out-expo);
}
.quote-block::before{
  content: "\201C";
  position: absolute;
  top: -0.2rem; left: 0.3rem;
  font-family: var(--font-serif);
  font-size: 5rem;
  color: var(--green);
  opacity: 0.1;
  line-height: 1;
  pointer-events: none;
}
.quote-block:nth-child(even){ margin-left: var(--space-lg); }
.quote-block blockquote{ font-size: 1.05rem; color: var(--ink-secondary); font-style: italic; line-height: 1.55; position: relative; z-index: 1; }
.quote-block .attribution{
  display: block;
  margin-top: var(--space-sm);
  font-style: normal;
  font-size: 0.82rem;
  color: var(--ink-muted);
  font-weight: 500;
}
@media (hover: hover){
  .quote-block.ceo:hover{ box-shadow: inset 5px 0 0 0 var(--green), 0 0 20px var(--green-glow); }
}

/* ===== Resources ===== */
.resource-group{ margin-bottom: var(--space-lg); }
.resource-group:last-child{ margin-bottom: 0; }
.resource-group h3{
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--rule);
}
.resource-item{
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  margin: 0 calc(-1 * var(--space-sm));
  border-radius: 6px;
  border-bottom: 1px solid var(--rule);
  transition: background 0.15s;
}
.resource-item:last-child{ border-bottom: none; }
@media (hover: hover){
  .resource-item:hover{ background: var(--paper-dark); }
}
.resource-tag{
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 4px;
  background: var(--green-light);
  color: var(--green-text);
  min-width: 3.5rem;
  text-align: center;
}
.resource-tag.action{
  background: var(--green);
  color: #000;
  animation: action-breathe 3s ease-in-out infinite;
}
@keyframes action-breathe{
  0%, 100%{ box-shadow: 0 0 0 0 var(--green-glow-strong); }
  50%{ box-shadow: 0 0 0 4px transparent; }
}
.resource-item a{ font-size: 0.95rem; }
.resource-item .domain{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-muted); margin-left: var(--space-2xs); }

/* ===== FAQ ===== */
.faq{ display: flex; flex-direction: column; gap: var(--space-sm); margin-top: var(--space-md); }
.faq details{
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: var(--space-md) var(--space-lg);
  transition: box-shadow 0.2s;
}
.faq details[open]{ box-shadow: inset 3px 0 0 0 var(--green); }
.faq summary{
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  -webkit-tap-highlight-color: transparent;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+";
  font-family: var(--font-mono);
  color: var(--green-text);
  font-weight: 700;
  font-size: 1.1rem;
  transition: transform 0.25s var(--ease-out-quart);
}
.faq details[open] summary::after{ transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference){
  html{ interpolate-size: allow-keywords; }
  .faq details::details-content{
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s var(--ease-out-quart), content-visibility 0.3s allow-discrete;
  }
  .faq details[open]::details-content{ block-size: auto; }
}
.faq details p{ margin-top: var(--space-sm); font-size: 0.92rem; color: var(--ink-secondary); }

/* ===== CTA finale ===== */
.cta-section::before{ display: none; }
.cta-section{
  text-align: center;
  background: radial-gradient(ellipse at center, var(--green-light), transparent 70%);
  border-radius: 16px;
  padding: var(--space-2xl) var(--space-lg);
  margin-top: var(--space-md);
  position: relative;
  overflow: hidden;
}
@media (prefers-color-scheme: dark){
  .cta-section{ background: radial-gradient(ellipse at center, rgba(63,201,25,0.15), transparent 70%); }
}
.cta-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, var(--green), transparent),
    radial-gradient(2px 2px at 60% 20%, var(--green), transparent),
    radial-gradient(2px 2px at 80% 60%, var(--green), transparent),
    radial-gradient(2px 2px at 30% 70%, var(--green), transparent),
    radial-gradient(2px 2px at 70% 80%, var(--green), transparent),
    radial-gradient(2px 2px at 45% 45%, var(--green), transparent);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.2;
  animation: constellation 8s ease-in-out infinite alternate;
}
@keyframes constellation{ to{ opacity: 0.4; } }
.cta-section h2{
  font-family: var(--font-serif);
  font-size: clamp(2rem, 6vw, 3.25rem);
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}
.cta-section p{ margin: 0 auto var(--space-lg); color: var(--ink-secondary); max-width: 30rem; position: relative; z-index: 1; }
.cta-section .btn{ font-size: 1.05rem; padding: var(--space-md) var(--space-xl); position: relative; z-index: 1; }
.cta-vignette{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.25) 100%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out-quart);
}
.cta-vignette.on{ opacity: 1; }

/* ===== Footer ===== */
footer{
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--rule);
  text-align: center;
}
footer p{ font-size: 0.85rem; color: var(--ink-muted); margin-bottom: var(--space-2xs); max-width: none; margin-left: auto; margin-right: auto; }
footer small{ display: block; margin-top: var(--space-md); }
footer .status-readout{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--green-text); margin-top: var(--space-sm); letter-spacing: 0.05em; }

/* ===== Custom cursor ===== */
.cursor-ring{
  position: fixed;
  top: 0; left: 0;
  width: 18px; height: 18px;
  border: 2px solid var(--green);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s var(--ease-out-quart), height 0.2s var(--ease-out-quart), opacity 0.2s;
  opacity: 0;
}
.cursor-ring.active{ opacity: 0.8; }
.cursor-ring.hover{ width: 36px; height: 36px; opacity: 1; box-shadow: 0 0 12px var(--green-glow); }

/* ===== Entrance animations (progressive enhancement) ===== */
@keyframes reveal-up{
  from{ opacity: 0; transform: translateY(2rem) scale(0.98); }
  to{ opacity: 1; transform: none; }
}
@keyframes reveal-wipe{
  from{ opacity: 0; clip-path: inset(100% 0 0 0); }
  to{ opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes draw-underline{
  from{ clip-path: inset(0 100% 0 0); }
  to{ clip-path: inset(0 0 0 0); }
}
@keyframes draw-down{
  from{ --reveal: 0%; }
  to{ --reveal: 100%; }
}
@keyframes scan-sweep{
  from{ --scan: 0%; }
  to{ --scan: 100%; }
}
@keyframes text-glow{
  0%, 100%{ text-shadow: none; }
  50%{ text-shadow: 0 0 12px var(--green-glow-strong); }
}

@supports (animation-timeline: view()){
  .reveal{
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }
  .reveal-stagger > *{
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 55%;
  }
  .hero .hero-badge{ animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  .hero h1{ animation: reveal-wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  .hero .subtitle{ animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 5% entry 45%; }
  .hero .hero-cta{ animation: reveal-up linear both; animation-timeline: view(); animation-range: entry 10% entry 50%; }
  .section-header h2{ animation: draw-underline linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  .timeline::before{ animation: draw-down linear both; animation-timeline: view(); animation-range: cover 0% cover 90%; }
  .scanline-sweep::after{ animation: scan-sweep linear both; animation-timeline: view(); animation-range: entry 20% entry 80%; }
  .stats-closer .glow{ animation: text-glow linear both; animation-timeline: view(); animation-range: cover 30% cover 70%; }
}

/* JS-gated fallback: hidden until .in-view, ONLY when JS is active.
   With JS disabled, elements are always visible (no .js class on html). */
.js .reveal:not(.in-view),
.js .reveal-stagger:not(.in-view) > *{ opacity: 0; transform: translateY(1.5rem); }
.js .reveal.in-view,
.js .reveal-stagger.in-view > *,
.js .reveal-stagger > .in-view{ opacity: 1; transform: none; }

/* ===== Responsive ===== */
@media (max-width: 599px){
  html{ font-size: 106.25%; }
  body{ padding: 0 1rem var(--space-xl); }
  .hero{ padding: var(--space-2xl) 0 var(--space-xl); }
  .hero .subtitle{ font-size: 1.05rem; }
  .section{ padding: var(--space-lg) 0; }
  .hero-cta{ flex-direction: column; width: 100%; }
  .hero-cta .btn{ width: 100%; text-align: center; }
  .quote-block:nth-child(even){ margin-left: 0; }
  .timeline{ padding-left: var(--space-md); }
}
@media (min-width: 1600px){
  body{ max-width: 52rem; }
}

/* ===== Reduced motion (absolute) ===== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .hero-radar::before,
  .timeline-item:last-child::before,
  .resource-tag.action,
  .cta-section::before,
  .rec-indicator::before{ animation: none !important; }
  .reveal, .reveal-stagger > *{ opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero .hero-badge, .hero h1, .hero .subtitle, .hero .hero-cta,
  .section-header h2, .scanline-sweep::after, .stats-closer .glow{ animation: none !important; }
  .timeline::before{ animation: none !important; --reveal: 100%; }
  .ticker-track{ animation: none !important; }
  .rail{ display: none; }
  .feature-card::after{ display: none; }
  .scroll-progress{ display: none; }
  .cursor-ring{ display: none; }
}

/* ===== Reduced transparency ===== */
@media (prefers-reduced-transparency: reduce){
  header, .cta-section, .nav-links{ backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
}

/* ===== Increased contrast ===== */
@media (prefers-contrast: more){
  :root{
    --ink-secondary: #2A2D27;
    --ink-muted: #3A3D37;
    --rule: #B8BEB4;
    --rule-dark: #9AA096;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark){
  :root{
    --ink-secondary: #D5D7D0;
    --ink-muted: #B8BAB4;
    --rule: #5A6058;
    --rule-dark: #7A8078;
  }
}

/* ===== Forced colors ===== */
@media (forced-colors: active){
  .stat-value{ -webkit-text-fill-color: CanvasText; background: none; }
  .stat-card{ border-top-color: Highlight; }
  .timeline-item::before{ background: Highlight; border-color: Highlight; }
  .timeline-item.milestone::before{ background: Highlight; border-color: Highlight; box-shadow: 0 0 0 3px Canvas, 0 0 0 6px CanvasText; }
  .quote-block, .privacy-item, .faq details[open]{ box-shadow: none; border-left: 3px solid Highlight; }
  .feature-card, .spotting-item, .signal-card, .field-note{ border-color: ButtonText; }
  .rail a{ background: ButtonText; }
  .rail a.active{ background: Highlight; box-shadow: none; }
  .btn{ border: 2px solid ButtonText; }
  .btn-primary{ background: Highlight; color: HighlightText; border-color: Highlight; }
  .hero-badge, .resource-tag, .timeline-year, .cta-section{ border: 1px solid ButtonText; }
  .skip-link{ border: 2px solid ButtonText; background: ButtonFace; }
  .scroll-progress, .cursor-ring{ display: none; }
  body::after, .ticker-track{ display: none; }
}

/* ===== Print ===== */
@media print{
  .nav, .nav-burger, .hero-cta, .resource-tag, .timeline-year, .btn, .cta-section,
  .scroll-progress, .cursor-ring, .cta-vignette, .scroll-cue, .hero-radar,
  .rec-indicator, .ticker, body::after, .rail, .scan-odo{ display: none; }
  .timeline-year{ display: inline-flex; }
  .faq summary::after, .timeline-item summary::after{ content: ""; }
  .faq details::details-content, .timeline-item::details-content{
    content-visibility: visible;
    block-size: auto;
  }
  body{ max-width: none; padding: 0; }
  html{ font-size: 12pt; color: #000; background: #fff; color-scheme: light; scrollbar-width: auto; }
  :root{
    --green-text: #1a7a0a;
    --ink: #000;
    --ink-secondary: #000;
    --ink-muted: #333;
    --rule: #ccc;
    --paper: #fff;
    --paper-dark: #fff;
  }
  h1, h2, h3, p, a, strong, small, blockquote, .section-kicker, .stat-label, .timeline-body, .attribution{ color: #000; }
  h1, h2, h3{ font-family: Georgia, "Times New Roman", serif; }
  a{ text-decoration: underline; background-image: none; }
  a[href]::after{ content: " (" attr(href) ")"; font-size: 0.8rem; color: #555; }
  .section{ border-top: 1px solid #ccc; page-break-inside: avoid; padding: 1.5rem 0; }
  .section::before{ display: none; }
  .section-invert{
    --ink: #000; --ink-secondary: #000; --ink-muted: #333;
    --paper: #fff; --paper-dark: #fff; --green-text: #1a7a0a;
    background: none; box-shadow: none; margin-inline: 0; padding-inline: 0;
  }
  .feature-card, .stat-card, .quote-block, .spotting-item, .privacy-item, .signal-card, .field-note{
    background: none; border: 1px solid #ccc; box-shadow: none;
  }
  .stat-card{ border-top: 2px solid #000; }
  .stat-value{ -webkit-text-fill-color: #000; background: none; }
  .stat-value{ color: #000; }
  .quote-block::before{ display: none; }
  .quote-block:nth-child(even){ margin-left: 0; }
  .quote-block, .privacy-item{ box-shadow: none; border-left: 3px solid #000; }
  .timeline::before{ background: #ccc; --reveal: 100%; }
  .timeline-item::before{ background: #fff; border-color: #000; }
  .timeline-item.milestone::before{ background: #000; box-shadow: none; }
  .timeline-year{ display: inline; font-weight: bold; background: none; color: #000; padding: 0; }
  .faq details{ display: block; }
  .faq summary{ display: none; }
  .faq details p{ display: block; }
  @page{ margin: 2cm; }
}