/* Components — buttons, cards, forms, callouts */

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--color-action);
  --btn-fg: oklch(15% 0 0);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.875rem 1.5rem;
  min-height: 48px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--step-0);
  font-weight: var(--weight-semi);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: var(--shadow-inset-light);
}
.btn .btn__icon {
  width: 16px; height: 16px;
  transition: transform var(--dur-base) var(--ease-out);
}
/* v=20: color override is OUTSIDE the hover media query so it lands on every
   device. v=18 had it inside @media (hover: hover) and (pointer: fine), which
   doesn't match on some touchscreen-capable laptops — letting the inherited
   a:hover color from base.css repaint solid-button labels to white. */
.btn:hover, .btn:active { color: var(--btn-fg); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--color-action-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-1), var(--shadow-inset-light);
  }
  .btn:hover .btn__icon { transform: translateX(3px); }
}
.btn:active {
  transform: translateY(0) scale(0.98);
  background: var(--color-action-press);
  transition-duration: 100ms;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-border: var(--color-border-strong);
}
/* On hover the ghost button fills with the accent color and the label
   flips to dark ink for legibility — operator feedback v=17. */
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover {
    --btn-bg: var(--color-action);
    --btn-border: var(--color-action);
    --btn-fg: oklch(15% 0 0);
    color: var(--btn-fg);
  }
}
.btn--ghost:active {
  background: var(--color-action-press);
  color: oklch(15% 0 0);
}

.btn--lg {
  padding: 1.125rem 2rem;
  font-size: var(--step-1);
}

/* v=32: third-tier CTA weight. The hero's walk-through prompt was a bare
   underlined text link and the operator couldn't see it; as a .btn--ghost
   .btn--sm it reads as a real button while staying clearly subordinate to
   the two .btn--lg above it. min-height stays >= 44px, well over the 24x24
   WCAG 2.2 (2.5.8) target minimum. */
.btn--sm {
  padding: 0.625rem 1.125rem;
  font-size: var(--step--1);
  min-height: 44px;
}
/* v=34: in the hero stack the three CTAs share a left edge, but .btn--sm's
   18px inline padding against .btn--lg's 32px made the third label sit
   noticeably closer to the button edge than the two above it (MEASURED:
   padL 18px vs 32px, boxes identical at left=20 / 46.4). Match the inline
   padding so all three labels share the same inset; the smaller block
   padding and type size still carry the subordinate weight. */
.hero__actions .btn--sm { padding-inline: 2rem; }

/* ---------- Pricing tier card ---------- */
.tier {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: var(--space-l) var(--space-l) var(--space-xl);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .tier:hover { border-color: var(--color-text-muted); transform: translateY(-2px); }
}
.tier--featured {
  border-color: var(--color-action);
  box-shadow: var(--shadow-glow), var(--shadow-1);
}
.tier__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-action);
  color: oklch(15% 0 0);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}
.tier__name {
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-2xs);
  letter-spacing: -0.01em;
}
.tier__sub {
  font-size: var(--step--1);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-m);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-weight: var(--weight-semi);
}
.tier__price {
  font-size: clamp(2.5rem, 1.8rem + 2.5vw, 3.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--space-2xs);
  color: var(--color-text);
}
.tier__price .currency {
  font-size: 0.45em;
  vertical-align: 0.5em;
  font-weight: var(--weight-semi);
  margin-right: 2px;
  color: var(--color-text-muted);
}
.tier__period {
  font-size: var(--step--1);
  color: var(--color-text-muted);
  margin-bottom: var(--space-m);
  letter-spacing: 0.01em;
}
.tier__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-l);
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.tier__list li {
  margin: 0;
  padding-left: 1.25em;
  position: relative;
  line-height: 1.5;
}
.tier__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 8px; height: 1px;
  background: var(--color-action);
}
.tier__cta {
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
}

/* ---------- Stat / fact callout ---------- */
.fact {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-l);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}
.fact__num {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-text);
}
.fact__num--accent { color: var(--color-action); }
.fact__label {
  font-size: var(--step--1);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* ---------- Cert chips ---------- */
.cert-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
  margin: 0;
}
.cert-list li {
  margin: 0;
  padding: var(--space-2xs) var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  background: hsl(195 10% 12% / 0.6);
}

