/* ==========================================================================
   BodyPathfinder — styles.css
   Architecture: scoped component blocks
   Methodology:  utility-first + camelCase component classes
   Units:        viewport-relative (vw / vh / clamp)
   Theme:        theme-system (dark default, [data-theme="light"] override)
   ========================================================================== */

/* --------------------------------------------------------------------------
   [1] Reset — Eric Meyer's Reset CSS v2.0
   -------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }


/* --------------------------------------------------------------------------
   [2] Theme system — design tokens
   -------------------------------------------------------------------------- */
:root {
  /* surfaces */
  --bgPrimary:   #0f0f0f;
  --bgSecondary: #161616;
  --bgTertiary:  #1d1d1d;
  --bgRaised:    #232323;

  /* accent */
  --accent:      #ffcd46;
  --accentHover: #ffd966;
  --accentDark:  #d4a82e;
  --onAccent:    #0f0f0f;

  /* text */
  --textPrimary:   #ffffff;
  --textSecondary: #cccccc;
  --textMuted:     #999999;

  /* lines & depth */
  --borderSoft:  rgba(255, 255, 255, 0.08);
  --borderHard:  rgba(255, 255, 255, 0.16);
  --shadowSoft:  0 2px 18px rgba(0, 0, 0, 0.45);
  --shadowLift:  0 12px 40px rgba(0, 0, 0, 0.6);
  --overlayVeil: rgba(10, 10, 10, 0.72);

  /* rhythm — airy, viewport-driven */
  --spaceXs:  clamp(0.4rem, 0.6vw, 0.6rem);
  --spaceSm:  clamp(0.75rem, 1vw, 1rem);
  --spaceMd:  clamp(1.25rem, 2vw, 2rem);
  --spaceLg:  clamp(2rem, 3.5vw, 3.25rem);
  --spaceXl:  clamp(3rem, 5vw, 5rem);
  --space2xl: clamp(4rem, 7vw, 7.5rem);

  /* geometry */
  --radiusSm: 4px;
  --radiusMd: 10px;
  --radiusLg: 18px;
  --gutter:   5vw;
  --shellMax: 1180px;

  /* motion */
  --transition: 0.3s ease;
  --transitionSlow: 0.6s ease;
}

[data-theme="light"] {
  --bgPrimary:   #ffffff;
  --bgSecondary: #f7f6f2;
  --bgTertiary:  #efeee8;
  --bgRaised:    #ffffff;

  --accent:      #9a7100;
  --accentHover: #7d5c00;
  --accentDark:  #6b4f00;
  --onAccent:    #ffffff;

  --textPrimary:   #17170f;
  --textSecondary: #4a4a44;
  --textMuted:     #6f6f68;

  --borderSoft:  rgba(0, 0, 0, 0.08);
  --borderHard:  rgba(0, 0, 0, 0.16);
  --shadowSoft:  0 2px 18px rgba(0, 0, 0, 0.07);
  --shadowLift:  0 12px 40px rgba(0, 0, 0, 0.12);
  --overlayVeil: rgba(255, 255, 255, 0.7);
}


/* --------------------------------------------------------------------------
   [3] Typography — streaming-lato
   -------------------------------------------------------------------------- */
body, h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body {
  background: var(--bgPrimary);
  color: var(--textPrimary);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}
h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-bottom: var(--spaceMd);
}
h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.3;
}
h4 { font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
p  { font-size: clamp(0.95rem, 1.05vw, 1.05rem); line-height: 1.7; font-weight: 400; }
strong { font-weight: 700; }
em { font-style: italic; }
a { color: inherit; text-decoration: none; }

.sectionKicker {
  display: block;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--spaceSm);
}
.sectionLead {
  color: var(--textSecondary);
  max-width: 62ch;
  margin-bottom: var(--spaceLg);
}


/* --------------------------------------------------------------------------
   [4] Utilities — utility-first layer (camelCase)
   -------------------------------------------------------------------------- */
