/* Capital Wizard — in-page app mock.
   Skinned with the PRODUCT's real dark-theme tokens (capital-wizard/src/css/themes.scss)
   so "the actual app, running right here" is literally true: same bg/surface/border
   ladder, same indigo accent, same chrome metrics (56px rail, 52px header, 36px
   widget heads, filter-chip tabs), same fonts (Geist / Geist Mono). */
.app{
  --bg:oklch(0.16 0.005 240);
  --surface:oklch(0.2 0.006 240);
  --surface-2:oklch(0.23 0.007 240);
  --surface-hover:oklch(0.26 0.008 240);
  --border:oklch(0.3 0.008 240);
  --border-strong:oklch(0.38 0.009 240);
  --text:oklch(0.96 0.003 240);
  --text-muted:oklch(0.7 0.008 240);
  --text-subtle:oklch(0.55 0.008 240);
  --accent:oklch(0.68 0.16 55);
  --accent-hover:oklch(0.74 0.16 55);
  --accent-soft:oklch(0.32 0.09 55);
  --on-accent:oklch(0.16 0.02 55);
  --rose:oklch(0.66 0.17 355);
  --teal:oklch(0.72 0.12 195);
  --ok:oklch(0.74 0.14 145);
  --err:oklch(0.7 0.17 25);
  --warn:oklch(0.8 0.15 80);
  --info:oklch(0.72 0.13 245);
  --idle:oklch(0.6 0.006 240);
  --w:1320px;--h:820px;width:var(--w);height:var(--h);background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:13px;line-height:1.45;display:grid;grid-template-columns:56px minmax(0,1fr);overflow:hidden;position:relative}
.app *{box-sizing:border-box}
/* The walkthrough controls (provider cards, source chips, wizard buttons) are real
   <button>s. Zero-specificity reset so every styled class below still wins on a tie. */
.app :where(button){font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;text-align:inherit;cursor:pointer}
.app .mn{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.app .g{color:var(--ok)}
.app .r{color:var(--err)}
.app .m{color:var(--text-subtle)}
.app .m2{color:var(--text-muted)}

/* sidebar rail — .sidebar (56px collapsed) with brand row + nav items */
.a-rail{border-right:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;align-items:center;padding:0 0 10px;gap:4px}
.a-rail .brand{height:52px;width:100%;display:grid;place-items:center;border-bottom:1px solid var(--border);margin-bottom:6px;flex:none}
.a-rail .av{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;font-size:10.5px;font-weight:600;color:oklch(0.9 0.08 55)}
.a-rail .ri{width:32px;height:32px;border-radius:4px;display:grid;place-items:center;color:var(--text-muted);position:relative}
.a-rail .ri svg{width:15px;height:15px}
.a-rail .ri.on{color:var(--accent);background:var(--surface-2)}
.a-rail .ri.on::before{content:"";position:absolute;right:-12px;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--accent)}
.a-rail .sp{flex:1}
.a-rail .ri.ua{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;color:var(--text-muted)}
.a-rail .ri.out{color:oklch(0.7 0.17 25/.75)}

/* top bar — .app-header: 52px, surface, bottom border */
.a-main{display:flex;flex-direction:column;min-width:0;min-height:0}
.a-top{height:52px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--surface);flex:none}
.a-top .t{font-size:14px;font-weight:600;letter-spacing:-.005em;display:flex;align-items:center;gap:8px}
.a-top .t svg{width:14px;height:14px;color:var(--text-muted)}
.a-top .sp{flex:1}
.a-seg{display:inline-flex;border:1px solid var(--border);border-radius:4px;overflow:hidden}
.a-seg span{padding:4px 10px;font-size:11.5px;color:var(--text-muted);border-right:1px solid var(--border)}
.a-seg span:last-child{border-right:0}
.a-seg span.on{background:var(--surface-hover);color:var(--text)}
.a-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:4px;border:1px solid var(--border);font-size:12px;color:var(--text-muted);background:var(--surface-2)}
.a-btn.pri{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:500}
.a-btn svg{width:12px;height:12px}
.a-ico{width:28px;height:28px;border-radius:4px;display:grid;place-items:center;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border)}
.a-ico svg{width:14px;height:14px}
.a-burger{display:none}
/* per-screen header controls — site.js stamps data-screen on .app */
.hx{display:none;align-items:center;gap:4px;min-width:0}
.app[data-screen="dashboard"] .hx-dash,.app[data-screen="transactions"] .hx-tx,.app[data-screen="investments"] .hx-as,.app[data-screen="people"] .hx-pp,.app[data-screen="companies"] .hx-co,.app[data-screen="banks"] .hx-bk,.app[data-screen="import"] .hx-im{display:flex}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-muted);padding:4px 9px;border-radius:4px;border:1px solid transparent;white-space:nowrap}
.chip svg{width:11px;height:11px}
.chip .n{font-family:var(--font-mono);font-size:9.5px;color:var(--text-subtle)}
.chip.on{color:var(--accent);background:oklch(0.68 0.16 55/.09);border-color:oklch(0.68 0.16 55/.4)}
.chip.gg{color:var(--ok)}.chip.rr{color:var(--err)}
.pnav{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);margin-left:6px}
.pnav .bdge{font-size:8.5px;letter-spacing:.07em;padding:2px 5px;border-radius:3px;background:oklch(0.68 0.16 55/.14);color:var(--accent)}
.pnav .ar{color:var(--text-subtle)}
.hsearch{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:4px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-subtle);font-size:11.5px;white-space:nowrap}
.hsearch svg{width:12px;height:12px}
.ponly{display:none!important}

/* tab strip — .page-sub-header with .filter-btn chips (the app has no underline tabs) */
.a-tabs{display:flex;align-items:center;gap:4px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--surface);flex:none;overflow:hidden;white-space:nowrap}
.a-tabs .tb{font-size:11.5px;color:var(--text-muted);padding:4px 9px;border-radius:4px;border:1px solid transparent}
.a-tabs .tb.on{color:var(--accent);background:oklch(0.68 0.16 55/.09);border-color:oklch(0.68 0.16 55/.4)}
.a-tabs .hint{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle);display:inline-flex;align-items:center;gap:8px;flex:none}
.a-tabs .hint .a-seg{margin-left:6px}
.a-tabs .hint .a-seg span{padding:3px 8px;font-size:10px}
.a-tabs .sp{flex:1}
.a-status{display:none}
.a-canvas{padding:12px;display:grid;gap:12px;overflow:hidden;min-height:0;flex:1}

/* widget — .widget chrome: surface, border, r-3, 36px header */
.w{background:var(--surface);border:1px solid var(--border);border-radius:6px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.w-h{height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--border);flex:none}
.w-h svg{width:13px;height:13px;color:var(--text-muted)}
.w-h .t{font-size:12px;font-weight:600;flex:1;letter-spacing:-.005em}
.w-h .mt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle)}
.w-b{padding:11px;overflow:hidden;flex:1;min-height:0}
.w-b.col{display:flex;flex-direction:column}
.w-b.col .spark{flex:1;min-height:44px}
.w-b.flush{padding:0}

/* net worth */
.nw{font-family:var(--font-mono);font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1}
.nw-d{font-family:var(--font-mono);font-size:11.5px;margin-top:7px}
.bar{display:flex;height:7px;border-radius:4px;overflow:hidden;margin:14px 0 12px;gap:2px}
.bar i{display:block;height:100%;border-radius:2px}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
.sp-2 .legend{grid-template-columns:1fr;gap:5px}
.sp-2 .nw{font-size:27px}
.legend .li{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-muted)}
.legend .li i{width:6px;height:6px;border-radius:2px;flex:none}
.legend .li .v{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text)}
.spark{height:64px;margin-top:14px;display:flex;align-items:flex-end;gap:3px}
.spark i{flex:1;background:linear-gradient(180deg,oklch(0.68 0.16 55/.85),oklch(0.68 0.16 55/.18));border-radius:2px 2px 0 0;display:block}

/* rows */
.rows{display:flex;flex-direction:column}
.rw{display:flex;align-items:center;gap:9px;padding:7px 11px;border-bottom:1px solid var(--border);font-size:12px}
.rw:last-child{border-bottom:0}
.rw .ic{width:20px;height:20px;border-radius:5px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;color:var(--text-muted);flex:none}
.rw .ic svg{width:11px;height:11px}
.rw .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw .cc{font-family:var(--font-mono);font-size:9.5px;color:var(--text-subtle);letter-spacing:.05em}
.rw .am{font-family:var(--font-mono);font-size:12px;text-align:right;min-width:74px}
.rw .sub{font-size:10.5px;color:var(--text-subtle)}

