/* ==========================================================================
   ATHLI — Movement for Every Body
   Design tokens
   ========================================================================== */
/* ==========================================================================
   PALETTE
   Two themes off one set of tokens. The rule that makes it work: --forest is
   always "the far end from the page", and --off-white is always "the page".
   In light mode that means dark ink on cream; in dark mode the pair swaps, so
   every `background: var(--forest); color: var(--off-white)` component stays
   legible without being touched individually.

   --ink-rgb / --paper-rgb are the channel halves of that same pair, for the
   ~250 places that need an alpha (hairlines, scrims, shadows). They swap too.

   Theme resolution, in order: an explicit choice on <html data-theme>, then
   the OS setting via prefers-color-scheme, then light. See js/theme.js.
   ========================================================================== */
:root {
  --forest: #0c2119;
  --forest-soft: #16332a;
  --sage: #415339;
  --accent: #cf4e1c;
  --accent-soft: #e8703a;
  --tan: #e7d3bf;
  --cream: #f4ede5;
  --off-white: #fbf9f8;
  --white: #ffffff;
  --ink: #1b241f;
  --ink-soft: rgba(var(--ink-rgb), 0.68);

  --ink-rgb: 12, 33, 25;
  --paper-rgb: 251, 249, 248;
  --sage-rgb: 65, 83, 57;
  --accent-rgb: 207, 78, 28;

  /* Dark-band components (.section--forest, .cta-band, the app teaser) keep
     their own pair, so they can stay dark in dark mode instead of flipping
     to a glaring light slab. In light mode they are simply the base pair. */
  --band: #0c2119;
  --band-soft: #16332a;
  --band-ink: #fbf9f8;
  --band-ink-rgb: 251, 249, 248;

  --font-head: "Montserrat", "Segoe UI", sans-serif;
  --font-body: "Lato", "Segoe UI", sans-serif;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-soft: 0 20px 50px rgba(var(--ink-rgb), 0.08);
  --shadow-card: 0 12px 30px rgba(var(--ink-rgb), 0.07);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1240px;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   DARK
   Applied by [data-theme="dark"] on <html>. js/theme.js also mirrors the OS
   setting onto that attribute, so there is one source of truth rather than a
   media query and an attribute disagreeing with each other.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  /* The page, and the far end from it. */
  --off-white: #0e1a16;   /* page ground */
  --white: #16241f;       /* raised card */
  --cream: #12201b;       /* alternating section band */
  --forest: #eef1ee;      /* headings, primary buttons, high-contrast fills */
  --forest-soft: #dfe5e0;
  --ink: #eef1ee;
  --ink-soft: rgba(var(--ink-rgb), 0.66);

  /* Swapped, so every hairline and scrim lands on the right side. */
  --ink-rgb: 238, 241, 238;
  --paper-rgb: 14, 26, 22;

  /* Greens and tan have to lift off a dark ground to stay visible. */
  --sage: #9cb08f;
  --sage-rgb: 156, 176, 143;
  --tan: #c9b49c;

  /* Terracotta is the one constant. It is lightened a touch because a
     saturated mid-tone vibrates against a dark ground. */
  --accent: #e8703a;
  --accent-soft: #f29063;
  --accent-rgb: 232, 112, 58;

  /* Dark bands stay dark — a shade above the page so they still read as a
     separate block. */
  --band: #1b2e28;
  --band-soft: #22392f;
  --band-ink: #f2f4f1;
  --band-ink-rgb: 242, 244, 241;

  --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.38);

  color-scheme: dark;
}


/* ==========================================================================
   Reset
   ========================================================================== */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--forest);
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
p { margin: 0; }
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ==========================================================================
   Utility
   ========================================================================== */

/* Text for screen readers only. Taken out of the flow rather than hidden with
   display:none, which would take it away from the readers too.

   The skip link in header.php carries this class: it is the first thing the
   keyboard reaches on the page, so without these rules it simply printed
   "Skip to content" above the header for everyone. It comes back into view
   on focus, which is the whole point of it. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  word-wrap: normal;
}

.screen-reader-text:focus,
.skip-link:focus {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 10000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 22px;
  clip-path: none;
  overflow: visible;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  color: var(--off-white);
  background: var(--forest);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.section { padding: 108px 0; }
.section--tight { padding: 84px 0; }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--forest { background: var(--forest); color: var(--off-white); }
.section--forest h2, .section--forest h3 { color: var(--off-white); }
.section-head {
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); margin-top: 14px; }
.section-head p { margin-top: 18px; font-size: 1.08rem; color: var(--ink-soft); line-height: 1.7; }
.section--forest .section-head p { color: rgba(var(--paper-rgb), 0.72); }

/* Reveal-on-scroll — initial/animated state is set by GSAP (js/script.js) */
.reveal { will-change: opacity, transform; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform 0.35s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary { background: var(--forest); color: var(--off-white); }
.btn--primary:hover { background: var(--sage); }

.btn--accent { background: var(--accent); color: var(--off-white); }
.btn--accent:hover { background: #b8420f; }

.btn--outline { border-color: rgba(var(--ink-rgb), 0.25); color: var(--forest); background: transparent; }
.btn--outline:hover { border-color: var(--forest); background: rgba(var(--ink-rgb), 0.04); }

.btn--outline-light { border-color: rgba(var(--paper-rgb), 0.4); color: var(--off-white); background: transparent; }
.btn--outline-light:hover { border-color: var(--off-white); background: rgba(var(--paper-rgb), 0.08); }

.btn--block { width: 100%; justify-content: center; }

/* Image placeholder (swap with real <img> once photography is supplied) */
.ph {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(155deg, var(--tan) 0%, var(--cream) 100%);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(var(--sage-rgb), 0.18), transparent 55%),
    radial-gradient(circle at 80% 85%, rgba(var(--accent-rgb), 0.16), transparent 50%);
  z-index: -1;
}
.ph img, .ph video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ph__tag {
  margin: 14px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  color: var(--forest);
  background: rgba(var(--paper-rgb), 0.85);
  backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ph__tag svg { width: 13px; height: 13px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  padding: 20px 0;
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-header.is-scrolled {
  padding: 12px 0;
  background: rgba(var(--paper-rgb), 0.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px rgba(var(--ink-rgb), 0.08);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 30px; width: auto; object-fit: contain; }

.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a:not(.btn) {
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--forest);
  position: relative;
  padding: 4px 0;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}
.nav-links a:not(.btn):hover::after { width: 100%; }

.nav-links__cta { display: none; }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(var(--ink-rgb), 0.06);
  color: var(--forest);
  transition: background 0.3s var(--ease);
}
.nav-icon-btn:hover { background: rgba(var(--ink-rgb), 0.12); }
.nav-icon-btn svg { width: 19px; height: 19px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--forest);
  color: var(--off-white);
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle.is-open .icon-menu { display: none; }
.nav-toggle.is-open .icon-close { display: block; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding: 111px 0 0;
  background: linear-gradient(180deg, var(--cream) 0%, var(--off-white) 100%);
  /* No overflow:hidden here on purpose — the video travels down past
     this section's own bottom edge as it scrolls (js/script.js), and
     clipping would cut it off right at the hero's boundary.
     overflow-x:clip trims only the sideways bleed from ::before (which sits
     at right:-160px and made the whole page scroll horizontally on phones)
     while leaving vertical overflow — and the video's travel — untouched. */
  overflow-x: clip;
}
.hero::before {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.28), transparent 68%);
  top: -220px; right: -160px;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--sage-rgb), 0.2), transparent 70%);
  bottom: -140px; left: -120px;
  z-index: 0;
  pointer-events: none;
}
.hero-ghost {
  position: absolute;
  left: -0.05em; top: 96px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(6rem, 17vw, 14rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--ink-rgb), 0.09);
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* z-index high enough to clear the marquee (z-index: 2) and belief
   section below — the hero video visually travels down over both as
   it scrolls (see js/script.js), so its whole ancestor chain needs to
   win the stacking comparison, not just the video card itself. */
.hero .container { position: relative; z-index: 30; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 40px;
  align-items: center;
}
.hero-copy { padding-bottom: 64px; }
.hero-copy h1 {
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  margin-top: 22px;
  letter-spacing: -0.025em;
}
.hero-copy h1 em { color: var(--sage); font-style: normal; }
.hero-copy h1 .split-line { overflow: hidden; display: block; }
.hero-copy p {
  margin-top: 26px;
  font-size: 1.18rem;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 460px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.hero-proof {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 46px;
  padding: 10px 22px 10px 10px;
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.07);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
}
.hero-proof .avatars { display: flex; }
.hero-proof .avatars img {
  width: 38px; height: 38px; border-radius: 50%;
  margin-left: -12px; border: 3px solid var(--white);
  object-fit: cover;
}
.hero-proof .avatars img:first-child { margin-left: 0; }
.hero-proof span { font-size: 0.87rem; color: var(--ink-soft); line-height: 1.4; max-width: 210px; }
.hero-proof strong { color: var(--forest); }

