.card-page [hidden] { display:none!important; }
.card-header,.card-main,.card-footer { width:min(1080px,calc(100% - 80px)); margin-inline:auto; }
.card-header { display:flex; justify-content:space-between; align-items:center; padding-block:30px; border-bottom:1px solid var(--line); }
.card-header .brand { width:auto; }
.card-back { font-size:12px; }
.card-back span { margin-left:12px; }
.card-main { min-height:65vh; padding-block:60px 70px; }
.card-heading { margin-bottom:32px; }
.card-heading .eyebrow { color:var(--olive); margin-bottom:18px; }
.card-heading h1 { font-size:clamp(38px,5.4vw,62px); font-weight:400; line-height:1.04; letter-spacing:-.045em; }
.card-heading h1 em { color:var(--olive); font-size:1.1em; }
.card-heading > p:last-child { margin-top:20px; color:var(--muted); font-size:13px; line-height:1.7; }
.card-notice { border:1px solid #ccd0be; background:#eceee3; padding:16px 20px; margin:0 0 24px; border-radius:4px; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.card-notice[data-kind="error"] { background:#f4e9e1; border-color:#ddc6b7; color:#7c412c; }
.card-login-layout,.card-dashboard { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:stretch; }
.card-intro { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:42px; min-height:390px; padding:50px; background:radial-gradient(ellipse at 30% 20%,#697451,#39452f 70%); color:#eee9dd; border-radius:6px; }
.card-intro > p { font-size:13px; line-height:1.8; text-align:center; }
.card-illustration { position:relative; width:min(320px,100%); aspect-ratio:1.586; padding:28px; border:1px solid #e8dec588; border-radius:12px; color:#3e4734; background:linear-gradient(115deg,#f2ead8,#ddd3b9 70%,#eee5d0); box-shadow:0 25px 38px #15200f66; transform:rotate(-7deg); }
.card-illustration-tagline { display:block; margin-top:4px; font:italic 17px 'Cormorant Garamond',Georgia,serif; }
.card-illustration-bottom { position:absolute; left:28px; bottom:25px; font-size:8px; line-height:1.7; letter-spacing:.15em; }
.card-contactless { position:absolute; top:26px; right:27px; color:#788264; font-size:21px; font-weight:400; }
.card-panel { padding:32px 34px; border:1px solid var(--line); border-radius:6px; background:#fbfaf5; }
.card-panel .eyebrow { color:var(--olive); margin-bottom:14px; font-size:9px; }
.card-panel h2 { font-size:25px; font-weight:400; letter-spacing:-.04em; }
.card-muted { color:var(--muted); font-size:12px; line-height:1.8; margin-top:13px; }
.card-panel form { margin-top:23px; }
.card-panel label { display:block; font-size:11px; font-weight:500; margin-bottom:9px; }
.card-panel input { width:100%; min-height:50px; border:1px solid #d4d4c9; border-radius:3px; padding:12px 14px; background:#fffefb; font-size:16px; }
.card-panel input:focus { outline:2px solid var(--olive); outline-offset:2px; }
#card-code { letter-spacing:.28em; font-variant-numeric:tabular-nums; }
.card-button { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:50px; padding:15px 18px; margin-top:17px; color:#fffdf5; background:var(--olive); border-radius:3px; font-size:13px; font-weight:500; }
.card-button:hover { background:#414b34; }
.card-help { margin-top:22px; font-size:10px; color:var(--muted); line-height:1.85; }
.card-help a { text-decoration:underline; text-underline-offset:3px; }
.card-text-button { min-height:44px; padding:8px 0; color:var(--olive); font-size:11px; text-decoration:underline; text-underline-offset:4px; text-align:left; }
.card-account-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.card-account-heading h2 { font-size:21px; font-weight:400; overflow-wrap:anywhere; }
.card-account-heading .card-text-button { flex-shrink:0; }
.card-balance { border-radius:6px; padding:38px; background:#46533b; color:#f7f3e8; display:flex; flex-direction:column; align-items:flex-start; }
.card-balance .eyebrow { color:#e1e6d4; font-size:10px; }
.card-balance-value { font-size:clamp(42px,5vw,65px); line-height:1.2; letter-spacing:-.045em; margin-block:28px 15px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; max-width:100%; }
.card-balance > p:nth-last-child(2) { font-size:12px; color:#d3dac9; }
.card-balance-refresh { margin-top:auto; padding:24px 0 0; min-height:48px; font-size:11px; color:#eef1e3; }
.card-balance-refresh span { margin-left:12px; }
.card-presets { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.card-presets button { border:1px solid #d4d4c9; border-radius:3px; min-height:40px; padding:8px 13px; font-size:11px; }
.card-presets button:hover { border-color:var(--olive); background:#eef0e6; }
.card-input-help { margin-top:8px; font-size:10px; color:var(--muted); line-height:1.6; }
.card-history { margin-top:40px; }
.card-history-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.card-history-heading h2 { font-size:21px; font-weight:400; }
.card-history-heading > span { font-size:10px; color:var(--muted); }
.card-history-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); font-size:12px; }
.card-history-row > div { min-width:0; }
.card-history-row p { overflow-wrap:anywhere; }
.card-history-row small { display:block; color:var(--muted); font-size:10px; margin-top:6px; line-height:1.7; }
.card-history-amount { flex-shrink:0; font-variant-numeric:tabular-nums; }
.card-history-empty { font-size:12px; color:var(--muted); padding-top:18px; }
.card-footer { border-top:1px solid var(--line); padding-block:26px; display:flex; justify-content:space-between; gap:20px; font-size:10px; color:var(--muted); line-height:1.7; }
.card-footer a { color:var(--olive); }
@media(max-width:700px) {
  .card-header,.card-main,.card-footer { width:calc(100% - 36px); }
  .card-header { padding-block:22px; }
  .card-header .brand-wordmark { font-size:26px; }
  .card-header .brand-tagline { font-size:7px; }
  .card-back { font-size:10px; }
  .card-main { padding-block:38px 45px; }
  .card-heading h1 { font-size:42px; }
  .card-heading > p:last-child { max-width:290px; }
  .card-login-layout,.card-dashboard { grid-template-columns:1fr; gap:18px; }
  .card-intro { min-height:0; padding:38px; gap:25px; }
  .card-illustration { width:230px; padding:21px; }
  .card-illustration .brand-wordmark { font-size:25px; }
  .card-illustration-tagline { font-size:14px; }
  .card-illustration-bottom { left:21px; bottom:18px; font-size:6px; }
  .card-intro > p { font-size:11px; }
  .card-panel { padding:26px; }
  .card-balance { padding:29px; }
  .card-balance-value { font-size:51px; margin-top:20px; }
  .card-history-heading > span { font-size:9px; text-align:right; }
  .card-history-heading h2 { font-size:19px; }
  .card-footer { flex-direction:column; gap:10px; }
}