Redesign homepage around coordinated agent workflows

.gitignore

@@ -32,3 +32,6 @@ web/waitlist.json
 
 # OS
 .DS_Store
+
+# Palate website-builder skill telemetry, written at the repo root during agent sessions
+build-manifest.json

web/app/DurableDeliveryTimeline.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { Bot, Check, CircleAlert, Database, FileOutput, RotateCcw, UserRoundCheck, Webhook } from 'lucide-react';
 
 import { AgentToolLogo, type AgentTool } from '../components/AgentToolLogos';
 import s from './landing.module.css';
@@ -170,3 +171,101 @@ export function DurableDeliveryTimeline() {
     </div>
   );
 }
+
+type WorkflowTraceItem = {
+  detail: string;
+  kind: 'checkpoint' | 'complete' | 'human' | 'model' | 'output' | 'retry' | 'trigger';
+  title: string;
+};
+
+const WORKFLOW_TRACE: readonly WorkflowTraceItem[] = [
+  { kind: 'trigger', title: 'repo.push received', detail: 'event · us-west' },
+  { kind: 'checkpoint', title: 'Input persisted', detail: 'checkpoint_01' },
+  { kind: 'model', title: 'Claude Code', detail: 'wrote release-plan.md' },
+  { kind: 'human', title: 'Approval recorded', detail: 'artifact accepted' },
+  { kind: 'retry', title: 'Deploy step', detail: 'attempt 2 · idempotent' },
+  { kind: 'output', title: 'Output persisted', detail: 'build_418' },
+  { kind: 'complete', title: 'Run completed', detail: '6 transitions · 1 retry' },
+];
+
+const WORKFLOW_STEP_DELAYS_MS = [1100, 1250, 1950, 1550, 2100, 1250, 3200] as const;
+
+function WorkflowTraceIcon({ kind }: { kind: WorkflowTraceItem['kind'] }) {
+  const iconProps = { 'aria-hidden': true, size: 15 } as const;
+
+  switch (kind) {
+    case 'trigger':
+      return <Webhook {...iconProps} />;
+    case 'checkpoint':
+      return <Database {...iconProps} />;
+    case 'model':
+      return <Bot {...iconProps} />;
+    case 'human':
+      return <UserRoundCheck {...iconProps} />;
+    case 'retry':
+      return <RotateCcw {...iconProps} />;
+    case 'output':
+      return <FileOutput {...iconProps} />;
+    case 'complete':
+      return <Check {...iconProps} />;
+  }
+}
+
+export function DurableWorkflowTrace() {
+  const [activeStep, setActiveStep] = useState(0);
+
+  useEffect(() => {
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reducedMotion) {
+      setActiveStep(WORKFLOW_TRACE.length - 1);
+      return undefined;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setActiveStep((current) => (current + 1) % WORKFLOW_TRACE.length);
+    }, WORKFLOW_STEP_DELAYS_MS[activeStep]);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [activeStep]);
+
+  return (
+    <div className={s.workflowTracePreview} aria-label="Durable workflow execution trace">
+      <div className={s.workflowTraceHeader}>
+        <span>run_01J7</span>
+        <strong>{activeStep === WORKFLOW_TRACE.length - 1 ? 'completed' : 'running'}</strong>
+      </div>
+      <div className={s.workflowTraceRail} aria-hidden="true">
+        <span style={{ height: `${(activeStep / (WORKFLOW_TRACE.length - 1)) * 100}%` }} />
+      </div>
+      <div className={s.workflowTraceRows}>
+        {WORKFLOW_TRACE.map((item, index) => {
+          const state = index < activeStep ? 'complete' : index === activeStep ? 'active' : 'pending';
+          const kindClass = item.kind === 'retry'
+            ? s.workflowTraceKindRetry
+            : item.kind === 'human'
+              ? s.workflowTraceKindHuman
+              : '';
+          return (
+            <div
+              className={`${s.workflowTraceRow} ${s[`workflowTraceRow_${state}`]} ${kindClass}`}
+              key={item.title}
+            >
+              <span className={s.workflowTraceIcon}>
+                <WorkflowTraceIcon kind={item.kind} />
+              </span>
+              <span className={s.workflowTraceCopy}>
+                <strong>{item.title}</strong>
+                <small>{item.detail}</small>
+              </span>
+              <span className={s.workflowTraceStatus}>
+                {state === 'complete' ? <Check aria-hidden="true" size={13} /> : null}
+                {state === 'active' && item.kind === 'retry' ? <CircleAlert aria-hidden="true" size={13} /> : null}
+                {state === 'active' ? (item.kind === 'retry' ? 'retrying' : 'processing') : null}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

web/app/globals.css

@@ -32,20 +32,60 @@ a {
   color: inherit;
 }
 
+/* ── Focus ──
+   One rule for the whole site. The 2px offset puts the ring on the page
+   ground rather than on the control, so it is measured against the
+   background: >= 12:1 on every surface the site uses. */
+:focus-visible {
+  outline: 3px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+/* Keyboard-only skip target, revealed on focus. */
+.skip-link {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 200;
+  padding: 12px 20px;
+  min-height: 44px;
+  display: inline-flex;
+  align-items: center;
+  background: var(--fg);
+  color: var(--bg);
+  font-family: var(--font-geist-sans), sans-serif;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-decoration: none;
+  border-radius: var(--r-md);
+  transform: translateY(-200%);
+  transition: transform 0.18s var(--ease-out-quint);
+}
+
+.skip-link:focus-visible {
+  transform: none;
+}
+
 /* ── Buttons ──
    Canonical button design, shared across the site. Landing-page CSS
    modules pull these in with `composes: btn btn-primary from global;`
-   so the primary button looks identical everywhere. */
+   so the primary button looks identical everywhere.
+
+   Shape comes from --r-md: the tail-corner message radius that every
+   interactive element on the site shares. min-height keeps every button a
+   comfortable target on touch (>= 44px) without per-page overrides. */
 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  font-size: 0.92rem;
+  gap: 8px;
+  font-family: var(--font-geist-sans), sans-serif;
+  font-size: 0.9375rem;
   font-weight: 600;
-  letter-spacing: 0.01em;
-  padding: 12px 28px;
-  border-radius: 100px;
+  letter-spacing: -0.005em;
+  padding: 13px 26px;
+  min-height: 48px;
+  border-radius: var(--r-md);
   text-decoration: none;
   cursor: pointer;
   transition: