:root{
  /* Monochrome. Light is the default, matching the reference. */
  --bg:#f1f0ee;
  --panel:#ffffff;
  --panel-2:#e9e8e5;
  --line:#d9d7d3;
  --line-2:#b6b3ae;
  --text:#1b1b1b;
  --muted:#6a6a6a;
  --faint:#9b9995;

  --accent:#111111;            /* buttons, active states — black, not a colour */
  --accent-contrast:#ffffff;
  --accent-soft:rgba(17,17,17,.06);

  /* The three sections read as tonal steps rather than hues. */
  --income:#151515;
  --expense:#6d6d6d;
  --fixed:#a8a5a1;
  /* Kept as the one colour in the system: things that must not be missed. */
  --bad:#b3261e;
  --warn:#6a6a6a;

  --radius:0px;
  --radius-sm:0px;
  --radius-pill:0px;

  /* The condensed and mono faces carry no CJK or Tamil glyphs, so scripts that
     need them fall through to fonts that do rather than to tofu boxes. */
  --font-cjk:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Noto Sans SC";
  --font-tamil:"Nirmala UI","Latha","Noto Sans Tamil","Tamil Sangam MN";
  --font-display:"Bahnschrift","Archivo Narrow","Arial Narrow","Helvetica Neue Condensed",
                 "Oswald","Roboto Condensed",var(--font-cjk),var(--font-tamil),system-ui,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono","Consolas","SF Mono","Menlo","DejaVu Sans Mono",
              var(--font-cjk),var(--font-tamil),monospace;
}
:root[data-theme="dark"]{
  --bg:#0a0a0a;
  --panel:#131313;
  --panel-2:#1b1b1b;
  --line:#2a2a2a;
  --line-2:#3e3e3e;
  --text:#f1f0ee;
  --muted:#a1a1a1;
  --faint:#6e6e6e;
  --accent:#f1f0ee;
  --accent-contrast:#0a0a0a;
  --accent-soft:rgba(241,240,238,.08);
  --income:#f1f0ee;
  --expense:#a1a1a1;
  --fixed:#6e6e6e;
  --bad:#ff6b6b;
  --warn:#a1a1a1;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--text);
  font:14.5px/1.6 var(--font-mono);
  -webkit-font-smoothing:antialiased;
}

/* Display face: condensed, uppercase, tight. */
h1,h2,h3,.brand,.btn,nav.site a.lnk,.appnav .lnk,.kpi .val,.stat .v,.plan .price,.hero h1{
  font-family:var(--font-display);
  font-stretch:87.5%;
}
h1,h2,h3{text-transform:uppercase;letter-spacing:-.01em;font-weight:700;line-height:1.02}

a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line-2)}
a:hover{border-color:var(--text)}
a.plain,a.brand,a.btn,nav a.lnk{border-bottom:none}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.spacer{flex:1}
.muted{color:var(--muted)}
.small{font-size:12.5px}

/* ---------- nav ---------- */
nav.site{display:flex;align-items:center;gap:30px;padding:22px 0;border-bottom:1px solid var(--line)}
.brand{
  display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;
  text-transform:uppercase;letter-spacing:.02em;color:var(--text);
}
.brand:hover{text-decoration:none}
.mark{
  width:22px;height:22px;display:grid;place-items:center;
  background:var(--text);color:var(--bg);font-size:12px;font-weight:700;
}
nav.site a.lnk{
  color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;padding:3px 0;position:relative;
}
nav.site a.lnk:hover{color:var(--text)}
nav.site a.lnk.on{color:var(--text)}
nav.site a.lnk.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--text)}
@media(max-width:720px){nav.site a.lnk.hide-sm{display:none}}

/* Language picker: quiet by default, sits beside sign-out. */
.langsel{
  background:transparent;border:1px solid var(--line-2);padding:5px 8px;
  font-family:var(--font-mono);font-size:12px;cursor:pointer;outline:none;color:var(--text);
}
.langsel:hover,.langsel:focus{border-color:var(--text)}
/* CJK and Tamil are taller; uppercase tracking made for Latin hurts them. */
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3,
html[lang="ta"] h1,html[lang="ta"] h2,html[lang="ta"] h3{
  text-transform:none;letter-spacing:0;line-height:1.25;font-stretch:normal;
}
html[lang="zh"] .btn,html[lang="ta"] .btn,
html[lang="zh"] nav.site a.lnk,html[lang="ta"] nav.site a.lnk,
html[lang="zh"] .appnav .lnk,html[lang="ta"] .appnav .lnk,
html[lang="zh"] .field label,html[lang="ta"] .field label,
html[lang="zh"] .grp,html[lang="ta"] .grp,
html[lang="zh"] .kpi .hd,html[lang="ta"] .kpi .hd{
  text-transform:none;letter-spacing:.02em;
}
html[lang="ta"] body{line-height:1.75}

