/* =========================================================
   CM Performance Coaching — shared stylesheet
   Design tokens pulled from the live Wix site's computed CSS
   (see reference/08-design-system.md for the source data).
   ========================================================= */

:root {
  /* Colors */
  --color-navy: #2D3E4D;
  --color-navy-dark: #24323F;
  --color-gold: #DFAF41;
  --color-gold-light: #F1BC41;
  --color-white: #FFFFFF;
  --color-offwhite: #FBFBFB;
  --color-card-bg: #E8E6E6;
  --color-text: #1A1A1A;
  --color-text-muted: #55606B;
  --color-border: #E0E0E0;

  /* Type */
  --font-base: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Layout */
  --container-width: 1200px;
  --radius: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --header-height: 84px;

  /* Hero overlay — kept as a token so each page can compose it with its own
     image in an inline style. The image URL must live in the inline style, not
     in a custom property: a relative url() inside a custom property resolves
     against the stylesheet that consumes it (css/), not the page, so
     "img/hero.jpg" would be fetched as "css/img/hero.jpg" and 404. */
  --hero-overlay: linear-gradient(180deg, rgba(36,50,63,0.55), rgba(36,50,63,0.82));

  /* Shadows */
  --shadow-soft: 0 24px 60px rgba(20, 28, 36, 0.18);
  --shadow-card: 0 14px 34px rgba(45, 62, 77, 0.1);
}

/* ---------- Reset ---------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The header is position:sticky, so an in-page anchor would otherwise land
     with its target tucked underneath it. Keep a header's worth of clearance
     plus a little breathing room. */
  scroll-padding-top: calc(var(--header-height) + 20px);
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
  /* Required alongside the width/height attributes on <img>. Those attributes
     are presentational hints, so when max-width shrinks the width the height
     would otherwise stay at its literal pixel value and distort the image.
     Keeping the attributes (for layout stability) means keeping this. */
  height: auto;
}

a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-base);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

h1 { font-size: 36px; }
h2 { font-size: 29px; }
h3 { font-size: 19px; }
h4 { font-size: 16px; }

p {
  margin: 0 0 16px;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 38px 0;
}

.section--offwhite {
  background: var(--color-offwhite);
}

