/* Money Ledger — Treasury design
   Tokens and components follow the Claude Design handoff (README "Design Tokens"). */

:root{
  --canvas:#EFEAE2; --raised:#F6F2EB; --sunken:#FBF8F3; --surface:#FFFFFF;
  --ink:#1C1B19; --ink-hover:#33312C; --ink-raised:#2A2925; --ink-muted:#4A463F;
  --muted:#5E5850; --faint:#6F6A61; --on-ink:#F4EFE7; --on-ink-muted:#A5A096;
  --border:#E7E1D7; --border-strong:#E2DCD2; --rule:#DFD8CC; --border-faint:#F1ECE4; --dashed:#CFC6B7;
  --track:#EDE8E0; --neutral:#D8D1C5; --neutral-2:#DED7CB;
  --sage:#6E8F68; --sage-hover:#5C7B57; --sage-deep:#3F5B3C; --green:#376C34;
  --mint:#C9DCC4; --mint-border:#B7CDB1; --sand:#E8D3B9; --sand-border:#DCC4A6;
  --sand-text:#65563F; --sand-text-2:#5A4D3B; --sand-text-3:#3F3A30;
  --clay:#C2553F; --clay-soft:#D98B75; --clay-soft-2:#E3B3A6;
  --amber:#C99B4E; --lilac:#7A82B8; --plum:#8C6E93; --teal:#5E8896; --link:#3F5E3B;
  --clay-text:#A6432F; --amber-text:#86642A; --accent-btn:color-mix(in srgb,var(--sage) 72%,#000); --on-accent-btn:#fff;
  --serif:'Newsreader',Georgia,serif; --sans:'Space Grotesk',system-ui,sans-serif;
  --panel:#1C1B19; --panel-raised:#2A2925; --panel-border:transparent; --panel-mint:#C9DCC4;
  --prime:#1C1B19; --prime-hover:#33312C; --on-prime:#F4EFE7;
  --tag-ok-bg:#EDF2EB; --tag-ok:#3F5B3C; --tag-alert-bg:#FBE9E5; --tag-alert:#93412F;
  --tag-warn-bg:#FAF0E2; --tag-warn:#65563F; --tag-info-bg:#F1EEF7; --tag-info:#4A4470;
  --soft:rgba(255,255,255,.6); --soft-hover:rgba(255,255,255,.9);
  --on-tint-line:rgba(28,27,25,.15); --on-tint-bar:rgba(28,27,25,.12);
  /* type scale and corner rounding: every size in the app is one of these */
  --t-xs:12px; --t-sm:13px; --t-md:14px; --t-lg:16px; --t-xl:18px; --t-2xl:22px; --t-3xl:28px; --t-4xl:34px; --t-5xl:44px; --t-6xl:52px;
  --r-xs:4px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-2xl:18px; --r-pill:999px;
  --sidebar-w:200px;
}
/* ---------- dark mode (Settings → Appearance; "system" follows the device) ---------- */
html[data-theme=dark]{
  color-scheme:dark;
  --canvas:#191814; --raised:#23221D; --sunken:#1F1E19; --surface:#26241F;
  --ink:#ECE7DD; --ink-hover:#FFFFFF; --ink-raised:#2E2C27; --ink-muted:#CFC9BE;
  --muted:#B0AA9F; --faint:#948E85; --on-ink:#F4EFE7; --on-ink-muted:#A5A096;
  --border:#36332D; --border-strong:#3E3B34; --rule:#3B3831; --border-faint:#2D2B26; --dashed:#55504A;
  --track:#332F29; --neutral:#4D4840; --neutral-2:#45413A;
  --sage:#7FA178; --sage-hover:#8FB088; --sage-deep:#B7CDB1; --green:#8CC286;
  --mint:#2E3F2D; --mint-border:#3C503A; --sand:#4A3C29; --sand-border:#5E4D35;
  --sand-text:#E8D3B9; --sand-text-2:#D9C8AE; --sand-text-3:#F0E4D2;
  --clay:#E0725C; --clay-soft:#D98B75; --clay-soft-2:#A35A48; --link:#A8C2A0;
  --clay-text:#EC8A76; --amber-text:#D9B26A; --accent-btn:var(--sage); --on-accent-btn:var(--on-prime);
  --panel:#0F0E0B; --panel-raised:#1E1C18; --panel-border:#2A2823;
  --prime:#E8E2D6; --prime-hover:#F8F4EC; --on-prime:#1C1B19;
  --tag-ok-bg:#243124; --tag-ok:#B7CDB1; --tag-alert-bg:#3F2521; --tag-alert:#F0A398;
  --tag-warn-bg:#3C3222; --tag-warn:#E8D3B9; --tag-info-bg:#2B2A3B; --tag-info:#C5C0E0;
  --soft:rgba(255,255,255,.07); --soft-hover:rgba(255,255,255,.12);
  --on-tint-line:rgba(255,255,255,.2); --on-tint-bar:rgba(255,255,255,.14);
}
html[data-theme=dark] .sheet{box-shadow:0 26px 70px rgba(0,0,0,.6)}
html[data-theme=dark] .overlay,html[data-theme=dark] .scrim{background:rgba(0,0,0,.62)}

*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light}
body{font-family:var(--sans);background:var(--canvas);color:var(--ink);min-height:100vh;font-size:var(--t-md);line-height:1.4;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none;cursor:pointer}
a:hover{color:var(--ink);text-decoration:underline}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:var(--t-md);color:var(--ink)}
.num{font-variant-numeric:tabular-nums}
.serif{font-family:var(--serif);font-weight:400}
.muted{color:var(--muted)} .faint{color:var(--faint)} .pos{color:var(--green);font-weight:600} .neg{color:var(--clay-text)}
.hidden{display:none!important}
[hidden]{display:none!important}
.pretty{text-wrap:pretty}

/* ---------- login ---------- */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
#login .card{width:100%;max-width:380px;padding:28px}
#login h1{font-size:var(--t-2xl);font-weight:700;display:flex;align-items:center;gap:10px;margin-bottom:6px}
#login .brand-mark{width:26px;height:26px;border-radius:var(--r-sm);background:var(--panel-mint)}
#login p{color:var(--muted);margin-bottom:18px}
#login .field{margin-bottom:12px}
#login .err{color:var(--clay-text);font-size:var(--t-sm);min-height:16px;margin-top:8px}
#login .btn{width:100%;margin-top:6px;padding:12px}
#login .err.ok{color:var(--sage-deep)}
.login-links{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:var(--t-sm)}
.login-foot{margin-top:18px;text-align:center;font-size:var(--t-xs);color:var(--muted)} .login-foot a{color:var(--muted)}
/* plain text pages (privacy.html) */
.doc{max-width:680px;margin:0 auto;padding:36px 20px 60px;font-size:var(--t-lg);line-height:1.55}
.doc h1{display:flex;align-items:center;gap:10px;font-size:var(--t-3xl);font-weight:700;margin:10px 0 6px}
.doc h2{font-size:var(--t-xl);font-weight:700;margin:28px 0 8px}
.doc p,.doc ul{margin:0 0 10px} .doc ul{padding-left:22px} .doc li{margin-bottom:6px}
.doc-back{font-size:var(--t-sm);color:var(--muted)}
.steps{margin:12px 0 0 18px;display:flex;flex-direction:column;gap:8px;font-size:var(--t-md);line-height:1.45}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--t-xs);background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-xs);padding:1px 5px;white-space:nowrap}

