/* Promo banner shared by the MLS checker and the $240 offer page; content comes from assets/js/promo.js. */
.promo { background: #0c1a68; color: #fff; font-family: 'Lato', sans-serif; }
.promo[hidden] { display: none; }
.promo-in { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 720px; margin: 0 auto; padding: 12px 20px 14px; text-align: center; }
.promo-eyebrow { margin: 0; color: #ffc01f; font-size: .78rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.promo-main { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.promo-main strong { color: #ffc01f; }
.promo-main s { color: rgba(255,255,255,.62); text-decoration-thickness: 2px; }
.promo-code { margin: 0; font-size: .88rem; color: rgba(255,255,255,.86); }
.promo-pill { display: inline-block; margin-left: 4px; padding: 1px 9px; border: 1px dashed rgba(255,192,31,.8); border-radius: 6px; background: rgba(255,192,31,.12); color: #fff; font-weight: 900; letter-spacing: .08em; }
/* The percentage sits inside the fill; when the fill is too short to hold it, promo.js adds .is-low and it moves just past the fill */
.promo-bar { position: relative; width: min(100%, 420px); height: 18px; margin-top: 2px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.promo-bar i { position: relative; display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffc01f, #ff8a1f); }
.promo-bar i span { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); color: #0c1a68; font-size: .72rem; font-style: normal; font-weight: 900; line-height: 1; white-space: nowrap; }
.promo-bar.is-low i span { right: auto; left: calc(100% + 8px); color: #fff; }
.promo-count { margin: 0; font-size: .84rem; color: rgba(255,255,255,.86); }
.promo-count b { color: #fff; }

/* Offer page checkout card: regular price struck through beside the sale price */
.buy-card .top .p .p-was { font-size: 1.7rem; font-weight: 700; line-height: 1; color: rgba(255,255,255,.7); text-decoration-thickness: 2px; }
.p-was[hidden], .promo-field[hidden] { display: none; }

@media (max-width: 760px) {
  .promo-in { gap: 4px; padding: 9px 12px 10px; }
  .promo-main { font-size: .88rem; letter-spacing: -.01em; }
  .promo-code { font-size: .82rem; }
  .promo-bar { height: 16px; }
  .promo-count { font-size: .78rem; }
}

/* MLS checker on phones: the banner sits on the navy intro, so it switches to a light treatment */
@media (max-width: 767px) {
  .promo-light { background: #fff6dc; color: #0c1a68; border-bottom: 1px solid #f1d27f; }
  .promo-light .promo-eyebrow { color: #b4410a; }
  .promo-light .promo-main strong { color: #c2410c; }
  .promo-light .promo-main s { color: #6b7280; }
  .promo-light .promo-code { color: #33415c; }
  .promo-light .promo-pill { border-color: #c2410c; background: #fff; color: #0c1a68; }
  .promo-light .promo-bar { background: #efdcaa; }
  .promo-light .promo-bar.is-low i span { color: #0c1a68; }
  .promo-light .promo-count { color: #33415c; }
  .promo-light .promo-count b { color: #0c1a68; }
}