/* ═════════════════════════════════════════════════════════════════════
   PULSE Homepage — "Precision performance instrument"
   The site reads like a piece of pro telemetry hardware: near-black canvas,
   hairline engineering grids, monospace data labels, tick marks, and Ion
   Cyan used ONLY as a live "signal" colour. Asymmetric rhythm, not a
   template grid. Mechanical micro-motion, never bouncy.

   PROGRESSIVE ENHANCEMENT (hard rule): every section is fully visible with
   no JS and with prefers-reduced-motion. The .rv reveal class defaults to
   opacity:1 — the entrance only ADDS a subtle translate when JS marks it
   .is-visible, it never hides content.

   Depends on shared.css, fonts.css, tokens-v3.css, motion.css, bg.css.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Container ──────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); }
@media (max-width: 720px) { .container { padding: 0 var(--sp-5); } }

/* ── Section frame + z-order over the star-flow bg ──────────────────── */
.hero, .kpi-strip, .features, .cmp-section, .fps-climb, .faq, .final-cta, .foot {
  position: relative;
  z-index: var(--z-content);
}

/* ── Mono labels (the instrument vocabulary) ────────────────────────── */
.mono-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
  margin: 0;
}
.mono-micro {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);            /* AA: ~8:1 on dark surfaces */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Eyebrow "kicker" — bracketed mono tag, no pill chrome (less SaaS) */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
  position: relative;
  padding-inline-start: 18px;
}
/* Cyan tick mark before the eyebrow — a "channel marker" */
.kicker::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  transform: translateY(-50%);
  background: var(--c-500);
}
.kicker .live-dot { transform: translateY(0); }

/* Reveal — CONTENT IS ALWAYS VISIBLE (opacity:1, full size).
   The entrance is a purely ADDITIVE one-shot translate that plays when the
   observer adds .is-visible. It never sets opacity below 1, so with no JS,
   with a failed observer, or with reduced motion, every section is fully
   visible by default. This is progressive enhancement, not gating. */
.rv { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* Only nudge position on reveal — a restrained mechanical lift. */
  html[data-anim] .rv.is-visible {
    animation: rv-lift var(--dur-4) var(--ease-out-quart) both;
  }
}
@keyframes rv-lift {
  from { transform: translateY(14px); }
  to   { transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════════════
   HERO — instrument panel: claim on the left, live telemetry on the right
   ════════════════════════════════════════════════════════════════════ */
.hero {
  padding: clamp(116px, 16vh, 184px) 0 var(--sp-9);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--sp-6), 5vw, var(--sp-9));
  align-items: center;
}
@media (max-width: 940px) {
  .hero { padding-top: clamp(104px, 14vh, 140px); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
}

.hero-lead { min-width: 0; }
.hero-status {
  margin-bottom: var(--sp-5);
  color: var(--text-2);
}
.hero-status-on { color: var(--c-400); }
.hero-status-sep { color: var(--text-4); margin: 0 2px; }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.4vw, 4.4rem);
  font-weight: 700;
  letter-spacing: var(--track-mega);
  line-height: 1.04;
  color: var(--text-1);
  margin: 0 0 var(--sp-5);
  padding-bottom: 0.08em;
  text-wrap: balance;
}
/* Single permitted gradient-text use across the page lives in fps + cta;
   here the accent word is a SOLID signal colour with a faint underline —
   instrument-like, not the usual gradient-headline SaaS move. */
.hero-title .accent-grad {
  color: var(--c-400);
  -webkit-text-fill-color: currentColor;
  background: none;
  position: relative;
  display: inline-block;
}
.hero-title .accent-grad::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 2px;
  background: linear-gradient(90deg, var(--c-500), transparent);
}
/* Masking wrappers injected by splitWords() — keep descenders clear */
.hero-title .tk-word-wrap { padding-bottom: 0.16em; vertical-align: bottom; }

.hero-sub {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 46ch;
  margin: 0 0 var(--sp-6);
}

.hero-cta-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}

