From 6430e373b6d923c4563b418bb94d57e7d15fbdf4 Mon Sep 17 00:00:00 2001
From: Ngo Quoc Dat <datlechin@gmail.com>
Date: Sat, 15 Aug 2026 12:06:20 +0700
Subject: [PATCH 1/2] fix(landing): let the type scale win, name the two card
 headings, and reach the reveals by keyboard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Ninety-four elements were arguing with the type scale.** Eighty-seven of them
put `leading-relaxed` on `text-sm`, which is the site's body copy rung — so
almost every 14px paragraph overrode the 1.55 the curve suggested. The overrides
were right and the scale was wrong: 14px prose wants more air than a 14px table
cell. `--text-sm--line-height` is 1.625 now and the ninety-four are gone. A
scale every paragraph has to argue with is not a scale.

The seven on `text-base` and non-mono `text-xs` go too — 1.6 against 1.625 says
nothing. Two survive, both on mono code blocks, where the extra leading is a
real choice about reading code rather than a leftover.

**The card heading forked three-to-twenty-three with no rule.** There genuinely
are two roles: a heading that titles a cell which *is* the point of that cell —
the download panel, a pricing tier — and one that titles a single entry in a
list of like things, where a larger size would make every item shout. Both are
now named, `PANEL_TITLE` and `ITEM_TITLE`, next to `CELL_DENSITY` where the
other cell decisions live. The inconsistency was never that two sizes existed;
it was that nothing recorded which was which.

**Eight hover reveals had no keyboard equivalent.** Every one sits inside a
`group` that is a link, so a keyboard user tabbing to it saw nothing change:
the database tile's arrow, three sponsor marks, the engine monogram, and both
blog list headings. They pair with `group-focus-within` now.

Two of those additions landed outside their `className` on first attempt — a
regex that matched across quote boundaries — which typecheck caught in one file
and a per-line check caught in the other. Verified after repair that all three
sponsor marks kept the parity they were given.
---
 resources/css/app.css                         |  9 ++-
 .../js/components/landing/agents-mcp.tsx      |  6 +-
 .../js/components/landing/architecture.tsx    |  6 +-
 .../js/components/landing/database-grid.tsx   |  2 +-
 .../js/components/landing/depth-grid.tsx      |  2 +-
 .../js/components/landing/footer-cta.tsx      | 12 +--
 .../js/components/landing/objection-row.tsx   |  2 +-
 .../js/components/landing/open-source.tsx     |  2 +-
 resources/js/components/landing/pricing.tsx   |  5 +-
 resources/js/components/landing/safety.tsx    |  2 +-
 resources/js/components/landing/sponsors.tsx  |  8 +-
 resources/js/components/landing/workbench.tsx |  2 +-
 resources/js/components/ui/database-mark.tsx  |  4 +-
 resources/js/components/ui/faq-list.tsx       |  5 +-
 resources/js/components/ui/grid-cell.tsx      | 15 ++++
 resources/js/components/ui/ledger.tsx         |  2 +-
 resources/js/pages/Blog/Index.tsx             |  4 +-
 resources/js/pages/Blog/Post.tsx              |  4 +-
 resources/js/pages/Compare.tsx                | 15 ++--
 resources/js/pages/DatabaseClient.tsx         | 13 ++--
 resources/js/pages/Download.tsx               |  2 +-
 resources/js/pages/Privacy.tsx                | 73 ++++++++++---------
 resources/js/pages/RefundPolicy.tsx           |  2 +-
 resources/js/pages/Terms.tsx                  | 60 +++++++--------
 24 files changed, 142 insertions(+), 115 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 352d534..e986823 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -44,7 +44,14 @@
   --text-xs--line-height: 1.5;
   --text-xs--letter-spacing: 0.0005em;
   --text-sm: 0.875rem;
-  --text-sm--line-height: 1.55;
+  /*
+   * 1.625, not the 1.55 the curve suggests. Ninety-four elements overrode it
+   * with `leading-relaxed`, and the overrides were right: `text-sm` is the
+   * site's body copy rung, and 14px prose wants more air than a 14px table
+   * cell. A scale that every prose paragraph has to argue with is not a scale,
+   * so the scale changed rather than the ninety-four.
+   */
+  --text-sm--line-height: 1.625;
   --text-sm--letter-spacing: -0.0062em;
   --text-base: 1rem;
   --text-base--line-height: 1.6;
diff --git a/resources/js/components/landing/agents-mcp.tsx b/resources/js/components/landing/agents-mcp.tsx
index 8dc35f0..663ee85 100644
--- a/resources/js/components/landing/agents-mcp.tsx
+++ b/resources/js/components/landing/agents-mcp.tsx
@@ -7,7 +7,7 @@ import { FullLine } from '@/components/ui/full-line';
 import { Ledger, LedgerRow } from '@/components/ui/ledger';
 import SectionShell from '@/components/ui/section-shell';
 import { relocatedFaq } from '@/data/home-faqs';
