diff --git a/ai-app-rescue/index.html b/ai-app-rescue/index.html
index 3fbd74a..49625ca 100644
--- a/ai-app-rescue/index.html
+++ b/ai-app-rescue/index.html
@@ -136,6 +136,34 @@
         overflow-x: hidden;
       }
 
+      .skip-link {
+        position: fixed;
+        top: 12px;
+        left: 12px;
+        z-index: 200;
+        padding: 10px 14px;
+        border: 2px solid var(--border);
+        border-radius: 4px;
+        background: #ffffff;
+        color: var(--ink);
+        font-family: var(--font-display);
+        font-size: 13px;
+        font-weight: 800;
+        text-decoration: none;
+        opacity: 0;
+        pointer-events: none;
+        transform: translateY(-12px);
+        transition:
+          opacity 120ms ease,
+          transform 120ms ease;
+      }
+
+      .skip-link:focus-visible {
+        opacity: 1;
+        pointer-events: auto;
+        transform: translateY(0);
+      }
+
       img,
       video {
         max-width: 100%;
@@ -243,6 +271,10 @@
         padding: 80px 24px;
       }
 
+      .bordered-section {
+        border-top: 2px solid var(--border);
+      }
+
       .hero-section {
         padding-top: 72px;
         padding-bottom: 56px;
@@ -880,6 +912,7 @@
     </style>
   </head>
   <body>
+    <a class="skip-link" href="#main-content">Skip to main content</a>
     <header class="site-header">
       <div class="header-container">
         <a href="/" class="brand-wordmark">RYAN GONYON<span class="brand-cursor">_</span></a>
@@ -890,12 +923,12 @@
           <a href="#book" class="nav-link">Book</a>
         </nav>
         <div class="header-cta">
-          <a href="https://www.upwork.com/services/product/development-it-ryan-2066951544316331152?ref=project_share" class="btn btn-outline btn-sm" target="_blank" rel="noopener">Book on Upwork</a>
+          <a href="https://www.upwork.com/services/product/development-it-ryan-2066951544316331152?ref=project_share" class="btn btn-outline btn-sm" target="_blank" rel="noopener noreferrer">Book on Upwork</a>
         </div>
       </div>
     </header>
 
-    <main>
+    <main id="main-content" tabindex="-1">
       <section class="section-container hero-section" aria-labelledby="hero-title">
         <div class="hero-grid">
           <div>
@@ -921,7 +954,7 @@ <h1 class="hero-title" id="hero-title">Turn your AI-built prototype into a build
             </div>
 
             <div class="hero-actions">
-              <a href="https://www.upwork.com/services/product/development-it-ryan-2066951544316331152?ref=project_share" class="btn btn-blue btn-lg" target="_blank" rel="noopener">Book the Consultation</a>
+              <a href="https://www.upwork.com/services/product/development-it-ryan-2066951544316331152?ref=project_share" class="btn btn-blue btn-lg" target="_blank" rel="noopener noreferrer">Book the Consultation</a>
               <a href="#proof" class="btn btn-outline btn-lg">See Proof &darr;</a>
             </div>
           </div>
@@ -938,7 +971,7 @@ <h1 class="hero-title" id="hero-title">Turn your AI-built prototype into a build
         </div>
       </section>
 
-      <section id="fit" class="section-container" aria-labelledby="fit-title" style="border-top: 2px solid var(--border);">
+      <section id="fit" class="section-container bordered-section" aria-labelledby="fit-title">
         <div class="section-header">
           <span class="section-eyebrow">BEST FIT</span>
           <h2 class="section-title" id="fit-title">Use this when the demo exists, but trust does not.</h2>
@@ -975,7 +1008,7 @@ <h3 class="fit-title">Founder translation</h3>
         </div>
       </section>
 
-      <section id="deliverables" class="section-container" aria-labelledby="deliverables-title" style="border-top: 2px solid var(--border);">
+      <section id="deliverables" class="section-container bordered-section" aria-labelledby="deliverables-title">
         <div class="section-header">
           <span class="section-eyebrow">CALL OUTPUT</span>
           <h2 class="section-title" id="deliverables-title">A working session with a concrete handoff.</h2>
@@ -1015,7 +1048,7 @@ <h3 class="protocol-title">Leave with the next move</h3>
         </div>
       </section>
 
-      <section class="section-container" aria-labelledby="scan-title" style="border-top: 2px solid var(--border);">
+      <section class="section-container bordered-section" aria-labelledby="scan-title">
         <div class="hero-grid">
           <div>
             <span class="section-eyebrow">RISK SCAN</span>
@@ -1061,7 +1094,7 @@ <h2 class="section-title" id="scan-title" style="margin-bottom: 20px;">The call
         </div>
       </section>
 
-      <section id="proof" class="section-container" aria-labelledby="proof-title" style="border-top: 2px solid var(--border);">
+      <section id="proof" class="section-container bordered-section" aria-labelledby="proof-title">
         <div class="section-header">
           <span class="section-eyebrow">PROOF SURFACE</span>
           <h2 class="section-title" id="proof-title">The offer has a real operating model behind it.</h2>
@@ -1069,14 +1102,14 @@ <h2 class="section-title" id="proof-title">The offer has a real operating model
 
         <div class="proof-grid">
           <div class="media-card">
-            <img src="/assets/ai-app-rescue/ai-app-rescue-dashboard.png" alt="AI App Rescue dashboard with intake, risk scanner, scoped next move, and reviewed operating surfaces." />
+            <img src="/assets/ai-app-rescue/ai-app-rescue-dashboard.png" alt="AI App Rescue dashboard with intake, risk scanner, scoped next move, and reviewed operating surfaces." loading="lazy" decoding="async" />
             <div class="media-card-caption">
               <strong>AI App Rescue Console</strong>
               <span>An anonymized consultation dashboard showing intake, risk review, architecture mapping, and scoped next move.</span>
             </div>
           </div>
           <div class="media-card">
-            <img src="/assets/ai-app-rescue/mobile-responsive-proof.png" alt="Mobile responsive view of the AI App Rescue dashboard." />
+            <img src="/assets/ai-app-rescue/mobile-responsive-proof.png" alt="Mobile responsive view of the AI App Rescue dashboard." loading="lazy" decoding="async" />
             <div class="media-card-caption">
               <strong>Mobile-ready proof</strong>
               <span>The same workflow compressed for a founder reviewing the plan from a phone.</span>
@@ -1085,7 +1118,7 @@ <h2 class="section-title" id="proof-title">The offer has a real operating model
         </div>
       </section>
 
-      <section class="section-container" aria-labelledby="ledger-title" style="border-top: 2px solid var(--border);">
+      <section class="section-container bordered-section" aria-labelledby="ledger-title">
         <div class="section-header">
           <span class="section-eyebrow">RELATED WORK</span>
           <h2 class="section-title" id="ledger-title">Relevant systems and proof paths.</h2>
@@ -1127,7 +1160,7 @@ <h2 class="section-title" id="ledger-title">Relevant systems and proof paths.</h
               </td>
               <td data-label="Why it matters" class="ledger-risk-desc">Retail catalog data needed controlled AI usage, review queues, audit trail, and export paths.</td>
               <td data-label="Output" class="ledger-outcome-desc">Live operator console with source-row staging, entity review, approval workflow, and usage caps.</td>
-              <td data-label="Link"><a href="https://ai-platform-catalog-intelligence-de.vercel.app" class="ledger-link" target="_blank" rel="noopener">Live MVP &rarr;</a></td>
+              <td data-label="Link"><a href="https://ai-platform-catalog-intelligence-de.vercel.app" class="ledger-link" target="_blank" rel="noopener noreferrer">Live MVP &rarr;</a></td>
             </tr>
             <tr>
               <td data-label="Proof">
@@ -1141,20 +1174,20 @@ <h2 class="section-title" id="ledger-title">Relevant systems and proof paths.</h
               </td>
               <td data-label="Why it matters" class="ledger-risk-desc">Production workflows required operational clarity across listings, lead paths, review, SEO, and visibility rules.</td>
               <td data-label="Output" class="ledger-outcome-desc">Hardened marketplace and management-side workflows in a real operating environment.</td>
-              <td data-label="Link"><a href="https://www.automarkets.com.au/" class="ledger-link" target="_blank" rel="noopener">Live Site &rarr;</a></td>
+              <td data-label="Link"><a href="https://www.automarkets.com.au/" class="ledger-link" target="_blank" rel="noopener noreferrer">Live Site &rarr;</a></td>
             </tr>
           </tbody>
         </table>
       </section>
 
-      <section id="book" class="section-container" style="border-top: 2px solid var(--border);">
+      <section id="book" class="section-container bordered-section">
         <div class="cta-panel">
           <div>
             <h2 class="cta-title">If the app looks 80% done but you do not trust it yet, this is the right call.</h2>
             <p class="cta-copy">Book through Upwork for the cleanest payment/review path, or email me if you need to send context before booking.</p>
           </div>
           <div class="hero-actions">
-            <a href="https://www.upwork.com/services/product/development-it-ryan-2066951544316331152?ref=project_share" class="btn btn-blue btn-lg" target="_blank" rel="noopener">Book on Upwork</a>
+            <a href="https://www.upwork.com/services/product/development-it-ryan-2066951544316331152?ref=project_share" class="btn btn-blue btn-lg" target="_blank" rel="noopener noreferrer">Book on Upwork</a>
             <a href="mailto:coderradical@gmail.com?subject=AI%20App%20Rescue%20Consultation" class="btn btn-outline btn-lg">Email Ryan</a>
           </div>
         </div>
diff --git a/index.html b/index.html
index 98031ba..c42fbd7 100644
--- a/index.html
+++ b/index.html
@@ -141,8 +141,9 @@
     <link rel="stylesheet" href="/styles.css" />
   </head>
   <body>
+    <a class="skip-link" href="#main-content">Skip to main content</a>
     <header class="site-header">
-      <a class="brand" href="#top" aria-label="Ryan Gonyon home">
+      <a class="brand" href="/" aria-label="Ryan Gonyon home">
         <span class="brand-mark">RG</span>
         <span class="brand-copy">
           <strong>Ryan Gonyon</strong>
@@ -161,7 +162,7 @@
       <a class="header-cta" href="/ai-app-rescue/">Start a project</a>
 
       <button class="menu-button" type="button" aria-expanded="false" aria-controls="mobile-menu" data-menu-button>
-        <span class="sr-only">Open navigation</span>
+        <span class="sr-only" data-menu-label>Open navigation</span>
         <span></span>
         <span></span>
         <span></span>
@@ -176,7 +177,7 @@
       <a href="#contact">Contact</a>
     </nav>
 
-    <main id="top">
+    <main id="main-content" tabindex="-1">
       <section class="hero section">
         <div class="hero-copy">
           <h1>Reviewable AI systems and app rescue for software that already matters.</h1>
@@ -230,6 +231,7 @@ <h1>Reviewable AI systems and app rescue for software that already matters.</h1>
               width="1815"
               height="866"
               alt="Laptop showing a workflow dashboard with review cards and approved outputs"
+              decoding="async"
               fetchpriority="high"
             />
             <figcaption>
@@ -368,6 +370,8 @@ <h2>Proof should look like working product.</h2>
                 width="1440"
                 height="980"
                 alt="AutoMarkets live listing search page with collector car filters and market cards"
+                loading="lazy"
+                decoding="async"
               />
             </figure>
             <div class="proof-case-body">
@@ -392,6 +396,8 @@ <h3>AutoMarkets</h3>
                 width="1440"
                 height="980"
                 alt="MyGradHub MVP feed with student profile, vendor discovery, bookings, and admin console tabs"
+                loading="lazy"
+                decoding="async"
               />
             </figure>
             <div class="proof-case-body">
@@ -408,6 +414,8 @@ <h3>MyGradHub</h3>
                 width="1440"
                 height="980"
                 alt="Radical Workflow canvas showing connected prompt, generator, notes, and app preview nodes"
+                loading="lazy"
+                decoding="async"
               />
             </figure>
             <div class="proof-case-body">
@@ -424,6 +432,8 @@ <h3>Radical Workflow</h3>
                 width="1440"
                 height="900"
                 alt="Internal AI workspace with source text, executive summary output, and action items"
+                loading="lazy"
+                decoding="async"
               />
             </figure>
             <div class="proof-case-body">
@@ -440,6 +450,8 @@ <h3>Source to reviewed output</h3>
                 width="1440"
                 height="900"
                 alt="Internal AI admin dashboard with processing metrics and recent AI actions"
+                loading="lazy"
+                decoding="async"
               />
             </figure>
             <div class="proof-case-body">
@@ -532,28 +544,28 @@ <h2>Offer ladder.</h2>
             <span role="columnheader">Included</span>
           </div>
           <div class="package-row" role="row">
-            <span role="cell">Workflow Audit</span>
-            <span role="cell">$500-$1,500</span>
-            <span role="cell">A team that needs workflow, risk, and build path clarity before coding.</span>
-            <span role="cell">Workflow map, examples review, risk notes, first-sprint recommendation.</span>
+            <span role="cell" data-label="Package">Workflow Audit</span>
+            <span role="cell" data-label="Range">$500-$1,500</span>
+            <span role="cell" data-label="Best for">A team that needs workflow, risk, and build path clarity before coding.</span>
+            <span role="cell" data-label="Included">Workflow map, examples review, risk notes, first-sprint recommendation.</span>
           </div>
           <div class="package-row featured" role="row">
-            <span role="cell">Automation Sprint</span>
-            <span role="cell">$2,500-$7,500</span>
-            <span role="cell">One repeated workflow with messy input, human review, and a real output destination.</span>
-            <span role="cell">Working lane, review queue, output handoff, logs, docs, tuning notes.</span>
+            <span role="cell" data-label="Package">Automation Sprint</span>
+            <span role="cell" data-label="Range">$2,500-$7,500</span>
+            <span role="cell" data-label="Best for">One repeated workflow with messy input, human review, and a real output destination.</span>
+            <span role="cell" data-label="Included">Working lane, review queue, output handoff, logs, docs, tuning notes.</span>
           </div>
           <div class="package-row" role="row">
-            <span role="cell">AI App Rescue</span>
-            <span role="cell">$500 consultation or scoped milestone</span>
-            <span role="cell">A tool-built app nearing users, payments, private data, or handoff pressure.</span>
-            <span role="cell">Risk map, launch checklist, fix-now / fix-next plan, milestone scope.</span>
+            <span role="cell" data-label="Package">AI App Rescue</span>
+            <span role="cell" data-label="Range">$500 consultation or scoped milestone</span>
+            <span role="cell" data-label="Best for">A tool-built app nearing users, payments, private data, or handoff pressure.</span>
+            <span role="cell" data-label="Included">Risk map, launch checklist, fix-now / fix-next plan, milestone scope.</span>
           </div>
           <div class="package-row" role="row">
-            <span role="cell">Internal Dashboard MVP</span>
-            <span role="cell">$2,500-$7,500</span>
-            <span role="cell">A team replacing scattered status threads, sheets, and manual checks.</span>
-            <span role="cell">Operator surface, filters, status model, reporting, and handoff notes.</span>
+            <span role="cell" data-label="Package">Internal Dashboard MVP</span>
+            <span role="cell" data-label="Range">$2,500-$7,500</span>
+            <span role="cell" data-label="Best for">A team replacing scattered status threads, sheets, and manual checks.</span>
+            <span role="cell" data-label="Included">Operator surface, filters, status model, reporting, and handoff notes.</span>
           </div>
         </div>
       </section>
@@ -637,17 +649,22 @@ <h2>Bring one fragile app or workflow. I will bring the proof loop.</h2>
       };
 
       const menuButton = document.querySelector("[data-menu-button]");