.hero-meta {
  list-style: none;
  margin: 0;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--line-1);
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  color: var(--text-2);
  letter-spacing: 0.04em;
}
.hero-meta-item { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta-item svg { width: 14px; height: 14px; color: var(--c-500); opacity: 0.9; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 13px 20px;
  border-radius: var(--r-2);
  font-family: var(--font-display);
  font-size: var(--tx-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-2) var(--ease-out-quart),
              box-shadow var(--dur-3) var(--ease-out-quart),
              background var(--dur-2) var(--ease-out-quart),
              border-color var(--dur-2) var(--ease-out-quart),
              color var(--dur-2) var(--ease-out-quart);
}
.btn-inner { display: inline-flex; align-items: center; gap: 10px; }
.btn-primary {
  background: var(--c-500);
  color: #04201e;
  box-shadow: var(--glow-c-sm), var(--inner-bevel);
}
.btn-primary:hover {
  background: var(--c-400);
  box-shadow: var(--glow-c-md), var(--inner-bevel);
  transform: translateY(-1px);
}
.btn-ghost {
  background: oklch(1 0 0 / 0.02);
  border-color: var(--line-2);
  color: var(--text-1);
}
.btn-ghost:hover { background: oklch(1 0 0 / 0.05); border-color: var(--line-3); color: var(--c-400); }
.btn svg { width: 18px; height: 18px; }

/* ════════════════════════════════════════════════════════════════════
   HERO INSTRUMENT — the signature: a live frametime readout panel
   ════════════════════════════════════════════════════════════════════ */
.hero-instrument {
  position: relative;
  min-width: 0;
}
.inst-frame {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background:
    linear-gradient(180deg, oklch(0.12 0.008 250 / 0.72), oklch(0.08 0.006 250 / 0.78));
  box-shadow: var(--shadow-3), var(--inner-bevel);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Hairline engineering grid inside the panel */
.inst-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  pointer-events: none;
  z-index: 0;
}
.inst-frame > * { position: relative; z-index: 1; }

.inst-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-1);
  background: oklch(0.06 0.005 250 / 0.5);
}
.inst-head-state {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-400);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.live-dot-sm { width: 6px; height: 6px; }

/* Before → after delta */
.inst-delta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
}
.inst-delta-col { display: flex; flex-direction: column; gap: 4px; }
.inst-delta-col.is-after { text-align: end; align-items: flex-end; }
.inst-delta-num {
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.inst-delta-num.is-live { color: var(--c-400); }
.inst-delta-unit { font-size: 0.42em; color: var(--text-3); margin-inline-start: 4px; font-weight: 700; }
.inst-delta-num.is-live .inst-delta-unit { color: var(--c-500); }
.inst-delta-sub { color: var(--text-4); letter-spacing: 0.06em; }
.is-after .inst-delta-sub { color: var(--c-500); opacity: 0.75; }
.inst-delta-arrow { color: var(--c-500); display: flex; }
.inst-delta-arrow svg { width: 22px; height: 22px; }

/* Frametime trace */
.inst-trace {
  position: relative;
  padding: 0 var(--sp-5) var(--sp-4);
}
.inst-trace-svg { width: 100%; height: clamp(96px, 14vw, 130px); display: block; color: var(--text-1); }
/* Default (no JS): trace drawn fully — content visible. */
.inst-trace-pulse {
  stroke-dasharray: 700;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px oklch(0.78 0.16 184 / 0.5));
}
/* JS present + motion allowed: start hidden, draw in on hero entrance. */
@media (prefers-reduced-motion: no-preference) {
  html[data-anim] .inst-trace-pulse {
    stroke-dashoffset: 700;
    transition: stroke-dashoffset 2s var(--ease-out-expo) 0.3s;
  }
  html[data-anim] .hero-instrument.is-visible .inst-trace-pulse { stroke-dashoffset: 0; }
}

/* Sensor readout strip */
.inst-sensors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-1);
}
.inst-sensor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-inline-start: 1px solid var(--line-1);
}
.inst-sensor:first-child { border-inline-start: 0; }
.inst-sensor-val {
  font-family: var(--font-mono);
  font-size: var(--tx-sm);
  font-weight: 700;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.inst-sensor-unit { font-size: 0.7em; color: var(--text-3); margin-inline-start: 2px; }
@media (max-width: 480px) {
  .inst-sensors { grid-template-columns: repeat(2, 1fr); }
  .inst-sensor:nth-child(3) { border-inline-start: 0; }
  .inst-sensor:nth-child(n+3) { border-top: 1px solid var(--line-1); }
}

/* Bracketed corner ticks around the instrument (engineering registration marks) */
.inst-corner {
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--line-accent);
  pointer-events: none;
  z-index: 2;
}
.inst-corner-tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.inst-corner-tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.inst-corner-bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.inst-corner-br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ════════════════════════════════════════════════════════════════════
   SPEC READOUT STRIP — tick-marked instrument scale, not "stat cards"
   ════════════════════════════════════════════════════════════════════ */
