/* ==========================================================================
   TRUE FORM — Design System
   Direction: Dark athletic-premium. Restrained palette, one accent (emerald).
   Display: Anton / Body: Manrope
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color tokens */
  --color-bg: #0a0b0a;
  --color-bg-elevated: #131613;
  --color-surface: #1a1e1b;
  --color-surface-2: #20251f;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);

  --color-text: #f4f6f4;
  --color-text-muted: #a3aba5;
  --color-text-faint: #6f7973;

  --color-accent: #3ee089;
  --color-accent-strong: #2bc474;
  --color-accent-soft: rgba(62, 224, 137, 0.12);
  --color-on-accent: #07140d;

  --color-danger: #ef4b4b;

  /* Typography — unified Geist system */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;

  /* Layout */
  --container-max: 1200px;
  --header-height: 76px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

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

button {
  font-family: inherit;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-transform: uppercase;
}

h3, h4 {
  letter-spacing: 0.005em;
  text-transform: none;
}

p {
  margin: 0;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   Type scale
   ========================================================================== */

.h1 {
  font-size: clamp(2.6rem, 5.5vw + 1rem, 5.5rem);
  line-height: 0.98;
  font-weight: var(--weight-black);
  letter-spacing: -0.01em;
}

.h2 {
  font-size: clamp(2rem, 3.2vw + 1rem, 3.4rem);
  line-height: 1.02;
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.h3 {
  font-size: clamp(1.4rem, 1.4vw + 1rem, 1.9rem);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.005em;
  text-transform: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.eyebrow::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

.lead {
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 56ch;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-7);
  }
}

.section {
  padding-block: var(--space-9);
}

@media (max-width: 767px) {
  .section {
    padding-block: var(--space-8);
  }
}

.section-head {
  margin-bottom: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.section--compact {
  padding-block: var(--space-7);
}

.section--compact .section-head {
  margin-bottom: var(--space-5);
}

@media (max-width: 767px) {
  .section--compact {
    padding-block: var(--space-6);
  }
}

.section--feature {
  padding-block: var(--space-10);
  position: relative;
}

.section--feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 500px at 12% 0%, rgba(62, 224, 137, 0.07), transparent 60%);
  pointer-events: none;
}

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

.section--feature .h2 {
  font-size: clamp(2.4rem, 4vw + 1rem, 4.4rem);
}

@media (max-width: 767px) {
  .section--feature {
    padding-block: var(--space-8);
  }
}

.section--alt {
  background: var(--color-bg-elevated);
  border-block: 1px solid var(--color-border);
}

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Below 360px, the explicit 260px column minimum above can exceed the
   available inner width once .grid-2 sits nested inside a padded .card
   (e.g. checkout.html, booking.html, free-guide.html), causing
   horizontal page overflow. Scoped to that one nested case only, so
   the 260px minimum/.split/.card rules above stay untouched at 360px
   and wider. */
@media (max-width: 359px) {
  .card .grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* booking.html's page-hero heading is wide enough at the global
     clamp() floor that its longest word ("Consultation") paints past
     the viewport edge below 360px, even though the heading itself
     never breaks mid-word. Scoped to booking.html only; the shared
     .h1 rule and every other page's heading stay untouched. */
  .booking-page .page-hero .h1 {
    font-size: 2.2rem;
  }

  /* .form-privacy-note (free-guide.html only) can be wider than its
     card at this width; allow it to wrap/shrink safely instead of
     bleeding past the card edge. */
  .form-privacy-note {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.delivery-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .delivery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-fg: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.95rem 1.7rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
  white-space: nowrap;
  min-height: 48px;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 0 0 0 rgba(62, 224, 137, 0.0);
}

.btn-primary:hover {
  background: var(--color-accent-strong);
  box-shadow: 0 8px 30px -8px rgba(62, 224, 137, 0.55);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

.btn-ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 0.65rem 1.2rem;
  font-size: 0.85rem;
  min-height: 40px;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(10, 11, 10, 0.7);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--duration-base) var(--ease-out);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-4);
  font-weight: 600;
  font-size: 0.92rem;
}

.nav-links a {
  position: relative;
  padding-block: var(--space-2);
  color: var(--color-text-muted);
  transition: color var(--duration-base) var(--ease-out);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: right var(--duration-base) var(--ease-out);
}

.nav-links a:hover {
  color: var(--color-text);
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
  right: 0;
}

.nav-links a.is-active {
  color: var(--color-text);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  transition: border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.nav-cart:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.nav-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.65rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.nav-cart-count[data-empty="true"] {
  display: none;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text);
}