.section--navy {
  background: var(--color-navy);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.section--navy .container {
  position: relative;
}

/* Stats band — was solid navy; lightened so navy reads as an accent color
   sitewide instead of a default background (see reference design audit). */
.section--stats {
  background: var(--color-offwhite);
  color: var(--color-text);
}

.section--stats .stat-tile {
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.section--stats .stat-tile__caption {
  color: var(--color-text-muted);
}

.section-heading {
  text-align: center;
  font-size: 29px;
  font-weight: 800;
  margin-bottom: 10px;
}

.section-heading .accent {
  color: var(--color-gold);
}

.section--navy .section-heading,
.section--navy h2 {
  color: var(--color-white);
}

.section-subheading {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: 22px;
  font-size: 16.5px;
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

.section--navy .section-subheading {
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- Header ---------- */
.site-header {
  background: var(--color-navy);
  height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.site-header__logo {
  display: flex;
  align-items: center;
}

.site-header__logo img {
  height: 52px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav a {
  color: var(--color-white);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-gold);
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--color-white);
  padding: 4px;
  cursor: pointer;
  line-height: 0;
}

/* Persistent "Find Your Plan" CTA shown in the header itself on mobile,
   since the full nav (including the in-nav CTA pill) is hidden behind the
   hamburger there — without this, the site's primary CTA disappears
   entirely until a visitor thinks to open the menu. */
.nav-cta--header {
  display: none;
}

/* Prevent background scroll while the mobile menu is open (see js/main.js) */
body.nav-open {
  overflow: hidden;
}

/* ---------- Nav CTA pill ("Find Your Plan") ---------- */
.nav-cta {
  border: 1.5px solid var(--color-gold) !important;
  border-radius: var(--radius-pill);
  padding: 9px 20px !important;
  color: var(--color-gold) !important;
  font-weight: 700 !important;
}

.nav-cta:hover,
.nav-cta[aria-current="page"] {
  background: var(--color-gold);
  color: var(--color-navy-dark) !important;
}

/* ---------- Icons (inline SVG, replaces emoji) ---------- */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 700;
  border: 1.75px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy-dark);
  box-shadow: 0 8px 20px rgba(223, 175, 65, 0.28);
}

.btn-secondary {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: var(--color-white);
}

.btn-outline {
  background: transparent;
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.btn[disabled],
.btn.btn-placeholder {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 100px 0 72px;
  background-image: var(--hero-overlay);
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  text-align: center;
  overflow: hidden;
}

.hero .container {
  position: relative;
}

/* Floating stat strip that overlaps the bottom edge of the hero,
   Runna-style layered card treatment. */
.hero-stats {
  position: relative;
  z-index: 5;
  max-width: 880px;
  margin: 56px auto -76px;
  background: var(--color-navy-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* Reserves the extra top padding the hero-stats overlap needs so it never
   collides with this section's heading. Class-based (not inline) so the
   mobile override below can reduce it once the overlap itself shrinks. */
/* Hero padding-bottom is now 72px against a -76px stats overlap, so the card
   crosses ~4px into this section. 68px leaves ~64px of clearance, in step with
   the tightened section rhythm (was 160px, which left a ~180px void). */
.section--hero-overlap-spacer {
  padding-top: 68px;
}

.hero-stats__item {
  text-align: center;
  padding: 28px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-stats__item:last-child {
  border-right: none;
}

.hero-stats__number {
  font-size: 26px;
  font-weight: 800;
  color: var(--color-gold);
  letter-spacing: -0.01em;
}

.hero-stats__label {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.hero h1 {
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.hero h1 .accent {
  color: var(--color-gold);
  display: block;
}

.hero p.lede {
  font-size: 19px;
  max-width: 720px;
  margin: 0 auto 26px;
}

.page-hero {
  padding: 52px 0;
}

.page-hero h1 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-hero .accent {
  color: var(--color-gold);
  display: block;
  font-size: 34px;
}

/* ---------- Grids ---------- */
.grid {
  display: grid;
  gap: 26px;
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

/* ---------- Stat tile ---------- */
.stat-tile {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(223, 175, 65, 0.2);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
}

.stat-tile__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 19px;
}

.stat-tile__number {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-tile__label {
  color: var(--color-gold);
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-tile__caption {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- Card (service / compare) ---------- */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card .badge {
  margin-bottom: 12px;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(45, 62, 77, 0.16);
}

.card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: rgba(223, 175, 65, 0.12);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 20px;
}

.card__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-gold);
  margin-bottom: 8px;
}

/* Card headings here are full sentences rather than short labels, so they wrap
   to 3-4 lines. Tighter size and leading keep three cards inside one desktop
   viewport without shrinking body copy. */
.card h3 {
  font-size: 17px;
  line-height: 1.3;
  margin-bottom: 8px;
}

.card--secondary {
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  border-color: var(--color-navy-dark);
  color: var(--color-white);
  /* Was 1.07 — the scaled card overflows its grid row visually (transform
     doesn't affect layout), which pushed the section past one viewport and
     softens text rasterisation. 1.03 keeps the "featured" pop for less. */
  transform: scale(1.03);
  box-shadow: 0 26px 56px rgba(36, 50, 63, 0.32);
}

.card--secondary:hover {
  transform: scale(1.03) translateY(-6px);
}

.card--secondary h3 {
  color: var(--color-white);
}

.card--secondary p,
.card--secondary .card__list li {
  color: rgba(255, 255, 255, 0.82);
}

.card--secondary .card__eyebrow {
  color: var(--color-gold);
}

.card--secondary .pricing-tile__name,
.card--secondary .pricing-tile__duration {
  color: var(--color-white);
}

.card--secondary .badge--navy {
  background: var(--color-gold);
  color: var(--color-navy-dark);
}

.card p {
  color: var(--color-text-muted);
}

.card__list {
  margin: 12px 0 14px;
  flex-grow: 1;
}

.card__list--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.card__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.45;
}

/* ---------- Testimonials ---------- */
.testimonial {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
}

.testimonial__stars {
  color: var(--color-gold);
  font-size: 18px;
  margin-bottom: 16px;
}

.testimonial p {
  color: var(--color-text-muted);
  font-style: normal;
}

.testimonial__author {
  font-weight: 700;
  margin-top: 16px;
}

.testimonial__result {
  color: var(--color-gold);
  font-size: 14px;
}

/* ---------- FAQ accordion ---------- */
.faq {
  max-width: 820px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-white);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item__question {
  width: 100%;
  background: none;
  border: 0;
  text-align: left;
  padding: 24px 32px;
  font-size: 18px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: var(--color-text);
}

.faq-item__answer {
  padding: 0 32px;
  max-height: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  transition: max-height 0.25s ease, padding 0.25s ease;
}

.faq-item.is-open .faq-item__answer {
  padding: 0 32px 24px;
  max-height: 300px;
}

.faq-item__icon {
  transition: transform 0.2s ease;
  color: var(--color-gold);
}

.faq-item.is-open .faq-item__icon {
  transform: rotate(180deg);
}

.faq-cta {
  text-align: center;
  margin-top: 32px;
}

/* ---------- Compare table ---------- */
.compare-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: 0 16px 40px rgba(45, 62, 77, 0.1);
}

.compare-table__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s ease;
}

/* Used on pages that compare only 2 offers (label + 2 columns) instead of
   the full label + 3-offer table, e.g. Run Club vs. 1-on-1, or Custom Plan
   vs. 1-on-1 — keeps the grid from leaving a blank trailing column. */
.compare-table__row--3col {
  grid-template-columns: 1.4fr 1fr 1fr;
}

.compare-table__row:last-child {
  border-bottom: none;
}

.compare-table__row--header {
  background: var(--color-navy);
}

.compare-table__row:not(.compare-table__row--header):nth-of-type(even) {
  background: var(--color-offwhite);
}

.compare-table__row:not(.compare-table__row--header):hover {
  background: rgba(223, 175, 65, 0.07);
}

.compare-table__cell {
  padding: 24px;
  font-size: 15px;
  color: var(--color-text);
  display: flex;
  align-items: center;
}

.compare-table__cell--label {
  font-weight: 700;
  color: var(--color-navy);
}

.compare-table__row--header .compare-table__cell {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 136px;
  padding: 24px 20px;
}

.compare-table__row--header h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--color-white);
}

/* Header label cell — fills the otherwise-empty top-left corner of the
   table with a short orienting caption instead of blank navy space. */
.compare-table__row--header .compare-table__cell--label-header {
  align-items: flex-start;
  text-align: left;
  gap: 4px;
}

.compare-table__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-gold);
}

.compare-table__cell--label-header span:last-child {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-white);
}

.compare-table__price {
  font-size: 21px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 14px;
}