/* ---------- Quote (testimonial) ---------- */
.quote {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  position: relative;
}
.quote__stars {
  color: var(--color-action);
  font-size: var(--step-0);
  letter-spacing: 0.1em;
  line-height: 1;
}
.quote__text {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--color-text);
  font-weight: var(--weight-regular);
  letter-spacing: -0.01em;
}
.quote__attr {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}
.quote__attr strong { color: var(--color-text); font-weight: var(--weight-semi); }

.quotes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}
@media (min-width: 720px) { .quotes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .quotes-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Forms ---------- */
.form {
  display: grid;
  gap: var(--space-m);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: var(--space-l);
}
.form__row {
  display: grid;
  gap: var(--space-m);
}
@media (min-width: 600px) {
  /* KP-010: align-items start, so a field message under one column does not
     stretch the field beside it. */
  .form__row--cols { grid-template-columns: 1fr 1fr; align-items: start; }
}
.form__field { display: grid; gap: var(--space-3xs); }
.form__field label {
  font-size: var(--step--1);
  font-weight: var(--weight-semi);
  letter-spacing: 0.01em;
  color: var(--color-text);
}
.form__field label .req { color: var(--color-action); margin-left: 2px; }
.form__field input,
.form__field textarea {
  font: inherit;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 0.875rem 1rem;
  min-height: 48px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.form__field textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.form__field input::placeholder,
.form__field textarea::placeholder { color: var(--color-text-faint); }
.form__field input:focus-visible,
.form__field textarea:focus-visible {
  border-color: var(--color-action);
  outline: none;
  background: hsl(195 20% 8%);
}
.form__field input:invalid:not(:placeholder-shown),
.form__field textarea:invalid:not(:placeholder-shown) {
  border-color: oklch(60% 0.15 30);
}
.form__field-error {
  margin: 0; /* KP-010: written under a field by funnels.js; no paragraph gap */
  font-size: var(--step--1);
  color: oklch(75% 0.13 30);
}
/* KP-011: the Turnstile widget's box inside each form (scripts/funnels.js
   renders into it when a site key is built in; empty and out of the layout
   otherwise). The widget keeps out of the way (interaction-only) and takes
   room only when a visitor must tick its checkbox. */
.form__turnstile { display: grid; }
.form__turnstile:empty { display: none; }
.form__turnstile iframe { max-width: 100%; }
.training-modal__form .form__turnstile:not(:empty) { margin-bottom: var(--space-2xs); }
.form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.form__submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: center;
  margin-top: var(--space-2xs);
}
.form__note {
  font-size: var(--step--1);
  color: var(--color-text-muted);
  margin: 0;
  flex: 1 1 16rem;
}
.form__status {
  margin: 0;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
}
.form__status[data-state="success"] {
  background: hsl(160 25% 14%);
  border: 1px solid hsl(160 30% 30%);
  color: hsl(160 60% 80%);
}
.form__status[data-state="error"] {
  background: hsl(0 25% 14%);
  border: 1px solid hsl(0 30% 30%);
  color: hsl(0 60% 80%);
}

/* ---------- Map embed ---------- */
.map {
  position: relative;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-1);
  aspect-ratio: 4 / 3;
}
.map iframe {
  width: 100%; height: 100%;
  border: 0;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.6) contrast(0.95);
  /* Map dark-mode trick: invert + hue-rotate gives a passable dark map without the heavy Maps Embed Plus */
}