@media (min-width: 1280px) {
  .nav-links {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
  .site-header .nav {
    max-width: 1320px;
  }
  .brand {
    flex-shrink: 0;
  }
  .brand > span:last-child {
    white-space: nowrap;
  }
}

@media (max-width: 1279px) {
  .nav-actions > .btn {
    display: none;
  }
}

@media (min-width: 1280px) and (max-width: 1399px) {
  .nav-links {
    gap: var(--space-4);
    font-size: 0.82rem;
  }
}

/* Mobile nav drawer */
.nav-drawer {
  position: fixed;
  top: var(--header-height);
  right: 0;
  left: auto;
  width: min(360px, 88vw);
  height: calc(100dvh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  background: var(--color-bg);
  z-index: 99;
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow: hidden;
  transform: translateX(100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility 0s linear var(--duration-base);
}

.nav-drawer.is-open {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              visibility 0s;
}

.nav-drawer ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.nav-drawer a {
  display: block;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

@media (max-width: 1279px) {
  .nav-drawer > .btn {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: auto;
    min-height: 48px;
    margin: var(--space-3) var(--space-4)
      calc(var(--space-3) + env(safe-area-inset-bottom));
    padding: 12px var(--space-3);
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
    align-items: center;
    justify-content: center;
  }
}

@media (min-width: 1280px) {
  .nav-drawer {
    display: none;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(92vh, 880px);
  padding-block: var(--space-9) var(--space-9);
  background: var(--color-bg);
}

.hero--video-only {
  padding: 0;
  width: 100%;
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
}

.hero--video-only .hero-bg-video {
  width: 100%;
  height: 100%;
  object-position: top center;
}

/* ── Phone + Tablet (0–1279px): the hero is now a clean, standalone
   16:9 image stage — the cards no longer overlay it (see the isolated
   .hero-feature-marquee below the hero section instead). The source
   asset is exactly 3840×2160 (16:9), so matching the box's own
   aspect-ratio to the image's native ratio means object-fit: cover
   produces zero crop in either dimension — the full poster, including
   the baked-in NASM text and both dumbbell areas, stays visible. Height
   is now a pure function of width via aspect-ratio; no vh/dvh formula,
   no padding-top reservation, no min/max bounds are needed. ── */
@media (max-width: 1279px) {
  .hero--video-only {
    display: block;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .hero--video-only .hero-bg-video {
    position: absolute;
    inset: 0;
    bottom: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

.hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-faint);
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation: hero-scroll-bounce 2.4s var(--ease-in-out) infinite;
}

.hero-scroll-hint svg {
  width: 18px;
  height: 18px;
}

@keyframes hero-scroll-bounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.6; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint {
    animation: none;
  }
}

/* Mobile users already know the page scrolls; the hint only risked
   overlapping the cards or reintroducing empty space, so it's hidden
   here. Placed after the base rule above (same specificity) so this
   override actually wins at mobile widths. Desktop/tablet (outside this
   media query) keep it unchanged. */
@media (max-width: 767px) {
  .hero-scroll-hint {
    display: none;
  }
}

/* Tablet's bounded hero (above) leaves little spare vertical room below
   the bottom-row cards, so the hint is hidden here too — same reasoning
   as mobile. Placed after the base rule for the same cascade reason. */
@media (min-width: 768px) and (max-width: 1279px) {
  .hero-scroll-hint {
    display: none;
  }
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Hero bottom fade (home only — .hero--video-only is index.html only) */
.hero--video-only::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(5, 12, 7, 0.50) 45%,
    rgba(5, 10, 6, 0.85) 78%,
    #0a0b0a 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Phone + tablet: cards no longer overlay the image (they live in the
   isolated marquee below the hero), so the fade's previous job — leaving
   room for card content — no longer applies. A short, subtle edge-blend
   is all that's needed to ease the image's bottom edge into the page
   background below; preserved short rather than removed entirely so
   there's no hard seam. */
@media (max-width: 1279px) {
  .hero--video-only::after {
    height: 8%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(5, 10, 6, 0.55) 60%,
      #0a0b0a 100%
    );
  }
}

/* Scroll hint stays above the fade overlay */
.hero--video-only .hero-scroll-hint {
  z-index: 2;
}

/* ── Hero interactive feature cards (home only) ───────────────── */
.hero-feature-cards {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero-feature-card {
  position: absolute;
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: 256px;
  min-height: 116px;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  background: rgba(6, 10, 8, 0.62);
  border: 1px solid rgba(62, 224, 137, 0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text);
  text-decoration: none;
  gap: 0.55rem;
  transition: transform 0.22s var(--ease-out),
              border-color 0.22s var(--ease-out),
              box-shadow 0.22s var(--ease-out),
              background 0.22s var(--ease-out);
  cursor: pointer;
}

/* Real decorative <img> media for the seven hero feature cards: each
   card's `position: absolute`/`relative` + `overflow: hidden` already
   gives it a clipping positioning context, so the image (last child)
   can sit absolutely in the right half without affecting card layout.
   `object-fit: contain` always shows the complete source photo; the
   radial mask fades its rectangular edges into the card background. */
.hero-feature-card__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(
    ellipse at 58% 50%,
    #000 0%,
    #000 56%,
    rgba(0, 0, 0, 0.9) 68%,
    rgba(0, 0, 0, 0.55) 82%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse at 58% 50%,
    #000 0%,
    #000 56%,
    rgba(0, 0, 0, 0.9) 68%,
    rgba(0, 0, 0, 0.55) 82%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.hero-feature-card > .hero-feature-card__title,
.hero-feature-card > ul,
.hero-feature-marquee__card > .hero-feature-card__title,
.hero-feature-marquee__card > ul {
  position: relative;
  z-index: 1;
}

.hero-feature-card__title {
  display: block;
  font-size: 0.76rem;
  font-weight: 650;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.28;
}

.hero-feature-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hero-feature-card li {
  font-size: 0.67rem;
  color: rgba(255, 255, 255, 0.70);
  padding-left: 0.85rem;
  position: relative;
  line-height: 1.38;
}

.hero-feature-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.44em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(62, 224, 137, 0.85);
}

.hero-feature-card:hover,
.hero-feature-card:focus-visible {
  transform: translateY(-4px);
  background: rgba(6, 12, 8, 0.80);
  border-color: rgba(62, 224, 137, 0.60);
  box-shadow: 0 0 24px -4px rgba(62, 224, 137, 0.28),
              0 12px 32px -8px rgba(0, 0, 0, 0.5);
  outline: none;
}

.hero-feature-card:focus-visible {
  outline: 2px solid rgba(62, 224, 137, 0.7);
  outline-offset: 3px;
}

/* ── Per-card desktop positions — orbit around the circle ── */
/* Top center — Workout Video Library */
.hero-feature-card--videos      { top: 8%;  left: 50%; transform: translateX(-50%); }
.hero-feature-card--videos:hover,
.hero-feature-card--videos:focus-visible {
  transform: translateX(-50%) translateY(-4px);
}
/* Row 1 — Women (left) / Nutrition (right) — same top */
.hero-feature-card--women       { top: 22%; left: 19%; }
.hero-feature-card--nutrition   { top: 22%; right: 19%; }
/* Row 2 — Progress (left) / Trainer (right) — same top */
.hero-feature-card--progress    { top: 47%; left: 18%; }
.hero-feature-card--trainer     { top: 47%; right: 18%; }
/* Row 3 — App (left) / Supplements (right) — same bottom */
.hero-feature-card--app         { bottom: 8%; left: 22%; }
.hero-feature-card--supplements { bottom: 8%; right: 22%; }

/* Phone + tablet (0–1279px): the original desktop orbit set is hidden —
   it stays in the DOM unchanged (for the desktop breakpoint) but is not
   shown here; the isolated .hero-feature-marquee below the hero section
   is the phone/tablet card presentation instead. */
@media (max-width: 1279px) {
  .hero-feature-cards {
    display: none;
  }
}

/* ── Phone + tablet feature-card marquee — fully isolated from the
   desktop orbit above AND from the unrelated Plans carousel elsewhere on
   this page (separate selectors, separate keyframe name, separate CSS).
   Mirrors only the proven, generic *mechanism* already used by the
   Plans carousel: CSS-only continuous animation, a duplicated card
   sequence so translateX(-50%) loops with zero visible jump, hover/
   focus-within pause, a reduced-motion fallback, and native horizontal
   touch scrolling via overflow-x: auto on the outer wrapper. ── */
@media (max-width: 1279px) {
  .hero-feature-marquee {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding-block: var(--space-5) var(--space-4);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hero-feature-marquee::-webkit-scrollbar {
    display: none;
  }

  .hero-feature-marquee__track {
    display: flex;
    gap: clamp(10px, 2vw, 18px);
    width: max-content;
    padding-inline: var(--space-4);
    animation: hero-marquee-scroll 50s linear infinite;
    will-change: transform;
  }

  .hero-feature-marquee:hover .hero-feature-marquee__track,
  .hero-feature-marquee:focus-within .hero-feature-marquee__track {
    animation-play-state: paused;
  }

  @keyframes hero-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  .hero-feature-marquee__card {
    position: relative;
    overflow: hidden;
    flex: 0 0 clamp(220px, 56vw, 280px);
    width: clamp(220px, 56vw, 280px);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(6, 10, 8, 0.78);
    border: 1px solid rgba(62, 224, 137, 0.20);
    color: var(--color-text);
    text-decoration: none;
    transition: transform 0.22s var(--ease-out), border-color 0.22s var(--ease-out);
  }
  .hero-feature-marquee__card:hover,
  .hero-feature-marquee__card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(62, 224, 137, 0.45);
    outline: none;
  }
  .hero-feature-marquee__card:focus-visible {
    outline: 2px solid rgba(62, 224, 137, 0.7);
    outline-offset: 3px;
  }
  .hero-feature-marquee__card .hero-feature-card__title {
    font-size: 0.8rem;
  }
  .hero-feature-marquee__card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .hero-feature-marquee__card li {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.70);
    padding-left: 0.85rem;
    position: relative;
    line-height: 1.4;
  }
  .hero-feature-marquee__card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(62, 224, 137, 0.85);
  }
}

/* Phone-only: at the shared tablet/phone clamp's 220px floor, the card
   reads too square once text wraps — widened here for phones only.
   Placed after the block above (same specificity, same max-width:1279px
   range overlap) so this override actually wins at phone widths; the
   tablet clamp above remains unchanged for 768–1279px. */
@media (max-width: 767px) {
  .hero-feature-marquee__card {
    flex: 0 0 270px;
    width: 270px;
  }
}

/* Desktop: the marquee is never shown — the orbit above is used instead. */
@media (min-width: 1280px) {
  .hero-feature-marquee {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-feature-marquee__track {
    animation: none;
  }
  .hero-feature-marquee {
    overflow-x: auto;
  }
}
/* ─────────────────────────────────────────────────────────────── */

.hero-trust {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-faint);
}

.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-trust svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.hero-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.hero-badge svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  position: relative;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--color-border-strong);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6);
}

