/* Viroan Home v2 — extras for new hero variants and sections */

/* ─── Hero variant chooser frame ─── */
.hv-section { padding: 80px 56px 120px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hv-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 0%, transparent 75%);
  opacity: 0.5;
}
.hv-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, var(--accent-soft), transparent 70%),
    radial-gradient(ellipse 60% 50% at 20% 80%, var(--accent-soft), transparent 70%);
}
.hv-inner { position: relative; max-width: 1280px; margin: 0 auto; }

/* Eyebrow strip at top of every hero */
.hv-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 48px; font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.14em;
}

/* ─── Hero v2: Manifesto ───
   Colossal italic-display statement, asymmetric, certification stamp + signature. */
.hv2-claim {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 400;
  margin: 0 0 48px;
  text-wrap: balance;
}
.hv2-claim em {
  font-style: italic;
  color: var(--accent);
  font-family: "Times New Roman", "Georgia", serif;
  font-weight: 400;
}
.hv2-claim .strike {
  position: relative; color: var(--fg-3); display: inline-block;
}
.hv2-claim .strike::after {
  content: ""; position: absolute; left: -2%; right: -2%; top: 52%;
  height: 6px; background: var(--danger); transform: rotate(-2deg);
}
.hv2-stamp {
  position: absolute;
  right: 40px; top: 24%;
  width: 240px; height: 240px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-mono); color: var(--accent);
  letter-spacing: 0.18em; transform: rotate(-12deg);
  background: var(--bg-0);
  box-shadow: 0 0 60px var(--accent-soft);
  font-size: 11px;
  text-align: center;
  z-index: 2;
}
.hv2-stamp::before {
  content: ""; position: absolute; inset: 8px;
  border: 1px dashed var(--accent-line); border-radius: 50%;
}
.hv2-stamp-big { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.06em; margin: 6px 0; }
.hv2-meta-row { display: flex; gap: 48px; flex-wrap: wrap; margin-top: 32px; }
.hv2-meta-row > div { border-left: 1px solid var(--accent-line); padding-left: 16px; }
.hv2-meta-row .k { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.14em; text-transform: uppercase; }
.hv2-meta-row .v { font-family: var(--font-display); font-size: 24px; color: var(--fg-0); margin-top: 4px; }

/* ─── Hero v3: Candlestick Live ─── */
.hv3-grid { display: grid; grid-template-columns: 0.95fr 1.1fr; gap: 56px; align-items: center; }
.hv3-claim { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); line-height: 1.05; margin: 0 0 20px; letter-spacing: -0.02em; }
.hv3-claim .accent { color: var(--accent); }
.hv3-chart-wrap { position: relative; }
.hv3-chart {
  background: var(--bg-1); border: 1px solid var(--line-strong);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 80px var(--accent-soft);
}
.hv3-chart-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  background: var(--bg-2); font-family: var(--font-mono); font-size: 11px;
}
.hv3-price-now {
  font-family: var(--font-display); font-size: 36px; line-height: 1;
  color: var(--accent); letter-spacing: 0;
}
/* Cert pass overlay floats over candle chart */
.hv3-cert-floats {
  position: absolute; top: 18%; right: -24px; z-index: 4;
  background: var(--bg-0); border: 1px solid var(--accent-line);
  border-radius: 10px; padding: 14px 16px;
  font-family: var(--font-mono); font-size: 10px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.5), 0 0 24px var(--accent-soft);
  transform: rotate(3deg);
  min-width: 220px;
}
.hv3-cert-pass {
  font-family: var(--font-display); font-size: 16px; color: var(--accent); letter-spacing: 0.08em;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.hv3-cert-pass::before {
  content: "✓"; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.hv3-cert-row { color: var(--fg-3); display: flex; justify-content: space-between; padding: 2px 0; }
.hv3-cert-row span:last-child { color: var(--fg-1); }

/* Live "tape" ticker below claim */
.hv3-tape {
  display: flex; gap: 24px; padding: 14px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-top: 36px; font-family: var(--font-mono); font-size: 11px;
  overflow: hidden; white-space: nowrap;
}
.hv3-tape-item { display: inline-flex; gap: 8px; color: var(--fg-2); }
.hv3-tape-item .sym { color: var(--fg-0); }
.hv3-tape-item .up { color: var(--accent); }
.hv3-tape-item .dn { color: var(--danger); }

/* ─── Hero v4: Split Audiences ─── */
.hv4-grid { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 56px; align-items: stretch; min-height: 520px; }
.hv4-divider { background: var(--line-strong); width: 1px; }
.hv4-pane { display: flex; flex-direction: column; gap: 24px; }
.hv4-pane h2 { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; margin: 0; letter-spacing: -0.02em; }
.hv4-tag {
  display: inline-flex; gap: 8px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--accent-line);
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; width: fit-content;
}
.hv4-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.hv4-list li {
  padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg-1);
  display: flex; gap: 14px; font-size: 14px; color: var(--fg-1);
  transition: border-color .2s, background .2s;
}
.hv4-list li:hover { border-color: var(--accent-line); background: var(--bg-2); }
.hv4-list .num { color: var(--accent); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; min-width: 28px; }

