/*
 * RoyalPay personal finance app (getroyalpay.com): public pages and the app.
 * Night treasury: deep ink, smoked glass, violet light, orbits. Dark by default, light when the device asks for it.
 * No external fonts, no inline styles (strict CSP). Widths of bars come from .w0 to .w100 classes.
 */

:root{
	--bg:#07060c;--bg2:#0d0b16;--bg3:#141122;
	--glass:rgba(255,255,255,.035);--glass2:rgba(255,255,255,.065);--glass3:rgba(255,255,255,.1);
	--edge:rgba(255,255,255,.08);--edge2:rgba(255,255,255,.15);
	--ink:#f3f0fa;--ink2:#b5aec9;--ink3:#7c7595;
	--royal:#ab47bc;--royal2:#d38be4;--ion:#8b7bff;--mint:#43e0b7;--gold:#f2c25b;--coral:#ff6f86;--sky:#6cc7ff;
	--ok:var(--mint);--warn:var(--gold);--bad:var(--coral);
	--rx:28px;--rl:20px;--rm:14px;--rs:10px;
	--ease:cubic-bezier(.2,.75,.2,1);
	--f:ui-sans-serif,system-ui,-apple-system,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
	--fd:ui-sans-serif,system-ui,-apple-system,"SF Pro Display","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	--m:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
	--shadow:0 30px 80px -30px rgba(0,0,0,.8);
	--rim:linear-gradient(135deg,rgba(211,139,228,.55),rgba(255,255,255,.06) 38%,rgba(255,255,255,.04) 62%,rgba(139,123,255,.45));
	--h0:#b65ddb;--h1:#ff7a8a;--h2:#44d7a8;--h3:#f2c25b;--h4:#5cc3ff;--h5:#8b7bff;--h6:#2fc6c6;--h7:#ff9f5a;--h8:#ff6fc1;--h9:#a6e05a;--h10:#e58aa8;--h11:#9aa7c7;
	color-scheme:dark
}
@media (prefers-color-scheme:light){
	:root{
		--bg:#f6f4fb;--bg2:#efecf7;--bg3:#e7e2f3;
		--glass:rgba(255,255,255,.72);--glass2:rgba(255,255,255,.9);--glass3:#fff;
		--edge:rgba(36,20,64,.09);--edge2:rgba(36,20,64,.16);
		--ink:#17131f;--ink2:#4e4762;--ink3:#7d7690;
		--royal2:#8e2fa1;--mint:#0f9e78;--gold:#a8770c;--coral:#d7354f;--sky:#1f7fc0;
		--shadow:0 30px 70px -36px rgba(48,22,90,.35);
		--rim:linear-gradient(135deg,rgba(171,71,188,.45),rgba(36,20,64,.06) 38%,rgba(36,20,64,.05) 62%,rgba(139,123,255,.4));
		color-scheme:light
	}
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--f);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
img,svg{display:block;max-width:100%}
a{color:var(--royal2);text-decoration:none;transition:color .2s}
a:hover{color:var(--ink)}
h1,h2,h3,h4,h5,p,ul,ol,dl,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--royal2);outline-offset:3px;border-radius:8px}
::selection{background:rgba(171,71,188,.4);color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.22em}
.i-sm{width:1em;height:1em;vertical-align:-.14em}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.narrow{width:min(760px,100% - 40px);margin-inline:auto}
.narrow-l{width:min(940px,100% - 40px);margin-inline:auto}
.r{color:var(--royal)}
.muted{color:var(--ink2)}
.small{font-size:.875rem}
.mono{font-family:var(--m);font-size:.92em}
.center{text-align:center}
.hp{position:absolute;left:-9999px}
.amt,.num,.big-num,.hero-amt{font-variant-numeric:tabular-nums}
.ok-text{color:var(--ok)}.warn-text{color:var(--warn)}.neg-text,.neg{color:var(--bad)}
.mt{margin-top:1.4rem}
.logo-light{display:none}
@media (prefers-color-scheme:light){.logo-dark{display:none}.logo-light{display:block}}

/* deep space: two slow light clouds, seamless loop (alternate) */
.space{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none}
.space i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(110px);opacity:.22;animation:cloud 26s ease-in-out infinite alternate}
.space i:first-child{background:var(--royal);left:-24vmax;top:-30vmax}
.space i:last-child{background:var(--ion);right:-26vmax;bottom:-36vmax;animation-delay:-13s;opacity:.16}
@keyframes cloud{to{transform:translate3d(7vmax,6vmax,0) scale(1.12)}}
@media (prefers-color-scheme:light){.space i{opacity:.14}.space i:last-child{opacity:.1}}

/* type */
.mega{font-family:var(--fd);font-weight:850;letter-spacing:-.055em;line-height:.92;font-size:clamp(3.1rem,8.4vw,7.2rem);display:grid;gap:.12em}
.mega-2{font-size:.52em;letter-spacing:-.04em;font-weight:760;color:var(--ink2);background:linear-gradient(100deg,var(--ink2) 20%,var(--royal2) 45%,var(--ink2) 70%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s linear infinite}
@keyframes sheen{to{background-position:-300% 0}}
.display-s{font-family:var(--fd);font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;letter-spacing:-.045em;font-weight:820}
.h1{font-family:var(--fd);font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.04;letter-spacing:-.042em;font-weight:800;margin-bottom:1rem}
.h2{font-family:var(--fd);font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:-.035em;font-weight:780}
.h3{font-family:var(--fd);font-size:1.35rem;letter-spacing:-.02em;font-weight:720;margin:.4rem 0 .5rem}
.h4{font-size:1.04rem;font-weight:680;letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink2);max-width:38rem;margin-top:1rem}
.lead-s{font-size:1.06rem;color:var(--ink2);margin-top:.6rem}
.lead-wide{max-width:50rem}
.kicker{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:650;color:var(--royal2);margin-bottom:.7rem}
.eyebrow{font-size:.86rem;font-weight:650;color:var(--royal2);margin-bottom:.7rem;display:flex;align-items:center;gap:.4rem}
.note{display:flex;gap:.5rem;align-items:flex-start;font-size:.88rem;color:var(--ink2);margin-top:1.4rem}
.chip-k{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .9rem;border-radius:999px;font-size:.84rem;color:var(--royal2);background:rgba(171,71,188,.1);border:1px solid rgba(171,71,188,.32);margin-bottom:1.5rem}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.78rem 1.3rem;border:0;border-radius:999px;font-weight:650;font-size:.96rem;line-height:1.2;color:#fff;cursor:pointer;background:linear-gradient(135deg,#c35bd6 0%,var(--royal) 45%,#6f55e8 120%);box-shadow:0 12px 32px -12px rgba(171,71,188,.85),inset 0 1px 0 rgba(255,255,255,.28);transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s;overflow:hidden;white-space:nowrap;text-decoration:none}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 18px 42px -14px rgba(171,71,188,.95),inset 0 1px 0 rgba(255,255,255,.34)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-ghost{color:var(--ink);background:var(--glass2);box-shadow:inset 0 0 0 1px var(--edge2)}
.btn-ghost:hover{color:var(--ink);background:var(--glass3);box-shadow:inset 0 0 0 1px rgba(171,71,188,.5)}
.btn-danger{color:var(--coral);background:rgba(255,111,134,.1);box-shadow:inset 0 0 0 1px rgba(255,111,134,.35)}
.btn-danger:hover{color:#fff;background:var(--coral)}
.btn-sm{padding:.52rem .95rem;font-size:.86rem}
.btn-lg{padding:1rem 1.75rem;font-size:1.04rem}
.btn-block{width:100%}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:11px;border:1px solid var(--edge2);background:var(--glass);color:var(--ink);cursor:pointer;flex:none;transition:.2s;list-style:none}
.icon-btn::-webkit-details-marker{display:none}
.icon-btn:hover,.icon-btn.done{background:var(--royal);border-color:var(--royal);color:#fff}
.link-btn{background:none;border:0;color:var(--ink2);cursor:pointer;padding:.3rem 0;display:inline-flex;gap:.4rem;align-items:center}

/* badges, chips, tags */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.26rem .7rem;border-radius:999px;font-size:.76rem;font-weight:650;white-space:nowrap;background:var(--glass2);border:1px solid var(--edge);color:var(--ink2)}
.b-ok{color:var(--mint);background:rgba(67,224,183,.1);border-color:rgba(67,224,183,.35)}
.b-wait{color:var(--gold);background:rgba(242,194,91,.1);border-color:rgba(242,194,91,.35)}
.b-no{color:var(--coral);background:rgba(255,111,134,.1);border-color:rgba(255,111,134,.38)}
.b-info{color:var(--sky);background:rgba(108,199,255,.1);border-color:rgba(108,199,255,.35)}
.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.32rem .75rem;border-radius:999px;background:var(--glass2);border:1px solid var(--edge);font-size:.82rem;color:var(--ink)}
.chip.on{border-color:var(--royal);background:rgba(171,71,188,.16)}
.chip.pos{color:var(--ok)}
.soon{display:inline-flex;align-items:center;padding:.16rem .55rem;border-radius:999px;font-size:.7rem;font-weight:700;letter-spacing:.02em;color:var(--gold);background:rgba(242,194,91,.1);border:1px solid rgba(242,194,91,.35);vertical-align:middle}
.soon-line{margin-bottom:.9rem}
.tag-soft{display:inline-block;padding:.05rem .45rem;border-radius:6px;background:var(--glass2);color:var(--ink2);font-size:.74rem;margin-left:.3rem}
.tag-warn{display:inline-flex;align-items:center;gap:.25rem;padding:.05rem .45rem;border-radius:6px;background:rgba(242,194,91,.12);color:var(--gold);font-size:.74rem;margin-left:.3rem}
.hash{display:inline-block;color:var(--royal2);font-size:.78rem;margin-left:.35rem}
.hash.on{background:rgba(171,71,188,.15);border-radius:6px;padding:0 .3rem}