-import { cellBorders, type ColumnMap } from '@/components/ui/grid-cell';
+import { ITEM_TITLE, cellBorders, type ColumnMap } from '@/components/ui/grid-cell';
 
 /** Kept byte-identical to the tokenized block below, since this is what gets copied. */
 const CONFIG_JSON = `{
@@ -229,8 +229,8 @@ export default function AgentsMcp() {
               */}
             <Container>
                 <div className="border-l-2 border-primary p-4 sm:p-6">
-                    <h3 className="text-base font-semibold text-foreground">{aiSafetyFaq.question}</h3>
-                    <p className="mt-2 max-w-3xl text-sm leading-relaxed text-muted-foreground">
+                    <h3 className={ITEM_TITLE}>{aiSafetyFaq.question}</h3>
+                    <p className="mt-2 max-w-3xl text-sm text-muted-foreground">
                         {aiSafetyFaq.answer}
                     </p>
                 </div>
diff --git a/resources/js/components/landing/architecture.tsx b/resources/js/components/landing/architecture.tsx
index bc3aee5..49c5831 100644
--- a/resources/js/components/landing/architecture.tsx
+++ b/resources/js/components/landing/architecture.tsx
@@ -69,7 +69,7 @@ export default function Architecture() {
         >
             <FullLine />
             <Container>
-                <p className="max-w-4xl px-4 py-5 text-base leading-relaxed text-muted-foreground text-pretty">
+                <p className="max-w-4xl px-4 py-5 text-base text-muted-foreground text-pretty">
                     Native macOS database clients come in three shapes today. Single database and open source, like
                     Sequel Ace and Postico. Multi database and closed source, like TablePlus. Multi database but not
                     native, like DBeaver on the JVM or Beekeeper Studio and DBGate on Electron.{' '}
@@ -95,7 +95,7 @@ export default function Architecture() {
                             <h4 className="font-mono text-2xs font-semibold tracking-widest text-primary-strong uppercase">
                                 {material.label}
                             </h4>
-                            <p className="mt-3 text-sm leading-relaxed text-muted-foreground text-pretty">
+                            <p className="mt-3 text-sm text-muted-foreground text-pretty">
                                 {material.body}
                             </p>
                         </div>
@@ -116,7 +116,7 @@ export default function Architecture() {
                             className={`${CELL_DENSITY.default} ${cellBorders(i, COLS, BEHAVIOURS.length)} border-rule`}
                         >
                             <h4 className="text-base font-semibold text-pretty">{behaviour.title}</h4>
-                            <p className="mt-3 text-sm leading-relaxed text-muted-foreground text-pretty">
+                            <p className="mt-3 text-sm text-muted-foreground text-pretty">
                                 {behaviour.body}
                             </p>
                         </div>
diff --git a/resources/js/components/landing/database-grid.tsx b/resources/js/components/landing/database-grid.tsx
index 4de2831..088941a 100644
--- a/resources/js/components/landing/database-grid.tsx
+++ b/resources/js/components/landing/database-grid.tsx
@@ -281,7 +281,7 @@ export default function DatabaseGrid() {
                             >
                                 <span className="flex size-10 items-center justify-center">
                                     <Plus
-                                        className="size-7 text-muted-foreground opacity-40 transition-opacity group-hover:opacity-100"
+                                        className="size-7 text-muted-foreground opacity-40 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100"
                                         strokeWidth={1.5}
                                         aria-hidden="true"
                                     />
diff --git a/resources/js/components/landing/depth-grid.tsx b/resources/js/components/landing/depth-grid.tsx
index 7296b12..300af24 100644
--- a/resources/js/components/landing/depth-grid.tsx
+++ b/resources/js/components/landing/depth-grid.tsx
@@ -82,7 +82,7 @@ export default function DepthGrid() {
                                 {String(i + 1).padStart(2, '0')}
                             </p>
                             <h3 className="mt-3 text-base font-semibold">{item.title}</h3>
-                            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{item.body}</p>
+                            <p className="mt-2 text-sm text-muted-foreground">{item.body}</p>
                         </GridCell>
                     ))}
                 </div>
diff --git a/resources/js/components/landing/footer-cta.tsx b/resources/js/components/landing/footer-cta.tsx
index 791e88e..1948ccd 100644
--- a/resources/js/components/landing/footer-cta.tsx
+++ b/resources/js/components/landing/footer-cta.tsx
@@ -4,7 +4,7 @@ import { toast } from 'sonner';
 import { buttonClasses } from '@/components/ui/button';
 import Container from '@/components/ui/container';
 import { FullLine } from '@/components/ui/full-line';
-import { cellBorders, GridCell, type ColumnMap } from '@/components/ui/grid-cell';
+import { PANEL_TITLE, cellBorders, GridCell, type ColumnMap } from '@/components/ui/grid-cell';
 import SectionShell from '@/components/ui/section-shell';
 import Button from '@/components/ui/button';
 import { AppleGlyph } from '@/components/ui/glyph';
@@ -209,8 +209,8 @@ export default function FooterCTA() {
             <Container>
                 <div className="grid grid-cols-1 items-start sm:grid-cols-2">
                     <GridCell className={`p-6 sm:p-8 ${cellBorders(0, COLS, 2)}`}>
-                        <h3 className="text-lg font-semibold text-foreground">Download</h3>
-                        <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+                        <h3 className={PANEL_TITLE}>Download</h3>
+                        <p className="mt-2 text-sm text-muted-foreground">
                             macOS 14 or later. Apple Silicon and Intel. About 20 MB.
                         </p>
 
@@ -251,7 +251,7 @@ export default function FooterCTA() {
                             </button>
                         </div>
 
-                        <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-4 text-sm text-muted-foreground">
                             With no connection to hand,{' '}
                             <span className="font-mono text-xs">File &gt; Try Sample Database</span> opens a bundled
                             Chinook SQLite.
@@ -297,8 +297,8 @@ export default function FooterCTA() {
 
                     <GridCell className={`p-6 sm:p-8 ${cellBorders(1, COLS, 2)}`}>
                         <div ref={statsAnchorRef}>
-                            <h3 className="text-lg font-semibold text-foreground">Stay updated</h3>
-                            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+                            <h3 className={PANEL_TITLE}>Stay updated</h3>
+                            <p className="mt-2 text-sm text-muted-foreground">
                                 Release notes and database notes. About one email a month, unsubscribe any time.
                             </p>
                             {subscriberCount !== null && subscriberCount > 0 && (
diff --git a/resources/js/components/landing/objection-row.tsx b/resources/js/components/landing/objection-row.tsx
index c58b272..7bff844 100644
--- a/resources/js/components/landing/objection-row.tsx
+++ b/resources/js/components/landing/objection-row.tsx
@@ -39,7 +39,7 @@ export default function ObjectionRow() {
                                 className={`p-6 sm:p-8 ${cellBorders(i, COLS, QUESTIONS.length)} border-rule`}
                             >
                                 <h2 className="text-base font-semibold text-foreground">{faq.question}</h2>
-                                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{faq.answer}</p>
+                                <p className="mt-2 text-sm text-muted-foreground">{faq.answer}</p>
                             </div>
                         );
                     })}
diff --git a/resources/js/components/landing/open-source.tsx b/resources/js/components/landing/open-source.tsx
index a216d4b..bd100c4 100644
--- a/resources/js/components/landing/open-source.tsx
+++ b/resources/js/components/landing/open-source.tsx
@@ -48,7 +48,7 @@ export default function OpenSource({ latestRelease }: Props) {
             <Container>
                 <div className="lg:grid lg:grid-cols-[1fr_18rem]">
                     <div className="border-rule max-lg:border-b lg:border-r">
-                        <div className="max-w-2xl space-y-4 p-6 text-base leading-relaxed text-muted-foreground text-pretty sm:p-8">
+                        <div className="max-w-2xl space-y-4 p-6 text-base text-muted-foreground text-pretty sm:p-8">
                             <p>
                                 TablePro is AGPLv3. All 25 databases, the SQL editor, the data grid, the AI assistant,
                                 the MCP server, Safe Mode with Touch ID, SSH tunnels, ER diagrams, the server dashboard,
diff --git a/resources/js/components/landing/pricing.tsx b/resources/js/components/landing/pricing.tsx
index e1019fd..4ab3f4e 100644
--- a/resources/js/components/landing/pricing.tsx
+++ b/resources/js/components/landing/pricing.tsx
@@ -7,6 +7,7 @@ import { Ledger, LedgerRow } from '@/components/ui/ledger';
 import SectionShell from '@/components/ui/section-shell';
 import { Availability, CheckGlyph } from '@/components/ui/glyph';
 import { PROSE_LINK } from '@/components/ui/prose-link';
+import { PANEL_TITLE } from '@/components/ui/grid-cell';
 
 type BillingCycle = 'monthly' | 'yearly' | 'lifetime';
 
@@ -153,7 +154,7 @@ function PricingCard({ tier, cycle, discountCode, discount, paymentProvider, tea
     return (
         <div className={`flex h-full flex-col border-rule p-6 sm:p-8 ${tier.featured ? 'bg-primary/5' : ''}`}>
             <div>
-                <h3 className="text-lg font-semibold text-foreground">{tier.name}</h3>
+                <h3 className={PANEL_TITLE}>{tier.name}</h3>
                 <p className="mt-1 text-sm text-muted-foreground">{tier.description}</p>
             </div>
 
@@ -225,7 +226,7 @@ function PricingCard({ tier, cycle, discountCode, discount, paymentProvider, tea
 
             <div className="mt-6">
                 {tier.summary ? (
-                    <p className="text-sm leading-relaxed text-muted-foreground">
+                    <p className="text-sm text-muted-foreground">
                         {tier.summary}
                     </p>
                 ) : (
diff --git a/resources/js/components/landing/safety.tsx b/resources/js/components/landing/safety.tsx
index c3b25c4..e6df1c3 100644
--- a/resources/js/components/landing/safety.tsx
+++ b/resources/js/components/landing/safety.tsx
@@ -222,7 +222,7 @@ export default function Safety() {
                             <h3 className="font-mono text-2xs font-semibold tracking-widest text-primary-strong uppercase">
                                 {cell.label}
                             </h3>
-                            <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{cell.body}</p>
+                            <p className="mt-3 text-sm text-muted-foreground">{cell.body}</p>
                         </GridCell>
                     ))}
                 </div>
diff --git a/resources/js/components/landing/sponsors.tsx b/resources/js/components/landing/sponsors.tsx
index 9109372..0cdf664 100644
--- a/resources/js/components/landing/sponsors.tsx
+++ b/resources/js/components/landing/sponsors.tsx
@@ -113,7 +113,7 @@ function SponsorMark({ sponsor }: { sponsor: Sponsor }) {
             <span
                 role="img"
                 aria-label={sponsor.name}
-                className={`${MARK_CLASS} block opacity-80 grayscale transition-[opacity,filter] duration-(--dur-state) ease-(--ease-feedback) group-hover:opacity-100 group-hover:grayscale-0 [&>svg]:h-full [&>svg]:w-auto [&>svg]:max-w-full`}
+                className={`${MARK_CLASS} block opacity-80 grayscale transition-[opacity,filter] duration-(--dur-state) ease-(--ease-feedback) group-hover:opacity-100 group-hover:grayscale-0 [&>svg]:h-full [&>svg]:w-auto [&>svg]:max-w-full group-focus-within:opacity-100 group-focus-within:grayscale-0`}
                 dangerouslySetInnerHTML={{ __html: sponsor.svgContent }}
             />
         );
@@ -127,7 +127,7 @@ function SponsorMark({ sponsor }: { sponsor: Sponsor }) {
             height={sponsor.height}
             loading="lazy"
             decoding="async"
-            className={`${MARK_CLASS} object-contain opacity-70 grayscale transition-[opacity,filter] duration-(--dur-state) ease-(--ease-feedback) group-hover:opacity-100 group-hover:grayscale-0 group-hover:dark:grayscale dark:invert`}
+            className={`${MARK_CLASS} object-contain opacity-70 grayscale transition-[opacity,filter] duration-(--dur-state) ease-(--ease-feedback) group-hover:opacity-100 group-hover:grayscale-0 group-hover:dark:grayscale dark:invert group-focus-within:opacity-100 group-focus-within:grayscale-0 group-focus-within:dark:grayscale`}
         />
     );
 }
@@ -171,7 +171,7 @@ export default function Sponsors() {
                                     aria-label="Become a sponsor"
                                     className={`${CELL_CLASS} ${borders}`}
                                 >
-                                    <span className="flex size-10 items-center justify-center rounded-xl border border-dashed border-rule-strong text-muted-foreground transition-colors duration-(--dur-tap) ease-(--ease-feedback) group-hover:border-primary/40">
+                                    <span className="flex size-10 items-center justify-center rounded-xl border border-dashed border-rule-strong text-muted-foreground transition-colors duration-(--dur-tap) ease-(--ease-feedback) group-hover:border-primary/40 group-focus-within:border-primary/40">
                                         <svg
                                             className="size-4"
                                             viewBox="0 0 24 24"
@@ -197,7 +197,7 @@ export default function Sponsors() {
                             >
                                 <SponsorMark sponsor={cell.sponsor} />
                                 {cell.sponsor.description && (
-                                    <span className="text-xs leading-relaxed text-muted-foreground">
+                                    <span className="text-xs text-muted-foreground">
                                         {cell.sponsor.description}
                                     </span>
                                 )}
diff --git a/resources/js/components/landing/workbench.tsx b/resources/js/components/landing/workbench.tsx
index 8551e3b..0e02209 100644
--- a/resources/js/components/landing/workbench.tsx
+++ b/resources/js/components/landing/workbench.tsx
@@ -200,7 +200,7 @@ export default function Workbench() {
                                         {row.index}
                                     </p>
                                     <h3 className="mt-3 text-lg font-semibold">{row.title}</h3>
-                                    <p className="mt-3 text-sm leading-relaxed text-muted-foreground text-pretty">
+                                    <p className="mt-3 text-sm text-muted-foreground text-pretty">
                                         {row.body}
                                     </p>
 
diff --git a/resources/js/components/ui/database-mark.tsx b/resources/js/components/ui/database-mark.tsx
index a4c38e3..14ecf99 100644
--- a/resources/js/components/ui/database-mark.tsx
+++ b/resources/js/components/ui/database-mark.tsx
@@ -20,7 +20,7 @@ export default function DatabaseMark({ icon, monogram, name }: DatabaseMarkProps
                 height={40}
                 loading="lazy"
                 decoding="async"
-                className="size-10 object-contain opacity-40 grayscale transition-[opacity,filter] duration-(--dur-state) ease-(--ease-feedback) group-hover:opacity-100 group-hover:grayscale-0 dark:invert group-hover:dark:invert-0"
+                className="size-10 object-contain opacity-40 grayscale transition-[opacity,filter] duration-(--dur-state) ease-(--ease-feedback) group-hover:opacity-100 group-hover:grayscale-0 dark:invert group-hover:dark:invert-0 group-focus-within:opacity-100 group-focus-within:grayscale-0 group-focus-within:dark:invert-0"
             />
         );
     }
@@ -29,7 +29,7 @@ export default function DatabaseMark({ icon, monogram, name }: DatabaseMarkProps
         <span
             aria-hidden="true"
             title={name}
-            className="grid size-10 place-items-center border border-rule-strong font-mono text-sm font-semibold text-muted-foreground transition-colors duration-(--dur-tap) ease-(--ease-feedback) group-hover:border-primary/40"
+            className="grid size-10 place-items-center border border-rule-strong font-mono text-sm font-semibold text-muted-foreground transition-colors duration-(--dur-tap) ease-(--ease-feedback) group-hover:border-primary/40 group-focus-within:border-primary/40"
         >
             {monogram ?? name.slice(0, 2).toUpperCase()}
         </span>
diff --git a/resources/js/components/ui/faq-list.tsx b/resources/js/components/ui/faq-list.tsx
index da6e54c..fcfcb29 100644
--- a/resources/js/components/ui/faq-list.tsx
+++ b/resources/js/components/ui/faq-list.tsx
@@ -1,5 +1,6 @@
 import { cn } from '@/lib/utils';
 import type { FaqItem } from '@/data/faqs';
+import { ITEM_TITLE } from '@/components/ui/grid-cell';
 
 function Column({ items, className }: { items: FaqItem[]; className?: string }) {
     return (
@@ -9,8 +10,8 @@ function Column({ items, className }: { items: FaqItem[]; className?: string })
                     key={faq.question}
                     className={cn('p-6 sm:p-8', i < items.length - 1 && 'border-b border-rule')}
                 >
-                    <h3 className="text-base font-semibold text-foreground">{faq.question}</h3>
-                    <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{faq.answer}</p>
+                    <h3 className={ITEM_TITLE}>{faq.question}</h3>
+                    <p className="mt-2 text-sm text-muted-foreground">{faq.answer}</p>
                 </div>
             ))}
         </div>
diff --git a/resources/js/components/ui/grid-cell.tsx b/resources/js/components/ui/grid-cell.tsx
index fc96d3a..96bfc15 100644
--- a/resources/js/components/ui/grid-cell.tsx
+++ b/resources/js/components/ui/grid-cell.tsx
@@ -116,6 +116,21 @@ export const CELL_DENSITY = {
 
 export type CellDensity = keyof typeof CELL_DENSITY;
 
+/**
+ * The two heading sizes a cell can carry, named so the choice stops being made
+ * ad hoc.
+ *
+ * `PANEL_TITLE` heads a cell that is the whole point of its cell — the download
+ * panel, a pricing tier. `ITEM_TITLE` heads one entry in a list of like things —
+ * a question, a capability, a feature row — where a larger size would make every
+ * item shout.
+ *
+ * Both are h3s. This was three sites at one size and twenty-three at the other,
+ * with nothing recording which was which.
+ */
+export const PANEL_TITLE = 'text-lg font-semibold text-foreground';
+export const ITEM_TITLE = 'text-base font-semibold text-foreground';
+
 interface GridCellProps {
     className?: string;
     /** `stripe` fills the cell with the page gutter's 45 degree hatch. */
diff --git a/resources/js/components/ui/ledger.tsx b/resources/js/components/ui/ledger.tsx
index fcf0144..6709128 100644
--- a/resources/js/components/ui/ledger.tsx
+++ b/resources/js/components/ui/ledger.tsx
@@ -46,7 +46,7 @@ export function LedgerRow({ label, children, aside, accent, className }: LedgerR
                 {label}
                 {aside && <span className="ml-2 normal-case text-muted-foreground-subtle">{aside}</span>}
             </dt>
-            <dd className="text-sm leading-relaxed text-muted-foreground">{children}</dd>
+            <dd className="text-sm text-muted-foreground">{children}</dd>
         </div>
     );
 }
diff --git a/resources/js/pages/Blog/Index.tsx b/resources/js/pages/Blog/Index.tsx
index 1d4c632..e22e86e 100644
--- a/resources/js/pages/Blog/Index.tsx
+++ b/resources/js/pages/Blog/Index.tsx
@@ -79,10 +79,10 @@ export default function BlogIndex({ posts, downloadUrls, githubStars }: Props) {
                                             <span aria-hidden="true">·</span>
                                             <span>{post.readingMinutes} min read</span>
                                         </div>
-                                        <h2 className="mt-3 text-2xl font-bold text-foreground transition-colors group-hover:text-primary-strong sm:text-3xl">
+                                        <h2 className="mt-3 text-2xl font-bold text-foreground transition-colors group-hover:text-primary-strong sm:text-3xl group-focus-within:text-primary-strong">
                                             {post.title}
                                         </h2>
-                                        <p className="mt-3 text-base leading-relaxed text-muted-foreground">
+                                        <p className="mt-3 text-base text-muted-foreground">
                                             {post.description}
                                         </p>
                                         {post.tags.length > 0 && (
diff --git a/resources/js/pages/Blog/Post.tsx b/resources/js/pages/Blog/Post.tsx
index 01d1816..73b84ab 100644
--- a/resources/js/pages/Blog/Post.tsx
+++ b/resources/js/pages/Blog/Post.tsx
@@ -164,10 +164,10 @@ export default function BlogPost({ post, relatedPosts, downloadUrls, githubStars
                                                 <span aria-hidden="true">·</span>
                                                 <span>{rp.readingMinutes} min read</span>
                                             </div>
-                                            <h3 className="mt-2 text-xl font-bold text-foreground transition-colors group-hover:text-primary-strong sm:text-2xl">
+                                            <h3 className="mt-2 text-xl font-bold text-foreground transition-colors group-hover:text-primary-strong sm:text-2xl group-focus-within:text-primary-strong">
                                                 {rp.title}
                                             </h3>
-                                            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+                                            <p className="mt-2 text-sm text-muted-foreground">
                                                 {rp.description}
                                             </p>
                                         </Link>
diff --git a/resources/js/pages/Compare.tsx b/resources/js/pages/Compare.tsx
index 7d514f5..5e50913 100644
--- a/resources/js/pages/Compare.tsx
+++ b/resources/js/pages/Compare.tsx
@@ -11,6 +11,7 @@ import { AppleGlyph, Availability, CheckGlyph } from '@/components/ui/glyph';
 import FaqList from '@/components/ui/faq-list';
 import ThemedImage from '@/components/ui/themed-image';
 import DataTable, { TABLE_COLUMN_RULE, TABLE_ROW_RULE } from '@/components/ui/data-table';
+import { ITEM_TITLE } from '@/components/ui/grid-cell';
 
 interface Props {
     slug: string;
@@ -220,7 +221,7 @@ export default function Compare({ slug, downloadUrls, githubStars }: Props) {
 
                         {/* Competitor pros */}
                         <div className="p-6 sm:p-8">
-                            <h3 className="text-base font-semibold text-foreground">{comp.name}</h3>
+                            <h3 className={ITEM_TITLE}>{comp.name}</h3>
                             <ul className="mt-4 space-y-3">
                                 {comp.prosCompetitor.map((pro) => (
                                     <li key={pro} className="flex items-start gap-2 text-sm text-muted-foreground">
@@ -250,8 +251,8 @@ export default function Compare({ slug, downloadUrls, githubStars }: Props) {
                                             {idx + 1}
                                         </div>
                                         <div>
-                                            <h3 className="text-base font-semibold text-foreground">{step.title}</h3>
-                                            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{step.description}</p>
+                                            <h3 className={ITEM_TITLE}>{step.title}</h3>
+                                            <p className="mt-2 text-sm text-muted-foreground">{step.description}</p>
                                         </div>
                                     </li>
                                 ))}
@@ -290,11 +291,11 @@ export default function Compare({ slug, downloadUrls, githubStars }: Props) {
                     <div className="grid grid-cols-1 sm:grid-cols-2">
                         <div className="border-b border-rule p-6 sm:border-b-0 sm:border-r sm:p-8">
                             <h3 className="text-base font-semibold text-primary-strong">Choose TablePro if...</h3>
-                            <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{comp.chooseTablePro}</p>
+                            <p className="mt-3 text-sm text-muted-foreground">{comp.chooseTablePro}</p>
                         </div>
                         <div className="p-6 sm:p-8">
-                            <h3 className="text-base font-semibold text-foreground">Choose {comp.name} if...</h3>
-                            <p className="mt-3 text-sm leading-relaxed text-muted-foreground">{comp.chooseCompetitor}</p>
+                            <h3 className={ITEM_TITLE}>Choose {comp.name} if...</h3>
+                            <p className="mt-3 text-sm text-muted-foreground">{comp.chooseCompetitor}</p>
                         </div>
                     </div>
                 </Container>
@@ -303,7 +304,7 @@ export default function Compare({ slug, downloadUrls, githubStars }: Props) {
 <FullLine />
                 <Container>
                     <div className="p-6 sm:p-8">
-                        <p className="text-base leading-relaxed text-foreground">
+                        <p className="text-base text-foreground">
                             {comp.verdict}
                         </p>
                     </div>
diff --git a/resources/js/pages/DatabaseClient.tsx b/resources/js/pages/DatabaseClient.tsx
index 950433b..123aa25 100644
--- a/resources/js/pages/DatabaseClient.tsx
+++ b/resources/js/pages/DatabaseClient.tsx
@@ -10,6 +10,7 @@ import Button from '@/components/ui/button';
 import { AppleGlyph, CheckGlyph } from '@/components/ui/glyph';
 import FaqList from '@/components/ui/faq-list';
 import ThemedImage from '@/components/ui/themed-image';
+import { ITEM_TITLE } from '@/components/ui/grid-cell';
 
 interface Props {
     slug: string;
@@ -162,8 +163,8 @@ export default function DatabaseClient({ slug, downloadUrls, githubStars }: Prop
                                     i % 2 === 0 ? 'sm:border-r' : ''
                                 } ${i < db.features.length - 2 ? 'border-b' : i < db.features.length - 1 ? 'max-sm:border-b' : ''}`}
                             >
