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..c0e769e 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-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* ── Responsive helpers ────────────────────────────────────────── */
 
 /* .stack-mobile — vertical by default, horizontal at ≥1024px */