/* ============================================================
   SKILLS ACADEMY — MAIN WEBSITE v3
   Editorial sports build: Anton display, dark/light rhythm,
   parallax gallery, track list rows, platform-first funnel.
   ============================================================ */

:root {
  --bg: #0B0B10;
  --bg-2: #14121c;
  --light: #F1EFE9;
  --light-2: #E7E4DB;
  --ink: #101014;
  --panel: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.08);
  --border-hover: rgba(167,139,250,0.40);
  --border-dark: rgba(16,16,20,0.14);
  --text: #F5F5FF;
  --muted: rgba(245,245,255,0.68);
  --muted-2: rgba(245, 245, 255, .58);
  --ink-muted: rgba(16,16,20,0.66);
  --purple: #7C3AED;
  --purple-2: #8B5CF6;
  --purple-3: #6D28D9;
  --lavender: #A78BFA;
  --lavender-2: #C4B5FD;
  --sky: #38BDF8;
  --sky-2: #7DD3FC;
  --radius: 18px;
  --radius-lg: 24px;
  --shadow: 0 14px 40px rgba(0,0,0,.38);
  --glow: 0 0 0 1px rgba(167,139,250,.10), 0 18px 50px rgba(124,58,237,.22);
  --ease: cubic-bezier(.16,1,.3,1);
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Anton', 'Arial Narrow', sans-serif;
  --clash: 'Clash Display', 'Plus Jakarta Sans', sans-serif;
  --topbar-h: 40px;
}

/* width/height attributes reserve layout space; CSS-width images keep their ratio */
img { height: auto; }
/* .btn sets display:flex, which outranks the browser's built-in [hidden] rule — without
   this the pre-launch "Join — $29/mo" button renders while PLATFORM_LIVE is still false */
[hidden] { display: none !important; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg);   overflow-x: hidden;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: transparent; /* html carries the bg — lets the fixed ::before atmosphere paint */
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
}

/* Purple atmosphere (dark sections only — light sections paint over it) */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(1200px 700px at 12% 8%, rgba(124,58,237,.16), transparent 55%),
    radial-gradient(1000px 600px at 88% 14%, rgba(167,139,250,.08), transparent 60%);
  pointer-events: none;
  animation: atmos 32s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes atmos { to { transform: translate(36px,-28px) scale(1.04); } }

/* Film grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

h1,h2,h3,h4,h5 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
a { color: var(--lavender-2); text-decoration: none; transition: color .2s ease; }
a:hover { color: #fff; }
::selection { background: rgba(124,58,237,.45); color: #fff; }
img { max-width: 100%; display: block; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 840px; }
.section { position: relative; padding: 130px 0; }

/* ==================== TYPE SYSTEM ==================== */
.mega-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 6.6vw, 104px);
  line-height: .94;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.mega-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--lavender-2), var(--purple-2) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mega-title.dark { color: var(--ink); }
.mega-title.dark em {
  background: linear-gradient(120deg, var(--purple), var(--purple-2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* split-title reveal machinery: each line wrapped in .line > .line-inner */
.split-title .line { display: block; overflow: hidden; }
.split-title .line-inner { display: block; will-change: transform; }

.section-label {
  display: inline-flex;
  font-size: 12px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase;
  color: var(--lavender); margin-bottom: 18px;
}
.section-head { margin-bottom: 68px; }

/* Pillar tag — numbered section marker */
.pillar-tag {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 54px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
}
.pillar-tag::before {
  content: ""; display: block;
  width: 44px; height: 1px;
  background: rgba(167,139,250,.5);
}
.pillar-tag.dark { color: var(--ink-muted); }
.pillar-tag.dark::before { background: rgba(124,58,237,.5); }
.soon-chip {
  font-style: normal;
  background: linear-gradient(135deg, var(--purple-3), var(--purple));
  color: #fff; border-radius: 999px; padding: 6px 14px;
  font-size: 11px; letter-spacing: .14em;
  box-shadow: 0 0 24px rgba(124,58,237,.5);
}

/* ==================== PRELOADER ==================== */
.preloader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s var(--ease), visibility .7s;
}
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }
/* failsafe: even with all JS dead, never trap the visitor behind the loader */
.preloader { animation: preloaderFailsafe .6s ease 5s forwards; }
@keyframes preloaderFailsafe { to { opacity: 0; visibility: hidden; } }
.preloader-inner { text-align: center; width: min(320px, 70vw); }
.preloader-mark { width: 150px; margin: 0 auto 26px; }
.preloader-logo {
  font-family: var(--clash);
  font-weight: 600; font-size: 24px; letter-spacing: .14em; margin-bottom: 26px;
}
.preloader-logo span { color: var(--lavender); }
.preloader-bar { height: 2px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.preloader-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--purple), var(--lavender-2));
  border-radius: 2px;
  box-shadow: 0 0 18px rgba(124,58,237,.8);
}
.preloader-count {
  margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

/* ==================== SCROLL PROGRESS ==================== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--purple), var(--lavender-2));
  z-index: 600; box-shadow: 0 0 12px rgba(124,58,237,.7);
}

/* ==================== TOPBAR ==================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 401;
  height: var(--topbar-h);
  background: linear-gradient(90deg, #5B21B6, var(--purple-3) 50%, var(--purple));
  transition: transform .45s var(--ease);
}
.topbar a {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 100%;
  color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  padding: 0 16px;
  white-space: nowrap; overflow: hidden;
}
.topbar b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.topbar-dot {
  flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.6);
  animation: pulse 2.2s infinite;
}
.topbar-cta {
  flex: 0 0 auto;
  text-decoration: underline; text-underline-offset: 3px;
  opacity: .92;
}
.scrolled-page .topbar { transform: translateY(-100%); }

/* ==================== NAV ==================== */
.nav {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 402;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 36px;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s, top .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.scrolled-page .nav {
  top: 0;
  padding: 9px 36px;
  border-bottom-color: var(--border);
}
/* blur lives on a pseudo so .nav never becomes a containing block
   for the fixed mobile menu (backdrop-filter would trap it) */
.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(11,11,16,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0; transition: opacity .4s var(--ease);
}
.scrolled-page .nav::before { opacity: 1; }
.nav-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--clash);
  font-weight: 600; font-size: 18px; letter-spacing: .12em; color: var(--text);
}
.nav-logo img { height: 62px; width: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,.4)); }
.nav-logo span { color: var(--lavender); }
.nav-links { display: flex; gap: 30px; }
/* true page-centering for the menu — flex space-between centers it between
   unequal side clusters, which reads as off-center. Only on wide screens
   where the centered block can't collide with the logo or the right cluster. */
@media (min-width: 1280px) {
  .nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
.nav-links a {
  font-size: 14px; font-weight: 600; color: var(--muted);
  position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 1.5px; width: 0%;
  background: var(--lavender); transition: width .35s var(--ease);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { width: 100%; }
.nav-links a[aria-current="page"] { color: var(--lavender-2); }
.nav-links a[aria-current="page"]::before {
  content: ""; display: inline-block; vertical-align: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lavender); margin-right: 7px;
}
.nav-right { display: flex; align-items: center; gap: 16px; }

.lang-toggle {
  display: flex; align-items: center; gap: 5px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 14px;
  font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--muted-2);
  transition: border-color .3s;
  cursor: pointer;
}
/* the toggle is an <a> so Google can follow it — but the global a:hover paints
   links white, which would wash the pill out. Hold the button colours. */
.lang-toggle:hover { border-color: var(--border-hover); color: var(--muted-2); }
.lang-toggle i { font-style: normal; opacity: .35; }
.lang-toggle span.active { color: var(--lavender-2); }

.nav-burger { display: none; background: none; border: none; width: 40px; height: 40px; position: relative; z-index: 410; cursor: pointer; }
.nav-burger span {
  display: block; width: 22px; height: 2px; background: var(--text);
  margin: 5px auto; border-radius: 2px; transition: transform .35s var(--ease), opacity .3s;
}

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  font-family: var(--font); font-size: 14px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, border-color .3s;
  white-space: nowrap;
  will-change: transform;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, var(--purple-3), var(--purple));
  color: #fff;
  box-shadow: var(--glow);
}
.btn-primary:hover { color: #fff; box-shadow: 0 0 0 1px rgba(167,139,250,.25), 0 22px 60px rgba(124,58,237,.4); }
.btn-ghost {
  background: rgba(11,11,16,.35); color: var(--text);
  border-color: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover { border-color: var(--border-hover); color: #fff; }
.btn-lg { padding: 17px 32px; font-size: 15px; }
.btn-nav { padding: 11px 20px; font-size: 13px; }

/* ==================== HERO (glass trust hero + cutout) ==================== */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  padding: calc(var(--topbar-h) + 110px) 0 90px;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-bg {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .42;
  filter: saturate(.92) brightness(.9);
  mask-image: linear-gradient(180deg, black 0%, black 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 62%, transparent 100%);
  will-change: transform;
}
.hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,16,.5) 0%, rgba(11,11,16,.15) 40%, rgba(11,11,16,.9) 100%);
}
.hero-glow {
  position: absolute; z-index: 1;
  left: 38%; bottom: -12%;
  width: 56vw; height: 70vh;
  background: radial-gradient(ellipse at center, rgba(124,58,237,.34), rgba(124,58,237,.1) 45%, transparent 70%);
  pointer-events: none;
  will-change: transform;
}
.hero-player {
  position: absolute; z-index: 2;
  /* centered in the gap between the headline and the glass cards.
     Centering uses margin-left (image is 1090:1500, width = height * .7267)
     instead of translateX so the GSAP mouse-drift x never wipes it. */
  left: 56.5%; bottom: 0;
  height: min(62vh, 600px);
  width: auto;
  margin-left: calc(min(62vh, 600px) * -0.3633);
  opacity: .8;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.5));
  pointer-events: none;
  will-change: transform;
}
.hero-grid {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: center;
  width: 100%;
}
.hero-left { max-width: 640px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 8px 18px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(245,245,255,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 28px;
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lavender); box-shadow: 0 0 0 0 rgba(167,139,250,.55); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(167,139,250,.55); }
  70% { box-shadow: 0 0 0 12px rgba(167,139,250,0); }
  100% { box-shadow: 0 0 0 0 rgba(167,139,250,0); }
}
.hero-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(58px, 8.6vw, 132px);
  text-transform: uppercase;
  letter-spacing: .005em; line-height: .9;
  margin-bottom: 26px;
  mask-image: linear-gradient(180deg, black 0%, black 82%, rgba(0,0,0,.35) 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 82%, rgba(0,0,0,.35) 100%);
  text-shadow: 0 10px 60px rgba(0,0,0,.5);
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--lavender-2), var(--purple-2) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-title .char { display: inline-block; will-change: transform; }
.hero-title em.char { display: inline-block; }
.hero-sub {
  font-size: clamp(15px, 1.4vw, 18px); color: rgba(245,245,255,.82);
  max-width: 40ch;
  margin-bottom: 34px;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Glass cards */
.hero-right {
  display: flex; flex-direction: column; gap: 20px;
  position: relative; z-index: 3;
  min-width: 0;
}
.glass-reel-card { max-width: 100%; min-width: 0; }
.glass-card {
  position: relative; overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  padding: 30px;
}
.glass-glow {
  position: absolute; top: -80px; right: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(167,139,250,.14);
  filter: blur(60px);
  pointer-events: none;
}
.glass-head { position: relative; display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.glass-ic {
  flex: 0 0 auto;
  width: 54px; height: 54px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
}
.glass-ic img { width: 34px; height: auto; }
.glass-stat-big {
  font-family: var(--display); font-weight: 400;
  font-size: 40px; line-height: 1; letter-spacing: .01em;
}
.glass-stat-big i { font-style: normal; font-size: .48em; color: var(--muted); }
.glass-stat-big span { font: inherit; }
.glass-stat-sub { font-size: 13px; color: var(--muted); margin-top: 5px; font-weight: 600; }
.glass-divider { height: 1px; background: rgba(255,255,255,.1); margin: 20px 0; position: relative; }
.glass-mini-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: 12px; align-items: center; text-align: center;
}

/* ==================== HERO PLAYER CARD (holographic) ====================
   The $29/mo card carries the living player: he rises out of the card's top
   edge, aurora glows behind him, the card tilts toward the cursor while he
   counter-drifts above it. */
.glass-hero-card {
  overflow: visible;
  padding-right: 46%;
  min-height: 400px;
  isolation: isolate;
}
.glass-hero-card .glass-glow { display: none; }
.glass-hero-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 75% 85% at 78% 110%, rgba(172,92,255,.38), rgba(172,92,255,.14) 45%, rgba(79,70,229,0) 75%),
    radial-gradient(ellipse 60% 70% at 18% 112%, rgba(56,189,248,.18), rgba(56,189,248,.06) 45%, rgba(79,70,229,0) 75%);
  opacity: .65;
  transition: opacity .5s;
  pointer-events: none;
}
.glass-hero-card.is-tilt::before { opacity: 1; }
.glass-hero-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 78%, rgba(255,255,255,.05) 100%);
  pointer-events: none;
}
.glass-hero-card > * { position: relative; z-index: 2; }
.glass-hero-card > .glass-player {
  /* breaks the card's top AND right edges; sits under the copy so his
     trailing arm can pass behind the stats without eating them */
  position: absolute; right: -55px; bottom: 0; z-index: 1;
  height: 118%;
  max-height: 435px;
  width: auto;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,.55));
  pointer-events: none;
}
/* stats stack vertically beside the player, dividers become hairlines */
.glass-hero-card .glass-mini-grid { grid-template-columns: 1fr; gap: 9px; text-align: left; }
.glass-hero-card .glass-mini-grid > i { width: 82%; height: 1px; }
.glass-hero-card .glass-mini { display: flex; align-items: baseline; gap: 10px; max-width: 160px; }
.glass-hero-card .glass-pills { z-index: 4; }
@media (max-width: 1100px) {
  .glass-hero-card { padding-right: 38%; min-height: 360px; }
  .glass-hero-card > .glass-player { max-height: 420px; }
}
@media (max-width: 560px) {
  .glass-hero-card { padding-right: 34%; min-height: 320px; }
  .glass-hero-card > .glass-player { max-height: 340px; right: -14px; opacity: .85; }
}
.glass-mini-grid > i { display: block; width: 1px; height: 80%; background: rgba(255,255,255,.1); }
.glass-mini b {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: 24px; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.glass-mini b span { font: inherit; }
.glass-mini > span { font-size: 10.5px; color: var(--muted-2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.35; display: block; margin-top: 4px; }
.glass-pills { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.glass-pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05);
  border-radius: 999px; padding: 6px 13px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(245,245,255,.85);
}
.glass-pill svg { color: #FBBF24; }
.pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.5);
  animation: pulse 2.4s infinite;
}

/* Mini photo reel card */
.glass-reel-card { padding: 24px 0 22px; }
.glass-reel-card h3 {
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 0 30px; margin-bottom: 18px;
}
.glass-reel {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 14%, black 86%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 14%, black 86%, transparent);
}
.glass-reel-track {
  display: flex; gap: 12px; width: max-content;
  padding: 0 16px;
  animation: reelDrift 46s linear infinite;
}
.glass-reel-card:hover .glass-reel-track { animation-play-state: paused; }
.glass-reel-track img {
  width: 104px; height: 78px; object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
}
@keyframes reelDrift { to { transform: translateX(-50%); } }

.hero-scroll-hint {
  position: absolute; z-index: 3;
  left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245,245,255,.55);
}
.hero-scroll-hint i {
  width: 1.5px; height: 36px;
  background: linear-gradient(180deg, var(--lavender), transparent);
  animation: scrollHint 1.8s var(--ease) infinite;
}
@keyframes scrollHint {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
/* entrance state */
.h-fade { opacity: 0; transform: translateY(24px); }
html.no-js .h-fade, html.reduced .h-fade { opacity: 1; transform: none; }
html.reduced .glass-reel-track { animation: none; }

/* ==================== MANIFESTO ==================== */
.manifesto { text-align: center; padding: 140px 0 120px; }
.manifesto-label {
  font-size: 12px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase;
  color: var(--lavender); margin-bottom: 30px;
}
.manifesto-text {
  font-family: var(--clash);
  font-size: clamp(30px, 4.4vw, 58px);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.1;
  max-width: 22ch; margin: 0 auto 26px;
}
.manifesto-text .word { display: inline-block; }
.manifesto-sub { color: var(--muted); max-width: 60ch; margin: 0 auto; font-size: 16px; }

/* ==================== 01 · PLATFORM ==================== */
.platform { overflow: hidden; padding-bottom: 150px; }
.platform-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(700px 400px at 90% 85%, rgba(167,139,250,.10), transparent 60%);
}
.platform .container { position: relative; }
.platform-sub {
  color: var(--muted); max-width: 62ch; font-size: 17px;
  margin: 34px 0 64px;
}
.platform-split {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 30px;
  margin-bottom: 64px;
  align-items: stretch;
}
.platform-video-wrap {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border);
  min-height: 500px;
  box-shadow: var(--shadow);
}
.platform-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.platform-video-badge {
  position: absolute; top: 20px; left: 20px;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(11,11,16,.55); border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px; padding: 8px 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.platform-price-chip {
  position: absolute; bottom: 20px; left: 20px;
  display: flex; flex-direction: column; align-items: flex-start;
  background: rgba(11,11,16,.6); border: 1px solid rgba(167,139,250,.35);
  border-radius: var(--radius); padding: 14px 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glow);
}
.platform-price-chip b {
  font-family: var(--display); font-weight: 400;
  font-size: 34px; line-height: 1;
}
.platform-price-chip b span { font-size: 15px; color: var(--muted); }
.platform-price-chip > span {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lavender-2); margin-top: 4px;
}
.platform-features { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* Gradient-card material: near-black body, blurred purple/sky aurora rising
   from the bottom, film grain, glowing bottom hairline (.pc-edge, injected by
   JS) and a 3D mouse tilt driven by GSAP. */
.p-card {
  position: relative;
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(180deg, #0E0D16 0%, #0A0A11 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 20px; padding: 24px 22px;
  overflow: hidden;
  transition: border-color .5s, box-shadow .5s var(--ease);
  box-shadow: 0 -10px 80px 6px rgba(124,58,237,.14), 0 0 10px rgba(0,0,0,.5),
              inset 0 1px 0 rgba(255,255,255,.05);
}
.p-card::before {
  content: ""; position: absolute; z-index: 0;
  left: 0; right: 0; bottom: 0; height: 66%;
  border-radius: inherit;
  /* three soft clouds (purple / sky / violet) built from multi-stop gradients
     alone — NO filter: blur. Safari cannot reliably clip filtered layers to
     rounded corners (square-corner + flicker glitches, worse under the 3D
     tilt), while plain backgrounds always respect border-radius. */
  background:
    radial-gradient(ellipse 70% 85% at 88% 115%, rgba(172,92,255,.4), rgba(172,92,255,.16) 45%, rgba(79,70,229,0) 75%),
    radial-gradient(ellipse 70% 85% at 12% 115%, rgba(56,189,248,.3), rgba(56,189,248,.11) 45%, rgba(79,70,229,0) 75%),
    radial-gradient(ellipse 85% 75% at 50% 125%, rgba(139,92,246,.4), rgba(139,92,246,.15) 45%, rgba(79,70,229,0) 75%);
  opacity: .5;
  transition: opacity .5s;
  pointer-events: none;
}
.p-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* NO mix-blend-mode here: Safari drops blend modes on composited layers,
     so the moment the hover tilt promotes the card the grain rendered as a
     visible gray square. Plain low opacity keeps the texture safely. */
  opacity: .05;
  pointer-events: none;
}
.p-card > * { position: relative; z-index: 2; }
.p-card:hover, .p-card.is-tilt {
  border-color: rgba(167,139,250,.32);
  box-shadow: 0 -10px 90px 8px rgba(124,58,237,.24), 0 16px 36px rgba(0,0,0,.5),
              inset 0 1px 0 rgba(255,255,255,.07);
}
.p-card:hover::before, .p-card.is-tilt::before { opacity: .72; }
.p-card > .pc-edge {
  position: absolute; z-index: 1; display: block;
  left: 22px; right: 22px; bottom: 0; height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(167,139,250,0), rgba(196,181,253,.35) 50%, rgba(167,139,250,0));
  box-shadow: 0 0 12px 1px rgba(124,58,237,.3);
  opacity: .75;
  transition: opacity .5s;
  pointer-events: none;
}
.p-card:hover > .pc-edge, .p-card.is-tilt > .pc-edge { opacity: 1; }
.p-ic {
  flex: 0 0 auto; width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--lavender);
  background: linear-gradient(225deg, #191D2E 0%, #111524 100%);
  box-shadow: 0 6px 12px -2px rgba(0,0,0,.4),
              inset 1px 1px 3px rgba(255,255,255,.12), inset -2px -2px 4px rgba(0,0,0,.55);
}
.p-ic svg { width: 24px; height: 24px; display: block; }
.p-card h4 { font-size: 16px; margin-bottom: 6px; font-weight: 700; }
.p-card p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }

/* Price hero band */
.price-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  background: linear-gradient(150deg, rgba(124,58,237,.26), rgba(20,18,28,.7) 60%);
  border: 1px solid rgba(167,139,250,.4);
  border-radius: var(--radius-lg);
  padding: 44px 48px;
  box-shadow: var(--glow);
  position: relative;
  overflow: hidden;
}
.price-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px 300px at 85% 20%, rgba(167,139,250,.16), transparent 60%);
  pointer-events: none;
}
.price-hero-label {
  font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  color: var(--lavender-2); margin-bottom: 10px;
}
.price-hero-amount {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(56px, 7vw, 96px); line-height: 1;
}
.price-hero-amount span { font-size: .28em; color: var(--muted); letter-spacing: .04em; }
.price-hero-note { color: var(--muted); font-size: 14px; margin-top: 10px; max-width: 40ch; }
.price-hero-right { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.price-hero-guarantee { font-size: 13px; color: var(--muted); font-weight: 600; }

/* ==================== GALLERY (pinned zoom-through wall) ==================== */
/* Mechanism (matched to thegrind.nl): section pins for ~160% scroll; the middle
   statement card starts at scale(3) filling the viewport, the 14 photos around
   it start at scale(.2) and grow to a full wall as the middle card settles in. */
.gallery {
  position: relative;
  background: var(--light);
  padding: 5vh 0 9vh;
  /* The mid card must still poke above and below the section, so the y axis stays
     visible. But the x axis cannot: the wall is width:max-content and the centre card
     scales past 2500px, so the section overflowed the DOCUMENT. Phones respond by
     widening the containing block of fixed elements, which pushed the nav burger and
     the language toggle right off the screen on the homepage. `clip` on one axis
     contains it while leaving the other visible — `hidden` would force overflow-y to
     auto and kill the vertical poke. */
  overflow-x: clip;
  overflow-y: visible;
}
/* ghost typography behind the statement card — fills the stage on the approach
   and through the hold, then fades out as the wall pops in */
.g-bg {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
}
.g-bg-word {
  position: absolute;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1; white-space: nowrap;
  font-size: 15vw;
  letter-spacing: .02em;
}
/* the brand pair: outlined purple + soft-filled lavender */
.g-bg-w1 {
  top: 33%; left: 3%;
  color: transparent;
  -webkit-text-stroke: 2px rgba(124,58,237,.38);
}
.g-bg-w2 {
  top: 56%; right: 3%;
  color: rgba(139,92,246,.14);
  -webkit-text-stroke: 1.5px rgba(124,58,237,.22);
}
.g-grid {
  --gcw: 19.5vw;                       /* measured off the reference: 250/1280 */
  --gch: calc(var(--gcw) * 1.2);       /* 5:6 card ratio (250x300) */
  position: relative; left: 50%;
  transform: translateX(-50%);
  width: max-content;
  display: grid;
  grid-template-columns: repeat(5, var(--gcw));
  grid-auto-rows: var(--gch);
  gap: calc(var(--gcw) * 0.25);        /* their 62/250 gap ratio */
}
/* masonry stagger on the outer columns — middle column stays perfectly centered */
.g-card {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 15px;
  overflow: hidden;
  background: var(--light-2);
  will-change: transform;
}
.g-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.g-mid { position: relative; z-index: 2; }
.g-mid .g-card { box-shadow: 0 30px 90px rgba(16,16,20,.35); }
.g-mid-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,16,.5), rgba(11,11,16,.25) 45%, rgba(11,11,16,.6)),
              radial-gradient(120% 80% at 50% 100%, rgba(124,58,237,.3), transparent 60%);
}
.g-mid-text { position: absolute; inset: 0; }
.g-mid-text span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 7%;
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.04;
  letter-spacing: .01em;
  /* sized to fit INSIDE the card (wraps to 2 lines) — appears 3x bigger
     while the card is scaled up, exactly like the reference site */
  font-size: clamp(13px, calc(var(--gcw) * 0.19), 34px);
}
.g-mid-a { opacity: 0; }

/* ==================== 02 · TRAINING (light) ==================== */
.training {
  background: var(--light);
  color: var(--ink);
  padding-top: 150px;
}
.training .container { position: relative; }
.training-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  margin-bottom: 72px;
}
.training-sub { color: var(--ink-muted); max-width: 46ch; font-size: 16px; }
.training-head-right .training-sub { margin-bottom: 12px; }
.training-head-right .training-more { color: var(--purple); font-size: 14px; }
.training-head-right .training-more:hover { color: var(--purple-3); }
.training-head-right .training-more:hover i { transform: translateX(4px); }
.programs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
  margin-bottom: 34px;
}
.program-card {
  position: relative;
  background: #FBFAF6;
  border: 1px solid rgba(16,16,20,.1);
  border-radius: 18px;
  padding: 34px 34px 30px;
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(16,16,20,.08);
  overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.program-card:hover { transform: translateY(-3px); box-shadow: 0 24px 60px rgba(16,16,20,.12); }
.program-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
/* program color language (matches training.html): SD = purple, SL = sky */
.program-bar-orange { background: linear-gradient(90deg, var(--purple), var(--lavender-2)); }
.program-bar-white { background: linear-gradient(90deg, var(--sky), var(--sky-2)); }
.program-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(16,16,20,.5); margin-bottom: 10px;
}
.program-card h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 3vw, 42px);
  text-transform: uppercase; line-height: 1;
  margin-bottom: 14px;
}
.program-desc { font-size: 14.5px; color: var(--ink-muted); margin-bottom: 22px; }
.program-specs { border-top: 1px solid rgba(16,16,20,.12); margin-bottom: 22px; }
.spec-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(16,16,20,.08);
  font-size: 13.5px;
}
.spec-row span { color: rgba(16,16,20,.5); font-weight: 600; }
.spec-row b { font-weight: 700; text-align: right; }
.program-price {
  background: var(--ink); color: var(--light);
  border-radius: 12px;
  padding: 6px 18px;
  margin-bottom: 22px;
}
.price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(245,245,255,.12);
  font-size: 13.5px;
}
.price-row:last-child { border-bottom: none; }
.price-row span { color: rgba(245,245,255,.6); font-weight: 600; }
.price-row b {
  font-family: var(--display); font-weight: 400;
  font-size: 24px; letter-spacing: .01em;
}
.btn-ghost-dark {
  background: transparent; color: var(--ink);
  border-color: rgba(16,16,20,.25);
}
.btn-ghost-dark:hover { border-color: var(--ink); color: var(--ink); }
.program-perks {
  border-top: 1px solid rgba(16,16,20,.14);
  padding-top: 26px;
  color: var(--ink);
}
.perks-title {
  font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(16,16,20,.5); margin-bottom: 14px;
}
.perks-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.perks-row span {
  border: 1px solid rgba(16,16,20,.2);
  border-radius: 999px; padding: 8px 16px;
  font-size: 12.5px; font-weight: 700;
}
.perks-note { font-size: 13px; color: rgba(16,16,20,.55); font-weight: 600; }
.track-row {
  display: grid;
  grid-template-columns: 70px 1.2fr auto 1.6fr 40px;
  align-items: center; gap: 24px;
  padding: 30px 18px;
  border-bottom: 1px solid var(--border-dark);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: color .35s;
}
.track-row::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s var(--ease);
  z-index: 0;
}
.track-row:hover::before { transform: scaleY(1); transform-origin: top; }
.track-row > * { position: relative; z-index: 1; }
.track-row:hover { color: var(--light); }
.track-num {
  font-family: var(--display); font-size: 22px;
  color: transparent; -webkit-text-stroke: 1px rgba(16,16,20,.4);
  transition: -webkit-text-stroke .35s;
}
.track-row:hover .track-num { -webkit-text-stroke: 1px rgba(196,181,253,.8); }
.track-name {
  font-family: var(--clash); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 34px);
  text-transform: uppercase; letter-spacing: .01em;
}
.track-age {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px;
  padding: 6px 14px;
  opacity: .75;
  white-space: nowrap;
}
.track-desc { font-size: 14px; opacity: .72; }
.track-arrow {
  font-size: 22px;
  transform: translateX(-8px); opacity: .4;
  transition: transform .35s var(--ease), opacity .35s;
}
.track-row:hover .track-arrow { transform: translateX(0); opacity: 1; color: var(--lavender-2); }

/* ==================== 03 · CAMPS ==================== */
.camp-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: clamp(420px, 64vh, 620px);
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  margin-bottom: 26px;
}
.camp-hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
.camp-hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,16,.35) 0%, rgba(11,11,16,.05) 40%, rgba(11,11,16,.88) 100%);
}
.camp-hero-content {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 30px 36px 34px;
}
.camp-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.camp-loc {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(11,11,16,.5); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 7px 15px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(245,245,255,.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.camp-hero-bottom {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
}
.camp-hero-bottom h3 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(38px, 5vw, 64px);
  text-transform: uppercase; line-height: 1;
  margin-bottom: 10px;
}
.camp-hero-bottom p { color: rgba(245,245,255,.8); font-size: 15.5px; max-width: 52ch; }
.camps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.camp-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 420px;
  display: flex; align-items: flex-end;
  transition: border-color .4s, box-shadow .4s, transform .5s var(--ease);
}
.camp-card-media { position: absolute; inset: 0; }
.camp-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
.camp-card:hover .camp-card-media img { transform: scale(1.06); }
.camp-card:hover { border-color: var(--border-hover); transform: translateY(-6px); box-shadow: var(--glow); }
.camp-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,16,.15) 0%, rgba(11,11,16,.35) 45%, rgba(11,11,16,.95) 100%);
}
.camp-content {
  position: relative; padding: 34px 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.camp-badge {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--purple);
  border-radius: 999px; padding: 6px 14px;
  box-shadow: 0 0 24px rgba(124,58,237,.55);
}
.camp-card h3 {
  font-family: var(--display); font-weight: 400;
  font-size: 34px; text-transform: uppercase; letter-spacing: .01em;
}
.camp-card p { color: rgba(245,245,255,.78); font-size: 15px; max-width: 46ch; }
.camp-link {
  font-size: 14px; font-weight: 700; color: var(--lavender-2);
  display: inline-flex; gap: 6px; transition: gap .3s var(--ease);
}
.camp-link:hover { gap: 12px; }

/* ==================== FILMSTRIP (scroll-driven) ==================== */
.coaches-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.coaches-intro { color: var(--muted); max-width: 44ch; font-size: 15.5px; }
.coaches-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.coach-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 26px 24px;
  transition: border-color .4s, transform .4s var(--ease), box-shadow .4s;
}
.coach-card:hover { border-color: var(--border-hover); transform: translateY(-6px); box-shadow: var(--glow); }
.coach-featured {
  grid-column: span 2; grid-row: span 2;
  display: flex; flex-direction: column;
  padding: 34px 32px;
  background: linear-gradient(160deg, rgba(124,58,237,.2), rgba(20,18,28,.6) 65%);
  border-color: rgba(167,139,250,.32);
}
.coach-featured .coach-photo { height: 300px; flex: 0 0 auto; }
.coach-featured .coach-info h3 { font-size: 30px; }
.coach-meta { font-size: 13.5px; color: var(--lavender-2); font-weight: 700; margin-bottom: 14px; }
.coach-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.coach-chips span {
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  padding: 6px 13px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(245,245,255,.85);
}
.coach-facts { list-style: none; margin: 0 0 18px; padding: 0; }
.coach-facts li {
  position: relative;
  padding: 7px 0 7px 20px;
  font-size: 13.5px; color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.coach-facts li::before {
  content: ""; position: absolute; left: 2px; top: 14px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple);
}
.coach-para { font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.coach-photo {
  height: 220px;
  border-radius: 16px;
  margin-bottom: 22px;
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(124,58,237,.35), rgba(20,18,28,.0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid rgba(167,139,250,.2);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.coach-photo img {
  max-height: 96%;
  width: auto;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.45));
}
.coach-card h3 { font-size: 20px; margin-bottom: 6px; font-weight: 700; }
.coach-role { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lavender-2); margin-bottom: 14px; }
.coach-bio { font-size: 14px; color: var(--muted); }

/* ==================== FOUNDERS + STAFF (homepage cards) ==================== */
.coaches-band-label {
  display: flex; align-items: center; gap: 14px;
  margin: 54px 0 22px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--lavender-2);
}
.coaches-band-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(167,139,250,.35), transparent);
}
.founders-grid {
  display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px;
}
.founder-card {
  position: relative; display: block;
  text-decoration: none; color: inherit;
  background: linear-gradient(180deg, #12101B 0%, #0B0A12 100%);
  border: 1px solid rgba(167,139,250,.28);
  border-radius: 24px;
  padding: 36px 34px 32px;
  min-height: 360px;
  /* visible so the portrait can break out of the card's top edge */
  overflow: visible;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 10px rgba(0,0,0,.4);
  transition: border-color .4s, box-shadow .4s, transform .4s var(--ease);
}
/* the gradient-card aurora, in the founders' register */
.founder-card::before {
  content: ""; position: absolute; z-index: 0;
  left: 0; right: 0; bottom: 0; height: 62%;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 85% at 85% 115%, rgba(172,92,255,.34), rgba(172,92,255,.12) 45%, rgba(79,70,229,0) 75%),
    radial-gradient(ellipse 70% 85% at 15% 115%, rgba(56,189,248,.2), rgba(56,189,248,.07) 45%, rgba(79,70,229,0) 75%),
    radial-gradient(ellipse 85% 75% at 50% 125%, rgba(139,92,246,.32), rgba(139,92,246,.12) 45%, rgba(79,70,229,0) 75%);
  opacity: .5;
  transition: opacity .5s;
  pointer-events: none;
}
.founder-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* no blend mode — see .p-card::after (Safari composited-layer blend bug) */
  opacity: .04;
  pointer-events: none;
}
.founder-card:hover {
  border-color: rgba(167,139,250,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px rgba(124,58,237,.2);
  transform: translateY(-3px);
}
.founder-card:hover::before { opacity: .8; }
.founder-info { position: relative; z-index: 2; max-width: 56%; }
.founder-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.founder-chips span {
  border: 1px solid rgba(167,139,250,.3); border-radius: 999px;
  padding: 4px 11px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lavender-2);
  white-space: nowrap;
  /* solid backing so a chip stays legible even if it brushes the portrait */
  background: rgba(11,10,18,.78);
}
.founder-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lavender); margin-bottom: 12px;
}
.founder-card h3 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(26px, 2.4vw, 38px); line-height: 1.02;
  margin-bottom: 10px;
}
.founder-primary h3 { font-size: clamp(32px, 3vw, 48px); }
.founder-meta { font-size: 13px; font-weight: 700; color: var(--lavender-2); margin-bottom: 14px; }
.founder-short { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin-bottom: 20px; }
.founder-photo {
  position: absolute; right: 14px; bottom: 0; z-index: 0;
  /* taller than the card so the portrait breaks the top edge — but capped,
     because cards grow with their text and the portrait must not balloon
     over the copy */
  height: 104%;
  max-height: 440px;
  display: flex; align-items: flex-end;
  pointer-events: none;
}
.founder-card:not(.founder-primary) .founder-photo { max-height: 410px; right: -6px; }
.founder-card:not(.founder-primary) .founder-info { max-width: 54%; }
.founder-photo img {
  height: 100%; width: auto; object-fit: contain;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.5));
}
.founder-ph, .staff-ph {
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(124,58,237,.3), transparent 70%),
    linear-gradient(200deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px dashed rgba(167,139,250,.35);
  display: flex; align-items: center; justify-content: center;
}
.founder-ph {
  width: 180px; height: 78%;
  border-radius: 18px 18px 0 0; border-bottom: 0;
}
.founder-ph span, .staff-ph span {
  font-family: var(--display); font-weight: 400;
  color: rgba(196,181,253,.3);
  font-size: 56px; letter-spacing: .04em;
}
.coach-more {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--lavender);
}
.coach-more i { font-style: normal; transition: transform .35s var(--ease); }
.founder-card:hover .coach-more i, .staff-card:hover .coach-more i { transform: translateX(4px); }
.staff-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.staff-card {
  display: block; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, #100F19 0%, #0B0A12 100%);
  border: 1px solid var(--border);
  border-radius: 18px; padding: 0;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .4s, box-shadow .4s, transform .4s var(--ease);
}
.staff-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 18px 44px rgba(124,58,237,.16);
  transform: translateY(-3px);
}
/* the portrait fills the card's whole top — no box-in-a-box */
.staff-photo {
  position: relative;
  height: 216px; margin: 0; border: 0; border-radius: 0;
  background:
    radial-gradient(130% 100% at 50% 105%, rgba(124,58,237,.32), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(167,139,250,.14);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
}
.staff-photo img {
  /* run to the card's bottom edge like the founder portraits do — at 94% the
     figure floated with its cut edge visible in mid-air */
  height: 100%; max-height: none; width: auto;
}
.staff-ph span { font-size: 40px; }
.staff-info { padding: 16px 18px 18px; }
.staff-card h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 4px; }
.staff-role {
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lavender-2); margin-bottom: 10px;
}
.staff-short { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-bottom: 14px; }
.staff-card .coach-more { font-size: 12px; }

/* Unified portrait treatment: full color always, gentle rise on hover. */
.founder-photo img, .staff-photo img, .coach-photo img {
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.5));
  transition: transform .55s var(--ease);
  transform-origin: bottom center;
}
.founder-card:hover .founder-photo img,
.staff-card:hover .staff-photo img,
.coach-card:hover .coach-photo img {
  transform: scale(1.035);
}

/* ==================== TESTIMONIALS ====================
   Three masked columns of parent quotes. Columns drift at different speeds
   WITH THE SCROLL (scrubbed, never autonomous — house rule). */
