/* Homepage hero: the offer, a price and one button, all inside the first
   phone screen for visitors arriving from ads. */
.hero-offer {
  display: grid;
  justify-items: start;
  gap: 12px;
  max-width: 560px;
  margin-bottom: 30px;
}

.hero-offer p {
  margin: 0;
}

.hero-offer__tag {
  padding: 4px 10px;
  border-radius: 3px;
  background: var(--coral);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-offer__price {
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.4;
}

.hero-offer__price strong {
  font-family: var(--display);
  font-size: 1.9rem;
  white-space: nowrap;
}

.hero-offer__price span {
  display: block;
  color: #465363;
  font-size: 1rem;
}

@media (max-width: 700px) {
  .hero {
    padding-top: 22px;
  }

  .hero .eyebrow {
    display: none;
  }

  .hero h1 {
    margin-bottom: 18px;
    font-size: clamp(2.2rem, 10.5vw, 2.9rem);
  }

  .hero-offer {
    margin-bottom: 26px;
    padding: 14px;
    border: 2px solid var(--ink);
    border-radius: 6px;
    background: var(--cream);
    box-shadow: var(--shadow-small);
  }

  .hero-offer__button {
    justify-self: stretch;
    justify-content: center;
    text-align: center;
  }

  /* The hero already shows the offer, so the top banner would only push it
     below the first screen on phones. */
  .mw-promo.mw-promo--home {
    display: none;
  }
}