@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ==========================================================================
   VOICHE — LANDING v3 ("instrument panel")
   Self-contained: this file owns the whole of index.html. styles.css and
   styles-v2.css are left in place for the legal/support pages only.

   Two surface families, deliberately:
     .v3-paper   — follows the theme (porcelain in light, obsidian in dark)
     .v3-console — stays dark in BOTH themes, and reads as equipment: a left
                   channel-strip gutter, hairline rules, a faint grid.
   Every token here aliases a value already in the product's globals.css.
   No new palette, no new typeface.
   ========================================================================== */

:root {
  /* paper — theme-following */
  --v3-paper: #F8FAFC;
  --v3-paper-alt: #F1F5F9;
  --v3-surface: #FFFFFF;
  --v3-line: rgba(15, 23, 42, 0.08);
  --v3-line-strong: rgba(15, 23, 42, 0.16);
  --v3-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.06), 0 0 1px 1px rgba(15, 23, 42, 0.04);
  --v3-ink: #0F172A;
  --v3-ink-2: #475569;
  --v3-ink-3: #55647A;
  --v3-gold: #B45309;
  --v3-emerald: #047857;
  --v3-control-border: rgba(15, 23, 42, 0.52);
  --v3-btn-bg: #0F172A;
  --v3-btn-fg: #FFFFFF;
  --v3-tg: rgba(15, 23, 42, 0.10);

  /* console — identical in both themes */
  --v3-con-bg: #07090E;
  --v3-con-surface: #0F141F;
  --v3-con-dock: #0A0E17;
  --v3-con-line: rgba(255, 255, 255, 0.07);
  --v3-con-line-strong: rgba(255, 255, 255, 0.16);
  --v3-con-ink: #F8FAFC;
  --v3-con-ink-2: #B4C0D4;
  --v3-con-ink-3: #93A1B5;
  --v3-con-ink-4: #7C8899;
  --v3-con-ink-5: #55617A;
  --v3-con-gold: #F59E0B;
  --v3-con-signal: #10B981;
  --v3-con-idle: #4C5768;
  --v3-con-tg: rgba(241, 245, 249, 0.16);

  --v3-wrap: 1180px;
  --v3-gutter: 56px;

  /* Console surfaces that FOLLOW THE THEME — the nav, the hero and the #hear
     band. Everything below them (.v3-console on #proof, #security, #you) stays
     dark in both themes; those three flip. Declared here as the dark values and
     overridden once, further down, under [data-theme="light"]. */
  --con-nav-bg: rgba(7, 9, 14, .86);
  --con-scrim: 7, 9, 14;
  --con-tint: rgba(255, 255, 255, .02);
  --con-tint-2: rgba(255, 255, 255, .06);
  --con-tint-faint: rgba(255, 255, 255, .015);
  --con-tint-step: rgba(255, 255, 255, .04);
  --con-edge: rgba(255, 255, 255, .09);
  --con-edge-mid: rgba(255, 255, 255, .18);
  --con-edge-hover: rgba(255, 255, 255, .22);
  --con-edge-strong: rgba(255, 255, 255, .3);
  --con-quote: #E6EDF6;
  --con-shadow: 0 40px 80px -34px rgba(0, 0, 0, .9);
  --con-grid: rgba(255, 255, 255, .028);
  --con-btn-glow: 0 16px 32px -14px rgba(248, 250, 252, .5);
  --con-sig-soft: rgba(16, 185, 129, .05);
  --con-sig-mid: rgba(16, 185, 129, .1);
  --con-sig-strong: rgba(16, 185, 129, .12);
  --con-sig-edge: rgba(16, 185, 129, .22);
  --con-sig-edge-2: rgba(16, 185, 129, .28);
  --con-gold-soft: rgba(245, 158, 11, .08);
  --con-gold-rule: rgba(245, 158, 11, .28);
  --con-gold-hover: rgba(245, 158, 11, .07);
}

[data-theme="dark"] {
  --v3-paper: #0A0D14;
  --v3-paper-alt: #07090E;
  --v3-surface: #0F141F;
  --v3-line: rgba(255, 255, 255, 0.07);
  --v3-line-strong: rgba(255, 255, 255, 0.16);
  --v3-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.70), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --v3-ink: #F8FAFC;
  --v3-ink-2: #B4C0D4;
  --v3-ink-3: #93A1B5;
  --v3-gold: #F59E0B;
  --v3-emerald: #10B981;
  --v3-control-border: rgba(255, 255, 255, 0.45);
  --v3-btn-bg: #F8FAFC;
  --v3-btn-fg: #07090E;
  --v3-tg: rgba(241, 245, 249, 0.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  background: var(--v3-paper);
  color: var(--v3-ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color .25s ease, color .25s ease;
}

ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
img, svg { max-width: 100%; }

:focus-visible { outline: 2px solid var(--v3-gold); outline-offset: 3px; border-radius: 4px; }
.v3-console :focus-visible { outline-color: var(--v3-con-gold); }

.v3-mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.v3-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   BANDS
   -------------------------------------------------------------------------- */

.v3-band { position: relative; }
.v3-paper { background: var(--v3-paper); padding: 104px 0; }
.v3-paper--alt { background: var(--v3-paper-alt); }
.v3-paper--tight { padding: 84px 0; }

.v3-console {
  background: var(--v3-con-bg);
  color: var(--v3-con-ink-2);
  padding: 104px 0 104px var(--v3-gutter);
  overflow: hidden;
}

/* the channel strip — each console band is a channel of the instrument */
.v3-ch {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--v3-gutter);
  border-right: 1px solid var(--v3-con-line);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.v3-ch span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .6rem; font-weight: 600; letter-spacing: .26em;
  text-transform: uppercase; color: var(--v3-con-ink-5); white-space: nowrap;
}

.v3-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--con-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--con-grid) 1px, transparent 1px);
  background-size: 56px 56px;
}
.v3-grid--top { -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 78%); }
.v3-grid--bottom { -webkit-mask-image: radial-gradient(120% 90% at 50% 100%, #000 20%, transparent 78%); mask-image: radial-gradient(120% 90% at 50% 100%, #000 20%, transparent 78%); }

.v3-wrap { position: relative; max-width: var(--v3-wrap); margin: 0 auto; padding: 0 40px; }
.v3-wrap--narrow { max-width: 820px; }

/* --------------------------------------------------------------------------
   TYPE — the page is a teleprompter
   .v3-tg  = a thought group (faint underline)
   .v3-fw  = the focus word (gold, nuclear stress)
   -------------------------------------------------------------------------- */

.v3-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--v3-gold); margin-bottom: 18px;
}
.v3-console .v3-eyebrow { color: var(--v3-con-gold); }

.v3-h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.7rem); font-weight: 800;
  line-height: .98; letter-spacing: -.045em; color: var(--v3-con-ink); max-width: 24ch;
}
.v3-h2 {
  font-size: clamp(1.9rem, 3.5vw, 3rem); font-weight: 800;
  line-height: 1.04; letter-spacing: -.038em; color: var(--v3-ink);
}
.v3-console .v3-h2 { color: var(--v3-con-ink); }
.v3-h2--sm { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.v3-h3 { font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.28; color: var(--v3-ink); }
.v3-console .v3-h3 { color: var(--v3-con-ink); }

.v3-tg { border-bottom: 1.5px solid var(--v3-tg); padding-bottom: 5px; }
.v3-console .v3-tg { border-bottom-color: var(--v3-con-tg); }
.v3-fw { color: var(--v3-gold); border-bottom: 3px solid var(--v3-gold); }
.v3-console .v3-fw { color: var(--v3-con-gold); border-bottom-color: var(--v3-con-gold); }

.v3-lede { font-size: 1.02rem; line-height: 1.66; color: var(--v3-ink-2); }
.v3-console .v3-lede { color: var(--v3-con-ink-2); }
.v3-p { font-size: .96rem; line-height: 1.62; color: var(--v3-ink-2); }
.v3-console .v3-p { color: var(--v3-con-ink-3); }

.v3-head { display: flex; gap: 56px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 48px; }
.v3-head > div { flex: 1 1 460px; }
.v3-head > .v3-lede { flex: 1 1 360px; }

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.v3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: 13px;
  font-weight: 800; font-size: 1rem; letter-spacing: -.01em;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.v3-btn:hover { transform: translateY(-2px); }
.v3-btn--sm { height: 40px; padding: 0 18px; font-size: .875rem; font-weight: 700; border-radius: 11px; }
.v3-btn--solid { background: var(--v3-btn-bg); color: var(--v3-btn-fg); }
.v3-btn--ghost { background: transparent; border: 1px solid var(--v3-control-border); color: var(--v3-ink); }
.v3-btn--light { background: var(--v3-con-ink); color: var(--v3-con-bg); box-shadow: var(--con-btn-glow); }
.v3-btn--full { display: flex; width: 100%; height: 48px; font-size: .95rem; }
.v3-btn-note { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .76rem; letter-spacing: .05em; color: var(--v3-ink-3); }
.v3-console .v3-btn-note { color: var(--v3-con-ink-4); }

.v3-cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   NAV
   -------------------------------------------------------------------------- */

.v3-nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--con-nav-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--v3-con-line);
}
.v3-nav-in {
  max-width: var(--v3-wrap); margin: 0 auto; padding: 0 40px; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.v3-brand { display: flex; align-items: center; gap: 10px; flex: none; }
/* The mark is the brand's own black rounded square with the white glyph, the
   same object VoicheLogo renders in the app. The hairline border is not
   decoration: without it a #000 square disappears against the #07090E nav. */
.v3-brand-gem {
  display: inline-flex; width: 30px; height: 30px; border-radius: 8px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  align-items: center; justify-content: center; flex: none; overflow: hidden;
}
.v3-brand-gem img { display: block; width: 100%; height: 100%; }
.v3-brand-name { font-weight: 800; font-size: 1.02rem; letter-spacing: .13em; color: var(--v3-con-ink); }

.v3-nav-links { display: flex; align-items: center; gap: 30px; font-size: .875rem; font-weight: 500; }
.v3-navlink { position: relative; padding: 6px 0; color: var(--v3-con-ink-2); transition: color .16s ease; }
.v3-navlink::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--v3-con-gold); transition: right .22s ease;
}
.v3-navlink:hover { color: var(--v3-con-ink); }
.v3-navlink:hover::after { right: 0; }