.compare-table__price span {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

/* Single-column spotlight (used on the Find Your Plan full comparison
   table to draw the eye to one recommended option). Scoped to nth-child(3)
   — the third grid column — and to non-header rows only, so the header
   stays one uniform navy band and the recommendation reads through a
   quiet background tint + top accent bar + badge instead. */
.compare-table--featured .compare-table__row:not(.compare-table__row--header) .compare-table__cell:nth-child(3) {
  background: rgba(223, 175, 65, 0.09);
}

.compare-table--featured .compare-table__row--header .compare-table__cell:nth-child(3) {
  box-shadow: inset 0 3px 0 var(--color-gold);
}

.compare-table__badge {
  display: inline-block;
  background: var(--color-gold);
  color: var(--color-navy-dark);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}

/* Yes/no/partial indicator cells within compare-table rows.
   Three states, not two: a "partial" mark keeps rows like "group guidance
   only" from reading as a full yes, which overstates what Run Club includes
   and quietly undercuts trust in every other row of the table. */
.cmp-yes,
.cmp-no,
.cmp-partial {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cmp-yes svg {
  color: var(--color-gold);
  flex-shrink: 0;
}

.cmp-no {
  color: var(--color-text-muted);
}

.cmp-no svg {
  color: var(--color-border);
  flex-shrink: 0;
}

.cmp-partial {
  color: var(--color-text);
}

.cmp-partial svg {
  color: var(--color-navy);
  opacity: 0.5;
  flex-shrink: 0;
}

.btn-sm {
  padding: 10px 18px;
  font-size: 14px;
}

/* Bottom action row on the full comparison table — buttons live here
   instead of in the header, so every header cell stays the same height
   regardless of which column is "featured." */
.compare-table__row--cta {
  background: var(--color-white) !important;
  border-top: 2px solid var(--color-navy);
}

.compare-table__row--cta .compare-table__cell {
  justify-content: center;
  padding: 20px 24px;
}

/* ---------- Mobile comparison cards ----------
   Stacking the grid table into one column on mobile left every value as an
   orphaned line with no visible plan context (a bare "Yes" underneath a
   feature label, with no column header nearby). Below ~900px we hide the
   table entirely and show a JS-built (see js/main.js) set of per-plan
   cards instead — same underlying data, one card per plan, each feature
   labeled inline so it's unambiguous while swiping through. */
.compare-cards {
  display: none;
}

@media (max-width: 900px) {
  .compare-table {
    display: none;
  }

  .compare-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .compare-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(45, 62, 77, 0.1);
  }

  .compare-card--featured {
    border-color: var(--color-gold);
    box-shadow: 0 16px 40px rgba(223, 175, 65, 0.22);
  }

  .compare-card__head {
    background: var(--color-navy);
    color: var(--color-white);
    padding: 24px 20px;
    text-align: center;
  }

  .compare-card__head h3 {
    font-size: 19px;
    color: var(--color-white);
    margin-bottom: 6px;
  }

  .compare-card__head .compare-table__badge {
    margin-bottom: 10px;
  }

  .compare-card__list {
    padding: 4px 20px;
  }

  .compare-card__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 14.5px;
  }

  .compare-card__item:last-child {
    border-bottom: none;
  }

  .compare-card__label {
    font-weight: 700;
    color: var(--color-navy);
    flex: 0 0 42%;
  }

  .compare-card__value {
    color: var(--color-text);
    text-align: right;
    flex: 1;
  }

  .compare-card__value .cmp-yes,
  .compare-card__value .cmp-no,
  .compare-card__value .cmp-partial {
    justify-content: flex-end;
    text-align: right;
  }

  .compare-card__cta {
    padding: 16px 20px 20px;
  }

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

/* =========================================================
   Distance badge tile (bold graphic distance marker, e.g. Training
   Plan Library) — inspired by shield-style distance badges seen on
   top-performing running sites.
   ========================================================= */
.distance-tile {
  text-align: center;
  padding: 8px;
}

.distance-tile__badge {
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  border: 3px solid var(--color-gold);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  box-shadow: 0 14px 30px rgba(45, 62, 77, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.distance-tile:hover .distance-tile__badge {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 20px 40px rgba(45, 62, 77, 0.3);
}

.distance-tile__name {
  font-weight: 700;
  font-size: 17px;
  color: var(--color-navy);
  margin-bottom: 6px;
}

.distance-tile__desc {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- Pricing / credential tiles ---------- */
.pricing-tile,
.credential-tile {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.pricing-tile {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.pricing-tile .btn {
  justify-content: center;
  white-space: nowrap;
}

.credential-tile {
  background: var(--color-card-bg);
  border: none;
  gap: 16px;
  justify-content: flex-start;
}

.credential-tile__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(223, 175, 65, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pricing-tile__name {
  font-weight: 700;
  font-size: 18px;
}

.pricing-tile__duration {
  color: var(--color-text-muted);
  font-size: 14px;
}

.pricing-tile__desc {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ---------- How it works ---------- */
.how-it-works {
  background: var(--color-offwhite);
  border-radius: var(--radius-md);
  padding: 32px;
}

.how-it-works__step {
  display: flex;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--color-border);
}

.how-it-works__step:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.how-it-works__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-navy-dark);
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-it-works__step h4 {
  color: var(--color-navy);
  margin: 0 0 4px;
}

.how-it-works__step p {
  margin: 0;
}

/* ---------- Closing CTA ---------- */
.closing-cta {
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.closing-cta h2 {
  font-size: 31px;
  color: var(--color-navy);
}

.closing-cta p {
  max-width: 560px;
  margin: 0 auto 32px;
  color: var(--color-text-muted);
}

.section--navy.closing-cta {
  border-top: none;
}

.section--navy.closing-cta h2 {
  color: var(--color-white);
}

.section--navy.closing-cta p {
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy);
  color: var(--color-white);
  padding-top: 48px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.site-footer h4 {
  margin-bottom: 16px;
}

.site-footer__brand p {
  color: rgba(255, 255, 255, 0.75);
  max-width: 420px;
}

.site-footer__email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white);
  text-decoration: underline;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.site-footer ul li {
  margin-bottom: 10px;
}

.site-footer ul li a {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer ul li a:hover {
  color: var(--color-gold);
}

.site-footer__bottom {
  padding: 20px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Placeholder image block (used where a real photo hasn't been sourced yet) ---------- */
.placeholder-photo {
  background: linear-gradient(145deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  color: var(--color-white);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 340px;
  font-weight: 700;
  text-align: center;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.placeholder-photo__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(223, 175, 65, 0.18);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-photo__caption {
  font-weight: 400;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Two-column layout (Coach page, Custom Plans page) ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Grid children default to min-width:auto, so an <img> with a width attribute
   (960px on the homepage / coach / run-club photos) forces its track wider than
   the container and pushes the page into horizontal scroll at desktop widths.
   Same failure mode as the pace calculator and the custom-plans grid. */
.two-col > * {
  min-width: 0;
}

/* ---------- Utility ---------- */
.text-center {
  text-align: center;
}

.mt-32 {
  margin-top: 18px;
}

/* ---------- Pace calculator (net-new — not in the original Wix export) ---------- */
.calculator {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  height: 550px;
  display: flex;
  flex-direction: column;
  background: var(--color-navy);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: var(--color-white);
}

.calculator__tabs {
  display: flex;
  flex-shrink: 0;
}

.calculator__tab {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: var(--color-white);
  padding: 16px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.calculator__tab.is-active {
  background: rgba(255, 255, 255, 0.02);
  border-bottom-color: var(--color-gold);
}

.calculator__panel {
  display: none;
  flex-direction: column;
  padding: 24px;
  flex: 1;
  min-height: 0;
}

.calculator__panel.is-active {
  display: flex;
}

.calculator__field {
  margin-bottom: 16px;
}

.calculator__field label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.8);
}

.calculator__field input,
.calculator__field select {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  font-size: 15px;
  font-family: var(--font-base);
}

.calculator__field select option {
  color: #000;
}

.calculator__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.calculator__result {
  border: 1px dashed var(--color-gold);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  margin-top: auto;
}

.calculator__result-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}

.calculator__result-value {
  font-size: 25px;
  font-weight: 700;
  color: var(--color-gold);
}

/* =========================================================
   Pace calculator page — left-biased calculator + reference sidebar
   ========================================================= */
.pace-page-grid {
  display: grid;
  grid-template-columns: 400px 440px;
  gap: 40px;
  align-items: start;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
}

.pace-page-grid__side {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.pace-table-card,
.zone-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

/* Height-matched to .calculator (measured at 550px) so the reference
   table reads as a deliberate pair with the calculator rather than a
   mismatched sidebar. Row count below is trimmed to fit inside it. */
.pace-table-card {
  height: 550px;
  display: flex;
  flex-direction: column;
}

.pace-table-card h3,
.zone-card h3 {
  color: var(--color-navy);
  margin-bottom: 6px;
}

.pace-table-card__desc {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 20px;
}

.pace-table-wrap {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--radius-md);
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

/* On narrow phones the 5-column table can still need a horizontal scroll
   even after the mobile padding/font tightening below — rather than let
   it cut off abruptly with no indication there's more, fade the last
   column into the card background so the scrollability reads as
   intentional. Toggled by js/main.js only when actually needed. */
.pace-table-wrap.is-scrollable::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(to right, transparent, var(--color-white) 75%);
  pointer-events: none;
}

.pace-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.pace-table thead th {
  background: var(--color-navy);
  color: var(--color-white);
  font-weight: 700;
  text-align: left;
  padding: 11px 12px;
}

.pace-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.pace-table tbody tr:last-child td {
  border-bottom: none;
}

.pace-table tbody tr:nth-child(even) {
  background: var(--color-offwhite);
}

.pace-table tbody tr:hover {
  background: rgba(223, 175, 65, 0.1);
}

.pace-table tbody td:first-child {
  font-weight: 700;
  color: var(--color-navy);
}

.pace-table tbody tr.is-highlighted {
  background: rgba(223, 175, 65, 0.16);
}

.zone-card {
  margin-bottom: 0;
}

.zone-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 18px;
}

.zone-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.zone-list__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.zone-list__dot--easy { background: #7FB3A3; }
.zone-list__dot--tempo { background: var(--color-gold); }
.zone-list__dot--threshold { background: #E08E45; }
.zone-list__dot--interval { background: #C85C5C; }
.zone-list__dot--race { background: var(--color-navy); }

.zone-list li strong {
  display: block;
  color: var(--color-navy);
  font-size: 15px;
  margin-bottom: 2px;
}

.zone-list li p {
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 0;
}

@media (max-width: 900px) {
  .pace-page-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }

  /* Grid items default to min-width: auto, i.e. their content's
     min-content size — with the tab row / inputs inside, that's wider
     than the stacked 1fr track, so the whole card was forced past the
     track (and off the edge of the screen) instead of shrinking to fit.
     min-width: 0 lets the item actually respect the track width. */
  .pace-page-grid > * {
    min-width: 0;
  }

  /* The fixed heights on .calculator/.pace-table-card exist only to keep
     the two-up desktop pairing visually matched. Once they stack instead
     of sitting side by side, height-matching no longer applies and a
     fixed height risks clipping wrapped label/button text on narrow
     screens, so both go back to natural height. */
  .pace-table-card {
    height: auto;
  }

  .calculator {
    height: auto;
    max-width: none;
  }

  .calculator__panel,
  .calculator__panel.is-active {
    flex: none;
  }

  .calculator__result {
    margin-top: 24px;
  }

  /* The reference table's desktop column padding (12px a side) was still
     wide enough at mobile widths to force ~65px of horizontal scroll
     inside its own wrapper — technically contained (overflow-x: auto on
     .pace-table-wrap keeps it from breaking the page), but scrolling a
     tiny 5-column table sideways is easy to miss. Tighten padding/font
     here so all 5 columns fit without needing that scroll. */
  .pace-table {
    font-size: 12px;
  }

  .pace-table thead th {
    padding: 9px 6px;
  }

  .pace-table tbody td {
    padding: 8px 6px;
  }
}

/* =========================================================
   Accessibility helpers
   ========================================================= */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--color-gold);
  color: var(--color-navy-dark);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  z-index: 100;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

/* =========================================================
   Top trust/availability bar
   ========================================================= */
.trust-bar {
  background: var(--color-navy-dark);
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  text-align: center;
  padding: 8px 24px;
}

.trust-bar a {
  color: var(--color-gold);
  text-decoration: underline;
}

/* =========================================================
   Badges (card labels — "Best Results" / "Best Value")
   ========================================================= */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.badge--gold {
  background: var(--color-gold);
  color: var(--color-navy-dark);
}

.badge--navy {
  background: var(--color-navy);
  color: var(--color-white);
}

/* =========================================================
   Problem-recognition list (homepage section 3)
   ========================================================= */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.problem-item {
  display: flex;
  gap: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.problem-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(45, 62, 77, 0.14);
}

.problem-item__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.problem-item p {
  margin: 0;
  color: var(--color-text-muted);
}

.problem-closing {
  text-align: center;
  max-width: 640px;
  margin: 40px auto 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
}

/* =========================================================
   Differentiator grid ("Why CM Performance")
   ========================================================= */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.diff-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.diff-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.1);
}

.diff-item__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.diff-item h3 {
  font-size: 18px;
  color: var(--color-white);
}

.diff-item p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  margin: 0;
}

/* Light-background variant, kept for any page that wants the diff-grid
   pattern without the dark section treatment. */
.diff-grid--light .diff-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.diff-grid--light .diff-item__icon {
  background: rgba(223, 175, 65, 0.15);
  color: var(--color-gold);
}

.diff-grid--light .diff-item h3 {
  color: var(--color-navy);
}

.diff-grid--light .diff-item p {
  color: var(--color-text-muted);
}

/* =========================================================
   How it works — numbered steps
   ========================================================= */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.step-tile {
  text-align: center;
}

.step-tile__number {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-navy-dark);
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 10px 24px rgba(223, 175, 65, 0.35);
}

.step-tile h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.step-tile p {
  color: var(--color-text-muted);
  font-size: 15px;
}

/* =========================================================
   Results / case-study cards
   ========================================================= */
.result-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-gold);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.result-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(45, 62, 77, 0.16);
}

.result-card__goal {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.result-card__row h3 {
  font-size: 14px;
  color: var(--color-navy);
  margin-bottom: 4px;
}

.result-card__row p {
  color: var(--color-text-muted);
  font-size: 15px;
  margin-bottom: 0;
}

.result-card__quote {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  margin-top: 4px;
  font-style: italic;
  color: var(--color-text);
}

.result-card__outcome {
  display: inline-block;
  align-self: flex-start;
  background: rgba(223, 175, 65, 0.15);
  color: var(--color-navy);
  font-weight: 700;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 999px;
}

/* =========================================================
   Decision-framework / scenario cards (Find Your Plan)
   ========================================================= */
.scenario-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: left;
}

.scenario-card__quote {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 16px;
}

.scenario-card__recommend {
  font-size: 13px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

/* =========================================================
   Recommendation tool (Find Your Plan quiz)
   ========================================================= */
.rec-tool {
  background: var(--color-offwhite);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 720px;
  margin: 0 auto;
}

.rec-tool__question {
  margin-bottom: 24px;
}

.rec-tool__question legend {
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 12px;
  padding: 0;
}

.rec-tool__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rec-tool__options label {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  font-size: 15px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.rec-tool__options label:hover {
  border-color: var(--color-gold);
}

.rec-tool__options label:has(input:checked) {
  border-color: var(--color-gold);
  background: rgba(223, 175, 65, 0.08);
  font-weight: 600;
}

.rec-tool__options input {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  accent-color: var(--color-gold);
}

.rec-tool__result {
  display: none;
  background: var(--color-white);
  border: 1.75px solid var(--color-gold);
  border-radius: var(--radius);
  padding: 24px;
  margin-top: 8px;
}

.rec-tool__result.is-visible {
  display: block;
}

.rec-tool__result h3 {
  color: var(--color-navy);
  margin-bottom: 8px;
}

/* =========================================================
   Forms (Contact / Start page)
   ========================================================= */
.form-field {
  margin-bottom: 20px;
}

.form-field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--color-navy);
}

.form-field .form-hint {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  font-size: 16px;
  font-family: var(--font-base);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355606B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 40px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(223, 175, 65, 0.18);
}

.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-field input:required:invalid,
.form-field textarea:required:invalid {
  box-shadow: none; /* avoid default red glow before the user interacts */
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-status {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 20px;
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status--success {
  background: rgba(223, 175, 65, 0.15);
  color: var(--color-navy);
  border: 1px solid var(--color-gold);
}

.form-status--error {
  background: rgba(200, 60, 60, 0.08);
  color: #7a2222;
  border: 1px solid rgba(200, 60, 60, 0.4);
}

/* =========================================================
   Prose (Privacy / Terms / policy pages)
   ========================================================= */
.prose {
  max-width: 720px;
  margin: 0 auto;
}

.prose h2 {
  margin-top: 40px;
  color: var(--color-navy);
  font-size: 22px;
}

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

.prose p,
.prose li {
  color: var(--color-text-muted);
}

.prose ul {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 16px;
}

.prose li {
  margin-bottom: 8px;
}

.draft-notice {
  background: rgba(223, 175, 65, 0.12);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 14px;
  color: var(--color-navy);
  margin-bottom: 32px;
}

/* =========================================================
   Sticky mobile CTA (1-on-1 Coaching / Run Club pages)
   ========================================================= */
.sticky-cta {
  display: none;
}

@media (max-width: 900px) {
  .sticky-cta.is-visible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-navy);
    color: var(--color-white);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    z-index: 50;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
  }

  .sticky-cta__price {
    font-size: 14px;
    line-height: 1.3;
  }

  .sticky-cta__price strong {
    display: block;
    font-size: 16px;
    color: var(--color-gold);
  }

  .sticky-cta .btn {
    padding: 12px 20px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* Keep sticky CTA from covering the last section's content */
  .has-sticky-cta {
    padding-bottom: 88px;
  }
}

/* =========================================================
   Run Club preview (homepage)
   ========================================================= */
.club-preview {
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: 48px;
}

.club-preview h2 {
  color: var(--color-white);
}

.club-preview p {
  color: rgba(255, 255, 255, 0.8);
}

.club-preview ul {
  margin: 20px 0 28px;
}

.club-preview ul li {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.9);
}

.club-preview ul li::before {
  content: "\2713";
  color: var(--color-gold);
  font-weight: 700;
  flex-shrink: 0;
}

/* =========================================================
   Comparison "Best for" callouts + neutral-flag styling
   ========================================================= */
.compare-note {
  font-size: 13px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* =========================================================
   Responsive — mobile layout overrides
   ========================================================= */
@media (max-width: 900px) {
  .grid--3,
  .grid--4,
  .grid--2,
  .two-col,
  .site-footer__grid,
  .card__list--two-col {
    grid-template-columns: 1fr;
  }

  .grid--3 > *,
  .grid--4 > *,
  .grid--2 > *,
  .two-col > *,
  .site-footer__grid > * {
    min-width: 0;
  }

  /* The 1.07x "spotlight" scale is meant to pop against two neighboring
     cards in a row. Once cards stack full-width, the scale just risks
     the card overflowing its column, so drop it and let the dark
     background + badge carry the emphasis instead. */
  .card--secondary,
  .card--secondary:hover {
    transform: none;
  }

  .card--secondary:hover {
    box-shadow: 0 24px 48px rgba(36, 50, 63, 0.32);
  }

  .site-header {
    height: 76px;
  }

  .site-header__logo img {
    height: 46px;
  }

  .hero h1 {
    font-size: 42px;
  }

  .page-hero h1 {
    font-size: 34px;
  }

  .page-hero .accent {
    font-size: 28px;
  }

  .site-nav {
    display: none;
  }

  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-navy);
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 20;
    overflow-y: auto;
  }

  .nav-toggle {
    display: block;
  }

  /* The in-nav CTA pill is redundant once the always-visible header CTA
     (.nav-cta--header, below) exists on mobile — hide it here so "Find
     Your Plan" doesn't appear twice when the menu is open. */
  .site-nav .nav-cta {
    display: none;
  }

  .nav-cta--header {
    display: inline-flex;
    font-size: 13px;
    padding: 7px 14px !important;
    margin-right: 16px;
    white-space: nowrap;
  }

  .site-header .container {
    justify-content: flex-start;
  }

  .site-header__logo {
    margin-right: auto;
  }

  .section {
    padding: 40px 0;
  }

  .problem-grid,
  .diff-grid,
  .steps-grid,
  .form-row {
    grid-template-columns: 1fr;
  }

  .club-preview {
    padding: 28px 24px;
  }

  .hero {
    padding: 56px 0;
  }

  .page-hero {
    padding: 48px 0;
  }

  .section-heading {
    font-size: 28px;
  }

  .section-subheading {
    margin-bottom: 28px;
  }

  .hero-stats {
    margin-left: 24px;
    margin-right: 24px;
    max-width: none;
  }

  /* The stats card only reaches ~20px into this section at tablet widths, so
     the old 128px left a ~96px void under it. 76px gives ~56px of breathing
     room, in line with the rest of the page. */
  .section--hero-overlap-spacer {
    padding-top: 76px;
  }
}

@media (max-width: 480px) {
  .hero-stats {
    grid-template-columns: 1fr;
    margin: 32px 20px -40px;
  }

  .hero-stats__item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 18px 20px;
  }

  .hero-stats__item:last-child {
    border-bottom: none;
  }

  /* At phone widths the stats card stops short of this section entirely (the
     -40px margin only eats into the hero's own bottom padding), so there is no
     overlap left to clear — the old 140px was pure dead space. */
  .section--hero-overlap-spacer {
    padding-top: 32px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero p.lede {
    font-size: 17px;
  }

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

  /* Hero and closing CTAs stack on mobile, so give them a shared width rather
     than letting each size to its own label — otherwise a long price-bearing
     label ("Choose My Race Distance — from $39") wraps to two lines inside a
     pill-radius button and reads as broken next to a short one. Slightly
     tighter padding and type keep every current label on a single line down
     to 360px. */
  .hero .btn,
  .closing-cta .btn {
    width: 100%;
    max-width: 360px;
    padding-left: 18px;
    padding-right: 18px;
    text-align: center;
  }

  .hero .btn,
  .closing-cta .btn {
    font-size: 15px;
  }
}

/* =========================================================
   Elevated visual treatment — site-wide
   Originally built for the 1-on-1 page, now promoted to the shared
   component classes (.card, .problem-item, .how-it-works, .result-card,
   .faq, .compare-table, .credential-tile) so every page that uses these
   components gets the same richer, more colorful treatment.
   ========================================================= */

/* Gold underline anchor beneath centered section headings */
.section-heading {
  position: relative;
  padding-bottom: 18px;
}

.section-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
}

.section--navy .section-heading::after {
  background: linear-gradient(90deg, var(--color-gold-light), var(--color-white));
}

/* Hero CTA gets a warmer glow to match the richer palette below */
.hero .btn-primary {
  box-shadow: 0 14px 32px rgba(223, 175, 65, 0.45);
}

/* Feature/checklist rows (Who It's For, What's Included, Communication
   Expectations) — gold gradient check badge instead of a flat glyph,
   plus a gentle hover highlight so the lists feel interactive. */
.card__list li {
  padding: 10px 14px;
  border-radius: var(--radius);
  transition: background 0.2s ease, transform 0.2s ease;
}

.card__list li:hover {
  background: rgba(223, 175, 65, 0.08);
  transform: translateX(4px);
}

.card__list li::before {
  content: "\2713";
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-navy-dark);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(223, 175, 65, 0.35);
  margin-top: 1px;
  flex-shrink: 0;
}

/* Cards (What's Included / Coach credentials / pricing) — gold top accent bar */
.card {
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light), var(--color-gold));
}

