/* Volksmond site styles. Generated by landing/build/site_build.py, do not
   hand-edit; edit the design bundle or the build script and rerun. Fonts are
   in assets/fonts.css (self-hosted base64, no external calls).
   --- 2026-06-25: look-and-feel pass (hand-edited; fold back into the build
   bundle on next regenerate). Navy hero/CTA bookends + ambient video slot,
   serif display headings, lifting cards, scroll-reveal. --- */

/* ─────────────────────────────────────────────────────────────
 * Volksmond, design tokens
 * Three palettes × light/dark, all in OKLCH so they stay calm
 * and tonally consistent regardless of which one is active.
 * ───────────────────────────────────────────────────────────── */


:root {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "IBM Plex Serif", ui-serif, Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-transcript: var(--font-sans);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* layout + motion + depth (look-and-feel pass) */
  --maxw: 1140px;
  --gutter: clamp(20px, 5vw, 44px);
  --section-y: clamp(48px, 5vw, 76px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 28px -16px rgba(0, 0, 0, .22);
  --shadow-pop: 0 30px 60px -22px rgba(0, 0, 0, .40), 0 12px 24px -16px rgba(0, 0, 0, .20);
}

/* ── Direction A · Clinical-quiet ─────────────────────────── */
.vm[data-palette="clinical"] {
  --name: "Clinical Quiet";
  /* Light theme = soft "cool paper", NOT stark white: the neutrals carry a faint
     brand-navy tint (hue ~258) and the ink is a deep navy rather than pure black,
     so black-on-white starkness softens while it still reads as a light theme. */
  --bg: oklch(0.976 0.008 258);
  --surface: oklch(0.967 0.009 258);
  --surface-2: oklch(0.940 0.012 258);
  --surface-3: oklch(0.905 0.014 258);
  --ink: oklch(0.225 0.021 262);
  --ink-2: oklch(0.440 0.018 260);
  --ink-3: oklch(0.620 0.014 260);
  --ink-4: oklch(0.780 0.012 260);
  --line: oklch(0.902 0.011 258);
  --line-2: oklch(0.828 0.013 258);
  --accent: oklch(0.45 0.085 252);
  --accent-soft: oklch(0.93 0.032 250);
  --accent-ink: oklch(0.99 0.004 258);
  --record: oklch(0.56 0.18 25);
  --record-soft: oklch(0.95 0.03 25);
  --warn: oklch(0.60 0.13 75);
  --warn-soft: oklch(0.95 0.04 80);
  --ok: oklch(0.50 0.10 155);
  --ok-soft: oklch(0.94 0.04 155);
  --danger: oklch(0.50 0.18 25);
}

/* ── Direction B · Warm paper ─────────────────────────────── */
.vm[data-palette="paper"] {
  --name: "Warm Paper";
  --bg: oklch(0.975 0.012 85);
  --surface: oklch(0.955 0.016 82);
  --surface-2: oklch(0.925 0.022 80);
  --surface-3: oklch(0.89 0.025 78);
  --ink: oklch(0.22 0.025 55);
  --ink-2: oklch(0.44 0.025 55);
  --ink-3: oklch(0.60 0.022 58);
  --ink-4: oklch(0.76 0.018 65);
  --line: oklch(0.88 0.022 75);
  --line-2: oklch(0.80 0.025 70);
  --accent: oklch(0.45 0.12 40);
  --accent-soft: oklch(0.92 0.04 55);
  --accent-ink: oklch(0.98 0.01 80);
  --record: oklch(0.48 0.16 28);
  --record-soft: oklch(0.93 0.04 30);
  --warn: oklch(0.55 0.13 65);
  --warn-soft: oklch(0.93 0.05 70);
  --ok: oklch(0.48 0.10 145);
  --ok-soft: oklch(0.92 0.04 145);
  --danger: oklch(0.45 0.17 28);
}

/* ── Direction C · Veld neutrals ──────────────────────────── */
.vm[data-palette="veld"] {
  --name: "Veld Neutrals";
  --bg: oklch(0.955 0.012 90);
  --surface: oklch(0.93 0.016 88);
  --surface-2: oklch(0.895 0.020 85);
  --surface-3: oklch(0.86 0.025 82);
  --ink: oklch(0.21 0.028 60);
  --ink-2: oklch(0.42 0.028 60);
  --ink-3: oklch(0.58 0.025 65);
  --ink-4: oklch(0.74 0.020 70);
  --line: oklch(0.85 0.020 80);
  --line-2: oklch(0.76 0.025 75);
  --accent: oklch(0.40 0.10 55);
  --accent-2: oklch(0.40 0.06 200);
  --accent-soft: oklch(0.90 0.03 55);
  --accent-ink: oklch(0.97 0.01 80);
  --record: oklch(0.46 0.14 32);
  --record-soft: oklch(0.91 0.04 35);
  --warn: oklch(0.55 0.12 75);
  --warn-soft: oklch(0.92 0.04 80);
  --ok: oklch(0.44 0.08 165);
  --ok-soft: oklch(0.91 0.03 160);
  --danger: oklch(0.45 0.16 30);
}

/* ── Dark mirrors ─────────────────────────────────────────── */
.vm[data-palette="clinical"][data-dark="true"] {
  /* Dark theme = deep navy-black, NOT flat black: the neutrals keep a low lightness
     (still genuinely dark) but carry brand-navy chroma (hue ~262), so "black
     everywhere" becomes a branded midnight navy. */
  --bg: oklch(0.168 0.024 262);
  --surface: oklch(0.208 0.026 262);
  --surface-2: oklch(0.248 0.028 262);
  --surface-3: oklch(0.292 0.030 262);
  --ink: oklch(0.965 0.008 260);
  --ink-2: oklch(0.780 0.014 260);
  --ink-3: oklch(0.585 0.016 260);
  --ink-4: oklch(0.432 0.020 260);
  --line: oklch(0.312 0.022 262);
  --line-2: oklch(0.392 0.024 262);
  --accent: oklch(0.80 0.105 245);
  --accent-soft: oklch(0.30 0.055 252);
  --accent-ink: oklch(0.16 0.02 262);
  --record: oklch(0.68 0.18 25);
  --record-soft: oklch(0.28 0.06 25);
  --warn: oklch(0.75 0.13 80);
  --warn-soft: oklch(0.28 0.05 80);
  --ok: oklch(0.72 0.13 155);
  --ok-soft: oklch(0.25 0.05 155);
}

.vm[data-palette="paper"][data-dark="true"] {
  --bg: oklch(0.175 0.015 60);
  --surface: oklch(0.215 0.018 60);
  --surface-2: oklch(0.255 0.020 60);
  --surface-3: oklch(0.30 0.022 60);
  --ink: oklch(0.96 0.012 80);
  --ink-2: oklch(0.78 0.015 75);
  --ink-3: oklch(0.58 0.018 70);
  --ink-4: oklch(0.42 0.020 65);
  --line: oklch(0.32 0.020 60);
  --line-2: oklch(0.40 0.022 60);
  --accent: oklch(0.72 0.13 45);
  --accent-soft: oklch(0.30 0.06 40);
  --accent-ink: oklch(0.17 0.015 60);
  --record: oklch(0.66 0.16 28);
  --record-soft: oklch(0.28 0.06 28);
  --warn: oklch(0.74 0.13 70);
  --warn-soft: oklch(0.28 0.05 70);
  --ok: oklch(0.68 0.10 150);
  --ok-soft: oklch(0.26 0.05 150);
}

.vm[data-palette="veld"][data-dark="true"] {
  --bg: oklch(0.165 0.018 70);
  --surface: oklch(0.205 0.020 70);
  --surface-2: oklch(0.245 0.022 70);
  --surface-3: oklch(0.29 0.024 70);
  --ink: oklch(0.96 0.012 85);
  --ink-2: oklch(0.77 0.015 80);
  --ink-3: oklch(0.57 0.018 75);
  --ink-4: oklch(0.41 0.020 70);
  --line: oklch(0.31 0.022 70);
  --line-2: oklch(0.39 0.025 70);
  --accent: oklch(0.70 0.11 55);
  --accent-2: oklch(0.66 0.07 200);
  --accent-soft: oklch(0.30 0.06 55);
  --accent-ink: oklch(0.17 0.018 70);
  --record: oklch(0.64 0.14 32);
  --record-soft: oklch(0.28 0.06 32);
  --warn: oklch(0.74 0.12 75);
  --warn-soft: oklch(0.28 0.05 75);
  --ok: oklch(0.66 0.09 160);
  --ok-soft: oklch(0.26 0.04 160);
}

/* Heavier elevation in dark mode so cards still read against dark surfaces. */
body[data-dark="true"] {
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 30px -18px rgba(0, 0, 0, .75);
  --shadow-pop: 0 34px 70px -24px rgba(0, 0, 0, .85), 0 12px 24px -16px rgba(0, 0, 0, .55);
}

/* ── Component primitives ─────────────────────────────────── */
.vm {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "ss01", "ss02", "cv01";
  font-variant-ligatures: common-ligatures;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.vm * { box-sizing: border-box; }
.vm .surface { background: var(--surface); }
.vm .surface-2 { background: var(--surface-2); }
.vm .hairline { border: 1px solid var(--line); }
.vm .hairline-t { border-top: 1px solid var(--line); }
.vm .hairline-b { border-bottom: 1px solid var(--line); }
.vm .hairline-r { border-right: 1px solid var(--line); }
.vm .hairline-l { border-left: 1px solid var(--line); }
.vm .ink-2 { color: var(--ink-2); }
.vm .ink-3 { color: var(--ink-3); }
.vm .ink-4 { color: var(--ink-4); }
.vm .mono { font-family: var(--font-mono); font-feature-settings: "ss01"; }

/* Buttons */
.vm .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: 8px;
  font: 500 13.5px/1 var(--font-sans);
  letter-spacing: -0.005em;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  cursor: default;
  transition: background .12s, border-color .12s, transform .06s;
}
.vm .btn:hover { background: var(--surface-2); }
.vm .btn:active { transform: translateY(0.5px); }
.vm .btn.primary {
  background: var(--accent); color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.06);
}
.vm .btn.primary:hover { filter: brightness(0.97); }
.vm .btn.ghost { background: transparent; border-color: transparent; }
.vm .btn.ghost:hover { background: var(--surface-2); }
.vm .btn.danger { color: var(--danger); border-color: var(--line-2); }
.vm .btn.tall { height: 44px; padding: 0 22px; font-size: 14px; }

