/* ─── The app, drawn to its own measurements ──────────────────────────────
   Every number below was read off the running app at 375pt — computed
   styles and getBoundingClientRect, not a look at a screenshot. The mocks
   this replaces were invented: a KES/USD toggle that does not exist, a
   four-tab bar where the app has two tabs and a button, a three-column
   keypad where the app's has four.

   ONE POINT IS ONE UNIT. `--u` is the app's point expressed in the device's
   own width, so `calc(var(--u)*44)` is literally the 44pt the balance is
   set at. The drawing then scales with the phone without anything being
   re-guessed, and a value can be checked against the app by reading it.

   The palette is the app's `src/lib/theme.ts`, both schemes, verbatim. It
   does NOT inherit the page's — a phone showing the marketing site's colours
   is a phone showing something that is not the product. ─────────────────── */

.ph__scr { container-type: inline-size; }

.k {
  --u: calc(100cqi / 375);

  /* ── DARK (theme.ts › DARK) ── */
  --k-canvas:  #0B0D16;
  --k-card:    #191B22;
  --k-input:   #1F2129;
  --k-ink:     #EEF1F6;
  --k-muted:   #98A1B4;
  --k-faint:   #7C8498;
  --k-brand:   #26E06C;
  --k-red:     #FF5C85;
  --k-blue:    #38A8FF;
  --k-divider: #2E313B;
  --k-seg-trk: rgba(118,118,128,.24);
  --k-seg-on:  #636366;
  --k-seg-sh:  none;
  --k-tint-in:  rgba(38,224,108,.16);
  --k-tint-out: rgba(255,92,133,.16);
  --k-card-sh: 0 calc(var(--u)*6) calc(var(--u)*16) rgba(0,0,0,.28);

  --k-ui:   'Work Sans', system-ui, sans-serif;
  --k-fig:  'Sora', system-ui, sans-serif;

  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--k-canvas);
  color: var(--k-ink);
  font-family: var(--k-ui);
  font-size: calc(var(--u)*13);  /* a sane inherit; every element sets its own */
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  text-align: initial;
  -webkit-font-smoothing: antialiased;
}

:root[data-theme='light'] .k,
.k--day {
  /* ── LIGHT (theme.ts › LIGHT) ── */
  --k-canvas:  #F2F2F7;
  --k-card:    #FFFFFF;
  --k-input:   #EDF0F5;
  --k-ink:     #0C0E1C;
  --k-muted:   #626E85;
  --k-faint:   #8791A3;
  --k-brand:   #00D54F;
  --k-red:     #FF3D71;
  --k-blue:    #0095FF;
  --k-divider: #E3E7EE;
  --k-seg-trk: rgba(118,118,128,.12);
  --k-seg-on:  #FFFFFF;
  --k-seg-sh:  0 calc(var(--u)*3) calc(var(--u)*8) rgba(16,18,38,.12);
  --k-tint-in:  rgba(0,213,79,.12);
  --k-tint-out: rgba(255,61,113,.10);
  --k-card-sh: 0 calc(var(--u)*6) calc(var(--u)*16) rgba(16,18,38,.06);
}

.k * { text-align: initial; box-sizing: border-box; }
.k b, .k strong { font-weight: 600; }
.k .up { color: var(--k-brand); }
.k .dn { color: var(--k-red); }

