@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500&family=Poppins:wght@600;700;800&display=swap');
/* ============ Sreshtha — VSL Funnel ============
   Goal: conversion. The video is the page. Everything else
   either reinforces the video or removes friction to booking. */

:root {
  --ink: #14140f;
  --ink-soft: #3a3a32;
  --ink-mute: #6b665c;
  --paper: #ffffff;
  --paper-2: #f5f5f0;
  --paper-3: #eceae0;
  --rule: rgba(20, 20, 15, 0.1);

  /* PRIMARY: pastel cyan family — clean, premium, breathable */
  /* PRIMARY: live thefoodfreedomco.com palette — near-black forest body
     with bright leaf-green accents. */
  --night: #ffffff;        /* near-black forest (primary body bg) */
  --night-2: #fafafa;      /* slightly lighter dark forest */
  --night-3: #FEF2F2;      /* medium dark forest for gradient stops */
  --night-line: rgba(220, 38, 38, 0.16);

  /* ACCENT: bright leaf green for CTAs, dots, accent words */
  --accent: #DC2626;        /* bright leaf green */
  --accent-deep: #B91C1C;   /* deep leaf */
  --accent-darker: #991B1B; /* darkest leaf */
  --accent-soft: #F0A5A5;   /* light sage for soft text moments */
  --accent-bg: rgba(220, 38, 38, 0.06); /* faint sage tint over dark bg */

  /* Standardized gold — single bright glowing tone used everywhere */
  --gold: #DC2626;
  --gold-soft: #DC2626;
  --gold-deep: #DC2626;

  --bad: #B85C50;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--night);
  color: #14140f;
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.serif { font-family: "Poppins", sans-serif; }
.italic { font-style: italic; }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}
.narrow { max-width: 920px; }

/* ============ REVEAL ============ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.in > *:nth-child(2){transition-delay:70ms}
.reveal-stagger.in > *:nth-child(3){transition-delay:140ms}
.reveal-stagger.in > *:nth-child(4){transition-delay:210ms}
.reveal-stagger.in > *:nth-child(5){transition-delay:280ms}
.reveal-stagger.in > *:nth-child(6){transition-delay:350ms}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-stagger > *{opacity:1;transform:none;transition:none;}
}

/* ============ TOP URGENCY STRIP ============ */
.urgency-strip {
  position: relative;
  z-index: 12;
  /* Darkest forest with gold border separates it from the hero bg below */
  background: linear-gradient(90deg, #FEF2F2 0%, #B91C1C 50%, #FEF2F2 100%);
  border-bottom: 1px solid rgba(220, 38, 38, 0.35);
  padding: 9px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d6e3f7;
  flex-wrap: wrap;
  overflow: hidden;
}
.urgency-strip::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.18), transparent);
  transform: translateX(-100%);
  animation: stripShine 6s linear infinite;
  pointer-events: none;
}
@keyframes stripShine { to { transform: translateX(100%); } }
.urgency-strip .live {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold-soft);
}
.urgency-strip .live::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #ff5b3e;
  box-shadow: 0 0 8px #ff5b3e, 0 0 16px rgba(255,91,62,0.5);
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.8); } }
.urgency-strip .dot-sep { color: rgba(220, 38, 38,0.4); }
.urgency-strip .countdown {
  color: var(--gold-soft);
  font-weight: 500;
  letter-spacing: 0.18em;
}
.urgency-strip .countdown b {
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.urgency-strip .spots b {
  color: #ff8a6a;
  font-weight: 600;
}

@media (max-width: 720px) {
  /* Keep the strip on a single line on mobile. */
  .urgency-strip { gap: 8px; font-size: 9px; letter-spacing: 0.04em; padding: 8px 10px; }
  .urgency-strip .dot-sep { display: none; }
  .urgency-strip .live { white-space: nowrap; gap: 6px; }
}
@media (max-width: 380px) {
  .urgency-strip { font-size: 8px; letter-spacing: 0.02em; }
}

/* ============ NAV / LOGO ============ */
.nav-top {
  position: relative; z-index: 4;
  display: flex; justify-content: center;
  padding: 22px 32px 0;
}
.brand {
  display: inline-flex; align-items: center;
}
.brand .brand-logo {
  width: 100px; height: 100px;
  object-fit: contain; display: block;
}

/* ============ HERO / VSL CORE ============ */
.hero-funnel {
  position: relative;
  padding: 28px 0 56px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(220, 38, 38, 0.18), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(220, 38, 38, 0.08), transparent 60%),
    var(--night);
  overflow: hidden;
}
.hero-funnel::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(220, 38, 38, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220, 38, 38, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center top, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center top, black 0%, transparent 75%);
}

.hero-funnel-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 22px;
  padding-top: 24px;
}

/* Long qualifying sentence: constrained block sized to wrap to TWO lines on
   desktop, with the live-dot vertically centred against the block. */
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 11px;
  max-width: 820px;
  padding: 11px 22px;
  border: 1px solid rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.1);
  border-radius: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: 0.14em;
  line-height: 1.7;
  text-transform: uppercase;
  text-align: left;
  color: var(--gold-soft);
}
.eyebrow-pill .dot {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  background: #DC2626;
  box-shadow: 0 0 8px #DC2626;
  flex-shrink: 0;
}
.eyebrow-pill .dot::before {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%; background: #DC2626;
  opacity: .4; animation: dot-pulse 2s ease-out infinite;
}
@keyframes dot-pulse {
  0% { transform: scale(.6); opacity: .5; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (max-width: 720px) {
  /* Mobile: dot stays vertically centred; the sentence is LEFT-aligned. */
  .eyebrow-pill {
    max-width: 100%;
    padding: 9px 15px;
    font-size: 9.5px;
    letter-spacing: 0.12em;
    line-height: 1.65;
    gap: 9px;
    justify-content: flex-start;
    text-align: left;
  }
}

.hero-h1 {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  /* Reduced max from 56 → 44 so the long first sentence fits on one line. */
  font-size: clamp(28px, 4.1vw, 48px);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #14140f;
  max-width: 1100px;
  /* Avoid orphan single-word lines when the headline wraps on small screens. */
  text-wrap: balance;
}
.hero-h1 .hero-h1-line {
  display: block;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .hero-h1 .hero-h1-line { white-space: normal; }
}
/* Responsive line breaks: desktop = 2 lines (break after "20"),
   mobile = 3 lines (break after "Same" and "Your Approach"). */
.hero-h1 .br-m { display: none; }
.hero-h1 .br-d { display: inline; }
@media (max-width: 720px) {
  .hero-h1 .br-m { display: inline; }
  .hero-h1 .br-d { display: none; }
}
.hero-h1 .gold {
  font-style: italic;
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-h1 .accent-italic {
  display: inline-block;
  padding-right: 0.1em;
  font-style: italic;
  /* On the dark forest bg, accent uses a brighter sage→leaf gradient so
     it pops against the dark green. */
  background: linear-gradient(180deg, #F0A5A5 0%, #DC2626 55%, #B91C1C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-h1 .gold-box {
  display: inline-block;
  /* Serif descent space lives inside the box bottom (no descenders in this
     phrase), so the top needs MORE padding than the bottom to look balanced. */
  padding: 0.2em 0.34em 0.1em;
  /* Live theme — bright leaf gradient, not gold */
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  -webkit-text-fill-color: #fff;
  border-radius: 8px;
  font-style: normal;
  margin: 0 4px;
  line-height: 1.05;
  vertical-align: baseline;
  box-shadow:
    0 10px 24px -10px rgba(220, 38, 38, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hero-sub {
  max-width: 720px;
  margin: 0;
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  color: rgba(20, 20, 15, 0.85);
  line-height: 1.55;
}
.hero-sub strong { color: var(--gold); font-weight: 700; }

/* ============ DESKTOP: fit hero through the CTA on the first screen ============
   Tighten vertical rhythm and scale the VSL height to the available viewport so
   the eyebrow → headline → sub → video → primary CTA all land above the fold.
   The VSL keeps its 1659:948 ratio; its max width is derived from the height
   left over after the other hero elements, capped at 900px. */
@media (min-width: 1000px) {
  .hero-funnel { padding: 12px 0 40px; }
  /* Trim nav + gaps to free vertical room for a larger video. */
  .nav-top { padding-top: 6px; }
  .hero-funnel-inner { gap: 12px; padding-top: 6px; }
  .hero-h1 { line-height: 1.3; }
  /* Scoped selector (.hero-funnel .vsl-wrap) raises specificity so this beats
     the base `.vsl-wrap { max-width: 980px }` that appears later in the file.
     clamp(): never smaller than 560px wide, cap at 980px, and in between derive
     the width from the viewport height left after the other hero elements so the
     primary CTA clears the fold on common desktops. The reserve (588px) accounts
     for the 100px brand logo. Ratio 1.7506 = 1659/948. */
  .hero-funnel .vsl-wrap {
    margin-top: 2px;
    max-width: clamp(560px, calc((100vh - 588px) * 1.7506), 980px);
  }
  /* Keep the CTA tight to the video so it clears the fold. */
  .hero-cta-block { margin-top: 2px; }
}

/* mini trust row immediately under headline */
.hero-trust {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 16px 8px 12px;
  background: rgba(20, 20, 15, 0.06);
  border: 1px solid rgba(20, 20, 15, 0.18);
  border-radius: 999px;
  font-size: 12.5px;
  color: rgba(20, 20, 15, 0.85);
}
.hero-trust .avatars { display: inline-flex; align-items: center; }
.hero-trust .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--night);
  margin-left: -7px;
  background-size: cover;
}
.hero-trust .avatar:first-child { margin-left: 0; }
.hero-trust .a1 { background: radial-gradient(circle at 50% 35%, #f0d4b5 0%, #5f6b80 70%, #8a6648 100%); }
.hero-trust .a2 { background: radial-gradient(circle at 50% 35%, #ead4be 0%, #b89378 70%, #7a5640 100%); }
.hero-trust .a3 { background: radial-gradient(circle at 50% 35%, #f4d8ba 0%, #d2a684 70%, #94704e 100%); }
.hero-trust .a4 { background: radial-gradient(circle at 50% 35%, #e8c8a8 0%, #5f6b80 70%, #6e4e38 100%); }
.hero-trust .more {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--night);
  margin-left: -7px;
  background: var(--accent-deep);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.04em;
}
.hero-trust .stars { color: var(--gold-soft); letter-spacing: 0.2em; font-size: 11.5px; }
.hero-trust b { color: #fff; font-weight: 600; }

/* ============ VSL CARD — the centerpiece ============ */
.vsl-wrap {
  position: relative;
  width: 100%;
  max-width: 980px;
  margin: 8px auto 0;
  padding: 0 0 0;
}
.vsl-wrap::before {
  /* outer glow ring */
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(20, 20, 15, 0.35), transparent 65%);
  filter: blur(20px);
  z-index: 0;
  animation: vslGlow 6s ease-in-out infinite;
}
@keyframes vslGlow {
  0%,100% { opacity: .55; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.04); }
}
.vsl-box {
  position: relative;
  z-index: 2;
  /* Match the composed thumbnail's native ratio (1659×948) so its baked-in
     edge text/icons fit fully inside the border — no cover-crop. */
  aspect-ratio: 1659 / 948;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 30%, #FEF2F2 0%, #ffffff 60%, #ffffff 100%);
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,0.7),
    0 0 60px -10px rgba(20, 30, 10, 0.22);
  cursor: pointer;
  isolation: isolate;
}
.vsl-box::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(20, 30, 10, 0.16), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(20, 30, 10, 0.08), transparent 40%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.vsl-box:hover::before { opacity: 1; }
.vsl-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.vsl-box:hover .vsl-image { transform: scale(1.02); }
/* real VSL video — hidden until the poster is clicked */
.vsl-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: none;
  z-index: 6;
  background: #ffffff;
}
.vsl-box.playing { cursor: default; }
.vsl-box.playing .vsl-video { display: block; }
.vsl-box.playing .vsl-image { opacity: 0; pointer-events: none; }
.vsl-grid {
  position: absolute; inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 6% 5%;
}
.vsl-left {
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}
.vsl-headline {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 32px);
  color: #14140f;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0;
}
.vsl-headline .q { color: var(--gold); }
.vsl-week {
  flex: 1;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 10px;
  padding: 12px 16px;
  background: rgba(9, 5, 4, 0.4);
}
.vsl-day {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.16em;
  color: rgba(245, 240, 230, 0.4);
  text-transform: uppercase;
}
.vsl-day.lit { color: var(--accent-soft); }
.vsl-row {
  display: flex; align-items: center; gap: 10px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.vsl-row .ico {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 4px; flex-shrink: 0;
  font-size: 13px; font-weight: 700;
}
.vsl-row .ico.check { background: var(--accent); color: #fff; box-shadow: 0 0 12px rgba(20, 20, 15, 0.5); }
.vsl-row .ico.clock { background: rgba(20, 30, 10, 0.18); color: var(--accent-soft); }
.vsl-row .ico.cross { background: transparent; color: var(--bad); font-size: 22px; line-height: .9; filter: drop-shadow(0 0 8px rgba(201,116,100,0.5)); }
.vsl-row.start .text { color: var(--accent-soft); }
.vsl-row.mid .text { color: var(--accent-soft); }
.vsl-row.end .text { color: #14140f; font-weight: 500; }
.vsl-row.dim .text { color: rgba(245, 240, 230, 0.25); }

.vsl-right {
  position: relative;
  display: grid; place-items: end center;
}
.vsl-portrait {
  position: absolute; inset: -8% -10% -2% 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(20, 30, 10, 0.14), transparent 60%),
    repeating-linear-gradient(135deg, rgba(20, 30, 10, 0.05) 0 14px, transparent 14px 28px);
  border-radius: 12px;
  z-index: -1;
}
.vsl-portrait-label {
  position: absolute;
  bottom: 8%;
  font-family: "Poppins", sans-serif;
  font-style: italic;
  color: rgba(245, 240, 230, 0.4);
  font-size: 13px;
  letter-spacing: 0.05em;
}

/* play button - big, magnetic */
.vsl-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 104px; height: 104px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--accent-deep) 100%);
  color: var(--ink);
  display: grid; place-items: center;
  box-shadow:
    0 20px 40px -10px rgba(20, 20, 15, 0.5),
    0 0 0 8px rgba(20, 30, 10, 0.12),
    0 0 0 16px rgba(20, 30, 10, 0.06);
  transition: transform .25s ease;
  cursor: pointer;
}
.vsl-play::before, .vsl-play::after {
  content: "";
  position: absolute; inset: -16px;
  border-radius: 50%;
  border: 2px solid rgba(20, 30, 10, 0.35);
  animation: playRipple 2.4s cubic-bezier(.2,.7,.2,1) infinite;
  pointer-events: none;
}
.vsl-play::after { animation-delay: 1.2s; }
@keyframes playRipple {
  0% { transform: scale(.7); opacity: .8; }
  100% { transform: scale(1.7); opacity: 0; }
}
.vsl-box:hover .vsl-play { transform: translate(-50%, -50%) scale(1.06); }
.vsl-play .triangle {
  width: 0; height: 0;
  border-left: 26px solid var(--ink);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  margin-left: 6px;
}

/* corner pills on video */
.vsl-corner-tl {
  position: absolute; top: 16px; left: 16px;
  z-index: 5;
  padding: 6px 10px;
  background: rgba(240, 242, 246, 0.7);
  border: 1px solid rgba(255, 91, 62, 0.5);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff8a6a;
  display: inline-flex; align-items: center; gap: 7px;
}
.vsl-corner-tl::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #ff5b3e;
  box-shadow: 0 0 8px #ff5b3e;
  animation: livePulse 1.4s ease-in-out infinite;
}
.vsl-corner-tr {
  position: absolute; top: 16px; right: 16px;
  z-index: 5;
  padding: 6px 10px;
  background: rgba(240, 242, 246, 0.7);
  border: 1px solid rgba(20, 30, 10, 0.25);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.vsl-bottom-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 5;
  padding: 14px 22px;
  background: linear-gradient(180deg, transparent, rgba(240, 242, 246, 0.85) 50%);
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.vsl-bottom-bar .runtime {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(20, 20, 15, 0.75);
  text-transform: uppercase;
}
.vsl-bottom-bar .caption {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: 14px;
  color: var(--gold-soft);
  letter-spacing: 0.01em;
}

@media (max-width: 720px) {
  .vsl-grid { padding: 6% 4%; gap: 10px; }
  .vsl-headline { font-size: 15px; }
  .vsl-week { padding: 8px 10px; grid-template-columns: 36px 1fr; gap: 2px 8px; }
  .vsl-row { font-size: 12px; }
  .vsl-day { font-size: 9px; }
  .vsl-play { width: 72px; height: 72px; }
  .vsl-play .triangle { border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; }
  .vsl-corner-tl, .vsl-corner-tr { font-size: 8.5px; padding: 5px 8px; }
  .vsl-bottom-bar { padding: 10px 14px; }
  .vsl-bottom-bar .caption { font-size: 11px; }
}

/* ============ HERO CTA BLOCK ============ */
.hero-cta-block {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 2;
}

.cta-big {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 22px 32px 22px 36px;
  background: linear-gradient(180deg, #DC2626 0%, #0a44a8 100%);
  color: #fff;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid rgba(220, 38, 38, 0.55);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  box-shadow:
    0 18px 36px -10px rgba(20, 20, 15, 0.6),
    0 0 0 1px rgba(220, 38, 38, 0.22),
    0 0 32px -6px rgba(220, 38, 38, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.1) inset;
  white-space: nowrap;
  animation: ctaBreath 3.4s ease-in-out infinite;
}
@keyframes ctaBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.018); }
}
.cta-big::before {
  content: "";
  position: absolute; inset: 5px;
  border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, 0.28);
  pointer-events: none;
  z-index: 1;
}
.cta-big::after {
  content: "";
  position: absolute; top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(220, 38, 38,0.48) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  animation: ctaShine 4s ease-in-out infinite;
  animation-delay: 1s;
  pointer-events: none; z-index: 2;
}
@keyframes ctaShine { 0% { left: -60%; } 60%, 100% { left: 130%; } }
.cta-big:hover { transform: translateY(-2px) scale(1.02); animation: none; }
.cta-big > * { position: relative; z-index: 3; }
.cta-big .arrow {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-deep);
  display: grid; place-items: center;
  font-size: 16px;
  transition: transform .22s ease;
}
.cta-big:hover .arrow { transform: translateX(4px); }
.cta-price {
  margin-left: 6px;
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-soft);
  letter-spacing: -0.01em;
}
.cta-price .strike {
  text-decoration: line-through;
  text-decoration-color: rgba(20, 20, 15, 0.8);
  text-decoration-thickness: 2px;
  color: rgba(20, 20, 15, 0.75);
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  margin-right: 8px;
}

.cta-meta-row {
  display: flex; align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.guarantee-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 8px;
  background: rgba(20, 20, 15, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(20, 20, 15, 0.78);
}
.guarantee-chip .seal {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(220, 38, 38, 0.18);
  display: grid; place-items: center;
  position: relative;
  font-size: 0;
  color: transparent;
  border: 1px solid rgba(220, 38, 38, 0.5);
}
/* Inline SVG checkmark — naturally centered, thin stroked tick. */
.guarantee-chip .seal::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23b8e6a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7.2 5.8 10 11 4.2'/></svg>") center / contain no-repeat;
}

/* On cream/paper sections, flip the chip to a light card with dark text
   so it stays visible (the default chip is designed for dark forest bg). */
.sec-band-paper .guarantee-chip,
.sec-band-paper-2 .guarantee-chip {
  background: #ffffff;
  border: 1px solid rgba(240, 242, 246, 0.18);
  color: rgba(240, 242, 246, 0.82);
  box-shadow:
    0 4px 14px -6px rgba(240, 242, 246, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.sec-band-paper .guarantee-chip .seal,
.sec-band-paper-2 .guarantee-chip .seal {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.5);
}
.sec-band-paper .guarantee-chip .seal::before,
.sec-band-paper-2 .guarantee-chip .seal::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231f4519' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7.2 5.8 10 11 4.2'/></svg>");
}

/* Same idea for fineprint on cream sections — default is light cream for
   dark sections, but on cream paper it disappears. */
.sec-band-paper .fineprint,
.sec-band-paper-2 .fineprint {
  color: rgba(240, 242, 246, 0.55);
}
.spots-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  background: rgba(255, 91, 62, 0.1);
  border: 1px solid rgba(255, 138, 106, 0.45);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff8a6a;
}
.spots-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #ff5b3e;
  box-shadow: 0 0 8px #ff5b3e;
  animation: livePulse 1.4s ease-in-out infinite;
}
.spots-chip b { color: #ffbfa0; font-weight: 600; }

.fineprint {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: 13.5px;
  color: rgba(20, 20, 15, 0.65);
  text-align: center;
  margin: 4px 0 0;
  max-width: 540px;
}

/* ============ HERO STAT STRIP ============ */
.hero-stats {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(20, 20, 15, 0.18);
  border-bottom: 1px solid rgba(20, 20, 15, 0.18);
  position: relative; z-index: 2;
}
.hero-stats .col {
  text-align: center;
  padding: 22px 18px;
  border-right: 1px solid rgba(20, 20, 15, 0.12);
}
.hero-stats .col:last-child { border-right: none; }
.hero-stats .num {
  font-family: "Poppins", sans-serif;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500;
  color: #14140f;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-flex; align-items: baseline;
}
.hero-stats .num .suffix {
  font-style: italic;
  color: var(--gold);
  font-size: 0.7em;
  margin-left: 3px;
  text-shadow:
    0 0 12px rgba(220, 38, 38, 0.55),
    0 0 4px rgba(220, 38, 38, 0.4);
}
.hero-stats .lbl {
  margin-top: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(20, 20, 15, 0.6);
}
@media (max-width: 720px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats .col:nth-child(2) { border-right: none; }
}

/* ============ STICKY CTA BAR (full-width, post-hero) ============ */
.sticky-cta {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 16px 28px;
  background: linear-gradient(180deg, #fafafa 0%, #fafafa 100%);
  border-top: 1.5px solid var(--gold);
  box-shadow:
    0 -24px 60px -20px rgba(0,0,0,0.7),
    0 0 0 1px rgba(220, 38, 38, 0.18) inset,
    0 0 40px -6px rgba(20, 20, 15, 0.25);
  transform: translateY(120%);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
}
.sticky-cta.in { transform: translateY(0); }
.sticky-cta::before {
  /* continuous gold shine sweep */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 35%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(220, 38, 38, 0.06) 30%,
    rgba(220, 38, 38, 0.32) 50%,
    rgba(220, 38, 38, 0.06) 70%,
    transparent 100%);
  transform: skewX(-20deg);
  animation: stickyShine 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes stickyShine {
  0%   { left: -45%; }
  60%  { left: 140%; }
  100% { left: 140%; }
}
.sticky-cta > * { position: relative; z-index: 1; }

.sticky-cta .sticky-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.45);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 600;
}
.sticky-cta .sticky-tag::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff5b3e;
  box-shadow: 0 0 8px #ff5b3e;
  animation: livePulse 1.4s ease-in-out infinite;
}

.sticky-cta .sticky-label {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  color: #14140f;
  white-space: nowrap;
}
.sticky-cta .sticky-label strong {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #14140f;
}
.sticky-cta .sticky-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.sticky-cta .sticky-price .strike {
  text-decoration: line-through;
  text-decoration-color: rgba(20, 20, 15, 0.55);
  text-decoration-thickness: 1.5px;
  color: rgba(20, 20, 15, 0.55);
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: 16px;
}
.sticky-cta .sticky-price .now {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: 24px;
  color: var(--gold-soft);
  font-weight: 500;
  text-shadow: 0 1px 10px rgba(220, 38, 38, 0.35);
}

