:root {
  --black: #000000;
  --bg: #050507;
  --bg-up: #0B0B10;
  --surface: #111114;
  --surface-up: #17171C;
  --surface-hi: #1C1C24;
  --line: rgba(255,255,255,0.08);
  --line-bright: rgba(255,255,255,0.14);
  --line-strong: rgba(255,255,255,0.22);
  --text: #FAFAFA;
  --text-soft: #B5B5BD;
  --text-mute: #6C6C75;
  --text-fade: #46464D;

  --accent: #93D4FF;
  --accent-glow: rgba(147,212,255,0.4);
  --accent-soft: rgba(147,212,255,0.1);

  --green: #6EE872;
  --green-dim: rgba(110,232,114,0.12);
  --orange: #F5A623;
  --orange-dim: rgba(245,166,35,0.12);
  --purple: #C49DFF;
  --purple-dim: rgba(196,157,255,0.12);
  --cyan: #5EE7E8;
  --cyan-dim: rgba(94,231,232,0.12);
  --red: #FF7A6B;
  --red-dim: rgba(255,122,107,0.12);
  --blue: #93D4FF;
  --blue-dim: rgba(147,212,255,0.12);

  --grad-blue: linear-gradient(135deg, #1a2766 0%, #2d3fc1 35%, #5d6ff5 70%, #93a0ff 100%);
  --grad-purple: linear-gradient(135deg, #3a1454 0%, #6a2da0 40%, #a45fd6 75%, #d49fee 100%);
  --grad-pink: linear-gradient(135deg, #5a1a3d 0%, #b53676 40%, #e85ca7 75%, #f8a8ce 100%);
  --grad-cyan: linear-gradient(135deg, #0a3a4d 0%, #16708c 40%, #3ab8d9 75%, #8ee0f0 100%);

  --sans: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
}

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

#vBackgroundCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

::selection { background: rgba(255,255,255,0.18); }

/* ─── NAV ─── */
nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 6px 6px 18px;
  background: #15151E;
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border: 1px solid var(--line-bright);
  border-radius: 100px;
}
.logo {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.025em;
  display: flex; align-items: center; gap: 0;
  color: var(--text);
  text-decoration: none;
}
.logo-mark-wrap {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-right: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-mark {
  display: block;
  width: 28px;
  height: 28px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 3px rgba(139,124,255,0.85)) drop-shadow(0 0 1px rgba(165,153,255,0.9));
  pointer-events: none;
}
footer .logo-mark-wrap { width: 28px; height: 28px; }
footer .logo-mark { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 16px; }
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: -0.005em;
}
.nav-link:hover { color: var(--text); }
.nav-cta {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  background: var(--text);
  color: var(--black);
  border: none;
  padding: 10px 18px;
  border-radius: 100px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: transform 0.2s, background 0.2s;
  text-decoration: none;
  display: inline-block;
}
.nav-cta:hover { background: #fff; transform: translateY(-1px); }
.nav-demo {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 9px 16px;
  border-radius: 100px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.nav-demo:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); transform: translateY(-1px); }

/* ─── TOP-RIGHT SIGN IN ─── */
.signin-top {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.005em;
  padding: 8px 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.signin-top:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.22);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .signin-top { top: 20px; right: 16px; font-size: 12px; padding: 7px 14px; }
}

/* ─── HERO ─── */
.hero {
  position: relative;
  padding: 96px 24px 8px;
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
  z-index: 5;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-bright);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: 12px;
  letter-spacing: -0.005em;
  opacity: 0;
  animation: fadeUp 0.8s 0.1s ease forwards;
}
.pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(110,232,114,0.6);
  animation: pulse 2s ease infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
  color: var(--text);
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: fadeUp 0.9s 0.25s ease forwards;
}
.hero h1 .grad {
  background: linear-gradient(180deg, #FAFAFA 0%, #888892 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-family: var(--sans);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--text-soft);
  max-width: 620px;
  margin: 0 auto 22px;
  opacity: 0;
  animation: fadeUp 0.9s 0.35s ease forwards;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  opacity: 0;
  animation: fadeUp 0.9s 0.4s ease forwards;
}
.email-form {
  display: flex;
  align-items: center;
  padding: 4px 4px 4px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-bright);
  border-radius: 100px;
  min-width: 380px;
  max-width: 440px;
}
.email-form input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text);
  padding: 10px 0;
  outline: none;
  letter-spacing: -0.005em;
}
.email-form input::placeholder { color: var(--text-mute); }
.email-form button {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  background: var(--text);
  color: var(--black);
  border: none;
  padding: 10px 18px;
  border-radius: 100px;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background 0.2s;
  white-space: nowrap;
}
.email-form button:hover { background: #fff; }
/* "Book a demo": the second primary CTA, beside every Join Waitlist form */
.cta-pair { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.bottom-cta .cta-pair .email-form { margin: 0; } /* beats the older .bottom-cta .email-form auto-centring */
.demo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(135deg, #9A8CFF 0%, #7B68FF 55%, #6A55F5 100%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  box-shadow: 0 8px 28px rgba(139,124,255,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.demo-cta:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 10px 34px rgba(139,124,255,0.5), inset 0 1px 0 rgba(255,255,255,0.3); }
.demo-cta .arrow { transition: transform 0.2s; }
.demo-cta:hover .arrow { transform: translateX(3px); }
.email-form .success {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--green);
  padding: 10px 14px;
}

/* Live toast in hero — replaces static count */
.hero-toast-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  opacity: 0;
  animation: fadeUp 0.9s 0.55s ease forwards;
  height: 20px;
  position: relative;
}
.hero-toast {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  transition: opacity 0.55s ease, transform 0.55s ease;
  white-space: nowrap;
}
.hero-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.hero-toast .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(110,232,114,0.5);
}
.hero-toast .count-strong {
  color: var(--text);
  font-weight: 500;
}

/* ─── CORNER TOAST (persistent social proof — bottom-left) ─── */
.corner-toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
  background: rgba(20,20,28,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 14px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-12px) translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.corner-toast.show {
  opacity: 1;
  transform: translateX(0) translateY(0);
}
.corner-toast .ct-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(110,232,114,0.5);
  flex-shrink: 0;
}
.corner-toast .ct-role {
  color: var(--text);
  font-weight: 500;
}
.corner-toast .ct-company {
  color: var(--text);
  font-weight: 500;
}
.corner-toast .ct-at {
  color: var(--text-mute);
  opacity: 0.7;
}
@media (max-width: 640px) {
  .corner-toast {
    bottom: 14px;
    left: 14px;
    right: 14px;
    font-size: 10px;
    padding: 8px 12px;
  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── DEMO STAGE ─── */
.demo-stage {
  max-width: none;
  margin: 6px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 5;
  opacity: 0;
  animation: fadeUp 1.2s 0.55s ease forwards;
}
.demo-stage::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: min(800px, 100vw); height: 500px;
  background: radial-gradient(ellipse, rgba(120,140,255,0.18) 0%, transparent 65%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
}

/* Scenario tabs */
.scenario-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.stab {
  padding: 6px 12px;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid var(--line-bright);
  background: rgba(255,255,255,0.03);
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 7px;
  letter-spacing: -0.005em;
}
.stab:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--line-strong);
  color: var(--text);
}
.stab.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--black);
}
.stab-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.stab.active .stab-dot { box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }

.demo-frame {
  background: var(--surface);
  border: 1px solid var(--line-bright);
  border-radius: 20px;
  overflow: hidden;
  max-width: 1800px;
  margin: 0 auto;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 60px 120px -30px rgba(0,0,0,0.8),
    0 20px 60px -20px rgba(60,80,180,0.2);
  position: relative;
}

.demo-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  background: var(--surface-up);
  border-bottom: 1px solid var(--line);
}
.cdot { width: 11px; height: 11px; border-radius: 50%; }
.cdot.r { background: #FF5F57; }
.cdot.y { background: #FFBD2E; }
.cdot.g { background: #28C840; }
.chrome-title {
  margin-left: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  flex: 1;
  letter-spacing: 0.02em;
}
.chrome-rec {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  color: #FF5F57;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rec-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FF5F57;
  animation: pulse 1.5s ease infinite;
}

.demo-body {
  height: clamp(440px, 58vh, 640px);
  position: relative;
  background: #050507;
}
.meeting {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
}
.tile {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #08080b;
  border: 1.5px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.tile-prospect.active {
  border-color: rgba(196,157,255,0.55);
  box-shadow: 0 0 0 1px rgba(196,157,255,0.10) inset, 0 0 32px rgba(196,157,255,0.18);
}
.tile-you.active {
  border-color: rgba(110,232,114,0.55);
  box-shadow: 0 0 0 1px rgba(110,232,114,0.10) inset, 0 0 32px rgba(110,232,114,0.18);
}
.tile-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(196,157,255,0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 75%, rgba(120,80,200,0.22) 0%, transparent 60%),
    linear-gradient(180deg, #1a1326 0%, #0a0816 100%);
}
.tile-you .tile-bg {
  background:
    radial-gradient(ellipse at 70% 25%, rgba(110,232,114,0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 30% 75%, rgba(50,180,120,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #0e1a14 0%, #06100a 100%);
}
.tile-center {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 60px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(22px, 2.5vw, 36px);
}

/* SPEAKING WAVEFORM — calm, breath-like rhythm */
.tile-wave {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 22px;
  padding: 5px 14px;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.07);
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transition: opacity 0.4s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tile.active .tile-wave {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.tile-wave span {
  display: block;
  width: 2.5px;
  background: rgba(196,157,255,0.65);
  border-radius: 2px;
  height: 3px;
}
.tile-you .tile-wave span {
  background: rgba(110,232,114,0.7);
}
.tile.active .tile-wave span { animation: waveBar 1.7s ease-in-out infinite; }
.tile-wave span:nth-child(1) { --pk: 8px;  animation-delay: 0.00s; animation-duration: 1.8s; }
.tile-wave span:nth-child(2) { --pk: 13px; animation-delay: 0.18s; animation-duration: 1.6s; }
.tile-wave span:nth-child(3) { --pk: 10px; animation-delay: 0.08s; animation-duration: 1.9s; }
.tile-wave span:nth-child(4) { --pk: 14px; animation-delay: 0.32s; animation-duration: 1.5s; }
.tile-wave span:nth-child(5) { --pk: 11px; animation-delay: 0.12s; animation-duration: 1.8s; }
.tile-wave span:nth-child(6) { --pk: 14px; animation-delay: 0.24s; animation-duration: 1.7s; }
.tile-wave span:nth-child(7) { --pk: 9px;  animation-delay: 0.04s; animation-duration: 2.0s; }
.tile-wave span:nth-child(8) { --pk: 12px; animation-delay: 0.20s; animation-duration: 1.6s; }
.tile-wave span:nth-child(9) { --pk: 7px;  animation-delay: 0.10s; animation-duration: 1.85s; }
@keyframes waveBar {
  0%, 100%      { height: 3px; }
  20%, 30%      { height: var(--pk); }
  50%, 60%      { height: calc(var(--pk) * 0.5); }
  78%, 88%      { height: 3px; }
}

/* BEAM TRAILS — colored light streaks from research sources to the answer */
.beam-trail {
  position: absolute;
  width: 2px;
  z-index: 4;
  pointer-events: none;
  border-radius: 2px;
  opacity: 0;
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s 0.55s;
}
.beam-trail.go { transform: scaleY(1); opacity: 0.95; }
.beam-trail.gone { opacity: 0; transition: opacity 0.5s ease; }
.beam-trail.cy {
  background: linear-gradient(180deg, rgba(94,231,232,0) 0%, rgba(94,231,232,0.95) 18%, rgba(94,231,232,0.95) 82%, rgba(94,231,232,0) 100%);
  box-shadow: 0 0 8px rgba(94,231,232,0.7), 0 0 18px rgba(94,231,232,0.35);
}
.beam-trail.am {
  background: linear-gradient(180deg, rgba(245,166,35,0) 0%, rgba(245,166,35,0.95) 18%, rgba(245,166,35,0.95) 82%, rgba(245,166,35,0) 100%);
  box-shadow: 0 0 8px rgba(245,166,35,0.7), 0 0 18px rgba(245,166,35,0.35);
}
.beam-trail.mg {
  background: linear-gradient(180deg, rgba(196,157,255,0) 0%, rgba(196,157,255,0.95) 18%, rgba(196,157,255,0.95) 82%, rgba(196,157,255,0) 100%);
  box-shadow: 0 0 8px rgba(196,157,255,0.7), 0 0 18px rgba(196,157,255,0.35);
}
/* Tiny landing burst at beam tip when it reaches the answer */
.beam-burst {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.55s;
}
.beam-burst.cy { background: radial-gradient(circle, rgba(94,231,232,0.9) 0%, transparent 70%); }
.beam-burst.am { background: radial-gradient(circle, rgba(245,166,35,0.9) 0%, transparent 70%); }
.beam-burst.mg { background: radial-gradient(circle, rgba(196,157,255,0.9) 0%, transparent 70%); }
.beam-burst.go { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
.beam-burst.gone { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
.tile-avatar {
  position: relative;
  width: clamp(120px, 14vw, 200px);
  height: clamp(120px, 14vw, 200px);
  border-radius: 50%;
  background: rgba(0,0,0,0.32);
  border: 1.5px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 400;
  color: rgba(255,255,255,0.96);
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 40px rgba(0,0,0,0.5);
  transition: transform 0.4s, box-shadow 0.4s;
}
/* Brand-color pulse channel per tile */
.tile-prospect .tile-avatar { --pulse: 196, 157, 255; }
.tile-you .tile-avatar { --pulse: 110, 232, 114; }
/* Expanding ring emanating from avatar edge */
.tile-avatar::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
}
.tile.active .tile-avatar {
  animation: avatarBreath 1.8s ease-in-out infinite;
}
.tile.active .tile-avatar::after {
  opacity: 1;
  animation: ringPulse 1.8s ease-out infinite;
}
@keyframes avatarBreath {
  0%, 100% {
    transform: scale(1.04);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 12px 40px rgba(0,0,0,0.5),
      0 0 32px rgba(var(--pulse), 0.18);
  }
  50% {
    transform: scale(1.07);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.16),
      0 16px 50px rgba(0,0,0,0.55),
      0 0 64px rgba(var(--pulse), 0.40);
  }
}
@keyframes ringPulse {
  0% {
    transform: scale(1);
    border-color: rgba(var(--pulse), 0.55);
    opacity: 1;
  }
  100% {
    transform: scale(1.22);
    border-color: rgba(var(--pulse), 0);
    opacity: 0;
  }
}
.tile-caption {
  position: absolute;
  bottom: 56px;
  left: 14px; right: 14px;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 11px 16px 12px;
  border-radius: 7px;
  font-family: var(--sans);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.97);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s, transform 0.3s;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-you .tile-caption {
  right: clamp(295px, calc(20vw + 30px), 355px);
}
.tile-caption.show { opacity: 1; transform: translateY(0); }
.tile-footer {
  position: absolute;
  left: 12px; right: 12px;
  bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}
.tile-name {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.94);
  padding: 5px 10px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 4px;
}
.tile-mic {
  display: flex; align-items: center;
  padding: 6px 9px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 4px;
}
.mic-bars { display: flex; gap: 2px; align-items: center; height: 12px; }
.mic-bars span {
  width: 2px;
  background: rgba(255,255,255,0.35);
  border-radius: 1px;
  height: 4px;
  transition: background 0.3s;
}
.tile.active .mic-bars span {
  background: var(--green);
  animation: micwave 0.7s ease infinite;
}
.tile.active .mic-bars span:nth-child(1) { animation-delay: 0s; }
.tile.active .mic-bars span:nth-child(2) { animation-delay: 0.12s; }
.tile.active .mic-bars span:nth-child(3) { animation-delay: 0.24s; }
@keyframes micwave {
  0%, 100% { height: 4px; }
  50% { height: 12px; }
}

.tx-cursor {
  display: inline-block;
  width: 2px; height: 14px;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: blink 0.85s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* VERACITY HUD — floating overlay on the rep's tile */
.veracity-hud {
  position: absolute;
  top: 16px;
  left: calc(50% - clamp(130px, 10vw, 160px));
  width: clamp(260px, 20vw, 320px);
  max-height: calc(100% - 32px);
  background: rgba(8, 10, 14, 0.86);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column;
  gap: 8px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  z-index: 10;
  user-select: none;
  -webkit-user-select: none;
  transition:
    width 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.35s ease,
    gap 0.3s ease,
    border-radius 0.3s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.veracity-hud.dragging {
  box-shadow:
    0 32px 80px rgba(0,0,0,0.7),
    0 0 0 1px rgba(147,212,255,0.25),
    0 0 0 4px rgba(147,212,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.08);
  transform: scale(1.015);
  transition: box-shadow 0.2s, transform 0.2s;
}

/* SE in a Box — shift overlay left so the (long) AE caption stays readable on the right.
   Prospect caption on the left is short, so partial overlap there is fine. */
.veracity-hud.scenario-se {
  left: calc(50% - clamp(130px, 10vw, 160px) - clamp(50px, 6vw, 90px));
  transition:
    left 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    width 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.35s ease,
    gap 0.3s ease,
    border-radius 0.3s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.16,1,0.3,1);
}

/* Body sections animate to/from zero height for collapse */
.veracity-hud .hud-widget,
.veracity-hud .hud-whisper-slot,
.veracity-hud .hud-stream {
  max-height: 640px;
  overflow: hidden;
  transition:
    max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.28s ease,
    margin 0.3s ease;
}

/* Collapsed pill state — header only */
.veracity-hud.collapsed {
  width: 168px;
  left: calc(50% - 84px);
  gap: 0;
  padding: 9px 12px;
  border-radius: 100px;
}
.veracity-hud.collapsed .hud-widget,
.veracity-hud.collapsed .hud-whisper-slot,
.veracity-hud.collapsed .hud-stream {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.veracity-hud.collapsed .hud-header {
  border-bottom-color: transparent;
  padding-bottom: 0;
}
.veracity-hud.collapsed:hover {
  border-color: rgba(147,212,255,0.28);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.55),
    0 0 0 1px rgba(147,212,255,0.18),
    0 0 28px rgba(147,212,255,0.10),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.hud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  cursor: grab;
  transition: padding 0.3s ease, border-color 0.3s ease;
}
.hud-header:active,
.veracity-hud.dragging .hud-header { cursor: grabbing; }
.hud-grip {
  display: grid;
  grid-template-columns: repeat(2, 2px);
  grid-template-rows: repeat(3, 2px);
  gap: 2px;
  opacity: 0.4;
  transition: opacity 0.2s;
}
.hud-grip span {
  width: 2px; height: 2px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
}
.hud-header:hover .hud-grip { opacity: 0.85; }

/* Drag-me hint — appears briefly on first load to advertise the move affordance */
.hud-drag-tip {
  position: absolute;
  pointer-events: none;
  background: rgba(8, 10, 14, 0.94);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(147, 212, 255, 0.32);
  border-radius: 100px;
  padding: 6px 13px 6px 11px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(147, 212, 255, 0.96);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(147, 212, 255, 0.16);
}
.hud-drag-tip.show {
  opacity: 1;
  transform: translateX(0);
  animation: dragTipPulse 2.2s ease-in-out infinite;
}
@keyframes dragTipPulse {
  0%, 100% {
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.45),
      0 0 28px rgba(147, 212, 255, 0.16);
  }
  50% {
    box-shadow:
      0 8px 28px rgba(0, 0, 0, 0.5),
      0 0 44px rgba(147, 212, 255, 0.32);
  }
}
.hud-drag-tip-icon {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: rgba(147, 212, 255, 1);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  margin-top: -1px;
}
.hud-drag-tip-caret {
  position: absolute;
  left: -5px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: rgba(8, 10, 14, 0.94);
  border-left: 1px solid rgba(147, 212, 255, 0.32);
  border-bottom: 1px solid rgba(147, 212, 255, 0.32);
}
.hud-logo {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  display: flex; align-items: center; gap: 7px;
  font-weight: 600;
}
.hud-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s ease infinite;
}
.hud-widget { flex-shrink: 0; }
.hud-whisper-slot { flex-shrink: 0; }
.hud-stream {
  display: flex; flex-direction: column;
  gap: 7px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
  min-height: 0;
}
.hud-stream:empty { display: none; }
.hud-whisper-slot:empty { display: none; }

/* Category chip row */
.cat-chips {
  display: flex; gap: 5px; flex-wrap: wrap;
}
.cchip {
  padding: 3px 8px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid;
  opacity: 0.3;
  transition: opacity 0.4s, box-shadow 0.4s, transform 0.4s;
}
.cchip.lit { opacity: 1; transform: scale(1.04); }
.cchip.g { color: var(--green); border-color: rgba(110,232,114,0.3); background: var(--green-dim); }
.cchip.o { color: var(--orange); border-color: rgba(245,166,35,0.3); background: var(--orange-dim); }
.cchip.p { color: var(--purple); border-color: rgba(196,157,255,0.3); background: var(--purple-dim); }
.cchip.c { color: var(--cyan); border-color: rgba(94,231,232,0.3); background: var(--cyan-dim); }
.cchip.r { color: var(--red); border-color: rgba(255,122,107,0.3); background: var(--red-dim); }
.cchip.b { color: var(--blue); border-color: rgba(147,212,255,0.3); background: var(--blue-dim); }
.cchip.lit.g { box-shadow: 0 0 14px rgba(110,232,114,0.4); }
.cchip.lit.o { box-shadow: 0 0 14px rgba(245,166,35,0.4); }
.cchip.lit.p { box-shadow: 0 0 14px rgba(196,157,255,0.4); }
.cchip.lit.c { box-shadow: 0 0 14px rgba(94,231,232,0.4); }
.cchip.lit.r { box-shadow: 0 0 14px rgba(255,122,107,0.4); }
.cchip.lit.b { box-shadow: 0 0 14px rgba(147,212,255,0.4); }

/* Per-scenario widget area */
.intel-widget {
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.widget-box {
  background: var(--surface-up);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.widget-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.widget-label::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* Sources widget */
.src-list { display: flex; flex-direction: column; gap: 6px; }
.src-item {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  transition: color 0.4s;
}
.src-item.hit { color: var(--green); }
.src-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
  transition: background 0.4s, box-shadow 0.4s, transform 0.4s;
}
.src-item.hit .src-dot {
  background: var(--green);
  box-shadow: 0 0 10px rgba(110,232,114,0.5);
  transform: scale(1.3);
}

/* Diagnostic chain widget */
.diag-chain {
  display: flex; flex-wrap: wrap;
  gap: 5px 8px;
  align-items: center;
}
.diag-step {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  opacity: 0.35;
  transition: opacity 0.4s, color 0.4s;
}
.diag-step.active { opacity: 1; color: var(--accent); }
.diag-step.done { opacity: 1; color: var(--green); }
.diag-num {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--text-mute);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px;
  font-weight: 600;
  flex-shrink: 0;
  transition: border-color 0.4s, background 0.4s, color 0.4s;
}
.diag-step.active .diag-num {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.diag-step.done .diag-num {
  border-color: var(--green);
  background: var(--green-dim);
  color: var(--green);
}
.diag-arrow { color: var(--text-fade); font-size: 9px; }

/* Question queue widget */
.q-queue { display: flex; flex-direction: column; gap: 3px; }
.q-item {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 4px 6px;
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--text-mute);
  border-radius: 5px;
  transition: background 0.3s, color 0.3s;
  letter-spacing: -0.005em;
}
.q-item.top {
  background: var(--cyan-dim);
  color: var(--cyan);
}
.q-rank {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  padding-top: 2px;
  opacity: 0.7;
}
.q-item.top .q-rank { color: var(--cyan); opacity: 1; }
.q-text { line-height: 1.35; flex: 1; }

/* Talk ratio widget (coaching) */
.ratio-bar-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ratio-bar {
  flex: 1; height: 5px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.ratio-you { background: var(--accent); height: 100%; transition: width 0.6s ease; }
.ratio-them { background: var(--purple); height: 100%; transition: width 0.6s ease; }
.ratio-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-mute);
}
.ratio-labels .rl-val { font-weight: 600; }
.ratio-labels .rl-good { color: var(--green); }
.ratio-labels .rl-warn { color: var(--orange); }
.mono-counter {
  display: flex; align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
}
.mono-counter .mc-val { font-weight: 600; transition: color 0.3s; }

/* Cards feed */
.cards-feed {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px 18px;
  display: flex; flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
  min-height: 0;
}
.card {
  background: var(--surface-up);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s, transform 0.5s;
  flex-shrink: 0;
}
.card.show { opacity: 1; transform: translateY(0); }
.card-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  margin-bottom: 7px;
}
.card-label.green  { color: var(--green);  background: var(--green-dim); }
.card-label.orange { color: var(--orange); background: var(--orange-dim); }
.card-label.purple { color: var(--purple); background: var(--purple-dim); }
.card-label.cyan   { color: var(--cyan);   background: var(--cyan-dim); }
.card-label.red    { color: var(--red);    background: var(--red-dim); }
.card-label.blue   { color: var(--blue);   background: var(--blue-dim); }
.card-body {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.card-body strong { color: var(--text); font-weight: 600; }
.card-source {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--text-mute);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 5px;
}
.card-source::before { content: '↳'; color: var(--accent); }

/* RESEARCH SURFACED — animated source tiles inside HUD */
.research-block {
  display: flex; flex-direction: column;
  gap: 5px;
}
.research-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1px;
  display: flex; align-items: center; gap: 6px;
}
.research-label::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.src-card {
  background: rgba(255,255,255,0.025);
  border-radius: 6px;
  max-height: 0;
  padding: 0 9px;
  border: 0 solid rgba(255,255,255,0.07);
  margin: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(8px);
  transition:
    max-height 0.5s ease,
    padding 0.45s ease,
    margin 0.45s ease,
    border-width 0.4s ease,
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.4s;
}
.src-card.in {
  max-height: 100px;
  padding: 6px 9px 7px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 2px;
  opacity: 1;
  transform: translateX(0);
}
.src-card.pulse {
  animation: srcPulse 1.1s ease 1;
}
@keyframes srcPulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  40%  { box-shadow: 0 0 18px 0 currentColor; }
  100% { box-shadow: 0 0 0 0 currentColor; }
}
.src-card.cy { color: rgba(94,231,232,0.55); border-left-color: rgba(94,231,232,0.7); }
.src-card.am { color: rgba(245,166,35,0.55); border-left-color: rgba(245,166,35,0.7); }
.src-card.mg { color: rgba(196,157,255,0.55); border-left-color: rgba(196,157,255,0.7); }
.src-name {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
  display: flex; align-items: center; gap: 5px;
}
.src-name .src-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  flex-shrink: 0;
}
.src-name .src-name-text { color: rgba(255,255,255,0.92); }
.src-snip {
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(255,255,255,0.55);
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* HIGHLIGHTED PHRASES — show which words came from which source */
.hl {
  position: relative;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
  background: rgba(255,255,255,0.06);
  border-bottom: 1.5px solid rgba(255,255,255,0.3);
  transition: background 0.4s, border-color 0.4s;
}
.hl-cy {
  background: rgba(94,231,232,0.14);
  border-bottom-color: rgba(94,231,232,0.85);
  color: rgba(220,255,255,0.98);
}
.hl-am {
  background: rgba(245,166,35,0.14);
  border-bottom-color: rgba(245,166,35,0.85);
  color: rgba(255,235,200,0.98);
}
.hl-mg {
  background: rgba(196,157,255,0.16);
  border-bottom-color: rgba(196,157,255,0.85);
  color: rgba(235,220,255,0.98);
}
.hl.flash {
  animation: hlFlash 0.85s ease 1;
}
@keyframes hlFlash {
  0%   { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
  40%  { box-shadow: 0 0 16px 2px currentColor; transform: scale(1.04); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

/* WHISPER — prominent SAY-THIS-NEXT card inside the Veracity HUD */
.whisper {
  background: linear-gradient(180deg, rgba(147,212,255,0.16), rgba(147,212,255,0.06));
  border: 1px solid rgba(147,212,255,0.42);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 8px 11px 10px;
  margin: 0;
  box-shadow:
    0 0 28px rgba(147,212,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.06);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.whisper.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.whisper-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  padding: 3px 8px 3px 6px;
  border-radius: 100px;
  margin-bottom: 6px;
}
.whisper-label::before {
  content: '↗';
  font-size: 10px;
  font-weight: 700;
}
.whisper-quote {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.014em;
}
.whisper-reason {
  font-family: var(--sans);
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-soft);
  letter-spacing: -0.005em;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(147,212,255,0.22);
}
.whisper-source {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-mute);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(147,212,255,0.22);
  display: flex; align-items: center; gap: 4px;
}
.whisper-source::before {
  content: '↳';
  color: var(--accent);
}

/* ─── SE IN A BOX — MANUAL QUERY MODE ─── */
/* Distinct visual mode: AE types a question into Veracity, sourced answer streams back. */
.se-query-area {
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.se-query-area.in {
  opacity: 1;
  transform: translateY(0);
}
.se-query-bar {
  background: rgba(23,23,28,0.92);
  border: 1px solid rgba(94,231,232,0.45);
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  padding: 7px 10px;
  box-shadow: 0 0 0 3px rgba(94,231,232,0.06), inset 0 1px 0 rgba(255,255,255,0.03);
}
.se-query-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 5px;
  text-shadow: 0 0 8px rgba(94,231,232,0.25);
}
.se-query-label::before {
  content: '▸';
  font-weight: 700;
}
.se-query-text {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text);
  min-height: 16px;
  letter-spacing: 0.005em;
  word-break: break-word;
}
.se-typing-cursor {
  display: inline-block;
  width: 6px;
  height: 1em;
  background: var(--cyan);
  margin-left: 2px;
  vertical-align: -2px;
  animation: seCursorBlink 0.85s steps(2) infinite;
  box-shadow: 0 0 8px var(--cyan);
}
@keyframes seCursorBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}
.se-query-status {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  margin-top: 5px;
  display: flex; align-items: center; gap: 5px;
  color: rgba(255,255,255,0.5);
  opacity: 0;
  transition: opacity 0.28s ease, color 0.3s ease;
}
.se-query-status.in       { opacity: 1; }
.se-query-status.typing   { color: var(--cyan); }
.se-query-status.searching{ color: var(--cyan); }
.se-query-status.answered { color: var(--green); }
.se-query-status::before {
  content: '●';
  font-size: 7px;
}
.se-query-status.typing::before,
.se-query-status.searching::before { animation: seStatusPulse 1.1s ease-in-out infinite; }
@keyframes seStatusPulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.3; }
}

