/* kit/hdp-offer.css, the Holiday Dinner Planner result card. Pairs with kit/hdp-offer.js.
   Loaded in <head> so the hide rules apply before first paint, with this head script

   <script>(function(){if(Date.now()<new Date(2026,11,26).getTime())document.documentElement.classList.add("hdp-on")})()</script>

   One paid card per screen. Until 2026-12-26 the holiday card is the result-moment card, so it
   replaces the Kitchen Pack result card (.result-offer). The markup stays in the page and comes
   back when the window closes. The CRO sprint's first-screen Kitchen Pack line (.top-offer) and
   the lower next-step asides stay, because at 390 px none of them shares a screen with the card
   (measured, see lanes/F1/DECISIONS.md). The sticky header's "Pro $79" link steps aside only
   while it and the card are on screen together (.hdp-yielded, set by hdp-offer.js).
   One ask per screen. Once the card is on the page (html.hdp-shown, set by hdp-offer.js in the same
   task that inserts it) the result tip card stays hidden. The footer support block is untouched. */
html.hdp-on .result-offer { display: none !important; }
html.hdp-on.hdp-shown [data-support-cta="result"] { display: none !important; }
.hdp-yielded { visibility: hidden !important; }
/* On the IC home the card sits inside the scaler pane, whose bottom edge is a 1px rule plus a soft shadow.
   That edge then reads as a stray line under the card, so the pane drops it while it holds the card. */
html.hdp-shown .tool-pane:has(.hdp-card) { box-shadow: none !important; }

.hdp-card {
  --hdp-acc: oklch(0.50 0.130 38);
  --hdp-acc-ink: oklch(0.36 0.110 35);
  --hdp-ink: oklch(0.22 0.025 50);
  --hdp-soft: oklch(0.40 0.022 55);
  --hdp-paper: oklch(0.985 0.012 80);
  --hdp-rule: oklch(0.86 0.020 70);
  box-sizing: border-box; display: block; margin: 20px 0; padding: 20px 20px 18px;
  background: var(--hdp-paper); color: var(--hdp-ink);
  border: 1px solid var(--hdp-rule); border-top: 3px solid var(--hdp-acc); border-radius: 12px;
  font-family: "Geist", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 16px; line-height: 1.5; text-align: left;
  animation: hdp-in .35s ease-out both;
}
.hdp-card[data-site="rt"] { --hdp-acc: #b0380a; --hdp-acc-ink: #8f2d08; --hdp-paper: #fffaf5; --hdp-rule: #eadfd3; --hdp-ink: #2b211d; --hdp-soft: #5a4a42; }
.hdp-card * { box-sizing: border-box; }
.hdp-card p { margin: 0; max-width: none !important; line-height: 1.5 !important; }
.hdp-card .hdp-card-h {
  font-family: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 21px; line-height: 1.25 !important; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--hdp-ink);
}
.hdp-card .hdp-card-t { font-size: 16px; color: var(--hdp-soft); margin: 0 0 14px; }
.hdp-card a.hdp-card-btn, main .hdp-card a.hdp-card-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px;
  padding: 12px 18px; border-radius: 10px; border: 0;
  background: var(--hdp-acc) !important; color: #fff !important;
  font: 600 16px/1.25 "Geist", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  text-decoration: none !important; text-align: center; letter-spacing: 0;
}
.hdp-card a.hdp-card-btn:hover { background: var(--hdp-acc-ink) !important; }
.hdp-card a.hdp-card-btn:focus-visible { outline: 3px solid var(--hdp-acc); outline-offset: 3px; }
.hdp-card .hdp-card-small { font-size: 16px; line-height: 1.45 !important; color: var(--hdp-soft); margin: 12px 0 0; }
/* Full variant (data-variant="full"), adds the list of what you get. */
.hdp-card .hdp-card-li { margin: 0 0 14px; padding: 0; list-style: none; }
.hdp-card .hdp-card-li li { position: relative; padding: 0 0 0 26px; margin: 0 0 8px; font-size: 16px; line-height: 1.45; color: var(--hdp-ink); }
.hdp-card .hdp-card-li li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 11px; height: 6px; border: 2.5px solid var(--hdp-acc); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.hdp-card .hdp-card-price { font-size: 16px; color: var(--hdp-ink); margin: 0 0 12px; }
.hdp-card .hdp-card-price strong { display: block; font-size: 22px; line-height: 1.2; font-weight: 700; margin: 0 0 2px; }
@media (min-width: 700px) {
  .hdp-card a.hdp-card-btn, main .hdp-card a.hdp-card-btn { display: inline-flex; width: auto; padding: 12px 26px; }
  }
@keyframes hdp-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hdp-card { animation: none; } }
@media print { .hdp-card { display: none !important; } }