/* ─────────────────────────────────────────────
   nijinn.io — v1
   Brand-locked styles. Light-first. Brand green #059669 (UI) + electric green #00FF00 (logo only).
   Type: Inter (UI), JetBrains Mono (data), DM Sans (wordmark + tagline only).
   Spec sources: nijinn — Wordmark, Logo, Tagline (canonical lock, 2 May 2026)
                 nijinn & Predictive Labs — Brand Guidelines
   ───────────────────────────────────────────── */

/* ───── Fonts (self-hosted, variable) ───── */
/* Single woff2 variable font per family; weight axis covers all weights used. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/Inter-Variable.woff2') format('woff2'); }
@font-face { font-family: 'JetBrainsMono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('/fonts/JetBrainsMono-Variable.woff2') format('woff2'); }
@font-face { font-family: 'DMSans'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url('/fonts/DMSans-Variable.woff2') format('woff2'); }

/* ───── Tokens ───── */
:root {
  /* Backgrounds and text */
  --bg-primary: #FFFFFF;
  --bg-surface: #FAFAFA;
  --bg-raised: #F3F4F6;
  --text-primary: #1A1A1A;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;
  --border-default: #E5E7EB;

  /* Brand accents */
  --green-25: #F5FCF8;
  --green-50: #E6F9F0;
  --green-100: #A7F3D0;
  --green-300: #34D399;
  --green-500: #059669;
  --green-600: #047857;
  --green-700: #065F46;
  --logo-bright: #00FF00;

  /* Marketing-surface tinted backgrounds (canonical 354dda6f §2.3.1).
     Marketing-only; do not use in product UI. */
  --tint-ambient: var(--green-25);
  --tint-eyebrow: var(--green-50);
  --tint-hover:   var(--green-100);

  /* Chart palette (categorical, 6 series) — for marketing motion teaser
     and any data-viz on marketing surfaces. */
  --chart-1: #059669;
  --chart-2: #6366F1;
  --chart-3: #F59E0B;
  --chart-4: #EC4899;
  --chart-5: #8B5CF6;
  --chart-6: #06B6D4;

  /* Typography */
  --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrainsMono', 'SF Mono', 'Fira Code', ui-monospace, monospace;
  --font-display: 'DMSans', system-ui, sans-serif;

  /* Spacing (4px base grid) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;

  /* Layout */
  --content-max: 1280px;
  --content-narrow: 720px;
  --nav-height: 56px;
  --radius-card: 6px;
  --radius-chip: 4px;
  --border: 0.5px;
}

/* ───── Reset ───── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }
body { margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.6; color: var(--text-primary); background: var(--bg-primary); font-feature-settings: "ss01", "cv05", "cv11"; }
img, svg { display: block; max-width: 100%; }
a { color: var(--green-500); text-decoration: none; transition: color 120ms ease; }
a:hover { color: var(--green-600); }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
em { font-style: italic; }

/* Tabular numbers across all numeric content */
[class*="signal-label"], [class*="lane-labels"], [class*="tape"], .launch-date, .footer-base { font-variant-numeric: tabular-nums; }

