/* Headroom Consulting - v2 (spec-driven)
   Dark + technical · copper accent */

/* Defensive: paint the canvas (anything outside the body box) the brand
   dark so iOS rubber-band / URL-bar transitions never show white. */
html { background: #1C1719; }

/* Safe-area cover. env() approaches were unreliable on iOS Safari, so
   use a fixed 60px dark strip on mobile that's tall enough to cover any
   iPhone notch. Nav's padding-top is set to match so the logo lands
   below the cover. On non-mobile (>780px) this collapses to height:0. */
.safe-area-cover {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: #1C1719;
  z-index: 9999;
  pointer-events: none;
}
@media (max-width: 780px) {
  .safe-area-cover { height: 12px; }
}

/* Tokens (spec-exact hex) */
:root {
  /* Obsidian Plum */
  --plum-900: #1C1719;
  --plum-800: #2C2427;
  --plum-700: #3D3236;
  --plum-600: #544548;
  --plum-400: #876E73;
  --plum-200: #C4B5BA;
  --plum-50:  #F5F0F2;

  /* Brand accent — Copper. Variable names stay --cyan-* for compatibility
     with existing rules; the values are the copper ramp. The legacy ice-cyan
     palette has been retired across the site. */
  --cyan-900: #5C3F1F;
  --cyan-700: #A07640;
  --cyan-500: #D4A574;
  --cyan-200: #EED9BF;
  --cyan-100: #F8EFE0;
  /* RGB channels of --cyan-500 for use inside rgba() */
  --accent-rgb: 212, 165, 116;
  /* RGB channels of --cyan-700 (deeper accent — used in radial glows) */
  --accent-deep-rgb: 160, 118, 64;
  /* RGB channels of --cyan-900 (darkest accent — used in pill bg / pulses) */
  --accent-darkest-rgb: 92, 63, 31;
  /* Light-surface accent variants (used in light-rhythm sections) */
  --light-accent: #A07640;
  --light-accent-deep: #5C3F1F;
  --light-accent-rgb: 160, 118, 64;
}

/* Accent palette overrides (driven by Tweaks → Accent color).
   Each ramp keeps the same five-stop structure as the default cyan,
   so every existing rule that references --cyan-* keeps working. */
body[data-accent="teal"] {
  --cyan-900: #1F4548;
  --cyan-700: #3A8086;
  --cyan-500: #5BBFC6;
  --cyan-200: #C2E6E9;
  --cyan-100: #E4F5F6;
  --accent-rgb: 91, 191, 198;
  --accent-deep-rgb: 58, 128, 134;
  --accent-darkest-rgb: 31, 69, 72;
  --light-accent: #3A8086;
  --light-accent-deep: #1F4548;
  --light-accent-rgb: 58, 128, 134;
}
body[data-accent="gold"] {
  --cyan-900: #5A4A0F;
  --cyan-700: #A8861F;
  --cyan-500: #E8C547;
  --cyan-200: #F6E6A3;
  --cyan-100: #FBF4D6;
  --accent-rgb: 232, 197, 71;
  --accent-deep-rgb: 168, 134, 31;
  --accent-darkest-rgb: 90, 74, 15;
  --light-accent: #A8861F;
  --light-accent-deep: #5A4A0F;
  --light-accent-rgb: 168, 134, 31;
}
body[data-accent="coral"] {
  --cyan-900: #5C2E1E;
  --cyan-700: #A85636;
  --cyan-500: #E08B6D;
  --cyan-200: #F4CDBE;
  --cyan-100: #FBE9E0;
  --accent-rgb: 224, 139, 109;
  --accent-deep-rgb: 168, 86, 54;
  --accent-darkest-rgb: 92, 46, 30;
  --light-accent: #A85636;
  --light-accent-deep: #5C2E1E;
  --light-accent-rgb: 168, 86, 54;
}
body[data-accent="copper"] {
  --cyan-900: #5C3F1F;
  --cyan-700: #A07640;
  --cyan-500: #D4A574;
  --cyan-200: #EED9BF;
  --cyan-100: #F8EFE0;
  --accent-rgb: 212, 165, 116;
  --accent-deep-rgb: 160, 118, 64;
  --accent-darkest-rgb: 92, 63, 31;
  --light-accent: #A07640;
  --light-accent-deep: #5C3F1F;
  --light-accent-rgb: 160, 118, 64;
}

:root {
  --success: #6EF098;
  --warning: #F0C96E;
  --error:   #F0697B;
  --white:   #FFFFFF;

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.1,1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  --content: 1200px;
  --content-wide: 1360px;

  --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--plum-900);
  color: var(--plum-200);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Grain texture overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAuNSAwIDAgMCAwIDAuNSAwIDAgMCAwIDAuNSAwIDAgMCAwLjYgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJyBmaWx0ZXI9J3VybCglMjNuKScgb3BhY2l0eT0nMC41Jy8+PC9zdmc+");
  opacity: .035;
  pointer-events: none;
  z-index: 100;
  mix-blend-mode: overlay;
}

/* ------------------------------------------------------------
   Type
   ------------------------------------------------------------ */
.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan-500);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}
.eyebrow.no-rule::before { display: none; }

h1, h2, h3, h4 { margin: 0; color: var(--plum-50); font-family: var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.2vw, 60px);
  line-height: 1.04;
  color: var(--plum-50);
}
.h-section {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.08;
  color: var(--plum-50);
}
.h-sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--plum-400);
  max-width: 620px;
  text-wrap: pretty;
  margin: 0;
}

/* ------------------------------------------------------------
   Layout
   ------------------------------------------------------------ */
.wrap { max-width: var(--content); margin: 0 auto; padding: 0 40px; }
.wrap-wide { max-width: var(--content-wide); margin: 0 auto; padding: 0 40px; }
.section { padding: 120px 0; position: relative; }
.section-head { max-width: 780px; margin: 0 0 72px; display: flex; flex-direction: column; gap: 20px; }
.section-divider {
  height: 1px;
  max-width: var(--content);
  margin: 0 auto;
  background: var(--plum-700);
  opacity: .5;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 14px 26px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
  line-height: 1;
  white-space: nowrap;
}
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-lg { padding: 16px 30px; font-size: 15px; }
.btn:active { transform: scale(.98); }
.btn-arrow { transition: transform .18s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn-primary {
  background: var(--cyan-500);
  color: var(--plum-900);
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0);
}
.btn-primary:hover {
  background: var(--cyan-200);
  box-shadow: 0 10px 32px -8px rgba(var(--accent-rgb),.38), 0 0 0 4px rgba(var(--accent-rgb),.08);
}

.btn-secondary {
  background: transparent;
  border-color: var(--cyan-500);
  color: var(--cyan-500);
}
.btn-secondary:hover {
  background: rgba(var(--accent-rgb),.10);
  border-color: var(--cyan-200);
  color: var(--cyan-200);
}

.btn-ghost {
  background: transparent;
  border-color: var(--plum-600);
  color: var(--plum-200);
}
.btn-ghost:hover {
  border-color: var(--plum-400);
  color: var(--plum-50);
}

