/* ══════════════════════════════════════════════════════════════════
   hadef marketing v2 — greenfield stylesheet
   Anchored to serus.ai (primary) + deel + linear + anthropic.
   Brand Agent spec tokens only. No gradients. No glass. No video bg.
══════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  /* Colors (Brand Agent spec, immutable) */
  --cream:        #F4F2ED;
  --cream-alt:    #EEEBE3;
  --ink:          #1C1917;
  --ink-soft:     #2D2D2D;
  --muted:        #555555;
  --border:       rgba(28, 25, 23, 0.10);
  --border-strong: rgba(28, 25, 23, 0.18);
  --accent:       #E8621A;
  --accent-soft:  rgba(232, 98, 26, 0.08);
  --accent-hover: #D4541A;

  --surface-dark:   #1C1917;
  --on-dark:        #F4F2ED;
  --on-dark-soft:   rgba(244, 242, 237, 0.78);
  --on-dark-muted:  rgba(244, 242, 237, 0.52);
  --border-on-dark: rgba(244, 242, 237, 0.14);

  --font-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace;

  --fs-display-xl: clamp(38px, 5vw, 60px);
  --fs-display-l:  clamp(36px, 4.6vw, 60px);
  --fs-display-m:  clamp(28px, 3.4vw, 42px);
  --fs-heading-l:  clamp(22px, 2.2vw, 28px);
  --fs-heading-m:  18px;
  --fs-body-l:     19px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    13px;
  --fs-label:      12px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;
  --sp-7: 64px;
  --sp-8: 96px;
  --sp-9: 128px;

  --r-button: 10px;
  --r-card:   16px;
  --r-full:   9999px;

  --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.03);
  --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.05);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     150ms;
  --dur-standard: 300ms;
  --dur-scroll:   600ms;

  --max-container: 1200px;
  --max-prose:     680px;
  --max-hero:      820px;
  --nav-height:    80px;
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--cream);
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* mobile safety net for any mock card that pushes past viewport */
}
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: transparent; }

/* ── Primitives ─────────────────────────────────────────────── */
.container {
  max-width: var(--max-container);
  margin: 0 auto;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}
.prose { max-width: var(--max-prose); margin-left: auto; margin-right: auto; }
.link-text { color: var(--accent); font-weight: 600; }
.link-text:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Primary button (nav, small) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--r-button);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-primary:hover { background: #000; border-color: #000; }
.btn-sm { padding: 8px 14px; font-size: var(--fs-caption); }

/* ── Nav (serus.ai style: simple horizontal, flat) ──────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-height);
  background: rgba(244, 242, 237, 0.88);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max-container);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--sp-4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.nav-brand-mark {
  height: 64px;
  width: 64px;
  display: block;
  flex-shrink: 0;
}
.nav-brand-wordmark {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-left: -2px;
}
.nav-links { display: flex; gap: var(--sp-5); justify-self: center; }
.nav-links a {
  font-size: var(--fs-body-s);
  font-weight: 500;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-cta-row { display: flex; align-items: center; gap: var(--sp-3); }
.nav-link-muted { font-size: var(--fs-body-s); font-weight: 500; color: var(--muted); }
.nav-link-muted:hover { color: var(--ink); }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-inner { grid-template-columns: auto auto; justify-content: space-between; }
}

/* ── Hero — two-column grid aligned to nav container ─── */
.hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
  background: var(--cream);
  text-align: left;
  position: relative;
  overflow: hidden;
}
/* Subtle animated gradient overlay on hero for depth */
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(238, 108, 77, 0.04) 0%, transparent 60%);
  border-radius: 50%;
  pointer-events: none;
  animation: hero-glow 12s ease-in-out infinite alternate;
}
@keyframes hero-glow {
  0% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  100% { transform: translate(-40px, 30px) scale(1.1); opacity: 1; }
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.hero-copy {
  /* sits in the left column, no extra padding so its left edge aligns
     with the nav-brand-mark left edge inside .container */
  max-width: 600px;
}
@media (max-width: 880px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-copy { max-width: 100%; }
}
.hero-headline {
  font-size: var(--fs-display-xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--sp-4);
  /* Each sentence gets its own line via .hero-headline-line block-span */
}
.hero-headline-line {
  display: block;
}
/* Second sentence ("Until now.") gets the accent color so it reads as
   an emphatic coda instead of an orphaned line. */
.hero-headline-line + .hero-headline-line {
  color: var(--accent);
  margin-top: 4px;
}
.hero-subhead {
  font-size: var(--fs-body-l);
  line-height: 1.55;
  color: var(--muted);
  max-width: 580px;
  margin-bottom: var(--sp-6);
}
.hero-cta-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
@media (min-width: 561px) {
  .hero-cta-row {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  .hero-cta-row > .btn-google,
  .hero-cta-row > .btn-start-free {
    width: auto;
    max-width: none;
    flex: 0 1 auto;
  }
}
/* Two-column hero: keep CTAs on one row when the copy column is tight (e.g. ~1024px). */
@media (min-width: 561px) and (max-width: 1040px) {
  .hero-inner .btn-google {
    min-width: 200px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Start free — primary CTA, Stripe-style: black fill, arrow glyph, slightly narrower */
.btn-start-free {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--ink);
  border-radius: var(--r-button);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn-start-free:hover {
  background: #000;
  transform: translateY(-1px);
}
.btn-start-free-arrow {
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn-start-free:hover .btn-start-free-arrow {
  transform: translateX(3px);
}

/* Sign up with Google — serus pattern: white fill, hairline border, Google G left */
.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  padding: 14px 22px;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-button);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn-google:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.btn-google-icon { flex-shrink: 0; }

@media (max-width: 560px) {
  .hero-cta-row {
    gap: 8px;
  }
  .btn-google {
    min-width: 0;
    flex: 1 1 42%;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
    gap: 8px;
  }
  .btn-start-free {
    flex: 1 1 42%;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
  }
}

/* ── Hero video card (right column): vertical 9:16 with chat overlay ─── */
.hero-video {
  width: 340px;
  justify-self: end; /* aligns right edge with .container right edge */
}
.hero-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: #1C1917;
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 24px 48px rgba(28,25,23,0.18);
}
.hero-video-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* bias upward so the person stays centered as the bottom overlay lands */
  display: block;
}
/* Soft dark gradient at bottom so the chat overlay reads cleanly over any frame */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(28,25,23,0.10) 0%,
    rgba(28,25,23,0.02) 35%,
    rgba(28,25,23,0.55) 78%,
    rgba(28,25,23,0.85) 100%
  );
  pointer-events: none;
}
/* Stack of overlay UI: proof card (anchor) + static outcome line */
.hero-video-stack {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-video-suggest {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.24), 0 2px 10px rgba(28,25,23,0.1);
}
.hero-video-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Show artwork thumbnail in the suggestion row (replaces orange h avatar) */
.hero-video-show-art {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  box-shadow: 0 2px 10px rgba(28, 25, 23, 0.12);
}
.hero-video-suggest-meta { flex: 1; min-width: 0; }
.hero-video-suggest-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.hero-video-suggest-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hero-video-suggest-status--proof {
  align-items: flex-start;
  text-transform: none;
  letter-spacing: 0.01em;
  font-family: var(--font-sans);
  color: var(--muted);
  margin-top: 8px;
}
.hero-video-suggest-proof {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  opacity: 0.94;
  max-width: none;
}
.hero-video-outcome-note {
  margin: 0;
  padding: 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(248, 245, 240, 0.55);
  text-align: center;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hero-video-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2EB872;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(46,184,114,0.45);
  animation: hmc-pulse 2400ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.hero-video-suggest-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 18px;
  flex-shrink: 0;
}
.hero-video-suggest-wave span {
  display: inline-block;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  animation: hmc-wave 900ms ease-in-out infinite;
}
.hero-video-suggest-wave span:nth-child(1) { height: 4px;  animation-delay:   0ms; }
.hero-video-suggest-wave span:nth-child(2) { height: 9px;  animation-delay:  60ms; }
.hero-video-suggest-wave span:nth-child(3) { height: 12px; animation-delay: 120ms; }
.hero-video-suggest-wave span:nth-child(4) { height: 7px;  animation-delay: 180ms; }
.hero-video-suggest-wave span:nth-child(5) { height: 11px; animation-delay: 240ms; }
.hero-video-suggest-wave span:nth-child(6) { height: 14px; animation-delay: 300ms; }
.hero-video-suggest-wave span:nth-child(7) { height: 6px;  animation-delay: 360ms; }
.hero-video-suggest-wave span:nth-child(8) { height: 10px; animation-delay: 420ms; }
@media (max-width: 880px) {
  .hero-video { width: min(340px, 90%); justify-self: center; }
}

/* ── Logo band — full-width section under hero (Stripe pattern) ─── */
.logo-band {
  padding: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 48px);
  background: var(--cream);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Hero logo row — Stripe.com/en-ca marquee pattern.
   Single line, slow continuous right-to-left scroll, edge-faded. */
.hero-logo-row {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
}
.hero-logo-row-label {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.01em;
  margin-bottom: var(--sp-4);
  text-align: center;
}
.logo-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fade the left and right edges so logos enter and exit cleanly */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 64px,
    #000 calc(100% - 64px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 64px,
    #000 calc(100% - 64px),
    transparent 100%
  );
  display: flex;
  /* Two tracks side-by-side, total width 200% of container,
     animated translateX from 0 to -50% gives a seamless loop */
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 39px;
  padding-right: 39px; /* match gap so the seam is invisible */
  animation: hadef-marquee 75s linear infinite;
  will-change: transform;
}
.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}

/* Default logo cell — Hershey/NVIDIA/Microsoft baseline.
   Per-logo override classes below tune the outliers per Tan's review. */
.logo-marquee-item {
  height: 32px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  display: block;
  opacity: 0.85;
  flex-shrink: 0;
  mix-blend-mode: multiply;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.logo-marquee-item:hover { opacity: 1; }

/* Per-logo size normalization (Tan's review, April 14):
   wide marks shrink, small marks grow, so visual weight reads even. */
.logo-marquee-item.lm-uber       { height: 22px; max-width: 78px; }
.logo-marquee-item.lm-visa       { height: 22px; max-width: 70px; }
.logo-marquee-item.lm-ibm        { height: 26px; max-width: 80px; }
.logo-marquee-item.lm-pacers     { height: 44px; max-width: 60px; }
.logo-marquee-item.lm-nfl        { height: 44px; max-width: 56px; }
.logo-marquee-item.lm-mattel     { height: 44px; max-width: 50px; }
.logo-marquee-item.lm-fidelity   { height: 22px; max-width: 100px; }
.logo-marquee-item.lm-adobe      { height: 22px; max-width: 90px;  }
.logo-marquee-item.lm-warner     { height: 40px; max-width: 80px;  }
.logo-marquee-item.lm-hurricanes { height: 40px; max-width: 60px;  }
.logo-marquee-item.lm-nestle     { height: 36px; max-width: 60px;  }
.logo-marquee-item.lm-disney     { height: 32px; max-width: 110px; }
.logo-marquee-item.lm-pepsi      { height: 32px; max-width: 110px; }
.logo-marquee-item.lm-microsoft  { height: 22px; max-width: 100px; }
.logo-marquee-item.lm-hershey    { height: 22px; max-width: 80px;  }
.logo-marquee-item.lm-nvidia     { height: 22px; max-width: 110px; }
.logo-marquee-item.lm-kraft      { height: 22px; max-width: 110px; }

@keyframes hadef-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
  /* When motion is off, second track sits beside first; just hide it */
  .logo-marquee-track[aria-hidden="true"] { display: none; }
}

@media (max-width: 720px) {
  .logo-marquee-track { gap: 32px; padding-right: 32px; }
  .logo-marquee-item { height: 22px; width: 80px; max-width: 80px; }
}

/* ─────────────────────────────────────────────────────────────
   Section opener — eyebrow + heading + sub. Re-used on every
   section so the page reads as a coherent editorial layout.
───────────────────────────────────────────────────────────── */
.section-opener {
  max-width: 720px;
  margin: 0 auto var(--sp-6);
  text-align: center;
}
/* Shared eyebrow — mono, uppercase, accent (hero + section openers). */
.s-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
}
.section-heading {
  font-size: var(--fs-display-m);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 16px;
  margin-bottom: 0;
}
.section-sub {
  font-size: var(--fs-body-l);
  line-height: 1.6;
  color: var(--muted);
  margin-top: 16px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 720px) {
  .section-sub { font-size: var(--fs-body); }
}

/* ─────────────────────────────────────────────────────────────
   Hero mockup section — Linear-style large product preview
   Sits below the hero. Card is real HTML/CSS, populated with
   template art (placeholder name + your podcast thumbnail).
   Bottom-right radial fade so the rectangle dissolves into page.
───────────────────────────────────────────────────────────── */
.hero-mockup-section {
  padding: var(--sp-5) 0 var(--sp-8);
  background: var(--cream);
}
.hero-mockup-wrap {
  max-width: 1080px;
}
.hero-mockup-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px rgba(28,25,23,0.08);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-standard) var(--ease-out),
              box-shadow var(--dur-standard) var(--ease-out);
}
.hero-mockup-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 18px 44px rgba(28,25,23,0.10);
}

/* Chrome bar */
.hmc-chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 16px;
  background: #FAFAF8;
  border-bottom: 1px solid var(--border);
}
.hmc-dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.hmc-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(28,25,23,0.18);
}
.hmc-dots span:nth-child(1) { background: #ED6A5E; }
.hmc-dots span:nth-child(2) { background: #F4BF4F; }
.hmc-dots span:nth-child(3) { background: #61C554; }
.hmc-url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  max-width: 360px;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hmc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}
.hmc-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2EB872;
  box-shadow: 0 0 0 0 rgba(46,184,114,0.45);
  animation: hmc-pulse 2400ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes hmc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,184,114,0.45); }
  60%  { box-shadow: 0 0 0 6px rgba(46,184,114,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,184,114,0); }
}
@media (prefers-reduced-motion: reduce) {
  .hmc-status-dot { animation: none; }
}

/* Card body: two columns on desktop */
.hmc-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: 360px;
}

/* Left column: show identity (warm-dark panel that frames the artwork) */
.hmc-show {
  padding: 28px 20px 24px;
  background: #221C19;          /* warm dark with a subtle orange undertone */
  color: var(--on-dark);
  text-align: center;
  border-right: 1px solid rgba(244,242,237,0.06);
  position: relative;
}
.hmc-show::before {
  /* faint warm wash at top so the artwork lifts off the panel */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(232,98,26,0.10), transparent 60%);
  pointer-events: none;
}
.hmc-show-art {
  width: 120px;
  height: 120px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
  margin: 0 auto 14px;
  border: 1px solid rgba(244,242,237,0.10);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  position: relative;
  z-index: 1;
}
.hmc-show-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--on-dark);
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.hmc-show-meta {
  font-size: 12px;
  color: rgba(244,242,237,0.62);
  margin-top: 4px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.hmc-show-stats {
  list-style: none;
  /* Center the stats block as a unit so it visually aligns with the
     centered artwork + show name above; numbers and labels stay
     left-aligned within the block so the columns of digits read cleanly. */
  margin: 0 auto;
  max-width: 160px;
  padding: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  border-top: 1px solid rgba(244,242,237,0.06);
  position: relative;
  z-index: 1;
}
.hmc-show-stats li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hmc-stat-num {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--on-dark);
  letter-spacing: -0.01em;
  min-width: 36px;
}
.hmc-stat-label {
  font-size: 12px;
  color: rgba(244,242,237,0.55);
}

/* Right column: live feed */
.hmc-feed {
  padding: 18px 22px 22px;
}
.hmc-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hmc-feed-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.hmc-feed-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  background: #fff;
}
.hmc-feed-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Voice input panel inside Brain mockup ─────────────────────
   Live recording demo: red rec dot + audiogram + transcribing text + cursor */
.hmc-voice {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: #FAFAF8;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.hmc-voice-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.hmc-voice-rec {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E04444;
  flex-shrink: 0;
  animation: hmc-rec-pulse 1200ms ease-in-out infinite;
}
@keyframes hmc-rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
.hmc-voice-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #B14040;
  font-weight: 600;
  flex-shrink: 0;
}
.hmc-voice-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  flex-shrink: 0;
}
.hmc-voice-wave {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  flex: 1;
  justify-content: center;
}
.hmc-voice-wave span {
  display: inline-block;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  animation: hmc-wave 900ms ease-in-out infinite;
  transform-origin: 50% 50%;
}
.hmc-voice-wave span:nth-child(1)  { height: 6px;  animation-delay:   0ms; }
.hmc-voice-wave span:nth-child(2)  { height: 12px; animation-delay:  60ms; }
.hmc-voice-wave span:nth-child(3)  { height: 16px; animation-delay: 120ms; }
.hmc-voice-wave span:nth-child(4)  { height: 10px; animation-delay: 180ms; }
.hmc-voice-wave span:nth-child(5)  { height: 14px; animation-delay: 240ms; }
.hmc-voice-wave span:nth-child(6)  { height: 18px; animation-delay: 300ms; }
.hmc-voice-wave span:nth-child(7)  { height: 8px;  animation-delay: 360ms; }
.hmc-voice-wave span:nth-child(8)  { height: 14px; animation-delay: 420ms; }
.hmc-voice-wave span:nth-child(9)  { height: 18px; animation-delay: 480ms; }
.hmc-voice-wave span:nth-child(10) { height: 12px; animation-delay: 540ms; }
.hmc-voice-wave span:nth-child(11) { height: 6px;  animation-delay: 600ms; }
.hmc-voice-wave span:nth-child(12) { height: 10px; animation-delay: 660ms; }
.hmc-voice-wave span:nth-child(13) { height: 14px; animation-delay: 720ms; }
.hmc-voice-wave span:nth-child(14) { height: 8px;  animation-delay: 780ms; }
@keyframes hmc-wave {
  0%, 100% { transform: scaleY(0.45); opacity: 0.65; }
  50%      { transform: scaleY(1);    opacity: 1;    }
}
.hmc-voice-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.hmc-cursor {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  background: var(--ink);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: hmc-cursor-blink 1100ms steps(1, end) infinite;
}
@keyframes hmc-cursor-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hmc-voice-rec, .hmc-voice-wave span, .hmc-cursor { animation: none; }
}
.hmc-feed-item {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.hmc-feed-item--accent {
  border-color: rgba(232,98,26,0.32);
  background: rgba(232,98,26,0.04);
}
.hmc-feed-source {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.hmc-feed-quote {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 6px;
}
.hmc-feed-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}
.hmc-feed-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(232,98,26,0.12);
  color: var(--accent);
}

/* Linear-style fade-frame: bottom-right radial dissolve into page bg */
.hmc-fade {
  pointer-events: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60%;
  height: 50%;
  background: radial-gradient(
    ellipse at bottom right,
    var(--cream) 0%,
    rgba(244, 242, 237, 0.85) 25%,
    rgba(244, 242, 237, 0) 70%
  );
  z-index: 2;
}