/* ───── Header (dark frame) ───── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-2xl);
  height: var(--nav-height);
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: var(--border) solid rgba(255, 255, 255, 0.08);
  transition: border-color 200ms ease;
}
.site-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, 0.18); }

.site-nav { display: flex; gap: var(--space-2xl); }
.site-nav a {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  transition: color 160ms ease;
}
.site-nav a:hover { color: #FFFFFF; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 1.5px;
  background: var(--green-500); transform: scaleX(0); transform-origin: center;
  transition: transform 200ms ease;
}
.site-nav a:hover::after { transform: scaleX(0.6); }
/* Active page indicator: persistent green underline + brighter text. */
.site-nav a[aria-current="page"] { color: #FFFFFF; }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ───── Signature (the integrated mark, official PNGs) ───── */
.signature-compact { display: inline-flex; align-items: center; gap: var(--space-md); text-decoration: none; color: #FFFFFF; }
.signature-compact:hover { color: #FFFFFF; }
/* Endorsement text inside the dark header reads white, with the "Predictive" weight emphasis kept */
.site-header .signature-compact .sig-endorsement { color: rgba(255, 255, 255, 0.7); }
.site-header .signature-compact .endorsement-by { color: rgba(255, 255, 255, 0.55); }
.site-header .signature-compact .endorsement-pl-bold { color: #FFFFFF; }
.site-header .signature-compact .endorsement-pl-light { color: rgba(255, 255, 255, 0.7); }

/* Header/footer wordmark (compact, no tagline) */
.sig-wordmark {
  display: block;
  height: 32px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* Hero full lockup (wordmark + tagline) */
.hero-lockup {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  object-fit: contain;
}

.sig-endorsement {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.endorsement-by { font-weight: 400; opacity: 0.7; }
.endorsement-pl-bold { font-weight: 700; color: var(--text-primary); }
.endorsement-pl-light { font-weight: 400; color: var(--text-primary); }

/* ───── Hero ───── */
.hero {
  padding: var(--space-5xl) var(--space-2xl) var(--space-4xl);
  max-width: var(--content-max);
  margin: 0 auto;
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-4xl);
  align-items: center;
}
.hero-signature-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

/* ───── Motion teaser ───── */
.hero-teaser-wrap { width: 100%; }
.motion-teaser { width: 100%; height: auto; max-height: 420px; }

/* Animations */
@keyframes tape-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-18px); }
}
/* Always draw forward: invisible (offset=200) → fade in → drawn (offset=0) → fade out → loop */
@keyframes noise-redraw {
  0%   { stroke-dashoffset: 200; opacity: 0; }
  15%  { stroke-dashoffset: 200; opacity: 1; }
  85%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}
@keyframes sweep-pass {
  0%   { x2: 40;  opacity: 0; }
  10%  { x2: 40;  opacity: 1; }
  60%  { x2: 680; opacity: 1; }
  70%  { x2: 680; opacity: 0; }
  100% { x2: 40;  opacity: 0; }
}
@keyframes row-enter {
  0%, 30%  { opacity: 0; transform: translateX(-12px); }
  45%      { opacity: 1; transform: translateX(0); }
  92%      { opacity: 1; transform: translateX(0); }
  100%     { opacity: 0; transform: translateX(0); }
}
@keyframes output-pulse {
  0%, 100% { opacity: 1; r: 2.5; }
  50%      { opacity: 0.45; r: 4; }
}
@keyframes top-row-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

.motion-teaser .tape-col { animation: tape-drift 1.6s linear infinite; }
.motion-teaser .tape-2   { animation-duration: 2.0s; animation-delay: -0.5s; }
.motion-teaser .tape-3   { animation-duration: 1.4s; animation-delay: -0.9s; }
.motion-teaser .noise   { stroke-dasharray: 200; animation: noise-redraw 4.2s ease-in-out infinite; }
.motion-teaser .n2      { animation-delay: -1.4s; }
.motion-teaser .n3      { animation-delay: -2.8s; }
.motion-teaser .sweep   { animation: sweep-pass 7s cubic-bezier(.4,.0,.2,1) infinite; }

/* Ranked output rows: staggered entrance, looped with the sweep cadence */
.motion-teaser .output-row { opacity: 0; transform-origin: 0 50%; animation: row-enter 7s ease-in-out infinite; }
.motion-teaser .row-1 { animation-delay: 0s; }
.motion-teaser .row-2 { animation-delay: 0.18s; }
.motion-teaser .row-3 { animation-delay: 0.36s; }
.motion-teaser .row-4 { animation-delay: 0.54s; }
.motion-teaser .row-1 text:last-child { animation: top-row-glow 1.4s ease-in-out infinite; transform-origin: center; }
.motion-teaser .output-pulse { animation: output-pulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .motion-teaser .tape-col,
  .motion-teaser .noise,
  .motion-teaser .sweep,
  .motion-teaser .output-row,
  .motion-teaser .output-pulse,
  .motion-teaser .row-1 text:last-child { animation: none; }
  .motion-teaser .output-row { opacity: 1; }
  .motion-teaser .noise { stroke-dashoffset: 0; opacity: 1; }
}

/* ───── Hero lede & launch tag (live inside hero-signature-wrap) ───── */
.hero-lede {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.25;
  max-width: 28ch;
}
.hero-launch {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--green-700);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border: var(--border) solid var(--green-500);
  border-radius: var(--radius-chip);
  background: var(--tint-eyebrow);
}
.hero-launch .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
}

/* ───── Paper-thumbnail CTA ───── */
/* Replaces the old pill-button pair. The link IS a small document — eyebrow,
   title, body lines suggesting prose, an illustrative equation, and a READ →
   marker at the foot. Slight resting tilt; lift + counter-rotate on hover. */