/* ------------------------------------------------------------
   Nav
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 12px 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 112px;
}
.nav.scrolled {
  background: rgba(28,23,25,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--plum-700);
}
.nav-brand img {
  height: 88px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  gap: 28px;
  flex: 1;
  margin-left: 16px;
}
.nav-links a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--plum-200);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -2px;
  height: 1.5px;
  background: var(--cyan-500);
  transition: right var(--dur-base) var(--ease-out);
}
.nav-links a:hover { color: var(--cyan-500); }
.nav-links a:hover::after { right: 0; }
.nav-ctas { display: flex; gap: 10px; align-items: center; }
.nav-mobile-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: var(--plum-50);
  cursor: pointer;
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
  position: relative;
  padding: 170px 0 100px;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 75% 35%, rgba(var(--accent-rgb),.07), transparent 65%),
    radial-gradient(ellipse 50% 40% at 15% 85%, rgba(var(--accent-deep-rgb),.08), transparent 70%);
}
.hero-inner { position: relative; max-width: var(--content-wide); margin: 0 auto; padding: 0 40px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan-500);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-500);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.18);
  animation: heroEyebrowPulse 1.8s ease-in-out infinite !important;
  animation-play-state: running !important;
  will-change: transform, box-shadow;
}
body[data-hero-dot-pulse="off"] .hero-eyebrow .dot {
  animation: none !important;
  transform: none;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.18);
}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow .dot {
    animation: heroEyebrowPulse 1.8s ease-in-out infinite !important;
  }
  body[data-hero-dot-pulse="off"] .hero-eyebrow .dot {
    animation: none !important;
  }
}
@keyframes heroEyebrowPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.22);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(var(--accent-rgb),.04);
    transform: scale(1.35);
  }
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 5.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--plum-50);
  margin: 0 0 24px;
}
.hero-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.28;
  letter-spacing: -.015em;
  color: var(--plum-200);
  margin: 0 0 24px;
  max-width: 620px;
}
.hero-headline .accent { color: var(--cyan-500); font-weight: 600; }
.hero-sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--plum-400);
  max-width: 560px;
  margin: 0 0 40px;
}
.hero-cta-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
  width: max-content;
  max-width: 100%;
}
.hero-cta-group { display: flex; flex-direction: column; gap: 8px; max-width: 440px; }
.hero-cta-group .btn { justify-content: center; }
.hero-cta-hint {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--plum-400);
  margin: 0;
  padding-left: 2px;
  line-height: 1.5;
}

/* "Or you don't pay." — smaller than the headline, white, underlined in the
   accent. The headline line above it carries .accent so it reads copper. */
.hero-title-kicker {
  display: inline-block;
  font-size: .56em;
  line-height: 1.2;
  color: var(--plum-50);
  border-bottom: 3px solid var(--cyan-500);
  padding-bottom: 3px;
  margin-top: 14px;
}

/* The rotating phrase is the only accented part of the sub-line. A fixed
   min-height is set per breakpoint below so swapping phrases of different
   lengths cannot reflow the CTAs underneath. */
.hero-rotate { transition: opacity .22s ease; }

/* Screen-reader-only text utility. */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sub-line sizing lives here rather than in an inline style so each
   breakpoint can own it. */
.hero-copy-v2 .hero-headline {
  font-size: 15px;
  line-height: 1.65;
  max-width: 560px;
  /* Reserve the tallest rendering so rotating between phrases of different
     lengths cannot change the line count and shunt the CTAs up and down.
     Expressed in em (= lines x line-height) so it tracks any font-size change.
     Measured: every phrase is 2 lines from 800px up. */
  min-height: 3.3em;
}

/* Both hero buttons share a width on desktop instead of sizing to their
   own label. */
.hero-cta-row { width: 100%; max-width: 620px; }
.hero-cta-group { flex: 1 1 0; min-width: 0; max-width: none; }
.hero-cta-group .btn { width: 100%; }

/* Trust ticks. These replaced three full-width cards (~210px on mobile) with
   a single inline row, which is the biggest fold saving in the hero. */
/* THE THREE TICKS, AND THE 72px OF GUTTER THEY ARE ALLOWED TO USE.
   Measured at 1440: at 14px the three run 645px inside a 619px copy
   column, so "Results in weeks" dropped to a second row, and it did so at
   EVERY desktop width, because .hero-inner caps at 1360px and the column
   stops growing. Shrinking the type fixed it, but Karim wanted the
   original size back (2026-10-08).

   So the row is given 40px MORE than its grid column, and spends it in the
   72px gutter between the copy and the video, which is empty. That is
   659px of line box for 645px of ticks: 14px of slack, and 32px of gutter
   still clear before the video starts.

   flex-wrap stays ON deliberately. Below 1360 the copy column shrinks
   while the gutter does not, so the 40px stops being enough and the row
   wraps, which is the graceful failure. With nowrap it would instead run
   under the video from about 1270px down. */
.hero-ticks {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + 40px);
  /* 12px between ticks against 4px inside one, so each tick reads as a
     pair rather than the three reading as one run of text. */
  gap: 10px 12px;
}
.hero-ticks li {
  display: flex;
  align-items: center;
  /* The tick sits closer to its own words than the ticks sit to each
     other, 4px against 12px, so each pair reads as one unit. */
  gap: 4px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--plum-200);
}
.hero-tick-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--cyan-500);
}

/* Hero video placeholder */
.hero-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--plum-800);
  border: 1px solid var(--plum-700);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,.6),
    0 0 0 1px rgba(var(--accent-rgb),.04),
    inset 0 1px 0 rgba(255,255,255,.03);
}
.hero-video::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 50%, rgba(var(--accent-rgb),.12), transparent 65%),
    linear-gradient(135deg, rgba(var(--accent-deep-rgb),.12), transparent 50%);
}
/* Embedded VSL variant — replaces the placeholder visuals with a real player */
.hero-video--embed {
  aspect-ratio: 16 / 9;
  background: var(--plum-900);
}
.hero-video--embed::before,
.hero-video--embed::after { display: none; }
.hero-video--embed wistia-player {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.hero-video-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 2;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}
.hero-video:hover .hero-video-content { transform: scale(1.02); }
.hero-video-play {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--cyan-500);
  color: var(--plum-900);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 40px rgba(var(--accent-rgb),.3), 0 0 0 0 rgba(var(--accent-rgb),0);
  transition: all var(--dur-base) var(--ease-out);
}
.hero-video:hover .hero-video-play {
  transform: scale(1.06);
  box-shadow: 0 0 60px rgba(var(--accent-rgb),.45), 0 0 0 12px rgba(var(--accent-rgb),.08);
}
.hero-video-play svg { width: 30px; height: 30px; margin-left: 4px; }
.hero-video-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--plum-400);
}

/* Stats strip */
.hero-stats {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hero-stat {
  background: var(--plum-800);
  border: 1px solid var(--plum-700);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.hero-stat:hover,
.hero-stat:active,
.hero-stat.is-pressed {
  border-color: var(--plum-600);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.4);
}
.hero-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.04), transparent 40%);
  pointer-events: none;
}
.hero-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--cyan-500);
  position: relative;
}
.hero-stat-label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--plum-200);
  position: relative;
  margin: 0;
}

/* ------------------------------------------------------------
   CTA band (reusable between sections)
   ------------------------------------------------------------ */
.cta-band {
  padding: 72px 0;
  border-top: 1px solid var(--plum-700);
  border-bottom: 1px solid var(--plum-700);
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--plum-900), var(--plum-900));
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(var(--accent-rgb),.05), transparent 70%);
  pointer-events: none;
}
.cta-band-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  position: relative;
  /* Was flex-wrap: wrap, which dropped the buttons onto their own row as
     soon as text + gap + buttons exceeded the inner width. With a longer
     primary label that happens at every desktop width. The text flexes
     instead, so the line and the buttons stay on one row. The 780 block
     below stacks them deliberately. */
  flex-wrap: nowrap;
}
.cta-band-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -.015em;
  color: var(--plum-50);
  margin: 0;
  max-width: 580px;
  line-height: 1.3;
  /* takes the squeeze so the buttons never wrap away */
  flex: 1 1 auto;
  min-width: 0;
}
.cta-band-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;   /* every button the width of the widest */
  gap: 12px;
  flex: 0 0 auto;
}
.cta-band-actions .btn { width: 100%; justify-content: center; }

/* ------------------------------------------------------------
   About-style CTA band (dark, centered). Defined globally so the
   resource / lead-magnet pages can reuse the exact same block.
   ------------------------------------------------------------ */
