/*!
 * wa8-components.css
 * © 2026 WeActive8 LLC. All rights reserved.
 *
 * Component-level styles extracted from inline <style> blocks. Hand-
 * authored by the WeActive8 team. Sources (in cascade order):
 *   components/v3/WA8CtaStyles.tsx            (.wa8-hero-cta + mobile polish)
 *   components/v3/HeroPolish.tsx              (.wa8-typewriter + featured-work)
 *   components/v3/DesktopMegaNav.tsx          (.wa8-mega + .wa8-mob drawer)
 *   components/v3/ActivationStackInteractive.tsx (.wa8-asi-*)
 *   components/v3/LeadMagnetBar.tsx           (.wa8-lead-magnet-*)
 *
 * Layout emits a <link> AFTER /wa8-chrome.css so cascade order is
 * preserved (wa8-utilities.css → wa8-chrome.css → wa8-components.css).
 */

/* ─── components/v3/WA8CtaStyles.tsx ──────────────────────────── */
/* @property registrations needed by the secondary CTA's animated
   conic-gradient border trace. Without these the angle would jump
   instead of transitioning. */
@property --wa8-hero-cta-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --wa8-cta-trace {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.wa8-hero-ctas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 6px;
}
.wa8-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  padding: 0 36px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.012em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-feature-settings: "ss01", "ss02", "kern";
  transition: background 180ms ease, color 180ms ease;
}

/* Primary — lime fill, dark text. WAP D-07 lime-yellow #E9FC00.
   Chevron is always present (so the text never shifts); on hover the
   chevron slides 3px right. No translateY lift anywhere. */
.wa8-hero-cta-primary {
  background: #E9FC00;
  color: #0B0B12;
  gap: 8px;
}
.wa8-hero-cta-primary::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%230B0B12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,2 6,6 2,10'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
  transform: translateX(0);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.wa8-hero-cta-primary:hover {
  background: #DDEF00;
  color: #0B0B12;
}
.wa8-hero-cta-primary:hover::after {
  transform: translateX(3px);
}

/* Secondary — dark glass pill. Idle has no border; on hover a white
   border traces in from 12 o'clock (700ms full lap, holds). On
   hover-out the trace reverses. Pure CSS via @property +
   conic-gradient driven by --wa8-cta-trace. No JS, no SVG, no
   transform lift. */
.wa8-hero-cta-secondary {
  position: relative;
  background: rgba(15, 30, 80, 0.42);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  color: #ffffff;
  border: 0;
  isolation: isolate;
  --wa8-cta-trace: 0deg;
  transition: background 320ms ease;
}
.wa8-hero-cta-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.92) 0deg,
    rgba(255, 255, 255, 0.92) var(--wa8-cta-trace),
    transparent var(--wa8-cta-trace),
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: --wa8-cta-trace 700ms cubic-bezier(0.6, 0, 0.4, 1);
}
.wa8-hero-cta-secondary:hover {
  background: rgba(35, 60, 130, 0.5);
}
.wa8-hero-cta-secondary:hover::before {
  --wa8-cta-trace: 360deg;
}
@media (prefers-reduced-motion: reduce) {
  .wa8-hero-cta-secondary,
  .wa8-hero-cta-secondary::before { transition: none; }
}

/* Subtle text-link CTA used as the secondary on above-footer dual
   pairs (homepage bottom, final CTA on services + audit pages). */
.wa8-hero-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.28);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: color 300ms ease, text-decoration-color 300ms ease;
}
.wa8-hero-textlink::after {
  content: "→";
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.wa8-hero-textlink:hover {
  color: rgba(255, 255, 255, 0.96);
  text-decoration-color: rgba(255, 255, 255, 0.55);
}
.wa8-hero-textlink:hover::after {
  transform: translateX(3px);
}

/* ─── MOBILE POLISH (<900px) — global centering fixes ─────────────
   Audit 2026-05-17: at iPhone 14 Pro (393px) multiple CTAs landed
   flush-left or at an arbitrary x-offset because their desktop layout
   put them inside a left-padded column with no mobile override. The
   rules below center those CTAs against the section axis at narrow
   viewports without altering desktop behavior.

   The selectors target the canonical CTA classes from each section
   (persona cards 1/2/3, lead magnet bar, home resource strip, the
   chrome footer CTA, hero CTAs, calculator callout). Anything
   outside this list stays on its existing rules.
*/
@media (max-width: 900px) {
  /* Persona card CTAs */
  .wa8-persona-cta-wrap,
  .wa8-persona-card-2-cta-wrap,
  .wa8-persona-card-3-cta-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .wa8-persona-cta-btn,
  .wa8-persona-card-2-cta-btn,
  .wa8-persona-card-3-cta-btn {
    margin-left: auto;
    margin-right: auto;
  }

  /* Persona card 1 text panel — drop the desktop left margin so the
     centered CTA sits in the middle of the viewport, not offset by
     the heading's left padding. */
  .wa8-persona-card-1-text {
    margin-left: 0 !important;
    max-width: 100% !important;
    text-align: center;
  }
  .wa8-persona-card-1-text .wa8-persona-cta-wrap {
    justify-content: center;
  }

  /* Lead-magnet text CTA */
  .wa8-lead-magnet-copy {
    text-align: center;
  }
  .wa8-lead-magnet-text-cta {
    display: inline-flex;
    margin-left: auto;
    margin-right: auto;
  }

  /* Home resource strip CTA */
  .wa8-hrs {
    text-align: center;
  }
  .wa8-hrs-cta {
    display: inline-flex;
    margin-left: auto;
    margin-right: auto;
  }

  /* Footer mobile policy (<=900px):
       Show the WeActive8 logo + primary CTA centered at the top,
       then a small copyright + legal links row at the bottom.
       Hide the desktop nav columns + tagline.
       Sticky mobile nav + 9-dots launcher cover real navigation;
       the footer just signs off with brand + legal compliance.
       Locked 2026-05-17 per founder ask. */
  section.footer .wa8-footer-col,
  section.footer .wa8-footer-tag {
    display: none !important;
  }
  section.footer .wa8-footer-grid {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }
  section.footer .wa8-footer-brand {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }
  section.footer .wa8-footer-brand-link {
    margin: 0 auto !important;
  }
  section.footer .wa8-footer-logo {
    max-width: min(220px, 60vw) !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  section.footer .wa8-footer-cta {
    display: inline-flex !important;
    margin: 0 auto !important;
  }
  /* Bottom legal row stays visible but reflows to a centered stack.
     Address is hidden on mobile (the city + street is on the
     Contact + About pages already; the legal links plus copyright
     are the load-bearing pieces here). */
  section.footer .wa8-footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(11, 11, 18, 0.1);
    width: 100% !important;
  }
  section.footer .wa8-footer-bottom-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
  }
  section.footer .wa8-footer-addr {
    display: none !important;
  }
  section.footer .wa8-footer-copyright {
    font-size: 12px !important;
    /* Dark — the footer is a white surface. The old white value was
       a leftover from the dark-footer era and rendered invisible. */
    color: #6b7280 !important;
  }
  section.footer .wa8-footer-bottom-right {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px !important;
  }
  section.footer .wa8-footer-legal-link {
    font-size: 12px !important;
    color: #4b5563 !important;
  }
  section.footer .wa8-footer-legal-link:hover {
    color: #0B0B12 !important;
  }

  /* Below-footer dual-CTA "buttons" group (sn-closing-cta etc.) —
     stack vertically and center on mobile. */
  .buttons,
  .wa8-hero-ctas {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .buttons > a,
  .wa8-hero-ctas > a {
    width: 100%;
    max-width: 320px;
  }

  /* Hero CTA pills — tighten the size at narrow viewport so
     "See our Solutions" fits comfortably without internal padding
     squeeze. */
  .wa8-hero-cta {
    height: 56px;
    padding: 0 24px;
    font-size: 17px;
  }
}

/* Extra-narrow polish for iPhone SE-class devices (375px). */
@media (max-width: 420px) {
  .wa8-hero-cta {
    font-size: 16px;
    padding: 0 22px;
    height: 54px;
  }
  .buttons > a,
  .wa8-hero-ctas > a {
    max-width: 100%;
  }
}

/* ─── components/v3/HeroPolish.tsx ────────────────────────────── */
/* ─── Hero typewriter caret ─────────────────────────────────────── */
.wa8-typewriter {
  display: inline-block;
  min-width: 1ch;
}
.wa8-typewriter-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.86em;
  margin-left: 0.06em;
  background: currentColor;
  vertical-align: -0.08em;
  animation: wa8-tw-blink 1s steps(2, jump-none) infinite;
}
@keyframes wa8-tw-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wa8-typewriter-caret { display: none; }
}

/* ─── Hero stack — kill space-between AND flex-grow on heading-wrap.
       Two the upstream chrome rules combined to push the sub+CTAs to the bottom of
       the viewport: (1) .wa8-hero-content-wrap had justify-content:
       space-between, and (2) .wa8-hero-heading-wrap had flex:1 which
       made the H1 area consume all remaining vertical space. Both
       overridden so the H1 sits content-tight and the sub+body+CTAs
       stack tight underneath. */
