/* =========================================================================
   LeadExcess Sales Page — Design System
   Source of truth: 09_LEADEXCESS_WEBSITE_BRAND_GUIDE.md
   Phase One scope: page shell, design system, header, hero, hero video.
   ========================================================================= */

/* ---- Design tokens ------------------------------------------------------ */
:root {
  /* Color: primary */
  --navy-primary: #0C1424;
  --navy-secondary: #172238;
  --gold: #FFBA42;
  --gold-hover: #EAAA35;

  /* Color: neutral */
  --bg-offwhite: #F7F5F0;
  --bg-light-neutral: #EEF0F3;
  --text-on-light: #111827;
  --text-secondary: #526071;
  --white: #FFFFFF;
  --border-standard: #D9DEE6;

  /* Typography: Sora (headlines) + Manrope (body/interface).
     Updated 2026-08-01, replacing DM Serif Display — see
     09_LEADEXCESS_WEBSITE_BRAND_GUIDE.md §3. */
  --font-headline: "Sora", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", Inter, Arial, sans-serif;

  /* Type scale: desktop. Hero headline size is not tokenized here — it uses
     its own clamp() on .hero__headline (see Hero section below), tuned to
     the Hero's specific column-width constraints. */
  --size-section-headline: 46px;
  --size-supporting-headline: 33px;
  --size-card-headline: 24px;
  --size-body-lg: 19px;
  --size-body: 17px;
  --size-body-sm: 15px;
  --size-eyebrow: 13px;
  --size-button: 14px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --space-11: 120px;

  /* Layout */
  --content-max-width: 1180px;
  --content-max-width-wide: 1280px;
  --content-max-width-narrow: 720px;
  --section-space-desktop: var(--space-11);
  --section-space-mobile: var(--space-8);

  /* Radius / borders */
  --radius-standard: 10px;
  --radius-media: 16px;
  --radius-button: 8px;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-standard: 220ms ease;
}

@media (max-width: 768px) {
  :root {
    /* Bumped 2026-08-14 (34→38) as part of a mobile-only typography/
       density refinement pass: this token drives every major section H2
       (Conversion Problem, How It Works, Scenario, Featured Results,
       Calculator, Support) uniformly, so raising it once here gives all
       of them the same deliberate 36–40px mobile hierarchy without
       touching desktop or any individual section's own rules. */
    --size-section-headline: 38px;
    --size-supporting-headline: 27px;
    --size-card-headline: 21px;
    --size-body-lg: 18px;
    --size-body: 16px;
    --size-body-sm: 14px;
    --size-button: 14px;
  }
}

/* ---- Reset / base -------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Fixes a real bug (2026-08-26): body's own background (--bg-offwhite,
     a cream tone, set below) gets propagated to paint the viewport
     canvas whenever html itself has no background — per the CSS
     background-propagation rule for the root element. That canvas
     color is what's revealed during elastic/rubber-band overscroll
     past the very top or bottom of the page (touch devices, and
     trackpad-based scrolling in desktop Safari) — with the page
     ending on the dark footer, bouncing past it exposed a cream flash
     that read as "blank white space below the footer." Giving html an
     explicit dark background stops the propagation, so the canvas
     matches the dark sections at both ends of the page (Hero at the
     top, Footer at the bottom) instead of body's light default. Every
     section already paints its own full-width background over body in
     normal layout, so this is invisible in normal scrolling and only
     changes what shows during overscroll — not a layout, spacing, or
     color change to any visible section. */
  background: var(--navy-secondary);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: 1.6;
  color: var(--text-on-light);
  background: var(--bg-offwhite);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-headline);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  text-transform: none;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Visible keyboard focus everywhere; never suppressed for aesthetics */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reusable mobile-only forced line break (added 2026-08-25) — same
   show/hide technique as the Hero's own .hero__break--desktop, made
   generic so it can be reused anywhere a headline needs a deliberate,
   guaranteed break on phone widths without affecting desktop. Hidden
   by default (desktop natural wrap is untouched); shown ≤768px only
   where a <br class="break-mobile"> is actually placed in the markup —
   sections without that tag are completely unaffected either way. */
.break-mobile {
  display: none;
}

@media (max-width: 768px) {
  .break-mobile {
    display: initial;
  }
}

/* Reusable desktop-only forced line break (added 2026-08-27) — the
   inverse of .break-mobile above, for a headline whose NATURAL mobile
   wrap already lands in a good place but whose desktop wrap (wider
   column, different font-size) leaves an orphaned single word on its
   own line. Hidden ≤768px (mobile keeps its own natural wrap
   untouched); shown ≥769px only where a <br class="break-desktop"> is
   actually placed in the markup. First use: the Conversion Gap
   headline ("The First Reply Is Only the Beginning"). */
.break-desktop {
  display: none;
}

@media (min-width: 769px) {
  .break-desktop {
    display: initial;
  }
}

/* Reusable desktop/mobile copy-swap pair (added 2026-08-25) — for cases
   where mobile needs genuinely shorter wording rather than just a
   different line break (.break-mobile above handles that simpler
   case). Pair a .desktop-only and a .mobile-only element with the same
   base class so only one copy is ever visible per breakpoint; explicit
   "display: block" on the visible state rather than "initial" since
   these wrap <p> elements and "initial" would reset to inline, not the
   UA stylesheet's block default. First use: the Pricing section's
   .pricing__inclusions / .pricing__edge-copy text (2026-08-25). */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }
}

.container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.container--narrow {
  max-width: var(--content-max-width-narrow);
}

/* Shared wide container for Header + Hero, per approved Hero redesign
   direction (~1240-1320px). Other sections continue using the standard
   .container width. */
.container--wide {
  max-width: var(--content-max-width-wide);
}

/* ---- Buttons -------------------------------------------------------------
   One filled primary style, one bordered secondary style, shared height,
   typography, and radius, per file 09 §7. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-button);
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--radius-button);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 42px;
  white-space: nowrap;
}

/* Restrained hover lift (2026-08-08), shared by every CTA — primary,
   secondary, and header — so the whole set moves the same amount and
   only differs in fill/border/shadow treatment. Small scale + 1px lift,
   nothing bouncy. */
.btn:hover {
  transform: translateY(-1px) scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  }
  .btn:hover {
    transform: none;
  }
}

.btn-primary {
  background: var(--gold);
  color: var(--navy-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--gold-hover);
  box-shadow: 0 10px 24px -8px rgba(255, 186, 66, 0.45);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.32);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: rgba(255, 255, 255, 0.75);
}

.btn-block {
  width: 100%;
}

/* ---- Header ---------------------------------------------------------------
   Logo, centered desktop nav, restrained "Schedule a Call" CTA for
   high-intent visitors (distinct from the Hero's evaluation-stage primary
   CTA). Nav helps visitors reach high-intent content without a full
   scroll; three of the four targets are interim placeholder anchors until
   later sections are built. No hamburger menu, no sticky bottom CTA.
   07_LEADEXCESS_IMPLEMENTATION_PLAN.md §7. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(180deg, var(--navy-primary) 0%, var(--navy-primary) 85%, var(--navy-secondary) 100%);
}

.site-header::after {
  /* Soft seam instead of a hard rule, so the Header reads as the top plane
     of the same layered navy surface as the Hero, not a separate flat bar. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 186, 66, 0.22) 50%, transparent 100%);
}

.site-header__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  padding-top: 20px;
  padding-bottom: 20px;
}

.site-header__logo {
  grid-column: 1;
  display: flex;
  align-items: center;
}

.site-header__logo img {
  height: 44px;
  width: auto;
}

/* Explicit grid-column placement on logo/nav/CTA (rather than relying on
   auto-placement order) so hiding the nav below 900px doesn't shift the
   CTA into the nav's middle track — display:none removes an item from
   grid auto-placement entirely, which would otherwise stretch the CTA. */
.site-header .btn-header-cta {
  grid-column: 3;
}

/* Desktop nav: centered in the header's middle column. Hidden on mobile —
   no hamburger, no collapsed menu; the mobile header stays logo + CTA. */
.site-nav {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-7);
}

.site-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--gold);
}

/* Header CTA: restrained on purpose, so it doesn't compete with the Hero's
   solid-gold primary button — dark/transparent fill, gold border only. */
.btn-header-cta {
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  border-color: rgba(255, 186, 66, 0.5);
}

.btn-header-cta:hover,
.btn-header-cta:focus-visible {
  background: rgba(255, 186, 66, 0.1);
  border-color: var(--gold);
}

.site-header .btn {
  padding: 12px 22px;
  font-size: 14px;
  min-height: 44px;
  border-radius: 7px;
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
  }
}

/* Tightened 2026-08-14 (~17% shorter overall: was 15+40+15=70px tall
   at minimum, now 11+36+11=58px) as part of a mobile-only density pass
   — the sticky header was taking up too much viewport while scrolling.
   Logo and CTA both stay clearly visible; only their size/padding and
   the surrounding breathing room shrink. Desktop header (.site-header
   above) is untouched. */
@media (max-width: 560px) {
  .site-header__inner {
    /* Trimmed 3px further each side 2026-08-25 (11px→8px, 6px total off
       the header's own height) as part of the mobile Hero compaction
       pass — logo and CTA sizes below are untouched, per Craig's "leave
       the logo and Schedule a Call button visually strong" instruction;
       only the surrounding padding shrinks. */
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .site-header__logo img {
    height: 28px;
  }
  .site-header .btn {
    padding: 9px 14px;
    font-size: 13px;
    min-height: 36px;
  }
}

/* ---- Hero ------------------------------------------------------------------
   Centered composition (approved 2026-08-01, supersedes the earlier
   two-column layout): eyebrow, headline, supporting copy, and CTA row
   centered at the top; a large, prominent, centered Hero Overview Video
   beneath. States who this is for and what it does with maximum clarity
   before any layout device competes for attention, per the business-goal
   decision framework in CLAUDE.md. Wide shared container with Header
   (~1280px), subtle tonal-navy depth, responsive headline via clamp(). ---- */

/* Subtle entrance motion: a short fade/rise on first paint, staggered
   between copy and video. Neutralized automatically by the global
   prefers-reduced-motion override above (forces animation-duration to
   0.001ms), so no separate reduced-motion rule is needed here. */
@keyframes hero-rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-primary);
  color: var(--white);
  padding-top: var(--space-9);
  padding-bottom: calc(var(--space-8) + 28px);
  /* Angled bottom edge instead of a flat rule, for a more deliberate
     section transition into the page beyond. Restrained rise (not a
     dramatic diagonal), consistent with an editorial rather than a
     "SaaS template" feel. */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 28px));
}

/* Layered navy depth: a soft directional light sweep (top-left) and two
   tonal-navy radial masses (asymmetric, not mirrored corners), so the
   background reads as more than a flat fill without becoming a visual
   effect of its own. No neon, no bright gradients, no patterns.

   Regression fix (2026-08-06): this used to also carry two gold radial
   gradients (centered around where the copy and video columns meet, and
   again lower-right), which — combined with their large pixel radii —
   read as an unapproved amber "sunburst" glow bleeding into the upper
   portion of the Hero. Removed both; only the navy depth + white sweep
   remain. Do not reintroduce a gold glow here — the Hero should stay
   plain dark navy per the approved treatment. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.035) 0%, transparent 34%),
    radial-gradient(980px 640px at 88% -12%, rgba(23, 34, 56, 0.92), transparent 58%),
    radial-gradient(820px 560px at -10% 106%, rgba(23, 34, 56, 0.8), transparent 55%);
  pointer-events: none;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .hero {
    padding-top: var(--space-8);
    padding-bottom: calc(var(--space-7) + 18px);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 18px));
  }
}

.hero__copy {
  animation: hero-rise-in 600ms ease-out both;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

/* Desktop-only widening (2026-08-14): the 820px column was capping how
   wide the headline/description below could ever get, even after their
   own max-widths were raised — this is the outer ceiling those two
   values need room inside. 960px matches .hero__media's own max-width
   exactly, so the copy column can never exceed the video's width
   (video stays the widest element; see .hero__headline/.hero__supporting
   below for how much narrower each actually renders). Scoped to
   min-width so mobile — where this value never bound anyway, since the
   viewport itself is already narrower than 820px — is untouched. */
@media (min-width: 769px) {
  .hero__copy {
    max-width: 960px;
  }
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  /* Bumped 2026-08-14 from space-4 (16px) — a little more breathing room
     above the headline. */
  margin-bottom: 20px;
}

.hero__eyebrow::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  margin: 0 auto 14px;
}

/* Desktop-only forced break (2026-08-14, revised) — "The First
   Reply<br class="hero__break--desktop"> Is Only the Beginning" in
   index.html. Shown by default (desktop): "The First Reply" / "Is Only
   the Beginning", unchanged from before. Hidden ≤768px: the whole
   string flows as one line and wraps NATURALLY instead, per Craig's
   request to test a more balanced mobile 2-line treatment ("The First
   Reply Is" / "Only the Beginning") rather than a third forced break.
   Supersedes the old .hero__break--mobile class (opposite show/hide
   pattern — that one added a break for mobile; this one removes one).
   See .hero__headline's mobile block below for the font-size tuned to
   make that natural wrap land in the right place. */
.hero__break--desktop {
  display: initial;
}

@media (max-width: 768px) {
  .hero__break--desktop {
    display: none;
  }
}

.hero__headline {
  /* Responsive, fluid via clamp() rather than a fixed oversized value.
     Capped at 48px once the copy column reaches its full width (~900px
     viewport and up) — the font itself doesn't depend on the headline's
     own max-width below, just the viewport. */
  font-size: clamp(2.125rem, 1.516rem + 2.5vw, 3rem);
  line-height: 1.15;
  color: var(--white);
  /* max-width, desktop (2026-08-14, widened): both forced lines ("The
     First Reply" ~355px, "Is Only the Beginning" ~515px at 48px Sora
     Bold) fit comfortably inside 900px with real room to spare — wider
     than the previous 560px on purpose, so the headline block reads as
     more substantial and closer in scale to the video beneath it, while
     staying narrower than .hero__media's 960px so the video is still
     the widest element on the page. The desktop break (see
     .hero__break--desktop above) means the 2-line wrap is fixed by
     markup, not by this width — widening it doesn't risk re-wrapping.
     Mobile's own treatment (below, ≤768px) is untouched by this value. */
  max-width: 900px;
  margin: 0 auto 28px;
}