.ab-cta {
  padding: 96px 0;
  background: var(--plum-900, #1C1719);
  position: relative;
  overflow: hidden;
}
.ab-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(50% 80% at 50% 50%, rgba(var(--accent-rgb),.10), transparent 70%);
  pointer-events: none;
}
.ab-cta-inner {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}
.ab-cta h2 {
  font-family: var(--font-display, 'Manrope', sans-serif);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--plum-50, #F5F0F2);
  margin: 0 0 18px;
  text-wrap: balance;
}
.ab-cta p {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--plum-200, #C4B5BA);
  margin: 0 auto 32px;
  max-width: 60ch;
}
.ab-cta-actions {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 640px) {
  .ab-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .ab-cta-actions .btn { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------------
   Before / After
   ------------------------------------------------------------ */
/* Section subhead is one sentence; let it run full content width on
   desktop so it doesn't wrap. Mobile still wraps naturally via viewport. */
[data-rhythm-section="before-after"] .h-sub { max-width: none; }

.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* head + 4 list rows: lets the two cards share row tracks via subgrid below
     so corresponding bullets align horizontally even when one wraps to 2 lines */
  grid-template-rows: auto repeat(4, auto);
  /* column gap only — row-gap would bleed into the subgrid and push cards' rows apart */
  column-gap: 20px;
  row-gap: 0;
}
.ba-card {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  background: var(--plum-800);
  border: 1px solid var(--plum-700);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.ba-card--before {
  background: linear-gradient(180deg, rgba(240,105,123,.04), var(--plum-800) 30%);
}
.ba-card--after {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.05), var(--plum-800) 30%);
  border-color: rgba(var(--accent-rgb),.15);
}
.ba-card-head {
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--plum-700);
}
.ba-card-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ba-card--before .ba-card-tag { color: var(--error); }
.ba-card--after .ba-card-tag { color: var(--cyan-500); }
.ba-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -.015em;
  color: var(--plum-50);
  margin: 0;
}
.ba-list {
  display: grid;
  grid-row: 2 / -1;
  grid-template-rows: subgrid;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ba-list li {
  display: flex;
  gap: 14px;
  padding: 18px 32px;
  font-size: 15px;
  line-height: 1.55;
  border-bottom: 1px solid var(--plum-700);
}
.ba-list li:last-child { border-bottom: 0; }
.ba-card--before .ba-list li { color: var(--plum-200); }
.ba-card--after .ba-list li { color: var(--plum-50); }
.ba-list-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.ba-card--before .ba-list-icon { background: rgba(240,105,123,.15); color: var(--error); }
.ba-card--after .ba-list-icon { background: rgba(var(--accent-rgb),.15); color: var(--cyan-500); }
.ba-list-icon svg { width: 12px; height: 12px; }
@keyframes mk3PulseBg {
  0%, 100% { background-color: rgba(var(--accent-darkest-rgb),.25); }
  50% { background-color: rgba(var(--accent-darkest-rgb),.42); }
}
@keyframes mk3CursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------
   Comparison table
   ------------------------------------------------------------ */
.compare-wrap {
  background: var(--plum-800);
  border: 1px solid var(--plum-700);
  border-radius: 16px;
  overflow: hidden;
}
.compare-scroll { overflow-x: auto; }
.compare-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  font-size: 14px;
}
.compare-table thead th {
  text-align: left;
  padding: 22px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--plum-400);
  letter-spacing: -.005em;
  background: var(--plum-900);
  border-bottom: 1px solid var(--plum-700);
  vertical-align: top;
  line-height: 1.35;
}
.compare-table thead th .sub {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--plum-600);
  margin-top: 4px;
  letter-spacing: 0;
}
.compare-table thead th.col-us {
  color: var(--plum-50);
  background: var(--plum-800);
  position: relative;
}
.compare-table thead th.col-us::before {
  content: "";
  position: absolute;
  left: 16px; right: 16px; top: 0;
  height: 2px;
  background: var(--cyan-500);
  box-shadow: 0 0 12px rgba(var(--accent-rgb),.4);
}
.compare-table thead th.col-us .sub { color: var(--cyan-500); }

.compare-table th.feature-col,
.compare-table td.feature-cell {
  min-width: 200px;
  padding-right: 12px;
}
.compare-table td {
  padding: 18px 20px;
  vertical-align: top;
  border-bottom: 1px solid var(--plum-700);
}
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table td.feature-cell {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--plum-50);
  font-size: 14.5px;
  background: var(--plum-900);
}
.compare-table td.col-us {
  background: var(--plum-700);
  color: var(--plum-50);
}

.cmp-cell { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; }
.cmp-icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.cmp-icon svg { width: 11px; height: 11px; stroke-width: 2.5; }
.cmp-check { background: rgba(110,240,152,.14); color: var(--success); }
.cmp-warn { background: rgba(240,201,110,.14); color: var(--warning); }
.cmp-x { background: rgba(240,105,123,.14); color: var(--error); }
.cmp-text {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
}
.cmp-text.good { color: var(--plum-50); }
.cmp-text.mid { color: var(--warning); opacity: .85; }
.cmp-text.bad { color: var(--error); opacity: .85; }

@media (min-width: 1100px) {
  .compare-scroll { overflow-x: visible; }
  .compare-table { min-width: 0; }
}

/* ------------------------------------------------------------
   Case study (Black Star Digital Group)
   ------------------------------------------------------------ */
.case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.case-card {
  background: var(--plum-800);
  border: 1px solid var(--plum-700);
  border-radius: 16px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  transition: all var(--dur-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.case-card:hover,
.case-card:active,
.case-card.is-pressed {
  border-color: var(--plum-600);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -20px rgba(0,0,0,.5);
}
.case-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle at top right, rgba(var(--accent-rgb),.06), transparent 70%);
  pointer-events: none;
}
.case-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb),.1);
  color: var(--cyan-500);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(var(--accent-rgb),.15);
}
.case-icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.case-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--plum-50);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.case-stat .before {
  color: var(--plum-400);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(135,110,115,.5);
  font-weight: 500;
}
.case-stat .arrow {
  color: var(--cyan-500);
  font-size: .9em;
  opacity: .6;
}
.case-stat .after {
  color: var(--cyan-500);
}
.case-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--plum-200);
  margin: 0;
}
.case-area-tag {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--plum-400);
}

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */
.faq-wrap {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--plum-700);
  transition: background var(--dur-fast);
}
.faq-item.open { background: rgba(var(--accent-rgb),.02); }
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 24px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--plum-50);
  letter-spacing: -.01em;
  transition: color var(--dur-fast);
  line-height: 1.35;
}
.faq-q:hover { color: var(--cyan-500); }
.faq-plus {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border: 1px solid var(--plum-600);
  border-radius: 8px;
  position: relative;
  transition: all var(--dur-base) var(--ease-out);
  color: var(--cyan-500);
}
.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
  border-radius: 1px;
}
.faq-plus::before { width: 12px; height: 1.5px; }
.faq-plus::after { width: 1.5px; height: 12px; transition: transform var(--dur-base) var(--ease-out); }
.faq-item.open .faq-plus { background: var(--cyan-500); color: var(--plum-900); border-color: var(--cyan-500); }
.faq-item.open .faq-plus::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out);
}
.faq-item.open .faq-a { max-height: 800px; }
/* No rule down the left. The answer simply shares the question's text
   edge: .faq-q is `padding: 24px 8px`, so 8px here lines the two up. */
.faq-a-inner {
  padding: 0 8px 28px;
}
.faq-a-inner p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--plum-200);
  margin: 0;
}

/* ------------------------------------------------------------
   Final CTA
   ------------------------------------------------------------ */
.final-cta {
  position: relative;
  padding: 140px 0;
  overflow: hidden;
  text-align: center;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 70% at 50% 50%, rgba(var(--accent-rgb),.10), transparent 65%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(var(--accent-deep-rgb),.08), transparent 60%);
  pointer-events: none;
}
.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(var(--accent-rgb),.08) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 30%, transparent 70%);
  pointer-events: none;
  opacity: .6;
}
.final-cta-inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.final-cta .eyebrow { margin-bottom: 0; }
.final-cta h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -.028em;
  color: var(--plum-50);
  margin: 0;
}
.final-cta .sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--plum-200);
  max-width: 580px;
  margin: 0;
}
.final-cta-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-direction: column;
  /* Both buttons take the same width, set by the LONGER label rather than
     by a magic number: width:max-content sizes this box to its widest
     child ("Get your Revenue Leak Assessment"), and stretch then pulls the
     shorter one out to match. Re-word either button and they stay equal.
     .final-cta-inner is align-items:center, so the box stays centred.
     The 780px block below overrides width to 100%, which is what keeps
     the phone behaviour (full-bleed buttons) unchanged. */
  align-items: stretch;
  width: max-content;
  max-width: 100%;
}
.final-cta-actions .btn { justify-content: center; }
.final-cta-hint {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--plum-400);
  margin: 0;
  max-width: 460px;
  line-height: 1.5;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.foot {
  border-top: 1px solid var(--plum-700);
  padding: 64px 0 32px;
}
.foot-inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 56px;
}
.foot-brand img { height: 40px; width: auto; margin-bottom: 20px; }
.foot-brand p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--plum-400);
  margin: 0 0 14px;
  max-width: 320px;
}
.foot-brand .copy {
  font-size: 12px;
  color: var(--plum-600);
  margin: 0;
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.foot-cols h6 {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--plum-50);
  margin: 0 0 18px;
}
.foot-cols a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: var(--plum-400);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.foot-cols a:hover { color: var(--cyan-500); }
.foot-bottom {
  max-width: var(--content);
  margin: 40px auto 0;
  padding: 24px 40px 0;
  border-top: 1px solid var(--plum-700);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--plum-600);
  line-height: 1.55;
  max-width: var(--content);
}
.foot-bottom p { margin: 0 0 10px; }
.foot-bottom p:last-child { margin-bottom: 0; }

