/* =========================================================
   REX EDGE — Design System
   Palette: pure black, off-white text at two opacities,
   one restrained steel-blue accent for centerpiece imagery only.
   Type: Inter Tight (headings, weight 300) + Inter (body).
   ========================================================= */

:root {
  --bg: #000000;
  --fg: rgb(237, 237, 238);
  --fg-dim: rgba(237, 237, 238, 0.62);
  --fg-mute: rgba(237, 237, 238, 0.38);
  --fg-faint: rgba(237, 237, 238, 0.14);
  --hairline: rgba(237, 237, 238, 0.14);
  --accent: #2EC4FF;   /* signal cyan-blue — the seal color; used sparingly */

  --font-heading: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Fluid type scale */
  --text-xs: clamp(11px, 0.72vw, 12px);
  --text-sm: clamp(13px, 0.9vw, 14px);
  --text-base: clamp(15px, 1.05vw, 17px);
  --text-lg: clamp(18px, 1.4vw, 22px);
  --text-xl: clamp(28px, 3vw, 44px);
  --text-2xl: clamp(40px, 5vw, 72px);
  --text-hero: clamp(44px, 5.8vw, 88px);

  /* Layout */
  --gutter: clamp(24px, 4vw, 64px);
  --max-w: 1440px;
}

/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Selection */
::selection { background: rgba(46, 196, 255, 0.4); color: #fff; }

/* ---------- Utilities ---------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.kicker--bracket::before { content: '[ '; color: var(--fg-mute); }
.kicker--bracket::after { content: ' ]'; color: var(--fg-mute); }
/* Mixed-case kicker variant: preserves whatever casing is in the markup.
   Slightly tighter tracking than the caps variant so mixed-case reads with
   the same visual density. */
.kicker--mixed { text-transform: none; letter-spacing: 0.06em; }

.h-display {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--text-hero);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0;
}
.h-section {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--text-2xl);
  line-height: 1.05;
  letter-spacing: -0.024em;
  margin: 0;
}
.h-sub {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--text-xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
.body-lg { font-size: var(--text-lg); line-height: 1.45; color: var(--fg); }
.dim { color: var(--fg-dim); }
.mute { color: var(--fg-mute); }

/* Two-tier emphasis — bright first line, dimmed rest */
.emphasis .lead { color: var(--fg); }
.emphasis .tail { color: var(--fg-dim); }

/* Ghost links */
.ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--fg);
  padding: 8px 0;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}
.ghost .chev { color: var(--fg-mute); transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
.ghost:hover { color: var(--fg); }
.ghost:hover .chev { transform: translateX(4px); color: var(--fg); }

/* Pill CTA — primary hero action.
   Fully rounded, hairline cyan border, subtle cyan-tinted fill. Reads as the
   emphasized action next to .ghost links. On hover the fill saturates and the
   text/chev shift to near-black for contrast against the accent. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  color: var(--fg);
  padding: 10px 20px;
  border: 1px solid rgba(46, 196, 255, 0.55);
  background: rgba(46, 196, 255, 0.08);
  border-radius: 999px;              /* fully rounded pill */
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    transform 0.3s var(--ease);
  white-space: nowrap;
}
.pill .chev {
  color: var(--accent);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.pill:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #071018;
}
.pill:hover .chev {
  transform: translateX(4px);
  color: #071018;
}

/* Hairline lists — the workhorse */
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li {
  display: grid;
  grid-template-columns: minmax(80px, 120px) 1fr;
  align-items: baseline;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(18px, 2.2vw, 28px) 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-lg);
  color: var(--fg-dim);
  transition: color 0.6s var(--ease);
}
.rows > li:last-child { border-bottom: 1px solid var(--hairline); }
.rows > li .row-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  transition: color 0.6s var(--ease);
}
.rows > li.active { color: var(--fg); }
/* Active ladder tier: amber label to color-match the amber active ring
   on the radar canvas. Reads as "L2 label lights up amber -> L2 ring
   on the right lights up amber." Direct wiring between the two panels. */
.rows > li.active .row-label { color: #FFD970; }

/* Sparse dot-grid background (hero + contact bookends).
   Signal-cyan dots at a mid alpha — visible without competing with copy.
   A canvas layer on top randomly spikes individual dots to full brightness
   with a halo, then decays — reads as grid asset alerts / current spikes. */
.dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(46, 196, 255, 0.22) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9), transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9), transparent 75%);
  pointer-events: none;
}
.dot-grid canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .dot-grid canvas { display: none; }
}