/* ─── Hero v5: Product Showcase ─── */
.hv5-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.hv5-screenshot-wrap {
  position: relative; border-radius: 14px; overflow: visible;
}
.hv5-screenshot {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 80px var(--accent-soft);
}
.hv5-annotation {
  position: absolute; background: var(--bg-0);
  border: 1px solid var(--accent-line); border-radius: 8px;
  padding: 10px 14px; font-family: var(--font-mono); font-size: 11px;
  color: var(--accent); display: flex; gap: 10px; align-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.hv5-annotation::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}

/* ─── Bento Grid section ─── */
.bento-wrap { max-width: 1280px; margin: 0 auto; }
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, minmax(180px, auto));
  gap: 16px;
}
.bento-tile {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .25s, transform .25s;
}
.bento-tile:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.bento-tile.dim { background: var(--bg-0); }
.bento-tile.accent {
  background: linear-gradient(135deg, var(--accent-soft), transparent 80%), var(--bg-1);
  border-color: var(--accent-line);
}
.bento-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 14px; text-transform: uppercase; }
.bento-h { font-family: var(--font-display); font-size: 22px; line-height: 1.15; margin: 0 0 10px; letter-spacing: -0.01em; color: var(--fg-0); }
.bento-p { font-size: 13.5px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.bento-num { font-family: var(--font-display); font-size: clamp(64px, 8vw, 120px); line-height: 0.9; color: var(--accent); margin: 12px 0 0; }

/* Sizing variants */
.bento-w2 { grid-column: span 2; }
.bento-w3 { grid-column: span 3; }
.bento-h2 { grid-row: span 2; }

/* Bento helpers */
.bento-mini-rows {
  margin-top: auto; display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
}
.bento-mini-rows .row { display: flex; justify-content: space-between; padding: 4px 0; border-top: 1px solid var(--line); }
.bento-mini-rows .row:first-child { border-top: none; }
.bento-mini-rows .ok { color: var(--accent); }

/* Decorative pipeline strip inside the tall cert tile — fills the middle
   white space with meaningful content (the actual audit pipeline) instead
   of leaving a dead vertical gap. */
.bento-cert-pipeline {
  margin: 22px 0 18px;
  display: flex; align-items: center; justify-content: flex-start;
  gap: 8px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
}
.bento-cert-pipeline .step {
  padding: 6px 10px;
  border: 1px solid var(--accent-line);
  border-radius: 4px;
  color: var(--fg-1);
  background: var(--bg-card);
}
.bento-cert-pipeline .step.done {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.bento-cert-pipeline .arr {
  color: var(--fg-3);
  font-family: var(--font-mono);
}
/* In the cert tile, the mini-rows follow the pipeline directly instead of
   being pushed to the bottom — otherwise the 2-row-tall tile shows a dead
   vertical gap between pipeline and table. */
.bento-tile.accent .bento-mini-rows {
  margin-top: 0;
}

/* ─── Strategy Demo Theatre ─── */
.demo-wrap { max-width: 1280px; margin: 0 auto; }
.demo-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 24px; align-items: stretch; }
.demo-code, .demo-logs {
  background: var(--bg-0);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 540px;
}
.demo-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  background: var(--bg-2); font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3);
}
.demo-head .file { color: var(--fg-1); }
.demo-pre {
  margin: 0; padding: 20px 22px;
  font-family: var(--font-mono);
  font-size: 12.5px; line-height: 1.65;
  color: var(--fg-1);
  white-space: pre;
  overflow-x: auto;
  flex: 1;
}
.demo-pre .kw { color: oklch(0.78 0.12 280); }
.demo-pre .fn { color: oklch(0.85 0.14 75); }
.demo-pre .str { color: var(--accent); }
.demo-pre .num { color: oklch(0.82 0.14 25); }
.demo-pre .cm { color: var(--fg-3); font-style: italic; }
.demo-pre .ent { color: oklch(0.82 0.16 200); }
/* Light-theme syntax: darken tokens so they read on cream */
[data-theme="light"] .demo-pre .kw  { color: oklch(0.40 0.18 280); }
[data-theme="light"] .demo-pre .fn  { color: oklch(0.48 0.16 65);  }
[data-theme="light"] .demo-pre .num { color: oklch(0.50 0.20 25);  }
[data-theme="light"] .demo-pre .ent { color: oklch(0.42 0.16 220); }
[data-theme="light"] .demo-pre .cm  { color: oklch(0.55 0.02 200); }
/* Code panel needs a slightly darker bg for contrast in light theme */
[data-theme="light"] .demo-code { background: oklch(0.96 0.005 80); }
[data-theme="light"] .demo-code .demo-head { background: oklch(0.93 0.008 80); }
[data-theme="light"] .demo-pre .line-cursor { background: var(--accent-soft); }
/* Logs panel stays dark for the terminal feel, but make sure it does */
[data-theme="light"] .demo-logs { background: oklch(0.16 0.01 200); border-color: oklch(0.16 0.01 200); }
[data-theme="light"] .demo-logs .demo-head { background: oklch(0.20 0.01 200); color: oklch(0.75 0.01 200); border-color: oklch(0.26 0.01 200); }
[data-theme="light"] .demo-logs .demo-head .file { color: oklch(0.92 0.01 200); }
[data-theme="light"] .demo-logs .demo-log-line .ts { color: oklch(0.55 0.01 200); }
[data-theme="light"] .demo-logs .demo-log-line .lvl.INFO { color: oklch(0.72 0.01 200); }
[data-theme="light"] .demo-logs .demo-log-line .msg { color: oklch(0.90 0.01 200); }
[data-theme="light"] .demo-logs .demo-status { background: oklch(0.20 0.01 200); border-color: oklch(0.26 0.01 200); color: oklch(0.75 0.01 200); }
.demo-pre .line-cursor { background: var(--accent-soft); border-left: 2px solid var(--accent); padding-left: 4px; margin-left: -6px; }

