:root {
  color-scheme: light;
  --navy: #102d43;
  --navy-deep: #0c263a;
  --ink: #183447;
  --ink-soft: #536a77;
  --mint: #b6d6c4;
  --mint-deep: #527e68;
  --paper: #faf9f6;
  --white: #fff;
  --line: #e6eae6;
  --gold: #e7c678;
  --shadow: 0 22px 60px rgb(11 39 56 / 12%);
  font-family: "DM Sans", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--ink); background: var(--paper); }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.page-width { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.visually-hidden { width: 1px; height: 1px; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.utility-bar { min-height: 34px; color: #e8eeeb; background: var(--navy-deep); }
.utility-bar__inner { width: min(1320px, calc(100% - 64px)); min-height: 34px; position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: auto; }
.utility-links, .utility-tools { display: flex; align-items: center; gap: 22px; }
.utility-links a, .utility-tools a, .utility-tools > button { display: inline-flex; align-items: center; gap: 5px; padding: 8px 0; border: 0; color: #e0e9e5; background: transparent; font-size: 9px; font-weight: 500; }
.utility-links a:hover, .utility-tools a:hover, .utility-tools > button:hover { color: var(--mint); }
.utility-current { padding-left: 3px; color: #b7d7c3; font-size: 8px; }
.utility-tools { gap: 20px; }
.search-toggle span { font-size: 15px; }
.site-search:not([hidden]) { position: absolute; top: 31px; right: 0; z-index: 12; display: flex; gap: 7px; padding: 12px; border: 1px solid #e5eae4; background: white; box-shadow: var(--shadow); }
.site-search input { width: min(270px, 55vw); height: 36px; padding: 0 10px; border: 1px solid #dfe5e1; border-radius: 3px; outline: none; font-size: 10px; }
.site-search input:focus { border-color: #6d9679; box-shadow: 0 0 0 3px rgb(109 150 121 / 12%); }
.site-search button { padding: 0 13px; border: 0; border-radius: 3px; color: white; background: var(--navy); font-size: 10px; font-weight: 700; }
.prototype-banner { min-height: 30px; padding: 7px 16px; display: flex; justify-content: center; align-items: center; gap: 9px; background: #f1ead7; color: #665429; font-size: 10px; letter-spacing: .045em; text-align: center; }
.prototype-banner__dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #b38c38; }
.site-header { height: 78px; position: sticky; z-index: 10; top: 0; background: rgb(250 249 246 / 96%); backdrop-filter: blur(16px); border-bottom: 1px solid rgb(16 45 67 / 7%); }
.header-inner { width: min(1320px, calc(100% - 64px)); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--navy); }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; color: var(--navy); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-name { font: 800 14px/1.12 "Manrope", sans-serif; letter-spacing: -.055em; }
.brand-name span { display: block; padding-top: 3px; font: 500 10px/1.1 "DM Sans", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.primary-nav { display: flex; align-items: center; gap: clamp(19px, 2.5vw, 38px); margin-left: auto; }
.primary-nav a { font-size: 12px; font-weight: 600; color: #526773; transition: color .2s; }
.primary-nav a:hover, .primary-nav .nav-admin:hover { color: var(--mint-deep); }
.primary-nav .nav-admin { color: #73838b; }
.header-actions { display: flex; gap: 12px; align-items: center; }
.button { display: inline-flex; min-height: 49px; justify-content: center; align-items: center; gap: 14px; padding: 0 22px; border: 0; border-radius: 4px; font-size: 12px; font-weight: 700; transition: background .2s, transform .2s, box-shadow .2s; }
.button:hover { transform: translateY(-1px); }
.button--primary { background: var(--navy); color: var(--white); box-shadow: 0 5px 14px rgb(16 45 67 / 14%); }
.button--primary:hover { background: #1b4059; box-shadow: 0 8px 19px rgb(16 45 67 / 18%); }
.button--quiet { min-height: 42px; padding: 0 7px; color: var(--navy); background: transparent; }
.button--quiet:hover { background: #edf0ed; }
.button--small { min-height: 42px; padding: 0 17px; font-size: 11px; }
.button--mint { background: var(--mint); color: var(--navy); }
.button--mint:hover { background: #c9e0d3; }
.button--full { width: 100%; min-height: 51px; margin-top: 8px; }
.menu-toggle { display: none; }

.hero { position: relative; min-height: 570px; overflow: hidden; color: var(--white); background: var(--navy); }
.hero::before { position: absolute; top: -340px; right: -180px; width: 930px; height: 930px; content: ""; border: 1px solid rgb(255 255 255 / 7%); border-radius: 50%; }
.hero::after { position: absolute; top: -260px; right: -105px; width: 780px; height: 780px; content: ""; border: 1px solid rgb(255 255 255 / 5%); border-radius: 50%; }
.hero-background-mark { position: absolute; top: 16px; right: -52px; color: rgb(255 255 255 / 2.2%); font: 800 480px/.9 "Manrope", sans-serif; }
.hero-inner { min-height: 519px; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 25px; }
.hero-copy { padding: 46px 0 43px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: #c0d8ca; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow-line { width: 19px; height: 1px; background: #89ab99; }
.eyebrow--dark { color: #72868d; }
.hero h1, .account-aside h1 { margin: 0; color: #fff; font: 500 clamp(43px, 5vw, 64px)/1.09 "Manrope", sans-serif; letter-spacing: -.065em; }
.hero h1 em, .account-aside h1 em, .promise-copy h2 em { color: var(--mint); font-style: normal; }
.hero-description { max-width: 425px; margin: 21px 0 27px; color: #c3d0d2; font-size: 13px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 25px; }
.text-button { border: 0; padding: 7px 0; color: #c2cfd2; background: transparent; text-align: left; font-size: 10px; }
.text-button span { display: block; padding-top: 4px; color: white; font-size: 11px; font-weight: 700; }
.text-button b { margin-left: 5px; color: var(--mint); }
.hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 38px; }
.proof-avatars { display: flex; padding-left: 4px; }
.proof-avatars span { width: 25px; height: 25px; display: grid; place-items: center; margin-left: -4px; border: 2px solid var(--navy); border-radius: 50%; color: var(--navy); background: #b6d6c4; font-size: 9px; font-weight: 700; }
.proof-avatars span:nth-child(2) { background: #e8c983; }.proof-avatars span:nth-child(3) { background: #d3b5a4; }.proof-avatars .proof-plus { color: white; background: #315268; font-size: 11px; }
.hero-proof p { margin: 0; color: #adbec4; font-size: 9px; line-height: 1.55; }.hero-proof strong { color: white; font-size: 10px; }
.hero-art { width: 100%; max-width: 500px; min-height: 400px; justify-self: end; position: relative; display: flex; align-items: center; justify-content: center; }
.decor { position: absolute; pointer-events: none; }
.decor--circle { top: 44px; right: 40px; width: 57px; height: 57px; border: 1px solid rgb(182 214 196 / 45%); border-radius: 50%; }
.decor--cross { top: 96px; left: 31px; color: #a2cbb0; font-size: 28px; }.decor--spark { right: 55px; bottom: 38px; color: #dfc17c; font-size: 28px; }
.account-card { width: min(390px, 90%); position: absolute; top: 85px; left: 9%; z-index: 2; padding: 23px 24px 18px; border: 1px solid rgb(255 255 255 / 48%); border-radius: 9px; color: var(--ink); background: #fcfbf8; box-shadow: 0 18px 50px rgb(0 0 0 / 22%); transform: rotate(-3deg); }
.account-card-top { display: flex; align-items: center; gap: 9px; }.mini-brand-mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 3px; color: var(--mint); background: var(--navy); font: 700 16px "Manrope", sans-serif; }
.account-card-label { color: #71828a; font-size: 8px; font-weight: 700; letter-spacing: .11em; }.card-menu { margin-left: auto; color: #8a989b; font-size: 10px; letter-spacing: .13em; }
.balance-label { margin: 26px 0 2px; color: #768891; font-size: 9px; }.balance-amount { margin: 0; color: var(--navy); font: 700 37px "Manrope", sans-serif; letter-spacing: -.05em; }.balance-amount span { color: #81918f; font-size: 23px; }
.card-divider { height: 1px; margin: 21px 0 14px; background: #e8ebe7; }.account-card-bottom { display: flex; justify-content: space-between; align-items: center; color: #89979a; font-size: 7px; font-weight: 600; letter-spacing: .08em; }.account-card-bottom strong { color: var(--ink); }.card-status { display: flex; align-items: center; gap: 5px; color: #507b62; font-size: 8px; letter-spacing: 0; }.card-status i, .live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: #72aa84; }
.activity-card { width: min(370px, 88%); position: absolute; right: 0; bottom: 39px; z-index: 3; padding: 18px 18px 13px; border: 1px solid #edf0ec; border-radius: 8px; color: var(--ink); background: #fff; box-shadow: 0 14px 40px rgb(0 0 0 / 19%); }
.activity-title { display: flex; justify-content: space-between; margin-bottom: 10px; color: #7c8a8e; font-size: 9px; font-weight: 700; }.activity-title span:last-child { letter-spacing: 2px; }
.activity-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #f0f1ee; }.activity-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; }.activity-icon--green { color: #4d8061; background: #e4efe6; }.activity-icon--blue { color: #50789a; background: #e7edf3; }.activity-details { flex: 1; display: flex; flex-direction: column; gap: 4px; }.activity-details strong { font-size: 9px; }.activity-details small { color: #94a0a2; font-size: 7px; }.activity-positive,.activity-amount { white-space: nowrap; font-size: 9px; }.activity-positive { color: #528466; }
.floating-note { position: absolute; top: 282px; right: -3px; z-index: 4; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 5px; background: #fff; color: var(--ink); box-shadow: 0 9px 28px rgb(0 0 0 / 16%); transform: rotate(2deg); }.note-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #477a5e; background: #e1eee5; }.floating-note strong,.floating-note small { display: block; }.floating-note strong { font-size: 8px; }.floating-note small { margin-top: 3px; color: #839398; font-size: 7px; }.art-caption { position: absolute; right: 0; bottom: 5px; color: #82979e; font-size: 7px; letter-spacing: .04em; }
.hero-footer { position: relative; z-index: 1; border-top: 1px solid rgb(255 255 255 / 12%); }.hero-footer-inner { height: 50px; display: flex; align-items: center; justify-content: space-between; color: #aec0c5; font-size: 8px; font-weight: 700; letter-spacing: .16em; }.footer-star { color: var(--mint); font-size: 14px; }
.feature-strip { background: white; }.feature-grid { min-height: 126px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; }.feature { display: flex; align-items: center; gap: 14px; padding: 20px 30px; border-right: 1px solid #ebeeeb; }.feature:first-child { padding-left: 0; }.feature:last-child { border-right: 0; }.feature-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; color: #416a56; background: #e6f0e8; font-size: 21px; }.feature-icon--mint { color: #557d8b; background: #e8f0f1; }.feature-icon--gold { color: #987a43; background: #f6f0df; }.feature h2 { margin: 0 0 5px; font: 700 11px "Manrope", sans-serif; letter-spacing: -.02em; }.feature p { max-width: 210px; margin: 0; color: #849297; font-size: 9px; line-height: 1.6; }
.solutions-section { padding-top: 88px; padding-bottom: 88px; }
.solutions-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; margin-bottom: 30px; }
.solutions-heading .eyebrow { margin-bottom: 13px; }
.solutions-heading h2 { margin: 0; font: 500 39px/1.16 "Manrope", sans-serif; letter-spacing: -.06em; }
.solutions-heading h2 em { color: #688873; font-style: normal; }
.solutions-heading > p { max-width: 350px; margin: 0 0 3px; color: #718288; font-size: 11px; line-height: 1.8; }
.solution-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.solution-card { overflow: hidden; border: 1px solid #e8ebe6; border-radius: 5px; background: #fff; scroll-margin-top: 92px; }
.solution-card > img { width: 100%; height: 190px; display: block; object-fit: cover; background: #e8eee8; }
.solution-card__content { padding: 18px 18px 13px; }
.solution-kicker { color: #6e8878; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.solution-card h3 { margin: 8px 0 7px; color: var(--navy); font: 700 17px "Manrope", sans-serif; letter-spacing: -.035em; }
.solution-card p { min-height: 37px; margin: 0 0 10px; color: #718288; font-size: 10px; line-height: 1.75; }
.solution-card .arrow-link { min-height: 36px; }
.how-section { padding-top: 105px; padding-bottom: 105px; }.section-intro h2,.promise-copy h2 { margin: 0; font: 500 44px/1.17 "Manrope", sans-serif; letter-spacing: -.06em; }.section-intro h2 em { color: #688873; font-style: normal; }.section-intro .eyebrow { margin-bottom: 15px; }
.how-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 46px; }.how-card { min-width: 0; }.how-number { color: #778a8d; font-size: 8px; font-weight: 700; letter-spacing: .13em; }.how-art { height: 172px; position: relative; display: grid; place-items: center; overflow: hidden; margin: 12px 0 20px; border-radius: 5px; background: #eef1e9; }.how-art--checking { background: #e7ece2; }.mini-card { width: 190px; height: 112px; position: relative; z-index: 2; padding: 18px; border: 1px solid rgb(255 255 255 / 60%); border-radius: 8px; color: #eaf1e8; background: var(--navy); box-shadow: 0 14px 24px rgb(16 45 67 / 24%); transform: rotate(-8deg); }.mini-card span { color: var(--mint); font: 700 27px "Manrope", sans-serif; }.mini-card i { position: absolute; right: 16px; bottom: 17px; color: #bdcdd0; font-size: 8px; font-style: normal; letter-spacing: .12em; }.orbit { position: absolute; width: 220px; height: 90px; border: 1px solid #b5c8b7; border-radius: 50%; transform: rotate(-28deg); }.orbit--two { width: 260px; height: 125px; opacity: .55; transform: rotate(28deg); }
.how-art--savings { background: #f2eddd; }.sun { width: 53px; height: 53px; position: absolute; top: 21px; left: calc(50% - 27px); border-radius: 50%; background: #dfbe75; }.hill { position: absolute; right: -10%; bottom: -61px; width: 120%; height: 150px; border-radius: 50% 50% 0 0; }.hill--back { bottom: -51px; left: -37%; background: #c5d0b3; transform: rotate(9deg); }.hill--front { right: -25%; background: #738d79; transform: rotate(-8deg); }.savings-tag { position: absolute; top: 52px; right: 18%; z-index: 1; color: #355a4a; font: 700 10px/1.45 "Manrope", sans-serif; transform: rotate(5deg); }
.how-art--community { background: #e8eef0; }.community-sun { width: 57px; height: 57px; position: absolute; top: 24px; right: 22%; border-radius: 50%; background: #e7c878; }.community-shape { position: absolute; bottom: -32px; width: 95px; height: 150px; border-radius: 48% 48% 0 0; }.shape--one { left: 17%; background: #789183; transform: rotate(14deg); }.shape--two { left: 38%; bottom: -48px; height: 165px; background: #31536a; }.shape--three { right: 9%; background: #afc6b0; transform: rotate(-17deg); }.community-star { position: absolute; top: 44px; left: 27%; z-index: 1; color: #fff; font-size: 27px; }
.how-card h3 { margin: 0 0 8px; font: 700 16px "Manrope", sans-serif; letter-spacing: -.035em; }.how-card p { max-width: 330px; min-height: 43px; margin: 0 0 17px; color: #718288; font-size: 10px; line-height: 1.8; }.arrow-link { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 0; border: 0; border-top: 1px solid #dfe5e0; color: var(--navy); background: none; text-align: left; font-size: 9px; font-weight: 700; }.arrow-link span { color: #648875; font-size: 14px; }
.promise-section { overflow: hidden; color: #fff; background: #173d51; }.promise-inner { min-height: 368px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }.promise-art { width: 320px; height: 290px; position: relative; justify-self: center; display: grid; place-items: center; }.promise-orbit { position: absolute; border: 1px solid rgb(207 225 211 / 20%); border-radius: 50%; }.promise-orbit--outer { width: 285px; height: 285px; }.promise-orbit--inner { width: 205px; height: 205px; border-color: rgb(207 225 211 / 35%); }.promise-house { width: 115px; height: 115px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: var(--mint); font-size: 61px; }.promise-spark { position: absolute; color: #e6c779; }.promise-spark--one { top: 39px; right: 35px; font-size: 23px; }.promise-spark--two { left: 37px; bottom: 50px; font-size: 19px; }.promise-copy { max-width: 420px; padding: 55px 0; }.promise-copy .eyebrow { margin-bottom: 15px; }.promise-copy h2 { color: white; }.promise-copy > p:not(.eyebrow) { max-width: 390px; margin: 17px 0 21px; color: #bdcdd0; font-size: 10px; line-height: 1.9; }.promise-copy .button { min-height: 43px; font-size: 10px; }
.customer-service { min-height: 190px; display: flex; align-items: center; gap: 20px; }
.service-icon { width: 47px; height: 47px; flex: 0 0 47px; display: grid; place-items: center; border-radius: 50%; color: #527a63; background: #e6f0e8; font-size: 21px; }
.customer-service .eyebrow { margin-bottom: 9px; font-size: 8px; }
.customer-service h2 { margin: 0; font: 700 18px "Manrope", sans-serif; letter-spacing: -.035em; }
.customer-service p:last-child { margin: 7px 0 0; color: #718288; font-size: 10px; line-height: 1.7; }
.customer-service .button { margin-left: auto; white-space: nowrap; }
.cta-section { min-height: 230px; display: flex; justify-content: space-between; align-items: center; }.cta-section .eyebrow { margin-bottom: 12px; }.cta-section h2 { margin: 0; font: 500 31px/1.25 "Manrope", sans-serif; letter-spacing: -.05em; }.cta-section .button { min-height: 46px; }
.site-footer { color: #fff; background: var(--navy-deep); }.footer-main { min-height: 116px; display: flex; justify-content: space-between; align-items: center; gap: 35px; }.brand--light { color: white; }.brand--light .brand-mark { color: var(--mint); }.footer-main > p { margin: 0; color: #e6ece8; font: 600 12px/1.6 "Manrope", sans-serif; }.footer-main > p span { color: #91a6aa; font: 400 10px "DM Sans", sans-serif; }.footer-links { display: flex; gap: 25px; color: #b8c7c8; font-size: 9px; }.footer-links a:hover { color: var(--mint); }.footer-legal { min-height: 43px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid rgb(255 255 255 / 11%); color: #82989d; font-size: 8px; }
.footer-compliance { padding: 10px 24px; border-top: 1px solid rgb(255 255 255 / 11%); border-bottom: 1px solid rgb(255 255 255 / 11%); background: rgb(255 255 255 / 3%); }
.footer-compliance__inner { width: min(760px, 100%); display: grid; grid-template-columns: 1.35fr 1fr; align-items: center; gap: 20px; margin: auto; }
.compliance-item { min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 9px; }
.compliance-item + .compliance-item { border-left: 1px solid rgb(255 255 255 / 14%); }
.fdic-disclosure__mark { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #9aaca9; border-radius: 2px; color: #f7faf7; font: 800 10px/1 "Manrope", sans-serif; letter-spacing: .05em; }
.compliance-item p { display: grid; gap: 2px; margin: 0; color: #dce6e1; font-size: 8px; line-height: 1.35; }
.compliance-item p strong { color: #fff; font-size: 9px; font-weight: 700; }
.compliance-item p span { color: #aebfbe; }
.compliance-item--housing img { width: 34px; height: 30px; flex: 0 0 34px; object-fit: contain; padding: 2px; border-radius: 2px; background: #fff; }
.housing-mark-fallback { width: 30px; height: 28px; flex: 0 0 30px; padding: 3px; border-radius: 2px; color: var(--navy); background: #fff; }
.compliance-item--housing { flex-direction: row; gap: 8px; }
.compliance-item--housing p { text-align: left; }
.compliance-item--housing p span { color: #e2c98e; font-size: 8px; }

.view[hidden] { display: none !important; }.view.is-active { display: block; }
.customer-page { min-height: 100vh; display: flex; flex-direction: column; background: #fbfaf7; }
.customer-header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 max(32px, calc((100vw - 1180px) / 2)); color: white; background: var(--navy-deep); }
.customer-header .brand-mark { color: var(--mint); }
.customer-switch { display: flex; align-items: center; gap: 9px; }
.customer-switch a { padding: 9px 13px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 3px; color: #e7eeea; font-size: 10px; font-weight: 700; }
.customer-switch a:hover, .customer-switch a[aria-current="page"] { color: var(--navy); background: var(--mint); }
.customer-main { flex: 1; }
.customer-main .account-view[hidden] { display: none; }
.customer-main .account-view:not([hidden]) { display: block; }
.customer-main .account-shell, .customer-main .account-aside { min-height: calc(100vh - 108px); }
.account-aside-brand { position: relative; z-index: 1; }
.customer-footer { min-height: 38px; display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 9px max(32px, calc((100vw - 1180px) / 2)); color: #84979a; background: #f1f2ee; font-size: 8px; }
.customer-footer a { color: #476756; font-weight: 700; }
.customer-footer a:hover { text-decoration: underline; }
.dashboard-preview-link { display: block; margin-top: 13px; color: #557c67; text-align: center; font-size: 9px; font-weight: 700; }
.dashboard-preview-link:hover { text-decoration: underline; }
.dashboard-page { min-height: 100vh; color: #294552; background: #f5f7f4; }
.dashboard-header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 0 max(32px, calc((100vw - 1240px) / 2)); border-bottom: 1px solid #e6ebe6; background: white; }
.dashboard-nav { height: 68px; display: flex; align-items: stretch; gap: 27px; }
.dashboard-nav a { display: flex; align-items: center; border-bottom: 2px solid transparent; color: #718187; font-size: 10px; font-weight: 600; }
.dashboard-nav a:hover, .dashboard-nav a.is-current { border-color: #6d9278; color: #315947; }
.dashboard-user { display: flex; align-items: center; gap: 9px; }
.dashboard-profile-link { display: flex; align-items: center; gap: 8px; padding: 4px 7px 4px 4px; border-radius: 20px; color: inherit; }
.dashboard-profile-link:hover { background: #f1f5f0; }
.dashboard-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #365e49; background: #e5eee4; font-size: 9px; font-weight: 700; letter-spacing: .015em; }
.dashboard-user-name { color: #496069; font-size: 10px; font-weight: 600; }
.dashboard-signout { margin-left: 10px; color: #66816f; font-size: 9px; font-weight: 700; }
.dashboard-signout:hover { text-decoration: underline; }
.dashboard-main { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 37px 0 20px; }
.dashboard-welcome { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.dashboard-welcome .eyebrow { margin-bottom: 9px; font-size: 8px; }
.dashboard-welcome h1 { margin: 0; color: var(--navy); font: 700 27px "Manrope", sans-serif; letter-spacing: -.055em; }
.dashboard-welcome h1 span { color: #7b9b82; font-size: 18px; }
.dashboard-welcome > div > p:last-child { margin: 7px 0 0; color: #839195; font-size: 10px; }
.dashboard-welcome > div > .last-sign-in { margin-top: 9px; color: #879492; font-size: 8px; }
.dashboard-help { min-height: 39px; padding-inline: 14px; font-size: 9px; }
.dashboard-sample-note { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 17px; padding: 11px 14px; border: 1px solid #e9dfc6; border-radius: 3px; color: #766841; background: #faf6ea; }
.dashboard-sample-note > span { color: #aa8a48; font-size: 13px; }
.dashboard-sample-note p { margin: 0; font-size: 9px; line-height: 1.65; }
.dashboard-sample-note strong { color: #65542f; }
.combined-balance { min-height: 81px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 15px; padding: 15px 20px; border: 1px solid #dce7dd; border-left: 3px solid #70947a; border-radius: 4px; background: linear-gradient(105deg, #edf4ed, #fff 75%); }
.combined-balance p { margin: 0 0 5px; color: #597563; font-size: 8px; font-weight: 700; letter-spacing: .11em; }
.combined-balance div > span { color: #879592; font-size: 9px; }
.combined-balance > strong { color: #173e4d; font: 700 26px "Manrope", sans-serif; letter-spacing: -.045em; }
.dashboard-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.dashboard-balance-card, .dashboard-savings-card { min-height: 163px; padding: 19px 21px 14px; border: 1px solid #e5eae4; border-radius: 4px; background: white; box-shadow: 0 4px 15px rgb(25 56 56 / 3%); }
.dashboard-savings-card { background: #f2f6f1; }
.balance-card-heading, .savings-card-heading { display: flex; align-items: center; gap: 9px; color: #6f8082; font-size: 8px; font-weight: 700; letter-spacing: .075em; }
.balance-card-heading > span:nth-child(2), .savings-card-heading > span:nth-child(2) { display: grid; gap: 4px; }
.balance-card-heading small, .savings-card-heading small { color: #a1acab; font-size: 8px; font-weight: 500; letter-spacing: .04em; }
.dashboard-account-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #547b63; background: #e8f0e7; font-size: 15px; }
.dashboard-account-icon--savings { color: #987b44; background: #f5efdf; }
.icon-button { width: 30px; height: 30px; display: grid; place-items: center; margin-left: auto; border: 0; border-radius: 3px; color: #83918f; background: transparent; letter-spacing: 2px; }
.icon-button:hover { background: #eef2ed; }
.dashboard-balance-caption { margin: 19px 0 1px; color: #839195; font-size: 9px; }
.dashboard-balance-amount { margin: 0; color: #183e4d; font: 700 30px "Manrope", sans-serif; letter-spacing: -.05em; }
.dashboard-balance-amount span { color: #829291; font-size: 19px; }
.balance-card-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 10px; border-top: 1px solid #edf0ec; color: #9aa5a2; font-size: 8px; }
.balance-card-footer > span:first-child { display: flex; align-items: center; gap: 5px; color: #62836b; }
.balance-card-footer i { width: 5px; height: 5px; border-radius: 50%; background: #7cac7c; }
.savings-progress { margin-top: 12px; }
.savings-progress > div { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: #80908a; font-size: 8px; }
.savings-progress > div strong { color: #51725e; font-size: 8px; }
.progress-track { height: 5px; display: block; overflow: hidden; border-radius: 5px; background: #dfe8dd; }
.progress-track i { width: 84%; height: 100%; display: block; border-radius: inherit; background: #779d7e; }
.dashboard-quick-actions { margin: 22px 0; }
.dashboard-quick-actions h2 { margin: 0 0 10px; color: #294552; font: 700 12px "Manrope", sans-serif; }
.quick-action-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quick-action-grid button { min-height: 59px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #e6ebe5; border-radius: 3px; color: #48616a; background: white; text-align: left; font-size: 9px; font-weight: 600; transition: border-color .2s, transform .2s; }
.quick-action-grid button:hover { border-color: #bfd0c1; transform: translateY(-1px); }
.quick-action-grid button > span { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 50%; color: #547c64; background: #edf3ec; font-size: 13px; }
.quick-action-grid button > i { margin-left: auto; color: #7a9880; font-size: 12px; font-style: normal; }
.dashboard-lower-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .8fr); align-items: start; gap: 15px; }
.dashboard-panel { overflow: hidden; border: 1px solid #e5eae4; border-radius: 4px; background: white; }
.dashboard-panel-heading { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #edf0ec; }
.dashboard-panel-heading h2 { margin: 0; color: #294552; font: 700 12px "Manrope", sans-serif; }
.dashboard-panel-heading p { margin: 4px 0 0; color: #97a29f; font-size: 8px; }
.dashboard-panel-heading > a { color: #5e8068; font-size: 8px; font-weight: 700; white-space: nowrap; }
.dashboard-panel-heading > a:hover { text-decoration: underline; }
.transaction-row { min-height: 59px; display: flex; align-items: center; gap: 10px; padding: 9px 15px; border-bottom: 1px solid #f0f2ef; }
.transaction-row:last-child { border-bottom: 0; }
.transaction-icon { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; }
.transaction-icon--deposit { color: #568065; background: #e8f1e8; }
.transaction-icon--shopping { color: #64849a; background: #eaf0f3; }
.transaction-icon--bill { color: #a07a45; background: #f5f0e5; }
.transaction-icon--transfer { color: #786f98; background: #f0eef5; }
.transaction-info { min-width: 0; flex: 1; display: grid; gap: 4px; }
.transaction-info strong { overflow: hidden; color: #455e66; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.transaction-info small { overflow: hidden; color: #9aa5a2; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.transaction-amount { color: #52646a; font-size: 9px; font-weight: 600; white-space: nowrap; }
.transaction-amount--positive { color: #568065; }
.dashboard-side-column { display: grid; gap: 14px; }
.spending-period { padding: 6px 7px; border-radius: 2px; color: #70846f; background: #eff3eb; font-size: 7px; font-weight: 700; letter-spacing: .08em; }
.spending-total { display: grid; gap: 3px; padding: 14px 16px 11px; }
.spending-total strong { color: #214351; font: 700 24px "Manrope", sans-serif; letter-spacing: -.04em; }
.spending-total strong span { color: #81918e; font-size: 16px; }
.spending-total small { color: #9aa5a2; font-size: 8px; }
.spending-category { min-height: 34px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 16px; border-top: 1px solid #f0f2ef; color: #728185; font-size: 8px; }
.spending-category > span { display: flex; align-items: center; gap: 7px; }
.spending-category > strong { color: #51656c; font-size: 8px; }
.category-dot { width: 7px; height: 7px; border-radius: 50%; }
.category-dot--home { background: #71937a; }.category-dot--food { background: #d0ad62; }.category-dot--other { background: #7397aa; }
.dashboard-tip { position: relative; overflow: hidden; padding: 17px 18px; border: 1px solid #dfe8df; border-radius: 4px; background: #edf3ec; }
.dashboard-tip .tip-spark { position: absolute; top: 13px; right: 16px; color: #92af91; font-size: 18px; }
.dashboard-tip .eyebrow { margin: 0 0 10px; color: #6c8973; font-size: 7px; }
.dashboard-tip h2 { margin: 0; color: #294d3a; font: 700 15px "Manrope", sans-serif; letter-spacing: -.03em; }
.dashboard-tip > p:not(.eyebrow) { max-width: 250px; margin: 7px 0 11px; color: #72847a; font-size: 8px; line-height: 1.7; }
.dashboard-tip button { display: flex; justify-content: space-between; width: 100%; padding: 9px 0 0; border: 0; border-top: 1px solid #d9e4d8; color: #476e51; background: transparent; text-align: left; font-size: 8px; font-weight: 700; }
.dashboard-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 19px; padding: 12px 0 0; border-top: 1px solid #e4e9e3; color: #9aa5a2; font-size: 7px; }
.dashboard-toast { position: fixed; right: 20px; bottom: 20px; z-index: 20; max-width: min(360px, calc(100vw - 40px)); padding: 12px 16px; border: 1px solid #dde6de; border-radius: 4px; color: #31513d; background: white; box-shadow: var(--shadow); font-size: 10px; line-height: 1.6; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s; }
.dashboard-toast.is-visible { opacity: 1; transform: translateY(0); }
.profile-page { min-height: 100vh; color: #294552; background: #f5f7f4; }
.profile-return { color: #5e8068; font-size: 9px; font-weight: 700; }
.profile-return:hover { text-decoration: underline; }
.profile-main { width: min(760px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 44px; }
.profile-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 23px; color: #6c817d; font-size: 9px; font-weight: 600; }
.profile-back:hover { color: #315947; }
.profile-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.profile-avatar { width: 56px; height: 56px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #365e49; background: #e2ede2; box-shadow: 0 2px 9px rgb(16 45 67 / 8%); font: 700 17px "Manrope", sans-serif; }
.profile-heading .eyebrow { margin-bottom: 5px; font-size: 7px; }
.profile-heading h1 { margin: 0; color: var(--navy); font: 700 22px "Manrope", sans-serif; letter-spacing: -.04em; }
.profile-email { margin: 4px 0 0; color: #82908f; font-size: 9px; }
.profile-signin-card { min-height: 66px; display: flex; align-items: center; gap: 11px; margin-bottom: 24px; padding: 12px 15px; border: 1px solid #e3e9e2; border-radius: 4px; background: #fff; }
.profile-section-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; border-radius: 50%; color: #62806b; background: #edf3eb; font-size: 15px; }
.profile-signin-card h2 { margin: 0; color: #486068; font: 700 10px "Manrope", sans-serif; }
.profile-signin-card p { margin: 4px 0 0; color: #8c9998; font-size: 8px; }
.profile-demo-tag { margin-left: auto; padding: 5px 7px; border-radius: 2px; color: #92733d; background: #f7f1e4; font-size: 7px; font-weight: 700; letter-spacing: .08em; }
.profile-menu-section > h2 { margin: 0 0 9px; color: #314f5a; font: 700 13px "Manrope", sans-serif; }
.profile-menu { overflow: hidden; border: 1px solid #e4e9e3; border-radius: 4px; background: #fff; }
.profile-menu > button, .profile-more > button { width: 100%; min-height: 59px; display: flex; align-items: center; gap: 11px; padding: 10px 14px; border: 0; border-bottom: 1px solid #edf0ec; color: #4e656b; background: #fff; text-align: left; }
.profile-menu > button:last-child { border-bottom: 0; }
.profile-menu > button:hover, .profile-more > button:hover { background: #f8faf7; }
.profile-accordion { border-bottom: 1px solid #edf0ec; background: #fff; }
.profile-accordion:last-child { border-bottom: 0; }
.profile-accordion > summary { min-height: 59px; display: flex; align-items: center; gap: 11px; padding: 10px 14px; list-style: none; cursor: pointer; }
.profile-accordion > summary::-webkit-details-marker { display: none; }
.profile-accordion > summary:hover { background: #f8faf7; }
.profile-accordion[open] > summary { background: #f8faf7; }
.profile-accordion[open] > summary .profile-chevron { transform: rotate(90deg); }
.profile-accordion .profile-menu-icon { flex: 0 0 29px; }
.profile-accordion .profile-menu-copy { flex: 1; }
.signin-preferences { padding: 0 14px 12px 54px; background: #f8faf7; }
.signin-preference-row { min-height: 48px; display: grid; grid-template-columns: minmax(95px, 1fr) minmax(100px, 1fr) auto; align-items: center; gap: 10px; border-top: 1px solid #e9eee8; }
.signin-preference-row > span:first-child { display: grid; gap: 3px; }
.signin-preference-row > span:first-child strong { color: #496169; font-size: 8px; }
.signin-preference-row > span:first-child small { color: #98a3a0; font-size: 7px; }
.signin-preference-value { color: #526a6d; font-size: 9px; font-weight: 600; letter-spacing: .035em; }
.signin-preference-row > button { padding: 6px 8px; border: 1px solid #dce6dc; border-radius: 3px; color: #56775f; background: white; font-size: 8px; font-weight: 700; }
.signin-preference-row > button:hover { border-color: #adc4af; background: #f1f6f0; }
.signin-preview-note { margin: 8px 0 0; color: #8d9994; font-size: 7px; line-height: 1.5; }
.profile-menu-icon { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 29px; border-radius: 50%; color: #5e8068; background: #edf3ec; font-size: 13px; }
.profile-menu-copy { flex: 1; display: grid; gap: 4px; }
.profile-menu-copy strong { color: #3d5862; font-size: 9px; font-weight: 700; }
.profile-menu-copy small { color: #98a3a0; font-size: 7px; }
.profile-chevron { color: #82998a; font-size: 19px; line-height: 1; }
.profile-more { overflow: hidden; margin-top: 17px; border: 1px solid #e4e9e3; border-radius: 4px; background: #fff; }
.profile-more > button { min-height: 47px; justify-content: space-between; padding-inline: 15px; color: #496269; font-size: 9px; font-weight: 600; }
.profile-more > button:last-child { border-bottom: 0; }
.profile-disclaimer { margin: 16px 0 0; color: #9aa5a2; font-size: 8px; line-height: 1.6; }
.account-view { min-height: calc(100vh - 108px); background: #fbfaf7; }.account-shell { min-height: calc(100vh - 108px); display: grid; grid-template-columns: minmax(330px, .83fr) 1.17fr; }.account-aside { min-height: calc(100vh - 108px); position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 38px clamp(32px, 6vw, 92px); color: white; background: var(--navy); }.account-aside::after { position: absolute; right: -60px; bottom: 18%; width: 210px; height: 210px; content: ""; border: 1px solid rgb(255 255 255 / 9%); border-radius: 50%; }.account-aside--signup { background: #234b50; }.account-aside > div { position: relative; z-index: 1; margin: auto 0; }.account-aside h1 { font-size: clamp(37px, 4.2vw, 53px); }.account-aside > div > p:last-child { max-width: 325px; margin: 20px 0 0; color: #c4d1d2; font-size: 12px; line-height: 1.9; }.aside-caption { color: #8fa6aa; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.account-main { min-height: 100%; display: flex; flex-direction: column; align-items: center; padding: 24px 35px 38px; }.back-home { align-self: flex-end; border: 0; color: #687a80; background: transparent; font-size: 10px; }.back-home span { padding-right: 6px; color: var(--mint-deep); }.form-panel { width: min(100%, 390px); margin: auto; padding: 24px 0; }.form-panel--signup { width: min(100%, 440px); }.form-icon { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 50%; color: #527a63; background: #e6f0e8; font-size: 17px; }.form-panel .eyebrow { margin-bottom: 9px; font-size: 8px; }.form-panel h2 { margin: 0; font: 700 27px "Manrope", sans-serif; letter-spacing: -.05em; }.form-intro { margin: 7px 0 18px; color: #74858b; font-size: 11px; }.demo-notice { margin: 0 0 17px; padding: 10px 12px; border: 1px solid #eadfbd; border-radius: 3px; color: #71623f; background: #f8f3e6; font-size: 9px; line-height: 1.65; }.demo-notice strong { color: #5d4f2c; }
.form-panel form > label:not(.checkbox-label), .input-grid label, .label-row > label { display: block; margin: 13px 0 6px; color: #354f5b; font-size: 9px; font-weight: 700; }.form-panel input:not([type="checkbox"]),.form-panel select { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #dfe5e1; border-radius: 3px; outline: none; color: var(--ink); background: white; font-size: 10px; transition: border-color .2s, box-shadow .2s; }.form-panel input::placeholder { color: #a7b0b1; }.form-panel input:focus,.form-panel select:focus { border-color: #6d9679; box-shadow: 0 0 0 3px rgb(109 150 121 / 12%); }.label-row { display: flex; align-items: center; justify-content: space-between; }.inline-button { padding: 0; border: 0; color: #58806a; background: transparent; font-size: 9px; font-weight: 700; }.inline-button:hover { color: var(--navy); text-decoration: underline; }.label-row .inline-button { margin-top: 6px; }
.password-wrap { position: relative; }.password-wrap input { padding-right: 57px !important; }.password-toggle { position: absolute; top: 0; right: 10px; height: 43px; border: 0; color: #668172; background: transparent; font-size: 9px; font-weight: 700; }.checkbox-label { display: flex; align-items: center; gap: 8px; margin: 15px 0; color: #66797f; font-size: 9px; }.checkbox-label input { width: 14px; height: 14px; margin: 0; accent-color: #568067; }
.form-switch { margin: 16px 0; color: #7b898d; text-align: center; font-size: 9px; }.form-switch .inline-button { margin-left: 4px; }.security-caption { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #e9ede8; color: #879499; font-size: 8px; line-height: 1.7; }.security-caption span { color: #658975; font-size: 13px; }.form-feedback { min-height: 18px; margin-top: 10px; color: #457455; font-size: 10px; line-height: 1.5; }.form-feedback:empty { display: none; }.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.optional { color: #899699; font-weight: 400; }

.admin-view { min-height: calc(100vh - 30px); background: #f5f7f5; }.admin-topbar { min-height: 67px; display: flex; justify-content: space-between; align-items: center; padding: 0 35px; border-bottom: 1px solid #e6ebe6; background: #fff; }.admin-topbar-right { display: flex; align-items: center; gap: 20px; }.admin-demo-pill { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #eddcbb; border-radius: 3px; color: #796539; background: #faf5e9; font-size: 8px; font-weight: 700; letter-spacing: .08em; }.admin-demo-pill i { width: 6px; height: 6px; border-radius: 50%; background: #c19b4b; }.admin-layout { min-height: calc(100vh - 97px); display: grid; grid-template-columns: 218px minmax(0, 1fr); }.admin-sidebar { position: relative; display: flex; flex-direction: column; padding: 28px 15px; border-right: 1px solid #e6ebe6; background: #fff; }.admin-sidebar-label { margin: 3px 10px 13px; color: #94a09e; font-size: 8px; font-weight: 700; letter-spacing: .13em; }.admin-nav-item { min-height: 39px; display: flex; align-items: center; gap: 11px; margin: 2px 0; padding: 0 11px; border: 0; border-radius: 3px; color: #66767a; background: transparent; text-align: left; font-size: 10px; }.admin-nav-item > span:first-child { width: 15px; color: #7d9386; font-size: 13px; }.admin-nav-item.is-selected { color: #284f41; background: #edf3ed; font-weight: 700; }.admin-nav-item:hover { background: #f2f5f1; }.nav-lock { margin-left: auto; color: #9aa6a2; }.sidebar-divider { margin: 21px 7px 19px; border-top: 1px solid #e9ede8; }.admin-profile { display: flex; align-items: center; gap: 9px; margin: auto 0 0; padding: 15px 4px 2px; border-top: 1px solid #e9ede8; }.admin-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #46644f; background: #e1ebe1; font-size: 10px; font-weight: 700; }.admin-profile strong,.admin-profile small { display: block; }.admin-profile strong { color: #37505b; font-size: 9px; }.admin-profile small { margin-top: 3px; color: #98a29e; font-size: 8px; }.admin-profile-menu { margin-left: auto; color: #94a09e; font-size: 10px; letter-spacing: 2px; }
.admin-content { min-width: 0; padding: 39px clamp(24px, 4vw, 58px) 20px; }.admin-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }.admin-heading .eyebrow { margin-bottom: 8px; font-size: 8px; }.admin-heading h1 { margin: 0; color: var(--navy); font: 700 25px "Manrope", sans-serif; letter-spacing: -.055em; }.admin-heading h1 span { color: #8baa8e; font-size: 17px; }.admin-heading p:last-child { margin: 7px 0 0; color: #849294; font-size: 10px; }.admin-demo-alert { display: flex; align-items: flex-start; gap: 10px; margin: 23px 0 18px; padding: 12px 14px; border: 1px solid #e9dfc6; border-radius: 3px; color: #786842; background: #faf6ea; }.admin-demo-alert > span { flex: 0 0 auto; font-size: 13px; }.admin-demo-alert p { margin: 0; font-size: 9px; line-height: 1.7; }.admin-demo-alert strong { color: #65542f; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.stat-card { min-height: 130px; position: relative; overflow: hidden; padding: 16px; border: 1px solid #e7ece7; border-radius: 4px; background: #fff; }.stat-label { display: flex; justify-content: space-between; color: #879694; font-size: 8px; font-weight: 700; letter-spacing: .07em; }.stat-label span { color: #99a8a0; }.stat-card > strong { display: block; margin: 15px 0 8px; color: #183e4d; font: 700 25px "Manrope", sans-serif; letter-spacing: -.05em; }.stat-foot { position: relative; z-index: 1; color: #8b9998; font-size: 8px; }.trend-up { color: #548267; font-style: normal; font-weight: 700; }.trend-neutral { color: #b08b42; font-style: normal; }.sparkline { width: 74px; height: 35px; position: absolute; right: 14px; bottom: 16px; opacity: .75; clip-path: polygon(0 78%, 16% 59%, 30% 68%, 44% 25%, 57% 50%, 73% 36%, 87% 45%, 100% 9%, 100% 100%, 0 100%); }.sparkline--green { background: linear-gradient(0deg, #e6f1e8, #c3ddca); }.sparkline--blue { background: linear-gradient(0deg, #e8f0f3, #c4dce2); }.sparkline--gold { background: linear-gradient(0deg, #f6f0df, #e8d8a7); }
.admin-lower-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, .8fr); gap: 14px; margin-top: 17px; }.admin-panel { min-width: 0; border: 1px solid #e7ece7; border-radius: 4px; background: #fff; }.panel-heading { min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #edf0ed; }.panel-heading h2 { margin: 0; color: #254454; font: 700 12px "Manrope", sans-serif; }.panel-heading p { margin: 4px 0 0; color: #9aa5a1; font-size: 8px; }.customer-table-wrap { overflow-x: auto; }.admin-panel table { width: 100%; border-collapse: collapse; text-align: left; }.admin-panel th { padding: 11px 10px; color: #96a19e; font-size: 7px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }.admin-panel th:first-child,.admin-panel td:first-child { padding-left: 15px; }.admin-panel td { height: 51px; padding: 8px 10px; border-top: 1px solid #f0f2ef; color: #77868a; font-size: 8px; white-space: nowrap; }.admin-panel td:first-child { display: flex; align-items: center; gap: 8px; }.table-avatar { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 50%; color: #4d705b; font-size: 7px; font-weight: 700; }.avatar--mint { background: #e4eee4; }.avatar--blue { color: #4a6e82; background: #e6eef2; }.avatar--gold { color: #897340; background: #f4eedf; }.avatar--lavender { color: #736b8b; background: #efedf5; }.table-person strong,.table-person small { display: block; }.table-person strong { color: #435c64; font-size: 8px; }.table-person small { margin-top: 3px; color: #a1aaa7; font-size: 7px; }.status-pill { padding: 4px 7px; border-radius: 12px; font-size: 7px; }.status--active { color: #548066; background: #eaf3ea; }.status--review { color: #9a7942; background: #f8f1e3; }.table-footnote { margin: 0; padding: 9px 15px; border-top: 1px solid #edf0ed; color: #a2aba7; font-size: 7px; }.live-indicator { display: flex; align-items: center; gap: 6px; color: #927744; font-size: 7px; font-weight: 700; letter-spacing: .09em; }.live-indicator i { width: 5px; height: 5px; background: #c39c4c; }.admin-activity { display: flex; gap: 10px; padding: 15px 16px; border-bottom: 1px solid #f0f2ef; }.activity-dot { width: 7px; height: 7px; flex: 0 0 7px; margin-top: 3px; border-radius: 50%; }.activity-dot--green { background: #74a67e; }.activity-dot--blue { background: #75a0b6; }.activity-dot--gold { background: #c5a359; }.admin-activity strong { color: #4c6369; font-size: 8px; }.admin-activity p { margin: 4px 0; color: #8f9b9b; font-size: 8px; }.admin-activity small { color: #a6afaa; font-size: 7px; }.activity-more { width: 100%; display: flex; justify-content: space-between; padding: 13px 16px; border: 0; color: #60806b; background: transparent; text-align: left; font-size: 8px; font-weight: 700; }.admin-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 21px; color: #96a19d; font-size: 8px; }.admin-footer span { color: #b0aaa0; }.admin-feedback { position: fixed; right: 20px; bottom: 20px; z-index: 20; max-width: min(360px, calc(100vw - 40px)); padding: 12px 16px; border: 1px solid #dde6de; border-radius: 4px; color: #31513d; background: white; box-shadow: var(--shadow); font-size: 11px; line-height: 1.6; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s; }.admin-feedback.is-visible { opacity: 1; transform: translateY(0); }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 20; max-width: min(360px, calc(100vw - 40px)); padding: 12px 16px; border: 1px solid #dde6de; border-radius: 4px; color: #31513d; background: white; box-shadow: var(--shadow); font-size: 11px; line-height: 1.6; opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s; }.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (min-width: 1400px) { .hero-inner { min-height: 559px; }.hero { min-height: 610px; }.hero-art { transform: scale(1.08); }.hero-footer-inner { height: 51px; } }
@media (max-width: 1000px) {
  .header-inner { gap: 18px; }.primary-nav { gap: 13px; }.primary-nav a { font-size: 9px; }.header-actions { gap: 6px; }.button--small { padding: 0 12px; }.hero-art { transform: scale(.92); transform-origin: center right; }.hero-inner { gap: 0; }.feature { padding-inline: 15px; }.feature-grid { width: min(1180px, calc(100% - 36px)); }.account-card { left: 3%; }.admin-layout { grid-template-columns: 180px minmax(0, 1fr); }.admin-content { padding-inline: 24px; }.admin-lower-grid { grid-template-columns: minmax(0, 1.3fr) minmax(220px, .8fr); }
  .dashboard-header { padding-inline: 22px; }.dashboard-main { width: calc(100% - 44px); }.dashboard-lower-grid { grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr); }.quick-action-grid { gap: 7px; }.quick-action-grid button { padding-inline: 8px; font-size: 8px; }
}
@media (max-width: 760px) {
  .page-width { width: min(100% - 40px, 560px); }.utility-bar__inner { width: calc(100% - 32px); min-height: 36px; }.utility-links, .utility-tools { gap: 12px; }.utility-links a, .utility-tools a, .utility-tools > button { font-size: 8px; }.utility-current { display: none; }.site-header { height: 66px; }.header-inner { width: calc(100% - 34px); }.brand-mark { width: 31px; height: 31px; }.brand-name { font-size: 12px; }.brand-name span { font-size: 8px; }.menu-toggle { width: 36px; height: 36px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-left: auto; border: 1px solid #e5ebe5; border-radius: 3px; background: transparent; }.menu-toggle span { width: 15px; height: 1px; background: var(--navy); }.primary-nav { position: absolute; top: 65px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 9px 20px 13px; border-bottom: 1px solid var(--line); background: var(--paper); box-shadow: 0 10px 20px rgb(16 45 67 / 8%); }.primary-nav.is-open { display: flex; }.primary-nav a { padding: 12px 5px; border-bottom: 1px solid #ebefeb; font-size: 12px; }.primary-nav a:last-child { border: 0; }.header-actions { gap: 2px; }.button--login { min-height: 38px; padding-inline: 9px; font-size: 10px; }.header-actions .button--small { min-height: 38px; padding-inline: 10px; font-size: 9px; }
  .hero { min-height: unset; }.hero-inner { min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; }.hero-copy { padding: 48px 0 0; }.hero h1 { font-size: clamp(44px, 10vw, 61px); }.eyebrow { margin-bottom: 18px; font-size: 8px; }.hero-description { max-width: 420px; margin: 17px 0 21px; font-size: 12px; }.hero-art { width: min(100%, 450px); min-height: 380px; align-self: center; margin-top: 5px; transform: none; }.account-card { top: 55px; left: 6%; width: 78%; }.activity-card { right: 2%; bottom: 32px; width: 78%; }.floating-note { top: 254px; right: -1%; }.decor--cross { left: 3%; }.decor--circle { right: 4%; }.hero-footer-inner { height: auto; min-height: 45px; justify-content: center; gap: 12px; }.hero-footer-inner span:not(.footer-star) { font-size: 7px; letter-spacing: .08em; }.hero-footer-inner span:nth-of-type(5) { display: none; }.feature-grid { width: min(100% - 40px, 560px); grid-template-columns: 1fr; padding-block: 13px; }.feature { padding: 13px 2px; border-right: 0; border-bottom: 1px solid #ebeeeb; }.feature:last-child { border-bottom: 0; }.feature p { max-width: none; }
  .solutions-section { padding-block: 62px; }.solutions-heading { align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 22px; }.solutions-heading h2 { font-size: 34px; }.solution-grid { grid-template-columns: 1fr; gap: 15px; }.solution-card > img { height: 205px; }.solution-card p { min-height: 0; }.how-section { padding-top: 70px; padding-bottom: 69px; }.section-intro h2,.promise-copy h2 { font-size: 38px; }.how-cards { grid-template-columns: 1fr; gap: 33px; margin-top: 29px; }.how-card p { min-height: 0; }.how-art { height: 190px; margin-bottom: 15px; }.promise-inner { min-height: unset; grid-template-columns: 1fr; gap: 0; padding-block: 22px 40px; }.promise-art { width: 240px; height: 220px; }.promise-orbit--outer { width: 210px; height: 210px; }.promise-orbit--inner { width: 155px; height: 155px; }.promise-house { width: 86px; height: 86px; font-size: 48px; }.promise-copy { padding: 0; }.promise-copy h2 { font-size: 40px; }.customer-service { min-height: 0; align-items: flex-start; flex-wrap: wrap; gap: 12px; padding-block: 32px; }.customer-service > div:nth-child(2) { flex: 1; }.customer-service .button { margin-left: 59px; }.cta-section { min-height: 195px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 20px; }.cta-section h2 { font-size: 27px; }.footer-main { min-height: 0; align-items: flex-start; flex-wrap: wrap; gap: 20px; padding-block: 25px; }.footer-main > p { margin-left: auto; text-align: right; }.footer-links { width: 100%; flex-wrap: wrap; gap: 12px 22px; }.footer-compliance { padding: 10px 16px; }.footer-compliance__inner { grid-template-columns: 1fr; gap: 6px; }.compliance-item { min-height: 34px; justify-content: flex-start; }.compliance-item + .compliance-item { padding-top: 6px; border-top: 1px solid rgb(255 255 255 / 14%); border-left: 0; }.fdic-disclosure__mark { padding: 5px 7px; font-size: 10px; }.compliance-item p { font-size: 8px; }.compliance-item p strong { font-size: 9px; }.compliance-item--housing img { width: 30px; height: 27px; flex-basis: 30px; }.housing-mark-fallback { width: 27px; height: 25px; flex-basis: 27px; }.compliance-item--housing { flex-direction: row; gap: 8px; }.compliance-item--housing p { text-align: left; }.footer-legal { min-height: 0; align-items: flex-start; flex-direction: column; gap: 7px; padding-block: 12px; line-height: 1.5; }
  .customer-header { min-height: 60px; padding-inline: 17px; }.customer-header .brand-name { font-size: 11px; }.customer-header .brand-name span { font-size: 7px; }.customer-switch { gap: 6px; }.customer-switch a { padding: 8px 9px; font-size: 9px; }.customer-main .account-shell, .customer-main .account-aside { min-height: 0; }.customer-aside-brand { display: none; }.customer-footer { align-items: flex-start; flex-direction: column; gap: 5px; padding: 11px 20px; line-height: 1.5; }
  .dashboard-header { min-height: 60px; flex-wrap: wrap; gap: 0 8px; padding: 9px 16px; }.dashboard-header .brand-mark { width: 28px; height: 28px; }.dashboard-header .brand { gap: 6px; }.dashboard-header .brand-name { font-size: 10px; }.dashboard-header .brand-name span { font-size: 7px; }.dashboard-nav { height: 34px; order: 3; width: 100%; justify-content: center; gap: 28px; }.dashboard-nav a { font-size: 9px; }.dashboard-user { gap: 5px; }.dashboard-profile-link { gap: 5px; padding: 3px; }.dashboard-avatar { width: 27px; height: 27px; font-size: 8px; }.dashboard-user-name { font-size: 8px; }.dashboard-signout { margin-left: 3px; font-size: 8px; }.dashboard-main { width: calc(100% - 32px); padding-top: 23px; }.dashboard-welcome { align-items: flex-start; gap: 10px; }.dashboard-welcome h1 { font-size: 21px; }.dashboard-welcome > div > p:last-child { font-size: 9px; }.dashboard-welcome > div > .last-sign-in { font-size: 7px; }.dashboard-help { min-height: 33px; gap: 5px; padding-inline: 8px; font-size: 8px; white-space: nowrap; }.dashboard-sample-note { padding: 9px; }.dashboard-sample-note p { font-size: 8px; }.combined-balance { min-height: 72px; gap: 10px; padding: 12px; }.combined-balance p { font-size: 7px; }.combined-balance > strong { font-size: 22px; }.dashboard-overview-grid { grid-template-columns: 1fr; gap: 10px; }.dashboard-balance-card, .dashboard-savings-card { min-height: 151px; padding: 15px; }.dashboard-balance-caption { margin-top: 14px; }.dashboard-balance-amount { font-size: 27px; }.dashboard-quick-actions { margin-block: 18px; }.quick-action-grid { grid-template-columns: 1fr 1fr; gap: 8px; }.quick-action-grid button { min-height: 51px; font-size: 8px; }.dashboard-lower-grid { grid-template-columns: 1fr; gap: 12px; }.dashboard-panel-heading { padding-inline: 12px; }.transaction-row { padding-inline: 10px; }.transaction-info strong { font-size: 8px; }.transaction-amount { font-size: 8px; }.dashboard-footer { align-items: flex-start; flex-direction: column; gap: 5px; line-height: 1.5; }
  .profile-main { width: calc(100% - 32px); padding-top: 22px; }.profile-return { display: none; }.profile-signin-card { padding-inline: 11px; }
  .account-view { min-height: calc(100vh - 96px); }.account-shell { min-height: calc(100vh - 96px); grid-template-columns: 1fr; }.account-aside { min-height: 0; padding: 17px 22px 19px; }.account-aside > div { display: none; }.account-aside::after { display: none; }.aside-caption { margin-top: 19px; font-size: 7px; }.account-aside .brand-mark { width: 28px; height: 28px; }.account-main { padding: 14px 23px 30px; }.back-home { align-self: flex-start; padding-left: 0; }.form-panel { margin: 18px auto 0; padding-block: 16px; }.form-icon { margin-bottom: 14px; }.form-panel h2 { font-size: 25px; }.form-panel--signup { padding-bottom: 3px; }
  .admin-view { min-height: calc(100vh - 30px); }.admin-topbar { min-height: 59px; padding: 0 17px; }.admin-topbar-right { gap: 9px; }.admin-demo-pill { font-size: 7px; }.admin-topbar .button { font-size: 9px; }.admin-layout { display: block; min-height: 0; }.admin-sidebar { display: none; }.admin-content { padding: 25px 17px 18px; }.admin-heading { align-items: flex-start; }.admin-heading h1 { font-size: 20px; }.admin-heading p:last-child { max-width: 240px; font-size: 9px; line-height: 1.6; }.admin-heading .button { min-height: 35px; gap: 5px; padding-inline: 8px; font-size: 8px; white-space: nowrap; }.admin-demo-alert { margin-top: 16px; padding: 10px; }.admin-demo-alert p { font-size: 8px; }.stat-grid { gap: 7px; }.stat-card { min-height: 105px; padding: 10px; }.stat-label { min-height: 20px; align-items: flex-start; font-size: 6px; line-height: 1.4; }.stat-card > strong { margin: 8px 0 6px; font-size: 21px; }.stat-foot { font-size: 7px; }.sparkline { width: 45px; height: 22px; right: 9px; bottom: 9px; opacity: .45; }.admin-lower-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }.admin-panel th { padding: 9px 7px; font-size: 6px; }.admin-panel td { padding: 7px; font-size: 7px; }.admin-panel td:first-child { padding-left: 9px; }.table-person strong { font-size: 7px; }.table-person small { font-size: 6px; }.admin-panel th:first-child { padding-left: 9px; }.admin-footer { flex-direction: column; gap: 5px; }.form-panel--signup .input-grid { gap: 8px; }
}
@media (max-width: 400px) {
  .header-inner { gap: 8px; }.brand-name { font-size: 11px; }.brand-name span { font-size: 7px; }.header-actions .button--small { padding-inline: 7px; font-size: 8px; }.button--login { padding-inline: 6px; font-size: 9px; }.hero-actions { gap: 14px; }.hero-actions .button { padding-inline: 15px; }.hero-art { min-height: 340px; }.account-card { top: 49px; padding: 18px; }.activity-card { bottom: 27px; padding: 13px; }.floating-note { top: 231px; padding: 8px; }.account-card-label { font-size: 7px; }.balance-amount { font-size: 32px; }.hero-footer-inner { gap: 7px; }.hero-footer-inner span:not(.footer-star) { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }