/* Phase 5I footer position correction.
   Keeps Phase 5H concept, but makes Blob3 actually sit behind the text/buttons.
   The issue was not the dark text; the light Blob3 surface was too low/behind the stack. */

.main-footer,
.main-footer.legal-footer {
  overflow: visible !important;
  min-height: clamp(500px, 34vw, 650px) !important;
  margin-top: clamp(90px, 8vw, 170px) !important;
}

.main-footer .footer-blob3,
.main-footer.legal-footer .footer-blob3,
.footer-blob3 {
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  width: clamp(1260px, 84vw, 1820px) !important;
  max-width: none !important;
  height: auto !important;
  right: clamp(-420px, -20vw, -245px) !important;
  bottom: clamp(-260px, -12vw, -175px) !important;
  opacity: .98 !important;
  transform: rotate(-1deg) scale(1.02) !important;
  transform-origin: 70% 78% !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: drop-shadow(0 -20px 52px rgba(205, 91, 255, .24)) !important;
}

.main-footer .footer-title,
.main-footer .footer-tagline,
.main-footer .footer-nav,
.main-footer .footer-copy,
.main-footer.legal-footer .footer-title,
.main-footer.legal-footer .footer-tagline,
.main-footer.legal-footer .footer-nav,
.main-footer.legal-footer .footer-copy,
.footer-title,
.footer-tagline,
.footer-nav,
.footer-copy {
  z-index: 2 !important;
}

.main-footer .footer-title,
.main-footer.legal-footer .footer-title,
.footer-title {
  bottom: clamp(168px, 10.2vw, 220px) !important;
}

.main-footer .footer-tagline,
.main-footer.legal-footer .footer-tagline,
.footer-tagline {
  bottom: clamp(130px, 7.8vw, 176px) !important;
}

.main-footer .footer-nav,
.main-footer.legal-footer .footer-nav,
.footer-nav {
  bottom: clamp(74px, 5.1vw, 118px) !important;
}

.main-footer .footer-copy,
.main-footer.legal-footer .footer-copy,
.footer-copy {
  bottom: clamp(30px, 2.35vw, 58px) !important;
}

@media (max-width: 1180px) {
  .main-footer .footer-blob3,
  .main-footer.legal-footer .footer-blob3,
  .footer-blob3 {
    width: clamp(1080px, 132vw, 1420px) !important;
    right: clamp(-620px, -54vw, -360px) !important;
    bottom: clamp(-250px, -18vw, -150px) !important;
  }
}

@media (max-width: 840px) {
  .main-footer,
  .main-footer.legal-footer {
    min-height: 470px !important;
    margin-top: 76px !important;
    overflow: visible !important;
  }

  .main-footer .footer-blob3,
  .main-footer.legal-footer .footer-blob3,
  .footer-blob3 {
    width: 1060px !important;
    right: -575px !important;
    bottom: -135px !important;
    opacity: .98 !important;
    transform: rotate(-1deg) scale(1) !important;
  }

  .main-footer .footer-title,
  .main-footer.legal-footer .footer-title,
  .footer-title {
    bottom: 238px !important;
  }

  .main-footer .footer-tagline,
  .main-footer.legal-footer .footer-tagline,
  .footer-tagline {
    bottom: 202px !important;
  }

  .main-footer .footer-nav,
  .main-footer.legal-footer .footer-nav,
  .footer-nav {
    bottom: 102px !important;
  }

  .main-footer .footer-copy,
  .main-footer.legal-footer .footer-copy,
  .footer-copy {
    bottom: 52px !important;
  }
}

@media (max-width: 500px) {
  .main-footer,
  .main-footer.legal-footer {
    min-height: 500px !important;
  }

  .main-footer .footer-blob3,
  .main-footer.legal-footer .footer-blob3,
  .footer-blob3 {
    width: 1100px !important;
    right: -660px !important;
    bottom: -145px !important;
  }
}