/* ============================================================
   SECTIONS — hero, problem, features, compare, how, download
   ============================================================ */

/* ================= HERO ================= */

.hero {
  position: relative;
  min-height: 100vh;
  padding-top: clamp(6rem, 10vh, 10rem);
  padding-bottom: clamp(3rem, 8vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  position: relative;
}
@media (min-width: 68rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(3rem, 5vw, 6rem);
  }
}

.hero-copy { max-width: 38rem; }

.hero-copy .eyebrow { margin-bottom: var(--space-md); }

.hero-copy h1 {
  font-size: var(--text-display);
  letter-spacing: var(--tracking-mega);
  font-weight: 700;
  line-height: 0.98;
  margin-bottom: var(--space-md);
}

/* Rotating "stressed word" — switch to body font for width contrast
   against the condensed display family, plus ember color. */
.hero-copy h1 .ember {
  color: var(--ember-400);
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.015em;
  position: relative;
  padding-inline: 0.06em;
}
.hero-copy h1 .ember::after {
  content: "";
  position: absolute;
  left: 0.15em; right: 0.15em;
  bottom: 0.04em;
  height: 2px;
  background: var(--ember-500);
  opacity: 0.5;
  transform-origin: left;
  animation: draw-line 1.2s var(--ease-out) 0.6s both;
}
@keyframes draw-line {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 0.5; }
}

.hero-copy .lede {
  color: var(--bone-200);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.55;
  max-width: 36rem;
  margin-bottom: var(--space-lg);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-xl);
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-md);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-800);
  max-width: 34rem;
  width: 100%;
}
@media (min-width: 32rem) {
  .hero-meta {
    grid-template-columns: repeat(4, minmax(0, auto));
    column-gap: var(--space-lg);
    justify-content: start;
  }
}
.hero-meta div {
  display: grid;
  gap: 2px;
}
.hero-meta .k {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.hero-meta .v { color: var(--fg); font-weight: 540; }

/* --- Hero graph canvas --- */
.hero-graph {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 36rem;
  margin-inline: auto;
  /* Explicit fallback ensures non-zero layout even pre-paint */
  min-height: 440px;
  width: 100%;
}
@media (min-width: 68rem) {
  .hero-graph {
    aspect-ratio: 5 / 6;
    max-width: none;
    min-height: 560px;
  }
}

.hero-graph canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Floating annotation labels anchored to the graph. Hidden on very
   narrow screens where they'd crowd the shrunken graph. */
.graph-caption {
  position: absolute;
  padding: 0.4rem 0.625rem;
  background: oklch(0.13 0.008 30 / 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  color: var(--bone-200);
  display: flex;
  align-items: center;
  gap: 0.45em;
  pointer-events: none;
  opacity: 0;
  animation: caption-in 0.8s var(--ease-out) forwards;
  max-width: calc(100% - 2rem);
  white-space: nowrap;
}
@media (max-width: 28rem) {
  .graph-caption { display: none; }
}
.graph-caption .ln {
  width: 18px; height: 1px;
  background: var(--ember-500);
}
.graph-caption.top-left { top: 8%; left: 2%; animation-delay: 1.6s; }
.graph-caption.top-right { top: 18%; right: 3%; animation-delay: 2.1s; }
.graph-caption.bottom-left { bottom: 14%; left: 4%; animation-delay: 2.6s; }

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

/* Scroll cue — bottom of hero */
.scroll-cue {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  color: var(--fg-dim);
  pointer-events: none;
}
.scroll-cue .bar {
  width: 1px; height: 32px;
  background: linear-gradient(to bottom, transparent, var(--fg-muted));
  animation: scroll-bob 2.4s var(--ease-in-out) infinite;
}
@keyframes scroll-bob {
  0%, 100% { transform: scaleY(1); transform-origin: top; }
  50%      { transform: scaleY(0.5); transform-origin: top; }
}

/* --- Backdrop grid / seismic lines ---
   Desktop uses a radial mask to fade the grid out at the edges. On
   mobile the mask-image promotes this element to its own compositor
   layer that has to be re-rasterized on scroll, so we drop the mask
   entirely there and let the grid run edge-to-edge at lower opacity. */
.hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--ink-800) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ink-800) 1px, transparent 1px);
  background-size: clamp(40px, 5vw, 80px) clamp(40px, 5vw, 80px);
  background-position: center;
  opacity: 0.18;
}
@media (hover: hover) and (pointer: fine) and (min-width: 64rem) {
  .hero-backdrop {
    mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, black, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, black, transparent 90%);
    opacity: 0.35;
  }
}
.low-power .hero-backdrop {
  mask-image: none;
  -webkit-mask-image: none;
  opacity: 0.14;
}

