/* =========================================================
   RidePulse — Cinematic Marketing Site
   Brand tokens mirrored from the Android app (Material 3)
   DeepNavy / DarkNavy / IgnitionOrange / SignalGold / Teal
   ========================================================= */

:root {
  /* ---- Surfaces (monotone navy ladder, mirrors Android Theme.kt) ---- */
  --deep-navy: #0f1923;          /* background */
  --deep-navy-2: #0b131c;        /* deepest */
  --dark-navy: #162231;          /* surface */
  --midnight-steel: #1e2a3a;     /* surfaceVariant / card */
  --card-elevated: #253447;      /* elevated card */
  --border: #2e3e52;             /* outline */
  --border-soft: rgba(148, 163, 184, 0.16);

  /* ---- Type ---- */
  --cloud-white: #f1f0f0;
  --text-primary: #e8eef6;
  --text-secondary: #94a3b8;
  --text-dim: #64748b;

  /* ---- Single brand accent — Ignition Orange (app primary) ---- */
  --ignition-orange: #eb5a30;
  --ignition-glow: #ff7a4a;
  --accent: var(--ignition-orange);
  --accent-glow: var(--ignition-glow);
  --accent-soft: rgba(235, 90, 48, 0.16);
  --accent-hairline: rgba(235, 90, 48, 0.32);

  /* ---- Monotone "ink" replacing decorative teal/cyan/violet ----
     Cascade trick: every existing var consumer keeps working, but the
     value now resolves to a neutral slate so the whole page reads as
     one coherent monotone surface with orange as the only chromatic
     punch. */
  --ink-cool: #94a3b8;                       /* slate-400 — neutral */
  --ink-cool-soft: rgba(148, 163, 184, 0.18);
  --ink-cool-hairline: rgba(148, 163, 184, 0.42);
  --rp-teal: var(--ink-cool);
  --rp-cyan: var(--ink-cool);
  --rp-violet: var(--ink-cool);

  /* ---- Metallic gradient stops (fancy, no chroma) ---- */
  --metal-hi: rgba(255, 255, 255, 0.10);
  --metal-mid: rgba(255, 255, 255, 0.04);
  --metal-lo: rgba(255, 255, 255, 0.02);

  /* ---- Semantic colors — kept ONLY for state indicators ---- */
  --signal-gold: #c5a02a;   /* muted from #e1bf27 — warn state */
  --rp-green: #22c55e;      /* connected / pass */
  --rp-red: #ef4444;        /* alert / fail */

  /* Light surface for paper preview */
  --paper: #f5f7fb;
  --paper-ink: #172033;
  --paper-line: #d9e0ea;

  /* Layout */
  --max: 1320px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Spotlight (mouse) */
  --mx: 50%;
  --my: 30%;

  color-scheme: dark;
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow-x: clip;
  /* Monotone vignette + a single warm orange wash. The website used to mix
     a teal halo with the orange — now only the brand accent radiates, so
     the rest of the canvas reads as deep steel. */
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(148, 163, 184, 0.05), transparent 60%),
    radial-gradient(900px 600px at -10% 35%, rgba(235, 90, 48, 0.06), transparent 60%),
    var(--deep-navy);
  color: var(--text-primary);
  /* Font stack aligned with the Android app: Roboto (Compose FontFamily.Default
     on Android) sits inside the stack so Android browsers render the live
     site with the same letterforms as the app. Inter leads on desktop where
     Roboto looks thinner; Pretendard handles Korean. */
  font-family:
    "Inter", "Inter var", "Pretendard Variable", "Pretendard", "Roboto",
    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-feature-settings: "cv11", "ss03", "cv05", "case", "calt", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Korean mode flips the stack so Pretendard owns Latin too — its Korean-tuned
   Latin reads more harmonious next to Hangul than Inter does. */
html[lang="ko"] body {
  font-family:
    "Pretendard Variable", "Pretendard", "Inter", "Roboto", -apple-system,
    BlinkMacSystemFont, "Segoe UI", system-ui, "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-feature-settings: "ss01", "cv11", "calt", "kern";
}

/* Tabular figures for any element marked as data */
[data-counter],
.report-metrics strong,
.spec strong,
.sensor-grid small,
.alert-list i,
.phone-top strong,
.corner-gauges em,
.export-stack em {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
}

/* Subtle global noise — inline SVG, no external request */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

::selection {
  background: rgba(235, 90, 48, 0.5);
  color: white;
}

/* ---------- Typography ---------- */
h1,
h2,
h3,
h4,
p,
li {
  margin-top: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: manual;
}

/* Korean prefers `keep-all` so phrase boundaries don't split mid-eojeol;
   English needs `normal` so long words can break in narrow columns. */
html[lang="ko"] h1,
html[lang="ko"] h2,
html[lang="ko"] h3,
html[lang="ko"] h4,
html[lang="ko"] p,
html[lang="ko"] li {
  word-break: keep-all;
}

/* Display headings — mirror the app's `displayLarge` (Black / -1.5sp tracking).
   weight 900 + −0.04em letter-spacing reads almost identical to the
   in-app hero text once the user installs the APK. */
h1 {
  margin-bottom: 24px;
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
  /* Monotone steel-to-white wash; no chromatic gradient. */
  background: linear-gradient(180deg, #f4f7fb 0%, #a8b6cb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  margin-bottom: 20px;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h3 {
  margin-bottom: 12px;
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

h4 {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
}

p {
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 6px 12px;
  border: 1px solid rgba(235, 90, 48, 0.32);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(235, 90, 48, 0.16), rgba(235, 90, 48, 0.04));
  color: #ffd2c0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ignition-orange);
  box-shadow: 0 0 0 3px rgba(235, 90, 48, 0.18);
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.55; }
}

.gradient-text {
  /* Single-hue Ignition Orange wash — was orange→amber→teal (3-color),
     now orange→glow→soft-peach (monotone-warm within one hue family). */
  background: linear-gradient(120deg, var(--ignition-orange) 0%, var(--ignition-glow) 55%, #ffd2b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Top Nav ---------- */
.top-nav {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3.6vw, 56px);
  height: 76px;
  padding: 0 var(--gutter);
  background: rgba(11, 19, 28, 0.62);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: background 240ms var(--ease-out-expo), border-color 240ms var(--ease-out-expo);
}

.top-nav.is-scrolled {
  background: rgba(11, 19, 28, 0.92);
  border-bottom-color: rgba(46, 62, 82, 0.6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cloud-white);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.brand-mark {
  display: inline-grid;
  grid-template-columns: repeat(3, 8px);
  gap: 4px;
  height: 22px;
  align-items: end;
}

.brand-mark span {
  display: block;
  width: 8px;
  height: 12px;
  border-radius: 999px;
  /* Bars were teal / gold / orange (3-color rainbow). New scheme is one
     hue (Ignition Orange) climbing in opacity — reads as a single brand
     pulse instead of a tricolor flag. */
  background: rgba(235, 90, 48, 0.42);
  animation: brand-bar 1.6s var(--ease-in-out) infinite;
}

.brand-mark span:nth-child(2) {
  height: 17px;
  background: rgba(235, 90, 48, 0.7);
  animation-delay: 0.18s;
}

.brand-mark span:nth-child(3) {
  height: 22px;
  background: var(--ignition-orange);
  animation-delay: 0.36s;
}

@keyframes brand-bar {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.55); }
}

.brand-mark {
  transform-origin: bottom;
}

.brand-mark span {
  transform-origin: bottom;
}

.site-menu {
  display: flex;
  align-items: center;
  gap: clamp(28px, 2.4vw, 44px);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
}

.site-menu a {
  position: relative;
  padding: 6px 0;
  transition: color 200ms ease;
}

.site-menu a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ignition-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out-expo);
}

.site-menu a:not(.nav-cta):hover,
.site-menu a:not(.nav-cta):focus-visible {
  color: var(--cloud-white);
}

.site-menu a:not(.nav-cta):hover::after,
.site-menu a:not(.nav-cta):focus-visible::after {
  transform: scaleX(1);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid rgba(235, 90, 48, 0.38);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(235, 90, 48, 0.14), rgba(235, 90, 48, 0.04));
  color: var(--cloud-white);
  letter-spacing: 0;
  transition:
    transform 200ms var(--ease-out-expo),
    box-shadow 200ms var(--ease-out-expo),
    background 200ms ease,
    border-color 200ms ease;
}

.nav-cta::after {
  content: "→";
  transition: transform 200ms var(--ease-out-expo);
}

.nav-cta:hover,
.nav-cta:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(235, 90, 48, 0.65);
  background: linear-gradient(180deg, rgba(235, 90, 48, 0.24), rgba(235, 90, 48, 0.10));
  box-shadow: 0 8px 22px rgba(235, 90, 48, 0.26);
}

.nav-cta:hover::after,
.nav-cta:focus-visible::after {
  transform: translateX(3px);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(30, 42, 58, 0.7);
  place-items: center;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--cloud-white);
  transition: transform 220ms var(--ease-out-expo), opacity 200ms ease;
}

.nav-toggle span + span {
  margin-top: 6px;
}

.top-nav.open .nav-toggle span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.top-nav.open .nav-toggle span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--ignition-orange), var(--signal-gold), var(--rp-teal));
  box-shadow: 0 0 12px rgba(235, 90, 48, 0.55);
  transition: width 80ms linear;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--deep-navy);
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  filter: saturate(0.6) contrast(1.18) brightness(0.65);
  transform: scale(1.06);
}

.hero-video.is-unavailable {
  display: none;
}

/* Mouse-tracked spotlight */
.hero-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      720px 520px at var(--mx) var(--my),
      rgba(235, 90, 48, 0.22),
      rgba(235, 90, 48, 0) 60%
    ),
    radial-gradient(
      900px 720px at calc(var(--mx) + 40%) calc(var(--my) + 30%),
      rgba(148, 163, 184, 0.18),
      transparent 65%
    );
  mix-blend-mode: screen;
  transition: background 60ms linear;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 19, 28, 0.96) 0%, rgba(11, 19, 28, 0.78) 45%, rgba(11, 19, 28, 0.45) 100%),
    linear-gradient(180deg, rgba(11, 19, 28, 0.18) 0%, var(--deep-navy) 100%);
}

.engineering-grid {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(46, 62, 82, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 62, 82, 0.55) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.55) 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, rgba(0, 0, 0, 0.55) 60%, transparent 100%);
}

.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(440px, 0.78fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: center;
  width: min(100% - 48px, var(--max));
  min-height: clamp(640px, 86vh, 880px);
  margin: 0 auto;
  padding: 132px 0 96px;
  align-items: start;
}

.hero-copy {
  max-width: 820px;
  padding-top: 12px;
}

.hero-lede {
  max-width: 720px;
  color: #c4d0df;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.button-primary,
.button-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
  transition: transform 200ms var(--ease-out-expo), box-shadow 220ms var(--ease-out-expo),
    background 200ms ease, border-color 200ms ease;
}

.button-primary {
  border: 1px solid var(--ignition-orange);
  background: linear-gradient(180deg, var(--ignition-glow), var(--ignition-orange));
  color: white;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 14px 40px rgba(235, 90, 48, 0.34);
}

.button-primary:hover,
.button-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 22px 56px rgba(235, 90, 48, 0.46);
}

.button-primary::after {
  content: "→";
  transition: transform 220ms var(--ease-out-expo);
}

.button-primary:hover::after,
.button-primary:focus-visible::after {
  transform: translateX(4px);
}

.button-ghost {
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(30, 42, 58, 0.5);
  color: var(--cloud-white);
  backdrop-filter: blur(8px);
}

.button-ghost:hover,
.button-ghost:focus-visible {
  border-color: rgba(241, 240, 240, 0.55);
  background: rgba(30, 42, 58, 0.78);
}

/* Ghost button variant for light/paper backgrounds */
.button-ghost.on-paper {
  border: 1px solid rgba(15, 25, 35, 0.16);
  background: rgba(255, 255, 255, 0.7);
  color: #1f2937;
  backdrop-filter: blur(6px);
}