/* goals */
.goal{padding:9px 11px;border-bottom:1px solid var(--border)}
.goal:last-child{border-bottom:0}
.goal .gn{font-size:12px;margin-bottom:4px}
.goal .gv{font-family:var(--font-mono);font-size:10.5px;color:var(--text-subtle);margin-bottom:6px}
.goal .gb{height:4px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.goal .gb i{display:block;height:100%;border-radius:3px}
.goal .gm{font-family:var(--font-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-subtle);margin-top:5px}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.tbl th{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);font-weight:500;text-align:right;padding:8px 11px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.tbl th:first-child{text-align:left}
.tbl th .thi{display:inline-flex;align-items:center;gap:5px;justify-content:flex-end}
.tbl th:first-child .thi{justify-content:flex-start}
.tbl th svg{width:10px;height:10px;opacity:.7}
.tbl tr.cur td{background:oklch(0.68 0.16 55/.07);border-bottom:1px solid oklch(0.68 0.16 55/.4)}
.tbl td{padding:7px 11px;border-bottom:1px solid var(--border);text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td:first-child{text-align:left;font-family:var(--font-sans)}
.tbl tr:last-child td{border-bottom:0}
.tbl .nmc{display:flex;align-items:center;gap:8px}
.tbl .lg{width:20px;height:20px;border-radius:5px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;font-family:var(--font-mono);font-size:8.5px;color:var(--text-muted);flex:none}

/* donut */
.donut{width:104px;height:104px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative}
.donut::after{content:"";position:absolute;inset:19px;border-radius:50%;background:var(--surface)}
.donut .dc{position:relative;z-index:1;text-align:center}
.donut .dc .k{font-family:var(--font-mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle)}
.donut .dc .v{font-family:var(--font-mono);font-size:13px;font-weight:600}

/* chips / pills — match app .pill (mono caps, soft bg) */
.pill{display:inline-flex;align-items:center;gap:5px;height:19px;padding:0 7px;border-radius:5px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;border:1px solid}
.pill.ok{color:var(--ok);border-color:oklch(0.74 0.14 145/.35);background:oklch(0.74 0.14 145/.1)}
.pill.wr{color:var(--warn);border-color:oklch(0.8 0.15 80/.35);background:oklch(0.8 0.15 80/.1)}
.pill.br{color:var(--accent);border-color:oklch(0.68 0.16 55/.35);background:oklch(0.68 0.16 55/.12)}
.pill.nt{color:var(--text-muted);border-color:var(--border);background:var(--surface-2)}


/* people */
.pp{display:flex;align-items:center;gap:10px;padding:9px 11px;border-bottom:1px solid var(--border)}
.pp:last-child{border-bottom:0}
.pp .avt{width:26px;height:26px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);flex:none}
.pp .pb{flex:1;min-width:0}
.pp .pn{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp .pt{display:block;font-size:10.5px;color:var(--text-subtle);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp .pa{font-family:var(--font-mono);font-size:12px;text-align:right}
.pp .pa .s{display:block;font-size:9.5px;color:var(--text-subtle);letter-spacing:.05em;text-transform:uppercase}

/* phone shell — real mobile chrome: status bar + PageHeader (burger, title, actions); no bottom tab bar */
.app[data-device="phone"]{--w:390px;--h:800px;grid-template-columns:minmax(0,1fr);font-size:14px}
.app[data-device="phone"] .a-rail{display:none}
.app[data-device="phone"] .a-status{height:44px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 20px 6px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);flex:none;background:var(--surface)}
.a-status .sig{display:inline-flex;align-items:center;gap:5px}
.a-status .sig svg{width:13px;height:13px;display:block}
.app[data-device="phone"] .a-top{height:52px;padding:0 12px}
.app[data-device="phone"] .a-top .t{font-size:17px}
.app[data-device="phone"] .a-burger{display:grid;background:transparent;border-color:transparent;color:var(--text)}
.app[data-device="phone"] .a-tabs{padding:8px 12px;gap:4px}
.app[data-device="phone"] .a-tabs .tb{font-size:12.5px;flex:none}
.app[data-device="phone"] .a-canvas{padding:14px;gap:12px;overflow:hidden}
.app[data-device="phone"] .nw{font-size:38px}
.app[data-device="phone"] .rw,.app[data-device="phone"] .pp{padding:11px 13px;font-size:13.5px}
.app[data-device="phone"] .rw .am,.app[data-device="phone"] .pp .pa{font-size:13.5px}
.app[data-device="phone"] .w-h{height:40px}
.app[data-device="phone"] .w-h .t{font-size:13.5px}
.app[data-device="phone"] .tbl th{font-size:10px}
.app[data-device="phone"] .tbl td{font-size:12.5px;padding:9px 12px}
.app[data-device="phone"] .hx{display:none!important}
.app[data-device="phone"] .ponly{display:inline-flex!important}
.app[data-device="phone"] .led2-head{display:none}
.app[data-device="phone"] .lr2{grid-template-columns:1fr 120px;min-height:48px}
.app[data-device="phone"] .acgrid{grid-template-columns:1fr;padding:6px 14px 12px}
.app[data-device="phone"] .cngrid{grid-template-columns:1fr;padding:6px 14px 12px}
.app[data-device="phone"] .cngrid.av{grid-template-columns:1fr 1fr}
.app[data-device="phone"] .stepl{gap:11px}
.app[data-device="phone"] .iw-spine{max-width:none}
/* Two across on the phone frame, where the product itself stacks them one per
   row: five stacked cards would eat over half the visible pane and push the
   wiring card — the thing this screen is here to show — off the bottom. */
.app[data-device="phone"] .pvgrid{grid-template-columns:1fr 1fr;padding:7px 14px 10px;gap:5px}
.app[data-device="phone"] .pvk{padding:8px 9px;gap:7px}
.app[data-device="phone"] .dropz,.app[data-device="phone"] .rescard{margin:14px;padding:20px 16px}
.app[data-device="phone"] .resg{gap:16px;flex-wrap:wrap}
.app[data-device="phone"] .filecard{margin:12px 14px 0}
.app[data-device="phone"] .fprog{margin:8px 14px 2px}
.app[data-device="phone"] .isum{gap:14px;flex-wrap:wrap}
.app[data-device="phone"] .tbl.imp th:first-child,.app[data-device="phone"] .tbl.imp td:first-child{width:38%}
.app[data-device="phone"] .acr svg.area{top:42px}
.app[data-device="phone"] .det-grid{grid-template-columns:1fr}
.app[data-device="phone"] .led-head{display:none}
.app[data-device="phone"] .lr{grid-template-columns:58px 1fr 92px;height:40px;padding:0 14px;font-size:13px}
.app[data-device="phone"] .p-toolbar{padding:8px 14px}
.app[data-device="phone"] .p-search{min-width:0;flex:1}
.app[data-device="phone"] .col-m{display:none}
.app[data-device="phone"] .col-l{width:100%;border-right:0;flex:1}
.app[data-device="phone"] .stat-row{flex-direction:column}
.app[data-device="phone"] .hide-sm,.app[data-device="phone"] .hide-md{display:none!important}
.app[data-device="phone"] .w-b+.w-b{flex:0 0 auto}

/* dense-md — desktop shell rendered at a narrower virtual viewport (data-w):
   hides the hide-md tier and mirrors the tablet grid templates so hidden cells
   don't leave empty tracks. Used to make marketing frames legible. */
.app.dense-md .hide-md{display:none!important}
.app.dense-md .led2-head,.app.dense-md .lr2{grid-template-columns:170px 1.35fr 150px 1fr}
.app.dense-md .acgrid{grid-template-columns:repeat(3,1fr)}
.app.dense-md .cngrid:not(.one):not(.av){grid-template-columns:repeat(3,1fr)}
.app.dense-md .pvgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.app.dense-md .col-l{width:260px}

/* tablet shell — landscape, desktop chrome (real tablets get the desktop UI) */
.app[data-device="tablet"]{--w:1180px;--h:820px;grid-template-columns:56px minmax(0,1fr)}
.app[data-device="tablet"] .hide-md{display:none!important}
.app[data-device="tablet"] .led-head,.app[data-device="tablet"] .lr{grid-template-columns:64px 130px 1fr 110px}
.app[data-device="tablet"] .led2-head,.app[data-device="tablet"] .lr2{grid-template-columns:170px 1.35fr 150px 1fr}
.app[data-device="tablet"] .acgrid{grid-template-columns:repeat(3,1fr)}
.app[data-device="tablet"] .cngrid:not(.one):not(.av){grid-template-columns:repeat(3,1fr)}
.app[data-device="tablet"] .pvgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.app[data-device="tablet"] .col-l{width:260px}


/* page screens — in the real app only Dashboard is a widget grid; every other
   app is a full-bleed page (toolbar + edge-to-edge content). */
.a-canvas:has(.sc--page.on){padding:0;gap:0}
.sc.sc--page.on{display:flex;flex-direction:column;min-height:0;height:100%;overflow:hidden}
.p-toolbar{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--surface);flex:none}
.p-search{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:4px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-subtle);font-size:11.5px;min-width:190px;white-space:nowrap;overflow:hidden}
.p-search svg{width:12px;height:12px}
.p-toolbar .sp{flex:1}
.p-sum{display:inline-flex;align-items:baseline;gap:5px;font-family:var(--font-mono)}
.p-sum .k{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle)}
.p-sum b{font-size:12px;font-weight:600}
.p-meta{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-subtle)}
.p-scroll{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.sc--page .rw{padding:7px 16px}
/* ghost section strip (day banners, group headers) — text-tint band per the app */
.day-bn,.gsec{display:flex;align-items:center;gap:10px;padding:4px 16px;background:oklch(from var(--text) l c h/.08);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:10px;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;flex:none}
.gsec{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-subtle)}
.day-bn .sp,.gsec .sp{flex:1}
/* full-bleed ledger (Transactions) — zebra rows, colored type, italic comment */
.led-head,.lr{display:grid;grid-template-columns:64px 130px 1fr 170px 1.2fr 110px;gap:8px;align-items:center;padding:0 16px}
.led-head{height:26px;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);border-bottom:1px solid var(--border);background:var(--surface);flex:none}
.led-head .ta-r{text-align:right}
.lr{height:34px;font-size:12px;flex:none}
.lr:nth-child(even of .lr){background:oklch(from var(--text) l c h/.04)}
.lr .d{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);white-space:nowrap}
.lr .ty{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;white-space:nowrap}
.lr .ty svg{width:11px;height:11px;flex:none}
.lr .cat{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr .acc .name{font-size:11.5px;display:block;line-height:1.2}
.lr .acc .num{font-family:var(--font-mono);font-size:9.5px;color:var(--text-subtle)}
.lr .cm{font-style:italic;color:var(--text-muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr .am{font-family:var(--font-mono);font-size:12.5px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
/* payments ledger v2 — colored type tiles, from->to accounts, 2-line transfer amounts */
.led2-head,.lr2{display:grid;grid-template-columns:170px 1.35fr 150px 80px 1.1fr 1fr 1.1fr;gap:10px;align-items:center;padding:0 16px}
.led2-head{height:28px;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);border-bottom:1px solid var(--border);background:var(--surface);flex:none}
.led2-head .ta-r{text-align:right}
.lr2{min-height:44px;padding:5px 16px;font-size:12px;flex:none}
.lr2:nth-child(even of .lr2){background:oklch(from var(--text) l c h/.04)}
.tile{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;flex:none}
.tile svg{width:13px;height:13px}
.tile.in{background:oklch(0.74 0.14 145/.16);color:var(--ok)}
.tile.ex{background:oklch(0.7 0.17 25/.16);color:var(--err)}
.tile.tr{background:oklch(0.72 0.12 195/.16);color:var(--teal)}
.tile.iv{background:oklch(0.66 0.17 355/.16);color:var(--rose)}
/* Adjustments — balance corrections after an import, and the zero-value legs a
   bank narration arrives on. Neutral on purpose: they move no money, and
   colouring them green or red would say they did. */
.tile.aj{background:oklch(from var(--text) l c h/.1);color:var(--text-subtle)}
.lr2 .tcell{display:flex;align-items:center;gap:9px;min-width:0}
/* `display:block` is load-bearing, not tidiness: overflow and text-overflow do
   nothing on an inline box, so without it the ellipsis never fires and a long
   name renders at full width straight over the account column. */
.lr2 .tname{display:block;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The text column has to be allowed to SHRINK or .tname's ellipsis never fires:
   a flex item sizes to its content by default, so the name pushes straight
   through the column and collides with the account next to it. Ukrainian
   surfaces this where English hid it — "Банківські / карткові комісії" is half
   again the length of "Bank / card fees". */
.lr2 .tcell > span:last-child{flex:1;min-width:0}
.lr2 .tsub{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle);margin-top:1px}
.lr2 .acell{min-width:0;font-size:11.5px}
.lr2 .acell .achip{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.lr2 .acell .achip svg{width:11px;height:11px;color:var(--text-muted)}
.lr2 .acell .aar{color:var(--text-subtle);margin:0 3px}
.lr2 .acell .asub{display:block;font-family:var(--font-mono);font-size:9px;color:var(--text-subtle);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr2 .acell .asub.gg{color:var(--ok)}.lr2 .acell .asub.rr{color:var(--err)}
.lr2 .amt{font-family:var(--font-mono);font-size:12px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums;line-height:1.3}
.lr2 .amt .l2{display:block;font-size:11px}
.lr2 .fee{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);text-align:right}
.lr2 .ascell{min-width:0;font-size:11px}
.lr2 .ascell .an2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.lr2 .ascell .aq{display:block;font-family:var(--font-mono);font-size:9.5px;color:var(--ok);margin-top:1px}
.lr2 .ccell{display:flex;align-items:center;gap:7px;min-width:0}
.lr2 .ccell .cav{width:20px;height:20px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;font-family:var(--font-mono);font-size:8px;color:var(--text-muted);flex:none}
.lr2 .ccell .cnm{min-width:0}
.lr2 .ccell .cn1{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.lr2 .ccell .cn2{display:block;font-family:var(--font-mono);font-size:8.5px;color:var(--text-subtle)}
.lr2 .cmt{font-style:italic;color:var(--text-muted);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr2 .dim{color:var(--text-subtle)}

/* assets — section bands + asset card grid with area sparklines */
.asec{display:flex;align-items:center;gap:10px;padding:10px 16px 6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--text-muted);flex:none}
.asec .ttl{color:var(--text);font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:0;display:inline-flex;align-items:center;gap:7px}
.asec .ttl svg{width:12px;height:12px;color:var(--text-muted)}
.asec .dash{flex:1;border-top:1px dashed var(--border-strong);opacity:.6}
.acgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:6px 16px 12px;flex:none}
.acr{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:11px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.acr .ahd{display:flex;align-items:flex-start;gap:8px;margin-bottom:6px}
.acr .ahd .lg{margin-top:1px}
.acr .lg{width:24px;height:24px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;font-family:var(--font-mono);font-size:7.5px;color:var(--text-muted);flex:none}
.acr .anm{font-size:11.5px;font-weight:500;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acr .asb{font-family:var(--font-mono);font-size:9px;color:var(--text-subtle);letter-spacing:.05em}
.acr .acv{font-family:var(--font-mono);font-size:19px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.acr .acd{font-size:10.5px;margin-top:1px}
.acr svg.area{position:absolute;top:38px;right:12px;width:92px;height:32px}
.acr .acs{display:flex;gap:12px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
.acr .acs span{display:flex;flex-direction:column;gap:2px;min-width:0}
.acr .acs .k{font-family:var(--font-mono);font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle)}
.acr .acs .v{font-family:var(--font-mono);font-size:10px;font-variant-numeric:tabular-nums}

/* people detail — balance pill, tab chips, dashed contact rows, balances panel */
.det-meta{font-family:var(--font-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-subtle);margin-top:3px;display:flex;align-items:center;gap:6px}
.det-meta .fdot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.bal-pill{display:inline-flex;align-items:baseline;gap:6px;height:26px;align-items:center;padding:0 10px;border-radius:5px;font-family:var(--font-mono);font-size:11.5px;border:1px solid oklch(0.74 0.14 145/.4);background:oklch(0.74 0.14 145/.1);color:var(--ok)}
.bal-pill .k{font-size:9px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.dtabs{display:flex;align-items:center;gap:4px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--surface);flex:none}
.det-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 16px;min-height:0;overflow:hidden}
.det-grid .w{flex:none}
.clab{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle);padding:10px 12px 2px}
.crow{display:flex;align-items:baseline;gap:10px;padding:7px 12px;border-bottom:1px dashed var(--border);font-size:11.5px}
.crow:last-child{border-bottom:0}
.crow .ck{color:var(--text-muted);display:inline-flex;align-items:center;gap:5px}
.crow .st{color:var(--accent);font-size:9px}
.crow .cv{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--accent)}
.brow{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:11.5px}
.brow:last-child{border-bottom:0}
.brow.on{background:oklch(0.68 0.16 55/.08);box-shadow:inset 2px 0 0 var(--accent)}
.brow .bn{flex:1;min-width:0}
.brow .bt{display:inline-block;margin-left:6px;font-family:var(--font-mono);font-size:7.5px;letter-spacing:.07em;padding:1px 4px;border-radius:3px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-subtle);text-transform:uppercase}
.brow .bv{font-family:var(--font-mono);font-size:11px}
.bbig{padding:10px 12px 4px}
.bbig .v{font-family:var(--font-mono);font-size:21px;font-weight:600;letter-spacing:-.01em}
.bbig .s{font-family:var(--font-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-subtle);margin-top:2px}

/* master-detail split (People, Companies) */
.split{display:flex;flex:1;min-height:0}
.col-l{width:290px;flex:none;border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--surface);min-height:0;overflow:hidden}
.col-l .p-toolbar{padding:8px 12px}
.col-l .p-search{min-width:0;flex:1}
.col-l .pp{padding:8px 12px}
.pp.on{background:oklch(from var(--accent) l c h/.1);box-shadow:inset 2px 0 0 var(--accent)}
.psec{display:flex;align-items:center;gap:8px;padding:9px 12px 4px;font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-subtle);flex:none}
.psec svg{width:10px;height:10px}
.psec .rule{flex:1;border-top:1px solid var(--border)}
.col-m{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.det-h{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface);flex:none}
.det-h .avt{width:38px;height:38px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;font-family:var(--font-mono);font-size:13px;color:var(--text-muted);flex:none}
.det-h .db{flex:1;min-width:0}
.det-h .dn{font-size:16px;font-weight:600;letter-spacing:-.01em}
.det-h .dtags{display:flex;gap:5px;margin-top:4px}
.stat-row{display:flex;gap:10px;padding:12px 16px;flex:none}
.stat{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.stat .k{font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle)}
.stat .v{font-family:var(--font-mono);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.stat .s{font-family:var(--font-mono);font-size:9.5px;color:var(--text-subtle)}

/* avatars — generated portraits for people, monogram marks for companies.
   The hue rides in on an inline --a so every record reads as its own; no image
   files, same rule as the blog covers. These override the plain .pp/.det-h/.cav
   discs above, so they must stay below them. */
.app .avt,.app .lr2 .ccell .cav{position:relative;overflow:hidden;font-weight:600;
  background:linear-gradient(150deg,oklch(0.5 0.1 var(--a,240)),oklch(0.33 0.07 calc(var(--a,240) + 30)));
  border:1px solid oklch(0.62 0.09 var(--a,240)/.45);color:oklch(0.95 0.04 var(--a,240))}
.app .avt svg,.app .lr2 .ccell .cav svg{width:100%;height:100%;display:block}
.app .fig{fill:oklch(0.93 0.05 var(--a,240)/.5)}
.app .avt.co,.app .lr2 .ccell .cav.co{border-radius:6px;font-family:var(--font-mono);letter-spacing:.02em;
  background:linear-gradient(150deg,oklch(0.33 0.06 var(--a,240)),oklch(0.23 0.035 var(--a,240)));
  border-color:oklch(0.58 0.08 var(--a,240)/.5);color:oklch(0.86 0.1 var(--a,240))}
.det-h .avt.co{border-radius:9px}
.app .avt.xs{width:17px;height:17px;border-radius:5px;font-size:7px;display:inline-grid;place-items:center;margin-right:6px;vertical-align:-3px;flex:none}
.pp .pa .s{white-space:nowrap}

/* live indicator — the "this runs on its own" tell */
.lvdot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none;display:inline-block;margin-right:7px;vertical-align:1px;animation:cw-pulse 2.4s ease-out infinite}

/* bank / brokerage connections (Connect screen) */
.cngrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:6px 16px 12px;flex:none}
.cngrid.one{grid-template-columns:1fr}
.cn{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:11px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.cn.wire{border-color:oklch(0.68 0.16 55/.45);background:oklch(0.68 0.16 55/.05)}
.cnh{display:flex;align-items:center;gap:9px}
.cnl{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;flex:none;font-family:var(--font-mono);font-size:9px;font-weight:600;
  background:linear-gradient(150deg,oklch(0.33 0.06 var(--a,240)),oklch(0.23 0.035 var(--a,240)));
  border:1px solid oklch(0.58 0.08 var(--a,240)/.5);color:oklch(0.86 0.1 var(--a,240))}
.cnb{flex:1;min-width:0}
.cnn{display:block;font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cns{display:block;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-subtle);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnv{font-family:var(--font-mono);font-size:17px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cnf{display:flex;align-items:center;gap:8px}
.cnf .m{margin-left:auto;font-family:var(--font-mono);font-size:9.5px}
.cn.ad{flex-direction:row;align-items:center;gap:9px;font-size:11.5px;color:var(--text-muted);background:var(--surface-2)}
.cn.ad .cnl{width:22px;height:22px;font-size:8px}
.cn.ad .sq{width:22px;height:22px;border-radius:6px;background:var(--surface-hover);display:grid;place-items:center;color:var(--text-muted);flex:none}
.cn.ad .sq svg{width:12px;height:12px}
/* institution marks — the REAL logos out of /logos (the same files the product
   renders). Marks that ship their own full-bleed brand tile (PrivatBank, IBKR)
   fill the box; ones shipped as a bare glyph on transparency (Binance) need the
   plate underneath to read on a dark surface, so every mark gets one. */
.bmk{width:26px;height:26px;border-radius:6px;flex:none;display:block;object-fit:contain;
  background:var(--surface-2);border:1px solid oklch(from var(--text) l c h/.06)}
.cn.ad .bmk{width:22px;height:22px;border-radius:5px}

/* provider picker — the wizard's own first connect screen (ProviderSelectStep's
   `.provider-card--live` row: logo, name, status line, trailing chevron). Five
   across here rather than the panel's two, which keeps each card at the width it
   has in the product. */
.pvgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:7px 16px 10px;flex:none}
.pvk{display:flex;align-items:center;gap:9px;min-height:50px;padding:9px 11px;min-width:0;text-align:left;
  background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text-muted);
  font-family:inherit;cursor:pointer;transition:border-color 120ms ease,background 120ms ease}
.pvk .bmk{width:22px;height:22px;border-radius:5px}
.pvb{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pvn{font-size:11.5px;font-weight:600;color:var(--text);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvm{font-size:10px;line-height:1.3;color:var(--text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvd{display:inline-block;width:6px;height:6px;margin-left:5px;border-radius:50%;background:var(--ok);vertical-align:middle;flex-shrink:0}
.pvc{width:11px;height:11px;flex:none;color:var(--text-subtle);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pvk:hover{border-color:var(--accent);background:var(--surface-hover)}
.pvk:hover .pvc{color:var(--text-muted)}
.pvk.on{border-color:var(--accent);background:oklch(0.68 0.16 55/.08);box-shadow:inset 0 0 0 1px var(--accent)}
.pvk.on .pvc{color:var(--accent)}
/* statement-source strip (Import) */
.bstrip{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--surface);flex:none;overflow:hidden}
.bstrip .sp{flex:1}
.bstrip .m{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.bchip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px 0 5px;border-radius:5px;border:1px solid var(--border);background:var(--surface-2);font-size:11.5px;color:var(--text-muted);white-space:nowrap;flex:none}
.bchip .bmk{width:18px;height:18px;border-radius:4px}
.bchip.on{border-color:oklch(0.68 0.16 55/.45);background:oklch(0.68 0.16 55/.08);color:var(--text)}
.bchip{transition:border-color 120ms ease,background 120ms ease,color 120ms ease}
.bchip:hover{border-color:var(--border-strong);background:var(--surface-hover);color:var(--text)}
.bchip.on:hover{border-color:var(--accent)}
.fic-mk{width:30px;height:30px;border-radius:7px}
.cn.ad.dash{border-style:dashed;border-color:var(--border-strong);color:var(--text-subtle);justify-content:center}
.cn.ad svg{width:14px;height:14px}
.prog{height:3px;border-radius:2px;background:var(--surface-2);overflow:hidden;flex:none}
.prog i{display:block;height:100%;width:100%;border-radius:2px;background:var(--ok);transform-origin:left}
.stepl{display:flex;gap:18px;flex-wrap:wrap}
.stp{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--text)}
.stp .dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--border-strong);flex:none;position:relative;display:block}
.stp .dot::after{content:"";position:absolute;inset:1.5px;border-radius:50%;background:var(--ok)}
.cnrows{display:flex;flex-direction:column;border-top:1px solid var(--border);margin-top:1px}
.cnr{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:12px;border-bottom:1px solid var(--border)}
.cnr:last-child{border-bottom:0}
.cnr .ic{width:20px;height:20px;border-radius:5px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;color:var(--text-muted);flex:none}
.cnr .ic svg{width:11px;height:11px}
.cnr .nm{flex:1;min-width:0}
.cnr .sub{font-size:10px;color:var(--text-subtle)}
.cnr .cc{font-family:var(--font-mono);font-size:9.5px;color:var(--text-subtle);letter-spacing:.05em}
.cnr .am{font-family:var(--font-mono);font-size:12.5px;font-weight:500;min-width:82px;text-align:right;font-variant-numeric:tabular-nums}
/* stacked status pills — the LAST one is the resting state */
.stx{display:grid;flex:none;justify-items:end}
.stx>*{grid-area:1/1}
.stx .st-a,.stx .st-b{opacity:0;visibility:hidden}

/* statement import wizard — the product's ImportSpine: the run's screens grouped
   into Connect · Map · Review, each a numbered dot over a determinate bar, with
   the current screen and "Step N / M" underneath. */
.iw-spine{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1;max-width:520px}
.iw-spine__row{display:flex;align-items:center;gap:6px}
.iw-spine__seg{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px}
.iw-spine__lbl{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-subtle);white-space:nowrap}
.iw-spine__n{width:13px;height:13px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:600;border:1.2px solid var(--border-strong);flex:none}
.iw-spine__bar{height:3px;border-radius:3px;background:var(--surface-2);overflow:hidden;position:relative}
.iw-spine__bar>i{position:absolute;inset:0;right:auto;width:0;background:var(--accent);border-radius:3px;transition:width .45s cubic-bezier(.16,.9,.3,1)}
.iw-spine__seg.is-active .iw-spine__lbl{color:var(--text);font-weight:600}
.iw-spine__seg.is-active .iw-spine__n{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.iw-spine__seg.is-done .iw-spine__lbl{color:var(--text-muted)}
.iw-spine__seg.is-done .iw-spine__n{background:oklch(0.74 0.14 145/.15);color:var(--ok);border-color:oklch(0.74 0.14 145/.4)}
.iw-spine__seg.is-done .iw-spine__bar>i{width:100%!important;background:var(--ok)}
.iw-spine__seg.is-todo .iw-spine__bar>i{width:0!important}
.iw-spine__caption{display:flex;align-items:baseline;gap:6px;font-size:11px}
.iw-spine__now{font-weight:600;color:var(--text);letter-spacing:-.005em;white-space:nowrap}
.iw-spine__of{font-family:var(--font-mono);font-size:9.5px;color:var(--text-subtle);letter-spacing:.04em;margin-left:auto;white-space:nowrap}

/* the three walkthrough stages. Review rests visible so the still frames in the
   features rail keep the screen that sells the feature; site.js swaps stages on
   the live mocks only. `display:contents` keeps the children direct flex items
   of .p-scroll, so nothing about the resting layout changes. */
.istage{display:none}
.istage.st-rev{display:contents}
.app[data-stage="upload"] .istage.st-rev,.app[data-stage="done"] .istage.st-rev{display:none}
.app[data-stage="upload"] .istage.st-up,.app[data-stage="done"] .istage.st-done{display:contents}

/* upload step — FileUploadStep's drop target */
.dropz{margin:16px;padding:26px 20px;border:1.5px dashed var(--border-strong);border-radius:8px;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;flex:none}
.dzi{width:40px;height:40px;border-radius:10px;background:oklch(0.68 0.16 55/.1);border:1px solid oklch(0.68 0.16 55/.35);display:grid;place-items:center;color:var(--accent)}
.dzi svg{width:18px;height:18px}
.dzt{font-size:14px;font-weight:600;color:var(--text)}
.dzs{font-size:11.5px;color:var(--text-subtle)}
.dzh{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:7px 11px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);border-left:2px solid var(--warn);font-size:11px;color:var(--text-muted)}
.dzh svg{width:12px;height:12px;color:var(--warn);flex:none}
.dzh b{color:var(--text);font-weight:600}

/* result step — what the wizard lands on once the rows are written */
.rescard{margin:16px;padding:22px 20px;border:1px solid var(--border);border-radius:8px;background:var(--surface);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;flex:none}
.resi{width:42px;height:42px;border-radius:50%;background:oklch(0.74 0.14 145/.13);border:1px solid oklch(0.74 0.14 145/.4);display:grid;place-items:center;color:var(--ok)}
.resi svg{width:19px;height:19px;stroke-width:2.6}
.rest{font-size:15px;font-weight:600;letter-spacing:-.01em}
.ress{font-size:12px;color:var(--text-muted)}
.ress b{color:var(--text);font-weight:600}
.resg{display:flex;gap:26px;margin-top:10px;padding-top:14px;border-top:1px solid var(--border);width:100%;justify-content:center}
.resg .isb{align-items:center}
.resa{display:flex;gap:8px;margin-top:12px}
.filecard{display:flex;align-items:center;gap:11px;margin:12px 16px 0;padding:11px 12px;background:var(--surface);border:1px solid var(--border);border-radius:6px;flex:none}
.fic{width:30px;height:30px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;color:var(--accent);flex:none}
.fic svg{width:15px;height:15px}
.fib{flex:1;min-width:0}
.fin{display:block;font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fis{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-subtle);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fim{font-size:11px;color:var(--text-muted);white-space:nowrap}
.fim b{color:var(--text);font-weight:600}
.fprog{margin:8px 16px 2px}
.tbl.imp td:first-child{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The main-currency value under a foreign-currency amount. Muted and a size
   down: it is the same money said again, not a second number to read. */
.tbl.imp .cvt{display:block;font-size:9.5px;color:var(--text-subtle);margin-top:1px}
.ir.dup td{opacity:.55}
.isum{display:flex;align-items:center;gap:20px;padding:10px 16px;border-top:1px solid var(--border);background:var(--surface);flex:none}
.isum .sp{flex:1}
.isb{display:flex;flex-direction:column;gap:2px;min-width:0}
.isb .k{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-subtle);white-space:nowrap}
.isb .v{font-family:var(--font-mono);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.isb .v.wrn{color:var(--warn)}

/* screen layouts (desktop grid) */
.sc{display:none;grid-template-columns:repeat(12,1fr);gap:12px;min-height:0;height:100%}
.sc.on{display:grid}
.app[data-device="phone"] .sc.on{grid-template-columns:1fr;grid-auto-rows:min-content}
.sp-2{grid-column:span 2}.sp-3{grid-column:span 3}.sp-4{grid-column:span 4}.sp-5{grid-column:span 5}.sp-6{grid-column:span 6}.sp-7{grid-column:span 7}.sp-8{grid-column:span 8}.sp-9{grid-column:span 9}.sp-12{grid-column:span 12}
.rw-1{grid-row:span 1}.rw-2{grid-row:span 2}
.app[data-device="phone"] [class*="sp-"]{grid-column:span 1}
.sc.on{grid-auto-rows:minmax(0,1fr)}
.app[data-device="phone"] .sc.on{grid-auto-rows:min-content}

/* ledger extras */
.tbl.led th,.tbl.led td{text-align:left;font-family:var(--font-sans)}
.tbl.led th:last-child,.tbl.led td:last-child{text-align:right;font-family:var(--font-mono)}
.tbl.led td:first-child{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);white-space:nowrap}
.tbl .dayr td{background:var(--surface-2);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-subtle);padding:6px 11px;text-align:left}
.tbl .totr td{background:var(--surface-2);font-weight:500;border-top:1px solid var(--border-strong)}
.bdg{width:16px;height:16px;border-radius:4px;display:inline-grid;place-items:center;flex:none;border:1px solid}
.bdg svg{width:10px;height:10px}
.bdg.in{color:var(--ok);border-color:oklch(0.74 0.14 145/.35);background:oklch(0.74 0.14 145/.12)}
.bdg.ex{color:var(--err);border-color:oklch(0.7 0.17 25/.35);background:oklch(0.7 0.17 25/.12)}
.bdg.tr{color:var(--info);border-color:oklch(0.72 0.13 245/.35);background:oklch(0.72 0.13 245/.12)}
.bdg.iv{color:var(--rose);border-color:oklch(0.66 0.17 355/.35);background:oklch(0.66 0.17 355/.12)}

/* data animation — base state IS the final state; .zeroed is the start frame */
.app .spark i{transform-origin:bottom;transition:transform .75s cubic-bezier(.16,.9,.3,1)}
.app.zeroed .spark i{transform:scaleY(0)}
.app .bar i,.app .goal .gb i{transform-origin:left;transition:transform .85s cubic-bezier(.16,.9,.3,1)}
.app.zeroed .bar i,.app.zeroed .goal .gb i{transform:scaleX(0)}
.app .donut{transition:transform .7s cubic-bezier(.16,.9,.3,1),opacity .45s ease}
.app.zeroed .donut{transform:scale(.6) rotate(-40deg);opacity:0}
.app .rw,.app .pp,.app .goal,.app .lr,.app .lr2,.app .acr,.app .brow,.app .crow,.app .acard,.app .stat,.app .tbl tbody tr{transition:opacity .5s ease,transform .5s cubic-bezier(.16,.9,.3,1)}
.app.zeroed .rw,.app.zeroed .pp,.app.zeroed .goal,.app.zeroed .lr,.app.zeroed .lr2,.app.zeroed .acr,.app.zeroed .brow,.app.zeroed .crow,.app.zeroed .acard,.app.zeroed .stat,.app.zeroed .tbl tbody tr{opacity:0;transform:translateY(8px)}
.app .w{transition:opacity .45s ease,transform .55s cubic-bezier(.16,.9,.3,1)}
.app.zeroed .w{opacity:0;transform:translateY(16px) scale(.99)}
.app .rw:nth-child(2),.app .pp:nth-child(2),.app .lr:nth-child(2),.app .acard:nth-child(2),.app .tbl tbody tr:nth-child(2){transition-delay:.04s}
.app .rw:nth-child(3),.app .pp:nth-child(3),.app .tbl tbody tr:nth-child(3){transition-delay:.08s}
.app .rw:nth-child(4),.app .pp:nth-child(4),.app .tbl tbody tr:nth-child(4){transition-delay:.12s}
.app .rw:nth-child(5),.app .pp:nth-child(5),.app .tbl tbody tr:nth-child(5){transition-delay:.16s}
.app .rw:nth-child(6),.app .pp:nth-child(6),.app .tbl tbody tr:nth-child(6){transition-delay:.2s}
.app .rw:nth-child(n+7),.app .pp:nth-child(n+7),.app .lr:nth-child(n+7),.app .acard:nth-child(n+7),.app .tbl tbody tr:nth-child(n+7){transition-delay:.24s}
.app .spark i:nth-child(2n){transition-delay:.05s}
.app .spark i:nth-child(3n){transition-delay:.1s}
.app .w:nth-child(2){transition-delay:.05s}
.app .w:nth-child(3){transition-delay:.1s}
.app .w:nth-child(4){transition-delay:.15s}
.app .w:nth-child(5){transition-delay:.2s}
.app .w:nth-child(6){transition-delay:.25s}
.app .w:nth-child(n+7){transition-delay:.3s}
/* connect + import walkthroughs — the mock actually performs the two things the
   copy promises. Only on .is-live mocks (hero + live preview); the feature-section
   stills keep the finished state, which is what the resting styles above encode.
   build() clones a fresh template on every screen switch, so these replay each
   time the screen is opened without any JS timeline. */
@keyframes cw-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cw-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes cw-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes cw-on{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@keyframes cw-off{from{opacity:1;visibility:visible}to{opacity:0;visibility:hidden}}
@keyframes cw-lit{from{color:var(--text-subtle)}to{color:var(--text)}}
@keyframes cw-fill{0%,95%{background:var(--accent)}96%,100%{background:var(--ok)}}
@keyframes cw-pulse{0%{box-shadow:0 0 0 0 oklch(0.74 0.14 145/.45)}70%,100%{box-shadow:0 0 0 6px oklch(0.74 0.14 145/0)}}
@keyframes cw-tap{0%{transform:scale(1)}35%{transform:scale(.975)}100%{transform:scale(1)}}
/* Connecting… → Verifying → Connected, over one 3s timeline (50% / 87%) */
@keyframes cw-s1{0%,49%{opacity:1;visibility:visible}50%,100%{opacity:0;visibility:hidden}}
@keyframes cw-s2{0%,49%{opacity:0;visibility:hidden}50%,86%{opacity:1;visibility:visible}87%,100%{opacity:0;visibility:hidden}}
@keyframes cw-s3{0%,86%{opacity:0;visibility:hidden}87%,100%{opacity:1;visibility:visible}}

.app.is-live .cn.wire .prog i{animation:cw-prog 2.75s cubic-bezier(.35,.75,.3,1) both,cw-fill 2.75s linear both}
.app.is-live .cn.wire .stp{animation:cw-lit .25s linear both}
.app.is-live .cn.wire .stp .dot::after{animation:cw-pop .34s cubic-bezier(.2,1.5,.4,1) both}
.app.is-live .cn.wire .s1,.app.is-live .cn.wire .s1 .dot::after{animation-delay:.7s}
.app.is-live .cn.wire .s2,.app.is-live .cn.wire .s2 .dot::after{animation-delay:1.55s}
.app.is-live .cn.wire .s3,.app.is-live .cn.wire .s3 .dot::after{animation-delay:2.4s}
.app.is-live .cn.wire .st-a{animation:cw-s1 3s linear both}
.app.is-live .cn.wire .st-b{animation:cw-s2 3s linear both}
.app.is-live .cn.wire .st-c{animation:cw-s3 3s linear both}
.app.is-live .cn.wire .cnr{animation:cw-in .5s cubic-bezier(.16,.9,.3,1) both}
.app.is-live .cn.wire .r1{animation-delay:2.68s}
.app.is-live .cn.wire .r2{animation-delay:2.84s}

/* The picked provider's card, so a click on the picker reads as the thing that
   started the run rather than a highlight that happens to move. */
.app.is-live .pvk.on{animation:cw-tap .4s cubic-bezier(.2,1.4,.4,1) both}

/* The wizard's stages. Each one is keyed on [data-stage] as well as .is-live, so
   its timeline starts when site.js opens that stage — not 1.75s earlier, while
   the stage was still display:none. */
.app.is-live[data-stage="upload"] .dropz{animation:cw-in .5s cubic-bezier(.16,.9,.3,1) both}
.app.is-live[data-stage="upload"] .dzi{animation:cw-pop .5s cubic-bezier(.2,1.4,.4,1) .1s both}
.app.is-live[data-stage="done"] .rescard{animation:cw-in .5s cubic-bezier(.16,.9,.3,1) both}
.app.is-live[data-stage="done"] .resi{animation:cw-pop .55s cubic-bezier(.2,1.5,.4,1) .12s both}
.app.is-live[data-stage="done"] .resg .isb{animation:cw-in .45s cubic-bezier(.16,.9,.3,1) .34s both}

/* statement parses, rows stream in, each category resolves on its own beat */
.app.is-live[data-screen="import"] .fprog i{animation:cw-prog 1.05s cubic-bezier(.35,.75,.3,1) both,cw-fill 1.05s linear both}
.app.is-live[data-screen="import"] .filecard .st-a{animation:cw-off .22s linear 1.05s both}
.app.is-live[data-screen="import"] .filecard .st-c{animation:cw-on .22s linear 1.05s both}
.app.is-live[data-screen="import"] .ir{animation:cw-in .45s cubic-bezier(.16,.9,.3,1) var(--r,0s) both}
.app.is-live[data-screen="import"] .ir .st-a{animation:cw-off .22s linear var(--d,1s) both}
.app.is-live[data-screen="import"] .ir .st-c{animation:cw-on .22s linear var(--d,1s) both}
.app.is-live[data-screen="import"] .isum .isb{animation:cw-in .45s cubic-bezier(.16,.9,.3,1) 2.6s both}

@media(prefers-reduced-motion:reduce){.app *{transition:none!important;animation:none!important}}

.fit{position:relative}

/* The live app embed. It sits over the mock rather than replacing it, so the
   panel never blinks through an empty state: the mock holds the frame until the
   iframe reports `load`, then `.pv-live-on` crosses over and the mock — which
   is inert once hidden — stops being what the visitor is looking at. */
/* `pointer-events:none` is permanent, not just the pre-swap state. The panel is
   a demo to watch, not an app to use: the visitor drives it with the screen and
   device controls OUTSIDE the frame, and the walkthrough inside plays itself.
   Blocking input is also what guarantees no one can ever type into a form in
   there — a signed-out app renders a sign-in box, and an embedded credential
   field on the marketing site is not a thing to leave one bug away. */
.pv-live{position:absolute;inset:0;border:0;transform-origin:top left;background:oklch(0.16 0.005 240);
  opacity:0;transition:opacity .35s ease;pointer-events:none}
.fit.pv-live-on .pv-live{opacity:1}
.fit.pv-live-on .fit-inner{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.pv-live{transition:none}}

/* ── The wizard steps ─────────────────────────────────────────────────────────
   One pane per step; site.js stamps the current step id on .app and only that
   pane is laid out. `display:contents` so a pane's children stay direct flex
   items of .p-scroll and the resting layout is unchanged. */
.wstep{display:none}
.app[data-step="pick"] .wstep[data-step="pick"],
.app[data-step="creds"] .wstep[data-step="creds"],
.app[data-step="approve"] .wstep[data-step="approve"],
.app[data-step="accounts"] .wstep[data-step="accounts"],
.app[data-step="pull"] .wstep[data-step="pull"],
.app[data-step="upload"] .wstep[data-step="upload"],
.app[data-step="map"] .wstep[data-step="map"],
.app[data-step="review"] .wstep[data-step="review"],
.app[data-step="done"] .wstep[data-step="done"]{display:contents}
/* No step stamped yet (the still frames in the features rail): show the screen
   the copy is about rather than an empty panel. */
.app:not([data-step]) [data-screen="banks"] .wstep[data-step="pull"],
.app:not([data-step]) [data-screen="import"] .wstep[data-step="review"]{display:contents}

/* The step the run is on gets picked out of the grid, the way a click would. */
.pvk.pk-1{border-color:var(--accent);background:oklch(0.68 0.16 55/.08);box-shadow:inset 0 0 0 1px var(--accent)}
.pvk.pk-1 .pvc{color:var(--accent)}
.pvq{width:22px;height:22px;border-radius:5px;background:var(--surface-2);border:1px solid var(--border);
  display:grid;place-items:center;color:var(--text-muted);flex:none}
.pvq svg{width:12px;height:12px}

/* Credential step */
.wzhead{display:flex;align-items:center;gap:11px;padding:14px 16px 0}
.wzh-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.wzh-t{font-size:14px;font-weight:600;letter-spacing:-.01em}
.wzh-s{font-size:11.5px;color:var(--text-muted)}
.wzform{display:flex;flex-direction:column;gap:6px;padding:14px 16px 0}
.wzlbl{font-family:var(--font-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-subtle)}
.wzin{height:30px;border-radius:5px;border:1px solid var(--border);background:var(--surface-2);
  display:flex;align-items:center;gap:1px;padding:0 10px;margin-bottom:6px;font-family:var(--font-mono);font-size:11.5px;color:var(--text)}
.wzin .caret{width:1.5px;height:14px;background:var(--accent);display:block}
.wzhint{display:inline-flex;align-items:flex-start;gap:7px;margin-top:4px;padding:8px 11px;border-radius:6px;
  background:var(--surface-2);border:1px solid var(--border);border-left:2px solid var(--ok);font-size:11px;color:var(--text-muted)}
.wzhint svg{width:12px;height:12px;color:var(--ok);flex:none;margin-top:1px}
.wzfoot{display:flex;justify-content:flex-end;gap:8px;padding:14px 16px}

/* The short steps sit in the middle of the panel rather than clinging to the
   top of it. A credentials form is four short rows; pinned to the top of a
   600px pane it reads as a screen that failed to load the rest of itself. */
.app[data-step="creds"] .p-scroll,
.app[data-step="accounts"] .p-scroll,
.app[data-step="map"] .p-scroll,
.app[data-step="upload"] .p-scroll,
.app[data-step="pick"] .p-scroll{justify-content:center}

/* Waiting / result steps */
.wzcentre{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:20px 16px;text-align:center}
.wzc-t{font-size:15px;font-weight:600;letter-spacing:-.01em}
.wzc-s{font-size:12px;color:var(--text-muted)}
.wzspin{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--surface-hover);border-top-color:var(--accent);
  animation:cw-spin 1s linear infinite}
.wzok{width:42px;height:42px;border-radius:50%;background:oklch(0.74 0.14 145/.13);border:1px solid oklch(0.74 0.14 145/.4);
  display:grid;place-items:center;color:var(--ok)}
.wzok svg{width:19px;height:19px;stroke-width:2.6}
.wzprog{width:min(320px,80%);margin-top:4px}
.wzsum{border-top:0;background:transparent;justify-content:center;gap:26px;margin-top:6px}
.wzsum .isb{align-items:center}
@keyframes cw-spin{to{transform:rotate(360deg)}}

/* Account / mapping rows inside a step */
.wzaccs{padding:0 16px;border-top:0}
.wzaccs .cnr .tick{width:16px;height:16px;border-radius:4px;background:oklch(0.74 0.14 145/.15);
  border:1px solid oklch(0.74 0.14 145/.45);color:var(--ok);display:grid;place-items:center;flex:none}
.wzaccs .cnr .tick svg{width:9px;height:9px;stroke-width:3}
.wzaccs .cnr .aar{color:var(--text-subtle);flex:none;margin:0 2px}
.wzaccs .mapto{min-width:0;text-align:right;color:var(--text);font-family:var(--font-sans);font-size:12px}
.wzfile{margin-top:10px}

/* The primary button of a step presses itself just before the run moves on. */
.app.is-live .a-btn.press{animation:cw-press 2.4s cubic-bezier(.4,0,.2,1) 1.1s both}
@keyframes cw-press{0%,72%{transform:none;filter:none}
  80%{transform:scale(.965);filter:brightness(1.15)}
  88%,100%{transform:none;filter:none}}

/* Each step's content arrives rather than cutting in. */
.app.is-live .wzhead,.app.is-live .wzform,.app.is-live .wzcentre,
.app.is-live .dropz,.app.is-live .pvgrid{animation:cw-in .42s cubic-bezier(.16,.9,.3,1) both}
.app.is-live .wzaccs .cnr{animation:cw-in .4s cubic-bezier(.16,.9,.3,1) both}
.app.is-live .wzaccs .r1{animation-delay:.35s}
.app.is-live .wzaccs .r2{animation-delay:.6s}
.app.is-live .wzaccs .r3{animation-delay:.85s}
.app.is-live .wzaccs .r4{animation-delay:1.1s}
/* The token types itself in — the step is "paste your credentials", and a field
   that is simply already full does not read as that. */
.app.is-live .wzin .wztxt::after{content:"";animation:cw-type 1.4s steps(24) .5s both}
.app.is-live .wzin.type-1 .wztxt::after{content:"4•••••••2"}
.app.is-live .wzin.type-2 .wztxt::after{content:"a7f3•••••••••••••••e1"}
@keyframes cw-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.wzin .wztxt{white-space:nowrap;overflow:hidden}
.wzin .wztxt::after{display:inline-block}