/* Fit the longer brand statement cleanly on phones without changing tablet or desktop. */
@media (width <= 650px) {
  .hero-copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 96px 20px 72px;
  }

  .hero-copy > .kicker {
    max-width: 310px;
    line-height: 1.55;
  }

  .hero h1 {
    margin: 16px 0 22px;
    font-size: clamp(40px, 11.5vw, 47px);
    line-height: 0.98;
  }

  .actions {
    margin-top: 24px;
  }
}

@media (width <= 360px) {
  .hero h1 {
    font-size: clamp(38px, 11.4vw, 42px);
  }
}