/* Homepage-only mobile corrections. The shared site bundle is intentionally
   untouched so these rules cannot drift any other route. */

/* Before age confirmation, the paused hero remains visible as atmosphere but
   cannot compete with the glass verification panel. */
html:not(.age-verified) body[data-page="home"] .site-hero-media {
  filter: blur(14px) saturate(.72) brightness(.72);
  transform: scale(1.035);
}

/* R5.6.3: the controlled preview remains unfiltered. The approved glass gate
   supplies the obscuring effect without rebuilding iOS's live video layer. */
html:not(.age-verified) body[data-page="home"] .accuracy-hero-sequence {
  filter: none !important;
  transform: none !important;
}

html:not(.age-verified) body[data-page="home"] .site-hero-inner {
  opacity: .28;
}

html:not(.age-verified) body[data-page="home"] .hero-endcard,
html:not(.age-verified) body[data-page="home"] .hero-whitecard {
  visibility: hidden !important;
}

@media (max-width: 1199.98px) {
  body[data-page="home"] .mobile-hero {
    display: none !important;
  }

  body[data-page="home"] .site-hero {
    height: 100svh;
    min-height: 560px;
  }

  @supports not (height: 100svh) {
    body[data-page="home"] .site-hero { height: 100vh; }
  }

  body[data-page="home"] .site-header:not(.is-stuck):not(.has-panel) {
    --nav-fg: #fff;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-page="home"] .site-header.is-stuck,
  body[data-page="home"] .site-header.has-panel {
    --nav-fg: #383e42;
    background: rgba(212, 207, 201, .92);
    border: 0;
    box-shadow: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  body[data-page="home"] .site-header .nav-logo img {
    width: min(220px, 58vw);
    height: auto;
    object-fit: contain;
    object-position: left center;
  }

  body[data-page="home"] .site-hero-inner {
    padding-bottom: max(42px, env(safe-area-inset-bottom));
  }

  /* A real branded frame replaces a blank white screen if iOS refuses to
     start the separately loaded end-card movie. */
  body[data-page="home"] .hero-endcard.mobile-static-fallback .hero-endcard-media {
    visibility: hidden;
  }

  body[data-page="home"] .hero-endcard.mobile-static-fallback .hero-endcard-frame::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(72%, 520px);
    aspect-ratio: 276.5 / 34;
    transform: translate(-50%, -105%);
    background: url('./assets/checkout/group-4.png') center / contain no-repeat;
  }

  body[data-page="home"] .hero-endcard.mobile-static-fallback .hero-endcard-contact {
    left: 50% !important;
    top: 58% !important;
    opacity: 1;
    font-size: clamp(12px, 3.15vw, 17px);
  }

  /* The canvas reflow otherwise preserves desktop-sized pillar typography. */
  body[data-page="home"] article[aria-label$=" pillar"] > div,
  body[data-page="home"] article[aria-label$=" pillar"] > div > div {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="home"] article[aria-label$=" pillar"] > div > div {
    height: clamp(540px, 142vw, 680px) !important;
  }

  body[data-page="home"] article[aria-label$=" pillar"] .pillar-copy {
    gap: 18px !important;
    padding: 28px 24px 30px !important;
  }

  body[data-page="home"] article[aria-label$=" pillar"] .pillar-copy > p {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
  }

  body[data-page="home"] article[aria-label$=" pillar"] .pillar-copy > p:nth-child(1) {
    font-size: clamp(34px, 10vw, 46px) !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  body[data-page="home"] article[aria-label$=" pillar"] .pillar-copy > p:nth-child(2) {
    font-size: clamp(25px, 7.2vw, 32px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.035em !important;
  }

  body[data-page="home"] article[aria-label$=" pillar"] .pillar-copy > p:nth-child(3) {
    font-size: clamp(16px, 4.5vw, 19px) !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }
}