/* Problem-solved cards — gradient icon with glow + gold accent on hover */
.problem-item {
  border-left: 3px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.problem-item:hover {
  border-left-color: var(--color-gold);
}

.problem-item__icon {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  box-shadow: 0 6px 16px rgba(223, 175, 65, 0.35);
}

/* How It Works timelines — bigger gradient numbered circles connected by
   a vertical line, elevated card background instead of a flat offwhite box. */
.how-it-works {
  background: linear-gradient(180deg, var(--color-white), var(--color-offwhite));
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.how-it-works__step {
  position: relative;
  transition: transform 0.2s ease;
}

.how-it-works__step:hover {
  transform: translateX(4px);
}

.how-it-works__num {
  width: 44px;
  height: 44px;
  font-size: 16px;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  box-shadow: 0 6px 16px rgba(223, 175, 65, 0.4);
  position: relative;
  z-index: 1;
}

.how-it-works__step:not(:last-child) .how-it-works__num::after {
  content: "";
  position: absolute;
  top: 44px;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(180deg, var(--color-gold), rgba(223, 175, 65, 0.15));
}

/* Result cards — gradient top edge + a subtle oversized quote mark */
.result-card {
  border-top: none;
  position: relative;
  overflow: hidden;
}

.result-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light), var(--color-gold));
}