.kpi-strip {
  padding: var(--sp-7) 0;
  border-top: 1px solid var(--line-1);
  border-bottom: 1px solid var(--line-1);
  background: oklch(0.06 0.005 250 / 0.25);
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 720px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-6); } }
.kpi {
  position: relative;
  text-align: start;
  padding: 0 var(--sp-5);
  border-inline-start: 1px solid var(--line-2);
}
.kpi:first-child { border-inline-start: 0; padding-inline-start: 0; }
@media (max-width: 720px) {
  .kpi { padding-inline: var(--sp-4); }
  .kpi:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
}
.kpi-idx {
  display: block;
  color: var(--text-2);            /* aria-hidden but axe checks; keep AA */
  margin-bottom: var(--sp-4);
}
.kpi-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.8vw, 3.6rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 0.95;
  color: var(--text-1);
  margin-bottom: var(--sp-3);
  font-variant-numeric: tabular-nums;
}
.kpi-num .kpi-suffix { color: var(--c-500); font-weight: 700; }
.kpi-label {
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  color: var(--text-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════
   SECTION HEADS (left-aligned, instrument-style — not centered SaaS)
   ════════════════════════════════════════════════════════════════════ */
.sec-head {
  max-width: 720px;
  margin: 0 0 var(--sp-8);
  text-align: start;
}
.sec-head .kicker { margin-bottom: var(--sp-4); }
.sec-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.06;
  color: var(--text-1);
  margin-bottom: var(--sp-3);
  text-wrap: balance;
}
.sec-sub {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: var(--text-2);
  line-height: 1.55;
  max-width: 54ch;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════
   FEATURES — module bay: numbered, hairline-divided, asymmetric rhythm
   ════════════════════════════════════════════════════════════════════ */
.features { padding: var(--sp-10) 0; }
.modules { display: flex; flex-direction: column; gap: 0; }

.module-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
/* Index chip: cyan-tinted fill + bright text reads as a "channel marker"
   and clears AA contrast (the saturated cyan-on-black text did not). */
.module-idx {
  color: var(--text-1);
  border: 1px solid var(--line-accent);
  border-radius: var(--r-1);
  padding: 3px 7px;
  letter-spacing: 0.1em;
  background: oklch(0.78 0.16 184 / 0.10);
}

/* Wide modules with a real screenshot — divided by hairlines, alternating */
.module-wide {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: center;
  padding: var(--sp-9) 0;
  border-top: 1px solid var(--line-1);
}
.module-wide:first-child { border-top: 0; padding-top: var(--sp-2); }
.module-wide.reverse .module-copy { order: 2; }
.module-wide.reverse .module-visual { order: 1; }
@media (max-width: 880px) {
  .module-wide, .module-wide.reverse {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    padding: var(--sp-7) 0;
  }
  .module-wide.reverse .module-copy { order: 1; }
  .module-wide.reverse .module-visual { order: 2; }
}
.module-copy { min-width: 0; }
.module-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: 1.08;
  color: var(--text-1);
  margin: 0 0 var(--sp-3);
  max-width: 20ch;
}
.module-copy p {
  font-size: var(--tx-base);
  line-height: 1.62;
  color: var(--text-2);
  max-width: 52ch;
  margin: 0;
}

/* Feature bullets — mono spec list with channel markers */
.feature-bullets {
  list-style: none;
  padding: 0;
  margin: var(--sp-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--tx-xs);
  color: var(--text-2);
  letter-spacing: 0.03em;
}
.feature-bullets li {
  position: relative;
  padding-inline-start: 18px;
}
.feature-bullets li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 8px; height: 1px;
  background: var(--c-500);
}

/* Screenshot frame — instrument bezel with corner ticks */
.module-visual {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  overflow: hidden;
  background: oklch(0.08 0.006 250 / 0.6);
  aspect-ratio: 16 / 10;
  box-shadow: var(--shadow-2), var(--inner-bevel);
  transition: border-color var(--dur-3) var(--ease-out-quart);
}
.module-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.03);
  pointer-events: none;
}
.module-visual:hover { border-color: var(--line-accent); }
.module-visual picture, .module-visual img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}