.hero-visual { position: relative; padding: 20px 20px 66px 0; }
.hero-visual::before {
  content: "";
  position: absolute;
  /* Sized off the card's own max-width/aspect-ratio (not hero-visual's
     full box) and anchored with right/top only, so it always matches
     the card — wherever it ends up sitting. */
  top: 26px;
  right: -10px;
  width: 460px;
  max-width: calc(100% + 10px);
  aspect-ratio: 4 / 4.6;
  background: linear-gradient(150deg, var(--sage), var(--forest));
  border-radius: var(--radius-lg);
  transform: rotate(2.4deg);
  z-index: -1;
}
.hero-visual .ph {
  aspect-ratio: 4 / 4.6;
  max-height: 530px;
  max-width: 460px;
  margin-left: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px rgba(var(--ink-rgb), 0.16);
  transform: rotate(-1.2deg);
  /* Needs to paint above the marquee/belief content it visually travels
     over on its way down (see the scroll travel in js/script.js). */
  z-index: 20;
}

.icon-badge {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
/* Absolute + transform centering — immune to flex/inline-baseline quirks,
   so the icon centers regardless of how the badge itself is sized. */
.icon-badge svg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  display: block;
}
.icon-badge--accent { background: var(--accent); color: var(--forest); }
.icon-badge--tan { background: var(--tan); color: var(--forest); }

/* ==========================================================================
   Marquee strip
   ========================================================================== */
/* The band is deliberately tilted and scaled past the viewport edges; this
   wrapper trims that sideways bleed so it can't scroll the page on phones.
   clip (not hidden) keeps the vertical axis visible for the negative margins. */
.marquee-clip { overflow-x: clip; }
.marquee {
  background: var(--forest);
  overflow: hidden;
  padding: 22px 0;
  transform: rotate(-1.2deg) scale(1.02);
  margin-block: -4px;
  position: relative;
  z-index: 2;
}
.marquee__track { display: flex; width: max-content; }
.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 22px;
  padding-right: 22px;
}
.marquee__group span {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--off-white);
  white-space: nowrap;
}
.marquee__dot { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* ==========================================================================
   Custom cursor (desktop / fine-pointer only)
   ========================================================================== */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 2000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.cursor-dot {
  width: 7px; height: 7px;
  background: var(--accent);
  transition: opacity 0.3s;
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1.5px solid rgba(var(--ink-rgb), 0.35);
  transition: opacity 0.3s, width 0.25s, height 0.25s, border-color 0.25s, background 0.25s;
}
.cursor-ring.is-hover {
  width: 56px; height: 56px;
  background: rgba(var(--accent-rgb), 0.08);
  border-color: var(--accent);
}
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button {
  cursor: none;
}
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ==========================================================================
   Belief strip — the hero video settles on the left as this section
   scrolls into view (see js/script.js); the quote sits on the right
   and slides in from off-screen-right at the same time.
   ========================================================================== */
.belief {
  padding: 220px 0;
  position: relative;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
}
.belief-inner { width: 100%; display: flex; justify-content: flex-end; }
.belief-copy { max-width: 560px; text-align: left; position: relative; z-index: 1; }
.belief-copy .quote-mark { width: 70px; height: 70px; color: var(--tan); }
.belief-copy blockquote {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  color: var(--forest);
  margin: 18px 0 0;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.belief-copy blockquote span { color: var(--sage); }
.belief-copy cite {
  display: block;
  margin-top: 26px;
  font-style: normal;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ==========================================================================
   Pillars — Personalized, Flexible, Sustainable, Connected
   ========================================================================== */
.pillars-section { padding-top: 90px; }
.pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.pillar-card {
  position: relative;
  text-align: left;
  background: var(--off-white);
  border: 1px solid rgba(var(--ink-rgb), 0.07);
  border-radius: var(--radius-lg);
  padding: 36px 30px 34px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  background: var(--white);
  border-color: transparent;
}
.pillar-card:hover .icon-badge--tan { background: var(--accent); color: var(--off-white); }
.pillar-card__num {
  position: absolute;
  top: 28px; right: 30px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(var(--ink-rgb), 0.2);
}
.pillar-card .icon-badge { width: 52px; height: 52px; }
.pillar-card .icon-badge svg { width: 24px; height: 24px; }
.pillar-card h4 { font-size: 1.18rem; margin-top: 24px; }
.pillar-card p { margin-top: 10px; font-size: 0.95rem; line-height: 1.7; color: var(--ink-soft); }

/* ==========================================================================
   Approach strip (was the stats strip — volume numbers removed)
   ========================================================================== */
.stats-strip { padding: 0 0 90px; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.1);
}
.stat-item {
  padding: 34px 24px;
  text-align: center;
  border-right: 1px solid rgba(var(--ink-rgb), 0.1);
}
.stat-item:last-child { border-right: none; }
.stat-item strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  /* values are short phrases now, not big numbers — so they wrap instead of overflowing */
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.2;
  color: var(--forest);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.stat-item strong small { font-size: 0.55em; color: var(--accent); vertical-align: middle; }
.stat-item span {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ==========================================================================
   Every body — proof grid
   ========================================================================== */
.proof-section { overflow: hidden; padding-block: 84px; }
.proof-wrap {
  padding-block: 14px;
  width: 100%;
  /* Photo size is solved from the viewport so exactly 2.5 of them sit inside
     the container at rest — the rest of the strip runs off the right edge,
     which is what says "this pans". The pad below is the same value the
     viewport uses, so the sum always lands. */
  --proof-gap: 20px;
  --proof-visible: 2.5;
  --proof-pad: max(24px, calc((100vw - var(--container)) / 2 + 24px));
  --proof-size: clamp(
    240px,
    calc((100vw - var(--proof-pad) - 2 * var(--proof-gap)) / var(--proof-visible)),
    700px
  );
}
.proof-viewport {
  overflow: hidden;
  width: 100%;
  padding-left: var(--proof-pad);
}
.proof-row { display: flex; gap: var(--proof-gap); width: max-content; }
.proof-cell {
  position: relative;
  flex: 0 0 var(--proof-size);
  /* Just short of square — a full square made the pinned section taller than
     the viewport it pins inside. */
  height: calc(var(--proof-size) * 0.78);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.proof-cell:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(var(--ink-rgb), 0.16); }
.proof-cell .ph { width: 100%; height: 100%; border-radius: var(--radius-md); }

/* A hairline mat over the photo with the ATHLI mark in the corner — it reads
   as a framed print rather than a stock image. The scrim only exists so the
   mark stays legible on a bright photo; it fades out by the top third. */
.proof-cell .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(var(--ink-rgb), 0.42) 0%,
    rgba(var(--ink-rgb), 0.12) 22%,
    transparent 44%
  );
  box-shadow: inset 0 0 0 1px rgba(var(--paper-rgb), 0.55);
}
/* The second, inner rule — a mat line set in from the edge. Kept on the cell
   rather than the photo so it sits above the scrim, not under it. */
.proof-cell::after {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(var(--paper-rgb), 0.26);
  border-radius: calc(var(--radius-md) - 8px);
}
.proof-cell__mark {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 2;
  display: block;
  width: 34px;
  pointer-events: none;
}
.proof-cell__mark img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.94;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.42));
}
.proof-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 42px;
}
.proof-tags span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 20px 10px 15px;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  color: var(--forest);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.proof-tags span:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 14px 30px rgba(var(--ink-rgb), 0.12);
}
.proof-tags svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* ==========================================================================
   The paths — tabbed plan explorer
   ========================================================================== */
/* --------------------------------------------------------------------------
   Tab bar — one tab per sheet of the client's plan deck.
   A cream track with a raised white pill for the active route.
   -------------------------------------------------------------------------- */