/* Figures are Sora everywhere in the app, and tabular so columns line up. */
.k__n { font-family: var(--k-fig); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── Status bar ──────────────────────────────────────────────────────── */
.k__sb {
  flex: none; height: calc(var(--u)*50);
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 calc(var(--u)*22) calc(var(--u)*4);
  font-size: calc(var(--u)*13); font-weight: 600; letter-spacing: 0;
  color: var(--k-ink);
}
.k__sb svg { height: calc(var(--u)*11); width: auto; display: block; }
.k__sb span { display: inline-flex; align-items: center; gap: calc(var(--u)*5); }

/* ── Home: business bar ──────────────────────────────────────────────── */
.k__top {
  flex: none;
  display: flex; align-items: center; gap: calc(var(--u)*11);
  padding: calc(var(--u)*4) calc(var(--u)*21) calc(var(--u)*10);
}
.k__mark {
  flex: none; width: calc(var(--u)*34); height: calc(var(--u)*34);
  border-radius: calc(var(--u)*10);
  background: #0C0E14; color: #fff;
  display: grid; place-items: center;
}
.k__mark svg { width: calc(var(--u)*22); height: calc(var(--u)*22); display: block; }
.k__biz {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: calc(var(--u)*6);
  font-size: calc(var(--u)*19); font-weight: 600; letter-spacing: calc(var(--u)*-.3);
  color: var(--k-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k__biz i { flex: none; font-style: normal; color: var(--k-faint); display: block; }
.k__biz i svg { width: calc(var(--u)*13); height: calc(var(--u)*9); display: block; }
.k__disc {
  flex: none; width: calc(var(--u)*38); height: calc(var(--u)*38);
  border-radius: 50%; background: var(--k-input);
  display: grid; place-items: center; color: var(--k-ink);
}
.k__disc svg { width: calc(var(--u)*18); height: calc(var(--u)*18); display: block; }

/* ── The balance ─────────────────────────────────────────────────────── */
.k__bal {
  flex: none; margin: calc(var(--u)*14) 0 0;
  display: flex; align-items: baseline; justify-content: center;
  gap: calc(var(--u)*4);
}
.k__bal .cur {
  font-family: var(--k-fig); font-weight: 500;
  font-size: calc(var(--u)*19.4);          /* .44 × the figure, per the app */
  letter-spacing: calc(var(--u)*-.19);
  color: var(--k-faint);
  align-self: center; translate: 0 calc(var(--u)*7);
}
.k__bal .fig {
  font-family: var(--k-fig); font-weight: 700;
  font-size: calc(var(--u)*44); letter-spacing: calc(var(--u)*-1.76);
  font-variant-numeric: tabular-nums;
  color: var(--k-ink); line-height: 1.16;
}
.k--book .k__bal .fig { font-size: calc(var(--u)*50); letter-spacing: calc(var(--u)*-2); }
.k--book .k__bal .cur { font-size: calc(var(--u)*22); }

/* Letterspaced micro-caps — the app's one label voice. */
.k__cap {
  margin: calc(var(--u)*6) 0 0; text-align: center;
  font-size: calc(var(--u)*11); font-weight: 600;
  letter-spacing: calc(var(--u)*.9); text-transform: uppercase;
  color: var(--k-faint);
}
.k__cap .n { font-family: var(--k-fig); letter-spacing: 0; text-transform: none; }
.k__cap .up { color: var(--k-brand); }
.k__cap .dn { color: var(--k-red); }
.k__cap--row {
  display: flex; align-items: baseline; justify-content: center;
  gap: calc(var(--u)*8); flex-wrap: wrap;
}
.k__cap--row .n { font-size: calc(var(--u)*13); font-weight: 500; }

/* ── Segmented control (iOS system) ──────────────────────────────────── */
.k__seg {
  flex: none; display: flex; gap: calc(var(--u)*2);
  margin: calc(var(--u)*14) calc(var(--u)*21) 0;
  padding: calc(var(--u)*2); border-radius: calc(var(--u)*9);
  background: var(--k-seg-trk);
}
.k__seg span {
  flex: 1; text-align: center;
  padding: calc(var(--u)*6) calc(var(--u)*8);
  border-radius: calc(var(--u)*7);
  font-size: calc(var(--u)*13); font-weight: 500;
  color: var(--k-muted);
  white-space: nowrap;
}
.k__seg .on {
  background: var(--k-seg-on); color: var(--k-ink);
  font-weight: 600; box-shadow: var(--k-seg-sh);
}

/* ── Grouped card ────────────────────────────────────────────────────── */
.k__card {
  margin: calc(var(--u)*14) calc(var(--u)*21) 0;
  border-radius: calc(var(--u)*20);
  background: var(--k-card);
  box-shadow: var(--k-card-sh);
  overflow: hidden;
}
.k__list { list-style: none; margin: 0; padding: 0; }

/* ── Book row ────────────────────────────────────────────────────────── */
.k__row {
  display: flex; align-items: center; gap: calc(var(--u)*15);
  height: calc(var(--u)*56); padding: 0 calc(var(--u)*12);
  position: relative;
}
.k__row + .k__row::before {
  content: ''; position: absolute; left: calc(var(--u)*56); right: 0; top: 0;
  height: 1px; background: var(--k-divider);
}
.k__tile {
  flex: none; width: calc(var(--u)*29); height: calc(var(--u)*29);
  border-radius: calc(var(--u)*8.1);
  background: var(--k-input);
  display: grid; place-items: center;
  color: var(--k-muted);
  font-size: calc(var(--u)*10.5); font-weight: 600; letter-spacing: calc(var(--u)*.2);
}
.k__tile svg { width: calc(var(--u)*17); height: calc(var(--u)*17); display: block; }
.k__rowc { flex: 1; min-width: 0; }
.k__rowc .nm {
  display: flex; align-items: center; gap: calc(var(--u)*4);
  font-size: calc(var(--u)*15); font-weight: 600; letter-spacing: calc(var(--u)*-.24);
  color: var(--k-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k__rowc .nm i { font-style: normal; color: var(--k-faint); font-size: calc(var(--u)*11); }
.k__rowc .sb {
  display: flex; align-items: center; gap: calc(var(--u)*8);
  margin-top: calc(var(--u)*1);
  font-size: calc(var(--u)*12); color: var(--k-faint);
}
.k__rowc .sb svg { display: block; height: calc(var(--u)*14); width: calc(var(--u)*46); }
.k__amt {
  flex: none; display: flex; align-items: baseline; gap: calc(var(--u)*3);
  font-family: var(--k-fig); font-weight: 600;
  font-size: calc(var(--u)*17); letter-spacing: calc(var(--u)*-.65);
  font-variant-numeric: tabular-nums;
  color: var(--k-ink);
}
.k__amt .c { font-size: calc(var(--u)*11); font-weight: 500; color: var(--k-faint); }
.k__amt.dn, .k__amt.dn .c { color: var(--k-red); }
.k__row.off .nm, .k__row.off .k__amt { color: var(--k-faint); }
.k__row.off .k__tile { opacity: .6; }

/* ── Tab bar: two tabs and the button ────────────────────────────────── */
.k__tabs {
  margin-top: auto; flex: none;
  height: calc(var(--u)*59);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(var(--u)*30);
  position: relative;
}
.k__tab {
  display: grid; justify-items: center; gap: calc(var(--u)*3);
  color: var(--k-faint); width: calc(var(--u)*76);
}
.k__tab svg { width: calc(var(--u)*24); height: calc(var(--u)*24); display: block; }
.k__tab span { font-size: calc(var(--u)*10); font-weight: 500; letter-spacing: calc(var(--u)*.07); }
.k__tab.on { color: var(--k-ink); }
.k__tab.on svg { filter: none; }
.k__fab {
  position: absolute; left: 50%; top: calc(var(--u)*-6); translate: -50% 0;
  width: calc(var(--u)*56); height: calc(var(--u)*56); border-radius: 50%;
  background: var(--k-brand); color: #04240F;
  display: grid; place-items: center;
  box-shadow: 0 calc(var(--u)*10) calc(var(--u)*22) rgba(0,180,70,.34);
}
.k__fab svg { width: calc(var(--u)*26); height: calc(var(--u)*26); display: block; }

/* ── Book screen: nav bar ────────────────────────────────────────────── */
.k__nav {
  flex: none; height: calc(var(--u)*44);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 calc(var(--u)*16);
}
.k__nav .bk {
  display: inline-flex; align-items: center; gap: calc(var(--u)*2);
  font-size: calc(var(--u)*17); color: var(--k-brand); letter-spacing: calc(var(--u)*-.3);
}
.k__nav .bk svg { width: calc(var(--u)*11); height: calc(var(--u)*17); display: block; }
.k__nav .ti {
  display: inline-flex; align-items: center; gap: calc(var(--u)*6);
  font-size: calc(var(--u)*15); font-weight: 600; color: var(--k-ink);
  letter-spacing: calc(var(--u)*-.2); white-space: nowrap;
}
.k__nav .ti svg { width: calc(var(--u)*16); height: calc(var(--u)*16); display: block; }
.k__nav .sc { justify-self: end; color: var(--k-brand); }
.k__nav .sc svg { width: calc(var(--u)*19); height: calc(var(--u)*19); display: block; }

/* ── Full-bleed area sparkline ───────────────────────────────────────── */
.k__area { flex: none; width: 100%; height: calc(var(--u)*64); display: block; color: var(--k-brand); }

/* ── Four action discs ───────────────────────────────────────────────── */
.k__acts {
  flex: none; display: flex; justify-content: space-between;
  padding: calc(var(--u)*22) calc(var(--u)*32) calc(var(--u)*4);
}
.k__act { display: grid; justify-items: center; gap: calc(var(--u)*8); }
.k__act i {
  width: calc(var(--u)*52); height: calc(var(--u)*52); border-radius: 50%;
  background: var(--k-input); display: grid; place-items: center;
}
.k__act svg { width: calc(var(--u)*22); height: calc(var(--u)*22); display: block; }
.k__act span { font-size: calc(var(--u)*12); color: var(--k-muted); }
.k__act.o i { color: var(--k-red); }
.k__act.i i { color: var(--k-brand); }
.k__act.p i { color: var(--k-ink); }
.k__act.t i { color: var(--k-blue); }

/* ── Ledger: day header ──────────────────────────────────────────────── */
.k__day {
  display: flex; align-items: center; gap: calc(var(--u)*10);
  padding: calc(var(--u)*16) calc(var(--u)*21) calc(var(--u)*7);
  font-size: calc(var(--u)*11); font-weight: 600;
  letter-spacing: calc(var(--u)*.9); text-transform: uppercase;
  color: var(--k-faint);
}
.k__day .rule { flex: 1; height: 1px; background: transparent; }
.k__day.today .rule { background: color-mix(in srgb, var(--k-brand) 32%, transparent); }
.k__day .net { display: inline-flex; align-items: baseline; gap: calc(var(--u)*6); }
.k__day .net b {
  font-family: var(--k-fig); font-weight: 600; font-size: calc(var(--u)*12);
  letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;
}
.k__day.today { color: var(--k-brand); }

/* ── Ledger: entry row ───────────────────────────────────────────────── */
.k__ent {
  display: flex; align-items: center; gap: calc(var(--u)*13);
  padding: calc(var(--u)*13) calc(var(--u)*21);
  position: relative;
}
.k__ent + .k__ent::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: var(--k-divider); opacity: .55;
}
.k__ent .chip {
  flex: none; width: calc(var(--u)*34); height: calc(var(--u)*34);
  border-radius: calc(var(--u)*10);
  display: grid; place-items: center;
}
.k__ent .chip svg { width: calc(var(--u)*17); height: calc(var(--u)*17); display: block; }
.k__ent.i .chip { background: var(--k-tint-in);  color: var(--k-brand); }
.k__ent.o .chip { background: var(--k-tint-out); color: var(--k-red); }
.k__entc { flex: 1; min-width: 0; }
.k__entc .nm {
  font-size: calc(var(--u)*15); letter-spacing: calc(var(--u)*-.24);
  color: var(--k-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.k__entc .sb {
  display: flex; align-items: center; gap: calc(var(--u)*5);
  margin-top: calc(var(--u)*2);
  font-size: calc(var(--u)*11); font-weight: 600; letter-spacing: calc(var(--u)*.07);
  color: var(--k-faint);
  white-space: nowrap; overflow: hidden;
}
.k__entc .sb em {
  font-style: normal; flex: none;
  width: calc(var(--u)*15); height: calc(var(--u)*15); border-radius: 50%;
  background: var(--k-input); color: var(--k-muted);
  display: grid; place-items: center; font-size: calc(var(--u)*7);
}
.k__entr { flex: none; display: grid; justify-items: end; gap: calc(var(--u)*4); }
.k__entr b {
  font-family: var(--k-fig); font-weight: 600;
  font-size: calc(var(--u)*15); letter-spacing: calc(var(--u)*-.3);
  font-variant-numeric: tabular-nums;
}
/* THE NOTATION. An 80pt track, 3pt tall, filled from the right in proportion
   to the day's largest figure — so the eye ranks a day without reading it.
   Measured, not invented: 80 × 3, radius 2/1/1/2, right-aligned. */
.k__mag { display: flex; width: calc(var(--u)*80); height: calc(var(--u)*3); display: flex; justify-content: flex-end; }
.k__mag i {
  display: block; height: 100%; width: var(--w, 20%);
  border-radius: calc(var(--u)*2) calc(var(--u)*1) calc(var(--u)*1) calc(var(--u)*2);
  background: currentColor;
}
.k__ent.i .k__entr, .k__ent.i .k__mag { color: var(--k-brand); }
.k__ent.o .k__entr, .k__ent.o .k__mag { color: var(--k-red); }

/* ── Composer ────────────────────────────────────────────────────────── */
.k--pad { padding-top: 0; }
.k__grab {
  flex: none; width: calc(var(--u)*36); height: calc(var(--u)*5);
  border-radius: 99px; background: var(--k-faint); opacity: .4;
  margin: calc(var(--u)*8) auto 0;
}
.k__pbar {
  flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: calc(var(--u)*12) calc(var(--u)*18) 0;
}
.k__pbar .x, .k__pbar .m {
  width: calc(var(--u)*32); height: calc(var(--u)*32); border-radius: 50%;
  background: var(--k-input); color: var(--k-muted);
  display: grid; place-items: center; font-size: calc(var(--u)*14);
}
.k__pbar .m { justify-self: end; }
.k__mode {
  display: inline-flex; gap: calc(var(--u)*2); padding: calc(var(--u)*3);
  border-radius: 99px; background: var(--k-input);
}
.k__mode span {
  display: inline-flex; align-items: center; gap: calc(var(--u)*4);
  padding: calc(var(--u)*5) calc(var(--u)*11); border-radius: 99px;
  font-size: calc(var(--u)*13); font-weight: 600; color: var(--k-muted);
}
.k__mode span svg { width: calc(var(--u)*13); height: calc(var(--u)*13); display: block; }
.k__mode .on { background: var(--k-tint-in); color: var(--k-brand); }

.k__big {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: calc(var(--u)*6);
}
.k__big .cur {
  font-family: var(--k-fig); font-weight: 500; font-size: calc(var(--u)*24);
  color: var(--k-faint); align-self: center; translate: 0 calc(var(--u)*9);
}
.k__big .fig {
  font-family: var(--k-fig); font-weight: 700; font-size: calc(var(--u)*54);
  letter-spacing: calc(var(--u)*-2.2); font-variant-numeric: tabular-nums;
  color: var(--k-ink);
}
.k__big.zero .fig { color: var(--k-faint); }
.k__big .caret {
  display: inline-block; width: calc(var(--u)*3); height: calc(var(--u)*44);
  background: var(--k-brand); margin-left: calc(var(--u)*3);
  align-self: center; animation: kblink 1s steps(2) infinite;
}
@keyframes kblink { 50% { opacity: 0; } }

.k__kinds {
  flex: none; display: flex; gap: calc(var(--u)*8);
  padding: 0 calc(var(--u)*18); overflow: hidden;
}
.k__kinds span {
  flex: none; width: calc(var(--u)*62);
  display: grid; justify-items: center; gap: calc(var(--u)*5);
  padding: calc(var(--u)*9) 0; border-radius: calc(var(--u)*13);
  background: var(--k-input); color: var(--k-muted);
  font-size: calc(var(--u)*10);
}
.k__kinds span svg { width: calc(var(--u)*17); height: calc(var(--u)*17); display: block; }
.k__kinds .on { background: var(--k-tint-in); color: var(--k-brand); }

.k__note {
  flex: none; display: flex; align-items: center; gap: calc(var(--u)*8);
  margin: calc(var(--u)*10) calc(var(--u)*18) 0;
  padding: calc(var(--u)*10) calc(var(--u)*12);
  border-radius: calc(var(--u)*12); background: var(--k-input);
  font-size: calc(var(--u)*13); color: var(--k-faint);
}
.k__note svg { width: calc(var(--u)*14); height: calc(var(--u)*14); display: block; }

.k__meta {
  flex: none; display: flex; gap: calc(var(--u)*8);
  padding: calc(var(--u)*10) calc(var(--u)*18) 0; overflow: hidden;
}
.k__meta span {
  flex: none; display: inline-flex; align-items: center; gap: calc(var(--u)*5);
  padding: calc(var(--u)*7) calc(var(--u)*11); border-radius: 99px;
  background: var(--k-input); color: var(--k-muted);
  font-size: calc(var(--u)*13); font-weight: 500;
}
.k__meta span svg { width: calc(var(--u)*13); height: calc(var(--u)*13); display: block; }
.k__meta .on { background: var(--k-tint-in); color: var(--k-brand); font-weight: 600; }

/* FOUR columns. The fourth is the calculator the app puts in the pad — the
   single detail that most says "this is Koonto" and the one the old mock
   left out entirely. */
.k__pad {
  flex: none; display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: calc(var(--u)*8) calc(var(--u)*10) 0;
}
.k__pad b {
  height: calc(var(--u)*46); display: grid; place-items: center;
  font-size: calc(var(--u)*24); font-weight: 600; color: var(--k-ink);
  letter-spacing: calc(var(--u)*-.5);
  border-radius: calc(var(--u)*12);
  transition: background .12s, transform .12s;
}
.k__pad b.op { color: var(--k-brand); font-size: calc(var(--u)*20); }
.k__pad b svg { width: calc(var(--u)*20); height: calc(var(--u)*20); display: block; }
.k__pad b.hit { background: var(--k-input); transform: scale(.94); }

.k__cta {
  flex: none; margin: calc(var(--u)*10) calc(var(--u)*18) calc(var(--u)*14);
  height: calc(var(--u)*50); border-radius: calc(var(--u)*16);
  display: grid; place-items: center;
  background: var(--k-input); color: var(--k-muted);
  font-size: calc(var(--u)*16); font-weight: 600;
  transition: background .18s, color .18s, transform .12s;
}
.k__cta.live { background: var(--k-brand); color: #04240F; }
.k__cta.hit { transform: scale(.97); }

/* ── Composer: the saved screen ──────────────────────────────────────── */
.k__done {
  position: absolute; inset: 0; z-index: 4;
  background: var(--k-canvas);
  display: grid; align-content: start; justify-items: center;
  padding: calc(var(--u)*90) calc(var(--u)*24) calc(var(--u)*24);
  gap: calc(var(--u)*12);
  opacity: 0; visibility: hidden; transform: translateY(calc(var(--u)*10));
  transition: opacity .34s ease, transform .34s ease, visibility .34s;
}
.k__done.in { opacity: 1; visibility: visible; transform: none; }
/* DoneDisc, to its own note in the app: 64pt, brand TINT behind a 30pt brand
   tick. A solid green disc is a different statement. */
.k__tick {
  flex: none;
  width: calc(var(--u)*64); height: calc(var(--u)*64); border-radius: 50%;
  background: var(--k-tint-in); color: var(--k-brand);
  display: grid; place-items: center;
}
.k__tick svg { width: calc(var(--u)*30); height: calc(var(--u)*30); display: block; }
.k__done > b { font-family: var(--k-fig); font-size: calc(var(--u)*22); color: var(--k-ink); }
.k__rcpt {
  width: 100%; border-radius: calc(var(--u)*18); background: var(--k-card);
  padding: calc(var(--u)*14) calc(var(--u)*16); display: grid; gap: calc(var(--u)*9);
  box-shadow: var(--k-card-sh);
}
.k__rcpt p {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: calc(var(--u)*12); margin: 0; font-size: calc(var(--u)*13);
}
.k__rcpt span { color: var(--k-faint); }
.k__rcpt b { color: var(--k-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.k__rcpt .d { padding-top: calc(var(--u)*9); border-top: 1px solid var(--k-divider); }
.k__rcpt .d + .d { padding-top: 0; border-top: 0; }
.k__rcpt .d span, .k__rcpt .d b {
  color: var(--k-faint); font-weight: 500; font-size: calc(var(--u)*12);
}

/* ── Reports ─────────────────────────────────────────────────────────── */
.k__lead { flex: none; padding: calc(var(--u)*10) calc(var(--u)*21) 0; }
.k__lead .cap {
  font-size: calc(var(--u)*11); font-weight: 600;
  letter-spacing: calc(var(--u)*.9); text-transform: uppercase; color: var(--k-faint);
}
.k__lead .fig {
  display: block; margin-top: calc(var(--u)*4);
  font-family: var(--k-fig); font-weight: 700; font-size: calc(var(--u)*40);
  letter-spacing: calc(var(--u)*-1.6); color: var(--k-ink);
  font-variant-numeric: tabular-nums;
}
.k__lead .sub { margin-top: calc(var(--u)*2); font-size: calc(var(--u)*13); color: var(--k-faint); }
.k__twin { flex: none; width: 100%; height: calc(var(--u)*120); display: block; margin-top: calc(var(--u)*10); }
.k__io {
  flex: none; display: flex; gap: calc(var(--u)*34);
  padding: calc(var(--u)*10) calc(var(--u)*21) 0;
}
.k__io div .cap {
  font-size: calc(var(--u)*11); font-weight: 600;
  letter-spacing: calc(var(--u)*.9); text-transform: uppercase; color: var(--k-faint);
}
.k__io div b {
  display: block; margin-top: calc(var(--u)*2);
  font-family: var(--k-fig); font-weight: 700; font-size: calc(var(--u)*22);
  letter-spacing: calc(var(--u)*-.7); font-variant-numeric: tabular-nums;
}
.k__bars { flex: none; padding: calc(var(--u)*16) calc(var(--u)*21) 0; display: grid; gap: calc(var(--u)*11); }
.k__bars > .cap {
  font-size: calc(var(--u)*11); font-weight: 600;
  letter-spacing: calc(var(--u)*.9); text-transform: uppercase; color: var(--k-faint);
}
.k__bar .r {
  display: flex; align-items: center; gap: calc(var(--u)*8);
  font-size: calc(var(--u)*15); color: var(--k-ink); letter-spacing: calc(var(--u)*-.24);
}
.k__bar .r svg { width: calc(var(--u)*16); height: calc(var(--u)*16); display: block;
  color: var(--k-muted); flex: none; stroke-width: 2.2; }
.k__bar .r span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k__bar .r b {
  font-family: var(--k-fig); font-weight: 600; font-size: calc(var(--u)*15);
  letter-spacing: calc(var(--u)*-.3); font-variant-numeric: tabular-nums;
}
.k__bar .t { display: block; height: calc(var(--u)*4); border-radius: 99px; margin-top: calc(var(--u)*5); background: transparent; }
.k__bar .t i {
  display: block; height: 100%; border-radius: 99px; background: var(--k-brand);
  width: var(--w, 30%);
  transform-origin: left; transform: scaleX(0);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.k.is-on .k__bar .t i { transform: scaleX(1); }

/* ── Trial balance ───────────────────────────────────────────────────── */
.k__banner {
  flex: none; display: flex; align-items: center; gap: calc(var(--u)*9);
  margin: calc(var(--u)*14) calc(var(--u)*21) 0;
  padding: calc(var(--u)*12) calc(var(--u)*14);
  border-radius: calc(var(--u)*14);
  background: var(--k-tint-in); color: var(--k-brand);
  font-size: calc(var(--u)*14); font-weight: 600;
}
.k__banner svg { width: calc(var(--u)*18); height: calc(var(--u)*18); display: block; flex: none; }
.k__cur {
  flex: none; display: flex; align-items: baseline; justify-content: space-between;
  padding: calc(var(--u)*16) calc(var(--u)*21) calc(var(--u)*8);
}
.k__cur b { font-size: calc(var(--u)*17); font-weight: 600; color: var(--k-ink); }
.k__cur i {
  font-style: normal; font-size: calc(var(--u)*11); font-weight: 600;
  letter-spacing: calc(var(--u)*.9); text-transform: uppercase; color: var(--k-brand);
}
.k__thead {
  flex: none; display: grid; grid-template-columns: 1fr auto auto;
  gap: calc(var(--u)*18);
  padding: calc(var(--u)*7) calc(var(--u)*21);
  background: var(--k-input);
  font-size: calc(var(--u)*10.5); font-weight: 600;
  letter-spacing: calc(var(--u)*.9); text-transform: uppercase; color: var(--k-faint);
}
.k__thead b:nth-child(2), .k__thead b:nth-child(3) { width: calc(var(--u)*66); text-align: right; }
.k__trow {
  display: grid; grid-template-columns: 1fr auto auto; gap: calc(var(--u)*18);
  align-items: baseline;
  padding: calc(var(--u)*11) calc(var(--u)*21);
  background: var(--k-card);
  font-size: calc(var(--u)*15); color: var(--k-ink); letter-spacing: calc(var(--u)*-.24);
  position: relative;
}
.k__trow + .k__trow::before {
  content: ''; position: absolute; left: calc(var(--u)*21); right: 0; top: 0;
  height: 1px; background: var(--k-divider);
}
.k__trow b, .k__trow i {
  width: calc(var(--u)*66); text-align: right; font-style: normal;
  font-family: var(--k-fig); font-weight: 600; font-size: calc(var(--u)*14);
  font-variant-numeric: tabular-nums; color: var(--k-ink);
}
.k__trow i { color: var(--k-faint); font-family: var(--k-ui); font-weight: 400; }

/* ── The home indicator ──────────────────────────────────────────────── */
.k__home {
  flex: none; width: calc(var(--u)*134); height: calc(var(--u)*5);
  border-radius: 99px; background: var(--k-ink); opacity: .32;
  margin: calc(var(--u)*6) auto calc(var(--u)*8);
}

/* ─── Demo states ────────────────────────────────────────────────────────
   The page drives these: the composer types into `[data-typed]`, the hero
   lights the row its entry landed in, and the picker re-cascades its rows. */

/* Resting, the amount is the app's grey zero. Typing replaces it outright,
   so the grey never has to be un-set. */
.k__big .fig:empty::before { content: '0'; color: var(--k-faint); }
.is-done .k__big .caret { display: none; }

.k__row[data-new], .k__ent[data-new] {
  transition: background .45s cubic-bezier(.22,1,.36,1);
}
.k__row[data-new].lit, .k__ent[data-new].lit {
  background: var(--k-tint-in);
}

.k__list.in .k__row {
  animation: rowIn .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}
[data-land] .k__trow {
  animation: rowIn .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* The four cards crop their phone at the card's bottom edge, so a screen that
   would otherwise run past it just ends there — the same crop the app's own
   scroll would give. */
.fcard .k { padding-bottom: 0; }

/* The totals row is the card's whole claim, so it is a row and not a header:
   the label keeps the caps voice, the two figures are Sora like every other
   figure in the app. */
.k__tfoot {
  flex: none; display: grid; grid-template-columns: 1fr auto auto; gap: calc(var(--u)*18);
  align-items: baseline;
  padding: calc(var(--u)*12) calc(var(--u)*21);
  background: var(--k-input);
  border-top: 1px solid var(--k-divider);
}
.k__tfoot span {
  font-size: calc(var(--u)*10.5); font-weight: 600;
  letter-spacing: calc(var(--u)*.9); text-transform: uppercase; color: var(--k-faint);
}
.k__tfoot b {
  width: calc(var(--u)*66); text-align: right;
  font-family: var(--k-fig); font-weight: 700; font-size: calc(var(--u)*14);
  letter-spacing: calc(var(--u)*-.3); font-variant-numeric: tabular-nums; color: var(--k-ink);
}

/* The composer is a sheet: its status bar has no nav under it, so it does not
   need the 50pt a screen's does. */
.k--pad .k__sb { height: calc(var(--u)*40); }