@import './tokens.css?v=8';

/* Fonts are self-hosted (assets/fonts/) rather than imported from Google.
   An @import here would have blocked rendering behind a three-deep request
   chain: this file, then Google's CSS, then the font binaries. Self-hosting
   also stops every visitor's IP being sent to Google, which matters for GDPR.
   Inter and JetBrains Mono are single variable files covering every weight. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/anton-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2');
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
}
a { color: var(--accent-primary); }
a:hover { color: var(--accent-primary-hover); }
img { max-width: 100%; display: block; }

.overline {
  font-size: var(--overline-size);
  font-weight: var(--overline-weight);
  letter-spacing: var(--overline-tracking);
  text-transform: uppercase;
  color: var(--accent-primary);
  font-family: var(--font-body);
  margin-bottom: var(--space-4);
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--text-primary);
}

/* ---- Buttons (design-system Button) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent-primary);
  color: var(--accent-on-accent);
  border: none;
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.btn:hover { background: var(--accent-primary-hover); }
.btn:active { transform: scale(0.97); }
.btn-lg { padding: 0 28px; height: 54px; font-size: 15px; }
.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--bg-surface-hover); }
.btn-full { width: 100%; }
.btn-gold {
  background: linear-gradient(135deg, #d4af7a, #f0d9a8);
  color: #241a08;
  border: none;
  padding: 16px 28px;
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.btn-gold:hover { filter: brightness(1.05); }
.btn-gold:active { transform: scale(0.97); }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 48px;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header img { height: 50px; width: auto; object-fit: contain; }
.site-nav { display: flex; gap: 36px; }
.site-nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.site-nav a:hover { color: var(--text-primary); }

/* ---- Hero ---- */
.hero {
  position: relative;
  padding: 140px 48px 120px;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}
.hero img.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right 30%;
}
.hero video.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  opacity: 0; transition: opacity 0.9s ease;
}
.hero video.hero-video.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero video.hero-video { display: none; }
}
.hero .scrim-x { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.75) 42%, rgba(10,10,10,0.25) 75%, rgba(10,10,10,0.1) 100%); }
.hero .scrim-y { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0) 60%, rgba(10,10,10,0.85) 100%); }
.hero-content { position: relative; max-width: 780px; }
.hero h1 { font-size: var(--display-2xl-size); line-height: var(--display-2xl-line); }
.hero h1 span { color: var(--accent-primary); }
.hero p { margin-top: 28px; max-width: 520px; font-size: var(--text-lg-size); color: var(--text-secondary); line-height: 1.6; }
.hero-actions { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }

/* ---- Section shell ---- */
section { padding: 100px 48px; }
.section-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section-head.left { margin: 0 0 56px; text-align: left; }
.section-head h2 { font-size: var(--display-lg-size); line-height: var(--display-lg-line); }

/* ---- Programs ---- */
#programs { background: var(--bg-page); }
.tier-row {
  max-width: 1040px; margin: 0 auto 24px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px;
  align-items: stretch;
}
.tier-row.solo { grid-template-columns: 1fr; }
.tier-featured {
  background: var(--bg-surface-raised);
  border: 1px solid #d4af7a;
  border-radius: var(--radius-md);
  padding: 40px;
  box-shadow: 0 0 24px rgba(212,175,122,0.18);
  /* Flex column like .tier-programs, so the CTA sits below the feature list
     and margin-top:auto pins it to the card foot in both cards alike. */
  display: flex; flex-direction: column; gap: 28px;
}
.tier-programs {
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 40px;
  display: flex; flex-direction: column; gap: 28px;
}
.badge-green {
  display: inline-flex; align-items: center;
  background: var(--accent-primary);
  color: #08120a;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-sm);
}
.tier-programs .feature path { stroke: var(--accent-primary); }
.tier-price .from { color: var(--text-tertiary); font-size: 14px; margin-right: 6px; }
.tier-programs-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; }
#twm-programs { scroll-margin-top: 90px; }
/* Sticky header is ~80px tall: without this, anchor jumps tuck the top of the
   target section underneath it. Applies to every in-page nav destination. */
#app, #coach, #results, #faq, #programs, #free-week, #reviews-wall { scroll-margin-top: 80px; }
.badge-gold {
  display: inline-flex; align-items: center;
  background: linear-gradient(135deg, #d4af7a, #f0d9a8);
  color: #241a08;
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-sm);
}
.tier-featured .tier-title, .tier-programs .tier-title { font-family: var(--font-display); text-transform: uppercase; font-size: 32px; color: var(--text-primary); margin-top: 16px; }
.tier-featured .tier-price, .tier-programs .tier-price { margin-top: 12px; display: flex; align-items: baseline; gap: 4px; }
.tier-featured .tier-price .amount, .tier-programs .tier-price .amount { font-family: var(--font-mono); font-size: var(--mono-lg-size); color: var(--text-primary); }
.tier-featured .tier-price .period, .tier-programs .tier-price .period { color: var(--text-tertiary); font-size: 14px; }
.tier-featured p, .tier-programs p { color: var(--text-secondary); font-size: 15px; line-height: 1.6; margin-top: 16px; max-width: 420px; }
.feature-list { display: flex; flex-direction: column; gap: 12px; }
.feature-list .feature { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text-secondary); }
.feature-list svg { flex-shrink: 0; }