/* hues: category colours */
.hue-0{--hue:var(--h0)}.hue-1{--hue:var(--h1)}.hue-2{--hue:var(--h2)}.hue-3{--hue:var(--h3)}.hue-4{--hue:var(--h4)}.hue-5{--hue:var(--h5)}
.hue-6{--hue:var(--h6)}.hue-7{--hue:var(--h7)}.hue-8{--hue:var(--h8)}.hue-9{--hue:var(--h9)}.hue-10{--hue:var(--h10)}.hue-11{--hue:var(--h11)}
.hue-none{--hue:var(--ink3)}.hue-transfer{--hue:var(--h11)}.hue-split{--hue:var(--royal2)}
.hue-bg-0{background:var(--h0)!important}.hue-bg-1{background:var(--h1)!important}.hue-bg-2{background:var(--h2)!important}.hue-bg-3{background:var(--h3)!important}.hue-bg-4{background:var(--h4)!important}.hue-bg-5{background:var(--h5)!important}
.hue-bg-6{background:var(--h6)!important}.hue-bg-7{background:var(--h7)!important}.hue-bg-8{background:var(--h8)!important}.hue-bg-9{background:var(--h9)!important}.hue-bg-10{background:var(--h10)!important}.hue-bg-11{background:var(--h11)!important}.hue-bg-none{background:var(--ink3)!important}
.dot{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:var(--hue,var(--ink3));flex:none}

/* widths for bars (no inline styles under CSP) */
.w0{width:0}.w5{width:5%}.w10{width:10%}.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}.w50{width:50%}
.w55{width:55%}.w60{width:60%}.w65{width:65%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}.w95{width:95%}.w100{width:100%}
.meter{position:relative;display:block;height:8px;border-radius:99px;background:var(--glass2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--royal),var(--ion));transition:width .8s var(--ease)}
.meter.big{height:12px;margin:.9rem 0 .5rem}
.meter-sm{height:6px}
.meter-in i{background:linear-gradient(90deg,#1fb98d,var(--mint))}
.meter-now{position:absolute;top:-3px;bottom:-3px;width:2px!important;background:var(--ink);opacity:.55;border-radius:2px;left:0}
.meter-now.w5{left:5%}.meter-now.w10{left:10%}.meter-now.w15{left:15%}.meter-now.w20{left:20%}.meter-now.w25{left:25%}.meter-now.w30{left:30%}.meter-now.w35{left:35%}.meter-now.w40{left:40%}.meter-now.w45{left:45%}.meter-now.w50{left:50%}
.meter-now.w55{left:55%}.meter-now.w60{left:60%}.meter-now.w65{left:65%}.meter-now.w70{left:70%}.meter-now.w75{left:75%}.meter-now.w80{left:80%}.meter-now.w85{left:85%}.meter-now.w90{left:90%}.meter-now.w95{left:95%}.meter-now.w100{left:calc(100% - 2px)}

/* glass and panels: a hairline rim of light, radius follows hierarchy */
.glass{background:linear-gradient(180deg,var(--glass2),var(--glass)) padding-box,var(--rim) border-box;border:1px solid transparent;border-radius:var(--rl);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.panel{position:relative;padding:1.4rem;border-radius:var(--rl);background:var(--glass);border:1px solid var(--edge);min-width:0}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.panel .h4{margin-bottom:.8rem}
.panel-head .h4{margin-bottom:0}
.pad{padding:clamp(1.4rem,3vw,2.2rem)}
.danger-zone{border-color:rgba(255,111,134,.25)}

/* public nav */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);background:color-mix(in srgb,var(--bg) 62%,transparent);border-bottom:1px solid var(--edge);transition:background .3s}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 88%,transparent)}
.nav-in{display:flex;align-items:center;gap:1.3rem;height:70px}
.brand{display:flex;align-items:center;color:var(--ink)}
.brand img{height:30px;width:auto}
.links{display:flex;align-items:center;gap:.25rem;margin-left:auto}
.links>a:not(.btn){display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border-radius:999px;color:var(--ink2);font-size:.92rem;font-weight:540}
.links>a:not(.btn):hover{color:var(--ink);background:var(--glass2)}
.links .btn{margin-left:.4rem}
.lang{position:relative}
.lang summary{list-style:none;display:flex;align-items:center;gap:.35rem;cursor:pointer;padding:.45rem .7rem;border-radius:999px;color:var(--ink2);font-size:.82rem;font-weight:650;border:1px solid var(--edge)}
.lang summary::-webkit-details-marker{display:none}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;padding:.4rem;border-radius:14px;background:var(--bg2);border:1px solid var(--edge2);box-shadow:var(--shadow);display:grid;gap:2px;animation:pop .2s var(--ease)}
.lang-menu a{padding:.55rem .8rem;border-radius:9px;color:var(--ink);font-size:.92rem}
.lang-menu a:hover,.lang-menu a.on{background:var(--glass2)}
.lang-menu a.on{color:var(--royal2)}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.menu-btn{display:none;background:none;border:1px solid var(--edge2);color:var(--ink);border-radius:12px;width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer}