.tst-section { background: var(--bg); }
.tst-stage {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-height: 720px;
  overflow: hidden;
  padding: 6px 4px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
}
.tst-col { display: flex; flex-direction: column; gap: 24px; }
.tst-card {
  margin: 0;
  background: linear-gradient(180deg, #121020 0%, #0C0B14 100%);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  padding: 32px 30px 28px;
  box-shadow:
    0 22px 50px -12px rgba(124,58,237,.16),
    0 8px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .4s, box-shadow .4s;
}
.tst-card:hover {
  border-color: var(--border-hover);
  box-shadow:
    0 26px 60px -12px rgba(124,58,237,.26),
    0 8px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.tst-card p {
  margin: 16px 0 0;
  font-size: 15.5px; line-height: 1.72;
  color: rgba(245,245,255,.92);
}
.tst-card figcaption { display: flex; align-items: center; gap: 10px; }
.tst-card figcaption b { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.tst-verified { flex: 0 0 auto; margin-left: -3px; }
.tst-ig { margin-left: auto; color: rgba(245,245,255,.32); flex: 0 0 auto; }
.tst-av.tst-av-ig {
  /* Instagram story-ring around the initials tile */
  border: 2px solid transparent;
  background:
    linear-gradient(#141221, #141221) padding-box,
    linear-gradient(45deg, #F09433, #E6683C, #DC2743, #CC2366, #BC1888) border-box;
}
.tst-follow {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 16px;
  font-size: 13.5px; font-weight: 700; color: var(--lavender);
  text-decoration: none;
}
.tst-follow i { font-style: normal; transition: transform .35s var(--ease); }
.tst-follow:hover { color: #fff; }
.tst-follow:hover i { transform: translateX(4px); }

/* nav social icons */
.nav-social { display: flex; align-items: center; gap: 8px; }
.nav-social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--muted);
  transition: border-color .3s, color .3s, transform .3s var(--ease);
}
.nav-social a:hover { border-color: var(--border-hover); color: #fff; transform: translateY(-1px); }
.nav-social svg { width: 15px; height: 15px; display: block; }
@media (max-width: 700px) { .nav-social { display: none; } }
.tst-av {
  flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 400; font-size: 13px; letter-spacing: .04em;
  color: var(--lavender-2);
  background: linear-gradient(225deg, rgba(124,58,237,.4), #16142240 100%), #141221;
  border: 1px solid rgba(167,139,250,.28);
}
.tst-card figcaption b { display: block; font-size: 13.5px; font-weight: 700; }
.tst-card figcaption i {
  display: block; font-style: normal;
  font-size: 11.5px; color: var(--muted-2); margin-top: 1px;
}
@media (max-width: 1100px) {
  .tst-stage { grid-template-columns: 1fr 1fr; }
  .tst-col-3 { display: none; }
}
@media (max-width: 700px) {
  .tst-stage { grid-template-columns: 1fr; max-height: 560px; }
  .tst-col-2 { display: none; }
}

/* ==================== COACHES PAGE V2 · THE LINEUP ==================== */
.cp-hero {
  position: relative;
  min-height: 100vh;
  padding-top: 150px;
  background: var(--bg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.cp-hero-ghost {
  position: absolute; inset: 0; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1vw;
  pointer-events: none;
}
.cp-hero-ghost span {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 17vw; line-height: .92; letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(124,58,237,.16);
}
.cp-hero-copy { position: relative; z-index: 3; }
.cp-hero .cpage-back { margin-bottom: 24px; }
.cp-hero .cpage-sub { margin-top: 18px; }
.cp-lineup {
  position: relative; z-index: 2;
  flex: 1;
  min-height: 52vh;
  margin-top: 20px;
}
.cp-lu {
  position: absolute;
  bottom: 0; left: var(--x);
  height: var(--h);
  width: auto;
  /* centering comes from GSAP xPercent (CSS translateX gets parsed to 0 when
     GSAP touches the element before the image has width — v19 lesson) */
  filter: drop-shadow(0 26px 50px rgba(0,0,0,.55)) brightness(.88);
  z-index: 1;
}
html.no-js .cp-lu, html.reduced .cp-lu { transform: translateX(-50%); }
.cp-lu-founder { z-index: 2; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.cp-hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; z-index: 2;
  background: linear-gradient(180deg, rgba(11,11,16,0), var(--bg) 88%);
  pointer-events: none;
}
.cp-band { padding: 46px 0 0; position: relative; z-index: 3; }

/* ==================== COACHES PAGE V2 · FOUNDER SCENES ==================== */
.cp-founder {
  position: relative;
  padding: 90px 0 70px;
  overflow: hidden;
  scroll-margin-top: 90px;
}
.cp-founder-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: end;
}
.cp-founder--flip .cp-founder-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.cp-founder--flip .cp-portrait { order: 2; }
.cp-founder--flip .cp-info { order: 1; }
.cp-portrait { position: relative; }
.cp-portrait-tile {
  position: relative;
  border-radius: 26px;
  min-height: 300px;
  background:
    radial-gradient(120% 95% at 50% 105%, rgba(124,58,237,.34), transparent 72%),
    linear-gradient(180deg, #12101B 0%, #0B0A12 100%);
  border: 1px solid rgba(167,139,250,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 70px rgba(0,0,0,.4);
}
.cp-portrait-tile img {
  display: block;
  width: 86%;
  margin: -8% auto 0;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.55));
}
.cp-info { padding-bottom: 12px; }
.cp-name {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(38px, 4.6vw, 72px); line-height: .98;
  margin: 6px 0 14px;
}
.cp-name-sm {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(28px, 3vw, 44px); line-height: 1;
  margin: 4px 0 10px;
}
.cp-founder .coach-para { max-width: 60ch; font-size: 14.5px; }
.cp-founder .coach-facts { max-width: 560px; }

/* ==================== COACHES PAGE V2 · STAFF ROWS ==================== */
.cp-staff { position: relative; padding-bottom: 40px; }
.cp-row {
  position: relative;
  padding: 74px 0 60px;
  overflow: hidden;
  scroll-margin-top: 90px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cp-row-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: center;
}
.cp-row--flip .cp-row-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.cp-row--flip .cp-row-media { order: 2; }
.cp-row--flip .cp-row-info { order: 1; }
.cp-row-tile {
  position: relative;
  border-radius: 22px;
  background:
    radial-gradient(120% 95% at 50% 105%, rgba(124,58,237,.28), transparent 72%),
    linear-gradient(180deg, #100F19 0%, #0B0A12 100%);
  border: 1px solid rgba(167,139,250,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 22px 50px rgba(0,0,0,.35);
  padding-top: 12%;
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  min-height: 320px;
}
.cp-row-tile img { max-width: 82%; display: block; filter: drop-shadow(0 16px 34px rgba(0,0,0,.5)); }
.cp-row-info .coach-para { max-width: 66ch; font-size: 14.5px; }
/* staff bios: lead line + labeled two-column read instead of a text wall */
.cp-lead {
  font-size: 16px !important;
  line-height: 1.66;
  color: rgba(245,245,255,.9);
  margin-bottom: 22px;
}
.cp-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 36px);
  max-width: 900px;
}
.cp-cols > div {
  border-left: 2px solid rgba(124,58,237,.5);
  padding-left: 16px;
}
.cp-cols h6 {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--lavender-2);
  margin: 0 0 8px;
}
.cp-cols .coach-para { font-size: 13.5px; color: var(--muted); }
@media (max-width: 760px) {
  .cp-cols { grid-template-columns: 1fr; gap: 18px; }
}

/* ==================== COACHES PAGE V2 · CLOSE ==================== */
.cp-close {
  position: relative;
  padding: 130px 0 140px;
  text-align: center;
  background:
    radial-gradient(60% 70% at 50% 110%, rgba(124,58,237,.22), transparent 70%),
    var(--bg);
}
.cp-close-sub { color: var(--muted); margin: 20px 0 30px; font-size: 15.5px; }
.cp-close-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .cp-hero { padding-top: 130px; }
  .cp-lu { filter: drop-shadow(0 16px 30px rgba(0,0,0,.5)) brightness(.82); }
  .cp-lu[data-depth="4"] { display: none; }
  .cp-founder-grid, .cp-founder--flip .cp-founder-grid,
  .cp-row-grid, .cp-row--flip .cp-row-grid { grid-template-columns: 1fr; }
  .cp-founder--flip .cp-portrait, .cp-row--flip .cp-row-media { order: 0; }
  .cp-founder--flip .cp-info, .cp-row--flip .cp-row-info { order: 1; }
  .cp-portrait-tile img { width: 70%; }
  .cp-row-tile { min-height: 260px; }
}

/* ==================== COACHES PAGE (legacy classes kept for reuse) ==================== */
.cpage-hero {
  padding: 170px 0 40px;
  position: relative;
}
.cpage-back {
  display: inline-block; margin-bottom: 26px;
  font-size: 13px; font-weight: 700; color: var(--lavender);
  text-decoration: none;
}
.cpage-back:hover { color: #fff; }
.cpage-sub { color: var(--muted); max-width: 52ch; font-size: 15.5px; margin-top: 18px; }
.cpage-profiles { display: grid; gap: 22px; margin-bottom: 26px; }
.cpage-profiles .coach-card { scroll-margin-top: 110px; }
.coach-full { display: flex; flex-direction: column; }
.coach-full .coach-para + .coach-para { margin-top: 12px; }
.coach-sub {
  display: flex; gap: 10px; align-items: baseline;
  border-left: 3px solid var(--purple); padding-left: 12px;
  color: var(--muted); font-size: 14px; margin-bottom: 18px;
}
.cpage-founder-photo { height: 300px; }
.cpage-founders { grid-template-columns: 1fr 1fr; }
.founder-ph-page {
  background:
    radial-gradient(120% 90% at 50% 100%, rgba(124,58,237,.3), transparent 70%),
    linear-gradient(200deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px dashed rgba(167,139,250,.35);
  align-items: center;
}
.founder-ph-page span {
  font-family: var(--display); font-weight: 400;
  color: rgba(196,181,253,.3); font-size: 72px; letter-spacing: .04em;
}
.coach-prof { display: flex; gap: 30px; align-items: stretch; }
.coach-prof .coach-info { flex: 1; min-width: 0; }
.coach-prof .coach-info h3 { font-size: 26px; }
.coach-prof .coach-photo {
  flex: 0 0 220px; width: 220px; height: auto; min-height: 260px;
  margin: 0; align-self: stretch;
}
.coach-prof .coach-photo span { font-size: 52px; }

@media (max-width: 1100px) {
  .founders-grid { grid-template-columns: 1fr; }
  .staff-grid { grid-template-columns: repeat(3, 1fr); }
  .cpage-founders { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .coach-prof { flex-direction: column; }
  .coach-prof .coach-photo { width: 100%; flex-basis: auto; min-height: 220px; }
}
@media (max-width: 760px) {
  .founder-info { max-width: 100%; }
  .founder-photo { opacity: .22; }
  .staff-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .staff-grid { grid-template-columns: 1fr; }
}

/* ==================== FAQ ==================== */
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .3s;
}
.faq-item.open { border-color: var(--border-hover); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: none; text-align: left;
  padding: 22px 26px;
  font-family: var(--font); font-size: 16px; font-weight: 700; color: var(--text);
  cursor: pointer;
}
.faq-q i {
  flex: 0 0 auto; width: 12px; height: 12px; position: relative;
  transition: transform .4s var(--ease);
}
.faq-q i::before, .faq-q i::after {
  content: ""; position: absolute; background: var(--lavender); border-radius: 2px;
}
.faq-q i::before { inset: 5px 0; }
.faq-q i::after { inset: 0 5px; transition: transform .4s var(--ease); }
.faq-item.open .faq-q i { transform: rotate(90deg); }
.faq-item.open .faq-q i::after { transform: scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .5s var(--ease), visibility .5s; }
.faq-item.open .faq-a { visibility: visible; }
.faq-a p { padding: 0 26px 24px; color: var(--muted); font-size: 15px; max-width: 60ch; }

/* ==================== FINAL CTA ==================== */
.final-cta {
  text-align: center; padding: 120px 0 110px; overflow: hidden;
}
.final-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
.final-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,16,.97) 0%, rgba(11,11,16,.55) 35%, rgba(11,11,16,.65) 70%, rgba(11,11,16,.97) 100%),
    radial-gradient(800px 460px at 50% 60%, rgba(124,58,237,.18), transparent 65%);
}
.final-inner { position: relative; }
.final-logo { width: clamp(84px, 9vw, 120px); margin: 0 auto 22px; filter: drop-shadow(0 16px 40px rgba(0,0,0,.5)); }
.final-title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(56px, 9vw, 150px);
  letter-spacing: .01em; line-height: .92; margin-bottom: 22px;
  text-transform: uppercase;
  text-shadow: 0 10px 60px rgba(0,0,0,.6);
}
.final-sub { color: rgba(245,245,255,.8); font-size: 17px; margin-bottom: 42px; }
.final-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 46px; }
.contact-row {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  font-size: 14px; font-weight: 600; color: rgba(245,245,255,.6);
}

/* ==================== FOOTER ==================== */
.footer { border-top: 1px solid var(--border); background: rgba(255,255,255,.015); position: relative; overflow: hidden; }
.footer-word {
  overflow: hidden;
  padding: 34px 0 0;
  text-align: center;
  line-height: 0;
}
.footer-word span {
  display: inline-block;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(38px, 12.5vw, 210px);
  line-height: .78;
  margin-bottom: -0.22em; /* letters bleed off the very bottom of the page */
  text-transform: uppercase; letter-spacing: .005em;
  white-space: nowrap;
  /* knockout text filled with a real team photo, panned by scroll */
  background-image: linear-gradient(rgba(124,58,237,.32), rgba(60,32,120,.5)), url('../assets/img/real/footer-fill3.webp');
  background-size: cover;
  background-position: 50% 30%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  will-change: background-position;
}
.footer-inner {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  padding-top: 64px; padding-bottom: 48px;
}
.footer-logo { width: 140px; margin-bottom: 18px; }
.footer-brand p { color: var(--muted-2); font-size: 14px; margin-top: 14px; max-width: 30ch; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h3 {
  font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 6px;
}
.footer-col a { font-size: 14px; color: var(--muted); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 22px 36px; text-align: center;
  font-size: 13px; color: var(--muted-2);
}

/* ==================== REVEAL DEFAULTS ==================== */
.reveal-up { opacity: 0; transform: translateY(18px); }
html.no-js .reveal-up, html.reduced .reveal-up { opacity: 1; transform: none; }
html.no-js .preloader { display: none; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1024px) {
  .hero-player { transform: none; margin-left: calc(58vh * -0.1744); opacity: .6; height: 58vh; }
  .coaches-grid { grid-template-columns: 1fr 1fr; }
  .coach-featured .coach-photo { height: 280px; }
  .camps-grid { grid-template-columns: 1fr; }
  .camp-card { min-height: 380px; }
  .camp-hero-content { padding: 22px 22px 26px; }
  .platform-split { grid-template-columns: 1fr; }
  .platform-video-wrap { min-height: 400px; }
  .track-row { grid-template-columns: 50px 1fr auto 34px; }
  .track-desc { display: none; }
}
@media (max-width: 560px) {
  /* keep the zoom-through legible on phones: bigger cards, bigger statement */
  .g-grid { --gcw: 30vw; }
}
@media (max-width: 768px) {
  .section { padding: 90px 0; }
  .topbar a { font-size: 10.5px; gap: 8px; letter-spacing: 0; padding: 0 10px; }
  .topbar .topbar-cta { display: none; }
  .topbar .topbar-dot { width: 6px; height: 6px; }
  .nav { padding: 14px 20px; }
  .scrolled-page .nav { padding: 12px 20px; }
  .nav-links {
    position: fixed; inset: 0; z-index: 405;
    background: rgba(11,11,16,.96);
    backdrop-filter: blur(24px);
    flex-direction: column; align-items: center; justify-content: center; gap: 34px;
    opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
  }
  .nav-links.open { opacity: 1; visibility: visible; }
  .nav-links a { font-size: 30px; font-family: var(--clash); font-weight: 600; text-transform: uppercase; }
  .btn-nav { display: none; }
  .nav-burger { display: block; }
  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero { padding-top: calc(var(--topbar-h) + 92px); padding-bottom: 56px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .hero-title { font-size: clamp(54px, 15.5vw, 84px); }
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { flex: 1; justify-content: center; }
  .hero-player { height: 48vh; left: auto; right: -16%; margin-left: 0; transform: none; opacity: .45; z-index: 1; }
  .hero-glow { left: 24%; width: 95vw; }
  .hero-scroll-hint { display: none; }
  .platform-features { grid-template-columns: 1fr; }
  .price-hero { padding: 34px 28px; }
  .training-head { margin-bottom: 40px; }
  .programs-grid { grid-template-columns: 1fr; }
  .coaches-grid { grid-template-columns: 1fr 1fr; }
  .coach-featured { grid-column: span 2; grid-row: auto; }
  .coach-featured .coach-photo { height: 260px; }
  .track-row { grid-template-columns: 40px 1fr 30px; gap: 14px; padding: 24px 10px; }
  .track-age { display: none; }
  .coaches-scroll { padding: 10px 20px 24px; }
  .coach-card { flex: 0 0 270px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ==================== TRAINING PAGE (tp-) ==================== */
/* Chapter system: every chapter is a .tp-sec with a .tp-slate header.
   Program chapters carry scoped accent tokens (.chap--sd purple / .chap--sl sky)
   so one component set renders two distinct program identities. */
.tp-sec { position: relative; overflow: clip; padding-bottom: 84px; }
.tp-sec--light { background: var(--light); color: var(--ink); }
.tp-sec--navy { background: #0A0E16; }
/* chapter deks: .training-sub is ink-colored for the homepage's light section —
   dark chapters need the light muted token or the dek vanishes */
.tp-sec:not(.tp-sec--light) .training-sub { color: var(--muted); }
.tp-sec--switch { padding-bottom: 0; }
.chap--sd { --acc: #7C3AED; --acc-2: #C4B5FD; --acc-rgb: 124, 58, 237; }
.chap--sl { --acc: #38BDF8; --acc-2: #7DD3FC; --acc-rgb: 56, 189, 248; }
.chap--sl .mega-title em {
  background: linear-gradient(120deg, var(--sky-2), var(--sky) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- chapter slate (the folio header, used by every chapter) ---------- */
.tp-slate { position: relative; padding-top: 62px; margin-bottom: 46px; }
.tp-slate--compact { margin-bottom: 38px; }
.tp-slate-rule {
  border: 0; height: 1px;
  background: rgba(255,255,255,.08);
  margin: 0 0 26px;
}
.tp-sec--light .tp-slate-rule { background: rgba(16,16,20,.14); }
.tp-slate-kicker {
  display: flex; align-items: baseline; gap: 16px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 38px;
}
.tp-sec--light .tp-slate-kicker { color: var(--ink-muted); }
.tp-slate-glyph {
  position: absolute; right: -2vw; top: -18px; z-index: 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(78px, 10.5vw, 185px); line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(var(--acc-rgb, 167, 139, 250), .14);
  pointer-events: none; user-select: none;
}
.tp-sec--light .tp-slate-glyph { -webkit-text-stroke-color: rgba(16,16,20,.09); }
.tp-slate .training-head { margin-bottom: 0; }
.tp-slate .container { position: relative; z-index: 1; }

/* ---------- chapter rail (fixed left, wide screens only) ---------- */
.tp-rail {
  display: none;
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
  z-index: 300;
  flex-direction: column; gap: 13px;
  --rail-acc: var(--lavender);
}
/* 1640px+: the widest expanded label must clear the container's content edge */
@media (min-width: 1440px) { .tp-rail { display: flex; } }
/* 1440–1639: not enough margin for labels — ticks only, active label as a pill */
@media (min-width: 1440px) and (max-width: 1639.98px) {
  .tp-rail a span { display: none; }
  .tp-rail a.active span {
    display: inline-block;
    background: rgba(15, 15, 22, .92);
    border: 1px solid rgba(167, 139, 250, .35);
    border-radius: 999px;
    padding: 5px 12px;
  }
  .tp-rail.on-light a.active span { background: rgba(251, 250, 246, .95); border-color: rgba(16, 16, 20, .2); }
}
.tp-rail a {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.tp-rail a::before {
  content: ""; flex: 0 0 auto;
  width: 14px; height: 2px; border-radius: 2px;
  background: rgba(245,245,255,.28);
  transition: width .35s var(--ease), background .35s;
}
.tp-rail a span {
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,245,255,.45);
  transition: color .35s;
  white-space: nowrap;
}
.tp-rail a:hover span { color: rgba(245,245,255,.85); }
.tp-rail a.active::before { width: 26px; background: var(--rail-acc); box-shadow: 0 0 10px rgba(167,139,250,.4); }
.tp-rail a.active span { color: var(--light); }
.tp-rail.on-light a::before { background: rgba(16,16,20,.25); }
.tp-rail.on-light a span { color: rgba(16,16,20,.45); }
.tp-rail.on-light a:hover span { color: rgba(16,16,20,.8); }
.tp-rail.on-light a.active::before { background: var(--rail-acc); }
.tp-rail.on-light a.active span { color: var(--ink); }

/* ---------- hero ---------- */
.tp-hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
  padding: calc(var(--topbar-h) + 130px) 0 30px;
}
.tp-hero-media { position: absolute; inset: 0; z-index: 0; }
.tp-hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .5;
  filter: saturate(.95) brightness(.85);
  will-change: transform;
}
.tp-hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,16,.74) 0%, rgba(11,11,16,.30) 45%, rgba(11,11,16,.95) 100%),
    radial-gradient(900px 520px at 16% 82%, rgba(124,58,237,.26), transparent 65%);
}
.tp-hero-inner { position: relative; z-index: 2; }
.tp-hero .cpage-back { display: inline-block; margin-bottom: 22px; }
.tp-hero .pillar-tag { margin-bottom: 30px; }
.tp-title { max-width: 14ch; text-shadow: 0 10px 60px rgba(0,0,0,.5); }
.tp-hero-sub {
  color: rgba(245,245,255,.85);
  font-size: clamp(15px, 1.4vw, 17.5px);
  max-width: 58ch;
  margin: 22px 0 30px;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.tp-stats {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(44px, 7vh, 92px);
}
.tp-stat { position: relative; padding-top: 16px; }
.tp-stat::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 46px; height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--lavender-2));
  box-shadow: 0 0 12px rgba(124,58,237,.55);
}
.tp-stat b {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 3vw, 44px); line-height: 1;
  letter-spacing: .01em;
}
.tp-stat b i { font-style: normal; font-size: .52em; color: var(--muted); }
.tp-stat > span {
  display: block; margin-top: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--muted-2);
  max-width: 22ch; line-height: 1.5;
}

/* shared bits */
.tp-lead { color: var(--muted); font-size: 15.5px; line-height: 1.7; max-width: 54ch; margin: 4px 0 26px; }
.tp-sec--light .tp-lead { color: var(--ink-muted); }
.tp-blocklbl {
  font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted-2);
  margin: 26px 0 4px;
}
.tp-sec--light .tp-blocklbl { color: rgba(16,16,20,.45); }

/* ---------- 01 · switchboard diptych ---------- */
.tp-switch {
  position: relative;
  display: flex;
  min-height: 64vh;
}
/* the seam is drawn on the SD door's right edge so it travels with the
   hover expansion instead of sitting dead at 50% */
.tp-door--sd::after {
  content: ""; position: absolute; z-index: 3;
  right: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, var(--purple), var(--sky));
  pointer-events: none;
}
.tp-door {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  overflow: hidden;
  text-decoration: none;
  transition: flex-basis .65s var(--ease);
}
.tp-door > img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
  transition: transform .9s var(--ease);
}
.tp-door-shade { position: absolute; inset: 0; z-index: 1; }
.tp-door--sd, .tp-door--sd:hover { background: var(--light); color: var(--ink); }
.tp-door--sd .tp-door-shade {
  background: linear-gradient(180deg, #F1EFE9 0%, #F1EFE9 15%, rgba(241,239,233,.7) 30%, rgba(241,239,233,0) 48%, rgba(16,16,20,.04) 76%, rgba(16,16,20,.34) 100%);
}
.tp-door--sl, .tp-door--sl:hover { background: #0A0E16; color: var(--text); }
.tp-door--sl > img { object-position: center 18%; }
.tp-door--sl .tp-door-shade {
  background: linear-gradient(180deg, #0A0E16 0%, #0A0E16 15%, rgba(10,14,22,.7) 30%, rgba(10,14,22,0) 48%, rgba(10,14,22,.08) 76%, rgba(10,14,22,.46) 100%);
}
@media (hover: hover) {
  .tp-door:hover { flex-basis: 56%; }
  .tp-door:hover > img { transform: scale(1.03); }
}
.tp-door:focus-visible { outline: 2px solid var(--lavender); outline-offset: -6px; }
.tp-door-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(30px, 4vw, 56px);
  width: 100%;
}
.tp-door-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  margin-bottom: 14px;
}
.tp-door--sd .tp-door-kicker { color: var(--purple); }
.tp-door--sl .tp-door-kicker { color: var(--sky); }
.tp-door-name {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(38px, 4.2vw, 64px); line-height: .98;
  letter-spacing: .01em;
  margin-bottom: 20px;
}
.tp-door-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-door-chips span {
  border-radius: 999px; padding: 7px 14px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.tp-door--sd .tp-door-chips span { border: 1px solid rgba(16,16,20,.3); color: rgba(16,16,20,.8); background: rgba(241,239,233,.5); }
.tp-door--sd .tp-door-chips span:last-child { background: var(--purple); border-color: var(--purple); color: #fff; }
.tp-door--sl .tp-door-chips span { border: 1px solid rgba(125,211,252,.4); color: var(--sky-2); background: rgba(10,14,22,.5); }
.tp-door--sl .tp-door-chips span:last-child { background: rgba(56,189,248,.16); border-color: var(--sky); color: #fff; }
.tp-door-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 11px 18px; border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tp-door--sd .tp-door-link { color: var(--purple); background: rgba(241,239,233,.82); border: 1px solid rgba(124,58,237,.25); }
.tp-door--sl .tp-door-link { color: var(--sky); background: rgba(10,14,22,.62); border: 1px solid rgba(56,189,248,.35); }
.tp-door-link i { font-style: normal; transition: transform .35s var(--ease); }
.tp-door:hover .tp-door-link i { transform: translateX(5px); }
.tp-switch-note {
  padding: 26px 0 34px;
  text-align: center;
  font-size: 14px; font-weight: 700;
  color: var(--muted);
}

/* ---------- program chapters (02 / 03) ---------- */
.tp-prog-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(36px, 4.5vw, 80px);
  align-items: center;
}
.tp-prog--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.tp-prog--flip .tp-prog-media { order: 0; }
#shooting-lab .tp-prog-media .tp-tile img { object-position: center 15%; }
.tp-prog--flip .tp-prog-info { order: 1; }
.tp-prog-media .tp-tile { aspect-ratio: 4 / 4.4; }
.tp-tile {
  margin: 0; position: relative;
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  will-change: transform;
}
.tp-sec--light .tp-tile { border-color: rgba(16,16,20,.12); box-shadow: 0 30px 70px rgba(16,16,20,.2); }
.tp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11,11,16,.45));
  pointer-events: none;
}
/* SL reticle corner marks — the lab reads as measurement */
.tp-reticle::before, .tp-reticle::after, .tp-ret::before, .tp-ret::after {
  content: ""; position: absolute; z-index: 2;
  width: 22px; height: 22px;
  pointer-events: none;
}
.tp-reticle::before { top: 16px; left: 16px; border-top: 2px solid rgba(56,189,248,.85); border-left: 2px solid rgba(56,189,248,.85); }
.tp-reticle::after { top: 16px; right: 16px; border-top: 2px solid rgba(56,189,248,.85); border-right: 2px solid rgba(56,189,248,.85); }
.tp-ret::before { position: absolute; bottom: 16px; left: 16px; border-bottom: 2px solid rgba(56,189,248,.85); border-left: 2px solid rgba(56,189,248,.85); }
.tp-ret::after { position: absolute; bottom: 16px; right: 16px; border-bottom: 2px solid rgba(56,189,248,.85); border-right: 2px solid rgba(56,189,248,.85); }
/* labeled spec bar — the program facts, structured instead of prose */
.tp-spec {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  overflow: hidden;
  max-width: 560px;
  margin: 0 0 30px;
}
.tp-sec--light .tp-spec { background: rgba(16,16,20,.14); border-color: rgba(16,16,20,.14); }
.tp-spec > div { background: #0E1420; padding: 13px 16px 12px; }
.tp-sec--light .tp-spec > div { background: #FBFAF6; }
.tp-spec span {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acc, var(--lavender));
}
.tp-spec b { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 700; line-height: 1.4; }
.tp-sec--light .tp-spec b { color: var(--ink); }

.tp-quote {
  margin: 0 0 8px;
  border-left: 3px solid var(--acc, var(--lavender));
  padding-left: 18px;
  font-family: var(--clash); font-weight: 600;
  font-size: clamp(19px, 1.9vw, 25px); line-height: 1.3;
  color: rgba(245,245,255,.92);
  max-width: 30ch;
}
.tp-curr { list-style: none; margin: 0; padding: 0; max-width: 580px; }
.tp-curr li {
  display: flex; gap: 18px; align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.tp-sec--light .tp-curr li { border-color: rgba(16,16,20,.12); }
.tp-curr li::before {
  content: ""; flex: 0 0 16px;
  height: 2px; border-radius: 2px;
  margin-top: .7em;
  background: rgba(var(--acc-rgb, 124, 58, 237), .65);
}
.tp-curr li em { font-style: normal; font-size: 15px; font-weight: 600; color: rgba(245,245,255,.9); }
.tp-sec--light .tp-curr li em { color: rgba(16,16,20,.85); }

/* groups */
.tp-groups-title {
  font-family: var(--clash); font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 48px 0 20px;
}
.tp-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tp-group-card {
  position: relative;
  border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(16,16,20,.16);
  min-height: 300px;
  display: flex; align-items: flex-end;
  background: #0E0D16;
  color: var(--text);
  transition: border-color .4s, transform .5s var(--ease), box-shadow .4s;
}
.tp-group-card:hover { border-color: rgba(124,58,237,.5); transform: translateY(-4px); box-shadow: 0 24px 60px rgba(16,16,20,.22); }
.tp-group-card > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 26%;
  transition: transform .9s var(--ease);
}
.tp-group-card:hover > img { transform: scale(1.05); }
.tp-group-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,11,16,.2) 0%, rgba(11,11,16,.4) 45%, rgba(11,11,16,.95) 100%);
}
.tp-group-info { position: relative; z-index: 1; padding: 26px 26px 24px; }
.tp-group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tp-group-head b {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 28px; letter-spacing: .01em;
}
.tp-group-head span {
  border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  color: rgba(245,245,255,.9);
}
.tp-group-info p { color: rgba(245,245,255,.8); font-size: 13.5px; max-width: 52ch; }
.tp-group-note {
  grid-column: 1 / -1;
  border-left: 3px solid var(--purple);
  background: rgba(124,58,237,.07);
  border-radius: 0 14px 14px 0;
  padding: 18px 24px;
  color: var(--ink-muted); font-size: 14.5px;
}
.tp-group-note b { color: var(--ink); }

