Polish: make the row treatment reachable, number every rule, and correct three comments that were wrong

resources/css/app.css

@@ -218,6 +218,7 @@ html {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     animation-timeline: none !important;
+    transition-delay: 0s !important;
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
@@ -233,6 +234,9 @@ html {
  *   effect the setting exists to prevent.
  * - A progress-based `animation-timeline` ignores duration entirely, so a
  *   0.01ms duration does not disable it.
+ * - `transition-delay` is the same omission as `animation-delay`: collapsing a
+ *   transition's duration still leaves it holding its start value for the whole
+ *   delay.
  *
  * `animation-iteration-count: 1` is also not an off switch: it truncates a loop
  * to a single 0.01ms pass, freezing it mid-transform. Anything that loops needs
@@ -338,13 +342,16 @@ html {
  *
  * The other half of the arithmetic: the layout's middle column is
  * `minmax(0, 80rem)`, matching Container's own max-width. At the old
- * `--breakpoint-2xl` (96rem) the container floated free of its column on wide
- * viewports and these numbers drifted with it. Changing either value breaks
- * this.
+ * `--breakpoint-2xl` (96rem) the column outgrew the container from 1360px
+ * upward — 80rem of content plus two 40px gutters — so the container floated
+ * free of it and these numbers would drift inward with it. Changing either
+ * value breaks this.
  *
- * Desktop only, deliberately. Below lg the gutter columns are not rendered at
- * all, so there is nowhere for the numbers to go, and the page falls back to
- * the hairline system on its own.
+ * Numbering starts at lg, one breakpoint after the gutter columns appear at md.
+ * That is not an oversight: at 768-1023px the gutter is 40px of a much narrower
+ * viewport, and an ordinal there crowds the content rail. The columns are not
+ * empty in that band — they carry the same hairline frame as the rest of the
+ * page — they simply do not carry numbers yet.
  */
 main {
   counter-reset: rule;
@@ -397,18 +404,20 @@ main {
 }
 .blog-article h2 {
   color: var(--foreground);
-  font-size: 1.875rem;
+  font-size: var(--text-3xl);
+  line-height: var(--text-3xl--line-height);
+  letter-spacing: var(--text-3xl--letter-spacing);
   font-weight: 700;
-  letter-spacing: -0.02em;
   margin-top: 2.5em;
   margin-bottom: 0.75em;
   scroll-margin-top: 6rem;
 }
 .blog-article h3 {
   color: var(--foreground);
-  font-size: 1.375rem;
+  font-size: var(--text-xl);
+  line-height: var(--text-xl--line-height);
+  letter-spacing: var(--text-xl--letter-spacing);
   font-weight: 600;
-  letter-spacing: -0.015em;
   margin-top: 2em;
   margin-bottom: 0.5em;
 }

resources/js/components/landing/agents-mcp.tsx

@@ -65,7 +65,7 @@ function Chips({ items, label }: { items: string[]; label: string }) {
 
 /** A tool or function name inside prose. */
 function Tool({ children }: { children: string }) {
-    return <span className="font-mono text-[13px]">{children}</span>;
+    return <span className="font-mono text-sm">{children}</span>;
 }
 
 function CopyButton() {
@@ -101,7 +101,7 @@ function CopyButton() {
             type="button"
             onClick={handleCopy}
             aria-label="Copy configuration"
-            className="inline-flex size-7 items-center justify-center rounded-[4px] text-muted-foreground transition-colors hover:text-foreground"
+            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" />

resources/js/components/landing/database-grid.tsx

@@ -57,16 +57,17 @@ function fillerVisibility(index: number, count: number): string {
 }
 
 const TILE_CLASS = `group flex flex-col items-center gap-3 text-center ${CELL_DENSITY.compact}`;
+/** Tiles are links, so the shared row-selection treatment applies on hover AND focus. */
 const TILE_HOVER = 'transition-colors';
 
 function TileBody({ database }: { database: DatabaseTile }) {
     return (
         <>
             <DatabaseMark icon={database.icon} monogram={database.monogram} name={database.name} />
             <span className="text-xs leading-tight font-medium text-muted-foreground">{database.name}</span>
-            <span className="font-mono text-[10px] text-muted-foreground">{database.port}</span>
+            <span className="font-mono text-2xs text-muted-foreground">{database.port}</span>
             <span
-                className="font-mono text-[10px] text-muted-foreground"
+                className="font-mono text-2xs text-muted-foreground"
                 title={database.distribution === 'builtin' ? 'Bundled with the app' : 'Downloads on demand'}
             >
                 {database.distribution === 'builtin' ? '●' : '○'}
@@ -181,6 +182,7 @@ export default function DatabaseGrid() {
                                     <a
                                         key={database.name}
                                         href={database.href}
+                                        data-row
                                         className={`${TILE_CLASS} ${TILE_HOVER} ${borders}`}
                                     >
                                         <TileBody database={database} />
@@ -190,6 +192,7 @@ export default function DatabaseGrid() {
 
                             <a
                                 href={REQUEST_DATABASE_HREF}
+                                data-row
                                 target="_blank"
                                 rel="noopener noreferrer"
                                 className={`${TILE_CLASS} ${TILE_HOVER} ${cellBorders(visible.length, COLS, itemCount)}`}

resources/js/components/landing/pricing.tsx

@@ -402,7 +402,7 @@ export default function Pricing({ paymentProvider, teamMinSeats }: { paymentProv
                             >
                                 {c.label}
                                 {c.badge && (
-                                    <span className="ml-1.5 rounded-full bg-primary/15 px-1.5 py-0.5 text-[10px] font-semibold text-primary-strong">
+                                    <span className="ml-1.5 rounded-full bg-primary/15 px-1.5 py-0.5 text-2xs font-semibold text-primary-strong">
                                         {c.badge}
                                     </span>
                                 )}

resources/js/components/landing/switch-from.tsx

@@ -80,7 +80,7 @@ export default function SwitchFrom() {
                                 <a
                                     key={comparison.slug}
                                     href={`/compare/${comparison.slug}`}
-                                    className="rounded-[4px] border border-rule-strong px-2 py-1 font-mono text-2xs whitespace-nowrap transition-colors hover:text-foreground"
+                                    className="rounded-key border border-rule-strong px-2 py-1 font-mono text-2xs whitespace-nowrap transition-colors duration-(--dur-tap) ease-(--ease-feedback) hover:border-primary/40 hover:text-foreground"
                                 >
                                     {comparison.name}
                                 </a>

resources/js/components/ui/full-line.tsx

@@ -24,13 +24,17 @@ export function FullLine({ className }: { className?: string }) {
  * A FullLine carrying a short accent segment, used once per section on the
  * label rule so the eyebrow reads as a tick on a ruler.
  *
+ * Numbered like any other rule. It draws a visually identical hairline, so
+ * skipping it made the ordinal the position of *some* rules rather than of
+ * the rule — the first one in every section was silently missing.
+ *
  * The segment starts at `100vw + 1rem`, not `100vw`: the rule bleeds from the
  * container's content edge, but every section label is indented by `pl-4`, so
  * anchoring to the content edge left the tick 16px adrift of the text it marks.
  */
 export function AccentLine() {
     return (
-        <div className="relative -ml-[100vw] h-px w-[200vw] bg-rule" aria-hidden="true">
+        <div className="rule-numbered relative -ml-[100vw] h-px w-[200vw] bg-rule" aria-hidden="true">
             <div className="absolute h-px w-8 bg-primary" style={{ left: 'calc(100vw + 1rem)' }} />
         </div>
     );

resources/js/components/ui/kbd.tsx

@@ -8,7 +8,7 @@ export default function Kbd({ children, className }: { children: React.ReactNode
     return (
         <kbd
             className={cn(
-                'inline-flex h-5 items-center rounded-[4px] border border-rule-strong px-1.5 font-mono text-2xs leading-none text-muted-foreground',
+                'inline-flex h-5 items-center rounded-key border border-rule-strong px-1.5 font-mono text-2xs leading-none text-muted-foreground',
                 className,
             )}
         >

resources/js/components/ui/ledger.tsx

@@ -19,10 +19,16 @@ interface LedgerRowProps {
     className?: string;
 }
 
+/**
+ * Deliberately not `data-row`. A ledger row is a definition list entry with
+ * nothing to activate, so the shared row-selection treatment would advertise
+ * an affordance that is not there — and on the row holding the comparison
+ * chips it lit the whitespace more strongly than the links inside it.
+ * `data-row` belongs on things you can actually click or select.
+ */
 export function LedgerRow({ label, children, aside, accent, className }: LedgerRowProps) {
     return (
         <div
-            data-row
             {...(accent !== undefined && accent > 0 ? { 'data-accent': '' } : {})}
             className={cn(
                 'relative grid grid-cols-1 items-baseline gap-x-6 gap-y-1 px-4 py-3 sm:grid-cols-[13rem_1fr] sm:py-4',