@media (max-width: 760px) {
  .hero-mockup-wrap { padding-left: 16px; padding-right: 16px; }
  .hmc-body { grid-template-columns: 1fr; min-height: 0; }
  .hmc-show {
    border-right: none;
    border-bottom: 1px solid rgba(244,242,237,0.06);
    text-align: left;
    display: grid;
    grid-template-columns: 72px 1fr;
    column-gap: 14px;
    align-items: center;
    padding: 18px 16px;
  }
  .hmc-show-art { width: 72px; height: 72px; margin: 0; grid-row: 1 / span 3; }
  .hmc-show-name, .hmc-show-meta { text-align: left; }
  .hmc-show-meta { margin-bottom: 0; }
  /* Stats: 3 even columns with stacked number + label per cell so they
     align cleanly across the row without crowding. */
  .hmc-show-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 100%;
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(244,242,237,0.08);
    text-align: left;
  }
  /* Import pills: full-width stack below stats so the labels don't truncate */
  .hmc-imports {
    grid-column: 1 / -1;
    margin-top: 12px;
    flex-direction: column;
    gap: 6px;
    width: 100%;
  }
  .hmc-import {
    width: 100%;
    font-size: 11px;
    padding: 8px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Show platforms row also full-width on mobile */
  .hmc-show .show-platforms {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
  .hmc-show-stats li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .hmc-stat-num { font-size: 16px; min-width: 0; }
  .hmc-stat-label { font-size: 11px; line-height: 1.3; }
  .hmc-url { display: none; }
  /* Drop the bottom-right radial fade on small screens — at this width
     it dissolves real content rather than the card edge. */
  .hmc-fade { display: none; }
  /* Voice panel: tighten spacing, hide the trailing wave bars so the
     timestamp doesn't get pushed off the right edge. */
  .hmc-voice { padding: 10px 12px; }
  .hmc-voice-label { font-size: 10px; }
  .hmc-voice-time { font-size: 10px; }
  .hmc-voice-wave { gap: 2px; }
  .hmc-voice-wave span:nth-child(n+9) { display: none; }
  .hmc-voice-text { font-size: 12.5px; }
  /* Card edge: enforce no horizontal overflow on the whole mockup */
  .hero-mockup-card { max-width: 100%; }
}

@media (max-width: 420px) {
  .hmc-show { grid-template-columns: 56px 1fr; column-gap: 12px; padding: 14px 12px; }
  .hmc-show-art { width: 56px; height: 56px; }
  .hmc-show-name { font-size: 14px; }
  .hmc-show-meta { font-size: 11px; }
  .hmc-stat-num { font-size: 15px; }
  .hmc-stat-label { font-size: 10px; }
  .hmc-feed { padding: 14px 14px 16px; }
  .hmc-voice-wave span:nth-child(n+7) { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   Section 3 — Three views, sticky scroll (Retool reference)
   Dark section. Left: sticky pinned mockup that fades between three.
   Right: scrolling text panels that drive the active state.
───────────────────────────────────────────────────────────── */
.ways-section {
  background: var(--surface-dark);
  color: var(--on-dark);
  padding: clamp(80px, 10vw, 144px) 0 clamp(80px, 10vw, 144px);
  border-top: 1px solid rgba(244,242,237,0.06);
  border-bottom: 1px solid rgba(244,242,237,0.06);
}
/* Section opener — dark variant */
.section-opener--dark .section-heading--dark { color: var(--on-dark); }
.section-opener--dark .section-sub--dark { color: var(--on-dark-soft); }
.s-label--dark { color: var(--accent); }

/* Two-column grid — left visual sticky, right panels scroll */
.ways-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(40px, 5vw, 96px);
  margin-top: var(--sp-7);
  align-items: start;
}
@media (max-width: 960px) {
  .ways-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* Left: visual column stretches the full row height; the FRAME inside
   is the sticky element, so it stays pinned across all three text panels. */
.ways-visual {
  /* fills the grid cell so the inner sticky frame has room to follow
     scroll all the way through the panels column */
  align-self: stretch;
  height: 100%;
}
.ways-visual-frame {
  position: sticky;
  /* Center-ish in viewport rather than hugging the nav */
  top: clamp(120px, 18vh, 200px);
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 18px;
  overflow: hidden;
  background: #0F0D0C;
  border: 1px solid rgba(244,242,237,0.10);
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}
@media (max-width: 960px) {
  .ways-visual { height: auto; align-self: auto; }
  .ways-visual-frame { position: relative; top: auto; aspect-ratio: 4 / 3; }
}

/* Three mockups stacked, only one visible at a time */
.ways-mock {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: #FCFBF8;
  color: var(--ink);
  opacity: 0;
  transition: opacity 480ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.ways-mock--active { opacity: 1; pointer-events: auto; }

.ways-mock-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #F2EFE8;
  border-bottom: 1px solid rgba(28,25,23,0.08);
  flex-shrink: 0;
}
.ways-mock-chrome .hmc-url {
  margin: 0;
  background: #fff;
  border-color: rgba(28,25,23,0.10);
  flex: 1;
  text-align: center;
}

.ways-mock-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* Legacy sidebar classes — now hidden, kept for the markup that still
   references them. We moved to a horizontal top bar instead. */
.ways-mock-side { display: none !important; }
.ways-mock-side-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.ways-mock-side-divider {
  width: 24px;
  height: 1px;
  background: rgba(28,25,23,0.08);
  margin: 4px 0;
}
.ways-mock-side-item {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(28,25,23,0.55);
  cursor: default;
  position: relative;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ways-mock-side-item:hover { background: rgba(28,25,23,0.04); color: var(--ink); }
.ways-mock-side-item--active {
  background: rgba(232,98,26,0.12);
  color: var(--accent);
}
.ways-mock-side-item--active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.ways-mock-side-spacer { flex: 1; }
.ways-mock-side-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2A201C, #4A372E);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

/* Main content area — header bar + body */
.ways-mock-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.ways-mock-main-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #FCFBF8 0%, #F6F2EA 100%);
  box-shadow: inset 0 -1px 0 rgba(28,25,23,0.02);
}
/* Top-bar app nav — horizontal pills, centered in the row */
.ways-mock-topnav {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(28,25,23,0.04);
  border-radius: 999px;
  border: 1px solid var(--border);
  justify-self: center;
}
.ways-mock-topnav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(28,25,23,0.55);
  background: transparent;
  border-radius: 999px;
  border: none;
  cursor: default;
  transition: color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.ways-mock-topnav-item:hover { color: var(--ink); }
.ways-mock-topnav-item--active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px var(--border);
}
.ways-mock-topnav-item svg { flex-shrink: 0; color: currentColor; }
.ways-mock-topnav-item--active svg { color: var(--accent); }

/* Workspace identity on the left of the top bar */
.ways-mock-workspace {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.ways-mock-workspace-art {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.ways-mock-workspace-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.ways-mock-workspace-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ways-mock-workspace-crumb {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.ways-mock-main-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  min-width: 0;
}
.ways-mock-main-title-crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.ways-mock-main-title-crumb::after { content: " / "; color: rgba(28,25,23,0.25); }
.ways-mock-main-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ways-mock-search-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--muted);
  background: #fff;
  font-family: var(--font-mono);
}
.ways-mock-icon-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.ways-mock-cta-mini {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
}
.ways-mock-content {
  flex: 1;
  padding: 18px 20px 20px;
  overflow: auto;
}

/* Guest identity strip (Pitch mock): rounded-SQUARE photo + name + company logo */
.ways-mock-guest {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: #FCFBF8;
}
.ways-mock-guest-photo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center 28%;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.ways-mock-guest-meta { min-width: 0; flex: 1; }
.ways-mock-guest-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ways-mock-guest-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.ways-mock-guest-logo {
  height: 14px;
  width: auto;
  mix-blend-mode: multiply;
  opacity: 0.88;
}
.ways-mock-guest-tags {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ways-mock-guest-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(28,25,23,0.06);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.ways-mock-guest-tag--accent {
  background: rgba(232,98,26,0.10);
  color: var(--accent);
}
.ways-mock-guest-tag--linkedin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(10,102,194,0.10);
  color: #0A66C2;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: 10.5px;
}
.ways-mock-guest-tag--linkedin .linkedin-inline-icon { flex-shrink: 0; }

/* Inline Deel logo in the send recipient meta */
.ways-send-meta-logo {
  height: 12px;
  width: auto;
  vertical-align: -1px;
  margin-left: 4px;
  mix-blend-mode: multiply;
  opacity: 0.88;
}
.ways-send-meta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ways-mock-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ways-mock-show-art {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.ways-mock-show {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ways-mock-meta {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}

/* PITCH variant */
.ways-mock-quote-label {
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 8px;
}
.ways-mock-quote {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 18px;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
}
.ways-mock-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.ways-mock-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: #F4F2ED;
  color: var(--ink-soft);
  border: 1px solid var(--border);
}
.ways-mock-chip--accent {
  background: rgba(232,98,26,0.10);
  color: var(--accent);
  border-color: rgba(232,98,26,0.32);
}
.ways-mock-actions {
  display: flex;
  gap: 8px;
}
.ways-mock-btn {
  font-size: 12px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.ways-mock-btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* PIPELINE variant */
.ways-mock-pipeline {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wmp-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.wmp-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.wmp-role { font-size: 12px; color: var(--muted); }
.wmp-meta { font-size: 11px; color: var(--muted); font-family: var(--font-mono); }
.wmp-pill {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
}
.wmp-pill--ready    { background: rgba(232,98,26,0.12); color: var(--accent); }
.wmp-pill--qa       { background: rgba(22,163,74,0.12); color: #16A34A; }
.wmp-pill--research { background: rgba(28,25,23,0.06); color: var(--muted); }
.wmp-pill--sent     { background: rgba(28,25,23,0.85); color: #fff; }
.wmp-pill--replied  { background: #16A34A; color: #fff; }

/* BRAIN variant */
.ways-mock-brain {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ways-mock-brain li {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.wmb-source {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.wmb-quote {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
}
/* Highlighted "hit" entry — the quote that will thread through
   Pitch (as hook) and Send (as pill). Visually flagged here. */
.wmb-item--hit {
  background: linear-gradient(180deg, rgba(232,98,26,0.06), rgba(232,98,26,0.015));
  border-color: rgba(232,98,26,0.35) !important;
  position: relative;
}
.wmb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.wmb-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(232,98,26,0.12);
  color: var(--accent);
}
.wmb-source-logos {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wmb-logo {
  height: 11px;
  width: auto;
  max-width: 54px;
  object-fit: contain;
  opacity: 0.78;
  mix-blend-mode: multiply;
}

/* Right: scroll-driven text panels
   Bottom padding intentionally large so the sticky visual stays pinned
   past the 3rd panel — the handoff back to normal scroll happens only
   after the full mockup has cleared the viewport. */
.ways-panels {
  display: flex;
  flex-direction: column;
  gap: clamp(180px, 20vh, 280px);
  padding: clamp(80px, 10vh, 160px) 0 clamp(360px, 52vh, 640px);
}
.ways-panel {
  opacity: 0.45;
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.ways-panel.is-active {
  opacity: 1;
}
.ways-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFF3EC;
  background: rgba(232,98,26,0.22);
  border: 1px solid rgba(232,98,26,0.55);
  padding: 5px 11px 5px 11px;
  border-radius: 999px;
  margin-bottom: 14px;
  text-transform: none;
}
.ways-panel-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,98,26,0.18);
}
.ways-panel-heading {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  margin-bottom: 16px;
}
.ways-panel-body {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--on-dark-soft);
}

/* Pitch variant — Venn LEFT, highlighted hook quote RIGHT */
.ways-venn-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 2px 0 14px;
}
.ways-venn {
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Highlighted hook-quote card next to the Venn. Label is pinned top-right
   so it doesn't collide with the big quote-mark glyph in the top-left. */
.ways-hook {
  position: relative;
  padding: 18px 16px 14px 18px;
  background: linear-gradient(180deg, rgba(232,98,26,0.06) 0%, rgba(232,98,26,0.02) 100%);
  border: 1px solid rgba(232,98,26,0.28);
  border-radius: 12px;
}
.ways-hook-label {
  position: absolute;
  top: 10px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(232,98,26,0.10);
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 0;
}
.ways-hook-mark {
  color: rgba(232,98,26,0.45);
  margin-bottom: 2px;
}
.ways-hook-quote {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.ways-hook-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.ways-hook-attrib { color: var(--ink); font-weight: 600; }
.ways-hook-dot { color: rgba(28,25,23,0.35); }
.ways-hook-source { color: var(--muted); }

/* Mobile: stack Venn above hook quote */
@media (max-width: 900px) {
  .ways-venn-row { grid-template-columns: 1fr; gap: 10px; }
}

/* Mobile hook variant — tighter spacing for the stacked mobile mock */
.ways-hook--m {
  margin: 2px 0 12px;
  padding: 12px 14px;
}
.ways-hook--m .ways-hook-quote {
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 8px;
}
.ways-hook--m .ways-hook-label { font-size: 9px; margin-bottom: 4px; }
.ways-hook--m .ways-hook-meta { font-size: 10px; }

/* Scorecard tiles: confidence / trust / sources */
.ways-score {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.ways-score-tile {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ways-score-num {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.ways-score-num--good { color: #16A34A; }
.ways-score-unit { font-size: 14px; color: var(--muted); margin-left: 1px; font-weight: 600; }
.ways-score-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 4px;
}

/* Source mini-row under the scorecard, with propagation line */
.ways-sources {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ways-sources-label {
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 8px;
}
/* Propagation visualization: hairline behind, dots at each logo position */
.ways-sources-trail {
  position: relative;
  padding: 14px 8px 4px;
}
.ways-sources-line {
  position: absolute;
  top: 22px;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(232,98,26,0.22),
    rgba(232,98,26,0.55) 50%,
    rgba(232,98,26,0.22)
  );
  z-index: 0;
}
.ways-sources-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}
.ways-sources-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ways-sources-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--cream);
  box-shadow: 0 0 0 1px rgba(232,98,26,0.35);
}
/* Normalize logos so all three read at the same visual weight */
.ways-sources-logo {
  display: block;
  height: 16px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.82;
  mix-blend-mode: multiply;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.ways-sources-item:hover .ways-sources-logo { opacity: 1; }
/* Per-logo width tweaks so the group reads even */
.ways-sources-logo.lm-forbes      { height: 16px; max-width: 70px; }
.ways-sources-logo.lm-marketwatch { height: 12px; max-width: 90px; }
.ways-sources-logo.lm-bloomberg   { height: 12px; max-width: 80px; }

/* Send variant — multi-channel picker */
.ways-mock-body--send { padding: 0; }
.ways-send-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.ways-send-headleft { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ways-send-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.ways-send-recipient { display: flex; align-items: center; gap: 10px; }
.ways-send-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: #0A66C2; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
  flex-shrink: 0;
}
.ways-send-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.ways-send-meta { font-size: 11px; color: var(--muted); }
.ways-send-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(22,163,74,0.10);
  color: #16A34A;
  flex-shrink: 0;
}
.ways-send-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #16A34A;
}
.ways-send-status-dot--green { background: #16A34A; }
.ways-channels {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-bottom: 1px solid var(--border);
}
.ways-channel {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-sans);
  text-align: left;
  cursor: default;
  min-width: 0;
}
.ways-channel--active {
  border-color: var(--accent);
  background: rgba(232,98,26,0.04);
}
.ways-channel-icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ways-channel-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ways-channel-meta {
  font-size: 10px;
  color: var(--muted);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.ways-channel--active .ways-channel-meta { color: var(--accent); }
.ways-send-preview {
  padding: 14px 18px 16px;
}
.ways-send-preview-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
}
.ways-send-preview-msg {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 12px;
}
.ways-send-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ways-send-meta-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.ways-send-btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  background: var(--ink);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: default;
}

/* Inline pill placeholders inside the templated message —
   suggest structure without showing the real copy */
.wsp-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: baseline;
}
.wsp-pill--name   { background: rgba(10,102,194,0.10); color: #0A66C2; }
.wsp-pill--quote  { background: rgba(232,98,26,0.12);  color: var(--accent); }
.wsp-pill--source { background: rgba(22,163,74,0.12); color: #16A34A; }

/* Action chips — styled as message attachments (like a LinkedIn DM with
   linked preview cards), NOT as form-UI buttons. Muted fill, hairline
   border, small icon + label. Feels part of the message content. */
.ways-send-actions {
  gap: 6px;
  flex-wrap: wrap;
}
.ways-send-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 11px 6px 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #F7F4ED;
  color: var(--ink);
  cursor: default;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.ways-send-action:hover {
  background: #fff;
  border-color: var(--border-strong);
}
.ways-send-action svg { color: var(--accent); flex-shrink: 0; }
.ways-send-action--primary {
  background: rgba(232,98,26,0.08);
  border-color: rgba(232,98,26,0.32);
  color: var(--ink);
}
.ways-send-action--primary:hover {
  background: rgba(232,98,26,0.12);
  border-color: rgba(232,98,26,0.5);
}

/* Send variant — LinkedIn DM composer */
.ways-mock-chrome--linkedin {
  background: #F3F2EF;            /* LinkedIn neutral surface */
}
.ways-mock-linkedin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #0A66C2;            /* official LinkedIn blue */
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.ways-mock-body--send { padding: 20px 22px; }
.ways-mock-li-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.ways-mock-li-recipient {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ways-mock-li-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #0A66C2;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ways-mock-li-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ways-mock-li-meta {
  font-size: 11px;
  color: var(--muted);
}
.ways-mock-li-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.ways-mock-li-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #16A34A;
}
.ways-mock-li-msg {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.ways-mock-li-msg p { margin: 0; }
.ways-mock-li-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ways-mock-li-attach {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--font-sans);
}
.ways-mock-li-send {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #0A66C2;
  border: none;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.ways-mock-li-send:hover { background: #084F9E; }

/* ── Mobile-first: ways section restructure ─────────────────── */
@media (max-width: 960px) {
  .ways-section { padding: 64px 0; }
  .ways-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* Drop sticky behavior; let the visual frame become a flex column
     of stacked mocks. */
  .ways-visual { position: relative; top: auto; margin-bottom: 8px; }
  .ways-visual-frame {
    position: relative;
    top: auto;
    aspect-ratio: auto;
    height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: visible;
  }
  .ways-mock {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    border: 1px solid rgba(244,242,237,0.10);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.30);
  }
  .ways-mock-body { padding: 18px 18px; }
  .ways-mock-quote { font-size: 14px; }
  .ways-mock-quote-label { font-size: 10px; }
  .ways-mock-li-msg { font-size: 12.5px; }
  .ways-mock-li-name { font-size: 13px; }
  .ways-mock-li-avatar { width: 36px; height: 36px; font-size: 13px; }
  .ways-mock-pipeline .wmp-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .wmp-role { grid-column: 1 / -1; }
  /* Hard-clip mocks to the visual frame width on mobile so nothing pushes
     past the viewport edge. */
  .ways-mock { max-width: 100%; overflow: hidden; }
  .ways-mock-body { padding: 16px 14px; max-width: 100%; }
  .ways-mock-show { font-size: 13px; }
  .ways-mock-meta { font-size: 10px; }
  .ways-mock-show-art { width: 36px; height: 36px; }
  .ways-mock-chrome .hmc-url { font-size: 10px; max-width: 60%; }
  .ways-mock-chips { gap: 4px; }
  .ways-mock-chip { font-size: 10px; padding: 4px 8px; }
  .ways-mock-li-msg { font-size: 12px; }
  .wmp-name { font-size: 12px; }
  .wmp-role { font-size: 11px; }
  .wmp-meta { font-size: 10px; }
  .wmp-pill { font-size: 9px; }
  .wmb-quote { font-size: 12px; }
  .wmb-source { font-size: 10px; }
  .ways-panels {
    gap: 32px;
    padding: 0;
  }
  .ways-panel { opacity: 1; }
  .ways-panel-heading { font-size: 22px; }
  .ways-venn svg { height: 130px; }
}

/* Mobile-only stack — hidden on desktop by default */
.ways-mobile-stack { display: none; }

/* ── Mobile: hide desktop mocks, show mobile stack ──────────── */
@media (max-width: 760px) {
  .ways-visual-frame { display: none; }
  .ways-mobile-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .ways-m-mock {
    margin: 0;
    background: #FCFBF8;
    border: 1px solid rgba(244,242,237,0.14);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.30);
    overflow: hidden;
    color: var(--ink);
  }
  .ways-m-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #FCFBF8 0%, #F6F2EA 100%);
    border-bottom: 1px solid var(--border);
  }
  /* Darker chrome variant — workspace identity reads as elevated "app shell" */
  .ways-m-chrome--dark {
    background: linear-gradient(180deg, #221C19 0%, #1A1613 100%);
    border-bottom: 1px solid rgba(244,242,237,0.08);
    position: relative;
  }
  .ways-m-chrome--dark::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 80% at 20% 0%, rgba(232,98,26,0.08), transparent 60%);
    pointer-events: none;
  }
  .ways-m-chrome--dark .ways-m-title { color: var(--on-dark); position: relative; z-index: 1; }
  .ways-m-chrome--dark .ways-m-sub   { color: rgba(244,242,237,0.6); position: relative; z-index: 1; }
  .ways-m-chrome--dark .ways-m-active { color: var(--accent); }
  .ways-m-chrome--dark .ways-m-art {
    border-color: rgba(244,242,237,0.18);
    position: relative; z-index: 1;
  }
  .ways-m-chrome--dark .ways-m-more { color: rgba(244,242,237,0.5); position: relative; z-index: 1; }
  .ways-m-chrome--dark .ways-m-id { position: relative; z-index: 1; }
  .ways-m-chrome--dark .ways-m-status { position: relative; z-index: 1; }

  /* Guest identity strip — lives between dark chrome and light body */
  .ways-m-guest {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #FCFBF8;
    border-bottom: 1px solid var(--border);
  }
  .ways-m-guest-photo {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    object-fit: cover;
    object-position: center 28%;
    border: 1px solid var(--border);
    flex-shrink: 0;
  }
  .ways-m-guest-initials {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: #0A66C2;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .ways-m-guest-meta { min-width: 0; flex: 1; }
  .ways-m-guest-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .ways-m-guest-title {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    flex-wrap: wrap;
  }
  /* Slim variant — single-line abbreviated profile. No photo. */
  .ways-m-guest--slim { padding: 10px 14px; }
  .ways-m-guest--minimal { padding: 8px 14px; }
  .ways-m-guest-slim-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.3;
  }
  .ways-m-guest-slim-row .ways-m-guest-name { font-size: 12px; font-weight: 700; }
  .ways-m-guest-slim-sep { color: rgba(28,25,23,0.30); }
  .ways-m-guest-slim-title { color: var(--muted); font-size: 11px; }
  .ways-m-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .ways-m-art {
    width: 34px; height: 34px; border-radius: 7px; object-fit: cover;
    border: 1px solid var(--border); flex-shrink: 0;
  }
  .ways-m-art--photo { object-position: center 28%; }
  .ways-m-inline-logo {
    height: 11px; width: auto;
    vertical-align: -1px; margin-left: 4px;
    mix-blend-mode: multiply; opacity: 0.88;
  }
  .ways-m-title { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
  .ways-m-sub {
    font-family: var(--font-mono); font-size: 10px; color: var(--muted);
    letter-spacing: 0.04em; margin-top: 2px;
  }
  .ways-m-active {
    color: var(--accent); font-weight: 700; font-family: var(--font-mono);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  .ways-m-more, .ways-m-status-dot, .ways-m-status {
    flex-shrink: 0; color: var(--muted);
  }
  .ways-m-status-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #16A34A;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.18);
  }
  .ways-m-status {
    font-family: var(--font-mono); font-size: 10px; padding: 4px 8px;
    border-radius: 6px; text-transform: uppercase; letter-spacing: 0.06em;
  }
  .ways-m-status--ok { background: rgba(22,163,74,0.12); color: #16A34A; }
  .ways-m-body { padding: 14px; }

  /* Context feed */
  .ways-m-search {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
    background: #fff; color: var(--muted);
    font-family: var(--font-mono); font-size: 11px;
    margin-bottom: 12px;
  }
  .ways-m-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .ways-m-feed li {
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
    background: #fff;
  }
  .ways-m-item--accent {
    border-color: rgba(232,98,26,0.32);
    background: rgba(232,98,26,0.04);
  }
  .ways-m-src {
    font-family: var(--font-mono); font-size: 10px; color: var(--muted);
    letter-spacing: 0.04em; margin-bottom: 4px;
  }
  .ways-m-quote { font-size: 12.5px; line-height: 1.45; color: var(--ink); font-weight: 500; }
  .ways-m-pill {
    display: inline-block; margin-top: 6px;
    font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
    background: rgba(232,98,26,0.14); color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  /* Mobile "hit" item — same pattern as desktop, tighter */
  .ways-m-item--hit {
    background: linear-gradient(180deg, rgba(232,98,26,0.06), rgba(232,98,26,0.015));
    border-color: rgba(232,98,26,0.35) !important;
  }
  .ways-m-hit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }
  .ways-m-hit-head .ways-m-pill { margin-top: 0; }
  .ways-m-hit-logos {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .ways-m-hit-logo {
    height: 10px;
    width: auto;
    max-width: 48px;
    object-fit: contain;
    opacity: 0.78;
    mix-blend-mode: multiply;
  }

  /* Pitch panel: venn + scorecard + sources */
  .ways-m-venn { margin: -4px 0 10px; display: flex; justify-content: center; }
  .ways-m-score {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
    margin-bottom: 12px;
  }
  .ways-m-score-tile {
    padding: 8px 10px; background: #fff; border: 1px solid var(--border); border-radius: 8px;
  }
  .ways-m-score-num {
    font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1;
  }
  .ways-m-score-num--good { color: #16A34A; }
  .ways-m-score-num span { font-size: 11px; color: var(--muted); margin-left: 1px; }
  .ways-m-score-label {
    font-family: var(--font-mono); font-size: 9px; color: var(--muted);
    letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px;
  }
  .ways-m-sources { padding-top: 10px; border-top: 1px solid var(--border); }
  .ways-m-sources-label {
    font-family: var(--font-mono); font-size: 10px; color: var(--muted);
    letter-spacing: 0.04em; display: block; margin-bottom: 8px;
  }
  .ways-m-sources-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    align-items: center; justify-items: center; gap: 10px;
  }
  .ways-m-logo {
    max-height: 12px; max-width: 100%; object-fit: contain;
    opacity: 0.82; mix-blend-mode: multiply;
  }

  /* Send panel: channel list + preview */
  .ways-m-channels { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .ways-m-channel {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; background: #fff; border: 1px solid var(--border); border-radius: 9px;
  }
  .ways-m-channel--active {
    border-color: var(--accent); background: rgba(232,98,26,0.04);
  }
  .ways-m-ch-icon {
    width: 22px; height: 22px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .ways-m-ch-name { font-size: 12px; font-weight: 600; color: var(--ink); flex: 1; }
  .ways-m-ch-tag {
    font-family: var(--font-mono); font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent);
  }
  .ways-m-preview {
    padding: 10px 12px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  }
  .ways-m-preview-label {
    font-family: var(--font-mono); font-size: 10px; color: var(--muted);
    letter-spacing: 0.06em; margin-bottom: 6px;
  }
  .ways-m-preview-msg { font-size: 12px; line-height: 1.45; color: var(--ink); margin-bottom: 10px; }
  .ways-m-send-btn {
    width: 100%; padding: 10px; border: none; border-radius: 8px;
    background: var(--ink); color: #fff;
    font-family: var(--font-sans); font-size: 12px; font-weight: 700; cursor: default;
  }
  .ways-m-preview-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  /* Mobile action chips — same "part of the message" feel as desktop */
  .ways-m-send-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #F7F4ED;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    cursor: default;
    white-space: nowrap;
  }
  .ways-m-send-action svg { color: var(--accent); flex-shrink: 0; }
  .ways-m-send-action--primary {
    background: rgba(232,98,26,0.08);
    border-color: rgba(232,98,26,0.32);
    color: var(--ink);
  }
}

/* Hide mobile stack on desktop (explicit for clarity) */
@media (min-width: 761px) {
  .ways-mobile-stack { display: none !important; }
}

/* ── Mobile: mocks simplified (hide sidebar, stack chrome) ───── */
@media (max-width: 600px) {
  /* Hide app sidebar on mobile — at this width it crowds the content
     and reads as noise. The chrome bar + header already signals "app." */
  .ways-mock-side { display: none; }
  .ways-mock-body { grid-template-columns: 1fr; }

  /* Header stacks so breadcrumb, title, and tools don't fight for one row */
  .ways-mock-main-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .ways-mock-main-title { flex-wrap: wrap; gap: 4px 8px; font-size: 12px; }
  .ways-mock-main-tools { flex-wrap: wrap; gap: 6px; }
  .ways-mock-search-mini { font-size: 10px; padding: 4px 8px; }
  .ways-mock-cta-mini { font-size: 10px; padding: 5px 10px; }
  .ways-mock-content { padding: 14px 14px 16px; }

  /* Scorecard stays 3 columns but tighter */
  .ways-score { gap: 6px; }
  .ways-score-tile { padding: 8px 10px; }
  .ways-score-num { font-size: 18px; }
  .ways-score-unit { font-size: 12px; }
  .ways-score-label { font-size: 9px; }

  /* Source row: tighter spacing and smaller caps so Bloomberg fits */
  .ways-sources-trail { padding: 10px 6px 2px; }
  .ways-sources-row { gap: 8px; }
  .ways-sources-logo { height: 12px !important; max-width: 100% !important; }
  .ways-sources-logo.lm-forbes      { height: 13px !important; }
  .ways-sources-logo.lm-marketwatch { height: 10px !important; }
  .ways-sources-logo.lm-bloomberg   { height: 10px !important; }

  /* Channel picker — single column on mobile */
  .ways-channels { grid-template-columns: 1fr; padding: 12px 14px; }
  .ways-channel { padding: 9px 10px; }
  .ways-channel-name { font-size: 11px; }
  .ways-channel-meta { font-size: 9px; }

  /* Send header stacks */
  .ways-send-head { padding: 12px 14px; flex-direction: column; gap: 10px; align-items: stretch; }
  .ways-send-status { align-self: flex-start; }
  .ways-send-preview { padding: 12px 14px 14px; }
  .ways-send-preview-msg { font-size: 12px; }
  .ways-send-actions { flex-wrap: wrap; gap: 10px; }
  .ways-send-btn { font-size: 11px; padding: 7px 12px; }
}

@media (max-width: 480px) {
  .section-heading { font-size: 28px; }
  .ways-mock-chrome { padding: 8px 10px; gap: 8px; }
  .ways-mock-chrome .hmc-url { font-size: 10px; padding: 3px 6px; }
  .ways-mock-linkedin-badge { font-size: 10px; padding: 3px 6px; }
}

/* ── Pending placeholder (sections 3-9) ─────────────────────── */
.pending {
  padding: var(--sp-8) 0 var(--sp-9);
  border-top: 1px solid var(--border);
}
.pending-msg {
  max-width: 640px;
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--muted);
  text-align: center;
}

/* ── Podcast platform micro-badges (Spotify, Apple, YouTube, Amazon) ────
   Small row of pill tiles that signal where a show is available. Used
   under show names in the hero video card, the Money Podcast mockup,
   and next to The Sales Rundown across the Ways mocks. */
.show-platforms {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
}
.show-platform {
  width: 18px; height: 18px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.show-platform svg { display: block; }

/* Hero variant sits next to the "Finance with Phil" name inline */
.show-platforms--hero {
  margin-top: 0;
  margin-left: 6px;
  vertical-align: middle;
}
.show-platforms--hero .show-platform { width: 16px; height: 16px; border-radius: 4px; }

/* Tiny variant for app-shell workspace strips */
.show-platforms--tiny { margin-top: 3px; gap: 3px; }
.show-platforms--tiny .show-platform { width: 13px; height: 13px; border-radius: 3px; }

/* ── Money Podcast: import pills (replace the profile-photo slot) ───── */
.hmc-imports {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  width: 100%;
}
.hmc-import {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: default;
  text-align: left;
  line-height: 1.2;
}
.hmc-import-icon {
  width: 16px; height: 16px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Brain memory icon next to the title */
.hmc-feed-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hmc-brain-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(232,98,26,0.10);
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Send mock recompose: bigger DM, smaller channel picker ──────────
   The DM is the product proof; channel buttons are chrome. Rebalance. */
.ways-channels {
  padding: 10px 14px;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.ways-channel {
  padding: 7px 9px;
  gap: 7px;
  border-radius: 8px;
}
.ways-channel-icon { width: 20px; height: 20px; border-radius: 5px; }
.ways-channel-icon svg { width: 11px; height: 11px; }
.ways-channel-name { font-size: 11px; }
.ways-channel-meta { font-size: 9.5px; }

/* Hide the email address line on secondary channels to keep the grid compact.
   Only keep it on the active channel so the reader still sees one full
   example of how hadef fills in channel-specific context. */
.ways-channel:not(.ways-channel--active) .ways-channel-meta { display: none; }

/* DM preview gets more breathing room + larger type */
.ways-send-preview { padding: 18px 22px 18px; }
.ways-send-preview-msg {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
}
.ways-send-preview-msg .wsp-pill { font-size: 12px; }

/* Compose row: attachments on the left, send button on the right. Reads
   like a real DM composer instead of a form. */
.ways-send-compose {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ways-send-attachments {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ways-send-submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 14px 8px 12px;
  cursor: default;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 6px 14px rgba(232,98,26,0.22);
  transition: background var(--dur-fast) var(--ease-out);
}
.ways-send-submit:hover { background: #D5581A; }
.ways-send-submit svg { color: #fff; flex-shrink: 0; }

/* Mobile DM parity */
.ways-m-preview { padding: 14px 14px 14px; }
.ways-m-preview-msg { font-size: 13.5px; line-height: 1.55; }
.ways-m-preview-compose {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ways-m-preview-actions { margin-top: 0; gap: 6px; }
.ways-m-send-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 7px 12px 7px 10px;
  cursor: default;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 5px 12px rgba(232,98,26,0.22);
}
.ways-m-send-submit svg { color: #fff; flex-shrink: 0; }

/* Mobile Channel grid: shrink so it reads as supporting chrome, not content */
.ways-m-channels {
  gap: 4px;
  padding: 8px 10px;
}
.ways-m-channel {
  padding: 6px 8px;
  gap: 6px;
  border-radius: 6px;
}
.ways-m-ch-icon { width: 18px; height: 18px; border-radius: 4px; }
.ways-m-ch-icon svg { width: 10px; height: 10px; }
.ways-m-ch-name { font-size: 10.5px; }
.ways-m-ch-tag { font-size: 9px; }

/* ============================================================
   SECTION: PRICING
   Reference: deel.com pricing — clean, transparent, anchor-tier
   highlighted. Four tiers in a single row; the 4th is a dark
   contact-us card to differentiate the managed Service tier.
   ============================================================ */
.pricing-section {
  padding: clamp(80px, 10vh, 160px) 0 clamp(60px, 8vh, 120px);
  background: var(--bg);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.pricing-section::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(238, 108, 77, 0.03) 0%, transparent 60%);
  pointer-events: none;
}
.pricing-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 12px; }
}
.pricing-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.pricing-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(28,25,23,0.08);
}
.pricing-card--featured {
  border-color: var(--accent);
  box-shadow: 0 8px 28px rgba(232,98,26,0.16);
}
.pricing-card--featured:hover {
  border-color: var(--accent);
  box-shadow: 0 16px 40px rgba(232,98,26,0.24);
}
/* Anchor line: Pro = default path for serious hosts at $199 */
.pricing-anchor-line {
  margin: 6px 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.35;
}
.pricing-card--featured .pricing-blurb {
  margin-top: 10px;
}
.pricing-card--dark {
  background: linear-gradient(180deg, #1C1917 0%, #100D0B 100%);
  border-color: rgba(244,242,237,0.08);
  color: var(--on-dark);
}
.pricing-card--dark:hover {
  border-color: rgba(232,98,26,0.55);
}
.pricing-card-badge {
  position: absolute;
  top: -10px;
  left: 22px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(232,98,26,0.32);
}
.pricing-tier {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pricing-tier--white { color: var(--on-dark); }
.pricing-blurb {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  min-height: 60px;
}
.pricing-blurb--white { color: var(--on-dark-soft); }
.pricing-price {
  margin-top: 18px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink);
}
.pricing-price--white { color: var(--on-dark); }
.pricing-price-num {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
}
.pricing-price-unit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.pricing-card--dark .pricing-price-unit { color: var(--on-dark-soft); }
.pricing-cta {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 9px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.pricing-cta:hover { background: #2a2421; }
.pricing-cta--primary {
  background: var(--accent);
  border-color: var(--accent);
}
.pricing-cta--primary:hover { background: #D5581A; }
.pricing-cta--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(244,242,237,0.32);
}
.pricing-cta--ghost:hover {
  background: rgba(244,242,237,0.08);
  border-color: rgba(244,242,237,0.5);
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}
.pricing-features--white li { color: var(--on-dark); }
.pf-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.pricing-foot {
  margin-top: 36px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   SECTION: FAQ (Deel-style accordion)
   ============================================================ */
.faq-section {
  padding: clamp(60px, 8vh, 120px) 0 clamp(80px, 10vh, 160px);
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.faq-list {
  max-width: 760px;
  margin: clamp(36px, 4vw, 56px) auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: 22px 4px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--accent); }
.faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(28,25,23,0.04);
  color: var(--ink);
  flex-shrink: 0;
  transition: transform var(--dur-med) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.faq-item[open] .faq-icon {
  transform: rotate(180deg);
  background: rgba(232,98,26,0.10);
  color: var(--accent);
}
.faq-a {
  padding: 0 4px 22px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 660px;
  animation: faq-reveal 300ms ease forwards;
}
@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq-item {
  transition: border-color 200ms ease;
}
.faq-item[open] {
  border-color: rgba(232, 98, 26, 0.2);
}

/* ============================================================
   SECTION: FOOTER (Linear info-dense)
   ============================================================ */
.site-footer {
  padding: clamp(60px, 8vh, 100px) 0 32px;
  background: #1C1917;
  color: var(--on-dark);
  border-top: 1px solid rgba(244,242,237,0.06);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(244,242,237,0.06);
}
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
.footer-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--on-dark);
}
.footer-h-mark { display: inline-flex; }
.footer-h-mark-static {
  width: 52px;
  height: 52px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.footer-link-tag {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(232,98,26,0.18);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 4px;
  vertical-align: 1px;
}
.footer-socials {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  align-self: flex-start;
}
.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(244,242,237,0.04);
  border: 1px solid rgba(244,242,237,0.08);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.footer-social:hover {
  background: rgba(244,242,237,0.08);
  transform: translateY(-1px);
}

/* ── Hadef brand mark — hovering H + morphing asterisk ──────────────
   The H bobs gently up and down. A soft drop shadow underneath
   compresses/expands with the bob to sell the lift. The asterisk
   sitting at the top-right of the H crossfades through 6 shapes from
   the brand library on a slow loop. */
.brand-mark {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 70px;
  flex-shrink: 0;
}
.brand-mark--footer {
  width: 56px;
  height: 62px;
}
.brand-mark-h {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  animation: brand-h-bob 3.2s ease-in-out infinite;
  will-change: transform;
}
.brand-mark-shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60%;
  height: 5px;
  background: radial-gradient(ellipse at center, rgba(28,25,23,0.18) 0%, rgba(28,25,23,0) 70%);
  border-radius: 50%;
  transform: translateX(-50%) scale(1, 1);
  z-index: 1;
  animation: brand-h-shadow 3.2s ease-in-out infinite;
  will-change: transform, opacity;
}
.brand-mark--footer .brand-mark-shadow {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 70%);
}
.brand-mark-asterisk {
  position: absolute;
  top: 14px;
  right: 13px;
  width: 9px;
  height: 9px;
  z-index: 3;
  animation: brand-h-bob 3.2s ease-in-out infinite;
  animation-delay: 0.06s; /* trails the H by a fraction for personality */
}
.brand-mark--footer .brand-mark-asterisk {
  width: 8px;
  height: 8px;
  top: 13px;
  right: 11px;
}
.bma-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: bma-cycle 10s linear infinite;
  will-change: opacity;
}
.bma-frame--1 { animation-delay: 0s; }
.bma-frame--2 { animation-delay: 2s; }
.bma-frame--3 { animation-delay: 4s; }
.bma-frame--4 { animation-delay: 6s; }
.bma-frame--5 { animation-delay: 8s; }

@keyframes brand-h-bob {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-3px); }
}
@keyframes brand-h-shadow {
  0%, 100% { transform: translateX(-50%) scale(1, 1);     opacity: 0.6;  }
  50%      { transform: translateX(-50%) scale(0.7, 0.6); opacity: 0.25; }
}
/* 10s cycle, 5 frames offset 2s apart. Each frame fades in at 0%,
   holds, then fades out from 18-22% so it overlaps the next frame's
   fade-in (which starts at 20% in this frame's timeline). No blank
   gaps between shapes. */
@keyframes bma-cycle {
  0%        { opacity: 0; }
  2%        { opacity: 1; }
  18%       { opacity: 1; }
  22%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark-h, .brand-mark-shadow, .brand-mark-asterisk, .bma-frame { animation: none; }
  .bma-frame--1 { opacity: 1; transform: none; }
}

/* ── Footer audiogram (live signal) ────────────────────────────────── */
.footer-audiogram {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  margin-left: 8px;
  height: 12px;
}
.footer-audiogram span {
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  animation: footer-audio 1.4s ease-in-out infinite;
  opacity: 0.85;
}
.footer-audiogram span:nth-child(1)  { animation-delay: 0.00s; }
.footer-audiogram span:nth-child(2)  { animation-delay: 0.10s; }
.footer-audiogram span:nth-child(3)  { animation-delay: 0.20s; }
.footer-audiogram span:nth-child(4)  { animation-delay: 0.30s; }
.footer-audiogram span:nth-child(5)  { animation-delay: 0.05s; }
.footer-audiogram span:nth-child(6)  { animation-delay: 0.25s; }
.footer-audiogram span:nth-child(7)  { animation-delay: 0.15s; }
.footer-audiogram span:nth-child(8)  { animation-delay: 0.35s; }
.footer-audiogram span:nth-child(9)  { animation-delay: 0.18s; }
.footer-audiogram span:nth-child(10) { animation-delay: 0.08s; }
@keyframes footer-audio {
  0%, 100% { height: 4px; }
  50%      { height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-audiogram span { animation: none; height: 7px; }
}
.footer-tag {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--on-dark-soft);
  max-width: 340px;
}
.footer-status {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--on-dark-soft);
  letter-spacing: 0.04em;
}
.footer-status-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #16A34A;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col-head {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-dark-soft);
  margin-bottom: 6px;
}
.footer-link {
  font-size: 13.5px;
  color: var(--on-dark);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-link:hover { color: var(--accent); }
.footer-base {
  padding-top: 28px;
  margin-top: 4px;
  border-top: 1px solid rgba(244, 242, 237, 0.08);
}
.footer-base-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}
.footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(244, 242, 237, 0.72);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.footer-legal-rule {
  display: none;
  width: 1px;
  height: 14px;
  background: rgba(244, 242, 237, 0.18);
  flex-shrink: 0;
}
@media (min-width: 520px) {
  .footer-legal-rule { display: inline-block; }
}
.footer-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(244, 242, 237, 0.06);
  border: 1px solid rgba(244, 242, 237, 0.1);
}
.footer-meta-link {
  color: rgba(244, 242, 237, 0.78);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-meta-link:hover { color: var(--accent); }
.footer-dot { color: rgba(244,242,237,0.35); }

/* ── Stat deltas (trend arrows + checkmarks) ─────────────────────────
   Tiny directional glyphs that sit inline with a stat number so the
   reader clocks the trajectory at a glance. Used across Money Podcast
   stats and Pitch score tiles. */
.stat-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: 1px;
  margin-left: 4px;
}
.stat-delta svg { display: block; }
.stat-delta--up   svg polygon { fill: #16A34A; }
.stat-delta--down svg polygon { fill: #DC2626; }
.stat-delta--flat svg polygon { fill: #A8A29E; }

/* Inline checkmark badge (used on qualitative "good" signals like Trust=High) */
.stat-check {
  display: inline-block;
  margin-right: 5px;
  vertical-align: -2px;
}

/* ── Scroll reveal (Brand Agent spec) ───────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-scroll) var(--ease-out),
              transform var(--dur-scroll) var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .btn-google, .btn-email, .btn-primary { opacity: 1; transform: none; transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   M3 — MERCURY-STYLE WAYS SECTION (April 15 v3 rebuild)
   
   Reference: mercury.com homepage feature stack.
   Pattern: each feature sits inside a soft tinted container holding 2
   simplified cards connected by an animated dashed line with a pulsing
   orb. A tiny pause button sits in the bottom-left. Caption beneath:
   terse eyebrow pill + headline + one-sentence body.
   
   Branded to Hadef: cream container base with an orange-tinted radial
   glow, accent-orange connector lines, Plus Jakarta Sans throughout.
   ════════════════════════════════════════════════════════════════ */

.m3-ways {
  padding: clamp(80px, 10vh, 160px) 0 clamp(60px, 8vh, 120px);
  background: linear-gradient(180deg, #1C1917 0%, #120F0E 100%);
  border-top: 1px solid rgba(244,242,237,0.06);
  border-bottom: 1px solid rgba(244,242,237,0.06);
}

.m3-feature {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 40px);
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.m3-feature:first-of-type { margin-top: clamp(40px, 5vw, 64px); }

/* ───── Stage: the soft tinted container ───── */
.m3-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
  align-items: center;
  gap: 0;
  background: linear-gradient(145deg, #F4EFE6 0%, #F0E8DC 100%);
  border: 1px solid rgba(232,98,26,0.18);
  border-radius: 22px;
  padding: clamp(32px, 4vw, 52px) clamp(28px, 3.5vw, 48px);
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0,0,0,0.24), 0 1px 0 rgba(244,242,237,0.04) inset;
}
/* Orange-tinted radial glow behind the cards for warmth */
.m3-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 50% 30%, rgba(232,98,26,0.08) 0%, rgba(232,98,26,0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* Pause button, Mercury signature */
.m3-pause {
  position: absolute;
  bottom: 16px;
  left: 18px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(28,25,23,0.08);
  border: 1px solid rgba(28,25,23,0.12);
  color: rgba(28,25,23,0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: background var(--dur-fast) var(--ease-out);
}
.m3-pause:hover { background: rgba(28,25,23,0.14); }

/* ───── Cards inside the stage ───── */
.m3-card {
  position: relative;
  z-index: 2;
  background: #FFFFFF;
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 28px rgba(28,25,23,0.08),
              0 1px 2px rgba(28,25,23,0.04);
  min-width: 0;
  transition: transform var(--dur-med) var(--ease-out);
}
.m3-card[data-card="a"] { transform: translateY(-6px); }
.m3-card[data-card="b"] { transform: translateY(6px);  }

.m3-card-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 10px;
}

/* ───── Card variants ───── */

/* Sources card (Container 1 · Context) */
.m3-source-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
}
.m3-source-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: #FAF7F0;
  border: 1px solid rgba(28,25,23,0.05);
  border-radius: 9px;
}
.m3-source-logo {
  width: 36px;
  height: 14px;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0.85;
  flex-shrink: 0;
}

/* Hit + hook quote cards share styling */
.m3-card--hit,
.m3-card--hook {
  background: linear-gradient(180deg, #fff 0%, #FDF9F1 100%);
  border-color: rgba(232,98,26,0.22);
}
.m3-hit-quote {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.m3-hit-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Venn card (Container 2 · Pitch) */
.m3-card--venn {
  background: linear-gradient(180deg, #14110F 0%, #1C1917 100%);
  border-color: rgba(232,98,26,0.28);
  color: var(--on-dark);
  padding: 14px 14px 10px;
}
.m3-card--venn .m3-card-label { color: rgba(244,242,237,0.6); }
.m3-venn {
  width: 100%;
  height: auto;
  display: block;
  max-height: 180px;
}
/* Subtle pulsing glow in the overlap */
.m3-venn-glow {
  transform-origin: 160px 105px;
  transform-box: fill-box;
  animation: m3-venn-pulse 3s ease-in-out infinite;
}
@keyframes m3-venn-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9);  }
  50%      { opacity: 0.85; transform: scale(1.12); }
}

/* Hook quote card also gets a fit badge floated top-right */
.m3-fit-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  background: rgba(232,98,26,0.10);
  border: 1px solid rgba(232,98,26,0.32);
  padding: 4px 9px;
  border-radius: 999px;
}
.m3-fit-num {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.m3-fit-unit {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Channel card (Container 3 · Send) */
.m3-channels {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m3-ch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: #FAF7F0;
  border: 1px solid rgba(28,25,23,0.05);
  border-radius: 9px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.m3-ch--active {
  background: #fff;
  border-color: rgba(232,98,26,0.40);
  box-shadow: 0 0 0 3px rgba(232,98,26,0.08);
}
.m3-ch-icon {
  width: 20px; height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.m3-ch-name { flex: 1; font-weight: 600; }
.m3-ch-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(232,98,26,0.12);
  padding: 2px 6px;
  border-radius: 999px;
}
.m3-ch--more {
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  padding: 6px 9px;
  background: rgba(28,25,23,0.02);
}

/* DM card */
.m3-card--dm {
  padding: 16px 16px 12px;
}
.m3-dm-body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 12px;
}
.m3-dm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(28,25,23,0.05);
}
.m3-dm-attach {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(232,98,26,0.08);
  border: 1px solid rgba(232,98,26,0.28);
  padding: 4px 8px 4px 7px;
  border-radius: 7px;
}
.m3-dm-attach svg { color: var(--accent); flex-shrink: 0; }
.m3-dm-send {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 5px 11px 5px 9px;
  border-radius: 7px;
  cursor: default;
  box-shadow: 0 4px 10px rgba(232,98,26,0.24);
}
.m3-dm-send svg { color: #fff; flex-shrink: 0; }

/* ───── Animated connector line between cards ───── */
.m3-line {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 40px;
  color: var(--accent);
  overflow: visible;
}
.m3-line-path {
  stroke-linecap: round;
  animation: m3-dash-flow 2.4s linear infinite;
}
@keyframes m3-dash-flow {
  to { stroke-dashoffset: -16; }
}
.m3-line-pulse {
  filter: drop-shadow(0 0 3px rgba(232,98,26,0.7));
}
.m3-line--arc { height: 48px; }

@media (prefers-reduced-motion: reduce) {
  .m3-line-path, .m3-line-pulse, .m3-venn-glow { animation: none; }
}

/* ───── Caption beneath the stage ───── */
.m3-caption {
  max-width: 620px;
  padding: 0 clamp(16px, 2vw, 32px);
}
.m3-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFF3EC;
  background: rgba(232,98,26,0.22);
  border: 1px solid rgba(232,98,26,0.55);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.m3-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,98,26,0.18);
}
.m3-heading {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  margin: 0 0 12px;
}
.m3-body {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--on-dark-soft);
  margin: 0;
  max-width: 540px;
}

/* ───── Mobile: stack cards vertically, line rotates 90deg ───── */
@media (max-width: 760px) {
  .m3-stage {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 0;
    padding: 28px 20px 40px;
  }
  .m3-card[data-card="a"],
  .m3-card[data-card="b"] { transform: none; }
  .m3-line {
    height: 36px;
    transform: rotate(90deg);
    width: 40px;
    justify-self: center;
    margin: 2px 0;
  }
  .m3-caption { padding: 0 8px; }
  .m3-heading { font-size: 22px; }
}


/* ════════════════════════════════════════════════════════════════
   M3 — MULTI-FRAME SEQUENCES (April 15 v3.1)
   
   Mercury's containers don't sit still. Each one plays out a tiny
   story: items appear, a connector fires, a highlight lands, a
   number ticks up. After a beat, it resets and starts again. We do
   the same thing here — one loop per container, each container's
   cards and accents scripted against a shared duration.
   
   Pause button is now functional. Clicking it toggles .is-paused on
   the stage which halts every animation inside.
   ════════════════════════════════════════════════════════════════ */

/* Pause all animation when the stage is paused */
.m3-stage.is-paused *,
.m3-stage.is-paused::before,
.m3-stage.is-paused { animation-play-state: paused !important; }

/* Swap the pause/play glyph via data-state */
.m3-pause[data-state="paused"] .m3-pause-bars { display: none; }
.m3-pause[data-state="paused"] .m3-pause-play { display: inline; }
.m3-pause .m3-pause-play { display: none; }
.m3-pause { cursor: pointer; }

/* Make the pause control feel interactive */
.m3-pause:hover { color: var(--accent); border-color: rgba(232,98,26,0.32); background: rgba(232,98,26,0.08); }

/* ───── CONTAINER 1 · CONTEXT — story ─────
   0-1s:   source 1 fades in
   1-2s:   source 2 fades in
   2-3s:   source 3 fades in
   3-4s:   connector pulse starts
   4-5.5s: hit card slides in from the right
   5.5-7s: hit card gets a highlight swipe
   7-9s:   hold
   9-10s:  fade + reset
*/
.m3-feature:nth-of-type(1) .m3-source-list li {
  opacity: 0;
  transform: translateY(6px);
  animation: m3-context-source 10s ease-in-out infinite;
}
.m3-feature:nth-of-type(1) .m3-source-list li:nth-child(1) { animation-delay: 0s;   }
.m3-feature:nth-of-type(1) .m3-source-list li:nth-child(2) { animation-delay: 0.9s; }
.m3-feature:nth-of-type(1) .m3-source-list li:nth-child(3) { animation-delay: 1.8s; }
@keyframes m3-context-source {
  0%        { opacity: 0; transform: translateY(6px); }
  4%        { opacity: 1; transform: translateY(0);   }
  86%       { opacity: 1; transform: translateY(0);   }
  95%, 100% { opacity: 0; transform: translateY(-4px);}
}

.m3-feature:nth-of-type(1) .m3-card--hit {
  opacity: 0;
  transform: translate(24px, 6px);
  animation: m3-context-hit 10s ease-in-out infinite;
  animation-delay: 3.2s;
}
@keyframes m3-context-hit {
  0%, 5%    { opacity: 0; transform: translate(24px, 6px); }
  18%       { opacity: 1; transform: translate(0, 6px);    }
  30%, 70%  { opacity: 1; transform: translate(0, 6px);    }
  78%       { opacity: 1; transform: translate(0, 6px);    }
  90%, 100% { opacity: 0; transform: translate(12px, 6px); }
}
/* Highlight swipe on the hit card */
.m3-feature:nth-of-type(1) .m3-card--hit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(115deg, transparent 30%, rgba(232,98,26,0.20) 50%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  animation: m3-swipe 10s ease-in-out infinite;
  animation-delay: 5.2s;
}
@keyframes m3-swipe {
  0%, 5%   { opacity: 0; transform: translateX(-40%); }
  10%      { opacity: 1; transform: translateX(-20%); }
  20%      { opacity: 1; transform: translateX(40%);  }
  25%, 100%{ opacity: 0; transform: translateX(60%);  }
}

/* ───── CONTAINER 2 · PITCH — story ─────
   0-1s:   left circle draws in
   1-2s:   right circle draws in
   2-3s:   bottom circle draws in
   3-4.5s: overlap glow pulses hard
   4-5.5s: hook quote card slides up
   5.5-7s: fit badge counts up from 00 to 94
   7-9s:   hold
   9-10s:  fade + reset
*/
.m3-feature:nth-of-type(2) .m3-venn circle:nth-child(1),
.m3-feature:nth-of-type(2) .m3-venn circle:nth-child(2),
.m3-feature:nth-of-type(2) .m3-venn circle:nth-child(3) {
  opacity: 0;
  animation: m3-venn-draw 10s ease-in-out infinite;
  transform-origin: center;
}
.m3-feature:nth-of-type(2) .m3-venn circle:nth-child(1) { animation-delay: 0s;   }
.m3-feature:nth-of-type(2) .m3-venn circle:nth-child(2) { animation-delay: 0.8s; }
.m3-feature:nth-of-type(2) .m3-venn circle:nth-child(3) { animation-delay: 1.6s; }
@keyframes m3-venn-draw {
  0%        { opacity: 0; }
  5%        { opacity: 0.3; }
  10%       { opacity: 1; }
  85%       { opacity: 1; }
  95%, 100% { opacity: 0; }
}
.m3-feature:nth-of-type(2) .m3-venn text {
  opacity: 0;
  animation: m3-venn-label 10s ease-in-out infinite;
  animation-delay: 2.4s;
}
@keyframes m3-venn-label {
  0%, 5%   { opacity: 0; }
  10%, 85% { opacity: 1; }
  95%, 100%{ opacity: 0; }
}

.m3-feature:nth-of-type(2) .m3-card--hook {
  opacity: 0;
  transform: translate(24px, 12px);
  animation: m3-pitch-hook 10s ease-in-out infinite;
  animation-delay: 3.6s;
}
@keyframes m3-pitch-hook {
  0%, 5%    { opacity: 0; transform: translate(24px, 12px); }
  18%       { opacity: 1; transform: translate(0, 6px);     }
  30%, 70%  { opacity: 1; transform: translate(0, 6px);     }
  78%       { opacity: 1; transform: translate(0, 6px);     }
  90%, 100% { opacity: 0; transform: translate(12px, 6px);  }
}

/* Fit badge ticks up */
.m3-feature:nth-of-type(2) .m3-fit-num {
  animation: m3-fit-count 10s ease-in-out infinite;
  animation-delay: 5.2s;
}
@keyframes m3-fit-count {
  0%, 15%  { content: "--"; }
  18%      { color: rgba(232,98,26,0.35); }
  22%      { color: var(--accent); }
  100%     { color: var(--accent); }
}

/* ───── CONTAINER 3 · SEND — story ─────
   0-1.5s: channels fade in (LinkedIn, Gmail, +3)
   1.5-3s: LinkedIn "Picked" badge pops in with a glow
   3-4.5s: arc connector pulses from channel to DM
   4.5-7s: DM body types in character-by-character (via clip-path)
   7-8.5s: Send button pulses with a ring
   8.5-9.5s: hold
   9.5-10.5s: fade + reset
*/
.m3-feature:nth-of-type(3) .m3-ch {
  opacity: 0;
  transform: translateX(-8px);
  animation: m3-send-channel 10.5s ease-in-out infinite;
}
.m3-feature:nth-of-type(3) .m3-ch:nth-child(1) { animation-delay: 0s;   }
.m3-feature:nth-of-type(3) .m3-ch:nth-child(2) { animation-delay: 0.5s; }
.m3-feature:nth-of-type(3) .m3-ch:nth-child(3) { animation-delay: 1s;   }
@keyframes m3-send-channel {
  0%, 3%    { opacity: 0; transform: translateX(-8px); }
  10%       { opacity: 1; transform: translateX(0);    }
  88%       { opacity: 1; transform: translateX(0);    }
  96%, 100% { opacity: 0; transform: translateX(-4px); }
}
.m3-feature:nth-of-type(3) .m3-ch-badge {
  opacity: 0;
  transform: scale(0.6);
  animation: m3-send-badge 10.5s ease-in-out infinite;
  animation-delay: 1.8s;
}
@keyframes m3-send-badge {
  0%, 6%    { opacity: 0; transform: scale(0.6); }
  12%       { opacity: 1; transform: scale(1.15); }
  18%       { opacity: 1; transform: scale(1);   }
  88%       { opacity: 1; transform: scale(1);   }
  96%, 100% { opacity: 0; transform: scale(0.9); }
}
.m3-feature:nth-of-type(3) .m3-card--dm {
  opacity: 0;
  transform: translate(18px, 6px);
  animation: m3-send-dm 10.5s ease-in-out infinite;
  animation-delay: 2.8s;
}
@keyframes m3-send-dm {
  0%, 8%    { opacity: 0; transform: translate(18px, 6px); }
  18%       { opacity: 1; transform: translate(0, 6px);    }
  88%       { opacity: 1; transform: translate(0, 6px);    }
  96%, 100% { opacity: 0; transform: translate(12px, 6px); }
}

/* Type-in effect on the DM body (simulates the pitch being drafted) */
.m3-feature:nth-of-type(3) .m3-dm-body {
  clip-path: inset(0 100% 0 0);
  animation: m3-send-type 10.5s steps(40, end) infinite;
  animation-delay: 4.2s;
}
@keyframes m3-send-type {
  0%, 15%    { clip-path: inset(0 100% 0 0); }
  32%        { clip-path: inset(0 0% 0 0);   }
  88%        { clip-path: inset(0 0% 0 0);   }
  96%, 100%  { clip-path: inset(0 100% 0 0); }
}

/* Send button gets a pulsing ring late in the loop */
.m3-feature:nth-of-type(3) .m3-dm-send::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 10px;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: m3-send-ring 10.5s ease-in-out infinite;
  animation-delay: 6.5s;
}
.m3-feature:nth-of-type(3) .m3-dm-send { position: relative; }
@keyframes m3-send-ring {
  0%, 5%   { opacity: 0; transform: scale(0.8); }
  8%       { opacity: 0.8; transform: scale(1); }
  22%      { opacity: 0; transform: scale(1.3); }
  25%, 100%{ opacity: 0; transform: scale(1.3); }
}

/* Soften card base transforms so the sequence animations win */
.m3-feature:nth-of-type(1) .m3-card[data-card="a"],
.m3-feature:nth-of-type(2) .m3-card[data-card="a"],
.m3-feature:nth-of-type(3) .m3-card[data-card="a"] {
  transform: none; /* their children now handle the motion */
}


/* ════════════════════════════════════════════════════════════════
   M3 v3.2 — BRAIN VOICE PANEL ELEVATION + PERSPECTIVE FOCUS
   
   Tan's feedback: the Recording Host Context panel on the Brain
   mockup was getting out-eyed by the Passing-mention chip. That pill
   is gone. The voice panel is now the dominant element — taller,
   larger type, gently breathing, with auto-tags appearing beneath
   the transcription to reinforce that Hadef IS listening and
   categorising in real time.
   
   Plus every Mercury-style container now gets a mid-loop perspective
   zoom onto its focal card so the camera feels like it moves.
   ════════════════════════════════════════════════════════════════ */

/* ── Brain voice panel: larger, dominant, breathing ── */
.hmc-voice {
  min-height: 180px;
  padding: 18px 20px !important;
  transform: scale(1);
  animation: hmc-voice-breathe 6s ease-in-out infinite;
  transform-origin: center top;
}
.hmc-voice-text {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  max-width: none !important;
}
.hmc-voice-label { font-size: 11px !important; font-weight: 700; }

/* Auto-tags appearing beneath the transcription */
.hmc-voice-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(232,98,26,0.12);
}
.hmc-voice-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(232,98,26,0.10);
  border: 1px solid rgba(232,98,26,0.28);
  padding: 3px 9px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(4px);
  animation: hmc-voice-tag-in 6s ease-in-out infinite;
}
.hmc-voice-tags .hmc-voice-tag:nth-child(1) { animation-delay: 0.8s; }
.hmc-voice-tags .hmc-voice-tag:nth-child(2) { animation-delay: 1.6s; }
.hmc-voice-tags .hmc-voice-tag:nth-child(3) { animation-delay: 2.4s; }
.hmc-voice-tags .hmc-voice-tag:nth-child(4) { animation-delay: 3.4s; }
.hmc-voice-tag--pending {
  color: var(--muted);
  background: rgba(28,25,23,0.04);
  border-color: rgba(28,25,23,0.10);
  font-style: italic;
}
.hmc-voice-tag--pending::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: currentColor;
  margin-right: 5px;
  animation: hmc-voice-pending 1.2s ease-in-out infinite;
}
@keyframes hmc-voice-tag-in {
  0%, 5%    { opacity: 0; transform: translateY(4px); }
  15%       { opacity: 1; transform: translateY(0);   }
  90%       { opacity: 1; transform: translateY(0);   }
  100%      { opacity: 1; transform: translateY(0);   }
}
@keyframes hmc-voice-pending {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1;   }
}
@keyframes hmc-voice-breathe {
  0%, 100% { transform: scale(1);     box-shadow: 0 2px 8px rgba(232,98,26,0.04); }
  50%      { transform: scale(1.015); box-shadow: 0 4px 18px rgba(232,98,26,0.12); }
}

