/* =========================================================================
   RESPONSIVE SCALING LAYER  —  loaded on every page
   -------------------------------------------------------------------------
   DESKTOP (>=1024px) IS INTENTIONALLY UNTOUCHED. Every rule below lives
   inside a `max-width` media query, so nothing changes at/above the `lg`
   breakpoint the desktop design targets.

   Rules only affect elements that hardcode a value with NO responsive
   variant. The `:not([class*=":text-["])` / `:not([class*=":py-"])` style
   guards skip elements that already have an sm:/md:/lg: variant, so their
   authored responsive sizing always wins (a class like
   `text-[32px] md:text-[54px]` contains the substring `:text-[`, so EVERY
   text rule below skips it and the design's own breakpoints take over).

   These rules are unlayered + `!important`, so they reliably beat Tailwind's
   `@layer utilities` output regardless of injection order.

   To tune: change the px/vh values here once — it applies to all pages.
   ========================================================================= */

/* =======================================================================
   TABLET AND BELOW  (<= 1023px)
   ======================================================================= */
@media (max-width: 1023px) {
  /* ---- Kill residual horizontal scroll (off-screen mobile menu, full-bleed
          media). Desktop (>=1024px) is unaffected. ---- */
  html { overflow-x: hidden; }

  /* ---- Display / heading sizes (only when hardcoded with no variant) ---- */
  [class*="text-[60px]"]:not([class*=":text-["]) { font-size: 44px !important; }
  [class*="text-[56px]"]:not([class*=":text-["]) { font-size: 42px !important; }
  [class*="text-[54px]"]:not([class*=":text-["]) { font-size: 40px !important; }
  [class*="text-[52px]"]:not([class*=":text-["]) { font-size: 39px !important; }
  [class*="text-[50px]"]:not([class*=":text-["]) { font-size: 38px !important; }
  [class*="text-[48px]"]:not([class*=":text-["]) { font-size: 36px !important; }
  [class*="text-[46px]"]:not([class*=":text-["]) { font-size: 34px !important; }
  [class*="text-[44px]"]:not([class*=":text-["]) { font-size: 33px !important; }
  [class*="text-[40px]"]:not([class*=":text-["]) { font-size: 32px !important; }
  [class*="text-[38px]"]:not([class*=":text-["]) { font-size: 30px !important; }
  [class*="text-[36px]"]:not([class*=":text-["]) { font-size: 29px !important; }
  [class*="text-[34px]"]:not([class*=":text-["]) { font-size: 28px !important; }
  [class*="text-[32px]"]:not([class*=":text-["]) { font-size: 27px !important; }
  [class*="text-[30px]"]:not([class*=":text-["]) { font-size: 26px !important; }

  /* ---- Body / sub-head sizes ---- */
  [class*="text-[28px]"]:not([class*=":text-["]) { font-size: 24px !important; }
  [class*="text-[26px]"]:not([class*=":text-["]) { font-size: 23px !important; }
  [class*="text-[24px]"]:not([class*=":text-["]) { font-size: 21px !important; }
  [class*="text-[23px]"]:not([class*=":text-["]) { font-size: 20px !important; }
  [class*="text-[22px]"]:not([class*=":text-["]) { font-size: 19px !important; }
  [class*="text-[20px]"]:not([class*=":text-["]) { font-size: 18px !important; }
  [class*="text-[18px]"]:not([class*=":text-["]) { font-size: 17px !important; }

  /* ---- Line-heights paired with the sizes above ---- */
  [class*="leading-[70px]"]:not([class*=":leading-["]) { line-height: 52px !important; }
  [class*="leading-[60px]"]:not([class*=":leading-["]) { line-height: 46px !important; }
  [class*="leading-[42px]"]:not([class*=":leading-["]) { line-height: 36px !important; }
  [class*="leading-[38px]"]:not([class*=":leading-["]) { line-height: 32px !important; }
  [class*="leading-[34px]"]:not([class*=":leading-["]) { line-height: 30px !important; }
  [class*="leading-[32px]"]:not([class*=":leading-["]) { line-height: 28px !important; }
  [class*="leading-[28px]"]:not([class*=":leading-["]) { line-height: 26px !important; }
  [class*="leading-[26px]"]:not([class*=":leading-["]) { line-height: 24px !important; }
  .eyebrow { font-size: 16px !important; }

  /* ---- Spacing: gently tighten large, NON-responsive vertical rhythm. ---- */
  [class*="py-24"]:not([class*=":py-"]) { padding-top: 64px !important; padding-bottom: 64px !important; }
  [class*="py-20"]:not([class*=":py-"]) { padding-top: 56px !important; padding-bottom: 56px !important; }
  [class*="py-15"]:not([class*=":py-"]) { padding-top: 52px !important; padding-bottom: 52px !important; }
  [class*="py-12"]:not([class*=":py-"]) { padding-top: 44px !important; padding-bottom: 44px !important; }
  [class*="mb-16"]:not([class*=":mb-"]) { margin-bottom: 52px !important; }
  [class*="mb-12"]:not([class*=":mb-"]) { margin-bottom: 44px !important; }

  /* ---- Oversized fixed hero heights ---- */
  [class*="h-[816px]"]:not([class*=":h-["]) { height: 75vh !important; }
  .hero-section { height: 70vh !important; }
}

