/* ══════════════════════════════════════════════════════════════════
   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) */
  /* Brand tokens, equal to api/static/design-tokens.css (which the
     homepage does not load). The names below them keep working: --ink,
     --ink-soft and --muted now resolve to the warm brand values instead of
     the neutral greys #2D2D2D and #555555 (2026-10-04 sweep, item 6). */
  --hadef-ink:         #1C1917;
  --hadef-ink-soft:    #292524;
  --hadef-muted:       #67615A;
  --hadef-label:       #A8A29E;
  --hadef-cream:       #F8F5F0;
  --hadef-accent:      #E8621A;
  /* White text and small orange text use the dark accent: white on
     #E8621A is 3.39:1, white on #C2410C is 5.18:1 (AA). */
  --hadef-accent-dark: #C2410C;

  --cream:        #F4F2ED;
  --cream-alt:    #EEEBE3;
  --ink:          var(--hadef-ink);
  --ink-soft:     var(--hadef-ink-soft);
  --muted:        var(--hadef-muted);
  --accent-dark:  var(--hadef-accent-dark);
  --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);
  /* Near-black for the hero agent card over video; the one new value. */
  --surface-agent:  rgba(15, 15, 16, 0.92);

  --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;
  --fs-micro:      11px;
  --fs-mini:       11.5px;
  --fs-nano:       10.5px;
  --fs-pico:       10px;

  --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) {
  /* minmax(0, 1fr), not 1fr: a 1fr track grows to its content's min-content
     width, and the two CTA buttons pushed the copy column to 422px on a 375px
     phone, where .hero's overflow-x: hidden silently clipped the headline. */
  .hero-inner { grid-template-columns: minmax(0, 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 */
  text-wrap: balance; /* no single orphaned word on the last line */
}
.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) {
  /* Phones keep the two buttons on one row, so the hero is no taller than
     it was and the cookie bar covers neither. Start free keeps its own
     width and Google takes the rest: split evenly, the Google label
     wrapped to two lines at 390 beside a one-line Start free. */
  .hero-cta-row {
    align-items: stretch;
    gap: 8px;
  }
  /* Two classes deep on purpose: an unconditional .btn-google { min-width: 240px }
     later in this file otherwise wins and forces the row wider than the phone. */
  .hero-cta-row > .btn-google,
  .hero-cta-row > .btn-start-free {
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
  }
  .hero-cta-row > .btn-start-free { flex: 0 0 auto; }
  .hero-cta-row > .btn-google { flex: 1 1 0; gap: 8px; }
  /* 16px less between the copy and the buttons: room under them for the
     cookie bar on a small phone whatever font the text falls back to. */
  .hero-subhead { margin-bottom: var(--sp-5); }
  .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;
}
@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: a carousel of the marks we have actually booked from.
   Tan overrode the 2026-09-02 static-grid ruling on 2026-10-03: logos as a
   carousel, no pause on hover. */
.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;
}
/* Provenance footnote under the logo wall. Quieter than the label above it. */
.hero-logo-row-footnote {
  font-size: var(--fs-label);
  color: var(--muted);
  letter-spacing: 0.01em;
  margin-top: var(--sp-4);
  text-align: center;
}
/* The viewport. overflow: hidden is what stops the double-width track from
   widening the page. No edge fade, mask or gradient (Tan, 2026-10-03: "no fading"). */
.logo-reel {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
/* Restores the compact single-row scrolling strip that e0056caa8 removed:
   same 39px gap, same 75s loop. Two identical rows side by side, the second
   aria-hidden. Moving the pair by -50% lands the second row exactly where the
   first began, so the loop has no seam. Deliberately no :hover or
   :focus-within pause (Tan, 2026-10-03). */
.logo-reel-track {
  display: flex;
  width: max-content;
  animation: logo-reel-scroll 75s linear infinite;
  will-change: transform;
}
.logo-reel-row {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 39px;
  padding-right: 39px; /* equals the gap, so the seam between rows is invisible */
}
@keyframes logo-reel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Default logo cell .  Hershey/NVIDIA/Microsoft baseline.
   Per-logo override classes below tune the outliers per Tan's review. */
.logo-grid-item {
  height: 32px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  display: block;
  opacity: 0.85;
  flex-shrink: 0;
  mix-blend-mode: multiply;
}

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

@media (max-width: 720px) {
  .logo-reel-row { gap: 32px; padding-right: 32px; }
  .logo-grid-item { height: 22px; width: 80px; max-width: 80px; }
}
/* Reduced motion: no movement, the one real row shown as a static wrapped
   strip, and the aria-hidden duplicate removed. */
@media (prefers-reduced-motion: reduce) {
  .logo-reel-track { animation: none; width: 100%; }
  .logo-reel-row { flex-shrink: 1; flex-wrap: wrap; justify-content: center; width: 100%; padding-right: 0; gap: 24px 40px; }
  .logo-reel-row[aria-hidden="true"] { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   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-dark);
  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.
───────────────────────────────────────────────────────────── */

/* Chrome bar */

/* Card body: two columns on desktop */

/* Left column: show identity (warm-dark panel that frames the artwork) */

/* Right column: live feed */

/* Linear-style fade-frame: bottom-right radial dissolve into page bg */

/* ─────────────────────────────────────────────────────────────
   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-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: #C7FF72; }
.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: #C7FF72; }
.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: #C7FF72;
  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; }
/* Text on the pills meets AA: the dark accent on its tint, and ink on the
   green tint, because no green token reaches 4.5:1 (#16A34A was 2.88:1). */
.wsp-pill--quote  { background: rgba(194,65,12,0.08);  color: var(--accent-dark); }
.wsp-pill--source { background: rgba(22,163,74,0.12); color: var(--ink-soft); }

/* 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-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: #C7FF72; }
  .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: #C7FF72; }
  .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-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 Money Podcast mockup,
   and next to The Sales Rundown across the Ways mocks. */

/* Tiny variant for app-shell workspace strips */

/* ── Money Podcast: import pills (replace the profile-photo slot) ───── */

/* Brain memory icon next to the title */

/* ── 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-dark);
  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-dark);
  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-dark);
  border-color: var(--accent-dark);
}
/* The old hover (#D5581A) was lighter than AA allows under white text. */
.pricing-cta--primary { transition: background var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.pricing-cta--primary:hover { background: var(--accent-dark); filter: brightness(0.92); }
.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: var(--fs-pico);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Cream on the accent tint: --accent on it was 4.09:1. */
  background: rgba(232,98,26,0.18);
  color: var(--on-dark);
  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-dark);
  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); }