-                                <h3 className="text-base font-semibold text-foreground">{feature.title}</h3>
-                                <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{feature.description}</p>
+                                <h3 className={ITEM_TITLE}>{feature.title}</h3>
+                                <p className="mt-2 text-sm text-muted-foreground">{feature.description}</p>
                             </div>
                         ))}
                     </div>
@@ -245,7 +246,7 @@ export default function DatabaseClient({ slug, downloadUrls, githubStars }: Prop
                         {/* Code snippet */}
                         <div className="border-b border-rule p-6 sm:border-b-0 sm:border-r sm:p-8">
                             <div tabIndex={0} role="region" aria-label="Connection snippet" className="overflow-x-auto rounded-lg border border-rule-strong bg-surface-raised p-4">
-                                <code className="block whitespace-pre font-mono text-sm leading-relaxed text-foreground">
+                                <code className="block whitespace-pre font-mono text-sm text-foreground">
                                     {db.snippet}
                                 </code>
                             </div>
@@ -253,7 +254,7 @@ export default function DatabaseClient({ slug, downloadUrls, githubStars }: Prop
 
                         {/* Connection details */}
                         <div className="p-6 sm:p-8">
-                            <h3 className="text-base font-semibold text-foreground">Supported versions</h3>
+                            <h3 className={ITEM_TITLE}>Supported versions</h3>
                             <p className="mt-1 text-sm text-muted-foreground">{db.supportedVersions}</p>
 
                             <h3 className="mt-6 text-base font-semibold text-foreground">Connection types</h3>
@@ -293,8 +294,8 @@ export default function DatabaseClient({ slug, downloadUrls, githubStars }: Prop
                                             {idx + 1}
                                         </div>
                                         <div>
-                                            <h3 className="text-base font-semibold text-foreground">{step.name}</h3>
-                                            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{step.text}</p>
+                                            <h3 className={ITEM_TITLE}>{step.name}</h3>
+                                            <p className="mt-2 text-sm text-muted-foreground">{step.text}</p>
                                         </div>
                                     </li>
                                 ))}