.paper-card {
  margin-left: auto;
  display: block;
  position: relative;
  width: 168px;
  min-height: 232px;
  padding: 14px 14px 38px;
  background: #FEFEFC;
  border: 1px solid var(--border-default);
  border-radius: 2px;
  text-decoration: none;
  color: var(--text-primary);
  transform: rotate(1.2deg);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 14px rgba(0, 0, 0, 0.05);
  transition:
    transform 320ms cubic-bezier(.2,.7,.3,1),
    box-shadow 320ms cubic-bezier(.2,.7,.3,1),
    border-color 200ms ease;
}
.paper-card:hover,
.paper-card:focus-visible {
  transform: translateY(-6px) rotate(-1.6deg);
  border-color: var(--green-500);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.06),
    0 18px 36px rgba(5, 150, 105, 0.14);
  color: var(--text-primary);
  outline: none;
}
.paper-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.paper-name {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin: 0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-default);
}
.paper-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}
.paper-line {
  display: block;
  height: 2px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 1px;
}
.paper-line.w-70 { width: 70%; }
.paper-line.w-85 { width: 85%; }
.paper-line.w-90 { width: 90%; }
.paper-line.w-95 { width: 95%; }
.paper-line.w-100 { width: 100%; }
.paper-formula {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: center;
  color: var(--text-primary);
  margin: 10px 0;
  padding: 7px 0;
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  letter-spacing: 0.01em;
}
.paper-formula sub {
  font-size: 0.72em;
  vertical-align: -0.18em;
}
.paper-foot {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.paper-read {
  color: var(--green-500);
  font-weight: 500;
  transition: transform 200ms ease;
}
.paper-card:hover .paper-read { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .paper-card { transform: none; transition: none; }
  .paper-card:hover, .paper-card:focus-visible { transform: none; }
  .paper-card:hover .paper-read { transform: none; }
}

/* ───── Site thumbnail card (predictivelabs.io evocation) ─────
   Sits inside built-prose to upgrade the corporate-site reference
   from a plain text link to a visual page. Self-contained dark-navy
   palette (#0A1420 / #00F0FF) so it reads as a different brand from
   the host page, which is the point. */
.site-card {
  display: block;
  margin-top: var(--space-xl);
  max-width: 480px;
  border-radius: var(--radius-card);
  background: #0A1420;
  border: 1px solid rgba(0, 240, 255, 0.18);
  overflow: hidden;
  text-decoration: none;
  color: #F0F5FC;
  transition: transform 280ms cubic-bezier(.2,.7,.3,1),
              border-color 200ms ease,
              box-shadow 280ms ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.06);
}
.site-card:hover,
.site-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(0, 240, 255, 0.45);
  box-shadow: 0 4px 10px rgba(0,0,0,.10), 0 16px 36px rgba(0, 240, 255, 0.10);
  outline: none;
}
.site-card-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #060E18;
  border-bottom: 1px solid rgba(0, 240, 255, 0.10);
}
.site-card-dots {
  display: inline-flex;
  gap: 5px;
}
.site-card-dots > span {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.site-card-dots .dot-r { background: #ED6B5F; }
.site-card-dots .dot-y { background: #F4BE4F; }
.site-card-dots .dot-g { background: #61C554; }
.site-card-url {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #6B778A;
  letter-spacing: 0.02em;
  margin-left: 8px;
}
.site-card-frame {
  display: block;
  padding: 16px 18px 14px;
}
.site-card-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 14px;
}
.site-card-logo {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #F0F5FC;
}
.site-card-nav-items {
  display: inline-flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: #6B778A;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-card-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00F0FF;
  margin-bottom: 8px;
}
.site-card-h1 {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: #F0F5FC;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.site-card-h1 em {
  font-style: italic;
  color: #00F0FF;
}
.site-card-tape {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(0, 240, 255, 0.04);
  border: 1px solid rgba(0, 240, 255, 0.12);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: #94A3B8;
  letter-spacing: 0.02em;
}
.site-card-tape .tape-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}
.site-card-tape .tape-mkt { color: #F0F5FC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-card-tape .tape-venue { color: #6B778A; font-size: 8px; letter-spacing: 0.08em; }
.site-card-tape .tape-pct { color: #00F0FF; font-weight: 500; text-align: right; }
.site-card-tape .tape-delta { color: #61C554; text-align: right; }
.site-card-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 18px 14px;
}
.site-card-cta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00F0FF;
  font-weight: 500;
  transition: transform 200ms ease;
}
.site-card:hover .site-card-cta { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .site-card { transition: none; }
  .site-card:hover, .site-card:focus-visible { transform: none; }
  .site-card:hover .site-card-cta { transform: none; }
}

@media (max-width: 479px) {
  .site-card-nav-items { display: none; }
  .site-card-h1 { font-size: 14px; }
}

/* ───── Sections ───── */
.section { padding: var(--space-5xl) var(--space-2xl); border-top: var(--border) solid var(--border-default); position: relative; }
/* Alternating background rhythm so sections read as distinct stacked blocks.
   Per canonical §2.3.1 marketing-surface tinted-background license, alternating
   bands use tint-ambient (warm green-25) instead of bg-surface (cool gray) so
   tinted cards inside the sections sit on matching surfaces. */
.section-what          { background: var(--bg-primary); }
.section-why           { background: var(--tint-ambient); }
.section-surfaces      { background: var(--bg-primary); }
.section-heritage      { background: var(--tint-ambient); }
.section-built         { background: var(--bg-primary); }
.section-first-access  { background: var(--tint-ambient); }
.section-inner { max-width: var(--content-max); margin: 0 auto; }
.section-inner-narrow { max-width: var(--content-narrow); margin: 0 auto; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-xl);
}

.section-h {
  font-family: var(--font-ui);
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 var(--space-3xl) 0;
  max-width: 36ch;
  color: var(--text-primary);
}

/* ───── §2 What ───── */
.what-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-4xl);
  align-items: start;
}
.what-prose p { font-size: 15px; line-height: 1.7; color: var(--text-primary); margin: 0 0 var(--space-lg) 0; max-width: 60ch; }
.what-prose p:last-child { margin-bottom: 0; }
.what-diagram {
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 0;
  background: var(--tint-ambient);
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.unified-book {
  width: 100%;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.ub-eyebrow {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green-700);
  background: var(--tint-eyebrow);
  margin: 0;
  padding: 12px clamp(20px, 2.5vw, 32px);
  border-bottom: 1px solid var(--border-default);
}
.ub-event {
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 var(--space-lg) 0;
  letter-spacing: -0.01em;
  padding: clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 32px) 0;
}
.ub-table {
  width: calc(100% - 2 * clamp(20px, 2.5vw, 32px));
  margin: 0 clamp(20px, 2.5vw, 32px);
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
}
.ub-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-default);
}
.ub-table td {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  padding: 10px 0;
  border-bottom: 1px solid var(--border-default);
}
.ub-table tr:last-child td { border-bottom: none; }
.ub-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ub-gap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-md) clamp(20px, 2.5vw, 32px) clamp(20px, 2.5vw, 32px);
  border-top: 1px solid var(--border-default);
}
.ub-gap-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
}
.ub-gap-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
  min-width: 100px;
}
.ub-gap-value {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.ub-gap-accent { color: var(--green-500); font-size: 16px; }
.ub-gap-foot {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  margin-left: auto;
}

/* ───── §3 Why now ───── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
}
.why-card {
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-2xl);
  background: var(--bg-primary);
  transition: border-color 220ms ease, transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease;
}
.why-card:hover {
  border-color: var(--green-500);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -16px rgba(5, 150, 105, 0.18);
}
.why-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--green-700);
  background: var(--tint-eyebrow);
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: var(--radius-chip);
  margin-bottom: var(--space-lg);
}
.why-card h3 {
  font-size: 16px; font-weight: 500; letter-spacing: -0.005em;
  margin: 0 0 var(--space-md) 0;
}
.why-card p {
  font-size: 13.5px; line-height: 1.7; color: var(--text-secondary);
  margin: 0;
}

/* ───── §4 Surfaces ───── */
.surfaces-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.surface-tile {
  padding: var(--space-2xl);
  border-right: var(--border) solid var(--border-default);
  background: var(--bg-primary);
  transition: background-color 220ms ease, transform 220ms cubic-bezier(.2,.7,.3,1);
  display: flex; flex-direction: column;
  position: relative;
}
.surface-tile:last-child { border-right: none; }
.surface-tile:hover {
  background: var(--tint-eyebrow);
  transform: translateY(-3px);
}
.surface-tile:hover .surface-icon {
  border-color: var(--green-500);
}
.surface-tile:hover h3 {
  color: var(--green-700);
}
.surface-icon {
  width: 40px; height: 40px;
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-chip);
  padding: 4px;
  margin-bottom: var(--space-lg);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 220ms ease;
}
.surface-icon svg { width: 100%; height: 100%; }
.surface-tile h3 {
  font-size: 13px; font-weight: 600; letter-spacing: -0.005em;
  margin: 0 0 var(--space-sm) 0;
  transition: color 220ms ease;
}
.surface-tile p {
  font-size: 12px; line-height: 1.6; color: var(--text-secondary);
  margin: 0;
}
.surfaces-foot {
  margin: var(--space-xl) 0 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}