.sticky-cta .sticky-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 12px 24px;
  background: linear-gradient(180deg, #DC2626 0%, #ffffff 100%);
  color: #fff;
  border: 1px solid rgba(220, 38, 38, 0.55);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow:
    0 8px 22px -6px rgba(20, 20, 15, 0.6),
    0 0 0 1px rgba(220, 38, 38, 0.2),
    0 0 18px -4px rgba(220, 38, 38, 0.25);
  transition: transform .22s ease;
  white-space: nowrap;
}
.sticky-cta:hover .sticky-arrow { transform: translateY(-1px); }
.sticky-cta .sticky-arrow .ar {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  color: var(--accent-deep);
  display: grid; place-items: center;
  font-size: 13px;
  font-weight: 700;
  transition: transform .22s ease;
}
.sticky-cta:hover .sticky-arrow .ar { transform: translateX(3px); }

@media (max-width: 720px) {
  /* Show the sticky CTA from the first hero screen on mobile. It's shown by
     default via CSS (no dependence on JS), so it can't be missed; JS only adds
     `.is-hidden` once the final CTA is in view so the two don't stack. */
  .sticky-cta { gap: 14px; padding: 12px 16px; transform: translateY(0); }
  .sticky-cta.is-hidden { transform: translateY(120%); }
  .sticky-cta .sticky-tag { display: none; }
  .sticky-cta .sticky-label strong { font-size: 17px; }
  .sticky-cta .sticky-label { gap: 10px; }
  .sticky-cta .sticky-price .now { font-size: 19px; }
  .sticky-cta .sticky-price .strike { font-size: 14px; }
  .sticky-cta .sticky-arrow { padding: 9px 14px 9px 16px; font-size: 12.5px; }
}
@media (max-width: 460px) {
  .sticky-cta .sticky-price .strike { display: none; }
  .sticky-cta .sticky-label { flex-direction: column; align-items: flex-start; gap: 2px; }
  .sticky-cta .sticky-label strong { font-size: 15px; }
  .sticky-cta .sticky-price .now { font-size: 17px; }
}

/* Sticky CTA hides when the user reaches the final CTA section (see
   funnel.js), so no extra body padding is needed — that would leave
   a dead strip below the footer. */

/* ============ LIVE BOOKING TOAST ============ */
.booking-toast {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 49;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 14px;
  background: rgba(240, 242, 246, 0.92);
  border: 1px solid rgba(20, 30, 10, 0.22);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.6);
  max-width: 320px;
  transform: translateX(-130%);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.booking-toast.in { transform: translateX(0); opacity: 1; }
.booking-toast .av {
  width: 36px; height: 36px; border-radius: 50%;
  background-size: cover;
  flex-shrink: 0;
}
.booking-toast .av-a { background: radial-gradient(circle at 50% 35%, #f0d4b5 0%, #5f6b80 70%, #8a6648 100%); }
.booking-toast .av-b { background: radial-gradient(circle at 50% 35%, #ead4be 0%, #b89378 70%, #7a5640 100%); }
.booking-toast .av-c { background: radial-gradient(circle at 50% 35%, #f4d8ba 0%, #d2a684 70%, #94704e 100%); }
.booking-toast .av-d { background: radial-gradient(circle at 50% 35%, #e8c8a8 0%, #5f6b80 70%, #6e4e38 100%); }
.booking-toast .lines { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.booking-toast .name {
  font-family: "Poppins", sans-serif;
  font-size: 14px; color: var(--ink);
  line-height: 1.2;
}
.booking-toast .name b { font-weight: 500; }
.booking-toast .time {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: rgba(20, 30, 10, 0.7);
  text-transform: uppercase;
}
.booking-toast .time::before {
  content: ""; display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  margin-right: 6px;
  vertical-align: 1px;
}
@media (max-width: 640px) {
  .booking-toast { left: 12px; right: 12px; bottom: 84px; max-width: none; }
}

/* ============ Section scaffolding ============ */
section {
  padding: 80px 0;
  position: relative;
}
.sec-band-paper {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, #fbfaf3 0%, transparent 60%),
    var(--paper);
  color: var(--ink);
}
.sec-band-paper-2 { background: var(--paper-2); color: var(--ink); }
.sec-band-night {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(220, 38, 38, 0.1), transparent 60%),
    var(--night);
  color: #14140f;
  position: relative; overflow: hidden;
  padding: 96px 0 110px;
}
.sec-band-night::before {
  /* Film grain — SVG fractal noise as data URI. Imperceptible flat but
     gives the navy a tactile film-stock texture under raking light. */
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.95  0 0 0 0 0.90  0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}
.sec-band-night::after {
  /* Faint top-spot beam highlighting the photo column area */
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 26% 38% at 32% 32%, rgba(20, 20, 15, 0.10), transparent 60%);
}

.sec-head {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  margin-bottom: 44px;
}
.sec-num {
  display: inline-flex; align-items: baseline;
  gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.sec-band-night .sec-num { color: rgba(20, 20, 15, 0.6); }
.sec-num .n {
  font-family: "Poppins", sans-serif; font-style: italic;
  font-size: 22px; color: var(--accent-deep); letter-spacing: 0; line-height: 1;
}
.sec-band-night .sec-num .n { color: var(--accent-soft); }
.sec-num .bar { width: 28px; height: 1px; background: var(--ink-mute); }
.sec-band-night .sec-num .bar { background: rgba(20, 20, 15, 0.3); }

.sec-h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: -0.022em;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.14;
  margin: 0;
  max-width: 1080px;
  /* Balance line lengths so a title never drops a single word onto its own line. */
  text-wrap: balance;
}
.sec-h2 .accent { color: var(--accent); font-style: italic; font-weight: 700; }
.sec-band-night .sec-h2 { color: #14140f; }
.sec-band-night .sec-h2 .accent { color: var(--accent-soft); }
.sec-lede {
  font-size: clamp(15px, 1.15vw, 17.5px);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 640px;
  margin: 0;
}
.sec-band-night .sec-lede { color: rgba(20, 20, 15, 0.78); }

/* ============ ON THE CALL — condensed 2-col ============ */
.call-meta-chip {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 auto;
}
.sec-band-night .call-meta-chip {
  background: rgba(20, 20, 15, 0.06);
  border-color: rgba(20, 20, 15, 0.2);
  color: rgba(20, 20, 15, 0.85);
}
.call-meta-chip strong { color: var(--accent-deep); font-weight: 600; }
.sec-band-night .call-meta-chip strong { color: var(--accent-soft); }
.sec-band-night .mentor-name-big { color: #14140f; }
.call-meta-chip .sep { opacity: 0.45; }

/* ============ ON THE CALL — list inside a box ============ */
.agenda-box {
  margin-top: 32px;
  background: var(--paper);
  border: 1.5px solid rgba(20, 20, 15, 0.22);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 28px 56px -32px rgba(20, 20, 15, 0.28);
  position: relative;
}
.agenda-box::before {
  /* subtle gold edge at top */
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold-soft) 50%, var(--gold) 75%, transparent);
  border-radius: 0 0 4px 4px;
}
.agenda-row {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 22px;
  align-items: start;
  padding: 26px 32px;
  border-bottom: 1.5px solid rgba(20, 20, 15, 0.18);
  transition: background .25s ease;
  position: relative;
}
.agenda-row::after {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: center;
  transition: opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.agenda-row:last-child { border-bottom: none; }
.agenda-row:hover { background: rgba(20, 20, 15, 0.05); }
.agenda-row:hover::after { opacity: 1; transform: scaleY(1); }
.agenda-row:hover .agenda-ico {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: rotate(-6deg) scale(1.06);
}
.agenda-ico {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--accent-bg);
  color: var(--accent-deep);
  display: grid; place-items: center;
  border: 1px solid rgba(20, 20, 15, 0.22);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  flex-shrink: 0;
}
.agenda-ico svg { width: 28px; height: 28px; }

.agenda-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.agenda-num-small {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--accent-deep);
  letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  .agenda-row { grid-template-columns: 48px 1fr; gap: 14px; padding: 22px 20px; }
  .agenda-ico { width: 44px; height: 44px; border-radius: 11px; }
  .agenda-ico svg { width: 22px; height: 22px; }
}
.agenda-num {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: 52px;
  line-height: .9;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.agenda-num .acc {
  font-style: normal;
  color: var(--gold);
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 2px;
}
.agenda-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 10px;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  -webkit-text-fill-color: var(--gold-deep);
  font-weight: 500;
  margin-bottom: 4px;
}
.agenda-title {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  line-height: 1.2;
  color: var(--ink);
}
.agenda-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* ============ MARQUEE — transformations band ============ */
.marquee-band {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(220, 38, 38, 0.1), transparent 60%),
    var(--night);
  color: #14140f;
  padding: 70px 0 84px;
  position: relative;
  overflow: hidden;
}
.marquee-band::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(240, 242, 246, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 242, 246, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.marquee-eyebrow {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(20, 20, 15, 0.6);
  margin-bottom: 18px;
}
/* On the light Story band the cream tone is invisible — use a deep gold and
   bump the size so the "Featured By…" label actually reads. */
.sec-band-paper .marquee-eyebrow,
.sec-band-paper-2 .marquee-eyebrow {
  color: #DC2626;
  font-size: clamp(13px, 1.6vw, 17px);
}
@media (max-width: 480px) {
  .marquee-eyebrow { font-size: 12.5px; letter-spacing: 0.16em; }
}
.marquee-h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0 auto 44px;
  color: #14140f;
  max-width: 880px;
  text-wrap: balance;
}
.marquee-h2 .accent-italic {
  font-style: italic;
  background: linear-gradient(180deg, #F0A5A5 0%, #DC2626 55%, #B91C1C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.marquee-edges {
  position: relative;
}
.marquee-edges::before,
.marquee-edges::after {
  content: "";
  position: absolute; top: -20px; bottom: -20px;
  width: 140px;
  z-index: 2;
  pointer-events: none;
  background: var(--night);
}
.marquee-edges::before {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 35%, transparent 100%);
          mask-image: linear-gradient(to right, black 0%, black 35%, transparent 100%);
}
.marquee-edges::after {
  right: 0;
  -webkit-mask-image: linear-gradient(to left, black 0%, black 35%, transparent 100%);
          mask-image: linear-gradient(to left, black 0%, black 35%, transparent 100%);
}
.marquee-row {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marqueeScroll 60s linear infinite;
}
.marquee-row.reverse {
  animation-direction: reverse;
  margin-top: 18px;
}
/* Pause on hover only on real pointer devices — on touch screens a tap
   sticks the :hover state, so handle press-and-hold in JS instead. */
@media (hover: hover) {
  .marquee-row:hover { animation-play-state: paused; }
}
.marquee-row.touch-paused { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Transformation card: full image inside a 4px uniform white mat,
   then a 2px gold border on the outside. Image is shown at its full
   source — internal white margins kept — but the gap to the gold border
   is the same minimum 4px on all four sides. */
.marquee-card {
  flex: 0 0 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  background: transparent;
}
.marquee-card .marquee-img-wrap {
  width: 200px;
  height: 200px;
  background: #ffffff;
  box-sizing: border-box;
  padding: 4px;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
  box-shadow:
    0 0 0 1.5px rgba(220, 38, 38, 0.85),
    0 14px 30px -10px rgba(240, 242, 246, 0.22),
    0 4px 10px -4px rgba(240, 242, 246, 0.18);
}
.marquee-card .marquee-img {
  border-radius: 6px;
}
.marquee-card .marquee-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.marquee-card .marquee-meta {
  padding: 12px 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.marquee-card .mm-name {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-transform: uppercase;
}
.marquee-card .mm-kgs {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: #14140f;
  text-transform: uppercase;
}
.marquee-card .mm-cond {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(20, 20, 15, 0.65);
  text-transform: uppercase;
  line-height: 1.45;
}
@media (max-width: 640px) {
  .marquee-card { flex: 0 0 160px; width: 160px; }
  .marquee-card .marquee-img-wrap { width: 160px; height: 160px; }
  .marquee-card .marquee-img { width: 160px; height: 160px; }
  .marquee-card .mm-name { font-size: 10px; }
  .marquee-card .mm-kgs { font-size: 9px; }
  .marquee-card .mm-cond { font-size: 8px; }
}

/* ============ COMPARISON (Method) ============ */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  position: relative;
}
@media (max-width: 820px) { .compare { grid-template-columns: 1fr; } }
.compare-col {
  border-radius: 22px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  transition: transform 0.4s ease;
}
.compare-col.bad {
  background:
    repeating-linear-gradient(135deg, rgba(184, 92, 80, 0.05) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #F8EAE6 0%, #F1DDD7 100%);
  border: 1px solid rgba(184, 92, 80, 0.35);
  color: var(--ink-mute);
  box-shadow: inset 0 0 0 1px rgba(184, 92, 80, 0.04);
}
.compare-col.bad::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(184, 92, 80, 0.08), transparent 50%);
  pointer-events: none;
  border-radius: inherit;
}
.compare-col.good {
  background: linear-gradient(180deg, #f2f7fe 0%, #e8f0fc 100%);
  border: 1.5px solid var(--accent);
  color: var(--ink);
  box-shadow:
    0 30px 60px -30px rgba(20, 20, 15, 0.35),
    0 0 0 1px rgba(220, 38, 38, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-4px);
  z-index: 2;
}
.compare-col.good::before {
  content: "";
  position: absolute;
  top: -1.5px; left: 12%; right: 12%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 0 0 4px 4px;
}
.compare-col.good::after {
  content: "RECOMMENDED";
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--accent-deep);
  background: var(--paper);
  border: 1px solid var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
}
@media (max-width: 820px) {
  /* Stack: drop the lift, and move the RECOMMENDED pill to a centered tab
     at the top so it no longer overlaps the wrapping heading text. */
  .compare-col.good { transform: none; padding-top: 54px; }
  .compare-col.good::after {
    top: 16px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}
.compare-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.compare-head .label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.compare-col.bad .label { color: #A04A3F; font-weight: 600; }
.compare-col.good .label { color: var(--accent-deep); font-weight: 600; }
.compare-head .title {
  font-family: "Poppins", sans-serif;
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.compare-col.bad .title { color: var(--ink-soft); }
.compare-col.good .title { color: var(--ink); font-weight: 500; }
.compare-head .subtitle {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: 17px;
}
.compare-col.bad .subtitle { color: rgba(160, 74, 63, 0.75); }
.compare-col.good .subtitle { color: var(--ink-mute); }

.compare-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.compare-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  font-size: 15px;
  line-height: 1.55;
}
.compare-item .mark {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.compare-col.bad .mark {
  background: #B85C50;
  color: #FFF6F3;
  border: 1px solid #A04A3F;
  box-shadow: 0 3px 8px -2px rgba(184, 92, 80, 0.45);
}
.compare-col.good .mark {
  background: var(--accent);
  color: var(--paper);
  box-shadow: 0 4px 10px -2px rgba(20, 20, 15, 0.4);
}
.compare-col.bad .compare-item .head {
  color: var(--ink-soft);
  font-weight: 500;
}
.compare-col.good .compare-item .head {
  color: var(--ink);
  font-weight: 500;
}
.compare-col.bad .compare-item .desc {
  color: rgba(120, 110, 100, 0.7);
  font-size: 14px;
  margin-top: 2px;
}
.compare-col.good .compare-item .desc {
  color: var(--ink-soft);
  font-size: 14px;
  margin-top: 2px;
}

/* Compare callout below */
.compare-callout {
  margin: 56px auto 0;
  max-width: 720px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  position: relative;
}
.compare-callout .callout-leaf {
  width: 60px; height: 20px;
  color: var(--accent-deep);
  opacity: 0.7;
}
.compare-callout .callout-lead {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
  text-wrap: pretty;
}
.compare-callout .callout-punch {
  margin: 0;
  padding: 22px 28px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0;
  font-family: "Poppins", sans-serif;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
  letter-spacing: -0.005em;
  box-shadow: 0 14px 30px -20px rgba(20, 20, 15, 0.18);
}
.compare-callout .callout-punch em {
  font-style: italic;
  color: var(--accent-deep);
  font-weight: 400;
}
/* Closing line — the mic-drop after the highlighted punch box.
   No box (that competed with the green punch card). Instead a clean
   typographic beat: line one quiet, the punchline emphasised with a
   highlighter-marker swipe so it pops while staying under the punch box. */
.compare-callout .callout-final {
  margin: 28px 0 0;
  padding: 0;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--ink-soft);
  font-weight: 400;
  font-style: normal;
}
.compare-callout .callout-final em {
  display: inline;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  /* highlighter swipe — soft leaf-green band across the lower half only */
  background: linear-gradient(180deg, transparent 56%, rgba(220, 38, 38, 0.30) 56%, rgba(220, 38, 38, 0.30) 92%, transparent 92%);
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* "new rules now" — gold font colour only (no marker). A deeper gold than
   the brand --gold so it stays legible as text on the light paper band. */
.compare-callout .callout-final .gold-mark {
  font-weight: 600;
  color: #DC2626;
}
@media (max-width: 640px) {
  .compare-callout .callout-punch { padding: 18px 20px; }
  .compare-callout .callout-final { margin-top: 22px; font-size: 16px; }
}

.compare-callout {
  margin: 40px auto 0;
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.compare-callout p {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.compare-callout p strong {
  color: var(--ink);
  font-weight: 500;
}

/* ============ MENTOR (stacked column) ============ */
.mentor-stack {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  align-items: start;
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto;
}
.mentor-photo-col { position: relative; }
@media (min-width: 901px) {
  .mentor-photo-col {
    position: sticky;
    top: 96px;
    align-self: start;
  }
}
.mentor-content-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
}
@media (max-width: 900px) {
  .mentor-stack {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 780px;
  }
  .mentor-photo-col { display: flex; justify-content: center; }
  .mentor-content-col { align-items: center; }
}
/* Editorial portrait frame — tall 4:5 crop, cream mat, thin gold deckle,
   lifted off the navy with a deep proscenium shadow. */
.mentor-hero-photo-frame {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 14px 14px 18px;
  background: linear-gradient(180deg, #F7F2E4 0%, #EFE8D5 100%);
  position: relative;
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.65),
    0 60px 80px -40px rgba(0, 0, 0, 0.7),
    0 30px 50px -30px rgba(0, 0, 0, 0.55);
}
.mentor-hero-photo-frame::before {
  /* Inner gold hairline */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(176, 136, 74, 0.55);
  pointer-events: none;
  z-index: 2;
}
.mentor-hero-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  background: url('assets/sreshtha_Blazer_Pic.jpeg') center 18% / cover no-repeat #ffffff;
}
.mentor-hero-photo::after {
  /* Soft top-light grade on the photo */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 245, 220, 0.10), transparent 55%),
    linear-gradient(180deg, transparent 60%, rgba(8, 20, 5, 0.32) 100%);
  pointer-events: none;
}
.mentor-hero-caption {
  position: absolute;
  bottom: 18px; left: 0; right: 0;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #6b665c;
}
.mentor-hero-caption::before,
.mentor-hero-caption::after {
  content: "✦";
  display: inline-block;
  margin: 0 10px;
  font-size: 10px;
  color: rgba(176, 136, 74, 0.85);
  vertical-align: middle;
}
.mentor-name-big {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0;
  color: var(--ink);
  text-transform: uppercase;
}

/* Cred pills — credential chips below the mentor name on the dark
   forest section. Gold-tinted with metallic gold shine on the text
   (the shine itself lives in the global selector list further down). */
.cred-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 720px;
}
.cred-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 640px) {
  /* Mobile press / credential pills: two per row (the 4 "Featured By"
     publication pills sit as 2 + 2). */
  .cred-pills { gap: 8px; }
  .cred-pill {
    font-size: 9.5px;
    padding: 8px 11px;
    letter-spacing: 0.1em;
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.35;
  }
}

/* mentor points (clean unboxed list) */
.mentor-points {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 680px;
}
.mentor-points li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(20, 20, 15, 0.92);
}
.mentor-points li .dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
  box-shadow: 0 0 12px rgba(20, 20, 15, 0.35);
  flex-shrink: 0;
}
.mentor-points li strong { color: #ffffff; font-weight: 600; }

/* ============ MENTOR STORY — magazine feature treatment ============
   Aged cream paper, gold deckle edge, drop cap, italic pull-quotes
   between acts, hand-signature outro. The story reads like a Vogue
   profile, not a wall of bullets. */
.mentor-story-box {
  position: relative;
  width: 100%;
  margin-top: 8px;
  padding: 56px 56px 44px;
  background: rgba(20, 20, 15, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 2px;
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #14140f;
  isolation: isolate;
}
.mentor-story-box > * { position: relative; z-index: 1; }

.mentor-story-box .story-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 28px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.mentor-story-box .story-eyebrow::before,
.mentor-story-box .story-eyebrow::after {
  content: "";
  flex: 0 0 48px;
  height: 1px;
  background: rgba(220, 38, 38, 0.4);
}

.mentor-story-box p {
  font-family: "Poppins", sans-serif;
  font-size: 17.5px;
  line-height: 1.68;
  color: rgba(20, 20, 15, 0.82);
  margin: 0 0 18px;
}
.mentor-story-box p:last-of-type { margin-bottom: 0; }

/* Drop cap on the very first paragraph — bright leaf green for emphasis */
.mentor-story-box p.lead {
  font-size: 19.5px;
  line-height: 1.65;
  color: rgba(20, 20, 15, 0.92);
  margin-bottom: 22px;
}
.mentor-story-box p.lead::first-letter {
  float: left;
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 78px;
  line-height: 0.85;
  padding: 8px 12px 0 0;
  color: var(--accent);
}

/* Scrapbook photo cards interleaved through the story — white collages
   (tilted photos + handwritten captions) pinned onto the dark forest band.
   Clean rounded card, faint gold ring + soft shadow for depth. */
.mentor-story-box .story-photo {
  margin: 34px auto;
  max-width: 440px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.28),
    0 34px 70px -34px rgba(0, 0, 0, 0.66);
}
.mentor-story-box .story-photo img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 720px) {
  .mentor-story-box .story-photo { margin: 28px auto; max-width: 360px; }
}

/* Story box now spans the full section width (moved out of the narrow right
   column) so the dark band no longer reads as half-empty. On desktop the
   scrapbook photos float left/right alternately and the prose wraps around
   them — an editorial spread that fills the horizontal space. */
.mentor-story-box {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 44px;
}
@media (min-width: 901px) {
  .mentor-story-box { padding: 64px 76px 52px; }
  .mentor-story-box .story-photo {
    max-width: 320px;
    margin: 6px 0 16px;
  }
  .mentor-story-box .story-photo:nth-of-type(odd) {
    float: right;
    margin-left: 48px;
  }
  .mentor-story-box .story-photo:nth-of-type(even) {
    float: left;
    margin-right: 48px;
  }
  /* Closing beats clear the floats so they stay centred + full-width. */
  .mentor-story-box p.story-creed,
  .mentor-story-box p.outro,
  .mentor-story-box .story-cta-wrap { clear: both; }
}

/* Closing creed — the emotional turn just before the CTA. Centered, framed
   by gold rules above and below, set in a shiny metallic-gold italic serif
   with a slow sheen + soft glow so it catches light on the dark band. */
.mentor-story-box p.story-creed {
  margin: 44px auto 0;
  padding: 28px 0 30px;
  max-width: 660px;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(21px, 2.2vw, 28px);
  line-height: 1.42;
  letter-spacing: -0.004em;
  position: relative;
  background: linear-gradient(100deg, #bcd6f7 0%, #DC2626 26%, #1a63d8 48%, #DC2626 70%, #bcd6f7 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 14px rgba(220, 38, 38, 0.22));
  animation: creed-sheen 7s ease-in-out infinite;
}
.mentor-story-box p.story-creed::before,
.mentor-story-box p.story-creed::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 130px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.75;
}
.mentor-story-box p.story-creed::before { top: 0; }
.mentor-story-box p.story-creed::after { bottom: 0; }
@keyframes creed-sheen {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .mentor-story-box p.story-creed { animation: none; }
}

.story-pullquote {
  margin: 36px auto 36px;
  max-width: 86%;
  text-align: center;
  position: relative;
}
.story-pullquote::before,
.story-pullquote::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.5) 50%, transparent);
}
.story-pullquote::before { margin-bottom: 22px; }
.story-pullquote::after  { margin-top: 22px; }
.story-pullquote .ornament {
  display: block;
  font-size: 14px;
  color: var(--accent-soft);
  margin-bottom: 10px;
  letter-spacing: 0.4em;
}
.story-pullquote q,
.story-pullquote blockquote {
  display: block;
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  color: #14140f;
  margin: 0;
  quotes: none;
}
.story-pullquote q::before, .story-pullquote q::after { content: ""; }