.wa8-stack.wa8-hero-content-wrap {
  /* Vertically center the whole hero stack in the section, per
     founder ask. Was flex-start with padding-top, which left the
     stack hugging the top edge. Gap bumped to 56px to put air
     between the H1 question and the promise+body+CTAs block — the
     16px tight version made the two read as one mashed block. */
  justify-content: center !important;
  gap: 56px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.wa8-hero-heading-wrap {
  flex: 0 0 auto !important;
  margin: 0 !important;
  /* H1 reads at ~70% viewport width per founder ask. max-width pins
     it; min-width lets it grow on small viewports. */
  max-width: 70vw !important;
  width: 100% !important;
}
.wa8-hero-content {
  gap: 22px !important;
  margin-top: 0 !important;
  flex: 0 0 auto !important;
  max-width: 70vw !important;
  width: 100% !important;
}
.wa8-hero-content .wa8-h5 { margin: 0 !important; }

/* Body paragraph under the promise. Bump from the upstream chrome's default
   .wa8-h5 size (~16px) to a more readable hero-body scale,
   vw-driven so it tracks H1 + promise. */
.wa8-hero-body {
  font-size: clamp(18px, 1.45vw, 24px) !important;
  line-height: 1.45 !important;
  letter-spacing: -0.005em !important;
  max-width: 60ch;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* H1 size — vw-driven, sized to leave room for the promise + body
   to share visual weight. Bumped down from clamp(48..132px) to
   clamp(40..108px) per founder feedback (132px was overpowering). */
.wa8-hero-heading-wrap .wa8-display,
h1.wa8-display {
  font-size: clamp(36px, 5vw, 80px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  /* Auto-balance line lengths so the H1 never orphans a single word
     on its own line ("yet?" alone). Hard <br/> in the H1 markup
     locks the 3/3 split on desktop ("Is your business / fully
     Activated yet?"); this CSS handles edge cases (mobile, future
     copy edits) where the hard break might land badly. Supported
     in all major browsers since 2024. */
  text-wrap: balance;
}

/* Brand-verb accent — gradient OUTLINE around white-filled text on
   the word "Activated" in the H1. Per founder feedback: keep the
   text white, only the stroke shows the brand gradient.
   Mechanism:
     1. -webkit-text-fill-color: #FFFFFF -> the inside of each glyph
        renders solid white.
     2. -webkit-text-stroke: 2.5px transparent -> sizes a stroke
        ring around each glyph but gives it no direct colour.
     3. background-image gradient + background-clip:text -> the
        gradient is clipped to the painted text shape (fill +
        stroke area). Since the stroke colour is transparent, the
        gradient shows through the stroke ring while the white
        text-fill-color overlays the inner area. Net result: white
        text with gradient outline. */
.wa8-hero-h1-accent {
  -webkit-text-fill-color: #FFFFFF;
          color: #FFFFFF;
  -webkit-text-stroke-width: 2.5px;
  -webkit-text-stroke-color: transparent;
  background-image: linear-gradient(
    100deg,
    #2368EF 0%,
    #9D00FF 50%,
    #00FFF6 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  paint-order: stroke fill;
}

/* Featured Work / founder section — the upstream chrome grid kept for the
   tilt + portrait silhouette. Card 1 hidden; portrait card stays
   center; Card 3 carries the blockquote + Mission/Vision/Solutions
   CTAs. */

/* Hide the "+ Become a Client" CTA in the header row. */
.wa8-fw-header-right { display: none !important; }

/* Hide the body setup line under the H2. Founder removed it
   ("Read what I tell every SMB founder before they sign.").
   TEXT_SWAP empties the content; this rule removes the empty
   paragraph from layout entirely. */
.wa8-fw-desc { display: none !important; }

/* Constrain the header row to match the cards grid (max-width
   1180px, auto-centered) so the H2 left edge aligns with the
   cards below it. Without this, the header row spans the full
   container width and the H2 floats off-center relative to the
   2-card grid. */
.wa8-fw-header-row {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 96px !important;
}

/* Card 1 hidden — blockquote moved to Card 3 (right). */
.wa8-fw-card:nth-child(1) { display: none !important; }
/* (Initial tilt for Cards 2/3 lives in template/index.html so the
   JS updateCards() inline-transform isn't blocked by !important
   here, which is what stuck the cards in the previous attempt.) */

/* 2-col centered grid (Card 1 hidden so the original 3-col 1fr 1fr 1fr
   left a dead first column). Portrait card on the left, blockquote +
   CTAs on the right. Blockquote col is wider so the quote can breathe.
   Whole grid centered with a max-width so the section doesn't read
   half-empty. */
.wa8-fw-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) !important;
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 32px !important;
}
@media (max-width: 900px) {
  .wa8-fw-grid {
    grid-template-columns: 1fr !important;
    max-width: 560px !important;
    gap: 20px !important;
  }
}

/* H2 — three brand-verb words on a single line, no wrapping ever.
   font-size is vw-driven and clamped so the line shrinks to fit
   on narrow viewports instead of wrapping. flex-wrap:nowrap +
   white-space:nowrap force single-line.
   2026-05-19: floor lowered 28px → 20px because "Activate.Educate.
   Automate." was 387px wide at 28px and bled past the 375px body
   width on 390px viewports. clamp(20px, 6vw, 64px) gives ~23px at
   390vw — fits comfortably without wrapping. */
.wa8-fw-heading {
  font-size: clamp(20px, 6vw, 64px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: 0.2em !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
.wa8-fw-h2-word {
  display: inline-flex;
  align-items: baseline;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 450ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.wa8-fw-h2-word.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .wa8-fw-h2-word {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* "Activate." gradient-outline overlay.
   The HTML span renders the same solid-black "Activate." as the
   other words. A ::before pseudo carries a duplicate of the text
   (via attr(data-text)) styled with the brand gradient on the
   stroke. clip-path wipes left->right (1.4s) to "draw on" the
   outline, then opacity fades to 0 over 0.6s after a 1.5s delay,
   leaving only the plain black text — same look as the other two
   words. Single .is-visible class trigger fires both transitions
   off the same orchestrator step. */
.wa8-fw-h2-word--activate {
  position: relative;
  display: inline-flex;
  align-items: baseline;
}
.wa8-fw-h2-word--activate::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  font: inherit;
  letter-spacing: inherit;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: transparent;
  background-image: linear-gradient(
    100deg,
    #2368EF 0%,
    #9D00FF 50%,
    #00FFF6 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  paint-order: stroke fill;
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transition:
    clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 400ms cubic-bezier(0.42, 0, 0.58, 1) 950ms;
}
.wa8-fw-h2-word--activate.is-visible::before {
  clip-path: inset(0 0 0 0);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wa8-fw-h2-word--activate::before {
    transition: none;
    opacity: 0;
    clip-path: inset(0 0 0 0);
  }
}

/* Inside-card CTA stack — the Mission/Vision/Solutions pills sit at
   the bottom of Card 3 (the right card with the blockquote above).
   Tighter padding than the standalone version since they're nested. */
.wa8-fv-cta-stack--inside-card {
  margin-top: 24px;
  height: auto;
  gap: 8px;
}
.wa8-fv-cta-stack--inside-card .wa8-fv-cta-stack-item {
  padding: 14px 18px;
  font-size: 15px;
}

/* Card 1 — bumps the the upstream chrome blockquote a touch larger so the
   AI-urgency narrative reads as a proper pull-quote, not body
   copy. Card 1 markup uses .wa8-fw-quote / .wa8-fw-quote-text
   defined in the the upstream chrome template. */
.wa8-fw-card .wa8-fw-quote-text {
  font-size: clamp(18px, 1.4vw, 22px) !important;
  line-height: 1.45 !important;
}

/* Card 2 black bar — replaces "Connect with Misbah" with a
   stacked name + title block. Socials sit on the right. */
.wa8-fv-bar-name {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.012em;
  color: #FFFFFF;
  line-height: 1.1;
}
.wa8-fv-bar-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.65);
  margin-top: 4px;
}

/* Card 3 — Mission / Vision / Solutions CTA pills stacked vertically
   with the green / blue / lime square indicators that match the
   the upstream chrome nav-pill dropdowns. Replaces the old "Real client portfolio
   / Tools built in-house / Available For Work" stack. */
.wa8-fv-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  height: 100%;
  padding: 0;
}
.wa8-fv-cta-stack-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border: 1px solid #0000001a;
  border-radius: 1rem;
  background: #fff;
  color: #0B0B12;
  text-decoration: none;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.012em;
  transition: background 180ms ease, border-color 180ms ease;
}
/* Hover: lightest possible brand-blue tint — barely a wash on white.
   No translateY lift, no shadow. */
.wa8-fv-cta-stack-item:hover {
  background: rgba(91, 140, 255, 0.07);
  border-color: rgba(91, 140, 255, 0.25);
}
.wa8-fv-cta-stack-label { flex: 1; }
/* Arrow stays brand-blue at idle (matches the Our Services arrows on
   the homepage), full opacity on hover with a small 2px diagonal
   nudge so the directional cue reads without the parent card itself
   lifting. */
.wa8-fv-cta-stack-arrow {
  color: #4F8AFF;
  opacity: 0.85;
  transition: opacity 180ms ease, transform 180ms ease;
}
.wa8-fv-cta-stack-item:hover .wa8-fv-cta-stack-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}
.wa8-fv-square {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex-shrink: 0;
}

/* Founder quote attribution line shown after the body paragraph. */
.wa8-founder-attr {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #0B0B12;
  margin-top: 12px;
}

/* Socials bar inside the Card 2 black bar, replacing the
   "40+ / Global Awards & Features / trophy" trio. */
.wa8-fv-socials {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.wa8-fv-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #FFFFFF;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}
.wa8-fv-social:hover {
  background: rgba(255,255,255,0.16);
}

/* Promise line — sits directly below the H1 question. "Get fully
   <typewriter>." Smaller than the H1 but still substantial so it
   reads as the answer to the question above it. */
.wa8-hero-promise {
  font-family: inherit;
  font-size: clamp(24px, 2.8vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hero CTA classes (.wa8-hero-cta + primary/secondary/textlink) are
   defined in components/v3/WA8CtaStyles.tsx, mounted from layout.tsx
   so they ship on every legacy-chrome page — not just the homepage.
   Lifted out of HeroPolish on 2026-05-13. */

/* ─── components/v3/DesktopMegaNav.tsx ────────────────────────── */
        .wa8-mega {
          position: fixed;
          top: 16px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 200;
          width: min(1200px, calc(100vw - 32px));
          display: none;
        }
        @media (min-width: 992px) {
          .wa8-mega { display: block; }
        }

        /* Viewport scrim — sibling of .wa8-mega, fades in whenever a
           dropdown panel is open. Behind the nav (z 190 < 200) but in
           front of all page content. Non-interactive (pointer-events:
           none) so it never intercepts clicks or hover events; the
           dropdown itself manages its own hover lifecycle. */
        .wa8-mega-scrim {
          position: fixed;
          inset: 0;
          z-index: 190;
          background: rgba(0, 0, 0, 0.35);
          opacity: 0;
          pointer-events: none;
          display: none;
          transition: opacity 220ms ease;
        }
        @media (min-width: 992px) {
          .wa8-mega-scrim { display: block; }
        }
        .wa8-mega-scrim.is-open { opacity: 1; }
        @media (prefers-reduced-motion: reduce) {
          .wa8-mega-scrim { transition: none; }
        }

        .wa8-mega-pill {
          display: flex;
          align-items: center;
          gap: clamp(12px, 2vw, 28px);
          padding: 20px 40px;
          border-radius: 999px;
          background: rgba(0, 0, 0, 0.3);
          backdrop-filter: blur(90px) saturate(180%);
          -webkit-backdrop-filter: blur(90px) saturate(180%);
          border: 1px solid rgba(255, 255, 255, 0.08);
          color: #ffffff;
        }
        .wa8-mega-brand {
          display: inline-flex;
          align-items: center;
          flex-shrink: 0;
          text-decoration: none;
        }
        .wa8-mega-brand img { height: 28px; width: auto; display: block; }

        .wa8-mega-primary {
          display: flex;
          align-items: center;
          gap: 2px;
          margin-left: auto;
        }
        .wa8-mega-link {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 9px 14px;
          font: inherit;
          font-size: 15.5px;
          font-weight: 500;
          color: rgba(255, 255, 255, 0.82);
          background: transparent;
          border: none;
          border-radius: 999px;
          cursor: pointer;
          text-decoration: none;
          white-space: nowrap;
          transition: color 0.15s ease, background 0.15s ease;
        }
        .wa8-mega-link:hover,
        .wa8-mega-link:focus-visible,
        .wa8-mega-trigger.is-active {
          color: #ffffff;
          background: rgba(255, 255, 255, 0.06);
        }
        /* Current-page highlight — sits above the generic hover. Soft
           brand-green pill so the user knows which top-level surface
           they're on. Brightens on hover. Applied via aria-current /
           .is-current class set from the pathname matcher above. */
        .wa8-mega-link.is-current {
          color: #ffffff;
          background: rgba(91, 255, 107, 0.16);
        }
        .wa8-mega-link.is-current:hover,
        .wa8-mega-link.is-current:focus-visible,
        .wa8-mega-trigger.is-current.is-active {
          background: rgba(91, 255, 107, 0.26);
        }
        .wa8-mega-dot {
          width: 8px;
          height: 8px;
          border-radius: 2px;
          display: inline-block;
          flex-shrink: 0;
        }
        .wa8-mega-dot.is-green { background: #5BFF6B; }
        .wa8-mega-dot.is-blue { background: #5B8CFF; }
        .wa8-mega-dot.is-yellow { background: #E9FC00; }

        .wa8-mega-cta {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 10px 18px;
          font-size: 14px;
          font-weight: 600;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: #ffffff;
          background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.16);
          border-radius: 999px;
          text-decoration: none;
          flex-shrink: 0;
          transition: background 0.18s ease, border-color 0.18s ease;
        }
        .wa8-mega-cta:hover {
          background: rgba(255, 255, 255, 0.12);
          border-color: rgba(255, 255, 255, 0.28);
        }
        .wa8-mega-cta-arrow { font-size: 13px; line-height: 1; }

        /* Full-pill-width hover bridge that keeps the panel open
           while the cursor crosses the gap between the pill and the
           panel. Same width as the pill, sits in the visual gap. */
        .wa8-mega-bridge {
          height: 18px;
          pointer-events: none;
          width: 100%;
        }
        .wa8-mega.has-active .wa8-mega-bridge,
        .wa8-mega-panel-wrap.is-open ~ .wa8-mega-bridge,
        .wa8-mega:hover .wa8-mega-bridge {
          pointer-events: auto;
        }

        .wa8-mega-panel-wrap {
          position: relative;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-6px);
          transition: opacity 0.2s ease, transform 0.2s ease,
                      visibility 0s 0.22s;
          pointer-events: none;
        }
        .wa8-mega-panel-wrap.is-open {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
          transition: opacity 0.2s ease, transform 0.2s ease,
                      visibility 0s;
          pointer-events: auto;
        }

        .wa8-mega-panel {
          padding: 22px;
          border-radius: 22px;
          background: rgba(0, 0, 0, 0.3);
          backdrop-filter: blur(90px) saturate(180%);
          -webkit-backdrop-filter: blur(90px) saturate(180%);
          border: 1px solid rgba(255, 255, 255, 0.08);
          color: #ffffff;
          animation: wa8-mega-swap 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        @keyframes wa8-mega-swap {
          0% { opacity: 0; filter: blur(8px); transform: translateY(-4px); }
          100% { opacity: 1; filter: blur(0); transform: translateY(0); }
        }
        /* Resend-style direction-aware swap. When the cursor moves
           between sibling triggers we keep the panel window in place
           and slide the new content in from the cursor's direction
           with a brief motion blur. */
        @keyframes wa8-mega-swap-from-right {
          0% { opacity: 0; filter: blur(12px); transform: translateX(32px); }
          100% { opacity: 1; filter: blur(0); transform: translateX(0); }
        }
        @keyframes wa8-mega-swap-from-left {
          0% { opacity: 0; filter: blur(12px); transform: translateX(-32px); }
          100% { opacity: 1; filter: blur(0); transform: translateX(0); }
        }
        .wa8-mega-panel--from-right {
          animation: wa8-mega-swap-from-right 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        .wa8-mega-panel--from-left {
          animation: wa8-mega-swap-from-left 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        @media (prefers-reduced-motion: reduce) {
          .wa8-mega-panel,
          .wa8-mega-panel--from-right,
          .wa8-mega-panel--from-left { animation: none; }
        }

        .wa8-mega-columns {
          display: grid;
          gap: 12px;
        }
        .wa8-mega-columns--1 { grid-template-columns: minmax(0, 320px); }
        .wa8-mega-columns--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .wa8-mega-columns--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .wa8-mega-columns--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .wa8-mega-col {
          display: flex;
          flex-direction: column;
          gap: 2px;
          padding: 10px 12px;
        }
        .wa8-mega-col-title {
          font-size: 14px;
          font-weight: 800;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, 0.88);
          padding: 4px 0 10px;
        }
        /* Leaf links: pre-allocated chevron slot stays empty at idle
           (opacity 0); on hover the color flips to brand lime and the
           chevron fades in with a 4px translateX nudge. 100ms total
           for a snappy hover. */
        .wa8-mega-leaf {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          padding: 9px 0;
          font-size: 17px;
          font-weight: 500;
          color: rgba(255, 255, 255, 0.82);
          text-decoration: none;
          letter-spacing: -0.005em;
          transition: color 100ms ease, filter 100ms ease;
        }
        .wa8-mega-leaf-icon {
          width: 22px;
          height: 22px;
          flex-shrink: 0;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          opacity: 0.78;
          /* Icon SVGs use currentColor for every stroke/fill, so they
             inherit the leaf's color: idle off-white, hover brand lime.
             No filter chain — the dark backing tile is gone and the
             shape itself recolors cleanly. */
          transition: opacity 100ms ease;
        }
        .wa8-mega-leaf:hover .wa8-mega-leaf-icon { opacity: 1; }
        .wa8-mega-leaf-logo {
          height: 20px;
          width: auto;
          max-width: 140px;
          object-fit: contain;
          object-position: left center;
          opacity: 0.88;
          transition: opacity 100ms ease;
        }
        .wa8-mega-leaf--logo {
          /* Drop the chevron on logo leaves — the wordmark IS the
             label, no need for a second motion cue. */
        }
        .wa8-mega-leaf--logo:hover .wa8-mega-leaf-logo { opacity: 1; }
        .wa8-mega-leaf-label {
          /* Label span so the chevron only sits next to text leaves. */
        }
        .wa8-mega-leaf:not(.wa8-mega-leaf--logo)::after {
          content: "";
          display: inline-block;
          width: 0.6em;
          height: 0.6em;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%23E9FC00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,2 6,6 2,10'/%3E%3C/svg%3E");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          opacity: 0;
          transform: translateX(-4px);
          transition: opacity 100ms ease, transform 100ms ease;
        }
        .wa8-mega-leaf:hover { color: #E9FC00; }
        .wa8-mega-leaf:not(.wa8-mega-leaf--logo):hover::after {
          opacity: 1;
          transform: translateX(0);
        }

        /* Current-page leaf — applied when usePathname matches the
           leaf's href. Brand-lime accent + filled marker so the
           visitor immediately sees which leaf they're on after
           opening the dropdown. Stacks beneath the chevron hover on
           non-current leaves. */
        .wa8-mega-leaf--current {
          color: #E9FC00 !important;
        }
        .wa8-mega-leaf--current::before {
          content: "";
          position: absolute;
          left: -10px;
          top: 50%;
          width: 4px;
          height: 4px;
          margin-top: -2px;
          border-radius: 50%;
          background: #E9FC00;
        }
        .wa8-mega-leaf {
          position: relative;
        }

        /* Disabled leaf — destination not built yet. Renders as a
           non-navigable <span>; reduced alpha, not-allowed cursor,
           suppressed hover affordances (no color flip, no chevron). */
        .wa8-mega-leaf--disabled {
          opacity: 0.45;
          cursor: not-allowed;
        }
        .wa8-mega-leaf--disabled:hover { color: rgba(255, 255, 255, 0.82); }
        .wa8-mega-leaf--disabled:hover::after { opacity: 0; }

        /* Optional pill badge next to the leaf label (e.g. "BETA"). */
        .wa8-mega-leaf-pill {
          display: inline-flex;
          align-items: center;
          padding: 2px 7px;
          margin-left: 4px;
          border-radius: 999px;
          background: rgba(91, 140, 255, 0.18);
          color: #8AB0FF;
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          line-height: 1;
        }

        /* Per-column footer text-CTA (e.g. "See All Resources →").
           Sits below the column's leaves at slightly bumped weight and
           a brand-blue accent so it reads as a destination, not a
           sibling leaf. Hover flips to brand lime + arrow nudge. */
        .wa8-mega-col-footercta {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          margin-top: 10px;
          padding: 9px 0;
          font-size: 15px;
          font-weight: 600;
          color: #8AB0FF;
          text-decoration: none;
          letter-spacing: -0.005em;
          transition: color 120ms ease, gap 220ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        .wa8-mega-col-footercta-arrow {
          font-size: 1.05em;
          line-height: 1;
          transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        .wa8-mega-col-footercta:hover {
          color: #E9FC00;
          gap: 9px;
        }
        .wa8-mega-col-footercta:hover .wa8-mega-col-footercta-arrow {
          transform: translateX(3px);
        }

        /* Activation Checklist callout — dark glass surface with a
           two-layer multicolor ring:
            - ::before = DIM multicolor ring (purple -> blue -> green,
              low alpha). Always visible at idle.
            - ::after = BRIGHT multicolor trace that sweeps in
              clockwise from 12 o'clock on hover over 700ms via the
              --wa8-cta-trace @property animation. Color stops are
              scaled to var so the visible arc always carries the full
              4-color cycle; as the trace expands, the cycle expands
              with it until at 360 it overlays the dim ring exactly.
              On hover-out the trace retracts and the dim ring shows
              through again.
           Net effect: hover lights up the existing dim outline
           clockwise from the top. */
        .wa8-mega-callout {
          position: relative;
          margin-top: 14px;
          display: flex;
          align-items: stretch;
          border-radius: 18px;
          background: rgba(8, 14, 32, 0.94);
          text-decoration: none;
          isolation: isolate;
          --wa8-cta-trace: 0deg;
          transition: background 320ms ease;
        }
        .wa8-mega-callout::before,
        .wa8-mega-callout::after {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: inherit;
          padding: 1.5px;
          -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          pointer-events: none;
        }
        .wa8-mega-callout::before {
          background: conic-gradient(
            from 0deg,
            rgba(168, 85, 247, 0.5),
            rgba(59, 130, 246, 0.5) 25%,
            rgba(16, 185, 129, 0.5) 50%,
            rgba(59, 130, 246, 0.5) 75%,
            rgba(168, 85, 247, 0.5)
          );
        }
        .wa8-mega-callout::after {
          background: conic-gradient(
            from 0deg,
            rgba(168, 85, 247, 1) 0deg,
            rgba(59, 130, 246, 1) calc(var(--wa8-cta-trace) * 0.25),
            rgba(16, 185, 129, 1) calc(var(--wa8-cta-trace) * 0.5),
            rgba(59, 130, 246, 1) calc(var(--wa8-cta-trace) * 0.75),
            rgba(168, 85, 247, 1) var(--wa8-cta-trace),
            transparent var(--wa8-cta-trace),
            transparent 360deg
          );
          transition: --wa8-cta-trace 700ms cubic-bezier(0.6, 0, 0.4, 1);
        }
        .wa8-mega-callout:hover::after {
          --wa8-cta-trace: 360deg;
        }
        @media (prefers-reduced-motion: reduce) {
          .wa8-mega-callout,
          .wa8-mega-callout::after { transition: none; }
        }
        .wa8-mega-callout-icon {
          padding: 18px 6px 18px 22px;
          flex-shrink: 0;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 116px;
        }
        .wa8-mega-callout-text {
          display: flex;
          flex-direction: column;
          gap: 4px;
          padding: 22px 18px;
          flex: 1;
          min-width: 0;
        }
        .wa8-mega-callout-title {
          font-size: 15px;
          font-weight: 700;
          color: #ffffff;
          letter-spacing: -0.005em;
        }
        .wa8-mega-callout-sub {
          font-size: 13px;
          color: rgba(255, 255, 255, 0.62);
          line-height: 1.45;
        }
        .wa8-mega-callout-arrow {
          padding: 22px 22px 22px 0;
          flex-shrink: 0;
          font-size: 18px;
          line-height: 1;
          display: inline-flex;
          align-items: center;
          color: rgba(255, 255, 255, 0.6);
          transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
                      color 220ms ease;
        }
        .wa8-mega-callout:hover .wa8-mega-callout-arrow {
          transform: translateX(3px);
          color: rgba(255, 255, 255, 0.92);
        }

        /* ── PDF mock thumbnail (inside the callout icon slot) ────
           Miniature rendering of the lead-magnet PDF — three stacked
           white cards (two ghosts behind, one front) with the actual
           document structure: FREE PDF eyebrow, title, divider, four
           checklist rows, watermark + lime download pill. Decorative
           only (aria-hidden on the parent icon span). */
        .wa8-mega-pdfmock {
          position: relative;
          width: 88px;
          height: 108px;
          display: block;
          flex-shrink: 0;
        }
        .wa8-mega-pdfmock-stack {
          position: absolute;
          inset: 0;
          border-radius: 6px;
          background: #ffffff;
        }
        .wa8-mega-pdfmock-stack--back {
          transform: translate(7px, 5px) rotate(7deg);
          opacity: 0.45;
        }
        .wa8-mega-pdfmock-stack--mid {
          transform: translate(3px, 2px) rotate(3.5deg);
          opacity: 0.78;
        }
        .wa8-mega-pdfmock-card {
          position: absolute;
          inset: 0;
          border-radius: 6px;
          background: #ffffff;
          padding: 8px 8px 7px;
          display: flex;
          flex-direction: column;
          gap: 3.5px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
        }
        .wa8-mega-pdfmock-eyebrow {
          font-size: 4px;
          font-weight: 700;
          letter-spacing: 0.12em;
          color: rgba(11, 11, 18, 0.5);
          text-transform: uppercase;
          line-height: 1;
        }
        .wa8-mega-pdfmock-title {
          font-size: 6px;
          font-weight: 700;
          color: #0B0B12;
          letter-spacing: -0.01em;
          line-height: 1.15;
        }
        .wa8-mega-pdfmock-divider {
          height: 1px;
          background: rgba(11, 11, 18, 0.10);
          margin: 1px 0 1px;
        }
        .wa8-mega-pdfmock-row {
          display: flex;
          align-items: center;
          gap: 3px;
        }
        .wa8-mega-pdfmock-cb {
          width: 4px;
          height: 4px;
          border-radius: 1px;
          border: 0.5px solid rgba(11, 11, 18, 0.30);
          flex-shrink: 0;
        }
        .wa8-mega-pdfmock-line {
          height: 1.5px;
          background: rgba(11, 11, 18, 0.55);
          flex: 1;
          border-radius: 0.5px;
        }
        .wa8-mega-pdfmock-line--short { flex: 0.65; }
        .wa8-mega-pdfmock-foot {
          margin-top: auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 4px;
        }
        .wa8-mega-pdfmock-wm {
          width: 22px;
          height: 4px;
          border-radius: 1px;
          background: linear-gradient(
            90deg,
            #0B0B12 0%,
            #0B0B12 72%,
            #5B8CFF 72%,
            #A855F7 100%
          );
        }
        .wa8-mega-pdfmock-btn {
          width: 24px;
          height: 7px;
          border-radius: 3px;
          background: #E9FC00;
        }

        /* Hide the chrome's desktop navbar entirely on >=992px.
           Mobile keeps the chrome's slide-out drawer. */
        @media (min-width: 992px) {
          .navbar-wrapper { display: none !important; }
        }

        /* Non-sticky variant — used on /blog/ and single article posts
           so the pill scrolls away with the hero. Higher specificity
           than the base .wa8-mega rule above. */
        @media (min-width: 992px) {
          .wa8-mega[data-sticky="false"] { position: absolute; }
        }

        /* Immersive fade — ScrollNarrative on the homepage toggles
           body.wa8-stack-immersive while the Activation Stack section
           is in view; the pill, scrim, and 9-dots launcher fade out
           so the scroll choreography doesn't read behind chrome. */
        .wa8-mega {
          transition: opacity 320ms ease, transform 320ms ease,
                      visibility 0s 320ms;
        }
        body.wa8-stack-immersive .wa8-mega {
          opacity: 0;
          visibility: hidden;
          transform: translate(-50%, -18px);
          pointer-events: none;
          transition: opacity 320ms ease, transform 320ms ease,
                      visibility 0s;
        }
        body.wa8-stack-immersive .wa8-mega-scrim {
          opacity: 0;
          pointer-events: none;
        }
        body.wa8-stack-immersive .wa8-dots-fixed {
          opacity: 0;
          pointer-events: none;
          transition: opacity 320ms ease;
        }
        .wa8-dots-fixed { transition: opacity 320ms ease; }
        @media (prefers-reduced-motion: reduce) {
          .wa8-mega,
          .wa8-dots-fixed { transition: none; }
        }

        /* ─── MOBILE NAV (<992px) ────────────────────────────────
           Same dark glass aesthetic as the desktop pill, condensed
           to fit the viewport. Brand on the left, CTA + hamburger
           on the right. Hidden at >=992px because DesktopMegaNav
           takes over there. */
        .wa8-mob {
          position: fixed;
          top: 12px;
          left: 12px;
          right: 12px;
          z-index: 200;
          display: block;
          pointer-events: none;
        }
        .wa8-mob[data-sticky="false"] {
          position: absolute;
        }
        .wa8-mob-pill {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 10px 12px 10px 18px;
          border-radius: 999px;
          background: rgba(0, 0, 0, 0.55);
          backdrop-filter: blur(40px) saturate(180%);
          -webkit-backdrop-filter: blur(40px) saturate(180%);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #ffffff;
          pointer-events: auto;
        }
        .wa8-mob-brand {
          display: inline-flex;
          align-items: center;
          flex-shrink: 0;
          text-decoration: none;
          margin-right: auto;
        }
        .wa8-mob-brand img { height: 24px; width: auto; display: block; }
        .wa8-mob-actions {
          display: inline-flex;
          align-items: center;
          gap: 8px;
        }
        /* Founder ask 2026-05-19: hide the in-pill CTA on mobile.
           The pill is [logo | CTA | hamburger] and the CTA ate ~140px
           of horizontal space, squishing the hamburger flush to the
           right edge with no breathing room. Hide it; the CTA is
           still accessible from inside the drawer + on the page
           below the hero. */
        .wa8-mob-cta {
          display: none;
        }
        .wa8-mob-burger {
          width: 38px;
          height: 38px;
          padding: 0;
          border-radius: 999px;
          border: 1px solid rgba(255, 255, 255, 0.14);
          background: rgba(255, 255, 255, 0.06);
          color: #ffffff;
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 5px;
          cursor: pointer;
        }
        .wa8-mob-burger span {
          display: block;
          width: 18px;
          height: 2px;
          background: currentColor;
          border-radius: 2px;
        }
        .wa8-mob-burger:hover,
        .wa8-mob-burger:focus-visible {
          background: rgba(255, 255, 255, 0.12);
        }

        /* Drawer + scrim — slide-in from the right, full-height. */
        .wa8-mob-scrim {
          position: fixed;
          inset: 0;
          z-index: 210;
          background: rgba(0, 0, 0, 0.55);
          opacity: 0;
          pointer-events: none;
          transition: opacity 220ms ease;
          display: block;
        }
        .wa8-mob-scrim.is-open {
          opacity: 1;
          pointer-events: auto;
        }
        .wa8-mob-drawer {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          width: min(88vw, 380px);
          z-index: 220;
          background: #0b0b12;
          color: #ffffff;
          transform: translateX(100%);
          /* When closed the drawer is also visibility:hidden +
             pointer-events:none, not just translated off-screen.
             A translate-only hide lets the dark panel bleed back in
             on mobile rubber-band/overscroll. visibility is delayed
             280ms on close so it doesn't cut the slide-out. */
          visibility: hidden;
          pointer-events: none;
          transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
                      visibility 0s linear 280ms;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          will-change: transform;
          box-shadow: -8px 0 32px rgba(0, 0, 0, 0.45);
        }
        .wa8-mob-drawer.is-open {
          transform: translateX(0);
          visibility: visible;
          pointer-events: auto;
          transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
                      visibility 0s linear 0s;
        }
        @media (prefers-reduced-motion: reduce) {
          .wa8-mob-drawer { transition: none; }
          .wa8-mob-scrim { transition: none; }
        }
        .wa8-mob-drawer-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 18px 18px 14px 18px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          flex-shrink: 0;
        }
        .wa8-mob-drawer-close {
          width: 38px;
          height: 38px;
          padding: 0;
          border-radius: 999px;
          border: 1px solid rgba(255, 255, 255, 0.14);
          background: rgba(255, 255, 255, 0.06);
          color: #ffffff;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        .wa8-mob-drawer-close:hover,
        .wa8-mob-drawer-close:focus-visible {
          background: rgba(255, 255, 255, 0.12);
        }
        .wa8-mob-drawer-nav {
          flex: 1;
          overflow-y: auto;
          overscroll-behavior: contain;
          padding: 8px 8px 24px 8px;
        }
        .wa8-mob-drawer-top {
          display: block;
          padding: 14px 16px;
          margin: 2px 8px;
          border-radius: 12px;
          color: #ffffff;
          text-decoration: none;
          font-size: 16px;
          font-weight: 500;
          letter-spacing: -0.005em;
        }
        .wa8-mob-drawer-top:hover,
        .wa8-mob-drawer-top:focus-visible {
          background: rgba(255, 255, 255, 0.06);
        }
        .wa8-mob-drawer-section {
          margin: 4px 8px;
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.025);
          border: 1px solid rgba(255, 255, 255, 0.05);
          overflow: hidden;
        }
        .wa8-mob-drawer-trigger {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 14px 16px;
          background: transparent;
          border: none;
          color: #ffffff;
          font: inherit;
          font-size: 16px;
          font-weight: 500;
          text-align: left;
          cursor: pointer;
          letter-spacing: -0.005em;
        }
        .wa8-mob-drawer-trigger-label {
          display: inline-flex;
          align-items: center;
          gap: 10px;
        }
        .wa8-mob-drawer-trigger-chev {
          display: inline-flex;
          transition: transform 220ms ease;
          color: rgba(255, 255, 255, 0.7);
        }
        .wa8-mob-drawer-trigger.is-expanded .wa8-mob-drawer-trigger-chev {
          transform: rotate(180deg);
        }
        .wa8-mob-drawer-cols {
          padding: 4px 16px 16px 16px;
          display: flex;
          flex-direction: column;
          gap: 14px;
        }
        .wa8-mob-drawer-col-title {
          font-size: 11px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          color: rgba(255, 255, 255, 0.5);
          margin: 0 0 6px 0;
        }
        .wa8-mob-drawer-col-list {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 2px;
        }
        .wa8-mob-drawer-leaf {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 10px 8px;
          border-radius: 8px;
          color: rgba(255, 255, 255, 0.92);
          text-decoration: none;
          font-size: 15px;
          line-height: 1.3;
          letter-spacing: -0.005em;
        }
        .wa8-mob-drawer-leaf:hover,
        .wa8-mob-drawer-leaf:focus-visible {
          background: rgba(255, 255, 255, 0.06);
          color: #ffffff;
        }
        .wa8-mob-drawer-leaf.is-disabled {
          opacity: 0.4;
          cursor: not-allowed;
        }
        .wa8-mob-drawer-leaf.is-footercta {
          color: #d9ff00;
          font-weight: 500;
          padding-top: 14px;
        }
        .wa8-mob-drawer-leaf-logo {
          height: 14px;
          width: auto;
          display: block;
        }
        .wa8-mob-drawer-leaf-pill {
          margin-left: 6px;
          padding: 2px 6px;
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.12);
          color: rgba(255, 255, 255, 0.85);
          font-size: 10px;
          font-weight: 600;
          letter-spacing: 0.04em;
        }
        .wa8-mob-drawer-foot {
          padding: 14px 16px calc(14px + env(safe-area-inset-bottom)) 16px;
          border-top: 1px solid rgba(255, 255, 255, 0.08);
          flex-shrink: 0;
        }
        .wa8-mob-drawer-cta {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          width: 100%;
          padding: 14px;
          border-radius: 999px;
          background: #d9ff00;
          color: #0b0b12;
          font: inherit;
          font-size: 16px;
          font-weight: 600;
          text-decoration: none;
          letter-spacing: -0.005em;
        }
        .wa8-mob-drawer-cta:hover,
        .wa8-mob-drawer-cta:focus-visible {
          background: #c6e600;
        }

        /* Hide mobile nav on desktop, show on mobile. */
        @media (min-width: 992px) {
          .wa8-mob,
          .wa8-mob-scrim,
          .wa8-mob-drawer { display: none; }
        }

/* ─── components/v3/ActivationStackInteractive.tsx ────────────── */
        .wa8-asi { background: #ffffff; }

        /* ── Top zone: dark interactive tile bar ─────────────────────── */
        .wa8-asi-tiles-zone {
          background: #0b0b12;
          padding: 44px 24px 52px;
          color: #ffffff;
        }
        .wa8-asi-tiles {
          max-width: 1280px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
        }
        .wa8-asi-tile {
          position: relative;
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding: 20px 22px 18px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.025);
          color: #ffffff;
          text-decoration: none;
          transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
                      border-color 200ms ease,
                      background 200ms ease;
          min-height: 0;
        }
        .wa8-asi-tile:hover {
          transform: translateY(-6px);
          border-color: rgba(233, 252, 0, 0.45);
          background: rgba(255, 255, 255, 0.05);
        }
        .wa8-asi-tile-icon {
          width: 32px;
          height: 32px;
          color: #E9FC00;
          transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
        }
        .wa8-asi-tile:hover .wa8-asi-tile-icon {
          transform: rotate(-6deg) translateY(-2px) scale(1.08);
        }
        .wa8-asi-tile-num {
          font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 0.22em;
          color: rgba(255, 255, 255, 0.5);
        }
        .wa8-asi-tile-name {
          font-size: 19px;
          font-weight: 700;
          letter-spacing: -0.012em;
          color: #ffffff;
          margin: 0;
        }
        .wa8-asi-tile-eyebrow {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.55);
          margin: 0;
        }
        .wa8-asi-tile-cta {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          margin-top: 4px;
          font-size: 12px;
          font-weight: 600;
          color: rgba(255, 255, 255, 0.65);
          letter-spacing: 0.01em;
          transition: color 200ms ease, gap 200ms ease;
        }
        .wa8-asi-tile-cta span { transition: transform 200ms ease; }
        .wa8-asi-tile:hover .wa8-asi-tile-cta {
          color: #E9FC00;
          gap: 10px;
        }
        .wa8-asi-tile:hover .wa8-asi-tile-cta span {
          transform: translateX(2px);
        }

        /* Tooltip — appears above tile on hover, slides up + fades in */
        .wa8-asi-tooltip {
          position: absolute;
          left: 14px;
          right: 14px;
          bottom: calc(100% + 12px);
          padding: 14px 16px;
          background: #ffffff;
          color: #0b0b12;
          border-radius: 10px;
          font-size: 13px;
          line-height: 1.5;
          font-weight: 500;
          opacity: 0;
          transform: translateY(8px);
          pointer-events: none;
          transition: opacity 260ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
          box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.4),
                      0 4px 10px -4px rgba(0, 0, 0, 0.3);
          z-index: 4;
        }
        .wa8-asi-tooltip-arrow {
          position: absolute;
          left: 32px;
          bottom: -6px;
          width: 12px;
          height: 12px;
          background: #ffffff;
          transform: rotate(45deg);
        }
        .wa8-asi-tile:hover .wa8-asi-tooltip,
        .wa8-asi-tile:focus-visible .wa8-asi-tooltip {
          opacity: 1;
          transform: translateY(0);
        }

        /* ── Bottom zone: white-bg animated headline ─────────────────── */
        .wa8-asi-headline-zone {
          background: #ffffff;
          padding: 120px 24px 140px;
        }
        .wa8-asi-headline-inner {
          max-width: 1280px;
          margin: 0 auto;
          position: relative;
        }
        /* Grudge arrows: pinned to the right side of the headline block,
           pointing up toward the layer tiles above. Soothing push-up /
           come-back loop, ease-in-out, slow. Decorative — pointer-events
           off + aria-hidden so it doesn't trap focus / screen readers.
           --wa8-arrow-base-y holds the resting position so the same
           keyframes work for absolute (desktop) and static (mobile)
           layouts. */
        .wa8-asi-arrows {
          --wa8-arrow-base-y: -50%;
          position: absolute;
          right: clamp(16px, 4vw, 80px);
          top: 50%;
          width: clamp(140px, 16vw, 220px);
          height: auto;
          pointer-events: none;
          user-select: none;
          opacity: 0.92;
          transform: translateY(var(--wa8-arrow-base-y));
          animation: wa8-asi-arrows-float 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
          will-change: transform;
        }
        @keyframes wa8-asi-arrows-float {
          0%, 100% {
            transform: translateY(calc(var(--wa8-arrow-base-y) + 0px));
          }
          50% {
            transform: translateY(calc(var(--wa8-arrow-base-y) - 22px));
          }
        }
        @media (prefers-reduced-motion: reduce) {
          .wa8-asi-arrows {
            animation: none;
          }
        }
        @media (max-width: 900px) {
          .wa8-asi-arrows {
            --wa8-arrow-base-y: 0px;
            position: static;
            display: block;
            width: 120px;
            margin: 28px auto 0;
          }
        }
        .wa8-asi-headline {
          font-size: clamp(40px, 5.5vw, 80px);
          line-height: 1.02;
          letter-spacing: -0.025em;
          font-weight: 800;
          color: #0b0b12;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 6px;
        }
        .wa8-asi-headline sup {
          font-size: 0.4em;
          font-weight: 600;
          vertical-align: super;
          letter-spacing: 0;
          margin-left: 2px;
        }
        .wa8-asi-line-row {
          display: flex;
          flex-wrap: wrap;
          gap: clamp(20px, 3vw, 56px);
          align-items: baseline;
        }
        .wa8-asi-line {
          display: inline-block;
          opacity: 0;
          transform: translateY(28px);
          transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
                      transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
        }
        .wa8-asi-line--3,
        .wa8-asi-line--4 {
          color: #b0b0ad;
        }
        .wa8-asi-headline-zone.is-visible .wa8-asi-line {
          opacity: 1;
          transform: translateY(0);
        }
        .wa8-asi-headline-zone.is-visible .wa8-asi-line--1 { transition-delay: 0ms; }
        .wa8-asi-headline-zone.is-visible .wa8-asi-line--2 { transition-delay: 280ms; }
        .wa8-asi-headline-zone.is-visible .wa8-asi-line--3 { transition-delay: 560ms; }
        .wa8-asi-headline-zone.is-visible .wa8-asi-line--4 { transition-delay: 760ms; }

        /* ── Responsive ──────────────────────────────────────────────── */
        @media (max-width: 900px) {
          .wa8-asi-tiles-zone { padding: 56px 20px 72px; }
          .wa8-asi-tiles {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
          }
          .wa8-asi-tile { min-height: 180px; padding: 24px 22px 22px; }
          .wa8-asi-tooltip { font-size: 12px; padding: 12px 14px; }
          .wa8-asi-headline-zone { padding: 80px 20px 96px; }
        }
        @media (max-width: 520px) {
          .wa8-asi-tiles { grid-template-columns: 1fr; }
          .wa8-asi-tile { min-height: 0; }
          /* On narrow phones tooltips colliding with adjacent tiles is
             annoying — disable hover tooltip on touch, tile is still a
             link to the layer page. */
          .wa8-asi-tooltip { display: none; }
          .wa8-asi-line-row { flex-direction: column; gap: 6px; }
        }

/* ─── components/v3/LeadMagnetBar.tsx ─────────────────────────── */
        .wa8-lead-magnet {
          background: #f5f5f3;
          /* Founder ask 2026-05-18: callout looked glued to the top
             edge — there was too little breathing room above the card
             relative to the section below it. Bumped vertical padding
             from 56px → clamp(72px..120px) so the card sits visually
             centred inside its neutral band. */
          padding: clamp(72px, 8vw, 120px) 24px;
        }
        /* Callout container — clean white card on the section bg.
           Plain white, rounded corners, very subtle layered shadow.
           No gradient outline (founder said the gradient ring looked
           bad against the neutral section). */
        .wa8-lead-magnet-callout {
          max-width: 1180px;
          margin: 0 auto;
          padding: clamp(40px, 5vw, 64px);
          background: #ffffff;
          border-radius: 20px;
          box-shadow:
            0 1px 0 rgba(20, 20, 20, 0.03),
            0 8px 24px -14px rgba(20, 20, 20, 0.08),
            0 26px 52px -32px rgba(20, 20, 20, 0.07);
        }
        .wa8-lead-magnet-inner {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 48px;
          align-items: center;
        }
        .wa8-lead-magnet-label {
          font-size: 11px;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: #888;
          margin-bottom: 12px;
          font-weight: 600;
        }
        .wa8-lead-magnet-h3 {
          font-size: clamp(24px, 2.3vw, 32px);
          font-weight: 600;
          letter-spacing: -0.01em;
          color: #0a0a0a;
          margin: 0 0 12px 0;
          line-height: 1.15;
        }
        .wa8-lead-magnet-body {
          font-size: 14px;
          line-height: 1.55;
          color: #4a4a4a;
          margin: 0 0 18px 0;
          max-width: 420px;
        }
        .wa8-lead-magnet-text-cta {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 14px;
          font-weight: 600;
          color: #0a0a0a;
          text-decoration: none;
          padding-bottom: 3px;
          border-bottom: 1.5px solid #0a0a0a;
          transition: color 0.15s ease, border-color 0.15s ease, gap 0.15s ease;
        }
        .wa8-lead-magnet-text-cta:hover {
          color: #2368EF;
          border-color: #2368EF;
          gap: 10px;
        }

        /* ── Preview stack — front card + 3 fanning back pages ─────────── */
        .wa8-lead-magnet-preview {
          display: block;
          text-decoration: none;
          color: inherit;
          cursor: pointer;
        }
        .wa8-lead-magnet-stack {
          position: relative;
          max-width: 380px;
          margin: 0 auto;
          transform: rotate(-2deg);
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .wa8-lead-magnet-preview:hover .wa8-lead-magnet-stack {
          transform: rotate(-1deg) translateY(-3px);
        }

        /* Back pages start collapsed at zero offset (hidden behind front).
           Bidirectional: .is-visible fans them out; removing the class
           returns them to zero offset (back behind the front card). */
        .wa8-lead-magnet-page {
          position: absolute;
          inset: 0;
          background: #ffffff;
          border: 1px solid #e7e7e2;
          border-radius: 12px;
          box-shadow: 0 10px 22px -12px rgba(20, 20, 20, 0.18),
                      0 22px 42px -24px rgba(20, 20, 20, 0.16);
          transform: rotate(0deg) translate(0, 0);
          transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
          will-change: transform;
        }
        .wa8-lead-magnet-page--1 { z-index: 1; }
        .wa8-lead-magnet-page--2 { z-index: 0; }
        .wa8-lead-magnet-page--3 { z-index: -1; }
        .wa8-lead-magnet.is-visible .wa8-lead-magnet-page--1 {
          transform: rotate(2.5deg) translate(10px, 6px);
          transition-delay: 180ms;
        }
        .wa8-lead-magnet.is-visible .wa8-lead-magnet-page--2 {
          transform: rotate(5deg) translate(20px, 14px);
          transition-delay: 340ms;
        }
        .wa8-lead-magnet.is-visible .wa8-lead-magnet-page--3 {
          transform: rotate(7.5deg) translate(30px, 22px);
          transition-delay: 500ms;
        }
        /* Reverse stagger on the way back — outermost page collapses first
           so the stack "slides home" naturally. */
        .wa8-lead-magnet:not(.is-visible) .wa8-lead-magnet-page--3 {
          transition-delay: 0ms;
        }
        .wa8-lead-magnet:not(.is-visible) .wa8-lead-magnet-page--2 {
          transition-delay: 120ms;
        }
        .wa8-lead-magnet:not(.is-visible) .wa8-lead-magnet-page--1 {
          transition-delay: 240ms;
        }
        @media (prefers-reduced-motion: reduce) {
          .wa8-lead-magnet-page { transition: none; }
        }

        /* Front card */
        .wa8-lead-magnet-card {
          position: relative;
          z-index: 2;
          background: #ffffff;
          border: 1px solid #e2e2dd;
          border-radius: 12px;
          padding: 24px 26px 18px 26px;
          box-shadow:
            0 1px 0 rgba(20, 20, 20, 0.04),
            0 14px 32px -16px rgba(20, 20, 20, 0.2),
            0 32px 64px -36px rgba(20, 20, 20, 0.22);
        }
        .wa8-lead-magnet-card-head {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 16px;
          padding-bottom: 14px;
          border-bottom: 1px solid #ececeb;
        }
        /* Full WA8 wordmark anchors the LEFT of the card's footer row
           (founder mock 2026-05-12 — page-number was dropped so the
           logo can be a crisp signature instead of squeezed between
           two labels). Sized large enough to read clearly at the
           card's natural scale. */
        .wa8-lead-magnet-wordmark {
          height: 24px;
          width: auto;
          display: block;
          flex-shrink: 0;
        }
        .wa8-lead-magnet-eyebrow {
          font-size: 9px;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          color: #999;
          margin-bottom: 3px;
          font-weight: 600;
        }
        .wa8-lead-magnet-title {
          font-size: 15px;
          font-weight: 600;
          color: #0a0a0a;
          letter-spacing: -0.005em;
        }
        .wa8-lead-magnet-list {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        .wa8-lead-magnet-row {
          display: flex;
          align-items: flex-start;
          gap: 11px;
          padding: 6px 0;
        }
        .wa8-lead-magnet-box {
          flex-shrink: 0;
          width: 14px;
          height: 14px;
          border: 1.5px solid #c4c4be;
          border-radius: 3px;
          margin-top: 2px;
        }
        .wa8-lead-magnet-text {
          font-size: 12px;
          line-height: 1.4;
          color: #2a2a28;
        }
        .wa8-lead-magnet-text--muted {
          color: #999;
          font-style: italic;
        }
        .wa8-lead-magnet-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          margin-top: 14px;
          padding-top: 12px;
          border-top: 1px solid #ececeb;
        }
.wa8-lead-magnet-download {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          /* Label + arrow stay on one line, always. */
          white-space: nowrap;
          font-size: 11px;
          letter-spacing: 0.04em;
          font-weight: 700;
          color: #0a0a0a;
          background: #E9FC00;
          padding: 5px 10px;
          border-radius: 4px;
          transition: transform 0.15s ease;
        }
        .wa8-lead-magnet-preview:hover .wa8-lead-magnet-download {

        }

        @media (max-width: 900px) {
          .wa8-lead-magnet { padding: 64px 16px; }
          .wa8-lead-magnet-callout { padding: 32px 24px; }
          .wa8-lead-magnet-inner {
            grid-template-columns: 1fr;
            gap: 36px;
          }
          .wa8-lead-magnet-stack {
            margin: 0 auto;
            max-width: 280px;
            transform: rotate(-1.5deg);
          }
          .wa8-lead-magnet-preview:hover .wa8-lead-magnet-stack {
            transform: rotate(-1deg) translateY(-3px);
          }
        }

/* ════════════════════════════════════════════════════════════════
 * Wave 12 extractions (2026-05-18): the rules below were previously
 * shipped inline via <style>{`…`}</style> in each named component.
 * Extracting them shrinks every page response by ~26 KB and removes
 * the same string from the React Server Components payload (where
 * style children are serialized).
 * ════════════════════════════════════════════════════════════════ */

/* ─── components/v3/PersonaCard1.tsx ───────────────────────────────── */
.wa8-persona-card-1 {
          position: relative;
          width: 100%;
          min-height: 720px;
          padding: 96px 24px;
          display: flex;
          align-items: center;
          background: #0a0a0a;
          overflow: hidden;
        }
        .wa8-persona-bg {
          position: absolute;
          inset: 0;
          z-index: 0;
          background-color: #2a160a;
          background-image: url("/v3-fragments/sarah-founder-retail-bw-grd-line1px-glass8-1080.jpg");
          background-repeat: no-repeat;
          background-position: right center;
          background-size: cover;
        }
        /* Soft dark veil from the left edge so the dark text panel sits on
           a slightly darkened band, while the right side (subject) stays
           fully visible. Gradient fades to fully transparent past 55%. */
        .wa8-persona-bg::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(
            to right,
            rgba(10, 10, 12, 0.55) 0%,
            rgba(10, 10, 12, 0.28) 30%,
            rgba(10, 10, 12, 0) 55%
          );
          pointer-events: none;
        }
        .wa8-persona-panel {
          position: relative;
          z-index: 1;
          max-width: 600px;
          width: 100%;
          margin-left: clamp(24px, 8vw, 120px);
          padding: 48px 44px;
          background: rgba(10, 10, 12, 0.82);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          border-radius: 14px;
          color: #ffffff;
          box-sizing: border-box;
        }
        .wa8-persona-label {
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, 0.62);
          margin-bottom: 22px;
          font-weight: 500;
        }
        .wa8-persona-h2 {
          font-size: clamp(28px, 3vw, 40px);
          line-height: 1.18;
          font-weight: 600;
          letter-spacing: -0.01em;
          color: #ffffff;
          margin: 0 0 28px 0;
        }
        .wa8-persona-body p {
          font-size: 15px;
          line-height: 1.6;
          color: rgba(255, 255, 255, 0.84);
          margin: 0 0 14px 0;
        }
        .wa8-persona-body p:last-child { margin-bottom: 0; }
        .wa8-persona-cta-wrap { margin: 32px 0 36px 0; }
        .wa8-persona-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 14px 24px;
          background: #E9FC00;
          color: #0a0a0a;
          font-weight: 600;
          font-size: 15px;
          text-decoration: none;
          border-radius: 999px;
          transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .wa8-persona-cta-btn:hover {
          box-shadow: 0 6px 18px rgba(233, 252, 0, 0.28);
        }
        .wa8-persona-cta-btn::after {
          content: "";
          display: inline-block;
          width: 0.55em;
          height: 0.55em;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%230B0B12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,2 6,6 2,10'/%3E%3C/svg%3E");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          opacity: 1;
          transform: translateX(0);
          transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        .wa8-persona-cta-btn:hover::after { transform: translateX(3px); }
        .wa8-persona-logos {
          border-top: 1px solid rgba(255, 255, 255, 0.14);
          padding-top: 22px;
        }
        .wa8-persona-logos-label {
          font-size: 10px;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: rgba(255, 255, 255, 0.52);
          margin-bottom: 14px;
          font-weight: 500;
        }
        .wa8-persona-logos-row {
          display: flex;
          flex-wrap: wrap;
          gap: 22px;
          align-items: center;
        }
        .wa8-persona-logo-placeholder {
          font-family: "Times New Roman", Georgia, serif;
          font-style: italic;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.78);
          letter-spacing: 0.01em;
        }
        @media (max-width: 900px) {
          .wa8-persona-card-1 { padding: 72px 16px; min-height: 0; }
          .wa8-persona-panel {
            padding: 36px 28px;
            margin-left: 0;
            max-width: 100%;
          }
          .wa8-persona-h2 { font-size: 26px; }
          .wa8-persona-logos-row { gap: 16px; }
          .wa8-persona-logo-placeholder { font-size: 14px; }
        }

/* ─── components/v3/PersonaCard2.tsx ───────────────────────────────── */
.wa8-persona-card-2 {
          background: #f5f5f3;
          padding: 120px 24px;
        }
        .wa8-persona-card-2-inner {
          max-width: 1320px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
          gap: 64px;
          align-items: center;
          position: relative;
        }
        .wa8-persona-card-2-panel {
          background: transparent;
          padding: 56px 0 56px clamp(28px, 4vw, 64px);
          position: relative;
          z-index: 1;
        }
        .wa8-persona-card-2-label {
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: #6a7585;
          margin-bottom: 22px;
          font-weight: 600;
        }
        .wa8-persona-card-2-h2 {
          font-size: clamp(28px, 3vw, 40px);
          line-height: 1.15;
          font-weight: 600;
          letter-spacing: -0.01em;
          color: #0a0a0a;
          margin: 0 0 28px 0;
        }
        .wa8-persona-card-2-body p {
          font-size: 17px;
          line-height: 1.6;
          color: #3e4756;
          margin: 0 0 16px 0;
        }
        .wa8-persona-card-2-body p:last-child { margin-bottom: 0; }
        .wa8-persona-card-2-cta-wrap { margin: 32px 0 0 0; }
        .wa8-persona-card-2-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 14px 24px;
          background: #0a0a0a;
          color: #ffffff;
          font-weight: 600;
          font-size: 15px;
          text-decoration: none;
          border-radius: 999px;
          transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .wa8-persona-card-2-cta-btn:hover {
          box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
        }
        .wa8-persona-card-2-cta-btn::after {
          content: "";
          display: inline-block;
          width: 0.55em;
          height: 0.55em;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,2 6,6 2,10'/%3E%3C/svg%3E");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          opacity: 1;
          transform: translateX(0);
          transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        .wa8-persona-card-2-cta-btn:hover::after { transform: translateX(3px); }

        /* Image wrapper — image on the LEFT for Card 2 (mirror of
           Card 3 which has image on the right). */
        .wa8-persona-card-2-image {
          position: relative;
          width: 100%;
          max-width: 600px;
          margin-right: auto;
          z-index: 2;
        }
        /* Canvas aspect matches Emily PNG (1386/1535) so she fills it
           width-wise exactly with no horizontal overflow. Her body sits
           naturally in the LEFT half of the canvas (where the PNG
           composition has her), and the "8" cutout content (bedroom +
           phone) shows on the RIGHT. Scott's PNG is narrower (1268/1535)
           so his canvas keeps 1/1.18; the two canvases end up
           different-aspect because the source images are. */
        .wa8-pc2-canvas {
          position: relative;
          aspect-ratio: 1238 / 1535;
          background: #E9FC00;
          border-radius: 22px;
          overflow: visible;
        }
        .wa8-persona-card-2-portrait {
          position: absolute;
          left: 40%;
          bottom: 0;
          transform: translateX(-50%);
          height: 90%;
          width: auto;
          max-width: none;
          object-fit: contain;
          object-position: center bottom;
          pointer-events: none;
          user-select: none;
          z-index: 1;
        }
        /* Glass pill — same tuned values as Card 3 (Scott's pill). */
        .wa8-pc2-labels {
          position: relative;
          margin: -68px 0 0;
          padding: 22px 36px;
          background: rgba(0, 18, 55, 0.178);
          backdrop-filter: blur(55px) saturate(180%);
          -webkit-backdrop-filter: blur(55px) saturate(180%);
          border-radius: 15px;
          box-shadow:
            0 12px 28px rgba(8, 12, 36, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.24);
          display: flex;
          flex-wrap: wrap;
          gap: 14px 28px;
          z-index: 3;
        }
        .wa8-pc2-chip {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 2px 0;
          font-size: 14px;
          font-weight: 500;
          color: #ffffff;
          letter-spacing: -0.005em;
          line-height: 1.3;
          white-space: nowrap;
        }
        .wa8-pc2-dot {
          flex-shrink: 0;
          width: 9px;
          height: 9px;
          border-radius: 50%;
          display: inline-block;
          background: #E9FC00;
        }

        @media (max-width: 900px) {
          .wa8-persona-card-2 { padding: 72px 20px; }
          .wa8-persona-card-2-inner {
            grid-template-columns: 1fr;
            gap: 36px;
          }
          .wa8-persona-card-2-panel {
            padding: 0;
            order: 2;
          }
          .wa8-persona-card-2-image {
            order: 1;
            margin: 0 auto;
            max-width: 460px;
          }
          .wa8-persona-card-2-h2 { font-size: 26px; }
        }

/* ─── components/v3/PersonaCard3.tsx ───────────────────────────────── */
.wa8-persona-card-3 {
          background: #f5f5f3;
          padding: 120px 24px;
        }
        .wa8-persona-card-3-inner {
          max-width: 1320px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
          gap: 64px;
          align-items: center;
          position: relative;
        }
        .wa8-persona-card-3-panel {
          background: transparent;
          padding: 56px clamp(28px, 4vw, 64px) 56px 0;
          position: relative;
          z-index: 1;
        }
        .wa8-persona-card-3-label {
          font-size: 11px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
          color: #6a7585;
          margin-bottom: 22px;
          font-weight: 600;
        }
        .wa8-persona-card-3-h2 {
          font-size: clamp(28px, 3vw, 40px);
          line-height: 1.15;
          font-weight: 600;
          letter-spacing: -0.01em;
          color: #0a0a0a;
          margin: 0 0 28px 0;
        }
        .wa8-persona-card-3-body p {
          font-size: 17px;
          line-height: 1.6;
          color: #3e4756;
          margin: 0 0 16px 0;
        }
        .wa8-persona-card-3-body p:last-child { margin-bottom: 0; }
        .wa8-persona-card-3-cta-wrap { margin: 32px 0 0 0; }
        .wa8-persona-card-3-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 14px 24px;
          background: #0a0a0a;
          color: #ffffff;
          font-weight: 600;
          font-size: 15px;
          text-decoration: none;
          border-radius: 999px;
          transition: transform 0.15s ease, box-shadow 0.15s ease;
        }
        .wa8-persona-card-3-cta-btn:hover {
          box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
        }
        .wa8-persona-card-3-cta-btn::after {
          content: "";
          display: inline-block;
          width: 0.55em;
          height: 0.55em;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,2 6,6 2,10'/%3E%3C/svg%3E");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          opacity: 1;
          transform: translateX(0);
          transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        .wa8-persona-card-3-cta-btn:hover::after { transform: translateX(3px); }

        /* ── Image wrapper — holds the lime canvas + the labels panel.
              No mask, no aspect-ratio at this level; the canvas drives
              its own height and the labels overlap below it. */
        .wa8-persona-card-3-image {
          position: relative;
          width: 100%;
          max-width: 600px;
          margin-left: auto;
          z-index: 2;
        }

        /* Canvas — Scott's backdrop. Brand Ink Blue (#2368EF, WAP D-07
           workhorse primary). Earlier lime version dominated Scott;
           switching to blue lets him read cleaner and reserves lime for
           its signal-accent role. overflow:visible so head + the "8"
           cutout still bleed above the canvas top edge. */
        .wa8-pc3-canvas {
          position: relative;
          aspect-ratio: 1212 / 1535;
          background: #2368EF;
          border-radius: 22px;
          overflow: visible;
        }
        .wa8-persona-card-3-portrait {
          position: absolute;
          /* Canvas aspect-ratio now matches the new Scott PNG exactly
             (1212/1535), so the IMG centers naturally at left:50%. The
             old left:72% shift was tuned for the previous PNG's
             body-mass offset + a different canvas aspect; reverting to
             centered eliminates the right-side overflow. Height 105%
             keeps a slight head bleed above the canvas top. */
          left: 60%;
          bottom: 0;
          transform: translateX(-50%);
          height: 90%;
          width: auto;
          object-fit: contain;
          object-position: center bottom;
          pointer-events: none;
          user-select: none;
          z-index: 1;
        }
        /* Labels panel — frosty glass pill overlapping the lime canvas.
           Heavy backdrop blur for the frosted look, lower bg opacity
           so the lime green shows through softly, very high border-
           radius for the pill shape, no gradient outline. */
        .wa8-pc3-labels {
          position: relative;
          /* Final frosted glass — founder-tuned values dropped via
             devtools (commit 0438586). Slight dark-blue tint at low
             alpha + heavy 55px blur + 15px radius, no border. */
          margin: -68px 0 0;
          padding: 22px 36px;
          background: rgba(0, 18, 55, 0.178);
          backdrop-filter: blur(55px) saturate(180%);
          -webkit-backdrop-filter: blur(55px) saturate(180%);
          border-radius: 15px;
          box-shadow:
            0 12px 28px rgba(8, 12, 36, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.24);
          display: flex;
          flex-wrap: wrap;
          gap: 14px 28px;
          z-index: 3;
        }

        .wa8-pc3-chip {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 2px 0;
          font-size: 14px;
          font-weight: 500;
          color: #ffffff;
          letter-spacing: -0.005em;
          line-height: 1.3;
          white-space: nowrap;
        }
        /* All dots uniform lime — per founder design (2026-05-11 PM).
           Earlier multi-colour scheme (lime/blue/violet) was wrong.
           The labels are categorical pain-states, not multi-axis tags,
           so uniform colour reads cleaner. */
        .wa8-pc3-dot {
          flex-shrink: 0;
          width: 9px;
          height: 9px;
          border-radius: 50%;
          display: inline-block;
          background: #E9FC00;
        }

        /* ── Responsive ──────────────────────────────────────────────── */
        @media (max-width: 900px) {
          .wa8-persona-card-3 { padding: 72px 20px; }
          .wa8-persona-card-3-inner {
            grid-template-columns: 1fr;
            gap: 36px;
          }
          .wa8-persona-card-3-panel {
            padding: 0;
            order: 2;
          }
          .wa8-persona-card-3-image {
            order: 1;
            margin: 0 auto;
            max-width: 460px;
          }
          .wa8-persona-card-3-h2 { font-size: 26px; }
          .wa8-pc3-chip { white-space: normal; }
        }
        @media (max-width: 480px) {
          .wa8-pc3-labels { padding: 12px 14px; }
          .wa8-pc3-chip { font-size: 11px; }
        }

/* ─── components/v3/HomeResourceStrip.tsx ───────────────────────────────── */
.wa8-hrs {
          padding: 96px 0;
          background: #ffffff;
        }
        .wa8-hrs-head {
          display: flex;
          align-items: end;
          justify-content: space-between;
          gap: 24px;
          margin-bottom: 44px;
        }
        @media (max-width: 700px) {
          .wa8-hrs-head { flex-direction: column; align-items: flex-start; }
        }
        .wa8-hrs-eyebrow {
          font-size: 12px;
          font-weight: 800;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          color: #5B8CFF;
          margin-bottom: 14px;
        }
        .wa8-hrs-heading {
          font-size: clamp(28px, 3vw, 40px);
          line-height: 1.15;
          letter-spacing: -0.025em;
          font-weight: 800;
          color: #0B0B12;
          margin: 0;
          max-width: 640px;
        }
        .wa8-hrs-cta {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;
          font-weight: 700;
          letter-spacing: -0.005em;
          color: #2268EE;
          text-decoration: none;
          transition: gap 220ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        .wa8-hrs-cta:hover { gap: 12px; }

        .wa8-hrs-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 18px;
        }
        @media (max-width: 1100px) {
          .wa8-hrs-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 600px) {
          .wa8-hrs-grid { grid-template-columns: 1fr; }
        }
        /* Auto-fill grid for the resource sub-index pages
           (/resources/guides, /ebooks, /checklists). */
        .wa8-resgrid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
          gap: 22px;
        }
        @media (max-width: 600px) {
          .wa8-resgrid { grid-template-columns: 1fr; }
        }
        /* Card visual is 1:1 with the /resources card (ResourcesIndex
           wa8-res-* rules) — solid cover colour, category icon,
           headline on the colour, hover-underline. */
        .wa8-hrs-card {
          display: flex;
          flex-direction: column;
          background: #ffffff;
          border: 1px solid #ececef;
          border-radius: 18px;
          overflow: hidden;
          text-decoration: none;
          color: inherit;
          transition: border-color 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
        }
        .wa8-hrs-card:hover {
          border-color: rgba(91, 140, 255, 0.45);
          transform: translateY(-3px);
        }
        .wa8-hrs-card.is-disabled {
          opacity: 0.55;
          cursor: not-allowed;
        }
        .wa8-hrs-cover {
          position: relative;
          min-height: 172px;
          padding: 16px 18px 18px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: 14px;
          overflow: hidden;
        }
        .wa8-hrs-cover-top {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 12px;
        }
        .wa8-hrs-type {
          display: inline-flex;
          align-items: center;
          padding: 5px 10px;
          background: color-mix(in srgb, var(--res-fg) 16%, transparent);
          color: var(--res-fg);
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          border-radius: 6px;
        }
        .wa8-hrs-icon {
          flex: 0 0 auto;
          width: 30px;
          height: 30px;
          color: var(--res-fg);
          opacity: 0.92;
          transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .wa8-hrs-icon svg { width: 100%; height: 100%; }
        .wa8-hrs-card:hover .wa8-hrs-icon {
          transform: rotate(-8deg) scale(1.16);
        }
        .wa8-hrs-title {
          font-size: 19px;
          line-height: 1.22;
          font-weight: 700;
          letter-spacing: -0.014em;
          color: var(--res-fg);
          margin: 0;
        }
        .wa8-hrs-title-text {
          display: inline;
          background-image: linear-gradient(var(--res-fg), var(--res-fg));
          background-repeat: no-repeat;
          background-position: 0 100%;
          background-size: 0% 2px;
          padding-bottom: 2px;
          transition: background-size 460ms cubic-bezier(0.7, 0, 0.84, 0);
        }
        .wa8-hrs-card:hover .wa8-hrs-title-text {
          background-size: 100% 2px;
        }
        .wa8-hrs-body {
          padding: 18px 20px 20px;
          display: flex;
          flex-direction: column;
          gap: 10px;
          flex: 1;
        }
        .wa8-hrs-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }
        .wa8-hrs-chip {
          padding: 3px 9px;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          border-radius: 999px;
          background: rgba(91, 140, 255, 0.10);
          color: #2268EE;
        }
        .wa8-hrs-chip.is-muted {
          background: rgba(11, 11, 18, 0.06);
          color: #666;
        }
        .wa8-hrs-excerpt {
          font-size: 13.5px;
          line-height: 1.5;
          color: #555;
          margin: 0;
          flex: 1;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .wa8-hrs-foot {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-top: 10px;
          border-top: 1px solid #ececef;
        }
        .wa8-hrs-duration {
          font-size: 12px;
          font-weight: 600;
          color: #777;
          letter-spacing: -0.005em;
        }
        .wa8-hrs-byline {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          min-width: 0;
        }
        .wa8-hrs-byline-avatar {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          object-fit: cover;
          flex: 0 0 auto;
          background: #ececef;
          box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px #2368EF;
        }
        .wa8-hrs-byline-meta {
          display: flex;
          flex-direction: column;
          min-width: 0;
          line-height: 1.3;
        }
        .wa8-hrs-byline-name {
          font-size: 12px;
          font-weight: 700;
          color: #0B0B12;
          letter-spacing: -0.005em;
        }
        .wa8-hrs-byline-date {
          font-size: 11px;
          font-weight: 500;
          color: #888;
          white-space: nowrap;
        }
        .wa8-hrs-arrow {
          font-size: 18px;
          color: #2268EE;
          transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        .wa8-hrs-card:hover .wa8-hrs-arrow { transform: translateX(4px); }
        @media (prefers-reduced-motion: reduce) {
          .wa8-hrs-icon, .wa8-hrs-title-text, .wa8-hrs-arrow { transition: none; }
        }

/* ─── components/v3/FourMoves.tsx ───────────────────────────────── */
.wa8-four-moves {
          background: #f5f5f3;
          padding: 120px 24px;
        }
        .wa8-four-moves-inner {
          max-width: 1280px;
          margin: 0 auto;
        }
        .wa8-four-moves-head {
          max-width: 720px;
          margin: 0 auto 64px auto;
          text-align: center;
        }
        .wa8-four-moves-h2 {
          font-size: clamp(36px, 4vw, 56px);
          line-height: 1.05;
          font-weight: 600;
          letter-spacing: -0.02em;
          color: #0a0a0a;
          margin: 0 0 18px 0;
        }
        .wa8-four-moves-sub {
          font-size: 17px;
          line-height: 1.5;
          color: #4a4a4a;
          margin: 0;
        }
        .wa8-four-moves-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 36px;
        }
        .wa8-four-moves-card { padding: 0; }
        .wa8-four-moves-num {
          font-size: 13px;
          font-weight: 600;
          color: #c5c5c5;
          letter-spacing: 0.08em;
          margin-bottom: 18px;
          font-variant-numeric: tabular-nums;
        }
        .wa8-four-moves-verb {
          position: relative;
          display: inline-block;
          font-size: 24px;
          font-weight: 600;
          letter-spacing: -0.01em;
          color: #0a0a0a;
          margin: 0 0 16px 0;
          padding-bottom: 8px;
        }
        .wa8-four-moves-verb-dot {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 16px;
          height: 2px;
          background: #E9FC00;
          border-radius: 1px;
        }
        .wa8-four-moves-body {
          font-size: 15px;
          line-height: 1.6;
          color: #4a4a4a;
          margin: 0;
        }
        @media (max-width: 1024px) {
          .wa8-four-moves-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 44px;
          }
        }
        @media (max-width: 600px) {
          .wa8-four-moves { padding: 80px 20px; }
          .wa8-four-moves-grid {
            grid-template-columns: 1fr;
            gap: 36px;
          }
        }

/* ─── components/v3/CostCalculatorCallout.tsx ───────────────────────────────── */
/* Brand-lime primary CTA. Same chevron-reveal pattern as
           wa8-hero-cta-primary used everywhere else. Pre-allocated
           chevron slot so the text doesn't shift; the SVG arrow
           just fades in on hover with a 4px translateX nudge. */
        .cc-cta {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 14px 24px;
          background: #E9FC00;
          color: #0B0B12;
          font-weight: 600;
          font-size: 15px;
          letter-spacing: -0.005em;
          text-decoration: none;
          border-radius: 999px;
          transition: background 180ms ease;
        }
        .cc-cta::after {
          content: "";
          display: inline-block;
          width: 0.55em;
          height: 0.55em;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%230B0B12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,2 6,6 2,10'/%3E%3C/svg%3E");
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          opacity: 1;
          transform: translateX(0);
          transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        .cc-cta:hover { background: #DDEF00; }
        .cc-cta:hover::after { transform: translateX(3px); }
        @media (max-width: 700px) {
          .cc-card { grid-template-columns: 1fr !important; min-height: 0 !important; }
          .cc-card-body { padding: 40px 24px !important; min-height: 0 !important; }
          .cc-card-rail { padding: 0 24px 24px !important; justify-content: flex-start !important; }
          .cc-card-rail > div { writing-mode: horizontal-tb !important; transform: none !important; }
        }

        /* Slide-swap entry animation. Each keyed wrapper (.cc-slide-anim)
           re-mounts when idx changes and runs this keyframe: copy slides
           up 10px and the blur clears in 520ms with the resend-style
           cubic-bezier. The CTA + gradient bg sit outside the keyed
           wrappers so they don't flicker. The --rail modifier drops the
           transform so it doesn't fight the parent's rotate(180deg). */
        .cc-slide-anim {
          animation: cc-slide-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        @keyframes cc-slide-in {
          0% {
            opacity: 0;
            transform: translateY(10px);
            filter: blur(8px);
          }
          100% {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
          }
        }
        .cc-slide-anim--rail {
          animation: cc-slide-in-rail 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        @keyframes cc-slide-in-rail {
          0% { opacity: 0; filter: blur(8px); }
          100% { opacity: 1; filter: blur(0); }
        }
        @media (prefers-reduced-motion: reduce) {
          .cc-slide-anim,
          .cc-slide-anim--rail { animation: none; }
        }

/* ─── components/v3/TrustLogoStrip.tsx ───────────────────────────────── */
/* ─── Desktop (>700px) ─────────────────────────────────────
           Frosted-glass pill floats inside the bottom of the hero
           (hero parent in app/v3/page.tsx is position:relative).
           Strip is out of flow so the hero keeps its natural 100vh
           and the next section starts cleanly after it. Dark glass
           pill + WHITE wordmarks. */
        .wa8-trust-strip {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 30px;
          padding: 0 1.5rem;
          background: transparent;
          z-index: 5;
          isolation: isolate;
        }
        .wa8-trust-strip .wa8-strip-mark {
          height: 24px;
        }
        /* Variant swap — scoped to .wa8-trust-strip so it has the
           same specificity (0,2,0) as the height rule above.
           Without scoping, the unscoped .wa8-strip-mark-main
           {display:none} (0,1,0) loses to a stray
           .wa8-trust-strip .wa8-strip-mark {display:block}
           and BOTH variants render, which produced the
           "8crm.8crm. team8.team8. ..." duplicate-wordmark bug
           on desktop. */
        .wa8-trust-strip .wa8-strip-mark-white { display: block; }
        .wa8-trust-strip .wa8-strip-mark-main { display: none; }

        /* ─── Mobile (<=700px) ────────────────────────────────────
           Per founder ask — abandon the dark glass pill, switch to
           a classic white "client logos" strip BELOW the hero.
           Single-line row of dark wordmarks at smaller height so
           all 4 fit without wrapping at iPhone-width viewports.
           Glass card swapped to plain white via .wa8-trust-strip-card
           reset below + wordmarks swap to the dark -main variants. */
        @media (max-width: 700px) {
          .wa8-trust-strip {
            position: static;
            padding: 18px 12px;
            background: #FFFFFF;
            border-top: 1px solid rgba(11, 11, 18, 0.06);
            border-bottom: 1px solid rgba(11, 11, 18, 0.06);
          }
          .wa8-trust-strip .wa8-trust-strip-card {
            background: transparent !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            padding: 0 !important;
            max-width: none !important;
          }
          /* Compact cells, no dividers, no big padding so all 4
             wordmarks fit on a single row at ~360px viewport. */
          .wa8-trust-strip .wa8-trust-strip-cell {
            padding: 6px 8px !important;
            min-width: 0 !important;
            box-shadow: none !important;
          }
          .wa8-trust-strip .wa8-strip-mark {
            height: 16px;
          }
          .wa8-strip-mark-white { display: none !important; }
          .wa8-strip-mark-main { display: block !important; }
        }

        /* Extra-narrow polish: 8automations wordmark is the widest of
           the four (longer word), so on <420px viewport the rightmost
           cell clipped. Shrink the height a touch and tighten cell
           padding so all four marks fit on one row through iPhone SE
           (375) and below. */
        @media (max-width: 420px) {
          .wa8-trust-strip .wa8-strip-mark {
            height: 13px;
          }
          .wa8-trust-strip .wa8-trust-strip-cell {
            padding: 6px 4px !important;
          }
        }

/* ─── components/v3/NavPolish.tsx ───────────────────────────────── */
/* Founder-tuned via devtools 2026-05-11: top: 38px / right: 45px
   keeps the dots button on-pill at every wide-desktop viewport AND
   stops it from overlapping the GET ACTIVATED CTA when the window
   is narrowed (split-screen Mac with terminal alongside). The 992-
   1400px breakpoint set in the old legacy chrome's CSS used
   right:2.2vw which collapses too tight and lets the button drift
   over the CTA — we force the fixed-pixel values across all
   desktop viewports. */
.wa8-dots-fixed {
  top: 38px !important;
  right: 45px !important;
}
@media (min-width: 992px) and (max-width: 1400px) {
  .wa8-dots-fixed {
    top: 38px !important;
    right: 45px !important;
  }
}
@media (max-width: 700px) {
  /* Founder ask 2026-05-19: no room for the 9-dots launcher on
     mobile — it stacked behind the pill nav's hamburger and was
     unreadable. Hide on phone. The 6 quick-nav products (8CRM /
     Team8s / 8Host / 8Automations / Audit / Cost Calc) are still
     reachable via the burger menu's Solutions / Activations panels. */
  .wa8-dots-fixed {
    display: none !important;
  }
}
html, body {
  overflow-x: clip;
}
.wa8-fw-card--image,
.wa8-fw-hero-img-wrap {
  overflow: visible !important;
}
.wa8-fw-hero-img-wrap {
  position: relative !important;
}
.wa8-fw-hero-img {
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: 135% !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  background: transparent !important;
}
/* The injected SVG mirrors the IMG's exact box so the silhouette path
   coords (in the SVG's 0 0 877 1200 viewBox) land on the rendered
   portrait pixel-for-pixel. z-index:3 puts it above the img so the
   stroke isn't clipped by the img's opaque half. */
.wa8-fw-hero-img-wrap > .wa8-portrait-stroke {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 135%;
  aspect-ratio: 877 / 1200;
  width: auto;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}

/* ─── components/v3/FinalCTA.tsx ───────────────────────────────── */
.wa8-final-cta .wa8-final-cta-headline {
  font-style: normal !important;
  font-family: 'Google Sans Flex', Arial, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  text-wrap: balance;
}
.wa8-final-cta .wa8-final-cta-sub {
  max-width: 680px;
  margin-inline: auto;
  text-wrap: pretty;
}
.wa8-final-cta-layers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
  margin: 22px 0 28px;
}
.wa8-final-cta-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Google Sans Flex', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  backdrop-filter: blur(4px);
}
.wa8-final-cta-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 8px;
}
.wa8-final-cta-chip-dot-site     { background: #E9FC00; }
.wa8-final-cta-chip-dot-marketing{ background: #2368EF; }
.wa8-final-cta-chip-dot-leadgen  { background: #9D00FF; }
.wa8-final-cta-chip-dot-loyalty  { background: #00FFF6; }
@media (max-width: 600px) {
  /* Four layer chips stay on ONE line, sized down with vw so they
     fit any phone width instead of wrapping to a ragged 3 + 1. */
  .wa8-final-cta-layers {
    flex-wrap: nowrap;
    gap: clamp(3px, 1.2vw, 8px);
    margin: 18px 0 26px;
  }
  .wa8-final-cta-chip {
    padding: 6px clamp(6px, 2vw, 12px);
    font-size: clamp(9.5px, 2.7vw, 13px);
    gap: clamp(3px, 1vw, 6px);
    letter-spacing: -0.01em;
    white-space: nowrap;
    flex: 0 1 auto;
    min-width: 0;
  }
  .wa8-final-cta-chip-dot {
    width: 6px;
    height: 6px;
    flex-basis: 6px;
  }
}

/* Final-CTA secondary text link: pull it apart from the primary
   button with vertical air + center it, so it reads as its own
   distinct "or" option rather than glued under the CTA.
   The mobile rule .wa8-hero-ctas > a forces width:100% (max 320px)
   on this link, so the link box is wide — justify-content:center is
   what actually centres the label+arrow inside it (text-align does
   nothing on an inline-flex element's content). */
.wa8-final-cta-content .wa8-hero-textlink {
  align-self: center;
  justify-content: center;
  text-align: center;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .wa8-final-cta-content .wa8-hero-textlink {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    margin-top: 16px;
    margin-bottom: 4px;
  }
}

/* ─── components/v3/HeroLogoMark.tsx ───────────────────────────── */
section[data-wa8-home-hero] {
  position: relative;
  /* No overflow:hidden — the 8 is already contained at right:20px /
     bottom:20px so there's nothing to clip, and forcing overflow:hidden
     on a section with live color/transform animations was triggering
     full-section repaints on every frame -> hero flicker. */
}
section[data-wa8-home-hero]::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 20px;
  height: clamp(420px, 72vh, 800px);
  aspect-ratio: 398 / 765;
  background-image: url("/v3-fragments/8-glass.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  pointer-events: none;
  z-index: 5;
  opacity: 1;
  transform: translateZ(0);
  will-change: transform;
}
@media (max-width: 900px) {
  section[data-wa8-home-hero]::after {
    right: 12px;
    bottom: 12px;
    height: clamp(360px, 60vh, 620px);
    opacity: 0.7;
  }
}

/* ─── components/v3/HomeHero.tsx — visibility override ────────── */
/* Pre-Wave-10 wa8-shared.css used to ship IX2 pre-state opacity:0 +
   translateY on hero/cta/mid-page-cta panels; the IX2 runtime would
   animate them to visible on scroll-in. We stripped the runtime in
   Wave 7c and pruned the pre-state rules in Wave 10, but a defensive
   override keeps these surfaces visible against any stragglers. */
.wa8-band-content.wa8-hero,
.wa8-band-content.wa8-hero .wa8-container,
.wa8-band-content.wa8-cta,
.wa8-band-content.wa8-cta .wa8-container,
.wa8-band-content.mid-page-cta,
.wa8-band-content.mid-page-cta .wa8-container {
  opacity: 1 !important;
  transform: none !important;
}


/* ─── components/consent/ConsentSharedStyles.tsx ────────────────── */
/* Shared button system used by both the Banner footer and the
         Modal footer. Primary = lime pill (Accept all / Got it).
         Secondary = glass pill with border (Reject all). Tertiary =
         transparent text link (Customize / Save my choices). */
      .wa8-consent-btn {
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.005em;
        padding: 11px 18px;
        border-radius: 999px;
        cursor: pointer;
        border: 1px solid transparent;
        transition:
          background 180ms ease,
          border-color 180ms ease,
          color 180ms ease;
        white-space: nowrap;
      }
      .wa8-consent-btn-primary {
        background: #E9FC00;
        color: #0B0B12;
      }
      .wa8-consent-btn-primary:hover { background: #DDEF00; }
      .wa8-consent-btn-secondary {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.18);
      }
      .wa8-consent-btn-secondary:hover {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.32);
      }
      .wa8-consent-btn-tertiary {
        background: transparent;
        color: rgba(255, 255, 255, 0.85);
        border-color: transparent;
      }
      .wa8-consent-btn-tertiary:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.06);
      }
      .wa8-consent-btn-dismiss {
        background: #E9FC00;
        color: #0B0B12;
      }
      .wa8-consent-btn-dismiss:hover { background: #DDEF00; }