/* MoPay web — blue & mint neobank theme */
:root {
  --blue-900: #071c3f;
  --blue-800: #0a2860;
  --blue-700: #0b3d91;
  --blue-600: #1156c4;
  --blue-500: #2f7ee8;
  --blue-100: #e4eeff;
  --mint-600: #17b789;
  --mint-500: #31d0a8;
  --mint-400: #56e3c0;
  --mint-100: #dcfaf0;
  --ink-900: #0d1b2e;
  --ink-700: #33455e;
  --ink-500: #5b6c84;
  --surface: #ffffff;
  --bg: #f2f6fb;
  --line: #dfe7f2;
  --danger: #d64545;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(10, 40, 96, 0.08);
  --shadow-sm: 0 4px 14px rgba(10, 40, 96, 0.07);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1100px 500px at 85% -110px, var(--mint-100) 0%, rgba(220, 250, 240, 0) 60%),
    radial-gradient(900px 420px at -120px 0, var(--blue-100) 0%, rgba(228, 238, 255, 0) 55%),
    var(--bg);
  color: var(--ink-900);
  min-height: 100vh;
}
a { color: var(--blue-700); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--ink-500); }
.muted-link { color: var(--ink-500); }

/* ---------- shell ---------- */
#app { display: flex; flex-direction: column; min-height: 100vh; }
.view { flex: 1; width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 26px 0 60px; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 22px;
  padding: 14px max(16px, calc((100vw - 1120px) / 2));
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--blue-800); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-600));
  color: var(--mint-400); font-size: 18px; font-weight: 800;
}
.topnav { display: flex; gap: 4px; flex: 1; }
.topnav a {
  padding: 8px 14px; border-radius: 999px; font-weight: 600; color: var(--ink-700); font-size: 14px;
}
.topnav a.active { background: var(--blue-100); color: var(--blue-800); }
.topnav a:hover { text-decoration: none; background: var(--blue-100); }
.topbar-side { display: flex; align-items: center; gap: 10px; }
.pill {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-600));
  color: #fff; font-weight: 700; padding: 7px 14px; border-radius: 999px; font-size: 13px;
}
.site-foot {
  padding: 22px 16px; border-top: 1px solid var(--line); display: flex;
  gap: 14px; justify-content: space-between; flex-wrap: wrap;
  color: var(--ink-500); font-size: 13px; background: #fff;
}
.mobile-nav { display: none; }
.setup-prompts { display: grid; gap: 8px; margin-top: 12px; }.setup-prompt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid #cfe6e2; border-radius: 12px; color: var(--ink-900); background: #f8fffd; font: inherit; text-align: left; cursor: pointer; width: 100%; }.setup-prompt:hover { text-decoration: none; border-color: var(--mint-500); background: var(--mint-100); }.setup-prompt > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--mint-600); background: var(--mint-100); font-weight: 900; }.setup-prompt > span:nth-child(2) { flex: 1; }.setup-prompt strong, .setup-prompt small { display: block; }.setup-prompt small { margin-top: 2px; color: var(--ink-500); font-size: 11px; }.setup-prompt b { color: var(--blue-700); font-size: 12px; white-space: nowrap; }
.page-heading { position: relative; padding-left: 48px; }.page-heading-icon { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--blue-800); background: var(--blue-100); font-size: 21px; font-weight: 900; box-shadow: var(--shadow-sm); }
.side-nav { display: none; }
body:has(#app.is-authenticated) { padding-bottom: 58px; }
body:has(#app.is-authenticated) .topbar { position: fixed; top: 0; right: 0; left: 0; height: 68px; padding-left: 252px; padding-right: 24px; }
body:has(#app.is-authenticated) .topnav { display: none; }
body:has(#app.is-authenticated) .side-nav { position: fixed; z-index: 31; top: 68px; bottom: 58px; left: 0; width: 220px; display: flex; flex-direction: column; gap: 5px; padding: 22px 14px; border-right: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); }
.side-nav-label { margin: 0 12px 10px; color: var(--ink-500); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.side-nav a { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px; color: var(--ink-700); font-size: 14px; font-weight: 700; }.side-nav a:hover, .side-nav a.active { color: var(--blue-800); background: var(--blue-100); text-decoration: none; }.side-nav a:first-of-type { color: var(--blue-800); background: var(--blue-100); }.side-nav a::first-letter { color: var(--mint-600); font-size: 18px; }.side-nav span { flex: 1; }
body:has(#app.is-authenticated) .view { width: min(1400px, calc(100% - 280px)); margin-left: 252px; padding-top: 94px; }
body:has(#app.is-authenticated) .site-foot { position: fixed; z-index: 30; right: 0; bottom: 0; left: 220px; min-height: 58px; padding: 16px 24px; }

/* ---------- signed-in home ---------- */
.welcome-panel {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 170px; padding: 28px 32px; border-radius: 24px; overflow: hidden;
  color: #fff; background: linear-gradient(118deg, var(--blue-900), var(--blue-700) 62%, #168b9c);
  box-shadow: 0 18px 34px rgba(7, 28, 63, .18); position: relative;
}
.welcome-panel h1 { margin: 5px 0 7px; font-size: clamp(26px, 4vw, 36px); letter-spacing: -.03em; }
.welcome-panel .eyebrow, .welcome-panel .hint { color: rgba(255,255,255,.74); }
.welcome-orbit { width: 130px; height: 130px; position: relative; flex: 0 0 130px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: radial-gradient(circle, rgba(86,227,192,.35), transparent 64%); }
.welcome-orbit span { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--blue-900); background: var(--mint-400); font-weight: 900; }
.welcome-orbit span:nth-child(1) { top: 13px; left: 48px; }.welcome-orbit span:nth-child(2) { right: 10px; bottom: 24px; background: #fff; }.welcome-orbit span:nth-child(3) { left: 12px; bottom: 18px; background: #ffd774; }
.feature-hub { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 16px 0; }
.feature-tile { min-height: 132px; padding: 15px; border-radius: 17px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; color: var(--ink-900); border: 1px solid rgba(13,27,46,.06); transition: transform .18s ease, box-shadow .18s ease; }
.feature-tile:hover { transform: translateY(-3px); text-decoration: none; box-shadow: var(--shadow); }.feature-tile strong, .feature-tile small { display: block; }.feature-tile small { margin-top: 4px; color: var(--ink-700); line-height: 1.35; }.feature-tile b { align-self: flex-end; font-size: 20px; }.feature-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.7); font-weight: 900; color: var(--blue-800); }.feature-blue { background: var(--blue-100); }.feature-mint { background: var(--mint-100); }.feature-sun { background: #fff2cf; }.feature-lilac { background: #eee9ff; }.feature-coral { background: #ffe5df; }
.setup-journey { position: fixed; z-index: 40; top: 84px; left: 50%; width: min(1080px, calc(100% - 32px)); transform: translateX(-50%); margin: 0; padding: 22px; border: 1px solid #cfe6e2; border-radius: 20px; background: linear-gradient(135deg, #f5fffc, #fff); box-shadow: 0 24px 70px rgba(7, 28, 63, .22); }.setup-head { align-items: flex-start; }.setup-head h2 { margin: 3px 0 2px; font-size: 21px; }.journey-progress { height: 8px; margin-top: 16px; overflow: hidden; border-radius: 99px; background: #dcebe9; }.journey-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint-600), var(--mint-400)); transition: width .3s ease; }.journey-count { margin: 7px 0 12px; color: var(--ink-500); font-size: 12px; font-weight: 700; }.journey-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }.journey-step { min-height: 118px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.journey-step.is-done { border-color: #a6e4d3; background: #f5fffb; }.journey-number { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 10px; border-radius: 50%; background: var(--blue-100); color: var(--blue-800); font-size: 12px; font-weight: 800; }.journey-step.is-done .journey-number { background: var(--mint-600); color: #fff; }.journey-step strong, .journey-step small { display: block; }.journey-step strong { font-size: 13px; }.journey-step small { min-height: 34px; margin: 4px 0 9px; color: var(--ink-500); font-size: 11px; line-height: 1.35; }.journey-state { color: var(--mint-600); font-size: 11px; font-weight: 800; }
.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin: 8px 0 20px; }.page-heading h1 { margin: 4px 0; font-size: 30px; letter-spacing: -.03em; }.account-grid, .pocket-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.account-card, .pocket-card { min-height: 205px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }.account-primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--blue-800), var(--blue-600)); }.account-primary .hint, .account-primary .account-number { color: rgba(255,255,255,.72); }.account-number { color: var(--ink-500); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.account-balance, .pocket-balance { margin-top: 28px; font-size: 27px; font-weight: 800; letter-spacing: -.04em; }.status-dot { color: var(--mint-600); font-size: 12px; }.account-primary .status-dot { color: var(--mint-400); }.pocket-card { position: relative; overflow: hidden; background: linear-gradient(145deg, #fff, #f6fbff); }.pocket-spark { position: absolute; right: 18px; top: 14px; color: var(--mint-600); font-size: 22px; }.pocket-card h2 { margin: 0; font-size: 18px; }.empty-state { padding: 36px; text-align: center; }.empty-illustration { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 12px; border-radius: 18px; background: var(--mint-100); color: var(--mint-600); font-size: 28px; }.subscription-row { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }.subscription-row:last-child { border-bottom: 0; }.subscription-row > span:nth-child(2) { flex: 1; }.subscription-row strong, .subscription-row small { display: block; }.subscription-row small { color: var(--ink-500); margin-top: 3px; }.subscription-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--mint-100); color: var(--mint-600); font-weight: 800; }.subscription-guide { background: linear-gradient(145deg, #fff, #eef8ff); }
@media (max-width: 900px) { .feature-hub { grid-template-columns: repeat(3, 1fr); }.account-grid, .pocket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .journey-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .welcome-panel { padding: 22px; }.welcome-orbit { display: none; }.feature-hub { grid-template-columns: repeat(2, 1fr); }.feature-tile { min-height: 118px; }.page-heading { align-items: flex-start; flex-direction: column; }.account-grid, .pocket-grid { grid-template-columns: 1fr; }.setup-journey { top: 70px; width: calc(100% - 20px); padding: 16px; max-height: calc(100vh - 84px); overflow: auto; }.setup-head { gap: 10px; }.journey-steps { grid-template-columns: 1fr; }.journey-step { min-height: auto; display: flex; align-items: center; gap: 10px; }.journey-step .journey-number { flex: 0 0 26px; margin: 0; }.journey-step small { min-height: 0; }.journey-step .btn, .journey-state { margin-left: auto; } }

/* ---------- primitives ---------- */
.btn {
  border: 0; cursor: pointer; font: inherit; font-weight: 700;
  border-radius: 12px; padding: 11px 18px; font-size: 14px;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-600));
  color: #fff; transition: filter .15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .55; cursor: default; filter: none; }
.btn.mint { background: linear-gradient(135deg, var(--mint-600), var(--mint-500)); color: #06392b; }
.btn.ghost {
  background: #fff; color: var(--blue-800); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.btn.danger { background: #fff; color: var(--danger); border: 1px solid #f0c9c9; }
.btn.slim { padding: 7px 12px; font-size: 13px; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px;
}
.card h2 { margin: 0 0 12px; font-size: 16px; }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bill-authorization-card { display: grid; gap: 16px; }
.bill-auth-identity { display: flex; align-items: flex-start; gap: 12px; }
.bill-auth-logo { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--blue-900), var(--mint-600)); font-size: 20px; font-weight: 800; }
.bill-auth-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 600px) { .bill-auth-actions { justify-content: stretch; }.bill-auth-actions .btn { flex: 1 1 100%; } }
.stack > * + * { margin-top: 10px; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-700); margin: 12px 0 5px; }
input, select, textarea {
  width: 100%; font: inherit; padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-900);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(49, 208, 168, .45); border-color: var(--mint-500);
}
.error { color: var(--danger); font-size: 13px; font-weight: 600; }
.hint { color: var(--ink-500); font-size: 12px; }
.badge {
  font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; background: var(--mint-100); color: #0a6d51;
}
.badge.blue { background: var(--blue-100); color: var(--blue-800); }
.badge.warn { background: #fdf1e2; color: #a26a1a; }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; }
table.list th {
  text-align: left; font-size: 12px; color: var(--ink-500); text-transform: uppercase;
  letter-spacing: .5px; padding: 9px 10px; border-bottom: 1px solid var(--line);
}
table.list td { padding: 11px 10px; border-bottom: 1px solid #edf2f9; }
.empty { color: var(--ink-500); font-size: 14px; padding: 18px 0; }

/* customer accounts table + property tree */
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.table th {
  text-align: left; font-size: 12px; color: var(--ink-500); text-transform: uppercase;
  letter-spacing: .5px; padding: 9px 10px; border-bottom: 1px solid var(--line);
}
table.table td { padding: 11px 10px; border-bottom: 1px solid #edf2f9; vertical-align: top; }
.tree-children { border-left: 1px dashed var(--line); margin-left: 6px; }
.tree-children ul { font-size: 13px; color: var(--ink-700, #33475b); }

/* toast */
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--blue-900); color: #fff; padding: 11px 18px; border-radius: 12px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 60;
  box-shadow: var(--shadow); max-width: 90vw;
}
.toast { display: flex; align-items: center; gap: 12px; }
.toast > span { flex: 1; }
.toast > button { border: 0; color: inherit; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; opacity: .8; }
.toast > button:hover { opacity: 1; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--danger); }

/* ---------- landing ---------- */
.concept-hero { position: relative; width: 100vw; min-height: clamp(560px, 66vh, 760px); margin-left: calc((100% - 100vw) / 2); display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: #143e4a; }.concept-copy { position: relative; z-index: 3; width: 100%; max-width: 1440px; padding: 92px max(40px, calc((100vw - 1440px) / 2 + 64px)) 74px; }.concept-copy h1 { max-width: 13em; margin: 12px 0; font-size: clamp(42px, 6vw, 78px); line-height: 1.05; letter-spacing: -.065em; text-wrap: balance; }.concept-copy h1 .accent { color: var(--mint-400); }.concept-copy .eyebrow { color: var(--mint-400); }.concept-copy .lede { max-width: 52ch; color: rgba(255,255,255,.88); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; }.concept-note { display: flex; align-items: center; gap: 8px; max-width: 48ch; margin-top: 22px; color: rgba(255,255,255,.72); font-size: 13px; }.concept-note span { color: #ffd774; font-size: 20px; }
.island-scene { position: absolute; z-index: 1; inset: 0; overflow: hidden; background: #143e4a url('https://digitalasset.intuit.com/render/content/dam/intuit/credit-karma/hp-experiment-1-2/Hero-Light-Desktop-2x.png') center center / cover no-repeat; pointer-events: none; }.island-scene::after { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(5,24,38,.9) 0%, rgba(5,24,38,.56) 46%, rgba(5,24,38,.73) 100%), linear-gradient(0deg, rgba(5,24,38,.65), transparent 52%); }.island-scene::before { content: ''; position: absolute; z-index: 1; inset: 0; opacity: .48; background: radial-gradient(circle at 16% 20%, #fff 0 2px, transparent 3px), radial-gradient(circle at 82% 18%, #fff 0 1px, transparent 2px), linear-gradient(155deg, transparent 55%, rgba(255,255,255,.28)); }.sun-disc { position: absolute; z-index: 2; width: 290px; height: 290px; top: 8%; right: 15%; border-radius: 50%; background: #f5c960; opacity: .78; }.island-hill { position: absolute; z-index: 2; bottom: -70px; border-radius: 50% 50% 0 0; transform: rotate(-7deg); }.hill-back { width: 120%; height: 280px; left: -24%; background: #2d8c78; }.hill-front { width: 130%; height: 190px; left: 20%; bottom: -88px; background: #0a5960; transform: rotate(7deg); }.scene-person { position: absolute; z-index: 3; bottom: 102px; width: 92px; height: 205px; border-radius: 46px 46px 22px 22px; }.scene-person i { position: absolute; top: -43px; left: 18px; width: 58px; height: 58px; border-radius: 50%; background: #713d2b; }.scene-person b { position: absolute; top: 20px; left: 0; width: 92px; height: 170px; border-radius: 46px 46px 18px 18px; background: #f07d58; }.person-one { left: 58%; transform: rotate(-7deg) scale(1.35); }.person-one b { background: #f0835e; }.person-two { right: 18%; transform: rotate(8deg) scale(1.22); }.person-two i { background: #3b211b; }.person-two b { background: #2f7890; }.scene-phone { position: absolute; z-index: 4; left: 72%; bottom: 157px; width: 42px; height: 76px; display: grid; place-items: center; border: 4px solid #102c48; border-radius: 9px; color: var(--mint-400); background: #153b56; font-weight: 900; transform: rotate(11deg); box-shadow: 0 8px 15px rgba(0,0,0,.22); }.scene-chip { position: absolute; z-index: 5; padding: 9px 13px; border-radius: 99px; color: var(--blue-900); background: rgba(255,255,255,.85); box-shadow: 0 8px 20px rgba(7,28,63,.12); font-size: 12px; font-weight: 800; }.chip-one { top: 27%; left: 55%; }.chip-two { right: 9%; bottom: 31%; }
.concept-carousel { margin: 10px 0 34px; }.carousel-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; }.carousel-heading h2 { margin: 4px 0 14px; font-size: 28px; letter-spacing: -.04em; }.carousel-arrows { display: flex; gap: 8px; }.carousel-arrow { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--blue-800); background: #fff; cursor: pointer; font-size: 26px; box-shadow: var(--shadow-sm); }.carousel-arrow:hover { background: var(--blue-100); }.carousel-track { display: flex; gap: 13px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: none; }.carousel-track::-webkit-scrollbar { display: none; }.concept-card { position: relative; flex: 0 0 min(300px, 76vw); min-height: 220px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; padding: 22px; overflow: hidden; scroll-snap-align: start; border: 1px solid rgba(13,27,46,.08); border-radius: 22px; color: var(--ink-900); box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }.concept-card:hover { transform: translateY(-4px); text-decoration: none; box-shadow: var(--shadow); }.concept-card::before { content: ''; position: absolute; width: 150px; height: 150px; top: -36px; right: -24px; border-radius: 50%; background: rgba(255,255,255,.38); }.concept-card-icon { position: relative; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--blue-800); background: rgba(255,255,255,.72); font-size: 20px; font-weight: 900; }.concept-card strong, .concept-card small, .concept-card-link { position: relative; z-index: 1; }.concept-card strong { font-size: 18px; }.concept-card small { max-width: 24ch; color: var(--ink-700); line-height: 1.4; }.concept-card-link { margin-top: 8px; color: var(--blue-700); font-size: 13px; font-weight: 800; }.concept-card-bills { background: #dff3e9; }.concept-card-pay { background: #dceaff; }.concept-card-pocket { background: #fff0c7; }.concept-card-events { background: #ffe2db; }.concept-card-accounts { background: #e9e2ff; }
.regional-story { min-height: 380px; display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 40px; margin: 12px 0 36px; padding: 34px; overflow: hidden; border-radius: 28px; color: #fff; background: #061d2e; }.regional-story h2 { max-width: 10ch; margin: 6px 0 12px; font-size: 38px; line-height: 1.04; letter-spacing: -.05em; }.regional-story .hint { max-width: 43ch; color: rgba(255,255,255,.7); }.regional-story .eyebrow { color: var(--mint-400); }.story-globe { position: relative; width: min(370px, 80vw); aspect-ratio: 1; margin: auto; border: 1px solid rgba(86,227,192,.4); border-radius: 50%; background: radial-gradient(circle at 36% 32%, rgba(49,208,168,.42), transparent 9%), radial-gradient(circle at 35% 34%, #0e6f76, #082b43 58%, #04121d 60%); box-shadow: inset -24px -16px 50px rgba(0,0,0,.4), 0 0 60px rgba(49,208,168,.16); animation: globe-drift 12s ease-in-out infinite alternate; }.story-globe::after { content: ''; position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.16); border-left-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(25deg); }.globe-dot { position: absolute; z-index: 2; width: 11px; height: 11px; border-radius: 50%; background: #ffd774; box-shadow: 0 0 0 7px rgba(255,215,116,.13), 0 0 18px #ffd774; }.dot-skn { top: 45%; left: 35%; }.dot-nevis { top: 50%; left: 47%; }.dot-region { top: 32%; right: 25%; background: var(--mint-400); box-shadow: 0 0 0 7px rgba(86,227,192,.13), 0 0 18px var(--mint-400); }.globe-route { position: absolute; z-index: 1; width: 53%; height: 23%; top: 34%; left: 29%; border-top: 2px solid rgba(255,215,116,.72); border-radius: 50%; transform: rotate(-15deg); }.route-b { top: 40%; left: 39%; border-top-color: rgba(86,227,192,.72); transform: rotate(28deg); }
@keyframes globe-drift { to { transform: translateY(-7px) rotate(2deg); } }
.setup-wizard { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 560px; margin: 24px auto; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: #fff; box-shadow: 0 24px 70px rgba(7,28,63,.12); }.setup-rail { padding: 34px 28px; color: #fff; background: linear-gradient(160deg, var(--blue-900), var(--blue-800) 68%, #0c6d72); }.wizard-mark { display: flex; align-items: center; gap: 8px; margin-bottom: 58px; font-size: 22px; font-weight: 900; letter-spacing: -.05em; }.wizard-mark span { font-size: 14px; letter-spacing: 0; }.setup-rail .eyebrow { color: var(--mint-400); }.wizard-step { display: flex; gap: 12px; padding: 14px 10px; margin: 5px -10px; border-radius: 13px; opacity: .42; }.wizard-step.active { opacity: 1; background: rgba(255,255,255,.12); }.wizard-step.done { opacity: .8; }.wizard-step > span { flex: 0 0 31px; display: grid; place-items: center; height: 31px; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; color: var(--mint-400); font-size: 11px; font-weight: 900; }.wizard-step.active > span { background: var(--mint-500); border-color: var(--mint-500); color: var(--blue-900); }.wizard-step strong, .wizard-step small { display: block; }.wizard-step strong { font-size: 14px; }.wizard-step small { margin-top: 3px; color: rgba(255,255,255,.68); font-size: 11px; }.wizard-privacy { margin-top: 78px; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.5; }.setup-form { align-self: center; width: min(520px, 100%); padding: 42px; }.setup-form h1 { margin: 6px 0 8px; font-size: 32px; letter-spacing: -.04em; }.dev-code-note { padding: 12px 14px; border: 1px solid #f0d58e; border-radius: 12px; color: #7b5a10; background: #fff8df; font-size: 13px; }
@media (max-width: 900px) { .setup-wizard { grid-template-columns: 1fr; }.setup-rail { padding: 22px; }.wizard-mark { margin-bottom: 24px; }.wizard-privacy { display: none; }.setup-form { width: 100%; padding: 30px; } }
@media (max-width: 620px) { .concept-copy h1 { font-size: 48px; }.island-scene { min-height: 310px; border-radius: 24px; }.scene-person { transform: scale(.82); bottom: 62px; }.person-two { transform: scale(.76) rotate(8deg); }.scene-chip { font-size: 10px; }.carousel-heading h2 { font-size: 24px; }.regional-story { padding: 24px; }.regional-story h2 { font-size: 30px; }.setup-form { padding: 24px 18px; }.setup-form h1 { font-size: 27px; } }
@media (max-width: 620px) { body { padding-bottom: 72px; }.mobile-nav { position: fixed; z-index: 35; right: 12px; bottom: 12px; left: 12px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; background: rgba(255,255,255,.82); backdrop-filter: blur(16px); box-shadow: 0 14px 36px rgba(7,28,63,.18); }.mobile-nav a { position: relative; display: grid; justify-items: center; gap: 2px; padding: 7px 4px; border-radius: 16px; color: var(--ink-500); font-size: 11px; }.mobile-nav a:hover { text-decoration: none; }.mobile-nav a span { font-size: 21px; line-height: 1; }.mobile-nav a small { font-size: 10px; font-weight: 700; }.mobile-nav a.active { color: var(--blue-800); background: var(--blue-100); }.mobile-nav a.active span { transform: translateY(-3px) scale(1.18); color: var(--mint-600); } }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 30px 0 40px; }
.hero h1 { font-size: 44px; line-height: 1.06; margin: 12px 0; letter-spacing: -1px; }
.hero h1 .accent { color: var(--mint-600); }
.hero p.lede { font-size: 17px; color: var(--ink-700); line-height: 1.55; max-width: 46ch; }
.eyebrow { color: var(--blue-600); font-weight: 800; letter-spacing: 2.4px; font-size: 12px; text-transform: uppercase; }
.hero-cta { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.hero-stats div strong { display: block; font-size: 20px; color: var(--blue-800); }
.hero-stats div span { font-size: 12.5px; color: var(--ink-500); }
.hero-card {
  border-radius: 22px; padding: 26px; color: #fff;
  background: linear-gradient(160deg, var(--blue-800) 0%, var(--blue-600) 58%, var(--mint-600) 130%);
  box-shadow: 0 24px 60px rgba(10, 40, 96, .35); min-height: 330px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero-card .top { display: flex; justify-content: space-between; align-items: flex-start; }
.chip {
  background: rgba(255,255,255,.16); padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.hero-card .balance-label { opacity: .8; font-size: 13px; }
.hero-card .balance { font-size: 40px; font-weight: 800; letter-spacing: -1px; }
.hero-card .foot { display: flex; justify-content: space-between; align-items: center; opacity: .92; font-size: 13px; }
.mini-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 6px; }
.mini-actions .mini {
  background: rgba(255,255,255,.12); border: 0; color: #fff; border-radius: 14px;
  padding: 12px 4px; font: inherit; font-size: 12px; font-weight: 600; cursor: default;
  display: grid; gap: 6px; justify-items: center;
}
.mini-actions .mini span.ic { font-size: 17px; }
.feature { display: flex; gap: 13px; align-items: flex-start; }
.feature .ic {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px;
  background: var(--blue-100);
}
.feature h3 { margin: 2px 0 4px; font-size: 15px; }
.feature p { margin: 0; color: var(--ink-700); font-size: 13.5px; line-height: 1.5; }
.section-title { font-size: 22px; margin: 34px 0 14px; }
.events-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.event-card { display: block; }
.event-card .when { color: var(--blue-600); font-weight: 700; font-size: 12.5px; }
.event-card h3 { margin: 6px 0 4px; font-size: 16px; }
.event-card p { margin: 0 0 10px; color: var(--ink-500); font-size: 13px; }

/* ---------- dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; align-items: start; }
.wallet-hero {
  border-radius: 20px; padding: 26px; color: #fff;
  background: linear-gradient(140deg, var(--blue-800), var(--blue-600) 70%, var(--mint-600) 160%);
  box-shadow: var(--shadow);
}
.wallet-hero .label { opacity: .8; font-size: 13px; }
.wallet-hero .amount { font-size: 42px; font-weight: 800; letter-spacing: -1px; margin: 4px 0 2px; }
.wallet-hero .meta { opacity: .85; font-size: 13px; }
.wallet-hero .actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.wallet-hero .actions .btn.ghost { background: rgba(255,255,255,.14); border-color: transparent; color: #fff; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13.5px; }
.kv dt { color: var(--ink-500); }
.kv dd { margin: 0; font-weight: 600; }
.tx-list { list-style: none; margin: 0; padding: 0; }
.tx-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid #edf2f9; font-size: 14px; }
.tx-list li:last-child { border-bottom: 0; }
.tx-list .amt { font-weight: 700; }
.tx-list .amt.pos { color: var(--mint-600); }
.tx-list .amt.neg { color: var(--danger); }

/* tickets */
.ticket {
  border-radius: 16px; border: 1px solid var(--line); background: #fff; padding: 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
}
.ticket .t-title { font-weight: 800; }
.ticket .nonce { font-family: ui-monospace, monospace; font-size: 12px; color: var(--ink-500); word-break: break-all; }
.ticket .qr { background: #fff; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }

/* modals */
.modal-back {
  position: fixed; inset: 0; background: rgba(7, 28, 63, .45); display: grid;
  place-items: center; padding: 18px; z-index: 50;
}
.modal {
  background: #fff; border-radius: 18px; width: min(520px, 100%);
  max-height: 86vh; overflow: hidden; box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column;
}
.modal-scroll { min-height: 0; flex: 1 1 auto; padding: 22px; overflow-y: auto; overflow-x: hidden; }
.modal-chrome { position: absolute; z-index: 3; inset: 0 0 auto; height: 48px; pointer-events: none; }
.modal-chrome .modal-close { pointer-events: auto; }
.modal-close { position: absolute; top: 10px; right: 12px; z-index: 2; border: 0; background: transparent; color: var(--ink-500); font-size: 27px; line-height: 1; cursor: pointer; padding: 3px 7px; }
.modal-close:hover { color: var(--ink-900); }
.modal h3 { margin: 0 0 6px; }
.modal.plaid-link { width: min(560px, 100%); padding: 0; overflow: hidden; border-radius: 20px; }
.modal.plaid-link .modal-scroll { padding: 0; }
.modal.send-bill-modal { width: min(900px, 96vw); }
.plaid-link-head { padding: 18px 22px 14px; border-bottom: 1px solid #e8eef7; background: linear-gradient(135deg, #f8fbff, #fff); }
.plaid-link-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plaid-link-mark { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-700); font-weight: 850; letter-spacing: -.02em; }
.plaid-link-mark span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--blue-700), var(--mint-600)); font-size: 13px; }
.plaid-link-steps { display: flex; gap: 5px; margin-top: 15px; }
.plaid-link-steps i { height: 4px; flex: 1; border-radius: 9px; background: #dce6f2; }
.plaid-link-steps i.on { background: var(--mint-500); }
.plaid-link-body { padding: 22px; }
.plaid-link-foot { display: flex; gap: 7px; align-items: center; margin-top: 18px; color: var(--ink-500); font-size: 11px; }
.plaid-institution { display: flex; align-items: center; gap: 10px; margin: 15px 0; padding: 11px 12px; border: 1px solid #e2eaf4; border-radius: 13px; background: #fbfdff; }
.plaid-institution-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: #fff; background: var(--blue-700); font-weight: 850; }
.plaid-account-list { display: grid; gap: 8px; max-height: 45vh; overflow: auto; }
@media (max-width: 560px) { .modal-back { padding: 0; place-items: end center; } .modal.plaid-link { max-height: 92vh; border-radius: 20px 20px 0 0; } .plaid-link-body { padding: 18px; } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 10px; }
  .hero h1 { font-size: 34px; }
  .concept-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 12px; }.concept-copy h1 { max-width: none; font-size: 56px; }.island-scene { min-height: 380px; }.regional-story { grid-template-columns: 1fr; }.regional-story h2 { max-width: 16ch; }
  .dash-grid { grid-template-columns: 1fr; }
  .mini-actions { grid-template-columns: repeat(2, 1fr); }
}

/* Timed bill storyboard states */
.bill-animation[data-bill-stage="0"] .bill-notification { opacity: 0; pointer-events: none; transform: translateY(18px) scale(.94); }
.bill-animation[data-bill-stage="1"] .bill-notification { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); animation: notification-expand 650ms cubic-bezier(.2,1.4,.4,1) forwards, notification-shake 1.2s 650ms ease-in-out 2; }
.bill-animation[data-bill-stage="1"] .bill-upcoming, .bill-animation[data-bill-stage="1"] .bill-document, .bill-animation[data-bill-stage="1"] .bill-biometric, .bill-animation[data-bill-stage="1"] .bill-confirmation { opacity: 0; pointer-events: none; }
.bill-animation[data-bill-stage="2"] .bill-notification { opacity: 0; pointer-events: none; transform: translateX(65px); }
.bill-animation[data-bill-stage="2"] .bill-upcoming, .bill-animation[data-bill-stage="3"] .bill-document { opacity: 1; pointer-events: auto; transform: translateX(0); }
.bill-animation[data-bill-stage="2"] .bill-document, .bill-animation[data-bill-stage="2"] .bill-biometric, .bill-animation[data-bill-stage="2"] .bill-confirmation, .bill-animation[data-bill-stage="3"] .bill-biometric, .bill-animation[data-bill-stage="3"] .bill-confirmation { opacity: 0; pointer-events: none; }
.bill-animation[data-bill-stage="3"] .bill-document { opacity: 1; }
.bill-animation[data-bill-stage="4"] .bill-biometric { opacity: 1; pointer-events: auto; transform: translateY(0); }
.bill-animation[data-bill-stage="4"] .bill-document { opacity: .7; pointer-events: none; transform: translateX(0); }
.bill-animation[data-bill-stage="4"] .bill-confirmation, .bill-animation[data-bill-stage="5"] .bill-confirmation { opacity: 0; pointer-events: none; }
.bill-animation[data-bill-stage="5"] .bill-document { opacity: .35; pointer-events: none; transform: translateX(0); }
.bill-animation[data-bill-stage="5"] .bill-encryption-out { animation: encrypted-send 1s ease-in forwards; }
.bill-animation[data-bill-stage="5"] .bill-encryption-in { animation: encrypted-return 1s 1s ease-out forwards; }
.bill-animation[data-bill-stage="6"] .bill-document { opacity: 0; pointer-events: none; transform: translateX(-35px); }
.bill-animation[data-bill-stage="6"] .bill-confirmation { opacity: 1; pointer-events: auto; transform: translateX(0); }
.bill-animation[data-bill-stage="3"][data-hand-state="pay-document"] .bill-pay-button, .bill-animation[data-bill-stage="4"] .bill-pay-button, .bill-animation[data-bill-stage="5"] .bill-pay-button { transform: scale(.92); color: #fff; background: #2c9e78; box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }
.bill-animation[data-bill-stage="1"] .bill-notification { animation: notification-expand 650ms cubic-bezier(.2,1.4,.4,1) forwards; }.bill-animation[data-bill-stage="1"] .bill-upcoming { opacity: 0; pointer-events: none; }.bill-animation[data-bill-stage="2"] .bill-upcoming { opacity: 1; pointer-events: auto; transform: translateX(0); }
.bill-animation[data-bill-stage="7"] .bill-notification { opacity: 0; pointer-events: none; transform: translateX(75px) scale(.96); }.bill-animation[data-bill-stage="7"] .bill-upcoming, .bill-animation[data-bill-stage="7"] .bill-document, .bill-animation[data-bill-stage="7"] .bill-confirmation { opacity: 0; pointer-events: none; }
.bill-animation[data-hand-state="pay-hover"] .bill-upcoming [data-bill-pay], .bill-animation[data-hand-state="view"] .bill-upcoming [data-bill-view], .bill-animation[data-hand-state="pay-document"] .bill-document [data-bill-pay] { transform: translateY(-2px); border-color: var(--mint-600); box-shadow: 0 8px 14px rgba(22,141,115,.2); }.bill-animation[data-hand-state="view"] .bill-upcoming [data-bill-view], .bill-animation[data-hand-state="pay-document"] .bill-document [data-bill-pay] { transform: translateY(1px) scale(.95); color: #fff; background: #2c9e78; box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }

.budget-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
.budget-period-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 20px 0 14px; padding: 22px 24px; border: 1px solid #cfe0fa; border-radius: var(--radius); background: linear-gradient(120deg, #eef5ff, #fff); }
.budget-period-card h2 { margin: 4px 0; color: var(--blue-900); }
.period-controls { display: flex; align-items: center; gap: 8px; }
.period-controls input { min-width: 145px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-700); background: #fff; font: inherit; }
.budget-trend { display: block; width: 100%; box-sizing: border-box; margin: 14px 0; padding: 20px; background: linear-gradient(135deg, #fff, #fbf8ff); }
.trend-chart { display: flex; align-items: end; justify-content: space-around; gap: 14px; width: 100%; box-sizing: border-box; height: 180px; margin-top: 20px; padding: 0 8px; border-bottom: 1px solid var(--line); }
.trend-bar { display: flex; position: relative; flex: 1; flex-direction: column; justify-content: end; align-items: center; height: 100%; padding: 0; border: 0; background: transparent; color: var(--ink-500); cursor: pointer; font: inherit; }
.trend-bar i { display: block; width: 100%; height: var(--trend-height); min-height: 8px; border-radius: 9px 9px 0 0; background: linear-gradient(180deg, var(--blue-500), #a9c7fa); transition: height .2s ease, background .2s ease; }
.trend-bar.selected i { background: linear-gradient(180deg, var(--mint-600), var(--mint-400)); }
.trend-bar:hover i { background: var(--blue-700); }
.trend-bar-label { margin-top: 8px; font-size: 12px; }
.trend-tooltip { position: absolute; z-index: 3; bottom: calc(var(--trend-height) + 38px); left: 50%; display: grid; gap: 3px; width: max-content; max-width: 150px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; color: #fff; background: var(--blue-900); box-shadow: 0 8px 18px rgba(7,28,63,.2); opacity: 0; pointer-events: none; transform: translate(-50%, 5px); transition: opacity .15s ease, transform .15s ease; }
.trend-tooltip strong { font-size: 12px; }
.trend-tooltip small { color: rgba(255,255,255,.72); font-size: 10px; white-space: nowrap; }
.trend-bar:hover .trend-tooltip, .trend-bar:focus-visible .trend-tooltip { opacity: 1; transform: translate(-50%, 0); }
.budget-overview > div { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, #fff, #f7fbff); }
.budget-overview > div { position: relative; overflow: hidden; }
.budget-overview > div::after { position: absolute; right: -20px; bottom: -34px; width: 110px; height: 110px; border-radius: 50%; content: ''; opacity: .65; }
.overview-spent { background: linear-gradient(135deg, #effcf8, #fff) !important; }
.overview-spent::after { background: var(--mint-100); }
.overview-planned { background: linear-gradient(135deg, #f0f5ff, #fff) !important; }
.overview-planned::after { background: var(--blue-100); }
.overview-categories { background: linear-gradient(135deg, #fff7e9, #fff) !important; }
.overview-categories::after { background: #ffe8b7; }
.section-icon { position: relative; z-index: 1; display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 11px; background: var(--blue-100); color: var(--blue-700); font-size: 17px; font-weight: 800; }
.section-heading, .budget-card-title { display: flex; align-items: center; gap: 10px; }
.section-heading .section-icon, .budget-card-title .section-icon { margin-bottom: 0; }
.budget-card-title h2 { margin-top: 4px; }
.budget-card-period { display: block; margin-top: 3px; color: var(--ink-500); font-size: 11px; font-weight: 600; }
.category-hero { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin: 20px 0; padding: 24px; border-radius: var(--radius); color: #fff; background: linear-gradient(120deg, var(--blue-900), var(--blue-700)); box-shadow: 0 14px 30px rgba(7, 28, 63, .16); }
.category-hero h1 { margin: 5px 0; color: #fff; }
.category-hero .eyebrow, .category-hero .hint { color: rgba(255,255,255,.72); }
.category-hero-stats { display: flex; gap: 24px; flex-wrap: wrap; }
.category-hero-stats small, .category-hero-stats strong { display: block; }
.category-hero-stats small { color: rgba(255,255,255,.68); font-size: 11px; }
.category-hero-stats strong { margin-top: 5px; font-size: 22px; }
.budget-overview small, .budget-overview span { display: block; color: var(--ink-500); font-size: 12px; }
.budget-overview strong { display: block; color: var(--blue-900); font-size: 28px; margin: 8px 0 4px; }
.budget-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.budget-card { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px rgba(28, 55, 90, .06); }
.budget-limit-setup { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; width: 100%; margin: 18px 0 9px; padding: 14px; border: 1px dashed #a9c9d5; border-radius: 14px; color: var(--blue-800); background: rgba(255,255,255,.72); text-align: left; cursor: pointer; }
.budget-limit-setup:hover { border-color: var(--mint-600); background: var(--mint-100); }
.budget-limit-setup > span { grid-row: span 2; font-size: 24px; }
.budget-limit-setup strong, .budget-limit-setup small { display: block; }
.budget-limit-setup small { color: var(--ink-500); font-size: 11px; }
.wizard-head { padding: 24px 24px 0; }
.wizard-head h3 { margin-bottom: 16px; }
.wizard-progress { height: 6px; overflow: hidden; border-radius: 99px; background: var(--blue-100); }
.wizard-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint-600), var(--blue-500)); transition: width .2s ease; }
.wizard-body { padding: 20px 24px 24px; }
.wizard-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.wizard-choice { display: grid; gap: 6px; min-height: 170px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink-900); background: #fff; text-align: left; cursor: pointer; }
.wizard-choice:hover, .wizard-choice.selected { border-color: var(--mint-600); background: var(--mint-100); box-shadow: 0 0 0 2px rgba(22,132,103,.12); }
.wizard-choice-icon { font-size: 30px; }
.wizard-choice strong { color: var(--blue-900); font-size: 17px; }
.wizard-choice small, .wizard-radio small { color: var(--ink-500); line-height: 1.45; }
.wizard-body label:not(.checkbox-row):not(.wizard-radio) { display: block; margin-top: 12px; }
.wizard-radio-list { display: grid; gap: 10px; margin-top: 16px; }
.wizard-radio { display: flex; gap: 10px; align-items: flex-start; padding: 13px; border: 1px solid var(--line); border-radius: 13px; cursor: pointer; }
.wizard-radio:has(input:checked) { border-color: var(--mint-600); background: var(--mint-100); }
.wizard-radio strong, .wizard-radio small { display: block; }
.wizard-radio input { margin-top: 3px; accent-color: var(--mint-600); }
.wizard-note { margin-top: 16px; padding: 13px; border-radius: 12px; background: var(--blue-100); color: var(--blue-900); }
.wizard-note p { margin: 4px 0 0; color: var(--ink-500); font-size: 12px; line-height: 1.4; }
.wizard-review { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 15px; background: var(--mint-100); }
.wizard-review-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; font-size: 28px; }
.wizard-review h3 { margin: 2px 0; }
.wizard-review p { margin: 0; }
.wizard-summary { display: flex; justify-content: space-between; gap: 15px; margin-top: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.wizard-summary span { color: var(--ink-500); }
.wizard-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
@media (max-width: 560px) { .wizard-head { padding: 20px 18px 0; }.wizard-body { padding: 16px 18px 20px; }.wizard-choice-grid { grid-template-columns: 1fr; }.wizard-choice { min-height: auto; } }
.budget-card-groceries { background: linear-gradient(135deg, #f0fcf8, #fff 55%); }
.budget-card-eating_out { background: linear-gradient(135deg, #fff8ec, #fff 55%); }
.budget-card-transport { background: linear-gradient(135deg, #f1f5ff, #fff 55%); }
.budget-card-utilities { background: linear-gradient(135deg, #fff2f0, #fff 55%); }
.budget-card-shopping { background: linear-gradient(135deg, #f8f1ff, #fff 55%); }
.budget-card-groceries .section-icon { background: #d9f7ec; color: #178467; }
.budget-card-eating_out .section-icon { background: #ffe9bd; color: #a96700; }
.budget-card-transport .section-icon { background: #dce8ff; color: #245bb6; }
.budget-card-utilities .section-icon { background: #ffdeda; color: #b44a42; }
.budget-card-shopping .section-icon { background: #eadcff; color: #7043ae; }
.budget-card.is-over { border-color: #f0b7b7; background: #fffafa; }
.budget-card.is-over { border-width: 2px; box-shadow: 0 12px 28px rgba(177, 45, 45, .14); }
.budget-card.is-over .badge.warn { background: #b52f3b; color: #fff; font-weight: 800; }
.budget-card.is-over::before { content: 'OVER LIMIT'; display: block; margin: -18px -18px 14px; padding: 7px 14px; border-radius: 14px 14px 0 0; background: #b52f3b; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.budget-card-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.wizard-funding-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.wizard-funding-row span { color: var(--ink-700); line-height: 1.35; }
.budget-edit-current { display: grid; gap: 4px; margin: 16px 0; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #f7fbfa; }
.budget-edit-current span, .budget-edit-current small { color: var(--ink-500); font-size: 12px; }
.budget-edit-current strong { color: var(--blue-900); font-size: 24px; }
.budget-edit-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.budget-edit-section > .eyebrow { margin-bottom: 10px; }
.budget-rule-summary { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--mint-100); color: var(--blue-900); }
.budget-rule-summary p { margin: 0; font-weight: 700; }
.budget-rule-summary small { display: block; margin-top: 5px; color: var(--ink-500); }
.budget-rule-details { margin-top: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.budget-detail-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.budget-detail-section h4 { margin: 3px 0 0; color: var(--blue-900); }
.amount-stepper { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; align-items: center; margin-top: 7px; }
.amount-stepper button { height: 44px; border: 1px solid var(--line); border-radius: 12px; color: var(--blue-900); background: var(--blue-100); font-size: 24px; cursor: pointer; }
.amount-stepper button:hover { border-color: var(--mint-600); background: var(--mint-100); }
.amount-stepper input { margin: 0; text-align: center; }
.budget-card h2 { margin: 4px 0 0; font-size: 25px; }
.budget-bar { height: 8px; margin: 18px 0 9px; overflow: hidden; border-radius: 99px; background: var(--blue-100); }
.budget-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint-600), var(--blue-500)); }
.is-over .budget-bar i { background: var(--danger); }
.budget-meta { color: var(--ink-500); font-size: 12px; }
.category-mini-trend { margin-top: 15px; }
.category-mini-trend > span { color: var(--ink-500); font-size: 11px; }
.category-mini-trend > div { display: flex; align-items: end; gap: 5px; height: 34px; margin-top: 6px; padding: 0 2px; border-bottom: 1px solid rgba(115, 135, 160, .25); }
.category-trend-bar { display: block; flex: 1; min-width: 5px; max-width: 18px; border-radius: 4px 4px 0 0; background: rgba(47, 126, 232, .35); }
.category-trend-bar.selected { background: var(--mint-600); }
.link-button { padding: 0; border: 0; background: transparent; color: var(--blue-700); cursor: pointer; font: inherit; font-weight: 800; }
.budget-card .link-button { margin-top: 16px; }
.budget-transaction-list { margin-top: 12px; }
.activity-review { background: linear-gradient(135deg, #fff, #f7fbff); }
.activity-patterns { background: linear-gradient(135deg, #f4fffb, #fff); }
.budget-transaction { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.budget-transaction:last-child { border-bottom: 0; }
.budget-transaction strong, .budget-transaction small { display: block; }
.budget-transaction small { margin-top: 3px; color: var(--ink-500); font-size: 12px; }
.budget-transaction b { color: var(--danger); }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.checkbox-row input { width: auto; }
.review-help { margin: 10px 0 14px; }
.review-table-wrap { overflow-x: auto; }
.review-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.review-table th, .review-table td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: 13px; }
.review-table th { color: var(--ink-500); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.review-table .amount-column { text-align: right; white-space: nowrap; }
.review-table td.amount-column { color: var(--danger); font-weight: 800; }
.review-table tbody tr { outline: none; transition: background .15s ease; }
.review-table tbody tr:focus-within { background: #f5f9ff; }
.review-table tbody tr.review-saved { background: var(--mint-100); }
.review-table select, .review-table input { min-width: 150px; margin: 0; padding: 8px 9px; font-size: 12px; }
.review-table .review-party { display: block; min-width: 190px; margin-top: 6px; }
.transaction-detail-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 16px; }
.transaction-detail-card { min-width: 0; }
.transaction-detail-kv dd { overflow-wrap: anywhere; }
.detail-callout { display: grid; gap: 4px; margin-top: 20px; padding: 14px; border-radius: 12px; background: var(--mint-100); color: var(--ink-700); }
.detail-category-editor { min-width: 150px; margin-right: 6px; padding: 6px 8px; }
.detail-callout span { color: var(--ink-500); font-size: 12px; }
.transaction-metadata-card { margin-top: 16px; }
.transaction-metadata-card pre { max-height: 420px; overflow: auto; margin: 14px 0 0; padding: 16px; border-radius: 12px; background: #f5f8fc; color: var(--ink-700); font: 12px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 700px) { .budget-overview, .budget-grid { grid-template-columns: 1fr; } .budget-overview strong { font-size: 23px; } }
@media (max-width: 760px) { .transaction-detail-layout { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .category-hero { display: block; } .category-hero-stats { margin-top: 20px; gap: 18px; } }
@media (max-width: 700px) { .budget-period-card { display: block; } .period-controls { margin-top: 16px; } .period-controls input { flex: 1; min-width: 0; } .trend-chart { gap: 5px; } }

.accounts-hierarchy { display: grid; gap: 14px; }
.tree-section-label { margin: 8px 0 0; color: var(--ink-500); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.account-tree-wallet, .institution-tree, .account-tree-item { border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }
.account-tree-wallet, .institution-tree-head, .account-tree-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; color: var(--ink-900); text-decoration: none; }
.account-tree-wallet:hover, .institution-tree-head:hover, .account-tree-head:hover, .transaction-row:hover { text-decoration: none; background: #f7faff; }
.account-tree-wallet span:nth-child(2), .institution-tree-head span:nth-child(2), .account-tree-head span:nth-child(2), .transaction-row-copy { flex: 1; min-width: 0; }
.account-tree-wallet strong, .account-tree-wallet small, .institution-tree-head strong, .institution-tree-head small, .account-tree-head strong, .account-tree-head small { display: block; }
.account-tree-wallet small, .institution-tree-head small, .account-tree-head small { margin-top: 3px; color: var(--ink-500); font-size: 12px; }
.account-tree-icon, .transaction-row-icon { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--blue-800); background: var(--blue-100); font-weight: 800; }
.institution-tree { overflow: hidden; }.institution-tree-head { background: #fbfdff; border-bottom: 1px solid var(--line); }.institution-tree-body { display: grid; gap: 10px; padding: 10px; background: #f8fbff; }.account-tree-item { overflow: hidden; box-shadow: none; }.tree-transactions { padding: 0 10px 9px; }.tree-transactions .tree-section-label { margin: 2px 0 4px; }
.transaction-row { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 9px 2px; border-bottom: 1px solid #edf2f9; color: var(--ink-900); text-decoration: none; }.transaction-row:last-child { border-bottom: 0; }.transaction-row.compact { min-height: 48px; font-size: 13px; }.transaction-row.credit .transaction-row-icon { color: var(--mint-600); background: var(--mint-100); }.transaction-row.debit .transaction-row-icon { color: var(--danger); background: #fff0f0; }.transaction-row-copy strong, .transaction-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.transaction-row-copy small { margin-top: 3px; color: var(--ink-500); font-size: 11px; }.positive { color: var(--mint-600); }.negative { color: var(--danger); }
.detail-grid { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }.detail-link { border-bottom: 1px solid #edf2f9; }.detail-balance, .transaction-detail-amount { display: block; margin: 22px 0; font-size: 30px; font-weight: 800; letter-spacing: -.04em; }.transaction-detail-card { max-width: 720px; }.transaction-detail-kv { margin-top: 22px; }.transactions-filters { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 10px; margin-bottom: 14px; }.transaction-count { margin: 0 0 4px; }
@media (max-width: 620px) { .detail-grid, .transactions-filters { grid-template-columns: 1fr; } }

.account-summary { color: var(--ink-900); }.summary-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }.summary-title-row h2 { margin: 3px 0 0; color: var(--blue-900); font-size: 20px; }.summary-table-head, .summary-amounts { display: grid; grid-template-columns: repeat(3, minmax(78px, 1fr)); gap: 10px; text-align: right; }.summary-table-head { padding: 0 44px 6px 58px; color: var(--ink-500); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.summary-mopay, .summary-institution { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; }.summary-institution { margin-top: 10px; }.summary-institution-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; }.summary-institution-head a { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: var(--ink-900); text-decoration: none; }.summary-institution-head a > span:nth-child(2), .summary-account-name { flex: 1; min-width: 0; }.summary-institution-head strong, .summary-institution-head small, .summary-account-name strong, .summary-account-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.summary-institution-head small, .summary-account-name small { margin-top: 3px; color: var(--ink-500); font-size: 11px; }.summary-institution-head .summary-amounts, .summary-account .summary-amounts { flex: 0 0 270px; }.summary-institution-head .summary-amounts b, .summary-account .summary-amounts b { font-size: 12px; }.summary-institution-icon { display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #8b6bd6; background: #eee9ff; font-weight: 900; }.summary-institution-icon.mopay-icon { color: var(--blue-800); background: var(--blue-100); }.summary-institution-icon.account-icon { color: var(--blue-800); background: #eef4ff; }.summary-drag-handle { flex: 0 0 20px; color: var(--ink-500); cursor: grab; font-size: 16px; letter-spacing: -4px; user-select: none; }.summary-drag-handle:active { cursor: grabbing; }.summary-collapse { flex: 0 0 28px; width: 28px; height: 28px; border: 0; border-radius: 8px; color: var(--ink-500); background: transparent; font-size: 18px; cursor: pointer; }.summary-collapse:hover { background: var(--blue-100); color: var(--blue-800); }.summary-institution-body, .summary-mopay-body { padding: 0 10px 10px; background: #fbfdff; }.summary-institution.is-collapsed .summary-institution-body { display: none; }.summary-account { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid #edf2f9; color: var(--ink-900); text-decoration: none; }.summary-account:hover { background: #f3f8ff; text-decoration: none; }.summary-section-label { margin: 18px 0 8px; color: var(--ink-500); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.summary-subhead { display: flex; justify-content: space-between; padding: 10px 4px 4px; color: var(--ink-500); font-size: 11px; font-weight: 800; text-transform: uppercase; }.summary-pocket { display: flex; align-items: center; gap: 9px; padding: 8px 4px; color: var(--ink-900); text-decoration: none; }.summary-pocket:hover { color: var(--blue-800); text-decoration: none; }.summary-pocket > span:nth-child(2) { flex: 1; }.summary-pocket strong, .summary-pocket small { display: block; }.summary-pocket small { margin-top: 2px; color: var(--ink-500); font-size: 11px; }.summary-pocket > span:first-child { color: var(--mint-600); }.summary-account.is-dragging, .summary-institution.is-dragging { opacity: .45; }
@media (max-width: 700px) { .summary-table-head { padding-left: 48px; }.summary-institution-head .summary-amounts, .summary-account .summary-amounts { flex-basis: 165px; gap: 4px; }.summary-amounts { grid-template-columns: repeat(3, minmax(45px, 1fr)); }.summary-amounts b { font-size: 10px !important; }.summary-account-name small { max-width: 130px; } }
.status-menu { position: relative; }.status-button { border: 0; cursor: pointer; font: inherit; }.status-button span { margin-left: 4px; font-size: 12px; }.status-menu-popover { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; min-width: 150px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }.status-menu-popover button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; color: var(--ink-700); background: transparent; text-align: left; font: inherit; font-size: 13px; cursor: pointer; }.status-menu-popover button:hover { color: var(--blue-800); background: var(--blue-100); }.status-menu-note { display: block; padding: 8px 10px; color: var(--ink-500); font-size: 12px; white-space: nowrap; }
.transaction-list-head, .transaction-row.structured { display: grid; grid-template-columns: 32px minmax(150px, 1fr) minmax(130px, .7fr) 120px; align-items: center; gap: 10px; }.transaction-list-head { padding: 8px 2px; border-bottom: 1px solid var(--line); color: var(--ink-500); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.transaction-list-head b:last-child { text-align: right; }.transaction-row.structured .transaction-row-title, .transaction-row.structured .transaction-row-date { min-width: 0; }.transaction-row.structured .transaction-row-title strong, .transaction-row.structured .transaction-row-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.transaction-row.structured .transaction-row-title small { margin-top: 3px; color: var(--ink-500); font-size: 11px; }.transaction-row.structured .transaction-row-date { color: var(--ink-500); font-size: 12px; }.transaction-row.structured > b { text-align: right; }
@media (max-width: 700px) { .transaction-list-head, .transaction-row.structured { grid-template-columns: 30px minmax(110px, 1fr) minmax(90px, .7fr) 88px; gap: 6px; }.transaction-list-head { font-size: 9px; }.transaction-row.structured .transaction-row-date { font-size: 10px; }.transaction-row.structured > b { font-size: 11px; } }
.transaction-sort-bar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 7px 0; color: var(--ink-500); font-size: 11px; }.transaction-sort-bar button { padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-700); background: #fff; font: inherit; cursor: pointer; }.transaction-sort-bar button:hover { color: var(--blue-800); border-color: var(--blue-500); background: var(--blue-100); }
.workspace-home { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }.workspace-home.is-loaded { opacity: 1; transform: none; }.workspace-home.is-loaded .workspace-widget { animation: workspace-widget-in .42s ease both; }.workspace-home.is-loaded .workspace-widget:nth-child(2) { animation-delay: 70ms; }.workspace-home.is-loaded .workspace-widget:nth-child(3) { animation-delay: 140ms; }.workspace-home.is-loaded .workspace-widget:nth-child(4) { animation-delay: 210ms; }.workspace-home.is-loaded .workspace-widget:nth-child(5) { animation-delay: 280ms; }.workspace-home.is-loaded .workspace-widget:nth-child(6) { animation-delay: 350ms; }.balance-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 16px 0; }.balance-summary { padding: 15px 17px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }.balance-summary small, .balance-summary strong, .balance-summary span { display: block; }.balance-summary small { color: var(--ink-500); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }.balance-summary strong { margin: 7px 0 3px; color: var(--blue-900); font-size: 22px; letter-spacing: -.04em; }.balance-summary span { color: var(--ink-500); font-size: 11px; }.bills-widget.has-due-bills { border-color: #f0d88e; }.bill-alert-row { animation: bill-alert-in .5s ease both; animation-delay: var(--bill-delay); }.bill-alert-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #8d6713; background: #ffe18a; font-weight: 900; }.current-state { display: flex; align-items: center; gap: 12px; padding: 8px 0; }.current-state strong, .current-state small { display: block; }.current-state small { margin-top: 3px; color: var(--ink-500); font-size: 11px; }.current-check { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: var(--mint-600); font-weight: 900; animation: current-check-pop .6s .2s ease both, current-check-glow 2.5s 1s ease-in-out infinite; }.dashboard-confetti { position: fixed; z-index: 100; left: 50%; top: 38%; pointer-events: none; }.dashboard-confetti i { position: absolute; width: 8px; height: 14px; border-radius: 2px; background: var(--mint-500); animation: confetti-fall 1.15s var(--confetti-delay) ease-out both; }.dashboard-confetti i:nth-child(3n) { background: #ffd774; }.dashboard-confetti i:nth-child(3n+1) { background: #8b6bd6; }
@keyframes workspace-widget-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } @keyframes bill-alert-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } @keyframes current-check-pop { from { opacity: 0; transform: scale(.55); } 70% { transform: scale(1.12); } to { opacity: 1; transform: scale(1); } } @keyframes current-check-glow { 50% { box-shadow: 0 0 0 7px rgba(49,208,168,.12); } } @keyframes confetti-fall { from { opacity: 0; transform: translate(0,0) rotate(0); } 15% { opacity: 1; } to { opacity: 0; transform: translate(var(--confetti-x),var(--confetti-y)) rotate(var(--confetti-r)); } }
@media (max-width: 620px) { .balance-strip { grid-template-columns: 1fr; gap: 8px; }.balance-summary { padding: 12px 14px; }.balance-summary strong { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .workspace-home, .workspace-home.is-loaded .workspace-widget, .bill-alert-row, .current-check, .dashboard-confetti i { animation: none; transition: none; }.workspace-home { opacity: 1; transform: none; } }
.accounts-header-icon { width: 38px; height: 38px; margin: -4px 0 6px; object-fit: contain; }.account-institution-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 12px; }.account-institution-head strong, .account-institution-head small { display: block; }.account-institution-head small { margin-top: 4px; color: var(--ink-500); font-size: 11px; }.account-institution-head > b { color: var(--blue-900); font-size: 15px; }.workspace-row-icon { flex: 0 0 32px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--blue-800); background: var(--blue-100); font-weight: 900; }.mobile-wallet-icon { color: var(--mint-600); background: var(--mint-100); font-size: 22px; }.institution-row-icon { color: #8b6bd6; background: #eee9ff; }.workspace-row:has(.workspace-row-icon) { justify-content: flex-start; }.workspace-row:has(.workspace-row-icon) > span:nth-child(2) { flex: 1; }.pocket-list-label { margin: 16px 0 2px; color: var(--ink-500); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.pocket-row-icon { color: #8b6bd6; background: #eee9ff; }.side-nav a:first-of-type:not(.active) { color: var(--ink-700); background: transparent; }
.workspace-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }.workspace-main, .workspace-right { min-width: 0; }.mobile-statusbar { display: none; }.welcome-identity { display: flex; align-items: center; gap: 12px; }.welcome-avatar { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: var(--blue-900); background: #fff; font-weight: 900; }.welcome-identity strong { color: rgba(255,255,255,.75); font-size: 12px; }.notification-button { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); font-size: 18px; }.workspace-hero-zone { margin: 16px 0; padding: 18px; border: 1px solid #bde9dd; border-radius: 18px; background: linear-gradient(145deg, #effff9, #fff); }.workspace-hero-zone > .eyebrow { margin-bottom: 10px; color: var(--mint-600); }.priority-bill, .primary-account { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 13px; }.priority-bill { border: 1px solid #f0d88e; background: #fff8df; }.priority-empty { border-color: #bde9dd; background: var(--mint-100); }.priority-mark, .primary-account-icon, .event-mark { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; color: #8d6713; background: #ffe18a; }.priority-bill span:nth-child(2), .primary-account span:nth-child(2), .reserved-event span:nth-child(2) { flex: 1; }.priority-bill strong, .priority-bill small, .primary-account strong, .primary-account small, .reserved-event strong, .reserved-event small { display: block; }.priority-bill small, .primary-account small, .reserved-event small { margin-top: 3px; color: var(--ink-500); font-size: 11px; }.priority-bill > b, .primary-account > b { color: var(--blue-900); white-space: nowrap; }.primary-account { margin-top: 10px; border: 1px solid var(--line); background: #fff; }.primary-account-icon { color: var(--blue-800); background: var(--blue-100); }.workspace-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }.transaction-feed { display: grid; gap: 9px; }.transaction-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }.transaction-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--blue-800); background: var(--blue-100); }.transaction-row strong, .transaction-row small { display: block; }.transaction-row small { margin-top: 3px; color: var(--ink-500); font-size: 11px; }.transaction-row b { white-space: nowrap; }.transaction-row .negative { color: #bd4c45; }.reserved-event { display: flex; align-items: center; gap: 10px; padding: 12px 0; }.event-mark { color: #8b6bd6; background: #eee9ff; }.workspace-right { display: grid; align-content: start; gap: 16px; }.workspace-right .workspace-widget { box-shadow: var(--shadow-sm); }
@media (max-width: 1100px) { .workspace-layout { grid-template-columns: 1fr; }.workspace-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }.workspace-right .workspace-widget { min-width: 0; } }
@media (max-width: 620px) { body:has(#app.is-authenticated) .topbar { height: 60px; }.mobile-statusbar { display: flex; justify-content: space-between; margin: -10px -2px 8px; padding: 0 5px; color: var(--ink-500); font-size: 11px; font-weight: 800; }.workspace-layout { gap: 12px; }.workspace-right { grid-template-columns: 1fr; }.workspace-welcome { margin-top: 0; padding: 17px; border-radius: 17px; }.workspace-welcome h1 { font-size: 24px; }.priority-bill { align-items: flex-start; flex-wrap: wrap; }.priority-bill > b { margin-left: 46px; }.priority-bill .btn { margin-left: auto; }.primary-account { align-items: flex-start; }.workspace-hero-zone { padding: 13px; }.transaction-row { grid-template-columns: 32px minmax(0,1fr) auto; padding: 11px; }.workspace-widget header { padding: 15px; }.workspace-widget .widget-body { padding: 13px 15px 16px; } }
.workspace-home { display: grid; gap: 18px; }.workspace-welcome { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 30px; border-radius: 22px; color: #fff; background: linear-gradient(118deg, var(--blue-900), var(--blue-700) 62%, #168b9c); box-shadow: 0 18px 34px rgba(7,28,63,.18); }.workspace-welcome h1 { margin: 5px 0 7px; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.04em; }.workspace-welcome p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.76); }.workspace-welcome .eyebrow { color: var(--mint-400); }.workspace-balance { min-width: 190px; padding: 16px; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; background: rgba(255,255,255,.1); }.workspace-balance small, .workspace-balance strong { display: block; }.workspace-balance small { color: rgba(255,255,255,.65); }.workspace-balance strong { margin-top: 6px; font-size: 22px; }.workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.workspace-widget { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }.workspace-widget-wide { grid-column: span 2; }.workspace-widget header { display: flex; align-items: flex-start; gap: 8px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line); }.workspace-widget header > div { flex: 1; }.workspace-widget h2 { margin: 3px 0 0; color: var(--blue-900); font-size: 19px; }.widget-plus, .widget-collapse { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; color: var(--blue-800); background: #fff; font-size: 21px; cursor: pointer; }.widget-plus:hover, .widget-collapse:hover { background: var(--blue-100); text-decoration: none; }.widget-collapse { border: 0; color: var(--ink-500); font-size: 18px; }.widget-body { padding: 15px 20px 18px; }.workspace-widget.is-collapsed .widget-body { display: none; }.widget-actions { display: flex; gap: 8px; margin-bottom: 15px; }.widget-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; color: var(--blue-800); background: var(--blue-100); font-size: 12px; font-weight: 800; }.widget-action:hover { text-decoration: none; background: var(--mint-100); }.widget-filter { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--ink-500); font-size: 12px; font-weight: 800; }.workspace-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf2f8; }.workspace-row:last-of-type { border-bottom: 0; }.workspace-row strong, .workspace-row small { display: block; }.workspace-row strong { color: var(--blue-900); font-size: 13px; }.workspace-row small { margin-top: 4px; color: var(--ink-500); font-size: 11px; }.workspace-row b { color: var(--blue-900); font-size: 13px; white-space: nowrap; }.wallet-row { padding-top: 8px; }.widget-link { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 800; }.workspace-send { display: grid; grid-template-columns: 1fr 150px auto; gap: 8px; margin-bottom: 8px; }.workspace-send input { min-width: 0; }.workspace-send .btn { white-space: nowrap; }.workspace-widget .empty { margin: 5px 0; padding: 8px 0; }
@media (max-width: 900px) { body:has(#app.is-authenticated) .topbar { padding-left: 20px; }.side-nav { display: none !important; } body:has(#app.is-authenticated) .view { width: min(100% - 28px, 720px); margin: 0 auto; padding-top: 88px; } body:has(#app.is-authenticated) .site-foot { left: 0; }.workspace-grid { grid-template-columns: 1fr; }.workspace-widget-wide { grid-column: auto; } }
@media (max-width: 620px) { .workspace-welcome { align-items: flex-start; flex-direction: column; padding: 22px; }.workspace-balance { width: 100%; }.workspace-send { grid-template-columns: 1fr; }.widget-actions { flex-wrap: wrap; } }
.bill-phone { animation: phone-float 4.5s ease-in-out infinite !important; }.bill-animation[data-bill-stage="6"] .bill-phone { opacity: 1; }.bill-animation[data-bill-stage="6"] .bill-upcoming, .bill-animation[data-bill-stage="6"] .bill-document, .bill-animation[data-bill-stage="6"] .bill-biometric { opacity: 0; pointer-events: none; }.bill-animation[data-bill-stage="6"] .bill-confirmation { opacity: 1; pointer-events: auto; transform: translateX(0); }
@keyframes phone-float { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-10px); } }
.bill-notification { animation: screen-float-notification 4.1s .2s ease-in-out infinite !important; will-change: top; }.bill-upcoming { animation: screen-float-upcoming 5.2s .7s ease-in-out infinite; will-change: top; }.bill-document { animation: screen-float-document 4.7s 1.1s ease-in-out infinite; will-change: top; }.bill-biometric { animation: screen-float-biometric 3.8s .35s ease-in-out infinite; will-change: top; }.bill-confirmation { animation: screen-float-confirmation 5.6s 1.4s ease-in-out infinite; will-change: top; }.bill-animation[data-bill-stage="1"] .bill-notification { animation: notification-expand 650ms cubic-bezier(.2,1.4,.4,1) forwards, screen-float-notification 4.1s .85s ease-in-out infinite !important; }
@keyframes screen-float-notification { 0%,100% { top: 75px; } 50% { top: 68px; } } @keyframes screen-float-upcoming { 0%,100% { top: 78px; } 50% { top: 69px; } } @keyframes screen-float-document { 0%,100% { top: 78px; } 50% { top: 71px; } } @keyframes screen-float-biometric { 0%,100% { top: 148px; } 50% { top: 139px; } } @keyframes screen-float-confirmation { 0%,100% { top: 78px; } 50% { top: 67px; } }
.setup-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.setup-choice { padding: 15px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink-700); background: #fff; text-align: left; cursor: pointer; }.setup-choice strong, .setup-choice small { display: block; }.setup-choice small { margin-top: 5px; color: var(--ink-500); font-size: 11px; }.setup-choice.active { border-color: var(--mint-500); background: var(--mint-100); box-shadow: 0 0 0 3px rgba(49,208,168,.14); }.wallet-only-card { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 20px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #1c355d, #286b78); box-shadow: 0 18px 35px rgba(19,47,81,.16); }.wallet-card-mark { display: grid; place-items: center; width: 48px; height: 32px; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; font-weight: 900; }.wallet-only-card strong, .wallet-only-card small { display: block; }.wallet-only-card small { margin-top: 5px; color: rgba(255,255,255,.7); font-size: 11px; }
.bill-animation[data-bill-stage="1"] .bill-notification { animation: notification-expand 650ms cubic-bezier(.2,1.4,.4,1) forwards; }.bill-animation[data-bill-stage="1"] .bill-upcoming { opacity: 0; pointer-events: none; }.bill-animation[data-bill-stage="2"] .bill-upcoming { opacity: 1; pointer-events: auto; transform: translateX(0); }
.bill-animation[data-bill-stage="7"] .bill-notification { opacity: 0; pointer-events: none; transform: translateX(75px) scale(.96); }.bill-animation[data-bill-stage="7"] .bill-upcoming { opacity: 0; pointer-events: none; }.bill-animation[data-bill-stage="7"] .bill-document, .bill-animation[data-bill-stage="7"] .bill-confirmation { opacity: 0; pointer-events: none; }
.bill-animation[data-hand-state="pay-hover"] .bill-upcoming [data-bill-pay], .bill-animation[data-hand-state="view"] .bill-upcoming [data-bill-view], .bill-animation[data-hand-state="pay-document"] .bill-document [data-bill-pay] { transform: translateY(-2px); border-color: var(--mint-600); box-shadow: 0 8px 14px rgba(22,141,115,.2); }.bill-animation[data-hand-state="view"] .bill-upcoming [data-bill-view], .bill-animation[data-hand-state="pay-document"] .bill-document [data-bill-pay] { transform: translateY(1px) scale(.95); color: #fff; background: #2c9e78; box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }
.bill-animation[data-bill-stage="1"] .bill-notification { animation: notification-expand 650ms cubic-bezier(.2,1.4,.4,1) forwards; }.bill-animation[data-bill-stage="1"] .bill-upcoming { opacity: 0; pointer-events: none; }.bill-animation[data-bill-stage="2"] .bill-upcoming { opacity: 1; pointer-events: auto; transform: translateX(0); }
.bill-hand { font-size: 0; transform: none; }.click-cursor { position: relative; display: block; width: 28px; height: 38px; clip-path: polygon(0 0, 0 88%, 25% 70%, 39% 100%, 53% 94%, 39% 64%, 72% 64%); background: #142e50; filter: drop-shadow(2px 4px 2px rgba(19,47,81,.28)); }.click-cursor::after { content: ''; position: absolute; inset: 3px; clip-path: polygon(0 0, 0 78%, 27% 61%, 41% 91%, 48% 87%, 35% 57%, 64% 57%); background: #fff; }.hand-notification, .hand-view, .hand-pay, .hand-close { color: transparent; }
.bill-hand { position: absolute; z-index: 10; display: none; color: #172d50; font-size: 40px; line-height: 1; filter: drop-shadow(2px 5px 2px rgba(19,47,81,.22)); transform: rotate(-18deg); }
.bill-animation[data-hand-state="notification"] .hand-notification, .bill-animation[data-hand-state="pay-hover"] .hand-pay, .bill-animation[data-hand-state="view"] .hand-view, .bill-animation[data-hand-state="pay-document"] .hand-pay, .bill-animation[data-hand-state="close"] .hand-close { display: block; }
.hand-notification { top: 130px; left: 250px; animation: hand-tap 900ms ease-in-out infinite; }.hand-pay { top: 286px; right: 78px; animation: hand-hover 1s ease-in-out infinite; }.hand-view { top: 300px; right: 55px; animation: hand-tap 700ms ease-in-out infinite; }.hand-close { top: 315px; right: 72px; animation: hand-tap 700ms ease-in-out infinite; }
.bill-encryption { position: absolute; z-index: 8; display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #8ee5d0; border-radius: 9px; color: #8ee5d0; background: #173d6d; opacity: 0; box-shadow: 0 0 18px rgba(142,229,208,.75); }.bill-encryption-out { left: 205px; top: 165px; }.bill-encryption-in { right: 78px; top: 190px; border-color: #b692ff; color: #b692ff; box-shadow: 0 0 18px rgba(182,146,255,.75); }
@keyframes notification-expand { from { opacity: 0; transform: translateY(18px) scale(.72); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes notification-shake { 20%,60% { transform: translateX(-4px) rotate(-1deg); } 40%,80% { transform: translateX(4px) rotate(1deg); } } @keyframes hand-tap { 50% { transform: translate(-8px,7px) rotate(-18deg) scale(.9); } } @keyframes hand-hover { 50% { transform: translateY(-8px) rotate(-18deg); } } @keyframes encrypted-send { 0% { opacity: 0; transform: translate(0,0) scale(.7); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(330px,-80px) scale(.8); } } @keyframes encrypted-return { 0% { opacity: 0; transform: translate(250px,-85px) scale(.8); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(0,0) scale(.7); } }

/* ---------- feature stories ---------- */
.feature-sections { width: 100vw; margin-left: calc((100% - 100vw) / 2); }
.feature-section { min-height: 680px; display: grid; grid-template-columns: minmax(0, .82fr) minmax(360px, 1fr); align-items: center; gap: clamp(28px, 7vw, 120px); padding: 92px max(28px, calc((100vw - 1240px) / 2)); overflow: hidden; }
.feature-section-copy { max-width: 540px; }
.feature-section-copy h2 { margin: 10px 0 18px; color: var(--blue-900); font-size: clamp(36px, 5vw, 68px); line-height: 1.02; letter-spacing: -.065em; }
.feature-section-copy p:not(.eyebrow) { max-width: 43ch; color: var(--ink-700); font-size: 17px; line-height: 1.55; }
.feature-section-copy .btn { margin-top: 12px; }
.feature-section-bills { background: #dff3e9; }
.feature-section-pay { background: #dbeaf8; }
.feature-section-bank { background: #ffe8ae; }
.feature-section-pocket { background: #eee5fb; }
.feature-demo { position: relative; min-height: 420px; display: grid; place-items: center; }
.demo-window { width: min(440px, 90%); padding: 28px; border: 1px solid rgba(13,27,46,.12); border-radius: 24px; background: rgba(255,255,255,.9); box-shadow: 0 25px 60px rgba(13,27,46,.14); transform: rotate(3deg); animation: demo-float 5s ease-in-out infinite; }
.demo-window-bar { display: block; width: 78px; height: 8px; margin-bottom: 28px; border-radius: 99px; background: #b8d7c8; }
.demo-window strong { display: block; margin-bottom: 20px; color: var(--blue-900); font-size: 25px; }
.demo-bill-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 11px; align-items: center; padding: 14px 0; border-bottom: 1px solid #e4eee9; color: var(--ink-700); }
.demo-bill-row i { width: 12px; height: 12px; border-radius: 4px; background: #50c9a3; }.demo-bill-row b { color: var(--blue-900); }
.demo-alert { margin-top: 20px; padding: 12px 14px; border-radius: 12px; color: #76520a; background: #fff2c7; font-size: 13px; }.demo-alert span { float: right; font-weight: 800; }
.demo-pay { perspective: 900px; }.pay-phone { position: relative; z-index: 2; width: 220px; height: 390px; display: flex; flex-direction: column; align-items: center; padding: 48px 24px 20px; border: 9px solid #173d6d; border-radius: 36px; color: #fff; background: linear-gradient(150deg, #2c7dc7, #173b73); box-shadow: 20px 28px 0 rgba(31,93,150,.13), 0 30px 70px rgba(31,70,130,.28); transform: rotate(-8deg); animation: demo-float 5.5s ease-in-out infinite reverse; }.pay-phone span { color: var(--mint-400); font-size: 14px; font-weight: 900; }.pay-phone strong { margin-top: 42px; font-size: 29px; }.pay-phone small { margin-top: 5px; color: rgba(255,255,255,.65); }.pay-alias { width: 100%; margin-top: 52px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.12); }.pay-send { width: 100%; margin-top: auto; padding: 13px; border-radius: 12px; text-align: center; color: var(--blue-900); background: var(--mint-400); font-weight: 800; }.pay-orbit { position: absolute; width: 270px; height: 270px; border: 1px dashed rgba(22,83,133,.35); border-radius: 50%; }.orbit-a { transform: rotate(30deg) scaleY(.52); }.orbit-b { width: 350px; height: 350px; transform: rotate(-36deg) scaleY(.42); }
.demo-bank { display: block; padding-top: 30px; }.bank-card { position: absolute; width: min(390px, 80%); padding: 25px; border-radius: 20px; box-shadow: 0 25px 50px rgba(108,74,17,.16); }.bank-card-main { z-index: 2; top: 68px; left: 4%; color: #fff; background: linear-gradient(135deg, #0e5266, #208f83); transform: rotate(-5deg); }.bank-card-main small, .bank-card-side small { display: block; opacity: .68; }.bank-card-main strong { display: block; margin: 15px 0 24px; font-size: 30px; }.bank-chart { display: flex; align-items: end; gap: 8px; height: 65px; }.bank-chart i { flex: 1; border-radius: 6px 6px 0 0; background: #f5d77d; }.bank-chart i:nth-child(1) { height: 35%; }.bank-chart i:nth-child(2) { height: 60%; }.bank-chart i:nth-child(3) { height: 45%; }.bank-chart i:nth-child(4) { height: 85%; }.bank-chart i:nth-child(5) { height: 70%; }.bank-card-side { z-index: 1; right: 2%; top: 240px; color: var(--blue-900); background: rgba(255,255,255,.82); transform: rotate(7deg); }.bank-card-side span, .bank-card-side b { display: block; margin-bottom: 16px; }.bank-card-side b { color: #168667; }.bank-ring { position: absolute; right: 4%; bottom: 15px; width: 180px; height: 180px; border: 24px solid rgba(255,255,255,.6); border-right-color: #e5a958; border-radius: 50%; transform: rotate(25deg); }
.demo-pocket { min-height: 370px; }.pocket-stack { position: relative; width: min(410px, 86%); height: 300px; }.pocket-card { position: absolute; left: 0; width: 100%; padding: 24px; border-radius: 22px; color: #fff; background: #6a49a5; box-shadow: 0 20px 40px rgba(66,42,113,.18); }.pocket-card:nth-child(1) { top: 0; transform: rotate(-7deg); background: #2d8b77; }.pocket-card:nth-child(2) { top: 75px; transform: rotate(4deg); background: #835ab6; }.pocket-card:nth-child(3) { top: 150px; transform: rotate(-3deg); background: #db7462; }.pocket-card span, .pocket-card b { display: block; }.pocket-card b { margin: 12px 0; font-size: 25px; }.pocket-card i { display: block; height: 8px; border-radius: 99px; background: rgba(255,255,255,.25); }.pocket-card em { display: block; width: 68%; height: 100%; border-radius: inherit; background: #ffd774; }.pocket-card:nth-child(2) em { width: 42%; }.pocket-card:nth-child(3) em { width: 24%; }.pocket-spark { position: absolute; right: 4%; top: 6%; color: #d99b2b; font-size: 78px; animation: sparkle 2.8s ease-in-out infinite; }
@keyframes demo-float { 50% { transform: translateY(-12px) rotate(1deg); } }.demo-pay .pay-phone { animation-name: demo-phone-float; } @keyframes demo-phone-float { 50% { transform: translateY(-12px) rotate(-4deg); } } @keyframes sparkle { 50% { transform: scale(1.18) rotate(12deg); opacity: .55; } }
.feature-convergence { position: relative; height: 235vh; background: #fbfaf7; }.convergence-sticky { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; }.convergence-copy { position: absolute; z-index: 5; top: 12%; left: max(28px, calc((100vw - 1180px) / 2)); max-width: 430px; }.convergence-copy h2 { margin: 10px 0; color: var(--blue-900); font-size: clamp(38px, 5vw, 68px); line-height: 1; letter-spacing: -.06em; }.convergence-copy p:not(.eyebrow) { color: var(--ink-700); line-height: 1.5; }.convergence-stage { position: absolute; inset: 0; max-width: 1280px; margin: auto; }.convergence-orbit { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 12px; border: 1px solid rgba(13,27,46,.1); border-radius: 99px; color: var(--blue-900); background: rgba(255,255,255,.85); box-shadow: 0 14px 30px rgba(13,27,46,.1); transform: translate(var(--orbit-x, 0px), var(--orbit-y, 0px)) scale(calc(1 - var(--convergence-progress) * .15)); transition: opacity .2s; }.convergence-orbit span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--blue-900); background: var(--mint-400); font-weight: 900; }.convergence-orbit b { font-size: 13px; white-space: nowrap; }.orbit-bills, .orbit-payment, .orbit-bank, .orbit-savings { left: 50%; top: 50%; }.convergence-phone { position: absolute; left: 50%; top: 58%; z-index: 2; width: 250px; height: 450px; transform: translate(-50%, -50%) scale(calc(.68 + var(--convergence-progress) * .36)); }.phone-wireframe, .phone-hd { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 58px; border: 2px solid #7b8a93; border-radius: 38px; color: #7b8a93; background: rgba(255,255,255,.28); }.phone-wireframe { opacity: calc(1 - var(--convergence-progress)); }.phone-hd { opacity: var(--convergence-progress); border: 10px solid #173d6d; color: #fff; background: linear-gradient(160deg, #2b82c8, #173a70); box-shadow: 0 35px 75px rgba(26,70,115,.25); }.phone-wireframe span, .phone-hd span { font-weight: 900; }.phone-wireframe i, .phone-wireframe b { width: 72%; height: 17px; margin-top: 55px; border: 2px solid currentColor; border-radius: 6px; }.phone-wireframe b { margin-top: 16px; width: 50%; }.phone-hd strong { margin-top: 55px; font-size: 25px; }.phone-hd small { margin-top: 7px; color: rgba(255,255,255,.65); }.phone-hd i { width: 72%; height: 70px; margin-top: 44px; border-radius: 15px; background: rgba(255,255,255,.13); }.phone-hd b { width: 72%; height: 45px; margin-top: auto; margin-bottom: 22px; border-radius: 12px; background: var(--mint-400); }
@media (max-width: 700px) { .feature-section { min-height: auto; grid-template-columns: 1fr; gap: 36px; padding: 76px 22px; }.feature-section-copy h2 { font-size: 42px; }.feature-demo { min-height: 360px; }.convergence-copy { top: 9%; right: 24px; left: 24px; text-align: center; }.convergence-copy h2 { font-size: 42px; }.convergence-stage { top: 70px; }.convergence-phone { top: 61%; transform: translate(-50%, -50%) scale(calc(.52 + var(--convergence-progress) * .25)); }.convergence-orbit { padding: 8px; }.convergence-orbit b { display: none; }.convergence-orbit span { width: 38px; height: 38px; }.orbit-bills { --x: -2.1; --y: -.85; }.orbit-payment { --x: 2.1; --y: -.75; }.orbit-bank { --x: -2.05; --y: .85; }.orbit-savings { --x: 2.05; --y: .9; } }
@media (prefers-reduced-motion: reduce) { .demo-window, .pay-phone, .pocket-spark { animation: none; } .convergence-phone, .convergence-orbit { transition: none; } }

/* ---------- bill alert story ---------- */
.demo-bills { min-height: 520px; }.bill-animation { position: relative; width: min(520px, 100%); height: 520px; }.bill-phone { position: absolute; z-index: 2; left: 8%; top: 30px; width: 238px; height: 458px; padding: 10px; border: 8px solid #132f51; border-radius: 34px; background: #132f51; box-shadow: 24px 28px 0 rgba(19,47,81,.12), 0 28px 55px rgba(19,47,81,.22); transform: rotate(-4deg); }.bill-phone-speaker { width: 62px; height: 5px; margin: 0 auto 8px; border-radius: 99px; background: #7991a5; }.bill-phone-screen { height: 426px; overflow: hidden; border-radius: 19px; background: #f7fbfa; }.bill-app-bar { display: flex; justify-content: space-between; padding: 15px 14px 8px; color: #2b987b; font-size: 11px; }.bill-app-title { padding: 14px; color: var(--blue-900); }.bill-app-title small, .bill-app-card small, .bill-upcoming-row small { display: block; color: #71818c; font-size: 9px; }.bill-app-title strong { display: block; margin-top: 3px; font-size: 26px; }.bill-balance { margin: 0 12px 14px; padding: 15px; border-radius: 15px; color: #fff; background: linear-gradient(135deg, #1b526d, #258a79); }.bill-balance small { display: block; opacity: .72; font-size: 9px; }.bill-balance b { display: block; margin-top: 7px; font-size: 19px; }.bill-tabs { display: flex; justify-content: space-around; padding: 0 8px 10px; color: #9aa8ae; font-size: 9px; }.bill-tabs .active { color: #168d73; font-weight: 800; }.bill-empty-line { height: 1px; margin: 0 14px 9px; background: #e6efed; }.bill-app-card { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; margin: 8px 12px; padding: 10px 8px; border-radius: 11px; background: #e8f5ef; font-size: 10px; }.bill-app-card.muted { background: #f0f4f3; opacity: .7; }.bill-app-card strong { font-size: 9px; }.bill-logo { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: #fff; background: #3eaf88; font-size: 12px; font-weight: 900; }.bill-notification { position: absolute; z-index: 4; top: 75px; left: 42px; right: -145px; display: flex; align-items: center; gap: 9px; padding: 11px; border: 1px solid rgba(255,255,255,.8); border-radius: 15px; color: #fff; background: rgba(22,47,76,.94); box-shadow: 0 12px 30px rgba(19,47,81,.25); animation: notification-pulse 3s ease-in-out infinite; }.notification-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: #173d6d; background: #ffd774; font-weight: 900; }.bill-notification b, .bill-notification small { display: block; }.bill-notification b { font-size: 11px; }.bill-notification small { margin-top: 2px; color: rgba(255,255,255,.65); font-size: 10px; }.bill-notification button { margin-left: auto; border: 0; color: #fff; background: transparent; font-size: 24px; cursor: pointer; }.bill-upcoming, .bill-document, .bill-confirmation { position: absolute; z-index: 3; right: 0; top: 78px; width: 310px; padding: 20px; border: 1px solid rgba(13,27,46,.1); border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 22px 50px rgba(19,47,81,.18); opacity: 0; pointer-events: none; transform: translateX(35px); transition: opacity .4s, transform .4s; }.bill-panel-head { display: flex; justify-content: space-between; margin-bottom: 18px; color: var(--blue-900); font-size: 15px; font-weight: 800; }.bill-panel-head b { color: #d1842a; font-size: 10px; }.bill-upcoming-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: center; padding: 13px 0 20px; border-bottom: 1px solid #e6edeb; color: var(--blue-900); font-size: 12px; }.bill-upcoming-row strong { font-size: 12px; }.bill-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 17px; }.bill-actions .btn { padding: 9px 11px; font-size: 11px; }.bill-more { padding: 8px 0; border: 0; color: #687b84; background: transparent; font-size: 10px; cursor: pointer; }.bill-paper { max-height: 365px; overflow: hidden; padding: 16px; color: #334942; background: #e4f0dc; font-family: Georgia, serif; font-size: 8px; box-shadow: inset 0 0 0 1px rgba(41,77,55,.16); }.paper-brand { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid #638d77; }.paper-brand b { color: #405f89; font-size: 24px; }.paper-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 14px 0; }.paper-grid span { color: #56715f; }.paper-grid b { font-size: 8px; }.bill-paper h4 { margin: 5px 0; text-align: center; font-size: 12px; }.paper-table { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 8px; border: 1px solid #738d7b; }.paper-table > * { padding: 6px 3px; border-right: 1px solid #738d7b; border-bottom: 1px solid #738d7b; }.bill-paper p { padding: 8px; border: 1px solid #738d7b; line-height: 1.3; }.paper-total { display: grid; grid-template-columns: 1fr auto; gap: 4px; text-align: right; }.paper-footer { display: block; margin-top: 16px; text-align: center; color: #49694e; }.bill-beam { position: absolute; z-index: 5; left: 42%; top: 48%; width: 0; height: 9px; border-radius: 99px; opacity: 0; filter: blur(1px); }.bill-beam-out { background: #39c98e; box-shadow: 0 0 20px #39c98e; transform: rotate(-10deg); }.bill-beam-in { background: #9c6cf0; box-shadow: 0 0 20px #9c6cf0; transform: rotate(10deg); }.bill-confirmation { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--blue-900); }.confirmation-check { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 14px; border-radius: 50%; color: #fff; background: #31aa7c; font-size: 30px; }.bill-confirmation small { color: #238b6d; font-weight: 800; }.bill-confirmation strong { margin: 10px 0 6px; font-size: 17px; }.bill-confirmation > span:not(.confirmation-check) { color: #72818a; font-size: 10px; }.bill-confirmation > div { display: flex; gap: 7px; margin-top: 21px; }.bill-confirmation .btn { padding: 9px 11px; font-size: 11px; }.bill-animation[data-bill-stage="1"] .bill-notification, .bill-animation[data-bill-stage="2"] .bill-notification, .bill-animation[data-bill-stage="3"] .bill-notification, .bill-animation[data-bill-stage="4"] .bill-notification { opacity: 0; transform: translateX(60px); pointer-events: none; }.bill-animation[data-bill-stage="1"] .bill-upcoming, .bill-animation[data-bill-stage="2"] .bill-document, .bill-animation[data-bill-stage="3"] .bill-document, .bill-animation[data-bill-stage="4"] .bill-confirmation { opacity: 1; pointer-events: auto; transform: translateX(0); }.bill-animation[data-bill-stage="2"] .bill-upcoming, .bill-animation[data-bill-stage="3"] .bill-upcoming, .bill-animation[data-bill-stage="4"] .bill-upcoming { opacity: 0; pointer-events: none; transform: translateX(-35px); }.bill-animation[data-bill-stage="3"] .bill-beam-out, .bill-animation[data-bill-stage="4"] .bill-beam-out { animation: beam-out 1.1s ease-out forwards; }.bill-animation[data-bill-stage="4"] .bill-beam-in { animation: beam-in 1.1s .35s ease-out forwards; }.bill-animation[data-bill-stage="3"] .bill-document { opacity: 1; }.bill-animation[data-bill-stage="3"] .bill-document .bill-actions { opacity: 1; }.bill-animation[data-bill-stage="3"] .bill-document { transition-delay: 0s; }.bill-animation[data-bill-stage="4"] .bill-document { opacity: 0; pointer-events: none; transform: translateX(-35px); }.bill-animation[data-bill-stage="4"] .bill-confirmation { transition-delay: 1s; }.bill-animation[data-bill-stage="1"] .bill-phone { transform: rotate(-4deg) translateX(-18px); }.bill-animation[data-bill-stage="2"] .bill-phone, .bill-animation[data-bill-stage="3"] .bill-phone, .bill-animation[data-bill-stage="4"] .bill-phone { opacity: .3; }.bill-animation[data-bill-stage="0"] .bill-phone { animation: phone-attention 3s ease-in-out infinite; }
@keyframes notification-pulse { 50% { transform: translateY(-7px); } } @keyframes phone-attention { 50% { transform: rotate(-4deg) translateY(-7px); } } @keyframes beam-out { 0% { width: 0; opacity: 0; } 20% { opacity: 1; } 100% { width: 430px; opacity: 0; transform: translateX(160px) rotate(-10deg); } } @keyframes beam-in { 0% { width: 0; opacity: 0; } 20% { opacity: 1; } 100% { width: 310px; opacity: 0; transform: translateX(-110px) rotate(10deg); } }
@media (max-width: 700px) { .demo-bills { min-height: 650px; }.bill-animation { transform: scale(.82); transform-origin: top center; }.bill-phone { left: 2%; }.bill-upcoming, .bill-document, .bill-confirmation { right: -5%; top: 290px; }.bill-notification { right: -110px; } }
@media (prefers-reduced-motion: reduce) { .bill-notification, .bill-phone { animation: none; }.bill-beam { animation-duration: .01ms !important; } }
.skelec-logo-wrap { overflow: hidden; background: #fff; }.skelec-logo-wrap img { width: 25px; height: 25px; object-fit: contain; }.verified-merchant { display: block; margin-top: 4px; color: #168d73; font-size: 8px; font-style: normal; font-weight: 800; }.verified-merchant::first-letter { color: #168d73; }.paper-brand { gap: 7px; }.paper-skelec-logo { width: 52px; height: 28px; object-fit: contain; background: #fff; }.bill-document-verified { position: absolute; top: 11px; right: 20px; z-index: 2; color: #168d73; font-size: 9px; font-weight: 800; }.bill-biometric { position: absolute; z-index: 7; right: 4px; top: 148px; width: 260px; display: flex; flex-direction: column; align-items: center; padding: 20px; border: 1px solid rgba(255,255,255,.7); border-radius: 20px; color: #fff; background: linear-gradient(145deg, #263b71, #482c78); box-shadow: 0 25px 55px rgba(40,28,91,.3); opacity: 0; pointer-events: none; transform: translateY(30px); transition: opacity .4s, transform .4s; }.fingerprint { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 10px; border: 2px solid #8ee5d0; border-radius: 50%; color: #8ee5d0; font-size: 44px; line-height: 1; }.bill-biometric strong { font-size: 14px; }.bill-biometric small { margin-top: 5px; color: rgba(255,255,255,.62); font-size: 10px; }.bill-biometric b { margin-top: 16px; padding: 8px 12px; border-radius: 99px; color: #253166; background: #8ee5d0; font-size: 10px; }.bill-animation[data-bill-stage="3"] .bill-biometric { opacity: 1; pointer-events: auto; transform: translateY(0); }.bill-animation[data-bill-stage="3"] .bill-document { opacity: .7; }.bill-animation[data-bill-stage="4"] .bill-document { opacity: 1; pointer-events: none; transform: translateX(0); }.bill-animation[data-bill-stage="4"] .bill-biometric { opacity: 0; transform: translateY(30px); }.bill-animation[data-bill-stage="4"] .bill-pay-button { transform: scale(.93); color: #fff; background: #2c9e78; box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }.bill-animation[data-bill-stage="5"] .bill-document { opacity: 0; pointer-events: none; transform: translateX(-35px); }.bill-animation[data-bill-stage="5"] .bill-confirmation { opacity: 1; pointer-events: auto; transform: translateX(0); }.bill-animation[data-bill-stage="5"] .bill-beam-in { animation: beam-in 1.1s .1s ease-out forwards; }
\n@media print { .modal-back, .topbar, .site-foot { display:none!important; } body{background:#fff;} .print-receipt{max-width:300px;margin:0 auto;font-family:monospace;font-size:11px;} }\n\n@media print{.modal-back,.topbar,.site-foot{display:none!important}body{background:#fff}.print-receipt{max-width:300px;margin:0 auto;font-family:monospace;font-size:11px}}\n\n.fts-carousel{position:relative;overflow:hidden;margin-top:10px;border-radius:14px;border:1px solid var(--line);background:#fff;touch-action:pan-y}\n.fts-track{display:flex;transition:transform .3s ease;will-change:transform;align-items:stretch}\n.fts-item{flex:0 0 70%;min-width:70%;padding:14px;border-right:1px solid var(--line);background:linear-gradient(180deg,#fff,#f9fbff)}\n.fts-item.active{background:linear-gradient(180deg,#fff,var(--mint-100))}\n.fts-item.center{box-shadow:inset 0 0 0 2px var(--mint-500)}\n.fts-item .title{font-weight:700;font-size:14px}\n.fts-item .sub{color:var(--ink-500);font-size:12px;margin-top:4px}\n.fts-item .amt{font-weight:800;font-size:18px;margin-top:8px}\n.fts-actions{display:flex;gap:8px;margin-top:10px;justify-content:space-between}\n
.drawer-back{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:60;display:flex;align-items:flex-end}
.drawer{width:100%;max-height:80vh;background:#fff;border-radius:18px 18px 0 0;padding:16px;overflow:auto}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

/* ---------- operator cockpit ---------- */
.cockpit { --cp-tree: 360px; }
.cockpit-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; background: rgba(255,255,255,.9); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-sm);
}
.cockpit-bar .cb-left { display: flex; align-items: center; gap: 10px; }
.cockpit-bar .cb-mid { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }
.cockpit-bar .cb-right { text-align: right; font-size: 12px; color: var(--ink-500); min-width: 130px; }
.cb-inline { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.cb-inline input, .cb-inline select { width: auto; min-width: 120px; padding: 6px 9px; font-size: 12px; margin: 0; }
.cb-layout { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--ink-500); }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #c4ccda; margin-right: 5px; }
.live-dot.on { background: var(--mint-500); box-shadow: 0 0 0 4px rgba(49,208,168,.25); animation: cppulse 1.6s infinite; }
@keyframes cppulse { 0%{opacity:1} 50%{opacity:.45} 100%{opacity:1} }

.cockpit-main { display: flex; gap: 0; margin-top: 14px; align-items: stretch; min-height: 60vh; }
.cockpit-tree {
  flex: 0 0 auto; width: var(--cp-tree); max-width: 45vw; overflow: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px;
  box-shadow: var(--shadow-sm); max-height: 78vh;
}
.cockpit-tree-inner { min-width: 180px; }
.cockpit-split {
  width: 10px; cursor: col-resize; display: flex; align-items: center; justify-content: center;
  color: var(--ink-500); user-select: none;
}
.cockpit-split::before { content: ''; width: 4px; height: 46px; border-radius: 4px; background: var(--line); }
.cockpit-split:hover::before { background: var(--blue-500); }
body.cockpit-dragging { cursor: col-resize; user-select: none; }
.cockpit-panes { flex: 1; min-width: 0; }
.pane-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: nowrap; }
.cockpit-pane {
  flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  max-height: 78vh;
}
.cockpit-pane.focused { border-color: var(--mint-500); box-shadow: 0 0 0 2px rgba(49,208,168,.25), var(--shadow-sm); }
.pane-head { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.pane-head .pane-select { flex: 1; min-width: 0; padding: 7px 9px; font-size: 13px; margin: 0; }
.pane-focus { font-size: 11px; color: var(--ink-500); cursor: pointer; white-space: nowrap; }
.pane-focus.on { color: var(--mint-600); font-weight: 700; }
.pane-body { padding: 14px; overflow: auto; }
.mini-wallet {
  border-radius: 14px; padding: 16px; color: #fff;
  background: linear-gradient(140deg, var(--blue-800), var(--blue-600) 70%, var(--mint-600) 165%);
}
.mini-wallet .label { opacity: .8; font-size: 12px; }
.mini-wallet .amount { font-size: 26px; font-weight: 800; margin: 3px 0; letter-spacing: -.5px; }
.mini-wallet .meta { opacity: .85; font-size: 12px; }

/* tree nodes */
.ctree { font-size: 13px; }
.tnode-row { display: flex; align-items: center; gap: 6px; padding: 3px 2px; border-radius: 8px; }
.tnode-row:hover { background: var(--blue-100); }
.tnode-toggle {
  border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--blue-700);
  width: 16px; padding: 0; font-size: 11px; line-height: 1;
}
.tnode-toggle.leaf { cursor: default; }
.tnode-label { font-weight: 600; color: var(--ink-900); }
.root-label { font-weight: 800; color: var(--blue-800); }
.tnode-value { color: var(--ink-500); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.tnode-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  background: var(--mint-100); color: #0a6d51; border-radius: 999px; padding: 2px 7px; white-space: nowrap;
}
.tnode-act { margin-left: auto; cursor: pointer; color: var(--ink-500); padding: 0 4px; border-radius: 6px; }
.tnode-act:hover { background: var(--blue-100); color: var(--blue-800); }
.tnode-menu { position: relative; display: none; }
.tnode-menu.open {
  display: flex; flex-direction: column; gap: 2px; position: absolute; z-index: 5;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow);
  padding: 4px; margin-top: 2px;
}
.tnode-menu button {
  border: 0; background: transparent; text-align: left; font: inherit; font-size: 12px;
  padding: 6px 10px; border-radius: 7px; cursor: pointer; color: var(--ink-900); white-space: nowrap;
}
.tnode-menu button:hover { background: var(--blue-100); }
.tnode-children { display: none; margin-left: 13px; border-left: 1px dashed var(--line); padding-left: 8px; }
.tnode.open > .tnode-children { display: block; }
.party-browser { margin: 0 0 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.party-browser-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 8px; font-size: 13px; }
.party-browser-list { display: grid; gap: 3px; max-height: 220px; overflow: auto; }
.party-browser-item { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 0; border-radius: 7px; padding: 7px 8px; color: var(--ink-700); background: transparent; text-align: left; cursor: pointer; }
.party-browser-item:hover, .party-browser-item.active { background: var(--blue-50); color: var(--blue-800); }
.party-browser-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-browser-item small { color: var(--ink-500); font-size: 10px; white-space: nowrap; }
.tnode.changed > .tnode-row { animation: object-change 1.8s ease-out; }
@keyframes object-change { 0%, 45% { background: #fff2a8; box-shadow: 0 0 0 3px rgba(255, 204, 54, .35); } 100% { background: transparent; box-shadow: none; } }
.cockpit-activity { margin-top: 14px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); max-height: 240px; overflow: auto; resize: vertical; }
.cockpit-activity.hidden { display: none; }
.activity-head { position: sticky; top: 0; background: #fff; display: flex; gap: 10px; align-items: baseline; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid #eef2f7; font-size: 13px; }
.activity-detail { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; color: inherit; }
.activity-icon { color: var(--blue-700); font-weight: 800; text-transform: uppercase; font-size: 10px; }
.activity-list time { color: var(--ink-500); font-size: 11px; }
.pane-relationship { max-width: 130px; padding: 7px 8px; font-size: 12px; margin: 0; }
.partner-portal { background: #f6f9ff; }
.partner-head { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #253e74, #4873bd); }
.partner-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #f5cb5c; color: #1d315b; font-weight: 900; }
.partner-tabs { display: flex; gap: 16px; padding: 12px 3px; font-size: 13px; color: var(--ink-500); }
.partner-tabs .active { color: var(--blue-800); font-weight: 800; border-bottom: 2px solid var(--blue-600); padding-bottom: 4px; }
.party-list { width: 100%; border-collapse: collapse; }
.party-list th, .party-list td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); font-size: 13px; }

@media (max-width: 900px) {
  .cockpit-tree { max-width: 60vw; }
  .pane-row { flex-direction: column; }
  .cockpit-pane { max-height: none; }
  .activity-list li { grid-template-columns: 44px minmax(0, 1fr); }
  .activity-list time { grid-column: 2; }
}

/* Final bill storyboard overrides */
.bill-animation[data-bill-stage="0"] .bill-notification { opacity: 0; pointer-events: none; transform: translateY(18px) scale(.94); }
.bill-animation[data-bill-stage="1"] .bill-notification { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); animation: notification-expand 650ms cubic-bezier(.2,1.4,.4,1) forwards, notification-shake 1.2s 650ms ease-in-out 2; }
.bill-animation[data-bill-stage="2"] .bill-notification { opacity: 0; pointer-events: none; transform: translateX(65px); }
.bill-animation[data-bill-stage="2"] .bill-upcoming, .bill-animation[data-bill-stage="3"] .bill-document { opacity: 1; pointer-events: auto; transform: translateX(0); }
.bill-animation[data-bill-stage="2"] .bill-document, .bill-animation[data-bill-stage="2"] .bill-biometric, .bill-animation[data-bill-stage="2"] .bill-confirmation, .bill-animation[data-bill-stage="3"] .bill-biometric, .bill-animation[data-bill-stage="3"] .bill-confirmation, .bill-animation[data-bill-stage="4"] .bill-confirmation, .bill-animation[data-bill-stage="5"] .bill-confirmation { opacity: 0; pointer-events: none; }
.bill-animation[data-bill-stage="3"] .bill-document { opacity: 1; }
.bill-animation[data-bill-stage="4"] .bill-biometric { opacity: 1; pointer-events: auto; transform: translateY(0); }.bill-animation[data-bill-stage="4"] .bill-document { opacity: .7; pointer-events: none; transform: translateX(0); }
.bill-animation[data-bill-stage="5"] .bill-document { opacity: .35; pointer-events: none; transform: translateX(0); }.bill-animation[data-bill-stage="5"] .bill-encryption-out { animation: encrypted-send 1s ease-in forwards; }.bill-animation[data-bill-stage="5"] .bill-encryption-in { animation: encrypted-return 1s 1s ease-out forwards; }
.bill-animation[data-bill-stage="3"] .bill-notification, .bill-animation[data-bill-stage="4"] .bill-notification, .bill-animation[data-bill-stage="5"] .bill-notification, .bill-animation[data-bill-stage="6"] .bill-notification { opacity: 0; pointer-events: none; }.bill-animation[data-bill-stage="5"] .bill-upcoming, .bill-animation[data-bill-stage="5"] .bill-document, .bill-animation[data-bill-stage="5"] .bill-biometric, .bill-animation[data-bill-stage="5"] .bill-confirmation { opacity: 0; pointer-events: none; }.bill-animation[data-bill-stage="6"] .bill-document { opacity: 0; pointer-events: none; transform: translateX(-35px); }.bill-animation[data-bill-stage="6"] .bill-confirmation { opacity: 1; pointer-events: auto; transform: translateX(0); }.bill-animation[data-bill-stage="6"] .bill-phone { opacity: 1; animation: phone-float 4.5s ease-in-out infinite; }
.bill-animation[data-bill-stage="3"][data-hand-state="pay-document"] .bill-pay-button, .bill-animation[data-bill-stage="4"] .bill-pay-button, .bill-animation[data-bill-stage="5"] .bill-pay-button { transform: scale(.92); color: #fff; background: #2c9e78; box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }
.bill-animation[data-bill-stage="1"] .bill-notification { animation: notification-expand 650ms cubic-bezier(.2,1.4,.4,1) forwards; }.bill-animation[data-bill-stage="1"] .bill-upcoming { opacity: 0; pointer-events: none; }.bill-animation[data-bill-stage="2"] .bill-upcoming { opacity: 1; pointer-events: auto; transform: translateX(0); }
.bill-animation[data-bill-stage="7"] .bill-notification { opacity: 0; pointer-events: none; transform: translateX(75px) scale(.96); }.bill-animation[data-bill-stage="7"] .bill-upcoming, .bill-animation[data-bill-stage="7"] .bill-document, .bill-animation[data-bill-stage="7"] .bill-confirmation { opacity: 0; pointer-events: none; }
.bill-animation[data-hand-state="pay-hover"] .bill-upcoming [data-bill-pay], .bill-animation[data-hand-state="view"] .bill-upcoming [data-bill-view], .bill-animation[data-hand-state="pay-document"] .bill-document [data-bill-pay] { transform: translateY(-2px); border-color: var(--mint-600); box-shadow: 0 8px 14px rgba(22,141,115,.2); }.bill-animation[data-hand-state="view"] .bill-upcoming [data-bill-view], .bill-animation[data-hand-state="pay-document"] .bill-document [data-bill-pay] { transform: translateY(1px) scale(.95); color: #fff; background: #2c9e78; box-shadow: inset 0 2px 4px rgba(0,0,0,.2); }
.connector-processing { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--ink-500); font-size: 12px; font-weight: 700; }
.processing-dot { width: 12px; height: 12px; flex: 0 0 12px; border: 2px solid var(--mint-200); border-top-color: var(--mint-600); border-radius: 50%; animation: connector-spin .75s linear infinite; }
.password-field { display: flex; align-items: stretch; }
.password-field input { min-width: 0; flex: 1; border-radius: 9px 0 0 9px; }
.password-toggle { padding: 0 12px; border: 1px solid var(--line); border-left: 0; border-radius: 0 9px 9px 0; color: var(--blue-800); background: var(--blue-100); font-size: 12px; font-weight: 800; cursor: pointer; }
.password-toggle:hover { background: var(--mint-100); }
.connector-status-banner { position: fixed; z-index: 45; top: 74px; left: 50%; display: flex; align-items: center; gap: 10px; width: min(760px, calc(100% - 32px)); padding: 11px 14px; border: 1px solid #b9d9e5; border-radius: 12px; color: var(--blue-900); background: #f4fbfd; box-shadow: 0 12px 28px rgba(7, 28, 63, .14); transform: translateX(-50%); font-size: 13px; font-weight: 700; }
.connector-status-banner .processing-dot { flex: 0 0 12px; }
.connector-status-banner.is-success { border-color: #a6e4d3; color: #12684f; background: #f1fffa; }
.connector-status-banner.is-success .processing-dot { display: none; }
.connector-status-banner.is-error { border-color: #efbcbc; color: #8d2f2f; background: #fff7f7; }
.connector-status-banner.is-error .processing-dot { border-color: #f3cccc; border-top-color: #c64f4f; }
.connector-status-banner button { margin-left: auto; border: 0; color: inherit; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }
@media (max-width: 620px) { .connector-status-banner { top: 68px; width: calc(100% - 20px); font-size: 12px; } }
@keyframes connector-spin { to { transform: rotate(360deg); } }