.button-ghost.on-paper:hover,
.button-ghost.on-paper:focus-visible {
  border-color: rgba(235, 90, 48, 0.45);
  background: rgba(255, 255, 255, 0.92);
  color: #b04318;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(15, 25, 35, 0.55);
  backdrop-filter: blur(8px);
  color: #bfd0e7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.hero-proof span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--rp-teal);
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

/* Hero instrument (right column) */
.hero-instrument {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 18px;
  perspective: 1400px;
}

.phone-frame {
  position: relative;
  padding: 22px;
  width: 100%;
  border: 1px solid rgba(88, 114, 145, 0.42);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(30, 42, 58, 0.92), rgba(22, 34, 49, 0.84));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 30px 80px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px);
  transform-style: preserve-3d;
  transform: rotateX(2deg) rotateY(-6deg);
  transition: transform 600ms var(--ease-out-expo);
}

.phone-frame::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 28px;
  padding: 1px;
  background: linear-gradient(140deg, rgba(235, 90, 48, 0.5), transparent 35%, transparent 65%, rgba(148, 163, 184, 0.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.phone-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.phone-top span,
.sync-banner span,
.case-label,
.alert-code,
.step-card .step-num,
.bento-eyebrow,
.spec-eyebrow {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.phone-top strong {
  display: block;
  margin-top: 4px;
  font-size: 50px;
  line-height: 0.92;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff 0%, #c4d0df 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.confidence-bar {
  width: 110px;
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.confidence-bar i {
  display: block;
  height: 100%;
  width: 84%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rp-teal), var(--signal-gold));
}

.sync-banner {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(34, 197, 94, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(140px 60px at 0% 50%, rgba(34, 197, 94, 0.12), transparent 60%),
    rgba(15, 25, 35, 0.7);
}

.sync-banner strong {
  display: block;
  margin-top: 4px;
  color: var(--rp-green);
  font-size: 14px;
}

.sync-banner i {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(34, 197, 94, 0.18);
  border-top-color: var(--rp-green);
  border-radius: 999px;
  animation: spin 2.4s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.sensor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.sensor-grid div {
  position: relative;
  display: grid;
  min-height: 96px;
  place-items: center;
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(11, 19, 28, 0.78);
  text-align: center;
  overflow: hidden;
}

.sensor-grid div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 70px at 50% 100%, rgba(34, 197, 94, 0.18), transparent 70%);
  opacity: 0.6;
}

.sensor-grid div.is-watch::before {
  background: radial-gradient(120px 70px at 50% 100%, rgba(225, 191, 39, 0.22), transparent 70%);
}

.dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--text-dim);
}

.dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid currentColor;
  opacity: 0;
  animation: ping 2.4s var(--ease-out-expo) infinite;
}

.dot.good {
  background: var(--rp-green);
  color: var(--rp-green);
}

.dot.watch {
  background: var(--signal-gold);
  color: var(--signal-gold);
}

@keyframes ping {
  0% { transform: scale(0.8); opacity: 0.6; }
  80% { transform: scale(1.8); opacity: 0; }
  100% { opacity: 0; }
}

.sensor-grid strong {
  font-size: 14px;
  font-weight: 800;
}

.sensor-grid small {
  color: var(--text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Live spectrum */
.spectrum {
  position: relative;
  display: grid;
  align-items: end;
  grid-template-columns: repeat(28, minmax(0, 1fr));
  gap: 3px;
  height: 130px;
  padding: 14px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(220px 90px at 50% 100%, rgba(148, 163, 184, 0.14), transparent 70%),
    var(--deep-navy);
  overflow: hidden;
}

.spectrum::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(46, 62, 82, 0.4) 23px 24px),
    repeating-linear-gradient(180deg, transparent 0 19px, rgba(46, 62, 82, 0.32) 19px 20px);
  pointer-events: none;
  opacity: 0.6;
}

.spectrum span {
  position: relative;
  display: block;
  min-height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--rp-cyan), rgba(148, 163, 184, 0.4));
  transition: height 100ms linear;
  box-shadow: 0 0 6px rgba(148, 163, 184, 0.45);
}

.spectrum span.peak {
  background: linear-gradient(180deg, var(--ignition-glow), var(--ignition-orange));
  box-shadow: 0 0 14px rgba(235, 90, 48, 0.6);
}

.spectrum span.warm {
  background: linear-gradient(180deg, #fde68a, var(--signal-gold));
  box-shadow: 0 0 10px rgba(225, 191, 39, 0.55);
}

.alert-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(225, 191, 39, 0.28);
  border-radius: 12px;
  background: rgba(225, 191, 39, 0.08);
  color: var(--text-secondary);
  font-size: 13px;
}

.alert-code {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(225, 191, 39, 0.18);
  color: var(--signal-gold);
  letter-spacing: 0.12em;
}

/* Chassis rig card */
.rig-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(88, 114, 145, 0.36);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(30, 42, 58, 0.78), rgba(15, 25, 35, 0.86));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
}

.rig-card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 12px;
}

.chassis {
  position: relative;
  min-height: 130px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent 0 47%, rgba(100, 116, 139, 0.32) 47% 53%, transparent 53%),
    radial-gradient(60px 30px at 50% 50%, rgba(148, 163, 184, 0.18), transparent 70%),
    rgba(15, 25, 35, 0.8);
  overflow: hidden;
}

.chassis::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.25), transparent);
  width: 30%;
  animation: scanline 3.6s var(--ease-in-out) infinite;
}

@keyframes scanline {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(420%); }
}

.node {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--rp-green);
  box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.14);
  z-index: 2;
}

.node::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid var(--rp-green);
  opacity: 0;
  animation: ping 2.6s var(--ease-out-expo) infinite;
}

.node.fl { top: 22px; left: 22px; }
.node.fr { top: 22px; right: 22px; }
.node.rr { bottom: 22px; right: 22px; }
.node.rl {
  bottom: 22px;
  left: 22px;
  background: var(--signal-gold);
  box-shadow: 0 0 0 8px rgba(225, 191, 39, 0.16);
}
.node.rl::after { border-color: var(--signal-gold); }

.axle,
.driveline {
  position: absolute;
  background: rgba(148, 163, 184, 0.4);
  z-index: 1;
}

.axle.front { top: 30px; left: 42px; right: 42px; height: 2px; }
.axle.rear { bottom: 30px; left: 42px; right: 42px; height: 2px; }
.driveline { top: 32px; bottom: 32px; left: calc(50% - 1px); width: 2px; }

/* Floating telemetry pill */
.telemetry-pill {
  position: absolute;
  z-index: 3;
  top: -16px;
  right: -10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(148, 163, 184, 0.18), rgba(148, 163, 184, 0.04));
  color: #a7e9dc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.telemetry-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--rp-teal);
  box-shadow: 0 0 12px rgba(148, 163, 184, 0.7);
  animation: pulse 1.6s ease-in-out infinite;
}

/* ---------- Marquee logos ---------- */
.marquee-band {
  position: relative;
  z-index: 2;
  padding: 36px 0 48px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(11, 19, 28, 0.4), rgba(11, 19, 28, 0));
  overflow: hidden;
}

.marquee-head {
  width: min(100% - 48px, var(--max));
  margin: 0 auto 20px;
  text-align: center;
}

.marquee-head p {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-dim);
  text-transform: uppercase;
}

.marquee {
  display: flex;
  gap: 56px;
  width: max-content;
  padding: 0 24px;
  animation: marquee 50s linear infinite;
  color: rgba(241, 240, 240, 0.55);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.marquee-band:hover .marquee { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
}

.marquee span {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.marquee span::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.45);
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- Section base ---------- */
.section {
  position: relative;
  width: min(100% - 48px, var(--max));
  margin: 0 auto;
  padding: clamp(72px, 9vw, 132px) 0;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(280px, 0.5fr);
  gap: 48px;
  align-items: end;
  margin-bottom: 44px;
}

.section-head .eyebrow {
  grid-column: 1 / -1;
}

.section-head.compact {
  display: block;
  max-width: 920px;
  text-align: left;
}

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms var(--ease-out-expo),
    transform 700ms var(--ease-out-expo);
  transition-delay: var(--delay, 0ms);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.step-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 14px;
  min-height: 320px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(30, 42, 58, 0.7), rgba(22, 34, 49, 0.55));
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: transform 280ms var(--ease-out-expo), border-color 220ms ease;
}

.step-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(180deg, rgba(235, 90, 48, 0.4), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}

.step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(235, 90, 48, 0.32);
}

.step-card:hover::before {
  opacity: 1;
}

.step-num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.step-num::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--ignition-orange);
}

.step-card h3 {
  margin: 0;
}

.step-card p {
  margin: 0;
  font-size: 14px;
}

.step-visual {
  margin-top: auto;
}

.mini-sync,
.mode-pills {
  display: grid;
  gap: 8px;
}

.mini-sync { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mode-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mini-sync b,
.mode-pills b {
  display: grid;
  min-height: 50px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(11, 19, 28, 0.7);
  color: var(--cloud-white);
  font-size: 13px;
  font-weight: 800;
}

.mini-sync .watch {
  border-color: rgba(225, 191, 39, 0.5);
  background: rgba(225, 191, 39, 0.1);
  color: var(--signal-gold);
}

.micro-bars {
  display: grid;
  align-items: end;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  height: 84px;
}

.micro-bars i {
  display: block;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--rp-cyan), rgba(148, 163, 184, 0.32));
}

.micro-bars i:nth-child(1) { height: 32%; }
.micro-bars i:nth-child(2) { height: 50%; }
.micro-bars i:nth-child(3) { height: 64%; background: linear-gradient(180deg, var(--signal-gold), rgba(225, 191, 39, 0.4)); }
.micro-bars i:nth-child(4) { height: 86%; background: linear-gradient(180deg, var(--ignition-orange), rgba(235, 90, 48, 0.4)); }
.micro-bars i:nth-child(5) { height: 58%; }
.micro-bars i:nth-child(6) { height: 42%; }
.micro-bars i:nth-child(7) { height: 28%; }

.report-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(15, 25, 35, 0.7);
  color: #bfd0e7;
  font-size: 12px;
  font-weight: 800;
}

/* ---------- Bento features ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(220px, auto);
  gap: 16px;
}

.bento-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(30, 42, 58, 0.72), rgba(22, 34, 49, 0.55));
  overflow: hidden;
  min-width: 0;
  transition: transform 280ms var(--ease-out-expo), border-color 220ms ease;
}

.bento-card > * { min-width: 0; }

.bento-card:hover {
  transform: translateY(-3px);
  border-color: rgba(148, 163, 184, 0.38);
}

.bento-card .bento-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bento-card h3 {
  margin: 6px 0 0;
}

.bento-card p {
  margin: 0;
  font-size: 14px;
}

/* Bento sizes */
.b-1 { grid-column: span 3; grid-row: span 2; }
.b-2 { grid-column: span 3; grid-row: span 1; }
.b-3 { grid-column: span 3; grid-row: span 1; }
.b-4 { grid-column: span 2; grid-row: span 1; }
.b-5 { grid-column: span 2; grid-row: span 1; }
.b-6 { grid-column: span 2; grid-row: span 1; }

/* Per-card row templates — the base `auto 1fr` only declares 2 row tracks
   but b-1 has 4 children (eyebrow, content, spectrum, overlay) and b-2/3/4
   have 3 (eyebrow, h3, visual). Without per-card templates, children land in
   implicit `auto` rows where `height: 100%` resolves to 0 and the inner
   visualisations collapse to nothing. */
.bento-card.b-1 { grid-template-rows: auto auto 1fr auto; }
.bento-card.b-2,
.bento-card.b-3,
.bento-card.b-4,
.bento-card.b-6 { grid-template-rows: auto auto 1fr; }
.bento-card.b-2 .corner-gauges,
.bento-card.b-3 .speed-bands,
.bento-card.b-4 .export-stack,
.bento-card.b-6 .alert-list { align-self: end; margin-top: 0; }

/* Bento visual: large spectrum (b-1).
   With `.bento-card.b-1` now having a 4-row template (auto auto 1fr auto)
   the spectrum sits in the 1fr track and gets a real height. The
   `min-height: 200px` is a safety floor so it never collapses again if the
   surrounding markup changes. */
.bento-spectrum {
  position: relative;
  display: grid;
  grid-template-columns: repeat(40, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
  height: 100%;
  min-height: 200px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(280px 110px at 70% 100%, rgba(235, 90, 48, 0.18), transparent 70%),
    radial-gradient(280px 110px at 20% 100%, rgba(148, 163, 184, 0.16), transparent 70%),
    var(--deep-navy);
}

.bento-spectrum span {
  display: block;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--rp-cyan), rgba(148, 163, 184, 0.32));
  transition: height 120ms linear;
  box-shadow: 0 0 6px rgba(148, 163, 184, 0.35);
}