/* ---------- NAP block ---------- */
.nap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m) var(--space-l);
}
/* "Follow" block (5th item) spans both columns underneath the 2x2 NAP */
.nap > div:nth-child(5) { grid-column: 1 / -1; }
@media (max-width: 420px) {
  .nap { grid-template-columns: 1fr; }
  .nap > div:nth-child(5) { grid-column: auto; }
}
.nap dt {
  font-size: var(--step--1);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3xs);
}
.nap dd {
  margin: 0;
  font-size: var(--step-0);
  color: var(--color-text);
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.nap a {
  color: var(--color-text);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .nap a:hover { color: var(--color-action); }
}

/* ---------- Social row ---------- */
.socials {
  display: flex;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.socials li { margin: 0; }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .socials a:hover { color: var(--color-action); border-color: var(--color-action); }
}
.socials svg { width: 18px; height: 18px; }

/* ---------- Tier fine-point footnote ---------- */
.tiers__finepoint {
  margin-top: var(--space-l);
  max-width: 60rem;
  color: var(--color-text-muted);
  font-size: var(--step--1);
  line-height: 1.55;
}
.tiers__finepoint strong { color: var(--color-text); }

/* ---------- Training section helpers ---------- */
.training-cta {
  margin-top: var(--space-l);
}
.training-finepoint {
  font-size: var(--step--1);
  color: var(--color-text-muted);
  margin-top: var(--space-l);
  line-height: 1.55;
}
.training-finepoint em { color: var(--color-text); font-style: normal; font-weight: var(--weight-semi); }
.fact__label small {
  display: inline-block;
  margin-top: 2px;
  opacity: 0.7;
}

/* ---------- Reviews block (folded into Gym section) ---------- */
/* v=17: reduced spacing so the gallery + reviews carousels fit in one viewport. */
.reviews-block {
  margin-top: var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-border);
}
.reviews-block__head {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  max-width: 56rem;
}
.reviews-block__head--compact {
  gap: 0;
  margin-bottom: var(--space-s);
}
.reviews-block__head h3 {
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
}
.reviews-block__head p {
  color: var(--color-text-muted);
  font-size: var(--step-0);
}
.reviews-block__more {
  margin-top: var(--space-m);
  color: var(--color-text-muted);
  font-size: var(--step--1);
}
.reviews-block__more a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-action);
  text-underline-offset: 3px;
}

/* ---------- Owner card (about page) ---------- */
.owner-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: var(--space-l);
  display: grid;
  gap: var(--space-s);
}
.owner-card h3 {
  font-size: var(--step-2);
  letter-spacing: -0.015em;
  margin: 0;
}
.owner-card__role {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-action);
  font-weight: var(--weight-semi);
  margin: 0;
}
.owner-card p {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ---------- Page CTA block (about page footer call-to-action) ---------- */
.page-cta {
  display: grid;
  gap: var(--space-m);
  text-align: center;
  max-width: 50rem;
  margin: 0 auto;
  padding-block: var(--space-l);
}
.page-cta h2 {
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  line-height: var(--leading-snug);
}
.page-cta p {
  color: var(--color-text-muted);
  font-size: var(--step-1);
}
.page-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-s);
}

/* ---------- About sub-page tightening (v=17) ----------
   On `/`, `#about` is the full-viewport panel storytelling moment, so it
   carries `min-height: 100svh` from layout.css. On `/about.html` we have
   4 stacked sections and that constraint creates dead space. The body
   class .page-about scopes overrides to the sub-page only. */
.page-about #about {
  min-height: auto;
  display: block;
}
.page-about .section {
  padding-block: clamp(2rem, 2rem + 2vw, 3.5rem);
}
.page-about .section--page-head {
  padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem) clamp(1rem, 1rem + 1vw, 2rem);
}
.page-about .section-head {
  margin-bottom: var(--space-l);
}
.page-about .split { gap: var(--space-l); }
@media (min-width: 880px) {
  .page-about .split { gap: var(--space-2xl); }
}
.page-about .split__body > * + * { margin-top: var(--space-s); }
.page-about .split__body h2 { margin-bottom: var(--space-3xs); }

/* ---------- Footer mission tagline ---------- */
.footer__mission {
  font-size: var(--step-1);
  color: var(--color-text);
  max-width: 30rem;
  margin: 0 0 var(--space-m);
  line-height: 1.4;
}

/* ---------- Photo gallery carousel (v=15) ---------- */
.gallery {
  position: relative;
  /* v=17: reduced from 50vh → 36vh so gallery + reviews fit in one viewport */
  --gallery-slide-h: clamp(14rem, 36vh, 24rem);
}
.gallery__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--radius-l);
  -webkit-overflow-scrolling: touch;
}
.gallery__viewport::-webkit-scrollbar { display: none; }
.gallery__viewport:focus-visible { outline: 2px solid var(--color-action); outline-offset: 4px; }
.gallery__track {
  display: flex;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gallery__slide {
  flex: 0 0 auto;
  height: var(--gallery-slide-h);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--ink-950);
  box-shadow: var(--shadow-1);
}
.gallery__slide img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- Testimonial carousel (v=15) ---------- */
.testimonial-carousel {
  position: relative;
}
.testimonial-carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-inline: calc(var(--page-pad) * -1);
  padding-inline: var(--page-pad);
}
.testimonial-carousel__viewport::-webkit-scrollbar { display: none; }
.testimonial-carousel__viewport:focus-visible { outline: 2px solid var(--color-action); outline-offset: 4px; }
.testimonial-carousel__track {
  display: flex;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}
