/* Poppins, self-hosted. Latin subset only (the page is English), five weights,
   ~8 kB each. font-display:swap so text paints immediately in the fallback and
   reflows once the file lands — never an invisible heading.
   To refresh: re-download the latin @font-face srcs from Google Fonts. */
@font-face { font-family: Poppins; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/poppins-700.woff2") format("woff2"); }

/* ============================================================================
   SIEVAX ACADEMY · Stylesheet
   ----------------------------------------------------------------------------
   Production stylesheet. Black/yellow dominant — deliberately the inverse of
   the light sievax.be, so the academy reads as its own thing.

   THE IDEA — "the strategist's blackboard"
   The brand language is Jan's whiteboard: yellow highlighter, black marker.
   Inverted, that becomes a blackboard: the board is near-black, YELLOW is the
   marker (highlighter, arrows, discs, key surfaces), and WHITE is reserved
   almost entirely for the hand-drawn sketches, which stay on paper. Little
   white by design — white is what's pinned to the board, not the board.

   COLOR ROLES (why there are two "dark" tokens and two "light" ones)
     --board      page background, near-black
     --surface    raised panels — lifts off the board without a shadow
     --fg         primary text on board/surface
     --on-yellow  text on yellow surfaces — stays black, never flips
     --paper      true white. Sketch frames and form inputs ONLY.

   Paired page    : index.html
   Shared scripts : js/main.js  (mobile nav toggle + lead-form submit + video)

   CONTENTS  (search the label to jump)
     Design tokens · Reset & base · Layout · Accessibility · Text helpers ·
     Buttons · Section heads · NAV · HERO · GAP · AUDIENCE · OUTCOMES ·
     PROGRAM · TRAINER · VIDEO · TESTIMONIALS · CONVERSION · FAQ · FINAL ·
     FOOTER · Mobile sticky CTA · RESPONSIVE
   ============================================================================ */

:root {
  /* brand — locked by the Sievax brand guide */
  --yellow: #fee447;
  --yd: #ffef8a; /* yellow hover: brightens on dark (was darkened on light) */

  /* surfaces */
  --board: #0b0b0b; /* the blackboard */
  --surface: #171716; /* raised panel, lifts without a shadow */
  --surface-2: #1f1f1d; /* second lift — inputs on dark, hover states */
  --paper: #ffffff; /* sketches + form fields ONLY */

  /* text */
  --fg: #f7f6f2; /* chalk */
  --muted: rgba(247, 246, 242, 0.7); /* secondary text — 11:1 on --board */
  --faint: rgba(247, 246, 242, 0.55); /* labels only, never body copy */
  --on-yellow: #0b0b0b; /* text on yellow — never flips */

  --line: rgba(247, 246, 242, 0.16);
  --line-strong: rgba(247, 246, 242, 0.32);

  --disp: "Poppins", sans-serif; /* mirrors sievax.be */
  --body: "Poppins", sans-serif;

  /* no shadow tokens: depth comes from surface lift + hairlines, never shadow */
  --radius: 22px;

  /* connector arrows (roadmap) — yellow, i.e. drawn in marker on the board */
  --arrR: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2052%2024'%3E%3Cpath%20d='M2,12%20L44,12%20M37,6%20L46,12%20L37,18'%20stroke='%23FEE447'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrL: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2052%2024'%3E%3Cpath%20d='M50,12%20L8,12%20M15,6%20L6,12%20L15,18'%20stroke='%23FEE447'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrD: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2052'%3E%3Cpath%20d='M12,2%20L12,44%20M6,37%20L12,46%20L18,37'%20stroke='%23FEE447'%20stroke-width='2'%20fill='none'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  scroll-padding-top: 88px;
  /* tells the UA to render form controls, scrollbars and caret dark */
  color-scheme: dark;
}
body {
  font-family: var(--body);
  color: var(--fg);
  background: var(--board);
  /* light-on-dark reads lighter: a touch more leading than the light theme */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  font-family: var(--disp);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}
::selection {
  background: var(--yellow);
  color: var(--on-yellow);
}
/* yellow-on-yellow selection is invisible: flip it to ink on every yellow surface */
.on-yellow ::selection,
.enroll .stub ::selection,
.aud-yes ::selection,
.stop.cta ::selection,
.early::selection,
.early ::selection,
.form-card ::selection,
.faq-talk-cta ::selection,
.btn-yellow::selection {
  background: var(--on-yellow);
  color: var(--yellow);
}

.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(22px, 4.5vw, 72px);
}
section {
  padding: clamp(60px, 8.5vw, 108px) 0;
  position: relative;
}