.bento-spectrum span.peak {
  background: linear-gradient(180deg, var(--ignition-glow), var(--ignition-orange));
  box-shadow: 0 0 14px rgba(235, 90, 48, 0.6);
}

.bento-spectrum span.warm {
  background: linear-gradient(180deg, #fde68a, var(--signal-gold));
}

.bento-spectrum-overlay {
  position: absolute;
  inset: auto 18px 18px 18px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  color: var(--text-dim);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

/* Bento corner gauges (b-2) */
.corner-gauges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: auto;
}

.corner-gauges div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(11, 19, 28, 0.7);
  text-align: left;
}

.corner-gauges strong {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.corner-gauges em {
  font-style: normal;
  color: var(--text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.corner-gauges .meter {
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.corner-gauges .meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rp-teal), var(--signal-gold));
  box-shadow: 0 0 6px rgba(148, 163, 184, 0.55);
}

.corner-gauges div.is-watch .meter i {
  background: linear-gradient(90deg, var(--signal-gold), var(--ignition-orange));
  box-shadow: 0 0 6px rgba(235, 90, 48, 0.55);
}

/* Bento speed-band (b-3) */
.speed-bands {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.speed-bands span {
  display: grid;
  place-items: center;
  min-height: 60px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(11, 19, 28, 0.7);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.speed-bands span.hot {
  border-color: rgba(235, 90, 48, 0.45);
  background: rgba(235, 90, 48, 0.12);
  color: #ffd2c0;
}

/* Bento export (b-4) */
.export-stack {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.export-stack span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(11, 19, 28, 0.7);
  color: var(--cloud-white);
  font-size: 13px;
  font-weight: 700;
}

.export-stack em {
  font-style: normal;
  color: var(--text-dim);
  font-size: 11px;
}

/* Bento confidence (b-5).
   Two-row grid stacks "84%" + "MEDIUM-HIGH" with explicit row-gap. The
   previous `place-items: center` put both children in the same auto-flow
   cell which made the small caption visually overlap the 30px number. */
.confidence-ring {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto auto;
  border-radius: 999px;
  background: conic-gradient(var(--rp-teal) 0% 84%, rgba(46, 62, 82, 0.5) 84% 100%);
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  row-gap: 4px;
}

.confidence-ring::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 999px;
  background: rgba(11, 19, 28, 0.92);
}

.confidence-ring strong {
  position: relative;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.confidence-ring small {
  position: relative;
  display: block;
  text-align: center;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Bento alerts (b-6) */
.alert-list {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.alert-list span {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(11, 19, 28, 0.7);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.alert-list span i {
  line-height: 22px;
  overflow-wrap: anywhere;
}

.alert-list b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  line-height: 1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.alert-list b.watch { background: rgba(225, 191, 39, 0.18); color: var(--signal-gold); }
.alert-list b.ok { background: rgba(34, 197, 94, 0.18); color: var(--rp-green); }
.alert-list b.info { background: rgba(148, 163, 184, 0.18); color: var(--rp-teal); }

/* ---------- Translation band ---------- */
.translation-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1fr);
  gap: 48px;
  align-items: center;
  padding: clamp(72px, 9vw, 120px) max(24px, calc((100vw - var(--max)) / 2));
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background:
    radial-gradient(800px 320px at 80% 0%, rgba(148, 163, 184, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(22, 34, 49, 0.96), rgba(15, 25, 35, 0.94));
}

.translation-copy { max-width: 680px; }

.translation-panel {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: rgba(15, 25, 35, 0.65);
  backdrop-filter: blur(14px);
}

.case-card {
  display: grid;
  gap: 14px;
  padding: 0;
  background: none;
  box-shadow: none;
}

.case-card div {
  position: relative;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(30, 42, 58, 0.78);
}

.case-card div.before::before,
.case-card div.after::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -1px;
  width: 3px;
  height: calc(100% - 36px);
  border-radius: 999px;
}

.case-card div.before::before { background: rgba(148, 163, 184, 0.45); }
.case-card div.after::before { background: var(--ignition-orange); }

.case-card strong {
  display: block;
  margin-top: 8px;
  font-size: clamp(18px, 1.85vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* ---------- Comparison table ---------- */
.compare-shell {
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(30, 42, 58, 0.62), rgba(22, 34, 49, 0.55));
  overflow: hidden;
}

.compare-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  align-items: center;
  padding: 18px 24px;
  border-top: 1px solid var(--border-soft);
}

.compare-row:first-child {
  border-top: 0;
  background: rgba(11, 19, 28, 0.7);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.compare-row strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--cloud-white);
}

.compare-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}

.compare-cell.win {
  color: #d6f5e8;
}

.compare-cell.win::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.18);
  position: relative;
}

.compare-cell.lose::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
}

/* ---------- Sample report (dark band, paper preview stays light) ---------- */
.report-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(420px, 0.9fr);
  gap: 56px;
  align-items: center;
  padding: clamp(80px, 9vw, 140px) max(24px, calc((100vw - var(--max)) / 2));
  background:
    linear-gradient(180deg, var(--deep-navy) 0%, var(--midnight-steel) 60%, var(--dark-navy) 100%);
  color: var(--cloud-white);
  isolation: isolate;
}

.report-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(600px 280px at 95% 5%, rgba(235, 90, 48, 0.10), transparent 70%),
    radial-gradient(600px 280px at 5% 95%, rgba(148, 163, 184, 0.08), transparent 70%);
}

.report-copy {
  position: relative;
  z-index: 1;
}

.report-section h2 {
  background: linear-gradient(180deg, #ffffff 0%, #c5cfdc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.report-section .eyebrow {
  border-color: rgba(235, 90, 48, 0.55);
  background: rgba(235, 90, 48, 0.14);
  color: #ffb59a;
}

.report-section p { color: var(--text-secondary); }

.report-section .button-primary { color: white; }

.report-preview {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
}

.paper {
  position: relative;
  width: min(100%, 620px);
  min-height: 600px;
  padding: 36px;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow:
    0 30px 80px rgba(15, 25, 35, 0.18),
    0 6px 18px rgba(15, 25, 35, 0.08);
  transform: rotate(-1.2deg);
}

.paper::before {
  content: "";
  position: absolute;
  top: 12px;
  left: -6px;
  width: 4px;
  height: 64px;
  border-radius: 4px;
  background: var(--ignition-orange);
  box-shadow: 0 4px 16px rgba(235, 90, 48, 0.35);
}

.paper-watermark {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 25, 35, 0.32);
}

.paper-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--paper-line);
  font-weight: 900;
  color: var(--paper-ink);
}

.paper-head strong {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(235, 90, 48, 0.12);
  color: #b04318;
  font-size: 13px;
  letter-spacing: 0.1em;
}

.report-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 22px 0;
}

.report-metrics div {
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  background: #f8fafc;
}

.report-metrics span {
  display: block;
  margin-bottom: 8px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.report-metrics strong {
  color: var(--paper-ink);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.paper-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: end;
  height: 170px;
  padding: 20px 16px;
  margin-bottom: 20px;
  border: 1px solid var(--paper-line);
  border-radius: 12px;
  background:
    linear-gradient(#e5eaf1 1px, transparent 1px),
    linear-gradient(90deg, #e5eaf1 1px, transparent 1px),
    #f8fafc;
  background-size: 28px 28px;
}

.paper-chart i {
  display: block;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #0ea5e9, #0369a1);
}

.paper-chart i:nth-child(1) { height: 28%; }
.paper-chart i:nth-child(2) { height: 42%; }
.paper-chart i:nth-child(3) { height: 58%; }
.paper-chart i:nth-child(4) { height: 40%; }
.paper-chart i:nth-child(5) { height: 88%; background: linear-gradient(180deg, #f97316, #b04318); }
.paper-chart i:nth-child(6) { height: 52%; }
.paper-chart i:nth-child(7) { height: 34%; }

.paper-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--paper-line);
  color: #64748b;
  font-size: 13px;
}

/* Floating sticker on paper */
.paper-sticker {
  position: absolute;
  top: -22px;
  right: -28px;
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border-radius: 999px;
  background: var(--ignition-orange);
  color: white;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(8deg);
  box-shadow: 0 14px 40px rgba(235, 90, 48, 0.4);
}

/* ---------- Tech specs ---------- */
.specs-section {
  background:
    radial-gradient(800px 320px at 80% 100%, rgba(235, 90, 48, 0.08), transparent 60%),
    var(--deep-navy);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  background: rgba(15, 25, 35, 0.55);
}

.spec {
  display: grid;
  gap: 6px;
  padding: 28px;
  border-right: 1px solid var(--border-soft);
}

.spec:last-child { border-right: 0; }

.spec strong {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, #c4d0df);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.spec span {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---------- Personas ---------- */
.personas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.persona {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(30, 42, 58, 0.7), rgba(22, 34, 49, 0.55));
  overflow: hidden;
  transition: transform 280ms var(--ease-out-expo), border-color 220ms ease;
}

.persona:hover {
  transform: translateY(-4px);
  border-color: rgba(235, 90, 48, 0.32);
}

.persona-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 18px;
  font-size: 24px;
}

/* Tile backgrounds align with the new persona color spectrum
   (cool slate / warm bronze / brand orange). */
.persona-icon.driver { background: rgba(148, 163, 184, 0.16); color: var(--ink-cool); }
.persona-icon.enthusiast { background: rgba(196, 160, 122, 0.16); color: #c4a07a; }
.persona-icon.shop { background: rgba(235, 90, 48, 0.16); color: var(--ignition-orange); }

.persona h3 { margin: 0; }

.persona ul {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
}

.persona li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr); /* minmax(0,…) guards overflow */
  gap: 10px;
  align-items: start;
  line-height: 1.5;
}

.persona li::before {
  content: "";
  margin-top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ignition-orange);
}

/* ---------- Trust / safety ---------- */
.safety-section {
  background:
    radial-gradient(700px 320px at 0% 100%, rgba(148, 163, 184, 0.08), transparent 60%),
    var(--deep-navy);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.trust-card {
  display: grid;
  gap: 14px;
  min-height: 280px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(15, 25, 35, 0.7);
  backdrop-filter: blur(8px);
}

.trust-mark {
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 999px;
  font-weight: 900;
}

.trust-mark.ok { background: rgba(34, 197, 94, 0.16); color: var(--rp-green); }
.trust-mark.watch { background: rgba(225, 191, 39, 0.16); color: var(--signal-gold); }
.trust-mark.service { background: rgba(235, 90, 48, 0.16); color: var(--ignition-orange); }

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
}

.faq details {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(15, 25, 35, 0.6);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: border-color 200ms ease, background 200ms ease;
}

.faq details[open] {
  border-color: rgba(235, 90, 48, 0.4);
  background: rgba(30, 42, 58, 0.7);
}

.faq summary {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 800;
  color: var(--cloud-white);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(235, 90, 48, 0.16);
  color: var(--ignition-orange);
  font-size: 18px;
  font-weight: 800;
  transition: transform 220ms var(--ease-out-expo);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq .faq-body {
  padding: 0 24px 22px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.7;
}

/* ---------- Beta CTA ---------- */
.beta-band {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-soft);
  background:
    radial-gradient(900px 400px at 80% 0%, rgba(235, 90, 48, 0.1), transparent 60%),
    var(--deep-navy);
}

.beta-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(380px, 0.78fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: center;
  width: min(100% - 48px, var(--max));
  margin: 0 auto;
  padding: clamp(80px, 9vw, 140px) 0;
}

.copy-lines {
  display: grid;
  gap: 10px;
  max-width: 760px;
  margin: 30px 0 0;
}

.copy-lines span {
  position: relative;
  padding-left: 18px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.copy-lines span::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 4px;
  height: calc(100% - 8px);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ignition-orange), rgba(235, 90, 48, 0));
}

.beta-form {
  display: grid;
  gap: 16px;
  padding: 32px;
  border: 1px solid rgba(88, 114, 145, 0.4);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(30, 42, 58, 0.86), rgba(22, 34, 49, 0.62));
  backdrop-filter: blur(20px);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.36);
}

.beta-form label {
  display: grid;
  gap: 8px;
}