diff --git a/resources/js/pages/Download.tsx b/resources/js/pages/Download.tsx
index 1b1f7d9..9ab6015 100644
--- a/resources/js/pages/Download.tsx
+++ b/resources/js/pages/Download.tsx
@@ -194,7 +194,7 @@ export default function Download({ downloadUrls, githubStars }: Props) {
                         {/* Older versions */}
                         <div className="p-6 sm:p-8">
                             <h2 className="text-lg font-semibold text-foreground">Older versions</h2>
-                            <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
+                            <p className="mt-4 text-sm text-muted-foreground">
                                 Need a previous release? All versions are available on GitHub.
                             </p>
                             <a
diff --git a/resources/js/pages/Privacy.tsx b/resources/js/pages/Privacy.tsx
index c1e50fb..541440f 100644
--- a/resources/js/pages/Privacy.tsx
+++ b/resources/js/pages/Privacy.tsx
@@ -7,6 +7,7 @@ import { PageHeader } from '@/components/ui/section-shell';
 import { FullLine } from '@/components/ui/full-line';
 import { Bullet, ProseBlock } from '@/components/ui/prose-block';
 import { PROSE_LINK } from '@/components/ui/prose-link';
+import { ITEM_TITLE } from '@/components/ui/grid-cell';
 
 interface Props {
     downloadUrls: { arm64: string; x86_64: string };
@@ -36,77 +37,77 @@ export default function Privacy({ downloadUrls }: Props) {
                 <Container width="md">
                     <FullLine />
                     <div className="p-6 sm:p-8">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             TablePro collects minimal data, never touches your database contents, and lets you opt out of analytics. The codebase is{' '}
                             <a href="https://github.com/TableProApp/TablePro" target="_blank" rel="noopener noreferrer" className={PROSE_LINK}>open source on GitHub</a> under the AGPLv3, so you can verify exactly what is collected and how it is handled.
                         </p>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             This policy covers the desktop and mobile Application, the Website at tablepro.app, and the account portal at tablepro.app/account.
                         </p>
                     </div>
 
                     <ProseBlock title="1. Data Controller">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             TablePro is the data controller for personal information described in this policy. For privacy questions, email{' '}
                             <a href="mailto:hello@tablepro.app" className={PROSE_LINK}>hello@tablepro.app</a>.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="2. What We Collect">
-                        <h3 className="text-base font-semibold text-foreground">Anonymous usage analytics (desktop app)</h3>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <h3 className={ITEM_TITLE}>Anonymous usage analytics (desktop app)</h3>
+                        <p className="mt-3 text-sm text-muted-foreground">
                             The Application can send anonymous usage analytics. It is{' '}
                             <strong className="text-foreground">enabled by default</strong> and can be turned off in{' '}
                             <strong className="text-foreground">Settings &gt; General &gt; "Share anonymous usage data"</strong>.
                         </p>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             When enabled, a 24-hour heartbeat sends three things to{' '}
                             <code className="rounded-key bg-muted px-1.5 py-0.5 text-xs text-foreground">https://api.tablepro.app/v1/analytics</code>:
                         </p>
-                        <ul className="mt-4 space-y-2 text-sm leading-relaxed text-muted-foreground">
+                        <ul className="mt-4 space-y-2 text-sm text-muted-foreground">
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Anonymous machine ID</strong>: SHA-256 hash of your hardware UUID. The raw UUID is never sent.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Environment</strong>: app version, macOS version, CPU architecture (arm64/x86_64), language.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Usage</strong>: which database engine types you connect to (e.g. "mysql", "postgresql") and the number of open connections.</span></li>
                         </ul>
-                        <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-4 text-sm text-muted-foreground">
                             That's it. No connection details, no hosts, no credentials, no queries, no database contents. All payloads are signed with HMAC-SHA256.
                         </p>
 
                         <h3 className="mt-8 text-base font-semibold text-foreground">Update checks</h3>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             The Application uses{' '}
                             <a href="https://sparkle-project.org" target="_blank" rel="noopener noreferrer" className={PROSE_LINK}>Sparkle</a> to check for updates. This sends your{' '}
                             <strong className="text-foreground">app version</strong>, <strong className="text-foreground">macOS version</strong>, and <strong className="text-foreground">CPU architecture</strong> to our update server. Update checks cannot be disabled separately.
                         </p>
 
                         <h3 className="mt-8 text-base font-semibold text-foreground">License validation</h3>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             If you have entered a paid License Key, the Application sends the License Key to our server when it starts and periodically afterward to confirm it is valid. No other data is sent in that request.
                         </p>
 
                         <h3 className="mt-8 text-base font-semibold text-foreground">License purchase and account portal</h3>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             When you purchase a License Key, our payment processor (LemonSqueezy or Polar, depending on your region) collects the data needed to complete the transaction: your email address, billing address, and payment information. We receive your email, License Key, and order metadata; we do not see your full payment details.
                         </p>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             The account portal at{' '}
                             <a href="/account" className={PROSE_LINK}>tablepro.app/account</a>{' '}
                             uses magic-link authentication. We store your email and an authentication token for that purpose.
                         </p>
 
                         <h3 className="mt-8 text-base font-semibold text-foreground">Newsletter and beta signup</h3>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             If you subscribe to the newsletter or apply for beta access, we store your email address for that purpose only. You can unsubscribe at any time from any email we send.
                         </p>
 
                         <h3 className="mt-8 text-base font-semibold text-foreground">Server logs</h3>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             Our servers record standard request logs (IP address, user agent, timestamp, URL) for security and abuse prevention. These logs are retained for up to 90 days.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="3. What We Do Not Collect">
-                        <ul className="space-y-3 text-sm leading-relaxed text-muted-foreground">
+                        <ul className="space-y-3 text-sm text-muted-foreground">
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">No database contents or queries</strong>. SQL you write and data you fetch never leave your machine.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">No connection credentials</strong>. Database hosts, usernames, and passwords stay in the macOS Keychain.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">No personal information in the desktop app</strong> beyond the email used at purchase.</span></li>
@@ -116,7 +117,7 @@ export default function Privacy({ downloadUrls }: Props) {
                     </ProseBlock>
 
                     <ProseBlock title="4. How We Use Information">
-                        <ul className="space-y-3 text-sm leading-relaxed text-muted-foreground">
+                        <ul className="space-y-3 text-sm text-muted-foreground">
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Anonymous analytics</strong>: understand which app versions, OS versions, and database types our users run, to prioritise compatibility and bug fixes.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">License validation</strong>: confirm a License Key is valid and active.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Updates</strong>: deliver new versions of the Application.</span></li>
@@ -127,8 +128,8 @@ export default function Privacy({ downloadUrls }: Props) {
                     </ProseBlock>
 
                     <ProseBlock title="5. Legal Basis (GDPR)">
-                        <p className="text-sm leading-relaxed text-muted-foreground">For users in the European Economic Area or the United Kingdom, the legal bases under GDPR / UK GDPR are:</p>
-                        <ul className="mt-3 space-y-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">For users in the European Economic Area or the United Kingdom, the legal bases under GDPR / UK GDPR are:</p>
+                        <ul className="mt-3 space-y-3 text-sm text-muted-foreground">
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Contract (Art. 6(1)(b))</strong>: processing payment, providing the License Key, account portal access.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Legitimate interest (Art. 6(1)(f))</strong>: anonymous analytics, abuse detection, server logs, retention of business records.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Consent (Art. 6(1)(a))</strong>: newsletter subscriptions, optional features you enable.</span></li>
@@ -137,26 +138,26 @@ export default function Privacy({ downloadUrls }: Props) {
                     </ProseBlock>
 
                     <ProseBlock title="6. Sharing With Third Parties">
-                        <p className="text-sm leading-relaxed text-muted-foreground">We share personal data only with the providers needed to operate the Services:</p>
-                        <ul className="mt-3 space-y-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">We share personal data only with the providers needed to operate the Services:</p>
+                        <ul className="mt-3 space-y-3 text-sm text-muted-foreground">
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">LemonSqueezy</strong> or <strong className="text-foreground">Polar</strong>: payment processing for License Key purchases.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Email delivery providers</strong>: transactional emails (magic links, receipts, newsletter). We use providers that do not sell or share contact data.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Hosting providers</strong>: server infrastructure for the Website, account portal, and analytics endpoint.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Plausible Analytics (self-hosted)</strong>: aggregate, cookie-less Website analytics. No personal identifiers, no IP storage.</span></li>
                         </ul>
-                        <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-4 text-sm text-muted-foreground">
                             We do not sell, rent, or share personal data with advertisers.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="7. International Data Transfers">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             Our servers operate in multiple regions. When you interact with TablePro, your data may be transferred to or processed in countries outside your own. Where required, transfers from the EEA / UK rely on Standard Contractual Clauses or other approved mechanisms.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="8. Data Retention">
-                        <ul className="space-y-3 text-sm leading-relaxed text-muted-foreground">
+                        <ul className="space-y-3 text-sm text-muted-foreground">
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Anonymous analytics</strong>: aggregated indefinitely; the SHA-256 machine ID has no link to your identity.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Account and license data</strong>: kept while your license is active and for up to 7 years afterward for tax and audit purposes.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Newsletter subscribers</strong>: until you unsubscribe.</span></li>
@@ -166,10 +167,10 @@ export default function Privacy({ downloadUrls }: Props) {
                     </ProseBlock>
 
                     <ProseBlock title="9. Your Rights">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             Subject to local law, you have the right to:
                         </p>
-                        <ul className="mt-3 space-y-3 text-sm leading-relaxed text-muted-foreground">
+                        <ul className="mt-3 space-y-3 text-sm text-muted-foreground">
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Access</strong>: request a copy of personal data we hold about you.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Rectification</strong>: correct inaccurate data.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Erasure</strong>: ask us to delete your data, subject to legal retention obligations.</span></li>
@@ -179,44 +180,44 @@ export default function Privacy({ downloadUrls }: Props) {
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Withdraw consent</strong>: at any time, where processing is based on consent.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Lodge a complaint</strong>: with your local data protection authority.</span></li>
                         </ul>
-                        <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-4 text-sm text-muted-foreground">
                             To exercise any of these rights, email{' '}
                             <a href="mailto:hello@tablepro.app" className={PROSE_LINK}>hello@tablepro.app</a>. We respond within 30 days.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="10. CCPA (California Residents)">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             If you are a California resident, the California Consumer Privacy Act gives you the right to know what personal information we collect, to request deletion, to opt out of "sale" of personal information, and to non-discrimination for exercising these rights. We do not sell personal information.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="11. Children's Privacy">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             TablePro is not directed at children under 16. We do not knowingly collect personal data from children. If you believe a child has provided us data, contact us and we will delete it.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="12. Security">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             We use industry-standard measures to protect data: HTTPS for all network traffic, password hashing with modern algorithms, scoped API tokens, and least-privilege access for our team. No system is perfectly secure; if you suspect a vulnerability, email{' '}
                             <a href="mailto:hello@tablepro.app" className={PROSE_LINK}>hello@tablepro.app</a>.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="13. Website Cookies">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             The marketing site uses two functional cookies. No tracking, no advertising, no third-party SDKs.
                         </p>
-                        <ul className="mt-4 space-y-3 text-sm leading-relaxed text-muted-foreground">
+                        <ul className="mt-4 space-y-3 text-sm text-muted-foreground">
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">nl_dismissed_at</strong> (90 days): records when you dismissed the newsletter prompt so we don't reshow it. Lawful basis: legitimate interest.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">nl_subscribed</strong> (365 days): records that you subscribed so we don't reprompt. Lawful basis: legitimate interest, performance of a subscription you initiated.</span></li>
                         </ul>
                     </ProseBlock>
 
                     <ProseBlock title="14. Local Storage on Your Device">
-                        <p className="text-sm leading-relaxed text-muted-foreground">Sensitive data stays on your Mac:</p>
-                        <ul className="mt-4 space-y-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">Sensitive data stays on your Mac:</p>
+                        <ul className="mt-4 space-y-3 text-sm text-muted-foreground">
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Database credentials</strong>: macOS Keychain.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">Query history</strong>: local SQLite database.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">App settings</strong>: standard macOS UserDefaults.</span></li>
@@ -225,7 +226,7 @@ export default function Privacy({ downloadUrls }: Props) {
                     </ProseBlock>
 
                     <ProseBlock title="15. Source Code Transparency">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             The Application source is on{' '}
                             <a href="https://github.com/TableProApp/TablePro" target="_blank" rel="noopener noreferrer" className={PROSE_LINK}>GitHub</a> under the AGPLv3. The analytics code is in{' '}
                             <code className="rounded-key bg-muted px-1.5 py-0.5 text-xs text-foreground">TablePro/Core/Services/AnalyticsService.swift</code>. You can verify what is sent.
@@ -233,13 +234,13 @@ export default function Privacy({ downloadUrls }: Props) {
                     </ProseBlock>
 
                     <ProseBlock title="16. Changes to This Policy">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             We may update this policy. Material changes will be posted on this page with a new "Last updated" date and, where required by law, notified to users.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="17. Contact">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             For privacy questions, security reports, or anything else, email{' '}
                             <a href="mailto:hello@tablepro.app" className={PROSE_LINK}>hello@tablepro.app</a>.
                         </p>
diff --git a/resources/js/pages/RefundPolicy.tsx b/resources/js/pages/RefundPolicy.tsx
index 973a58f..36ede51 100644
--- a/resources/js/pages/RefundPolicy.tsx
+++ b/resources/js/pages/RefundPolicy.tsx
@@ -32,7 +32,7 @@ export default function RefundPolicy({ downloadUrls }: Props) {
 
                 <Container width="md">
                     <FullLine />
-                    <div className="space-y-4 p-6 text-sm leading-relaxed text-muted-foreground sm:p-8">
+                    <div className="space-y-4 p-6 text-sm text-muted-foreground sm:p-8">
                         <p>
                             7-day money-back guarantee on all paid plans. The window starts on the date of purchase, or on the most recent renewal for yearly subscriptions.
                         </p>
diff --git a/resources/js/pages/Terms.tsx b/resources/js/pages/Terms.tsx
index 716a491..a2253ba 100644
--- a/resources/js/pages/Terms.tsx
+++ b/resources/js/pages/Terms.tsx
@@ -36,7 +36,7 @@ export default function Terms({ downloadUrls }: Props) {
                 <Container width="md">
                     <FullLine />
                     <div className="p-6 sm:p-8">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             These Terms of Service govern your use of TablePro, the website at{' '}
                             <a href="https://tablepro.app" className={PROSE_LINK}>tablepro.app</a>,
                             the desktop application, the iOS application, and any related services. By downloading, installing, accessing, or using
@@ -45,7 +45,7 @@ export default function Terms({ downloadUrls }: Props) {
                     </div>
 
                     <ProseBlock title="1. Definitions">
-                        <ul className="space-y-3 text-sm leading-relaxed text-muted-foreground">
+                        <ul className="space-y-3 text-sm text-muted-foreground">
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">"TablePro", "we", "us", "our"</strong> refers to the TablePro project and its maintainers.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">"Application"</strong> means the TablePro desktop and mobile software, including all updates and plugins.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span><strong className="text-foreground">"Website"</strong> means tablepro.app, docs.tablepro.app, and any related domains we operate.</span></li>
@@ -56,39 +56,39 @@ export default function Terms({ downloadUrls }: Props) {
                     </ProseBlock>
 
                     <ProseBlock title="2. Open Source License (Free Use)">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             The Application source code is licensed under the{' '}
                             <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="noopener noreferrer" className={PROSE_LINK}>GNU Affero General Public License v3 (AGPLv3)</a>.
                             You may use, modify, and distribute it under those terms. The full license text is at{' '}
                             <a href="https://github.com/TableProApp/TablePro/blob/main/LICENSE" target="_blank" rel="noopener noreferrer" className={PROSE_LINK}>github.com/TableProApp/TablePro/LICENSE</a>.
                         </p>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             The free tier covers core functionality and is enough for most personal and commercial use. No registration is required to use the free tier.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="3. Commercial License (Paid Features)">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             Some advanced features require a paid License Key. When you purchase a License Key, you receive a non-exclusive, non-transferable right to enable those features for the number of devices and the duration covered by your plan.
                         </p>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             License Keys are personal. You may not share, sublicense, sell, rent, or otherwise transfer a License Key to any third party. Sharing a License Key may result in immediate termination without refund.
                         </p>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             Refund eligibility is described in the{' '}
                             <a href="/refund-policy" className={PROSE_LINK}>Refund Policy</a>.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="4. Account and Security">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             License Keys are managed through an account portal accessed by magic link sent to the email address you used at purchase. You are responsible for keeping that email account secure. We are not responsible for unauthorized access to your account caused by a compromised email account.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="5. Acceptable Use">
-                        <p className="text-sm leading-relaxed text-muted-foreground">You agree not to:</p>
-                        <ul className="mt-3 space-y-2 text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">You agree not to:</p>
+                        <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
                             <li className="flex items-start gap-2"><Bullet /><span>Use the Application or Services in violation of any law or third-party right.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span>Reverse engineer or circumvent license enforcement on paid features beyond what AGPLv3 explicitly permits.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span>Attempt to gain unauthorized access to our infrastructure or other users' accounts.</span></li>
@@ -98,100 +98,100 @@ export default function Terms({ downloadUrls }: Props) {
                     </ProseBlock>
 
                     <ProseBlock title="6. Your Responsibilities">
-                        <p className="text-sm leading-relaxed text-muted-foreground">You are solely responsible for:</p>
-                        <ul className="mt-3 space-y-2 text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">You are solely responsible for:</p>
+                        <ul className="mt-3 space-y-2 text-sm text-muted-foreground">
                             <li className="flex items-start gap-2"><Bullet /><span>Securing your database credentials and License Keys.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span>Backing up your data before running queries through the Application.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span>Having authorization to access the databases you connect to.</span></li>
                             <li className="flex items-start gap-2"><Bullet /><span>Following applicable laws when using the Application and Services.</span></li>
                         </ul>
-                        <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-4 text-sm text-muted-foreground">
                             You acknowledge and agree that your use of the Application can affect your databases, and you accept{' '}
                             <strong className="text-foreground">sole responsibility for any errors, malfunctions, or corruption of any database</strong> caused by your use of the Application, including queries you run, scripts you execute, and changes you commit.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="7. Disclaimer of Warranties">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             THE APPLICATION AND SERVICES ARE PROVIDED <strong className="text-foreground">"AS IS"</strong> AND <strong className="text-foreground">"AS AVAILABLE"</strong> WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, ACCURACY, OR UNINTERRUPTED OPERATION.
                         </p>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             We do not warrant that the Application will meet your requirements, be compatible with any specific database version, operate without error, or that any errors will be corrected.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="8. Limitation of Liability">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN NO EVENT SHALL TABLEPRO OR ITS CONTRIBUTORS BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, CONSEQUENTIAL, EXEMPLARY, OR PUNITIVE DAMAGES, INCLUDING BUT NOT LIMITED TO: LOSS OF DATA, LOSS OF DATABASE CONTENTS, DATA CORRUPTION, LOSS OF PROFITS, LOSS OF BUSINESS, BUSINESS INTERRUPTION, LOSS OF GOODWILL, OR THE COST OF SUBSTITUTE GOODS OR SERVICES, ARISING OUT OF OR RELATED TO YOUR USE OF THE APPLICATION OR SERVICES, EVEN IF WE HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
                         </p>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             Where liability cannot be disclaimed under applicable law, our total cumulative liability for all claims arising from or related to the Application and Services is limited to the <strong className="text-foreground">greater of (a) ten US dollars ($10) or (b) the total amount you paid us during the twelve (12) months preceding the event giving rise to the claim</strong>.
                         </p>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             Some jurisdictions do not allow the exclusion or limitation of certain damages. In such jurisdictions, our liability is limited to the minimum extent permitted by law.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="9. Indemnification">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             You agree to indemnify and hold harmless TablePro and its contributors from any claim, demand, loss, or damage (including reasonable legal fees) arising out of your use of the Application or Services in violation of these Terms or any third-party right.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="10. Updates and Maintenance">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             We may release updates, fixes, and new features at our discretion. We have no obligation to maintain, update, or provide support for any version of the Application. Older versions may stop receiving security updates.
                         </p>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             Some Services (license validation, update checks) require network access to function. We do not guarantee continuous availability of these Services and may discontinue them with reasonable notice.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="11. Termination">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             You may stop using the Application and Services at any time. We may suspend or terminate your access to paid features without refund if you breach these Terms, including the Acceptable Use clause.
                         </p>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             Sections that by their nature survive termination (Disclaimer, Limitation of Liability, Indemnification, Governing Law) will continue to apply after termination.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="12. Privacy">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             Our handling of personal data is described in the{' '}
                             <a href="/privacy" className={PROSE_LINK}>Privacy Policy</a>. By using the Application or Services, you agree to that policy.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="13. Changes to These Terms">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             We may update these Terms from time to time. Material changes will be announced on this page with a new "Last updated" date. Continuing to use the Application or Services after the update means you accept the new Terms.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="14. Governing Law and Dispute Resolution">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             These Terms are governed by the laws of the Socialist Republic of Vietnam, without regard to conflict of law principles. Any dispute arising out of or relating to these Terms or your use of the Application or Services shall be resolved in the competent courts of Vietnam.
                         </p>
-                        <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
+                        <p className="mt-3 text-sm text-muted-foreground">
                             If you reside in a jurisdiction with mandatory consumer protection laws, those laws apply to the extent they cannot be waived.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="15. Severability">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             If any provision of these Terms is held invalid or unenforceable by a court of competent jurisdiction, the remaining provisions remain in full force and effect.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="16. Entire Agreement">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             These Terms, together with the AGPLv3 license, the Privacy Policy, and the Refund Policy, constitute the entire agreement between you and TablePro regarding the Application and Services and supersede any prior agreements.
                         </p>
                     </ProseBlock>
 
                     <ProseBlock title="17. Contact">
-                        <p className="text-sm leading-relaxed text-muted-foreground">
+                        <p className="text-sm text-muted-foreground">
                             For questions about these Terms, email{' '}
                             <a href="mailto:hello@tablepro.app" className={PROSE_LINK}>hello@tablepro.app</a>{' '}
                             or open an issue at{' '}

From ab51d34b3ebbe97af1c380e28e6148c7c4bde662 Mon Sep 17 00:00:00 2001
From: Ngo Quoc Dat <datlechin@gmail.com>
Date: Sat, 15 Aug 2026 12:10:48 +0700
Subject: [PATCH 2/2] refactor(ui): one copy button, one closing CTA, one
 trailing border
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**The copy control existed twice**, down to the same 1200ms timeout, the same
two toast strings and the same cleanup effect — but with forked chrome, one
having a visible boundary and one not. It is one component now, and the timeout
cleanup lives with it rather than being re-remembered per host.

**The closing CTA existed twice**, differing in one sentence and in whether its
button row could hold a second control. The sentence was the OS requirement line
— which is the one thing a reader actually checks before downloading, and the
two pages disagreed about it. It now says the same thing on both, and says what
every credible Mac app puts under its download button: the OS floor and the
architectures.

**The benchmarks grid left a border hanging.** Below sm its three cells stack
and each draws `border-b`, so the third drew one immediately above the section's
own rule — two lines at one height inside the container width. `last:border-b-0`
closes it. The other four hand-rolled grids were checked and are correct: they
put the border on the first of two cells, not on every cell, so there is nothing
for a `last:` to undo.

Also verified and deliberately left alone: `Container width="md"` on the four
legal and download pages. That narrows the *text* to a readable measure, which
is the right call for long prose, and it does not affect the rules — those bleed
past the container by design.
---
 .../js/components/landing/agents-mcp.tsx      | 49 +------------
 .../js/components/landing/closing-cta.tsx     | 49 +++++++++++++
 .../js/components/landing/footer-cta.tsx      | 37 +---------
 resources/js/components/ui/copy-button.tsx    | 71 +++++++++++++++++++
 resources/js/pages/Compare.tsx                | 31 ++------
 resources/js/pages/DatabaseClient.tsx         | 32 ++-------
 6 files changed, 133 insertions(+), 136 deletions(-)
 create mode 100644 resources/js/components/landing/closing-cta.tsx
 create mode 100644 resources/js/components/ui/copy-button.tsx

diff --git a/resources/js/components/landing/agents-mcp.tsx b/resources/js/components/landing/agents-mcp.tsx
index 663ee85..fe78af9 100644
--- a/resources/js/components/landing/agents-mcp.tsx
+++ b/resources/js/components/landing/agents-mcp.tsx
@@ -1,7 +1,5 @@
-import { useEffect, useRef, useState } from 'react';
-import { Check, Copy } from 'lucide-react';
-import { toast } from 'sonner';
 import { CodeBlock } from '@/components/ui/code';
+import CopyButton from '@/components/ui/copy-button';
 import Container from '@/components/ui/container';
 import { FullLine } from '@/components/ui/full-line';
 import { Ledger, LedgerRow } from '@/components/ui/ledger';
@@ -70,49 +68,6 @@ function Tool({ children }: { children: string }) {
     return <span className="font-mono text-sm">{children}</span>;
 }
 
-function CopyButton() {
-    const [copied, setCopied] = useState(false);
-    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-    useEffect(
-        () => () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        },
-        [],
-    );
-
-    async function handleCopy() {
-        try {
-            await navigator.clipboard.writeText(CONFIG_JSON);
-            toast('Copied');
-            setCopied(true);
-
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-            timeoutRef.current = setTimeout(() => setCopied(false), 1200);
-        } catch {
-            toast.error('Could not copy. Select the text and copy it by hand.');
-        }
-    }
-
-    return (
-        <button
-            type="button"
-            onClick={handleCopy}
-            aria-label="Copy configuration"
-            className="inline-flex size-7 items-center justify-center rounded-key text-muted-foreground transition-colors hover:text-foreground"
-        >
-            {copied ? (
-                <Check className="size-4 text-primary-strong" strokeWidth={1.75} aria-hidden="true" />
-            ) : (
-                <Copy className="size-4" strokeWidth={1.75} aria-hidden="true" />
-            )}
-        </button>
-    );
-}
 
 const aiSafetyFaq = relocatedFaq('Can the AI drop a table on production?');
 
@@ -139,7 +94,7 @@ export default function AgentsMcp() {
                             <span className="font-mono text-2xs text-muted-foreground">
                                 claude_desktop_config.json
                             </span>
-                            <CopyButton />
+                            <CopyButton value={CONFIG_JSON} label="the MCP configuration" />
                         </div>
 
                         <CodeBlock label="MCP client configuration">
diff --git a/resources/js/components/landing/closing-cta.tsx b/resources/js/components/landing/closing-cta.tsx
new file mode 100644
index 0000000..acc7746
--- /dev/null
+++ b/resources/js/components/landing/closing-cta.tsx
@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+import Button from '@/components/ui/button';
+import Container from '@/components/ui/container';
+import { FullLine } from '@/components/ui/full-line';
+import { AppleGlyph } from '@/components/ui/glyph';
+
+interface ClosingCtaProps {
+    /**
+     * Anything to place beside the download button — a secondary link, a second
+     * platform. Given one, the row goes horizontal from sm.
+     */
+    children?: ReactNode;
+}
+
+/**
+ * The block that closes a comparison or database page.
+ *
+ * It existed twice, differing only in one sentence and in whether its button
+ * row could hold a second control — so the two pages disagreed on the OS
+ * requirement line, which is the sentence a reader actually checks before
+ * downloading. It says the same thing on both now, and it says the thing every
+ * credible Mac app puts under its download button: the OS floor and the
+ * architectures.
+ */
+export default function ClosingCta({ children }: ClosingCtaProps) {
+    return (
+        <>
+            <div className="h-12 sm:h-16 lg:h-24" />
+
+            <Container>
+                <FullLine />
+                <div className="px-4 py-12 text-center sm:py-16">
+                    <h2 className="text-3xl font-bold sm:text-4xl">Try TablePro for free.</h2>
+                    <p className="mt-3 text-muted-foreground">
+                        Free and open source. macOS 14+, Apple Silicon and Intel. No account.
+                    </p>
+                    <div className="mt-6 flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
+                        <Button href="/download">
+                            <AppleGlyph />
+                            Download for Mac
+                        </Button>
+                        {children}
+                    </div>
+                </div>
+                <FullLine />
+            </Container>
+        </>
+    );
+}
diff --git a/resources/js/components/landing/footer-cta.tsx b/resources/js/components/landing/footer-cta.tsx
index 1948ccd..3f33b86 100644
--- a/resources/js/components/landing/footer-cta.tsx
+++ b/resources/js/components/landing/footer-cta.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Check, Copy } from 'lucide-react';
 import { toast } from 'sonner';
 import { buttonClasses } from '@/components/ui/button';
+import CopyButton from '@/components/ui/copy-button';
 import Container from '@/components/ui/container';
 import { FullLine } from '@/components/ui/full-line';
 import { PANEL_TITLE, cellBorders, GridCell, type ColumnMap } from '@/components/ui/grid-cell';
@@ -97,7 +98,6 @@ const SUBMIT_CLASS = buttonClasses('primary', 'sm', 'shrink-0 disabled:opacity-5
 export default function FooterCTA() {
     const [showBeta, setShowBeta] = useState(false);
     const [subscriberCount, setSubscriberCount] = useState<number | null>(null);
-    const [copied, setCopied] = useState(false);
     const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
     const statsAnchorRef = useRef<HTMLDivElement>(null);
     const betaForm = useEmailForm('/beta/signup');
@@ -149,14 +149,6 @@ export default function FooterCTA() {
         };
     }, []);
 
-    useEffect(
-        () => () => {
-            if (copyTimeoutRef.current) {
-                clearTimeout(copyTimeoutRef.current);
-            }
-        },
-        [],
-    );
 
     function trackEvent(name: string, payload: Record<string, string>) {
         if (typeof window === 'undefined') {
@@ -172,20 +164,6 @@ export default function FooterCTA() {
         }
     }
 
-    async function handleCopyBrew() {
-        try {
-            await navigator.clipboard.writeText(BREW_COMMAND);
-            toast('Copied');
-            setCopied(true);
-
-            if (copyTimeoutRef.current) {
-                clearTimeout(copyTimeoutRef.current);
-            }
-            copyTimeoutRef.current = setTimeout(() => setCopied(false), 1200);
-        } catch {
-            toast.error('Could not copy. Select the text and copy it by hand.');
-        }
-    }
 
     function handleBetaSubmit(event: React.FormEvent) {
         event.preventDefault();
@@ -237,18 +215,7 @@ export default function FooterCTA() {
                             <code tabIndex={0} className="min-w-0 flex-1 overflow-x-auto rounded-lg border border-rule px-3 py-2 font-mono text-xs whitespace-nowrap text-muted-foreground">
                                 {BREW_COMMAND}
                             </code>
-                            <button
-                                type="button"
-                                onClick={handleCopyBrew}
-                                aria-label={`Copy ${BREW_COMMAND}`}
-                                className="inline-flex size-9 shrink-0 items-center justify-center rounded-lg border border-rule text-muted-foreground transition-colors hover:text-foreground"
-                            >
-                                {copied ? (
-                                    <Check className="size-4 text-primary-strong" strokeWidth={1.75} aria-hidden="true" />
-                                ) : (
-                                    <Copy className="size-4" strokeWidth={1.75} aria-hidden="true" />
-                                )}
-                            </button>
+                            <CopyButton value={BREW_COMMAND} label="the Homebrew command" className="size-9 rounded-lg border border-rule" />
                         </div>
 
                         <p className="mt-4 text-sm text-muted-foreground">
diff --git a/resources/js/components/ui/copy-button.tsx b/resources/js/components/ui/copy-button.tsx
new file mode 100644
index 0000000..649a789
--- /dev/null
+++ b/resources/js/components/ui/copy-button.tsx
@@ -0,0 +1,71 @@
+import { useEffect, useRef, useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { toast } from 'sonner';
+import { cn } from '@/lib/utils';
+
+interface CopyButtonProps {
+    /** What lands on the clipboard. */
+    value: string;
+    /** Names the thing being copied, for the button's accessible name. */
+    label: string;
+    className?: string;
+}
+
+/**
+ * Copy to clipboard, with the tick that confirms it.
+ *
+ * The identical logic existed twice — the MCP config block and the Homebrew
+ * command — down to the same 1200ms timeout, the same toast strings and the
+ * same cleanup effect, but with forked chrome: one had a visible boundary and
+ * one did not.
+ *
+ * The timeout is cleared on unmount and before each restart, because a copy
+ * button that unmounts mid-timer otherwise sets state on a gone component.
+ */
+export default function CopyButton({ value, label, className }: CopyButtonProps) {
+    const [copied, setCopied] = useState(false);
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    useEffect(
+        () => () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        },
+        [],
+    );
+
+    async function handleCopy() {
+        try {
+            await navigator.clipboard.writeText(value);
+            toast('Copied');
+            setCopied(true);
+
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            timeoutRef.current = setTimeout(() => setCopied(false), 1200);
+        } catch {
+            toast.error('Could not copy. Select the text and copy it by hand.');
+        }
+    }
+
+    return (
+        <button
+            type="button"
+            onClick={handleCopy}
+            aria-label={`Copy ${label}`}
+            className={cn(
+                'inline-flex size-7 shrink-0 items-center justify-center rounded-key text-muted-foreground',
+                'transition-colors duration-(--dur-tap) ease-(--ease-feedback) hover:text-foreground',
+                className,
+            )}
+        >
+            {copied ? (
+                <Check className="size-4 text-primary-strong" strokeWidth={1.75} aria-hidden="true" />
+            ) : (
+                <Copy className="size-4" strokeWidth={1.75} aria-hidden="true" />
+            )}
+        </button>
+    );
+}
diff --git a/resources/js/pages/Compare.tsx b/resources/js/pages/Compare.tsx
index 5e50913..401ec0b 100644
--- a/resources/js/pages/Compare.tsx
+++ b/resources/js/pages/Compare.tsx
@@ -12,6 +12,7 @@ import FaqList from '@/components/ui/faq-list';
 import ThemedImage from '@/components/ui/themed-image';
 import DataTable, { TABLE_COLUMN_RULE, TABLE_ROW_RULE } from '@/components/ui/data-table';
 import { ITEM_TITLE } from '@/components/ui/grid-cell';
+import ClosingCta from '@/components/landing/closing-cta';
 
 interface Props {
     slug: string;
@@ -179,7 +180,7 @@ export default function Compare({ slug, downloadUrls, githubStars }: Props) {
                                         download: 'Download size',
                                     };
                                     return (
-                                        <div key={metric} className="border-b border-rule p-6 sm:border-b-0 sm:border-r sm:p-8 sm:last:border-r-0">
+                                        <div key={metric} className="border-b border-rule p-6 last:border-b-0 sm:border-b-0 sm:border-r sm:p-8 sm:last:border-r-0">
                                             <p className="font-mono text-xs uppercase tracking-widest text-muted-foreground">{labels[metric]}</p>
                                             <div className="mt-4 flex items-baseline gap-3">
                                                 <span className="text-3xl font-bold text-primary-strong">{comp.benchmarks!.tablePro[metric]}</span>
@@ -325,32 +326,8 @@ export default function Compare({ slug, downloadUrls, githubStars }: Props) {
                         <FullLine />
                     </>
                 )}
-
-                {/* CTA */}
-                <div className="h-12 sm:h-16 lg:h-24" />
-
-                <Container>
-                    <FullLine />
-                    <div className="px-4 py-12 text-center sm:py-16">
-                        <h2 className="text-3xl font-bold sm:text-4xl">
-                            Try TablePro for free.
-                        </h2>
-                        <p className="mt-3 text-muted-foreground">
-                            Free and open-source. No account required.
-                        </p>
-                        <div className="mt-6">
-                            <Button
-                                href="/download"
-                            >
-                                <AppleGlyph />
-                                Download for Mac
-                            </Button>
-                        </div>
-                    </div>
-                    <FullLine />
-                </Container>
-
-                <div className="h-12 sm:h-16 lg:h-24" />
+                <ClosingCta />
+<div className="h-12 sm:h-16 lg:h-24" />
         </LandingLayout>
     );
 }
diff --git a/resources/js/pages/DatabaseClient.tsx b/resources/js/pages/DatabaseClient.tsx
index 123aa25..d1bfa7e 100644
--- a/resources/js/pages/DatabaseClient.tsx
+++ b/resources/js/pages/DatabaseClient.tsx
@@ -11,6 +11,7 @@ import { AppleGlyph, CheckGlyph } from '@/components/ui/glyph';
 import FaqList from '@/components/ui/faq-list';
 import ThemedImage from '@/components/ui/themed-image';
 import { ITEM_TITLE } from '@/components/ui/grid-cell';
+import ClosingCta from '@/components/landing/closing-cta';
 
 interface Props {
     slug: string;
@@ -319,37 +320,14 @@ export default function DatabaseClient({ slug, downloadUrls, githubStars }: Prop
                         <FullLine />
                     </>
                 )}
-
-                {/* CTA */}
-                <div className="h-12 sm:h-16 lg:h-24" />
-
-                <Container>
-                    <FullLine />
-                    <div className="px-4 py-12 text-center sm:py-16">
-                        <h2 className="text-3xl font-bold sm:text-4xl">
-                            Try TablePro for free.
-                        </h2>
-                        <p className="mt-3 text-muted-foreground">
-                            Free and open-source. macOS 14+. Apple Silicon and Intel.
-                        </p>
-                        <div className="mt-6 flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
-                            <Button
-                                href="/download"
-                            >
-                                <AppleGlyph />
-                                Download for Mac
-                            </Button>
-                            <Button variant="secondary"
+                <ClosingCta>
+                    <Button variant="secondary"
                                 href={`https://docs.tablepro.app/databases/${db.docsPath}`}
                             >
                                 Setup guide
                             </Button>
-                        </div>
-                    </div>
-                    <FullLine />
-                </Container>
-
-                <div className="h-12 sm:h-16 lg:h-24" />
+                </ClosingCta>
+<div className="h-12 sm:h-16 lg:h-24" />
         </LandingLayout>
     );
 }