.path-tabs {
  margin: 46px auto 0;
  display: flex;
  gap: 6px;
  padding: 7px;
  width: fit-content;
  max-width: 100%;
  border-radius: var(--radius-pill);
  background: var(--cream);
  box-shadow: inset 0 1px 2px rgba(var(--ink-rgb), 0.06);
}
.path-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 26px 13px 18px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--sage);
  text-align: left;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
              box-shadow 0.45s var(--ease), transform 0.45s var(--ease);
}
.path-tab:hover { color: var(--forest); }
.path-tab.is-active {
  background: var(--white);
  color: var(--forest);
  box-shadow: 0 10px 24px rgba(var(--ink-rgb), 0.12);
}
.path-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.path-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(var(--sage-rgb), 0.12);
  color: var(--sage);
  transition: background 0.45s var(--ease), color 0.45s var(--ease);
}
.path-tab__icon svg { width: 19px; height: 19px; }
.path-tab.is-active .path-tab__icon { background: var(--accent); color: var(--off-white); }
.path-tab__text { display: flex; flex-direction: column; gap: 2px; }
.path-tab__text strong {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.path-tab__text small {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--sage);
  opacity: 0.82;
}
.path-tab.is-active .path-tab__text small { color: var(--accent); opacity: 1; }

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */
.path-panels { margin-top: 44px; }
.path-panel[hidden] { display: none; }
.path-panel.is-entering { animation: pathPanelIn 0.55s var(--ease) both; }
@keyframes pathPanelIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.path-panel__lead {
  max-width: 62ch;
  margin: 0 auto 34px;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.path-panel__foot {
  margin-top: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}
.path-panel__price { font-size: 0.9rem; color: var(--ink-soft); }
.path-panel__price strong {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--forest);
}

/* --------------------------------------------------------------------------
   Plan cards — copy left, photo right, pricing bar across the foot, the
   same arrangement the client uses in the deck.
   -------------------------------------------------------------------------- */
.plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.plan-cards--single { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }

.plan-card {
  display: grid;
  grid-template-columns: 1fr 0.62fr;
  /* The copy row takes the slack so that, however many features a plan
     lists, the pricing bars line up across the cards in a panel. */
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "body media"
    "pricing pricing";
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(var(--ink-rgb), 0.07);
  box-shadow: var(--shadow-card);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.plan-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(var(--ink-rgb), 0.13); }
.plan-card--wide { grid-template-columns: 1fr 0.5fr; }

.plan-card__body { grid-area: body; padding: 30px 26px 28px 30px; }
.plan-card__media { grid-area: media; position: relative; overflow: hidden; }
.plan-card__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.94);
  transition: transform 1.2s var(--ease);
}
.plan-card:hover .plan-card__media img { transform: scale(1.05); }

.plan-card__head { display: flex; align-items: center; gap: 14px; }
.plan-card__badge {
  width: 62px; height: 62px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cream);
}
.plan-card__title { display: flex; flex-direction: column; gap: 3px; }
.plan-card__title h3 {
  font-size: 1.65rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-weight: 800;
}
.plan-card__kicker {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.plan-card__desc {
  margin-top: 18px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.plan-card__list { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.plan-card__list--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 26px;
}
.plan-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.plan-card__list svg { width: 16px; height: 16px; margin-top: 2px; color: var(--sage); flex-shrink: 0; }

.plan-card__pricing {
  grid-area: pricing;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 30px;
  background: var(--cream);
  border-top: 1px solid rgba(var(--ink-rgb), 0.06);
}

/* What every route has in common — the proof behind "one ecosystem". */
.paths-common {
  margin-top: 40px;
  padding: 22px 30px;
  border-radius: var(--radius-md);
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 34px;
}
.paths-common__label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.paths-common__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
}
.paths-common__list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.paths-common__list svg { width: 16px; height: 16px; color: var(--sage); flex-shrink: 0; }

.paths-logos {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(var(--ink-rgb), 0.1);
  text-align: center;
}
.paths-logos__label {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
}
.paths-logos__row {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 36px;
}
.paths-logos__row img {
  width: 108px; height: 108px;
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.paths-logos__row a { display: block; line-height: 0; border-radius: 50%; }
.paths-logos__row a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.paths-logos__row a:hover img,
.paths-logos__row img:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(var(--ink-rgb), 0.16); }

/* ==========================================================================
   Community teaser
   ========================================================================== */
.community-section {
  position: relative;
  background: var(--forest);
  color: var(--off-white);
  overflow: hidden;
  padding: 140px 0;
}
.community-section h2 { color: var(--off-white); }
.community-section .eyebrow { color: var(--accent); }
.community-ghost {
  position: absolute;
  right: -0.02em; bottom: -0.2em;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(3.2rem, 9.5vw, 8rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--paper-rgb), 0.08);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.community { position: relative; z-index: 1; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 72px; align-items: center; }
.community-visual__frame {
  aspect-ratio: 4 / 4;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
}
.community-visual__frame img { transform: scale(1.2); }

.community-copy h2 { margin-top: 18px; font-size: clamp(2rem, 3.4vw, 2.75rem); }
.community-copy p { margin-top: 22px; color: rgba(var(--paper-rgb), 0.72); font-size: 1.1rem; line-height: 1.75; max-width: 480px; }
.community-stats {
  display: flex;
  gap: 0;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid rgba(var(--paper-rgb), 0.15);
}
.community-stats > div { flex: 1; padding-inline: 26px; border-right: 1px solid rgba(var(--paper-rgb), 0.15); }
.community-stats > div:first-child { padding-left: 0; }
.community-stats > div:last-child { padding-right: 0; border-right: none; }
.community-stats strong {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw, 2.15rem);
  color: var(--accent);
  letter-spacing: -0.01em;
}
.community-stats span { display: block; margin-top: 6px; font-size: 0.84rem; line-height: 1.4; color: rgba(var(--paper-rgb), 0.62); }
.community-copy .btn { margin-top: 34px; }

/* ==========================================================================
   Support built around you (choose how you train / support / focus / pace)
   ========================================================================== */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; }
.step-card {
  position: relative;
  padding: 0 28px 0 0;
  border-left: 1px solid rgba(var(--ink-rgb), 0.1);
  padding-left: 28px;
}
.step-card:first-child { border-left: none; padding-left: 0; }
.step-card .step-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 3.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--sage-rgb), 0.28);
  display: block;
}
.step-card .icon-badge { margin-top: -14px; position: relative; }
.step-card h4 { font-size: 1.2rem; margin-top: 22px; }
.step-card p { margin-top: 10px; font-size: 0.95rem; line-height: 1.65; color: var(--ink-soft); max-width: 30ch; }

/* ==========================================================================
   Powered by smarter coaching (Trainerize)
   ========================================================================== */
.trainerize-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.trainerize-copy__logo { display: block; margin-bottom: 20px; width: 150px; height: auto; }
.trainerize-copy h2 { margin-top: 14px; font-size: clamp(2rem, 3.4vw, 2.75rem); }
.trainerize-copy p { margin-top: 18px; font-size: 1.08rem; color: var(--ink-soft); line-height: 1.7; max-width: 44ch; }
.trainerize-copy .btn { margin-top: 30px; }
.trainerize-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(var(--ink-rgb), 0.06);
}
.trainerize-panel > .eyebrow { color: var(--accent); }

/* Check-marked feature list. Base rules; .trainerize-list below lays it out
   in two columns. Without the svg sizing here the icons fall back to the
   browser's default 300x150 replaced-element size. */
.path-list { display: grid; gap: 14px; }
.path-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.path-list svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }

.trainerize-list { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.trainerize-list li { align-items: flex-start; }

/* ==========================================================================
   App teaser — the Athli app, coming soon
   ========================================================================== */
.app-section { background: var(--forest); position: relative; overflow: hidden; }
.app-section::before {
  content: "";
  position: absolute;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.16), transparent 68%);
  top: -220px; right: -180px;
  pointer-events: none;
}
.app-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 2.05fr 0.95fr;
    gap: 60px;
    align-items: center;
}

.app-teaser-copy .eyebrow { color: var(--accent); }
.app-teaser-copy h2 { color: var(--off-white); margin-top: 16px; font-size: clamp(2.3rem, 4.2vw, 3.4rem); }
.app-teaser-copy p { margin-top: 20px; color: rgba(var(--paper-rgb), 0.72); font-size: 1.08rem; line-height: 1.75; max-width: 440px; }
.app-store-buttons { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.app-store-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(var(--paper-rgb), 0.08);
  border: 1px solid rgba(var(--paper-rgb), 0.18);
  border-radius: var(--radius-md);
  padding: 12px 22px 12px 16px;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.app-store-btn:hover { background: rgba(var(--paper-rgb), 0.14); border-color: rgba(var(--paper-rgb), 0.32); transform: translateY(-2px); }
.app-store-btn__icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--off-white);
  display: inline-flex; align-items: center; justify-content: center;
}
.app-store-btn__icon svg { width: 15px; height: 15px; }
.app-store-btn__text { text-align: left; }
.app-store-btn__text small { display: block; font-size: 0.66rem; color: rgba(var(--paper-rgb), 0.6); }
.app-store-btn__text strong { display: block; margin-top: 2px; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: var(--off-white); }
.app-teaser-copy .link {
  margin-top: 30px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; color: var(--off-white);
}
.app-teaser-copy .link svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.app-teaser-copy .link:hover svg { transform: translateX(3px); }

