/* 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);
}

/* ---------- 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) {
  .form__row--cols { grid-template-columns: 1fr 1fr; }
}
.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 {
  font-size: var(--step--1);
  color: oklch(75% 0.13 30);
}
.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) */
.hero__tertiary {
  margin: var(--space-s) 0 0;
  font-size: 14px;
  color: oklch(80% 0 0);
}
.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; }

/* 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 */
.calendly-embed {
  margin: var(--space-s) 0;
  background: oklch(11% 0 0);
  border: 1px solid oklch(20% 0 0);
  border-radius: 10px;
  overflow: hidden;
  min-height: 540px;
  position: relative;
}
.calendly-embed__fallback {
  padding: 32px 24px;
  text-align: center;
  color: oklch(75% 0 0);
  font-size: 14px;
  margin: 0;
}
.calendly-inline-widget {
  min-height: 540px !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;
}
.training-modal--compact .training-modal__head { margin-bottom: var(--space-s); }
.training-modal--compact .training-modal__form { gap: var(--space-2xs); }

/* 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);
}