.se-answer-area {
  margin-top: 4px;
  background: linear-gradient(180deg, rgba(147,212,255,0.12), rgba(147,212,255,0.04));
  border: 1px solid rgba(147,212,255,0.45);
  border-radius: 8px;
  padding: 9px 11px 10px;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 24px rgba(147,212,255,0.10), inset 0 1px 0 rgba(255,255,255,0.05);
}
.se-answer-area.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.se-answer-label {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
  display: flex; align-items: center; gap: 5px;
}
.se-answer-label::before {
  content: '▸';
  font-weight: 700;
}
.se-answer-body {
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--text);
}
.se-citations {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.se-cite-chip {
  font-family: var(--mono);
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 100px;
  border: 1px solid;
  opacity: 0;
  transform: translateY(4px) scale(0.94);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.se-cite-chip.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.se-cite-chip.cy { color: var(--cyan);   background: rgba(94,231,232,0.12);  border-color: rgba(94,231,232,0.45); }
.se-cite-chip.am { color: var(--orange); background: rgba(245,166,35,0.12);  border-color: rgba(245,166,35,0.45); }
.se-cite-chip.mg { color: var(--purple); background: rgba(196,157,255,0.16); border-color: rgba(196,157,255,0.50); }

.se-sources-label {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.se-sources-label.in { opacity: 1; }

/* Compact source cards for SE mode — name only, no preview snippet.
   Smaller max-height + tighter padding so the overlay doesn't crowd the transcript. */
.src-card.src-card-compact.in {
  max-height: 30px;
  padding: 5px 9px 5px;
}
.src-card.src-card-compact .src-name {
  margin-bottom: 0;
}

/* ─── PROOF STRIP ─── */
.proof-strip {
  position: relative;
  z-index: 5;
  padding: 90px 24px 60px;
  text-align: center;
}
.proof-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 24px;
}
.proof-strip .companies {
  display: flex; justify-content: center;
  gap: 56px; flex-wrap: wrap;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px;
  color: var(--text-fade);
  letter-spacing: -0.02em;
}

/* ─── PROOF STRIP — LIFTED SLAB ─── */
.proof-slab {
  background: #0B0B10;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 56px 24px;
  margin: 0 -24px;
}
.proof-slab .proof-label {
  margin-bottom: 28px;
}
.customer-names {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}
.customer-names .cn-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .proof-slab { padding: 40px 20px; }
  .customer-names { gap: 24px 36px; }
  .customer-names .cn-name { font-size: 17px; }
}

/* ─── WAITLIST TOAST NOTIFICATION ─── */
.waitlist-toast {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 12px;
  background: rgba(17, 17, 20, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-bright);
  border-radius: 12px;
  font-family: var(--sans);
  min-width: 240px;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.waitlist-toast.visible {
  opacity: 1;
  transform: translateY(0);
}
.waitlist-toast .wt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green-dim);
  flex-shrink: 0;
  animation: wtPulse 2s ease-in-out infinite;
}
@keyframes wtPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.waitlist-toast .wt-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.waitlist-toast .wt-line1 {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.waitlist-toast .wt-line2 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1.3;
}
@media (max-width: 640px) {
  .waitlist-toast {
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

/* ─── SCENE SECTIONS ─── */

/* ─── WHY VERACITY — five differentiators ─── */
.why {
  position: relative;
  z-index: 5;
  padding: 120px 24px 80px;
  max-width: 1280px;
  margin: 0 auto;
}
.why-header {
  text-align: center;
  margin-bottom: 80px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.why-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 22px;
}
.why-headline {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
  color: var(--text);
}
.why-headline em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: #C8BCFF;
}
.why-intro {
  font-family: var(--sans);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--text-soft);
  letter-spacing: -0.005em;
  max-width: 640px;
  margin: 0 auto;
}

.why-cards {
  display: flex; flex-direction: column;
  gap: 110px;
}

.why-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.why-card.reverse {
  direction: rtl;
}
.why-card.reverse > * { direction: ltr; }

.why-card-text { max-width: 520px; }
.why-card-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(200, 188, 255, 0.7);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}
.why-card-num::before {
  content: '';
  width: 22px; height: 1px;
  background: rgba(200, 188, 255, 0.5);
}
.why-card-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 2.8vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.024em;
  margin-bottom: 18px;
  color: var(--text);
}
.why-card-title em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: #C8BCFF;
}
.why-card-body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-soft);
  letter-spacing: -0.005em;
}
.why-card-body strong {
  color: var(--text);
  font-weight: 600;
}

.why-card-visual {
  position: relative;
  min-height: 320px;
  display: flex; align-items: center; justify-content: center;
}

/* Visual 01 — proactive (Cluely-style live listen + auto-answer) */
.viz-proactive {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 5 / 4;
  border-radius: 28px;
  padding: 28px 30px;
  background: linear-gradient(135deg, #3a1454 0%, #6a2da0 40%, #a45fd6 75%, #d49fee 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.viz-proactive::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 20%, rgba(255,255,255,0.20), transparent 55%);
  pointer-events: none;
}

.proactive-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 430px;
  background: rgba(10,10,14,0.94);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06) inset;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.proactive-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.proactive-status-left {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.75);
}
.proactive-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: blink 1.5s ease-in-out infinite;
}
.proactive-status-timer {
  color: rgba(255,255,255,0.5);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.proactive-wave-wrap {
  width: 100%;
  height: 36px;
  position: relative;
}
.proactive-wave-wrap canvas {
  width: 100%; height: 100%;
  display: block;
}

.proactive-transcript {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
}
.proactive-transcript-meta {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 5px;
}
.proactive-transcript-text {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  letter-spacing: -0.005em;
  min-height: 36px;
}
.proactive-cursor {
  display: inline-block;
  width: 7px;
  margin-left: 1px;
  color: var(--accent);
  animation: blink 0.9s steps(2) infinite;
}

.proactive-answer {
  background: linear-gradient(180deg, rgba(147,212,255,0.10), rgba(147,212,255,0.02));
  border: 1px solid rgba(147,212,255,0.30);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px 11px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.proactive-answer.in {
  opacity: 1;
  transform: translateY(0);
}
.proactive-answer-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.proactive-answer-tag { color: var(--accent); }
.proactive-answer-time { color: rgba(255,255,255,0.4); font-weight: 500; font-variant-numeric: tabular-nums; }
.proactive-answer-body {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  letter-spacing: -0.005em;
}
.proactive-answer-cite {
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(255,255,255,0.5);
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.proactive-answer-cite::before {
  content: '↳ ';
  color: rgba(255,255,255,0.35);
}

.proactive-input {
  position: relative;
  margin-top: 4px;
  background: rgba(255,255,255,0.025);
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: space-between;
}
.proactive-input-kbd {
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(255,255,255,0.25);
  padding: 2px 6px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  letter-spacing: 0.04em;
}

/* Visual 02 — clairvoyant feature */
/* Outer colored gradient frame that wraps the existing translucent panel */
.viz-clair-frame {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 5 / 4;
  padding: 28px 30px;
  border-radius: 28px;
  background: linear-gradient(135deg, #1a2766 0%, #2d3fc1 35%, #5d6ff5 70%, #93a0ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
  overflow: hidden;
}
.viz-clair-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 20%, rgba(255,255,255,0.20), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.viz-clair-frame > .viz-clairvoyant {
  position: relative;
  z-index: 1;
}
.viz-clairvoyant {
  position: relative;
  width: 100%;
  max-width: 540px;
  background: #050507;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 18px 18px 22px;
}
.viz-clair-sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.viz-clair-src {
  position: relative;
  background: rgba(255,255,255,0.025);
  border-radius: 6px;
  padding: 8px 9px;
  border-left: 2px solid var(--src-color, var(--accent));
  opacity: 0;
}
.viz-clair-src.cy {
  --src-color: #93D4FF;
  animation: clairSrcIn 0.6s ease 0.2s forwards, srcFire 0.7s ease 1.6s forwards;
}
.viz-clair-src.am {
  --src-color: #F5BC75;
  animation: clairSrcIn 0.6s ease 0.45s forwards, srcFire 0.7s ease 1.75s forwards;
}
.viz-clair-src.mg {
  --src-color: #D89DFF;
  animation: clairSrcIn 0.6s ease 0.7s forwards, srcFire 0.7s ease 1.9s forwards;
}
@keyframes clairSrcIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes srcFire {
  0%   { box-shadow: 0 0 0 transparent; background: rgba(255,255,255,0.025); }
  35%  { box-shadow: 0 0 22px var(--src-color); background: rgba(255,255,255,0.075); }
  100% { box-shadow: 0 0 0 transparent; background: rgba(255,255,255,0.025); }
}
.viz-clair-src-name {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--src-color, rgba(255,255,255,0.9));
  margin-bottom: 3px;
}
.viz-clair-src-snip {
  font-family: var(--sans);
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(255,255,255,0.5);
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Beams: energy transmission with traveling spark dots ── */
.viz-clair-beams {
  position: relative;
  height: 40px;
  pointer-events: none;
  margin: 4px 0 4px;
}
.viz-clair-beam {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, var(--bm-color), transparent);
  opacity: 0;
  animation: beamLine 1.0s ease forwards;
}
.viz-clair-beam::after {
  content: '';
  position: absolute;
  top: -3px; left: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bm-color);
  box-shadow: 0 0 10px var(--bm-color), 0 0 22px var(--bm-color);
  opacity: 0;
  animation: sparkTravel 0.55s cubic-bezier(0.5, 0, 0.7, 1) forwards;
}
.viz-clair-beam.cy {
  --bm-color: rgba(147, 212, 255, 1);
  left: 17%;
  animation-delay: 1.6s;
}
.viz-clair-beam.cy::after { animation-delay: 1.6s; }
.viz-clair-beam.am {
  --bm-color: rgba(245, 188, 117, 1);
  left: 50%;
  animation-delay: 1.75s;
}
.viz-clair-beam.am::after { animation-delay: 1.75s; }
.viz-clair-beam.mg {
  --bm-color: rgba(216, 157, 255, 1);
  left: 83%;
  animation-delay: 1.9s;
}
.viz-clair-beam.mg::after { animation-delay: 1.9s; }
@keyframes beamLine {
  0%   { opacity: 0; }
  25%  { opacity: 0.55; }
  70%  { opacity: 0.45; }
  100% { opacity: 0; }
}
@keyframes sparkTravel {
  0%   { top: -3px; opacity: 0; transform: scale(0.5); }
  15%  { opacity: 1; transform: scale(1.15); }
  85%  { opacity: 1; }
  100% { top: calc(100% - 4px); opacity: 0; transform: scale(0.5); }
}

/* ── Answer card: appears with placeholder highlights, supercharges as research arrives ── */
.viz-clair-answer {
  position: relative;
  background: linear-gradient(180deg, rgba(147,212,255,0.10), rgba(147,212,255,0.02));
  border: 1px solid rgba(147,212,255,0.32);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 14px 14px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--text);
  opacity: 0;
  animation: clairAnsIn 0.55s ease 1.2s forwards;
}
.viz-clair-answer::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 9px;
  border: 1.5px solid rgba(147, 212, 255, 0.55);
  opacity: 0;
  pointer-events: none;
  animation: superchargePulse 0.9s ease-out 2.5s forwards;
}
@keyframes clairAnsIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes superchargePulse {
  0%   { opacity: 0; transform: scale(1); }
  20%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}
.viz-clair-answer-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  padding: 3px 8px 3px 6px;
  border-radius: 100px;
  margin-bottom: 7px;
}
.viz-clair-answer-label::before { content: '↗'; font-size: 10px; font-weight: 700; }

/* ── Highlights: dim placeholder → ignite with color burst when spark lands ── */
.viz-clair-hl {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.32);
  padding: 1px 4px;
  border-radius: 3px;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.12);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
  animation: clairIgnite 0.5s ease forwards;
}
.viz-clair-hl.cy {
  --hl-bg: rgba(147,212,255,0.22);
  --hl-bg-strong: rgba(147,212,255,0.50);
  --hl-fg: #DCEEFF;
  animation-delay: 2.1s;
}
.viz-clair-hl.am {
  --hl-bg: rgba(245,188,117,0.20);
  --hl-bg-strong: rgba(245,188,117,0.48);
  --hl-fg: #FFE5C2;
  animation-delay: 2.25s;
}
.viz-clair-hl.mg {
  --hl-bg: rgba(216,157,255,0.20);
  --hl-bg-strong: rgba(216,157,255,0.48);
  --hl-fg: #EFD8FF;
  animation-delay: 2.4s;
}
@keyframes clairIgnite {
  0% {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.32);
    text-decoration-color: rgba(255,255,255,0.12);
    box-shadow: 0 0 0 transparent;
  }
  40% {
    background: var(--hl-bg-strong);
    color: var(--hl-fg);
    text-decoration-color: var(--hl-fg);
    box-shadow: 0 0 14px var(--hl-fg);
  }
  100% {
    background: var(--hl-bg);
    color: var(--hl-fg);
    text-decoration-color: var(--hl-fg);
    box-shadow: 0 0 0 transparent;
  }
}

/* Visual 03 — live correction (streaming monologue + self-correction) */
.viz-correct {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 5 / 4;
  border-radius: 28px;
  padding: 26px 28px;
  background: linear-gradient(135deg, #5a1a3d 0%, #b53676 40%, #e85ca7 75%, #f8a8ce 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.viz-correct::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 20%, rgba(255,255,255,0.20), transparent 55%);
  pointer-events: none;
}
.correct-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: rgba(10,10,14,0.94);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 14px 14px 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06) inset;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.correct-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.correct-header-left { display: flex; align-items: center; gap: 8px; }
.correct-header-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: blink 1.5s ease-in-out infinite;
}
.correct-header-timer {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.5);
}

/* Transcript container holds two utterances stacked */
.correct-transcript-large {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.correct-utterance {
  position: relative;
}
.correct-utterance + .correct-utterance {
  margin-top: 0;
}
.correct-transcript-speaker {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.5);
  margin-right: 6px;
}
.correct-transcript-flag {
  background: rgba(245, 188, 117, 0.08);
  border-bottom: 1.5px dashed rgba(245, 188, 117, 0.55);
  padding: 1px 2px;
  border-radius: 2px;
}
.correct-transcript-cursor {
  display: inline-block;
  color: rgba(245, 188, 117, 0.9);
  margin-left: 1px;
  animation: blink 0.9s steps(2) infinite;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.correct-transcript-cursor.active { opacity: 1; }

/* The self-correction utterance — appears AFTER the nudge */
.correct-utterance-fix {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-left: 0;
  border-left: 0 solid transparent;
  overflow: hidden;
  color: rgba(255,255,255,0.95);
  transition: max-height 0.45s ease, opacity 0.35s ease 0.05s, margin-top 0.4s ease, padding-left 0.4s ease, border-left-color 0.4s ease;
}
.correct-utterance-fix.active {
  max-height: 80px;
  opacity: 1;
  margin-top: 9px;
  padding-left: 8px;
  border-left: 2px solid rgba(110, 232, 114, 0.55);
  padding-top: 2px;
  padding-bottom: 2px;
}
.correct-utterance-fix .correct-transcript-speaker {
  color: rgba(110, 232, 114, 0.85);
}
.correct-fix-cursor {
  color: rgba(110, 232, 114, 0.9) !important;
}

/* Connector — fades in when nudge fires */
.correct-connector {
  margin-left: 30px;
  height: 14px;
  width: 1px;
  background: linear-gradient(180deg, rgba(245,188,117,0.85), rgba(245,188,117,0.25));
  position: relative;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.correct-connector.active { opacity: 1; }
.correct-connector::before {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #F5BC75;
  box-shadow: 0 0 6px #F5BC75;
}
.correct-connector::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(245,188,117,0.55);
}

/* Nudge — fades in when fires, badge appears on success */
.correct-nudge {
  margin-left: 16px;
  background: linear-gradient(180deg, rgba(245,188,117,0.10), rgba(245,188,117,0.025));
  border: 1px solid rgba(245, 188, 117, 0.42);
  border-left: 3px solid #F5BC75;
  border-radius: 8px;
  padding: 11px 13px 12px;
  box-shadow: 0 0 18px rgba(245, 188, 117, 0.10);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.correct-nudge.active {
  opacity: 1;
  transform: none;
}
.correct-nudge-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F5BC75;
  margin-bottom: 6px;
}
.correct-nudge-badge {
  display: inline-flex;
  align-items: center;
  padding: 1.5px 7px;
  border-radius: 100px;
  background: rgba(110, 232, 114, 0.14);
  border: 1px solid rgba(110, 232, 114, 0.50);
  color: var(--green);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-left: auto;
}
.correct-nudge-badge.shown {
  opacity: 1;
  transform: scale(1);
}
.correct-nudge-headline {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--text);
  margin-bottom: 5px;
}
.correct-nudge-line {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-soft);
  font-style: italic;
  letter-spacing: -0.005em;
}
.correct-nudge-line strong {
  color: var(--text);
  font-weight: 500;
  font-style: normal;
  margin-right: 4px;
}

/* Visual 04 — memory (Claude/ChatGPT-style memory list) */
.viz-learn {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 5 / 4;
  border-radius: 28px;
  padding: 26px 28px;
  background: linear-gradient(135deg, #0d3a2a 0%, #1e8054 40%, #3fd084 75%, #94f0c0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.viz-learn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 20%, rgba(255,255,255,0.20), transparent 55%);
  pointer-events: none;
}
.learn-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  background: rgba(10,10,14,0.94);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06) inset;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.learn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}
.learn-title-block {
  display: flex;
  align-items: center;
  gap: 9px;
}
.learn-icon {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: linear-gradient(135deg, rgba(196,157,255,0.32), rgba(196,157,255,0.10));
  border: 1px solid rgba(196,157,255,0.42);
  color: #C49DFF;
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.learn-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.learn-count {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.learn-count-new { color: #6EE872; }

/* Fresh-memory toast */
.learn-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: linear-gradient(180deg, rgba(110,232,114,0.10), rgba(110,232,114,0.025));
  border: 1px solid rgba(110, 232, 114, 0.40);
  border-left: 3px solid #6EE872;
  border-radius: 8px;
  padding: 10px 12px 11px;
}
.learn-toast-plus {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: rgba(110,232,114,0.18);
  border: 1px solid rgba(110,232,114,0.5);
  color: #6EE872;
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.learn-toast-body { flex: 1; min-width: 0; }
.learn-toast-label {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6EE872;
  margin-bottom: 4px;
}
.learn-toast-text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.learn-toast-text em {
  font-style: italic;
  color: #6EE872;
}
.learn-toast-source {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.45);
}

/* Faint divider — no label */
.learn-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10) 12%, rgba(255,255,255,0.10) 88%, transparent);
  margin: 1px 4px;
}

/* Timestamped ledger */
.learn-ledger { display: flex; flex-direction: column; }
.learn-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.learn-row:last-child { border-bottom: none; }
.learn-row-text {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text);
  letter-spacing: -0.005em;
}
.learn-row-text em {
  font-style: italic;
  color: #C49DFF;
}
.learn-row-meta {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  white-space: nowrap;
  text-align: right;
}

/* Footer link */
.learn-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 2px 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.learn-footer-left { color: rgba(255,255,255,0.45); }
.learn-footer-right { color: rgba(196,157,255,0.80); }

/* Visual 05 — annotated call + score hero (actionable post-call coaching) */
.viz-dissect {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 5 / 4;
  border-radius: 28px;
  padding: 26px 28px;
  background: linear-gradient(135deg, #0a3a4d 0%, #16708c 40%, #3ab8d9 75%, #8ee0f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.viz-dissect::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 20%, rgba(255,255,255,0.20), transparent 55%);
  pointer-events: none;
}
.dissect-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: rgba(10,10,14,0.94);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06) inset;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Score hero */
.dissect-score-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dissect-score-block {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}
.dissect-score {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dissect-grade {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #F5BC75;
  background: rgba(245,188,117,0.12);
  border: 1px solid rgba(245,188,117,0.45);
  padding: 3px 8px;
  border-radius: 5px;
}
.dissect-delta {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #FF7A6B;
  background: rgba(255,122,107,0.08);
  border: 1px solid rgba(255,122,107,0.30);
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
}
.dissect-call-meta {
  text-align: right;
  padding-top: 3px;
}
.dissect-call-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.008em;
  margin-bottom: 2px;
}
.dissect-call-time {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* Annotated utterances */
.dissect-utt {
  position: relative;
  padding: 2px 0;
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--text);
}
.dissect-speaker {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.50);
  margin-right: 6px;
}
.dissect-miss {
  background: rgba(245,188,117,0.08);
  border-bottom: 1.5px dashed rgba(245,188,117,0.60);
  padding: 1px 2px;
  border-radius: 2px;
}
.dissect-win {
  background: rgba(110,232,114,0.06);
  border-bottom: 1.5px solid rgba(110,232,114,0.55);
  padding: 1px 2px;
  border-radius: 2px;
}
.dissect-note {
  margin: 3px 0 6px 20px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 10px 8px;
  border-radius: 6px;
  border-left: 2px solid;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.dissect-note-miss {
  background: rgba(245,188,117,0.06);
  border-left-color: #F5BC75;
}
.dissect-note-win {
  background: rgba(110,232,114,0.05);
  border-left-color: #6EE872;
}
.dissect-note-icon {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-top: 1px;
}
.dissect-note-miss .dissect-note-icon { color: #F5BC75; }
.dissect-note-win  .dissect-note-icon { color: #6EE872; }
.dissect-note-text { color: rgba(255,255,255,0.85); }
.dissect-note-text strong {
  color: var(--text);
  font-weight: 600;
}
.dissect-note-text em {
  font-style: italic;
  color: #93D4FF;
}


.why-footer {
  margin-top: 100px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-mute);
  letter-spacing: -0.005em;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.why-footer em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
}

/* ─── LAUNCH FILM: click to play, nothing loads until then (preload none) ─── */
.film {
  position: relative;
  z-index: 5;
  max-width: 1120px;
  margin: 0 auto;
  padding: 96px 24px 24px;
  text-align: center;
}
.film-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #07080c;
  border: 1px solid var(--line-bright);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55), 0 0 70px rgba(139,124,255,0.12);
}
.film-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #07080c; }
.film-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(60% 60% at 50% 50%, rgba(7,8,12,0.15), rgba(7,8,12,0.45));
}
.film-play .disc {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #9A8CFF 0%, #7B68FF 55%, #6A55F5 100%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 10px 40px rgba(139,124,255,0.55), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform 0.2s, filter 0.2s;
  animation: ctaGlow 4.6s ease-in-out infinite;
}
.film-play .disc svg { margin-left: 5px; }
.film-play:hover .disc { transform: scale(1.06); filter: brightness(1.08); }
.film-play .len {
  position: absolute;
  left: 18px;
  bottom: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  background: rgba(7,8,12,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 6px 12px;
}
.film-frame.playing .film-play { display: none; }
@media (max-width: 640px) {
  .film { padding: 56px 14px 8px; }
  .film-frame { border-radius: 12px; }
  .film-play .disc { width: 64px; height: 64px; }
  .film-play .disc svg { width: 22px; height: 22px; }
  .film-play .len { left: 10px; bottom: 10px; font-size: 9.5px; padding: 4px 9px; }
}

/* ─── HOW IT WORKS ─── */
.steps {
  position: relative;
  z-index: 5;
  padding: 100px 24px 100px;
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}
.steps-header { text-align: center; margin-bottom: 72px; }
.steps-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 18px;
}
.steps-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  max-width: 800px;
  margin: 0 auto;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.step {
  padding: 36px 30px 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.step::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(147,212,255,0.4), transparent);
}
.step-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 28px;
}
.step-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  line-height: 1.15;
}
.step-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-soft);
  letter-spacing: -0.005em;
  margin-bottom: 22px;
}