/* Phone mockup — pure CSS, no screenshot asset available yet */
.app-phone { position: relative; display: flex; justify-content: center; }
.app-phone__glow {
  position: absolute;
  inset: -50px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.3), transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.app-phone__frame {
  position: relative;
  z-index: 1;
  width: 330px;
  aspect-ratio: 330 / 642;
  background: linear-gradient(155deg, var(--forest-soft), var(--forest));
  border-radius: 44px;
  padding: 14px;
  box-shadow: 0 50px 90px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(var(--paper-rgb), 0.08);
}
/* The source is a 184 x 392 store capture. It is shown at exactly that size
   and never larger -- scaling a bitmap up is what made these look soft. */
.app-phone__img {
  position: relative;
  z-index: 1;
  width: 184px;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  filter: drop-shadow(0 40px 70px rgba(0, 0, 0, 0.4));
}
/* Hardware details — side buttons, purely decorative */
.app-phone__frame::before,
.app-phone__frame::after {
  content: "";
  position: absolute;
  background: var(--forest-soft);
}
.app-phone__frame::before {
  left: -3px; top: 100px;
  width: 3px; height: 56px;
  border-radius: 2px 0 0 2px;
}
.app-phone__frame::after {
  right: -3px; top: 150px;
  width: 3px; height: 80px;
  border-radius: 0 2px 2px 0;
}
.app-phone__notch {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 24px;
  background: var(--forest);
  border-radius: var(--radius-pill);
  z-index: 2;
}
.app-phone__screen {
  position: relative;
  z-index: 0; /* contains the gloss overlay's negative z-index below, so it can't escape behind the phone frame */
  width: 100%; height: 100%;
  background: var(--off-white);
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px 15px 14px;
}
/* Subtle glass sheen across the top of the screen — negative z-index so
   it sits behind the real (non-positioned) content automatically,
   instead of needing every content block to opt into a stacking order. */
.app-phone__screen::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.4), transparent 35%);
  pointer-events: none;
  z-index: -1;
}
.app-screen__status {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-head); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--forest);
  padding: 0 4px 14px;
}
.app-screen__status-icons { display: flex; align-items: center; gap: 5px; }
.app-icon-signal { display: flex; align-items: flex-end; gap: 2px; height: 9px; }
.app-icon-signal i { display: block; width: 2.5px; background: var(--forest); border-radius: 1px; }
.app-icon-signal i:nth-child(1) { height: 40%; }
.app-icon-signal i:nth-child(2) { height: 60%; }
.app-icon-signal i:nth-child(3) { height: 80%; }
.app-icon-signal i:nth-child(4) { height: 100%; }
.app-icon-wifi { width: 12px; height: 9px; border: 1.4px solid var(--forest); border-top: none; border-radius: 0 0 8px 8px; }
.app-icon-battery { position: relative; width: 20px; height: 10px; border: 1.3px solid var(--forest); border-radius: 2px; padding: 1.5px; box-sizing: border-box; }
.app-icon-battery i { display: block; width: 75%; height: 100%; background: var(--forest); border-radius: 1px; }
.app-icon-battery::after {
  content: "";
  position: absolute; right: -3px; top: 3px;
  width: 2px; height: 4px;
  background: var(--forest);
  border-radius: 0 1px 1px 0;
}
.app-screen__header { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.app-screen__header span { display: block; font-size: 0.74rem; color: var(--ink-soft); }
.app-screen__header strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--forest); margin-top: 2px; }
.app-screen__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--tan), var(--sage));
  border: 2px solid var(--white);
  box-shadow: 0 4px 12px rgba(var(--ink-rgb), 0.15);
  flex-shrink: 0;
}
.app-screen__streak {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 16px 4px 0;
  padding: 13px 0;
  border-top: 1px solid rgba(var(--ink-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.08);
}
.app-screen__streak-item { text-align: center; }
.app-screen__streak-item strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: var(--forest); }
.app-screen__streak-item span { display: block; margin-top: 2px; font-size: 0.6rem; color: var(--ink-soft); }
.app-screen__card {
  margin: 14px 4px 0;
  background: linear-gradient(155deg, var(--forest-soft), var(--forest));
  border-radius: 18px;
  padding: 16px;
  color: var(--off-white);
  box-shadow: 0 16px 30px rgba(var(--ink-rgb), 0.22);
}
.app-screen__card-label { display: block; font-family: var(--font-head); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.app-screen__card h5 { margin: 5px 0 0; font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--off-white); }
.app-screen__progress { margin-top: 12px; height: 5px; background: rgba(var(--paper-rgb), 0.15); border-radius: var(--radius-pill); overflow: hidden; }
.app-screen__progress span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.app-screen__card-meta { display: block; margin-top: 8px; font-size: 0.66rem; color: rgba(var(--paper-rgb), 0.6); }
.app-screen__cta {
  display: block;
  margin-top: 13px; width: 100%; text-align: center;
  background: var(--accent); color: var(--off-white);
  border-radius: var(--radius-pill);
  padding: 9px; font-family: var(--font-head); font-weight: 700; font-size: 0.74rem;
}
.app-screen__chart { margin: 16px 4px 0; }
.app-screen__chart-label { display: block; font-family: var(--font-head); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.app-screen__chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 7px;
  margin-top: 12px;
  height: 64px;
}
.app-screen__chart-bars span {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 5px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.58rem;
  color: var(--ink-soft);
  position: relative;
}
.app-screen__chart-bars span::before {
  content: "";
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 20px;
  height: var(--bar, 10%);
  background: var(--tan);
  border-radius: var(--radius-pill);
}
.app-screen__chart-bars span.is-active::before { background: var(--accent); }
.app-screen__list { margin: 14px 4px 0; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.app-screen__list-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--cream);
  border-radius: 14px;
  padding: 10px 12px;
}
.app-screen__list-item .icon-badge { width: 32px; height: 32px; flex-shrink: 0; }
.app-screen__list-item .icon-badge svg { width: 15px; height: 15px; }
.app-screen__list-item strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 0.74rem; color: var(--forest); }
.app-screen__list-item span { display: block; margin-top: 1px; font-size: 0.66rem; color: var(--ink-soft); line-height: 1.4; }
.app-screen__nav {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-around;
  padding-top: 14px;
}
.app-screen__nav span {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(var(--ink-rgb), 0.32);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.app-screen__nav span svg { width: 16px; height: 16px; }
.app-screen__nav span.is-active { background: var(--forest); color: var(--off-white); }

/* ==========================================================================
   Movement in motion — real video gallery, horizontal scroll slider
   ========================================================================== */
.motion-section { background: var(--forest); overflow: hidden; padding-bottom: 100px; }
.motion-section .eyebrow { color: var(--accent); }
.motion-section h2 { color: var(--off-white); font-size: clamp(1.6rem, 2.4vw, 2.15rem); }
.motion-section .section-head p { color: rgba(var(--paper-rgb), 0.68); }

.motion-wrap { width: 100%; }
.motion-viewport {
  overflow: hidden;
  width: 100%;
  padding-top: 70px;
  padding-left: max(24px, calc((100vw - var(--container)) / 2 + 24px));
}
.motion-row { display: flex; align-items: flex-start; gap: 20px; width: max-content; }
.motion-cell {
  position: relative;
  flex: 0 0 300px;
  height: 480px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  background: var(--forest-soft);
}
.motion-cell:nth-child(even) { margin-top: 70px; }
.motion-cell video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.motion-cell::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--paper-rgb), 0.08);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

/* ==========================================================================
   Coaches
   ========================================================================== */
.coaches-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.coach-card {
  display: flex;
  gap: 24px;
  padding: 38px;
  border-radius: var(--radius-lg);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.coach-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); }
.coach-card--cream { background: var(--white); border: 1px solid rgba(var(--ink-rgb), 0.06); }
.coach-card--tan { background: var(--tan); }

.coach-card__photo {
  position: relative;
  width: 92px; height: 92px;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
  background: var(--white);
}
.coach-card__photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top center; }
.coach-card__play {
  position: absolute;
  right: -4px; bottom: -4px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--off-white);
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--cream);
  transition: transform 0.3s var(--ease);
}
.coach-card__play svg { width: 15px; height: 15px; }
.coach-card__play:hover { transform: scale(1.12); }
.coach-card--tan .coach-card__play { border-color: var(--tan); }
.coach-card__play:disabled { cursor: not-allowed; opacity: 0.6; }
.coach-card__play:disabled:hover { transform: none; }