.hero__supporting {
  font-size: var(--size-body-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  /* max-width, desktop (2026-08-14, widened): 740px — narrower than the
     900px headline above it and the 960px video below it (preserves
     video > headline > description), but still a real trim from the
     .hero__copy column's own 960px so lines don't stretch too long.
     Fixed px rather than ch this time so it lands precisely in Craig's
     700–780px target regardless of exact character metrics. Mobile's
     own 300px max-width (below, ≤768px) is untouched by this change. */
  max-width: 740px;
  margin: 0 auto var(--space-6);
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

/* Mobile-only refinement (2026-08-14, revised twice same day): the
   desktop clamp() above bottoms out at its 34px floor across the whole
   ~375–430px phone range (the vw-based preferred value never overtakes
   it below ~640px), which read as too small/generic for a Hero H1 —
   "do not make it small" was explicit. This gave phones their own
   42–46px floor/ceiling — but at that size the headline wrapped to 5
   lines within the Hero's normal 24px side padding, making the Hero
   feel too tall and pushing the CTA too far down.

   First revision: found 40px was the largest size that avoided 5 lines
   at 375px (41px+ always hits 5, regardless of padding), paired with
   16px side padding — got 4 lines at 375/390px, 3 at 430px.

   Second revision (Craig wanted 3 lines at all three widths, not just
   430px): re-ran the same empirical sweep — every font-size/padding
   combination tested against all three widths at once by measuring
   actual wrapped-line count via Range.getClientRects(), not guessing —
   specifically hunting for combinations giving exactly 3 lines at
   375, 390, AND 430px simultaneously. 38px only reached 3-across at an
   8px edge-hugging padding; 37px reached it at a much more comfortable
   14px, a genuinely modest 2px trim from the first revision's 16px —
   so 37px/14px was the better trade (per Craig: "modest font-size
   adjustment if necessary" + "slightly more available width", not one
   pushed to an extreme). Result: clean 3-line wrap with no orphan at
   375, 390, and 430px — 375/390px wrap exactly as Craig's own example
   ("Your Leads Aren't / the Problem. What / Happens Next Is."); 430px
   naturally reflows to "Your Leads Aren't the / Problem. What / Happens
   Next Is." (still 3 lines, still no orphan). Copy spacing (eyebrow→
   headline, headline→supporting, supporting→CTAs, space above the
   eyebrow) tightened at the same time — desktop is completely
   unaffected by any rule in this block. */
@media (max-width: 768px) {
  .hero {
    /* Reduced from 40px 2026-08-25 (-24px, within the requested 20–30px
       range) — Craig wanted the Hero to feel more connected to the
       header and begin a little sooner. Mobile only; desktop's own
       --space-9 padding-top is untouched. */
    padding-top: 16px;
  }
  .hero .container {
    padding-left: 14px;
    padding-right: 14px;
  }
  .hero__eyebrow {
    /* Bumped from 10px, same "little more room above the headline"
       adjustment as the desktop rule above. */
    margin-bottom: 14px;
    /* Font-size/letter-spacing overrides from the longer "Built for
       Established Multi-Op DJ Companies" copy (2026-08-27) were removed
       here — copy shortened same day to "Built for Wedding DJ
       Multi-Ops", which fits on one line at the shared default styling
       (13px, 0.08em letter-spacing, same as desktop) with real margin
       to spare even at 320px. No mobile-specific size/spacing override
       needed for this text. */
  }
  /* Headline font-size (revised 2026-08-27 for the new "Turn More
     Inquiries Into Booked Consultations" copy — supersedes the 35px
     value tuned for the old "The First Reply Is Only the Beginning"
     text, which no longer applies). At 35px the natural wrap put only
     "Turn More Inquiries" on line 1, stranding "Consultations" alone
     on a 3rd line — confirmed directly against the live element
     (Range-based per-character line detection, not a synthetic span)
     at 375/390/430px, all three landing on the same bad 3-line split.
     Tried tightening letter-spacing first (up to -0.03em) instead of
     touching font-size — no measurable effect, the width deficit was
     too large for spacing alone to close. Swept font-size next and
     found 28px is the actual ceiling for a clean natural 2-line wrap
     with no orphan ("Turn More Inquiries Into" / "Booked
     Consultations") at all three required widths — 29px still drops
     "Into" to its own line. This is a bigger cut than prior passes on
     this headline (35→28px) because "Booked Consultations" doesn't
     have a shorter natural break available; flagged here rather than
     silently shipping either the cut or a visible orphan. Desktop's
     own clamp() above is untouched. */
  .hero__headline {
    font-size: 28px;
    line-height: 1.15;
    margin: 0 auto 20px;
  }
  /* Revised 2026-08-25: font-size bumped 17→18px per Craig's 18–19px
     target (19px was tested too, but at every width up to the column's
     own full available width it still comes out to 9–10 wrapped lines —
     taller than the current paragraph, working against the compactness
     goal; 18px is the largest size in range that nets shorter). The
     fixed 300px max-width is removed — Craig's ask for ~28–32px side
     margins would need width capped around 315px, which at 18px still
     doesn't drop a wrapped line (243px tall, taller than today's
     229.5px); only letting the paragraph use the column's full width
     (matching the container's own 14px padding, no extra inset) drops
     it to 8 lines at 375/390px and 7 at 430px — 216px/216px/189px,
     genuinely shorter than today despite the larger font. Measured all
     of this directly (line count + height via Range.getClientRects) at
     all three required widths before choosing this over the literal
     28–32px margin target. Flagged for Craig: the paragraph's own side
     margin is effectively ~14px now (the container's padding alone),
     not 28–32px, because the wider margin and the height-reduction goal
     can't both be satisfied for this specific paragraph length — happy
     to revisit if the margin figure matters more than the line count. */
  .hero__supporting {
    font-size: 18px;
    line-height: 1.5;
    max-width: none;
    text-align: left;
    /* Bottom margin per Craig's explicit 24–28px target for the gap to
       the primary CTA (was 14px) — see .hero__cta-row below for the
       corresponding button-to-button and CTA-to-video adjustments. */
    margin: 0 auto 26px;
  }

  /* Equal-width CTAs (2026-08-14): the gold primary and outlined
     secondary buttons were each sizing to their own text (inline-flex),
     so "See If LeadExcess Fits" ended up visibly narrower than
     "Calculate Your Revenue Opportunity" — Craig wanted both at the
     wider secondary's width. Using an inline-grid with a single
     implicit column rather than a hardcoded pixel width: grid sizes
     that column to the widest item's natural content width (the
     secondary button) and the default `justify-items: stretch`
     stretches every item — including the narrower primary — to fill
     it. Stays correct automatically if either button's copy or font
     size ever changes; no magic number to keep in sync. Height, radius,
     and font-size are unaffected — both buttons already share the same
     .btn base for those. Gap bumped 6px→11px (2026-08-25) per Craig's
     10–12px target between the two buttons. */
  .hero__cta-row {
    display: inline-grid;
    justify-items: stretch;
    gap: 11px;
  }
}

/* ---- Hero video: inline playback (no modal) -------------------------------
   The Hero Overview Video plays inline inside this same fixed-aspect-ratio
   container. See script.js: clicking the trigger swaps the thumbnail image
   + button for a native <video> element in place, so the box never resizes
   and there is no layout shift. Testimonial videos elsewhere may still use
   modal playback later; this treatment is specific to the Hero.

   Large and centered, per the approved centered-Hero direction: a designed
   centerpiece, not a small side element. */

.hero__media {
  position: relative;
  max-width: 960px;
  margin: var(--space-8) auto 0;
  animation: hero-rise-in 700ms ease-out 120ms both;
}

@media (max-width: 768px) {
  .hero__media {
    /* Tightened 2026-08-14, twice same day: first from space-7 (48px)
       to space-6 (32px), then to 24px, then 12px (2026-08-25, -12px,
       within the requested 10–15px reduction) — the video stays exactly
       full size and visually dominant, only the empty gap above it
       shrinks further. Still not compression to force the video above
       the fold — it's fine, and expected, for only the top edge of the
       video to be visible in the initial viewport. */
    margin-top: 12px;
  }
}

/* History: a Hero-only glow/offset-wireframe was removed 2026-08-06 as
   a regression fix, because at the time it appeared to bleed a gold
   line and an amber sunburst across the top of the Hero. The true cause
   (found and fixed 2026-08-08) was unrelated to the Hero entirely: a
   missing position: relative on .proof-card__thumb-wrap let a
   .testimonial-frame::before/::after elsewhere on the page escape to
   the document root and paint over the Hero. With that fixed, Craig
   asked (2026-08-08) for the same .testimonial-frame treatment used on
   Logan/Willie/Featured Client Results to be added back to the Hero —
   see the testimonial-frame class on .hero__media in index.html. */

.video-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--navy-secondary);
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.5), 0 6px 18px -10px rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-standard);
}

/* Subtle hover-zoom (added 2026-08-03, originated on Willie T's card;
   extended to every video thumbnail site-wide, including the Hero,
   same day) — applies to any .video-frame img: Hero, Logan, Willie,
   and any future thumbnail built on this shared component. Only the
   still poster image zooms, never the native <video> once playback
   starts — script.js replaces the img with a <video> element on click
   (see .video-frame video below), so there's nothing left to
   hover-zoom once playing; no extra state handling needed here. The
   Product Demo phone video has its own equivalent rule (see
   .demo-video, further down) since it isn't built on .video-frame. */
.video-frame:hover img {
  transform: scale(1.03);
}

/* Respect prefers-reduced-motion (added 2026-08-06, requested for
   Featured Client Results but applied here at the shared-component
   level so it protects every video thumbnail site-wide): disables the
   zoom entirely rather than just speeding up the transition, since the
   motion itself — not just its duration — is what this setting asks to
   avoid. */
@media (prefers-reduced-motion: reduce) {
  .video-frame img {
    transition: none;
  }
  .video-frame:hover img {
    transform: none;
  }
}

/* Once playback starts, script.js replaces the thumbnail markup with a
   <video> filling the same box. object-fit: contain preserves the video's
   native aspect ratio without cropping or stretching. */
.video-frame video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
}

/* Play control for the approved thumbnail (08_LEADEXCESS_ASSET_MANIFEST.md
   §2): the artwork already has a play icon designed into it, measured at
   ~39.6% from the left / ~53.9% from the top of the image, ~6.2% of the
   image's width in diameter. This element is a transparent hit-area
   aligned exactly to that icon — present for keyboard/screen-reader
   accessibility, not a second visible play button. No fill, no border, no
   icon drawn; only a subtle ring appears on hover/focus. aspect-ratio: 1/1
   keeps it a true circle regardless of the frame's own 16:9 shape;
   clamp() keeps the hit-area at a comfortable touch-target size even when
   the frame is small. */
.video-frame__play {
  position: absolute;
  left: 39.6%;
  top: 53.9%;
  transform: translate(-50%, -50%);
  width: clamp(44px, 6.5%, 90px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  outline-offset: 4px;
  transition: box-shadow var(--transition-fast);
}

/* Mouse hover gets a subtle ring since :hover has no other feedback here;
   keyboard focus uses the site-wide :focus-visible outline (see base
   styles) for consistency with every other interactive element. Ring
   color is #EDAA2C — the exact measured color of the Hero's own baked-in
   play button (confirmed by Craig 2026-08-01), not the --gold token. */
.video-frame__play:hover {
  box-shadow: 0 0 0 6px rgba(237, 170, 44, 0.22);
}

/* ---- Shared visible play-button treatment (site-wide standard, 2026-08-01) --
   For thumbnails with no reliably visible baked-in icon of their own —
   Product Demo and Corey Hommel currently. Same gold ring + gold
   triangle + hover glow language as the Hero's own baked-in icon, but
   drawn as a real, always-visible element. A subtle dark scrim sits
   behind the ring so the control never disappears into a dark part of a
   thumbnail. Color is #EDAA2C throughout — the exact measured color of
   the Hero's own play button, not the --gold token. Each usage adds its
   own position/size on top of this shared class (.demo-video__play,
   .testimonial-card__play). The Hero and Logan Smith both use the
   transparent-hit-area pattern instead (.video-frame__play), since both
   of those thumbnails have their own clearly visible, well-designed
   baked-in icon. */
.video-play {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(12, 20, 36, 0.5);
  border: 2.5px solid #EDAA2C;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  outline-offset: 4px;
  transition: box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.video-play svg {
  margin-left: 3px;
}

.video-play:hover,
.video-play:focus-visible {
  box-shadow: 0 0 0 6px rgba(237, 170, 44, 0.22);
}

/* =========================================================================
   PHASE TWO — CORE CONTENT SECTIONS
   The Conversion Problem, How LeadExcess Works in Real Lead Situations,
   A Proven System With Ongoing Support. Header/Hero unchanged above this
   line. Composition is deliberately varied section to section (typography-
   led left-aligned, layered-dark with asymmetric video pairing, mixed
   two-column) rather than repeating the Hero's centered treatment or a
   generic card grid — see 09_LEADEXCESS_WEBSITE_BRAND_GUIDE.md §2.
   ========================================================================= */

/* Shared eyebrow: gold on dark backgrounds by default; .eyebrow--dark
   swaps to navy text for sufficient contrast on light backgrounds (gold
   text on off-white fails contrast — 09_LEADEXCESS_WEBSITE_BRAND_GUIDE.md
   §14). The small accent line stays gold either way; it's decorative. */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-4);
}

.eyebrow::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  margin-bottom: 14px;
}

.eyebrow--dark {
  color: var(--navy-primary);
}

/* ---- The Conversion Problem -----------------------------------------------
   Rebuilt a third time 2026-08-01: light off-white background, left-
   aligned intro (not centered, unlike the Hero). The story now lives
   inside one large dark "story panel" (.problem__story) so it carries
   real visual weight instead of a small pill-diagram floating in empty
   space, followed by a two-column proof area for Logan's testimonial
   (.problem__proof) instead of a thumbnail dropped in with no context.
   Restrained single-color line icons; no illustration, no photography,
   no AI/robot/futuristic imagery. */

.problem {
  background: var(--bg-offwhite);
  color: var(--text-on-light);
  padding: var(--space-11) 0;
}

@media (max-width: 768px) {
  .problem {
    /* Reduced from space-8 (64px) to space-7 (48px) 2026-08-14 — still a
       generous, existing token for the gap between major sections, just
       not the largest one in the scale.

       Split top/bottom 2026-08-25: top kept at --space-7 (48px,
       unchanged transition from the Hero above), bottom trimmed to 24px
       — Craig asked to reduce the gap between the Logan supporting copy
       and the start of How It Works by 20–30px; 48px→24px is a 24px cut,
       right in that range. */
    padding-top: var(--space-7);
    padding-bottom: 24px;
  }
  /* Mobile-only narrower side padding (2026-08-25), same technique
     already used for .hero .container — gains real width for the
     headline/proof-headline font-size increases below without which
     neither could reach a clean orphan-free wrap at 375px. Scoped to
     this section only; every other section's shared .container padding
     is untouched. */
  .problem .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Widened from 660px (2026-08-24) — that cap was wrapping "Where the
   Conversation Stalls" as "Where the Conversation" / "Stalls", an
   orphaned last word. Measured at ~705px full-width for the current
   46px headline size; 740px gives a small safety margin. .problem__
   supporting keeps its own independent 68ch cap below, so the
   paragraph's readable line-length is unaffected by this change. */
.problem__intro {
  max-width: 740px;
  margin-bottom: var(--space-8);
}

@media (max-width: 768px) {
  .problem__intro {
    margin-bottom: 32px;
  }
}

.problem__headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--size-section-headline);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy-primary);
  margin: 0 0 var(--space-5);
}

.problem__supporting {
  font-size: var(--size-body-lg);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 68ch;
  margin: 0;
}

/* Mobile headline size (revised 2026-08-25, second pass): target is now
   38–42px (down from an earlier 44–48px ask, still not reachable) —
   re-measured directly against the live element (not a synthetic
   offscreen span, which an earlier pass in this same file learned can
   give misleading widths before the webfont paints) at 375/390/430px:
   "Conversation Stalls" fits cleanly through 34px (333px needed vs
   343px available) and breaks into a 3rd line at 35px+. Bumped 33→34px
   accordingly. Still 4–8px short of the 38–42px target — this specific
   phrase has no shorter natural break, so the ceiling is what it is.
   Flagged for review. */
@media (max-width: 768px) {
  .problem__headline {
    font-size: 34px;
    line-height: 1.05;
    margin-bottom: 18px;
  }
  .problem__supporting {
    /* 18–19px target: already 18px via the shared --size-body-lg mobile
       token (unchanged); only line-height is tightened here, from 1.65
       to 1.5, within Craig's 1.45–1.55 target. Scoped to this element,
       not the shared token, so no other section's body copy is
       affected. */
    line-height: 1.5;
  }
}

/* ---- Act 1: the story panel ----
   One large dark panel carries the whole "New Inquiry → First Message
   Sent → Lead Replies" progress row, a visual break, then the section's
   real focal point ("Now It's Back on Your Team.") as the largest, most
   emphasized text in the section, a small waiting visual, and one
   closing payoff line. Same layered-navy depth language used in the
   Hero/Works sections, so this reads as an intentional "scene" rather
   than a bordered diagram box. */