.pageContainer { width: var(--shellMax); max-width: 90vw; margin: 0 auto; }
.flex          { display: flex; }
.flexCol       { flex-direction: column; }
.flexWrap      { flex-wrap: wrap; }
.itemsCenter   { align-items: center; }
.itemsStart    { align-items: flex-start; }
.justifyBetween{ justify-content: space-between; }
.justifyCenter { justify-content: center; }
.gapSm  { gap: var(--spaceSm); }
.gapMd  { gap: var(--spaceMd); }
.gapLg  { gap: var(--spaceLg); }
.textCenter { text-align: center; }
.mxAuto { margin-left: auto; margin-right: auto; }
.mtSm { margin-top: var(--spaceSm); }
.mtMd { margin-top: var(--spaceMd); }
.mtLg { margin-top: var(--spaceLg); }
.mbSm { margin-bottom: var(--spaceSm); }
.mbMd { margin-bottom: var(--spaceMd); }
.mbLg { margin-bottom: var(--spaceLg); }
.wFull { width: 100%; }
.muted { color: var(--textMuted); }
.soft  { color: var(--textSecondary); }
.accentText { color: var(--accent); }
.relative { position: relative; }
.srOnly {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* --------------------------------------------------------------------------
   [5] Layout shell — semantic layers + css-grid-auto
   -------------------------------------------------------------------------- */
main[role="main"] { display: block; }

/* Alternating surfaces use background-color only, so sections that carry their
   own background-image (hero, join banner) keep it. */
.flowSections > section {
  padding: var(--space2xl) var(--gutter);
  background-color: var(--bgSecondary);
}
.flowSections > section:nth-of-type(odd) {
  background-color: var(--bgTertiary);
}

.autoGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--spaceLg);
}

/* Named section wrappers — layout comes from the shell rule above; these
   anchors carry per-section overrides and keep the markup self-describing. */
.stats    { position: relative; }
.spotlight{ position: relative; }
.benefits { position: relative; }
.catalog  { position: relative; }
.tiers    { position: relative; }
.policy   { position: relative; }
.payments { position: relative; }
.crew     { position: relative; }
.qa       { position: relative; }
.hello    { position: relative; }
.backstory{ position: relative; }


/* --------------------------------------------------------------------------
   [6] Section divider — arrow-down
   -------------------------------------------------------------------------- */
.sectionDivider { position: relative; height: 0; }
.sectionDivider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 28px;
  height: 28px;
  background: var(--bgSecondary);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.28);
  z-index: 2;
}
.sectionDivider.onTertiary::after { background: var(--bgTertiary); }


/* --------------------------------------------------------------------------
   [7] Buttons — minimal-text primary
   -------------------------------------------------------------------------- */
.primaryButton {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  position: relative;
  transition: color var(--transition), gap var(--transition);
}
.primaryButton::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.primaryButton:hover { color: var(--accentHover); gap: 0.85rem; }
.primaryButton:hover::after { transform: scaleX(1); }
.primaryButton:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ghostButton {
  background: none;
  border: 1px solid var(--borderHard);
  color: var(--textSecondary);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radiusSm);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.ghostButton:hover { border-color: var(--accent); color: var(--accent); }

.solidButton {
  background: var(--accent);
  color: var(--onAccent);
  border: none;
  font-weight: 900;
  font-size: 0.95rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radiusSm);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.solidButton:hover { background: var(--accentHover); transform: translateY(-1px); }
.solidButton:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }


/* --------------------------------------------------------------------------
   [8] Header — tab-navigation + mobile-menu module hook
   -------------------------------------------------------------------------- */
.siteHeader {
  background: var(--bgSecondary);
  border-bottom: 2px solid var(--borderSoft);
  position: sticky;
  top: 0;
  z-index: 1200;
}
.headerShell {
  width: var(--shellMax);
  max-width: 92vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spaceMd);
  min-height: 9vh;
  padding: 0.9rem 0;
}
.headerLogo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.headerLogo img { width: 34px; height: 34px; }
.headerLogoText {
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--textPrimary);
}
.headerLogoText span { color: var(--accent); }

.headerToggle { order: 3; }
.headerClose { font-weight: 400; }
.headerNav ul { display: flex; align-items: center; }
.navItem { position: relative; }
.navItem a {
  display: block;
  padding: 0.9rem 1.05rem;
  color: var(--textSecondary);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-bottom: 3px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.navItem a:hover { color: var(--textPrimary); border-bottom-color: var(--borderHard); }
.navItem.navItemActive a { color: var(--accent); border-bottom-color: var(--accent); }

.headerActions { display: flex; align-items: center; gap: var(--spaceSm); flex-shrink: 0; }
.themeSwitch {
  background: none;
  border: 1px solid var(--borderSoft);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--textMuted);
  transition: color var(--transition), border-color var(--transition);
}
.themeSwitch:hover { color: var(--accent); border-color: var(--accent); }
.themeSwitch svg { width: 17px; height: 17px; }
.themeSwitch .iconMoon { display: none; }
[data-theme="light"] .themeSwitch .iconSun { display: none; }
[data-theme="light"] .themeSwitch .iconMoon { display: block; }