.coach-card__text h4 { font-size: 1.28rem; }
.coach-card__text .role {
  display: block; margin-top: 4px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--accent);
}
.coach-card__text blockquote {
  margin-top: 16px;
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.02rem; line-height: 1.5;
  color: var(--forest);
}
.coach-card__text p { margin-top: 12px; font-size: 0.92rem; line-height: 1.68; color: var(--ink-soft); }
.coach-card__text a.link {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; color: var(--forest);
}
.coach-card__text a.link svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.coach-card__text a.link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 8px; align-items: start; }
.testimonial-row {
  display: flex;
  flex-direction: column;
  padding: 38px 34px;
  border-radius: var(--radius-lg);
  background: rgba(var(--paper-rgb), 0.05);
  border: 1px solid rgba(var(--paper-rgb), 0.12);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.testimonial-row:hover { transform: translateY(-6px); background: rgba(var(--paper-rgb), 0.08); }
.testimonial-row:nth-child(2) { margin-top: 28px; }
.testimonial-row .quote-mark { width: 30px; height: 30px; color: var(--accent); flex-shrink: 0; }
.testimonial-row blockquote {
  /* all four sides: the browser default indents a blockquote by 40px */
  margin: 18px 0 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--off-white);
  letter-spacing: -0.005em;
  flex-grow: 1;
}
.testimonial-person { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(var(--paper-rgb), 0.12); }
.testimonial-person strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; color: var(--accent); }
.testimonial-person span { font-size: 0.8rem; color: rgba(var(--paper-rgb), 0.55); }
/* Fixed-height cards. A long review scrolls inside its own card instead of
   stretching every card in the row; data-lenis-prevent on the blockquote
   lets the wheel reach it past the smooth-scroll layer. */
.testimonial-row blockquote {
  flex-grow: 0 !important;
  height: 9.6em;              /* six lines at 1.6 */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--paper-rgb), 0.35) transparent;
}
.testimonial-row blockquote::-webkit-scrollbar { width: 4px; }
.testimonial-row blockquote::-webkit-scrollbar-thumb { background: rgba(var(--paper-rgb), 0.35); border-radius: 4px; }
.testimonial-row blockquote:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.testimonial-person { margin-top: 18px; padding-top: 16px; }
.testimonial-stars {
  margin-top: 16px;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  line-height: 1;
}

/* Slider — switched on by js/script.js once there are more than three
   reviews. Desktop shows three at a time and moves one card per step; it is
   a native horizontal scroller underneath, so trackpad and keyboard work
   too. At phone width mobile.js turns the same list into its swipe shelf,
   and these desktop rules stand aside. */
.testimonial-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 34px; }
.testimonial-nav[hidden] { display: none; }
.testimonial-nav__btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid rgba(var(--paper-rgb), 0.28);
  background: transparent;
  color: var(--off-white);
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.testimonial-nav__btn svg { width: 17px; height: 17px; }
.testimonial-nav__btn:hover,
.testimonial-nav__btn:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--off-white); }
.testimonial-nav__dots { display: flex; gap: 8px; }
.testimonial-nav__dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(var(--paper-rgb), 0.28);
  cursor: pointer;
  transition: width 0.35s var(--ease), background 0.35s var(--ease);
}
.testimonial-nav__dots button.is-active { width: 22px; background: var(--accent); }

@media (min-width: 769px) {
  .testimonial-list.is-slider {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 52px) / 3);
    align-items: stretch;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* room for the lift on hover, which overflow would otherwise clip */
    padding-block: 10px 6px;
    margin-block: -10px -6px;
  }
  .testimonial-list.is-slider::-webkit-scrollbar { display: none; }
  .testimonial-list.is-slider > .testimonial-row { scroll-snap-align: start; margin-top: 0; }
  /* Real quotes run longer than the old one-liners; a step down keeps the
     cards from towering over the section. */
  .testimonial-list.is-slider .testimonial-row blockquote { font-size: 1.02rem; line-height: 1.6; }
  .testimonial-list.is-slider .testimonial-row { padding: 28px 28px 26px; }
}
@media (max-width: 1100px) and (min-width: 769px) {
  .testimonial-list.is-slider { grid-auto-columns: calc((100% - 26px) / 2); }
}
@media (max-width: 768px) {
  /* mobile.js draws its own dots under the shelf */
  .testimonial-nav { display: none; }
}

/* ==========================================================================
   Corporate band
   ========================================================================== */
.corporate-band {
  position: relative;
  background: var(--tan);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 64px 60px;
}
.corporate-band__icon {
  position: absolute;
  top: 50%; right: -4%;
  transform: translateY(-50%);
  width: clamp(180px, 20vw, 300px);
  height: clamp(180px, 20vw, 300px);
  color: rgba(var(--ink-rgb), 0.06);
  z-index: 0;
  pointer-events: none;
}
.corporate-band__inner {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.corporate-band__text .eyebrow { color: var(--accent); }
.corporate-band__text h3 { margin-top: 14px; font-size: clamp(1.5rem, 2.5vw, 2.05rem); color: var(--forest); max-width: 480px; }
.corporate-band__text p { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 440px; }

/* ==========================================================================
   Quiz teaser band
   ========================================================================== */
.quiz-band-section { padding-top: 0; }
.quiz-band {
  position: relative;
  background: var(--forest);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 64px 60px;
}
.quiz-band__icon {
  position: absolute;
  top: 50%; right: -4%;
  transform: translateY(-50%);
  width: clamp(180px, 20vw, 300px);
  height: clamp(180px, 20vw, 300px);
  color: rgba(var(--paper-rgb), 0.05);
  z-index: 0;
  pointer-events: none;
}
.quiz-band__inner {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.quiz-band__text .eyebrow { color: var(--accent); }
.quiz-band__text h3 { margin-top: 14px; font-size: clamp(1.5rem, 2.5vw, 2.05rem); color: var(--off-white); max-width: 480px; }
.quiz-band__text p { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: rgba(var(--paper-rgb), 0.68); max-width: 440px; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 70px; }
.faq-head { margin-bottom: 0; position: sticky; top: 120px; align-self: start; }

.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.12);
}
.faq-item:first-child { border-top: 1px solid rgba(var(--ink-rgb), 0.12); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--forest);
  transition: color 0.3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--sage); }
.faq-item[open] summary { color: var(--accent); }

.faq-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cream);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 0.4s var(--ease), background 0.3s var(--ease);
}
.faq-icon svg { width: 15px; height: 15px; color: var(--forest); transition: transform 0.4s var(--ease); }
.faq-item[open] .faq-icon { background: var(--accent); transform: rotate(90deg); }
.faq-item[open] .faq-icon svg { color: var(--off-white); }

.faq-item p {
  padding-bottom: 26px;
  padding-right: 60px;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta {
  position: relative;
  text-align: center;
  padding: 160px 0 150px;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.14), transparent 68%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
.final-cta .container { position: relative; z-index: 1; }
.final-cta h2 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 900px;
  margin-inline: auto;
}
.final-cta p { margin-top: 22px; color: var(--ink-soft); font-size: 1.18rem; }
.final-cta .hero-actions { justify-content: center; margin-top: 42px; }
.final-cta__guarantee {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.final-cta__guarantee svg { width: 16px; height: 16px; color: var(--sage); flex-shrink: 0; }

.final-cta__stamp {
  margin-top: 46px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--forest);
  color: rgba(var(--paper-rgb), 0.72);
  padding-top: 140px;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(var(--paper-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--paper-rgb), 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(var(--ink-rgb), 0) 0%, var(--forest) 78%);
  pointer-events: none;
}
.site-footer .container { position: relative; z-index: 1; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; padding-bottom: 72px; border-bottom: 1px solid rgba(var(--paper-rgb), 0.12); }
.footer-brand .brand { color: var(--off-white); }
.footer-brand .brand img { height: 38px; }
.footer-brand p { margin-top: 18px; font-size: 0.98rem; line-height: 1.75; max-width: 300px; }
.footer-contact { margin-top: 22px; display: flex; flex-direction: column; gap: 11px; }
.footer-contact li { display: flex; align-items: center; gap: 11px; font-size: 0.94rem; }
.footer-contact svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.footer-contact a { color: rgba(var(--paper-rgb), 0.86); transition: color 0.3s var(--ease); }
.footer-contact a:hover { color: var(--accent); }
.footer-social { display: flex; gap: 12px; margin-top: 22px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(var(--paper-rgb), 0.08);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease);
}
.footer-social a:hover { background: var(--accent); color: var(--forest); }
.footer-social svg { width: 17px; height: 17px; }
.footer-col h5 { font-family: var(--font-head); color: var(--off-white); font-size: 0.9rem; letter-spacing: 0.04em; margin-bottom: 20px; }
.footer-col ul { display: flex; flex-direction: column; gap: 13px; }
.footer-col a { font-size: 0.93rem; transition: color 0.3s var(--ease); }
.footer-col a:hover { color: var(--accent); }
.footer-newsletter p { font-size: 0.93rem; line-height: 1.65; margin-bottom: 18px; }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-form input {
  flex: 1;
  padding: 13px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--paper-rgb), 0.2);
  background: rgba(var(--paper-rgb), 0.06);
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.newsletter-form input::placeholder { color: rgba(var(--paper-rgb), 0.45); }
.newsletter-form button {
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--accent); color: var(--forest);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.newsletter-form button svg { width: 17px; height: 17px; }
.newsletter-note { font-size: 0.78rem; margin-top: 10px; color: rgba(var(--paper-rgb), 0.45); }

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 34px 0; font-size: 0.82rem; color: rgba(var(--paper-rgb), 0.5);
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Video popup (coach intro clips)
   ========================================================================== */