/* ── Yellow-drenched sections. Everything inside flips to black ink. ──
   The page default is dark, so these are the exceptions, not `.on-ink`. */
.on-yellow {
  background: var(--yellow);
  color: var(--on-yellow);
}
.on-yellow h2,
.on-yellow h3,
.on-yellow p,
.on-yellow .sec-lead {
  color: var(--on-yellow);
}
.on-yellow .sec-lead {
  opacity: 0.78;
}

/* skip link — visible on keyboard focus */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--yellow);
  color: var(--on-yellow);
  font-family: var(--disp);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.16s;
}
.skip-link:focus {
  top: 14px;
  outline: 3px solid var(--fg);
  outline-offset: 2px;
}
main:focus {
  outline: none;
}

/* focus + motion floor */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 2px;
}
/* on yellow, a yellow ring is invisible — go to ink */
.on-yellow a:focus-visible,
.on-yellow button:focus-visible,
.on-yellow summary:focus-visible,
.form-card a:focus-visible,
.form-card button:focus-visible,
.form-card input:focus-visible,
.form-card textarea:focus-visible {
  outline-color: var(--on-yellow);
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .rise {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* eyebrow — a margin note with a marker tick */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: var(--yellow);
  flex: 0 0 auto;
}
.on-yellow .eyebrow {
  color: var(--on-yellow);
}
.on-yellow .eyebrow::before {
  background: var(--on-yellow);
}
/* eyebrow above a heading gets breathing room */
.sec-head .eyebrow,
.tr-copy .eyebrow,
.gap-grid .eyebrow,
.convert-head .eyebrow {
  margin-bottom: 12px;
}

/* marker underline — the one emphasis treatment, used at every heading size.

   Real text-decoration rather than an absolutely-positioned pseudo-element:
   it wraps correctly across lines (a pseudo can only underline one box, so a
   heading that breaks loses the stroke), it needs no `white-space: nowrap`
   holding the line together, and it scales with the type.
   `skip-ink: none` keeps the stroke unbroken through descenders, the way a
   marker drawn under a word would run straight through the tail of a "g". */
.uline {
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: max(3px, 0.075em); /* floor keeps it visible small */
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: none;
}
.on-yellow .uline {
  text-decoration-color: var(--on-yellow);
}
.ymark {
  color: var(--yellow);
}

/* buttons */
.btn {
  text-decoration: none;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 16px;
  padding: 15px 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition:
    transform 0.16s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.16s,
    color 0.16s,
    border-color 0.16s;
  cursor: pointer;
  border: 1.5px solid transparent;
}
.btn-yellow {
  background: var(--yellow);
  color: var(--on-yellow);
}
.btn-yellow:hover {
  transform: translateY(-2px);
}
/* on a yellow section, the primary button inverts to ink */
.on-yellow .btn-yellow,
.btn-dark {
  background: var(--on-yellow);
  color: var(--fg);
}
.on-yellow .btn-yellow:hover,
.btn-dark:hover {
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  transform: translateY(-2px);
}
.on-yellow .btn-ghost {
  color: var(--on-yellow);
  border-color: rgba(11, 11, 11, 0.4);
}
.on-yellow .btn-ghost:hover {
  transform: translateY(-2px);
}

/* generic section head */
.sec-head h2 {
  font-size: clamp(30px, 4.7vw, 50px);
}
.sec-lead {
  font-size: clamp(16px, 2vw, 17.5px);
  color: var(--muted);
  max-width: 54ch;
  margin-top: 16px;
}

/* NAV */
nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--board);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.nav-inner .logo {
  height: 44px;
  width: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 15px;
  font-weight: 600;
}
.nav-links a:not(.nav-cta) {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.16s;
  display: inline-flex;
  align-items: center;
  padding: 12px 4px;
}
.nav-links a:hover:not(.nav-cta) {
  color: var(--yellow);
}
.nav-cta {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 14px;
  background: var(--yellow);
  color: var(--on-yellow);
  padding: 11px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition:
    transform 0.16s,
    background 0.16s;
}
.nav-cta:hover {
  transform: translateY(-2px);
}
/* hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2.5px;
  background: var(--fg);
  border-radius: 2px;
  margin: 0 auto;
  transition:
    transform 0.2s,
    opacity 0.2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* HERO — the blackboard */
.hero {
  background:
    radial-gradient(
      135% 105% at 88% -25%,
      rgba(254, 228, 71, 0.16),
      transparent 56%
    ),
    var(--board);
  border-bottom: 1px solid var(--line);
}
/* two columns: copy left, enrolment card right. The card stretches to the
   copy's full height, which is what gives it the tall portrait proportion —
   no fixed height to keep in sync with the text. */
.hero-inner {
  padding-top: clamp(46px, 7vw, 78px);
  padding-bottom: clamp(52px, 8vw, 86px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 380px);
  gap: clamp(30px, 4.5vw, 60px);
  align-items: stretch;
}
.hero-copy {
  min-width: 0; /* let the copy column shrink instead of forcing overflow */
  align-self: center;
  /* the h1 sizes off THIS column, not the viewport — otherwise an 8vw
     heading stays huge while the column halves, and the title wraps to
     three lines the moment the card takes its share of the width */
  container-type: inline-size;
}
.hero .kbadge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--surface);
  color: var(--fg);
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 16px;
}
.hero .kbadge .pin {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yellow);
  border: none;
}
.hero h1 {
  font-size: clamp(42px, 9.5cqw, 86px);
  /* a little over the 1.04 a display line would normally take, so the marker
     underline on the second line clears the descenders of the first */
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin-top: 24px;
  max-width: 16ch;
}
.hero .sub {
  font-size: clamp(17px, 2.3vw, 21px);
  color: var(--muted);
  max-width: 52ch;
  margin-top: 26px;
}
.hero .sub b {
  color: var(--fg);
  font-weight: 600;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
  align-items: center;
}
.rise {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.rise.d1 {
  animation-delay: 0.05s;
}
.rise.d2 {
  animation-delay: 0.14s;
}
.rise.d3 {
  animation-delay: 0.23s;
}
.rise.d4 {
  animation-delay: 0.32s;
}
.rise.d5 {
  animation-delay: 0.42s;
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* enrolment card — vertical: yellow stub on top, facts stacked, CTA anchored
   to the bottom edge */
.enroll {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
.enroll .stub {
  background: var(--yellow);
  color: var(--on-yellow);
  padding: 20px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.enroll .stub .k {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}
.enroll .stub .v {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 23px;
  margin-top: 2px;
}
/* facts take the slack, so the card breathes as the copy column grows */
.enroll-facts {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 26px;
}
.enroll-facts > div {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.enroll-facts > div:last-child {
  border-bottom: none;
}
.enroll-facts .lab {
  font-size: 11.5px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.enroll-facts .val {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 19px;
  margin-top: 4px;
}
.enroll-go {
  text-decoration: none;
  background: var(--yellow);
  color: var(--on-yellow);
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  padding: 18px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: transform 0.16s;
}
.enroll-go:hover {
  transform: translateY(-2px);
}

/* GAP */
.gap-grid {
  display: grid;
  /* the sketch carries the argument here, so it gets the larger share —
     the copy column is capped by its own max-widths anyway */
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.gap h2 {
  font-size: clamp(30px, 4.7vw, 50px);
  max-width: 15ch;
}
.gap p {
  font-size: clamp(16px, 2vw, 17.5px);
  color: var(--muted);
  margin-top: 22px;
  max-width: 48ch;
}
/* yellow marker accent (wraps safely — no nowrap) */
.gap-accent {
  background: var(--yellow);
  color: var(--on-yellow);
  font-weight: 600;
  padding: 0 0.12em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Sketch frames — the one place white belongs. The drawings are on paper,
   pinned to the board; boxing them in white is the point, not an oversight.
   The white is also load-bearing: the sketches are transparent PNGs, so
   without it the black linework would sit invisibly on the dark board. */
.gap-img {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  padding: clamp(10px, 1.5vw, 20px);
}
.gap-img img {
  display: block;
  width: 100%;
}
/* mid-page CTA — sized up from the default pill to hold its own under a
   full column of display type. Shared by the gap and audience sections. */
.mid-cta {
  margin-top: 36px;
  padding: 17px 34px;
  font-size: 16.5px;
  align-self: flex-start; /* don't stretch full width inside a flex column */
}
/* .aud-cards already contributes its 22px flex gap, so trim the margin to
   land on the same 36px rhythm as the gap section.
   The CTA and the soft exit share one row: paired with the pill, the fallback
   inherits its visual weight instead of floating alone under it. */
.aud-foot {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px clamp(16px, 2vw, 26px);
}
.aud-foot .mid-cta {
  margin-top: 0;
  flex: none;
}
/* the pill is the loud one; the line beside it stays a link, never a button,
   so the two don't compete for the same click.
   Basis 200px is the floor for a readable two-line wrap — below it the line
   drops under the pill rather than shredding into five words-per-line. */
.aud-foot .aud-alt {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 32ch;
  color: var(--fg);
}
/* squeezed beside the pill the link would otherwise split across two lines,
   which reads as broken rather than wrapped */
.aud-foot .alt-line a {
  white-space: nowrap;
}

/* the soft "not sure?" fallback — muted copy with a marker-yellow link.
   Used under the audience cards and below the application form. */
.alt-line {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 16px;
  color: var(--muted);
}
.alt-line a {
  color: var(--yellow);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 2px solid rgba(254, 228, 71, 0.45);
  padding-bottom: 1px;
  transition: border-color 0.16s;
}
.alt-line a:hover {
  border-color: var(--yellow);
}

/* AUDIENCE — two stacked cards on the left, framed sketch on the right.
   The "yes" card is the yellow one: the affirmative gets the marker. */
.aud-layout {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: stretch;
  margin-top: 40px;
}
.aud-cards {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.aud-cards .aud-card {
  flex: 1; /* both cards grow to fill the sketch's height */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.aud-fig {
  margin: 0;
}
.aud-card {
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 34px);
}
.aud-yes {
  background: var(--yellow);
  color: var(--on-yellow);
  border: none;
}
.aud-yes h3 {
  color: var(--on-yellow);
  font-size: 20px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.aud-yes p {
  color: rgba(11, 11, 11, 0.8);
  font-size: 16.5px;
}
.aud-no {
  background: var(--surface);
  border: 1px solid var(--line);
}
.aud-no h3 {
  font-size: 20px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--muted);
}
.aud-no p {
  color: var(--muted);
  font-size: 16.5px;
}
.tick {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
}

/* OUTCOMES — the yellow drench. The one full-bleed bright beat mid-page. */
.out-list {
  margin-top: clamp(34px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(11, 11, 11, 0.22);
  border: 1px solid rgba(11, 11, 11, 0.22);
  border-radius: 18px;
  overflow: hidden;
}
.out-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: clamp(24px, 2.6vw, 30px) clamp(24px, 2.6vw, 32px);
  background: var(--yellow);
}
.out-item .num {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--on-yellow);
  color: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  margin-top: 1px;
}
.out-item p {
  font-size: 16.5px;
  color: var(--on-yellow);
}
/* an odd last item would leave a hole in the 2-column grid; let it span */
.out-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* PROGRAM — roadmap of cards, snaking L→R then back, joined in marker */
.prog-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.pill {
  font-family: var(--disp);
  font-size: 13.5px;
  font-weight: 700;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 15px;
  background: transparent;
  color: var(--fg);
}
.pill.solid {
  background: var(--yellow);
  color: var(--on-yellow);
  border-color: var(--yellow);
}
.roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px 48px;
  margin-top: 56px;
  position: relative;
}
.stop {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px 24px 24px;
}
.stop .no {
  position: absolute;
  top: -18px;
  left: -14px;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--fg);
  border: 1.5px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
}
.stop:nth-child(odd) .no {
  background: var(--yellow);
  color: var(--on-yellow);
  border-color: var(--yellow);
}
.stop .wk {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 7px;
}
.stop .t {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(17px, 2.2vw, 20px);
  line-height: 1.12;
}
.stop .d {
  color: var(--muted);
  font-size: 14.5px;
  margin-top: 6px;
}
/* pod exercise — the recurring "what you actually do" line, set off by a
   hairline so it reads as a distinct beat from the session description */
.stop .pod {
  color: var(--fg);
  font-size: 13.5px;
  line-height: 1.5;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
/* duration — a quiet metadata footer, same treatment as the .wk label above */
.stop .dur {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 12px;
}
/* CTA block — the snake's final stop, filling the empty 3×3 cell. Yellow,
   like a marker note that says "start here", and the whole tile is the link. */
.stop.cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--on-yellow);
  text-decoration: none;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
}
.stop.cta:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
}
.stop.cta .cta-k {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.65;
}
.stop.cta .cta-t {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(19px, 2.3vw, 23px);
  line-height: 1.12;
}
/* a real-looking pill button inside the tile — the click affordance people
   were missing. Ink pill on yellow, mirrors .btn-dark elsewhere. */
.stop.cta .cta-btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--on-yellow);
  color: var(--fg);
}
.stop.cta .cta-coach {
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.85;
}
.stop.cta .cta-seats {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 2px;
}
/* connectors sit in the grid gaps */
.stop::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 2;
}
.stop.r::after {
  right: -48px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 24px;
  background-image: var(--arrR);
}
.stop.l::after {
  left: -48px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 24px;
  background-image: var(--arrL);
}
.stop.dn::after {
  left: 50%;
  bottom: -64px;
  transform: translateX(-50%);
  width: 24px;
  height: 64px;
  background-image: var(--arrD);
}

/* TRAINER */
.tr-grid {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: clamp(32px, 5vw, 54px);
  align-items: stretch; /* photo stretches to the full height of the copy */
}
/* photo slot — yellow "JM" monogram shows only if jan-gs.png fails to load */
.tr-photo {
  position: relative;
  height: 100%;
  min-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.tr-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%; /* portrait: keep upper-center face in frame */
  display: block;
  z-index: 1; /* covers the JM fallback unless the img errors out */
}
.tr-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 92px);
  letter-spacing: -0.02em;
  color: var(--yellow);
}
.tr-copy h2 {
  font-size: clamp(28px, 4vw, 42px);
  max-width: 17ch;
}
.tr-copy p {
  color: var(--muted);
  font-size: 16.5px;
  margin-top: 16px;
  max-width: 68ch;
}
/* the "prefer to reach out directly?" line under the booking button. .alt-line
   gives its links a marker-yellow rule, which vanishes on this yellow ground —
   so here the links go to ink and keep the underline as the affordance. */