.beta-form label span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.beta-form input,
.beta-form select {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(11, 19, 28, 0.78);
  color: var(--cloud-white);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.beta-form input:focus,
.beta-form select:focus {
  border-color: var(--ignition-orange);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(235, 90, 48, 0.18);
}

.button-primary.full { width: 100%; }

.form-note {
  min-height: 22px;
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
}

/* ---------- Sticky CTA (mobile) ---------- */
.sticky-cta {
  position: fixed;
  z-index: 35;
  right: 16px;
  bottom: 16px;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: calc(100% - 32px);
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(11, 19, 28, 0.92);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(140%);
  transition: opacity 220ms ease, transform 240ms var(--ease-out-expo);
}

.sticky-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.sticky-cta .button-primary,
.sticky-cta .button-ghost {
  min-height: 44px;
  padding: 0 12px;
}

/* ---------- Footer ---------- */
.footer {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 64px var(--gutter) 80px;
  border-top: 1px solid var(--border);
  background: var(--deep-navy-2);
}

.footer-col h3 {
  margin-bottom: 8px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
}

.footer-col a {
  transition: color 200ms ease;
}

.footer-col a:hover { color: var(--cloud-white); }

.footer p {
  margin: 14px 0 0;
  color: var(--text-dim);
  font-size: 13px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 18px var(--gutter);
  border-top: 1px solid var(--border-soft);
  background: var(--deep-navy-2);
  color: var(--text-dim);
  font-size: 12px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-video,
  .sync-banner i,
  .brand-mark span,
  .chassis::after,
  .marquee,
  .dot::after,
  .node::after,
  .telemetry-pill::before,
  .eyebrow::before {
    animation: none;
  }

  .hero-video { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
  }
  .b-1 { grid-column: span 4; grid-row: span 2; }
  .b-2 { grid-column: span 4; grid-row: span 1; }
  .b-3 { grid-column: span 4; grid-row: span 1; }
  .b-4, .b-5, .b-6 { grid-column: span 2; grid-row: span 1; }

  .specs-grid { grid-template-columns: repeat(3, 1fr); }
  .spec:nth-child(3) { border-right: 0; }
  .spec:nth-child(4), .spec:nth-child(5), .spec:nth-child(6) {
    border-top: 1px solid var(--border-soft);
  }
}

@media (max-width: 1080px) {
  .hero-layout,
  .beta-layout,
  .translation-band,
  .report-section,
  .section-head {
    grid-template-columns: 1fr;
  }

  .hero-instrument { max-width: 720px; }

  .steps,
  .trust-grid,
  .personas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .top-nav { height: 64px; padding: 0 18px; }
  .nav-toggle { display: grid; }
  .site-menu {
    position: fixed;
    inset: 64px 0 auto;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 24px 18px 32px;
    border-bottom: 1px solid var(--border);
    background: rgba(11, 19, 28, 0.98);
    backdrop-filter: blur(20px);
  }
  .top-nav.open .site-menu {
    display: grid;
    gap: 18px;
  }

  .hero-layout,
  .beta-layout,
  .section { width: min(100% - 32px, var(--max)); }

  .hero-layout,
  .beta-layout {
    min-height: auto;
    padding-top: 110px;
    padding-bottom: 56px;
  }

  .hero-actions,
  .mini-sync,
  .mode-pills { display: grid; }

  .button-primary,
  .button-ghost { width: 100%; }

  .phone-frame { padding: 18px; transform: none; }
  .phone-top strong { font-size: 42px; }
  .sensor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rig-card { grid-template-columns: 1fr; }
  .telemetry-pill { right: 0; }

  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .b-1, .b-2, .b-3, .b-4, .b-5, .b-6 {
    grid-column: span 1;
    grid-row: span 1;
  }

  .specs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .spec { border-right: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
  .spec:nth-child(2n) { border-right: 0; }
  .spec:last-child, .spec:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

  .compare-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 18px;
  }
  .compare-row:first-child { display: none; }

  .steps,
  .trust-grid,
  .personas { grid-template-columns: 1fr; }

  .translation-band,
  .report-section { padding: 72px 18px; }

  .paper { min-height: auto; padding: 24px; transform: none; }
  .paper-sticker { width: 72px; height: 72px; right: -12px; }

  .footer { grid-template-columns: 1fr 1fr; padding: 48px 24px 96px; }

  .sticky-cta { display: grid; }
}

@media (max-width: 540px) {
  .footer { grid-template-columns: 1fr; }
  .specs-grid { grid-template-columns: 1fr; }
  .spec { border-right: 0; }
}

/* =========================================================
   Polish layer — additions on top of base
   ========================================================= */

/* Universal focus ring — keyboard only */
:focus-visible {
  outline: 2px solid var(--ignition-glow);
  outline-offset: 3px;
  border-radius: 8px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ignition-glow);
  outline-offset: 3px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
}

/* Soft selection */
::selection {
  background: rgba(235, 90, 48, 0.42);
  color: white;
}

/* Korean letter-spacing tune-up */
:lang(ko) h1,
:lang(ko) h2,
:lang(ko) h3,
html[lang="ko"] h1,
html[lang="ko"] h2,
html[lang="ko"] h3 {
  letter-spacing: -0.035em;
}

html[lang="ko"] body {
  letter-spacing: -0.005em;
}

/* Refined heading rendering */
h1,
h2 {
  font-feature-settings: "ss01", "cv11", "kern", "calt", "case";
}

/* Subtle hero scroll indicator */
.scroll-hint {
  position: absolute;
  z-index: 3;
  bottom: 28px;
  left: 50%;
  display: grid;
  gap: 10px;
  justify-items: center;
  transform: translateX(-50%);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0.85;
  animation: scroll-hint-fade 3.4s var(--ease-in-out) infinite;
}

.scroll-hint::before {
  content: "";
  width: 1px;
  height: 38px;
  background: linear-gradient(180deg, transparent, var(--text-secondary), transparent);
  animation: scroll-hint-line 2.4s var(--ease-in-out) infinite;
}

@keyframes scroll-hint-fade {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes scroll-hint-line {
  0% { transform: translateY(-12px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* Persona icons (SVG-friendly) */
.persona-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.6;
}

/* Persona icon colors (cool slate → warm bronze → brand orange) are set once
   in the base .persona-icon.driver/.enthusiast/.shop rules near the personas
   block — no re-declaration needed here. */

/* SVG vehicle silhouette inside chassis (top-down sedan, brand-tinted) */
.chassis-svg {
  position: absolute;
  inset: 14px;
  width: calc(100% - 28px);
  height: calc(100% - 28px);
  pointer-events: none;
  opacity: 0.7;
}

.chassis-svg path,
.chassis-svg rect {
  fill: none;
  stroke: var(--text-secondary);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chassis-svg .body          { stroke: rgba(148, 163, 184, 0.82); stroke-width: 1.6; }
.chassis-svg .roof          { stroke: rgba(148, 163, 184, 0.58); stroke-width: 1.1; fill: rgba(15, 25, 35, 0.40); }
.chassis-svg .sunroof       { stroke: rgba(148, 163, 184, 0.55); stroke-width: 0.9; fill: rgba(15, 25, 35, 0.55); }
.chassis-svg .glass-front,
.chassis-svg .glass-rear    { stroke: rgba(148, 163, 184, 0.50); stroke-width: 0.9; }
.chassis-svg .crease        { stroke: rgba(148, 163, 184, 0.40); stroke-width: 0.7; stroke-dasharray: 2 2; }
.chassis-svg .mirror        { stroke: rgba(148, 163, 184, 0.7); stroke-width: 0.9; fill: rgba(148, 163, 184, 0.10); }
.chassis-svg .lamp-front    { stroke: rgba(255, 244, 196, 0.85); stroke-width: 1.8; stroke-linecap: round; }
.chassis-svg .lamp-rear     { stroke: rgba(235, 90, 48, 0.85); stroke-width: 1.8; stroke-linecap: round; }
.chassis-svg .wheel         { stroke: rgba(148, 163, 184, 0.9); stroke-width: 1.0; fill: rgba(11, 19, 28, 0.7); }
/* Driveshaft — longitudinal centreline (front-to-rear). Brand-orange dashed
   so the only chromatic accent on the silhouette ties to Ignition Orange. */
.chassis-svg .driveshaft    { stroke: rgba(235, 90, 48, 0.55); stroke-width: 1.4; stroke-dasharray: 3 3; stroke-linecap: round; }
/* Axle lines — transverse (left↔right), faintly visible behind body */
.chassis-svg .axle-line     { stroke: rgba(148, 163, 184, 0.32); stroke-width: 0.8; stroke-dasharray: 1 2; }

/* Hero parallax — applied via JS through CSS variable.
   Composes with .reveal so that the entrance animation isn't silently
   overwritten by the parallax transform. */
.hero-copy,
.hero-instrument {
  --py: 0px;
  transform: translateY(var(--py));
  will-change: transform;
}

.hero-copy.reveal,
.hero-instrument.reveal {
  transform: translateY(calc(28px + var(--py)));
}

.hero-copy.reveal.in-view,
.hero-instrument.reveal.in-view {
  transform: translateY(var(--py));
}

/* Compare-cell icon swap */
.compare-cell.win::before,
.compare-cell.lose::before {
  display: inline-grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  color: rgba(15, 25, 35, 0);
  flex: 0 0 auto;
}

.compare-cell.win {
  color: #d6f5e8;
}

.compare-cell.win::before {
  content: "✓";
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.32), rgba(34, 197, 94, 0.14));
  border: 1px solid rgba(34, 197, 94, 0.42);
  color: #86efac;
  font-size: 11px;
}

.compare-cell.lose {
  color: var(--text-secondary);
}

.compare-cell.lose::before {
  content: "—";
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.22);
  color: var(--text-secondary);
  font-size: 11px;
}

/* Better link underlines on body copy (subtle) */
.faq-body a,
.copy-lines a,
.persona p a {
  border-bottom: 1px dashed rgba(148, 163, 184, 0.4);
  transition: border-color 200ms ease, color 200ms ease;
}

.faq-body a:hover,
.copy-lines a:hover,
.persona p a:hover {
  color: var(--cloud-white);
  border-bottom-color: var(--ignition-orange);
}

/* Hero — bigger, more dramatic title accent */
.hero h1 {
  position: relative;
}

.hero h1 .gradient-text {
  background: linear-gradient(120deg, var(--ignition-orange) 0%, #f59e0b 35%, var(--rp-teal) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  background-position: 0% 50%;
  animation: gradient-sweep 8s linear infinite;
}

@keyframes gradient-sweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Animated background grid lines on hero (subtle motion) */
.hero .engineering-grid {
  animation: grid-drift 22s linear infinite;
}

@keyframes grid-drift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 56px 56px, 56px 56px; }
}

/* Button glow accent */
.button-primary {
  position: relative;
  overflow: hidden;
}

.button-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 600ms var(--ease-out-expo);
  pointer-events: none;
}

.button-primary:hover::before,
.button-primary:focus-visible::before {
  transform: translateX(100%);
}

/* Step-card numerical accent */
.step-num {
  font-variant-numeric: tabular-nums;
}

.step-card {
  position: relative;
}

.step-card .step-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    220px 160px at var(--gx, 50%) var(--gy, 50%),
    rgba(235, 90, 48, 0.16),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}

.step-card:hover .step-glow {
  opacity: 1;
}

/* Spec strong: highlight the numeric portion */
.spec strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

/* FAQ smoother open animation via grid trick */
.faq details[open] .faq-body {
  animation: faq-open 320ms var(--ease-out-expo);
}

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Beta form: subtle floating label feel */
.beta-form label:focus-within span {
  color: var(--ignition-glow);
}

/* Marquee fade edges */
.marquee-band {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}

/* Hero video subtle zoom-in over time */
@media (prefers-reduced-motion: no-preference) {
  .hero-video {
    animation: hero-zoom 28s var(--ease-in-out) infinite alternate;
  }
}

@keyframes hero-zoom {
  from { transform: scale(1.04); }
  to { transform: scale(1.12); }
}

/* When video is unavailable, show a CSS-only animated backdrop */
.hero-fallback {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 600ms var(--ease-out-expo);
  background:
    radial-gradient(360px 220px at 30% 60%, rgba(235, 90, 48, 0.16), transparent 60%),
    radial-gradient(420px 280px at 75% 35%, rgba(148, 163, 184, 0.14), transparent 60%),
    radial-gradient(560px 360px at 50% 110%, rgba(148, 163, 184, 0.08), transparent 60%);
}

.hero-fallback::before,
.hero-fallback::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(72px);
  mix-blend-mode: screen;
}

