/* Shared content-page banner. Keep these measurements in sync across About and How It Works. */
.content-hero {
  background: #fff url("/assets/hero-pattern.svg") center center / cover no-repeat;
  height: 295px;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.content-hero .hero-copy {
  margin: auto;
  max-width: 600px;
  padding-top: 28px;
  position: relative;
  z-index: 2;
}

.content-hero .pill {
  background: #fff;
  border: 1px solid #c9d9ed;
  border-radius: 18px;
  box-shadow: 0 2px 7px #0a326b0b;
  color: #1765d8;
  display: inline-block;
  font: 700 8px/1.5 var(--font-body);
  letter-spacing: .1em;
  padding: 5px 13px;
}

.content-hero h1 {
  color: #06265b;
  font: 400 35px/1.12 var(--font-display);
  letter-spacing: -.035em;
  margin: 14px 0 10px;
}

.content-hero h1 em {
  color: #ee9505;
  font-weight: 400;
}

.content-hero .hero-summary {
  color: #31486b;
  font: 400 10px/1.65 var(--font-body);
  margin: 0 auto;
  max-width: 450px;
}

@media (max-width: 640px) {
  .content-hero {
    aspect-ratio: 4 / 3;
    min-height: 400px;
  }

  .content-hero h1 { font-size: 32px; }
}