/* ── Step visual container (shared) ── */
.step-visual {
  margin-top: auto;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  position: relative;
  overflow: hidden;
}
.step {
  display: flex;
  flex-direction: column;
  min-height: 340px;
}

/* ── Step 01 visual: knowledge base ── */
.kb-header {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.kb-header-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.kb-header-count {
  color: rgba(255,255,255,0.35);
  margin-left: auto;
}
.kb-list { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.kb-item {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 3px;
  font-size: 11.5px;
  color: var(--text);
  letter-spacing: -0.005em;
}
.kb-item-icon {
  width: 14px; height: 16px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
}
.kb-item-icon::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 5px; height: 5px;
  background: rgba(255,255,255,0.35);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.kb-item-name { flex: 1; }
.kb-item-status {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--green);
  flex-shrink: 0;
}
.kb-item.indexing .kb-item-status {
  color: var(--accent);
}
.kb-footer {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.40);
  text-align: right;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ── Step 03 visual: pre-call research ── */
.rs-form {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rs-input {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  padding: 6px 10px;
}
.rs-input-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  min-width: 28px;
}
.rs-input-value {
  color: var(--text);
  font-size: 11.5px;
  letter-spacing: -0.005em;
}

/* ── Step 03 animated states (additive) ── */
.rs-input { transition: border-color 0.3s ease, background 0.3s ease; min-height: 30px; }
.rs-input.active { border-color: rgba(147,212,255,0.45); background: rgba(147,212,255,0.04); }
.rs-input.filled { border-color: rgba(110,232,114,0.22); }
.rs-input-value { display: inline-flex; align-items: center; min-height: 14px; }

.rs-caret {
  display: inline-block;
  width: 1.5px; height: 12px;
  background: var(--accent);
  margin-left: 1px;
  box-shadow: 0 0 4px rgba(147,212,255,0.6);
  opacity: 0;
  vertical-align: middle;
}
.rs-caret.show { opacity: 1; animation: rs-blink 0.95s steps(2) infinite; }
@keyframes rs-blink { 50% { opacity: 0; } }

.rs-scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(147,212,255,0.16), transparent);
  transform: translateY(-100%);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}
.rs-scan.run { animation: rs-scan-anim 1.6s ease-in-out 1; opacity: 1; }
@keyframes rs-scan-anim {
  0%   { transform: translateY(-80px); }
  100% { transform: translateY(320px); }
}

.rs-btn-row { display: flex; margin-bottom: 10px; position: relative; z-index: 2; }
.rs-btn {
  box-sizing: border-box;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.50);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: default;
  transition: all 0.25s ease;
  min-height: 32px;
}
.rs-btn.armed   { color: var(--accent); background: rgba(147,212,255,0.06); border-color: rgba(147,212,255,0.30); }
.rs-btn.press   { transform: scale(0.97); background: rgba(147,212,255,0.18); border-color: rgba(147,212,255,0.55); color: #B8E0FF; }
.rs-btn.loading { color: var(--accent); background: rgba(147,212,255,0.06); border-color: rgba(147,212,255,0.30); }
.rs-btn-arrow { display: inline-block; transition: transform 0.2s ease; font-family: var(--mono); font-weight: 500; }
.rs-btn.press .rs-btn-arrow { transform: translateX(2px); }
.rs-btn-spin {
  display: inline-block;
  width: 11px; height: 11px;
  border: 1.5px solid rgba(147,212,255,0.22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: rs-spin 0.7s linear infinite;
  vertical-align: -1px;
}
@keyframes rs-spin { to { transform: rotate(360deg); } }

.rs-action { position: relative; min-height: 110px; flex: 1; }
.rs-converge {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 4px;
}
.rs-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 9px;
  border-radius: 100px;
  border: 1px solid;
  opacity: 0;
  transform: translateY(-8px) scale(0.85);
  transition: opacity 0.32s ease, transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
  white-space: nowrap;
}
.rs-chip.info { color: var(--accent); background: rgba(147,212,255,0.08); border-color: rgba(147,212,255,0.32); }
.rs-chip.info::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 4px rgba(147,212,255,0.6);
  flex-shrink: 0;
}
.rs-chip.question { color: var(--purple); background: rgba(196,157,255,0.08); border-color: rgba(196,157,255,0.32); }
.rs-chip.question::before {
  content: '?';
  width: 8px; height: 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 8px;
  text-align: center;
  color: var(--purple);
  flex-shrink: 0;
}
.rs-chip.show { opacity: 1; transform: translateY(0) scale(1); }
.rs-chip.collapse {
  transition: opacity 0.55s ease, transform 0.65s cubic-bezier(0.55, 0, 0.7, 0.4);
  opacity: 0;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.35);
}

.rs-end {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
}
.rs-end.show { opacity: 1; transform: scale(1); }
.rs-end-badge {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(110,232,114,0.45);
  flex-shrink: 0;
}
.rs-end-check { display: inline-block; width: 11px; height: 11px; position: relative; }
.rs-end-check::before, .rs-end-check::after {
  content: '';
  position: absolute;
  background: #0A2F0C;
  border-radius: 1px;
}
.rs-end-check::before { width: 4px; height: 1.7px; left: 1px; bottom: 3px; transform: rotate(45deg); transform-origin: left center; }
.rs-end-check::after  { width: 8px; height: 1.7px; left: 4px; bottom: 5px; transform: rotate(-45deg); transform-origin: left center; }
.rs-end-text {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--green);
}

/* ── Step 02 visual: platforms + listening ── */
.pf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  flex: 1;
}
.pf-tile {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
}
.pf-mark {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.pf-zoom .pf-mark  { background: linear-gradient(135deg, #4493ff, #2D8CFF); }
.pf-meet .pf-mark  { background: linear-gradient(135deg, #34a853, #00897B); }
.pf-teams .pf-mark { background: linear-gradient(135deg, #7779c7, #4b53a3); }
.pf-webex .pf-mark { background: linear-gradient(135deg, #00d4eb, #0094a8); }
.pf-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.008em;
}
.pf-status {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  padding: 7px 9px;
  background: rgba(110, 232, 114, 0.06);
  border: 1px solid rgba(110, 232, 114, 0.25);
  border-radius: 6px;
}
.pf-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: blink 1.5s ease-in-out infinite;
}
.pf-status-time {
  margin-left: auto;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.08em;
}

/* ── Step 03 visual: the pill + coaching card ── */
.pill-mock-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 8px 0;
}
.pill-mock {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px;
  background: rgba(20, 22, 30, 0.78);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  backdrop-filter: blur(12px);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.pill-mock-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: blink 1.5s ease-in-out infinite;
}
.pill-mock-text {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text);
}
.pill-mock-text .pill-mock-live {
  color: var(--green);
}
.pill-mock-grip {
  display: flex; flex-direction: column; gap: 2px;
  margin-left: 4px;
  opacity: 0.4;
}
.pill-mock-grip span {
  display: block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
}
.coach-mock {
  width: 100%;
  max-width: 260px;
  background: linear-gradient(180deg, rgba(245,188,117,0.10), rgba(245,188,117,0.025));
  border: 1px solid rgba(245, 188, 117, 0.40);
  border-left: 3px solid #F5BC75;
  border-radius: 8px;
  padding: 9px 11px 10px;
}
.coach-mock-label {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F5BC75;
  margin-bottom: 4px;
}
.coach-mock-text {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ─── BOTTOM CTA ─── */
.bottom-cta {
  position: relative;
  z-index: 5;
  padding: 100px 24px 140px;
  text-align: center;
  border-top: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 0%, rgba(120,140,255,0.12), transparent 60%);
}
.bottom-cta-vmark-wrap {
  position: relative;
  display: block;
  width: clamp(180px, 22vw, 280px);
  height: clamp(180px, 22vw, 280px);
  margin: 0 auto 28px;
}
.bottom-cta-vmark-wrap::before {
  content: '';
  position: absolute;
  inset: -24%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(139, 124, 255, 0.10) 0%,
    rgba(139, 124, 255, 0.04) 42%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.bottom-cta-vmark {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 6px rgba(139, 124, 255, 0.85))
    drop-shadow(0 0 2px rgba(165, 153, 255, 0.9));
}
.bottom-cta h2 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  max-width: 1000px;
  margin: 0 auto 36px;
}
.bottom-cta-sub {
  font-size: 19px;
  line-height: 1.4;
  color: var(--text-soft);
  max-width: 540px;
  margin: 0 auto 40px;
  letter-spacing: -0.012em;
}
.bottom-cta .email-form { margin: 0 auto; }

footer {
  position: relative;
  z-index: 5;
  padding: 40px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.06em;
  border-top: 1px solid var(--line);
}
footer .logo { font-size: 16px; }

/* ─── Hero: 'Curious how it works?' secondary CTA ─── */
.curious-row {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  opacity: 0;
  animation: fadeUp 0.9s 0.5s ease forwards;
}
.curious-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 9px 20px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--text-soft);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.15s;
}
.curious-link:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.04);
  transform: translateY(-1px);
}
.curious-link .arrow {
  display: inline-block;
  transition: transform 0.2s;
  color: var(--accent);
  font-weight: 600;
}
.curious-link:hover .arrow {
  transform: translateX(3px);
}

/* ─── Demo modal: full-screen iframe overlay ─── */
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 5, 8, 0.96);
  backdrop-filter: blur(20px);
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.demo-modal.active {
  display: block;
  opacity: 1;
}
.demo-modal-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.demo-modal-close {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 10000;
  height: 44px;
  padding: 0 20px 0 16px;
  border-radius: 100px;
  background: rgba(20, 22, 30, 0.92);
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.demo-modal-close::before {
  content: '←';
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.15s;
}
.demo-modal-close:hover {
  background: rgba(40, 42, 52, 0.96);
  border-color: rgba(255,255,255,0.36);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.demo-modal-close:hover::before {
  transform: translateX(-3px);
}
.demo-modal-hint {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding: 8px 16px;
  background: rgba(20, 22, 30, 0.7);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 100px;
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.demo-modal-hint kbd {
  font-family: var(--mono);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  color: var(--text);
  margin-right: 5px;
}
/* Phones have no ESC key, and autopilot puts its own chip bottom-center */
@media (max-width: 640px) {
  .demo-modal-hint { display: none; }
}

/* ─── Mobile: hide the 'Curious how it works?' button ─── */
@media (max-width: 900px) {
  .curious-row { display: none; }
}


@media (max-width: 900px) {
  nav { gap: 16px; padding: 6px 6px 6px 18px; }
  .nav-links { display: none; }
  .hero { padding: 110px 20px 30px; }
  .email-form { min-width: 0; width: 100%; max-width: 380px; }
  .demo-stage { margin-top: 32px; }
  .stab { padding: 6px 10px; font-size: 11px; }
  .demo-body { height: auto; }
  .meeting { grid-template-columns: 1fr; gap: 5px; padding: 5px; }
  .tile { aspect-ratio: 16 / 10; }
  .tile-avatar { width: 92px; height: 92px; font-size: 46px; }
  .veracity-hud { position: static; width: auto; max-height: none; margin: 0 5px 5px; }
  .tile-you .tile-caption { right: 14px; }
  .cat-chips { display: none; }
  .why { padding: 60px 20px 40px; }
  .why-header { margin-bottom: 56px; }
  .why-cards { gap: 72px; }
  .why-card { grid-template-columns: 1fr; gap: 36px; }
  .why-card.reverse { direction: ltr; }
  .why-card-visual { min-height: auto; }
  .why-footer { margin-top: 64px; }
  .steps-grid { grid-template-columns: 1fr; }
  .bottom-cta { padding: 80px 20px 100px; }
  footer { padding: 28px 20px; flex-direction: column; gap: 14px; }
}

/* ─── Mobile ≤640: one-screen active-speaker demo stage ───
   Entire mode gated on :has() support — without it, phones keep the
   (scrolling) stacked layout from the ≤900px block above. */
@supports selector(:has(*)) {
  @media (max-width: 640px) {
    .demo-stage {
      height: calc(100svh - 96px);
      display: flex;
      flex-direction: column;
      padding: 0 12px;
      scroll-margin-top: 88px;
    }
    .scenario-tabs {
      flex-wrap: nowrap;
      justify-content: flex-start;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
      mask-image: linear-gradient(90deg, #000 0%, #000 90%, transparent 100%);
      flex-shrink: 0;
      padding-bottom: 2px;
    }
    .scenario-tabs::-webkit-scrollbar { display: none; }
    .stab { flex-shrink: 0; white-space: nowrap; scroll-snap-align: center; }
    .demo-frame {
      flex: 1;
      min-height: 0;
      min-width: 0;
      width: 100%;
      max-width: 100%;
      margin: 0;   /* base margin: 0 auto kills flex cross-axis stretch — content-sizes the frame past the viewport */
      display: flex;
      flex-direction: column;
    }
    /* min-width: 0 down the whole flex chain — without it the nowrap title's
       intrinsic width (~500px) propagates up and widens the frame past the
       viewport (clipped silently by the html overflow guard). */
    .demo-chrome { flex-shrink: 0; min-width: 0; }
    .chrome-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
    .demo-body {
      flex: 1;
      min-height: 0;
      min-width: 0;
      height: auto;
      display: flex;
      flex-direction: column;
    }
    /* Active-speaker: both tiles share one grid cell; the speaking tile
       (choreography toggles .active in typeWords) fades in over the other. */
    .meeting {
      flex-shrink: 0;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      height: auto;
      padding: 5px;
    }
    .meeting .tile {
      grid-area: 1 / 1;
      height: clamp(150px, 24svh, 195px);
      aspect-ratio: auto;
      transition: opacity 0.35s ease, border-color 0.3s, box-shadow 0.3s;
    }
    .tile-you { opacity: 0; pointer-events: none; z-index: 2; }
    .meeting:has(.tile-you.active) .tile-you { opacity: 1; pointer-events: auto; }
    .meeting:has(.tile-you.active) .tile-prospect { opacity: 0; }
    .tile-avatar { width: 64px; height: 64px; font-size: 30px; }
    .tile-center { bottom: 48px; gap: 14px; }
    .tile-caption {
      bottom: 46px;
      font-size: 14px;
      line-height: 1.35;
      -webkit-line-clamp: 4;
      padding: 8px 12px 9px;
    }
    /* HUD fills the remaining stage; internal scroll is the pressure valve —
       the page itself never scrolls. */
    .veracity-hud {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      margin: 0 5px 5px;
    }
    .hud-whisper-slot { flex-shrink: 0; }
    /* SAY THIS NEXT is the money shot — pin it directly under the header;
       research cards stream below it (the scroll valve absorbs long widgets). */
    .hud-header { order: 0; }
    .hud-whisper-slot { order: 1; }
    .hud-widget { order: 2; }
    .hud-stream { order: 3; }
    /* Research cards: keep only the newest 2 lit cards; older ones collapse.
       (:has sibling-counting — hide any lit card followed by 2+ lit cards.) */
    .src-card { max-height: 220px; transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease; }
    .src-card.in:has(~ .src-card.in ~ .src-card.in) {
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      margin-bottom: 0;
      padding-top: 0;
      padding-bottom: 0;
      border-width: 0;
      overflow: hidden;
    }
  }
}

/* Short phones (SE class): single research card, shorter tile */
@supports selector(:has(*)) {
  @media (max-width: 640px) and (max-height: 700px) {
    .meeting .tile { height: clamp(140px, 22svh, 165px); }
    .tile-caption { -webkit-line-clamp: 3; }
    .src-card.in:has(~ .src-card.in) {
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      margin-bottom: 0;
      padding-top: 0;
      padding-bottom: 0;
      border-width: 0;
      overflow: hidden;
    }
  }
}

/* ─── FOUNDER LETTER SECTION (homepage anchor #about) ─── */
.founder-section {
  position: relative;
  z-index: 5;
  padding: 96px 24px 96px;
  max-width: 1280px;
  margin: 0 auto;
}
.founder-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 5vw, 72px) clamp(28px, 4vw, 64px);
  background: rgba(17,17,20,0.55);
  border: 1px solid var(--line-bright);
  border-radius: 20px;
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.founder-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 28px;
}
.founder-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 44px;
}
.founder-body p {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.72;
  letter-spacing: -0.005em;
  color: var(--text-soft);
  margin-bottom: 24px;
}
.founder-body p em {
  font-style: italic;
  color: #C8BCFF;
}
.founder-closing {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}
.founder-closing p {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.26;
  letter-spacing: -0.022em;
  color: var(--text);
  margin-bottom: 14px;
}
.founder-closing p:last-of-type {
  margin-bottom: 48px;
}
.founder-closing .accent {
  color: var(--accent);
}
.founder-signature {
  display: flex;
  align-items: center;
  gap: 14px;
}
.founder-signature-mark {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(147, 212, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(147, 212, 255, 0.06);
}
.founder-signature-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.founder-signature-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.founder-signature-name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.founder-signature-role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
@media (max-width: 640px) {
  .founder-section { padding: 80px 20px 72px; }
  .founder-body p { font-size: 15.5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM PACK (index_78 preview) — scroll reveals, hover physiology,
   hero word entrance, CTA glow, new sections, real footer.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Scroll reveal ── */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1);
}
.rv.in { opacity: 1; transform: translateY(0); }
.rvd { transition: transform 0.35s cubic-bezier(0.2,0.8,0.3,1), border-color 0.35s ease, filter 0.35s ease; }

/* ── Hover physiology ── */
.step:hover { transform: translateY(-5px); border-color: rgba(147,212,255,0.30); }
.step:hover .step-visual { border-color: rgba(147,212,255,0.16); }
.why-card-visual > * { transition: transform 0.4s cubic-bezier(0.2,0.8,0.3,1), filter 0.4s ease; }
.why-card:hover .why-card-visual > * { transform: translateY(-6px); filter: brightness(1.06) saturate(1.04); }

.customer-names .cn-name {
  color: var(--text-soft);
  opacity: 0.72;
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  cursor: default;
}
.customer-names .cn-name:hover { color: #fff; opacity: 1; transform: translateY(-2px); }

/* ── CTA glow pulse ── */
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(139,124,255,0); }
  50% { box-shadow: 0 0 26px 3px rgba(139,124,255,0.35); }
}
.email-form button {
  animation: ctaGlow 4.6s ease-in-out infinite;
  transition: background 0.2s, transform 0.2s;
}
.email-form button:hover { transform: translateY(-1px); }

/* ── Hero word entrance ── */
.hero h1.words { animation: none; opacity: 1; }
.hw {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  animation: hwIn 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes hwIn { to { opacity: 1; transform: translateY(0); } }

/* ── Nav ── */
.nav-link.active { color: var(--text); }
@media (max-width: 760px) { .nav-x { display: none; } }

/* ── Shared section header shells ── */
.px-header { text-align: center; margin-bottom: 56px; }
.px-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 18px;
}
.px-title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0 auto 16px;
  max-width: 780px;
}
.px-sub {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 600px;
  margin: 0 auto;
  letter-spacing: -0.005em;
}

/* ── Personas — seven seats, accent-coded ── */
.personas {
  position: relative;
  z-index: 5;
  max-width: 1240px;
  margin: 0 auto;
  padding: 110px 24px 20px;
}
.pg-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 46px 0 16px;
}
.pg-label::before { content: '/'; color: var(--text-fade); }
.pg-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.personas-grid { display: grid; gap: 16px; }
.personas-grid.sellers { grid-template-columns: repeat(3, 1fr); }
.personas-grid.leaders { grid-template-columns: repeat(3, 1fr); }
.persona {
  --pa: #C9BEFF;
  --pa-soft: rgba(201,190,255,0.35);
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 18px;
  padding: 28px 24px;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2,0.8,0.3,1), border-color 0.3s ease;
}
.persona::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pa-soft), transparent);
}
.persona:hover { transform: translateY(-5px); border-color: var(--pa-soft); }
.persona img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid var(--pa-soft);
  display: block;
  margin-bottom: 18px;
  transition: transform 0.35s cubic-bezier(0.2,0.8,0.3,1);
}
.persona:hover img { transform: scale(1.06); }
/* "How Veracity helps" rendered as a live coaching card — same language as the product cards */
.persona { display: flex; flex-direction: column; }
.persona-vc {
  position: relative;
  margin-top: auto;
  background: var(--surface-hi);
  border: 1px solid var(--pa-soft);
  border-left: 3px solid var(--pa);
  border-radius: 10px;
  padding: 11px 13px;
  animation: personaCardGlow 4.6s ease-in-out infinite;
  transition: border-color 0.3s ease, background 0.4s ease;
}
/* card "fires" like the product's ASK NEXT cards — border lights, accent flash, USED ✓ pops */
/* feature mini-visuals inside persona cards — same living-product idioms as the why-card visuals */
.pviz {
  background: color-mix(in srgb, var(--pa) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--pa) 28%, transparent);
  border-left: 3px solid var(--pa);
  border-radius: 8px;
  padding: 9px 11px 10px;
  margin: 4px 0 10px;
}
.pv-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 5px;
}
.pv-tag { color: var(--pa); }
.pv-tag.warn { color: var(--orange); }
.pv-time { color: rgba(255,255,255,0.4); font-weight: 500; font-variant-numeric: tabular-nums; }
.pv-type, .pv-body { font-size: 12px; line-height: 1.5; color: var(--text); min-height: 38px; }
.pv-cursor { display: inline-block; width: 7px; margin-left: 1px; color: var(--pa); animation: blink 0.9s steps(2) infinite; }
.pv-cite { font-family: var(--mono); font-size: 9px; color: rgba(255,255,255,0.5); margin-top: 6px; letter-spacing: 0.04em; opacity: 0; transition: opacity 0.45s ease; min-height: 13px; }
.pv-cite::before { content: '↳ '; color: rgba(255,255,255,0.35); }
.pv-cite.in { opacity: 1; }
.pviz.pv-srcs { background: none; border: none; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pv-src {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.03em; line-height: 1.45;
  color: var(--pa);
  background: color-mix(in srgb, var(--pa) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--pa) 26%, transparent);
  border-radius: 6px;
  padding: 5px 8px;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.pv-src.in { opacity: 1; transform: translateY(0); }
.pviz.pv-nudge {
  border-color: rgba(245,166,35,0.30);
  border-left-color: var(--orange);
  background: rgba(245,166,35,0.08);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.pviz.pv-nudge.in { opacity: 1; transform: translateY(0); }
.pv-head { font-size: 12px; font-weight: 650; color: var(--text); line-height: 1.35; }
.pv-try { font-size: 11px; color: var(--text-soft); margin-top: 4px; line-height: 1.45; }
.pv-try strong { color: var(--text); font-weight: 650; }
.pviz.pv-rows { padding: 7px 9px; display: flex; flex-direction: column; }
.pv-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.03em;
  color: var(--text-soft);
  padding: 4px 2px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.pv-row:last-child { border-bottom: none; }
.pv-row.in { opacity: 1; transform: translateY(0); }
.pv-up { color: var(--green); }
.pv-dn { color: var(--red); }
.pv-ok { color: var(--green); }
.pv-warn2 { color: var(--orange); }
.pv-hot span:first-child { color: var(--pa); }
.pv-hot span:last-child { color: var(--text-mute); }
.pv-score-top { display: flex; align-items: baseline; gap: 8px; }
.pv-num { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.pv-grade { font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--pa); border: 1px solid color-mix(in srgb, var(--pa) 40%, transparent); border-radius: 4px; padding: 1px 5px; }
.pv-trendup { font-family: var(--mono); font-size: 9px; color: var(--green); }
.pv-score-sub { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); margin-top: 5px; }
@keyframes personaCardGlow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--pa) 22%, transparent); }
}
/* the card lands after its tile reveals — same spring as the product cards */
.rv .persona-vc {
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity 0.5s ease 0.4s, transform 0.5s cubic-bezier(0.16,1,0.3,1) 0.4s;
}
.rv.in .persona-vc { opacity: 1; transform: none; }
.sellers .persona:nth-child(1) .persona-vc { animation-delay: -0.9s; }
.sellers .persona:nth-child(2) .persona-vc { animation-delay: -2.2s; }
.sellers .persona:nth-child(3) .persona-vc { animation-delay: -3.4s; }
.leaders .persona:nth-child(1) .persona-vc { animation-delay: -2.8s; }
.leaders .persona:nth-child(2) .persona-vc { animation-delay: -0.5s; }
.leaders .persona:nth-child(3) .persona-vc { animation-delay: -3.9s; }
.p-cyan   { --pa: #5EE7E8; --pa-soft: rgba(94,231,232,0.40); }
.p-blue   { --pa: #93D4FF; --pa-soft: rgba(147,212,255,0.40); }
.p-green  { --pa: #6EE872; --pa-soft: rgba(110,232,114,0.40); }
.p-purple { --pa: #C49DFF; --pa-soft: rgba(196,157,255,0.40); }
.p-orange { --pa: #F5A623; --pa-soft: rgba(245,166,35,0.40); }
.p-red    { --pa: #FF7A6B; --pa-soft: rgba(255,122,107,0.40); }
.p-brand  { --pa: #8B7CFF; --pa-soft: rgba(139,124,255,0.45); }
.persona-role {
  font-family: var(--sans);
  font-weight: 650;
  font-size: 16.5px;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  line-height: 1.25;
}
.persona-pain {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-soft);
  font-style: italic;
  margin-bottom: 16px;
}
.persona-fix-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pa);
  margin-bottom: 6px;
}
.persona-fix {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
}
.personas-note {
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-fade);
  margin-top: 32px;
}
@media (max-width: 1100px) {
  .personas-grid.sellers, .personas-grid.leaders { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .personas-grid.sellers, .personas-grid.leaders { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

/* ── ROI math ── */
.roi {
  position: relative;
  z-index: 5;
  max-width: 1020px;
  margin: 0 auto;
  padding: 110px 24px 20px;
}
.roi-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  padding: 42px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.roi-field { margin-bottom: 28px; }
.roi-field:last-child { margin-bottom: 0; }
.roi-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.roi-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.roi-val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: #C9BEFF;
}
.roi-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.10);
  outline: none;
}
.roi-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #C9BEFF;
  border: 3px solid #6F5FE0;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.roi-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.roi-range::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #C9BEFF;
  border: 3px solid #6F5FE0;
  cursor: pointer;
}
.roi-out-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
}
.roi-big {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(40px, 4.6vw, 60px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 14px;
}
.roi-explain {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft);
  margin-bottom: 18px;
}
.roi-out-label2 { margin-top: 6px; }
.roi-big.roi-big2 {
  font-size: clamp(28px, 3.2vw, 40px);
  color: #C9BEFF;
  margin-bottom: 10px;
}
.roi-big.roi-won {
  font-size: clamp(26px, 3vw, 36px);
  color: var(--green);
  margin-bottom: 10px;
}
.roi-funnel {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.roi-funnel .rf-n {
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
}
.roi-funnel .rf-arrow { color: var(--text-fade); padding: 0 2px; }
.roi-explain { margin-bottom: 16px; }
.roi-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-fade);
  line-height: 1.7;
}
@media (max-width: 860px) {
  .roi-card { grid-template-columns: 1fr; padding: 32px 26px; gap: 36px; }
}