@media (prefers-reduced-motion: reduce) {
  .hmc-voice, .hmc-voice-tag, .hmc-voice-tag--pending::before { animation: none; opacity: 1; transform: none; }
}

/* ── Perspective zoom on each Mercury container ─────────────────
   Mid-loop, the stage scales up slightly and shifts toward the focal
   card, simulating a camera push-in. Then pulls back to reset. Each
   container zooms toward a different area — the hit card in Context,
   the Venn overlap in Pitch, the DM composer in Send. */

.m3-feature:nth-of-type(1) .m3-stage,
.m3-feature:nth-of-type(2) .m3-stage,
.m3-feature:nth-of-type(3) .m3-stage {
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease-out);
}

/* Container 1 · Context — zoom toward the hit card (right side) */
.m3-feature:nth-of-type(1) .m3-stage > .m3-card,
.m3-feature:nth-of-type(1) .m3-stage > .m3-line {
  animation: m3-ctx-push 10s ease-in-out infinite;
}
.m3-feature:nth-of-type(1) .m3-card--sources { animation-delay: 0s; }
.m3-feature:nth-of-type(1) .m3-card--hit     { animation-delay: 0s; }
.m3-feature:nth-of-type(1) .m3-line--a-to-b  { animation-delay: 0s; }
@keyframes m3-ctx-push {
  0%, 50%   { transform: translate(0, 0) scale(1); }
  60%, 80%  { transform: translate(-30px, 0) scale(1.06); }
  92%, 100% { transform: translate(0, 0) scale(1); }
}