/* ---------- Nav ----------
   Transparent at rest. On scroll gains a dark-to-invisible gradient backdrop
   with a blurred layer masked to the same gradient, so both the tint and the
   blur fade to nothing at the bottom edge — no hard cutoff line.
   Wordmark retracts left on scroll and returns when the user is back at the top. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  overflow: visible;
  height: 72px; /* fixed so ::before / ::after have a size to fill */
  box-sizing: border-box;
}
/* Gradient tint layer — fades in on scroll. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
/* Blur layer — backdrop-filter clipped by a matching gradient mask so the blur
   itself fades out at the bottom (no hard edge). Fades in on scroll. */
.nav::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.nav.scrolled::before,
.nav.scrolled::after { opacity: 1; }

/* Brand — bigger than before. Diamond glyph + retractable wordmark. */
.nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--fg);
  height: 28px;
  position: relative;
  z-index: 1; /* above ::before gradient */
}
.nav .brand-mark {
  height: 28px;
  width: 28px;
  flex-shrink: 0;
}
.nav .brand-word {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0.22em;
  color: currentColor;
  white-space: nowrap;
  transform-origin: left center;
  transition: transform 0.45s var(--ease), opacity 0.35s var(--ease);
  display: inline-flex;
  align-items: baseline;
}
/* Three-weight wordmark: REX bold, / thin, EDGE regular. All caps.
   REX and EDGE share the same 0.18em tracking; the slash sits with equal
   optical gutters on both sides (both derived from the caps' letter-spacing
   plus a small explicit boost so the '/' has real room to breathe). */
.nav .brand-word .bw-rex {
  font-weight: 700;
  letter-spacing: 0.18em;
}
.nav .brand-word .bw-slash {
  font-weight: 300;
  /* Left gap comes from REX's trailing letter-spacing (0.18em) plus this
     extra bump; right gap matches with the same margin so both sides are
     optically equal. */
  margin-left: 0.14em;
  margin-right: 0.32em;
  opacity: 0.7;
  letter-spacing: 0;
}
.nav .brand-word .bw-edge {
  font-weight: 400;
  letter-spacing: 0.18em;
}
/* On scroll: wordmark retracts to the left and fades out.
   At scroll-top: it slides back in from the left and re-appears.
   At footer: it re-reveals (closing / return-to-brand gesture) even though
   the page is still scrolled far past the top. `.at-footer` wins over
   `.scrolled` here because it appears second in the cascade with equal
   specificity, so the wordmark slides back into view. */
.nav.scrolled .brand-word {
  transform: translateX(-14px);
  opacity: 0;
  pointer-events: none;
}
.nav.at-footer .brand-word {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.nav .links { position: relative; z-index: 1; }

/* Sealed Diamond seal-dot: subtle pulse to imply a decision being made.
   Never fully off; opacity oscillates between ~0.55 and 1 so the mark
   still reads as a solid dot in a screenshot. */
@keyframes brand-seal-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.brand-seal {
  animation: brand-seal-pulse 3.2s ease-in-out infinite;
  transform-origin: 12px 12px;
}
@media (prefers-reduced-motion: reduce) {
  .brand-seal { animation: none; opacity: 1; }
}
.nav .links { display: flex; gap: clamp(20px, 3vw, 40px); flex-wrap: nowrap; align-items: center; }
.nav .links a { font-size: var(--text-sm); color: var(--fg-dim); letter-spacing: 0.02em; transition: color 0.3s var(--ease); white-space: nowrap; }
.nav .links a:hover { color: var(--fg); }
@media (max-width: 640px) {
  /* Under 640px only show Contact so the nav does not wrap. */
  .nav .links a:not([href='#contact']) { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px var(--gutter) 80px;
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 2; }
/* Hero dot field is a taller section than contact, so the shared 0.22 alpha
   and 75% mask read visibly dimmer against the display type. Nudge alpha up
   a touch and tighten the mask so the hero and contact fields feel matched. */
.hero .dot-grid {
  background-image: radial-gradient(circle at 1px 1px, rgba(46, 196, 255, 0.28) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.95), transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.95), transparent 68%);
}

/* Hero corner burst.
   A large cyan (#2EC4FF) radial glow anchored just off-canvas at the top-right
   corner, partially clipped by the section overflow. Three layered gradients:
   a hot small core, a bright mid halo, and a wide soft bloom. `screen` blend
   preserves the dot-grid particle field underneath. z-index sits between the
   dot-grid (0) and the wrap content (2). */
