diff --git a/scripts/test-website-theme.mjs b/scripts/test-website-theme.mjs
index 0491bcf..341c7db 100644
--- a/scripts/test-website-theme.mjs
+++ b/scripts/test-website-theme.mjs
@@ -75,7 +75,15 @@ for (const className of gettingStartedLightSurfaces) {
   }
 }
 
+const stepNumberLightRule = landingPrimaryCss.match(/html\.theme-light \.step-num\s*\{([^}]*)\}/)?.[1] || '';
+if (!/color:\s*oklch\(/.test(stepNumberLightRule)
+    || !/background:\s*none/.test(stepNumberLightRule)
+    || !/-webkit-text-fill-color:\s*currentColor/.test(stepNumberLightRule)) {
+  throw new Error('Getting Started step numbers must use solid readable text in light mode');
+}
+
 console.log('Extension mockup theme-sensitive text uses theme-aware colors');
 console.log('Landing CSS is render-blocking, single-request, and cascade-stable');
 console.log('Foreground film birds use complete, always-on wing and glide animations');
 console.log('All Getting Started mockups define explicit light-theme surfaces');
+console.log('Getting Started step numbers stay readable in light mode');
diff --git a/website/styles/landing-primary.css b/website/styles/landing-primary.css
index b436f08..89bc442 100644
--- a/website/styles/landing-primary.css
+++ b/website/styles/landing-primary.css
@@ -244,7 +244,9 @@
 }
 
 html.theme-light .step-num {
-    background: linear-gradient(135deg, oklch(0.45 0.10 150), oklch(0.40 0.08 120));
+    color: oklch(0.36 0.10 145);
+    background: none;
+    -webkit-text-fill-color: currentColor;
 }
 
 .step-text h3 {