/* ───── §5 Heritage ───── */
.section-heritage p {
  font-size: 16px; line-height: 1.75; color: var(--text-primary);
  margin: 0 0 var(--space-xl) 0;
}
.section-heritage .heritage-cite {
  border-left: 2px solid var(--green-500);
  padding: var(--space-md) 0 var(--space-md) var(--space-xl);
  margin: var(--space-2xl) 0 0 0;
}
.heritage-cite blockquote {
  margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-secondary);
  font-style: normal;
}
.heritage-cite figcaption {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: var(--space-md);
  letter-spacing: 0.02em;
}

/* ───── §5 Built by (single-column prose) ───── */
.built-boilerplate { font-size: 15px; line-height: 1.7; color: var(--text-primary); margin: 0 0 var(--space-lg) 0; max-width: 70ch; }
.built-cta-line { color: var(--text-secondary); font-size: 14px; max-width: 70ch; margin: 0; }
.built-cta-line a { font-weight: 500; }

/* ───── §6 First access (countdown as section centerpiece) ───── */
.first-access-card {
  position: relative;
  margin-top: var(--space-2xl);
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px);
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--bg-primary);
  overflow: hidden;
}
/* Subtle radial green glow at top — visual consistency with the live ticker */
.first-access-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(5, 150, 105, 0.04), transparent 60%);
  pointer-events: none;
}
.first-access-pulse {
  position: absolute;
  top: 24px; right: 24px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.55);
  animation: live-pulse 2.2s cubic-bezier(.4,0,.6,1) infinite;
  z-index: 2;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(5, 150, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

/* ───── Countdown grid: enlarged for §06 placement ───── */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0;
  position: relative;
  z-index: 1;
}
.countdown-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(22px, 3vw, 36px) 8px;
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-chip);
  background: var(--bg-surface);
  transition: background 200ms ease, border-color 200ms ease;
}
.countdown-num {
  font-family: var(--font-mono);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.countdown-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  margin-top: 14px;
}
.countdown-cell.is-tick {
  background: rgba(5, 150, 105, 0.06);
  border-color: var(--green-500);
}
.countdown.is-elapsed .countdown-num { color: var(--green-500); }

/* ───── §6 First-access supporting copy ───── */
.first-access-lede {
  margin: var(--space-md) 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 60ch;
}
.first-access-card-eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 auto 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-700);
  background: var(--tint-eyebrow);
  padding: 6px 14px;
  border-radius: var(--radius-chip);
  display: table;
  text-align: center;
}
.first-access-card-target {
  position: relative;
  z-index: 1;
  margin: 0 0 var(--space-xl);
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  text-align: center;
}
.first-access-launch-note {
  margin: var(--space-lg) 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  text-align: center;
}
.first-access-launch-note strong {
  color: var(--text-secondary);
  font-weight: 500;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .first-access-pulse { animation: none; }
  .countdown-cell.is-tick { background: var(--bg-surface); border-color: var(--border-default); }
}

/* ───── Footer ───── */
.site-footer {
  border-top: var(--border) solid var(--border-default);
  background: var(--bg-primary);
  padding: var(--space-4xl) var(--space-2xl) var(--space-3xl);
}
.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}
.footer-col h4 {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green-500);
  margin: 0 0 var(--space-lg) 0;
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-col a {
  color: var(--text-secondary);
  font-size: 13px;
  transition: color 120ms ease;
}
.footer-col a:hover { color: var(--text-primary); }
.footer-by {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  margin: var(--space-md) 0 0 0;
  letter-spacing: 0.02em;
}
.footer-tagline {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-tertiary);
  margin: var(--space-sm) 0 0 0;
}

