@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

* { box-sizing: border-box; }
body { margin: 0; background: #ffffff; color: #0f172a; font-family: 'DM Sans', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #60a5fa; outline-offset: 4px; }
h1, h2, p { margin: 0; }
.icon { width: 21px; height: 21px; flex-shrink: 0; }
.auth-shell { display: grid; grid-template-columns: 1fr 1fr; max-width: 1800px; min-height: 100svh; padding: 20px; gap: 20px; margin: auto; }
.story { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 38px clamp(30px, 4.4vw, 80px) 28px; border-radius: 20px; color: #fff; background: linear-gradient(145deg, #172554, #1e3a8a); }
.story::before { content: ''; position: absolute; z-index: -1; width: 700px; height: 700px; border: 1px solid #ffffff0a; border-radius: 50%; bottom: -450px; right: -280px; box-shadow: 0 0 0 65px #ffffff03, 0 0 0 130px #ffffff03, 0 0 0 195px #ffffff03; }
.story::after { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 0 0, #2563eb40, transparent 65%); }
.brand { display: inline-flex; gap: 12px; align-items: center; align-self: flex-start; font: 700 22px/1.2 'Manrope', sans-serif; letter-spacing: -.8px; }
.brand-symbol { width: 43px; height: 43px; display: grid; place-items: center; color: #172554; background: #67e8f9; border-radius: 13px 13px 13px 3px; }
.brand-symbol .icon { width: 25px; height: 25px; }
.brand small { display: block; font: 500 10px/1.6 'DM Sans', sans-serif; letter-spacing: 4px; color: #bfdbfe; margin-top: 4px; }
.story-content { width: 100%; max-width: 490px; margin: 55px auto 40px; }
.eyebrow { display: flex; align-items: center; gap: 9px; font-size: 9px; letter-spacing: 1.8px; font-weight: 600; color: #bfdbfe; }
.eyebrow > span { width: 6px; height: 6px; background: #38bdf8; border-radius: 50%; box-shadow: 0 0 0 4px #38bdf813; }
h1 { font: 500 clamp(40px, 4.2vw, 68px)/1.13 'Manrope', sans-serif; letter-spacing: -2.8px; margin: 24px 0 20px; }
h1 em { color: #67e8f9; font-style: normal; }
.story-description { max-width: 355px; font-size: 14px; line-height: 1.9; color: #cbd5e1; }
.preview { margin-top: 32px; padding: 23px; background: linear-gradient(125deg, #ffffff12, #ffffff06); border: 1px solid #ffffff23; border-radius: 16px; box-shadow: 0 20px 45px #17255415; }
.preview-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #dbeafe; font-size: 11px; }
.preview-top > span:first-child { display: flex; align-items: center; gap: 9px; }
.preview-top .icon { width: 16px; height: 16px; }
.preview-label { font-size: 8px; letter-spacing: 1.4px; color: #bfdbfe; padding: 5px 7px; border: 1px solid #ffffff20; border-radius: 5px; }
.preview-summary { display: flex; align-items: center; justify-content: space-between; margin-top: 23px; }
.preview-caption { display: block; font-size: 10px; color: #bfdbfe; margin-bottom: 7px; }
.preview-summary strong { font: 600 clamp(16px, 1.5vw, 23px)/1.4 'Manrope', sans-serif; letter-spacing: -.6px; }
.preview-summary strong > span { color: #67e8f9; margin-left: 10px; }
.chart-icon { width: 38px; height: 38px; border-radius: 50%; background: #38bdf812; color: #67e8f9; display: grid; place-items: center; }
.chart { position: relative; height: 112px; margin-top: 20px; }
.chart-grid { position: absolute; inset: 0; background: repeating-linear-gradient(to top, #ffffff13 0 1px, transparent 1px 37px); }
.chart-bars { position: absolute; inset: 0 8px; display: flex; align-items: flex-end; gap: 12px; }
.chart-bars i { flex: 1; height: var(--height); border-radius: 4px 4px 0 0; background: #38bdf8; }
.chart-bars i:nth-child(-n+3) { background: #2563eb; }
.chart-bars i:nth-last-child(-n+3) { background: #67e8f9; }
.chart-caption { display: flex; justify-content: space-between; margin-top: 10px; font-size: 9px; color: #bfdbfe; }
.goal-preview { display: flex; align-items: center; gap: 11px; padding-top: 18px; margin-top: 20px; border-top: 1px solid #ffffff18; }
.goal-icon { width: 35px; height: 35px; display: grid; place-items: center; color: #67e8f9; background: #ffffff0d; border-radius: 10px; }
.goal-preview strong, .goal-preview div > span { display: block; font-size: 10px; }
.goal-preview div > span { color: #bfdbfe; font-size: 9px; margin-top: 4px; }
.goal-check { margin-left: auto; display: grid; place-items: center; background: #67e8f9; color: #172554; border-radius: 50%; width: 23px; height: 23px; }
.goal-check .icon { width: 13px; height: 13px; }
.story-features { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.story-features > span { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #bfdbfe; }
.story-features .icon { width: 14px; height: 14px; color: #67e8f9; }
.story-footer { display: flex; justify-content: space-between; gap: 12px; color: #bfdbfe; font-size: 10px; }
.story-footer > span:last-child { display: flex; align-items: center; gap: 7px; }
.story-footer .icon { width: 14px; height: 14px; }
.login-panel { display: flex; flex-direction: column; padding: 23px clamp(20px, 3.4vw, 64px) 8px; }
.panel-top, .panel-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 10px; color: #64748b; }
.panel-top a, .panel-footer a { display: flex; align-items: center; gap: 4px; color: #1d4ed8; }
.panel-top .icon, .panel-footer .icon { width: 13px; height: 13px; }
.form-container { width: 100%; max-width: 390px; margin: auto; padding: 65px 0 50px; }
.welcome-symbol { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 14px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; margin-bottom: 26px; }
.form-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: #1d4ed8; margin-bottom: 12px; }
h2 { font: 700 clamp(26px, 2.4vw, 35px)/1.24 'Manrope', sans-serif; letter-spacing: -1.25px; color: #0f172a; }
.form-description { font-size: 13px; line-height: 1.8; color: #64748b; margin-top: 13px; }
form { margin-top: 30px; }
.field { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 600; }
.input-wrap { display: flex; align-items: center; position: relative; margin-bottom: 20px; }
.input-wrap > .icon, .email-icon { position: absolute; left: 15px; color: #64748b; width: 17px; height: 17px; pointer-events: none; }
.email-icon { font-size: 18px; line-height: 17px; }
input:not([type='checkbox']) { width: 100%; min-width: 0; height: 52px; background: #ffffff; border: 1px solid #dbe4f0; border-radius: 9px; color: #0f172a; padding: 0 15px 0 43px; font-size: 13px; transition: border-color .15s, box-shadow .15s; }
input::placeholder { color: #64748b; }
input:not([type='checkbox']):focus { border-color: #2563eb; outline: none; box-shadow: 0 0 0 3px #2563eb20; }
input[aria-invalid='true'] { border-color: #b95e50; }
.password-wrap input { padding-right: 61px; }
.password-toggle { position: absolute; right: 5px; min-width: 50px; min-height: 42px; padding: 8px; background: none; border: 0; color: #1d4ed8; font-size: 11px; font-weight: 600; border-radius: 5px; }
.password-toggle:hover { color: #172554; background: #eff6ff; }
.remember { display: flex; align-items: center; gap: 9px; cursor: pointer; color: #475569; font-size: 12px; margin: 2px 0 23px; width: fit-content; min-height: 24px; }
.remember input { margin: 0; width: 16px; height: 16px; accent-color: #1d4ed8; }
.submit-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; border: 1px solid #1d4ed8; border-radius: 9px; padding: 14px 18px; color: white; background: linear-gradient(110deg, #2455ed, #0284c7); font-size: 13px; font-weight: 600; box-shadow: 0 4px 8px #1d4ed813; transition: background .15s, transform .15s; }
.submit-button:hover { background: #1e40af; transform: translateY(-1px); }
.submit-button > span { font-size: 22px; line-height: 1; font-weight: 400; color: #67e8f9; }
.auth-switch { text-align: center; font-size: 12px; color: #64748b; margin-top: 22px; line-height: 1.8; }
.auth-switch a { color: #1d4ed8; font-weight: 700; margin-left: 3px; }
.auth-switch a:hover, .panel-top a:hover, .panel-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.divider { display: flex; align-items: center; gap: 12px; color: #64748b; font-size: 8px; font-weight: 600; letter-spacing: 1.2px; margin: 32px 0 18px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #dbe4f0; }
.download-link { display: flex; align-items: center; gap: 13px; border: 1px solid #dbe4f0; border-radius: 11px; padding: 15px; background: #f8faff; transition: background .15s, border-color .15s; }
.download-link:hover { border-color: #93c5fd; background: #eff6ff; }
.download-icon { display: grid; place-items: center; width: 36px; height: 36px; background: #fff; color: #1d4ed8; border: 1px solid #dbeafe; border-radius: 9px; }
.download-icon .icon { width: 19px; height: 19px; }
.download-link strong { display: block; font-size: 12px; font-weight: 600; }
.download-link small { display: block; margin-top: 5px; font-size: 10px; color: #64748b; }
.download-link > .icon { margin-left: auto; width: 18px; height: 18px; color: #1d4ed8; }
.privacy-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 22px; font-size: 9px; color: #64748b; line-height: 1.6; }
.privacy-note .icon { width: 13px; height: 13px; }
.panel-footer { font-size: 9px; padding-top: 15px; }
.notice { display: flex; align-items: flex-start; gap: 10px; background: #fff1ee; border: 1px solid #ebc2b9; border-radius: 9px; padding: 14px; margin-top: 22px; color: #914537; font-size: 12px; line-height: 1.6; }
.notice ul { padding: 0 0 0 14px; margin: 0; }
.notice .icon { width: 17px; height: 17px; }
.field-help { margin: -9px 0 20px; color: #64748b; font-size: 11px; line-height: 1.6; }
.bcn-android .app-download { display: none; }
@media (min-width: 1700px) { .auth-shell { padding: 32px; gap: 32px; } .story-content { margin-top: 65px; margin-bottom: 65px; } }
@media (max-width: 1100px) { .story { padding: 30px; } .login-panel { padding: 20px 25px 8px; } .panel-top > span { display: none; } .panel-top { justify-content: flex-end; } h1 { font-size: 45px; } .story-features { flex-wrap: wrap; } .story-footer { font-size: 9px; } }
@media (max-width: 760px) {
    .auth-shell { display: block; padding: 12px; }
    .story { padding: 24px; border-radius: 15px; }
    .brand { font-size: 19px; }
    .brand-symbol { width: 38px; height: 38px; }
    .brand small { font-size: 8px; }
    .story-content { max-width: none; margin: 27px 0 0; }
    .eyebrow { font-size: 7px; letter-spacing: 1.4px; }
    h1 { font-size: clamp(32px, 6vw, 43px); letter-spacing: -1.6px; margin: 15px 0 0; }
    h1 br:first-of-type { display: none; }
    .story-description, .preview, .story-features, .story-footer { display: none; }
    .login-panel { padding: 25px 16px 10px; }
    .panel-top { font-size: 10px; }
    .form-container { padding: 28px 0 36px; max-width: 440px; }
    .welcome-symbol { display: none; }
    h2 { font-size: 29px; }
    .form-eyebrow { font-size: 8px; }
    .form-description { font-size: 13px; }
    input:not([type='checkbox']) { font-size: 16px; }
    .password-toggle { font-size: 12px; }
    .panel-footer { border-top: 1px solid #e2e8f0; padding-top: 20px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

.site-links { display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; font-size:11px; color:#475569; }
.site-links a { display:inline-flex; align-items:center; min-height:32px; }
.site-links a:hover { color:#1d4ed8; text-decoration:underline; text-underline-offset:4px; }
.panel-footer { flex-wrap:wrap; gap:12px; }
.field-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.field-heading > a { color:#1d4ed8; font-size:11px; font-weight:600; }
.status-notice { margin-top:22px; padding:14px; border:1px solid #bfdbfe; border-radius:9px; background:#eff6ff; color:#1e40af; font-size:13px; line-height:1.7; }

/* Keep the sign-in controls and help links readable at every screen size. */
.finance-auth { background:#f5f8ff; }
.finance-auth .auth-shell { max-width:1920px; grid-template-columns:.95fr 1.05fr; gap:24px; padding:24px; }
.finance-auth .story { padding:38px clamp(30px,3.5vw,68px) 30px; }
.finance-auth .story-content { max-width:560px; margin:46px auto; }
.finance-auth .brand { font-size:26px; }
.finance-auth .brand small { font-size:12px; letter-spacing:3px; }
.finance-auth .eyebrow { font-size:11px; line-height:1.7; letter-spacing:1.3px; }
.finance-auth h1 { font-size:clamp(42px,3.6vw,64px); line-height:1.15; letter-spacing:-2px; }
.finance-auth .story-description { max-width:460px; font-size:17px; line-height:1.8; color:#e2e8f0; }
.finance-auth .preview-top { font-size:14px; color:#eff6ff; }
.finance-auth .preview-label { font-size:10px; }
.finance-auth .preview-caption { font-size:13px; color:#dbeafe; }
.finance-auth .preview-summary strong { font-size:24px; }
.finance-auth .chart-caption { font-size:12px; color:#dbeafe; }
.finance-auth .goal-preview strong { font-size:14px; }
.finance-auth .goal-preview div > span { font-size:12px; color:#dbeafe; }
.finance-auth .story-features > span { font-size:13px; color:#e2e8f0; }
.finance-auth .story-footer { font-size:12px; color:#dbeafe; }
.finance-auth .login-panel { justify-content:center; padding:18px clamp(16px,3vw,56px); }
.finance-auth .panel-top { width:100%; max-width:560px; margin:0 auto 28px; color:#475569; font-size:13px; line-height:1.6; }
.finance-auth .panel-top a { color:#1d4ed8; font-weight:600; min-height:36px; }
.finance-auth .form-container { max-width:560px; margin:0 auto; padding:36px 38px; border:1px solid #dbe4f0; border-radius:20px; background:#fff; box-shadow:0 16px 48px #17255409; }
.finance-auth .welcome-symbol { margin-bottom:20px; }
.finance-auth .form-eyebrow { font-size:12px; letter-spacing:1.6px; }
.finance-auth h2 { font-size:clamp(29px,2.5vw,38px); line-height:1.25; letter-spacing:-1.2px; }
.finance-auth .form-description { font-size:16px; line-height:1.7; color:#475569; }
.finance-auth .field { font-size:15px; color:#172554; }
.finance-auth .input-wrap { margin-bottom:22px; }
.finance-auth input:not([type='checkbox']) { height:56px; font-size:16px; border-color:#b9c8dd; }
.finance-auth input::placeholder { color:#64748b; }
.finance-auth .field-heading > a { font-size:14px; min-height:30px; text-decoration:underline; text-underline-offset:3px; }
.finance-auth .password-toggle { font-size:13px; }
.finance-auth .remember { font-size:14px; color:#475569; min-height:32px; }
.finance-auth .remember input { width:19px; height:19px; }
.finance-auth .submit-button { min-height:56px; font-size:16px; }
.finance-auth .auth-switch { font-size:14px; color:#475569; }
.finance-auth .auth-switch a { display:inline-flex; align-items:center; min-height:36px; }
.finance-auth .divider { font-size:10px; color:#475569; margin:24px 0 16px; }
.finance-auth .download-link { padding:17px; border-color:#cbd9ee; }
.finance-auth .download-link strong { font-size:15px; color:#172554; }
.finance-auth .download-link small { font-size:12px; color:#475569; line-height:1.6; }
.finance-auth .privacy-note { font-size:12px; line-height:1.7; color:#475569; text-align:center; }
.finance-auth .field-help { font-size:12px; color:#475569; }
.finance-auth .panel-footer { width:100%; max-width:560px; margin:20px auto 0; padding:16px 0 0; border-top:1px solid #d3deee; justify-content:center; gap:8px 20px; font-size:13px; }
.finance-auth .site-links { width:100%; justify-content:center; gap:6px 20px; font-size:14px; font-weight:600; }
.finance-auth .site-links a { min-height:40px; color:#1e40af; }
.finance-auth .panel-footer > a { min-height:36px; color:#475569; }
@media (max-width:1100px) and (min-width:761px) {
    .finance-auth .auth-shell { gap:16px; padding:16px; grid-template-columns:.85fr 1.15fr; }
    .finance-auth .story { padding:28px; }
    .finance-auth .login-panel { padding:12px 4px; }
    .finance-auth .form-container { padding:28px; }
    .finance-auth .story-features { flex-direction:column; }
    .finance-auth .preview-summary strong { font-size:19px; }
    .finance-auth .chart-icon { display:none; }
    .finance-auth .story-footer { flex-direction:column; }
}
@media (max-width:760px) {
    .finance-auth .auth-shell { padding:12px; }
    .finance-auth .story { padding:24px; }
    .finance-auth .brand { font-size:21px; }
    .finance-auth .brand small { font-size:10px; }
    .finance-auth .story-content { margin:24px 0 0; }
    .finance-auth .eyebrow { font-size:9px; }
    .finance-auth h1 { font-size:clamp(30px,7vw,42px); letter-spacing:-1.4px; }
    .finance-auth .login-panel { padding:24px 0 10px; }
    .finance-auth .panel-top { margin-bottom:16px; padding:0 10px; }
    .finance-auth .form-container { padding:26px 22px; border-radius:15px; }
    .finance-auth h2 { font-size:29px; }
    .finance-auth .form-description { font-size:15px; }
    .finance-auth .field-heading > a { font-size:13px; }
    .finance-auth .download-link { padding:13px; gap:10px; }
    .finance-auth .download-link strong { font-size:14px; }
    .finance-auth .download-link small { font-size:11px; }
    .finance-auth .privacy-note { font-size:11px; }
    .finance-auth .panel-footer { margin-top:18px; }
    .finance-auth .site-links { gap:4px 16px; font-size:13px; }
}