.video-modal {
  position: fixed; inset: 0;
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}
.video-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease), visibility 0s;
}
.video-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(var(--ink-rgb), 0.86);
  backdrop-filter: blur(6px);
}
.video-modal__dialog {
  position: relative;
  width: 100%;
  /* 9/16 of 88vh — keeps the portrait frame from letterboxing on short screens */
  max-width: min(520px, 49.5vh);
  aspect-ratio: 9 / 16;
  max-height: 88vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  background: #000;
  transform: scale(0.94);
  transition: transform 0.4s var(--ease);
}
.video-modal.is-open .video-modal__dialog { transform: scale(1); }
.video-modal__video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 1;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.55);
  color: var(--off-white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.video-modal__close svg { width: 18px; height: 18px; }
.video-modal__close:hover { background: var(--accent); transform: scale(1.08); }

/* ==========================================================================
   Coming soon popup (app-store buttons)
   ========================================================================== */
.app-modal {
  position: fixed; inset: 0;
  z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s;
}
.app-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s var(--ease), visibility 0s;
}
.app-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(var(--ink-rgb), 0.7);
  backdrop-filter: blur(6px);
}
.app-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-lg);
  padding: 44px 36px 40px;
  background: var(--off-white);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
  text-align: center;
  transform: scale(0.94);
  transition: transform 0.4s var(--ease);
}
.app-modal.is-open .app-modal__dialog { transform: scale(1); }
.app-modal__dialog .icon-badge { margin-inline: auto; }
.app-modal__dialog h3 { margin-top: 18px; font-size: 1.4rem; }
.app-modal__dialog p { margin-top: 12px; font-size: 0.96rem; line-height: 1.65; color: var(--ink-soft); }
.app-modal__dialog .btn { margin-top: 26px; }
.app-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 1;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(var(--ink-rgb), 0.06);
  color: var(--forest);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.app-modal__close svg { width: 16px; height: 16px; }
.app-modal__close:hover { background: var(--accent); color: var(--off-white); transform: scale(1.08); }

/* ==========================================================================
   Quiz page (quiz.html) — product finder
   ========================================================================== */
.quiz-hero {
  padding: 158px 0 120px;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--cream) 0%, var(--off-white) 100%);
}
.quiz-shell { max-width: 640px; margin-inline: auto; }

.quiz-intro { text-align: center; }
.quiz-intro .eyebrow { justify-content: center; color: var(--accent); }
.quiz-intro h1 { margin-top: 14px; font-size: clamp(2rem, 4vw, 3rem); }
.quiz-intro p { margin-top: 18px; font-size: 1.08rem; color: var(--ink-soft); line-height: 1.7; max-width: 480px; margin-inline: auto; }
.quiz-intro .btn { margin-top: 32px; }

.quiz-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(var(--ink-rgb), 0.06);
  padding: 48px 44px;
}

.quiz-progress { height: 4px; background: rgba(var(--ink-rgb), 0.08); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 36px; }
.quiz-progress__bar { height: 100%; width: 0%; background: var(--accent); border-radius: var(--radius-pill); transition: width 0.5s var(--ease); }

