html,
body {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

html {
  background: var(--bg);
}

body > header,
body > main,
body > footer,
body > .sticky-download {
  width: 100%;
  max-width: 100%;
}

main,
.hero,
.hero-copy,
.phone-stage,
.story-strip,
.catalog,
.steps,
.final-cta {
  min-width: 0;
}

@media (max-width: 560px) {
  .nav {
    width: 100%;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .hero,
  .catalog,
  .steps,
  .story-strip,
  .final-cta,
  footer {
    width: 100%;
    max-width: 100%;
  }

  .hero-copy,
  .promo-offer,
  .download-button,
  .phone-stage {
    max-width: 100%;
  }

  .promo-offer {
    width: 100%;
  }

  h1 {
    font-size: clamp(38px, 12.5vw, 54px);
    overflow-wrap: anywhere;
  }

  .phone-main {
    max-width: calc(100vw - 40px);
  }
}