/* 6.4 — Obsidian glass, platinum light and champagne gold. */
@font-face { font-family: Manrope; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/manrope-latin-variable.woff2') format('woff2'); }
:root {
 color-scheme: dark;
 --font-ui: Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-display: var(--font-ui);
 --ink:#050507; --ink-deep:#030304; --surface:#121317; --surface-raised:#1c1d23; --surface-soft:#18191e; --surface-pressed:#24252b;
 --ivory:#f5f5f7; --ivory-soft:#d3d4da; --stone:#a1a4ac; --stone-dark:#81848e;
 --gold:#dbc792; --gold-bright:#f4e7c5; --gold-deep:#9c8355; --jade:#b8d6c7; --rose:#e8a8b1; --amber:#e1c997;
 --hairline:#ffffff12; --hairline-strong:#ffffff26; --gold-wash:#dbc79210; --jade-wash:#b8d6c70c; --rose-wash:#e8a8b10c;
 --gold-gradient:linear-gradient(115deg,#ab8d58 0%,#e7d5a8 35%,#fff1cd 52%,#c6aa72 78%,#e9d8b4 100%);
 --glass-surface:linear-gradient(150deg,#ffffff09,#ffffff01 48%),#101115;
 --radius-panel:24px; --radius-control:14px; --radius-card:22px;
}
html,body.coutts-prototype-page,.prototype-shell,.banking-app { background:#050507; }
body.coutts-prototype-page,.banking-app,button,input,select,textarea { font-family:var(--font-ui); }
.banking-app { color:var(--ivory); -webkit-font-smoothing:antialiased; }
.app-content { background:radial-gradient(ellipse at 90% 0,#b8bec411,transparent 38%),#050507; scrollbar-color:#4c4e56 transparent; }
.app-content::-webkit-scrollbar-thumb { background:#4c4e56; }
.screen-header h1,.sheet-header h2,.dashboard-panel h2,.dashboard-panel h3,.banker-panel h2,.profile-panel h2,.card-account-caption h2,.card-support-panel > h2,.goal-panel > h2,.payment-guidance h2 { font-family:var(--font-display); letter-spacing:-.045em; font-weight:600; }
.screen-header h1 { font-size:clamp(28px,3vw,42px); line-height:1.17; }
.screen-title:focus,#lock-title:focus { outline:none; }
.screen-header { border:0; padding-bottom:8px; }
.screen-header .eyebrow { color:#a1a4ac; letter-spacing:.13em; }
.dashboard-panel,.panel,.chart-panel,.auth-panel,.receipt { background:var(--glass-surface); color:var(--ivory); border:1px solid #ffffff13; border-radius:24px; box-shadow:inset 0 1px 0 #ffffff08,0 16px 40px #00000020; padding:24px; }
.dashboard-panel h2 { font-size:19px; font-weight:600; }
.app-icon { stroke-width:1.65; }
.icon-button { position:relative; background:linear-gradient(145deg,#ffffff0e,#ffffff02); border:1px solid #ffffff1a; color:#e5e6ec; box-shadow:inset 0 1px 0 #ffffff08; }
.icon-button:hover { background:#ffffff12; }
.text-button { color:var(--gold); font-size:12px; min-height:44px; letter-spacing:0; text-transform:none; }
.button { border-radius:16px; font-size:13px; min-height:48px; font-weight:600; transition:background 180ms,border-color 180ms,transform 180ms; }
.button-primary { background:var(--gold-gradient); border:1px solid #e4d2a8; color:#1d180f; box-shadow:inset 0 1px 0 #fff7,0 5px 24px #c5a66a12; }
.button-primary:hover { background:linear-gradient(115deg,#c7ac75,#fff2d4 52%,#dcc391); }
.button-secondary { background:linear-gradient(130deg,#ffffff09,#ffffff02); border-color:#ffffff20; color:#e3e4e9; }
.button-secondary:hover { background:#ffffff10; border-color:#ffffff36; }
.segmented-control { background:#ffffff05; padding:4px; border:1px solid #ffffff15; border-radius:14px; }
.segmented-control button { color:#9a9da7; border-radius:10px; font-size:12px; min-height:36px; }
.segmented-control button.is-active,.segmented-control button[aria-pressed='true'] { color:#f6e9c8; background:linear-gradient(145deg,#d1b57726,#d1b57710); box-shadow:inset 0 1px 0 #f5dfab26; }
.eyebrow { color:#a1a4ac; }
.screen-header .icon-button { width:44px; height:44px; }
.dashboard-date { color:#8d919b; }
.privacy-button { color:#8f939e; min-width:44px; min-height:44px; }
.banking-tabs { gap:8px; border-color:var(--hairline); }
.banking-tabs button { background:linear-gradient(135deg,#ffffff08,#ffffff02); border:1px solid #ffffff10; color:#d7d9e1; border-radius:14px; font-size:12px; }
.banking-tabs .app-icon { color:#ddcda3; }
.banking-tabs button:hover { background:#ffffff10; border-color:#d4bd7e44; }
.merchant-icon { border-radius:13px; background:#fff; border:1px solid #ffffff16; }
.merchant-icon.is-fallback { background:linear-gradient(140deg,#282b33,#14161c); color:#d2d5df; }
.transaction-row { padding-block:15px; min-height:76px; border-color:#ffffff0d; border-radius:0; background:transparent; }
.transaction-row:hover { background:#ffffff04; }
.transaction-title { font-size:14px; font-weight:600; color:#eceef4; }
.transaction-meta { color:#858a97; font-size:11px; }
.transaction-amount { color:#e5e7ee; font-size:14px; font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.transaction-amount.amount--credit { color:#badcca; }
.transaction-avatar,.merchant-avatar,.row-icon { background:#ffffff08; border:1px solid #ffffff0e; color:#d8c99f; border-radius:14px; }
.activity-table-heading { color:#9196a1; border-color:var(--hairline); }
.relationship-panel { background:radial-gradient(ellipse at 100% 0,#c3ac7220,transparent 55%),var(--glass-surface); border-color:#dbc79224; }
.relationship-panel::after { display:none; }
.relationship-heading h2,.relationship-heading .eyebrow { color:#aeb0b9; }
.relationship-caption,.relationship-summary { color:#9499a5; }
.relationship-value { font-family:var(--font-display); font-weight:500; }
.relationship-summary,.relationship-summary > div + div { border-color:var(--hairline); }
.relationship-summary .metric-value { color:#e8eaf0; }
.banker-panel { background:var(--glass-surface); border:1px solid #ffffff18; }
.banker-panel p { color:#969ba6; }
.banker-identity h2 { font-family:var(--font-ui); font-size:20px; }
.banker-monogram { background:linear-gradient(130deg,#dbdee7,#737984); color:#13161d; border:1px solid #ffffff40; font:600 15px/1 var(--font-ui); }
.relationship-note { color:#858b96; }
.relationship-note p { font:12px/1.7 var(--font-ui); }
.account-currency { border-color:#ffffff1b; color:#cacdd6; background:#ffffff07; }
.account-snapshot-copy small { color:#878c98; }
.account-snapshot-value { color:#e3e6ee; }
.account-snapshot:hover { background:#ffffff04; }
/* Black metal with a sculpted platinum reflection. */
.bank-card,.bank-card.bank-card--gold,.bank-card.card-gold { aspect-ratio:1.78; min-height:0; padding:25px; border-radius:22px; overflow:hidden; color:#ece5d5; isolation:isolate; transform-style:flat; background:radial-gradient(ellipse at 90% -20%,#c0c4ce34,transparent 52%),linear-gradient(120deg,#282b32 0%,#101116 38%,#06070b 72%,#303138 100%); border:1px solid #c8c3b747; box-shadow:inset 0 1px 0 #ffffff40,inset 0 -1px 0 #ffffff0e,0 15px 35px #0005; }
.bank-card::before { display:block; content:''; position:absolute; z-index:0; width:250px; height:250px; aspect-ratio:1; right:-100px; top:-94px; bottom:auto; border-radius:50%; transform:rotate(-22deg) scaleX(1.3); background:conic-gradient(from 50deg,#06070b 0deg,#a9a395 45deg,#f1e5c2 61deg,#17191f 90deg,#090a0e 166deg,#969ca7 230deg,#181b22 270deg,#06070b 360deg); border:12px solid #ffffff04; box-shadow:inset 0 0 20px #000,0 0 0 1px #ffffff12; opacity:.42; }
.bank-card::after { background:linear-gradient(112deg,transparent 24%,#ffffff2c 48%,transparent 68%); opacity:.5; z-index:0; }
.bank-card > * { z-index:1; }
.bank-card .coutts-logo,.bank-card.bank-card--gold .coutts-logo,.bank-card.card-gold .coutts-logo { width:104px; filter:brightness(0) invert(1); opacity:.94; }
.bank-card .card-number { font-family:var(--font-ui); font-size:15px; font-weight:500; letter-spacing:.16em; color:#dfd8c7; }
.bank-card .card-holder,.bank-card .card-expiry { color:#e3e4e8; font-size:11px; font-weight:500; letter-spacing:.04em; }
.bank-card .card-label,.bank-card.bank-card--gold .card-label { color:#94969f; opacity:1; font-size:8px; letter-spacing:.12em; }
.card-hardware { display:flex; align-items:center; gap:12px; }
.card-hardware .card-chip { width:30px; height:24px; background:linear-gradient(135deg,#a18a5e,#f7e7bb 49%,#ae925f); border-color:#ccb983; opacity:.9; }
.card-contactless { width:23px; height:23px; color:#d4c397; }
.bank-card.bank-card--black { background:radial-gradient(ellipse at 0 0,#8f9aab30,transparent 70%),linear-gradient(135deg,#343841,#12151b 55%,#282e37); border-color:#abb6c447; }
.bank-card.bank-card--black::before { filter:grayscale(1); }
.bank-card.bank-card--frozen { filter:saturate(.25); }
.card-frozen-badge { background:#1c1f26; color:#fff; border:1px solid #ffffff40; }
/* Balance first, clear actions, uninterrupted activity. */
.home-screen .account-panel { position:relative; background:transparent; border:0; box-shadow:none; padding:24px; overflow:visible; }
.home-screen .account-panel-header { margin-bottom:22px; justify-content:flex-start; }
.home-screen .account-selector { width:212px; max-width:100%; }
.home-screen .account-selector button { font-size:12px; }
.home-screen .balance-heading { display:flex; justify-content:flex-start; align-items:center; gap:3px; min-height:40px; }
.home-screen .balance-label { color:#a2a6b1; font-size:12px; text-transform:none; letter-spacing:.01em; margin:0; }
.home-screen .balance-value { font-family:var(--font-display); font-size:clamp(42px,4vw,58px); line-height:1.12; font-weight:500; letter-spacing:-.065em; margin:0; color:#f8f8fa; }
.home-screen .balance-caption { color:#777e8d; font-size:11px; margin:8px 0 0; }
.home-screen .balance-block { gap:0; }
.home-card-showcase { margin-top:25px; width:100%; }
.home-card-showcase .bank-card { width:100%; max-width:440px; margin:0 auto; }
.home-screen .quick-actions { border:0; padding:0; margin-top:24px; gap:12px; }
.home-screen .quick-action { color:#c4c8d2; background:transparent; min-height:76px; padding:0; font-size:11px; gap:10px; }
.home-screen .quick-action-icon,.home-screen .action-icon { width:50px; height:50px; border:1px solid #ffffff1c; border-radius:17px; background:linear-gradient(140deg,#ffffff0e,#ffffff02); color:#dadde6; box-shadow:inset 0 1px 0 #ffffff0c; transition:background 180ms,transform 180ms; }
.home-screen .quick-action:first-child .quick-action-icon { background:var(--gold-gradient); color:#201a0e; border-color:#e4d0a1; box-shadow:inset 0 1px 0 #fff6,0 5px 24px #c4a56718; }
.home-screen .quick-action-icon .app-icon { width:22px; height:22px; }
.home-screen .quick-action:hover .quick-action-icon { transform:translateY(-2px); }
.home-tools .banking-tabs { border:0; padding-top:0; margin-top:0; }
.home-tools .spending-preview { border-color:var(--hairline); }
.home-tools .spending-preview-metrics span { color:#9499a6; }
.home-tools .spending-preview-metrics strong { color:#e7e9ef; font-weight:500; }
.home-tools .spending-preview p { color:#959ba7; }
.home-tools .spending-comparison[data-direction='down'] { color:#b8d6c7; }
.home-tools .spending-comparison[data-direction='up'] { color:#dcc58e; }
.home-main > .account-panel,.home-main > .recent-panel,.home-main > .relationship-panel,.home-main > .home-tools { order:initial; }
.home-screen .recent-panel { background:transparent; border-color:#ffffff13; box-shadow:none; }
.home-screen .recent-panel .text-button { color:#b2b7c2; }
/* Geometry in mobile-banking.css; only material and icons here. */
.app-sidebar { background:#08090c; }
.sidebar-brand > span,.sidebar-caption,.sidebar-footer p { color:#8f96a3; }
.sidebar-footer-note { color:#818795; border-color:#ffffff12; }
.sidebar-footer button { color:#dbc792; }
.sidebar-monogram { color:#c9ad6b25; }
#coutts-prototype .workspace-header { background:#08090c; border-color:#ffffff0e; }
.workspace-label,.workspace-lock,.workspace-location { color:#8f96a3; }
.status-dot { background:#dac38e; box-shadow:0 0 10px #dac38e33; }
#coutts-prototype .app-navigation { background:#08090cf0; border-top:1px solid #ffffff19; box-shadow:0 -8px 28px #00000020,inset 0 1px 0 #ffffff03; backdrop-filter:blur(24px) saturate(125%); -webkit-backdrop-filter:blur(24px) saturate(125%); }
.app-navigation button { color:#858c9a; font-family:var(--font-ui); }
.app-navigation button.is-active { color:#ecdbb4; }
.app-navigation button.is-active::after { background:var(--gold-gradient); }
@media (min-width:760px) {
 #coutts-prototype .app-navigation { background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
 .app-navigation button.is-active { background:linear-gradient(100deg,#d8bf8320,transparent); border-color:#dbc79224; }
 .home-screen .account-panel { padding:12px 0 28px; }
 .home-screen .quick-actions { max-width:440px; }
 .home-screen .recent-panel,.home-screen .home-tools { padding:24px; }
}
@media (min-width:1100px) {
 .home-dashboard { grid-template-columns:minmax(420px,1.2fr) minmax(310px,.8fr); align-items:start; }
 .home-screen .account-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:28px; align-items:center; }
 .home-screen .account-panel-header { grid-column:1; margin:0 0 8px; }
 .home-screen .balance-block { grid-column:1; grid-row:2; }
 .home-card-showcase { grid-column:2; grid-row:1 / 4; margin-top:0; }
 .home-card-showcase .bank-card { padding:18px; }
 .home-card-showcase .card-number { font-size:12px; }
 .home-card-showcase .coutts-logo { width:88px; }
 .home-screen .quick-actions { grid-column:1 / -1; width:100%; max-width:none; margin-top:24px; }
 .home-screen .balance-value { font-size:clamp(34px,3.2vw,52px); }
}
@media (max-width:759px) {
 .screen-shell { gap:22px; }
 .screen-header h1 { font-size:29px; }
 .app-screen { padding-left:max(22px,env(safe-area-inset-left,0px)); padding-right:max(22px,env(safe-area-inset-right,0px)); }
 .dashboard-panel,.panel,.chart-panel { padding:20px; border-radius:22px; }
 .home-screen { padding-top:0; gap:0; }
 .app-screen:has(> .home-screen) { padding:0 0 24px; }
 .home-screen > .screen-header { background:transparent; margin:0; padding:max(22px,env(safe-area-inset-top,0px)) 24px 16px; border:0; }
 .home-screen > .screen-header .eyebrow { display:block; color:#b9a479; letter-spacing:.18em; font-size:9px; margin:0 0 7px; }
 .home-screen > .screen-header h1 { font-size:25px; font-weight:500; letter-spacing:-.04em; }
 .home-screen > .screen-header .icon-button { width:44px; height:44px; }
 .home-dashboard,.home-main { gap:0; }
 .home-screen .account-panel { padding:3px 24px 22px; border-radius:0; }
 .home-screen .account-panel-header { position:static; margin:0 0 12px; justify-content:flex-start; }
 .home-screen .account-selector { width:100%; max-width:240px; padding:3px; border:0; background:transparent; gap:8px; }
 .home-screen .account-selector button { min-height:36px; font-size:11px; border-radius:11px; background:#ffffff05; border:1px solid #ffffff0d; }
 .home-screen .account-selector button.is-active { background:#dbc79212; border-color:#dbc79236; color:#e8d7b0; box-shadow:inset 0 1px 0 #f3deb716; }
 .home-screen .balance-heading { min-height:35px; padding:0; }
 .home-screen .balance-label { font-size:12px; white-space:nowrap; }
 .home-screen .balance-value { font-size:clamp(35px,11.7vw,51px); }
 .home-screen .balance-heading .privacy-button { width:44px; height:44px; }
 .home-screen .balance-caption { font-size:10px; margin-top:7px; }
 .home-card-showcase { margin-top:24px; }
 .home-card-showcase .bank-card { aspect-ratio:2.06; padding:22px; }
 .home-card-showcase .card-label { display:none; }
 .home-card-showcase .card-number { font-size:14px; margin-block:19px 16px; }
 .home-screen .quick-actions { margin-top:22px; gap:8px; }
 .home-screen .quick-action { min-height:76px; gap:9px; }
 .home-screen .quick-action > span:last-child { font-size:11px; letter-spacing:-.02em; }
 .home-screen .recent-panel { background:transparent; border:0; border-top:1px solid #ffffff12; border-radius:0; padding:20px 24px 8px; margin:0 0 22px; }
 .home-screen .recent-panel .section-heading { margin-bottom:1px; }
 .home-screen .recent-panel .section-heading .eyebrow,.home-screen .activity-table-heading { display:none; }
 .home-screen .recent-panel h2 { font-size:18px; font-weight:600; }
 .home-screen .recent-panel .text-button { color:#a7adb9; font-size:11px; }
 .home-screen .recent-panel .transaction-row { min-height:74px; padding-block:15px; }
 .home-screen .recent-panel .merchant-icon { width:38px; height:38px; flex-basis:38px; border-radius:13px; }
 .home-screen .recent-panel .transaction-title,.home-screen .recent-panel .transaction-amount { font-size:13px; }
 .home-screen .recent-panel .transaction-meta { font-size:10px; }
 .home-screen .home-tools,.home-screen .relationship-panel { margin:0 20px 22px; }
 .home-aside { padding:0 20px; gap:22px; }
 #coutts-prototype .app-navigation { border-radius:0; }
 .app-navigation button { gap:6px; min-height:62px; font-size:10px; font-weight:500; }
 .app-navigation button > .app-icon { width:23px; height:23px; padding:0; border-radius:0; }
 .app-navigation button.is-active > .app-icon { background:transparent; color:#e6d1a0; filter:drop-shadow(0 0 7px #d4b46b45); }
 .app-navigation button.is-active::after { display:block; width:16px; height:2px; border-radius:2px; top:0; bottom:auto; }
 .nav-home-icon { width:23px; height:23px; border-radius:0; background:transparent !important; }
 .nav-home-icon > .app-icon { width:23px; height:23px; }
 .app-navigation button.is-active .nav-home-icon { background:transparent !important; color:#e6d1a0; filter:drop-shadow(0 0 7px #d4b46b45); }
}
@media (max-width:374px) {
 .home-screen > .screen-header,.home-screen .account-panel,.home-screen .recent-panel { padding-inline:18px; }
 .home-screen > .screen-header h1 { font-size:23px; }
 .home-card-showcase .bank-card { padding:18px; aspect-ratio:1.95; }
 .home-card-showcase .card-number { font-size:12px; }
 .home-screen .recent-panel .transaction-title,.home-screen .recent-panel .transaction-amount { font-size:12px; }
}
/* Entry shares the signed-in material and typography. */
.splash-screen,.lock-screen { --ivory:#f5f5f7; --ivory-soft:#d3d4da; --stone:#a1a4ac; --gold:#dbc792; --hairline:#ffffff16; --hairline-strong:#ffffff26; background:#050507; color:#f5f5f7; color-scheme:dark; }
.lock-header,.login-layout::before { background:#050507; }
.login-panel { background:radial-gradient(ellipse at 100% 0,#ccd4e312,transparent 60%),#0b0c10; border-color:#ffffff15; }
.lock-intro h1,.login-story h2 { font-family:var(--font-display); font-weight:500; letter-spacing:-.05em; }
.login-avatar { background:var(--gold-gradient); color:#231c0e; }
#login-pin { background:#090a0e; color:#f4f4f6; border-color:#555a67; }
.login-submit,.lock-screen .device-auth-button { background:var(--gold-gradient); color:#201a10; border-color:#d2bc8a; border-radius:16px; }
.lock-screen .icon-button { color:#e4d5b2; background:#17191f; border-color:#fff2; }
.lock-screen .button-secondary { color:#e1ce9d; background:transparent; border-color:#ffffff2a; }
.lock-screen[data-device-available='false'] .login-device-note { color:#a1a4ac; }
.pin-key { font-family:var(--font-display); font-size:25px; border-radius:18px; }
.pin-key:active { background:#ffffff0c; }
@media (min-width:1100px) { .lock-screen { background:linear-gradient(90deg,#050507 52%,#101115 52%); } .login-panel { background:transparent; } }
@media (prefers-reduced-motion:reduce) { .app-screen.is-active .screen-shell,.app-screen.is-active .bank-card::after { animation:none; } .button,.bank-card,.quick-action-icon { transition:none; } }
@media (prefers-reduced-transparency:reduce) { #coutts-prototype .app-navigation { background:#090a0e; backdrop-filter:none; -webkit-backdrop-filter:none; } }
html[data-motion='reduced'] #coutts-prototype * { animation:none !important; transition:none !important; }
@media (forced-colors:active) {
 .bank-card,.home-screen .account-panel,.dashboard-panel,.app-navigation,.app-sidebar { background:Canvas !important; color:CanvasText !important; border:1px solid CanvasText; }
 .bank-card span,.home-screen .balance-value,.home-screen .balance-label,.home-screen .balance-caption { color:CanvasText !important; }
 .bank-card::before,.bank-card::after { display:none; }
 .app-navigation button.is-active { outline:2px solid Highlight; }
}