.demo-logs {
  background: #050706;
}
.demo-log-body {
  flex: 1; overflow: hidden;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7;
  padding: 16px 18px;
  position: relative;
}
.demo-log-line { display: flex; gap: 10px; padding: 2px 0; opacity: 0; transform: translateY(8px); }
.demo-log-line.shown { opacity: 1; transform: none; transition: opacity .25s, transform .25s; }
.demo-log-line .ts { color: var(--fg-3); width: 80px; flex-shrink: 0; }
.demo-log-line .lvl { width: 56px; flex-shrink: 0; letter-spacing: 0.1em; font-weight: 600; }
.demo-log-line .lvl.INFO { color: var(--fg-2); }
.demo-log-line .lvl.PASS { color: var(--accent); }
.demo-log-line .lvl.RISK { color: oklch(0.82 0.14 75); }
.demo-log-line .lvl.SIGN { color: oklch(0.82 0.16 200); }
.demo-log-line .lvl.FAIL { color: var(--danger); }
.demo-log-line .msg { color: var(--fg-1); }

.demo-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--line);
  background: var(--bg-2);
  font-family: var(--font-mono); font-size: 11px;
}
.demo-status .pill {
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid var(--accent-line);
  padding: 4px 10px; border-radius: 999px;
}

/* ─── ROI Calculator ─── */
.calc-wrap { max-width: 1280px; margin: 0 auto; }
.calc-shell {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-1);
  overflow: hidden;
}
.calc-controls { padding: 36px 36px 32px; border-right: 1px solid var(--line); }
.calc-tabs {
  display: inline-flex; padding: 4px; gap: 4px; flex-wrap: wrap;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--bg-2); margin-bottom: 32px;
  max-width: 100%;
}
.calc-tabs button {
  appearance: none; cursor: pointer; border: 0;
  padding: 8px 14px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; background: transparent; color: var(--fg-2);
  transition: all .2s; white-space: nowrap;
}
.calc-tabs button.is-active { background: var(--accent); color: var(--bg-0); }