/* Outro line — "And it all starts with a 1:1 Breakthrough call."
   Sits above the CTA: thin gold rule + italic serif, centered. */
.mentor-story-box p.outro {
  margin: 32px auto 0;
  max-width: 540px;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--accent-soft);
  position: relative;
}

.mentor-story-box .story-cta-wrap {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

@media (max-width: 720px) {
  .mentor-story-box { padding: 44px 24px 32px; }
  .mentor-story-box p.lead::first-letter { font-size: 60px; padding: 6px 10px 0 0; }
  .story-pullquote { max-width: 100%; margin: 28px auto; }
  .mentor-points li { padding: 14px 16px; }
}

/* ============ PROMISE BAND ============ */
/* ============ THE PROMISE — Certificate of Guarantee treatment ============
   Aged cream paper card with ornate gold corner brackets, refined
   medallion seal at top, italic editorial typography, and an italic
   closer line. Reads like an inscribed vow on parchment. */
.promise-band {
  padding: 104px 0 110px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(220, 38, 38, 0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(220, 38, 38, 0.08), transparent 60%),
    var(--night);
  color: #14140f;
}
.promise-band .sec-head { display: none; }

.promise-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(220, 38, 38, 0.06), transparent 65%),
    rgba(220, 38, 38, 0.035);
  padding: 68px 60px 56px;
  text-align: center;
  color: #14140f;
  isolation: isolate;
  /* Layered frame: bright-leaf hairline → breathing → soft gold ring + ambient glow */
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.32),
    0 0 0 7px rgba(240, 242, 246, 0.5),
    0 0 0 8px rgba(220, 38, 38, 0.28),
    0 0 60px -10px rgba(220, 38, 38, 0.18),
    0 50px 90px -40px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(220, 38, 38, 0.08);
}
.promise-card > * { position: relative; z-index: 2; }

/* Decorative top gold flourish — a thin rule with a centered ✦ ornament,
   like the title-page of an old leather-bound book. */
.promise-card::before {
  content: "";
  position: absolute;
  top: 24px; left: 18%; right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.6) 30%, rgba(220, 38, 38, 0.6) 70%, transparent);
  pointer-events: none;
  z-index: 1;
}
.promise-card::after {
  content: "✦";
  position: absolute;
  top: 16px; left: 50%; transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--gold);
  background: var(--night);
  padding: 0 8px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

/* Refined medallion seal */
.promise-shield {
  position: relative;
  width: 76px; height: 76px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 220, 0.5), transparent 55%),
    linear-gradient(180deg, #DC2626 0%, #DC2626 60%, #B91C1C 100%);
  display: grid; place-items: center;
  box-shadow:
    0 0 0 1.5px rgba(8, 40, 110, 0.55),
    0 0 0 5px rgba(20, 20, 15, 0.7),
    0 0 0 6.5px rgba(176, 136, 74, 0.7),
    0 14px 30px -8px rgba(8, 40, 110, 0.5),
    inset 0 1px 0 rgba(255, 255, 240, 0.5);
}
.promise-shield svg { width: 30px; height: 30px; color: #2A1F0F; stroke-width: 2.2; }

/* Eyebrow above the H2 */
.promise-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.promise-eyebrow::before,
.promise-eyebrow::after {
  content: "";
  flex: 0 0 56px;
  height: 1px;
  background: rgba(220, 38, 38, 0.4);
}

.promise-h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0 0 26px;
  color: #14140f;
  text-wrap: balance;
}
.promise-h2 .gold {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.promise-intro {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 500;
  line-height: 1.4;
  color: #14140f;
  margin: 0 0 24px;
}

.promise-body {
  max-width: 560px;
  margin: 0 auto 18px;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(20, 20, 15, 0.82);
}
.promise-body strong { color: #14140f; font-weight: 600; }
.promise-body strong.promise-underline {
  color: var(--gold-soft);
  text-decoration: underline;
  text-decoration-color: rgba(220, 38, 38, 0.6);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.promise-body:last-of-type { margin-bottom: 26px; }

.promise-closer {
  margin: 30px auto 0;
  padding-top: 26px;
  max-width: 540px;
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--accent-soft);
  position: relative;
}
.promise-closer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.5), transparent);
}

@media (max-width: 720px) {
  .promise-band { padding: 64px 0 70px; }
  .promise-card { padding: 56px 24px 40px; }
}

/* ============ POPPY: VERIFIED STAMP (Proof) ============ */
.verified-stamp {
  position: absolute;
  top: -10px;
  right: -8px;
  width: 130px; height: 130px;
  pointer-events: none;
  z-index: 3;
  transform: rotate(-8deg);
}
@media (max-width: 920px) {
  .verified-stamp { width: 96px; height: 96px; top: -28px; right: 0; }
}
@media (max-width: 640px) {
  .verified-stamp { display: none; }
}
.verified-stamp .stamp-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: stampRotate 22s linear infinite;
}
@keyframes stampRotate { to { transform: rotate(360deg); } }
.verified-stamp .stamp-text {
  fill: var(--gold-soft);
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
}
.verified-stamp .stamp-core {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--gold) 0%, var(--gold-deep) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  color: var(--ink);
  box-shadow:
    0 0 0 2px rgba(220, 38, 38, 0.3),
    0 12px 28px -10px rgba(0,0,0,0.55),
    0 0 24px -6px rgba(220, 38, 38, 0.4);
}
.verified-stamp .stamp-core svg { width: 18px; height: 18px; }
.verified-stamp .stamp-core span {
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ============ POPPY: PICK-THIS NOTE (Two Choices) ============ */
.choice-bright { overflow: visible !important; }
.pick-note {
  position: absolute;
  top: -42px;
  right: 28px;
  z-index: 5;
  pointer-events: none;
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  color: var(--gold);
  transform: rotate(6deg);
  animation: pickWiggle 3.6s ease-in-out infinite;
}
@keyframes pickWiggle {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-4px); }
}
.pick-note-text {
  font-family: "Caveat", "Poppins", sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  line-height: 0.95;
  color: var(--gold-soft);
  text-shadow: 0 2px 10px rgba(220, 38, 38, 0.4);
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding-bottom: 12px;
}
.pick-note-arrow {
  width: 52px; height: 52px;
  color: var(--gold-soft);
  filter: drop-shadow(0 2px 6px rgba(220, 38, 38, 0.4));
}
@media (max-width: 540px) {
  .pick-note { top: -36px; right: 18px; }
  .pick-note-text { font-size: 20px; padding-bottom: 8px; }
  .pick-note-arrow { width: 40px; height: 40px; }
}

/* ============ POPPY: MOST-ASKED PILL (FAQ) ============ */
.faq-q-text {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.most-asked {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 11px 3px 9px;
  background: linear-gradient(180deg, #EF6B6B 0%, #DC2626 30%, #DC2626 70%, #B91C1C 100%);
  border: 1px solid rgba(176, 136, 74, 0.7);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2A1F0F;
  -webkit-text-fill-color: #2A1F0F;
  font-weight: 700;
  position: relative;
  box-shadow:
    0 3px 8px -2px rgba(176, 136, 74, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.most-asked::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: #2A1F0F;
  animation: livePulse 1.6s ease-in-out infinite;
}
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 920px) {
  .proof-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .proof-grid { grid-template-columns: 1fr; }
}
/* Centre a lone last card (e.g. the 7th client result) so it doesn't sit
   orphaned on the left of an otherwise empty row. */
@media (min-width: 921px) {
  .results-grid > .case-card:last-child:nth-child(3n + 1) { grid-column: 2 / 3; }
}
@media (min-width: 641px) and (max-width: 920px) {
  .results-grid > .case-card:last-child:nth-child(2n + 1) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 9px);
  }
}
.case-card {
  position: relative;
  overflow: hidden;
  background: rgba(20, 20, 15, 0.04);
  border: 1px solid rgba(20, 30, 10, 0.18);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, box-shadow .28s ease;
}
.case-card:hover {
  transform: translateY(-3px);
  border-color: rgba(220, 38, 38, 0.4);
  box-shadow: 0 22px 44px -22px rgba(0,0,0,0.55);
}

/* Single video preview — light placeholder, dark tag (inverted) */
.case-video {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 10px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 30%, #FEF2F2 0%, #fafafa 60%, #ffffff 100%);
  border: 1px solid rgba(220, 38, 38, 0.18);
  cursor: pointer;
  isolation: isolate;
}
.case-video::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(220, 38, 38, 0.10), transparent 55%),
    repeating-linear-gradient(135deg, rgba(240, 242, 246, 0.05) 0 10px, transparent 10px 20px);
  z-index: 1;
}
.case-video::after {
  /* runtime in bottom-right */
  content: attr(data-runtime);
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 3;
  padding: 3px 8px;
  background: rgba(240, 242, 246, 0.85);
  border-radius: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #14140f;
}
.case-video .cv-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%,
    var(--accent-deep) 0%,
    var(--accent-darker) 60%,
    var(--night) 100%);
  color: var(--gold);
  display: grid; place-items: center;
  box-shadow:
    0 12px 26px -8px rgba(240, 242, 246, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 0 5px rgba(220, 38, 38, 0.32),
    0 0 0 11px rgba(220, 38, 38, 0.14);
  transition: transform .22s ease;
}
.case-video:hover .cv-play { transform: translate(-50%, -50%) scale(1.08); }
.case-video .cv-play::after {
  content: "";
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(220, 38, 38, 0.85);
  animation: playRipple 2.4s cubic-bezier(.2,.7,.2,1) infinite;
  pointer-events: none;
}
.case-video .cv-play .tri {
  width: 0; height: 0;
  border-left: 14px solid var(--gold);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.case-video .cv-tag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  padding: 4px 9px;
  background: var(--accent);
  color: #14140f;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 4px 10px -4px rgba(240, 242, 246, 0.5);
  /* Constrain so long tags can't overflow into the image */
  max-width: calc(100% - 20px);
  white-space: normal;
  line-height: 1.4;
  word-spacing: 0.04em;
}
.case-video .case-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* ============ CASE STUDY VIDEO MODAL ============ */
.case-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.case-modal.open { display: flex; }
.case-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 16, 6, 0.86);
  backdrop-filter: blur(4px);
}
.case-modal-inner {
  position: relative; z-index: 1;
  width: min(880px, 100%);
  max-height: 90vh;
}
.case-modal-video {
  width: 100%; max-height: 90vh;
  display: block;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
}
.case-modal-close {
  position: absolute; top: -14px; right: -14px;
  width: 40px; height: 40px;
  border-radius: 50%; border: none;
  background: #14140f; color: #ffffff;
  font-size: 26px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.5);
}
@media (max-width: 560px) {
  .case-modal-close { top: -46px; right: 0; }
}

/* Proof on light bg — premium elevated cards */
.sec-band-paper .case-card {
  background:
    radial-gradient(ellipse 84% 60% at 50% 0%, rgba(220, 38, 38, 0.16), transparent 64%),
    linear-gradient(180deg, var(--night-2) 0%, var(--night) 78%);
  border: 1px solid var(--night-line);
  box-shadow:
    inset 0 1px 0 rgba(220, 38, 38, 0.08),
    0 26px 56px -34px rgba(240, 242, 246, 0.5);
}
/* gold gradient hairline accent across the top edge */
.sec-band-paper .case-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, transparent 8%, rgba(220, 38, 38, 0.70) 50%, transparent 92%);
  z-index: 5;
  pointer-events: none;
}
.sec-band-paper .case-card:hover {
  transform: translateY(-5px);
  border-color: rgba(220, 38, 38, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(220, 38, 38, 0.1),
    0 36px 72px -32px rgba(240, 242, 246, 0.6);
}
.sec-band-paper .case-name { color: #14140f; }
.sec-band-paper .case-meta { color: var(--accent-soft); }
.sec-band-paper .case-quote { color: rgba(20, 20, 15, 0.82); }
.sec-band-paper .verified-stamp .stamp-text { fill: var(--gold-deep); }

/* Tighter spacing for On the Call */
[data-screen-label="04 On the Call"] { padding: 56px 0; }
[data-screen-label="04 On the Call"] .sec-head { margin-bottom: 28px; gap: 14px; }
[data-screen-label="04 On the Call"] .agenda-box { margin-top: 18px; }
[data-screen-label="04 On the Call"] .agenda-row { padding: 20px 28px; }
@media (max-width: 720px) {
  [data-screen-label="04 On the Call"] { padding: 44px 0; }
  [data-screen-label="04 On the Call"] .agenda-row { padding: 18px 18px; }
}

.case-body { padding: 0 4px 4px; }
.case-name {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 4px;
}
.case-meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
.case-stars {
  margin-top: 6px;
  color: var(--gold-soft);
  letter-spacing: 0.2em;
  font-size: 12.5px;
}
.case-quote {
  margin: 10px 0 0;
  font-size: 14px;
  color: rgba(20, 20, 15, 0.78);
  line-height: 1.55;
}

/* Closing coda after the case studies — the weighing-scale reminder.
   Secondary to the proof grid: it should pop (a dark forest plaque on the
   bright band) but stay COMPACT with modest type, so the six testimonial
   cards keep the eye first and this reads second. */
.scale-coda {
  position: relative;
  margin: 56px auto 0;
  max-width: 660px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 34px 40px 32px;
  background:
    radial-gradient(ellipse 64% 54% at 50% 0%, rgba(220, 38, 38, 0.14), transparent 64%),
    linear-gradient(180deg, var(--night-2) 0%, var(--night) 74%);
  border: 1px solid var(--night-line);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(220, 38, 38, 0.07),
    0 24px 54px -38px rgba(240, 242, 246, 0.55);
  overflow: hidden;
}
/* Subtle film grain — matched to .sec-band-night, kept faint here */
.scale-coda::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.95  0 0 0 0 0.90  0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 320px 320px;
  opacity: 0.32;
  mix-blend-mode: overlay;
}
/* Gold hairline across the top edge */
.scale-coda::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent 12%, var(--gold) 50%, transparent 88%);
  opacity: 0.6;
  pointer-events: none;
}
.scale-coda > * { position: relative; z-index: 1; }

/* "Gentle Reminder" — small gold mono eyebrow flanked by hairlines */
.scale-coda .scale-coda-kicker {
  margin: 0 0 1px;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.scale-coda .scale-coda-kicker::before,
.scale-coda .scale-coda-kicker::after {
  content: "";
  width: 24px; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
  opacity: 0.55;
}
.scale-coda .scale-coda-kicker::after { transform: scaleX(-1); }

/* The statement — modest serif; noticeable, but below the cards */
.scale-coda .scale-coda-lead {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.34;
  letter-spacing: -0.012em;
  color: #14140f;
}
.scale-coda .scale-coda-lead em {
  font-style: italic;
  color: var(--accent-soft);
}

/* "That is it." — a small beat */
.scale-coda .scale-coda-pause {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--accent-soft);
  line-height: 1.3;
}

/* The turn — what it cannot measure; virtues in a quiet gold italic */
.scale-coda .scale-coda-punch {
  margin: 0;
  max-width: 32ch;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgba(20, 20, 15, 0.82);
}
.scale-coda .scale-coda-punch em {
  font-style: italic;
  color: var(--gold);
}
@media (max-width: 640px) {
  .scale-coda { margin-top: 40px; gap: 10px; padding: 28px 24px 26px; max-width: 100%; }
  .scale-coda .scale-coda-lead { font-size: 18px; }
  .scale-coda .scale-coda-punch { font-size: 16px; }
  .scale-coda .scale-coda-pause { font-size: 14px; }
  .scale-coda .scale-coda-kicker::before,
  .scale-coda .scale-coda-kicker::after { width: 16px; }
}

/* ============ METHOD — tight 4-col ============ */
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 920px) {
  .method-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .method-grid { grid-template-columns: 1fr; }
}
.pillar-card {
  position: relative;
  padding: 24px 22px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 16px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.pillar-card:hover {
  transform: translateY(-3px);
  background: var(--accent-bg);
  border-color: rgba(20, 20, 15, 0.45);
}
.pillar-card:hover .pillar-ico { background: var(--accent); color: #fff; transform: rotate(-6deg) scale(1.05); }
.pillar-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--ink-mute);
}
.pillar-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-bg);
  color: var(--accent-deep);
  display: grid; place-items: center;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.pillar-ico svg { width: 22px; height: 22px; }
.pillar-title {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.pillar-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ============ TWO CHOICES (compact) ============ */
/* ============ TWO CHOICES — asymmetric fork-in-the-road ============
   Choice 01 shrinks to a quiet horizontal aside (the path you're
   already on, low contrast, almost a footnote). A serif italic OR
   divider with gold flourishes separates them. Choice 02 dominates
   as the cinematic destination card. */
.choices {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
}

/* Choice 01 — small, demoted */
.choice-dim {
  background: transparent;
  border: none;
  border-top: 1px solid rgba(20, 20, 15, 0.14);
  border-bottom: 1px solid rgba(20, 20, 15, 0.14);
  color: var(--ink-mute);
  padding: 24px 8px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  align-items: center;
  opacity: 0.85;
  border-radius: 0;
}
.choice-dim .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(20, 20, 15, 0.22);
  background: rgba(20, 20, 15, 0.04);
  color: rgba(20, 20, 15, 0.55);
  flex-shrink: 0;
}
.choice-dim .desc {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(20, 20, 15, 0.55);
  max-width: 580px;
}
@media (max-width: 640px) {
  .choice-dim { grid-template-columns: 1fr; gap: 10px; padding: 20px 4px; }
}

/* The OR divider — italic gold serif between hairline rules */
.choices-or {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 28px auto;
  max-width: 320px;
  pointer-events: none;
}
.choices-or::before,
.choices-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176, 136, 74, 0.75), transparent);
}
.choices-or .or-word {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-size: 22px;
  color: #B91C1C;
  letter-spacing: 0.02em;
  line-height: 1;
}
.choices-or .or-orn {
  display: none; /* reserved for an ornament glyph if needed later */
}

/* Choice 02 — the dramatic destination card */
.choice-bright {
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(220, 38, 38, 0.18), transparent 60%),
    linear-gradient(165deg, #FEF2F2 0%, #ffffff 60%, #ffffff 100%);
  color: #14140f;
  padding: 60px 56px 48px;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 28px;
  align-items: start;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(176, 136, 74, 0.55),
    0 0 0 8px rgba(240, 242, 246, 0.04),
    0 0 0 9px rgba(176, 136, 74, 0.22),
    0 60px 100px -40px rgba(240, 242, 246, 0.7),
    0 30px 60px -30px rgba(240, 242, 246, 0.45);
}
/* Inner gold hairline */
.choice-bright::before {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 14px; right: 14px; bottom: 14px; left: 14px;
  border: 1px solid rgba(176, 136, 74, 0.42);
  z-index: 0;
}
/* Subtle film grain over the navy */
.choice-bright::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.80  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 240px 240px;
  opacity: 0.45;
  mix-blend-mode: overlay;
}
.choice-bright > * { position: relative; z-index: 2; }
.choice-bright-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Left column — the chapter number */
.choice-bright .num {
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(52px, 5.5vw, 72px);
  line-height: 1.1;
  letter-spacing: 0;
  background: linear-gradient(180deg, #EF6B6B 0%, #DC2626 30%, #DC2626 70%, #B91C1C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0;
  padding: 8px 14px 0 4px;
  text-align: center;
  position: relative;
}
.choice-bright .num::after {
  content: "";
  display: block;
  width: 56%;
  height: 1px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, transparent, rgba(176, 136, 74, 0.7), transparent);
}

/* Right column — content */
.choice-bright .pill {
  display: inline-flex; align-items: center; gap: 10px;
  width: fit-content;
  padding: 6px 14px;
  background: rgba(20, 20, 15, 0.08);
  border: 1px solid rgba(176, 136, 74, 0.55);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #DC2626;
  margin-bottom: 16px;
}
.choice-bright .pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #DC2626; box-shadow: 0 0 10px #DC2626;
}
.choice-bright .title {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 14px;
  color: #14140f;
  max-width: 560px;
}
.choice-bright .desc {
  margin: 0 0 26px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(20, 20, 15, 0.82);
  max-width: 540px;
}
.choice-bright .cta-inline {
  margin-top: 4px;
  align-self: flex-start;
}

