:root {
  --bg: #F6F4F1; --card: #FFFFFF; --line: #E3DFD6; --line-soft: #EEEBE3;
  --ink: #2C2F34; --ink-2: #3A3E44; --muted: #5E6469;
  --teal: #365B6D; --teal-mid: #7C9A8E; --teal-soft: #E4EBEE; --teal-gain: #A9C0CB;
  --stone: #B8A89A; --amber: #C4A46B;
  --good-bg: #E5F2EC; --good: #1F5E40; --warn-bg: #FBF1DF; --warn: #7A4A0E; --bad-bg: #F8E7E3; --bad: #8F3324;
  --serif: Arial, 'Helvetica Neue', Helvetica, 'Liberation Sans', sans-serif; --sans: Arial, 'Helvetica Neue', Helvetica, 'Liberation Sans', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 3px solid #1F6FEB; outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--teal); padding: 10px 16px; border-radius: 8px; z-index: 10; font-weight: 600; }
.skip-link:focus { left: 8px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.good { color: var(--good); }
.strong { font-weight: 600; }

/* Shell and navigation */
.shell { display: flex; flex-wrap: wrap; min-height: 100vh; }
.nav { flex: 1 1 248px; max-width: 280px; background: var(--teal); color: #E7EEF1; padding: 28px 20px; display: flex; flex-direction: column; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.brand-name { font-family: var(--serif); font-size: 22px; color: #fff; }
.brand-large .brand-name { font-size: 26px; }
.brand-box { fill: none; stroke: #fff; stroke-width: 2; }
.brand-lines { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.nav-links { display: flex; flex-direction: column; gap: 4px; }
.nav-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 10px; color: #E7EEF1; font-size: 15px; text-decoration: none; }
.nav-link:hover { background: rgba(255, 255, 255, 0.1); }
.nav-link.is-active { background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 600; }
.icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.nav-foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.adviser-card { background: rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.adviser-label { font-size: 13px; color: #B7CAD3; }
.adviser-name { font-size: 16px; font-weight: 600; color: #fff; }
.adviser-card .btn { margin-top: 8px; }
.signout { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 6px; }
.signout-name { flex: 1 1 80px; font-size: 14px; color: #fff; }
.avatar { width: 34px; height: 34px; border-radius: 999px; background: var(--teal-soft); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; }
.link-button { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; padding: 10px 4px; min-height: 44px; }
.main { flex: 999 1 560px; min-width: 0; padding: 32px 40px 56px; display: flex; flex-direction: column; gap: 28px; }

/* Buttons, notices, chips */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 10px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: #0B3B39; }
.btn-light { background: #fff; color: var(--teal); font-size: 14px; }
.btn-outline { background: #fff; color: var(--teal); border-color: var(--teal); }
.btn-danger { background: #fff; color: var(--bad); border-color: #D9A79E; }
.btn-small { min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn-block { width: 100%; min-height: 52px; border-radius: 12px; font-size: 16px; }
.notice { padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.notice-adviser { background: var(--warn-bg); color: var(--warn); }
.notice-error { background: var(--bad-bg); color: var(--bad); font-weight: 500; }
.notice-info { background: var(--teal-soft); color: #214C49; }
.notice-ok { background: var(--good-bg); color: var(--good); font-weight: 500; }
.chip { display: inline-flex; align-items: center; align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip-good { background: var(--good-bg); color: var(--good); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-bad { background: var(--bad-bg); color: var(--bad); }
.chip-neutral { background: #ECE9E1; color: #4A5056; }
.owner-you { background: var(--teal-soft); color: var(--teal); }
.owner-adviser { background: var(--teal); color: #fff; }
.owner-accountant { background: var(--warn-bg); color: var(--warn); }
.owner-solicitor { background: #EDE8F5; color: #4B3A78; }
.pill { padding: 6px 12px; border-radius: 999px; background: #ECE9E1; color: #4A5056; font-size: 13px; font-weight: 500; white-space: nowrap; align-self: flex-start; }

/* Page header */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head-text { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.eyebrow { font-size: 14px; color: var(--muted); }
.page-title { font-family: var(--serif); font-weight: 700; font-size: 42px; line-height: 1.1; }
.page-sub { font-size: 15px; line-height: 1.5; color: var(--muted); }

/* Cards and stats */
.grid-row { display: flex; flex-wrap: wrap; gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; min-width: 0; }
.card.pad { padding: 28px; }
.card-title { font-family: var(--serif); font-weight: 700; font-size: 24px; }
.card-title-sm { font-size: 20px; }
.grow-wide { flex: 2 1 520px; }
.grow-narrow { flex: 1 1 300px; }
.stat { flex: 1 1 240px; display: flex; flex-direction: column; gap: 10px; }
.stat-label { font-size: 14px; color: var(--muted); }
.stat-value { font-family: var(--serif); font-size: 42px; line-height: 1; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stat-xl { font-size: 52px; }
.stat-xxl { font-size: 72px; gap: 14px; }
.stat-md { font-size: 34px; }
.stat-to { font-family: var(--sans); font-size: 20px; color: var(--muted); }
.stat-to-sm { font-size: 18px; }
.accent { color: var(--teal); }
.stat-note { font-size: 13px; color: var(--muted); }
.stat-empty { font-size: 15px; color: var(--muted); line-height: 1.5; }
.stat-link { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--teal); }
.bar { height: 10px; border-radius: 999px; background: #ECE9E1; display: flex; overflow: hidden; }
.bar-lg { height: 12px; flex: 1; }
.bar-fill { background: var(--teal); height: 100%; }
.bar-gain { background: var(--teal-gain); height: 100%; }
.tone-mid { background: var(--teal-mid); } .tone-dark { background: var(--teal); } .tone-stone { background: var(--stone); }
.section { display: flex; flex-direction: column; gap: 16px; }
.footnote { font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 760px; }

/* Overview */
.stack-bar { display: flex; height: 18px; border-radius: 999px; overflow: hidden; gap: 2px; margin: 18px 0; }
.seg-pension { background: var(--teal); } .seg-investment { background: var(--teal-mid); } .seg-cash { background: var(--amber); } .seg-property { background: var(--stone); }
.legend { display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.legend-row { display: flex; align-items: center; gap: 12px; }
.legend-label { flex: 1; }
.legend-pct { width: 44px; text-align: right; color: var(--muted); }
.legend-total { font-weight: 600; }
.swatch { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.swatch-none { background: transparent; }
.rule { height: 1px; background: var(--line); }
.rows { display: flex; flex-direction: column; margin: 12px 0; }
.row-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.row-item:last-child { border-bottom: 0; }
.row-main { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.row-title { font-size: 15px; font-weight: 600; }
.row-sub { font-size: 14px; color: var(--muted); line-height: 1.45; }
.opp { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.opp-head { font-size: 18px; font-weight: 600; line-height: 1.3; }
.opp-body { font-size: 15px; line-height: 1.5; color: #4A5056; }

/* Net worth */
.nw-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.nw-changes { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { fill: none; stroke: var(--line); stroke-width: 1; }
.chart .axis { font-size: 12.5px; fill: var(--muted); font-family: var(--sans); }
.chart .axis-strong { font-weight: 600; fill: #4A5056; font-size: 13px; }
.chart .area { fill: var(--teal); opacity: 0.1; }
.chart .line { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart .dot { fill: #fff; stroke: var(--teal); stroke-width: 2.5; }
.chart .dot-last { fill: var(--teal); }
.meter-list { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.meter { display: flex; flex-direction: column; gap: 8px; }
.meter-top { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.table-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.table-scroll { overflow-x: auto; }
.table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table thead th { font-size: 13px; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--line); padding: 10px 12px; }
.table tbody th[scope='row'] { font-weight: 500; }
.num { text-align: right !important; }
.group-row th { background: var(--bg); color: var(--teal); font-size: 13px; font-weight: 600; padding: 12px; }
.group-row th.is-debt { color: var(--bad); }
.total-row th, .total-row td { font-size: 16px; font-weight: 600; border-bottom: 0; padding-top: 16px; }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px; background: var(--teal-soft); border-radius: 16px; }
.cta-title { font-size: 17px; font-weight: 600; color: var(--teal); }
.cta-body { font-size: 15px; line-height: 1.5; color: #2F4A48; max-width: 620px; }
.cta-card { background: var(--teal-soft); border: 0; display: flex; flex-direction: column; gap: 12px; justify-content: center; align-items: flex-start; }

/* Health check */
.summary { display: flex; flex-wrap: wrap; gap: 36px; }
.summary-score { flex: 1 1 260px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.summary-bars { flex: 2 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.area-bar { display: flex; align-items: center; gap: 14px; }
.area-bar-label { width: 150px; font-size: 15px; font-weight: 500; }
.area-bar-num { width: 84px; text-align: right; font-size: 14px; color: #4A5056; }
.key { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #4A5056; }
.key-item { display: inline-flex; align-items: center; gap: 8px; }
.key-swatch { width: 14px; height: 10px; border-radius: 3px; }
.key-today { background: var(--teal); } .key-gain { background: var(--teal-gain); }
.card.area { display: flex; flex-wrap: wrap; gap: 32px; }
.area-text { flex: 1 1 280px; display: flex; flex-direction: column; gap: 14px; }
.area-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.area-title { font-family: var(--serif); font-weight: 700; font-size: 28px; }
.area-summary { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.area-table { flex: 2 1 460px; min-width: 0; }
.table-compare { min-width: 460px; }
.table-compare th[scope='row'], .table-compare td { padding: 16px 12px; }
.table-compare .after-head { color: var(--teal); font-weight: 600; }
.table-compare td.after { background: #EEF3F5; color: var(--teal); font-weight: 600; }

/* Cashflow */
.tabs { display: flex; flex-wrap: wrap; gap: 12px; }
.tab { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid #B9B3A4; background: #fff; color: var(--ink); font-weight: 600; font-size: 15px; cursor: pointer; }
.tab.is-selected { background: var(--teal); border-color: var(--teal); color: #fff; }
.tab-swatch { width: 22px; height: 0; border-top: 3px solid; }
.s-0 { color: #D9795F; } .s-1 { color: #8FA9B6; } .s-2 { color: #D4B67F; } .s-3 { color: #9A8FD0; }
.tab:not(.is-selected) .s-0 { color: #A8402F; } .tab:not(.is-selected) .s-1 { color: #365B6D; } .tab:not(.is-selected) .s-2 { color: #B77A12; } .tab:not(.is-selected) .s-3 { color: #5B4BA0; }
.tab-swatch { border-top-color: currentColor; }
.s-text-0 { color: #A8402F; } .s-text-1 { color: #365B6D; } .s-text-2 { color: #8A5A0C; } .s-text-3 { color: #5B4BA0; }
.chart .sline { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.3; }
.chart .sline.is-selected { stroke-width: 4; opacity: 1; }
.chart .sline.is-dashed { stroke-dasharray: 8 6; }
.chart .sline.s-0 { color: #A8402F; } .chart .sline.s-1 { color: #365B6D; } .chart .sline.s-2 { color: #D4B67F; } .chart .sline.s-3 { color: #5B4BA0; }
.chart .sdot { fill: currentColor; stroke: #fff; stroke-width: 2; }
.chart .sdot.s-0 { color: #A8402F; } .chart .sdot.s-1 { color: #365B6D; } .chart .sdot.s-2 { color: #D4B67F; } .chart .sdot.s-3 { color: #5B4BA0; }
.chart .marker { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 4; }
.only-selected { display: none; }
.only-selected.is-selected { display: revert; }
.hl-selected.is-selected { background: #E6EDF0; }
.big-block { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.big-block.last { border-bottom: 0; padding-bottom: 0; }
.big-block:first-child { padding-top: 12px; }
.table-scn { min-width: 600px; }
.assumptions { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; color: #4A5056; line-height: 1.5; }

/* Action plan */
.progress-card { flex: 2 1 300px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.owner-card { flex: 1 1 150px; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filter { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #B9B3A4; background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; }
.filter.is-selected { background: var(--teal); border-color: var(--teal); color: #fff; }
.actions { padding-top: 8px; }
.action-group-title { font-family: var(--serif); font-weight: 700; font-size: 22px; padding: 24px 0 8px; }
.action-group + .action-group .action-group-title { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 28px; }
.action { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.action:last-child { border-bottom: 0; }
.action[hidden] { display: none; }
.action-main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.action-main .row-title { font-size: 16px; }
.action-due { width: 100px; font-size: 14px; font-weight: 500; }
.action-due.is-overdue { color: var(--bad); }
.action-status { width: 130px; font-size: 13px; color: #4A5056; }
.action-done .row-title { font-weight: 400; color: var(--muted); font-size: 15px; }
.st { flex: 0 0 auto; }
.st-ring { fill: none; stroke-width: 2; }
.st-grey { stroke: #8C8574; } .st-teal { stroke: var(--teal); } .st-amber { stroke: #8A5410; } .st-dash { stroke-dasharray: 4 3; }
.st-fill { fill: var(--teal); } .st-solid { fill: var(--teal); }
.st-tick { fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.st-tick-white { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Login and error */
.login { display: flex; flex-wrap: wrap; min-height: 100vh; }
.login-brand { flex: 1 1 520px; background: var(--teal); color: #fff; padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.login-pitch { display: flex; flex-direction: column; gap: 24px; max-width: 520px; }
.login-pitch h1 { font-family: var(--serif); font-weight: 400; font-size: 54px; line-height: 1.08; }
.login-pitch p { font-size: 18px; line-height: 1.55; color: #D3DFE5; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 16px; }
.ticks li { display: flex; align-items: center; gap: 12px; }
.ticks li::before { content: ''; width: 20px; height: 20px; flex: 0 0 auto; background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%239CC3BE' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.login-legal { font-size: 12.5px; line-height: 1.6; color: #B7CAD3; max-width: 520px; }
.login-form-wrap { flex: 1 1 420px; padding: 56px 48px; display: flex; align-items: center; justify-content: center; }
.login-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 22px; }
.login-form h2 { font-family: var(--serif); font-weight: 700; font-size: 38px; margin-bottom: 6px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 500; }
.field input, .field select, .field textarea { min-height: 48px; padding: 0 14px; border: 1px solid #B9B3A4; border-radius: 10px; background: #fff; color: var(--ink); }
.field textarea { padding: 12px 14px; min-height: 120px; line-height: 1.5; }
.error-page { max-width: 560px; margin: 12vh auto; padding: 0 24px; display: flex; flex-direction: column; gap: 16px; }
.error-page h1 { font-family: var(--serif); font-weight: 700; font-size: 38px; }

@media (max-width: 820px) {
  .nav { flex: 1 1 100%; max-width: none; padding: 20px; gap: 16px; }
  .nav-links { flex-direction: row; flex-wrap: wrap; }
  .main { padding: 24px 16px 40px; }
  .page-title { font-size: 34px; }
  .login-brand, .login-form-wrap { padding: 32px 24px; }
  .login-pitch h1 { font-size: 40px; }
  .area-bar { flex-wrap: wrap; }
  .area-bar-label { width: 100%; }
}

/* Adviser area */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 16px; align-items: start; }
.field-full { grid-column: 1 / -1; }
.form-submit { grid-column: 1 / -1; }
.field.grow { flex: 1 1 320px; }
.login-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-top: 16px; }
.login-row-id { display: flex; flex-direction: column; gap: 2px; flex: 1 1 220px; }
.login-row .field { flex: 1 1 260px; }
.danger-zone { border-color: #E3C3BC; }
.sub-title { font-size: 16px; font-weight: 600; margin: 24px 0 4px; }
.admin-table { min-width: 720px; }
.admin-table th, .admin-table td { padding: 8px 6px; vertical-align: middle; }
.admin-table thead th { padding: 10px 6px; white-space: nowrap; }
.admin-table input[type='text'], .admin-table input[type='date'], .admin-table select { width: 100%; min-width: 110px; min-height: 44px; padding: 0 10px; border: 1px solid #B9B3A4; border-radius: 8px; background: #fff; color: var(--ink); }
.admin-table input.in-num { min-width: 84px; max-width: 130px; }
.admin-table input.in-wide { min-width: 220px; }
.admin-table input[type='checkbox'] { width: 24px; height: 24px; }
.admin-actions { white-space: nowrap; }
.admin-actions .btn + .btn { margin-left: 6px; }
.add-row td { background: #EEF3F5; }
.field textarea[rows] { min-height: 160px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; }

/* Vertical bar charts */
.chart .vbar { fill: var(--teal); }
.chart .vbar-last { fill: var(--teal); }
.chart .vbar-past { fill: #8FA9B6; }
.chart .vbar-plan { fill: var(--teal-gain); }
.chart .baseline { stroke: #B9B5AA; stroke-width: 1.2; fill: none; }
.chart .sbars rect { fill: currentColor; opacity: 0.5; }
.chart .sbars.is-selected rect { opacity: 1; }
.chart .sbars.s-0 { color: #A8402F; } .chart .sbars.s-1 { color: #365B6D; } .chart .sbars.s-2 { color: #D4B67F; } .chart .sbars.s-3 { color: #5B4BA0; }
.summary-bars { display: block; }

.chart .vseg { stroke: #fff; stroke-width: 1.5; }
.vseg-pension { fill: var(--teal); } .vseg-investment { fill: var(--teal-mid); } .vseg-cash { fill: var(--amber); } .vseg-property { fill: var(--stone); } .vseg-total { fill: var(--teal); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.chart-legend .legend-item { display: inline-flex; align-items: center; gap: 8px; }
.chart-legend .swatch { width: 12px; height: 12px; border-radius: 3px; }
.sw-0 { background: #A8402F; } .sw-1 { background: #365B6D; } .sw-2 { background: #D4B67F; } .sw-3 { background: #5B4BA0; }

/* Net worth snapshot and uploaded forecast images */
.grid-top { align-items: flex-start; }
.snap-card { flex: 1 1 380px; max-width: 460px; }
.snap { display: flex; gap: 18px; align-items: flex-start; margin-top: 20px; }
.snap-bar { flex: 0 0 112px; display: flex; flex-direction: column; }
.snap-seg { border-top: 2px solid #fff; }
.snap-seg.snap-first { border-top: 0; border-radius: 10px 10px 0 0; }
.snap-seg.snap-liab { background: #A8402F; border-top: 0; border-radius: 0 0 10px 10px; }
.snap-line { height: 2px; background: var(--ink); }
.snap-labels { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.snap-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.snap-label-liab { color: #8F3324; }
.snap-line-gap { height: 2px; }
.snap-foot { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.shot { border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; background: #fff; margin-top: 16px; }
.shot img { display: block; width: 100%; height: auto; }
.shot-empty { padding: 56px 24px; text-align: center; color: var(--muted); }
.up-list { display: flex; flex-direction: column; }
.up-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line-soft); }
.up-thumb { width: 150px; height: 67px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.up-none { display: flex; align-items: center; justify-content: center; border: 2px dashed #C9C3B3; font-size: 13px; color: var(--muted); text-align: center; }
.up-name { flex: 1 1 220px; }
.up-btn { position: relative; cursor: pointer; }
.up-btn:focus-within { outline: 3px solid var(--teal-mid); outline-offset: 2px; }
.seg-liability { background: #A8402F; }
.card .tabs { margin: 14px 0 4px; }

/* Home page */
.home-head { max-width: 760px; padding-top: 24px; }
.home-eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.home-title { margin: 18px 0 0; font-family: var(--serif); font-weight: 400; font-size: 56px; line-height: 1.08; letter-spacing: -.01em; }
.home-title em { font-style: italic; }
.home-lead { margin: 22px 0 0; max-width: 560px; color: var(--muted); font-size: 18px; line-height: 1.6; }
.home-meta { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border-top: 1px solid #D9D4C7; border-left: 1px solid #D9D4C7; margin-top: 40px; }
.home-cell { display: flex; flex-direction: column; gap: 22px; padding: 44px 36px 40px; border-right: 1px solid #D9D4C7; border-bottom: 1px solid #D9D4C7; text-decoration: none; color: inherit; transition: background .2s; }
.home-cell:hover { background: #FBFAF6; }
.home-cell:focus-visible { outline: 2px solid var(--teal); outline-offset: -4px; }
.home-cell-title { font-family: var(--serif); font-size: 28px; line-height: 1.15; }
.home-cell-text { margin-top: 10px; font-size: 15px; color: var(--muted); line-height: 1.55; }
.home-cell-more { margin-top: auto; font-size: 14px; color: var(--teal); font-weight: 500; }
.home-cell-more span { border-bottom: 1px solid transparent; transition: border-color .2s; }
.home-cell:hover .home-cell-more span { border-bottom-color: var(--teal); }
.home-adviser { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; margin-top: 40px; border-top: 1px solid #D9D4C7; }
.home-adviser-name { font-family: var(--serif); font-size: 26px; margin-top: 8px; }
.home-adviser-name span { font-family: var(--sans); font-size: 16px; color: var(--muted); }
.btn-pill { border-radius: 999px; }
@media (max-width: 640px) { .home-title { font-size: 40px; } .home-cell { padding: 32px 24px; } }
/* Contact page */
.contact-details { flex: 1 1 320px; max-width: 100%; }
.contact-list { margin: 18px 0 0; display: flex; flex-direction: column; gap: 18px; font-size: 16px; line-height: 1.5; }
.contact-list dt { font-size: 13px; color: var(--muted); }
.contact-list dd { margin: 0; }
.contact-list a { color: var(--teal); }
.contact-reg { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; }
.contact-form { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.contact-form label { font-size: 14px; font-weight: 600; }
.contact-form input, .contact-form select, .contact-form textarea { font: inherit; font-size: 16px; color: var(--ink); width: 100%; border: 1px solid #CFC9BA; border-radius: 12px; padding: 12px 14px; background: #fff; }
.contact-form input[readonly] { background: #F6F4F1; }
.contact-thanks { padding: 12px 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.contact-tick { width: 56px; height: 56px; border-radius: 50%; background: var(--good-bg); color: var(--good); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; }
.msg-row { padding: 14px 0; border-top: 1px solid var(--line-soft); }
.msg-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.msg-topic { font-weight: 600; margin-top: 6px; }
.msg-body { margin-top: 6px; white-space: pre-wrap; color: var(--ink-2); line-height: 1.55; }
.msg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.msg-new { border-left: 4px solid var(--teal); }
.notice-warn { background: var(--warn-bg); color: var(--warn); }

/* Your information, net worth snapshot (wide) and cashflow key figures */
.obj-list { list-style: none; margin: 14px 0 0; padding: 0; }
.obj-item { display: flex; gap: 22px; padding: 20px 0; border-top: 1px solid var(--line-soft); }
.obj-num { flex: 0 0 40px; font-family: var(--serif); font-size: 34px; line-height: 1; color: #C4A46B; }
.obj-title { font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.obj-detail { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 640px; }
.snap-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.snap-net { text-align: right; }
.stat-lg { font-size: 44px; }
.hbar-wrap { margin-top: 24px; }
.hbar { display: flex; gap: 2px; border-radius: 12px; overflow: hidden; height: 48px; }
.hbar-liab { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 14px; font-weight: 600; color: #8F3324; }
.hbar-liab-bar { height: 20px; background: #A8402F; border-radius: 6px; flex: none; }
.hbar-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.hbar-key-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.hbar-key-value { font-family: var(--serif); font-size: 30px; margin-top: 4px; }
.swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.own-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 18px; }
.own-total { font-family: var(--serif); font-size: 34px; margin-top: 6px; }
.own-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.own-row { display: flex; justify-content: space-between; gap: 8px; }
.own-row.is-debt { color: #8F3324; }
.mort-list { display: flex; flex-direction: column; }
.mort { padding: 18px 0; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: flex-end; }
.mort:first-child { border-top: 0; }
.mort-name { flex: 1 1 200px; font-weight: 600; font-size: 17px; }
.mort-bal { font-family: var(--serif); font-size: 32px; color: #8F3324; }
.mort-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.mort-facts strong { display: block; margin-top: 4px; font-size: 18px; }
.is-debt-text { color: #8F3324; font-size: 24px; font-family: var(--serif); }
.kstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border: 1px solid var(--line-soft); border-radius: 14px; text-align: center; margin-top: 20px; }
.kstat { padding: 24px 16px 22px; border-left: 1px solid var(--line-soft); margin-left: -1px; }
.kstat-value { font-family: var(--serif); font-size: 44px; line-height: 1.15; margin-top: 8px; }
.kstat-value.is-neg, .is-neg { color: #8F3324; }
.kstat-note { font-size: 13px; color: #8F3324; margin-top: 4px; }
.kstat-foot { margin: 10px 0 0; }
.kextras { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.note-box { margin: 0 0 18px; font-size: 14px; line-height: 1.5; background: #EDF2F4; border-radius: 12px; padding: 12px 16px; }
@media (max-width: 640px) { .snap-net { text-align: left; } .kstat-value { font-size: 36px; } }
.inc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; margin-top: 18px; }
.inc-job { margin-top: 6px; font-size: 15px; font-weight: 600; }
.inc-net { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.inc-total { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 15px; }

.lede { font-size: 17px; line-height: 1.5; margin: 6px 0 18px; max-width: 760px; }
.table-estate { min-width: 480px; margin-top: 14px; }
.table-estate .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-estate .th-sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.table-estate .row-total th, .table-estate .row-total td { border-top: 2px solid var(--ink); font-weight: 600; }
.table-estate .row-tax th, .table-estate .row-tax td { font-size: 17px; font-weight: 600; color: var(--teal); border-bottom: 0; }
.table-estate .row-note { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.table-estate td.after { background: #EEF3F5; color: var(--teal); font-weight: 600; }
.table-estate td.is-neg { color: #8F3324; }
.field .check { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 500; }
.field .check input { width: 22px; height: 22px; min-height: 0; }
.sub-title { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 22px 0 0; }

.legal-warn { margin: 6px 0 0; padding-left: 18px; } .legal-warn li { margin: 4px 0; }
.table-legal { min-width: 520px; }
.legal-no, .legal-outdated { color: #8F3324; font-weight: 600; } .legal-yes { color: var(--teal); font-weight: 600; } .legal-unknown { color: var(--muted); }

.gauge-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; }
.gauge { margin: 0; flex: 0 1 420px; min-width: 260px; }
.gauge svg { width: 100%; height: auto; display: block; }
.g-track, .g-gain, .g-today { fill: none; stroke-width: 22; stroke-linecap: round; }
.g-track { stroke: #E6E2D6; } .g-gain { stroke: var(--teal-gain); } .g-today { stroke: var(--teal); }
.g-dot { fill: var(--amber); stroke: #fff; stroke-width: 3; }
.g-num { font-family: var(--serif); font-size: 46px; fill: var(--ink); } .g-plan { fill: var(--teal-mid); } .g-arrow { fill: #8A8F8E; font-size: 30px; }
.g-sub, .g-end { font-size: 11px; fill: #5E6469; }
.gauge-text { flex: 1 1 260px; }
.gauge-lead { font-family: var(--serif); font-size: 26px; line-height: 1.25; margin: 8px 0 14px; max-width: 100%; }
.gauge-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.brand-logo { display: block; width: 168px; height: auto; }
.brand-large .brand-logo { width: 260px; }

/* Portfolio health check */
.tone-g { background: #E6EFEA; color: #2F6A50; }
.tone-a { background: #F6ECD6; color: #8A5E12; }
.tone-r { background: #F5E1DC; color: #98402E; }
.tone-n { background: #F3F1EC; color: var(--ink-2); }
.id-eq { background: #DCE6EB; color: #365B6D; border-top: 3px solid #365B6D; }
.id-b { background: #E2ECE7; color: #4C7365; border-top: 3px solid #7C9A8E; }
.id-c { background: #F3EBD9; color: #8A6A22; border-top: 3px solid #C4A46B; }
.card.tone-g, .card.tone-a, .card.tone-r { border-color: transparent; }
.pf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }
.tone-dot-g { background: #5E9E82; } .tone-dot-a { background: #D3A53C; } .tone-dot-r { background: #C4634F; }
.pf-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start; }
.pf-side { display: flex; flex-direction: column; gap: 14px; }
.pf-sum { display: flex; flex-direction: column; gap: 4px; }
.pf-big { font-family: var(--serif); font-size: 30px; color: inherit; line-height: 1.15; }
.pf-sum:not(.tone-g):not(.tone-a):not(.tone-r) .pf-big { color: var(--teal); }
.pf-sc { opacity: 0.9; margin-top: 4px; }
.pf-accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pf-tile { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.pf-tile:hover { border-color: var(--teal); }
.pf-tile-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.pf-name { font-weight: 600; }
.pf-amount { font-family: var(--serif); font-size: 24px; color: var(--teal); white-space: nowrap; }
.pf-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pf-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-cell { border-radius: 10px; padding: 10px 12px; }
.pf-l { font-size: 12px; opacity: 0.9; }
.pf-v { font-size: 18px; font-weight: 600; margin-top: 2px; }
.pf-n { font-size: 12px; margin-top: 2px; opacity: 0.9; }
.pf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-pill { border-radius: 999px; padding: 3px 11px; font-size: 13px; font-weight: 500; }
.pf-more { margin-top: auto; text-align: right; color: var(--teal); font-weight: 500; font-size: 14px; }
.pf-h { font-family: var(--serif); font-weight: 700; font-size: 22px; margin: 26px 0 12px; }
.pf-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pf-chart { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 10px; }
.pf-chart-legend { flex: 1 1 160px; }
.pf-donut-big { font-family: var(--serif); font-size: 26px; fill: var(--teal); }
.pf-donut-small { font-size: 11px; fill: var(--muted); }
.pf-legend { list-style: none; margin: 0; padding: 0; }
.pf-legend li { display: flex; justify-content: space-between; gap: 16px; margin: 6px 0; }
.pf-bar { display: flex; margin: 12px 0; border-radius: 10px; overflow: hidden; min-height: 62px; color: #fff; font-size: 12px; }
.pf-bar > div { padding: 10px 12px; min-width: 0; }
.pf-bar span { display: block; opacity: 0.92; }
.pf-bar b { font-size: 15px; }
.pf-stands { list-style: none; padding: 0; margin: 8px 0 0; }
.pf-stands li { display: flex; gap: 4px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.pf-stands .pf-dot { margin-top: 6px; flex: none; }
.pf-note { font-family: var(--serif); font-size: 18px; margin-top: 8px; }
.back-link { color: var(--teal); text-decoration: none; font-weight: 500; }
.pf-grid3 + .pf-two, .pf-grid2 + .pf-two, .pf-grid3 + .pf-grid2 { margin-top: 0; }
@media (max-width: 900px) {
  .pf-layout, .pf-two, .pf-accounts { grid-template-columns: minmax(0, 1fr); }
  .pf-side { flex-direction: row; flex-wrap: wrap; }
  .pf-side > .card { flex: 1 1 200px; }
}
.stat-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stat-wide { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; }
.stat-wide-main { display: flex; flex-direction: column; gap: 4px; }
.stat-wide .stat-link { margin-left: auto; }

/* ===== Design A: deep blue hero, light sidebar, soft rounded cards ===== */
:root { --bg: #F5F2EC; --teal: #27414F; --teal-soft: #E6EAEC; --gold: #A98A47; --shadow: 0 8px 24px rgba(30, 40, 45, 0.09); --hero: linear-gradient(120deg, #1B2D38, #27414F 70%, #33505F); --side: #1B2D38; }
body { background: var(--bg); }
/* dark sidebar */
.nav { background: var(--side); color: #B9C7CF; border-right: 0; }
.nav-link { color: #B9C7CF; }
.nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-link.is-active { background: rgba(255, 255, 255, 0.13); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 #C4A46B; }
.adviser-card { background: rgba(255, 255, 255, 0.08); }
.adviser-label { color: #B9C7CF; }
.adviser-name { color: #fff; }
.adviser-card .btn-light { background: #C4A46B; color: #1B1B1B; }
.adviser-card .btn-light:hover { background: #D2B57F; }
.signout-name { color: #fff; }
.link-button { color: #fff; }
.avatar { background: #C4A46B; color: #1B1B1B; }
/* hero header on every page */
.main { overflow-x: clip; }
.page-head, .home-head { position: relative; overflow: hidden; margin: -32px -40px 0; padding: 40px 40px 104px; background: var(--hero); color: #fff; max-width: none; }
.page-head::after, .home-head::after { content: ""; position: absolute; right: -90px; top: -130px; width: 420px; height: 420px; border-radius: 50%; background: rgba(196, 164, 107, 0.16); pointer-events: none; }
.page-head > *, .home-head > * { position: relative; z-index: 1; }
.page-head .eyebrow, .home-eyebrow { color: rgba(255, 255, 255, 0.75); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.page-title, .home-title { color: #fff; }
.home-title { font-weight: 700; font-size: 46px; }
.home-title em { font-style: normal; color: #E7D3A6; }
.page-sub, .home-lead, .home-meta { color: rgba(255, 255, 255, 0.82); }
.page-head .pill { background: rgba(255, 255, 255, 0.16); color: #fff; }
.page-head + *, .home-head + * { position: relative; margin-top: -76px; z-index: 2; }
.notice-adviser + .page-head { margin-top: 0; }
.main > .notice-adviser { margin-bottom: -4px; }
/* soft rounded cards */
.card { border-color: transparent; border-radius: 16px; box-shadow: var(--shadow); }
.stat-value { font-weight: 700; color: var(--teal); }
.stat-to { font-weight: 400; }
.accent { color: var(--gold); }
.btn { border-radius: 10px; }
/* home tiles become cards */
.home-grid { border: 0; gap: 20px; margin-top: -76px; }
.home-cell { background: #fff; border: 0; border-radius: 16px; box-shadow: var(--shadow); padding: 34px 30px 30px; }
.home-cell:hover { background: #fff; box-shadow: 0 12px 30px rgba(40, 60, 70, 0.16); transform: translateY(-2px); }
.home-cell { transition: box-shadow .2s, transform .2s; }
.home-cell-title { font-weight: 700; font-size: 24px; color: var(--teal); }
.home-adviser { border-top-color: #D5DADC; }
@media (max-width: 820px) { .page-head, .home-head { margin: -24px -16px 0; padding: 28px 16px 96px; } }
@media (max-width: 640px) { .home-title { font-size: 36px; } }
.facts { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 10px 20px; margin: 18px 0 0; font-size: 15px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
@media (max-width: 640px) { .facts { grid-template-columns: 1fr; gap: 2px; } .facts dd { margin-bottom: 10px; } }
.card .card { box-shadow: none; border: 1px solid var(--line-soft); }

/* Account pages (password, two-step sign-in) */
body { background: var(--bg); }
.account-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; background: var(--hero); }
.account-card { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 16px; }
.account-card .steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.qr { align-self: center; width: 200px; height: 200px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
.qr svg { width: 100%; height: 100%; display: block; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; word-break: break-all; }
.backup-codes { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; background: var(--teal-soft); border-radius: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; }
.nav-security { display: block; padding: 6px 4px; font-size: 13px; color: rgba(255,255,255,.7); text-decoration: none; }
.nav-security:hover { color: #fff; text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.method-list { display: grid; gap: 12px; }
.method { border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.method .sub-title { margin: 0; }
.account-card .link-button { align-self: flex-start; }
.pk-alt { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pk-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; }
.tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: var(--teal-soft); color: var(--teal); font-size: 12px; font-weight: 700; vertical-align: middle; }
.account-wrap { flex-direction: column; }
.seg-business { background: var(--gold); }

/* ===== Phones: list-icon menu and tables that fit the screen ===== */
.nav-toggle { display: none; }
.nav-panel { display: contents; }
@media (max-width: 820px) {
  .nav { position: sticky; top: 0; z-index: 30; padding: 8px 16px; gap: 0; flex-basis: 100%; }
  .brand { width: 100%; justify-content: space-between; padding: 0; }
  .brand-logo { width: 124px; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: #fff; cursor: pointer; }
  .nav-toggle:hover, .nav.is-open .nav-toggle { background: rgba(255, 255, 255, 0.12); }
  .nav-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 14px; background: var(--side); padding: 6px 12px 18px; max-height: calc(100vh - 66px); max-height: calc(100dvh - 66px); overflow-y: auto; box-shadow: 0 18px 28px rgba(0, 0, 0, 0.3); }
  .nav.is-open .nav-panel { display: flex; }
  html:not(.js) .nav { position: static; }
  html:not(.js) .nav-panel { display: flex; position: static; box-shadow: none; max-height: none; padding: 6px 0 12px; }
  html:not(.js) .nav-toggle { display: none; }
  .nav-links { flex-direction: column; flex-wrap: nowrap; }
  .nav-foot { margin-top: 0; }
}

@media (max-width: 640px) {
  .table-scroll { overflow-x: visible; }
  .table:not(.admin-table), .table-compare, .table-scn, .table-estate { min-width: 0; }
  .table:not(.admin-table), .table:not(.admin-table) tbody, .table:not(.admin-table) tr, .table:not(.admin-table) th, .table:not(.admin-table) td { display: block; width: 100%; }
  .table:not(.admin-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .table:not(.admin-table) tbody tr { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .table:not(.admin-table) th, .table:not(.admin-table) td { border: 0; padding: 0; }
  .table:not(.admin-table) tbody th[scope='row'] { padding: 0 0 6px; font-weight: 600; }
  .table:not(.admin-table) td { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; text-align: right; }
  .table:not(.admin-table) td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: 13px; text-align: left; flex: 0 1 auto; }
  .table:not(.admin-table) td.admin-actions { justify-content: flex-start; gap: 8px; flex-wrap: wrap; padding-top: 8px; }
  .table:not(.admin-table) tr.group-row { padding: 0; border: 0; }
  .table:not(.admin-table) tr.group-row th { background: var(--teal-soft); color: var(--teal); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border-radius: 8px; margin-top: 10px; }
  .table:not(.admin-table) tr.total-row { background: var(--teal); color: #fff; border-radius: 10px; padding: 12px; margin-top: 10px; border: 0; }
  .table:not(.admin-table) tr.total-row th, .table:not(.admin-table) tr.total-row td { color: #fff; }
  .table:not(.admin-table) tr.total-row td[data-label]::before { color: rgba(255, 255, 255, 0.75); }

  /* Plain list: name and owner on the left, the value on the right (accounts, spending) */
  .table-list:not(.admin-table) tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center; }
  .table-list:not(.admin-table) tbody th[scope='row'] { grid-column: 1; padding: 0; }
  .table-list:not(.admin-table) td { width: auto; padding: 0; }
  .table-list:not(.admin-table) td::before { content: none !important; }
  .table-list:not(.admin-table) td.li-sub { grid-column: 1; grid-row: 2; justify-content: flex-start; text-align: left; color: var(--muted); font-size: 13px; }
  .table-list:not(.admin-table) td.li-val { grid-column: 2; grid-row: 1; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .table-list:not(.admin-table) td.li-aux { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 13px; white-space: nowrap; }
  .table-list:not(.admin-table) td.li-aux::after { content: ' ' attr(data-label); text-transform: lowercase; }
  .table-list:not(.admin-table) tbody th[scope='row'] .small { display: block; }
  .table-list:not(.admin-table) tr.group-row { display: block; }
  .table-list:not(.admin-table) tr.total-row { align-items: center; }
  .table-list:not(.admin-table) tr.total-row td.li-val { font-size: 17px; }
}
.pf-inv { color: var(--teal); font-weight: 600; font-size: 14px; margin-top: 2px; }
.pf-invline { margin: 0; color: var(--muted); }
.pf-invline strong { color: var(--ink); }

/* ===== Health check: traffic-light list and area page ===== */
.hs-attention { --tc: #C8503C; } .hs-improve { --tc: #D9A441; } .hs-healthy { --tc: #2E8B5E; }
.hlist { padding: 8px 0 6px; overflow: hidden; }
.hgroup { margin: 0; padding: 14px 24px 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.hrow { display: grid; grid-template-columns: 5px minmax(0, 1fr) auto 18px; gap: 16px; align-items: center; padding: 14px 20px 14px 0; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); }
.hrow:last-child { border-bottom: 0; }
.hrow:hover { background: #F7F5F0; }
.hbar { align-self: stretch; background: var(--tc); border-radius: 0 4px 4px 0; min-height: 40px; }
.htext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.htitle { font-weight: 700; font-size: 17px; }
.hsub { color: var(--muted); font-size: 14px; }
.hfig { text-align: right; display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.hfig b { font-size: 16px; white-space: nowrap; }
.hfig span { color: var(--muted); font-size: 13px; max-width: 220px; }
.hchev { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .hrow { grid-template-columns: 5px minmax(0, 1fr) 16px; row-gap: 6px; padding-right: 14px; }
  .hfig { grid-column: 2; grid-row: 2; text-align: left; flex-direction: row; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .hfig span { max-width: none; }
  .hchev { grid-column: 3; grid-row: 1 / span 2; }
  .hgroup { padding-left: 16px; }
}
.harea { border-top: 6px solid var(--tc); display: flex; flex-direction: column; gap: 18px; }
.ha-head { font-size: 26px; line-height: 1.2; margin: 0; text-wrap: balance; }
.ha-fig { background: var(--teal-soft); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ha-label { font-size: 14px; color: var(--muted); }
.ha-vals { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ha-cap { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ha-num { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.ha-plan { color: var(--teal); }
.ha-arrow { font-size: 24px; color: var(--muted); }
.ha-track { position: relative; height: 12px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
.ha-track i { position: absolute; top: 0; bottom: 0; }
.ha-now { left: 0; background: var(--tc); } .ha-gain { background: var(--teal-gain); }
.ha-scap { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); margin-top: 6px; gap: 12px; flex-wrap: wrap; }
.ha-scap b { color: var(--ink); }
.ha-more summary { cursor: pointer; font-weight: 600; font-size: 17px; }
.ha-more[open] summary { margin-bottom: 4px; }

.g-today.t-bad { stroke: #C8503C; } .g-today.t-warn { stroke: #D9A441; } .g-today.t-good { stroke: #2E8B5E; }
.field-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
/* estate planning at a glance */
.est-hero { border-left: 6px solid var(--line); }
.est-hero.est-green { border-left-color: #2E8B64; } .est-hero.est-amber { border-left-color: #C98A1B; } .est-hero.est-red { border-left-color: #B5412F; }
.est-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.est-fig { border-radius: 14px; padding: 16px; background: var(--teal-soft); }
.est-fig-green { background: var(--good-bg); color: var(--good); } .est-fig-amber { background: var(--warn-bg); color: var(--warn); } .est-fig-red { background: var(--bad-bg); color: var(--bad); }
.est-fig-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.est-fig-amt { font-size: 28px; font-weight: 700; margin: 6px 0 2px; }
.est-fig-note { font-size: 13px; }
.pw-grid { display: grid; gap: 14px; margin-top: 12px; }
.pw-person { display: grid; grid-template-columns: 140px repeat(3, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.pw-name { font-weight: 700; }
.pw-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pw-text { display: flex; flex-direction: column; font-size: 14px; min-width: 0; } .pw-state { color: var(--muted); }
.pw-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #C9C5BA; }
.pw-good { background: #2E8B64; } .pw-warn { background: #C98A1B; } .pw-bad { background: #B5412F; } .pw-none { background: #fff; border: 2px dashed #A9A599; }
.est-next { padding: 4px 0 8px; }
.est-how > summary { cursor: pointer; font-weight: 700; font-size: 18px; padding: 4px 0; }
.est-how[open] > summary { margin-bottom: 12px; }
@media (max-width: 640px) {
  .est-figs { grid-template-columns: 1fr; }
  .pw-person { grid-template-columns: 1fr; gap: 8px; }
}
.adm-details { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.adm-details > summary { cursor: pointer; font-weight: 700; }
.adm-details[open] > summary { margin-bottom: 12px; }
/* your information and net worth, at a glance */
.goal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.goal { display: flex; gap: 12px; background: var(--teal-soft); border-radius: 14px; padding: 14px; }
.goal-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #C4A46B; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.goal-title { font-weight: 700; } .goal-detail { font-size: 13px; color: var(--muted); margin-top: 2px; }
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: center; text-align: center; margin: 14px 0; }
.flow > div { background: var(--teal-soft); border-radius: 14px; padding: 14px 6px; } .flow em { font-style: normal; font-weight: 700; color: var(--muted); font-size: 20px; }
.flow small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; } .flow b { display: block; font-size: 26px; margin-top: 2px; }
.flow .flow-good { background: var(--good-bg); color: var(--good); } .flow .flow-good small { color: var(--good); } .flow .flow-bad { background: var(--bad-bg); color: var(--bad); } .flow .flow-bad small { color: var(--bad); }
.sp-bar { display: flex; height: 20px; border-radius: 10px; overflow: hidden; margin: 6px 0 10px; } .sp-bar span { display: block; }
.sp-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); } .sp-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; } .sp-key strong { color: var(--ink); }
.more { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 10px; } .more > summary { cursor: pointer; font-weight: 700; color: var(--teal); } .more[open] > summary { margin-bottom: 12px; }
.acc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 12px 0; }
.acc-card { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-decoration: none; background: var(--teal-soft); border-radius: 14px; padding: 14px; }
.acc-card small { display: block; color: var(--muted); font-size: 13px; } .acc-card b { font-size: 22px; } .acc-card span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.debt { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: 14px; padding: 14px; background: var(--bad-bg); margin-top: 10px; border-left: 6px solid var(--bad); }
.debt-watch { background: var(--warn-bg); border-left-color: #C98A1B; } .debt-name { font-weight: 700; } .debt-bal { font-size: 22px; font-weight: 700; color: var(--bad); white-space: nowrap; }
.nw-hero { text-align: center; } .nw-hero .stat-value { margin: 4px 0; }
.nw-pill { display: inline-block; background: var(--good-bg); color: var(--good); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 4px 12px; }
.nw-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.nw-tile { background: #fff; border-radius: 14px; border-left: 6px solid var(--teal); box-shadow: 0 1px 0 var(--line-soft); }
.nw-tile[open] { grid-column: 1 / -1; }
.nw-tile > summary { list-style: none; cursor: pointer; padding: 14px 16px; } .nw-tile > summary::-webkit-details-marker { display: none; }
.nw-tile small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--muted); }
.nw-tile b { display: block; font-size: 26px; margin: 2px 0; } .nw-tile i { font-style: normal; font-size: 13px; color: var(--muted); }
.nw-tile .nw-rows { padding: 0 16px 12px; } .nw-rows .own-row { padding: 8px 0; }
.nw-tile.t-pension { border-color: #27414F; } .nw-tile.t-investment { border-color: #7C9A8E; } .nw-tile.t-cash { border-color: #C4A46B; } .nw-tile.t-property { border-color: #B8A89A; } .nw-tile.t-business { border-color: #5B4BA0; }
.nw-tile.t-liability { border-color: #B5412F; background: var(--bad-bg); } .nw-tile.t-liability b { color: var(--bad); }
.nw-owners { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.nw-owner { background: var(--teal-soft); border-radius: 14px; padding: 14px; text-align: center; }
.nw-owner .av { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: #C4A46B; color: #fff; font-weight: 700; align-items: center; justify-content: center; }
.nw-owner b { display: block; font-size: 22px; margin-top: 4px; } .nw-owner small { color: var(--muted); }
@media (max-width: 640px) { .goal-grid { grid-template-columns: 1fr; } .flow b { font-size: 20px; } .nw-tile b { font-size: 21px; } }
/* action plan at a glance */
.ap-hero { background: linear-gradient(120deg, #1B2D38, #33505F); color: #fff; border-radius: 18px; padding: 22px 24px; margin-bottom: 16px; }
.ap-hero-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: #C9D5DB; }
.ap-hero-title { font-size: 24px; font-weight: 700; margin: 8px 0 4px; line-height: 1.2; } .ap-hero-detail { color: #DCE4E8; max-width: 70ch; }
.ap-hero-foot { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 14px; }
.ap-btn { background: #C4A46B; color: #1B2D38; border: 0; } .ap-review { font-size: 13px; color: #C9D5DB; }
.ap-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); margin-top: 16px; overflow: hidden; } .ap-bar span { display: block; height: 100%; background: #C4A46B; }
.ap-group { margin-bottom: 12px; } .ap-group > summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; } .ap-group > summary::-webkit-details-marker { display: none; }
.ap-group-title { font-size: 18px; font-weight: 700; } .ap-count { color: var(--muted); font-size: 13px; } .ap-count:after { content: ' \203A'; }
.ap-group[open] > summary { margin-bottom: 12px; } .ap-group[open] .ap-count:after { content: ' \2304'; }
.ap-step.action { display: flex; align-items: flex-start; gap: 12px; border-left: 5px solid var(--line); background: #FBFAF7; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; border-top: 0; }
.ap-step.ap-bad { border-left-color: #B5412F; } .ap-step.ap-warn { border-left-color: #C98A1B; } .ap-step.ap-good { border-left-color: #2E8B64; }
.ap-step .action-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ap-meta { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.ap-when { margin-left: auto; text-align: right; font-weight: 700; font-size: 13px; white-space: nowrap; } .ap-bad .ap-when { color: #B5412F; } .ap-warn .ap-when { color: #A56B0E; }
@media (max-width: 640px) { .ap-hero-title { font-size: 20px; } }
/* scenarios at a glance */
.sc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tab.sc-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; padding: 14px 16px; border-radius: 16px; border: 1.5px solid transparent; border-top: 6px solid var(--line); background: #fff; color: var(--ink); text-align: left; }
.tab.sc-card.sc-good { border-top-color: #2E8B64; } .tab.sc-card.sc-bad { border-top-color: #B5412F; }
.tab.sc-card.is-selected { background: #fff; color: var(--ink); border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal) inset; }
.sc-name { font-size: 14px; font-weight: 700; } .sc-big { font-size: 28px; font-weight: 700; } .sc-good .sc-big { color: #1F5E40; } .sc-bad .sc-big { color: #8F3324; } .sc-note { font-size: 13px; color: var(--muted); font-weight: 400; }
.seg-toggle { display: flex; gap: 4px; background: var(--teal-soft); border-radius: 999px; padding: 4px; margin-bottom: 12px; max-width: 100%; }
.seg-btn { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 10px 12px; font-weight: 700; color: var(--muted); cursor: pointer; min-height: 44px; }
.seg-btn.is-selected { background: var(--teal); color: #fff; }
.more-plain { margin-top: 0; border-top: 0; padding-top: 0; } .more-plain > summary { font-size: 18px; color: var(--ink); }
.nw-hero .stat-label, .nw-hero .stat-value { display: block; text-align: center; width: 100%; }
.nw-tile, .nw-tile summary { text-align: left; }
.nw-owner { text-align: center; }
.seg-toggle { overflow-x: auto; max-width: 100%; } .seg-btn { flex: 0 0 auto; white-space: nowrap; padding: 10px 16px; }
.chart-title { font-size: 16px; margin: 0 0 4px; }