.v3-nav-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.v3-icon-btn {
  display: inline-flex; width: 40px; height: 40px; border-radius: 11px;
  align-items: center; justify-content: center;
  border: 1px solid var(--v3-con-line-strong); color: var(--v3-con-ink-2);
  transition: background-color .16s ease, color .16s ease;
}
.v3-icon-btn:hover { background: var(--con-tint-2); color: var(--v3-con-ink); }
.v3-nav-toggle { display: none; }

.v3-nav-drawer { display: none; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

/* The hero is the film. Copy sits in the bottom-left corner so the frame
   above it stays clear — the previous layout put a 4.7rem headline over the
   subject's face and the video may as well not have been there. */
/* Copy left, photograph right. The film that used to sit behind all of this
   was a woman alone on a stage with a microphone, which reads as *keynote* —
   and this product is for the Tuesday standup, the interview answer and the
   thing you did not say in the meeting. A 16:9 stage clip also cropped to a
   smudge on a phone and greyed out under porcelain. A portrait still of
   someone mid-sentence at a table fixes the message and both layouts at once,
   and takes 720KB of video off the critical path. */
/* the hero opened with ~100px of nothing under a 68px nav */
.v3-hero { padding-top: 56px; padding-bottom: 40px; }
.v3-hero-in {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 4.5vw, 64px); align-items: center;
}
.v3-hero .v3-h1 { font-size: clamp(2.05rem, 2.9vw, 2.9rem); max-width: 17ch; margin-top: 10px; }
.v3-hero .v3-lede { margin-top: 16px; max-width: 46ch; font-size: 1rem; }
.v3-hero .v3-cta-row { margin-top: 28px; }
.v3-hero .v3-trust { margin-top: 28px; }

/* THE PHONE — the hero shows the product, not a stock photograph.

   Built in markup rather than shipped as an image: it stays sharp at any DPI,
   costs no bytes, follows the theme, and — the reason that matters on this
   page — it cannot show a UI the app does not have. The two AI "product
   screenshots" in the archive invent charts that do not exist, which is
   exactly what a site arguing "measured, not illustrated" must not do.

   The sentence and the +155% are real: pair 02's line from the #hear band,
   and its measured 5.10 -> 7.47 st rounded to the same two figures the card
   shows. Change one, change the other. */
.v3-phone {
  justify-self: end; width: 100%; max-width: 336px;
  aspect-ratio: 9 / 16.6;
  border-radius: 42px; padding: 10px;
  background: linear-gradient(160deg, rgba(var(--con-scrim), 0), var(--con-tint-2)), var(--v3-con-dock);
  border: 1px solid var(--con-edge-mid);
  box-shadow: var(--con-shadow);
}
.v3-phone-screen {
  height: 100%; border-radius: 33px; overflow: hidden;
  background: var(--v3-con-surface); border: 1px solid var(--v3-con-line);
  padding: 20px 17px 16px;
  display: flex; flex-direction: column; gap: 13px;
}

.v3-ph-top { display: flex; align-items: center; gap: 8px; }
.v3-ph-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--v3-con-signal); flex: none; }
.v3-ph-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .62rem; font-weight: 700; letter-spacing: .18em; color: var(--v3-con-ink-3);
}
.v3-ph-chip {
  margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  color: var(--v3-con-ink-4); border: 1px solid var(--v3-con-line);
  border-radius: 999px; padding: 3px 9px;
}

.v3-ph-label {
  margin: 4px 0 0; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .58rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--v3-con-ink-5);
}
.v3-ph-script {
  margin: 0; font-size: 1.2rem; line-height: 1.46; font-weight: 600;
  letter-spacing: -.015em; color: var(--con-quote);
}
.v3-ph-script .v3-tg { display: inline; }

.v3-ph-track {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: 13px;
  border: 1px solid var(--v3-con-line); background: var(--con-tint);
}
.v3-ph-play {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 1px solid var(--con-edge-mid); position: relative;
}
.v3-ph-play::after {
  content: ''; position: absolute; left: 8px; top: 6px;
  border-left: 6px solid var(--v3-con-ink-4);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.v3-ph-track:first-of-type .v3-ph-play { border-color: var(--v3-con-signal); background: var(--con-sig-mid); }
.v3-ph-track:first-of-type .v3-ph-play::after { border-left-color: var(--v3-con-signal); }
.v3-ph-meta { flex: none; width: 92px; }
.v3-ph-meta b { display: block; font-size: .74rem; font-weight: 700; color: var(--v3-con-ink-2); }
.v3-ph-meta small { display: block; font-size: .58rem; line-height: 1.3; color: var(--v3-con-ink-5); margin-top: 1px; }
.v3-ph-wave { flex: 1; min-width: 0; height: 24px; }

/* the record control is what a visitor recognises as "this is an app", and it
   fills the space the two tracks leave behind */
.v3-ph-rec {
  margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 6px 0 4px;
}
.v3-ph-rec-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--con-sig-mid); border: 1px solid var(--con-sig-edge-2);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px var(--con-sig-soft);
}
.v3-ph-rec-btn span {
  width: 17px; height: 17px; border-radius: 5px; background: var(--v3-con-signal); display: block;
}
.v3-ph-rec-hint { font-size: .64rem; color: var(--v3-con-ink-5); }

.v3-ph-foot {
  margin-top: 13px; display: flex; align-items: center; gap: 10px;
  padding-top: 13px; border-top: 1px solid var(--v3-con-line);
}
.v3-ph-stat {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: inline-flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums;
}
.v3-ph-stat b { font-size: .82rem; font-weight: 500; color: var(--v3-con-ink-5); text-decoration: line-through; }
.v3-ph-stat i { font-style: normal; font-size: .66rem; color: var(--v3-con-ink-5); }
.v3-ph-stat em { font-style: normal; font-size: 1.04rem; font-weight: 700; color: var(--v3-con-ink); }
.v3-ph-stat small { font-size: .62rem; color: var(--v3-con-ink-5); }
.v3-ph-gain {
  margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .76rem; font-weight: 700; color: var(--v3-con-signal);
  background: var(--con-sig-mid); border: 1px solid var(--con-sig-edge-2);
  border-radius: 7px; padding: 3px 8px;
}

@media (max-width: 900px) {
  .v3-hero { padding-top: 96px; padding-bottom: 56px; }
  .v3-hero-in { grid-template-columns: 1fr; gap: 34px; }
  /* copy first on a phone — the headline has to be the first thing read */
  .v3-phone { justify-self: center; max-width: 310px; }
}

.v3-trust {
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--v3-con-line);
  display: flex; flex-wrap: wrap; gap: 14px 40px;
}
.v3-trust li { display: flex; align-items: center; gap: 9px; }
.v3-trust span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem; font-weight: 500; letter-spacing: .06em; color: var(--v3-con-ink-3);
}

/* --------------------------------------------------------------------------
   THE INSTRUMENT (A/B comparator)
   -------------------------------------------------------------------------- */

.v3-ab {
  margin-top: 44px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 20px;
  background: var(--v3-con-surface); box-shadow: 0 40px 80px -32px rgba(0, 0, 0, .9); overflow: hidden;
}
.v3-ab-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: 1px solid var(--v3-con-line); background: var(--v3-con-dock);
}
.v3-ab-bar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v3-ab-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .62rem; font-weight: 700; letter-spacing: .18em; color: var(--v3-con-ink-4); text-transform: uppercase;
}
.v3-ab-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.v3-scriptbtn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  height: 32px; padding: 0 13px; border-radius: 8px;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em;
  border: 1px solid rgba(255, 255, 255, .10); background: transparent; color: var(--v3-con-ink-4);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.v3-scriptbtn:hover { color: var(--v3-con-ink-2); border-color: rgba(255, 255, 255, .2); }
.v3-scriptbtn[aria-selected="true"] {
  background: rgba(241, 245, 249, .10); border-color: rgba(241, 245, 249, .30); color: var(--v3-con-ink);
}

.v3-ab-script {
  padding: 26px 22px 8px; font-size: 1.28rem; line-height: 1.5; font-weight: 500;
  color: #E6EDF6; max-width: 62ch;
}
.v3-word { transition: color .12s ease, opacity .12s ease; }
.v3-word.is-stress { color: var(--v3-con-gold); border-bottom: 2px solid var(--v3-con-gold); padding-bottom: 1px; }
.v3-word.is-past { opacity: .5; }
.v3-word.is-live { color: var(--v3-con-ink); opacity: 1; }