.problem__story {
  position: relative;
  overflow: hidden;
  background: var(--navy-primary);
  border-radius: var(--radius-media);
  padding: var(--space-8);
  margin-bottom: var(--space-9);
  box-shadow: 0 30px 60px -30px rgba(12, 20, 36, 0.45);
}

.problem__story::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 460px at -6% -18%, rgba(23, 34, 56, 0.9), transparent 55%),
    radial-gradient(620px 420px at 106% 112%, rgba(255, 186, 66, 0.05), transparent 55%);
  pointer-events: none;
}

.problem__story > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .problem__story {
    /* Tightened 2026-08-14 (top/bottom only) as part of the Conversion
       Gap mobile shrink — see the consolidated ~700px block below for
       the rest (icons, connectors, internal gaps).

       Bottom trimmed further 2026-08-25 (32px→16px) — Craig specifically
       called out unnecessary bottom padding after the orange closing
       statement ("The conversation is active..."); top stays at 32px,
       unchanged. Part of an overall ~15% height reduction for the whole
       diagram — see the ~700px block below for the rest. */
    padding: var(--space-6) var(--space-5) 16px;
    margin-bottom: var(--space-7);
  }
}

/* Stage row: smooth, working progress — connected by a solid gold line.
   Refined 2026-08-01 (third pass): icon/label sized up again so the
   three stages are unmistakable at normal viewing size, not just on
   close inspection. Panel padding and later spacing were trimmed to
   compensate, so the card doesn't grow substantially taller overall. */
.story-stages {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  max-width: 860px;
  margin: 0 auto;
}

.story-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 190px;
  flex-shrink: 0;
}

.story-stage__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 186, 66, 0.16);
  border: 1.75px solid rgba(255, 186, 66, 0.55);
  color: var(--gold);
  margin-bottom: var(--space-3);
}

.story-stage__label {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--white);
  margin: 0;
}

.story-stages__line {
  flex: 1;
  min-width: 24px;
  height: 3px;
  margin-top: 33px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 186, 66, 0.7), rgba(255, 186, 66, 0.35));
}

/* The transition: the strongest connector in the graphic, deliberately
   vertical (not a horizontal fade) so the eye reads "Lead Replies" then
   follows straight down into the pivot headline — the most important
   relationship in the whole visual, per Craig's direction. */
.story-break {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: var(--space-6) 0;
}

.story-break__line {
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg, rgba(255, 186, 66, 0.7), rgba(255, 186, 66, 0.2));
}

.story-break__icon {
  display: flex;
  color: var(--gold);
}

.story-pivot {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

.story-pivot__headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 var(--space-4);
}

.story-pivot__headline span {
  color: var(--gold);
}

.story-pivot__sub {
  font-size: var(--size-body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  max-width: 48ch;
  margin: 0 auto;
}

/* Waiting visual: a clock plus a handful of quiet context labels — thin
   outline only, not cards, so it stays secondary. Contrast/size bumped
   2026-08-01 (third pass) since the previous version read as too faint. */
.story-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-7) auto 0;
}

.story-wait__icon {
  display: flex;
  color: rgba(255, 255, 255, 0.65);
}

.story-wait__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.story-wait__tags li {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 6px 14px;
}

.story-payoff {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.4;
  color: var(--gold);
  text-align: center;
  max-width: 480px;
  margin: var(--space-7) auto 0;
}

/* Conversion Gap mobile shrink (2026-08-14): same story, same elements,
   ~25–30% shorter overall — smaller icon circles, tighter gaps between
   the three opening stages, a shorter connector, and trimmed margins
   around the pivot/wait/payoff moments. Nothing removed, no font sizes
   changed here (only .problem__story's own top/bottom padding above
   touches spacing outside this block) — desktop (>700px) is completely
   unaffected. */
@media (max-width: 700px) {
  /* Diagram compressed ~15% (2026-08-25) — same elements, same copy,
     tighter throughout: smaller icon circles, a shorter gap between the
     three opening stages, a shorter connector into the pivot headline,
     and trimmed margins around the wait/payoff moments. Verified the
     overall .problem__story height drops by roughly this amount at
     375/390/430px without any element overlapping or text clipping. */
  .story-stages {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .story-stage {
    width: 100%;
    max-width: 260px;
  }
  .story-stage__icon {
    width: 46px;
    height: 46px;
    margin-bottom: 6px;
  }
  .story-stages__line {
    width: 2px;
    height: 12px;
    min-width: 0;
    margin: 0;
  }
  .story-break {
    margin: 12px 0;
  }
  .story-break__line {
    height: 16px;
  }
  .story-wait {
    margin-top: 20px;
  }
  .story-payoff {
    margin-top: 20px;
  }
}

/* ---- Act 2: Logan Smith proof ---- */

/* 60/40 (was 55/45, 2026-08-01): Logan's thumbnail carries more visual
   weight — meaningful proof, not a small supporting image — while the
   text column stays readable. This ratio governs the POSTER's width;
   the playing state caps and centers itself narrower within it (below),
   so the wide ratio doesn't force an oversized portrait player. */
.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  gap: var(--space-8);
  align-items: center;
}

@media (max-width: 860px) {
  .proof-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 768px) {
  .proof-grid {
    /* Tighter than the 860px value above once we're fully into phone
       widths — less empty space between Logan's thumbnail and the
       headline beneath it. */
    gap: 20px;
  }
}

.problem__proof-visual {
  min-width: 0;
}

.problem__proof-media {
  position: relative;
  margin: 0;
}

/* ---- Shared testimonial-video component (2026-08-03) ---------------------
   .testimonial-frame is the single source of truth for the decorative
   offset frame around any testimonial/proof video thumbnail — originally
   built for Logan Smith (editorial media-frame, 2026-08-01: a soft
   ambient glow ::before plus an offset gold-tinted outline ::after,
   borrowing the Hero's own visual language without copying it
   mechanically or building a device mockup). Willie T's testimonial
   (Support section) now shares this exact class instead of maintaining
   its own duplicate copy, so both — and any future testimonial video —
   inherit the same frame automatically rather than risking drift.
   Applied alongside each instance's own semantic wrapper class
   (.problem__proof-media, .testimonial-card__thumb-wrap), which still
   carries its own layout-specific rules (e.g. Logan's :has() portrait-
   playback sizing below). The inner box in every case is the shared
   .video-frame component — including its hover-zoom, which lives with
   .video-frame itself (near the top of this file) since it now applies
   site-wide, not just to testimonials. */
.testimonial-frame::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: 0;
  border-radius: 22px;
  background:
    radial-gradient(60% 60% at 22% 15%, rgba(255, 186, 66, 0.1), transparent 65%),
    radial-gradient(60% 60% at 82% 92%, rgba(23, 34, 56, 0.45), transparent 65%);
  filter: blur(14px);
  pointer-events: none;
}

.testimonial-frame::after {
  content: "";
  position: absolute;
  top: 12px;
  left: -12px;
  right: 12px;
  bottom: -12px;
  z-index: 0;
  border: 1.5px solid rgba(255, 186, 66, 0.32);
  border-radius: var(--radius-media);
  pointer-events: none;
}

/* Logan's approved thumbnail is a fully composited frame (08_LEADEXCESS_
   ASSET_MANIFEST.md) with a properly designed gold ring + gold triangle
   play icon already painted into the artwork. Re-measured 2026-08-02
   after the thumbnail image was swapped for a new asset — the icon
   moved to ~43.5% / ~51.1%, ~6.2% of the image's width in diameter (a
   near-perfect circle; measured by isolating the ring's pixels from the
   diagonal gold divider line that crosses the same area). This
   overrides only position/size on the shared .video-frame__play base
   (transparent hit-area, hover ring only, no drawn icon — same as the
   Hero). */
.problem__proof-play {
  left: 43.5%;
  top: 51.1%;
  width: clamp(44px, 6.2%, 100px);
}

/* Portrait playback: the poster stays the approved 16:9 composited image
   (unchanged), but the source footage is native portrait (1080×1920,
   confirmed no baked-in black bars — they were pillarboxing from the
   16:9 box). While playing, the WRAPPER (not just the inner frame) caps
   and centers to a narrower width — reduced ~12% (2026-08-01, was
   380px max) so the player doesn't dominate the copy column — and the
   frame itself switches to 9:16 so the footage fills it exactly, full-
   bleed, with no bars, no crop, no stretch. Reverts to the 16:9 poster
   on `ended`. */
.problem__proof-media:has(.video-frame.is-playing) {
  max-width: clamp(230px, 23vw, 335px);
  margin: 0 auto;
}

.problem__proof-media .video-frame.is-playing {
  aspect-ratio: 9 / 16;
}

.proof-text h3 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  color: var(--navy-primary);
  margin: 0 0 var(--space-3);
}

@media (max-width: 768px) {
  /* A deliberate secondary-proof-headline size, distinct from a full
     section H1 — this class is shared by both Logan's headline and
     Willie's testimonial headline (Support section), so Craig's "make
     Willie match the corrected Logan treatment" request is satisfied
     automatically by tuning it once here — no separate per-section
     scoping needed, since he explicitly offered that as the target
     ("~30–32px, or whatever visually matches the corrected Logan
     treatment").

     Reduced 34px→28px→27px→25px 2026-08-25 (fourth pass): Craig asked
     for a further ~8–10% cut from 27px so Logan reads more clearly as
     proof content, not another section headline, while keeping the
     same natural 3-line wrap ("Logan had the leads. The" / "gap was
     getting them to" / "the consultation."). 25px is a 7.4% cut (24px
     would be 11.1%, slightly further from the requested range) and
     stays clean — 3 lines, no orphan — at all three required widths;
     confirmed directly against the live element with fresh page loads
     between each size tested (an earlier pass in this project found
     that repeated live style mutations in one tab without reloading
     can leave stale state behind and produce false readings, so this
     one was double-checked deliberately).

     Willie's own much shorter quote ("He's in the trenches with us.")
     stays a clean 2-line wrap at 25px at 375px and 390px, matching
     Craig's "keep it a strong 2-line pull quote" preference. At 430px
     specifically it now fits on a single line — not an orphan or a
     defect, just enough width at that size for the whole quote to sit
     on one line; flagged for awareness since the ask was 2 lines "if
     possible," and at the widest tested width it wasn't. */
  .proof-text h3 {
    font-size: 25px;
    line-height: 1.2;
  }
}

.proof-text p:not(.eyebrow) {
  font-size: var(--size-body-lg);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* ---- How LeadExcess Works in Real Lead Situations -------------------------
   Dark navy, continuing the Hero's layered-depth language (so the brand's
   "signature" dark treatment reappears, but the composition itself is
   different: steps row + asymmetric video pairing in Part One, two-column
   situation/response rows + a tinted callout in Part Two — not a repeat
   of the Hero's centered stack). Longest section on the page; generous
   spacing keeps the two parts from blurring together without a hard
   divider line. */

.works {
  position: relative;
  overflow: hidden;
  background: var(--navy-primary);
  color: var(--white);
  /* Reduced from --space-11 (120px) 2026-08-25 — with the phone mockup
     shrunk ~20% (see .works__panel-media), the old outer padding left
     too much empty space above/below a now-more-compact panel. --space-9
     keeps comfortable breathing room without the section reading
     oversized relative to its content. */
  padding: var(--space-9) 0;
}

@media (max-width: 768px) {
  .works {
    /* Reduced from --space-7 (48px) 2026-08-25, same reasoning as the
       desktop value above — was already reduced once before, from
       --space-8 (64px) on 2026-08-14. */
    padding: var(--space-6) 0;
  }
  /* Mobile-only narrower side padding, How It Works only (2026-08-25) —
     same technique as .hero .container / .problem .container, scoped
     via the section id (not the shared .works class, which the
     Different Leads section below also uses via .works--situations) so
     that other section is completely unaffected. Gains the width the
     headline fix below needs; without it, no font-size in range avoids
     an orphan at 375px. */
  #how-it-works .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.works::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at -8% -12%, rgba(23, 34, 56, 0.85), transparent 55%),
    radial-gradient(760px 540px at 108% 38%, rgba(255, 186, 66, 0.045), transparent 55%),
    radial-gradient(900px 680px at 46% 118%, rgba(23, 34, 56, 0.9), transparent 55%);
  pointer-events: none;
}

.works > .container {
  position: relative;
  z-index: 1;
}

.works__headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--size-section-headline);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 var(--space-5);
  max-width: 780px;
}

/* How It Works headline only (2026-08-24): the shared 780px base above
   was wrapping "Watch LeadExcess Handle a New Inquiry" as "...a New" /
   "Inquiry" — an orphaned last word. Scoped to this section (not
   .works--situations, which needs a much wider cap for its own 1-line
   headline below) at 550px: measured "Watch LeadExcess" at ~432px and
   "Handle a New Inquiry" (the desired second line) at ~497px — both
   fit under 550px — while "Watch LeadExcess Handle" measures ~608px,
   so it can't join the first line. Forces the balanced break Craig
   asked for without touching font-size. */
#how-it-works .works__headline {
  max-width: 550px;
}

.works__supporting {
  font-size: var(--size-body-lg);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 68ch;
  margin: 0 0 var(--space-5);
}

/* Restored to a normal gap (2026-08-02) now that the demo panel below
   has its own visual boundary (background/border/shadow) — it no longer
   needs an artificially tight margin to read as connected to the intro
   above it. */
.works__supporting--overview {
  margin-bottom: var(--space-7);
}

/* Headline given its own wider cap (2026-08-24, split from the shared
   920px rule below) so "Different Leads Need Different Responses" fits
   on one line at large desktop widths — measured at ~974px full-width
   for the current 46px size, so 1020px gives a safety margin without
   approaching the section's ~1132px inner container width. Supporting
   copy is intentionally NOT widened — it stays at 920px, its original
   value, so this is a headline-only change. */
/* Section-transition treatment (added 2026-08-24): How It Works and
   Different Leads both sit on dark navy with no divider between them,
   so the boundary was invisible — the two sections ran together as one
   long block.

   First attempt was a flat background swap to --navy-secondary for the
   whole section, but that broke something: .scenario-container already
   uses --navy-secondary as its own "lighter card floating on the
   section" background (see its rule below) — recoloring the section to
   match it flattened that contrast, so the card lost its definition.
   Fixed by scoping the tone shift to a bounded band at the very top of
   the section instead of the whole background: a ::after gradient
   layer (kept separate from the existing .works::before radial-
   vignette layer, which still applies here unchanged) fades from
   --navy-secondary down to transparent over 240px — comfortably inside
   the ~337-465px gap measured (desktop/mobile) before
   .scenario-container begins, so the card always lands back on plain
   --navy-primary, completely unaffected. A hairline top border
   (rgba(255,255,255,0.08), the same tone already used for card edges
   like .works__panel) marks the exact boundary. No new color, no
   graphic separator. */