.hero-fallback::before {
  top: 22%;
  left: 18%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(235, 90, 48, 0.42), transparent 60%);
  animation: orb-a 18s var(--ease-in-out) infinite alternate;
}

.hero-fallback::after {
  top: 38%;
  right: 12%;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(148, 163, 184, 0.36), transparent 60%);
  animation: orb-b 22s var(--ease-in-out) infinite alternate;
}

@keyframes orb-a {
  to { transform: translate(60px, -40px) scale(1.18); }
}

@keyframes orb-b {
  to { transform: translate(-80px, 50px) scale(1.22); }
}

.hero-video.is-unavailable ~ .hero-fallback,
.hero:not([data-has-video]) .hero-fallback {
  opacity: 1;
}

/* Subtle paper grain on report */
.paper {
  background-image:
    radial-gradient(circle at 8% 14%, rgba(15, 25, 35, 0.018), transparent 6%),
    radial-gradient(circle at 22% 80%, rgba(15, 25, 35, 0.018), transparent 8%),
    radial-gradient(circle at 88% 18%, rgba(15, 25, 35, 0.022), transparent 6%),
    radial-gradient(circle at 90% 84%, rgba(15, 25, 35, 0.018), transparent 6%),
    #ffffff;
}

/* Footer brand mark size tweak */
.footer .brand { margin-bottom: 6px; }

/* Pause animations when a section scrolls offscreen.
   The `paused` class is toggled by an IntersectionObserver in script.js.
   Combined with the visibilitychange-aware spectrum loop, this keeps the
   compositor cool in steady-state. */
.paused,
.paused *,
.paused *::before,
.paused *::after {
  animation-play-state: paused !important;
}

/* Reduced motion — disable additional animations */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .gradient-text,
  .hero .engineering-grid,
  .hero-fallback::before,
  .hero-fallback::after,
  .scroll-hint,
  .scroll-hint::before,
  .button-primary::before {
    animation: none;
  }
}

/* =========================================================
   Polish v3 — additions from multi-agent review
   ========================================================= */

/* Smooth scroll offset for fixed nav (skip-link friendly) */
html {
  scroll-padding-top: 88px;
}

/* Skip to content — keyboard accessibility */
.skip-link {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  background: var(--ignition-orange);
  color: white;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  transform: translateY(-110%);
  transition: transform 180ms var(--ease-out-expo);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--cloud-white);
  outline-offset: 2px;
}

/* Self-host font-display swap fallback declarations
   (overrides for any third-party @font-face rule that didn't set swap) */
@font-face {
  font-family: "Pretendard Variable";
  font-display: swap;
  src: local("Pretendard Variable");
}

@font-face {
  font-family: "Inter";
  font-display: swap;
  src: local("Inter"), local("Inter-Regular");
}

/* Step number — bigger numeric anchor, replacing the eyebrow-only treatment */
.step-card .step-num {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--ignition-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.step-card .step-num::after {
  content: attr(data-num);
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--cloud-white);
  margin-left: 4px;
}

.step-card .step-num::before {
  width: 18px;
}

/* Button shadow rebalance — primary tighter, ghost gets a subtle base */
.button-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 24px rgba(235, 90, 48, 0.32);
}

.button-primary:hover,
.button-primary:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 14px 38px rgba(235, 90, 48, 0.42);
}

.button-ghost {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}

/* SAMPLE chip on the report mockup */
.paper-sample-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px dashed #b04318;
  border-radius: 6px;
  background: rgba(235, 90, 48, 0.08);
  color: #b04318;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.paper-head {
  flex-wrap: wrap;
  row-gap: 10px;
}

/* Sensor sync — replace permanent spinner with a check */
.sync-banner i.synced {
  border-color: rgba(34, 197, 94, 0.42);
  border-top-color: var(--rp-green);
  animation: none;
  display: grid;
  place-items: center;
  color: var(--rp-green);
}

.sync-banner i.synced::before {
  content: "✓";
  font-size: 18px;
  font-weight: 900;
}

/* Setup kit section ("필요한 것") */
.kit-section {
  background:
    radial-gradient(700px 300px at 80% 0%, rgba(235, 90, 48, 0.06), transparent 60%),
    var(--deep-navy);
}

.kit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.kit-card {
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(30, 42, 58, 0.7), rgba(22, 34, 49, 0.5));
  transition: border-color 220ms ease, transform 220ms var(--ease-out-expo);
}

.kit-card:hover {
  border-color: rgba(235, 90, 48, 0.3);
  transform: translateY(-2px);
}

.kit-card .kit-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  background: rgba(235, 90, 48, 0.12);
  color: var(--ignition-orange);
}

.kit-card .kit-icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.6;
}

.kit-card h3 {
  margin: 0;
  font-size: 16px;
}

.kit-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.kit-note {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 14px 18px;
  border: 1px dashed rgba(148, 163, 184, 0.32);
  border-radius: 14px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.kit-note strong {
  color: var(--cloud-white);
}

/* Trust grid: external signals row */
.trust-signals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(11, 19, 28, 0.62);
  overflow: hidden;
}

.trust-signal {
  display: grid;
  gap: 4px;
  padding: 22px 24px;
  border-right: 1px solid var(--border-soft);
}

.trust-signal:last-child { border-right: 0; }

.trust-signal span {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.trust-signal strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--cloud-white);
  letter-spacing: -0.01em;
}

.trust-signal em {
  font-style: normal;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Make .alert-list <i> non-italic and tabular */
.alert-list span i {
  font-style: normal;
  color: var(--text-secondary);
}

/* Sticky CTA — prefer a single primary on mobile */
@media (max-width: 540px) {
  .sticky-cta {
    grid-template-columns: 1fr;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  .sticky-cta .button-ghost {
    display: none;
  }
}

/* Footer pad respects iOS safe area */
@media (max-width: 900px) {
  .footer {
    padding-bottom: max(120px, calc(env(safe-area-inset-bottom) + 110px));
  }
}

/* Watch-state textual badge inside sensor card */
.sensor-grid .watch-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(225, 191, 39, 0.18);
  color: var(--signal-gold);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

/* Engineering grid in beta band — confirmed scoping */
.beta-band { position: relative; }

/* =========================================================
   Polish v4 — multi-agent audit (typography + i18n + overflow)
   - English-default font stack (Inter leads, Pretendard for KR only)
   - Per-language line-height / letter-spacing / feature-settings
   - Language toggle (segmented EN | KR pill in top-nav)
   - Box-overflow root-cause fixes across grid containers
   - Persona / heading text-wrap, sample chip, FAQ summary alignment
   - Magnetic CTA renamed to --magx/--magy (no clash with hero spotlight)
   - Hero parallax wrapped in prefers-reduced-motion: no-preference
   - Scroll-progress: scaleX instead of width transition
   ========================================================= */

/* Per-language typography refinements */
html[lang="en"] body { letter-spacing: 0.001em; }
html[lang="en"] p { line-height: 1.58; }
html[lang="en"] .hero-lede {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
}
html[lang="en"] h3 { line-height: 1.18; }
html[lang="en"] .eyebrow { letter-spacing: 0.16em; }
html[lang="en"] .step-num { letter-spacing: 0.18em; }

html[lang="ko"] body { letter-spacing: -0.005em; }
html[lang="ko"] h1,
html[lang="ko"] h2,
html[lang="ko"] h3 { letter-spacing: -0.035em; }
html[lang="ko"] p { line-height: 1.7; }
html[lang="ko"] .eyebrow { letter-spacing: 0.12em; }

/* Buttons: airier in English, slightly tighter in Korean */
html[lang="en"] .button-primary,
html[lang="en"] .button-ghost,
html[lang="en"] .nav-cta {
  font-size: 14.5px;
  font-weight: 750;
  letter-spacing: 0.005em;
}

/* Tabular numerics — extend to confidence ring + trust-signal numerics */
.confidence-ring strong,
.trust-signal strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
}

/* Footer-bottom: tabular for the © year */
.footer-bottom { font-variant-numeric: tabular-nums; }

/* SAMPLE chip: 11px, gentler letterspacing */
.paper-sample-chip {
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* ---------- Language toggle (segmented pill) ---------- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  margin-left: auto;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(15, 25, 35, 0.55);
  backdrop-filter: blur(8px);
  box-sizing: border-box;
  order: 3;
}

.site-menu { order: 2; }
.brand { order: 1; }
.nav-toggle { order: 4; }

.lang-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-sizing: border-box;
  transition: color 180ms ease, background 180ms ease;
}

.lang-toggle button:hover {
  color: var(--cloud-white);
}

.lang-toggle button[aria-pressed="true"] {
  background: linear-gradient(180deg, var(--ignition-glow), var(--ignition-orange));
  color: white;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.lang-toggle button:focus-visible {
  outline: 2px solid var(--ignition-glow);
  outline-offset: 3px;
}

/* Visually hidden screen-reader announce region */
.sr-announce {
  position: fixed;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot — visually hidden but in tab/focus path for actual humans (skipped via tabindex=-1) */
.beta-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Overflow audit fixes ---------- */

/* phone-top right column "200 Hz" — tame the inline 30px and stop column collapse */
.phone-top { gap: 14px; }
.phone-top > div { min-width: 0; }
.phone-top-rate {
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

/* Sensor grid — stack the Watch badge below "RL" so it never wraps inline */
.sensor-grid div { min-width: 0; overflow: visible; }
.sensor-grid .is-watch strong {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  align-items: center;
  line-height: 1.05;
}
.sensor-grid .watch-badge {
  margin-top: 0;
  white-space: nowrap;
}

/* Sync banner — left text column shrinkable, "4 of 4 connected" no-wrap */
.sync-banner > div { min-width: 0; flex: 1; }
.sync-banner strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Compare row — give text columns a real shrinkable basis */
.compare-row {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
}
.compare-row > * { min-width: 0; }
.compare-cell {
  align-items: flex-start;
  overflow-wrap: anywhere;
}
.compare-cell.win,
.compare-cell.lose {
  align-items: flex-start;
}
.compare-cell.win::before,
.compare-cell.lose::before {
  flex: 0 0 auto;
  margin-top: 2px;
}
.compare-rp { color: var(--ignition-orange); }

/* Report-metrics — minmax(0, 1fr) so cell text doesn't push out */
.report-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.report-metrics strong { overflow-wrap: anywhere; }

/* Alert list — wider badge column + breakable right cell */
.alert-list span {
  grid-template-columns: 64px minmax(0, 1fr);
}
.alert-list i { overflow-wrap: anywhere; }

/* Persona headline balance (the minmax(0,1fr) overflow guard is folded into
   the base .persona li rule) */
.persona h3 {
  text-wrap: balance;
}

/* Drop hard <br> in persona h3 for English, keep for Korean (KR keeps its
   original rhetorical line break) */
html[lang="en"] .persona h3 br { display: none; }

/* Specs — keep numerics on one line at desktop; shrink the cap if too tight */
.spec strong {
  white-space: nowrap;
  font-size: clamp(26px, 2.8vw, 38px);
}
/* DELETED: redundant default-column rules for .specs-grid / .steps /
   .trust-grid / .personas / .kit-grid that an earlier polish layer
   placed AFTER all the @media (max-width: ...) blocks. Source order
   meant they overrode every responsive collapse — at 1024px viewport
   the steps section rendered as 4-col despite the 1080-block setting
   it to 2-col, and the same for kit-grid / personas / trust-grid /
   specs-grid. The original defaults at lines 1158 (.steps), 2010
   (.personas), 2070 (.trust-grid), 3023 (.kit-grid), 3019 (.specs-
   grid) already declare the correct desktop column counts and the
   `minmax(0, 1fr)` overflow safety is preserved by the responsive
   layers themselves. */

/* FAQ summary — keep "+" perfectly aligned with first text line */
.faq summary {
  align-items: flex-start;
}
.faq summary::after {
  flex: 0 0 28px;
  align-self: flex-start;
  margin-top: 2px;
}

/* Case-card mechanic line — slightly smaller in English so it fits two lines */
html[lang="en"] .case-card strong {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.45;
}

/* Trust signals row — minmax for English-longer captions */
.trust-signals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust-signal { min-width: 0; }
.trust-signal strong { overflow-wrap: anywhere; }

/* Hero proof chips — let the row wrap cleanly */
.hero-proof { row-gap: 8px; }

/* ---------- Magnetic CTA: rename CSS vars to avoid hero --mx/--my collision.
   Keep `inline-flex` so the parent .button-primary's flex centring + arrow
   pseudo + `white-space: nowrap` survive — `inline-block` was making "Get
   launch alert (30 sec)" wrap mid-text inside the button. ------------------- */
[data-magnetic] {
  --magx: 0px;
  --magy: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(var(--magx), var(--magy));
  transition: transform 220ms var(--ease-out-expo);
  will-change: transform;
}

.button-primary[data-magnetic]:hover,
.button-primary[data-magnetic]:focus-visible {
  transform: translate(var(--magx), calc(var(--magy) - 2px));
}

/* ---------- Hero parallax respects reduced-motion explicitly ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Already declared at the polish-v3 layer; the rules below RE-DECLARE so
     reduced-motion users definitely don't get the 28px translate stuck on. */
  .hero-copy.reveal,
  .hero-instrument.reveal {
    transform: translateY(calc(28px + var(--py)));
  }
  .hero-copy.reveal.in-view,
  .hero-instrument.reveal.in-view {
    transform: translateY(var(--py));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy,
  .hero-instrument {
    transform: none !important;
    --py: 0px;
  }
}

/* ---------- Scroll-progress: prefer transform over width animation ---------- */
.scroll-progress {
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 80ms linear;
}

/* ---------- Lang toggle responsive: keep visible on mobile, slot before hamburger ---------- */
@media (max-width: 900px) {
  .lang-toggle {
    margin-left: auto;
    margin-right: 8px;
  }
  .lang-toggle button {
    min-width: 30px;
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
  }
}

/* ---------- Top nav: tighter gap so toggle fits at 1080-1200px ---------- */
@media (min-width: 901px) and (max-width: 1200px) {
  .site-menu { gap: 18px; font-size: 12.5px; }
  .nav-cta { padding: 0 14px; min-height: 36px; }
  .lang-toggle { margin-left: 14px; }
}

/* ---------- Honest small-viewport heading wrapping ---------- */
@media (max-width: 540px) {
  h1 br, h2 br { display: none; }
  .step-card { min-height: auto; }
  .trust-signals { grid-template-columns: 1fr; }
  .trust-signal { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .trust-signal:last-child { border-bottom: 0; }
}

/* =========================================================
   Polish v6 — typography for stat blocks, nav breathing room,
   and FAQ visual depth (Frequently asked → editorial flavour)
   ========================================================= */

/* Vertical separator between language-toggle cluster and the menu CTA — anchors
   the brand+lang group as one chunk rather than 8 floating items. */
.lang-toggle::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 18px;
  margin-left: clamp(10px, 1.2vw, 20px);
  background: rgba(148, 163, 184, 0.22);
  vertical-align: middle;
}

/* Mobile nav height stays compact even after the desktop bump to 76px */
@media (max-width: 900px) {
  .top-nav { height: 64px; gap: 14px; }
  .lang-toggle::after { display: none; }
}

/* === SPECS — premium stat block (replaces .spec strong flex-wrap pattern) === */
.spec {
  position: relative;
  padding-top: 14px;
}
.spec-eyebrow {
  position: relative;
  padding-top: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10.5px;
  color: var(--text-dim);
}
.spec-eyebrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--ignition-orange), transparent);
  opacity: 0.7;
}

