/* Bank-like clarity: one primary action; colour groups services, never conveys state alone. */
:root { --wash:#f3f5f9; --ink:#182b43; --muted:#5c6c80; --line:#e2e8f0; }
.device { background:var(--wash); }
.device>header { min-height:66px; padding:16px 20px 6px; gap:12px; }
.device>header>img { margin-right:auto; }
.device>header>.demo-line { border:0; border-radius:12px; padding:8px 12px; min-height:44px; display:flex; align-items:center; gap:7px; background:#e8eef7; color:#52647e; font-size:12px; }
.device>.demo-line { margin:0 20px 4px; min-height:44px; background:#e8eef7; border-radius:12px; font-size:12px; color:#52647e; }
main { padding:12px 20px 24px; }
main>h2 { font-size:28px; font-weight:700; letter-spacing:-.8px; margin:4px 0 18px; }
.overline { font-size:12px; margin:0; }
.journey-progress { gap:4px; margin:0 0 18px; }
.journey-progress li { display:flex; justify-content:center; padding:7px 1px; background:#e7ecf3; border-radius:7px; color:#596b80; font-size:10px; }
.journey-progress li>span { width:auto; height:auto; border:0; background:none!important; color:inherit!important; }
.journey-progress li[aria-current=step] { background:#dce8ff; color:#175bc4; }
.journey-progress .complete { background:#e1efe9; color:#216447; }
.bank-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 118px; gap:18px 0; padding:20px; border-radius:24px; background:#e4edfc; margin-bottom:16px; overflow:hidden; }
.bank-hero-copy { z-index:1; }
.bank-hero-copy>span { font-size:9px; font-weight:700; letter-spacing:.9px; color:#405f8d; }
.bank-hero h3 { font-size:25px; line-height:1.1; letter-spacing:-.7px; margin:12px 0 10px; text-wrap:balance; }
.bank-hero p { font-size:13px; line-height:1.45; color:#4a6180; }
.parking-art { width:128px; align-self:center; margin-right:-14px; }
.bank-hero>.primary { grid-column:1/-1; }
.bank-hero:has(.bank-hero-copy:empty) { grid-template-columns:64px minmax(0,1fr); align-items:center; gap:12px; padding:16px; }
.bank-hero-copy:empty { display:none; }
.bank-hero:has(.bank-hero-copy:empty) .parking-art { width:64px; margin:0; }
.bank-hero:has(.bank-hero-copy:empty)>.primary { grid-column:2; }
.primary { min-height:52px; font-size:15px; border-radius:15px; background:#1764db; box-shadow:0 5px 12px #1764db12; }
.primary:hover:not(:disabled) { background:#1254be; }
.quick-access { margin:12px 0 16px; gap:6px; }
.quick-access button { padding:0; gap:6px; border:0; background:transparent; min-height:68px; font-size:11px; }
.quick-access .icon-wrap { width:44px; height:44px; border-radius:15px; background:var(--tone-bg); }
.quick-access .ui-icon { width:25px; height:25px; }
.bank-section-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:22px 0 12px; }
.bank-section-heading h3 { font-size:17px; font-weight:650; letter-spacing:-.4px; }
.bank-section-heading>span { font-size:11px; color:var(--muted); }
.bank-services { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.service-tile { position:relative; display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:15px; min-height:133px; border:0; border-radius:20px; background:var(--tone-bg,white); background:color-mix(in srgb,var(--tone-bg,white) 45%,white); color:var(--ink); }
.service-tile>.icon-wrap { display:none; }
.tile-symbol { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:var(--tone-bg); color:var(--tone); margin-bottom:12px; }
.tile-symbol .ui-icon { width:24px; height:24px; }
.service-tile strong { font-size:14px; letter-spacing:-.2px; font-weight:650; }
.service-tile small { font-size:11px; line-height:1.4; margin-top:5px; color:var(--muted); }
.service-tile:hover { background:var(--tone-bg); }
.illustrated-tile { min-height:164px; padding-top:8px; }
.service-artwork { display:block; width:114px; max-width:100%; height:76px; object-fit:contain; margin:0 0 7px -4px; pointer-events:none; }
.illustrated-tile[data-action=passes] { background:#edf3fc; }
.illustrated-tile[data-action=ticket] { background:#fcf5e8; }
.illustrated-tile[data-action=subscriptions] { background:#eef2f8; }
.illustrated-tile[data-action=history] { background:#edf5f0; }
.illustrated-tile:active { transform:scale(.98); }
.bank-session { background:#fff; border-radius:24px; padding:16px; margin:0 0 16px; }
.bank-session-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.bank-session-heading .state-label { font-size:11px; color:#23674f; font-weight:600; }
.bank-plate { font-size:10px; font-weight:650; color:#50647e; background:#f0f4f9; border-radius:6px; padding:5px 7px; }
.bank-place { display:block; font-size:30px; font-weight:700; letter-spacing:-1px; margin:12px 0 4px; line-height:1.12; }
.bank-session>p { font-size:12px; }
.bank-session-stats { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; padding:10px 0; margin-top:10px; border-top:1px solid var(--line); }
.bank-session-stats small { font-size:10px; }
.bank-session-stats strong { display:block; font-size:21px; letter-spacing:-.4px; margin-top:5px; font-variant-numeric:tabular-nums; }
.bank-session-stats [data-session-amount] { font-size:16px; color:#315879; line-height:1.55; }
.bank-session-foot { font-size:10px; color:var(--muted); }
#screen[data-stage=inside] .bank-place { font-size:25px; margin-top:16px; }
.bank-action-hint { font-size:11px; text-align:center; margin:9px 6px 0; }
.bank-demo-note { font-size:11px; margin:18px 3px 0; }
main>.list-row { background:#fff; border-radius:17px; padding:13px; margin:9px 0; border:0; }
main>.list-row small { font-size:11px; }
nav { border-top:0; box-shadow:0 -6px 24px #20385205; padding:8px 10px max(12px,env(safe-area-inset-bottom)); }
nav button { font-size:10px; gap:4px; }
nav button[aria-current=page]>.icon-wrap { width:50px; background:#e1ebff; }
#sheet { background:var(--wash); }
#sheet .card { border:0; }
#navigation { background:var(--wash); }
.nav3d-controls { background:white; border-radius:22px 22px 0 0; }
.nav3d-views button { background:#f2f5fa; border:0; }
.nav3d-header { background:white; }
@media(max-width:380px) { main { padding-left:16px; padding-right:16px; }.bank-hero { padding:18px; grid-template-columns:minmax(0,1fr) 108px; }.parking-art { width:118px; }.bank-hero h3 { font-size:24px; }.bank-place { font-size:29px; }.service-tile { padding:14px; } }
@media(max-height:700px) { .journey-progress { margin-bottom:12px; }main>h2 { margin-bottom:14px; }.bank-hero { gap:15px 0; }.bank-hero h3 { margin:8px 0; }.bank-section-heading { margin-top:16px; } }
@media(prefers-reduced-motion:reduce) { button { transition:none; } }

/* Demonstration shell is not part of the mobile application. */
.device [hidden],.demo-console [hidden] { display:none!important; }
.presentation .feature-description { display:none; }
.presentation>img { margin-bottom:24px; }
.presentation>h1 { font-size:clamp(28px,3.2vw,42px); letter-spacing:-1.6px; }
.presentation>p { font-size:16px; margin:18px 0; }
.presentation>small { display:none; }
.demo-console { margin-top:24px; padding:22px; border-radius:22px; background:#f8fafc; border:1px solid #d6e0ec; max-width:440px; }
.console-eyebrow { font-size:10px; letter-spacing:1px; color:#607189; font-weight:650; }
.demo-console h2 { font-size:23px; letter-spacing:-.5px; margin:8px 0 12px; }
.demo-console h3 { font-size:13px; margin:18px 0 10px; }
.demo-console>p { font-size:12px; line-height:1.6; }
.demo-console small { display:block; font-size:11px; margin-top:8px; }
.console-stages,.console-events { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.demo-console button { min-height:44px; padding:10px; border:1px solid #d5e0ec; border-radius:10px; background:#fff; color:#294a74; font-size:12px; font-weight:550; }
.demo-console button:hover:not(:disabled) { background:#e9f0fb; }
.demo-console button:disabled { cursor:default; opacity:.4; }
#console-status { margin-top:16px; color:#345474; font-weight:600; }
#console-details { font-size:12px; margin-top:12px; color:var(--muted); }
#console-details summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
#console-notes { margin:0; padding-left:18px; line-height:1.6; }
.console-progress { font-size:12px; }
#console-motion .nav3d-playback { margin:8px 0; }
#console-motion #nav3d-occupy { margin:0; }
#sheet,#navigation { z-index:30; }
@media(max-width:760px),(max-height:560px) and (max-width:1000px) {
 body { display:flex; flex-direction:column; gap:0; align-items:stretch; }
 .device { order:1; flex-shrink:0; }
 .presentation { display:block; order:2; max-width:none; padding:20px; }
 .presentation>:not(.demo-console) { display:none; }
 .demo-console { max-width:none; margin:0; }
}