.hero .hero-burst {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  /* Fade the burst to fully transparent before the hero section ends, so the
     glow doesn't cut hard against the next section's solid black background.
     Also feather the top slightly so there's no seam against the nav band. */
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 12%,
    #000 62%,
    transparent 92%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 12%,
    #000 62%,
    transparent 92%
  );
  background-image:
    /* Hot core — near-white cyan center, sharp and bright, vertically centered */
    radial-gradient(
      circle 220px at 100% 50%,
      rgba(190, 240, 255, 0.85) 0%,
      rgba(124, 220, 255, 0.55) 30%,
      rgba(46, 196, 255, 0.00) 100%
    ),
    /* Mid halo — saturated cyan, centered on the right edge */
    radial-gradient(
      ellipse 60% 70% at 108% 50%,
      rgba(46, 196, 255, 0.55) 0%,
      rgba(46, 196, 255, 0.28) 25%,
      rgba(46, 196, 255, 0.08) 55%,
      rgba(46, 196, 255, 0.00) 80%
    ),
    /* Wide bloom — broad soft sweep radiating from the right edge midline */
    radial-gradient(
      ellipse 100% 130% at 115% 50%,
      rgba(46, 196, 255, 0.32) 0%,
      rgba(46, 196, 255, 0.14) 35%,
      rgba(46, 196, 255, 0.04) 65%,
      rgba(46, 196, 255, 0.00) 90%
    );
  background-repeat: no-repeat;
}

/* On narrow screens the burst becomes overpowering; pull it further off and
   dim it so the type stays the focal point. */
@media (max-width: 720px) {
  .hero .hero-burst {
    background-image:
      radial-gradient(
        circle at 110% 50%,
        rgba(140, 226, 255, 0.35) 0%,
        rgba(46, 196, 255, 0.20) 15%,
        rgba(46, 196, 255, 0.00) 45%
      );
  }
}

/* Respect reduced motion: the burst is static, so it stays; nothing to do. */
.hero .kicker { margin-bottom: clamp(24px, 4vh, 40px); }
/* .hero .h-display max-width defined below with section-head rules */
.hero .actions {
  margin-top: clamp(32px, 5vh, 56px);
  display: flex;
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}
.hero .divider-bar {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 48px;
  border-top: 1px solid var(--hairline);
  padding-top: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ---------- Section spacing ---------- */
section {
  position: relative;
  padding: clamp(96px, 14vh, 180px) 0;
}
section .wrap { position: relative; z-index: 2; }
.section-head {
  margin-bottom: clamp(40px, 6vh, 72px);
  max-width: min(920px, 100%);
}
.section-head .kicker { display: block; margin-bottom: 18px; }
.section-head .h-section { max-width: 28ch; }
.hero .h-display { max-width: 20ch; }

/* Two-column grid used in a few places */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 80px);
}
@media (min-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------- Why deterministic — 3-col grid ---------- */
.tri {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 800px) {
  .tri { grid-template-columns: repeat(3, 1fr); }
}
.tri > div {
  padding: clamp(28px, 4vw, 48px);
  border-right: 1px solid var(--hairline);
}
.tri > div:last-child { border-right: 0; }
@media (max-width: 799px) {
  .tri > div { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .tri > div:last-child { border-bottom: 0; }
}
.tri .tri-label {
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 16px;
}
.tri h3 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.tri p { margin: 0; font-size: var(--text-base); color: var(--fg-dim); }

/* ---------- Sense · Decide · Prove ---------- */
.spd {
  display: grid;
  gap: clamp(56px, 8vh, 96px);
}
.spd-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.4vw, 40px);
  padding-top: clamp(32px, 5vh, 56px);
  border-top: 1px solid var(--hairline);
}
@media (min-width: 900px) {
  .spd-item { grid-template-columns: 200px 1fr; }
}
.spd-item h3 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  margin: 0;
}
.spd-item p {
  margin: 0;
  color: var(--fg-dim);
  font-size: var(--text-lg);
  line-height: 1.45;
  max-width: 60ch;
}

/* ---------- Rule-break tagline ---------- */
.tagline {
  padding: clamp(120px, 22vh, 240px) 0;
  text-align: right;
}
.tagline .wrap { position: relative; }
.tagline h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 128px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0;
  color: var(--fg);
}
.tagline h2 .accent { color: var(--fg-dim); }

/* ---------- CENTERPIECE #1: Interval + Reliability Ladder ---------- */
/* Section is 600vh: 100vh sticky holds through 500vh of scroll.
   Tier index computed inside app.js against actual sticky travel. */
.piece {
  height: 600vh;
  position: relative;
}
.piece--replay { height: 340vh; }

