/* Presentation only: preserve the source content and desktop composition. */
@media (max-width: 767px) {
  main :has(> .phone) { max-width: 100%; }
  .hero-phone { position: relative; inset: auto; width: 230px; min-width: 0; max-width: 80%; margin: 24px auto 0; }
  .phone { border-radius: 30px; padding: 7px; }
  .phone > .screen { border-radius: 24px; }
  .phone::after { height: 12px; top: 12px; width: 26%; }
  .hero-browser > .bar { padding-inline: 8px; gap: 4px; }
  .hero-browser > .bar i { width: 6px; height: 6px; flex-shrink: 0; }
  .hero-browser > .bar span { min-width: 0; padding-inline: 8px; font-size: 10px; }
}