/* Footer social icons */
.foot-social { display: flex; gap: 10px; margin-top: 14px; }
.foot-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 8px;
  border: none;
  color: var(--plum-300, #b8b0c9);
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.foot-social-link svg { width: 22px; height: 22px; display: block; }
.foot-social-link:hover {
  color: var(--cyan-500);
  transform: translateY(-1px);
  background: transparent;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  /* The band's line and its buttons share one row only while the line still
     has a usable measure. Measured with the current labels: at 781px the line
     was down to 120px, about five characters, so the row is given up here and
     the buttons sit under the line, still side by side and still equal. */
  .cta-band-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .cta-band-text { max-width: 100%; }

  /* Hero: flatten the 2-col grid into a stack. At tablet widths the video
     stays between the headline copy and the CTA buttons; phones reorder it
     below them (see the 780px block). The CTAs live inside .hero-copy in the
     markup, so display:contents promotes its children to flex items of
     .hero-grid. */
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .hero-copy { display: contents; }
  .hero-copy-v1, .hero-copy-v2, .hero-copy-v3 { order: 1; }
  .hero-video { order: 2; }
  .hero-cta-row { order: 3; }
  /* .hero-ticks is a direct child of .hero-copy, so display:contents promotes
     it to a grid item. Without an explicit order it defaults to 0 and jumps
     above the headline. */
  /* Single column from here down, so the 40px of overhang the base rule
     spends in the gutter would be 40px of page overflow instead. */
  .hero-ticks { order: 4; width: auto; }
  .hero-video-cta { order: 5; }
}
@media (max-width: 780px) {
  .wrap, .wrap-wide, .hero-inner, .cta-band-inner, .foot-inner, .final-cta-inner, .foot-bottom { padding-left: 24px; padding-right: 24px; }

  /* Mobile nav: opaque dark, logo pushed below the 12px safe-area-cover. */
  .nav {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    background: #1C1719 !important;
    border-bottom: 0 !important;
    box-shadow: 0 1px 0 var(--plum-700);
    padding-top: 12px;
  }
  .nav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 200px;
    background: #1C1719;
    pointer-events: none;
  }
  .nav.scrolled { background: #1C1719 !important; }
  .nav-inner { padding: 10px 20px; height: 64px; gap: 16px; }
  .nav-brand img { height: 40px; }
  .nav-links { display: none; }
  /* Hide the inline header CTAs on mobile — they move into the drawer
     so the bar stays clean and there's room for the hamburger. */
  .nav-ctas { display: none; }
  /* Hamburger: absolutely position each bar from the button's center so the
     X morph is fully deterministic (flex layout was making bars collapse
     and confusing the translate math). */
  .nav-mobile-toggle {
    display: inline-flex !important;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 8px;
    position: relative;
  }
  .nav-mobile-toggle .bar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 2px;
    margin: -1px 0 0 -11px;
    background: var(--plum-50);
    border-radius: 1px;
  }
  .nav-mobile-toggle .bar:nth-child(1) { transform: translateY(-6px); }
  .nav-mobile-toggle .bar:nth-child(3) { transform: translateY(6px); }

  /* NOTE: a `.hero { padding: 110px 0 56px }` used to sit here. It was dead:
     it is inside this 780px block and the live `.hero` padding is set lower
     down in the same block, so it never applied. Its values look like they
     were meant for the 1100px block, which sets no hero padding at all, so
     tablets (781-1100) currently take the BASE 170px/100px. That is a real
     pre-existing question, not something to fix by moving this line back. */
  /* Hero headline is forced into the same 3-line break pattern as desktop:
       Line 1: "Free up 350–900"
       Line 2: "hours / month in the"
       Line 3: "next 90 days using AI"
     The existing <br> tags in the HTML already produce these splits — they
     were previously hidden on mobile and the title relied on natural reflow,
     which gave 4 narrower lines. Font is sized so Line 1 (the widest line,
     because of the 6 digits in "350–900") nearly fills the usable width;
     the all-letter lines below sit slightly inset and that's fine. */
  .hero-title[data-headline-v2],
  .hero-title[data-headline-v3] {
    font-size: clamp(30px, 9vw, 50px) !important;
    line-height: 1.06;
    letter-spacing: -0.025em;
  }
  /* <br>s stay visible — they're the line-break source of truth on mobile. */
  .hero-title[data-headline-v2] br,
  .hero-title[data-headline-v3] br { display: inline; }
  /* No longer concatenating spans, so the spacer ::after isn't needed. */
  .hero-title[data-headline-v2] [data-headline-when-pre]::after,
  .hero-title[data-headline-v3] [data-headline-when-pre]::after { content: none; }
  .hero-headline[style*="font-size: 20"] { font-size: 17px !important; line-height: 1.5; }

  /* Capacity-note footnote shrinks to read as a hint, and the flex gap
     above the VSL tightens — the desktop 40px column gap reads as a dead
     band on phones where the hero stacks vertically. Together these pull
     the VSL (and everything below) up by ~40px without affecting desktop. */
  .hero-capacity-note { font-size: 11.5px; line-height: 1.45; margin-top: 10px; }
  .hero-capacity-note--headline { margin-bottom: 8px; }

  /* ---- Phone vertical rhythm (measured at 390px, ~690px of usable fold) ----
     This block was originally an above-the-fold COMPACTION, cut to a ~995px
     budget back when the hero carried an eyebrow and the trust ticks sat
     ABOVE the video. Neither is true now: the eyebrow is gone and the ticks
     close the section under the VSL. Re-measured after those two changes,
     everything down to the bottom of the video landed at 630px against a
     ~690px fold, so ~60px of the budget was simply unspent and the hero read
     as crammed. The values below spend it on air.

     What still has to hold, and what to re-measure if you touch these:
       - both CTA buttons fully above ~690px on a 390px phone
       - the video starts above the fold, so there is something to scroll to
       - vertical padding keeps shrinking as the viewport does: .hero runs
         170/100 at base, 110/56 at 1100, and must stay inside that here
     Numbers, not taste. Measure before tightening any of it again. */
  /* nav is fixed at 76px on mobile; 104 leaves 28px clearance under it */
  .hero { padding: 104px 0 56px; }
  .hero-grid { gap: 24px; }
  .hero-eyebrow { font-size: 11px; letter-spacing: .14em; margin-bottom: 12px; }
  .hero-title[data-headline-v2] { font-size: clamp(26px, 7.6vw, 42px) !important; }
  .hero-title { margin-bottom: 22px; }
  /* the headline is smaller on a phone, so hold the kicker up proportionally
     or it drops below the sub-line in weight */
  .hero-title-kicker { font-size: .64em; margin-top: 12px; }
  .hero-headline { margin-bottom: 0; }
  /* same specificity as the 17px rule above, but later in source, so it wins */
  .hero-copy-v2 .hero-headline {
    font-size: 15.5px;
    line-height: 1.5;
    /* 3 lines. Measured: 360-559px runs 2-3 lines depending on the phrase,
       so reserving 3 keeps the CTAs still. */
    min-height: 4.5em;
  }
  /* the video gives back some width on phones */
  /* Phones only: the CTAs move above the video so they clear the fold on
     small devices. Tablets keep the video-first order.
     The ticks sit BELOW the video here, unlike every wider breakpoint,
     where they close the copy column under the CTAs. On a phone the CTAs
     have to be the first thing under the headline, and putting the ticks
     between them and the video pushed the video down for a row of
     reassurances nobody is looking for yet. Under the video they read as
     the answer to it instead. */
  .hero-cta-row { order: 2; }
  .hero-video { order: 3; width: 100%; }
  .hero-ticks { order: 4; }
  .hero-cta-row { flex-direction: column; width: 100%; max-width: none; gap: 14px; }
  .hero-cta-group { width: 100%; max-width: none; }
  .hero-cta-group .btn { width: 100%; }
  .hero-cta-row .btn-lg { padding: 13px 22px; font-size: 14.5px; }
  /* One tick per line on phones. As a wrapping row, big phones (430px+, e.g.
     iPhone 15 Pro Max) fit two on a line and "Results in weeks" rides up
     beside "As easy as messaging a teammate". */
  /* align-self is load-bearing: .hero-grid inherits align-items:center from its
     desktop rule, so a column flex child shrinks to content width and gets
     centred. As a wrapping row the ticks were wider than the container and hid
     this; stacking them exposed it. */
  .hero-ticks { margin-top: 6px; flex-direction: column; gap: 14px; align-self: flex-start; }
  .hero-ticks li { font-size: 13px; }
  .hero-tick-icon { width: 14px; height: 14px; }

  .hero-stats { grid-template-columns: 1fr; }
  /* Stack 1-col on mobile; revert subgrid setup since rows don't need to align across cards anymore.
     grid-row resets are critical: without them the desktop rule's "grid-row: 1 / -1" makes both cards
     overlap in the single column instead of stacking. row-gap restores the inter-card breathing room
     (desktop sets row-gap: 0 because subgrid handles spacing internally). */
  .ba-grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 20px; }
  .ba-card { display: block; grid-row: auto; grid-column: auto; }
  .ba-list { display: block; grid-row: auto; }
  .case-grid { grid-template-columns: 1fr; }
  .foot-inner { grid-template-columns: 1fr; gap: 40px; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .cta-band { padding: 48px 0; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  /* CTA band buttons stack full width on mobile, one per row.
     They used to share one row, equal width and shrinkable, which worked
     while both labels were short. With a longer primary label that squeezed
     each button under about 150px and the label spilled out of its box.
     Stacking matches what .final-cta-actions already does on phones. */
  .cta-band-actions {
    grid-auto-flow: row;
    width: 100%;
    gap: 10px;
  }
  .cta-band-actions .btn {
    width: 100%;
    min-width: 0;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
    text-align: center;
    justify-content: center;
    /* .btn sets white-space: nowrap. These buttons are flex: 1 1 0 with
       min-width: 0, so a label longer than its share of the row spills
       outside the button box instead of wrapping. Allow wrapping here so
       the one-row-on-mobile intent above survives a longer label. Same
       fix as .agents-foot-cta. */
    white-space: normal;
    line-height: 1.25;
  }
  .cta-band-actions .btn .btn-arrow { display: none; }

  .section { padding: 80px 0; }
  .final-cta { padding: 80px 0; }
  .final-cta-actions { flex-direction: column; width: 100%; }
  .final-cta-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Mobile drawer (hamburger menu)
   Hidden by default; .open class slides it down. Shown only at
   <=780px since that's where .nav-mobile-toggle becomes visible.
   ============================================================ */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 49;
  background: #1C1719;
  border-bottom: 1px solid var(--plum-700);
  padding: 76px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* When closed: visibility hidden guarantees no pixels paint, regardless
     of how iOS Safari interprets translateY(-100%) under viewport-fit=cover.
     Visibility transition is delayed so the slide animates first, then
     visibility flips after duration. On open it flips immediately. */
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  pointer-events: none;
}
.nav-drawer.open {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--dur-base) var(--ease-out), visibility 0s linear 0s;
}
.nav-drawer a.nav-drawer-link {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--plum-50);
  text-decoration: none;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-drawer a.nav-drawer-link:last-of-type { border-bottom: 0; }