.card--glow {
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(62, 224, 137, 0.14), transparent 60%),
    var(--color-surface);
  border-color: var(--color-border-strong);
}

.card--glow:hover {
  border-color: rgba(62, 224, 137, 0.4);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6), 0 0 40px -12px rgba(62, 224, 137, 0.3);
}

.card-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-5);
  transition: transform var(--duration-base) var(--ease-out);
}

.card-icon svg {
  width: 24px;
  height: 24px;
}

.card:hover .card-icon {
  transform: scale(1.08) rotate(-4deg);
}

.card h3 {
  margin-bottom: var(--space-3);
  font-size: 1.3rem;
}

.card p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Add-on cards: equal-height flex layout with subtle green glow */
.addon-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(62, 224, 137, 0.07), transparent 55%),
    var(--color-surface);
  border-color: var(--color-border);
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.addon-card h3 {
  margin-bottom: var(--space-2);
}

.addon-card p {
  flex: 1 0 auto;
  margin-bottom: var(--space-4);
}

.addon-card .plan-price {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.addon-card .btn {
  margin-top: auto;
}

.addon-card:hover {
  border-color: rgba(62, 224, 137, 0.35);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6), 0 0 36px -10px rgba(62, 224, 137, 0.3);
  background:
    radial-gradient(140% 100% at 100% 0%, rgba(62, 224, 137, 0.12), transparent 55%),
    var(--color-surface);
}

.card-list {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.card-list svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  margin-top: 3px;
  flex-shrink: 0;
}

.mini-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  font-size: 14px;
  line-height: 1;
  color: var(--color-accent);
}

.women-main-layout {
  display: grid;
  gap: var(--space-7);
  align-items: stretch;
  margin-bottom: var(--space-6);
}

@media (min-width: 980px) {
  .women-main-layout {
    grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(32px, 4vw, 56px);
  }
}

.women-content-column {
  min-width: 0;
  display: grid;
  gap: 20px;
  align-content: start;
}

.women-info-card,
.women-feature-card {
  padding: var(--space-5);
  border: 1px solid rgba(62, 224, 137, 0.16);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 12%, rgba(62, 224, 137, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(28, 31, 28, 0.95), rgba(12, 14, 12, 0.95));
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.24),
    0 0 30px rgba(62, 224, 137, 0.05);
}

.women-info-card h3,
.women-feature-card h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  color: #ffffff;
}

.women-info-card p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.women-visual-column {
  display: grid;
  grid-template-rows: auto auto;
  gap: 22px;
  justify-self: start;
  width: 100%;
  max-width: 560px;
}

.women-visual-column .btn-row {
  justify-self: start;
}

.women-visual-card {
  width: 100%;
  min-height: 760px;
}

.women-feature-grid {
  display: grid;
  gap: var(--space-4);
}

.women-feature-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.women-feature-card li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-text-muted);
  line-height: 1.45;
  font-size: 0.9rem;
}

.women-feature-grid--compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.women-feature-grid--compact .women-feature-card {
  padding: 18px;
  min-width: 0;
}

.women-feature-grid--compact .women-feature-card h3 {
  font-size: 0.82rem;
  line-height: 1.25;
  margin-bottom: 10px;
}

.women-feature-grid--compact .women-feature-card li {
  font-size: 0.88rem;
  line-height: 1.45;
}

@media (max-width: 1180px) {
  .women-visual-card {
    max-width: 100%;
    min-height: 520px;
  }
}

@media (max-width: 767px) {
  .women-visual-card {
    min-height: 0;
  }
}

@media (max-width: 900px) {
  .women-feature-grid--compact {
    grid-template-columns: 1fr;
  }
}

.card-link {
  margin-top: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text);
  transition: gap var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.card-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-base) var(--ease-out);
}

.card:hover .card-link {
  color: var(--color-accent);
}

.card:hover .card-link svg {
  transform: translateX(4px);
}

/* Home page: "Three ways we work together" cards */
.home-feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    radial-gradient(circle at 85% 15%, rgba(62, 224, 137, 0.06), transparent 42%),
    linear-gradient(180deg, rgba(28, 31, 28, 0.98), rgba(14, 16, 14, 0.98));
  border: 1px solid rgba(62, 224, 137, 0.12);
}

.home-feature-card p {
  flex-grow: 1;
}

.home-feature-card .card-link {
  margin-top: var(--space-5);
}

.home-feature-card:hover {
  border-color: rgba(62, 224, 137, 0.35);
  box-shadow:
    0 0 0 1px rgba(62, 224, 137, 0.12),
    0 18px 50px rgba(0, 0, 0, 0.38),
    0 0 35px rgba(62, 224, 137, 0.08);
}

/* ==========================================================================
   Why-choose checklist
   ========================================================================== */

.check-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.home-check-grid {
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .home-check-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  transition: border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.check-item:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
}

/* Home page: "Why choose" checklist cards */
.home-why-item {
  height: 100%;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  flex-direction: column;
  background:
    radial-gradient(circle at 85% 15%, rgba(62, 224, 137, 0.05), transparent 42%),
    linear-gradient(180deg, rgba(28, 31, 28, 0.98), rgba(14, 16, 14, 0.98));
  border: 1px solid rgba(62, 224, 137, 0.1);
}

.home-why-item svg {
  margin-top: 0;
  width: 24px;
  height: 24px;
  padding: 8px;
  box-sizing: content-box;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
}

.home-why-item:hover {
  border-color: rgba(62, 224, 137, 0.35);
  transform: translateY(-4px);
  box-shadow:
    0 0 0 1px rgba(62, 224, 137, 0.12),
    0 18px 50px rgba(0, 0, 0, 0.38),
    0 0 35px rgba(62, 224, 137, 0.08);
}

.check-item svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.check-item p {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Shared premium check card: horizontal icon-left layout used across
   Women's Fitness, Online Coaching, and Nutrition check/feature grids */
.premium-check-card {
  align-items: center;
  gap: var(--space-4);
  min-height: 76px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(62, 224, 137, 0.08), transparent 60%),
    var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.premium-check-card svg {
  width: 20px;
  height: 20px;
  margin-top: 0;
  padding: 10px;
  box-sizing: content-box;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  flex-shrink: 0;
}

.premium-check-card:hover {
  transform: translateY(-4px);
  border-color: rgba(62, 224, 137, 0.35);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6), 0 0 32px -12px rgba(62, 224, 137, 0.3);
}

/* Women's page: Real Life Coaching feature card grid */
.real-life-grid {
  gap: var(--space-5);
}

/* Online Coaching page: Who It Is For audience card grid */
.online-audience-grid {
  gap: var(--space-4);
}

/* Online Coaching page: What You Get benefit cards */
.online-benefit-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background:
    radial-gradient(130% 100% at 85% 0%, rgba(62, 224, 137, 0.1), transparent 60%),
    var(--color-surface);
  border-color: var(--color-border-strong);
}

.online-benefit-card p {
  flex: 1 0 auto;
}