/* ================= PROBLEM ================= */

.problem {
  position: relative;
}

.problem-lede {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
  max-width: 22ch;
  font-weight: 600;
}
.problem-lede .dim { color: var(--fg-muted); }
.problem-lede .ember { color: var(--ember-400); font-family: var(--font-body); font-weight: 400; font-style: italic; letter-spacing: -0.005em; }

.problem-body {
  color: var(--bone-200);
  font-size: var(--text-lg);
  line-height: 1.6;
  max-width: 48ch;
}

.problem-body p + p { margin-top: var(--space-md); }

/* Visual: stacked browser tabs */
.tabs-stack {
  position: relative;
  min-height: 320px;
  margin-top: var(--space-lg);
}
.tab-window {
  position: absolute;
  left: 0; right: 0;
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-lg);
  padding: var(--space-2xs);
  box-shadow: 0 20px 40px -20px oklch(0 0 0 / 0.5);
  overflow: hidden;
}
.tab-window .chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--ink-800);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--fg-dim);
  letter-spacing: 0.02em;
}
.tab-window .chrome .dots { display: flex; gap: 4px; }
.tab-window .chrome .dots span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ink-700);
}
.tab-window .chrome .url {
  margin-left: var(--space-2xs);
  padding: 0.15rem 0.5rem;
  background: var(--ink-1000);
  border-radius: var(--radius-pill);
  color: var(--bone-300);
  font-size: 0.68rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-window .body {
  padding: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--fg-muted);
  min-height: 70px;
}
.tab-window .body .bars {
  display: grid;
  gap: 6px;
}
.tab-window .body .bar {
  height: 6px;
  background: var(--ink-800);
  border-radius: 2px;
}
.tab-window .body .bar:nth-child(1) { width: 60%; }
.tab-window .body .bar:nth-child(2) { width: 42%; }
.tab-window .body .bar:nth-child(3) { width: 78%; background: var(--ink-700); }

.tab-window.-t1 { top: 0; transform: rotate(-2.5deg) translateX(-14px); z-index: 1; }
.tab-window.-t2 { top: 48px; transform: rotate(1.2deg) translateX(10px); z-index: 2; }
.tab-window.-t3 { top: 96px; transform: rotate(-0.6deg) translateX(-4px); z-index: 3; }
.tab-window.-t4 { top: 144px; transform: rotate(2deg) translateX(18px); z-index: 4; }

.tabs-badge {
  position: absolute;
  right: -6px;
  top: -10px;
  background: var(--fault-500);
  color: var(--ink-1000);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  z-index: 5;
  font-weight: 700;
  transform: rotate(4deg);
  box-shadow: 0 6px 20px -8px var(--fault-glow);
}

/* ================= ANSWER (editorial statement) ================= */

.answer {
  padding-block: clamp(4rem, 12vw, 10rem);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.answer-mega {
  font-family: var(--font-display);
  font-size: var(--text-mega);
  letter-spacing: var(--tracking-mega);
  line-height: 0.92;
  color: var(--fg-strong);
  font-weight: 700;
  max-width: 17ch;
}
.answer-mega .ember { color: var(--ember-400); font-family: var(--font-body); font-weight: 400; font-style: italic; letter-spacing: -0.015em; }

.answer-timer {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  margin-top: var(--space-xl);
}
.answer-timer .num {
  font-family: var(--font-display);
  font-size: 2.75rem;
  color: var(--ember-400);
  letter-spacing: var(--tracking-snug);
  font-weight: 700;
  text-transform: none;
}

/* ================= FEATURES ================= */

.feature {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--ink-800);
}
.feature:first-of-type { border-top: 0; }

.feature-num {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: var(--space-sm);
}
.feature-num b {
  font-weight: 600;
  color: var(--ember-400);
}

.feature h3 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-md);
  font-weight: 600;
  max-width: 18ch;
}
.feature h3 .ember { color: var(--ember-400); font-family: var(--font-body); font-weight: 400; font-style: italic; letter-spacing: -0.005em; }