.headerLogin { color: var(--textSecondary); font-weight: 700; font-size: 0.9rem; }
.headerLogin:hover { color: var(--accent); }

/* mobile menu — visual layer only (behaviour owned by the module) */
[data-mm-toggle] span { background: var(--textPrimary); border-radius: 2px; }
[data-mm-menu] { border-left: 1px solid var(--borderSoft); }
[data-mm-menu] ul li a { color: var(--textSecondary); font-weight: 700; }
[data-mm-close] { color: var(--textPrimary); }

@media (max-width: 767px) {
  .headerActions .headerLogin { display: none; }
  [data-mm-menu] ul li a { border-bottom-color: var(--borderSoft) !important; }
  .navItem.navItemActive a { border-bottom-color: var(--borderSoft); }
}


/* --------------------------------------------------------------------------
   [9] Hero — split-right-text + parallax + youtube-classic featured video
   -------------------------------------------------------------------------- */
.vidHero {
  position: relative;
  background-image: linear-gradient(var(--overlayVeil), var(--overlayVeil)), url('/public/media/banner-main.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding-top: calc(var(--space2xl) * 1.1) !important;
  padding-bottom: calc(var(--space2xl) * 1.1) !important;
}
.vidHeroGrid {
  width: var(--shellMax);
  max-width: 90vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spaceXl);
  align-items: center;
}
.vidHeroMedia { order: -1; }
.vidHeroCopy h1 { margin-bottom: var(--spaceMd); }
.vidHeroCopy p { color: var(--textSecondary); margin-bottom: var(--spaceMd); max-width: 46ch; }
.vidHeroCta { display: flex; align-items: center; gap: var(--spaceMd); flex-wrap: wrap; }

.heroTrust { display: flex; flex-wrap: wrap; gap: var(--spaceMd); margin-top: var(--spaceLg); }
.heroTrust li {
  font-size: 0.82rem;
  color: var(--textMuted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.heroTrust li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* featured video — youtube-classic full-width inside its column */
.featuredVideo {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  cursor: pointer;
  border-radius: var(--radiusSm);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadowLift);
}
.featuredVideo .thumbnailImg { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: opacity var(--transition), transform var(--transitionSlow); }
.featuredVideo:hover .thumbnailImg { opacity: 1; transform: scale(1.02); }
.playOverlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.playOverlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.15), rgba(0,0,0,0.5));
}
.playCircle {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffff;
  color: #101010;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  padding-left: 4px;
  transition: transform var(--transition), background var(--transition);
}
.featuredVideo:hover .playCircle { transform: scale(1.08); background: var(--accent); }
.durationBadge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radiusSm);
  letter-spacing: 0.02em;
}
.featuredMeta { margin-top: var(--spaceSm); }
.featuredMeta h3 { margin-bottom: 0.35rem; color: var(--textPrimary); }
.featuredMeta p { font-size: 0.82rem; color: var(--textMuted); }


/* --------------------------------------------------------------------------
   [10] Stats — key metrics
   -------------------------------------------------------------------------- */
.statsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--spaceLg);
  width: var(--shellMax);
  max-width: 90vw;
  margin: 0 auto;
}
.statCard { text-align: center; }
.statIcon { font-size: 1.5rem; margin-bottom: var(--spaceSm); color: var(--accent); }
.statValue {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 900;
  line-height: 1;
  color: var(--textPrimary);
  letter-spacing: -0.02em;
}
.statLabel {
  margin-top: 0.55rem;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--textMuted);
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   [11] Spotlight + Catalog — video card grids (youtube-classic)
   -------------------------------------------------------------------------- */
.sectionHead { width: var(--shellMax); max-width: 90vw; margin: 0 auto var(--spaceLg); }
.sectionHead.centered { text-align: center; }
.sectionHead.centered .sectionLead { margin-left: auto; margin-right: auto; }

