/* ==========================================================================
   VSL Funnel
   Shared stylesheet for: free training / pre-call
   Theme: near-black + sand gold, matched to zakicoaching.com
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Core palette — near-black ground, warm greys, sand gold accent.
     Values sampled from zakicoaching.com so the funnel and the main site
     read as one brand. */
  --bg:           #0A0A0A;
  --bg-alt:       #0F0E0E;
  --surface:      #1C1A19;
  --surface-2:    #232120;
  --line:         #2A2724;
  --line-strong:  #3A362F;

  --ink:          #FFFFFF;
  --text:         #FAFAFA;
  --text-dim:     #B5B1AC;
  --text-dimmer:  #9B9894;

  /* Accent ramp: the brand gold. Swap these to recolour the whole site.
     On a near-black ground the contrast logic runs the opposite way to the
     old white theme — the LIGHTER golds are the readable ones:

       --accent      #DBB879, the reference site's gold. 10.3:1 on --bg,
                     so it is safe for body-size text and eyebrow labels.
       --accent-400  lighter still, for rules, bars and icon fills.
       --accent-600  the deeper tone. Button fills only, with near-black
                     text on top — never light text on this. */
  --accent-100:   #2A2318;
  --accent-300:   #EBD3A4;
  --accent-400:   #E4C88F;
  --accent:       #DBB879;
  --accent-600:   #C9A461;
  --accent-deep:  #A8853F;
  --accent-glow:  rgba(219, 184, 121, 0.28);

  /* Same colours as bare rgb, because rgba() cannot take a hex token. */
  --accent-400-rgb:  228, 200, 143;
  --accent-rgb:      219, 184, 121;
  --accent-600-rgb:  201, 164, 97;
  --accent-deep-rgb: 168, 133, 63;

  /* Ink as rgb, for the translucent borders and shades below. Stays black
     on the dark theme: shadows are still shadows. */
  --ink-rgb:         0, 0, 0;

  /* Text that sits ON a gold fill (buttons, chips). Near-black, not white. */
  --on-accent:    #0A0A0A;

  --danger:       #DC2626;

  /* Type — serif throughout, by request. Two faces, both serif:
     Instrument Serif for display (it only ships one weight, so it is no use
     for body copy where bold is needed), and Newsreader for everything you
     read — a text serif with real 400/500/600/700 weights, so <strong> is a
     genuine bold rather than the browser smearing a fake one. */
  --font-sans:    "Newsreader", Georgia, "Times New Roman", serif;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-script:  var(--font-display);

  /* Layout */
  --wrap:        1140px;
  --radius-sm:   10px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(var(--ink-rgb), 0.04),
                 0 14px 34px -22px rgba(var(--ink-rgb), 0.20);
  --shadow-glow: 0 0 0 1px rgba(var(--accent-600-rgb), 0.16),
                 0 18px 40px -24px rgba(var(--accent-600-rgb), 0.32);
  --shadow-btn:  0 12px 18px -8px rgba(var(--accent-600-rgb), 0.45);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Stops anchor targets landing underneath the sticky header. */
  scroll-padding-top: 116px;
}

/* Keeps a rubber-band scroll at the top or bottom from dragging the page
   behind it, which is what makes mobile scrolling feel loose. */
body {
  overscroll-behavior-y: none;
}

/* Sections fade up as they come into view. Added by initReveal() only when
   IntersectionObserver exists and the visitor has not asked for reduced
   motion, so nothing can end up stuck invisible. */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  /* Large by design: this page is read on a phone, at arm's length, by
     someone half paying attention. Small type is the enemy of that. */
  font-size: 21px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* height:auto stops the HTML width/height attributes (which browsers apply as
   presentational hints) from beating a CSS aspect-ratio and stretching an
   image. The attributes stay on the markup so the layout still reserves the
   right box before the file loads. */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

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

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  /* Stops a single word dropping alone onto the last line of a headline. */
  text-wrap: balance;
}