.feature p { color: var(--bone-200); font-size: var(--text-lg); line-height: 1.6; }
.feature p + p { margin-top: var(--space-sm); }

.feature-stat {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-800);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.feature-stat .big {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--ember-400);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  line-height: 1;
}
.feature-stat .cap {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Visual containers for feature demos.
   Min-height normalizes across features so the alternating rhythm
   reads as intentional, not accidental. */
.feature-demo {
  position: relative;
  background: var(--ink-900);
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-xl);
  padding: var(--space-sm);
  box-shadow: 0 30px 60px -30px oklch(0 0 0 / 0.5);
  display: flex;
  flex-direction: column;
  min-height: 380px;
}
@media (min-width: 64rem) {
  .feature-demo { min-height: 420px; }
}
.feature-demo > .term,
.feature-demo > .diff,
.feature-demo > .risks,
.feature-demo > canvas,
.feature-demo > .term-body {
  flex: 1;
}
/* Nested .term inside a feature-demo already lives in a chromed card —
   suppress its own border/shadow so we don't get a double frame. */
.feature-demo > .term {
  border: none;
  box-shadow: none;
}
/* Standalone .term-body (no .term wrapper) used directly inside a
   feature-demo: keep padding tight so lines fit, and disallow emergency
   hyphen breaks inside flag/path tokens (browsers fall back to breaking
   at hyphens in narrow mono containers; force soft-wrap only at spaces). */
.feature-demo > .term-body {
  padding: 0 var(--space-2xs);
  overflow-wrap: normal;
  word-break: keep-all;
}
/* Pre-formatted code inside a wrapped .term (e.g. CLI 03 YAML): keep each
   line on one row and let the container scroll horizontally on overflow. */
.feature-demo > .term {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.feature-demo > .term > .term-body > div {
  white-space: nowrap;
}
.feature-demo .demo-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.5rem 0.75rem;
  border-bottom: 1px solid var(--ink-800);
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--fg-dim);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
}

/* Risks panel */
.risks {
  display: grid;
  gap: var(--space-xs);
}
.risk {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm);
  background: var(--ink-1000);
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-swift);
}
.risk:hover { background: var(--ink-900); }
.risk .sev {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  background: var(--fault-500);
  color: var(--ink-1000);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.risk.-med .sev { background: var(--ember-500); }
.risk.-low .sev { background: var(--oxide-500); color: var(--bone-50); }
.risk .body .t {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-strong);
  font-weight: 560;
}
.risk .body .s {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--fg-muted);
  margin-top: 2px;
  letter-spacing: -0.005em;
}
.risk .arr {
  color: var(--fg-dim);
  font-family: var(--font-mono);
}

/* ================= COMPARE ================= */

.compare {
  border-block: 1px solid var(--ink-800);
  padding-block: clamp(4rem, 9vw, 8rem);
}
.compare-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--ink-800);
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 56rem) {
  .compare-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.compare-col { background: var(--ink-900); padding: var(--space-lg); }
.compare-col.-rv {
  background:
    radial-gradient(ellipse at 20% 0%, oklch(0.73 0.17 50 / 0.10), transparent 60%),
    var(--ink-900);
}
.compare-col h4 {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--ink-800);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
}
.compare-col.-rv h4 { color: var(--ember-400); }
.compare-col ul { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.compare-col li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--space-xs);
  align-items: start;
  font-size: var(--text-sm);
  color: var(--bone-200);
  line-height: 1.5;
}
.compare-col li::before {
  content: "–";
  color: var(--fault-500);
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1.5;
}
.compare-col.-rv li::before { content: "+"; color: var(--ember-400); }

/* ================= HOW IT WORKS ================= */

.how {
  padding-block: clamp(4rem, 10vw, 9rem);
}
.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  counter-reset: step;
}
@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
}
.step {
  counter-increment: step;
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-top: 1px solid var(--ember-700);
  position: relative;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: -0.65rem;
  left: 0;
  background: var(--bg);
  padding-right: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  color: var(--ember-400);
  font-weight: 600;
}
.step h4 {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--fg-strong);
  line-height: 1.2;
  max-width: 22ch;
}
.step p {
  color: var(--bone-200);
  font-size: var(--text-base);
  line-height: 1.55;
  max-width: 32ch;
}
.step .icn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--ember-400);
}
.step .icn svg { width: 100%; height: 100%; }