.programs-intro { margin-top: 56px; margin-bottom: 28px; }
.programs-intro .title { font-family: var(--font-display); text-transform: uppercase; font-size: 24px; color: var(--text-primary); }
.programs-intro p { color: var(--text-secondary); font-size: 15px; line-height: 1.6; margin-top: 10px; max-width: 560px; }
/* Always 3 per row on desktop; admin-added products wrap into further rows (page shows at most 9). */
.program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1020px) and (min-width: 769px) { .program-grid { grid-template-columns: repeat(2, 1fr); } }
.program-card {
  position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/4;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
}
.program-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.program-card .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,0.9) 78%, rgba(10,10,10,0.98) 100%); pointer-events: none; }
.program-card .tags { position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 8px; pointer-events: none; }
.program-card .tags .brand { background: var(--accent-primary); color: var(--accent-on-accent); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; padding: 5px 9px; border-radius: var(--radius-sm); }
.program-card .tags .tag { background: rgba(10,10,10,0.75); color: var(--text-primary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 10px; border-radius: var(--radius-sm); }
.program-card .info { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; }
.program-card .info .name { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; line-height: 1; color: var(--text-primary); }
.program-card .info p { color: var(--text-secondary); font-size: 14px; line-height: 1.5; margin: 10px 0 0; }
.program-card .price { display: flex; align-items: baseline; gap: 4px; margin-top: 16px; }
.program-card .price .amount { font-family: var(--font-mono); font-size: var(--mono-md-size); color: var(--text-primary); }
.program-card .price .period { color: var(--text-tertiary); font-size: 12px; }
.program-card .trial-note { color: var(--accent-primary); font-size: 12px; font-weight: 600; margin-top: 6px; letter-spacing: 0.02em; }
/* The whole card is the link to that programme's landing page, no button, on
   the homepage grid and the /programs/ catalogue alike. Hover lifts the card
   and warms the border so it reads as clickable without needing a label. */
a.program-card {
  display: block; text-decoration: none; cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
a.program-card:hover {
  transform: translateY(-4px); border-color: var(--accent-primary);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
a.program-card:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { a.program-card:hover { transform: none; } }
/* Pill CTA (from the shimmer-button component, animation retired): dark
   core, hairline border, soft green inner glow that brightens on hover.
   Shared by the program cards' Get Started and the header's Apply Now. */
.pill-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  background: #0d0d0d; color: #fff; cursor: pointer; text-decoration: none;
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; font-family: var(--font-body);
  box-shadow: inset 0 -8px 10px rgba(62,205,94,.14);
  transition: box-shadow .3s ease-in-out, border-color .3s ease-in-out, transform .15s ease-in-out;
}
.pill-cta:hover { box-shadow: inset 0 -6px 14px rgba(62,205,94,.32); border-color: rgba(62,205,94,.45); }
.pill-cta:active { transform: translateY(1px); }
/* Gold variant: same gloss, glow matched to the 1:1 coaching gold (#d4af7a).
   Used by every Apply For 1:1 Coaching button (homepage + SEO landing pages).
   The hover color beats the global a:hover green (higher specificity), so
   the label warms to gold instead. cta-square drops the pill silhouette. */
.pill-cta.pill-gold { box-shadow: inset 0 -8px 10px rgba(212,175,122,.18); transition: box-shadow .3s ease-in-out, border-color .3s ease-in-out, background .2s ease-in-out, color .2s ease-in-out, transform .15s ease-in-out; }
.pill-cta.pill-gold:hover { background: linear-gradient(135deg, #d4af7a, #f0d9a8); color: #241a08; border-color: transparent; box-shadow: none; }
.pill-cta.cta-square { border-radius: var(--radius-sm); }
.program-card .get-started { pointer-events: auto; margin-top: 16px; }

/* ---- Join free today ---- */
.join-section { position: relative; background: var(--bg-surface-raised); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); overflow: hidden; }
.join-section .glow { position: absolute; inset: 0; opacity: 0.6; background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(62,205,94,0.12), transparent); }
.join-inner { position: relative; max-width: 1040px; margin: 0 auto; }
.join-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.join-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 36px; display: flex; flex-direction: column; }
.join-card .title { font-family: var(--font-display); text-transform: uppercase; font-size: 22px; color: var(--text-primary); }
.join-card .perks { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; flex: 1; }
.join-card .perks .perk { display: flex; align-items: center; gap: 8px; }
.join-card .perks span { color: var(--text-secondary); font-size: 14px; font-weight: 600; }
.join-card-premium { position: relative; background: var(--bg-surface-raised); border: 1px solid #d4af7a; box-shadow: 0 0 24px rgba(212,175,122,0.15); }
.join-card-premium .pill {
  position: absolute; top: 0; left: 32px; transform: translateY(-50%);
  background: linear-gradient(135deg, #d4af7a, #f0d9a8); color: #241a08;
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-sm);
}
.join-card-premium .title { margin-top: 6px; }
.fineprint { margin: 10px 0 0; color: var(--text-tertiary); font-size: 11px; line-height: 1.5; }

/* ---- App section ---- */
#app { background: var(--bg-page); display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; border-top: 1px solid var(--border-subtle); }
.app-mock { justify-self: center; width: 260px; height: 540px; border-radius: 32px; border: 2px solid var(--border-strong); background: var(--bg-surface); padding: 12px; box-shadow: var(--shadow-lg); }
.app-mock-screen { height: 100%; border-radius: 22px; background: var(--bg-sunken); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 12px; padding: 16px; color: var(--text-tertiary); font-size: 12px; }
.app-mock-screen .today-title { font-family: var(--font-display); color: var(--text-primary); text-transform: uppercase; font-size: 18px; }
.app-mock-screen .session { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 10px 12px; color: var(--text-secondary); }
.app-mock-screen .placeholder { margin-top: auto; text-align: center; color: var(--text-tertiary); }
/* Three-phone 3D stage: real app screenshots (admin -> Landing media), CSS-only devices. */
.app-stage { position: relative; display: flex; align-items: center; justify-content: center;
             gap: 6px; perspective: 1500px; perspective-origin: 50% 42%; padding: 24px 0 40px; }
.app-stage::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 6px; height: 26px;
                    background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(0,0,0,.55), transparent 70%); }