.v3-tracks { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.v3-track {
  width: 100%; display: flex; align-items: center; gap: 20px;
  padding: 14px 16px; border-radius: 14px; text-align: left;
  background: var(--con-tint); border: 1px solid var(--v3-con-line);
  transition: background-color .18s ease, border-color .18s ease;
}
.v3-track:hover { border-color: rgba(255, 255, 255, .18); }
.v3-track[data-active="true"] { background: rgba(255, 255, 255, .055); border-color: rgba(255, 255, 255, .20); }
.v3-track--live { background: rgba(16, 185, 129, .045); border-color: rgba(16, 185, 129, .22); }
.v3-track--live:hover { border-color: rgba(16, 185, 129, .5); }
.v3-track--live[data-active="true"] { background: rgba(16, 185, 129, .11); border-color: var(--v3-con-signal); }

.v3-play {
  display: inline-flex; width: 38px; height: 38px; flex: none; border-radius: 50%;
  align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: var(--v3-con-ink-3);
}
.v3-play svg { width: 13px; height: 13px; }
.v3-track--live .v3-play { border-color: var(--v3-con-signal); background: rgba(16, 185, 129, .12); color: var(--v3-con-signal); }

.v3-track-id { flex: none; width: 168px; }
.v3-track-id b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--v3-con-ink-3);
}
.v3-track--live .v3-track-id b { color: var(--v3-con-ink); }
.v3-track-id small { display: block; font-size: .78rem; color: var(--v3-con-ink-5); margin-top: 3px; }
.v3-track--live .v3-track-id small { color: #8FA0B5; }

.v3-trace { flex: 1; min-width: 0; position: relative; height: 62px; }
.v3-trace svg { display: block; width: 100%; height: 62px; }
.v3-trace-fill { fill: var(--v3-con-idle); transition: fill .18s ease; }
.v3-track--live .v3-trace-fill { fill: var(--v3-con-signal); }
.v3-trace-head { opacity: 0; transition: opacity .15s ease; }
.v3-track[data-active="true"] .v3-trace-head { opacity: 1; }

.v3-track-dur {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  flex: none; font-size: .78rem; font-weight: 600; color: var(--v3-con-ink-4);
  width: 42px; text-align: right;
}
.v3-track--live .v3-track-dur { color: #C8D3E2; }

/* readout — every claim is a measurement */
.v3-readout {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--v3-con-line); background: var(--v3-con-dock);
}
.v3-readout > div { padding: 18px 22px; border-left: 1px solid rgba(255, 255, 255, .05); }
.v3-readout > div:first-child { border-left: 0; }
.v3-readout .v3-ro-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--v3-con-ink-5);
}
.v3-readout .v3-ro-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
  margin-top: 9px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.v3-ro-flat { font-size: 1.02rem; font-weight: 500; color: var(--v3-con-ink-5); text-decoration: line-through; text-decoration-color: rgba(107, 122, 144, .5); }
.v3-ro-arrow { font-size: .8rem; color: var(--v3-con-ink-5); }
.v3-ro-live { font-size: 1.34rem; font-weight: 700; color: var(--v3-con-ink); }
.v3-ro-unit { font-size: .72rem; color: var(--v3-con-ink-4); }
.v3-readout .v3-ro-loading { grid-column: 1 / -1; padding: 22px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .74rem; color: var(--v3-con-ink-4); }

/* --------------------------------------------------------------------------
   CARDS
   -------------------------------------------------------------------------- */

.v3-card {
  background: var(--v3-surface); border: 1px solid var(--v3-line); border-radius: 20px;
  padding: 26px; box-shadow: var(--v3-shadow);
  display: flex; flex-direction: column; gap: 13px;
  transition: transform .2s ease, border-color .2s ease;
}
.v3-card:hover { transform: translateY(-3px); border-color: var(--v3-line-strong); }
.v3-dcard {
  background: var(--v3-con-surface); border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s ease, border-color .2s ease;
}
.v3-dcard:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .20); }

.v3-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
/* exactly two up: four cards in an auto-fit grid land 3 + 1 and orphan one */
.v3-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 860px) { .v3-grid2 { grid-template-columns: 1fr; } }
.v3-grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 18px; }

.v3-step-tag { display: flex; align-items: center; gap: 11px; }
.v3-step-n {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: inline-flex; width: 28px; height: 28px; border-radius: 9px;
  background: var(--v3-btn-bg); color: var(--v3-btn-fg);
  font-size: .72rem; font-weight: 700; align-items: center; justify-content: center; flex: none;
}
.v3-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .63rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--v3-ink-3);
}
.v3-mark {
  display: inline-flex; width: 32px; height: 32px; border-radius: 10px;
  background: rgba(23, 25, 31, .06); align-items: center; justify-content: center; flex: none;
  color: var(--v3-ink);
}
[data-theme="dark"] .v3-mark { background: rgba(241, 245, 249, .10); }
.v3-dcard .v3-mark { background: rgba(241, 245, 249, .08); color: var(--v3-con-ink); width: 34px; height: 34px; border-radius: 11px; }

.v3-cost {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--v3-line);
  font-size: .88rem; line-height: 1.55; color: var(--v3-ink-3);
}
.v3-cost b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: block; font-size: .62rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--v3-gold); margin-bottom: 2px;
}

/* Spans the full wrap, like the checklist above it — the old 78ch cap stopped
   the panel short of the cards and read as a layout bug. Width is filled by
   splitting the claim from the explanation, not by letting one sentence run to
   110 characters. CSS `columns` was tried first and is wrong here: it balanced
   3 sentences into 2 + 1 ragged lines, and its rule is invisible against the
   panel, which is light in dark theme and dark in light theme. */
.v3-note {
  margin-top: 26px; padding: clamp(20px, 2.4vw, 30px) clamp(22px, 2.6vw, 36px);
  border-radius: 18px;
  background: var(--v3-btn-bg); color: var(--v3-btn-fg);
  font-size: clamp(1rem, .96rem + .2vw, 1.1rem); line-height: 1.62;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 40px); align-items: start;
}
.v3-note p { margin: 0; }
.v3-note-lead { font-weight: 600; }
@media (max-width: 900px) { .v3-note { grid-template-columns: 1fr; } }

/* step art */
.v3-art { margin-top: auto; border-radius: 14px; padding: 16px; }
.v3-art--rec { background: var(--v3-con-dock); display: flex; align-items: center; gap: 12px; }
.v3-art--rec .v3-dot { width: 8px; height: 8px; border-radius: 50%; background: #F43F5E; flex: none; animation: v3pulse 1.8s ease-in-out infinite; }
.v3-art--rec .v3-rec-t { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: #C8D3E2; }
.v3-art--rec .v3-bars { flex: 1; display: flex; align-items: flex-end; justify-content: flex-end; gap: 3px; height: 26px; }
.v3-art--rec .v3-bars i { display: block; width: 3px; border-radius: 2px; background: var(--v3-con-idle); }
@keyframes v3pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.v3-art--list { background: var(--v3-paper-alt); display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.v3-art--list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.v3-art--list b { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .7rem; font-weight: 600; color: var(--v3-ink-2); }
.v3-art--list i { flex: 1; height: 1px; background: var(--v3-line); }
.v3-chip-ready {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--v3-emerald); background: rgba(16, 185, 129, .12); padding: 3px 8px; border-radius: 6px;
}
.v3-art--transport { background: var(--v3-paper-alt); display: flex; gap: 8px; flex-wrap: wrap; padding: 14px; }
.v3-art--transport span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  flex: 1; min-width: 84px; text-align: center; padding: 9px 6px; border-radius: 10px;
  background: var(--v3-surface); border: 1px solid var(--v3-line);
  font-size: .64rem; font-weight: 700; letter-spacing: .09em; color: var(--v3-ink);
}
.v3-art--transport span.is-on { background: var(--v3-btn-bg); color: var(--v3-btn-fg); border-color: var(--v3-btn-bg); }

.v3-fine { font-size: .8rem; line-height: 1.5; color: var(--v3-con-ink-4); }

/* --------------------------------------------------------------------------
   STYLE TABS
   -------------------------------------------------------------------------- */

.v3-styletabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.v3-styletab {
  height: 44px; padding: 0 20px; border-radius: 12px;
  font-size: .92rem; font-weight: 700; letter-spacing: -.01em;
  border: 1px solid var(--v3-line-strong); background: var(--v3-surface); color: var(--v3-ink-2);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.v3-styletab:hover { border-color: var(--v3-control-border); }
.v3-styletab[aria-selected="true"] { background: var(--v3-btn-bg); border-color: var(--v3-btn-bg); color: var(--v3-btn-fg); }

.v3-stylepanel {
  background: var(--v3-surface); border: 1px solid var(--v3-line); border-radius: 20px; padding: 30px;
  box-shadow: var(--v3-shadow);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; align-items: start;
}
/* the UA's [hidden]{display:none} loses to the rule above on specificity —
   without this every style panel renders at once */
.v3-stylepanel[hidden] { display: none; }
.v3-tempo {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-top: 8px; font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--v3-ink);
}
.v3-plan-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: inline-block; padding: 7px 13px; border-radius: 9px;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  background: rgba(16, 185, 129, .12); color: var(--v3-emerald); border: 1px solid rgba(4, 120, 87, .28);
}
.v3-plan-badge.is-pro { background: var(--v3-btn-bg); color: var(--v3-btn-fg); border-color: var(--v3-btn-bg); }

/* --------------------------------------------------------------------------
   USE CHIPS
   -------------------------------------------------------------------------- */

.v3-uses { display: flex; flex-wrap: wrap; gap: 10px; }
.v3-use {
  display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 12px;
  background: var(--v3-surface); border: 1px solid var(--v3-line);
  font-size: .94rem; font-weight: 600; color: var(--v3-ink-2);
  transition: transform .18s ease, border-color .18s ease;
}
.v3-use:hover { transform: translateY(-2px); border-color: var(--v3-line-strong); }

/* --------------------------------------------------------------------------
   PRICING
   -------------------------------------------------------------------------- */

.v3-billing { display: inline-flex; padding: 4px; border-radius: 13px; background: var(--v3-paper-alt); border: 1px solid var(--v3-line); margin-bottom: 26px; }
[data-theme="dark"] .v3-billing { background: rgba(255, 255, 255, .05); }
.v3-billbtn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  height: 38px; padding: 0 20px; border-radius: 10px;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; color: var(--v3-ink-3);
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.v3-billbtn[aria-selected="true"] { background: var(--v3-surface); color: var(--v3-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .14); }

/* The local-pricing note. Sits between the billing toggle and the cards,
   because it modifies every number below it and nothing above it. [hidden]
   needs the explicit display:none — the class sets display and would otherwise
   win over the attribute. */
.v3-localprice {
  display: block; margin: -14px 0 22px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  /* Emerald: this is good news about the price, and both themes define it. */
  color: var(--v3-emerald);
}
.v3-localprice[hidden] { display: none; }

/* four tiers: explicit columns, because auto-fit lands 3 + 1 and orphans one */
.v3-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1160px) { .v3-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 700px)  { .v3-plans { grid-template-columns: 1fr; } }
/* two plans first: the grid narrows to a centred pair until "See all plans" */
.v3-plans.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; gap: 20px; }
@media (max-width: 700px) { .v3-plans.is-compact { grid-template-columns: 1fr; } }
/* .v3-plan sets display:flex, which beats the UA [hidden] rule */
.v3-plan[hidden] { display: none; }
.v3-more-plans { display: flex; justify-content: center; margin-top: 22px; }
.v3-more-plans .v3-btn { cursor: pointer; font: inherit; font-weight: 700; }
.v3-more-plans[hidden] { display: none; }
.v3-plan {
  position: relative; background: var(--v3-surface); border: 1px solid var(--v3-line); border-radius: 20px;
  padding: 24px 22px; box-shadow: var(--v3-shadow);
  display: flex; flex-direction: column; gap: 20px;
  transition: transform .2s ease, border-color .2s ease;
}
.v3-plan:hover { transform: translateY(-3px); border-color: var(--v3-line-strong); }
.v3-plan--hero:hover { border-color: var(--v3-gold); }
/* The featured plan is marked by its BORDER, not by a fill. A dark card among
   light ones dominated the row and made the other three read as afterthoughts;
   an outline draws the eye without shouting down the plans either side of it.
   Gold because that is this system's attention colour. */
.v3-plan--hero {
  background: var(--v3-surface);
  border-color: var(--v3-gold);
  border-width: 2px;
  /* the 2px border would otherwise shift this card 1px against its neighbours */
  margin: -1px;
}
.v3-plan-flag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  position: absolute; top: -11px; left: 22px; padding: 4px 11px; border-radius: 7px;
  background: var(--v3-surface); border: 1px solid var(--v3-gold);
  color: var(--v3-gold); font-size: .6rem; font-weight: 700; letter-spacing: .14em;
}
.v3-plan-name { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .63rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--v3-ink-3); }
.v3-plan-price { margin-top: 10px; display: flex; align-items: baseline; gap: 7px; }
.v3-plan-price b { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 2.35rem; font-weight: 700; letter-spacing: -.04em; color: var(--v3-ink); }
.v3-plan-price small { font-size: .92rem; color: var(--v3-ink-3); }
.v3-plan-note { margin-top: 8px; font-size: .9rem; color: var(--v3-ink-3); }
.v3-plan ul { display: flex; flex-direction: column; gap: 10px; font-size: .88rem; line-height: 1.5; color: var(--v3-ink-2); }
.v3-plan li { display: flex; gap: 10px; }
.v3-plan li i { color: var(--v3-emerald); font-weight: 800; flex: none; font-style: normal; }
.v3-plan .v3-btn { margin-top: auto; }

.v3-packs {
  margin-top: 22px; padding: 20px 24px; border-radius: 16px;
  background: var(--v3-paper-alt); border: 1px solid var(--v3-line);
  display: flex; align-items: center; gap: 14px 26px; flex-wrap: wrap;
  font-size: .94rem; color: var(--v3-ink-2);
}
.v3-packs b { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .86rem; font-weight: 600; color: var(--v3-ink); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.v3-faq { display: flex; flex-direction: column; gap: 10px; }
.v3-faq details {
  background: var(--v3-surface); border: 1px solid var(--v3-line); border-radius: 15px; padding: 18px 22px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.v3-faq details[open] { border-color: var(--v3-line-strong); box-shadow: var(--v3-shadow); }
.v3-faq summary {
  cursor: pointer; font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; color: var(--v3-ink);
  list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.v3-faq summary::-webkit-details-marker { display: none; }
.v3-faq summary::after {
  content: ''; flex: none; width: 12px; height: 12px; margin-top: 5px;
  border-right: 2px solid var(--v3-ink-3); border-bottom: 2px solid var(--v3-ink-3);
  transform: rotate(45deg); transition: transform .2s ease;
}
.v3-faq details[open] summary::after { transform: rotate(-135deg); }
.v3-faq p { margin-top: 12px; font-size: .95rem; line-height: 1.65; color: var(--v3-ink-2); }
.v3-faq a { border-bottom: 1px solid var(--v3-line-strong); }

/* --------------------------------------------------------------------------
   METHOD + FOOTER
   -------------------------------------------------------------------------- */

.v3-method { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 52px; align-items: start; }
.v3-session { display: flex; gap: 18px; padding: 22px; border-radius: 16px; background: var(--v3-con-surface); border: 1px solid rgba(255, 255, 255, .08); transition: transform .2s ease, border-color .2s ease; }
.v3-session:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .20); }
.v3-session-n { font-family: 'JetBrains Mono', ui-monospace, monospace; flex: none; font-size: .66rem; font-weight: 700; letter-spacing: .12em; color: var(--v3-con-gold); padding-top: 3px; }
.v3-session-n.is-done { color: var(--v3-con-signal); }
.v3-session h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.018em; color: var(--v3-con-ink); }
.v3-session p { margin-top: 7px; font-size: .93rem; line-height: 1.6; color: var(--v3-con-ink-3); }

.v3-footer { background: var(--v3-con-dock); border-top: 1px solid var(--v3-con-line); padding: 56px 0 32px; color: var(--v3-con-ink-3); }
.v3-footer-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--v3-con-line); }
.v3-footer h4 { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--v3-con-ink-5); margin-bottom: 14px; }
.v3-footer-col { display: flex; flex-direction: column; gap: 9px; font-size: .9rem; }
.v3-footer a { color: var(--v3-con-ink-3); transition: color .15s ease; }
.v3-footer a:hover { color: var(--v3-con-ink); }
.v3-footer-blurb { font-size: .88rem; line-height: 1.6; color: var(--v3-con-ink-4); max-width: 30ch; }
.v3-footer-bottom { padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.v3-footer-bottom span { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .74rem; color: var(--v3-con-ink-5); }

/* --------------------------------------------------------------------------
   REVEAL
   -------------------------------------------------------------------------- */

/* Hidden only once JS has said it is present. Without this guard a script
   failure — or no JS at all — leaves every section below the hero invisible. */
.v3-rise { transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1); }
.js .v3-rise { opacity: 0; transform: translateY(14px); }
.v3-rise.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .v3-compare-l { border-right: 0; border-bottom: 1px solid var(--v3-con-line); }
}

@media (max-width: 900px) {
  .v3-nav-links { display: none; }
  .v3-nav-toggle { display: inline-flex; }
  .v3-nav-drawer {
    display: none; background: var(--v3-con-bg); border-top: 1px solid var(--v3-con-line);
    padding: 14px 20px 20px;
  }
  .v3-nav-drawer.is-open { display: flex; flex-direction: column; gap: 4px; }
  .v3-nav-drawer a { padding: 13px 4px; font-size: 1rem; font-weight: 600; color: var(--v3-con-ink-2); border-bottom: 1px solid var(--v3-con-line); }
  .v3-nav-drawer a:last-child { border-bottom: 0; }
  .v3-readout { grid-template-columns: 1fr 1fr; }
  .v3-readout > div { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .05); }
  .v3-readout > div:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .05); }
  .v3-head { gap: 24px; margin-bottom: 34px; }
  .v3-note { columns: 1; }
}

@media (max-width: 767px) {
  html { scroll-padding-top: 70px; }
  .v3-nav-in { height: 60px; padding: 0 20px; gap: 10px; }
  /* the 30px mark leaves the header exactly 1px of slack at 393px — give the
     phone nav its margin back rather than trusting font metrics */
  .v3-brand-gem { width: 26px; height: 26px; border-radius: 7px; }
  .v3-nav-actions { gap: 8px; min-width: 0; }
  .v3-brand { min-width: 0; }
  .v3-brand-name { font-size: .95rem; }
  .v3-wrap { padding: 0 20px; }
  .v3-paper { padding: 60px 0; }
  .v3-paper--tight { padding: 52px 0; }
  .v3-console { padding: 56px 0 56px 0; }
  .v3-ch { display: none; }
  .v3-hero { padding-top: 44px; padding-bottom: 56px; }
  .v3-h1 { font-size: 2.5rem; }
  .v3-hero .v3-lede { font-size: 1rem; margin-top: 22px; }

  .v3-ab { margin-top: 28px; border-radius: 18px; }
  .v3-ab-script { font-size: 1.06rem; padding: 20px 16px 4px; }
  .v3-tracks { padding: 16px; }
  .v3-track { flex-wrap: wrap; gap: 12px; padding: 13px 14px; }
  .v3-track-id { width: auto; flex: 1; }
  .v3-trace { flex: 1 0 100%; order: 3; height: 48px; }
  .v3-trace svg { height: 48px; }
  .v3-track-dur { order: 2; }
  .v3-readout > div { padding: 14px 16px; }
  .v3-ro-live { font-size: 1.1rem; }
  .v3-ro-flat { font-size: .86rem; }

  /* full-width CTAs, but NOT the small nav button — as a flex item inside
     .v3-nav-actions a 100% width blows the header past the viewport and the
     whole page scrolls sideways */
  .v3-btn:not(.v3-btn--sm) { width: 100%; }
  .v3-cta-row { gap: 12px; }
  .v3-btn-note { width: 100%; text-align: center; }
  .v3-trust { gap: 10px; flex-direction: column; }

  .v3-card, .v3-plan { padding: 22px; }
  .v3-compare-l, .v3-compare-r { padding: 22px; }
  .v3-stylepanel { padding: 22px; gap: 18px; }
  .v3-styletab { flex: 1 1 auto; }
  .v3-packs { flex-direction: column; align-items: flex-start; gap: 8px; }
  .v3-method { gap: 32px; }
  .v3-session { flex-direction: column; gap: 10px; }
  .v3-note { margin-top: 18px; }
  .v3-footer { padding: 40px 0 28px; }

  /* design.md: anything tapped on a phone clears 44px. Inline links inside a
     sentence are exempt — padding them out would wreck the prose — but every
     control and every navigation link is a real target. */
  .v3-icon-btn { width: 44px; height: 44px; }
  .v3-btn--sm { height: 44px; }
  .v3-scriptbtn { height: 44px; padding: 0 16px; }
  .v3-billbtn { height: 44px; }
  .v3-billing { display: flex; width: 100%; }
  .v3-billbtn { flex: 1; padding: 0 8px; font-size: .68rem; }
  .v3-footer-col { gap: 0; }
  .v3-footer-col a { padding: 13px 0; border-bottom: 1px solid var(--v3-con-line); }
  .v3-footer-col a:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .v3-rise { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   BREATH MAP
   The two takes share one time axis. Identity is carried by row position and
   a direct label as well as by fill, so it never rests on colour alone.
   -------------------------------------------------------------------------- */

.v3-bm-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  fill: var(--v3-con-ink-4); text-anchor: end;
}
.v3-bm-track { fill: rgba(255, 255, 255, .04); }
.v3-bm-flat { fill: var(--v3-con-ink-4); }
.v3-bm-live { fill: var(--v3-con-signal); }
.v3-bm-axis line { stroke: var(--v3-con-line); stroke-width: 1; }
.v3-bm-axis text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; fill: var(--v3-con-ink-5); text-anchor: middle;
}