/* Field */
.vm .field {
  height: 36px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font: 400 13.5px/1 var(--font-sans);
  width: 100%;
}
.vm .field:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.vm .field.tall { height: 44px; font-size: 14px; }

/* Chip / status */
.vm .chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px; border-radius: 999px;
  font: 500 11px/1 var(--font-sans);
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
  letter-spacing: 0.01em;
}
.vm .chip .dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.vm .chip.live { color: var(--record); background: var(--record-soft); border-color: transparent; }
.vm .chip.live .dot { background: var(--record); animation: vm-pulse 1.6s ease-in-out infinite; }
.vm .chip.ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.vm .chip.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.vm .chip.muted { color: var(--ink-3); }

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

/* Toggle (the in-app one, not the tweaks one) */
.vm .toggle {
  width: 34px; height: 20px; border-radius: 999px;
  background: var(--line-2); position: relative; cursor: default;
  transition: background .15s;
  flex: 0 0 auto;
}
.vm .toggle.on { background: var(--accent); }
.vm .toggle.danger.on { background: var(--record); }
.vm .toggle i {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .15s;
}
.vm .toggle.on i { transform: translateX(14px); }

/* Card */
.vm .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Typography utilities */
.vm h1, .vm h2, .vm h3 { margin: 0; letter-spacing: -0.02em; font-weight: 600; }
.vm h1 { font-size: 28px; line-height: 1.15; }
.vm h2 { font-size: 20px; line-height: 1.2; }
.vm h3 { font-size: 15px; line-height: 1.25; font-weight: 600; }
.vm p { margin: 0; line-height: 1.55; }

.vm .eyebrow {
  font: 500 10.5px/1 var(--font-sans);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Volksmond wordmark */
.vm .wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14.5px/1 var(--font-sans);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.vm .wordmark .mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--accent);
}

/* Level meter */
.vm .meter {
  display: flex; gap: 2px; height: 16px; align-items: center;
}
.vm .meter .bar {
  width: 3px; border-radius: 1.5px; background: var(--line-2);
}

/* Disclosures and small cards */
.vm .disclosure {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--surface);
}
.vm .disclosure.warn {
  border-color: color-mix(in oklch, var(--warn) 35%, var(--line));
  background: var(--warn-soft);
}
.vm .disclosure.danger {
  border-color: color-mix(in oklch, var(--record) 30%, var(--line));
  background: var(--record-soft);
}

/* Auto-scroll fade for the transcript */
.vm .fade-top {
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
}

/* Pulsing cursor at the end of an in-progress transcript line */
.vm .caret {
  display: inline-block; width: 1ch; height: 1em;
  vertical-align: -0.12em;
  background: currentColor; opacity: 0.4;
  animation: vm-caret 1.1s steps(2) infinite;
  margin-left: 2px; border-radius: 1px;
}
@keyframes vm-caret {
  0%, 50% { opacity: 0.55; }
  51%, 100% { opacity: 0.05; }
}

/* Spinner */
.vm .spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line-2);
  border-top-color: var(--accent);
  animation: vm-spin .9s linear infinite;
}
@keyframes vm-spin { to { transform: rotate(360deg); } }

/* Soft kbd */
.vm kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink-2);
  font: 500 10.5px/1 var(--font-mono);
}