/* ---------- app frame ---------- */
#app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex:none;background:var(--panel);color:var(--on-ink);padding:24px 0;display:flex;flex-direction:column;gap:28px;position:sticky;top:0;height:100vh}
.brand{padding:0 20px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:var(--t-lg);letter-spacing:-.01em}
.brand-mark{width:26px;height:26px;border-radius:var(--r-sm);background:var(--panel-mint);flex:none}
.nav{display:flex;flex-direction:column;font-size:var(--t-md)}
.nav button{text-align:left;padding:10px 20px;color:var(--on-ink-muted);border-left:2px solid transparent}
.nav button:hover{background:var(--panel-raised)}
.nav button.active{background:var(--panel-raised);color:var(--on-ink);font-weight:600;border-left-color:var(--panel-mint)}
.side-foot{margin-top:auto;padding:0 20px}
.side-foot .lbl{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--on-ink-muted)}
.side-foot .rate{font-family:var(--serif);font-size:var(--t-4xl);color:var(--panel-mint);margin-top:2px;line-height:1.1}
.side-foot .spark{display:flex;gap:3px;align-items:flex-end;height:28px;margin-top:10px}
.side-foot .spark i{flex:1;border-radius:2px;background:color-mix(in srgb,var(--on-ink) 16%,var(--panel));display:block}
.side-foot .who{margin-top:18px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--on-ink) 12%,var(--panel));display:flex;align-items:center;gap:9px;font-size:var(--t-sm);color:var(--on-ink-muted)}
.side-foot .avatar{width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--panel-mint) 38%,var(--panel));display:flex;align-items:center;justify-content:center;font-size:var(--t-xs);font-weight:700;color:var(--on-ink)}
.side-foot .rate.neg{color:#F0A398}
.side-foot .signout{display:block;margin-top:10px;padding-left:35px;color:var(--on-ink-muted);text-decoration:underline;font-size:var(--t-xs)}
.side-foot .signout:hover{color:var(--on-ink)}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:none}

/* page header */
.page-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 26px;background:var(--raised);border-bottom:1px solid var(--rule);flex-wrap:wrap}
.page-header .title{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.page-header h1{font-size:var(--t-2xl);font-weight:700}
.page-header .ctx{font-size:var(--t-sm);color:var(--muted)}
.page-header .actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.page-body{padding:22px 26px;display:flex;flex-direction:column;gap:16px}

/* ---------- buttons, pills, chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:600;background:var(--prime);color:var(--on-prime);white-space:nowrap;min-height:40px}
.btn:hover{background:var(--prime-hover)}
.btn.secondary{background:var(--surface);border:1px solid var(--border-strong);color:var(--ink-muted);font-weight:400;padding:10px 17px}
.btn.secondary:hover{background:var(--raised)}
.btn.green{background:var(--accent-btn);color:var(--on-accent-btn);border-radius:var(--r-md);padding:9px 16px;min-height:38px}
.btn.green:hover{background:var(--sage-hover)}
.btn.square{border-radius:var(--r-md);padding:9px 15px}
.btn.danger{background:var(--surface);border:1px solid var(--border-strong);color:var(--clay-text);font-weight:500}
.btn.danger:hover{background:var(--tag-alert-bg)}
.btn.soft{background:var(--soft);border-radius:var(--r-md);padding:9px 15px;font-weight:400;color:var(--ink)}
.btn.soft:hover{background:var(--soft-hover)}
.btn:disabled{opacity:.5;cursor:default}
.iconbtn{width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-md);color:var(--muted)}
.iconbtn:hover{background:var(--canvas)}
.arrows{display:flex;gap:4px}
.arrows button{width:36px;height:36px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border-strong);color:var(--ink-muted);font-size:var(--t-lg);line-height:1}
.arrows button:hover{background:var(--raised)}

.pills{display:inline-flex;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:3px;font-size:var(--t-sm)}
.pills button{padding:7px 15px;border-radius:var(--r-pill);color:var(--muted);font-weight:500;min-height:34px}
.pills button.active{background:var(--prime);color:var(--on-prime);font-weight:600}
.pills.dark{background:transparent;border:0;padding:0;gap:6px}
.pills.dark button{padding:6px 12px;font-size:var(--t-xs);border:1px solid color-mix(in srgb,var(--on-ink) 18%,var(--panel));color:var(--on-ink-muted);min-height:0}
.pills.dark button.active{background:var(--panel-raised);border-color:var(--panel-raised);color:var(--on-ink)}

.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);color:var(--ink-muted);font-size:var(--t-sm);min-height:36px;white-space:nowrap}
.chip:hover{background:var(--raised)}
.chip.active{background:var(--prime);border-color:var(--prime);color:var(--on-prime);font-weight:500}
.chip.dashed{border-style:dashed;border-color:var(--dashed);color:var(--muted)}
.chip .count{color:var(--clay-text)}
.chip select{border:0;background:transparent;font-size:var(--t-sm);color:inherit;cursor:pointer;max-width:170px;padding:0}
.chip select:focus{outline:none} .chip:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.swatch{width:8px;height:8px;border-radius:2px;display:inline-block;flex:none}
.swatch.lg{width:9px;height:9px;border-radius:3px}
.tag{font-size:var(--t-xs);padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap}
.tag.work,.tag.ok{background:var(--tag-ok-bg);color:var(--tag-ok)}
.tag.alert{background:var(--tag-alert-bg);color:var(--tag-alert)}
.tag.warn{background:var(--tag-warn-bg);color:var(--tag-warn)}
.tag.info{background:var(--tag-info-bg);color:var(--tag-info)}
.divider-v{width:1px;height:22px;background:var(--rule);margin:0 4px}

/* ---------- cards & grids ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:18px 20px}
.card.kpi{padding:17px 18px}
.card.mint{background:var(--mint);border-color:var(--mint-border)}
.card.sand{background:var(--sand);border-color:var(--sand-border)}
.card.ink{background:var(--panel);border:1px solid var(--panel-border);color:var(--on-ink);padding:22px 24px}
.card.flush{padding:0;overflow:hidden}
.card.clickable{cursor:pointer}
.card.clickable:hover{border-color:var(--dashed)}
.card h3{font-size:var(--t-lg);font-weight:600}
.card .head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.card .head.tight{margin-bottom:6px}
.kpi .lbl{font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kpi .val{font-family:var(--serif);font-size:var(--t-3xl);margin-top:6px;line-height:1.15;white-space:nowrap}
.kpi .sub{font-size:var(--t-sm);color:var(--muted);margin-top:2px}
.kpi.mint .lbl,.kpi.mint .sub{color:var(--sage-deep)}
.kpi.sand .lbl,.kpi.sand .sub{color:var(--sand-text)}
.grid{display:grid;gap:12px}
.grid.c5{grid-template-columns:repeat(5,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.split{grid-template-columns:1.6fr 1fr}
.grid.split-b{grid-template-columns:1.3fr 1fr}
.grid.split-c{grid-template-columns:1.35fr 1fr}
.grid.split-d{grid-template-columns:1.25fr 1fr}
.stack{display:flex;flex-direction:column;gap:12px}
.rows{display:flex;flex-direction:column;gap:11px;font-size:var(--t-md)}
.rows .r{display:flex;justify-content:space-between;gap:12px;align-items:center}
.rows .r.total{padding-top:9px;border-top:1px solid var(--track);color:var(--muted)}
.rows .r.total.strong{font-weight:600;color:inherit}
.card.sand .rows .r.total{border-top-color:var(--on-tint-line);color:var(--sand-text)}
.card.mint .rows .r.total{border-top-color:var(--on-tint-line)}
.empty{color:var(--muted);font-size:var(--t-md);text-align:center;padding:18px 10px;display:flex;flex-direction:column;gap:10px;align-items:center}
.empty.left{text-align:left;align-items:flex-start;padding:4px 0}
.legend{display:flex;gap:14px;font-size:var(--t-xs);color:var(--muted);flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:5px}

/* ---------- bars & charts ---------- */
.bar{height:7px;background:var(--track);border-radius:var(--r-xs);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:var(--r-xs);background:var(--sage)}
.bar.h9{height:9px;border-radius:var(--r-xs)} .bar.h8{height:8px} .bar.h10{height:10px;border-radius:var(--r-xs);overflow:visible;position:relative}
.bar.h10>i{border-radius:var(--r-xs)}
.bar .pace{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--faint)}
.card.mint .bar{background:var(--on-tint-bar)}
.propbar{display:flex;height:10px;border-radius:var(--r-xs);overflow:hidden;background:var(--track)}
.propbar i{display:block;height:100%}
.chart{display:flex;align-items:flex-end;gap:5px;position:relative}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.chart .col i{display:block;width:100%;border-radius:3px 3px 0 0}
.chart .col.dim{opacity:.4}
.chart.groups{gap:16px}
.chart.groups .col{flex-direction:row;gap:3px;align-items:flex-end}
.chart.groups .col i{flex:1}
.chart.flow{align-items:stretch;gap:5px}
.chart.flow .zero{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--border-strong)}
.chart.flow .col{justify-content:flex-start}
.chart.flow .half{flex:1;display:flex}
.chart.flow .half.top{align-items:flex-end}
.chart.flow .half.bot{align-items:flex-start}
.chart.flow .half i{width:100%;display:block}
.chart.flow .half.top i{border-radius:2px 2px 0 0}
.chart.flow .half.bot i{border-radius:0 0 2px 2px}
.axis{display:flex;justify-content:space-between;margin-top:8px;font-size:var(--t-xs);color:var(--faint)}
.axis.spread{justify-content:flex-start;gap:16px}
.axis.spread span{flex:1;text-align:center}
.axis .now{color:var(--ink);font-weight:600}
.card.ink .axis{color:var(--on-ink-muted)} .card.ink .axis .now{color:var(--on-ink)}
.spark{display:flex;align-items:flex-end;gap:3px;height:40px}
.spark i{flex:1;border-radius:2px;background:var(--track);display:block}