/* --------------------------------------------------------------------------
   PHOTOGRAPHY

   Used in exactly two places, on purpose. This page argues that its numbers
   are measured rather than illustrated, and a wall of stock photography is the
   fastest way to undercut that. Both placements carry an idea the copy cannot:
   the trap section needs a face for an argument about how it feels, and the
   closer needs the people the product is actually for.

   Everything here sits on the console bands, so the art direction is fixed:
   near-black ground, warm rim light, no bright corporate stock.
   -------------------------------------------------------------------------- */

.v3-trapnote {
  margin-top: 26px;
  display: grid;
  /* a fixed track, not minmax(0,300px): the image is absolutely positioned so
     the figure has no intrinsic width, and a 0-minimum track collapses to
     nothing — the photo silently disappeared */
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--v3-btn-bg);
}
/* the text sets the block's height and the image fills whatever that is —
   sizing it the other way round left a band of dead space beside a short
   paragraph */
.v3-trapnote figure { margin: 0; position: relative; min-height: 210px; }
.v3-trapnote img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 58% 26%;
}
.v3-trapnote p {
  padding: 34px 36px;
  align-self: center;
  color: var(--v3-btn-fg);
  font-size: 1.02rem;
  line-height: 1.62;
}

.v3-you-strip {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.v3-you-strip figure {
  margin: 0;
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--v3-con-surface);
}
.v3-you-strip img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 22%;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.v3-you-strip figure:hover img { transform: scale(1.04); }
/* the portraits are lit on near-black already; this just seats them into the
   band so the strip reads as one object rather than six floating rectangles */
.v3-you-strip figure::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(7, 9, 14, 0) 55%, rgba(7, 9, 14, .55) 100%);
}

@media (max-width: 1100px) {
  .v3-you-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v3-you-strip figure:nth-child(n + 5) { display: none; }
}
@media (max-width: 820px) {
  .v3-trapnote { grid-template-columns: 1fr; }
  .v3-trapnote figure { max-height: 260px; }
  .v3-you-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v3-you-strip figure:nth-child(n + 4) { display: none; }
}
@media (max-width: 520px) {
  .v3-you-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .v3-you-strip figure:nth-child(n + 3) { display: none; }
  .v3-trapnote p { padding: 22px; font-size: .96rem; }
}

/* --------------------------------------------------------------------------
   HERO AMBIENT FILM

   The stage loop from the previous design, brought back as atmosphere rather
   than as content. It sits BEHIND the grid and fades out well above the
   comparator, because the instrument is the hero's subject and a moving image
   underneath it would compete for the eye. Poster-only under reduced motion.
   -------------------------------------------------------------------------- */




/* --------------------------------------------------------------------------
   LOOP CARD PHOTOGRAPHY
   Each step gets the moment it describes, so the three cards read as a
   sequence of real actions rather than three blocks of prose.
   -------------------------------------------------------------------------- */

.v3-step-shot {
  margin: -26px -26px 4px; /* bleed to the card edge, above the padding */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: var(--v3-con-surface);
}
.v3-step-shot img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.v3-card:hover .v3-step-shot img { transform: scale(1.03); }
@media (max-width: 767px) { .v3-step-shot { margin: -22px -22px 4px; } }

/* --------------------------------------------------------------------------
   HERO: SAY WHAT IT IS

   A visitor who has never heard of Voiche needs three things before anything
   clever: what it is, how it works, and what to press. The inline step list
   and the demo label exist so the instrument below is not a puzzle.
   -------------------------------------------------------------------------- */

.v3-hero-steps {
  margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none; padding: 0;
}
.v3-hero-steps li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px; border-radius: 12px;
  background: var(--con-tint-step); border: 1px solid var(--v3-con-line);
  font-size: .92rem; font-weight: 600; color: var(--v3-con-ink-2);
}
.v3-hero-steps b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  display: inline-flex; width: 24px; height: 24px; flex: none; border-radius: 7px;
  background: var(--v3-con-ink); color: var(--v3-con-bg);
  font-size: .7rem; font-weight: 700; align-items: center; justify-content: center;
}

.v3-demo-label {
  margin: 34px 0 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--v3-con-ink-3);
  display: flex; align-items: center; gap: 10px;
}
.v3-demo-label::after { content: ''; flex: 1; height: 1px; background: var(--v3-con-line); }

/* --------------------------------------------------------------------------
   RECOGNITION LIST
   Six situations, scannable in about four seconds. The point is that the
   reader ticks them off in their head, not that they read a paragraph.
   -------------------------------------------------------------------------- */

.v3-check { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 26px; }
.v3-check li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--v3-surface); border: 1px solid var(--v3-line);
  font-size: 1.02rem; line-height: 1.45; color: var(--v3-ink);
  transition: border-color .18s ease, transform .18s ease;
}
.v3-check li:hover { border-color: var(--v3-line-strong); transform: translateY(-2px); }
.v3-check svg { flex: none; margin-top: 2px; }

@media (max-width: 767px) {
  .v3-hero-steps { flex-direction: column; gap: 8px; }
  .v3-hero-steps li { width: 100%; }
  .v3-check li { font-size: .96rem; padding: 14px 16px; }
}

/* --------------------------------------------------------------------------
   CYCLING FOCUS WORD
   The headline's gold word rotates. inline-block so the transform does not
   drag the rest of the line, and min-width keeps the sentence from jumping
   sideways as the words change length. Static under reduced motion.
   -------------------------------------------------------------------------- */

.v3-cycle {
  display: inline-block;
  transition: opacity .26s ease, transform .26s ease;
  will-change: opacity, transform;
}
.v3-cycle.is-out { opacity: 0; transform: translateY(-.14em); }
@media (prefers-reduced-motion: reduce) {
  .v3-cycle { transition: none; }
  .v3-cycle.is-out { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   PORTRAIT MARQUEE
   The closing portraits scroll continuously. The track holds the set twice and
   translates exactly -50%, so the loop is seamless with no jump. Hover pauses
   it; reduced motion stops it dead and leaves a readable row.
   -------------------------------------------------------------------------- */

.v3-marquee { margin-top: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.v3-marquee-track { display: flex; gap: 12px; width: max-content; animation: v3slide 38s linear infinite; }
.v3-marquee:hover .v3-marquee-track { animation-play-state: paused; }
@keyframes v3slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.v3-marquee figure {
  margin: 0; position: relative; flex: none;
  width: 210px; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08); background: var(--v3-con-surface);
}
.v3-marquee img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.v3-marquee figure::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(7, 9, 14, 0) 55%, rgba(7, 9, 14, .55) 100%);
}
.v3-marquee figcaption {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  padding: 4px 9px; border-radius: 7px;
  background: rgba(7, 9, 14, .72);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .56rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #F8FAFC;
}
@media (prefers-reduced-motion: reduce) { .v3-marquee-track { animation: none; } }
@media (max-width: 767px) { .v3-marquee figure { width: 152px; } .v3-marquee-track { animation-duration: 26s; } }

/* --------------------------------------------------------------------------
   PRACTISE SPOTLIGHT
   Every situation stays on screen; one at a time is lifted. The lift is a
   transform, not a font-size change, so nothing reflows and the grid never
   jumps while it cycles.
   -------------------------------------------------------------------------- */

.v3-spot { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.v3-spot span {
  display: inline-flex; align-items: center;
  padding: 13px 20px; border-radius: 13px;
  background: var(--v3-surface); border: 1px solid var(--v3-line);
  font-size: 1rem; font-weight: 600; color: var(--v3-ink-3);
  transition: transform .45s cubic-bezier(.2,.8,.3,1), color .45s ease, border-color .45s ease, background-color .45s ease, box-shadow .45s ease;
  will-change: transform;
}
.v3-spot span.is-on {
  transform: scale(1.16);
  color: var(--v3-ink);
  border-color: var(--v3-gold);
  box-shadow: 0 12px 28px -12px rgba(180, 83, 9, .45);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .v3-spot span { transition: none; }
  .v3-spot span.is-on { transform: none; }
}
@media (max-width: 767px) {
  .v3-spot span { font-size: .93rem; padding: 11px 15px; }
  .v3-spot span.is-on { transform: scale(1.09); }
}

/* --------------------------------------------------------------------------
   PROOF: REAL LEARNERS — quote cards + a stat strip

   Placeholder content lives in index.html (see the comment above #proof) —
   this is just the layout: three quote cards, then a thin stat strip below,
   both on the same console-dark surface as the rest of this band.
   -------------------------------------------------------------------------- */

.v3-quotes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
.v3-quote {
  background: var(--v3-con-surface); border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px;
  padding: 26px; display: flex; flex-direction: column; gap: 18px;
}
.v3-quote-text {
  margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--v3-con-ink-2);
}
.v3-quote footer { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.v3-quote footer b { font-size: .88rem; font-weight: 700; color: var(--v3-con-ink); }
.v3-quote footer span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .02em; color: var(--v3-con-ink-5);
}