.as-dev { transform-style: preserve-3d; }
.as-phone { position: relative; width: clamp(128px, 15.5vw, 208px); aspect-ratio: 400 / 830;
            border-radius: clamp(18px, 2vw, 27px); padding: 2px;
            background: linear-gradient(115deg, #b9b9be 0%, #8e8e93 28%, #c9c9ce 50%, #87878c 74%, #b0b0b5 100%);
            box-shadow: 0 24px 48px rgba(0,0,0,.55); }
.as-phone img { display: block; width: 100%; height: 100%; object-fit: cover;
                border-radius: clamp(16px, 1.8vw, 25px); border: 4px solid #000; background: #000;
                box-sizing: border-box; }
.as-island { position: absolute; top: 4.2%; left: 50%; transform: translateX(-50%);
             width: 27%; height: 2.6%; border-radius: 999px; background: #000; z-index: 2; }
.as-phone::after { content: ''; position: absolute; inset: 2px; border-radius: clamp(16px, 1.8vw, 25px);
                   pointer-events: none;
                   background: radial-gradient(ellipse 60% 24% at 26% 3%, rgba(255,255,255,.16) 0%, transparent 62%),
                               linear-gradient(168deg, rgba(255,255,255,.05) 0%, transparent 26%); }
.as-left  { transform: rotateY(36deg) rotateX(2deg) translateZ(-44px) translateX(12px); }
.as-mid   { transform: translateZ(46px) scale(1.07); z-index: 2; }
.as-right { transform: rotateY(-36deg) rotateX(2deg) translateZ(-44px) translateX(-12px); }
/* Official store badges (Play PNG pre-cropped of its built-in padding, so
   both render at true equal height). Hover is ours: brand-green ring + lift. */
.store-badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.store-badges img { display: block; width: auto; height: 44px; }
.store-badges a { display: block; border-radius: 9px; transition: transform .16s ease, box-shadow .16s ease; }
.store-badges a:hover { transform: translateY(-2px);
  box-shadow: 0 0 0 1.5px var(--accent-primary), 0 8px 20px rgba(62, 205, 94, .22); }
.store-note { width: 100%; color: var(--text-tertiary); font-size: 12px; }
footer .store-badges { margin-top: 18px; gap: 8px; }
footer .store-badges img { height: 34px; }
footer .store-badges a { border-radius: 7px; }
.app-features { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; }
.app-features .feature { display: flex; gap: 16px; }
.app-features .feature svg { flex-shrink: 0; margin-top: 3px; }
.app-features .feature .title { color: var(--text-primary); font-weight: 700; font-size: 15px; }
.app-features .feature .desc { color: var(--text-secondary); font-size: 14px; margin-top: 4px; }

/* ---- Coach ---- */
#coach { background: var(--bg-sunken); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.coach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
/* Centre the words against the MAIN photo, not the photo + gallery strip:
   both columns are equal width, so a 4/5 aspect box on the text column is
   exactly the main photo's height, so the gallery hangs below, uncounted. */
@media (min-width: 861px) {
  .coach-grid > div:first-child { display: flex; flex-direction: column; justify-content: center; aspect-ratio: 4/5; }
  /* And centre the text block horizontally in its column: every child takes
     the same 480px rail, auto-margined, so left edges stay aligned while the
     block as a whole sits in the middle of the free space. */
  .coach-grid > div:first-child > * { width: 100%; max-width: 480px; margin-left: auto; margin-right: auto; }
}
.coach-grid h2 { font-size: var(--display-lg-size); line-height: var(--display-lg-line); }
.coach-grid > div:first-child p { margin-top: 24px; color: var(--text-secondary); font-size: var(--text-lg-size); line-height: 1.6; max-width: 480px; }
.coach-stats { display: flex; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
.coach-stats .value { font-family: var(--font-mono); font-size: var(--mono-lg-size); color: var(--accent-primary); }
.coach-stats .label { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.coach-photo { aspect-ratio: 4/5; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); }
.coach-photo img { width: 100%; height: 100%; object-fit: cover; }
.coach-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.coach-gallery div { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-subtle);
                     cursor: pointer; transition: border-color .2s, transform .2s; }
.coach-gallery div:hover, .coach-gallery div:focus-visible { border-color: var(--accent-primary); transform: translateY(-2px); }
.coach-gallery img { width: 100%; height: 100%; object-fit: cover; }
.coach-photo img { transition: opacity .15s; }

/* ---- Testimonials (circular carousel) ---- */
#results { background: var(--bg-sunken); border-top: 1px solid var(--border-subtle); }
#results .section-head { margin-bottom: 96px; }
@media (max-width: 900px) { #results .section-head { margin-bottom: 64px; } }
.ct { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(80px, 9vw, 140px); align-items: center; max-width: 1080px; margin: 0 auto; }
.ct-stack { position: relative; width: 100%; aspect-ratio: 1/1.1; max-height: 440px; perspective: 1000px; }
.ct-card { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 22px;
           border: 1px solid var(--border-subtle); box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; }
.ct-tile { background: linear-gradient(160deg, var(--bg-surface-raised) 0%, var(--bg-surface) 55%, #0d160e 100%);
           display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.ct-tile span { font-family: var(--font-display); font-size: clamp(72px, 14vw, 120px); line-height: 1; color: var(--accent-primary); opacity: .9; }
.ct-tile-brand { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: var(--text-tertiary); text-transform: uppercase; }
.ct-content { display: flex; flex-direction: column; min-height: 340px; }
.ct-name { margin: 0 0 6px; font-family: var(--font-display); text-transform: uppercase; color: var(--text-primary); font-size: clamp(26px, 3vw, 34px); line-height: 1.05; }
.ct-sub { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.ct-stars { color: #d4af7a; font-size: 14px; letter-spacing: 2px; }
.ct-tag { color: var(--text-tertiary); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ct-social { display: flex; align-items: center; gap: 12px; margin: -12px 0 24px; }
.ct-social:empty { display: none; }
.ct-social-link { display: inline-flex; align-items: center; gap: 7px; color: var(--text-primary);
                  font-size: 13px; font-weight: 700; text-decoration: none; }
.ct-social-link:hover { color: var(--accent-primary); }
.ct-social-link svg { opacity: .85; }
.ct-followers { color: var(--text-tertiary); font-size: 12px; font-weight: 600; }
.ct-quote { margin: 0; color: var(--text-secondary); font-size: 17px; line-height: 1.8; }
.ct-word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .ct-word { opacity: 0; filter: blur(10px); transform: translateY(5px); animation: ct-word-in .22s ease-in-out forwards; }
  @keyframes ct-word-in { to { opacity: 1; filter: blur(0); transform: none; } }
}
.ct-arrows { display: flex; gap: 20px; margin-top: auto; padding-top: 40px; }
.ct-arrow { width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
            background: var(--bg-surface-raised); color: var(--text-primary);
            display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s; }
.ct-arrow:hover { background: var(--accent-primary); color: var(--accent-on-accent); }
@media (max-width: 900px) {
  .ct { grid-template-columns: 1fr; gap: 40px; }
  .ct-stack { max-width: 340px; margin: 0 auto; }
  .ct-content { min-height: 0; }
  .ct-arrows { padding-top: 26px; }
}

/* ---- Review wall: compact auto-sliding marquee ----
   Two identical halves in a flex track animated to -50% = a seamless loop.
   Pauses on hover; goes static (and scrollable) under reduced motion. */
#reviews-wall { background: var(--bg-page); border-top: 1px solid var(--border-subtle); }
.rw-viewport { overflow: hidden; max-width: 1080px; margin: 0 auto;
               -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
               mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.rw-track { display: flex; width: max-content; }
.rw-track:not(.animate) { width: auto; justify-content: center; margin: 0 auto; }
.rw-half { display: flex; gap: 14px; padding-right: 14px; }
.rw-track.animate { animation: rw-slide var(--rw-dur, 40s) linear infinite; }
.rw-viewport:hover .rw-track.animate { animation-play-state: paused; }
@keyframes rw-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .rw-track.animate { animation: none; }
  .rw-viewport { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}
.rw-item { flex: 0 0 auto; width: 260px; background: var(--bg-surface); border: 1px solid var(--border-subtle);
           border-radius: var(--radius-md); padding: 16px 18px; position: relative; }
.rw-verify { position: absolute; top: 13px; right: 13px; color: var(--accent-primary); }
.rw-verify svg { width: 16px; height: 16px; display: block; }
.rw-verify-tip { position: absolute; top: calc(100% + 7px); left: -4px; background: var(--bg-surface-raised);
                 color: var(--text-primary); font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
                 padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border-hairline);
                 white-space: nowrap; opacity: 0; transform: translateY(3px); pointer-events: none;
                 transition: opacity .15s ease, transform .15s ease; z-index: 2; }
.rw-verify:hover .rw-verify-tip { opacity: 1; transform: none; }
.rw-stars { color: #d4af7a; font-size: 11px; letter-spacing: 2px; margin-bottom: 8px; }
.rw-headline { color: var(--text-primary); font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.rw-body { margin: 0 0 10px; color: var(--text-secondary); font-size: 12.5px; line-height: 1.6;
           display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rw-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rw-name { color: var(--accent-primary); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.rw-tag { color: var(--text-tertiary); font-size: 10.5px; }
#reviews-wall .section-head { margin-bottom: 40px; }

/* (legacy card styles kept for cached pages) */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; background: var(--bg-surface); border: 1px solid var(--border-subtle); }
.testimonial-card .photo-slot {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--bg-surface-raised), var(--bg-sunken));
  display: flex; align-items: center; justify-content: center;
}
.testimonial-card .photo-slot svg { opacity: 0.25; }
.testimonial-card .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 30%, rgba(10,10,10,0.92) 75%, rgba(10,10,10,0.98) 100%); pointer-events: none; }
.testimonial-card .content { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px; }
.testimonial-card .headline { font-family: var(--font-display); text-transform: uppercase; font-size: 24px; line-height: 1.05; color: var(--text-primary); }
.testimonial-card .quote { margin: 14px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.testimonial-card .name { margin-top: 16px; color: var(--accent-primary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.testimonial-card .tag { color: var(--text-tertiary); font-size: 11px; margin-top: 2px; }

/* ---- FAQ ---- */
#faq { background: var(--bg-page); border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; align-items: center; }
.faq-list { max-width: 800px; width: 100%; display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-item button {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; padding: 22px 0; cursor: pointer; text-align: left;
  color: var(--text-primary); font-size: 16px; font-weight: 700; font-family: var(--font-body);
  transition: color var(--duration-slow) var(--ease-standard);
}
.faq-item.open button { color: var(--accent-primary); }
.faq-item .plus { color: var(--accent-primary); font-size: 20px; transition: transform var(--duration-fast) var(--ease-standard); }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-item .answer { margin: 0 0 22px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; max-width: 620px; display: none; }
.faq-item.open .answer { display: block; }

/* ---- Final CTA ---- */
.final-cta { position: relative; background: var(--bg-page); border-top: 1px solid var(--border-subtle); text-align: center; overflow: hidden; }
.final-cta .glow { position: absolute; inset: 0; opacity: 0.5; background: radial-gradient(ellipse 55% 60% at 50% 100%, rgba(62,205,94,0.14), transparent); }
.final-cta-inner { position: relative; max-width: 700px; margin: 0 auto; }
.final-cta h2 { font-size: var(--display-lg-size); line-height: var(--display-lg-line); }
.final-cta h2 span { color: var(--accent-primary); }
.final-cta p { margin-top: 20px; color: var(--text-secondary); font-size: var(--text-lg-size); line-height: 1.6; }
.final-cta-actions { display: flex; justify-content: center; gap: 16px; margin-top: 36px; flex-wrap: wrap; }

/* ---- Footer ---- */
footer { background: var(--bg-sunken); border-top: 1px solid var(--border-subtle); }
.footer-grid { padding: 80px 48px 56px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; }
.footer-grid img { height: 64px; width: auto; object-fit: contain; }
.footer-grid p { margin: 20px 0 0; color: var(--text-secondary); font-size: 15px; line-height: 1.6; max-width: 280px; }
.social-links { display: flex; gap: 16px; margin-top: 28px; }
.social-links a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-secondary); }
.footer-col-title { color: var(--text-primary); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 20px; }
.footer-links { display: flex; flex-direction: column; gap: 14px; }
.footer-links a, .footer-links button { color: var(--text-secondary); font-size: 14px; text-decoration: none; background: none; border: none; padding: 0; text-align: left; cursor: pointer; font-family: var(--font-body); }
.footer-bottom { border-top: 1px solid var(--border-subtle); padding: 24px 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-bottom .copyright { color: var(--text-tertiary); font-size: 13px; }
.footer-bottom .legal { display: flex; gap: 24px; }
.footer-bottom .legal a { color: var(--text-tertiary); font-size: 13px; text-decoration: none; }

/* ---- Apply dialog ---- */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(4px);
  display: none; align-items: flex-start; justify-content: center; z-index: 100; padding: 40px 20px;
  overflow-y: auto;
}
.overlay.open { display: flex; }
.dialog {
  width: 520px; max-width: 100%; margin: auto;
  background: var(--bg-surface-raised); border: 1px solid #d4af7a; border-radius: var(--radius-lg);
  box-shadow: 0 0 40px rgba(212,175,122,0.22), var(--shadow-lg); overflow: hidden;
}
.dialog-bar { height: 4px; background: linear-gradient(90deg, #d4af7a, #f0d9a8); }
.dialog-body { padding: 32px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dialog-head .eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #d4af7a; }
.dialog-head h3 { margin: 8px 0 0; font-family: var(--font-display); font-size: 28px; text-transform: uppercase; color: var(--text-primary); }
.dialog-close { background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 4px; margin-top: 2px; }
.dialog-sub { margin: 12px 0 24px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.field-group { display: flex; flex-direction: column; gap: 18px; }
.field label { display: block; font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; box-sizing: border-box; background: var(--bg-sunken); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 13px 14px; color: var(--text-primary); font-size: 14px;
  font-family: var(--font-body); outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.field textarea { resize: vertical; line-height: 1.5; }
.field-error { color: var(--state-danger); font-size: 12px; margin-top: 6px; }
.field-goal-other { margin-top: 12px; display: none; }
.field-goal-other.show { display: block; }
.instagram-wrap { position: relative; }
.instagram-wrap .at { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #d4af7a; font-size: 14px; font-weight: 700; pointer-events: none; }
.instagram-wrap input { padding-left: 32px; }
.inj-toggle { display: flex; gap: 10px; }
.inj-toggle button {
  flex: 1; padding: 12px; border-radius: var(--radius-sm); font-weight: 700; font-size: 14px; cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard); background: var(--bg-sunken); color: var(--text-secondary);
  border: 1px solid var(--border-subtle); font-family: var(--font-body);
}
.inj-toggle button.active { background: linear-gradient(135deg, #d4af7a, #f0d9a8); color: #241a08; border-color: #d4af7a; }
.submit-success { text-align: center; padding: 24px 8px 12px; display: none; }
.submit-success.show { display: block; }
.submit-success .check { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #d4af7a, #f0d9a8); display: flex; align-items: center; justify-content: center; }
.submit-success h3 { margin: 24px 0 0; font-family: var(--font-display); font-size: 30px; text-transform: uppercase; color: var(--text-primary); }
.submit-success p { margin: 14px 0 0; color: var(--text-secondary); font-size: 15px; line-height: 1.6; }
.submit-success button { margin-top: 28px; }
.apply-form { display: none; }
.apply-form.show { display: block; }

/* ---- Toast ---- */
.toast-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: none; }
.toast-wrap.show { display: block; }
.toast {
  width: 340px; background: var(--bg-surface-raised); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--state-success); border-radius: var(--radius-md); padding: 16px 18px;
  box-shadow: var(--shadow-lg); display: flex; gap: 12px; align-items: flex-start;
}
.toast .title { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.toast .desc { font-size: 13px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; }
.toast-close { background: none; border: none; color: var(--text-tertiary); cursor: pointer; margin-left: auto; padding: 2px; }

/* intl-tel-input theming */
.iti { width: 100%; }
.iti__selected-country { background: transparent; color: var(--text-primary); }
.iti__selected-country:hover, .iti__selected-country:focus { background: rgba(255,255,255,0.06); }
.iti__selected-dial-code { color: var(--text-secondary); font-weight: 700; font-size: 13px; }
.iti__arrow { border-top-color: #d4af7a; }
.iti__arrow--up { border-bottom-color: #d4af7a; }
.iti__dropdown-content { background: #161616; border: 1px solid var(--border-strong); color: var(--text-primary); border-radius: 6px; }
.iti__country-list { background: #161616; color: var(--text-primary); }
.iti__country.iti__highlight, .iti__country:hover { background: #242424; }
.iti__dial-code { color: var(--text-tertiary); }
.iti__search-input { background: var(--bg-sunken); color: var(--text-primary); border: none; border-bottom: 1px solid var(--border-strong); padding: 10px 12px; outline: none; }

/* ---- Consent banner ---- */
.consent-banner {
  position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 300;
  max-width: 720px; margin: 0 auto;
  background: var(--bg-surface-raised); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 18px 20px; display: none; align-items: center; gap: 20px;
}
.consent-banner.show { display: flex; }
.consent-banner .consent-text { color: var(--text-secondary); font-size: 13px; line-height: 1.5; flex: 1; }
.consent-banner .consent-actions { display: flex; gap: 10px; flex-shrink: 0; }
@media (max-width: 700px) {
  /* A stacked banner ate a third of a phone screen and pushed the offer below
     the fold, which is the one thing this page cannot afford. It stays a
     single line: smaller type, tighter buttons, sat on the bottom edge. */
  .consent-banner {
    left: 0; right: 0; bottom: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
    padding: 10px 12px; gap: 10px; align-items: center;
  }
  .consent-banner .consent-text { font-size: 11.5px; line-height: 1.35; }
  .consent-banner .consent-actions { gap: 6px; }
  .consent-banner .consent-actions .btn { padding: 8px 12px !important; font-size: 11px !important; white-space: nowrap; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .site-nav { display: none; }
  section { padding: 64px 24px; }
  .hero { padding: 100px 24px 72px; }
  .hero h1 { font-size: 56px; }
  .tier-row { grid-template-columns: 1fr; }
  .tier-featured { grid-template-columns: 1fr; padding: 28px; }
  .tier-programs { padding: 28px; }
  .join-grid { grid-template-columns: 1fr; }
  #app { grid-template-columns: 1fr; }
  .app-mock { width: 100%; max-width: 280px; }
  .app-stage { padding: 8px 0 28px; }
  .as-phone { width: clamp(104px, 29vw, 148px); }
  .coach-grid { grid-template-columns: 1fr; }
  .program-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .site-header { padding: 14px 20px; }
}

/* ---- Free week (lead magnet) ---- */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.freeweek-section { padding: 100px 48px; background: var(--bg-surface-raised); border-top: 1px solid var(--border-subtle); }
.freeweek-box { max-width: 760px; margin: 0 auto; text-align: center; }
.freeweek-copy h2 { margin: 0; font-family: var(--font-display); text-transform: uppercase; color: var(--text-primary); font-size: var(--display-lg-size); line-height: var(--display-lg-line); }
.freeweek-copy p { margin: 18px auto 0; max-width: 560px; color: var(--text-secondary); font-size: var(--text-lg-size); line-height: 1.6; font-family: var(--font-body); }
.freeweek-fields { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.freeweek-fields input { flex: 1; min-width: 180px; max-width: 260px; background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 15px 16px; color: var(--text-primary); font-size: 14px; font-family: var(--font-body); outline: none; }
.freeweek-fields input:focus { border-color: var(--accent-primary); }
/* The programme picker sits in the same row as the name/email inputs, so it
   matches them exactly rather than inheriting the browser's default control. */
.freeweek-fields select { flex: 1; min-width: 180px; max-width: 260px; background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 15px 16px; color: var(--text-primary); font-size: 14px; font-family: var(--font-body); outline: none; cursor: pointer; }
.freeweek-fields select:focus { border-color: var(--accent-primary); }
/* The programme page is the one place this form sits in a left-aligned column:
   its hero is a two-column grid, so the row is too narrow to hold both inputs
   and the button and the button drops to a line of its own. Centred on that
   line it floated away from the left edge every other element in the column
   starts on, including the fine print directly under it. The homepage, /start/
   and /lp/ all render the form inside a centred column, so they keep the
   centred default above. Below 720px the button is width:100%, fills its line
   on its own and is unaffected by either value. */
.lp-hero .lp-wrap .freeweek-fields { justify-content: flex-start; }
.btn-gold-solid { background: linear-gradient(135deg, #d4af7a, #f0d9a8); color: #241a08; border: none; padding: 15px 26px; font-family: var(--font-body); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 14px; border-radius: var(--radius-sm); cursor: pointer; }
.freeweek-fine { margin-top: 14px; color: var(--text-tertiary); font-size: 12px; font-family: var(--font-body); }
/* The tick was a text character in a gold gradient: the glyph sat off-centre
   because its ink box is not centred in its em box, and the beige was the only
   thing on the page not in the black, white and green palette. It is now an
   SVG, which centres geometrically, on the same accent the buttons use. */
.freeweek-check {
  width: 64px; height: 64px; margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--accent-primary); color: var(--text-on-accent);
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.freeweek-check svg { display: block; }
.freeweek-done h3, #freeweek-success h3 { font-family: var(--font-display); text-transform: uppercase; color: var(--text-primary); font-size: 26px; margin: 0 0 10px; }
.freeweek-done p, #freeweek-success p { color: var(--text-secondary); font-family: var(--font-body); font-size: 15px; margin: 0; }
@media (max-width: 720px) {
  .freeweek-section { padding: 72px 24px; }
  .freeweek-fields input, .freeweek-fields select { max-width: none; }
  .freeweek-fields .btn-gold-solid { width: 100%; }
}

/* ---- Booking step (apply modal step 2) + standalone book page ---- */
.booking-step { display: none; }
.booking-step.show { display: block; }
.bk-loading, .bk-empty, .bk-error { color: var(--text-secondary); font-size: 14px; line-height: 1.6; padding: 20px 0; }
.bk-error { color: var(--state-danger, #ff5a5a); }
.bk-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; }
.bk-day { flex: 0 0 auto; background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 10px 14px; cursor: pointer; text-align: center; font-size: 12px; color: var(--text-secondary); font-family: var(--font-body); white-space: nowrap; transition: border-color .15s, color .15s; }
.bk-day:hover { border-color: var(--border-strong); }
.bk-day.active { border-color: var(--accent-primary); color: var(--text-primary); background: rgba(62,205,94,0.08); }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 16px; }
.bk-time { background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 11px 8px; text-align: center; font-size: 13px; color: var(--text-primary); cursor: pointer; font-family: var(--font-body); transition: border-color .15s, background .15s; }
.bk-time:hover { border-color: var(--accent-primary); background: rgba(62,205,94,0.08); }
.bk-time[disabled] { opacity: .4; cursor: default; }
.bk-skip { margin-top: 24px; text-align: center; }
.bk-skip button { background: none; border: none; color: var(--text-tertiary); font-size: 13px; font-family: var(--font-body); cursor: pointer; text-decoration: underline; }
.bk-skip button:hover { color: var(--text-secondary); }


/* ---------------------------------------------------------------------------
   /free-week/ : the single-purpose landing page for ads and bio links.
   Reuses the site's tokens, buttons and form styling; the only new pieces are
   the stripped-back header, the offer block and the three proof columns. There
   is no nav on this page on purpose, so there is nothing new to style for it.
--------------------------------------------------------------------------- */

.fw-header { justify-content: center; border-bottom: 1px solid var(--border-subtle); }
.fw-header img { height: 34px; width: auto; }

.fw-hero { padding: 64px 24px 72px; background: var(--bg-page); }
.fw-hero-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.fw-hero h1 {
  margin: 12px 0 0; font-family: var(--font-display); text-transform: uppercase;
  color: var(--text-primary); font-size: var(--display-lg-size); line-height: var(--display-lg-line);
}
.fw-hero h1 span { color: var(--accent-primary); }
.fw-lede {
  margin: 20px auto 0; max-width: 580px; color: var(--text-secondary);
  font-size: var(--text-lg-size); line-height: 1.6; font-family: var(--font-body);
}

.fw-trust {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; margin-top: 26px; font-size: 14px;
}
.fw-stars { color: var(--accent-primary); letter-spacing: 3px; font-size: 15px; }
.fw-trust-txt { color: var(--text-secondary); font-weight: 600; }

.fw-formwrap { margin-top: 34px; }
.fw-secondary { margin: 14px 0 0; font-size: 13px; color: var(--text-tertiary); font-family: var(--font-body); }
.fw-secondary a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.fw-secondary a:hover { color: var(--accent-primary); }

.fw-proof { padding: 0 24px 72px; background: var(--bg-page); }
/* The photo that opens the page. One file, cropped by CSS: wide and shallow on
   a laptop, taller on a phone so Moe is not reduced to a letterbox strip. */
.fw-hero-img {
  display: block; width: 100%; height: 300px; object-fit: cover; object-position: center 30%;
  border-radius: var(--radius-lg); margin: 0 0 28px;
}

.fw-steps, .fw-why, .fw-quote { max-width: 720px; margin: 0 auto; }
.fw-steps h2, .fw-why h2, .fw-week h2, .fw-apps h2 {
  margin: 0 0 18px; font-family: var(--font-display); text-transform: uppercase;
  color: var(--text-primary); font-size: 22px; letter-spacing: .03em;
}
.fw-steps ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.fw-steps li {
  display: flex; gap: 14px; align-items: flex-start;
  color: var(--text-secondary); font-size: 15.5px; line-height: 1.6; font-family: var(--font-body);
}
.fw-step-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-primary); color: var(--text-on-accent);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.fw-quote {
  margin-top: 40px; padding: 24px 26px; background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.fw-quote blockquote {
  margin: 0; color: var(--text-primary); font-size: 16px; line-height: 1.65;
  font-family: var(--font-body);
}
.fw-quote blockquote::before { content: '\201C'; }
.fw-quote blockquote::after { content: '\201D'; }
.fw-quote figcaption {
  margin-top: 12px; color: var(--text-tertiary); font-size: 13px; font-family: var(--font-body);
}

.fw-why { margin-top: 40px; }
.fw-why p { margin: 0; color: var(--text-secondary); font-size: 15.5px; line-height: 1.7; font-family: var(--font-body); }

/* The email housekeeping, quieter than the offer line above it. */
.freeweek-fine-sm { font-size: 11px; margin-top: 6px; opacity: .8; }

/* The accordion is a top-level section on the funnel pages rather than a child
   of .fw-proof, so it carries its own gutters. The rail is padded out to 768px
   so the questions still line up with the 720px blocks above them. */
.fw-faq { max-width: 768px; margin: 32px auto 0; padding: 0 var(--space-6); }

.fw-footer { padding: 28px 24px 40px; text-align: center; border-top: 1px solid var(--border-subtle); }
.fw-footer p { margin: 4px 0; color: var(--text-tertiary); font-size: 12.5px; font-family: var(--font-body); }
.fw-footer a { color: var(--text-tertiary); }
.fw-footer a:hover { color: var(--accent-primary); }

@media (max-width: 700px) {
  .fw-hero { padding: 40px 20px 52px; }
  /* One display tier down on a phone. At the desktop size every authored line
     of a three line headline wrapped to two, so the offer and the form were
     pushed off the bottom of the screen before anybody had read either. The
     size, leading and tracking move together as the token triplet they are. */
  .fw-hero h1 {
    font-size: var(--display-md-size);
    line-height: var(--display-md-line);
    letter-spacing: var(--display-md-tracking);
  }
  .fw-proof { padding: 0 20px 56px; }
  .fw-hero-img { height: 220px; object-position: center 28%; margin-bottom: 22px; }
  /* The consent bar sits on the bottom edge on a phone, so the page needs to
     end above it rather than behind it. */
  .fw-footer { padding-bottom: 76px; }
}

/* ---------------------------------------------------------------------------
   /start/ funnel: the longer ad landing page that replaces /free-week/.
   Everything here is an extension of the .fw-* language above, not a new one.
   The page is read on a phone held one handed, so every rule below is written
   mobile first and every tap target clears 44px.
--------------------------------------------------------------------------- */

/* Hero video. It sits in exactly the slot .fw-hero-img occupies and carries the
   same rounded frame. The height comes from an aspect ratio rather than the
   file, so the box is reserved before a single byte of video arrives and the
   copy underneath never jumps. */
.fw-hero-video {
  display: block; width: 100%; height: auto; aspect-ratio: 12 / 5;
  object-fit: cover; object-position: center 30%;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  margin: 0 0 var(--space-8);
}
/* When a hero video is present the template renders a still .fw-hero-img right
   after it as the fallback. Only one of the pair is ever on screen. */
.fw-hero-video + .fw-hero-img { display: none; }
/* Reduced motion means no looping footage at all: the video goes and the still
   takes its slot, so the page stays complete rather than leaving a hole. */
@media (prefers-reduced-motion: reduce) {
  .fw-hero-video { display: none; }
  .fw-hero-video + .fw-hero-img { display: block; }
}

/* Programme picker as tappable panels. A native select hides the choice behind
   a tap; these show every option and its price at once, which is the decision
   the visitor came to make. */
.fw-cards {
  display: grid; gap: var(--space-3);
  margin: 0 0 var(--space-4);
  text-align: left;
}
.fw-card {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: var(--border-thin) solid var(--border-hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.fw-card:hover { border-color: var(--border-strong); background: var(--bg-surface-hover); }
/* The native radio is clipped rather than removed: display:none would take it
   out of the tab order and off the accessibility tree, so keyboard users could
   no longer arrow through the group. */
.fw-card-input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}
.fw-card-name {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-md-size); line-height: var(--text-md-line);
  font-weight: 700;
}
.fw-card-price {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  white-space: nowrap;
}
.fw-card.is-selected,
.fw-card:has(.fw-card-input:checked) {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-glow-accent);
  background: var(--bg-surface-raised);
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-surface));
}
.fw-card.is-selected .fw-card-price,
.fw-card:has(.fw-card-input:checked) .fw-card-price { color: var(--accent-primary); }
.fw-card:has(.fw-card-input:focus-visible) {
  outline: var(--border-thick) solid var(--border-focus);
  outline-offset: 2px;
}

/* Programme pages have no picker, so this quiet line says what was chosen. */
.fw-fixed-note {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  font-weight: 400;
}
.fw-fixed-note strong { color: var(--text-primary); font-weight: 700; }

/* Your first 7 days. Stacked on a phone so nothing is squeezed; day, session
   and duration only line up in three columns once there is room for them. */
.fw-week { max-width: 720px; margin: 0 auto; }
.fw-week-list {
  margin: 0; padding: 0; list-style: none;
  background: var(--bg-surface);
  border: var(--border-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.fw-week-list li {
  display: grid; grid-template-columns: 1fr; gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-top: var(--border-thin) solid var(--border-hairline);
}
.fw-week-list li:first-child { border-top: 0; }
.fw-week-day {
  color: var(--accent-primary);
  font-family: var(--font-body);
  font-size: var(--overline-size); line-height: var(--overline-line);
  font-weight: var(--overline-weight);
  letter-spacing: var(--overline-tracking);
  text-transform: uppercase;
}
.fw-week-what {
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-md-size); line-height: var(--text-md-line);
}
.fw-week-time {
  color: var(--text-tertiary);
  font-family: var(--font-body);
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  white-space: nowrap;
}
@media (min-width: 560px) {
  .fw-week-list li {
    grid-template-columns: 108px 1fr auto;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
  }
  .fw-week-time { text-align: right; }
}

/* App screenshots. Fixed width plus an aspect ratio means the strip holds its
   full height from first paint, so the sections below it never move. */
.fw-apps { max-width: 720px; margin: 0 auto; }
.fw-apps-row {
  display: flex; gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: var(--space-4);
  padding-bottom: var(--space-3);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fw-apps-row::-webkit-scrollbar { display: none; }
.fw-apps-row img {
  flex: 0 0 auto;
  width: 196px; height: auto; aspect-ratio: 508 / 900;
  object-fit: cover;
  background: var(--bg-surface);
  border: var(--border-thin) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  scroll-snap-align: center;
}
@media (min-width: 768px) {
  .fw-apps-row { overflow-x: visible; justify-content: center; padding-bottom: 0; }
  .fw-apps-row img { width: 232px; }
}

/* Mobile sticky CTA. It appears once the form has scrolled out of sight and
   never while the form is on screen, which the script decides; this only says
   what it looks like when it is there. */
.fw-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--bg-sunken);
  border-top: var(--border-thin) solid var(--border-hairline);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
.fw-sticky[hidden] { display: none; }
.fw-sticky .btn-gold-solid {
  display: block; width: 100%;
  min-height: 48px;
  text-align: center; text-decoration: none;
}
/* The bar is revealed by dropping the hidden attribute, and an element going
   from display:none cannot transition, so the entrance is an animation. */
.fw-sticky:not([hidden]) {
  animation: fw-sticky-in var(--duration-slow) var(--ease-out) both;
}
@keyframes fw-sticky-in {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: none; }
}
@media (min-width: 768px) {
  .fw-sticky { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-sticky:not([hidden]) { animation: none; }
  .fw-card { transition: none; }
}

/* One rhythm for the whole page. Each block in the proof column is separated by
   the same gap whether or not the optional ones (quote, app strip) rendered. */
.fw-proof > * + * { margin-top: var(--space-16); }

@media (max-width: 700px) {
  .fw-hero-video { aspect-ratio: 3 / 2; margin-bottom: var(--space-6); }
  .fw-proof > * + * { margin-top: var(--space-12); }
  /* .fw-proof drops to a 20px gutter on a phone, so the accordion follows it
     down: at this width the questions have to start on the same left edge as
     the copy above them or the page looks like it slipped. */
  /* The .fw-week and .fw-apps gutters are set with the rest of their shell
     lower down the file, because a later unconditional rule of equal weight
     would otherwise beat anything declared here. */
  .fw-faq { padding: 0 var(--space-5); }
  .fw-week-list li { padding: var(--space-4); }
  /* Anything under 16px makes iOS zoom the whole page in on focus, which on a
     one field form reads as the page breaking. */
  .freeweek-fields input, .freeweek-fields select { font-size: var(--text-md-size); }
  .freeweek-fields .btn-gold-solid { min-height: 48px; }
  /* Leave the sticky bar somewhere to sit that is not on top of the last line
     of the page. The consent bar already claims part of this space. */
  body:has(.fw-sticky) .fw-footer { padding-bottom: 148px; }
}

/* ---------------------------------------------------------------------------
   Funnel sections that sit at the top level of the document rather than inside
   .fw-proof. The global `section` rule would give them a 48px gutter and their
   own vertical padding, which puts their left edge 8px off from the copy in
   .fw-proof above them. Padding the 720px rail out to 768px lines every block
   on the page up on one left edge at every width.
--------------------------------------------------------------------------- */
.fw-week, .fw-apps {
  max-width: 768px; margin: var(--space-16) auto 0; padding: 0 var(--space-6);
}
.fw-faq { margin-top: var(--space-16); }

/* ---------------------------------------------------------------------------
   Shared funnel finish. Three values used in enough places that they have to
   agree: the photo grade, the panel texture and the accent wash. They are
   local variables rather than tokens because they are compositions of tokens,
   not new colours.
--------------------------------------------------------------------------- */
:root {
  /* One grade across every photo and clip on the funnel, so the hero and the
     coach read as one shoot rather than two sources. The rotation is small on
     purpose: hue-rotate turns the whole wheel, not just the sepia it follows,
     so anything past about 15deg pulls the red out of skin and leaves people
     looking olive. Measured on the coach photo, 10deg keeps red comfortably
     ahead of green while still cooling the picture toward the brand. */
  --twm-grade: saturate(.92) contrast(1.06) brightness(.98) sepia(.1) hue-rotate(10deg);
  /* A hairline weave, near invisible on its own, that stops the big surface
     panels reading as flat blocks of grey. */
  --twm-texture: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--text-primary) 3%, transparent) 0 1px,
    transparent 1px 6px);
}

.fw-hero-img, .fw-hero-video, .fw-coach-img { filter: var(--twm-grade); }

/* The accent line of the headline gets a marker stroke behind it. isolate
   keeps the z-index:-1 inside the span: without it the stroke would slide
   behind the section background and vanish. */
.fw-hero h1 span { position: relative; display: inline-block; isolation: isolate; }
.fw-hero h1 span::before {
  content: ''; position: absolute; z-index: -1;
  left: -.05em; right: -.05em; bottom: .07em; height: .17em;
  background: var(--accent-primary); opacity: .22;
  border-radius: var(--radius-pill);
  transform: rotate(-.7deg);
}

/* A rule before the overline, and one above every section heading. Small
   marks, but they are what stops a stack of centred text reading as a
   document. Scoped to the funnel so the homepage overline is untouched. */
.fw-hero .overline { display: inline-flex; align-items: center; gap: var(--space-2); }
.fw-hero .overline::before {
  content: ''; width: 20px; height: 2px; flex: none;
  background: var(--accent-primary); border-radius: var(--radius-pill);
}
.fw-steps h2::before, .fw-why h2::before, .fw-week h2::before, .fw-apps h2::before {
  content: ''; display: block; width: 28px; height: 3px;
  background: var(--accent-primary); border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}

/* Accent wash behind the form. The offer is the one thing on the page that
   should look lit from underneath. */
.fw-formwrap { position: relative; isolation: isolate; }
/* The wash is pinned to the form's own edges rather than bled past them. A
   centred pseudo wider than its parent pushes the document scroll width out
   at every breakpoint where the form is not already the full width, and the
   page then scrolls sideways by exactly the overhang. The spread comes from
   the gradient instead, which costs nothing and cannot overflow. */
.fw-formwrap::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: -7%; height: 114%;
  background: radial-gradient(ellipse 64% 54% at 50% 50%,
    color-mix(in srgb, var(--accent-primary) 18%, transparent), transparent 72%);
}

/* Ghost weekday initials behind the week rows. Generated from the row index
   rather than the markup, so the template stays clean and the letters can
   never disagree with the day they sit on. */
.fw-week-list li { position: relative; overflow: hidden; }
/* Kept to the right edge: on a phone that side of the row is empty, and on a
   laptop the duration sits over it, which is the one label big enough to carry
   a watermark behind it without either of them losing. */
.fw-week-list li::after {
  position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-size: 52px; line-height: 1;
  color: var(--text-primary); opacity: .05;
  pointer-events: none; z-index: 0;
}
.fw-week-list li:nth-child(1)::after { content: 'M'; }
.fw-week-list li:nth-child(2)::after { content: 'T'; }
.fw-week-list li:nth-child(3)::after { content: 'W'; }
.fw-week-list li:nth-child(4)::after { content: 'T'; }
.fw-week-list li:nth-child(5)::after { content: 'F'; }
.fw-week-list li:nth-child(6)::after { content: 'S'; }
.fw-week-list li:nth-child(7)::after { content: 'S'; }
.fw-week-list li > * { position: relative; z-index: 1; }

/* Hover lift on the things that are meant to feel touchable. */
.fw-card { transition: border-color var(--duration-base) var(--ease-standard),
                       background var(--duration-base) var(--ease-standard),
                       box-shadow var(--duration-base) var(--ease-standard),
                       transform var(--duration-base) var(--ease-out); }
.fw-card:hover { transform: translateY(-2px); }
.faq-item { transition: background var(--duration-base) var(--ease-standard); }
.fw-faq .faq-item:hover { background: var(--bg-surface); }
.fw-faq .faq-item:hover button { color: var(--accent-primary); }

/* ---------------------------------------------------------------------------
   Coach card, inside .fw-why and above the paragraph it introduces. The answer
   to "why not a template" is a person, so the photo runs beside the words on a
   laptop and sits over them on a phone.
--------------------------------------------------------------------------- */
.fw-coach-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-5); row-gap: var(--space-1);
  align-items: center;
  background: var(--bg-surface);
  border: var(--border-thin) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin: 0 0 var(--space-6);
}
.fw-coach-img {
  grid-column: 1; grid-row: 1 / span 2;
  width: 96px; height: 120px;
  object-fit: cover; object-position: center 22%;
  border-radius: var(--radius-md);
}
.fw-coach-name {
  grid-column: 2; grid-row: 1; align-self: end;
  font-family: var(--font-display); text-transform: uppercase;
  color: var(--text-primary); font-size: 21px; letter-spacing: .03em; line-height: 1.1;
}
.fw-coach-line {
  grid-column: 2; grid-row: 2; align-self: start;
  color: var(--text-secondary); font-family: var(--font-body);
  font-size: var(--text-sm-size); line-height: 1.6;
}
/* The photo is dropped independently of the line, so the text reclaims the
   column when there is no picture to sit in it. */
.fw-coach-card:not(:has(.fw-coach-img)) { grid-template-columns: minmax(0, 1fr); }
.fw-coach-card:not(:has(.fw-coach-img)) .fw-coach-name,
.fw-coach-card:not(:has(.fw-coach-img)) .fw-coach-line { grid-column: 1; }

/* ---------------------------------------------------------------------------
   App points: the site's tick idiom, three across once there is room.
--------------------------------------------------------------------------- */
.fw-apps-points {
  list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: grid; gap: var(--space-3);
}
.fw-apps-points li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3);
  align-items: start;
  color: var(--text-secondary); font-family: var(--font-body);
  font-size: var(--text-md-size); line-height: 1.55;
}
.fw-apps-points li::before {
  content: '\2713';
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--accent-primary); color: var(--accent-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; line-height: 1; margin-top: 1px;
}
@media (min-width: 768px) {
  .fw-apps-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}

/* ---------------------------------------------------------------------------
   How the training rolls: the architecture diagram on the hybrid programme
   page. Section shell matches the product page's .lp-band and .lp-wrap so the
   partial drops in without touching the page it lands on. Every colour in the
   drawing lives here, because var() inside an SVG presentation attribute is
   not honoured by any browser.
--------------------------------------------------------------------------- */
.lp-arch { padding: 80px 0; background: var(--bg-page); }
.lp-arch-wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6); }
.lp-arch-eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-primary); margin-bottom: 14px; font-family: var(--font-body);
}
.lp-arch h2 {
  font-family: var(--font-display); text-transform: uppercase; color: var(--text-primary);
  font-size: clamp(28px, 4.4vw, 42px); line-height: 1.05; margin: 0 0 18px; letter-spacing: .02em;
}
.lp-arch-lede {
  margin: 0; color: var(--text-secondary); font-family: var(--font-body);
  font-size: 16.5px; line-height: 1.65; max-width: 640px;
}
.lp-arch-fig { margin: var(--space-8) 0 0; }
/* The diagram's spoken description. It has to reach a screen reader and stay
   off the screen, and it must not live in an SVG <title>: a <title> inside an
   <svg> is painted by the browser as a native tooltip, which drops a grey slab
   of prose over the drawing the moment a pointer crosses it. The clip pattern
   below keeps the text in the accessibility tree with no painted box and no
   effect on layout, and it is self-contained rather than leaning on a utility
   class defined somewhere else. */
.lp-arch-desc {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.lp-arch-svg { display: block; width: 100%; height: auto; }
.lp-arch-svg text { font-family: var(--font-body); }
/* One wide ribbon cannot hold legible type on a phone, so the stacked drawing
   of the same diagram takes over and the wide one leaves the document. */
.lp-arch-svg--wide { display: none; }
.lp-arch-svg--stack { max-width: 420px; margin: 0 auto; }
@media (min-width: 960px) {
  .lp-arch-svg--wide { display: block; }
  .lp-arch-svg--stack { display: none; }
}

.lp-arch .a-blk { fill: none; stroke: var(--border-hairline); stroke-width: 1; }
.lp-arch .a-str { fill: var(--bg-surface-raised); stroke: var(--border-strong); stroke-width: 1; }
.lp-arch .a-end {
  fill: color-mix(in srgb, var(--accent-primary) 13%, var(--bg-surface));
  stroke: var(--accent-primary); stroke-width: 1;
}
.lp-arch .a-rec { fill: var(--bg-sunken); stroke: var(--accent-primary); stroke-width: 1; stroke-dasharray: 3 3; }
.lp-arch .a-recdot { fill: var(--accent-primary); }
.lp-arch .a-test { fill: var(--accent-primary); }
.lp-arch .a-wave {
  fill: none; stroke: var(--accent-primary); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.lp-arch .a-node { fill: var(--accent-primary); stroke: var(--bg-page); stroke-width: 2; }
/* A node sitting on the joint cost line takes that line's colour, so the two
   lines stay told apart at the point where they both stop. */
.lp-arch .a-node--cost { fill: var(--text-secondary); }
.lp-arch .a-trend { fill: none; stroke: var(--text-tertiary); stroke-width: 1.5; stroke-dasharray: 5 6; }
.lp-arch .a-ref { fill: none; stroke: var(--text-tertiary); stroke-width: 1; stroke-dasharray: 2 4; }
.lp-arch .a-loop { fill: none; stroke: var(--text-tertiary); stroke-width: 1.5; }
.lp-arch .a-loop-head { fill: var(--text-tertiary); }
.lp-arch .a-lead { fill: none; stroke: var(--border-strong); stroke-width: 1; }
/* Triathlon: the two emphasis bands that trade places across a block. Filled
   areas rather than strokes, because the story is how much of the week each
   sport is taking, not where a single number sits. */
.lp-arch .a-bike { fill: color-mix(in srgb, var(--text-primary) 20%, transparent); }
.lp-arch .a-run { fill: color-mix(in srgb, var(--accent-primary) 52%, transparent); }
.lp-arch .a-base { fill: none; stroke: var(--border-hairline); stroke-width: 1; }
.lp-arch .a-guide { fill: none; stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 2 5; }
/* Bodybuilding: a third ribbon tint for Class 3, so the three classes read as
   a ramp rather than two states, plus the falling joint cost line and the
   meter pair the stacked drawing uses in place of the crossing. */
.lp-arch .a-c3 {
  fill: color-mix(in srgb, var(--accent-primary) 40%, var(--bg-surface));
  stroke: var(--accent-primary); stroke-width: 1;
}
.lp-arch .a-cost {
  fill: none; stroke: var(--text-secondary); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.lp-arch .a-track { fill: color-mix(in srgb, var(--text-primary) 10%, transparent); }
.lp-arch .a-fill { fill: var(--text-secondary); }

.lp-arch .t-name { fill: var(--text-primary); font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.lp-arch .t-mix { fill: var(--text-secondary); font-size: 11.5px; font-weight: 500; }
.lp-arch .t-micro { fill: var(--text-tertiary); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; }
.lp-arch .t-acc { fill: var(--accent-primary); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; }
.lp-arch .t-on { fill: var(--accent-on-accent); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.lp-arch .t-on-sm { fill: var(--accent-on-accent); font-size: 11.5px; font-weight: 600; opacity: .78; }
.lp-arch .t-body { fill: var(--text-primary); font-size: 12.5px; font-weight: 600; }

.lp-arch-note {
  margin: var(--space-6) 0 0; max-width: 660px;
  color: var(--text-secondary); font-family: var(--font-body);
  font-size: 15px; line-height: 1.7;
}
.lp-arch-note strong { color: var(--text-primary); }

.lp-arch-key {
  list-style: none; margin: var(--space-8) 0 0; padding: 0;
  display: grid; gap: var(--space-4);
}
@media (min-width: 720px) {
  .lp-arch-key { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-8); }
}
.lp-arch-key li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.lp-arch-key .sw { width: 14px; height: 14px; border-radius: var(--radius-sm); margin-top: 4px; }
.lp-arch-key .sw--str { background: var(--bg-surface-raised); border: 1px solid var(--border-strong); }
.lp-arch-key .sw--end {
  background: color-mix(in srgb, var(--accent-primary) 13%, var(--bg-surface));
  border: 1px solid var(--accent-primary);
}
.lp-arch-key .sw--c3 {
  background: color-mix(in srgb, var(--accent-primary) 40%, var(--bg-surface));
  border: 1px solid var(--accent-primary);
}
.lp-arch-key .sw--rec { background: var(--bg-sunken); border: 1px dashed var(--accent-primary); }
.lp-arch-key .sw--test { background: var(--accent-primary); }
.lp-arch-key b { color: var(--text-primary); font-weight: 700; }
.lp-arch-key li > span:last-child {
  color: var(--text-secondary); font-family: var(--font-body);
  font-size: 14.5px; line-height: 1.6;
}

/* Micro-texture last, so it survives the background shorthands above it. The
   selected card is listed explicitly because its shorthand would otherwise
   reset the layer back to none. */
.fw-week-list, .fw-quote, .fw-coach-card, .fw-card,
.fw-card.is-selected, .fw-card:has(.fw-card-input:checked) {
  background-image: var(--twm-texture);
}

@media (max-width: 560px) {
  /* Phone: the photo sits over the words, everything centred. */
  .fw-coach-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center; text-align: center;
    row-gap: var(--space-2); padding: var(--space-5) var(--space-4);
  }
  .fw-coach-img { grid-column: 1; grid-row: 1; width: 112px; height: 140px; }
  .fw-coach-name { grid-column: 1; grid-row: 2; align-self: center; }
  .fw-coach-line { grid-column: 1; grid-row: 3; align-self: center; }
}

@media (max-width: 700px) {
  .lp-arch { padding: 60px 0; }
  .lp-arch-wrap { padding: 0 var(--space-5); }
  .fw-week-list li::after { font-size: 46px; right: var(--space-3); }
  /* Match the 20px gutter .fw-proof drops to, so every block on the page keeps
     one left edge. This has to sit after the base rule above, not up in the
     earlier phone block, or the unconditional rule wins on source order. */
  .fw-week, .fw-apps { padding: 0 var(--space-5); margin-top: var(--space-12); }
  .fw-faq { margin-top: var(--space-12); }
}

@media (prefers-reduced-motion: reduce) {
  .fw-card:hover { transform: none; }
  .faq-item { transition: none; }
}

/* ---------------------------------------------------------------------------
   Programme product page cards (/programs/<slug>/).

   These sections are laid out by an inline <style> block inside
   program/index.php, which the browser reads AFTER this file. Anything here
   that only ties on specificity would lose on source order, so every rule
   below is deliberately one level more specific than its counterpart there.
   Nothing in the template's markup changes: the orphan triangle is retired by
   collapsing the glyph box and drawing a proper marker in its place, which is
   the same accent bar the funnel puts above its section headings.
--------------------------------------------------------------------------- */

/* Card surfaces. The benefits cards had no background at all, so they were a
   hairline box on the page colour, which is what made the band read flat.
   They now sit on a real surface with the same weave the funnel panels use,
   and the audience cards keep their darker fill against their lighter band. */
.lp-band .lp-cards .lp-card {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-surface);
  background-image: var(--twm-texture);
  border: var(--border-thin) solid var(--border-hairline);
  border-radius: var(--radius-lg);
  transition: border-color var(--duration-base) var(--ease-standard),
              background-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-out);
}
.lp-band--surface .lp-cards .lp-card { background-color: var(--bg-page); }

/* One green light per card, thrown in from the top corner and clipped by the
   card. It brightens on hover so the whole grid feels lit rather than printed. */
.lp-band .lp-cards .lp-card::after {
  content: ''; position: absolute; pointer-events: none;
  top: -45%; right: -32%; width: 72%; height: 86%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--accent-primary) 14%, transparent), transparent 70%);
  opacity: .7;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.lp-band .lp-cards .lp-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.lp-band .lp-cards .lp-card:hover::after { opacity: 1; }

/* The triangle goes. The box that held it becomes the accent bar the funnel
   uses above its headings, so a card and a funnel section now open the same
   way. Collapsing the type rather than touching the template keeps the
   character in the markup and out of the design. */
.lp-band .lp-cards .lp-card .glyph {
  font-size: 0; line-height: 0;
  margin-bottom: var(--space-4);
}
.lp-band .lp-cards .lp-card .glyph::before {
  content: ''; display: block;
  width: 28px; height: 3px;
  background: var(--accent-primary);
  border-radius: var(--radius-pill);
}
/* The wide card is centred in a three-up row and left-aligned in a four-up
   one, so its marker follows whichever way the copy is set. */
.lp-band .lp-cards .lp-card--wide .glyph::before { margin-left: auto; margin-right: auto; }
.lp-band .lp-cards--four .lp-card--wide .glyph::before { margin-left: 0; margin-right: 0; }

/* Room to breathe inside the card, and the body copy a step quieter than the
   Anton title above it. */
.lp-band .lp-cards .lp-card h3 { margin: 0 0 var(--space-3); }
.lp-band .lp-cards .lp-card p { color: var(--text-secondary); line-height: 1.65; }

/* The same tick the funnel puts above its section headings, so the product
   pages and the funnel open their sections identically. The green CTA band is
   left alone: an accent bar on an accent ground is invisible. */
.lp-band:not(.lp-band--green) h2::before {
  content: ''; display: block;
  width: 28px; height: 3px;
  background: var(--accent-primary);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}
.lp-band:not(.lp-band--green) .lp-center h2::before { margin-left: auto; margin-right: auto; }
/* A section that already opens on an accent overline does not want a second
   accent mark directly under it. The overline is the tick in that case. */
.lp-band .lp-overline + h2::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .lp-band .lp-cards .lp-card { transition: none; }
  .lp-band .lp-cards .lp-card:hover { transform: none; }
}