/* Fill the phone's visible height while keeping the globe beside the actions.
   Its 300px source width limits scale to the clear space beside the CTA stack. */
@media (max-width: 720px) {
  .hero {
    min-height: 100svh;
    container-type: inline-size;
    --hero-scene-height: clamp(330px, 64svh, calc((100vw - var(--hero-action-width) - 64px) * 3.3067));
  }
  .hero .hero-copy.shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(24px, 1fr) auto minmax(24px, 1fr) auto minmax(28px, 1fr) var(--hero-action-stack);
    flex: 1 0 auto;
    padding-top: 0;
    padding-bottom: calc(var(--hero-scene-height) * .9 - var(--hero-action-stack));
  }
  .hero .hero-copy > .eyebrow { grid-row: 2; margin: 0; }
  .hero .hero-copy > .hero-title { grid-row: 4; margin: 0; }
  .hero .hero-copy > .hero-actions { grid-row: 6; margin: 0; align-self: start; justify-self: start; }
  .hero .hero-art {
    background-position: calc(100% + var(--hero-action-width) + 36px - 100vw + var(--hero-scene-height) * .610887) bottom;
  }
}
@supports (width: 1cqi) {
  @media (max-width: 720px) {
    .hero {
      --hero-scene-height: clamp(330px, 64svh, calc((100cqi - var(--hero-action-width) - 48px) * 3.3067));
    }
    .hero .hero-art {
      background-position: calc(100% + var(--hero-action-width) + 36px - 100cqi + var(--hero-scene-height) * .610887) bottom;
    }
  }
}