.v3-proof-stats {
  margin-top: 22px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px;
  background: var(--v3-con-dock);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.v3-pstat { padding: 22px 26px; border-left: 1px solid rgba(255, 255, 255, .05); text-align: center; }
.v3-pstat:first-child { border-left: 0; }
.v3-pstat b {
  display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 700; color: var(--v3-con-ink);
}
.v3-pstat span {
  display: block; margin-top: 4px; font-size: .8rem; color: var(--v3-con-ink-4);
}

@media (max-width: 860px) {
  .v3-proof-stats { grid-template-columns: 1fr; }
  .v3-pstat { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .05); }
  .v3-pstat:first-child { border-top: 0; }
}

/* ==========================================================================
   THE #hear BAND — eight flat/expressive pairs
   A card per pair, and inside it two players side by side. The old landing
   instrument stacked the takes and shared one readout; here each half owns its
   own waveform so the two can be compared with the eye as well as the ear.
   ========================================================================== */

/* wraps on a desktop so nothing is cut off; scrolls sideways on a phone,
   where a second row would cost more than a swipe does */
.hr-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hr-tabs::-webkit-scrollbar { display: none; }
.hr-tab {
  /* sized to their own content now: nine full-width thirds was more chrome
     than the card underneath, and the short labels fit in far less */
  flex: 0 0 auto; text-align: left; padding: 8px 12px; border-radius: 11px;
  border: 1px solid var(--v3-con-line); background: var(--con-tint);
  transition: border-color .16s ease, background-color .16s ease;
}
.hr-tab-top { display: flex; align-items: center; gap: 7px; }
.hr-flag {
  width: 18px; height: 13px; flex: none; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--con-edge-mid);
  opacity: .78; transition: opacity .16s ease;
}
.hr-tab[aria-selected="true"] .hr-flag { opacity: 1; }
.hr-tab b {
  font-size: .86rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--v3-con-ink-3); transition: color .16s ease; white-space: nowrap;
}
.hr-tab small {
  display: block; margin-top: 1px; padding-left: 25px; font-size: .71rem;
  color: var(--v3-con-ink-5); white-space: nowrap;
}
.hr-tab:hover { border-color: var(--con-edge-hover); }
.hr-tab[aria-selected="true"] {
  background: var(--con-gold-soft); border-color: var(--v3-con-gold);
}
.hr-tab[aria-selected="true"] b { color: var(--v3-con-ink); }
.hr-tab[aria-selected="true"] small { color: var(--v3-con-gold); }

/* the UA's [hidden]{display:none} loses on specificity to any display rule
   further down, so it is restated here — the same trap the old style panels
   fell into, where all five rendered at once. */
.hr-panel[hidden] { display: none; }

.hr-wrap { display: block; }
/* the quotes differ in length, so without a floor the page jumps a little
   every time a tab is switched */
.hr-panels { min-height: 366px; }

.hr-card {
  background: var(--v3-con-surface); border: 1px solid var(--con-edge);
  border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--con-shadow);
}

/* One label line, no header bar. The card used to open with a docked strip
   carrying the number, the occasion, the accent and the voice at four
   different weights — furniture above the thing that matters, which is the
   sentence. */
.hr-id {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0; padding: 18px 22px 0;
  font-size: .8rem; color: var(--v3-con-ink-4);
}
.hr-id b { font-weight: 700; color: var(--v3-con-ink-2); }
.hr-id i { font-style: normal; color: var(--v3-con-ink-5); }
.hr-id .hr-flag { width: 16px; height: 12px; }
.hr-n {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em;
  color: var(--v3-con-bg); background: var(--v3-con-ink);
  border-radius: 6px; padding: 3px 7px;
}

.hr-line {
  padding: 12px 22px 8px; margin: 0;
  font-size: 1.16rem; line-height: 1.55; color: var(--con-quote); max-width: 62ch;
}

/* Where the weight lands — the page's own focus-word notation, applied to the
   words the expressive take was actually told to lean on. Subtle on purpose:
   the highlight should be noticeable after you press play, not before. */
.hr-em {
  background: none; color: var(--v3-con-gold); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--con-gold-rule);
}

.hr-players { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 22px 20px; }

.hr-play {
  display: block; width: 100%; text-align: left;
  padding: 14px 15px 12px; border-radius: 14px;
  background: var(--con-tint); border: 1px solid var(--v3-con-line);
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.hr-play:active { transform: scale(.988); }
.hr-play:hover { border-color: var(--con-edge-hover); }
.hr-play[data-key="live"] { background: var(--con-sig-soft); border-color: var(--con-sig-edge); }
.hr-play[data-key="live"]:hover { border-color: var(--v3-con-signal); }
.hr-play[data-state="playing"] { background: var(--con-tint-2); border-color: var(--con-edge-strong); }
.hr-play[data-key="live"][data-state="playing"] { background: var(--con-sig-strong); border-color: var(--v3-con-signal); }

.hr-play-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
/* 44px, filled, and it clears the tap-target floor. The 30px outline it
   replaced did not read as a control at a glance — the waveform looked like a
   picture, so nobody knew there was anything to press. */
.hr-icon {
  display: inline-flex; width: 44px; height: 44px; flex: none; border-radius: 50%;
  align-items: center; justify-content: center;
  border: 1px solid var(--con-edge-mid); background: var(--con-tint-2);
  color: var(--v3-con-ink-2);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.hr-icon svg { width: 14px; height: 14px; }
.hr-ico-pause { display: none; }
.hr-play[data-state="playing"] .hr-ico-play { display: none; }
.hr-play[data-state="playing"] .hr-ico-pause { display: block; }
.hr-play:hover .hr-icon { color: var(--v3-con-ink); border-color: var(--con-edge-strong); }

/* the step number says which one to press first */
.hr-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-right: 7px; border-radius: 50%;
  font-style: normal; font-size: .58rem; font-weight: 700;
  background: var(--con-tint-2); color: var(--v3-con-ink-3);
  vertical-align: middle;
}
.hr-play[data-key="live"] .hr-step { background: var(--con-sig-mid); color: var(--v3-con-signal); }

.hr-cue {
  display: block; margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--v3-con-line);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v3-con-ink-4);
}
.hr-play:hover .hr-cue { color: var(--v3-con-ink-2); }
.hr-cue-on { display: none; }
.hr-play[data-state="playing"] .hr-cue-idle { display: none; }
.hr-play[data-state="playing"] .hr-cue-on { display: inline; color: var(--v3-con-signal); }
.hr-play[data-key="live"] .hr-icon { border-color: var(--con-sig-edge-2); color: var(--v3-con-signal); background: var(--con-sig-mid); }
.hr-play[data-key="live"]:hover .hr-icon { border-color: var(--v3-con-signal); }
.hr-play-id { flex: 1; min-width: 0; }
.hr-play-id b {
  display: block; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--v3-con-ink-2);
}
.hr-play[data-key="live"] .hr-play-id b { color: var(--v3-con-ink); }
.hr-play-id small { display: block; font-size: .72rem; color: var(--v3-con-ink-5); margin-top: 2px; }
.hr-dur {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .74rem; font-weight: 600; color: var(--v3-con-ink-4); flex: none;
}

.hr-wave { display: block; position: relative; height: 44px; }
.hr-wave svg { display: block; width: 100%; height: 44px; }
.hr-bars { fill: var(--v3-con-idle); }
.hr-play[data-key="live"] .hr-bars { fill: var(--v3-con-signal); }
.hr-head-line { stroke: var(--v3-con-ink); stroke-width: 1.5; opacity: 0; }
.hr-play[data-state="playing"] .hr-head-line { opacity: 1; }

/* a per-pair caveat. Rare on purpose — if a pair needs one it goes on the
   card, not in a footnote the reader will never reach. */
.hr-note {
  margin: 0; padding: 0 22px 16px;
  font-size: .78rem; line-height: 1.5; color: var(--v3-con-ink-5);
}
.hr-note::before {
  content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--v3-con-ink-5); margin-right: 8px; vertical-align: middle;
}

.hr-metric {
  margin-top: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 15px 22px; border-top: 1px solid var(--v3-con-line); background: var(--v3-con-dock);
}
.hr-metric-label { font-size: .86rem; color: var(--v3-con-ink-3); }
.hr-metric-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 7px;
}
.hr-metric-num s { color: var(--v3-con-ink-5); font-size: .92rem; }
.hr-metric-num i { font-style: normal; font-size: .74rem; color: var(--v3-con-ink-5); }
.hr-metric-num em { font-style: normal; font-size: 1.12rem; font-weight: 700; color: var(--v3-con-ink); }
.hr-gain {
  margin-left: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .92rem; font-weight: 700; color: var(--v3-con-signal);
  background: var(--con-sig-mid); border: 1px solid var(--con-sig-edge-2);
  border-radius: 8px; padding: 4px 10px;
}