.online-benefit-card:hover {
  border-color: rgba(62, 224, 137, 0.4);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6), 0 0 40px -12px rgba(62, 224, 137, 0.3);
}

/* ==========================================================================
   Steps (How it works)
   ========================================================================== */

.steps {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  counter-reset: step;
}

@media (min-width: 1024px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(62, 224, 137, 0.06), transparent 60%),
    linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-elevated) 100%);
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.step:hover {
  transform: translateY(-4px);
  border-color: rgba(62, 224, 137, 0.35);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6), 0 0 32px -10px rgba(62, 224, 137, 0.25);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: var(--space-4);
}

.step h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
  text-transform: none;
}

.step p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

@media (min-width: 1024px) {
  .steps--3col {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
   About page: credential badges + section note
   ========================================================================== */

.credential-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: 900px;
  margin-top: var(--space-6);
}

.credential-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.credential-card svg {
  width: 22px;
  height: 22px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.credential-card-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
}

.credential-card-text span {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--color-text-faint);
}

.credential-summary {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid rgba(62, 224, 137, 0.3);
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(62, 224, 137, 0.1), transparent 60%),
    var(--color-surface);
}

.credential-summary-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.credential-summary p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
}

.focus-tags-label {
  display: block;
  margin-top: var(--space-4);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.focus-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2) var(--space-2);
  margin-top: var(--space-2);
}

.focus-tag {
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(62, 224, 137, 0.35);
  background: var(--color-bg-elevated);
  box-shadow: 0 0 12px rgba(62, 224, 137, 0.08);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text-muted);
  white-space: normal;
}

.story-layout {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .story-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.story-visual {
  height: 100%;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(62, 224, 137, 0.25);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(62, 224, 137, 0.08), transparent 60%),
    linear-gradient(160deg, var(--color-surface-2) 0%, var(--color-bg-elevated) 100%);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6), 0 0 32px -16px rgba(62, 224, 137, 0.18);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.story-visual:hover {
  transform: translateY(-4px);
  border-color: rgba(62, 224, 137, 0.4);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6), 0 0 32px -12px rgba(62, 224, 137, 0.28);
}

@media (min-width: 1024px) {
  .story-visual.image-frame.tall {
    aspect-ratio: auto;
    min-height: 620px;
  }
}

.story-content {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--space-5);
}

.story-grid {
  display: grid;
  gap: var(--space-4);
  height: 100%;
}

@media (min-width: 1024px) {
  .story-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.story-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(62, 224, 137, 0.18);
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(62, 224, 137, 0.06), transparent 60%),
    var(--color-bg-elevated);
  box-shadow: 0 16px 36px -26px rgba(0, 0, 0, 0.55);
  height: 100%;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.story-card:hover {
  transform: translateY(-4px);
  border-color: rgba(62, 224, 137, 0.35);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6), 0 0 32px -12px rgba(62, 224, 137, 0.3);
}

.story-card svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.story-card h3 {
  margin-bottom: var(--space-1);
  font-size: 0.95rem;
  text-transform: none;
}

.story-card p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.story-card--wide {
  grid-column: 1 / -1;
  padding: var(--space-5) var(--space-6);
  border: 1px solid rgba(62, 224, 137, 0.3);
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(62, 224, 137, 0.1), transparent 60%),
    var(--color-surface);
  box-shadow: 0 16px 36px -26px rgba(0, 0, 0, 0.55);
}

.story-card--wide:hover {
  transform: translateY(-4px);
  border-color: rgba(62, 224, 137, 0.45);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6), 0 0 32px -12px rgba(62, 224, 137, 0.3);
}

.story-card--wide p {
  font-size: 1rem;
  color: var(--color-text);
}

.section-note {
  margin-top: var(--space-5);
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-faint);
}

/* ==========================================================================
   Pricing / plan cards
   ========================================================================== */

.plans-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

@media (min-width: 1024px) {
  .plans-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.plans-carousel {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  padding-block: var(--space-3);
  padding-top: 28px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.plans-carousel::-webkit-scrollbar {
  display: none;
}

.plans-track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  animation: plans-scroll 48s linear infinite;
  will-change: transform;
}

.plans-carousel:hover .plans-track,
.plans-carousel:focus-within .plans-track {
  animation-play-state: paused;
}

@keyframes plans-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.plans-slide-card {
  flex: 0 0 auto;
  width: 86vw;
  max-width: 340px;
}

.home-carousel-plan-card {
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at 85% 15%, rgba(62, 224, 137, 0.06), transparent 42%),
    linear-gradient(180deg, rgba(28, 31, 28, 0.98), rgba(14, 16, 14, 0.98)) !important;
  border: 1px solid rgba(62, 224, 137, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 45px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.home-carousel-plan-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(62, 224, 137, 0.05), transparent 35%),
    radial-gradient(circle at 15% 90%, rgba(62, 224, 137, 0.05), transparent 45%);
  opacity: 0.8;
  z-index: 0;
}

.home-carousel-plan-card > * {
  position: relative;
  z-index: 1;
}

.home-carousel-plan-card:hover {
  transform: translateY(-6px);
  border-color: rgba(62, 224, 137, 0.35) !important;
  box-shadow:
    0 0 0 1px rgba(62, 224, 137, 0.12),
    0 18px 50px rgba(0, 0, 0, 0.38),
    0 0 35px rgba(62, 224, 137, 0.08) !important;
}

@media (min-width: 640px) {
  .plans-slide-card {
    width: 320px;
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .plans-slide-card {
    width: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plans-track {
    animation: none;
  }

  .plans-carousel {
    overflow-x: auto;
  }
}

.plan-card--compact {
  padding: var(--space-5);
}

.plan-card--compact .plan-name {
  font-size: 1.1rem;
}

.plan-card--compact .plan-tagline {
  font-size: 0.85rem;
  margin-bottom: var(--space-3);
}

.plan-card--compact .plan-price {
  font-size: 1.8rem;
  margin-bottom: var(--space-4);
}

.plan-card--compact .plan-features {
  margin-bottom: var(--space-5);
}

.plan-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.plan-card:hover {
  transform: translateY(-6px);
  border-color: rgba(62, 224, 137, 0.35);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6), 0 0 32px -12px rgba(62, 224, 137, 0.3);
}

.plan-card.is-featured {
  border-color: var(--color-accent);
  background: linear-gradient(180deg, rgba(62, 224, 137, 0.08) 0%, var(--color-surface) 40%);
  position: relative;
}

.plan-badge {
  position: absolute;
  top: -14px;
  left: var(--space-6);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home-carousel-plan-card .plan-badge {
  top: -18px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 10;
  white-space: nowrap;
}

.plan-name {
  font-size: 1.3rem;
  margin-bottom: var(--space-2);
}

.plan-tagline {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-4);
}

.plan-price {
  font-family: var(--font-display);
  font-size: 2.2rem;
  margin-bottom: var(--space-5);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.plan-price span {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: lowercase;
}

.plan-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.plan-features svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  margin-top: 3px;
  flex-shrink: 0;
}

.plan-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (max-width: 767px) {
  .plan-card {
    min-width: 0;
  }

  .plan-actions .btn {
    white-space: normal;
    min-width: 0;
    min-height: 48px;
    text-align: center;
  }
}

/* ==========================================================================
   Testimonials / Results
   ========================================================================== */

.testimonial-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.testimonial-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 85% 15%, rgba(62, 224, 137, 0.05), transparent 42%),
    linear-gradient(180deg, rgba(28, 31, 28, 0.98), rgba(14, 16, 14, 0.98));
  border: 1px solid rgba(62, 224, 137, 0.12);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.testimonial-card:hover {
  border-color: rgba(62, 224, 137, 0.35);
  box-shadow:
    0 0 0 1px rgba(62, 224, 137, 0.10),
    0 18px 50px rgba(0, 0, 0, 0.38),
    0 0 35px rgba(62, 224, 137, 0.08);
}

