.sw-page--savings { position:absolute; top:0; left:0; opacity:0; visibility:hidden; font-variant-numeric:tabular-nums; }
.sw-page--savings .sw-title { margin:1cqw 0 1.7cqw; }
.sg-card { padding:2.2cqw; border:1px solid #e7e0d3; border-radius:2.8cqw; background:#fffef9; box-shadow:0 1.2cqw 3cqw -1cqw #2443311c; }
.sg-heading { display:flex; align-items:center; justify-content:space-between; gap:1cqw; line-height:1.3; }
.sg-heading>strong { font-size:2.5cqw; font-weight:550; letter-spacing:-.02em; }.sg-heading>span { display:grid; place-items:center; width:4cqw; height:4cqw; border-radius:1.2cqw; background:#edf2e7; color:#17513f; }.sg-heading svg { width:2.7cqw; height:2.7cqw; fill:none; stroke:currentColor; stroke-width:1.6; }
.sg-label { display:block; margin:2.2cqw 0 .8cqw; font-size:1.6cqw; color:#777367; line-height:1.4; }
.sg-amount { display:block; font-size:4.2cqw; line-height:1.15; font-weight:550; letter-spacing:-.045em; }
.sg-progress-label { display:flex; align-items:center; justify-content:space-between; gap:1cqw; margin:2.5cqw 0 1.2cqw; font-size:1.65cqw; line-height:1.4; color:#777367; }.sg-progress-label>strong { color:#283b2d; font-weight:550; }
.sg-track { height:1.8cqw; border-radius:2cqw; background:#eee8dc; overflow:hidden; }
.sg-track>span { display:block; position:relative; height:100%; overflow:hidden; border-radius:inherit; background:linear-gradient(100deg,#17513f,#62a58a); }
.sg-water { position:absolute; inset:-.4cqw -25% 0; width:150%; height:3.3cqw; fill:#fff; opacity:.19; }
.sg-feedback { position:relative; display:flex; align-items:center; min-height:9.5cqw; margin-top:1.5cqw; }
.sg-hint { margin:0; color:#53775d; font-size:1.75cqw; line-height:1.5; max-width:30cqw; }
.sg-source { display:flex; align-items:center; gap:1.1cqw; margin-top:1.5cqw; padding:1.4cqw 1.2cqw; border-radius:1.8cqw; background:#f2f3ea; }
.sg-source__icon { display:grid; place-items:center; width:3.7cqw; height:3.7cqw; color:#49745b; }.sg-source__icon svg { width:2.7cqw; height:2.7cqw; fill:none; stroke:currentColor; stroke-width:1.6; }
.sg-source>span:nth-child(2) { display:grid; gap:.3cqw; }.sg-source b { font-size:1.7cqw; line-height:1.3; font-weight:550; }.sg-source small { font-size:1.3cqw; line-height:1.4; color:#777367; }.sg-source>strong { margin-left:auto; font-size:1.75cqw; font-weight:500; white-space:nowrap; }
.sg-note { margin:1.4cqw 0 0; font-size:1.4cqw; line-height:1.5; color:#777367; }
.sg-deposit { position:absolute; top:24%; right:-12%; z-index:5; display:flex; align-items:center; gap:1cqw; padding:1.5cqw 1.8cqw; border:1px solid #d5e5d2; border-radius:2cqw; background:#f2f8ec; box-shadow:0 1cqw 3cqw -1cqw #1b3c2b33; color:#3c6549; font-size:1.75cqw; line-height:1.4; opacity:0; }
.sg-deposit svg { width:2.6cqw; height:2.6cqw; fill:none; stroke:currentColor; stroke-width:1.8; }
.sg-new-goal { position:absolute; z-index:8; left:7%; right:7%; bottom:14%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px 10px; border:1px solid #17513f; border-radius:12px; background:#17513f; color:#fffdf5; font:550 12px/1.3 'DM Sans',sans-serif; letter-spacing:-.01em; pointer-events:auto; cursor:pointer; box-shadow:0 5px 12px #153b2b15; animation:sg-cta-in 180ms ease both; }
.sg-new-goal[hidden] { display:none; }.sg-new-goal svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }.sg-new-goal:hover { background:#123d31; }.sg-new-goal:focus-visible { outline:2px solid #7da78b; outline-offset:3px; }
@container(max-width:450px) {
 .sg-card { padding:2.7cqw; border-radius:3cqw; }.sg-heading>strong { font-size:max(3.2cqw,12px); }.sg-heading>span { width:5.2cqw; height:5.2cqw; }.sg-heading svg { width:3.5cqw; height:3.5cqw; }.sg-label { margin-top:2.6cqw; font-size:max(2.1cqw,8px); }.sg-amount { font-size:max(5.4cqw,20px); }
 .sg-progress-label { font-size:max(2.1cqw,8px); margin:3cqw 0 1.5cqw; }.sg-track { height:2.3cqw; }.sg-water { height:4.3cqw; }.sg-feedback { min-height:14cqw; }.sg-hint { max-width:none; font-size:max(2.3cqw,9px); }
 .sg-source { padding:1.8cqw 1.4cqw; gap:1.5cqw; }.sg-source__icon { width:4.8cqw; height:4.8cqw; }.sg-source__icon svg { width:3.5cqw; height:3.5cqw; }.sg-source b { font-size:max(2.3cqw,9px); }.sg-source small { font-size:max(1.7cqw,7px); }.sg-source>strong { font-size:max(2.2cqw,9px); }.sg-note { font-size:max(1.9cqw,7px); }
 .sg-deposit { right:-7%; font-size:max(2.2cqw,9px); padding:2cqw; border-radius:2.6cqw; }.sg-deposit svg { width:3.2cqw; height:3.2cqw; }.sg-new-goal { font-size:11px; border-radius:10px; }
}
@container(max-width:320px) {
 .sg-card { padding:2.2cqw; }.sg-label { display:none; }.sg-amount { margin-top:1.2cqw; }.sg-progress-label { margin:2cqw 0 1cqw; }.sg-feedback { min-height:13cqw; }.sg-source { margin-top:1cqw; padding-block:1.3cqw; }.sg-note { margin-top:1cqw; }.sg-new-goal { bottom:14.5%; font-size:10px; }
}
.wallet-showcase[data-sw-motion="ready"] :is(.sw-page--savings,.sg-water,.sg-deposit,.sw-caption__saving,.sw-caption__success) { animation-duration:var(--sw-cycle); animation-iteration-count:infinite; animation-timing-function:cubic-bezier(.4,0,.2,1); animation-fill-mode:both; animation-play-state:var(--sw-play-state); }
.wallet-showcase[data-sw-motion="ready"] .sw-page--savings { animation-name:sg-page; }
.wallet-showcase[data-sw-motion="ready"] .sg-water { animation-name:sg-water; }.wallet-showcase[data-sw-motion="ready"] .sg-deposit { animation-name:sg-deposit; }
.wallet-showcase[data-sw-motion="ready"] .sw-caption__saving { animation-name:sg-caption-saving; }.wallet-showcase[data-sw-motion="ready"] .sw-caption__success { animation-name:sg-caption-success; }
@keyframes sg-page { 0%,53%,100% { opacity:0; visibility:hidden; transform:translate3d(14cqw,2cqw,0) rotate(6deg) scale(.95); } 56%,93% { opacity:1; visibility:visible; transform:translate3d(0,0,0) rotate(0deg) scale(1); } 97%,99% { opacity:0; visibility:hidden; transform:translate3d(-14cqw,-2cqw,0) rotate(-6deg) scale(.95); } }
@keyframes sg-deposit { 0%,59%,67%,74.5%,100% { opacity:0; transform:translateY(1cqw) scale(.97); } 60%,65%,68%,73% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes sg-water { 0%,59%,67%,75%,100% { transform:translateX(-8%) translateY(1px); } 61%,63%,65%,69%,71%,73% { transform:translateX(8%) translateY(-2px); } 60%,62%,64%,66%,68%,70%,72%,74% { transform:translateX(-8%) translateY(1px); } }
@keyframes sg-caption-saving { 0%,54%,76%,100% { opacity:0; } 57%,73% { opacity:1; } }
@keyframes sg-caption-success { 0%,74%,97%,100% { opacity:0; } 77%,94% { opacity:1; } }
@keyframes sg-cta-in { from { opacity:0; translate:0 5px; } to { opacity:1; translate:0 0; } }

/* A floating confirmation belongs to the showcase, outside the app card. */
.sg-celebration { position:absolute; z-index:9; left:-13%; right:-13%; bottom:28%; pointer-events:none; user-select:none; opacity:0; visibility:hidden; transform-origin:50% 90%; }
.sg-notice { position:relative; display:flex; align-items:center; gap:1.6cqw; padding:2.1cqw 2.4cqw; border:1px solid #c6dfcb; border-radius:2.8cqw; color:#153d2e; background:linear-gradient(115deg,#fffef9,#f2f8ed); box-shadow:0 2cqw 5cqw -1cqw #173e2d3b,0 .3cqw .7cqw #173e2d0b; }
.sg-notice__check { flex:none; display:grid; place-items:center; width:6.2cqw; height:6.2cqw; border-radius:50%; color:#f7fff4; background:#21694f; box-shadow:0 0 0 .8cqw #dcecd8; }
.sg-notice__check svg { width:3.5cqw; height:3.5cqw; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24; }
.sg-notice__copy { display:grid; gap:.45cqw; min-width:0; }
.sg-notice__copy>small { font-size:1.65cqw; line-height:1.3; color:#68806c; }
.sg-notice__copy>strong { font-size:2.7cqw; font-weight:600; line-height:1.2; letter-spacing:-.035em; text-wrap:balance; }
.sg-notice__copy>span { color:#5b7360; font-size:1.85cqw; line-height:1.4; }
.sg-popper { position:absolute; width:5.2cqw; height:5.2cqw; bottom:-1.3cqw; opacity:0; }
.sg-popper svg { display:block; width:100%; height:100%; }.sg-popper--left { left:-1.5cqw; }.sg-popper--right { right:-1.5cqw; scale:-1 1; }
.sg-confetti { position:absolute; bottom:1cqw; pointer-events:none; }.sg-confetti--left { left:1cqw; }.sg-confetti--right { right:1cqw; }
.sg-confetti i { position:absolute; width:max(.65cqw,3px); height:max(1.3cqw,5px); border-radius:1px; background:#438568; opacity:0; }
.sg-confetti i:nth-child(3n+1) { background:#93c5a2; }.sg-confetti i:nth-child(3n+2) { background:#c5a257; }.sg-confetti i:nth-child(4n) { background:#e4d3a1; }.sg-confetti i:nth-child(5n) { border-radius:50%; height:max(.75cqw,3px); }
.wallet-showcase[data-sw-motion="ready"] :is(.sg-celebration,.sg-popper,.sg-confetti i,.sg-notice__check svg) { animation-duration:var(--sw-cycle); animation-iteration-count:infinite; animation-timing-function:cubic-bezier(.22,1,.36,1); animation-fill-mode:both; animation-play-state:var(--sw-play-state); }
.wallet-showcase[data-sw-motion="ready"] .sg-celebration { animation-name:sg-notification; }
.wallet-showcase[data-sw-motion="ready"] .sg-popper { animation-name:sg-popper; }
.wallet-showcase[data-sw-motion="ready"] .sg-confetti i { animation-name:sg-confetti; }
.wallet-showcase[data-sw-motion="ready"] .sg-notice__check svg { animation-name:sg-notification-tick; }
.wallet-showcase[data-sw-motion="ready"] :is(.sg-confetti--right i,.sg-popper--right) { animation-delay:120ms; }
@keyframes sg-notification {
 0%,75%,89%,100% { opacity:0; visibility:hidden; transform:translate3d(0,3cqw,0) scale(.94); }
 76.8% { opacity:1; visibility:visible; transform:translate3d(0,-.4cqw,0) scale(1.015); }
 78%,86.3% { opacity:1; visibility:visible; transform:translate3d(0,0,0) scale(1); }
 88.3% { opacity:0; visibility:hidden; transform:translate3d(0,-1cqw,0) scale(.98); }
}
@keyframes sg-notification-tick { 0%,75.5%,90%,100% { stroke-dashoffset:24; } 77.5%,89% { stroke-dashoffset:0; } }
@keyframes sg-popper { 0%,75.3%,80.5%,100% { opacity:0; transform:translateY(.8cqw) rotate(-12deg) scale(.7); } 76%,78.5% { opacity:1; transform:translateY(0) rotate(0deg) scale(1); } 79.8% { opacity:0; transform:translateY(.4cqw) rotate(5deg) scale(.9); } }
@keyframes sg-confetti {
 0%,75.4%,80%,100% { opacity:0; transform:translate3d(0,0,0) rotate(0deg) scale(.25); }
 75.6% { opacity:1; transform:translate3d(0,-.5cqw,0) rotate(0deg) scale(.8); }
 77.2% { opacity:1; transform:translate3d(calc(var(--dx) * .7),var(--dy),0) rotate(var(--turn)) scale(1); }
 79.8% { opacity:0; transform:translate3d(var(--dx),calc(var(--dy) + 9cqw),0) rotate(calc(var(--turn) + 60deg)) scale(.65); }
}
@container(max-width:450px) {
 .sg-celebration { left:-13%; right:-13%; bottom:30%; }
 .sg-notice { padding:3cqw; gap:2.4cqw; border-radius:3.5cqw; }
 .sg-notice__check { width:8.7cqw; height:8.7cqw; }.sg-notice__check svg { width:5.2cqw; height:5.2cqw; }
 .sg-notice__copy { gap:.9cqw; }.sg-notice__copy>small { font-size:max(2.3cqw,9px); }.sg-notice__copy>strong { font-size:max(3.4cqw,13px); }.sg-notice__copy>span { font-size:max(2.6cqw,10px); }
 .sg-popper { width:6.5cqw; height:6.5cqw; }
}
@media(prefers-reduced-motion:reduce) {
 .wallet-showcase :is(.sw-page--savings,.sg-water,.sg-deposit,.sw-caption__saving,.sw-caption__success,.sg-new-goal,.sg-celebration,.sg-popper,.sg-confetti i,.sg-notice__check svg) { animation:none!important; }
 .sg-popper,.sg-confetti { display:none; }
}