.works.works--situations {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.works.works--situations::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 240px;
  background: linear-gradient(180deg, var(--navy-secondary) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.works--situations .works__headline {
  max-width: 1020px;
}

.works--situations .works__supporting {
  max-width: 920px;
}

/* Proof/credential line (added 2026-08-26) — a compact statement, not a
   paragraph: label-weight text distinct from .works__supporting's
   regular-weight body copy, plus a short gold rule as the "accent"
   called for instead of an icon (this section has no existing icon
   pattern to match). Sits between the section description and the
   explorer, per Craig's placement spec. */
.scenario-proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 920px;
  margin: 0 0 var(--space-6);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-body-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.scenario-proof__rule {
  flex: none;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

@media (max-width: 768px) {
  .scenario-proof {
    /* Text wraps to 2 lines at mobile widths — align the rule with the
       first line's cap-height instead of the full (2-line) block, so it
       doesn't look like it's centered on empty space. */
    align-items: flex-start;
    margin-bottom: var(--space-5);
  }
  .scenario-proof__rule {
    margin-top: 9px;
  }
}

@media (max-width: 768px) {
  .works__headline {
    margin-bottom: 18px;
  }
  .works__supporting {
    margin-bottom: 18px;
  }
  /* Tightened 2026-08-14 from space-7 (48px) — less empty space between
     the intro paragraph and the demo panel below it. */
  .works__supporting--overview {
    margin-bottom: var(--space-6);
  }

  /* How It Works headline size (revised 2026-08-25, second pass): the
     "major section headline" tier target is now 38–42px (down from an
     earlier 42–46px ask, still not reachable). Re-measured against the
     live element: "Handle a New Inquiry" needs 341px at 31px, against
     343px available at 375px — a thin but real 2px margin, confirmed
     stable via direct line-count testing at 375/390/430px, so bumped
     30px→31px. Still nowhere close to 38px (needs ~410px at 375px
     width). This headline is capped harder than most others in this
     pass because "Handle a New Inquiry" has no good internal break
     point short enough to fit a phone width at that size. Flagged. */
  #how-it-works .works__headline {
    font-size: 31px;
    line-height: 1.1;
  }
  /* 18–19px target: already 18px via the shared --size-body-lg mobile
     token; only line-height tightened here (1.65→1.5), scoped to this
     section only so Different Leads' own supporting copy (which shares
     the .works__supporting class) is unaffected. */
  #how-it-works .works__supporting {
    line-height: 1.5;
  }

  /* Mobile-only narrower side padding, Different Leads only (2026-08-25)
     — same technique as #how-it-works .container above, scoped via the
     .works--situations modifier (not the bare .works class, which How
     It Works also uses) so that section is unaffected. */
  .works--situations .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Different Leads headline size (2026-08-25): target was 38–42px;
     measured directly that "Different Leads Need" (the wider of the two
     desired lines) needs ~362px at 34px against 343px available at
     375px — not reachable at anywhere near that size. 31px is the
     largest value with a real safety margin at all three required
     widths. Paired with an explicit <br class="break-mobile"> (same
     technique as How It Works) so "Different Leads Need" / "Different
     Responses" is guaranteed rather than left to natural wrap, which
     otherwise breaks it into 3 lines. Flagged — 7–11px short of the
     38–42px target. */
  .works--situations .works__headline {
    font-size: 31px;
    line-height: 1.1;
  }
  .works--situations .works__supporting {
    line-height: 1.5;
  }
}

/* ---- One demo panel (rebuilt 2026-08-02, fifth pass) ---------------------
   Replaces the earlier two-column "mechanism points beside the demo"
   pairing — the tall vertical video acted as its own standalone column
   there, forcing the section taller than it needed to be and leaving
   dead space under the shorter copy column. Simplified to three
   hierarchy levels: section intro → this one contained panel → video.
   The panel is a single visual component (subtly lighter navy than the
   section background, hairline border, soft shadow), not two
   independent columns floating on the page. Inside it, a ~60/40 split:
   left side is one short intro plus three single-line points (no
   feature-card paragraphs — the video demonstrates them); right side
   centers the video, deliberately compact so it doesn't force the
   panel's height. */
.works__panel {
  display: grid;
  grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
  /* Tightened from var(--space-7) (2026-08-24) to bring the video column
     slightly closer to the copy column — less dead space between the
     two sides of the composition. */
  gap: var(--space-6);
  align-items: center;
  /* Craig's specified value (2026-08-02) — deliberately a one-off, not
     var(--navy-secondary) (#172238), since that token also drives the
     Hero gradient and the Logan/Corey video-frame backgrounds; this
     panel's background shouldn't move those. */
  background: #161d2d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-media);
  /* Asymmetric padding (2026-08-24): vertical tightened further (32→24px)
     to remove more of the unused empty space around the now-shorter copy
     column. Left kept deliberately generous (64px, Craig's "strong
     premium left padding, roughly 60–80px") while right is reduced
     (32px) alongside the smaller gap above, both pulling the video
     column closer to the text. */
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-8);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}

/* The translateY(-48px) nudge that used to live here (added 2026-08-24)
   compensated for the copy column looking small/isolated against a
   much taller phone mockup. Removed 2026-08-25 when the phone shrank
   ~20% (see .works__panel-media): the height gap between the two
   columns is now much smaller, and Craig asked for the phone to be
   vertically centered against the complete copy block rather than
   offset from it — plain grid align-items:center on .works__panel
   (above) already does exactly that with no extra transform needed. */

@media (max-width: 860px) {
  .works__panel {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding: var(--space-5);
  }
}

@media (max-width: 768px) {
  .works__panel {
    /* Tighter than the 860px value above at full phone widths. */
    padding: 18px var(--space-5);
  }
}

.works__panel-copy {
  max-width: 460px;
}

@media (max-width: 860px) {
  .works__panel-copy {
    max-width: none;
  }
}

.works__panel-copy .eyebrow {
  margin-bottom: var(--space-3);
}

.works__panel-headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
  color: var(--white);
  margin: 0 0 var(--space-3);
}

.works__panel-support {
  font-size: var(--size-body-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 var(--space-5);
}

@media (max-width: 768px) {
  .works__panel-headline {
    /* Video/demo subheadline range (2026-08-14), same category as
       Logan's proof headline — secondary, not a full section H2. */
    font-size: 30px;
    line-height: 1.2;
  }
  .works__panel-support {
    margin-bottom: 18px;
  }
}

/* Three single-line points, not feature cards — a small gold dash marker
   (echoing the eyebrow's own accent line) instead of an icon, per the
   page's no-icon visual system. */
.works__panel-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (max-width: 768px) {
  /* Modest bullet-spacing tighten (2026-08-25) — a small contributor to
     keeping the demo card scannable and not excessively tall on phone
     widths, alongside the headline/eyebrow fixes above. */
  .works__panel-points {
    gap: var(--space-2);
  }
}

.works__panel-points li {
  position: relative;
  padding-left: 22px;
  font-size: var(--size-body-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.works__panel-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--gold);
}

/* Sized/centered here (not on .demo-video itself) so the offset frame
   below can be sized off this wrapper's own box, which now matches the
   video exactly — .demo-video no longer carries its own max-width. */
.works__panel-media {
  position: relative;
  width: 100%;
  /* Bumped modestly (2026-08-24, from clamp(210px,17vw,248px)) — with the
     copy column now shorter (no repeated eyebrow/headline inside the
     card), a slightly larger video reads as a better left/right balance
     without becoming its own oversized column again (see the note on
     .demo-video__el below for why this stayed restrained previously).

     Reduced ~20% (2026-08-25) — the white phone mockup at its previous
     size was disproportionately large next to the shortened copy
     column, leaving unbalanced empty space and inflating the section's
     height. clamp(230px,19vw,280px) × 0.8 ≈ clamp(184px,15.2vw,224px).
     Every fixed-px dimension on .phone-shell/.demo-video and its
     decorative chrome (buttons, notch, home indicator, play button,
     progress bar) below is scaled by the same ×0.8 factor, so the
     device keeps exactly the same proportions, just smaller — nothing
     about the video's own crop/aspect-ratio changes, since that's set
     entirely by object-fit/aspect-ratio (resolution-independent). */
  max-width: clamp(184px, 15.2vw, 224px);
  margin: 0 auto;
}

/* Restrained gold offset-frame (added 2026-08-02) — the same visual
   language as Logan's testimonial video (.problem__proof-media::before/
   ::after), scaled down to this video's much smaller footprint so it
   reads as a light accent, not a border: soft ambient glow behind, plus
   a thin offset gold-tinted outline. Gives playable media a consistent
   visual system across the site without adding a heavier device shell
   around the phone footage itself. */
.works__panel-media::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: 0;
  border-radius: 14px;
  background:
    radial-gradient(60% 60% at 22% 15%, rgba(255, 186, 66, 0.1), transparent 65%),
    radial-gradient(60% 60% at 82% 92%, rgba(23, 34, 56, 0.45), transparent 65%);
  filter: blur(10px);
  pointer-events: none;
}

.works__panel-media::after {
  content: "";
  position: absolute;
  top: 6px;
  left: -6px;
  right: 6px;
  bottom: -6px;
  z-index: 0;
  border: 1px solid rgba(255, 186, 66, 0.28);
  border-radius: 12px;
  pointer-events: none;
}

/* ---- Product Demo inline video --------------------------------------------
   Redesigned 2026-08-01: the video in place at the time already showed a
   phone on screen as part of its own footage, so a CSS-drawn phone shell
   around it was redundant and read as "a phone inside another phone" —
   removed at that time.

   Reintroduced 2026-08-25: the video was swapped for a new asset
   (6a8ce354457070287645d7d0.mp4) that is a flat 9:16 screen recording
   with no device frame or black margin baked in (confirmed by sampling
   frames directly — content fills its full 1080×1920 canvas edge to
   edge), unlike the previous file. Without a shell, this footage no
   longer reads as "playing on a phone." .phone-shell below adds a
   restrained CSS bezel (dark frame, top notch pill, bottom home
   indicator) around .demo-video to restore that read. The old
   aspect-ratio:12/25 crop + scale(1.04) on this block existed only to
   trim the previous video's own ~7.4% baked-in dead margin — since the
   new video has no dead margin, that crop is removed; the video now
   plays at its true intrinsic 9:16 ratio with nothing trimmed. */
/* Revised 2026-08-25 (second pass, same day): rebuilt white/light per
   Craig's explicit direction — the dark bezel above blended into the
   section's own dark background and, combined with the video's literal
   website content, read as "a dark screenshot in a frame" rather than
   "a clean phone with video playing." A light body separates clearly
   from the section background and reads as a real device, not a
   screenshot mockup. */
.phone-shell {
  position: relative;
  z-index: 1;
  background: linear-gradient(165deg, #ffffff, #e7e9ee);
  border-radius: 26px;
  padding: 10px 6px;
  box-shadow:
    0 24px 43px -16px rgba(6, 10, 20, 0.55),
    0 2px 0 0 rgba(255, 255, 255, 0.5) inset,
    0 0 0 1px rgba(15, 23, 42, 0.06);
}

/* Small side controls (mute switch, volume rocker, power button) — the
   detail that reads as "an actual smartphone" rather than a generic
   rounded rectangle. Purely decorative (aria-hidden), positioned just
   outside the body edge the way real device buttons sit proud of the
   frame. */
.phone-shell__btn {
  position: absolute;
  background: linear-gradient(90deg, #d7dae0, #eceef2);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
  z-index: 0;
}

.phone-shell__btn--mute {
  left: -2px;
  top: 17%;
  width: 2px;
  height: 18px;
  border-radius: 2px 0 0 2px;
}

.phone-shell__btn--vol-up {
  left: -2px;
  top: 25%;
  width: 2px;
  height: 27px;
  border-radius: 2px 0 0 2px;
}

.phone-shell__btn--vol-down {
  left: -2px;
  top: 34%;
  width: 2px;
  height: 27px;
  border-radius: 2px 0 0 2px;
}

.phone-shell__btn--power {
  right: -2px;
  top: 24%;
  width: 2px;
  height: 37px;
  border-radius: 0 2px 2px 0;
}

.phone-shell::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 6px;
  background: #14161c;
  border-radius: 4px;
  z-index: 3;
}

.phone-shell::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 3px;
  background: rgba(20, 22, 28, 0.5);
  border-radius: 2px;
  z-index: 3;
}

/* Sized to land at ~450–525px tall on desktop (2026-08-02) — sizing now
   lives on the parent .works__panel-media (see above) so the gold
   offset frame can be measured off the same box; .phone-shell/.demo-video
   just fill it at width:100%. Deliberately well short of the panel's
   own height: the demo has its own voiceover carrying the explanation,
   so the interface inside it doesn't need to be enlarged enough to
   read every line of on-screen text. (Previously grew across three
   passes — clamp(240px,22vw,320px) → clamp(280px,27vw,380px) →
   clamp(340px,33vw,460px) — chasing "main event" visual weight, which
   made the video its own oversized column instead of one part of a
   contained panel.)

   Revised 2026-08-25: aspect-ratio changed from the previous video's
   crop ratio (12/25, tuned to trim that file's baked-in dead margin) to
   9/16 — the new video's true intrinsic ratio, confirmed by sampling
   frames directly (1080×1920, content fills edge to edge, no dead
   margin to trim). object-fit:cover is kept only as a safety net for
   any future asset swap; at a matching aspect-ratio it crops nothing.

   Revised again 2026-08-25 (white-phone pass): added a 4px near-black
   border — real "white" phones still have a black screen/cover-glass
   edge, not a white one, and without it the video would read as a
   photo pasted onto a white card rather than an actual phone display.
   The notch and home indicator (.phone-shell::before/::after) sit on
   top of this rim, not on the video content itself.

   Revised again 2026-08-25 (navy-padding crop pass): the source video
   has a dark navy pillarbox baked into its pixels — measured directly
   by sampling pixel rows/columns across 12 timestamps spanning the
   full ~93s duration (script + full readout kept for reference): a
   consistent 97px navy bar (rgb(23,29,45), 9.0% of the 1080px width)
   on both the left and right edges, at every timestamp checked, with
   top/bottom margins negligible (~0.1%/0%). The useful content is the
   center 886×1920 region. aspect-ratio below is set to that exact
   measured region (886/1920) instead of the video's own full-frame
   9/16 — at that ratio, object-fit:cover on a 1080×1920 source scales
   the video to match the container's height with zero slack, and its
   only overflow (194px total) is exactly the two 97px navy bars, which
   land outside the container and get clipped by overflow:hidden. No
   manual transform/scale was needed — the aspect-ratio change alone
   crops precisely to the measured content region, with nothing else
   trimmed. This makes the phone screen itself taller relative to its
   width (screen width is unchanged; only the phone's height grows to
   fit the new ratio without stretching the video) — close to a real
   modern iPhone's own ~19.5:9 screen proportions, not an arbitrary
   number. */
.demo-video {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 886 / 1920;
  overflow: hidden;
  border-radius: 14px;
  border: 3px solid #14161c;
}

/* No background fill on the video element itself — the phone-shell
   bezel around it (see above) is the device frame now; this box just
   clips the video to its rounded corners. Revised 2026-08-25: the
   permanent scale(1.04) crop existed only to trim the previous video's
   baked-in dead margin — removed, since the current video has none and
   that scale would otherwise crop real content. Hover zoom kept at the
   same ×1.03 used by every other video thumbnail site-wide, no longer
   composed on top of a permanent crop-scale. */
.demo-video__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-standard);
}

.demo-video:not(.is-playing):hover .demo-video__el {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .demo-video:not(.is-playing):hover .demo-video__el {
    transform: none;
  }
}

/* Permanent dark scrim over the paused thumbnail (added 2026-08-25,
   white-phone pass) — the video's own content is a bright website
   recording; without dimming it, fine details like the address-bar
   text stayed legible enough to read as "a webpage" rather than "a
   video." The scrim also gives the gold play button somewhere to pop
   against regardless of what's underneath. Fades out with the play
   button once playback starts. */
.demo-video__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 12, 22, 0.32), rgba(8, 12, 22, 0.14) 45%, rgba(8, 12, 22, 0.4));
  transition: opacity var(--transition-standard);
  pointer-events: none;
}

/* Fake progress bar (added 2026-08-25) — the single clearest "this is
   a video, not a screenshot" cue: a paused scrubber with an
   already-elapsed segment, the same way a video-sharing site's preview
   thumbnail looks. Purely decorative — the real <video> uses native
   controls once playing, this just sells the paused-preview state. */
.demo-video__progress {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  transition: opacity var(--transition-standard);
}

.demo-video__progress-fill {
  display: block;
  width: 28%;
  height: 100%;
  border-radius: 2px;
  background: #EDAA2C;
}

/* Position/size from the shared .video-play class (gold ring, gold
   triangle, dark scrim, hover glow), with a bolder ring/fill/triangle
   override (2026-08-02) so this button reads closer to Logan's own
   baked-in icon — thicker stroke, more opaque scrim, larger triangle —
   per Craig's reference screenshot. Scoped to this instance only; Corey
   Hommel keeps the original shared proportions. */