/* hero with a grid floor that rolls toward the viewer forever */
.hero-r{position:relative;padding:clamp(3.5rem,9vh,7rem) 0 0;overflow:hidden}
.grid-floor{position:absolute;left:-20%;right:-20%;bottom:-2px;height:58%;z-index:-1;background-image:linear-gradient(rgba(171,71,188,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(171,71,188,.22) 1px,transparent 1px);background-size:64px 64px;transform:perspective(520px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(transparent,#000 40%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 40%,#000 70%,transparent);animation:floor 6s linear infinite;opacity:.55}
@keyframes floor{to{background-position:0 64px,0 0}}
@media (prefers-color-scheme:light){.grid-floor{opacity:.35}}
.hero-r-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero-r-copy .lead{max-width:34rem}

/* the device: a phone running the app, with orbits and floating chips */
.device-wrap{position:relative;height:600px;display:grid;place-items:center}
.halo{position:absolute;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(171,71,188,.4),transparent 62%);filter:blur(20px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);opacity:.75}}
.orbit{position:absolute;border-radius:50%;border:1px dashed rgba(211,139,228,.32)}
.orbit i{position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--royal2);box-shadow:0 0 16px var(--royal2)}
.o1{width:500px;height:500px;animation:spin 38s linear infinite}
.o2{width:380px;height:380px;animation:spin 26s linear infinite reverse;border-color:rgba(139,123,255,.3)}
.o2 i{background:var(--ion);box-shadow:0 0 16px var(--ion);width:9px;height:9px;margin-left:-4.5px;top:-4.5px}
@keyframes spin{to{transform:rotate(360deg)}}
.device{position:relative;width:290px;height:580px;border-radius:46px;padding:12px;background:linear-gradient(160deg,#2a2240,#0c0a14 50%,#1b1530);box-shadow:0 50px 100px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.6);animation:hover 8s ease-in-out infinite}
@keyframes hover{50%{transform:translateY(-12px) rotate(-.6deg)}}
.device-notch{position:absolute;top:22px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#000;z-index:2}
.screen{position:relative;height:100%;border-radius:36px;overflow:hidden;padding:52px 16px 16px;background:radial-gradient(120% 70% at 50% 0%,rgba(171,71,188,.35),transparent 60%),#0a0812;color:#f3f0fa;display:flex;flex-direction:column;gap:.9rem}
.scr-hello{font-size:.8rem;color:#b5aec9}
.scr-dial{position:relative;width:180px;height:180px;margin:0 auto}
.scr-dial svg{width:100%;height:100%}
.scr-rows{display:grid;gap:.55rem}
.scr-rows li{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;padding:.55rem .6rem;border-radius:14px;background:rgba(255,255,255,.05);font-size:.8rem}
.scr-rows li>span:nth-child(2){display:grid;gap:.25rem;min-width:0}
.scr-rows small{color:#b5aec9;font-size:.7rem}
.scr-rows em{font-style:normal;font-variant-numeric:tabular-nums;font-weight:650}
.scr-rows .meter{height:5px;background:rgba(255,255,255,.1)}
.fill-loop{animation:fill 6s var(--ease) infinite}
@keyframes fill{0%{transform:scaleX(.15);transform-origin:left}45%,85%{transform:scaleX(1);transform-origin:left}100%{transform:scaleX(.15);transform-origin:left}}
.scr-ticker{margin-top:auto;overflow:hidden;border-radius:12px;background:rgba(255,255,255,.04);-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.scr-ticker-in{display:flex;gap:1.2rem;width:max-content;padding:.55rem 0;animation:belt 16s linear infinite;font-size:.74rem;font-variant-numeric:tabular-nums;color:#d6d0e6}
.scr-ticker-in span{display:inline-flex;align-items:center;gap:.3rem}
.float-chip{position:absolute;display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border-radius:16px;font-size:.84rem;animation:bob 6s ease-in-out infinite;z-index:3;max-width:250px}
.float-chip .i{color:var(--royal2)}
.c1{left:-2%;top:16%}
.c2{right:-4%;top:48%;animation-delay:-2s}
.c3{left:4%;bottom:12%;animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-10px)}}

/* category belt (seamless: content doubled, moves exactly half its width) */
.belt{margin-top:3.5rem;border-block:1px solid var(--edge);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.belt-track{display:flex;gap:2.4rem;width:max-content;padding:1rem 0;animation:belt 44s linear infinite}
.belt-track span{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink3);font-size:.95rem;white-space:nowrap}
.belt-track span:nth-child(5n) .i{color:var(--royal2)}
@keyframes belt{to{transform:translateX(-50%)}}

/* sections */
.sec{padding:clamp(4.5rem,11vh,8rem) 0;position:relative}
.sec-tint{background:linear-gradient(180deg,transparent,rgba(171,71,188,.05) 30%,rgba(139,123,255,.04) 70%,transparent)}
.sec-head{margin-bottom:3rem;max-width:46rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .lead{margin-inline:auto}
.page-top{padding-top:clamp(3rem,8vh,5rem)}

/* feature rows with live mini mockups */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;padding:3.2rem 0;border-top:1px solid var(--edge)}
.feat:first-of-type{border-top:0}
.feat.flip .feat-copy{order:2}
.feat .ticks{margin-top:1.2rem}
.feat-visual{position:relative;padding:1.6rem;border-radius:var(--rx);min-height:260px;display:flex;flex-direction:column;justify-content:center;gap:1rem;box-shadow:var(--shadow)}
.demo-budget{display:grid;gap:.9rem}
.demo-budget li{display:grid;grid-template-columns:auto 8rem 1fr auto;gap:.8rem;align-items:center;font-size:.9rem}
.demo-budget small{color:var(--ink2);font-variant-numeric:tabular-nums}
.demo-budget .meter{overflow:visible}
.demo-foot{display:flex;align-items:center;gap:.45rem;color:var(--ink2);font-size:.85rem}
.radar-demo{flex-direction:row;align-items:center}
.radar-scope{position:relative;flex:none;width:190px;height:190px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 30px,rgba(171,71,188,.18) 30px 31px),radial-gradient(circle,rgba(171,71,188,.12),transparent 70%);border:1px solid rgba(171,71,188,.35);overflow:hidden}
.sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(211,139,228,.55),transparent 22%);animation:spin 4s linear infinite}
.blip{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold);animation:blip 4s linear infinite}
.b1{left:62%;top:24%}.b2{left:28%;top:62%;animation-delay:-1.4s;background:var(--royal2);box-shadow:0 0 12px var(--royal2)}.b3{left:70%;top:68%;animation-delay:-2.6s}.b4{left:40%;top:30%;animation-delay:-3.3s;background:var(--mint);box-shadow:0 0 12px var(--mint)}
@keyframes blip{0%,100%{opacity:.25;transform:scale(.8)}10%{opacity:1;transform:scale(1.3)}40%{opacity:.6;transform:scale(1)}}
.radar-legend{display:grid;gap:.6rem;font-size:.9rem;flex:1}
.radar-legend li{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.radar-legend em{margin-left:auto;font-style:normal;color:var(--ink2);font-size:.82rem}
.rings-demo{flex-direction:row;justify-content:space-around;flex-wrap:wrap}
.ring-demo{position:relative;width:132px;display:grid;justify-items:center;gap:.4rem;text-align:center}
.ring-demo svg{width:118px;height:118px}
.ring-demo .goal-ic{position:absolute;top:40px;left:50%;transform:translateX(-50%)}
.ring-demo small{color:var(--ink2);font-size:.82rem}
.ring-loop{animation:ringloop 7s var(--ease) infinite}
@keyframes ringloop{0%{stroke-dashoffset:300}40%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:300}}
.demo-days{grid-template-columns:repeat(7,1fr)}
.afford-demo{align-items:flex-start}
.afford-q{font-size:1.1rem;color:var(--ink2)}
.afford-q b{color:var(--ink);font-size:1.6rem;font-variant-numeric:tabular-nums}
.typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:2px solid var(--royal2);animation:type 5s steps(4) infinite,caret .8s step-end infinite}
@keyframes type{0%{max-width:0}40%,85%{max-width:4.2ch}100%{max-width:0}}
@keyframes caret{50%{border-color:transparent}}
.chron-demo{text-align:center;align-items:center;background:radial-gradient(90% 90% at 50% 0%,rgba(242,194,91,.18),transparent 60%),linear-gradient(180deg,var(--glass2),var(--glass));border:1px solid rgba(242,194,91,.3);border-radius:var(--rx)}
.chron-crown{color:var(--gold);display:grid;place-items:center}
.chron-crown .i{width:44px;height:44px;animation:wobble 5s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(0)}8%{transform:rotate(-10deg)}16%{transform:rotate(8deg)}24%{transform:rotate(0)}}
.chron-name{font-family:var(--fd);font-size:2rem;font-weight:800;letter-spacing:-.03em}
.chron-mini{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem}
.chron-mini span{display:grid}
.chron-mini small{color:var(--ink2);font-size:.75rem}

/* the little things */
.smalls{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:var(--rx);overflow:hidden}
.smalls li{display:grid;gap:.35rem;align-content:start;padding:1.5rem;background:var(--bg)}
.smalls li:hover{background:var(--bg2)}
.smalls small{color:var(--ink2);font-size:.88rem;line-height:1.5}
.small-ic{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;color:var(--royal2);background:rgba(171,71,188,.1);border:1px solid rgba(171,71,188,.25);margin-bottom:.4rem}

/* steps */
.steps{--prog:0;position:relative;display:grid;gap:1.2rem;max-width:760px}
.steps::before,.steps::after{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;border-radius:2px;background:var(--edge2)}
.steps::after{background:linear-gradient(var(--royal2),var(--ion));transform-origin:top;transform:scaleY(var(--prog))}
.step{position:relative;display:flex;gap:1.4rem;align-items:flex-start;z-index:1}
.step-dot{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--bg2);border:1px solid var(--edge2);color:var(--royal2);transition:.4s var(--ease)}
.step.in .step-dot{background:linear-gradient(135deg,var(--royal),var(--ion));color:#fff;border-color:transparent;box-shadow:0 0 0 6px rgba(171,71,188,.12)}
.step-body{padding:.6rem 0 1rem}
.step h3{font-size:1.2rem;margin-bottom:.3rem}
.step p{color:var(--ink2)}

/* plans */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-bottom:1.6rem;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;padding:1.8rem 1.6rem;border-radius:var(--rx);background:var(--glass);border:1px solid var(--edge);overflow:hidden}
.tier::before{content:"";position:absolute;inset:0 0 auto;height:120px;background:radial-gradient(90% 100% at 50% 0%,var(--tierglow,rgba(171,71,188,.2)),transparent 70%);pointer-events:none}
.tier-duke{--tierglow:rgba(171,71,188,.3);border-color:rgba(171,71,188,.35)}
.tier-king{--tierglow:rgba(242,194,91,.25);border-color:rgba(242,194,91,.4)}
.tier.current{box-shadow:0 0 0 2px var(--royal)}
.tier-crest{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;color:var(--ink2);background:var(--glass2);border:1px solid var(--edge2);position:relative}
.tier-duke .tier-crest{color:var(--royal2);border-color:rgba(171,71,188,.45)}
.tier-king .tier-crest{color:var(--gold);border-color:rgba(242,194,91,.5);box-shadow:0 0 24px -6px rgba(242,194,91,.6)}
.tier-tag{color:var(--ink2);font-size:.9rem;min-height:2.8em}
.tier-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem;margin:1rem 0}
.tier-price b{font-family:var(--fd);font-size:2.3rem;font-weight:820;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tier-price small{color:var(--ink2)}
.tier-year{flex-basis:100%;font-size:.84rem;color:var(--ink2)}
.tier-list{display:grid;gap:.55rem;font-size:.9rem;margin-bottom:1.4rem}
.tier-list li{display:flex;gap:.55rem;align-items:flex-start}
.tier-list .i{color:var(--royal2);margin-top:.2em}
.tier-king .tier-list .i{color:var(--gold)}
.tier-list li.off{color:var(--ink3);text-decoration:line-through}
.tier-cta{margin-top:auto;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.plan-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:999px;font-size:.82rem;font-weight:650;color:var(--ink2);background:var(--glass2);border:1px solid var(--edge2)}
.plan-pill.tier-duke{color:var(--royal2);border-color:rgba(171,71,188,.45)}
.plan-pill.tier-king{color:var(--gold);border-color:rgba(242,194,91,.5)}
.plan-pill.big{font-size:.92rem;padding:.55rem 1rem}

/* banking, planned */
.bank-band{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.bank-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.bank-tiles li{position:relative;display:grid;gap:.6rem;padding:1.2rem;border-radius:var(--rl);background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,255,255,.018) 10px 11px),var(--glass);border:1px dashed var(--edge2);color:var(--ink2);font-size:.9rem}
.bank-tiles .lock,.locked .lock{position:absolute;top:.8rem;right:.8rem;color:var(--gold);opacity:.8}
.roadmap{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.road{display:flex;gap:1rem;padding:1.4rem;border-radius:var(--rl);background:var(--glass);border:1px dashed var(--edge2)}
.road-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--glass2);color:var(--gold)}
.bank-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.prose-block p{color:var(--ink2);margin-bottom:.9rem}

/* locked feature page (app) */
.locked-page{display:grid;grid-template-columns:.8fr 1.2fr;gap:2.5rem;align-items:center;padding:2rem 0}
.locked-visual{position:relative;width:260px;height:260px;margin:auto;display:grid;place-items:center}
.locked-visual.big{width:320px;height:320px}
.locked-orbit,.locked-orbit i{position:absolute;inset:0;border-radius:50%}
.locked-orbit{border:1px dashed rgba(242,194,91,.35);animation:spin 30s linear infinite}
.locked-orbit i:nth-child(2){inset:18%;border:1px solid rgba(171,71,188,.35);animation:spin 18s linear infinite reverse}
.locked-orbit i:nth-child(3){inset:36%;background:radial-gradient(circle,rgba(171,71,188,.3),transparent 70%)}
.locked-orbit i:first-child::after{content:"";position:absolute;top:-5px;left:50%;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold)}
.locked-ic{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:26px;background:var(--glass2);border:1px solid var(--edge2);color:var(--gold)}
.locked-ic .i{width:38px;height:38px}
.locked-copy .ticks{margin:1.3rem 0}
.locked-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}