/* Container 2 · Pitch — zoom toward the Venn overlap (center) */
.m3-feature:nth-of-type(2) .m3-stage > .m3-card,
.m3-feature:nth-of-type(2) .m3-stage > .m3-line {
  animation: m3-pitch-push 10s ease-in-out infinite;
}
@keyframes m3-pitch-push {
  0%, 50%   { transform: translate(0, 0) scale(1); }
  60%, 80%  { transform: translate(0, -4px) scale(1.08); }
  92%, 100% { transform: translate(0, 0) scale(1); }
}

/* Container 3 · Send — zoom toward the DM (right side) */
.m3-feature:nth-of-type(3) .m3-stage > .m3-card,
.m3-feature:nth-of-type(3) .m3-stage > .m3-line {
  animation: m3-send-push 10.5s ease-in-out infinite;
}
@keyframes m3-send-push {
  0%, 55%   { transform: translate(0, 0) scale(1); }
  65%, 85%  { transform: translate(-24px, 0) scale(1.07); }
  95%, 100% { transform: translate(0, 0) scale(1); }
}

/* Make sure the preset sequence animations above still control the
   card entry/exit — the push animations shift the *whole stage* by
   moving every direct child together, which is fine for perspective
   since cards retain their relative composition. */
.m3-feature:nth-of-type(1) .m3-card--hit,
.m3-feature:nth-of-type(2) .m3-card--hook,
.m3-feature:nth-of-type(3) .m3-card--dm {
  /* Layer push animation on top of the existing entry animation */
  animation-name: m3-ctx-push, m3-context-hit;
}
.m3-feature:nth-of-type(2) .m3-card--hook { animation-name: m3-pitch-push, m3-pitch-hook; }
.m3-feature:nth-of-type(3) .m3-card--dm   { animation-name: m3-send-push, m3-send-dm; }

@media (prefers-reduced-motion: reduce) {
  .m3-feature .m3-stage > * { animation: none !important; transform: none !important; }
}


/* ── Cleanup: simpler perspective zoom by scaling the STAGE itself ── */
.m3-feature:nth-of-type(1) .m3-card--hit,
.m3-feature:nth-of-type(2) .m3-card--hook,
.m3-feature:nth-of-type(3) .m3-card--dm {
  animation-name: m3-context-hit;
}
.m3-feature:nth-of-type(2) .m3-card--hook { animation-name: m3-pitch-hook; }
.m3-feature:nth-of-type(3) .m3-card--dm   { animation-name: m3-send-dm; }

/* Reset the previous per-child push animations */
.m3-feature:nth-of-type(1) .m3-stage > .m3-card,
.m3-feature:nth-of-type(1) .m3-stage > .m3-line,
.m3-feature:nth-of-type(2) .m3-stage > .m3-card,
.m3-feature:nth-of-type(2) .m3-stage > .m3-line,
.m3-feature:nth-of-type(3) .m3-stage > .m3-card,
.m3-feature:nth-of-type(3) .m3-stage > .m3-line {
  animation-name: unset;
}

/* Scale the stage itself for the camera push — Container 1 pushes right */
.m3-feature:nth-of-type(1) .m3-stage {
  transform-origin: 82% center;
  animation: m3-stage-push-right 10s ease-in-out infinite;
}
.m3-feature:nth-of-type(2) .m3-stage {
  transform-origin: 50% 55%;
  animation: m3-stage-push-center 10s ease-in-out infinite;
}
.m3-feature:nth-of-type(3) .m3-stage {
  transform-origin: 78% 60%;
  animation: m3-stage-push-right-low 10.5s ease-in-out infinite;
}