/* ───── Sub-footer (dark strip — frame to match the header) ───── */
.sub-footer {
  background: #0A0A0A;
  padding: 18px var(--space-2xl);
}
.sub-footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.sub-footer .footer-sep { color: rgba(255, 255, 255, 0.18); }

/* ───── Live deficit-style ticker (§2) ───── */
.live-ticker {
  margin: var(--space-2xl) auto var(--space-3xl);
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px);
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--bg-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: 920px;
}
.live-ticker::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(5, 150, 105, 0.04), transparent 60%);
  pointer-events: none;
}
.live-ticker-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-700);
  margin: 0 0 var(--space-lg) 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
  padding: 6px 12px;
  background: var(--tint-eyebrow);
  border-radius: var(--radius-chip);
}
.live-ticker-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.55);
  animation: live-pulse 2.2s cubic-bezier(.4,0,.6,1) infinite;
}
.live-ticker-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 6.4vw, 68px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.05;
  margin: 0 0 var(--space-md) 0;
  position: relative;
  z-index: 1;
  word-break: break-word;
}
.live-ticker-foot {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  margin: 0;
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .live-ticker-pulse { animation: none; }
}

/* ───── Reveal-on-scroll motion ───── */
/* JS adds .reveal to targets and .is-revealed when they enter viewport.
   Sections enter as a sequence: eyebrow slides in from left, then H2 fades up,
   then content rises into place. Each section feels like its own staged moment. */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms cubic-bezier(.2,.7,.3,1), transform 800ms cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Per-section staged entrance: eyebrow → H2 → content, each with its own transition */
.section .eyebrow,
.section .section-h,
.section .what-grid,
.section .why-grid,
.section .surfaces-grid,
.section .surfaces-foot,
.section .heritage-prose,
.section .built-boilerplate,
.section .built-cta-line,
.section .first-access-card,
.section .live-ticker {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(.2,.7,.3,1), transform 700ms cubic-bezier(.2,.7,.3,1);
}
.section .eyebrow {
  transform: translateX(-16px);
  transition: opacity 600ms cubic-bezier(.2,.7,.3,1), transform 600ms cubic-bezier(.2,.7,.3,1);
}
.section.is-revealed .eyebrow         { opacity: 1; transform: translateX(0);   transition-delay: 0ms;   }
.section.is-revealed .section-h       { opacity: 1; transform: translateY(0);   transition-delay: 140ms; }
.section.is-revealed .live-ticker     { opacity: 1; transform: translateY(0);   transition-delay: 240ms; }
.section.is-revealed .what-grid,
.section.is-revealed .why-grid,
.section.is-revealed .surfaces-grid,
.section.is-revealed .surfaces-foot,
.section.is-revealed .heritage-prose,
.section.is-revealed .built-boilerplate,
.section.is-revealed .built-cta-line,
.section.is-revealed .first-access-card { opacity: 1; transform: translateY(0); transition-delay: 280ms; }

/* Stagger why-cards and surface-tiles inside their grids (relative to grid reveal) */
.why-card.reveal { transition-delay: 360ms; }
.why-card.reveal:nth-child(2) { transition-delay: 460ms; }
.why-card.reveal:nth-child(3) { transition-delay: 560ms; }
.surface-tile.reveal { transition-delay: 340ms; }
.surface-tile.reveal:nth-child(2) { transition-delay: 420ms; }
.surface-tile.reveal:nth-child(3) { transition-delay: 500ms; }
.surface-tile.reveal:nth-child(4) { transition-delay: 580ms; }
.surface-tile.reveal:nth-child(5) { transition-delay: 660ms; }

/* Reduced-motion fallback */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .section .eyebrow,
  .section .section-h,
  .section .what-grid,
  .section .why-grid,
  .section .surfaces-grid,
  .section .surfaces-foot,
  .section .heritage-prose,
  .section .built-boilerplate,
  .section .built-cta-line,
  .section .first-access-card,
  .section .live-ticker { opacity: 1; transform: none; transition: none; }
  .why-card:hover, .surface-tile:hover { transform: none; }
}

/* ───── Responsive ───── */
/* Tablet 768-1023px: simplify hero grid */
@media (max-width: 1023px) {
  .site-header { padding: 0 var(--space-xl); }
  .site-nav { gap: var(--space-xl); }
  .section { padding: var(--space-4xl) var(--space-xl); }
  .hero { padding: var(--space-4xl) var(--space-xl) var(--space-3xl); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-3xl); }
  .what-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .surfaces-grid { grid-template-columns: repeat(2, 1fr); }
  .surface-tile { border-right: var(--border) solid var(--border-default); border-bottom: var(--border) solid var(--border-default); }
  .surface-tile:nth-child(2n) { border-right: none; }
  .surface-tile:nth-last-child(-n+1) { border-bottom: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .footer-col-brand { grid-column: 1 / -1; }
}

/* Mobile large 480-767px */
@media (max-width: 767px) {
  .site-nav { display: none; }
  .surfaces-grid { grid-template-columns: 1fr; }
  .surface-tile { border-right: none; }
  .footer-inner { grid-template-columns: 1fr; }
  .countdown-num { font-size: 22px; }
}