.userchip{display:flex;align-items:center;gap:9px}
.userchip:hover{text-decoration:none}
.avatar{
  width:28px;height:28px;display:grid;place-items:center;
  background:var(--text);color:var(--bg);
  font-family:var(--font-display);font-size:13px;font-weight:700;flex:none;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:transparent;border:1px solid var(--text);color:var(--text);
  padding:10px 20px;cursor:pointer;text-align:center;
  text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:700;
  transition:background .12s, color .12s;
}
.btn:hover{background:var(--text);color:var(--bg);text-decoration:none}
.btn.primary,.btn.solid{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn.primary:hover,.btn.solid:hover{background:transparent;color:var(--text)}
.btn.ghost{border-color:var(--line-2)}
.btn.sm{padding:5px 11px;font-size:11.5px}
.btn.wide{width:100%}
.btn.danger{border-color:var(--line-2);color:var(--bad)}
.btn.danger:hover{background:var(--bad);border-color:var(--bad);color:#fff}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn[disabled]:hover{background:transparent;color:var(--text)}

/* ---------- surfaces ---------- */
.card{background:var(--panel);border:1px solid var(--line);padding:26px}

.field{margin-bottom:18px}
.field label{
  display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px;font-weight:700;
}
.input{
  width:100%;background:var(--bg);border:1px solid var(--line-2);
  padding:11px 13px;outline:none;font-family:var(--font-mono);
}
.input:focus{border-color:var(--text)}
.hint{font-size:12px;color:var(--faint);margin-top:7px;line-height:1.5}
.note{border:1px solid var(--line-2);border-left:4px solid var(--text);background:var(--panel);
      padding:13px 15px;font-size:13px;margin-bottom:18px}
.note.err{border-left-color:var(--bad);color:var(--bad)}
.note.ok{border-left-color:var(--text)}
.note[hidden]{display:none}

/* status markers — weight and box, not hue */
.pill-ok,.pill-warn,.pill-bad{
  display:inline-block;font-size:10.5px;padding:2px 8px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  border:1px solid currentColor;
}
.pill-ok{color:var(--text)}
.pill-warn{color:var(--muted)}
.pill-bad{color:var(--bad)}

/* ---------- marketing ---------- */
.hero{padding:80px 0 60px}
.hero h1{font-size:clamp(48px,9vw,116px);line-height:.92;letter-spacing:-.02em;margin:0 0 26px;max-width:14ch}
.hero p.lede{font-size:15px;color:var(--muted);max-width:44ch;margin:0 0 30px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.eyebrow{
  display:inline-block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:26px;
}

section.band{padding:60px 0;border-top:1px solid var(--line)}
section.band h2{font-size:34px;margin:0 0 12px}
section.band .sub{color:var(--muted);margin:0 0 34px;max-width:60ch;font-size:13.5px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
@media(max-width:900px){.grid3,.grid2{grid-template-columns:1fr}}
.feat h3{margin:0 0 9px;font-size:15px}
.feat p{margin:0;color:var(--muted);font-size:13px}
.feat .ic{width:30px;height:30px;display:grid;place-items:center;margin-bottom:14px;
          border:1px solid var(--line-2);font-size:14px}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);align-items:stretch}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{position:relative}
.plan.best{outline:2px solid var(--text);outline-offset:-2px}
.plan .tag{
  position:absolute;top:0;right:0;background:var(--text);color:var(--bg);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;font-weight:700;
}
.plan h3{margin:0 0 4px;font-size:16px}
.plan .price{font-size:44px;font-weight:700;letter-spacing:-.02em;margin:16px 0 2px}
.plan .price small{font-size:13px;color:var(--muted);font-weight:400;font-family:var(--font-mono)}
.plan ul{list-style:none;padding:0;margin:22px 0 26px}
.plan li{padding:6px 0 6px 22px;position:relative;font-size:13px;color:var(--muted)}
.plan li::before{content:"—";position:absolute;left:0;color:var(--text)}

/* ---------- tables ---------- */
table.cmp{width:100%;border-collapse:collapse;font-size:13px}
table.cmp th,table.cmp td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:left}
table.cmp th{
  color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;
  font-weight:700;font-family:var(--font-display);
}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp td.c{text-align:center}

details.faq{border-bottom:1px solid var(--line);padding:16px 0}
details.faq summary{cursor:pointer;font-weight:700;font-size:14px;list-style:none;
                    font-family:var(--font-display);text-transform:uppercase;letter-spacing:.01em}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+";margin-right:12px}
details.faq[open] summary::before{content:"–"}
details.faq p{color:var(--muted);margin:10px 0 0;font-size:13px}

footer.site{border-top:1px solid var(--line);margin-top:60px;padding:30px 0 54px;color:var(--faint);font-size:12.5px}
footer.site a{color:var(--muted)}
.footrow{display:flex;gap:24px;flex-wrap:wrap;align-items:center}

/* ---------- narrow pages ---------- */
.narrow{max-width:430px;margin:0 auto;padding:64px 28px}
.prose{max-width:72ch;padding:44px 0 20px}
.prose h1{font-size:38px}
.prose h2{font-size:17px;margin-top:36px}
.prose p,.prose li{color:var(--muted);font-size:13.5px}
.tabs{display:flex;gap:0;margin-bottom:26px;border:1px solid var(--line-2)}
.tabs button{
  flex:1;background:transparent;border:none;padding:11px;cursor:pointer;color:var(--muted);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.07em;
  font-size:12.5px;font-weight:700;
}
.tabs button.on{background:var(--text);color:var(--bg)}