/* =====================================================================
   THE DECK — homepage offers (Round 5 §1). Replaces the shelf entirely.
   Layout is driven by motion.js: each .dcard gets --x/--y/--r (px, px, deg)
   every frame from an interruptible chaser (fast attack, long liquid decay),
   and .settled when its own motion has landed — that's when its bullets show.
   ===================================================================== */
/* scroll budget in px (never vh — vh balloons on tall/portrait screens): the pin is as
   tall as its content and holds for --travel px; the next section stays visible below
   it on tall screens (Round 6 §0) */
.deck-sec{--travel:clamp(360px,42vh,540px);position:relative;padding:0}
.deck-sec::after{content:"";display:block;height:var(--travel)}   /* the scroll budget: sticky is confined to the parent's CONTENT box, so padding wouldn't count */
.deck-pin{position:sticky;top:72px;box-sizing:border-box;padding:14px 0 12px;overflow:hidden}
.deck-pin > .wrap{width:100%}
.deck-head{text-align:center}
.deck-head h2{margin-top:12px}
.deck-head .lede{margin-top:8px}
.deck{position:relative;height:430px;margin-top:22px}
.dcard{position:absolute;left:50%;top:0;width:clamp(300px,23vw,400px);margin-left:calc(clamp(300px,23vw,400px) / -2);
  transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg));transform-origin:50% 130%;will-change:transform}
.d-mid{z-index:3}.d-left,.d-right{z-index:2}
.dcard .card.offer{padding:16px 18px 12px;box-shadow:0 30px 60px -30px rgba(33,63,120,.55)}
.dcard .card.offer .k{margin-bottom:6px;font-size:11px}
.dcard .offer .hook{font-size:15.5px;line-height:1.3;margin-bottom:6px}
.dcard .card.offer > p{font-size:13.5px;line-height:1.42}
.dcard .offer .price{font-size:16px;font-weight:800;letter-spacing:-.03em;color:var(--ink);padding-top:8px;margin-top:8px;border-top:1px solid var(--line)}
.dcard .offer .price span{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:1px}
.dwho{margin-top:14px;opacity:0;transform:translateY(8px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.dcard.settled .dwho{opacity:1;transform:none}
.dwho .who-k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dwho ul{list-style:none;margin:6px 0 0;display:grid;gap:4px}
.dwho li{font-size:14.5px;line-height:1.35;color:var(--ink);padding-left:16px;position:relative}
.dwho li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--slate);opacity:.7}
.dwho .btn{margin-top:10px}
.btn-sm{font-size:13.5px;padding:8px 16px}
.deck-foot{text-align:center;margin-top:8px;color:var(--muted);font-size:14.5px;opacity:0;transition:opacity .6s}
.deck-sec.done .deck-foot{opacity:1}
/* fallback: reduced motion or narrow — three cards, bullets shown, no pin */
@media (prefers-reduced-motion:reduce),(max-width:860px){
  .deck-sec{height:auto;padding:64px 0}
  .deck-sec::after{display:none}
  .deck-pin{position:static;height:auto;padding:0;overflow:visible;display:block}
  .deck{height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .dcard{position:static;width:auto;margin:0;transform:none!important}
  .dwho{opacity:1;transform:none}
  .deck-foot{opacity:1}
}
@media (max-width:860px){.deck{grid-template-columns:1fr}}