/* V3: restore the approved mockup's cream, apricot and sage illustrated hills.
   The hero is intentionally NOT photographic. Keep the compact demo card from V2. */
.hero {
  background: var(--cream);
  isolation: isolate;
}
.hero::after {
  background-image: url("/assets/rolling-hills-illustration.svg");
  background-position: bottom center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 255px;
  bottom: -5px;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}
.listen-section { margin-top: -37px; }
@media (min-width: 560px) {
  .hero::after {
    background-image: url("/assets/rolling-hills-illustration.svg");
    background-size: 100% 100%;
    height: 290px;
    background-position: bottom center;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .listen-section { margin-top: -49px; }
}
@media (min-width: 850px) {
  .hero::after { height: 330px; }
  .listen-section { margin-top: -55px; }
}