/* Mobile <480px */
@media (max-width: 479px) {
  .hero { padding: var(--space-3xl) var(--space-lg) var(--space-2xl); }
  .section { padding: var(--space-3xl) var(--space-lg); }
  .site-header { padding: 0 var(--space-lg); }
  .site-footer { padding: var(--space-3xl) var(--space-lg) var(--space-lg); }
}

/* ───── 404 page ───── */
.notfound-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-3xl);
  text-align: center;
}
.notfound-mark {
  margin-bottom: var(--space-2xl);
}
.notfound-mark img {
  width: clamp(80px, 12vw, 120px);
  height: auto;
}
.notfound-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-tertiary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--space-lg) 0;
}
.notfound-h1 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-md) 0;
}
.notfound-p {
  color: var(--text-secondary);
  margin: 0 0 var(--space-2xl) 0;
}

/* ───── §04 / §05 — narrow column with paper-card aside ─────
   When the paper-card sits next to prose in a narrow section,
   use a 2-col grid with the card hanging on the right. The card
   keeps its resting tilt; the wrapper gives it room to breathe. */
.heritage-row,
.built-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3xl);
  align-items: start;
  margin-top: var(--space-xl);
}
.heritage-row .paper-card,
.built-row .paper-card {
  margin-left: 0; /* override hero-context auto-push */
}

/* Tablet and below: stack prose over card, card centered */
@media (max-width: 1023px) {
  .heritage-row,
  .built-row {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .heritage-row .paper-card,
  .built-row .paper-card {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ───── Article page — methodology note / research note ─────
   Used by /blog/signal-noise-instrument/. Mirrors the predictivelabs.io
   research-page presentation: eyebrow, title, italic subtitle, byline meta,
   contents nav, sectioned body with anchored H2s, back-to-home footer.
   Light-first, narrow column, generous line-height for long-form reading. */
.article-main {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-5xl) var(--space-2xl) var(--space-4xl);
}

.article-header {
  margin-bottom: var(--space-3xl);
  padding-bottom: var(--space-2xl);
  border-bottom: var(--border) solid var(--border-default);
}

.article-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-lg);
}

.article-title {
  font-family: var(--font-ui);
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
  max-width: 28ch;
}

.article-subtitle {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--space-xl) 0;
  max-width: 50ch;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.article-meta-item { white-space: nowrap; }
.article-meta-sep  { color: rgba(0, 0, 0, 0.18); }

/* Contents block: numbered anchor list */
.article-contents {
  background: var(--bg-surface);
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-xl) var(--space-2xl);
  margin-bottom: var(--space-3xl);
}
.article-contents-h {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  margin: 0 0 var(--space-md) 0;
}
.article-contents ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.article-contents a {
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  padding: 4px 0;
  transition: color 120ms ease;
}
.article-contents a:hover { color: var(--green-500); }

/* Body */
.article-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-primary);
}
.article-body p {
  margin: 0 0 var(--space-xl) 0;
}
.article-body p:last-child { margin-bottom: 0; }

.article-lede {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-primary);
  font-weight: 400;
}

.article-coda {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-primary);
}

.article-rule {
  border: 0;
  border-top: var(--border) solid var(--border-default);
  margin: var(--space-3xl) 0;
}

.article-h2 {
  font-family: var(--font-ui);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-primary);
  margin: var(--space-3xl) 0 var(--space-xl) 0;
  scroll-margin-top: calc(var(--nav-height) + 16px);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
}
.article-h2-num {
  font-family: var(--font-mono);
  font-size: 0.55em;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.article-formula {
  font-family: var(--font-mono);
  font-size: 17px;
  text-align: center;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  padding: var(--space-xl) var(--space-lg);
  margin: var(--space-2xl) 0;
  border-top: var(--border) solid var(--border-default);
  border-bottom: var(--border) solid var(--border-default);
  background: var(--bg-surface);
}
.article-formula sub {
  font-size: 0.74em;
  vertical-align: -0.18em;
}

.article-body em {
  font-style: italic;
  color: var(--text-primary);
}

/* Footer (back link) */
.article-footer {
  margin-top: var(--space-4xl);
  padding-top: var(--space-2xl);
  border-top: var(--border) solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.article-back {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--green-500);
  transition: color 120ms ease, transform 200ms ease;
  display: inline-block;
}
.article-back:hover { color: var(--green-600); transform: translateX(-2px); }
.article-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 767px) {
  .article-main { padding: var(--space-4xl) var(--space-xl) var(--space-3xl); }
  .article-contents { padding: var(--space-lg) var(--space-xl); }
  .article-body { font-size: 16px; }
  .article-lede { font-size: 17px; }
  .article-formula { font-size: 15px; padding: var(--space-lg) var(--space-md); }
  .article-h2 { gap: var(--space-sm); }
}

@media (max-width: 479px) {
  .article-main { padding: var(--space-3xl) var(--space-lg) var(--space-2xl); }
}

/* ───── Generic page shell (narrow text-heavy pages) ─────
   Used by /access, /contact, /privacy, /blog/ (index), /press-kit text portions.
   Mirrors article-main but renamed to be generic. */