+      const menuLabel = document.querySelector("[data-menu-label]");
       const mobileMenu = document.querySelector("[data-mobile-menu]");
 
+      function setMenuOpen(isOpen) {
+        menuButton?.setAttribute("aria-expanded", String(isOpen));
+        if (menuLabel) menuLabel.textContent = isOpen ? "Close navigation" : "Open navigation";
+        if (mobileMenu) mobileMenu.hidden = !isOpen;
+      }
+
       function closeMenu() {
-        menuButton?.setAttribute("aria-expanded", "false");
-        if (mobileMenu) mobileMenu.hidden = true;
+        setMenuOpen(false);
       }
 
       menuButton?.addEventListener("click", () => {
         const isOpen = menuButton.getAttribute("aria-expanded") === "true";
-        menuButton.setAttribute("aria-expanded", String(!isOpen));
-        if (mobileMenu) mobileMenu.hidden = isOpen;
+        setMenuOpen(!isOpen);
       });
 
       mobileMenu?.querySelectorAll("a").forEach((link) => {
diff --git a/styles.css b/styles.css
index 4211b54..9266117 100644
--- a/styles.css
+++ b/styles.css
@@ -38,6 +38,7 @@
 }
 
 html {
+  overflow-x: hidden;
   scroll-behavior: smooth;
 }
 
@@ -129,6 +130,32 @@ img {
   border: 0;
 }
 
+.skip-link {
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  z-index: 100;
+  padding: 11px 14px;
+  border: 1px solid var(--mint);
+  border-radius: var(--radius-sm);
+  background: var(--black);
+  color: var(--ink);
+  font-size: 0.86rem;
+  font-weight: 850;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-12px);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+.skip-link:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
 .site-header {
   position: sticky;
   top: 0;
@@ -264,6 +291,7 @@ img {
 }
 
 .menu-button {
+  position: relative;
   display: none;
   width: 42px;
   height: 42px;
@@ -275,11 +303,37 @@ img {
 }
 
 .menu-button span:not(.sr-only) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
   display: block;
   width: 18px;
   height: 2px;
-  margin: 3px 0;
   background: var(--ink);
+  transform: translate(-50%, -50%);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+.menu-button span:nth-child(2) {
+  transform: translate(-50%, calc(-50% - 6px));
+}
+
+.menu-button span:nth-child(4) {
+  transform: translate(-50%, calc(-50% + 6px));
+}
+
+.menu-button[aria-expanded="true"] span:nth-child(2) {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.menu-button[aria-expanded="true"] span:nth-child(3) {
+  opacity: 0;
+}
+
+.menu-button[aria-expanded="true"] span:nth-child(4) {
+  transform: translate(-50%, -50%) rotate(-45deg);
 }
 
 .mobile-menu {
@@ -1318,11 +1372,55 @@ img {
   }
 
   .package-table {
-    overflow-x: auto;
+    gap: 12px;
+    overflow: visible;
+    background: transparent;
   }
 
   .package-row {
-    min-width: 840px;
+    grid-template-columns: 1fr;
+    min-width: 0;
+    overflow: hidden;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    background: rgba(18, 24, 33, 0.82);
+  }
+
+  .package-head {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(100%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .package-row + .package-row {
+    border-top: 1px solid var(--line);
+  }
+
+  .package-row span {
+    display: grid;
+    gap: 5px;
+    padding: 14px 16px;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .package-row span::before {
+    color: var(--mint);
+    font-size: 0.72rem;
+    font-weight: 900;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    content: attr(data-label);
+  }
+
+  .package-row span:last-child {
+    border-bottom: 0;
   }
 
   .contact-section {
@@ -1352,11 +1450,14 @@ img {
     margin-top: 18px;
   }
 
-  .hero-actions,
-  .button {
+  .hero-actions {
     width: 100%;
   }
 
+  .button {
+    width: calc(100% - 6px);
+  }
+
   .button {
     min-height: 52px;
   }
diff --git a/tests/html-metadata.test.js b/tests/html-metadata.test.js
index b8c8f1d..8f0651d 100644
--- a/tests/html-metadata.test.js
+++ b/tests/html-metadata.test.js
@@ -5,10 +5,12 @@ import { fileURLToPath } from "node:url";
 
 const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
 
+/** Read a project file as UTF-8 text for static contract assertions. */
 function readProjectFile(path) {
   return readFileSync(resolve(ROOT, path), "utf8");
 }
 
+/** Return a meta content value regardless of attribute ordering. */
 function getMetaContent(html, attr, value) {
   const first = new RegExp(`<meta\\s[^>]*${attr}=["']${value}["'][^>]*content=["']([^"']+)["']`, "i");
   const second = new RegExp(`<meta\\s[^>]*content=["']([^"']+)["'][^>]*${attr}=["']${value}["']`, "i");
@@ -16,6 +18,7 @@ function getMetaContent(html, attr, value) {
   return match ? match[1] : null;
 }
 
+/** Return a link href value regardless of attribute ordering. */
 function getLinkHref(html, rel) {
   const first = new RegExp(`<link\\s[^>]*rel=["']${rel}["'][^>]*href=["']([^"']+)["']`, "i");
   const second = new RegExp(`<link\\s[^>]*href=["']([^"']+)["'][^>]*rel=["']${rel}["']`, "i");
@@ -23,16 +26,61 @@ function getLinkHref(html, rel) {
   return match ? match[1] : null;
 }
 
+/** Parse the first JSON-LD script in a static HTML document. */
 function extractJsonLd(html) {
   const match = html.match(/<script\s+type="application\/ld\+json">([\s\S]*?)<\/script>/i);
   return match ? JSON.parse(match[1]) : null;
 }
 
+/** Check that an absolute site asset URL maps to a committed public file. */
 function publicAssetExists(absoluteUrl) {
   const url = new URL(absoluteUrl);
   return existsSync(resolve(ROOT, "public", url.pathname.replace(/^\//, "")));
 }
 
+/** Count regex matches without making missing matches crash assertions. */
+function countMatches(html, pattern) {
+  return html.match(pattern)?.length ?? 0;
+}
+
+/** Return a single HTML tag attribute value regardless of attribute ordering. */
+function getTagAttribute(tag, name) {
+  const pattern = new RegExp(`\\b${name}=["']([^"']*)["']`, "i");
+  return tag.match(pattern)?.[1] ?? "";
+}
+
+/** Count tags whose class list contains every required class token. */
+function countTagsWithClasses(html, tagName, classNames) {
+  const tags = html.match(new RegExp(`<${tagName}\\b[^>]*>`, "gi")) ?? [];
+  return tags.filter((tag) => {
+    const tokens = new Set(getTagAttribute(tag, "class").split(/\s+/).filter(Boolean));
+    return classNames.every((className) => tokens.has(className));
+  }).length;
+}
+
+/** Count external links hardened for a new browsing context. */
+function countBlankLinksWithSafeRel(html) {
+  const links = html.match(/<a\b[^>]*>/gi) ?? [];
+  return links.filter((link) => {
+    const relTokens = new Set(getTagAttribute(link, "rel").split(/\s+/).filter(Boolean));
+    return (
+      getTagAttribute(link, "target") === "_blank" &&
+      relTokens.has("noopener") &&
+      relTokens.has("noreferrer")
+    );
+  }).length;
+}
+
+/** Assert that a page exposes an order-insensitive skip-navigation target. */
+function expectSkipNavigation(html) {
+  expect(html).toMatch(
+    /<a(?=[^>]*\bclass=["'][^"']*\bskip-link\b[^"']*["'])(?=[^>]*\bhref=["']#main-content["'])[^>]*>/i,
+  );
+  expect(html).toMatch(
+    /<main(?=[^>]*\bid=["']main-content["'])(?=[^>]*\btabindex=["']-1["'])[^>]*>/i,
+  );
+}
+
 describe("home page metadata", () => {
   const html = readProjectFile("index.html");
   const jsonLd = extractJsonLd(html);
@@ -81,6 +129,26 @@ describe("home page metadata", () => {
     expect(html).not.toContain("aria-selected");
     expect(html).toContain("aria-pressed");
   });
+
+  it("keeps the mobile menu label synchronized with expanded state", () => {
+    expect(html).toContain("data-menu-label");
+    expect(html).toContain("Close navigation");
+    expect(html).toContain("setMenuOpen");
+  });
+
+  it("has a keyboard skip link and optimized below-fold proof images", () => {
+    expectSkipNavigation(html);
+    expect(countMatches(html, /loading="lazy"/g)).toBeGreaterThanOrEqual(5);
+    expect(countMatches(html, /decoding="async"/g)).toBeGreaterThanOrEqual(6);
+  });
+
+  it("labels package cells for the stacked mobile pricing layout", () => {
+    const packageLabelCount = countMatches(html, /data-label="Package"/g);
+    expect(packageLabelCount).toBeGreaterThanOrEqual(4);
+    expect(countMatches(html, /data-label="Range"/g)).toBe(packageLabelCount);
+    expect(countMatches(html, /data-label="Best for"/g)).toBe(packageLabelCount);
+    expect(countMatches(html, /data-label="Included"/g)).toBe(packageLabelCount);
+  });
 });
 
 describe("AI app rescue page metadata", () => {
@@ -110,4 +178,31 @@ describe("AI app rescue page metadata", () => {
     expect(service.provider["@id"]).toBe("https://radical.codes/#ryan-gonyon");
     expect(page.url).toBe("https://radical.codes/ai-app-rescue/");
   });
+
+  it("has skip navigation, optimized proof images, and hardened external links", () => {
+    expectSkipNavigation(html);
+    expect(html).not.toContain('style="border-top: 2px solid var(--border);"');
+    expect(countTagsWithClasses(html, "section", ["section-container", "bordered-section"])).toBe(6);
+    expect(countMatches(html, /loading="lazy"/g)).toBeGreaterThanOrEqual(2);
+    expect(countBlankLinksWithSafeRel(html)).toBeGreaterThanOrEqual(5);
+  });
+});
+
+describe("shared stylesheet contracts", () => {
+  const css = readProjectFile("styles.css");
+
+  it("keeps the mobile package table header available to assistive technology", () => {
+    const mobileBlockMatch = css.match(/@media \(max-width: 880px\) \{[\s\S]*?@media \(max-width: 560px\)/);
+    expect(mobileBlockMatch).not.toBeNull();
+    const mobileBlock = mobileBlockMatch?.[0] ?? "";
+    expect(mobileBlock).toContain(".package-head");
+    expect(mobileBlock).toMatch(/\.package-head\s*\{[\s\S]*clip-path:\s*inset\(100%\)/);
+    expect(mobileBlock).not.toMatch(/\.package-head\s*\{[\s\S]*display:\s*none/);
+  });
+
+  it("shows a distinct menu icon state when mobile navigation is expanded", () => {
+    expect(css).toContain('.menu-button[aria-expanded="true"] span:nth-child(2)');
+    expect(css).toContain('.menu-button[aria-expanded="true"] span:nth-child(3)');
+    expect(css).toContain('.menu-button[aria-expanded="true"] span:nth-child(4)');
+  });
 });
diff --git a/tests/public-files.test.js b/tests/public-files.test.js
index 9b0eeb3..119e051 100644
--- a/tests/public-files.test.js
+++ b/tests/public-files.test.js
@@ -6,6 +6,7 @@ import { fileURLToPath } from "node:url";
 const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
 const PUBLIC = resolve(ROOT, "public");
 
+/** Read a public file as UTF-8 text for static discovery-file assertions. */
 function readPublicFile(path) {
   return readFileSync(resolve(PUBLIC, path), "utf8");
 }