.testimonial-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  margin: 0;
  display: flex;
}
.testimonial-carousel__slide > .quote { flex: 1; }
@media (min-width: 720px) {
  .testimonial-carousel__slide { flex: 0 0 calc(50% - var(--space-m) * 0.5); scroll-snap-align: start; }
}
@media (min-width: 1080px) {
  .testimonial-carousel__slide { flex: 0 0 calc(33.3333% - var(--space-m) * 0.6667); }
}

/* ---------- Shared carousel chrome ---------- */
.carousel-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: hsl(0 0% 4% / 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid hsl(195 10% 30% / 0.4);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  cursor: pointer;
  z-index: 2;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  padding: 0;
}
@media (min-width: 760px) and (hover: hover) and (pointer: fine) {
  .carousel-btn { display: flex; }
}
.carousel-btn:hover {
  background: hsl(0 0% 4% / 0.95);
  border-color: var(--color-action);
}
.carousel-btn[aria-disabled="true"] {
  opacity: 0.3;
  pointer-events: none;
}
.carousel-btn--prev { left: var(--space-s); }
.carousel-btn--next { right: var(--space-s); }
.carousel-btn svg { width: 20px; height: 20px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  margin: var(--space-m) 0 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.carousel-dots li { margin: 0; }
.carousel-dots button {
  width: 24px;
  height: 4px;
  background: var(--color-border);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), width var(--dur-base) var(--ease-out);
}
.carousel-dots button[aria-current="true"] {
  background: var(--color-action);
  width: 36px;
}
@media (hover: hover) and (pointer: fine) {
  .carousel-dots button:hover { background: var(--color-text-muted); }
  .carousel-dots button[aria-current="true"]:hover { background: var(--color-action); }
}
.carousel-dots button:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__viewport,
  .testimonial-carousel__viewport { scroll-behavior: auto; }
  .carousel-dots button { transition: none; }
}

/* ---------- Training modal (v=16, demo-mode) ---------- */
.training-modal {
  width: min(560px, 100%);
  max-width: 100%;
  max-height: 100dvh;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: 0;
  margin: auto;
  z-index: var(--z-modal);
  overflow: hidden;
}
.training-modal:not([open]) { display: none; }
.training-modal::backdrop {
  background: hsl(0 0% 0% / 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.training-modal__panel {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  overflow-y: auto;
  padding: clamp(1.25rem, 2vw, 2rem);
  gap: var(--space-m);
}
.training-modal__close {
  position: absolute;
  top: var(--space-s);
  right: var(--space-s);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  cursor: pointer;
  z-index: 2;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.training-modal__close:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.training-modal__head {
  display: grid;
  gap: var(--space-2xs);
  padding-right: 3rem;
}
.training-modal__head h2 {
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  margin: 0;
}
.training-modal__lead {
  margin: 0 0 var(--space-s);
  color: var(--color-text-muted);
  font-size: var(--step-0);
}

/* Step indicator */
.step-indicator {
  display: flex;
  list-style: none;
  margin: var(--space-s) 0 0;
  padding: 0;
  gap: var(--space-2xs);
  counter-reset: step;
}
.step-indicator li {
  flex: 1;
  font-size: var(--step--1);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  padding: var(--space-2xs) 0;
  border-top: 2px solid var(--color-border);
  text-transform: uppercase;
  font-weight: var(--weight-semi);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  counter-increment: step;
}
.step-indicator li::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}
.step-indicator li[aria-current="step"] {
  color: var(--color-text);
  border-top-color: var(--color-action);
}
.step-indicator li[aria-current="step"]::before {
  background: var(--color-action);
  color: oklch(15% 0 0);
}
.step-indicator li[data-completed="true"] {
  color: var(--color-text);
  border-top-color: var(--color-action);
}
.step-indicator li[data-completed="true"]::before {
  background: var(--color-action);
  color: oklch(15% 0 0);
}

.training-modal__step {
  display: grid;
  gap: var(--space-m);
}
.training-modal__step[hidden] { display: none; }

.training-modal__actions {
  display: flex;
  gap: var(--space-s);
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: var(--space-s);
}
.training-modal__actions--center { justify-content: center; }
.training-modal__actions .btn { flex: 1; min-width: 8rem; }
.training-modal__actions .btn--ghost { flex: 0 1 auto; }

/* Session options (radio cards) */
.session-options {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}
.session-option {
  display: block;
  position: relative;
  cursor: pointer;
}
.session-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.session-option__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xs) var(--space-s);
  align-items: center;
  padding: var(--space-m);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  background: var(--color-bg);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.session-option:hover .session-option__inner {
  border-color: var(--color-text-muted);
}
.session-option input:checked + .session-option__inner {
  border-color: var(--color-action);
  background: hsl(195 20% 10%);
  box-shadow: 0 0 0 1px var(--color-action) inset;
}
.session-option input:focus-visible + .session-option__inner {
  outline: 2px solid var(--color-action);
  outline-offset: 3px;
}
.session-option__name {
  margin: 0;
  font-size: var(--step-0);
  font-weight: var(--weight-semi);
  color: var(--color-text);
  grid-column: 1;
  grid-row: 1;
}
.session-option__sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-text-muted);
  grid-column: 1;
  grid-row: 2;
}
.session-option__price {
  margin: 0;
  font-size: var(--step-2);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--color-text);
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.session-option__price .currency {
  font-size: 0.55em;
  vertical-align: 0.4em;
  font-weight: var(--weight-semi);
  color: var(--color-text-muted);
}
.session-option__badge {
  position: absolute;
  top: -8px;
  right: var(--space-s);
  background: var(--color-action);
  color: oklch(15% 0 0);
  font-size: 0.65rem;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.session-option--featured .session-option__inner {
  border-color: hsl(195 30% 30%);
}

/* Payment summary */
.payment-summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}
.payment-summary__label {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semi);
}
.payment-summary__value {
  margin: var(--space-3xs) 0 0;
  font-size: var(--step-1);
  font-weight: var(--weight-semi);
  color: var(--color-text);
}
.payment-summary__value--total {
  font-size: var(--step-2);
  letter-spacing: -0.015em;
  font-weight: var(--weight-bold);
}