.quiz-step { display: none; }
.quiz-step.is-active { display: block; animation: quizStepIn 0.5s var(--ease); }
@keyframes quizStepIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.quiz-step__meta {
  display: inline-block;
  font-family: var(--font-head); font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent);
}
.quiz-step h2 { margin-top: 12px; font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.quiz-step__sub { margin-top: 12px; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; }

.quiz-options { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.quiz-option {
  text-align: left;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(var(--ink-rgb), 0.12);
  background: var(--off-white);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.quiz-option:hover { border-color: var(--accent); background: var(--cream); }
.quiz-option.is-selected { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.08); transform: translateX(4px); }

.quiz-email-form { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.quiz-email-form input { flex: 1 1 220px; padding: 16px 20px; border-radius: var(--radius-pill); border: 1.5px solid rgba(var(--ink-rgb), 0.15); font-family: var(--font-body); font-size: 1rem; background: var(--off-white); }
.quiz-email-form input:focus { outline: none; border-color: var(--accent); }
.quiz-skip { display: block; margin-top: 16px; background: none; border: none; padding: 0; font-size: 0.88rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }

.quiz-result { text-align: center; }
.quiz-result .icon-badge { margin-inline: auto; }
.quiz-result .eyebrow { justify-content: center; margin-top: 18px; color: var(--accent); }
.quiz-result h2 { margin-top: 12px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.quiz-result p#quizResultDesc { margin-top: 14px; font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); max-width: 440px; margin-inline: auto; }
.quiz-result__price { display: inline-block; margin-top: 18px; font-family: var(--font-head); font-weight: 700; color: var(--forest); background: var(--tan); padding: 8px 18px; border-radius: var(--radius-pill); font-size: 0.9rem; }
.quiz-result__actions { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.quiz-result .quiz-skip { margin-top: 0; }

.quiz-back {
  margin-top: 30px;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0;
  font-family: var(--font-head); font-weight: 700; font-size: 0.85rem;
  color: var(--ink-soft);
}
.quiz-back svg { width: 16px; height: 16px; }
.quiz-back:hover { color: var(--forest); }

/* ==========================================================================
   WhatsApp floating button
   ========================================================================== */
/*
 * A pill rather than a disc, so it can open on hover and say what it is
 * instead of relying on the visitor recognising the glyph. It was enlarged
 * once, to 78px, because the flat circle was being scrolled past — depth does
 * that job better than size, so it comes back down to 62px and earns its
 * place with a lit edge, a layered shadow and a halo that breathes.
 */
.wa-float {
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 998;
  height: 62px;
  padding: 0 17px;
  border-radius: var(--radius-pill);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  /* A light source at the top left, over the brand green. */
  background:
    radial-gradient(118% 118% at 28% 14%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 54%),
    linear-gradient(152deg, #3ae07d 0%, #25d366 46%, #0f9d52 100%);
  /* Lit top edge, shaded bottom edge, a close green shadow for the lift and a
     wide ink one for the depth. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 8px 18px -6px rgba(15, 157, 82, 0.5),
    0 26px 48px -20px rgba(var(--ink-rgb), 0.55);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), padding 0.55s var(--ease);
}
.wa-float:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14),
    0 12px 22px -6px rgba(15, 157, 82, 0.58),
    0 34px 60px -22px rgba(var(--ink-rgb), 0.6);
}
.wa-float:active { transform: translateY(-1px) scale(0.98); }
.wa-float:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }

.wa-float__icon { display: inline-flex; flex: none; }
.wa-float svg {
  width: 30px; height: 30px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
}

/* Closed to nothing until asked for, so the resting state stays a disc. */
.wa-float__label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  transition: max-width 0.55s var(--ease), opacity 0.3s var(--ease), margin-left 0.55s var(--ease);
}
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label {
  max-width: 200px;
  opacity: 1;
  margin-left: 10px;
}

/* Two rings, half a cycle apart — a slow breath rather than a blink. They
   follow the pill's shape, so they stay right when it opens. */
.wa-float::before,
.wa-float::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(37, 211, 102, 0.55);
  pointer-events: none;
  animation: wa-halo 3.4s var(--ease) infinite;
}
.wa-float::after { animation-delay: 1.7s; }
@keyframes wa-halo {
  0%   { transform: scale(1); opacity: 0.55; }
  70%  { opacity: 0; }
  100% { transform: scale(1.42); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float::before,
  .wa-float::after { animation: none; }
}
@media (max-width: 768px) {
  /* No hover to open it, so it stays a disc and the label never shows. */
  .wa-float { right: 18px; bottom: 18px; width: 58px; height: 58px; padding: 0; }
  .wa-float svg { width: 27px; height: 27px; }
  .wa-float__label { display: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 992px) {
  .hero-grid, .community, .coaches-grid, .faq-grid, .trainerize-grid, .app-grid { grid-template-columns: 1fr; }
  .app-grid { row-gap: 48px; }
  .app-phone { order: -1; }
  .pillars-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .faq-head { margin-bottom: 40px; position: static; }
  .faq-item p { padding-right: 0; }
  .hero-visual { order: -1; padding: 12px 12px 46px 0; }
  .hero-visual::before { top: 18px; right: -8px; }
  .hero-visual .ph { border-radius: var(--radius-lg); transform: rotate(-0.6deg); }

  /* Below 993px the hero is a single column and the scroll travel in
     js/script.js is switched off, so the card no longer needs to out-stack
     the sections underneath it. Leaving it at z-index 20/30 meant any
     stray transform painted it straight over the marquee and belief
     sections instead of scrolling away with its own section. */
  .hero .container { z-index: 1; }
  .hero-visual .ph { z-index: auto; }
  .hero-copy { padding-bottom: 0; }
  .hero { padding-bottom: 90px; }
  .hero-ghost { display: none; }
  .plan-cards { grid-template-columns: 1fr; }
  .plan-cards--single { max-width: none; }
  .plan-card, .plan-card--wide { grid-template-columns: 1fr 0.55fr; }
  .path-tab { padding: 12px 20px 12px 14px; }
  .path-tab__text strong { font-size: 0.92rem; }
  .steps-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .step-card:nth-child(2n+1) { border-left: none; padding-left: 0; }
  .step-card:nth-child(-n+2) { border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); padding-bottom: 28px; }
  .testimonial-list { grid-template-columns: 1fr; }
  .testimonial-row:nth-child(2) { margin-top: 0; }
  .footer-top { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .proof-row { display: grid; grid-template-columns: repeat(4, 1fr); width: auto; }
  .proof-cell { flex: none; height: auto; }
  /* The cell loses its fixed height here, so .ph's height:100% would resolve
     to 0 and the photos would vanish — give it the same shape via ratio. */
  .proof-cell .ph { height: auto; aspect-ratio: 100 / 82; }
  .proof-cell::after { inset: 9px; }
  .proof-cell__mark { top: 20px; left: 20px; width: 28px; }
  .motion-row { display: grid; grid-template-columns: 1fr 1fr; width: auto; }
  .motion-cell { flex: none; height: 340px; }
  .motion-cell:nth-child(even) { margin-top: 0; }
  .motion-viewport { padding-top: 0; }
}
@media (max-width: 768px) {
  .nav-links, .nav-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .section { padding: 76px 0; }
  .app-phone__frame { width: 270px; }
  .app-phone__img { width: 184px; max-width: 100%; }
  .paths-logos { margin-top: 44px; padding-top: 36px; }
  .paths-logos__row { gap: 20px; }
  .paths-logos__row img { width: 80px; height: 80px; }
  /* Photo on top, copy beneath. The image is absolutely positioned inside
     its cell, so the cell needs an explicit ratio once it stops being
     stretched by the copy column beside it. */
  .plan-card, .plan-card--wide { grid-template-columns: 1fr; grid-template-areas: "media" "body" "pricing"; }
  .plan-card__media { aspect-ratio: 4 / 3; }
  .plan-card__body { padding: 26px 22px 24px; }
  .plan-card__pricing { padding: 18px 22px; }
  .plan-card__list--two { grid-template-columns: 1fr; }
  .path-tabs { flex-direction: column; width: 100%; border-radius: var(--radius-md); gap: 4px; }
  .path-tab { border-radius: var(--radius-md); width: 100%; }
  .path-panel__lead { text-align: left; }
  .path-panel__foot { justify-content: flex-start; }
  .paths-common { flex-direction: column; align-items: flex-start; padding: 22px 24px; gap: 14px; }
  .paths-common__list { flex-direction: column; gap: 11px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
  .stat-item:nth-child(odd) { border-right: 1px solid rgba(var(--ink-rgb), 0.1); }
  .stat-item:nth-child(3), .stat-item:nth-child(4) { border-bottom: none; }
  .hero { padding: 128px 0 70px; }
  .hero-proof { flex-wrap: wrap; }
  .hero-visual { padding: 10px 0 40px; }
  .hero-visual::before { top: 14px; right: -6px; }
  .proof-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: auto; }
  .proof-cell { flex: none; height: auto; }
  /* Two up rather than one narrow column — the clips are 9:16, so a single
     column left a wide empty gutter on the right. */
  .motion-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: auto; }
  .motion-cell { flex: none; width: auto; height: auto; aspect-ratio: 9 / 16; }
  .motion-cell:nth-child(even) { margin-top: 0; }
  .motion-viewport { padding-left: 24px; padding-right: 24px; padding-top: 0; overflow: visible; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { border-left: none; border-bottom: none; padding: 0; }
  .step-card:not(:first-child) { margin-top: 32px; }
  .pillars-grid { grid-template-columns: 1fr; row-gap: 28px; }
  .trainerize-panel { padding: 32px 26px; }
  .trainerize-list { grid-template-columns: 1fr; }
  .coach-card { flex-direction: column; padding: 30px; }
  .coach-card__photo { width: 76px; height: 76px; }
  .footer-top { grid-template-columns: 1fr; }
  .corporate-band__inner { flex-direction: column; text-align: center; justify-content: center; }
  .corporate-band__text h3, .corporate-band__text p { margin-inline: auto; }
  .corporate-band .btn { margin-inline: auto; }
  .corporate-band__icon { opacity: 0.6; }
  .quiz-band__inner { flex-direction: column; text-align: center; justify-content: center; }
  .quiz-band__text h3, .quiz-band__text p { margin-inline: auto; }
  .quiz-band .btn { margin-inline: auto; }
  .quiz-band__icon { opacity: 0.6; }
  .quiz-hero { padding: 128px 0 70px; }
  .quiz-card { padding: 32px 24px; }
  .quiz-email-form { flex-direction: column; }
  .quiz-email-form .btn { width: 100%; justify-content: center; }

  /* Mobile nav panel */
  .nav-links {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--forest);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    transform: translateX(100%);
    transition: transform 0.45s var(--ease);
    z-index: 998;
  }
  .nav-links.is-open { display: flex; transform: translateX(0); }
  .nav-links a:not(.btn) { color: var(--off-white); font-size: 1.3rem; }
  .nav-links a:not(.btn)::after { background: var(--accent); }
  .nav-links__cta { display: inline-flex; margin-top: 10px; }
}

/* App teaser — link row (dedicated app page + notify) */
.app-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 26px; }

/* Community — live Clubs & Quests line-up (dark section) */
.club-chips { margin-top: 30px; }
.club-chips__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.club-chips__label + ul { margin-bottom: 22px; }
.club-chips ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.club-chips li {
  font-size: 0.85rem;
  line-height: 1;
  padding: 8px 14px;
  border-radius: 999px;
  color: rgba(var(--paper-rgb), 0.82);
  background: rgba(var(--paper-rgb), 0.06);
  border: 1px solid rgba(var(--paper-rgb), 0.16);
}
.club-chips li.is-soon {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.1);
}
.club-chips__note { margin-top: 4px; font-size: 0.8rem; color: rgba(var(--paper-rgb), 0.5); }

/* ==========================================================================
   App-store buttons on a LIGHT section
   The base .app-store-btn rules above are written for the dark home teaser
   (.app-section). On app.html the same buttons sit on cream, where the
   light-on-light label was unreadable — these restate them in ink.
   ========================================================================== */
.section--cream .app-store-btn,
.section--white .app-store-btn {
  background: var(--white);
  border-color: rgba(var(--ink-rgb), 0.14);
}
.section--cream .app-store-btn:hover,
.section--white .app-store-btn:hover {
  background: var(--cream);
  border-color: rgba(var(--ink-rgb), 0.3);
}
.section--cream .app-store-btn__text small,
.section--white .app-store-btn__text small {
  color: var(--ink-soft);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}
.section--cream .app-store-btn__text strong,
.section--white .app-store-btn__text strong {
  color: var(--forest);
}

/* ==========================================================================
   Swipe hint — a mobile-only affordance for the horizontal media rails.
   Above 768px the rails are panned by scroll (see js/script.js), so there
   is nothing to swipe and the label would be a lie. Hidden by default;
   css/mobile.css turns it on.
   ========================================================================== */
.swipe-hint { display: none; }

/* ==========================================================================
   DARK MODE — surface corrections

   The token swap in :root[data-theme="dark"] handles most of the site on its
   own. What it cannot handle is the components that are deliberately DARK in
   light mode: a straight swap would turn each of them into a glaring light
   slab in the middle of a dark page.

   Those surfaces keep their own pair (--band / --band-ink) instead. Each one
   also re-points --off-white and --paper-rgb locally, because the rules for
   their children were written for a dark ground — "light text, light
   hairlines" — and custom properties inherit, so one declaration here fixes
   every descendant without touching any of them.
   ========================================================================== */
:root[data-theme="dark"] .section--forest,
:root[data-theme="dark"] .app-section,
:root[data-theme="dark"] .motion-section,
:root[data-theme="dark"] .community-section,
:root[data-theme="dark"] .consult-band,
:root[data-theme="dark"] .cta-band,
:root[data-theme="dark"] .quiz-band,
:root[data-theme="dark"] .site-footer,
:root[data-theme="dark"] .strip--forest,
:root[data-theme="dark"] .marquee,
:root[data-theme="dark"] .bento__cell--dark,
:root[data-theme="dark"] .stack__card--dark,
:root[data-theme="dark"] .founder,
:root[data-theme="dark"] .summary,
:root[data-theme="dark"] .matrix thead th {
  background: var(--band);
  color: var(--band-ink);
  --off-white: var(--band-ink);
  --paper-rgb: var(--band-ink-rgb);
  --forest-soft: var(--band-soft);
}

/* The footer draws its own grid and vignette, both keyed to --forest — the
   dark green it sits on in the light theme. In dark mode --forest is the
   light end of the palette, so the vignette washed the footer out, and the
   band rule above drops the grid with its background shorthand. Repaint both
   from the band colour so the footer stays dark and keeps its texture. */
:root[data-theme="dark"] .site-footer {
  background-color: var(--band);
  background-image:
    linear-gradient(rgba(var(--band-ink-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--band-ink-rgb), 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center top;
}
:root[data-theme="dark"] .site-footer::before {
  background: radial-gradient(ellipse 60% 50% at 50% 0%, transparent 0%, var(--band) 78%);
}

/* Tan is a light sand in both themes, so a tan surface in dark mode is an
   island of light — and everything on it (headings via --forest, body via
   --ink, hairlines via --ink-rgb) had flipped to the light end of the
   palette, leaving near-white text on near-white. Hand these surfaces the
   light-theme pair back; because custom properties inherit, one declaration
   fixes every child without touching their own rules. */
:root[data-theme="dark"] .corporate-band,
:root[data-theme="dark"] .coach-card--tan,
:root[data-theme="dark"] .strip--tan,
:root[data-theme="dark"] .bento__cell--tan,
:root[data-theme="dark"] .icon-badge--tan,
:root[data-theme="dark"] .quiz-result__price {
  color: #0c2119;
  --ink: #0c2119;
  --ink-rgb: 12, 33, 25;
  --ink-soft: rgba(12, 33, 25, 0.68);
  --forest: #0c2119;
  --forest-soft: #1c3a2c;
  --off-white: #fbf9f8;
  --paper-rgb: 251, 249, 248;
}

/* The accent-filled cells are already a strong colour; they only need their
   on-surface pair corrected. */
:root[data-theme="dark"] .bento__cell--accent,
:root[data-theme="dark"] .bento__cell--on-dark {
  --off-white: var(--band-ink);
  --paper-rgb: var(--band-ink-rgb);
}

/* Photography sits on this while it loads, and behind any transparent PNG. */
:root[data-theme="dark"] .page-hero__media,
:root[data-theme="dark"] .ph { background: var(--band-soft); }

/* A white card inside a dark band is now a dark card, so the heading rule
   that forced it back to forest would render light-on-light. */
:root[data-theme="dark"] .section--forest .form-card h2,
:root[data-theme="dark"] .section--forest .form-card h3,
:root[data-theme="dark"] .section--forest .form-card h4 { color: var(--band-ink); }

/* Photos and video carry their own light, so they are dimmed a touch rather
   than left glowing against the darker page. */
:root[data-theme="dark"] .ph img,
:root[data-theme="dark"] .ph video,
:root[data-theme="dark"] .motion-cell video,
:root[data-theme="dark"] .page-hero__media img { filter: brightness(0.92); }

/* The wordmark ships in two files; the light one is the readable one here. */
:root[data-theme="dark"] .brand img { filter: none; }
:root[data-theme="dark"] .site-header .brand .brand__mark--dark { display: none; }
:root[data-theme="dark"] .site-header .brand .brand__mark--light { display: block; }

/* How it works: a 28% outline vanishes into the dark ground, so the step
   numbers take a firmer stroke and a faint fill. */
:root[data-theme="dark"] .step-card .step-num {
  color: rgba(var(--sage-rgb), 0.16);
  -webkit-text-stroke: 1.5px rgba(var(--sage-rgb), 0.8);
}

/* How it works (the stacked process cards on Coaching and Corporate): same
   problem, same fix. */
:root[data-theme="dark"] .stack__num,
:root[data-theme="dark"] .stack__card--dark .stack__num {
  color: rgba(var(--ink-rgb), 0.12);
  -webkit-text-stroke: 1.4px rgba(var(--ink-rgb), 0.75);
}

/* Trainerize: the white mark stands in for the dark one on a dark page. */
.trainerize-copy__logo--on-dark { display: none; }
:root[data-theme="dark"] .trainerize-copy__logo { display: none; }
:root[data-theme="dark"] .trainerize-copy__logo.trainerize-copy__logo--on-dark { display: block; }

/* Repainting every surface at once is the one moment a transition helps —
   without it the switch reads as a flash. */
body,
.site-header,
.section,
.site-footer {
  transition: background-color 0.32s var(--ease), color 0.32s var(--ease),
              border-color 0.32s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  body, .site-header, .section, .site-footer { transition: none; }
}

/* ==========================================================================
   THEME TOGGLE — sun in light mode, moon in dark
   One button, two icons cross-fading, so the control never changes size.
   ========================================================================== */
.theme-toggle { position: relative; cursor: pointer; border: 0; }
.theme-toggle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}
.theme-toggle__sun { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
.theme-toggle__moon { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg); }
:root[data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
:root[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: none; }
}

/* ==========================================================================
   FAQ groups — labelled dividers inside a single faq-list, used where one
   page carries more than one of the client's FAQ sets (Elite + Remote +
   cancellation, Blueprint + Flex + validity, and so on).
   ========================================================================== */
.faq-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 54px;
  padding-bottom: 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.faq-group::before {
  content: "";
  flex-shrink: 0;
  width: 22px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.faq-list > .faq-group:first-child { margin-top: 0; }
.faq-group + .faq-item { border-top: 1px solid rgba(var(--ink-rgb), 0.12); }
/* ===== Home hero — Tablet landscape (993px–1199px) ===== */
@media (min-width: 993px) and (max-width: 1199px) {
  .hero-grid { gap: 28px; }
  .hero-copy h1 { font-size: clamp(2.3rem, 4.2vw, 3.2rem); }
  .hero-copy p { font-size: 1.05rem; }

  /* Video card chhota taaki belief section ke left half mein fit ho */
  .hero-visual .ph { max-width: 400px; max-height: 460px; }
  .hero-visual::before { width: 400px; }

  /* Quote right half tak hi rahe, video se overlap na kare */
  .belief { padding: 160px 0; min-height: 560px; }
  .belief-copy { max-width: 46%; }
  .belief-copy blockquote { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
  .belief-copy .quote-mark { width: 52px; height: 52px; }
}

/* ===== Home hero — Tablet portrait (769px–992px) ===== */
@media (min-width: 769px) and (max-width: 992px) {
  .hero { padding: 120px 0 70px; }
  .hero-grid { gap: 36px; }

  /* Video card center mein, background panel uske saath aligned */
  .hero-visual {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 12px 12px 40px 0;
  }
  .hero-visual .ph { max-width: 460px; margin-left: auto; }
  .hero-visual::before { width: 460px; max-width: calc(100% - 4px); }

  .hero-copy { text-align: center; }
  .hero-copy p { margin-left: auto; margin-right: auto; max-width: 560px; }
  .hero-actions { justify-content: center; }
  .hero-proof { margin-left: auto; margin-right: auto; }

  /* Is width par video scroll karke neeche nahi aati,
     isliye belief section ka khali left gap hatao */
  .belief { display: block; min-height: 0; padding: 90px 0; }
  .belief-inner { justify-content: center; }
  .belief-copy { max-width: 640px; text-align: center; }
  .belief-copy .quote-mark { width: 54px; height: 54px; margin: 0 auto; }
  .belief-copy blockquote { font-size: clamp(1.7rem, 4vw, 2.3rem); }
}