/* =======================================================================
   MOBILE  (<= 639px)
   ======================================================================= */
@media (max-width: 639px) {
  /* ---- Display / heading sizes ---- */
  [class*="text-[60px]"]:not([class*=":text-["]) { font-size: 34px !important; }
  [class*="text-[56px]"]:not([class*=":text-["]) { font-size: 32px !important; }
  [class*="text-[54px]"]:not([class*=":text-["]) { font-size: 32px !important; }
  [class*="text-[52px]"]:not([class*=":text-["]) { font-size: 31px !important; }
  [class*="text-[50px]"]:not([class*=":text-["]) { font-size: 30px !important; }
  [class*="text-[48px]"]:not([class*=":text-["]) { font-size: 29px !important; }
  [class*="text-[46px]"]:not([class*=":text-["]) { font-size: 28px !important; }
  [class*="text-[44px]"]:not([class*=":text-["]) { font-size: 27px !important; }
  [class*="text-[40px]"]:not([class*=":text-["]) { font-size: 26px !important; }
  [class*="text-[38px]"]:not([class*=":text-["]) { font-size: 25px !important; }
  [class*="text-[36px]"]:not([class*=":text-["]) { font-size: 24px !important; }
  [class*="text-[34px]"]:not([class*=":text-["]) { font-size: 23px !important; }
  [class*="text-[32px]"]:not([class*=":text-["]) { font-size: 22px !important; }
  [class*="text-[30px]"]:not([class*=":text-["]) { font-size: 21px !important; }

  /* ---- Body / sub-head sizes ---- */
  [class*="text-[28px]"]:not([class*=":text-["]) { font-size: 22px !important; }
  [class*="text-[26px]"]:not([class*=":text-["]) { font-size: 21px !important; }
  [class*="text-[24px]"]:not([class*=":text-["]) { font-size: 19px !important; }
  [class*="text-[23px]"]:not([class*=":text-["]) { font-size: 16px !important; }
  [class*="text-[22px]"]:not([class*=":text-["]) { font-size: 16px !important; }
  [class*="text-[20px]"]:not([class*=":text-["]) { font-size: 15px !important; }
  [class*="text-[18px]"]:not([class*=":text-["]) { font-size: 16px !important; }

  /* ---- Line-heights ---- */
  [class*="leading-[70px]"]:not([class*=":leading-["]) { line-height: 40px !important; }
  [class*="leading-[60px]"]:not([class*=":leading-["]) { line-height: 38px !important; }
  [class*="leading-[42px]"]:not([class*=":leading-["]) { line-height: 30px !important; }
  [class*="leading-[38px]"]:not([class*=":leading-["]) { line-height: 28px !important; }
  [class*="leading-[34px]"]:not([class*=":leading-["]) { line-height: 24px !important; }
  [class*="leading-[32px]"]:not([class*=":leading-["]) { line-height: 26px !important; }
  [class*="leading-[28px]"]:not([class*=":leading-["]) { line-height: 24px !important; }
  [class*="leading-[26px]"]:not([class*=":leading-["]) { line-height: 22px !important; }
  .eyebrow { font-size: 14px !important; }

  /* ---- Spacing: tighten large, NON-responsive vertical rhythm only.
          Guards skip responsive combos (e.g. `py-8 md:py-12`). ---- */
  [class*="py-24"]:not([class*=":py-"]) { padding-top: 48px !important; padding-bottom: 48px !important; }
  [class*="py-20"]:not([class*=":py-"]) { padding-top: 44px !important; padding-bottom: 44px !important; }
  [class*="py-15"]:not([class*=":py-"]) { padding-top: 40px !important; padding-bottom: 40px !important; }
  [class*="py-12"]:not([class*=":py-"]) { padding-top: 32px !important; padding-bottom: 32px !important; }
  [class*="mb-16"]:not([class*=":mb-"]) { margin-bottom: 40px !important; }
  [class*="mb-12"]:not([class*=":mb-"]) { margin-bottom: 32px !important; }
  [class*="mb-10"]:not([class*=":mb-"]) { margin-bottom: 28px !important; }
  [class*="mt-[38px]"]:not([class*=":mt-"]) { margin-top: 28px !important; }
  [class*="gap-[38px]"]:not([class*=":gap-"]) { gap: 28px !important; }
  [class*="gap-y-16"]:not([class*=":gap-y-"]) { row-gap: 56px !important; }

  /* ---- Oversized fixed hero heights ---- */
  [class*="h-[816px]"]:not([class*=":h-["]) { height: 60vh !important; }
  .hero-section { height: 62vh !important; }
}