/* "Their words" was drawn in ink on the ink card, so it vanished. */
.m3-venn .m3-venn-words { stroke: var(--cream); stroke-opacity: 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;
  /* White under the dark accent: 5.18:1 (the orange tint measured 4.34:1). */
  background: #fff;
  border: 1px solid rgba(194,65,12,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-dark);
  letter-spacing: -0.01em;
}
.m3-fit-unit {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--accent-dark);
  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-dark);
  background: rgba(194,65,12,0.08);
  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;
}
/* The pills hold Martin's real name, show and words, so they keep their
   case, and the quote pill may wrap rather than run out of the card. */
.m3-dm-body .wsp-pill { text-transform: none; letter-spacing: 0; }
.m3-dm-body .wsp-pill--quote {
  display: inline;
  white-space: normal;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.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-dark);
  border: 1px solid var(--accent-dark);
  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-delay: 5.2s;
}
/* ───── 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(194,65,12,0.35); }
  22%      { color: var(--accent-dark); }
  100%     { color: var(--accent-dark); }
}

/* ───── 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 */
}

/* Auto-tags appearing beneath the transcription */

/* ── 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;
}

/* 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. */

/* Mobile: keep the inline treatment but let pills stack vertically */

/* ── 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; }

@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); }
}

/* ── 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. */
.footer-audiogram {
  align-items: center !important;
}

@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);  }
}

.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;
}
.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;
}
/* 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-delay: 0.2s;
}
/* ── 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;
}
.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: #C7FF72; animation-delay: 1.4s; }
/* ── 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-delay: 1s;
  filter: drop-shadow(0 4px 10px rgba(22,163,74,0.32));
}
/* ── 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);
}
.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;  }
.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;
}
.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-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;
}
.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; }
.exi-write-caret {
  transform-box: fill-box;
  transform-origin: 0 50%;
}
/* QA · five green checkmarks in sequence */
.exi-qa-fill {
  fill: #D8D3CA;
  transform-origin: 12px 12px;
  transform-box: fill-box;
}
.exi-qa-tick {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}
.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; }
/* 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 { }
.exi-ch-dotwrap--2 { }
.exi-ch-dotwrap--3 { }
@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. */
/* No hover brightening and no opacity transition: Tan, 2026-10-03, "no fading". */
.logo-grid-item {
  filter: grayscale(1);
  opacity: 0.72;
}

/* ─ 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);
}
.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;
}
.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;
}
/* Phones: the three items wrap instead of scrolling sideways. At 390 the
   nowrap row was 398px inside 342px and "3 free pitches" sat off screen.
   The dot separators would strand at a line end, so they step aside. */
@media (max-width: 560px) {
  .hero-note {
    flex-wrap: wrap;
    white-space: normal;
    overflow-x: visible;
    column-gap: 14px;
    row-gap: 6px;
  }
  .hero-note-sep { display: none; }
  .hero-note-item { white-space: nowrap; }
}
.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);
}

/* When not in view: skip animation, show steady final state. When in
   view: play the reveal sequence. */

/* Tags appear one by one */

/* Feed items slide in once the voice has "finished" */

/* ════════════════════════════════════════════════════════════════
   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: 1;
  transform: scale(1);
}
@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); }
}
/* ── Tile 2 · Scrolling tagged feed ── */
.why-mini--feed { padding: 8px; overflow: hidden; }
.whyfeed-scroller {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.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: var(--fs-pico);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
}
/* The tint names the source; the word is ink. Coloured words on their own
   tint measured 2.88 to 4.64:1 at 8.5px; ink-soft on every tint is 12:1 or more. */
.whyfeed-tag--pod,
.whyfeed-tag--art,
.whyfeed-tag--li,
.whyfeed-tag--sub { color: var(--ink-soft); }
.whyfeed-tag--pod { background: rgba(29,185,84,0.14); }
.whyfeed-tag--art { background: rgba(232,98,26,0.14); }
.whyfeed-tag--li  { background: rgba(10,102,194,0.14); }
.whyfeed-tag--sub { background: rgba(255,103,25,0.14); }
.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: var(--fs-pico);
  /* --accent on the bot bubble's tint was 2.77:1, and --accent-dark only 4.2:1. */
  color: var(--muted);
}
.whybot-dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 999px;
  background: var(--accent-dark);
}
.whybot-dot:nth-child(2) { animation-delay: 0.2s; }
.whybot-dot:nth-child(3) { animation-delay: 0.4s; }
/* ── 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;
}
.whymcp-node {
}
.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;}
.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%;
}
.fpill-callout--2 {
  top: 8%;
  right: 4%;
}
.fpill-callout--3 {
  bottom: 18%;
  right: 3%;
}
.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-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-dark);
  color: #fff;
  border: 1px solid var(--accent-dark);
  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 { transition: background var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out),
                                transform var(--dur-fast) var(--ease-out); }
.fpill-cta-primary:hover { background: var(--accent-dark); filter: brightness(0.92); 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; }

/* ════════════════════════════════════════════════════════════════
   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: a 3:4 rounded rectangle holding a licensed stock
   portrait (Pexels, Mikhail Nilov; scripts/render_final_cta_headshot.py)
   of an unnamed prospective guest. The treatment PR #339 removed. */
.fpill-portrait {
  position: relative;
  width: clamp(220px, 30vw, 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: var(--ink);
}
.fpill-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.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);
}
.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;
}
/* The identity chip carries the LinkedIn mark (the same inline mark as the
   Profile chip and the footer), not a second copy of the portrait. */
.fpill-chip-mark { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.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-dark);
  letter-spacing: -0.02em;
}
.fpill-chip-fit-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent-dark);
  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 {
  text-wrap: pretty;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}