/* giving */
.giving-band,.giving-hero{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center}
.giving-num{display:grid;place-items:center;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(171,71,188,.25),transparent 70%);border:1px solid rgba(171,71,188,.4);text-align:center}
.giving-num b{font-family:var(--fd);font-size:2.6rem;font-weight:850;letter-spacing:-.04em;line-height:1}
.giving-num small{color:var(--ink2);font-size:.78rem;max-width:8rem}
.give-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0 3rem}
.give-steps li{display:flex;gap:1rem;padding:1.3rem}
.give-steps h3{font-size:1.05rem;margin-bottom:.3rem}
.give-steps p{color:var(--ink2);font-size:.92rem}
.pnum{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(171,71,188,.15);color:var(--royal2);font-weight:750}
.public-causes{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.2rem 0}
.public-causes li{display:grid;gap:.5rem;padding:1.3rem}
.public-causes h3{font-size:1.05rem}
.causes{display:grid;gap:.8rem;margin-bottom:1rem}
.cause{display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:1rem 1.1rem;border-radius:var(--rm);background:var(--glass2);border:1px solid var(--edge)}
.cause.chosen{border-color:rgba(67,224,183,.45)}
.cause-main{display:grid;gap:.35rem;flex:1;min-width:0}

/* faq, cta */
.faq{border-bottom:1px solid var(--edge)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem .2rem;cursor:pointer;font-size:1.06rem;font-weight:620}
.faq summary::-webkit-details-marker{display:none}
.faq-i{transition:transform .3s var(--ease);color:var(--royal2)}
.faq[open] .faq-i{transform:rotate(45deg)}
.faq p{color:var(--ink2);padding:0 .2rem 1.4rem;animation:pop .3s var(--ease)}
.cta-band{position:relative;text-align:center;padding:clamp(2.5rem,6vw,4.5rem) 1.5rem;border-radius:36px;background:radial-gradient(70% 120% at 50% 0%,rgba(171,71,188,.35),transparent 60%),var(--glass);border:1px solid rgba(171,71,188,.3);overflow:hidden}
.cta-band .lead{margin-inline:auto}
.cta-band .btn{margin-top:2rem}
.cta-crown{color:var(--gold);display:grid;place-items:center;margin-bottom:1rem}
.cta-crown .i{width:40px;height:40px;animation:wobble 5s ease-in-out infinite}

/* security page */
.sec-list{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.sec-list .panel{display:grid;gap:.3rem;align-content:start}

/* footer */
.foot{border-top:1px solid var(--edge);padding:4rem 0 2rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.25))}
@media (prefers-color-scheme:light){.foot{background:linear-gradient(180deg,transparent,rgba(48,22,90,.04))}}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2rem}
.foot-brand img{height:24px;width:auto;margin-bottom:1rem}
.motto{font-family:var(--fd);font-weight:780;font-size:1.2rem;letter-spacing:-.02em}
.motto-sub{color:var(--royal2);font-weight:600;margin-bottom:.8rem}
.foot-col{display:grid;align-content:start;gap:.45rem}
.foot-col h2{font-size:.84rem;font-weight:700;color:var(--ink3);margin-bottom:.4rem}
.foot-col a,.foot-brand a{color:var(--ink2);font-size:.92rem}
.foot-col a:hover,.foot-brand a:hover{color:var(--ink)}
.foot-brand .small{color:var(--ink2);margin-top:.5rem}
.foot-legal{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--edge);display:grid;gap:.7rem;font-size:.8rem;color:var(--ink3)}

/* feedback */
.flashes{display:grid;gap:.6rem;margin:1rem 0}
.wrap.flashes{margin-top:1.2rem}
.flash{padding:.85rem 1.1rem;border-radius:var(--rm);background:var(--glass2);border:1px solid var(--edge2);animation:pop .35s var(--ease)}
.flash-success{border-color:rgba(67,224,183,.45);background:rgba(67,224,183,.08)}
.flash-error{border-color:rgba(255,111,134,.5);background:rgba(255,111,134,.08)}
.flash-info{border-color:rgba(108,199,255,.4);background:rgba(108,199,255,.07)}
.flash-crown{border-color:rgba(242,194,91,.6);background:radial-gradient(120% 200% at 0% 0%,rgba(242,194,91,.2),transparent 60%),var(--glass2);font-weight:650}
.banner{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.9rem 1.1rem;border-radius:var(--rm);margin:0 0 1.1rem;border:1px solid var(--edge2);background:var(--glass2)}
.banner>span{flex:1;min-width:12rem}
.banner-info{border-color:rgba(171,71,188,.4);background:rgba(171,71,188,.08)}
.banner-warn{border-color:rgba(242,194,91,.45);background:rgba(242,194,91,.08)}
.banner-bad{border-color:rgba(255,111,134,.45);background:rgba(255,111,134,.08)}
.empty{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;color:var(--ink3);padding:.8rem 0}
.empty-big{display:grid;justify-items:center;gap:.6rem;text-align:center;padding:2.6rem 1.4rem}
.empty-big>.i{width:44px;height:44px;color:var(--royal2)}
.ticks{display:grid;gap:.55rem}
.ticks li{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink2)}
.ticks .i{color:var(--ok);margin-top:.28em}

/* forms */
.form{display:grid;gap:.55rem}
.form label,.label{font-size:.86rem;font-weight:600;color:var(--ink2);margin-top:.3rem}
input,select,textarea{width:100%;padding:.78rem .95rem;border-radius:12px;border:1px solid var(--edge2);background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--ink);font:inherit;font-size:16px;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
@media (prefers-color-scheme:light){input,select,textarea{background:#fff}}
textarea{resize:vertical;min-height:5rem}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.4rem}
select option,select optgroup{background:var(--bg2);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--royal);box-shadow:0 0 0 4px rgba(171,71,188,.2)}
input[type=checkbox],input[type=radio]{width:1.15rem;height:1.15rem;padding:0;border-radius:5px;flex:none;cursor:pointer;margin-top:.15rem}
input[type=radio]{border-radius:50%}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--royal);border-color:var(--royal);box-shadow:inset 0 0 0 3px var(--bg)}
input[type=file]{padding:.6rem}
input.otp{font-family:var(--m);font-size:1.3rem;letter-spacing:.4em;text-align:center}
.check{display:flex!important;gap:.6rem;align-items:flex-start;font-weight:500!important;color:var(--ink)!important;font-size:.9rem!important;cursor:pointer}
.hint{font-size:.8rem;color:var(--ink3)}
.field-error,.errors li{color:var(--coral);font-size:.84rem}
.errors{display:grid;gap:.3rem;padding:.75rem 1rem;border-radius:12px;background:rgba(255,111,134,.08);border:1px solid rgba(255,111,134,.32)}
.form .btn{margin-top:.6rem;justify-self:start}
.form .btn-block{justify-self:stretch}
.form-grid{grid-template-columns:1fr 1fr;column-gap:1rem;align-items:start}
.form-grid>div{display:grid;gap:.4rem}
.span-all{grid-column:1/-1}
.form-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end;gap:.8rem}
.form-row>div{display:grid;gap:.4rem}
.form-row .btn{margin:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.two>div{display:grid;gap:.4rem;align-content:start}
.inline-form{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.6rem 0}
.inline-form label{margin:0;font-size:.86rem;color:var(--ink2);font-weight:600}
.inline-form select,.inline-form input{width:auto;flex:1;min-width:140px}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.seg-opt{display:flex!important;align-items:center;gap:.5rem;margin:0!important;padding:.65rem .8rem;border-radius:12px;border:1px solid var(--edge2);background:var(--glass);cursor:pointer;color:var(--ink)!important;font-weight:560!important}
.seg-opt:has(input:checked){border-color:var(--royal);background:rgba(171,71,188,.12)}
.seg-wrap{border:0;padding:0;margin:.6rem 0 0}
.seg-wrap legend{font-size:.86rem;font-weight:600;color:var(--ink2);margin-bottom:.45rem}
.row-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.center-actions{justify-content:center}
.icon-pick,.hue-pick{border:0;padding:0;margin:.4rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem}
.icon-pick legend,.hue-pick legend{font-size:.86rem;font-weight:600;color:var(--ink2);margin-bottom:.4rem;width:100%}
.icon-opt,.hue-opt{position:relative;cursor:pointer;margin:0!important}
.icon-opt input,.hue-opt input{position:absolute;opacity:0;pointer-events:none}
.icon-opt span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--edge2);background:var(--glass);color:var(--ink2)}
.icon-opt input:checked+span{border-color:var(--royal);color:var(--royal2);background:rgba(171,71,188,.14)}
.icon-opt input:focus-visible+span,.hue-opt input:focus-visible+span{outline:2px solid var(--royal2);outline-offset:2px}
.hue-opt span{display:block;width:28px;height:28px;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 3px var(--bg)}
.hue-opt input:checked+span{border-color:var(--ink)}