p, li { text-wrap: pretty; }

/* The big headlines. Instrument Serif is already high contrast, so it wants
   normal weight and far less negative tracking than the grotesque did —
   tightening a serif this much just jams the serifs together. */
.hero h1,
.section-head h2,
.confirm-card h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.012em;
}

/* Short centred rule under a headline. */
.rule {
  width: 72px;
  height: 4px;
  margin: clamp(24px, 3.2vw, 34px) auto 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent-400), var(--accent-600));
}

/* Accent word in a headline. */
.script {
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--accent);
}

p { margin: 0; }

::selection { background: var(--accent); color: var(--on-accent); }

/* A wash of gold behind the top of the page. On the dark ground this can
   carry more weight than it could on white without reading as a smudge. */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 640px at 50% -14%, rgba(var(--accent-rgb), 0.09), transparent 66%);
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

/* The VSL row needs more than the 1140px text measure, because the photo
   flanks sit either side of an 880px video and would otherwise be squeezed
   into roughly 80px each. */
.wrap--wide { max-width: 1360px; }

section { position: relative; z-index: 1; }

.section { padding-block: clamp(52px, 7vw, 92px); }

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(28px, 4vw, 44px);
}

.section-head h2 { font-size: clamp(34px, 5vw, 52px); }

.section-head p {
  margin-top: 14px;
  color: var(--text-dim);
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.55;
}

.center { text-align: center; }

.divider {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}

/* Gold as headline text, clipped from a gradient the way the reference
   site does it. On the near-black ground the ramp runs the other way to the
   old white theme: both stops are LIGHT golds, which clear 3:1 on --bg
   comfortably. Older engines that ignore background-clip fall back to the
   flat colour below. */
.grad {
  color: var(--accent);
  background: linear-gradient(90deg, var(--accent-300) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --------------------------------------------------------------------------
   4. Nav

   A floating bar rather than a full-width header: it sits inset from the top
   with the page scrolling underneath it, which is the shape the reference
   site uses. Sticky, not fixed, so it takes part in normal flow and cannot
   overlap the hero on short viewports.
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-block: 14px;
}

.site-nav__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 9px 9px 9px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(20, 19, 18, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-card);
}

.wordmark {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* auto margins centre the links against the bar itself, so the block stays
   optically centred whatever the wordmark and button happen to measure. */
.nav-links {
  display: flex;
  gap: clamp(18px, 2.4vw, 32px);
  margin-inline: auto;
}

.nav-links a {
  color: var(--text-dim);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.16s var(--ease);
}

.nav-links a:hover { color: var(--ink); }

.nav-links a:focus-visible {
  outline: 2px solid var(--accent-600);
  outline-offset: 4px;
  border-radius: 3px;
}

/* Below this the four links no longer fit beside the wordmark and button.
   They are dropped rather than folded into a menu: every one of them is a
   same-page anchor that scrolling reaches anyway, so a hamburger would add
   a state to maintain and break for no navigational gain. */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .site-nav__bar { justify-content: space-between; padding-left: 18px; }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background 0.18s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  background: var(--accent-deep);
  box-shadow: 0 18px 26px -10px rgba(var(--accent-600-rgb), 0.5);
}

.btn:active { transform: translateY(0); }

.btn:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 3px; }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--block { display: flex; width: 100%; }
.btn--lg    { padding: 20px 42px; font-size: 15px; }
.btn--sm    { padding: 12px 24px; font-size: 13px; }

.btn--ghost {
  background: transparent;
  border: 2px solid var(--accent-600);
  box-shadow: none;
  color: var(--accent-600);
}

.btn--ghost:hover {
  background: rgba(var(--accent-600-rgb), 0.08);
  border-color: var(--accent-deep);
  color: var(--accent-deep);
}