/* ================= SPECS (stack + requirements) ================= */

.specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  padding-block: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--ink-800);
}
@media (min-width: 56rem) {
  .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl); }
}
.spec h4 {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}
.spec-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--bone-100);
  line-height: 1.5;
}
.spec-list li {
  padding: 0.375rem 0;
  border-bottom: 1px dashed var(--ink-800);
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}
.spec-list li:last-child { border-bottom: 0; }
.spec-list li .k { color: var(--fg-muted); }
.spec-list li .v { color: var(--fg); font-weight: 540; }

.stack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-xs);
}
.chip {
  padding: 0.35rem 0.625rem;
  background: var(--ink-900);
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--bone-200);
  letter-spacing: -0.01em;
}
.chip b { color: var(--ember-400); font-weight: 600; }

/* ================= CLI ================= */

.cli {
  position: relative;
  border-top: 1px solid var(--ink-800);
}
.cli .feature { border-top: 1px solid var(--ink-800); }
.cli .feature:first-of-type { border-top: 1px solid var(--ink-800); }

.cli-pkg {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--ember-400);
  padding: 0.05em 0.35em;
  background: var(--ink-900);
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-sm);
  letter-spacing: -0.005em;
}

.cli-pitch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-lg);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-800);
}
.cli-pitch-grid div { display: grid; gap: 2px; }
.cli-pitch-grid .k {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.cli-pitch-grid .v {
  font-size: var(--text-sm);
  color: var(--fg);
  font-weight: 540;
}

.cli-install {
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-2xs);
}
.cli-install .k {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.cli-install code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: 0.625rem 0.875rem;
  background: var(--ink-1000);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-md);
  color: var(--bone-100);
  display: block;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.cli-install code .c-prompt { color: var(--ember-400); margin-right: 0.4em; }
.cli-install code .c-flag { color: var(--oxide-400); }
.cli-install code .c-str { color: var(--moss-500); }

.cli-cmd-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-md);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink-800);
}
.cli-cmd-list li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--ink-800);
  align-items: baseline;
}
.cli-cmd-list li code {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--ember-400);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.cli-cmd-list li span {
  font-size: var(--text-sm);
  color: var(--bone-200);
  line-height: 1.55;
}
.cli-cmd-list li .mono { color: var(--oxide-400); }

.cli-exit {
  margin-top: var(--space-md);
  border: 1px solid var(--ink-800);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-mono);
}
.cli-exit .row {
  display: grid;
  grid-template-columns: 2.25rem 7rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding: 0.625rem 0.875rem;
  align-items: center;
  border-bottom: 1px solid var(--ink-800);
  font-size: var(--text-sm);
  background: var(--ink-1000);
}
.cli-exit .row:last-child { border-bottom: 0; }
.cli-exit .row .code {
  text-align: center;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--fg-strong);
}
.cli-exit .row.-ok .code { color: var(--moss-500); }
.cli-exit .row.-warn .code { color: var(--ember-400); }
.cli-exit .row.-err .code { color: var(--fault-500); }
.cli-exit .row .name {
  color: var(--bone-100);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  font-size: var(--text-micro);
  font-weight: 600;
}
.cli-exit .row .when {
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.cli-exit .row .when .mono { color: var(--bone-200); font-family: var(--font-mono); }

.cli-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--ink-800);
}

@media (max-width: 36rem) {
  .cli-pitch-grid { grid-template-columns: 1fr; gap: var(--space-sm); }
  .cli-cmd-list li { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .cli-exit .row { grid-template-columns: 2rem 5.5rem minmax(0, 1fr); gap: var(--space-2xs); }
}

/* ================= DOWNLOAD CTA ================= */

.download {
  position: relative;
  padding-block: clamp(5rem, 14vw, 12rem);
  overflow: hidden;
  isolation: isolate;
  text-align: left;
}

.download::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 80%, var(--ember-glow), transparent 70%),
    radial-gradient(ellipse 70% 40% at 20% 20%, oklch(0.55 0.09 35 / 0.14), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.download-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 56rem) {
  .download-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

.download h2 {
  font-size: var(--text-mega);
  line-height: 0.88;
  letter-spacing: var(--tracking-mega);
  font-weight: 700;
  max-width: 11ch;
}
.download h2 .ember { color: var(--ember-400); font-family: var(--font-body); font-weight: 400; font-style: italic; letter-spacing: -0.015em; }

.download p {
  color: var(--bone-200);
  font-size: var(--text-lg);
  margin-top: var(--space-md);
  max-width: 40ch;
}

.download-box {
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-md);
  box-shadow: 0 30px 80px -30px oklch(0 0 0 / 0.6);
}
.download-box .label { margin-bottom: 0; }
.download-box .btn-primary { width: 100%; justify-content: center; padding-block: 1.1rem; font-size: var(--text-base); }
.download-box .also {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-dim);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--ink-800);
}
.download-box .also span { color: var(--bone-200); }

