Clarify receipt-first landing proof

.fleet/design-review.json

@@ -36,11 +36,11 @@
       "status": "pass"
     },
     "critique": {
-      "score": 33,
+      "score": 36,
       "maximum": 40
     },
     "audit": {
-      "score": 17,
+      "score": 19,
       "maximum": 20
     },
     "unresolved": {
@@ -63,11 +63,11 @@
       ]
     },
     "browserReview": {
-      "tool": "Playwright with system Chrome",
+      "tool": "Chrome DevTools Protocol with system Chrome",
       "viewports": [390, 768, 1440],
       "horizontalOverflow": false,
       "consoleErrors": 0,
-      "note": "At 390px, the headline height fell from 456px to 204px and the primary CTA moved from y=1006px to y=622px. Tablet navigation no longer overflows at 768px; desktop retains the 88px headline."
+      "note": "The illustrative receipt rail remains legible at all three viewports, the secondary CTA resolves to #receipts, and the 390px header links measure 44px high. Keyboard focus exposes a 2px accent outline with 3px offset, reduced-motion disables ambient pulse animation, and the isolated static preview produced no application console errors; its missing favicon generated one non-application 404 network log."
     }
   },
   "ownerFeedback": {

PROJECT_STATUS.md

@@ -63,11 +63,11 @@ SHA-tagged `workflow_dispatch`.
 
 ## Timeline
 
-- **2026-07-31 — Free ATS checker intent page:** clarified the checker as a
-  private, no-sign-up seven-signal structure pass; documented its scoring,
-  relationship to keyword matching, workflow, and limitations; and synchronized
-  the agent-readable public catalog without changing its local analysis logic.
-
+- **2026-07-31 — Receipt-first landing evidence clarified:** The Astro hero now
+  shows a truthful illustrative packet/fill/submit receipt rail, routes its
+  receipt CTA to the matching section, exposes visible keyboard focus, honors
+  reduced motion, and keeps header targets at least 44px without overflow at
+  390px, 768px, or 1440px.
 - **2026-07-29 — First-party changelog shipped:** The Astro public surface now
   owns a same-origin `/changelog` with verified editorial release entries,
   while Roadmap and Source link to the canonical GitHub issues and repository.

landing-astro/src/pages/index.astro

@@ -129,27 +129,27 @@ const fleetLinks = [
 ---
 
 <Layout title={TITLE} description={DESCRIPTION} redirectAuthenticated>
-  <div class="min-h-screen bg-[#050505] text-[#f0f0f0] font-sans selection:bg-indigo-500/30 selection:text-white">
+  <div class="landing-page min-h-screen bg-[#050505] text-[#f0f0f0] font-sans selection:bg-indigo-500/30 selection:text-white">
     {/* ── Nav ── */}
     <header class="sticky top-0 z-50 border-b border-white/5 bg-black/60 backdrop-blur-2xl">
       <div class="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
-        <a href="/" class="flex items-center gap-2.5">
+        <a href="/" class="inline-flex min-h-11 min-w-11 items-center gap-2.5">
           <span class="w-8 h-8 rounded-lg bg-[var(--accent)] flex items-center justify-center text-xs font-black text-white">RP</span>
           <span class="font-bold text-xl tracking-tight text-white">RolePatch</span>
         </a>
         <nav class="hidden xl:flex items-center gap-8 text-sm font-medium text-white/50">
-          <a href="#features" class="hover:text-white transition-colors">Features</a>
-          <a href="#how-it-works" class="hover:text-white transition-colors">How it works</a>
-          <a href="#receipts" class="hover:text-white transition-colors">Receipts</a>
-          <a href="#proof" class="hover:text-white transition-colors">See it work</a>
-          <a href="/jobs" class="hover:text-white transition-colors">Jobs</a>
-          <a href="/tools" class="hover:text-white transition-colors">Free Tools</a>
-          <a href="/pricing" class="hover:text-white transition-colors">Pricing</a>
-          <a href="/faq" class="hover:text-white transition-colors">FAQ</a>
+          <a href="#features" class="inline-flex min-h-11 items-center hover:text-white transition-colors">Features</a>
+          <a href="#how-it-works" class="inline-flex min-h-11 items-center hover:text-white transition-colors">How it works</a>
+          <a href="#receipts" class="inline-flex min-h-11 items-center hover:text-white transition-colors">Receipts</a>
+          <a href="#proof" class="inline-flex min-h-11 items-center hover:text-white transition-colors">See it work</a>
+          <a href="/jobs" class="inline-flex min-h-11 items-center hover:text-white transition-colors">Jobs</a>
+          <a href="/tools" class="inline-flex min-h-11 items-center hover:text-white transition-colors">Free Tools</a>
+          <a href="/pricing" class="inline-flex min-h-11 items-center hover:text-white transition-colors">Pricing</a>
+          <a href="/faq" class="inline-flex min-h-11 items-center hover:text-white transition-colors">FAQ</a>
         </nav>
         <a
           href="/dashboard"
-          class="bg-white text-black text-sm font-bold px-6 py-2.5 rounded-full hover:bg-white/90 transition-all"
+          class="inline-flex min-h-11 items-center justify-center bg-white text-black text-sm font-bold px-6 py-2.5 rounded-full hover:bg-white/90 transition-all"
         >
           Get Started Free
         </a>
@@ -165,12 +165,15 @@ const fleetLinks = [
         </div>
 
         <div class="relative max-w-5xl mx-auto text-center">
-          <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 text-[11px] font-bold tracking-widest uppercase text-indigo-400 mb-7 sm:mb-10">
-            <span class="flex h-2 w-2 relative">
-              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
-              <span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
-            </span>
-            Reviewed Apply Agent
+          <div
+            class="inline-flex max-w-full flex-wrap items-center justify-center gap-x-3 gap-y-1.5 rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-[10px] font-bold uppercase tracking-wider mb-7 sm:mb-10"
+            role="group"
+            aria-label="Example RolePatch receipt: packet ready to review, ATS fill requires your click, and submit waits for confirmation"
+          >
+            <span class="text-indigo-300">Example receipt</span>
+            <span class="text-white/65"><strong class="text-white">Packet</strong> · ready to review</span>
+            <span class="text-white/65"><strong class="text-white">Fill</strong> · requires your click</span>
+            <span class="text-white/65"><strong class="text-white">Submit</strong> · waits for confirmation</span>
           </div>
 
           <h1 class="text-[40px] sm:text-5xl md:text-7xl lg:text-[88px] font-bold leading-[1.02] lg:leading-[0.95] tracking-tight mb-7 sm:mb-10">
@@ -191,7 +194,7 @@ const fleetLinks = [
               <span class="relative group-hover:text-white transition-colors">Build My Apply Queue</span>
             </a>
             <a
-              href="#features"
+              href="#receipts"
               class="px-10 py-5 bg-white/5 text-white font-bold text-lg rounded-2xl border border-white/10 hover:bg-white/10 transition-all flex items-center gap-2"
             >
               See Receipts <Icon name="zap" class="w-5 h-5" fill="currentColor" />

landing-astro/src/styles/global.css

@@ -61,6 +61,24 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
+:where(a, button, summary, [tabindex]):focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .landing-page .animate-pulse,
+  .landing-page .animate-ping {
+    animation: none;
+  }
+
+  .landing-page [class*="hover:scale"]:hover,
+  .landing-page [class*="hover:translate"]:hover,
+  .landing-page .group:hover [class*="group-hover:scale"] {
+    transform: none;
+  }
+}
+
 /* Scrollbar styling */
 ::-webkit-scrollbar {
   width: 6px;