/* Stripe Elements mount */
.training-modal__stripe-mount {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  min-height: 14rem;
  display: grid;
  align-content: start;
  gap: var(--space-s);
}
.training-modal__loading {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--step--1);
  text-align: center;
  padding: var(--space-l);
}
.training-modal__demo-note {
  margin: 0;
  padding: var(--space-s) var(--space-m);
  background: hsl(195 25% 10%);
  border: 1px solid hsl(195 30% 25%);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.training-modal__demo-note strong { color: var(--color-action); }
.training-modal__demo-note code {
  font-family: var(--font-mono);
  background: hsl(195 20% 14%);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  color: var(--color-text);
  font-size: 0.92em;
}
.training-modal__error {
  margin: 0;
  padding: var(--space-s) var(--space-m);
  background: hsl(0 25% 14%);
  border: 1px solid hsl(0 30% 30%);
  color: hsl(0 60% 80%);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
}

/* Success state */
.training-modal__step--success {
  text-align: center;
  align-items: center;
}
.training-modal__step--success h3 {
  margin: 0;
  font-size: var(--step-2);
  letter-spacing: -0.015em;
}
.training-modal__step--success .training-modal__lead {
  text-align: center;
  margin: 0;
}
.success-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--color-action);
  color: oklch(15% 0 0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.success-mark svg { width: 28px; height: 28px; }

/* Calendly placeholder (swap for real iframe when account connected) */
.calendly-placeholder {
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-m);
  background: var(--color-bg);
  display: grid;
  gap: var(--space-s);
  width: 100%;
}
.calendly-placeholder__head {
  margin: 0;
  font-size: var(--step--1);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--weight-semi);
}
.calendly-placeholder__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xs);
}
@media (min-width: 460px) {
  .calendly-placeholder__grid { grid-template-columns: repeat(6, 1fr); }
}
.calendly-placeholder__day {
  display: grid;
  gap: 2px;
  text-align: center;
  padding: var(--space-s) var(--space-2xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  font-size: var(--step--1);
}
.calendly-placeholder__day span:first-child {
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-size: 0.65rem;
  font-weight: var(--weight-semi);
}
.calendly-placeholder__day span:last-child {
  color: var(--color-text);
  font-weight: var(--weight-semi);
}
.calendly-placeholder__day--selected {
  background: hsl(195 25% 10%);
  border-color: var(--color-action);
}
.calendly-placeholder__note {
  margin: 0;
  font-size: var(--step--1);
  color: var(--color-text-faint);
  font-style: italic;
}

/* Modal motion */
@media (prefers-reduced-motion: no-preference) {
  .training-modal[open] {
    animation: training-modal-in 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  @keyframes training-modal-in {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

/* Mobile: full-bleed */
@media (max-width: 600px) {
  .training-modal {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: 0;
    margin: 0;
  }
  .training-modal__panel {
    padding: var(--space-m) var(--space-s) var(--space-l);
  }
  .training-modal__actions { flex-direction: column-reverse; align-items: stretch; }
  .training-modal__actions .btn { flex: 1; width: 100%; }
}

/* sr-only utility (used inside modal) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- Reveal (scroll-driven) ---------- */
@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  @keyframes reveal-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- v=21 additions: tour modal, capture modal, compliance UI ---------- */

/* Hero tertiary tour CTA (text-button link beneath the two solid buttons) */
.link-cta {
  background: transparent;
  border: 0;
  color: oklch(80% 0.04 195);
  font: inherit;
  padding: 4px 0;
  cursor: pointer;
  letter-spacing: .01em;
  border-bottom: 1px solid oklch(40% 0.04 195 / 0.45);
  transition: color .15s, border-color .15s;
}
.link-cta:hover,
.link-cta:focus-visible {
  color: var(--accent-500);
  border-color: var(--accent-500);
  outline: none;
}

/* Mid-funnel tour band (between Training and The Gym sections) */
.tour-band {
  background: linear-gradient(180deg, oklch(11% 0 0), oklch(8% 0 0));
  border-top: 1px solid oklch(20% 0 0);
  border-bottom: 1px solid oklch(20% 0 0);
  padding: var(--space-xl) 0;
  text-align: center;
}
.tour-band__inner { max-width: 720px; }
.tour-band__h {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: var(--space-2xs) 0 var(--space-2xs);
}
.tour-band__lead {
  color: oklch(80% 0 0);
  margin: 0 auto var(--space-m);
  max-width: 540px;
}
.tour-band__cta { margin: 0; }
/* v=33: at 360px this CTA's label is long enough that the nowrap .btn crushes
   its trailing arrow icon to ~3.7px of 16 (flex-shrink on .btn__icon) rather
   than overflowing visibly. Allowing the label to wrap recovers the icon to
   15.2px at 360 and changes nothing at 390 or above. Same class of fault as
   the hero fix in KP-001 — MEASURED, not reasoned. */
.tour-band__cta .btn { white-space: normal; }

/* Coach ribbon (v=42, KP-008) — a slim band directly above #contact for a
   second audience: people asking about coaching here, not joining. Same band
   family as .tour-band (dark ground, hairlines top and bottom) but
   deliberately quieter so it never competes with the customer CTAs: one line
   at --step-1, one ghost button, no eyebrow, no lead. Tokens only.
   The row wraps rather than shrinks: when the line and the button no longer
   fit side by side the button drops beneath it, both centred. */
.coach-ribbon {
  background: linear-gradient(180deg, var(--ink-950), var(--ink-1000));
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-l);
}
.coach-ribbon__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-s) var(--space-l);
  text-align: center;
}
.coach-ribbon__h {
  margin: 0;
  font-size: var(--step-1);
  font-weight: var(--weight-semi);
}

/* Form consent (SMS opt-in checkbox row) */
.form__consent {
  margin: var(--space-s) 0 var(--space-2xs);
  font-size: 13px;
  color: oklch(78% 0 0);
}
.form__consent label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  line-height: 1.45;
}
.form__consent input[type="checkbox"] {
  margin-top: 3px;
  width: 16px; height: 16px;
  accent-color: var(--accent-500);
  cursor: pointer;
}
.form__consent small {
  display: block;
  font-size: 11px;
  opacity: .55;
  margin-top: 2px;
}

/* Calendly inline embed slot
   v=26: Calendly's injected widget sizes itself to content (often ~150px
   while loading + waiting to pick a date). Without explicit heights on the
   widget AND its iframe, the parent's min-height left a tall whitespace
   below the calendar. Force both to fill a fixed slot so the calendar uses
   the whole rectangle. */