/* Multi-platform download controls */
.dl-primary .dl-icon { display: none; }
.dl-primary[data-platform="macos"]   .dl-icon-macos,
.dl-primary[data-platform="windows"] .dl-icon-windows,
.dl-primary[data-platform="linux"]   .dl-icon-linux { display: inline-block; }

.download-box .also .dl-alt {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--bone-200);
  text-decoration: none;
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  transition: color 140ms ease;
}
.download-box .also .dl-alt:hover { color: var(--ember-300); }
.download-box .also .dl-alt svg {
  width: 0.95em;
  height: 0.95em;
  opacity: 0.7;
}
.download-box .also .dl-alt[hidden] { display: none; }

/* ================= FOOTER ================= */

.foot {
  padding: var(--space-2xl) var(--gutter) var(--space-lg);
  border-top: 1px solid var(--ink-800);
  background: var(--ink-1000);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  max-width: var(--max-container);
  margin-inline: auto;
}
@media (min-width: 56rem) {
  .foot-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}
.foot-col h5 {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
  margin-bottom: var(--space-sm);
}
.foot-col ul { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); }
.foot-col a { color: var(--bone-200); font-size: var(--text-sm); transition: color var(--dur-fast) var(--ease-swift); }
.foot-col a:hover { color: var(--ember-400); }
.foot-col p { font-size: var(--text-xs); color: var(--fg-muted); line-height: 1.65; max-width: 30ch; }
.foot-built { margin-top: var(--space-sm); color: var(--fg-dim); }
.foot-built a { color: var(--bone-200); border-bottom: 1px solid var(--ink-700); padding-bottom: 1px; transition: color var(--dur-fast) var(--ease-swift), border-color var(--dur-fast) var(--ease-swift); }
.foot-built a:hover { color: var(--ember-400); border-color: var(--ember-500); }

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  max-width: var(--max-container);
  margin: var(--space-2xl) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink-800);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.foot-bottom a:hover { color: var(--bone-200); }

/* ================= REVEAL ANIMATION =================
   Progressive enhancement: hidden state only applies once
   JS has added .js-enhanced to <html>. If JS fails or is
   slow to load, content is visible by default (no FOIT). */