.demo-video__play {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  aspect-ratio: 1 / 1;
  border-width: 3px;
  background: rgba(12, 20, 36, 0.72);
  z-index: 2;
}

.demo-video__play svg {
  width: 18px;
  height: 18px;
}

/* While playing, the play control, scrim, and fake progress bar all
   fade out together (native <video controls> take over — real pause/
   resume, real progress) and return once the frame resets to the
   poster state on `ended`. */
.demo-video.is-playing .demo-video__play,
.demo-video.is-playing .demo-video__scrim,
.demo-video.is-playing .demo-video__progress {
  opacity: 0;
  pointer-events: none;
}

.demo-video.is-playing .demo-video__el {
  cursor: default;
}

/* ---- Scenario explorer, Part Two (rebuilt 2026-08-02) --------------------
   Replaces the horizontal filter-pill row + large paragraph panel, which
   read as a generic software widget rather than a premium, editorial
   part of the page. Now one contained, bordered component
   (.scenario-container) — a vertical text list (not pills) on the left,
   a single structured panel (situation → quote → explanation → why it
   matters) on the right. Uses --navy-secondary (not the literal #161d2d
   used one section up in the How It Works demo panel) so the two
   containers read as the same visual system without looking like a
   repeated component. */
.scenario-explorer {
  margin-bottom: 0;
}

/* ---- Custom mobile scenario dropdown (2026-08-06) -------------------------
   Replaces the native <select>, which rendered the browser's own gray/
   blue system menu and broke the premium visual system on mobile. Fully
   custom listbox, in-page, matching the same navy/gold language as the
   rest of the component. Hidden on desktop (shown only <=760px, see the
   media query below); .scenario-list is the desktop-only equivalent. */
.scenario-dropdown {
  position: relative;
  display: none;
  margin-bottom: var(--space-5);
}

.scenario-dropdown__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 54px;
  padding: 0 var(--space-5);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-body);
  color: var(--white);
  background: var(--navy-secondary);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  cursor: pointer;
}

.scenario-dropdown__trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.scenario-dropdown__chevron {
  flex: none;
  color: var(--gold);
  transition: transform var(--transition-fast);
}

.scenario-dropdown__trigger[aria-expanded="true"] .scenario-dropdown__chevron {
  transform: rotate(180deg);
}

/* Positioned absolute + z-index above the sticky header (z-index: 40)
   so the open menu never renders behind it, regardless of scroll
   position when it's opened. */
.scenario-dropdown__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 50;
  margin: 0;
  padding: var(--space-2) 0;
  list-style: none;
  background: var(--navy-primary);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 13px;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.55);
  max-height: 320px;
  overflow-y: auto;
}

.scenario-dropdown__option {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: var(--space-2) var(--space-5);
  border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-body-sm);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

.scenario-dropdown__option:last-child {
  border-bottom: none;
}

.scenario-dropdown__option:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
}

.scenario-dropdown__option:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* Same active-state language as the desktop .scenario-item — gold left
   edge, gold-tinted background, gold text — so mobile and desktop read
   as the same component. */
.scenario-dropdown__option[aria-selected="true"] {
  color: var(--gold);
  border-left-color: var(--gold);
  background: rgba(255, 186, 66, 0.06);
}

.scenario-container {
  display: grid;
  grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
  background: var(--navy-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-media);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

/* Editorial list, not filter pills: plain text rows, thin gold left-rule
   marks the active item instead of a filled pill background. Darkened
   2026-08-26 (rgba(255,255,255,0.02) -> a black wash instead) so the
   rail reads as visually recessed relative to the lighter panel beside
   it (below) — a "quiet list, lit content" cue that makes the active
   panel feel like the section's focal point without adding any new
   graphic element. */
.scenario-list {
  display: flex;
  flex-direction: column;
  padding: var(--space-5) 0;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
}

.scenario-item {
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  margin: 0;
  padding: var(--space-3) var(--space-5) var(--space-3) calc(var(--space-5) - 2px);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-body-sm);
  line-height: 1.4;
  /* Dimmed 0.6 -> 0.45 (2026-08-26) so inactive tabs sit clearly behind
     the gold active tab instead of competing with it at similar
     brightness. */
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.scenario-item:hover {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.03);
}

.scenario-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

/* Strengthened 2026-08-26: heavier weight and a stronger background
   tint (0.06 -> 0.1) widen the gap against the now-dimmer inactive
   state above. Border-left width is intentionally left at 2px (matching
   the transparent border on inactive items) so activating a tab never
   shifts its own text horizontally. */
.scenario-item[aria-selected="true"] {
  color: var(--gold);
  font-weight: 700;
  border-left-color: var(--gold);
  background: rgba(255, 186, 66, 0.1);
}

/* Very slight background lift (2026-08-26) vs. the list rail's darker
   wash above — reinforces the panel as the "lit," focal side of the
   component. Subtle enough to read as depth, not a second card inside
   the container. */
.scenario-panel {
  padding: var(--space-7);
  background: rgba(255, 255, 255, 0.015);
  transition: opacity 150ms ease;
}

.scenario-panel.is-updating {
  opacity: 0;
}

.scenario-panel__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-4);
}

/* The lead's own words, set apart as a pull-quote (large gold quote
   mark + larger headline-weight type) rather than a chat-bubble
   graphic — reads as editorial, not a UI mockup.

   Revised 2026-08-26 (Craig's "give the quote more visual prominence /
   separate it from the response" ask): a very subtle background tint +
   rounded corners turn the quote into its own quiet "zone" so the
   plain-text response below it reads as a clearly different area at a
   glance — without a visible border or shadow, so it still reads as
   editorial quoting, not a chat bubble or a second nested card. Font
   size bumped 20px -> 25px (desktop only; mobile's already-tuned 22px
   is untouched, see the mobile block below) so it carries more weight
   than the response text beneath it. */
.scenario-panel__message {
  position: relative;
  margin: 0 0 var(--space-6);
  padding: 18px 22px 18px 48px;
  background: rgba(255, 255, 255, 0.035);
  border-radius: 10px;
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.4;
  color: var(--white);
}

.scenario-panel__quote-mark {
  position: absolute;
  left: 20px;
  top: 14px;
  font-size: 32px;
  line-height: 1;
  color: var(--gold);
}

/* Wrapper, not a single <p> (updated 2026-08-06): a couple of scenarios
   (Budget Concern, Planner or Parent) describe two distinct parts of
   the behavior and render as two short <p> children instead of one
   run-on paragraph, per script.js's renderPanel. */
.scenario-panel__explanation {
  font-size: var(--size-body);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
  margin: 0 0 var(--space-5);
}

.scenario-panel__explanation p {
  margin: 0 0 var(--space-3);
}

.scenario-panel__explanation p:last-child {
  margin-bottom: 0;
}

.scenario-panel__why {
  font-size: var(--size-body-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
  max-width: 56ch;
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.scenario-panel__why-label {
  font-weight: 700;
  color: var(--white);
  margin-right: var(--space-2);
}

/* Quiet closing note (added 2026-08-24) — plain text, no card/border, no
   divider, deliberately not styled like the .scenario-panel__why line
   above it (no bold label, lower opacity) so it doesn't read as another
   piece of scenario content or a disclaimer. Generous margin-top is the
   only thing separating it from the panel above. */
.scenario-closing-note {
  /* Widened from 640px 2026-08-25 so the paragraph wraps to ~2 lines
     instead of 3 on desktop — tested several widths directly (740px
     was the first to reach 2 lines; 780–820px all break at the same
     clean word boundary, "...hands the" / "conversation to...", with no
     awkward mid-word split). 800px sits comfortably inside this
     section's own container with room to spare. */
  max-width: 800px;
  /* Reduced from --space-8 (64px) 2026-08-25, 25% — the gap above this
     note read as more empty space than the transition needed. */
  margin: var(--space-7) 0 0;
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 768px) {
  .scenario-closing-note {
    /* Same ~25% reduction as the desktop value above, from --space-6
       (32px). */
    margin-top: var(--space-5);
  }
}

/* Mobile refinements (2026-08-06): tighter card padding/spacing and a
   larger quote so the card reads as premium editorial hierarchy rather
   than simply "everything smaller." Body copy (.scenario-panel__
   explanation) already sits at var(--size-body), 17px (16px under the
   480px breakpoint) — already within the requested 17–19px range, no
   override needed. Desktop is completely untouched by this block. */
@media (max-width: 760px) {
  .scenario-dropdown {
    display: block;
  }
  .scenario-container {
    grid-template-columns: 1fr;
  }
  .scenario-list {
    display: none;
  }
  .scenario-panel {
    /* Tightened 2026-08-14 from 22px as part of a mobile density pass. */
    padding: 20px;
  }
  /* Eyebrow bumped 13px (shared --size-eyebrow) → 15px 2026-08-25, into
     Craig's 14–16px target — a small legibility bump, not a hierarchy
     change (still clearly the smallest label-weight text in the card). */
  .scenario-panel__label {
    font-size: 15px;
    margin-bottom: 8px;
  }
  /* Quote resized 32px→26px→25px→22px 2026-08-25 (third pass): Craig
     asked for a further ~10–12% cut from 25px so the quote stops
     competing with the section headline ("Different Leads Need
     Different Responses," 31px). 22px is exactly a 12% cut, at the top
     of that range.

     Re-checked all 5 scenario quotes at 375/390/430px (same
     methodology as the previous two passes, this time double-checked
     with fresh page loads between font-size changes after an earlier
     same-tab sweep produced inconsistent readings for the same value —
     repeated live style mutations in one tab without reloading turned
     out to leave stale state behind). Confirmed for real this time: the
     DEFAULT-open scenario ("Wants a Human," what most visitors see
     first) has no single size that's clean at all three widths in this
     neighborhood — 21px strands "me?" alone at 390px, 22px strands it
     at 430px (reads as a clean 2-line wrap at 375/390 at 22px, and a
     clean 3-line wrap at 375/390 at 21px — only the third width is ever
     the problem, just a different one depending on the pixel). 22px was
     kept since it matches the requested percentage; the 430px case is
     flagged rather than hidden. Line-height stays 1.35 — already
     comfortable at this scale, no change needed.

     The previously-flagged cross-quote conflict is unchanged by this
     pass: "Budget Concern" ("Sorry, that's outside our budget.") still
     orphans "budget." alone at 430px across this whole size
     neighborhood — a genuine conflict between different quotes sharing
     one font-size, not something this size choice can fix. */
  /* Font-size/line-height are the already-tuned mobile values above —
     untouched by the 2026-08-26 pass per Craig's explicit "do not make
     the scenario quote oversized" instruction. Only the background/
     padding box from the desktop revision (same section, above) is
     added here, with noticeably tighter padding so the visual-
     separation benefit doesn't cost meaningful extra height on a small
     screen. */
  .scenario-panel__message {
    font-size: 22px;
    line-height: 1.35;
    padding: 14px 16px 14px 38px;
    margin-bottom: 16px;
  }
  /* Reduced 34px→24px→23px→20px 2026-08-25 (third pass), staying
     proportional to the quote text as it steps down from 25px to 22px
     (a 12% cut, matching the quote's own 12% reduction) — per Craig's
     "reduce it proportionally" instruction from the first pass. Still
     clearly an accent, not a second oversized element. */
  .scenario-panel__quote-mark {
    left: 14px;
    top: 11px;
    font-size: 20px;
  }
  /* "How LeadExcess responds" body bumped 16px (shared mobile --size-
     body) → 17px 2026-08-25, into Craig's 17–18px target. Scoped here,
     not the shared token, so no other section's body copy moves. */
  .scenario-panel__explanation {
    font-size: 17px;
    margin-bottom: var(--space-3);
  }
  .scenario-panel__explanation p {
    margin-bottom: var(--space-2);
  }

  /* "Why it matters" becomes its own small block instead of an inline
     label + sentence: a gold eyebrow-style label on its own line, body
     copy beneath. Desktop keeps the inline bold-label treatment.
     Body bumped 14px (shared mobile --size-body-sm) → 17px 2026-08-25,
     matching .scenario-panel__explanation above per Craig's 17–18px
     target for both — the two are meant to read as the same body-copy
     tier, just visually separated by the divider/label below. */
  .scenario-panel__why {
    font-size: 17px;
    padding-top: 10px;
  }
  .scenario-panel__why-label {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 var(--space-2);
  }
  .scenario-panel__why > span[data-scenario-why] {
    display: block;
  }
}

/* ---- Featured Client Results -----------------------------------------------
   Light off-white background — a deliberate break after two consecutive
   dark .works sections (How It Works, Scenario), and consistent with
   Logan's and Willie's own light testimonial contexts. Three equal-
   weight cards built entirely on the shared testimonial-video component
   (.video-frame, .video-frame__play, .testimonial-frame) — no new frame
   or button styling, per Craig's explicit direction to reuse Logan's
   exact system. Each card only overrides play-button position (measured
   individually per thumbnail — see the per-card comments below) and,
   for Jason only, the playing-state aspect ratio (portrait source). */
.results {
  background: var(--bg-offwhite);
  color: var(--text-on-light);
  padding: var(--space-11) 0;
}

@media (max-width: 768px) {
  .results {
    /* Reduced from space-8 (64px) to space-7 (48px) 2026-08-14 — still a
       generous, existing token for the gap between major sections, just
       not the largest one in the scale. */
    padding: var(--space-7) 0;
  }
  /* Mobile-only narrower side padding (2026-08-25), same technique as
     .hero/.problem/#how-it-works — gains width for the headline size
     below. */
  .results .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.results__headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--size-section-headline);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy-primary);
  margin: 0 0 var(--space-4);
  /* Widened from 780px (2026-08-24) — that cap was the only thing
     forcing a 2-line wrap: measured at the full 46px desktop size, the
     complete headline is only ~817px wide, comfortably inside the
     .container's ~1132px inner width. 900px gives a small buffer above
     the measured width without being so wide it stretches oddly on
     ultra-wide viewports. No font-size change needed — the current size
     already fits in one line once this cap is out of the way. At
     narrower desktop/tablet widths the container itself shrinks below
     900px, so the line wraps naturally with no extra breakpoint. */
  max-width: 900px;
}

/* Keeps "Multi-Ops" from splitting at its hyphen when the headline
   wraps (2026-08-24) — the hyphen is otherwise a natural break point. */
.results__headline-nobreak {
  white-space: nowrap;
}

.results__supporting {
  font-size: var(--size-body-lg);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0;
}

.results__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7);
  margin-top: var(--space-8);
}

@media (max-width: 860px) {
  .results__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 768px) {
  /* Headline size (2026-08-25): target was 38–42px; measured directly
     that "Proven With Established" (the wider of the two desired
     lines, with "Multi-Ops" kept isolated per Craig's explicit
     instruction) needs 343px at 28px font — right at the 343px ceiling
     available at 375px with the container's own 16px padding above, a
     razor-thin fit. 27px gives a real 12px safety margin. Paired with
     an explicit <br class="break-mobile"> before "Multi-Ops" in the
     markup so that split is guaranteed regardless of exact viewport
     width, rather than left to natural wrap (which starts fragmenting
     "Established" onto its own line past ~28px). Flagged — 11–15px
     short of the 38–42px target. */
  .results__headline {
    font-size: 27px;
    line-height: 1.15;
    margin-bottom: 14px;
  }
  /* Tightened 2026-08-14 from space-8 (64px) both here and for the
     stacked-card gap above — testimonial thumbnails stay full-width and
     just as prominent, only the surrounding empty space shrinks. */
  .results__grid {
    margin-top: 32px;
    gap: 44px;
  }
}

/* Card text: name/company lead (per Craig's explicit ordering — this
   section leads with WHO, not a quote-style title like Corey/Willie),
   then one concise supporting line, then an optional small disclaimer.
   Thumbnails already carry each person's quote/result, so this text
   deliberately does not repeat it. */