/* The figure is the new big-number container; replaces the legacy flex-wrap
   .spec strong pattern. Number leads, unit subordinate. */
.spec strong.spec-figure {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 4px;
  white-space: nowrap;
  line-height: 1;
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 4px;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}

.spec-num {
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.95;
  background: linear-gradient(135deg, #ffffff 0%, #e1bf27 55%, #eb5a30 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(235, 90, 48, 0.18);
}

.spec-num.has-prefix {
  letter-spacing: -0.02em;
}

.spec-num .spec-prefix {
  font-weight: 700;
  opacity: 0.85;
  margin-right: 0.04em;
}

.spec-num .spec-suffix-glyph {
  font-weight: 800;
}

.spec-unit {
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* No text-transform — preserve "Hz", "pt", "min" as written */
  color: var(--text-secondary);
  align-self: baseline;
  transform: translateY(-0.12em);
  margin-left: 4px;
  opacity: 0.9;
  -webkit-text-fill-color: currentColor;
}

@media (max-width: 960px) {
  .spec-num { font-size: clamp(30px, 4.6vw, 44px); }
  .spec-unit { font-size: 0.46em; }
}

/* === FAQ — multi-paragraph depth, comfortable rhythm === */
.faq {
  display: grid;
  gap: 14px;
  max-width: 940px;
  margin: 0 auto;
}

.faq summary {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.005em;
  padding: 22px 26px;
}

.faq .faq-body {
  padding: 0 26px 26px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.7;
}

.faq .faq-body p { margin: 0 0 14px; }
.faq .faq-body p:last-child { margin-bottom: 0; }

.faq .faq-body strong {
  color: var(--cloud-white);
  font-weight: 700;
}

.faq .faq-body em {
  color: #cbd5e1;
  font-style: italic;
}

html[lang="ko"] .faq .faq-body { line-height: 1.78; }

/* =========================================================
   Polish v7 — selective motion (multi-agent reviewed)
   Composite-only (transform/opacity), gated by reduced-motion,
   piggybacks existing IntersectionObservers + .paused class.
   ========================================================= */

/* Body data-motion flag — single switch for opt-in motions.
   JS sets it on boot; reduced-motion preference flips it to "reduced". */
body[data-motion="reduced"] [data-motion-rich] { animation: none !important; transition: none !important; }

/* ---------- 1. RL "Watch" sensor: asymmetric pulse cadence ----------
   Replaces the generic ping with a faster, warmer halo. Tells the eye
   which corner the system is calling out, without an extra label. */
@media (prefers-reduced-motion: no-preference) {
  .sensor-grid .is-watch .dot.watch::after {
    animation: watch-halo 1.6s var(--ease-in-out) infinite;
    border-color: var(--signal-gold);
  }
  .sensor-grid .is-watch .watch-badge {
    animation: watch-badge-flash 4s ease-in-out infinite;
    animation-delay: 1.2s;
  }
  /* RL node in the chassis rig also gets a stronger pulse */
  .node.rl::after {
    animation-duration: 1.4s;
  }
}

@keyframes watch-halo {
  0%   { transform: scale(0.85); opacity: 0.7; }
  60%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

@keyframes watch-badge-flash {
  0%, 90%, 100% { color: var(--signal-gold); transform: scale(1); }
  92%           { color: var(--ignition-glow); transform: scale(1.06); }
  96%           { color: var(--signal-gold); transform: scale(1); }
}

/* ---------- 2. Setup-kit SVG icons: animate on hover/focus ---------- */
.kit-svg [class] {
  transition:
    transform 480ms var(--ease-out-expo),
    opacity 280ms ease,
    stroke-dashoffset 600ms var(--ease-out-expo);
  transform-box: fill-box;
  transform-origin: center;
}

/* Phone — sync wave */
.kit-svg-phone .phone-wave {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  opacity: 0;
}
.kit-card:hover .kit-svg-phone .phone-wave,
.kit-card:focus-within .kit-svg-phone .phone-wave {
  stroke-dashoffset: 0;
  opacity: 0.85;
}

/* Sensors — staggered blink */
.kit-svg-sensors .sensor-rect {
  transition: opacity 220ms ease, fill 220ms ease;
  fill: transparent;
}
.kit-card:hover .kit-svg-sensors .sensor-rect,
.kit-card:focus-within .kit-svg-sensors .sensor-rect {
  fill: var(--signal-gold);
  fill-opacity: 0.18;
}
.kit-card:hover .kit-svg-sensors .sensor-rect[data-i="0"] { transition-delay: 0ms; }
.kit-card:hover .kit-svg-sensors .sensor-rect[data-i="1"] { transition-delay: 90ms; }
.kit-card:hover .kit-svg-sensors .sensor-rect[data-i="2"] { transition-delay: 270ms; }
.kit-card:hover .kit-svg-sensors .sensor-rect[data-i="3"] { transition-delay: 180ms; }

/* Mounts — outer ring rotates */
.kit-svg-mounts .mount-ring {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.kit-card:hover .kit-svg-mounts .mount-ring,
.kit-card:focus-within .kit-svg-mounts .mount-ring {
  transform: rotate(22deg);
}

/* Vehicle — body translates, wheels spin */
.kit-svg-vehicle .car-body { transform-box: fill-box; transform-origin: center; }
.kit-card:hover .kit-svg-vehicle .car-body,
.kit-card:focus-within .kit-svg-vehicle .car-body {
  transform: translateX(1.2px);
}
.kit-svg-vehicle .car-wheel {
  transform-box: fill-box;
  transform-origin: center;
}
.kit-card:hover .kit-svg-vehicle .car-wheel,
.kit-card:focus-within .kit-svg-vehicle .car-wheel {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .kit-card:hover .kit-svg * { transform: none !important; }
  .kit-svg-phone .phone-wave { opacity: 0.55; stroke-dashoffset: 0; }
}

/* ---------- 3. Compare table: ✓ / — pop-in on row reveal ---------- */
.compare-row.reveal .compare-cell.win::before,
.compare-row.reveal .compare-cell.lose::before {
  transform: scale(0.6);
  opacity: 0;
  transition:
    transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 220ms ease-out;
  transition-delay: calc(var(--row-i, 0) * 60ms + 80ms);
}

.compare-row.reveal.in-view .compare-cell.win::before,
.compare-row.reveal.in-view .compare-cell.lose::before {
  transform: scale(1);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .compare-row.reveal .compare-cell.win::before,
  .compare-row.reveal .compare-cell.lose::before {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* ---------- 4. Bento — corner-gauges fill from 0 + confidence ring ----------
   Meter <i> elements keep their inline `style="width: 24%"` etc. for the
   target size. We animate scaleX (transform-origin: left) — the bar grows
   from invisible to its inline width. Composite-only, no layout. */
.bento-card .corner-gauges .meter i {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.b-2.reveal.in-view .corner-gauges .meter i {
  transform: scaleX(1);
}

.b-2.reveal.in-view .corner-gauges > div:nth-child(1) .meter i { transition-delay: 80ms; }
.b-2.reveal.in-view .corner-gauges > div:nth-child(2) .meter i { transition-delay: 160ms; }
.b-2.reveal.in-view .corner-gauges > div:nth-child(3) .meter i { transition-delay: 240ms; }
.b-2.reveal.in-view .corner-gauges > div:nth-child(4) .meter i { transition-delay: 320ms; }

/* Confidence ring — fill the conic gradient on enter */
.b-5 .confidence-ring {
  --ring-pct: 0%;
  background: conic-gradient(var(--rp-teal) 0% var(--ring-pct), rgba(46, 62, 82, 0.5) var(--ring-pct) 100%);
  transition: --ring-pct 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

@property --ring-pct {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}

.b-5.reveal.in-view .confidence-ring { --ring-pct: 84%; }

@media (prefers-reduced-motion: reduce) {
  .bento-card .corner-gauges .meter i { transition: none; transform: scaleX(1); }
  .b-5 .confidence-ring { transition: none; --ring-pct: 84%; }
}

/* ---------- 5. Sample report sticker: heartbeat pulse ---------- */
@media (prefers-reduced-motion: no-preference) {
  .paper-sticker {
    animation: sticker-pulse 2.8s ease-in-out infinite;
    animation-delay: 0.6s;
  }
}

@keyframes sticker-pulse {
  0%, 92%, 100% { transform: rotate(8deg) scale(1); box-shadow: 0 14px 40px rgba(235, 90, 48, 0.4); }
  4%            { transform: rotate(8deg) scale(1.04); box-shadow: 0 14px 50px rgba(235, 90, 48, 0.55); }
  8%            { transform: rotate(8deg) scale(1); box-shadow: 0 14px 40px rgba(235, 90, 48, 0.4); }
  12%           { transform: rotate(8deg) scale(1.025); box-shadow: 0 14px 44px rgba(235, 90, 48, 0.48); }
  16%           { transform: rotate(8deg) scale(1); box-shadow: 0 14px 40px rgba(235, 90, 48, 0.4); }
}

/* Pause when report section scrolls offscreen via the existing IO */
.paused .paper-sticker { animation-play-state: paused; }

/* ---------- 6. Beta-form input focus — orange glow ring ---------- */
.beta-form input,
.beta-form select {
  transition:
    border-color 200ms ease,
    box-shadow 220ms ease;
}

.beta-form input:focus,
.beta-form select:focus {
  /* The original outline:0 + border-color is preserved; we add a soft glow */
  box-shadow:
    0 0 0 4px rgba(235, 90, 48, 0.16),
    0 8px 22px -10px rgba(235, 90, 48, 0.42);
}

.beta-form input:user-invalid:not(:placeholder-shown):not(:focus) {
  border-color: rgba(252, 165, 165, 0.55);
}

/* ---------- 7. FFT scan caret (driven by JS rAF — see script.js) ---------- */
.spectrum,
.bento-spectrum {
  position: relative;
}

.spectrum::after,
.bento-spectrum::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: var(--scan-x, 50%);
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(235, 90, 48, 0.85) 30%,
    rgba(235, 90, 48, 0.85) 70%,
    transparent
  );
  opacity: var(--scan-op, 0);
  pointer-events: none;
  transition: opacity 200ms ease;
  box-shadow: 0 0 12px rgba(235, 90, 48, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .spectrum::after,
  .bento-spectrum::after { display: none; }
}

/* ---------- 8. Live Hz pill jitter (JS-driven; CSS just smooths the swap) -- */
.telemetry-pill .live-hz {
  display: inline-block;
  min-width: 3.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: opacity 90ms ease;
}

.telemetry-pill .live-hz.swap { opacity: 0.45; }

/* =========================================================
   Polish v8 — marquee rhythm + spotlight sweep + speed-band dynamic
   ========================================================= */

/* ---------- Marquee per-item weight/opacity rhythm ----------
   Direction is already R→L (track translateX(0 → -50%)). We add a 4-beat
   visual cadence so the stream of 60+ vehicle names doesn't read as a flat
   wall of text. Static styling — no new animations, no fight with the
   hover-pause or .paused IO class. */
.marquee span:nth-child(4n + 1) { opacity: 0.62; font-weight: 700; }
.marquee span:nth-child(4n + 2) { opacity: 0.92; font-weight: 800; }
.marquee span:nth-child(4n + 3) { opacity: 0.50; font-weight: 600; }
.marquee span:nth-child(4n)     { opacity: 0.74; font-weight: 700; }

/* Brand-tinted separator dots every ~8 items (teal / gold rotation) */
.marquee span:nth-child(8n + 1)::after { background: rgba(148, 163, 184, 0.7); }
.marquee span:nth-child(8n + 5)::after { background: rgba(225, 191, 39, 0.6); }

/* ---------- Marquee spotlight sweep ----------
   Soft horizontal glow travels through the band on a cadence different from
   the items themselves, signalling "the system indexes across the catalog".
   Reuses existing :hover and IO `.paused` plumbing. */
@property --marquee-x {
  syntax: "<percentage>";
  initial-value: -10%;
  inherits: false;
}

.marquee-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse 280px 70% at var(--marquee-x) 50%,
    rgba(235, 90, 48, 0.10),
    transparent 70%
  );
  mix-blend-mode: screen;
  opacity: 0;
  animation: marquee-sweep 25s ease-in-out infinite;
}

@keyframes marquee-sweep {
  0%    { --marquee-x: -10%; opacity: 0; }
  6%    { opacity: 0.85; }
  56%   { --marquee-x: 110%; opacity: 0.85; }
  62%   { opacity: 0; }
  100%  { --marquee-x: 110%; opacity: 0; }
}

.marquee-band:hover::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee-band::after { animation: none; opacity: 0; }
}

/* ---------- Speed-band — cycling indicator + scan caret ----------
   The cycling outer ring transitions across the 4 pills on a 9.6s loop with
   a long 4.8s dwell over the .hot 40-60 mph pill — the dwell IS the message
   ("this is the band where the signal lives"). Triggered when the .b-3 card
   enters viewport via the existing reveal observer. */
.b-3 .speed-bands {
  position: relative;
}

.b-3 .speed-bands::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  width: calc(25% - 4px);
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 16px;
  box-shadow: 0 0 16px rgba(148, 163, 184, 0.32);
  pointer-events: none;
  opacity: 0;
  transform: translateX(0);
  transition: opacity 320ms ease;
}

.b-3.reveal.in-view .speed-bands::before {
  opacity: 1;
  animation: speed-cycle 9.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes speed-cycle {
  0%, 12%   { transform: translateX(2px); }                 /* 0-30 */
  16%, 28%  { transform: translateX(calc(100% + 8px)); }    /* 30-50 */
  32%, 80%  { transform: translateX(calc(200% + 14px)); }   /* 40-60 (long dwell) */
  84%, 96%  { transform: translateX(calc(300% + 20px)); }   /* 60+ */
  100%      { transform: translateX(2px); }                 /* back to start */
}

/* Scan caret inside the .hot pill — adds "actively analysing" texture */
.speed-bands span.hot {
  position: relative;
  overflow: hidden;
}

.speed-bands span.hot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0.08) 55%,
    transparent 100%
  );
  transform: translateX(-100%);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: hot-scan 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes hot-scan {
  0%   { transform: translateX(-100%); }
  65%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .b-3.reveal.in-view .speed-bands::before {
    animation: none;
    transform: translateX(calc(200% + 14px));
  }
  .speed-bands span.hot::after { display: none; }
}

/* When the bento section scrolls offscreen, the existing .paused IO catches
   .speed-bands::before and span.hot::after via the `.paused *::after` rule
   declared earlier — no extra wiring needed. */

/* =========================================================
   Polish v13 — mobile + tablet responsive audit
   Two-agent audit (mobile @ 375/414, tablet @ 768/820/1024/1180).
   Synthesised into a single layer kept after every other override so
   intent is unambiguous in the cascade.
   ========================================================= */

/* ---------- iPad-landscape no-man's-land (961-1080) ---------- */
@media (min-width: 901px) and (max-width: 1080px) {
  /* B  — top nav was tight at 1024 (especially "Join beta" in EN mode) */
  .top-nav { gap: 18px; padding: 0 20px; }
  .site-menu { gap: 14px; font-size: 12px; }
  .nav-cta { padding: 0 12px; font-size: 12px; }

  /* D  — restore a 2-col hero between 901-1080 so iPad-landscape stops
     wasting horizontal real estate as a giant phone view */
  .hero-layout {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.7fr);
    gap: 36px;
    padding: 120px 0 72px;
  }
  .hero-instrument { max-width: 380px; }
  .phone-frame { transform: none; }

  /* H/I — bento was firing the 1180-block 4-col rule which produced 4+
     row tracks (visually >1200px tall on tablet). 2x3 grid with b-1 as
     the dominant 2-row hero card collapses height by ~600px. */
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(200px, auto);
  }
  .b-1 { grid-column: span 2; grid-row: span 2; }
  .b-2, .b-3 { grid-column: span 2; grid-row: span 1; }
  .b-4, .b-5, .b-6 { grid-column: span 1; grid-row: span 1; }

  /* K  — sample-paper rotate(-1.2deg) clipped past the section edge at
     this width. Smaller tilt keeps the visual idea without overflow. */
  .paper { transform: rotate(-0.6deg); }

  /* Q  — footer 4-col cramped at 1024; 3-col with the last col spanning
     2 reads as a tasteful directory layout instead of a 4-col cram. */
  .footer { grid-template-columns: 1.3fr 1fr 1fr; padding: 56px 32px 64px; gap: 32px; }
  .footer-col:nth-child(4) { grid-column: 2 / span 2; }
}

