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

main,
.hero,
.hero-copy,
.hero-photo,
.review,
.evidence,
.concept,
.offer,
.section-heading,
.evidence-card,
.concept-grid {
  min-width: 0;
  max-width: 100%;
}

img,
video {
  max-width: 100%;
}

@media (max-width: 520px) {
  .private {
    display: none;
  }

  .topbar {
    justify-content: flex-start;
    padding: 18px 24px;
  }

  .hero {
    width: 100%;
    padding: 44px 24px 64px;
    gap: 34px;
  }

  .hero h1 {
    font-size: 42px;
    overflow-wrap: anywhere;
  }

  .hero h1 em {
    display: block;
  }

  .eyebrow {
    max-width: 100%;
    letter-spacing: .12em;
    overflow-wrap: anywhere;
  }

  .lede {
    font-size: 17px;
  }

  .hero-photo {
    width: 100%;
  }

  .hero-photo::before {
    inset: -10px 10px 10px -10px;
  }

  .evidence,
  .concept,
  .offer {
    padding-inline: 20px;
  }

  .evidence-card.wide {
    gap: 28px;
  }

  .button {
    max-width: 100%;
    text-align: center;
  }
}