.videoGrid {
  width: var(--shellMax);
  max-width: 90vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.videoCard { cursor: pointer; }
.videoCardThumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radiusSm);
  overflow: hidden;
  background: #000;
}
.videoCardThumb .thumbnailImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  transition: opacity var(--transition), transform var(--transitionSlow);
}
.videoCard:hover .thumbnailImg { opacity: 1; transform: scale(1.04); }
.videoCardThumb .lockPill {
  position: absolute;
  left: 8px;
  top: 8px;
  background: rgba(0, 0, 0, 0.78);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radiusSm);
}
.videoCardBody { padding: 0.7rem 0.1rem 0; }
.videoCardTitle {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--textPrimary);
  margin-bottom: 0.3rem;
}
.videoCard:hover .videoCardTitle { color: var(--accent); }
.videoCardMeta { font-size: 0.78rem; color: var(--textMuted); }

.catalogFilters {
  width: var(--shellMax);
  max-width: 90vw;
  margin: 0 auto var(--spaceLg);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.filterChip {
  background: none;
  border: 1px solid var(--borderSoft);
  color: var(--textMuted);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.filterChip:hover { color: var(--textPrimary); border-color: var(--borderHard); }
.filterChip.filterChipActive {
  color: var(--onAccent);
  background: var(--accent);
  border-color: var(--accent);
}
.catalogSearch {
  width: var(--shellMax);
  max-width: 90vw;
  margin: 0 auto var(--spaceMd);
}
.catalogSearch input {
  width: 100%;
  background: var(--bgPrimary);
  border: 1px solid var(--borderSoft);
  border-radius: var(--radiusSm);
  padding: 0.9rem 1.1rem;
  color: var(--textPrimary);
  outline: none;
  transition: border-color var(--transition);
}
.catalogSearch input:focus { border-color: var(--accent); }
.catalogSearch input::placeholder { color: var(--textMuted); }
.catalogEmpty { width: var(--shellMax); max-width: 90vw; margin: var(--spaceLg) auto 0; color: var(--textMuted); text-align: center; }


/* --------------------------------------------------------------------------
   [12] Benefits / Policy / Mentors — left-accent-bar card style
   -------------------------------------------------------------------------- */
.contentCard {
  border-left: 5px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
  background: var(--bgRaised);
  box-shadow: var(--shadowSoft);
  transition: transform var(--transition), box-shadow var(--transition);
}
.contentCard:hover { transform: translateY(-3px); box-shadow: var(--shadowLift); }
.cardIcon { font-size: 1.4rem; margin-bottom: 0.8rem; display: block; }
.cardTitle { margin-bottom: 0.55rem; color: var(--textPrimary); }
.cardText { font-size: 0.92rem; color: var(--textSecondary); }

.policyStep { counter-increment: policyCounter; }
.policySteps { counter-reset: policyCounter; }
.policyStep .stepNumber {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem;
}
.policyNote {
  width: var(--shellMax);
  max-width: 90vw;
  margin: var(--spaceLg) auto 0;
  color: var(--textMuted);
  font-size: 0.88rem;
}

.mentorCard { display: flex; flex-direction: column; gap: var(--spaceSm); }
.mentorPhoto {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radiusSm);
  filter: grayscale(0.15);
}
.mentorRole {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 900;
}
.mentorBio { font-size: 0.9rem; color: var(--textSecondary); }


/* --------------------------------------------------------------------------
   [13] Tiers — pricing plans
   -------------------------------------------------------------------------- */
.tiersGrid {
  width: var(--shellMax);
  max-width: 90vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--spaceMd);
  align-items: stretch;
}
.tierCard {
  border-left: 5px solid var(--borderHard);
  border-radius: 0 10px 10px 0;
  background: var(--bgRaised);
  padding: 1.75rem 1.5rem 1.5rem 1.75rem;
  box-shadow: var(--shadowSoft);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--transition), border-color var(--transition);
}
.tierCard:hover { transform: translateY(-3px); }
.tierCard.tierCardPopular { border-left-color: var(--accent); }
.tierBadge {
  position: absolute;
  top: -11px;
  right: 14px;
  background: var(--accent);
  color: var(--onAccent);
  font-weight: 900;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radiusSm);
}
.tierName { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--textMuted); font-weight: 900; margin-bottom: 0.9rem; }
.tierPrice { font-size: clamp(1.7rem, 2.6vw, 2.1rem); font-weight: 900; color: var(--textPrimary); line-height: 1; letter-spacing: -0.02em; }
.tierPeriod { font-size: 0.82rem; color: var(--textMuted); margin-top: 0.35rem; }
.tierEquiv { font-size: 0.78rem; color: var(--accent); margin-top: 0.4rem; font-weight: 700; min-height: 1.2em; }
.tierList { margin: var(--spaceMd) 0; display: flex; flex-direction: column; gap: 0.55rem; flex-grow: 1; }
.tierList li { font-size: 0.88rem; color: var(--textSecondary); display: flex; gap: 0.6rem; align-items: flex-start; }
.tierList li::before { content: "\2713"; color: var(--accent); font-weight: 900; flex-shrink: 0; }
.tierCard .primaryButton { align-self: flex-start; }