.btn-note {
  margin-top: 13px;
  font-size: 13.5px;
  color: var(--text-dimmer);
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding-top: clamp(40px, 6vw, 68px);
  padding-bottom: clamp(28px, 4vw, 44px);
  text-align: center;
}

.hero h1 {
  margin-inline: auto;
  max-width: 26ch;
  font-size: clamp(32px, 5vw, 58px);
}

.hero__sub {
  margin: 22px auto 0;
  max-width: 40ch;
  color: var(--text-dim);
  font-size: clamp(20px, 2.6vw, 25px);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-card);
}

.card--pad { padding: clamp(24px, 3.4vw, 40px); }

.card--accent {
  border-color: rgba(var(--accent-600-rgb), 0.22);
  box-shadow: var(--shadow-glow), var(--shadow-card);
}

.card__title { font-size: clamp(21px, 2.6vw, 27px); }

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.form-card {
  max-width: 480px;
  margin-inline: auto;
  scroll-margin-top: 96px;
}

.field { margin-bottom: 12px; }

.input {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 16px; /* 16px prevents iOS zoom on focus */
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease),
              background 0.16s var(--ease);
}

.input::placeholder { color: var(--text-dimmer); }

.input:focus {
  outline: none;
  border-color: var(--accent-600);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(var(--accent-600-rgb), 0.18);
}

.input[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

/* Country <select> — native dropdown, custom chevron */
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2364748B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

/* The dropdown list itself renders in the OS theme, so force readable colours */
select.input option { background: var(--surface); color: var(--text); }

/* Dial-code prefix + number, joined into one control */
.phone-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease),
              background 0.16s var(--ease);
}

.phone-row:focus-within {
  border-color: var(--accent-600);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(var(--accent-600-rgb), 0.18);
}

.phone-row.is-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

.phone-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px 0 16px;
  border-right: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  user-select: none;
}

.phone-row .input {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.phone-row .input:focus { box-shadow: none; background: transparent; }

.field__error {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  color: var(--danger);
}

.field__error.is-shown { display: block; }

.form-legal {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dimmer);
  text-align: center;
}

.form-legal a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   9. VSL slot
   -------------------------------------------------------------------------- */
.vsl {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  border: 0;
  border-radius: var(--radius);
  background: #000;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(var(--ink-rgb), 0.25);
}

.vsl::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9 */
}

/* Third-party players (Vidalytics) ship their own 16:9 spacer on the embed
   div, so this variant drops ours. Without it the box comes out double
   height with a black band underneath the video. The frame, radius, glow
   and clipping all still apply. */
.vsl--embed::before { content: none; }

.vsl > iframe,
.vsl > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Opt-in page: video and form side by side. The form column is given a
   floor so it never squeezes the phone row, and the video takes the slack. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

/* Both children are centred, width-capped blocks on their own. Inside the
   grid they should fill their column instead. */
.split > .vsl,
.split > .form-card {
  max-width: none;
  margin-inline: 0;
}

/* Stack before the form column would start crushing. */
@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .split > .form-card { max-width: 520px; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   10. Confirmation steps (pre-call page)
   -------------------------------------------------------------------------- */
.confirm-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  max-width: 1000px;
  margin-inline: auto;
}

.confirm-card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.2vw, 40px);
  text-align: center;
  transition: border-color 0.25s var(--ease);
}

.confirm-card__icon {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(var(--accent-600-rgb), 0.24);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-600-rgb), 0.05));
  color: var(--accent-600);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
              background 0.25s var(--ease);
}

.confirm-card h2 {
  font-size: clamp(22px, 2.7vw, 29px);
}

.confirm-card__body {
  margin-top: 12px;
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.6;
}

.confirm-card__body strong { color: var(--ink); font-weight: 600; }

.confirm-card__quote {
  display: block;
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(var(--accent-600-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--accent-600);
  font-size: 14.5px;
  font-weight: 600;
}

/* The "do this now" instruction line above the logo buttons */
.confirm-card__label {
  margin-top: 24px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-600);
}