.result-card__quote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, serif;
  font-size: 36px;
  line-height: 1;
  color: rgba(223, 175, 65, 0.4);
  margin-bottom: -8px;
}

/* Coach credential tiles — gradient icon + hover nudge */
.credential-tile {
  transition: transform 0.2s ease;
}

.credential-tile:hover {
  transform: translateX(4px);
}

.credential-tile__icon {
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  color: var(--color-navy-dark);
  box-shadow: 0 4px 12px rgba(223, 175, 65, 0.35);
}

/* Comparison table — gold gradient cap */
.compare-table {
  position: relative;
}

.compare-table::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light), var(--color-gold));
  z-index: 2;
}

/* FAQ — gold accent rail on the open question + deeper card shadow */
.faq {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.faq-item {
  border-left: 3px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.faq-item.is-open {
  border-left-color: var(--color-gold);
  background: rgba(223, 175, 65, 0.04);
}

.faq-item__question {
  font-weight: 600;
}

/* =========================================================
   Site-wide color pass — reduce large flat-white stretches
   ========================================================= */

/* Subpage titles (FAQ, Results, Find Your Plan, Contact, Pace Calculator,
   Meet the Coach, Privacy, Terms) previously sat on plain white with no
   color at all above the fold. These opening sections hold a mix of
   content (accordions, tables, forms, prose) below the title, so rather
   than recoloring the whole section — which would force every nested
   component to be restyled for contrast — add a soft brand-colored glow
   behind just the title area and a thin gold accent line across the top.
   Pages that already carry their own .hero image background (marked
   with the "hero" class) are excluded so we don't double up. */
main > section:first-child:not(.hero) {
  position: relative;
  overflow: hidden;
}

main > section:first-child:not(.hero)::before {
  content: "";
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  max-width: 180%;
  height: 460px;
  background: radial-gradient(closest-side, rgba(223, 175, 65, 0.16), rgba(45, 62, 77, 0.08) 62%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}

main > section:first-child:not(.hero)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-navy), var(--color-gold), var(--color-navy));
  z-index: 1;
}