.piece-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
@media (min-width: 900px) {
  .piece-sticky { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.piece-panel {
  padding: clamp(64px, 8vh, 84px) var(--gutter) clamp(32px, 4vh, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.5vh, 20px);
  z-index: 2;
  min-height: 0;
}
.piece-panel .kicker { margin-bottom: 0; }
.piece-panel h2 { margin: 0; max-width: 16ch; }
.piece-panel .body-lg { margin: 0 !important; }
/* Compress ladder rows inside piece panels so all 5 fit */
.piece-panel .rows { margin-top: 0 !important; }
.piece-panel .rows > li {
  padding: clamp(8px, 1.2vw, 14px) 0;
  font-size: var(--text-base);
  grid-template-columns: 44px 1fr;
  gap: 16px;
}
.piece-stage {
  position: relative;
  height: 100%;
  min-height: 320px;
  border-left: 1px solid var(--hairline);
}
@media (max-width: 899px) {
  .piece-stage { border-left: 0; border-top: 1px solid var(--hairline); min-height: 50vh; }
  /* Give the panel top padding so heading clears the fixed nav on mobile. */
  .piece-panel { padding-top: 88px; justify-content: flex-start; overflow-y: auto; }
}

/* Canvas fills the stage */
.piece-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Callout inside the stage */
.stage-callout {
  position: absolute;
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(20px, 3vw, 40px);
  text-align: right;
  z-index: 3;
  pointer-events: none;
}
.stage-callout .val {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg);
}
.stage-callout .lbl {
  margin-top: 8px;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* Split callouts for Replay piece.
   In this piece the .val is a small monospace-styled progress/signature label,
   not a display value. Put .lbl above the .val for cleaner two-line stacking.
   Positioned close under the paired traces (which end around 66% of canvas
   height) so the animated text sits inside the fold instead of hugging the
   bottom edge. */
.stage-callout--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  text-align: left;
  right: clamp(20px, 3vw, 40px);
  left: clamp(20px, 3vw, 40px);
  bottom: clamp(48px, 8vh, 96px);
}
.stage-callout--split .val {
  font-family: var(--font-mono, ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace);
  font-weight: 400;
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--fg);
  margin-top: 4px;
  min-height: 1.2em;
}
.stage-callout--split .val.is-sig { color: var(--accent, #2EC4FF); }
.stage-callout--split .val.is-idle { color: var(--fg-mute); }
.stage-callout--split .lbl {
  margin-top: 0;
}

/* ---------- Built for — horizontal use-case carousel ----------
   Cards live in an overflow-x scroll track with CSS scroll-snap.
   Left/right buttons scroll by one card-width at a time and loop
   (JS wraps to the other end when past the last / before the first). */

/* Scoped heading break: force lead and tail onto their own lines,
   guaranteeing the tail sits on line 2 as a single unit regardless
   of viewport width. Applied to any section-head marked stack-title. */
.stack-title .h-section .lead,
.built-head .h-section .lead { display: block; }
.stack-title .h-section .tail,
.built-head .h-section .tail { display: block; }

.built-carousel {
  position: relative;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.built-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.built-track::-webkit-scrollbar { display: none; }

/* Card widths per breakpoint — 3 up on wide, 2 up on mid, 1 up on narrow.
   3-up gives each image ~40% more real estate than 4-up while still keeping
   enough offscreen cards (7 total − 3 visible = 4 scroll positions) for the
   carousel to read as a carousel. */
@media (min-width: 700px) {
  .built-track { grid-auto-columns: 50%; }
}
@media (min-width: 1100px) {
  .built-track { grid-auto-columns: 33.3333%; }
}

.built-card {
  scroll-snap-align: start;
  padding: clamp(28px, 3.5vw, 44px);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 320px;
  transition: border-color 260ms ease;
}
.built-card:last-child { border-right: 0; }

/* Hide the two edge grid lines at any scroll position:
   - data-hide-right = 1-indexed nth-child of the rightmost-visible card
     (its border-right dangles into the ')/' nav void)
   - data-hide-offleft = 1-indexed nth-child of the card just off-screen left
     (its border-right bleeds onto the visible left edge)
   Both are updated live by the carousel JS on every scroll. */
.built-carousel[data-hide-right="1"]  .built-card:nth-child(1),
.built-carousel[data-hide-right="2"]  .built-card:nth-child(2),
.built-carousel[data-hide-right="3"]  .built-card:nth-child(3),
.built-carousel[data-hide-right="4"]  .built-card:nth-child(4),
.built-carousel[data-hide-right="5"]  .built-card:nth-child(5),
.built-carousel[data-hide-right="6"]  .built-card:nth-child(6),
.built-carousel[data-hide-right="7"]  .built-card:nth-child(7),
.built-carousel[data-hide-offleft="1"] .built-card:nth-child(1),
.built-carousel[data-hide-offleft="2"] .built-card:nth-child(2),
.built-carousel[data-hide-offleft="3"] .built-card:nth-child(3),
.built-carousel[data-hide-offleft="4"] .built-card:nth-child(4),
.built-carousel[data-hide-offleft="5"] .built-card:nth-child(5),
.built-carousel[data-hide-offleft="6"] .built-card:nth-child(6),
.built-carousel[data-hide-offleft="7"] .built-card:nth-child(7) {
  border-right-color: transparent;
}

/* Photo frame — hosts the transparent-BG product renders above card copy.
   Renders fill the frame edge-to-edge (no padding compressing detail).
   A subtle cyan accent line beneath acts as a visual ground plane. */
.built-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: clamp(20px, 2.5vw, 28px);
  overflow: hidden;
}
.built-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  transition: transform 320ms ease, filter 320ms ease;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
}
.built-card:hover .built-photo img {
  transform: scale(1.04);
  filter: drop-shadow(0 14px 32px rgba(46, 196, 255, 0.22));
}
/* Subtle accent floor — gives the subject a base plane without a hard frame. */
.built-photo::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 4%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(46, 196, 255, 0.28), transparent);
  opacity: 0.6;
}