/* ── 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-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;
}

@media (prefers-reduced-motion: reduce) {
  .final-pill .fpill-chip,
  .final-pill .fpill-prospect-tag,
  .final-pill.fpill-in-view .fpill-chip,
  .final-pill.fpill-in-view .fpill-prospect-tag {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ── v=17 Brain simplification (same as v3 v=23) ── */

/* ── v=18 parity: move benefit-1 out of heading ── */

/* ── 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: low on the left, over the shoulder, never the face.
     084dad510 pinned it and the fit chip both to top: 0, where the fit
     chip covered it and both covered the "Target guest" tag (sweep item
     9). Its scale() never applied: the reveal and float animations own
     transform, so the chips are laid out at their real size. */
  .fpill-subject--collage .fpill-chip--identity {
    top: auto !important;
    left: 0 !important;
    right: auto !important;
    bottom: 22px !important;
  }

  /* Fit badge: top-right, clear of the tag at the portrait's top-left. */
  .fpill-subject--collage .fpill-chip--fit {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
  }

  /* 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;
  }

}

/* ── v=20 parity ── */

/* ── v=21 parity ── */
.fpill-opener-heading {
  text-wrap: balance;
  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 ── */

/* ── v=24 parity ── */

/* ===========================================================
   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: var(--hadef-ink);
  color: var(--hadef-cream);
}

/* --- 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: var(--hadef-label);
  background: var(--hadef-ink);
  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: var(--hadef-label);
}
.myth-pill-badge--hadef {
  color: var(--hadef-accent);
}

/* 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: #C7FF72;
  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: var(--hadef-label);
  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: var(--hadef-label);
  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: var(--hadef-label);
  font-family: "JetBrains Mono", monospace;
}
.myth-mock-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--hadef-label);
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: auto;
}
.myth-mock-verdict--hadef {
  color: #C7FF72;
}
.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(232, 98, 26, 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: var(--hadef-cream);
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border-left: 3px solid var(--hadef-accent);
}
.myth-mock-pitch-source {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #C7FF72;
  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;
  /* No token: kept. --hadef-accent is 4.19:1 here; this is 4.6:1. */
  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: var(--hadef-label);
}
.myth-mock-chip--orange {
  /* No token: kept (#EE6C4D), on a fainter tint than before (0.15), so
     the 10px label clears AA on the dark card. */
  background: rgba(238, 108, 77, 0.06);
  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: var(--hadef-cream);
  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: var(--hadef-cream);
  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);
}

/* The .m3-ways section is dark; the shared typography rule above set .m3-sub to
   the dark ink text color, so the deck line rendered near-invisible on the
   near-black background. Restore the readable muted-on-dark tone (the color the
   .m3-sub base rule already intends), so it reads as a proper subheading, a
   touch softer than the light headline. */
.m3-sub {
  color: var(--on-dark-soft);
}

.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: a full-width bottom bar (not a corner pill).
   Only display stays inline (display:none, then the script sets flex), so
   every other rule here, including the phone layout below, can take effect.
   Both buttons share one class: accepting and rejecting are equally easy. */
#cookieBanner.cookie-consent-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding: 14px 24px;
  border-radius: 0;
  background: #1C1917;
  color: #F8F5F0;
  font-size: 13px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}
.cookie-consent-btn {
  min-width: 160px; /* both buttons the same width, so neither reads as the lesser choice */
  padding: 8px 18px;
  background: var(--accent-dark); /* white on it is 5.18:1; on the old coral it was 3.05:1 */
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
/* Phones: a slim two-row bar, the sentence on one line above the two
   buttons, which split the width equally. It must stay under 72px tall: at
   375x812 the hero's Start free button ends at y=740. */
@media (max-width: 600px) {
  #cookieBanner.cookie-consent-bar {
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.35;
  }
  #cookieBanner .cookie-consent-text {
    flex: 1 0 100%;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
  }
  #cookieBanner .cookie-consent-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 12px;
  }
}

/* ═════════════════════════════════════════════════════
   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;
}
/* ── Hero agent card: the research agent taking actions over the video ───
   Tan's sequence (2026-10-04). A white search bar carrying the show's context
   is typed into; then the near-black card above it grows one step at a time,
   each step appearing only once it starts, and ends on the result row.
   Everything sits in .hac-stack, absolutely positioned inside the video
   frame, so growth never moves anything outside the hero media.
   The markup ships the finished run. The step script adds .is-live, which is
   what hides unstarted steps; it only ever sets attributes. Growth uses the
   grid-template-rows 0fr -> 1fr technique; everything else animates
   transform and opacity only, on --hac-ease-out. There is no endless CSS
   animation: the loader is stepped by the script. */
.hac-stack {
  --hac-ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
  --hac-ease-rail: cubic-bezier(0.77, 0, 0.175, 1);
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 250ms var(--hac-ease-out);
}
.hac {
  position: relative;
  padding: 14px 14px 14px;
  background: var(--surface-agent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-card);
  box-shadow: 0 8px 32px rgba(0,0,0,0.24);
  color: var(--on-dark);
  font-family: var(--font-sans);
}
.hac-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.hac-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
}
.hac-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hac-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.2;
  color: var(--on-dark);
}
/* Says plainly that this is a demonstration, not the visitor's own run. */
.hac-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-pico);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--on-dark-soft);
}
.hac-toast {
  flex-shrink: 0;
  padding: 3px 8px;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--fs-pico);
  line-height: 1.2;
  color: var(--on-dark-soft);
  font-variant-numeric: tabular-nums;
  /* Wide enough for "Step 5/5", so "Done" never narrows the header. */
  min-width: 8ch;
  text-align: center;
  transition: opacity 180ms var(--hac-ease-out), transform 180ms var(--hac-ease-out);
}
/* A text swap is sequential: the old text leaves (120ms, up and out), then
   the new one arrives (180ms, from below). Never both at once. */
.hac-toast.is-out { opacity: 0; transform: translateY(-4px); transition-duration: 120ms; }
.hac-toast.is-in { opacity: 0; transform: translateY(4px); transition-duration: 0ms; }