@media (max-width: 720px) {
  .choice-bright {
    padding: 44px 24px 32px;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .choice-bright::before { top: 10px; right: 10px; bottom: 10px; left: 10px; }
  .choice-bright .num { text-align: left; font-size: 84px; }
  .choice-bright .num::after { margin: 10px 0 4px; width: 50%; }
}

/* ============ FAQ ============ */
/* ============ FAQ — editorial chapter list ============
   Each Q gets an italic gold serif Q.0X numeral as a chapter anchor.
   Open item lifts on a thin gold left-edge stripe with cream paper
   tint — like a page turning open. Refined SVG chevron replaces the
   CSS-border arrow. */
.faq {
  display: flex; flex-direction: column;
  max-width: 820px;
  margin: 0 auto;
  gap: 0;
}
.faq-item {
  border-bottom: 1px solid rgba(20, 20, 15, 0.12);
  position: relative;
  transition: background .3s ease, padding .3s ease;
}
.faq-item:first-child { border-top: 1px solid rgba(20, 20, 15, 0.12); }
.faq-item[open] {
  background: linear-gradient(180deg, rgba(255, 250, 234, 0.55), rgba(255, 250, 234, 0));
  padding-left: 18px;
}
.faq-item::before {
  /* Left-edge gold indicator stripe — invisible until item is open */
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 2px;
  background: linear-gradient(180deg, #DC2626, #DC2626);
  opacity: 0;
  transform: scaleY(0.6);
  transform-origin: center;
  transition: opacity .35s ease, transform .35s ease;
}
.faq-item[open]::before {
  opacity: 1;
  transform: scaleY(1);
}
.faq-q {
  display: grid;
  grid-template-columns: 48px 1fr 30px;
  align-items: center;
  gap: 18px;
  padding: 24px 0;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: clamp(18px, 1.7vw, 22px);
  letter-spacing: -0.01em;
  color: var(--ink);
  list-style: none;
  line-height: 1.3;
}
.faq-q::-webkit-details-marker { display: none; }
/* Q.0X chapter anchor — italic gold serif */
.faq-q::before {
  content: counter(faq-counter, decimal-leading-zero);
  counter-increment: faq-counter;
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #EF6B6B 0%, #DC2626 30%, #DC2626 70%, #B91C1C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-align: left;
}
.faq { counter-reset: faq-counter; }

/* Refined SVG chevron */
.faq-q .icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(20, 20, 15, 0.18);
  background: rgba(255, 255, 255, 0.4);
  position: relative;
  flex-shrink: 0;
  transition: background .25s ease, border-color .25s ease, transform .35s cubic-bezier(.65,.05,.36,1);
}
.faq-q .icon::before {
  /* Replace the rotated-border arrow with an inline SVG chevron */
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2314140f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 6.5 8 9.5 11 6.5'/></svg>") center / 14px no-repeat;
  transition: transform .35s cubic-bezier(.65,.05,.36,1);
}
.faq-item[open] .faq-q .icon {
  background: linear-gradient(180deg, #DC2626 0%, #DC2626 100%);
  border-color: rgba(176, 136, 74, 0.6);
}
.faq-item[open] .faq-q .icon::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232A1F0F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 6.5 8 9.5 11 6.5'/></svg>");
  transform: rotate(180deg);
}
.faq-a {
  padding: 0 60px 26px 66px;
  color: rgba(20, 20, 15, 0.72);
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  display: flex; flex-direction: column; gap: 12px;
}
.faq-a p { margin: 0; }
@media (max-width: 640px) {
  .faq-q { grid-template-columns: 38px 1fr 26px; gap: 12px; padding: 20px 0; }
  .faq-q::before { font-size: 20px; }
  .faq-a { padding: 0 30px 22px 50px; font-size: 15px; }
  .faq-item[open] { padding-left: 12px; }
}

/* Closing CTA block at the bottom of the FAQ section */
.faq-closing {
  margin-top: 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* Closing lines formatted exactly like the funnel's .callout-punch card:
   white paper, green left-border accent, soft shadow, left-aligned. */
.faq-closing .faq-closing-plaque {
  margin: 0 auto 8px;
  max-width: 640px;
  width: 100%;
  padding: 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0;
  box-shadow: 0 14px 30px -20px rgba(20, 20, 15, 0.18);
}
.faq-closing .faq-closing-lead {
  font-family: "Poppins", sans-serif;
  font-size: clamp(18px, 1.7vw, 23px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.008em;
}
.faq-closing .faq-closing-sub {
  font-family: "Poppins", sans-serif;
  font-size: clamp(16px, 1.5vw, 19px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--accent-deep);
  margin: 0;
}
.faq-closing .cta-big { margin-top: 4px; }
.faq-closing .faq-closing-guarantee {
  margin: 14px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.faq-closing .faq-closing-guarantee .seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
@media (max-width: 640px) {
  .faq-closing { margin-top: 40px; }
  .faq-closing .faq-closing-plaque { padding: 18px 20px; max-width: 100%; }
  .faq-closing .faq-closing-lead { font-size: 20px; }
}

/* ============ FINAL CTA BLOCK ============ */
.final-cta-block {
  position: relative;
  padding: 30px 0 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(220, 38, 38, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(220, 38, 38, 0.1), transparent 60%),
    var(--night);
  text-align: center;
  overflow: hidden;
  border-top: 1px solid rgba(220, 38, 38, 0.28);
}
.final-cta-block::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(20, 20, 15, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 20, 15, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.final-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 22px;
  max-width: 880px;
  margin: 0 auto;
}
/* Editorial eyebrow — italic serif between two thin gold rules.
   No pill, no live-dot — feels like a chapter epigraph. */
.final-eyebrow {
  display: flex; align-items: center; justify-content: center;
  gap: 18px;
  width: fit-content;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 1.15vw, 16px);
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(20, 20, 15, 0.78);
}
.final-eyebrow::before,
.final-eyebrow::after {
  content: "";
  flex: 0 0 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176, 136, 74, 0.7) 50%, transparent);
  animation: none;
  border-radius: 0;
  width: auto;
  box-shadow: none;
}
.final-h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0;
  color: #14140f;
  text-wrap: balance;
  max-width: 820px;
  text-align: center;
}
.final-h2::after {
  content: "✦";
  display: block;
  margin: 22px auto 0;
  font-size: 14px;
  letter-spacing: 0.3em;
  text-align: center;
  background: linear-gradient(180deg, #DC2626 0%, #DC2626 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.final-h2 .ital {
  font-style: italic;
  background: linear-gradient(180deg, #EF6B6B 0%, #DC2626 30%, #DC2626 70%, #B91C1C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============ FOOT — colophon close ============
   Centered byline + gold ornament + links. Reads like the back-cover
   of a book, not a generic CSS footer. */
.foot-bottom {
  position: relative; z-index: 1;
  margin: 30px auto 0;
  padding: 24px 32px 22px;
  border-top: 1px solid rgba(20, 20, 15, 0.14);
  display: flex; justify-content: center; align-items: center;
  gap: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: 0.18em;
  color: rgba(20, 20, 15, 0.55);
  text-transform: uppercase;
  max-width: 1180px;
}
.foot-bottom::before,
.foot-bottom::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176, 136, 74, 0.35), transparent);
  max-width: 220px;
}
.foot-bottom > span:first-of-type {
  flex-shrink: 0;
}
.foot-bottom > span:last-of-type {
  flex-shrink: 0;
}
.foot-links a {
  color: inherit;
  text-decoration: none;
  transition: color .2s ease;
}
.foot-links a:hover { color: var(--gold); }
.foot-ornament {
  display: inline-block;
  font-size: 12px;
  background: linear-gradient(180deg, #DC2626, #DC2626);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: 0;
  line-height: 1;
}
@media (max-width: 720px) {
  .foot-bottom {
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 22px;
    margin-top: 56px;
  }
  .foot-bottom::before,
  .foot-bottom::after { display: none; }
  section { padding: 56px 0; }
}

/* ============ FOOT — legal disclaimer / fine print ============ */
.foot-disclaimer {
  max-width: 900px;
  margin: 26px auto 0;
  padding: 0 32px 4px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.7;
  color: rgba(20, 20, 15, 0.4);
}
.foot-disclaimer p { margin: 0; }
.foot-disclaimer .foot-copy {
  margin-top: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(20, 20, 15, 0.5);
}
@media (max-width: 720px) {
  .foot-disclaimer {
    margin-top: 22px;
    padding: 0 22px 4px;
    font-size: 11px;
    line-height: 1.65;
  }
}

/* ============================================================
   METALLIC GOLD SHINE
   One unified gradient applied to every gold text element on the
   site. Sits at the end of the file so it overrides any earlier
   flat `color: var(--gold-*)` declarations. Uses background-clip:
   text so the gradient is painted INSIDE the glyph shape —
   bright-mid-dark-mid-bright stops simulate light catching metal.
   ============================================================ */
.urgency-strip .live,
.urgency-strip .countdown,
.hero-trust .stars,
.vsl-bottom-bar .caption,
.cta-price,
.cta-price .now,
.hero-stats .num .suffix,
.sticky-cta .sticky-tag,
.sticky-cta .sticky-price .now,
.agenda-num .acc,
.cred-pill,
.pick-note,
.pick-note-text,
.pick-note-amount,
.case-stars,
.choice-bright .pill,
.gold-shine {
  background-image: linear-gradient(
    180deg,
    #EF6B6B 0%,
    #DC2626 22%,
    #DC2626 50%,
    #DC2626 78%,
    #EF6B6B 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* For label-pill elements that ALSO carry a tinted background,
   restore the pill background-color so the metallic text-gradient
   doesn't replace it. background-image is what's clipped to text;
   background-color stays as the pill fill. */
.urgency-strip .live,
.urgency-strip .countdown,
.cred-pill,
.sticky-cta .sticky-tag,
.choice-bright .pill {
  background-color: transparent;
}
.cred-pill       { background-color: rgba(220, 38, 38, 0.10); border-color: rgba(220, 38, 38, 0.38); }
.sticky-cta .sticky-tag { background-color: rgba(220, 38, 38, 0.12); border-color: rgba(220, 38, 38, 0.42); }
.choice-bright .pill    { background-color: rgba(20, 20, 15, 0.08); border-color: rgba(176, 136, 74, 0.55); }

/* The pick-note doodle (handwritten ₹ on Choice B) lives over the
   bright card — a faint cream drop-shadow keeps it legible without
   muddying the shine. */
.pick-note,
.pick-note-text {
  filter: drop-shadow(0 2px 8px rgba(220, 38, 38, 0.45));
}

/* Children of shine targets that should NOT inherit the metallic
   fill (transparency would otherwise hide them). */
.cta-price .strike,
.sticky-cta .sticky-price .strike {
  -webkit-text-fill-color: rgba(20, 20, 15, 0.75);
          color: rgba(20, 20, 15, 0.75);
  background-image: none;
}

/* ============================================================
   MOBILE OPTIMIZATIONS — focused pass
   Tightens spacing, scales typography, and adjusts the new
   editorial components (mentor spread, promise certificate,
   choices fork, FAQ chapters, final CTA closer, footer
   colophon) for small screens.
   ============================================================ */

/* === ALL SCREENS: prevent horizontal scroll from any decorative overflow === */
html, body { overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* === Tablet & below (≤900px) === */
@media (max-width: 900px) {
  /* Mentor section — already stacks via existing 900px rule. Refine. */
  .sec-band-night { padding: 72px 0 80px; }
  .mentor-stack { gap: 24px; }
  .mentor-hero-photo-frame { max-width: 380px; }
  .mentor-content-col { gap: 28px; align-items: center; }
  .mentor-content-col .mentor-points,
  .mentor-content-col .mentor-stats { width: 100%; }
  .mentor-name-big { font-size: clamp(26px, 5vw, 36px); }

  /* Promise card */
  .promise-card { padding: 60px 36px 48px; max-width: 100%; }
  .promise-shield { width: 64px; height: 64px; margin-bottom: 16px; }
  .promise-shield svg { width: 26px; height: 26px; }
  .promise-h2 { font-size: clamp(24px, 4.5vw, 36px); }
  .promise-eyebrow { font-size: 9.5px; gap: 12px; }
  .promise-eyebrow::before,
  .promise-eyebrow::after { flex: 0 0 36px; }

  /* Choice-bright already stacks at 720px. Bridge the gap here too. */
  .choice-bright { padding: 48px 32px 36px; }
}

/* === Mobile (≤720px) === */
@media (max-width: 720px) {
  /* Hero — reclaim dead space at the top (above logo / below marquee) and a
     smaller logo, then spread the text blocks so it reads less paragraph-heavy. */
  .hero-funnel { padding-top: 10px; }
  .nav-top { padding: 6px 20px 0; }
  .brand .brand-logo { width: 78px; height: 78px; }
  /* Generous gaps so the logo → eyebrow → heading → sub → video breathe and
     don't read as one crowded text block. The in-hero button can fall below the
     fold; the sticky bar carries the first-screen CTA. */
  .hero-funnel-inner { gap: 32px; padding-top: 26px; }
  .eyebrow-pill { font-size: 9.5px; letter-spacing: 0.14em; padding: 9px 14px; line-height: 1.8; }
  .hero-h1 { font-size: clamp(22px, 6vw, 30px) !important; }
  .hero-h1 .hero-h1-line { white-space: normal; line-height: 1.22; }
  .hero-sub { font-size: 14.5px; padding: 0 8px; line-height: 1.7; }
  /* Keep the CTA cluster + stats a touch tighter than the text gaps. */
  .hero-cta-block { margin-top: -8px; gap: 14px; }
  .hero-stats { margin-top: -8px; }
  .cta-meta-row { gap: 12px; }
  .guarantee-chip { font-size: 9.5px; padding: 7px 14px 7px 7px; gap: 8px; letter-spacing: 0.12em; }
  .guarantee-chip .seal { width: 20px; height: 20px; }
  .guarantee-chip .seal::before { width: 12px; height: 12px; }

  /* Hero stats: 4-col → 2-col */
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats .col { padding: 16px 12px; border-right: none; border-bottom: 1px solid rgba(20, 30, 10, 0.12); }
  .hero-stats .col:nth-child(2n) { border-right: none; }
  .hero-stats .col:nth-child(3),
  .hero-stats .col:nth-child(4) { border-bottom: none; }
  .hero-stats .col:nth-child(odd) { border-right: 1px solid rgba(20, 30, 10, 0.12); }
  .hero-stats .num { font-size: clamp(24px, 7vw, 32px); }

  /* Section heads */
  .sec-h2 { font-size: clamp(27px, 6.4vw, 40px) !important; }
  .sec-head { gap: 12px; margin-bottom: 28px; }

  /* Mentor — drop cap shrinks, story box tightens */
  .mentor-hero-photo-frame { max-width: 320px; padding: 10px 10px 54px; }
  .mentor-hero-photo-frame::before { inset: 6px 6px 50px 6px; }
  .mentor-hero-caption { font-size: 12px; bottom: 14px; }
  .mentor-stats { padding: 18px 0; }
  .mentor-stats .stat-num { font-size: clamp(24px, 7vw, 32px); }
  .mentor-stats .stat-lbl { font-size: 8.5px; letter-spacing: 0.14em; }
  .mentor-story-box { padding: 44px 22px 32px; }
  .mentor-story-box .story-eyebrow { font-size: 9px; gap: 10px; margin-bottom: 22px; }
  .mentor-story-box .story-eyebrow::before,
  .mentor-story-box .story-eyebrow::after { flex: 0 0 28px; }
  .mentor-story-box p { font-size: 15.5px; line-height: 1.6; }
  .mentor-story-box p.lead { font-size: 16.5px; }
  .mentor-story-box p.lead::first-letter { font-size: 54px; padding: 4px 8px 0 0; }
  .story-pullquote { margin: 24px auto; }
  .story-pullquote q, .story-pullquote blockquote { font-size: 18px; }
  .mentor-story-box p.outro { font-size: 16.5px; padding-top: 20px; margin-top: 24px; }

  /* Marquee H2 */
  .marquee-h2 { font-size: clamp(22px, 6vw, 32px); margin-bottom: 28px; }
  .marquee-edges::before,
  .marquee-edges::after { width: 80px; }

  /* Agenda */
  .agenda-num { font-size: 38px; }
  .agenda-row { padding: 20px 18px !important; }

  /* Compare */
  .compare-col { padding: 26px 22px; }
  .compare-head .title { font-size: 22px; }

  /* Two choices — already stacks. Refine. */
  .choices { gap: 0; }
  .choice-dim { padding: 18px 4px; }
  .choices-or { margin: 18px auto; }
  .choices-or .or-word { font-size: 18px; }
  .choice-bright { padding: 36px 22px 28px; }
  .choice-bright::before { top: 8px; right: 8px; bottom: 8px; left: 8px; }
  .choice-bright .num { font-size: 64px; text-align: left; padding: 4px 0 0; }
  .choice-bright .num::after { margin: 8px 0 4px; width: 44%; }
  .choice-bright .pill { font-size: 9.5px; letter-spacing: 0.18em; }
  .choice-bright .title { font-size: clamp(20px, 5.5vw, 26px); }
  .choice-bright .desc { font-size: 15px; }

  /* Final CTA */
  .final-cta-block { padding: 64px 0 0; }
  .final-eyebrow { font-size: 13px; gap: 12px; padding: 0 12px; }
  .final-eyebrow::before,
  .final-eyebrow::after { flex: 0 0 32px; }
  .final-h2 { font-size: clamp(26px, 6vw, 38px); padding: 0 12px; }
  .final-h2::after { font-size: 12px; margin-top: 16px; }

  /* Footer colophon */
  .foot-bottom { font-size: 9.5px; letter-spacing: 0.14em; padding: 22px 18px 20px; }
  .foot-ornament { order: 0; font-size: 11px; }
}

/* === Small mobile (≤460px) === */
@media (max-width: 460px) {
  section { padding-left: 16px; padding-right: 16px; }
  .wrap, .wrap.narrow { padding-left: 0; padding-right: 0; }

  /* Hero — class padding zeroes the sides, and .wrap is zeroed here too,
     so restore a side gutter for the eyebrow, title and thumbnail. */
  .hero-funnel { padding-left: 18px; padding-right: 18px; }

  /* On the Call — its [data-screen-label] padding zeroes the sides, so the
     agenda card touched the edges. Restore a left/right gutter. */
  [data-screen-label="04 On the Call"] { padding-left: 16px; padding-right: 16px; }

  /* Mentor (My Story) and Promise bands also zero their sides via class,
     so their cards touched the edges — restore a side gutter. */
  .sec-band-night { padding-left: 16px; padding-right: 16px; }
  .promise-band { padding-left: 16px; padding-right: 16px; }
  .hero-h1 { font-size: clamp(19px, 5.5vw, 26px) !important; }
  .hero-sub { font-size: 13.5px; }
  .cta-big { font-size: 14px; padding: 14px 18px; }
  .guarantee-chip { font-size: 9px; }

  /* Mentor story */
  .mentor-story-box { padding: 36px 18px 28px; }
  .mentor-story-box p { font-size: 15px; }
  .mentor-story-box p.lead::first-letter { font-size: 46px; }
  .story-pullquote q, .story-pullquote blockquote { font-size: 16.5px; }

  /* Promise */
  .promise-card { padding: 52px 22px 38px; }
  .promise-h2 { font-size: clamp(22px, 5.5vw, 30px); }
  .promise-body { font-size: 15.5px; }
  .promise-closer { font-size: 17px; }

  /* Choice */
  .choice-bright .num { font-size: 56px; }

  /* FAQ */
  .faq-q { font-size: 16px; padding: 18px 0; }
  .faq-q::before { font-size: 18px; }
  .faq-a { padding: 0 22px 18px 44px; font-size: 14.5px; }
  .faq-item[open] { padding-left: 10px; }
}

/* === Tap targets — make sure interactive elements meet 44×44 === */
@media (hover: none) and (pointer: coarse) {
  .faq-q { min-height: 56px; }
  .cta-big { min-height: 52px; }
  .sticky-cta .sticky-arrow { min-height: 44px; }
}

/* ============================================================
   LEAD CAPTURE POPUP (free funnel)
   Opened by any [data-lead] CTA. Dark forest card on a dim backdrop.
   ============================================================ */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.lead-modal.open { opacity: 1; visibility: visible; }
.lead-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 14, 4, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lead-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 34px 30px 28px;
  border-radius: 16px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(220, 38, 38, 0.14), transparent 60%),
    linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
  border: 1px solid rgba(220, 38, 38, 0.35);
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.18),
    0 40px 90px -30px rgba(0, 0, 0, 0.8);
  transform: translateY(12px) scale(0.98);
  transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1);
}
.lead-modal.open .lead-modal-card { transform: translateY(0) scale(1); }
.lead-modal-close {
  position: absolute;
  top: 12px; right: 14px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: none; border: none;
  color: rgba(20, 20, 15, 0.55);
  font-size: 26px; line-height: 1;
  cursor: pointer;
  transition: color .2s ease;
}
.lead-modal-close:hover { color: var(--gold); }

.lead-modal-head { text-align: center; margin-bottom: 22px; }
.lead-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 11px;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.45);
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 14px;
}
.lead-eyebrow .dot { font-size: 9px; color: var(--gold); }
.lead-title {
  margin: 0 0 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 5vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #14140f;
}
.lead-title .gold {
  font-style: italic;
  background: linear-gradient(180deg, #EF6B6B 0%, #DC2626 30%, #DC2626 70%, #B91C1C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lead-sub {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 14.5px; line-height: 1.5;
  color: rgba(20, 20, 15, 0.72);
}

.lead-form { display: flex; flex-direction: column; gap: 0; }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lead-field { display: flex; flex-direction: column; gap: 7px; }
.lead-field-full { grid-column: 1 / -1; }
.lead-field label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(20, 20, 15, 0.8); font-weight: 600;
}
.lead-field label .req { color: var(--bad); }
.lead-field input,
.lead-field select,
.lead-phone-group select,
.lead-phone-group input {
  width: 100%;
  padding: 12px 13px;
  background: rgba(240, 242, 246, 0.6);
  border: 1px solid rgba(220, 38, 38, 0.28);
  border-radius: 8px;
  color: #14140f;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  transition: border-color .2s ease, background .2s ease;
}
.lead-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 36px;
  /* dark control + custom gold chevron (matches the dark input fields) */
  background-color: rgba(240, 242, 246, 0.6);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dc2626' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 14px;
}
/* Dark dropdown list (Windows/Chrome/Firefox honour these on <option>). */
.lead-field select option {
  background-color: #ffffff;
  color: #14140f;
}
.lead-field input::placeholder,
.lead-phone-group input::placeholder { color: rgba(20, 20, 15, 0.32); }
.lead-field input:focus,
.lead-field select:focus,
.lead-phone-group select:focus,
.lead-phone-group input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(240, 242, 246, 0.85);
}
.lead-phone-group { display: grid; grid-template-columns: 118px 1fr; gap: 10px; }
.lead-phone-group select { padding-right: 28px; background-position: right 9px center; }

.lead-error {
  margin-top: 14px;
  padding: 11px 14px;
  background: rgba(184, 92, 80, 0.12);
  border: 1px solid rgba(184, 92, 80, 0.55);
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px; color: #f3c8c0; text-align: center;
}

.lead-submit {
  margin-top: 20px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px;
  border: 1px solid rgba(8, 40, 110, 0.55);
  border-radius: 999px;
  background: linear-gradient(180deg, #EF6B6B 0%, #DC2626 30%, #DC2626 70%, #B91C1C 100%);
  color: #14140f;
  font-family: "Poppins", sans-serif;
  font-weight: 600; font-size: 17px;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(220, 38, 38, 0.6);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.lead-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(220, 38, 38, 0.7); }
.lead-submit:disabled { opacity: 0.7; cursor: not-allowed; }
.lead-submit .ar { font-size: 18px; }

.lead-fine {
  margin: 14px 0 0;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(20, 20, 15, 0.42);
}

@media (max-width: 480px) {
  .lead-modal-card { padding: 30px 20px 24px; }
  .lead-grid { grid-template-columns: 1fr; }
  .lead-fine { font-size: 8px; letter-spacing: 0.02em; white-space: nowrap; }
}

/* ============================================================
   TESTIMONIAL PHOTOS + SLIDER (client before/after + written screenshots)
   ============================================================ */
/* Uniform square images — same height + width across every card. */
.result-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: #ffffff;
}
.case-card .result-photo + .case-body { margin-top: 12px; }

/* Desktop/tablet: a centred flex-wrap grid (equal heights via align stretch).
   Mobile (≤640px): a horizontal scroll-snap slider (autoplay + manual swipe via
   JS; see TestiSlider.tsx). No dots/arrows. */
.testi-slider { width: 100%; }
.testi-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
}
.testi-track > .case-card { width: calc(33.333% - 12px); }
@media (min-width: 641px) and (max-width: 920px) {
  .testi-track > .case-card { width: calc(50% - 9px); }
}

@media (max-width: 640px) {
  .testi-track {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px;
    padding-bottom: 4px;
  }
  .testi-track::-webkit-scrollbar { display: none; }
  .testi-track { scrollbar-width: none; }
  .testi-track > .case-card {
    flex: 0 0 auto;
    width: 78vw;
    max-width: 330px;
    scroll-snap-align: center;
  }
}

/* Tappable image (opens the lightbox). */
.testi-zoom-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 10px;
  overflow: hidden;
}

/* Lightbox */
.testi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 14, 4, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.testi-lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  cursor: default;
}
.testi-lightbox-close {
  position: absolute;
  top: 16px; right: 20px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: none; border: none;
  color: #14140f; font-size: 34px; line-height: 1;
  cursor: pointer;
}

/* ============================================================
   REDESIGN ADDITIONS (Mawra)
   ============================================================ */

/* Text wordmark in the top nav (replaces the old bird logo). */
.brand-text {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--gold-soft);
  text-decoration: none;
}

/* Hero credentials — name + role + highlight pills, below the image. */
.hero-creds { text-align: center; margin-top: 6px; }
.hero-name {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(23px, 4vw, 31px);
  letter-spacing: -0.01em;
  color: #14140f;
}
.hero-role {
  margin: 5px 0 0;
  font-family: "Poppins", sans-serif;
  font-size: clamp(14.5px, 2.2vw, 17px);
  color: rgba(20, 20, 15, 0.82);
}
.hero-cred-pills {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 18px;
}
.hero-cred-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.42);
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #FEF2F2;
  white-space: nowrap;
}
.hero-cred-pill .cpd {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  flex-shrink: 0;
}

/* Story before/after — dark gold-tinted frame that matches the night band. */
.story-photo {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.16), rgba(220, 38, 38, 0.05));
  border: 1px solid rgba(220, 38, 38, 0.42);
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.16),
    0 40px 80px -34px rgba(0, 0, 0, 0.7);
}
.story-photo img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* Featured-by press logos (cream monochrome wordmarks). */
.press-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 22px 44px;
  margin: 28px auto 0;
  max-width: 880px;
}
/* Plain logos — no chip/frame/border. Uniform height, width auto, undistorted. */
.press-logo {
  height: 74px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}