.nav-drawer-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
.nav-drawer-ctas .btn {
  width: 100%;
  justify-content: center;
}
.nav-mobile-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--plum-50);
  margin: 4px 0;
  border-radius: 1px;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
/* X morph: with absolutely-positioned bars, both outer bars snap back to y=0
   (the middle bar's position) and rotate ±45° to form an X. Middle bar fades. */
.nav-mobile-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(0) rotate(45deg); }
.nav-mobile-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-mobile-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(0) rotate(-45deg); }
@media (min-width: 781px) {
  .nav-drawer { display: none; }
}

/* Touch devices: make :active fire on non-interactive cards.
   iOS Safari only delivers :active to elements it considers tappable —
   cursor: pointer is the cheapest signal. -webkit-tap-highlight-color
   removes the default grey flash so the lift animation reads cleanly. */
@media (hover: none) and (pointer: coarse) {
  .hero-stat,
  .case-card {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Sub-line height reservation, per measured band (see .hero-copy-v2 .hero-headline).
   Kept as separate queries so each band reserves only what it actually needs.
   Boundaries were measured WITH the pause toggle present - its ~17px of inline
   width shifts the wrap thresholds, so re-measure these if the toggle changes. */
@media (min-width: 510px) and (max-width: 780px) {
  .hero-copy-v2 .hero-headline { min-height: 3em; }   /* 2 lines */
}
@media (max-width: 359px) {
  .hero-copy-v2 .hero-headline { min-height: 6em; }   /* 4 lines */
}

/* ------------------------------------------------------------
   SOUND FAMILIAR - the five problems, sits directly under the hero
   ------------------------------------------------------------
   LIGHT section. It carries .section--rhythm-light, so the generic
   rules in index.html's inline <style> handle the surface, the
   eyebrow, the h2 and every h3 inside it. Those rules are (0,2,2)
   and load after this file, so DO NOT set colour on .sf-lead here:
   it would silently lose. Only classes those rules cannot see are
   coloured below.

   The bridge card underneath is the existing phases-cta band, which
   already draws the floating dark card on a light-to-dark gradient.
   ------------------------------------------------------------ */

.sf .section-head { margin-bottom: 44px; }

.sf-list {
  list-style: none;   /* UA default: decimal markers on <ol> */
  margin: 0;          /* UA default: 1em 0 */
  padding: 0;         /* UA default: padding-inline-start 40px */
  /* 48px rail + 24px gap + the 780px text measure. Capping the LIST
     rather than the text keeps the item hairlines ending where the
     copy ends instead of running the full width of .wrap. */
  max-width: 852px;
  /* Ruled top and bottom in copper, closing the set. This list and
     "What changes for you" (.wcf-list) are deliberately ONE OBJECT
     ON TWO SURFACES: same 852 / 840 / 620 container, same rail, same
     chip, same row padding. Five problems here, five answers there,
     01 to 01 through 05 to 05. See the .wcf block at the end of this
     file, and keep the two in step. */
  /* .58, not the .32 the dark list uses. The same alpha does NOT read
     the same weight on the two surfaces: a copper hairline on paper
     loses contrast that the identical hairline on plum keeps. Tuned
     by measurement, not by eye, so the pair reads level: this is
     1.92:1 on --light-bg against .wcf-list's 1.94:1 on --plum-900.
     The ROW hairlines below stay on each surface's house border
     token (--light-border / --plum-700), which is already the right
     parallel and is shared with every other section. */
  border-top: 1px solid rgba(var(--light-accent-rgb), .58);
  border-bottom: 1px solid rgba(var(--light-accent-rgb), .58);
}

.sf-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 24px;
  /* baseline, never center: pins the ordinal to the lead line's first
     baseline at every step of the clamp with no magic padding. */
  align-items: baseline;
  padding: 30px 0;   /* = .wcf-row; the two lists share a row height */
}
.sf-item + .sf-item { border-top: 1px solid var(--light-border); }

.sf-num {
  /* The SAME chip as .wcf-num, down to the hex. --cyan-500 is not
     re-tokenised by the light system, so the copper ground and the
     punched-out numeral are identical in both lists and the SURFACE
     is the only thing that changes between them. That is the whole
     rhyme. The numeral reads 7.95:1 on the chip in both.
     --cyan-500 IS re-tokenised by body[data-accent], so that figure
     is for the copper ramp this page is pinned to; teal, gold and
     coral give 8.19, 10.55 and 6.82, all of which still pass.
     Block rather than inline so the chip is a real box: the row's
     baseline alignment still lines the digits up, it just shifts the
     box to do it, so this padding cannot knock the chip off the
     lead's first line. */
  display: block;
  width: 44px;
  padding: 6px 0;
  border-radius: 5px;
  background: var(--cyan-500);
  color: var(--plum-900);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  /* letter-spacing emits a trailing space after the second digit that
     text-align: center counts, so the glyph pair sits half a space
     (0.52px at 13px) left of centre. The indent hands that back, and
     it takes the FULL tracking to do it, not half: under text-align:
     center an indent shortens the line box as well as offsetting it,
     so it delivers half its value as a shift. Measured glyph inset in
     a 44px chip: 13.719px at 0, 13.984px at .04em, 14.234px at .08em,
     against the 14.234px that centres it. */
  text-indent: .08em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sf-lead {
  font-family: var(--font-display);
  font-weight: 600;
  /* The SAME curve as .wcf-head, deliberately. These were 19/1.9vw/25
     at line-height 1.3 and .wcf-head was 20/1.85vw/26 at 1.28, which
     made the two "identical" rows 92.5px and 93.3px, and flipped
     WHICH list had the larger lead twice across the viewport range
     (wcf bigger at 1440, sf bigger from ~1300 to 1100, wcf bigger
     again below 1000). One curve, one row height, no flip. */
  font-size: clamp(20px, 1.85vw, 26px);
  line-height: 1.28;
  letter-spacing: -.015em;   /* global h1-h4 sets -.02em; these are sentences */
  margin: 0;
  text-wrap: pretty;         /* overrides text-wrap: balance from global h1-h4 */
  max-width: 780px;          /* the same measure .section-head uses */
}

/* keeps "1-2" from breaking across lines at phone widths */
.sf-nb { white-space: nowrap; }

@media (max-width: 1100px) {
  .sf .section-head { margin-bottom: 40px; }
  .sf-list { max-width: 840px; }   /* 40px rail + 20px gap + 780px measure */
  .sf-item {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 20px;
    padding: 27px 0;
  }
  .sf-num { width: 38px; font-size: 12px; padding: 5px 0; }
}

@media (max-width: 780px) {
  .sf .section-head { margin-bottom: 32px; }

  /* Drop the ordinal rail and stack the number above the lead line.
     Cap the LIST at 620px rather than un-capping it: the page gutter
     also shrinks here, so "max-width: none" would make the measure
     WIDER at 780px than it was at 781px. */
  .sf-list { max-width: 620px; }
  .sf-item { display: block; padding: 24px 0; }
  /* already display: block with a fixed width, so it just needs the
     gap under it once it stops being a grid cell. NO font-size here:
     the 1100px block already took the chip to 12px, and re-stating
     13px would make it GROW as the viewport shrinks. */
  .sf-num { margin-bottom: 12px; }
  .sf-lead { max-width: none; }
}

/* ============================================================
   HOW IT WORKS - version B (three steps, no mockups)
   ------------------------------------------------------------
   PREFIX: .hiw-*  Checked against v2/styles.css, against every
   inline <style> block in v2/index.html, and repo-wide over
   *.html / *.css / *.js outside node_modules: zero occurrences
   of the string "hiw" anywhere.

   SURFACE: this section renders DARK, on --plum-900. It keeps
   data-rhythm-section="phases" and body is data-rhythm="mixedv3",
   so the head block at index.html:256-353 flips
   [data-rhythm-section="phases"].section--rhythm-light back from
   the light rhythm to --plum-900 with dark-mode typography
   (h* -> --plum-50, p/li -> --plum-200, .eyebrow -> --cyan-500,
   buttons back to copper-on-plum). Every colour below is picked
   against --plum-900 / --plum-800.

   SPECIFICITY: those revert rules are (0,2,2) on BARE h1-h4, p
   and li, and they load from the <head>, so a plain ".hiw-x"
   (0,1,0) loses to them no matter where this block is placed.
   Convention used below, do not "simplify" it:
     - colour / background / border-colour on an h3, p or li is
       written as [data-rhythm-section="phases"].hiw .hiw-x,
       which is (0,3,0) and wins;
     - everything else (type, spacing, layout) uses the short
       .hiw-x form, so the media queries can override it.
   Keeping those two families apart is what makes the responsive
   rules below work without repeating the long selector.
   ============================================================ */

.hiw {
  /* Belt and braces. On the real page the rhythm rules above
     already paint this --plum-900 and out-specify this line with
     the same value, so it changes nothing there. On a bare
     preview page with no rhythm rules, it is what makes the
     section render on the surface it was designed for. */
  background: var(--plum-900);
  color: var(--plum-200);
}

.hiw .section-head { margin-bottom: 56px; }

.hiw-grid {
  /* One set of numbers drives the panel padding, the marker size
     and the rail offset, so the rail cannot drift out of the
     marker's centre when the padding changes at a breakpoint. */
  --hiw-pad-y: 34px;
  --hiw-pad-x: 32px;
  --hiw-mark: 44px;
  --hiw-gap: 28px;

  position: relative;
  list-style: none;   /* UA default: decimal markers on <ol> */
  margin: 0;          /* UA default: 1em 0 */
  padding: 0;         /* UA default: padding-inline-start 40px */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--hiw-gap);
  align-items: stretch;
}

/* The process rail: a single hairline running through the centre
   of the three markers. The panels are opaque and sit above it,
   so only the two segments inside the column gaps are visible. */
.hiw-grid::before {
  content: "";
  position: absolute;
  top: calc(var(--hiw-pad-y) + var(--hiw-mark) / 2);
  left: 0;
  right: 0;
  height: 1px;
  background: var(--cyan-700);
  opacity: .6;
  pointer-events: none;
}

.hiw-step {
  position: relative;
  z-index: 1;                 /* panel masks the rail */
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--hiw-pad-y) var(--hiw-pad-x);
  border-radius: 12px;        /* the page's card radius */
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .6);
}
[data-rhythm-section="phases"].hiw .hiw-step {
  background: var(--plum-800);
  border: 1px solid var(--plum-700);
}