.built-card .built-num {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: var(--fg-mute);
  margin-bottom: 12px;
}
.built-card h3 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.built-card p {
  margin: 0;
  color: var(--fg-dim);
  font-size: var(--text-sm);
}

/* Nav buttons — floating over the outer edges of the track. */
.built-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(10, 10, 12, 0.82);
  border: 1px solid var(--hairline);
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.built-nav svg { width: 20px; height: 20px; }
.built-nav:hover {
  background: rgba(46, 196, 255, 0.14);
  border-color: rgba(46, 196, 255, 0.55);
  color: var(--accent);
}
.built-nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.built-nav--prev { left: -22px; }
.built-nav--next { right: -22px; }

@media (max-width: 899px) {
  .built-nav { width: 40px; height: 40px; }
  .built-nav--prev { left: 8px; }
  .built-nav--next { right: 8px; }
}

/* ---------- Contact + Footer ---------- */
.contact {
  position: relative;
  padding: clamp(140px, 22vh, 240px) 0 clamp(96px, 14vh, 140px);
  overflow: hidden;
}
.contact h2 { max-width: 18ch; margin-bottom: clamp(32px, 5vh, 48px); }
.contact .contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: var(--fg);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 6px;
  transition: border-color 0.3s var(--ease);
}
.contact .contact-link:hover { border-color: var(--fg); }

/* Three-section footer: copyright left, seal centered, provenance right.
   Grid ensures the center column is precisely centered on the page axis
   regardless of the left/right text lengths. */
.footer {
  padding: 40px var(--gutter);
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  font-size: var(--text-xs);
  color: var(--fg-mute);
  letter-spacing: 0.06em;
}
.footer-left { justify-self: start; text-align: left; }
.footer-center { justify-self: center; display: inline-flex; align-items: center; }
.footer-right { justify-self: end; text-align: right; }
.footer-mark {
  height: 18px;
  width: 18px;
  color: var(--fg-mute);
  opacity: 0.85;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.footer-mark:hover { color: var(--fg-dim); opacity: 1; }

/* On narrow screens, stack the three sections centered for readability. */
@media (max-width: 640px) {
  .footer {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }
  .footer-left, .footer-right { justify-self: center; text-align: center; }
}

/* ---------- Trademark superscript ---------- */
.tm {
  font-size: 0.55em;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 1px;
  color: var(--fg-mute);
}

/* ---------- Hero sub-line ---------- */
.hero-sub {
  margin: clamp(20px, 3vh, 32px) 0 0;
  max-width: 56ch;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--fg-dim);
}

/* ---------- Section lede + close (prose bumper paragraphs) ---------- */
.section-lede {
  margin: clamp(20px, 3vh, 28px) 0 0;
  max-width: 62ch;
  font-size: var(--text-lg);
  line-height: 1.5;
}
.section-lede em { font-style: italic; color: var(--fg); }
.section-close {
  /* Flush-right against the parent .wrap so the block aligns with the right
     edge of the call-board grid above it. `margin-left: auto` pushes the
     capped-width block to the right; text-align keeps the ragged edge on the
     left where it visually pairs with the last grid column. */
  margin: clamp(32px, 5vh, 56px) 0 0 auto;
  max-width: 62ch;
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--fg-dim);
  text-align: right;
}

/* ---------- Call-board (3x3 analog decision matrix) ----------
   A grid of hairline-bordered cells reading like a control-room
   panel. Cells glow softly at random intervals (JS-driven) to
   suggest constant decisions being made in the background. */