.tr-alt {
  margin-top: 16px;
  font-size: 15px;
}
.on-yellow .tr-copy p.tr-alt a {
  color: var(--on-yellow);
  border-bottom-color: rgba(11, 11, 11, 0.35);
}
.on-yellow .tr-copy p.tr-alt a:hover {
  border-bottom-color: var(--on-yellow);
}

/* ── Yellow-ground fixes for .gap and .trainer ──────────────────────────
   Both sections set their body copy to --muted, a grey tuned for the dark
   ground; it has to become black ink here. These rules sit after the
   section blocks because .on-yellow p and .gap p carry equal specificity,
   so source order is what decides it. */
.on-yellow.gap p,
.on-yellow .tr-copy p {
  color: var(--on-yellow);
  opacity: 0.78;
}
/* The marker highlight is yellow-on-dark by default, which reads as nothing
   on a yellow ground — invert it so the emphasis survives. */
.on-yellow .gap-accent {
  background: var(--on-yellow);
  color: var(--yellow);
}
/* --line is a near-black hairline meant for dark surfaces; on yellow it
   disappears, so the photo and sketch frames get an ink edge instead. */
.on-yellow .tr-photo,
.on-yellow .gap-img {
  border-color: rgba(11, 11, 11, 0.22);
}

/* VIDEO — click-to-load explainer */
.vid-frame {
  position: relative;
  margin-top: clamp(28px, 4vw, 44px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(
      120% 130% at 82% -12%,
      rgba(254, 228, 71, 0.22),
      transparent 55%
    ),
    var(--surface);
  border: 1px solid var(--line);
}
.vid-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.vid-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--fg);
}
.vid-disc {
  width: clamp(66px, 8vw, 88px);
  height: clamp(66px, 8vw, 88px);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.vid-disc svg {
  width: 40%;
  height: 40%;
  margin-left: 4px; /* optically centre the play triangle */
}
.vid-play:hover .vid-disc {
  transform: scale(1.06);
}
.vid-label {
  font-family: var(--disp);
  font-weight: 600;
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: -0.01em;
}
.vid-time {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* TESTIMONIALS */
.tst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.tst {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.tst:nth-child(2) {
  border-color: var(--yellow);
}
.tst .q {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 44px;
  line-height: 0.5;
  color: var(--yellow);
}
.tst p {
  font-family: var(--disp);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  margin-top: 14px;
}
.tst .who {
  margin-top: auto;
  padding-top: 22px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.tst .who .avatar {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-yellow);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tst .who .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tst .who .avatar svg {
  width: 24px;
  height: 24px;
}
.tst .who .n {
  font-weight: 700;
}
.tst .who .r {
  color: var(--muted);
}

/* CONVERSION */
.convert-head {
  text-align: center;
  margin-bottom: 44px;
}
.convert-head h2 {
  font-size: clamp(30px, 4.8vw, 50px);
}
.convert-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 26px;
  align-items: stretch;
}
.convert-col {
  display: flex;
  flex-direction: column;
}
.convert-col .info-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.convert-alt {
  text-align: center;
  margin-top: 36px;
}
.info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(24px, 2.4vw, 28px);
  color: var(--fg);
}
.info-card h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px;
}
/* second heading inside the merged card — separated by a rule instead of a
   card edge, so price and logistics read as one block without extra height */
.info-card .ic-sub {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  margin-bottom: 2px;
}
/* price and its qualifier sit side by side; the note only drops below when
   there genuinely isn't room for it */
.price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
}
/* Price: €873 is the live number and carries the display size; €970 is struck
   and quieter, but stays at --muted so it still clears 4.5:1. */