/* ---------- tables ---------- */
.table{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.table .trow,.table .thead,.table .tfoot{display:grid;align-items:center;column-gap:12px;padding:13px 18px}
.table .thead{padding:12px 18px;background:var(--raised);border-bottom:1px solid var(--border);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.table .trow{border-bottom:1px solid var(--border-faint);font-size:var(--t-md)}
.table .trow:last-child{border-bottom:0}
.table .trow.clickable{cursor:pointer}
.table .trow.clickable:hover{background:var(--sunken)}
.table .tgroup{padding:9px 18px;font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:var(--sunken);border-bottom:1px solid var(--track);border-top:1px solid var(--track)}
.table .tfoot{background:var(--raised);border-top:1px solid var(--border);font-size:var(--t-sm);color:var(--muted);display:flex;justify-content:space-between}
.table .tfoot.strong{font-weight:600;color:var(--ink);font-size:var(--t-md)}
.table .r{text-align:right}
.table .date{color:var(--faint)}
.table .cat{color:var(--ink-muted)} .table .acct{color:var(--muted)}
.table .uncat{color:var(--clay-text)}
.tx-cols{grid-template-columns:82px 1fr 150px 150px 120px}
.budget-cols{grid-template-columns:190px 1fr 110px 110px 110px}
.budget-cols .trow{padding:16px 20px}
.sub-cols{grid-template-columns:1fr 130px 110px 110px}
.yoy-cols{grid-template-columns:1fr 120px 120px 110px}
.pager{display:flex;gap:8px;align-items:center}
.pager button{padding:5px 11px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--ink)}
.pager button:hover{background:var(--canvas)}
.pager button.dark{background:var(--prime);color:var(--on-prime);border-color:var(--prime)}
.pager button.dark:hover{background:var(--prime-hover)}
.pager button:disabled{opacity:.4;cursor:default}
.catchip{display:inline-flex;align-items:center;gap:7px;cursor:pointer;border-radius:var(--r-sm);padding:2px 6px;margin-left:-6px}
.catchip:hover{background:var(--raised)}
.inline-select{border:0;background:transparent;color:var(--muted);font-size:var(--t-md);cursor:pointer;max-width:100%;padding:2px 0}
.inline-select:hover{color:var(--ink)}

/* quick add */
.quick{background:var(--surface);border:1px dashed var(--dashed);border-radius:var(--r-xl);padding:14px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.quick .lbl{flex:none;font-size:var(--t-xs);font-weight:600;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.quick input,.quick select{padding:9px 12px;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--t-sm);min-height:38px}
.quick input::placeholder{color:var(--faint)}
.quick .desc{flex:1;min-width:160px}
.quick .amt{width:110px;text-align:right}
.quick .date{width:130px}
.filters{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.filters .left{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filters .sum{display:flex;gap:18px;font-size:var(--t-sm);color:var(--muted);white-space:nowrap}
.searchbox{flex:1;min-width:180px}
.search{width:100%;padding:7px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);font-size:var(--t-sm);min-height:36px}
.search::placeholder{color:var(--faint)}
.search:focus{outline:2px solid var(--ink);outline-offset:1px}
.rangebar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:12px 16px;font-size:var(--t-sm);color:var(--muted)}
.rangebar label{display:inline-flex;align-items:center;gap:8px}
.rangebar input{padding:7px 10px;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--t-sm);min-height:36px}
@media (max-width:720px){.searchbox{flex-basis:100%}.filters .sum{flex-wrap:wrap}}

/* ---------- sheets ---------- */
.overlay{position:fixed;inset:0;background:rgba(28,27,25,.44);display:flex;align-items:flex-start;justify-content:center;padding:56px 16px;z-index:20;overflow-y:auto}
.sheet{width:100%;max-width:560px;background:var(--surface);border-radius:var(--r-2xl);overflow:hidden;box-shadow:0 26px 70px rgba(28,27,25,.3);animation:rise .15s ease-out}
.sheet.w640{max-width:640px} .sheet.w600{max-width:600px} .sheet.w520{max-width:520px} .sheet.w500{max-width:500px} .sheet.w540{max-width:540px}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sheet .s-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px;background:var(--raised);border-bottom:1px solid var(--border)}
.sheet .s-head h2{font-size:var(--t-xl);font-weight:700}
.sheet .s-head .sub{font-size:var(--t-sm);color:var(--muted);margin-top:2px}
.sheet .s-body{padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.sheet .s-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 24px;background:var(--raised);border-top:1px solid var(--border);flex-wrap:wrap}
.sheet .s-foot .note{font-size:var(--t-sm);color:var(--muted);flex:1;min-width:160px}
.sheet .s-foot .btns{display:flex;gap:9px;margin-left:auto;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label,.flabel{font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{padding:12px 14px;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-lg);font-size:var(--t-md);width:100%;min-height:44px}
.field input:focus,.field select:focus,.quick input:focus,.quick select:focus,#login input:focus{outline:2px solid var(--ink);outline-offset:1px}
.field input.money{font-family:var(--serif);font-size:var(--t-2xl);padding:8px 14px}
.field .hint{font-size:var(--t-sm);color:var(--muted)}
.frow{display:flex;gap:12px} .frow>*{flex:1;min-width:0} .frow>.w2{flex:1.4}
.segs{display:flex;background:var(--canvas);border-radius:var(--r-pill);padding:4px;font-size:var(--t-md)}
.segs button{flex:1;text-align:center;padding:9px 0;border-radius:var(--r-pill);color:var(--muted);font-weight:500}
.segs button.active{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(28,27,25,.12)}
.amount-box{flex:1;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-xl);padding:16px 18px;min-width:0}
.amount-box .in{display:flex;align-items:baseline;gap:5px;margin-top:4px}
.amount-box .sign{font-family:var(--serif);font-size:var(--t-3xl);color:var(--faint);white-space:nowrap;flex:none}
.amount-box input{font-family:var(--serif);font-size:var(--t-5xl);line-height:1.05;border:0;background:transparent;width:100%;min-width:0;padding:0;caret-color:var(--sage)}
.amount-box input:focus{outline:none}
.side-fields{width:200px;display:flex;flex-direction:column;gap:10px;flex:none}
.side-fields .field input,.side-fields .field select{padding:8px 14px;min-height:0;font-size:var(--t-md)}
.chips{display:flex;flex-wrap:wrap;gap:8px;font-size:var(--t-md)}
.chips .chip{padding:8px 14px}
.typegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;font-size:var(--t-sm)}
.typegrid button{padding:14px 12px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);text-align:left}
.typegrid button:hover{background:var(--raised)}
.typegrid button.active{background:var(--prime);color:var(--on-prime);border-color:var(--prime)}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.swatches button{width:30px;height:30px;border-radius:var(--r-md)}
.swatches button.active{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.toggle,.field label.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--t-md);color:var(--muted);user-select:none;text-transform:none;letter-spacing:0;font-weight:400}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle .knob{width:42px;height:24px;border-radius:var(--r-pill);background:var(--neutral-2);padding:3px;display:flex;transition:background .15s}
.toggle .knob::after{content:"";width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}
.toggle input:checked+.knob{background:var(--sage)}
.toggle input:checked+.knob::after{transform:translateX(18px)}
.note-box{background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;font-size:var(--t-sm);color:var(--muted)}
.note-box.sand{background:var(--sand);border-color:var(--sand);color:var(--sand-text-3)}
.note-box.mint{background:var(--mint);border-color:var(--mint);color:var(--sage-deep);display:flex;justify-content:space-between;align-items:center;gap:14px}
.note-box.mint .big{font-family:var(--serif);font-size:var(--t-4xl);color:var(--ink);white-space:nowrap}
.note-box.mint .big small{font-family:var(--sans);font-size:var(--t-lg);color:var(--sage-deep)}
.slider{width:100%;accent-color:var(--plum)}
.result3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.result3 .card{padding:14px 16px}
.result3 .card .lbl{font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.result3 .card .val{font-family:var(--serif);font-size:var(--t-3xl);margin-top:4px}
.result3 .card.mint .lbl{color:var(--sage-deep)}
.list-rows{display:flex;flex-direction:column;gap:10px}
.list-rows .lr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-lg)}
.list-rows .lr .t{font-weight:600}
.list-rows .lr .s{font-size:var(--t-sm);color:var(--muted)}