.calendly-embed {
  margin: var(--space-s) 0;
  background: oklch(11% 0 0);
  border: 1px solid oklch(20% 0 0);
  border-radius: 10px;
  overflow: hidden;
  height: 720px;
  position: relative;
}
.calendly-embed__fallback {
  padding: 32px 24px;
  text-align: center;
  color: oklch(75% 0 0);
  font-size: 14px;
  margin: 0;
}
/* Calendly injects a .calendly-inline-widget wrapper containing an iframe.
   The !important is necessary because Calendly's own inline styles compete
   with our slot dimensions. */
.calendly-embed .calendly-inline-widget,
.calendly-embed iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 720px !important;
  border: 0 !important;
}
@media (max-width: 600px) {
  .calendly-embed { height: 640px; }
  .calendly-embed .calendly-inline-widget,
  .calendly-embed iframe { min-height: 640px !important; }
}

/* Training modal: post-success skip CTA + smaller "compact" variant for membership capture */
.training-modal__skip {
  text-align: center;
  margin: var(--space-s) 0 0;
}
.training-modal--compact .training-modal__panel {
  max-width: 480px;
}
/* v=24: tighten the gap between the lead-p inside head and the form below,
   and give the submit row breathing room before the "you'll be sent to our
   member portal" finepoint underneath. */
.training-modal--compact .training-modal__head { margin-bottom: var(--space-2xs); }
.training-modal--compact .training-modal__head .training-modal__lead { margin-bottom: 0; }
.training-modal--compact .training-modal__form { gap: var(--space-2xs); }
.training-modal--compact .training-modal__actions { margin-block: var(--space-s) var(--space-2xs); }
.training-modal--compact .form__note { margin-top: var(--space-2xs); }

/* KP-002 (R5): --compact's head margin-bottom above is written for the
   MEMBERSHIP modal, whose lead sits *inside* .training-modal__head — there the
   8px tightens head-to-form. The consultation modal follows the TOUR modal's
   structure instead, with the lead *outside* the head, so that same 8px lands
   between the h2 and the lead and pushes it to 31.3px where the tour reference
   is 23.5px. Result was a 23.5 / 31.3 / 39.2 staircase instead of the tour's
   flat 23.5 rhythm then one step to 39.2. Scoped to this dialog by attribute so
   the membership modal, which the rule was designed for, is untouched.
   KP-008: the coach-inquiry modal copies the consultation modal's structure
   (lead outside the head), so it takes the same correction. */
[data-training-consult-modal] .training-modal__head,
[data-coach-modal] .training-modal__head { margin-bottom: 0; }

/* Legal pages (privacy + terms) */
.legal__inner { max-width: 720px; margin: 0 auto; }
.legal h1 {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 var(--space-s);
}
.legal h2 {
  font-size: 1.125rem; font-weight: 700;
  margin: var(--space-l) 0 var(--space-2xs);
}
.legal__lead {
  font-size: 1.0625rem; color: oklch(85% 0 0);
  margin-bottom: var(--space-m);
}
.legal p, .legal ul {
  color: oklch(78% 0 0); margin: 0 0 var(--space-s);
  line-height: 1.65;
}
.legal ul { padding-left: 1.25em; }
.legal a { color: var(--accent-500); }

/* ---------- v=23 additions: section spacing + modal form spacing ---------- */

/* #8 — Training section: tighten the gap between the section head
   (eyebrow + headline + lead) and the body content. The global
   --space-2xl margin-bottom looked airy in this section because the
   split body has its own internal padding. */
#training .section-head {
  margin-bottom: var(--space-m);
}

/* #14 — Training + tour modal forms had cramped vertical rhythm because
   .form__field has only --space-3xs internal gap and rows touched. Add a
   little air between fields when inside a modal form. Contact form on the
   main page is unaffected (it lives outside any .training-modal context). */
.training-modal__form .form__row,
.training-modal__form .form__field {
  margin-bottom: var(--space-2xs);
}
.training-modal__form .form__row:last-of-type,
.training-modal__form .form__field:last-of-type {
  margin-bottom: 0;
}
.training-modal__form .form__consent {
  margin-top: var(--space-2xs);
}