main > section:first-child:not(.hero) .container {
  position: relative;
  z-index: 1;
}

/* Off-white sections read almost identical to plain white; warm them
   very slightly with a gold tint so alternating sections read as an
   actual rhythm of color instead of two shades of the same white. */
.section--offwhite {
  background: linear-gradient(180deg, #FBFAF6, #F6F1E7);
}

/* Stat band — bring back a touch of navy instead of matching the
   surrounding offwhite exactly, so the numbers still feel like a
   distinct, brand-colored moment on the page. */
.section--stats .stat-tile {
  background: linear-gradient(180deg, var(--color-white), var(--color-offwhite));
  border: 1px solid rgba(223, 175, 65, 0.3);
  box-shadow: var(--shadow-card);
}

.section--stats .stat-tile__number {
  color: var(--color-navy);
}

/* =========================================================
   Checkout & confirmation (thank-you.html)
   ---------------------------------------------------------
   Uses only the tokens already defined at the top of this file —
   no new colors, no new custom properties.
   ========================================================= */

/* Narrower reading column for the confirmation flow, so long-form
   instructions and the intake form don't stretch to the full 1200px. */
.container--narrow {
  max-width: 780px;
}

/* ---------- Confirmation banner ---------- */
.confirm-hero {
  padding: 80px 0 72px;
}

.confirm-hero__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.confirm-hero__check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 12px 30px rgba(223, 175, 65, 0.4);
}