.calc-field { margin-bottom: 22px; }
.calc-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 10px;
}
.calc-label .val { color: var(--accent); font-family: var(--font-display); font-size: 18px; letter-spacing: 0; text-transform: none; }
.calc-slider {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 4px; border-radius: 999px;
  background: var(--bg-3); outline: none;
  cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg-0);
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-soft);
}
.calc-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bg-0);
  background: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-soft);
}

.calc-output { padding: 36px; background: var(--bg-0); display: flex; flex-direction: column; }
.calc-big {
  font-family: var(--font-display); font-size: clamp(48px, 6vw, 76px);
  line-height: 1; color: var(--accent); letter-spacing: -0.02em;
  margin: 6px 0 4px;
}
.calc-sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.14em; }
.calc-chart-wrap {
  flex: 1; margin: 28px 0 18px; min-height: 220px;
  border-top: 1px solid var(--line); padding-top: 18px;
  position: relative;
}
.calc-rows { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.calc-rows .row { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); }
.calc-rows .row:first-child { border-top: none; }
.calc-rows .row .v { color: var(--fg-0); font-family: var(--font-display); font-size: 18px; line-height: 1; }
.calc-disclaimer {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-3);
  letter-spacing: 0.06em; margin-top: 16px; line-height: 1.5;
}

/* ─── Testimonials marquee + pull ─── */
.tm-wrap { max-width: 1280px; margin: 0 auto; }
.tm-pull {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.1; letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--fg-0);
  margin: 0;
}
.tm-pull .quote { color: var(--accent); font-family: "Times New Roman", serif; }
.tm-meta {
  display: flex; gap: 16px; align-items: center;
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line);
}
.tm-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), oklch(0.5 0.18 200));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); color: var(--bg-0); font-size: 18px;
}
.tm-name { font-family: var(--font-display); font-size: 18px; color: var(--fg-0); }
.tm-role { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.14em; margin-top: 4px; }
.tm-nav {
  display: flex; gap: 10px; margin-top: 36px;
}
.tm-nav button {
  appearance: none; border: 1px solid var(--line-strong);
  background: var(--bg-1); color: var(--fg-1);
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 18px;
  transition: all .2s;
}
.tm-nav button:hover { border-color: var(--accent); color: var(--accent); }
.tm-dots {
  display: inline-flex; gap: 8px; align-items: center;
  margin-left: 12px;
}
.tm-dots .dot {
  width: 28px; height: 2px; background: var(--line-strong);
  border-radius: 999px; transition: all .25s;
}
.tm-dots .dot.is-active { background: var(--accent); width: 40px; }

.tm-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 64px;
  /* Stretch instead of center so swapping quotes of different length
     doesn't visually nudge the sidecard up/down. */
  align-items: stretch;
}

/* The quote slot reserves enough vertical room for the longest testimonial
   so that the nav buttons stay anchored at the bottom and the page itself
   does not jump as the user clicks ‹ ›. The fader inside crossfades on swap. */