@keyframes m3-stage-push-right {
  0%, 50%   { transform: scale(1);    }
  62%, 82%  { transform: scale(1.045);}
  93%, 100% { transform: scale(1);    }
}
@keyframes m3-stage-push-center {
  0%, 50%   { transform: scale(1);    }
  62%, 82%  { transform: scale(1.065);}
  93%, 100% { transform: scale(1);    }
}
@keyframes m3-stage-push-right-low {
  0%, 55%   { transform: scale(1);    }
  65%, 85%  { transform: scale(1.05); }
  94%, 100% { transform: scale(1);    }
}

/* Re-restore card entry motions for the individual card cells */
.m3-feature:nth-of-type(1) .m3-card--hit  { animation: m3-context-hit 10s ease-in-out infinite; animation-delay: 3.2s; }
.m3-feature:nth-of-type(2) .m3-card--hook { animation: m3-pitch-hook  10s ease-in-out infinite; animation-delay: 3.6s; }
.m3-feature:nth-of-type(3) .m3-card--dm   { animation: m3-send-dm     10.5s ease-in-out infinite; animation-delay: 2.8s; }


/* ── Play-on-view (v3.3) ──────────────────────────────────────────
   Stages are paused by default. IntersectionObserver adds .is-in-view
   when the stage enters the viewport, releasing play-state. */
.m3-stage *,
.m3-stage::before,
.m3-stage {
  animation-play-state: paused;
}
.m3-stage.is-in-view *,
.m3-stage.is-in-view::before,
.m3-stage.is-in-view {
  animation-play-state: running;
}
/* Manual pause wins over play-on-view */
.m3-stage.is-in-view.is-paused *,
.m3-stage.is-in-view.is-paused::before,
.m3-stage.is-in-view.is-paused {
  animation-play-state: paused;
}


/* ── v3.4 — Inline audiogram + Riverside/YouTube import pill overhaul ── */

/* The waveform now lives inside the tag row, on the same baseline as the
   auto-tags. It sits between the last tag (including "tagging…") and the
   0:14 timer on the right edge. */
.hmc-voice-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(232,98,26,0.12);
}
.hmc-voice-wave.hmc-voice-wave--inline {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
  margin-left: auto;  /* pushes waveform + timer to the right side */
  padding-left: 8px;
}
.hmc-voice-wave.hmc-voice-wave--inline span {
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.75;
}
.hmc-voice-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-left: 6px;
  flex-shrink: 0;
}

/* Import pills — rebuilt for the dark Brain mockup. Glassy, not white. */
.hmc-imports {
  gap: 8px;
  margin-top: 16px;
}
.hmc-import {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: rgba(244,242,237,0.05);
  border: 1px solid rgba(244,242,237,0.10);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--on-dark);
  text-align: left;
  cursor: default;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.hmc-import:hover {
  background: rgba(244,242,237,0.08);
  border-color: rgba(244,242,237,0.18);
}
.hmc-import-logo--riverside {
  height: 16px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(1.05);
}
.hmc-import-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.hmc-import-brand--youtube .hmc-import-brand-text {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-dark);
}
.hmc-import-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--on-dark-soft);
  margin-left: auto;
  letter-spacing: 0.01em;
}

/* Mobile: keep the inline treatment but let pills stack vertically */
@media (max-width: 760px) {
  .hmc-import { font-size: 11px; padding: 9px 11px; }
  .hmc-import-label { font-size: 10.5px; }
}


/* ── v3.5 FIX — play-on-view was hiding card B on all three ────────
   Earlier v3.3 paused animations by default on .m3-stage children.
   That leaves cards whose initial keyframe state is opacity:0 stuck
   invisible until .is-in-view fires. On some viewports the observer
   threshold wasn't being hit, so the right-side cards never appeared.
   Reverting to: animations always run. Manual pause button still
   works via .is-paused on the stage. */
.m3-stage *,
.m3-stage::before,
.m3-stage {
  animation-play-state: running;
}
.m3-stage.is-paused *,
.m3-stage.is-paused::before,
.m3-stage.is-paused { animation-play-state: paused !important; }
/* Remove any lingering .is-in-view dependency */
.m3-stage.is-in-view *,
.m3-stage.is-in-view::before,
.m3-stage.is-in-view { animation-play-state: running; }


/* ── v3.6 — Voice panel restructure ────────────────────────────────
   Three-row layout inside the voice panel:
   1. Header: REC dot + "Recording voice note" + "Add in context" pill
   2. Transcription body
   3. Audio strip: mic icon + audiogram + 0:14 timer
   4. Auto-tags on their own row
   Fixes Tan's feedback that the audiogram felt "half there" crammed
   next to the tags. */

.hmc-voice-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap;
}
.hmc-voice-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(232,98,26,0.10);
  border: 1px dashed rgba(232,98,26,0.45);
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  margin-left: auto;
  letter-spacing: 0.01em;
  cursor: default;
}
.hmc-voice-add svg { color: var(--accent); flex-shrink: 0; }

/* Dedicated audio strip: mic icon + audiogram + timer on its own line */
.hmc-voice-audio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(232,98,26,0.06);
  border: 1px solid rgba(232,98,26,0.18);
  border-radius: 10px;
}
.hmc-voice-mic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(232,98,26,0.32);
  animation: mic-pulse 1.8s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(232,98,26,0.32); }
  50%      { box-shadow: 0 2px 12px rgba(232,98,26,0.55); }
}

/* Override earlier rule so the wave now lives inside .hmc-voice-audio */
.hmc-voice-audio .hmc-voice-wave {
  flex: 1;
  margin-left: 0;
  padding-left: 0;
  height: 22px;
  gap: 3px;
}
.hmc-voice-audio .hmc-voice-wave span { width: 3px; }

.hmc-voice-audio .hmc-voice-time {
  margin-left: 0;
  font-weight: 600;
  color: var(--accent);
}

/* Make tags row its own clean line */
.hmc-voice-tags {
  margin-top: 10px !important;
  padding-top: 0 !important;
  border-top: none !important;
}


/* ── v3.7 — Audiogram mirror + card B always-visible ─────────────── */

/* Mirrored audiogram: bars grow up AND down from center line.
   Old: align-items:flex-end made bars grow only upward (bar chart look).
   New: align-items:center + transform:scaleY animates from center axis. */