/* E  — at 1080-1200 the right hero column swallowed the chassis SVG */
@media (min-width: 1081px) and (max-width: 1200px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, 0.62fr); gap: 36px; }
}

/* ---------- iPad-portrait 541-900 (1080 block already collapses many) ---------- */
@media (min-width: 541px) and (max-width: 900px) {
  /* J  — compare row 1.25fr/1fr/1fr was overflowing KR copy. Give the
     header column more room and shrink data-cell font slightly. */
  .compare-row {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    padding: 14px 18px;
    gap: 8px;
  }
  .compare-cell { font-size: 13px; }
}

/* F  — kit-grid 4-col was rendering ~170px cells at 768; 2-col at 541-960. */
@media (min-width: 541px) and (max-width: 960px) {
  .kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* C  — hero phone-frame on iPad-portrait spread to ~720px, breaking the
   "phone preview" mental model. Cap and centre. */
@media (min-width: 541px) and (max-width: 1080px) {
  .hero-instrument { max-width: 460px; margin-inline: auto; }
}

/* V20 — scroll-hint sits at the hero's bottom edge. When hero stacks
   single-column it lands on top of the rig-card caption. Hide whenever
   hero is stacked (≤900). */
@media (max-width: 900px) {
  .scroll-hint { display: none; }
}

/* ---------- Mobile ≤540 — bulk of the audit fixes ---------- */
@media (max-width: 540px) {
  /* V1  — even tighter nav rail on 320-414px viewports */
  .top-nav { padding: 0 14px; gap: 10px; }

  /* V2  — H1 dominant but not overpowering on phones */
  h1 { font-size: 32px; line-height: 1.15; }

  /* V3  — phone-top "84" was a hard 50px (no clamp). Right "200 Hz" was
     already clamped, left wasn't. Match. */
  .phone-top strong { font-size: clamp(36px, 8vw, 42px); }
  .phone-frame { padding: 14px; }
  .telemetry-pill { right: 0; top: -14px; padding: 6px 10px; font-size: 11px; }

  /* V6  — kit-grid had no responsive collapse anywhere; cells were ~71px
     wide on iPhone with 48px icons → overflow. Stack to 1-col. */
  .kit-grid { grid-template-columns: 1fr; }

  /* V8  — bento internals still in their desktop column counts:
     - .bento-spectrum 40 cols × 3px gap → bars rendered at ~3.5px (fuzz)
     - .corner-gauges 4 cols → labels wrapped
     - .speed-bands 4 cols → KR copy "60–100 km/h" wrapped to 2 lines */
  .bento-spectrum {
    grid-template-columns: repeat(24, minmax(0, 1fr));
    padding: 12px;
    min-height: 160px;
  }
  .bento-spectrum-overlay { inset: auto 12px 12px 12px; font-size: 9px; }
  .corner-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .speed-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The cycling indicator's keyframes are hard-coded to 4-col positions
     (translateX(calc(100% + 8px)) etc.). Hide on 2-col speed-bands. */
  .b-3 .speed-bands::before { display: none; }

  /* V11 — sample-report inner panels:
     - .report-metrics had 4 cols × ~50px each; "18.4 Hz" at 22px tabular
       overflowed as "18.4" / "Hz" on two lines.
     - .paper-sticker right:-12px was OK but the sticker is large at 86px.
       Shrink for phones. */
  .report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-metrics strong { font-size: 18px; }
  .paper { padding: 20px; }
  .paper-head { font-size: 12px; }
  .paper-sticker { width: 60px; height: 60px; right: -8px; top: -16px; font-size: 9px; }

  /* V16 — FAQ summary tap target friendlier on phones (text + 28px button
     was eating lots of horizontal space). */
  .faq summary { padding: 18px 18px; font-size: 15.5px; gap: 12px; }
  .faq .faq-body { padding: 0 18px 20px; font-size: 14px; }

  /* V17 — beta-form 32px outer padding wasted ~64px of viewport width. */
  .beta-form { padding: 20px; gap: 12px; border-radius: 22px; }
}

/* =========================================================
   Polish v14 — column→row on phones (readability)
   On 1-col mobile widths, full-page-width "card stacks" make every
   card a tall block with one piece of content per scroll. Convert the
   information-grid sections to compact row layouts: icon/number on the
   left, content on the right, multiple rows visible per scroll.
   ========================================================= */

@media (max-width: 540px) {
  /* ---------- Setup-kit cards → icon-left rows ---------- */
  .kit-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 4px;
    padding: 16px 18px;
  }
  .kit-card .kit-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .kit-card .kit-icon svg { width: 22px; height: 22px; }
  .kit-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 15.5px; line-height: 1.2; }
  .kit-card p { grid-column: 2; grid-row: 2; margin: 0; font-size: 13px; line-height: 1.5; }

  /* The kit-note already spans full width via its own selector — keep it. */
  .kit-note { padding: 14px 16px; font-size: 12.5px; }

  /* ---------- How-it-works step cards → number-left rows ---------- */
  .step-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 4px;
    padding: 16px 18px;
    min-height: auto;
  }
  .step-card .step-num {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    /* The default step-num is an inline-flex eyebrow with a 28px ::after
       displaying data-num. On mobile we hide the eyebrow text and just
       show the big number. */
    display: block;
    margin: 0;
    font-size: 0;          /* hides the inline "Step" text */
    line-height: 1;
  }
  .step-card .step-num::before { display: none; }
  .step-card .step-num::after {
    display: block;
    font-size: 30px;
    letter-spacing: -0.025em;
    margin: 0;
    color: var(--cloud-white);
  }
  .step-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 15.5px; line-height: 1.2; }
  .step-card p { grid-column: 2; grid-row: 2; margin: 0; font-size: 13px; line-height: 1.5; }
  /* The decorative bottom visual is pure ornament on desktop — hide on mobile so the row reads as a row. */
  .step-card .step-visual { display: none; }

  /* ---------- Persona cards → icon-left rows ---------- */
  .persona {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 14px;
    row-gap: 6px;
    padding: 18px;
  }
  /* Category chip spans the full width at the top of the card, above the
     icon-left rows (otherwise it auto-places into an implicit bottom row). */
  .persona-tag { grid-column: 1 / -1; grid-row: 1; margin-bottom: 2px; }
  .persona-icon {
    grid-column: 1;
    grid-row: 2 / span 3;
    align-self: start;
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }
  .persona-icon svg { width: 22px; height: 22px; }
  .persona h3 {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 15px;
    line-height: 1.25;
  }
  .persona h3 br { display: none; }   /* the dialogue-quote line break is desktop-only flavour */
  .persona p { grid-column: 2; grid-row: 3; margin: 0; font-size: 13px; line-height: 1.5; }
  .persona ul {
    grid-column: 2;
    grid-row: 4;
    margin: 4px 0 0;
    gap: 4px;
    font-size: 12.5px;
  }
  .persona li { grid-template-columns: 12px minmax(0, 1fr); gap: 8px; }
  .persona li::before { width: 6px; height: 6px; margin-top: 6px; }

  /* Cost-tally chips stack on narrow phones (flex-wrap rhythm gets uneven). */
  .cost-list { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cost-list li:not(:last-child)::after { display: none; }

  /* ---------- Trust cards → mark-left rows ---------- */
  .trust-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 6px;
    padding: 18px;
    min-height: auto;
  }
  .trust-mark {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    font-size: 13px;
  }
  .trust-card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 15.5px; line-height: 1.2; }
  .trust-card p { grid-column: 2; grid-row: 2; margin: 0; font-size: 13px; line-height: 1.5; }

  /* ---------- Specs grid → 2-col rows on phones ---------- */
  /* The v13 layer still left this as 1-col stack; specs are short enough
     to pair up on phones for half the scroll length. */
  .specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec { padding: 16px 14px; gap: 4px; }
  .spec-eyebrow { font-size: 9.5px; padding-top: 8px; }
  .spec-eyebrow::before { width: 22px; }
  .spec-num { font-size: clamp(24px, 7vw, 32px); }
  .spec-unit { font-size: 0.5em; margin-left: 3px; transform: translateY(-0.08em); }
  .spec span:last-of-type { font-size: 12px; line-height: 1.45; }

  /* ---------- Footer → 3-col link directories with brand spanning ---------- */
  .footer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 12px;
    padding: 40px 16px max(96px, calc(env(safe-area-inset-bottom) + 96px));
  }
  .footer-col:first-child {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }
  .footer-col h3 { font-size: 10.5px; }
  .footer-col ul { font-size: 13px; gap: 6px; }
  .footer-col ul a { overflow-wrap: anywhere; }   /* mailto + long link safety */

  /* footer-bottom stays a simple 1-col stack per the existing rule */
}