.testimonial-check {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.testimonial-check svg {
  width: 18px;
  height: 18px;
}

.testimonial-card h3 {
  font-size: 1.05rem;
  margin-bottom: var(--space-2);
}

.testimonial-quote {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.transform-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-surface);
}

.transform-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.transform-images > div {
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.transform-images > div:first-child {
  border-right: 1px solid var(--color-border);
  background: linear-gradient(165deg, #181c19 0%, #0c0e0c 100%);
}

.transform-images > div:last-child {
  background:
    radial-gradient(120% 80% at 70% 0%, rgba(62, 224, 137, 0.16), transparent 60%),
    linear-gradient(165deg, #1d2620 0%, #0a0b0a 100%);
}

.transform-images > div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px);
}

.transform-figure {
  position: absolute;
  bottom: -8%;
  width: 64%;
  color: rgba(244, 246, 244, 0.08);
}

.transform-images > div:last-child .transform-figure {
  width: 78%;
  color: rgba(62, 224, 137, 0.16);
}

.transform-tag {
  position: relative;
  z-index: 1;
  margin: var(--space-3);
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
  background: rgba(10, 11, 10, 0.55);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.transform-images > div:last-child .transform-tag {
  color: var(--color-accent);
  border-color: var(--color-accent-soft);
}

.transform-meta {
  padding: var(--space-5);
}

.transform-meta h3 {
  font-size: 1.05rem;
  text-transform: none;
  margin-bottom: var(--space-1);
}

.transform-meta p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.disclaimer {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-faint);
  font-size: 0.82rem;
  line-height: 1.6;
}

.notice-card {
  background:
    radial-gradient(circle at 85% 15%, rgba(62, 224, 137, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(28, 31, 28, 0.98), rgba(14, 16, 14, 0.98));
  border: 1px solid rgba(62, 224, 137, 0.18);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(62, 224, 137, 0.06);
  border-radius: 18px;
  padding: 24px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

.notice-card p {
  margin: 0;
}

.notice-card p + p {
  margin-top: var(--space-3);
}

.notice-card__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.notice-card__label svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.notice-card--compact {
  padding: var(--space-4);
  font-size: 0.82rem;
}

.notice-card--compact .notice-card__label {
  font-size: 0.7rem;
  margin-bottom: var(--space-2);
}

@media (max-width: 640px) {
  .notice-card {
    padding: var(--space-4);
  }
}

.readiness-download-card {
  margin-top: 32px;
  margin-bottom: 32px;
}

.scope-note-card {
  margin-bottom: 72px;
}

@media (max-width: 640px) {
  .readiness-download-card {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .scope-note-card {
    margin-bottom: 48px;
  }
}

/* ==========================================================================
   Lead magnet / Newsletter
   ========================================================================== */

.lead-magnet {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-bg-elevated) 100%);
  border: 1px solid var(--color-border);
}

@media (min-width: 900px) {
  .lead-magnet {
    grid-template-columns: 1.2fr 1fr;
    padding: var(--space-8);
  }
}

.lead-magnet-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
}

.lead-magnet-icon svg {
  width: 26px;
  height: 26px;
}

.lead-magnet-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.lead-magnet-benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.lead-magnet-benefits svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* ── Home free guide section — image background (modifier only) ── */
.lead-magnet--featured {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      105deg,
      rgba(6, 9, 6, 0.84) 0%,
      rgba(6, 9, 6, 0.68) 48%,
      rgba(6, 9, 6, 0.42) 100%
    ),
    url("../assets/images/free-guide-background.png") center / cover no-repeat;
  border-color: transparent;
  box-shadow: none;
}
.lead-magnet--featured::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(10, 11, 10, 0.55) 100%),
    linear-gradient(to bottom, rgba(10, 11, 10, 0.55) 0%, transparent 18%, transparent 82%, rgba(10, 11, 10, 0.55) 100%),
    linear-gradient(to right,  rgba(10, 11, 10, 0.45) 0%, transparent 16%, transparent 84%, rgba(10, 11, 10, 0.45) 100%);
}
.lead-magnet--featured > * {
  position: relative;
  z-index: 2;
}
.lead-magnet--featured .card {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lead-magnet--featured .card .lead,
.lead-magnet--featured .card .field-hint {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

@media (max-width: 767px) {
  .lead-magnet--featured {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(14px, 4vw, 18px);
    padding: clamp(18px, 5vw, 24px);
    background-position: right center;
  }

  .lead-magnet-main,
  .lead-magnet-readiness {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .lead-magnet-main .h2 {
    font-size: clamp(21px, 5.5vw, 26px);
    line-height: 1.08;
  }

  .lead-magnet-main .lead {
    font-size: clamp(14.5px, 3.8vw, 16px);
    line-height: 1.5;
  }

  .lead-magnet-main .lead-magnet-benefits {
    font-size: clamp(13px, 3.4vw, 14px);
  }

  .lead-magnet-readiness {
    padding: clamp(16px, 4.5vw, 20px);
  }

  .lead-magnet-readiness .lead {
    font-size: clamp(14px, 3.7vw, 15px);
    line-height: 1.5;
  }

  .lead-magnet-readiness .field-hint {
    font-size: clamp(11.5px, 3vw, 12px);
    line-height: 1.45;
  }

  .lead-magnet-readiness .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    white-space: normal;
    text-align: center;
    padding-inline: clamp(10px, 3vw, 14px);
    font-size: clamp(12.5px, 3.3vw, 13.5px);
    line-height: 1.25;
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  .lead-magnet--featured {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
    padding: 32px;
    background-position: right center;
  }

  .lead-magnet-main,
  .lead-magnet-readiness {
    min-width: 0;
  }

  .lead-magnet-main .h2 {
    font-size: 28px;
  }

  .lead-magnet-main .lead {
    font-size: 16px;
  }

  .lead-magnet-main .lead-magnet-benefits {
    font-size: 14px;
  }

  .lead-magnet-readiness {
    padding: 24px;
  }

  .lead-magnet-readiness .lead {
    font-size: 15px;
  }

  .lead-magnet-readiness .btn {
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    white-space: normal;
    font-size: 13px;
  }
}
/* ─────────────────────────────────────────────────────────────── */

.form-privacy-note {
  margin-top: var(--space-3);
  font-size: 0.8rem;
  color: var(--color-text-faint);
  text-align: center;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
  min-height: 48px;
}

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

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-faint);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
  outline: none;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field label,
.field .field-required {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
}

.field-hint {
  font-size: 0.78rem;
  color: var(--color-text-faint);
}

.plan-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-soft);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  text-align: left;
}

.plan-note svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--color-accent-strong);
  opacity: 0.75;
}

.field-required::after {
  content: " *";
  color: var(--color-accent);
}

.field-error {
  font-size: 0.78rem;
  color: var(--color-danger);
  display: none;
}

.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select {
  border-color: var(--color-danger);
}

.field.has-error .field-error {
  display: block;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.checkbox-row input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  flex-shrink: 0;
}

.form-success {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  color: var(--color-text);
  font-weight: var(--weight-regular);
  font-size: 0.9rem;
  line-height: 1.6;
}

.form-success.is-visible {
  display: flex;
  margin-top: var(--space-5);
}

.form-success svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.form-success--alert {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.35);
}