.confirm-card__note {
  margin-top: auto;
  padding-top: 18px;
  font-size: 13px;
  color: var(--text-dimmer);
}

/* Booked time pill */
.when {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-600-rgb), 0.30);
  background: rgba(var(--accent-rgb), 0.09);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.when svg { color: var(--accent-600); flex-shrink: 0; }

/* --- Brand logo buttons (Gmail / Google Calendar / …) -------------------- */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: 10px;
}

.brand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease),
              transform 0.16s var(--ease);
}

.brand-btn:hover {
  border-color: rgba(var(--accent-600-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.10);
  transform: translateY(-2px);
}

.brand-btn:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }

.brand-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Full-width primary variant for the single most likely action */
.brand-btn--wide { grid-column: 1 / -1; }

/* --- Completed state ----------------------------------------------------- */
.confirm-card.is-done { border-color: rgba(52, 211, 153, 0.45); }

.confirm-card.is-done .confirm-card__icon {
  color: #34D399;
  border-color: rgba(52, 211, 153, 0.4);
  background: linear-gradient(180deg, rgba(52, 211, 153, 0.18), rgba(52, 211, 153, 0.04));
}

.confirm-done {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: #34D399;
}

.confirm-card.is-done .confirm-done { display: flex; }

/* --------------------------------------------------------------------------
   11. Resource grid (YouTube)
   -------------------------------------------------------------------------- */
.grid-3 {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}

.resource {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.resource:hover { transform: translateY(-3px); border-color: rgba(var(--accent-600-rgb), 0.35); }

.resource__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    radial-gradient(360px 200px at 50% 50%, rgba(var(--accent-400-rgb), 0.26), transparent 70%),
    linear-gradient(160deg, #1a1610, #0b0906);
  border-bottom: 1px solid var(--line);
}

.resource__play {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(var(--accent-600-rgb), 0.95);
  box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0.18);
}

.resource__play svg { margin-left: 3px; }

.resource__body { padding: 20px 22px 24px; }

.resource__title { font-size: 17.5px; }

.resource__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-600);
}

.resource:hover .resource__link { color: var(--ink); }

/* --------------------------------------------------------------------------
   11a. VSL stage: photo flanks either side of the video

   The flanks are empty until photos exist. They collapse rather than reserve
   dead space, and they are decorative, so they are dropped entirely below the
   width where they would crowd the video.
   -------------------------------------------------------------------------- */
.vsl-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 880px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
}

.vsl-stage > .vsl {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.vsl-flank {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vw, 18px);
}

/* Empty flanks deliberately keep their grid tracks. Collapsing them with
   :empty{display:none} drops the video into column 1 and knocks it off centre,
   which is exactly what happens while no photos exist. */
.vsl-flank--left  { align-items: flex-end; }
.vsl-flank--right { align-items: flex-start; }

/* Polaroid: white frame, deep bottom lip, slight tilt. Tilts alternate so a
   stack never looks like a straight column. */
.polaroid {
  width: clamp(120px, 13vw, 190px);
  padding: 9px 9px 30px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 16px 32px -18px rgba(var(--ink-rgb), 0.4);
  transform: rotate(-5deg);
  transition: transform 0.25s var(--ease);
}

.polaroid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.polaroid:nth-child(even) { transform: rotate(6deg); }
.polaroid:nth-child(3n)   { transform: rotate(-2deg); }
.polaroid:hover           { transform: rotate(0deg) scale(1.03); }