.confirm-hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-gold-light);
  margin: 0 0 12px;
}

.confirm-hero h1 {
  color: var(--color-white);
  font-size: 44px;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.confirm-hero__sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  margin: 0;
}

/* ---------- Order summary ---------- */
.order-summary {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(223, 175, 65, 0.35);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-top: 36px;
  text-align: left;
}

.order-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.order-summary__row:last-of-type {
  border-bottom: none;
}

.order-summary__label {
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.order-summary__value {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 700;
  text-align: right;
}

.order-summary__value--price {
  color: var(--color-gold-light);
  font-size: 20px;
}

.order-summary__note {
  margin: 16px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.5;
}

/* ---------- What happens next ---------- */
.next-steps {
  list-style: none;
  counter-reset: next-step;
  margin: 40px 0 0;
  padding: 0;
}

.next-steps__item {
  counter-increment: next-step;
  position: relative;
  padding: 0 0 32px 68px;
}

.next-steps__item::before {
  content: counter(next-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-navy-dark);
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(223, 175, 65, 0.32);
}

/* Connecting line between the numbered markers, so the sequence reads as
   one path rather than four unrelated blocks. */
.next-steps__item::after {
  content: "";
  position: absolute;
  left: 21.5px;
  top: 52px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, rgba(223, 175, 65, 0.5), rgba(223, 175, 65, 0.12));
}