@media (max-width: 860px) {
  .hr-line { font-size: 1.06rem; }
}
@media (max-width: 560px) {
  /* eight of these is a long scroll on a phone, so every card gets tighter:
     one line of chrome at the top, a smaller quote, shorter waveforms. */
  .hr-players { grid-template-columns: 1fr; gap: 8px; padding: 12px 16px 16px; }
  .hr-line { font-size: .97rem; line-height: 1.5; padding: 16px 16px 2px; }
  .hr-id { padding: 15px 16px 0; font-size: .76rem; }
  .hr-metric { padding: 12px 16px; gap: 8px; }


  .hr-wave, .hr-wave svg { height: 34px; }
  .hr-play { padding: 10px 12px 8px; }
  .hr-play-top { margin-bottom: 8px; }
  .hr-metric-label { font-size: .8rem; }
  .hr-metric-label { flex: 1 1 100%; }
  .hr-note { padding: 0 16px 14px; }
  .hr-tabs {
    flex-wrap: nowrap; gap: 6px; margin: 0 -20px 14px; padding: 0 20px 2px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hr-tab { flex: 0 0 auto; padding: 8px 11px; }
  .hr-tab b { font-size: .84rem; }
  .hr-panels { min-height: 0; }
}

/* --- #hear band furniture ------------------------------------------------- */


.hr-howto {
  margin: 26px 0 0; max-width: 74ch;
  font-size: .95rem; line-height: 1.65; color: var(--v3-con-ink-3);
  padding-left: 16px; border-left: 2px solid var(--v3-con-gold);
}
.hr-howto b { color: var(--v3-con-ink); }
.hr-howto em { font-style: normal; font-weight: 700; color: var(--v3-con-ink-2); }

.hr-fallback { color: var(--v3-con-ink-4); font-size: .92rem; padding: 30px 0; }
.hr-fallback a { color: var(--v3-con-gold); text-decoration: underline; }

.hr-prov {
  margin-top: 22px; padding: 20px 22px;
  border: 1px dashed var(--v3-con-line-strong); border-radius: 16px;
  background: var(--con-tint-faint);
}
.hr-prov p { margin: 0; font-size: .88rem; line-height: 1.65; color: var(--v3-con-ink-4); max-width: 92ch; }
.hr-prov b {
  color: var(--v3-con-ink-2);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .74rem; letter-spacing: .1em;
}
.hr-prov p b:not(:first-child) { font-family: inherit; font-size: inherit; letter-spacing: normal; color: var(--v3-con-ink-2); }
.hr-prov-2 { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--v3-con-line); }



/* The cards are injected by hear-v1.js, so they miss initReveal()'s one-time
   sweep of .v3-rise. A CSS-only entrance keeps them independent of JS order —
   and, crucially, visible if the animation never runs at all. */
@keyframes hrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hr-panel { animation: hrIn .34s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .hr-panel { animation: none; } }

/* secondary hero action — outline on the film, never a second solid block */
.v3-btn--ghost {
  background: rgba(var(--con-scrim), .42); color: var(--v3-con-ink);
  border: 1px solid var(--con-edge-strong);
  backdrop-filter: blur(6px);
}
.v3-btn--ghost:hover { border-color: var(--v3-con-ink); background: rgba(var(--con-scrim), .72); }

/* the #hear band sits directly under the hero, so it opens tighter */
.hr-band { padding-top: 48px; padding-bottom: 84px; }
.hr-band .v3-head { margin-bottom: 26px; }
.hr-band .hr-howto { margin-bottom: 30px; }
.hr-band .v3-h2 { max-width: 30ch; }
.hr-em-key { color: var(--v3-con-gold); box-shadow: inset 0 -2px 0 var(--con-gold-rule); }

/* ==========================================================================
   LIGHT THEME — the top of the page follows it

   Three surfaces flip: the nav, the hero, and the #hear band. Everything below
   them (#proof, #security, #you) stays .v3-console dark in both themes, so the
   instrument bands still read as equipment against a page that has gone light.

   One override block does it. The `--v3-con-*` palette and the `--con-*`
   surface tokens are both redefined ON these three elements, so every rule
   underneath resolves light without any of them being rewritten.
   ========================================================================== */

[data-theme="light"] .v3-nav,
[data-theme="light"] .v3-hero,
[data-theme="light"] .hr-band {
  --v3-con-bg: #F8FAFC;
  --v3-con-surface: #FFFFFF;
  --v3-con-dock: #F1F5F9;
  --v3-con-line: rgba(15, 23, 42, 0.09);
  --v3-con-line-strong: rgba(15, 23, 42, 0.18);
  --v3-con-ink: #0F172A;
  --v3-con-ink-2: #475569;
  --v3-con-ink-3: #55647A;
  --v3-con-ink-4: #64748B;
  --v3-con-ink-5: #8A97AB;
  --v3-con-gold: #B45309;
  --v3-con-signal: #047857;
  --v3-con-idle: #A3AFC0;
  --v3-con-tg: rgba(15, 23, 42, 0.12);

  --con-nav-bg: rgba(248, 250, 252, .88);
  --con-scrim: 248, 250, 252;
  --con-tint: rgba(15, 23, 42, .025);
  --con-tint-2: rgba(15, 23, 42, .06);
  --con-tint-faint: rgba(15, 23, 42, .015);
  --con-tint-step: rgba(15, 23, 42, .04);
  --con-edge: rgba(15, 23, 42, .10);
  --con-edge-mid: rgba(15, 23, 42, .18);
  --con-edge-hover: rgba(15, 23, 42, .26);
  --con-edge-strong: rgba(15, 23, 42, .34);
  --con-quote: #0F172A;
  --con-shadow: 0 24px 48px -28px rgba(15, 23, 42, .24), 0 0 1px 1px rgba(15, 23, 42, .04);
  --con-grid: rgba(15, 23, 42, .05);
  --con-btn-glow: 0 16px 32px -14px rgba(15, 23, 42, .34);
  --con-sig-soft: rgba(4, 120, 87, .06);
  --con-sig-mid: rgba(4, 120, 87, .10);
  --con-sig-strong: rgba(4, 120, 87, .14);
  --con-sig-edge: rgba(4, 120, 87, .28);
  --con-sig-edge-2: rgba(4, 120, 87, .34);
  --con-gold-soft: rgba(180, 83, 9, .09);
  --con-gold-rule: rgba(180, 83, 9, .38);
  --con-gold-hover: rgba(180, 83, 9, .08);
}

/* The hero film is a dark stage. Behind porcelain it needs lifting, or the
   light scrim over it turns to mud. */


/* In dark the scrim has to carry white text over a lit face, so it is heavy.
   In light the copy is dark ink and needs far less help — a heavy porcelain
   scrim just turns the film to fog. */



/* ==========================================================================
   THE HERO FILM — a region, not a wash

   The clip is 1280x720. Used as a full-bleed background it only works in one
   place: a wide viewport, in dark, where a heavy near-black scrim can sit over
   it. The two cases it failed were both the same failure —

   - On a 393px phone, object-fit: cover crops a 16:9 frame to a narrow centre
     slice. The subject leaves the frame and what is left, at the low opacity
     the text needed, is a smudge.
   - In light, lifting a dark theatre shot bright enough to sit under porcelain
     turns it grey. It stopped being a photograph.

   So it is given a region in both cases instead: a real band across the top on
   a phone, and the right half of the frame on a light desktop. The copy gets a
   clean surface either way, and the film gets to be an image.
   ========================================================================== */



/* ==========================================================================
   THE MOBILE HERO — a phone screen showed one line of text and nothing else

   On a 393px viewport the fold sat just under the headline: no picture, no
   product, no reason to keep scrolling. Two things fill it, both below the
   copy so the headline still reads first:

   - .v3-hero-demo  — the claim, drawn. One flat row, one alive, and the
     measured gain. It animates, because a still picture of a waveform is just
     a texture; a moving one is audio.
   - .v3-reel       — people speaking in ordinary rooms, scrolling slowly.
     Emotion, and proof that "this is for people like me".

   Both are phone-only. The desktop hero keeps the app screen, which works.
   ========================================================================== */

.v3-hero-bg { display: none; }

/* --- the claim, drawn ----------------------------------------------------- */
.v3-hd-row { display: flex; align-items: center; gap: 11px; }
.v3-hd-row + .v3-hd-row { margin-top: 9px; }
.v3-hd-tag {
  flex: none; width: 52px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--v3-con-ink-5);
}
.v3-hd-tag.is-live { color: var(--v3-con-signal); }
.v3-hd-wave { flex: 1; min-width: 0; height: 22px; }
.v3-hd-note {
  flex: none; min-width: 46px; text-align: right;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; font-weight: 700; color: var(--v3-con-ink-5);
}
.v3-hd-note.is-live { color: var(--v3-con-signal); }

/* a still waveform is a texture; a moving one is sound. Only the live row
   moves — the flat row staying still IS the argument. */
@keyframes v3hdPulse { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
.v3-hd-wave.is-live rect {
  transform-box: fill-box; transform-origin: center;
  animation: v3hdPulse 1.5s ease-in-out infinite;
}

/* --- the reel -------------------------------------------------------------
   One large photograph at a time, cross-fading. It was a vertical strip of
   thumbnails first, which read as cheap: the pictures were too small to carry
   a face, and the caption's gradient looked like a drop shadow smeared over
   each one. Full-size, no vignette, no gradient — the caption is a plain chip.
   -------------------------------------------------------------------------- */
.v3-reel { position: relative; border-radius: 18px; overflow: hidden; }
.v3-reel-card {
  margin: 0; position: absolute; inset: 0;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--con-edge);
  opacity: 0;
  animation: v3fade 49.5s ease-in-out infinite;
}
.v3-reel-card:nth-child(1) { animation-delay: 0s; }
.v3-reel-card:nth-child(2) { animation-delay: 5.5s; }
.v3-reel-card:nth-child(3) { animation-delay: 11s; }
.v3-reel-card:nth-child(4) { animation-delay: 16.5s; }
.v3-reel-card:nth-child(5) { animation-delay: 22s; }
.v3-reel-card:nth-child(6) { animation-delay: 27.5s; }
.v3-reel-card:nth-child(7) { animation-delay: 33s; }
.v3-reel-card:nth-child(8) { animation-delay: 38.5s; }
.v3-reel-card:nth-child(9) { animation-delay: 44s; }
/* nine slides, 5.5s each: visible ~3.5s, a 1s dissolve either side */
@keyframes v3fade {
  0%     { opacity: 0; }
  2.02%  { opacity: 1; }
  9.09%  { opacity: 1; }
  11.11% { opacity: 0; }
  100%   { opacity: 0; }
}
.v3-reel-card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.v3-reel-card figcaption {
  position: absolute; left: 12px; bottom: 12px;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(7, 9, 14, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #F8FAFC;
}

@media (prefers-reduced-motion: reduce) {
  .v3-reel-card { animation: none; }
  .v3-reel-card:first-child { opacity: 1; }
  .v3-hd-wave.is-live rect { animation: none; }
}

/* Desktop and phone show the same two things in the same order: the picture,
   then the words. The app screen used to hold the right column and has moved
   behind a button — three things across a 1180px hero left none of them room,
   and the photographs need a near-16:9 box or the faces get cropped away. */
.v3-hero-demo { margin-top: 26px; }
.v3-reel { aspect-ratio: 3 / 2; }

@media (min-width: 901px) {
  .v3-hero-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
    gap: 40px; align-items: center;
  }
  /* the app button is commented out of the markup; a second grid row for it
     left 86px of nothing at the foot of the hero */
  .v3-appbtn { justify-self: start; align-self: start; margin-top: 14px; }
}

