/* Phone header (Aryan, 2026-11-01, option A): a full-screen photo with the words on it.
   No fade over the photo. "html body" and the doubled classes outrank each page's own phone rules. */
@media (max-width: 768px) {
  html body .hero, html body .page-hero.page-hero--studio, html body .page-hero.page-hero--pulse, html body .page-hero.page-hero--about, html body .spore-page .spore-main > section:first-child {
    position: relative !important; display: block !important; min-height: calc(100svh - var(--nav-h)) !important;
    padding: 0 !important; background: #e9dfd2; overflow: hidden;
  }
  html body .hero::after, html body .page-hero.page-hero--studio::after, html body .page-hero.page-hero--pulse::after, html body .page-hero.page-hero--about::after { display: none !important; }

  html body .hero .hero__bg, html body .page-hero.page-hero--studio .page-hero__bg, html body .page-hero.page-hero--pulse .page-hero__bg, html body .page-hero.page-hero--about .page-hero__bg, html body .spore-page .spore-main > section:first-child > div:first-child {
    position: absolute !important; inset: 0 !important; height: auto !important; min-height: 0 !important;
  }
  html body #top.hero .hero__bg img, html body .page-hero.page-hero--studio .page-hero__bg img, html body .page-hero.page-hero--pulse .page-hero__bg img, html body .page-hero.page-hero--about .page-hero__bg img, html body .spore-page .spore-main > section:first-child > div:first-child img {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: 50% 100% !important; opacity: 1 !important;
  }

  html body .hero .hero__inner { position: relative; z-index: 2; display: block; }
  html body .hero .hero__content, html body .page-hero.page-hero--studio .page-hero__inner, html body .page-hero.page-hero--pulse .page-hero__inner, html body .page-hero.page-hero--about .page-hero__inner {
    position: relative; z-index: 2; max-width: none; padding-top: 1.5rem !important; padding-bottom: 1.5rem !important;
  }
  html body .spore-page .spore-main > section:first-child > div.relative.-mt-\[104px\] { position: relative; z-index: 2; margin-top: 0 !important; padding-top: 1.5rem !important; }

  /* Each photo is as wide as the phone and sits on the bottom edge, so the people take a fixed share of
     the width. This space under the words matches it: the words end above their heads on any phone. */
  html body .hero .hero__content { padding-bottom: calc(80vw - 4.5rem) !important; }
  html body .page-hero.page-hero--studio .page-hero__inner { padding-bottom: 88vw !important; }
  html body .page-hero.page-hero--pulse .page-hero__inner { padding-bottom: 88vw !important; }
  html body .page-hero.page-hero--about .page-hero__inner { padding-bottom: 80vw !important; }
  html body .spore-page .spore-main > section:first-child > div.relative.-mt-\[104px\] { padding-bottom: 96vw !important; }

  /* Home: the button sits beside her head, leaving no room for this line. The pop-up says the same thing. */
  html body .hero .hero__support { display: none; }

  html body .hero h1, html body .page-hero.page-hero--studio h1, html body .page-hero.page-hero--pulse h1, html body .page-hero.page-hero--about h1 { font-size: 2.3rem !important; }
  html body .hero__sub, html body .page-hero--pulse .page-hero__intro, html body .page-hero--about .page-hero__intro { color: var(--walnut) !important; font-weight: 500; max-width: 30ch; }
  html body .hero__cta .btn, html body .page-hero--studio .page-hero__cta .btn, html body .page-hero--pulse .page-hero__cta .btn, html body .page-hero--about .page-hero__cta .btn { width: auto !important; }
  html body .page-hero--studio .hero-lockup, html body .page-hero--pulse .hero-lockup { height: 44px !important; margin-bottom: .8rem !important; }

  /* Comfortable tap targets, 44px tall. Links inside a sentence grow with padding so the line spacing stays. */
  .st-jump, .ab-jump, .st-index a { display: inline-flex; align-items: center; min-height: 44px; }
  .ab-new a, .pu-included a { padding-block: .8rem; }
}

/* Narrow phones: the headline wraps more and the button would touch her hair. */
@media (max-width: 360px) {
  html body .hero .hero__content { padding-bottom: calc(80vw - 1rem) !important; }
}