/* --------------------------------------------------------------------------
   [14] Payments
   -------------------------------------------------------------------------- */
.paymentsRow {
  width: var(--shellMax);
  max-width: 90vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: var(--spaceSm);
}
.paymentTile {
  border: 1px solid var(--borderSoft);
  border-radius: var(--radiusSm);
  padding: 1.2rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--textSecondary);
  background: var(--bgRaised);
  transition: border-color var(--transition), color var(--transition);
}
.paymentTile:hover { border-color: var(--accent); color: var(--textPrimary); }
.paymentTile .tileGlyph { display: block; font-size: 1.3rem; margin-bottom: 0.5rem; }
.securityRow {
  width: var(--shellMax);
  max-width: 90vw;
  margin: var(--spaceLg) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spaceMd);
  color: var(--textMuted);
  font-size: 0.8rem;
}


/* --------------------------------------------------------------------------
   [15] QA — plus-minus-toggle accordion
   -------------------------------------------------------------------------- */
.qaList { width: min(820px, 90vw); margin: 0 auto; }
.qaItem { border-bottom: 1px solid var(--borderSoft); }
.faqQ {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spaceMd);
  padding: 1rem 0;
  cursor: pointer;
  font-weight: 600;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  color: var(--textPrimary);
  font-size: 1rem;
}
.faqQ .pm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-weight: 700;
  line-height: 1;
}
.faqQ .pm::after { content: "+"; }
.qaItem.open .pm::after { content: "\2212"; }
.faqA {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transitionSlow);
}
.qaItem.open .faqA { max-height: 40vh; }
.faqA p { color: var(--textSecondary); padding-bottom: 1.2rem; font-size: 0.94rem; }


/* --------------------------------------------------------------------------
   [16] Join — registration CTA banner
   -------------------------------------------------------------------------- */
.joinBanner {
  position: relative;
  background-image: linear-gradient(var(--overlayVeil), var(--overlayVeil)), url('/public/media/banner-join.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  text-align: center;
}
.joinInner { width: min(760px, 90vw); margin: 0 auto; }
.joinInner h2 { margin-bottom: var(--spaceSm); }
.joinInner p { color: var(--textSecondary); margin-bottom: var(--spaceMd); }
.joinUrgency {
  display: inline-block;
  margin-top: var(--spaceMd);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--accent);
}


/* --------------------------------------------------------------------------
   [17] Hello — contact form (footer-section placement)
   -------------------------------------------------------------------------- */
.helloGrid {
  width: var(--shellMax);
  max-width: 90vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--spaceXl);
  align-items: start;
}
.helloInfo dl { display: flex; flex-direction: column; gap: var(--spaceMd); }
.helloInfo dt {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--textMuted);
  font-weight: 900;
  margin-bottom: 0.25rem;
}
.helloInfo dd { color: var(--textSecondary); font-size: 0.95rem; }
.helloInfo dd a:hover { color: var(--accent); }

.contactForm { display: flex; flex-direction: column; gap: var(--spaceMd); }
.formGroup { display: flex; flex-direction: column; gap: 0.45rem; }
.formLabel { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 900; color: var(--textMuted); }
.formLabel .optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--textMuted); opacity: 0.7; }
.formInput {
  background: var(--bgPrimary);
  border: 1px solid var(--borderSoft);
  border-radius: var(--radiusSm);
  padding: 0.85rem 1rem;
  color: var(--textPrimary);
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}
.formInput:focus { border-color: var(--accent); }
.formInput::placeholder { color: var(--textMuted); }
textarea.formInput { min-height: 18vh; resize: vertical; line-height: 1.6; }

