/* v2-air-next only. Fill the illustration frames with visible artwork rather
   than the transparent title/side reserve in the original 834 × 1048 exports.
   Alpha bounds were measured without changing any source image pixels. */
body.ui-study .starter-card-art.card-image-frame,
body.ui-study .growth-story-art.card-image-frame{container-type:size}
body.ui-study .starter-card-art.card-image-frame>img,
body.ui-study .growth-story-art.card-image-frame>img{
 --art-width:624;--art-height:640;--art-bottom:975;--art-center-x:417;
 --art-unit:min(calc((100cqw - 24px)/var(--art-width)),calc((100cqh - 16px)/var(--art-height)));
 width:calc(var(--art-unit)*834);
 height:auto;
 left:calc(50% + (417 - var(--art-center-x))*var(--art-unit));
 bottom:calc(8px - (1048 - var(--art-bottom))*var(--art-unit));
 top:auto;
 transform:translateX(-50%);
}
body.ui-study .card-image-frame>img[src*="/modifiers."]{--art-width:622;--art-height:635;--art-bottom:975}
body.ui-study .card-image-frame>img[src*="/pizza-builder."]{--art-width:624;--art-height:755;--art-bottom:1032}
body.ui-study .card-image-frame>img[src*="/guest-return."]{--art-width:618;--art-height:581;--art-bottom:941}
body.ui-study .card-image-frame>img[src*="/toppings."]{--art-width:685;--art-height:737;--art-bottom:983;--art-center-x:415.5}
body.ui-study .card-image-frame>img[src*="/sauces."]{--art-width:624;--art-height:696;--art-bottom:992}
body.ui-study .card-image-frame>img[src*="/multibrand."]{--art-width:624;--art-height:564;--art-bottom:935}
body.ui-study .card-image-frame>img[src*="/service-fee."]{--art-width:624;--art-height:598;--art-bottom:953}
body.ui-study .card-image-frame>img[src*="/seo."]{--art-width:696;--art-height:624;--art-bottom:966}
body.ui-study .card-image-frame>img[src*="/recommendations."]{--art-width:624;--art-height:575;--art-bottom:942}
body.ui-study .card-image-frame>img[src*="/gamification."]{--art-width:700;--art-height:462;--art-bottom:885}
body.ui-study .card-image-frame>img[src*="/cart"]{--art-width:618;--art-height:542;--art-bottom:924}
body.ui-study .card-image-frame>img[src*="/loyalty."]{--art-width:690;--art-height:567;--art-bottom:939;--art-center-x:419}
body.ui-study .card-image-frame>img[src*="/promotions."]{--art-width:618;--art-height:574;--art-bottom:941}
body.ui-study .card-image-frame>img[src*="/referral."]{--art-width:617;--art-height:696;--art-bottom:990;--art-center-x:417.5}
body.ui-study .card-image-frame>img[src*="/messages."]{--art-width:503;--art-height:723;--art-bottom:1016;--art-center-x:417.5}
/* Native illustration components: larger type remains sharp at every width.
   These are explanatory artwork, not interactive form controls. */