.next-steps__item:last-child {
  padding-bottom: 0;
}

.next-steps__item:last-child::after {
  display: none;
}

.next-steps__title {
  font-size: 19px;
  color: var(--color-navy);
  margin: 8px 0 6px;
}

.next-steps__body {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* ---------- Intake form card ---------- */
.intake-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 44px 48px;
}

.intake-card h2 {
  margin-top: 16px;
  font-size: 30px;
}

.intake-card__lead {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 32px;
}

.intake-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

/* Required-field marker. Gold rather than the conventional red, since
   nothing here is an error state — it's just guidance. */
.req {
  color: var(--color-gold);
  font-weight: 700;
}

/* ---------- Intake success state ---------- */
.intake-success {
  text-align: center;
  padding: 20px 0;
}

.intake-success__check {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-navy-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  box-shadow: 0 10px 26px rgba(223, 175, 65, 0.35);
}

.intake-success h2 {
  margin-top: 0;
  color: var(--color-navy);
}

.intake-success p {
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 460px;
  margin: 0 auto 12px;
}

.intake-success__hint {
  font-size: 14px !important;
  padding-top: 8px;
}

/* ---------- Support / order reference ---------- */
.confirm-support {
  margin: 28px 0 0;
}

.confirm-ref {
  margin: 28px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.confirm-ref code {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(223, 175, 65, 0.3);
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 13px;
  color: var(--color-gold-light);
  margin: 0 4px;
}

.confirm-ref__hint {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- Placeholder buttons ----------
   A CTA whose Stripe Payment Link isn't configured yet keeps this class.
   js/checkout.js removes it the moment a real link exists. Deliberately
   muted so an unconfigured button is obvious to you in testing without
   looking broken to a visitor who lands on it. */
.btn-placeholder {
  opacity: 0.72;
  cursor: not-allowed;
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .confirm-hero {
    padding: 56px 0 48px;
  }

  .confirm-hero h1 {
    font-size: 32px;
  }

  .confirm-hero__sub {
    font-size: 16px;
  }

  .order-summary {
    padding: 20px;
  }

  .order-summary__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .order-summary__value {
    text-align: left;
  }

  .intake-card {
    padding: 28px 22px;
  }

  .intake-card h2 {
    font-size: 24px;
  }

  .next-steps__item {
    padding-left: 56px;
    padding-bottom: 28px;
  }

  .next-steps__item::before {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .next-steps__item::after {
    left: 18.5px;
    top: 46px;
  }

  .next-steps__title {
    font-size: 17px;
    margin-top: 5px;
  }
}