/* Steps. Each row is a one-track grid: 1fr when shown, 0fr while the step has
   not started, so a step's arrival grows the card by exactly its own height.
   The clip carries no padding, or the padding would hold the track open. */
.hac-steps {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.hac-step {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 250ms var(--hac-ease-out), opacity 250ms var(--hac-ease-out);
}
.hac-step-clip {
  min-height: 0;
  overflow: hidden;
}
.hac-step-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  column-gap: 10px;
  padding-bottom: 9px;
}
.hac-step:last-child .hac-step-row { padding-bottom: 0; }
.hac-stack.is-live .hac-step:not(.is-active):not(.is-done) {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
}
/* Rail segment from this circle down to the next one. A track on ::before,
   the fill on ::after, faded in. Hidden while the next step has not
   appeared, so nothing dangles below the last shown step. */
.hac-step::before,
.hac-step::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 18px;
  bottom: 1px;
  width: 2px;
  border-radius: 1px;
}
.hac-step::before { background: var(--border-on-dark); }
.hac-step::after {
  background: var(--accent);
  opacity: 0;
  transition: opacity 250ms var(--hac-ease-out);
}
.hac-step:last-child::before,
.hac-step:last-child::after { display: none; }
.hac-step.is-done::after { opacity: 1; }
.hac-stack.is-live .hac-step:has(+ .hac-step:not(.is-active):not(.is-done))::before,
.hac-stack.is-live .hac-step:has(+ .hac-step:not(.is-active):not(.is-done))::after { opacity: 0; }

.hac-mark {
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 2px;
}
.hac-ring,
.hac-check {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
/* The marker: a hollow outline while the step runs; on completion the
   orange fill fades and settles in (from 0.9, never from 0), then the check
   draws itself 60ms later with a 200ms stroke-dashoffset. */
.hac-ring { border: 1.5px solid var(--border-on-dark); }
.hac-step.is-active .hac-ring { border-color: var(--accent); }
.hac-check {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 200ms var(--hac-ease-out), transform 200ms var(--hac-ease-out);
}
.hac-check svg {
  width: 8px;
  height: 8px;
  fill: none;
  stroke: var(--on-dark);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hac-check path {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  transition: stroke-dashoffset 200ms var(--hac-ease-out) 60ms;
}
.hac-step.is-done .hac-check { opacity: 1; transform: none; }
.hac-step.is-done .hac-check path { stroke-dashoffset: 0; }

/* A running step is deliberately faint (Tan: about 0.4), and goes solid with
   its check when it completes. */
.hac-act {
  /* One line per step, however narrow the frame: the card has to leave the
     video visible (Tan, 2026-10-04: at least 35% of it at every width). */
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.35;
  color: var(--on-dark);
  opacity: 1;
  transition: opacity 250ms var(--hac-ease-out);
}
.hac-step.is-active .hac-act { opacity: 0.4; }
.hac-step.is-done .hac-act { opacity: 1; }

/* Footer: the current step's reasoning line with the loader at its left, and
   the result row, in one cell. It grows in with the first step. */
.hac-foot-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 250ms var(--hac-ease-out), opacity 250ms var(--hac-ease-out);
}
.hac-foot-clip {
  min-height: 0;
  overflow: hidden;
}
.hac-stack.is-live .hac[data-step="0"] .hac-foot-wrap {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
}
.hac-foot {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border-on-dark);
}
.hac-why,
.hac-result { grid-area: 1 / 2; }
/* Lines in this one cell never overlap. The outgoing line fades and moves up
   (opacity and translate, 120ms); only then does the incoming one rise in from
   4px below (opacity and transform, 180ms, starting at 120ms). Two transform
   properties, so the exit and the entry each run one way: translate carries
   the exit, transform the entry, and each resets while the line is invisible. */
.hac-why {
  align-self: center;
  font-size: var(--fs-micro);
  line-height: 1.4;
  color: var(--on-dark);
  opacity: 0;
  translate: 0 -4px;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 120ms var(--hac-ease-out), translate 120ms var(--hac-ease-out),
              transform 0ms var(--hac-ease-out) 120ms;
}
.hac[data-step="1"] .hac-why[data-why="1"],
.hac[data-step="2"] .hac-why[data-why="2"],
.hac[data-step="3"] .hac-why[data-why="3"],
.hac[data-step="4"] .hac-why[data-why="4"],
.hac[data-step="5"] .hac-why[data-why="5"] {
  opacity: 0.4;
  translate: 0 0;
  transform: none;
  transition: opacity 180ms var(--hac-ease-out) 120ms, translate 0ms var(--hac-ease-out),
              transform 180ms var(--hac-ease-out) 120ms;
}
.hac[data-phase="check"][data-step="1"] .hac-why[data-why="1"],
.hac[data-phase="check"][data-step="2"] .hac-why[data-why="2"],
.hac[data-phase="check"][data-step="3"] .hac-why[data-why="3"],
.hac[data-phase="check"][data-step="4"] .hac-why[data-why="4"],
.hac[data-phase="check"][data-step="5"] .hac-why[data-why="5"] { opacity: 1; }

/* The loader: a small dark tile at the left of the reasoning line. While a
   step runs the script swaps data-shape every 700ms through three of Hadef's
   own shapes (api/static/shapes/); each crossfades in with a slight turn and
   scale. On completion it settles on a check. */
.hac-tile {
  grid-area: 1 / 1;
  align-self: center;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 1px var(--border-on-dark);
}
.hac-shape,
.hac-tile-check {
  position: absolute;
  inset: 4px;
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: scale(0.9) rotate(-30deg);
  transition: opacity 280ms var(--hac-ease-out), transform 280ms var(--hac-ease-out);
}
.hac-shape { color: var(--accent); }
.hac-shape[data-s="2"] { color: var(--on-dark-soft); }
/* The hollow quatrefoil's source stroke is 80 units, about 0.3px at this
   size; drawn heavier so the muted tone still reads. Geometry unchanged. */