/* ===== Landing layout ===== */
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--bg); color: var(--ink); line-height: 1.6; }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  ::selection { background: var(--accent-soft); }
  [id] { scroll-margin-top: 84px; }

  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

  /* Display headings switch serif/sans via <html data-hfont>. */
  .display { letter-spacing: -0.022em; font-weight: 600; text-wrap: balance; }
  html[data-hfont="serif"] .display { font-family: var(--font-serif); letter-spacing: -0.012em; }
  html[data-hfont="sans"]  .display { font-family: var(--font-sans); }
  h1.display { font-size: clamp(34px, 5.4vw, 56px); line-height: 1.04; margin: 0; }
  h2.display { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.1; margin: 0; }

  .eyebrow { font: 500 11px/1 var(--font-sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
  .lead { font-size: clamp(16.5px, 1.5vw, 18.5px); color: var(--ink-2); line-height: 1.6; text-wrap: pretty; }
  .mono { font-family: var(--font-mono); }

  /* ── Header ───────────────────────────────────────────────────────────── */
  header {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in oklch, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
    border-bottom: 1px solid var(--line);
    transition: background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
  }
  header[data-scrolled="true"] { box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(0,0,0,.5); }
  .nav { display: flex; align-items: center; gap: 14px; height: 62px; }
  .wordmark { display: inline-flex; align-items: center; gap: 9px; font: 600 17px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--ink); }
  .wordmark .mark { color: var(--accent); display: inline-flex; width: 24px; height: 24px; }
  .wordmark .mark svg { width: 100%; height: 100%; }
  .wordmark .by { font: 500 11px/1 var(--font-sans); color: var(--ink-3); margin-left: 3px; letter-spacing: 0; white-space: nowrap; }
  .nav .spacer { flex: 1; }

  /* EN/AF language switcher — FIXED appearance in light AND dark mode (and whether
     or not the header has scrolled). It uses neutral, mode-independent colours so
     the highlighted language never inverts and can't be mistaken for a dark/light
     mode indicator. */
  .langtoggle { display: inline-flex; border: 1px solid rgba(132,144,170,.45); border-radius: 999px; overflow: hidden; height: 34px; }
  .langtoggle button { border: 0; background: transparent; color: #6f7c97; font: 600 12px/1 var(--font-sans); padding: 0 13px; cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease); }
  .langtoggle button.on { background: #4d6a9c; color: #fff; }

  .iconbtn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); color: var(--ink-2); cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease), border-color .2s var(--ease); }
  .iconbtn:hover { background: var(--surface-2); color: var(--ink); }
  .iconbtn .sun { display: none; } .iconbtn .moon { display: block; }
  body[data-dark="true"] .iconbtn .sun { display: block; } body[data-dark="true"] .iconbtn .moon { display: none; }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 9px; font: 600 14px/1 var(--font-sans); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; transition: filter .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease), box-shadow .14s var(--ease); }
  .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
  .btn.primary:hover { filter: brightness(0.96); text-decoration: none; }
  .btn.big { height: 50px; padding: 0 24px; font-size: 15px; border-radius: 10px; }
  /* .vm scope so this beats the primitive `.vm .btn{display:inline-flex}` and the
     in-hero email form covers the CTA on phones anyway. */
  .vm .nav-cta { display: none; }
  @media (min-width: 760px) { .vm .nav-cta { display: inline-flex; } }

  /* DARK theme only: over the navy hero the header floats as seamless navy until
     you scroll, then condenses to the usual glass bar. In LIGHT theme (and on
     inner pages) the header stays the default light glass. */
  body[data-dark="true"][data-hero="navy"] header:not([data-scrolled="true"]) {
    background: #1b2640; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-bottom-color: transparent; box-shadow: none;
  }
  body[data-dark="true"][data-hero="navy"] header:not([data-scrolled="true"]) .wordmark { color: #fff; }
  body[data-dark="true"][data-hero="navy"] header:not([data-scrolled="true"]) .wordmark .mark { color: #aab9e6; }
  body[data-dark="true"][data-hero="navy"] header:not([data-scrolled="true"]) .wordmark .by { color: rgba(255,255,255,.6); }
  /* (EN/AF switcher keeps one fixed look in every theme/scroll state — see
     .langtoggle above — so it is deliberately NOT re-coloured over the navy hero.) */
  body[data-dark="true"][data-hero="navy"] header:not([data-scrolled="true"]) .iconbtn { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.06); color: rgba(255,255,255,.86); }
  body[data-dark="true"][data-hero="navy"] header:not([data-scrolled="true"]) .iconbtn:hover { background: rgba(255,255,255,.13); color: #fff; }
  body[data-dark="true"][data-hero="navy"] header:not([data-scrolled="true"]) .nav-cta { background: rgba(255,255,255,.13); color: #fff; border: 1px solid rgba(255,255,255,.26); box-shadow: none; }
  body[data-dark="true"][data-hero="navy"] header:not([data-scrolled="true"]) .nav-cta:hover { background: rgba(255,255,255,.22); filter: none; }

  /* ── Hero + final-CTA "band" ──────────────────────────────────────────────
     THEME-RESPONSIVE: brand navy in dark theme, a soft light-blue wash in light
     theme, so choosing a theme visibly changes the hero, not only the sections
     below it. Shared layout here; colours split by [data-dark] below. */
  .on-navy { position: relative; overflow: clip; isolation: isolate; transition: background .35s var(--ease), color .35s var(--ease); }
  .on-navy .wrap { position: relative; z-index: 3; }
  /* faint dot grid, fading from the top-left, above the video/tint */
  .on-navy::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(130% 90% at 12% 0%, #000, transparent 64%);
    mask-image: radial-gradient(130% 90% at 12% 0%, #000, transparent 64%);
  }

  /* Ambient background video. Recoloured to the brand blue and blended PER THEME
     so it matches the band: SCREEN + darkened over the navy (dark) band; on the
     light band it is INVERTED so the bright-on-black clip becomes faint dark-on-
     white marks, then MULTIPLIED into the wash and lightened. Shown in both
     themes; the .hero-tint scrim keeps the headline readable. */
  .hero-bg {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; z-index: 0; pointer-events: none;
    /* Clip is sharp on the left, out-of-focus (bokeh) on the right.
       scaleY(-1): vertical flip → the field crowns the top instead of the bottom.
       No horizontal mirror now, so the crisp wave-lines fall on the LEFT under the
       headline scrim and the soft bokeh sits to the right by the product window. */
    transform: scaleY(-1);
    transition: opacity 1.2s var(--ease);
  }
  .hero-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

  /* DARK: blue glow screened over the navy. High contrast crushes the out-of-focus
     haze toward black so the crisp lines read sharp; scrim eased off the right. */
  body[data-dark="true"] .hero-bg { mix-blend-mode: screen; filter: hue-rotate(64deg) saturate(.72) brightness(.92) contrast(1.75); }
  body[data-dark="true"] .hero-bg.is-ready { opacity: .84; }
  body[data-dark="true"] .hero-tint {
    background:
      linear-gradient(90deg, rgba(27,38,64,.92) 0%, rgba(27,38,64,.5) 44%, rgba(27,38,64,.08) 100%),
      linear-gradient(0deg, rgba(24,34,58,.85) 0%, rgba(24,34,58,0) 48%);
  }

  /* LIGHT: invert turns the bright-on-black clip into dark-on-white marks, multiply
     drops them into the wash. Higher contrast keeps the lines defined, not muddy. */
  body:not([data-dark="true"]) .hero-bg { mix-blend-mode: multiply; filter: invert(1) hue-rotate(-118deg) saturate(.62) brightness(1) contrast(1.62); }
  body:not([data-dark="true"]) .hero-bg.is-ready { opacity: .62; }
  body:not([data-dark="true"]) .hero-tint {
    background:
      linear-gradient(90deg, rgba(233,236,244,.9) 0%, rgba(233,236,244,.48) 44%, rgba(233,236,244,.06) 100%),
      linear-gradient(0deg, rgba(233,236,244,.8) 0%, rgba(233,236,244,0) 48%);
  }

  /* LIGHT theme band — soft blue wash, dark ink, default form + buttons */
  body:not([data-dark="true"]) .on-navy {
    background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 13%, var(--surface)) 0%, color-mix(in oklch, var(--accent) 5%, var(--surface)) 100%);
    color: var(--ink);
  }
  body:not([data-dark="true"]) .on-navy::before { background-image: radial-gradient(var(--line-2) 1.1px, transparent 1.1px); opacity: .5; }
  /* (video + scrim now show in light theme too — see per-theme .hero-bg rules above) */

  /* DARK theme band — brand navy, light ink, light form on navy */
  body[data-dark="true"] .on-navy {
    --navy-accent: #aab9e6;
    background: linear-gradient(180deg, #1b2640 0%, #18223a 100%);
    color: #f2f5fb;
  }
  body[data-dark="true"] .on-navy::before { background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); }
  body[data-dark="true"] .on-navy h1, body[data-dark="true"] .on-navy h2.display { color: #fff; }
  body[data-dark="true"] .on-navy .lead, body[data-dark="true"] .on-navy .sub { color: rgba(255,255,255,.76); }
  body[data-dark="true"] .on-navy .tagline { color: var(--navy-accent); }
  body[data-dark="true"] .on-navy .pill { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); }
  body[data-dark="true"] .on-navy a { color: var(--navy-accent); }
  body[data-dark="true"] .on-navy .form input[type=email] { background: rgba(255,255,255,.96); border-color: transparent; color: #10182b; box-shadow: 0 1px 2px rgba(0,0,0,.28); }
  body[data-dark="true"] .on-navy .form input[type=email]::placeholder { color: #69708a; }
  body[data-dark="true"] .on-navy .form input[type=email]:focus { outline: 2px solid var(--navy-accent); outline-offset: 2px; }
  body[data-dark="true"] .on-navy .btn.primary { background: var(--navy-accent); color: #10182b; border-color: transparent; box-shadow: 0 8px 22px -10px rgba(0,0,0,.6); }
  body[data-dark="true"] .on-navy .btn.primary:hover { filter: brightness(1.05); }
  body[data-dark="true"] .on-navy .reassure { color: #84e3b4; }
  body[data-dark="true"] .on-navy .reassure .dot { background: currentColor; }
  body[data-dark="true"] .on-navy .consent { color: rgba(255,255,255,.68); }
  body[data-dark="true"] .on-navy .consent input { accent-color: var(--navy-accent); }
  body[data-dark="true"] .on-navy .popia { color: rgba(255,255,255,.6); }
  body[data-dark="true"] .on-navy .popia .lock { color: rgba(255,255,255,.88); }
  body[data-dark="true"] .on-navy .pron { color: rgba(255,255,255,.62); }
  body[data-dark="true"] .on-navy .pron strong { color: rgba(255,255,255,.92); }
  body[data-dark="true"] .on-navy .thanks { background: rgba(132,227,180,.14); color: #b6f0d4; }

  /* ── Hero ─────────────────────────────────────────────────────────────── */
  /* padding:0 — the hero-grid supplies its own vertical rhythm; without this it
     would inherit the global section padding on top of it (double gap). */
  .hero { position: relative; padding: 0; }
  .hero .wrap { position: relative; }
  .hero-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; padding: clamp(104px, 13vh, 140px) 0 clamp(60px, 9vh, 96px); }
  @media (min-width: 940px) { .hero-grid { grid-template-columns: 1.02fr 0.98fr; gap: 52px; } }

  .kicker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
  .tagline { font: 600 13.5px/1 var(--font-sans); color: var(--accent); letter-spacing: -0.005em; }
  .pill { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; }
  .hero h1 { margin-bottom: 22px; }
  .hero .sub { max-width: 560px; margin-bottom: 6px; }
  .pron { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 13.5px; color: var(--ink-3); }
  /* The English phonetic guide is redundant for Afrikaans readers. */
  html[lang^="af"] .en-only { display: none; }
  .pron strong { color: var(--ink-2); font-weight: 600; font-family: var(--font-mono); font-size: 12.5px; }

  /* Email form */
  .form { display: flex; flex-direction: column; max-width: 480px; margin-top: 28px; }
  .form-fields { display: flex; flex-wrap: wrap; gap: 10px; }
  .form input[type=email] { flex: 1; min-width: 220px; height: 50px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink); font: 400 15px/1 var(--font-sans); }
  .form input[type=email]:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
  .reassure { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12.5px; color: var(--ok); font-weight: 500; }
  .reassure .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
  .consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
  .consent input { margin-top: 3px; accent-color: var(--accent); }
  .popia { font-size: 12px; color: var(--ink-3); margin-top: 10px; max-width: 480px; line-height: 1.5; }
  .form .popia { margin-top: 12px; }
  .popia .lock { color: var(--ink-2); font-weight: 500; }
  .thanks { display: none; align-items: center; gap: 10px; margin-top: 4px; padding: 15px 17px; border-radius: var(--radius); background: var(--ok-soft); color: var(--ok); font-weight: 500; font-size: 14px; }

  /* ── Hero transcript panel (forked from the app's live screen) ─────────── */
  .vt-stage { perspective: 1600px; position: relative; }
  /* soft accent glow behind the floating product window */
  .hero .vt-stage::after {
    content: ""; position: absolute; inset: 4% -2% -2% 4%; z-index: -1; pointer-events: none;
    background: radial-gradient(58% 56% at 64% 30%, rgba(150,170,235,.5), transparent 72%);
    filter: blur(36px); opacity: .35;
  }
  body[data-dark="true"] .hero .vt-stage::after { opacity: .6; }
  .vt-win { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.03), 0 30px 60px -28px rgba(0,0,0,.34), 0 12px 24px -16px rgba(0,0,0,.18); transform: rotateY(-4deg) rotateX(2deg); transition: transform .6s var(--ease), box-shadow .3s var(--ease); }
  .vt-stage:hover .vt-win { transform: rotateY(0deg) rotateX(0deg); }
  body[data-dark="true"] .vt-win { box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 34px 70px -30px rgba(0,0,0,.8); }
  @media (max-width: 940px) { .vt-win { transform: none; } .hero .vt-stage::after { display: none; } }
  .vt-titlebar { height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .vt-titlebar .mark { color: var(--accent); width: 15px; height: 15px; display: inline-flex; }
  .vt-titlebar .mark svg { width: 100%; height: 100%; }
  .vt-app { font: 500 12px/1 var(--font-sans); color: var(--ink-2); }
  .vt-rec { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: var(--record-soft); color: var(--record); font: 600 10.5px/1 var(--font-sans); letter-spacing: 0.02em; }
  .vt-rec i { width: 6px; height: 6px; border-radius: 50%; background: var(--record); animation: vm-pulse 1.6s ease-in-out infinite; }
  .vt-winbtns { margin-left: auto; display: flex; }
  .vt-winbtns span { width: 40px; height: 38px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); }

  .vt-subhead { padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
  .vt-title { font: 600 12.5px/1.3 var(--font-sans); color: var(--ink); }
  .vt-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; font-size: 11px; color: var(--ink-3); }
  .vt-meta .mono { font-feature-settings: "tnum"; }
  .vt-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }
  .vt-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 500 10.5px/1 var(--font-sans); background: var(--record-soft); color: var(--record); }
  .vt-chip i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: vm-pulse 1.6s ease-in-out infinite; }

  .vt-body { padding: 18px 20px 8px; height: 296px; overflow: hidden; }
  .vt-row { display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; margin-bottom: 15px; }
  .vt-time { font: 400 11px/1 var(--font-mono); color: var(--ink-3); padding-top: 4px; font-feature-settings: "tnum"; }
  .vt-who { font: 600 10px/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 3px; }
  .vt-who.you { color: var(--accent); }
  .vt-who.s2 { color: color-mix(in oklch, var(--accent) 55%, oklch(0.55 0.13 65)); }
  .vt-who.s3 { color: color-mix(in oklch, var(--accent) 55%, oklch(0.55 0.11 205)); }
  .vt-text { font: 400 14.5px/1.55 var(--font-sans); color: var(--ink); text-wrap: pretty; }
  .caret { display: inline-block; width: 2px; height: 1em; vertical-align: -0.14em; background: var(--accent); margin-left: 2px; border-radius: 1px; animation: vm-caret 1.1s steps(2) infinite; }

  .vt-foot { border-top: 1px solid var(--line); background: var(--surface); padding: 11px 18px; display: flex; align-items: center; gap: 16px; }
  .vt-meterwrap { display: flex; align-items: center; gap: 8px; }
  .vt-meterlbl { font: 500 9.5px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
  .vt-meter { display: flex; align-items: flex-end; gap: 2px; height: 15px; }
  .vt-meter i { width: 2.5px; border-radius: 1.5px; background: var(--line-2); }
  .vt-meter i.on { background: var(--accent); }
  .vt-meter i.peak { background: var(--warn); }
  .vt-save { margin-left: auto; font: 400 10.5px/1 var(--font-sans); color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
  .vt-save .mono { color: var(--ink-2); }
  .vt-lock { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); }
  @media (max-width: 460px) { .vt-meterwrap.sysaudio { display: none; } .vt-save .path { display: none; } }

  /* ── Sections ─────────────────────────────────────────────────────────── */
  section { padding: var(--section-y) 0; }
  .problem { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); padding: var(--section-y) 0; }
  .problem .inner { display: block; }
  /* Eyebrow with a short accent bar. */
  .problem .lbl { display: inline-flex; align-items: center; gap: 12px; font: 600 11px/1.5 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
  .problem .lbl::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--accent); }
  /* Full-width two-line statement; the <br> forces one sentence per line and, being a
     child of the (untranslated) <p>, survives setLang — the sentences are separate spans. */
  .problem .lead-quote { margin: 16px 0 0; max-width: 62rem; font-family: var(--font-serif); font-weight: 400; font-size: clamp(21px, 2.5vw, 30px); line-height: 1.3; letter-spacing: -0.014em; color: var(--ink); text-wrap: pretty; }
  .problem em { font-style: normal; color: var(--accent); }
  /* Supporting paragraphs sit beside the SA callout card. */
  .problem .problem-body { display: grid; gap: 28px; margin-top: clamp(30px, 4vw, 46px); align-items: start; }
  @media (min-width: 900px) { .problem .problem-body { grid-template-columns: 1.25fr 0.9fr; gap: 48px; } }
  .problem .problem-paras { display: grid; gap: clamp(14px, 1.6vw, 20px); }
  .problem .problem-paras p { margin: 0; font-family: var(--font-serif); font-size: clamp(16px, 1.5vw, 18px); color: var(--ink-2); line-height: 1.55; letter-spacing: -0.01em; text-wrap: pretty; }

  .sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(24px, 2.8vw, 34px); }
  .sec-head h2.display { white-space: normal; min-width: 0; }
  .sec-head .num { font: 500 12px/1 var(--font-mono); color: var(--accent); opacity: .8; }
  .sec-intro { max-width: 60ch; margin: -6px 0 clamp(26px, 3.4vw, 38px); color: var(--ink-2); font-size: clamp(15.5px, 1.45vw, 17.5px); line-height: 1.6; text-wrap: pretty; }

  /* "What you get" reads as an editorial ledger, not a grid of icon cards:
     a big mono index down the left (echoing the transcript timecodes), a serif
     title, and the line — hairline-ruled rows, like a printed spec sheet. */
  .ledger { list-style: none; margin: 0; padding: 0; max-width: 940px; }
  .lrow { display: grid; grid-template-columns: clamp(44px, 6vw, 80px) 1fr; column-gap: clamp(16px, 3vw, 40px); align-items: baseline; padding: clamp(20px, 3vw, 34px) 0; border-top: 1px solid var(--line); }
  .lrow:last-child { border-bottom: 1px solid var(--line); }
  .lnum { font: 500 clamp(23px, 2.7vw, 32px)/1 var(--font-mono); color: var(--ink-4); letter-spacing: -0.02em; transition: color .22s var(--ease); }
  .lrow:hover .lnum { color: var(--accent); }
  .lbody { max-width: 62ch; }
  .lrow h3 { font: 400 clamp(19px, 2vw, 24px)/1.24 var(--font-serif); letter-spacing: -0.012em; margin: 0 0 8px; color: var(--ink); }
  .lrow p { font-size: clamp(14.5px, 1.4vw, 16px); color: var(--ink-2); margin: 0; line-height: 1.55; }
  .lrow .langs { margin-top: 10px; font-size: 13px; color: var(--ink-3); line-height: 1.5; letter-spacing: 0.005em; }

  .ditch { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
  @media (min-width: 880px) { .ditch { grid-template-columns: 1.1fr 0.9fr; gap: 60px; } }
  .ditch .copy p { font-size: 17px; color: var(--ink-2); margin-top: 16px; max-width: 520px; line-height: 1.55; }
  .ditch .points { display: flex; flex-direction: column; }
  .ditch .pt { padding: clamp(16px, 2vw, 20px) 0; border-top: 1px solid var(--line); }
  .ditch .pt:last-child { border-bottom: 1px solid var(--line); }
  .ditch .pt h4 { font: 400 clamp(17px, 1.7vw, 19px)/1.25 var(--font-serif); letter-spacing: -0.01em; margin: 0 0 5px; color: var(--ink); }
  .ditch .pt p { font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.5; }

  .trust { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: center; align-items: center; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
  .trust .item { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1 var(--font-sans); color: var(--ink); }
  .trust .item svg { color: var(--accent); flex: 0 0 auto; }

  .cta { position: relative; text-align: center; }
  /* light theme: soft blue wash mirroring the hero band; dark theme: brand navy */
  body:not([data-dark="true"]) .cta.on-navy { background: linear-gradient(180deg, var(--bg) 0%, color-mix(in oklch, var(--accent) 12%, var(--surface)) 100%); }
  body[data-dark="true"] .cta.on-navy { background: radial-gradient(125% 120% at 50% 0%, #232f4d 0%, #18223a 68%); }
  body[data-dark="true"] .cta.on-navy::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(60% 90% at 50% 118%, rgba(150,170,235,.20), transparent 70%); }
  .cta h2 { margin-bottom: 10px; }
  .cta .muted { color: var(--ink-3); font-size: 15px; }
  body[data-dark="true"] .cta.on-navy .muted { color: rgba(255,255,255,.68); }
  .cta .form { margin: 28px auto 0; align-items: center; }
  .cta .consent, .cta .popia { text-align: left; }

  footer { border-top: 1px solid var(--line); padding: 44px 0 56px; color: var(--ink-3); font-size: 13px; }
  footer .row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
  footer .spacer { flex: 1; min-width: 0; }
  footer .foot-bottom { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 24px; margin-top: 18px; }
  footer .ftag { color: var(--ink-3); font-size: 12.5px; }
  footer .foot-credit { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 3px; line-height: 1.5; }
  footer .foot-bottom p { margin: 0; max-width: 680px; line-height: 1.55; }
  footer .wordmark { font-size: 15px; }
  footer .wordmark .mark { width: 19px; height: 19px; }

  /* ── Scroll reveal (JS adds .reveal then .in; no-JS leaves content visible) ── */
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--ease), transform .65s var(--ease); will-change: opacity, transform; }
  .reveal.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
    .vt-win { transition: none; }
    .hero-bg { transition: none; }
  }

  #tweaks-root { position: fixed; z-index: 2147483646; }

