Make the site consistent with itself: one header rhythm, one copy of each component, one value per role

resources/css/app.css

@@ -85,6 +85,14 @@
    * which also meant the dark rule sat ~13% heavier than its light counterpart
    * for no reason. Dark is 0.08 here so the two match optically.
    */
+  /*
+   * One step off the base ground. Serves both the raised section tone and any
+   * inset panel — a code block, a segmented-control track — because those are
+   * the same visual idea seen from opposite sides, and they were previously
+   * five different raw alpha pairs.
+   */
+  --color-surface-raised: var(--surface-raised);
+
   --color-rule: var(--rule);
   --color-rule-strong: var(--rule-strong);
 
@@ -303,6 +311,18 @@ html {
  * its own reduced-motion branch rather than relying on this block.
  */
 
+/*
+ * The accent tint scale, recorded because it was seven values in two syntaxes.
+ *
+ *   /5   a surface marked as the featured one — the Starter card, the TablePro
+ *        column in either comparison table
+ *   /10  a filled chip or step marker, and the selected state of a control
+ *
+ * `safety.tsx` keeps its own /[0.02] /[0.04] /[0.06] ladder. That is not drift:
+ * the tint there encodes how far up the six-level ladder a row sits, so the
+ * steps have to be finer than the scale above and have to be evenly spaced.
+ */
+
 /*
  * Row selection, borrowed from the product's own grid.
  *

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

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Check, Copy } from 'lucide-react';
 import { toast } from 'sonner';
+import { CodeBlock } from '@/components/ui/code';
 import Container from '@/components/ui/container';
 import { FullLine } from '@/components/ui/full-line';
 import { Ledger, LedgerRow } from '@/components/ui/ledger';
@@ -141,7 +142,8 @@ export default function AgentsMcp() {
                             <CopyButton />
                         </div>
 
-                        <pre className="overflow-x-auto p-4 font-mono text-xs leading-relaxed">
+                        <CodeBlock label="MCP client configuration">
+                            <pre className="p-4 font-mono text-xs leading-relaxed">
                             <code>
                                 <span className="text-muted-foreground">{'{'}</span>
                                 {'\n'}
@@ -168,7 +170,8 @@ export default function AgentsMcp() {
                                 {'\n'}
                                 <span className="text-muted-foreground">{'}'}</span>
                             </code>
-                        </pre>
+                            </pre>
+                        </CodeBlock>
 
                         <p className="border-t border-rule px-4 py-3 font-mono text-xs text-muted-foreground">
                             No token in the config. The bridge launches TablePro if it is not already running.

resources/js/components/landing/download-rail.tsx

@@ -1,14 +1,8 @@
 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';
 
-function AppleGlyph() {
-    return (
-        <svg className="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-            <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
-        </svg>
-    );
-}
 
 interface Props {
     /**

resources/js/components/landing/faq.tsx

@@ -1,5 +1,6 @@
 import Container from '@/components/ui/container';
 import { FullLine } from '@/components/ui/full-line';
+import FaqList from '@/components/ui/faq-list';
 import SectionShell from '@/components/ui/section-shell';
 import { faqs as defaultFaqs, type FaqItem } from '@/data/faqs';
 
@@ -10,41 +11,19 @@ interface Props {
     headlineMuted?: string;
 }
 
-function Column({ items, className }: { items: FaqItem[]; className?: string }) {
-    return (
-        <div className={className}>
-            {items.map((faq, i) => (
-                <div
-                    key={faq.question}
-                    className={`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>
-                </div>
-            ))}
-        </div>
-    );
-}
 
 export default function FAQ({
     items = defaultFaqs,
     headline = 'Questions people actually ask.',
     headlineMuted = 'Short answers.',
 }: Props) {
-    const mid = Math.ceil(items.length / 2);
 
     return (
         <SectionShell tier="reference"
             tone="raised" id="faq" label="FAQ" headline={headline} headlineMuted={headlineMuted}>
             <FullLine />
             <Container>
-                <div className="grid grid-cols-1 md:grid-cols-2">
-                    <Column
-                        items={items.slice(0, mid)}
-                        className="border-b border-rule md:border-r md:border-b-0"
-                    />
-                    <Column items={items.slice(mid)} />
-                </div>
+                <FaqList items={items} />
             </Container>
             <FullLine />
         </SectionShell>

resources/js/components/landing/footer-cta.tsx

@@ -7,6 +7,7 @@ import { FullLine } from '@/components/ui/full-line';
 import { 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';
 
 interface FlashMessage {
     type: 'success' | 'warning' | 'error';
@@ -34,13 +35,6 @@ function FlashStatus({ flash }: { flash?: FlashMessage | null }) {
     );
 }
 
-function AppleGlyph() {
-    return (
-        <svg className="size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-            <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
-        </svg>
-    );
-}
 
 /**
  * A minimal stand-in for Inertia's useForm, used by the two anonymous email
@@ -240,7 +234,7 @@ export default function FooterCTA() {
                         </div>
 
                         <div className="mt-4 flex items-center gap-2">
-                            <code 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">
+                            <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

resources/js/components/landing/footer.tsx

@@ -115,7 +115,7 @@ export default function Footer() {
 
             {/* Copyright */}
             <Container>
-                <p className="py-6 pl-4 text-muted-foreground">
+                <p className="px-4 py-6 text-muted-foreground">
                     &copy; {new Date().getFullYear()} TablePro. All rights reserved.
                 </p>
             </Container>

resources/js/components/landing/header.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { buttonClasses } from '@/components/ui/button';
 import MobileNav from './mobile-nav';
+import { AppleGlyph } from '@/components/ui/glyph';
 
 interface Props {
     /**
@@ -150,7 +151,7 @@ export default function Header({ githubStars }: Props) {
                                 role="menu"
                                 aria-label="Download options"
                                 onKeyDown={handleMenuKeyDown}
-                                className={`absolute right-0 mt-2 w-56 overflow-hidden rounded-xl border border-rule bg-background shadow-xl transition-all ${downloadOpen ? 'visible opacity-100 translate-y-0' : 'invisible opacity-0 -translate-y-2'}`}
+                                className={`absolute right-0 mt-2 w-56 overflow-hidden rounded-xl border border-rule bg-background shadow-xl transition-[opacity,transform] duration-(--dur-state) ease-(--ease-panel) ${downloadOpen ? 'visible opacity-100 translate-y-0' : 'invisible opacity-0 -translate-y-2'}`}
                             >
                                 <a
                                     ref={(el) => { itemRefs.current[0] = el; }}
@@ -163,9 +164,7 @@ export default function Header({ githubStars }: Props) {
                                         requestAnimationFrame(() => window.scrollTo({ top: scrollY, behavior: 'instant' }));
                                     }}
                                 >
-                                    <svg className="size-5 text-muted-foreground" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-                                        <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
-                                    </svg>
+                                    <AppleGlyph className="size-5" />
                                     <div>
                                         <div className="font-medium">Download for Mac</div>
                                         <div className="text-xs text-muted-foreground">macOS 14+</div>

resources/js/components/landing/hero.tsx

@@ -4,6 +4,7 @@ import { AccentLine, FullLine } from '@/components/ui/full-line';
 import ThemedImage from '@/components/ui/themed-image';
 import SectionLabel from '@/components/ui/section-label';
 import Button from '@/components/ui/button';
+import { AppleGlyph } from '@/components/ui/glyph';
 
 interface Props {
     githubStars?: number | null;
@@ -32,13 +33,6 @@ function formatReleaseDate(iso: string): string {
         .toUpperCase();
 }
 
-function AppleGlyph() {
-    return (
-        <svg className="size-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-            <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
-        </svg>
-    );
-}
 
 export default function Hero({ githubStars, latestRelease }: Props) {
     const eyebrow = [