/* auth, legal, support pages */
.auth{min-height:calc(100vh - 70px);display:grid;place-items:center;padding:3rem 0}
.auth-card{width:min(440px,100% - 40px);padding:2.4rem 2.2rem}
.auth-card .h2{margin:1rem 0 .4rem;font-size:1.8rem}
.auth-card>.muted{margin-bottom:1.4rem}
.auth-card .center{margin-top:1.2rem}
.reg-ticks{margin-top:1.2rem;font-size:.86rem}
.ficon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:15px;color:#fff;background:linear-gradient(135deg,var(--royal),var(--ion));box-shadow:0 12px 28px -10px rgba(171,71,188,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.6rem}
.crumbs a{padding:.35rem .8rem;border-radius:999px;border:1px solid var(--edge);color:var(--ink2)}
.crumbs a.on,.crumbs a:hover{color:var(--ink);border-color:var(--royal);background:rgba(171,71,188,.1)}
.prose{margin-top:1.4rem;line-height:1.75}
.prose h2{font-size:1.15rem;margin:2rem 0 .6rem;letter-spacing:-.01em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1rem;margin:1.4rem 0 .5rem}
.prose p,.prose ul,.prose ol{margin-bottom:.9rem;color:var(--ink2)}
.prose ul{list-style:disc;padding-left:1.3rem}
.prose ol{list-style:decimal;padding-left:1.3rem}
.prose li{margin-bottom:.35rem}
.prose strong{color:var(--ink)}
.prose code{font-family:var(--m);font-size:.9em;padding:.1rem .35rem;border-radius:6px;background:var(--glass2)}
.table-wrap{overflow-x:auto;margin:1rem 0}
.facts{display:grid;padding:.4rem 1.4rem}
.facts>div{display:grid;grid-template-columns:220px 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--edge)}
.facts>div:last-child{border-bottom:0}
.facts dt{color:var(--ink2);font-size:.9rem}
.facts dd{margin:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.thread{display:grid;gap:.9rem;margin-bottom:1.4rem}
.msg{padding:1rem 1.1rem;border-radius:var(--rm);background:var(--glass2);border:1px solid var(--edge)}
.msg-staff{border-color:rgba(171,71,188,.4);background:rgba(171,71,188,.07)}
.msg-meta{font-size:.8rem;color:var(--ink3);margin-bottom:.4rem}
.msg-body{white-space:pre-wrap}
.key-box{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.7rem .9rem;border-radius:12px;background:var(--glass2);border:1px solid var(--edge2);word-break:break-all;margin:.6rem 0}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th{text-align:left;font-weight:600;color:var(--ink3);font-size:.8rem;padding:.6rem .5rem;border-bottom:1px solid var(--edge2)}
.table td{padding:.65rem .5rem;border-bottom:1px solid var(--edge);vertical-align:top}
.table .num{text-align:right}
.panel:has(.table){overflow-x:auto}

/* ============ the app ============ */
.app{background:var(--bg)}
.shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.rail{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:1rem;padding:1.4rem 1rem 1rem;border-right:1px solid var(--edge);background:color-mix(in srgb,var(--bg2) 80%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow-y:auto;scrollbar-width:thin}
.rail .brand{padding:0 .5rem}
.palette-btn{display:flex;align-items:center;gap:.55rem;width:100%;padding:.6rem .75rem;border-radius:12px;border:1px solid var(--edge2);background:var(--glass);color:var(--ink3);cursor:pointer;font-size:.88rem;text-align:left}
.palette-btn span{flex:1}
.palette-btn:hover{color:var(--ink);border-color:rgba(171,71,188,.45)}
kbd{font-family:var(--m);font-size:.72rem;padding:.1rem .4rem;border-radius:6px;border:1px solid var(--edge2);color:var(--ink3);background:var(--glass)}
.rail-nav{display:grid;gap:.12rem}
.rail-h{display:flex;align-items:center;justify-content:space-between;font-size:.76rem;font-weight:700;color:var(--ink3);padding:.9rem .7rem .3rem}
.rail-nav a{position:relative;display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-radius:11px;color:var(--ink2);font-weight:560;font-size:.93rem;transition:.18s}
.rail-nav a:hover{color:var(--ink);background:var(--glass2)}
.rail-nav a.on{color:var(--ink);background:linear-gradient(90deg,rgba(171,71,188,.22),rgba(171,71,188,.04));box-shadow:inset 2px 0 0 var(--royal)}
.rail-nav a.on>.i{color:var(--royal2)}
.rail-nav a.locked{color:var(--ink3);opacity:.72}
.rail-nav a.locked .lock{position:static;margin-left:auto;color:var(--gold);opacity:.75}
.rail-nav a.locked:hover{opacity:1}
.dot-count{display:inline-grid;place-items:center;min-width:1.3rem;height:1.3rem;padding:0 .35rem;border-radius:99px;background:var(--coral);color:#fff;font-size:.7rem;font-weight:750;margin-left:auto}
.rail-foot{margin-top:auto;display:grid;gap:.25rem;padding-top:1rem;border-top:1px solid var(--edge)}
.rail-foot .plan-pill{justify-self:start;margin:0 .4rem .4rem}
.rail-mini{display:flex;align-items:center;gap:.55rem;padding:.4rem .7rem;border-radius:10px;color:var(--ink2);font-size:.88rem}
.rail-mini:hover,.rail-mini.on{color:var(--ink);background:var(--glass2)}
.logout{display:flex;align-items:center;gap:.5rem;padding:.4rem .4rem 0 .7rem}
.who{flex:1;font-size:.82rem;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar{display:none}
.main{padding:1.2rem clamp(1rem,3vw,2.6rem) 4rem;min-width:0}
.topline{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.6rem}
.hello{color:var(--ink3);font-size:.9rem}
.topline-tools{display:flex;align-items:center;gap:.5rem}
.on-hide{display:none}
.blur .on-show{display:none}
.blur .on-hide{display:inline-block}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin:.6rem 0 1.5rem;flex-wrap:wrap}
.page-head .muted{margin-top:.3rem}
.head-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.crumb{font-size:.86rem;margin-bottom:.4rem}
.crumb a{display:inline-flex;align-items:center;gap:.25rem;color:var(--ink3)}
.crumb a:hover{color:var(--ink)}
.hero-amt{font-family:var(--fd);font-size:clamp(1.9rem,4vw,2.8rem);font-weight:820;letter-spacing:-.04em}
.hero-amt.pos{color:var(--ok)}
.app-foot{margin-top:3rem;color:var(--ink3)}
.app-foot a{color:var(--ink2)}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;align-items:start;margin-bottom:1.1rem}
.stack{display:grid;gap:1.1rem;align-content:start}
.big-num{font-family:var(--fd);font-size:clamp(2rem,4.4vw,3rem);font-weight:820;letter-spacing:-.045em;line-height:1.08;margin:.2rem 0}
.mini-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.8rem;margin:1rem 0}
.mini-stats.two-col{grid-template-columns:1fr 1fr}
.mini-stats.four{grid-template-columns:repeat(4,1fr)}
.mini-stats div{display:grid;gap:.1rem;padding:.7rem .85rem;border-radius:var(--rm);background:var(--glass2)}
.mini-stats dt{font-size:.78rem;color:var(--ink3)}
.mini-stats dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.plain-list{display:grid}
.plain-list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--edge);flex-wrap:wrap}
.plain-list li:last-child{border-bottom:0}

/* privacy blur: amounts hide until hovered or focused */
.blur .amt,.blur .big-num,.blur .hero-amt,.blur .dial-in b{filter:blur(7px);transition:filter .25s}
.blur .amt:hover,.blur .big-num:hover,.blur .hero-amt:hover{filter:none}