.hmc-voice-audio .hmc-voice-wave,
.footer-audiogram {
  align-items: center !important;
}
.hmc-voice-audio .hmc-voice-wave span {
  height: 16px !important;
  transform-origin: center center;
  transform: scaleY(0.2);
  animation: audio-mirror 1.2s ease-in-out infinite;
}
.hmc-voice-audio .hmc-voice-wave span:nth-child(1)  { animation-delay: 0.00s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(2)  { animation-delay: 0.10s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(3)  { animation-delay: 0.20s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(4)  { animation-delay: 0.05s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(5)  { animation-delay: 0.25s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(6)  { animation-delay: 0.12s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(7)  { animation-delay: 0.32s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(8)  { animation-delay: 0.18s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(9)  { animation-delay: 0.08s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(10) { animation-delay: 0.28s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(11) { animation-delay: 0.15s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(12) { animation-delay: 0.22s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(13) { animation-delay: 0.04s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(14) { animation-delay: 0.30s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(15) { animation-delay: 0.14s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(16) { animation-delay: 0.24s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(17) { animation-delay: 0.06s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(18) { animation-delay: 0.18s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(19) { animation-delay: 0.26s; }
.hmc-voice-audio .hmc-voice-wave span:nth-child(20) { animation-delay: 0.02s; }

@keyframes audio-mirror {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1);    }
}

/* Force card B visibility on all three Mercury containers.
   Rewritten keyframes never drop below opacity 0.35 so the card is
   always readable even when the spotlight isn't on it. Fixes the
   "right side blank" bug. */
.m3-feature:nth-of-type(1) .m3-card--hit,
.m3-feature:nth-of-type(2) .m3-card--hook,
.m3-feature:nth-of-type(3) .m3-card--dm {
  opacity: 1 !important;
}
.m3-feature:nth-of-type(1) .m3-card--hit {
  animation: m3-context-hit-v2 10s ease-in-out infinite !important;
  animation-delay: 3.2s !important;
}
.m3-feature:nth-of-type(2) .m3-card--hook {
  animation: m3-pitch-hook-v2 10s ease-in-out infinite !important;
  animation-delay: 3.6s !important;
}
.m3-feature:nth-of-type(3) .m3-card--dm {
  animation: m3-send-dm-v2 10.5s ease-in-out infinite !important;
  animation-delay: 2.8s !important;
}

@keyframes m3-context-hit-v2 {
  0%, 5%    { opacity: 0.45; transform: translate(16px, 6px); }
  18%       { opacity: 1;    transform: translate(0, 6px);    }
  78%       { opacity: 1;    transform: translate(0, 6px);    }
  90%, 100% { opacity: 0.55; transform: translate(8px, 6px);  }
}
@keyframes m3-pitch-hook-v2 {
  0%, 5%    { opacity: 0.45; transform: translate(16px, 10px); }
  18%       { opacity: 1;    transform: translate(0, 6px);     }
  78%       { opacity: 1;    transform: translate(0, 6px);     }
  90%, 100% { opacity: 0.55; transform: translate(8px, 6px);   }
}
@keyframes m3-send-dm-v2 {
  0%, 8%    { opacity: 0.45; transform: translate(14px, 6px); }
  18%       { opacity: 1;    transform: translate(0, 6px);    }
  88%       { opacity: 1;    transform: translate(0, 6px);    }
  96%, 100% { opacity: 0.55; transform: translate(8px, 6px);  }
}


/* ════════════════════════════════════════════════════════════════
   SECTION 2a2 — EXPLAINER GRID (April 15)

   Four-tile scannable feature row. Sits between logo carousel and
   the Brain mockup, trains the eye on what hadef does in one pass.
   Each tile: tinted cream container, animated mini-mockup on top,
   title + one-line benefit below. Scannable at speed, rewarding on
   a slow read — Mercury's rhythm, our voice.
   ════════════════════════════════════════════════════════════════ */

.explainer-section {
  padding: clamp(64px, 8vh, 120px) 0 clamp(40px, 5vh, 72px);
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.explainer-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .explainer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 600px) {
  .explainer-grid { grid-template-columns: 1fr; gap: 12px; }
}

.explainer-tile {
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #F4EFE6 0%, #F0E8DC 100%);
  border: 1px solid rgba(232,98,26,0.18);
  border-radius: 16px;
  padding: 18px 18px 20px;
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
  box-shadow: 0 6px 18px rgba(28,25,23,0.06);
}
.explainer-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(28,25,23,0.14);
  border-color: rgba(232,98,26,0.32);
}
.explainer-mini {
  position: relative;
  height: 140px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid rgba(28,25,23,0.06);
  padding: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.explainer-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.explainer-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* ── Tile 1 mini · Reads every interview ── */
.explainer-mini--reads {
  gap: 7px;
  justify-content: center;
}
.exm-source {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 9px;
  background: #FAF7F0;
  border: 1px solid rgba(28,25,23,0.05);
  border-radius: 7px;
  opacity: 0;
  animation: exm-src-in 4s ease-in-out infinite;
}
.exm-source:nth-child(1) { animation-delay: 0s; }
.exm-source:nth-child(2) { animation-delay: 0.35s; }
.exm-source:nth-child(3) { animation-delay: 0.7s; }
.exm-source-logo {
  width: 44px;
  height: 12px;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0.85;
}
.exm-source-date {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-left: auto;
}
@keyframes exm-src-in {
  0%, 8%    { opacity: 0; transform: translateX(-4px); }
  20%       { opacity: 1; transform: translateX(0);    }
  85%       { opacity: 1; transform: translateX(0);    }
  95%, 100% { opacity: 0.3; transform: translateX(0);  }
}
/* scan line sweeping top to bottom */
.exm-scan {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232,98,26,0.6) 40%, rgba(232,98,26,0.6) 60%, transparent);
  animation: exm-scan 4s ease-in-out infinite;
  animation-delay: 0.2s;
}
@keyframes exm-scan {
  0%, 100% { transform: translateY(0);     opacity: 0; }
  10%      { transform: translateY(0);     opacity: 1; }
  80%      { transform: translateY(140px); opacity: 1; }
  90%      { transform: translateY(140px); opacity: 0; }
}

/* ── Tile 2 mini · Writes from real quotes ── */
.explainer-mini--writes {
  justify-content: center;
}
.exm-dm {
  background: #FDF9F1;
  border: 1px solid rgba(232,98,26,0.22);
  border-radius: 9px;
  padding: 10px 12px;
}
.exm-dm-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.exm-dm-avatar {
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 8.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.02em;
}
.exm-dm-name {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
}
.exm-dm-body {
  font-family: var(--font-sans);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.exm-pill {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: lowercase;
  animation: exm-pill-shimmer 4s ease-in-out infinite;
}
.exm-pill--name   { background: rgba(10,102,194,0.10); color: #0A66C2; animation-delay: 0.4s; }
.exm-pill--quote  { background: rgba(232,98,26,0.14);  color: var(--accent); animation-delay: 0.9s; }
.exm-pill--source { background: rgba(22,163,74,0.14); color: #16A34A; animation-delay: 1.4s; }
@keyframes exm-pill-shimmer {
  0%, 15%, 60%, 100% { filter: brightness(1); transform: translateY(0); }
  30%, 45%           { filter: brightness(1.18); transform: translateY(-1px); }
}

/* ── Tile 3 mini · QA before send ── */
.explainer-mini--qa {
  justify-content: center;
  align-items: center;
}
.exm-qa-card {
  width: 100%;
  background: #FDF9F1;
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 9px;
  padding: 14px 14px 16px;
  position: relative;
}
.exm-qa-line {
  height: 7px;
  border-radius: 4px;
  background: rgba(28,25,23,0.12);
  margin-bottom: 8px;
}
.exm-qa-line:last-child { margin-bottom: 0; }
.exm-qa-line--short { width: 62%; }
.exm-qa-check {
  position: absolute;
  top: -10px;
  right: -8px;
  opacity: 0;
  transform: scale(0.4) rotate(-18deg);
  animation: exm-qa-pop 4s ease-in-out infinite;
  animation-delay: 1s;
  filter: drop-shadow(0 4px 10px rgba(22,163,74,0.32));
}
@keyframes exm-qa-pop {
  0%, 20%   { opacity: 0; transform: scale(0.4) rotate(-18deg); }
  32%       { opacity: 1; transform: scale(1.15) rotate(0deg);   }
  40%       { opacity: 1; transform: scale(1) rotate(0deg);      }
  80%       { opacity: 1; transform: scale(1) rotate(0deg);      }
  92%, 100% { opacity: 0; transform: scale(0.7) rotate(12deg);   }
}

/* ── Tile 4 mini · Multi-channel send ── */
.explainer-mini--sends {
  justify-content: center;
  align-items: center;
}
.exm-chs {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.exm-ch {
  width: 24px; height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(28,25,23,0.08);
  animation: exm-ch-float 4s ease-in-out infinite;
}
.exm-ch:nth-child(1) { animation-delay: 0s;    }
.exm-ch:nth-child(2) { animation-delay: 0.2s;  }
.exm-ch:nth-child(3) { animation-delay: 0.4s;  }
.exm-ch:nth-child(4) { animation-delay: 0.6s;  }
@keyframes exm-ch-float {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-3px); }
}
.exm-arc {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 60px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
}

/* ── Explainer tiles · inline SVG micrographics (CSS keyframes) ── */
.explainer-illus {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin: 0 auto 10px;
  max-width: 160px;
}
.explainer-illus .exi-svg {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
  max-height: 120px;
}

/* Reads · transcript lines draw in */
.exi-read-line {
  stroke: #1C1917;
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  opacity: 0.2;
  animation: exi-read-draw 5.4s ease-in-out infinite;
}
.exi-read-line--accent {
  stroke: #EE6C4D;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation-name: exi-read-draw-accent;
  animation-duration: 5.4s;
}
.exi-svg--reads .exi-read-line:nth-of-type(2) { animation-delay: 0s; }
.exi-svg--reads .exi-read-line:nth-of-type(3) { animation-delay: 0.42s; }
.exi-svg--reads .exi-read-line:nth-of-type(4) { animation-delay: 0.84s; }
.exi-svg--reads .exi-read-line:nth-of-type(5) { animation-delay: 1.26s; }
.exi-svg--reads .exi-read-line:nth-of-type(6) { animation-delay: 1.68s; }
@keyframes exi-read-draw {
  0%, 5% { stroke-dashoffset: 140; opacity: 0.15; }
  20% { stroke-dashoffset: 0; opacity: 1; }
  68% { stroke-dashoffset: 0; opacity: 1; }
  88%, 100% { stroke-dashoffset: 140; opacity: 0.12; }
}
@keyframes exi-read-draw-accent {
  0%, 5% { stroke-dashoffset: 120; opacity: 0.2; }
  22% { stroke-dashoffset: 0; opacity: 1; }
  68% { stroke-dashoffset: 0; opacity: 1; }
  90%, 100% { stroke-dashoffset: 120; opacity: 0.15; }
}

/* Writes · lines type in + caret */
.exi-svg--writes .exi-write-line {
  transform-box: fill-box;
  animation: exi-write-line 5s ease-in-out infinite;
}
.exi-write-line--1 { transform-origin: 24px 44.5px; animation-delay: 0s; }
.exi-write-line--2 { transform-origin: 24px 57.5px; animation-delay: 0.5s; }
.exi-write-line--3 { transform-origin: 24px 70.5px; animation-delay: 1s; }
@keyframes exi-write-line {
  0%, 8% { transform: scaleX(0); opacity: 0.2; }
  22%, 68% { transform: scaleX(1); opacity: 1; }
  85%, 100% { transform: scaleX(0.04); opacity: 0.25; }
}
.exi-write-caret {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation:
    exi-write-caret-move 5s ease-in-out infinite,
    exi-write-caret-blink 1.1s steps(1, end) infinite;
}
@keyframes exi-write-caret-move {
  0%, 6% { transform: translate(0, 0); }
  22% { transform: translate(78px, 0); }
  40% { transform: translate(44px, 13px); }
  58% { transform: translate(58px, 13px); }
  76% { transform: translate(72px, 26px); }
  90%, 100% { transform: translate(0, 0); }
}
@keyframes exi-write-caret-blink {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0.28; }
}

/* QA · five green checkmarks in sequence */
.exi-qa-fill {
  fill: #D8D3CA;
  transform-origin: 12px 12px;
  transform-box: fill-box;
  animation: exi-qa-fillgo 5s ease-in-out infinite;
}
.exi-qa-tick {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: exi-qa-tickdraw 5s ease-in-out infinite;
}
.exi-svg--qa .exi-qa-mark:nth-child(2) .exi-qa-fill,
.exi-svg--qa .exi-qa-mark:nth-child(2) .exi-qa-tick { animation-delay: 0s; }
.exi-svg--qa .exi-qa-mark:nth-child(3) .exi-qa-fill,
.exi-svg--qa .exi-qa-mark:nth-child(3) .exi-qa-tick { animation-delay: 0.16s; }
.exi-svg--qa .exi-qa-mark:nth-child(4) .exi-qa-fill,
.exi-svg--qa .exi-qa-mark:nth-child(4) .exi-qa-tick { animation-delay: 0.32s; }
.exi-svg--qa .exi-qa-mark:nth-child(5) .exi-qa-fill,
.exi-svg--qa .exi-qa-mark:nth-child(5) .exi-qa-tick { animation-delay: 0.48s; }
.exi-svg--qa .exi-qa-mark:nth-child(6) .exi-qa-fill,
.exi-svg--qa .exi-qa-mark:nth-child(6) .exi-qa-tick { animation-delay: 0.64s; }
@keyframes exi-qa-fillgo {
  0%, 7% { fill: #D8D3CA; transform: scale(0.9); }
  16%, 74% { fill: #22C55E; transform: scale(1); }
  86%, 100% { fill: #D8D3CA; transform: scale(0.9); }
}
@keyframes exi-qa-tickdraw {
  0%, 9% { stroke-dashoffset: 22; opacity: 0; }
  20%, 74% { stroke-dashoffset: 0; opacity: 1; }
  86%, 100% { stroke-dashoffset: 22; opacity: 0; }
}

/* Channels · dots travel between icons */
.exi-ch-ico {
  transition: opacity var(--dur-fast) var(--ease-out);
}
.exi-ch-dotwrap {
  pointer-events: none;
  will-change: transform, opacity;
}
.exi-ch-dotwrap--1 { animation: exi-ch-dot-a 6.8s ease-in-out infinite; }
.exi-ch-dotwrap--2 { animation: exi-ch-dot-b 6.8s ease-in-out infinite; }
.exi-ch-dotwrap--3 { animation: exi-ch-dot-c 6.8s ease-in-out infinite; }
@keyframes exi-ch-dot-a {
  0% { transform: translate(36px, 76px); opacity: 0; }
  7% { opacity: 1; }
  32% { transform: translate(80px, 56px); opacity: 1; }
  58% { transform: translate(124px, 76px); opacity: 0.95; }
  68% { opacity: 0; }
  100% { transform: translate(36px, 76px); opacity: 0; }
}
@keyframes exi-ch-dot-b {
  0% { transform: translate(124px, 76px); opacity: 0; }
  10% { opacity: 1; }
  38% { transform: translate(80px, 92px); opacity: 1; }
  62% { transform: translate(36px, 76px); opacity: 1; }
  74% { opacity: 0; }
  100% { transform: translate(124px, 76px); opacity: 0; }
}
@keyframes exi-ch-dot-c {
  0% { transform: translate(80px, 48px); opacity: 0; }
  12% { opacity: 1; }
  42% { transform: translate(36px, 76px); opacity: 1; }
  68% { transform: translate(124px, 76px); opacity: 1; }
  80% { opacity: 0; }
  100% { transform: translate(80px, 48px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .exi-read-line,
  .exi-write-line,
  .exi-write-caret,
  .exi-qa-fill,
  .exi-qa-tick,
  .exi-ch-dotwrap--1,
  .exi-ch-dotwrap--2,
  .exi-ch-dotwrap--3 {
    animation: none !important;
  }
  .exi-read-line { stroke-dashoffset: 0 !important; opacity: 0.85 !important; }
  .exi-write-line { transform: scaleX(1) !important; opacity: 1 !important; }
  .exi-write-caret { opacity: 1 !important; transform: none !important; }
  .exi-qa-fill { fill: #22C55E !important; transform: none !important; }
  .exi-qa-tick { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .exi-ch-dotwrap--1 { transform: translate(80px, 66px) !important; opacity: 0.5 !important; }
  .exi-ch-dotwrap--2 { transform: translate(100px, 72px) !important; opacity: 0.35 !important; }
  .exi-ch-dotwrap--3 { transform: translate(60px, 72px) !important; opacity: 0.35 !important; }
}


/* ── v4 parity — QA checkmark badge repositioned ── */
.explainer-mini--qa .exm-qa-check {
  top: 6px !important;
  right: 6px !important;
}



/* ── v3.9 — Grayscale logo carousel + Maya/Jordan photo treatments ── */

/* Desaturate all carousel logos so the row reads as a uniform trust
   band instead of a rainbow of brand colors. */
.logo-marquee-item {
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter var(--dur-med) var(--ease-out),
              opacity var(--dur-med) var(--ease-out);
}
.logo-marquee:hover .logo-marquee-item {
  opacity: 0.88;
}

/* ─ Explainer Tile 2 · photo avatar + title line ─ */
.exm-dm-photo {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
  object-position: center 30%;
  flex-shrink: 0;
  border: 1px solid rgba(28,25,23,0.08);
}
.exm-dm-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
  min-width: 0;
}
.exm-dm-title {
  font-family: var(--font-sans);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* ─ Explainer Tile 3 · Jordan M. guest + Deel logo + QA check ─ */
.exm-qa-guest {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(28,25,23,0.06);
}
.exm-qa-photo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  object-fit: cover;
  object-position: center 28%;
  flex-shrink: 0;
  border: 1px solid rgba(28,25,23,0.08);
}
.exm-qa-guest-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.exm-qa-guest-name {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.exm-qa-guest-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.exm-qa-guest-title {
  font-family: var(--font-sans);
  font-size: 9.5px;
  color: var(--muted);
}
.exm-qa-guest-logo {
  height: 10px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0.85;
}


/* ════════════════════════════════════════════════════════════════
   SECTION 5.5 — FINAL SIGN-UP CTA (v4)
   Dark band between FAQ and footer. Two-column split: pitch-framed
   copy + Maya's photo + floating "pitch is drafted" card.
   ════════════════════════════════════════════════════════════════ */

.final-cta {
  padding: clamp(72px, 9vh, 128px) 0;
  background: linear-gradient(180deg, #1C1917 0%, #120F0E 100%);
  color: var(--on-dark);
  border-top: 1px solid rgba(244,242,237,0.06);
  border-bottom: 1px solid rgba(244,242,237,0.06);
}
.fcta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 920px) {
  .fcta-grid { grid-template-columns: 1fr; gap: 40px; }
}

.fcta-copy { max-width: 540px; }
.fcta-heading {
  font-family: var(--font-sans);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--on-dark);
  margin: 12px 0 16px;
}
.fcta-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-dark-soft);
  margin: 0 0 28px;
  max-width: 500px;
}
.fcta-buttons {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.fcta-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 13px 22px;
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(232,98,26,0.30);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.fcta-primary:hover { background: #D5581A; transform: translateY(-1px); }
.fcta-secondary {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--on-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(244,242,237,0.32);
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.fcta-secondary:hover { color: var(--accent); border-color: var(--accent); }
.fcta-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--on-dark-soft);
  letter-spacing: 0.04em;
}
.fcta-note-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #16A34A;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18);
}

/* ── Visual side: Maya's photo + floating pitch card ── */
.fcta-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 440px;
}
.fcta-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3/4;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  border: 1px solid rgba(244,242,237,0.08);
}
.fcta-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  filter: saturate(0.85);
}
.fcta-photo-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28,25,23,0) 45%, rgba(28,25,23,0.7) 100%);
  pointer-events: none;
}

/* Floating pitch card overlay sitting at the bottom-right of the photo */
.fcta-float-card {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(232,98,26,0.22);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.3);
  animation: fcta-float-in 900ms var(--ease-out) 400ms backwards;
}
@keyframes fcta-float-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0);    }
}
.fcta-float-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.fcta-float-photo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center 30%;
  flex-shrink: 0;
  border: 1px solid rgba(28,25,23,0.08);
}
.fcta-float-meta { min-width: 0; flex: 1; }
.fcta-float-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.fcta-float-title {
  font-family: var(--font-sans);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 1px;
}
.fcta-float-fit {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  background: rgba(232,98,26,0.10);
  border: 1px solid rgba(232,98,26,0.28);
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.fcta-float-fit-num {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.fcta-float-fit-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fcta-float-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.fcta-float-line {
  height: 6px;
  border-radius: 3px;
  background: rgba(28,25,23,0.10);
  width: 100%;
}
.fcta-float-line--short { width: 68%; }
.fcta-float-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fcta-float-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.fcta-float-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
  animation: fcta-rec-pulse 1.1s ease-in-out infinite;
}
@keyframes fcta-rec-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.fcta-float-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}
.fcta-float-wave span {
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: center center;
  animation: audio-mirror 1.2s ease-in-out infinite;
}
.fcta-float-wave span:nth-child(1) { animation-delay: 0s; height: 10px; }
.fcta-float-wave span:nth-child(2) { animation-delay: 0.1s; height: 10px; }
.fcta-float-wave span:nth-child(3) { animation-delay: 0.2s; height: 10px; }
.fcta-float-wave span:nth-child(4) { animation-delay: 0.05s; height: 10px; }
.fcta-float-wave span:nth-child(5) { animation-delay: 0.25s; height: 10px; }
.fcta-float-wave span:nth-child(6) { animation-delay: 0.12s; height: 10px; }
.fcta-float-wave span:nth-child(7) { animation-delay: 0.18s; height: 10px; }
.fcta-float-wave span:nth-child(8) { animation-delay: 0.08s; height: 10px; }


/* ════════════════════════════════════════════════════════════════
   HERO NOTE (upgraded April 15 v4)
   Green-check pair under the hero CTAs: "No credit card" · "First 3
   research runs free." Replaces the muted caption with something
   that reads as a real reassurance.
   ════════════════════════════════════════════════════════════════ */

.hero-note {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  white-space: nowrap;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}
.hero-note::-webkit-scrollbar {
  display: none;
}
.hero-note-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
}
.hero-note-tick {
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(22,163,74,0.18));
}
.hero-note-sep {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(28,25,23,0.25);
}

/* ════════════════════════════════════════════════════════════════
   BRAIN MOCKUP PLAY BUTTON + PIECE-BY-PIECE REVEAL (v4)
   A play/pause control sits bottom-right of the Brain card. An
   IntersectionObserver adds .hmc-in-view when the card enters, which
   triggers a staggered reveal sequence: show identity holds, voice
   panel fades in, tags appear one by one, feed items slide in, then
   a gentle camera push zooms the voice panel. Click the play button
   to pause/resume.
   ════════════════════════════════════════════════════════════════ */

.hero-mockup-card { position: relative; }

.hmc-play {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(28,25,23,0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(244,242,237,0.14);
  color: rgba(244,242,237,0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  box-shadow: 0 8px 20px rgba(0,0,0,0.32);
}
.hmc-play:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.hmc-play[data-state="paused"] .hmc-play-bars { display: none; }
.hmc-play[data-state="paused"] .hmc-play-triangle { display: inline-block; }
.hmc-play .hmc-play-triangle { display: none; }

/* Reveal sequence — 14s loop. Elements start hidden until the card
   is in-view, then appear in order. */
.hero-mockup-card.hmc-paused *,
.hero-mockup-card.hmc-paused::before,
.hero-mockup-card.hmc-paused::after { animation-play-state: paused !important; }

/* When not in view: skip animation, show steady final state. When in
   view: play the reveal sequence. */
.hero-mockup-card:not(.hmc-in-view) .hmc-voice,
.hero-mockup-card:not(.hmc-in-view) .hmc-feed-item,
.hero-mockup-card:not(.hmc-in-view) .hmc-voice-tag,
.hero-mockup-card:not(.hmc-in-view) .hmc-voice-audio {
  opacity: 1;
  transform: none;
}

.hero-mockup-card.hmc-in-view .hmc-voice {
  opacity: 0;
  transform: translateY(14px);
  animation: hmc-reveal-voice 14s ease-out infinite;
  animation-delay: 1s;
}
@keyframes hmc-reveal-voice {
  0%, 3%   { opacity: 0; transform: translateY(14px); }
  10%      { opacity: 1; transform: translateY(0);    }
  92%      { opacity: 1; transform: translateY(0);    }
  98%, 100%{ opacity: 0.4; transform: translateY(-4px);}
}

.hero-mockup-card.hmc-in-view .hmc-voice-audio {
  opacity: 0;
  transform: translateY(8px);
  animation: hmc-reveal-audio 14s ease-out infinite;
  animation-delay: 2.2s;
}
@keyframes hmc-reveal-audio {
  0%, 8%    { opacity: 0; transform: translateY(8px); }
  16%       { opacity: 1; transform: translateY(0);   }
  92%       { opacity: 1; transform: translateY(0);   }
  98%, 100% { opacity: 0.6; transform: translateY(0); }
}

/* Tags appear one by one */
.hero-mockup-card.hmc-in-view .hmc-voice-tags .hmc-voice-tag:nth-child(1) { animation: hmc-tag-in 14s ease-out infinite; animation-delay: 4.0s; }
.hero-mockup-card.hmc-in-view .hmc-voice-tags .hmc-voice-tag:nth-child(2) { animation: hmc-tag-in 14s ease-out infinite; animation-delay: 4.6s; }
.hero-mockup-card.hmc-in-view .hmc-voice-tags .hmc-voice-tag:nth-child(3) { animation: hmc-tag-in 14s ease-out infinite; animation-delay: 5.2s; }
.hero-mockup-card.hmc-in-view .hmc-voice-tags .hmc-voice-tag:nth-child(4) { animation: hmc-tag-in 14s ease-out infinite; animation-delay: 5.8s; }
@keyframes hmc-tag-in {
  0%, 28%   { opacity: 0; transform: translateY(4px); }
  35%       { opacity: 1; transform: translateY(0);   }
  94%       { opacity: 1; transform: translateY(0);   }
  100%      { opacity: 1; transform: translateY(0);   }
}

/* Feed items slide in once the voice has "finished" */
.hero-mockup-card.hmc-in-view .hmc-feed-list .hmc-feed-item:nth-child(1) { animation: hmc-feed-in 14s ease-out infinite; animation-delay: 7.0s; }
.hero-mockup-card.hmc-in-view .hmc-feed-list .hmc-feed-item:nth-child(2) { animation: hmc-feed-in 14s ease-out infinite; animation-delay: 7.8s; }
@keyframes hmc-feed-in {
  0%, 48%   { opacity: 0; transform: translateY(10px); }
  55%       { opacity: 1; transform: translateY(0);    }
  95%       { opacity: 1; transform: translateY(0);    }
  100%      { opacity: 1; transform: translateY(0);    }
}

/* Gentle camera push on the voice panel near the end of the loop */
.hero-mockup-card.hmc-in-view .hmc-voice {
  transform-origin: 50% 30%;
}
.hero-mockup-card.hmc-in-view .hmc-feed {
  animation: hmc-feed-push 14s ease-in-out infinite;
  animation-delay: 0s;
  transform-origin: center top;
}
@keyframes hmc-feed-push {
  0%, 58%   { transform: scale(1); }
  72%, 85%  { transform: scale(1.025); }
  95%, 100% { transform: scale(1); }
}


/* ════════════════════════════════════════════════════════════════
   SECTION 4.5 — WHY PODCAST HOSTS NEED HELP (v4, April 15)
   Four-tile rationale grid. Each tile has its own micro-animation.
   Structurally parallels the earlier "What hadef does" explainer.
   ════════════════════════════════════════════════════════════════ */

.why-section {
  padding: clamp(72px, 9vh, 120px) 0 clamp(60px, 7vh, 100px);
  background: linear-gradient(180deg, #FAF7F0 0%, var(--bg) 100%);
  border-top: 1px solid var(--border);
}
.why-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 600px)  { .why-grid { grid-template-columns: 1fr; gap: 12px; } }

.why-tile {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(28,25,23,0.06);
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.why-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(232,98,26,0.28);
  box-shadow: 0 14px 32px rgba(28,25,23,0.10);
}
.why-mini {
  position: relative;
  height: 140px;
  border-radius: 11px;
  background: #F7F4ED;
  border: 1px solid rgba(28,25,23,0.06);
  padding: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.why-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.why-body { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ── Tile 1 · DMs rejected ── */
.why-mini--dms { gap: 6px; justify-content: center; }
.whydm {
  position: relative;
  background: #fff;
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 7px;
  padding: 6px 8px;
  animation: whydm-reject 4.5s ease-in-out infinite;
}
.whydm--1 { animation-delay: 0s;   }
.whydm--2 { animation-delay: 0.6s; }
.whydm--3 { animation-delay: 1.2s; }
.whydm-line { height: 5px; border-radius: 3px; background: rgba(28,25,23,0.14); margin-bottom: 4px; }
.whydm-line--short { width: 55%; margin-bottom: 0; }
.whydm-x {
  position: absolute;
  top: -5px; right: -5px;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: #DC2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  animation: whydm-xpop 4.5s ease-in-out infinite;
}
.whydm--1 .whydm-x { animation-delay: 0.4s; }
.whydm--2 .whydm-x { animation-delay: 1.0s; }
.whydm--3 .whydm-x { animation-delay: 1.6s; }
@keyframes whydm-reject {
  0%, 8%    { opacity: 0; transform: translateY(6px); }
  20%       { opacity: 1; transform: translateY(0);  }
  45%       { opacity: 1; transform: translateY(0);  }
  55%       { opacity: 0.35; transform: translateX(8px); }
  100%      { opacity: 0.35; transform: translateX(8px); }
}
@keyframes whydm-xpop {
  0%, 12%   { opacity: 0; transform: scale(0.4); }
  22%       { opacity: 1; transform: scale(1.15); }
  30%       { opacity: 1; transform: scale(1);   }
  55%, 100% { opacity: 0.7; transform: scale(1);  }
}

/* ── Tile 2 · Scrolling tagged feed ── */
.why-mini--feed { padding: 8px; overflow: hidden; }
.whyfeed-scroller {
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: whyfeed-scroll 12s linear infinite;
}
@keyframes whyfeed-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.whyfeed-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  background: #fff;
  border: 1px solid rgba(28,25,23,0.06);
  border-radius: 6px;
  flex-shrink: 0;
}
.whyfeed-tag {
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
}
.whyfeed-tag--pod { background: rgba(29,185,84,0.14);  color: #0F8B3E; }
.whyfeed-tag--art { background: rgba(232,98,26,0.14);  color: var(--accent); }
.whyfeed-tag--li  { background: rgba(10,102,194,0.14); color: #0A66C2; }
.whyfeed-tag--sub { background: rgba(255,103,25,0.14); color: #C24E12; }
.whyfeed-text {
  font-family: var(--font-sans);
  font-size: 9.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tile 3 · Chatbot error ── */
.why-mini--bot { padding: 10px; justify-content: center; }
.whybot-thread { display: flex; flex-direction: column; gap: 5px; }
.whybot-msg {
  padding: 6px 8px;
  border-radius: 7px;
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.35;
  max-width: 80%;
}
.whybot-msg--user { background: #F1EEE5; align-self: flex-end; }
.whybot-msg--bot  { background: rgba(232,98,26,0.10); align-self: flex-start; }
.whybot-msg--err  {
  background: rgba(220,38,38,0.10);
  color: #B91C1C;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: whybot-err-in 4s ease-out infinite;
  animation-delay: 2s;
  opacity: 0;
}
@keyframes whybot-err-in {
  0%, 48%   { opacity: 0; transform: translateY(4px); }
  55%       { opacity: 1; transform: translateY(0);   }
  96%, 100% { opacity: 1; transform: translateY(0);   }
}
.whybot-line { height: 4px; border-radius: 3px; background: rgba(28,25,23,0.14); margin-bottom: 3px; }
.whybot-line--short { width: 70%; margin-bottom: 0; }
.whybot-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--accent);
}
.whybot-dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 999px;
  background: currentColor;
  animation: whybot-dot-pulse 1s ease-in-out infinite;
}
.whybot-dot:nth-child(2) { animation-delay: 0.2s; }
.whybot-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes whybot-dot-pulse {
  0%, 100% { opacity: 0.3; transform: translateY(0);    }
  50%      { opacity: 1;   transform: translateY(-1px); }
}

/* ── Tile 4 · Hadef in MCP web ── */
.why-mini--mcp { align-items: center; justify-content: center; }
.whymcp-web {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.whymcp-line {
  stroke-dasharray: 3 3;
  animation: whymcp-dash 2s linear infinite;
}
@keyframes whymcp-dash { to { stroke-dashoffset: -12; } }
.whymcp-node {
  animation: whymcp-node-pulse 2.4s ease-in-out infinite;
}
.whymcp-node--1 { animation-delay: 0s;   }
.whymcp-node--2 { animation-delay: 0.3s; }
.whymcp-node--3 { animation-delay: 0.6s; }
.whymcp-node--4 { animation-delay: 0.9s; }
.whymcp-node--5 { animation-delay: 0.15s;}
.whymcp-node--6 { animation-delay: 0.75s;}
@keyframes whymcp-node-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1;   }
}
.whymcp-center {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 14px;
  background: #fff;
  border: 1.5px solid rgba(232,98,26,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(232,98,26,0.25);
  z-index: 2;
}
.whymcp-h { width: 40px; height: 40px; object-fit: contain; }

/* ════════════════════════════════════════════════════════════════
   SECTION 5.5 — FINAL SIGN-UP PILL (Serus-inspired, April 15 v4)
   Large pill container. Left: Maya portrait circle + floating action
   callouts + tagline. Right: dark section with double CTA.
   ════════════════════════════════════════════════════════════════ */

.final-pill {
  padding: clamp(80px, 10vh, 144px) 0 clamp(80px, 10vh, 120px);
  background: linear-gradient(180deg, var(--bg) 0%, #F4EFE6 100%);
}
.fpill {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: stretch;
  border-radius: 32px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(28,25,23,0.08);
  box-shadow: 0 28px 56px rgba(28,25,23,0.14);
  min-height: 420px;
}
@media (max-width: 920px) {
  .fpill { grid-template-columns: 1fr; }
}

/* ── Left: Maya + callouts ── */
.fpill-left {
  position: relative;
  padding: clamp(40px, 4vw, 64px);
  background: linear-gradient(145deg, #F4EFE6 0%, #F0E8DC 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
}
.fpill-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 50% 35%, rgba(232,98,26,0.10) 0%, rgba(232,98,26,0) 70%);
  pointer-events: none;
}

.fpill-subject {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
  z-index: 1;
}
.fpill-circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 18px 36px rgba(28,25,23,0.22);
  border: 4px solid #fff;
  animation: fpill-circle-in 900ms var(--ease-out) backwards;
}
@keyframes fpill-circle-in {
  0%   { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1);   }
}
.fpill-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(0.95);
}

/* Identity chip pinned to the bottom of the circle */
.fpill-identity {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 999px;
  padding: 6px 10px 6px 6px;
  box-shadow: 0 10px 24px rgba(28,25,23,0.14);
  white-space: nowrap;
  animation: fpill-identity-in 900ms var(--ease-out) 300ms backwards;
}
@keyframes fpill-identity-in {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  100% { opacity: 1; transform: translate(-50%, 0);   }
}
.fpill-identity-photo {
  width: 26px; height: 26px;
  border-radius: 999px;
  object-fit: cover;
  object-position: center 28%;
  flex-shrink: 0;
  border: 1px solid rgba(28,25,23,0.08);
}
.fpill-identity-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.fpill-identity-name {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.fpill-identity-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--muted);
}
.fpill-identity-dot { color: rgba(28,25,23,0.3); }
.fpill-verizon { display: inline-flex; align-items: center; }
.fpill-identity-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Orbit action callouts */
.fpill-callout {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 999px;
  padding: 6px 11px;
  box-shadow: 0 8px 20px rgba(28,25,23,0.12);
  white-space: nowrap;
  opacity: 0;
}
.fpill-callout--1 {
  top: 18%;
  left: 2%;
  animation: fpill-callout-in 600ms var(--ease-out) 700ms backwards,
             fpill-callout-float 5s ease-in-out 1.3s infinite;
}
.fpill-callout--2 {
  top: 8%;
  right: 4%;
  animation: fpill-callout-in 600ms var(--ease-out) 1000ms backwards,
             fpill-callout-float 5s ease-in-out 1.6s infinite;
}
.fpill-callout--3 {
  bottom: 18%;
  right: 3%;
  animation: fpill-callout-in 600ms var(--ease-out) 1300ms backwards,
             fpill-callout-float 5s ease-in-out 1.9s infinite;
}
@keyframes fpill-callout-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1);      }
}
@keyframes fpill-callout-float {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-4px); }
}

.fpill-tagline {
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 440px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ── Right: dark CTA ── */
.fpill-right {
  background: linear-gradient(145deg, #1C1917 0%, #100D0B 100%);
  color: var(--on-dark);
  padding: clamp(40px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.fpill-right-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.fpill-right-heading {
  font-family: var(--font-sans);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  margin: 0 0 8px;
}
.fpill-cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.fpill-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 13px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(232,98,26,0.32);
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.fpill-cta-primary:hover { background: #D5581A; transform: translateY(-1px); }
.fpill-cta-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(244,242,237,0.1);
  border-radius: 10px;
  padding: 12px 20px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.fpill-cta-google:hover { background: #F4F2ED; transform: translateY(-1px); }
.fpill-reassurance {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--on-dark-soft);
}
.fpill-reassurance span { display: inline-flex; align-items: center; gap: 6px; }



/* ════════════════════════════════════════════════════════════════
   BRAIN CARD POLISH PASS (April 15, v=9)

   Per Tan: Episode 41/36 feed was irrelevant noise. Tags should be
   static. External benefit pills float around the card to explain
   what the viewer is looking at. Brain health metrics sit where the
   feed used to be. Phase 2 zoom at ~second 5 dims everything else
   and spotlights the voice panel.
   ════════════════════════════════════════════════════════════════ */

/* Tags stay visible steadily \u2014 kill the staggered animation */
.hmc-voice-tag {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Brain health strip replaces the Episode feed */
.hmc-brain-health {
  list-style: none;
  padding: 14px 16px;
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: rgba(232,98,26,0.04);
  border: 1px solid rgba(232,98,26,0.14);
  border-radius: 12px;
}
.hbh-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
}
.hbh-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.hbh-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-left: 2px;
}
.hbh-trend { display: inline-flex; margin-left: 2px; }
.hbh-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: #16A34A;
  background: rgba(22,163,74,0.10);
  border: 1px solid rgba(22,163,74,0.28);
  padding: 6px 11px;
  border-radius: 999px;
}
.hbh-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #16A34A;
  animation: hbh-dot-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18);
}
@keyframes hbh-dot-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 1;   }
}

/* External benefit pills floating around the card.
   hero-mockup-wrap must be position:relative to anchor them. */
.hero-mockup-wrap { position: relative; }
.hmc-benefit {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 999px;
  padding: 8px 13px 8px 10px;
  box-shadow: 0 10px 24px rgba(28,25,23,0.14);
  opacity: 0;
  transform: translateY(8px) scale(0.94);
}
.hmc-benefit--1 {
  top: 4%;
  left: -6px;
  animation: hmc-pill-in 700ms var(--ease-out) 600ms both,
             hmc-pill-float 6s ease-in-out 1.3s infinite;
}
.hmc-benefit--2 {
  top: 32%;
  right: -10px;
  animation: hmc-pill-in 700ms var(--ease-out) 1100ms both,
             hmc-pill-float 6s ease-in-out 1.8s infinite;
}
.hmc-benefit--3 {
  bottom: 24%;
  left: -10px;
  animation: hmc-pill-in 700ms var(--ease-out) 1600ms both,
             hmc-pill-float 6s ease-in-out 2.3s infinite;
}
.hmc-benefit--4 {
  bottom: 6%;
  right: -6px;
  animation: hmc-pill-in 700ms var(--ease-out) 2100ms both,
             hmc-pill-float 6s ease-in-out 2.8s infinite;
}
@keyframes hmc-pill-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1);      }
}
@keyframes hmc-pill-float {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-4px); }
}
@media (max-width: 820px) {
  .hmc-benefit { display: none; }
}