/* statement import */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 18px;background:var(--sunken);border:1px dashed var(--dashed);border-radius:var(--r-xl);text-align:center;cursor:pointer;font-size:var(--t-md)}
.dropzone:hover,.dropzone.over{background:var(--raised);border-color:var(--ink)}
.dropzone.busy{cursor:progress;opacity:.7}
.dropzone .muted{font-size:var(--t-sm)}
.ilist{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;max-height:52vh;overflow-y:auto}
.irow{display:grid;grid-template-columns:22px 60px 1fr 150px 96px;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--border-faint);font-size:var(--t-sm)}
.irow:last-child{border-bottom:0}
.irow.head{position:sticky;top:0;background:var(--raised);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);z-index:1}
.irow.off .d,.irow.off .amt,.irow.off .date{opacity:.45}
.irow .d{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.irow .d .tag{margin-left:6px}
.irow .amt{text-align:right}
.irow .date{color:var(--faint)}
.irow input[type=checkbox]{accent-color:var(--ink);width:16px;height:16px}
.irow select{font-size:var(--t-sm);color:var(--ink-muted)}
@media (max-width:720px){
  .irow{grid-template-columns:22px 1fr auto;grid-template-areas:"box desc amt" "box date date" "box cat cat";row-gap:3px}
  .irow input[type=checkbox]{grid-area:box}.irow .d{grid-area:desc;white-space:normal}.irow .amt{grid-area:amt}.irow .date{grid-area:date;font-size:var(--t-xs)}.irow select{grid-area:cat;justify-self:start}
  .irow.head{grid-template-columns:22px 1fr auto;grid-template-areas:"box desc amt"}.irow.head span:nth-child(2),.irow.head span:nth-child(4){display:none}
}

/* split editor */
.splitbox{display:flex;flex-direction:column}
.split-row{align-items:center;gap:8px;margin-bottom:8px}
.split-row select,.split-row input{padding:9px 12px;min-height:40px;border-radius:var(--r-md);background:var(--sunken);border:1px solid var(--border);font-size:var(--t-md)}
.split-row select{flex:1;min-width:0}
.split-row input{flex:0 0 120px;width:120px;text-align:right;font-family:var(--serif);font-size:var(--t-lg)}
.split-row .iconbtn{flex:none}
@media (max-width:720px){.split-row input{flex-basis:100px;width:100px}}

/* settings choices */
.choices{display:flex;flex-direction:column;gap:8px}
.choice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-lg);cursor:pointer;font-size:var(--t-md)}
.choice:hover{background:var(--raised)}
.choice input{margin-top:3px;accent-color:var(--ink);flex:none}
.choice span{display:flex;flex-direction:column;gap:2px}
.choice span .muted{font-size:var(--t-sm)}
.choice:has(input:checked){border-color:var(--ink)}

/* toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--panel);border:1px solid var(--panel-border);color:var(--on-ink);padding:10px 16px;border-radius:var(--r-pill);font-size:var(--t-sm);z-index:30;box-shadow:0 8px 24px rgba(28,27,25,.25);display:flex;align-items:center;gap:14px}
#toast[hidden]{display:none}
.toast-act{color:var(--panel-mint);font-weight:600;text-decoration:underline;padding:0}
.toast-act:hover{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .grid.c5{grid-template-columns:repeat(3,1fr)}
  .grid.c4{grid-template-columns:repeat(2,1fr)}
  .grid.split,.grid.split-b,.grid.split-c,.grid.split-d{grid-template-columns:1fr}
  .side-fields{width:160px}
}
@media (max-width:1000px){
  #app{flex-direction:column}
  .sidebar{position:fixed;left:0;top:0;bottom:0;height:100vh;transform:translateX(-100%);transition:transform .15s;z-index:25;width:240px}
  .sidebar.open{transform:none;box-shadow:0 0 60px rgba(28,27,25,.4)}
  .scrim{position:fixed;inset:0;background:rgba(28,27,25,.44);z-index:24}
  .topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel);color:var(--on-ink);position:sticky;top:0;z-index:10}
  .topbar .menu{width:36px;height:36px;border-radius:var(--r-md);background:var(--panel-raised);color:var(--on-ink);font-size:var(--t-xl);display:flex;align-items:center;justify-content:center}
  .topbar .brand{padding:0;font-size:var(--t-lg)}
  .topbar .pagename{margin-left:auto;color:var(--on-ink-muted);font-size:var(--t-sm)}
  .page-header,.page-body{padding-left:16px;padding-right:16px}
}
@media (max-width:720px){
  .grid.c5,.grid.c4,.grid.c3,.grid.c2{grid-template-columns:1fr 1fr}
  .kpi .val{font-size:var(--t-3xl)}
  .page-header h1{font-size:var(--t-xl)}
  .page-header .actions{width:100%}
  .filters .sum{width:100%;justify-content:space-between}
  .table .thead{display:none}
  .table .trow{grid-template-columns:1fr auto!important;row-gap:2px}
  .table .trow>*{min-width:0}
  .table .trow .r{grid-column:2;grid-row:1}
  .table .trow .date{grid-column:1;grid-row:2;font-size:var(--t-xs)}
  .table .trow .cat,.table .trow .acct{grid-column:1 / -1;font-size:var(--t-sm)}
  .budget-cols .trow{grid-template-columns:1fr auto!important}
  .budget-cols .trow .prog{grid-column:1 / -1}
  .budget-cols .trow .lft{grid-column:2}
  .amount-box input{font-size:var(--t-4xl)}
  .side-fields{width:100%}
  .sheet .frow.entry{flex-direction:column}
  .frow{flex-wrap:wrap} .frow>*{flex-basis:45%}
  .overlay{padding:0;align-items:flex-end}
  .sheet{max-width:100%!important;border-radius:var(--r-2xl) 18px 0 0;max-height:96vh;overflow-y:auto}
  .result3{grid-template-columns:1fr}
  .typegrid{grid-template-columns:1fr 1fr}
  .quick .date,.quick .amt{width:48%}
}
@media (max-width:420px){
  .grid.c5,.grid.c4,.grid.c3,.grid.c2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- look options (Settings → Appearance) ---------- */
.choices.row{flex-direction:row;flex-wrap:wrap} .choices.row .choice{padding:9px 12px;align-items:center} .choices.row .choice input{margin-top:0}
html[data-font=clean]{--sans:'Inter',system-ui,sans-serif}
html[data-font=system]{--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
html[data-size=large] body{zoom:1.08}
html[data-size=larger] body{zoom:1.16}

/* ---------- Reports → Explore ---------- */
.rangebar.explore{border:0;padding:0;background:transparent}
.rangebar select{padding:7px 10px;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--t-sm);min-height:36px;max-width:170px}
.rangebar.explore .search{flex:1;min-width:200px}
.rep-cols{grid-template-columns:minmax(140px,1fr) 70px 110px 110px 120px;min-width:560px}
.section-title{font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:10px}
.rows .r.clickable{cursor:pointer;border-radius:var(--r-sm);margin:0 -6px;padding:4px 6px} .rows .r.clickable:hover{background:var(--raised)}

/* ---------- Overview extras ---------- */
.cmprow{display:grid;grid-template-columns:minmax(90px,130px) 1fr auto;gap:10px;align-items:center;font-size:var(--t-sm);margin-bottom:10px}
.cmprow .bars{display:flex;flex-direction:column;gap:3px} .cmprow .bars i{display:block;height:7px;border-radius:var(--r-xs);min-width:2px}

/* ---------- colour themes (Settings → Appearance). Treasury is the default :root palette above.
   Generated from a short spec per theme: neutral hue, main colour, card colour, sidebar colour. ---------- */