.hiw-step-mark {
  flex: none;
  width: var(--hiw-mark);
  height: var(--hiw-mark);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cyan-500);
  background: var(--plum-900);
  border: 1.5px solid var(--cyan-500);
  /* same soft halo the existing .phase-dot uses */
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .07);
}

.hiw-step-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: 14px;
}

.hiw-step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.26;
  letter-spacing: -.015em;   /* global h1-h4 sets -.02em; these are sentences */
  margin: 0;
  text-wrap: pretty;         /* overrides text-wrap: balance from global h1-h4 */
  /* Two lines' worth, with the text optically centred inside the
     box, so a one-line title and a two-line title still start
     their body copy on the same line across the row without
     leaving a hole under the short one. grid + align-content,
     not flex: an anonymous flex item would be sized max-content
     and the title would stop wrapping. Released the moment the
     steps stop sitting side by side. */
  min-height: 2.52em;
  display: grid;
  align-content: center;
}
[data-rhythm-section="phases"].hiw .hiw-step-title { color: var(--plum-50); }

.hiw-step-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  text-wrap: pretty;
}
[data-rhythm-section="phases"].hiw .hiw-step-body { color: var(--plum-200); }

.hiw-step-foot {
  /* Pins the chip band to the bottom of the panel. The three
     steps have very different copy lengths, so this is what makes
     the three bands line up on one baseline across the row. */
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-rhythm-section="phases"].hiw .hiw-step-foot {
  border-top: 1px solid var(--plum-700);
}

.hiw-foot-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--cyan-500);
}

.hiw-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hiw-chip {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: 7px 12px;
  border-radius: 999px;
  border-style: solid;
  border-width: 1px;
}
[data-rhythm-section="phases"].hiw .hiw-chip {
  color: var(--plum-200);
  background: var(--plum-900);
  border-color: var(--plum-700);
}

