.hero {
  background-image:
    linear-gradient(to bottom, transparent 72%, #f8f2e8 100%),
    linear-gradient(90deg, rgba(250, 245, 237, .34) 0%, rgba(250, 245, 237, .08) 46%, transparent 68%),
    url('approdo-still-life.png');
  /* Keep the full still life visible when a long form step grows the hero. */
  background-size: 100% 56.28vw, cover, 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #f8f2e8;
}

.hero::before {
  display: none;
}

.hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 56.28vw;
  right: 0;
  bottom: 0;
  width: 64%;
  border: 0;
  transform: none;
  background: radial-gradient(ellipse at 90% 60%, rgba(218, 192, 158, .20), transparent 68%);
}

/* An embedded page must not measure its hero against the iframe's height. */
.embedded .hero {
  min-height: 820px;
}

.form-shell {
  width: min(570px, 47%);
  margin: 42px auto 0 0;
  background: rgba(255, 253, 248, .95);
  border-color: rgba(255, 255, 255, .88);
  box-shadow: 0 24px 70px rgba(60, 39, 18, .14);
}

.promise {
  background-image:
    linear-gradient(rgba(0, 65, 76, .16), rgba(0, 65, 76, .28)),
    url('acqua-turchese.png');
  background-size: cover;
  background-position: center;
}

.promise::before {
  display: none;
}

@media (max-width: 850px) {
  .embedded .hero {
    min-height: 0;
  }
  .hero {
    background-image:
      linear-gradient(to bottom, transparent 72%, #f8f2e8 100%),
      url('approdo-still-life.png');
    background-size: 100% 56.28vw, 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .intro {
    margin-top: calc(56.28vw - 52px);
  }
  .form-shell {
    width: 100%;
    margin: 42px auto 0;
  }
}

@media (max-width: 520px) {
  .hero {
    background-size: 100% 360px, auto 360px;
    background-position: center top, right top;
  }
  .hero::after {
    top: 360px;
    width: 100%;
  }
  .intro {
    margin-top: 305px;
  }
}