@media (max-width: 1180px) {
  .vsl-flank { display: none; }
  .vsl-stage { grid-template-columns: minmax(0, 1fr); }
  .vsl-stage > .vsl { max-width: 880px; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   11b. Long-form content: lede, steps, media split, pull quote, qualifier
   -------------------------------------------------------------------------- */

/* Centred run of body copy under a section heading. */
.lede {
  max-width: 780px;
  margin: 0 auto clamp(30px, 4vw, 46px);
  text-align: center;
}

.lede p {
  color: var(--text-dim);
  font-size: clamp(20px, 2.7vw, 26px);
  line-height: 1.55;
}

.lede p + p { margin-top: 22px; }

.lede strong { color: var(--ink); font-weight: 600; }

/* Left-aligned prose, for the About story. */
.prose p {
  color: var(--text-dim);
  font-size: clamp(18px, 2.1vw, 20px);
  line-height: 1.72;
}

.prose p + p { margin-top: 15px; }

.prose strong { color: var(--ink); font-weight: 600; }

/* Subheads and lists, used by the legal pages. */
.prose h3 {
  margin-top: 34px;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.prose h3:first-child { margin-top: 0; }

.prose ul {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.72;
}

.prose li + li { margin-top: 8px; }

.prose li::marker { color: var(--accent); }

/* --- Numbered steps ------------------------------------------------------
   Deliberately a vertical numbered list rather than a grid: the order of
   these five is load-bearing copy, and a wrapping grid reads as an unordered
   set of options. */
.steps {
  max-width: 820px;
  margin-inline: auto;
  display: grid;
  gap: 14px;
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 24px);
  padding: clamp(22px, 2.8vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.step:hover {
  border-color: rgba(var(--accent-600-rgb), 0.3);
  transform: translateY(-2px);
}

.step__n {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-600-rgb), 0.26);
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent-600);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.step__title {
  font-size: clamp(18px, 2.2vw, 23px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.step__body {
  margin-top: 10px;
  color: var(--text-dim);
  font-size: clamp(18px, 2.1vw, 20px);
  line-height: 1.66;
}

.steps__note {
  max-width: 700px;
  margin: clamp(24px, 3vw, 34px) auto 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
}

.steps__note strong { color: var(--ink); font-weight: 600; }

/* --- Image beside copy ---------------------------------------------------
   The image column is simply absent from the markup until a photo exists,
   and the grid collapses to the single text column on its own. */
.media-split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  max-width: 1000px;
  margin-inline: auto;
}

.media-split--solo { grid-template-columns: minmax(0, 1fr); max-width: 720px; }

.media-split__img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 860px) {
  .media-split { grid-template-columns: minmax(0, 1fr); }
  .media-split__img { aspect-ratio: 3 / 2; max-width: 460px; margin-inline: auto; }
}

/* --- Pull quote ----------------------------------------------------------
   Selector is doubled up because `.prose p` is class+type and would otherwise
   out-specify a bare `.pull-quote`, dropping the quote back to body size. */
.pull-quote,
.prose p.pull-quote {
  margin-top: 26px;
  padding: 18px 24px;
  border-left: 3px solid var(--accent-400);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--accent-600);
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* --- Infographics --------------------------------------------------------
   Built from markup rather than image files so they stay sharp, translate,
   and follow the theme tokens. Nothing here loads an asset. */
.ig {
  max-width: 820px;
  margin: clamp(28px, 4vw, 44px) auto 0;
}

/* The two second window: a bar split by how the time actually divides, so the
   proportion carries the argument rather than the label doing all the work. */
.ig__bar {
  display: grid;
  grid-template-columns: 22fr 78fr;
  gap: 6px;
  height: 66px;
}

.ig__seg {
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: var(--radius);
  text-align: center;
  font-size: clamp(12px, 1.5vw, 14.5px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.ig__seg--win {
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
  color: var(--on-accent);
}

.ig__seg--rest {
  background: rgba(var(--ink-rgb), 0.05);
  border: 1px dashed var(--line-strong);
  color: var(--text-dim);
}

.ig__legend {
  display: grid;
  grid-template-columns: 22fr 78fr;
  gap: 6px;
  margin-top: 12px;
}

.ig__legend p {
  padding: 0 4px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
}

.ig__legend strong { color: var(--ink); font-weight: 700; }

@media (max-width: 620px) {
  .ig__bar { grid-template-columns: 1fr; height: auto; }
  .ig__seg { padding: 14px; }
  .ig__legend { grid-template-columns: 1fr; gap: 10px; }
}

/* Comparison: what one lever at a time actually produced. */
.ig--tries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.ig__col {
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.ig__col--win {
  border-color: rgba(var(--accent-600-rgb), 0.3);
  background: rgba(var(--accent-rgb), 0.05);
}

.ig__col h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dimmer);
}

.ig__col--win h3 { color: var(--accent-600); }

.ig__col ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }

.ig__lever {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
}

.ig__out {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

.ig__col--win p {
  margin-top: 16px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-dim);
}

.ig__col--win strong { color: var(--ink); font-weight: 600; }

/* Repeated end-of-section call to action. */
.section-cta { margin-top: clamp(30px, 4vw, 44px); text-align: center; }

/* --- Who this is and isn't for ------------------------------------------- */
.qualifier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  max-width: 980px;
  margin: clamp(28px, 4vw, 44px) auto 0;
}

.qual {
  padding: clamp(22px, 2.8vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.qual--yes {
  border-color: rgba(var(--accent-600-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.05);
}

.qual__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(19px, 2.3vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.qual__head svg { flex-shrink: 0; }
.qual--yes .qual__head svg { color: var(--accent-600); }
.qual--no  .qual__head svg { color: var(--text-dimmer); }

.qual ul {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

.qual li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  color: var(--text-dim);
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.55;
}

.qual li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--accent-400);
}

.qual--no li::before { background: var(--line-strong); }

/* --- Hero byline strip ---------------------------------------------------
   Only rendered once a headshot exists; without one it says nothing the
   subheadline has not already said. */
.hero-by {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.hero-by img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(var(--accent-600-rgb), 0.3);
}

.hero-by span {
  color: var(--text-dim);
  font-size: 14.5px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   12. FAQ accordion
   -------------------------------------------------------------------------- */
.faq {
  max-width: 780px;
  margin-inline: auto;
  display: grid;
  gap: 0;
}

/* Open rows rather than boxed cards: a hairline between each question and a
   chevron on the right, which is the shape of the reference. The first row
   gets a rule above it so the list reads as a table, not a stack. */
.faq__item {
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s var(--ease);
}

.faq__item:first-child { border-top: 1px solid var(--line); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 26px 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: clamp(18px, 2.3vw, 22px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.faq__q:hover { color: var(--accent); }
.faq__q:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Chevron drawn from two half rules so it needs no icon font. */
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform 0.3s var(--ease);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 11px;
  height: 1.8px;
  border-radius: 2px;
  background: var(--text-dim);
  transition: background 0.2s var(--ease);
}

.faq__icon::before { left: 0;  transform: rotate(45deg); }
.faq__icon::after  { right: 0; transform: rotate(-45deg); }

.faq__q:hover .faq__icon::before,
.faq__q:hover .faq__icon::after { background: var(--accent); }

.faq__item.is-open .faq__icon { transform: rotate(180deg); }

.faq__item.is-open .faq__icon::before,
.faq__item.is-open .faq__icon::after { background: var(--accent); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--ease);
}

.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

.faq__a > div { overflow: hidden; }

.faq__a p {
  padding: 0 44px 28px 4px;
  color: var(--text-dim);
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.68;
}

/* --------------------------------------------------------------------------
   13. Quiz (free training page)
   -------------------------------------------------------------------------- */
.quiz {
  max-width: 700px;
  margin-inline: auto;
  scroll-margin-top: 96px;
}

.quiz__progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.quiz__bar {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--ink-rgb), 0.10);
  overflow: hidden;
}

.quiz__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-600), var(--accent-400));
  transition: width 0.4s var(--ease);
}