/* ── Real footer ── */
footer.bf { display: block; padding: 64px 32px 36px; }
.bf-grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.bf-tag {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-soft);
  letter-spacing: -0.005em;
  margin-top: 14px;
  max-width: 260px;
}
.bf-col h4 {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 16px;
}
.bf-col a {
  display: block;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text-soft);
  text-decoration: none;
  margin-bottom: 10px;
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
}
.bf-col a:hover { color: var(--text); }
.bf-bottom {
  max-width: 1180px;
  margin: 48px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bf-bottom a { color: var(--text-mute); text-decoration: none; transition: color 0.2s ease; }
.bf-bottom a:hover { color: var(--text); }
@media (max-width: 800px) {
  .bf-grid { grid-template-columns: 1fr 1fr; }
  .bf-grid .bf-brand { grid-column: 1 / -1; }
}

/* ── FAQ — objection handling at the decision moment ── */
.faq {
  position: relative;
  z-index: 5;
  max-width: 760px;
  margin: 0 auto;
  padding: 110px 24px 40px;
}
.faq-header { margin-bottom: 40px; }
.faq-item {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.faq-item.open { border-color: rgba(139,124,255,0.35); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; cursor: pointer;
  padding: 18px 20px;
  font-family: var(--sans);
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text);
  text-align: left;
}
.faq-q:hover { color: #fff; }
.faq-toggle {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-mute);
  flex: none;
  transition: transform 0.3s ease, color 0.3s ease;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); color: var(--purple); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.2,0.8,0.3,1);
}
.faq-a-inner {
  padding: 0 20px 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-soft);
}
@media (max-width: 640px) { .faq { padding-top: 80px; } }

/* ── Reduced motion: everything above degrades to static ── */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.in { opacity: 1; transform: none; transition: none; }
  .hw { animation: none; opacity: 1; transform: none; }
  .email-form button { animation: none; }
  .step:hover, .persona:hover,
  .why-card:hover .why-card-visual > * { transform: none; }
  .persona-vc { animation: none; }
  .rv .persona-vc { opacity: 1; transform: none; transition: none; }
  .pv-cursor { animation: none; }
  .pv-src, .pv-row, .pviz.pv-nudge, .pv-cite { opacity: 1; transform: none; transition: none; }
  .faq-a, .faq-toggle { transition: none; }
}

/* page-level + phone rules from the second style block (index.html:4553-5059) */
  /* page-level: theme the document scrollbar; phones indicate scroll natively */
  html { scrollbar-color: rgba(255,255,255,0.12) transparent; }
  body::-webkit-scrollbar, html::-webkit-scrollbar { width: 9px; }
  body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 6px; }
  body::-webkit-scrollbar-track, html::-webkit-scrollbar-track { background: transparent; }
  @media (max-width: 640px) {
    html { scrollbar-width: none; }
    body::-webkit-scrollbar, html::-webkit-scrollbar { width: 0; height: 0; display: none; }

    /* above-the-fold hero: headline + sub + email + tour link, compact */
    nav { padding: 5px 6px !important; gap: 8px !important; }
    nav .logo { font-size: 16px !important; }
    nav .nav-link { font-size: 12px !important; }
    nav .nav-cta { font-size: 11.5px !important; padding: 7px 12px !important; white-space: nowrap !important; }
    nav .nav-demo { font-size: 11.5px !important; padding: 6px 11px !important; }
    .signin-top { display: none !important; }
    .hero { padding-top: 74px !important; padding-bottom: 0 !important; }
    .hero-pill, .hero-toast-row { display: none !important; }
    .hero h1 { font-size: 26px !important; line-height: 1.16 !important; margin: 0 0 8px !important; }
    .hero-sub { display: block !important; font-size: 12.5px !important; line-height: 1.4 !important; margin: 0 auto 8px !important; max-width: 330px !important; }
    .hero-cta-row { margin: 0 0 3px !important; }
    .email-form input { height: 34px !important; font-size: 12.5px !important; }
    .email-form button { height: 34px !important; font-size: 12.5px !important; padding: 0 14px !important; }
    .hero-cta-row, .cta-pair { row-gap: 6px !important; }
    .demo-cta { width: 100%; max-width: 380px; height: 40px; font-size: 13.5px; }
    .curious-row { display: block !important; margin: 1px 0 0 !important; }
    .curious-link { font-size: 11.5px !important; padding: 5px 9px !important; }
    .demo-stage { padding-top: 4px !important; }
  }

  .xchg {
    --vpurple: #8B7CFF;
    --vpurple-dim: rgba(139,124,255,0.14);
    --magenta: #F386C6;
    --magenta-dim: rgba(243,134,198,0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .xchg .scenario-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; justify-content: center; }
  .xchg .stab {
    position: relative;
    display: flex; align-items: center; gap: 7px;
    font-family: var(--sans);
    font-size: 12.5px; font-weight: 600;
    color: var(--text-soft);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    overflow: hidden;
  }
  .xchg .stab:hover { border-color: var(--line-strong); color: var(--text); }
  .xchg .stab.active { background: #F5F5F7; color: #131316; border-color: #F5F5F7; }
  .xchg .stab-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
  .xchg .stab::after {
    content: '';
    position: absolute; left: 0; bottom: 0;
    height: 2.5px; width: 0%;
    background: var(--vpurple);
    border-radius: 2px;
    transition: width 0.6s ease;
  }
  .xchg .stab.active::after { width: var(--prog, 0%); }

  .xchg .stage {
    position: relative;
    width: min(1160px, 100%);
    background: var(--bg-up);
    border: 1px solid var(--line-bright);
    border-radius: 16px;
    overflow: hidden;
  }

  .xchg .call-strip {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    position: relative;
    z-index: 5;
  }
  .xchg .conn-chip {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--mono);
    font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
    color: var(--green);
    background: var(--green-dim);
    border: 1px solid rgba(110,232,114,0.25);
    border-radius: 999px;
    padding: 5px 11px;
    white-space: nowrap;
  }
  .xchg .conn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: xchgPulseDot 1.6s ease-in-out infinite; }
  @keyframes xchgPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
  .xchg .call-title {
    font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.05em;
    color: var(--text-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1 1 auto; min-width: 0;
  }
  .xchg .participants { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
  .xchg .pchip { display: flex; align-items: center; gap: 9px; }
  .xchg .pavatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    flex: 0 0 auto;
    transition: box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  .xchg .pavatar img, .xchg .utt-avatar img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }
  .xchg .pavatar.them { background: radial-gradient(circle at 35% 30%, #3a2a5e, #241a3c); color: var(--purple); border: 1.5px solid rgba(196,157,255,0.4); }
  .xchg .pavatar.you { background: radial-gradient(circle at 35% 30%, #1d3a22, #12250f); color: var(--green); border: 1.5px solid rgba(110,232,114,0.4); }
  .xchg .pchip.speaking .pavatar.them { box-shadow: 0 0 0 3px rgba(196,157,255,0.22); }
  .xchg .pchip.speaking .pavatar.you { box-shadow: 0 0 0 3px rgba(110,232,114,0.22); }
  .xchg .pmeta { display: flex; flex-direction: column; gap: 1px; }
  .xchg .pname { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
  .xchg .prole { font-family: var(--mono); font-size: 9.5px; color: var(--text-mute); letter-spacing: 0.05em; white-space: nowrap; }

  .xchg .wave { display: flex; align-items: center; gap: 2.5px; height: 22px; padding: 0 4px; }
  .xchg .wave span {
    width: 2.5px; border-radius: 2px;
    background: var(--text-fade);
    height: 4px;
    transition: height 0.13s ease, background 0.3s ease;
  }
  .xchg .wave.live-them span { background: var(--purple); }
  .xchg .wave.live-you span { background: var(--green); }

  .xchg .rec { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--red); letter-spacing: 0.08em; }
  .xchg .rec-dot2 { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: xchgPulseDot 1.2s ease-in-out infinite; }

  .xchg .body-wrap { position: relative; height: 520px; }
  .xchg .transcript-col { display: flex; flex-direction: column; height: 100%; }
  .xchg .col-head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
    color: var(--text-mute);
    text-transform: uppercase;
  }
  .xchg .col-head .live-tick { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: xchgPulseDot 1.2s ease-in-out infinite; }
  .xchg .scen-chip {
    display: none;
    align-items: center; gap: 5px;
    margin-left: auto;
    font-family: var(--mono);
    font-size: 8.5px; font-weight: 600; letter-spacing: 0.08em;
    color: var(--text-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 8px;
    text-transform: none;
    white-space: nowrap;
  }
  .xchg .scen-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); flex: 0 0 auto; }

  .xchg .feed { flex: 1; overflow: hidden; padding: 16px 18px; position: relative; }
  .xchg .feed-inner { display: flex; flex-direction: column; gap: 14px; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
  .xchg .utt { display: flex; gap: 11px; max-width: 660px; opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.35s ease; }
  .xchg .utt.on { opacity: 1; transform: translateY(0); }
  .xchg .utt-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700;
    flex: 0 0 auto;
    margin-top: 2px;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  .xchg .utt.them .utt-avatar { background: radial-gradient(circle at 35% 30%, #3a2a5e, #241a3c); color: var(--purple); border: 1px solid rgba(196,157,255,0.35); }
  .xchg .utt.you .utt-avatar { background: radial-gradient(circle at 35% 30%, #1d3a22, #12250f); color: var(--green); border: 1px solid rgba(110,232,114,0.35); }
  .xchg .utt-main { min-width: 0; flex: 1; }
  .xchg .utt-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
  .xchg .utt-name { font-size: 12px; font-weight: 700; }
  .xchg .utt.them .utt-name { color: var(--purple); }
  .xchg .utt.you .utt-name { color: var(--green); }
  .xchg .utt-role { font-family: var(--mono); font-size: 9px; color: var(--text-mute); letter-spacing: 0.05em; }
  .xchg .utt-time { font-family: var(--mono); font-size: 9px; color: var(--text-fade); margin-left: auto; padding-right: 2px; }
  .xchg .utt-text { font-size: 13.5px; line-height: 1.6; color: var(--text-soft); transition: font-size 0.35s ease, color 0.35s ease, opacity 0.35s ease; }
  .xchg .utt.now .utt-text { font-size: 16px; color: var(--text); }
  .xchg .utt.recent .utt-text { font-size: 13.5px; color: var(--text-soft); }
  .xchg .utt.old { opacity: 0.55; }
  .xchg .utt.old .utt-text { font-size: 12px; color: var(--text-mute); }
  .xchg .utt.old .utt-avatar { transform: scale(0.85); }
  .xchg .utt.history { opacity: 0.35; }
  .xchg .utt.history .utt-text { font-size: 11.5px; color: var(--text-mute); }
  .xchg .utt.history .utt-avatar { transform: scale(0.8); }

  .xchg .cursor { display: inline-block; width: 7px; color: var(--text); animation: xchgBlink 0.85s step-end infinite; }
  @keyframes xchgBlink { 50% { opacity: 0; } }

  /* highlight grammar from the interactive tour — scoped so the why-card
     highlights elsewhere on the page keep their own look */
  .xchg .hl { border-radius: 3px; padding: 0 3px; font-weight: 600; border-bottom: 1.5px solid transparent; display: inline; }
  .xchg .hl-cy { color: #C8FFFF; background: rgba(94,231,232,0.16); border-bottom-color: rgba(94,231,232,0.85); }
  .xchg .hl-am { color: #FFE9B0; background: rgba(245,166,35,0.16); border-bottom-color: rgba(245,166,35,0.85); }
  .xchg .hl-mg { color: #EBD9FF; background: rgba(243,134,198,0.16); border-bottom-color: rgba(243,134,198,0.85); }
  .xchg .hl-rs { color: #DCD4FF; background: rgba(139,124,255,0.16); border-bottom-color: rgba(139,124,255,0.9); }
  .xchg .hl-rs::before { content: '◈'; font-family: var(--mono); font-size: 8.5px; vertical-align: 2px; margin-right: 3px; opacity: 0.85; }
  .xchg .hl.flash { animation: hlFlash 0.85s ease 1; }

  .xchg .voverlay {
    position: absolute;
    top: 14px; right: 14px;
    width: 372px;
    background: rgba(17,17,20,0.96);
    border: 1px solid rgba(139,124,255,0.32);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    z-index: 20;
    backdrop-filter: blur(6px);
    max-height: 486px;
  }
  .xchg .voverlay.dragging { border-color: rgba(139,124,255,0.65); }
  .xchg .vhead {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 14px 9px;
    border-bottom: 1px solid var(--line);
    cursor: grab;
    user-select: none;
    touch-action: none;
  }
  .xchg .voverlay.dragging .vhead { cursor: grabbing; }
  .xchg .vmark { width: 8px; height: 8px; border-radius: 50%; background: var(--vpurple); box-shadow: 0 0 10px 2px rgba(139,124,255,0.55); animation: xchgVGlow 2.4s ease-in-out infinite; flex: 0 0 auto; }
  @keyframes xchgVGlow {
    0%, 100% { box-shadow: 0 0 8px 1px rgba(139,124,255,0.45); }
    50% { box-shadow: 0 0 14px 3px rgba(139,124,255,0.75); }
  }
  .xchg .vtitle { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; color: var(--text); white-space: nowrap; }
  .xchg .drag-chip { font-family: var(--mono); font-size: 8px; font-weight: 600; letter-spacing: 0.1em; color: var(--text-fade); border: 1px solid var(--line); border-radius: 999px; padding: 2.5px 8px; white-space: nowrap; }
  .xchg .vstatus { margin-left: auto; font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; color: var(--text-mute); text-transform: uppercase; transition: color 0.3s ease; white-space: nowrap; }
  .xchg .vstatus.hot { color: var(--vpurple); }
  .xchg .vstatus.correct { color: var(--red); }

  .xchg .vticker {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 9px; letter-spacing: 0.06em;
    color: var(--text-fade);
    min-height: 26px;
  }
  .xchg .vticker .bars { display: flex; gap: 2px; align-items: center; height: 10px; flex: 0 0 auto; }
  .xchg .vticker .bars span { width: 2px; border-radius: 2px; background: var(--vpurple); opacity: 0.5; height: 3px; animation: xchgWv 1.4s ease-in-out infinite; }
  .xchg .vticker .bars span:nth-child(2) { animation-delay: 0.2s; }
  .xchg .vticker .bars span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes xchgWv { 0%, 100% { height: 3px; } 50% { height: 9px; } }
  .xchg .vticker-text { transition: opacity 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .xchg .vticker-text.fade { opacity: 0; }

  .xchg .vbody {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-height: 120px;
    scrollbar-width: none;
  }
  .xchg .vbody::-webkit-scrollbar { display: none; }

  .xchg .signal {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em;
    color: var(--vpurple);
    background: var(--vpurple-dim);
    border: 1px solid rgba(139,124,255,0.3);
    border-radius: 8px;
    padding: 8px 11px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    text-transform: uppercase;
  }
  .xchg .signal.on { opacity: 1; transform: translateY(0); }
  .xchg .signal.correct { color: var(--red); background: var(--red-dim); border-color: rgba(255,122,107,0.3); }
  /* the chip's beat is done once the card lands — collapse it so the card
     always fits whole, nothing ever clips mid-element */
  .xchg .signal { max-height: 64px; overflow: hidden; }
  .xchg .signal.gone {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    transition: opacity 0.25s ease, max-height 0.35s ease 0.1s, padding 0.35s ease 0.1s, border-width 0.35s ease 0.1s;
  }

  .xchg .vcard {
    background: var(--surface-hi);
    border: 1px solid rgba(139,124,255,0.35);
    border-left: 3px solid var(--vpurple);
    border-radius: 10px;
    padding: 13px 14px;
    opacity: 0;
    transform: translateY(8px) scale(0.985);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.4s ease;
  }
  .xchg .vcard.on { opacity: 1; transform: translateY(0) scale(1); }
  .xchg .vcard.pulse { box-shadow: 0 0 30px rgba(139,124,255,0.30); }
  .xchg .vcard.attn { animation: xchgCardAttn 1.1s ease-in-out 1; }
  @keyframes xchgCardAttn {
    0%, 100% { border-color: rgba(139,124,255,0.35); }
    50% { border-color: rgba(139,124,255,0.9); }
  }
  .xchg .vcard-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--vpurple); margin-bottom: 7px; display: flex; align-items: center; gap: 6px; }
  .xchg .vcard-body { font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--text); }
  .xchg .vcard-why { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.5; color: var(--text-mute); }
  .xchg .vcard-why b { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--text-fade); display: block; margin-bottom: 3px; }
  .xchg .vcard-src {
    margin-top: 8px;
    padding: 6px 9px;
    border: 1px solid rgba(139,124,255,0.28);
    background: rgba(139,124,255,0.08);
    border-radius: 7px;
    font-family: var(--mono);
    font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em;
    line-height: 1.5;
    color: var(--vpurple);
  }
  .xchg .vcard-src b { display: block; font-size: 8px; font-weight: 700; letter-spacing: 0.14em; color: rgba(139,124,255,0.7); margin-bottom: 2px; }
  .xchg .vcard.used { border-color: rgba(110,232,114,0.45); border-left-color: var(--green); }
  .xchg .vcard.used .vcard-label { color: var(--green); }
  .xchg .vcard .used-tick { display: none; margin-left: auto; color: var(--green); font-size: 10px; }
  .xchg .vcard.used .used-tick { display: inline; }
  .xchg .vcard.usedflash { animation: xchgUsedFlash 1.1s ease-in-out 1; }
  @keyframes xchgUsedFlash {
    0%, 100% { background: var(--surface-hi); }
    35% { background: rgba(110,232,114,0.14); }
  }

  .xchg .se-query {
    background: var(--surface-hi);
    border: 1px solid var(--line-bright);
    border-radius: 10px;
    padding: 11px 13px;
    opacity: 0;
    transition: opacity 0.3s ease, border-color 0.3s ease;
  }
  .xchg .se-query.on { opacity: 1; border-color: rgba(139,124,255,0.4); }
  .xchg .se-query-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--text-mute); margin-bottom: 6px; }
  .xchg .se-query-text { font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--text); min-height: 18px; }
  .xchg .se-query.compact { opacity: 0.65; }
  .xchg .se-query.compact .se-query-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0;
  }
  .xchg .se-answer {
    background: var(--surface-hi);
    border: 1px solid rgba(139,124,255,0.35);
    border-left: 3px solid var(--vpurple);
    border-radius: 10px;
    padding: 13px 14px;
    opacity: 0;
    transform: translateY(8px) scale(0.985);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-soft);
  }
  .xchg .se-answer.on { opacity: 1; transform: translateY(0) scale(1); }
  .xchg .se-answer.pulse { box-shadow: 0 0 30px rgba(139,124,255,0.30); }
  .xchg .citations { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
  .xchg .cite { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: 0.06em; border-radius: 999px; padding: 3px 9px; border: 1px solid; }
  .xchg .cite.cy { color: var(--cyan); border-color: rgba(94,231,232,0.35); background: var(--cyan-dim); }
  .xchg .cite.am { color: var(--orange); border-color: rgba(245,166,35,0.35); background: var(--orange-dim); }
  .xchg .cite.mg { color: var(--magenta); border-color: rgba(243,134,198,0.35); background: var(--magenta-dim); }

  .xchg .outcome {
    border: 1px solid rgba(139,124,255,0.5);
    background: var(--vpurple-dim);
    border-radius: 10px;
    padding: 14px 15px;
    font-family: var(--mono);
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
    line-height: 1.6;
    color: var(--vpurple);
    text-transform: uppercase;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
  }
  .xchg .outcome.on { opacity: 1; transform: scale(1); }
  .xchg .outcome .oc-sub { display: block; margin-top: 5px; font-weight: 400; font-size: 9px; letter-spacing: 0.06em; color: var(--text-mute); text-transform: none; }

  /* two-column rail: keeps 4-source scenarios from starving the card area */
  .xchg .sources { border-top: 1px solid var(--line); padding: 9px 14px 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px 8px; }
  .xchg .sources-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--text-fade); text-transform: uppercase; margin-bottom: 4px; grid-column: 1 / -1; }
  .xchg .src { display: flex; align-items: center; gap: 7px; padding: 3px 6px; border-radius: 7px; margin: 0 -6px; transition: background 0.3s ease; min-width: 0; }
  .xchg .src-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; opacity: 0.5; transition: opacity 0.3s ease; }
  .xchg .src-dot.cy { background: var(--cyan); }
  .xchg .src-dot.am { background: var(--orange); }
  .xchg .src-dot.mg { background: var(--magenta); }
  .xchg .src-dot.rs { background: var(--vpurple); }
  .xchg .src-name { font-family: var(--mono); font-size: 9px; letter-spacing: 0.02em; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s ease; flex: 1 1 auto; min-width: 0; }
  .xchg .src.hit { background: rgba(255,255,255,0.04); }
  .xchg .src.hit .src-dot { opacity: 1; }
  .xchg .src.hit .src-name { color: var(--text-soft); }
  .xchg .src .src-ping { margin-left: auto; font-family: var(--mono); font-size: 8px; color: var(--vpurple); opacity: 0; transition: opacity 0.3s ease; }
  .xchg .src.hit .src-ping { opacity: 1; }

  /* ─── MOBILE ≤640: one-screen fold — no tabs, no box, overlay in flow ─── */
  @media (max-width: 640px) {
    .xchg .scenario-tabs { display: none; }
    .xchg .scen-chip { display: inline-flex; }

    .xchg .stage { background: transparent; border: none; border-radius: 0; overflow: visible; }
    .xchg .call-strip { gap: 10px; padding: 9px 12px; background: rgba(17,17,20,0.92); border: 1px solid var(--line); border-radius: 12px; }
    .xchg .call-title { display: none; }
    .xchg .participants { gap: 9px; flex: 1 1 auto; justify-content: center; }
    .xchg .participants .pmeta { display: none; }
    .xchg .pavatar { width: 28px; height: 28px; font-size: 10px; }
    .xchg .conn-chip { font-size: 9px; padding: 4px 8px; }
    .xchg .rec { font-size: 9.5px; }

    .xchg .body-wrap { height: auto; display: flex; flex-direction: column; }
    .xchg .col-head { padding: 8px 4px 6px; font-size: 9px; border-bottom: none; }

    .xchg .feed {
      height: clamp(132px, calc(var(--foldH, 560px) - 276px), 170px);
      padding: 10px 12px;
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px);
      mask-image: linear-gradient(180deg, transparent 0, #000 26px);
    }
    .xchg .feed-inner { gap: 10px; }
    .xchg .utt { max-width: 100%; gap: 8px; }
    .xchg .utt-avatar { width: 22px; height: 22px; font-size: 8px; margin-top: 1px; }
    .xchg .utt-name { font-size: 10.5px; }
    .xchg .utt-role, .xchg .utt-time { display: none; }
    .xchg .utt.now .utt-text { font-size: 12.5px; line-height: 1.5; }
    .xchg .utt.recent .utt-text { font-size: 11px; }
    .xchg .utt.old .utt-text, .xchg .utt.history .utt-text { font-size: 10px; }

    .xchg .voverlay {
      position: static;
      width: auto;
      margin: 2px 8px 8px;
      max-height: none !important;
      border-radius: 12px;
      backdrop-filter: none;
      background: rgba(17,17,20,0.96);
    }
    .xchg .drag-chip { display: none; }
    .xchg .vhead { cursor: default; padding: 7px 12px 6px; }
    .xchg .vticker { padding: 4px 12px; min-height: 20px; }
    .xchg .vbody {
      padding: 8px 12px;
      gap: 7px;
      min-height: 60px;
      max-height: max(60px, calc(var(--foldH, 560px) - 348px));
    }
    .xchg .vcard, .xchg .se-answer { padding: 9px 11px; }
    .xchg .vcard-body { font-size: 11.5px; line-height: 1.5; }
    .xchg .vcard-why { display: none; }
    .xchg .vcard-src {
      margin-top: 7px;
      padding: 5px 8px;
      font-size: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .xchg .outcome { padding: 11px 12px; font-size: 9.5px; }
    .xchg .signal { font-size: 8px; padding: 6px 8px; }

    .xchg .sources {
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 6px 12px 8px;
    }
    .xchg .sources::-webkit-scrollbar { display: none; }
    .xchg .sources-label { margin-bottom: 0; flex: 0 0 auto; }
    .xchg .sources > .src { margin: 0; }
    .xchg .src { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; gap: 6px; }
    .xchg .src-name { max-width: 130px; font-size: 8.5px; }
    .xchg .src .src-ping { display: none; }
    .xchg .src.hit { border-color: rgba(139,124,255,0.45); }
  }
/* New-page layout. Every value reuses a token or a number already in index.html
   (line refs are to D:\Veracity-Website-temp\index.html). */

/* Hidden "V" so search engines read "Veracity" in the logo; looks identical. */
.vh { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* Footer with a fifth column (base grid :4378-4384, phone rule :4427-4430) */
.bf-grid.bf-grid-5 { grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; }
@media (max-width: 800px) { .bf-grid.bf-grid-5 { grid-template-columns: 1fr 1fr; } }

/* Page column: same width as the FAQ column (.faq max-width 760px, :4436) */
.pg { position: relative; z-index: 5; max-width: 980px; margin: 0 auto; padding: 132px 24px 40px; }
.pg-crumbs { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); text-align: center; margin-bottom: 26px; }
.pg-crumbs a { color: var(--text-mute); text-decoration: none; transition: color 0.2s ease; }
.pg-crumbs a:hover { color: var(--text); }
.pg-crumbs span { margin: 0 8px; color: var(--text-fade); }
.pg .px-header { margin-bottom: 22px; }
.pg .px-sub { max-width: 660px; }
.pg-byline { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-mute); text-align: center; margin-bottom: 30px; }
.pg-cta { margin-bottom: 84px; }

.pg-sec { max-width: 760px; margin: 0 auto 64px; }
.pg-sec.wide { max-width: 980px; }
.pg-sec .px-eyebrow { margin-bottom: 12px; }
.pg-sec h2 { font-family: var(--sans); font-weight: 600; font-size: 22px; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 14px; }
.pg-sec p, .pg-sec li { font-size: 14.5px; line-height: 1.6; color: var(--text-soft); letter-spacing: -0.005em; }
.pg-sec p + p { margin-top: 12px; }
.pg-sec strong { color: var(--text); font-weight: 600; }
.pg-sec a { color: var(--accent); text-decoration: none; }
.pg-list { list-style: none; margin-top: 12px; }
.pg-list li { position: relative; padding-left: 18px; margin-bottom: 10px; }
.pg-list li::before { content: '/'; position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 12px; color: var(--accent); }

/* Table card: surface + hairline of .step (:3030-3044) */
.pg-table-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow-x: auto; }
.pg-table-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(147,212,255,0.4), transparent); }
.pg-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.pg-table th { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.pg-table th.us { color: var(--accent); }
.pg-table td { font-size: 13.5px; line-height: 1.55; color: var(--text-soft); padding: 15px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pg-table tr:last-child td { border-bottom: none; }
.pg-table td:first-child { color: var(--text); font-weight: 600; width: 150px; }
.pg-table a { color: var(--accent); text-decoration: none; }

/* Two cards side by side, using .step (:3030) */
.pg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pg-stack { display: grid; gap: 16px; }
.pg .step { padding: 30px 28px 32px; }
.pg .step-num { margin-bottom: 16px; }
.pg .step .pg-list { margin-top: 4px; }
.pg .step .pg-list li { font-size: 14.5px; line-height: 1.55; color: var(--text-soft); }
@media (max-width: 760px) { .pg-two { grid-template-columns: 1fr; } }

/* Worked example */
.pg-example { margin: 4px 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-left: 2px solid rgba(139,124,255,0.55); border-radius: 10px; background: var(--surface-up); }
.pg-example .who { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); margin: 6px 0 4px; }
.pg-example .who:first-child { margin-top: 0; }
.pg-example p { font-size: 14.5px; color: var(--text); }

/* Related links: the .faq-item surface (:4441) */
.pg-related { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pg-related a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; color: var(--text); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; transition: border-color 0.3s ease; }
.pg-related a:hover { border-color: rgba(139,124,255,0.35); }
.pg-related a span { font-family: var(--mono); color: var(--text-mute); }
@media (max-width: 640px) { .pg-related { grid-template-columns: 1fr; } }

.pg-sources { max-width: 760px; margin: 0 auto 40px; font-family: var(--mono); font-size: 11px; line-height: 1.8; color: var(--text-mute); letter-spacing: 0.02em; word-break: break-word; }
.pg-sources a { color: var(--text-mute); }

@media (max-width: 640px) { .pg { padding-top: 112px; } .pg-cta { margin-bottom: 64px; } }

/* White pill at the purple button's height (.nav-cta :152-167 + .demo-cta height :326-348) */
.pg-pill { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--black); background: var(--text); border-radius: 100px; text-decoration: none; white-space: nowrap; transition: transform 0.2s, background 0.2s; }
.pg-pill:hover { background: #fff; transform: translateY(-1px); }
@media (max-width: 640px) { .pg-pill { width: 100%; max-width: 380px; height: 40px; font-size: 13.5px; } }

/* Clickable .step cards (homepage section + hubs) */
a.pg-card { display: flex; flex-direction: column; text-decoration: none; color: var(--text); transition: border-color 0.3s ease, transform 0.35s cubic-bezier(0.2,0.8,0.3,1); }
a.pg-card:hover { border-color: rgba(139,124,255,0.35); transform: translateY(-2px); }
.pg-more { margin-top: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.pg-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .pg-grid3 { grid-template-columns: 1fr; } }
.pg-faq-link { display: block; margin-top: 10px; color: var(--accent); text-decoration: none; font-weight: 600; }

/* Pricing card: .roi-card surface (:4253) */
.pg-price { position: relative; max-width: 520px; margin: 0 auto 28px; padding: 36px 32px 32px; background: var(--surface); border: 1px solid var(--line-bright); border-radius: 20px; text-align: center; }
.pg-price::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(139,124,255,0.6), transparent); }
.pg-price .amount { font-family: var(--sans); font-weight: 700; font-size: clamp(44px, 6vw, 64px); letter-spacing: -0.04em; line-height: 1; margin: 6px 0 6px; }
.pg-price .unit { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 22px; }
.pg-price .pg-list { text-align: left; margin: 0 auto 24px; max-width: 360px; }
.pg-price .pg-list li { font-size: 14.5px; color: var(--text-soft); }
.pg-field { display: block; width: 100%; height: 44px; margin: 0 0 10px; padding: 0 16px; background: var(--bg-up); border: 1px solid var(--line-bright); border-radius: 100px; color: var(--text); font-family: var(--sans); font-size: 14px; }
.pg-field::placeholder { color: var(--text-mute); }
.pg-price .demo-cta { width: 100%; margin-top: 6px; }
.pg-fine { font-size: 12.5px; color: var(--text-mute); margin-top: 12px; line-height: 1.5; }