/* =========================================================
   Polish v15 — kill 4-col-1-row at every sub-desktop width
   User report (post-v14): "still seeing 4×1 (col × row) on mobile,
   want 1×4 stacked." Diagnostic: at viewport widths 901-1180 (iPad
   landscape, large phone landscape, small laptop window) the previous
   responsive layers' lower bounds did NOT fire — sections like
   .corner-gauges, .speed-bands, .report-metrics, .sensor-grid, and
   .kit-grid all kept their default `repeat(4, ...)` rule and rendered
   as a single horizontal row of four cells.
   This layer closes the gap with a strict ladder:
     ≤540  → 1-col stack (1×N "row form")
     541-1080 → 2-col   (no 4-col anywhere below desktop)
     1081-1180 → 2-col   (catches iPad-landscape boundary)
     1181+ → original desktop default
   ========================================================= */

/* Below desktop: ALL multi-item sections that were defaulting to
   `repeat(4, ...)` collapse to 2-col so no row ever has 4 cells. */
@media (max-width: 1180px) {
  .sensor-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .corner-gauges   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .speed-bands     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-metrics  { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The cycling indicator's keyframes are hard-coded translateX values
     for 4-col positions; whenever speed-bands isn't 4-col, hide it. */
  .b-3 .speed-bands::before { display: none; }
}

/* kit-grid was 2-col only at 541-960; extend to 1080 so iPad-landscape
   doesn't fall back to 4-col either. */
@media (min-width: 541px) and (max-width: 1080px) {
  .kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone (≤540): every multi-item section becomes 1-col stack — this is
   the "1×N row form" the user has been asking for. Overrides v13/v14
   2-col specs-grid and 3-col footer where they apply. */
@media (max-width: 540px) {
  .kit-grid,
  .sensor-grid,
  .corner-gauges,
  .speed-bands,
  .report-metrics,
  .specs-grid,
  .footer {
    grid-template-columns: 1fr;
  }

  /* The footer brand col was set to span all 3 in v14; with footer now
     1-col, the span becomes the default (one cell = full row). */
  .footer-col:first-child { grid-column: auto; }

  /* Hero proof chips were `flex-wrap: wrap` — at 4 chips on a 375px
     viewport they typically fell into 2×2 anyway. Force 1-col stack
     for consistency with the rest of the mobile layer. */
  .hero-proof { flex-direction: column; align-items: stretch; }
  .hero-proof span { justify-content: flex-start; }

  /* spec-num was clamped down to fit the v14 2-col cells. With the cell
     now full-width, give the number more presence. */
  .spec-num { font-size: clamp(32px, 8vw, 42px); }
}

/* ==================== THE PROBLEM ====================
   Pain-point section inserted after the hero. Reuses the kit-card
   surface + alert-chip vocabulary so it reads as native. New selectors
   only — no overrides of existing rules, so source order is safe. */
.problem-section .section-head { margin-bottom: 36px; }

.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.pain-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(30, 42, 58, 0.7), rgba(22, 34, 49, 0.5));
  transition: border-color 220ms ease, transform 220ms var(--ease-out-expo);
}

.pain-card:hover {
  border-color: rgba(235, 90, 48, 0.3);
  transform: translateY(-2px);
}

.pain-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--ink-cool-soft);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pain-tag.is-alert {
  background: rgba(235, 90, 48, 0.12);
  border-color: var(--accent-hairline);
  color: var(--ignition-glow);
}

.pain-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.pain-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.pain-bridge {
  margin: 26px 0 0;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--ignition-orange);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(235, 90, 48, 0.08), rgba(30, 42, 58, 0.35));
  color: var(--text-primary);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
}

/* Responsive — mirror the kit-grid breakpoints (4 → 2 → 1). */
@media (min-width: 541px) and (max-width: 1080px) {
  .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .pain-grid { grid-template-columns: 1fr; }
}

/* "What you actually get told" — the spoken brush-offs. Quieter, italic,
   blockquote-style accent so they read as overheard lines rather than
   the analytical pain cards below them. */
.dismissals { margin: 0 0 30px; }

.dismissals-label {
  margin: 0 0 12px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dismissal-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dismissal {
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-left: 2px solid var(--text-dim);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.05);
  color: var(--text-secondary);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .dismissal-list { grid-template-columns: 1fr; }
}

/* Source caption under the headline — Korea-specific (BMW NVH appointment
   wait). Shown only in Korean; the English headline keeps its own framing. */
.problem-cite {
  margin: 12px 0 0;
  color: var(--text-dim);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
}
html[data-lang="en"] .problem-cite { display: none; }

/* ==================== WHAT IT DETECTS ====================
   Capability cards — same surface as the kit/pain cards, but the tag
   carries the orange accent to read as "yes, this is detectable." */
.detect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.detect-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(30, 42, 58, 0.7), rgba(22, 34, 49, 0.5));
  transition: border-color 220ms ease, transform 220ms var(--ease-out-expo);
}

.detect-card:hover {
  border-color: rgba(235, 90, 48, 0.3);
  transform: translateY(-2px);
}

.detect-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(235, 90, 48, 0.12);
  border: 1px solid var(--accent-hairline);
  color: var(--ignition-glow);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.detect-card h3 {
  margin: 2px 0 0;
  font-size: 16.5px;
  line-height: 1.25;
}

.detect-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Per-order breakdown inside the tire & wheel card. */
.detect-orders {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.detect-orders li {
  padding-left: 12px;
  border-left: 2px solid var(--accent-hairline);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.detect-orders b {
  color: var(--text-primary);
  font-weight: 700;
}

@media (max-width: 820px) {
  .detect-grid { grid-template-columns: 1fr; }
}

/* ==================== HIDDEN-COST TALLY ====================
   In the Problem section, between the pain cards and the bridge:
   what the whole ordeal costs the driver before any diagnosis. */
.cost-tally {
  margin: 26px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(30, 42, 58, 0.6), rgba(22, 34, 49, 0.4));
}

.cost-tally-lead {
  margin: 0 0 14px;
  color: var(--text-secondary);
  font-size: 14px;
}

.cost-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.cost-list li {
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
}

.cost-list li:not(:last-child)::after {
  content: "·";
  margin: 0 14px;
  color: var(--accent);
  font-weight: 700;
}

.cost-answer {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-size: 14.5px;
  font-style: italic;
}

/* Persona category chips (Built for: Driver / DIYer / Shop).
   Mirrors the site's eyebrow-pill label language: rounded orange-tinted
   pill with a small orange dot, so the chips read as native labels. */
.persona-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  width: fit-content;
  height: 28px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgba(235, 90, 48, 0.32);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(235, 90, 48, 0.16), rgba(235, 90, 48, 0.04));
  color: #ffd2c0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.persona-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ignition-orange);
  box-shadow: 0 0 0 3px rgba(235, 90, 48, 0.18);
}
/* Preserve the "DIYer" stylization instead of forcing all-caps "DIYER". */
.persona-tag.t-diy { text-transform: none; letter-spacing: 0.04em; }

/* ==================== ROADMAP / COMMERCIAL ====================
   Future-direction section (commercial multi-axle). Deliberately muted vs the
   shipping product: cooler card wash + slate hover, so it reads as a concept,
   not a live feature. The "approach" tag and a dashed note carry the framing. */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.roadmap-card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(30, 42, 58, 0.55), rgba(22, 34, 49, 0.4));
  transition: border-color 220ms ease, transform 220ms var(--ease-out-expo);
}

.roadmap-card:hover {
  border-color: rgba(148, 163, 184, 0.32);
  transform: translateY(-2px);
}

.roadmap-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--ink-cool-soft);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.roadmap-tag.is-accent {
  background: rgba(235, 90, 48, 0.12);
  border-color: var(--accent-hairline);
  color: var(--ignition-glow);
}

.roadmap-card h3 {
  margin: 2px 0 0;
  font-size: 16.5px;
  line-height: 1.25;
}

.roadmap-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.roadmap-note {
  margin: 26px 0 0;
  padding: 16px 20px;
  border: 1px dashed rgba(148, 163, 184, 0.32);
  border-radius: 14px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .roadmap-grid { grid-template-columns: 1fr; }
}

/* ==================== HOW THE MEASUREMENT WORKS (method) ====================
   Trust/method-transparency section. Reuses the .detect-grid / .detect-card /
   .detect-tag visual system (3-col → 1-col @820px is already defined on
   .detect-grid), so this only adds a subtle section wash + the .method-* hook
   classes for future-proofing. The closing line reuses .roadmap-note. */
.method-section {
  background:
    radial-gradient(760px 300px at 15% 0%, rgba(148, 163, 184, 0.06), transparent 60%),
    var(--deep-navy);
}

/* Method cards inherit .detect-card; nudge the body copy a touch smaller so the
   denser methodology text sits comfortably in three columns. */
.method-card p {
  font-size: 13.5px;
}