.hac-shape[data-s="2"] g { stroke-width: 260; }
.hac-tile-check {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hac-tile-check svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hac-tile[data-shape="0"] .hac-shape[data-s="0"],
.hac-tile[data-shape="1"] .hac-shape[data-s="1"],
.hac-tile[data-shape="2"] .hac-shape[data-s="2"],
.hac-tile[data-shape="check"] .hac-tile-check { opacity: 1; transform: none; }

.hac-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) 12px;
  opacity: 0;
  translate: 0 -4px;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 120ms var(--hac-ease-out), translate 120ms var(--hac-ease-out),
              transform 0ms var(--hac-ease-out) 120ms;
}
.hac[data-step="done"] .hac-result {
  opacity: 1;
  translate: 0 0;
  transform: none;
  pointer-events: auto;
  transition: opacity 180ms var(--hac-ease-out) 120ms, translate 0ms var(--hac-ease-out),
              transform 180ms var(--hac-ease-out) 120ms;
}
.hac-result-title {
  margin: 0;
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
  color: var(--on-dark);
}
.hac-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: var(--r-button);
  background: var(--accent);
  color: var(--on-dark);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--hac-ease-out);
}
.hac-link svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hac-link:active { transform: scale(0.97); }
.hac-link:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .hac-link:hover { background: var(--accent-hover); }
}

/* The search bar: the white card's own style. The full query is laid out
   invisibly under the typed text, so the bar never changes size while
   typing. No caret. */
.hac-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
  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);
}
.hac-search-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.hac-search-icon {
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 1px;
}
.hac-q {
  flex: 1;
  min-width: 0;
  display: grid;
  font-size: var(--fs-caption);
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
}
/* While typing, the query wraps in full (.hac-q-long); once typed, the bar
   shrinks to one ellipsized line (.hac-q-short), the long form collapsing as
   the short one opens. The markup ships the typed state. */
.hac-q-long,
.hac-q-short { display: grid; }
.hac-q-long { grid-template-rows: 0fr; opacity: 0; }
.hac-q-short { grid-template-rows: 1fr; opacity: 1; }
.hac-q-long {
  transition: opacity 120ms var(--hac-ease-out), grid-template-rows 250ms var(--hac-ease-out) 120ms;
}
.hac-q-short {
  transition: grid-template-rows 250ms var(--hac-ease-out) 120ms, opacity 180ms var(--hac-ease-out) 120ms;
}
.hac-stack:not([data-typed]) .hac-q-long { grid-template-rows: 1fr; opacity: 1; }
.hac-stack:not([data-typed]) .hac-q-short { grid-template-rows: 0fr; opacity: 0; }
.hac-q-clip {
  min-height: 0;
  overflow: hidden;
}
.hac-q-box { display: grid; }
.hac-q-full,
.hac-q-typed { grid-area: 1 / 1; }
.hac-q-full { visibility: hidden; }
.hac-q-line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Phone-width frames: a little less inset and padding so lines wrap less. */
@media (max-width: 480px) {
  .hac-stack { left: 10px; right: 10px; bottom: 10px; gap: 8px; }
  .hac { padding: 12px; }
  .hac-head { gap: 6px; }
  .hac-logo { width: 24px; height: 24px; }
  .hac-toast { padding: 2px 6px; }
  .hac-steps { margin-top: 12px; }
  .hac-step-row { column-gap: 8px; padding-bottom: 7px; }
  .hac-act { font-size: var(--fs-mini); }
  .hac-why { font-size: var(--fs-nano); }
  .hac-foot { padding-top: 8px; }
  .hac-search { padding: 10px 12px; gap: 6px; }
  .hac-q { font-size: var(--fs-label); }
}

/* Loop reset: the whole overlay fades out over 250ms, is reset while
   invisible (.is-rewinding switches transitions off for one frame, so nothing
   visibly collapses or snaps back), and fades back in for the typing. */
.hac-stack.is-resetting { opacity: 0; }
.hac-stack.is-rewinding *,
.hac-stack.is-rewinding *::before,
.hac-stack.is-rewinding *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; }

/* Reduced motion: the finished run, still. The script never adds .is-live,
   so the query, all five checked steps and the result show as shipped.
   Nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .hac-stack,
  .hac-stack *,
  .hac-stack *::before,
  .hac-stack *::after { animation: none !important; transition: none !important; }
  .hac-step::after { opacity: 1; }
  .hac-check { opacity: 1; transform: none; }
  .hac-check path { stroke-dashoffset: 0; }
  .hac-act { opacity: 1; }
  .hac-why { opacity: 0; }
  .hac-tile-check { opacity: 1; transform: none; }
  .hac-result { opacity: 1; transform: none; translate: 0 0; pointer-events: auto; }
}
@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);
}

/* ═══════════════════════════════════════════════════════
   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: var(--hadef-muted);
  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: var(--ink); }
.pricing-toggle-seg.is-active {
  background: var(--accent-dark);
  color: #fff;
}
.pricing-toggle-save {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
  /* An outline, not a white tint: white on a 22% white tint over the
     accent measured 2.61:1. On the dark accent itself it is 5.18:1. */
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
}
.pricing-toggle-seg:not(.is-active) .pricing-toggle-save {
  background: #fff;
  box-shadow: none;
  color: var(--accent-dark);
}

/* v44: every in-page anchor landed with its heading under the sticky header.
   .nav is position: sticky at 80px tall at every breakpoint, and no anchor
   target carried a scroll offset, so #ways, #pricing and #faq all scrolled the
   section top to y=0 and put it behind the bar. This was invisible while
   "What you get" pointed at #hero, because the top of the page has nothing to
   obscure. Repointing it at a real section made it visible on all four.

   scroll-padding-top on the scroll container fixes all anchors at once and has
   no rendering effect: it changes only where a scroll comes to rest. 88px is
   the 80px bar plus 8px of air. */
html {
  scroll-padding-top: 88px;
}

/* v44: why-grid reduced to three problem tiles */
.why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr !important; } }