/* ------------------------------------------------------------
   Tablet: one column, marker moves into a left rail
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .hiw .section-head { margin-bottom: 44px; }

  .hiw-grid {
    --hiw-pad-y: 30px;
    --hiw-pad-x: 28px;
    --hiw-mark: 40px;
    --hiw-gap: 16px;
    grid-template-columns: minmax(0, 1fr);
    /* Cap the stack rather than letting it run the full 1280px
       content width: a single panel that wide gives the body copy
       a measure far past 780px. */
    max-width: 820px;
  }
  /* One column, so the rail has no gaps left to show through. */
  .hiw-grid::before { display: none; }

  .hiw-step {
    display: grid;
    grid-template-columns: var(--hiw-mark) minmax(0, 1fr);
    gap: 0 22px;
    align-items: start;
  }
  .hiw-step-title { min-height: 0; display: block; }
  .hiw-step-body {
    font-size: 16px;
    max-width: 620px;   /* the panel is wider than a comfortable measure */
  }
}

/* ------------------------------------------------------------
   Phone: drop the rail, marker sits above the title
   ------------------------------------------------------------ */
@media (max-width: 780px) {
  .hiw .section-head { margin-bottom: 32px; }

  .hiw-grid {
    --hiw-pad-y: 26px;
    --hiw-pad-x: 22px;
    --hiw-mark: 38px;
    --hiw-gap: 14px;
    /* Cap the list at 620px rather than un-capping it: the page
       gutter also shrinks here, so "none" would make the measure
       WIDER at 780px than it was at 781px. */
    max-width: 620px;
  }

  .hiw-step { display: block; }
  .hiw-step-mark {
    display: flex;          /* block-level, so margin-bottom lands */
    margin-bottom: 16px;
  }
  .hiw-step-main { gap: 12px; }
  .hiw-step-title { font-size: 20px; }
  .hiw-step-body { font-size: 15.5px; }
  .hiw-step-foot { padding-top: 18px; }
  .hiw-chip { padding: 6px 11px; }
}

/* ------------------------------------------------------------
   WHAT YOUR AI SALES EMPLOYEES CAN DO - six example cards
   ------------------------------------------------------------
   LIGHT section (.section--rhythm-light), so the generic inline
   rules in index.html theme the eyebrow, the h2, every h3 and every
   p inside it. Those rules are (0,2,2) and load AFTER this file, so
   DO NOT set colour on .agents-name or .agents-line here: it would
   silently lose. Only classes those rules cannot see get colours.

   ORDER: the DOM is in PHONE order (3, 11, 22, 6, 16, 17). Desktop
   reorders to Karim's grid, 3/22 then 11/16 then 6/17, using the
   per-card `--o` custom property set inline in the markup. The
   phone block below drops back to DOM order.
   ------------------------------------------------------------ */

/* The bridge band above already lays 56px of gradient below its floating
   card, so the section's standard 120px top padding stacked to ~176px and
   read as a void. Scoped to the adjacency, so no other section moves.
   (0,2,0) beats .section's (0,1,0) at both breakpoints; the inline
   bridge-down + .section--rhythm-light rule only sets border-top.) */
[data-rhythm-section="bridge-down"] + .agents { padding-top: 64px; }

.agents-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.agents-card {
  order: var(--o, 0);
  background: var(--light-surface);
  border: 1px solid var(--light-border);
  border-radius: 12px;
  padding: 26px 28px;
  /* keeps a short card level with a two-line neighbour in the same row */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.agents-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.3;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: pretty;   /* overrides text-wrap: balance from global h1-h4 */
}

.agents-line {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}

.agents-foot {
  margin: 36px 0 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  /* 720px stranded "team." on a 41px second line. The sentence measures
     ~760px at 15.5px, so 800 holds it on one line with slack to spare and
     still sits well inside .wrap's 1120px content box. */
  max-width: 800px;
  /* Belt and braces for the widths where it must still wrap: a short last
     line gets pulled back rather than left as one word. */
  text-wrap: pretty;
}
/* The route to the full list. Karim wants this prominent, so it is a real
   button rather than an inline link, and it is the only action in this slot
   now that the conversion CTAs sit in the band ABOVE the section. */
.agents-foot-cta { margin-top: 20px; }

@media (max-width: 1100px) {
  .agents-grid { gap: 16px; }
  .agents-card { padding: 22px 24px; }
}

@media (max-width: 780px) {
  [data-rhythm-section="bridge-down"] + .agents { padding-top: 40px; }

  /* One column, and back to DOM order, which IS the phone order. */
  .agents-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .agents-card { order: 0; padding: 20px 22px; }
  .agents-foot { margin-top: 28px; }
  /* .btn sets white-space: nowrap; let this one wrap if the phone is narrow */
  .agents-foot-cta { white-space: normal; text-align: center; }
}

/* ============================================================
   WHAT CHANGES FOR YOU - the five outcomes
   ------------------------------------------------------------
   PREFIX: .wcf-*  Checked against v2/styles.css, against every
   inline <style> block in v2/index.html, and repo-wide over
   v2/: zero occurrences of the string "wcf" anywhere.

   THE MIRROR. This is "Sound familiar?" answered, and the pairing
   is literal rather than decorative: 01 here answers 01 up there
   (revenue rides on one or two reps), 02 answers 02 (cannot trust
   the data), 03 answers 03 (deals dying unseen), 04 answers 04 (no
   time to coach), 05 answers 05 (ramp time). That is why the rail
   geometry below is copied from .sf-list to the pixel, 48 + 24 +
   the 780px measure at full width and 40 + 20 + 780 at 1100px: the
   two lists are meant to sit on the same grid so the second reads
   as the first with the lights turned on. IF EITHER LIST IS EVER
   REORDERED OR RE-SCOPED, REORDER THE OTHER ONE WITH IT.

   LEAD LINE ONLY. .sf-item is a chip and a lead line with no
   supporting copy, and so is this. The brief carries a supporting
   sentence under each of these five outcomes; it is deliberately
   not on the page, because the moment this list grows a second
   text element per row it stops being the same object as the one
   it is answering and turns into a different section that happens
   to be numbered.

   ONE THING INVERTS, AND ONLY ONE: THE SURFACE. "Sound familiar?"
   is paper, this is plum-900, and everything else about the two
   lists is the same object. Same container caps (852 / 840 / 620),
   same 48 + 24 rail, same row padding (30 / 27 / 24), same lead
   type curve, and the same copper chip down to the hex, because
   --cyan-500 is not re-tokenised by the light system.
   This started life with three inversions, a copper-ink ordinal
   and an open-ended list up there against a chip and a closed list
   down here. Both of those were deliberately erased when .sf was
   given the chip and the closing rules, so that the pairing reads
   as one object seen twice rather than as two related sections.
   If you are tempted to re-introduce a difference "so they are not
   too samey", that is the thing that was removed on purpose.

   SURFACE / SPECIFICITY. The section deliberately does NOT carry
   .section--rhythm-light, so none of the light-rhythm rules in
   index.html's <head> can see it and the inline (0,2,2) trap on
   h1-h4 / p / li / .eyebrow / .h-section never fires here. The
   dark defaults in this file already do the right thing (h* ->
   --plum-50, body -> --plum-200, .eyebrow -> --cyan-500), and
   every colour set below is a plain class that wins outright.
   Do NOT add .section--rhythm-light to this section "to match the
   neighbours": it would silently repaint the whole thing paper.
   ============================================================ */

.wcf {
  /* body is already --plum-900, so on the real page this paints
     nothing new. It is here for the same reason .hiw states it: on
     a bare preview page with no rhythm attribute on <body>, it is
     what puts the section on the surface it was drawn for. */
  background: var(--plum-900);
  color: var(--plum-200);
}