.proof-card__text {
  margin-top: var(--space-4);
}

.proof-card__name {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy-primary);
  margin: 0 0 var(--space-2);
}

.proof-card__name span {
  font-weight: 400;
  color: var(--text-secondary);
}

.proof-card__name span::before {
  content: " \2014 ";
}

.proof-card__support {
  font-size: var(--size-body-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* Regression fix (2026-08-08): this was missing position: relative,
   unlike its siblings .problem__proof-media (Logan) and
   .testimonial-card__thumb-wrap (Willie) that also carry the shared
   .testimonial-frame class. Without a positioned containing block here,
   .testimonial-frame::before/::after (position: absolute) escaped to
   the page's initial containing block and painted a blurred gold glow
   and offset border near the top-left of the entire document — which
   is why it showed up inside the Hero, far away in the DOM, instead of
   around the Jason/Nate/Joe thumbnails where it belongs. */
.proof-card__thumb-wrap {
  position: relative;
}

/* One shared disclosure for the whole three-card row (2026-08-06,
   replaces individual per-card disclaimers under Nate and Joe) — sits
   beneath .results__grid as a normal block, so on mobile (where the
   grid stacks to one column) it naturally lands beneath the third card
   with no extra positioning needed. Quiet and understated: small,
   muted, no asterisks or footnote markers tying it to a specific card. */
.results__disclosure {
  margin-top: var(--space-6);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  opacity: 0.7;
  /* Centered 2026-08-25 — was a left-aligned full-width block, which
     under the centered CTA button (see .results__cta below) read as
     tied to the leftmost card rather than closing out all three. */
  text-align: center;
}

/* Closing CTA (added 2026-08-24) — reuses .btn/.btn-primary exactly as
   styled everywhere else on the page (same gold, same scheduling
   destination), just placed here with its own top margin. No wrapping
   paragraph/headline per Craig's explicit instruction: the disclosure
   line above and this button are the entire ending.

   Centered 2026-08-25 — the button sits below a full-width 3-column
   grid (and the disclosure line, also full-width), so left-aligning it
   made it read as belonging to the leftmost card rather than closing
   the whole section. .btn is display:inline-flex site-wide; overriding
   to a block-level flex here (rather than adding text-align:center on
   the section, which would also re-align the headline/supporting copy
   and every card) keeps the button at its natural content width while
   margin:auto centers just this element.

   Gap tightened 2026-08-25 (--space-7/48px → 40px) now that the
   disclosure above is also centered — the two read as one centered
   closing unit, so the same slightly-tighter gap used for the
   Calculator's equivalent disclosure-to-CTA pairing fit better here
   too. */
.results__cta {
  display: flex;
  width: fit-content;
  margin: 40px auto 0;
}

/* Play-button position only, measured individually against each
   thumbnail's own baked-in icon (same template as Logan/Willie, but not
   assumed to share exact coordinates — confirmed by direct pixel
   measurement): Jason 43.45% / 50.69%, Nate 43.33% / 50.58%, Joe
   43.69% / 50.74%, all ~6.2% of image width in diameter. Appearance is
   entirely the shared .video-frame__play class. */
.proof-card__play--jason {
  left: 43.45%;
  top: 50.69%;
  width: clamp(44px, 6.2%, 100px);
}

.proof-card__play--nate {
  left: 43.33%;
  top: 50.58%;
  width: clamp(44px, 6.2%, 100px);
}

.proof-card__play--joe {
  left: 43.69%;
  top: 50.74%;
  width: clamp(44px, 6.2%, 100px);
}

/* Jason's source footage is native portrait (~9:16 — confirmed against
   the file's own container metadata, not assumed); the poster stays the
   approved 16:9 composited image, but while playing the wrapper caps
   and centers to a narrower width and the frame switches to 9:16 so the
   footage fills it exactly, full-bleed, no bars/crop/stretch. Same
   values and same principle as Logan's own portrait-playback handling
   (.problem__proof-media:has(.video-frame.is-playing) above). Nate and
   Joe are both native 16:9 (confirmed directly against their source
   files), matching their poster exactly, so neither needs this
   treatment — applying it to every card would incorrectly force their
   landscape footage into a portrait box. */
.proof-card__thumb-wrap--portrait:has(.video-frame.is-playing) {
  max-width: clamp(230px, 23vw, 335px);
  margin: 0 auto;
}

.proof-card__thumb-wrap--portrait .video-frame.is-playing {
  aspect-ratio: 9 / 16;
}

/* ---- Revenue Opportunity Calculator ---------------------------------------
   Built 2026-08-08. Dark navy again (rhythm so far: Hero dark, Problem
   light, Works dark, Results light — this continues it before Support's
   light background below). Reuses --navy-primary (the same dark already
   used by Header/Hero/Works) rather than introducing a new background
   color, and the same card language already established by
   .scenario-container (navy-secondary surface, hairline border, soft
   shadow) for the calculator panel.

   Two-part composition: intro (eyebrow/headline/supporting, same pattern
   as .works__headline/.works__supporting) then the calculator panel.
   Panel is a single card, not nested cards — inputs on the left stay
   visually quiet (plain fields, no card treatment of their own); results
   on the right get the visual weight (larger type, thin dividers between
   the three scenarios instead of separate bordered cards per file 09 §9's
   "avoid nested cards inside cards").

   No new colors: navy-primary, navy-secondary, gold, white, and the
   existing rgba(255,255,255,*) overlay tones used everywhere else. No
   pricing, no ROI-against-LeadExcess-cost anywhere in this section — see
   the HTML comment above the section for why. */

.calc {
  position: relative;
  background: var(--navy-primary);
  color: var(--white);
  padding-top: var(--space-11);
  /* Bottom only, reduced ~13% from --space-11 (120px) 2026-08-25 — with
     the compact CTA now closing the section, the full --space-11 gap
     below it read as excess empty navy space before the next section
     starts. Top padding is untouched; this is a bottom-only trim, not a
     token swap, since no existing spacing token lands in the requested
     10–15% range. */
  padding-bottom: 104px;
}

@media (max-width: 768px) {
  .calc {
    /* Reduced from space-8 (64px) to space-7 (48px) 2026-08-14 — still a
       generous, existing token for the gap between major sections, just
       not the largest one in the scale. */
    padding-top: var(--space-7);
    /* Same ~13% bottom-only trim as the desktop rule above, scaled to
       this breakpoint's own --space-7 (48px) base: 48 × 0.87 ≈ 42px. */
    padding-bottom: 42px;
  }
  /* Mobile-only narrower side padding (2026-08-25), same technique as
     .hero/.problem/#how-it-works — gains width for the headline size
     set further below (kept with the section's other mobile rules,
     not here, since the .calc__headline base rule sits after this
     block in the cascade and would otherwise win the tie). */
  .calc .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.calc__headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--size-section-headline);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 var(--space-5);
  max-width: 700px;
}

.calc__supporting {
  font-size: var(--size-body-lg);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 62ch;
  margin: 0 0 var(--space-8);
}

/* ---- Calculator panel: single card, inputs + live results ---------------- */

.calc__panel {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  background: var(--navy-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-media);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

@media (max-width: 900px) {
  .calc__panel {
    grid-template-columns: 1fr;
  }
}

.calc__inputs {
  padding: var(--space-7) var(--space-6);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .calc__inputs {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-6) var(--space-5);
  }
}

@media (max-width: 768px) {
  /* Headline size (2026-08-25): target was 38–42px; measured directly
     that "Consultations Be Worth?" (the wider of the two desired lines)
     needs 338px at 27px font, against 343px available at 375px (with
     the container's own 16px padding above) — a comfortable 5px
     margin; 28px overshoots to 351px. Paired with an explicit <br
     class="break-mobile"> in the markup so "What Could More" /
     "Consultations Be Worth?" is guaranteed — natural wrap otherwise
     strands "Worth?" alone past ~28px. Flagged — 11–15px short of the
     38–42px target. */
  .calc__headline {
    font-size: 27px;
    line-height: 1.15;
    margin-bottom: 18px;
  }
  /* Tightened 2026-08-14 from space-8 (64px) — the biggest single gap
     in the calculator's mobile layout, between the intro copy and the
     panel itself. */
  .calc__supporting {
    /* 18–19px target: already 18px via the shared --size-body-lg
       mobile token; line-height tightened 1.65→1.5, within Craig's
       1.45–1.55 target. */
    line-height: 1.5;
    margin-bottom: 32px;
  }
  .calc__inputs {
    /* Tighter than the 900px value above at full phone widths, and a
       smaller gap between fields (was space-6/32px) — inputs stay full
       size and just as tappable, only the space between them shrinks. */
    padding: var(--space-5);
    gap: 20px;
  }
}

/* ---- Input fields ---------------------------------------------------------
   Quiet by design (per Craig's direction, results carry the visual
   weight) but still premium: visible labels, no placeholder-only
   labeling, strong gold focus state, no browser-default number-input
   chrome (spinners removed further down). */

.calc-field {
  display: flex;
  flex-direction: column;
}

.calc-field__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-body-sm);
  color: var(--white);
  margin: 0 0 var(--space-2);
}

.calc-field__help {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: var(--space-2) 0 0;
}

.calc-field__input {
  width: 100%;
  min-height: 50px;
  padding: 0 var(--space-4);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-body-lg);
  color: var(--white);
  background: var(--navy-primary);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  /* Text inputs (leads/value) use inputmode="numeric" for a numeric
     mobile keypad while still allowing comma-formatted display, which a
     native number input can't show. */
}

.calc-field__input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.calc-field__input:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 186, 66, 0.25);
}

/* Remove native number-input spinner chrome (close-rate field) — spinner
   arrows read as a generic web-form control, not a premium calculator
   input; the field is still fully keyboard/touch operable via typing. */
.calc-field__input[type="number"]::-webkit-outer-spin-button,
.calc-field__input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calc-field__input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.calc-field__wrap {
  position: relative;
}

.calc-field__affix {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-body-lg);
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.calc-field__affix--prefix {
  left: var(--space-4);
}

.calc-field__affix--suffix {
  right: var(--space-4);
}

.calc-field__input--prefixed {
  padding-left: 30px;
}

.calc-field__input--suffixed {
  padding-right: 36px;
}

/* ---- No-show toggle: two clear buttons, never tiny radios ----------------
   Spacing loosened 2026-08-24 — this area read as too tight. Scoped to
   .calc-field--toggle only (not the shared .calc-field__label rule
   itself, which every other calculator field also uses) so the other
   fields' label spacing is untouched. */
.calc-field--toggle .calc-field__label {
  margin-bottom: var(--space-4);
}

.calc-toggle {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.calc-toggle__option {
  width: 100%;
  min-height: 50px;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-body-sm);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  background: var(--navy-primary);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.calc-toggle__option:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

.calc-toggle__option:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.calc-toggle__option.is-selected {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(255, 186, 66, 0.08);
}

/* ---- No-show slider -------------------------------------------------------
   Native <input type="range">, styled — keeps free keyboard operability
   (arrow keys, Home/End) and correct accessible value announcement
   without any custom widget/JS reimplementation. */

.calc-field--slider {
  padding-top: var(--space-2);
}

/* The browser's own [hidden] { display: none } UA rule has the same
   specificity as .calc-field's display: flex above and loses to it
   since this stylesheet loads later — without this, toggling the
   `hidden` attribute in script.js has no visible effect. */
.calc-field--slider[hidden] {
  display: none;
}

.calc-field__slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.calc-field__slider-value {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 20px;
  color: var(--gold);
}

.calc-slider {
  width: 100%;
  height: 4px;
  margin: 0;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  appearance: none;
  -webkit-appearance: none;
}

.calc-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--navy-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.calc-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--navy-primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.calc-slider::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 2px;
}

.calc-slider:focus-visible {
  outline: none;
}

.calc-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(255, 186, 66, 0.35);
}

.calc-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(255, 186, 66, 0.35);
}

/* ---- Live results: the visual payoff of the section ----------------------
   Three scenarios separated by hairline dividers, not individual
   bordered cards (file 09 §9: avoid nested cards inside cards). Strong
   size hierarchy inside each: consultations small, bookings medium,
   revenue large — the eye should land on revenue. */

.calc__results {
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .calc__results {
    padding: var(--space-6) var(--space-5);
  }
}

/* ---- "Why start at 10?" explainer (added 2026-08-14) ---------------------
   Answers why the scenarios use 10/15/20 without implying LeadExcess
   guarantees those numbers — kept deliberately quiet (small gold label,
   no card, no big statistic, narrower measure) so it stays secondary to
   the scenario results below it. Uses the same hairline-divider language
   as the scenario dividers rather than its own boxed card. */

.calc__why {
  max-width: 56ch;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.calc__why-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-2);
}

.calc__why-text {
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.calc-scenario {
  padding: var(--space-6) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.calc-scenario:first-child {
  padding-top: 0;
}

/* Spacing refinement (2026-08-14): the divider alone read as too tight
   against the first scenario label with no gap here — this is the only
   change in this pass, giving the divider breathing room on both sides
   so "If 10 More Leads..." reads as the start of a new part of the
   calculator rather than the next line of the explainer above it. */
.calc__why + .calc-scenario {
  padding-top: var(--space-4);
}

.calc-scenario:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

/* Mobile density pass (2026-08-14): tightens the results container and
   the gap between consecutive scenarios only. Deliberately does NOT
   touch .calc__why's own padding-bottom or .calc__why + .calc-scenario's
   padding-top — that divider spacing was precisely tuned to Craig's
   28–36px / 12–16px spec in the previous pass and stays as-is here. */
@media (max-width: 768px) {
  .calc__results {
    padding: var(--space-5);
  }
  .calc-scenario {
    padding: 22px 0;
  }
}

.calc-scenario__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-4);
}

/* Mobile-only fix (2026-08-26): at the shared --size-eyebrow (13px),
   the wider "Booked a Consultation" wording wraps to 2 lines on
   phones — confirmed by measuring actual per-character line positions
   (the reliable method for this; a block element's own
   getClientRects() only reports its box, not wrapped text lines).
   375px is the binding case: 10.5px still wraps the "20" scenario
   specifically, so font-size alone would need to drop to 10px, which
   started reading like disclaimer text. Tightening the letter-spacing
   (0.06em -> 0em, i.e. just removing the extra tracking, not
   compressing further) bought back enough width to hold at 11.5px
   instead — verified fitting on one line for all three scenarios at
   375/390/430px with the webfont loaded, real (non-zero) margin at
   the tightest width. Color/weight/uppercase/margin all untouched;
   desktop is completely unaffected by this rule. */
@media (max-width: 768px) {
  .calc-scenario__label {
    font-size: 11.5px;
    letter-spacing: 0;
  }
}

.calc-scenario__row {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.calc-scenario__metric {
  display: flex;
  flex-direction: column;
}

.calc-scenario__value {
  font-family: var(--font-headline);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  /* Numbers update immediately (no count-up/spin) — a deliberately
     restrained "no flashy animation" choice per file 09 §10. */
}

.calc-scenario__caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--size-body-sm);
  color: rgba(255, 255, 255, 0.65);
  margin-top: var(--space-1);
}

.calc-scenario__metric--sm .calc-scenario__value {
  font-size: 26px;
}

.calc-scenario__metric--md .calc-scenario__value {
  font-size: 26px;
}

.calc-scenario__metric--lg .calc-scenario__value {
  font-size: clamp(34px, 3.4vw, 44px);
  color: var(--gold);
}

.calc-scenario__metric--lg .calc-scenario__caption {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 480px) {
  .calc-scenario__row {
    gap: var(--space-5);
  }
  .calc-scenario__metric--lg .calc-scenario__value {
    font-size: 32px;
  }
}