.price-line {
  display: flex;
  flex-wrap: wrap; /* must not force the card wider than 390px */
  align-items: baseline;
  gap: 4px 10px;
}
.price-line .pk {
  font-size: 15px;
  color: var(--muted);
}
.price-line s {
  font-family: var(--disp);
  font-weight: 600;
  font-size: 19px;
  color: var(--muted);
}
.price-line .pnow {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 42px);
  line-height: 1;
  color: var(--yellow);
}
/* spoken-only context so the struck price can't be misheard as the price */
.price-line .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.legal {
  margin-top: 14px;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--muted);
}
/* The seat count is counted out in marker strokes: four groups of five. */
.tally {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  margin: 6px 0 20px;
}
.tally .tg {
  position: relative;
  display: flex;
  gap: 7px;
  height: 44px;
}
.tally i {
  width: 3px;
  height: 100%;
  background: var(--yellow);
  border-radius: 2px;
}
/* the fifth stroke crosses the other four */
.tally i.x {
  position: absolute;
  left: -3px;
  top: 0;
  width: 3px;
  height: 52px;
  margin-top: -4px;
  transform: rotate(-24deg);
  transform-origin: 50% 50%;
}
/* hand-drawn wobble: each group leans a hair differently */
.tally .tg:nth-child(2) {
  transform: rotate(1.2deg);
}
.tally .tg:nth-child(3) {
  transform: rotate(-1deg);
}
.tally .tg:nth-child(4) {
  transform: rotate(0.6deg);
}
.info-card .note {
  max-width: 21ch;
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
  color: var(--faint);
}
/* what the price covers — small print directly under the price */
.info-card .includes {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.early {
  margin-top: 16px;
  background: var(--yellow);
  color: var(--on-yellow);
  border: none;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
}
.facts {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.facts li {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.facts li:last-child {
  border-bottom: none;
}
.facts .fk {
  color: var(--faint);
  white-space: nowrap;
}
.facts .fv {
  font-family: var(--disp);
  font-weight: 700;
  text-align: right;
}
/* the seat qualifier rides along with the number instead of costing a row */
.facts .fv em {
  font-family: var(--body);
  font-style: normal;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--muted);
}
.info-card .legal {
  margin-top: 16px;
}
/* the form is the page's one job — it gets the loudest surface */
.form-card {
  /* stretch to match the left column; the reassurance footer (pinned to the
     bottom via margin-top:auto) absorbs the extra height so there is no void. */
  display: flex;
  flex-direction: column;
  background: var(--yellow);
  border: none;
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 36px);
  color: var(--on-yellow);
}
/* submit failed — shown by js/main.js instead of swallowing the lead silently.
   The card is yellow, so the error reads as ink with a marker underline rather
   than the usual red, which would fight the palette and add a stray hue. */
.form-error {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--on-yellow);
  border-left: 3px solid var(--on-yellow);
  padding-left: 12px;
}
.form-error a {
  color: var(--on-yellow);
  font-weight: 700;
}

