/* ── Hero section layout ──────────────────────────────────────────────────── */
#hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: center;
  column-gap: 2rem;
  row-gap: 0;
  padding: 1rem 0 1.25rem;
}

#hero-text {
  flex: 1 1 280px;
  min-width: 0;
  margin: 0;
}

#hero h1 {
  margin: 0 0 1.5rem;
  font-weight: bold;
}

#hero p {
  font-size: 1rem;
  margin: 0 0 1.25rem;
}

#hero-buttons {
  margin: 0 0 0.75rem;
}

#hero-image {
  flex: 0 0 auto;
  margin: 0;
}

#hero-image img {
  width: min(320px, 75vw);
  display: block;
}

/* ── Mobile overrides ─────────────────────────────────────────────────────── */
@media screen and (max-width: 44.9375em) {
  #hero {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  #hero h1 {
    margin-bottom: 0.75rem;
  }

  #hero p {
    margin-bottom: 0.5rem;
  }

  /* Gap between stacked CTA buttons */
  #hero .md-button + .md-button {
    margin-top: 0.4rem;
  }

  /* Tighten the <hr> separator that follows the hero */
  #hero + hr {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
}