/* fynloy: loop player, stage tracks, flow chart, station-card scenes, animated icon tiles */

/* ================= the loop player: the brand symbol at page scale, stops around it, a station card inside ================= */
@property --n{syntax:'<integer>';inherits:false;initial-value:0}
.fy-loop{--size:min(640px,100%);--ring:#6757F5;position:relative;width:var(--size);aspect-ratio:560/494;margin-inline:auto;margin-bottom:calc(var(--size) * .2);display:block}
.fy-loop__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fy-loop__path{fill:none;stroke:var(--ring);stroke-width:10;stroke-linecap:round;opacity:.22}
.fy-loop__prog{fill:none;stroke:var(--ring);stroke-width:10;stroke-linecap:round;stroke-dasharray:var(--len) var(--len);stroke-dashoffset:calc(var(--len) * (1 - var(--stage,0) / max(1, var(--n) - 1)));transition:stroke-dashoffset 1.1s var(--fy-ease)}
.fy-band-navy .fy-loop__path{opacity:.3}
.fy-loop__arrow{fill:none;stroke:var(--ring);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.fy-loop__stop{cursor:pointer}
.fy-loop__stop circle{fill:#fff;stroke:var(--ring);stroke-width:4;transition:r .4s var(--fy-ease),fill .3s,stroke .3s}
.fy-loop__stop text{font:700 14px var(--fy-font-body);fill:var(--fy-navy);text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.fy-band-navy .fy-loop__stop text{fill:#fff}
.fy-loop__stop.is-done circle{fill:var(--ring);stroke:var(--ring)}
.fy-loop__stop.is-active circle{fill:#fff;stroke:var(--ring);stroke-width:7;r:15}
.fy-loop__stop[data-go].is-active.is-reward circle{fill:var(--fy-lime);stroke:var(--fy-lime)}
.fy-loop__stop.is-next circle{stroke-dasharray:4 5}
.fy-loop__token{transform-origin:220px 215px;transform:rotate(calc(var(--stage,0) * var(--step)));transition:transform 1.1s var(--fy-ease)}
.fy-loop__token circle{fill:var(--fy-lime);stroke:#fff;stroke-width:4;filter:drop-shadow(0 6px 10px rgba(24,43,58,.35))}
.fy-loop__card{position:absolute;left:50%;bottom:-20%;transform:translateX(-50%);z-index:2;width:42%;aspect-ratio:300/490;background:#fff;color:var(--fy-navy);border-radius:22px;box-shadow:var(--fy-shadow-lift);overflow:hidden;display:flex;flex-direction:column}
.fy-loop__bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font:700 13px/1 var(--fy-font-body);color:var(--fy-text-2);border-bottom:1.5px solid var(--fy-line)}
.fy-loop__bar b{color:var(--fy-navy);font:800 15px var(--fy-font-display);letter-spacing:-.02em}
.fy-loop__live{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--fy-font-body);color:var(--fy-text-2)}
.fy-loop__live i{width:8px;height:8px;border-radius:50%;background:var(--fy-violet);animation:fyk-live 1.6s ease-in-out infinite}
.fy-loop__screen{position:relative;flex:1;min-height:0}
.fy-loop__cap{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--fy-cloud);font:700 14px var(--fy-font-display);border-top:1.5px solid var(--fy-line);min-height:20px}
.fy-loop__cap .cap{display:none}.fy-loop[data-stage="0"] .cap[data-i="0"],.fy-loop[data-stage="1"] .cap[data-i="1"],.fy-loop[data-stage="2"] .cap[data-i="2"],.fy-loop[data-stage="3"] .cap[data-i="3"],.fy-loop[data-stage="4"] .cap[data-i="4"],.fy-loop[data-stage="5"] .cap[data-i="5"]{display:inline}
.fy-loop__cap small{margin-left:auto;font:500 12px var(--fy-font-body);color:var(--fy-text-2)}
.fy-stage__note{margin:14px 0 0;font:500 13px var(--fy-font-body);color:var(--fy-text-2);text-align:center}
.fy-band-navy .fy-stage__note{color:var(--fy-text-2-on-navy)}
.fy-scene{position:absolute;inset:0;padding:14px 16px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s ease,transform .6s var(--fy-ease),visibility 0s linear .45s;overflow:hidden}
.fy-scene.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.fy-loop:not(.is-live) .fy-scene *,html.fy-still .fy-scene *{animation:none!important}
@media (max-width:767px){.fy-loop{--size:min(440px,100%);margin-bottom:calc(var(--size) * .98)}.fy-loop__card{width:76%;bottom:-104%;aspect-ratio:300/440}.fy-loop__stop text{font-size:16px}}

/* stage list beside a loop (journey blocks) */
.fy-track{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fy-track__b{position:relative;width:100%;text-align:left;display:grid;grid-template-columns:36px minmax(0,1fr) 44px;align-items:center;gap:14px;background:transparent;border:0;border-radius:14px;padding:14px 14px;cursor:pointer;color:inherit;overflow:hidden;transition:background .3s var(--fy-ease)}
.fy-track__n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:2px solid rgba(255,255,255,.35);font:700 13px/1 var(--fy-font-body);color:inherit}
.fy-band-cloud .fy-track__n,.fy-band-white .fy-track__n{border-color:rgba(24,43,58,.2)}
.fy-track__t{font:700 18px/1.25 var(--fy-font-display);letter-spacing:-.01em}
.fy-track__d{display:none;font:400 14.5px/1.5 var(--fy-font-body);color:var(--fy-text-2-on-navy);margin-top:4px}
.fy-band-cloud .fy-track__d,.fy-band-white .fy-track__d{color:var(--fy-text-2)}
.fy-track__i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.08)}
.fy-band-cloud .fy-track__i,.fy-band-white .fy-track__i{background:var(--fy-violet-tint)}
.fy-track__i .fy-mini{width:28px;height:28px}
.fy-track__b:hover{background:rgba(255,255,255,.07)}
.fy-band-cloud .fy-track__b:hover,.fy-band-white .fy-track__b:hover{background:#fff}
.fy-track li.is-active .fy-track__b{background:#fff;color:var(--fy-navy);box-shadow:var(--fy-shadow)}
.fy-track li.is-active .fy-track__d{display:block;color:var(--fy-text-2)}
.fy-track li.is-active .fy-track__n{background:#fff;border-color:var(--fy-violet);border-width:3px;color:var(--fy-navy)}
.fy-track li.is-done .fy-track__n{background:var(--fy-violet);border-color:var(--fy-violet);color:#fff}
.fy-track li.is-active .fy-track__i{background:var(--fy-violet-tint)}
.fy-track__fill{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--fy-violet);border-radius:2px}
.fy-track li.is-active .fy-track__fill{animation:fyk-fill var(--dwell,4.8s) linear forwards}
@keyframes fyk-fill{to{width:100%}}
.fy-journey{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
@media (max-width:1024px){.fy-journey{grid-template-columns:minmax(0,1fr)}}

/* flow chart (steps rail) */
.fy-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:12px}
.fy-flow[data-c="4"]{--c:4}.fy-flow[data-c="2"]{--c:2}.fy-flow[data-c="1"]{--c:1}
.fy-flow__b{width:100%;text-align:left;background:#fff;border:0;border-radius:16px;padding:16px;box-shadow:var(--fy-shadow);display:flex;flex-direction:column;gap:8px;cursor:pointer;color:var(--fy-navy)}
.fy-flow__top{display:flex;align-items:center;justify-content:space-between}
.fy-flow__top b{font:700 13px var(--fy-font-body);color:var(--fy-text-2)}
.fy-flow__t{font:700 16px/1.3 var(--fy-font-display)}
.fy-flow__d{font:400 14px/1.45 var(--fy-font-body);color:var(--fy-text-2)}
.fy-flow li.is-active .fy-flow__b{box-shadow:var(--fy-shadow-lift);outline:2px solid var(--fy-violet)}
@media (max-width:767px){.fy-flow{grid-template-columns:minmax(0,1fr)}}

/* ================= scenes (the station card UI) ================= */
.sc{height:100%;display:flex;flex-direction:column;gap:10px;position:relative;font-size:13px}
.sc-k{margin:0;font:600 12px/1.3 var(--fy-font-body);color:var(--fy-text-2)}
.sc-card{border-radius:12px;display:flex;align-items:center;gap:10px;border:1.5px solid var(--fy-line);background:#fff;padding:11px 12px;font:600 14px var(--fy-font-body)}
.sc-card b{font:800 15px/1.15 var(--fy-font-display)}
.sc-card span{font-size:12.5px;color:var(--fy-muted);display:block}
.sc-pill{border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;align-self:flex-start;border:1.5px solid var(--fy-line);background:var(--fy-green);color:var(--fy-ink);padding:6px 11px;font:700 12.5px var(--fy-font-display)}
.sc-btn{border-radius:999px;margin-top:auto;background:var(--fy-green);color:var(--fy-ink);padding:15px;text-align:center;font:700 14.5px var(--fy-font-display);border:1.5px solid var(--fy-line)}
.fy-scene .ic{flex:none}
.fy-scene .fy-stamp{animation:none;transform:none}

/* shared keyframes */
@keyframes fyk-live{50%{transform:scale(.55);opacity:.55}}
@keyframes fyk-pop{from{opacity:0;transform:scale(.55)}60%{transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes fyk-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fyk-ring{from{transform:scale(.45);opacity:.9}to{transform:scale(1.5);opacity:0}}
@keyframes fyk-fillw{from{width:0}to{width:100%}}
@keyframes fyk-stamp{from{opacity:0;transform:scale(1.8) rotate(-16deg)}to{opacity:1;transform:rotate(-4deg)}}
@keyframes fyk-draw{from{stroke-dashoffset:140}to{stroke-dashoffset:0}}
@keyframes fyk-fall{from{transform:translateY(-30px) rotate(0);opacity:1}to{transform:translateY(330px) rotate(260deg);opacity:0}}
@keyframes fyk-tog{from{background:#fff}}
@keyframes fyk-knob{from{transform:none}}
@keyframes fyk-press{from{background:var(--fy-ink);color:#fff}40%{transform:scale(.96)}}
@keyframes fyk-fadeout{to{opacity:0}}

/* 1 buy */
.sc-pinwrap{position:relative;width:30px;height:30px;align-self:flex-start;margin-left:6px}
.sc-ripple{position:absolute;inset:-4px;border:2px solid var(--fy-green);border-radius:50%;opacity:0}
.is-active .sc-ripple{animation:fyk-ring 1.8s ease-out infinite}.is-active .sc-ripple.r2{animation-delay:.7s}
.sc-pack{flex:1;display:grid;place-items:center}
.sc-pack svg{width:132px;height:auto}
.pk-body{fill:#fff;stroke:var(--fy-ink);stroke-width:3}.pk-top{fill:var(--fy-lilac);stroke:var(--fy-ink);stroke-width:3}.pk-label{fill:#fff;stroke:var(--fy-ink);stroke-width:3}.pk-leaf{fill:none;stroke:var(--fy-violet);stroke-width:4;stroke-linecap:round}
.is-active .sc-pack svg{animation:fyk-pack 1s var(--fy-ease) both}
@keyframes fyk-pack{from{opacity:0;transform:translateY(-50px) rotate(-8deg)}55%{transform:translateY(6px) rotate(2deg)}to{opacity:1;transform:none}}
.is-active .sc-tagline{animation:fyk-rise .7s .9s var(--fy-ease) both}
.sc-tagline{justify-content:space-between;gap:8px}
.sc-tagline b{white-space:nowrap}

/* 2 scan */
.sc-view{border-radius:14px;position:relative;height:236px;border:1.5px solid var(--fy-line);background:#fff;display:grid;place-items:center;overflow:hidden}
.sc-view svg.fy-qr{width:128px;height:128px;border:0;padding:0;max-width:none}
.vf{position:absolute;width:30px;height:30px;border:4px solid var(--fy-green)}
.vf.tl{left:16px;top:16px;border-right:0;border-bottom:0}.vf.tr{right:16px;top:16px;border-left:0;border-bottom:0}.vf.bl{left:16px;bottom:16px;border-right:0;border-top:0}.vf.br{right:16px;bottom:16px;border-left:0;border-top:0}
.sc-beam{position:absolute;left:12%;right:12%;top:16%;height:4px;background:var(--fy-green);border:1px solid var(--fy-ink)}
.is-active .sc-beam{animation:fyk-beam 1.5s ease-in-out 2 both}
@keyframes fyk-beam{0%{top:16%}50%{top:78%}100%{top:16%}}
.is-active .vf{animation:fyk-vf .01s 3s both}
@keyframes fyk-vf{from{border-color:var(--fy-ink)}}
.sc-found{display:grid}.is-active .sc-found .sc-pill{animation:fyk-pop .5s 3s both}

/* 3 upload */
.sc-snap{position:relative;height:250px;border:1.5px solid var(--fy-line);background:var(--fy-lilac);overflow:hidden;display:grid;place-items:center}
.sc-receipt{width:124px;background:#fff;border:1.5px solid var(--fy-line);padding:12px 12px 10px;display:grid;gap:7px;font:800 13px var(--fy-font-display)}
.sc-receipt i{display:block;height:7px;background:rgba(24,43,58,.2)}.sc-receipt i.s{width:58%}
.sc-receipt u{text-decoration:none;font:600 11px var(--fy-font-body);text-align:right}
.is-active .sc-receipt{animation:fyk-slideup 1s var(--fy-ease) both}
@keyframes fyk-slideup{from{transform:translateY(190px) rotate(6deg)}to{transform:none}}
.sc-flash{position:absolute;inset:0;background:#fff;opacity:0}.is-active .sc-flash{animation:fyk-flash .5s 1.3s both}
@keyframes fyk-flash{0%{opacity:0}30%{opacity:.95}100%{opacity:0}}
.sc-prog{display:grid;gap:8px}
.sc-bar{display:block;height:12px;border:1.5px solid var(--fy-line);background:#fff}.sc-bar i{display:block;height:100%;width:100%;background:var(--fy-green)}
.is-active .sc-bar i{animation:fyk-fillw 1.5s 1.5s linear both}
.sc-state{position:relative;display:block;height:20px;font:700 13px var(--fy-font-display)}
.sc-state em{position:absolute;left:0;font-style:normal;display:inline-flex;align-items:center;gap:6px}
.sc-state .st1{opacity:0}.is-active .sc-state .st1{animation:fyk-st1 3.1s linear both}.is-active .sc-state .st2{animation:fyk-pop .4s 3.1s both}
@keyframes fyk-st1{0%,92%{opacity:1}100%{opacity:0}}

/* 4 code */
.sc-input{border-radius:12px;border:1.5px solid var(--fy-line);background:#fff;padding:15px 12px;font:600 17px/1 var(--fy-font-body);letter-spacing:0;min-height:52px;box-sizing:border-box;overflow:hidden}
.sc-typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:top}
.sc-typed{width:13.2ch}
.is-active .sc-typed{border-right:1.5px solid var(--fy-line);animation:fyk-type 2.2s steps(13) .35s both,fyk-caret .6s step-end infinite}
@keyframes fyk-type{from{width:0}}@keyframes fyk-caret{50%{border-color:transparent}}
.sc-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sc-keys i{border-radius:8px;display:block;height:36px;border:1.5px solid var(--fy-line);background:#fff}
.is-active .sc-keys i{border-radius:8px;animation:fyk-key .3s both}
.is-active .sc-keys i:nth-child(1){animation-delay:.5s}.is-active .sc-keys i:nth-child(2){animation-delay:.9s}.is-active .sc-keys i:nth-child(3){animation-delay:1.3s}.is-active .sc-keys i:nth-child(4){animation-delay:1.7s}.is-active .sc-keys i:nth-child(5){animation-delay:2.1s}.is-active .sc-keys i:nth-child(6){animation-delay:2.5s}
@keyframes fyk-key{40%{background:var(--fy-green)}100%{background:#fff}}
.is-active .sc-press{animation:fyk-press .45s 3.1s both}

/* 5 validate */
.sc-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sc-checks li{border-radius:12px;display:flex;align-items:center;gap:11px;border:1.5px solid var(--fy-line);background:#fff;padding:12px;font:700 14px var(--fy-font-display)}
.sc-checks .ck{width:24px;height:24px;border:1.5px solid var(--fy-line);background:var(--fy-green);display:grid;place-items:center;color:var(--fy-ink)}
.is-active .sc-checks .ck{animation:fyk-ck .3s both}.is-active .sc-checks li:nth-child(1) .ck{animation-delay:.6s}.is-active .sc-checks li:nth-child(2) .ck{animation-delay:1.3s}.is-active .sc-checks li:nth-child(3) .ck{animation-delay:2s}
@keyframes fyk-ck{from{background:#fff;color:transparent}}
.sc-stamp-wrap{margin-top:auto;display:grid;place-items:center;padding-bottom:30px}
.sc-stamp{font-size:19px!important;padding:.7em 1.2em!important}
.is-active .sc-stamp{animation:fyk-stamp .7s 2.8s var(--fy-ease) both}

/* 6 reward */
.sc-burst{position:relative;flex:1;display:grid;place-items:center}
.sc-burst>span{position:absolute;width:150px;height:150px;border:1.5px solid var(--fy-line);border-radius:50%;opacity:0}
.is-active .sc-burst>span{animation:fyk-ring 1.9s ease-out infinite}.is-active .sc-burst>span:nth-child(2){animation-delay:.6s}.is-active .sc-burst>span:nth-child(3){animation-delay:1.2s}
.sc-coin{position:relative;width:138px;height:138px;border-radius:50%;background:var(--fy-green);border:1.5px solid var(--fy-line);display:grid;place-content:center;justify-items:center;text-align:center;gap:0}
.sc-count{--n:250;counter-reset:cn var(--n);font:800 40px/1 var(--fy-font-display);letter-spacing:-.03em}.sc-count::before{content:counter(cn)}
.sc-coin small{font:600 11px var(--fy-font-body);letter-spacing:0;text-transform:none}
.is-active .sc-coin{animation:fyk-pop .7s var(--fy-ease) both}
.is-active .sc-count{animation:fyk-n 1.7s .5s ease-out both}@keyframes fyk-n{from{--n:0}}
.sc-credited{opacity:1}.is-active .sc-credited{animation:fyk-pop .5s 2.2s both}

/* 7 connect */
.sc-avatar{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--fy-line);background:var(--fy-green);display:grid;place-items:center;margin-top:2px}
.is-active .sc-avatar{animation:fyk-pop .5s .15s both}
.sc-form{display:grid;gap:10px}.sc-form i{border-radius:10px;display:block;position:relative;height:38px;border:1.5px solid var(--fy-line);background:#fff}
.sc-form i::after{content:"";position:absolute;left:10px;top:13px;height:8px;width:62%;background:rgba(24,43,58,.32)}
.is-active .sc-form i::after{animation:fyk-barw 1s var(--d,.5s) steps(10) both}.is-active .sc-form .f2{--d:1.6s}
@keyframes fyk-barw{from{width:0}}
.sc-opt{display:flex;align-items:center;gap:10px;font:600 13.5px var(--fy-font-body)}
.sw{flex:none;width:46px;height:26px;border:1.5px solid var(--fy-line);background:var(--fy-green);position:relative}.sw b{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--fy-ink);transform:translateX(20px)}
.is-active .sw{animation:fyk-tog .01s 3s both}.is-active .sw b{animation:fyk-knob .35s 3s var(--fy-ease) both}
.is-active .sc-connect .sc-press{animation:fyk-press .45s 3.7s both}

/* 8 re-engage */
.sc-note{display:flex;align-items:center;gap:11px;border:1.5px solid var(--fy-line);background:#fff;padding:12px}
.sc-note b{font:800 14.5px var(--fy-font-display);display:block}.sc-note span{font-size:12.5px;color:var(--fy-muted)}
.bell{width:38px;height:38px;border:1.5px solid var(--fy-line);background:var(--fy-green);display:grid;place-items:center;flex:none;transform-origin:50% 12%}
.is-active .sc-note{animation:fyk-note .8s var(--fy-ease) both}.is-active .bell{animation:fyk-shake .7s .8s both}
@keyframes fyk-note{from{transform:translateY(-110px);opacity:0}to{transform:none;opacity:1}}
@keyframes fyk-shake{20%{transform:rotate(18deg)}40%{transform:rotate(-16deg)}60%{transform:rotate(10deg)}80%{transform:rotate(-6deg)}}
.is-active .sc-tix2{animation:fyk-rise .8s 1.6s var(--fy-ease) both}

/* tickets (coupon + re-engage) */
.sc-tix{border-radius:14px;overflow:hidden;display:grid;grid-template-columns:1fr 62px;border:1.5px solid var(--fy-line);background:#fff;min-height:104px}
.tx-main{padding:12px;display:grid;gap:5px;border-right:1.5px dashed #C9D2E2;align-content:center}.tx-main b{font:800 17px var(--fy-font-display)}.tx-main span{font:500 13px var(--fy-font-body);color:var(--fy-muted)}
.tx-main .bar{display:block;height:16px;background:repeating-linear-gradient(90deg,var(--fy-ink) 0 2px,transparent 2px 5px)}
.tx-stub{display:grid;place-items:center;background:var(--fy-lilac)}
/* 9 coupon */
.is-active .sc-coupon .sc-tix{animation:fyk-rise .8s var(--fy-ease) both}.is-active .sc-coupon .sc-press{animation:fyk-press .45s 1.9s both}
.sc-redeemed{position:absolute!important;right:6px;top:92px;font-size:15px!important}.is-active .sc-redeemed{animation:fyk-stamp .7s 2.6s var(--fy-ease) both}

/* 10 sweepstakes */
.sc-drum{position:relative;width:156px;height:156px;margin:6px auto 0;border:1.5px solid var(--fy-line);border-radius:50%;background:#fff;overflow:hidden;flex:none}
.sc-drum .ball{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:1.5px solid var(--fy-line);border-radius:50%;background:var(--fy-lilac)}
.sc-drum .b1{background:var(--fy-green)}.sc-drum .b4{background:var(--fy-green)}
.is-active .sc-drum .ball{animation:fyk-orb 2.4s linear infinite}.is-active .b2{animation-delay:-.6s!important}.is-active .b3{animation-delay:-1.2s!important}.is-active .b4{animation-delay:-1.8s!important}
@keyframes fyk-orb{from{transform:rotate(0) translateX(44px) rotate(0)}to{transform:rotate(360deg) translateX(44px) rotate(-360deg)}}
.sc-entry{position:absolute;left:50%;top:44px;margin-left:-20px;width:40px;height:40px;display:grid;place-items:center;background:var(--fy-green);border:1.5px solid var(--fy-line);opacity:0}
.is-active .sc-entry{animation:fyk-into 1.3s .9s ease-in both}
@keyframes fyk-into{0%{opacity:1;transform:translateY(-70px) rotate(-14deg)}70%{opacity:1;transform:translateY(60px) scale(.8)}100%{opacity:0;transform:translateY(80px) scale(.5)}}
.sc-in{opacity:1}.is-active .sc-in{animation:fyk-pop .5s 2.4s both}
.cf{position:absolute;top:0;width:8px;height:13px;background:var(--fy-green);border:1.5px solid var(--fy-ink);opacity:0}
.cf.c1{left:14%}.cf.c2{left:34%;background:var(--fy-lilac)}.cf.c3{left:58%}.cf.c4{left:78%;background:var(--fy-lilac)}.cf.c5{left:90%}
.is-active .cf{animation:fyk-fall 1.7s ease-in both;animation-delay:2.3s}.is-active .cf.c2{animation-delay:2.5s}.is-active .cf.c3{animation-delay:2.4s}.is-active .cf.c4{animation-delay:2.7s}.is-active .cf.c5{animation-delay:2.6s}

/* 11 loyalty */
.sc-tier{padding-top:12px}
.tr-rail{position:relative;height:16px;border:1.5px solid var(--fy-line);background:#fff;margin:26px 12px 10px}
.tr-fill{position:absolute;inset:0 auto 0 0;width:100%;background:var(--fy-green)}.is-active .tr-fill{animation:fyk-fillw 2.2s .3s var(--fy-ease) both}
.tr-rail .m{position:absolute;top:-10px;width:28px;height:28px;margin-left:-14px;border:1.5px solid var(--fy-line);border-radius:50%;background:var(--fy-green)}
.m1{left:0}.m2{left:50%}.m3{left:100%}
.is-active .tr-rail .m{animation:fyk-tog .01s both}.is-active .m1{animation-delay:.3s}.is-active .m2{animation-delay:1.3s}.is-active .m3{animation-delay:2.4s}
.tr-labels{display:flex;justify-content:space-between;font:700 12.5px var(--fy-font-display);margin:0 -2px}
.sc-badge{margin-top:12px}.is-active .sc-badge{animation:fyk-pop .6s 2.5s both}
.sc-badge .ic{background:var(--fy-green);border:1.5px solid var(--fy-line);padding:6px;width:24px;height:24px;box-sizing:content-box}

/* 12 birthday */
.sc-cake{position:relative;display:grid;place-items:center;height:132px}
.flame{position:absolute;top:2px;left:50%;width:12px;height:18px;margin-left:-6px;background:var(--fy-green);border:1.5px solid var(--fy-line);border-radius:50% 50% 50% 50%/62% 62% 38% 38%;transform-origin:50% 100%}
.is-active .flame{animation:fyk-flame .35s ease-in-out infinite alternate}
@keyframes fyk-flame{from{transform:scale(1,1) rotate(-4deg)}to{transform:scale(.88,1.12) rotate(5deg)}}
.is-active .sc-cake .ic{animation:fyk-pop .6s .1s both}
.is-active .sc-gift{animation:fyk-rise .8s 1.1s var(--fy-ease) both}
.sc-birthday .cf{top:0}.is-active .sc-birthday .cf{animation-delay:1.5s}.is-active .sc-birthday .cf.c2{animation-delay:1.8s}.is-active .sc-birthday .cf.c3{animation-delay:1.65s}.is-active .sc-birthday .cf.c4{animation-delay:2s}

/* 13 share */
.sc-graph{position:relative;height:210px}
.sc-graph svg{position:absolute;inset:0;width:100%;height:100%}
.sc-graph .ln{fill:none;stroke:var(--fy-ink);stroke-width:2.4;stroke-dasharray:140;stroke-dashoffset:0}
.is-active .sc-graph .ln{animation:fyk-draw .7s var(--fy-ease) both}.is-active .l1{animation-delay:.5s!important}.is-active .l2{animation-delay:1.1s!important}.is-active .l3{animation-delay:1.7s!important}
.nd{position:absolute;display:grid;place-items:center;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--fy-line);border-radius:50%;background:#fff}
.nd.me{left:50%;top:50%;width:50px;height:50px;margin:-25px 0 0 -25px;background:var(--fy-green)}
.nd.f1{left:17%;top:21%}.nd.f2{left:85%;top:29%}.nd.f3{left:50%;top:89%}
.is-active .nd.me{animation:fyk-pop .5s .1s both}.is-active .nd.f1{animation:fyk-pop .5s 1s both}.is-active .nd.f2{animation:fyk-pop .5s 1.6s both}.is-active .nd.f3{animation:fyk-pop .5s 2.2s both}
.plus{position:absolute;display:grid;place-items:center;width:22px;height:22px;background:var(--fy-green);border:1.5px solid var(--fy-line);font:800 14px var(--fy-font-display)}
.plus.p1{left:25%;top:6%}.plus.p2{left:78%;top:11%}.plus.p3{left:58%;top:76%}
.is-active .plus.p1{animation:fyk-pop .4s 1.2s both}.is-active .plus.p2{animation:fyk-pop .4s 1.8s both}.is-active .plus.p3{animation:fyk-pop .4s 2.4s both}
.sc-joined{opacity:1}.is-active .sc-joined{animation:fyk-pop .5s 2.8s both}

/* 14 review */
.sc-stars{display:flex;gap:6px;justify-content:center;padding:10px 0 4px}
.sc-stars span{color:var(--fy-ink)}.sc-stars svg{fill:#fff}
.is-active .sc-stars span:nth-child(n) svg{animation:fyk-star .35s both}
.is-active .sc-stars span:nth-child(1) svg{animation-delay:.4s}.is-active .sc-stars span:nth-child(2) svg{animation-delay:.8s}.is-active .sc-stars span:nth-child(3) svg{animation-delay:1.2s}.is-active .sc-stars span:nth-child(4) svg{animation-delay:1.6s}.is-active .sc-stars span:nth-child(5) svg{animation-delay:2s}
@keyframes fyk-star{50%{transform:scale(1.35)}100%{fill:var(--fy-green);transform:none}}
.sc-text{border-radius:12px;display:grid;gap:8px;align-items:stretch;padding:14px}.sc-text i{display:block;height:9px;background:rgba(24,43,58,.2);width:0}
.is-active .sc-text i{animation:fyk-fillw .9s var(--d,2.4s) var(--fy-ease) both}.is-active .sc-text i.s{--d:3s;max-width:60%}.is-active .sc-text i.m{--d:3.4s;max-width:80%}
.sc-thanks{opacity:1}.is-active .sc-thanks{animation:fyk-pop .5s 3.8s both}

/* 15 launch */
.sc-launch .opt{gap:12px}.sc-launch .opt b{flex:1}
.tg{flex:none;position:relative;width:40px;height:22px;border:1.5px solid var(--fy-line);background:var(--fy-green)}.tg::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;background:var(--fy-ink);transform:translateX(18px)}
.is-active .opt{animation:fyk-rise .6s var(--fy-ease) both}.is-active .o2{animation-delay:.4s}.is-active .o3{animation-delay:.8s}
.is-active .o1 .tg{animation:fyk-tog .01s 1s both}.is-active .o2 .tg{animation:fyk-tog .01s 1.4s both}.is-active .o3 .tg{animation:fyk-tog .01s 1.8s both}
.is-active .o1 .tg::after{animation:fyk-knob .3s 1s both}.is-active .o2 .tg::after{animation:fyk-knob .3s 1.4s both}.is-active .o3 .tg::after{animation:fyk-knob .3s 1.8s both}
.is-active .sc-launch .sc-press{animation:fyk-press .45s 2.6s both}

/* 16 promote */
.sc-hub{position:relative;flex:1;display:grid;place-items:center}
.sc-hub .core{position:relative;z-index:2;width:90px;height:90px;border:1.5px solid var(--fy-line);background:#fff;display:grid;place-items:center}
.sc-hub .wave{position:absolute;width:96px;height:96px;border:1.5px solid var(--fy-line);border-radius:50%;opacity:0}
.is-active .sc-hub .wave{animation:fyk-ring 2.2s ease-out infinite}.is-active .sc-hub .w2{animation-delay:1.1s}
.sc-hub .chip{position:absolute;z-index:3;border:1.5px solid var(--fy-line);background:var(--fy-green);padding:6px 10px;font:700 12.5px var(--fy-font-display)}
.chip.c1{left:0;top:16%}.chip.c2{right:0;top:42%}.chip.c3{left:6%;bottom:12%}
.is-active .chip.c1{animation:fyk-pop .5s .7s both}.is-active .chip.c2{animation:fyk-pop .5s 1.3s both}.is-active .chip.c3{animation:fyk-pop .5s 1.9s both}

/* 17 retail */
.sc-map{border-radius:14px;position:relative;flex:1;border:1.5px solid var(--fy-line);background:#fff;background-image:linear-gradient(rgba(24,43,58,.14) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(24,43,58,.14) 1.5px,transparent 1.5px);background-size:34px 34px;overflow:hidden}
.pn{position:absolute;color:var(--fy-ink)}.pn svg{fill:var(--fy-green)}
.pn.p1{left:18%;top:20%}.pn.p2{left:60%;top:42%}.pn.p3{left:30%;top:64%}
.is-active .pn{animation:fyk-pin .7s var(--fy-ease) both}.is-active .p1{animation-delay:.4s}.is-active .p2{animation-delay:1s}.is-active .p3{animation-delay:1.6s}
@keyframes fyk-pin{from{opacity:0;transform:translateY(-90px)}60%{transform:translateY(6px)}to{opacity:1;transform:none}}
.is-active .sc-retail .sc-card{animation:fyk-rise .6s 2.1s var(--fy-ease) both}.sc-retail .sc-card b{flex:1}

/* 18 report */
.sc-bars{flex:1;display:flex;align-items:flex-end;gap:10px;border-bottom:1.5px solid var(--fy-line);padding:0 4px 0}
.sc-bars i{flex:1;height:var(--h);background:var(--fy-ink);transform-origin:bottom}.sc-bars i:last-child{background:var(--fy-green);border:1.5px solid var(--fy-line);box-sizing:border-box}
.is-active .sc-bars i{animation:fyk-grow .9s var(--fy-ease) both}.is-active .sc-bars i:nth-child(2){animation-delay:.15s}.is-active .sc-bars i:nth-child(3){animation-delay:.3s}.is-active .sc-bars i:nth-child(4){animation-delay:.45s}.is-active .sc-bars i:nth-child(5){animation-delay:.6s}
@keyframes fyk-grow{from{transform:scaleY(0)}}
.sc-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sc-stats div{border:1.5px solid var(--fy-line);background:#fff;padding:10px 12px}
.sc-stats b{display:block;font:800 26px/1 var(--fy-font-display);letter-spacing:-.02em}.sc-stats span{font:600 10.5px var(--fy-font-body);letter-spacing:0;text-transform:none;color:var(--fy-muted)}
.n1,.n2{counter-reset:cn var(--n)}.n1{--n:1284}.n2{--n:962}.n1::before,.n2::before{content:counter(cn)}
.is-active .n1,.is-active .n2{animation:fyk-n 1.8s .5s ease-out both}

.sc-generic{display:grid;place-items:center}.sc-big{animation:fyk-pop .8s both}


/* ---- scene fillers: the label vocabulary inside the phone ---- */
.sc-uid{border-radius:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;border:1.5px solid var(--fy-line);background:#fff;padding:9px 11px;font:600 12px var(--fy-font-body);letter-spacing:0}
.sc-uid b{font-weight:600}
.sc-scan .sc-stampwrap{display:grid;place-items:start}
.sc-scan .sc-stampwrap .fy-stamp{font-size:14px;padding:.5em .9em}
.is-active .sc-scan .sc-uid{animation:fyk-rise .6s 3.1s var(--fy-ease) both}
.is-active .sc-scan .sc-stampwrap .fy-stamp{animation:fyk-stamp .7s 3.5s var(--fy-ease) both}
.sc-fields{display:grid;gap:8px;margin-top:2px}
.sc-fields li{border-radius:10px;list-style:none;display:flex;align-items:center;gap:9px;border:1.5px solid var(--fy-line);background:#fff;padding:9px 11px;font:700 13.5px var(--fy-font-display)}
.sc-fields{margin:0;padding:0}.sc-fields .ck{width:20px;height:20px;border:1.5px solid var(--fy-line);background:var(--fy-green);display:grid;place-items:center;flex:none}
.is-active .sc-fields li{animation:fyk-rise .5s var(--d,3.2s) var(--fy-ease) both}.is-active .sc-fields li:nth-child(2){--d:3.5s}.is-active .sc-fields li:nth-child(3){--d:3.8s}
.sc-prof{border-radius:12px;display:grid;gap:7px;border:1.5px solid var(--fy-line);background:#fff;padding:11px 12px}
.sc-prof div{display:flex;justify-content:space-between;font:600 12.5px var(--fy-font-body)}.sc-prof b{font:800 13px var(--fy-font-display)}
.is-active .sc-connect .sc-prof{animation:fyk-rise .6s 3.3s var(--fy-ease) both}
.sc-streak{border-radius:12px;display:grid;gap:8px;border:1.5px solid var(--fy-line);background:#fff;padding:11px 12px;font:700 13.5px var(--fy-font-display)}
.sc-streak .rail{height:12px;border:1.5px solid var(--fy-line);background:#fff;position:relative}.sc-streak .rail i{position:absolute;inset:0 auto 0 0;width:66%;background:var(--fy-green)}
.is-active .sc-streak .rail i{animation:fyk-fillw1 1.4s 2.2s var(--fy-ease) both}.is-active .sc-streak{animation:fyk-rise .6s 2s var(--fy-ease) both}
@keyframes fyk-fillw1{from{width:0}}
.sc-stat{border-radius:12px;display:flex;justify-content:space-between;align-items:center;border:1.5px solid var(--fy-line);background:#fff;padding:11px 12px;font:700 14px var(--fy-font-display)}
.is-active .sc-promote .sc-stat{animation:fyk-rise .6s 2.4s var(--fy-ease) both}
.is-active .sc-birthday .sc-month{animation:fyk-rise .6s 1.7s var(--fy-ease) both}
.sc-month{border-radius:12px;display:grid;gap:8px;border:1.5px solid var(--fy-line);background:#fff;padding:11px 12px;font:700 13.5px var(--fy-font-display)}
.sc-month .rail{height:12px;border:1.5px solid var(--fy-line);background:#fff;position:relative}.sc-month .rail i{position:absolute;inset:0 auto 0 0;width:100%;background:var(--fy-green)}
.sc-earn{border-radius:12px;display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--fy-line);background:var(--fy-green);padding:11px 12px;font:800 15px var(--fy-font-display)}
.is-active .sc-buy .sc-earn{animation:fyk-rise .6s 1.5s var(--fy-ease) both}
.sc-note2{border-radius:12px;border:1.5px dashed #C9D2E2;padding:10px 12px;font:600 12.5px/1.4 var(--fy-font-body);background:#fff}
.is-active .sc-code .sc-note2{border-radius:12px;animation:fyk-rise .6s 3.3s var(--fy-ease) both}

.sc-buy .sc-uid{margin-top:0}.is-active .sc-buy .sc-uid{animation:fyk-rise .6s 1.9s var(--fy-ease) both}
.sc-launch .opt.o4{opacity:1}.is-active .o4{animation:fyk-rise .6s 1.2s var(--fy-ease) both}.is-active .o4 .tg{animation:fyk-tog .01s 2.1s both}.is-active .o4 .tg::after{animation:fyk-knob .3s 2.1s both}
.is-active .sc-launch .sc-press{animation:fyk-press .45s 3s both}
.is-active .sc-promote .sc-stat+.sc-stat{animation:fyk-rise .6s 2.8s var(--fy-ease) both}


/* ================= animated icon tiles (cards, measure tiles, menus) ================= */
.fy-mini--sm{width:56px;height:56px}.fy-mini--sm svg{width:42px;height:42px}
.fy-mini--md{width:72px;height:72px}.fy-mini--md svg{width:54px;height:54px}
.fy-mini--bag .bag{animation:fyk-hop 2.2s ease-in-out infinite}.fy-mini--bag .rc{fill:var(--fy-green)}
@keyframes fyk-hop{0%,100%{transform:none}35%{transform:translateY(-7px)}55%{transform:translateY(1px) scaleY(.95)}}
.fy-mini--store .pinm{animation:fyk-pin2 2.4s ease-in-out infinite}.fy-mini--store .rc.gr{fill:var(--fy-green)}.fy-mini--store .door{animation:fyk-door 2.4s ease-in-out infinite}
@keyframes fyk-pin2{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes fyk-door{0%,100%{fill:#fff}50%{fill:var(--fy-green)}}
.fy-mini--share .ln{stroke-dasharray:60;animation:fyk-ld 2.8s ease-in-out infinite}
.fy-mini--share .n1,.fy-mini--share .n2,.fy-mini--share .n3{animation:fyk-nd 2.8s ease-in-out infinite}.fy-mini--share .n2{animation-delay:.5s}.fy-mini--share .n3{animation-delay:1s}
@keyframes fyk-ld{0%{stroke-dashoffset:60}35%,100%{stroke-dashoffset:0}}@keyframes fyk-nd{0%,10%{fill:#fff;transform:scale(1)}25%{fill:var(--fy-green);transform:scale(1.2)}50%,100%{fill:#fff;transform:scale(1)}}
.fy-mini--star .st{animation:fyk-starfill 2.6s ease-in-out infinite}
@keyframes fyk-starfill{0%,12%{fill:#fff;transform:scale(1)}32%{fill:var(--fy-green);transform:scale(1.14)}55%,90%{fill:var(--fy-green);transform:none}100%{fill:#fff}}
.fy-mini--cake .flame{fill:var(--fy-green);stroke:var(--fy-ink);stroke-width:2;transform-origin:50% 100%;animation:fyk-flame2 .4s ease-in-out infinite alternate}
@keyframes fyk-flame2{from{transform:scale(1,1) rotate(-4deg)}to{transform:scale(.85,1.15) rotate(5deg)}}
.fy-mini--chart .b1,.fy-mini--chart .b2,.fy-mini--chart .b3{transform-origin:bottom;animation:fyk-bar 2.8s ease-in-out infinite}.fy-mini--chart .b2{animation-delay:.2s}.fy-mini--chart .b3{animation-delay:.4s;fill:var(--fy-green)}
@keyframes fyk-bar{0%{transform:scaleY(.15)}35%,80%{transform:none}100%{transform:scaleY(.15)}}
.fy-mini--user .tick{animation:fyk-tick 2.6s ease-in-out infinite}.fy-mini--user .rc{fill:#fff}
.fy-mini--sliders .k1{animation:fyk-k1 3.2s ease-in-out infinite}.fy-mini--sliders .k2{animation:fyk-k2 3.2s ease-in-out infinite}.fy-mini--sliders .k3{animation:fyk-k3 3.2s ease-in-out infinite}.fy-mini--sliders .k2{fill:var(--fy-green)}
@keyframes fyk-k1{0%,100%{transform:none}50%{transform:translateX(22px)}}@keyframes fyk-k2{0%,100%{transform:none}50%{transform:translateX(-22px)}}@keyframes fyk-k3{0%,100%{transform:none}50%{transform:translateX(18px)}}
.fy-mini--calendar .ckp,.fy-mini--shield .ckp{stroke:var(--fy-ink);stroke-width:4;stroke-dasharray:50;animation:fyk-ck2 2.8s ease-in-out infinite}
.fy-mini--shield .rc{animation:fyk-shieldfill 2.8s ease-in-out infinite}
@keyframes fyk-ck2{0%,18%{stroke-dashoffset:50}48%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:50}}@keyframes fyk-shieldfill{0%,25%{fill:#fff}50%,86%{fill:var(--fy-green)}100%{fill:#fff}}
.fy-mini--bell .ring{transform-origin:50% 14%;animation:fyk-ring2 2.6s ease-in-out infinite}.fy-mini--bell .rc{fill:var(--fy-green)}
@keyframes fyk-ring2{0%,50%,100%{transform:none}8%{transform:rotate(14deg)}18%{transform:rotate(-12deg)}28%{transform:rotate(8deg)}38%{transform:rotate(-5deg)}}
.fy-mini--target .rc2{fill:#fff}.fy-mini--target .gfill{fill:var(--fy-green);stroke:var(--fy-ink);transform-origin:center;animation:fyk-pulse 2s ease-in-out infinite}
@keyframes fyk-pulse{50%{transform:scale(1.7)}}
.fy-mini--spark .spin{transform-origin:center;animation:fyk-spin 7s linear infinite}.fy-mini--spark .rc{fill:var(--fy-green)}
.fy-mini--sm.is-card{margin-bottom:6px}

/* ================= FAQ: one box, native details, animated plus/minus ================= */
.fy-faq2{border:var(--fy-rule);background:var(--fy-paper);max-width:980px}
.fy-q+.fy-q{border-top:var(--fy-rule)}
.fy-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:22px 24px;font:700 clamp(18px,1.7vw,22px)/1.25 var(--fy-font-display);letter-spacing:-.01em;color:var(--fy-ink);background:var(--fy-paper);transition:background .25s var(--fy-ease),color .25s var(--fy-ease)}
.fy-q summary::-webkit-details-marker{display:none}.fy-q summary::marker{content:""}
.fy-q__i{flex:none;width:40px;height:40px;display:grid;place-items:center;border:2px solid currentColor;background:transparent;transition:background .25s var(--fy-ease),color .25s var(--fy-ease),border-color .25s}
.fy-q__i svg{width:20px;height:20px;overflow:visible}.fy-q__i .v{transform-box:fill-box;transform-origin:center;transition:transform .35s var(--fy-ease)}
.fy-q summary:hover{background:var(--fy-lilac)}
.fy-q summary:hover .fy-q__i{background:var(--fy-ink);color:#fff;border-color:var(--fy-ink)}
.fy-q[open] summary,.fy-q[open] summary:hover{background:var(--fy-ink);color:#fff}
.fy-q[open] .fy-q__i,.fy-q[open] summary:hover .fy-q__i{background:var(--fy-green);color:var(--fy-ink);border-color:var(--fy-green)}
.fy-q[open] .fy-q__i .v{transform:scaleY(0)}
.fy-q summary:focus-visible{outline:3px solid var(--fy-green);outline-offset:-5px}
.fy-q__in{padding:22px 24px 28px;max-width:74ch;font:400 17px/1.65 var(--fy-font-body);color:var(--fy-ink);background:var(--fy-paper)}
.fy-q__in p{margin:0 0 .9em}.fy-q__in p:last-child{margin:0}.fy-q__in ul,.fy-q__in ol{margin:0 0 .9em;padding-left:1.2em}.fy-q__in a{text-decoration:underline;text-decoration-color:var(--fy-green);text-decoration-thickness:2px}
.fy-q[open] .fy-q__in{animation:fyk-q .45s var(--fy-ease)}
@keyframes fyk-q{from{opacity:0;transform:translateY(-8px)}}
.fy-band-lilac .fy-q summary:hover{background:var(--fy-lilac)}

/* ================= journey rail (example campaigns) ================= */
.fy-rail{--rn:6;display:grid;gap:22px}
.fy-rail__track{position:relative;padding-top:30px}
.fy-rail__line{position:absolute;left:calc(100% / var(--rn) / 2);right:calc(100% / var(--rn) / 2);top:calc(30px + 28px);height:4px;background:var(--fy-ink)}
.fy-rail__nodes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--rn),minmax(0,1fr));position:relative}
.fy-rail__n button{background:none;border:0;padding:0;cursor:pointer;display:grid;justify-items:center;gap:8px;width:100%;color:var(--fy-ink);font:600 12px var(--fy-font-body);letter-spacing:0}
.fy-rail__n .fy-mini{background:#fff;transition:background .35s var(--fy-ease),transform .45s var(--fy-ease)}
.fy-rail__n.is-active .fy-mini{background:var(--fy-green);transform:translateY(-6px) scale(1.06)}.fy-rail__n.is-done .fy-mini{background:var(--fy-lilac)}
.fy-rail__token{position:absolute;top:0;left:calc(100% / var(--rn) * (var(--stage,0) + .5));transform:translateX(-50%);transition:left .9s var(--fy-ease);z-index:2}
.fy-rail__token i{display:block;background:var(--fy-ink);color:var(--fy-green);font:600 11px var(--fy-font-body);letter-spacing:.08em;padding:4px 8px;font-style:normal;position:relative}
.fy-rail__token i::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-5px;border:5px solid transparent;border-top:6px solid var(--fy-ink);border-bottom:0}
.fy-rail__caps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--rn),minmax(0,1fr));border:var(--fy-rule);background:var(--fy-paper)}
.fy-rail__c{padding:14px 13px 16px;font:500 14px/1.45 var(--fy-font-body);color:var(--fy-ink);transition:background .3s var(--fy-ease),color .3s var(--fy-ease)}
.fy-rail__c+.fy-rail__c{border-left:var(--fy-rule)}
.fy-rail__c.is-active{background:var(--fy-ink);color:#fff}
@media (max-width:1024px){.fy-rail__caps{grid-template-columns:repeat(2,minmax(0,1fr))}.fy-rail__c{border-left:0!important;border-top:var(--fy-rule)}.fy-rail__c:nth-child(-n+2){border-top:0}.fy-rail__c:nth-child(even){border-left:var(--fy-rule)!important}}
@media (max-width:767px){.fy-rail__track{display:none}.fy-rail__caps{grid-template-columns:minmax(0,1fr)}.fy-rail__c{border-left:0!important;border-top:var(--fy-rule)!important}.fy-rail__c:first-child{border-top:0!important}.fy-rail__c:nth-child(even){border-left:0!important}}
/* an active row keeps its own colours while hovered or focused (ink band: paper row, ink text) */
.fy-track--list .fy-track__b.is-active:hover,.fy-track--list .fy-track__b.is-active:focus-visible{background:var(--tk-act-bg);color:var(--tk-act-fg)}
.fy-track--list .fy-track__b.is-active:hover .fy-track__t,.fy-track--list .fy-track__b.is-active:hover .fy-track__d{color:var(--tk-act-fg)}
/* FAQ sections: heading, intro and box all sit on the page's centre line */
.fy-band--faq .fy-h,.fy-band--faq .fy-text,.fy-band--faq .fy-measure{text-align:center}
.fy-band--faq .fy-col{align-items:center}
.fy-band--faq .fy-text{max-width:62ch;margin-inline:auto}
.fy-band--faq .fy-faq2{margin-inline:auto;width:100%;max-width:880px}
.fy-band--faq .fy-html{width:100%}
.fy-band--faq .fy-measure{max-width:880px;margin-inline:auto}
/* journey list: icon tile at the row's end, quiet until the row is current */
.fy-track--list .fy-track__b{grid-template-columns:48px minmax(0,1fr) 44px;align-items:center}
.fy-track--list .fy-track__i{grid-column:3;grid-row:1/span 2;align-self:center;justify-self:end;opacity:.82;transition:opacity .3s,transform .35s var(--fy-ease)}
.fy-track--list .fy-track__b:hover .fy-track__i,.fy-track--list .fy-track__b.is-active .fy-track__i{opacity:1;transform:scale(1.06)}
.fy-track--list .fy-track__b.is-done .fy-track__i{opacity:.9}
.fy-track--list .fy-track__t,.fy-track--list .fy-track__d{grid-column:2}
.fy-journey .fy-btn,.fy-journey .fy-btn{margin-top:6px}
.fy-stage--panel+.fy-stage__note{margin-top:18px}
.fy-mini.fy-mini--xs{width:40px;height:40px}.fy-mini.fy-mini--xs svg{width:30px;height:30px}

/* icon micro-animations only run while on screen (hundreds of infinite loops on one page otherwise keep the main thread busy) */
.fy-mini:not(.is-live),.fy-mini:not(.is-live) *{animation-play-state:paused!important}

/* ---- icon tiles in the fynloy world: rounded tint squares, violet strokes, lime where a reward lands ---- */
.fy-mini{display:inline-grid;place-items:center;border-radius:16px;background:var(--fy-violet-tint);border:0;flex:none}
.fy-mini--xs{width:36px;height:36px;border-radius:10px}.fy-mini--xs svg{width:26px;height:26px}
.fy-mini--sm{width:56px;height:56px}.fy-mini--sm svg{width:40px;height:40px}
.fy-mini--md{width:72px;height:72px;border-radius:20px}.fy-mini--md svg{width:52px;height:52px}
.fy-mini svg{fill:none;stroke:#6757F5;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.fy-mini svg .rc{fill:#fff;stroke:#6757F5}
.fy-mini svg .gr,.fy-mini svg .gfill,.fy-mini svg .ckp,.fy-mini svg .flame,.fy-mini svg .pop rect,.fy-mini svg .tick circle,.fy-mini svg .beam{fill:#ECE9FE;stroke:#6757F5}
.fy-mini--points svg .pop rect,.fy-mini--gift svg .lid rect,.fy-mini--coupon svg .tk path,.fy-mini--ticket svg .drop path,.fy-mini--cake svg .flame{fill:#B8F36B;stroke:#182B3A}
.fy-band-navy .fy-mini,.fy-card--navy .fy-mini{background:rgba(255,255,255,.1)}
.fy-band-navy .fy-mini svg{stroke:#C4CFE0}.fy-band-navy .fy-mini svg .rc{fill:transparent;stroke:#C4CFE0}

/* chart tile: the bars show at rest; the grow loop only runs while live */
.fy-mini--chart svg .b1,.fy-mini--chart svg .b2,.fy-mini--chart svg .b3{transform:none;animation:none}
.fy-mini.is-live.fy-mini--chart svg .b1,.is-live .fy-mini--chart svg .b1{animation:fyk-bar 2.4s ease-in-out infinite}
@keyframes fyk-bar{50%{transform:scaleY(.8)}}
.fy-mini--chart svg .b1,.fy-mini--chart svg .b2,.fy-mini--chart svg .b3{transform-box:fill-box;transform-origin:bottom}

.sc-buy .sc-pill{background:var(--fy-violet-tint);color:var(--fy-violet-deep);border-color:transparent}

/* ---- sms: chat bubbles ---- */
.sc-chat{display:grid;gap:8px;align-content:start}
.sc-chat .bb{max-width:86%;border-radius:14px;padding:9px 12px;font:500 12.5px/1.4 var(--fy-font-body);opacity:0}
.sc-chat .me{justify-self:end;background:var(--fy-violet);color:#fff;border-bottom-right-radius:4px;font-weight:700}
.sc-chat .them{justify-self:start;background:#fff;border:1.5px solid var(--fy-line);color:var(--fy-ink);border-bottom-left-radius:4px}
.fy-still .sc-chat .bb,.is-active .sc-chat .bb{animation:fyk-rise .5s var(--fy-ease) both}
.is-active .sc-chat .bb:nth-child(2){animation-delay:.7s}.is-active .sc-chat .bb:nth-child(3){animation-delay:1.9s}.is-active .sc-chat .bb:nth-child(4){animation-delay:2.6s}
.sc-sms-ok{margin-top:auto;opacity:0}.is-active .sc-sms-ok{animation:fyk-pop .5s 3.4s both}.fy-still .sc-sms-ok{opacity:1}
/* ---- card: linked card ---- */
.sc-cc{border-radius:14px;background:var(--fy-grad-hero);color:#fff;padding:16px 14px;display:grid;gap:14px;min-height:96px;box-shadow:var(--fy-shadow)}
.sc-cc .cc-chip{display:block;width:34px;height:24px;border-radius:5px;background:var(--fy-lime)}
.sc-cc b{font:800 17px/1 var(--fy-font-display);letter-spacing:.06em}
.sc-cc span{font:600 11.5px var(--fy-font-body);color:var(--fy-text-2-on-navy)}
.is-active .sc-cc{animation:fyk-rise .7s var(--fy-ease) both}
.sc-cc-ok{opacity:0}.is-active .sc-cc-ok{animation:fyk-pop .5s 1s both}.fy-still .sc-cc-ok{opacity:1}
.sc-cc-shop{opacity:0}.is-active .sc-cc-shop{animation:fyk-rise .6s 1.8s var(--fy-ease) both}.fy-still .sc-cc-shop{opacity:1}
.sc-cc-earn{margin-top:auto;border-radius:12px;background:var(--fy-lime);color:var(--fy-ink);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;font:600 13px var(--fy-font-body);opacity:0}
.sc-cc-earn b{font:800 18px var(--fy-font-display)}
.is-active .sc-cc-earn{animation:fyk-rise .6s 2.8s var(--fy-ease) both}.fy-still .sc-cc-earn{opacity:1}
/* ---- payout: choose a payout ---- */
.sc-pay{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sc-pay li{border-radius:12px;border:1.5px solid var(--fy-line);background:#fff;padding:11px 12px;display:grid;gap:3px;opacity:0}
.sc-pay b{font:800 14px var(--fy-font-display)}.sc-pay span{font:500 11.5px var(--fy-font-body);color:var(--fy-muted)}
.sc-pay .is-pick{border-color:var(--fy-violet);box-shadow:0 0 0 2px var(--fy-violet-tint)}
.is-active .sc-pay li{animation:fyk-rise .5s var(--fy-ease) both}
.is-active .sc-pay .p2{animation-delay:.25s}.is-active .sc-pay .p3{animation-delay:.5s}.is-active .sc-pay .p4{animation-delay:.75s}
.fy-still .sc-pay li{opacity:1}
.sc-pay-ok{margin-top:auto;opacity:0}.is-active .sc-pay-ok{animation:fyk-pop .5s 2.2s both}.fy-still .sc-pay-ok{opacity:1}
@media (prefers-reduced-motion:reduce){.sc-chat .bb,.sc-sms-ok,.sc-cc-ok,.sc-cc-shop,.sc-cc-earn,.sc-pay li,.sc-pay-ok{opacity:1;animation:none!important}}