/* ===== Site additions (build-site standard) ===== */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 0 0 8px 0; font: 600 13px/1 var(--font-sans); }
.skip:focus { left: 0; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-error { display: none; margin-top: 12px; font-size: 13px; color: var(--danger); font-weight: 500; }
body[data-dark="true"] .on-navy .form-error { color: #ff9a8f; }
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Privacy / legal page */
.legal { max-width: 760px; margin: 0 auto; padding: 28px 0 64px; }
.legal .back { display: inline-block; margin-bottom: 22px; font-size: 13px; color: var(--ink-3); }
.legal h1.display { margin-bottom: 6px; }
.legal .updated { color: var(--ink-3); font-size: 13px; margin-bottom: 28px; }
.legal h2 { font: 600 18px/1.3 var(--font-sans); color: var(--ink); margin: 30px 0 8px; letter-spacing: -0.01em; }
.legal p, .legal li { color: var(--ink-2); font-size: 15px; line-height: 1.62; margin: 0 0 12px; }
.legal ul { padding-left: 20px; margin: 0 0 12px; }
.legal a { color: var(--accent); }

/* ─────────────────────────────────────────────────────────────
 * 2026-06-30 — "cooler" design pass (hand-edited; fold into the
 * build bundle on next regenerate). Adds life and depth without
 * touching the layout or the calm brand: a live equalizer in the
 * product window, a gently floating window, premium card hovers,
 * accent section-number pills, a pull-quote rule on the problem
 * scene, hairline trust chips, and a live dot on the early-access
 * pill. Every continuous animation is switched off under
 * prefers-reduced-motion (block at the foot of this section).
 * ───────────────────────────────────────────────────────────── */

/* Live equalizer — the mic + system meters now move, so the
   "Recording" state reads as actually live. Pure transform (GPU),
   colours stay as designed (.on accent, .peak warn). */
@keyframes vm-eq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.vt-meter i { transform-origin: bottom; animation: vm-eq 1.1s var(--ease-expo) infinite; }
.vt-meter i:nth-child(1)  { animation-duration: 1.25s; animation-delay: -.90s; }
.vt-meter i:nth-child(2)  { animation-duration: 0.95s; animation-delay: -.30s; }
.vt-meter i:nth-child(3)  { animation-duration: 1.40s; animation-delay: -.60s; }
.vt-meter i:nth-child(4)  { animation-duration: 0.85s; animation-delay: -.15s; }
.vt-meter i:nth-child(5)  { animation-duration: 1.15s; animation-delay: -.75s; }
.vt-meter i:nth-child(6)  { animation-duration: 1.30s; animation-delay: -.45s; }
.vt-meter i:nth-child(7)  { animation-duration: 0.90s; animation-delay: -.05s; }
.vt-meter i:nth-child(8)  { animation-duration: 1.20s; animation-delay: -.55s; }
.vt-meter i:nth-child(9)  { animation-duration: 1.05s; animation-delay: -.25s; }
.vt-meter i:nth-child(10) { animation-duration: 1.35s; animation-delay: -.85s; }
.sysaudio .vt-meter i { animation-direction: alternate; }

/* The product window breathes: a slow vertical float, with the
   accent glow behind it scaling in step. Float the .vt-stage (no
   transform of its own) so the window keeps its 3D tilt + hover. */
@keyframes vm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes vm-glow  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.hero .vt-stage { animation: vm-float 7s ease-in-out infinite; }
.hero .vt-stage::after { animation: vm-glow 7s ease-in-out infinite; }

/* (The old icon-card grid was replaced by the .ledger editorial list; its
   premium-card hover treatment retired with it. See .ledger / .lrow above.) */

/* Section numbers become accent pills instead of faint grey text. */
.sec-head { align-items: center; }
.sec-head .num {
  opacity: 1; color: var(--accent);
  font: 600 11px/1 var(--font-mono); letter-spacing: .06em;
  display: inline-flex; align-items: center; padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--accent) 34%, var(--line));
  background: color-mix(in oklch, var(--accent) 9%, transparent);
}