/* Fact block on /about */
.pg-facts { display: grid; grid-template-columns: 160px 1fr; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.pg-facts div { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--text-soft); }
.pg-facts div:nth-child(odd) { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); padding-top: 17px; }
.pg-facts div:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 640px) { .pg-facts { grid-template-columns: 1fr; } .pg-facts div:nth-child(odd) { border-bottom: none; padding-bottom: 0; } }

/* ═══════════════════════════════════════════════════════════════
   Page system v2. Built from the homepage's own pieces: the gradient
   frames and dark overlay panels of "5 Primary differentiators"
   (.viz-clair-frame / .viz-proactive), the transcript highlights (.hl-*),
   the FAQ accordion, the purple and white buttons. No new colors or fonts.
   ═══════════════════════════════════════════════════════════════ */

.qp { position: relative; z-index: 5; max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* Shared type */
.qp-h2 { font-family: var(--sans); font-weight: 700; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -0.03em; color: var(--text); margin-bottom: 16px; text-wrap: balance; }
.qp-h2-lg { font-size: clamp(36px, 4vw, 56px); letter-spacing: -0.035em; }
.qp-p { font-size: 16px; line-height: 1.6; color: var(--text-soft); letter-spacing: -0.005em; max-width: 36em; }
.qp-p + .qp-p { margin-top: 14px; }
.qp-p a, .qp-swap-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(147,212,255,0.35); }

/* Hero */
.qp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 64px; align-items: center; padding: 168px 0 128px; }
.qp-crumbs { font-size: 13px; color: var(--text-mute); margin-bottom: 22px; }
.qp-crumbs a { color: var(--text-soft); text-decoration: none; }
.qp-crumbs a:hover { color: var(--text); }
.qp-crumbs span { margin: 0 10px; color: var(--text-fade); }
.qp-title { font-family: var(--sans); font-weight: 700; font-size: clamp(40px, 4.2vw, 58px); line-height: 1.0; letter-spacing: -0.04em; color: var(--text); margin-bottom: 24px; text-wrap: balance; }
.qp-lede { font-size: 18px; line-height: 1.55; color: var(--text-soft); letter-spacing: -0.01em; max-width: 31em; margin-bottom: 18px; }
.qp-byline { font-size: 13px; color: var(--text-mute); margin-bottom: 32px; }
.qp-hero .cta-pair { justify-content: flex-start; margin: 0; }

/* Product frame: same recipe as .viz-clair-frame */
.vg-frame { position: relative; margin: 0; padding: 34px; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset; }
.vg-frame::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 20%, rgba(255,255,255,0.20), transparent 55%); pointer-events: none; }
.vg-purple { background: var(--grad-purple); }
.vg-blue { background: var(--grad-blue); }
.vg-pink { background: var(--grad-pink); }
.vg-cyan { background: var(--grad-cyan); }
.vg-panel { position: relative; z-index: 1; background: #050507; border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 16px 18px 18px; }
.vg-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.vg-live { display: inline-flex; align-items: center; gap: 7px; color: #C9F7CB; }
.vg-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.vg-cap { position: relative; z-index: 1; margin-top: 16px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.86); }

/* Transcript lines */
.vg-utt { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.vg-who { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--purple); padding-top: 5px; }
.vg-you .vg-who { color: var(--green); }
.vg-utt p { font-size: 15px; line-height: 1.6; color: var(--text); letter-spacing: -0.01em; }
.vg-them p { color: #DADAE0; }

/* The question card: same build as the homepage's "Ask next" card */
.vg-ask { border: 1px solid rgba(147,212,255,0.32); border-left: 3px solid var(--accent); border-radius: 8px; background: linear-gradient(180deg, rgba(147,212,255,0.10), rgba(147,212,255,0.02)); padding: 12px 14px 13px; }
.vg-ask-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bg); background: var(--accent); padding: 3px 8px 3px 6px; border-radius: 100px; }
.vg-ask-tag::before { content: '↗'; font-size: 10px; }
.vg-ask p { font-size: 16.5px; line-height: 1.45; font-weight: 500; letter-spacing: -0.015em; color: var(--text); margin: 9px 0 12px; }
.vg-built { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--text-mute); }
.vg-built span { display: inline-flex; align-items: center; gap: 6px; }
.vg-built i, .qp-brief-h i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.vg-built i { background: var(--text-mute); }
.c-cy { background: var(--cyan); }
.c-am { background: var(--orange); }

/* Answers from the rep's docs */
.vg-answer { margin: -4px 0 18px 52px; padding: 12px 14px; border: 1px solid rgba(147,212,255,0.26); border-radius: 8px; background: rgba(147,212,255,0.05); }
.vg-answer p { font-size: 14.5px; line-height: 1.55; color: var(--text); letter-spacing: -0.01em; }
.vg-cite { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--accent); border: 1px solid rgba(147,212,255,0.3); border-radius: 100px; padding: 3px 9px; }
.vg-cite::before { content: '↳ '; }
.vg-answer-miss { margin-bottom: 0; border-color: rgba(245,166,35,0.32); background: rgba(245,166,35,0.06); }
.vg-answer-miss p { color: #FFE3B8; }

/* One load sequence for the hero: the answer lands, its key phrases light up, the question arrives */
.vg-ignite { animation: vgIgnite 0.7s ease var(--d, 1s) both; }
.vg-rise { animation: vgRise 0.6s cubic-bezier(0.2,0.8,0.3,1) var(--d, 2s) both; }
@keyframes vgIgnite { from { background: transparent; border-bottom-color: transparent; color: inherit; } }
@keyframes vgRise { from { opacity: 0; transform: translateY(10px); } }

/* Before the call */
.qp-brief { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; padding: 24px 0 140px; }
.qp-brief-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.qp-brief-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(147,212,255,0.4), transparent); }
.qp-brief-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.qp-brief-head span { font-size: 13px; font-weight: 400; color: var(--text-mute); }
.qp-brief-cols { display: grid; grid-template-columns: 1fr 1fr; }
.qp-brief-cols > div { padding: 22px 24px 14px; }
.qp-brief-cols > div + div { border-left: 1px solid var(--line); }
.qp-brief-h { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.qp-brief-cols ul { list-style: none; }
.qp-brief-cols li { font-size: 14.5px; line-height: 1.5; color: var(--text-soft); padding: 10px 0; border-top: 1px solid var(--line); }
.qp-brief-cols li:first-child { border-top: none; }
.qp-brief-open { padding: 18px 24px 20px; border-top: 1px solid var(--line); background: linear-gradient(90deg, rgba(147,212,255,0.07), transparent 70%); font-size: 17px; line-height: 1.45; font-weight: 500; letter-spacing: -0.015em; color: var(--text); }
.qp-brief-open span { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--accent); margin-bottom: 6px; }

/* The call, in order */
.qp-call { padding: 0 0 120px; }
.qp-call-head { max-width: 700px; margin-bottom: 48px; }
.qp-stages { list-style: none; }
.qp-stage { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; padding: 48px 0; border-top: 1px solid var(--line); }
.qp-stage-side { position: sticky; top: 112px; align-self: start; }
.qp-stage-n { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 18px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-up); font-size: 14px; font-weight: 600; color: var(--text); }
.qp-stage-t { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; color: var(--text); margin-bottom: 10px; }
.qp-stage-why { font-size: 15px; line-height: 1.55; color: var(--text-soft); }
.qp-qs { list-style: none; }
.qp-qs li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.qp-qs li:first-child { padding-top: 4px; }
.qp-qs span { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.4; font-weight: 500; letter-spacing: -0.018em; color: var(--text); text-wrap: pretty; }
.qp-copy { flex: none; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--text-soft); background: none; border: 1px solid var(--line-bright); border-radius: 100px; padding: 5px 12px; cursor: pointer; opacity: 0; transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.qp-qs li:hover .qp-copy, .qp-copy:focus-visible, .qp-copy.done { opacity: 1; }
.qp-copy:hover { color: var(--text); border-color: var(--line-strong); }
.qp-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qp-copy.done { color: var(--green); border-color: rgba(110,232,114,0.4); }
@media (hover: none) { .qp-copy { opacity: 1; } }
.qp-ex { margin-top: 28px; padding: 18px 20px 4px; background: var(--bg-up); border: 1px solid var(--line); border-radius: 14px; }
.qp-ex-move { font-size: 12.5px; font-weight: 600; color: var(--accent); margin-bottom: 14px; }
.qp-ex .vg-utt p { font-size: 15.5px; }

/* Weaker vs stronger */
.qp-swap { padding: 0 0 140px; }
.qp-swap-head { max-width: 640px; margin-bottom: 36px; }
.qp-swap-list { border-top: 1px solid var(--line); }
.qp-swap-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.qp-swap-weak { padding: 26px 40px 26px 0; }
.qp-swap-why { display: block; font-size: 12.5px; font-weight: 600; color: var(--red); margin-bottom: 8px; }
.qp-swap-weak s { font-size: 18px; line-height: 1.4; color: var(--text-mute); text-decoration-color: rgba(255,122,107,0.55); text-decoration-thickness: 1.5px; }
.qp-swap-strong { position: relative; display: flex; align-items: flex-end; padding: 26px 0 26px 40px; border-left: 1px solid var(--line); font-size: 18px; line-height: 1.4; font-weight: 500; letter-spacing: -0.015em; color: var(--text); }
.qp-swap-strong::before { content: '→'; position: absolute; left: -13px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg); font-size: 12px; color: var(--accent); }
.qp-swap-note { margin-top: 24px; font-size: 15px; line-height: 1.55; color: var(--text-soft); }

/* Words on one side, the product on the other (the homepage's .why-card rhythm) */
.qp-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 80px; align-items: center; padding: 0 0 140px; }
.qp-feature.rev { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
.qp-feature.rev > :first-child { order: 2; }

/* FAQ and other seats */
.qp-faq { max-width: 820px; padding: 0 0 120px; }
.qp-faq .qp-h2 { margin-bottom: 28px; }
.qp-seats { padding: 0 0 140px; }
.qp-seats .qp-h2 { margin-bottom: 28px; }
.qp-seat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.qp-seat { display: flex; flex-direction: column; gap: 14px; min-height: 200px; padding: 22px 22px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--text); transition: border-color 0.3s ease; }
.qp-seat:hover { border-color: rgba(139,124,255,0.35); }
.qp-seat:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.qp-seat-t { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.qp-seat-q { flex: 1; font-size: 15px; line-height: 1.5; color: var(--text-soft); }
.qp-seat-s { font-size: 12.5px; font-weight: 600; color: var(--text-mute); }
.qp-seat-s.is-live { color: var(--accent); }

@media (max-width: 1000px) {
  .qp-hero, .qp-feature, .qp-feature.rev { grid-template-columns: 1fr; gap: 48px; }
  .qp-feature.rev > :first-child { order: 0; }
  .qp-hero { padding: 136px 0 96px; }
  .qp-brief { grid-template-columns: 1fr; gap: 28px; padding-bottom: 104px; }
  .qp-stage { grid-template-columns: 1fr; gap: 22px; padding: 40px 0; }
  .qp-stage-side { position: static; }
  .qp-seat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .qp { padding: 0 16px; }
  .qp-hero { padding-top: 112px; }
  .vg-frame { padding: 16px; border-radius: 20px; }
  .vg-panel { padding: 14px 14px 16px; }
  .vg-utt { grid-template-columns: 1fr; gap: 4px; }
  .vg-who { padding-top: 0; }
  .vg-answer { margin-left: 0; }
  .qp-brief-cols { grid-template-columns: 1fr; }
  .qp-brief-cols > div + div { border-left: none; border-top: 1px solid var(--line); }
  .qp-qs li { flex-direction: column; gap: 10px; }
  .qp-swap-row { grid-template-columns: 1fr; }
  .qp-swap-weak { padding: 22px 0 14px; }
  .qp-swap-strong { padding: 0 0 22px; border-left: none; }
  .qp-swap-strong::before { display: none; }
  .qp-seat-grid { grid-template-columns: 1fr; }
  .qp-seat { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-ignite, .vg-rise { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Page system v2, part 2: the other page types. Same rules: site
   tokens and the homepage's own pieces only. Every product panel
   below draws a screen that is live today (features doc, Oct 9).
   ═══════════════════════════════════════════════════════════════ */

.qp-sec { padding: 0 0 140px; }
.qp-head { max-width: 700px; margin-bottom: 44px; }
.qp-points { list-style: none; margin-top: 26px; border-top: 1px solid var(--line); max-width: 36em; }
.qp-points li { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--text-soft); }
.qp-points b { display: block; margin-bottom: 3px; font-weight: 600; color: var(--text); }
.qp-sources { max-width: 820px; padding: 0 0 72px; font-size: 12.5px; line-height: 1.8; color: var(--text-mute); }
.qp-sources a { color: var(--text-mute); }

/* Heading on the left, content on the right (the stage layout, reused) */
.qp-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 64px; padding: 0 0 140px; }
.qp-split > :first-child { position: sticky; top: 112px; align-self: start; }
.qp-num { list-style: none; counter-reset: qn; border-top: 1px solid var(--line); }
.qp-num li { counter-increment: qn; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.qp-num li::before { content: counter(qn); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-up); font-size: 14px; font-weight: 600; color: var(--text); }
.qp-num b { display: block; margin: 5px 0 6px; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--text); }
.qp-num span { display: block; font-size: 15.5px; line-height: 1.6; color: var(--text-soft); max-width: 40em; }
.qp-num a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(147,212,255,0.35); }

/* The overlay as the rep sees it: pill, mode chip, meeting clock, phase strip, coach bar */
.vg-ov-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.vg-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 100px; background: rgba(255,255,255,0.06); border: 1px solid var(--line-bright); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.vg-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: vgPulse 2s ease-in-out infinite; }
@keyframes vgPulse { 50% { opacity: 0.35; } }
.vg-mode { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--accent); background: var(--blue-dim); border: 1px solid rgba(147,212,255,0.3); padding: 4px 8px; border-radius: 5px; }
.vg-mode.am { color: #F5BC75; background: rgba(245,188,117,0.1); border-color: rgba(245,188,117,0.35); }
.vg-clock { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--text-mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vg-clock b { font-weight: 500; color: var(--text); }
.vg-phase { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 18px; }
.vg-phase span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 7px; border-top: 2px solid rgba(255,255,255,0.08); font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-fade); }
.vg-phase .done { color: var(--text-mute); border-top-color: rgba(147,212,255,0.35); }
.vg-phase .on { color: var(--accent); border-top-color: var(--accent); }
.vg-ov-body { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 14px; }
.vg-coach { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,0.02); }
.vg-coach b { font-size: 16px; font-weight: 700; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.vg-coach-bar { flex: 1; width: 3px; min-height: 60px; border-radius: 3px; background: linear-gradient(to top, var(--accent) var(--v, 50%), rgba(255,255,255,0.08) var(--v, 50%)); }
.vg-coach span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); }

/* Question card states: the instant question, then the evolved one that replaces it in place */
.vg-ask-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.vg-ask-meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.02em; color: var(--text-mute); text-align: right; }
.vg-ask-ev { border-color: rgba(110,232,114,0.34); border-left-color: var(--green); background: linear-gradient(180deg, rgba(110,232,114,0.10), rgba(110,232,114,0.02)); }
.vg-ask-ev .vg-ask-tag { background: var(--green); }
.vg-ask u { text-decoration: underline; text-decoration-color: rgba(110,232,114,0.8); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.vg-ask p:last-child { margin-bottom: 0; }
.vg-ask + .vg-utt { margin-top: 18px; }
.vg-then { margin: 10px 0 10px 4px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--text-mute); }
.vg-dim { animation: vgDim 0.5s ease var(--d2, 3s) forwards; }
.vg-rise.vg-dim { animation: vgRise 0.6s cubic-bezier(0.2,0.8,0.3,1) var(--d, 2s) both, vgDim 0.5s ease var(--d2, 3s) forwards; }
@keyframes vgDim { to { opacity: 0.42; } }

/* The answer card: what they said, the line to say, and where it came from */
.vg-said { margin-bottom: 12px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); font-size: 14px; line-height: 1.5; color: #DADAE0; }
.vg-k { display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); }
.vg-say { position: relative; padding: 12px 14px 13px 16px; border-radius: 8px; border: 1px solid rgba(245,188,117,0.32); border-left: 3px solid #F5BC75; background: linear-gradient(180deg, rgba(245,188,117,0.10), rgba(245,188,117,0.02)); }
.vg-say .vg-k { color: #F5BC75; }
.vg-say p { padding-right: 52px; font-size: 16px; line-height: 1.45; font-weight: 500; letter-spacing: -0.015em; color: var(--text); }
.vg-say-copy { position: absolute; top: 10px; right: 10px; padding: 3px 7px; border-radius: 5px; border: 1px solid var(--line-bright); font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-soft); }
.vg-ties { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.vg-ties p { font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }
.vg-ties .vg-cite { margin-top: 8px; }

/* Sources feeding answers */
.vg-docs { list-style: none; }
.vg-docs li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text); }
.vg-docs li:last-child { border-bottom: none; }
.vg-docs span { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--text-mute); }
.vg-docs b { font-weight: 500; }
.vg-docs i { display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--green); vertical-align: 1px; }

/* Live notes */
.vg-notes-sec + .vg-notes-sec { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.vg-m { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 6px 0; }
.vg-m b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent); font-family: var(--mono); font-size: 10.5px; color: var(--bg); }
.vg-m span { font-size: 13px; line-height: 1.45; color: var(--text); }
.vg-m em { display: block; font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
.vg-m.open b { background: transparent; border: 1px dashed var(--line-strong); color: var(--text-mute); }
.vg-m.open span { color: var(--text-mute); }
.vg-notes-sec ul { list-style: none; }
.vg-notes-sec li { position: relative; padding: 4px 0 4px 14px; font-size: 13px; line-height: 1.45; color: var(--text-soft); }
.vg-notes-sec li::before { content: ''; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-mute); }