/* ════════════════════════════════════════════════════════════════
   INSIDE HADEF (replaces the Brain mockup card, 2026-10-04)
   More of what you get, continuing "It's not you, it's your pitch."
   directly above: no intro, the same ground (--ink, #1C1917), the same
   1080px width as the what-you-get card and the same type, because each
   block header is that section's own .myth-tagline / .myth-tagline-h /
   .myth-tagline-body. No rule here sets a font. One guest, Martin
   Denman, runs through three surfaces. Each block's stage holds two fragments of
   the surface's own design (scripts/render_home_feature_panels.py): a
   base layer and a raised card at a gentle tilt, fading into the ground
   where the UI continues. Phones: one focal fragment, smaller tilt.
   Motion: one ease into the resting tilt on first view; reduced motion
   rests still.
   ════════════════════════════════════════════════════════════════ */
.inside {
  --in-shadow: rgba(46, 24, 10, 0.6);
  --in-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --in-rest: rotateX(4deg) rotateY(-5deg) rotateZ(0.5deg);
  --in-flat: translateY(16px) rotateX(1deg) rotateY(-1.5deg);
  background: var(--ink);
  padding: 0 0 56px;
  overflow-x: clip;
}
/* Continue the section above without a double gap: its card already
   carries a 72px bottom margin, so its own bottom padding steps aside and
   the first block lands at the same rhythm as the rest.
   flow-root keeps that margin INSIDE the dark section. With no bottom
   padding or border it otherwise collapsed out between the two dark
   sections, and on phones the light page showed through as a 72px band
   with the card's shadow smeared across it, the heading below flush on
   its edge (live, iPhone, 2026-10-05; introduced by #1222). */
.myth-bust:has(+ .inside) { padding-bottom: 0; display: flow-root; }
@media (min-width: 960px) {
  .myth-bust:has(+ .inside) { padding-bottom: 48px; }
}
/* Same width as the what-you-get card; same rhythm as its section. */
.inside-block {
  max-width: 1080px;
  margin: 0 auto;
}
.inside-block + .inside-block { margin-top: 64px; }
.inside-stage { perspective: 2000px; max-width: 400px; }
.inside-tilt {
  position: relative;
  transform: var(--in-rest);
  transform-origin: 50% 40%;
}
/* One frame per layer, the same in every block: the render cuts each
   fragment to exactly this box (base 760x392, float 440x352, phone 400x500)
   with 24px of canvas around the component, so no crop ever cuts through
   text. The canvas is the ink token, the same ground as this section, so
   frame, image and page meet with no seam (Tan, 2026-10-04: the images'
   near-black #0C0A09 read as a black box on the brown page). Tan may move
   it to --hadef-ink-soft: change this one reference and the render
   script's SURFACE together. */
.inside-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 230, 210, 0.08);
  background: var(--ink);
  box-shadow: 0 30px 80px -24px var(--in-shadow);
}
.inside-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(244, 242, 237, 0.08);
  pointer-events: none;
}
/* Phones show the 400x500 phone crop through a square window, centred.
   Every crop keeps its component in the middle 70% with 60-75px of empty
   canvas above and below, so at 4:5 the frame entered the viewport as an
   empty dark box with only the panel's first line at its foot (live,
   iPhone, 2026-10-05). Square trims that to the same 24px the sides keep;
   nothing in any of the three crops is cut. */
.inside-frame--base { aspect-ratio: 1 / 1; }
.inside-frame--float { display: none; aspect-ratio: 440 / 352; }
.inside-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* One ease into place, the first time the block is seen and its images
   have decoded. */
.inside.is-armed .inside-tilt {
  opacity: 0;
  transform: var(--in-flat);
  transition: transform 300ms var(--in-ease), opacity 300ms var(--in-ease);
}
.inside.is-armed .inside-block.is-in .inside-tilt {
  opacity: 1;
  transform: var(--in-rest);
}
/* Never show a half-painted frame. Safari paints a downloading image top
   down, and the frame's dark canvas showed through as an empty box with
   only the top line of the panel at its foot (live, iPhone). Until a
   block's images have decoded its stage is held back, with no motion, so
   it holds for reduced motion too; the script reveals it on decode or
   after a short fallback, and without the script nothing is held. */
.inside.is-pending .inside-block:not(.is-ready) .inside-tilt { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .inside.is-armed .inside-tilt { opacity: 1; transform: var(--in-rest); transition: none; }
}

/* Desktop: one composition, mirrored by side. In a 1080 x 607 stage the
   base is 760 x 392 at the top of its side, its component edge to edge;
   the float is 440 wide with 30% of its width (132px) over the base and
   its top 35% up the base's height (255px down), 12px in from the far
   edge. Each render keeps that corner of the base low-value (the empty
   end of the topic list, an empty column floor, the short closing lines
   of the message), so the float never covers the idea underneath.
   The blocks alternate strictly (left, right, left), and only the base
   fades, over its bottom fifth, the same on every block. */
@media (min-width: 960px) {
  .inside {
    --in-rest: rotateX(7deg) rotateY(-9deg) rotateZ(1deg);
    --in-flat: translateY(16px) rotateX(2deg) rotateY(-3deg);
    padding-bottom: 100px;
  }
  .inside-block + .inside-block { margin-top: 120px; }
  .inside-block[data-side="left"] {
    --in-rest: rotateX(7deg) rotateY(9deg) rotateZ(-1deg);
    --in-flat: translateY(16px) rotateX(2deg) rotateY(3deg);
  }
  .inside-stage { max-width: none; }
  .inside-tilt { aspect-ratio: 1080 / 607; }
  .inside-frame--base {
    position: absolute;
    top: 0;
    right: 0;
    width: 70.3704%;
    aspect-ratio: 760 / 392;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
  }
  .inside-frame--float {
    display: block;
    position: absolute;
    top: 42.0099%;
    left: 1.1111%;
    width: 40.7407%;
    box-shadow: 0 40px 100px -20px var(--in-shadow);
  }
  .inside-block[data-side="left"] .inside-frame--base { right: auto; left: 0; }
  .inside-block[data-side="left"] .inside-frame--float { left: auto; right: 1.1111%; }
}

/* ═════════════════════════════════════════════════════
   P2 polish (2026-10-04): keyboard focus and touch targets
═════════════════════════════════════════════════════ */