body.ui-study .native-card-art{
 display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
 padding:12px 12px 16px;gap:10px;color:var(--sky-ink,#25282b);container-type:size;
}
body.ui-study .native-card-art :is(strong,b){font-weight:600;letter-spacing:-.02em}
body.ui-study .native-card-art svg{display:block;width:20px;height:20px;flex:none}
body.ui-study .fee-receipt-next{
 width:100%;max-width:420px;padding:14px;border-radius:20px;background:#fff;
 box-shadow:0 4px 18px #0000000b;
}
body.ui-study .fee-order-title{display:block;font-size:clamp(18px,6cqw,24px);line-height:1.2;margin-bottom:10px}
body.ui-study .fee-order-dish{display:flex;align-items:center;gap:10px;font-size:clamp(12px,4cqw,16px);line-height:1.3;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--sky-line,#c5e8ee)}
body.ui-study .fee-order-dish b{display:block;margin-top:3px}
body.ui-study .fee-dish-crop{position:relative;flex:none;width:40px;aspect-ratio:1;border-radius:12px;overflow:hidden}
body.ui-study .fee-dish-crop>img{position:absolute;width:772.2222%;height:auto;max-width:none;left:-134.2593%;top:-427.7778%;object-fit:initial;transform:none;filter:none;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}
body.ui-study .fee-order-row{display:flex;justify-content:space-between;gap:8px;margin-top:6px;font-size:clamp(12px,4cqw,16px);line-height:1.35;color:var(--sky-muted,#5d6267)}
body.ui-study .fee-order-total{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px -6px -6px;padding:10px 10px;border-radius:12px;background:var(--sky-wash);font-size:clamp(18px,5.8cqw,25px);line-height:1.2;white-space:nowrap}
body.ui-study .fee-benefit-next{display:flex;align-items:center;gap:10px;background:#fff;border-radius:15px;padding:8px 12px;box-shadow:0 4px 18px #0000000b;font-size:clamp(14px,4.6cqw,18px);line-height:1.25}
body.ui-study .fee-benefit-next>svg{box-sizing:content-box;padding:6px;background:var(--sky-wash);color:var(--sky-accent);border-radius:11px}
body.ui-study .fee-benefit-next small{display:block;margin-top:3px;font-size:12px;line-height:1.25;color:var(--sky-muted,#5d6267)}
/* Three independent promotion types, with no enclosing screenshot frame. */
body.ui-study .promotion-illustration{gap:10px;justify-content:center;padding:10px 18px 14px}
body.ui-study .promotion-type{width:100%;max-width:420px;position:relative;background:#fff;box-shadow:0 4px 18px #0000000b;border-radius:18px;padding:9px 14px}
body.ui-study .promotion-type-label{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.25;font-weight:500;color:var(--sky-muted,#5d6267)}
body.ui-study .promotion-code{width:90%;align-self:flex-start}
body.ui-study .promotion-code-field{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:5px;font-size:clamp(16px,5.5cqw,23px);line-height:1.2}
body.ui-study .promotion-code-field>span{font-size:10px;font-weight:500;padding:7px 9px;background:var(--sky-soft);border-radius:8px;color:var(--sky-accent)}
body.ui-study .promotion-gift{width:94%;align-self:flex-end}
body.ui-study .promotion-gift .promotion-type-label{color:var(--sky-accent)}
body.ui-study .promotion-gift .promotion-type-label svg{width:16px;height:16px}
body.ui-study .promotion-gift>strong{display:block;font-size:clamp(18px,6cqw,26px);line-height:1.2;margin-top:5px}
body.ui-study .promotion-type-note{display:block;margin-top:3px;font-size:12px;line-height:1.25;color:var(--sky-muted,#5d6267)}
body.ui-study .promotion-gift-cta{display:flex;justify-content:space-between;gap:10px;margin-top:8px;padding:7px 10px;border-radius:10px;background:#00cada;color:#07383c;font-size:12px;line-height:1.2;font-weight:550}
body.ui-study .promotion-discount{width:86%;align-self:flex-start;display:flex;justify-content:space-between;align-items:center;gap:12px}
body.ui-study .promotion-discount strong{display:block;margin-top:3px;font-size:clamp(23px,8cqw,34px);line-height:1.15}
body.ui-study .promotion-toggle{display:block;width:45px;height:27px;padding:4px;background:#00cada;border-radius:99px;flex:none}
body.ui-study .promotion-toggle i{display:block;width:19px;height:19px;margin-left:auto;background:#fff;border-radius:50%}
/* Reuse just the food photograph from the export, with live birthday copy. */
body.ui-study .birthday-illustration{padding:8px 16px 16px}
body.ui-study .birthday-message{width:100%;max-width:420px;background:#fff;border-radius:20px;padding:10px;box-shadow:0 4px 18px #0000000b;overflow:hidden}
body.ui-study .birthday-photo{position:relative;width:100%;height:clamp(100px,38cqh,148px);overflow:hidden;border-radius:13px;container-type:inline-size}
body.ui-study .birthday-photo>img{position:absolute;width:191.2844%;height:auto;max-width:none;left:-45.6422%;top:calc(-100cqw * 326 / 436);object-fit:initial;transform:none;filter:none;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}
body.ui-study .birthday-message-copy{padding:12px 4px 3px}
body.ui-study .birthday-message-copy>strong{display:block;font-size:clamp(17px,5.7cqw,23px);line-height:1.2}
body.ui-study .birthday-message-copy>p{font-size:clamp(13px,4.4cqw,17px);line-height:1.35;margin:7px 0 0;color:var(--sky-muted,#5d6267)}
body.ui-study .birthday-message-link{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;line-height:1.3;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--sky-wash);color:var(--sky-accent);font-weight:550}
/* The 768–1023px art frame is shorter, so tighten only internal card padding. */
@media(min-width:768px) and (max-width:1023px){
 body.ui-study .native-card-art{padding-top:4px;padding-bottom:10px;gap:7px}
 body.ui-study .fee-receipt-next{padding:12px 16px}
 body.ui-study .fee-order-dish{padding-bottom:8px;margin-bottom:8px;gap:10px}
 body.ui-study .fee-dish-crop{width:38px}
 body.ui-study .fee-order-title{margin-bottom:9px}
 body.ui-study .fee-order-total{margin-top:8px;padding-block:10px}
 body.ui-study .fee-benefit-next{padding:7px 12px}
 body.ui-study .fee-benefit-next>svg{padding:6px;width:18px;height:18px}
 body.ui-study .promotion-illustration{gap:8px;padding-block:8px}
 body.ui-study .promotion-type{padding:8px 14px}
 body.ui-study .promotion-gift-cta{margin-top:7px;padding-block:7px}
 body.ui-study .birthday-photo{height:86px}
 body.ui-study .birthday-message-copy{padding-top:9px}
 body.ui-study .birthday-message-link{margin-top:7px;padding-block:8px}
}

/* Checkout colours are live UI overlays. The original bank logos and all
   banking tiles remain the supplied PNG; the SBP mark is a CSS image window. */
body.ui-study .growth-story-art.card-image-frame>.checkout-art-source{
 --checkout-unit:min(calc((100cqw - 24px)/618),calc((100cqh - 16px)/542));
 position:absolute;left:50%;bottom:calc(8px - 124*var(--checkout-unit));
 width:calc(834*var(--checkout-unit));aspect-ratio:834/1048;
 transform:translateX(-50%);container-type:inline-size;
}
body.ui-study .checkout-art-source>.checkout-original{
 position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;
 margin:0;object-fit:contain;transform:none;filter:none;mix-blend-mode:normal;
 -webkit-mask-image:none;mask-image:none;
}
body.ui-study .checkout-art-source :is(.checkout-pickup,.checkout-pay){
 position:absolute;display:flex;align-items:center;justify-content:center;
 background:#00cada;color:#07383c;line-height:1.2;font-weight:600;
 white-space:nowrap;letter-spacing:-.02em;
}
body.ui-study .checkout-pickup{
 left:50.41966%;top:46.66031%;width:31.23501%;height:3.62595%;
 border-radius:1.43885cqw;font-size:1.55875cqw;
}
body.ui-study .checkout-pay{
 left:16.54676%;top:80.00954%;width:66.96643%;height:5.15267%;
 gap:1.07914cqw;border-radius:1.91847cqw;font-size:2.15827cqw;
}
body.ui-study .checkout-bank-mark{
 display:block;position:relative;flex:none;width:3.59712cqw;height:3.59712cqw;
 border-radius:.59952cqw;overflow:hidden;background:#f4f6f8;
}
body.ui-study .checkout-bank-mark>img{
 position:absolute;width:2780%;height:auto;max-width:none;left:-613.33333%;top:-2263.33333%;
 margin:0;object-fit:initial;transform:none;filter:none;mix-blend-mode:normal;
 -webkit-mask-image:none;mask-image:none;
}