@media (max-width: 720px) {
  .press-row { gap: 20px 34px; }
  .press-logo { height: 60px; max-width: 200px; }
}
/* Phones: keep all four logos on a single line. Sizes are viewport-relative so
   they scale down together on narrow screens and never wrap or overflow. */
@media (max-width: 600px) {
  .press-row { flex-wrap: nowrap; justify-content: center; gap: 3vw; margin-top: 22px; }
  .press-logo { height: 11vw; max-width: 28vw; }
}

/* Green highlight + bold emphasis in the qualification copy. */
.agenda-body .hl { color: #DC2626; font-weight: 700; }
.agenda-body strong { color: #14140f; font-weight: 700; }

/* ===== Framework timeline (dark band) ===== */
.timeline { position: relative; max-width: 680px; margin: 0 auto; }
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding-bottom: 30px;
}
.tl-item:last-child { padding-bottom: 0; }
/* Connector segment — dim by default, fills green as the timeline progresses. */
.tl-item::before {
  content: "";
  position: absolute;
  left: 25px; top: 54px; bottom: -2px;
  width: 2px;
  background: rgba(220, 38, 38, 0.14);
  transition: background .5s ease;
}
.tl-item:last-child::before { display: none; }
.tl-item.is-active::before {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.8), rgba(220, 38, 38, 0.3));
}
/* Node — dim/outlined by default, bright + glowing when active. */
.tl-node {
  position: relative;
  z-index: 1;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(220, 38, 38, 0.5);
  background: rgba(220, 38, 38, 0.08);
  border: 1.5px solid rgba(220, 38, 38, 0.3);
  box-shadow: none;
  transition: color .45s ease, background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.tl-item.is-active .tl-node {
  color: #ffffff;
  background: linear-gradient(180deg, #EF6B6B 0%, #DC2626 100%);
  border-color: transparent;
  box-shadow:
    0 0 0 6px rgba(220, 38, 38, 0.14),
    0 8px 22px -6px rgba(220, 38, 38, 0.55);
}
.tl-node svg { width: 26px; height: 26px; }
/* Content fades up as its node becomes active. */
.tl-content { padding-top: 3px; opacity: 0.5; transition: opacity .45s ease; }
.tl-item.is-active .tl-content { opacity: 1; }
.tl-title {
  margin: 0 0 5px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 2.4vw, 21px);
  color: #14140f;
  line-height: 1.2;
}
.tl-body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(20, 20, 15, 0.72);
}

/* ===== Numbered walk-away boxes (light band) ===== */
.numbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .numbox-grid { grid-template-columns: 1fr 1fr; }
  .numbox:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.numbox {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid rgba(20, 30, 10, 0.1);
  border-radius: 14px;
  box-shadow: 0 14px 30px -22px rgba(0, 0, 0, 0.4);
}
.numbox-num {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: "Poppins", sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 21px;
  color: #14140f;
  background: linear-gradient(180deg, #EF6B6B 0%, #DC2626 30%, #DC2626 70%, #B91C1C 100%);
  box-shadow: 0 4px 12px -5px rgba(220, 38, 38, 0.55);
}
.numbox-title {
  margin: 2px 0 5px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 16.5px;
  color: #14140f;
  line-height: 1.22;
}
.numbox-body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(20, 30, 10, 0.72);
}

/* ===== Section eyebrow label (line + uppercase mono) ===== */
.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 16px;
}
.sec-label::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: 0.85;
}
.sec-band-paper .sec-label,
.sec-band-paper-2 .sec-label { color: #DC2626; }


/* Result/video cards on the dark (night) band — mirror the light-band dark-card
   look so they keep contrast + light text now that Results sits on green. */
.sec-band-night .case-card {
  background:
    radial-gradient(ellipse 84% 60% at 50% 0%, rgba(220, 38, 38, 0.2), transparent 64%),
    linear-gradient(180deg, var(--night-2) 0%, var(--night) 80%);
  border: 1px solid rgba(220, 38, 38, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(220, 38, 38, 0.1),
    0 26px 56px -34px rgba(0, 0, 0, 0.55);
}
.sec-band-night .case-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, transparent 8%, rgba(220, 38, 38, 0.7) 50%, transparent 92%);
  z-index: 5; pointer-events: none;
}
.sec-band-night .case-name { color: #14140f; }
.sec-band-night .case-meta { color: var(--accent-soft); }
.sec-band-night .case-quote { color: rgba(20, 20, 15, 0.82); }

/* ===== Story split — ONE section, 2 columns: photo (left) + comparison (right) ===== */
.story-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 48px;
  max-width: 1080px;
  margin: 0 auto 56px;
}
.story-compare { width: 100%; min-width: 0; }
.story-compare .xform-label { margin-bottom: 16px; }
/* Tablet / mobile: stack the two columns (photo on top, table below). */
@media (max-width: 860px) {
  .story-split { grid-template-columns: 1fr; gap: 30px; }
  .story-compare { max-width: 560px; margin: 0 auto; }
}