/* SA multilingual note — an editorial accent-ruled aside (not a boxed bubble):
   a fading accent rule, the section's serif, and the key phrase in accent. */
.sa-callout { position: relative; display: grid; gap: 14px; padding-left: clamp(22px, 2.2vw, 30px); }
.sa-callout::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), color-mix(in oklch, var(--accent) 10%, transparent)); }
.sa-callout .sa-head { display: flex; align-items: center; gap: 10px; }
.sa-callout .sa-ico { color: var(--accent); flex: 0 0 auto; }
.sa-callout h4 { margin: 0; font: 600 11px/1 var(--font-sans); letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
.sa-callout p { margin: 0; font-family: var(--font-serif); font-size: clamp(16.5px, 1.55vw, 19px); line-height: 1.5; color: var(--ink); letter-spacing: -0.012em; text-wrap: pretty; }
.sa-callout .sa-langs { font-family: var(--font-sans); font-weight: 500; font-size: 13.5px; line-height: 1.75; letter-spacing: 0.01em; color: var(--ink-2); }

/* Trust strip: plain text → hairline chips that lift on hover. */
.trust { gap: 14px 18px; }
.trust .item {
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.trust .item:hover {
  border-color: color-mix(in oklch, var(--accent) 32%, var(--line));
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

/* Live dot on the Early-access pill; green over the navy hero to
   echo the "safe / live" cue, accent blue on the light band. */
.pill { gap: 7px; }
.pill .pdot {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--accent); animation: vm-pulse 1.6s ease-in-out infinite;
}
body[data-dark="true"] .on-navy .pill .pdot { background: #84e3b4; }

/* Primary buttons lift a touch on hover. */
.btn.primary:hover { transform: translateY(-1px); }
.btn.primary:active { transform: translateY(0); }

/* Switch every continuous animation from this pass off for users
   who ask for reduced motion (mirrors the block higher up). */
@media (prefers-reduced-motion: reduce) {
  .vt-meter i,
  .hero .vt-stage,
  .hero .vt-stage::after,
  .pill .pdot { animation: none; }
  .vt-meter i { transform: none; }
}

/* Crafted section reveals — a longer expo rise, and a hair of scale on
   cards as they settle. Guarded to no-preference so reduced-motion users
   never get the offset (JS also skips adding .reveal for them). The
   per-element stagger is set inline by setupReveal() in landing.js. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transform: translateY(26px); transition: opacity .75s var(--ease-expo), transform .75s var(--ease-expo); }
}

/* ─────────────────────────────────────────────────────────────
 * 2026-06-30 — hero fits one screen, product window centred
 * middle-right. The hero was taller than the viewport, so the
 * window (centred against the tall text column) sat low. Trim the
 * oversized padding, headline and margins; on desktop give the
 * grid a viewport-tall min-height so its vertically-centred row
 * lands the floating window in the middle-right. Mobile keeps its
 * normal stacked flow (one screen there isn't the goal).
 * ───────────────────────────────────────────────────────────── */
.kicker { margin-bottom: 15px; }
.hero h1 { margin-bottom: 15px; }
/* Clamp trimmed from 4.4vw/46 → 3.9vw/45 so the forced first line "Private AI
   transcription" fits the ~half-width headline column (the product window holds a
   ~412px min-content floor, so it can't cede space) on one line down to ~950px;
   below that white-space:pre-line still wraps it gracefully. */
.hero h1.display { font-size: clamp(29px, 3.75vw, 45px); line-height: 1.06; }
.hero .sub { font-size: clamp(15.5px, 1.4vw, 17.5px); }
.hero .form { margin-top: 20px; }
.hero .pron { margin-top: 14px; }

@media (min-width: 940px) {
  .hero-grid {
    min-height: calc(100svh - 64px);   /* fill the viewport under the 62px sticky header */
    align-items: center;               /* centre both columns -> window lands middle-right */
    padding-top: clamp(28px, 3.4vh, 48px);
    padding-bottom: clamp(28px, 3.4vh, 48px);
    gap: clamp(28px, 3.2vw, 46px);
  }
}

/* ─────────────────────────────────────────────────────────────
 * 2026-07-01 — "Transcription" concept (hand-edited; fold into the
 * build bundle on next regenerate). An extension of the brand, not a
 * redesign: it borrows the transcript language already in the hero
 * product window (mono timecodes, the blinking caret, "being written")
 * and lets it run the whole page, restrained so reading stays first.
 *   1. A typewriter intro that types the wordmark and opens into the hero.
 *   2. A persistent cursor at the end of every main heading, hero to last.
 *   3. The hero headline types on open, then the copy below it reveals.
 *   4. Numbered sections read as a running transcript timecode.
 * Every effect is off under prefers-reduced-motion; the intro is also
 * gated before first paint by boot.js, and is display:none for no-JS.
 * ───────────────────────────────────────────────────────────── */

/* ── 1 · Typewriter intro ──────────────────────────────────────
   Hidden unless boot.js opts this load in (html[data-intro="play"]),
   so no-JS + reduced-motion never see it. Theme-matched so it opens
   into the hero (navy in dark, paper in light) with no colour jump. */
#vm-intro { display: none; }
html[data-intro="play"] #vm-intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 200;
  /* Intro sheet: pure white in light (preferred over the tinted page bg here);
     the dark override just below keeps the dark-blue navy. */
  background: #fff; color: var(--ink);
  transition: opacity .6s var(--ease-expo), visibility .6s var(--ease-expo);
}
body[data-dark="true"] #vm-intro { background: #1b2640; color: #f2f5fb; }

.vm-intro-inner { text-align: center; padding: 0 24px; }
.vm-intro-lockup {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.012em;
  font-size: clamp(34px, 7vw, 60px); line-height: 1; color: inherit;
}
.vm-intro-word { white-space: pre; }
/* the cursor holds the line while the word types, then retires */
.vm-intro-cursor {
  display: inline-block; width: 3px; height: 0.9em; margin-left: 4px;
  background: var(--accent); border-radius: 1px; vertical-align: -0.06em;
  animation: vm-caret 1.05s steps(2) infinite;
  transition: opacity .3s var(--ease);
}
body[data-dark="true"] #vm-intro .vm-intro-cursor { background: #aab9e6; }
/* the logo mark resolves into the space after the word */
.vm-intro-mark {
  display: inline-flex; align-items: center; width: 0; height: 0.9em;
  margin-left: 0; color: var(--accent); opacity: 0; transform: scale(.7);
  transition: opacity .5s var(--ease-expo), transform .6s var(--ease-expo),
              width .5s var(--ease-expo), margin-left .5s var(--ease-expo);
}
body[data-dark="true"] #vm-intro .vm-intro-mark { color: #aab9e6; }
.vm-intro-mark svg { width: 100%; height: 100%; display: block; }
/* stop the blink (a running animation would otherwise beat the static opacity)
   so the cursor genuinely retires as the mark resolves in. */
#vm-intro.vm-intro-signed .vm-intro-cursor { opacity: 0; animation: none; }
#vm-intro.vm-intro-signed .vm-intro-mark {
  opacity: 1; transform: scale(1); width: 0.9em; margin-left: 0.34em;
}
.vm-intro-tag {
  margin-top: 20px; font-family: var(--font-mono);
  font-size: clamp(12px, 1.6vw, 14px); letter-spacing: .02em; color: var(--ink-3);
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
body[data-dark="true"] #vm-intro .vm-intro-tag { color: rgba(255,255,255,.6); }
#vm-intro.vm-intro-tagged .vm-intro-tag { opacity: 1; transform: none; }
/* the "page" opens: the sheet fades while the lockup lifts a touch */
#vm-intro.vm-intro-out { opacity: 0; visibility: hidden; pointer-events: none; }
#vm-intro.vm-intro-out .vm-intro-inner {
  transform: translateY(-10px); transition: transform .7s var(--ease-expo);
}
/* A quiet "Skip" affordance pinned near the bottom. The sheet is already
   skippable by click/key/scroll anywhere; this just makes that obvious. It
   fades in a beat after the sheet lands (so it doesn't fight the first frame)
   and lifts away with the sheet on open (parent opacity + pointer-events).
   Mono, to sit with the tagline. Reduced-motion never shows the intro. */
.vm-intro-skip {
  position: absolute; left: 50%; bottom: clamp(24px, 5vh, 52px);
  transform: translateX(-50%);
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.6vw, 13.5px); letter-spacing: .02em;
  color: var(--ink-3); background: transparent;
  padding: 8px 15px; border-radius: 999px;
  opacity: 0; animation: vm-intro-skip-in .5s var(--ease) .9s forwards;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.vm-intro-skip:hover, .vm-intro-skip:focus-visible {
  color: var(--ink); background: rgba(20, 30, 60, .07);
}
@keyframes vm-intro-skip-in { to { opacity: .68; } }
body[data-dark="true"] #vm-intro .vm-intro-skip { color: rgba(255, 255, 255, .58); }
body[data-dark="true"] #vm-intro .vm-intro-skip:hover,
body[data-dark="true"] #vm-intro .vm-intro-skip:focus-visible {
  color: #f2f5fb; background: rgba(255, 255, 255, .1);
}