/* trust signals at the foot of the card — margin-top:auto pushes them to the
   bottom, letting the flexible gap above soak up whatever height is left over */
.form-reassure {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
}
.form-reassure li {
  position: relative;
  padding-left: 26px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(11, 11, 11, 0.82);
}
/* a marker-style check, in keeping with the whiteboard language */
.form-reassure li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--disp);
  font-weight: 700;
  color: var(--on-yellow);
}
/* the first trust line carries a hairline to separate it from the form */
.form-reassure li:first-child {
  border-top: 1px solid rgba(11, 11, 11, 0.16);
  padding-top: 22px;
  margin-top: 4px;
}
.form-reassure li:first-child::before {
  top: 22px;
}
.form-card h3 {
  font-size: 26px;
  color: var(--on-yellow);
}
.form-card .fl {
  font-size: 15px;
  color: rgba(11, 11, 11, 0.82);
  margin-top: 8px;
}
.form-card form {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.form-card input,
.form-card textarea {
  font-family: var(--body);
  font-size: 15px;
  color: var(--on-yellow);
  padding: 22px 15px 8px;
  border: 1.5px solid var(--on-yellow);
  border-radius: 8px;
  background: var(--paper);
  outline: none;
  width: 100%;
}
.form-card input:focus,
.form-card textarea:focus {
  outline: 3px solid var(--on-yellow);
  outline-offset: 1px;
}
/* floating labels — persistent, so context stays while typing */
.field {
  position: relative;
}
.field label {
  position: absolute;
  left: 16px;
  top: 17px;
  /* line-height:1 keeps the floated label's box tight — without it the label
     box grew past the input's 22px padding and collided with the typed text. */
  line-height: 1;
  font-size: 15px;
  color: rgba(11, 11, 11, 0.72);
  pointer-events: none;
  transition:
    top 0.14s,
    font-size 0.14s,
    color 0.14s;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-yellow);
}
.form-card textarea {
  resize: vertical;
}
.form-card button.btn {
  width: 100%;
  justify-content: center;
  font-size: 16px;
  margin-top: 4px;
}
.success {
  display: none;
  text-align: center;
  padding: 30px 10px;
}
.success .check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--on-yellow);
  color: var(--yellow);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto;
}
.success h3 {
  font-size: 22px;
  margin-top: 16px;
  color: var(--on-yellow);
}
.success p {
  font-size: 15px;
  color: rgba(11, 11, 11, 0.82);
  margin-top: 8px;
}