.page-main {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-5xl) var(--space-2xl) var(--space-4xl);
}
.page-header {
  margin-bottom: var(--space-3xl);
  padding-bottom: var(--space-2xl);
  border-bottom: var(--border) solid var(--border-default);
}
.page-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-lg);
}
.page-title {
  font-family: var(--font-ui);
  font-size: clamp(28px, 4.4vw, 42px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
  max-width: 28ch;
}
.page-subtitle {
  font-family: var(--font-ui);
  font-style: italic;
  font-size: clamp(16px, 1.8vw, 19px);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  max-width: 50ch;
}
.page-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-primary);
}
.page-body p { margin: 0 0 var(--space-xl) 0; max-width: 64ch; }
.page-body p:last-child { margin-bottom: 0; }
.page-body h2 {
  font-family: var(--font-ui);
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: var(--space-3xl) 0 var(--space-lg) 0;
  scroll-margin-top: calc(var(--nav-height) + 16px);
}
.page-body strong { font-weight: 600; }

@media (max-width: 767px) {
  .page-main { padding: var(--space-4xl) var(--space-xl) var(--space-3xl); }
  .page-body { font-size: 15px; }
}
@media (max-width: 479px) {
  .page-main { padding: var(--space-3xl) var(--space-lg) var(--space-2xl); }
}

/* ───── /surfaces — wide page, 5 deep sections ───── */
.surfaces-page-main {
  padding: 0;
}
/* Hero band */
.surfaces-hero {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5xl) var(--space-2xl) var(--space-4xl);
}
.surfaces-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-lg);
}
.surfaces-hero-title {
  font-family: var(--font-ui);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0 0 var(--space-lg) 0;
  max-width: 22ch;
}
.surfaces-hero-lede {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0 0 var(--space-2xl) 0;
}
.surfaces-hero-toc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: var(--border) solid var(--border-default);
}
.surfaces-hero-toc a {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  padding: var(--space-md) 0;
  border-bottom: var(--border) solid transparent;
  transition: color 120ms ease, border-color 200ms ease;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.surfaces-hero-toc a:hover { color: var(--green-500); border-bottom-color: var(--green-500); }
.surfaces-hero-toc-num {
  color: var(--text-tertiary);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* Surface deep section */
.surface-deep {
  border-top: var(--border) solid var(--border-default);
  padding: var(--space-5xl) var(--space-2xl);
  scroll-margin-top: var(--nav-height);
}
.surface-deep:nth-child(odd)  { background: var(--bg-primary); }
.surface-deep:nth-child(even) { background: var(--tint-ambient); }
.surface-deep-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-4xl);
  align-items: start;
}
.surface-deep-num {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: var(--space-md);
}
.surface-deep-title {
  font-family: var(--font-ui);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 var(--space-xl) 0;
  color: var(--text-primary);
}
.surface-deep-prose p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-primary);
  margin: 0 0 var(--space-lg) 0;
  max-width: 60ch;
}
.surface-deep-prose p:last-child { margin-bottom: 0; }
.surface-deep-prose strong { font-weight: 600; }
.surface-deep-prose em { font-style: italic; color: var(--text-primary); }

/* Right-column metric panel */
.surface-metric-card {
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 0;
  background: var(--tint-ambient);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.surface-metric-eyebrow {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-700);
  background: var(--tint-eyebrow);
  margin: 0;
  padding: 12px clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid var(--border-default);
}
.surface-metric-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: clamp(20px, 2.5vw, 28px);
  list-style: none;
}
.surface-metric-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--border-default);
  font-size: 12px;
}
.surface-metric-list li:last-child { border-bottom: none; }
.surface-metric-label {
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.surface-metric-value {
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.surface-metric-value.is-accent { color: var(--green-500); }

@media (max-width: 1023px) {
  .surface-deep-inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .surface-deep { padding: var(--space-4xl) var(--space-xl); }
  .surfaces-hero { padding: var(--space-4xl) var(--space-xl) var(--space-3xl); }
}
@media (max-width: 479px) {
  .surface-deep { padding: var(--space-3xl) var(--space-lg); }
  .surfaces-hero { padding: var(--space-3xl) var(--space-lg) var(--space-2xl); }
}

/* ───── /access — waitlist form ───── */
.access-card {
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--bg-primary);
  padding: clamp(28px, 4vw, 48px);
  margin-top: var(--space-2xl);
  position: relative;
  overflow: hidden;
}
.access-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(5, 150, 105, 0.04), transparent 60%);
  pointer-events: none;
}
.access-card-inner { position: relative; z-index: 1; }

.access-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.access-form-row { display: flex; flex-direction: column; gap: 6px; }
.access-form-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}
.access-form-label.is-required::after {
  content: ' *';
  color: var(--green-500);
}
.access-form-input,
.access-form-select,
.access-form-textarea {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-chip);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.access-form-textarea {
  font-family: var(--font-ui);
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}
.access-form-input:focus,
.access-form-select:focus,
.access-form-textarea:focus {
  outline: none;
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
}
.access-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%239CA3AF' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 36px;
}
.access-form-help {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.5;
}
.access-form-honeypot {
  position: absolute;
  left: -9999px;
  visibility: hidden;
}
.access-form-submit {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  background: var(--green-500);
  border: 1px solid var(--green-500);
  border-radius: var(--radius-chip);
  padding: 14px 24px;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
  letter-spacing: 0.01em;
  margin-top: var(--space-md);
}
.access-form-submit:hover {
  background: var(--green-600);
  border-color: var(--green-600);
  transform: translateY(-1px);
}
.access-form-foot {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.6;
  margin-top: var(--space-md);
}
.access-form-foot a { color: var(--text-secondary); border-bottom: 1px dotted var(--border-default); }
.access-form-foot a:hover { color: var(--green-500); border-bottom-color: var(--green-500); }