.form-error {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(239, 75, 75, 0.08);
  border: 1px solid rgba(239, 75, 75, 0.35);
  color: var(--color-danger);
  font-size: 0.9rem;
  line-height: 1.5;
}

.form-error.is-visible {
  display: flex;
}

.form-error svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.form-success--alert svg {
  color: #f59e0b;
  margin-top: 2px;
}

/* ==========================================================================
   Readiness screening forms
   ========================================================================== */
.screening-form .step-number {
  margin-bottom: var(--space-3);
}

.form-section-title {
  margin-top: var(--space-7);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-border);
}

.screening-form h4.form-section-title:first-of-type {
  margin-top: 0;
}

.yesno-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.yesno {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.yesno input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.yesno span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  transition: border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.yesno input:checked + span {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-text);
  box-shadow: 0 0 16px -4px rgba(62, 224, 137, 0.4);
}

.yesno input:focus-visible + span {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Final CTA band
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background:
    radial-gradient(700px 360px at 50% 0%, rgba(62, 224, 137, 0.18), transparent 60%),
    var(--color-surface);
  border: 1px solid var(--color-border);
}

.cta-band h2 {
  margin-bottom: var(--space-4);
}

.cta-band p {
  color: var(--color-text-muted);
  max-width: 50ch;
  margin: 0 auto var(--space-6);
}

.cta-band .btn-row {
  justify-content: center;
}

.cta-band-note {
  margin-top: var(--space-4);
  font-size: 0.85rem;
  color: var(--color-text-faint);
}

/* ==========================================================================
   Membership <-> Coaching cross-link cards
   ========================================================================== */

.cross-link-card {
  text-align: center;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(62, 224, 137, 0.16), transparent 60%),
    var(--color-surface);
  border-color: var(--color-accent-soft);
  box-shadow: 0 20px 44px -28px rgba(0, 0, 0, 0.55), 0 0 28px -10px rgba(62, 224, 137, 0.2);
}

.cross-link-card:hover {
  border-color: var(--color-accent);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  padding-block: var(--space-8) var(--space-6);
}

.footer-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1.4fr repeat(3, 1fr);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-brand p {
  margin-top: var(--space-4);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  max-width: 32ch;
}

.footer-col h4 {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
  font-family: var(--font-body);
  font-weight: 800;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col a {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: color var(--duration-base) var(--ease-out);
}

.footer-col a:hover {
  color: var(--color-accent);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  display: grid;
  place-items: center;
  transition: border-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}

.footer-social a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-bottom {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 0.8rem;
  color: var(--color-text-faint);
}

.footer-bottom .footer-legal {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer-bottom a:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   Floating elements: WhatsApp + Sticky CTA
   ========================================================================== */

.whatsapp-fab {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: var(--radius-pill);
  background: #25D366;
  color: #06120D;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 30px -10px rgba(37, 211, 102, 0.6);
  transition: transform var(--duration-base) var(--ease-out);
}

.whatsapp-fab:hover {
  transform: scale(1.08);
}

.whatsapp-fab svg {
  width: 28px;
  height: 28px;
}

@media (max-width: 1023px) {
  .whatsapp-fab {
    width: 50px;
    height: 50px;
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  }

  .whatsapp-fab svg {
    width: 24px;
    height: 24px;
  }
}

@media (min-width: 1024px) {
  .whatsapp-fab {
    bottom: var(--space-6);
    right: var(--space-6);
  }
}

.mobile-sticky-cta {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 89;
  display: flex;
  gap: var(--space-3);
}

.mobile-sticky-cta .btn {
  flex: 1;
}

@media (max-width: 1023px) {
  .mobile-sticky-cta {
    display: none;
  }
}

@media (min-width: 1024px) {
  .mobile-sticky-cta {
    display: none;
  }
}

/* ==========================================================================
   Page header (interior pages)
   ========================================================================== */

.page-hero {
  padding-block: var(--space-8) var(--space-7);
  background:
    radial-gradient(900px 420px at 90% -10%, rgba(62, 224, 137, 0.14), transparent 60%),
    var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  color: var(--color-text-faint);
  margin-bottom: var(--space-4);
}

.breadcrumb a:hover {
  color: var(--color-accent);
}

.page-hero h1 {
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Readiness screening hero
   ========================================================================== */

.readiness-hero {
  padding-block: calc(var(--header-height) + var(--space-6)) var(--space-8);
}

.readiness-hero-title {
  font-size: clamp(2.2rem, 3.6vw + 1rem, 3.6rem);
  line-height: 1.05;
  max-width: 18ch;
}

.hero-subtitle {
  max-width: 60ch;
  margin-bottom: var(--space-6);
}

.readiness-hero .safety-note-card {
  margin-bottom: var(--space-7);
}

.readiness-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.readiness-benefit-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 85% 15%, rgba(62, 224, 137, 0.06), transparent 42%),
    linear-gradient(180deg, rgba(28, 31, 28, 0.98), rgba(14, 16, 14, 0.98));
  border: 1px solid rgba(62, 224, 137, 0.12);
  border-top: 2px solid var(--color-accent);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.readiness-benefit-card h3 {
  margin-bottom: var(--space-2);
}

.readiness-benefit-card p {
  margin: 0;
  color: var(--color-text-muted);
}

.readiness-benefit-card:hover {
  border-color: rgba(62, 224, 137, 0.35);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.38),
    0 0 35px rgba(62, 224, 137, 0.08);
}

@media (max-width: 860px) {
  .readiness-benefit-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Misc
   ========================================================================== */

.tag {
  display: inline-flex;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* FAQ accordion */
.accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.accordion-item + .accordion-item {
  border-top: 1px solid var(--color-border);
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: none;
  color: var(--color-text);
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}

.accordion-trigger:hover {
  background: var(--color-surface-2);
}

.accordion-trigger svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
}

.accordion-item.is-open .accordion-trigger svg {
  transform: rotate(45deg);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-out);
  background: var(--color-bg-elevated);
}

.accordion-item.is-open .accordion-panel {
  grid-template-rows: 1fr;
}

.accordion-panel-inner {
  overflow: hidden;
}

.accordion-panel p {
  padding: 0 var(--space-6) var(--space-5);
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}

/* Table-style content (legal pages) */
.prose {
  max-width: 70ch;
}

.prose h2 {
  font-size: 1.4rem;
  text-transform: none;
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}

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

.prose p,
.prose li {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.8;
  margin-bottom: var(--space-3);
}

.prose ul {
  padding-left: var(--space-5);
  list-style: disc;
}

/* Cart table */
.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-table th {
  text-align: left;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.cart-table td {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.92rem;
  vertical-align: middle;
}

.cart-item-name {
  font-weight: 700;
}

.cart-item-meta {
  color: var(--color-text-faint);
  font-size: 0.8rem;
}

.cart-remove {
  color: var(--color-text-faint);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
}

.cart-remove:hover {
  color: var(--color-danger);
}

.cart-summary {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: fit-content;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  color: var(--color-text-muted);
}

.cart-summary-row.total {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--color-text);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.cart-empty {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  color: var(--color-text-muted);
}

/* Payment method selector */
.payment-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
}

.payment-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-elevated);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);
}

.payment-method input {
  position: absolute;
  opacity: 0;
}

.payment-method svg {
  width: 28px;
  height: 28px;
  color: var(--color-text-muted);
}

.payment-method:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.payment-method:has(input:checked) svg {
  color: var(--color-accent);
}

