:root {
  --ink: #1f2942;
  --muted: #6f7890;
  --cream: #fcfaf5;
  --paper: #ffffff;
  --line: #ecebe6;
  --navy: #24304d;
  --coral: #f27662;
  --coral-dark: #dc5f4d;
  --mint: #dff4e9;
  --lavender: #ebe6fb;
  --yellow: #ffedbb;
  --shadow: 0 14px 34px rgba(39, 48, 74, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: "DM Sans", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }

.privacy-body { background: linear-gradient(180deg, #f8f4ef 0%, #fcfaf5 100%); }
.privacy-shell { max-width: 980px; margin: 0 auto; padding: 32px 20px 72px; }
.privacy-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.privacy-article { background: white; border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow); }
.privacy-article h1 { font-family: Fraunces, Georgia, serif; font-size: clamp(34px, 5vw, 52px); letter-spacing: -.7px; margin: 0 0 24px; }
.privacy-article h2 { font-family: Fraunces, Georgia, serif; font-size: clamp(20px, 2.5vw, 28px); letter-spacing: -.5px; margin: 32px 0 12px; }
.privacy-article p, .privacy-article li { color: #4d586d; line-height: 1.7; font-size: 15px; }
.privacy-article ul { padding-left: 20px; }
.privacy-article strong { color: var(--ink); }
.privacy-article code { background: #f7f4ef; border-radius: 6px; padding: 2px 6px; color: #4d586d; font-family: "SFMono-Regular", Consolas, monospace; }
.privacy-footer { margin-top: 26px; color: #687287; font-size: 14px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0, 1fr); }
.sidebar { background: #fffefa; border-right: 1px solid var(--line); padding: 31px 18px 24px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.brand { color: var(--ink); display: flex; gap: 11px; text-decoration: none; align-items: center; margin: 0 10px 56px; font-size: 15px; line-height: 1.05; letter-spacing: -.2px; }
.brand b { font-weight: 700; }
.brand-mark { height: 35px; width: 35px; display: grid; place-items: center; border-radius: 12px 12px 12px 4px; background: var(--coral); color: white; font-family: Fraunces, serif; font-size: 22px; font-weight: 700; transform: rotate(-5deg); }
.sidebar nav { display: grid; gap: 6px; }
.nav-link { border-radius: 12px; color: #7b8191; padding: 12px 13px; font-size: 14px; text-decoration: none; font-weight: 600; transition: .2s; }
.nav-link:hover { color: var(--ink); background: #f7f4ed; }
.nav-link.active { background: #fff0eb; color: #dc634f; }
.nav-icon { font-size: 20px; width: 29px; vertical-align: -2px; display: inline-block; font-weight: 400; }
.sidebar-bottom { margin-top: auto; }
.sync-state { color: #738096; font-size: 11px; display: flex; align-items: center; gap: 7px; padding: 0 11px 20px; }
.sync-state span { height: 7px; width: 7px; border-radius: 50%; background: #69c898; box-shadow: 0 0 0 3px #e3f7ed; }
.profile { background: #f8f7f2; border: 0; border-radius: 13px; padding: 8px; width: 100%; display: flex; justify-content: space-between; align-items: center; color: #89909f; }
.profile span { color: white; display: grid; place-items: center; background: #7f97ad; width: 30px; height: 30px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.profile i { font-style: normal; font-size: 18px; padding-right: 4px; }

main { width: min(1192px, calc(100vw - 246px)); margin: auto; padding: 36px 48px 58px; }
.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.eyebrow { color: #9a9eaa; font-size: 10px; letter-spacing: 1.28px; font-weight: 700; margin: 0 0 8px; }
.warm { color: #ffb6a6; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-family: Fraunces, Georgia, serif; font-size: 30px; letter-spacing: -.9px; margin-bottom: 0; font-weight: 600; }
h2 { font-family: Fraunces, Georgia, serif; letter-spacing: -.6px; font-size: 21px; line-height: 1.14; margin-bottom: 0; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.icon-button { background: white; border: 1px solid var(--line); height: 42px; width: 42px; border-radius: 12px; font-size: 23px; color: #3f4960; position: relative; }
.icon-button b { background: var(--coral); width: 6px; height: 6px; border-radius: 50%; position: absolute; top: 10px; right: 10px; }
.primary-button { color: white; border: 0; border-radius: 11px; background: var(--coral); min-height: 43px; padding: 0 17px; font-size: 13px; font-weight: 700; box-shadow: 0 7px 14px rgba(226, 99, 79, .18); transition: transform .16s, background .16s; }
.primary-button:hover { transform: translateY(-1px); background: var(--coral-dark); }
.primary-button span { font-size: 20px; font-weight: 400; vertical-align: -1px; margin-right: 4px; }

.hero-grid { display: grid; grid-template-columns: 1.16fr .84fr; gap: 18px; }
.safe-card { min-height: 313px; background: var(--navy); border-radius: 21px; color: white; padding: 27px 29px 23px; position: relative; overflow: hidden; box-shadow: 0 16px 26px rgba(32, 45, 75, .13); }
.safe-card:before, .safe-card:after { content: ""; position: absolute; width: 290px; height: 290px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); right: -100px; top: -143px; }
.safe-card:after { width: 200px; height: 200px; right: -55px; top: -100px; }
.safe-card-top, .safe-footer, .card-title-row, .summary-heading, .projection-head { display: flex; justify-content: space-between; }
.safe-card h2 { font-size: 19px; position: relative; }
.more-button { border: 0; width: 31px; height: 31px; color: #d7dced; background: rgba(255,255,255,.09); border-radius: 10px; letter-spacing: 1px; line-height: 0; padding-bottom: 7px; z-index: 1; }
.more-button.dark { color: #9299a7; background: #f8f7f4; }
.spend-number { margin-top: 29px; letter-spacing: -2px; display: flex; align-items: baseline; position: relative; }
.spend-number span { color: #f2bdb2; font-size: 31px; font-family: Fraunces, serif; padding-right: 6px; }
.spend-number strong { font-size: clamp(49px, 5vw, 63px); font-weight: 600; font-family: Fraunces, serif; line-height: .9; }
.spend-number em { color: #bac2d6; letter-spacing: 0; font-size: 14px; font-style: normal; padding-left: 10px; }
.safe-description { color: #c4cbdb; font-size: 12.5px; line-height: 1.55; max-width: 350px; margin: 24px 0 20px; position: relative; }
.safe-footer { align-items: center; gap: 13px; position: relative; }
.spend-meter { background: rgba(255,255,255,.15); height: 6px; border-radius: 10px; overflow: hidden; flex: 1; }
.spend-meter span { background: #ffc4b6; display: block; height: 100%; width: 0%; border-radius: inherit; transition: width .35s ease; }
.safe-footer p { color: #aeb9cf; white-space: nowrap; font-size: 10.5px; margin: 0; }
.safe-footer strong { color: white; font-size: 11px; }
.safe-footer i { font-style: normal; padding: 0 3px; }

.up-next-card { background: white; border: 1px solid var(--line); border-radius: 21px; padding: 25px 27px 13px; }
.card-title-row { align-items: start; }
.card-title-row h2 { font-size: 19px; }
.text-button { color: #e56854; font-weight: 700; background: none; border: 0; font-size: 11px; padding: 2px; }
.next-list { margin-top: 18px; }
.next-item { display: grid; grid-template-columns: 35px 1fr auto; gap: 11px; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0efeb; }
.next-item:last-child { border-bottom: 0; }
.payment-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.coral { color: #e94f4f; background: #ffe8e5; }.blue { color: #5269ac; background: #e7edff; }.amber { color: #c0801a; background: #fff3d3; }
.next-item strong, .next-item small { display: block; }.next-item strong { font-size: 12px; }.next-item small { font-size: 10px; color: #9398a5; margin-top: 3px; }.next-item b { font-size: 12px; }

.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 18px; }
.summary-card { background: white; min-height: 164px; border-radius: 17px; border: 1px solid var(--line); padding: 19px 20px 17px; }
.summary-heading { align-items: center; }.summary-heading p { color: #7c8494; font-size: 11px; margin: 0 auto 0 8px; font-weight: 600; }.summary-heading .more-button { width: 25px; height: 25px; font-size: 10px; }
.summary-icon { width: 28px; height: 28px; display: grid; place-items: center; font-weight: 700; border-radius: 9px; font-size: 16px; }.mint { background: var(--mint); color: #4eaf7e; }.lavender { background: var(--lavender); color: #856fd2; }.yellow { background: var(--yellow); color: #c49b29; }
.summary-value { font-family: Fraunces, Georgia, serif; font-size: 27px; letter-spacing: -.9px; display: block; margin-top: 17px; }.summary-note { color: #999fab; font-size: 10px; margin: 4px 0 0; }
.account-dots { color: #72798a; font-size: 9px; margin-top: 15px; display: flex; gap: 5px; align-items: center; }.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-left: 3px; }.dot.sbi { background: #6d91d1; }.dot.gpay { background: #ec826a; }.dot.hdfc { background: #88c9a1; }
.mini-stacks { display: flex; gap: 5px; margin-top: 18px; }.mini-stacks span { width: 19%; height: 6px; border-radius: 6px; }.mini-stacks span:nth-child(1){background:#9dd9b8}.mini-stacks span:nth-child(2){background:#bdb1ea}.mini-stacks span:nth-child(3){background:#f7b4a7}.mini-stacks span:nth-child(4){background:#eedc96}
.runway-progress { height: 6px; border-radius: 6px; background: #f3f0e6; margin-top: 22px; }.runway-progress span { display: block; height: 100%; width: 66%; border-radius: inherit; background: #f3ca68; }

.time-machine { background: #f2f4fb; border: 1px solid #e7e8f0; border-radius: 23px; padding: 31px; margin-top: 18px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 35px; overflow: hidden; }
.section-label { font-size: 10px; letter-spacing: 1.1px; font-weight: 700; color: #777fa2; margin-bottom: 13px; }.section-label span { color: #ec6c58; font-size: 17px; vertical-align: -2px; }
.machine-copy h2 { font-size: 27px; line-height: 1.06; }.machine-copy h2 i { color: #ec6d5b; font-style: normal; }.machine-copy > p { color: #727a8e; font-size: 12px; line-height: 1.55; max-width: 315px; margin: 14px 0 20px; }
.purchase-field { display: flex; align-items: center; height: 43px; max-width: 318px; background: white; border: 1px solid #e6e4ea; border-radius: 11px; padding: 0 10px; font-size: 12px; color: #687087; box-shadow: 0 3px 8px rgba(43, 51, 85, .03); }.purchase-field input { width: 54px; color: #ec6c58; font-weight: 700; border: 0; outline: 0; padding: 0 0 0 2px; font-size: 12px; }.purchase-field b { color: #ec6c58; order: -1; }.purchase-field em { font-style: normal; color: #687087; }
.scenario-buttons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }.scenario { border: 1px solid #dddfea; border-radius: 9px; background: #fff; color: #6f768b; padding: 8px 9px; font-size: 10.5px; font-weight: 600; transition: .18s; }.scenario:hover { border-color: #ffaf9f; }.scenario.active { border-color: #f27662; background: #fff0ec; color: #d85c48; }
.verdict { max-width: 325px; margin-top: 17px; display: flex; gap: 8px; align-items: start; padding: 10px 11px; border-radius: 10px; font-size: 10.5px; line-height: 1.45; }.verdict span { border-radius: 50%; color: white; font-size: 9px; display: grid; place-items: center; width: 16px; min-width: 16px; height: 16px; font-weight: 700; }.verdict p { margin: 0; }.verdict.warning { background: #fff0eb; color: #8c625b; }.verdict.warning span { background: #ee7966; }.verdict.good { background: #e4f5ec; color: #4c7c65; }.verdict.good span { background: #67bb8b; }
.projection-card { min-width: 0; background: white; border: 1px solid #e8e8ef; border-radius: 16px; padding: 20px 20px 15px; box-shadow: 0 9px 20px rgba(58, 66, 97, .035); }.projection-head { align-items: start; }.projection-head h3 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 18px; letter-spacing: -.35px; }.projection-head .eyebrow { margin-bottom: 5px; }.projection-tag { background: #fff0eb; color: #d76654; padding: 5px 8px; border-radius: 8px; font-size: 9px; font-weight: 700; }
.chart-wrap { height: 208px; position: relative; padding-left: 31px; margin-top: 11px; }.chart-y-labels { height: 183px; top: 0; left: 0; position: absolute; display: flex; flex-direction: column; justify-content: space-between; color: #a6acb9; font-size: 9px; }.balance-chart { width: 100%; height: 183px; overflow: visible; }.grid-line { stroke: #edf0f3; stroke-width: 1; }.balance-chart #chart-line { fill: none; stroke: #ed705d; stroke-width: 3; stroke-linecap: round; }.balance-chart #chart-point { fill: #fff; stroke: #ed705d; stroke-width: 3; }.chart-x-labels { display: flex; justify-content: space-between; color: #a0a7b6; font-size: 9px; padding-left: 2px; margin-top: -2px; }.projection-stats { border-top: 1px solid #eeedf1; padding-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); }.projection-stats div { border-right: 1px solid #eeedf1; padding-left: 10px; }.projection-stats div:first-child { padding-left: 0; }.projection-stats div:last-child { border: 0; }.projection-stats span, .projection-stats strong { display: block; }.projection-stats span { color: #9da3b1; font-size: 9px; margin-bottom: 3px; }.projection-stats strong { font-size: 12px; color: #535c70; }.projection-stats div:first-child strong { color: #de624f; }

.bottom-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 18px; margin-top: 18px; }.insight-card { border-radius: 18px; min-height: 153px; padding: 24px 25px; background: #fff1c9; display: flex; align-items: start; gap: 17px; position: relative; overflow: hidden; }.insight-card:after { content:""; position:absolute; width:170px;height:170px;border:22px solid rgba(255,255,255,.3);border-radius:50%;right:-75px;bottom:-115px; }.insight-mark { height: 33px; width: 33px; display: grid; place-items: center; background: #ffc957; color: #90650e; border-radius: 11px; }.insight-card h2 { font-size: 18px; line-height: 1.2; max-width: 324px; }.insight-card h2 span { color: #e75f4c; }.insight-card p:not(.eyebrow) { color: #857763; font-size: 10px; margin: 8px 0 0; }.round-arrow { margin-left: auto; z-index: 1; align-self: center; width: 31px; min-width: 31px; height: 31px; border: 0; color: #785a1c; background: white; border-radius: 10px; font-size: 17px; }
.rules-card { padding: 24px 25px 16px; background: white; border: 1px solid var(--line); border-radius: 18px; }.rules-card h2 { font-size: 18px; }.rule { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 8px; margin-top: 11px; }.rule-icon { height: 24px; width: 24px; display: grid; place-items: center; border-radius: 8px; font-size: 12px; font-weight: 700; }.green { color:#4bae78;background:#e0f5e8; }.purple { color:#8069ca;background:#eee9ff; }.rule p { font-size: 11px; margin: 0; color: #596174; }.rule b { font-size: 11px; }

.modal-backdrop { opacity: 0; visibility: hidden; position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: rgba(26, 34, 57, .38); backdrop-filter: blur(3px); transition: .18s; }.modal-backdrop.show { opacity: 1; visibility: visible; }.transaction-modal { position: relative; background: white; width: min(405px, calc(100vw - 36px)); border-radius: 19px; padding: 29px; box-shadow: 0 24px 55px rgba(25,34,55,.25); transform: translateY(10px); transition: .18s; }.show .transaction-modal { transform: translateY(0); }.transaction-modal h2 { font-size: 26px; margin-bottom: 22px; }.modal-close { position: absolute; top: 16px; right: 17px; background: #f6f6f4; border: 0; width: 30px; height: 30px; border-radius: 9px; color: #6e7481; font-size: 22px; }.transaction-types { display: flex; gap: 8px; margin-bottom: 18px; }.type-button { background: #f7f6f3; border: 1px solid transparent; color: #767d8e; padding: 8px 12px; border-radius: 9px; font-size: 12px; font-weight: 700; }.type-button.active { color: #d75f4b; border-color: #f39887; background: #fff1ed; }.transaction-modal label { color: #737b8d; font-size: 11px; display: block; font-weight: 600; margin-bottom: 14px; position: relative; }.transaction-modal label input { display: block; color: var(--ink); border: 1px solid #dfdfe3; outline: 0; border-radius: 10px; width: 100%; padding: 10px 11px; margin-top: 6px; font-size: 14px; }.transaction-modal label span { position: absolute; left: 11px; top: 29px; color: #dc664f; }.transaction-modal label span + input { padding-left: 25px; }.transaction-modal input:focus { border-color: #f27b68; box-shadow: 0 0 0 3px #fff0eb; }.primary-button.full { width: 100%; margin-top: 4px; }.primary-button.full span { float: right; padding-top: 6px; }.toast { position: fixed; right: 26px; bottom: 23px; z-index: 20; background: var(--navy); color: white; padding: 12px 15px; border-radius: 10px; font-size: 12px; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s; }.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1020px) { main { padding: 30px 28px 48px; }.time-machine { grid-template-columns: 1fr; }.machine-copy > p { max-width: 460px; }.purchase-field, .verdict { max-width: 430px; } }
@media (max-width: 800px) { .app-shell { display: block; }.sidebar { height: auto; position: static; padding: 16px 18px; border-right: 0; border-bottom: 1px solid var(--line); }.brand { margin: 0; }.sidebar nav, .sidebar-bottom { display: none; } main { width: 100%; padding: 26px 18px 40px; }.hero-grid, .bottom-grid { grid-template-columns: 1fr; }.summary-grid { grid-template-columns: 1fr; }.topbar { align-items: start; }.header-actions .icon-button { display: none; } .safe-card { min-height: auto; } }
@media (max-width: 490px) { h1 { font-size: 25px; }.topbar { gap: 12px; }.header-actions .primary-button { min-width: 42px; padding: 0 12px; font-size: 0; }.header-actions .primary-button span { font-size: 23px; margin: 0; }.safe-card, .up-next-card, .time-machine { padding: 21px; }.spend-number strong { font-size: 51px; }.safe-footer { display: block; }.safe-footer p { margin-top: 8px; }.projection-card { padding: 16px 13px 13px; }.time-machine { gap: 24px; }.projection-head { gap: 10px; }.projection-tag { white-space: nowrap; }.insight-card { padding: 20px; }.round-arrow { display: none; } }

/* Marketing site and product explainers */
.marketing-page { background: #fffefa; }
.marketing-page main { width: min(1180px, calc(100% - 80px)); padding: 0; margin: 0 auto; }
.site-header { width: min(1180px, calc(100% - 80px)); height: 88px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.site-header .brand { margin: 0; }
.site-nav { display: flex; align-items: center; gap: 31px; margin-left: 115px; }
.site-nav a { color: #7c8392; text-decoration: none; font-size: 13px; font-weight: 700; transition: color .18s; }
.site-nav a:hover, .site-nav a.active { color: #e36a55; }
.nav-cta, .primary-link { display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; color: white; background: var(--coral); font-size: 12px; font-weight: 700; padding: 13px 17px; border-radius: 11px; box-shadow: 0 8px 17px rgba(229, 102, 81, .19); transition: transform .18s, background .18s; }
.nav-cta:hover, .primary-link:hover { background: var(--coral-dark); transform: translateY(-1px); }
.nav-cta span, .primary-link span { font-size: 16px; line-height: .7; }
.landing-hero { display: grid; grid-template-columns: .95fr 1.05fr; gap: 54px; min-height: 574px; align-items: center; padding: 61px 28px 77px; }
.pill-label { display: inline-flex; align-items: center; gap: 7px; color: #7b8399; letter-spacing: 1.2px; font-size: 10px; font-weight: 700; margin: 0 0 18px; }
.pill-label span { height: 7px; width: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px #fff0eb; }
.landing-hero h1, .feature-hero h1, .explain-hero h1 { font-family: Fraunces, Georgia, serif; font-size: clamp(43px, 5.05vw, 66px); line-height: .99; letter-spacing: -2.9px; margin: 0; }
.landing-hero h1 i, .feature-hero h1 i, .explain-hero h1 i { color: var(--coral); font-style: normal; }
.hero-lede { color: #697286; font-size: 15px; line-height: 1.6; max-width: 430px; margin: 22px 0 26px; }
.hero-actions { display: flex; align-items: center; gap: 22px; }
.quiet-link { color: #526078; font-weight: 700; font-size: 12px; text-decoration: none; }
.quiet-link span { color: var(--coral); padding-left: 4px; font-size: 15px; }
.hero-proof { display: flex; gap: 9px; align-items: center; margin-top: 28px; }
.hero-proof p { color: #858c9b; font-size: 10.5px; margin: 0; }.proof-check { background: #dff4e9; color: #4ca475; height: 19px; width: 19px; border-radius: 50%; font-size: 10px; display: grid; place-items: center; font-weight: 700; }
.hero-visual { height: 380px; position: relative; background: #f4f4fa; border-radius: 30px; overflow: hidden; border: 1px solid #ebebf0; }
.hero-visual:before { content: ""; position: absolute; height: 100%; width: 100%; background: linear-gradient(135deg, rgba(255,255,255,.5), transparent 50%); }
.orbit { position: absolute; border: 1px solid #dedfec; border-radius: 50%; }.orbit-one { width: 480px; height: 480px; right: -223px; top: -174px; }.orbit-two { width: 340px; height: 340px; right: -151px; top: -103px; }
.visual-main-card { position: absolute; z-index: 1; width: 263px; background: var(--navy); color: white; top: 42px; left: 47px; border-radius: 18px; padding: 22px 22px 18px; box-shadow: 0 17px 31px rgba(39,48,74,.2); }.visual-main-card p { color: #ffb6a6; font-size: 8px; letter-spacing: 1px; font-weight: 700; margin: 0 0 12px; }.visual-main-card div:not(.visual-progress) { display: flex; align-items: baseline; }.visual-main-card div span { color: #ffc3b5; font-family: Fraunces, serif; font-size: 22px; }.visual-main-card strong { font: 600 43px/.93 Fraunces, serif; letter-spacing: -2px; }.visual-main-card small { margin-top: 14px; display: block; color: #bbc3d6; font-size: 9px; }.visual-progress { background: rgba(255,255,255,.15); height: 5px; border-radius: 9px; margin-top: 16px; }.visual-progress span { display: block; height: 100%; width: 15%; background: #ffc4b6; border-radius: inherit; }.visual-main-card em { display: block; margin-top: 6px; color: #a9b5ce; font-size: 8px; font-style: normal; }
.visual-bill-card { position: absolute; z-index: 2; background: white; border: 1px solid #e7e7eb; right: 32px; top: 196px; width: 226px; border-radius: 13px; padding: 12px; display: grid; grid-template-columns: 29px 1fr auto; gap: 9px; align-items: center; box-shadow: 0 12px 25px rgba(50,59,83,.08); }.bill-logo { background: #e8edff; color: #5368ad; font-size: 11px; font-weight: 700; width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; }.visual-bill-card b, .visual-bill-card small { display: block; }.visual-bill-card b { font-size: 10px; }.visual-bill-card small { color: #969dac; font-size: 8px; margin-top: 3px; }.visual-bill-card strong { font-size: 10px; }.visual-spark-card { position: absolute; z-index: 2; background: #fff0bf; border-radius: 13px; bottom: 31px; left: 89px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; color: #826122; box-shadow: 0 9px 18px rgba(106,85,34,.07); }.visual-spark-card span { background: #ffc94e; border-radius: 7px; display: grid; place-items: center; width: 24px; height: 24px; }.visual-spark-card p { font-size: 8.5px; line-height: 1.35; margin: 0; }.visual-spark-card b { color: #d95f4e; }
.promise-section { border-top: 1px solid #eceae4; border-bottom: 1px solid #eceae4; padding: 67px 28px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: center; }.section-kicker { color: #969baa; font-size: 9px; letter-spacing: 1.28px; font-weight: 700; margin: 0 0 13px; }.promise-section h2, .steps-heading h2, .faq-section h2, .home-machine-callout h2, .final-cta h2, .why-section h2 { font: 600 33px/1.08 Fraunces, Georgia, serif; letter-spacing: -1.25px; margin: 0; }.section-copy { color: #6d7589; font-size: 14px; line-height: 1.65; margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; padding: 75px 0; }.feature-grid article { min-height: 280px; background: white; border: 1px solid var(--line); border-radius: 17px; padding: 24px; box-shadow: 0 8px 20px rgba(39,48,74,.025); }.feature-icon { height: 37px; width: 37px; border-radius: 11px; display: grid; place-items: center; font-family: Fraunces, serif; font-size: 20px; margin-bottom: 31px; }.coral-bg { background: #fff0eb; color: #e86852; }.purple-bg { background: #eee9fd; color: #806fd1; }.yellow-bg { background: #fff2c9; color: #c99927; }.feature-grid .section-kicker { margin-bottom: 10px; }.feature-grid h3 { font: 600 20px/1.12 Fraunces, Georgia, serif; letter-spacing: -.5px; margin: 0; }.feature-grid p:not(.section-kicker) { color: #777f91; font-size: 11.5px; line-height: 1.56; margin: 11px 0 14px; }.feature-grid a { color: #df6b56; text-decoration: none; font-size: 10.5px; font-weight: 700; }.feature-grid a span { padding-left: 3px; font-size: 14px; }
.steps-section { padding: 70px 28px; background: #f3f4fa; border-radius: 22px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 75px; }.steps-heading > p:not(.section-kicker) { color: #7c8395; font-size: 12px; line-height: 1.5; margin-top: 15px; }.steps-section ol { margin: 0; padding: 0; list-style: none; counter-reset: step; }.steps-section li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 0 0 23px; margin-bottom: 20px; border-bottom: 1px solid #dddfe8; }.steps-section li:last-child { border: 0; padding-bottom: 0; margin-bottom: 0; }.steps-section li > span { color: #e26a56; font: 600 15px Fraunces, serif; }.steps-section li h3 { font-size: 13px; margin: 0 0 5px; }.steps-section li p { color: #7c8395; font-size: 11px; line-height: 1.55; margin: 0; }
.home-machine-callout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 55px; align-items: center; margin: 76px 0; padding: 54px 61px; border-radius: 22px; background: var(--navy); color: white; overflow: hidden; }.home-machine-callout .section-kicker { color: #adb8d1; }.home-machine-callout h2 i, .final-cta h2 i, .why-section h2 i { color: var(--coral); font-style: normal; }.home-machine-callout > div > p:not(.section-kicker) { color: #c2c9d9; font-size: 12px; line-height: 1.55; max-width: 350px; margin: 15px 0 19px; }.light-link { display: inline-flex; align-items: center; gap: 7px; color: white; text-decoration: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: 9px; padding: 10px 12px; font-size: 10.5px; font-weight: 700; }.light-link span { font-size: 16px; }.tiny-projection { padding: 20px 22px; background: #fff; border-radius: 16px; color: var(--ink); box-shadow: 0 14px 30px rgba(15,25,50,.22); }.tiny-projection > p { color: #9ca1ae; letter-spacing: .8px; font-size: 8px; font-weight: 700; margin: 0; }.tiny-projection svg { display: block; width: 100%; height: 108px; margin: 4px 0 4px; }.tiny-projection svg path:first-child { fill: #fde7e1; }.tiny-projection svg path:last-child { fill: none; stroke: #ef725f; stroke-width: 3; }.tiny-projection > div { display: flex; justify-content: space-between; gap: 8px; }.tiny-projection span, .tiny-projection b { display: block; }.tiny-projection span { color: #a0a6b3; font-size: 8px; }.tiny-projection b { color: #535d70; font-size: 9px; margin-top: 3px; }.tiny-projection span:first-child b { color: #d95f4d; }
.faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; padding: 8px 28px 82px; }.faq-list details { border-bottom: 1px solid #e8e7e2; padding: 0 0 17px; margin-bottom: 17px; }.faq-list summary { cursor: pointer; color: #3c465c; list-style: none; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; gap: 15px; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--coral); font-size: 18px; line-height: .7; font-weight: 400; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list details p { color: #737b8d; font-size: 11.5px; line-height: 1.6; margin: 12px 27px 0 0; }.final-cta { margin: 0 28px 64px; padding: 71px 20px; text-align: center; border-top: 1px solid #ebe8df; }.final-cta h2 { font-size: 39px; margin-bottom: 23px; }.final-cta.compact { margin-top: 65px; }
.site-footer { width: min(1180px, calc(100% - 80px)); border-top: 1px solid #eae8e1; margin: 0 auto; padding: 26px 0 31px; display: flex; align-items: center; gap: 22px; }.site-footer .brand { margin: 0; transform: scale(.84); transform-origin: left center; }.site-footer > p { color: #969ba7; font-size: 10px; margin: 0 auto 0 -9px; }.site-footer > div { display: flex; gap: 18px; }.site-footer a:not(.brand) { text-decoration: none; color: #7d8391; font-size: 10px; font-weight: 700; }
.outline-link { color: #647087; text-decoration: none; font-size: 11px; font-weight: 700; border: 1px solid #e2e2e0; border-radius: 10px; padding: 11px 12px; }.text-button { text-decoration: none; }
.dashboard-machine-link { margin-top: 18px; border-radius: 19px; padding: 27px 29px; min-height: 208px; display: flex; align-items: center; justify-content: space-between; gap: 35px; background: #f1f3fa; border: 1px solid #e6e7ef; }.dashboard-machine-link h2 { font-size: 25px; }.dashboard-machine-link h2 i { color: var(--coral); font-style: normal; }.dashboard-machine-link > div > p:not(.eyebrow) { color: #717a8d; font-size: 12px; line-height: 1.5; margin: 12px 0 17px; }.machine-mini-result { width: 260px; border-radius: 15px; padding: 18px; background: white; border: 1px solid #e9e9ee; box-shadow: 0 9px 19px rgba(52,60,91,.04); }.machine-mini-result > span { color: #e96e59; font-size: 22px; }.machine-mini-result p { color: #9a9fad; font-size: 8px; font-weight: 700; letter-spacing: 1px; margin: 7px 0 7px; }.machine-mini-result strong, .machine-mini-result em { display: block; }.machine-mini-result strong { font: 600 15px Fraunces, serif; }.machine-mini-result em { color: #7a8293; font-size: 9px; font-style: normal; margin-top: 5px; }
.feature-main, .explainer-main { width: min(1050px, calc(100% - 80px)) !important; }.feature-hero, .explain-hero { text-align: center; max-width: 790px; padding: 80px 0 48px; margin: 0 auto; }.feature-hero h1, .explain-hero h1 { font-size: clamp(43px, 5vw, 64px); }.feature-hero > p:not(.pill-label), .explain-hero > p:not(.pill-label) { color: #70798c; max-width: 530px; font-size: 14px; line-height: 1.65; margin: 21px auto 0; }.standalone.time-machine { margin-top: 10px; grid-template-columns: .85fr 1.15fr; }.decision-explainer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; padding-top: 65px; }.decision-explainer article { background: white; border: 1px solid var(--line); border-radius: 16px; padding: 21px; }.decision-explainer article > span, .principle-grid article > span { color: #df6b56; font: 600 15px Fraunces, serif; }.decision-explainer h2 { font: 600 18px/1.12 Fraunces, serif; margin: 24px 0 8px; }.decision-explainer p { color: #788193; font-size: 11.5px; line-height: 1.55; margin: 0; }
.explainer-main { padding-top: 0 !important; }.explain-hero { text-align: left; margin-left: 0; padding: 84px 0 62px; }.explain-hero > p:not(.pill-label) { text-align: left; margin-left: 0; }.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid #e8e7e2; border-radius: 18px; overflow: hidden; background: #e8e7e2; }.principle-grid article { background: white; min-height: 237px; padding: 27px; }.principle-grid h2 { font: 600 19px/1.15 Fraunces, serif; margin: 27px 0 9px; letter-spacing: -.4px; }.principle-grid p { color: #788193; font-size: 11.5px; line-height: 1.55; margin: 0; }.calculation-section { display: grid; grid-template-columns: .84fr 1.16fr; align-items: center; gap: 85px; padding: 82px 29px; }.calculation-copy h2 { font: 600 31px/1.1 Fraunces, serif; letter-spacing: -1px; margin: 0; }.calculation-copy > p:not(.section-kicker) { color: #70798b; font-size: 12.5px; line-height: 1.65; margin: 16px 0 20px; }.calculation-card { background: #f3f4fa; border-radius: 16px; padding: 11px 21px; }.calculation-card > div { border-bottom: 1px solid #e0e2eb; padding: 15px 0; display: flex; justify-content: space-between; align-items: center; }.calculation-card span { color: #737b8d; font-size: 11px; }.calculation-card b { font-size: 12px; }.calculation-card .calc-result { border: 0; padding: 19px 0; display: block; }.calc-result span, .calc-result strong { display: block; }.calc-result strong { font: 600 30px/.95 Fraunces, serif; letter-spacing: -1px; margin-top: 6px; color: #e16b56; }.calc-result strong small { color: #596276; font: 600 10px DM Sans, sans-serif; letter-spacing: 0; }.why-section { padding: 65px 29px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; background: #fff0eb; border-radius: 20px; }.why-section > div:last-child p { color: #7a716e; font-size: 12px; line-height: 1.65; margin: 0 0 13px; }.faq-section.mini { margin-top: 80px; padding-left: 29px; padding-right: 29px; }

@media (max-width: 800px) { .marketing-page main, .site-header, .site-footer, .feature-main, .explainer-main { width: min(100% - 36px, 600px) !important; }.site-header { height: 75px; }.site-nav { gap: 16px; margin-left: auto; margin-right: 17px; }.site-nav a { font-size: 10px; }.nav-cta { display: none; }.landing-hero { min-height: auto; padding: 52px 0 58px; grid-template-columns: 1fr; gap: 39px; }.landing-hero h1, .feature-hero h1, .explain-hero h1 { font-size: 45px; }.hero-visual { height: 350px; }.promise-section, .steps-section, .home-machine-callout, .faq-section, .calculation-section, .why-section { grid-template-columns: 1fr; gap: 29px; }.promise-section, .steps-section, .faq-section, .calculation-section, .why-section { padding-left: 0; padding-right: 0; }.feature-grid, .decision-explainer, .principle-grid { grid-template-columns: 1fr; }.feature-grid { padding: 49px 0; }.feature-grid article { min-height: auto; }.steps-section { padding: 42px 24px; }.home-machine-callout { padding: 41px 25px; margin: 49px 0; }.faq-section { padding-bottom: 48px; }.final-cta { margin: 0 0 45px; }.site-footer { display: grid; gap: 13px; }.site-footer > p { margin: 0; }.dashboard-machine-link { align-items: start; }.machine-mini-result { display: none; }.feature-hero { padding: 54px 0 36px; }.standalone.time-machine { grid-template-columns: 1fr; }.decision-explainer { padding-top: 46px; }.explain-hero { padding: 58px 0 42px; }.principle-grid { background: transparent; gap: 14px; border: 0; overflow: visible; }.principle-grid article { border: 1px solid var(--line); border-radius: 15px; min-height: auto; }.calculation-section { padding-top: 53px; padding-bottom: 53px; }.why-section { padding: 42px 25px; }.faq-section.mini { margin-top: 52px; }.site-footer > div { flex-wrap: wrap; } }
@media (max-width: 490px) { .site-nav { gap: 11px; margin-right: 0; }.site-nav a { font-size: 9px; }.site-header .brand { transform: scale(.87); transform-origin: left; }.landing-hero h1, .feature-hero h1, .explain-hero h1 { font-size: 38px; letter-spacing: -1.8px; }.hero-actions { align-items: start; flex-direction: column; gap: 16px; }.hero-visual { height: 314px; }.visual-main-card { left: 18px; top: 31px; transform: scale(.9); transform-origin: top left; }.visual-bill-card { right: 7px; top: 177px; transform: scale(.86); transform-origin: top right; }.visual-spark-card { left: 39px; bottom: 22px; }.promise-section h2, .steps-heading h2, .faq-section h2, .home-machine-callout h2, .why-section h2 { font-size: 28px; }.home-machine-callout { padding: 36px 22px; }.home-machine-callout .tiny-projection { padding: 15px; }.final-cta { padding: 52px 0; }.final-cta h2 { font-size: 32px; }.site-footer > div { gap: 10px; }.dashboard-machine-link { padding: 22px; }.dashboard-machine-link h2 { font-size: 22px; }.outline-link { display: none; } }

.mobile-nav { display: none; }
.transactions-main, .more-main { max-width: 850px; }
.loading-state, .error-state { padding: 40px 20px; text-align: center; color: #7d8491; font-size: 12px; }.loading-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); margin-right: 8px; animation: pulse-loading 1s ease-in-out infinite alternate; }.error-state strong { display: block; color: var(--ink); font-size: 13px; }.error-state p { margin: 7px 0 12px; }@keyframes pulse-loading { from { opacity: .35; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.transactions-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 18px; }.transactions-summary > div { background: white; border: 1px solid var(--line); border-radius: 17px; padding: 20px; }.transactions-summary span, .transactions-summary small { display: block; color: #858d9d; font-size: 11px; }.transactions-summary strong { display: block; font: 600 28px Fraunces, serif; margin: 12px 0 4px; }.positive { color: #4e946e !important; }.transactions-section { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 24px; }.transactions-list { margin-top: 14px; }.transaction-row { display: grid; grid-template-columns: 35px 1fr auto; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid #f0efeb; }.transaction-row:last-child { border-bottom: 0; }.transaction-row strong, .transaction-row small { display: block; }.transaction-row strong { font-size: 12px; }.transaction-row small { color: #9298a5; font-size: 10px; margin-top: 3px; }.transaction-row b { font-size: 12px; }.empty-state { text-align: center; padding: 45px 20px 30px; }.empty-state-icon { width: 42px; height: 42px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 13px; color: #d96b57; background: #fff0eb; font-size: 22px; }.empty-state h2 { font-size: 21px; }.empty-state p { color: #7e8796; font-size: 12px; margin: 7px auto 18px; }.more-menu { background: white; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }.more-menu a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid #f0efeb; color: var(--ink); text-decoration: none; }.more-menu a:last-child { border-bottom: 0; }.more-menu strong, .more-menu small { display: block; }.more-menu strong { font-size: 13px; }.more-menu small { color: #8c94a3; font-size: 10px; margin-top: 4px; }.more-menu b { color: #a4a9b3; }.more-menu-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 11px; font-weight: 700; }.more-status { display: flex; gap: 12px; align-items: start; background: #f3f8f4; border: 1px solid #e2eee6; border-radius: 15px; padding: 17px; margin-top: 18px; }.more-status strong { font-size: 12px; }.more-status p { color: #77847c; font-size: 10px; margin: 4px 0 0; }
@media (max-width: 800px) { body { padding-bottom: 76px; }.sidebar { display: none; } main, .transactions-main, .more-main { width: 100%; padding: 26px 18px 34px; }.mobile-nav { position: fixed; display: grid; grid-template-columns: repeat(4, 1fr); z-index: 1000; isolation: isolate; bottom: 0; left: 0; right: 0; min-height: 66px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); box-shadow: 0 -8px 22px rgba(39,48,74,.06); }.mobile-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #89909f; font-size: 10px; font-weight: 700; text-decoration: none; border-radius: 12px; }.mobile-nav a span { font-size: 20px; line-height: 20px; font-weight: 400; }.mobile-nav a.active { color: var(--coral-dark); background: #fff0eb; }.topbar { margin-bottom: 22px; flex-wrap: wrap; }.dashboard-topbar .header-actions { margin-top: 1cm; }.header-actions { margin-left: auto; }.transactions-summary { grid-template-columns: 1fr; }.transactions-section { padding: 19px; }.goals-main { padding-bottom: 34px; } }
@media (max-width: 800px) { .transactions-main .topbar .header-actions { width: 100%; margin-left: 0; }.transactions-main .topbar .header-actions .primary-button { width: 100%; } }

.goals-main { max-width: 1192px; }
.goals-overview { background: var(--navy); border-radius: 21px; color: white; padding: 31px 34px; display: flex; justify-content: space-between; gap: 35px; align-items: center; margin-bottom: 19px; overflow: hidden; position: relative; }
.goals-overview:after { content: ""; position: absolute; width: 290px; height: 290px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; right: -70px; top: -165px; }
.goals-overview h2 { font-size: 29px; position: relative; z-index: 1; }.goals-overview h2 i { color: #ffb8a8; font-style: normal; }.goals-intro { color: #c3cadd; max-width: 420px; font-size: 12px; line-height: 1.6; margin: 14px 0 0; }
.goals-total { min-width: 245px; padding: 20px 21px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; position: relative; z-index: 1; }.goals-total > span, .goals-total-meta { color: #b8c1d5; font-size: 10px; }.goals-total strong { display: block; font: 600 34px Fraunces, serif; margin: 7px 0 14px; }.goals-total-meta { display: flex; justify-content: space-between; gap: 10px; }.goals-total-meta b { color: white; }
.goals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.goal-card { background: white; border: 1px solid var(--line); border-radius: 17px; padding: 21px; }.goal-card-top { display: flex; justify-content: space-between; align-items: center; }.goal-icon { width: 37px; height: 37px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 17px; }.goal-icon.coral { background: #ffe8e2; color: #e87561; }.goal-icon.mint { background: var(--mint); color: #51a979; }.goal-icon.lavender { background: var(--lavender); color: #826cd1; }.goal-menu { border: 0; background: #f8f7f4; color: #9da2ae; width: 28px; height: 28px; border-radius: 9px; letter-spacing: 1px; }.goal-card h2 { font-size: 19px; margin-top: 22px; }.goal-amounts { display: flex; align-items: baseline; gap: 6px; margin-top: 15px; }.goal-amounts strong { font: 600 25px Fraunces, serif; }.goal-amounts span { color: #9298a5; font-size: 11px; }.goal-progress { height: 8px; margin-top: 17px; background: #f0efeb; border-radius: 10px; overflow: hidden; }.goal-progress span { height: 100%; display: block; border-radius: inherit; background: var(--coral); transition: width .3s ease; }.goal-card:nth-child(2) .goal-progress span { background: #74c69b; }.goal-card:nth-child(3) .goal-progress span { background: #927de0; }.goal-progress-meta { display: flex; justify-content: space-between; margin-top: 8px; color: #8d94a2; font-size: 10px; }.goal-progress-meta b { color: var(--ink); }.goal-details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid #f0efeb; margin-top: 17px; padding-top: 15px; }.goal-details span, .goal-details strong { display: block; }.goal-details span { color: #969ba7; font-size: 10px; margin-bottom: 5px; }.goal-details strong { font-size: 11px; }.goal-status { display: flex; align-items: center; gap: 6px; font-size: 10px; margin-top: 15px; }.goal-status span { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; }.goal-status.on-track { color: #4e946e; }.goal-status.on-track span { background: var(--mint); }.goal-status.needs-plan { color: #bc7a2d; }.goal-status.needs-plan span { background: #fff3d3; }.goal-contribute { width: 100%; border: 1px solid #e9e7e1; background: #fffefa; border-radius: 10px; margin-top: 18px; padding: 10px; color: var(--ink); font-size: 11px; font-weight: 700; text-align: left; }.goal-contribute span { float: right; color: var(--coral); font-size: 17px; line-height: 11px; }.goals-note { display: flex; align-items: center; gap: 12px; background: #f3f8f4; border: 1px solid #e2eee6; border-radius: 15px; padding: 16px 18px; margin-top: 18px; }.goals-note strong { font-size: 12px; }.goals-note p { color: #77847c; font-size: 10px; margin: 4px 0 0; }.goals-note a { color: #4e946e; font-size: 11px; font-weight: 700; margin-left: auto; text-decoration: none; white-space: nowrap; }.goals-empty { grid-column: 1 / -1; background: white; border: 1px dashed #d9d8d1; padding: 54px 20px; text-align: center; border-radius: 17px; }.goals-empty p { color: #7d8491; font-size: 12px; }.goal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.goal-modal label input[type="date"] { padding-left: 11px; }
@media (max-width: 800px) { .goals-overview { display: block; padding: 26px 23px; }.goals-total { margin-top: 22px; }.goals-grid { grid-template-columns: 1fr; }.goals-note { align-items: start; flex-wrap: wrap; }.goals-note a { margin-left: 40px; }.goals-main { width: 100%; } }
@media (max-width: 490px) { .goals-overview h2 { font-size: 25px; }.goals-total-meta { display: block; }.goals-total-meta span { display: block; margin-top: 5px; }.goal-form-row { grid-template-columns: 1fr; gap: 0; } }

/* First-time startup flow */
.onboarding-page { min-height: 100vh; background: var(--cream); color: var(--ink); }
.onboarding-shell { min-height: 100vh; width: min(100% - 40px, 1080px); margin: 0 auto; display: flex; flex-direction: column; }
.onboarding-header { display: flex; justify-content: space-between; align-items: center; padding: 27px 0; }
.onboarding-header .brand { margin: 0; }
.onboarding-header > p { color: #8a91a0; font-size: 11px; margin: 0; }
.onboarding-stage { flex: 1; display: grid; place-items: center; padding: 30px 0 40px; }
.onboarding-slides { width: min(100%, 590px); }
.onboarding-slide { display: none; text-align: center; animation: onboarding-enter .32s ease-out; }
.onboarding-slide.active { display: block; }
.onboarding-slide .pill-label { justify-content: center; margin: 27px 0 16px; }
.onboarding-slide h1 { font: 600 clamp(34px, 5vw, 54px)/1.04 Fraunces, Georgia, serif; letter-spacing: -1.9px; margin: 0; }
.onboarding-slide h1 em { color: var(--coral); font-style: normal; }
.onboarding-copy { color: #717a8d; font-size: 14px; line-height: 1.65; max-width: 460px; margin: 20px auto 0; }
.onboarding-illustration { width: 240px; height: 150px; margin: 0 auto; border: 1px solid #e6e5ee; border-radius: 24px; background: #f2f3fa; position: relative; display: grid; place-items: center; overflow: hidden; }
.onboarding-illustration:before { content: ""; position: absolute; inset: 16px; border: 1px solid #dedfec; border-radius: 50%; }
.onboarding-illustration-plan { background: #eef0fa; }
.illustration-number { position: relative; z-index: 1; color: white; background: var(--navy); border-radius: 14px; padding: 18px 22px 15px; font: 600 27px/.95 Fraunces, serif; box-shadow: 0 12px 24px rgba(39,48,74,.16); }
.onboarding-illustration-plan small { position: absolute; z-index: 2; color: #bdc5d8; font-size: 8px; bottom: 34px; }
.onboarding-illustration-plan i, .onboarding-illustration-ready i { position: absolute; right: 31px; top: 28px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #dff4e9; color: #4eaf7e; font-size: 12px; font-style: normal; font-weight: 700; }
.onboarding-illustration-account { background: #fff0eb; }
.account-avatar { position: relative; z-index: 1; display: grid; place-items: center; width: 49px; height: 49px; border-radius: 16px; background: #f27662; color: white; font: 600 24px Fraunces, serif; }
.account-line { position: absolute; width: 80px; height: 7px; border-radius: 6px; background: #f0b7ab; bottom: 46px; left: 87px; }.account-line.short { width: 53px; bottom: 30px; left: 87px; background: #f6d3cc; }
.account-check { position: absolute; right: 37px; top: 30px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: #dff4e9; color: #4eaf7e; font-size: 13px; font-weight: 700; }
.onboarding-illustration-currency { background: #fff4d5; color: #c38c1c; }.onboarding-illustration-currency > span { position: relative; z-index: 1; font: 600 54px Fraunces, serif; }.onboarding-illustration-currency b { position: absolute; z-index: 1; right: 50px; top: 51px; font-size: 11px; }.onboarding-illustration-currency small { position: absolute; bottom: 24px; font-size: 9px; color: #a38e59; }
.onboarding-illustration-balance { justify-content: start; padding-left: 29px; background: #e5f5ec; text-align: left; }.onboarding-illustration-balance > span { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; background: white; color: #55a979; font: 600 27px Fraunces, serif; }.onboarding-illustration-balance > div { position: relative; z-index: 1; margin-left: 12px; }.onboarding-illustration-balance b, .onboarding-illustration-balance small { display: block; }.onboarding-illustration-balance b { font-size: 11px; }.onboarding-illustration-balance small { color: #6e9880; font-size: 9px; margin-top: 4px; }.onboarding-illustration-balance i { position: absolute; right: 31px; top: 56px; color: #59ab7e; font-size: 27px; font-style: normal; }
.onboarding-illustration-lock { background: #eee9fd; }.onboarding-illustration-lock > span { position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; border: 7px solid #927de0; border-radius: 19px; color: #927de0; font-size: 34px; }.onboarding-illustration-lock i { position: absolute; right: 35px; top: 30px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #927de0; color: white; font-size: 12px; font-style: normal; }
.onboarding-illustration-ready { background: #fff0eb; }.onboarding-illustration-ready > span { position: relative; z-index: 1; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 20px; background: var(--coral); color: white; font: 600 31px Fraunces, serif; }.onboarding-illustration-ready b { position: absolute; bottom: 23px; color: #a3776f; font-size: 9px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.onboarding-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e8e6df; padding: 22px 0 28px; }.onboarding-indicators { display: flex; gap: 7px; align-items: center; }.onboarding-indicator { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d7d8df; transition: .2s; }.onboarding-indicator.active { width: 25px; border-radius: 5px; background: var(--coral); }.onboarding-actions { display: flex; gap: 12px; align-items: center; }.onboarding-actions .primary-button { min-width: 116px; }.quiet-button, .secondary-button { border: 1px solid #e2e1dc; border-radius: 10px; background: white; color: #687287; min-height: 43px; padding: 0 15px; font-size: 12px; font-weight: 700; }.quiet-button:disabled { opacity: .35; cursor: not-allowed; }.secondary-button { color: #dc634f; border-color: #f3b4a8; background: #fff7f4; }.secondary-button:disabled { color: #858b99; border-color: #e2e1dc; background: #f4f3ef; cursor: not-allowed; }.secondary-button span { margin-left: 8px; font-size: 16px; }.onboarding-field { display: block; max-width: 350px; margin: 24px auto 0; color: #6f788d; text-align: left; font-size: 11px; font-weight: 700; }.onboarding-field select, .onboarding-input-wrap { display: flex; align-items: center; width: 100%; min-height: 49px; margin-top: 7px; padding: 0 13px; border: 1px solid #dfdfe3; border-radius: 11px; background: white; color: var(--ink); font-size: 13px; }.onboarding-field select { outline: 0; }.onboarding-input-wrap:focus-within, .onboarding-field select:focus { border-color: #f27b68; box-shadow: 0 0 0 3px #fff0eb; }.onboarding-input-wrap > span { color: var(--coral); margin-right: 7px; font: 600 18px Fraunces, serif; }.onboarding-input-wrap input { width: 100%; border: 0; outline: 0; color: var(--ink); font-size: 16px; }.onboarding-input-wrap input.invalid { color: #c94d4d; }.onboarding-error { max-width: 350px; margin: 8px auto 0; color: #c94d4d; text-align: left; font-size: 11px; }.onboarding-status { max-width: 420px; margin: 18px auto 0; padding: 12px 14px; border-radius: 11px; background: #f2f3fa; color: #737c90; font-size: 11px; line-height: 1.5; }.onboarding-security-actions { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 15px; }.onboarding-auth-form { max-width: 350px; margin: 20px auto 0; text-align: left; }.onboarding-auth-tabs { display: flex; gap: 14px; border-bottom: 1px solid #e8e6df; margin-bottom: 14px; }.onboarding-auth-tabs button { border: 0; border-bottom: 2px solid transparent; padding: 0 0 9px; background: none; color: #9a9eaa; font-size: 11px; font-weight: 700; }.onboarding-auth-tabs button.active { border-color: var(--coral); color: var(--coral); }.onboarding-auth-form label { display: block; color: #6f788d; font-size: 11px; font-weight: 700; margin-top: 10px; }.onboarding-auth-form input { display: block; width: 100%; border: 1px solid #dfdfe3; border-radius: 9px; margin-top: 5px; padding: 10px 11px; outline: 0; font-size: 12px; }.onboarding-unavailable { color: #8a91a0; font-size: 10px; line-height: 1.45; margin: 11px 0; }.onboarding-auth-form .secondary-button { width: 100%; }.onboarding-summary { display: flex; justify-content: center; gap: 9px; max-width: 410px; margin: 23px auto 0; }.onboarding-summary span { flex: 1; padding: 12px 7px; border: 1px solid #e9e7e1; border-radius: 11px; background: white; }.onboarding-summary b, .onboarding-summary small { display: block; }.onboarding-summary b { font-size: 12px; }.onboarding-summary small { color: #9298a5; font-size: 9px; margin-top: 4px; }.onboarding-toast { position: fixed; left: 50%; bottom: 25px; z-index: 5; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 11px 14px; border-radius: 10px; background: var(--navy); color: white; font-size: 11px; box-shadow: var(--shadow); transition: .2s; }.onboarding-toast.show { opacity: 1; transform: translate(-50%, 0); }
@keyframes onboarding-enter { from { opacity: .25; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 600px) { .onboarding-shell { width: min(100% - 36px, 520px); }.onboarding-header { padding: 20px 0; }.onboarding-stage { padding: 24px 0 31px; }.onboarding-slide h1 { font-size: 35px; }.onboarding-copy { font-size: 13px; }.onboarding-illustration { width: 210px; height: 136px; }.onboarding-footer { display: block; }.onboarding-indicators { justify-content: center; margin-bottom: 18px; }.onboarding-actions { justify-content: space-between; }.onboarding-actions .primary-button { flex: 1; }.onboarding-security-actions { flex-direction: column; }.onboarding-security-actions .secondary-button { width: 100%; }.onboarding-summary { gap: 5px; }.onboarding-summary b { font-size: 10px; } }