/* overview */
.ov-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.1rem;align-items:start}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-7{grid-column:span 7}.span-6{grid-column:span 6}.span-5{grid-column:span 5}.span-4{grid-column:span 4}
.dial-panel{display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center;background:radial-gradient(90% 120% at 0% 0%,rgba(171,71,188,.2),transparent 55%),var(--glass);border-radius:var(--rx)}
.dial{position:relative;width:220px;height:220px}
.dial svg{width:100%;height:100%;overflow:visible}
.dial-track,.ring-track{fill:none;stroke:var(--glass3);stroke-width:10}
.dial-fill,.ring-fill{fill:none;stroke:url(#dialGrad);stroke-width:10;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(171,71,188,.6));animation:draw 1.6s var(--ease) both}
.hero-fill{stroke:url(#heroGrad);animation:heroFill 9s var(--ease) infinite}
@keyframes draw{from{stroke-dasharray:0 330}}
@keyframes heroFill{0%{stroke-dasharray:40 327}35%,80%{stroke-dasharray:228.7 327}100%{stroke-dasharray:40 327}}
.ring-fill{stroke:var(--royal2)}
.dial-orbit{transform-origin:70px 70px;animation:spin 18s linear infinite;fill:var(--royal2)}
.dial-orbit circle:nth-child(2){fill:var(--ion)}
.dial-orbit circle:nth-child(3){fill:var(--gold)}
.dial-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:.1rem}
.dial-in small{font-size:.74rem;color:var(--ink3)}
.dial-in b{font-family:var(--fd);font-size:2rem;font-weight:840;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.scr-dial .dial-in b{font-size:1.5rem;color:#fff}
.scr-dial .dial-in small{color:#a39cb8;font-size:.66rem}
.dial-side .h3{margin-top:0}
.decree{display:inline-flex;align-items:center;gap:.45rem;margin-top:.6rem;padding:.4rem .8rem;border-radius:999px;color:var(--gold);background:rgba(242,194,91,.1);border:1px solid rgba(242,194,91,.35);font-size:.86rem;font-weight:650}
.spark{width:100%;height:56px;margin:.4rem 0}
.spark.tall{height:70px}
.spark path{fill:none;stroke:var(--royal2);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.notes{display:flex;flex-wrap:wrap;gap:.6rem}
.note-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .9rem;border-radius:var(--rm);background:var(--glass);border:1px solid var(--edge);font-size:.88rem;color:var(--ink)}
.tone-good{border-color:rgba(67,224,183,.35)}.tone-good .i{color:var(--mint)}
.tone-warn{border-color:rgba(242,194,91,.4)}.tone-warn .i{color:var(--gold)}
.tone-info .i{color:var(--sky)}
.bill-list,.bill-rows{display:grid}
.bill-list li,.bill-rows li{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:.7rem 0;border-bottom:1px solid var(--edge)}
.bill-rows li{grid-template-columns:auto 1fr auto auto}
.bill-list li:last-child,.bill-rows li:last-child{border-bottom:0}
.bill-date{display:grid;justify-items:center;width:52px;padding:.35rem 0;border-radius:12px;background:var(--glass2);line-height:1.1}
.bill-date b{font-size:1.15rem;font-variant-numeric:tabular-nums}
.bill-date small{font-size:.66rem;color:var(--ink3)}
.bill-main{display:grid;min-width:0}
.bill-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bill-main small{color:var(--ink3);font-size:.8rem}
.bill-amt{display:grid;text-align:right}
.bill-amt small{color:var(--ink3);font-size:.76rem}
.bill-acts{display:flex;gap:.35rem}
.bill-rows li.st-cancelled,.bill-rows li.st-ignored{opacity:.55}
.goal-mini{display:grid;gap:.6rem}
.goal-mini li{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center}
.ring-sm{width:46px;height:46px}
.ring-sm .ring-track,.ring-sm .ring-fill{stroke-width:12}
.goal-mini-main{display:grid;min-width:0}
.goal-mini-main small{color:var(--ink3)}
.goal-pct{font-weight:750;font-variant-numeric:tabular-nums}
.vow-mini{display:grid;gap:.9rem}
.vow-mini li{display:grid;gap:.35rem}
.vow-mini small{color:var(--ink3)}
.state-near .meter i,.vow.state-near .meter i{background:linear-gradient(90deg,var(--gold),#ffcf6e)}
.state-broken .meter i,.vow.state-broken .meter i{background:linear-gradient(90deg,var(--coral),#ff9aa9)}
.owed{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.quick-strip{margin-top:1.1rem}
.quick{display:flex;align-items:center;gap:.6rem;padding:.5rem .5rem .5rem 1rem;border-radius:999px;background:var(--glass);border:1px solid var(--edge2)}
.quick>.i{color:var(--royal2)}
.quick input{border:0;background:none;padding:.5rem 0;box-shadow:none!important}
.quick select{width:auto;max-width:13rem;border-radius:999px;padding:.45rem 2.2rem .45rem .8rem;font-size:.86rem}
.quick-strip>p{margin:.5rem 1rem 0}
.welcome{display:grid;gap:2rem;padding:1.5rem 0 1rem}
.welcome-copy{max-width:40rem}
.w-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.w-step{display:flex;gap:1rem;padding:1.4rem;border-radius:var(--rl);background:var(--glass);border:1px solid var(--edge)}
.w-step>div{display:grid;gap:.5rem;justify-items:start}
.w-n{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--royal),var(--ion));color:#fff;font-weight:800}

/* transactions */
.tx-list{display:grid}
.tx{display:grid;grid-template-columns:auto 1fr auto;gap:.85rem;align-items:center;padding:.7rem .5rem;margin:0 -.5rem;border-radius:12px;color:var(--ink);transition:background .15s}
a.tx:hover{background:var(--glass2);color:var(--ink)}
.tx.pending{opacity:.7}
.tx.excluded .tx-amt{text-decoration:line-through;color:var(--ink3)}
.tx-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;flex:none;color:var(--hue,var(--ink3));background:color-mix(in srgb,var(--hue,var(--ink3)) 14%,transparent);border:1px solid color-mix(in srgb,var(--hue,var(--ink3)) 30%,transparent)}
.tx-ic.sm{width:30px;height:30px;border-radius:10px}
.tx-main{display:grid;min-width:0}
.tx-main b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-main small{color:var(--ink3);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-amt{text-align:right;font-weight:680;font-variant-numeric:tabular-nums;white-space:nowrap}
.tx-amt.pos{color:var(--ok)}
.day-h{font-size:.8rem;font-weight:700;color:var(--ink3);padding:1rem 0 .3rem;border-bottom:1px solid var(--edge);margin-bottom:.2rem}
.day-h:first-child{padding-top:0}
.tx-panel{padding-top:1.1rem}
.tx-triage{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center}
.triage-form{display:flex;gap:.4rem}
.triage-form select{padding:.45rem 2.2rem .45rem .7rem;font-size:.86rem;width:12rem}
.js [data-autosubmit] button{display:none}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.8rem}
.filters select{width:auto;flex:1;min-width:9rem;padding:.55rem 2.2rem .55rem .8rem;font-size:.88rem}
.f-search{position:relative;flex:2;min-width:12rem;display:flex;align-items:center}
.f-search .i{position:absolute;left:.8rem;color:var(--ink3)}
.f-search input{padding:.55rem .8rem .55rem 2.3rem;font-size:.9rem}
.tag-cloud{display:flex;flex-wrap:wrap;gap:.2rem;margin-bottom:.8rem}
.add-panel{margin-bottom:1.1rem}
.add-panel summary,details>summary.h4{cursor:pointer;list-style:none}
.add-panel summary::-webkit-details-marker,details>summary.h4::-webkit-details-marker{display:none}
.add-panel[open] summary{margin-bottom:1rem}
.pager{display:flex;justify-content:space-between;margin-top:1rem}
.parts{display:grid;gap:.4rem;margin-bottom:.8rem}
.parts li{display:flex;align-items:center;gap:.5rem}
.parts b{margin-left:auto}
.split-form{margin-top:.8rem}
.split-row{display:grid;grid-template-columns:1.4fr 1fr;gap:.5rem}
.memo{margin-top:1rem;padding:.8rem;border-radius:12px;background:var(--glass2);word-break:break-word}

/* accounts */
.worth-chip{display:grid;text-align:right}
.worth-chip small{color:var(--ink3)}
.worth-chip b{font-family:var(--fd);font-size:1.6rem;font-weight:800;letter-spacing:-.03em}
.acct-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-bottom:1.1rem}
.acct{position:relative;display:grid;gap:.25rem;align-content:start;padding:1.2rem;border-radius:var(--rl);background:var(--glass);border:1px solid var(--edge);color:var(--ink);overflow:hidden;transition:transform .3s var(--ease),border-color .3s}
.acct::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(171,71,188,.18),transparent 70%)}
.acct:hover{transform:translateY(-3px);border-color:rgba(171,71,188,.45);color:var(--ink)}
.acct-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.acct-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--glass2);color:var(--royal2)}
.kind-savings .acct-ic{color:var(--mint)}.kind-credit .acct-ic,.kind-loan .acct-ic{color:var(--coral)}.kind-investment .acct-ic{color:var(--gold)}
.acct-name{font-size:1.02rem}
.acct-bal{font-family:var(--fd);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;margin-top:.4rem}
.acct-add{border-style:dashed;place-content:center;justify-items:center;text-align:center;color:var(--ink2);min-height:150px}
.acct-add>.i{width:30px;height:30px;color:var(--royal2)}
.links-list{display:grid;gap:.8rem;margin-top:1rem}
.links-list li{display:grid;gap:.6rem;padding:.9rem;border-radius:var(--rm);background:var(--glass2)}
.links-list li>div{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.links-list small{flex-basis:100%}

/* import */
.drop{gap:.8rem}
.drop-zone{display:grid!important;justify-items:center;gap:.4rem;padding:2.4rem 1rem;border-radius:var(--rl);border:1.5px dashed rgba(171,71,188,.45);background:radial-gradient(circle at 50% 0%,rgba(171,71,188,.1),transparent 70%);text-align:center;cursor:pointer;color:var(--ink)!important;margin:0!important;transition:.2s}
.drop-zone>.i{width:40px;height:40px;color:var(--royal2);animation:bob 4s ease-in-out infinite}
.drop-zone.over{border-color:var(--royal2);background:rgba(171,71,188,.12)}
.drop-name{font-weight:650;color:var(--royal2)}
.js .drop-input{position:absolute;width:1px;height:1px;opacity:0}
.how-list{list-style:decimal;padding-left:1.2rem;display:grid;gap:.5rem;color:var(--ink2);margin-bottom:1rem}
.import-preview .preview{margin:1rem 0;padding:.3rem .8rem;border-radius:var(--rm);background:var(--glass2)}
.tx.static{margin:0}
.mapping{margin:1rem 0;padding:1rem;border-radius:var(--rm);border:1px solid var(--edge2)}
.mapping summary{cursor:pointer;list-style:none}
.mapping[open] summary{margin-bottom:.6rem}
.raw-wrap{overflow-x:auto;margin:.8rem 0}
.raw th,.raw td{white-space:nowrap;font-size:.8rem}
.commit-form{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--edge)}

/* budget */
.period-nav{display:flex;align-items:center;gap:.6rem}
.period-nav span{display:grid;text-align:center;min-width:12rem}
.period-nav small{color:var(--ink3);font-size:.78rem}
.budget-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge);border-radius:var(--rx);overflow:hidden;margin-bottom:.8rem}
.bs-cell{display:grid;gap:.15rem;padding:1.1rem 1.2rem;background:var(--bg)}
.bs-cell small{color:var(--ink3);font-size:.8rem}
.bs-cell b{font-family:var(--fd);font-size:1.45rem;font-weight:800;letter-spacing:-.03em}
.bs-key{background:radial-gradient(120% 140% at 0% 0%,rgba(171,71,188,.2),transparent 60%),var(--bg)}
.bs-cell.neg b{color:var(--bad)}
.budget-group{margin-top:1.1rem}
.brows{display:grid}
.brow{display:grid;grid-template-columns:minmax(10rem,1.1fr) 2fr minmax(9rem,auto);gap:1rem;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--edge)}
.brow:last-child{border-bottom:0}
.brow-name{display:flex;align-items:center;gap:.6rem;color:var(--ink);min-width:0}
.brow-name>span:last-child{display:grid;min-width:0}
.brow-name b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow-name small{font-size:.76rem}
.brow-bar .meter{height:10px;overflow:visible}
.brow-bar .meter i{border-radius:99px}
.brow-num{display:grid;text-align:right}
.brow-num small{color:var(--ink3);font-size:.76rem}
.brow.over .meter i{background:linear-gradient(90deg,var(--coral),#ff9aa9)}
.brow.over .brow-num b{color:var(--bad)}
.brow.fast .meter i{background:linear-gradient(90deg,var(--gold),#ffd27a)}
.brow.nobudget .meter i{background:var(--ink3);opacity:.5}
.budget-form{gap:1rem}
.bf-group{border:1px solid var(--edge);border-radius:var(--rm);padding:.8rem 1rem;margin:0}
.bf-group legend{font-weight:700;color:var(--ink2);padding:0 .4rem}
.bf-row{display:grid;grid-template-columns:1fr 9rem auto;gap:.8rem;align-items:center;padding:.3rem 0}
.bf-label{display:flex!important;align-items:center;gap:.5rem;margin:0!important;color:var(--ink)!important;font-weight:550!important}
.bf-input{padding:.5rem .7rem;text-align:right;font-variant-numeric:tabular-nums}
.bf-roll{font-size:.8rem!important;color:var(--ink2)!important}

/* goals */
.goal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:1.1rem;align-items:start}
.goal{display:grid;gap:.5rem;justify-items:center;text-align:center;border-radius:var(--rx)}
.goal-ring{position:relative;width:132px;height:132px}
.goal-ring svg{width:100%;height:100%}
.goal-ic{position:absolute;inset:0;display:grid;place-items:center;color:var(--royal2)}
.goal-ic .i{width:30px;height:30px}
.goal.achieved{border-color:rgba(242,194,91,.5);background:radial-gradient(100% 70% at 50% 0%,rgba(242,194,91,.14),transparent 60%),var(--glass)}
.goal.achieved .ring-fill{stroke:var(--gold);filter:drop-shadow(0 0 8px rgba(242,194,91,.7))}
.goal.achieved .goal-ic{color:var(--gold)}
.goal-num b{font-size:1.25rem}
.goal-num small{color:var(--ink3)}
.goal-move{display:flex;gap:.4rem;width:100%;flex-wrap:wrap;justify-content:center}
.goal-move input{width:7rem;flex:1;padding:.5rem .7rem}
.goal-edit{width:100%;text-align:left}
.goal-edit summary{cursor:pointer;color:var(--ink3);text-align:center}
.goal-new{justify-items:stretch;text-align:left}

/* bills radar */
.strip{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;margin:.4rem 0 .8rem}
.strip-day{display:grid;justify-items:center;align-content:start;gap:3px;min-height:58px;padding:.35rem 0;border-radius:8px;background:var(--glass2)}
.strip-day small{font-size:.66rem;color:var(--ink3);font-variant-numeric:tabular-nums}
.strip-day.we{background:var(--glass)}
.strip-day.has{background:rgba(171,71,188,.12);box-shadow:inset 0 0 0 1px rgba(171,71,188,.3)}
.strip-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--royal2);flex:none}
.strip-dot.k-bill{background:var(--sky)}
.strip-dot.k-income{background:var(--mint)}

/* vows */
.vow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;margin-bottom:1rem;align-items:start}
.vow{display:grid;gap:.4rem;border-radius:var(--rx)}
.vow-head{display:flex;gap:.8rem;align-items:center}
.vow-head>div{flex:1;min-width:0}
.vow-head .h4{margin:0}
.vow-flame{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,159,90,.12);color:#ff9f5a}
.vow.state-ok .vow-flame .i,.vow.state-done .vow-flame .i{animation:flicker 2.4s ease-in-out infinite}
@keyframes flicker{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.08) rotate(-3deg)}60%{transform:scale(.96) rotate(2deg)}}
.vow.state-broken .vow-flame{color:var(--ink3);background:var(--glass2)}
.vow.state-done{border-color:rgba(67,224,183,.4)}
.vow-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:.6rem 0}
.vow-days li{display:grid;place-items:center;aspect-ratio:1;border-radius:9px;font-size:.74rem;font-variant-numeric:tabular-nums;background:var(--glass2);color:var(--ink3)}
.vow-days li.kept{background:rgba(67,224,183,.14);color:var(--mint);box-shadow:inset 0 0 0 1px rgba(67,224,183,.3)}
.vow-days li.spent{background:rgba(255,111,134,.08);color:var(--coral)}
.streak{display:flex;align-items:center;gap:.4rem;color:#ff9f5a;font-weight:650;font-size:.9rem}
.vow-new [data-vow]{display:grid;gap:.5rem}

/* shared costs */
.people{display:grid;gap:.6rem}
.person-row{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:start;padding:.9rem;border-radius:var(--rm);background:var(--glass2)}
.avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--royal),var(--ion))}
.avatar.sm{width:38px;height:38px;border-radius:12px}
.avatar[data-hue="1"]{background:linear-gradient(135deg,#ff7a8a,#ff9f5a)}.avatar[data-hue="2"]{background:linear-gradient(135deg,#2fc6c6,#44d7a8)}.avatar[data-hue="3"]{background:linear-gradient(135deg,#f2c25b,#ff9f5a)}.avatar[data-hue="4"]{background:linear-gradient(135deg,#5cc3ff,#8b7bff)}.avatar[data-hue="5"]{background:linear-gradient(135deg,#ff6fc1,#b65ddb)}
.person-main{display:grid;gap:.25rem;min-width:0}
.iou-items{display:grid;gap:.1rem}
.share-msg{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-radius:10px;background:var(--glass);font-size:.84rem;color:var(--ink2);margin-top:.3rem}
.share-msg span{flex:1}

/* afford */
.afford-input{font-family:var(--fd);font-size:2rem!important;font-weight:800;letter-spacing:-.03em;padding:.6rem .9rem}
.verdict{display:grid;gap:.5rem;border-radius:var(--rx)}
.verdict-word{font-family:var(--fd);font-size:clamp(2rem,4vw,2.8rem);font-weight:850;letter-spacing:-.045em;line-height:1}
.v-yes .verdict-word,.verdict-word.v-yes{color:var(--mint)}
.v-tight .verdict-word,.verdict-word.v-tight{color:var(--gold)}
.v-no .verdict-word,.verdict-word.v-no{color:var(--coral)}
.verdict.v-yes{border-color:rgba(67,224,183,.4)}.verdict.v-tight{border-color:rgba(242,194,91,.45)}.verdict.v-no{border-color:rgba(255,111,134,.45)}
.afford-empty{display:grid;place-items:center;gap:.6rem;text-align:center;min-height:220px;color:var(--ink3)}
.afford-empty>.i{width:44px;height:44px;color:var(--royal2);animation:tilt 4s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* insights */
.legend{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink3)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px}
.lg-in{background:var(--mint)}.lg-out{background:var(--royal2)}
.bars{width:100%;height:auto}
.b-in{fill:var(--mint);opacity:.75}.b-out{fill:var(--royal2);opacity:.8}
.bar-g.now .b-in,.bar-g.now .b-out{opacity:1}
.bars text{fill:var(--ink3);font-size:11px;font-family:var(--f)}
.bars .axis{stroke:var(--edge2)}
.cat-bars{display:grid;gap:.75rem}
.cat-bars li{display:grid;grid-template-columns:minmax(9rem,1fr) 2fr auto;gap:.8rem;align-items:center}
.cb-name{display:flex;align-items:center;gap:.5rem;color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cb-num{display:grid;text-align:right;font-size:.92rem}
.cb-num small{font-size:.76rem}
.rank{display:grid;counter-reset:r}
.rank li{display:grid;grid-template-columns:auto 1fr auto auto;gap:.6rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--edge);counter-increment:r}
.rank li::before{content:counter(r);display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--glass2);font-size:.75rem;color:var(--ink3)}
.rank li:last-child{border-bottom:0}
.rank span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:4px}
.heat li{display:grid;place-items:end start;aspect-ratio:1;padding:4px 5px;border-radius:9px;background:var(--glass2)}
.heat small{font-size:.62rem;color:var(--ink3)}
.heat .h1{background:rgba(171,71,188,.18)}.heat .h2{background:rgba(171,71,188,.34)}.heat .h3{background:rgba(171,71,188,.55)}.heat .h4{background:rgba(171,71,188,.8)}
.heat .h3 small,.heat .h4 small{color:#fff}
.chron-cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.1rem;border-color:rgba(242,194,91,.35)}
.chron-cta>.i{width:34px;height:34px;color:var(--gold)}
.chron-cta>div{flex:1;min-width:14rem}