/* ---------- price plates ---------- */
.tp-prog-info .tp-plate { width: 100%; margin-top: 38px; }
.tp-plate {
  position: relative; overflow: hidden;
  width: min(560px, 100%);
  border-radius: 24px;
  padding: 34px 34px 30px;
  scroll-margin-top: 110px;
}
.tp-plate-topline {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--acc, var(--purple)), var(--acc-2, var(--lavender-2)));
  box-shadow: 0 0 16px rgba(var(--acc-rgb, 124, 58, 237), .5);
}
.tp-plate--print {
  background: #FBFAF6;
  color: var(--ink);
  border: 1px solid rgba(16,16,20,.1);
  box-shadow: 0 28px 70px rgba(16,16,20,.14);
}
.tp-plate--glass {
  background: linear-gradient(180deg, #0E1420 0%, #0A0E16 100%);
  border: 1px solid rgba(56,189,248,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 10px rgba(0,0,0,.4);
}
.tp-plate--glass::before {
  content: ""; position: absolute; z-index: 0;
  left: 0; right: 0; bottom: 0; height: 62%;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 75% 85% at 80% 115%, rgba(56,189,248,.3), rgba(56,189,248,.1) 45%, rgba(56,189,248,0) 75%),
    radial-gradient(ellipse 60% 75% at 15% 115%, rgba(139,92,246,.18), rgba(139,92,246,.06) 45%, rgba(79,70,229,0) 75%);
  opacity: .6;
  pointer-events: none;
}
.tp-plate > * { position: relative; z-index: 1; }
.tp-plate-kicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acc, var(--purple));
  margin-bottom: 8px;
}
.tp-plate h3 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(28px, 2.6vw, 38px); line-height: 1;
  margin-bottom: 8px;
}
.tp-plate-meta { font-size: 12.5px; font-weight: 600; margin-bottom: 20px; }
.tp-plate--print .tp-plate-meta { color: rgba(16,16,20,.5); }
.tp-plate--glass .tp-plate-meta { color: var(--muted-2); }
.tp-plate-row {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 15px 0 8px;
  border-top: 1px solid rgba(16,16,20,.1);
}
.tp-plate--glass .tp-plate-row { border-top-color: rgba(255,255,255,.09); }
.tp-plate-row span { display: block; font-size: 14.5px; font-weight: 700; }
.tp-plate-row i {
  display: block; font-style: normal;
  font-size: 12px; margin-top: 3px;
}
.tp-plate--print .tp-plate-row i { color: rgba(16,16,20,.5); }
.tp-plate--glass .tp-plate-row i { color: var(--muted-2); }
.tp-plate-row b {
  font-family: var(--display); font-weight: 400;
  font-size: 32px; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.tp-ticks { display: flex; justify-content: space-between; margin: 0 0 10px; }
.tp-ticks i { width: 1.5px; height: 6px; background: rgba(var(--acc-rgb, 124, 58, 237), .35); }
.tp-plate-cta { margin-top: 18px; width: 100%; justify-content: center; }
.tp-plate--glass .btn-ghost { border-color: rgba(56,189,248,.45); }
.tp-plate--glass .btn-ghost:hover { border-color: var(--sky); }
.tp-plate-x {
  display: inline-block; margin-top: 16px;
  font-size: 13px; font-weight: 700;
  color: var(--acc, var(--purple));
}
.tp-plate--print .tp-plate-x:hover { color: var(--purple-3); }
.tp-plate--glass .tp-plate-x { color: var(--sky-2); }
.tp-plate--glass .tp-plate-x:hover { color: #fff; }

/* ---------- combine band ---------- */
.tp-combine {
  margin-top: 68px;
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(90deg, rgba(124,58,237,.24), rgba(124,58,237,0) 46%),
    linear-gradient(270deg, rgba(56,189,248,.2), rgba(56,189,248,0) 46%),
    #0A0E16;
}
.tp-combine-inner {
  display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  padding-top: 44px; padding-bottom: 44px;
  text-align: center;
}
.tp-combine-num {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(52px, 6.4vw, 92px); line-height: 1;
  background: linear-gradient(90deg, var(--lavender-2), var(--sky));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tp-combine-inner p { font-size: 15.5px; color: var(--muted); max-width: 30ch; text-align: left; }
.tp-combine-inner p b { color: var(--text); }

/* ---------- 04 · package ---------- */
.tp-perks {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.tp-perk {
  background: #FBFAF6;
  border: 1px solid rgba(16,16,20,.1);
  border-radius: 16px;
  padding: 20px 18px 18px;
  box-shadow: 0 14px 40px rgba(16,16,20,.06);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.tp-perk:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(16,16,20,.1); }
.tp-perk i {
  display: block; font-style: normal;
  font-family: var(--display); font-size: 14px; letter-spacing: .08em;
  color: var(--purple);
  margin-bottom: 12px;
}
.tp-perk b { display: block; font-size: 13.5px; margin-bottom: 7px; color: var(--ink); }
.tp-perk p { font-size: 12px; color: rgba(16,16,20,.55); line-height: 1.55; }
.tp-terms { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tp-terms span {
  border: 1px solid rgba(16,16,20,.18); border-radius: 999px;
  padding: 11px 18px;
  font-size: 13px; color: rgba(16,16,20,.6);
}
.tp-terms b { color: var(--ink); font-weight: 700; }

/* ---------- 05 · method ---------- */
.tp-method-grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 5vw, 90px);
  align-items: start;
}
/* the left item must stretch to the row height or position:sticky has no travel */
.tp-method-left { align-self: stretch; }
.tp-sticky { position: sticky; top: 130px; }
.tp-method-photo {
  margin: 10px 0 0;
  max-width: 360px;
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.tp-method-photo img { width: 100%; display: block; }
.tp-method-right { position: relative; padding: 12px 0 12px 40px; }
.tp-line {
  position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  background: rgba(255,255,255,.07); border-radius: 2px;
}
.tp-line i {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, var(--purple), var(--lavender-2));
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(124,58,237,.6);
  transform: scaleY(0); transform-origin: top;
}
html.no-js .tp-line i, html.reduced .tp-line i { transform: none; }
.tp-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.tp-step { display: flex; gap: 20px; align-items: flex-start; }
.tp-step > span {
  flex: 0 0 auto;
  width: 13px; height: 13px;
  border: 2px solid rgba(167,139,250,.45);
  border-radius: 50%;
  margin-top: 7px;
  transition: background .35s, border-color .35s;
}
.tp-step > span.is-passed { background: var(--purple); border-color: var(--purple); color: #fff; }
.tp-step b {
  display: block;
  font-family: var(--clash); font-weight: 600;
  font-size: clamp(19px, 1.9vw, 25px);
  letter-spacing: .005em; line-height: 1.2;
  margin-bottom: 6px;
}
.tp-step p { color: var(--muted); font-size: 14.5px; max-width: 46ch; }

/* method essence: correction + equipment compressed to two lines */
.tp-essence {
  margin-top: 64px;
  max-width: 880px;
  display: grid; gap: 16px;
  border-left: 3px solid rgba(124,58,237,.5);
  padding-left: 22px;
}
.tp-fix-line { font-size: 16.5px; line-height: 1.65; color: var(--muted); }
.tp-fix-line b { color: var(--text); }
.tp-gear-line { font-size: 13.5px; line-height: 1.6; color: var(--muted-2); }

/* ---------- 06 · comparison: two column-cards, recessed vs elevated ---------- */
.tp-table { border-top: 0; position: relative; }
.tp-thead, .tp-trow {
  display: grid; grid-template-columns: 1fr 1.05fr 1.25fr;
  gap: clamp(14px, 2vw, 28px);
  align-items: stretch;
}
.tp-thead {
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(16,16,20,.42);
}
.tp-thead span, .tp-thead .tp-th-sa em { padding: 0; font-style: normal; }
.tp-thead > span { padding: 18px 14px; }
/* club column: a recessed, matte card */
.tp-thead .tp-th-club {
  background: rgba(16,16,20,.05);
  border: 1px solid rgba(16,16,20,.08); border-bottom: 0;
  border-top: 3px solid rgba(16,16,20,.3);
  border-radius: 16px 16px 0 0;
  padding-left: 32px;
  color: rgba(16,16,20,.5);
}
/* academy column: the elevated white card */
.tp-thead .tp-th-sa {
  position: relative;
  color: var(--purple);
  background: #FBFAF6;
  border: 1px solid rgba(124,58,237,.18); border-bottom: 0;
  border-top: 3px solid var(--purple);
  border-radius: 16px 16px 0 0;
  padding-left: 46px;
}
.tp-vs {
  position: absolute; z-index: 2;
  left: 0; top: 24px;
  transform: translateX(calc(-50% - clamp(7px, 1vw, 14px)));
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-style: normal; font-size: 12.5px; letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(135deg, #17151f 30%, var(--purple));
  border: 3px solid var(--light);
  box-shadow: 0 8px 24px rgba(16,16,20,.25);
}
.tp-dim, .tp-club, .tp-sa { padding: 21px 14px; }
.tp-dim {
  font-weight: 800; font-size: 14.5px;
  border-bottom: 1px solid rgba(16,16,20,.1);
}
.tp-club {
  color: rgba(16,16,20,.6); font-size: 14.5px;
  position: relative; padding-left: 32px; padding-right: 20px;
  background: rgba(16,16,20,.05);
  border-left: 1px solid rgba(16,16,20,.08);
  border-right: 1px solid rgba(16,16,20,.08);
  border-bottom: 1px solid rgba(16,16,20,.04);
  transition: color .35s;
}
.tp-club::before {
  content: ""; position: absolute; left: 14px; top: 27px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid rgba(16,16,20,.35);
}
.tp-sa {
  font-weight: 700; font-size: 14.5px;
  position: relative; padding-left: 46px; padding-right: 24px;
  background: #FBFAF6;
  border-left: 1px solid rgba(124,58,237,.18);
  border-right: 1px solid rgba(124,58,237,.18);
  border-bottom: 1px solid rgba(16,16,20,.05);
  transition: background .35s;
}
.tp-sa::before {
  content: ""; position: absolute; left: 26px; top: 27px;
  width: 9px; height: 9px; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--lavender-2));
  box-shadow: 0 0 10px rgba(124,58,237,.5);
}
.tp-trow:last-child .tp-club {
  border-bottom: 1px solid rgba(16,16,20,.08);
  border-radius: 0 0 16px 16px;
}
.tp-trow:last-child .tp-sa {
  border-bottom: 1px solid rgba(124,58,237,.18);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 24px 50px rgba(16,16,20,.1);
}
.tp-trow:last-child .tp-dim { border-bottom: 0; }
/* hover verdict: club recedes (color only — opacity transitions fight GSAP in Safari), academy brightens */
.tp-trow:hover .tp-club { color: rgba(16,16,20,.38); }
.tp-trow:hover .tp-sa { background: #fff; }
/* mobile-only column labels (the thead is hidden on stacked rows) */
.tp-mob-label { display: none; }
/* compact results block folded into the compare chapter */
.tp-results-mini { margin-top: 76px; }
.tp-results-h {
  font-family: var(--clash); font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15;
  margin-bottom: 12px;
}
.tp-results-p { color: var(--ink-muted); font-size: 15px; max-width: 62ch; margin-bottom: 10px; }
.tp-checks { list-style: none; margin: 0; padding: 0; }
.tp-checks li {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(16,16,20,.1);
}
.tp-checks em { font-style: normal; font-weight: 700; font-size: 15px; color: rgba(16,16,20,.85); }
.tp-check-ic {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(124,58,237,.45);
  display: flex; align-items: center; justify-content: center;
  color: var(--purple);
  background: rgba(124,58,237,.06);
}
.tp-check-ic svg { width: 14px; height: 14px; display: block; }
.tp-checks--grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  max-width: 940px;
}


/* ---------- 08 · apply ---------- */
.tp-apply { position: relative; padding: 130px 0; overflow: hidden; }
.tp-apply-media { position: absolute; inset: 0; z-index: 0; }
.tp-apply-media img {
  width: 100%; height: 114%; margin-top: -3.5%;
  object-fit: cover; object-position: center 30%;
  opacity: .38;
  filter: saturate(.95) brightness(.85);
  will-change: transform;
}
.tp-apply-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,16,.97) 0%, rgba(11,11,16,.6) 38%, rgba(11,11,16,.72) 72%, rgba(11,11,16,.97) 100%),
    radial-gradient(800px 460px at 50% 65%, rgba(124,58,237,.2), transparent 65%);
}
.tp-apply-inner { position: relative; z-index: 2; text-align: center; }
.tp-apply-kicker { justify-content: center; margin-bottom: 30px; }
.tp-open-chip {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 9px 18px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,245,255,.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 28px;
}
.tp-apply-sub { color: rgba(245,245,255,.82); font-size: 16.5px; margin-top: 18px; }
.tp-apply-steps {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1000px;
  margin: 46px auto 42px;
  text-align: left;
}
.tp-astep {
  position: relative;
  background: rgba(11,11,16,.66);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 26px 24px 24px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tp-astep b { display: block; font-size: 16.5px; margin: 12px 0 7px; }
.tp-astep p { font-size: 13.5px; color: var(--muted); }
.tp-dots { position: absolute; top: 26px; right: 22px; display: flex; gap: 5px; }
.tp-dots i { width: 8px; height: 8px; border-radius: 50%; }
.tp-dot-sd { background: var(--purple); box-shadow: 0 0 8px rgba(124,58,237,.7); }
.tp-dot-sl { background: var(--sky); box-shadow: 0 0 8px rgba(56,189,248,.7); }
.tp-apply-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }



.form-photo { margin-top: 6px; }
.form-photo-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* The iOS anti-zoom rule used to live here and lost every fight it picked — it sat
   BEFORE the base field rules and tied them on specificity, so every field still
   computed to 14.5px. It now lives in one block near the end of this file, just
   above the @media print section, where it is both specific enough and last. */




/* parent quotes ride in the same marquee columns as the coach comments */
.pq-note { max-width: 60ch; font-size: 14px; line-height: 1.7; color: var(--muted); margin: 14px 0 0; }
.tst-card.tst-parent p { margin: 0; }
.tst-card.tst-parent p::before {
  content: "\201C";
  display: block;
  font-family: var(--display); font-size: 42px; line-height: .6;
  color: var(--lavender); opacity: .5; margin-bottom: 10px;
}
.tst-card.tst-parent figcaption { margin-top: 16px; }
/* a parent card says "Parent" where an Instagram card shows its handle — same slot,
   same weight, but it never implies a post someone could go looking for */
.tst-who {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lavender-2);
}

/* ---------- safety & supervision ---------- */
.safe-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px; margin-top: 8px;
}
.safe-card {
  background: linear-gradient(180deg, rgba(18,16,32,.85) 0%, rgba(12,11,20,.85) 100%);
  border: 1px solid rgba(147,197,253,.22);
  border-radius: 20px; padding: 26px 26px 24px;
}
.safe-card b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: 21px; line-height: 1.15; color: #DBEAFE; margin-bottom: 12px;
}
.safe-card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.safe-ask { margin: 26px 0 0; font-size: 14px; }
.safe-ask a { color: #93C5FD; text-decoration: none; border-bottom: 1px solid rgba(147,197,253,.4); }
.safe-ask a:hover { color: #DBEAFE; }
@media (max-width: 760px) { .safe-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- payment details ---------- */
.pay-block {
  max-width: 760px; margin: 34px auto 0;
  background: linear-gradient(180deg, rgba(18,16,32,.9) 0%, rgba(12,11,20,.9) 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px; padding: 30px 30px 26px;
}
.tp-sec--light .pay-block { background: rgba(255,255,255,.72); border-color: rgba(16,16,20,.12); }
.pay-title { font-family: var(--display); font-weight: 400; font-size: 26px; margin: 10px 0 10px; }
.pay-intro { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0 0 22px; }
.tp-sec--light .pay-intro { color: var(--ink-muted); }
.pay-rows { margin: 0; border-top: 1px solid rgba(255,255,255,.08); }
.tp-sec--light .pay-rows { border-top-color: rgba(16,16,20,.1); }
.pay-rows > div {
  display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 16px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07);
}
.tp-sec--light .pay-rows > div { border-bottom-color: rgba(16,16,20,.09); }
.pay-rows dt {
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2); align-self: center;
}
.tp-sec--light .pay-rows dt { color: var(--ink-muted); }
.pay-rows dd { margin: 0; font-size: 14.5px; line-height: 1.55; }
.pay-rows code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; letter-spacing: .04em;
  /* an IBAN gets copied by hand off a phone — give it room and let it wrap on word boundaries */
  word-break: break-word;
}
.pay-cash { margin: 16px 0 0; font-size: 14px; font-weight: 700; color: var(--lavender-2); }
.tp-sec--light .pay-cash { color: #B45309; }
.pay-abroad { margin-top: 18px; }
.pay-abroad > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08);
}
.tp-sec--light .pay-abroad > summary { border-top-color: rgba(16,16,20,.1); }
.pay-abroad > summary::-webkit-details-marker { display: none; }
.pay-abroad > summary i {
  width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .3s var(--ease); flex: 0 0 auto;
}
.pay-abroad[open] > summary i { transform: rotate(-135deg); }
.pay-abroad-body p { font-size: 13.5px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; }
.tp-sec--light .pay-abroad-body p { color: var(--ink-muted); }
.pay-corr { width: 100%; border-collapse: collapse; font-size: 13px; }
.pay-corr th {
  text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); padding: 0 10px 8px 0;
}
.pay-corr td { padding: 8px 10px 8px 0; border-top: 1px solid rgba(255,255,255,.07); vertical-align: top; }
.tp-sec--light .pay-corr td { border-top-color: rgba(16,16,20,.09); }
.pay-venue { margin: 18px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.tp-sec--light .pay-venue { color: var(--ink-muted); }
.pay-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted-2); }
@media (max-width: 620px) {
  .pay-block { padding: 24px 20px 20px; border-radius: 18px; }
  .pay-rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* the correspondent table has four columns and no room on a phone — drop the city,
     which the payer never needs to type anywhere */
  .pay-corr th:nth-child(3), .pay-corr td:nth-child(3) { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .tp-perks { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .tp-sec { padding-bottom: 84px; }
  .tp-slate { padding-top: 66px; margin-bottom: 44px; }
  .tp-switch { flex-direction: column; min-height: 0; }
  .tp-door--sd::after { display: none; }
  .tp-door { min-height: 56vh; }
  .tp-door-body { justify-content: flex-end; }
  .tp-door-link { margin-top: 22px; }
  /* text is bottom-anchored on mobile — flip the shades so the solid zone sits under it */
  .tp-door--sd .tp-door-shade {
    background: linear-gradient(0deg, #F1EFE9 0%, #F1EFE9 15%, rgba(241,239,233,.7) 32%, rgba(241,239,233,0) 52%, rgba(16,16,20,.2) 100%);
  }
  .tp-door--sl .tp-door-shade {
    background: linear-gradient(0deg, #0A0E16 0%, #0A0E16 15%, rgba(10,14,22,.7) 32%, rgba(10,14,22,0) 52%, rgba(10,14,22,.3) 100%);
  }
  .tp-prog-grid, .tp-prog--flip,
  .tp-method-grid { grid-template-columns: 1fr; }
  .tp-sticky { position: static; }
  .tp-method-photo { display: none; }
  .tp-prog--flip .tp-prog-media { order: 0; }
#shooting-lab .tp-prog-media .tp-tile img { object-position: center 15%; }
  .tp-prog--flip .tp-prog-info { order: 1; }
  .tp-prog-media .tp-tile { aspect-ratio: 4 / 3; }
  .tp-checks--grid { grid-template-columns: 1fr; }
  .tp-groups { grid-template-columns: 1fr; }
  .tp-apply-steps { grid-template-columns: 1fr; }
  .tp-essence { margin-top: 52px; }
  .tp-combine { margin-top: 72px; }
  .tp-combine-inner p { text-align: center; }
}
@media (max-width: 768px) {
  .tp-stats { grid-template-columns: 1fr 1fr; gap: 26px; }
  .tp-stats .tp-stat:nth-child(3) { grid-column: 1 / -1; }
  .tp-slate-glyph { font-size: 54px; top: 12px; right: 4vw; }
  .tp-thead { display: none; }
  .tp-trow { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; border-bottom: 1px solid rgba(16,16,20,.1); }
  .tp-dim, .tp-club, .tp-sa { border-bottom: 0; padding: 0; }
  .tp-dim { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: rgba(16,16,20,.55); }
  .tp-club {
    background: rgba(16,16,20,.05);
    border: 0; border-left: 3px solid rgba(16,16,20,.3);
    border-radius: 0 10px 10px 0;
    padding: 10px 14px 10px 32px;
  }
  .tp-club::before { left: 13px; top: 16px; }
  .tp-trow:last-child .tp-club { border-radius: 0 10px 10px 0; border-bottom: 0; }
  .tp-sa {
    background: #FBFAF6;
    border: 0; border-left: 3px solid var(--purple);
    border-radius: 0 10px 10px 0;
    padding: 12px 14px 12px 32px;
  }
  .tp-sa::before { left: 13px; top: 18px; }
  .tp-trow:last-child .tp-sa { border-radius: 0 10px 10px 0; box-shadow: none; border-bottom: 0; }
  .tp-mob-label {
    display: block; font-style: normal;
    font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(16,16,20,.4);
    margin: 4px 0 -2px;
  }
  .tp-mob-label--sa { color: var(--purple); }
  .tp-perks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tp-hero { padding-top: calc(var(--topbar-h) + 104px); }
  .tp-hero-sub { margin-top: 18px; }
  .tp-stats { margin-top: 44px; }
  .tp-perks { grid-template-columns: 1fr; }
  .tp-terms span { width: 100%; }
  .tp-door { min-height: 62vh; }
  .tp-combine-inner { flex-direction: column; gap: 18px; }
}

/* ==================== CAMPS PAGE (cp-) ==================== */
/* Three camps, three temperatures on one purple-family site. Scoped accents
   ride the same --acc machinery as the training chapters. Dashed ice hairlines
   are RESERVED page-wide for being-finalized winter content. */
.camp--wi { --acc: #93C5FD; --acc-2: #DBEAFE; --acc-rgb: 147, 197, 253; background: #0B1220; }
.camp--su { --acc: #B45309; --acc-2: #F59E0B; --acc-rgb: 217, 119, 6; }
.camp--sh { --acc: #38BDF8; --acc-2: #7DD3FC; --acc-rgb: 56, 189, 248; }
.camp--wi .mega-title em {
  background: linear-gradient(120deg, #DBEAFE, #93C5FD 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.camp--su .mega-title.dark em {
  background: linear-gradient(120deg, #B45309, #F59E0B);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.camp--sh .mega-title em {
  background: linear-gradient(120deg, var(--sky-2), var(--sky) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* frost veil over the winter slate */
.camp--wi .tp-slate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 340px at 80% 0%, rgba(219,234,254,.06), transparent 65%);
}

/* ---------- hero ---------- */
.tp-hero.cp-hero { padding-bottom: 40px; }
.cp-hero-shade {
  background:
    linear-gradient(180deg, rgba(11,11,16,.78) 0%, rgba(11,11,16,.38) 45%, rgba(11,11,16,.96) 100%),
    radial-gradient(900px 520px at 16% 82%, rgba(147,197,253,.14), transparent 65%);
}
.cp-title { max-width: 14ch; }

/* the departures board */
.cp-board .fl, .cp-cd .fl { font-style: normal; }
.cp-board {
  margin-top: 40px;
  background: #101018;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 10px 22px 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  overflow: hidden;
}
.cp-board-head, .cp-brow {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 1.4fr) max-content;
  gap: clamp(12px, 2vw, 30px);
  align-items: center;
}
.cp-board-head {
  padding: 12px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245,245,255,.4);
}
.cp-brow {
  position: relative;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  transition: background .3s;
}
.cp-brow:last-child { border-bottom: 0; }
.cp-brow:hover { background: rgba(255,255,255,.025); }
.cp-brow.is-next { background: rgba(147,197,253,.05); }
.cp-brow.is-next::before {
  content: ""; position: absolute; left: -22px; top: 0; bottom: 0; width: 3px;
  background: var(--row-acc, var(--lavender));
  box-shadow: 0 0 12px rgba(147,197,253,.5);
}
.cp-brow[data-camp="winter"] { --row-acc: #93C5FD; }
.cp-brow[data-camp="summer"] { --row-acc: #F59E0B; }
.cp-brow[data-camp="shooting"] { --row-acc: #38BDF8; }
.cp-bcell { display: flex; flex-wrap: nowrap; gap: 2px; min-height: 40px; align-items: center; }
.cp-bcell .fl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 34px; padding: 0 2px;
  background: #15151E;
  background-image: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.05) 49%, rgba(0,0,0,.32) 50%, rgba(0,0,0,0) 58%);
  border-radius: 4px;
  font-family: var(--display); font-weight: 400;
  font-size: 19px; line-height: 1; letter-spacing: .02em;
  color: var(--light);
  backface-visibility: hidden;
}
.cp-bcell .fl.sp { background: transparent; background-image: none; min-width: 9px; }
.cp-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-style: normal;
  border-radius: 999px; padding: 6px 13px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid rgba(var(--st-rgb, 167, 139, 250), .45);
  color: var(--st-c, var(--lavender-2));
  white-space: nowrap;
}
.cp-status[data-st="next"] { --st-rgb: 147, 197, 253; --st-c: #DBEAFE; background: rgba(147,197,253,.12); }
.cp-status[data-st="waitlist"] { --st-rgb: 147, 197, 253; --st-c: #BFDBFE; }
.cp-status[data-st="enrolling"] { --st-rgb: 74, 222, 128; --st-c: #86EFAC; }
.cp-status[data-st="live"] { --st-rgb: 251, 191, 36; --st-c: #FCD34D; background: rgba(251,191,36,.1); }
.cp-status[data-st="ended"] { --st-rgb: 148, 163, 184; --st-c: #94A3B8; }
.cp-status i {
  font-style: normal; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: currentColor;
}
.cp-brow.is-next .cp-status i, .cp-kick-dot { animation: pulse 2.2s infinite; }
.cp-next-flag {
  position: absolute; top: -1px; right: 0;
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: #0B1220;
  background: linear-gradient(90deg, #DBEAFE, #93C5FD);
  border-radius: 0 0 8px 8px;
  padding: 4px 12px;
  display: none;
}
.cp-brow.is-next .cp-next-flag { display: block; }

/* flap countdown */
.cp-count { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); flex-wrap: wrap; margin-top: 26px; }
.cp-count-tiles { display: flex; gap: 16px; }
.cp-cd { text-align: center; }
.cp-cd b { display: flex; gap: 2px; justify-content: center; }
.cp-cd b .fl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 46px;
  background: #15151E;
  background-image: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.05) 49%, rgba(0,0,0,.32) 50%, rgba(0,0,0,0) 58%);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  font-family: var(--display); font-weight: 400;
  font-size: 27px; line-height: 1;
  color: var(--light);
  backface-visibility: hidden;
}
.cp-cd > span {
  display: block; margin-top: 7px;
  font-size: 10px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted-2);
}
.cp-count-cap { font-size: 13.5px; font-weight: 600; color: var(--muted); max-width: 32ch; }

/* sticky camp subnav (below-rail viewports) */
.cp-subnav {
  position: sticky; top: 70px; z-index: 350;
  display: flex; gap: 8px;
  padding: 10px clamp(16px, 3vw, 36px);
  background: rgba(11,11,16,.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  overflow-x: auto;
  scrollbar-width: none;
}
.cp-subnav::-webkit-scrollbar { display: none; }
@media (min-width: 1440px) { .cp-subnav { display: none; } }
.cp-dossier, .cp-mountain, .cp-sheet-sec, .tp-sec--switch, .cp-faq, .cp-apply { scroll-margin-top: 132px; }
.cp-subnav a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 8px 15px;
  text-decoration: none;
  transition: border-color .3s, background .3s;
}
.cp-subnav a i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ch-acc, var(--lavender));
  flex: 0 0 auto;
}
.cp-subnav a[data-camp="winter"] { --ch-acc: #93C5FD; }
.cp-subnav a[data-camp="summer"] { --ch-acc: #F59E0B; }
.cp-subnav a[data-camp="shooting"] { --ch-acc: #38BDF8; }
.cp-subnav a b { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; }
.cp-subnav a span { font-size: 11px; color: var(--muted-2); white-space: nowrap; }
.cp-subnav a.active { border-color: rgba(var(--ch-acc-rgb, 167,139,250), .0); background: rgba(255,255,255,.07); border-color: var(--ch-acc); }

/* ---------- triptych doors ---------- */
.cp-triptych { min-height: 66vh; }
.cp-door { flex-basis: 33.333%; }
@media (hover: hover) { .cp-door:hover { flex-basis: 42%; } }
.cp-door--wi, .cp-door--wi:hover { background: #0B1220; color: var(--text); }
.cp-door--sh > img { object-position: 50% 14%; }
.cp-door--wi .tp-door-shade { background: linear-gradient(180deg, #0B1220 0%, #0B1220 15%, rgba(11,18,32,.7) 30%, rgba(11,18,32,0) 48%, rgba(11,18,32,.08) 76%, rgba(11,18,32,.5) 100%); }
.cp-door--su, .cp-door--su:hover { background: var(--light); color: var(--ink); }
.cp-door--su .tp-door-shade { background: linear-gradient(180deg, #F1EFE9 0%, #F1EFE9 15%, rgba(241,239,233,.7) 30%, rgba(241,239,233,0) 48%, rgba(16,16,20,.04) 76%, rgba(16,16,20,.34) 100%); }
.cp-door--sh, .cp-door--sh:hover { background: #0A0E16; color: var(--text); }
.cp-door--sh .tp-door-shade { background: linear-gradient(180deg, #0A0E16 0%, #0A0E16 15%, rgba(10,14,22,.7) 30%, rgba(10,14,22,0) 48%, rgba(10,14,22,.08) 76%, rgba(10,14,22,.46) 100%); }
/* seams: winter→summer ice→gold, summer→shooting gold→sky */
.cp-door--wi::after, .cp-door--su::after {
  content: ""; position: absolute; z-index: 3;
  right: 0; top: 0; bottom: 0; width: 1px;
  pointer-events: none;
}
.cp-door--wi::after { background: linear-gradient(180deg, #93C5FD, #F59E0B); }
.cp-door--su::after { background: linear-gradient(180deg, #F59E0B, #38BDF8); }
.cp-door--wi .tp-door-kicker { color: #93C5FD; }
.cp-door--su .tp-door-kicker { color: #B45309; }
.cp-door--sh .tp-door-kicker { color: var(--sky); }
.cp-door .tp-door-name { font-size: clamp(34px, 3.4vw, 54px); }
.cp-door--wi .tp-door-chips span { border: 1px solid rgba(147,197,253,.4); color: #DBEAFE; background: rgba(11,18,32,.5); }
.cp-door--su .tp-door-chips span { border: 1px solid rgba(16,16,20,.3); color: rgba(16,16,20,.8); background: rgba(241,239,233,.55); }
.cp-door--sh .tp-door-chips span { border: 1px solid rgba(125,211,252,.4); color: var(--sky-2); background: rgba(10,14,22,.5); }
.cp-door .cp-chip-tbd, .cp-chip-tbd {
  border-style: dashed !important;
}
.cp-door--wi .tp-door-link { color: #BFDBFE; background: rgba(11,18,32,.62); border: 1px solid rgba(147,197,253,.35); }
.cp-door--su .tp-door-link { color: #B45309; background: rgba(241,239,233,.82); border: 1px solid rgba(180,83,9,.3); }
.cp-door--sh .tp-door-link { color: var(--sky); background: rgba(10,14,22,.62); border: 1px solid rgba(56,189,248,.35); }
.cp-door-status { margin-bottom: 14px; }

/* ---------- dossier layout ---------- */
.cp-dossier-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3.4fr);
  gap: clamp(36px, 4vw, 72px);
  align-items: start;
}
.cp-flow { min-width: 0; }
.cp-flow > .tp-blocklbl { margin-top: 68px; }
.cp-flow > .tp-blocklbl:first-child { margin-top: 0; }

/* fact file — the boarding pass */
.cp-pass {
  position: sticky; top: 110px;
  border-radius: 20px;
  padding: 24px 24px 22px;
  background: linear-gradient(180deg, #12101B 0%, #0B0A12 100%);
  border: 1px solid rgba(var(--acc-rgb, 167, 139, 250), .3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.tp-sec--light .cp-pass {
  background: #FBFAF6;
  border-color: rgba(16,16,20,.12);
  box-shadow: 0 24px 60px rgba(16,16,20,.12);
}
.cp-pass-topline {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--acc, var(--purple)), var(--acc-2, var(--lavender-2)));
}
.cp-pass-head {
  display: flex; align-items: center; justify-content: flex-end;
  margin-bottom: 14px;
}
.cp-pass-head b {
  font-family: var(--display); font-weight: 400;
  font-size: 26px; letter-spacing: .08em;
  color: var(--acc, var(--lavender));
}
.cp-pass-rows { border-top: 1px solid rgba(255,255,255,.09); }
.tp-sec--light .cp-pass-rows { border-top-color: rgba(16,16,20,.1); }
.cp-pass-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.tp-sec--light .cp-pass-row { border-bottom-color: rgba(16,16,20,.08); }
.cp-pass-row span {
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2);
  flex: 0 0 auto;
}
.tp-sec--light .cp-pass-row span { color: rgba(16,16,20,.45); }
.cp-pass-row b { font-size: 13.5px; font-weight: 700; text-align: right; }
.cp-pass-row.cp-row-tbd b {
  color: var(--acc-2, var(--lavender-2));
  font-weight: 600; font-size: 12.5px;
  border: 1px dashed rgba(var(--acc-rgb), .45);
  border-radius: 8px; padding: 3px 9px;
}
.cp-pass .tp-ticks { margin: 14px 0; }
.cp-pass-cta { width: 100%; justify-content: center; }
.cp-pass-note { margin-top: 12px; font-size: 12px; color: var(--muted-2); text-align: center; }
.tp-sec--light .cp-pass-note { color: rgba(16,16,20,.5); }
.cp-pass-x {
  display: block; margin-top: 10px; text-align: center;
  font-size: 12.5px; font-weight: 700;
  color: var(--acc-2, var(--lavender));
}
.tp-sec--light .cp-pass-x { color: var(--acc, var(--purple)); }

/* winter confirmed list + skeleton */
.cp-skeleton-wrap { position: relative; max-width: 560px; }
.cp-clock { position: relative; padding-left: 40px; margin-top: 8px; }
.cp-clock-line {
  position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px;
  background: rgba(255,255,255,.08); border-radius: 2px;
}
.tp-sec--light .cp-clock-line { background: rgba(16,16,20,.12); }
.cp-clock-fill {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(180deg, #FCD34D, #38BDF8 55%, #7C3AED);
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(var(--acc-rgb, 124, 58, 237), .5);
  transform: scaleY(0); transform-origin: top;
}
html.no-js .cp-clock-fill, html.reduced .cp-clock-fill { transform: none; }
.cp-clock-stop {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 0;
}
.cp-clock-stop > span {
  flex: 0 0 auto;
  font-family: var(--display); font-weight: 400;
  font-size: 14px; letter-spacing: .06em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px; padding: 7px 9px;
  transition: color .35s, border-color .35s, background .35s;
}
.tp-sec--light .cp-clock-stop > span { border-color: rgba(16,16,20,.18); color: rgba(16,16,20,.5); }
.cp-clock-stop > span.is-passed {
  background: var(--acc, var(--purple));
  border-color: var(--acc, var(--purple));
  color: #fff;
}
.camp--su .cp-clock-stop > span.is-passed { background: #B45309; border-color: #B45309; }
.cp-clock-stop em { font-style: normal; font-size: 14.5px; font-weight: 600; }
.cp-clock-stop .cp-diff {
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc-2, var(--lavender-2));
  border: 1px solid rgba(var(--acc-rgb), .4);
  border-radius: 999px; padding: 3px 8px;
  white-space: nowrap;
}
.cp-clock--skeleton .cp-clock-line { border-left: 2px dashed rgba(219,234,254,.3); background: none; width: 0; }
.cp-clock--skeleton .cp-clock-stop > span { border-style: dashed; border-color: rgba(219,234,254,.35); color: rgba(219,234,254,.5); }
.cp-clock--skeleton .cp-clock-stop em { color: var(--muted-2); font-weight: 600; }
.cp-skeleton-note { margin-top: 10px; font-size: 13px; color: var(--muted-2); max-width: 46ch; }
.cp-stamp {
  display: inline-block; margin-top: 22px;
  transform: rotate(-6deg);
  border: 2px dashed rgba(219,234,254,.5);
  border-radius: 10px;
  padding: 9px 18px;
  font-family: var(--display); font-weight: 400;
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  color: #BFDBFE;
}
html.reduced .cp-stamp { transform: none; }

/* dossier media */
.cp-media-tile { margin-top: 34px; max-width: 560px; }
.cp-media-tile video, .cp-media-tile img { width: 100%; display: block; }
.cp-tile-tag {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(245,245,255,.92);
  background: rgba(11,11,16,.55);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 6px 13px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* strata — editorial rows, no boxes */
.cp-strata { display: grid; max-width: 660px; }
.cp-stratum {
  padding: 20px 2px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.tp-sec--light .cp-stratum { border-bottom-color: rgba(16,16,20,.12); }
.cp-stratum b {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--clash); font-weight: 600;
  font-size: clamp(18px, 1.8vw, 22px);
  margin-bottom: 6px;
}
.cp-stratum b::before {
  content: ""; flex: 0 0 20px; height: 2px; border-radius: 2px;
  background: var(--acc, var(--purple));
}
.cp-stratum p { font-size: 13.5px; color: var(--muted); line-height: 1.65; padding-left: 34px; }
.tp-sec--light .cp-stratum p { color: var(--ink-muted); }
.cp-strata-cap { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--muted); font-style: italic; }
.tp-sec--light .cp-strata-cap { color: rgba(16,16,20,.55); }


/* perks — a quiet two-column ledger, no cards */
.cp-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; max-width: 780px; }
.cp-perks .tp-perk {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  display: flex; align-items: center; gap: 13px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(16,16,20,.1);
  transition: none;
}
.cp-perks .tp-perk:hover { transform: none; box-shadow: none; }
.camp--sh .cp-perks .tp-perk, .camp--wi .cp-perks .tp-perk { border-bottom-color: rgba(255,255,255,.08); }
.cp-perks .tp-perk::before {
  content: ""; flex: 0 0 16px; height: 2px; border-radius: 2px;
  background: rgba(var(--acc-rgb, 124, 58, 237), .65);
}
.cp-perks .tp-perk b { font-size: 14px; margin: 0; color: var(--ink); }
.camp--sh .cp-perks .tp-perk b, .camp--wi .cp-perks .tp-perk b { color: var(--text); }
.cp-perk-ai span {
  margin-left: auto;
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc, var(--purple));
  border: 1px solid rgba(var(--acc-rgb), .4);
  border-radius: 999px; padding: 2px 8px;
  white-space: nowrap;
}

/* the hardware — real trophy & medal renders + engraved metal type */
.cpx-awards {
  display: grid; grid-template-columns: clamp(150px, 20vw, 230px) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 60px);
  align-items: center;
  max-width: 780px;
  margin-top: 12px;
}
.cpx-hardware { margin: 0; position: relative; display: flex; justify-content: center; }
.cpx-hardware::before {
  content: ""; position: absolute; inset: -8% -22%;
  background: radial-gradient(50% 52% at 50% 58%, rgba(245,158,11,.22), transparent 72%);
  pointer-events: none;
}
.camp--wi .cpx-hardware::before { background: radial-gradient(50% 52% at 50% 58%, rgba(147,197,253,.2), transparent 72%); }
.cpx-hardware--sky::before { background: radial-gradient(50% 52% at 50% 58%, rgba(56,189,248,.22), transparent 72%) !important; }
.cpx-hardware img {
  position: relative;
  max-height: 300px; width: auto;
  filter: drop-shadow(0 26px 46px rgba(0,0,0,.5));
}
.tp-sec--light .cpx-hardware img { filter: drop-shadow(0 24px 42px rgba(16,16,20,.3)); }
.cpx-awards-list { min-width: 0; }
.cpx-award {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 19px; letter-spacing: .03em; line-height: 1.2;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: var(--met, linear-gradient(105deg, #8a5a12 0%, #d99a2b 34%, #f7df9a 50%, #c07f1a 68%, #8a5a12 100%));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.tp-sec--light .cpx-award { border-bottom-color: rgba(16,16,20,.14); }
.cpx-award--top { font-size: clamp(27px, 3vw, 40px); padding: 2px 0 12px; }
.cpx-award-sub {
  font-size: 11.5px; letter-spacing: .06em; color: var(--muted-2);
  padding-bottom: 12px; margin-top: -4px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.camp--wi .cpx-award { --met: linear-gradient(105deg, #56779e 0%, #9cc3e8 34%, #eef6ff 50%, #7fa8d4 68%, #56779e 100%); }
.camp--sh .cpx-award { --met: linear-gradient(105deg, #276284 0%, #57b6e0 34%, #dcf4ff 50%, #3f95c4 68%, #276284 100%); }
.tp-sec--light .cpx-award { --met: linear-gradient(105deg, #5c3a06 0%, #8a5a12 34%, #c0821c 50%, #7a4e0e 68%, #5c3a06 100%); }

/* gallery + misc */
.cp-gallery { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; margin-top: 60px; }
.cp-gallery .tp-tile { aspect-ratio: 3 / 2; margin: 0; }
.cp-gallery figure:first-child { grid-row: span 2; aspect-ratio: auto; }

/* winter dossier: AM/PM blocks, emphasis line, coach line, package plates, faq */
.cp-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); max-width: 900px; }
.cp-block { border-top: 2px solid rgba(var(--acc-rgb, 147, 197, 253), .55); padding-top: 18px; }
.cp-block-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cp-block-head i {
  font-style: normal; font-family: var(--display);
  font-size: 12px; letter-spacing: .14em;
  color: var(--acc, var(--lavender));
  border: 1px solid rgba(var(--acc-rgb), .4);
  border-radius: 999px; padding: 4px 10px;
}
.cp-block-head b { font-family: var(--clash); font-weight: 600; font-size: 18px; }
.cp-block-sub { font-size: 13px; color: var(--muted-2); margin-bottom: 10px; }
@media (max-width: 760px) { .cp-blocks { grid-template-columns: 1fr; } }

/* winter registration form — the front door for the open camp */
.cp-reg {
  margin-top: 42px;
  border: 1px solid rgba(147, 197, 253, .4);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(147, 197, 253, .08), rgba(15, 15, 22, .4));
  padding: 30px 28px 26px;
  max-width: 680px;
  scroll-margin-top: 130px;
}
.cp-reg-title { font-family: var(--clash); font-weight: 700; font-size: 21px; letter-spacing: .01em; }
.cp-reg-sub { margin: 8px 0 22px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.cp-reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.cp-reg-form label, .tp-app-form label { display: block; }
.cp-reg-form label > span, .tp-app-form label > span, .cp-reg-pkgs legend {
  display: block;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 7px;
}
.cp-reg-form input[type="text"], .cp-reg-form input[type="tel"],
.cp-reg-form input[type="email"], .cp-reg-form input[type="number"],
.cp-reg-form textarea,
.tp-app-form input, .tp-app-form select {
  width: 100%;
  font-family: var(--font); font-size: 14.5px; font-weight: 600;
  color: var(--text);
  background: rgba(11, 11, 16, .55);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 12px 15px;
  transition: border-color .3s;
}
.cp-reg-form input:focus, .cp-reg-form textarea:focus { border-color: #93C5FD; }
.tp-app-form select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted-2) 50%), linear-gradient(135deg, var(--muted-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.tp-app-form input:focus, .tp-app-form select:focus { border-color: var(--lavender-2); }
.tp-appform { border-color: rgba(167, 139, 250, .4); background: linear-gradient(180deg, rgba(124, 58, 237, .1), rgba(15, 15, 22, .45)); max-width: 760px; margin-left: auto; margin-right: auto; text-align: left; }
.tp-appform .cp-reg-grid { grid-template-columns: 1fr 1fr; }
.tp-appform .cp-wait-done { color: var(--lavender-2); }
.tp-appform .btn { margin-top: 20px; }
@media (max-width: 640px) { .tp-appform .cp-reg-grid { grid-template-columns: 1fr; } }
.cp-reg-form textarea { resize: vertical; }
.cp-reg-pkgs { border: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.cp-reg-pill {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 13px 16px;
  cursor: pointer;
  font-size: 13.5px; font-weight: 600; line-height: 1.45;
  transition: border-color .25s, background .25s;
}
.cp-reg-pill:has(input:checked) { border-color: #93C5FD; background: rgba(147, 197, 253, .1); }
.cp-reg-pill input { accent-color: #93C5FD; flex: 0 0 auto; width: 17px; height: 17px; }
.cp-reg-notelbl { margin-top: 16px; }
.cp-reg-form .btn { margin-top: 20px; }
.cp-reg .cp-wait-alt { margin-top: 14px; }
.cp-reg .cp-wait-done { font-size: 14px; font-weight: 700; color: #93C5FD; margin-top: 12px; }
@media (max-width: 640px) {
  .cp-reg { padding: 24px 18px 22px; }
  .cp-reg-grid { grid-template-columns: 1fr; }
  .cp-reg-form .btn, .tp-app-form .btn { width: 100%; justify-content: center; }
}

/* the full-program expander — depth folded behind one elegant row */
.cp-more { margin-top: 46px; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.tp-sec--light .cp-more { border-color: rgba(16,16,20,.14); }
.cp-more summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 2px;
  font-family: var(--clash); font-weight: 600; font-size: 17px;
  color: var(--acc-2, var(--lavender-2));
}
.tp-sec--light .cp-more summary { color: var(--acc, var(--purple)); }
.cp-more summary::-webkit-details-marker { display: none; }
.cp-more summary i {
  flex: 0 0 auto; width: 12px; height: 12px; position: relative;
  transition: transform .35s var(--ease);
}
.cp-more summary i::before, .cp-more summary i::after {
  content: ""; position: absolute; background: currentColor; border-radius: 2px;
}
.cp-more summary i::before { inset: 5px 0; }
.cp-more summary i::after { inset: 0 5px; transition: transform .35s var(--ease); }
.cp-more[open] summary i { transform: rotate(90deg); }
.cp-more[open] summary i::after { transform: scaleY(0); }
.cp-more-body { padding: 4px 0 40px; }
.cp-more-body.tp-results-mini { margin-top: 0; }
.cp-more-body .tp-method-grid { margin-top: 18px; }
.cp-more-body .tp-groups { margin-top: 8px; }
.cp-more-body .tp-line i { transform: scaleY(1); }
.cp-more-body .cp-clock-fill { transform: scaleY(1); }
.cp-more-body > .tp-blocklbl:first-child { margin-top: 10px; }

/* waitlist card — the July camps collect emails here */
.cp-wait {
  margin-top: 46px;
  border: 1px solid rgba(var(--acc-rgb, 124, 58, 237), .35);
  border-radius: 20px;
  background: rgba(var(--acc-rgb, 124, 58, 237), .06);
  padding: 26px 28px;
  max-width: 620px;
  scroll-margin-top: 130px;
}
.cp-wait-kick {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acc, var(--purple));
  margin-bottom: 10px;
}
.camp--sh .cp-wait-kick { color: var(--sky-2); }
.cp-wait > b { display: block; font-size: 16.5px; line-height: 1.5; margin-bottom: 6px; }
.cp-wait-price { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 16px; }
.tp-sec--light .cp-wait-price { color: rgba(16,16,20,.55); }
.cp-wait-form { display: flex; gap: 10px; flex-wrap: wrap; }
.cp-wait-form input {
  flex: 1 1 220px; min-width: 0;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  color: var(--text);
  background: rgba(11,11,16,.5);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 13px 20px;
  transition: border-color .3s;
}
.cp-wait-form input:focus { border-color: var(--acc, var(--purple)); }
.tp-sec--light .cp-wait-form input { background: #FBFAF6; color: var(--ink); border-color: rgba(16,16,20,.2); }
.cp-wait-form input::placeholder { color: var(--muted-2); }
.tp-sec--light .cp-wait-form input::placeholder { color: rgba(16,16,20,.4); }
.cp-wait-alt { margin-top: 12px; font-size: 12.5px; color: var(--muted-2); }
.tp-sec--light .cp-wait-alt { color: rgba(16,16,20,.5); }
.cp-wait-alt a { font-weight: 700; color: var(--acc, var(--purple)); }
.camp--sh .cp-wait-alt a { color: var(--sky-2); }
.cp-wait-done.is-on { display: block; }

/* essentials checklist spacing */
.cp-esse { margin-top: 6px; max-width: 620px; }

/* winter dossier — plates, emphasis line, terms (ice identity) */
.cp-wplates { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; max-width: 900px; }
.cp-wplate {
  width: 100%;
  background: linear-gradient(180deg, #0E1420 0%, #0A0E16 100%);
  border: 1px solid rgba(var(--acc-rgb, 147, 197, 253), .3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 10px rgba(0,0,0,.4);
}
.cp-wplate .tp-plate-row { border-top-color: rgba(255,255,255,.09); }
.cp-wplate .tp-plate-row i, .cp-wplate .tp-plate-meta { color: var(--muted-2); }
.cp-eb b { color: #DBEAFE; }
.cp-eb span { color: var(--acc-2, #DBEAFE); }
.cp-wline {
  max-width: 660px;
  margin: 36px 0 10px;
  padding-left: 18px;
  border-left: 3px solid rgba(var(--acc-rgb, 147, 197, 253), .55);
  font-weight: 600; font-size: 16.5px; line-height: 1.6;
  color: rgba(245,245,255,.92);
}
.cp-coachline { max-width: 680px; margin-top: 44px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.cp-coachline a { font-weight: 700; color: var(--acc-2, var(--lavender)); }
.cp-wterms {
  max-width: 720px;
  margin-top: 22px;
  border: 1px dashed rgba(219,234,254,.35);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 13px; color: var(--muted-2); line-height: 1.65;
}
.cp-ebnote { display: block; font-style: normal; font-size: 11px; color: #1D4ED8; margin-top: 3px; }

/* slate cutouts — the player breaks out of the chapter header */
.cpx-cut {
  position: absolute; z-index: 2;
  /* the offset has to track the page gutter, or on ultra-wide screens the figure
     drifts out of the content column instead of hanging beside the headline */
  right: max(clamp(10px, 5vw, 100px), calc((100vw - 1400px) / 2)); bottom: -34px;
  margin: 0; pointer-events: none;
}
.cpx-cut::before {
  content: ""; position: absolute; inset: -14% -28%;
  background: radial-gradient(50% 55% at 50% 62%, rgba(217,119,6,.24), transparent 72%);
}
.cpx-cut--sh::before { background: radial-gradient(50% 55% at 50% 62%, rgba(56,189,248,.2), transparent 72%); }
.cpx-cut img {
  position: relative;
  height: clamp(280px, 25vw, 390px); width: auto;
  filter: drop-shadow(0 30px 55px rgba(0,0,0,.4));
}
.cpx-cut--sh img { height: clamp(300px, 27vw, 430px); }
@media (min-width: 1101px) {
  .camp--su .tp-slate .training-head, .camp--sh .tp-slate .training-head { padding-right: clamp(240px, 24vw, 400px); }
}
@media (max-width: 1100px) { .cpx-cut { display: none; } }

/* winter kicker extras */
.cp-kick-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--acc, var(--lavender));
  margin-right: -6px;
}
.cp-kick-cd {
  font-style: normal; font-family: var(--font);
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  color: var(--acc-2, var(--lavender-2));
  border: 1px solid rgba(var(--acc-rgb, 167,139,250), .4);
  border-radius: 999px; padding: 5px 12px;
  margin-left: 6px;
}
.cp-kick-cd b { font: inherit; }

/* shot chart */
.cp-chart-wrap { max-width: 680px; }
.cp-chart { display: block; width: 100%; height: auto; margin-bottom: 8px; }
.cp-ch-line { stroke: rgba(56,189,248,.3); stroke-width: 2; fill: none; }
.cp-ch-arc { stroke: #38BDF8; stroke-width: 3; stroke-linecap: round; }
.cp-ch-dots circle { fill: #38BDF8; }
.cp-ch-dots .cp-ch-miss { fill: none; stroke: rgba(148,163,184,.7); stroke-width: 2.5; }
.cp-chart-rows { display: grid; gap: 8px; margin-top: 16px; }
.cp-chart-rows p {
  margin: 0; padding: 9px 0 9px 14px;
  border-left: 2px solid rgba(56,189,248,.45);
  font-size: 13.5px; font-weight: 600; color: rgba(245,245,255,.85);
}

/* checks on dark camp chapters (base .tp-checks colors are ink-on-cream) */
.cp-checks em, .cp-mchecks em { color: rgba(245,245,255,.9); }
.cp-checks li, .cp-mchecks li { border-bottom-color: rgba(255,255,255,.12); }

/* ---------- mountain ---------- */
.cp-mountain { background: #0B0B10; }
.cp-mountain-grid {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.cp-alt { position: sticky; top: 130px; text-align: center; }
.cp-alt-scale {
  position: relative;
  width: 4px; height: 300px;
  margin: 0 auto 14px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
}
.cp-alt-scale i {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  display: block;
  background: linear-gradient(0deg, var(--purple), var(--lavender-2));
  border-radius: 3px;
  transform: scaleY(0); transform-origin: bottom;
}
html.no-js .cp-alt-scale i, html.reduced .cp-alt-scale i { transform: none; }
.cp-alt b {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: 26px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cp-alt-lbl {
  display: block; margin-top: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted-2);
}
.cp-mountain-info .cp-media-tile { margin-top: 0; max-width: 100%; }
.cp-mchecks { margin-top: 30px; max-width: 720px; }
.cp-winter-note {
  margin-top: 26px;
  border-left: 3px solid #93C5FD;
  background: rgba(147,197,253,.07);
  border-radius: 0 12px 12px 0;
  padding: 14px 20px;
  font-size: 13.5px; color: var(--muted);
  max-width: 640px;
}

/* ---------- parent sheet ---------- */
.cp-sheet { border-top: 1.5px solid rgba(16,16,20,.18); }
.cp-srow {
  display: grid; grid-template-columns: 1fr 1.1fr 1.1fr 1.1fr;
  gap: clamp(10px, 1.6vw, 24px);
  align-items: stretch;
}
.cp-slbl {
  padding: 18px 10px;
  font-weight: 800; font-size: 13.5px;
  border-bottom: 1px solid rgba(16,16,20,.1);
}
.cp-scol {
  padding: 18px 16px;
  font-size: 13.5px; color: rgba(16,16,20,.75);
  background: rgba(16,16,20,.045);
  border-left: 1px solid rgba(16,16,20,.08);
  border-right: 1px solid rgba(16,16,20,.08);
  border-bottom: 1px solid rgba(16,16,20,.05);
  transition: background .3s;
}
.cp-srow:hover .cp-scol { background: rgba(16,16,20,.07); }
.cp-shead .cp-scol {
  background: rgba(16,16,20,.05);
  border-top: 3px solid var(--col-acc, var(--purple));
  border-radius: 14px 14px 0 0;
  padding-top: 16px;
}
.cp-scol--wi { --col-acc: #93C5FD; --col-rgb: 147,197,253; }
.cp-scol--su { --col-acc: #F59E0B; --col-rgb: 217,119,6; }
.cp-scol--sh { --col-acc: #38BDF8; --col-rgb: 56,189,248; }
.cp-shead .cp-scol b {
  display: block;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 19px; letter-spacing: .02em;
  color: var(--ink);
}
.cp-shead .cp-scol i { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: rgba(16,16,20,.5); margin: 3px 0 9px; }
.cp-sheet .cp-status { font-size: 10px; padding: 4px 10px; }
.cp-sheet .cp-status[data-st="waitlist"], .cp-sheet .cp-status[data-st="next"] { color: #1D4ED8; --st-rgb: 59,130,246; background: rgba(147,197,253,.15); }
.cp-sheet .cp-status[data-st="enrolling"] { color: #15803D; --st-rgb: 34,197,94; background: rgba(134,239,172,.15); }
.cp-door--su .cp-status[data-st="waitlist"], .cp-door--su .cp-status[data-st="next"],
.tp-sec--light .cp-pass .cp-status[data-st="waitlist"], .tp-sec--light .cp-pass .cp-status[data-st="next"] { color: #1D4ED8; --st-rgb: 59,130,246; background: rgba(147,197,253,.15); }
.cp-door--su .cp-status[data-st="enrolling"],
.tp-sec--light .cp-pass .cp-status[data-st="enrolling"] { color: #15803D; --st-rgb: 34,197,94; background: rgba(134,239,172,.15); }
.cp-door--su .cp-status[data-st="live"],
.tp-sec--light .cp-pass .cp-status[data-st="live"] { color: #B45309; --st-rgb: 245,158,11; background: rgba(251,191,36,.14); }
.cp-door--su .cp-status[data-st="ended"],
.tp-sec--light .cp-pass .cp-status[data-st="ended"] { color: rgba(16,16,20,.55); --st-rgb: 100,116,139; }
.cp-cell-tbd {
  color: #1D4ED8;
  font-size: 12.5px;
}
.cp-cell-tbd::after { content: ""; display: block; margin-top: 6px; border-bottom: 1px dashed rgba(59,130,246,.4); width: 60%; }
.cp-price { font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: .01em; }
.cp-sctas .cp-scol {
  border-bottom: 1px solid rgba(16,16,20,.08);
  border-radius: 0 0 14px 14px;
  padding: 18px 16px 20px;
}
.cp-sctas .btn { width: 100%; justify-content: center; font-size: 13px; padding: 12px 18px; }
/* the NEXT column rides elevated like the training table's academy card */
.cp-srow .cp-scol.is-next { background: #FBFAF6; }
.cp-shead .cp-scol.is-next { background: #FBFAF6; box-shadow: 0 -6px 24px rgba(16,16,20,.06); }
.cp-sctas .cp-scol.is-next { box-shadow: 0 24px 50px rgba(16,16,20,.1); }
.cp-srow:hover .cp-scol.is-next { background: #fff; }
.cp-sheet-note { margin-top: 28px; font-size: 14.5px; font-weight: 600; color: rgba(16,16,20,.6); }

/* ---------- apply ---------- */
.cp-stubs {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin: 34px 0 8px;
}
.cp-stub {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 999px;
  padding: 12px 20px;
  background: rgba(11,11,16,.66);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-decoration: none;
  transition: border-color .3s, transform .35s var(--ease);
}
.cp-stub:hover { transform: translateY(-2px); }
.cp-stub i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cp-stub--wi i { background: #93C5FD; box-shadow: 0 0 8px rgba(147,197,253,.7); }
.cp-stub--su i { background: #F59E0B; box-shadow: 0 0 8px rgba(245,158,11,.7); }
.cp-stub--sh i { background: #38BDF8; box-shadow: 0 0 8px rgba(56,189,248,.7); }
.cp-stub--wi:hover { border-color: rgba(147,197,253,.6); }
.cp-stub--su:hover { border-color: rgba(245,158,11,.6); }
.cp-stub--sh:hover { border-color: rgba(56,189,248,.6); }
.cp-stub b { font-size: 13.5px; font-weight: 700; color: var(--text); }
.cp-stub span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }

/* mobile bottom conversion bar */
.cp-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 380;
  display: none;
  align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(11,11,16,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.1);
  border-left: 4px solid var(--bar-acc, var(--purple));
  transform: translateY(102%);
  transition: transform .45s var(--ease);
}
.cp-bar.show { transform: none; }
.cp-bar > div { min-width: 0; line-height: 1.35; }
.cp-bar b { font-size: 13px; font-weight: 700; display: block; }
.cp-bar span { font-size: 11.5px; color: var(--muted-2); }
.cp-bar .btn { margin-left: auto; padding: 10px 18px; font-size: 12.5px; flex: 0 0 auto; }
@media (max-width: 900px) { .cp-bar { display: flex; } }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .cp-dossier-grid { grid-template-columns: minmax(0, 1fr); }
  .cp-pass { position: static; order: -1; max-width: 560px; }
  .cp-mountain-grid { grid-template-columns: 84px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .cp-triptych { flex-direction: column; min-height: 0; }
  .cp-door { min-height: 52vh; }
  .cp-door--wi::after, .cp-door--su::after { display: none; }
  .cp-door--wi .tp-door-shade { background: linear-gradient(0deg, #0B1220 0%, #0B1220 15%, rgba(11,18,32,.7) 32%, rgba(11,18,32,0) 52%, rgba(11,18,32,.3) 100%); }
  .cp-door--su .tp-door-shade { background: linear-gradient(0deg, #F1EFE9 0%, #F1EFE9 15%, rgba(241,239,233,.7) 32%, rgba(241,239,233,0) 52%, rgba(16,16,20,.2) 100%); }
  .cp-door--sh .tp-door-shade { background: linear-gradient(0deg, #0A0E16 0%, #0A0E16 15%, rgba(10,14,22,.7) 32%, rgba(10,14,22,0) 52%, rgba(10,14,22,.3) 100%); }
  .cp-blocks, .cp-wplates { grid-template-columns: 1fr; }
  .cp-gallery { grid-template-columns: 1fr; }
  .cp-gallery .tp-tile { aspect-ratio: 3 / 2; }
  .cp-count { gap: 18px; }
}
@media (max-width: 768px) {
  .cpx-awards { grid-template-columns: 1fr; justify-items: center; row-gap: 18px; }
  .cpx-awards-list { width: 100%; }
  .cpx-hardware img { max-height: 210px; }
  .cp-board { padding: 6px 16px 10px; }
  .cp-board-head { display: none; }
  .cp-brow { grid-template-columns: minmax(0, 1fr) max-content; }
  .cp-b-loc { display: none; }
  .cp-brow span:nth-of-type(1) { grid-row: 1; grid-column: 1 / -1; }
  .cp-brow span:nth-of-type(2) { grid-row: 2; grid-column: 1; }
  .cp-brow span:nth-of-type(4) { grid-row: 2; grid-column: 2; align-self: center; justify-self: end; }
  .cp-status { letter-spacing: .08em; padding: 5px 10px; }
  .cp-bcell .fl { min-width: 13px; height: 26px; font-size: 14px; border-radius: 3px; }
  .cp-bcell { min-height: 30px; }
  .cp-brow.is-next::before { left: -16px; }
  .cp-cd b .fl { min-width: 24px; height: 38px; font-size: 21px; }
  .cp-sheet .cp-srow { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; border-bottom: 1px solid rgba(16,16,20,.1); }
  .cp-slbl { padding: 0; border-bottom: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: rgba(16,16,20,.55); }
  .cp-scol {
    border: 0; border-left: 3px solid var(--col-acc, var(--purple));
    border-radius: 0 10px 10px 0;
    padding: 10px 14px;
    position: relative;
  }
  .cp-scol::before {
    content: attr(data-mob);
    display: block;
    font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(16,16,20,.4);
    margin-bottom: 3px;
  }
  .cp-shead { border-bottom: 0 !important; }
  .cp-shead .cp-scol::before { display: none; }
  .cp-shead .cp-scol { border-radius: 0 10px 10px 0; border-top: 0; }
  .cp-sctas .cp-scol { border-radius: 0 10px 10px 0; box-shadow: none !important; }
  .cp-mountain-grid { grid-template-columns: 1fr; }
  .cp-alt { position: static; display: flex; align-items: center; gap: 16px; text-align: left; }
  .cp-alt-scale { width: 120px; height: 4px; margin: 0; }
  .cp-alt-scale i { transform: scaleX(0) scaleY(1); transform-origin: left center; }
  html.no-js .cp-alt-scale i, html.reduced .cp-alt-scale i { transform: none; }
}
@media (max-width: 560px) {
  .cp-perks { grid-template-columns: 1fr; }
  .cp-count-cap { max-width: none; }
  .cp-stubs { flex-direction: column; align-items: stretch; }
  .cp-stub { justify-content: center; }
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .reveal-up { opacity: 1; transform: none; }
}

/* staff → winter camp funnel line (coaches page) */
.cp-campline {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 8px 0 56px;
  padding: 18px 24px;
  border: 1px solid rgba(167,139,250,.35);
  border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--text);
  transition: border-color .3s, background .3s;
}
.cp-campline:hover { border-color: var(--lavender-2); background: rgba(124,58,237,.08); }
.cp-campline b { margin-left: auto; color: var(--lavender-2); white-space: nowrap; }
@media (max-width: 560px) { .cp-campline { border-radius: 20px; } .cp-campline b { margin-left: 0; } }

/* assessment terms under the training hero CTAs */
.tp-assess-note { margin-top: 14px; font-size: 13px; color: var(--muted-2); max-width: 480px; }
.tp-assess-note a { color: var(--lavender-2); font-weight: 700; }
.tp-apply-inner .tp-assess-note { margin-left: auto; margin-right: auto; }

/* mobile tap comfort: small text links get real touch targets */
@media (max-width: 768px) {
  .cpage-back, .tp-plate-x, .cp-pass-x, .ct-card-alt, .ct-word-link,
  .camp-link, .training-more, .tst-follow, .ct-escape a, .cp-wait-alt a,
  .ct-utility a, .cp-sheet-note a, .lp-body a {
    display: inline-block;
    padding-top: 8px; padding-bottom: 8px;
  }
  .lang-toggle { min-height: 40px; }
  .faq-q { min-height: 52px; }
}

/* ==================== ACCESSIBILITY FLOOR ==================== */
.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 999;
  background: var(--purple); color: #fff;
  font-size: 13px; font-weight: 800;
  padding: 10px 18px; border-radius: 0 0 12px 12px;
  transition: top .2s;
}
.skip-link:focus-visible { top: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--lavender-2);
  outline-offset: 3px;
}

/* ==================== LEGAL / PRESS / 404 (lp-, pr-, nf-) ==================== */
.lp-hero { padding: 190px 0 40px; }
.lp-hero .cpage-back { display: inline-block; margin-bottom: 26px; }
.lp-updated { margin-top: 20px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.lp-sub { margin-top: 14px; max-width: 560px; font-size: 16px; line-height: 1.65; color: var(--muted); }
.lp-sub a, .lp-body a { color: var(--lavender-2); font-weight: 600; }
.lp-body { padding: 40px 0 110px; }
.lp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.lp-h {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 30px; letter-spacing: .02em;
  color: var(--lavender-2);
  margin: 42px 0 6px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.lp-col > .lp-h:first-child { margin-top: 0; }
.lp-col h3 { font-family: var(--clash); font-weight: 600; font-size: 17px; margin: 26px 0 8px; }
.lp-col p { font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.lp-list { list-style: none; display: grid; gap: 10px; margin-top: 14px; }
.lp-list li { font-size: 14.5px; line-height: 1.6; color: var(--muted); padding-left: 18px; position: relative; }
.lp-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--purple); }
.lp-note { font-size: 13px; color: var(--muted-2); margin-bottom: 18px; }
.pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pr-tile { display: block; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.pr-tile img { width: 100%; height: 180px; object-fit: cover; display: block; }
.pr-tile--logo { background: #FBFAF6; }
.pr-tile--logo img { object-fit: contain; padding: 22px; }
.nf-hero { position: relative; min-height: 78vh; display: flex; align-items: center; padding: 160px 0 80px; overflow: hidden; }
.ct-ghost.nf-ghost { right: -3vw; bottom: 2vh; font-size: clamp(160px, 26vw, 420px); }
.nf-hero .hero-ctas { margin-top: 34px; flex-wrap: wrap; }
.tp-faq-list { max-width: 860px; }
@media (max-width: 900px) {
  .lp-grid { grid-template-columns: 1fr; }
  .lp-hero { padding-top: 150px; }
}

/* academy early-access form (price hero, waitlist-first state) */
.aw-form { max-width: 480px; }
.price-hero-right .cp-wait-done { font-size: 14px; font-weight: 700; color: var(--lavender-2); margin-top: 12px; }
.price-hero-right .cp-wait-done.is-on { display: block; }

/* ==================== CONTACT PAGE (ct-) ==================== */
.ct-hero {
  position: relative; min-height: 86vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 190px 0 84px;
  overflow: hidden;
}
.ct-hero-media { position: absolute; inset: 0; z-index: 0; }
.ct-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.ct-hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,11,16,.92) 0%, rgba(11,11,16,.72) 38%, rgba(11,11,16,.3) 70%, rgba(11,11,16,.55) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(11,11,16,.35) 34%, rgba(11,11,16,.55) 100%);
}
.ct-ghost {
  position: absolute; z-index: 1;
  right: -2vw; bottom: 6vh;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(90px, 12vw, 210px); line-height: 1; letter-spacing: .02em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(167,139,250,.16);
  pointer-events: none;
}
.ct-hero-inner { position: relative; z-index: 2; }
.ct-hero .cpage-back { margin-bottom: 26px; display: inline-block; }
.ct-kick {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 22px;
}
.ct-title { max-width: 800px; }
.ct-hero-sub { max-width: 520px; margin-top: 26px; font-size: 17px; line-height: 1.65; color: var(--muted); }
.ct-utility {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 22px;
  font-family: var(--clash); font-weight: 600; font-size: 16.5px; letter-spacing: .01em;
}
.ct-utility a { color: var(--text); }
.ct-utility a:hover { color: var(--lavender-2); }
.ct-utility span { color: var(--muted-2); }
.ct-hero .hero-ctas { margin-top: 30px; }
.ct-prefill-note { margin-top: 14px; font-size: 13px; color: var(--muted-2); }

.ct-sec { padding: 96px 0 40px; }
.ct-sec--msg { padding-top: 110px; }
.ct-sec--word { padding: 90px 0 110px; }
.ct-kicker {
  font-size: 11.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted-2);
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 34px;
}
.ct-kicker::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.ct-lines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ct-card {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(21,21,30,.9), rgba(15,15,22,.95));
  padding: 30px 28px 26px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
}
.ct-card--wa { border-color: rgba(167,139,250,.4); }
.ct-card--wa::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--lavender-2));
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(124,58,237,.5);
}
a.ct-card-value { color: var(--text); }
a.ct-card-value:hover { color: var(--lavender-2); }
.ct-card-value {
  font-family: var(--clash); font-weight: 700; font-size: clamp(19px, 1.6vw, 23px);
  letter-spacing: .01em; line-height: 1.2;
  margin-bottom: 12px;
  word-break: break-word;
}
.ct-card p { font-size: 14px; line-height: 1.6; color: var(--muted); margin-bottom: 22px; }
.ct-card-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: auto; }
.ct-card-alt { font-size: 13.5px; font-weight: 700; color: var(--lavender-2); }
.ct-card-alt:hover { color: var(--text); }
.ct-copy {
  margin-top: 16px;
  font-family: var(--font); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2);
  background: none; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: 7px 14px; cursor: pointer;
  transition: color .25s, border-color .25s;
}
.ct-copy:hover { color: var(--text); border-color: rgba(167,139,250,.5); }
.ct-copy.is-done { color: #86EFAC; border-color: rgba(74,222,128,.45); }
.ct-honesty { margin-top: 30px; font-size: 13.5px; color: var(--muted-2); max-width: 620px; }

.ct-h2 { margin-bottom: 46px; }
.ct-ledger { border-top: 1px solid rgba(255,255,255,.1); max-width: 860px; }
.ct-row {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 6px 26px 22px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: var(--text);
}
.ct-row::before {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--purple), var(--lavender-2));
  opacity: 0;
  transition: opacity .3s;
}
.ct-row:hover::before, .ct-row:focus-visible::before { opacity: 1; }
.ct-row-main { display: block; min-width: 0; }
.ct-row-main > b {
  display: block;
  font-family: var(--clash); font-weight: 600; font-size: clamp(19px, 1.9vw, 24px);
  letter-spacing: .01em;
  transition: color .25s;
}
.ct-row:hover .ct-row-main > b { color: var(--lavender-2); }
.ct-row-main > small, .ct-row-live { display: flex; align-items: center; gap: 8px; margin-top: 7px; font-size: 13px; font-weight: 600; color: var(--muted-2); }
.ct-row-live { color: #86EFAC; }
.ct-row-live .pill-dot { width: 7px; height: 7px; background: #4ADE80; }
.ct-preview {
  display: block; overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height .35s var(--ease), opacity .3s;
  font-size: 12.5px; color: var(--muted-2);
}
.ct-preview i { font-style: normal; font-weight: 700; }
.ct-preview b { font-weight: 400; font-style: italic; color: var(--muted); }
@media (hover: hover) {
  .ct-row:hover .ct-preview, .ct-row:focus-visible .ct-preview { max-height: 60px; opacity: 1; margin-top: 8px; }
}
@media (hover: none) {
  .ct-preview { max-height: none; opacity: 1; margin-top: 8px; }
}
.ct-row-arrow {
  flex: 0 0 auto;
  font-size: 20px; color: var(--muted-2);
  transition: transform .3s var(--ease), color .25s;
}
.ct-row:hover .ct-row-arrow { transform: translateX(6px); color: var(--lavender-2); }
.ct-escape { margin-top: 34px; font-size: 15px; color: var(--muted); }
.ct-escape a { font-weight: 700; color: var(--lavender-2); }
.ct-escape a:hover { color: var(--text); }
.ct-trust { margin-top: 10px; font-size: 12.5px; color: var(--muted-2); }

.ct-word {
  display: flex; align-items: center; gap: clamp(28px, 4vw, 54px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(30,22,54,.75), rgba(15,15,22,.92));
  padding: clamp(28px, 3.5vw, 48px);
  overflow: hidden;
}
.ct-word-photo {
  width: clamp(104px, 11vw, 136px); flex: 0 0 auto;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(124,58,237,.32), rgba(15,15,22,.6));
  border: 1px solid rgba(167,139,250,.28);
  padding: 10px 10px 0;
}
.ct-word-body blockquote {
  font-family: var(--clash); font-weight: 500; font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.5; letter-spacing: .005em;
  max-width: 720px;
}
.ct-word-sig { margin-top: 18px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ct-word-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--lavender-2); }
.ct-word-link:hover { color: var(--text); }

@media (max-width: 1024px) {
  .ct-lines { grid-template-columns: 1fr; max-width: 560px; }
  .ct-ghost { font-size: clamp(80px, 14vw, 140px); bottom: 4vh; }
}
@media (max-width: 768px) {
  .ct-hero { min-height: 78vh; padding: 150px 0 64px; }
  .ct-hero-media img { object-position: 62% 30%; }
  .ct-sec { padding: 72px 0 28px; }
  .ct-sec--msg { padding-top: 84px; }
  .ct-row { padding: 22px 2px 22px 16px; }
  .ct-word { flex-direction: column; align-items: flex-start; }
  .ct-word-photo { align-self: flex-start; order: -1; width: 96px; }
}
@media (max-width: 560px) {
  .ct-utility { font-size: 14.5px; }
  .ct-card-actions .btn { width: 100%; justify-content: center; }
  .ct-row-arrow { display: none; }
}


/* ============================================================
   PRIJAVA → SAGLASNOST
   The reworked weekend-training application, the consent step
   that follows it, and consent.html itself (screen + paper).
   ============================================================ */

/* Formspree's honeypot. display:none is the first line, not the last: an
   off-screen, zero-opacity input is still a live field — a password manager or a
   form autofiller can put a value in it, and Formspree then silently discards a
   real family's application. It is also the only thing standing between a CSS
   404 and an unlabelled empty box in the middle of the form. tabindex="-1" in the
   markup keeps a keyboard user out; the off-screen geometry stays as a second
   layer for the bots that skip display:none fields.
   !important throughout: `.tp-app-form input` is (0,1,1) and would otherwise
   stretch this to width:100% with 12px padding. */
.sa-pot {
  display: none !important;
  position: absolute !important;
  left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; border: 0 !important;
  opacity: 0; pointer-events: none;
}

/* ---- application form: hints, wide rows, the textarea ---- */
.tp-app-form textarea {
  width: 100%;
  font-family: var(--font); font-size: 14.5px; font-weight: 600;
  color: var(--text);
  background: rgba(11, 11, 16, .55);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 12px 15px;
  resize: vertical;
  transition: border-color .3s;
}
.tp-app-form textarea:focus { border-color: var(--lavender-2); }
.tp-app-hint {
  display: block;
  margin-top: 6px;
  font-size: 11.5px; font-weight: 500; line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-2);
}
.tp-appform .cp-reg-grid > .tp-app-wide { grid-column: 1 / -1; }
.tp-app-csnote {
  margin: 20px 0 0;
  font-size: 12.5px; line-height: 1.6;
  color: var(--muted-2);
}
.tp-app-priv {
  margin: 16px 0 0;
  font-size: 12px; line-height: 1.6;
  color: var(--muted-2);
}
/* an outcome that is a problem, not a confirmation */
.cp-wait-done.is-warn { color: #FCA5A5; }
.tp-appform .cp-wait-done.is-warn { color: #FCA5A5; }

/* ---- the consent step, revealed once the application is away ---- */
.tp-app-next { margin-top: 20px; }
.tp-next-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--lavender);
  border-radius: 16px;
  background: linear-gradient(120deg, rgba(124, 58, 237, .28), rgba(167, 139, 250, .14));
  color: var(--text);
  text-align: left;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.tp-next-cta:hover { transform: translateY(-2px); border-color: var(--lavender-2); }
.tp-next-txt { display: block; min-width: 0; }
.tp-next-label {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lavender-2);
}
.tp-next-cta b { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.4; }
.tp-next-auto {
  display: block; margin-top: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.tp-next-arrow {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--purple);
  position: relative;
  transition: transform .45s var(--ease);
}
.tp-next-arrow::before, .tp-next-arrow::after {
  content: ""; position: absolute; background: #fff; border-radius: 2px;
}
.tp-next-arrow::before { left: 10px; right: 10px; top: 50%; height: 2px; transform: translateY(-50%); }
.tp-next-arrow::after {
  width: 9px; height: 9px; right: 11px; top: 50%;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
  background: none; border-radius: 0;
  transform: translateY(-50%) rotate(45deg);
}
.tp-next-cta:hover .tp-next-arrow { transform: translateX(3px); }
.tp-next-why { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-2); }
/* WCAG 2.2.1: the auto-redirect must be stoppable — the payment details sit
   directly below this form and a parent mid-read must not be yanked away. */
.tp-next-stay {
  margin-top: 10px;
  padding: 8px 2px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 700;
  color: var(--lavender-2);
  text-decoration: underline; text-underline-offset: 4px;
}
.tp-next-stay:hover { color: var(--text); }

/* ============================================================
   consent.html
   ============================================================ */
.sg-eyebrow {
  margin-top: 4px; margin-bottom: 14px;
  font-size: 11px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lavender-2);
}
.sg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.sg-doc { display: flex; flex-direction: column; gap: 34px; }
.sg-block-label {
  margin-bottom: 12px;
  font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--lavender-2);
}
.sg-block-intro { max-width: 56ch; font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.sg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.sg-chips li {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 999px;
  padding: 8px 15px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.sg-list { list-style: none; margin-top: 16px; display: grid; gap: 11px; }
.sg-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
}
.sg-list li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--purple);
  transform: rotate(45deg);
}
.sg-terms { list-style: none; margin-top: 4px; }
.sg-terms li {
  border-top: 1px solid var(--border);
  padding: 14px 0;
  font-size: 14px; line-height: 1.7; color: var(--muted-2);
}
.sg-entity {
  border-top: 1px solid var(--border);
  padding-top: 20px;
  font-size: 12.5px; line-height: 1.75; color: var(--muted-2);
}

/* the form card */
.sg-card {
  position: sticky; top: 118px;
  border: 1px solid rgba(167, 139, 250, .4);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(124, 58, 237, .1), rgba(15, 15, 22, .45));
  padding: 28px 26px 24px;
}
.sg-carry {
  margin-bottom: 20px;
  border: 1px solid rgba(167, 139, 250, .45);
  border-radius: 14px;
  background: rgba(124, 58, 237, .14);
  padding: 13px 16px;
  font-size: 13px; line-height: 1.6; color: var(--text);
}
.sg-carry--cold { border-color: var(--border); background: var(--panel); color: var(--muted); }
.sg-carry a { font-weight: 700; }
.sg-leg {
  margin: 22px 0 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lavender-2);
}
.sg-form > .sg-leg:first-of-type { margin-top: 0; }
.sg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.sg-grid-2 > .sg-wide { grid-column: 1 / -1; }
.sg-form label { display: block; }
.sg-form label > span {
  display: block;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 7px;
}
.sg-form input[type="text"], .sg-form input[type="tel"],
.sg-form input[type="email"], .sg-form input[type="date"] {
  width: 100%;
  font-family: var(--font); font-size: 14.5px; font-weight: 600;
  color: var(--text);
  background: rgba(11, 11, 16, .55);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  padding: 12px 15px;
  transition: border-color .3s;
}
.sg-form input:focus { border-color: var(--lavender-2); }
.sg-form input::placeholder { color: var(--muted-2); }
/* the checkbox lives outside the width:100% rule above on purpose */
/* THE SAME SPECIFICITY TRAP, A THIRD TIME — written down so it is not rediscovered a
   fourth. `.sg-agree` is a <label>, and bare `.sg-agree` scores (0,1,0) while
   `.sg-form label { display:block }` twelve lines up scores (0,1,1) and WINS. So this
   box has never once been flex: the checkbox sat on its own line above the sentence,
   and align-items and gap were inert decoration. `.sg-form .sg-agree` is (0,2,1) and
   beats it. Anything added here that a `.sg-form label`/`.sg-form input` rule also sets
   needs the same two-class prefix. */
.sg-form .sg-agree {
  display: flex; align-items: flex-start; gap: 13px;
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  padding: 15px 16px;
  cursor: pointer;
}
.sg-form .sg-agree input[type="checkbox"] {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  margin-top: 1px;
  accent-color: var(--purple);
}
/* Specificity matters here: `.sg-form label > span` is (0,1,2) and would render
   the declaration the parent is agreeing to as a 10.5px uppercase field caption.
   It is the most important sentence on the page — it reads as prose. */
.sg-form .sg-agree > span {
  font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--text);
  letter-spacing: 0; text-transform: none;
  margin-bottom: 0;
  display: block;
}
.sg-form .btn.sg-send { margin-top: 20px; width: 100%; justify-content: center; }
.sg-sign { margin-top: 14px; font-size: 11.5px; line-height: 1.65; color: var(--muted-2); }

/* an explicit "no" — without it a refusal is indistinguishable from silence */
.sg-decline {
  margin-top: 26px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.sg-decline-lead { font-size: 13px; font-weight: 700; color: var(--text); }
.sg-decline-btn {
  margin-top: 10px;
  padding: 11px 16px;
  width: 100%;
  background: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 700;
  color: var(--muted);
  transition: border-color .25s, color .25s, background .25s;
}
.sg-decline-btn:hover { border-color: var(--lavender); color: var(--text); background: var(--panel); }
.sg-decline-note { margin-top: 10px; font-size: 12px; line-height: 1.65; color: var(--muted-2); }

.sg-card .cp-wait-alt { margin-top: 16px; }
.sg-card .cp-wait-done { font-size: 14px; font-weight: 700; color: var(--lavender-2); margin-top: 14px; }
.sg-print-row {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  font-size: 12px; color: var(--muted-2);
}
.sg-print-btn {
  background: none; border: 0; cursor: pointer; padding: 4px 0;
  font-family: var(--font); font-size: 12px; font-weight: 700;
  color: var(--lavender-2);
  text-decoration: underline; text-underline-offset: 4px;
}
.sg-print-btn:hover { color: var(--text); }
.sg-priv { margin-top: 10px; font-size: 11.5px; line-height: 1.6; color: var(--muted-2); }

/* screen-only: these two blocks exist for the printed sheet */
.sg-print-head, .sg-paper { display: none; }

@media (max-width: 1024px) {
  .sg-grid { grid-template-columns: 1fr; }
  .sg-card { position: static; max-width: 620px; }
}
@media (max-width: 640px) {
  .sg-card { padding: 22px 18px 20px; }
  .sg-grid-2 { grid-template-columns: 1fr; }
  .tp-next-cta { padding: 15px 15px; }
  .tp-next-arrow { width: 30px; height: 30px; }
}

/* ============================================================
   iOS ANTI-ZOOM — every form field on the site, in one place.
   iPhone Safari zooms the whole page the first time a field under
   16px takes focus, and it does not zoom back out: the parent is
   left scrolling a form that no longer fits, mid-application.

   Two rules that read as if they did this already did not, and the
   reason is mechanical, so it is written down here rather than
   rediscovered a third time:
     - `.sg-form input` is (0,1,1) and lost to
       `.sg-form input[type="text"], …` at (0,2,1);
     - `.tp-app-form input, .tp-app-form select` tied the base rule
       at (0,1,1) and lost on SOURCE ORDER, the base being 685
       lines further down.
   So this block does two things at once. The class is doubled —
   `.sg-form.sg-form` matches exactly the same elements but scores
   (0,2,1) — which meets or beats every base rule; and the whole
   block sits at the end of the screen styles, after all of them.
   It also matches bare `input` rather than `input[type=…]`, so a
   field added later without a type attribute is still covered.
   Desktop is untouched — it keeps the tighter 14.5px.

   THE BREAKPOINT: this was keyed on max-width:700px, which is not
   the set of devices that zoom. An iPhone in LANDSCAPE is 852–932px
   wide and an iPad in portrait is 768px, so both fell straight
   through and still measured 14.5px and still zoomed — the parent
   who turns the phone sideways to type is exactly the one who was
   left scrolling. So it is keyed on the input mechanism as well:
   `(hover:none) and (pointer:coarse)` is every touch device at any
   width and any orientation, and the 1024px arm covers a touch
   browser that lies about pointer type. A mouse-and-keyboard desktop
   matches neither above 1024px and keeps 14.5px.
   ============================================================ */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .cp-reg-form.cp-reg-form input,
  .cp-reg-form.cp-reg-form select,
  .cp-reg-form.cp-reg-form textarea,
  .tp-app-form.tp-app-form input,
  .tp-app-form.tp-app-form select,
  .tp-app-form.tp-app-form textarea,
  .sg-form.sg-form input,
  .sg-form.sg-form select,
  .sg-form.sg-form textarea,
  .cp-wait-form.cp-wait-form input,
  .aw-form.aw-form input {
    font-size: 16px;
  }
}

/* ============================================================
   PAPER — consent.html printed or saved as PDF.
   A parent who wants ink signs this; the on-screen form is the
   same document, so the two can never drift apart.
   ============================================================ */
@media print {
  /* .sg-decline and .sg-priv are NOT in this list any more. Hiding them made the
     printed sheet a yes-only document: every assurance that a "no" costs the child
     nothing, and the line saying the consent is held only until it is revoked, lived
     on screen and vanished on paper — so the version a parent actually signs was the
     one that never mentioned refusing. The BUTTON goes (there is nothing to press on
     paper); the sentences stay. */
  .preloader, .scroll-progress, .topbar, .nav, .footer, .skip-link,
  .sg-print-row, .sg-decline-btn, .cp-wait-alt, .cp-wait-done,
  .sg-card .btn, .cpage-back, .sg-eyebrow { display: none !important; }

  /* A blank sheet must print blank. `placeholder` is chrome, not content, and Chrome
     and Safari both paint it — so the "Town / city" line came off the printer already
     reading "Podgorica", which on a signed document is a filled-in field nobody filled
     in. Both spellings, because the two engines still disagree. */
  .sg-form input::placeholder { color: transparent !important; opacity: 0 !important; }
  .sg-form input::-webkit-input-placeholder { color: transparent !important; opacity: 0 !important; }

  /* a caption and the line it labels are one thing — without this the EMAIL caption
     orphaned at the foot of page 1 and its rule landed at the top of page 2 */
  .sg-form label { break-inside: avoid; page-break-inside: avoid; }

  html, body { background: #fff !important; }
  body { color: #101014 !important; font-size: 11pt; }
  .lp-hero { padding: 0 !important; }
  .lp-hero .mega-title, .lp-hero .lp-sub { display: none !important; }
  .lp-body { padding: 0 !important; }
  .container { max-width: none !important; padding: 0 !important; }

  /* one column, one sheet: the document, then the fields, then the signature */
  .sg-grid { display: block !important; }
  .sg-doc { display: block !important; }
  .sg-card {
    position: static !important;
    border: 0 !important; background: none !important; padding: 0 !important;
    margin-top: 14pt;
  }
  .reveal-up, .h-fade { opacity: 1 !important; transform: none !important; }

  .sg-print-head {
    display: block !important;
    border-bottom: 1.5pt solid #101014;
    padding-bottom: 6pt; margin-bottom: 14pt;
  }
  .sg-print-head b { display: block; font-family: var(--clash); font-size: 15pt; }
  .sg-print-head span { display: block; margin-top: 2pt; font-size: 10pt; }

  .sg-block { margin-bottom: 12pt; break-inside: avoid; }
  .sg-block-label { color: #101014 !important; font-size: 8.5pt; margin-bottom: 4pt; }
  .sg-block-intro, .sg-list li, .sg-terms li, .sg-entity { color: #101014 !important; }
  .sg-block-intro { font-size: 10pt; line-height: 1.45; max-width: none; }
  .sg-chips { margin-top: 6pt; }
  .sg-chips li { border-color: #101014 !important; color: #101014 !important; background: none !important; padding: 3pt 8pt; font-size: 8.5pt; }
  .sg-list { margin-top: 6pt; gap: 3pt; }
  .sg-list li { font-size: 10pt; line-height: 1.4; }
  .sg-list li::before { background: #101014 !important; }
  .sg-terms li { border-top-color: rgba(16,16,20,.25) !important; padding: 5pt 0; font-size: 9.5pt; line-height: 1.4; }
  .sg-entity { border-top-color: rgba(16,16,20,.25) !important; padding-top: 8pt; font-size: 8.5pt; }

  .sg-leg { color: #101014 !important; margin: 10pt 0 5pt; font-size: 8.5pt; }
  .sg-grid-2 { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8pt 14pt; }
  .sg-form label > span { color: rgba(16,16,20,.7) !important; font-size: 7.5pt; margin-bottom: 2pt; }
  /* The same specificity trap as the anti-zoom block above: this selector is
     (0,1,1) and every other declaration in it carries !important, so only
     font-size lost — to `.sg-form input[type="text"], …` at (0,2,1), which is
     14.5px, i.e. 10.875pt. The printed sheet was silently a different size from
     the one specified here. */
  .sg-form input {
    color: #101014 !important;
    background: none !important;
    border: 0 !important; border-bottom: .75pt solid #101014 !important;
    border-radius: 0 !important;
    padding: 2pt 0 !important;
    font-size: 10.5pt !important;
  }
  .sg-carry { display: none !important; }

  /* on paper the declaration is what the parent signs under, so it stays —
     only the tick box goes, because ink on the line is the act */
  .sg-agree {
    display: block !important;
    border: 0 !important; background: none !important;
    padding: 12pt 0 0 !important; margin: 0 !important;
  }
  .sg-agree input { display: none !important; }
  .sg-form .sg-agree > span {
    color: #101014 !important; font-size: 9.5pt; line-height: 1.45;
    font-weight: 600; letter-spacing: 0; text-transform: none; margin-bottom: 0;
  }

  /* the two lines that make it a signed document */
  .sg-paper { display: block !important; margin-top: 22pt; break-inside: avoid; }
  .sg-paper-line { margin-top: 20pt; }
  .sg-paper-line i { display: block; border-bottom: .75pt solid #101014; height: 20pt; }
  .sg-paper-line span {
    display: block; margin-top: 3pt;
    font-size: 8pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(16,16,20,.7);
  }
  .sg-sign { display: block !important; color: rgba(16,16,20,.7) !important; margin-top: 14pt; font-size: 8pt; }

  /* The assurance, in ink. Only the button is dropped — there is nothing to press on
     paper — so the printed sheet still carries "saying no changes nothing about your
     child's place" and still tells the parent the consent is held only until they
     revoke it. Those two sentences are the reason the document is fair; a signed
     version without them is not the same document. */
  .sg-decline {
    display: block !important; break-inside: avoid;
    margin-top: 14pt; padding-top: 8pt;
    border-top: .75pt solid rgba(16,16,20,.25) !important;
  }
  .sg-decline-lead { color: #101014 !important; font-size: 9pt; }
  .sg-decline-note { color: rgba(16,16,20,.7) !important; margin-top: 4pt; font-size: 8pt; line-height: 1.45; }
  .sg-priv {
    display: block !important;
    color: rgba(16,16,20,.7) !important; margin-top: 8pt; font-size: 8pt; line-height: 1.45;
  }
  @page { margin: 14mm; }
}