/* Two-column page layout */
.split {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
  .split--reverse {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .split--reverse > *:first-child {
    order: 2;
  }
}

.image-frame {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(160deg, var(--color-surface-2) 0%, var(--color-bg-elevated) 100%);
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  color: rgba(244, 246, 244, 0.08);
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: 0.06em;
  text-align: center;
  padding: var(--space-5);
  overflow: hidden;
  position: relative;
}

.image-frame.tall {
  aspect-ratio: 3/4;
}

.image-frame--cinematic {
  color: var(--color-text);
  font-family: var(--font-sans);
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-6);
  background:
    radial-gradient(120% 90% at 78% 10%, rgba(62, 224, 137, 0.14), transparent 55%),
    radial-gradient(100% 70% at 15% 100%, rgba(62, 224, 137, 0.06), transparent 60%),
    linear-gradient(165deg, #1b201c 0%, #0d100e 70%, #0a0b0a 100%);
}

.image-frame--cinematic::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 6px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.image-frame--cinematic .frame-figure {
  position: absolute;
  inset: 0;
  width: 60%;
  height: 70%;
  margin: auto;
  color: rgba(244, 246, 244, 0.07);
}

.image-frame--cinematic .frame-tag {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Home page: coaching journey timeline
   ========================================================================== */

.journey-timeline {
  position: relative;
  margin-top: var(--space-8);
  max-width: 760px;
}

.journey-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 27px;
  width: 2px;
  background: linear-gradient(180deg, rgba(62, 224, 137, 0.45), rgba(62, 224, 137, 0.05));
}

.journey-item {
  position: relative;
  padding-left: 76px;
}

.journey-item:not(:last-child) {
  margin-bottom: var(--space-7);
}

.journey-marker {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  background: linear-gradient(180deg, rgba(28, 31, 28, 0.98), rgba(14, 16, 14, 0.98));
  border: 1px solid rgba(62, 224, 137, 0.35);
  box-shadow: 0 0 0 6px var(--color-bg), 0 0 24px -6px rgba(62, 224, 137, 0.35);
  z-index: 1;
}

.journey-card {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(62, 224, 137, 0.12);
  background:
    radial-gradient(circle at 85% 15%, rgba(62, 224, 137, 0.06), transparent 42%),
    linear-gradient(180deg, rgba(28, 31, 28, 0.98), rgba(14, 16, 14, 0.98));
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.journey-card:hover {
  transform: translateY(-6px);
  border-color: rgba(62, 224, 137, 0.35);
  box-shadow:
    0 0 0 1px rgba(62, 224, 137, 0.10),
    0 18px 50px rgba(0, 0, 0, 0.38),
    0 0 35px rgba(62, 224, 137, 0.08);
}

.journey-card h3 {
  margin-bottom: var(--space-2);
  font-size: 1.1rem;
  text-transform: none;
}

.journey-card p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

@media (min-width: 640px) {
  .journey-timeline::before {
    left: 31px;
  }

  .journey-item {
    padding-left: 88px;
  }

  .journey-marker {
    width: 64px;
    height: 64px;
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   Membership: auth forms, tier badges, dashboard, locked content
   ========================================================================== */

.auth-shell {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 80vh;
  padding-block: var(--space-9);
  background-image:
    linear-gradient(100deg, rgba(10, 11, 10, 0.82) 0%, rgba(10, 11, 10, 0.4) 42%, rgba(10, 11, 10, 0.1) 75%),
    linear-gradient(0deg, rgba(10, 11, 10, 0.25) 0%, rgba(10, 11, 10, 0) 35%),
    url("../assets/images/auth-background-new.png");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

.auth-shell .container {
  position: relative;
  z-index: 1;
}

.auth-layout {
  display: flex;
  width: 100%;
}

@media (max-width: 767px) {
  .auth-shell {
    min-height: 0;
    padding-block: var(--space-7);
    background-image:
      linear-gradient(180deg, rgba(10, 11, 10, 0.5) 0%, rgba(10, 11, 10, 0.78) 100%),
      linear-gradient(100deg, rgba(10, 11, 10, 0.78) 0%, rgba(10, 11, 10, 0.45) 60%, rgba(10, 11, 10, 0.15) 100%),
      url("../assets/images/auth-background-new.png");
  }
}

/* ── Signup-specific desktop adjustments ───────────────────────── */
/* Signup has 4 fields + 2 hints vs login's 2 fields.
   All rules below are scoped to .auth-shell--signup so login is
   completely unaffected. */

.auth-shell--signup {
  /* Adaptive shell padding — stays tiny on smaller laptop heights */
  padding-block: clamp(0.75rem, 2vh, 2rem);
}

/* Card: tighter internal padding */
.auth-shell--signup .auth-card {
  padding: var(--space-5);             /* 1.5rem vs 3rem — saves 3rem (48px) */
}

/* H1: slightly smaller and tighter bottom margin */
.auth-shell--signup .auth-card .h2 {
  font-size: clamp(1.35rem, 1.8vw + 0.8rem, 1.75rem);
  margin-bottom: 0.25rem;
}

/* Eyebrow already tight, lead paragraph: smaller and tighter margin */
.auth-shell--signup .auth-card .lead {
  font-size: 0.88rem;
  line-height: 1.45;
  margin-bottom: 0.6rem;
}

/* Inputs + selects: less vertical padding on signup only */
.auth-shell--signup .input,
.auth-shell--signup .select {
  padding-block: 0.6rem;
  min-height: 42px;
}

/* Form gap: tighter between the 4 field groups */
.auth-shell--signup .auth-card form {
  gap: 0.45rem;
}

/* Field-hint: tighter line-height */
.auth-shell--signup .field-hint {
  line-height: 1.35;
  margin-top: 0.2rem;
}

/* Auth-foot: minimal breathing room */
.auth-shell--signup .auth-foot {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}
/* ─────────────────────────────────────────────────────────────── */

.auth-card {
  width: 100%;
  max-width: 440px;
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: rgba(26, 30, 27, 0.72);
  border: 1px solid var(--color-border-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.auth-card .h2 {
  font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem);
  margin-bottom: var(--space-2);
}

.auth-card .lead {
  margin-bottom: var(--space-6);
  font-size: 0.98rem;
}

.auth-card form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-foot {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-align: center;
}

.auth-foot a {
  color: var(--color-accent);
  font-weight: 700;
}

.auth-error {
  display: none;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(239, 75, 75, 0.1);
  border: 1px solid rgba(239, 75, 75, 0.35);
  color: #ff9a9a;
  font-size: 0.88rem;
}

.auth-error.is-visible {
  display: block;
}

/* Tier badges */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35em 0.9em;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

.tier-badge[data-tier="free"] {
  color: var(--color-text-muted);
}

.tier-badge[data-tier="basic"] {
  color: #8fd9ff;
  border-color: rgba(143, 217, 255, 0.35);
  background: rgba(143, 217, 255, 0.08);
}

.tier-badge[data-tier="premium"] {
  color: var(--color-accent);
  border-color: var(--color-accent-soft);
  background: var(--color-accent-soft);
}

/* Dashboard header */
.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.dashboard-header h1 {
  font-size: clamp(1.8rem, 2.4vw + 1rem, 2.6rem);
  margin-bottom: var(--space-2);
}

.dashboard-header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Member content cards */
.member-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.member-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.member-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
}

.member-card-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.member-card-type {
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.member-card-status {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.75em;
  border-radius: var(--radius-pill);
  font-size: 0.66rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.member-card-status[data-status="unlocked"] {
  color: #8be39a;
  background: rgba(139, 227, 154, 0.12);
  border: 1px solid rgba(139, 227, 154, 0.35);
}

.member-card-status[data-status="locked"] {
  color: var(--color-text-faint);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border-strong);
}

.member-card h3 {
  font-size: 1.05rem;
}

.member-card p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.member-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.member-card.is-locked {
  background: var(--color-bg-elevated);
}

.member-card.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: rgba(10, 11, 10, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}

.member-card-lock {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-faint);
}

.member-card-lock svg {
  width: 16px;
  height: 16px;
}

.member-section {
  margin-bottom: var(--space-9);
}

.member-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Pricing tier cards */
.tier-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}

.tier-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-strong);
}

.tier-card.is-current {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.tier-card-price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 2.4vw + 1rem, 2.6rem);
  font-weight: var(--weight-black);
}

.tier-card-price small {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: var(--weight-medium);
  color: var(--color-text-faint);
  text-transform: none;
}

.tier-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.tier-card ul li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.tier-card ul svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ==========================================================================
   Client Portal (dashboard.html)
   --------------------------------------------------------------------------
   All portal-specific selectors are scoped beneath .client-portal so they
   cannot affect any other page. Cards/buttons/grids reuse the existing
   global .card / .btn / .btn-row components; only portal layout, status,
   and state-specific styling is defined here.
   ========================================================================== */

/* Guard: ensure the native [hidden] attribute always wins over the more
   specific display rules below, so Membership/Coaching view-state
   toggling via the hidden property/attribute is never overridden. */
.client-portal [data-portal-view][hidden] {
  display: none !important;
}

.client-portal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

@media (min-width: 1280px) {
  .client-portal-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

.client-portal .portal-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.client-portal .portal-nav a {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: var(--weight-medium);
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.client-portal .portal-nav a:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.client-portal .portal-nav a.is-active {
  background: rgba(62, 224, 137, 0.08);
  border-left: 3px solid var(--color-accent);
  padding-left: calc(var(--space-4) - 3px);
  color: var(--color-text);
}

.client-portal .portal-nav a.is-active:hover {
  background: rgba(62, 224, 137, 0.08);
}

@media (max-width: 1279px) {
  .client-portal .portal-nav a.is-active {
    border-left: none;
    border-bottom: 3px solid var(--color-accent);
    padding-left: var(--space-4);
  }
}

@media (min-width: 1280px) {
  .client-portal .portal-nav {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
  }
}

@media (max-width: 1279px) {
  .client-portal .portal-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }

  .client-portal .portal-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

.client-portal .portal-section {
  margin-bottom: var(--space-8);
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.client-portal .portal-section-head {
  margin-bottom: var(--space-5);
}

.client-portal .portal-lead {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  max-width: 46ch;
}

.client-portal .portal-note {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Status badge shown next to the tier badge only in Coaching preview mode */
.client-portal .portal-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.85em;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8be39a;
  background: rgba(139, 227, 154, 0.12);
  border: 1px solid rgba(139, 227, 154, 0.35);
}

/* Quick status overview — explicit column counts (rather than auto-fit)
   so all four cards form one balanced row at desktop portal widths
   instead of an uneven wrap. */
.client-portal .portal-status-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

@media (min-width: 560px) {
  .client-portal .portal-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .client-portal .portal-status-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Compact premium summary card: reduced padding (less unused vertical
   space than the default .card padding) plus a restrained top accent
   instead of a full glow treatment. */
.client-portal .portal-status-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-5);
  border-top: 2px solid rgba(62, 224, 137, 0.4);
}

.client-portal .portal-status-label {
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-1);
}

.client-portal .portal-status-value {
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.client-portal .portal-status-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.client-portal .portal-status-badge-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.3em 0.85em;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

.client-portal .portal-status-badge-pill[data-status="active"],
.client-portal .portal-status-badge-pill[data-status="completed"],
.client-portal .portal-status-badge-pill[data-status="available"] {
  color: #8be39a;
  background: rgba(139, 227, 154, 0.12);
  border-color: rgba(139, 227, 154, 0.35);
}

.client-portal .portal-status-badge-pill[data-status="not-started"] {
  color: var(--color-text-faint);
}

.client-portal .portal-status-badge-pill[data-status="action-required"] {
  color: #ffd479;
  background: rgba(255, 212, 121, 0.1);
  border-color: rgba(255, 212, 121, 0.35);
}

/* Priority action card reuses .cross-link-card for the established
   premium glow/border treatment; this only adds spacing. */
.client-portal .portal-priority-card {
  margin-bottom: var(--space-8);
}

/* Membership-only "My Coaching" upsell card. Reuses .cross-link-card for
   the established premium glow/border treatment; this only switches it
   back to left-aligned text and lays out the feature list. */
.client-portal .portal-coaching-upsell {
  text-align: left;
}

.client-portal .portal-coaching-upsell .portal-status-badge-pill {
  margin-bottom: var(--space-3);
}

.client-portal .portal-coaching-upsell h3 {
  margin-bottom: var(--space-2);
}

.client-portal .portal-coaching-upsell p {
  color: var(--color-text-muted);
  max-width: 60ch;
}

.client-portal .portal-feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
}

.client-portal .portal-feature-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.88rem;
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.client-portal .portal-feature-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* My Coaching */
.client-portal .portal-coaching-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.client-portal .portal-coaching-meta {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.client-portal .portal-coaching-meta div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.client-portal .portal-coaching-meta dt {
  color: var(--color-text-faint);
  font-size: 0.85rem;
}

.client-portal .portal-coaching-meta dd {
  font-weight: var(--weight-semibold);
  margin: 0;
}

/* My Program */
.client-portal .portal-program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.client-portal .portal-program-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.client-portal .portal-program-type {
  font-size: 0.7rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

.client-portal .portal-badge-new {
  display: inline-flex;
  margin-left: var(--space-2);
  padding: 0.2em 0.6em;
  border-radius: var(--radius-pill);
  font-size: 0.62rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-accent);
  background: var(--color-accent);
  vertical-align: middle;
}

/* Progress */
.client-portal .portal-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
}

.client-portal .portal-progress-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.client-portal .portal-progress-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: var(--weight-black);
  color: var(--color-text);
}

/* Documents and status */
.client-portal .portal-documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

.client-portal .portal-document-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
}