/* THE TWO CUTS: light above (.agents) and light below
   (.why-narrative), with no CTA band to bridge with.
   A BORDER IS NOT ON THE TABLE. index.html:1232-1240 strips
   border-top and border-bottom with !important from every
   .section under body[data-rhythm^="mixedv"], so the page's 1px
   boundary hairline is already dead everywhere and nothing
   declared here can outrank it.
   BOTH CUTS ARE LEFT HARD, ON PURPOSE. A 72px light-to-dark
   background ramp at each edge was built and rendered first,
   stepping --light-bg through --plum-200 and --plum-600 into
   --plum-900. Rendered, it read as a pale mauve halo, like a
   light leak: most of the 72px is spent in the pale half of that
   ramp, so the band that actually shows is wide and light rather
   than the thin shadow it was meant to be. It was thrown away
   rather than retuned, because the page's own precedent is
   better and is already at the top of the page: the hero-to-
   "Sound familiar?" boundary is exactly this cut, with no bridge
   and no seam, and it reads as a chapter break. The floating CTA
   cards bridge where they bridge because those bands were
   already in the markup, not because every transition has to be
   bridged. There is no ramp in this block to shorten. */

.wcf .section-head { margin-bottom: 44px; }   /* the .sf figure, on purpose */

.wcf-list {
  list-style: none;   /* UA default: decimal markers on <ol> */
  margin: 0;          /* UA default: 1em 0 */
  padding: 0;         /* UA default: padding-inline-start 40px */
  /* 48px rail + 24px gap + the 780px measure, the exact numbers
     .sf-list uses. Capping the LIST rather than the text is what
     keeps the three rules below ending where the copy ends instead
     of running the full width of .wrap. */
  max-width: 852px;
  /* Inversion 3: ruled top and bottom, where .sf-list is open.
     These land on the <ol>, not on .section, so the !important
     border strip cited above cannot reach them. */
  border-top: 1px solid rgba(var(--accent-rgb), .32);
  border-bottom: 1px solid rgba(var(--accent-rgb), .32);
}

.wcf-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 24px;
  /* baseline, never center: pins the chip to the head's FIRST
     baseline at every step of the clamp with no magic padding.
     This is what absorbs the head lengths. Row 04's head is 23
     characters and row 02's is 84, so row 02 wraps to two lines
     and the others do not; baseline keeps all five chips level
     with the first line of their head, where center would drift
     the chip down the row that wraps. Same call .sf-item makes,
     for the same reason. */
  align-items: baseline;
  padding: 30px 0;
}
.wcf-row + .wcf-row { border-top: 1px solid var(--plum-700); }

/* Closing line for "What changes for you". Capped to the SAME 852 the list
   uses, not to the text, so it starts and ends where the ruled rows do.
   The three caps below mirror .wcf-list's own 852 / 840 / 620. */
.wcf-foot {
  margin: 40px 0 0;
  max-width: 852px;
  font-family: var(--font-body);
  /* Bigger twice on Karim's call, 2026-10-08. Was clamp(16px, 1.35vw, 18px),
     then clamp(17.5px, 1.5vw, 21px). Matched to .defx-foot: both are closing
     payoff lines and they share one value. */
  font-size: clamp(19px, 1.75vw, 24px);
  line-height: 1.45;
  /* White, not plum-200. .wcf-foot-label keeps the copper, so "The bottom
     line:" still reads as the label and the sentence after it is the one
     that carries. */
  color: var(--plum-50);
  text-wrap: pretty;
}
.wcf-foot-label {
  font-weight: 600;
  color: var(--cyan-500);
}

.wcf-num {
  /* Inversion 2. .sf-num is copper ink on paper; here the ground
     is copper and the numeral is punched out of it, which is the
     whole rhyme in one 44px object. Block rather than inline so
     the chip is a real box: grid baseline alignment still aligns
     the text baselines, it just shifts the box up to do it, so the
     padding here cannot knock the chip off the head's first line.
     600 not 700: .sf-num is 600 and .hiw-foot-label is 500, and
     the sheet uses 700 only at display sizes. */
  display: block;
  width: 44px;
  padding: 6px 0;
  border-radius: 5px;
  background: var(--cyan-500);
  color: var(--plum-900);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  /* See the .sf-num block: the trailing letter-space throws the pair
     half a space left of centre, and it takes the FULL tracking to
     hand it back, because a centred line delivers only half of an
     indent as a shift. */
  text-indent: .08em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.wcf-head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 1.85vw, 26px);
  line-height: 1.28;
  letter-spacing: -.015em;   /* global h1-h4 sets -.02em; these are sentences */
  margin: 0;
  color: var(--plum-50);
  /* the head is the second grid cell, so it needs this itself: a
     long word wraps rather than widening the track. (.sf-lead gets
     the same protection from minmax(0, 1fr) on the row.) */
  min-width: 0;
  /* overrides text-wrap: balance from global h1-h4, and it matters
     more here than in .sf. balance would even out the two lines of
     the 84-character head while leaving the 23-character one
     alone, so the set would rag inconsistently, some rows looking
     justified and some not. pretty gives all five the same natural
     rag and only guards the orphan. */
  text-wrap: pretty;
}


/* ------------------------------------------------------------
   Tablet: the rail narrows, in step with .sf-list
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .wcf .section-head { margin-bottom: 40px; }

  /* 40px rail + 20px gap + 780px measure. The same step .sf-list
     takes at this breakpoint, so the two lists stay on one grid.
     The text measure is 780px on both sides of the breakpoint. */
  .wcf-list { max-width: 840px; }
  .wcf-foot { max-width: 840px; margin-top: 34px; }

  .wcf-row {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 20px;
    padding: 27px 0;
  }
  .wcf-num { width: 38px; font-size: 12px; padding: 5px 0; }
  /* .wcf-head is untouched on purpose: the clamp reads 20.35px at
     1100px, and pinning a fixed size here would make the heads
     GROW as the viewport shrinks past the breakpoint. */
}

/* ------------------------------------------------------------
   Phone: drop the rail, the chip sits above the head
   ------------------------------------------------------------ */
@media (max-width: 780px) {
  .wcf .section-head { margin-bottom: 32px; }

  /* Cap the LIST at 620px rather than un-capping it: the page
     gutter drops from 40px to 24px at this same breakpoint, so
     "max-width: none" here would make the measure WIDER at 780px
     than it was at 781px. */
  .wcf-list { max-width: 620px; }
  .wcf-foot { max-width: 620px; margin-top: 28px; }

  .wcf-row { display: block; padding: 24px 0; }
  /* already display: block with a fixed width, so it just needs
     the gap under it once it stops being a grid cell */
  .wcf-num { margin-bottom: 12px; }
}

/* ------------------------------------------------------------
   FAQ answer link
   ------------------------------------------------------------
   One answer ("What do these AI Sales Employees do?") ends in a link
   to the full catalogue. The FAQ is a LIGHT section, and the inline
   (0,2,2) rule in index.html's head colours `.faq-a-inner p`, not the
   anchor inside it, so an explicit colour here wins outright and does
   not hit the specificity trap. Without this the UA default paints it
   browser-blue on paper.
   ------------------------------------------------------------ */
.faq-a-link {
  color: var(--light-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--light-accent-rgb), .4);
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.faq-a-link:hover {
  color: var(--light-accent-deep);
  border-bottom-color: var(--light-accent-deep);
}

/* ------------------------------------------------------------
   Final CTA guarantee
   ------------------------------------------------------------
   Deliberately NOT .final-cta-hint. That class is toggled off by
   body[data-cta-hints="off"] (index.html:1244-1245), which is the
   state this page ships in, so the guarantee would never have
   rendered. It is also not a hint: the brief specifies it as the
   guarantee, under the buttons.
   Sits on the dark .final-cta surface, so it owns its own colours
   and there is no light-system trap to dodge.
   ------------------------------------------------------------ */
/* Sits between the two buttons and the guarantee, so it reads as what the
   call itself gives you before the risk reversal lands. Quieter than the
   guarantee, which keeps its copper. */
.final-cta-promise {
  margin: 22px auto 0;
  max-width: 620px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--plum-400);
  text-wrap: pretty;
}

.final-cta-guarantee {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--plum-200);
  margin: 22px 0 0;
  max-width: 540px;
  text-wrap: pretty;
}
.final-cta-guarantee strong {
  color: var(--cyan-500);
  font-weight: 600;
}

@media (max-width: 780px) {
  .final-cta-guarantee { font-size: 13.5px; margin-top: 18px; max-width: 420px; }
}