.call-board {
  margin-top: clamp(48px, 6vh, 72px);
  margin-bottom: clamp(48px, 6vh, 72px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Hairlines between cells come from cell borders below;
     an outer border completes the frame. */
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  background: transparent;
  isolation: isolate;
}
.call-cell {
  position: relative;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2vw, 28px);
  overflow: hidden;
}
/* Soft glow layer that JS animates via opacity. */
.call-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Radial glow using accent tinted to feel like a phosphor pulse
     rather than a flat highlight. */
  /* Anchored at 50% 50% so the glow's brightness centroid sits
     directly behind the text. Slightly slower falloff keeps the
     bottom half of the cell from going cold. */
  background: radial-gradient(
    circle at 50% 50%,
    rgba(46, 196, 255, 0.24) 0%,
    rgba(46, 196, 255, 0.10) 45%,
    rgba(46, 196, 255, 0) 78%
  );
  opacity: 0;
  transition: opacity 900ms var(--ease);
  pointer-events: none;
  z-index: 0;
}
.call-cell.is-lit::before { opacity: 1; }

.call-cell > span {
  position: relative;
  z-index: 1;
  color: var(--fg);
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(15px, 1.7vw, 26px);
  letter-spacing: 0.02em;
  line-height: 1;
  /* Subtle warm-up when the cell is lit — the text catches a hint
     of the glow underneath. */
  transition: color 900ms var(--ease), text-shadow 900ms var(--ease);
}
.call-cell.is-lit > span {
  color: #d8e3f0;
  text-shadow: 0 0 18px rgba(46, 196, 255, 0.35);
}

@media (max-width: 720px) {
  .call-board { grid-template-columns: repeat(3, 1fr); }
  .call-cell { aspect-ratio: 1 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .call-cell::before,
  .call-cell > span { transition: none; }
}

/* ---------- Scoreboard section ---------- */
.scoreboard .section-head { margin-bottom: clamp(48px, 7vh, 80px); }
.score-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 900px) {
  .score-grid { grid-template-columns: repeat(3, 1fr); }
}
.score-col {
  padding: clamp(32px, 4vw, 52px);
  border-right: 1px solid var(--hairline);
}
.score-col:last-child { border-right: 0; }
@media (max-width: 899px) {
  .score-col { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .score-col:last-child { border-bottom: 0; }
}
.score-col .score-num {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: var(--fg-mute);
  margin-bottom: 20px;
}
.score-col h3 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--fg);
  max-width: 20ch;
}
.score-col p {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-dim);
  line-height: 1.55;
}
.scoreboard-close {
  margin: clamp(48px, 7vh, 80px) 0 0;
  max-width: 60ch;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: var(--text-xl);
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--fg-dim);
}
.scoreboard-close .accent {
  color: var(--fg);
  font-weight: 400;
}

/* ---------- Piece #2 (Replay) accent word ---------- */
.piece-panel .accent { color: var(--accent); }