.quiz__count {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.step-panel { display: none; }
.step-panel.is-active { display: block; animation: fade-up 0.35s var(--ease); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.quiz__q { font-size: clamp(20px, 2.8vw, 27px); }

.quiz__hint {
  margin-top: 9px;
  color: var(--text-dim);
  font-size: 15px;
}

.options {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 15.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease),
              transform 0.16s var(--ease);
}

.option:hover {
  border-color: rgba(var(--accent-600-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.07);
  transform: translateX(3px);
}

.option:focus-visible { outline: 2px solid var(--accent-600); outline-offset: 2px; }

.option.is-selected { border-color: var(--accent-600); background: rgba(var(--accent-rgb), 0.13); }

.option__key {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(var(--ink-rgb), 0.04);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
}

.option.is-selected .option__key {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.quiz__nav { margin-top: 20px; }

.link-back {
  background: none;
  border: 0;
  padding: 8px 2px;
  color: var(--text-dimmer);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.link-back:hover { color: var(--text); }

/* Calendly reveal + disqualified states */
.reveal { display: none; }
.reveal.is-shown { display: block; animation: fade-up 0.4s var(--ease); }

/* height, not min-height, and that distinction matters. Calendly's iframe is
   sized height="100%", and a percentage height only resolves against a parent
   whose `height` is definite. With min-height alone the parent computes to
   `auto`, the percentage is dropped, and the iframe falls back to the 150px
   default, which renders as a sliver showing the month header and no days.
   Calendly's own snippet hard-codes height:700px for the same reason. */
.calendly-slot {
  height: 760px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2); /* shows only until the iframe paints */
  overflow: hidden;
}

.calendly-slot iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.notice {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--accent-600-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.07);
  font-size: 15px;
  color: var(--accent-600);
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  padding-block: 36px 44px;
  margin-top: 16px;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  font-size: 14px;
  color: var(--text-dim);
}

.footer-links a:hover { color: var(--ink); }

.footer-copy {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dimmer);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   14b. Eyebrow labels, skip link, sequence infographic
   -------------------------------------------------------------------------- */

/* Small gold label above a section headline. The main site opens every
   section with one of these, and it is most of what makes the two pages
   read as the same brand. */
.eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero .eyebrow { margin-bottom: 18px; }

/* Keyboard users get past the nav without tabbing every link. Visible only
   while focused, which is the one time it is needed. */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: 12px 24px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 600;
  transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: 2px solid var(--accent-300);
  outline-offset: 2px;
}

/* --- Call cards ---------------------------------------------------------
   A photo of Zaki at the top of each card instead of a diagram, so the
   section reads as a person you are booking a call with. */
.callcard { padding-block: clamp(28px, 3.4vw, 38px); }

.callcard__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 50% 30%;
  /* Generous, because a display serif heading needs more air above it than
     a grotesque does. */
  margin-bottom: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.callcard .step__title { margin-bottom: 14px; }

/* The 1) 2) 3) marker. */
.callcard__n {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* --- Stat band ----------------------------------------------------------
   Four numbers in a row under the hero. */
.statband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: 900px;
  margin: clamp(30px, 4vw, 48px) auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
  overflow: hidden;
}

.statband__cell {
  padding: 22px 16px;
  background: var(--surface);
  text-align: center;
}

.statband__n {
  display: block;
  color: var(--accent);
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.statband__label {
  display: block;
  margin-top: 6px;
  color: var(--text-dimmer);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .statband { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Still large on a phone: this is where most of the traffic reads it. */
  body { font-size: 19px; }

  .site-header__inner { min-height: 62px; }
  .logo img { height: 32px; }
  .logo__text { font-size: 12px; letter-spacing: 0.16em; }

  .hero h1 { max-width: 100%; letter-spacing: -0.02em; }
  .btn { padding: 16px 26px; }
  .btn--lg { padding: 18px 30px; font-size: 14px; }

  /* The .btn rule above is later in the file than .btn--sm and shares its
     specificity, so without this the nav's small button inflates and crowds
     the wordmark out of the bar. */
  .site-nav__bar .btn--sm { padding: 13px 18px; font-size: 12px; }
  .site-nav { padding-block: 10px; }
  .site-nav__bar { padding: 7px 7px 7px 16px; }
  .wordmark { font-size: 16px; letter-spacing: 0.16em; }

  .confirm-card__icon { width: 66px; height: 66px; border-radius: 20px; }
  .brand-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

  .calendly-slot { height: 1040px; }
}

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

/* --------------------------------------------------------------------------
   17. Story timeline (about section)
   -------------------------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  max-width: 1000px;
  margin-inline: auto;
}

/* The portrait follows you down the story rather than scrolling away at the
   top of a very long column. */
.story__aside { position: sticky; top: 116px; }

.story__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}

.story__pull {
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  border-radius: var(--radius);
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 26px;
  text-align: center;
}

.story__beats {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The spine, plus a node per beat. */
.story__beat {
  position: relative;
  padding-left: 32px;
  padding-bottom: 40px;
  border-left: 1px solid var(--line);
}

.story__beat:last-child { border-left-color: transparent; padding-bottom: 0; }

.story__beat::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.story__age {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.story__title {
  margin-bottom: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.story__beat p {
  color: var(--text-dim);
  font-size: clamp(18px, 2.1vw, 20px);
  line-height: 1.72;
}

.story__beat p + p { margin-top: 12px; }
.story__beat strong { color: var(--ink); font-weight: 600; }

.story__close {
  max-width: 760px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  color: var(--text);
  font-size: clamp(20px, 2.6vw, 25px);
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 860px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__aside {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
    align-items: center;
    gap: 20px;
  }
  .story__pull { margin-top: 0; font-size: 22px; }
}

@media (max-width: 520px) {
  .story__aside { grid-template-columns: minmax(0, 1fr); }
  .story__pull { margin-top: 16px; }
}

/* Evidence photo inside a step. Sits to the right of the copy on desktop and
   drops under it on narrow screens. */
.step__photo {
  width: 168px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin-top: 16px;
}

@media (min-width: 861px) {
  .step:has(.step__photo) > div:last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px;
    grid-template-areas: "title photo" "body photo";
    grid-template-rows: auto 1fr;
    column-gap: 28px;
    row-gap: 8px;
    align-items: start;
  }
  .step:has(.step__photo) .step__title { grid-area: title; }
  .step:has(.step__photo) .step__body  { grid-area: body; }
  .step:has(.step__photo) .step__photo { grid-area: photo; margin-top: 0; }
}

/* Callback panel copy — one message, set large, nothing else competing. */
.callback__copy {
  max-width: 30ch;
  margin: 22px auto 0;
  color: var(--text);
  font-size: clamp(21px, 2.8vw, 27px);
  line-height: 1.5;
  text-align: center;
}

.callback__copy strong { color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   16. Watch-before-the-call video grid
   -------------------------------------------------------------------------- */
.vidgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.6vw, 30px);
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.vid { min-width: 0; }

.vid__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.vid__btn:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  transform: translateY(-2px);
}

.vid__btn:active { transform: translateY(0) scale(0.995); }
.vid__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.vid__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s var(--ease);
}

.vid__btn:hover .vid__thumb { opacity: 0.82; }

.vid__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding-left: 3px; /* optical centring of the triangle */
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.8);
  transition: transform 0.25s var(--ease);
}

.vid__btn:hover .vid__play { transform: translate(-50%, -50%) scale(1.06); }

/* The injected player replaces the button, so it inherits the same box. */
.vid__frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.vid__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.vid__title {
  margin-top: 14px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 22px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .vid__btn, .vid__thumb, .vid__play { transition: none; }
}