/* The handset, status bar, app bar and bottom navigation stay in place.
   Only the page content changes; every scene shares the same clock. */
.sw-pages { position:relative; }
.sw-page { width:100%; background:#faf7f1; border-radius:1cqw; }
.sw-page--wallet { position:relative; }
.sw-page--budget,.sw-page--insight { position:absolute; left:0; top:0; opacity:0; visibility:hidden; }
.sw-page--budget,.sw-page--insight { font-variant-numeric:tabular-nums; }
.sw-page--budget .sw-title { margin:1cqw 0 1.8cqw; }
.sb-hero { padding:2cqw; border-radius:2.4cqw; color:#faf7f1; background:#123d31; }
.sb-hero__label { display:flex; justify-content:space-between; align-items:center; gap:1cqw; font-size:1.65cqw; line-height:1.5; color:#c9c3b8; }
.sb-hero__label>span:last-child { font-size:1.45cqw; white-space:nowrap; }
.sb-hero>strong { display:flex; align-items:baseline; gap:.7cqw; margin-top:1.2cqw; font-size:4.4cqw; font-weight:550; line-height:1.15; letter-spacing:-.05em; }
.sb-hero>strong>small { font-size:2.4cqw; color:#c9c3b8; font-weight:400; letter-spacing:0; }
.sb-hero>p { margin:1cqw 0 0; font-size:1.7cqw; line-height:1.5; color:#c9c3b8; }
.sb-hero>p .sb-change { font-weight:550; color:#edf3e8; }
.sb-change { display:inline-grid; vertical-align:bottom; }
.sb-change>span { grid-area:1/1; }.sb-after { opacity:0; }
.sb-modes { position:relative; display:grid; grid-template-columns:1fr 1fr; padding:.6cqw; margin:2cqw 0 1.8cqw; border-radius:1.8cqw; background:#f1ebdf; font-size:1.8cqw; line-height:1.4; }
.sb-modes::before { content:""; position:absolute; top:.6cqw; bottom:.6cqw; left:.6cqw; width:calc(50% - .6cqw); border-radius:1.3cqw; background:#17513f; }
.sb-modes>span { position:relative; display:grid; place-items:center; min-height:4.3cqw; color:#655f53; }.sb-modes>.sb-modes__simple { color:#faf7f1; }
.sb-plans { position:relative; min-height:24cqw; }
.sb-simple { position:relative; z-index:4; padding:2.2cqw; border:1px solid #e7e0d3; border-radius:2.6cqw; background:#fffef9; transform-origin:center; }
.sb-heading { display:flex; justify-content:space-between; align-items:center; gap:1cqw; font-size:2.05cqw; line-height:1.4; }.sb-heading b { font-weight:550; }.sb-heading>span { color:#17513f; font-size:1.7cqw; }
.sb-spent { display:flex; justify-content:space-between; gap:1cqw; margin:2cqw 0 1.1cqw; font-size:1.7cqw; color:#676254; line-height:1.5; }.sb-spent>span:last-child { color:#211f1b; white-space:nowrap; }
.sb-track { display:block; height:.95cqw; overflow:hidden; border-radius:1cqw; background:#eee8dc; }
.sb-track i { display:block; height:100%; width:var(--sb-fill,53.333333%); background:#678e70; border-radius:inherit; }
.sb-plan-note { margin:1.8cqw 0 0; color:#777367; font-size:1.6cqw; line-height:1.5; }
.sb-categories { position:absolute; inset:0 0 auto; padding:0 1.5cqw; opacity:0; visibility:hidden; }
.sb-category { padding:1.2cqw 0; border-bottom:1px solid #e7e0d366; }.sb-category:last-child { border-bottom:0; }
.sb-category>div { display:flex; align-items:baseline; justify-content:space-between; gap:1cqw; margin-bottom:.8cqw; line-height:1.4; }
.sb-category b { font-size:1.8cqw; font-weight:500; }.sb-category>div>span { font-size:1.5cqw; color:#777367; white-space:nowrap; }.sb-category .sb-track { height:.65cqw; }
.sb-condition { position:relative; display:flex; justify-content:space-between; align-items:center; gap:1cqw; min-height:4.8cqw; padding:1cqw 0; border-top:1px solid #e7e0d3; font-size:1.8cqw; line-height:1.4; color:#17513f; }
.sb-condition>span:first-child { display:flex; align-items:center; gap:1cqw; }.sb-condition svg { width:2.6cqw; height:2.6cqw; fill:none; stroke:currentColor; stroke-width:1.6; }.sb-condition>span:last-of-type { font-size:3.3cqw; font-weight:400; }
.sb-saved { position:absolute; z-index:7; top:39%; right:-8%; display:flex; align-items:center; gap:1.2cqw; padding:1.7cqw 2.1cqw; border:1px solid #d9e8d7; border-radius:2.4cqw; background:#f5faf0; box-shadow:0 1.5cqw 4cqw -1cqw #173e2d33; opacity:0; }
.sb-saved>span:first-child { display:grid; place-items:center; width:4.4cqw; height:4.4cqw; border-radius:50%; background:#17513f; color:#fff; }.sb-saved svg { width:2.5cqw; height:2.5cqw; fill:none; stroke:currentColor; stroke-width:2; }
.sb-saved>span:last-child { display:grid; gap:.4cqw; }.sb-saved b { font-size:1.8cqw; font-weight:550; line-height:1.4; }.sb-saved small { font-size:1.6cqw; line-height:1.4; color:#6a735f; }
.sb-back { display:flex; align-items:center; gap:1.1cqw; margin:1cqw 0 1.7cqw; min-height:3.5cqw; color:#6b7666; font-size:3cqw; line-height:1.4; }.sb-back>span { font-size:1.8cqw; }
.sb-insight { --sb-insight-out:translate(-9%,-2cqw) rotate(2deg) scale(1.13); position:relative; padding:1.8cqw; border:1px solid #e7e0d3; border-radius:2.8cqw; background:#fffef9; transform-origin:50% 35%; }
.sb-insight__heading { display:flex; align-items:center; justify-content:space-between; gap:1cqw; }.sb-insight__heading>span { display:grid; gap:.3cqw; }.sb-insight__heading small { font-size:1.3cqw; line-height:1.3; color:#777367; }.sb-insight__heading b { font-size:2.5cqw; font-weight:550; letter-spacing:-.025em; line-height:1.2; }.sb-insight__heading>svg { width:3cqw; height:3cqw; fill:none; stroke:#17513f; stroke-width:1.7; }
.sb-period { display:flex; align-items:center; justify-content:space-between; gap:2cqw; margin:1cqw 0 .3cqw; padding:0 2cqw; color:#6c725f; font-size:2.6cqw; line-height:1.3; }.sb-period>span:nth-child(2) { font-size:1.65cqw; color:#575f50; }
.sb-chart { position:relative; width:18cqw; height:18cqw; margin:0 auto .6cqw; }.sb-chart>svg { display:block; width:100%; height:100%; }.sb-chart>div { position:absolute; inset:25% 8%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4cqw; line-height:1.4; }.sb-chart small { font-size:1.15cqw; color:#777367; }.sb-chart strong { font-size:1.9cqw; font-weight:550; letter-spacing:-.025em; white-space:nowrap; }
.sb-breakdown>div { display:grid; grid-template-columns:1.2cqw 1fr auto; gap:1.2cqw; align-items:center; padding:.45cqw 0; border-bottom:1px solid #e7e0d366; }.sb-breakdown>div:last-child { border-bottom:0; }.sb-breakdown i { width:1.2cqw; height:1.2cqw; border-radius:50%; }.sb-breakdown b { font-size:1.8cqw; line-height:1.3; font-weight:500; }.sb-breakdown span { display:grid; justify-items:end; gap:.1cqw; }.sb-breakdown strong { font-size:1.7cqw; line-height:1.2; font-weight:500; }.sb-breakdown small { font-size:1.2cqw; line-height:1.2; color:#777367; }
.sb-insight__note { padding:1cqw 1.2cqw; margin:1.2cqw 0 0; border-radius:1.6cqw; background:#edf2e7; color:#55705b; font-size:1.5cqw; line-height:1.4; }.sb-insight__note b { font-weight:550; }
.sb-tap { position:absolute; width:5cqw; height:5cqw; border:1px solid #72967b; background:#b2ceaa44; border-radius:50%; opacity:0; pointer-events:none; }
.sb-tap--nav { left:50%; top:0; margin-left:-2.5cqw; }.sb-tap--mode { left:50%; top:0; margin-left:-2.5cqw; }.sb-tap--condition { right:10%; top:0; }
.sw-bottom-nav>[data-sw-nav] { position:relative; }
@container(max-width:450px) {
 .sb-hero { padding:2.5cqw; border-radius:3cqw; }.sb-hero__label { font-size:max(2.1cqw,8px); }.sb-hero__label>span:last-child { font-size:max(1.8cqw,7px); }.sb-hero>strong { font-size:5.5cqw; }.sb-hero>strong>small { font-size:3cqw; }.sb-hero>p { font-size:max(2.2cqw,8px); }
 .sb-modes { font-size:max(2.3cqw,9px); margin:2cqw 0; padding:.8cqw; border-radius:2cqw; }.sb-modes::before { top:.8cqw; bottom:.8cqw; left:.8cqw; width:calc(50% - .8cqw); }.sb-modes>span { min-height:5.5cqw; }
 .sb-plans { min-height:34cqw; }.sb-simple { padding:2.6cqw; border-radius:3cqw; }.sb-heading { font-size:max(2.7cqw,10px); }.sb-heading>span { font-size:max(2.1cqw,8px); }.sb-spent { font-size:max(2.05cqw,8px); }.sb-track { height:1.2cqw; }.sb-plan-note { font-size:max(2.1cqw,8px); }.sb-category { padding:1.5cqw 0; }.sb-category b { font-size:max(2.4cqw,9px); }.sb-category>div>span { font-size:max(1.9cqw,7px); }.sb-category .sb-track { height:.85cqw; }
 .sb-condition { min-height:6cqw; font-size:max(2.4cqw,9px); }.sb-condition svg { width:3.3cqw; height:3.3cqw; }
 .sb-saved { right:-7%; padding:2.2cqw; border-radius:3cqw; }.sb-saved>span:first-child { width:5.6cqw; height:5.6cqw; }.sb-saved svg { width:3.4cqw; height:3.4cqw; }.sb-saved b { font-size:max(2.4cqw,9px); }.sb-saved small { font-size:max(2.1cqw,8px); }
 .sb-back { min-height:5cqw; font-size:3.7cqw; }.sb-back>span { font-size:max(2.3cqw,9px); }
 .sb-insight { --sb-insight-out:translate(-3%,-3cqw) rotate(2deg) scale(1.08); padding:2.3cqw; border-radius:3cqw; }.sb-insight__heading small { font-size:max(1.9cqw,8px); }.sb-insight__heading b { font-size:max(3.3cqw,12px); }.sb-insight__heading>svg { width:4cqw; height:4cqw; }.sb-period { margin:1.2cqw 0 .5cqw; font-size:3.6cqw; }.sb-period>span:nth-child(2) { font-size:max(2.1cqw,8px); }
 .sb-chart { width:28cqw; height:28cqw; margin-bottom:1cqw; }.sb-chart small { font-size:max(1.7cqw,7px); }.sb-chart strong { font-size:max(3cqw,11px); }.sb-breakdown>div { grid-template-columns:1.5cqw 1fr auto; gap:1.5cqw; padding:.6cqw 0; }.sb-breakdown i { width:1.5cqw; height:1.5cqw; }.sb-breakdown b,.sb-breakdown strong { font-size:max(2.3cqw,9px); }.sb-breakdown small { font-size:max(1.8cqw,7px); }.sb-insight__note { font-size:max(2.05cqw,8px); }
}
@container(max-width:320px) {
 .sb-insight { padding:1.8cqw; }.sb-insight__heading small { display:none; }.sb-period { margin:.5cqw 0 .3cqw; }.sb-chart strong { font-size:9px; }.sb-chart small { font-size:6.3px; }.sb-breakdown>div { padding:.25cqw 0; }.sb-insight__note { padding:.8cqw 1cqw; margin-top:.8cqw; font-size:7.5px; }
}

.wallet-showcase[data-sw-motion="ready"] :is(.sw-page,.sb-before,.sb-after,.sb-modes>span,.sb-simple,.sb-categories,.sb-saved,.sb-insight,.sb-chart__segment,.sb-tap,.sb-month-fill,[data-sw-nav]),.wallet-showcase[data-sw-motion="ready"] .sb-modes::before { animation-duration:var(--sw-cycle); animation-timing-function:cubic-bezier(.4,0,.2,1); animation-iteration-count:infinite; animation-fill-mode:both; animation-play-state:var(--sw-play-state); }
.wallet-showcase[data-sw-motion="ready"] .sw-page--wallet { animation-name:sb-page-wallet; }
.wallet-showcase[data-sw-motion="ready"] .sw-page--budget { animation-name:sb-page-budget; }
.wallet-showcase[data-sw-motion="ready"] .sw-page--insight { animation-name:sb-page-insight; }
.wallet-showcase[data-sw-motion="ready"] .sb-before { animation-name:sb-before; }.wallet-showcase[data-sw-motion="ready"] .sb-after { animation-name:sb-after; }
.wallet-showcase[data-sw-motion="ready"] .sb-modes::before { animation-name:sb-mode-thumb; }.wallet-showcase[data-sw-motion="ready"] .sb-modes__simple { animation-name:sb-mode-simple; }.wallet-showcase[data-sw-motion="ready"] .sb-modes__category { animation-name:sb-mode-category; }
.wallet-showcase[data-sw-motion="ready"] .sb-simple { animation-name:sb-simple; }.wallet-showcase[data-sw-motion="ready"] .sb-categories { animation-name:sb-categories; }
.wallet-showcase[data-sw-motion="ready"] .sb-month-fill { animation-name:sb-month-fill; }.wallet-showcase[data-sw-motion="ready"] .sb-saved { animation-name:sb-saved; }
.wallet-showcase[data-sw-motion="ready"] .sb-insight { animation-name:sb-insight; }
.wallet-showcase[data-sw-motion="ready"] .sb-chart__segment { animation-name:sb-chart-fill; }
.wallet-showcase[data-sw-motion="ready"] [data-sw-nav="wallet"] { animation-name:sb-nav-wallet; }.wallet-showcase[data-sw-motion="ready"] [data-sw-nav="budget"] { animation-name:sb-nav-budget; }
.wallet-showcase[data-sw-motion="ready"] .sb-tap--nav { animation-name:sb-tap-nav; }.wallet-showcase[data-sw-motion="ready"] .sb-tap--mode { animation-name:sb-tap-mode; }.wallet-showcase[data-sw-motion="ready"] .sb-tap--condition { animation-name:sb-tap-condition; }
.wallet-showcase[data-sw-motion="ready"] .sw-caption__budget { animation-name:sb-caption-budget; }.wallet-showcase[data-sw-motion="ready"] .sw-caption__category { animation-name:sb-caption-category; }.wallet-showcase[data-sw-motion="ready"] .sw-caption__insight { animation-name:sb-caption-insight; }
@keyframes sb-page-wallet { 0%,9.5%,97%,100% { opacity:1; visibility:visible; transform:translate3d(0,0,0) rotate(0deg) scale(1); } 12%,92% { opacity:0; visibility:hidden; transform:translate3d(-10cqw,-2cqw,0) rotate(-5deg) scale(.96); } 93% { opacity:0; visibility:hidden; transform:translate3d(14cqw,2cqw,0) rotate(6deg) scale(.95); } }
@keyframes sb-page-budget { 0%,9.5%,100% { opacity:0; visibility:hidden; transform:translate3d(14cqw,2cqw,0) rotate(6deg) scale(.95); } 12%,39% { opacity:1; visibility:visible; transform:translate3d(0,0,0) rotate(0deg) scale(1); } 42%,99% { opacity:0; visibility:hidden; transform:translate3d(-14cqw,-2cqw,0) rotate(-6deg) scale(.95); } }
@keyframes sb-page-insight { 0%,39%,100% { opacity:0; visibility:hidden; transform:translate3d(14cqw,2cqw,0) rotate(6deg) scale(.95); } 42%,53% { opacity:1; visibility:visible; transform:translate3d(0,0,0) rotate(0deg) scale(1); } 56%,99% { opacity:0; visibility:hidden; transform:translate3d(-14cqw,-2cqw,0) rotate(-6deg) scale(.95); } }
@keyframes sb-before { 0%,18%,96%,100% { opacity:1; } 20%,94% { opacity:0; } }
@keyframes sb-after { 0%,18%,96%,100% { opacity:0; } 20%,94% { opacity:1; } }
@keyframes sb-month-fill { 0%,18%,96%,100% { width:53.333333%; } 20%,94% { width:55%; } }
@keyframes sb-mode-thumb { 0%,26%,96%,100% { transform:translateX(0); } 28%,94% { transform:translateX(100%); } }
@keyframes sb-mode-simple { 0%,26%,96%,100% { color:#faf7f1; } 28%,94% { color:#655f53; } }
@keyframes sb-mode-category { 0%,26%,96%,100% { color:#655f53; } 28%,94% { color:#faf7f1; } }
@keyframes sb-simple { 0%,12%,26%,98%,100% { transform:translate(0,0) scale(1); box-shadow:none; opacity:1; visibility:visible; } 14%,24% { transform:translate(-16%,1%) rotate(-2deg) scale(1.18); box-shadow:0 1.5cqw 4cqw -1cqw #173e2d33; opacity:1; visibility:visible; } 28%,95% { transform:translate(0,-1cqw) scale(.98); box-shadow:none; opacity:0; visibility:hidden; } }
@keyframes sb-categories { 0%,26%,96%,100% { opacity:0; visibility:hidden; transform:translateY(2cqw); } 28%,94% { opacity:1; visibility:visible; transform:translateY(0); } }
@keyframes sb-saved { 0%,17%,24%,100% { opacity:0; transform:translateY(1.5cqw) scale(.97); } 18%,22% { opacity:1; transform:translateY(0) scale(1); } }
@keyframes sb-insight { 0%,43%,56%,100% { transform:translate(0,0) scale(1); box-shadow:none; } 45%,51% { transform:var(--sb-insight-out); box-shadow:0 2cqw 5cqw -1cqw #173e2d33; } }
@keyframes sb-chart-fill { 0%,42%,56%,100% { stroke-dasharray:0 100; } 45%,54% { stroke-dasharray:var(--sb-share) calc(100 - var(--sb-share)); } }
@keyframes sb-nav-wallet { 0%,9.5%,56%,100% { color:#17513f; } 12%,53% { color:#847e72; } }
@keyframes sb-nav-budget { 0%,9.5%,56%,100% { color:#847e72; } 12%,53% { color:#17513f; } }
@keyframes sb-tap-nav { 0%,8.5%,12%,100% { opacity:0; transform:scale(.7); } 9.5% { opacity:.6; transform:scale(1); } 11.5% { opacity:0; transform:scale(1.6); } }
@keyframes sb-tap-mode { 0%,25%,29%,100% { opacity:0; transform:scale(.7); } 26% { opacity:.6; transform:scale(1); } 28% { opacity:0; transform:scale(1.6); } }
@keyframes sb-tap-condition { 0%,38%,42%,100% { opacity:0; transform:scale(.7); } 39% { opacity:.6; transform:scale(1); } 41% { opacity:0; transform:scale(1.6); } }
@keyframes sb-caption-budget { 0%,11%,27%,100% { opacity:0; } 13%,25% { opacity:1; } }
@keyframes sb-caption-category { 0%,26%,43%,100% { opacity:0; } 28%,40% { opacity:1; } }
@keyframes sb-caption-insight { 0%,40%,56%,100% { opacity:0; } 43%,53% { opacity:1; } }
@media(prefers-reduced-motion:reduce) {
 .wallet-showcase :is(.sw-page,.sb-before,.sb-after,.sb-modes>span,.sb-simple,.sb-categories,.sb-saved,.sb-insight,.sb-chart__segment,.sb-tap,.sb-month-fill,[data-sw-nav]),.wallet-showcase .sb-modes::before { animation:none !important; }
}