/* Revenue-to-cost multiple label (revised 2026-08-26 — replaces the
   earlier full-sentence version with a compact, scannable tag). Sized
   at the same small eyebrow-label tier used elsewhere on the page
   (.calc-scenario__label, .scenario-panel__label — --size-eyebrow,
   13px) rather than caption size, specifically so it reads as one
   small secondary tag under the revenue result, not a fourth metric
   block competing with the three actual outputs above it. Kept on one
   line (white-space: nowrap) by default — the longest case, "19.3x
   First-Year Cost of LeadExcess", still fits on one line at desktop
   widths. Gold to reuse the existing accent rather than introduce a
   new treatment, no card/badge background. Small margin-top keeps it
   reading as a footnote to .calc-scenario__metric--lg above rather
   than its own block.

   Wording lengthened 2026-08-26 ("...of LeadExcess" appended, per
   Craig's explicit ask to remove ambiguity about what "first-year
   cost" refers to) — no longer guaranteed to fit one line on narrow
   phones, so nowrap is relaxed back to normal wrapping ≤768px (see
   below) rather than shrinking the font to force a fit, per Craig's
   explicit "allow a natural wrap rather than shrinking excessively"
   instruction.

   Color changed gold -> white 2026-08-26 (Craig's explicit ask):
   revenue figure stays the only gold/orange focal point in each card;
   this multiplier line reads as a white secondary supporting metric
   instead of competing with the revenue color. Size/weight/uppercase/
   spacing/placement all untouched. */
.calc-scenario__multiple {
  margin: var(--space-2) 0 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--size-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .calc-scenario__multiple {
    white-space: normal;
  }
}

/* Keeps the multiplier's lowercase "x" (9.7x, not 9.7X) — otherwise it
   would inherit the uppercase transform above, meant only for the
   "First-Year Cost" label text. */
.calc-scenario__multiple [data-multiple] {
  text-transform: none;
}

/* Basis line for the multiple above (added 2026-08-26) — states the
   $6,461 comparison once, shared by all three cards, instead of
   repeating it per card. Shares .calc__disclosure's subdued treatment
   (same font-size/color/centering) but is a separate class so the two
   lines can sit close together as one "fine print" group: this one
   keeps the original space-6 gap separating the pair from the
   scenario cards above, and .calc__disclosure's own margin-top (below)
   was tightened since it now follows this line directly instead of
   the results block. */
.calc__basis {
  margin-top: var(--space-6);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  max-width: 640px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.calc__disclosure {
  margin-top: var(--space-2);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  /* Widened from 62ch (2026-08-25) — that cap forced a 2-line wrap on
     desktop even though the section's own container has plenty of
     room. Measured the disclaimer's actual single-line width directly
     (596px at this font-size) rather than guessing a ch value, since ch
     is only a rough proxy for a proportional font's real sentence
     width — 62ch rendered as just 454px, well short of what the text
     actually needs. 640px gives a small buffer above the measured
     width. Still a max-width, not a fixed width, so it keeps wrapping
     naturally on narrower/mobile viewports where the container itself
     is narrower than this. */
  max-width: 640px;
  /* Centered 2026-08-25 (Craig's explicit follow-up, same day as the
     CTA-centering pass below it) — was left-aligned with the calculator
     content above; now matches the centered CTA unit beneath it so the
     disclaimer and CTA read as one centered conclusion to the section. */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Closing CTA (added 2026-08-24, revised same day to add one line of
   copy above the button — no headline, per Craig's explicit
   instruction). Button reuses .btn/.btn-primary exactly as styled
   everywhere else on the page (same gold, same scheduling
   destination). Top spacing lives on .calc__cta-text (separating it
   from the disclaimer above); the button keeps a small, tighter gap
   from its own copy line so the two read as one compact CTA rather
   than two stacked sections.

   Centered 2026-08-25 — was left-aligned like the disclosure above it;
   Craig asked for the sentence and button to read as one centered unit
   beneath the full calculator rather than continuing the disclosure's
   own left edge. text-align:center handles the copy line; the max-width
   plus margin:0 auto centers that line's own block (not just its text)
   within the section; the button gets the same display:flex + width:
   fit-content + margin:auto treatment used for the Featured Client
   Results CTA so it centers under the now-centered sentence above it. */
.calc__cta-text {
  /* Reduced from --space-7 (48px) 2026-08-25, ~17% — Craig wanted the
     disclaimer and CTA to feel like they belong to the same conclusion
     of the section rather than two separately-spaced blocks, while
     still reading as clearly separate lines. 40px keeps a real gap
     without the earlier full-section-break amount. */
  margin-top: 40px;
  margin-bottom: var(--space-4);
  font-size: var(--size-body);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  /* Updated copy (2026-08-25) is two sentences and needed to land as a
     balanced 2-line wrap on desktop, not one long line. Tried tuning
     max-width alone first, but every natural break point under the old
     52ch box landed mid-clause ("...The" / "call shows...", "...The
     call" / "shows where...") — none read as intentional. The HTML now
     carries an explicit <br> between the two sentences (same forced-
     break technique already used on the Hero headline), so the wrap is
     always a real sentence boundary instead of whatever word happens to
     fit. max-width is set here just wide enough for the longer of the
     two resulting lines (measured at 370px) with a small buffer — it no
     longer needs to be wide enough to contain the unwrapped full
     sentence. */
  max-width: 400px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.calc__cta {
  display: flex;
  width: fit-content;
  margin: 0 auto;
}

/* Mobile-only fix (2026-08-25): the second forced line ("The call shows
   where it's hiding in your process.") was wrapping again at the
   shared mobile body size (16px) — measured 348px needed against 343px
   available at 375px (with .calc .container's own 16px padding), just
   5px over, enough to strand "process" alone on a 3rd line. 15px needs
   only 327px, a comfortable margin at all three required widths.
   Kept wording and the <br> between sentences exactly as approved —
   this is a mobile-only sizing fix, not a copy change. Desktop is
   unaffected (still --size-body, unscoped here). */
@media (max-width: 768px) {
  .calc__cta-text {
    font-size: 15px;
  }
}

/* ---- A Proven System With Ongoing Support ---------------------------------
   Light background again (dark/light/dark/light/dark/light rhythm: Hero,
   Conversion Problem, How LeadExcess Works, Featured Client Results, the
   Revenue Opportunity Calculator above, this section). Compact mixed
   layout per the locked visual direction: full-width intro, a typography
   row, then a two-column lower block that is NOT a plain 50/50 — 46/54,
   with the "Building It Yourself" side tinted and the proof side carrying
   more visual weight (video + founder credibility). */

.support {
  background: var(--bg-offwhite);
  color: var(--text-on-light);
  padding: var(--space-11) 0;
}

@media (max-width: 768px) {
  .support {
    /* Reduced from space-8 (64px) to space-7 (48px) 2026-08-14 — still a
       generous, existing token for the gap between major sections, just
       not the largest one in the scale. */
    padding: var(--space-7) 0;
  }
}

.support__headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--size-section-headline);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy-primary);
  max-width: 760px;
  margin: 0 0 var(--space-5);
}

.support__supporting {
  font-size: var(--size-body-lg);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 68ch;
  margin: 0 0 var(--space-8);
}

/* Restructured 2026-08-24: the points grid used to open with a border-
   top + padding-top, which read as a divider separating it from the
   intro paragraph right above it. Now the Willie testimonial sits
   between the intro and this grid, and .support__points-label (below)
   already marks the start of this subsection on its own, so the
   border/padding were dropped as redundant — the label does that job.
   This is also now the last element in the section (no closing
   paragraph/CTA follows), so no bottom margin is needed either; the
   section's own padding-bottom closes it out. */
.support__points-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: var(--space-8) 0 var(--space-4);
}

.support__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}

@media (max-width: 900px) {
  .support__points {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.support__point h3 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--navy-primary);
  margin: 0 0 var(--space-3);
}

.support__point p {
  font-size: var(--size-body);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

/* Restructured 2026-08-24: .support__refinement, .support__lower (the
   46/54 DIY-vs-testimonial grid), .support__diy, .support__founder, and
   .support__closing are all removed along with their markup — the DIY
   objection block moved to the FAQ, the closing line was stale (it
   pointed to the calculator, which now sits earlier in page order,
   before Support, not after it), and the founder paragraph was cut per
   Craig's "reduce text, let Willie provide the proof" brief. The
   testimonial itself now reuses the shared .proof-grid/.proof-text
   pattern (see the HTML comment above .support__testimonial) instead of
   a section-specific layout, so no new grid/column CSS was needed here
   — only this wrapper's spacing. */
.support__testimonial {
  margin-top: var(--space-2);
}

/* Mobile density pass (2026-08-14, still applies): Support was the
   tallest section on the page at 375px width, almost entirely from
   generous space-7/space-8 tokens repeated across its intro and points
   row. Desktop is untouched. */
@media (max-width: 768px) {
  /* Headline size (2026-08-25, revised): "You're Not Left to Figure It
     Out" itself wraps cleanly (no orphan) at every size up to 42px at
     375/390/430px — this is the one headline in this pass with real
     headroom in its own text. But the Hero (the page's actual largest
     headline) is hard-capped at 35px by its own text/width constraints
     — see .hero__headline's mobile rule — so 40px here would make
     Support bigger than the Hero, inverting the hierarchy this whole
     pass exists to establish. Capped at 34px instead: below the Hero,
     matching Conversion Gap's own ceiling, and still clearly larger
     than the sections capped lower (How It Works/Different Leads at
     31px, Featured Results/Calculator/Pricing at 27px). */
  .support__headline {
    font-size: 34px;
    line-height: 1.1;
    margin-bottom: 18px;
  }
  .support__supporting {
    /* 18–19px target: already 18px via the shared --size-body-lg
       mobile token; line-height tightened 1.65→1.5. */
    line-height: 1.5;
    margin-bottom: 28px;
  }
  .support__points-label {
    margin: 28px 0 12px;
  }
  .support__points {
    gap: 20px;
  }
}

/* ---- Testimonial card (inline video) ---------------------------------------
   Reused wherever a testimonial video appears. Migrated 2026-08-01 to
   the site-wide inline-video pattern (plays in place, no modal) — the
   thumb is now a plain frame (data-video-frame) rather than the trigger
   itself, since a <button> can no longer wrap the native <video controls>
   that replaces it on click.

   Rebuilt 2026-08-03 to genuinely share Logan Smith's component instead
   of duplicating its values: the thumb carries both .video-frame (all
   structural styling — border, radius, shadow, background, img/video
   sizing, including aspect-ratio: 16/9) and .testimonial-card__thumb
   (only this card's own spacing, needed because it's a single-column
   stacked card, not Logan's two-column layout); the wrapper carries
   both .testimonial-card__thumb-wrap (this card's own position/stacking
   role) and .testimonial-frame (the shared decorative offset-frame, see
   the .testimonial-frame rules above). Any drift in Logan's frame now
   updates Willie's automatically, and vice versa. The play button uses
   Logan's own .video-frame__play transparent hit-area (position/size
   overridden below, same pattern as .problem__proof-play) since this
   thumbnail — like Logan's — has its own baked-in gold ring + triangle
   play icon; there is no second, CSS-drawn button on top of it. This
   intentionally supersedes the "video-frame color rule" adaptation
   documented in 09_LEADEXCESS_WEBSITE_BRAND_GUIDE.md §11 (navy-led
   structural edge on light sections) for this one card, at Craig's
   explicit direction.

   aspect-ratio correction (2026-08-03): this card originally overrode
   .video-frame's 16/9 with 16/10, inherited from the earlier Corey
   Hommel version where a tighter crop suited a plain photo. Willie's
   thumbnail is a fully composited quote-card like Logan's (same native
   ~16/9 asset), so that override was cropping into the LeadExcess
   logo mark on the left edge — a visible, unintended difference from
   Logan's clean, uncropped framing. Removed; this card now inherits
   16/9 from .video-frame directly, matching Logan exactly. */

.testimonial-card__thumb-wrap {
  position: relative;
}

/* This card's own layout only — margin-bottom creates the gap before
   the text block stacked beneath it, which Logan doesn't need in its
   own two-column layout. Everything else (aspect-ratio, border, radius,
   shadow, background, img/video sizing) comes from the shared
   .video-frame class also applied to this element. */
.testimonial-card__thumb {
  margin-bottom: var(--space-4);
}

/* Position/size only, now literally identical to .problem__proof-play's
   own values (2026-08-03) — appearance (transparent hit-area, no drawn
   ring or triangle, subtle hover-ring glow) comes entirely from the
   shared .video-frame__play class, the same component Logan's
   testimonial uses. This thumbnail has its own baked-in gold ring +
   triangle icon, same template as Logan Smith's, measured at ~43.5% /
   ~51.1%, ~6.2% of the raw image's width in diameter. Previously
   remapped for a 16/10 crop that no longer exists (see the aspect-ratio
   correction note above .testimonial-card__thumb) — now that this card
   uses .video-frame's own 16/9 (matching the image's native ratio, no
   meaningful crop), the raw measurement applies directly. If Corey (or
   another plain-photo thumbnail with no baked-in icon) is used here
   again, switch back to the visible .video-play button in a fixed
   corner instead of this transparent, icon-aligned one. */
.testimonial-card__play {
  left: 43.5%;
  top: 51.1%;
  width: clamp(44px, 6.2%, 100px);
}

.testimonial-card__title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy-primary);
  margin: 0 0 var(--space-2);
}

.testimonial-card__excerpt {
  font-size: var(--size-body);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 var(--space-3);
}

.testimonial-card__name {
  font-size: var(--size-body-sm);
  font-weight: 600;
  color: var(--navy-primary);
  margin: 0;
}

/* Override for Willie's attribution line living inside .proof-text
   (2026-08-24, Support restructure) — .proof-text p:not(.eyebrow)
   otherwise wins on specificity and would flatten this back to plain
   gray body text. Matches its specificity (class+class+element) and
   comes later in the file, so source order settles it correctly. */
.proof-text p.testimonial-card__name {
  font-size: var(--size-body-sm);
  font-weight: 600;
  color: var(--navy-primary);
  margin: var(--space-2) 0 0;
}

.testimonial-card__name span {
  font-weight: 400;
  color: var(--text-secondary);
}

.testimonial-card__name span::before {
  content: " \2014 ";
}

/* ---- Pricing (built 2026-08-24) -------------------------------------------
   Dark navy section (same background/vignette treatment as .hero/.works)
   so it creates a strong transition from the light .support section
   above it. Intro block reuses .works__headline/.works__supporting
   directly (no new headline/description CSS) for visual consistency
   with How It Works and Different Leads — this section's eyebrow uses
   the plain gold .eyebrow (not .eyebrow--dark, which is for light
   sections). */
.pricing {
  position: relative;
  overflow: hidden;
  background: var(--navy-primary);
  color: var(--white);
  padding: var(--space-11) 0;
}

.pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at -8% -12%, rgba(23, 34, 56, 0.85), transparent 55%),
    radial-gradient(760px 540px at 108% 38%, rgba(255, 186, 66, 0.045), transparent 55%),
    radial-gradient(900px 680px at 46% 118%, rgba(23, 34, 56, 0.9), transparent 55%);
  pointer-events: none;
}

.pricing > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .pricing {
    padding: var(--space-7) 0;
  }
  /* Mobile-only narrower side padding (2026-08-25), same technique as
     .hero/.problem/#how-it-works — gains width for the headline size
     below. */
  .pricing .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Headline size (2026-08-25): target was 38–42px; measured directly
     that "Same System Either Way" (the wider of the two desired lines)
     needs 332px at 27px font, against 343px available at 375px — an
     11px margin; 28px overshoots to 344px. Paired with an explicit <br
     class="break-mobile"> in the markup so "Simple Pricing." / "Same
     System Either Way" is guaranteed. Flagged — 11–15px short of the
     38–42px target. Reuses .works__headline/.works__supporting like
     the rest of this section's intro, so scoped to .pricing here rather
     than touching the shared class other sections also use. */
  .pricing .works__headline {
    font-size: 27px;
    line-height: 1.15;
  }
  .pricing .works__supporting {
    line-height: 1.5;
  }
}