/* Phase 2 zoom at second 5: voice panel becomes the hero, rest dims */
.hero-mockup-card.hmc-in-view .hmc-show,
.hero-mockup-card.hmc-in-view .hmc-brain-health {
  animation: hmc-phase2-dim 14s ease-in-out infinite;
}
.hero-mockup-card.hmc-in-view .hmc-voice {
  animation: hmc-phase2-spotlight 14s ease-in-out infinite;
  animation-delay: 1s; /* don\u2019t conflict with the reveal delay */
}
@keyframes hmc-phase2-dim {
  0%, 44%   { opacity: 1;    filter: blur(0);   }
  55%, 82%  { opacity: 0.35; filter: blur(2px); }
  95%, 100% { opacity: 1;    filter: blur(0);   }
}
@keyframes hmc-phase2-spotlight {
  0%, 44%   { transform: scale(1);    box-shadow: 0 2px 8px rgba(232,98,26,0.08); }
  55%, 82%  { transform: scale(1.06); box-shadow: 0 18px 48px rgba(232,98,26,0.26); }
  95%, 100% { transform: scale(1);    box-shadow: 0 2px 8px rgba(232,98,26,0.08); }
}

/* ════════════════════════════════════════════════════════════════
   MERCURY CONTAINERS \u2014 NORMALIZED WIDTH + MIN-HEIGHT
   All three stages (Context / Pitch / Send) now share max-width and
   min-height so they read as the same shape across the scroll.
   ════════════════════════════════════════════════════════════════ */
.m3-stage {
  min-height: 320px;
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 760px) {
  .m3-stage { min-height: 0; }
}



/* ════════════════════════════════════════════════════════════════
   FINAL PILL \u2014 COLLAGE REBUILD (v=10)
   Maya reframed as a target guest ON THE MENU \u2014 a product-surface
   style composition (Spotify for Creators reference). Head-and-
   shoulders portrait in a tall rounded rect, UI fragments collaged
   over and around it: identity chip, fit badge, action callouts,
   drafted DM fragment, sources row. "Target guest \u00b7 template" pill
   pinned to the top-left of the portrait so the composition never
   reads as a testimonial.
   ════════════════════════════════════════════════════════════════ */

/* Override earlier circle styling \u2014 we do a portrait rectangle now */
.fpill-subject--collage {
  position: relative;
  display: block !important;
  width: 100%;
  min-height: 380px;
  padding: 0 !important;
}

/* The portrait frame \u2014 tall rounded rectangle */
.fpill-portrait {
  position: relative;
  width: clamp(220px, 28vw, 280px);
  aspect-ratio: 3/4;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(28,25,23,0.26);
  margin: 0 auto;
  background: #1C1917;
}
.fpill-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  filter: saturate(0.92);
}
.fpill-prospect-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(28,25,23,0.86);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(232,98,26,0.45);
  padding: 4px 9px 4px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  z-index: 2;
}
.fpill-prospect-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--accent);
  animation: hbh-dot-pulse 1.6s ease-in-out infinite;
}
.fpill-sparkle {
  position: absolute;
  top: 18px;
  right: 14px;
  animation: fpill-sparkle 3s ease-in-out infinite;
  z-index: 2;
}
@keyframes fpill-sparkle {
  0%, 100% { opacity: 0.55; transform: scale(0.9) rotate(0deg);   }
  50%      { opacity: 1;    transform: scale(1.15) rotate(15deg); }
}

/* Floating UI fragments collaged around + over the portrait */
.fpill-chip {
  position: absolute;
  z-index: 3;
  background: #fff;
  border: 1px solid rgba(28,25,23,0.08);
  border-radius: 12px;
  padding: 8px 11px;
  box-shadow: 0 10px 28px rgba(28,25,23,0.18);
  font-family: var(--font-sans);
  opacity: 0;
  transform: translateY(8px) scale(0.94);
}

/* Identity chip \u2014 top-left, overlapping the portrait */
.fpill-chip--identity {
  top: 8%;
  left: -8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 7px 7px;
  animation: fpill-chip-in 650ms var(--ease-out) 500ms both,
             fpill-chip-float 6s ease-in-out 1.1s infinite;
}
.fpill-chip-photo {
  width: 30px; height: 30px;
  border-radius: 7px;
  object-fit: cover;
  object-position: center 28%;
  flex-shrink: 0;
  border: 1px solid rgba(28,25,23,0.08);
}
.fpill-chip-meta { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.fpill-chip-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.fpill-chip-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--muted);
}
.fpill-chip-dot { color: rgba(28,25,23,0.3); }
.fpill-verizon-mark { display: inline-flex; align-items: center; }
.fpill-chip-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 4px;
}

/* Fit badge \u2014 top-right, overlapping the portrait */
.fpill-chip--fit {
  top: 4%;
  right: -4px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 7px 12px;
  background: linear-gradient(180deg, #fff 0%, #FDF9F1 100%);
  border-color: rgba(232,98,26,0.38);
  animation: fpill-chip-in 650ms var(--ease-out) 750ms both,
             fpill-chip-float 5.5s ease-in-out 1.4s infinite;
}
.fpill-chip-fit-num {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.fpill-chip-fit-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Action callouts \u2014 stacked on the right, outside the portrait */
.fpill-chip--action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}
.fpill-chip--action-a {
  top: 34%;
  right: -32px;
  animation: fpill-chip-in 650ms var(--ease-out) 1000ms both,
             fpill-chip-float 5s ease-in-out 1.7s infinite;
}
.fpill-chip--action-b {
  top: 48%;
  right: -20px;
  animation: fpill-chip-in 650ms var(--ease-out) 1250ms both,
             fpill-chip-float 5.2s ease-in-out 2.0s infinite;
}
.fpill-chip--action-c {
  top: 62%;
  right: -40px;
  animation: fpill-chip-in 650ms var(--ease-out) 1500ms both,
             fpill-chip-float 5.4s ease-in-out 2.3s infinite;
}

/* DM fragment \u2014 lower-left, overlapping the portrait */
.fpill-chip--dm {
  bottom: 6%;
  left: -18px;
  width: 180px;
  animation: fpill-chip-in 650ms var(--ease-out) 1750ms both,
             fpill-chip-float 5.6s ease-in-out 2.5s infinite;
}
.fpill-chip-dm-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.fpill-chip-dm-avatar {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fpill-chip-dm-to {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
}
.fpill-chip-dm-line {
  height: 5px;
  border-radius: 3px;
  background: rgba(28,25,23,0.10);
  margin-bottom: 4px;
}
.fpill-chip-dm-line--short { width: 62%; margin-bottom: 0; }

/* Sources row \u2014 lower-right, just outside the portrait */
.fpill-chip--sources {
  bottom: 12%;
  right: -18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  animation: fpill-chip-in 650ms var(--ease-out) 2000ms both,
             fpill-chip-float 5s ease-in-out 2.8s infinite;
}
.fpill-chip-sources-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.fpill-chip-source-logo {
  height: 12px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: 0.85;
}

@keyframes fpill-chip-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1);      }
}
@keyframes fpill-chip-float {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-4px); }
}

/* Retire the old circle and orbit callouts */
.fpill-circle, .fpill-callout, .fpill-identity { display: none !important; }

@media (max-width: 760px) {
  .fpill-chip--action-a, .fpill-chip--action-b, .fpill-chip--action-c,
  .fpill-chip--sources {
    right: 0;
  }
  .fpill-chip--identity, .fpill-chip--dm { left: 0; }
}

/* ════════════════════════════════════════════════════════════════
   WHY SECTION \u2014 Mercury 2\u00d72 quadrant layout (v=10)
   Per Tan: match Mercury "\u201cBanking\u2019s been a headache. Now, it\u2019s a head
   start.\u201d" \u2014 larger quadrants, artwork and text each get room to
   breathe. Not a copy of the thin "What hadef does" 4-col above.
   ════════════════════════════════════════════════════════════════ */
.why-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(20px, 2.5vw, 36px) !important;
}
@media (max-width: 700px) {
  .why-grid { grid-template-columns: 1fr !important; }
}
.why-tile {
  padding: clamp(24px, 3vw, 36px) !important;
  border-radius: 22px !important;
}
.why-mini {
  height: clamp(220px, 26vw, 300px) !important;
  padding: 22px !important;
  margin-bottom: 24px !important;
  border-radius: 14px !important;
}
.why-title {
  font-size: clamp(20px, 2.2vw, 26px) !important;
  line-height: 1.22 !important;
  margin-bottom: 10px !important;
}
.why-body {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  max-width: 480px;
}



/* ── fpill opener: section heading ABOVE the pill (v=11) ── */
.fpill-opener {
  margin-bottom: clamp(32px, 4vw, 56px);
  text-align: center;
}
.fpill-opener .section-heading {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.fpill-opener .section-sub {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* The right-side dark panel can now give more room to CTAs since
   the headline work happens up top. Drop its own duplicate heading. */
.fpill-right-heading { display: none; }



/* ── v=12 Maya collage spacing fix ── */

/* Give the collage stage more horizontal breathing room */
.fpill-subject--collage { padding: 10px 80px 10px 60px !important; }

/* Move fit badge higher so it doesn\u2019t collide with the Target Guest pill */
.fpill-chip--fit {
  top: -6px !important;
  right: 28px !important;
}

/* Action callouts: pull in tighter so they don\u2019t clip the container edge */
.fpill-chip--action-a { right: 0px !important; top: 30% !important; }
.fpill-chip--action-b { right: 14px !important; top: 44% !important; }
.fpill-chip--action-c { right: 0px !important; top: 58% !important; }

/* DM fragment: move up so sources don\u2019t stack on top of it */
.fpill-chip--dm {
  bottom: 20% !important;
  left: 0px !important;
  width: 170px !important;
}

/* Sources chip: pin to very bottom, shift left to avoid clipping */
.fpill-chip--sources {
  bottom: 4% !important;
  right: 0px !important;
}

/* Identity chip: tuck in slightly so the name/verizon row fully fits */
.fpill-chip--identity {
  top: 10% !important;
  left: 0px !important;
}

/* Narrow portrait slightly so callouts have room */
.fpill-portrait { width: clamp(200px, 26vw, 250px) !important; }

@media (max-width: 760px) {
  .fpill-subject--collage { padding: 10px 20px !important; }
}



/* ── v=13 — standalone LinkedIn chip + podcast thumb chip + tighter prospect tag ── */

/* Standalone LinkedIn chip */
.fpill-chip--linkedin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px 7px 8px;
  top: 22%;
  left: -6px;
  animation: fpill-chip-in 650ms var(--ease-out) 650ms both,
             fpill-chip-float 5.5s ease-in-out 1.2s infinite;
  z-index: 4;
}
.fpill-chip-linkedin-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  color: #0A66C2;
  letter-spacing: -0.005em;
}

/* Podcast thumbnail chip */
.fpill-chip--thumb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 6px 6px;
  bottom: 34%;
  left: -14px;
  width: 175px;
  animation: fpill-chip-in 650ms var(--ease-out) 1400ms both,
             fpill-chip-float 5.8s ease-in-out 2.1s infinite;
}
.fpill-chip-thumb-img {
  width: 32px; height: 32px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.fpill-chip-thumb-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
.fpill-chip-thumb-show {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fpill-chip-thumb-ep {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

/* Reposition DM fragment so thumb sits above it cleanly */
.fpill-chip--dm {
  bottom: 12% !important;
  left: -8px !important;
  width: 160px !important;
}

/* Sources chip: pin bottom right, now labeled "Recent media hits" */
.fpill-chip--sources {
  bottom: 4% !important;
  right: -4px !important;
}

/* Tighter prospect tag now that "template" is removed */
.fpill-prospect-tag { padding: 4px 10px 4px 8px !important; }



/* ── v=14 — rebalance fpill: more room for Maya, narrower dark CTA ── */
.fpill {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr) !important;
}
@media (max-width: 920px) {
  .fpill { grid-template-columns: 1fr !important; }
}

/* Give Maya\u2019s portrait a touch more breathing room now */
.fpill-portrait { width: clamp(220px, 30vw, 280px) !important; }



/* ── v=15 — decorative parallax shapes in fpill + sparkle in dark CTA ── */

.fpill { position: relative; overflow: hidden; }
.fpill-decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.10;
  animation: fpill-decor-drift 14s ease-in-out infinite;
}
.fpill-decor img { width: 100%; height: 100%; object-fit: contain; }
.fpill-decor--1 {
  width: 260px; height: 260px;
  top: -80px; left: -60px;
  filter: blur(6px);
  animation-delay: 0s;
}
.fpill-decor--2 {
  width: 180px; height: 180px;
  top: 40%; right: 44%;
  filter: blur(10px);
  opacity: 0.07;
  animation-delay: 2.5s;
}
.fpill-decor--3 {
  width: 220px; height: 220px;
  bottom: -60px; right: 35%;
  filter: blur(8px);
  opacity: 0.08;
  animation-delay: 4s;
}
.fpill-decor--4 {
  width: 140px; height: 140px;
  top: 12%; right: 32%;
  filter: blur(4px);
  opacity: 0.13;
  animation-delay: 1s;
}
@keyframes fpill-decor-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg);  }
  50%      { transform: translate(8px, -6px) rotate(4deg); }
}

/* Keep foreground content above the decor */
.fpill-left, .fpill-right { position: relative; z-index: 1; }

/* Dark CTA side: sparkle + small decor so Get Started lands with weight */
.fpill-right { overflow: hidden; }
.fpill-right-sparkle {
  position: absolute;
  top: 14%; right: 16px;
  width: 48px; height: 48px;
  opacity: 0.6;
  filter: drop-shadow(0 0 14px rgba(232,98,26,0.5));
  animation: fpill-sparkle-spin 6s ease-in-out infinite;
  z-index: 0;
}
.fpill-right-sparkle img { width: 100%; height: 100%; object-fit: contain; }
.fpill-right-decor {
  position: absolute;
  bottom: -40px; left: -40px;
  width: 180px; height: 180px;
  opacity: 0.08;
  filter: blur(8px);
  animation: fpill-decor-drift 14s ease-in-out 1.5s infinite;
  z-index: 0;
}
.fpill-right-decor img { width: 100%; height: 100%; object-fit: contain; }
.fpill-right-label,
.fpill-right-heading,
.fpill-cta-row,
.fpill-reassurance { position: relative; z-index: 1; }
@keyframes fpill-sparkle-spin {
  0%, 100% { transform: rotate(0deg)  scale(1);   opacity: 0.5; }
  50%      { transform: rotate(20deg) scale(1.1); opacity: 0.8; }
}

@media (max-width: 760px) {
  .fpill-decor--2, .fpill-decor--3 { display: none; }
}



/* ── v=16 — fpill chip reveal: play-on-view + choreographed sequence ──
   Chips are hidden by default. When .final-pill scrolls into view, an
   IntersectionObserver adds .fpill-in-view which triggers the reveal.
   Sequence runs in clear rhythm, not scattered random stagger.
   Wave 1 (identity axis): identity chip + LinkedIn chip emerge from the
     left edge of the portrait.
   Wave 2 (evaluation): fit badge drops in from top-right.
   Wave 3 (action): three action chips cascade down the right.
   Wave 4 (proof): podcast thumb + DM + sources anchor the bottom.
*/

/* Reset \u2014 all chips invisible by default, no auto-animation */
.fpill-chip,
.fpill-prospect-tag {
  opacity: 0;
  animation-play-state: paused !important;
}

/* When the section is in view, play the sequence */
.final-pill.fpill-in-view .fpill-prospect-tag {
  opacity: 1;
  animation: fpill-chip-in 500ms var(--ease-out) 100ms both !important;
}
.final-pill.fpill-in-view .fpill-chip--identity {
  animation: fpill-chip-in 500ms var(--ease-out) 250ms both,
             fpill-chip-float 6s ease-in-out 1.5s infinite !important;
  animation-play-state: running !important;
}
.final-pill.fpill-in-view .fpill-chip--linkedin {
  animation: fpill-chip-in 500ms var(--ease-out) 450ms both,
             fpill-chip-float 5.5s ease-in-out 1.7s infinite !important;
  animation-play-state: running !important;
}
.final-pill.fpill-in-view .fpill-chip--fit {
  animation: fpill-chip-in 500ms var(--ease-out) 700ms both,
             fpill-chip-float 5.5s ease-in-out 1.9s infinite !important;
  animation-play-state: running !important;
}
.final-pill.fpill-in-view .fpill-chip--action-a {
  animation: fpill-chip-in 500ms var(--ease-out) 950ms both,
             fpill-chip-float 5s ease-in-out 2.1s infinite !important;
  animation-play-state: running !important;
}
.final-pill.fpill-in-view .fpill-chip--action-b {
  animation: fpill-chip-in 500ms var(--ease-out) 1100ms both,
             fpill-chip-float 5.2s ease-in-out 2.3s infinite !important;
  animation-play-state: running !important;
}
.final-pill.fpill-in-view .fpill-chip--action-c {
  animation: fpill-chip-in 500ms var(--ease-out) 1250ms both,
             fpill-chip-float 5.4s ease-in-out 2.5s infinite !important;
  animation-play-state: running !important;
}
.final-pill.fpill-in-view .fpill-chip--thumb {
  animation: fpill-chip-in 500ms var(--ease-out) 1500ms both,
             fpill-chip-float 5.8s ease-in-out 2.7s infinite !important;
  animation-play-state: running !important;
}
.final-pill.fpill-in-view .fpill-chip--dm {
  animation: fpill-chip-in 500ms var(--ease-out) 1700ms both,
             fpill-chip-float 5.6s ease-in-out 2.9s infinite !important;
  animation-play-state: running !important;
}
.final-pill.fpill-in-view .fpill-chip--sources {
  animation: fpill-chip-in 500ms var(--ease-out) 1900ms both,
             fpill-chip-float 5s ease-in-out 3.1s infinite !important;
  animation-play-state: running !important;
}