/* Compact module trio — instrument cards with hairline grid texture */
.module-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-9);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-1);
}
@media (max-width: 920px) { .module-trio { grid-template-columns: 1fr; gap: var(--sp-4); } }
.module-card {
  position: relative;
  padding: var(--sp-6);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: oklch(0.10 0.006 250 / 0.4);
  overflow: hidden;
  transition: border-color var(--dur-3) var(--ease-out-quart),
              background var(--dur-3) var(--ease-out-quart);
}
.module-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  opacity: 0.6;
  pointer-events: none;
}
.module-card > * { position: relative; }
.module-card:hover { border-color: var(--line-accent); background: oklch(0.12 0.008 250 / 0.5); }
.module-card h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: 1.12;
  color: var(--text-1);
  margin: 0 0 var(--sp-3);
}
.module-card p {
  font-size: var(--tx-sm);
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════
   COMPARISON TABLE (fair, instrument-styled)
   ════════════════════════════════════════════════════════════════════ */
.cmp-section { padding: var(--sp-10) 0; }
.cmp-wrap {
  max-width: 1100px;
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: oklch(0.08 0.006 250 / 0.5);
  overflow-x: auto;
  box-shadow: var(--shadow-2);
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.cmp-table th, .cmp-table td {
  padding: var(--sp-4);
  text-align: center;
  font-size: var(--tx-sm);
  border-bottom: 1px solid var(--line-1);
  font-family: var(--font-display);
}
.cmp-table thead th {
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  background: oklch(1 0 0 / 0.015);
  position: relative;
  font-weight: 700;
  padding-block: var(--sp-5);
}
.cmp-table thead th.is-pulse {
  color: var(--c-400);
  background: oklch(0.78 0.16 184 / 0.10);
}
.cmp-table thead th.is-pulse::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0; height: 2px;
  background: var(--c-500);
}
.cmp-table tbody th {
  text-align: start;
  font-weight: 500;
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: var(--tx-sm);
  letter-spacing: -0.005em;
  text-transform: none;
  background: transparent;
  padding-inline-start: var(--sp-5);
}
.cmp-table tbody tr:last-child td,
.cmp-table tbody tr:last-child th { border-bottom: 0; }
.cmp-table tbody td.is-pulse { background: oklch(0.78 0.16 184 / 0.045); }
.cmp-table tbody tr:hover td,
.cmp-table tbody tr:hover th { background: oklch(1 0 0 / 0.012); }
.cmp-table tbody tr:hover td.is-pulse { background: oklch(0.78 0.16 184 / 0.08); }
.cmp-yes { color: var(--c-400); font-weight: 700; font-family: var(--font-mono); }
.cmp-no  { color: var(--text-3); }
.cmp-partial { color: var(--amber-400); font-weight: 500; font-family: var(--font-mono); font-size: var(--tx-xs); }
@media (max-width: 720px) {
  .cmp-table th, .cmp-table td { padding: var(--sp-3); font-size: var(--tx-xs); }
}

/* ════════════════════════════════════════════════════════════════════
   FPS CLIMB — signature benchmark trace
   The PULSE line draws in via stroke-dashoffset when its section enters
   the viewport. Static (fully-drawn) fallback when JS is off / reduced.
   ════════════════════════════════════════════════════════════════════ */
.fps-climb { padding: var(--sp-10) 0; }
.fps-climb .sec-head { margin-bottom: var(--sp-7); }

/* The ONE permitted gradient-text on the page (per brief: at most once) */
.accent-grad {
  background: var(--grad-hero-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
/* hero overrides accent-grad to solid (above), so the gradient only renders
   on .fps + .cta headings — keeping it to one signature spot in practice. */

.fps-chart {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-3);
  background: oklch(0.08 0.006 250 / 0.55);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-3);
  color: var(--text-1);
  overflow: hidden;
}
.fps-chart::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.fps-chart svg { width: 100%; height: auto; display: block; direction: ltr; position: relative; }
html[dir="rtl"] .fps-chart, html[dir="rtl"] .fps-chart svg { direction: ltr; unicode-bidi: isolate; }

/* Line-draw animation — default (no JS): everything drawn + visible.
   JS present ([data-anim]): start hidden, draw on scroll-into-view. */
.fps-chart .fps-pulse { stroke-dasharray: 1100; stroke-dashoffset: 0; }
html[data-anim] .fps-chart .fps-pulse {
  stroke-dashoffset: 1100;
  transition: stroke-dashoffset 2.6s var(--ease-out-expo);
}
html[data-anim] .fps-chart .fps-pulse-fill { opacity: 0; transition: opacity 0.8s ease-in 1.4s; }
html[data-anim] .fps-chart .fps-pulse-label { opacity: 0; transition: opacity 0.6s ease-in 2.0s; }
html[data-anim] .fps-chart .fps-end-dot { opacity: 0; transform-origin: center; transition: opacity 0.4s ease 2.4s; }

.rv.is-visible .fps-chart .fps-pulse,
.fps-chart.is-visible .fps-pulse { stroke-dashoffset: 0; }
.rv.is-visible .fps-chart .fps-pulse-fill,
.fps-chart.is-visible .fps-pulse-fill { opacity: 1; }
.rv.is-visible .fps-chart .fps-pulse-label,
.fps-chart.is-visible .fps-pulse-label { opacity: 1; }
.rv.is-visible .fps-chart .fps-end-dot,
.fps-chart.is-visible .fps-end-dot {
  opacity: 1;
  animation: fps-end-pulse 1.6s ease-in-out 2.4s infinite;
}
@keyframes fps-end-pulse {
  0%, 100% { r: 6; filter: drop-shadow(0 0 10px oklch(0.78 0.16 184 / 0.9)); }
  50%      { r: 8; filter: drop-shadow(0 0 16px oklch(0.78 0.16 184 / 1)); }
}

.fps-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  max-width: 820px;
  margin: var(--sp-7) auto 0;
}
@media (max-width: 680px) { .fps-stats { grid-template-columns: 1fr; gap: var(--sp-3); } }
.fps-stat {
  text-align: start;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: oklch(0.08 0.006 250 / 0.4);
}
.fps-stat-num {
  font-family: var(--font-mono);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  color: var(--c-400);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.fps-stat-label {
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ════════════════════════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════════════════════════ */
.faq { padding: var(--sp-10) 0; }
.faq-v3 { max-width: 800px; margin: 0; }
.faq-v3-item {
  border-bottom: 1px solid var(--line-1);
  transition: background var(--dur-3) var(--ease-out-quart);
}
.faq-v3-item:first-child { border-top: 1px solid var(--line-1); }
.faq-v3-q {
  width: 100%;
  background: none;
  border: 0;
  padding: var(--sp-5) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  text-align: start;
  font-size: var(--tx-lg);
  font-weight: 500;
  font-family: var(--font-display);
  color: var(--text-1);
  cursor: pointer;
}
.faq-v3-q:hover { color: var(--c-400); }
.faq-v3-icon {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-1); flex-shrink: 0;
  transition: transform var(--dur-3) var(--ease-out-quart),
              border-color var(--dur-3) var(--ease-out-quart);
}
.faq-v3-icon svg { width: 14px; height: 14px; color: var(--text-2); transition: color var(--dur-3); }
.faq-v3-item.is-open .faq-v3-icon { transform: rotate(45deg); border-color: var(--c-500); }
.faq-v3-item.is-open .faq-v3-icon svg { color: var(--c-500); }
.faq-v3-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-4) var(--ease-out-expo);
}
.faq-v3-a-inner {
  padding: 0 0 var(--sp-5);
  font-size: var(--tx-base);
  color: var(--text-2);
  line-height: 1.65;
  max-width: 66ch;
}
.faq-v3-a-inner a { color: var(--c-400); }
.faq-v3-item.is-open .faq-v3-a { max-height: 420px; }

