/* Mobile conversion improvements based on Microsoft Clarity scroll data. */
.coverPurchaseLink {
  display: block;
  color: inherit;
  text-decoration: none;
}

.coverPurchaseLink:focus-visible {
  outline: 3px solid #f0a51c;
  outline-offset: 5px;
  border-radius: 24px;
}

.heroMobilePurchase {
  display: none;
}

@media (max-width: 760px) {
  .hero {
    min-height: auto !important;
    padding-block: 0.75rem 1.8rem !important;
  }

  .heroGrid {
    gap: 0.85rem !important;
  }

  .coverWrap {
    width: min(78vw, 315px) !important;
    margin-inline: auto !important;
  }

  .coverWrap .cover {
    width: 100% !important;
    max-height: 43vh;
    object-fit: contain;
  }

  .coverWrap .coverNote {
    margin-top: 0.55rem !important;
    padding: 0.62rem 0.8rem !important;
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
  }

  .heroMobilePurchase {
    display: flex;
    width: 100%;
    min-height: 50px;
    margin-top: 0.72rem;
    padding: 0.72rem 1rem;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    background: #e89c1b;
    color: #fff;
    box-shadow: 0 10px 25px rgba(31, 72, 69, 0.24);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }

  .heroMobilePurchase:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
  }

  .heroCopy {
    padding-top: 0.15rem !important;
  }

  .heroCopy .eyebrow {
    margin-bottom: 0.4rem !important;
  }

  .heroCopy h1 {
    margin-block: 0.2rem 0.65rem !important;
    font-size: clamp(2rem, 9vw, 2.65rem) !important;
    line-height: 1.06 !important;
  }

  .heroCopy .lead {
    margin-block: 0 0.7rem !important;
    font-size: 0.97rem !important;
    line-height: 1.55 !important;
  }

  .heroCopy .purchaseFacts {
    margin-block: 0.55rem 0.7rem !important;
  }

  /* The early button above is the main mobile action; keep only the link to
     the other stores here to avoid showing two identical orange buttons. */
  .heroCopy .actions .primaryPurchaseButton {
    display: none !important;
  }

  .heroCopy .actions {
    margin-top: 0 !important;
  }

  .heroCopy .availability,
  .heroCopy .purchaseNote {
    margin-block: 0.45rem 0 !important;
  }

  .heroCopy .heroReview {
    margin-top: 0.75rem !important;
  }
}