/* The working concept feels like a card being filled, with a quiet reward moment. */
#loyalty-demo{scroll-margin-top:28px}
#loyalty-demo:focus{outline:none}
.product-page .demo-pane{position:relative;align-self:start;background:var(--surface-raised);border:1px solid var(--line);border-radius:22px;padding:30px 30px 25px}
.product-page .demo-topline{margin-bottom:12px;gap:18px}
.product-page .demo-topline>span:first-child{font-family:'Bricolage Grotesque',sans-serif;font-size:23px;white-space:nowrap;flex:none}
.product-page .demo-topline>span:last-child{font-size:9px;line-height:1.5;letter-spacing:.7px;text-align:right}
.demo-guide{font-size:12px;line-height:1.65;color:var(--soft-ink);margin-bottom:28px;max-width:34ch}
.product-page .demo-loyalty-card{position:relative;isolation:isolate;overflow:hidden;max-width:360px;padding:28px;border:1px solid #55514b;border-radius:18px;background:#2d2d2b;color:#f4ebd9;transform:rotate(-2deg);box-shadow:0 16px 30px #22211d16;transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .3s}
.product-page .demo-loyalty-card::after{content:'';position:absolute;width:210px;height:210px;border:1px solid #eece9c18;border-radius:50%;right:-108px;top:-95px;pointer-events:none;z-index:-1}
.product-page .demo-brand{font-family:'Bricolage Grotesque',sans-serif;font-size:42px;letter-spacing:-2px}
.product-page .demo-brand>span{font-size:8px;letter-spacing:.15px}
.product-page .demo-loyalty-card h2{font-size:clamp(23px,2.4vw,30px);line-height:1.14;letter-spacing:-.75px;margin:26px 0 25px;font-weight:600;text-wrap:balance;max-width:12em}
.product-page .demo-stamps{gap:13px;margin-bottom:22px}
.product-page .demo-stamp{font-size:28px;border-color:#a5a09466}
.product-page .demo-stamp.filled{background:#f0dfc6;border-color:#f0dfc6;color:#30302e}
.product-page .demo-stamp.reward{font-size:22px}
.demo-progress{display:flex;align-items:center;gap:12px;margin-block:0 12px;color:#e8d4b7}
.demo-progress-count{font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:1px;white-space:nowrap}
.demo-progress-track{flex:1;height:3px;background:#f0dfc628;border-radius:2px;overflow:hidden}
.demo-progress-fill{display:block;width:100%;height:100%;background:#ed7046;transform:scaleX(.375);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.demo-progress-gift{width:17px;height:17px;flex:none;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.product-page #stamp-status{font-size:11px;line-height:1.65;min-height:36px;color:#e4dccc;text-align:left}
.demo-reward-mark{position:absolute;top:25px;right:25px;display:grid;place-items:center;width:42px;height:42px;border:1px solid #e7ccab5c;border-radius:50%;font-size:28px;color:#ed8458;opacity:0;transform:scale(.7) rotate(-35deg);transition:opacity .35s,transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none}
.product-page .demo-loyalty-card.reward-ready{border-color:#e5996c;transform:rotate(0)}
.reward-ready .demo-reward-mark{opacity:1;transform:scale(1) rotate(0)}
.reward-ready .demo-progress-fill{background:#efb383}
.reward-ready .demo-progress-gift{color:#f6bb8a}
.product-page .demo-controls{margin-top:27px;gap:12px;align-items:center}
.product-page .demo-controls #add-stamp{min-height:48px;flex:1;max-width:260px;justify-content:space-between;font-size:12px;gap:16px;padding-inline:19px;box-shadow:none}
.product-page .demo-reset{min-height:44px;padding-inline:7px;font-size:11px;text-decoration-thickness:1px;text-underline-offset:5px}
.product-page .demo-disclaimer{font-size:11px;line-height:1.7;margin-top:18px;text-wrap:balance;max-width:38ch;margin-inline:auto}
.demo-loyalty-card.reward-celebrate{animation:demo-reward-arrive .65s cubic-bezier(.16,1,.3,1)}
.demo-loyalty-card.reward-redeemed .demo-progress-gift{animation:demo-reward-out .65s cubic-bezier(.16,1,.3,1)}
@keyframes demo-reward-arrive{from{transform:translateY(5px) rotate(-2deg)}to{transform:translateY(0) rotate(0)}}
@keyframes demo-reward-out{0%{opacity:.35;transform:translateY(4px) scale(.8)}100%{opacity:1;transform:translateY(0) scale(1)}}
html[data-theme=dark] .product-page .demo-pane{background:var(--surface);border-color:var(--line)}
html[data-theme=dark] .product-page .demo-loyalty-card{background:#30302e;border-color:#5e574e;box-shadow:0 18px 30px #11110f28}
html[data-theme=dark] .product-page .demo-loyalty-card.reward-ready{border-color:#e5996c}
@media(min-width:1100px){.product-page .demo-pane{padding:34px 38px 27px}.product-page .demo-controls #add-stamp{font-size:13px}.demo-guide{font-size:13px}}
@media(max-width:700px){.product-page .demo-pane{padding:24px 23px 23px;border-radius:18px}.product-page .demo-loyalty-card{padding:25px;max-width:360px}.product-page .demo-loyalty-card h2{font-size:28px}.product-page .demo-topline>span:last-child{font-size:8px}.demo-guide{margin-bottom:25px;font-size:12px}.product-page .demo-controls{gap:10px}.product-page .demo-stamps{gap:12px}.product-page .demo-controls #add-stamp{font-size:12px}}
@media(max-width:380px){.product-page .demo-pane{padding:21px 16px}.product-page .demo-loyalty-card{padding:22px}.product-page .demo-loyalty-card h2{font-size:25px}.product-page .demo-stamps{gap:10px}.product-page .demo-controls{flex-wrap:wrap;gap:4px}.product-page .demo-controls #add-stamp{flex-basis:100%;max-width:none}.product-page .demo-reset{padding-inline:12px}.demo-reward-mark{right:20px;top:20px;width:36px;height:36px;font-size:25px}}
.motion-paused .product-page .demo-loyalty-card,.motion-paused .demo-progress-fill,.motion-paused .demo-reward-mark{transition:none}
@media(max-width:380px){.product-page .demo-topline{gap:12px}.product-page .demo-topline>span:first-child{font-size:20px}.product-page .demo-topline>span:last-child{font-size:7px;letter-spacing:.3px}}
.motion-paused .demo-loyalty-card.reward-celebrate,.motion-paused .demo-loyalty-card.reward-redeemed .demo-progress-gift{animation:none}
@media(prefers-reduced-motion:reduce){.product-page .demo-loyalty-card,.demo-progress-fill,.demo-reward-mark{transition:none}.demo-loyalty-card.reward-celebrate,.demo-loyalty-card.reward-redeemed .demo-progress-gift{animation:none}}