/* Screen share: your screen vs theirs */
.vg-screens { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vg-screen { padding: 10px; border-radius: 10px; border: 1px solid var(--line-bright); background: #0B0B10; }
.vg-screen .vg-k { margin-bottom: 8px; }
.vg-scr { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; background: linear-gradient(160deg, #1C1C24, #111114); overflow: hidden; }
.vg-scr::before { content: ''; position: absolute; left: 10%; right: 38%; top: 14%; height: 8%; border-radius: 3px; background: rgba(255,255,255,0.08); box-shadow: 0 18px 0 rgba(255,255,255,0.05), 0 36px 0 rgba(255,255,255,0.05), 0 54px 0 rgba(255,255,255,0.05); }
.vg-scr-ov { position: absolute; right: 7%; top: 12%; bottom: 12%; width: 30%; padding: 6px; border-radius: 6px; border: 1px solid rgba(147,212,255,0.4); background: rgba(5,5,7,0.92); }
.vg-scr-ov::before { content: ''; display: block; height: 22%; border-radius: 3px; border-left: 2px solid var(--green); background: rgba(110,232,114,0.18); }
.vg-scr-ov::after { content: ''; display: block; height: 14%; margin-top: 8%; border-radius: 3px; background: rgba(255,255,255,0.08); }
.vg-screen p { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--text-soft); }

/* Call prep: role briefing, Deal so far */
.vg-intel { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 14px; }
.vg-intel h4 { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--text); }
.vg-intel h4 i { width: 6px; height: 6px; border-radius: 50%; }
.vg-intel ul { list-style: none; }
.vg-intel li { padding: 7px 0; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.45; color: var(--text-soft); }
.vg-deal { margin-bottom: 14px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-bright); background: rgba(255,255,255,0.03); }
.vg-deal-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--text); }
.vg-switch { position: relative; flex: none; width: 24px; height: 13px; border-radius: 13px; background: rgba(110,232,114,0.35); }
.vg-switch::after { content: ''; position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.vg-dates { margin-bottom: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.02em; color: var(--text-mute); }
.vg-deal p { font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }

/* After the call: the homepage's recap panel (.dissect-*), sized up, plus the Vera Score ladder */
.vg-panel .dissect-score-row { margin-bottom: 14px; }
.vg-panel .dissect-utt { font-size: 14px; }
.vg-panel .dissect-note { margin: 6px 0 14px 0; font-size: 13px; line-height: 1.5; }
.vg-panel .dissect-note:last-child { margin-bottom: 0; }
.dissect-delta.up { color: var(--green); background: rgba(110,232,114,0.08); border-color: rgba(110,232,114,0.3); }
.vg-try { display: block; margin-top: 6px; color: #93D4FF; }
.vg-score-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vg-score-top b { font-size: 15px; font-weight: 600; color: var(--text); }
.vg-score-top span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: #F5BC75; }
.vg-ladder { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; margin: 18px 0 10px; }
.vg-ladder i { height: 8px; border-radius: 3px; background: rgba(255,255,255,0.08); }
.vg-ladder i.on { background: var(--accent); box-shadow: 0 0 12px rgba(147,212,255,0.55); }
.vg-ladder-ends { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--text-mute); }
.vg-ladder-ends span:last-child { text-align: right; }
.vg-focus { margin-top: 18px; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(147,212,255,0.26); background: rgba(147,212,255,0.05); font-size: 14.5px; line-height: 1.45; font-weight: 500; color: var(--text); }

/* Where a call goes */
.vg-flow-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vg-node { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-bright); background: rgba(255,255,255,0.03); font-size: 13.5px; line-height: 1.45; color: var(--text-soft); }
.vg-node b { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 600; color: var(--text); }
.vg-node.keep { border-color: rgba(110,232,114,0.34); background: rgba(110,232,114,0.06); }
.vg-node.drop { border-color: rgba(255,122,107,0.34); background: rgba(255,122,107,0.06); }
.vg-node.keep .vg-k { color: var(--green); }
.vg-node.drop .vg-k { color: var(--red); }
.vg-arrow { display: grid; place-items: center; height: 30px; font-size: 13px; color: var(--text-mute); }

/* The consent check before every call */
.vg-consent { padding: 20px; border-radius: 12px; border: 1px solid var(--line-bright); background: var(--surface); }
.vg-consent h4 { margin-bottom: 14px; font-size: 15px; font-weight: 600; color: var(--text); }
.vg-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(147,212,255,0.3); background: rgba(147,212,255,0.05); font-size: 14px; line-height: 1.45; color: var(--text); }
.vg-check i { flex: none; display: grid; place-items: center; width: 17px; height: 17px; margin-top: 1px; border-radius: 4px; background: var(--accent); font-style: normal; font-size: 11px; font-weight: 700; color: var(--bg); }
.vg-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.vg-btn { padding: 7px 14px; border-radius: 100px; border: 1px solid var(--line-bright); font-size: 12.5px; font-weight: 600; color: var(--text-soft); }
.vg-btn.go { border-color: transparent; background: var(--green); color: var(--bg); }
.vg-consent-p { margin: -4px 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-soft); }

/* When each tool helps: before, during and after the call */
.vg-lanes-head, .vg-lane { display: grid; grid-template-columns: 76px minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 1.2fr); gap: 6px; }
.vg-lanes-head { margin-bottom: 10px; }
.vg-lanes-head span { padding-bottom: 8px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.vg-lanes-head span:first-child { border-bottom: none; }
.vg-lane + .vg-lane { margin-top: 8px; }
.vg-lane-name { align-self: center; font-size: 13px; font-weight: 600; color: var(--text); }
.vg-seg { padding: 10px; border-radius: 8px; border: 1px solid rgba(147,212,255,0.32); background: rgba(147,212,255,0.10); font-size: 12px; line-height: 1.35; color: var(--text); }
.vg-seg.them { border-color: var(--line-bright); background: rgba(255,255,255,0.05); color: var(--text-soft); }
.vg-seg.none { border: 1px dashed var(--line); background: none; }

/* Price board */
.vg-prices { list-style: none; }
.vg-prices li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; align-items: baseline; padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--text); }
.vg-prices li:last-child { border-bottom: none; }
.vg-prices span { text-align: right; font-family: var(--mono); font-size: 11px; font-weight: 400; line-height: 1.5; color: var(--text-soft); }
.vg-prices .us { margin: 0 -10px; padding: 11px 12px; border-radius: 8px; border-bottom-color: transparent; background: rgba(147,212,255,0.08); box-shadow: inset 0 0 0 1px rgba(147,212,255,0.28); }
.vg-prices .us span { color: var(--accent); }

/* Pack card (pricing) */
.vg-pack-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vg-pack-top b { font-size: 15px; font-weight: 600; color: var(--text); }
.vg-pack-top span { padding: 3px 8px; border-radius: 100px; border: 1px solid rgba(245,188,117,0.4); font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: #F5BC75; }
.vg-pack-amt { margin: 18px 0 6px; font-size: 68px; font-weight: 700; line-height: 1; letter-spacing: -0.045em; color: var(--text); }
.vg-pack-unit { margin-bottom: 18px; font-size: 14.5px; color: var(--text-soft); }
.vg-pack ul { list-style: none; margin-bottom: 18px; border-top: 1px solid var(--line); }
.vg-pack li { position: relative; padding: 9px 0 9px 24px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--text); }
.vg-pack li::before { content: '✓'; position: absolute; left: 0; top: 9px; font-size: 12px; color: var(--green); }
.vg-pack .pg-field { height: 42px; background: rgba(255,255,255,0.04); }
.vg-pack .demo-cta { width: 100%; margin-top: 4px; }
.vg-pack-fine { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-mute); }

/* Fact sheet (about) */
.vg-facts { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
.vg-facts dt, .vg-facts dd { padding: 10px 0; border-top: 1px solid var(--line); }
.vg-facts dt { padding-top: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.vg-facts dd { font-size: 14px; line-height: 1.45; color: var(--text); }
.vg-facts dt:first-of-type, .vg-facts dd:first-of-type { border-top: none; }

/* One call, three moments (use-cases hub) */
.vg-moment + .vg-moment { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.vg-ask.is-planned { opacity: 0.55; }
.vg-moment .vg-intel { margin-bottom: 0; }
.vg-moment .vg-k { display: flex; justify-content: space-between; gap: 12px; }

/* Comparison table */
.qp-vs { width: 100%; border-collapse: collapse; }
.qp-vs th { padding: 0 28px 16px 0; border-bottom: 1px solid var(--line-strong); text-align: left; vertical-align: bottom; font-size: 13.5px; font-weight: 600; color: var(--text-mute); }
.qp-vs th.us { color: var(--text); }
.qp-vs th.us::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); vertical-align: 1px; }
.qp-vs td { padding: 20px 28px 20px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; line-height: 1.55; color: var(--text-soft); }
.qp-vs th:first-child, .qp-vs td:first-child { width: 180px; }
.qp-vs td:first-child { font-weight: 600; color: var(--text); }
.qp-vs td.us { color: var(--text); }
.qp-vs tr.us td { background: linear-gradient(90deg, rgba(147,212,255,0.06), transparent 85%); }
.qp-vs tr.us td:first-child { box-shadow: inset 2px 0 0 var(--accent); padding-left: 14px; }
.qp-src { font-size: 12.5px; color: var(--text-mute); white-space: nowrap; }
.qp-src a { color: var(--text-mute); }

/* Who should pick which */
.qp-pick { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-strong); }
.qp-pick > div { padding: 32px 40px 0 0; }
.qp-pick > div + div { padding: 32px 0 0 40px; border-left: 1px solid var(--line); }
.qp-pick h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.qp-pick h3 i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-mute); }
.qp-pick .us h3 i { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.qp-pick ul { list-style: none; }
.qp-pick li { position: relative; padding: 14px 0 14px 26px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--text-soft); }
.qp-pick li::before { content: '→'; position: absolute; left: 0; top: 14px; color: var(--text-mute); }
.qp-pick .us li { color: var(--text); }
.qp-pick .us li::before { color: var(--accent); }

/* Before, on and after the call (hubs, pricing, about, homepage) */
.qp-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.qp-phase { position: relative; padding: 34px 32px 0 0; }
.qp-phase + .qp-phase { padding-left: 32px; border-left: 1px solid var(--line); }
.qp-phase::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent); background: var(--bg); }
.qp-phase + .qp-phase::before { left: 32px; }
.qp-phase.now::before { background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.qp-phase-k { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--accent); }
.qp-phase-t { margin-bottom: 18px; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; color: var(--text); text-wrap: balance; }
.qp-phase a, .qp-phase-i { display: block; padding: 16px 0; border-top: 1px solid var(--line); text-decoration: none; }
.qp-phase a b, .qp-phase-i b { display: flex; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.qp-phase a b::after { content: '→'; color: var(--text-mute); transition: transform 0.2s ease, color 0.2s ease; }
.qp-phase a:hover b::after { color: var(--accent); transform: translateX(3px); }
.qp-phase a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.qp-phase a span, .qp-phase-i span { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--text-soft); }

/* Hub index rows */
.qp-index { border-top: 1px solid var(--line-strong); }
.qp-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) 96px; gap: 40px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.qp-row-t { font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; transition: color 0.2s ease; }
.qp-row-t span { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--text-mute); }
.qp-row-q { font-size: 17px; line-height: 1.5; color: var(--text-soft); }
.qp-row-s { justify-self: end; font-size: 13px; font-weight: 600; color: var(--text-mute); }
a.qp-row .qp-row-s { color: var(--accent); }
a.qp-row:hover .qp-row-t { color: var(--accent); }
a.qp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.qp-row.planned .qp-row-t, .qp-row.planned .qp-row-q { color: var(--text-mute); }

/* Founder quote */
.qp-quote { font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; line-height: 1.3; letter-spacing: -0.025em; color: var(--text); text-wrap: balance; }
.qp-quote-by { margin: 20px 0 28px; font-size: 14px; color: var(--text-mute); }

/* Checked list in two columns */
.qp-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; list-style: none; border-top: 1px solid var(--line); }
.qp-checks li { position: relative; padding: 22px 0 22px 36px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--text-soft); }
.qp-checks li::before { content: '✓'; position: absolute; left: 0; top: 23px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-dim); font-size: 11px; color: var(--green); }
.qp-checks b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--text); }

/* Homepage strip: same phases, sized for the homepage */
.hp-phases { max-width: 1180px; margin: 0 auto; text-align: left; }
.hp-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 56px; }
.hp-more a { font-size: 14.5px; font-weight: 600; color: var(--accent); text-decoration: none; }

@media (max-width: 1000px) {
  .qp-split { grid-template-columns: 1fr; gap: 28px; padding-bottom: 104px; }
  .qp-split > :first-child { position: static; }
  .qp-phases { grid-template-columns: 1fr; border-top: none; }
  .qp-phase, .qp-phase + .qp-phase { padding: 30px 0 0 28px; border-left: 1px solid var(--line); }
  .qp-phase::before, .qp-phase + .qp-phase::before { top: 34px; left: -5px; }
  .qp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .qp-row-s { grid-column: 2; justify-self: start; }
}
@media (max-width: 760px) {
  .qp-vs thead { display: none; }
  .qp-vs, .qp-vs tbody, .qp-vs tr, .qp-vs td { display: block; width: auto; }
  .qp-vs tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .qp-vs th:first-child, .qp-vs td:first-child { width: auto; }
  .qp-vs td { padding: 4px 0; border-bottom: none; }
  .qp-vs td[data-col]::before { content: attr(data-col); display: block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text-mute); }
  .qp-vs td.us[data-col]::before { color: var(--accent); }
  .qp-vs tr.us td { background: none; }
  .qp-vs tr.us td:first-child { box-shadow: none; padding-left: 0; }
  .qp-vs tr.us { padding-left: 14px; box-shadow: inset 2px 0 0 var(--accent); }
  .qp-pick { grid-template-columns: 1fr; }
  .qp-pick > div, .qp-pick > div + div { padding: 28px 0 0; border-left: none; }
  .qp-pick > div + div { margin-top: 20px; border-top: 1px solid var(--line-strong); }
  .qp-checks { grid-template-columns: 1fr; }
  .qp-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .qp-row-s { grid-column: auto; }
  .vg-lanes-head { display: none; }
  .vg-lane { grid-template-columns: 1fr; gap: 6px; }
  .vg-lane + .vg-lane { margin-top: 18px; }
  .vg-seg[data-p]::before { content: attr(data-p); display: block; margin-bottom: 3px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
  .vg-seg.none { display: none; }
}
@media (max-width: 640px) {
  .qp-sec { padding-bottom: 104px; }
  .qp-num li { grid-template-columns: 1fr; gap: 10px; }
  .vg-intel, .vg-flow-row, .vg-screens { grid-template-columns: 1fr; }
  .vg-phase span { font-size: 7.5px; letter-spacing: 0.04em; }
  .vg-ov-top { flex-wrap: wrap; }
  .vg-pack-amt { font-size: 56px; }
  .vg-facts { grid-template-columns: 1fr; }
  .vg-facts dd { padding-top: 0; border-top: none; }
  .vg-prices li { grid-template-columns: 1fr; gap: 2px; }
  .vg-prices span { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-dim, .vg-rise.vg-dim { animation: none; opacity: 0.42; }
  .vg-pill i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Page system v3: one claim, one live moment. The hero follows the
   homepage's own pattern (centered headline, product underneath)
   and is the only gradient frame on the page.
   ═══════════════════════════════════════════════════════════════ */

/* Speaker labels in the product's colors: them green, you blue */
.vg-who { color: var(--green); }
.vg-you .vg-who { color: var(--accent); }

.qh { padding: 156px 0 120px; text-align: center; }
.qh .qp-crumbs { margin-bottom: 30px; }
.qh-h1 { max-width: 1000px; margin: 0 auto 26px; font-family: var(--sans); font-weight: 700; }
.qh-kicker { display: block; margin-bottom: 18px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-soft); }
.qh-claim { display: block; padding-bottom: 0.06em; font-size: clamp(42px, 5.6vw, 78px); line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; background: linear-gradient(180deg, #FAFAFA 30%, #9A9AA3 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.qh-lede { max-width: 640px; margin: 0 auto 30px; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; letter-spacing: -0.01em; color: var(--text-soft); }
.qh-by { margin: -14px auto 30px; font-size: 13px; color: var(--text-mute); }
.qh .cta-pair { justify-content: center; margin: 0; }
.qh-stage { max-width: 1180px; margin: 80px auto 0; text-align: left; }

/* The live stage: their words as captions, the overlay beside them */
.vs-frame { padding: 44px; border-radius: 32px; }
.vs-screen { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 26px 48px; align-items: start; min-height: 470px; padding: 22px 30px 30px 36px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.07); background: #050507; }
.vs-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text-mute); }
.vs-top b { font-weight: 600; color: var(--text-soft); }
.vs-top span:last-child { font-variant-numeric: tabular-nums; }
.vs-who { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); }
.vs-who i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.vs-cap { padding-bottom: 64px; font-size: clamp(24px, 2.5vw, 36px); font-weight: 500; line-height: 1.32; letter-spacing: -0.022em; color: var(--text); text-wrap: pretty; }
.vs-cap .w { transition: opacity 0.14s linear; }
.vs-cap .w.is-off { opacity: 0; }
.vs-cap .hl { transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease; }
.vs-cap .hl.is-off { background: transparent; border-bottom-color: transparent; color: inherit; }
.vs-replay { position: absolute; left: 36px; bottom: 28px; padding: 7px 15px; border-radius: 100px; border: 1px solid var(--line-bright); background: rgba(255,255,255,0.04); font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--text-soft); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; }
.vs-replay:hover { color: var(--text); border-color: var(--line-strong); }
.vs-replay:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vs-replay[hidden] { display: none; }

/* The overlay at the product's proportions (no shadow: overlay surfaces never get one) */
.vs-ov { padding: 14px 14px 16px; border-radius: 14px; border: 1px solid rgba(147,212,255,0.22); background: #0B0B10; }
.vs-ov .vg-ov-body { min-height: 236px; }
[data-show] { transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2,0.8,0.3,1); }
.vs-wait { opacity: 0; transform: translateY(8px); }
.vs-card.is-stamp { animation: vsStamp 0.75s ease both; }
@keyframes vsStamp {
  0% { opacity: 0.35; transform: scale(0.985); }
  45% { opacity: 1; transform: scale(1.015); box-shadow: 0 0 0 1px rgba(110,232,114,0.6), 0 0 34px rgba(110,232,114,0.35); }
  100% { transform: scale(1); }
}

/* Comparison stage: the same moment, during the call and after it */
.vs-split { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vs-side { padding: 18px 18px 20px; border-radius: 14px; border: 1px solid var(--line-bright); background: #0B0B10; }
.vs-side.us { border-color: rgba(147,212,255,0.32); }
.vs-when { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.vs-when b { font-size: 16px; font-weight: 600; color: var(--text); }
.vs-when span { font-size: 13px; color: var(--text-mute); }
.vs-side.us .vs-when span { color: var(--accent); }
.vs-side > p { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--text-soft); }
.vs-wave { display: flex; align-items: center; gap: 3px; height: 54px; padding: 0 2px; }
.vs-wave i { flex: 1; height: var(--h); border-radius: 2px; background: rgba(255,255,255,0.16); }
.vs-rec { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,0.03); font-size: 14px; color: var(--text); }
.vs-rec span { color: var(--text-mute); }

/* A claim with two halves (his launch line) */
.qs { padding: 0 0 140px; }
.qs-h2 { max-width: 14em; margin-bottom: 56px; font-size: clamp(34px, 4vw, 58px); font-weight: 700; line-height: 1.02; letter-spacing: -0.04em; color: var(--text); text-wrap: balance; }
.qs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.qs-col h3 { margin-bottom: 12px; font-size: 24px; font-weight: 700; letter-spacing: -0.025em; color: var(--text); }
.qs-col > p { max-width: 32em; margin-bottom: 28px; font-size: 16.5px; line-height: 1.6; color: var(--text-soft); }
.qs-panel { padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }

/* Quiet list: short items under one rule */
.ql { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 36px; border-top: 1px solid var(--line-strong); }
.ql > div { padding-top: 24px; }
.ql h3 { margin-bottom: 8px; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--text); }
.ql p { font-size: 15px; line-height: 1.55; color: var(--text-soft); }

/* One big line on its own */
.qb { max-width: 920px; padding: 0 0 140px; }
.qb p { font-size: clamp(26px, 2.8vw, 40px); font-weight: 600; line-height: 1.22; letter-spacing: -0.03em; color: var(--text); text-wrap: balance; }
.qb p + p { margin-top: 12px; color: var(--text-mute); }

