/* ============================================================
   TSA v31 — Design Override System (v31.1 patches included)
   Injected at the end of every page's <style> block.
   Higher specificity + clamp() + modern breakpoints.
   Brand: #E8702A primary, #0D0D0D dark, Montserrat
   ============================================================ */

/* ---- Fluid type tokens (scale 360px -> 1440px viewport) ----
   v31.1: display max tightened from 56px -> 42px so the hero H1
   fits its 50% grid column without wrapping word-by-word. */
:root {
  --v31-edge:     clamp(16px, 4vw, 48px);
  --v31-section:  clamp(56px, 8vw, 104px);
  --v31-gap:      clamp(24px, 3vw, 48px);
  --v31-display:  clamp(26px, 3.8vw, 42px);
  --v31-h1:       clamp(24px, 3.6vw, 40px);
  --v31-h2:       clamp(22px, 3vw, 32px);
  --v31-h3:       clamp(18px, 1.6vw, 22px);
  --v31-lead:     clamp(15px, 1.4vw, 18px);
  --v31-body:     clamp(14px, 1vw, 16px);
  --v31-small:    clamp(12px, 0.9vw, 13px);
  --v31-radius-card: 14px;
  --v31-radius-btn:  8px;
  --v31-shadow-soft: 0 6px 18px rgba(0,0,0,0.06);
  --v31-shadow-hover: 0 18px 42px rgba(0,0,0,0.10);
}

/* ---- Base rhythm ---- */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
img, svg, iframe { max-width: 100%; }

/* ---- Hero: kill chevron + soften gradient ---- */
.hero::before { display: none !important; }
.hero {
  padding: clamp(64px, 8vw, 120px) var(--v31-edge) !important;
  background:
    radial-gradient(1100px 500px at 10% 0%, rgba(232,112,42,0.12) 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(232,112,42,0.06) 0%, transparent 70%),
    #0D0D0D !important;
  border-bottom: 3px solid #E8702A;
}
.hero-content {
  max-width: 1200px !important;
  gap: clamp(24px, 4vw, 56px) !important;
  /* v31.1: widen the text column so H1 + desc + CTAs breathe */
  grid-template-columns: 1.35fr 1fr !important;
}
.hero h1 {
  font-size: var(--v31-display) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em;
  margin-bottom: clamp(16px, 1.6vw, 20px) !important;
  text-wrap: balance;
}
.hero h1 .accent {
  color: #E8702A !important;
  font-style: normal !important;
}
.hero p,
.hero-description {
  font-size: var(--v31-lead) !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.72) !important;
  max-width: 620px;
  margin-bottom: clamp(24px, 3vw, 36px) !important;
}
.hero-buttons a,
.hero .btn-primary,
.hero .btn-ghost {
  padding: 14px 28px !important;
  font-size: 13px !important;
  border-radius: var(--v31-radius-btn) !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

/* ---- Hero video: branded card wrapper (v31.1: force iframe visible) ---- */
.hero-video {
  position: relative;
  border-radius: var(--v31-radius-card) !important;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) !important;
  background: #0D0D0D;
}
.hero-video::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #E8702A;
  z-index: 3;
  pointer-events: none;
}
/* v31.1: the Vimeo iframe lives inside an aspect-ratio inner div with padding-top.
   Some browsers / ad blockers render .hero-video as a black box if the iframe
   isn't positioned authoritatively. Force absolute fill + high z-index so the
   video always shows above the card background. */
.hero-video iframe,
.hero-video > div > iframe {
  display: block !important;
  border: 0 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2;
}
.hero-video > div {
  position: relative;
  width: 100%;
}

/* ---- Section rhythm ---- */
section { padding: var(--v31-section) var(--v31-edge) !important; }
.section-content { max-width: 1120px !important; }
h2 {
  font-size: var(--v31-h2) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h3 { font-size: var(--v31-h3) !important; line-height: 1.3 !important; }
p, li { font-size: var(--v31-body); line-height: 1.65; }
.section-sub { font-size: var(--v31-lead) !important; line-height: 1.6 !important; }
.divider { margin-bottom: clamp(24px, 3vw, 36px) !important; }

/* ---- Cards: unify look ---- */
.card, .pain-card, .fit-card, .testi-card, .coach-card, .included-card {
  border-radius: var(--v31-radius-card) !important;
  box-shadow: var(--v31-shadow-soft) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.card:hover, .pain-card:hover, .fit-card:hover, .testi-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--v31-shadow-hover) !important;
}

