.landing.product-demo{min-height:100vh;background:#fbfaff;padding-bottom:48px}
.landing .demo-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;padding-bottom:24px}
.landing .demo-intro{max-width:800px;margin:40px auto;text-align:center}.landing .demo-intro h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.15;letter-spacing:-.04em}.landing .demo-intro .eyebrow{margin-top:24px}.landing .demo-intro p{color:var(--muted)}
.landing .demo-stage{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:start}.landing .demo-experience{padding:clamp(24px,4vw,44px);border:1px solid var(--border);background:white;border-radius:28px;box-shadow:var(--shadow-soft);min-width:0}.landing .demo-experience h2,.landing .demo-guide h2{font-size:1.65rem;line-height:1.25}.landing .demo-guide{padding:24px 0}.landing .demo-guide>a,.landing .demo-guide>button{display:flex;margin:16px 0;justify-content:center;width:100%;white-space:normal}.landing .demo-note{font-size:.85rem;color:var(--muted)}
.landing .demo-stamps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:28px 0}.landing .demo-stamps li{text-align:center}.landing .demo-stamps span{display:grid;place-items:center;width:clamp(42px,8vw,64px);aspect-ratio:1;margin:auto;border:2px solid #cbb2ef;border-radius:50%;color:var(--brand);font-size:1.5rem;font-weight:800}.landing .demo-stamps .complete span{background:var(--brand);border-color:var(--brand);color:white}.landing .demo-stamps small{display:block;margin-top:6px}
.landing .demo-result{margin-top:24px;border:1px solid #b4d9c3;background:#effaf3;color:#165a35;padding:18px;border-radius:14px}.landing .demo-result[hidden],.landing [data-item-category][hidden]{display:none}
.landing .demo-experience label{display:block;margin:18px 0;font-weight:700}.landing .demo-experience select{display:block;width:100%;padding:12px;border:1px solid var(--border);border-radius:12px;background:white;color:var(--foreground);font:inherit;margin-top:8px}.landing .demo-experience fieldset{border:0;margin:22px 0;padding:0}.landing .demo-experience legend{font-weight:700;margin-bottom:12px}
.landing .demo-filters,.landing [data-demo-slots]{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.landing .demo-filters button,.landing [data-demo-slots] button,.landing .demo-links button,.landing .demo-items button{padding:10px 16px;border:1px solid #d8c9eb;border-radius:12px;background:#fff;color:#6630ae;font:inherit;cursor:pointer}.landing [aria-pressed=true]{background:var(--brand)!important;color:white!important}.landing .demo-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.landing .demo-items article{padding:16px;border:1px solid var(--border);border-radius:18px}.landing .demo-items h3{font-size:1.1rem}.landing .demo-item-art{display:grid;place-items:center;height:110px;border-radius:12px;background:#f4effb;color:var(--brand)}.landing .demo-item-art svg{width:48px;height:48px}.landing .demo-items summary{cursor:pointer;color:#6630ae;font-weight:700}.landing .demo-items p{font-size:.9rem}.landing .demo-links{display:grid;gap:12px;margin-top:24px}.landing .demo-links a{padding:16px;border:1px solid var(--border);border-radius:12px}.landing .demo-permanent{padding:24px;background:#f4effb;border-radius:16px;overflow-wrap:anywhere}
.landing .demo-more{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:48px}.landing .demo-more a{padding:10px 16px;border-radius:24px;border:1px solid var(--border);background:white}.landing .demo-more [aria-current]{border-color:var(--brand);color:var(--brand)}.landing.product-demo button{cursor:pointer}.landing.product-demo button:disabled{opacity:.65;cursor:default}.landing.product-demo :focus-visible{outline:3px solid #6630ae;outline-offset:4px}
@media(max-width:760px){.landing .demo-stage{grid-template-columns:1fr;gap:12px}.landing .demo-header{align-items:flex-start}.landing .demo-header .brand img{width:120px}.landing .demo-items{grid-template-columns:1fr}.landing .demo-intro{margin:24px auto}.landing .demo-experience .btn-brand{white-space:normal;max-width:100%}}
/* Reward modal, golden icon, stamp and confetti use the real loyalty stylesheet. */
.landing .demo-reward-dialog h2{font-size:26px;margin:0 0 12px}
.landing .demo-reward-dialog .btn-brand{width:100%;min-height:46px;margin-top:8px;justify-content:center}
.landing .demo-reward-applied{color:#17613c;font-weight:800}
.landing .demo-stage--loyalty{grid-template-columns:minmax(0,480px) minmax(260px,1fr);gap:clamp(24px,5vw,64px)}
.landing .demo-experience--loyalty{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.demo-loyalty-view{max-width:480px;color:#172033;--line:#e5e7eb;--muted:#64748b}
.landing .demo-experience--loyalty .loyalty-public-heading{margin:0 0 22px;overflow-wrap:anywhere;text-align:left}
.landing .demo-experience--loyalty .loyalty-public-heading h1{margin:6px 0;font-size:24px;line-height:1.3;letter-spacing:normal}
.landing .demo-experience--loyalty .loyalty-public-heading p{margin:6px 0;color:#64748b}
.landing .demo-experience--loyalty .loyalty-live-card h2{margin:5px 0;font-size:22px;line-height:1.3;letter-spacing:-.03em}
.landing .demo-experience--loyalty .loyalty-visit-request,.landing .demo-experience--loyalty .loyalty-pending-rewards,.landing .demo-experience--loyalty .demo-device-card{margin:0 0 14px;padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 4px 18px #39237205}
.landing .demo-experience--loyalty .loyalty-pending-rewards h2{margin:0 0 5px;font-size:18px;line-height:1.35}
.landing .demo-experience--loyalty .loyalty-public-caption{margin:0;text-align:center;font-size:12px;line-height:1.6;color:#64748b}
.landing .demo-experience--loyalty .loyalty-card-visit-cta .btn{width:auto;min-height:44px;margin:0;padding:8px 12px;border:1px solid #6d28d9;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;font-family:inherit;font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap}
.landing .demo-experience--loyalty .loyalty-demo-status{margin:12px 0;padding:12px;border:1px solid #b4d9c3;border-radius:12px;background:#effaf3;color:#165a35;line-height:1.5}
.landing .demo-experience--loyalty .loyalty-demo-status[hidden]{display:none}
.landing .demo-experience--loyalty .loyalty-device-forget-secondary{min-height:46px;font-family:inherit;font-size:15px;font-weight:600;line-height:1.4;cursor:pointer}
.landing .demo-experience--loyalty .loyalty-reward-item{grid-template-columns:36px minmax(0,1fr)}
.landing .demo-experience--loyalty .badge{display:inline-block;margin-top:8px;padding:4px 8px;border-radius:999px;background:#f1f2f5;color:#475569;font-size:12px;font-weight:650}
.landing .demo-experience--loyalty .demo-reward-dialog{position:fixed;inset:0;margin:auto}
@media(max-width:760px){.landing .demo-stage--loyalty{grid-template-columns:minmax(0,1fr);gap:12px}.landing .demo-experience--loyalty{max-width:480px;width:100%;margin:0 auto}}