/* The real 3D scene progressively enhances the original HTML artwork. */
.hero-art .loyalty-stage{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;cursor:grab;touch-action:pan-y}
.hero-art.is-3d-ready .loyalty-stage{opacity:1}
.hero-art.is-dragging .loyalty-stage{cursor:grabbing}
.hero-art.is-3d-ready>.phone-mockup,.hero-art.is-3d-ready>.floating-loyalty-card,.hero-art.is-3d-ready>.round-sticker,.hero-art.is-3d-ready>.art-spark,.hero-art.is-3d-ready>.art-ring{visibility:hidden}
.hero-art .art-top{z-index:3;pointer-events:none}
.hero-art .art-bottom{z-index:3;pointer-events:none;bottom:19px}
.hero-art .art-bottom .round-arrow{pointer-events:auto}
.hero-art.is-3d-ready .art-bottom>span{max-width:52%;font-size:9px;line-height:1.4}
.hero-art .scene-controls{position:absolute;bottom:17px;right:65px;display:flex;align-items:center;gap:3px;z-index:4}
.scene-hint{font-size:8px;color:#6f6e6c;margin-right:4px;user-select:none}
.scene-controls button{width:29px;height:29px;border:1px solid #bab8b7;border-radius:50%;display:grid;place-items:center;background:#eee5d5;color:#575554;font:16px/1 var(--body,'Manrope',sans-serif);padding:0;transition:background .2s,color .2s;touch-action:manipulation}
.scene-controls button:hover{background:#41403e;color:#f5efd9}
.scene-controls .scene-pause{font-size:11px}
.scene-controls button:disabled{opacity:.55;cursor:default;background:#eee5d5;color:#575554}
.scene-controls button:focus-visible{outline:2px solid #c34620;outline-offset:3px}
.hero-art .scene-views{position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;padding:4px;gap:3px;border:1px solid #a18e742e;border-radius:9px;background:#f9f2e6;box-shadow:0 4px 14px #55432b08;max-width:calc(100% - 34px)}
.hero-art .scene-views button{min-height:38px;min-width:69px;padding:8px 14px;border-radius:5px;font:700 11px/1.5 var(--body,'Manrope',sans-serif);color:#6e6255;white-space:nowrap;transition:background .25s,color .25s;touch-action:manipulation}
.hero-art .scene-views button:hover{color:#302d29;background:#ece2d3}
.hero-art .scene-views button[aria-pressed=true]{background:#302d29;color:#f9f2e6}
.hero-art .scene-views button:focus-visible{outline:2px solid var(--orange-dark,#bd3616);outline-offset:1px}
html[data-theme=dark] .hero-art .scene-views{background:#242422;border-color:#5a514755;box-shadow:0 4px 14px #1614111a}
html[data-theme=dark] .hero-art .scene-views button{color:#c7beb2}
html[data-theme=dark] .hero-art .scene-views button:hover{background:#393530;color:#f6eee3}
html[data-theme=dark] .hero-art .scene-views button[aria-pressed=true]{background:#eee3d2;color:#302d29}
.motion-paused .hero-art .scene-views button{transition:none}
@media(max-width:700px){.hero-art .scene-controls{right:64px;bottom:13px}.scene-hint{display:none}.scene-controls button{width:32px;height:32px}.hero-art.is-3d-ready .art-bottom>span{max-width:54%;font-size:8px}.hero-art .art-bottom{bottom:13px}}
@media(max-width:700px){.hero-art .scene-views{top:57px;gap:2px;padding:3px}.hero-art .scene-views button{min-height:38px;min-width:64px;padding-inline:12px;font-size:10px}}
@media(max-width:380px){.hero-art .scene-views{max-width:calc(100% - 26px)}.hero-art .scene-views button{min-width:58px;padding-inline:10px}}
@media(prefers-reduced-motion:reduce){.hero-art .loyalty-stage,.hero-art .scene-views button{transition:none}}