/* Stronger, more consistent contrast for document status badges
   specifically (Membership "Available when required" and Coaching
   "Completed"/"Available" alike) — scoped to this card only so the
   shared .portal-status-badge-pill used elsewhere (My Coaching, My
   Program) keeps its existing per-status coloring. */
.client-portal .portal-document-card .portal-status-badge-pill {
  min-height: 32px;
  padding: 0.45em 1em;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  color: var(--color-text);
  background: rgba(62, 224, 137, 0.1);
  border-color: rgba(62, 224, 137, 0.3);
}

/* Support and account shortcuts */
.client-portal .portal-support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}

.client-portal .portal-support-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.client-portal .portal-support-card .btn-row {
  margin-top: auto;
  padding-top: var(--space-2);
}

/* Guarantee every Support/Account button stays inside its card no
   matter how long the label is — full card width, normal wrapping
   instead of the global .btn nowrap, and slightly tighter padding so
   long labels like "View Coaching Plans" sit comfortably. */
.client-portal .portal-support-card .btn-row .btn {
  width: 100%;
  padding-inline: var(--space-4);
  white-space: normal;
  text-align: center;
}

/* Temporarily inactive placeholder controls (front-end only, no handler) */
.client-portal .portal-inactive-btn {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Bottom-of-portal jump link back to Overview, in place of the removed
   generic Home button. */
.client-portal .portal-bottom-nav {
  text-align: center;
  padding-block: var(--space-6);
}