/* ---------- Contact tracks ---------- */
.tracks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: clamp(24px, 4vh, 40px) 0 clamp(40px, 6vh, 56px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 800px) {
  .tracks { grid-template-columns: repeat(3, 1fr); }
}
.track {
  padding: clamp(28px, 3.5vw, 40px);
  border-right: 1px solid var(--hairline);
}
.track:last-child { border-right: 0; }
@media (max-width: 799px) {
  .track { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .track:last-child { border-bottom: 0; }
}
.track .track-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 16px;
}
.track p {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-dim);
  line-height: 1.55;
  max-width: 34ch;
}
.contact-note {
  margin: clamp(24px, 4vh, 32px) 0 0;
  max-width: 60ch;
  font-size: var(--text-sm);
  color: var(--fg-mute);
  line-height: 1.55;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   PALANTIR-CONTRAST POSITIONING — new sections added Aug 2026:
   contrast-band, primitives, built-stake.
   (receipts section removed — duplicated The System's evidence
   claims and exposed IP primitives on public marketing surface.)
   ============================================================ */

/* ---------- Comparison chart ----------
   Titled comparison table. Big "Everyone else stops short. We finish
   the call." heading over a six-column grid: Capability, Dashboards,
   Predictors, Copilots, Orchestrators, REX/Edge. Cyan checkmarks for
   yes, hairline dashes for no, hollow circle for partial. Us column
   is highlighted with a tinted background and cyan top edge. */
.compare {
  padding: clamp(72px, 11vh, 128px) 0;
}
.compare-head {
  margin-bottom: clamp(40px, 5vw, 64px);
}
.compare-head .kicker {
  display: block;
  margin-bottom: clamp(16px, 2vw, 24px);
}
.compare-head h2.h-section {
  margin: 0;
  max-width: 22ch;
}
.compare-head h2 .lead {
  display: block;
  color: var(--fg-dim);
}
.compare-head h2 .tail {
  display: block;
  color: var(--fg);
}

/* The table grid: 6 columns. On mobile it becomes horizontally
   scrollable inside a shell so the row structure survives. */
.compare-table {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) repeat(4, minmax(96px, 1fr)) minmax(120px, 1.15fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
.compare-row {
  display: contents;
}
.compare-row .compare-cell {
  padding: clamp(16px, 2vw, 22px) clamp(10px, 1.4vw, 18px);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}
.compare-row:last-child .compare-cell { border-bottom: none; }

/* Capability column: left-aligned rowheader text */
.compare-cell--capability {
  justify-content: flex-start !important;
  color: var(--fg-dim);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.35;
  letter-spacing: -0.005em;
  padding-left: clamp(4px, 0.6vw, 10px) !important;
}

/* Header row styling */
.compare-row--header .compare-cell {
  border-bottom: 1px solid rgba(237, 237, 238, 0.28);
  padding-top: clamp(14px, 1.6vw, 18px);
  padding-bottom: clamp(14px, 1.6vw, 18px);
  min-height: 0;
}
.compare-row--header .compare-cell--capability {
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.compare-them {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 500;
  text-align: center;
}
.compare-us {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  text-align: center;
}
.compare-slash {
  color: rgba(46, 196, 255, 0.55);
  font-weight: 400;
  margin: 0 0.05em;
}

/* Us column highlight: subtle cyan-tinted background + top accent
   line, spans every row in the last column. */
.compare-cell--us {
  background: rgba(46, 196, 255, 0.05);
  border-left: 1px solid rgba(46, 196, 255, 0.22);
  position: relative;
}
.compare-row--header .compare-cell--us {
  background: rgba(46, 196, 255, 0.08);
}
.compare-row--header .compare-cell--us::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

/* Mark glyphs — checkmark, dash, partial circle */
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 20px;
  line-height: 1;
  font-family: var(--font-heading);
  font-weight: 400;
}
.mark-yes {
  color: var(--accent);
  font-weight: 500;
  font-size: 22px;
}
.compare-cell--us .mark-yes {
  color: var(--accent-hi, #7CDCFF);
  text-shadow: 0 0 12px rgba(46, 196, 255, 0.35);
  font-weight: 600;
  font-size: 24px;
}
.mark-no {
  color: rgba(237, 237, 238, 0.22);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0;
}
.mark-partial {
  color: var(--fg-mute);
  font-size: 18px;
  font-weight: 400;
}

/* Legend under the table */
.compare-note {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--fg-mute);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 16px);
}
.compare-legend-mark {
  width: 20px;
  height: 20px;
  font-size: 16px;
  vertical-align: middle;
}
.compare-note .mark-yes { color: var(--accent); font-size: 18px; }
.compare-note .mark-no { color: var(--fg-mute); font-size: 18px; }
.compare-note .mark-partial { color: var(--fg-mute); font-size: 15px; }

/* Mobile: horizontally scroll the table so all six columns survive
   at a glance, with the capability column pinned. */
@media (max-width: 720px) {
  .compare-head h2.h-section { max-width: 100%; }
  .compare-table {
    grid-template-columns: minmax(180px, 1.6fr) repeat(4, minmax(72px, 88px)) minmax(96px, 108px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .compare-cell--capability {
    font-size: var(--text-xs);
    background: var(--bg);
    position: sticky;
    left: 0;
    z-index: 1;
  }
  .compare-row--header .compare-cell {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .compare-them, .compare-us { font-size: 10px; letter-spacing: 0.1em; }
  .mark { width: 24px; height: 24px; font-size: 18px; }
  .mark-yes { font-size: 20px; }
  .compare-cell--us .mark-yes { font-size: 22px; }
}

/* ---------- The primitives ----------
   Four-column grid on desktop, 2x2 on tablet, 1x4 on mobile.
   Hairline separators, kicker-style index numeral, named product with
   trademark, role sub-label, body paragraph. */
.primitives-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 720px) {
  .primitives-grid { grid-template-columns: repeat(2, 1fr); }
  .primitives-grid > .primitive:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
}
@media (min-width: 1100px) {
  .primitives-grid { grid-template-columns: repeat(4, 1fr); }
  .primitives-grid > .primitive:nth-child(-n+2) { border-bottom: 0; }
}
.primitive {
  padding: clamp(28px, 3.5vw, 44px);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.primitive:last-child { border-right: 0; }
@media (max-width: 719px) {
  .primitive { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .primitive:last-child { border-bottom: 0; }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .primitive:nth-child(2n) { border-right: 0; }
}
.primitive-index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.24em;
  color: var(--fg-mute);
  margin-bottom: 20px;
}
.primitive-name {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 6px;
}
.primitive-name .tm {
  font-size: 0.55em;
  vertical-align: super;
  color: var(--fg-mute);
  margin-left: 0.1em;
  letter-spacing: 0;
}
.primitive-role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.primitive p {
  margin: 0;
  font-size: var(--text-base);
  color: var(--fg-dim);
  line-height: 1.5;
}

/* ---------- Built for: decision-with-stakes footer ----------
   Adds a small "The call" tag + italicized operational question
   at the bottom of each carousel card. Reinforces that each use
   case is a real decision an operator recognizes instantly. */
.built-stake {
  /* Do not use margin-top:auto — it flexes to eat remaining vertical
     space, which desynchronizes the dashed separator's Y position
     across cards with different content lengths. Sit directly after
     the description paragraph (which has its own min-height reserve
     for cross-card alignment). */
  margin-top: clamp(20px, 2.4vw, 28px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px dashed rgba(237, 237, 238, 0.14);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stake-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.stake-q {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--fg);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
/* Reserve a minimum height on the description paragraph so the
   dashed .built-stake separator sits at the same Y across all
   cards in the visible row — 3 lines of body-base @ 1.5 line-height. */
.built-card > p { margin-bottom: 0; min-height: calc(var(--text-base) * 1.5 * 3); }
.built-card > h3 { margin-bottom: 8px; }
.built-card { justify-content: flex-start; }
.built-card > .built-photo { flex: 0 0 auto; }

/* ============================================================
   MOBILE REFINEMENTS (≤ 640px)
   Targeted fixes surfaced during 375px mobile QA. Do not merge
   with earlier media queries — keeping the diff auditable here.
   ============================================================ */
@media (max-width: 640px) {

  /* --- Nav: keep Sense / Decide / Prove visible, just condensed.
         Previously hidden with display:none; this is a slight shrink
         + tighter gap so the four links fit inside a 375px viewport
         without wrapping. Also shrink the brand-word so "REX / EDGE"
         doesn't butt against the link cluster. */
  .nav { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .nav .brand-word { font-size: 11px; letter-spacing: 0.14em; }
  .nav .links { gap: 12px; }
  .nav .links a:not([href='#contact']) { display: inline; font-size: 11px; letter-spacing: 0.01em; }
  .nav .links a[href='#contact'] { font-size: 11px; }

  /* --- Hero: pull top padding in so the CTAs (See the proof / Get Access)
         land inside the initial fold on a 375×812 phone. Also let hero
         grow past viewport height if content wraps, instead of being
         locked to 100vh with center alignment. */
  .hero {
    min-height: auto;
    padding: 92px var(--gutter) 140px;
    align-items: flex-start;
  }
  .hero .actions { flex-wrap: wrap; gap: 20px; }

  /* --- Hero divider-bar: at 375px the four words + three dots + 0.22em
         letter-spacing overflow, truncating "REPLAY" at the right edge.
         Allow wrap onto a second line and tighten the gap + tracking. */
  .hero .divider-bar {
    flex-wrap: wrap;
    gap: 8px 14px;
    letter-spacing: 0.14em;
    bottom: 32px;
    font-size: 10px;
  }

  /* --- Piece1 (Sense/Decide/Prove ladder): the fixed 50vh panel + 50vh
         canvas split forced the 5-row ladder into an internal scroll
         container on mobile, so users couldn't see rows 3–5. Restore
         natural document flow: panel content stacks above the canvas,
         canvas gets a fixed height, no internal scroll needed. */
  .piece-panel { overflow-y: visible; min-height: 0; padding-top: 72px; }
  .piece-stage { min-height: auto; height: 420px; }
  .piece-stage canvas { position: absolute; inset: 0; }

  /* --- Compare table: pair the existing horizontal-scroll behavior with
         a soft cyan gradient at the right edge of the containing section
         so it reads as "scroll for more" rather than "table is cut off".
         Applied on the outer .compare wrapper so the pseudo-element is
         not clipped by the table's own overflow: auto. */
  .compare { position: relative; }
  .compare::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to left, rgba(46, 196, 255, 0.22), transparent);
    pointer-events: none;
    z-index: 3;
  }
  /* Small → chevron hint sits at the right edge of the header row. */
  .compare-row--header .compare-cell--us { position: relative; }
}