From e548ff83ece0d1bbf832108d33f87458842634f1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 16 Jul 2026 17:53:28 +0000
Subject: [PATCH 1/2] fix(a11y): resolve Lighthouse accessibility failures on
 /pricing

Three of four axe findings weren't addressed by the earlier color-
contrast fix (PR #23): the skip link's target (#main-content) didn't
exist on this page, and the tier cards' h3 titles followed the page h1
directly with no h2 in between. Add the missing id and an accessible
(visually-hidden) h2 so heading order stays sequential without a
redundant on-page label.

Verified with the same tool CI uses (lhci autorun against
.lighthouserc.json, 3 runs x 4 URLs): all assertions pass, including
a perfect 1.0 accessibility score on /pricing (up from 0.92).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013kiWYYyCeGgYrKhD8prjqa
---
 src/app/(public)/pricing/page.tsx |  4 +++-
 src/styles/globals.css            | 14 ++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app/(public)/pricing/page.tsx b/src/app/(public)/pricing/page.tsx
index e90f835..b23e20b 100644
--- a/src/app/(public)/pricing/page.tsx
+++ b/src/app/(public)/pricing/page.tsx
@@ -25,7 +25,7 @@ export default async function PricingPage() {
   const [tiers, session] = await Promise.all([getTierDisplay(), getSession()]);
 
   return (
-    <main className={styles.page}>
+    <main id="main-content" className={styles.page}>
       <header className={styles.header}>
         <p className={styles.eyebrow}>PRICING</p>
         <h1 className={styles.title}>Pick the tier that matches where you are.</h1>
@@ -36,6 +36,8 @@ export default async function PricingPage() {
         </p>
       </header>
 
+      <h2 className="visually-hidden">Compare tiers</h2>
+
       <div className={styles.tierGrid}>
         {tiers.map((tier: TierDisplay) => (
           <Card key={tier.id} className={tier.slug === 'accelerated-mastery' ? styles.tierFeatured : styles.tier}>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 7a78294..8c6f7cd 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -283,6 +283,20 @@ pre {
   padding-right: clamp(var(--space-4), 4vw, var(--space-12));
 }
 
+/* Visually hidden, still reachable by screen readers — for headings
+   needed to keep heading order sequential without a redundant on-page label. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* ── Responsive helpers ────────────────────────────────────────── */
 
 /* .stack-mobile — vertical by default, horizontal at ≥1024px */

From 7da9ad0d88e94d389c63534172468a312e860160 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 16 Jul 2026 21:37:44 +0000
Subject: [PATCH 2/2] fix(a11y): use clip-path instead of deprecated clip in
 .visually-hidden
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stylelint flags clip: rect() as deprecated (property-no-deprecated).
clip-path: inset(50%) is the modern equivalent — same visual/screen-
reader behavior, no lint warning.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013kiWYYyCeGgYrKhD8prjqa
---
 src/styles/globals.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 8c6f7cd..c0e769e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -292,7 +292,7 @@ pre {
   padding: 0;
   margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
 }