/* the Royal Chronicle */
.year-nav{display:flex;gap:.4rem;flex-wrap:wrap}
.chronicle{display:grid;gap:1.4rem}
.chron-title{text-align:center;padding:2.4rem 1rem;border-radius:36px;background:radial-gradient(70% 100% at 50% 0%,rgba(242,194,91,.2),transparent 60%),var(--glass);border:1px solid rgba(242,194,91,.35)}
.chron-title .kicker{color:var(--gold);justify-content:center}
.chron-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.chron-card{display:grid;gap:.25rem;padding:1.3rem;border-radius:var(--rl);background:var(--glass);border:1px solid var(--edge)}
.chron-card.wide{grid-column:span 1}
.chron-card small{color:var(--ink3)}
.chron-card b{font-family:var(--fd);font-size:1.6rem;font-weight:800;letter-spacing:-.03em;overflow:hidden;text-overflow:ellipsis}

/* rules, categories */
.rule-list{display:grid;gap:.6rem}
.rule-list li{display:flex;gap:1rem;justify-content:space-between;align-items:flex-start;padding:.9rem;border-radius:var(--rm);background:var(--glass2)}
.rule-list p+p{margin-top:.3rem;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.cat-list{display:grid;gap:.3rem}
.cat-list li{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--edge)}
.cat-list li:last-child{border-bottom:0}
.cat-list li.archived{opacity:.5}
.cat-edit{display:contents}
.cat-edit[open]>form{grid-column:1/-1;padding:.6rem 0 .8rem}
.cat-edit summary{cursor:pointer}

