/* SyokBox V2.30: approved first-login illustrations and simplified reward recall. */
.onboarding-modal{max-height:min(760px,calc(100dvh - 38px));overflow:hidden;background:#fff}
.guide-art{position:relative;height:clamp(225px,39vh,330px);overflow:hidden;background:#fff!important}
.guide-copy{background:#fff}
.guide-official-box,.guide-gift-box{display:block;object-fit:contain}

/* Welcome: exact approved SyokBox artwork, never a redrawn ribbon. */
.guide-v230-welcome{position:relative;width:min(100%,380px);height:100%}
.guide-glow{position:absolute;inset:20% 10% 10%;background:radial-gradient(ellipse,#f3f5ff 0%,#fff 68%)}
.welcome-box{position:absolute;filter:drop-shadow(0 8px 11px rgba(27,63,161,.13));animation:guide-float 3.6s ease-in-out infinite}
.welcome-box-1{width:107px;left:36%;top:29%;z-index:4}.welcome-box-2{width:78px;left:10%;top:23%;transform:rotate(-14deg);animation-delay:-.8s}.welcome-box-3{width:76px;right:10%;top:18%;transform:rotate(13deg);animation-delay:-1.5s}.welcome-box-4{width:65px;left:14%;bottom:15%;transform:rotate(10deg);animation-delay:-2s}.welcome-box-5{width:74px;right:13%;bottom:13%;transform:rotate(-10deg);animation-delay:-.4s}.welcome-box-6{width:47px;left:41%;top:6%;transform:rotate(-8deg);animation-delay:-2.3s}.welcome-box-7{width:47px;left:43%;bottom:5%;transform:rotate(12deg);animation-delay:-1.1s}.welcome-box-8{width:40px;right:3%;top:47%;transform:rotate(9deg);animation-delay:-1.9s}
.guide-spark{position:absolute;font-size:17px;color:#f34675}.spark-one{left:9%;top:17%}.spark-two{right:9%;top:45%;color:#5473ef}.spark-three{left:29%;bottom:17%;color:#ffc05d}.spark-four{right:30%;top:8%;color:#f34675}
@keyframes guide-float{50%{translate:0 -5px}}

/* Reward illustration: three tactile merchant reward cards. */
.guide-v230-rewards{position:relative;width:min(94%,375px);height:100%;display:flex;align-items:center;justify-content:center}
.guide-reward-card{position:absolute;width:124px;padding:8px;background:#fff;border:1px solid #edf0f6;border-radius:15px;box-shadow:0 12px 28px rgba(34,51,105,.11);text-align:left}
.reward-card-coffee{left:4%;top:24%;transform:rotate(-9deg);z-index:1}.reward-card-discount{left:calc(50% - 66px);top:16%;z-index:3}.reward-card-tea{right:3%;top:33%;transform:rotate(8deg);z-index:2}
.guide-reward-visual{display:grid;place-items:center;height:91px;margin-bottom:8px;border-radius:10px}.guide-coffee{background:linear-gradient(145deg,#f8e8d7,#f7f0e8)}.guide-tea{background:linear-gradient(145deg,#fff1db,#ffe4bd)}.guide-coffee>span,.guide-tea>span{font-size:48px}.guide-discount{background:linear-gradient(145deg,#153fbc,#5477f5);color:#fff;gap:0;align-content:center}.guide-discount strong{font-size:34px;line-height:1}.guide-discount>span{font-size:15px;font-weight:800;letter-spacing:.12em}.guide-reward-card>strong{display:block;color:#172a5e;font-size:10px;white-space:nowrap}.guide-reward-card>span{display:block;margin-top:3px;color:#738099;font-size:9px}.guide-rewards-spark{position:absolute;right:13%;top:15%;color:#f34675;font-size:23px;font-style:normal}

/* Campaign illustration: Standard, Scratch, Spin and Tap are instantly recognizable. */
.guide-v230-campaigns{position:relative;display:grid;width:min(88%,335px);grid-template-columns:1fr 1fr;gap:10px;padding:12px 0}
.guide-campaign-tile{position:relative;display:grid;justify-items:center;align-content:center;min-height:101px;padding:9px 7px 8px;background:#fff;border:1px solid #ecf0f7;border-radius:15px;box-shadow:0 7px 18px rgba(34,51,105,.07)}
.guide-campaign-tile>strong{margin-top:6px;color:#172a5e;font-size:10px;white-space:nowrap}.guide-tile-icon{color:#3154d4}.guide-tile-icon .sb-icon{width:43px;height:43px}.guide-active-badge{position:absolute;right:7px;top:7px;padding:2px 5px;border-radius:9px;background:#eaf7ec;color:#299246;font-size:7px;font-weight:700}
.guide-mini-scratch{display:grid;place-items:center;width:63px;height:53px;border-radius:8px;background:linear-gradient(135deg,#214ecc,#496ff2)}.guide-mini-scratch>.guide-official-box{width:34px;height:33px}.guide-mini-scratch>i{width:43px;padding:2px 0;background:#edf0f5;color:#52617a;border-radius:3px;text-align:center;font-size:5px;font-style:normal;font-weight:800;letter-spacing:.07em}
.guide-mini-wheel{position:relative;display:grid;width:54px;height:54px;place-items:center;border:3px solid #2447ba;border-radius:50%;background:conic-gradient(#fff 0deg 45deg,#e5eaff 45deg 90deg,#fff 90deg 135deg,#e5eaff 135deg 180deg,#fff 180deg 225deg,#e5eaff 225deg 270deg,#fff 270deg 315deg,#e5eaff 315deg 360deg)}.guide-mini-wheel>.guide-official-box{width:28px;height:28px}
.guide-mini-tap{display:grid;grid-template-columns:repeat(3,23px);gap:1px}.guide-mini-tap>.guide-gift-box{width:23px;height:24px}.guide-campaign-spark{position:absolute;right:-5px;top:15px;color:#f34675;font-size:19px;font-style:normal}

/* QR illustration: countertop standee and a real customer reward screen. */
.guide-v230-qr{position:relative;display:flex;width:min(88%,355px);height:100%;align-items:center;justify-content:center;gap:18px}
.guide-qr-stand{display:grid;width:143px;justify-items:center;padding:17px 11px 13px;background:#fff;border:1px solid #e9edf5;border-radius:12px;box-shadow:0 14px 28px rgba(34,51,105,.11);transform:rotate(-5deg)}.guide-qr-stand>img{width:106px;height:30px;object-fit:contain}.guide-qr-stand>strong{margin:10px 0 6px;color:#172a5e;font-size:12px}.guide-stand-code{display:grid;width:78px;height:78px;place-items:center;border:1px solid #edf0f6;border-radius:9px;color:#274bc4}.guide-stand-code .sb-icon{width:64px;height:64px}.guide-qr-stand>span{margin-top:8px;color:#75819a;text-align:center;font-size:8px}
.guide-reward-phone{position:relative;display:grid;width:123px;justify-items:center;padding:18px 9px 13px;background:#fff;border:3px solid #172a5e;border-radius:19px;box-shadow:0 13px 27px rgba(34,51,105,.13);transform:rotate(6deg)}.guide-reward-phone>i{position:absolute;top:6px;width:38px;height:4px;border-radius:5px;background:#172a5e}.guide-reward-phone>img:first-of-type{width:89px;height:28px;object-fit:contain}.guide-reward-phone>.guide-gift-box{width:62px;height:65px}.guide-reward-phone>strong{color:#172a5e;text-align:center;font-size:8px}.guide-reward-phone>span{margin:4px 0;color:#74819a;font-size:8px}.guide-reward-phone>b{width:100%;padding:6px 0;background:#274dca;color:#fff;border-radius:6px;text-align:center;font-size:8px}.guide-qr-spark{position:absolute;right:12px;top:22%;color:#f34675;font-size:22px}

/* Browsers and older generic button rules must respect hidden recall actions. */
.recall-slot[hidden],.recall-card [hidden],.recall-pin[hidden],form#customer>button[type="submit"][hidden]{display:none!important}
.recall-card{padding:14px;background:#fff}.recall-pin{display:grid;gap:9px;margin-top:10px}.recall-pin .field{margin:0}.recall-try{margin-top:7px}

@media(max-width:390px){.guide-art{height:clamp(210px,35vh,285px)}.guide-copy{padding:17px 17px 18px}.guide-copy h2{font-size:20px}.guide-reward-card{width:108px;padding:7px}.guide-reward-visual{height:79px}.reward-card-discount{left:calc(50% - 58px)}.guide-v230-campaigns{width:90%;gap:8px}.guide-campaign-tile{min-height:91px}.guide-v230-qr{gap:12px}.guide-qr-stand{width:129px}.guide-reward-phone{width:111px}}
@media(max-height:710px){.guide-art{height:205px}.guide-copy{padding-top:15px;padding-bottom:15px}.guide-dots{margin:12px 0}.guide-campaign-tile{min-height:87px}.guide-reward-card{top:17%}.reward-card-tea{top:28%}.guide-qr-stand{padding-top:12px;padding-bottom:9px}}
@media(prefers-reduced-motion:reduce){.welcome-box{animation:none}}