body {
  overflow-x: hidden;
}

.hero-copy,
.hero dl,
.hero dl div,
.header-actions {
  min-width: 0;
}

.header-actions {
  flex: none;
}

/* Keep the latest full-height app captures legible without cropping. */
.hero-art {
  min-height: 680px;
}

.phone {
  height: 623px;
}

.screens {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.screens figure:nth-child(2) {
  margin-top: 54px;
}

.screens img {
  aspect-ratio: 1344 / 2992;
}

@media (max-width: 1040px) {
  .screens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .screens figure:nth-child(2) {
    margin-top: 40px;
  }
}

dd,
.hero h1,
.intro {
  overflow-wrap: break-word;
}

@media (max-width: 620px) {
  .hero h1 {
    max-width: 100%;
    font-size: clamp(40px, 11.5vw, 46px);
  }

  .intro,
  .hero dl,
  .hero dl div {
    width: 100%;
    max-width: 100%;
  }

  .hero dd {
    max-width: 62%;
  }

  .hero-art {
    min-height: 590px;
  }

  .phone {
    height: 545px;
  }

  .screens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .screens figure:nth-child(2) {
    margin-top: 28px;
  }
}