/* Coutts 6 — private client workspace. Layout adapts, account state does not. */
:root {
  --ink: #0b1011; --ink-deep: #070b0c; --surface: #111819;
  --surface-raised: #182021; --surface-soft: #1a2323; --surface-pressed: #202c2b;
  --ivory: #eeeae0; --ivory-soft: #d1d3ca; --stone: #9fa9a4;
  --gold: #bea36e; --gold-bright: #d6bf8d; --gold-deep: #8c764d;
  --hairline: #d8dfcf16; --hairline-strong: #d8dfcf28;
  --radius-panel: 8px; --radius-control: 6px; --radius-card: 12px;
}
body.coutts-prototype-page, .prototype-shell { background: #0b1011; }
.prototype-shell::before { display: none; }
.banking-app { width: 100%; max-width: none; margin: 0; background: #0d1213; }
.workspace-header, .sidebar-brand, .sidebar-caption, .sidebar-footer { display: none; }
.app-sidebar { display: contents; }
.app-content { scrollbar-width: thin; scrollbar-color: #35413b transparent; }
.app-content::-webkit-scrollbar { width: 5px; display: block; }
.app-content::-webkit-scrollbar-thumb { background: #35413b; }
.app-screen { padding: 0 20px 28px; }
.screen-shell { gap: 26px; padding-top: 28px; }
.screen-header { padding-bottom: 20px; border-bottom: 1px solid var(--hairline); }
.screen-header h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(30px, 3.3vw, 44px); font-weight: 400; line-height: 1.15; letter-spacing: -.035em; }
.screen-header .eyebrow { margin-bottom: 10px; color: var(--stone); font-size: 9px; letter-spacing: .2em; }
.eyebrow, .panel-kicker, .metric-label { letter-spacing: .16em; }
.icon-button { border-radius: 50%; background: #151d1e; border: 1px solid var(--hairline); }
.home-dashboard, .wealth-dashboard, .payments-dashboard, .cards-dashboard, .services-dashboard { display: grid; gap: 22px; min-width: 0; align-items: start; }
.home-main, .home-aside, .wealth-main, .wealth-aside, .payments-main, .payments-aside, .cards-main, .cards-aside, .services-main, .services-aside { display: flex; flex-direction: column; min-width: 0; gap: 22px; }
.dashboard-panel, .panel, .chart-panel, .auth-panel, .receipt { border: 1px solid var(--hairline); background: #121a1b; border-radius: 8px; padding: 22px; box-shadow: none; min-width: 0; }
.panel-heading, .account-panel-header { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-width: 0; margin-bottom: 18px; }
.panel-heading h2, .panel-heading h3, .section-heading h2, .section-heading h3 { margin: 0; font-size: 17px; font-weight: 450; letter-spacing: -.015em; }
.panel-kicker, .metric-label { display: block; font-size: 9px; line-height: 1.6; text-transform: uppercase; color: var(--stone); margin: 0 0 10px; font-weight: 600; }
.dashboard-date { font-size: 11px; color: var(--stone); }
.panel-heading .text-button, .panel-heading button, .panel-heading a { font-size: 11px; }
.relationship-panel { position: relative; overflow: hidden; padding: 26px; background: linear-gradient(118deg, #182624, #14201f 62%, #122020); border-color: #bfaa7c38; }
.relationship-panel::after { content: ''; position: absolute; width: 360px; height: 360px; border: 1px solid #cbb1760b; border-radius: 50%; right: -140px; top: -220px; box-shadow: 0 0 0 36px #cbb17606, 0 0 0 76px #cbb17604; pointer-events: none; }
.relationship-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.relationship-heading h2 { font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #c8cdbf; margin: 0; }
.relationship-value { font-weight: 300; font-size: clamp(35px, 4.1vw, 65px); line-height: 1.15; letter-spacing: -.045em; margin: 16px 0 12px; overflow-wrap: anywhere; }
.relationship-summary { color: #aebdb2; font-size: 12px; line-height: 1.7; }
.relationship-summary strong { color: #d6bf8d; font-weight: 500; }
.relationship-chart { margin: 24px -4px 0; }
.relationship-chart svg { display: block; width: 100%; max-height: 140px; overflow: visible; }
.relationship-chart .chart-line { stroke: #cbb77f; stroke-width: 1.8; }
.relationship-chart .chart-axis { color: #8f9e93; font-size: 9px; }
.relationship-chart figcaption { color: var(--stone); font-size: 10px; margin-top: 12px; }
.metric-value { font-size: 24px; letter-spacing: -.025em; font-weight: 400; }
.account-panel { padding: 24px; }
.account-panel .balance-block { padding: 0; gap: 7px; }
.balance-block::before { display: none; }
.balance-value { font-size: clamp(31px, 3vw, 45px); font-weight: 350; }
.balance-caption { font-size: 10px; text-transform: none; letter-spacing: .015em; color: var(--stone); }
.balance-label { font-size: 9px; }
.balance-row { min-width: 0; }
.balance-row .balance-value { overflow-wrap: anywhere; }
.segmented-control { border-radius: 5px; background: #090f10; padding: 3px; max-width: 260px; }
.segmented-control button { min-height: 36px; border-radius: 3px; font-size: 11px; }
.segmented-control button.is-active, .segmented-control button[aria-pressed='true'] { background: #2c3631; color: #e9ddbc; box-shadow: none; }
.quick-actions { margin-top: 22px; gap: 8px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.quick-action { min-height: 70px; gap: 9px; font-size: 10px; font-weight: 500; border-radius: 5px; }
.action-icon, .quick-action-icon { height: 36px; width: 36px; border: 0; border-radius: 4px; background: #bca16c0a; }
.quick-action:hover { background: #bfaa7c0c; }
.account-snapshot { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; align-items: center; min-height: 72px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.account-snapshot:last-child { border-bottom: 0; }
.account-snapshot strong { font-size: 12px; font-weight: 500; }
.account-snapshot small, .account-snapshot .muted { font-size: 10px; color: var(--stone); }
.account-snapshot .metric-value { font-size: 19px; }
.card-preview-panel { background: transparent; border: 0; padding: 0; }
.card-preview-panel .panel-heading { margin: 2px 0 16px; }
.bank-card { max-height: none; min-height: 170px; aspect-ratio: 1.67; border-radius: 10px; padding: 23px; box-shadow: 0 12px 24px #0003; }
.bank-card.card-gold, .bank-card.bank-card--gold { color: #d7c08b; background: linear-gradient(115deg,#222724,#0d1413 62%,#1e2b25); border: 1px solid #c0a77755; }
.bank-card.card-gold .coutts-logo, .bank-card.bank-card--gold .coutts-logo { filter: brightness(0) saturate(100%) invert(82%) sepia(31%) saturate(724%) hue-rotate(359deg) brightness(91%) contrast(89%); opacity: 1; }
.bank-card::before { right: -50px; bottom: -170px; border: 1px solid #d5bb7c22; width: 320px; box-shadow: 0 0 0 24px #d5bb7c08,0 0 0 48px #d5bb7c05; }
.bank-card .card-number { font-size: 16px; letter-spacing: .14em; }
.bank-card .card-holder, .bank-card .card-expiry { font-size: 10px; font-weight: 450; }
.bank-card .card-label { font-size: 8px; opacity: .75; }
.banker-panel { background: #171d1b; border-top: 2px solid #bca16c; }
.banker-panel h2, .banker-panel h3 { font: 25px/1.2 Georgia, serif; font-weight: 400; margin: 10px 0; }
.banker-panel p { font-size: 12px; color: var(--stone); line-height: 1.8; }
.banker-panel .button { font-size: 11px; min-height: 42px; }
.banker-panel .button-row { display: flex; gap: 8px; margin-top: 20px; }
.button, .card-selector button { border-radius: 5px; }
.button-primary { background: #c6ad79; color: #101713; border-color: #c6ad79; font-weight: 600; }
.button-primary:hover { background: #dac492; }
.button-secondary { background: transparent; border-color: #d6bf8d45; }
.transaction-row, .list-button, .menu-row { min-height: 68px; }
.transaction-avatar, .merchant-avatar, .row-icon { border-radius: 6px; background: #dbe4d309; border-color: #dbe4d309; font-size: 10px; }
.transaction-title, .row-title { font-size: 12px; font-weight: 500; }
.transaction-meta, .row-meta { font-size: 10px; line-height: 1.55; }
.transaction-amount { font-size: 12px; font-weight: 500; }
.recent-panel .transaction-row:last-child { border-bottom: 0; }
.chart-panel { padding: 26px; }
.chart-panel .chart { height: 240px; }
.chart-panel .chart svg { height: 100%; }
.chart-inspect input { cursor: pointer; }
.chart-inspect output { color: #bac7ba; }
.insight-card { border-radius: 8px; box-shadow: none; background: #17211f; }
.insight-orbit { opacity: .4; }
.cards-main .bank-card { max-width: 500px; min-height: 220px; }
.cards-main .card-stack { padding: 26px 0; }
.cards-main .card-selector { max-width: 500px; }
.profile-avatar { background: #c0a6751a; border: 1px solid #c0a67530; color: #cdb684; }
.app-navigation { box-shadow: 0 -8px 24px #0003; background: #0d1415f5; }
.app-navigation button { font-weight: 500; font-size: 10px; border-radius: 4px; }
.nav-home-icon { width: 24px; height: 24px; border: 0; background: none !important; box-shadow: none; margin: 0; }
.app-navigation button.is-active::after { content: ''; position: absolute; bottom: 3px; width: 16px; height: 2px; background: var(--gold); }
.app-sheet { width: min(620px, 100%); }
.sheet-panel { background: #141c1d; border-radius: 12px 12px 0 0; }
.sheet-header h2 { font-family: Georgia, serif; font-size: 27px; }
.sheet-body { scrollbar-width: thin; }
.sheet-actions { background: #141c1d; }
@media (min-width: 760px) {
  .banking-app { display: grid; grid-template-columns: 88px minmax(0,1fr); grid-template-rows: 74px minmax(0,1fr); }
  .app-sidebar { display: flex; grid-column: 1; grid-row: 1 / -1; min-height: 0; flex-direction: column; border-right: 1px solid var(--hairline); background: #090f10; z-index: 25; overflow-y: auto; scrollbar-width: thin; }
  .sidebar-brand { display: flex; flex-direction: column; align-items: center; padding: 30px 12px 36px; gap: 19px; }
  .sidebar-brand .coutts-logo { width: 65px; }
  .sidebar-brand > span, .sidebar-caption, .sidebar-footer { display: none; }
  #coutts-prototype .app-navigation { position: static; display: flex !important; flex-direction: column; gap: 9px; min-height: 0; padding: 12px; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  .app-navigation button { min-height: 60px; flex-direction: column; gap: 8px; padding: 11px 4px; font-size: 9px; }
  .app-navigation button.is-active { background: #baa57110; }
  .app-navigation button.is-active::after { width: 2px; height: 18px; left: -12px; top: 50%; bottom: auto; transform: translateY(-50%); }
  #coutts-prototype .workspace-header { display: flex !important; grid-column: 2; grid-row: 1; align-items: center; justify-content: space-between; gap: 18px; padding: 0 28px; border-bottom: 1px solid var(--hairline); background: #0d1213; }
  .workspace-label { display: flex; gap: 10px; align-items: center; font-size: 10px; color: #acb4a9; letter-spacing: .09em; }
  .status-dot { width: 5px; height: 5px; border-radius: 50%; background: #b8a270; }
  .workspace-tools { display: flex; align-items: center; gap: 32px; }
  .workspace-location { display: none; font-size: 10px; color: #97a094; }
  .workspace-location span { margin: 0 15px; opacity: .3; }
  .workspace-lock { display: flex; gap: 8px; align-items: center; min-height: 44px; border: 0; background: none; font-size: 10px; color: #b5bcae; cursor: pointer; }
  .workspace-lock .app-icon { width: 14px; height: 14px; }
  .app-content { grid-column: 2; grid-row: 2; padding: 0; }
  .app-screen { padding: 0 28px 40px; }
  .screen-shell { padding-top: 32px; gap: 28px; }
  .screen-header { padding-bottom: 24px; }
  .home-aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-aside .banker-panel { grid-column: 1 / -1; }
  .payments-dashboard, .services-dashboard { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
  .app-sheet { inset: 0; margin: auto; max-height: min(86dvh,820px); }
  .sheet-panel { max-height: min(86dvh,820px); padding: 16px 30px 28px; border-radius: 10px; border: 1px solid var(--hairline-strong); }
  .sheet-handle { display: none; }
  .toast-region { left: auto; right: 28px; bottom: 24px; width: min(400px,calc(100% - 120px)); transform: none; }
}
@media (min-width: 1100px) {
  .banking-app { grid-template-columns: 220px minmax(0,1fr); }
  .sidebar-brand { padding: 38px 30px 47px; align-items: flex-start; }
  .sidebar-brand .coutts-logo { width: 124px; }
  .sidebar-brand > span { display: block; color: #9caa9a; font-size: 8px; text-transform: uppercase; letter-spacing: .24em; }
  .sidebar-caption { display: block; color: #717f77; font-size: 8px; text-transform: uppercase; letter-spacing: .18em; padding: 0 30px; margin: 0 0 14px; }
  #coutts-prototype .app-navigation { padding: 0 20px; gap: 5px; }
  .app-navigation button { min-height: 52px; flex-direction: row; justify-content: flex-start; gap: 15px; padding: 12px 16px; font-size: 12px; }
  .app-navigation button .app-icon { width: 18px; height: 18px; }
  .app-navigation button.is-active::after { left: -20px; height: 26px; }
  .sidebar-footer { display: flex; flex-direction: column; gap: 17px; margin-top: auto; padding: 42px 30px 28px; }
  .sidebar-monogram { font: italic 56px/1 Georgia,serif; color: #b39a6233; }
  .sidebar-footer p { color: #8c998e; font: 12px/1.8 Georgia,serif; margin: 0; }
  .sidebar-footer button { display: flex; gap: 10px; align-items: center; border: 0; padding: 12px 0; color: #c6b88f; background: none; font-size: 10px; text-align: left; cursor: pointer; }
  .sidebar-footer .app-icon { width: 16px; height: 16px; }
  .sidebar-footer-note { padding-top: 17px; border-top: 1px solid var(--hairline); font-size: 8px; letter-spacing: .18em; color: #718075; text-transform: uppercase; }
  #coutts-prototype .workspace-header { padding: 0 40px; }
  .workspace-location { display: inline; }
  .app-screen { padding: 0 40px 50px; }
  .home-dashboard, .wealth-dashboard { grid-template-columns: minmax(0,1fr) minmax(285px,.43fr); gap: 24px; }
  .home-aside { display: flex; }
  .cards-dashboard { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
  .cards-main { padding: 0; }
  .cards-main .bank-card { max-width: 460px; }
  .relationship-panel { min-height: 308px; }
}
@media (min-width: 1600px) {
  .banking-app { grid-template-columns: 250px minmax(0,1fr); }
  .app-screen { padding-inline: clamp(40px,4vw,100px); }
  .home-dashboard, .wealth-dashboard { grid-template-columns: minmax(0,1fr) minmax(340px,.4fr); gap: 28px; }
  .relationship-panel { padding: 34px; }
  .relationship-chart svg { max-height: 175px; }
}
@media (max-width: 759px) {
  .relationship-panel { padding: 22px; }
  .dashboard-panel, .panel, .chart-panel { padding: 19px; }
  .relationship-heading h2 { font-size: 9px; }
  .account-panel-header { flex-wrap: wrap; }
  .account-panel-header .segmented-control { width: 100%; max-width: none; }
  .relationship-value { font-size: clamp(32px,8.5vw,47px); }
  .screen-title { font-size: 32px; }
  .cards-main .bank-card { min-height: 180px; }
  .home-aside .bank-card { max-width: 460px; }
}
@media (max-width: 374px) {
  .app-screen { padding-inline: 14px; }
  .dashboard-panel, .panel, .chart-panel { padding: 16px; }
  .balance-value { font-size: 30px; }
  .bank-card { padding: 18px; min-height: 163px; }
  .transaction-row { gap: 9px; }
  .transaction-avatar { width: 32px; height: 32px; }
  .transaction-title { font-size: 11px; }
  .transaction-amount { font-size: 11px; }
}
/* A consistent evening palette carries from sign-in into the workspace. */
@media (min-width: 600px) {
  .lock-screen { color-scheme: dark; background: #0f1717; color: var(--ivory); }
  .lock-header, .login-layout::before { background: #0b1112; }
  .login-panel { background: #141e1e; border-color: #d5bb7c22; box-shadow: 0 30px 70px #0003; }
  .lock-intro .eyebrow { color: var(--gold); }
  .lock-intro > p:last-child, .login-pin-form p, .login-profile div > span, .lock-message, .login-security-note, .lock-footer, .lock-footer .login-help { color: #a1afa4; }
  .login-profile, .login-security-note { border-color: var(--hairline-strong); }
  .login-avatar { background: #b49a6520; color: #d6bf8d; }
  #login-pin { background: #0b1314; color: var(--ivory); border-color: #6a7666; }
  #login-pin::placeholder { color: #98a194; }
  .login-submit { background: #c6ad79; color: #101713; border-color: #c6ad79; }
  .login-submit:hover { background: #dac492; border-color: #dac492; }
  .login-device-divider { color: #9ca99d; }
  .login-device-divider::before, .login-device-divider::after { background: var(--hairline-strong); }
  #device-auth-button { border-color: #74806c; color: #d1c7ae; }
  #device-auth-button:hover { background: #c6ad7910; }
  .lock-message.is-error { color: #edaaaa; }
}
@media (min-width: 1100px) {
  .lock-screen { background: linear-gradient(90deg,#0b1112 52%,#111a1a 52%); }
  .lock-header, .login-panel { background: transparent; box-shadow: none; }
  .lock-header > .login-help { color: #b3bcae; }
  .login-story h2 { font-size: clamp(50px,5.2vw,86px); }
  .login-art { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) { .relationship-chart .chart-line { animation: none; } }
@media (forced-colors: active) {
  .dashboard-panel, .panel, .bank-card, .app-sidebar, .workspace-header, .login-panel, #login-pin, .lock-screen { background: Canvas; color: CanvasText; border-color: CanvasText; }
  .app-navigation button.is-active { outline: 2px solid Highlight; }
}
/* Screen-specific compositions. */
.dashboard-panel .eyebrow { font-size: 9px; margin: 0 0 8px; }
.dashboard-panel h2 { margin: 0; font-size: 18px; font-weight: 450; }
.dashboard-panel > .section-heading { margin: 0 0 18px; }
.text-button { display: inline-flex; align-items: center; gap: 8px; text-transform: none; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.text-button .app-icon { width: 16px; height: 16px; }
.relationship-heading > .eyebrow { margin: 0; }
.relationship-value-row { display: flex; align-items: center; gap: 10px; }
.relationship-value-row .privacy-button { flex-shrink: 0; width: 34px; height: 40px; }
.relationship-value { margin: 20px 0 6px; }
.relationship-caption { font-size: 12px; color: #aebdb2; margin: 4px 0 0; }
.relationship-grid { fill: none; stroke: #cadaba13; stroke-width: 1; }
.relationship-line { fill: none; stroke: #c9b382; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.relationship-endpoint { fill: #dfc99a; stroke: #243b31; stroke-width: 3; }
.relationship-summary { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; padding-top: 23px; margin-top: 20px; border-top: 1px solid #d8dfcf20; }
.relationship-summary > div + div { padding-left: 20px; border-left: 1px solid #d8dfcf20; }
.relationship-summary .metric-label { font-size: 8px; letter-spacing: .1em; margin: 0 0 6px; }
.relationship-summary .metric-value { display: block; color: #e8e2d1; font-weight: 400; font-size: 21px; }
.account-panel-header h2 { font-size: 18px; margin: 0; font-weight: 450; }
.account-selector { flex-shrink: 0; }
.account-snapshot { display: grid; grid-template-columns: 35px minmax(0,1fr); width: 100%; text-align: left; background: transparent; color: var(--ivory); border: 0; border-bottom: 1px solid var(--hairline); cursor: pointer; gap: 2px 10px; padding: 14px 0; }
.account-snapshot:hover { background: #c4b48708; }
.account-currency { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; font-size: 9px; border: 1px solid #c0a77722; color: #c3b78d; border-radius: 50%; }
.account-snapshot-copy { display: block; min-width: 0; }
.account-snapshot-copy strong, .account-snapshot-copy small { display: block; }
.account-snapshot-copy small { font-size: 9px; margin-top: 3px; color: #9aa698; }
.account-snapshot-value { grid-column: 2; font-size: 16px; letter-spacing: -.015em; margin-top: 6px; }
.panel-count { display: inline-grid; place-items: center; width: 22px; height: 22px; font-size: 10px; border: 1px solid var(--hairline-strong); border-radius: 50%; color: var(--stone); }
.activity-table-heading { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); color: #9daa9c; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.activity-insights-link { margin-top: 13px; }
.card-preview-panel .card-stack { padding-bottom: 12px; }
.card-preview-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--stone); font-size: 11px; }
.banker-identity { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; }
.banker-monogram { display: grid; flex: 0 0 44px; height: 44px; place-items: center; border-radius: 50%; border: 1px solid #bfa57444; color: #d2bc8d; background: #bfa5740b; font: 17px Georgia,serif; }
.banker-identity h2 { font: 21px/1.2 Georgia,serif; }
.banker-identity p { font-size: 10px; margin: 5px 0 0; }
.banker-caption { margin: 0; }
.banker-panel .button-row .button { flex: 1; padding: 10px 12px; gap: 8px; }
.banker-panel .button-row .app-icon { width: 15px; height: 15px; }
.relationship-note { display: flex; align-items: center; justify-content: center; gap: 14px; color: #77877a; padding: 4px 12px; }
.relationship-note .app-icon { width: 18px; height: 18px; }
.relationship-note p { margin: 0; font: 12px/1.8 Georgia,serif; }
.payment-primary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.payment-primary-actions > :first-child { grid-column: 1 / -1; justify-content: space-between; }
.payment-primary-actions .button { min-height: 48px; padding: 12px; font-size: 12px; }
.payment-primary-actions .app-icon { width: 17px; height: 17px; }
.saved-payees { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.saved-payee { display: flex; min-width: 0; text-align: left; align-items: center; gap: 12px; min-height: 86px; padding: 12px; border: 1px solid var(--hairline); border-radius: 5px; background: #d5ddc903; cursor: pointer; }
.saved-payee:hover { border-color: #c6ad7977; }
.saved-payee-copy { flex: 1; min-width: 0; }
.saved-payee-copy strong, .saved-payee-copy small { display: block; }
.saved-payee-copy strong { font-size: 12px; font-weight: 500; }
.saved-payee-copy small { font-size: 9px; color: var(--stone); margin-top: 4px; }
.saved-payee .row-chevron { width: 14px; height: 14px; }
.saved-payee .transaction-avatar { width: 32px; height: 32px; flex-shrink: 0; }
.scheduled-list .list-button { flex-wrap: wrap; }
.scheduled-list .row-copy { flex-basis: 120px; }
.scheduled-list .amount { font-size: 13px; }
.payment-guidance { padding: 24px 4px; color: #a8b2a5; }
.payment-guidance h2 { font: 25px Georgia,serif; margin: 14px 0; color: #d9daca; }
.payment-guidance p { font-size: 12px; line-height: 1.8; }
.wealth-chart-panel .section-heading { align-items: flex-start; }
.wealth-chart-panel .balance-value { font-size: clamp(28px,3vw,46px); margin: 10px 0; }
.wealth-chart-panel .segmented-control { min-width: 108px; margin: 0; }
.wealth-movement { font-size: 11px; margin: 10px 0 24px; }
.positive { color: var(--jade); }
.negative { color: var(--rose); }
.valuation-note { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; padding-top: 18px; margin-top: 16px; border-top: 1px solid var(--hairline); font-size: 9px; color: var(--stone); }
.portfolio-total { font-size: 16px; color: #cab78b; white-space: nowrap; }
.asset-value small { display: block; font-size: 10px; margin-top: 4px; }
.asset-title { font-size: 13px; }
.asset-meta { font-size: 10px; }
.goal-panel > h2 { font: 29px/1.2 Georgia,serif; margin: 18px 0; }
.goal-value { font-size: 24px; margin: 20px 0; letter-spacing: -.025em; }
.goal-value > span { display: block; font-size: 12px; color: var(--stone); margin-top: 5px; }
.goal-progress { height: 3px; background: #d8dfcf15; margin: 16px 0; }
.goal-progress > span { display: block; height: 100%; background: #c5ae78; }
.goal-panel > .muted { font-size: 11px; }
.goal-panel .text-button { margin-top: 10px; }
.card-display-stage { padding: 32px 0; }
.card-display-stage .bank-card { margin: 0 auto; }
.card-account-caption { margin-top: 28px; border-top: 1px solid var(--hairline); padding-top: 24px; }
.card-account-caption h2 { font: 25px Georgia,serif; margin: 8px 0; }
.card-account-caption p { font-size: 12px; }
.card-meta-row > .muted { font-size: 11px; }
.card-limit-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.card-limit-summary .metric-value { font-size: 23px; }
.card-limit-summary .metric-label { letter-spacing: .08em; font-size: 8px; }
.card-support-panel { padding: 30px; }
.card-support-panel > h2 { font: 30px/1.2 Georgia,serif; margin: 18px 0; }
.card-support-panel > p { font-size: 12px; line-height: 1.8; }
.card-support-panel .row-icon { margin-bottom: 24px; color: #c3ad7c; }
.profile-panel .avatar-monogram { width: 60px; height: 60px; font: 22px Georgia,serif; border: 1px solid #c9ad7740; color: #cdb787; background: #c9ad7710; }
.profile-panel h2 { font: 32px Georgia,serif; margin: 8px 0; }
.profile-panel p { font-size: 12px; }
.profile-panel > .text-button { margin-top: 24px; }
.documents-preview > .text-button { margin-top: 16px; }
@media (max-width: 1099px) {
  .payments-dashboard { grid-template-columns: 1fr; }
  .payments-aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .payment-guidance { grid-column: 1 / -1; }
  .dashboard-date { display: none; }
}
@media (max-width: 759px) {
  .relationship-summary { grid-template-columns: 1fr 1fr; gap: 16px; }
  .relationship-summary > div:nth-child(3) { display: none; }
  .relationship-summary .metric-value { font-size: 20px; }
  .relationship-summary .metric-label { font-size: 8px; line-height: 1.8; }
  .relationship-value-row { gap: 3px; }
  .relationship-value-row .privacy-button { width: 28px; }
  .relationship-value { font-size: clamp(28px,8.2vw,48px); }
  .relationship-heading .text-button { font-size: 10px; }
  .relationship-chart { margin-top: 17px; }
  .relationship-caption { font-size: 11px; }
  .saved-payees { grid-template-columns: 1fr; }
  .payments-aside { display: flex; }
  .wealth-chart-panel .section-heading { flex-wrap: wrap; }
  .wealth-chart-panel .balance-value { font-size: 31px; }
  .chart-panel .chart { height: 180px; }
  .portfolio-panel .section-heading { flex-wrap: wrap; }
  .home-aside .relationship-note { padding-bottom: 12px; }
  .card-limit-summary { grid-template-columns: 1fr; }
  .card-limit-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
  .card-limit-summary .metric-label { margin: 0; font-size: 10px; }
}
/* Fit a complete overview into a desktop working area without compressing controls. */
@media (min-width: 1100px) {
  .relationship-panel { padding: 22px 26px; }
  .relationship-heading { min-height: 36px; }
  .relationship-heading .text-button { min-height: 36px; }
  .relationship-value { margin: 8px 0 6px; }
  .relationship-chart { margin-top: 18px; }
  .relationship-chart svg { max-height: 104px; }
  .relationship-summary { margin-top: 14px; padding-top: 17px; }
  .account-snapshot { min-height: 76px; padding: 10px 0; }
  .account-snapshot-value { font-size: 15px; margin-top: 3px; }
  .accounts-panel { padding-bottom: 15px; }
}
/* Keep action descriptions legible on narrow screens and enlarged text. */
.menu-title, .menu-meta, .row-title, .row-meta, .asset-title, .asset-meta { white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; }
.menu-row, .list-button { padding-block: 14px; }
.asset-row { grid-template-columns: auto minmax(0,1fr) auto auto; }
.asset-row .row-chevron { width: 14px; height: 14px; }
@media (max-width: 374px) {
  .asset-row { grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
  .asset-row > .row-icon, .asset-row > .row-chevron { display: none; }
  .asset-value { font-size: 14px; }
  .relationship-heading { gap: 6px; }
  .relationship-heading > .eyebrow { max-width: 125px; }
  .relationship-heading .text-button { flex-shrink: 0; }
}