/* FAQ */
details {
  border-bottom: 1px solid var(--line);
}
details:first-of-type {
  border-top: 1px solid var(--line);
}
summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 17.5px;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: color 0.16s;
}
summary:hover {
  color: var(--yellow);
}
summary::-webkit-details-marker {
  display: none;
}
summary .ic {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--on-yellow);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
details[open] summary .ic {
  transform: rotate(45deg);
}
details p {
  color: var(--muted);
  font-size: 16px;
  padding-bottom: 22px;
  max-width: 68ch;
}

/* the soft "let's talk" closer under the FAQ — quiet by design, so it reads
   as the FAQ's last row rather than competing with the yellow CTA below */
/* lifted into its own card so it stops blending into the FAQ list, with the
   booking call boxed in yellow on the right to pull the eye. */
.faq-talk {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 34px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(28px, 3vw, 40px);
}
.faq-talk h3 {
  font-size: clamp(22px, 2.6vw, 27px);
  line-height: 1.1;
}
.faq-talk-body p {
  color: var(--muted);
  font-size: 16px;
  margin-top: 12px;
}
.faq-talk-body .ft-email {
  margin-top: 18px;
  font-size: 15px;
}
/* the yellow attention panel */
.faq-talk-cta {
  background: var(--yellow);
  color: var(--on-yellow);
  border-radius: 16px;
  padding: 28px 26px;
  text-align: center;
}
.faq-talk-cta .btn {
  width: 100%;
  justify-content: center;
}
.faq-talk-cta .ft-note {
  color: rgba(11, 11, 11, 0.82);
  font-size: 13.5px;
  line-height: 1.45;
  margin-top: 14px;
}

/* FINAL — the yellow send-off */
.final {
  text-align: center;
}
.final h2 {
  font-size: clamp(32px, 5.6vw, 58px);
  max-width: 15ch;
  margin: 0 auto;
  line-height: 1.02;
}
.final .seats {
  font-family: var(--disp);
  font-weight: 700;
  margin: 24px 0 30px;
  letter-spacing: 0.01em;
  color: rgba(11, 11, 11, 0.8);
}