/* One focus ring for every control that has none of its own. --accent-dark
   is 4.6:1 on the cream and 5.2:1 on white. On the ink sections it is 3.4:1,
   too close to the 3:1 floor, so those take the cream instead (15.6:1). The
   final CTA's ink panel is left on the default (3.4:1) for the PR that owns it. */
:focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}
.inside :focus-visible,
.site-footer :focus-visible,
#cookieBanner :focus-visible {
  outline-color: var(--on-dark);
}

/* The pause button's stage is zoomed down (0.9 on phones, less in the card
   grid), which would thin a 2px ring below 2px as drawn. */
.m3-pause:focus-visible { outline-width: 3px; outline-offset: 3px; }

/* Touch targets, phones only: a 44px tap area without a visibly larger
   control. Where the control's box cannot grow, a transparent pseudo-element
   carries the area. Above 560px nothing here applies, so the desktop nav,
   toggle and footer are exactly as they were. */
@media (max-width: 560px) {
  .nav-link-muted {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-cta-row .btn,
  .pricing-toggle-seg,
  .footer-social { position: relative; }
  .nav-cta-row .btn::after,
  .pricing-toggle-seg::after,
  .footer-social::after,
  .m3-pause::after {
    content: "";
    position: absolute;
  }
  .nav-cta-row .btn::after { inset: -7px 0; }
  .pricing-toggle-seg::after { inset: -5px 0; }
  .footer-social::after { inset: -9px; }
  /* The pause button sits in the bottom-left corner of a stage that clips,
     so its area grows up and to the right, where there is room: 46px as
     drawn, over the stage's empty corner and no other control. */
  .m3-pause::after { inset: -23px -23px -1px -1px; }
}

/* Footer links are a stacked list: on a touch screen each row is the target. */
@media (max-width: 560px), (pointer: coarse) {
  .footer-col { gap: 0; }
  .footer-col-head { margin-bottom: 4px; }
  .footer-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-meta { padding-top: 0; padding-bottom: 0; }
  .footer-meta-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 8px;
  }
}

/* The cookie bar's link, in the stylesheet rather than an inline style. */
.cookie-consent-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════════
   HEADLESS BAND (2026-10-05)
   Sits between How it works and Pricing. Built from the page's own
   parts: the section heading, the sub's size and line height, the
   hairline border and the Start free arrow. One tint step down from
   the page ground (--cream-alt) so it reads as a band, with no card
   and no imagery. Every colour is an existing token; text on
   --cream-alt measures --ink 14.7:1, --ink-soft 12.7:1, --muted
   5.1:1 (the dark accent is 4.35:1 there, so it is not used for text).
   No entrance animation: the only motion is the link's arrow on
   hover and a press scale, both off under reduced motion.
   ════════════════════════════════════════════════════════════════ */
.headless {
  padding: clamp(64px, 8vh, 104px) 0;
  background: var(--cream-alt);
  border-top: 1px solid var(--border);
}
.headless-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "lede steps"
    "link steps";
  column-gap: clamp(40px, 6vw, 96px);
}
.headless-lede { grid-area: lede; }
.headless .headless-title {
  margin-top: 0;
  text-wrap: balance;
}
.headless-sub {
  margin-top: var(--sp-3);
  max-width: 46ch;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--muted);
}
.headless-steps {
  grid-area: steps;
  align-self: center;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: headless-step;
}
.headless-step {
  counter-increment: headless-step;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: var(--sp-3);
  padding: 22px 0;
  border-top: 1px solid var(--border);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.headless-step:last-child { border-bottom: 1px solid var(--border); }
.headless-step::before {
  content: counter(headless-step);
  content: counter(headless-step) / "";
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.headless-link {
  grid-area: link;
  justify-self: start;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  border-radius: var(--sp-1);
  transition: transform var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) ease;
}
.headless-link-arrow {
  flex: 0 0 auto;
  transition: transform var(--dur-fast) var(--ease-out);
}
.headless-link:active { transform: scale(0.98); }
.headless-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  text-decoration-color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .headless-link:hover { text-decoration-color: var(--ink); }
  .headless-link:hover .headless-link-arrow { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .headless-link,
  .headless-link-arrow { transition: none; }
  .headless-link:active,
  .headless-link:hover .headless-link-arrow { transform: none; }
}
@media (max-width: 900px) {
  .headless-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "lede"
      "steps"
      "link";
    row-gap: var(--sp-5);
  }
  .headless-sub { max-width: 60ch; }
  .headless-steps { align-self: start; }
  .headless-link { margin-top: calc(-1 * var(--sp-3)); }
}
@media (max-width: 720px) {
  .headless { padding: var(--sp-7) 0; }
  .headless-sub,
  .headless-step { font-size: var(--fs-body); line-height: 1.6; }
  .headless-step { padding: 18px 0; }
}

/* ════════════════════════════════════════════════════════════════
   HOW IT WORKS: THE GOLDEN THREAD (2026-10-04)
   Replaces "Context. Pitch. Send." (moved as-is to /how-hadef-works).
   Built from the under-hero card system (why-tile / why-mini /
   why-title / why-body) in a wide 2x2 grid: three step cards and a
   fourth that hands over to pricing. Each step card carries its
   original stage animation, scaled into the light visual panel; the
   card is an .m3-feature so the stage keeps its own timeline. No rule
   here sets the cards' type: the card system and section opener do.
   ════════════════════════════════════════════════════════════════ */
.why-grid.hiw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .why-grid.hiw-grid { grid-template-columns: 1fr !important; } }
/* .m3-feature's own section layout does not apply inside a card. */
.hiw-grid > .why-tile.m3-feature {
  display: flex;
  max-width: none;
  margin: 0;
  gap: 0;
}
/* The stage sits in the card's light panel: its own frame steps aside and
   it is scaled down so both of its cards fit. */