.formConsent { display: flex; gap: 0.7rem; align-items: flex-start; }
.formConsent input { margin-top: 0.35rem; accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.formConsent label { font-size: 0.82rem; color: var(--textMuted); line-height: 1.55; }
.formConsent a { color: var(--accent); text-decoration: underline; }

.formErrors {
  border-left: 3px solid #e5484d;
  background: rgba(229, 72, 77, 0.08);
  padding: 0.85rem 1rem;
  border-radius: 0 var(--radiusSm) var(--radiusSm) 0;
  color: #ffb4b6;
  font-size: 0.88rem;
}
[data-theme="light"] .formErrors { color: #a12126; }
.formErrors ul { display: flex; flex-direction: column; gap: 0.3rem; }
.formNote { font-size: 0.78rem; color: var(--textMuted); }
.formSuccess {
  border-left: 3px solid var(--accent);
  background: rgba(255, 205, 70, 0.08);
  padding: 1rem 1.1rem;
  border-radius: 0 var(--radiusSm) var(--radiusSm) 0;
  color: var(--textSecondary);
  font-size: 0.92rem;
}
.successIcon { color: var(--accent); font-weight: 900; margin-right: 0.5rem; }


/* --------------------------------------------------------------------------
   [18] Floating action button — cta_logic: floating-button
   -------------------------------------------------------------------------- */
.fab {
  position: fixed;
  right: 2.2vw;
  bottom: 2.2vw;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--onAccent);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1400;
  box-shadow: var(--shadowLift);
  transition: transform var(--transition), background var(--transition);
}
.fab:hover { transform: translateY(-2px) scale(1.04); background: var(--accentHover); }
.fabIcon { font-size: 1.35rem; line-height: 1; }

.fabForm {
  position: fixed;
  right: 2.2vw;
  bottom: calc(2.2vw + 70px);
  width: min(340px, 88vw);
  background: var(--bgRaised);
  border: 1px solid var(--borderSoft);
  border-radius: var(--radiusLg);
  box-shadow: var(--shadowLift);
  z-index: 1400;
  overflow: hidden;
}
.fabFormHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spaceSm);
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--borderSoft);
}
.fabFormHeader h3 { font-size: 1rem; }
.fabFormClose {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--textMuted);
}
.fabFormClose:hover { color: var(--accent); }
.fabFormContent { padding: 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.fabFormContent .formInput { padding: 0.7rem 0.85rem; font-size: 0.9rem; }
.fabFormContent textarea.formInput { min-height: 12vh; }


/* --------------------------------------------------------------------------
   [19] Page hero — inner pages
   -------------------------------------------------------------------------- */
.pageHero {
  background: var(--bgTertiary);
  padding: var(--spaceXl) var(--gutter);
  border-bottom: 1px solid var(--borderSoft);
}
.pageHeroInner { width: var(--shellMax); max-width: 90vw; margin: 0 auto; }
.pageHeroInner h1 { margin-bottom: var(--spaceSm); }
.pageHeroInner p { color: var(--textSecondary); max-width: 64ch; }

.breadcrumb { font-size: 0.8rem; color: var(--textMuted); margin-bottom: var(--spaceSm); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin: 0 0.4rem; opacity: 0.5; }


/* --------------------------------------------------------------------------
   [20] Legal / prose pages
   -------------------------------------------------------------------------- */
.proseSection { padding: var(--spaceXl) var(--gutter) var(--space2xl); background: var(--bgSecondary); }
.prose { width: min(780px, 90vw); margin: 0 auto; }
.prose h2 { margin-top: var(--spaceLg); margin-bottom: var(--spaceSm); font-size: clamp(1.25rem, 2vw, 1.6rem); }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin-top: var(--spaceMd); margin-bottom: 0.5rem; }
.prose p { color: var(--textSecondary); margin-bottom: var(--spaceSm); }
.prose ul { margin: 0 0 var(--spaceSm) 1.2rem; list-style: disc; }
.prose ul li { color: var(--textSecondary); margin-bottom: 0.4rem; padding-left: 0.3rem; font-size: 0.96rem; }
.prose a { color: var(--accent); text-decoration: underline; }
.proseMeta {
  font-size: 0.82rem;
  color: var(--textMuted);
  padding-bottom: var(--spaceMd);
  margin-bottom: var(--spaceLg);
  border-bottom: 1px solid var(--borderSoft);
}
.prose table { width: 100%; margin-bottom: var(--spaceMd); font-size: 0.9rem; }
.prose th, .prose td { border: 1px solid var(--borderSoft); padding: 0.7rem 0.85rem; text-align: left; color: var(--textSecondary); }
.prose th { color: var(--textPrimary); font-weight: 700; background: var(--bgTertiary); }
.tableScroll { overflow-x: auto; }