.access-countdown-mini {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
  padding: var(--space-lg) 0;
  border-top: var(--border) solid var(--border-default);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.access-countdown-mini-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
}
.access-countdown-mini-val {
  font-size: 14px;
  color: var(--text-primary);
}

/* ───── /press-kit — asset surface ───── */
.press-kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.press-asset-card {
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--bg-primary);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.press-asset-preview {
  background: var(--bg-surface);
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-chip);
  padding: var(--space-lg);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.press-asset-preview.is-dark {
  background: #0A0A0A;
  border-color: rgba(255, 255, 255, 0.1);
}
.press-asset-preview img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.press-asset-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}
.press-asset-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}
.press-asset-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: auto;
  padding-top: var(--space-sm);
}
.press-asset-link {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--green-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.press-asset-link:hover { color: var(--green-600); }
.press-asset-pending {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}

.press-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.press-color-chip {
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.press-color-swatch {
  height: 80px;
  width: 100%;
}
.press-color-meta {
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: 12px;
}
.press-color-name {
  color: var(--text-primary);
  font-weight: 500;
  margin: 0 0 4px 0;
}
.press-color-hex {
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  margin: 0;
}

.press-fact-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--space-xl);
  border-top: var(--border) solid var(--border-default);
}
.press-fact-list li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  border-bottom: var(--border) solid var(--border-default);
  font-size: 14px;
}
.press-fact-key {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-tertiary);
}
.press-fact-val { color: var(--text-primary); line-height: 1.5; }

@media (max-width: 767px) {
  .press-fact-list li { grid-template-columns: 1fr; gap: 4px; padding: var(--space-md) 0; }
}

/* ───── /contact — routed addresses ───── */
.contact-routes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.contact-route {
  border: var(--border) solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  background: var(--tint-ambient);
  transition: border-color 200ms ease, background 200ms ease;
  display: block;
  color: var(--text-primary);
}
.contact-route:hover { border-color: var(--green-500); color: var(--text-primary); background: var(--tint-eyebrow); }
.contact-route-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--green-700);
  margin: 0 0 var(--space-sm) 0;
}
.contact-route-addr {
  font-family: var(--font-mono);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 500;
  color: var(--green-500);
  margin: 0 0 var(--space-sm) 0;
  letter-spacing: -0.005em;
}
.contact-route-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
}
.contact-corporate {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: var(--border) solid var(--border-default);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ───── /blog (index) ───── */
.blog-list {
  margin-top: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.blog-post-link {
  display: block;
  padding: var(--space-2xl) 0;
  border-bottom: var(--border) solid var(--border-default);
  color: var(--text-primary);
  transition: padding 200ms ease;
}
.blog-post-link:first-child { padding-top: 0; }
.blog-post-link:hover { color: var(--text-primary); padding-left: var(--space-md); }
.blog-post-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  display: flex;
  gap: var(--space-md);
  margin: 0 0 var(--space-sm) 0;
}
.blog-post-title {
  font-family: var(--font-ui);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 var(--space-md) 0;
}
.blog-post-link:hover .blog-post-title { color: var(--green-500); }
.blog-post-blurb {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
  max-width: 60ch;
}
.blog-empty {
  padding: var(--space-2xl) 0;
  border-top: var(--border) solid var(--border-default);
  color: var(--text-tertiary);
  font-size: 14px;
  font-style: italic;
}

/* ───── Surfaces section CTA on home ───── */
.surfaces-foot-cta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--green-500);
  margin-top: var(--space-2xl);
  transition: color 120ms ease, transform 200ms ease;
}
.surfaces-foot-cta:hover { color: var(--green-600); transform: translateX(2px); }
.surfaces-foot-cta-arrow { font-family: var(--font-mono); }

/* Per-tile inline 'Read more' */
.surface-tile-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-500);
  margin-top: var(--space-md);
  transition: color 120ms ease;
}
.surface-tile-link:hover { color: var(--green-600); }

/* Surfaces foot wrapper */
.surfaces-foot {
  margin-top: var(--space-2xl);
}

/* ───── 404 alternative routes line ───── */
.notfound-alt {
  margin-top: var(--space-2xl);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
}
.notfound-alt a {
  color: var(--text-secondary);
  border-bottom: 1px dotted var(--border-default);
  padding-bottom: 1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.notfound-alt a:hover {
  color: var(--green-500);
  border-bottom-color: var(--green-500);
}

/* ───── /press additions: section label + asset preview tweaks ───── */
.press-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-tertiary);
  margin: var(--space-2xl) 0 var(--space-md) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-subtle);
}

/* Bump preview height so 3:1 wordmark plates render at a useful size,
   and let square marks scale equally. Plates ship with built-in white
   or black canvas, so wrapper bg needs to match to avoid edge mismatch. */
.press-asset-preview {
  min-height: 160px;
  background: #FFFFFF;
  padding: 0;
  overflow: hidden;
}
.press-asset-preview.is-dark {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.08);
}
.press-asset-preview img {
  max-height: 160px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Square cropped mark needs different sizing */
.press-mark-square {
  max-height: 130px !important;
  max-width: 130px !important;
}