.hiw-mini { justify-content: center; }
.hiw-scale { zoom: 0.78; }
.hiw .m3-stage {
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* The cards slide in and out sideways (m3-pitch-hook, m3-send-dm and
     their -v2 loops); the gutters keep them, and the hook card's "Fit
     checked" badge, inside the panel that clips them at every width. */
  padding: 0 24px;
}
.hiw .m3-stage::before { display: none; }
.hiw .m3-pause { left: 0; bottom: 0; }
@media (max-width: 760px) {
  .hiw .m3-stage { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hiw-mini { height: auto !important; min-height: 220px; }
  .hiw-scale { zoom: 0.9; }
  .hiw .m3-stage { padding: 0 24px 44px; }
}
/* The fourth card: the next step, then pricing directly below. */
.hiw-mini--cta {
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
/* The hero's mobile rule (max-width: 560px) gives .btn-start-free flex: 1 1 42%
   so two hero buttons share a row. This panel is a column, so 42% became the
   button's HEIGHT (98-174px tall at 375). The CTA keeps its own size here. */
.hiw-mini--cta .btn-start-free { flex: 0 0 auto; }
.hiw-cta-line { margin: 0; color: var(--muted); }
/* In the narrower card panel, the hook card's label wraps clear of its
   top-right "Fit checked" badge instead of running under it. */
.hiw .m3-card--hook .m3-card-label { padding-right: 96px; }

/* Card 4 on air (2026-10-04, Tan): the ON AIR neon fills the fourth card.
   The photo sits in an absolutely placed box (inset 0), so the card's size
   is the grid's and never the image's; its radius and border are the card
   system's. The sign takes the top of the card; the copy and "Start free"
   sit at the bottom on an --ink gradient. The panel keeps the button in the
   DOM where it was and is drawn after the copy (order), so the card reads
   heading, line, button. Stacked, the card is given a photo-sized height.
   Colours are tokens only: --ink / --surface-dark for the gradient and the
   ground, --on-dark / --on-dark-soft for the copy and the button fill,
   --accent for the glow. */
.hiw-grid > .why-tile.hiw-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-dark);
  border-color: var(--border-on-dark);
}
.hiw-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.hiw-cta-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}
/* The ink: clear over the sign, solid behind the copy, a touch heavier on
   the left where the copy starts. */
.hiw-cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ink) 0%, transparent) 34%,
      color-mix(in srgb, var(--ink) 72%, transparent) 56%,
      color-mix(in srgb, var(--ink) 92%, transparent) 68%,
      var(--ink) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 40%, transparent) 0%, color-mix(in srgb, var(--ink) 0%, transparent) 70%);
}
.hiw-cta > .why-title,
.hiw-cta > .why-body,
.hiw-cta > .hiw-mini--cta { position: relative; z-index: 1; }
.hiw-cta > .why-title { margin-top: auto; color: var(--on-dark); }
.hiw-cta > .why-body { color: var(--on-dark-soft); }
.hiw-grid > .why-tile.hiw-cta > .hiw-mini--cta {
  order: 3;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 20px 0 0 !important;
  border: 0;
  border-radius: 0 !important;
  background: none;
  overflow: visible;
  align-items: flex-start;
}
.hiw-cta .btn-start-free {
  position: relative;
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--ink);
  transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hiw-cta .btn-start-free-arrow { transition: transform 150ms cubic-bezier(0.23, 1, 0.32, 1); }
/* The base sheet's hover blackens the fill and lifts on every device; here
   the fill holds and the lift waits for a fine pointer. */
.hiw-cta .btn-start-free:hover { background: var(--on-dark); transform: none; }
.hiw-cta .btn-start-free:hover .btn-start-free-arrow { transform: none; }

/* Go on air: a warm --accent glow layer over the sign fades in (the photo is
   untouched) and the button lifts 1px, its arrow nudging 3px. Opacity and
   transform only: 200ms in, 150ms out. The glow follows the card under a
   fine pointer; the lift follows the button, because only the button acts.
   :focus-visible gives the same at once (keyboard actions are not animated).
   Reduced motion keeps the glow and drops the movement. */
.hiw-cta-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 60% 46% at 60% 30%,
    color-mix(in srgb, var(--accent) 85%, transparent) 0%,
    color-mix(in srgb, var(--accent) 32%, transparent) 50%,
    color-mix(in srgb, var(--accent) 0%, transparent) 76%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hiw-cta-bg::after { z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .hiw-cta:hover .hiw-cta-bg::before { opacity: 1; transition-duration: 200ms; }
  .hiw-cta .btn-start-free:hover { transform: translateY(-1px); transition-duration: 200ms; }
  .hiw-cta .btn-start-free:hover .btn-start-free-arrow { transform: translateX(3px); transition-duration: 200ms; }
}
.hiw-cta .btn-start-free:focus-visible {
  outline: 2px solid var(--on-dark);
  outline-offset: 3px;
  transform: translateY(-1px);
  transition-duration: 0ms;
}
.hiw-cta .btn-start-free:focus-visible .btn-start-free-arrow { transform: translateX(3px); transition-duration: 0ms; }
.hiw-cta:has(.btn-start-free:focus-visible) .hiw-cta-bg::before { opacity: 1; transition-duration: 0ms; }
/* A press answers at once, on every device. */
.hiw-cta .btn-start-free:active { transform: scale(0.97); transition-duration: 100ms; }
@media (prefers-reduced-motion: reduce) {
  .hiw-grid > .why-tile.hiw-cta:hover,
  .hiw-cta .btn-start-free:hover,
  .hiw-cta .btn-start-free:focus-visible,
  .hiw-cta .btn-start-free:active,
  .hiw-cta .btn-start-free:hover .btn-start-free-arrow,
  .hiw-cta .btn-start-free:focus-visible .btn-start-free-arrow { transform: none; }
}
@media (max-width: 900px) {
  .hiw-grid > .why-tile.hiw-cta { min-height: min(113vw, 540px); }
}
@media (max-width: 600px) {
  .hiw-cta-bg-img { object-position: 50% 0%; }
  .hiw-cta-bg::before {
    background: radial-gradient(ellipse 70% 40% at 55% 26%,
      color-mix(in srgb, var(--accent) 85%, transparent) 0%,
      color-mix(in srgb, var(--accent) 32%, transparent) 50%,
      color-mix(in srgb, var(--accent) 0%, transparent) 76%);
  }
}