/* Scoped restaurant theatre. All motion is local, never scroll driven. */
#benefits .service-playground{gap:0;border:1px solid #cec5b7;padding:0;grid-template-columns:.8fr 1.2fr;border-radius:6px;overflow:hidden;background:#f4f0e7;box-shadow:0 22px 50px #44321c09}
#benefits .service-switch{padding:26px;background:#eee8dc;display:flex;flex-direction:column}
#benefits .service-switch button{border:0;border-bottom:1px solid #d1c7b7;padding:23px 16px;border-radius:3px;transition:background .3s,transform .3s}
#benefits .service-switch button[aria-selected=true]{background:var(--red);color:#fff9ec;box-shadow:0 8px 18px #e7442520;transform:translateX(6px)}
#benefits .service-switch button[aria-selected=true] :is(span,small,b){color:#fff2df}
#benefits .service-switch button b{transition:transform .4s}#benefits .service-switch button:hover b{transform:translate(3px,-3px)}
.service-atmosphere{margin:28px 0 0;position:relative;min-height:160px;flex:1;border-radius:3px;overflow:hidden}
.service-atmosphere img{position:absolute;width:100%;height:100%;object-fit:cover;filter:brightness(.65)}
.service-atmosphere figcaption{position:absolute;inset:auto 20px 19px;color:#fff8e9;font:italic 25px/1.2 Georgia,serif;max-width:230px}
#benefits .service-result{position:relative;background:radial-gradient(ellipse at 80% 0,#fffdf7,#ece6da);padding:30px 38px;min-height:530px;overflow:hidden}
#benefits .scenario-meta{font:9px/1.4 monospace;letter-spacing:1.2px}
#benefits .service-result h3{font-size:clamp(39px,3.8vw,59px);margin:28px 0 22px;position:relative;z-index:1;max-width:90%}
.service-edition{position:absolute;right:24px;top:48px;font:110px/1 var(--display);color:#cbbda51c;pointer-events:none}
.service-status{display:flex;align-items:center;gap:8px;font:9px monospace;letter-spacing:1.4px;text-transform:uppercase;color:#806e59;margin:18px 0}
.service-status i{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px #e7442510;animation:service-beacon 2s ease-in-out infinite}
#benefits .order-preview{position:relative;padding:28px 22px;background:#fffdf6;border:1px solid #ded6c7;box-shadow:0 2px 2px #4a332010,0 13px 25px #4a332010;transform:rotate(-1deg);border-radius:2px;animation:service-ticket .65s both}
#benefits .order-preview:before{content:'PayOn / SERVICE NOTE';position:absolute;top:8px;left:22px;font:7px monospace;letter-spacing:2px;color:#a0876b}
#benefits .order-preview:after{content:'';position:absolute;inset:auto 0 -7px;height:7px;background:linear-gradient(135deg,#fffdf6 5px,transparent 0) 0 0/10px 10px}
#benefits .order-table{font-size:52px}#benefits .order-tick{width:36px;height:36px;border-radius:50%;border:1px solid #efc3b1;display:grid;place-items:center;flex-shrink:0}
#benefits .order-track{gap:0;margin:28px 0 22px;counter-reset:step}
#benefits .order-track span{position:relative;padding:14px 0 0;font:10px monospace}
#benefits .order-track span.complete:before{content:'';position:absolute;top:-4px;left:0;background:var(--red);width:6px;height:6px;border-radius:50%}
#benefits .scenario-button{background:var(--red);border-radius:3px;padding:15px 23px;min-height:46px;box-shadow:0 3px 0 #a93219;transition:transform .2s,box-shadow .2s}
#benefits .scenario-button:hover{transform:translateY(-2px);box-shadow:0 5px 0 #a93219}#benefits .scenario-button:active{transform:translateY(2px);box-shadow:none}
#benefits .split-controls{border:0;border-radius:5px;background:#e3dbcc;padding:14px 18px}
#benefits .split-controls>span{font:32px var(--display)}#benefits .split-controls button{border:0;border-radius:50%;width:38px;height:38px}
#benefits .guest-shares{gap:12px;perspective:900px;margin-top:25px}
#benefits .guest-shares>div{border:1px solid #e4dbcc;border-top:3px solid var(--red);border-radius:2px;box-shadow:0 7px 12px #4a332012;padding:18px 13px;background:#fffdf6;animation:service-share .55s both;animation-delay:calc(var(--share-index)*45ms)}
#benefits .guest-shares strong{font:27px var(--display);color:#42372b}#benefits .guest-shares small{font-size:8px}
#benefits .gratitude-options button{border-radius:30px;background:#fff9ef;transition:transform .25s,background .25s;min-height:44px}#benefits .gratitude-options button.selected{background:var(--red);transform:translateY(-3px);box-shadow:0 5px 10px #e7442520}
#benefits .digital-receipt{position:relative;padding:25px;background:#fffdf7;box-shadow:0 12px 24px #44321c15;border-top:1px solid white;border-bottom:2px dashed #d9c9b0;animation:service-ticket .5s both}
#benefits .digital-receipt:before{content:'PayOn / WITH APPRECIATION';display:block;font:9px monospace;color:var(--red);letter-spacing:2px;margin-bottom:22px}
#benefits .digital-receipt .receipt-total{font-size:20px}#benefits .scenario-foot{font-size:12px;max-width:420px;margin-top:23px}
#benefits button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
@keyframes service-ticket{from{opacity:0;transform:translateY(-12px) rotate(2deg)}to{opacity:1;transform:translateY(0) rotate(-1deg)}}
@keyframes service-share{from{opacity:0;transform:translateY(15px) rotateX(-15deg)}to{opacity:1;transform:none}}
@keyframes service-beacon{50%{box-shadow:0 0 0 7px #e7442500;opacity:.5}}
@media(max-width:720px){#benefits .service-playground{display:block}#benefits .service-switch{display:grid;grid-template-columns:repeat(3,1fr);padding:12px;gap:6px;margin:0}#benefits .service-switch button{padding:13px 9px;transform:none!important;border:1px solid #d8ccba}#benefits .service-switch button strong{font-size:12px}#benefits .service-atmosphere{display:none}#benefits .service-result{padding:25px 20px;min-height:500px}#benefits .service-result h3{font-size:42px}#benefits .guest-shares{grid-template-columns:repeat(2,1fr)}#benefits .split-controls{padding:12px;gap:12px}#benefits .split-controls>span{font-size:27px}.service-edition{font-size:85px}}
@media(prefers-reduced-motion:reduce){#benefits *,#benefits *:before{animation:none!important;transition:none!important}}
/* Foil heart balloons: one finite celebration for an explicit tip selection. */
#benefits{position:relative}
#benefits .tip-celebration{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;contain:layout paint}
.tip-heart-flight{position:absolute;left:var(--tip-x);top:var(--tip-y);width:49px;height:60px;margin-left:-24px;transform-origin:50% 70%;animation:tip-hearts-rise 2.7s var(--delay) both cubic-bezier(.2,.65,.3,1)}
.tip-heart-foil{width:100%;height:100%;overflow:visible;filter:drop-shadow(2px 5px 4px #612a1625)}
.tip-celebration-5 .tip-balloon-string,.tip-celebration-10 .tip-balloon-string{display:none}
.tip-celebration-10 .tip-heart-flight{width:80px;height:97px;margin-left:-40px;animation-duration:3.2s}
.tip-celebration-15 .tip-heart-flight{width:180px;height:217px;margin-left:-90px;animation:tip-balloon-journey 4.3s both linear}
.tip-celebration-15 .tip-heart-foil{animation:tip-balloon-sway 1.4s ease-in-out infinite;transform-origin:50% 75%}
.tip-heart-burst{position:absolute;left:var(--tip-x);top:calc(var(--tip-y) + var(--tip-rise))}
.tip-heart-burst i{position:absolute;width:8px;height:12px;border-radius:1px;background:linear-gradient(120deg,#ffb789,#ed4521 55%,#a92a15);animation:tip-foil-pop .85s 3.44s both ease-out}
.tip-heart-burst i:nth-child(3n){width:5px;height:8px;background:#f79c65}
@keyframes tip-hearts-rise{0%{opacity:0;transform:translate(0,0) scale(.15) rotate(0)}15%{opacity:1}35%{transform:translate(calc(var(--drift)*.5),-80px) scale(1.08) rotate(var(--tilt))}75%{opacity:1}100%{opacity:0;transform:translate(var(--drift),-235px) scale(.85) rotate(calc(var(--tilt)*-1))}}
@keyframes tip-balloon-journey{0%{opacity:0;transform:translateY(0) scale(.05)}8%{opacity:1;transform:translateY(-30px) scale(.35)}27%{transform:translateY(-115px) scale(1.12)}34%{transform:translateY(-125px) scale(1)}65%{transform:translateY(calc(var(--tip-rise)*.8)) scale(1.04)}79%{opacity:1;transform:translateY(var(--tip-rise)) scale(1.08)}80%{opacity:0;transform:translateY(var(--tip-rise)) scale(1.2)}100%{opacity:0;transform:translateY(var(--tip-rise)) scale(1.2)}}
@keyframes tip-balloon-sway{0%,100%{rotate:-4deg}50%{rotate:5deg}}
@keyframes tip-foil-pop{0%{opacity:0;transform:translate(0,0) scale(.2)}8%{opacity:1}100%{opacity:0;transform:translate(var(--burst-x),var(--burst-y)) rotate(var(--spin)) scale(.3)}}
@media(max-width:720px){.tip-celebration-15 .tip-heart-flight{width:145px;height:175px;margin-left:-72px}}
@media(prefers-reduced-motion:reduce){#benefits .tip-celebration{display:none}}
/* The visible centre of every foil heart starts at its selected pill. */
#benefits .tip-heart-flight{--heart-height:60px;height:var(--heart-height);margin-top:calc(var(--heart-height)*-.38);transform-origin:50% 38%}
#benefits .tip-celebration-10 .tip-heart-flight{--heart-height:97px}
#benefits .tip-celebration-15 .tip-heart-flight{--heart-height:217px}
#benefits .tip-celebration-15 .tip-heart-foil{transform-origin:50% 38%}
#benefits .gratitude-options{padding-bottom:5px;gap:10px}
#benefits .gratitude-options button{position:relative;border:1px solid #d3c7b5;border-top-color:#fffdf7;background:linear-gradient(180deg,#fffef9 0%,#f8f1e5 55%,#e9dfcf 100%);box-shadow:inset 0 1px 1px #fff, inset 0 -1px 1px #cbbb9e55,0 4px 0 #c8bba7,0 6px 0 #b9ac9755,0 9px 12px #47321b13;color:#44392c;text-shadow:0 1px #fff9eb;transform:translateY(0);transition:transform .18s ease,box-shadow .18s ease,background .25s}
#benefits .gratitude-options button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 1px #fff,0 6px 0 #c8bba7,0 11px 15px #47321b20}
#benefits .gratitude-options button.selected{border-color:#d64422;border-top-color:#ffab7c;background:linear-gradient(180deg,#ff8150 0%,#f1562a 24%,#e84420 70%,#d83918 100%);color:#fffaf1;text-shadow:0 -1px #a72c2280;box-shadow:inset 0 1px 1px #ffc19a, inset 0 -1px 2px #a92b1855,0 4px 0 #a72d16,0 5px 0 #8e271b,0 9px 15px #ba381530;transform:translateY(0)}
#benefits .gratitude-options button.selected:hover{transform:translateY(-1px)}
#benefits .gratitude-options button:active{transform:translateY(4px);box-shadow:inset 0 2px 4px #6a311925,0 1px 0 #ac8f76,0 3px 5px #47321b15}
@media(max-width:720px){#benefits .tip-celebration-15 .tip-heart-flight{--heart-height:175px}}