/* Mobile hero order: title, phone showcase, then the supporting copy. */
@media (max-width: 900px) {
  .hero__inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero__copy { display: contents; }
  .hero__title { order: 0; margin-bottom: 0; }
  .hero__stack { order: 1; margin-top: 22px; margin-bottom: 20px; height: calc(clamp(390px, 78vw, 580px) + 88px); }
  .hero .eyebrow { order: 2; align-self: center; }
  .hero__sub { order: 3; }
  .hero__cta { order: 4; }
  .hero__proof { justify-content: center; text-align: center; order: 5; margin-bottom: 56px; }
  /* Reclaim the smaller pills' height without changing phone/canvas dimensions. */
  .phone-scene, .phone-poster { inset: 32px -8px; }
  /* Reduce every pill dimension by 15%; GSAP keeps its existing entrance scale. */
  .hero-chip { min-width: 173.4px; padding: 8.5px 15.3px; border-width: .85px; }
  .hero-chip--community { min-width: 200.6px; }
  .hero-chip__emblem { gap: 5.1px; min-height: 51px; }
  .hero-chip__copy { gap: 1.7px; }
  .hero-chip__number { font-size: 27.2px; }
  .hero-chip__branch { width: 22.95px; height: 51px; }
  .hero-chip__label { font-size: 8.925px; }
  .hero-chip--laurel .hero-chip__label { gap: 4.25px; }
  .hero-chip__star { width: 8.5px; height: 8.5px; }
  .hero__title, .hero .eyebrow, .hero__sub, .hero__cta, .hero__proof { position: relative; z-index: 3; }
}
@media (max-width: 480px) {
  .hero__stack { height: clamp(398px, calc(100svh - 386px), 483px); }
}

/* Short phone screens still show the complete showcase above the download dock. */
@media (max-width: 480px) and (max-height: 740px) {
  .hero { padding-top: 92px; }
  .hero .hero__title { font-size: clamp(28px, 9vw, 36px); }
  .hero__stack { height: clamp(308px, calc(100svh - 282px), 418px); }
}