html[data-palette=ocean]:not([data-theme=dark]){--canvas:#E2E8EC;--raised:#EEF1F4;--sunken:#F6F8F9;--surface:#FEFEFE;--ink:#171B1F;--ink-hover:#2B3136;--ink-raised:#22272B;--ink-muted:#3B464E;--muted:#4C5861;--faint:#606D76;--on-ink:#EDF0F2;--on-ink-muted:#9DA9B4;--border:#D9E0E6;--border-strong:#D1DAE0;--rule:#CDD6DD;--border-faint:#E8EDF0;--dashed:#B3C1CC;--track:#DDE4E9;--neutral:#C3CFD7;--neutral-2:#CDD6DD;--sage:#3F7FA6;--sage-hover:#356B8C;--sage-deep:#324957;--mint:#CBD6DC;--mint-border:#B4C2CB;--panel-mint:#C7D4DB;--link:#314D5E;--sand:#EADDC3;--sand-border:#DBCAA9;--sand-text:#584F3C;--sand-text-2:#584F3C;--sand-text-3:#40392B;--panel:#12273A;--panel-raised:#1A3955;--panel-border:transparent;--prime:#171B1F;--prime-hover:#2B3136;--on-prime:#F1F2F3;--tag-ok-bg:#EAEEF0;--tag-ok:#324957;--tag-warn-bg:#F3EFE7;--tag-warn:#584F3C}
html[data-theme=dark][data-palette=ocean]{--canvas:#121619;--raised:#1B2125;--sunken:#161B1F;--surface:#1E2529;--ink:#E3E6E8;--ink-hover:#FAFAFA;--ink-raised:#242D32;--ink-muted:#C6CACD;--muted:#A5ACB1;--faint:#8C959C;--on-ink:#EFF0F1;--on-ink-muted:#A1A6AA;--border:#2B343B;--border-strong:#313C44;--rule:#2F3A41;--border-faint:#232B31;--dashed:#4A565E;--track:#293238;--neutral:#424E57;--neutral-2:#39444C;--sage:#74A2BE;--sage-hover:#8DB2C9;--sage-deep:#BDCCD5;--mint:#2B353B;--mint-border:#3A4750;--panel-mint:#C2CFD6;--link:#A9BECB;--sand:#41392A;--sand-border:#574D38;--sand-text:#E0D8C7;--sand-text-2:#D2C9B6;--sand-text-3:#EEEAE3;--panel:#080E14;--panel-raised:#17222C;--panel-border:#202C37;--prime:#DEE1E3;--prime-hover:#F4F5F5;--on-prime:#141A1F;--tag-ok-bg:#273035;--tag-ok:#BDCCD5;--tag-warn-bg:#3A3427;--tag-warn:#E0D8C7}
html[data-palette=forest]:not([data-theme=dark]){--canvas:#E6EAE3;--raised:#F1F3EF;--sunken:#F7F8F6;--surface:#FEFEFE;--ink:#1A1F17;--ink-hover:#2F362B;--ink-raised:#252B22;--ink-muted:#444C3E;--muted:#555E4F;--faint:#6A7364;--on-ink:#EEF1EF;--on-ink-muted:#A2AEA6;--border:#DEE4DB;--border-strong:#D8DED3;--rule:#D4DBCF;--border-faint:#EBEFE9;--dashed:#BEC8B6;--track:#E2E7DF;--neutral:#CCD4C6;--neutral-2:#D4DBCF;--sage:#3E7D4F;--sage-hover:#326540;--sage-deep:#37533E;--mint:#CDDAD1;--mint-border:#B7C8BB;--panel-mint:#C9D9CE;--link:#375840;--sand:#E7DBC6;--sand-border:#D7C7AD;--sand-text:#564D3E;--sand-text-2:#564D3E;--sand-text-3:#3E382D;--panel:#15251A;--panel-raised:#223C2A;--panel-border:transparent;--prime:#1A1F17;--prime-hover:#2F362B;--on-prime:#F2F3F2;--tag-ok-bg:#EBF0EC;--tag-ok:#37533E;--tag-warn-bg:#F2EEE8;--tag-warn:#564D3E}
html[data-theme=dark][data-palette=forest]{--canvas:#151813;--raised:#1F231C;--sunken:#1A1E18;--surface:#232820;--ink:#E5E7E4;--ink-hover:#FAFAFA;--ink-raised:#2B3026;--ink-muted:#C9CCC7;--muted:#AAAFA7;--faint:#93998F;--on-ink:#F0F0EF;--on-ink-muted:#A5A9A3;--border:#32392D;--border-strong:#3A4134;--rule:#373E32;--border-faint:#292F25;--dashed:#535B4D;--track:#30362B;--neutral:#4B5445;--neutral-2:#41493C;--sage:#7EB48C;--sage-hover:#94C2A0;--sage-deep:#C0D2C5;--mint:#2D3930;--mint-border:#3D4D41;--panel-mint:#C4D4C8;--link:#ADC7B4;--sand:#3F382C;--sand-border:#544B3B;--sand-text:#DED6C9;--sand-text-2:#D0C7B9;--sand-text-3:#EDE9E3;--panel:#0B110D;--panel-raised:#1C271F;--panel-border:#253129;--prime:#E0E2DF;--prime-hover:#F5F5F4;--on-prime:#191D16;--tag-ok-bg:#28332B;--tag-ok:#C0D2C5;--tag-warn-bg:#383329;--tag-warn:#DED6C9}
html[data-palette=plum]:not([data-theme=dark]){--canvas:#E9E4EA;--raised:#F2EFF3;--sunken:#F8F6F8;--surface:#FEFEFE;--ink:#1D181E;--ink-hover:#342B36;--ink-raised:#29222B;--ink-muted:#493F4B;--muted:#5B505D;--faint:#6F6572;--on-ink:#F0EFF1;--on-ink-muted:#AAA3AE;--border:#E2DBE3;--border-strong:#DCD4DD;--rule:#D8D0DA;--border-faint:#EDEAEE;--dashed:#C4B8C7;--track:#E5E0E6;--neutral:#D1C7D3;--neutral-2:#D8D0DA;--sage:#8A5A94;--sage-hover:#754D7E;--sage-deep:#4B3B4F;--mint:#D7CFD8;--mint-border:#C3B9C5;--panel-mint:#D5CCD7;--link:#4F3B54;--sand:#E7C5D0;--sand-border:#D8ACBB;--sand-text:#563E46;--sand-text-2:#563E46;--sand-text-3:#3F2D33;--panel:#281C2E;--panel-raised:#3B2A44;--panel-border:transparent;--prime:#1D181E;--prime-hover:#342B36;--on-prime:#F3F2F3;--tag-ok-bg:#EEEBEF;--tag-ok:#4B3B4F;--tag-warn-bg:#F2E8EB;--tag-warn:#563E46}
html[data-theme=dark][data-palette=plum]{--canvas:#171418;--raised:#221D23;--sunken:#1C181D;--surface:#262027;--ink:#E6E4E7;--ink-hover:#FAFAFA;--ink-raised:#2E2730;--ink-muted:#CBC7CC;--muted:#ADA7AE;--faint:#978F99;--on-ink:#F0EFF0;--on-ink-muted:#A8A3A8;--border:#362E38;--border-strong:#3E3540;--rule:#3C333D;--border-faint:#2D262E;--dashed:#584E5A;--track:#342C35;--neutral:#514653;--neutral-2:#463D48;--sage:#A685AD;--sage-hover:#B69ABB;--sage-deep:#CEC3D0;--mint:#362F37;--mint-border:#493F4B;--panel-mint:#D0C6D2;--link:#C0B1C3;--sand:#402B32;--sand-border:#553A43;--sand-text:#DFC9D0;--sand-text-2:#D1B8C0;--sand-text-3:#EDE3E6;--panel:#0F0B11;--panel-raised:#231C26;--panel-border:#2D2631;--prime:#E1DFE2;--prime-hover:#F5F4F5;--on-prime:#1C161D;--tag-ok-bg:#302A32;--tag-ok:#CEC3D0;--tag-warn-bg:#39282E;--tag-warn:#DFC9D0}
html[data-palette=clay]:not([data-theme=dark]){--canvas:#EDE6E1;--raised:#F4F0EE;--sunken:#F9F7F6;--surface:#FEFEFE;--ink:#1F1A17;--ink-hover:#362F2B;--ink-raised:#2B2522;--ink-muted:#504339;--muted:#63554A;--faint:#78695E;--on-ink:#F1EFEE;--on-ink-muted:#B0A5A1;--border:#E7DED7;--border-strong:#E2D7D0;--rule:#DFD3CB;--border-faint:#F0EBE7;--dashed:#CFBDB0;--track:#EAE2DC;--neutral:#D9CBC1;--neutral-2:#DFD3CB;--sage:#B8603F;--sage-hover:#9D5236;--sage-deep:#593C31;--mint:#DDCFCA;--mint-border:#CCBAB3;--panel-mint:#DCCCC6;--link:#603C2F;--sand:#EDDFC0;--sand-border:#DECDA5;--sand-text:#5A503A;--sand-text-2:#5A503A;--sand-text-3:#413A2A;--panel:#2D1D16;--panel-raised:#452C22;--panel-border:transparent;--prime:#1F1A17;--prime-hover:#362F2B;--on-prime:#F3F2F1;--tag-ok-bg:#F1ECEA;--tag-ok:#593C31;--tag-warn-bg:#F4F0E6;--tag-warn:#5A503A}
html[data-theme=dark][data-palette=clay]{--canvas:#1A1512;--raised:#261F1A;--sunken:#201A16;--surface:#2B231D;--ink:#E8E5E3;--ink-hover:#FAFAFA;--ink-raised:#342A23;--ink-muted:#CEC9C5;--muted:#B2AAA4;--faint:#9D928B;--on-ink:#F1F0EF;--on-ink-muted:#ABA5A0;--border:#3D3129;--border-strong:#46392F;--rule:#43362D;--border-faint:#322922;--dashed:#605248;--track:#3A2F27;--neutral:#594A40;--neutral-2:#4D4037;--sage:#C18771;--sage-hover:#CC9C8A;--sage-deep:#D7C3BC;--mint:#3C2F2A;--mint-border:#513F39;--panel-mint:#D7C7C1;--link:#CDB2A8;--sand:#433B28;--sand-border:#594E36;--sand-text:#E2D9C5;--sand-text-2:#D4CBB4;--sand-text-3:#EEEBE2;--panel:#120D0A;--panel-raised:#281E1A;--panel-border:#332824;--prime:#E3E0DE;--prime-hover:#F5F5F4;--on-prime:#201813;--tag-ok-bg:#362A26;--tag-ok:#D7C3BC;--tag-warn-bg:#3B3526;--tag-warn:#E2D9C5}
html[data-palette=rose]:not([data-theme=dark]){--canvas:#ECE2E4;--raised:#F4EEF0;--sunken:#F9F6F7;--surface:#FEFEFE;--ink:#1F1719;--ink-hover:#362B2E;--ink-raised:#2B2224;--ink-muted:#4E3B40;--muted:#614C51;--faint:#766066;--on-ink:#F1EEEF;--on-ink-muted:#AFA2A7;--border:#E6D9DC;--border-strong:#E0D1D5;--rule:#DDCDD1;--border-faint:#F0E8EA;--dashed:#CCB3B9;--track:#E9DDE0;--neutral:#D7C3C8;--neutral-2:#DDCDD1;--sage:#B5536E;--sage-hover:#A0455E;--sage-deep:#55343D;--mint:#DBCCD0;--mint-border:#C9B5BB;--panel-mint:#DAC8CD;--link:#5B333E;--sand:#EBD5C1;--sand-border:#DDC0A7;--sand-text:#59493B;--sand-text-2:#59493B;--sand-text-3:#41352A;--panel:#2C1820;--panel-raised:#432531;--panel-border:transparent;--prime:#1F1719;--prime-hover:#362B2E;--on-prime:#F3F1F2;--tag-ok-bg:#F0EAEC;--tag-ok:#55343D;--tag-warn-bg:#F4EDE7;--tag-warn:#59493B}
html[data-theme=dark][data-palette=rose]{--canvas:#191214;--raised:#251B1D;--sunken:#1F1619;--surface:#291E21;--ink:#E8E3E4;--ink-hover:#FAFAFA;--ink-raised:#322428;--ink-muted:#CDC6C8;--muted:#B1A5A8;--faint:#9C8C90;--on-ink:#F1EFEF;--on-ink-muted:#AAA1A4;--border:#3B2B2F;--border-strong:#443136;--rule:#412F34;--border-faint:#312327;--dashed:#5E4A4F;--track:#38292D;--neutral:#574247;--neutral-2:#4C393E;--sage:#BA788A;--sage-hover:#C6909F;--sage-deep:#D4BFC5;--mint:#3A2C30;--mint-border:#4E3B41;--panel-mint:#D5C3C8;--link:#C9ABB3;--sand:#423529;--sand-border:#584637;--sand-text:#E1D3C6;--sand-text-2:#D4C3B5;--sand-text-3:#EEE8E2;--panel:#110B0D;--panel-raised:#271B20;--panel-border:#32252A;--prime:#E3DEDF;--prime-hover:#F5F4F5;--on-prime:#1F1417;--tag-ok-bg:#34282B;--tag-ok:#D4BFC5;--tag-warn-bg:#3B3026;--tag-warn:#E1D3C6}
html[data-palette=midnight]:not([data-theme=dark]){--canvas:#E1E4EC;--raised:#EEEFF4;--sunken:#F6F6F9;--surface:#FEFEFE;--ink:#17191F;--ink-hover:#2B2D36;--ink-raised:#22232B;--ink-muted:#3A3E4F;--muted:#4B5062;--faint:#5F6477;--on-ink:#EDEEF2;--on-ink-muted:#9DA0B4;--border:#D8DBE6;--border-strong:#D0D4E1;--rule:#CCCFDE;--border-faint:#E8E9F0;--dashed:#B1B7CD;--track:#DDDFE9;--neutral:#C2C7D8;--neutral-2:#CCCFDE;--sage:#B8862E;--sage-hover:#9B7127;--sage-deep:#5E4C2C;--mint:#DFD7C8;--mint-border:#CFC3B0;--panel-mint:#DFD5C3;--link:#655029;--sand:#C9CEE3;--sand-border:#B1B8D2;--sand-text:#404453;--sand-text-2:#404453;--sand-text-3:#2F313C;--panel:#0F1430;--panel-raised:#181F4B;--panel-border:transparent;--prime:#17191F;--prime-hover:#2B2D36;--on-prime:#F1F2F3;--tag-ok-bg:#F1EEE9;--tag-ok:#5E4C2C;--tag-warn-bg:#E9EBF1;--tag-warn:#404453}
html[data-theme=dark][data-palette=midnight]{--canvas:#121319;--raised:#1A1D25;--sunken:#16181F;--surface:#1D202A;--ink:#E3E4E8;--ink-hover:#FAFAFA;--ink-raised:#242733;--ink-muted:#C5C7CE;--muted:#A4A7B2;--faint:#8B8F9C;--on-ink:#EFEFF1;--on-ink-muted:#A1A3AB;--border:#2A2E3C;--border-strong:#303445;--rule:#2E3242;--border-faint:#232631;--dashed:#494D5F;--track:#282B39;--neutral:#414558;--neutral-2:#383C4D;--sage:#CAA668;--sage-hover:#D3B682;--sage-deep:#DACEB9;--mint:#3E3628;--mint-border:#534936;--panel-mint:#DAD0BE;--link:#D1C0A3;--sand:#2E313D;--sand-border:#3D4152;--sand-text:#CBCFDC;--sand-text-2:#BBBFCE;--sand-text-3:#E4E6EC;--panel:#080A14;--panel-raised:#171A2C;--panel-border:#202337;--prime:#DEDFE3;--prime-hover:#F4F4F5;--on-prime:#14161F;--tag-ok-bg:#383124;--tag-ok:#DACEB9;--tag-warn-bg:#2A2D37;--tag-warn:#CBCFDC}
html[data-palette=graphite]:not([data-theme=dark]){--canvas:#E5E6E8;--raised:#F0F1F2;--sunken:#F7F7F8;--surface:#FEFEFE;--ink:#191A1C;--ink-hover:#2E2F33;--ink-raised:#242529;--ink-muted:#424448;--muted:#54565A;--faint:#686A6E;--on-ink:#EFEFF0;--on-ink-muted:#A5A7AB;--border:#DDDEE1;--border-strong:#D6D8DB;--rule:#D2D4D7;--border-faint:#EBEBED;--dashed:#BBBEC3;--track:#E1E2E5;--neutral:#CACCD0;--neutral-2:#D2D4D7;--sage:#4A5568;--sage-hover:#3B4453;--sage-deep:#3E434C;--mint:#D0D3D7;--mint-border:#BBBEC4;--panel-mint:#CDD0D5;--link:#3F4550;--sand:#D2D5DA;--sand-border:#BDC0C7;--sand-text:#47494D;--sand-text-2:#47494D;--sand-text-3:#333538;--panel:#1B1E24;--panel-raised:#2A2F38;--panel-border:transparent;--prime:#191A1C;--prime-hover:#2E2F33;--on-prime:#F2F2F3;--tag-ok-bg:#ECEDEE;--tag-ok:#3E434C;--tag-warn-bg:#ECEDEE;--tag-warn:#47494D}
html[data-theme=dark][data-palette=graphite]{--canvas:#151517;--raised:#1E1F21;--sunken:#191A1C;--surface:#222325;--ink:#E5E5E6;--ink-hover:#FAFAFA;--ink-raised:#292B2D;--ink-muted:#C8C9CB;--muted:#A9AAAD;--faint:#929396;--on-ink:#EFF0F0;--on-ink-muted:#A4A5A7;--border:#313235;--border-strong:#383A3D;--rule:#35373B;--border-faint:#28292C;--dashed:#515357;--track:#2E3033;--neutral:#494B50;--neutral-2:#404145;--sage:#8B95A7;--sage-hover:#A0A8B6;--sage-deep:#C5C8CE;--mint:#303236;--mint-border:#414449;--panel-mint:#C8CBD0;--link:#B4B8C1;--sand:#333538;--sand-border:#44464B;--sand-text:#D1D3D6;--sand-text-2:#C1C3C7;--sand-text-3:#E7E8E9;--panel:#0C0D10;--panel-raised:#1E2024;--panel-border:#282A2E;--prime:#E0E0E1;--prime-hover:#F5F5F5;--on-prime:#18191B;--tag-ok-bg:#2B2D31;--tag-ok:#C5C8CE;--tag-warn-bg:#2F3032;--tag-warn:#D1D3D6}

/* ---------- Settings tabs and theme picker ---------- */
.settabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none} .settabs::-webkit-scrollbar{display:none}
.settabs button{flex:none;padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--border-strong);background:var(--surface);color:var(--muted);font-weight:500;min-height:38px}
.settabs button:hover{background:var(--raised)}
.settabs button.active{background:var(--prime);border-color:var(--prime);color:var(--on-prime);font-weight:600}
.palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px}
.palette{position:relative;display:flex;flex-direction:column;gap:9px;padding:10px;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--sunken);cursor:pointer}
.palette:hover{background:var(--raised)}
.palette:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.palette input{position:absolute;opacity:0;pointer-events:none}
.palette .mini{display:flex;height:62px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border)}
.palette .mini .side{width:26%} .palette .mini .page{flex:1;padding:8px;display:flex;flex-direction:column;gap:5px}
.palette .mini .bar{height:9px;border-radius:3px} .palette .mini .cardlet{flex:1;border-radius:var(--r-xs);display:flex;align-items:flex-end;padding:4px;gap:3px}
.palette .mini .cardlet i{display:block;width:6px;border-radius:2px 2px 0 0}
.palette b{font-size:var(--t-md)} .palette .muted{font-size:var(--t-xs);margin-top:-6px}
.palette .tick{position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--prime);color:var(--on-prime);font-size:var(--t-xs);display:none;align-items:center;justify-content:center}
.palette:has(input:checked) .tick{display:flex}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--border-faint)} .set-row:first-of-type{border-top:0}
.set-row .lbl b{display:block;font-size:var(--t-md)} .set-row .lbl span{font-size:var(--t-sm);color:var(--muted)}

/* ---------- Transactions: list + side panel ---------- */
.tx-page{max-width:1440px;width:100%;margin:0 auto}
.tx-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.tx-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.tx-panel{display:none}
@media (min-width:1180px){.tx-wrap{grid-template-columns:minmax(0,1fr) 340px}.tx-panel{display:flex;flex-direction:column;gap:12px;position:sticky;top:16px}}
.trow.sel{background:color-mix(in srgb,var(--sage) 13%,var(--surface));box-shadow:inset 3px 0 0 var(--sage)}
.tx-panel .pick{border-radius:var(--r-sm);padding:4px 6px;margin:-4px -6px} .tx-panel .pick:hover{background:var(--raised)}
/* ---------- Budgets: main categories ---------- */
.budgets-page{max-width:1440px;width:100%;margin:0 auto}
.budget-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.budget-side{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:1180px){.budget-layout{grid-template-columns:minmax(0,1fr) 340px}.budget-side{display:flex;flex-direction:column;position:sticky;top:16px}}
@media (max-width:720px){.budget-side{grid-template-columns:1fr}}
.bgroups{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;width:100%}
.bgroup{padding:14px 20px 12px}
.bghead{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.bgtoggle{width:26px;height:26px;border-radius:var(--r-sm);color:var(--muted);font-size:var(--t-sm)} .bgtoggle:hover{background:var(--raised)}
.bgname{font-size:var(--t-lg);font-weight:700;color:var(--ink);cursor:pointer} .bgname:hover{text-decoration:underline;color:var(--ink)} .bgname.plain{cursor:default;margin-left:4px} .bgname.plain:hover{text-decoration:none}
.bgsum{margin-left:auto;font-size:var(--t-sm)}
.brow{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px 104px;column-gap:10px;align-items:center;padding:9px 0 0;font-size:var(--t-md)}
.brow.bhead{font-size:var(--t-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;padding:6px 0 2px}
.brow.clickable{cursor:pointer;border-radius:var(--r-sm)} .brow.clickable:hover .nm{text-decoration:underline}
.brow .bname{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap} .brow .nm{overflow:hidden;text-overflow:ellipsis}
.brow .warn{color:var(--amber-text)}
.brow .bbar{grid-column:1/-1;position:relative;height:4px;border-radius:2px;background:var(--track);margin:8px 0 1px;overflow:visible}
.brow .bbar i{display:block;height:100%;border-radius:2px}
.brow .bbar .pace{position:absolute;top:-3px;width:2px;height:10px;background:var(--ink);opacity:.35;border-radius:1px}
.bmove{font-size:var(--t-xs);color:var(--muted);max-width:140px}
.linkbtn{color:var(--link);font-size:var(--t-sm);font-weight:600;padding:12px 0 4px} .linkbtn:hover{text-decoration:underline}
.addgroup{border:1.5px dashed var(--dashed);border-radius:var(--r-xl);padding:18px;color:var(--link);font-weight:700;letter-spacing:.03em;background:transparent} .addgroup:hover{background:var(--raised)}
@media (max-width:720px){.brow{grid-template-columns:minmax(0,1fr) 74px 82px}.brow > div:nth-child(2){display:none}.brow.bhead > div:nth-child(2){display:none}}
/* ---------- Reports: everything opens ---------- */
.trow.clickable,.chart .col.clickable{cursor:pointer} .chart .col.clickable:hover i{filter:brightness(1.08)}
.trow.rep-cols.clickable:hover,.trow.yoy-cols.clickable:hover{background:var(--raised)}
.card.kpi.clickable{cursor:pointer} .card.kpi.clickable:hover{border-color:var(--dashed)}

/* ---------- account box: its transactions ---------- */
.sheet.w720{max-width:720px}
.acct-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .acct-tools .search{flex:1;min-width:180px;padding:9px 12px;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-pill);font-size:var(--t-sm)}
.acct-sum{display:flex;gap:16px;font-size:var(--t-sm);color:var(--muted);flex-wrap:wrap}
.alist{border:1px solid var(--border);border-radius:var(--r-lg);max-height:54vh;overflow-y:auto}
.arow{display:grid;grid-template-columns:52px minmax(0,1fr) 104px 110px;gap:10px;align-items:center;padding:9px 14px;border-top:1px solid var(--border-faint);font-size:var(--t-sm)}
.arow.ahead{position:sticky;top:0;background:var(--raised);border-top:0;font-size:var(--t-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);z-index:1}
.arow.clickable{cursor:pointer} .arow.clickable:hover{background:var(--raised)}
.arow .adesc{display:flex;flex-direction:column;min-width:0} .arow .adesc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .arow .adesc .faint{font-size:var(--t-xs);display:inline-flex;align-items:center;gap:5px}
.arow-month{display:flex;justify-content:space-between;padding:8px 14px 6px;background:var(--sunken);font-size:var(--t-xs);font-weight:600;border-top:1px solid var(--border-faint)}
@media (max-width:720px){.arow{grid-template-columns:44px minmax(0,1fr) 90px}.arow .abal{display:none}}

/* ---------- readability: keyboard focus, tap sizes, one width for every page ---------- */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:var(--r-sm)}
[role="button"][data-action]:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.sidebar :focus-visible,.topbar :focus-visible,.card.ink :focus-visible{outline-color:var(--on-ink)}
/* every page lines up at the same width on big screens (the header too) */
@media (min-width:721px){.page-header,.page-body{padding-left:max(26px,calc((100% - 1440px) / 2 + 26px));padding-right:max(26px,calc((100% - 1440px) / 2 + 26px))}}
.tx-page,.budgets-page{max-width:none;margin:0}
/* phones and tablets: everything you tap is at least 44 px tall */
@media (pointer:coarse),(max-width:720px){
  .btn,.btn.green,.chip,.pills button,.settabs button,.pager button,.segs button,.typegrid button{min-height:44px}
  .nav button{min-height:46px}
  .side-foot .signout{padding:12px 0 12px 35px;margin-top:4px}
  .iconbtn{width:44px;height:44px}
  .inline-select,.bmove,.chip select{min-height:40px}
  .bgtoggle{width:40px;height:40px}
  .linkbtn{padding:14px 0}
  .arrows button{min-width:44px;min-height:44px}
  .brow{padding-top:12px} .arow{padding-top:12px;padding-bottom:12px}
  .topbar .menu{width:44px;height:44px}
  .pills.dark button{min-height:40px;padding:8px 14px}
  .bgname{display:inline-flex;align-items:center;min-height:40px}
  .rangebar input,.rangebar select,.quick input,.quick select,.field input,.field select,.search{min-height:44px}
}

/* grid cells shrink to their column instead of pushing the page wider */
.grid>*{min-width:0}

/* ---------- landing page (before sign-in) ---------- */
#landing{min-height:100vh;background:var(--canvas);color:var(--ink)}
.lp-wrap{max-width:1160px;margin:0 auto;padding-left:24px;padding-right:24px}
.lp-top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.lp-bar{display:flex;align-items:center;gap:20px;min-height:64px}
.lp-brand{padding:0;color:var(--ink);text-decoration:none;font-size:var(--t-lg);min-height:44px} .lp-brand:hover{text-decoration:none;color:var(--ink)}
.lp-brand .brand-mark{background:var(--sage)}
.lp-nav{display:flex;gap:18px;margin-left:12px;font-size:var(--t-md)} .lp-nav a{color:var(--muted)} .lp-nav a:hover{color:var(--ink)}
.lp-actions{margin-left:auto;display:flex;gap:8px}
.lp-hero{display:grid;grid-template-columns:1.02fr 1fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:56px}
.lp-eyebrow{display:inline-block;font-size:var(--t-sm);font-weight:600;letter-spacing:.04em;color:var(--sage-deep);background:var(--tag-ok-bg);padding:6px 12px;border-radius:var(--r-pill)}
.lp-hero h1{font-family:var(--serif);font-weight:400;font-size:var(--t-6xl);line-height:1.05;letter-spacing:-.01em;margin:18px 0 16px}
.lp-lead{font-size:var(--t-xl);line-height:1.5;color:var(--ink-muted);max-width:520px}
.lp-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.btn.lp-big{min-height:48px;padding:12px 22px;font-size:var(--t-md)}
.lp-note{margin-top:14px;font-size:var(--t-sm);color:var(--muted)}
/* the sample overview */
.lp-preview>div{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:var(--r-2xl);background:var(--raised);border:1px solid var(--border);box-shadow:0 30px 60px -30px rgba(28,27,25,.35)}
.lp-nw{padding:18px 20px}
.lp-nw-top{display:flex;justify-content:space-between;align-items:flex-start}
.lp-lbl{font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-muted)}
.lp-nw-val{font-size:var(--t-4xl);line-height:1.1;margin-top:2px}
.lp-up{font-size:var(--t-sm);color:var(--panel-mint)}
.lp-chip{font-size:var(--t-xs);border:1px solid color-mix(in srgb,var(--on-ink) 22%,var(--panel));color:var(--on-ink-muted);border-radius:var(--r-pill);padding:4px 10px}
.lp-nw-chart{height:84px;gap:4px;margin-top:12px}
.lp-nw-chart .col i{background:color-mix(in srgb,var(--panel-mint) 35%,var(--panel-raised))} .lp-nw-chart .col i.now{background:var(--panel-mint)}
.lp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.lp-kpis .kpi{padding:14px 16px} .lp-kpis .val{font-size:var(--t-2xl)}
.lp-went{padding:16px 18px} .lp-went-head{display:flex;justify-content:space-between;margin-bottom:12px;font-size:var(--t-md)}
.lp-rows{margin-top:14px;gap:8px}
/* texting demo */
.lp-text{display:grid;grid-template-columns:auto auto minmax(220px,300px) 1fr;gap:20px;align-items:center;padding-top:28px;padding-bottom:28px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.lp-phone{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.lp-bubble{background:var(--accent-btn);color:var(--on-accent-btn);padding:10px 14px;border-radius:var(--r-2xl) var(--r-2xl) var(--r-2xl) var(--r-xs);font-size:var(--t-md);font-family:ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}

.lp-arrow{font-size:var(--t-3xl);color:var(--muted)}
.lp-landed{padding:6px 16px} .lp-landed-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:var(--t-md)} .lp-landed-row+.lp-landed-row{border-top:1px solid var(--border-faint)}
.lp-text-copy h2,.lp-features h2,.lp-how h2{font-family:var(--serif);font-weight:400;font-size:var(--t-3xl);line-height:1.15}
.lp-text-copy p{margin-top:8px;color:var(--ink-muted);line-height:1.55;max-width:460px}
/* features */
.lp-features{padding-top:64px}
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.lp-feat{padding:22px} .lp-feat svg{width:28px;height:28px;fill:none;stroke:var(--sage);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp-feat h3{font-size:var(--t-lg);margin:12px 0 6px} .lp-feat p{color:var(--ink-muted);line-height:1.5}
.lp-extra{margin-top:18px;color:var(--muted);text-align:center}
/* how it works */
.lp-how{padding-top:64px;padding-bottom:56px}
.lp-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:22px;counter-reset:none}
.lp-num{display:inline-flex;width:36px;height:36px;border-radius:50%;align-items:center;justify-content:center;background:var(--mint);color:var(--sage-deep);font-weight:700}
.lp-steps h3{font-size:var(--t-lg);margin:12px 0 6px} .lp-steps p{color:var(--ink-muted);line-height:1.5}
/* closing call to action */
.lp-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:34px 36px}
.lp-cta h2{font-family:var(--serif);font-weight:400;font-size:var(--t-3xl)} .lp-cta p{color:var(--on-ink-muted);margin-top:4px}
.lp-cta .lp-ctas{margin-top:0}
.btn.lp-on-ink{background:var(--panel-mint);color:#1C1B19} .btn.lp-on-ink:hover{background:color-mix(in srgb,var(--panel-mint) 85%,#fff)}
.lp-foot{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;padding-top:32px;padding-bottom:40px;color:var(--muted);font-size:var(--t-sm)} .lp-foot a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.login-back{display:inline-block;font-size:var(--t-sm);color:var(--muted);margin-bottom:14px}
/* tablets and phones */
@media (max-width:960px){
  .lp-hero{grid-template-columns:1fr;gap:36px;padding-top:40px}
  .lp-text{grid-template-columns:1fr;justify-items:start}
  .lp-arrow{transform:rotate(90deg)}
  .lp-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .lp-wrap{padding-left:16px;padding-right:16px}
  .lp-nav{display:none}
  .lp-actions .btn:not(.secondary){display:none}   /* phones: the header keeps Sign in; Create free account is right under the headline */
  .lp-hero h1{font-size:var(--t-5xl)}
  .lp-lead{font-size:var(--t-lg)}
  .lp-grid,.lp-steps{grid-template-columns:1fr}
  .lp-kpis .val{font-size:var(--t-xl)}
  .lp-cta{padding:26px 22px}
  .lp-ctas .btn{flex:1}
}