/* ── v=17 Brain simplification (same as v3 v=23) ── */
.hero-mockup-card.hmc-in-view .hmc-voice,
.hero-mockup-card.hmc-in-view .hmc-voice-audio,
.hero-mockup-card.hmc-in-view .hmc-voice-tags .hmc-voice-tag,
.hero-mockup-card.hmc-in-view .hmc-show,
.hero-mockup-card.hmc-in-view .hmc-brain-health,
.hero-mockup-card.hmc-in-view .hmc-feed {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.hero-mockup-card .hmc-voice {
  animation: hmc-voice-breathe 6s ease-in-out infinite !important;
}


/* ── v=18 parity: move benefit-1 out of heading ── */
.hmc-benefit--1 {
  top: auto !important;
  bottom: 60% !important;
  left: -16px !important;
}


/* ── v=20 MOBILE-ONLY: Maya-collage cleanup ──
   The v=19 attempt scattered chips to the periphery but still looked busy.
   v=20 takes a clean approach: hide the noisy action/DM chips on mobile
   entirely, let the photo breathe, and keep only two small credentialing
   chips (identity + fit) neatly tucked into the top corners where they
   don't overlap Maya's face. Sources strip stays below, unchanged.
   Desktop and tablet layout remain fully untouched — this block fires only
   at viewport widths <= 560px.
*/
@media (max-width: 560px) {
  /* Collage container: tight side padding so the photo and two corner
     chips have room without overflow. */
  .fpill-subject--collage {
    padding: 8px 8px 8px 8px !important;
    min-height: 300px !important;
  }

  /* Portrait: centered, narrower so the top-corner chips sit comfortably
     outside the face area. */
  .fpill-subject--collage .fpill-portrait {
    width: clamp(180px, 58vw, 230px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Identity chip: pinned to top-left, scaled down so it stays above the
     portrait's shoulder line and doesn't cover the face. */
  .fpill-subject--collage .fpill-chip--identity {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: scale(0.82);
    transform-origin: top left;
  }

  /* Fit badge: pinned to top-right. */
  .fpill-subject--collage .fpill-chip--fit {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: scale(0.85);
    transform-origin: top right;
  }

  /* Hide the noisy chips on mobile. They overcrowd the face on small
     screens and the message still lands with just identity + fit. */
  .fpill-subject--collage .fpill-chip--linkedin,
  .fpill-subject--collage .fpill-chip--action,
  .fpill-subject--collage .fpill-chip--action-a,
  .fpill-subject--collage .fpill-chip--action-b,
  .fpill-subject--collage .fpill-chip--action-c,
  .fpill-subject--collage .fpill-chip--dm,
  .fpill-subject--collage .fpill-chip--thumb,
  .fpill-subject--collage .fpill-chip--sources {
    display: none !important;
  }

  /* Target-guest tag keeps its position but scales down to match chip sizing. */
  .fpill-subject--collage .fpill-prospect-tag {
    transform: scale(0.9);
    transform-origin: bottom center;
  }
}


/* ── v=20 parity ── */
.hmc-benefit--1 { top: 28% !important; bottom: auto !important; right: -18px !important; left: auto !important; }
.hmc-voice { min-height: 260px !important; padding: 22px !important; }
.hmc-voice-text { min-height: 88px; font-size: 15.5px !important; line-height: 1.6 !important; }
.hmc-voice-audio { margin-top: 18px !important; padding: 12px 14px !important; }
.hmc-brain-health { margin-top: 14px !important; padding: 18px 20px !important; border-radius: 14px !important; min-height: 64px; }
.hmc-feed-list { display: none !important; }


/* ── v=21 parity ── */
.fpill-opener-heading {
  font-size: clamp(32px, 4.2vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  max-width: 820px !important;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 14px !important;
}


/* ── v=22 parity ── */
.hero-mockup-card { overflow: visible; position: relative; }
.hmc-benefit--1 { top: 10% !important; bottom: auto !important; right: -18px !important; left: auto !important; }
.hmc-benefit--2 { top: 38% !important; bottom: auto !important; right: -22px !important; left: auto !important; }
.hmc-benefit--3 { top: 28% !important; bottom: auto !important; left: -18px !important; right: auto !important; }
.hmc-benefit--4 { bottom: 14% !important; top: auto !important; left: -22px !important; right: auto !important; }


/* ── v=23 parity: benefit pills play-on-view, clockwise ── */
.hmc-benefit { opacity: 0 !important; animation: none !important; }
.hero-mockup-card.hmc-in-view .hmc-benefit--1 { animation: hmc-pill-in 600ms var(--ease-out) 200ms both, hmc-pill-float 6s ease-in-out 1.2s infinite !important; }
.hero-mockup-card.hmc-in-view .hmc-benefit--2 { animation: hmc-pill-in 600ms var(--ease-out) 500ms both, hmc-pill-float 6s ease-in-out 1.5s infinite !important; }
.hero-mockup-card.hmc-in-view .hmc-benefit--4 { animation: hmc-pill-in 600ms var(--ease-out) 800ms both, hmc-pill-float 6s ease-in-out 1.8s infinite !important; }
.hero-mockup-card.hmc-in-view .hmc-benefit--3 { animation: hmc-pill-in 600ms var(--ease-out) 1100ms both, hmc-pill-float 6s ease-in-out 2.1s infinite !important; }


/* ── v=24 parity ── */
.hmc-benefit { opacity: 1 !important; animation: hmc-pill-float 6s ease-in-out infinite !important; }
.hero-mockup-card.hmc-in-view .hmc-benefit--1 { animation: hmc-pill-in 600ms var(--ease-out) 200ms both,  hmc-pill-float 6s ease-in-out 1.2s infinite !important; }
.hero-mockup-card.hmc-in-view .hmc-benefit--2 { animation: hmc-pill-in 600ms var(--ease-out) 500ms both,  hmc-pill-float 6s ease-in-out 1.5s infinite !important; }
.hero-mockup-card.hmc-in-view .hmc-benefit--4 { animation: hmc-pill-in 600ms var(--ease-out) 800ms both,  hmc-pill-float 6s ease-in-out 1.8s infinite !important; }
.hero-mockup-card.hmc-in-view .hmc-benefit--3 { animation: hmc-pill-in 600ms var(--ease-out) 1100ms both, hmc-pill-float 6s ease-in-out 2.1s infinite !important; }



/* ===========================================================
   SUBPAGE SYSTEM — shared by /about /roadmap /status /careers /trust
   /manifesto /changelog /terms /privacy and the new footer pages
   (features, personas, resources, company)
   =========================================================== */

/* Body modifier used by old prose pages */
body.subpage,
body.subpage-body {
  background: #FCFBF9;
  color: #1C1917;
}

/* --- OLD: .subpage-main + .container + .prose + .subpage-hero --- */
.subpage-main {
  padding: 72px 0 120px;
}
.subpage-main .container {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 28px;
}
.subpage-hero {
  padding: 48px 0 40px;
  border-bottom: 1px solid rgba(28, 25, 23, 0.08);
  margin-bottom: 48px;
}
.subpage-hero .s-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #EE6C4D;
  margin-bottom: 16px;
}
.subpage-h1 {
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #1C1917;
  margin: 0 0 20px;
}
.subpage-sub {
  font-size: 19px;
  line-height: 1.55;
  color: #44403C;
  max-width: 680px;
  margin: 0;
}
.prose {
  font-size: 17px;
  line-height: 1.65;
  color: #1C1917;
}
.prose h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 56px 0 16px;
  color: #1C1917;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose p {
  margin: 0 0 18px;
  color: #292524;
}
.prose-signature {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(28, 25, 23, 0.08);
  font-size: 16px;
  color: #44403C;
}

/* --- NEW: .subpage main + .sp-* for feature/persona/resource/company pages --- */
main.subpage {
  padding: 0 0 120px;
}
.sp-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}
.sp-hero {
  padding: 80px 0 72px;
  text-align: left;
}
.sp-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #EE6C4D;
  margin-bottom: 20px;
}
.sp-h1 {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #1C1917;
  margin: 0 0 22px;
  max-width: 18ch;
}
.sp-lede {
  font-size: 20px;
  line-height: 1.55;
  color: #44403C;
  max-width: 720px;
  margin: 0 0 32px;
}
.sp-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.sp-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
  border: 1px solid transparent;
}
.sp-cta--primary {
  background: #EE6C4D;
  color: #FFFFFF;
  box-shadow: 0 8px 18px rgba(238, 108, 77, 0.25);
}
.sp-cta--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(238, 108, 77, 0.32);
}
.sp-cta--ghost {
  background: transparent;
  color: #1C1917;
  border-color: rgba(28, 25, 23, 0.2);
}
.sp-cta--ghost:hover {
  background: rgba(28, 25, 23, 0.04);
}
.sp-section {
  padding: 72px 0;
}
.sp-section--cream {
  background: #F8F5F0;
}
.sp-h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #1C1917;
  margin: 0 0 32px;
  max-width: 28ch;
}
.sp-p {
  font-size: 17px;
  line-height: 1.65;
  color: #292524;
  max-width: 780px;
  margin: 0 0 18px;
}
.sp-grid {
  display: grid;
  gap: 20px;
}
.sp-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.sp-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.sp-grid + .sp-grid {
  margin-top: 20px;
}
.sp-card {
  background: #FFFFFF;
  border: 1px solid rgba(28, 25, 23, 0.08);
  border-radius: 14px;
  padding: 26px 24px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.sp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(28, 25, 23, 0.06);
}
.sp-section--cream .sp-card {
  background: #FFFFFF;
}
.sp-card-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #EE6C4D;
  margin-bottom: 12px;
}
.sp-card-h {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1C1917;
  margin: 0 0 10px;
  line-height: 1.25;
}
.sp-card-p {
  font-size: 15px;
  line-height: 1.55;
  color: #44403C;
  margin: 0;
}
.sp-final {
  padding: 0 0 80px;
  text-align: center;
}
.sp-final .sp-container {
  background: #1C1917;
  border-radius: 28px;
  padding: 72px 48px 64px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(28, 25, 23, 0.2);
}
.sp-final .sp-h2 {
  color: #F8F5F0;
  margin-left: auto;
  margin-right: auto;
  max-width: 20ch;
  position: relative;
  z-index: 1;
}
.sp-final .sp-lede {
  color: #A8A29E;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.sp-final .sp-cta-row {
  justify-content: center;
  position: relative;
  z-index: 1;
}
.sp-final .sp-cta--primary {
  background: #EE6C4D;
  color: #fff;
  box-shadow: 0 8px 24px rgba(238, 108, 77, 0.35);
}
.sp-final .sp-cta--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(238, 108, 77, 0.45);
}
.sp-final .sp-cta--ghost {
  color: #F8F5F0;
  border-color: rgba(255, 255, 255, 0.15);
}
.sp-final .sp-cta--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}
.sp-final .sp-container::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(238, 108, 77, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.sp-final .sp-container::after {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(238, 108, 77, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
/* Card hover top-border accent */
.sp-card {
  position: relative;
  overflow: hidden;
}
.sp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #EE6C4D, #F59E0B);
  opacity: 0;
  transition: opacity 200ms ease;
}
.sp-card:hover::before {
  opacity: 1;
}
/* Glossary dt dot accents */
.sp-dl dt {
  position: relative;
  padding-left: 16px;
}
.sp-dl dt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #EE6C4D;
}

/* Glossary / press kit — dl */
.sp-dl {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px 32px;
  max-width: 880px;
}
.sp-dl dt {
  font-weight: 700;
  color: #1C1917;
  font-size: 16px;
}
.sp-dl dd {
  margin: 0;
  color: #44403C;
  font-size: 16px;
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 900px) {
  .sp-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .sp-dl { grid-template-columns: 1fr; gap: 4px 0; }
  .sp-dl dd { margin-bottom: 16px; }
}
@media (max-width: 640px) {
  .sp-grid--3, .sp-grid--2 { grid-template-columns: 1fr; }
  .sp-hero { padding: 56px 0 48px; }
  .sp-section { padding: 56px 0; }
  .sp-final { padding: 0 0 48px; }
  .sp-final .sp-container { padding: 48px 24px 40px; border-radius: 20px; margin: 0 12px; }
}

/* ===========================================================
   MYTH BUST — Visual mini-hero with side-by-side comparison
   pill + 3 punchy clusters below.
   =========================================================== */
.myth-bust {
  padding: 120px 0 100px;
  background: #1C1917;
  color: #F8F5F0;
}

/* --- The enlarged pill (visual hero) --- */
.myth-pill {
  max-width: 1080px;
  margin: 0 auto 72px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.04);
}
.myth-pill-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 500px;
}

/* Divider */
.myth-pill-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  position: relative;
}
.myth-pill-divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.myth-pill-vs {
  position: relative;
  z-index: 1;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #78716C;
  background: #1C1917;
  padding: 8px 4px;
}

/* Sides */
.myth-pill-side {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.myth-pill-badge {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #57534E;
}
.myth-pill-badge--hadef {
  color: #EE6C4D;
}

/* ChatGPT mockup (muted, faded) */
.myth-pill-mockup {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
}
.myth-mock-bar {
  height: 28px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 10px;
  color: #57534E;
}
.myth-mock-bar--hadef {
  background: rgba(34, 197, 94, 0.08);
  color: #22C55E;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.myth-mock-bar-dot--green {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  margin-right: 8px;
}
.myth-mock-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.myth-mock-bubble {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
}
.myth-mock-bubble--user {
  background: rgba(255, 255, 255, 0.06);
  color: #A8A29E;
  align-self: flex-end;
  max-width: 80%;
}
.myth-mock-bubble--ai {
  background: rgba(255, 255, 255, 0.03);
  color: #78716C;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.myth-mock-line {
  height: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}
.myth-mock-quote {
  font-style: italic;
  color: #A8A29E;
  font-size: 12px;
  padding: 8px 0;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
  padding-left: 10px;
}
.myth-mock-nosource {
  font-size: 10px;
  color: #57534E;
  font-family: "JetBrains Mono", monospace;
}
.myth-mock-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: #78716C;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: auto;
}
.myth-mock-verdict--hadef {
  color: #22C55E;
}
.myth-mock-verdict-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.myth-mock-verdict-dot--warn {
  background: #F59E0B;
}
.myth-mock-verdict-dot--green {
  background: #22C55E;
}

/* hadef mockup (vibrant, grounded) */
.myth-pill-mockup--hadef {
  background: rgba(238, 108, 77, 0.04);
  border-radius: 12px;
  padding: 16px;
}
.myth-mock-pitch {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.myth-mock-pitch-quote {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  color: #F8F5F0;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border-left: 3px solid #EE6C4D;
}
.myth-mock-pitch-source {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #22C55E;
  font-family: "JetBrains Mono", monospace;
}
.myth-mock-source-icon {
  font-size: 14px;
}

/* Restored: myth-bust remaining rules (lost during revert) */
.myth-mock-pitch-thread {
  font-size: 12px;
  line-height: 1.55;
  color: #D6D3D1;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
}
.myth-mock-thread-label {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #EE6C4D;
  margin-right: 8px;
}
.myth-mock-pitch-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.myth-mock-chip {
  font-size: 10px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.06);
  color: #A8A29E;
}
.myth-mock-chip--orange {
  background: rgba(238, 108, 77, 0.15);
  color: #EE6C4D;
}

/* --- Section title (above the pill) --- */
.myth-tagline {
  text-align: center;
  margin-bottom: 56px;
}
.myth-tagline p {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  color: #F8F5F0;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}

/* --- 3 cluster cards --- */
.myth-clusters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}
.myth-cluster {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 36px 28px;
  text-align: left;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.myth-cluster:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}
.myth-cluster-icon {
  display: none;
}
.myth-cluster-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #EE6C4D;
  margin-bottom: 16px;
}
.myth-cluster-h {
  font-size: clamp(20px, 2.5vw, 24px);
  font-weight: 700;
  color: #F8F5F0;
  margin: 0 0 14px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.myth-cluster-p {
  font-size: 15px;
  line-height: 1.65;
  color: #A8A29E;
  margin: 0;
}

/* Responsive myth-bust */
@media (max-width: 768px) {
  .myth-pill-inner {
    grid-template-columns: 1fr;
  }
  .myth-pill-divider {
    width: 100%;
    height: 40px;
    flex-direction: row;
  }
  .myth-pill-divider::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
  }
  .myth-pill-side {
    padding: 24px 20px;
  }
  .myth-clusters {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .myth-bust {
    padding: 64px 0 56px;
  }
}

/* ── v43 patch: six-fix QA pass ────────────────────────────────────
   Fix A: tension-body paragraph spacing
   Fix B: myth-bust new header structure classes
   Fix D: m3-sub dark-background contrast
   Fix F: tension-beat / section-close separation
────────────────────────────────────────────────────────────────── */

/* Fix A — paragraph spacing inside tension-body */
.tension-body p {
  margin-bottom: 1.25em;
}
.tension-body p:last-child {
  margin-bottom: 0;
}
.tension-section .section-close {
  margin-top: 1.25em;
}

/* Fix B — myth-bust header, subtitle, body */
.myth-tagline-h {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  color: #F8F5F0;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 14px;
}
.myth-tagline-sub {
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 500;
  color: rgba(248, 245, 240, 0.72);
  line-height: 1.45;
  margin: 0 0 20px;
}
.myth-tagline-body {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(248, 245, 240, 0.62);
  max-width: 640px;
  margin: 0 auto;
}

/* Fix D — m3-sub: explicit dark-background-safe color */
.m3-sub {
  font-size: var(--fs-body-l);
  line-height: 1.5;
  color: var(--on-dark-soft);
  margin: 0 0 14px;
}

/* Fix F — space between tension-beat and section-close */
.tension-beat {
  margin-bottom: 1.25em;
}

.faq-a p + p { margin-top: 0.5em; }

/* April 20 typography fix — addresses size regression on .section-body / .section-sub / .tension-body / .m3-sub / .explainer-sub introduced in v43 */
.section-body,
.tension-body p,
.section-sub,
.m3-sub,
.explainer-sub {
  font-size: 1rem;
  line-height: 1.55;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-primary, #1C1917);
}

.section-sub {
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 400;
  opacity: 0.85;
  margin-bottom: 1.25rem;
}

.tension-body p {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.section-dark .section-sub,
.section-dark .section-body,
.section-dark .tension-body p {
  color: var(--on-dark-soft, rgba(255, 255, 255, 0.8));
}

/* Specificity fix: .myth-tagline p (0,1,1) was overriding .myth-tagline-sub/.myth-tagline-body (0,1,0) */
.myth-tagline .myth-tagline-sub {
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 500;
  color: rgba(248, 245, 240, 0.72);
  line-height: 1.45;
  margin: 0 0 20px;
}
.myth-tagline .myth-tagline-body {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.65;
  color: rgba(248, 245, 240, 0.62);
  max-width: 640px;
  margin: 0 auto;
}

/* Cookie consent — full-width bottom bar (not a corner pill). */
#cookieBanner.cookie-consent-bar {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  border-radius: 0;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}


/* ═════════════════════════════════════════════════════
   Hero video cursor + search bar (restored from v3)
═════════════════════════════════════════════════════ */
.btn-start-free:hover .btn-start-free-arrow {
  transform: translateX(3px);
}

/* Sign up with Google — serus pattern: white fill, hairline border, Google G left */
.btn-google {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  padding: 14px 22px;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body-s);
  font-weight: 600;
  line-height: 1;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-button);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn-google:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.btn-google-icon { flex-shrink: 0; }

/* ── Hero video card (right column): vertical 9:16 with chat overlay ─── */
.hero-video {
  width: 340px;
  justify-self: end; /* aligns right edge with .container right edge */
}
.hero-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: #1C1917;
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 12px rgba(0,0,0,0.10), 0 24px 48px rgba(28,25,23,0.18);
}
.hero-video-loop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%; /* bias upward so the person stays centered as the bottom overlay lands */
  display: block;
}
/* Soft dark gradient at bottom so the chat overlay reads cleanly over any frame */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(28,25,23,0.10) 0%,
    rgba(28,25,23,0.02) 35%,
    rgba(28,25,23,0.55) 78%,
    rgba(28,25,23,0.85) 100%
  );
  pointer-events: none;
}
/* Stack of overlay UI: hadef suggestion + chat search */
.hero-video-stack {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-video-suggest {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.hero-video-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Show artwork thumbnail in the suggestion row (replaces orange h avatar) */
.hero-video-show-art {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.hero-video-suggest-meta { flex: 1; min-width: 0; }
.hero-video-suggest-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.hero-video-suggest-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hero-video-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #2EB872;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(46,184,114,0.45);
  animation: hmc-pulse 2400ms cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.hero-video-suggest-wave {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 14px;
  flex-shrink: 0;
}
.hero-video-suggest-wave span {
  display: inline-block;
  width: 2px;
  background: var(--accent);
  border-radius: 2px;
  animation: hmc-wave 900ms ease-in-out infinite;
}
.hero-video-suggest-wave span:nth-child(1) { height: 4px;  animation-delay:   0ms; }
.hero-video-suggest-wave span:nth-child(2) { height: 9px;  animation-delay:  60ms; }
.hero-video-suggest-wave span:nth-child(3) { height: 12px; animation-delay: 120ms; }
.hero-video-suggest-wave span:nth-child(4) { height: 7px;  animation-delay: 180ms; }
.hero-video-suggest-wave span:nth-child(5) { height: 11px; animation-delay: 240ms; }
.hero-video-suggest-wave span:nth-child(6) { height: 14px; animation-delay: 300ms; }
.hero-video-suggest-wave span:nth-child(7) { height: 6px;  animation-delay: 360ms; }
.hero-video-suggest-wave span:nth-child(8) { height: 10px; animation-delay: 420ms; }
/* Chat search */
.hero-video-search {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.22);
}
.hero-video-search-icon {
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 2px;
}
.hero-video-search-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 500;
}
.hero-video-cursor {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  background: var(--ink);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: hmc-cursor-blink 1100ms steps(1, end) infinite;
}
@media (max-width: 880px) {
  .hero-video { width: min(340px, 90%); justify-self: center; }
}

/* ── Logo band — full-width section under hero (Stripe pattern) ─── */
.logo-band {
  padding: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 48px);
  background: var(--cream);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

@keyframes hmc-cursor-blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hmc-voice-rec, .hmc-voice-wave span, .hmc-cursor { animation: none; }
}
.hmc-feed-item {
  padding: 12px 14px;
}

/* ═══════════════════════════════════════════════════════
   Pricing alignment (Apr 21 v3)
   Force equal-height head, price, and CTA rows across all 4 tiers.
═══════════════════════════════════════════════════════ */
.pricing-card {
  display: flex !important;
  flex-direction: column !important;
}
.pricing-card-head {
  min-height: 200px !important;
  display: flex !important;
  flex-direction: column !important;
}
.pricing-card-head .pricing-blurb {
  flex: 1 1 auto !important;
  margin-bottom: 0 !important;
}
.pricing-card .pricing-price {
  margin-top: 0 !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: baseline !important;
  flex: 0 0 auto !important;
}
.pricing-card .pricing-cta {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
  flex: 0 0 auto !important;
}
.pricing-card .pricing-features {
  margin-top: 0 !important;
}

@media (max-width: 640px) {
  .pricing-card-head { min-height: auto !important; }
  .pricing-card .pricing-price { min-height: auto !important; }
  .pricing-card .pricing-cta { min-height: auto !important; margin-bottom: 14px !important; }
}

/* Monthly/Yearly toggle pill */
.pricing-toggle-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 28px;
}
.pricing-toggle {
  display: inline-flex;
  padding: 4px;
  background: #EDE9E1;
  border-radius: 999px;
  gap: 0;
}
.pricing-toggle-seg {
  appearance: none;
  border: none;
  background: transparent;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #67615A;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.pricing-toggle-seg:hover { color: #1C1917; }
.pricing-toggle-seg.is-active {
  background: #E8621A;
  color: #fff;
}
.pricing-toggle-save {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  letter-spacing: 0.02em;
}
.pricing-toggle-seg:not(.is-active) .pricing-toggle-save {
  background: rgba(232,98,26,0.14);
  color: #E8621A;
}