/* --------------------------------------------------------------------------
   [21] Backstory — about page
   -------------------------------------------------------------------------- */
.backstoryGrid {
  width: var(--shellMax);
  max-width: 90vw;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spaceXl);
  align-items: center;
}
.backstoryGrid img { border-radius: var(--radiusMd); box-shadow: var(--shadowLift); }
.backstoryGrid p { color: var(--textSecondary); margin-bottom: var(--spaceSm); }
.valueList { display: flex; flex-direction: column; gap: var(--spaceSm); margin-top: var(--spaceMd); }
.valueList li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--textSecondary); font-size: 0.94rem; }
.valueList li::before { content: "\2014"; color: var(--accent); font-weight: 900; flex-shrink: 0; }


/* --------------------------------------------------------------------------
   [22] Footer — social-prominent
   -------------------------------------------------------------------------- */
.siteFooter {
  text-align: center;
  background: var(--bgPrimary);
  color: var(--textSecondary);
  padding: var(--spaceXl) var(--gutter) var(--spaceLg);
  border-top: 1px solid var(--borderSoft);
}
.footerTagline {
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--textPrimary);
}
.footerTagline span { color: var(--accent); }
.social { display: flex; gap: 1rem; justify-content: center; margin: 1.25rem 0; }
.social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bgRaised);
  border: 1px solid var(--borderSoft);
  color: var(--textSecondary);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.social a:hover { background: var(--accent); color: var(--onAccent); transform: translateY(-2px); }
.social svg { width: 19px; height: 19px; }

.footerLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.2rem;
  margin: var(--spaceMd) 0;
  font-size: 0.85rem;
}
.footerLinks a { color: var(--textMuted); }
.footerLinks a:hover { color: var(--accent); }

.footerCompany {
  width: min(720px, 90vw);
  margin: var(--spaceMd) auto 0;
  padding-top: var(--spaceMd);
  border-top: 1px solid var(--borderSoft);
  font-size: 0.8rem;
  color: var(--textMuted);
  line-height: 1.85;
}
.footerCompany strong { color: var(--textSecondary); font-weight: 700; }
.footerFinePrint { margin-top: var(--spaceSm); font-size: 0.78rem; color: var(--textMuted); opacity: 0.85; }


/* --------------------------------------------------------------------------
   [23] Scroll reveal — animation_type
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transitionSlow), transform var(--transitionSlow);
}
.reveal.active { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; }


/* --------------------------------------------------------------------------
   [24] Video player modal — cinema-blur
   -------------------------------------------------------------------------- */
.videoModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
}
.videoModalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(18px) saturate(0.6);
  -webkit-backdrop-filter: blur(18px) saturate(0.6);
}
.videoModalPlayer {
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 16 / 9;
  background: rgba(10, 10, 10, 0.85);
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  animation: videoModalIn 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes videoModalIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.videoModalPlayBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: 1.9rem;
  padding-left: 6px;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
  animation: pulseGlow 2.5s ease-in-out infinite;
  transition: background 0.25s ease;
}
.videoModalPlayBtn:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%) scale(1.1);
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.15); }
  50%      { box-shadow: 0 0 52px rgba(255, 255, 255, 0.32); }
}
.videoModalTitle {
  position: absolute;
  top: 18px;
  left: 20px;
  right: 70px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
  font-size: 1rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.videoModalControls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
}
.videoModalControls .ctrlIcon { cursor: default; opacity: 0.9; }
.videoModalTrack { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.25); border-radius: 2px; position: relative; }
.videoModalTrack::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: #fff; border-radius: 2px; }
.videoModalClose {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.videoModalClose:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
body.modalLocked { overflow: hidden; }


/* --------------------------------------------------------------------------
   [25] Responsive — mobile_behavior: stack-vertical
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .videoGrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .flowSections > section { padding: var(--spaceXl) 1.25rem; }
  .vidHero { background-attachment: scroll; padding-top: var(--spaceXl) !important; padding-bottom: var(--spaceXl) !important; }
  .joinBanner { background-attachment: scroll; }

  .vidHeroGrid,
  .backstoryGrid,
  .helloGrid { grid-template-columns: 1fr; gap: var(--spaceLg); }
  .vidHeroMedia { order: -1; }

  .videoGrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .statsGrid { gap: var(--spaceMd); }
  .headerShell { min-height: auto; }
  .fab { right: 1.1rem; bottom: 1.1rem; }
  .fabForm { right: 1.1rem; bottom: 5.2rem; }
  .videoModal { padding: 2vh 3vw; }
  .videoModalPlayBtn { width: 64px; height: 64px; font-size: 1.4rem; }
  .footerLinks { gap: 0.35rem 0.9rem; }
}
@media (max-width: 480px) {
  .videoGrid { grid-template-columns: 1fr; }
  .heroTrust { gap: var(--spaceSm); }
}


/* --------------------------------------------------------------------------
   [26] Mobile menu module — slide-right (functional CSS, do not edit)
   -------------------------------------------------------------------------- */
[data-mm-header]{--mm-bg:#ffffff;--mm-text:#333333;--mm-primary:#2563eb;--mm-overlay-bg:rgba(0,0,0,0.5);--mm-transition:0.3s ease}[data-mm-header]{position:relative}[data-mm-toggle]{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:1001}[data-mm-toggle] span{display:block;width:24px;height:2px;background:var(--mm-text);transition:var(--mm-transition)}[data-mm-menu]{position:fixed;top:0;right:0;width:280px;max-width:85vw;height:100vh;height:100dvh;background:var(--mm-bg);transform:translateX(100%);transition:transform var(--mm-transition);z-index:1100;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;padding:60px 24px 24px}[data-mm-menu].mm-open{transform:translateX(0)}[data-mm-menu] ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}[data-mm-menu] ul li a{display:block;padding:14px 0;color:var(--mm-text);text-decoration:none;font-size:16px;border-bottom:1px solid rgba(0,0,0,0.08);transition:color var(--mm-transition)}[data-mm-menu] ul li a:hover{color:var(--mm-primary)}[data-mm-close]{position:absolute;top:16px;right:16px;background:none;border:none;font-size:28px;line-height:1;cursor:pointer;color:var(--mm-text);padding:4px 8px}[data-mm-overlay]{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--mm-overlay-bg);opacity:0;visibility:hidden;transition:opacity var(--mm-transition),visibility var(--mm-transition);z-index:1050}[data-mm-overlay].mm-visible{opacity:1;visibility:visible}@media(min-width:768px){[data-mm-toggle]{display:none!important}[data-mm-menu]{position:static!important;width:auto!important;max-width:none!important;height:auto!important;background:transparent!important;transform:none!important;padding:0!important;overflow:visible!important;flex-direction:row!important}[data-mm-menu] ul{flex-direction:row;gap:0;align-items:center}[data-mm-menu] ul li a{padding:8px 16px;border-bottom:none;font-size:inherit}[data-mm-close]{display:none!important}[data-mm-overlay]{display:none!important}}@media(prefers-reduced-motion:reduce){[data-mm-menu],[data-mm-overlay],[data-mm-toggle] span{transition:none!important}}


/* --------------------------------------------------------------------------
   [27] Mobile menu — palette binding (must follow the module block)
   -------------------------------------------------------------------------- */
[data-mm-header] {
  --mm-bg: #161616;
  --mm-text: #cccccc;
  --mm-primary: #ffcd46;
  --mm-overlay-bg: rgba(0, 0, 0, 0.72);
}
[data-theme="light"] [data-mm-header] {
  --mm-bg: #ffffff;
  --mm-text: #4a4a44;
  --mm-primary: #9a7100;
  --mm-overlay-bg: rgba(0, 0, 0, 0.45);
}
/* The module resets link padding/borders at >=768px, so the tab-navigation
   look is re-applied here with matching specificity. */
[data-mm-menu] ul li.navItem a {
  color: var(--textSecondary);
  font-weight: 700;
  border-bottom: 1px solid var(--borderSoft);
}
[data-mm-menu] ul li.navItem a:hover { color: var(--textPrimary); }
[data-mm-menu] ul li.navItemActive a { color: var(--accent); }

@media (min-width: 768px) {
  [data-mm-menu] ul li.navItem a {
    padding: 0.9rem 1.05rem;
    font-size: 0.92rem;
    border-bottom: 3px solid transparent;
  }
  [data-mm-menu] ul li.navItem a:hover { border-bottom-color: var(--borderHard); }
  [data-mm-menu] ul li.navItemActive a { border-bottom-color: var(--accent); }
}