.js-enhanced [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-enhanced [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

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

/* ============================================================
   MOBILE TUNING (≤ 48rem / 768px)
   Corrects proportions, density, and overflow for phones.
   ============================================================ */

@media (max-width: 48rem) {
  /* --- Hero ------------------------------------------------- */
  .hero {
    padding-top: clamp(5rem, 16vw, 7rem);
    padding-bottom: clamp(2rem, 6vh, 4rem);
    min-height: auto;
  }

  /* Register marks collide on narrow screens — mute visually, keep one */
  .register-tr { display: none; }
  .register-tl {
    top: calc(var(--space-sm) + 3.5rem);
    font-size: 0.625rem;
    opacity: 0.7;
  }

  .hero-copy h1 {
    font-size: clamp(2.5rem, 11vw, 3.25rem);
    letter-spacing: -0.015em;
    line-height: 1.02;
  }
  .hero-copy h1 .ember { letter-spacing: -0.01em; }

  .hero-copy .lede {
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  /* Stack CTAs, make them full-width, hit 44px touch target */
  .hero-cta { gap: var(--space-xs); }
  .hero-cta .btn {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0.95rem 1.125rem;
    min-height: 44px;
    font-size: 0.9375rem;
  }

  /* Hero meta on phone — 2 columns, tighter gap */
  .hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-md);
    padding-top: var(--space-sm);
  }
  .hero-meta .v { font-size: 0.8125rem; }

  /* Graph — smaller, breathes less, keeps the motif */
  .hero-graph {
    min-height: 0;
    aspect-ratio: 4 / 3;
    max-width: 100%;
  }

  /* Captions on tiny graph look cramped — hide on phone */
  .graph-caption { display: none; }

  .scroll-cue { display: none; }

  /* --- Problem / Tabs -------------------------------------- */
  .problem-lede { font-size: clamp(2rem, 8vw, 2.5rem); max-width: 18ch; }
  .problem-body { font-size: 1rem; }

  .tabs-stack {
    min-height: 300px;
    margin-top: var(--space-md);
    margin-inline: var(--space-sm);
  }
  /* Reduce the cantilever so rotated tabs don't push into the gutter */
  .tab-window.-t1 { transform: rotate(-2deg) translateX(-4px); }
  .tab-window.-t2 { transform: rotate(1deg)  translateX(4px); top: 42px; }
  .tab-window.-t3 { transform: rotate(-0.4deg) translateX(-2px); top: 84px; }
  .tab-window.-t4 { transform: rotate(1.6deg) translateX(6px); top: 126px; }
  .tab-window .chrome .url { font-size: 0.625rem; }
  .tabs-badge { right: 2px; top: -8px; transform: rotate(4deg) scale(0.9); }

  /* --- Answer ---------------------------------------------- */
  .answer-mega {
    font-size: clamp(3rem, 14vw, 4.5rem);
    line-height: 0.96;
    max-width: 14ch;
  }
  .answer-timer {
    font-size: 0.875rem;
    margin-top: var(--space-md);
    flex-wrap: wrap;
  }
  .answer-timer .num { font-size: 2.25rem; }

  /* --- Features -------------------------------------------- */
  .section-head { margin-bottom: var(--space-xl); }
  .section-head h2 { font-size: clamp(2rem, 8vw, 2.5rem); }
  .section-head .lede { font-size: 1rem; }

  .feature { padding-block: var(--space-xl); }
  .feature h3 {
    font-size: clamp(1.625rem, 6.5vw, 2rem);
    max-width: none;
    line-height: 1.1;
  }
  .feature p { font-size: 1rem; }
  .feature-stat { margin-top: var(--space-md); padding-top: var(--space-sm); }
  .feature-stat .big { font-size: clamp(1.5rem, 6vw, 2rem); }
  .feature-stat .cap { font-size: 0.625rem; }

  /* Feature 04 heading was forced nowrap inline — allow wrapping now */
  .drift-h3 { max-width: none; }

  .feature-demo {
    min-height: 0;
    padding: var(--space-xs);
    border-radius: var(--radius-lg);
  }
  .feature-demo .demo-head {
    font-size: 0.5625rem;
    padding-bottom: var(--space-2xs);
    margin-bottom: var(--space-xs);
    flex-wrap: wrap;
    gap: var(--space-3xs);
  }

  /* Code blocks — smaller, allow horizontal scroll rather than clip text */
  .term, .diff {
    font-size: 0.75rem;
  }
  .term-body, .diff-body {
    padding: var(--space-sm) var(--space-xs);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .term-body > div, .diff-body .line {
    white-space: nowrap;
  }

  /* Account-scan log inside features — compact */
  .feature-demo > .term-body {
    font-size: 0.75rem;
    line-height: 1.55;
    padding: var(--space-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .feature-demo > .term-body > div { white-space: nowrap; }

  /* Risk rows — stack body on very narrow; keep sev + arrow */
  .risk { gap: var(--space-xs); padding: var(--space-sm) var(--space-xs); }
  .risk .body .t { font-size: 0.8125rem; }
  .risk .body .s { font-size: 0.625rem; }

  /* Diff heading ellipsis protection */
  .diff-head {
    font-size: 0.5625rem;
    padding: 0.5rem 0.625rem;
    gap: var(--space-xs);
  }
  .diff-head > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* --- Compare --------------------------------------------- */
  .compare-col { padding: var(--space-md); }
  .compare-col h4 { font-size: 1.125rem; }
  .compare-col li { font-size: 0.875rem; }

  /* --- How ------------------------------------------------- */
  .step { padding: var(--space-md) 0 var(--space-sm); }
  .step h4 { font-size: 1.125rem; }
  .step p { font-size: 0.9375rem; }

  /* --- Download -------------------------------------------- */
  .download { padding-block: clamp(3.5rem, 12vw, 6rem); }
  .download h2 {
    font-size: clamp(2.75rem, 13vw, 4rem);
    line-height: 0.94;
    max-width: 10ch;
    /* allow word breaks so "context-switching" can wrap cleanly */
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .download p { font-size: 1rem; }
  .download-box { padding: var(--space-md); }
  .download-box .btn-primary {
    padding-block: 0.95rem;
    font-size: 0.9375rem;
    min-height: 48px;
    flex-wrap: wrap;
  }
  .download-box .btn-primary .dl-version {
    display: none;
  }
  .download-box .also {
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    font-size: 0.6875rem;
  }

  /* --- Footer --------------------------------------------- */
  .foot { padding: var(--space-xl) var(--gutter) var(--space-md); }
  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
    margin-top: var(--space-xl);
  }

  /* --- Section padding ------------------------------------- */
  .section { padding-block: clamp(2.5rem, 9vw, 5rem); }

  /* --- Nav ------------------------------------------------- */
  .nav { padding: 0.625rem var(--gutter); }
  .nav-end .btn-primary { padding: 0.625rem 0.875rem; font-size: 0.8125rem; }
  .wordmark { font-size: 1rem; }
  .wordmark .mark { width: 1.6em; height: 1.6em; }
}

/* Very narrow phones — additional clamp for sub-375 devices */
@media (max-width: 24rem) {
  .hero-copy h1 { font-size: clamp(2.25rem, 10.5vw, 2.75rem); }
  .answer-mega { font-size: clamp(2.75rem, 13vw, 4rem); }
  .download h2 { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .tabs-stack { margin-inline: 0; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
}

/* ============================================================
   MOBILE / LOW-POWER PAINT BUDGET
   The visual effects below are visible on desktop but cause
   per-frame paint cost on older Android. We trim them on touch
   viewports and remove them entirely on devices that opted into
   .low-power (set by scripts/graph.js via __rvLowPower).
   ============================================================ */
@media (pointer: coarse), (max-width: 48rem) {
  /* Caption frosted-glass over the hero canvas — three of them, each
     forcing a separate compositor layer. Solid background is enough. */
  .graph-caption {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: oklch(0.13 0.008 30 / 0.94);
  }

  /* Large soft drop-shadows: cut blur radius so the GPU doesn't have
     to rasterize a giant blurred bitmap on every paint. */
  .feature-demo { box-shadow: 0 12px 24px -16px oklch(0 0 0 / 0.5); }
  .download-box { box-shadow: 0 12px 28px -16px oklch(0 0 0 / 0.6); }
  .tab-window  { box-shadow: 0 8px 16px -10px oklch(0 0 0 / 0.5); }
  .term        { box-shadow: 0 10px 24px -16px oklch(0 0 0 / 0.6); }
  .pill .dot,
  .pill-danger .dot,
  .pill-ok .dot { box-shadow: none; }
}

/* Hard low-power path — no shadows or blurs on cards at all. */
.low-power .feature-demo,
.low-power .download-box,
.low-power .tab-window,
.low-power .term,
.low-power .tabs-badge,
.low-power .wordmark .mark {
  box-shadow: none;
}
.low-power .graph-caption {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: oklch(0.13 0.008 30 / 0.96);
}

/* ------------------------------------------------------------
   content-visibility: auto
   The single biggest mobile-scroll win for a long single-page
   site. Tells the browser it can skip layout, paint, and style
   for sections that aren't in the viewport. Browsers without
   support (older Chrome, all old WebKit) ignore the property.
   contain-intrinsic-size reserves vertical space so scrollbar
   position stays stable as sections materialize.

   The hero is intentionally excluded — it's always above the
   fold so contain-visibility would just add overhead.
   ------------------------------------------------------------ */
.problem,
.answer,
.section#features,
.compare,
.how,
.download,
.foot {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* ------------------------------------------------------------
   Touch-only: silence infinite CSS animations.
   These keep their compositing layers live forever even when
   off-screen, which costs continuous repaints on older Android.
   ------------------------------------------------------------ */
@media (pointer: coarse), (max-width: 48rem) {
  .pill .dot,
  .pill-danger .dot,
  .pill-ok .dot { animation: none; }
  .scroll-cue .bar { animation: none; }
}