/* FOOTER */
footer {
  background: var(--board);
  color: var(--fg);
  border-top: 1px solid var(--line);
}
.foot-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 34px 0;
}
.foot-inner img {
  height: 24px;
}
.foot-inner .mid {
  font-size: 14px;
  color: var(--faint);
}
.foot-inner .mid a {
  color: var(--yellow);
  font-weight: 600;
  text-decoration: none;
}
.foot-inner .mail {
  font-size: 14px;
  color: var(--faint);
  text-decoration: none;
  font-weight: 600;
}
.foot-inner .mail:hover {
  color: var(--yellow);
}
.foot-consent {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.foot-consent:hover {
  color: var(--yellow);
}

/* consent banner — full-width bar at the bottom: visible enough to get an
   answer, but never blocks the page. Both buttons share one style on purpose:
   no colour nudge towards "Allow". */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90; /* above the mobile sticky CTA (70) */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 40px;
  padding: 22px clamp(22px, 4.5vw, 72px) calc(22px + env(safe-area-inset-bottom));
  background: var(--surface);
  color: var(--fg);
  border-top: 3px solid var(--yellow);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.5);
}
.consent[hidden] {
  display: none;
}
.consent-copy {
  flex: 1 1 420px;
  max-width: 720px;
}
.consent-title {
  font-size: 19px;
  margin-bottom: 6px;
}
.consent p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
}
.consent p a {
  color: var(--yellow);
}
.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.consent-btn {
  flex: 1 1 130px;
  min-width: 130px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  white-space: nowrap;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  border: 2px solid var(--fg);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.consent-btn:hover,
.consent-btn:focus-visible {
  background: var(--fg);
  color: var(--board);
}
@media (max-width: 560px) {
  .consent-actions {
    width: 100%;
  }
}

/* mobile sticky CTA */
.sticky-cta {
  display: none;
}

/* roadmap snake: row 2 runs right→left under row 1 */
@media (min-width: 901px) {
  /* row 2 runs right→left under row 1 … */
  .stop:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }
  .stop:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
  }
  .stop:nth-child(6) {
    grid-column: 1;
    grid-row: 2;
  }
  /* … then row 3 turns back left→right for the last two stops */
  .stop:nth-child(7) {
    grid-column: 1;
    grid-row: 3;
  }
  .stop:nth-child(8) {
    grid-column: 2;
    grid-row: 3;
  }
  /* … and the CTA block closes the snake in the last empty cell */
  .stop:nth-child(9) {
    grid-column: 3;
    grid-row: 3;
  }
}

/* RESPONSIVE */
/* the hero carries a big display heading, so it needs the full width back
   sooner than the other two-column sections */
@media (max-width: 1100px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .enroll {
    margin-top: 44px;
    max-width: 520px;
  }
}
@media (max-width: 560px) {
  /* wrapped, a right-aligned note reads as a stray fragment */
  .info-card .note {
    max-width: none;
    text-align: left;
  }
  /* phone: the video bleeds edge to edge (cancels .wrap's side padding) and the
     play button shrinks, so it no longer dominates a 16:9 frame this small */
  .vid-frame {
    margin-inline: calc(-1 * clamp(22px, 4.5vw, 72px));
    border-radius: 0;
    border-inline: 0;
  }
  .vid-play {
    gap: 10px;
  }
  .vid-disc {
    width: 52px;
    height: 52px;
  }
  .vid-label {
    font-size: 16px;
  }
}
@media (max-width: 900px) {
  .gap-grid,
  .convert-grid,
  .aud-layout,
  .tr-grid,
  .faq-talk {
    grid-template-columns: 1fr;
  }
  .aud-fig {
    max-width: 500px;
    margin: 0 auto;
  }
  .out-list,
  .tst-grid {
    grid-template-columns: 1fr;
  }
  .tr-photo {
    order: -1;
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    width: 100%; /* centred with no width, the frame collapses: its img is absolute */
    max-width: 320px;
    justify-self: center;
  }
  .roadmap {
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .stop.r::after,
  .stop.l::after,
  .stop.dn::after {
    display: none;
  }
  .stop:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -52px;
    width: 24px;
    height: 52px;
    transform: translateX(-50%);
    background: var(--arrD) center/contain no-repeat;
    z-index: 2;
  }
}
@media (max-width: 720px) {
  body {
    padding-bottom: 76px;
  }
  .sticky-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    padding: 12px clamp(16px, 4vw, 22px)
      calc(12px + env(safe-area-inset-bottom));
    background: var(--board);
    border-top: 1px solid var(--line);
  }
  .sticky-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: var(--board);
    border-bottom: 1px solid var(--line);
    padding: 14px clamp(22px, 4.5vw, 72px) 20px;
    display: none;
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a:not(.nav-cta) {
    padding: 12px 2px;
    font-size: 17px;
    border-bottom: 1px solid var(--line);
  }
  .nav-links .nav-cta {
    margin-top: 6px;
    text-align: center;
    justify-content: center;
  }
}