@media (max-width: 900px) {
  /* 84px under a 60px nav pushed the picture most of a fold down */
  .v3-hero { padding-top: 28px; padding-bottom: 44px; }
  .v3-hero-in { grid-template-columns: 1fr; }
  .v3-hero-demo { margin-top: 22px; }
  /* The reel LEADS on a phone. It is a grid sibling of the copy, so it cannot
     be slotted between the lede and the buttons — and putting it after the
     copy left it under the fold, which is the whole problem it was added to
     fix. Above the headline it is the first thing seen, and the headline still
     clears the fold on a 852px screen. */
  .v3-reel { display: block; order: -1; margin: 0 0 26px; }
  .v3-phone { display: none; }
  .v3-hero-in { gap: 0; }
}

/* --- the app screen, behind a button ------------------------------------- */
.v3-appbtn {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  padding: 9px 15px; border-radius: 11px;
  border: 1px solid var(--v3-con-line-strong); background: var(--con-tint);
  font-size: .84rem; font-weight: 600; color: var(--v3-con-ink-2);
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.v3-appbtn:hover { border-color: var(--v3-con-gold); color: var(--v3-con-ink); background: var(--con-gold-hover); }
.v3-appbtn svg { flex: none; }

.v3-phone-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(7, 9, 14, .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: v3modal .2s ease-out;
}
.v3-phone-modal[hidden] { display: none; }
@keyframes v3modal { from { opacity: 0; } to { opacity: 1; } }
.v3-phone-modal-in { position: relative; }
.v3-phone-modal .v3-phone { max-width: 330px; max-height: 84vh; }
.v3-phone-close {
  position: absolute; top: -14px; right: -14px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--v3-con-ink); color: var(--v3-con-bg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .6);
}
@media (max-width: 560px) {
  .v3-phone-modal .v3-phone { max-width: 88vw; }
  .v3-phone-close { top: -10px; right: -10px; }
}

/* ==========================================================================
   EXPERIMENT hero-v4  (branch experiment/hero-v4)

   Copy first on every viewport; the product over a photograph on the right;
   a phone-only sticky CTA once the hero button has scrolled away. The phone
   is the same markup-built screen the modal used, absolutely positioned and
   scaled, so it costs no bytes and follows the theme through the tokens.
   ========================================================================== */
.v4-hero { padding-top: 64px; padding-bottom: 64px; }
.v4-hero .v3-h1 { max-width: 24ch; font-size: clamp(2.2rem, 2.9vw, 2.9rem); }
.v4-hero .v3-lede { max-width: 48ch; font-size: 1.05rem; }
.v4-hero .v3-lede b { color: var(--v3-con-ink); font-weight: 700; }
.v4-hero .v3-cta-row { margin-top: 30px; }
.v4-hero .v3-btn--ghost { cursor: pointer; font: inherit; }
.v4-facts { margin-top: 26px; }

.v4-stage { position: relative; padding: 0 0 36px 26px; }
.v4-photo {
  margin: 0; position: relative; aspect-ratio: 16 / 10;
  border-radius: 18px; overflow: hidden; border: 1px solid var(--con-edge);
}
.v4-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 40%; }
/* nine slides on the base .v3-reel-card timing (49.5s, 5.5s each); the card
   covers the lower left, so the crop is anchored to the LEFT edge, which
   pushes every subject further right; the caption chip moves right too */
.v4-photo .v3-reel-card { border: 0; border-radius: 0; animation-name: v3fade; animation-duration: 49.5s; }
.v4-photo .v3-reel-card img { object-position: 0 40%; }
.v4-photo .v3-reel-card figcaption { left: auto; right: 12px; }
.v4-photo figcaption {
  position: absolute; right: 12px; bottom: 12px;
  padding: 5px 10px; border-radius: 8px;
  background: rgba(7, 9, 14, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #F8FAFC;
}
/* the concept card: sits over the photograph's lower-left like a caption
   that grew. Console tokens throughout, so it follows the theme with the
   hero (light) and reads as equipment in dark. */
.v4-demo {
  position: absolute; left: 0; bottom: 0; width: min(310px, 72%);
  padding: 16px 16px 14px; border-radius: 16px;
  background: var(--v3-con-surface); border: 1px solid var(--con-edge-mid);
  box-shadow: var(--con-shadow);
}
.v4-demo-kicker {
  margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--v3-con-gold);
}
.v4-demo-line {
  margin: 10px 0 0; font-size: .92rem; line-height: 1.5; font-weight: 600;
  letter-spacing: -.01em; color: var(--con-quote);
}
.v4-demo-line em { font-style: normal; color: var(--v3-con-gold); border-bottom: 2px solid var(--v3-con-gold); }
.v4-takes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.v4-take {
  display: flex; align-items: center; gap: 9px; min-height: 48px;
  padding: 8px 10px; border-radius: 12px; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
  border: 1px solid var(--v3-con-line); background: var(--con-tint);
  transition: border-color .15s ease, background .15s ease;
}
.v4-take:hover { border-color: var(--con-edge-mid); }
.v4-take.is-live { border-color: var(--con-sig-edge-2); background: var(--con-sig-soft); }
.v4-take-ic {
  width: 26px; height: 26px; flex: none; border-radius: 50%; position: relative;
  border: 1px solid var(--con-edge-mid);
}
.v4-take-ic::after {
  content: ''; position: absolute; left: 9px; top: 7px;
  border-left: 8px solid var(--v3-con-ink-3);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.v4-take.is-live .v4-take-ic { border-color: var(--v3-con-signal); background: var(--con-sig-mid); }
.v4-take.is-live .v4-take-ic::after { border-left-color: var(--v3-con-signal); }
.v4-take[data-state="playing"] .v4-take-ic::after {
  left: 8px; top: 8px; width: 9px; height: 9px; border: 0; border-radius: 2px;
  background: var(--v3-con-ink);
}
.v4-take.is-live[data-state="playing"] .v4-take-ic::after { background: var(--v3-con-signal); }
.v4-take-meta b { display: block; font-size: .78rem; font-weight: 700; color: var(--v3-con-ink-2); }
.v4-take-meta small { display: block; font-size: .62rem; line-height: 1.3; color: var(--v3-con-ink-5); }
.v4-take.is-live .v4-take-meta b { color: var(--v3-con-ink); }
.v4-demo-foot {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--v3-con-line);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .03em; color: var(--v3-con-ink-5);
}
.v4-demo-gain {
  display: inline-block; margin-right: 4px; padding: 2px 7px; border-radius: 6px;
  font-weight: 700; color: var(--v3-con-signal);
  background: var(--con-sig-mid); border: 1px solid var(--con-sig-edge-2);
}

@media (min-width: 901px) {
  .v4-hero .v3-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 56px; align-items: center; }
}
@media (max-width: 900px) {
  .v4-hero { padding-top: 32px; padding-bottom: 48px; }
  .v4-hero .v3-hero-in { grid-template-columns: 1fr; gap: 0; }
  .v4-stage { margin-top: 36px; padding: 0 0 22px 0; }
  /* under 900px the card sits below the picture, pulled up over its edge */
  .v4-stage { padding-bottom: 0; }
  .v4-demo { position: relative; width: auto; margin: -28px 12px 0; }
}
@media (max-width: 767px) {
  /* the desktop line break makes four lines at 393px; let it flow */
  .v4-hero .v3-h1 { font-size: 2.2rem; max-width: none; }
  .v4-hero .v3-h1 br { display: none; }
  .v4-hero .v3-lede { margin-top: 18px; font-size: 1rem; }
  .v4-hero .v3-cta-row { margin-top: 24px; }
  .v4-facts { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
  .v4-hero .v3-btn--ghost { width: 100%; }
}

/* the sticky bar: phone only, slides in under .is-on */
.v4-sticky { display: none; }
@media (max-width: 767px) {
  .v4-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--v3-paper); border-top: 1px solid var(--v3-line);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .16);
    transform: translateY(105%); transition: transform .28s ease;
  }
  .v4-sticky[hidden] { display: none; }
  .v4-sticky.is-on { transform: none; }
  .v4-sticky-note {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .74rem; letter-spacing: .05em; color: var(--v3-ink-3);
  }
  .v4-sticky .v3-btn--sm { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .v4-sticky { transition: none; } }

/* ==========================================================================
   2026-09-06 — the hero demo line carries the product's own notation
   (thought group underline, gold focus word, ‖ pause, ↗↘ arrows), and the
   proof band lost its invented numbers for a founder note.
   ========================================================================== */
.v4-demo-line .v3-tg { display: inline; border-bottom-width: 1px; padding-bottom: 2px; }
.v4-mk {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700;
  font-size: .78em; margin-left: .25em; color: var(--v3-con-ink-4); letter-spacing: .06em;
}
.v4-demo-legend {
  margin: 8px 0 0; font-size: .68rem; line-height: 1.5; color: var(--v3-con-ink-4);
}
.v4-demo-legend em { font-style: normal; color: var(--v3-con-gold); font-weight: 700; }
.v3-p--then {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--v3-tg);
}
.v3-p--then em { font-style: normal; color: var(--v3-gold); font-weight: 700; }
.v3-founder {
  margin-top: 22px; padding: 22px 26px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .09); background: var(--v3-con-dock);
  color: var(--v3-con-ink-4);
}
.v3-founder .v3-p { margin: 0; color: var(--v3-con-ink-4); }
.v3-founder b { color: var(--v3-con-ink); }