diff --git a/app/income/page.tsx b/app/income/page.tsx
index 6dbd564..453c7a9 100644
--- a/app/income/page.tsx
+++ b/app/income/page.tsx
@@ -25,8 +25,13 @@ export default async function IncomePage() {
   const totalProfit = rows.reduce((s, m) => s + m.ytdProfit, 0);
 
   return (
-    <div className="p-8 max-w-[1400px]">
-      <div className="flex items-end justify-between mb-6">
+    <div className="p-4 sm:p-8 max-w-[1400px]">
+      {/* Stacks until lg, not sm. As a side-by-side row the title block took 371px
+          of the 704px available at 768px, leaving the tile grid 317px — two 152px
+          columns, too narrow for text-2xl money, so the figures spilled over their
+          own tiles. At 375px the same row could not even fit, and the page scrolled
+          sideways by 158px. The tiles may only go 2-up once the title is above them. */}
+      <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-4 mb-6">
         <div>
           <div className="flex items-center gap-3 mb-1">
             <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#00798C]/15 to-[#003D5B]/15 grid place-items-center text-[#00798C]">
@@ -36,7 +41,11 @@ export default async function IncomePage() {
           </div>
           <p className="text-gray-500 dark:text-gray-400 text-sm">Project income per machine per month · 2026</p>
         </div>
-        <div className="flex items-center gap-3">
+        {/* grid, not flex-wrap: a wrapping flex row sizes tiles by CONTENT, which
+            is the ragged-left-edge trap AGENTS.md records for /income/invoices.
+            Full-width stacked on mobile, two-up from sm — same shape the dashboard
+            cards already use there. */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <div className="bg-gradient-to-br from-[#00798C] to-[#003D5B] rounded-2xl px-5 py-3 text-white shadow-lg shadow-teal-500/20">
             <div className="text-xs text-white/80">YTD Income</div>
             <div className="text-2xl font-semibold tabular-nums">{ZAR(totalIncome)}</div>
diff --git a/app/sites/page.tsx b/app/sites/page.tsx
index 129d6ff..e7a0d17 100644
--- a/app/sites/page.tsx
+++ b/app/sites/page.tsx
@@ -28,7 +28,10 @@ export default async function SitesPage() {
 
   return (
     <div className="p-4 sm:p-8 max-w-[1400px]">
-      <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-6">
+      {/* Stacks until lg, not sm: at 768px a side-by-side row leaves the tile grid
+          only 317px (the title block takes 371px of 704px), so two columns of 152px
+          are too narrow for text-2xl money and the figures spill over their tiles. */}
+      <div className="flex flex-col lg:flex-row lg:items-end lg:justify-between gap-4 mb-6">
         <div>
           <div className="flex items-center gap-3 mb-1">
             <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#EDAE49]/20 to-[#00798C]/15 grid place-items-center text-[#00798C]">
@@ -41,7 +44,11 @@ export default async function SitesPage() {
             {invoices.length === 1 ? "" : "s"} · {year}
           </p>
         </div>
-        <div className="flex flex-wrap items-stretch gap-3">
+        {/* grid, not `flex flex-wrap items-stretch`: flex-wrap sizes tiles by
+            CONTENT, so these two hugged their text — 197px inside a 343px row —
+            leaving a ragged left-aligned pair with dead space beside each. Grid
+            items stretch by default, which is what items-stretch was doing here. */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <Tile label="Revenue (ex VAT)" value={ZAR2(totalExcl)} sub={`+ ${ZAR2(totalVat)} VAT`} />
           <div className="bg-gradient-to-br from-[#00798C] to-[#003D5B] rounded-2xl px-5 py-3 text-white shadow-lg shadow-teal-500/20">
             <div className="text-xs text-white/80">Billed (incl VAT)</div>
diff --git a/components/IncomeView.tsx b/components/IncomeView.tsx
index 44e2aa8..9f9a9a7 100644
--- a/components/IncomeView.tsx
+++ b/components/IncomeView.tsx
@@ -183,8 +183,13 @@ function CardsView({
               </div>
               {/* Row 2 (mobile only): sparkline + YTD + P/L pill */}
               <div className="flex sm:hidden items-center justify-between gap-3 pt-2 text-xs">
-                <Sparkline data={r.months} color={palette.income} />
-                <div className="text-right">
+                {/* 72/28, not the 120/36 default: Sparkline's root is a fixed-width
+                    shrink-0 box, and the pill beside it is shrink-0 too, so with
+                    nothing allowed to give the pill was pushed ~32px outside the
+                    card and sat on the viewport edge. /sites already passes 72 here
+                    for exactly this reason. */}
+                <Sparkline data={r.months} color={palette.income} width={72} height={28} />
+                <div className="text-right min-w-0">
                   <div className="text-xs text-gray-400 dark:text-text-soft uppercase tracking-wider">YTD income</div>
                   <div className="text-sm font-semibold tabular-nums text-[#003D5B] dark:text-white">{ZAR2(r.income)}</div>
                 </div>
diff --git a/components/InvoiceList.tsx b/components/InvoiceList.tsx
index 2779324..f4a209f 100644
--- a/components/InvoiceList.tsx
+++ b/components/InvoiceList.tsx
@@ -65,27 +65,38 @@ export function InvoiceList({
 
   return (
     <>
-      {/* A grid, not flex-wrap. The middle tile is far wider than the other two
-          because of its ex-VAT/VAT sub-line, so flex sized them by CONTENT and pushed
-          the third one onto a second row the moment the viewport dipped under ~644px —
-          which is squarely tablet territory. Equal columns keep all three on one row
-          from 640px up, and below that they stack as one clean column. */}
-      <div className="mb-5 grid grid-cols-1 sm:grid-cols-3 gap-3 items-stretch">
+      {/* TWO tiles, not three, and a grid rather than flex-wrap. Both reasons are
+          the same lesson: "Booked" (summed over booked lines) and "Billed" (summed
+          over every invoice header) are the SAME figure whenever every line is
+          booked — which is the goal state — so two tiles showing one number read as
+          a duplicate rather than as a reconciliation. The reading that carries
+          information is "booked OF billed", so the single tile now says that, and
+          the two figures separate on their own the moment a line is left unbooked.
+
+          Equal columns, not content sizing: this tile is far wider than the invoice
+          count beside it because of the "of … billed" line and the VAT breakdown, and
+          flex would size by content and shove the second tile onto its own row well
+          above the 640px where a tablet has plenty of room. */}
+      <div className="mb-5 grid grid-cols-1 sm:grid-cols-2 gap-3 items-stretch">
         <Stat label="Invoices" value={String(invoices.length)} tone="teal" />
-        {/* What actually got booked against the machines, per the shared policy. */}
-        <div className="min-w-0 px-4 sm:px-5 py-3 rounded-2xl bg-[#00798C]/10 border border-[#00798C]/15">
-          <div className="text-xs text-[#00798C]">{BOOKED_LONG_LABEL}</div>
-          <div className="text-lg sm:text-xl xl:text-2xl font-semibold tabular-nums text-[#003D5B] dark:text-white">
+        {/* What actually got booked against the machines, per the shared policy,
+            set against what the debtors have actually been invoiced. */}
+        <div className="min-w-0 bg-gradient-to-br from-[#00798C] to-[#003D5B] rounded-2xl px-4 sm:px-5 py-3 text-white shadow-lg shadow-teal-500/20">
+          <div className="text-xs text-white/80">{BOOKED_LONG_LABEL}</div>
+          <div className="text-lg sm:text-xl xl:text-2xl font-semibold tabular-nums">
             {ZAR2(bookedAmount(bookedExVat, bookedVat))}
+            <span className="text-xs sm:text-sm font-normal text-white/75">
+              {" "}of {ZAR2(totals.incl)} billed
+            </span>
           </div>
-          <div className="text-xs text-gray-500 dark:text-gray-400 tabular-nums">
+          {/* VAT stays visible — the ex-VAT/incl-VAT split is the one figure a reader
+              cannot reconstruct from the headline above. */}
+          <div className="text-xs text-white/80 tabular-nums">
             {BOOK_INCLUSIVE_VAT
               ? `${ZAR2(bookedExVat)} ex VAT + ${ZAR2(bookedVat)} VAT`
               : `${ZAR2(bookedVat)} VAT not counted as income`}
           </div>
         </div>
-        {/* What the debtors are actually invoiced. */}
-        <Stat label="Billed (incl VAT)" value={ZAR2(totals.incl)} tone="brand" />
       </div>
 
       <div className="bg-white dark:bg-surface rounded-2xl border border-gray-100 dark:border-border shadow-sm overflow-hidden">