body { overflow-x: hidden; }
.hero-copy { min-width: 0; }

/* The first screen is the app itself, not a phone mock-up. */
.device-wrap {
  width: min(100%, 440px);
  padding: 0;
}

.device-glow { inset: 12% -8% 3%; }

.device-screen {
  max-height: 680px;
  border: 10px solid #172237;
  border-bottom-width: 0;
  border-radius: 44px 44px 0 0;
  box-shadow: 0 26px 55px rgba(8, 61, 143, .32);
}

/* Keep the parent section simple and let the book be the visual focus. */
.parents-book {
  width: 250px;
  height: 250px;
  background: transparent;
}

.parents-book img {
  width: 240px;
  height: 240px;
}

.parents-section > div > p:not(.eyebrow) {
  font-size: 22px;
}

/* Let the landing use the available desktop width while retaining readable gutters. */
@media (min-width: 901px) {
  .site-header,
  .site-footer {
    width: min(1320px, calc(100% - 96px));
  }

  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(430px, 560px);
    padding-left: max(48px, calc((100% - 1320px) / 2));
    padding-right: max(48px, calc((100% - 1320px) / 2));
  }

  .section {
    padding-left: max(48px, calc((100% - 1320px) / 2));
    padding-right: max(48px, calc((100% - 1320px) / 2));
  }

  .cards-section {
    grid-template-columns: .9fr 1.1fr;
  }

  .parents-section {
    grid-template-columns: 250px minmax(0, 620px);
    justify-content: start;
    gap: 70px;
  }
}

@media (max-width: 640px) {
  .hero h1 {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    font-size: 48px;
    overflow-wrap: anywhere;
  }

  .device-wrap { width: min(100%, 330px); }
  .device-screen {
    border-width: 7px;
    border-bottom-width: 0;
    border-radius: 30px 30px 0 0;
  }

  .parents-book {
    width: 200px;
    height: 200px;
  }

  .parents-book img {
    width: 195px;
    height: 195px;
  }

  .parents-section > div > p:not(.eyebrow) { font-size: 19px; }
}