/* LCKD Yard Sign Rewards v1.0.11 — responsive presentation only.
   Loaded after the approved page.css. All rules are limited to this dedicated page.
   Keep the existing desktop composition, text, imagery and interaction unchanged. */

/* The single-column hero is intentionally centred at tablet / small-desktop widths.
   This changes alignment only, never the card's 3-D element or mouse handlers. */
@media (min-width: 741px) and (max-width: 1050px) {
  body.lckd-yard-sign-rewards-page #main-content .hero-promo .promo-visual {
    justify-content: center;
  }
  body.lckd-yard-sign-rewards-page #main-content .hero-promo .promo-card-wrap {
    justify-content: center;
  }
}

/* Mobile: keep exactly the same stacked layout, with the Visa stack centred below
   the copy rather than pulled toward the right edge of the available screen. */
@media (max-width: 740px) {
  body.lckd-yard-sign-rewards-page #main-content .hero-promo .promo-visual,
  body.lckd-yard-sign-rewards-page #main-content .hero-promo .promo-card-wrap {
    justify-content: center;
  }
}

/* Ultra-small mobile: reclaim the otherwise empty space underneath the Visa stack.
   The stack's width, image aspect ratio, tilt interaction and cropping stay intact. */
@media (max-width: 359px) {
  body.lckd-yard-sign-rewards-page #main-content .hero-promo .promo-visual {
    min-height: 360px;
  }
}

/* Large desktop and TV: scale the EXISTING design proportionately rather than
   leaving a narrow 1350px strip in the middle of a 2K–4K display. The four cards
   remain four columns; the street scene retains its own narrower presentation. */
@media (min-width: 1680px) {
  body.lckd-yard-sign-rewards-page #main-content .shell {
    width: min(88vw, 2560px);
    max-width: none;
  }

  body.lckd-yard-sign-rewards-page #main-content .hero-promo-shell {
    gap: clamp(50px, 4vw, 90px);
  }
  body.lckd-yard-sign-rewards-page #main-content .hero-promo .promo-copy {
    max-width: 100%;
  }
  body.lckd-yard-sign-rewards-page #main-content .hero-promo .promo-copy h1 {
    font-size: clamp(72px, 3.15vw, 100px);
  }
  body.lckd-yard-sign-rewards-page #main-content .hero-promo .promo-lead {
    font-size: clamp(18px, 0.91vw, 24px);
    max-width: 850px;
  }
  body.lckd-yard-sign-rewards-page #main-content .hero-promo .promo-actions .btn {
    font-size: clamp(14px, 0.75vw, 19px);
    min-height: clamp(52px, 2.5vw, 68px);
    padding-inline: clamp(24px, 1.2vw, 35px);
  }
  body.lckd-yard-sign-rewards-page #main-content .hero-promo .promo-visual {
    min-height: clamp(500px, 24vw, 560px);
    align-self: start;
  }
  body.lckd-yard-sign-rewards-page #main-content .hero-promo .promo-card-wrap {
    width: min(90%, 470px);
    max-width: none;
    height: auto;
  }
  body.lckd-yard-sign-rewards-page #main-content .hero-promo .promo-stack-image {
    width: min(100%, 440px);
    max-width: none;
  }

  body.lckd-yard-sign-rewards-page #main-content .steps-section .section-head-compact h2 {
    font-size: clamp(40px, 2.2vw, 58px);
  }
  body.lckd-yard-sign-rewards-page #main-content .steps-section .section-head-compact p {
    font-size: clamp(17px, 0.86vw, 21px);
    max-width: 1150px;
  }
  body.lckd-yard-sign-rewards-page #main-content .steps-section .steps-grid-compact {
    gap: clamp(14px, 1vw, 25px);
  }
  body.lckd-yard-sign-rewards-page #main-content .steps-section .step-compact {
    padding: clamp(14px, 0.78vw, 22px);
  }
  body.lckd-yard-sign-rewards-page #main-content .steps-section .step-compact .ysr-step-art {
    height: clamp(103px, 5.4vw, 148px);
  }
  body.lckd-yard-sign-rewards-page #main-content .steps-section .step-compact h3 {
    font-size: clamp(21px, 1.06vw, 28px);
  }
  body.lckd-yard-sign-rewards-page #main-content .steps-section .step-compact p {
    font-size: clamp(15px, 0.79vw, 20px);
    line-height: 1.45;
  }

  /* Drive-by scene now lives in the hero; the old #how-it-works scene rules were removed as dead CSS. */


  body.lckd-yard-sign-rewards-page #main-content .feature-grid {
    gap: clamp(70px, 5vw, 140px);
  }
  body.lckd-yard-sign-rewards-page #main-content .feature-copy h2,
  body.lckd-yard-sign-rewards-page #main-content .details-copy h2 {
    font-size: clamp(50px, 2.65vw, 73px);
    max-width: 920px;
  }
  body.lckd-yard-sign-rewards-page #main-content .feature-copy > p,
  body.lckd-yard-sign-rewards-page #main-content .details-copy > p {
    font-size: clamp(17px, 0.9vw, 23px);
    max-width: 840px;
  }
  body.lckd-yard-sign-rewards-page #main-content .feature .reward-video-card {
    width: min(100%, clamp(600px, 29vw, 820px));
  }
  body.lckd-yard-sign-rewards-page #main-content .feature .reward-video {
    width: 100%;
  }
  body.lckd-yard-sign-rewards-page #main-content .checks {
    font-size: clamp(15px, 0.8vw, 19px);
  }
  body.lckd-yard-sign-rewards-page #main-content .faq summary {
    font-size: clamp(16px, 0.78vw, 20px);
    padding: clamp(18px, 0.95vw, 27px);
  }
  body.lckd-yard-sign-rewards-page #main-content .faq details p {
    font-size: clamp(15px, 0.75vw, 18px);
  }
  body.lckd-yard-sign-rewards-page #main-content .end-panel h2 {
    font-size: clamp(52px, 2.5vw, 72px);
    max-width: 930px;
  }
  body.lckd-yard-sign-rewards-page #main-content .end-panel p {
    font-size: clamp(16px, 0.85vw, 21px);
    max-width: 870px;
  }
}