/* ===== THEN / NOW comparison table (red = then, green = now) ===== */
.xform {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #c98b8b;
  box-shadow: 0 26px 54px -32px rgba(0, 0, 0, 0.45);
}
.xform-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.xform-h {
  padding: 15px 18px;
  text-align: center;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
}
.xform-h.then { background: #f8c9c9; color: #cf2a2a; border-right: 2px solid #c98b8b; }
.xform-h.now  { background: #cfe0f7; color: #DC2626; }
.xform-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-top: 2px solid #c98b8b;
}
.xform-then,
.xform-now {
  padding: 14px 18px;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(14px, 1.35vw, 16.5px);
  line-height: 1.32;
  font-weight: 600;
  text-align: left;
}
.xform-then {
  background: #fdeaea;
  color: #cf2a2a;
  border-right: 2px solid #c98b8b;
}
.xform-now {
  background: #FEF2F2;
  color: #DC2626;
  transition: background .25s ease;
}

/* Mobile: keep both columns side by side (it stays readable), just tighten. */
@media (max-width: 480px) {
  .xform-h { padding: 12px 12px; }
  .xform-then, .xform-now { padding: 12px 12px; }
}

/* Row hover — gentle lift cue on the "now" side. */
@media (hover: hover) {
  .xform-row:hover .xform-now { background: #e1ecfb; }
}

/* ============================================================
   THEME OVERRIDE — Blue / White re-skin (added)
   Sections alternate #ffffff / #FAFAFA, primary accent + buttons
   become #DC2626, formerly-dark sections flip to dark text.
   ============================================================ */
:root {
  --accent: #DC2626;
  --accent-deep: #B91C1C;
  --accent-darker: #991B1B;
  --accent-soft: #DC2626;     /* mid blue: readable accent on white */
  --gold: #DC2626;
  --gold-soft: #DC2626;
  --gold-deep: #DC2626;
}

/* --- Page + section backgrounds (alternating) --- */
body { background: #ffffff; color: var(--ink); }
.hero-funnel { background: #ffffff; }
.sec-band-paper   { background: #fafafa; color: var(--ink); }   /* 02 Story, 06 Call */
.sec-band-paper-2 { background: #fafafa; color: var(--ink); }   /* 04 Qualify */
.sec-band-night   { background: #ffffff; color: var(--ink); }   /* 03 Results, 05 Approach */
.final-cta-block  { background: #ffffff; color: var(--ink); }   /* 07 Footer */
/* kill the dark film-grain + spotlight overlays on the (now light) night bands */
.sec-band-night::before, .sec-band-night::after { display: none !important; }

/* night-band text was light-on-dark — force dark ink now that bg is white */
.sec-band-night, .sec-band-night p, .sec-band-night li { color: var(--ink); }
.sec-band-night .sec-h2 { color: var(--ink); }
.sec-band-night .sec-lede { color: var(--ink-soft); }
.final-cta-block, .final-cta-block p { color: var(--ink); }

/* --- Buttons → #DC2626 --- */
.cta-big {
  background: linear-gradient(180deg, #1a63d8 0%, #DC2626 100%);
  color: #fff;
  border: 1px solid rgba(220, 38, 38, 0.45);
  box-shadow:
    0 18px 36px -12px rgba(220, 38, 38, 0.5),
    0 0 0 1px rgba(220, 38, 38, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.cta-big .arrow { background: #fff; color: #DC2626; }
.cta-big::before { border-color: rgba(255, 255, 255, 0.28); }

/* --- Sticky bottom CTA bar → blue --- */
.sticky-cta {
  background: linear-gradient(180deg, #1a63d8 0%, #DC2626 100%);
  border-top: 1.5px solid rgba(255, 255, 255, 0.28);
}
.sticky-cta .sticky-label,
.sticky-cta .sticky-label strong { color: #ffffff; }
.sticky-cta .sticky-tag {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
}
.sticky-cta .sticky-arrow { color: #ffffff; }

/* --- Top urgency strip → blue --- */
.urgency-strip {
  background: #DC2626;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  color: #FEF2F2;
}
.urgency-strip .live { color: #ffffff; }

/* --- Hero portrait (Mawra) --- */
.hero-funnel .vsl-wrap.hero-portrait-wrap { max-width: 430px !important; margin-top: 4px; }
.vsl-wrap.hero-portrait-wrap::before { display: none; }   /* drop the dark glow ring */
.vsl-box.hero-portrait {
  aspect-ratio: auto;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  cursor: default;
  isolation: auto;
}
.vsl-box.hero-portrait::before { display: none; }
.vsl-box.hero-portrait .vsl-image {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: contain;
}
@media (max-width: 720px) {
  .hero-funnel .vsl-wrap.hero-portrait-wrap { max-width: 320px !important; }
  .vsl-box.hero-portrait .vsl-image { max-height: 440px; }
}

/* --- THEN/NOW table: neutralise the reddish frame to a soft slate --- */
.xform { border-color: #d6d9e2; }
.xform-h.then, .xform-then { border-right-color: #e2c4c4; }
.xform-row { border-top-color: #e6e2e2; }

/* ============================================================
   THEME FIX PASS 2 — hero fit, pills, numbers, sticky, form
   ============================================================ */

/* --- Hero portrait: fit the whole hero on a 13" first screen --- */
.vsl-box.hero-portrait .vsl-image { max-height: clamp(230px, 40vh, 380px); }
@media (min-width: 1000px) {
  .hero-funnel { padding: 6px 0 22px; }
  .hero-funnel-inner { gap: 8px; padding-top: 0; }
  .hero-funnel .vsl-wrap.hero-portrait-wrap { max-width: 330px !important; margin-top: 0; }
  .vsl-box.hero-portrait .vsl-image { max-height: clamp(230px, 36vh, 360px); }
  .hero-h1 { font-size: clamp(26px, 3vw, 37px); line-height: 1.14; }
  .eyebrow-pill { padding: 8px 18px; }
  .hero-creds { margin-top: 0; }
  .hero-name { margin: 0; font-size: clamp(24px, 2.4vw, 30px); }
  .hero-cta-block { margin-top: 2px; }
}

/* --- Credential pills: readable text + light-grey box (img 1 & 7) --- */
.hero-cred-pill {
  background: #f1f2f5;
  border: 1px solid #e3e5ea;
  color: #1c2533;
}
.hero-cred-pill .cpd { background: #DC2626; box-shadow: 0 0 7px rgba(220,38,38,0.5); }

/* --- Pill / chip boxes → light grey, readable text (image 7) --- */
.eyebrow-pill {
  background: #f1f2f5;
  border: 1px solid #e3e5ea;
  color: #51607a;
}
.eyebrow-pill .dot, .eyebrow-pill .dot::before { background: #DC2626; box-shadow: 0 0 8px rgba(220,38,38,0.5); }
.lead-eyebrow, .call-meta-chip {
  background: #f1f2f5 !important;
  border: 1px solid #e3e5ea !important;
  color: #51607a !important;
}
.lead-eyebrow .dot { color: #DC2626; }

/* --- Numbered badges (image 3) → blue --- */
.numbox-num {
  background: linear-gradient(180deg, #DC2626 0%, #DC2626 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px -5px rgba(220, 38, 38, 0.55);
}

/* --- Sticky bar: visible tag + button matching the others (image 4) --- */
.sticky-cta .sticky-tag {
  background: rgba(7, 34, 96, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  font-weight: 700;
}
.sticky-cta .sticky-tag::before { background: #ff5b3e; box-shadow: 0 0 8px #ff5b3e; }
.sticky-cta .sticky-arrow {
  background: linear-gradient(180deg, #DC2626 0%, #DC2626 100%);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.45);
}
.sticky-cta .sticky-arrow .ar { background: #ffffff; color: #DC2626; }

/* --- Lead form (image 5) → blue / white --- */
.lead-field input,
.lead-field select,
.lead-phone-group select,
.lead-phone-group input {
  background-color: #ffffff;
  border: 1px solid #d3d8e2;
  color: #14140f;
}
.lead-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23dc2626' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
}
.lead-title .gold {
  background: none;
  -webkit-text-fill-color: #DC2626;
  color: #DC2626;
}
.lead-submit {
  background: linear-gradient(180deg, #1a63d8 0%, #DC2626 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(220, 38, 38, 0.4) !important;
}
.lead-submit .ar { color: #ffffff; }

/* ============================================================
   LIGHT MODE RESKIN (Mawra) — reference palette + Bebas/Manrope
   Wins the cascade (last in source). Blue brand on white, soft
   light-appropriate glows, gold reserved for stars.
   ============================================================ */
:root {
  --brand: #DC2626;
  --brand-bright: #EF4444;
  --brand-deep: #B91C1C;
  --brand-soft: rgba(220, 38, 38, .10);
  --brand-ring: rgba(220, 38, 38, .25);
  --cyan: #F87171;
  --star: #FBBF24;
  --success: #10B981;
  --danger: #DC2626;
  --muted: #64748B;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  --bg: #FFFFFF;
  --bg-alt: #FEF2F2;
  --bg-dark: #0A0F1E;

  --ink: #111827;
  --ink-soft: #475569;
  --ink-mute: #64748B;
  --paper: #FFFFFF;
  --paper-2: #FEF2F2;
  --paper-3: #EEF2F7;
  --rule: #E2E8F0;
  --night: #FFFFFF;

  --accent: #DC2626;
  --accent-bright: #EF4444;
  --accent-deep: #B91C1C;
  --accent-darker: #991B1B;
  --accent-soft: #B91C1C;
  --gold: #DC2626;
  --gold-soft: #EF4444;
  --gold-deep: #B91C1C;

  --shadow-card: 0 4px 6px rgba(220, 38, 38, .2), 0 1px 3px rgba(220, 38, 38, .1);
  --shadow-hover: 0 10px 28px -8px rgba(220, 38, 38, .28), 0 2px 8px rgba(15, 23, 42, .06);
}

html, body { background: var(--bg) !important; }
body {
  color: var(--ink) !important;
  font-family: "DM Sans", sans-serif;
  background:
    radial-gradient(1000px 620px at 82% -8%, rgba(220,38,38,.06), transparent 60%),
    var(--bg) !important;
}

.hero-funnel, .sec-band-paper, .sec-band-paper-2, .sec-band-night, .final-cta-block {
  position: relative; overflow: hidden; color: var(--ink) !important;
}
.hero-funnel { background:
  radial-gradient(520px 520px at 84% 26%, rgba(220,38,38,.10), transparent 62%),
  var(--bg) !important; }
.sec-band-paper   { background: var(--bg-alt) !important; }
.sec-band-paper-2 { background: var(--bg) !important; }
.sec-band-night   { background: var(--bg-alt) !important; }
.sec-band-night::before, .sec-band-night::after { display: none !important; }
.sec-band-paper::before, .sec-band-night::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(220,38,38,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 78%);
  display: block !important;
}
.sec-band-night, .sec-band-night p, .sec-band-night li,
.final-cta-block p { color: var(--ink) !important; }
.sec-band-night .sec-h2 { color: var(--ink) !important; }
.sec-band-night .sec-lede, .sec-lede { color: var(--ink-soft) !important; }

.hero-h1, .sec-h2, .hero-name, .lead-title, .numbox-title, .tl-title,
.case-name, .callout-lead, .step-title {
  font-family: "Poppins", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  color: var(--ink) !important;
  text-shadow: none !important;
}
.hero-h1 { line-height: 1.02 !important; font-size: clamp(38px, 6.4vw, 74px) !important; }
.sec-h2 { line-height: 1.03 !important; }
.sec-h2 .accent, .hero-h1 .accent-italic, .agenda-body .hl {
  color: var(--brand) !important; font-style: normal !important;
  background: none !important; -webkit-text-fill-color: var(--brand) !important;
  filter: none !important; animation: none !important;
}
.hero-h1 .gold-box {
  display: inline; padding: 0 !important; margin: 0 !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  color: var(--brand) !important; -webkit-text-fill-color: var(--brand) !important;
  font-style: normal !important; animation: none !important; filter: none !important;
}
.hero-h1 .gold-box::after { display: none !important; }

.eyebrow-pill {
  background: var(--brand-soft) !important;
  border: 1px solid var(--brand-ring) !important;
  color: var(--brand-deep) !important;
  backdrop-filter: none !important; box-shadow: none !important;
  font-family: "DM Sans", sans-serif !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .12em;
}
.eyebrow-pill .dot, .eyebrow-pill .dot::before { background: var(--brand) !important; box-shadow: none !important; }
.sec-label, .sec-num { color: var(--muted) !important; }

/* ---- Hero: CIRCULAR portrait of Coach Mawra (not a VSL) ---- */
.hero-funnel .vsl-wrap.hero-portrait-wrap { max-width: 400px !important; width: 100%; margin: 12px auto 4px !important; }
.vsl-box.hero-portrait {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  max-width: 380px; margin: 0 auto !important;
  border-radius: 50% !important;
  overflow: visible !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  isolation: isolate !important;
  cursor: default;
}
/* Colored disc + continuous halo behind the photo */
.vsl-box.hero-portrait::before {
  content: "" !important;
  position: absolute; inset: -4%;
  z-index: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, rgba(220,38,38,.42) 0%, rgba(220,38,38,.22) 52%, rgba(220,38,38,.06) 70%, transparent 76%);
  display: block !important; pointer-events: none;
  animation: haloPulse 3.4s ease-in-out infinite;
}
@keyframes haloPulse {
  0%,100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.05); opacity: 1; }
}
/* No play button — this is a portrait, not a video */
.vsl-box.hero-portrait::after { display: none !important; content: none !important; }
/* The circular photo with an animated glowing ring */
.vsl-box.hero-portrait .vsl-image {
  position: relative !important;
  inset: auto !important;
  z-index: 1;
  display: block;
  width: 90% !important;
  height: 90% !important;
  margin: 5% auto !important;
  max-height: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: 50% 14% !important;
  border: 6px solid #fff;
  box-shadow:
    0 0 0 2px rgba(220,38,38,.4),
    0 22px 50px -20px rgba(220,38,38,.5),
    0 0 55px -10px rgba(220,38,38,.5);
  animation: ringGlow 3.4s ease-in-out infinite;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
}
@keyframes ringGlow {
  0%,100% { box-shadow: 0 0 0 2px rgba(220,38,38,.4), 0 18px 44px -20px rgba(220,38,38,.45), 0 0 44px -12px rgba(220,38,38,.4); }
  50% { box-shadow: 0 0 0 4px rgba(220,38,38,.6), 0 24px 56px -18px rgba(220,38,38,.6), 0 0 78px -6px rgba(220,38,38,.6); }
}
/* Hover: lift + zoom + brighter glow */
.vsl-box.hero-portrait:hover .vsl-image {
  transform: scale(1.04) translateY(-4px);
  box-shadow:
    0 0 0 4px rgba(220,38,38,.75),
    0 30px 64px -16px rgba(220,38,38,.65),
    0 0 100px -4px rgba(220,38,38,.7);
}
.vsl-box.hero-portrait:hover::before { animation-play-state: paused; transform: scale(1.06); opacity: 1; }
@media (max-width: 720px){
  .hero-funnel .vsl-wrap.hero-portrait-wrap { max-width: 320px !important; }
}
@media (prefers-reduced-motion: reduce){
  .vsl-box.hero-portrait::before, .vsl-box.hero-portrait .vsl-image { animation: none !important; }
}

.hero-name { color: var(--ink) !important; }
.hero-role { color: var(--ink-soft) !important; }
.hero-cred-pill { background: #fff !important; border: 1px solid var(--border) !important; color: var(--ink) !important; box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hero-cred-pill:hover { transform: translateY(-2px); border-color: var(--brand-ring) !important; box-shadow: var(--shadow-hover); }
.hero-cred-pill .cpd { background: var(--brand) !important; box-shadow: none !important; }

.case-card, .sec-band-paper .case-card {
  background: #fff !important; border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-card) !important; backdrop-filter: none !important;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease !important;
}
.case-card:hover, .sec-band-paper .case-card:hover {
  transform: translateY(-6px) !important; border-color: var(--brand-ring) !important;
  box-shadow: var(--shadow-hover) !important;
}
.case-name { color: var(--ink) !important; }
.case-quote { color: var(--ink-soft) !important; }
.case-stars { color: var(--star) !important; -webkit-text-fill-color: var(--star) !important; background: none !important; filter: none !important; }
.result-photo { background: #eef2f7 !important; }

.numbox, .agenda-box, .faq-closing-plaque,
.call-meta-chip, .lead-eyebrow, .guarantee-chip {
  background: #fff !important; border: 1px solid var(--border) !important;
  color: var(--ink) !important; box-shadow: var(--shadow-card) !important;
}
.numbox { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.numbox:hover { transform: translateY(-4px); border-color: var(--brand-ring) !important; box-shadow: var(--shadow-hover); }
.numbox-num { background: linear-gradient(180deg, var(--brand-bright), var(--brand) 60%, var(--brand-deep)) !important; color: #fff !important; box-shadow: 0 6px 16px -6px rgba(220,38,38,.5) !important; }
.numbox-title { color: var(--ink) !important; }
.numbox-body, .agenda-body, .callout-punch, .callout-lead, .tl-body { color: var(--ink-soft) !important; }
.agenda-body strong { color: var(--ink) !important; }
.agenda-body .hl { font-weight: 800 !important; }
.agenda-row:hover { background: var(--brand-soft) !important; }

.compare-callout { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.compare-callout .callout-lead { text-align: center !important; color: var(--ink) !important; }
.compare-callout .callout-punch {
  background: #fff !important; border: 1px solid var(--border) !important;
  border-left: 3px solid var(--brand) !important; border-radius: 12px !important;
  color: var(--ink) !important; box-shadow: var(--shadow-card) !important;
}
.compare-callout .callout-punch em { color: var(--brand-deep) !important; }

.tl-node { color: var(--brand) !important; border-color: var(--brand-ring) !important; background: var(--brand-soft) !important; }
.tl-item.is-active .tl-node { color: #fff !important; background: linear-gradient(180deg, var(--brand-bright), var(--brand) 60%, var(--brand-deep)) !important; box-shadow: 0 0 0 6px rgba(220,38,38,.12), 0 10px 26px -6px rgba(220,38,38,.5) !important; }
.tl-item.is-active::before { background: linear-gradient(180deg, var(--brand), rgba(220,38,38,.25)) !important; }
.tl-title { color: var(--ink) !important; }
.agenda-ico { color: var(--brand) !important; border: 1px solid var(--brand-ring) !important; background: var(--brand-soft) !important; }
.agenda-row:hover .agenda-ico { box-shadow: 0 0 0 4px rgba(220,38,38,.12) !important; }

.xform { border: 1px solid var(--border-strong) !important; border-radius: 16px !important; overflow: hidden; background: #fff !important; box-shadow: var(--shadow-card) !important; }
.xform-h.then { background: rgba(220,38,38,.08) !important; color: #b91c1c !important; border-right: 1px solid var(--border) !important; }
.xform-h.now  { background: rgba(220,38,38,.10) !important; color: var(--brand-deep) !important; }
.xform-row { border-top: 1px solid var(--border) !important; transition: background .3s ease; }
.xform-then, .xform-now { display: flex !important; align-items: center; gap: 11px; }
.xform-then { background: rgba(220,38,38,.04) !important; color: #b91c1c !important; border-right: 1px solid var(--border) !important; }
.xform-now { background: rgba(220,38,38,.05) !important; color: var(--brand-deep) !important; }
.xform-then::before, .xform-now::before { content: ""; flex: 0 0 auto; width: 19px; height: 19px; background-repeat: no-repeat; background-position: center; background-size: contain; transition: transform .3s ease; }
.xform-then::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 17 13.5 8.5 8.5 13.5 2 7'/><polyline points='16 17 22 17 22 11'/></svg>"); }
.xform-now::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"); }
.xform-row:hover { background: var(--brand-soft) !important; }
.xform-row:hover .xform-then::before, .xform-row:hover .xform-now::before { transform: scale(1.12); }

.story-photo { background: #fff !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-card) !important; }
.press-logo { filter: none; opacity: .7; transition: opacity .25s ease, transform .25s ease; }
.press-logo:hover { opacity: 1; transform: translateY(-2px); }

.cta-big {
  background: linear-gradient(180deg, #EF4444 0%, #B91C1C 100%) !important;
  color: #fff !important; border: 1px solid rgba(185,28,28,.5) !important;
  box-shadow: 0 10px 26px -8px rgba(220,38,38,.5), 0 2px 6px rgba(15,23,42,.08) !important;
  animation: ctaBreath 3.2s ease-in-out infinite !important;
}
.cta-big::after { background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%) !important; animation: ctaShine 3.4s ease-in-out infinite !important; }
.cta-big:hover { transform: translateY(-3px) scale(1.02) !important; animation: none !important; box-shadow: 0 16px 40px -8px rgba(220,38,38,.6), 0 3px 10px rgba(15,23,42,.1) !important; }
.cta-big .arrow { background: #fff !important; color: var(--brand) !important; box-shadow: none !important; }

.sticky-cta { background: #fff !important; border-top: 1px solid var(--border) !important; box-shadow: 0 -8px 30px -12px rgba(15,23,42,.15) !important; backdrop-filter: none !important; }
.sticky-cta .sticky-label, .sticky-cta .sticky-label strong { color: var(--ink) !important; }
.sticky-cta .sticky-tag { background: var(--brand-soft) !important; border: 1px solid var(--brand-ring) !important; color: var(--brand-deep) !important; -webkit-text-fill-color: var(--brand-deep) !important; }
.sticky-cta .sticky-tag::before { background: var(--danger) !important; }
.sticky-cta .sticky-arrow { background: linear-gradient(180deg, #EF4444, #B91C1C) !important; color: #fff !important; box-shadow: 0 6px 18px -6px rgba(220,38,38,.5) !important; }
.sticky-cta .sticky-arrow .ar { background: #fff !important; color: var(--brand) !important; }

.urgency-strip { background: linear-gradient(90deg, #B91C1C, #DC2626 50%, #B91C1C) !important; border-bottom: 1px solid rgba(185,28,28,.4) !important; overflow: hidden !important; padding: 9px 0 !important; }
.urgency-marquee { width: 100%; overflow: hidden; }
.urgency-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: marqueeMove 26s linear infinite; }
.urgency-strip:hover .urgency-track { animation-play-state: paused; }
.urgency-track .um-item { display: inline-flex; align-items: center; gap: 10px; padding: 0 24px; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.92); }
.urgency-track .um-item b { color: #fff; font-weight: 700; }
.urgency-track .um-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--star); box-shadow: 0 0 8px rgba(251,191,36,.6); }
.urgency-track .um-sep { color: rgba(255,255,255,.5); }
@keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 720px){ .urgency-track { animation-duration: 18s; } .urgency-track .um-item { font-size: 10px; padding: 0 16px; } }

.scroll-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.scroll-prog > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand-deep), var(--brand), var(--cyan)); box-shadow: 0 0 10px rgba(220,38,38,.5); transition: width .12s linear; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.hero-funnel-inner > * { opacity: 0; animation: heroRise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-funnel-inner > *:nth-child(1){animation-delay:.05s} .hero-funnel-inner > *:nth-child(2){animation-delay:.16s}
.hero-funnel-inner > *:nth-child(3){animation-delay:.3s} .hero-funnel-inner > *:nth-child(4){animation-delay:.44s}
.hero-funnel-inner > *:nth-child(5){animation-delay:.58s}
@keyframes heroRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .hero-funnel-inner > *, .reveal { opacity:1 !important; transform:none !important; animation:none !important; } .cta-big, .urgency-track, .vsl-box.hero-portrait::after { animation:none !important; } }

.final-cta-block { background: var(--bg-dark) !important; }
.final-cta-block, .final-cta-block p, .foot-bottom { color: rgba(248,250,252,.7) !important; }
.foot-ornament { color: var(--brand-bright) !important; }
.foot-links a { color: rgba(248,250,252,.7) !important; }
.foot-links a:hover { color: #fff !important; }

* { scrollbar-width: thin; scrollbar-color: #FCA5A5 #eef2f7; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #eef2f7; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #EF4444, #B91C1C); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #DC2626, #B91C1C); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

.tsel { position: relative; width: 100%; }
.tsel-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; background: #fff; border: 1px solid var(--border-strong); border-radius: 10px; color: var(--ink); font-family: "DM Sans", sans-serif; font-size: 15px; text-align: left; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.tsel-btn:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.tsel.open .tsel-btn { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
.tsel.is-invalid .tsel-btn { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.tsel-placeholder { color: var(--muted); }
.tsel-chev { display: grid; place-items: center; color: var(--brand); transition: transform .2s ease; flex-shrink: 0; }
.tsel-chev svg { width: 16px; height: 16px; }
.tsel.open .tsel-chev { transform: rotate(180deg); }
.tsel-list { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; max-height: 240px; overflow-y: auto; background: #fff; border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(15,23,42,.25); animation: tselIn .16s ease; }
@keyframes tselIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tsel-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--ink-soft); font-family: "DM Sans", sans-serif; font-size: 14.5px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.tsel-opt.active { background: var(--brand-soft); color: var(--ink); }
.tsel-opt.selected { color: var(--brand-deep); font-weight: 700; }
.tsel-check { display: grid; place-items: center; color: var(--brand); }
.tsel-check svg { width: 15px; height: 15px; }

.lead-field.has-error input, .lead-field.has-error .tsel-btn, .lead-phone-group.has-error input { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important; }
.field-error { margin-top: 6px; font-family: "DM Sans", sans-serif; font-size: 12px; color: var(--danger); }

.reviews-track { align-items: flex-start !important; }
.reviews-track .case-card { padding: 8px !important; }
.reviews-track .result-photo { aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; border-radius: 10px !important; background: #eef2f7 !important; }

.vslider { position: relative; width: 100%; overflow: hidden; padding: 30px 0 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.vslider-track { display: flex; gap: 18px; width: max-content; animation: vslideMove 40s linear infinite; }
.vslider:hover .vslider-track { animation-play-state: paused; }
@keyframes vslideMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.vcard { position: relative; flex: 0 0 auto; width: 260px; aspect-ratio: 9 / 12; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #eef2f7; cursor: pointer; box-shadow: var(--shadow-card); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease, filter .3s ease; }
.vcard-video, .vcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: #eef2f7; }
.vcard-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 20%, rgba(220,38,38,.12), transparent 60%), linear-gradient(160deg, #eef2f7, #dce6f5); }
.vcard-ph-tag { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px; white-space: nowrap; background: rgba(255,255,255,.7); }
.vcard::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 55%, rgba(15,23,42,.35) 100%); z-index: 1; }
.vcard .vcard-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 58px; height: 58px; border-radius: 50%; z-index: 3; background: radial-gradient(circle at 50% 40%, var(--brand-bright), var(--brand) 60%, var(--brand-deep)); box-shadow: 0 0 0 8px rgba(220,38,38,.16), 0 8px 24px -6px rgba(220,38,38,.6); clip-path: polygon(40% 30%, 40% 70%, 72% 50%); transition: transform .3s ease; }
.vslider:hover .vcard { filter: saturate(.85) brightness(.94); }
.vslider .vcard:hover { filter: none !important; transform: translateY(-6px) scale(1.04); border-color: var(--brand-ring); box-shadow: 0 0 0 1px var(--brand-ring), 0 18px 44px -12px rgba(220,38,38,.4); z-index: 4; }
.vslider .vcard:hover .vcard-play { transform: translate(-50%,-50%) scale(1.12); }
@media (max-width: 720px){ .vcard { width: 200px; } .vslider-track { animation-duration: 28s; } }

.vmodal { position: fixed; inset: 0; z-index: 1300; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(15,23,42,.7); backdrop-filter: blur(6px); }
.vmodal.open { display: flex; }
.vmodal-stage { position: relative; width: min(920px, 96vw); }
.vmodal-frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: #0b1220; border: 1px solid var(--border-strong); box-shadow: 0 30px 80px -30px rgba(15,23,42,.6); }
.vmodal-frame video, .vmodal-frame iframe { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; background: #0b1220; }
.vmodal-ph { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(80% 90% at 50% 32%, rgba(220,38,38,.2), transparent 60%), linear-gradient(160deg, #101a2e, #0b1220); }
.vmodal-ph-play { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--brand-bright), var(--brand) 60%, var(--brand-deep)); box-shadow: 0 0 0 10px rgba(220,38,38,.16), 0 0 40px rgba(220,38,38,.5); clip-path: polygon(40% 30%, 40% 70%, 72% 50%); }
.vmodal-empty { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; color: rgba(248,250,252,.75); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 0 20px; z-index: 2; }
.vmodal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; z-index: 12; color: #fff; background: radial-gradient(circle at 50% 30%, var(--brand-bright), var(--brand) 55%, var(--brand-deep)); border: 1px solid rgba(255,255,255,.35); box-shadow: 0 7px 16px -3px rgba(15,23,42,.4), inset 0 2px 3px rgba(255,255,255,.4), 0 0 22px -4px rgba(220,38,38,.6); cursor: pointer; transition: transform .16s ease, box-shadow .2s ease; }
.vmodal-nav svg { width: 24px; height: 24px; }
.vmodal-nav:hover { transform: translateY(-50%) scale(1.09); box-shadow: 0 11px 24px -4px rgba(15,23,42,.45), inset 0 2px 3px rgba(255,255,255,.5), 0 0 40px -2px rgba(220,38,38,.7); }
.vmodal-nav:active { transform: translateY(-50%) scale(.95); }
.vmodal-prev { left: 14px; } .vmodal-next { right: 14px; }
.vmodal-close { position: absolute; top: -46px; right: 0; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 6; }
.vmodal-caption { text-align: center; color: #fff; margin-top: 16px; font-family: "Poppins", sans-serif; letter-spacing: .03em; font-size: 22px; }
.vmodal-caption span { display: block; color: rgba(248,250,252,.7); font-family: "DM Sans", sans-serif; font-weight: 500; font-size: 13px; margin-top: 3px; }
.vmodal-dots { display: flex; gap: 7px; justify-content: center; margin-top: 14px; }
.vmodal-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,.3); cursor: pointer; padding: 0; }
.vmodal-dots button[aria-current="true"] { background: var(--brand-bright); }
@media (max-width: 720px){ .vmodal-prev { left: 4px; } .vmodal-next { right: 4px; } .vmodal-nav { width: 42px; height: 42px; } }

.lead-modal-backdrop { background: rgba(15,23,42,.55) !important; backdrop-filter: blur(4px) !important; }
.lead-modal-card { background: #fff !important; border: 1px solid var(--border-strong) !important; box-shadow: 0 30px 80px -30px rgba(15,23,42,.4) !important; }
.lead-modal-close { color: var(--muted) !important; }
.lead-modal-close:hover { color: var(--brand) !important; }
.lead-eyebrow { background: var(--brand-soft) !important; border: 1px solid var(--brand-ring) !important; color: var(--brand-deep) !important; }
.lead-eyebrow .dot { color: var(--brand) !important; }
.lead-title { color: var(--ink) !important; }
.lead-title .gold { background: none !important; -webkit-text-fill-color: var(--brand) !important; color: var(--brand) !important; animation: none !important; filter: none !important; font-style: normal !important; }
.lead-sub, .lead-field label { color: var(--ink-soft) !important; }
.lead-field input, .lead-phone-group input { background-color: #fff !important; border: 1px solid var(--border-strong) !important; color: var(--ink) !important; }
.lead-field input::placeholder, .lead-phone-group input::placeholder { color: var(--muted) !important; }
.lead-field input:focus, .lead-phone-group input:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-ring) !important; }
.lead-fine { color: var(--muted) !important; }
.lead-submit { background: linear-gradient(180deg, #EF4444, #B91C1C) !important; color: #fff !important; border: 1px solid rgba(185,28,28,.5) !important; box-shadow: 0 10px 26px -8px rgba(220,38,38,.5) !important; }
.lead-submit:hover:not(:disabled) { transform: translateY(-2px) !important; box-shadow: 0 16px 40px -8px rgba(220,38,38,.6) !important; }
.lead-submit .ar { color: #fff !important; }

/* ============================================================
   REFINEMENTS — hero grid, 2-line heading, centered circular
   glow, alternating dark bands, 3D badges/icons
   ============================================================ */

/* Hero heading: cap at 56px, tight 2-line layout */
.hero-h1 { font-size: clamp(28px, 4.6vw, 56px) !important; line-height: 1.05 !important; max-width: 1040px; }

/* Hero grid gradient + blue ambience */
.hero-funnel-inner { position: relative; z-index: 1; }
.hero-funnel {
  background:
    radial-gradient(560px 520px at 84% 22%, rgba(220,38,38,.14), transparent 62%),
    radial-gradient(620px 520px at 10% 92%, rgba(248,113,113,.08), transparent 60%),
    var(--bg) !important;
}
.hero-funnel::after {
  content: "" !important; position: absolute; inset: 0; z-index: 0; pointer-events: none; display: block !important;
  background-image:
    linear-gradient(rgba(220,38,38,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(220,38,38,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 82% 66% at 50% 34%, #000 0%, transparent 76%);
  mask-image: radial-gradient(ellipse 82% 66% at 50% 34%, #000 0%, transparent 76%);
}

/* ---- Circular hero portrait: CENTERED disc + clean sonar pulse ---- */
.vsl-box.hero-portrait { overflow: visible !important; }
.vsl-box.hero-portrait::before {
  content: "" !important; position: absolute !important; inset: -7% !important; z-index: 0 !important; border-radius: 50% !important;
  background: radial-gradient(circle at 50% 50%, rgba(220,38,38,.40) 0%, rgba(220,38,38,.18) 54%, rgba(220,38,38,.04) 70%, transparent 76%) !important;
  animation: discBreath 3.6s ease-in-out infinite !important; display: block !important; pointer-events: none;
  transform-origin: 50% 50%;
}
@keyframes discBreath { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.05); opacity: 1; } }
/* Sonar pulse ring — repurposed ::after (reset all play-button props) */
.vsl-box.hero-portrait::after {
  content: "" !important; display: block !important;
  position: absolute !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important;
  border-radius: 50% !important;
  border: 2px solid rgba(220,38,38,.5) !important;
  background: none !important; box-shadow: none !important; clip-path: none !important;
  z-index: 0 !important; pointer-events: none; transform-origin: 50% 50%;
  animation: pulseRing 3s ease-out infinite !important;
}
@keyframes pulseRing { 0% { transform: scale(.92); opacity: .65; } 70% { opacity: 0; } 100% { transform: scale(1.22); opacity: 0; } }
/* Steady centered photo (motion comes from disc + ring) */
.vsl-box.hero-portrait .vsl-image {
  position: relative !important; inset: auto !important; z-index: 2 !important; display: block !important;
  width: 88% !important; height: 88% !important; margin: 6% auto !important;
  border-radius: 50% !important; object-fit: cover !important; object-position: 50% 12% !important;
  border: 6px solid #fff !important;
  box-shadow: 0 0 0 2px rgba(220,38,38,.35), 0 22px 50px -22px rgba(220,38,38,.45), 0 0 46px -14px rgba(220,38,38,.4) !important;
  animation: none !important;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease !important;
}
.vsl-box.hero-portrait:hover .vsl-image {
  transform: scale(1.04) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.65), 0 28px 60px -18px rgba(220,38,38,.6), 0 0 80px -8px rgba(220,38,38,.6) !important;
}
@media (prefers-reduced-motion: reduce){ .vsl-box.hero-portrait::before, .vsl-box.hero-portrait::after { animation: none !important; } }

/* ---- 3D number badges (Book Your Assessment Call etc.) ---- */
.numbox-num {
  background: linear-gradient(180deg, #FCA5A5 0%, #DC2626 55%, #B91C1C 100%) !important;
  color: #fff !important;
  box-shadow: 0 3px 0 #991B1B, 0 9px 18px -6px rgba(220,38,38,.6), inset 0 2px 3px rgba(255,255,255,.55), inset 0 -3px 6px rgba(30,58,138,.5) !important;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease !important;
}
.numbox:hover .numbox-num {
  transform: translateY(-3px) scale(1.07) !important;
  box-shadow: 0 6px 0 #991B1B, 0 16px 28px -6px rgba(220,38,38,.75), inset 0 2px 3px rgba(255,255,255,.6), inset 0 -3px 7px rgba(30,58,138,.55) !important;
}
/* 3D icon nodes + hover */
.tl-node, .agenda-ico { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, color .25s ease, background .25s ease !important; }
.tl-item:hover .tl-node { transform: translateY(-3px) scale(1.06); box-shadow: 0 10px 22px -6px rgba(220,38,38,.5), inset 0 2px 3px rgba(255,255,255,.4) !important; }
.agenda-row:hover .agenda-ico { transform: translateY(-2px) scale(1.06); box-shadow: 0 10px 20px -6px rgba(220,38,38,.5), inset 0 2px 3px rgba(255,255,255,.4) !important; }
.cta-big .arrow, .sticky-cta .sticky-arrow .ar { box-shadow: 0 2px 5px rgba(15,23,42,.25), inset 0 1px 1px rgba(255,255,255,.7) !important; transition: transform .2s ease; }
.cta-big:hover .arrow { transform: translateX(4px) scale(1.08); }

/* ============================================================
   ALTERNATING DARK BANDS (themed navy)
   ============================================================ */
.sec-dark { background: #0B1324 !important; color: #E2E8F0 !important; }
.sec-dark::before {
  content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none; display: block !important;
  background-image:
    linear-gradient(rgba(239,68,68,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,68,68,.08) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 78%) !important;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 78%) !important;
}
.sec-dark::after {
  content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none; z-index: 0;
  background: radial-gradient(600px 460px at 84% 8%, rgba(220,38,38,.14), transparent 60%), radial-gradient(520px 420px at 8% 96%, rgba(248,113,113,.08), transparent 60%) !important;
}
.sec-dark > * { position: relative; z-index: 1; }
.sec-dark, .sec-dark p, .sec-dark li { color: #CBD5E1 !important; }
.sec-dark .sec-h2, .sec-dark .numbox-title, .sec-dark .callout-lead, .sec-dark .hero-name, .sec-dark .case-name, .sec-dark .tl-title { color: #FEF2F2 !important; }
.sec-dark .sec-lede, .sec-dark .numbox-body, .sec-dark .agenda-body, .sec-dark .callout-punch, .sec-dark .tl-body, .sec-dark .case-quote { color: #CBD5E1 !important; }
.sec-dark .sec-label, .sec-dark .sec-num { color: #94A3B8 !important; }
.sec-dark .sec-h2 .accent, .sec-dark .agenda-body .hl { color: #EF4444 !important; -webkit-text-fill-color: #EF4444 !important; }
.sec-dark .agenda-body strong { color: #FEF2F2 !important; }
.sec-dark .eyebrow-pill { background: rgba(239,68,68,.14) !important; border-color: rgba(239,68,68,.4) !important; color: #FCA5A5 !important; }
.sec-dark .case-card, .sec-dark .numbox, .sec-dark .agenda-box, .sec-dark .faq-closing-plaque,
.sec-dark .compare-callout .callout-punch, .sec-dark .xform, .sec-dark .story-photo, .sec-dark .call-meta-chip {
  background: rgba(255,255,255,.045) !important; border-color: rgba(148,163,184,.22) !important; color: #FEF2F2 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.7) !important;
}
.sec-dark .case-card:hover, .sec-dark .numbox:hover {
  border-color: rgba(239,68,68,.55) !important; transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(239,68,68,.3), 0 16px 40px -12px rgba(220,38,38,.5) !important;
}
.sec-dark .compare-callout { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.sec-dark .compare-callout .callout-punch { border-left: 3px solid #DC2626 !important; }
.sec-dark .compare-callout .callout-punch em { color: #FCA5A5 !important; }
.sec-dark .result-photo, .sec-dark .case-video, .sec-dark .reviews-track .result-photo { background: #0f1a2e !important; }
.sec-dark .press-logo { filter: brightness(0) invert(1) !important; opacity: .82; }
.sec-dark .xform-h.then { background: rgba(220,38,38,.20) !important; color: #fca5a5 !important; }
.sec-dark .xform-h.now { background: rgba(220,38,38,.22) !important; color: #FCA5A5 !important; }
.sec-dark .xform-then { background: rgba(220,38,38,.09) !important; color: #fca5a5 !important; }
.sec-dark .xform-now { background: rgba(220,38,38,.12) !important; color: #FCA5A5 !important; }
.sec-dark .xform, .sec-dark .xform-row, .sec-dark .xform-then, .sec-dark .xform-h.then { border-color: rgba(148,163,184,.2) !important; }
.sec-dark .tl-node, .sec-dark .agenda-ico { background: rgba(239,68,68,.10) !important; border-color: rgba(239,68,68,.35) !important; color: #FCA5A5 !important; }
.sec-dark .tl-item.is-active .tl-node { color: #fff !important; background: linear-gradient(180deg, #FCA5A5, #DC2626 60%, #B91C1C) !important; }
.sec-dark .agenda-row:hover { background: rgba(239,68,68,.08) !important; }
.sec-dark .numbox-body strong, .sec-dark strong { color: #FEF2F2 !important; }

/* ============================================================
   REFINEMENTS 2 — video fit, captions, names, blue coach name,
   static 3D hero portrait, marquee card aspects
   ============================================================ */

/* Video modal: FIT the video (no zoom/crop). Portrait => black pillars. */
.vmodal-frame { background: #000 !important; }
.vmodal-frame video { object-fit: contain !important; background: #000 !important; }

/* Modal caption name -> bright blue + visible */
.vmodal-caption { color: #EF4444 !important; text-shadow: 0 1px 12px rgba(220,38,38,.45) !important; }
.vmodal-caption span { color: #E2E8F0 !important; text-shadow: none !important; }

/* Names over slider thumbnails */
.vcard-name {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 3;
  color: #fff; font-family: "Poppins", sans-serif; letter-spacing: .03em;
  font-size: 19px; line-height: 1.05; text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.vcard-name span {
  display: block; font-family: "DM Sans", sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .01em; color: #FEE2E2; margin-top: 2px;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* ---- Marquee card aspects (transformations + chats) ---- */
.mcard.result-card { width: 300px; aspect-ratio: 4 / 5; background: #eef2f7; }
.mcard.result-card img { object-position: 50% 26% !important; }
.mcard.chat-card { width: 240px; aspect-ratio: 9 / 14; background: #fff; border-color: var(--border-strong, #CBD5E1); }
.mcard.chat-card img { object-position: 50% 0% !important; }
.mcard.chat-card::before { display: none !important; }
@media (max-width: 720px){
  .mcard.result-card { width: 220px; }
  .mcard.chat-card { width: 190px; }
}
.sec-dark .mcard.result-card { background: #0f1a2e; }
.sec-dark .mcard.chat-card { background: #0f1a2e; border-color: rgba(148,163,184,.25); }

/* ---- Coach Mawra name: blue-themed animated highlight ---- */
.hero-name {
  position: relative; display: inline-block;
  background: linear-gradient(100deg, #B91C1C 0%, #DC2626 26%, #FCA5A5 50%, #DC2626 74%, #B91C1C 100%) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: blueShimmer 5s linear infinite;
  filter: drop-shadow(0 2px 9px rgba(220,38,38,.28));
  padding-bottom: 7px;
  transition: transform .3s ease, filter .3s ease;
  cursor: default;
}
@keyframes blueShimmer { to { background-position: 220% center; } }
.hero-name::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 46px; height: 3px; transform: translateX(-50%); border-radius: 3px;
  background: linear-gradient(90deg, transparent, #DC2626, transparent);
  box-shadow: 0 0 10px rgba(220,38,38,.55);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.hero-name:hover { transform: translateY(-1px) scale(1.02); filter: drop-shadow(0 3px 13px rgba(220,38,38,.55)); }
.hero-name:hover::after { width: 80%; }

/* ---- Hero portrait: STATIC 3D medallion, hover = blue glow (no pulse) ---- */
.vsl-box.hero-portrait::before {
  animation: none !important;
  inset: -6% !important;
  background: radial-gradient(circle at 50% 50%, rgba(220,38,38,.30) 0%, rgba(220,38,38,.13) 55%, rgba(220,38,38,.03) 70%, transparent 76%) !important;
  transition: transform .4s ease, opacity .4s ease !important;
}
.vsl-box.hero-portrait::after { display: none !important; content: none !important; animation: none !important; }
.vsl-box.hero-portrait .vsl-image {
  animation: none !important;
  border: 7px solid #fff !important;
  box-shadow:
    0 2px 4px rgba(15,23,42,.12),
    0 20px 44px -16px rgba(15,23,42,.4),
    0 0 0 1px rgba(220,38,38,.18) !important;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease !important;
}
.vsl-box.hero-portrait:hover .vsl-image {
  transform: scale(1.03) !important;
  box-shadow:
    0 0 0 4px rgba(220,38,38,.5),
    0 26px 56px -18px rgba(220,38,38,.55),
    0 0 78px -6px rgba(220,38,38,.7) !important;
}
.vsl-box.hero-portrait:hover::before { transform: scale(1.05); opacity: 1; }

/* Press logos on dark sections: white chips so all render correctly
   (toi/fittak are opaque white-bg PNGs; invert turned them into blocks). */
.sec-dark .press-row { gap: 16px 22px !important; }
.sec-dark .press-logo {
  filter: none !important;
  opacity: 1 !important;
  background: #fff !important;
  border-radius: 10px;
  padding: 10px 16px;
  box-sizing: content-box;
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sec-dark .press-logo:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -10px rgba(220,38,38,.5), 0 0 0 1px rgba(239,68,68,.4);
}
@media (max-width: 600px){
  .sec-dark .press-row { gap: 8px !important; }
  .sec-dark .press-logo { padding: 6px 8px; border-radius: 7px; }
}

/* ============================================================
   HERO: full 16:9 banner image (mawra_hero.png) with shadow/glow
   Overrides the earlier circular-portrait treatment.
   ============================================================ */
.hero-funnel .vsl-wrap.hero-portrait-wrap { max-width: 980px !important; width: 100%; margin: 14px auto 6px !important; }
.vsl-box.hero-portrait {
  position: relative !important;
  aspect-ratio: 1672 / 941 !important;
  width: 100% !important; max-width: none !important; margin: 0 auto !important;
  border-radius: 18px !important; overflow: hidden !important;
  background: #0a0f1e !important;
  border: 1px solid rgba(220,38,38,.28) !important;
  box-shadow:
    0 30px 70px -28px rgba(15,23,42,.55),
    0 0 0 1px rgba(220,38,38,.12),
    0 0 64px -16px rgba(220,38,38,.4) !important;
  isolation: isolate !important; cursor: default;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease !important;
}
.vsl-box.hero-portrait::before, .vsl-box.hero-portrait::after { display: none !important; content: none !important; animation: none !important; }
.vsl-box.hero-portrait .vsl-image {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
  margin: 0 !important; border: none !important; border-radius: inherit !important;
  max-height: none !important; object-fit: cover !important; object-position: 50% 50% !important;
  box-shadow: none !important; animation: none !important; transition: none !important;
}
.vsl-box.hero-portrait:hover {
  transform: translateY(-4px) scale(1.006) !important;
  box-shadow:
    0 40px 90px -30px rgba(15,23,42,.6),
    0 0 0 1px rgba(220,38,38,.32),
    0 0 96px -10px rgba(220,38,38,.55) !important;
}

/* ============================================================
   COMPACT HERO — smaller banner + tighter rhythm so the primary
   CTA is visible on the first screen (no scroll needed).
   ============================================================ */
.hero-funnel { padding-top: clamp(12px, 2.6vw, 22px) !important; padding-bottom: clamp(18px, 3.4vw, 30px) !important; }
.hero-funnel-inner { gap: clamp(10px, 1.8vw, 16px) !important; }
.hero-funnel .vsl-wrap.hero-portrait-wrap { max-width: min(760px, 64vh) !important; margin: 4px auto 0 !important; }
.hero-creds { margin-top: 2px !important; }
.hero-cred-pills { margin-top: 10px !important; }
.hero-cta-block { margin-top: 12px !important; }
.hero-name { padding-bottom: 4px !important; }
@media (min-width: 1000px){
  .hero-funnel { padding-top: 12px !important; padding-bottom: 24px !important; }
  .hero-funnel-inner { gap: 12px !important; }
  .hero-h1 { font-size: clamp(28px, 3.4vw, 48px) !important; }
  .hero-funnel .vsl-wrap.hero-portrait-wrap { max-width: min(780px, 62vh) !important; }
  .hero-name { font-size: clamp(22px, 2.2vw, 28px) !important; }
}

/* ============================================================
   HERO role size + EVEN vertical spacing
   ============================================================ */
/* Role subtitle bigger: 18px mobile -> 22px desktop */
.hero-role { font-size: clamp(18px, 2.4vw, 22px) !important; margin: 0 !important; line-height: 1.35 !important; }

/* Even rhythm: one consistent outer gap, no stray per-element margins */
.hero-funnel-inner { gap: clamp(15px, 2.6vw, 18px) !important; }
.hero-cta-block { margin-top: 0 !important; }
.hero-creds {
  margin-top: 0 !important;
  display: flex !important; flex-direction: column; align-items: center;
  gap: 10px !important;
}
.hero-name { margin: 0 !important; }
.hero-cred-pills { margin-top: 0 !important; }

/* ============================================================
   Manually slideable sliders (JS-driven auto-scroll + drag/swipe)
   ============================================================ */
.vslider {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  cursor: grab;
  scrollbar-width: none;              /* Firefox */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.vslider::-webkit-scrollbar { display: none; }   /* WebKit */
.vslider.is-dragging { cursor: grabbing; }
.vslider-track {
  animation: none !important;         /* JS drives the scroll now */
  width: max-content;
  user-select: none;
}
.vslider-track img,
.vslider-track video { -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* ============================================================
   Story videos -> clickable YouTube-modal cards
   ============================================================ */
.case-card.story-vid {
  cursor: pointer; width: 100%; font: inherit; color: inherit; text-align: left;
  -webkit-appearance: none; appearance: none;
}
.story-vid .case-video { position: relative; cursor: pointer; }
.story-vid-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 50% 40%, var(--brand-bright), var(--brand) 60%, var(--brand-deep));
  box-shadow: 0 0 0 8px rgba(220,38,38,.18), 0 8px 24px -6px rgba(220,38,38,.6);
  clip-path: polygon(40% 30%, 40% 70%, 72% 50%);
  transition: transform .3s ease;
}
.story-vid:hover .story-vid-play { transform: translate(-50%, -50%) scale(1.1); }
.story-vid:hover { transform: translateY(-4px); }
.vmodal-frame iframe { object-fit: fill !important; }

/* ============================================================
   Mobile footer spacing fix + blue 3D modal close buttons
   ============================================================ */
@media (max-width: 720px){
  .final-cta-block { padding-top: 22px !important; }
  .foot-bottom { margin-top: 12px !important; padding-top: 18px !important; }
}

/* Blue 3D close buttons (video/story modal + image lightbox) */
.vmodal-close, .testi-lightbox-close {
  position: fixed !important;
  top: 16px !important; right: 16px !important;
  left: auto !important; bottom: auto !important;
  width: 46px !important; height: 46px !important;
  display: grid !important; place-items: center !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 30%, var(--brand-bright), var(--brand) 55%, var(--brand-deep)) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  color: #fff !important;
  font-size: 26px !important; line-height: 1 !important;
  box-shadow:
    0 7px 16px -3px rgba(15,23,42,.5),
    inset 0 2px 3px rgba(255,255,255,.55),
    0 0 26px -4px rgba(220,38,38,.75) !important;
  cursor: pointer; z-index: 1400 !important;
  transition: transform .16s ease, box-shadow .2s ease !important;
}
.vmodal-close:hover, .testi-lightbox-close:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 11px 24px -4px rgba(15,23,42,.55), inset 0 2px 3px rgba(255,255,255,.65), 0 0 42px -2px rgba(220,38,38,.85) !important;
}
.vmodal-close:active, .testi-lightbox-close:active { transform: scale(.94) !important; }

/* Chat screenshots in the slider: FIT the whole screenshot (no zoom/crop) */
.mcard.chat-card { width: 250px; aspect-ratio: 9 / 15; background: #fff; }
.mcard.chat-card img { object-fit: contain !important; object-position: 50% 50% !important; }
.sec-dark .mcard.chat-card { background: #0f1a2e; }
@media (max-width: 720px){ .mcard.chat-card { width: 200px; } }

/* ============================================================
   URGENCY TIMER (red) — sits under every CTA
   ============================================================ */
.urgency-timer {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: 14px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .28);
  max-width: 100%;
}
.urgency-timer .ut-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: #b91c1c; font-weight: 700; white-space: nowrap;
}
.urgency-timer .ut-clock {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 6px 12px; border-radius: 999px;
  background: linear-gradient(180deg, #ef4444, #dc2626);
  box-shadow: 0 6px 16px -6px rgba(220, 38, 38, .6), inset 0 1px 0 rgba(255,255,255,.25);
}
.urgency-timer .ut-unit { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.urgency-timer .ut-num {
  font-family: "Poppins", sans-serif;
  font-size: 21px; letter-spacing: .04em; color: #fff;
  font-variant-numeric: tabular-nums; min-width: 26px; text-align: center;
}
.urgency-timer .ut-cap {
  font-family: "DM Sans", sans-serif;
  font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin-top: 3px;
}
.urgency-timer .ut-sep {
  color: rgba(255,255,255,.7); font-size: 15px; font-weight: 700;
  margin: 0 2px 9px; align-self: center;
}
/* dark bands: lift the label so it stays readable */
.sec-dark .urgency-timer { background: rgba(220, 38, 38, .14); border-color: rgba(248, 113, 113, .4); }
.sec-dark .urgency-timer .ut-label { color: #fca5a5; }

@media (max-width: 560px) {
  .urgency-timer { gap: 9px; padding: 7px 7px 7px 12px; }
  .urgency-timer .ut-label { font-size: 9px; letter-spacing: .1em; }
  .urgency-timer .ut-clock { padding: 5px 9px; }
  .urgency-timer .ut-num { font-size: 18px; min-width: 22px; }
  .urgency-timer .ut-sep { font-size: 13px; margin: 0 1px 8px; }
}

/* Sticky bar timer — desktop only */
.sticky-cta .urgency-timer.ut-sticky { margin-top: 0; margin-left: 4px; flex-shrink: 0; }
@media (max-width: 900px) { .sticky-cta .urgency-timer.ut-sticky { display: none !important; } }

/* Mobile-only line break utility */
.brk-m { display: none; }
@media (max-width: 720px) { .brk-m { display: inline; } }

/* Qualify closing line — centered */
.faq-closing-plaque { text-align: center; }
.faq-closing-lead { text-align: center !important; margin-left: auto; margin-right: auto; }

/* Hero banner is now a link to the Then/Now section */
a.vsl-box.hero-portrait { cursor: pointer; display: block; text-decoration: none; }

/* ============================================================
   Timer v2 — plain label + red box only (no outer pill)
   ============================================================ */
.urgency-timer,
.sec-dark .urgency-timer {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  gap: 12px;
}
/* Label: neutral so it never blends into light OR dark bands */
.urgency-timer .ut-label { color: var(--ink-soft) !important; }
.sec-dark .urgency-timer .ut-label,
.final-cta-block .urgency-timer .ut-label { color: #CBD5E1 !important; }
/* Red box keeps a solid fill + ring so it pops on any background */
.urgency-timer .ut-clock {
  background: linear-gradient(180deg, #ef4444, #dc2626) !important;
  box-shadow: 0 6px 18px -6px rgba(220,38,38,.55), 0 0 0 1px rgba(255,255,255,.14) inset;
}
.sec-dark .urgency-timer .ut-clock { box-shadow: 0 6px 18px -6px rgba(220,38,38,.6), 0 0 0 1px rgba(255,255,255,.2) inset; }

/* ============================================================
   Sticky bar — desktop: timer left / CTA right. Mobile: CTA only.
   ============================================================ */
.sticky-cta { justify-content: space-between !important; gap: 14px; }
.sticky-cta .sticky-arrow { white-space: nowrap; flex-shrink: 0; }
.sticky-cta .urgency-timer.ut-sticky { margin-top: 0 !important; }
@media (max-width: 900px) {
  .sticky-cta { justify-content: center !important; }
}
@media (max-width: 560px) {
  .sticky-cta .sticky-arrow { font-size: 13px; padding: 11px 16px; }
  .sticky-cta .sticky-arrow .ar { width: 24px; height: 24px; font-size: 13px; }
}
@media (max-width: 380px) {
  .sticky-cta .sticky-arrow { font-size: 11.5px; padding: 10px 12px; }
}


/* ============================================================
   PRIMARY BUTTONS — deep red (#DC2626) / hover (#B91C1C)
   ============================================================ */
.cta-big, .lead-submit, .sticky-cta .sticky-arrow {
  background: #DC2626 !important;
  background-image: none !important;
  border-color: #B91C1C !important;
}
.cta-big:hover, .lead-submit:hover:not(:disabled), .sticky-cta .sticky-arrow:hover {
  background: #B91C1C !important;
}

/* ============================================================
   BATCH FIXES
   ============================================================ */

/* 1) Section eyebrow labels — visible red on light, light-red on dark */
.sec-label, .sec-num { color: #DC2626 !important; }
.sec-dark .sec-label, .sec-dark .sec-num { color: #FCA5A5 !important; }

/* 10) Hero eyebrow text centered */
.eyebrow-pill { text-align: center; }

/* 2) Sticky bar — boxed width on desktop (centered), full-width on mobile */
@media (min-width: 901px) {
  .sticky-cta {
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: min(1180px, calc(100% - 48px)) !important;
    border-radius: 16px !important;
    bottom: 18px !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: 0 14px 34px -10px rgba(17, 24, 39, .28) !important;
  }
}

/* 3) Timer — more breathing space around the digits */
.urgency-timer .ut-clock { padding: 8px 20px !important; gap: 3px; }
.urgency-timer .ut-num { min-width: 30px; }
.urgency-timer .ut-sep { margin: 0 5px 9px !important; }
@media (max-width: 560px) {
  .urgency-timer .ut-clock { padding: 7px 14px !important; }
  .urgency-timer .ut-num { min-width: 24px; }
  .urgency-timer .ut-sep { margin: 0 3px 8px !important; }
}

/* 4) THEN / NOW — NOW column is green (positive) */
.xform-h.now { background: rgba(22, 163, 74, .12) !important; color: #16A34A !important; }
.xform-now { background: rgba(22, 163, 74, .06) !important; color: #15803D !important; }
.xform-now::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") !important;
}
.xform-row:hover .xform-now { background: rgba(22, 163, 74, .14) !important; }
.sec-dark .xform-h.now { background: rgba(34, 197, 94, .20) !important; color: #4ADE80 !important; }
.sec-dark .xform-now { background: rgba(34, 197, 94, .10) !important; color: #86EFAC !important; }
.sec-dark .xform-row:hover .xform-now { background: rgba(34, 197, 94, .16) !important; }

/* 5) "Then you're exactly..." — 2 centered lines on desktop AND mobile */
.faq-closing-lead { text-align: center !important; }
@media (max-width: 480px) { .faq-closing-lead { font-size: 15px !important; line-height: 1.4 !important; } }
@media (max-width: 360px) { .faq-closing-lead { font-size: 13.5px !important; } }

/* 6) Country dropdown — widen the panel so options fit on one line */
.lead-phone-group .tsel-list {
  min-width: 260px;
  width: max-content;
  max-width: 78vw;
  right: auto;
}
.tsel-opt { white-space: nowrap; }
.tsel-opt > span { display: inline-flex; align-items: center; gap: 2px; }

/* 7) Modal title — allow the forced two-line break to breathe */
.lead-title { line-height: 1.14 !important; }

/* 9) Footer text — dark on light pages, light only on the dark landing footer */
.foot-bottom { color: var(--muted) !important; }
.foot-disclaimer, .foot-disclaimer p { color: var(--ink-soft) !important; }
.foot-disclaimer .foot-copy { color: var(--muted) !important; }
.foot-links a { color: var(--ink-soft) !important; }
.foot-links a:hover { color: var(--brand) !important; }
.foot-ornament { color: var(--brand) !important; }
.final-cta-block .foot-bottom,
.final-cta-block .foot-disclaimer,
.final-cta-block .foot-disclaimer p,
.final-cta-block .foot-disclaimer .foot-copy,
.final-cta-block .foot-links a { color: rgba(248, 250, 252, .72) !important; }
.final-cta-block .foot-links a:hover { color: #fff !important; }

/* ============================================================
   MOBILE-ONLY FIXES (hero heading size, CTA + press gutters)
   ============================================================ */
@media (max-width: 600px) {
  /* Hero heading -> 24px on mobile */
  .hero-h1 { font-size: 24px !important; line-height: 1.15 !important; }

  /* CTA buttons must never touch the screen edges — wrap + gutter */
  .cta-big {
    white-space: normal !important;
    max-width: calc(100vw - 40px) !important;
    text-align: center !important;
    font-size: 15px !important;
    padding: 15px 22px !important;
    line-height: 1.25 !important;
  }
  .hero-cta-block, .faq-closing { padding-left: 16px !important; padding-right: 16px !important; }

  /* Featured-by press logos — add side breathing room */
  .press-row { gap: 3.5vw !important; padding: 0 10px !important; }
  .press-logo { max-width: 20vw !important; }
  .sec-dark .press-logo { padding: 5px 7px !important; }
}

/* ============================================================
   CTA — always one line; font auto-shrinks to fit any screen
   ============================================================ */
.cta-big {
  white-space: nowrap !important;
  max-width: calc(100vw - 24px);
}
@media (max-width: 600px) {
  .cta-big {
    white-space: nowrap !important;
    font-size: clamp(10px, 3.35vw, 16px) !important;
    padding: 13px 15px !important;
    gap: 8px !important;
    line-height: 1.2 !important;
    max-width: calc(100vw - 24px) !important;
  }
  .cta-big .arrow { width: 26px !important; height: 26px !important; font-size: 12px !important; flex-shrink: 0; }
  .hero-cta-block, .faq-closing { padding-left: 12px !important; padding-right: 12px !important; }
}

/* Two stacked transformation marquee rows — tighten the gap */
.mslider + .mslider { padding-top: 4px; }

/* ============================================================
   STEPWISE LEAD WIZARD (7-step popup form)
   ============================================================ */
.lead-wizard {
  max-width: 528px;
  padding: 34px 34px 26px;
  overflow-x: hidden; /* kill any horizontal scrollbar (esp. mobile) */
}

/* Progress track + fill — right gutter keeps it clear of the × close button */
.wiz-progress {
  height: 5px;
  border-radius: 999px;
  background: #F1E4E4;
  overflow: hidden;
  margin: 4px 46px 16px 0;
}
.wiz-progress-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #B91C1C, #DC2626, #EF4444);
  transition: width .35s cubic-bezier(.2, .8, .2, 1);
}

/* Meta row: "Question X of 7" + free badge */
.wiz-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.wiz-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.wiz-count strong { color: var(--brand); font-weight: 700; }
.wiz-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--success);
  font-weight: 600;
}
.wiz-badge svg { width: 15px; height: 15px; }

/* Step body — tall enough that an open dropdown (up to ~240px) sits fully
   inside the card without clipping or forcing the user to scroll. */
.wiz-form { min-height: 360px; display: flex; flex-direction: column; }
.wiz-step { animation: wizFade .28s ease; }
@keyframes wizFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.wiz-q {
  margin: 0 0 18px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 4.4vw, 26px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wiz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wiz-step .lead-field label {
  font-size: 9px;
  margin-bottom: 1px;
}

/* Single-select radio cards (income + investment steps) */
.wiz-radios { display: flex; flex-direction: column; gap: 10px; }
.wiz-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--border-strong);
  background: #fff;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-size: 15.5px;
  color: var(--ink);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.wiz-radio:hover { border-color: var(--brand-bright); background: var(--bg-alt); }
.wiz-radio-dot {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 2px solid var(--border-strong);
  position: relative;
  transition: border-color .18s ease;
}
.wiz-radio-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--brand);
  transform: scale(0);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}
.wiz-radio.selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.wiz-radio.selected .wiz-radio-dot { border-color: var(--brand); }
.wiz-radio.selected .wiz-radio-dot::after { transform: scale(1); }
.wiz-radio-label { line-height: 1.35; }
/* The "not ready to invest" opt-out reads a little softer */
.wiz-radio-soft .wiz-radio-label { color: var(--ink-soft); font-size: 14.5px; }

.wiz-error { margin-top: 16px; }

/* Nav row: Back (left) + Continue/Submit (right) */
.wiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 22px;
}
.wiz-next { margin-top: 0 !important; }
.wiz-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--muted);
  transition: color .18s ease;
}
.wiz-back:hover:not(:disabled) { color: var(--brand); }
.wiz-back:disabled { opacity: .5; cursor: not-allowed; }
.wiz-back .ar { font-size: 16px; }
.wiz-back-spacer { display: inline-block; }
.wiz-fine {
  margin-top: 16px;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
  text-align: left !important;
}

@media (max-width: 480px) {
  .lead-modal { padding: 14px; }
  .lead-wizard { padding: 30px 18px 20px; max-width: 100%; }
  .wiz-progress { margin-right: 44px; }
  .wiz-grid-2 { grid-template-columns: 1fr; gap: 12px; }
  .wiz-form { min-height: 330px; }
  .wiz-radio { padding: 14px 14px; font-size: 15px; }
  .wiz-q { font-size: 20px; }
  /* Phone step: keep the row from forcing the card wider than the screen */
  .lead-phone-group { grid-template-columns: 104px 1fr; gap: 8px; }
  .lead-phone-group .tsel-list {
    min-width: 216px;
    max-width: calc(100vw - 80px);
    left: 0;
    right: auto;
  }
}

/* Instagram icon inside the disqualified-page CTA */
.cta-big .ig-ico { display: inline-flex; align-items: center; }
.cta-big .ig-ico svg { display: block; }

/* ============================================================
   DISQUALIFIED PAGE
   ============================================================ */
/* Top ticker ribbon */
.disq-ribbon {
  background: linear-gradient(90deg, #B91C1C, #DC2626, #B91C1C);
  overflow: hidden;
  white-space: nowrap;
}
.disq-ribbon-track {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  padding: 10px 0;
  animation: disqTicker 26s linear infinite;
}
.disq-ribbon-track span {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.disq-ribbon-track span::after { content: "✦"; opacity: .6; }
@keyframes disqTicker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Round icon badge (hero + closing) */
.disq-icon {
  width: 54px; height: 54px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-ring);
  color: var(--brand);
}
.disq-icon svg { width: 24px; height: 24px; }

/* Instagram section: two columns */
.disq-ig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 40px;
}
.disq-follow-h {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0 0 16px;
}
.disq-follow-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.disq-follow-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-family: "DM Sans", sans-serif; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft);
}
.disq-follow-list .tick {
  flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
}
.disq-follow-list .tick svg { width: 13px; height: 13px; }
.disq-follow-list strong { color: var(--ink); font-weight: 600; }
.disq-note {
  margin-top: 20px; padding: 14px 16px;
  border-left: 3px solid var(--brand);
  background: var(--bg-alt); border-radius: 0 10px 10px 0;
  font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 1.5; color: var(--ink-soft);
}
.disq-note strong { color: var(--ink); }

/* Instagram card + CTA share one column so their widths line up exactly */
.disq-ig-col { max-width: 360px; width: 100%; margin: 0 auto; }

/* Instagram profile card mockup */
.disq-ig-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-hover);
  overflow: hidden;
  width: 100%;
}
.disq-ig-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.disq-ig-handle {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 14px; color: var(--ink);
}
.disq-ig-verified { display: inline-flex; color: #3897F0; }
.disq-ig-verified svg { width: 15px; height: 15px; display: block; }
.disq-ig-top .ig-glyph { color: var(--brand); }
.disq-ig-top .ig-glyph svg { width: 20px; height: 20px; display: block; }
.disq-ig-body { padding: 18px 16px 16px; }
.disq-ig-id { display: flex; align-items: center; gap: 16px; }
.disq-ig-avatar {
  width: 66px; height: 66px; flex-shrink: 0; border-radius: 999px; object-fit: cover;
  border: 2px solid var(--brand); padding: 2px; background: #fff;
}
.disq-ig-stats { display: flex; gap: 14px; flex: 1; justify-content: space-around; }
.disq-ig-stat { text-align: center; }
.disq-ig-stat b { display: block; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }
.disq-ig-stat span { font-family: "DM Sans", sans-serif; font-size: 11.5px; color: var(--muted); }
.disq-ig-name { margin: 14px 0 1px; font-family: "DM Sans", sans-serif; font-weight: 700; font-size: 14px; color: var(--ink); }
.disq-ig-cat { margin: 0 0 6px; font-family: "DM Sans", sans-serif; font-size: 12.5px; color: var(--muted); }
.disq-ig-bio { margin: 0; font-family: "DM Sans", sans-serif; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.disq-ig-bio .ig-link { color: #385898; font-weight: 600; }
.disq-ig-btns { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 16px; }
.disq-ig-follow {
  display: block; padding: 9px 12px; border-radius: 9px; border: none;
  background: var(--brand); color: #fff; text-decoration: none;
  font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 13.5px; text-align: center;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.disq-ig-follow:hover {
  background: var(--brand-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(220, 38, 38, .6);
}
.disq-ig-follow:active { transform: translateY(0); }
.disq-ig-msg {
  padding: 9px 16px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: #fff; color: var(--ink);
  font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 13.5px;
}
.disq-ig-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 12px 0 0;
  padding: 13px 18px; border-radius: 12px;
  background: linear-gradient(180deg, #EF4444, #B91C1C);
  color: #fff; text-decoration: none;
  font-family: "Poppins", sans-serif; font-weight: 600; font-size: 15px;
  box-shadow: 0 10px 26px -10px rgba(220, 38, 38, .55);
  transition: transform .15s ease, box-shadow .2s ease;
}
.disq-ig-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(220, 38, 38, .7); }
.disq-ig-cta svg { width: 19px; height: 19px; }

/* Re-apply card */
.disq-reapply {
  max-width: 620px; margin: 0 auto; text-align: center;
  padding: 40px 34px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 20px;
}
.disq-reapply .reapply-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 999px;
  background: #fff; border: 1px solid var(--border-strong);
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px;
}
.disq-reapply h2 { margin: 0 0 22px; }
.disq-reapply .disq-fine {
  margin: 18px auto 0; max-width: 460px;
  font-family: "DM Sans", sans-serif; font-size: 13px; line-height: 1.6; color: var(--muted);
}

/* Dark transparency band */
.disq-dark {
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(220, 38, 38, 0.16), transparent 60%),
    var(--bg-dark);
  color: #fff;
  padding: 72px 0 76px;
}
.disq-dark .sec-label { color: var(--brand-bright) !important; }
.disq-dark .sec-h2 { color: #fff !important; }
.disq-dark .sec-h2 .accent { color: var(--brand-bright) !important; }
.disq-dark .disq-dark-lede {
  max-width: 560px; margin: 14px auto 0; text-align: center;
  font-family: "DM Sans", sans-serif; font-size: 15px; line-height: 1.7; color: rgba(248, 250, 252, .72);
}
.disq-crit-grid { display: flex; flex-direction: column; gap: 16px; max-width: 720px; margin: 40px auto 0; }
.disq-crit {
  display: flex; flex-direction: column; gap: 14px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
}
.disq-crit.is-culprit {
  background: rgba(220, 38, 38, .1);
  border-color: rgba(220, 38, 38, .5);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, .2);
}
.disq-crit-head { display: flex; gap: 14px; align-items: flex-start; }
.disq-crit-num {
  flex-shrink: 0; width: 30px; height: 30px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2);
  font-family: "Poppins", sans-serif; font-weight: 700; font-size: 14px; color: #fff;
}
.disq-crit.is-culprit .disq-crit-num {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.disq-crit-q { margin: 3px 0 0; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 15.5px; line-height: 1.45; color: #fff; }

/* Boxed "Your Response" area under each question */
.disq-crit-resp-box {
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
}
.disq-crit.is-culprit .disq-crit-resp-box {
  background: rgba(220, 38, 38, .12);
  border-color: rgba(220, 38, 38, .45);
}
.disq-resp-label {
  font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(248, 250, 252, .5);
}
.disq-crit.is-culprit .disq-resp-label { color: #FCA5A5; }
.disq-resp-val {
  margin: 0; font-family: "DM Sans", sans-serif; font-weight: 600; font-size: 15px; line-height: 1.45; color: #fff;
}
.disq-crit.is-culprit .disq-resp-val { color: #FCA5A5; }
.disq-resp-empty {
  margin: 0; font-family: "DM Sans", sans-serif; font-style: italic; font-size: 14.5px; color: rgba(248, 250, 252, .4);
}
.disq-crit.is-culprit .disq-resp-empty { color: rgba(252, 165, 165, .8); }
.disq-resp-tag {
  align-self: flex-start; margin-top: 3px;
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-family: "JetBrains Mono", monospace; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.disq-crit-note {
  max-width: 560px; margin: 30px auto 0; text-align: center;
  font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 1.7; color: rgba(248, 250, 252, .6);
}
.disq-crit-note strong { color: #fff; }

/* Closing */
.disq-close-links {
  margin-top: 18px; text-align: center;
  font-family: "DM Sans", sans-serif; font-size: 14px; color: var(--muted);
}
.disq-close-links a { color: var(--brand); font-weight: 600; }

@media (max-width: 720px) {
  /* Restore a side gutter on mobile — the section/.wrap padding is zeroed
     globally, so the disqualified page's content would otherwise touch edges. */
  .disq-main section { padding-left: 18px !important; padding-right: 18px !important; }
  .disq-ig-grid { grid-template-columns: 1fr; gap: 28px; }
  .disq-reapply { padding: 32px 20px; }
  .disq-crit { padding: 16px 16px; }
}
@media (max-width: 400px) {
  .disq-main section { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ============================================================
   HERO VSL — Vimeo player with click-to-play facade
   Replaces the static hero banner. Poster is a still lifted out
   of the VSL itself; the whole card is one big play target.
   Component: app/_components/HeroVsl.tsx
   ============================================================ */
.vsl-box.hero-portrait.hero-vsl {
  aspect-ratio: 16 / 9 !important;
  background: #120a14 !important;          /* matches the frame's dark plum */
  cursor: pointer;
  padding: 0;
}
/* The card lifts on hover only while it's still a poster — once the video is
   running a moving card would fight the player controls. */
.vsl-box.hero-portrait.hero-vsl.is-playing { cursor: default; }
.vsl-box.hero-portrait.hero-vsl.is-playing:hover { transform: none !important; }

/* --- the clickable poster layer ------------------------------------------ */
.hero-vsl-trigger {
  position: absolute; inset: 0;
  z-index: 3;
  display: block;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  border: 0; border-radius: inherit;
  background: transparent;
  font: inherit; color: inherit;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  overflow: hidden;
}
.hero-vsl-trigger:focus-visible {
  outline: 3px solid #EF4444;
  outline-offset: 3px;
}
/* Scrim: darkens top and bottom so the play button and the runtime pill keep
   contrast against whatever frame the poster happens to be. */
.hero-vsl-scrim {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 4, 14, .30) 0%, rgba(10, 4, 14, .04) 34%,
                            rgba(10, 4, 14, .10) 62%, rgba(10, 4, 14, .48) 100%);
  transition: opacity .4s ease;
}
.hero-vsl-trigger:hover .hero-vsl-scrim { opacity: .82; }

/* --- 3D play button ------------------------------------------------------ */
.hero-vsl-play {
  --hvp-size: clamp(62px, 8.4vw, 96px);
  position: absolute; inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.hero-vsl-play > * { grid-area: 1 / 1; }

/* soft breathing halo behind everything */
.hero-vsl-play::before {
  content: "";
  grid-area: 1 / 1;
  width: calc(var(--hvp-size) * 2.3);
  height: calc(var(--hvp-size) * 2.3);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(220, 38, 38, .45) 0%, rgba(220, 38, 38, .16) 46%, rgba(220, 38, 38, 0) 70%);
  animation: hvpHalo 3.2s ease-in-out infinite;
}

/* two staggered pulse rings */
.hvp-ring {
  width: var(--hvp-size);
  height: var(--hvp-size);
  border-radius: 50%;
  border: 2px solid rgba(239, 68, 68, .6);
  box-shadow: 0 0 18px -2px rgba(220, 38, 38, .5);
  animation: hvpRipple 2.6s cubic-bezier(.2, .7, .2, 1) infinite;
}
.hvp-ring:nth-of-type(2) { animation-delay: 1.3s; }

/* the raised body of the button */
.hvp-core {
  position: relative;
  width: var(--hvp-size);
  height: var(--hvp-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 26%,
      #ff8b7d 0%, #f4544d 26%, #ef4444 46%, #dc2626 68%, #991b1b 100%);
  box-shadow:
    0 22px 40px -14px rgba(120, 12, 12, .85),
    0 8px 16px -8px rgba(0, 0, 0, .55),
    0 0 70px -12px rgba(220, 38, 38, .7),
    0 0 0 1px rgba(255, 255, 255, .26),
    inset 0 2px 3px rgba(255, 255, 255, .6),
    inset 0 -12px 22px -10px rgba(74, 6, 6, .9);
  animation: hvpBreath 3.2s ease-in-out infinite;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease;
  will-change: transform;
}
/* specular sheen across the top third — what sells the sphere */
.hvp-gloss {
  position: absolute;
  left: 13%; right: 13%; top: 5%;
  height: 40%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0));
  filter: blur(.5px);
  pointer-events: none;
}
.hvp-tri {
  width: 32%; height: 36%;
  margin-left: 9%;
  background: #fff;
  clip-path: polygon(4% 0%, 100% 50%, 4% 100%);
  filter: drop-shadow(0 3px 5px rgba(88, 8, 8, .5));
}

/* hover / press: pause the breath so the two transforms don't fight */
.hero-vsl-trigger:hover .hvp-core {
  animation: none;
  transform: scale(1.09);
  box-shadow:
    0 28px 50px -14px rgba(120, 12, 12, .9),
    0 10px 20px -8px rgba(0, 0, 0, .6),
    0 0 96px -10px rgba(220, 38, 38, .85),
    0 0 0 1px rgba(255, 255, 255, .34),
    inset 0 2px 4px rgba(255, 255, 255, .7),
    inset 0 -12px 22px -10px rgba(74, 6, 6, .9);
}
.hero-vsl-trigger:active .hvp-core { animation: none; transform: scale(.96); }

@keyframes hvpRipple {
  0%   { transform: scale(.9);  opacity: 0; }
  14%  { opacity: .8; }
  100% { transform: scale(1.95); opacity: 0; }
}
@keyframes hvpBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes hvpHalo {
  0%, 100% { transform: scale(.9);  opacity: .55; }
  50%      { transform: scale(1.06); opacity: .95; }
}

/* --- runtime pill -------------------------------------------------------- */
.hero-vsl-dur {
  position: absolute;
  right: clamp(10px, 1.6vw, 16px);
  bottom: clamp(10px, 1.6vw, 16px);
  z-index: 4;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10, 4, 14, .62);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(10.5px, 1.1vw, 12.5px);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.4;
  pointer-events: none;
}

/* --- the live iframe ----------------------------------------------------- */
.hero-vsl-frame {
  position: absolute; inset: 0;
  z-index: 3;
  width: 100%; height: 100%;
  border: 0;
  border-radius: inherit;
  background: #000;
  display: block;
}

/* --- last-resort unmute chip -------------------------------------------- */
/* Only rendered when the player reports itself muted after we asked for sound
   (see HeroVsl.tsx). Normally nobody ever sees this. */
.hero-vsl-unmute {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 8;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 13px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: linear-gradient(180deg, #ef4444, #dc2626);
  box-shadow: 0 10px 26px -8px rgba(220, 38, 38, .8), 0 0 0 1px rgba(255,255,255,.14) inset;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  animation: hvpBreath 2s ease-in-out infinite;
}
.hvu-icon {
  width: 14px; height: 14px;
  background: #fff;
  clip-path: polygon(0% 32%, 26% 32%, 52% 6%, 52% 94%, 26% 68%, 0% 68%);
}

@media (max-width: 720px) {
  .hero-vsl-play { --hvp-size: clamp(58px, 17vw, 82px); }
  .hvp-ring { border-width: 1.5px; }
  .hero-vsl-unmute { font-size: 12.5px; padding: 8px 14px 8px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-vsl-play::before,
  .hvp-ring,
  .hvp-core,
  .hero-vsl-unmute { animation: none !important; }
  .hvp-ring { opacity: .45; }
}

/* ============================================================
   UK FREE FUNNEL — registration modal + WhatsApp hand-off
   ============================================================ */

/* Label rows that carry a right-aligned hint ("We'll message you here").
   Previously lived in checkout.css, which went with the paid funnel.
   Scoped to .label-row so a plain label keeps its required asterisk tucked
   against the text instead of flung to the far edge. */
.lead-field label.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.lead-field .field-hint {
  font-family: "DM Sans", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted, rgba(20, 20, 15, 0.5));
}

/* Consent notice under the submit button.
   .lead-fine was built for a single short mono line (it even forces
   white-space: nowrap at 8px on mobile). This is real GDPR consent copy that
   has to be readable and wrap over several lines, so .lead-consent opts out of
   the uppercase/mono treatment entirely. */
.lead-fine.lead-consent {
  max-width: 380px;
  margin: 16px auto 0;
  font-family: "DM Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  color: var(--muted, rgba(20, 20, 15, 0.5));
}
.lead-fine a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lead-fine a:hover { color: var(--brand, #DC2626); }

@media (max-width: 480px) {
  /* Beat the 8px/nowrap rule the original .lead-fine sets at this breakpoint. */
  .lead-fine.lead-consent {
    font-size: 11px;
    letter-spacing: 0;
    white-space: normal;
  }
}

/* ---------- /wa-dm — WhatsApp hand-off page ---------- */

:root {
  --wa: #25D366;
  --wa-deep: #1EBE5A;
  --wa-ink: #075E54;
}

/* The main action card holding the message preview + CTA. */
.wa-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 30px 28px 26px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(37, 211, 102, .32);
  box-shadow:
    0 0 0 1px rgba(37, 211, 102, .1),
    0 28px 60px -34px rgba(15, 23, 42, .4);
  text-align: center;
}
.wa-card-head { margin-bottom: 20px; }
.wa-step-chip {
  display: inline-block;
  padding: 5px 13px;
  margin-bottom: 13px;
  border-radius: 999px;
  background: rgba(37, 211, 102, .12);
  border: 1px solid rgba(37, 211, 102, .4);
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #0B7A3B;
}
.wa-card-title {
  margin: 0 0 9px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(19px, 3.4vw, 23px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink, #111827);
}
.wa-card-sub {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft, #475569);
}

/* Preview of the exact message, as a WhatsApp-style bubble. */
.wa-preview { margin: 0 0 22px; text-align: left; }
.wa-preview-label {
  display: block;
  margin-bottom: 7px;
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted, #64748B);
}
.wa-bubble {
  position: relative;
  padding: 13px 15px 9px;
  border-radius: 12px 12px 12px 3px;
  background: #E7FFDB;
  border: 1px solid rgba(37, 211, 102, .28);
}
.wa-bubble p {
  margin: 0 0 5px;
  font-family: "DM Sans", sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: #0F2419;
}
.wa-bubble-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  color: #4A7C5E;
}
.wa-bubble-meta svg { color: #34B7F1; }

/* The button itself. */
.wa-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.wa-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 17px 30px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--wa) 0%, var(--wa-deep) 100%);
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  box-shadow: 0 16px 34px -12px rgba(37, 211, 102, .75);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  animation: wa-pulse 2.6s ease-in-out infinite;
}
.wa-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px -12px rgba(37, 211, 102, .85);
  filter: brightness(1.04);
  color: #fff;
}
.wa-btn:active { transform: translateY(0); }
.wa-btn-icon { width: 23px; height: 23px; flex: none; }

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 16px 34px -12px rgba(37, 211, 102, .75); }
  50%      { box-shadow: 0 16px 44px -10px rgba(37, 211, 102, .95); }
}

.wa-hint {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted, #64748B);
  text-align: center;
}

/* Reassurance ticks under the CTA. */
.wa-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 20px 0 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid rgba(15, 23, 42, .08);
}
.wa-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft, #475569);
}
.wa-trust svg {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: var(--wa-deep); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Compact FAQ (native <details>). */
.wa-faq {
  max-width: 620px;
  margin: 0 auto;
  border-top: 1px solid rgba(15, 23, 42, .1);
}
.wa-faq-item { border-bottom: 1px solid rgba(15, 23, 42, .1); }
.wa-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 2px;
  cursor: pointer;
  list-style: none;
  font-family: "Poppins", sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink, #111827);
  transition: color .2s ease;
}
.wa-faq-item summary::-webkit-details-marker { display: none; }
.wa-faq-item summary::after {
  content: "+";
  flex: none;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  color: var(--wa-deep);
  transition: transform .25s ease;
}
.wa-faq-item[open] summary::after { transform: rotate(45deg); }
.wa-faq-item summary:hover { color: var(--brand, #DC2626); }
.wa-faq-item p {
  margin: 0;
  padding: 0 2px 18px;
  font-family: "DM Sans", sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft, #475569);
}

/* Last-chance CTA at the bottom of the page. */
.wa-tail {
  max-width: 420px;
  margin: 48px auto 0;
  text-align: center;
}
.wa-tail-text {
  margin: 0 0 13px;
  font-family: "DM Sans", sans-serif;
  font-size: 14.5px;
  color: var(--ink-soft, #475569);
}
.wa-btn-ghost {
  background: transparent;
  color: var(--wa-deep);
  border: 1.5px solid rgba(37, 211, 102, .55);
  box-shadow: none;
  animation: none;
  font-size: 15.5px;
  padding: 14px 26px;
}
.wa-btn-ghost:hover {
  background: rgba(37, 211, 102, .08);
  color: var(--wa-deep);
  box-shadow: none;
}

.wa-error {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(220, 38, 38, .07);
  border: 1px solid rgba(220, 38, 38, .3);
  font-family: "DM Sans", sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: #B91C1C;
  text-align: center;
}

@media (max-width: 560px) {
  .wa-card { padding: 26px 18px 22px; border-radius: 15px; }
  .wa-btn { padding: 16px 18px; font-size: 15.5px; }
  .wa-trust { gap: 8px 14px; }
  .wa-faq-item summary { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-btn { animation: none; }
  .wa-faq-item summary::after { transition: none; }
}

/* ---------- Credential pills as a standalone row on inner pages ----------
   The compact-hero block sets `margin-top: 10px !important` on
   .hero-cred-pills (and `0 !important` above 1000px) for the landing hero.
   Those selectors are unscoped, so they leak onto every inner page that reuses
   the class and leave the pills jammed against whatever sits above them. This
   modifier needs both !important and higher specificity to win. */
.hero-cred-pills.cred-row-standalone {
  margin-top: 46px !important;
  padding-top: 30px;
  border-top: 1px solid rgba(15, 23, 42, .09);
  gap: 10px;
}
@media (max-width: 560px) {
  .hero-cred-pills.cred-row-standalone { margin-top: 34px !important; padding-top: 24px; }
}

/* ---------- "Can't find a time?" fallback card (/book-a-call) ---------- */
.slot-help {
  /* No max-width: .cal-frame above it is width:100% of .wrap.narrow, so this
     matches the calendar edge-for-edge. Type is scaled up to suit the width. */
  width: 100%;
  margin: 44px auto 0;
  padding: 40px 38px 34px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .1);
  box-shadow: 0 24px 56px -34px rgba(15, 23, 42, .32);
  text-align: center;
}
.slot-help-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 11px;
  margin-bottom: 15px;
  border-radius: 999px;
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .32);
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brand-deep, #B91C1C);
}
.slot-help-eyebrow .dot {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%;
  background: #DC2626;
  box-shadow: 0 0 8px #DC2626;
  flex-shrink: 0;
}
.slot-help-eyebrow .dot::before {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%; background: #DC2626;
  opacity: .4; animation: dot-pulse 2s ease-out infinite;
}
.slot-help-title {
  margin: 0 0 12px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: clamp(25px, 3.6vw, 36px);
  line-height: 1.18;
  letter-spacing: -.02em;
  color: var(--ink, #111827);
}
.slot-help-title .accent { color: var(--brand, #DC2626); }
.slot-help-body {
  max-width: 660px;
  margin: 0 auto 26px;
  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft, #475569);
}
.slot-help-body strong { color: var(--ink, #111827); font-weight: 600; }

.slot-help-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.slot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 34px;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.slot-btn svg { width: 21px; height: 21px; flex: none; }
.slot-btn-wa {
  background: linear-gradient(180deg, #25D366 0%, #1EBE5A 100%);
  color: #ffffff;
  box-shadow: 0 14px 30px -12px rgba(37, 211, 102, .7);
}
.slot-btn-wa:hover {
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 18px 38px -12px rgba(37, 211, 102, .82);
}
.slot-btn-mail {
  background: #ffffff;
  color: var(--ink, #111827);
  border: 1.5px solid rgba(15, 23, 42, .16);
}
.slot-btn-mail:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 23, 42, .3);
  color: var(--ink, #111827);
}

.slot-help-contacts {
  margin: 22px 0 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 13.5px;
  letter-spacing: .04em;
  color: var(--muted, #64748B);
}
.slot-help-contacts a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.slot-help-contacts a:hover { color: var(--brand, #DC2626); }
.slot-help-sep { margin: 0 8px; opacity: .5; }

@media (max-width: 720px) {
  /* Scale the desktop-width type back down once the card is phone-width. */
  .slot-help { padding: 30px 20px 26px; border-radius: 15px; margin-top: 34px; }
  .slot-help-body { font-size: 15.5px; margin-bottom: 22px; }
  .slot-btn { padding: 16px 22px; font-size: 15.5px; }
  .slot-help-eyebrow { font-size: 9.5px; }
}
@media (max-width: 560px) {
  .slot-help-actions { flex-direction: column; gap: 12px; }
  .slot-btn { width: 100%; }
  .slot-help-contacts { font-size: 11.5px; line-height: 1.9; }
  .slot-help-sep { display: block; height: 0; overflow: hidden; margin: 0; }
}