.tm-quote-slot {
  min-height: 380px;
  position: relative;
}
@media (max-width: 700px) {
  /* On phones the quote already takes far more space than the buttons —
     the reserved height isn't needed and just adds awkward whitespace. */
  .tm-quote-slot { min-height: 0; }
}
.tm-quote-fader {
  opacity: 1;
  transition: opacity 180ms ease-in-out;
}
.tm-quote-fader.is-fading { opacity: 0; }

.tm-sidecard {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 12px;
  transition: opacity 180ms ease-in-out;
  /* Don't stretch to match the tall quote column — keep card compact and
     anchor it to the top of the row. */
  align-self: start;
}
.tm-sidecard.is-fading { opacity: 0; }
.tm-sidecard .big { font-family: var(--font-display); font-size: 48px; color: var(--accent); line-height: 1; }
.tm-sidecard .lbl { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.14em; }

/* ─── Roadmap timeline ─── */
.rm-wrap { max-width: 1280px; margin: 0 auto; position: relative; }
.rm-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  padding-top: 36px;
}
.rm-rail::before {
  content: ""; position: absolute; top: 56px; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-line) 40%, var(--line-strong) 70%, var(--line));
}
.rm-stop {
  position: relative; padding-top: 56px;
}
.rm-stop .node {
  position: absolute; top: 48px; left: 0; width: 18px; height: 18px;
  border-radius: 50%; background: var(--bg-0);
  border: 2px solid var(--line-strong);
}
.rm-stop.done .node { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 18px var(--accent-soft); }
.rm-stop.now  .node {
  background: var(--accent-soft); border-color: var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}
.rm-stop .q { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 8px; text-transform: uppercase; padding-left: 26px; }
.rm-stop.upcoming .q { color: var(--fg-3); }
.rm-stop .t { font-family: var(--font-display); font-size: 22px; line-height: 1.15; color: var(--fg-0); margin: 4px 0 10px; }
.rm-stop.upcoming .t { color: var(--fg-2); }
.rm-stop ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.rm-stop li { font-size: 13px; color: var(--fg-2); display: flex; gap: 8px; align-items: flex-start; }
.rm-stop li::before { content: "—"; color: var(--fg-3); }
.rm-stop.done li::before, .rm-stop.now li::before { content: "✓"; color: var(--accent); }

/* ─── Variant chip (debug-ish helper, only when tweak open) ─── */

/* ─── Section H2 sizing override (heroes especially) ─── */
.section.section-extra h2.display { font-size: clamp(28px, 3.4vw, 48px) !important; line-height: 1.1; letter-spacing: -0.02em; }
.section.section-extra .lede { font-size: 17px; color: var(--fg-1); line-height: 1.6; max-width: 720px; }

/* ─── Responsive ─── */
@media (max-width: 1100px) {
  .hv2-stamp { right: 16px; top: 8%; width: 180px; height: 180px; font-size: 10px; }
  .hv3-grid { grid-template-columns: 1fr; }
  .hv4-grid { grid-template-columns: 1fr; min-height: 0; }
  .hv4-divider { display: none; }
  .hv5-grid { grid-template-columns: 1fr; }
  .demo-grid { grid-template-columns: 1fr; }
  .calc-shell { grid-template-columns: 1fr; }
  .calc-controls { border-right: 0; border-bottom: 1px solid var(--line); }
  .tm-grid { grid-template-columns: 1fr; gap: 32px; }
  .rm-rail { grid-template-columns: 1fr 1fr; }
  .rm-rail::before { display: none; }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-w3, .bento-w2 { grid-column: span 2; }
}
@media (max-width: 700px) {
  .hv-section { padding-left: 24px !important; padding-right: 24px !important; padding-top: 48px; padding-bottom: 72px; }
  .hv2-stamp { display: none; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-w3, .bento-w2 { grid-column: span 1; }
  .rm-rail { grid-template-columns: 1fr; }
}