/* Two substantial, similar-sized cards — not a feature-comparison
   table, no toggle. Annual gets stronger emphasis via border/glow only
   (see .pricing-card--annual below), never a larger card. */
.pricing__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
  margin-top: var(--space-8);
  align-items: stretch;
}

@media (max-width: 860px) {
  .pricing__cards {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 768px) {
  .pricing__cards {
    margin-top: var(--space-6);
  }
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--navy-secondary);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-media);
  padding: var(--space-7);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .pricing-card {
    padding: 28px var(--space-5);
  }
}

/* Annual's "stronger visual emphasis" — a warmer gold border plus a
   soft blurred glow behind the card (::before), the same glow-plus-
   offset-gold visual language already used for testimonial video
   frames (.testimonial-frame), scaled down and restrained: a light
   accent, not a second competing border or an oversized ribbon. */
.pricing-card--annual {
  border-color: rgba(255, 186, 66, 0.5);
  box-shadow: 0 28px 60px -26px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 186, 66, 0.1);
}

.pricing-card--annual::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  border-radius: calc(var(--radius-media) + 12px);
  background: radial-gradient(60% 60% at 30% 0%, rgba(255, 186, 66, 0.14), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}

.pricing-card__badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-primary);
  background: var(--gold);
  padding: 4px 11px;
  border-radius: 999px;
  margin: 0 0 var(--space-4);
}

.pricing-card__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--space-2);
}

/* The strongest visual element in each card, per Craig's explicit
   direction — deliberately larger than the section headline. */
.pricing-card__price {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 var(--space-3);
}

.pricing-card__price span {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 2px;
}

@media (max-width: 768px) {
  .pricing-card__price {
    font-size: 38px;
  }
  .pricing-card__price span {
    font-size: 16px;
  }
}

.pricing-card__implementation {
  font-size: var(--size-body);
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 var(--space-2);
}

/* Added 2026-08-27, repositioned same day (second pass): a short
   clarification of what the $497 fee covers. Originally placed directly
   under .pricing-card__implementation; moved to directly under
   .pricing-card__transparency instead so the three pricing figures
   (price, one-time implementation fee, first-year total) stay grouped
   together with their existing tight spacing (12px/8px) uninterrupted —
   this note no longer sits between two of those figures. Matches
   .pricing-card__transparency's "small, muted secondary microcopy" tier
   (same font-size/color) so it still reads as secondary to the pricing
   above it. margin-bottom bumped 8px -> 24px (space-5, matching
   .pricing-card__support's own spacing) now that it precedes the
   "Start monthly..." line rather than sitting tightly under a single
   figure — 24px reads as a clean paragraph break rather than looking
   like it's still attached to one line above it. Monthly-only: the
   Annual card has no equivalent fee line to clarify ("Implementation
   included" needs no further explanation there). */
.pricing-card__implementation-note {
  font-size: var(--size-body-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 var(--space-5);
}

.pricing-card__transparency {
  font-size: var(--size-body-sm);
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 var(--space-5);
}

.pricing-card__support {
  font-size: var(--size-body-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 var(--space-5);
}

/* Savings made easy to notice (gold, bold) without a banner/ribbon —
   just weight and color, the same restrained toolkit used for gold
   accents elsewhere on the page. */
.pricing-card__savings {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--size-body);
  color: var(--gold);
  margin: 0 0 var(--space-1);
}

/* Guarantees a real minimum gap above the CTA on both cards (added
   2026-08-24) — .pricing-card__cta previously used margin-top:auto
   directly, which just absorbs whatever space is left over once the
   grid's align-items:stretch equalizes both cards to the taller
   (Annual's) natural height. Annual has more content above the button
   than Monthly (the badge, the extra savings line), so its own
   leftover space was much smaller — the auto margin gave Monthly a
   generous gap and Annual almost none, even though both cards were the
   same overall height. Fix: .pricing-card__body (wraps everything
   above the CTA) takes flex:1 and absorbs the leftover space instead,
   and the CTA gets its own fixed margin-top on top of that — so both
   buttons now get at least this same explicit gap regardless of how
   much content is above them, with any remaining slack still going to
   .pricing-card__body so the buttons stay bottom-aligned across cards.

   var(--space-6) chosen over a larger value after measuring both:
   32px gives Annual a real 36px gap (was ~4px) without inflating
   Monthly's already-comfortable ~84px gap further. Tried 48px too —
   it grows both (52px/100px) but the GAP BETWEEN THE TWO GAPS stays
   fixed at ~48px either way (it's set by how much more content Annual
   has above the button, not by this margin value), so a bigger base
   only made Monthly's spacing larger without meaningfully closing that
   relative difference. Making the two pixel-identical would require
   letting the cards differ in height, which conflicts with the
   original brief's "cards should be similar in overall size" — kept
   equal height as the higher-priority constraint. */
.pricing-card__body {
  flex: 1 1 auto;
}

.pricing-card__cta {
  justify-content: center;
  width: 100%;
  margin-top: var(--space-6);
}

/* Mobile spacing fix (2026-08-25). Reported as "excessive empty space
   in the Monthly card before its CTA" and assumed to be the desktop
   equal-height/flex-grow mechanism above leaking onto mobile — but
   measurement showed that mechanism is already a no-op on mobile
   (.pricing__cards is single-column here, so each card's grid row is
   sized to that card alone; align-items:stretch has nothing taller in
   its own row to stretch to). The real cause: Monthly's last body
   paragraph (.pricing-card__support, margin-bottom: var(--space-5) =
   24px) and Annual's (.pricing-card__savings, margin-bottom:
   var(--space-1) = 4px) are different elements with different trailing
   margins, so the CTA's fixed margin-top (32px) stacked on top of each
   gave visibly different total gaps (56px vs 36px) even though the
   cards' own heights were already close. Fixed by zeroing whichever
   element is last inside the body on mobile, so the CTA's own 32px
   margin-top is the only thing setting the gap on both cards — lands
   in the requested 28-36px range without touching desktop, where the
   differing trailing margins are part of the existing approved equal-
   height layout and were left alone. align-items:start added as a
   defensive, explicit statement that cards are content-sized (not
   equal-height) on mobile, matching the current actual behavior;
   flex:none on the body is likewise a defensive no-op here (nothing to
   grow into on mobile) added so the desktop-only growth behavior can
   never accidentally apply at this width if the layout changes later. */
@media (max-width: 768px) {
  .pricing__cards {
    align-items: start;
  }

  .pricing-card__body {
    flex: none;
  }

  .pricing-card__body > *:last-child {
    margin-bottom: 0;
  }
}

/* Content below the cards (SWAPPED 2026-08-25 — replaces the former
   six-bullet .pricing__included checklist; see the HTML comment above
   the section for the full rationale). Deliberately quieter than the
   pricing cards: no border/rule separating it from the cards (removed
   per Craig's explicit "no borders" brief — the old checklist had one),
   no card backgrounds, no icons, small dash-marker-free plain text.
   This is a first-pass visual-weight test, not a final density —
   margin-top kept modest (space-7 = 48px) rather than a full section-
   gap value so it reads as a quiet coda to the cards, not a new
   section. */
.pricing__edge-wrap {
  margin-top: var(--space-7);
}

.pricing__inclusions {
  font-size: var(--size-body-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: 640px;
  margin: 0 0 var(--space-6);
}

/* Desktop-only centering (2026-08-25): reads as one shared statement
   for both cards rather than copy left-aligned under the Craig column.
   Widened max-width (640px -> 900px, within Craig's 850-950px ask) and
   centered as a block via margin auto; text-align: center is scoped
   here too so mobile keeps left-aligned body copy. Color/font-size/
   line-height and the top/bottom spacing on .pricing__edge-wrap /
   .pricing__inclusions above are untouched. */
@media (min-width: 769px) {
  .pricing__inclusions {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* Two-column on desktop, no card/border/icon treatment. Headings are
   18px — smaller than the pricing cards' own price display (48px),
   the boldest/largest text inside each card — so these blocks read as
   a quiet footnote, not a competing focal point. */
.pricing__edge {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
}

.pricing__edge-heading {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--white);
  margin: 0 0 var(--space-2);
}

.pricing__edge-copy {
  font-size: var(--size-body-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

@media (max-width: 700px) {
  .pricing__edge {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* Mobile-only density pass (2026-08-25): shorter .mobile-only copy
   above reduces text volume; these three gaps were also each trimmed
   slightly (cards→inclusions, inclusions→heading, block→block) so the
   whole thing reads as a concise closing note rather than another full
   section — body font size intentionally left untouched. The section's
   own bottom padding (var(--space-11), set elsewhere) is unchanged, so
   spacing before FAQ stays comfortable. */
@media (max-width: 768px) {
  .pricing__edge-wrap {
    margin-top: 20px;
  }

  .pricing__inclusions {
    margin-bottom: var(--space-4);
  }
}

/* ---- FAQ (built 2026-08-24) ------------------------------------------------
   Light section (same bg-offwhite/text-on-light tokens as .results/
   .support) directly after dark .pricing, for the same dark→light
   "clear chapter change" reasoning used at every other section boundary
   on this page. Intro reuses .eyebrow--dark + .support__headline/
   .support__supporting verbatim — no new intro CSS needed. */
.faq {
  background: var(--bg-offwhite);
  color: var(--text-on-light);
  padding: var(--space-11) 0;
}

@media (max-width: 768px) {
  .faq {
    padding: var(--space-7) 0;
  }
  /* Headline size (2026-08-25) — this section reuses the shared
     .support__headline class for its intro (see the HTML comment above
     this section), but Craig wants it sized to match the other major-
     section headlines (Featured Client Results/Pricing, both 27px), not
     the actual Support section's own headline it borrows styling from
     (34px, intentionally — see .support__headline's own mobile rule,
     which this does not touch). Scoped to #faq specifically for that
     reason.

     "Keep this exact mobile wrap" (Before You / Schedule the Call) and
     "match the ~27px major-section scale" turned out to conflict on
     their own: measured directly that natural wrap only lands on that
     exact split within a widely different font-size window depending
     on viewport width (needs ≥32px at 375px, ≥33px at 390px, but ≥37px
     at 430px — the current 34px value doesn't even hold it at 430px
     today). No single size satisfies the wrap at all three widths
     without either overshooting the size target or breaking on the
     widest phone. Fixed at the root instead: the HTML now carries an
     explicit <br class="break-mobile"> between "You" and "Schedule",
     the same technique used elsewhere in this pass, so the exact split
     is guaranteed and the font-size is free to match the 27px
     reference exactly. */
  #faq .support__headline {
    font-size: 27px;
    line-height: 1.15;
  }
}

/* One substantial centered column (900-1000px target) rather than two
   narrow ones, per Craig's explicit direction — questions stay
   substantial and easy to scan instead of cramped side by side. */
.faq__list {
  max-width: 960px;
  margin: var(--space-8) auto 0;
}

@media (max-width: 768px) {
  .faq__list {
    margin-top: var(--space-6);
  }
}

/* Plain editorial list with hairline dividers — no card background, no
   shadow per item — so nine rows read as one continuous, scannable
   list rather than nine separate boxes ("no generic SaaS template
   look," "avoid giant cards around every question"). */
.faq-item {
  border-bottom: 1px solid var(--border-standard);
}

.faq-item:first-child {
  border-top: 1px solid var(--border-standard);
}

.faq-item__heading {
  margin: 0;
  font-weight: inherit;
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.4;
  color: var(--navy-primary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq-item__trigger:hover {
  color: var(--gold-hover);
}

.faq-item__trigger:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Same chevron already used for the scenario dropdown — no new icon,
   restrained rotate-on-open instead of a plus/minus swap. */
.faq-item__icon {
  flex-shrink: 0;
  color: var(--gold);
  transition: transform var(--transition-fast);
}

.faq-item__trigger[aria-expanded="true"] .faq-item__icon {
  transform: rotate(180deg);
}

/* Height animates via grid-template-rows (0fr -> 1fr) instead of a JS-
   measured max-height — no scrollHeight calculation needed, and it
   naturally handles content of any length (relevant later once real
   answer copy of varying length replaces the placeholders). The inner
   wrapper is required for this technique: a 0fr grid row collapses its
   item to zero height only if the item itself can shrink below its
   content's natural height, which needs min-height:0 + overflow:hidden
   on that inner box. */
.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms ease;
}

.faq-item__panel.is-open {
  grid-template-rows: 1fr;
}

.faq-item__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-item__answer {
  margin: 0;
  padding: 0 0 var(--space-6);
  max-width: 68ch;
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .faq-item__panel {
    transition: none;
  }
  .faq-item__icon {
    transition: none;
  }
}

@media (max-width: 768px) {
  .faq-item__trigger {
    padding: var(--space-4) 0;
    gap: var(--space-3);
    font-size: 17px;
  }
  .faq-item__answer {
    padding-bottom: var(--space-5);
  }
}

/* ---- Final CTA (built 2026-08-24) ------------------------------------------
   Dark navy (same background as Hero), centered single column, closes
   the page on strong contrast against the light FAQ above it. Reuses
   the same layered-depth vignette used on every other dark section for
   visual consistency with the top of the page. */
.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--navy-primary);
  color: var(--white);
  padding: var(--space-11) 0;
  text-align: center;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at -8% -12%, rgba(23, 34, 56, 0.85), transparent 55%),
    radial-gradient(760px 540px at 108% 38%, rgba(255, 186, 66, 0.045), transparent 55%),
    radial-gradient(900px 680px at 46% 118%, rgba(23, 34, 56, 0.9), transparent 55%);
  pointer-events: none;
}

.final-cta > .container {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

@media (max-width: 768px) {
  .final-cta {
    padding: var(--space-7) 0;
  }
}

.final-cta__headline {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--size-section-headline);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--white);
  margin: 0 0 var(--space-5);
}

.final-cta__supporting {
  font-size: var(--size-body-lg);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
  margin: 0 auto var(--space-7);
}

@media (max-width: 768px) {
  .final-cta__headline {
    margin-bottom: 18px;
  }
  .final-cta__supporting {
    margin-bottom: var(--space-6);
  }
}

/* Full-width on mobile only for a comfortable tap target — same
   pattern already used for the pricing-card CTAs. Desktop stays
   content-width, centered via the section's text-align:center and
   .btn's own inline-flex (no extra centering CSS needed). */
@media (max-width: 480px) {
  .final-cta__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Footer (built 2026-08-24) --------------------------------------------
   Understated closing element below Final CTA — legal/contact/login links
   and a copyright line only. Deliberately small type and muted color so it
   never competes with the page's conversion goal. Slightly lighter navy
   (--navy-secondary) than Final CTA's --navy-primary gives a subtle seam
   between the two dark sections without a hard border. */
.site-footer {
  background: var(--navy-secondary);
  color: rgba(255, 255, 255, 0.6);
  padding: var(--space-6) 0;
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
}

.site-footer__copyright {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--size-body-sm);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  font-size: var(--size-body-sm);
}

.site-footer__links a {
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition-fast);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--white);
}

/* Mobile-only centering (2026-08-26): the desktop space-between/left-
   aligned layout above is untouched — this just re-centers the same
   two elements beneath the (also centered) Final CTA above it, so the
   footer reads as an intentional, quiet close to the page rather than
   a left-hugging leftover from the desktop row layout. No wording,
   color, or font-size changes; .site-footer__links keeps flex-wrap so
   the four links still wrap into as many centered rows as needed. */
@media (max-width: 768px) {
  .site-footer {
    padding: var(--space-5) 0 var(--space-6);
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
  }

  .site-footer__links {
    justify-content: center;
    width: 100%;
    gap: var(--space-3) var(--space-4);
  }
}