/* ── 2 · A persistent cursor on every main heading ─────────────
   A transcript cursor sits at the end of each main heading, hero to
   last, and keeps blinking. On the hero it rides the end of the
   headline as it types (block 3), then stays. On the section headings
   it just blinks. The real text is untouched — this is ::after. */
.display::after {
  content: ""; display: inline-block;
  width: 3px; height: 0.82em; margin-left: 5px; vertical-align: -0.04em;
  border-radius: 1px; background: var(--accent);
  animation: vm-caret 1.05s steps(2) infinite;
}
body[data-dark="true"] .on-navy .display::after { background: #aab9e6; }

/* ── 3 · Hero: headline types on open, the copy below follows ──
   Gated on html[data-hero-type] (boot.js sets it before paint when
   motion is allowed, every load) so no-JS + reduced-motion show it all
   at once. The headline is held hidden until JS types it (no flash of
   the whole line), and the sub-copy, form and pronunciation wait, then
   reveal in a short stagger once the line is typed. Layout is reserved
   throughout (visibility + opacity), so nothing reflows. */
/* The hero headline wraps greedily, never balanced. text-wrap:balance
   re-flows every line on each keystroke, so the line being typed jumps
   around; greedy keeps the earlier lines fixed and only extends the last
   one, with no re-balance snap when the typing finishes.
   white-space:pre-line honours the hard newline baked into the copy
   ("Private AI transcription" / "for every meeting.") while still letting a
   line wrap if it ever can't fit; the break is fixed, the fit is graceful. */
.hero h1.display { text-wrap: wrap; white-space: pre-line; }

html[data-hero-type] .hero h1.display { visibility: hidden; }
html[data-hero-type] .hero h1.display.vm-typing,
html[data-hero-type] .hero h1.display[data-typed="1"] { visibility: visible; }

html[data-hero-type] .hero .lede > .sub,
html[data-hero-type] .hero .lede > .form,
html[data-hero-type] .hero .lede > .pron {
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--ease-expo), transform .6s var(--ease-expo);
}
html[data-hero-type] .hero .lede.vm-revealed > .sub  { opacity: 1; transform: none; transition-delay: 60ms; }
html[data-hero-type] .hero .lede.vm-revealed > .form { opacity: 1; transform: none; transition-delay: 170ms; }
html[data-hero-type] .hero .lede.vm-revealed > .pron { opacity: 1; transform: none; transition-delay: 280ms; }

