/* How it works: interactive walkthrough (from workflow-study.html). Every class is wf- scoped. */
.wf{--wf-blue:#234ee9;--wf-ink:#16191e;--wf-muted:#65707b;--wf-line:#e1e5ea;--wf-gold:#efbf36;--wf-paper:#fff;--wf-ease:cubic-bezier(.22,1,.36,1)}
.wf *{box-sizing:border-box}
.wf{margin:0;background:var(--wf-paper);color:var(--wf-ink);font:15px/1.5 'DM Sans',sans-serif}
.wf button,.wf input{font:inherit}
.wf button{cursor:pointer}
.wf button:focus-visible,.wf input:focus-visible{outline:3px solid #92aeff;outline-offset:5px}
.wf button:disabled{cursor:default}
.wf .wf-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.wf .wf-title{font:500 clamp(32px,4vw,49px)/1.05 'Manrope';letter-spacing:-2px;margin:0}
.wf .wf-intro p{max-width:300px;color:var(--wf-muted);font-size:14px;margin:0 0 3px}
.wf .wf-chapters{display:flex;gap:28px;margin-top:30px;border-bottom:1px solid var(--wf-line)}
.wf .wf-chapters button{border:0;background:none;padding:13px 0;color:var(--wf-muted);font-size:13px;position:relative;min-height:48px}
.wf .wf-chapters button span{color:#929ba5;margin-right:7px;font-size:10px}
.wf .wf-chapters button[aria-current=step]{color:var(--wf-ink)}
.wf .wf-chapters button::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--wf-blue);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.wf .wf-chapters button[aria-current=step]::after{transform:scaleX(1)}
.wf .wf-scene-wrap{position:relative;height:510px;margin-top:8px;overflow:hidden}
.wf .wf-scene{height:510px;width:100%;position:relative;isolation:isolate}
.wf .wf-scene::before{content:'';position:absolute;left:48%;top:40px;width:45%;height:420px;background:radial-gradient(ellipse,#f0f3f9 0%,#fafbfd 45%,#ffffff00 72%);z-index:-1}
.wf .wf-editor,.wf .wf-poster{position:absolute;left:5%;top:65px;width:300px;transition:opacity .6s var(--wf-ease),transform .8s var(--wf-ease)}
.wf .wf-role{font-size:10px;letter-spacing:1.5px;color:var(--wf-muted);margin-bottom:19px}
.wf .wf-editor h3{font:500 25px/1.15 'Manrope';letter-spacing:-.8px;margin:0 0 25px}
.wf .wf-field{margin-bottom:20px;font-size:11px;color:var(--wf-muted);display:block}
.wf .wf-namebox{margin-top:8px;padding:11px 12px;border:1px solid var(--wf-line);border-radius:6px;color:var(--wf-ink);font-size:14px;height:45px}
.wf .wf-caret{display:inline-block;height:15px;width:1px;background:var(--wf-blue);vertical-align:middle;margin-left:2px;animation:wf-blink 1s step-end infinite}
.wf .wf-swatches{display:flex;gap:10px;margin-top:9px}
.wf .wf-swatches button{width:28px;height:28px;background:var(--wf-swatch);border:4px solid white;border-radius:50%;outline:1px solid transparent}
.wf .wf-swatches button[aria-pressed=true]{outline-color:var(--wf-ink)}
.wf .wf-editor-foot{font-size:11px;color:var(--wf-blue);margin-top:18px;min-height:18px}
.wf .wf-poster{top:58px;opacity:0;transform:translateY(20px);pointer-events:none}
.wf .wf-poster-sheet{background:#fff;border:1px solid #e5e8ee;padding:27px 25px 25px;border-radius:10px;box-shadow:0 15px 35px #1b29420b;text-align:center;transform:none;width:236px;margin:auto}
.wf .wf-poster-sheet strong{display:block;font:600 17px 'Manrope';letter-spacing:-.5px}
.wf .wf-poster-sheet .wf-poster-h{font:500 26px/1.08 'Manrope';letter-spacing:-1px;margin:19px 0}
.wf .wf-qr{display:block;background:#fff;padding:10px;width:142px;height:142px;margin:auto}
.wf .wf-qr svg{width:100%;height:100%;display:block}
.wf .wf-poster-sheet p{color:var(--wf-muted);font-size:11px;margin:15px 0 0}
.wf .wf-poster-note{text-align:center;color:var(--wf-muted);font-size:11px;margin-top:17px}
.wf .wf-phone{position:absolute;left:61%;top:18px;width:280px;height:470px;border:5px solid #292b2f;border-radius:39px;background:#f3f3f7;box-shadow:0 12px 30px #1722360c;opacity:0;transform:translateY(18px);transition:opacity .65s,transform .9s var(--wf-ease);overflow:hidden}
.wf .wf-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:74px;height:20px;background:#202225;border-radius:20px;z-index:12}
.wf .wf-status{position:absolute;top:16px;left:20px;font-size:9px;font-weight:600;z-index:10}
.wf .wf-home{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);height:4px;width:87px;background:#24272b;border-radius:4px;z-index:15}
.wf .wf-camera{position:absolute;inset:0;background:#e5e6e5;overflow:hidden;transition:opacity .6s}
.wf .wf-camera::before{content:'';position:absolute;inset:0;background:linear-gradient(30deg,#d7d5cd,#f8f7f2);opacity:.8}
.wf .wf-camera-paper{position:absolute;left:29px;top:105px;width:212px;background:#fff;border-radius:3px;padding:25px 20px;box-shadow:0 4px 16px #2027330d;transform:scale(1.07);transition:transform 1.5s var(--wf-ease)}
.wf .wf-camera-paper strong{display:block;text-align:center;font-size:14px;letter-spacing:-.5px;margin-bottom:15px}
.wf .wf-camera-paper .wf-qr{width:160px;height:160px;padding:10px}
.wf .wf-focus{position:absolute;left:50%;top:184px;transform:translateX(-50%);width:170px;height:170px;z-index:2}
.wf .wf-focus i{position:absolute;width:22px;height:22px;border-color:#fff;border-style:solid;border-width:0;transition:border-color .3s}
.wf .wf-focus i:nth-child(1){left:0;top:0;border-left-width:3px;border-top-width:3px;border-radius:8px 0 0}
.wf .wf-focus i:nth-child(2){right:0;top:0;border-right-width:3px;border-top-width:3px;border-radius:0 8px 0 0}
.wf .wf-focus i:nth-child(3){left:0;bottom:0;border-left-width:3px;border-bottom-width:3px;border-radius:0 0 0 8px}
.wf .wf-focus i:nth-child(4){right:0;bottom:0;border-right-width:3px;border-bottom-width:3px;border-radius:0 0 8px}
.wf .wf-camera .wf-found{position:absolute;left:25px;right:25px;bottom:57px;background:#fff;border:0;border-radius:9px;padding:11px 7px;text-align:center;font-size:11px;font-weight:500;box-shadow:0 5px 20px #171c2614;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .5s var(--wf-ease);color:#202329}
.wf .wf-camera-caption{position:absolute;top:62px;left:0;right:0;text-align:center;font-size:11px;color:#575b5e}
.wf .wf-camera-bottom{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:1px;color:#666a6f}
.wf .wf-wallet-title{position:absolute;top:60px;left:17px;font:600 25px 'Manrope';letter-spacing:-1px;opacity:0;transition:opacity .35s}
.wf .wf-add-top{position:absolute;top:57px;left:15px;right:15px;display:flex;justify-content:space-between;align-items:center;font-size:12px;opacity:0}
.wf .wf-add-top span{color:#2671cf}
.wf .wf-add-top b{font-weight:600}
.wf .wf-add-top button{border:0;background:none;color:#2671cf;font-size:12px;font-weight:600;padding:5px;min-height:32px}
.wf .wf-card-anchor{position:absolute;left:61%;top:103px;width:280px;z-index:6;pointer-events:none;will-change:transform,opacity;transform-origin:50% 50%}
.wf .wf-loyalty-card{height:336px;border-radius:13px;overflow:hidden;background:var(--wf-gold);color:#39290c;box-shadow:0 18px 36px #30271312;position:relative;transition:background .8s var(--wf-ease)}
.wf .wf-loyalty-card::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,#fff0 15%,#fff2 16%,#fff0 43%,#fff2 44%,#fff0 70%);pointer-events:none}
.wf .wf-pass-head{display:flex;justify-content:space-between;align-items:start;padding:19px 18px 14px;gap:15px;position:relative}
.wf .wf-pass-logo{font:600 15px/1.2 'Manrope';max-width:150px;min-height:36px}
.wf .wf-pass-header-value{font-size:14px;text-align:right}
.wf .wf-pass-header-value small{display:block;font-size:7px;letter-spacing:.7px;margin-bottom:2px}
.wf .wf-pass-strip{padding:19px 29px;background:#fff0b8;transition:background .8s}
.wf .wf-cups{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 20px}
.wf .wf-cup{height:35px;display:grid;place-items:center;opacity:.23;transform:translateY(0);transition:opacity .5s,transform .65s var(--wf-ease)}
.wf .wf-cup svg{width:34px;height:34px}
.wf .wf-pass-fields{display:flex;justify-content:space-between;padding:18px 17px 12px;font-size:10px;gap:10px}
.wf .wf-pass-fields>div:last-child{text-align:right}
.wf .wf-pass-fields small{display:block;font-size:7px;letter-spacing:.6px;opacity:.7;margin-bottom:4px}
.wf .wf-pass-fields strong{font-weight:500}
.wf .wf-pass-code{text-align:center;padding:12px 0}
.wf .wf-pass-code svg{display:block;width:130px;height:45px;margin:auto;background:white}
.wf .wf-pass-code small{font-size:7px;letter-spacing:.8px;display:block;margin-top:5px}
.wf .wf-stage-caption{min-height:57px;display:flex;align-items:center;justify-content:center;text-align:center;color:#5c6774;font-size:14px;padding:0 20px}
.wf [data-phase=scan] .wf-editor,.wf [data-phase=add] .wf-editor,.wf [data-phase=saved] .wf-editor{opacity:0;transform:translateY(-18px);pointer-events:none}
.wf [data-phase=scan] .wf-poster,.wf [data-phase=add] .wf-poster,.wf [data-phase=saved] .wf-poster{opacity:1;transform:none;pointer-events:auto}
.wf [data-phase=scan] .wf-phone,.wf [data-phase=add] .wf-phone,.wf [data-phase=saved] .wf-phone{opacity:1;transform:none}
.wf [data-phase=add] .wf-camera,.wf [data-phase=saved] .wf-camera{opacity:0;pointer-events:none}
.wf [data-phase=add] .wf-add-top{opacity:1}
.wf [data-phase=saved] .wf-wallet-title{opacity:1}
.wf [data-recognized=true] .wf-focus i{border-color:#e3ba39}
.wf [data-recognized=true] .wf-found{opacity:1;transform:none}
.wf [data-recognized=true] .wf-camera-paper{transform:scale(1)}
.wf [data-phase=create] .wf-phone{pointer-events:none}
.wf [data-phase=saved] .wf-add-top{pointer-events:none}
@keyframes wf-blink{50%{opacity:0}}
@media (max-width:760px){.wf .wf-intro{display:block}.wf .wf-intro p{margin-top:17px;max-width:400px}.wf .wf-chapters{gap:22px;margin-top:22px}.wf .wf-scene-wrap{height:710px}.wf .wf-scene{height:710px}.wf .wf-editor,.wf .wf-poster{left:50%;transform:translateX(-50%);top:22px;width:min(300px,90%)}.wf .wf-editor h3{margin-bottom:12px;font-size:22px}.wf .wf-editor .wf-role{margin-bottom:10px}.wf .wf-field{margin-bottom:10px}.wf .wf-namebox{margin-top:4px;height:39px;padding:8px 10px}.wf .wf-swatches{margin-top:6px}.wf .wf-editor-foot{margin-top:8px}.wf .wf-phone{left:50%;top:284px;width:256px;height:414px;margin-left:-128px}.wf .wf-card-anchor{left:50%;top:334px;margin-left:-140px}.wf .wf-poster{top:24px}.wf .wf-poster-sheet{padding:14px;width:200px;transform:none}.wf .wf-poster-sheet .wf-poster-h{font-size:20px;margin:8px 0}.wf .wf-poster-sheet .wf-qr{width:105px;height:105px;padding:5px}.wf .wf-poster-sheet p{margin-top:6px}.wf .wf-poster-note{margin-top:8px}.wf .wf-poster .wf-role{display:none}.wf [data-phase=scan] .wf-editor,.wf [data-phase=add] .wf-editor,.wf [data-phase=saved] .wf-editor{transform:translate(-50%,-12px)}.wf [data-phase=scan] .wf-poster,.wf [data-phase=add] .wf-poster,.wf [data-phase=saved] .wf-poster{transform:translateX(-50%)}.wf .wf-camera-paper{top:73px;left:20px}.wf .wf-focus{top:152px}.wf .wf-camera-caption{top:47px}.wf .wf-camera .wf-found{bottom:42px}.wf .wf-camera-bottom{bottom:20px}.wf .wf-wallet-title{top:48px}.wf .wf-add-top{top:45px}.wf .wf-stage-caption{font-size:12px;min-height:60px}.wf .wf-scene::before{top:280px;left:0;width:100%;height:400px}.wf .wf-intro .wf-title{font-size:36px}}
@media (prefers-reduced-motion:reduce){.wf *,.wf *::before,.wf *::after{animation:none!important;transition:none!important}}
.wf .wf-intro p{max-width:330px}
.wf .wf-scene-wrap,.wf .wf-scene{height:575px}
.wf .wf-phone{width:324px;height:548px;top:12px;border-width:4px;border-radius:40px}
.wf .wf-card-anchor{left:calc(61% + 22px);top:127px;width:280px}
.wf .wf-loyalty-card{height:354px}
.wf .wf-pass-logo{font-size:17px}
.wf .wf-pass-header-value{font-size:15px}
.wf .wf-pass-header-value small{font-size:8px}
.wf .wf-pass-head{padding-top:20px;padding-bottom:18px}
.wf .wf-pass-strip{padding:19px 29px}
.wf .wf-pass-fields{font-size:11px;padding-top:19px}
.wf .wf-pass-fields small{font-size:8px}
.wf .wf-pass-code{padding-top:16px}
.wf .wf-pass-code small{font-size:8px}
.wf .wf-pass-code svg{height:48px;width:143px}
.wf .wf-wallet-title{top:63px;font-size:27px;left:19px}
.wf .wf-add-top{top:66px;left:20px;right:20px;font-size:13px}
.wf .wf-add-top button{font-size:14px;min-height:44px}
.wf .wf-editor{top:74px}
.wf .wf-editor h3{margin-bottom:21px}
.wf .wf-editor .wf-field{margin-bottom:17px}
.wf .wf-goal-options{display:flex;gap:8px;margin-top:8px}
.wf .wf-goal-options button{height:38px;min-width:48px;border:1px solid var(--wf-line);border-radius:6px;color:var(--wf-muted);background:#fff;font-size:13px;transition:background .4s,color .4s,transform .4s}
.wf .wf-goal-options button[aria-pressed=true]{background:var(--wf-blue);border-color:var(--wf-blue);color:#fff;transform:translateY(-2px)}
.wf .wf-goal-field{margin-bottom:0!important}
.wf .wf-camera-paper{width:246px;left:50%;top:125px;transform:translateX(-50%);padding:23px 20px}
.wf .wf-camera-paper strong{font-size:15px;line-height:22px;margin-bottom:16px}
.wf .wf-camera-paper .wf-qr{width:176px;height:176px}
.wf .wf-camera-caption{top:76px;font-size:12px}
.wf .wf-focus{transform:none;transition:none}
.wf .wf-focus i{width:24px;height:24px}
.wf [data-recognized=true] .wf-camera-paper{transform:translateX(-50%)}
.wf .wf-camera .wf-found{bottom:70px;padding:14px 10px;font-size:12px}
.wf .wf-camera-bottom{bottom:35px}
.wf .wf-poster{top:75px}
.wf .wf-poster-sheet{transform:none}
.wf .wf-poster-sheet .wf-poster-h{font-size:25px}
.wf .wf-staff{position:absolute;left:5%;top:67px;width:300px;opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .6s,transform .8s var(--wf-ease)}
.wf .wf-staff h3{font:500 25px/1.15 'Manrope';letter-spacing:-.6px;margin:0 0 24px;min-height:58px}
.wf .wf-staff-screen{height:293px}
.wf .wf-staff-scanner{height:143px;border:1px solid var(--wf-line);border-radius:12px;position:relative;background:#f8f9fb;display:grid;place-items:center;overflow:hidden}
.wf .wf-staff-scanner svg{width:200px;height:75px;background:#fff}
.wf .wf-scan-line{position:absolute;left:32px;right:32px;top:25px;height:2px;background:var(--wf-blue);box-shadow:0 0 14px #234ee970;opacity:0}
.wf .wf-scan-frame{position:absolute;inset:18px;border:1px solid #bdc9e4;border-radius:8px}
.wf .wf-member-result{min-height:60px;padding:14px 0 10px;opacity:0;transition:opacity .4s}
.wf .wf-member-result strong{font-size:14px;font-weight:500;display:block}
.wf .wf-member-result span{display:block;font-size:11px;color:var(--wf-muted)}
.wf .wf-staff button{width:100%;min-height:44px;border:0;background:var(--wf-blue);color:white;border-radius:7px;font-size:13px;padding:10px 15px}
.wf .wf-staff button:disabled{background:#e9edf5;color:#6c7686}
.wf .wf-visit-story,.wf .wf-reward-story{position:absolute;top:92px;left:0;right:0;opacity:0;pointer-events:none;transition:opacity .5s}
.wf .wf-visit-label{color:var(--wf-blue);font-size:12px;display:block;margin:15px 0}
.wf .wf-visit-story>strong{font:500 32px 'Manrope';letter-spacing:-1px;display:block}
.wf .wf-visit-story p,.wf .wf-reward-story p{font-size:13px;line-height:1.6;color:var(--wf-muted);margin:20px 0}
.wf .wf-visit-story #wf-visit-dots{display:flex;gap:7px;margin:20px 0}
.wf .wf-visit-story #wf-visit-dots i{height:5px;flex:1;background:#e5e9f1;border-radius:3px}
.wf .wf-visit-story #wf-visit-dots i.wf-done{background:var(--wf-blue)}
.wf .wf-reward-cup{width:60px;height:60px;margin:6px 0 18px;color:#39290c;background:#fff0b8;border-radius:14px;display:grid;place-items:center}
.wf .wf-reward-cup svg{width:41px;height:41px}
.wf .wf-reward-story>strong{font:500 25px/1.15 'Manrope';letter-spacing:-.7px;display:block}
.wf .wf-cup{position:relative;transition:opacity .5s,transform .6s var(--wf-ease)}
.wf .wf-cup .wf-cup-fill{position:absolute;inset:0;display:grid;place-items:center;clip-path:inset(100% 0 0 0);color:#39290c;transition:clip-path .65s var(--wf-ease)}
.wf .wf-cup .wf-cup-ghost{opacity:.2;display:grid;place-items:center}
.wf .wf-cup.wf-earned .wf-cup-fill{clip-path:inset(0 0 0 0)}
.wf .wf-cup.wf-earned{transform:translateY(0)!important}
.wf .wf-loyalty-card.wf-reward-ready .wf-pass-strip{background:#ffe8a0!important}
.wf .wf-loyalty-card.wf-reward-ready #wf-remaining{color:#39290c;font-weight:700}
.wf .wf-stage-caption{min-height:54px}
.wf .wf-chapters{margin-top:23px}
.wf [data-phase=staff] .wf-editor,.wf [data-phase=collect] .wf-editor,.wf [data-phase=reward] .wf-editor{opacity:0;pointer-events:none;transform:translateY(-18px)}
.wf [data-phase=staff] .wf-poster,.wf [data-phase=collect] .wf-poster,.wf [data-phase=reward] .wf-poster{opacity:0;pointer-events:none;transform:translateY(-18px)}
.wf [data-phase=staff] .wf-staff,.wf [data-phase=collect] .wf-staff,.wf [data-phase=reward] .wf-staff{opacity:1;pointer-events:auto;transform:none}
.wf [data-phase=staff] .wf-phone,.wf [data-phase=collect] .wf-phone,.wf [data-phase=reward] .wf-phone{opacity:1;transform:none}
.wf [data-phase=staff] .wf-camera,.wf [data-phase=collect] .wf-camera,.wf [data-phase=reward] .wf-camera{opacity:0;pointer-events:none}
.wf [data-phase=staff] .wf-wallet-title,.wf [data-phase=collect] .wf-wallet-title,.wf [data-phase=reward] .wf-wallet-title{opacity:1}
.wf [data-phase=collect] .wf-staff-screen,.wf [data-phase=reward] .wf-staff-screen{opacity:0;pointer-events:none}
.wf [data-phase=collect] .wf-visit-story,.wf [data-phase=reward] .wf-reward-story{opacity:1;pointer-events:auto}
.wf [data-phase=staff] .wf-add-top,.wf [data-phase=collect] .wf-add-top,.wf [data-phase=reward] .wf-add-top{pointer-events:none}
@media (max-width:1000px) and (min-width:761px){.wf .wf-phone{left:58%}.wf .wf-card-anchor{left:calc(58% + 22px)}.wf .wf-editor,.wf .wf-poster,.wf .wf-staff{left:1%;width:270px}}
@media (max-width:760px){.wf .wf-scene-wrap,.wf .wf-scene{height:900px}.wf .wf-phone{left:calc(50% - min(150px,50%));margin-left:0;width:min(300px,100%);top:350px;height:532px}.wf .wf-card-anchor{left:50%;margin-left:-140px;top:455px}.wf .wf-editor,.wf .wf-staff{left:50%;top:24px;width:min(300px,90%);transform:translateX(-50%)}.wf .wf-editor h3{font-size:23px;min-height:27px;margin-bottom:14px}.wf .wf-editor .wf-field{margin-bottom:11px}.wf .wf-editor-foot{margin-top:10px}.wf .wf-goal-options button{height:35px;min-height:35px}.wf .wf-poster{top:31px}.wf .wf-poster-sheet{width:210px;padding:16px}.wf .wf-poster-sheet .wf-poster-h{font-size:22px}.wf .wf-poster-sheet .wf-qr{width:123px;height:123px}.wf .wf-poster-note{margin-top:9px}.wf .wf-camera-paper{top:119px;width:238px}.wf .wf-camera-caption{top:73px}.wf .wf-camera .wf-found{bottom:65px}.wf .wf-wallet-title{top:60px}.wf .wf-add-top{top:61px}.wf .wf-staff h3{font-size:23px;min-height:30px;margin-bottom:15px}.wf .wf-staff .wf-role{margin-bottom:12px}.wf .wf-staff-scanner{height:111px}.wf .wf-staff-screen{height:244px}.wf .wf-staff .wf-member-result{padding:8px 0;min-height:50px}.wf .wf-visit-story,.wf .wf-reward-story{top:72px}.wf .wf-visit-story p,.wf .wf-reward-story p{margin:14px 0}.wf .wf-reward-cup{width:43px;height:43px;margin:3px 0 13px}.wf .wf-reward-cup svg{width:31px;height:31px}.wf .wf-reward-story>strong{font-size:23px}.wf [data-phase=staff] .wf-editor,.wf [data-phase=collect] .wf-editor,.wf [data-phase=reward] .wf-editor{transform:translate(-50%,-15px)}.wf [data-phase=staff] .wf-poster,.wf [data-phase=collect] .wf-poster,.wf [data-phase=reward] .wf-poster{transform:translate(-50%,-15px)}.wf [data-phase=staff] .wf-staff,.wf [data-phase=collect] .wf-staff,.wf [data-phase=reward] .wf-staff{transform:translateX(-50%)}.wf .wf-chapters{gap:0;justify-content:space-between}.wf .wf-chapters button{font-size:11px;min-width:44px;text-align:center}.wf .wf-chapters button span{display:block;margin:0 0 4px}.wf .wf-intro .wf-title{font-size:34px}.wf .wf-scene::before{top:350px;height:520px}}
.wf .wf-cup.wf-gift-slot{color:#39290c;isolation:isolate;transition:color .6s ease}
.wf .wf-cup.wf-gift-slot>svg{opacity:.2;transition:opacity .6s ease}
.wf .wf-cup.wf-gift-slot.wf-unlocked{color:#234ee9}
.wf .wf-cup.wf-gift-slot.wf-unlocked>svg{opacity:1}
.wf .wf-cup.wf-gift-slot>svg{width:34px;height:34px;overflow:visible}
.wf .wf-gift-label{position:absolute;bottom:-12px;font:700 7px/1 'DM Sans';letter-spacing:.8px}
.wf .wf-reward-cup{position:relative;width:112px;height:94px;background:none;border-radius:0;margin:0 0 15px;color:#234ee9;transform:rotate(var(--gift-rock))}
.wf .wf-reward-cup>svg{position:absolute;width:94px;height:94px;inset:0;overflow:visible}
@media (max-width:760px){.wf .wf-reward-cup{width:86px;height:76px;margin-bottom:10px}.wf .wf-reward-cup>svg{width:76px;height:76px}.wf .wf-reward-story p{margin:10px 0}}
.wf .wf-reward-unbox{height:102px;width:125px;position:relative;margin:4px auto 8px}
.wf .wf-reward-box{position:absolute;bottom:7px;left:31px;width:65px;height:44px;border-radius:3px 3px 7px 7px;background:#48735d}
.wf .wf-reward-box::after,.wf .wf-reward-lid::after{content:"";position:absolute;width:11px;background:#eac472;left:27px;top:0;bottom:0}
.wf .wf-reward-lid{position:absolute;bottom:48px;left:27px;width:73px;height:13px;border-radius:3px;background:#5a866a;z-index:3;transform-origin:15% 50%}
.wf .wf-reward-lid::after{left:31px}
.wf .wf-reward-spark{position:absolute;width:5px;height:9px;background:#d5b55b;opacity:0}
.wf .wf-s1{left:14px;top:31px;rotate:-25deg}
.wf .wf-s2{right:12px;top:27px;rotate:30deg;background:#7eaa88}
.wf .wf-s3{right:30px;top:10px;rotate:65deg}
.wf [data-phase="reward"] .wf-reward-lid,.wf [data-phase="reward"] .wf-reward-box{animation:none;transform:none}
.wf .wf-reward-bow{position:absolute;left:37.5px;top:23.5px;width:52px;height:30.3px;z-index:4;fill:#eac472;overflow:visible;transform-origin:50% 57%}
.wf .wf-reward-bow .wf-bow-in{fill:#d3a445}
.wf .wf-reward-bow .wf-bow-tail{fill:#cf9f42}
.wf .wf-reward-bow .wf-bow-knot{fill:#dfb252}
.wf .wf-reward-bow g{transform-box:view-box;transform-origin:30px 20px}
.wf [data-phase="reward"] .wf-reward-bow{animation:wf-bow-pop .6s .15s cubic-bezier(.3,1.6,.5,1) both}
.wf [data-phase="reward"] .wf-bow-l{animation:wf-bow-flap-l 2.4s .3s ease-in-out infinite}
.wf [data-phase="reward"] .wf-bow-r{animation:wf-bow-flap-r 2.4s .3s ease-in-out infinite}
@keyframes wf-bow-pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes wf-bow-flap-l{0%,45%,100%{transform:rotate(0)}12%{transform:rotate(-12deg)}26%{transform:rotate(5deg)}36%{transform:rotate(-2deg)}}
@keyframes wf-bow-flap-r{0%,45%,100%{transform:rotate(0)}12%{transform:rotate(12deg)}26%{transform:rotate(-5deg)}36%{transform:rotate(2deg)}}
.wf .wf-reward-spark{width:5px;height:9px;border-radius:1px;rotate:0deg}
.wf [data-phase="reward"] .wf-reward-spark{animation:wf-gift-confetti 2.4s .3s ease-out infinite both}
.wf .wf-reward-spark.wf-s1{left:auto;right:auto;left:12px;top:42px;--r:-25deg;--dx:-6px;--dy:-6px}
.wf [data-phase="reward"] .wf-s1{animation-delay:.3s}
.wf .wf-reward-spark.wf-s2{left:auto;right:auto;right:10px;top:36px;--r:30deg;--dx:6px;--dy:-7px;background:#7eaa88}
.wf [data-phase="reward"] .wf-s2{animation-delay:.45s}
.wf .wf-reward-spark.wf-s3{left:auto;right:auto;right:36px;top:16px;--r:65deg;--dx:3px;--dy:-9px}
.wf [data-phase="reward"] .wf-s3{animation-delay:.6s}
.wf .wf-reward-spark.wf-s4{left:auto;right:auto;left:24px;top:14px;--r:40deg;--dx:-5px;--dy:-9px;background:#e2876a}
.wf [data-phase="reward"] .wf-s4{animation-delay:.75s}
.wf .wf-reward-spark.wf-s5{left:auto;right:auto;left:6px;top:72px;--r:-60deg;--dx:-7px;--dy:-2px;background:#7eaa88}
.wf [data-phase="reward"] .wf-s5{animation-delay:.5s}
.wf .wf-reward-spark.wf-s6{left:auto;right:auto;right:4px;top:68px;--r:70deg;--dx:7px;--dy:-3px}
.wf [data-phase="reward"] .wf-s6{animation-delay:.85s}
.wf .wf-reward-spark.wf-s7{left:auto;right:auto;left:46px;top:2px;--r:-15deg;--dx:-2px;--dy:-9px;background:#7eaa88}
.wf [data-phase="reward"] .wf-s7{animation-delay:.95s}
.wf .wf-reward-spark.wf-s8{left:auto;right:auto;right:4px;top:10px;--r:20deg;--dx:6px;--dy:-8px;background:#e2876a}
.wf [data-phase="reward"] .wf-s8{animation-delay:1.1s}
@keyframes wf-gift-confetti{0%{opacity:0;transform:rotate(var(--r)) scale(.4)}20%{opacity:1;transform:rotate(var(--r)) scale(1)}55%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(calc(var(--r) + 40deg)) scale(.8)}}
@media (prefers-reduced-motion:reduce){.wf [data-phase="reward"] .wf-reward-bow,.wf [data-phase="reward"] .wf-reward-bow g{animation:none}.wf [data-phase="reward"] .wf-reward-spark{animation:none;opacity:.8;transform:rotate(var(--r))}}
.wf .wf-reward-cup{transform:none;width:125px;height:102px}
.wf .wf-reward-cup .wf-reward-unbox{margin:0}
.wf .wf-reward-cup .wf-reward-bow{width:52px;height:30.3px}
@media (max-width:760px){.wf .wf-reward-cup{height:76px}.wf .wf-reward-cup .wf-reward-unbox{transform:scale(.75);transform-origin:0 0}}
/* Same warm background as Bookings, menu and contacts. */
.wf{background:#f5f2eb}
/* Caption sits right under the scene; the box only reserves the lines it needs. */
.wf .wf-stage-caption{min-height:21px;margin-top:14px;line-height:1.5}
.wf.section{padding-bottom:40px}
@media (max-width:800px){.wf.section{padding-bottom:32px}}
@media (max-width:760px){.wf .wf-stage-caption{min-height:36px;margin-top:8px}}
/* Join step: the label sits over the poster, set in from its left edge by 2% of the column. */
.wf .wf-poster .wf-role{width:236px;margin-left:auto;margin-right:auto;padding-left:2%}
/* Chapter label: not styled like the small step number beside it. */
.wf .wf-chapters button .tab-label{display:inline-grid;margin:0;color:inherit;font-size:inherit}
/* Create step: the text block is centred on the card beside it (the card already sits where it later appears in the phone). */
@media (min-width:761px){.wf .wf-editor{top:134px}}
.wf .wf-scene::before{background:radial-gradient(ellipse,#fbfaf7 0%,#f8f6f1 45%,#f5f2eb00 72%)}
.wf button:disabled{opacity:1}
.wf .wf-poster-h{display:block}
/* The free cup stays visible but faded, then lights up when the card is complete. */
.wf .wf-cup.wf-gift-slot{color:var(--wf-blue)}
.wf .wf-cup.wf-gift-slot>svg{opacity:.38}
.wf .wf-cup.wf-gift-slot .wf-gift-label{opacity:.6;transition:opacity .6s ease}
.wf .wf-cup.wf-gift-slot.wf-unlocked>svg{opacity:1;animation:wf-gift-glow .7s ease-out}
.wf .wf-cup.wf-gift-slot.wf-unlocked .wf-gift-label{opacity:1}
@keyframes wf-gift-glow{0%{transform:scale(.85)}55%{transform:scale(1.18)}100%{transform:scale(1)}}
/* Camera scan: the frame locks on (yellow corners), then one line sweeps the QR before it is read (timed in how.js). */
.wf [data-locked=true] .wf-focus i{border-color:#e3ba39}
.wf .wf-focus .wf-cam-beam{position:absolute;left:4%;right:4%;top:4%;height:2px;border-radius:2px;background:var(--wf-blue);box-shadow:0 0 12px 2px #234ee966;opacity:0;transition:opacity .15s}