/* ===========================================
   Sitewide page background fade
   Desktop: blue top → black from ~40%
   Mobile:  blue longer → black from ~70%
   Coaches funnel v2 keeps its own section chain.
   =========================================== */

html:has(body.twx-page-fade) {
  background-color: #030405;
}

body.twx-page-fade {
  /* Desktop default — black starts ~40% down the page */
  background-color: #030405 !important;
  background-image: linear-gradient(
    180deg,
    #0a1520 0%,
    #123046 10%,
    #1a4a6e 20%,
    #1e4f78 28%,
    #163852 34%,
    #0c1c2c 40%,
    #070d14 52%,
    #05070b 70%,
    #030405 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-attachment: scroll !important;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Mobile / tablet — keep blue longer (~70%), black at the end */
@media (max-width: 1024px) {
  body.twx-page-fade {
    background-image: linear-gradient(
      180deg,
      #0a1520 0%,
      #123046 12%,
      #1a4a6e 28%,
      #1e4f78 42%,
      #163852 55%,
      #123046 65%,
      #0a1826 72%,
      #070d14 82%,
      #030405 100%
    ) !important;
  }
}

/*
  Let the body gradient show through page chrome.
  Skip .coaches-funnel-v2 — it already has a matched section fade.
*/
body.twx-page-fade:not(.coaches-funnel-v2) section,
body.twx-page-fade:not(.coaches-funnel-v2) .hero-section,
body.twx-page-fade:not(.coaches-funnel-v2) .hero-background,
body.twx-page-fade:not(.coaches-funnel-v2) .offers-page-bg,
body.twx-page-fade:not(.coaches-funnel-v2) .offers-page-main,
body.twx-page-fade:not(.coaches-funnel-v2) .micro-funnel-hero,
body.twx-page-fade:not(.coaches-funnel-v2) .micro-funnel-hero .hero-background,
body.twx-page-fade:not(.coaches-funnel-v2) .futuristic-footer,
body.twx-page-fade:not(.coaches-funnel-v2) .footer-section,
body.twx-page-fade:not(.coaches-funnel-v2) .coaches-footer,
body.twx-page-fade:not(.coaches-funnel-v2) .main-wrapper,
body.twx-page-fade:not(.coaches-funnel-v2) .section-bg {
  background-color: transparent !important;
  background-image: none !important;
}

/* Beat ID-based coaches mobile section fills */
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #hero,
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #hero .hero-background,
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #who,
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #build,
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #process,
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #about,
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #reviews,
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #why,
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #trust,
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #apply,
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #faq,
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #final-cta,
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #ready,
body.twx-page-fade:not(.coaches-funnel-v2).coaches-page #book {
  background: transparent !important;
  background-image: none !important;
}

/* Soft blue wash on short landing pages so top never feels flat-black */
body.twx-page-fade.offers-page .offers-page-bg,
body.twx-page-fade.micro-funnel-page .hero-background {
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(30, 79, 120, 0.45) 0%,
    transparent 70%
  ) !important;
}