/* The offer is explained by motion: top-up -> commission, then six benefits. */
#offer .offer-main{position:relative;gap:42px;isolation:isolate;padding:30px 0 34px}
#offer .offer-main:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 9% 50%,#bd965511,transparent 56%);opacity:0;transition:opacity 1.4s}
#offer .offer-main.offer-entered:before{opacity:1}
#offer .offer-rate{position:relative;flex:0 0 180px;width:180px;height:180px;display:grid;place-items:center}
#offer .offer-rate-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:1}
#offer .offer-ring-outer{stroke:#c7a56d12}
#offer .offer-ring-track{stroke:#c7a56d20;stroke-width:2}
#offer .offer-ring-inner{stroke:#c7a56d09}
#offer .offer-ring-value{stroke:#e2c594;stroke-width:2;stroke-linecap:round;stroke-dasharray:45 100;transform:rotate(-90deg);transform-origin:50% 50%;filter:drop-shadow(0 0 3px #c4a46c25)}
#offer .offer-rate>strong{font-size:69px;font-weight:400;letter-spacing:-4px;color:#e8d0a5;line-height:1}
#offer .offer-rate>strong>span{font-size:.56em;letter-spacing:-2px;margin-left:3px}
#offer .offer-copy{max-width:690px;min-width:0}
#offer .offer-copy>p{margin:0;font-size:16px;line-height:1.9}
#offer .offer-payment-flow{display:flex;align-items:center;gap:15px;max-width:390px;margin-top:21px;font-size:11px;color:#a99f8e;letter-spacing:.15px}
#offer .offer-payment-line{position:relative;display:block;flex:1;min-width:20px;height:1px;background:#b7986030;overflow:hidden}
#offer .offer-payment-line:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#f0d9ad,transparent);transform:translateX(-100%);opacity:0}
#offer .offer-payment-reward{color:#dcc294;white-space:nowrap}
#offer .offer-entered .offer-ring-value{animation:offer-ring-fill 1.6s .12s cubic-bezier(.2,.65,.3,1) both}
#offer .offer-entered .offer-rate>strong{animation:offer-rate-glow 1.6s .24s ease-in-out both}
#offer .offer-entered .offer-payment-line:after{animation:offer-payment-send 1.3s .5s 2 ease-in-out both}
#offer .offer-entered .offer-payment-reward{animation:offer-payment-receive 1.3s 1s 2 ease-in-out both}
#offer .three .panel{position:relative;padding-top:28px;isolation:isolate;transition:border-color .7s,background .7s,transform .85s var(--motion-ease),opacity .85s;--benefit-delay:0ms}
#offer .three .panel:after{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,#e0c38b99,#b08d5330,transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--motion-ease);transition-delay:var(--benefit-delay)}
#offer .three .panel.offer-ready:not(.offer-entered){opacity:.7;transform:translateY(10px)}
#offer .three .panel.offer-entered{opacity:1;transform:none}
#offer .three .panel.offer-entered:after{transform:scaleX(1)}
#offer .three .panel:before{height:34px;margin-bottom:14px;padding-top:6px}
#offer .benefit-motion{position:absolute;top:17px;right:3px;width:44px;height:44px;display:block;color:#cfb384}
#offer .benefit-motion:before{content:'';position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(ellipse,#d4ac6920,transparent 72%);opacity:0;transition:opacity 1s}
#offer .benefit-motion svg{position:relative;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
#offer .offer-entered .benefit-motion:before{animation:benefit-light 2.6s var(--benefit-delay) ease-in-out both}
#offer .offer-entered .benefit-wave{animation:benefit-wave 1.4s 2 ease-out both}
#offer .offer-entered .wave-two{animation-delay:.35s}
#offer .offer-entered .coin-back{animation:benefit-coin-arrive 1.2s .1s cubic-bezier(.2,.6,.2,1) both}
#offer .offer-entered .coin-front{animation:benefit-coin-arrive 1.2s .4s cubic-bezier(.2,.6,.2,1) both;fill:#171819}
#offer .offer-entered .benefit-symbol{animation:benefit-symbol 1s .8s both}
#offer .benefit-loop{transform-origin:24px 24px}
#offer .offer-entered .benefit-loop{animation:benefit-cycle 2.3s .2s cubic-bezier(.3,.1,.2,1) both}
#offer .benefit-calendar-tick{stroke-dasharray:26;stroke-dashoffset:0}
#offer .offer-entered .benefit-calendar-tick{animation:benefit-check 1.3s .45s ease both}
#offer .benefit-spark{transform-origin:19px 27px}
#offer .offer-entered .benefit-spark{animation:benefit-sparkle 2.2s .2s ease both}
#offer .benefit-lock{transform-origin:18px 22px}
#offer .offer-entered .benefit-lock{animation:benefit-unlock 1.7s .2s ease both}
#offer .benefit-star{transform-origin:37px 12px}
#offer .offer-entered .benefit-star{animation:benefit-sparkle 2.2s .6s ease both}
#offer .exclusive.offer-entered{background:radial-gradient(ellipse at 100% 0,#b8905110,transparent 70%)}
@keyframes offer-ring-fill{from{stroke-dasharray:0 100}to{stroke-dasharray:45 100}}
@keyframes offer-rate-glow{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 26px #e6bf6e26}}
@keyframes offer-payment-send{0%{opacity:0;transform:translateX(-100%)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
@keyframes offer-payment-receive{0%,100%{color:#dcc294;text-shadow:none}45%{color:#f7e6c6;text-shadow:0 0 12px #dab77b33}}
@keyframes benefit-light{0%,100%{opacity:0}45%{opacity:1}}
@keyframes benefit-wave{0%{opacity:.15;transform:translateX(-2px)}50%{opacity:1}100%{opacity:.55;transform:translateX(1px)}}
@keyframes benefit-coin-arrive{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes benefit-symbol{from{opacity:0}to{opacity:1}}
@keyframes benefit-cycle{from{transform:rotate(-150deg);opacity:.3}to{transform:rotate(0);opacity:1}}
@keyframes benefit-check{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
@keyframes benefit-sparkle{0%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes benefit-unlock{from{transform:rotate(9deg);opacity:.3}to{transform:rotate(0);opacity:1}}
@media(hover:hover) and (pointer:fine){#offer .three .panel:hover{border-color:#c8a67565;background-color:#c8a67504}#offer .three .panel:hover .benefit-motion{color:#edcf9c}}
@media(max-width:760px){#offer .offer-main{gap:19px;align-items:center;padding:24px 0;flex-direction:row}#offer .offer-rate{width:105px;height:105px;flex-basis:105px}#offer .offer-rate>strong{font-size:42px;letter-spacing:-2px}#offer .offer-copy>p{font-size:12px;line-height:1.8}#offer .offer-payment-flow{gap:7px;font-size:8px;margin-top:13px;flex-wrap:wrap}#offer .offer-payment-line{min-width:14px}#offer .three .panel{padding-top:21px}#offer .benefit-motion{width:35px;height:35px;top:14px;right:0}#offer .three .panel:before{height:29px;margin-bottom:13px}#offer .three h3{font-size:16px}#offer .three .panel.offer-ready:not(.offer-entered){transform:translateY(6px)}}
@media(max-width:390px){#offer .offer-main{gap:14px}#offer .offer-rate{width:88px;height:88px;flex-basis:88px}#offer .offer-rate>strong{font-size:35px}#offer .offer-payment-flow{font-size:7px;gap:5px}#offer .offer-copy>p{font-size:11px}}
@media(prefers-reduced-motion:reduce){#offer *,#offer *:before,#offer *:after{animation:none!important;transition:none!important}#offer .panel.offer-ready{opacity:1!important;transform:none!important}#offer .offer-ring-value{stroke-dasharray:45 100}#offer .offer-payment-line:after{display:none}}

/* Living benefit scenes. The original copy stays still and readable. */
#offer .benefit-motion-toggle{display:block;margin:0 0 18px auto;padding:8px 0 8px 14px;border:0;background:transparent;color:#aa9e88;font:inherit;font-size:11px;cursor:pointer;min-height:36px}
#offer .benefit-motion-toggle:hover{color:#efdab3}
#offer .benefit-motion-toggle:focus-visible{outline:1px solid #d9ba83;outline-offset:5px;border-radius:3px}
#offer .benefit-motion-toggle[hidden]{display:none}
#offer .three .panel:before{height:53px;margin-bottom:19px}
#offer .benefit-motion{width:86px;height:70px;right:4px;top:14px}
#offer .benefit-motion svg{width:62px;height:62px;margin-left:12px;stroke-width:1.25}
#offer .benefit-motion:before{inset:-9px -5px;background:radial-gradient(ellipse,#d4ac6938,transparent 70%)}
#offer .benefit-motion:after{content:'';position:absolute;inset:5px 12px;border:1px solid #d5b47438;border-radius:50%;opacity:0;pointer-events:none}
#offer .benefit-credit{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);font-size:12px;line-height:1.2;letter-spacing:.8px;color:#f1d3a0;opacity:0}
#offer .benefit-play{fill:#d9bc81;stroke:none;transform-origin:24px 24px}
#offer .benefit-calendar-page{fill:#e1c38a0d;stroke:#d6b67a55;transform-origin:24px 24px}
@media(prefers-reduced-motion:no-preference){
 #offer .panel.benefit-live .benefit-motion:before{animation:benefit-live-halo var(--motion-scene) var(--live-offset) infinite ease-in-out}
 #offer .panel.benefit-live .benefit-motion:after{animation:benefit-live-ripple var(--motion-scene) var(--live-offset) infinite ease-out}
 #offer .panel.benefit-live .benefit-motion-1 svg{transform-origin:18px 26px;animation:benefit-live-megaphone var(--motion-scene) var(--live-offset) infinite ease-in-out}
 #offer .panel.benefit-live .benefit-wave{animation:benefit-live-broadcast 1.8s var(--live-offset) infinite ease-out}
 #offer .panel.benefit-live .wave-two{animation-delay:calc(var(--live-offset) + .4s)}
 #offer .panel.benefit-live .coin-back{animation:benefit-live-coin-back var(--motion-scene) var(--live-offset) infinite var(--motion-ease)}
 #offer .panel.benefit-live .coin-front{fill:#171819;animation:benefit-live-coin-front var(--motion-scene) var(--live-offset) infinite var(--motion-ease)}
 #offer .panel.benefit-live .benefit-symbol{transform-origin:28px 28px;animation:benefit-live-plus var(--motion-scene) var(--live-offset) infinite ease-in-out}
 #offer .panel.benefit-live .benefit-credit{animation:benefit-live-credit var(--motion-scene) var(--live-offset) infinite ease-out}
 #offer .panel.benefit-live .benefit-loop{animation:benefit-live-repeat var(--motion-scene) var(--live-offset) infinite cubic-bezier(.45,0,.2,1)}
 #offer .panel.benefit-live .benefit-play{animation:benefit-live-play var(--motion-scene) var(--live-offset) infinite ease-in-out}
 #offer .panel.benefit-live .benefit-calendar-page{animation:benefit-live-page var(--motion-scene) var(--live-offset) infinite ease-in-out}
 #offer .panel.benefit-live .benefit-calendar-tick{animation:benefit-live-check var(--motion-scene) var(--live-offset) infinite ease-in-out}
 #offer .panel.benefit-live .benefit-motion-5 svg{transform-origin:center;animation:benefit-live-ticket var(--motion-scene) var(--live-offset) infinite ease-in-out}
 #offer .panel.benefit-live .benefit-spark{animation:benefit-live-spark var(--motion-scene) var(--live-offset) infinite ease-in-out}
 #offer .panel.benefit-live .benefit-lock{animation:benefit-live-unlock var(--motion-scene) var(--live-offset) infinite cubic-bezier(.45,0,.2,1)}
 #offer .panel.benefit-live .benefit-star{animation:benefit-live-star var(--motion-scene) var(--live-offset) infinite ease-in-out}
 #offer .panel.benefit-live:not(.benefit-running) .benefit-motion *,
 #offer .panel.benefit-live:not(.benefit-running) .benefit-motion:before,
 #offer .panel.benefit-live:not(.benefit-running) .benefit-motion:after{animation-play-state:paused}
}
@keyframes benefit-live-halo{0%,85%,100%{opacity:.15;transform:scale(.85)}35%,50%{opacity:.9;transform:scale(1.12)}}
@keyframes benefit-live-ripple{0%,12%{opacity:0;transform:scale(.6)}18%{opacity:.65}55%,100%{opacity:0;transform:scale(1.45)}}
@keyframes benefit-live-megaphone{0%,65%,100%{transform:rotate(0)}18%,40%{transform:rotate(-9deg) translateY(-2px)}28%{transform:rotate(-4deg) translateY(-1px)}}
@keyframes benefit-live-broadcast{0%{opacity:0;transform:translateX(-3px)}35%{opacity:1}100%{opacity:0;transform:translateX(6px)}}
@keyframes benefit-live-coin-back{0%,6%{opacity:0;transform:translateY(-16px)}20%{opacity:1;transform:translateY(2px)}28%,80%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(5px)}}
@keyframes benefit-live-coin-front{0%,16%{opacity:0;transform:translateY(-18px)}32%{opacity:1;transform:translateY(2px)}40%,82%{opacity:1;transform:translateY(0)}96%,100%{opacity:0;transform:translateY(5px)}}
@keyframes benefit-live-plus{0%,27%,96%,100%{opacity:0;transform:scale(.6)}40%{opacity:1;transform:scale(1.2)}50%,82%{opacity:1;transform:scale(1)}}
@keyframes benefit-live-credit{0%,35%{opacity:0;transform:translate(-50%,7px)}48%,62%{opacity:1;transform:translate(-50%,0)}82%,100%{opacity:0;transform:translate(-50%,-16px)}}
@keyframes benefit-live-repeat{0%,12%{transform:rotate(0)}60%,100%{transform:rotate(360deg)}}
@keyframes benefit-live-play{0%,12%,75%,100%{opacity:.6;transform:scale(.8)}34%,50%{opacity:1;transform:scale(1.15)}}
@keyframes benefit-live-page{0%,8%{opacity:.25;transform:scaleY(1)}26%{opacity:.2;transform:scaleY(.05)}42%,85%{opacity:.9;transform:scaleY(1)}100%{opacity:.25;transform:scaleY(1)}}
@keyframes benefit-live-check{0%,30%{stroke-dashoffset:26;opacity:0}35%{opacity:1}55%,80%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes benefit-live-ticket{0%,80%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-9deg) translateY(-4px)}45%{transform:rotate(6deg) translateY(-3px)}60%{transform:rotate(-2deg) translateY(-1px)}}
@keyframes benefit-live-spark{0%,90%,100%{opacity:.6;transform:scale(.8) rotate(0)}35%{opacity:1;transform:scale(1.3) rotate(90deg)}60%{opacity:1;transform:scale(1) rotate(180deg)}}
@keyframes benefit-live-unlock{0%,12%,90%,100%{transform:translate(3px,4px) rotate(0)}36%,65%{transform:translate(0,-3px) rotate(-20deg)}}
@keyframes benefit-live-star{0%,20%,88%,100%{opacity:0;transform:scale(.4) rotate(-30deg)}42%{opacity:1;transform:scale(1.3) rotate(15deg)}62%{opacity:1;transform:scale(1) rotate(0)}}
@media(max-width:760px){#offer .benefit-motion{width:68px;height:62px;right:0;top:12px}#offer .benefit-motion svg{width:52px;height:52px;margin-left:8px}#offer .three .panel:before{height:49px;margin-bottom:15px}#offer .benefit-credit{font-size:10px;bottom:-1px}}
@media(prefers-reduced-motion:reduce){#offer .benefit-credit{display:none}#offer .benefit-calendar-page{opacity:.4}}