:root {
  color-scheme: light;
  --ink: #24243a;
  --muted: #5c5670;
  --brand: #7048d8;
  --lavender: #d9c9ff;
  --mint: #23aa91;
  --paper: #faf8ff;
  --line: #e6def3;
  font: 16px/1.6 system-ui, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.045em; }
h1 { font-size: clamp(2.5rem, 5.5vw, 5.6rem); font-weight: 750; }
h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
h3 { font-size: 1.4rem; }
p { overflow-wrap: anywhere; }
a { color: #5830b7; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid #6232c9; outline-offset: 4px; }
.wrap { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -10rem; z-index: 9; padding: .5rem 1rem; background: white; }
.skip:focus { top: 1rem; }
.site-head { background: #fff; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.header-inner { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 1.5rem; }
.wordmark { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.5rem; color: var(--ink); font-weight: 780; letter-spacing: -.06em; text-decoration: none; }
.desktop-nav, .languages, .footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem 1rem; }
nav a { display: inline-block; padding-block: .28rem; }
.desktop-nav > a, .languages a, .footer-links a { font-size: .91rem; color: var(--muted); text-decoration: none; }
a[aria-current="page"], nav a:hover { color: #552cb2; text-decoration: underline; }
.languages { gap: .25rem .85rem; }
.mobile-nav { display: none; }
summary { cursor: pointer; }
main { min-height: 42vh; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .83fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; padding-block: clamp(3.5rem, 8vw, 7.25rem); }
.hero h1 { margin-top: 1.1rem; }
.hero h1 em { color: var(--brand); font-style: normal; }
.eyebrow { font-size: .76rem; font-weight: 750; letter-spacing: .13em; color: #5b36a7; text-transform: uppercase; }
.eyebrow i { display: inline-block; width: .58rem; height: .58rem; background: var(--mint); border-radius: 50%; margin-right: .4rem; }
.lead { color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.28rem); max-width: 46ch; margin-top: 1.15rem; }
.actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.8rem; }
.button { display: inline-flex; align-items: center; min-height: 48px; padding: .65rem 1.14rem; border-radius: 999px; font-weight: 700; text-decoration: none; transition: background-color .18s; }
.primary { color: #fff; background: #6237c8; }
.primary:hover { background: #4e23ad; }
.secondary { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.secondary:hover { background: #eee6ff; }
.hero-art { position: relative; isolation: isolate; min-width: 0; border-radius: 2.4rem; padding: clamp(1rem, 5vw, 3.45rem) clamp(1rem, 4vw, 3.1rem) 1rem; overflow: hidden; background: radial-gradient(ellipse at 85% 5%, #e7fff5, transparent 50%), linear-gradient(145deg, #d9c9ff, #efe4ff); }
.orbit { position: absolute; inset: 5% -25% 10%; z-index: -1; transform: rotate(-24deg); border: 1px solid #fff; border-radius: 50%; box-shadow: 0 0 0 24px #ffffff39, 0 0 0 48px #ffffff29, 0 0 0 72px #ffffff22; }
.dashboard { background: white; border: 1px solid white; padding: clamp(.85rem, 2.3vw, 1.55rem); border-radius: 1.65rem; box-shadow: 0 18px 55px #4b268334; }
.dashboard-top, .goal-top, .goal-amount { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.dashboard-top b { font-size: 1.35rem; letter-spacing: -.07em; }
.dashboard-top span, .goal-top small, .goal-amount small { color: var(--muted); font-size: .78rem; }
.balance { background: #f2ebff; color: #33215e; padding: .8rem 1rem; border-radius: 1rem; margin-block: .9rem; }
.balance small { display: block; letter-spacing: .12em; font-size: .66rem; font-weight: 750; }
.balance strong { font-size: clamp(1.65rem, 3vw, 2.25rem); letter-spacing: -.06em; margin-right: .42rem; }
.balance span { font-size: .72rem; }
.chart-title, .activity { font-size: .78rem; font-weight: 750; }
.chart { display: block; width: 100%; height: auto; margin: .3rem 0 .6rem; }
.gridlines { stroke: #ece5f5; fill: none; }
.area { fill: #ede3ff; }
.line { fill: none; stroke: var(--brand); stroke-width: 3; }
.transaction { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; padding-block: .3rem; font-size: .8rem; }
.symbol { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; background: #f1e9ff; color: #5930b4; flex-shrink: 0; }
.transaction .symbol { width: 1.65rem; height: 1.65rem; border-radius: .48rem; }
.transaction svg { width: .9rem; height: .9rem; }
figcaption { margin-top: .8rem; text-align: center; color: #473364; font-size: .74rem; }
.section { padding-block: 2.5rem; }
.section h2, .page-intro h1, .document h1 { margin-top: .45rem; }
.feature-grid { margin-top: 1.7rem; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.feature-grid-all { grid-template-columns: repeat(4,minmax(0,1fr)); }
.feature { padding: clamp(1.1rem, 2.6vw, 1.7rem); border-radius: 1.4rem; border: 1px solid var(--line); background: #fff; }
.feature:nth-child(3n+2) .symbol, .goal-top .symbol { color: #146e5b; background: #dcf7ee; }
.feature-index { float: right; color: var(--muted); font-size: .74rem; }
.feature h2, .feature h3 { margin-top: 1.05rem; font-size: 1.4rem; }
.feature p, .bottom-grid p, .showcase p { color: var(--muted); margin-top: .65rem; }
.text-link { display: inline-block; font-weight: 720; margin-top: 1.05rem; }
.text-link::after { content: " ↗"; }
.showcase { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 2rem; padding: clamp(1.2rem, 5vw, 4rem); border-radius: 2rem; background: linear-gradient(125deg,#e9deff,#dff8ef); }
.goal-card { background: #fff; border-radius: 1.25rem; padding: 1.25rem; box-shadow: 0 14px 40px #4b268317; }
.goal-top { justify-content: start; }
.goal-top small, .goal-top strong { display: block; }
.goal-top b { margin-left: auto; }
progress { width: 100%; height: .65rem; margin-block: .8rem .2rem; accent-color: #5d36c3; }
.goal-amount { flex-wrap: wrap; font-size: .8rem; }
.bottom-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1rem; padding-bottom: 4rem; }
.bottom-grid > div { padding: clamp(1.1rem, 4vw, 2.25rem); background: #fff; border: 1px solid var(--line); border-radius: 1.5rem; }
.store { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .65rem; }
.store span { margin-left: auto; font-size: .82rem; color: #4b287f; background: #efe7fb; padding: .18rem .65rem; border-radius: 1rem; }
.page-intro, .document { padding-block: clamp(2.5rem, 7vw, 5.5rem); }
.page-intro p + .button { margin-top: 1rem; }
.document { max-width: 800px; }
.document h1 { font-size: clamp(2.25rem, 5vw, 4rem); overflow-wrap: anywhere; }
.document h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); }
.doc-section { padding-top: 1.35rem; margin-top: 1.35rem; border-top: 1px solid var(--line); }
.doc-section p, .document h1 + p, .faq p { margin-top: .65rem; }
.draft, .contact { padding: 1rem 1.15rem; border-radius: .85rem; background: #eee6fc; margin-block: 1rem; }
.faq { padding: 1rem 1.15rem; border: 1px solid var(--line); background: white; margin-top: .65rem; border-radius: .85rem; }
.faq summary { font-weight: 700; }
.related { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: 1.5rem; }
footer { background: #fff; border-top: 1px solid var(--line); }
address { font-style: normal; }
@media print {
  :root, body { background: #fff; color: #000; }
  .site-head, footer, .skip, .related, [data-account-form], #account-status { display: none !important; }
  .document { width: 100%; padding: 0; }
  .document h2 { break-after: avoid; }
  .document a { color: inherit; }
}
[data-account-form]:not([hidden]) { display: grid; gap: .65rem; max-width: 36rem; margin-block: 1rem; }
[data-account-form] label { font-weight: 650; }
[data-account-form] input:not([type="checkbox"]) { display: block; width: 100%; padding: .65rem; border: 1px solid #796c91; border-radius: .5rem; font: inherit; }
[data-account-form] button { cursor: pointer; font: inherit; font-weight: 700; border: 1px solid transparent; }
[data-account-form] [hidden] { display: none; }
#account-status { margin-top: .8rem; }
.footer-inner { display: grid; grid-template-columns: 1fr 1.5fr auto; gap: 1.3rem; padding-block: 2rem; align-items: start; }
.footer-inner p:not(.eyebrow) { color: var(--muted); font-size: .9rem; }
@media (max-width: 900px) {
  .feature-grid-all { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-inner { grid-template-columns: 1fr 1.5fr; }
}
@media (max-width: 740px) {
  .wrap { width: calc(100% - 32px); }
  .desktop-nav { display: none; }
  .mobile-nav { display: block; }
  .mobile-nav summary { padding: .55rem .8rem; border: 1px solid var(--line); border-radius: .7rem; font-weight: 700; }
  .mobile-panel { position: absolute; left: 0; right: 0; top: 100%; padding: 1rem; background: white; border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px #24243a12; }
  .mobile-panel nav:first-child { display: grid; gap: .3rem; margin-bottom: .5rem; }
  .hero, .showcase, .bottom-grid { grid-template-columns: minmax(0,1fr); }
  .hero { padding-block: 2.6rem; }
  .hero-art { max-width: 510px; }
  .feature-grid:not(.feature-grid-all) { grid-template-columns: minmax(0,1fr); }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .feature-grid-all { grid-template-columns: minmax(0,1fr); }
  .section { padding-block: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}