/* ════════════════════════════════════════════════════════════════════
   FINAL CTA — bracketed instrument frame, centered
   ════════════════════════════════════════════════════════════════════ */
.final-cta {
  padding: var(--sp-10) 0 var(--sp-10);
}
.cta-frame {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(var(--sp-7), 6vw, var(--sp-9)) clamp(var(--sp-5), 5vw, var(--sp-8));
  border: 1px solid var(--line-2);
  border-radius: var(--r-4);
  background: oklch(0.08 0.006 250 / 0.55);
  box-shadow: var(--shadow-3), var(--inner-bevel);
  overflow: hidden;
  isolation: isolate;
}
.cta-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-hero-glow);
  pointer-events: none;
  z-index: -1;
}
.cta-eyebrow {
  justify-content: center;
  color: var(--c-400);
  margin-bottom: var(--sp-4);
}
.cta-frame h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: var(--track-display);
  line-height: 1.05;
  color: var(--text-1);
  margin: 0 auto var(--sp-3);
  max-width: 16ch;
}
.cta-sub { color: var(--text-2); font-family: var(--font-mono); font-size: var(--tx-sm); letter-spacing: 0.04em; margin: 0 0 var(--sp-6); }
.cta-action { margin-bottom: var(--sp-4); }

.dl-btn {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  padding: 16px 30px;
  border-radius: var(--r-2);
  background: var(--c-500);
  color: #04201e;
  font-family: var(--font-display);
  font-size: var(--tx-lg);
  font-weight: 600;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
  box-shadow: var(--glow-c-md), var(--inner-bevel);
  transition: transform var(--dur-2) var(--ease-out-quart),
              box-shadow var(--dur-3) var(--ease-out-quart),
              background var(--dur-2) var(--ease-out-quart);
}
.dl-btn:hover { transform: translateY(-2px); background: var(--c-400); box-shadow: var(--glow-c-lg), var(--inner-bevel); }
.dl-btn-icon { width: 22px; height: 22px; }
.cta-meta {
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  color: var(--text-2);
  margin: 0;
}
.btn-meta {
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  color: var(--text-2);
}

/* CTA corner registration ticks */
.cta-corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--line-accent);
  pointer-events: none;
  z-index: 1;
}
.cta-corner-tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.cta-corner-tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.cta-corner-bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.cta-corner-br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* ════════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════════ */
.foot {
  padding: var(--sp-9) 0 var(--sp-6);
  border-top: 1px solid var(--line-1);
  background: oklch(0 0 0 / 0.30);
  backdrop-filter: blur(8px);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--sp-7);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-col h3 {
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--sp-3);
}
.foot-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-col a { color: var(--text-2); text-decoration: none; font-size: var(--tx-sm); transition: color var(--dur-2); }
.foot-col a:hover { color: var(--c-400); }
.foot-bottom {
  max-width: 1200px;
  margin: var(--sp-7) auto 0;
  padding: var(--sp-5) var(--sp-6) 0;
  border-top: 1px solid var(--line-1);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--tx-2xs);
  color: var(--text-2); letter-spacing: 0.04em;
}