/* =======================================================================
   FOOTER TABLET + MOBILE LAYOUT  (<= 1023px, below lg)
   Keeps stacked footer through md (768px+) — desktop 12-col grid stays at lg+.
   ======================================================================= */
@media (max-width: 1023px) {
  .footer-main > .footer-top-grid,
  .footer-main > .footer-bottom-grid {
    display: contents;
  }

  .footer-top-grid > div,
  .footer-bottom-grid > div:not(.hidden) {
    width: 100%;
    padding-left: 0 !important;
  }

  /* Bottom-row spacer is md:block in markup — keep hidden until desktop grid */
  .footer-bottom-grid > div.hidden {
    display: none !important;
  }

  /* Brand → Company → For Professionals → Legal → Sign Up → Resources → Contact */
  .footer-top-grid > div:nth-child(1) {
    order: 1;
  }
  .footer-top-grid > div:nth-child(2) {
    order: 2;
    margin-top: 2.5rem;
  }
  .footer-top-grid > div:nth-child(3) {
    order: 3;
    margin-top: 2.5rem;
  }
  .footer-top-grid > .footer-legal {
    order: 4;
    margin-top: 2.5rem;
  }
  .footer-top-grid > .footer-signup {
    order: 5;
    margin-top: 1.75rem;
  }
  .footer-bottom-grid > div:nth-child(2) {
    order: 6;
    margin-top: 2.5rem;
  }
  .footer-bottom-grid > div:nth-child(3) {
    order: 7;
    margin-top: 2.5rem;
  }
  .footer-main > div[class*="border-t"] {
    order: 8;
    margin-top: 2.5rem;
    width: 100%;
  }

}

/* Summer 2027 section — Reserve CTA (all pages) */
.reserve-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 59px;
  padding-inline: 32px;
  border-radius: 100px;
  background-color: #555555;
  color: #ffffff;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
}
.reserve-cta:hover {
  background-color: #000000;
  transform: scale(1.03);
}

/* Footnote / disclaimer text (asterisk-marked) */
.footnote {
  font-size: 12px !important;
  line-height: 1.5 !important;
}
@media (min-width: 768px) {
  .footnote {
    font-size: 14px !important;
  }
}

/* Footer links hidden until ready — remove .footer-link-hidden to show again */
.footer-link-hidden,
.footer-section-hidden {
  display: none !important;
}

/* Header nav: Contact Us & Partner hidden until ready — remove rules to show again */
#main-header a[href="support.html"],
#main-header a[href="partner.html"],
#mobile-menu a[href="support.html"],
#mobile-menu a[href="partner.html"] {
  display: none !important;
}