/* ---- Badges: consistent pill ---- */
.badge, .section-label {
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  padding: 6px 14px !important;
}

/* ---- Proof bar ---- */
.proof-bar { padding: 0 !important; }
.proof-stat { padding: clamp(28px, 4vw, 44px) clamp(16px, 2vw, 28px) !important; }
.proof-stat-number { font-size: clamp(28px, 3.6vw, 40px) !important; }

/* ---- Pain section ---- */
.pain-headline { font-size: var(--v31-h2) !important; line-height: 1.2 !important; text-wrap: balance; }
.pain-section { padding: var(--v31-section) var(--v31-edge) !important; }

/* ---- SEO duplicate H1 pattern — visual dial-down ---- */
.seo-keyword-heading {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #888888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
  display: block;
}

/* ---- Footer: tighter, more confident ---- */
footer {
  background: #0D0D0D !important;
  color: rgba(255,255,255,0.7) !important;
  padding: clamp(56px, 7vw, 88px) var(--v31-edge) clamp(24px, 3vw, 32px) !important;
  border-top: 3px solid #E8702A;
}
footer .footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: 1.4fr repeat(3, 1fr) !important;
  gap: clamp(24px, 3vw, 48px) !important;
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
footer .footer-logo {
  max-width: 180px !important;
  height: auto !important;
  filter: brightness(0) invert(1);
  margin-bottom: 16px;
}
footer .footer-content > div:first-child p {
  font-size: 13px !important;
  color: rgba(255,255,255,0.6) !important;
  line-height: 1.6 !important;
  max-width: 280px;
}
footer .footer-section h4 {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: #E8702A !important;
  margin-bottom: 16px !important;
}
footer .footer-section a {
  display: block !important;
  color: rgba(255,255,255,0.7) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 0 !important;
  transition: color 0.2s;
}
footer .footer-section a:hover { color: #FFFFFF !important; }
footer .footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: clamp(20px, 2.4vw, 28px);
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
footer .footer-legal {
  font-size: 12px !important;
  color: rgba(255,255,255,0.5) !important;
  margin: 0 !important;
}
footer .footer-links {
  display: flex !important;
  gap: 24px !important;
}
footer .footer-links a {
  font-size: 12px !important;
  color: rgba(255,255,255,0.5) !important;
  text-decoration: none !important;
  transition: color 0.2s;
}
footer .footer-links a:hover { color: #E8702A !important; }

/* ---- Responsive: tablet ---- */
@media (max-width: 960px) {
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    gap: 32px !important;
  }
  .hero-description, .hero p { max-width: 100%; }
  .cards-grid-3, .video-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .split { grid-template-columns: 1fr !important; gap: 32px !important; }
  .included-grid { grid-template-columns: repeat(2, 1fr) !important; }
  footer .footer-content { grid-template-columns: 1fr 1fr !important; }
}

/* ---- Responsive: mobile ---- */
@media (max-width: 640px) {
  section, .pain-section { padding: clamp(48px, 12vw, 72px) var(--v31-edge) !important; }
  .hero { padding: clamp(56px, 14vw, 80px) var(--v31-edge) !important; }
  .hero-content { text-align: left !important; gap: 24px !important; }
  .hero-buttons { flex-direction: column !important; align-items: stretch !important; }
  .hero-buttons a { text-align: center; }
  .cards-grid-3, .video-grid, .fit-grid, .pain-grid, .testi-grid, .coach-trio, .transform-grid, .included-grid, .form-row { grid-template-columns: 1fr !important; }
  .proof-grid { grid-template-columns: 1fr 1fr !important; }
  .proof-stat + .proof-stat::before { display: none; }
  footer .footer-content { grid-template-columns: 1fr !important; gap: 28px !important; }
  footer .footer-bottom { flex-direction: column !important; align-items: flex-start !important; text-align: left !important; }
}

/* ---- Accessibility polish ---- */
:focus-visible { outline: 2px solid #E8702A; outline-offset: 2px; border-radius: 4px; }
a { -webkit-tap-highlight-color: rgba(232,112,42,0.2); }

/* ============================================================
   v31.1 HOTFIX PATCHES
   ============================================================ */

/* --- Double floating CTA: kill the legacy .float-pill everywhere.
   v29.3 standardised on .tsa-floating-cta (aligned to each page's hero CTA).
   .float-pill was the pre-v29 pattern and should never stack with it. --- */
.float-pill { display: none !important; }

/* --- Duplicate LOGIN in the header: an in-page script appends a second
   Login link to .main-nav when it loads under 900px viewport. If the user
   resizes back up to desktop, that JS-added link persists alongside the
   hardcoded .nav-login button. Target the JS-injected link by its inline
   style signature and hide it at desktop viewports. --- */
@media (min-width: 901px) {
  .main-nav .nav-link[style*="border-top"],
  .main-nav a[style*="border-top: 1px solid"],
  #main-nav a[style*="border-top"] {
    display: none !important;
  }
}

/* --- Mobile menu: also collapse duplicate Logins if any slipped through
   (defensive). Keeps only the first match. --- */
@media (max-width: 900px) {
  .main-nav .nav-login { display: none !important; }
}

/* --- End TSA v31.1 patch --- */

/* ============================================================
   v31.2 HOTFIX PATCHES (2026-04-20)
   - Kill all hero pills / eyebrow badges above H1
   - Fix learning-hub-style centred hero text alignment at <=960px
   - Fix mobile nav: stretch Programs trigger to full width
   - Hero vertical rhythm polish (H1 → desc → price → CTA)
   ============================================================ */

/* --- 1. Kill all hero pills above H1.
   Two patterns exist site-wide:
     (a) <div class="hero-badge"><div class="badge">...</div></div> — split heroes
     (b) <div class="badge"> as first child of .hero-content — centred heroes
   Also the "SELF-PACED COURSE" pill and "62 COURSES · 567 LESSONS" pill fall
   under one of these. Neutralise both without touching section-internal badges. */
.hero .hero-badge,
.hero-content > .hero-badge,
.hero-content > .badge,
.hero-content > .hero-eyebrow,
.hero .eyebrow-badge {
  display: none !important;
}

/* --- 2. Centred heroes (no .hero-video / .hero-right child) keep single-column
   centred layout. v31 rules force 2-col grid + left-align on every .hero-content;
   this scopes those rules to split heroes only. /learning-hub/ is the canonical
   centred hero — paragraph and CTAs must stay centred across all viewports. */
.hero-content:not(:has(.hero-video)):not(:has(.hero-right)) {
  display: block !important;
  grid-template-columns: 1fr !important;
  text-align: center !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.hero-content:not(:has(.hero-video)):not(:has(.hero-right)) h1,
.hero-content:not(:has(.hero-video)):not(:has(.hero-right)) .hero-description,
.hero-content:not(:has(.hero-video)):not(:has(.hero-right)) p,
.hero-content:not(:has(.hero-video)):not(:has(.hero-right)) .hero-price,
.hero-content:not(:has(.hero-video)):not(:has(.hero-right)) .hero-price-row {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}
.hero-content:not(:has(.hero-video)):not(:has(.hero-right)) .hero-buttons,
.hero-content:not(:has(.hero-video)):not(:has(.hero-right)) .cta-group {
  justify-content: center !important;
}

/* Tablet + mobile keep centred alignment (v31 forces left — undo for centred heroes). */
@media (max-width: 960px) {
  .hero-content:not(:has(.hero-video)):not(:has(.hero-right)) {
    text-align: center !important;
  }
  .hero-content:not(:has(.hero-video)):not(:has(.hero-right)) .hero-buttons,
  .hero-content:not(:has(.hero-video)):not(:has(.hero-right)) .cta-group {
    justify-content: center !important;
  }
}
@media (max-width: 640px) {
  .hero-content:not(:has(.hero-video)):not(:has(.hero-right)) {
    text-align: center !important;
  }
  .hero-content:not(:has(.hero-video)):not(:has(.hero-right)) .hero-buttons,
  .hero-content:not(:has(.hero-video)):not(:has(.hero-right)) .cta-group {
    justify-content: center !important;
    align-items: stretch !important;
  }
}

/* --- 3. Mobile nav: force Programs trigger and its wrapper to full width.
   Root cause: .nav-item.has-mega is display:block (flex child stretches) but
   its .nav-link-trigger <span> renders only content-width in some paint paths,
   causing Programs to appear centred while sibling <a> .nav-link items go full
   width. Force width:100% and left alignment on both wrapper and trigger. */
@media (max-width: 900px) {
  .main-nav {
    align-items: stretch !important;
  }
  .main-nav > .nav-item,
  .main-nav .nav-item.has-mega {
    width: 100% !important;
    display: block !important;
  }
  .main-nav .nav-link,
  .main-nav .nav-link-trigger,
  .main-nav .nav-item .nav-link {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  .main-nav .nav-link svg {
    margin-left: auto !important;
  }
}

/* --- 4. Hero vertical rhythm polish.
   v31 ships tokens but ad-hoc page CSS leaks non-uniform margins around the
   H1, description, price row, and buttons. Lock a consistent stack so every
   hero breathes the same way — especially the "start a business" variants
   Greg flagged as cramped. */
.hero {
  padding-top: clamp(80px, 9vw, 128px) !important;
  padding-bottom: clamp(72px, 8vw, 112px) !important;
}
.hero h1 {
  margin-top: 0 !important;
  margin-bottom: clamp(20px, 2vw, 28px) !important;
}
.hero .hero-description,
.hero > .hero-content > p,
.hero-content > p {
  margin-bottom: clamp(28px, 3.2vw, 40px) !important;
}
.hero .hero-price-row,
.hero .hero-price {
  margin-top: clamp(20px, 2.4vw, 28px) !important;
  margin-bottom: 0 !important;
}
.hero .hero-buttons,
.hero .cta-group {
  margin-top: clamp(8px, 1.2vw, 16px) !important;
  margin-bottom: 0 !important;
}
.hero .price-amount {
  font-weight: 900 !important;
  font-size: clamp(26px, 3vw, 34px) !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em;
}
.hero .price-note {
  color: rgba(255,255,255,0.55) !important;
  font-size: 13px !important;
  margin-left: 10px;
}

/* Split hero vertical centring: text column and video card align on the
   vertical axis, so the video poster sits level with the H1, not the CTA. */
.hero-content:has(.hero-video),
.hero-content:has(.hero-right) {
  align-items: center !important;
}

/* Hero description color: lift slightly for contrast on dark BG. */
.hero p,
.hero-description {
  color: rgba(255,255,255,0.78) !important;
}

/* --- End TSA v31.2 patch --- */

/* ============================================================
   v32 MOTION LAYER (2026-04-20)
   Vanilla scroll-triggered reveal + counter animation.
   Zero CDN dep. IntersectionObserver-driven. JS gates via .js
   class on <html> (added by inline script in <head> before paint).
   Respects prefers-reduced-motion.
   ============================================================ */

/* Only apply motion states when JS is present. No-JS / pre-JS = full opacity. */
.js .anim-reveal,
.js .pain-card,
.js .fit-card,
.js .coach-card,
.js .testi-card,
.js .included-card,
.js .proof-stat,
.js .scroll-reveal,
.js .card,
.js h2.anim,
.js .section-sub.anim {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
}
.js .anim-reveal.in-view,
.js .pain-card.in-view,
.js .fit-card.in-view,
.js .coach-card.in-view,
.js .testi-card.in-view,
.js .included-card.in-view,
.js .proof-stat.in-view,
.js .scroll-reveal.in-view,
.js .card.in-view,
.js h2.anim.in-view,
.js .section-sub.anim.in-view {
  opacity: 1;
  transform: none;
}

/* Hero entrance: fade + rise the first render after JS boots.
   Applied inline by motion.js on DOMContentLoaded — no IO needed. */
.js .hero-content > h1,
.js .hero-content > .hero-description,
.js .hero-content > p,
.js .hero-content > .hero-price-row,
.js .hero-content > .hero-price,
.js .hero-content > .hero-buttons,
.js .hero-content > .cta-group,
.js .hero-content > .hero-right,
.js .hero-content > .hero-video {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .hero-content.hero-entered > h1,
.js .hero-content.hero-entered > .hero-description,
.js .hero-content.hero-entered > p,
.js .hero-content.hero-entered > .hero-price-row,
.js .hero-content.hero-entered > .hero-price,
.js .hero-content.hero-entered > .hero-buttons,
.js .hero-content.hero-entered > .cta-group,
.js .hero-content.hero-entered > .hero-right,
.js .hero-content.hero-entered > .hero-video {
  opacity: 1;
  transform: none;
}

/* Accessibility: anyone with prefers-reduced-motion = no animation, full opacity. */
@media (prefers-reduced-motion: reduce) {
  .js .anim-reveal,
  .js .pain-card,
  .js .fit-card,
  .js .coach-card,
  .js .testi-card,
  .js .included-card,
  .js .proof-stat,
  .js .scroll-reveal,
  .js .card,
  .js h2.anim,
  .js .section-sub.anim,
  .js .hero-content > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- End TSA v32 motion layer --- */

/* ============================================================
   v32.1 HOTFIX PATCHES (2026-04-20)
   Fixes shipped in response to Greg's live review of the
   start-a-business archetype pages:
     (1) Hero left column was vertically gappy. Original hero CSS
         uses a 5-row grid with `align-items: center`. The right-
         column video spans rows 1/-1, which forces the rows tall
         enough to seat the video — left-column items then get
         centred inside their oversized rows, stranding price/CTA
         far below H1. Fix: align-items: start on the grid, video
         uses align-self: center to retain vertical alignment.
     (2) Strikethrough "$990" with "20% OFF" badge added next to
         the $792 + GST display — discount story made visible.
   ============================================================ */

/* --- 1. Split-hero rhythm: pack left column to top, centre video --- */
.hero-content:has(.hero-video),
.hero-content:has(.hero-right) {
  align-items: start !important;
}
.hero-content:has(.hero-video) > .hero-right,
.hero-content:has(.hero-right) > .hero-right {
  align-self: center !important;
}

/* --- 2. Tighter description bottom margin for split heroes only.
   v31.2 sets clamp(28px,3.2vw,40px) for all heroes; with the video
   anchoring visual weight on the right, split heroes look better
   with the price+CTA pulled up closer to the description. --- */
.hero-content:has(.hero-video) .hero-description,
.hero-content:has(.hero-right) .hero-description {
  margin-bottom: clamp(18px, 2vw, 24px) !important;
}

/* --- 3. Price stack: strikethrough $990, $792 amount, 20% OFF badge,
   note on its own line. Flex with wrap; the note has flex-basis:100%
   to force a new row so it never collides with the badge. --- */
.hero .hero-price {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: clamp(16px, 2vw, 24px) !important;
  margin-bottom: 0 !important;
}
.hero .hero-price .price-was {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(232, 112, 42, 0.55);
  letter-spacing: -0.01em;
  margin: 0;
}
.hero .hero-price .price-discount-badge {
  display: inline-flex;
  align-items: center;
  background: #E8702A;
  color: #FFFFFF;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  align-self: center;
  line-height: 1;
}
.hero .hero-price .price-note {
  flex-basis: 100%;
  margin: 4px 0 0 0 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 13px !important;
  font-weight: 500;
}

/* --- 4. CTA top spacing: tighten so the button sits closer to the
   newly weighted price stack. --- */
.hero-content:has(.hero-video) .hero-buttons,
.hero-content:has(.hero-right) .hero-buttons {
  margin-top: clamp(12px, 1.4vw, 18px) !important;
}

/* --- End TSA v32.1 patch --- */

/* ============================================================
   v34.1 MOBILE UX OVERHAUL (2026-04-20)
   Greg directive:
     1. Mobile L/R padding HALVED — elements feeling squashed.
     2. NO side-by-side elements at mobile — everything stacked.
     3. Header logo block — even padding above and below logo.
   ============================================================ */

/* --- 1. Mobile horizontal edge padding — mid-ground token.
   Default --v31-edge is clamp(16px, 4vw, 48px). v34.1 halved it to
   clamp(8px, 2vw, 24px) which was too aggressive — videos and buttons
   pulled to the left edge, text sat right on the viewport edge.
   v34.8 lands on a mid-ground clamp(14px, 3vw, 32px): consistently more
   breathing room than v34.1 while staying tighter than desktop. --- */
@media (max-width: 640px) {
  :root {
    --v31-edge: clamp(14px, 3vw, 32px);
  }
  /* Safety net: any element that renders as a full-bleed visual (video
     iframe, poster image, embedded widget) should still respect the
     edge token if its parent forgot to apply it. This catches the
     pulling-to-left-edge issue seen in Greg's v34.1 screenshots. */
  .hero-video,
  .hero-right,
  .video-wrap,
  .video-card,
  .video-container,
  .vimeo-wrap,
  .program-video,
  .testi-video,
  .hero iframe,
  section iframe,
  .hero video,
  section video {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --- 2. Force-stack ALL side-by-side elements at mobile.
   Catches every grid/flex pair across the site:
   - Hero splits and split layouts
   - Card grids of any column count
   - Footer columns (incl. .footer-bottom flex row)
   - Programs grids (featured + secondary)
   - Articles, podcast, reality, includes, transform grids
   - Form rows and CTA rows
   - Proof grid (was previously left as 2-col at 640px) --- */
@media (max-width: 640px) {
  .hero-split,
  .hero-row,
  .hero-content,
  .split,
  .reality-grid,
  .programs-featured,
  .programs-secondary,
  .podcast-grid,
  .articles-grid,
  .article-grid,
  .articles,
  .cards-grid-2,
  .cards-grid-3,
  .cards-grid-4,
  .cards-grid,
  .video-grid,
  .fit-grid,
  .pain-grid,
  .testi-grid,
  .coach-trio,
  .coach-grid,
  .transform-grid,
  .included-grid,
  .form-row,
  .cta-row,
  .programs-grid,
  .modules-grid,
  .lessons-grid,
  .trade-grid,
  .feature-grid,
  .stats-grid,
  .proof-grid,
  .price-grid,
  .price-row,
  .compare-grid,
  .pillars-grid,
  .pillar-grid,
  .module-grid,
  .lesson-grid,
  .resource-grid,
  .testimonial-grid,
  .three-col,
  .two-col,
  .four-col,
  footer .footer-content,
  footer .footer-cols,
  footer .footer-bottom {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* Footer bottom (legal + social) keeps left-align when stacked. */
  footer .footer-bottom {
    text-align: left !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  /* Buttons inside stacked rows take full width for tap target. */
  .hero-buttons a,
  .hero-buttons .btn,
  .cta-row a,
  .cta-row .btn,
  .programs-secondary a {
    width: 100% !important;
    text-align: center !important;
  }
  /* Mega-menu trade grid: collapse to single column at mobile. */
  .mega-trades-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- 3. Header logo block — guarantee even vertical padding around
   the logo on every page. Some templates set the header-inner height
   without enforcing a vertical padding rhythm, so the logo can appear
   squashed when an inline style overrides the centring. Lock both
   vertical padding and align-items so the logo always has equal space
   above and below. --- */
.site-header,
header.site-header,
#site-header {
  padding: 0 !important;
}
.site-header .header-inner,
header.site-header .header-inner,
#site-header .header-inner {
  display: flex !important;
  align-items: center !important;
  min-height: 72px !important;
  height: auto !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.site-header .header-logo,
header.site-header .header-logo,
#site-header .header-logo {
  display: flex !important;
  align-items: center !important;
}
.site-header .header-logo .logo-svg,
header.site-header .header-logo .logo-svg,
#site-header .header-logo .logo-svg {
  height: 48px !important;
  width: auto !important;
  display: block !important;
}
/* At mobile, scale the logo down slightly and tighten the band so
   the header doesn't dominate the viewport, but keep equal padding. */
@media (max-width: 640px) {
  .site-header .header-inner,
  header.site-header .header-inner,
  #site-header .header-inner {
    min-height: 60px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .site-header .header-logo .logo-svg,
  header.site-header .header-logo .logo-svg,
  #site-header .header-logo .logo-svg {
    height: 40px !important;
  }
}

/* --- End TSA v34.1 patch --- */

/* ============================================================
   v34.8 PATCH (2026-04-20) — Greg live-site feedback
     1. Mobile padding mid-ground (handled earlier in this file)
     2. Learning Hub hamburger "stretched" — kill old inline span margins
     3. Learning Hub double floating CTA — stronger .float-pill kill
     4. Legacy inline .hamburger rules stacking — force consistent geometry
   ============================================================ */

/* --- Stronger kill on legacy .float-pill. Earlier v31.1 killed it
   at desktop+mobile, but stale inline rules on a handful of pages
   (e.g. /learning-hub/index.html) re-enable display: flex above the
   external CSS cascade. Layer visibility: hidden + pointer-events: none
   to neutralise any JS that toggles a `.show` class later. --- */
body .float-pill,
#floatPill,
.float-pill,
.float-pill.show {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* --- Hamburger geometry: force consistent 3-line glyph regardless of
   whether the page carries older inline margin rules or newer gap rules.
   Removing the span margin eliminates the "stretched" appearance where
   legacy margin: 5px 0 stacked with new parent gap: 5px. --- */
.hamburger {
  display: none;
  flex-direction: column !important;
  gap: 5px !important;
  cursor: pointer;
  padding: 8px !important;
  z-index: 1002;
  width: auto !important;
  height: auto !important;
}
.hamburger span {
  display: block !important;
  width: 24px !important;
  height: 2px !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  transition: all 0.3s ease !important;
}
@media (max-width: 900px) {
  .hamburger {
    display: flex !important;
    pointer-events: auto !important;
  }
}
/* --- End TSA v34.8 patch --- */

/* ============================================================
   v34.9 PATCH (2026-04-20) — Greg mobile review round 2
     1. Homepage-parity mobile padding — trade/program pages have
        inline CSS that stacks .section-content { padding: 20px }
        on top of the outer <section> --v31-edge padding. That
        double-pad makes white/form/video sections feel over-padded
        on mobile. Homepage uses .section-inner with NO inner
        padding — the outer <section> supplies ALL horizontal edge
        padding. Match that behaviour on every page: zero the inner
        container's horizontal padding, let --v31-edge do its job.
     2. Centre hero + CTA button rows on mobile. Some pages have
        inline flex styles without justify-content, defaulting to
        flex-start (left-aligned). Force centre on all common
        button-row class names.
     3. Header logo breathing room — v34.1 set min-height 60px with
        10px top/bottom padding on a 40px logo. Visually the logo
        pixel-edge can still touch the 3px orange border below. Bump
        padding-bottom for obvious clear space.
   ============================================================ */
@media (max-width: 640px) {
  /* (1) Homepage-parity padding: kill inner-container horizontal
     padding so only the outer <section> --v31-edge drives mobile
     horizontal padding. Matches the homepage's .section-inner
     behaviour (max-width + margin auto, NO padding). */
  .section-content,
  section .section-content,
  section > .section-content,
  .form-section .section-content,
  .transform-section .section-content,
  .articles-section .section-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* (2) Centre hero + CTA button rows on mobile. Cover every common
     button-row pattern used across homepage + trade variants. */
  .hero-buttons,
  .hero-cta-row,
  .cta-row,
  .final-cta-buttons,
  .hero-content .hero-buttons,
  .hero .hero-buttons {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* (3) Header logo breathing room — clear space between logo
     bottom and the 3px orange border-bottom of .site-header. */
  .site-header .header-inner,
  header.site-header .header-inner,
  #site-header .header-inner {
    min-height: 66px !important;
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }
}
/* --- End TSA v34.9 patch ---
   End TSA v31 override ---------------------------------------- */