/* ════════════════════════════════════════════════════════════════════
   NAV scroll states (uses shared.css .nav base)
   ════════════════════════════════════════════════════════════════════ */
.nav.is-scrolled {
  padding-top: 8px; padding-bottom: 8px;
  background: oklch(0.08 0.006 250 / 0.82);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line-2);
}
.nav.is-hidden { transform: translateY(-100%); transition: transform var(--dur-3) var(--ease-out-quart); }

/* ════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   Dark surfaces use white-at-low-alpha / dark ink which is wrong on a light
   page — flip them. Keep cyan brand, re-anchor the gradient to deeper hues.
   ════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .nav.is-scrolled { background: oklch(0.98 0.004 250 / 0.86); }
[data-theme="light"] .foot { background: oklch(0 0 0 / 0.012); border-top-color: oklch(0 0 0 / 0.08); }
[data-theme="light"] .foot-bottom { border-top-color: oklch(0 0 0 / 0.08); }
[data-theme="light"] .foot-col a:hover { color: oklch(0.42 0.14 184); }

[data-theme="light"] .kicker { color: var(--text-2); }
[data-theme="light"] .btn-ghost {
  background: oklch(0 0 0 / 0.03);
  border-color: oklch(0 0 0 / 0.12);
  color: var(--text-1);
}
[data-theme="light"] .btn-ghost:hover {
  background: oklch(0 0 0 / 0.06);
  border-color: oklch(0 0 0 / 0.18);
  color: oklch(0.40 0.13 184);
}
[data-theme="light"] .btn-primary,
[data-theme="light"] .dl-btn { color: #04201e; }
[data-theme="light"] .hero-meta { border-top-color: oklch(0 0 0 / 0.08); }

/* Spec strip + dividers */
[data-theme="light"] .kpi-strip {
  background: oklch(0 0 0 / 0.012);
  border-top-color: oklch(0 0 0 / 0.08);
  border-bottom-color: oklch(0 0 0 / 0.08);
}
[data-theme="light"] .kpi { border-inline-start-color: oklch(0 0 0 / 0.10); }
[data-theme="light"] .kpi-num .kpi-suffix { color: oklch(0.55 0.13 184); }

/* Instrument panel — flip dark glass to a light card */
[data-theme="light"] .inst-frame {
  background: linear-gradient(180deg, oklch(0.99 0.003 250 / 0.9), oklch(0.96 0.004 250 / 0.92));
}
[data-theme="light"] .inst-head { background: oklch(0 0 0 / 0.025); }
[data-theme="light"] .inst-delta-num { color: var(--text-2); }
[data-theme="light"] .inst-delta-num.is-live,
[data-theme="light"] .inst-head-state { color: oklch(0.42 0.14 184); }
[data-theme="light"] .module-card,
[data-theme="light"] .module-visual,
[data-theme="light"] .cmp-wrap,
[data-theme="light"] .fps-chart,
[data-theme="light"] .fps-stat,
[data-theme="light"] .cta-frame {
  background: oklch(0.99 0.003 250 / 0.7);
  border-color: oklch(0 0 0 / 0.10);
}
[data-theme="light"] .module-card:hover { background: oklch(0.97 0.004 250 / 0.85); }