/* ── 4 · Numbered sections read as a running timecode ──────────
   The existing "01"/"02" become "00:01"/"00:02", so the sections
   scan like transcript entries against a clock. Mono already. */
.sec-head .num::before { content: "00:"; opacity: .6; }

/* Everything from this pass is visual only — hard-off for reduced
   motion (mirrors the intro gate in boot.js). The heading cursor stays
   as a static, non-blinking mark; the hero copy is never held hidden. */
@media (prefers-reduced-motion: reduce) {
  #vm-intro { display: none !important; }
  .display::after { animation: none !important; opacity: .5; }
  .hero h1.display { visibility: visible !important; }
  .hero .lede > .sub, .hero .lede > .form, .hero .lede > .pron {
    opacity: 1 !important; transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
 * 2026-07-03 — "Free for personal use" badges, Contact (ribbon +
 * hero button + section), and a site-wide 3D hover lift so the
 * page reads as dimensional, not flat. Slower hero video is set in
 * landing.js (playbackRate). All motion is disabled under
 * prefers-reduced-motion at the foot of this block.
 * ───────────────────────────────────────────────────────────── */

/* "Free for personal use" — prominent, and carried in the ribbon on
   every page so it stays visible throughout the whole site. */
.freebadge, .freepill {
  display: inline-flex; align-items: center; white-space: nowrap;
  font: 700 11px/1 var(--font-sans); letter-spacing: .045em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.freebadge::before, .freepill::before { content: "✓"; margin-right: 6px; font-weight: 800; }
.freebadge:hover, .freepill:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.freepill { font-size: 11.5px; padding: 7px 13px; }        /* a touch larger among the hero pills */
/* Keep the ribbon badge readable while the header floats over the navy hero. */
body[data-dark="true"][data-hero="navy"] header:not([data-scrolled="true"]) .freebadge { background: #aab9e6; color: #10182b; }
@media (max-width: 560px) {
  .freebadge { font-size: 9.5px; letter-spacing: .03em; padding: 5px 9px; }
  header .wordmark .by { display: none; }
}

/* Ribbon "Contact us" — a secondary button matching the hero's, sitting
   beside the Download CTA. Shown from 900px up so the two buttons plus the
   badge don't crowd the bar; the base .btn supplies the outline look.
   .vm scope so the hide beats `.vm .btn { display:inline-flex }` (same
   trick as .nav-cta above). */
.vm .nav-contact { display: none; text-decoration: none; }
.vm .nav-contact:hover { text-decoration: none; }
@media (min-width: 900px) { .vm .nav-contact { display: inline-flex; } }
/* Over the navy hero, mirror the hero Contact button's subtle white outline. */
body[data-dark="true"][data-hero="navy"] header:not([data-scrolled="true"]) .nav-contact { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .26); color: #fff; box-shadow: none; }
body[data-dark="true"][data-hero="navy"] header:not([data-scrolled="true"]) .nav-contact:hover { background: rgba(255, 255, 255, .16); filter: none; }

/* Hero action row: Download (primary) + Contact (secondary mailto). */
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero-actions .contact-btn { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); }
.hero-actions .contact-btn:hover { background: var(--surface-2); }
body[data-dark="true"] .on-navy .hero-actions .contact-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .26); color: #fff; }
body[data-dark="true"] .on-navy .hero-actions .contact-btn:hover { background: rgba(255, 255, 255, .16); }

/* Contact section — a single, clickable sentence. */
.contact { text-align: center; }
.contact-inner { max-width: 640px; margin: 0 auto; }
.contact-line {
  display: inline-block;
  font: 400 clamp(20px, 2.6vw, 30px)/1.3 var(--font-serif); letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
  transition: color .18s var(--ease), transform .18s var(--ease);
}
.contact-line:hover { color: var(--accent); transform: translateY(-2px); text-decoration: underline; text-underline-offset: 4px; }

/* ── Site-wide 3D hover lift ──────────────────────────────────
   Editorial rows tilt back and lift toward the pointer (real depth
   via perspective on the parent); chips and buttons lift with a
   shadow. Subtle, but the page stops feeling flat. */
.ledger { perspective: 1100px; }
.lrow { transition: transform .32s var(--ease), background .32s var(--ease); }
.lrow:hover { transform: translateY(-4px) rotateX(3.5deg); background: color-mix(in oklch, var(--accent) 4%, transparent); border-radius: 12px; }
.ditch .points { perspective: 1100px; }
.ditch .pt { transition: transform .32s var(--ease), background .32s var(--ease); }
.ditch .pt:hover { transform: translateY(-4px) rotateX(3.5deg); background: color-mix(in oklch, var(--accent) 4%, transparent); border-radius: 12px; }
.trust .item:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-soft); }
.sec-head .num { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.sec-head:hover .num { transform: translateY(-2px); box-shadow: var(--shadow-card); }

/* Buttons: a firmer, shadowed 3D lift. */
.btn { transition: filter .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-card); }
.btn.primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }

@media (prefers-reduced-motion: reduce) {
  .freebadge, .freepill, .contact-line,
  .lrow, .ditch .pt, .trust .item, .sec-head .num, .btn { transition: none !important; }
  .freebadge:hover, .freepill:hover, .contact-line:hover,
  .lrow:hover, .ditch .pt:hover, .trust .item:hover, .sec-head:hover .num,
  .btn:hover, .btn.primary:hover, .btn:active { transform: none !important; box-shadow: none !important; }
}
/* Mobile header/hero spacing carried forward from the reviewed `staging` branch.
   (nav-cta hide + byline-hide already live above: `.vm .nav-cta` and
   `header .wordmark .by`, so only the net-new spacing tweaks are kept here.) */
@media (max-width: 560px) {
  .nav { gap: 10px; }
  .hero-grid { padding-top: 14px; }
  .kicker { margin-bottom: 14px; }
}

/* ── Trust page (/trust). Reuses .legal for the base rhythm; these are the extra
   components: the "honest yes" answer callout, an at-a-glance checklist, the
   checksum table, command blocks, and the SmartScreen callout. ────────────── */
.trustdoc { max-width: 760px; }
.trustdoc h2 { scroll-margin-top: 84px; }
.trust-answer { margin: 6px 0 10px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-card); }
.trust-answer p { margin: 0; font-family: var(--font-serif); font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.55; color: var(--ink); letter-spacing: -0.01em; }
.trust-glance { margin: 22px 0 4px; padding: 0; list-style: none; display: grid; gap: 10px; }
.trust-glance li { position: relative; padding-left: 28px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.trust-glance li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.trustdoc table { width: 100%; border-collapse: collapse; margin: 10px 0 6px; font-size: 14px; }
.trustdoc th, .trustdoc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.trustdoc th { font: 600 11px/1.3 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.trustdoc td .hash { word-break: break-all; }
.trustdoc pre { margin: 12px 0; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.trustdoc pre code { font: 500 13px/1.6 var(--font-mono); color: var(--ink); white-space: pre; background: none; border: 0; padding: 0; }
.trustdoc :not(pre) > code { font: 500 12.5px/1.4 var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--ink); }
.trust-callout { margin: 14px 0; padding: 14px 18px; border-left: 3px solid var(--accent); background: color-mix(in oklch, var(--accent) 6%, transparent); border-radius: 0 10px 10px 0; }
.trust-callout p { margin: 0; color: var(--ink); }

/* Each trust section sits in its own card — turns the plain document into a
   scannable "trust centre", with the surface lifting each topic off the page in
   both themes. Calm and static; the cards are not interactive. */
.trustdoc .trust-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(20px, 2.5vw, 28px) clamp(20px, 2.6vw, 30px);
  margin: 16px 0;
  box-shadow: var(--shadow-card);
}
.trustdoc .trust-card h2 { margin-top: 0; }
.trustdoc .trust-card > :last-child { margin-bottom: 0; }
/* The at-a-glance checklist now lives inside the lead answer card, divided off. */
.trust-answer .trust-glance { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }

/* ─────────────────────────────────────────────────────────────
 * 2026-07-06 — Hero trust badge. A calm "is it safe to install?"
 * reassurance under the hero actions, linking to the trust page.
 * Uses the site's safety-green shield (as the offline lock / reassure
 * line do) and a chevron that slides on hover. Themed for both the
 * light wash and the navy hero, and folded into the hero typewriter
 * reveal so it fades in with the rest of the lede.
 * ───────────────────────────────────────────────────────────── */
/* The CTA group: the two hero buttons, and beneath them the trust badge stretched
   to the SAME width as the button row. `.hero-cta` is a fit-content column, so it
   shrinks to its widest child (the buttons); align-items:stretch (the flex default)
   then widens the badge to match. The chevron is pushed to the right edge. */
.hero-cta { display: flex; flex-direction: column; align-items: stretch; width: fit-content; margin-top: 22px; }
.hero-cta > .hero-actions { margin-top: 0; }

.hero-trust {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding: 9px 14px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: color-mix(in oklch, var(--accent) 4%, var(--surface));
  box-shadow: var(--shadow-card);
  color: var(--ink-2); text-decoration: none;
  font: 500 13px/1.35 var(--font-sans); letter-spacing: -0.003em;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              transform .2s var(--ease), box-shadow .2s var(--ease);
}
.hero-trust:hover {
  text-decoration: none;
  border-color: color-mix(in oklch, var(--accent) 38%, var(--line));
  background: color-mix(in oklch, var(--accent) 8%, var(--surface));
  transform: translateY(-2px); box-shadow: var(--shadow-soft);
}
.hero-trust .ht-ico { display: inline-flex; flex: 0 0 auto; color: var(--ok); }
.hero-trust .ht-txt { min-width: 0; text-wrap: pretty; }
.hero-trust .ht-arrow { display: inline-flex; flex: 0 0 auto; margin-left: auto; color: var(--ink-3); transition: transform .2s var(--ease), color .2s var(--ease); }
.hero-trust:hover .ht-arrow { transform: translateX(3px); color: var(--ink-2); }

/* Navy hero: translucent-white chip, mint safety green, brighter on hover. */
body[data-dark="true"] .on-navy .hero-trust {
  border-color: rgba(255, 255, 255, .20);
  background: rgba(255, 255, 255, .06);
  box-shadow: none;
  color: rgba(255, 255, 255, .82);
}
body[data-dark="true"] .on-navy .hero-trust:hover {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .12);
}
body[data-dark="true"] .on-navy .hero-trust .ht-ico { color: #84e3b4; }
body[data-dark="true"] .on-navy .hero-trust .ht-arrow { color: rgba(255, 255, 255, .55); }
body[data-dark="true"] .on-navy .hero-trust:hover .ht-arrow { color: rgba(255, 255, 255, .85); }

/* Fold into the hero typewriter reveal (after the sub-copy, before the
   pronunciation line). Matches the .sub/.pron rules above. */
html[data-hero-type] .hero .lede .hero-trust {
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--ease-expo), transform .6s var(--ease-expo);
}
html[data-hero-type] .hero .lede.vm-revealed .hero-trust { opacity: 1; transform: none; transition-delay: 230ms; }

@media (max-width: 560px) {
  .hero-trust { font-size: 12.5px; margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-trust, .hero-trust .ht-arrow { transition: none !important; }
  .hero-trust:hover { transform: none !important; box-shadow: var(--shadow-card) !important; }
  .hero .lede .hero-trust { opacity: 1 !important; transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────
 * 2026-07-08 — footer licence stance line.
 * .foot-bottom is a wrapping flex row, so the stance line would
 * otherwise sit as a cramped column BESIDE the POPIA paragraph
 * (and push "A DigiPhyte product." off its right-hand alignment).
 * Give it its own full-width line above the POPIA text, so the
 * bottom row reads: stance / then POPIA + credit.
 * ───────────────────────────────────────────────────────────── */
footer .foot-bottom { gap: 18px 24px; margin-top: 22px; }
footer .foot-bottom .foot-licence {
  flex: 0 0 100%;
  max-width: none;
  margin: 0 0 2px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
footer .foot-bottom .foot-licence a {
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.005em;
}
footer .foot-bottom .foot-licence a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}