@media (max-width: 1000px) {
  .vs-screen { grid-template-columns: 1fr; min-height: 0; }
  .vs-cap { padding-bottom: 0; }
  .vs-replay { position: static; justify-self: start; }
  .qs-cols { grid-template-columns: 1fr; gap: 56px; }
  .ql { grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .ql > div { padding-bottom: 28px; }
}
@media (max-width: 640px) {
  .qh { padding: 116px 0 96px; }
  .qh-kicker { font-size: 15px; margin-bottom: 12px; }
  .qh-stage { margin-top: 56px; }
  .vs-frame { padding: 14px; border-radius: 22px; }
  .vs-screen { padding: 16px; gap: 18px; }
  .vs-top { flex-direction: column; align-items: flex-start; gap: 4px; }
  .vs-split { grid-template-columns: 1fr; }
  .ql { grid-template-columns: 1fr; }
  .qs, .qb { padding-bottom: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-card.is-stamp { animation: none; }
  [data-show] { transition: none; }
}

/* Below the hero, product moments sit on quiet surfaces. The hero stage is the page's one gradient. */
.vg-frame:not(.qh-stage) { padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: none; }
.vg-frame:not(.qh-stage)::before { display: none; }
.vg-frame:not(.qh-stage) .vg-cap { color: var(--text-mute); }

/* Card controls under the question, as the product shows them */
.vg-ctrls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vg-ctrls span { padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }

/* The rep's question just before their answer */
.vs-prev { margin-bottom: 22px; font-size: 16px; line-height: 1.5; color: var(--text-mute); }
.vs-prev b { margin-right: 8px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

/* Stage content that isn't a live caption: a prep screen, a recap, a price board */
.vs-wide { grid-column: 1 / -1; }
.vs-col { min-width: 0; }
.vs-screen.calm { min-height: 0; }
.vs-big .vg-prices li { padding: 14px 4px; font-size: 16px; }
.vs-big .vg-prices span { font-size: 12.5px; }
.vs-big .dissect-utt { font-size: 16px; }
.vs-big .dissect-note { font-size: 14px; }
.vs-big .vg-intel li { font-size: 14px; }
.vs-big .vg-intel h4 { font-size: 13px; }
.vs-big .vg-deal p { font-size: 14.5px; }
.vs-big .vg-facts dd { font-size: 15px; }
.vs-quote { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; color: var(--text); text-wrap: pretty; }
.vs-quote-by { margin-top: 18px; font-size: 14px; color: var(--text-mute); }

/* Real app screens inside the stage */
.vs-media { min-width: 0; align-self: center; }
.vs-media img, .vs-media video { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: #111216; }
.vs-media > * + * { margin-top: 14px; }
.vs-screen.m-wide { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: center; }
.vs-screen.m-tall { grid-template-columns: minmax(0, 1fr) 360px; align-items: center; }
.vs-screen.m-wide .vs-cap, .vs-screen.m-tall .vs-cap { font-size: clamp(22px, 2vw, 30px); padding-bottom: 56px; }
.vs-real { margin-top: 10px; font-size: 12.5px; color: var(--text-mute); }
.qs-panel img { display: block; width: 100%; height: auto; border-radius: 10px; }
.qs-panel.tall img { max-width: 357px; margin: 0 auto; }
.qp-real { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
@media (max-width: 1000px) {
  .vs-screen.m-wide, .vs-screen.m-tall { grid-template-columns: 1fr; }
  .vs-screen.m-tall .vs-media { max-width: 380px; }
  .vs-screen.m-wide .vs-cap, .vs-screen.m-tall .vs-cap { padding-bottom: 0; }
}

/* Stage layouts */
.vs-screen { padding-bottom: 78px; }
.vs-cap, .vs-screen.m-wide .vs-cap, .vs-screen.m-tall .vs-cap { padding-bottom: 0; }
.vs-screen.calm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; min-height: 0; }
.vs-screen.calm.m-tall { grid-template-columns: minmax(0, 1fr) 360px; }
.vs-screen.single { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.vs-screen.single .vs-cap { max-width: 30em; }
.vs-swap { display: grid; }
.vs-swap > * { grid-area: 1 / 1; align-self: start; }
.vs-swap > * + * { margin-top: 0; }
.vs-reply .vs-who { color: var(--accent); }
.vs-reply .vs-who i { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.vs-cap-you { max-width: 28em; font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: #DCEEFF; text-wrap: pretty; }
.vs-step { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.vs-media > .vs-step { margin-top: 22px; }
.vs-media > .vs-step:first-child { margin-top: 0; }
.vs-media > .vs-step + img { margin-top: 0; }
.vs-openers { display: grid; gap: 12px; }
.vs-openers > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 18px 20px; border-radius: 12px; border: 1px solid rgba(147,212,255,0.28); background: linear-gradient(180deg, rgba(147,212,255,0.08), rgba(147,212,255,0.02)); }
.vs-openers span { font-size: 14px; font-weight: 600; color: var(--text-soft); }
.vs-openers p { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; line-height: 1.4; letter-spacing: -0.015em; color: var(--text); }
.vs-openers .planned { opacity: 0.55; }
.vs-includes ul { list-style: none; border-top: 1px solid var(--line); }
.vs-includes li { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; color: var(--text); }
.vs-includes li b { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; color: var(--accent); }
.vs-screen .vg-pack { padding: 24px; border-radius: 14px; border: 1px solid var(--line-bright); background: #0B0B10; }
.vs-screen .vg-pack-amt { margin-top: 0; }
@media (max-width: 1000px) {
  .vs-screen.calm, .vs-screen.calm.m-tall, .vs-screen.single { grid-template-columns: 1fr; }
  .vs-openers > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) { .vs-screen { padding-bottom: 64px; } }

.vs-screen.calm > .vs-talk { grid-column: 1 / -1; }
.vs-screen.calm > .vs-talk .vs-cap { max-width: 34em; }
.vs-big .vg-lanes-head, .vs-big .vg-lane { grid-template-columns: 110px minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 1.2fr); gap: 10px; }
.vs-big .vg-lanes-head span { font-size: 11px; }
.vs-big .vg-lane + .vg-lane { margin-top: 12px; }
.vs-big .vg-lane-name { font-size: 17px; }
.vs-big .vg-seg { padding: 18px 16px; border-radius: 10px; font-size: 15.5px; line-height: 1.4; }
@media (max-width: 760px) { .vs-big .vg-lanes-head, .vs-big .vg-lane { grid-template-columns: 1fr; } }

.vs-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vs-side img { display: block; width: 100%; height: auto; border-radius: 10px; }
@media (max-width: 640px) { .vs-split { grid-template-columns: minmax(0, 1fr); } }

/* ═══════════════════════════════════════════════════════════════
   Pass 4: one frame for every real screen (same 16:10 ratio, the app's
   own panel color, same radius and border), equal-height columns, and
   the product shown big under the caption instead of squeezed beside it.
   ═══════════════════════════════════════════════════════════════ */
.mf { margin: 0; min-width: 0; }
.mf-in { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,255,255,0.09); background: #0E0F15; }
.mf-in > img, .mf-in > video { position: absolute; top: 6%; left: 6%; width: 88%; height: 88%; object-fit: contain; border: 0; border-radius: 0; background: none; margin: 0; }
.mf-in.top > img { top: 7%; left: 17%; width: 66%; height: 93%; object-fit: cover; object-position: top; }
.mf-in.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to bottom, rgba(14,15,21,0), #0E0F15 85%); pointer-events: none; }
.mf-label { margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.mf-cap { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--text-mute); }

/* Hero: caption on top, the product big underneath */
.vs-screen.stack { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.vs-screen.stack .vs-cap { max-width: 34em; }
.vs-screen.stack > .mf { width: 100%; max-width: 860px; justify-self: center; }

/* Rows of frames: always equal */
.mf-row { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 20px; }

/* Two-column pairs: frame first, words under it, so frames line up */
.qs-cols { align-items: stretch; }
.qs-col { display: flex; flex-direction: column; }
.qs-col > .mf { margin-bottom: 26px; }
.qs-col > h3 { margin-bottom: 10px; }
.qs-col > p { margin-bottom: 0; }

/* Panes inside a stage: same surface, same height */
.vs-screen.calm.eq { align-items: stretch; }
.vs-pane { display: flex; flex-direction: column; justify-content: center; padding: 22px 24px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.09); background: #0B0C10; }
.vs-pane > * + * { margin-top: 0; }
.vs-includes.vs-pane ul { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* Price board: highlight with a ring, no shifted edges */
.vg-prices .us { margin: 0; padding: 11px 12px; border-radius: 8px; border-bottom-color: transparent; background: rgba(147,212,255,0.08); box-shadow: inset 0 0 0 1px rgba(147,212,255,0.28); }
.vg-prices li { padding-left: 12px; padding-right: 12px; }
.vs-big .vg-prices li { padding: 14px 12px; }

/* Quiet list as equal panels */
.ql { gap: 16px; border-top: none; align-items: stretch; }
.ql > div { padding: 22px 22px 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }

/* Steps in a row of equal panels (a real sequence, so numbered) */
.qp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: st; list-style: none; }
.qp-steps li { counter-increment: st; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
.qp-steps li::before { content: counter(st); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-up); font-size: 14px; font-weight: 600; color: var(--text); }
.qp-steps b { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.qp-steps span { font-size: 15px; line-height: 1.55; color: var(--text-soft); }

/* The launch film on the new pages: the homepage's own player */
.qp-film { padding: 0 0 140px; max-width: none; text-align: left; }
.qp-film .qp-head { margin-bottom: 28px; }
.qp-film .film-frame { max-width: 1072px; margin: 0 auto; }

@media (max-width: 1000px) {
  .mf-row { grid-template-columns: minmax(0, 1fr); }
  .qp-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mf-in { border-radius: 14px; }
  .qp-film { padding-bottom: 104px; }
}

.mf-in.html { display: grid; place-items: center; padding: 6%; }
.mf-html { width: 100%; }
.mf-html > * + * { margin-top: 14px; }
.vs-side > .mf { margin: 0; }
/* Cards settle with a slight overshoot when they reveal (his brief) */
.qs-col.rv, .ql > div.rv, .qp-steps li.rv, .qp-seat.rv, .mf.rv, .qp-phase.rv, .qp-pick > div.rv {
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.85s cubic-bezier(0.34,1.4,0.64,1);
}

.qp-film .film-frame { max-width: none; }
/* Same depth as the homepage's film frame */
.mf-in { box-shadow: 0 30px 90px rgba(0,0,0,0.45), 0 0 60px rgba(139,124,255,0.07); }
.vs-screen .mf-in { box-shadow: none; }

/* Drawn panels below the hero wear the same frame as the real screens */
.vg-frame:not(.qh-stage) { padding: 22px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.09); background: #0E0F15; box-shadow: 0 30px 90px rgba(0,0,0,0.45), 0 0 60px rgba(139,124,255,0.07); }
.vg-frame:not(.qh-stage) > .vg-panel { padding: 4px; border: none; background: transparent; }
.vg-frame:not(.qh-stage) .vg-cap { margin-top: 14px; }

/* One big frame that steps through several real screens */
.mf-cycle { width: 100%; max-width: 860px; justify-self: center; }
.mf-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.mf-steps button { position: relative; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 12px; background: transparent; font-family: var(--sans); font-size: 14px; font-weight: 600; text-align: left; color: var(--text-mute); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.mf-steps button::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 7px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.08); }
.mf-steps button.on { color: var(--text); border-color: rgba(147,212,255,0.35); background: rgba(147,212,255,0.06); }
.mf-steps button.on::after { background: var(--accent); }
.mf-steps button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mf-cycle .mf-in > img { transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1); }
.mf-cycle .mf-in > img:not(.on) { opacity: 0; }
.mf-in > img.mf-top { top: 7%; left: 17%; width: 66%; height: 93%; object-fit: cover; object-position: top; }
.mf-cycle .mf-in::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(to bottom, rgba(14,15,21,0), #0E0F15 85%); pointer-events: none; }
@media (max-width: 640px) { .mf-steps button { font-size: 12px; padding: 10px 10px 12px; } }

.mf-in.html.fit { aspect-ratio: auto; padding: 32px; }
.vg-climb { margin: 16px 0 4px; border-top: 1px solid var(--line); }
.vg-climb > div { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 8px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.vg-climb span { font-family: var(--mono); font-size: 10.5px; color: var(--text-mute); }
.vg-climb b { font-weight: 500; color: var(--text-soft); }
.vg-climb em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--accent); }
.vg-climb .on { border-radius: 6px; background: rgba(147,212,255,0.07); box-shadow: inset 0 0 0 1px rgba(147,212,255,0.25); }
.vg-climb .on b { color: var(--text); }

.vg-receipts > div { padding: 14px 4px; border-bottom: 1px solid var(--line); }
.vg-receipts > div:last-child { border-bottom: none; }
.vg-receipts p { margin-bottom: 6px; font-size: 15px; line-height: 1.45; color: var(--text); }
.vg-receipts span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; }
.vg-receipts .up { color: var(--green); }
.vg-receipts .down { color: #F5BC75; }

/* Real captures are 96% opaque; back them so a card underneath never shows through */
.mf-in > img, .mf-in > video { background: #0E0F15; }

/* Hero frames hold wide cards: a wider frame so the card fills it */
.vs-screen.stack .mf-in { aspect-ratio: 16 / 9; }

/* v7 page system. The page is built from the homepage's own parts (hero, live exchange, differentiator cards,
   film, FAQ, founder note, bottom CTA). This file only adds the new animated pieces, scoped to main.v7. */
.v7 { position: relative; z-index: 1; }
/* the added Pricing link made "How it works" and "Request Access" wrap at laptop widths */
nav .nav-link, nav .nav-demo, nav .nav-cta { white-space: nowrap; }
.v7 a:focus-visible, .v7 button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.v7 .hero { padding-bottom: 8px; }

/* ── the idea: research, past calls and live words landing in one question ── */
.v7-idea { position: relative; z-index: 5; max-width: 1280px; margin: 0 auto; padding: 130px 24px 40px; }
.v7-idea .why-header { margin-bottom: 64px; }
.v7-fuse { position: relative; max-width: 960px; margin: 0 auto; }

.v7-qcard {
  position: relative; z-index: 1;
  background: #0E1420; border: 1px solid rgba(74, 222, 128, 0.32); border-left: 4px solid #4ADE80; border-radius: 14px;
  padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.8vw, 36px) clamp(20px, 2.6vw, 34px);
  transition: border-color 0.5s ease;
}
.v7-qcard::after { content: ""; position: absolute; inset: -3px; border-radius: 16px; border: 1.5px solid rgba(74, 222, 128, 0.6); opacity: 0; pointer-events: none; }
.v7-fuse.is-done .v7-qcard::after { animation: superchargePulse 0.9s ease-out forwards; }
.v7-qtags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: clamp(14px, 1.6vw, 22px); font-family: var(--mono); font-size: clamp(10px, 0.85vw, 12px); letter-spacing: 0.12em; text-transform: uppercase; }
.v7-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-weight: 600; }
.v7-tag i, .v7-listen i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.v7-tag-inst { color: #93D4FF; border: 1px solid rgba(147, 212, 255, 0.4); }
.v7-tag-ev { color: #4ADE80; border: 1px solid rgba(74, 222, 128, 0.5); font-style: italic; }
.v7-listen { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.38); text-transform: none; letter-spacing: 0; font-family: var(--sans); font-style: italic; font-size: clamp(11px, 0.95vw, 13px); }
.v7-listen i { color: #4ADE80; animation: blink 1.5s ease-in-out infinite; }
/* the two tags share one cell and cross-fade */
.v7-tagbox { display: inline-grid; }
.v7-tagbox > .v7-tag { grid-area: 1 / 1; justify-self: start; transition: opacity 0.5s ease; }
.v7-tag-ev, .v7-fuse.is-ev .v7-tag-inst { opacity: 0; }
.v7-fuse.is-ev .v7-tag-ev { opacity: 1; }

/* one live sentence that rewrites itself; the hidden copy of the evolved question holds the card's height */
.v7-qtext { display: grid; }
.v7-q { grid-area: 1 / 1; font-size: clamp(17px, 2.05vw, 29px); line-height: 1.42; letter-spacing: -0.015em; font-weight: 500; color: #F4F5F8; }
.v7-q-size { visibility: hidden; }
.v7-q-live { transition: opacity 0.6s ease; }
/* highlights grow outward with box-shadow so lighting a phrase never moves the text */
.v7-hl { border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background 0.6s ease, color 0.6s ease, box-shadow 0.6s ease; }
.v7-hl.on.cy { color: #DCEEFF; background: rgba(147, 212, 255, 0.2); box-shadow: 0 0 0 3px rgba(147, 212, 255, 0.2), inset 0 -2px 0 rgba(147, 212, 255, 0.75); }
.v7-hl.on.am { color: #FFE5C2; background: rgba(245, 188, 117, 0.2); box-shadow: 0 0 0 3px rgba(245, 188, 117, 0.2), inset 0 -2px 0 rgba(245, 188, 117, 0.75); }
.v7-hl.on.gr { color: #D6FBE2; background: rgba(74, 222, 128, 0.18); box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18), inset 0 -2px 0 rgba(74, 222, 128, 0.75); }
/* each phrase bursts in its source's colour as it's written (the homepage's clairIgnite), then rests */
.v7-hl.cy { --hc: 147, 212, 255; } .v7-hl.am { --hc: 245, 188, 117; } .v7-hl.gr { --hc: 74, 222, 128; }
.v7-hl.on { animation: v7Ignite 0.8s ease-out; }
@keyframes v7Ignite { 0% { background: rgba(var(--hc), 0.55); box-shadow: 0 0 0 3px rgba(var(--hc), 0.45), 0 0 18px rgba(var(--hc), 0.9); color: #fff; } }
/* the rewrite's glyph band: the writing source's colour, every third white (the film's letters); generic words ahead dimmed */
.v7-g { font-style: normal; }
.v7-g.cy { color: #93D4FF; text-shadow: 0 0 10px rgba(147, 212, 255, 0.85); }
.v7-g.am { color: #F5BC75; text-shadow: 0 0 10px rgba(245, 188, 117, 0.85); }
.v7-g.gr { color: #4ADE80; text-shadow: 0 0 10px rgba(74, 222, 128, 0.85); }
.v7-g.vi { color: #B9AEFF; text-shadow: 0 0 10px rgba(139, 124, 255, 0.9); }
.v7-g.wh { color: #fff; text-shadow: 0 0 10px rgba(185, 174, 255, 0.9); }
.v7-old { color: rgba(244, 245, 248, 0.9); }

/* the frame: the film's EdgeGlow (a rim plus comets running round the border), one comet per source */
.v7-edge { position: absolute; left: -4px; top: -1px; width: calc(100% + 5px); height: calc(100% + 2px); overflow: visible; pointer-events: none; z-index: 3; }
.v7-edge rect { fill: none; }
.v7-edge .rim { stroke: #B9AEFF; stroke-width: 1.5; opacity: 0; transition: opacity 0.6s ease, stroke 0.6s ease; }
.v7-fuse.is-ev .v7-edge .rim { opacity: 0.45; }
/* on the reset (hidden by is-out) the rim and highlights drop at once, so nothing ghosts over the generic question */
.v7-fuse:not(.is-ev) .v7-edge .rim, .v7-fuse:not(.is-ev) .v7-hl { transition: none; }
.v7-fuse.is-done .v7-edge .rim { stroke: #4ADE80; opacity: 0.7; }
.v7-edge .cg { opacity: 0; transition: opacity 0.5s ease; }
.v7-edge .cg.on { opacity: 1; }
.v7-edge .cg:not(.on) { transition-duration: 1.4s; }
.v7-edge .cm { stroke-dasharray: 0.14 0.86; stroke-linecap: round; animation: v7Comet 2.6s linear infinite; }
.v7-edge .cg.am .cm { animation-delay: -0.87s; }
.v7-edge .cg.gr .cm { animation-delay: -1.73s; }
.v7-edge .cm.w { stroke-width: 14; opacity: 0.5; filter: blur(7px); }
.v7-edge .cm.k { stroke-width: 3.5; opacity: 0.95; filter: blur(0.8px); }
.v7-edge .cm.h { stroke: #fff; stroke-width: 1.4; opacity: 0.9; }
.v7-edge .cg.cy .cm.w, .v7-edge .cg.cy .cm.k { stroke: #93D4FF; }
.v7-edge .cg.am .cm.w, .v7-edge .cg.am .cm.k { stroke: #F5BC75; }
.v7-edge .cg.gr .cm.w, .v7-edge .cg.gr .cm.k { stroke: #4ADE80; }
@keyframes v7Comet { to { stroke-dashoffset: -1; } }
/* the homepage's supercharge ring, breaking off the frame as each source lands */
.v7-ring { position: absolute; left: -7px; top: -4px; right: -4px; bottom: -4px; border-radius: 18px; border: 1.5px solid; opacity: 0; pointer-events: none; }
.v7-ring.cy { border-color: rgba(147, 212, 255, 0.8); } .v7-ring.am { border-color: rgba(245, 188, 117, 0.8); } .v7-ring.gr { border-color: rgba(74, 222, 128, 0.8); }
.v7-ring.go { animation: superchargePulse 0.9s ease-out forwards; }

/* the end of each loop: everything fades out together before the generic question comes back */
.v7-beams, .v7-tagbox, .v7-edge { transition: opacity 0.6s ease; }
.v7-fuse.is-out .v7-q-live, .v7-fuse.is-out .v7-beams, .v7-fuse.is-out .v7-tagbox, .v7-fuse.is-out .v7-edge { opacity: 0; }

.v7-beams { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.v7-beams path { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.v7-beams circle { filter: drop-shadow(0 0 6px currentColor); }

.v7-srcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); margin-top: clamp(70px, 7vw, 110px); }
.v7-src {
  --c: #93D4FF;
  position: relative; padding: clamp(12px, 1.4vw, 18px) clamp(12px, 1.5vw, 20px); border-radius: 12px;
  background: rgba(10, 10, 14, 0.92); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  opacity: 0.25; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease;
}
.v7-src.am { --c: #F5BC75; }
.v7-src.gr { --c: #4ADE80; }
.v7-src.on { opacity: 1; transform: none; }
.v7-src.fired { animation: srcFire 0.8s ease forwards; --src-color: var(--c); }
.v7-src b { display: block; font-family: var(--mono); font-size: clamp(10px, 0.9vw, 12.5px); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.v7-src small { display: block; margin-top: 3px; font-family: var(--mono); font-size: clamp(9px, 0.75vw, 11px); color: rgba(255, 255, 255, 0.4); letter-spacing: 0.04em; }
.v7-src q { display: block; margin-top: clamp(6px, 0.8vw, 10px); font-size: clamp(13px, 1.35vw, 19px); line-height: 1.35; color: #F2F2F5; font-weight: 500; letter-spacing: -0.01em; }

/* ── the three steps: the homepage's differentiator cards, with new panels inside ── */
.v7-why { padding-top: 120px; }
.v7-frame {
  position: relative; width: 100%; max-width: 560px; aspect-ratio: 5 / 4; padding: 28px 30px; border-radius: 28px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.v7-frame::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 20%, rgba(255, 255, 255, 0.2), transparent 55%); pointer-events: none; }
.v7-frame.g-purple { background: var(--grad-purple); }
.v7-frame.g-cyan { background: var(--grad-cyan); }
.v7-frame.g-green { background: linear-gradient(135deg, #0d3a2a 0%, #1e8054 40%, #3fd084 75%, #94f0c0 100%); }
.v7-panel {
  position: relative; z-index: 1; width: 100%; max-width: 460px; border-radius: 14px; padding: 16px 16px 15px;
  background: rgba(10, 10, 14, 0.94); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  font-family: var(--sans); color: var(--text);
}
.v7-ph { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.v7-ph-r { margin-left: auto; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.08em; }
.v7-live { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 1.5s ease-in-out infinite; }

/* research brief */
.v7-co { display: flex; align-items: center; gap: 11px; margin: 13px 0 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.v7-co-mark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); color: #B8A8FF; font-weight: 600; font-size: 15px; }
.v7-co b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.v7-co span { display: block; margin-top: 1px; font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.v7-checks { list-style: none; display: grid; gap: 7px; }
.v7-checks li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.025); font-size: 12.5px; color: rgba(255, 255, 255, 0.38); transition: color 0.3s ease, background 0.3s ease; }
.v7-checks li i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.18); }
.v7-checks li em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 10.5px; color: rgba(255, 255, 255, 0.5); opacity: 0; transition: opacity 0.3s ease; }
.v7-checks li.run { color: rgba(255, 255, 255, 0.75); }
.v7-checks li.run i { border-color: rgba(196, 157, 255, 0.9); border-right-color: transparent; animation: v7-spin 0.7s linear infinite; }
.v7-checks li.done { color: var(--text); background: rgba(255, 255, 255, 0.04); }
.v7-checks li.done i { border: 0; background: #4ADE80; animation: none; position: relative; }
.v7-checks li.done i::after { content: ""; position: absolute; left: 4.5px; top: 2px; width: 4px; height: 7px; border: solid #06210f; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.v7-checks li.done em { opacity: 1; }
@keyframes v7-spin { to { transform: rotate(360deg); } }
.v7-feeding { display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 9px 11px; border-radius: 8px; border: 1px solid rgba(139, 124, 255, 0.18); font-size: 11.5px; color: rgba(255, 255, 255, 0.35); transition: border-color 0.4s ease, background 0.4s ease, color 0.4s ease; }
.v7-feeding span { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(139, 124, 255, 0.4); }
.v7-feeding b { font-weight: 600; color: rgba(255, 255, 255, 0.5); }
.v7-feeding.on { border-color: rgba(139, 124, 255, 0.6); background: rgba(139, 124, 255, 0.1); color: rgba(255, 255, 255, 0.6); }
.v7-feeding.on span { background: #A99BFF; box-shadow: 0 0 10px #A99BFF; }
.v7-feeding.on b { color: var(--text); }

/* answer card: the app's answer mode, in its own amber */
.v7-ans { --amb: #F5BC45; }
.v7-ans-top { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.v7-se { flex: none; white-space: nowrap; padding: 3px 7px; border-radius: 4px; background: rgba(245, 188, 69, 0.14); color: var(--amb); font-weight: 700; }
/* width 0 + grow: the topic takes what's left and never widens the card on a phone */
.v7-ans-topic { flex: 1 1 0; width: 0; color: #F1F1F4; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v7-ans-n { margin-left: auto; flex: none; padding: 2px 7px; border: 1px solid rgba(245, 188, 69, 0.45); border-radius: 5px; color: var(--amb); }
.v7-said { margin: 10px 0 9px; font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.5); min-height: 34px; }
.v7-said span { margin-right: 7px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.32); }
.v7-said q { font-style: italic; }
.v7-say { padding: 10px 12px 11px; border-left: 3px solid var(--amb); border-radius: 4px 8px 8px 4px; background: rgba(245, 188, 69, 0.07); }
.v7-say b { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--amb); }
.v7-say p { font-size: 13.5px; line-height: 1.42; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.v7-ask { margin-top: 9px; font-size: 12px; line-height: 1.4; font-style: italic; color: rgba(255, 255, 255, 0.62); }
.v7-ask span { margin-right: 7px; font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.32); }
.v7-docs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.v7-docs span { margin-right: 2px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.v7-docs i { font-style: normal; font-family: var(--mono); font-size: 10px; padding: 3px 7px; border: 1px solid rgba(245, 188, 69, 0.5); border-radius: 5px; color: var(--amb); }
.v7-ans .v7-say, .v7-ans .v7-ask, .v7-ans .v7-docs i { transition: opacity 0.45s ease, transform 0.45s ease; }
.v7-ans.is-reset .v7-say, .v7-ans.is-reset .v7-ask, .v7-ans.is-reset .v7-docs i { opacity: 0; transform: translateY(5px); }
.v7-ans .v7-say.on, .v7-ans .v7-ask.on, .v7-ans .v7-docs i.on { opacity: 1; transform: none; }

/* notes: the real tab names, counting up as the call fills them */
.v7-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0 12px; }
.v7-tabs span {
  --c: 147, 212, 255;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(var(--c), 0.35); border: 1px solid rgba(var(--c), 0.14); transition: color 0.3s ease, border-color 0.3s ease;
}
.v7-tabs span::after { content: attr(data-shown); opacity: 0.7; }
.v7-tabs span.on { color: rgb(var(--c)); border-color: rgba(var(--c), 0.4); }
.v7-tabs .t-gray { --c: 170, 170, 178; } .v7-tabs .t-purple { --c: 205, 160, 255; } .v7-tabs .t-amber { --c: 245, 188, 69; }
.v7-tabs .t-green { --c: 110, 232, 140; } .v7-tabs .t-lav { --c: 180, 170, 255; } .v7-tabs .t-coral { --c: 255, 150, 135; }
.v7-tabs .t-orange { --c: 255, 176, 110; } .v7-tabs .t-pink { --c: 255, 160, 210; } .v7-tabs .t-teal { --c: 100, 225, 200; }
.v7-sug { position: relative; padding: 10px 12px 11px 14px; border-radius: 8px; border-left: 3px solid #6FA9D6; background: rgba(255, 255, 255, 0.03); font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); transition: opacity 0.5s ease, transform 0.5s ease; }
.v7-sug-k { display: flex; justify-content: space-between; margin-bottom: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); }
.v7-sug-k b { color: #93D4FF; }
.v7-notes.is-reset .v7-sug { opacity: 0; transform: translateY(6px); }
.v7-notes .v7-sug.on { opacity: 1; transform: none; }

/* ── film moments: silent loops cut from the launch film, framed like his live demo window (no gradient) ── */
.v7-clip { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; border: 1px solid var(--line-bright); background: #05060a; overflow: hidden; }
.v7-clip video { display: block; width: 100%; height: 100%; }
.v7-idea > .v7-clip { max-width: 1100px; margin: clamp(56px, 6vw, 96px) auto 0; }
.v7-vs > .v7-clip { margin: 0 0 56px; }
@media (min-width: 901px) {
  /* wider film side so the product in the frame stays readable */
  .v7-why .why-card { grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
  .v7-why .why-card-visual { min-height: 0; }
}

/* ── the film: his hero's secondary button, opening the film right under itself ── */
.v7 .v7-watch-row { display: flex; } /* his rule hides the tour button on phones; the film plays fine there */
.v7-play { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -6px; border-radius: 50%; background: var(--accent); }
.v7-play svg { margin-left: 2px; }
.v7-watch-row .curious-link[aria-expanded="true"] .arrow { transform: rotate(90deg); }
#film { scroll-margin-top: 88px; } /* links to /#film land below the nav */
.v7-film-drop { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s cubic-bezier(.2,.8,.2,1); }
.v7-film-drop > div { min-height: 0; overflow: hidden; }
.v7-film-drop.shown > div { overflow: visible; } /* once open, so the frame's shadow isn't cut off */
.v7-film-drop.open { grid-template-rows: 1fr; }
.v7-film-drop .film-frame { max-width: clamp(480px, calc((100vh - 250px) * 16 / 9), 960px); /* short laptop screens: Book a demo, the button and the whole film still fit */ margin: 28px auto 24px; opacity: 0; transform: scale(.94); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.v7-film-drop.open .film-frame { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .v7-film-drop, .v7-film-drop .film-frame { transition: none; } }

/* ── table, FAQ, related links ── */
.v7-vs { position: relative; z-index: 5; max-width: 980px; margin: 0 auto; padding: 120px 24px 40px; }
.v7-table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.v7-table th, .v7-table td { text-align: left; vertical-align: top; padding: 18px 24px 18px 0; border-bottom: 1px solid var(--line); }
.v7-table thead th { padding-top: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); border-bottom-color: var(--line-bright); }
.v7-table thead th:last-child { color: #C8BCFF; }
.v7-table thead td { border-bottom-color: var(--line-bright); }
.v7-table thead td { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); padding-top: 0; }
.v7-table tbody th { width: 34%; font-weight: 600; color: var(--text); }
.v7-table tbody td { width: 33%; color: var(--text-mute); }
.v7-table tbody td:last-child { color: var(--text); }
.v7-more { max-width: 760px; margin: 40px auto 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--text-soft); }
.v7-more a { color: var(--accent); }

@media (max-width: 900px) {
  .v7-idea { padding-top: 90px; }
  .v7-srcs { margin-top: 56px; }
}
@media (max-width: 640px) {
  .v7-idea { padding: 72px 16px 24px; }
  .v7-idea .why-header { margin-bottom: 40px; }
  .v7-srcs { gap: 8px; margin-top: 46px; }
  .v7-src { padding: 9px 9px 10px; border-radius: 9px; }
  .v7-src small { display: none; }
  .v7-frame { padding: 16px; border-radius: 20px; aspect-ratio: auto; }
  .v7-table, .v7-table tbody, .v7-table tr { display: block; }
  .v7-table thead { display: none; }
  .v7-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .v7-table tbody th { grid-column: 1 / -1; width: auto; padding: 0 0 8px; border: 0; }
  .v7-table tbody td { width: auto; padding: 0; border: 0; font-size: 14px; }
  .v7-table tbody td::before { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); }
  .v7-table tbody td:nth-of-type(1)::before { content: "Without Veracity"; }
  .v7-table tbody td:nth-of-type(2)::before { content: "With Veracity"; color: #C8BCFF; }
}
@media (prefers-reduced-motion: reduce) {
  .v7-q, .v7-hl, .v7-src, .v7-checks li, .v7-sug { transition: none; }
  .v7-hl.on { animation: none; }
  .v7-edge .cg { display: none; }
}

/* SEO content layer: the new pages' layout. Every colour and font is a homepage token; film clips, the
   question card and the FAQ come from v5.css and the homepage. Scoped to main.sx. */
.sx { position: relative; z-index: 5; }
.sx a:focus-visible, .sx button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ── hero: crumbs, the query as the H1, the short answer ── */
.sx-hero { max-width: 1080px; margin: 0 auto; padding: 148px 24px 0; text-align: center; }
.sx-crumbs { display: flex; flex-wrap: wrap; justify-content: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 30px; }
.sx-crumbs a { color: var(--text-mute); text-decoration: none; transition: color 0.2s ease; }
.sx-crumbs a:hover { color: var(--text); }
.sx-crumbs span { margin: 0 10px; color: var(--text-fade); }
.sx-crumbs b { font-weight: 500; color: var(--text-soft); }
.sx-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 5px 12px; border: 1px solid var(--line-bright); border-radius: 100px; background: rgba(255, 255, 255, 0.04); font-size: 11px; font-weight: 500; color: var(--text-soft); }
.sx-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(110, 232, 114, 0.6); animation: pulse 2s ease infinite; }
.sx-h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(38px, 5.2vw, 76px); line-height: 1.0; letter-spacing: -0.04em; color: var(--text); max-width: 980px; margin: 20px auto 0; }
.sx-h1 em, .sx-art h2 em, .sx-h2 em { font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: #C8BCFF; }
.sx-lede { max-width: 660px; margin: 22px auto 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: var(--text-soft); }
.sx-answer { position: relative; max-width: 780px; margin: 44px auto 0; padding: 26px 30px 28px; text-align: left; border: 1px solid var(--line-bright); border-radius: 18px; background: rgba(12, 12, 18, 0.86); }
/* a thin line of the three source colours along the top edge */
.sx-answer::before { content: ""; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #93D4FF 20%, #F5BC75 50%, #4ADE80 80%, transparent); }
.sx-answer-k { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.sx-answer p { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; letter-spacing: -0.01em; color: var(--text); }
.sx-meta { margin-top: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-mute); }
.sx-cta-pair { justify-content: center; margin-top: 30px; }
.sx-hero-film { max-width: 1180px; margin: 72px auto 0; padding: 0 24px; }

/* ── article body: sticky contents on the left, one reading column ── */
.sx-body { display: grid; grid-template-columns: 200px minmax(0, 720px); gap: 72px; justify-content: center; max-width: 1180px; margin: 120px auto 0; padding: 0 24px; }
/* his body rule (overflow-x: hidden) makes the body the scroller, which stops sticky; html already clips sideways */
body:has(.sx-toc), body:has(.sx-phase-k) { overflow-x: visible; }
.sx-toc { position: sticky; top: 104px; align-self: start; }
.sx-toc { transition: opacity 0.3s ease; }
.sx-toc.off { opacity: 0; pointer-events: none; }
.sx-toc-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 14px; }
.sx-toc a { display: block; padding: 7px 0 7px 14px; border-left: 1px solid var(--line); font-size: 13px; line-height: 1.35; color: var(--text-mute); text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; }
.sx-toc a:hover { color: var(--text-soft); }
.sx-toc a.on { color: var(--text); border-left-color: var(--accent); }
.sx-art > section { margin-bottom: 104px; scroll-margin-top: 104px; }
.sx-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 16px; }
.sx-art h2, .sx-h2 { font-family: var(--sans); font-size: clamp(27px, 2.5vw, 38px); font-weight: 700; line-height: 1.08; letter-spacing: -0.032em; color: var(--text); margin-bottom: 20px; }
.sx-art h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); margin: 30px 0 10px; }
.sx-art p { font-size: 17px; line-height: 1.7; color: var(--text-soft); letter-spacing: -0.005em; }
.sx-art p + p { margin-top: 16px; }
.sx-art strong { color: var(--text); font-weight: 600; }
.sx-art p a, .sx-art li a, .sx-note a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(147, 212, 255, 0.35); text-underline-offset: 3px; }
/* a figure that breaks out of the reading column to the full width of the body */
.sx-wide { margin-left: -272px; }
.sx-fig { margin-top: 36px; }
.sx-fig figcaption { margin-top: 14px; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; letter-spacing: 0.03em; color: var(--text-mute); }
.sx-fig figcaption b { font-weight: 500; color: var(--text-soft); }
.sx-shot { border-radius: 16px; border: 1px solid var(--line-bright); background: #05060a; overflow: hidden; }
.sx-shot img { display: block; width: 100%; height: auto; }
.sx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.sx-pair .sx-k { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c, var(--accent)); }
.sx-pair .sx-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* three steps, each in one of the film's source colours */
.sx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.sx-step { --c: #93D4FF; position: relative; padding: 22px 20px 24px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.02); }
.sx-step::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 1px; background: var(--c); opacity: 0.8; }
.sx-step.am { --c: #F5BC75; } .sx-step.gr { --c: #4ADE80; }
.sx-step i { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--c); }
.sx-step b { display: block; margin: 12px 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.sx-step p { font-size: 14.5px; line-height: 1.55; }

/* the call timeline: where each kind of help lands */
.sx-tl { margin-top: 34px; padding: 30px 30px 26px; border: 1px solid var(--line-bright); border-radius: 18px; background: rgba(10, 10, 14, 0.86); }
.sx-tl-lane { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; }
.sx-tl-lane + .sx-tl-lane { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line); }
.sx-tl-name { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); line-height: 1.5; }
.sx-tl-name small { display: block; color: var(--text-mute); letter-spacing: 0.06em; text-transform: none; }
.sx-tl-track { position: relative; height: 118px; }
/* the rail: the call as a line, the playhead, and where the call ends (72%) */
.sx-tl-rail { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; }
.sx-tl-bar { position: absolute; left: 0; right: 0; top: 8px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.sx-tl-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 72%; border-radius: 2px; background: rgba(147, 212, 255, 0.35); }
.sx-tl-ticks { position: absolute; left: 0; right: 0; top: 18px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: var(--text-fade); }
.sx-tl-ticks span:nth-child(2) { position: absolute; left: 72%; transform: translateX(-50%); color: var(--text-mute); }
.sx-tl-head { position: absolute; top: 3px; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(147, 212, 255, 0.9); }
/* each kind of help, pinned above the moment it lands, with a stem down to the rail */
.sx-tl-chip { --d: 20px; position: absolute; bottom: 42px; transform: translateX(-50%); white-space: nowrap; padding: 6px 10px; border-radius: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: color-mix(in srgb, var(--c) 10%, #0a0a0e); opacity: 0.2; transition: opacity 0.4s ease; }
.sx-tl-chip.hi { --d: 56px; bottom: 78px; }
.sx-tl-chip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: var(--d); background: color-mix(in srgb, var(--c) 60%, transparent); }
.sx-tl-chip.l { transform: translateX(-14px); } .sx-tl-chip.l::after { left: 14px; }
.sx-tl-chip.r { transform: translateX(calc(-100% + 14px)); } .sx-tl-chip.r::after { left: auto; right: 14px; }
.sx-tl-chip.on { opacity: 1; }
.sx-tl-lane.after .sx-tl-track { height: 82px; }
.sx-tl-lane.after .sx-tl-bar::before { background: rgba(255, 255, 255, 0.12); }
.sx-tl-note { margin-top: 22px; font-size: 13.5px; line-height: 1.55; color: var(--text-mute); }

/* a weak question, struck, and the one to ask (the film's strike) */
.sx-swap { margin-top: 30px; border: 1px solid var(--line-bright); border-radius: 18px; background: rgba(10, 10, 14, 0.86); overflow: hidden; }
.sx-swap-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 22px 26px; }
.sx-swap-row + .sx-swap-row { border-top: 1px solid var(--line); }
.sx-swap-k { padding-top: 5px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); }
.sx-swap q { display: block; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; letter-spacing: -0.012em; }
.sx-swap .weak q { color: rgba(255, 255, 255, 0.5); text-decoration: line-through; text-decoration-color: #FF6B7A; text-decoration-thickness: 2px; }
.sx-swap .weak .sx-swap-k { color: #FF8A95; }
.sx-swap .strong { background: rgba(74, 222, 128, 0.04); }
.sx-swap .strong .sx-swap-k { color: #4ADE80; }
.sx-swap .strong q { color: #fff; font-weight: 500; }
.sx-swap small { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--text-mute); }
.sx-swap mark { color: #FFE5C2; background: rgba(245, 188, 117, 0.18); box-shadow: 0 0 0 2px rgba(245, 188, 117, 0.18); border-radius: 3px; }

/* rules and checklists */
.sx-rules { list-style: none; display: grid; gap: 10px; margin-top: 24px; }
.sx-rules li { position: relative; padding: 15px 18px 15px 50px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.015); font-size: 15.5px; line-height: 1.5; color: var(--text-soft); }
.sx-rules li b { color: var(--text); font-weight: 600; }
.sx-rules li::before { content: ""; position: absolute; left: 18px; top: 18px; width: 16px; height: 16px; border-radius: 50%; background: #4ADE80; }
.sx-rules li::after { content: ""; position: absolute; left: 23.5px; top: 21px; width: 4px; height: 8px; border: solid #06210f; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* cards that link on: uses, related reading */
.sx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.sx-cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-card { --c: var(--accent); display: flex; flex-direction: column; padding: 22px 22px 20px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.02); color: var(--text); text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; }
a.sx-card:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); background: rgba(255, 255, 255, 0.035); }
.sx-card small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.sx-card b { margin-top: 10px; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.sx-card span { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--text-mute); }
.sx-card i { margin-top: auto; padding-top: 16px; font-style: normal; font-size: 13px; color: var(--c); }
.sx-card.am { --c: #F5BC75; } .sx-card.gr { --c: #4ADE80; } .sx-card.vi { --c: #C8BCFF; }

/* FAQ in a page: the homepage accordion */
.sx-art .faq-list { margin-top: 20px; }
.sx-faq { max-width: 860px; margin: 0 auto; padding: 0 24px; }

.sx-bottom { margin-top: 40px; }
.sx-note { font-size: 13.5px; line-height: 1.55; color: var(--text-mute); margin-top: 16px; }

/* ── a real capture as the hero visual, at its own shape ── */
.sx-hero-shot { max-width: 1040px; margin: 72px auto 0; padding: 0 24px; }
.sx-hero-shot .sx-shot video { display: block; width: 100%; height: auto; }

/* ── MEDDPICC: one tab per letter, the panel shows what to find out and what to ask ── */
.sx-letters { margin-top: 30px; border: 1px solid var(--line-bright); border-radius: 18px; background: #0A0A0E; overflow: hidden; }
.sx-ltabs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.sx-ltab { --c: #93D4FF; position: relative; padding: 18px 6px 15px; border: 0; border-right: 1px solid var(--line); background: none; color: var(--text-mute); font-family: var(--sans); text-align: center; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; }
.sx-ltab:last-child { border-right: 0; }
.sx-ltab b { display: block; font-family: var(--mono); font-size: 28px; font-weight: 500; line-height: 1; color: var(--text-soft); transition: color 0.25s ease; }
.sx-ltab span { display: block; margin-top: 9px; font-size: 11px; line-height: 1.25; }
.sx-ltab:hover b { color: var(--text); }
.sx-ltab[aria-selected="true"] { background: color-mix(in srgb, var(--c) 9%, transparent); color: var(--text-soft); }
.sx-ltab[aria-selected="true"] b { color: var(--c); }
.sx-ltab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c); }
.sx-lpanel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 36px; padding: 30px 32px 32px; }
.sx-lpanel[hidden] { display: none; }
.sx-lpanel h3 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.025em; }
.sx-lpanel h3 i { font-style: normal; font-family: var(--mono); font-weight: 500; color: var(--c); margin-right: 10px; }
.sx-lpanel dt { margin-top: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); }
.sx-lpanel dd { margin-top: 5px; font-size: 15px; line-height: 1.55; color: var(--text-soft); }
.sx-lqs-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); margin-bottom: 12px; }
.sx-lqs { list-style: none; display: grid; gap: 8px; }
.sx-lqs li { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px 13px 16px; border: 1px solid var(--line); border-left: 2px solid var(--c); border-radius: 10px; background: rgba(255, 255, 255, 0.02); font-size: 15.5px; line-height: 1.45; color: var(--text); }
.sx-lqs li span { flex: 1; }
.sx-lqs .qp-copy { flex: none; }

/* the acronym in the guide's hero: each letter lights in turn, and opens its tab below */
.sx-word { display: flex; justify-content: center; gap: clamp(4px, 1vw, 14px); margin-top: 40px; }
.sx-word a { --c: #93D4FF; display: block; min-width: 0; text-align: center; text-decoration: none; color: var(--text-fade); }
.sx-word b { display: block; font-family: var(--mono); font-size: clamp(34px, 5vw, 64px); font-weight: 500; line-height: 1; color: rgba(255, 255, 255, 0.16); animation: sxLetter 9.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.6s); }
.sx-word span { display: block; margin-top: 10px; font-size: clamp(9px, 0.85vw, 11.5px); line-height: 1.2; color: var(--text-mute); opacity: 0.55; animation: sxName 9.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.6s); }
.sx-word a:hover b { color: var(--c); }
@keyframes sxLetter { 0%, 100% { color: rgba(255, 255, 255, 0.16); text-shadow: none; } 6%, 62% { color: var(--c); text-shadow: 0 0 22px color-mix(in srgb, var(--c) 55%, transparent); } 72% { color: rgba(255, 255, 255, 0.16); text-shadow: none; } }
@keyframes sxName { 0%, 100% { opacity: 0.55; color: var(--text-mute); } 6%, 62% { opacity: 1; color: var(--text-soft); } 72% { opacity: 0.55; } }

/* ── meeting bot vs desktop assistant: two lanes of steps, lit in step with each other ── */
.sx-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1180px; margin: 72px auto 0; padding: 0 24px; }
.sx-lane { --c: #93D4FF; padding: 26px 28px 8px; border: 1px solid var(--line-bright); border-radius: 20px; background: #0A0A0E; }
.sx-lane.bot { --c: #FF8A95; }
.sx-lane.app { --c: #4ADE80; }
.sx-lane-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.sx-lane-h h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.sx-lane-h small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); white-space: nowrap; }
.sx-lane ol { list-style: none; margin-top: 24px; }
.sx-lane li { position: relative; padding: 0 0 28px 46px; }
.sx-lane li::before { content: ""; position: absolute; left: 5px; top: 1px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: #0A0A0E; transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease; }
.sx-lane li::after { content: ""; position: absolute; left: 14.5px; top: 25px; bottom: 3px; width: 1.5px; background: var(--line-bright); transition: background 0.4s ease; }
.sx-lane li:last-child::after { display: none; }
.sx-lane li.on::before { border-color: var(--c); background: color-mix(in srgb, var(--c) 30%, #0A0A0E); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 14%, transparent), 0 0 16px color-mix(in srgb, var(--c) 60%, transparent); }
.sx-lane li.on::after { background: color-mix(in srgb, var(--c) 55%, transparent); }
.sx-lane li b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; color: var(--text-mute); transition: color 0.4s ease; }
.sx-lane li span { display: block; margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--text-fade); transition: color 0.4s ease; }
.sx-lane li.on b { color: var(--text); }
.sx-lane li.on span { color: var(--text-soft); }
.sx-lane li .sx-when { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 100px; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 2px; border: 1px solid var(--line-bright); color: var(--text-mute); }
.sx-lane li .sx-when.now { color: #4ADE80; border-color: rgba(74, 222, 128, 0.45); }
.sx-lane li .sx-when.late { color: #FF8A95; border-color: rgba(255, 138, 149, 0.4); }

/* ── FAQ page: group links, then the groups ── */
.sx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 30px; }
.sx-chips a { padding: 8px 14px; border: 1px solid var(--line-bright); border-radius: 100px; font-size: 13px; font-weight: 500; color: var(--text-soft); text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease; }
.sx-chips a:hover { color: var(--text); border-color: var(--line-strong); }

/* ── features hub: before, during and after the call ── */
.sx-phases { max-width: 1180px; margin: 110px auto 0; padding: 0 24px; }
.sx-phase { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; padding: 56px 0; border-top: 1px solid var(--line); }
.sx-phase-k { position: sticky; top: 110px; align-self: start; }
.sx-phase-k small { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c, var(--accent)); }
.sx-phase-k b { display: block; margin-top: 12px; font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.sx-phase-k p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--text-mute); }
.sx-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sx-fcard { --c: var(--accent); display: block; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.02); color: var(--text); text-decoration: none; overflow: hidden; transition: border-color 0.2s ease; }
a.sx-fcard:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.sx-fcard.wide { grid-column: 1 / -1; }
.sx-fimg { display: grid; place-items: center; background: #05060a; border-bottom: 1px solid var(--line); }
.sx-fimg img { display: block; width: 100%; height: auto; }
.sx-fimg.tall { padding: 18px 0; }
.sx-fimg.tall img { width: auto; max-width: 100%; max-height: 440px; }
.sx-fbody { padding: 20px 22px 22px; }
.sx-fbody small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); }
.sx-fbody b { display: block; margin-top: 8px; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.018em; }
.sx-fbody span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text-mute); }
.sx-fbody i { display: block; margin-top: 14px; font-style: normal; font-size: 13px; color: var(--c); }
.sx-fcard.am { --c: #F5BC75; } .sx-fcard.gr { --c: #4ADE80; } .sx-fcard.vi { --c: #C8BCFF; }

/* ── mock only: the notes panel's search preview ── */
.sx-notes { width: 390px; }
.sx-notes.min { width: auto; }
.sx-serp { padding: 12px 14px 13px; border-radius: 10px; background: #0D0D14; border: 1px solid var(--line); }
.sx-serp b { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; color: #B9C8FF; }
.sx-serp span { display: block; margin: 4px 0 6px; font-family: var(--mono); font-size: 10.5px; color: #6EE872; word-break: break-all; }
.sx-serp p { margin: 0; font-size: 12.5px; line-height: 1.5; }
[data-planned] { cursor: alias; }

/* ── the map of every planned page ── */
.sx-map { max-width: 1180px; margin: 0 auto; padding: 0 24px 40px; }
.sx-map-h { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin: 80px 0 14px; }
.sx-map-rows { border: 1px solid var(--line); border-radius: 16px; background: rgba(8, 8, 12, 0.92); overflow: hidden; }
.sx-map-rows .sx-map-row:first-child { border-top: 0; }
.sx-map-row { display: grid; grid-template-columns: 48px minmax(0, 1.15fr) minmax(0, 1.5fr) 96px; gap: 22px; padding: 18px 14px; border-top: 1px solid var(--line); scroll-margin-top: 120px; }
.sx-map-id { font-family: var(--mono); font-size: 12px; color: var(--text-mute); padding-top: 2px; }
.sx-map-main b { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; color: var(--text-soft); }
.sx-map-row.on .sx-map-main b a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(147, 212, 255, 0.4); text-underline-offset: 4px; }
.sx-map-main code { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11.5px; color: var(--accent); word-break: break-all; }
.sx-map-main span { display: block; margin-top: 4px; font-size: 12px; color: var(--text-mute); }
.sx-map-q { font-size: 13.5px; line-height: 1.5; color: var(--text-soft); }
.sx-map-q small { display: block; margin: 10px 0 2px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mute); }
.sx-map-q small:first-child { margin-top: 0; }
.sx-map-q i { color: var(--text-fade); }
.sx-map-s { text-align: right; }
.sx-map-row:target { background: rgba(245, 188, 117, 0.06); outline: 1px solid rgba(245, 188, 117, 0.45); border-radius: 12px; }
.sx-files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }

@media (max-width: 1100px) {
  .sx-phase { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
  .sx-body { grid-template-columns: minmax(0, 720px); }
  .sx-toc { display: none; }
  .sx-wide { margin-left: 0; }
}
@media (max-width: 760px) {
  .sx-hero { padding-top: 116px; }
  .sx-crumbs { margin-bottom: 22px; }
  .sx-answer { padding: 20px 18px 22px; margin-top: 32px; }
  .sx-hero-film { margin-top: 48px; padding: 0 16px; }
  .sx-body { margin-top: 80px; padding: 0 16px; }
  .sx-art > section { margin-bottom: 80px; }
  .sx-art p { font-size: 16px; }
  .sx-steps, .sx-cards, .sx-cards.three, .sx-pair, .sx-files { grid-template-columns: minmax(0, 1fr); }
  .sx-swap-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px; }
  .sx-tl { padding: 22px 16px 20px; }
  .sx-tl-lane { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sx-tl-track, .sx-tl-lane.after .sx-tl-track { height: auto; display: flex; flex-wrap: wrap; gap: 6px; }
  .sx-tl-chip, .sx-tl-chip.hi, .sx-tl-chip.l, .sx-tl-chip.r { position: static; transform: none; font-size: 10px; padding: 5px 8px; }
  .sx-tl-chip::after { display: none; }
  .sx-tl-rail { position: relative; width: 100%; margin-top: 8px; }
  .sx-map-row { grid-template-columns: 40px minmax(0, 1fr); }
  .sx-hero-shot { margin-top: 48px; padding: 0 16px; }
  .sx-word { gap: 2px; }
  .sx-word span { display: none; }
  .sx-ltabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sx-ltab:nth-child(4) { border-right: 0; }
  .sx-ltab:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
  .sx-lpanel { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 18px 24px; }
  .sx-flow { grid-template-columns: minmax(0, 1fr); margin-top: 48px; padding: 0 16px; }
  .sx-lane { padding: 22px 18px 4px; }
  .sx-phases { margin-top: 72px; padding: 0 16px; }
  .sx-phase { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 40px 0; }
  .sx-phase-k { position: static; }
  .sx-fgrid { grid-template-columns: minmax(0, 1fr); }
  .sx-map-q { grid-column: 2; }
  .sx-map-s { grid-column: 2; text-align: left; }
}
@media (max-width: 640px) {
  .v7-table.sx-tbl tbody td::before { content: attr(data-k); }
  .v7-table.sx-tbl tbody td:nth-of-type(2)::before { color: #C8BCFF; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-word b, .sx-word span { animation: none; color: var(--c); opacity: 1; }
  .sx-tl-chip { opacity: 1; transition: none; }
}

/* mistakes: a red cross where the rules have a green check */
.sx-rules-x li::before { background: rgba(255, 107, 122, 0.16); border: 1.5px solid #FF8A95; }
/* ── data posts: headline figures, bars drawn to scale (0-100), unit dots, numbered sources ── */
.sx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1180px; margin: 64px auto 0; padding: 0 24px; text-align: left; }
.sx-stats.in { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin: 30px 0 0; padding: 0; }
.sx-stat { --c: #93D4FF; display: flex; flex-direction: column; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(12, 12, 18, 0.86); }
.sx-stat b { white-space: nowrap; font-size: clamp(34px, 3.6vw, 56px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; color: var(--c); font-variant-numeric: tabular-nums; }
.sx-stat span { margin-top: 12px; font-size: 14.5px; line-height: 1.45; color: var(--text-soft); }
.sx-stat small { margin-top: auto; padding-top: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--text-mute); }
.sx-stat.am { --c: #F5BC75; } .sx-stat.gr { --c: #4ADE80; } .sx-stat.vi { --c: #C8BCFF; }
.sx-chart { padding: 26px 26px 20px; border: 1px solid var(--line-bright); border-radius: 16px; background: #05060a; }
.sx-chart-h { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.sx-chart-sub { margin: 6px 0 16px; font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
.sx-bar { --c: #93D4FF; display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 10px 16px; align-items: center; padding: 14px 0; }
.sx-bar + .sx-bar { border-top: 1px solid var(--line); }
.sx-bar > span { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.4; color: var(--text-soft); }
.sx-bar-t { position: relative; height: 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); }
.sx-bar-t i { position: absolute; top: 0; bottom: 0; left: var(--a, 0%); width: var(--v); border-radius: 4px; background: var(--c); }
.sx-bar b { white-space: nowrap; text-align: right; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.sx-bar.am { --c: #F5BC75; } .sx-bar.gr { --c: #4ADE80; } .sx-bar.vi { --c: #C8BCFF; }
.sx-axis { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 16px; margin-top: 4px; }
.sx-axis div { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--text-fade); }
.sx-units { display: flex; flex-wrap: wrap; gap: 12px 10px; margin-top: 4px; }
.sx-unit { --u: rgba(255, 255, 255, 0.16); position: relative; width: 38px; height: 50px; }
.sx-unit::before { content: ""; position: absolute; left: 11px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--u); }
.sx-unit::after { content: ""; position: absolute; left: 3px; top: 20px; width: 32px; height: 30px; border-radius: 16px 16px 6px 6px; background: var(--u); }
.sx-unit.on { --u: #4ADE80; }
.sx-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-family: var(--mono); font-size: 11px; color: var(--text-mute); }
.sx-key span { display: inline-flex; align-items: center; gap: 8px; }
.sx-key span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k, rgba(255, 255, 255, 0.16)); }
.sx-art sup { font-size: 11px; line-height: 0; }
.sx-art sup a { padding: 0 2px; color: var(--accent); text-decoration: none; font-family: var(--mono); }
.sx-src { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.sx-src li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.02); scroll-margin-top: 110px; }
.sx-src li > i { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--accent); }
.sx-src li div { font-size: 14.5px; line-height: 1.55; color: var(--text-soft); }
.sx-src li b { color: var(--text); font-weight: 600; }
.sx-src li a { color: var(--accent); overflow-wrap: anywhere; }
.sx-src li small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--text-mute); }
@media (max-width: 1100px) { .sx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .sx-stats { margin-top: 44px; padding: 0 16px; gap: 10px; }
  .sx-stats.in { padding: 0; }
  .sx-stat { padding: 18px 16px 14px; }
  .sx-stat span { font-size: 13.5px; }
  .sx-chart { padding: 20px 16px 16px; }
  .sx-bar, .sx-axis { grid-template-columns: minmax(0, 1fr) 70px; gap: 8px 12px; }
  .sx-bar b { font-size: 16px; }
  .sx-unit { width: 28px; height: 38px; }
  .sx-unit::before { left: 8px; width: 12px; height: 12px; }
  .sx-unit::after { left: 2px; top: 15px; width: 24px; height: 23px; }
}

.sx-rules-x li::after { content: "\00D7"; left: 18px; top: 18px; width: 16px; height: 16px; border: 0; transform: none; color: #FF8A95; font-size: 13px; font-weight: 700; line-height: 15px; text-align: center; }