/* plan page and locked items */
.connect-panel .soon-line{margin-bottom:.5rem}
.soon-panel{display:grid;justify-items:center;text-align:center;gap:.8rem;padding:2.6rem 1.4rem}
.soon-panel>.i{width:40px;height:40px;color:var(--gold)}
.provider .ticks{margin:1rem 0}
.notify-panel .form{margin-top:.8rem}

/* mobile app bar, tab bar, more sheet */
.tabbar{display:none}

/* command palette */
.palette{width:min(640px,100% - 24px);max-height:min(560px,90vh);margin:10vh auto auto;padding:0;border:1px solid var(--edge2);border-radius:22px;background:var(--bg2);color:var(--ink);box-shadow:0 40px 120px -20px rgba(0,0,0,.8),0 0 0 1px rgba(171,71,188,.2);overflow:hidden}
.palette[open]{display:flex;flex-direction:column;animation:pop .2s var(--ease)}
.palette::backdrop{background:rgba(5,4,10,.6);backdrop-filter:blur(6px)}
.palette-in{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--edge)}
.palette-in>.i{color:var(--royal2)}
.palette-in input{border:0;background:none;padding:.3rem 0;font-size:1.05rem;box-shadow:none!important}
.palette-add{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--edge);background:rgba(171,71,188,.08)}
.palette-add[hidden]{display:none}
.palette-add p{flex:1;min-width:12rem;font-weight:650}
.palette-acc{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink2)}
.palette-acc select{width:auto;padding:.4rem 2.2rem .4rem .7rem;font-size:.85rem}
.palette-list{overflow-y:auto;padding:.4rem}
.palette-list a{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-radius:11px;color:var(--ink)}
.palette-list a:hover,.palette-list a.sel{background:var(--glass2)}
.palette-list a.sel{box-shadow:inset 2px 0 0 var(--royal)}
.palette-list li[hidden]{display:none}
.palette-foot,.palette-hint{padding:.6rem 1.1rem;border-top:1px solid var(--edge);color:var(--ink3)}
.palette-secret{padding:.8rem 1.1rem;color:var(--gold);font-weight:700;display:flex;align-items:center;gap:.5rem}
.palette-secret[hidden]{display:none}

/* staff console */
.admin-top{display:flex;align-items:center;gap:1rem;padding:1rem clamp(1rem,3vw,2.6rem);border-bottom:1px solid var(--edge)}
.admin-top .logout{margin-left:auto;padding:0}
.admin-main{padding:1.2rem clamp(1rem,3vw,2.6rem) 4rem}
.admin-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.1rem}
.kpis.three{grid-template-columns:repeat(3,1fr)}
.kpi{display:grid;gap:.2rem}
.kpi small{color:var(--ink2)}
.kpi b{font-size:1.7rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;align-items:start}
.span-2{grid-column:span 2}
.topup{display:grid;grid-template-columns:auto 1fr auto auto;gap:1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--edge)}
.topup-main{display:grid;gap:.15rem;min-width:0}
.topup-main small{color:var(--ink3);font-size:.8rem}
.mini-log{display:grid;max-height:420px;overflow:auto}
.mini-log li{padding:.5rem 0;border-bottom:1px solid var(--edge);font-size:.85rem;display:grid}
.mini-log small{color:var(--ink3)}
.seo-serp{padding:1rem;border-radius:12px;background:#fff;color:#202124}

/* reveal: one orchestrated entrance per element, nothing hidden without script */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* crown rain (easter egg) */
.crown-rain{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden}
.crown-rain span{position:absolute;top:-40px;color:var(--gold);text-shadow:0 0 12px rgba(242,194,91,.8);animation:rain 3.2s cubic-bezier(.3,.1,.7,1) forwards}
@keyframes rain{to{transform:translateY(110vh) rotate(540deg);opacity:.2}}

/* print: the monthly report */
@media print{
	.rail,.appbar,.tabbar,.topline,.no-print,.app-foot,.palette,.space,.flashes{display:none!important}
	.shell{display:block}
	body,.app{background:#fff;color:#000}
	.panel{border:0;background:none;padding:0}
	.blur .amt{filter:none}
}

@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
	.js .rv{opacity:1;transform:none}
	.steps::after{transform:none}
}

/* responsive */
@media (max-width:1100px){
	.hero-r-grid{grid-template-columns:1fr}
	.device-wrap{height:560px}
	.smalls{grid-template-columns:repeat(3,1fr)}
	.sec-list{grid-template-columns:repeat(2,1fr)}
	.span-8,.span-7,.span-6,.span-5,.span-4{grid-column:span 12}
	.kpis{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
	.menu-btn{display:inline-flex;margin-left:auto}
	.links{position:absolute;left:12px;right:12px;top:78px;flex-direction:column;align-items:stretch;gap:.2rem;padding:.7rem;border-radius:18px;background:var(--bg2);border:1px solid var(--edge2);box-shadow:var(--shadow);display:none}
	.nav.open .links{display:flex;animation:pop .25s var(--ease)}
	.links>a:not(.btn){padding:.8rem 1rem}
	.links .btn{margin:.4rem 0 0}
	.lang{order:2}
	.feat,.feat.flip{grid-template-columns:1fr}
	.feat.flip .feat-copy{order:0}
	.tiers,.bank-band,.bank-hero,.foot-grid,.split,.cols,.locked-page,.w-steps,.give-steps,.public-causes,.roadmap{grid-template-columns:1fr}
	.foot-grid{gap:2.2rem}
	.facts>div{grid-template-columns:1fr;gap:.2rem}
	.chron-grid{grid-template-columns:1fr 1fr}
	.dial-panel{grid-template-columns:1fr;justify-items:center;text-align:center}
	.dial-side .mini-stats{text-align:left}

	.shell{grid-template-columns:1fr}
	.rail{display:none}
	.appbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--edge)}
	.appbar .brand{margin-right:auto}
	.appbar .brand img{height:26px}
	.topline-tools{display:none}
	.main{padding-bottom:7rem}
	.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:.4rem .4rem calc(.45rem + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg2) 92%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--edge)}
	.tabbar a,.tabbar summary{display:grid;justify-items:center;gap:.15rem;padding:.4rem;border-radius:12px;color:var(--ink3);font-size:.68rem;list-style:none;cursor:pointer}
	.tabbar summary::-webkit-details-marker{display:none}
	.tabbar a.on,.tabbar .more.on>summary{color:var(--royal2)}
	.fab{justify-self:center;display:grid;place-items:center;width:54px;height:54px;margin-bottom:.25rem;border-radius:18px;border:0;color:#fff;background:linear-gradient(135deg,#c35bd6,var(--royal) 45%,#6f55e8);box-shadow:0 14px 30px -10px rgba(171,71,188,.9);cursor:pointer}
	.more{position:relative}
	.more-sheet{position:fixed;left:10px;right:10px;bottom:calc(74px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:.3rem;padding:.6rem;border-radius:20px;background:var(--bg2);border:1px solid var(--edge2);box-shadow:var(--shadow);max-height:65vh;overflow-y:auto;animation:pop .2s var(--ease)}
	.more-sheet a{display:flex;align-items:center;gap:.55rem;padding:.7rem .75rem;border-radius:12px;color:var(--ink);font-size:.9rem}
	.more-sheet a:hover{background:var(--glass2)}
	.more-sheet a.locked{color:var(--gold)}
	.brow{grid-template-columns:1fr auto;row-gap:.45rem}
	.brow-bar{grid-column:1/-1;grid-row:2}
	.bill-rows li{grid-template-columns:auto 1fr auto}
	.bill-acts{grid-column:2/-1;justify-content:flex-end}
	.strip{grid-template-columns:repeat(15,minmax(0,1fr))}
	.mini-stats.four{grid-template-columns:1fr 1fr}
	.cat-bars li{grid-template-columns:1fr auto}
	.cat-bars .meter{grid-column:1/-1;grid-row:2}
	.tx-triage{grid-template-columns:1fr}
	.triage-form select{width:100%}
	.quick{flex-wrap:wrap;border-radius:20px;padding:.6rem}
	.quick input{flex-basis:calc(100% - 2rem)}
	.quick select{flex:1;max-width:none}
}
@media (max-width:560px){
	.wrap,.narrow,.narrow-l{width:calc(100% - 32px)}
	.mega{font-size:clamp(2.7rem,13vw,4rem)}
	.device-wrap{height:520px;transform:scale(.9)}
	.o1{width:380px;height:380px}.o2{width:300px;height:300px}
	.float-chip{font-size:.76rem;max-width:180px}
	.c1{left:-4%}.c2{right:-6%}
	.smalls,.sec-list,.chron-grid,.bank-tiles{grid-template-columns:1fr 1fr}
	.form-grid,.two,.split-row{grid-template-columns:1fr}
	.bf-row{grid-template-columns:1fr 7rem}
	.bf-roll{grid-column:1/-1}
	.radar-demo{flex-direction:column}
	.demo-budget li{grid-template-columns:auto 1fr auto}
	.demo-budget .meter{grid-column:1/-1;grid-row:2}
	.giving-band,.giving-hero{grid-template-columns:1fr;justify-items:center;text-align:center}
	.auth-card{padding:2rem 1.4rem}
	.period-nav span{min-width:0}
	.kpis{grid-template-columns:1fr 1fr}
	.dash-grid{grid-template-columns:1fr}
	.span-2{grid-column:auto}
}

/* Error pages on getroyalpay.com */
.royal-error .auth{min-height:100vh}
.royal-error .error-card{text-align:center;display:grid;gap:1rem;justify-items:center;max-width:460px}
.royal-error .brand img{height:32px;width:auto}
.err-crown{font-size:3.4rem;line-height:1;color:var(--royal);animation:errfloat 4.8s ease-in-out infinite;text-shadow:0 10px 30px color-mix(in srgb,var(--royal) 45%,transparent)}
@keyframes errfloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.err-crown{animation:none}}