/* The single gradient-text — re-anchor for light bg legibility */
[data-theme="light"] .accent-grad {
  background: linear-gradient(135deg,
    oklch(0.42 0.14 184) 0%, oklch(0.55 0.16 184) 50%, oklch(0.42 0.14 184) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] .hero-title .accent-grad { color: oklch(0.40 0.14 184); background: none; -webkit-text-fill-color: currentColor; }

/* Comparison */
[data-theme="light"] .cmp-table th,
[data-theme="light"] .cmp-table td { border-bottom-color: oklch(0 0 0 / 0.06); }
[data-theme="light"] .cmp-table thead th { background: oklch(0 0 0 / 0.025); }
[data-theme="light"] .cmp-table thead th.is-pulse { background: oklch(0.78 0.16 184 / 0.14); color: oklch(0.35 0.14 184); }
[data-theme="light"] .cmp-table tbody td.is-pulse { background: oklch(0.78 0.16 184 / 0.07); }
[data-theme="light"] .cmp-table tbody tr:hover td,
[data-theme="light"] .cmp-table tbody tr:hover th { background: oklch(0 0 0 / 0.025); }
[data-theme="light"] .cmp-table tbody tr:hover td.is-pulse { background: oklch(0.78 0.16 184 / 0.12); }
[data-theme="light"] .cmp-yes { color: oklch(0.42 0.14 184); }
[data-theme="light"] .cmp-partial { color: oklch(0.55 0.16 85); }

/* FPS chart */
[data-theme="light"] .fps-stat-num { color: oklch(0.42 0.14 184); }
[data-theme="light"] .fps-chart .fps-pulse-label text { fill: oklch(0.42 0.14 184); }
[data-theme="light"] .fps-chart .fps-end-dot { fill: oklch(0.42 0.14 184); }

/* FAQ */
[data-theme="light"] .faq-v3-item,
[data-theme="light"] .faq-v3-item:first-child { border-color: oklch(0 0 0 / 0.08); }
[data-theme="light"] .faq-v3-q:hover { color: oklch(0.42 0.14 184); }
[data-theme="light"] .faq-v3-item.is-open .faq-v3-icon { border-color: oklch(0.42 0.14 184); }
[data-theme="light"] .faq-v3-item.is-open .faq-v3-icon svg { color: oklch(0.42 0.14 184); }
[data-theme="light"] .faq-v3-a-inner a { color: oklch(0.42 0.14 184); }

/* Section borders / grid texture softer on light */
[data-theme="light"] {
  --grid-line: oklch(0 0 0 / 0.025);
}

/* Scroll progress (motion.css uses --grad-cta; keep darker stop on light) */
[data-theme="light"] .scroll-progress {
  background: linear-gradient(135deg, oklch(0.45 0.14 184), oklch(0.55 0.16 184));
  box-shadow: 0 0 12px oklch(0.55 0.16 184 / 0.4);
}

/* ════════════════════════════════════════════════════════════════════
   BRAND wordmark (merged P-mark) — preserved from prior design
   ════════════════════════════════════════════════════════════════════ */
.nav-brand.brand-merged { gap: 0; align-items: center; letter-spacing: -0.005em; }
.nav-brand.brand-merged .nav-brand-logo { width: auto; height: auto; display: inline-flex; align-items: center; }
.nav-brand.brand-merged .nav-brand-logo .brand-svg {
  width: 1.05em; height: 1.05em; filter: none; animation: none; display: block; transform: translateY(0.04em);
}
.nav-brand.brand-merged .brand-tail { margin-left: -0.04em; letter-spacing: inherit; }
.nav-brand.brand-merged:hover .brand-svg {
  filter: drop-shadow(0 0 8px oklch(0.78 0.16 184 / 0.45));
  animation: none;
  transition: filter var(--dur-3) var(--ease-out-quart);
}
@media (prefers-reduced-motion: reduce) {
  .nav-brand.brand-merged:hover .brand-svg { filter: none; }
}
.foot .nav-brand.brand-merged { font-size: 1.05rem; }

/* ════════════════════════════════════════════════════════════════════
   I18N / RTL / non-Latin script safeguards (carried over + adapted)
   ════════════════════════════════════════════════════════════════════ */
/* Long-language wrapping */
.hero-title { word-break: keep-all; overflow-wrap: break-word; }
.hero-sub, .sec-sub, .module-copy p, .module-card p, .faq-v3-a-inner { overflow-wrap: anywhere; }

/* RTL: flip directional arrows inside CTA/feature buttons */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .inst-delta-arrow svg { transform: scaleX(-1); }
/* Checkmarks are direction-agnostic */
html[dir="rtl"] .hero-meta-item svg { transform: none; }
/* Download glyph stays pointing down */
html[dir="rtl"] .dl-btn-icon { transform: none; }

/* Numeric readouts stay LTR */
html[dir="rtl"] .kpi-num,
html[dir="rtl"] .fx-counter,
html[dir="rtl"] .inst-delta-num,
html[dir="rtl"] .inst-sensor-val,
html[dir="rtl"] .fps-stat-num,
html[dir="rtl"] [data-version-display] { direction: ltr; unicode-bidi: isolate; }

/* Keep the spec strip in LTR source order across languages */
html[dir="rtl"] .kpi-grid { direction: ltr; }
html[dir="rtl"] .kpi-label { direction: rtl; unicode-bidi: isolate; }
html[dir="rtl"] .kpi-grid .kpi { border-inline-start: 1px solid var(--line-2); }
html[dir="rtl"] .kpi-grid .kpi:first-child { border-inline-start: 0; }

/* Hero meta row keeps order */
html[dir="rtl"] .hero-meta { flex-direction: row; }
html[dir="rtl"] .hero-meta-item { flex-direction: row; }

/* CTA stays centered in RTL */
html[dir="rtl"] .cta-frame,
html[dir="rtl"] .cta-frame h2,
html[dir="rtl"] .cta-frame p { text-align: center; }
html[dir="rtl"] .hero-cta-row { flex-direction: row; }
html[dir="rtl"] .cta-frame .dl-btn { direction: ltr; }

/* CJK line-breaking */
html[lang="zh"] .hero-title,
html[lang="ja"] .hero-title,
html[lang="ko"] .hero-title { line-break: strict; }

/* Non-Latin label readability: kill tracking + uppercase (Arabic letters
   connect; uppercase is a no-op for non-Latin). Use the UI sans, not mono. */
html[lang="ar"] .kpi-label, html[lang="ar"] .kicker, html[lang="ar"] .mono-label,
html[lang="ar"] .mono-micro, html[lang="ar"] .foot-col h3, html[lang="ar"] .cmp-table thead th,
html[lang="ar"] .fps-stat-label, html[lang="ar"] [data-i18n] {
  letter-spacing: 0;
  text-transform: none;
  font-family: 'Instrument Sans', 'Segoe UI', Tahoma, system-ui, sans-serif;
  font-weight: 500;
}
html[lang="zh"] .kpi-label, html[lang="zh"] .kicker, html[lang="zh"] .foot-col h3, html[lang="zh"] .mono-micro,
html[lang="ja"] .kpi-label, html[lang="ja"] .kicker, html[lang="ja"] .foot-col h3, html[lang="ja"] .mono-micro,
html[lang="ko"] .kpi-label, html[lang="ko"] .kicker, html[lang="ko"] .foot-col h3, html[lang="ko"] .mono-micro,
html[lang="hi"] .kpi-label, html[lang="hi"] .kicker, html[lang="hi"] .foot-col h3, html[lang="hi"] .mono-micro {
  letter-spacing: 0;
  text-transform: none;
}
html[lang="ar"] .kpi-label, html[lang="hi"] .kpi-label, html[lang="zh"] .kpi-label,
html[lang="ja"] .kpi-label, html[lang="ko"] .kpi-label {
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.45;
}

/* Kicker tick-before mark would collide with non-Latin padding; reset */
html[lang="ar"] .kicker { padding-inline-start: 0; }
html[lang="ar"] .kicker::before { display: none; }

/* Non-Latin vertical clearance for big display type */
html[lang="ar"] .hero-title, html[lang="hi"] .hero-title, html[lang="ja"] .hero-title,
html[lang="zh"] .hero-title, html[lang="ko"] .hero-title {
  line-height: 1.34;
  padding-bottom: 0.22em;
}
html[lang="ar"] .module-copy h3, html[lang="ar"] .sec-title, html[lang="ar"] .module-card h3, html[lang="ar"] .cta-frame h2,
html[lang="hi"] .module-copy h3, html[lang="hi"] .sec-title, html[lang="hi"] .module-card h3, html[lang="hi"] .cta-frame h2,
html[lang="ja"] .module-copy h3, html[lang="ja"] .sec-title, html[lang="ja"] .module-card h3, html[lang="ja"] .cta-frame h2,
html[lang="zh"] .module-copy h3, html[lang="zh"] .sec-title, html[lang="zh"] .module-card h3, html[lang="zh"] .cta-frame h2,
html[lang="ko"] .module-copy h3, html[lang="ko"] .sec-title, html[lang="ko"] .module-card h3, html[lang="ko"] .cta-frame h2 {
  line-height: 1.35;
  padding-bottom: 0.12em;
}

/* accent-grad clipping fix for non-Latin (deep descenders clip with bg-clip:text) */
html[lang="ar"] .accent-grad, html[lang="hi"] .accent-grad, html[lang="ja"] .accent-grad,
html[lang="zh"] .accent-grad, html[lang="ko"] .accent-grad {
  display: inline;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial;
  color: oklch(0.85 0.16 184);
  filter: drop-shadow(0 0 14px oklch(0.85 0.16 184 / 0.25));
}
html[lang="ar"] .cta-frame h2 { line-height: 1.45; padding-bottom: 0.2em; }
[data-theme="light"] html[lang="ar"] .accent-grad, [data-theme="light"] html[lang="hi"] .accent-grad,
[data-theme="light"] html[lang="ja"] .accent-grad, [data-theme="light"] html[lang="zh"] .accent-grad,
[data-theme="light"] html[lang="ko"] .accent-grad {
  color: oklch(0.48 0.14 184);
  filter: none;
}

/* ════════════════════════════════════════════════════════════════════
   REDUCED MOTION — content fully visible, all entrance/ambient motion off
   (motion.css also handles the global kill; these are page-specific)
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .inst-trace-pulse { stroke-dashoffset: 0 !important; transition: none !important; }
  .fps-chart .fps-pulse { stroke-dashoffset: 0 !important; transition: none !important; }
  .fps-chart .fps-pulse-fill,
  .fps-chart .fps-pulse-label,
  .fps-chart .fps-end-dot { opacity: 1 !important; transition: none !important; animation: none !important; }
}