quiver-cli 0.7.0 → 1.0.0

package/template/.agents/skills/design/impeccable/scripts/detector/detect-antipatterns-browser.js

@@ -82,6 +82,15 @@ const GENERIC_FONTS = new Set([
 const WCAG_LARGE_TEXT_PX = 18 * (96 / 72);
 const WCAG_LARGE_BOLD_TEXT_PX = 14 * (96 / 72);
 
+// Em-dash overuse (advisory) thresholds, shared by the regex/static-HTML
+// analyzer and the browser DOM check so both fire on the same saturation
+// pattern. Two gates must hold: an absolute floor of EM_DASH_FLOOR dashes, and
+// a density of at least one dash per EM_DASH_CHARS_PER_DASH characters of body
+// text. A long article that uses a few em-dashes is left alone; a short,
+// dash-per-clause page is not.
+const EM_DASH_FLOOR = 8;
+const EM_DASH_CHARS_PER_DASH = 500;
+
 // Serif faces that show up in italic-display heroes. The rule also fires when
 // the primary face is unknown but the stack ends in the generic `serif` token,
 // which catches custom/private faces with a serif fallback.
@@ -123,24 +132,17 @@ const ANTIPATTERNS = [
   {
     id: 'overused-font',
     category: 'slop',
+    scopes: ['type'],
     name: 'Overused font',
     description:
       'Inter, Roboto, Fraunces, Geist, Plus Jakarta Sans, and Space Grotesk are used on so many sites they no longer feel distinctive. Each new wave of AI-generated UIs converges on the same handful of faces. Choose a face that gives your interface personality.',
     skillSection: 'Typography',
     skillGuideline: 'overused fonts like Inter',
   },
-  {
-    id: 'single-font',
-    category: 'slop',
-    name: 'Single font for everything',
-    description:
-      'Only one font family is used for the entire page. Pair a distinctive display font with a refined body font to create typographic hierarchy.',
-    skillSection: 'Typography',
-    skillGuideline: 'only one font family for the entire page',
-  },
   {
     id: 'flat-type-hierarchy',
     category: 'slop',
+    scopes: ['type'],
     name: 'Flat type hierarchy',
     description:
       'Font sizes are too close together — no clear visual hierarchy. Use fewer sizes with more contrast (aim for at least a 1.25 ratio between steps).',
@@ -177,6 +179,7 @@ const ANTIPATTERNS = [
   {
     id: 'nested-cards',
     category: 'slop',
+    scopes: ['layout'],
     name: 'Nested cards',
     description:
       'Cards inside cards create visual noise and excessive depth. Flatten the hierarchy — use spacing, typography, and dividers instead of nesting containers.',
@@ -186,6 +189,7 @@ const ANTIPATTERNS = [
   {
     id: 'monotonous-spacing',
     category: 'slop',
+    scopes: ['layout'],
     name: 'Monotonous spacing',
     description:
       'The same spacing value used everywhere — no rhythm, no variation. Use tight groupings for related items and generous separations between sections.',
@@ -201,18 +205,73 @@ const ANTIPATTERNS = [
     skillSection: 'Motion',
     skillGuideline: 'bounce or elastic easing',
   },
+  {
+    id: 'pulsing-dot',
+    category: 'slop',
+    name: 'Pulsing status dot',
+    description:
+      'Small pulsing status dots simulate liveness decoratively. Reserve pulse animation for indicators tied to genuinely live, changing data; a static indicator with clear labeling is honest and calmer.',
+    skillSection: 'Motion',
+    skillGuideline: 'decorative pulsing status dot',
+  },
+  {
+    id: 'blinking-cursor',
+    category: 'slop',
+    severity: 'advisory',
+    name: 'Decorative blinking cursor',
+    description:
+      'A blinking text cursor animated into a hero or landing section simulates typing where no input exists. It borrows the dev-tool aesthetic as decoration. Real editable fields draw their own caret; anywhere else, let the composition hold attention without a fake prompt.',
+    skillSection: 'Motion',
+  },
+  {
+    id: 'shape-assembled-illustration',
+    category: 'slop',
+    severity: 'advisory',
+    name: 'Shape-assembled illustration',
+    description:
+      'A large inline SVG that builds a pictorial scene from a pile of primitive shapes reads as placeholder clip art, not illustration. Icons, logos, and data graphics are fine at their scale; a hero-sized visual deserves real artwork, a photograph, or a deliberately drawn graphic.',
+    skillSection: 'Imagery',
+  },
   {
     id: 'dark-glow',
     category: 'slop',
-    name: 'Dark mode with glowing accents',
+    name: 'Glowing shadow accents',
     description:
-      'Dark backgrounds with colored box-shadow glows are the default "cool" look of AI-generated UIs. Use subtle, purposeful lighting instead — or skip the dark theme entirely.',
+      'Colored glow shadows — a zero-offset chromatic halo (box- or text-shadow) on any background, or any colored blurred shadow on a dark background — are the default "cool" look of AI-generated UIs. Use neutral elevation shadows and subtle, purposeful lighting instead.',
     skillSection: 'Color & Contrast',
     skillGuideline: 'dark mode with glowing accents',
   },
+  {
+    id: 'radial-halo',
+    category: 'slop',
+    name: 'Radial-gradient background halo',
+    description:
+      'A chromatic radial-gradient wash — saturated at the center, fading to transparent — used as a decorative background glow on a dark page. Same tell as glowing shadows, drawn with a gradient instead of a shadow. Ground the surface with a solid or subtly shifted background instead.',
+    skillSection: 'Color & Contrast',
+    skillGuideline: 'dark mode with glowing accents',
+  },
+  {
+    id: 'radial-spotlight-glow',
+    category: 'slop',
+    name: 'Decorative radial spotlight glow',
+    description:
+      'A soft, low-opacity accent-colored radial gradient fading to transparent, dropped behind a hero or section as a "spotlight." It is a reflex AI decoration — the translucent cousin of the saturated radial halo. Let the surface stand on its own, or light the composition with a deliberate material accent rather than a floating colored haze.',
+    skillSection: 'Color & Contrast',
+    skillGuideline: 'dark mode with glowing accents',
+  },
+  {
+    id: 'marquee',
+    category: 'slop',
+    name: 'Auto-scrolling marquee',
+    description:
+      'Continuously auto-scrolling content demands attention it has not earned and hides half its content at any moment. Reserve motion for content that changes; let readers move at their own pace.',
+    skillSection: 'Motion',
+    skillGuideline: 'auto-scrolling marquee',
+  },
   {
     id: 'icon-tile-stack',
     category: 'slop',
+    scopes: ['layout'],
     name: 'Icon tile stacked above heading',
     description:
       'A small rounded-square icon container above a heading is the universal AI feature-card template — every generator outputs this exact shape. Try a side-by-side icon and heading, or let the icon sit in flow without its own container.',
@@ -222,6 +281,7 @@ const ANTIPATTERNS = [
   {
     id: 'italic-serif-display',
     category: 'slop',
+    scopes: ['type'],
     name: 'Italic serif display headline',
     description:
       'Oversized italic serif (Fraunces, Recoleta, Playfair, Newsreader-italic) as the primary hero headline reads as taste in isolation but has become the universal AI-startup landing page hero. Set roman, or move to a non-serif display face. Editorial / magazine register may legitimately want this — judge by context.',
@@ -231,6 +291,7 @@ const ANTIPATTERNS = [
   {
     id: 'hero-eyebrow-chip',
     category: 'slop',
+    scopes: ['type'],
     name: 'Hero eyebrow / pill chip',
     description:
       'A tiny uppercase letter-spaced label sitting immediately above an oversized hero headline — or the same shape rendered as a pill chip — is now the default AI SaaS hero. Drop the eyebrow, integrate the kicker into the headline, or run it as a navigation breadcrumb instead.',
@@ -238,31 +299,37 @@ const ANTIPATTERNS = [
     skillGuideline: 'tiny uppercase tracked label above the hero headline',
   },
   {
-    id: 'repeated-section-kickers',
+    id: 'kicker-above-heading',
     category: 'slop',
-    severity: 'advisory',
-    name: 'Repeated section kicker labels',
+    scopes: ['type'],
+    name: 'Kicker / eyebrow label above heading',
     description:
-      'Repeating tiny uppercase tracked labels above section headings turns a brand page into AI editorial scaffolding. Replace them with stronger structure, artifacts, imagery, or a deliberate brand system.',
+      'A tiny tracked uppercase or small-caps label sitting as its own block directly above a heading is banned outright, repeated or not. Generated kickers never earn their place: the heading carries its own weight. Delete the label and let the heading speak; if the words matter, work them into the heading or the body.',
     skillSection: 'Typography',
-    skillGuideline: 'repeated eyebrow or kicker labels as section scaffolding',
+    skillGuideline: 'kicker or eyebrow labels above headings',
   },
   {
-    id: 'numbered-section-markers',
+    id: 'numbered-section-labels',
     category: 'slop',
+    scopes: ['type'],
     severity: 'advisory',
-    name: 'Numbered section markers (01 / 02 / 03)',
+    name: 'Tiny numbered section labels',
     description:
-      'Numbered display markers as section labels (01, 02, 03) are the AI editorial scaffold one tier deeper than tracked eyebrow chips. If you find yourself reaching for them, choose a different section cadence.',
+      'Small numeric index labels riding next to section headings, repeated section after section, are AI editorial scaffolding — a page numbering its own chapters instead of earning structure. Let hierarchy, content, and rhythm carry the sequence.',
     skillSection: 'Layout & Space',
     skillGuideline: 'numbered section markers',
   },
   {
     id: 'em-dash-overuse',
     category: 'slop',
+    // Advisory: humans use em-dashes legitimately, so this rule is opt-in noise
+    // rather than a failure. It fires only on the AI saturation pattern, not on
+    // ordinary prose. Advisory findings are surfaced separately, never counted
+    // as failures, and skipped by the design hook unless a project opts in.
+    advisory: true,
     name: 'Em-dash overuse',
     description:
-      'More than two em-dashes (— or --) in body copy is an AI cadence tell. Use commas, colons, periods, or parentheses instead.',
+      'Em-dash saturation in body copy is an AI cadence tell. Advisory only: humans use em-dashes legitimately, so this fires only on saturation — at least 8 em-dashes (— or --) at a density near one per 500 characters of body text — never on a long article that uses a few. Prefer commas, colons, periods, or parentheses.',
     skillSection: 'Copy',
     skillGuideline: 'no em dashes',
   },
@@ -287,6 +354,7 @@ const ANTIPATTERNS = [
   {
     id: 'oversized-h1',
     category: 'slop',
+    scopes: ['type'],
     name: 'Oversized hero headline',
     description:
       'A full-sentence headline set at display size ends up dominating the viewport, leaving no room for anything else above the fold. A punchy one- or two-word headline at that size is fine — the problem is a long headline blown up too large. Set long headlines smaller, or tighten the copy.',
@@ -296,6 +364,7 @@ const ANTIPATTERNS = [
   {
     id: 'extreme-negative-tracking',
     category: 'slop',
+    scopes: ['type'],
     name: 'Crushed letter spacing',
     description:
       'Letter-spacing pulled tighter than the point where characters keep their own shapes costs legibility. Tighten display type optically, not destructively.',
@@ -313,6 +382,49 @@ const ANTIPATTERNS = [
   },
 
   // ── Quality: general design and accessibility issues ──
+  {
+    id: 'script-error',
+    category: 'quality',
+    severity: 'error',
+    name: 'Uncaught script error on load',
+    description:
+      'A script threw an uncaught exception or failed to parse while the page loaded. Broken JavaScript silently kills reveals, interactions, and dynamic content, and can leave most of a page invisible. Fix the error before judging anything else.',
+  },
+  {
+    id: 'content-hidden-at-rest',
+    category: 'quality',
+    severity: 'error',
+    scopes: ['layout'],
+    name: 'Content invisible at rest',
+    description:
+      'A large share of the page text sits at opacity 0 or visibility hidden even after every reveal handler had a chance to run. This is the failed-reveal signature: the content shipped but never becomes visible. Make content visible by default and let JavaScript enhance its entrance instead of gating its existence.',
+  },
+  {
+    id: 'edge-flush-cards',
+    category: 'quality',
+    scopes: ['layout'],
+    name: 'Cards flush against the scroller edge',
+    description:
+      'Cards inside a horizontal scroller or tab panel sit flush against the container edge at rest while keeping a gutter on the other side, so their edges and rounded corners get cut off. Usually the panel is sized wider than its clip box. Keep a consistent inset on both sides.',
+  },
+  {
+    id: 'text-occlusion',
+    category: 'quality',
+    scopes: ['layout'],
+    name: 'Text occluded by an overlapping element',
+    description:
+      'Text is painted under an opaque element or a second text run, so part of it cannot be read. A decorative box, a stacked layer, or an inline element with leaked padding lands on the words instead of beside them. Give overlapping layers room, or move the text out from under the layer above it.',
+    skillSection: 'Layout & Space',
+  },
+  {
+    id: 'first-viewport-column-overflow',
+    category: 'quality',
+    scopes: ['layout'],
+    name: 'One column stretches the first viewport',
+    description:
+      'A multi-column opening section lets one column run far past the fold while its sibling fits in a single viewport, so the short column floats in dead space and the fold falls deep inside one section. Balance the columns, cap the tall one, or let the long content flow below the opening row.',
+    skillSection: 'Layout & Space',
+  },
   {
     id: 'gray-on-color',
     category: 'quality',
@@ -341,6 +453,7 @@ const ANTIPATTERNS = [
   {
     id: 'line-length',
     category: 'quality',
+    scopes: ['type', 'layout'],
     name: 'Line length too long',
     description:
       'Text lines wider than ~80 characters are hard to read. The eye loses its place tracking back to the start of the next line. Add a max-width (65ch to 75ch) to text containers.',
@@ -350,6 +463,7 @@ const ANTIPATTERNS = [
   {
     id: 'cramped-padding',
     category: 'quality',
+    scopes: ['layout'],
     name: 'Cramped padding',
     description:
       'Text is too close to the edge of its container. Two shapes: (1) an element with its own text where the padding is too low for the font size, and (2) a wrapper with text-bearing children and near-zero padding against a visible boundary (border, outline, or non-transparent background) — children land flush against the boundary line. Add at least 8px (ideally 12–16px) of padding inside bordered, outlined, or colored containers.',
@@ -359,6 +473,7 @@ const ANTIPATTERNS = [
   {
     id: 'body-text-viewport-edge',
     category: 'quality',
+    scopes: ['layout'],
     name: 'Body text touching viewport edge',
     description:
       'Body paragraphs render flush against the left or right viewport edge with no container providing horizontal padding. Wrap content in a container with at least 16px (ideally 24-32px) of horizontal padding, or apply max-width with mx-auto.',
@@ -366,6 +481,7 @@ const ANTIPATTERNS = [
   {
     id: 'tight-leading',
     category: 'quality',
+    scopes: ['type'],
     name: 'Tight line height',
     description:
       'Line height below 1.3x the font size makes multi-line text hard to read. Use 1.5 to 1.7 for body text so lines have room to breathe.',
@@ -373,13 +489,24 @@ const ANTIPATTERNS = [
   {
     id: 'skipped-heading',
     category: 'quality',
+    scopes: ['type'],
     name: 'Skipped heading level',
     description:
       'Heading levels should not skip (e.g. h1 then h3 with no h2). Screen readers use heading hierarchy for navigation. Skipping levels breaks the document outline.',
   },
+  {
+    id: 'heading-rhythm',
+    category: 'quality',
+    scopes: ['layout', 'type'],
+    name: 'Heading crowded against the previous block',
+    description:
+      'A heading binds to the content it introduces, so the rendered space above it should exceed the space below it. When headings across a page sit as close or closer to the block above than to their own content, every section reads as if it captions the previous one. Open up the space above each heading.',
+    skillSection: 'Layout & Space',
+  },
   {
     id: 'justified-text',
     category: 'quality',
+    scopes: ['type'],
     name: 'Justified text',
     description:
       'Justified text without hyphenation creates uneven word spacing ("rivers of white"). Use text-align: left for body text, or enable hyphens: auto if you must justify.',
@@ -387,13 +514,23 @@ const ANTIPATTERNS = [
   {
     id: 'tiny-text',
     category: 'quality',
+    scopes: ['type'],
     name: 'Tiny body text',
     description:
       'Body text below 12px is hard to read, especially on high-DPI screens. Use at least 14px for body content, 16px is ideal.',
   },
+  {
+    id: 'undersized-ui-text',
+    category: 'quality',
+    scopes: ['type'],
+    name: 'Undersized functional text',
+    description:
+      'Interactive and content-bearing UI text (links, buttons, nav items, labels, table cells, meta rows, timecodes) below 11px is a legibility failure, not a style choice. WCAG sets no absolute pixel floor, but functional text under 11px is a defensible quality bar: it fails on high-DPI and small viewports and it degrades tap and read targets. The 11px floor holds even inside a footer; only non-interactive legal smallprint gets the softer 10px floor. Being ON the DESIGN.md size ramp does not exempt a value here: adding 8px to the ramp launders the token but not the legibility problem, and that is exactly the escape hatch this rule closes. Exempts sup/sub, visually-hidden (sr-only) text, and code/terminal contexts. Decorative letterspaced micro-labels are still functional and stay in scope.',
+  },
   {
     id: 'all-caps-body',
     category: 'quality',
+    scopes: ['type'],
     name: 'All-caps body text',
     description:
       'Long passages in uppercase are hard to read. We recognize words by shape (ascenders and descenders), which all-caps removes. Reserve uppercase for short labels and headings.',
@@ -403,6 +540,7 @@ const ANTIPATTERNS = [
   {
     id: 'wide-tracking',
     category: 'quality',
+    scopes: ['type'],
     name: 'Wide letter spacing on body text',
     description:
       'Letter spacing above 0.05em on body text disrupts natural character groupings and slows reading. Reserve wide tracking for short uppercase labels only.',
@@ -410,15 +548,24 @@ const ANTIPATTERNS = [
   {
     id: 'text-overflow',
     category: 'quality',
+    scopes: ['layout'],
     name: 'Content overflowing its container',
     description:
       'Content renders wider than its container, spilling out or forcing a horizontal scrollbar. Let text wrap, constrain widths, or give the region a deliberate scroll affordance.',
     skillSection: 'Layout & Space',
     skillGuideline: 'content wider than its container',
   },
+  {
+    id: 'repeated-container-text',
+    category: 'quality',
+    name: 'Same text repeated inside one container',
+    description:
+      'The same literal text rendered three or more times in structurally different spots inside a single card or panel is redundant messaging — usually a status or label wired into every slot of a template. Say it once, in the slot where it matters most.',
+  },
   {
     id: 'clipped-overflow-container',
     category: 'quality',
+    scopes: ['layout'],
     name: 'Positioned child clipped by overflow container',
     description:
       'A clipping container (overflow hidden or clip) wrapping an absolutely-positioned child cuts off tooltips, menus, and popovers that need to escape. Let the overflow be visible, or move the positioned layer out of the clip.',
@@ -428,6 +575,7 @@ const ANTIPATTERNS = [
   {
     id: 'design-system-font',
     category: 'quality',
+    scopes: ['type'],
     name: 'Font outside DESIGN.md',
     description:
       'A font is used that is not declared in DESIGN.md typography. Use the documented type system or update DESIGN.md if this is an intentional brand addition.',
@@ -454,13 +602,23 @@ const ANTIPATTERNS = [
     skillSection: 'Visual Details',
     skillGuideline: 'border radius outside the project design system',
   },
+  {
+    id: 'design-system-font-size',
+    category: 'quality',
+    severity: 'advisory',
+    scopes: ['type'],
+    name: 'Font size outside DESIGN.md',
+    description:
+      'A literal font-size is off the type ramp documented in DESIGN.md typography. Use a documented size step or update the design system if the new step is intentional.',
+    skillSection: 'Typography',
+    skillGuideline: 'font size outside the project design system',
+  },
 
-  // ── Provider tells: opt-in via --gpt / --gemini (gated off by default) ──
+  // ── Common generated-UI tells ───────────────────────────────────────────
   {
     id: 'gpt-thin-border-wide-shadow',
     category: 'slop',
     severity: 'advisory',
-    gated: 'gpt',
     name: 'Hairline border with wide shadow',
     description:
       'A hairline border paired with a wide, diffuse shadow is a recurring generated-UI signature. Commit to one — a defined edge or a soft elevation — rather than both at once.',
@@ -471,18 +629,26 @@ const ANTIPATTERNS = [
     id: 'repeating-stripes-gradient',
     category: 'slop',
     severity: 'advisory',
-    gated: 'gpt',
     name: 'Repeating-gradient stripes',
     description:
       'Repeating-gradient stripes used as surface decoration are a recurring generated-UI signature. Reach for a deliberate texture or leave the surface plain.',
     skillSection: 'Visual Details',
     skillGuideline: 'repeating-gradient decorative stripes',
   },
+  {
+    id: 'codex-grid-background',
+    category: 'slop',
+    severity: 'advisory',
+    name: 'Decorative grid-line background',
+    description:
+      'A decorative grid or line-field background drawn with hairline linear-gradient layers tiled by a fixed pixel cell is a recurring generated-UI signature. Reserve grid overlays for actual canvas, map, blueprint, or measurement surfaces; elsewhere use product structure or a plain surface.',
+    skillSection: 'Visual Details',
+    skillGuideline: 'two-axis grid-line gradient background',
+  },
   {
     id: 'theater-slop-phrase',
     category: 'slop',
     severity: 'advisory',
-    gated: 'gpt',
     name: 'Theater framing copy',
     description:
       'Dismissing something as "theater" is a recurring generated-copy tic. Say plainly what the thing does or does not do.',
@@ -493,7 +659,6 @@ const ANTIPATTERNS = [
     id: 'image-hover-transform',
     category: 'slop',
     severity: 'advisory',
-    gated: 'gemini',
     name: 'Image hover transform',
     description:
       'Scaling or rotating an image on hover is a recurring generated-UI signature. Let imagery sit still, or use a subtler, purposeful interaction.',
@@ -617,13 +782,50 @@ function colorToHex(c) {
   return '#' + [c.r, c.g, c.b].map(v => v.toString(16).padStart(2, '0')).join('');
 }
 
+// --- cli/engine/shared/fonts.mjs ---
+const GOOGLE_FONTS_URL_RE = /fonts\.googleapis\.com\/css2?\?[^"'\s)<>]*/gi;
+
+function normalizeGoogleFontFamilyParam(value) {
+  return String(value || '')
+    .split('|')
+    .map(part => part.split(':')[0].trim().toLowerCase())
+    .filter(Boolean);
+}
+
+function extractGoogleFontFamilies(text) {
+  const families = [];
+  if (!text) return families;
+
+  GOOGLE_FONTS_URL_RE.lastIndex = 0;
+  let urlMatch;
+  while ((urlMatch = GOOGLE_FONTS_URL_RE.exec(text)) !== null) {
+    const url = urlMatch[0];
+    const queryStart = url.indexOf('?');
+    if (queryStart === -1) continue;
+
+    const params = new URLSearchParams(url.slice(queryStart + 1).replace(/&amp;/g, '&'));
+    for (const value of params.getAll('family')) {
+      families.push(...normalizeGoogleFontFamilyParam(value));
+    }
+  }
+
+  return families;
+}
+
 // --- cli/engine/rules/checks.mjs ---
 const DETECTOR_IS_BROWSER = typeof window !== 'undefined';
 
 // ─── Section 3: Pure Detection ──────────────────────────────────────────────
 
-function checkBorders(tag, widths, colors, radius) {
-  if (BORDER_SAFE_TAGS.has(tag)) return [];
+function checkBorders(tag, widths, colors, radius, opts = {}) {
+  // Badge-shaped <span>s (own visible background) are a real stripe target
+  // for the top/bottom variant — the inline-tag exemption exists to quiet
+  // text-level borders, not chips. They skip the left/right arms below.
+  const spanBadge = tag === 'span' && !!opts.badgeLike;
+  if (BORDER_SAFE_TAGS.has(tag) && !spanBadge) return [];
+  // A live status/alert region wears a colored single-edge border as a
+  // severity accent (toast, snackbar, callout), not as the side-tab tell.
+  if (opts.statusContext) return [];
   const findings = [];
   const sides = ['Top', 'Right', 'Bottom', 'Left'];
 
@@ -639,10 +841,20 @@ function checkBorders(tag, widths, colors, radius) {
     const isSide = side === 'Left' || side === 'Right';
 
     if (isSide) {
+      if (spanBadge) continue;
       if (radius > 0) findings.push({ id: 'side-tab', snippet: `border-${sn}: ${w}px + border-radius: ${radius}px` });
       else if (w >= 3) findings.push({ id: 'side-tab', snippet: `border-${sn}: ${w}px` });
     } else {
       if (radius > 0 && w >= 2) findings.push({ id: 'border-accent-on-rounded', snippet: `border-${sn}: ${w}px + border-radius: ${radius}px` });
+      // Horizontal variant of the side-tab stripe: a thick chromatic accent
+      // riding the top or bottom edge of a card/badge/container. Same
+      // dominant-edge + chroma gates as left/right, 3-12px band. Selected-
+      // tab underlines are exempt via opts.tabContext (adapters look for
+      // tablist/nav/tab ancestors and aria-selected); links, buttons,
+      // table cells, and <hr> never reach here (BORDER_SAFE_TAGS).
+      else if (!opts.tabContext && w >= 3 && w <= 12) {
+        findings.push({ id: 'side-tab', snippet: `border-${sn}: ${w}px` });
+      }
     }
   }
 
@@ -664,23 +876,45 @@ function isEmojiOnlyText(text) {
 function checkColors(opts) {
   const { tag, textColor, bgColor, effectiveBg, effectiveBgStops, fontSize, fontWeight, hasDirectText, isEmojiOnly, bgClip, bgImage, classList } = opts;
   if (SAFE_TAGS.has(tag)) {
-    // Exception for <a> and <button> elements styled as buttons. SAFE_TAGS
-    // exists to suppress contrast noise on inline links and unstyled controls,
-    // where the element has no own background and the contrast against the
-    // ancestor surface is already the intended visual. When the element has
-    // its own opaque background and direct text, it is a styled button — and
-    // contrast on its own surface is a real, frequent bug worth flagging.
-    const isStyledButton = (tag === 'a' || tag === 'button')
-      && hasDirectText
-      && bgColor && bgColor.a > 0.5;
-    if (!isStyledButton) return [];
+    // Exception for elements styled as controls or chips. SAFE_TAGS exists to
+    // suppress contrast noise on inline links and unstyled spans, where the
+    // element has no own background and the contrast against the ancestor
+    // surface is already the intended visual. When the element paints its own
+    // opaque background under direct text, it is a styled button, chip, or
+    // badge regardless of tag, and contrast on its own surface is a real,
+    // frequent bug worth flagging. (The shipped miss: a <span> severity chip
+    // whose white text lost a specificity fight and rendered muted-on-red at
+    // 1.2:1; the old a/button-only exception never looked at it.) The 9px
+    // font floor keeps sub-text decorations out.
+    const isStyledControl = hasDirectText
+      && ((bgColor && bgColor.a > 0.5)
+        // A gradient painted on the element itself is an own surface the
+        // same way a solid background is. Without this branch a nav CTA
+        // built as `<a>` with `background: linear-gradient(…)` and a text
+        // color that fails against every stop sails through on the
+        // SAFE_TAGS suppression (the shipped escape).
+        || (bgImage && /gradient/i.test(bgImage)))
+      && fontSize >= 9;
+    if (!isStyledControl) return [];
   }
   const findings = [];
 
   if (hasDirectText && textColor && !isEmojiOnly) {
+    // Gradient-clipped text (`background-clip: text`, typically with a
+    // transparent text-fill) paints its glyphs *with* the element's own
+    // gradient. The `color` value the cascade still reports is never painted,
+    // and the gradient is the fill, not a backdrop — so measuring `color`
+    // against that gradient (which resolveGradientStops picks up as the
+    // element's own background-image) is a guaranteed false positive
+    // (issue #409 Case A). Skip the backdrop-contrast checks; the gradient-text
+    // rule below still flags the pattern itself. Skipping a rule beats a false
+    // positive here — the true painted contrast can't be measured from `color`.
+    const isGradientClippedText = bgClip === 'text';
     // Run background-dependent checks against either a solid bg or, if the
     // ancestor is a gradient, against every gradient stop (use the worst case).
-    const bgs = effectiveBg ? [effectiveBg] : (effectiveBgStops && effectiveBgStops.length ? effectiveBgStops : null);
+    const bgs = isGradientClippedText
+      ? null
+      : (effectiveBg ? [effectiveBg] : (effectiveBgStops && effectiveBgStops.length ? effectiveBgStops : null));
     if (bgs) {
       // Gray on colored background — flag if every stop is chromatic
       const textLum = relativeLuminance(textColor);
@@ -710,7 +944,11 @@ function checkColors(opts) {
         // like `text-paper/60` on `bg-ink` sections are the FP pattern.
         const isAlphaFallbackFP = !DETECTOR_IS_BROWSER && !effectiveBg && (textColor.a != null && textColor.a < 1);
         if (!isAlphaFallbackFP) {
-          findings.push({ id: 'low-contrast', snippet: `${ratio.toFixed(1)}:1 (need ${threshold}:1) — text ${colorToHex(textColor)} on ${colorToHex(bgs[worstIdx])}` });
+          // Near-threshold ratios (e.g. 4.497) would round to the threshold
+          // itself at one decimal and read as "4.5 needs 4.5" — show two
+          // decimals there so the finding stays legible.
+          const ratioLabel = ratio.toFixed(1) === threshold.toFixed(1) ? ratio.toFixed(2) : ratio.toFixed(1);
+          findings.push({ id: 'low-contrast', snippet: `${ratioLabel}:1 (need ${threshold}:1) — text ${colorToHex(textColor)} on ${colorToHex(bgs[worstIdx])}` });
         }
       }
     }
@@ -756,6 +994,27 @@ function checkColors(opts) {
   return findings;
 }
 
+// WCAG contrast for the :hover state of an element whose hover rules change
+// its text color and/or background. The classic miss: a nav CTA whose
+// author-intended hover pair passes AA, but a broader selector (e.g.
+// `.nav-links a:hover`) wins the specificity fight and swaps in a color
+// that fails. Only fires on elements that present as styled controls —
+// direct text plus an opaque-ish own background in either state — so plain
+// inline links keep the same suppression they get in checkColors.
+function checkHoverContrast(opts) {
+  const { tag, textColor, bg, ownBgAlpha, fontSize, fontWeight, hasDirectText, isEmojiOnly } = opts;
+  if (!hasDirectText || isEmojiOnly || !textColor || !bg) return [];
+  if (SAFE_TAGS.has(tag) && !(ownBgAlpha != null && ownBgAlpha > 0.5)) return [];
+  const ratio = contrastRatio(textColor, bg);
+  const isLargeText = fontSize >= WCAG_LARGE_TEXT_PX || (fontSize >= WCAG_LARGE_BOLD_TEXT_PX && fontWeight >= 700);
+  const threshold = isLargeText ? 3.0 : 4.5;
+  if (ratio >= threshold) return [];
+  return [{
+    id: 'low-contrast',
+    snippet: `:hover state ${ratio.toFixed(1)}:1 (need ${threshold}:1) — text ${colorToHex(textColor)} on ${colorToHex(bg)}`,
+  }];
+}
+
 function isCardLikeFromProps(hasShadow, hasBorder, hasRadius, hasBg) {
   if (!hasShadow && !hasBorder) return false;
   return hasRadius || hasBg;
@@ -901,26 +1160,57 @@ function isAccentColor(cssColor) {
   return false;
 }
 
+function resolveHeroHeadingSizePx(value) {
+  const input = String(value || '').trim().toLowerCase();
+  if (!input) return 0;
+
+  const simpleLengthPx = (token) => {
+    const match = /^(-?\d*\.?\d+)\s*(px|rem|em|%)?$/.exec(String(token || '').trim());
+    if (!match) return null;
+    const amount = Number(match[1]);
+    if (!Number.isFinite(amount)) return null;
+    if (match[2] === 'rem' || match[2] === 'em') return amount * 16;
+    if (match[2] === '%') return amount * 0.16;
+    return amount;
+  };
+
+  const direct = simpleLengthPx(input);
+  if (direct !== null) return direct;
+
+  // Static CSS engines cannot resolve viewport units, but clamp's min/max
+  // bounds still tell us whether the heading can ever reach hero scale.
+  const clamp = /^clamp\((.*)\)$/.exec(input);
+  if (clamp) {
+    const parts = clamp[1].split(',');
+    if (parts.length === 3) {
+      const bounds = [simpleLengthPx(parts[0]), simpleLengthPx(parts[2])]
+        .filter((candidate) => candidate !== null);
+      if (bounds.length > 0) return Math.max(...bounds);
+    }
+  }
+
+  return 0;
+}
+
 // Sibling-relationship rule. Anchor on a hero-scale h1, look at the
 // previousElementSibling, and gate on EITHER the classic tracked-
 // uppercase eyebrow OR the modern accent-colored bold eyebrow.
 function checkHeroEyebrow(opts) {
   const {
     headingTag, headingText, headingFontSize,
+    headingInApplicationContext,
     siblingTag, siblingText, siblingTextTransform,
     siblingFontSize, siblingLetterSpacing,
     siblingFontWeight, siblingColor,
+    siblingHasAccentDashPseudo,
   } = opts;
   if (headingTag !== 'h1') return [];
-  // We previously gated on headingFontSize >= 48 to anchor "hero scale".
-  // But modern hero h1s use clamp() / vw / var(--text-*), none of which
-  // jsdom can resolve — the computed value comes back as "2em" or
-  // "var(--text-9xl)" and parseFloat returns 2 or NaN. The gate fails
-  // on virtually every Tailwind v4 / framework build. The other gates
-  // (sibling text 2-60 chars, font-size ≤ 14px, accent-bold OR
-  // tracked-caps) are tight enough to avoid false positives on non-
-  // hero h1s — a tiny tan label directly above any h1 is the
-  // antipattern regardless of how big the h1 ends up.
+  // This is specifically a marketing-hero cliché, not a ban on compact
+  // context labels in product UI (for example, a station name inside a tab
+  // panel). Browser-computed sizes are reliable; the static adapter also
+  // resolves ordinary px/rem/em and clamp() bounds before reaching here.
+  if (headingInApplicationContext) return [];
+  if (!(headingFontSize >= 48)) return [];
   if (!siblingTag) return [];
   // An h2 above an h1 is a different anti-pattern (heading hierarchy / dual
   // headings) — never an eyebrow.
@@ -941,23 +1231,31 @@ function checkHeroEyebrow(opts) {
   const weight = Number(siblingFontWeight) || 400;
   const isAccentBold = weight >= 700 && isAccentColor(siblingColor || '');
 
-  if (!isClassicTracked && !isAccentBold) return [];
+  // Branch C: dash-prefix eyebrow — sentence case, low tracking, regular
+  // weight, but announced by a short chromatic ::before/::after bar
+  // (the kicker dash). Same label-above-headline pattern, third styling.
+  const isDashPrefixed = !!siblingHasAccentDashPseudo;
+
+  if (!isClassicTracked && !isAccentBold && !isDashPrefixed) return [];
 
   const headingTextSnippet = (headingText || '').trim().slice(0, 60);
   const eyebrowSnippet = text.slice(0, 40);
-  const style = isClassicTracked ? 'tracked-caps' : 'accent-bold';
+  const style = isClassicTracked ? 'tracked-caps' : isAccentBold ? 'accent-bold' : 'dash-prefix';
   return [{
     id: 'hero-eyebrow-chip',
     snippet: `eyebrow chip (${style}) "${eyebrowSnippet}" above ${headingTag} "${headingTextSnippet}"`,
   }];
 }
 
-function checkRepeatedSectionKickers(opts) {
-  const { candidates, minCount = 3 } = opts;
-  if (!Array.isArray(candidates) || candidates.length < minCount) return [];
+// Outright ban: one kicker is one too many, so every collected candidate is
+// a finding. The judgment lives in the candidate gate (isKickerCandidate) and
+// the collector's context skips, not in a repetition count.
+function checkKickerAboveHeading(opts) {
+  const { candidates } = opts;
+  if (!Array.isArray(candidates)) return [];
   return candidates.map(candidate => ({
-    id: 'repeated-section-kickers',
-    snippet: `repeated section kicker "${candidate.kickerText}" before ${candidate.headingTag} "${candidate.headingText}" (${candidates.length} on page)`,
+    id: 'kicker-above-heading',
+    snippet: `kicker "${candidate.kickerText}" above ${candidate.headingTag} "${candidate.headingText}"`,
   }));
 }
 
@@ -1006,52 +1304,947 @@ function checkMotion(opts) {
   return findings;
 }
 
+// Locate the color token in a single shadow layer. Returns
+// { color, start, end } where color is the parsed {r,g,b,a} (null when the
+// token exists but can't be parsed — e.g. an unresolved var() or an exotic
+// color space), or null when no color token is present at all. Handles both
+// serialization orders: computed style puts the color first
+// ("rgb(…) 0px 0px 20px"), authored CSS usually puts it last
+// ("0 0 20px #3b82f6").
+function findShadowColor(layer) {
+  const fn = layer.match(/(?:rgba?|hsla?|hwb|oklch|oklab|lch|lab|color)\([^)]*\)/i);
+  if (fn) return { color: parseAnyColor(fn[0]), start: fn.index, end: fn.index + fn[0].length };
+  const hex = layer.match(/#[0-9a-fA-F]{3,8}\b/);
+  if (hex) return { color: parseAnyColor(hex[0]), start: hex.index, end: hex.index + hex[0].length };
+  const wordRe = /[a-zA-Z][a-zA-Z]*/g;
+  let m;
+  while ((m = wordRe.exec(layer)) !== null) {
+    const named = CSS_NAMED_COLORS[m[0].toLowerCase()];
+    if (named) return { color: { ...named, a: 1 }, start: m.index, end: m.index + m[0].length };
+  }
+  return null;
+}
+
+// Extract the length values of a shadow layer in declaration order, with the
+// color token removed so its components aren't misread as lengths. Handles
+// computed-style px values AND authored unitless zeros ("0 0 20px"); rem/em
+// approximate at 16px. Result order is offset-x, offset-y, blur, [spread].
+function extractShadowLengths(layer, colorStart, colorEnd) {
+  const stripped = colorStart != null
+    ? layer.slice(0, colorStart) + ' ' + layer.slice(colorEnd)
+    : layer;
+  const vals = [];
+  const re = /(-?\d*\.?\d+)(px|rem|em)?/g;
+  let m;
+  while ((m = re.exec(stripped)) !== null) {
+    let v = parseFloat(m[1]);
+    if (m[2] === 'rem' || m[2] === 'em') v *= 16;
+    vals.push(v);
+  }
+  return vals;
+}
+
 function checkGlow(opts) {
-  const { boxShadow, effectiveBg } = opts;
-  if (!boxShadow || boxShadow === 'none') return [];
-  if (!effectiveBg) return [];
+  const { boxShadow, textShadow, effectiveBg } = opts;
+  const onDarkBg = effectiveBg ? relativeLuminance(effectiveBg) < 0.1 : false;
+
+  // Scan one shadow list. Two glow tells, in any color format:
+  //  1. Zero-offset chromatic halo (0 0 Npx <color>) — slop on ANY
+  //     background; the light radiates evenly outward, which is never how
+  //     real elevation shadows behave. Achromatic zero-offset shadows stay
+  //     legal (soft ambient elevation), as do focus rings (blur 0).
+  //  2. Any chromatic shadow with real blur on a dark background — the
+  //     classic dark-mode glow accent.
+  const scan = (value, prop) => {
+    if (!value || value === 'none') return null;
+    // Split multiple shadows (commas not inside parentheses)
+    for (const layer of value.split(/,(?![^(]*\))/)) {
+      const colorInfo = findShadowColor(layer);
+      // No color token, or one we can't resolve (unresolved var(), exotic
+      // color space): don't guess — skip rather than false-positive.
+      if (!colorInfo || !colorInfo.color) continue;
+      const color = colorInfo.color;
+      if (!hasChroma(color, 30)) continue;
+      const vals = extractShadowLengths(layer, colorInfo.start, colorInfo.end);
+      // Third value is blur (offset-x, offset-y, blur, [spread])
+      if (vals.length < 3 || vals[2] <= 4) continue;
+      if (vals[0] === 0 && vals[1] === 0) {
+        return { id: 'dark-glow', snippet: `Zero-offset ${prop} glow (${colorToHex(color)})` };
+      }
+      if (onDarkBg) {
+        return { id: 'dark-glow', snippet: `Colored ${prop} glow (${colorToHex(color)}) on dark background` };
+      }
+    }
+    return null;
+  };
 
-  // Only flag on dark backgrounds (luminance < 0.1)
-  const bgLum = relativeLuminance(effectiveBg);
-  if (bgLum >= 0.1) return [];
+  const found = scan(boxShadow, 'box-shadow') || scan(textShadow, 'text-shadow');
+  return found ? [found] : [];
+}
 
-  // Split multiple shadows (commas not inside parentheses)
-  const parts = boxShadow.split(/,(?![^(]*\))/);
-  for (const shadow of parts) {
-    const colorMatch = shadow.match(/rgba?\([^)]+\)/);
-    if (!colorMatch) continue;
-    const color = parseRgb(colorMatch[0]);
-    if (!color || !hasChroma(color, 30)) continue;
+// Collect CSS custom property declarations from raw stylesheet/HTML text.
+// First declaration wins (:root declarations usually come first); good
+// enough for the single-level var() resolution the text engines need.
+function collectCssCustomProps(content) {
+  const map = new Map();
+  const re = /(--[\w-]+)\s*:\s*([^;{}]+)/g;
+  let m;
+  while ((m = re.exec(content)) !== null) {
+    if (!map.has(m[1])) map.set(m[1], m[2].trim());
+  }
+  return map;
+}
 
-    // Extract px values — in computed style: "color Xpx Ypx BLURpx [SPREADpx]"
-    const afterColor = shadow.substring(shadow.indexOf(colorMatch[0]) + colorMatch[0].length);
-    const beforeColor = shadow.substring(0, shadow.indexOf(colorMatch[0]));
-    const pxVals = [...beforeColor.matchAll(/([\d.]+)px/g), ...afterColor.matchAll(/([\d.]+)px/g)]
-      .map(m => parseFloat(m[1]));
+// Text-level glow scan shared by the regex engine and the page-level HTML
+// pattern pass. Resolves single-level var() refs against custom properties
+// collected from the same text, then applies the same two glow tells as
+// checkGlow: zero-offset chromatic halo (any background) and chromatic
+// blurred shadow when the page has a dark background. Returns
+// [{ index, snippet }] — index is the offset of the shadow declaration.
+// Dark-page heuristic for raw CSS/HTML text: dark hex/rgb literals, Tailwind
+// dark bg utilities, or a ROOT-scoped (body/html/:root or <body style>)
+// background that resolves — via var() — to a dark color. The var/modern-
+// color extension is deliberately root-scoped: a light page with one dark
+// accent chip must not turn every tinted drop shadow into a "dark page"
+// signal. Shared by the glow and radial-halo text scanners.
+function cssTextHasDarkRootBg(content, customProps) {
+  const darkBgRe = /background(?:-color)?\s*:\s*(?:#(?:0[0-9a-f]|1[0-9a-f]|2[0-3])[0-9a-f]{4}\b|#(?:0|1)[0-9a-f]{2}\b|rgb\(\s*(\d{1,2})\s*,\s*(\d{1,2})\s*,\s*(\d{1,2})\s*\))/i;
+  const twDarkBg = /\bbg-(?:gray|slate|zinc|neutral|stone)-(?:9\d{2}|800)\b/;
+  if (darkBgRe.test(content) || twDarkBg.test(content)) return true;
+  const rootScopes = [];
+  const blockRe = /(?:^|[}\s,;>])(?:body|html|:root)\s*(?:,[^{]*)?\{([^}]*)\}/gi;
+  let sm;
+  while ((sm = blockRe.exec(content)) !== null) rootScopes.push(sm[1]);
+  const inlineBody = content.match(/<body[^>]*\bstyle\s*=\s*"([^"]*)"/i);
+  if (inlineBody) rootScopes.push(inlineBody[1]);
+  for (const scope of rootScopes) {
+    const bgRe = /background(?:-color)?\s*:\s*([^;{}]+)/gi;
+    let bm;
+    while ((bm = bgRe.exec(scope)) !== null) {
+      const c = parseAnyColor(resolveVarRefs(bm[1].trim(), customProps));
+      if (c && (c.a ?? 1) > 0.5 && relativeLuminance(c) < 0.1) return true;
+    }
+  }
+  return false;
+}
+
+function scanCssTextForGlow(content) {
+  const customProps = collectCssCustomProps(content);
+  const hasDarkBg = cssTextHasDarkRootBg(content, customProps);
 
-    // Third value is blur (offset-x, offset-y, blur, [spread])
-    if (pxVals.length >= 3 && pxVals[2] > 4) {
-      return [{ id: 'dark-glow', snippet: `Colored glow (${colorToHex(color)}) on dark background` }];
+  const results = [];
+  const shadowRe = /\b(box-shadow|text-shadow)\s*:\s*([^;{}]+)/gi;
+  let m;
+  while ((m = shadowRe.exec(content)) !== null) {
+    const prop = m[1].toLowerCase();
+    const value = resolveVarRefs(m[2].trim(), customProps);
+    for (const layer of value.split(/,(?![^(]*\))/)) {
+      const colorInfo = findShadowColor(layer);
+      if (!colorInfo || !colorInfo.color || !hasChroma(colorInfo.color, 30)) continue;
+      const vals = extractShadowLengths(layer, colorInfo.start, colorInfo.end);
+      if (vals.length < 3 || vals[2] <= 4) continue;
+      const zeroOffset = vals[0] === 0 && vals[1] === 0;
+      if (!zeroOffset && !hasDarkBg) continue;
+      results.push({
+        index: m.index,
+        snippet: zeroOffset
+          ? `Zero-offset ${prop} glow (${colorToHex(colorInfo.color)})`
+          : `Colored ${prop} glow (${colorToHex(colorInfo.color)}) on dark page`,
+      });
+      break; // one finding per declaration
     }
   }
+  return results;
+}
 
+// Decorative grid or line-field backgrounds drawn with hairline
+// linear-gradient layers tiled by a fixed pixel cell. Shared by the HTML
+// pattern pass and the regex source engine so standalone CSS, component
+// styles, and inline styles receive the same coverage. Both signals must
+// co-occur in one declaration block; unrelated rules must not add up across
+// the file. Returns [{ index, snippet }], capped at one finding per source to
+// match the page-level HTML check's existing behavior.
+function scanCssTextForGridBackground(content) {
+  const hairlineRe = /\b\d{1,3}px\s*,\s*transparent\s+\d{1,3}px/gi;
+  const invertedHairlineRe = /transparent\s+calc\(100%\s*-\s*\d{1,3}px\)/gi;
+  const sizeDeclPxRe = /background-size\s*:[^;{}"']*\b\d{1,3}px\b/i;
+  const sizeDeclPxPairRe = /background-size\s*:[^;{}"']*\b\d{1,3}px\s+\d{1,3}px/i;
+  const shorthandPxAnyRe = /\/\s*\d{1,3}px\b/;
+  const shorthandPxPairRe = /\/\s*\d{1,3}px\s+\d{1,3}px/;
+  const bgDeclRe = /\bbackground(?:-image)?\s*:\s*([^;{}"']*)/gi;
+  const blockRe = /\{([^{}]*)\}|style\s*=\s*"([^"]*)"|style\s*=\s*'([^']*)'/gi;
+  let blk;
+  while ((blk = blockRe.exec(content)) !== null) {
+    const block = blk[1] || blk[2] || blk[3] || '';
+    let hairlineCount = 0;
+    let bgJoined = '';
+    let bm;
+    bgDeclRe.lastIndex = 0;
+    while ((bm = bgDeclRe.exec(block)) !== null) {
+      hairlineCount += (bm[1].match(hairlineRe) || []).length;
+      hairlineCount += (bm[1].match(invertedHairlineRe) || []).length;
+      bgJoined += `${bm[1]};`;
+    }
+    if (hairlineCount === 0) continue;
+    const hasPxCell = sizeDeclPxRe.test(block) || shorthandPxAnyRe.test(bgJoined);
+    const hasPxPairCell = sizeDeclPxPairRe.test(block) || shorthandPxPairRe.test(bgJoined);
+    if ((hairlineCount >= 2 && hasPxCell) || hasPxPairCell) {
+      return [{
+        index: blk.index,
+        snippet: hairlineCount >= 2
+          ? 'two-axis grid-line gradient background'
+          : 'px-tiled hairline line-field background',
+      }];
+    }
+  }
   return [];
 }
 
+// Decorative chromatic halo drawn as a radial-gradient background on a dark
+// page: a saturated center stop dissolving to transparent. The gradient
+// sibling of the dark-glow shadow tell. Mechanical gates, in order:
+//   * page has a dark root background (shared heuristic with the glow scan)
+//   * declaration has no url() layer (photographic imagery is exempt)
+//   * the gradient's first color stop is chromatic (RGB spread >= 24) and
+//     visible (alpha >= 0.7 — deliberately translucent light-scene washes
+//     composite with content instead of painting a flat halo, and stay legal)
+//   * the gradient's last stop is transparent / near-zero alpha
+//   * no small pixel-sized stop positions (<= 24px = dot/texture patterns)
+//   * not a repeating-* gradient
+// Achromatic vignettes fail the chroma gate; panel sheens that fade to an
+// opaque surface color fail the transparent-end gate.
+function scanCssTextForRadialHalo(content) {
+  const customProps = collectCssCustomProps(content);
+  if (!cssTextHasDarkRootBg(content, customProps)) return [];
+
+  const findings = [];
+  const seen = new Set();
+  const declRe = /background(?:-image)?\s*:\s*([^;{}]+)/gi;
+  let m;
+  while ((m = declRe.exec(content)) !== null) {
+    const value = resolveVarRefs(m[1].trim(), customProps);
+    if (/url\s*\(/i.test(value)) continue;
+
+    const gradRe = /(repeating-)?radial-gradient\(/gi;
+    let g;
+    while ((g = gradRe.exec(value)) !== null) {
+      if (g[1]) continue; // repeating-* = pattern, not halo
+      // Balanced-paren capture of the gradient arguments.
+      let depth = 0, end = -1;
+      const open = value.indexOf('(', g.index);
+      for (let i = open; i < value.length; i++) {
+        if (value[i] === '(') depth++;
+        else if (value[i] === ')') { depth--; if (depth === 0) { end = i; break; } }
+      }
+      if (end < 0) break;
+      const args = splitTopLevelCommas(value.slice(open + 1, end));
+      if (args.length < 2) continue;
+
+      // Optional prelude (shape / size / `at <pos>`) carries no color.
+      const colorTokenRe = /(?:rgba?|hsla?|oklch|oklab|lab|lch|hwb|color-mix)\([^)]*(?:\([^)]*\))?[^)]*\)|#[0-9a-f]{3,8}\b|\btransparent\b/i;
+      const stops = args.filter(a => colorTokenRe.test(a));
+      if (stops.length < 2) continue;
+
+      // Dot/texture exemption: px-sized stop positions mean a repeating
+      // background-size pattern, not a page-scale halo.
+      const pxStop = stops.some(s => {
+        const pm = s.match(/(-?[\d.]+)px\b/);
+        return pm && Math.abs(parseFloat(pm[1])) <= 24;
+      });
+      if (pxStop) continue;
+
+      const first = stops[0].match(colorTokenRe);
+      const last = stops[stops.length - 1].match(colorTokenRe);
+      if (!first || !last) continue;
+
+      const lastColor = /^transparent$/i.test(last[0]) ? { r: 0, g: 0, b: 0, a: 0 } : parseAnyColor(last[0]);
+      if (!lastColor || (lastColor.a ?? 1) > 0.05) continue;
+
+      const firstColor = /^transparent$/i.test(first[0]) ? null : parseAnyColor(first[0]);
+      if (!firstColor) continue;
+      if ((firstColor.a ?? 1) < 0.7) continue;
+      const spread = Math.max(firstColor.r, firstColor.g, firstColor.b) - Math.min(firstColor.r, firstColor.g, firstColor.b);
+      if (spread < 24) continue;
+
+      const snippet = `radial-gradient halo (${colorToHex(firstColor)} → transparent) on dark page`;
+      if (seen.has(snippet)) continue;
+      seen.add(snippet);
+      findings.push({ index: m.index, snippet });
+    }
+  }
+  return findings;
+}
+
+// ---------------------------------------------------------------------------
+// Text-level CSS rule-block scanners (pseudo-element stripes, pulsing dots)
+// ---------------------------------------------------------------------------
+
+// Iterate `selector { declarations }` pairs in raw CSS/HTML text. The block
+// body excludes braces, so nested structures (@media, @keyframes) naturally
+// yield their innermost rules with the innermost selector text. Callers
+// create the regex locally — a shared /g instance is not re-entrant.
+const CSS_RULE_BLOCK_SOURCE = String.raw`([^{};]+)\{([^{}]*)\}`;
+
+// Parse a declaration block into a prop → value map (last declaration wins,
+// approximating the cascade inside one block). Values keep their raw text
+// with any !important suffix stripped.
+function parseCssDeclBlock(block) {
+  const decls = new Map();
+  for (const part of String(block || '').split(';')) {
+    const idx = part.indexOf(':');
+    if (idx <= 0) continue;
+    const prop = part.slice(0, idx).trim().toLowerCase();
+    const value = part.slice(idx + 1).replace(/\s*!important\s*$/i, '').trim();
+    if (prop && value) decls.set(prop, value);
+  }
+  return decls;
+}
+
+function cssLengthToPx(value) {
+  const m = String(value || '').trim().match(/^(-?[\d.]+)(px|rem|em)$/i);
+  if (!m) return null;
+  const n = parseFloat(m[1]);
+  return m[2].toLowerCase() === 'px' ? n : n * 16;
+}
+
+function isZeroOffset(value) {
+  return value != null && /^-?0(?:px|%|rem|em)?$/.test(String(value).trim());
+}
+
+// Side-tab variant: the accent stripe drawn as an absolutely-positioned
+// ::before/::after pseudo-element (narrow colored box hugging a vertical
+// edge) instead of a border-left/right. The element-level border checks
+// never see it — pseudo-elements aren't part of the DOM the cascade walks —
+// so this scans stylesheet text directly, mirroring the border rule's
+// gates: >= 3px thick, chromatic fill, full height against a side edge.
+function scanCssTextForPseudoStripe(rawContent) {
+  // Blank comment bodies byte-for-byte so commented-out rules are not
+  // scanned as live CSS and every rule keeps its source offset (each
+  // finding carries `index` so line-based callers can attribute it and
+  // line-scoped inline ignores can match).
+  const content = String(rawContent || '').replace(/\/\*[\s\S]*?\*\//g,
+    (block) => block.replace(/[^\n]/g, ' '));
+  const customProps = collectCssCustomProps(content);
+  const findings = [];
+  const seen = new Set();
+  const ruleRe = new RegExp(CSS_RULE_BLOCK_SOURCE, 'g');
+  let m;
+  while ((m = ruleRe.exec(content)) !== null) {
+    const selector = m[1].trim();
+    if (!/::?(?:before|after)\b/i.test(selector)) continue;
+    // Keep the border rule's prose exemptions (blockquote bars etc.).
+    if (/\b(?:blockquote|pre|code|nav|hr)\b/i.test(selector)) continue;
+    const decls = parseCssDeclBlock(m[2]);
+    const position = decls.get('position');
+    if (position !== 'absolute' && position !== 'fixed') continue;
+
+    const widthPx = cssLengthToPx(resolveVarRefs(
+      decls.get('width') || decls.get('inline-size') || '', customProps));
+    const heightPx = cssLengthToPx(resolveVarRefs(
+      decls.get('height') || decls.get('block-size') || '', customProps));
+    const verticalCandidate = widthPx != null && widthPx >= 3 && widthPx <= 12;
+    // Horizontal variant (top/bottom stripe) carries extra exemptions:
+    // link/button underline affordances, selected-state indicators
+    // (aria-selected="true", aria-current, active/current/selected class
+    // hints), and state-conditional (:hover/:focus/...) affordances are
+    // not stripes. Tab-strip membership alone ([role=tab], .tabs, bare
+    // [aria-selected]) is NOT exempt — a stripe on every tab in the
+    // group is decoration; only the selected item's underline stays.
+    const horizontalCandidate = heightPx != null && heightPx >= 3 && heightPx <= 12
+      && !/(?:^|[\s>+~,(])(?:a|button|summary|tr|td|th|table|li)(?![\w-])/i.test(selector)
+      && !/\[aria-selected\s*[*^$|~]?=\s*["']?true/i.test(selector)
+      && !/\[aria-current(?!\s*[*^$|~]?=\s*["']?false)/i.test(selector)
+      && !/(?:^|[\s._[-])(?:active|current|selected|btn[\w-]*|button[\w-]*|link[\w-]*)(?![\w])/i.test(selector)
+      && !/:(?:hover|focus|focus-visible|focus-within|active|checked)\b/i.test(selector);
+    if (!verticalCandidate && !horizontalCandidate) continue;
+
+    // Resolve edge offsets, letting an `inset` shorthand fill the gaps.
+    const offsets = {
+      top: decls.get('top'), right: decls.get('right'),
+      bottom: decls.get('bottom'), left: decls.get('left'),
+    };
+    const inset = decls.get('inset');
+    if (inset) {
+      const p = inset.split(/\s+/);
+      const [t, r, b, l] =
+        p.length === 1 ? [p[0], p[0], p[0], p[0]]
+        : p.length === 2 ? [p[0], p[1], p[0], p[1]]
+        : p.length === 3 ? [p[0], p[1], p[2], p[1]]
+        : p;
+      if (offsets.top == null) offsets.top = t;
+      if (offsets.right == null) offsets.right = r;
+      if (offsets.bottom == null) offsets.bottom = b;
+      if (offsets.left == null) offsets.left = l;
+    }
+    if (offsets.left == null) offsets.left = decls.get('inset-inline-start');
+    if (offsets.right == null) offsets.right = decls.get('inset-inline-end');
+
+    const heightValue = String(resolveVarRefs(
+      decls.get('height') || decls.get('block-size') || '', customProps)).trim();
+    const widthValue = String(resolveVarRefs(
+      decls.get('width') || decls.get('inline-size') || '', customProps)).trim();
+
+    let edge = null;
+    let thicknessPx = null;
+    if (verticalCandidate) {
+      // Full-height stripes hug both corners; the "floating" variant backs
+      // off each end by a small inset (top/bottom a few px) so the bar
+      // clears the card's corners. Both read as the same side-tab accent —
+      // corner treatment is styling, not a different pattern.
+      const topPx = cssLengthToPx(resolveVarRefs(String(offsets.top ?? ''), customProps));
+      const bottomPx = cssLengthToPx(resolveVarRefs(String(offsets.bottom ?? ''), customProps));
+      const fullHeight = (isZeroOffset(offsets.top) && isZeroOffset(offsets.bottom))
+        || /^100(?:\.0*)?%$/.test(heightValue)
+        || (topPx != null && bottomPx != null
+          && topPx >= 0 && topPx <= 20 && bottomPx >= 0 && bottomPx <= 20);
+      if (fullHeight) {
+        edge = isZeroOffset(offsets.left) ? 'left'
+          : isZeroOffset(offsets.right) ? 'right' : null;
+        thicknessPx = widthPx;
+      }
+    }
+    if (!edge && horizontalCandidate) {
+      const fullWidth = (isZeroOffset(offsets.left) && isZeroOffset(offsets.right))
+        || /^100(?:\.0*)?%$/.test(widthValue);
+      if (fullWidth) {
+        edge = isZeroOffset(offsets.top) ? 'top'
+          : isZeroOffset(offsets.bottom) ? 'bottom' : null;
+        thicknessPx = heightPx;
+      }
+    }
+    if (!edge) continue;
+
+    // Chromatic fill only — a neutral hairline divider is not an accent
+    // stripe. Unresolvable colors err toward detection, matching the
+    // border rule's unknown-format default.
+    const bg = String(resolveVarRefs(
+      decls.get('background-color') || decls.get('background') || '', customProps)).trim();
+    if (!bg || /^(?:none|transparent|inherit|initial|unset|currentcolor)$/i.test(bg)) continue;
+    const colorToken = bg.match(/(?:rgba?|hsla?|oklch|oklab|lab|lch|hwb)\([^)]*\)|#[0-9a-f]{3,8}\b/i);
+    const parsed = parseAnyColor(colorToken ? colorToken[0] : bg);
+    if (parsed) {
+      if ((parsed.a ?? 1) < 0.1) continue;
+      const spread = Math.max(parsed.r, parsed.g, parsed.b) - Math.min(parsed.r, parsed.g, parsed.b);
+      if (spread < 30) continue;
+    } else if (/^(?:white|black|gray|grey|silver)$/i.test(bg)) {
+      continue;
+    }
+
+    if (seen.has(selector)) continue;
+    seen.add(selector);
+    // The selector group absorbs whitespace trailing the previous rule;
+    // advance past it so `index` points at the selector itself.
+    const selectorStart = m.index + (m[1].length - m[1].trimStart().length);
+    findings.push({
+      id: 'side-tab',
+      snippet: `${selector} — absolute ${thicknessPx}px pseudo-element stripe (${edge}: 0)`,
+      index: selectorStart,
+    });
+  }
+  return findings;
+}
+
+// Side-tab stripe drawn as a single-edge inset box-shadow
+// (x or y offset 3-12px, other axis 0, no blur/spread, chromatic color):
+// paints a bar along one edge with no border property involved, so the
+// element-level border checks never see it. Selection-state indicators
+// are exempt — an inset stripe on [aria-current] / .active / [role=tab]
+// marks the selected item; the same stripe unconditionally on every item
+// is decoration and flags.
+function scanCssTextForInsetStripe(content) {
+  const customProps = collectCssCustomProps(content);
+  const findings = [];
+  const seen = new Set();
+  const ruleRe = new RegExp(CSS_RULE_BLOCK_SOURCE, 'g');
+  let m;
+  while ((m = ruleRe.exec(content)) !== null) {
+    const selector = m[1].trim();
+    // Selection-state contexts: current-item markers and interaction
+    // states. Tab-strip membership alone ([role=tab], .tabs, bare
+    // [aria-selected]) is NOT exempt — a stripe on every tab in the
+    // group is decoration; only the selected item's indicator stays.
+    if (/:(?:hover|focus|focus-visible|focus-within|active|checked|target)\b/i.test(selector)) continue;
+    if (/\[aria-selected\s*[*^$|~]?=\s*["']?true/i.test(selector)) continue;
+    if (/\[aria-current(?!\s*[*^$|~]?=\s*["']?false)/i.test(selector)) continue;
+    if (/(?:^|[\s._[-])(?:active|current|selected)(?![\w])/i.test(selector)) continue;
+    // Structural tags where a single-edge inset shadow is depth/quoting,
+    // not an accent stripe.
+    if (/(?:^|[\s>+~,(])(?:button|hr|tr|td|th|table|blockquote|pre|code)(?![\w-])/i.test(selector)) continue;
+
+    const decls = parseCssDeclBlock(m[2]);
+    const shadow = decls.get('box-shadow');
+    if (!shadow || !/\binset\b/i.test(shadow)) continue;
+    // Narrow fixed-width elements (logo marks, icon glyphs) use inset
+    // fills as artwork, not edge stripes. Stripe targets — cards, badges,
+    // menu items — are wider or leave width to layout.
+    const declaredWidth = cssLengthToPx(resolveVarRefs(decls.get('width') || decls.get('inline-size') || '', customProps));
+    if (declaredWidth != null && declaredWidth <= 40) continue;
+    const value = resolveVarRefs(shadow, customProps);
+    for (const layer of value.split(/,(?![^(]*\))/)) {
+      if (!/\binset\b/i.test(layer)) continue;
+      const colorInfo = findShadowColor(layer);
+      // Unresolvable colors (currentColor, external vars): don't guess.
+      if (!colorInfo || !colorInfo.color) continue;
+      const c = colorInfo.color;
+      if ((c.a ?? 1) < 0.1) continue;
+      const chroma = Math.max(c.r, c.g, c.b) - Math.min(c.r, c.g, c.b);
+      if (chroma < 30) continue;
+      const vals = extractShadowLengths(layer, colorInfo.start, colorInfo.end);
+      const x = vals[0] || 0, y = vals[1] || 0, blur = vals[2] || 0, sp = vals[3] || 0;
+      if (blur !== 0 || sp !== 0) continue;
+      const ax = Math.abs(x), ay = Math.abs(y);
+      const isStripe = (ax >= 3 && ax <= 12 && ay === 0) || (ay >= 3 && ay <= 12 && ax === 0);
+      if (!isStripe) continue;
+      if (seen.has(selector)) break;
+      seen.add(selector);
+      const edge = ay === 0 ? (x > 0 ? 'left' : 'right') : (y > 0 ? 'top' : 'bottom');
+      findings.push({
+        id: 'side-tab',
+        snippet: `${selector} — inset box-shadow ${ay === 0 ? ax : ay}px stripe (${edge})`,
+      });
+      break;
+    }
+  }
+  return findings;
+}
+
+// Collect @keyframes names whose body travels horizontally — the marquee
+// loop. X travel is measured across every translateX/translate/translate3d
+// X component in the body: a centered element animating something else
+// keeps a constant -50% X (zero travel) and never qualifies, while a
+// ticker moves from its resting position to a large offset. Keyframes
+// with a single X sample that also vary scale/opacity read as pulses or
+// breathes, not marquees.
+function collectMarqueeKeyframes(content) {
+  const names = new Set();
+  const re = /@(?:-webkit-)?keyframes\s+([\w-]+)\s*\{/g;
+  let m;
+  while ((m = re.exec(content)) !== null) {
+    let depth = 1;
+    let i = re.lastIndex;
+    while (i < content.length && depth > 0) {
+      const ch = content.charCodeAt(i);
+      if (ch === 0x7b /* { */) depth++;
+      else if (ch === 0x7d /* } */) depth--;
+      i++;
+    }
+    const body = content.slice(re.lastIndex, Math.max(re.lastIndex, i - 1));
+    re.lastIndex = i;
+
+    // Only percentage travel qualifies: a content marquee translates by a
+    // fraction of its own (unknown) track width, so generated tickers use
+    // -50% / -100%. Pixel-travel loops are bespoke product animations —
+    // sweeping playheads, progress indicators — not marquees.
+    const pct = [];
+    const xRe = /\btranslate(?:X|3d)?\(\s*(-?[\d.]+)%/gi;
+    let xm;
+    while ((xm = xRe.exec(body)) !== null) pct.push(parseFloat(xm[1]));
+    if (pct.length === 0) continue;
+    if (pct.length === 1 && /\bscale\(|\bopacity\s*:/i.test(body)) continue;
+    // Implicit start: a lone declared X animates from the element's
+    // resting position, so its magnitude is the travel.
+    const travelPct = pct.length > 1 ? Math.max(...pct) - Math.min(...pct) : Math.abs(pct[0]);
+    if (travelPct >= 20) names.add(m[1]);
+  }
+  return names;
+}
+
+// Auto-scrolling marquee: a <marquee> element, or an infinite animation
+// bound to a keyframe loop that travels a large horizontal distance.
+// Rotation/opacity animations never qualify (no X travel); JS-driven
+// carousels with user controls have no infinite CSS X-loop to match.
+// `content` is CSS-bearing text; `markup` (defaulting to the same string
+// for single-corpus callers) is where the <marquee> tag itself lives.
+function scanCssTextForMarquee(content, markup = content) {
+  const findings = [];
+  if (/<marquee\b/i.test(markup)) {
+    findings.push({ id: 'marquee', snippet: '<marquee> element' });
+  }
+  const marqueeKeyframes = collectMarqueeKeyframes(content);
+  if (marqueeKeyframes.size === 0) return findings;
+  const seen = new Set();
+  const ruleRe = new RegExp(CSS_RULE_BLOCK_SOURCE, 'g');
+  let m;
+  while ((m = ruleRe.exec(content)) !== null) {
+    const selector = m[1].trim();
+    const decls = parseCssDeclBlock(m[2]);
+    for (const name of infiniteAnimationNames(decls)) {
+      if (!marqueeKeyframes.has(name)) continue;
+      const key = `${selector} ${name}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      findings.push({ id: 'marquee', snippet: `${selector} — infinite horizontal loop animation "${name}"` });
+    }
+  }
+  return findings;
+}
+
+// Collect @keyframes names and whether each one reads as a "pulse" —
+// i.e. it varies opacity, scale, or box-shadow. Rotation-only keyframes
+// (spinners) are explicitly not pulses.
+function collectPulseKeyframes(content) {
+  const map = new Map();
+  const re = /@(?:-webkit-)?keyframes\s+([\w-]+)\s*\{/g;
+  let m;
+  while ((m = re.exec(content)) !== null) {
+    let depth = 1;
+    let i = re.lastIndex;
+    while (i < content.length && depth > 0) {
+      const ch = content.charCodeAt(i);
+      if (ch === 0x7b /* { */) depth++;
+      else if (ch === 0x7d /* } */) depth--;
+      i++;
+    }
+    const body = content.slice(re.lastIndex, Math.max(re.lastIndex, i - 1));
+    const pulses = /\bopacity\s*:/i.test(body)
+      || /\bbox-shadow\s*:/i.test(body)
+      || /\btransform\s*:[^;{}]*\bscale/i.test(body);
+    if (!map.has(m[1]) || pulses) map.set(m[1], pulses);
+    re.lastIndex = i;
+  }
+  return map;
+}
+
+const ANIMATION_VALUE_KEYWORDS = new Set([
+  'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear',
+  'infinite', 'alternate', 'alternate-reverse', 'normal', 'reverse',
+  'none', 'forwards', 'backwards', 'both', 'running', 'paused',
+  'step-start', 'step-end', 'inherit', 'initial', 'unset',
+]);
+
+// Extract animation names that run with iteration-count: infinite from a
+// declaration block (shorthand layers or animation-name + iteration-count).
+function infiniteAnimationNames(decls) {
+  const out = [];
+  const shorthand = decls.get('animation');
+  if (shorthand) {
+    for (const layer of shorthand.split(/,(?![^(]*\))/)) {
+      if (!/\binfinite\b/i.test(layer)) continue;
+      const name = layer.split(/\s+/).find(t =>
+        /^[a-zA-Z_-][\w-]*$/.test(t) && !ANIMATION_VALUE_KEYWORDS.has(t.toLowerCase()));
+      if (name) out.push(name);
+    }
+  }
+  const nameDecl = decls.get('animation-name');
+  if (nameDecl && /\binfinite\b/i.test(decls.get('animation-iteration-count') || '')) {
+    for (const raw of nameDecl.split(',')) {
+      const t = raw.trim();
+      if (t && t.toLowerCase() !== 'none') out.push(t);
+    }
+  }
+  return out;
+}
+
+function isRoundDotRadius(radiusValue, w, h) {
+  if (!radiusValue) return false;
+  const first = String(radiusValue).trim().split(/\s+/)[0];
+  const pct = first.match(/^([\d.]+)%$/);
+  if (pct) return parseFloat(pct[1]) >= 40;
+  const px = cssLengthToPx(first);
+  if (px == null) return false;
+  return px >= 999 || px >= 0.4 * Math.min(w, h);
+}
+
+// Remove @media blocks whose condition is prefers-reduced-motion: reduce.
+// Those blocks describe the accessibility fallback, not the default
+// experience that ships — an `animation: none` reset inside one must not
+// mask the resting-state animation the page plays for everyone else.
+function stripReducedMotionBlocks(content) {
+  const re = /@media[^{]*prefers-reduced-motion\s*:\s*reduce[^{]*\{/gi;
+  let out = '';
+  let last = 0;
+  let m;
+  while ((m = re.exec(content)) !== null) {
+    let depth = 1;
+    let i = re.lastIndex;
+    while (i < content.length && depth > 0) {
+      const ch = content.charCodeAt(i);
+      if (ch === 0x7b /* { */) depth++;
+      else if (ch === 0x7d /* } */) depth--;
+      i++;
+    }
+    out += content.slice(last, m.index);
+    last = i;
+    re.lastIndex = i;
+  }
+  return out + content.slice(last);
+}
+
+// Source-index ranges of <header> and <nav> landmark elements in an HTML
+// string. Lets string-level scans decide whether a matched element sits in
+// the page chrome (the hero/nav region) without needing a DOM.
+function landmarkSourceRanges(content) {
+  const ranges = [];
+  for (const tag of ['header', 'nav']) {
+    const re = new RegExp(`<${tag}\\b|</${tag}\\s*>`, 'gi');
+    const stack = [];
+    let m;
+    while ((m = re.exec(content)) !== null) {
+      if (m[0].charAt(1) === '/') {
+        const start = stack.pop();
+        if (start != null) ranges.push([start, m.index]);
+      } else {
+        stack.push(m.index);
+      }
+    }
+  }
+  return ranges;
+}
+
+function indexInSourceRanges(index, ranges) {
+  return ranges.some(([start, end]) => index >= start && index < end);
+}
+
+// Does any element targeted by the final compound of `selector` appear
+// inside a header/nav landmark range of the HTML source? Resolves the last
+// .class or #id token of the selector against class/id attributes; a
+// tag-only compound is never resolvable this way and returns false
+// (conservative: no promotion without placement evidence).
+function selectorHitsLandmark(content, selector, ranges) {
+  if (!ranges || ranges.length === 0) return false;
+  const last = selector.split(/[\s>+~]+/).filter(Boolean).pop() || '';
+  const idMatch = last.match(/#([A-Za-z_][\w-]*)/);
+  const classMatch = last.match(/\.([A-Za-z_][\w-]*)/);
+  let attrRe = null;
+  if (idMatch) {
+    const id = idMatch[1].replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    attrRe = new RegExp(`<[a-zA-Z][^>]*\\bid\\s*=\\s*["']${id}["']`, 'gi');
+  } else if (classMatch) {
+    const cls = classMatch[1].replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    attrRe = new RegExp(`<[a-zA-Z][^>]*\\bclass\\s*=\\s*["'][^"']*(?<![\\w-])${cls}(?![\\w-])[^"']*["']`, 'gi');
+  }
+  if (!attrRe) return false;
+  let m;
+  while ((m = attrRe.exec(content)) !== null) {
+    if (indexInSourceRanges(m.index, ranges)) return true;
+  }
+  return false;
+}
+
+// Small circular indicator bound to an infinite pulse animation — the
+// decorative "live" dot. Gates: tiny (<= 16px square-ish), round
+// (border-radius >= 40% or pill values), and an infinite animation whose
+// keyframes vary opacity/scale/box-shadow (or a pulse/blink/ping name when
+// the keyframes aren't in the scanned text). Rotation-only animations
+// (spinners) never flag.
+//
+// Declarations for one selector are merged across rule blocks before the
+// predicate runs: size in the base rule plus the animation added in a
+// second block (or inside a matching @media block) is the construction
+// that ships. prefers-reduced-motion: reduce overrides are stripped first
+// so their animation resets don't mask the default experience. A dot whose
+// element sits inside a header/nav landmark is the hero liveness cliché
+// and is promoted to error severity; occurrences elsewhere keep the
+// registry default severity.
+//
+// `content` is CSS-bearing text (rules and keyframes); `markup` — defaulting
+// to the same string for single-corpus callers like the regex source
+// engine — is where landmark ranges and Tailwind class attributes live.
+function scanCssTextForPulsingDot(content, markup = content) {
+  const customProps = collectCssCustomProps(content);
+  const keyframes = collectPulseKeyframes(content);
+  const heroRanges = landmarkSourceRanges(markup);
+  const findings = [];
+  const seen = new Set();
+
+  // Merge declarations per selector across rule blocks, approximating the
+  // cascade: later declarations for the same property win. Comma lists are
+  // split so `.a, .b { … }` contributes to both selectors. Comments are
+  // stripped first so they neither pollute selector keys nor smuggle a
+  // comma into the selector-list split.
+  const scanText = stripReducedMotionBlocks(content).replace(/\/\*[\s\S]*?\*\//g, ' ');
+  const merged = new Map();
+  const ruleRe = new RegExp(CSS_RULE_BLOCK_SOURCE, 'g');
+  let m;
+  while ((m = ruleRe.exec(scanText)) !== null) {
+    const decls = parseCssDeclBlock(m[2]);
+    if (decls.size === 0) continue;
+    for (const rawSelector of m[1].split(',')) {
+      const selector = rawSelector.trim();
+      if (!selector || selector.startsWith('@')) continue;
+      let acc = merged.get(selector);
+      if (!acc) {
+        acc = new Map();
+        merged.set(selector, acc);
+      }
+      for (const [prop, value] of decls) acc.set(prop, value);
+    }
+  }
+
+  for (const [selector, decls] of merged) {
+    const names = infiniteAnimationNames(decls);
+    if (names.length === 0) continue;
+    const pulseName = names.find(n => {
+      const known = keyframes.get(n);
+      if (known != null) return known;
+      return /pulse|blink|ping/i.test(n);
+    });
+    if (!pulseName) continue;
+
+    const w = cssLengthToPx(resolveVarRefs(
+      decls.get('width') || decls.get('inline-size') || '', customProps));
+    const h = cssLengthToPx(resolveVarRefs(
+      decls.get('height') || decls.get('block-size') || '', customProps));
+    if (w == null || h == null || w < 2 || h < 2 || w > 16 || h > 16) continue;
+
+    const radius = resolveVarRefs(decls.get('border-radius') || '', customProps);
+    if (!isRoundDotRadius(radius, w, h)) continue;
+
+    if (seen.has(selector)) continue;
+    seen.add(selector);
+    const inLandmark = selectorHitsLandmark(markup, selector, heroRanges);
+    findings.push({
+      id: 'pulsing-dot',
+      snippet: `${selector} — ${w}x${h}px dot with infinite "${pulseName}" animation${inLandmark ? ' in header/nav' : ''}`,
+      selector,
+      ...(inLandmark ? { severity: 'error' } : {}),
+    });
+  }
+
+  // Tailwind utilities: animate-ping / animate-pulse on a tiny rounded-full
+  // element declared entirely in the class attribute. Scanned in the markup
+  // corpus so the match index lines up with the landmark ranges.
+  const classRe = /class\s*=\s*(?:"([^"]*)"|'([^']*)')/gi;
+  let cm;
+  while ((cm = classRe.exec(markup)) !== null) {
+    const cls = cm[1] || cm[2] || '';
+    const anim = cls.match(/\banimate-(ping|pulse)\b/);
+    if (!anim) continue;
+    if (!/\brounded-full\b/.test(cls)) continue;
+    if (!/\b(?:w|h|size)-(?:1|1\.5|2|2\.5|3|3\.5|4)\b/.test(cls)) continue;
+    const key = `tw:${cls}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    const inLandmark = indexInSourceRanges(cm.index, heroRanges);
+    findings.push({
+      id: 'pulsing-dot',
+      snippet: `animate-${anim[1]} on tiny rounded-full element${inLandmark ? ' in header/nav' : ''}`,
+      ...(inLandmark ? { severity: 'error' } : {}),
+    });
+  }
+
+  return findings;
+}
+
+// Shape-assembled illustration: a large inline SVG composing a pictorial
+// scene from many primitive shapes (rect / circle / ellipse / polygon) in
+// several fill colors — the clip-art hero mascot. Gates keep the legitimate
+// SVG population out:
+//   • icons and logos: intrinsic size gate (>= 200px on both axes, from
+//     width/height attributes or the viewBox when no explicit size is set)
+//   • charts / labeled diagrams: more than two <text>/<tspan> nodes exempts
+//     the graphic (axis labels, callouts)
+//   • line drawings / technical diagrams: primitive count < 8 or fewer
+//     than 3 distinct fills never qualifies (stroke-only art has no fills)
+//   • tiling background textures: any <pattern> definition exempts
+function scanHtmlForShapeAssembledIllustration(html) {
+  const findings = [];
+  const svgRe = /<svg\b[^>]*>[\s\S]*?<\/svg>/gi;
+  let m;
+  while ((m = svgRe.exec(html)) !== null) {
+    const block = m[0];
+    const openTag = (block.match(/^<svg\b[^>]*>/i) || [''])[0];
+
+    // Data-bearing or annotated graphics: axis labels and callout text
+    // mark a chart or diagram, not a mascot.
+    const textCount = (block.match(/<(?:text|tspan)\b/gi) || []).length;
+    if (textCount > 2) continue;
+    // Tiling texture definitions are decorative backgrounds, not scenes.
+    if (/<pattern\b/i.test(block)) continue;
+
+    const primitives = (block.match(/<(?:rect|circle|ellipse|polygon)\b/gi) || []).length;
+    if (primitives < 8) continue;
+
+    // Intrinsic size: explicit width/height attributes win; fall back to
+    // the viewBox box. Percentage or missing sizes stay unresolvable on
+    // that axis and the viewBox speaks for them.
+    const attrDim = (name) => {
+      // (?<![-\w]) keeps compound attributes like stroke-width from
+      // masquerading as the svg's own width.
+      const am = openTag.match(new RegExp(`(?<![-\\w])${name}\\s*=\\s*["']\\s*([\\d.]+)(?:px)?\\s*["']`, 'i'));
+      return am ? parseFloat(am[1]) : null;
+    };
+    const vb = openTag.match(/\bviewBox\s*=\s*["']\s*[-\d.]+[\s,]+[-\d.]+[\s,]+([\d.]+)[\s,]+([\d.]+)\s*["']/i);
+    const w = attrDim('width') ?? (vb ? parseFloat(vb[1]) : null);
+    const h = attrDim('height') ?? (vb ? parseFloat(vb[2]) : null);
+    if (w == null || h == null || w < 200 || h < 200) continue;
+
+    // Distinct fill paints (attributes and inline styles), excluding
+    // non-paints. Multiple fills are what turn a shape pile into a scene.
+    const fills = new Set();
+    for (const fm of block.matchAll(/\bfill\s*[:=]\s*["']?\s*([^"';>}\s]+)/gi)) {
+      const paint = fm[1].trim().toLowerCase();
+      if (!paint || ['none', 'transparent', 'currentcolor', 'inherit'].includes(paint)) continue;
+      fills.add(paint);
+    }
+    if (fills.size < 3) continue;
+
+    findings.push({
+      id: 'shape-assembled-illustration',
+      snippet: `inline <svg> scene: ${primitives} primitive shapes, ~${Math.round(w)}x${Math.round(h)}px, ${fills.size} fill colors`,
+    });
+  }
+  return findings;
+}
+
+// Scoped scan corpora for the page-level pattern checks. CSS-property
+// regexes run over the whole source string fire on documentation ABOUT
+// css — `<code>background-clip: text</code>` prose, <pre> samples, HTML
+// comments — so the checks scan only the strings that actually style the
+// page:
+//   styleText — <style> block contents plus style="…" attribute values.
+//     Attribute values keep their `style="…"` form so block-scoped
+//     scanners (grid background) keep treating each attribute as one
+//     declaration block, exactly as they did against raw source. Engines
+//     that already read more CSS (linked stylesheets) prepend it.
+//   classText — class attribute values, for utility-class scans.
+// Markup-shaped checks (inline <svg> scenes, <img> tags, <marquee>,
+// landmark ranges) and rendered-text checks (theater phrases) keep the
+// full source. This extraction serves callers without a parsed document
+// (the browser bundle scanning outerHTML); attribute reads are tag-scoped
+// so escaped code samples (&lt;div style="…"&gt;) never contribute. The
+// static engine passes richer corpora built from its parsed document.
+// Bare CSS input (no markup at all) is its own style text, which keeps
+// direct checkHtmlPatterns(css) callers behaving as before.
+function buildHtmlPatternCorpora(html) {
+  const source = String(html || '');
+  if (!/<[a-zA-Z!/]/.test(source)) {
+    return { styleText: source, classText: source };
+  }
+  const styleParts = [];
+  const classParts = [];
+  const styleBlockRe = /<style\b[^>]*>([\s\S]*?)<\/style>/gi;
+  let m;
+  while ((m = styleBlockRe.exec(source)) !== null) styleParts.push(m[1]);
+  const tagRe = /<[a-zA-Z][^>]*>/g;
+  while ((m = tagRe.exec(source)) !== null) {
+    const tag = m[0];
+    const sm = tag.match(/\bstyle\s*=\s*("[^"]*"|'[^']*')/i);
+    if (sm) styleParts.push(`style=${sm[1]}`);
+    const cm = tag.match(/\bclass\s*=\s*(?:"([^"]*)"|'([^']*)')/i);
+    if (cm) classParts.push(cm[1] ?? cm[2] ?? '');
+  }
+  return { styleText: styleParts.join('\n'), classText: classParts.join('\n') };
+}
+
 /**
  * Regex-on-HTML checks shared between browser and Node page-level detection.
- * These don't need DOM access, just the raw HTML string.
+ * These don't need DOM access, just the raw HTML string. CSS-property and
+ * utility-class patterns scan the scoped corpora (styleText / classText —
+ * see buildHtmlPatternCorpora) so prose about css never flags; only the
+ * markup-shaped and rendered-text checks read the full source.
  */
-function checkHtmlPatterns(html) {
+function checkHtmlPatterns(html, corpora) {
+  const { styleText, classText } = corpora || buildHtmlPatternCorpora(html);
   const findings = [];
 
   // --- Color ---
 
   // AI color palette: purple/violet
   const purpleHexRe = /#(?:7c3aed|8b5cf6|a855f7|9333ea|7e22ce|6d28d9|6366f1|764ba2|667eea)\b/gi;
-  if (purpleHexRe.test(html)) {
+  if (purpleHexRe.test(styleText)) {
     const purpleTextRe = /(?:(?:^|;)\s*color\s*:\s*(?:.*?)(?:#(?:7c3aed|8b5cf6|a855f7|9333ea|7e22ce|6d28d9))|gradient.*?#(?:7c3aed|8b5cf6|a855f7|764ba2|667eea))/gi;
-    if (purpleTextRe.test(html)) {
+    if (purpleTextRe.test(styleText)) {
       findings.push({ id: 'ai-color-palette', snippet: 'Purple/violet accent colors detected' });
     }
   }
@@ -1059,38 +2252,48 @@ function checkHtmlPatterns(html) {
   // Gradient text (background-clip: text + gradient)
   const gradientRe = /(?:-webkit-)?background-clip\s*:\s*text/gi;
   let gm;
-  while ((gm = gradientRe.exec(html)) !== null) {
+  while ((gm = gradientRe.exec(styleText)) !== null) {
     const start = Math.max(0, gm.index - 200);
-    const context = html.substring(start, gm.index + gm[0].length + 200);
+    const context = styleText.substring(start, gm.index + gm[0].length + 200);
     if (/gradient/i.test(context)) {
       findings.push({ id: 'gradient-text', snippet: 'background-clip: text + gradient' });
       break;
     }
   }
-  if (/\bbg-clip-text\b/.test(html) && /\bbg-gradient-to-/.test(html)) {
+  if (/\bbg-clip-text\b/.test(classText) && /\bbg-gradient-to-/.test(classText)) {
     findings.push({ id: 'gradient-text', snippet: 'bg-clip-text + bg-gradient (Tailwind)' });
   }
 
+  // --- Borders ---
+
+  // Side-tab accent stripe drawn as an absolutely-positioned pseudo-element
+  // (no border property involved, so the element-level border checks and
+  // the border-left regexes never see it).
+  findings.push(...scanCssTextForPseudoStripe(styleText));
+
+  // Side-tab accent stripe drawn as a single-edge inset box-shadow.
+  findings.push(...scanCssTextForInsetStripe(styleText));
+
   // --- Layout ---
 
   // Monotonous spacing
   const spacingValues = [];
   const spacingRe = /(?:padding|margin)(?:-(?:top|right|bottom|left))?\s*:\s*(\d+)px/gi;
   let sm;
-  while ((sm = spacingRe.exec(html)) !== null) {
+  while ((sm = spacingRe.exec(styleText)) !== null) {
     const v = parseInt(sm[1], 10);
     if (v > 0 && v < 200) spacingValues.push(v);
   }
   const gapRe = /gap\s*:\s*(\d+)px/gi;
-  while ((sm = gapRe.exec(html)) !== null) {
+  while ((sm = gapRe.exec(styleText)) !== null) {
     spacingValues.push(parseInt(sm[1], 10));
   }
   const twSpaceRe = /\b(?:p|px|py|pt|pb|pl|pr|m|mx|my|mt|mb|ml|mr|gap)-(\d+)\b/g;
-  while ((sm = twSpaceRe.exec(html)) !== null) {
+  while ((sm = twSpaceRe.exec(classText)) !== null) {
     spacingValues.push(parseInt(sm[1], 10) * 4);
   }
   const remSpacingRe = /(?:padding|margin)(?:-(?:top|right|bottom|left))?\s*:\s*([\d.]+)rem/gi;
-  while ((sm = remSpacingRe.exec(html)) !== null) {
+  while ((sm = remSpacingRe.exec(styleText)) !== null) {
     const v = Math.round(parseFloat(sm[1]) * 16);
     if (v > 0 && v < 200) spacingValues.push(v);
   }
@@ -1114,7 +2317,7 @@ function checkHtmlPatterns(html) {
 
   // Bounce/elastic animation names
   const bounceRe = /animation(?:-name)?\s*:\s*([^;{}]*(?:bounce|elastic|wobble|jiggle|spring)[^;{}]*)/gi;
-  const bounceMatch = bounceRe.exec(html);
+  const bounceMatch = bounceRe.exec(styleText);
   if (bounceMatch) {
     const animationToken = bounceMatch[1]
       .split(/[,\s]+/)
@@ -1125,7 +2328,7 @@ function checkHtmlPatterns(html) {
   // Overshoot cubic-bezier
   const bezierRe = /cubic-bezier\(\s*([\d.-]+)\s*,\s*([\d.-]+)\s*,\s*([\d.-]+)\s*,\s*([\d.-]+)\s*\)/g;
   let bm;
-  while ((bm = bezierRe.exec(html)) !== null) {
+  while ((bm = bezierRe.exec(styleText)) !== null) {
     const y1 = parseFloat(bm[2]), y2 = parseFloat(bm[4]);
     if (y1 < -0.1 || y1 > 1.1 || y2 < -0.1 || y2 > 1.1) {
       findings.push({ id: 'bounce-easing', snippet: `cubic-bezier(${bm[1]}, ${bm[2]}, ${bm[3]}, ${bm[4]})` });
@@ -1136,7 +2339,7 @@ function checkHtmlPatterns(html) {
   // Layout property transitions
   const transRe = /transition(?:-property)?\s*:\s*([^;{}]+)/gi;
   let tm;
-  while ((tm = transRe.exec(html)) !== null) {
+  while ((tm = transRe.exec(styleText)) !== null) {
     const val = tm[1].toLowerCase();
     if (/\ball\b/.test(val)) continue;
     const found = val.match(/\b(?:(?:max|min)-)?(?:width|height)\b|\bpadding(?:-(?:top|right|bottom|left))?\b|\bmargin(?:-(?:top|right|bottom|left))?\b/gi);
@@ -1146,33 +2349,54 @@ function checkHtmlPatterns(html) {
     }
   }
 
-  // --- Dark glow ---
+  // Pulsing status dots (tiny circular elements on infinite pulse animations).
+  // The CSS rules come from styleText; the markup carries the landmark
+  // ranges and Tailwind class attributes.
+  findings.push(...scanCssTextForPulsingDot(styleText, html));
 
-  const darkBgRe = /background(?:-color)?\s*:\s*(?:#(?:0[0-9a-f]|1[0-9a-f]|2[0-3])[0-9a-f]{4}\b|#(?:0|1)[0-9a-f]{2}\b|rgb\(\s*(\d{1,2})\s*,\s*(\d{1,2})\s*,\s*(\d{1,2})\s*\))/gi;
-  const twDarkBg = /\bbg-(?:gray|slate|zinc|neutral|stone)-(?:9\d{2}|800)\b/;
-  if (darkBgRe.test(html) || twDarkBg.test(html)) {
-    const shadowRe = /box-shadow\s*:\s*([^;{}]+)/gi;
-    let shm;
-    while ((shm = shadowRe.exec(html)) !== null) {
-      const val = shm[1];
-      const colorMatch = val.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
-      if (!colorMatch) continue;
-      const [r, g, b] = [+colorMatch[1], +colorMatch[2], +colorMatch[3]];
-      if ((Math.max(r, g, b) - Math.min(r, g, b)) < 30) continue;
-      const pxVals = [...val.matchAll(/(\d+)px|(?<![.\d])\b(0)\b(?![.\d])/g)].map(p => +(p[1] || p[2]));
-      if (pxVals.length >= 3 && pxVals[2] > 4) {
-        findings.push({ id: 'dark-glow', snippet: `Colored glow (rgb(${r},${g},${b})) on dark page` });
-        break;
-      }
-    }
+  // Shape-assembled illustrations (large pictorial SVGs built from primitives)
+  findings.push(...scanHtmlForShapeAssembledIllustration(html));
+
+  // Auto-scrolling marquees (<marquee> or infinite horizontal loop animations)
+  findings.push(...scanCssTextForMarquee(styleText, html));
+
+  // --- Dark glow / chromatic halo shadows ---
+
+  const glowHits = scanCssTextForGlow(styleText);
+  if (glowHits.length > 0) {
+    findings.push({ id: 'dark-glow', snippet: glowHits[0].snippet });
   }
 
-  // --- Provider tells (gated): repeating-gradient stripes (GPT) ---
-  if (/repeating-(?:linear|radial|conic)-gradient\s*\(/i.test(html)) {
+  // Radial-gradient background halo (gradient-drawn sibling of dark-glow)
+  const haloHits = scanCssTextForRadialHalo(styleText);
+  if (haloHits.length > 0) {
+    findings.push({ id: 'radial-halo', snippet: haloHits[0].snippet });
+  }
+
+  // --- Generated-UI tells: repeating-gradient stripes ---
+  if (/repeating-(?:linear|radial|conic)-gradient\s*\(/i.test(styleText)) {
     findings.push({ id: 'repeating-stripes-gradient', snippet: 'repeating-gradient decorative stripes' });
   }
 
-  // --- Provider tells (gated): "X theater" framing copy (GPT) ---
+  // --- Generated-UI tells: two-axis grid-line background ---
+  // The Codex grid tell is two hairline `linear-gradient(... <color> 1px,
+  // transparent 1px)` layers (one per axis) tiled by a repeating
+  // `background-size` cell. Both signals must co-occur in the SAME style block
+  // (a CSS rule body or one inline `style="..."`): two hairline stops WITHOUT a
+  // tiling background-size is a fixed crosshair, not a grid, and a single
+  // hairline is a legitimate ruled line. Scoping to one block also stops
+  // unrelated single-axis rules on separate elements from adding up across the
+  // page. Count hairlines only inside `background`/`background-image` values so
+  // a hairline in an unrelated property (mask-image, border-image) can't stand
+  // in for the second axis. Colors like `oklch(96% 0.012 82 / 0.055)` carry
+  // nested parens, so match the hairline stop directly rather than parsing
+  // whole gradient layers.
+  const gridHits = scanCssTextForGridBackground(styleText);
+  if (gridHits.length > 0) {
+    findings.push({ id: 'codex-grid-background', snippet: gridHits[0].snippet });
+  }
+
+  // --- Generated-copy tells: "X theater" framing copy ---
   // Lives here (regex-on-HTML) rather than in the text-content analyzers so it
   // runs in the bundled browser path too, not just the CLI/static path.
   {
@@ -1184,12 +2408,12 @@ function checkHtmlPatterns(html) {
     if (tm) findings.push({ id: 'theater-slop-phrase', snippet: `"${tm[0].trim()}"` });
   }
 
-  // --- Provider tells (gated): image hover transform (Gemini) ---
+  // --- Generated-UI tells: image hover transform ---
   // A CSS `img...:hover { transform: ... }` rule, or a Tailwind hover:scale /
   // hover:rotate / hover:translate utility on an <img>. Each distinct
   // mechanism is its own finding.
   const imgHoverCss = /\bimg\b[^,{}]*:hover\b[^{}]*\{[^}]*\btransform\s*:\s*(?:scale|rotate|translate|matrix|skew)/i;
-  if (imgHoverCss.test(html)) {
+  if (imgHoverCss.test(styleText)) {
     findings.push({ id: 'image-hover-transform', snippet: 'img:hover { transform } rule' });
   }
   const imgTagRe = /<img\b[^>]*\bclass\s*=\s*"([^"]*)"/gi;
@@ -1213,7 +2437,11 @@ function checkHtmlPatterns(html) {
 // `background: #abc`. Real browsers always decompose, so the fallback is
 // a no-op there.
 function readOwnBackgroundColor(el, computedStyle) {
-  const bg = parseRgb(computedStyle.backgroundColor);
+  // Real browsers keep wide-gamut/computed color functions (oklch(), oklab(),
+  // color-mix() results) in getComputedStyle output, which plain parseRgb
+  // misses — a flat oklch button background would silently skip every
+  // contrast check without the parseAnyColor fallback.
+  const bg = parseRgb(computedStyle.backgroundColor) || parseAnyColor(computedStyle.backgroundColor);
   if (DETECTOR_IS_BROWSER || (bg && bg.a >= 0.1)) return bg;
   const rawStyle = el.getAttribute?.('style') || '';
   const bgMatch = rawStyle.match(/background(?:-color)?\s*:\s*([^;]+)/i);
@@ -1235,6 +2463,18 @@ function readOwnBackgroundColor(el, computedStyle) {
 
 function resolveBackground(el, win, customPropMap) {
   let current = el;
+  // Translucent layers (0.1 < a < 1) found on the way down to an opaque
+  // base. A browser composites these over the base; the old behavior
+  // either returned them as-if-opaque (browser mode) or skipped them
+  // entirely (static mode), both of which misstate the effective surface
+  // for contrast checks (e.g. `background: color-mix(in oklab, var(--hot)
+  // 16%, transparent)` chips on dark pages).
+  const overlays = [];
+  const flatten = (base) => {
+    let acc = base;
+    for (let i = overlays.length - 1; i >= 0; i--) acc = compositeColorOver(overlays[i], acc);
+    return acc;
+  };
   while (current && current.nodeType === 1) {
     const style = DETECTOR_IS_BROWSER ? getComputedStyle(current) : win.getComputedStyle(current);
     const bgImage = style.backgroundImage || '';
@@ -1247,7 +2487,9 @@ function resolveBackground(el, win, customPropMap) {
     // decorative. The old behavior bailed on any gradient ancestor, which
     // caused massive false-positive contrast findings on grain-textured
     // body backgrounds.
-    let bg = parseRgb(style.backgroundColor);
+    // Real browsers serialize wide-gamut computed values as oklab()/oklch()
+    // (e.g. any color-mix() result), which plain parseRgb misses.
+    let bg = parseRgb(style.backgroundColor) || parseAnyColor(style.backgroundColor);
     if (!DETECTOR_IS_BROWSER && (!bg || bg.a < 0.1)) {
       // jsdom returns literal "var(--X)" / "oklch(...)" strings. Resolve
       // through customPropMap so Tailwind v4 color tokens become RGB.
@@ -1267,7 +2509,8 @@ function resolveBackground(el, win, customPropMap) {
     }
 
     if (bg && bg.a > 0.1) {
-      if (DETECTOR_IS_BROWSER || bg.a >= 0.5) return bg;
+      if (bg.a >= 0.99) return flatten(bg);
+      overlays.push(bg);
     }
     // No solid bg-color at this level. If THIS level has a gradient/url
     // with no underlying solid color we can read:
@@ -1283,41 +2526,66 @@ function resolveBackground(el, win, customPropMap) {
     //     bgs worth checking against).
     if (hasGradientOrUrl) {
       if (current.tagName === 'BODY' || current.tagName === 'HTML') {
-        return { r: 255, g: 255, b: 255, a: 1 };
+        return flatten({ r: 255, g: 255, b: 255, a: 1 });
       }
       return null;
     }
     current = current.parentElement;
   }
-  return { r: 255, g: 255, b: 255 };
+  return flatten({ r: 255, g: 255, b: 255, a: 1 });
 }
 
 // Walk parents looking for a gradient background and return its color stops.
 // Used as a fallback when resolveBackground() returns null because the
 // effective background is a gradient (no single solid color to compare against).
-function resolveGradientStops(el, win) {
+function resolveGradientStops(el, win, customPropMap) {
   let current = el;
   while (current && current.nodeType === 1) {
     const style = DETECTOR_IS_BROWSER ? getComputedStyle(current) : win.getComputedStyle(current);
     const bgImage = style.backgroundImage || '';
+    let stops = null;
     if (bgImage && bgImage !== 'none' && /gradient/i.test(bgImage)) {
-      const stops = parseGradientColors(bgImage);
-      if (stops.length > 0) return stops;
+      const parsed = parseGradientColors(bgImage);
+      if (parsed.length > 0) stops = parsed;
     }
-    if (!DETECTOR_IS_BROWSER) {
+    if (!stops && !DETECTOR_IS_BROWSER) {
       // jsdom doesn't decompose `background:` shorthand — peek at the raw inline style
       const rawStyle = current.getAttribute?.('style') || '';
       const bgMatch = rawStyle.match(/background(?:-image)?\s*:\s*([^;]+)/i);
       if (bgMatch && /gradient/i.test(bgMatch[1])) {
-        const stops = parseGradientColors(bgMatch[1]);
-        if (stops.length > 0) return stops;
+        const parsed = parseGradientColors(bgMatch[1]);
+        if (parsed.length > 0) stops = parsed;
       }
     }
+    if (stops) return compositeGradientStops(stops, current, win, customPropMap);
     current = current.parentElement;
   }
   return null;
 }
 
+// A translucent gradient stop (e.g. a faint `rgba(52,192,168,0.09)` accent
+// glow) paints over whatever surface sits beneath the gradient — the browser
+// composites it, so its effective color is far closer to the base than to the
+// full-opacity accent. Treating the stop as opaque flags every text child of a
+// softly-glowing section as low-contrast (issue #409 Case B). Composite each
+// alpha stop over the resolved surface beneath the gradient element. When that
+// surface isn't resolvable (another gradient above, no opaque ancestor), drop
+// the translucent stop rather than guess: a dropped stop can't manufacture a
+// false finding, and skipping beats a wrong ratio.
+function compositeGradientStops(stops, gradientEl, win, customPropMap) {
+  const hasAlpha = stops.some(s => (s.a ?? 1) < 0.99);
+  if (!hasAlpha) return stops;
+  const base = resolveBackground(gradientEl.parentElement || gradientEl, win, customPropMap);
+  const out = [];
+  for (const s of stops) {
+    const a = s.a ?? 1;
+    if (a >= 0.99) { out.push(s); continue; }
+    if (base) out.push(compositeColorOver(s, base));
+    // else: unresolvable base — drop the translucent stop (skip, don't guess).
+  }
+  return out.length ? out : null;
+}
+
 // Parse a single CSS length token to pixels. Accepts "12px", "50%", a
 // shorthand like "12px 4px" (uses the first value), or empty / null.
 // Returns the pixel value, or null when the input is unparseable.
@@ -1351,6 +2619,43 @@ function resolveBorderRadiusPx(el, style, widthPx, win) {
 
 // Browser adapters — call getComputedStyle/getBoundingClientRect on live DOM
 
+// Selected-state context for accent stripes. Only an actual selection
+// marker exempts the stripe as the standard active-item indicator:
+// aria-selected="true", aria-current (any non-false value), or an
+// active/current/selected class hint. Tab-strip MEMBERSHIP alone
+// ([role=tablist]/[role=tab]/.tabs ancestry, aria-selected="false")
+// deliberately does not — a chromatic stripe repeated on every tab in
+// the group, or on every menu item, is decoration, not state; the
+// selected item's own underline stays legal.
+function isTabContextElement(el) {
+  if (!el) return false;
+  try {
+    if (el.closest?.('[aria-selected="true"], [aria-current]:not([aria-current="false"])')) return true;
+  } catch { /* selector engine differences — fall through to class scan */ }
+  let cur = el, depth = 0;
+  while (cur && cur.nodeType === 1 && depth < 6) {
+    const cls = String(cur.getAttribute?.('class') || cur.className || '');
+    if (/(?:^|[\s_-])(?:active|current|selected)(?:$|[\s_-])/i.test(cls)) return true;
+    cur = cur.parentElement;
+    depth++;
+  }
+  return false;
+}
+
+// Status-surface context for accent borders. On a live status/alert region
+// (role=status|alert|alertdialog|log, or aria-live=polite|assertive) a colored
+// single-edge border is the established severity-accent convention — a toast,
+// snackbar, or callout bar — not the decorative side-tab tell. The element
+// itself or a wrapping live region qualifies. This never fires from the
+// CSS-only / regex scanners, which have no role information.
+function isStatusContextElement(el) {
+  if (!el) return false;
+  try {
+    if (el.closest?.('[role="status"], [role="alert"], [role="alertdialog"], [role="log"], [aria-live="polite"], [aria-live="assertive"]')) return true;
+  } catch { /* selector engine differences — fall through */ }
+  return false;
+}
+
 function checkElementBordersDOM(el) {
   const tag = el.tagName.toLowerCase();
   if (BORDER_SAFE_TAGS.has(tag)) return [];
@@ -1363,7 +2668,105 @@ function checkElementBordersDOM(el) {
     widths[s] = parseFloat(style[`border${s}Width`]) || 0;
     colors[s] = style[`border${s}Color`] || '';
   }
-  return checkBorders(tag, widths, colors, parseFloat(style.borderRadius) || 0);
+  const ownBg = parseRgb(style.backgroundColor) || parseAnyColor(style.backgroundColor);
+  return checkBorders(tag, widths, colors, parseFloat(style.borderRadius) || 0, {
+    tabContext: isTabContextElement(el),
+    statusContext: isStatusContextElement(el),
+    badgeLike: !!(ownBg && (ownBg.a ?? 1) > 0.1),
+  });
+}
+
+// Browser-side twin of scanCssTextForPseudoStripe. The text scanner reads
+// stylesheet source, so a stripe whose color only exists at runtime (an
+// inline per-card custom property, a JS-assigned var) or whose geometry
+// resolves in layout never matches it. In a real browser the pseudo-element's
+// computed style carries the actual used color and px geometry — check those
+// directly. Gates mirror the text scanner: 3-12px thick, chromatic fill,
+// spanning (nearly) the full edge; corner rounding on the host card is
+// irrelevant. Exemptions stay narrow: structural/prose tags, real selection
+// markers (isTabContextElement), and button/link affordances for the
+// horizontal variant.
+function checkElementPseudoStripeDOM(el) {
+  const tag = el.tagName.toLowerCase();
+  if (BORDER_SAFE_TAGS.has(tag) || tag === 'summary') return [];
+  if (el.closest?.('nav, blockquote, pre')) return [];
+  if (!isRenderedForBrowserRule(el)) return [];
+  const rect = el.getBoundingClientRect();
+  if (rect.width < 40 || rect.height < 20) return [];
+  if (isTabContextElement(el)) return [];
+
+  const findings = [];
+  for (const which of ['::before', '::after']) {
+    let ps;
+    try { ps = getComputedStyle(el, which); } catch { continue; }
+    if (!ps || ps.content === 'none' || ps.content === '') continue;
+    if (ps.position !== 'absolute' && ps.position !== 'fixed') continue;
+    if ((parseFloat(ps.opacity) || 0) <= 0.01 || ps.display === 'none') continue;
+    const w = parseFloat(ps.width) || 0;
+    const h = parseFloat(ps.height) || 0;
+    if (!(w > 0 && h > 0)) continue;
+
+    // Used values: for absolutely-positioned boxes the browser resolves
+    // both edge offsets after layout, so left/right (and top/bottom) are
+    // real distances, never "auto".
+    const left = parseFloat(ps.left);
+    const right = parseFloat(ps.right);
+    const top = parseFloat(ps.top);
+    const bottom = parseFloat(ps.bottom);
+    const hugs = (v) => Number.isFinite(v) && v >= -2 && v <= 2;
+
+    let edge = null;
+    let thickness = null;
+    // Vertical stripe: narrow box spanning (nearly) the full height of the
+    // host, hugging its left or right edge. "Nearly" tolerates the floating
+    // variant that backs off each end by a small inset.
+    if (w >= 3 && w <= 12 && h >= rect.height - 44 && h >= rect.height * 0.5) {
+      edge = hugs(left) ? 'left' : hugs(right) ? 'right' : null;
+      thickness = w;
+    }
+    // Horizontal stripe riding the top or bottom edge. Button/link-styled
+    // hosts keep their underline affordances.
+    if (!edge && h >= 3 && h <= 12 && w >= rect.width - 44 && w >= rect.width * 0.5) {
+      const cls = String(el.getAttribute?.('class') || el.className || '');
+      if (!/(?:^|[\s_-])(?:btn|button|link)(?:$|[\s\w_-])/i.test(cls)) {
+        edge = hugs(top) ? 'top' : hugs(bottom) ? 'bottom' : null;
+        thickness = h;
+      }
+    }
+    if (!edge) continue;
+
+    const bg = parseRgb(ps.backgroundColor) || parseAnyColor(ps.backgroundColor);
+    if (!bg || (bg.a ?? 1) < 0.1) continue;
+    if (Math.max(bg.r, bg.g, bg.b) - Math.min(bg.r, bg.g, bg.b) < 30) continue;
+
+    findings.push({
+      id: 'side-tab',
+      snippet: `${classSelector(el)}${which} — absolute ${thickness}px pseudo-element stripe (${edge})`,
+    });
+  }
+  return findings;
+}
+
+// Full-cover surface pseudo (browser): a ::before/::after positioned
+// absolute/fixed whose box covers (nearly) the whole host and carries an
+// opaque background. That pseudo is the element's visible surface even
+// though the element's own background-color reads transparent — the nav-CTA
+// construction that otherwise escapes every own-background contrast gate.
+function readPseudoSurfaceDOM(el, rect) {
+  for (const which of ['::before', '::after']) {
+    let ps;
+    try { ps = getComputedStyle(el, which); } catch { continue; }
+    if (!ps || ps.content === 'none' || ps.content === '') continue;
+    if (ps.position !== 'absolute' && ps.position !== 'fixed') continue;
+    if (ps.display === 'none' || (parseFloat(ps.opacity) || 1) < 0.9) continue;
+    const w = parseFloat(ps.width) || 0;
+    const h = parseFloat(ps.height) || 0;
+    if (w < rect.width - 4 || h < rect.height - 4) continue;
+    const bg = parseRgb(ps.backgroundColor) || parseAnyColor(ps.backgroundColor);
+    if (!bg || (bg.a ?? 1) < 0.9) continue;
+    return bg;
+  }
+  return null;
 }
 
 function checkElementColorsDOM(el) {
@@ -1376,11 +2779,24 @@ function checkElementColorsDOM(el) {
   const style = getComputedStyle(el);
   const directText = [...el.childNodes].filter(n => n.nodeType === 3).map(n => n.textContent).join('');
   const hasDirectText = directText.trim().length > 0;
-  const effectiveBg = resolveBackground(el);
+  let effectiveBg = resolveBackground(el);
+  let ownBg = readOwnBackgroundColor(el, style);
+  if (!ownBg || (ownBg.a ?? 1) <= 0.5) {
+    const pseudoSurface = readPseudoSurfaceDOM(el, rect);
+    if (pseudoSurface) {
+      ownBg = pseudoSurface;
+      effectiveBg = pseudoSurface;
+    }
+  }
   return checkColors({
     tag,
-    textColor: parseRgb(style.color),
-    bgColor: readOwnBackgroundColor(el, style),
+    // Chrome serializes computed colors specified in modern spaces as
+    // oklch()/oklab() strings; without the parseAnyColor fallback the text
+    // color comes back null and the low-contrast / gray-on-color checks
+    // silently never run (the shipped miss: a nav CTA whose text color was
+    // an oklch token near its own oklch background).
+    textColor: parseRgb(style.color) || parseAnyColor(style.color),
+    bgColor: ownBg,
     effectiveBg,
     effectiveBgStops: effectiveBg ? null : resolveGradientStops(el),
     fontSize: parseFloat(style.fontSize) || 16,
@@ -1441,6 +2857,21 @@ function checkElementItalicSerifDOM(el) {
   });
 }
 
+function domAccentDashPseudo(el) {
+  for (const which of ['::before', '::after']) {
+    let ps;
+    try { ps = getComputedStyle(el, which); } catch { continue; }
+    if (!ps || ps.content === 'none' || ps.content === '') continue;
+    const w = parseFloat(ps.width) || 0;
+    const h = parseFloat(ps.height) || 0;
+    if (!(w >= 8 && w <= 80 && h >= 1 && h <= 6)) continue;
+    const bg = parseRgb(ps.backgroundColor) || parseAnyColor(ps.backgroundColor);
+    if (!bg || (bg.a ?? 1) < 0.1) continue;
+    if (Math.max(bg.r, bg.g, bg.b) - Math.min(bg.r, bg.g, bg.b) >= 30) return true;
+  }
+  return false;
+}
+
 function checkElementHeroEyebrowDOM(el) {
   const tag = el.tagName.toLowerCase();
   if (tag !== 'h1') return [];
@@ -1452,6 +2883,7 @@ function checkElementHeroEyebrowDOM(el) {
     headingTag: tag,
     headingText: el.textContent || '',
     headingFontSize: parseFloat(headStyle.fontSize) || 0,
+    headingInApplicationContext: !!el.closest('[role="tabpanel"], [role="dialog"], [role="application"], dialog'),
     siblingTag: sibling.tagName.toLowerCase(),
     siblingText: sibling.textContent || '',
     siblingTextTransform: sibStyle.textTransform || '',
@@ -1459,6 +2891,7 @@ function checkElementHeroEyebrowDOM(el) {
     siblingLetterSpacing: parseFloat(sibStyle.letterSpacing) || 0,
     siblingFontWeight: sibStyle.fontWeight || '',
     siblingColor: sibStyle.color || '',
+    siblingHasAccentDashPseudo: domAccentDashPseudo(sibling),
   });
 }
 
@@ -1523,8 +2956,10 @@ function resolveVarRefs(raw, customPropMap, depth = 0) {
 // detector's contrast / color checks.
 function oklchToRgb(L, C, H) {
   const hRad = (H * Math.PI) / 180;
-  const a = C * Math.cos(hRad);
-  const b = C * Math.sin(hRad);
+  return oklabToRgb(L, C * Math.cos(hRad), C * Math.sin(hRad));
+}
+
+function oklabToRgb(L, a, b) {
   const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
   const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
   const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
@@ -1544,13 +2979,178 @@ function oklchToRgb(L, C, H) {
   };
 }
 
-// Extended color parser: rgb/rgba/hex/oklch. Returns null on no match.
-// Use this when the input might be any CSS color form; use plain parseRgb
-// when you only expect computed rgb() values from real browsers.
+function hslToRgb(h, s, l) {
+  h = ((h % 360) + 360) % 360;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m0 = l - c / 2;
+  const [r, g, b] =
+    h < 60 ? [c, x, 0] :
+    h < 120 ? [x, c, 0] :
+    h < 180 ? [0, c, x] :
+    h < 240 ? [0, x, c] :
+    h < 300 ? [x, 0, c] : [c, 0, x];
+  return {
+    r: Math.round((r + m0) * 255),
+    g: Math.round((g + m0) * 255),
+    b: Math.round((b + m0) * 255),
+    a: 1,
+  };
+}
+
+function hwbToRgb(h, w, bl) {
+  if (w + bl >= 1) {
+    const g = Math.round((w / (w + bl)) * 255);
+    return { r: g, g, b: g, a: 1 };
+  }
+  const base = hslToRgb(h, 1, 0.5);
+  const mix = (c) => Math.round(((c / 255) * (1 - w - bl) + w) * 255);
+  return { r: mix(base.r), g: mix(base.g), b: mix(base.b), a: 1 };
+}
+
+// Common CSS named colors — the handful that actually show up in generated
+// UIs, not the full 148-name spec list. Includes the achromatic names so a
+// named gray parses (and correctly reads as no-chroma) instead of being
+// treated as an unknown color.
+const CSS_NAMED_COLORS = {
+  black: { r: 0, g: 0, b: 0 },
+  white: { r: 255, g: 255, b: 255 },
+  gray: { r: 128, g: 128, b: 128 },
+  grey: { r: 128, g: 128, b: 128 },
+  silver: { r: 192, g: 192, b: 192 },
+  dimgray: { r: 105, g: 105, b: 105 },
+  darkgray: { r: 169, g: 169, b: 169 },
+  lightgray: { r: 211, g: 211, b: 211 },
+  gainsboro: { r: 220, g: 220, b: 220 },
+  whitesmoke: { r: 245, g: 245, b: 245 },
+  red: { r: 255, g: 0, b: 0 },
+  crimson: { r: 220, g: 20, b: 60 },
+  tomato: { r: 255, g: 99, b: 71 },
+  coral: { r: 255, g: 127, b: 80 },
+  salmon: { r: 250, g: 128, b: 114 },
+  orange: { r: 255, g: 165, b: 0 },
+  gold: { r: 255, g: 215, b: 0 },
+  yellow: { r: 255, g: 255, b: 0 },
+  olive: { r: 128, g: 128, b: 0 },
+  lime: { r: 0, g: 255, b: 0 },
+  green: { r: 0, g: 128, b: 0 },
+  teal: { r: 0, g: 128, b: 128 },
+  turquoise: { r: 64, g: 224, b: 208 },
+  cyan: { r: 0, g: 255, b: 255 },
+  aqua: { r: 0, g: 255, b: 255 },
+  skyblue: { r: 135, g: 206, b: 235 },
+  dodgerblue: { r: 30, g: 144, b: 255 },
+  blue: { r: 0, g: 0, b: 255 },
+  navy: { r: 0, g: 0, b: 128 },
+  indigo: { r: 75, g: 0, b: 130 },
+  rebeccapurple: { r: 102, g: 51, b: 153 },
+  purple: { r: 128, g: 0, b: 128 },
+  violet: { r: 238, g: 130, b: 238 },
+  orchid: { r: 218, g: 112, b: 214 },
+  magenta: { r: 255, g: 0, b: 255 },
+  fuchsia: { r: 255, g: 0, b: 255 },
+  hotpink: { r: 255, g: 105, b: 180 },
+  pink: { r: 255, g: 192, b: 203 },
+  maroon: { r: 128, g: 0, b: 0 },
+};
+
+// Split a string on top-level commas (ignoring commas nested in parens).
+function splitTopLevelCommas(str) {
+  const parts = [];
+  let depth = 0, start = 0;
+  for (let i = 0; i < str.length; i++) {
+    const ch = str[i];
+    if (ch === '(') depth++;
+    else if (ch === ')') depth = Math.max(0, depth - 1);
+    else if (ch === ',' && depth === 0) {
+      parts.push(str.slice(start, i).trim());
+      start = i + 1;
+    }
+  }
+  const tail = str.slice(start).trim();
+  if (tail) parts.push(tail);
+  return parts;
+}
+
+// Evaluate a CSS color-mix() expression to {r,g,b,a}. Returns null when
+// the expression can't be resolved (unresolved var(), unknown colors).
+//
+// Mixing is done with premultiplied alpha in sRGB regardless of the
+// declared interpolation space. That is exact for the dominant generated-UI
+// pattern — `color-mix(in oklab, <color> N%, transparent)` — where the
+// result is simply <color> at alpha N% in ANY rectangular space, and a
+// close-enough approximation for opaque-opaque mixes (the detector only
+// consumes these values for contrast/chroma thresholds, not for display).
+function parseColorMix(str) {
+  const m = String(str).trim().match(/^color-mix\(/i);
+  if (!m) return null;
+  // Balanced-paren capture of the arguments.
+  let depth = 0, end = -1;
+  const open = str.indexOf('(');
+  for (let i = open; i < str.length; i++) {
+    if (str[i] === '(') depth++;
+    else if (str[i] === ')') { depth--; if (depth === 0) { end = i; break; } }
+  }
+  if (end < 0) return null;
+  const args = splitTopLevelCommas(str.slice(open + 1, end));
+  if (args.length !== 3 || !/^in\s/i.test(args[0])) return null;
+
+  const parseComponent = (component) => {
+    // Percentage may lead or trail the color per spec.
+    let pct = null;
+    let colorStr = component;
+    const trail = component.match(/\s+([\d.]+)%$/);
+    const lead = component.match(/^([\d.]+)%\s+/);
+    if (trail) { pct = parseFloat(trail[1]); colorStr = component.slice(0, trail.index).trim(); }
+    else if (lead) { pct = parseFloat(lead[1]); colorStr = component.slice(lead[0].length).trim(); }
+    let color;
+    if (/^transparent$/i.test(colorStr)) color = { r: 0, g: 0, b: 0, a: 0 };
+    else color = parseAnyColor(colorStr);
+    if (!color) return null;
+    return { color, pct };
+  };
+
+  const c1 = parseComponent(args[1]);
+  const c2 = parseComponent(args[2]);
+  if (!c1 || !c2) return null;
+  let p1 = c1.pct, p2 = c2.pct;
+  if (p1 == null && p2 == null) { p1 = 50; p2 = 50; }
+  else if (p1 == null) p1 = 100 - p2;
+  else if (p2 == null) p2 = 100 - p1;
+  const sum = p1 + p2;
+  if (sum <= 0) return null;
+  // Per spec: weights normalize to sum; when sum < 100 the result alpha is
+  // additionally scaled by sum/100.
+  const w1 = p1 / sum, w2 = p2 / sum;
+  const alphaScale = sum < 100 ? sum / 100 : 1;
+  const a1 = c1.color.a ?? 1, a2 = c2.color.a ?? 1;
+  const a = (a1 * w1 + a2 * w2) * alphaScale;
+  if (a <= 0) return { r: 0, g: 0, b: 0, a: 0 };
+  const mix = (ch) => Math.round((c1.color[ch] * a1 * w1 + c2.color[ch] * a2 * w2) / (a1 * w1 + a2 * w2));
+  return { r: mix('r'), g: mix('g'), b: mix('b'), a: Math.min(1, a) };
+}
+
+// Composite a translucent color over an opaque(ish) base (simple
+// source-over in sRGB). Returns an opaque {r,g,b,a:1}.
+function compositeColorOver(top, base) {
+  const a = top.a ?? 1;
+  return {
+    r: Math.round(top.r * a + base.r * (1 - a)),
+    g: Math.round(top.g * a + base.g * (1 - a)),
+    b: Math.round(top.b * a + base.b * (1 - a)),
+    a: 1,
+  };
+}
+
+// Extended color parser: rgb/rgba/hex/oklch/oklab/hsl/hwb/color-mix/common
+// named colors. Returns null on no match. Use this when the input might be
+// any CSS color form; use plain parseRgb when you only expect computed rgb()
+// values from real browsers.
 function parseAnyColor(s) {
   if (!s || typeof s !== 'string') return null;
   const str = s.trim();
   if (str === 'transparent' || str === 'currentcolor' || str === 'inherit') return null;
+  if (/^color-mix\(/i.test(str)) return parseColorMix(str);
   let m;
   m = str.match(/rgba?\(\s*(\d+(?:\.\d+)?)\s*,?\s*(\d+(?:\.\d+)?)\s*,?\s*(\d+(?:\.\d+)?)(?:\s*[,/]\s*([\d.]+))?\s*\)/);
   if (m) return { r: Math.round(+m[1]), g: Math.round(+m[2]), b: Math.round(+m[3]), a: m[4] !== undefined ? +m[4] : 1 };
@@ -1588,6 +3188,41 @@ function parseAnyColor(s) {
     }
     return rgb;
   }
+  // OKLAB — a/b are signed axes; percentages map 100% → 0.4.
+  m = str.match(/oklab\(\s*([\d.]+)(%?)\s+(-?[\d.]+)(%?)\s+(-?[\d.]+)(%?)(?:\s*\/\s*([\d.]+)(%)?)?\s*\)/i);
+  if (m) {
+    const L = m[2] === '%' ? parseFloat(m[1]) / 100 : parseFloat(m[1]);
+    const a = m[4] === '%' ? parseFloat(m[3]) * 0.004 : parseFloat(m[3]);
+    const b = m[6] === '%' ? parseFloat(m[5]) * 0.004 : parseFloat(m[5]);
+    const rgb = oklabToRgb(L, a, b);
+    if (m[7] !== undefined) {
+      const alpha = parseFloat(m[7]);
+      rgb.a = m[8] === '%' ? alpha / 100 : alpha;
+    }
+    return rgb;
+  }
+  // HSL/HSLA — comma or space syntax, optional deg on hue.
+  m = str.match(/hsla?\(\s*(-?[\d.]+)(?:deg)?\s*[,\s]\s*([\d.]+)%\s*[,\s]\s*([\d.]+)%(?:\s*[,/]\s*([\d.]+)(%)?)?\s*\)/i);
+  if (m) {
+    const rgb = hslToRgb(parseFloat(m[1]), parseFloat(m[2]) / 100, parseFloat(m[3]) / 100);
+    if (m[4] !== undefined) {
+      const alpha = parseFloat(m[4]);
+      rgb.a = m[5] === '%' ? alpha / 100 : alpha;
+    }
+    return rgb;
+  }
+  // HWB — hue whiteness% blackness%.
+  m = str.match(/hwb\(\s*(-?[\d.]+)(?:deg)?\s+([\d.]+)%\s+([\d.]+)%(?:\s*\/\s*([\d.]+)(%)?)?\s*\)/i);
+  if (m) {
+    const rgb = hwbToRgb(parseFloat(m[1]), parseFloat(m[2]) / 100, parseFloat(m[3]) / 100);
+    if (m[4] !== undefined) {
+      const alpha = parseFloat(m[4]);
+      rgb.a = m[5] === '%' ? alpha / 100 : alpha;
+    }
+    return rgb;
+  }
+  const named = CSS_NAMED_COLORS[str.toLowerCase()];
+  if (named) return { ...named, a: 1 };
   return null;
 }
 
@@ -1600,7 +3235,7 @@ function parseColorResolved(str, customPropMap) {
   return parseAnyColor(resolved);
 }
 
-const REPEATED_KICKER_SKIP_SELECTOR = [
+const KICKER_SKIP_SELECTOR = [
   'nav',
   'form',
   'table',
@@ -1619,7 +3254,7 @@ const REPEATED_KICKER_SKIP_SELECTOR = [
   '[data-impeccable-allow-kickers]',
 ].join(',');
 
-const REPEATED_KICKER_CARD_CONTEXT_SELECTOR = [
+const KICKER_CARD_CONTEXT_SELECTOR = [
   'article',
   'button',
   'a',
@@ -1637,23 +3272,32 @@ function cleanInlineText(el) {
     .trim();
 }
 
-function isRepeatedKickerCardContext(heading, kicker) {
-  const item = heading.closest?.(REPEATED_KICKER_CARD_CONTEXT_SELECTOR);
+function isKickerCardContext(heading, kicker) {
+  const item = heading.closest?.(KICKER_CARD_CONTEXT_SELECTOR);
   return Boolean(item && (!item.contains || item.contains(kicker)));
 }
 
-function isRepeatedKickerCandidate(opts) {
+// Meta lines above headlines join category and date (or path crumbs) with
+// separator glyphs, or carry a year. A kicker is one short phrase; metadata
+// keeps its markers.
+const KICKER_META_TEXT_RE = /[·•|]|\s[\/›»>]\s|\b(19|20)\d{2}\b/;
+// Legal and document numbering: "Section 4.2", "Article IX", "§ 12.3",
+// dotted decimal outlines. The label identifies the clause, so it stays.
+const KICKER_DOC_NUMBERING_RE = /^(§|\d+(\.\d+)+\b|(section|article|clause|appendix|exhibit|schedule|chapter|part|rule|title)\s+([\divxlc]+\b|one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve)\b)/i;
+
+function isKickerCandidate(opts) {
   const {
-    headingTag,
+    headingLevel,
     headingText,
     headingFontSize,
     kickerTag,
     kickerText,
     kickerTextTransform,
+    kickerFontVariant,
     kickerFontSize,
     kickerLetterSpacing,
   } = opts;
-  if (!['h2', 'h3', 'h4'].includes(headingTag)) return false;
+  if (!headingLevel || headingLevel > 4) return false;
   if (!headingText || headingText.length < 3) return false;
   if (/^\/[\w-]+/i.test(headingText.replace(/^"|"$/g, '').trim())) return false;
   if (!(headingFontSize >= 20)) return false;
@@ -1661,47 +3305,82 @@ function isRepeatedKickerCandidate(opts) {
   if (!['p', 'span', 'div', 'small'].includes(kickerTag)) return false;
   if (!kickerText || kickerText.length < 2 || kickerText.length > 34) return false;
   if (/^step\s*\d+/i.test(kickerText) || /^\d{1,2}$/.test(kickerText)) return false;
+  if (KICKER_META_TEXT_RE.test(kickerText)) return false;
+  if (KICKER_DOC_NUMBERING_RE.test(kickerText)) return false;
 
+  const isSmallCaps = /small-caps/.test(kickerFontVariant || '');
   const isUppercased = kickerTextTransform === 'uppercase'
-    || (/[A-Z]/.test(kickerText) && !/[a-z]/.test(kickerText));
+    || (/[A-Z]/.test(kickerText) && !/[a-z]/.test(kickerText))
+    || isSmallCaps;
   if (!isUppercased) return false;
   if (!(kickerFontSize > 0 && kickerFontSize <= 14)) return false;
-  const minTrackedSpacing = Math.max(1, kickerFontSize * 0.08);
+  // Proportional only, no absolute floor: the wild's most common recipe is
+  // 0.08em at a sub-13px size, which computes to under 1px and sailed past
+  // the old Math.max(1, ...) floor (observed live: a page whose kickers were
+  // literally class="kicker" produced zero findings).
+  const minTrackedSpacing = kickerFontSize * 0.06;
   if (!(kickerLetterSpacing >= minTrackedSpacing)) return false;
   return true;
 }
 
-function collectRepeatedSectionKickerCandidates(doc, getStyle, resolveLetterSpacing) {
+// Resolve a heading level for the anchor element: 1-4 for h1-h4, aria-level
+// (default 2) for role="heading" elements, 0 otherwise.
+function kickerHeadingLevel(heading) {
+  const tag = heading.tagName.toLowerCase();
+  const byTag = /^h([1-6])$/.exec(tag);
+  if (byTag) return parseInt(byTag[1], 10);
+  const role = heading.getAttribute?.('role') || '';
+  if (role.toLowerCase() !== 'heading') return 0;
+  const ariaLevel = parseInt(heading.getAttribute?.('aria-level') || '', 10);
+  return Number.isFinite(ariaLevel) && ariaLevel >= 1 ? ariaLevel : 2;
+}
+
+function collectKickerCandidates(doc, getStyle, resolveLetterSpacing) {
   const candidates = [];
-  for (const heading of doc.querySelectorAll('h2, h3, h4')) {
-    if (heading.closest?.(REPEATED_KICKER_SKIP_SELECTOR)) continue;
+  for (const heading of doc.querySelectorAll('h1, h2, h3, h4, [role="heading"]')) {
+    const headingLevel = kickerHeadingLevel(heading);
+    if (!headingLevel || headingLevel > 4) continue;
+    if (heading.closest?.(KICKER_SKIP_SELECTOR)) continue;
+    // Application contexts (tab panels, dialogs) use compact context labels
+    // above headings to describe state, not to decorate. Same carve-out the
+    // hero-eyebrow rule makes.
+    if (heading.closest?.('[role="tabpanel"], [role="dialog"], [role="application"], dialog')) continue;
     const kicker = heading.previousElementSibling;
-    if (!kicker || kicker.closest?.(REPEATED_KICKER_SKIP_SELECTOR)) continue;
-    if (isRepeatedKickerCardContext(heading, kicker)) continue;
+    if (!kicker || kicker.closest?.(KICKER_SKIP_SELECTOR)) continue;
+    if (isKickerCardContext(heading, kicker)) continue;
 
     const headingStyle = getStyle(heading);
     const kickerStyle = getStyle(kicker);
+    const headingTag = heading.tagName.toLowerCase();
     const headingText = (heading.textContent || '').replace(/\s+/g, ' ').trim();
     const kickerText = cleanInlineText(kicker) || (kicker.textContent || '').replace(/\s+/g, ' ').trim();
     const headingFontSize = resolveLetterSpacing(headingStyle.fontSize || '', 16) || parseFloat(headingStyle.fontSize) || 0;
     const kickerFontSize = resolveLetterSpacing(kickerStyle.fontSize || '', 16) || parseFloat(kickerStyle.fontSize) || 0;
     const kickerLetterSpacing = resolveLetterSpacing(kickerStyle.letterSpacing || '', kickerFontSize);
 
-    if (!isRepeatedKickerCandidate({
-      headingTag: heading.tagName.toLowerCase(),
+    if (!isKickerCandidate({
+      headingLevel,
       headingText,
       headingFontSize,
       kickerTag: kicker.tagName.toLowerCase(),
       kickerText,
       kickerTextTransform: kickerStyle.textTransform || '',
+      kickerFontVariant: `${kickerStyle.fontVariant || ''} ${kickerStyle.fontVariantCaps || ''}`,
       kickerFontSize,
       kickerLetterSpacing,
     })) {
       continue;
     }
 
+    // A tracked-caps eyebrow above a hero-scale h1 belongs to
+    // hero-eyebrow-chip (which also covers the accent-bold and dash-prefix
+    // stylings there). Stand down so one element gets one finding.
+    if (headingTag === 'h1' && headingFontSize >= 48 && kickerLetterSpacing >= 1.6) {
+      continue;
+    }
+
     candidates.push({
-      headingTag: heading.tagName.toLowerCase(),
+      headingTag,
       headingText: headingText.replace(/^"|"$/g, '').slice(0, 60),
       kickerText: kickerText.slice(0, 40),
     });
@@ -1709,13 +3388,177 @@ function collectRepeatedSectionKickerCandidates(doc, getStyle, resolveLetterSpac
   return candidates;
 }
 
-function checkRepeatedSectionKickersDOM() {
-  const candidates = collectRepeatedSectionKickerCandidates(
+function checkKickerAboveHeadingDOM() {
+  const candidates = collectKickerCandidates(
     document,
     (el) => getComputedStyle(el),
     (value, fontSize) => resolveLengthPx(value, fontSize) || 0,
   );
-  return checkRepeatedSectionKickers({ candidates });
+  return checkKickerAboveHeading({ candidates });
+}
+
+// ── Numbered section labels ─────────────────────────────────────────────────
+// Sibling of the kicker-above-heading rule: instead of a tracked uppercase word,
+// the section scaffold is a tiny numeric index riding beside each section
+// heading — bare and zero-padded, or an index joined to a short micro-label
+// by a separator glyph. The kicker rule deliberately excludes bare 1-2 digit
+// labels; this rule owns that shape.
+
+const NUMBERED_LABEL_TAGS = new Set(['span', 'p', 'div', 'small', 'em', 'strong', 'b']);
+
+// Returns { index, text } when the trimmed text reads as a section index
+// label, else null. Two accepted shapes: a zero-padded/two-digit bare index,
+// or a 1-2 digit index followed by a non-word separator and a short label.
+function parseNumberedLabelText(rawText) {
+  const text = (rawText || '').replace(/\s+/g, ' ').trim();
+  if (!text || text.length > 40) return null;
+  let m = /^(\d{2})$/.exec(text);
+  if (!m) m = /^(\d{1,2})\s*[^\w\s]\s*\S/.exec(text);
+  if (!m) return null;
+  const index = parseInt(m[1], 10);
+  if (!Number.isFinite(index) || index > 40) return null;
+  return { index, text };
+}
+
+function isNumberedSectionLabelCandidate(opts) {
+  const {
+    headingTag, headingText, headingFontSize,
+    labelTag, labelIndex, labelText,
+    labelFontSize, labelLetterSpacing, labelFontWeight,
+    labelFontFamily, labelTextTransform, labelColor,
+  } = opts;
+  if (!['h2', 'h3', 'h4'].includes(headingTag)) return false;
+  if (!headingText || headingText.length < 3) return false;
+  if (!labelTag || !NUMBERED_LABEL_TAGS.has(labelTag)) return false;
+  if (labelIndex == null || !labelText) return false;
+  // Tiny rendered size is the tell — a display-scale section number is a
+  // different (deliberate) device and stays legal.
+  if (!(labelFontSize > 0 && labelFontSize <= 13)) return false;
+  // The heading must be visibly larger where we can resolve its size.
+  // clamp()/var() sizes come back unparseable (0) in the static engine —
+  // the remaining gates carry the check there.
+  if (headingFontSize > 0 && headingFontSize < labelFontSize * 1.3) return false;
+  // Deliberate micro-label styling separates the scaffold from incidental
+  // small text: mono face, bold weight, tracking, uppercase, or accent color.
+  const weight = Number(labelFontWeight) || 400;
+  return /mono/i.test(labelFontFamily || '')
+    || weight >= 600
+    || (labelLetterSpacing || 0) >= 0.5
+    || (labelTextTransform || '') === 'uppercase'
+    || isAccentColor(labelColor || '');
+}
+
+function collectNumberedSectionLabelCandidates(doc, getStyle, resolveLetterSpacing) {
+  const candidates = [];
+  const seenLabels = new Set();
+  for (const heading of doc.querySelectorAll('h2, h3, h4')) {
+    if (heading.closest?.(KICKER_SKIP_SELECTOR)) continue;
+    // The index sits either directly before the heading, or before the
+    // wrapper the heading leads (label | <div><h2>…</h2>…</div>).
+    let label = heading.previousElementSibling;
+    if (!label) {
+      const parent = heading.parentElement;
+      const firstChild = parent?.children?.[0];
+      if (firstChild === heading) label = parent.previousElementSibling;
+    }
+    if (!label || seenLabels.has(label)) continue;
+    if (label.closest?.(KICKER_SKIP_SELECTOR)) continue;
+    if (HEADING_TAGS.has(label.tagName.toLowerCase())) continue;
+    if (isKickerCardContext(heading, label)) continue;
+
+    const labelText = cleanInlineText(label) || (label.textContent || '').replace(/\s+/g, ' ').trim();
+    const parsed = parseNumberedLabelText(labelText);
+    if (!parsed) continue;
+
+    const headingStyle = getStyle(heading);
+    const labelStyle = getStyle(label);
+    const headingText = (heading.textContent || '').replace(/\s+/g, ' ').trim();
+    const headingFontSize = resolveLetterSpacing(headingStyle.fontSize || '', 16) || parseFloat(headingStyle.fontSize) || 0;
+    const labelFontSize = resolveLetterSpacing(labelStyle.fontSize || '', 16) || parseFloat(labelStyle.fontSize) || 0;
+
+    if (!isNumberedSectionLabelCandidate({
+      headingTag: heading.tagName.toLowerCase(),
+      headingText,
+      headingFontSize,
+      labelTag: label.tagName.toLowerCase(),
+      labelIndex: parsed.index,
+      labelText: parsed.text,
+      labelFontSize,
+      labelLetterSpacing: resolveLetterSpacing(labelStyle.letterSpacing || '', labelFontSize),
+      labelFontWeight: labelStyle.fontWeight || '',
+      labelFontFamily: labelStyle.fontFamily || '',
+      labelTextTransform: labelStyle.textTransform || '',
+      labelColor: labelStyle.color || '',
+    })) {
+      continue;
+    }
+
+    seenLabels.add(label);
+    candidates.push({
+      index: parsed.index,
+      labelText: parsed.text.slice(0, 24),
+      headingTag: heading.tagName.toLowerCase(),
+      headingText: headingText.replace(/^"|"$/g, '').slice(0, 60),
+    });
+  }
+  return candidates;
+}
+
+function checkNumberedSectionLabels(opts) {
+  const { candidates, minCount = 2 } = opts;
+  if (!Array.isArray(candidates) || candidates.length < minCount) return [];
+  // A repeated identical number is some other device; the scaffold counts up.
+  const distinctIndices = new Set(candidates.map(c => c.index));
+  if (distinctIndices.size < 2) return [];
+  return candidates.map(candidate => ({
+    id: 'numbered-section-labels',
+    snippet: `tiny numbered label "${candidate.labelText}" beside ${candidate.headingTag} "${candidate.headingText}" (${candidates.length} on page)`,
+  }));
+}
+
+function checkNumberedSectionLabelsFromDoc(doc, win) {
+  const candidates = collectNumberedSectionLabelCandidates(
+    doc,
+    (el) => win.getComputedStyle(el),
+    (value, fontSize) => resolveLengthPx(value, fontSize) || 0,
+  );
+  return checkNumberedSectionLabels({ candidates });
+}
+
+function checkNumberedSectionLabelsDOM() {
+  const candidates = collectNumberedSectionLabelCandidates(
+    document,
+    (el) => getComputedStyle(el),
+    (value, fontSize) => resolveLengthPx(value, fontSize) || 0,
+  );
+  return checkNumberedSectionLabels({ candidates });
+}
+
+// Em-dash overuse (ADVISORY) — pure logic shared by the browser DOM check.
+// Mirrors the regex/static-HTML analyzer in engines/regex/detect-text.mjs:
+// two gates (absolute floor + density) so a long article using a few dashes is
+// left alone while a short, dash-per-clause page is flagged. Operates on
+// already-rendered text, so no HTML-entity decoding is needed (the browser has
+// resolved `&mdash;` to the literal glyph). Exported for jsdom unit tests.
+function checkEmDashOveruse(text) {
+  const body = typeof text === 'string' ? text.replace(/\s+/g, ' ') : '';
+  let count = 0;
+  const re = /[—]|--(?=\S)/g;
+  while (re.exec(body) !== null) count++;
+  if (count < EM_DASH_FLOOR) return [];
+  if (body.length > count * EM_DASH_CHARS_PER_DASH) return [];
+  return [{ id: 'em-dash-overuse', snippet: `${count} em-dashes in body text` }];
+}
+
+function checkEmDashOveruseDOM() {
+  const body = document.body;
+  if (!body) return [];
+  // innerText reflects rendered, visible text; fall back to textContent for
+  // engines (jsdom) that don't compute innerText.
+  const text = typeof body.innerText === 'string' && body.innerText
+    ? body.innerText
+    : (body.textContent || '');
+  return checkEmDashOveruse(text);
 }
 
 function checkElementMotionDOM(el) {
@@ -1734,7 +3577,14 @@ function checkElementMotionDOM(el) {
 function checkElementGlowDOM(el) {
   const tag = el.tagName.toLowerCase();
   const style = getComputedStyle(el);
-  if (!style.boxShadow || style.boxShadow === 'none') return [];
+  const boxShadow = style.boxShadow && style.boxShadow !== 'none' ? style.boxShadow : '';
+  // text-shadow inherits: only check the element that introduces it, so one
+  // declaration doesn't produce a finding on every descendant.
+  let textShadow = style.textShadow && style.textShadow !== 'none' ? style.textShadow : '';
+  if (textShadow && el.parentElement && getComputedStyle(el.parentElement).textShadow === textShadow) {
+    textShadow = '';
+  }
+  if (!boxShadow && !textShadow) return [];
   // Use parent's background — glow radiates outward, so the surrounding context matters
   // If resolveBackground returns null (gradient), try to infer from the gradient colors
   let parentBg = el.parentElement ? resolveBackground(el.parentElement) : resolveBackground(el);
@@ -1757,7 +3607,7 @@ function checkElementGlowDOM(el) {
       cur = cur.parentElement;
     }
   }
-  return checkGlow({ tag, boxShadow: style.boxShadow, effectiveBg: parentBg });
+  return checkGlow({ tag, boxShadow, textShadow, effectiveBg: parentBg });
 }
 
 function checkElementAIPaletteDOM(el) {
@@ -1814,7 +3664,132 @@ function checkElementAIPaletteDOM(el) {
     }
   }
 
-  return findings;
+  return findings;
+}
+
+// ─── Decorative radial spotlight glow ───────────────────────────────────────
+// A soft, low-opacity chromatic radial-gradient fading to transparent, painted
+// as a decorative wash behind a hero or section. The translucent sibling of the
+// `radial-halo` tell: `radial-halo` requires a saturated, near-opaque center on
+// a dark page; this catches the low-alpha "spotlight" the halo gate lets slip
+// (e.g. `radial-gradient(circle at 52% 38%, rgba(80,111,255,0.26),
+// transparent 44%)`). The two alpha bands are disjoint, so they never
+// double-report the same declaration.
+const SPOTLIGHT_COLOR_TOKEN_RE = /(?:rgba?|hsla?|oklch|oklab|lab|lch|hwb|color-mix)\([^)]*(?:\([^)]*\))?[^)]*\)|#[0-9a-f]{3,8}\b|\btransparent\b/i;
+
+// Parse the FIRST non-repeating radial-gradient in a background value into its
+// ordered color stops. Each stop is { color: {r,g,b,a} | null, transparent }.
+// Returns null when there is no plain radial-gradient to read.
+function parseRadialGradientStops(value) {
+  if (!value || !/radial-gradient/i.test(value)) return null;
+  const gradRe = /(repeating-)?radial-gradient\(/gi;
+  let g;
+  while ((g = gradRe.exec(value)) !== null) {
+    if (g[1]) continue; // repeating-* is a pattern, not a spotlight
+    let depth = 0, end = -1;
+    const open = value.indexOf('(', g.index);
+    for (let i = open; i < value.length; i++) {
+      if (value[i] === '(') depth++;
+      else if (value[i] === ')') { depth--; if (depth === 0) { end = i; break; } }
+    }
+    if (end < 0) return null;
+    const args = splitTopLevelCommas(value.slice(open + 1, end));
+    // The optional prelude (shape / size / `at <pos>`) carries no color token.
+    const stopArgs = args.filter(a => SPOTLIGHT_COLOR_TOKEN_RE.test(a));
+    if (stopArgs.length < 2) return null;
+    return stopArgs.map(a => {
+      const tok = a.match(SPOTLIGHT_COLOR_TOKEN_RE);
+      if (!tok) return { color: null, transparent: false };
+      if (/^transparent$/i.test(tok[0])) return { color: null, transparent: true };
+      const color = parseAnyColor(tok[0]);
+      return { color, transparent: !!color && (color.a ?? 1) <= 0.05 };
+    });
+  }
+  return null;
+}
+
+// Pure gate. `label` is a stable identifier the fixture test keys on.
+function checkRadialSpotlight({ gradientValue, width, height, label }) {
+  const stops = parseRadialGradientStops(gradientValue);
+  if (!stops || stops.length < 2) return [];
+
+  // Must fade OUT: the last stop is transparent / near-zero alpha. A gradient
+  // between two visible surfaces is a real background, not a floating glow.
+  const last = stops[stops.length - 1];
+  const lastAlpha = last.transparent ? 0 : (last.color ? (last.color.a ?? 1) : 1);
+  if (lastAlpha > 0.05) return [];
+
+  // The visible (non-transparent, parseable) color stops.
+  const colored = stops.filter(s => !s.transparent && s.color && (s.color.a ?? 1) > 0.05);
+  if (colored.length === 0) return [];
+  // One soft glow, not a multi-color composition: at most two visible stops.
+  if (colored.length > 2) return [];
+  // Every visible stop must be LOW opacity. Any opaque stop means a real fill
+  // or a saturated halo (`radial-halo`'s job), not this translucent spotlight.
+  if (colored.some(s => (s.color.a ?? 1) >= 0.45)) return [];
+  // At least one visible stop must be chromatic. A neutral (grayscale)
+  // near-black / near-white vignette is a legitimate lighting move, exempt.
+  const chromatic = colored.find(s => hasChroma(s.color, 24));
+  if (!chromatic) return [];
+
+  // Decorative-scale gate. Badges, avatars, and actual small "lights" are
+  // exempt; a spotlight glow only reads as slop when it washes a large surface.
+  if (!(width >= 240 && height >= 160)) return [];
+
+  const alpha = (chromatic.color.a ?? 1).toFixed(2);
+  const name = label || 'section';
+  return [{
+    id: 'radial-spotlight-glow',
+    snippet: `radial-gradient spotlight glow "${name}" (${colorToHex(chromatic.color)} a${alpha} → transparent) on ${Math.round(width)}x${Math.round(height)} surface`,
+  }];
+}
+
+// Read the raw radial-gradient source off an element's computed style, with a
+// fallback to the `background` shorthand and the inline style attribute for
+// engines that don't decompose the shorthand into backgroundImage.
+function elementGradientValue(style, el) {
+  const bgImage = style.backgroundImage && style.backgroundImage !== 'none' ? style.backgroundImage : '';
+  if (/radial-gradient/i.test(bgImage)) return bgImage;
+  const bg = style.background || '';
+  if (/radial-gradient/i.test(bg)) return bg;
+  const rawStyle = el?.getAttribute?.('style') || '';
+  const m = rawStyle.match(/background(?:-image)?\s*:\s*([^;]+)/i);
+  if (m && /radial-gradient/i.test(m[1])) return m[1];
+  return '';
+}
+
+function spotlightLabel(el) {
+  const dataName = el.getAttribute?.('data-name');
+  if (dataName) return dataName;
+  if (typeof el.id === 'string' && el.id) return el.id;
+  const cls = typeof el.className === 'string' ? el.className.trim().split(/\s+/)[0] : '';
+  if (cls) return cls;
+  return el.tagName ? el.tagName.toLowerCase() : 'section';
+}
+
+function checkElementRadialSpotlightDOM(el) {
+  const style = getComputedStyle(el);
+  const gradientValue = elementGradientValue(style, el);
+  if (!gradientValue) return [];
+  const rect = el.getBoundingClientRect();
+  return checkRadialSpotlight({
+    gradientValue,
+    width: rect.width,
+    height: rect.height,
+    label: spotlightLabel(el),
+  });
+}
+
+function checkElementRadialSpotlight(el, style, tag, window) {
+  const gradientValue = elementGradientValue(style, el);
+  if (!gradientValue) return [];
+  // Static engine does no layout — read explicit pixel dimensions from CSS.
+  return checkRadialSpotlight({
+    gradientValue,
+    width: parseFloat(style.width) || 0,
+    height: parseFloat(style.height) || 0,
+    label: spotlightLabel(el),
+  });
 }
 
 const QUALITY_TEXT_TAGS = new Set(['p', 'li', 'td', 'th', 'dd', 'blockquote', 'figcaption']);
@@ -1938,6 +3913,55 @@ function textDescendantsFlushSides(el, rect) {
   return flush;
 }
 
+// Screen-reader-only ("visually hidden") text is exempt from the tiny-text
+// floors: it is never rendered, so its size is irrelevant. Detect the two
+// standard idioms — a known sr-only class on the element or an ancestor, and
+// the clip / 1px-box pattern. Works in both jsdom (declared styles) and the
+// browser (computed styles).
+const SR_ONLY_SELECTOR = '.sr-only, .visually-hidden, .visuallyhidden, .screen-reader, .screen-reader-only, .screenreader, .a11y-hidden, .hidden-visually, [class*="sr-only" i], [class*="visually-hidden" i], [class*="visuallyhidden" i], [class*="screen-reader" i], [class*="screenreader" i]';
+function isVisuallyHidden(el, style) {
+  if ((el.matches && el.matches(SR_ONLY_SELECTOR)) || (el.closest && el.closest(SR_ONLY_SELECTOR))) return true;
+  const pos = style.position || '';
+  if (pos === 'absolute' || pos === 'fixed') {
+    const clip = style.clip || '';
+    const clipPath = style.clipPath || style.webkitClipPath || style['clip-path'] || '';
+    if (/rect\(\s*0/.test(clip) || /inset\(\s*(?:50%|99|100%)/.test(clipPath)) return true;
+    const w = parseFloat(style.width);
+    const h = parseFloat(style.height);
+    const overflow = style.overflow || '';
+    if ((w === 1 || h === 1) && (overflow === 'hidden' || overflow === 'clip')) return true;
+  }
+  return false;
+}
+
+// Elements whose text is never painted: document metadata and script/style
+// payloads. Their JS / CSS / JSON-LD text satisfies `hasDirectText`, and on
+// sites that set `html { font-size: 62.5% }` their inherited computed size is
+// 10px — so the text-size floors flag them as tiny body copy even though
+// nothing renders (issue #408: dozens of phantom "10px body text" findings on
+// every Shopify page). Exclude them, plus anything the cascade resolves to
+// display:none / visibility:hidden. The jsdom path can't lay out, so the
+// tag/attribute-based exclusions carry the weight there; the display checks are
+// computed-style reads that resolve without layout in both adapters.
+const NON_RENDERED_TAGS = new Set([
+  'script', 'style', 'title', 'noscript', 'template', 'head',
+  'meta', 'link', 'base', 'param', 'source', 'track', 'datalist',
+  'col', 'colgroup', 'map', 'area',
+]);
+function isNonRenderedText(el, tag, style) {
+  const t = (tag || '').toLowerCase();
+  if (NON_RENDERED_TAGS.has(t)) return true;
+  // Descendants of <head> never render even when the tag itself would
+  // (some sites nest <noscript>/<template> content there).
+  if (el && el.closest && el.closest('head')) return true;
+  if (style) {
+    if (style.display === 'none') return true;
+    const vis = style.visibility;
+    if (vis === 'hidden' || vis === 'collapse') return true;
+  }
+  return false;
+}
+
 // Pure quality checks. Most run on computed CSS and DOM-only inputs (work in
 // jsdom and the browser). Two checks (line-length, cramped-padding) gate on
 // element rect dimensions, which jsdom can't compute — pass `rect: null` from
@@ -1948,8 +3972,13 @@ function textDescendantsFlushSides(el, rect) {
 function checkQuality(opts) {
   const { el, tag, style, hasDirectText, textLen, fontSize, lineHeightPx, letterSpacingPx, rect, lineMax = 80, viewportWidth = 0, win = null } = opts;
   const findings = [];
-  // Skip browser extension injected elements
-  const elId = el.id || '';
+  // Skip browser extension injected elements. Read the id via getAttribute
+  // whenever `el.id` is not a string: on a <form> (and other
+  // [LegacyOverrideBuiltIns] hosts) a named control like <input name="id">
+  // shadows the builtin `id` getter and returns the control element, whose
+  // `.startsWith` is undefined and throws (issue #407 — every Shopify product
+  // form ships an <input name="id">).
+  const elId = typeof el.id === 'string' ? el.id : (el.getAttribute?.('id') || '');
   if (elId.startsWith('claude-') || elId.startsWith('cic-')) return findings;
 
   // --- Line length too long --- (browser-only: needs rect.width)
@@ -2217,11 +4246,67 @@ function checkQuality(opts) {
     const skipTags = ['sub', 'sup', 'code', 'kbd', 'samp', 'var', 'caption', 'figcaption'];
     const inUIContext = el.closest && el.closest('button, a, label, summary, pre, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="option"], nav, footer, [aria-hidden="true"], [class*="badge" i], [class*="caption" i], [class*="chip" i], [class*="code" i], [class*="console" i], [class*="diff" i], [class*="label" i], [class*="meta" i], [class*="mock" i], [class*="pill" i], [class*="preview" i], [class*="tag" i], [class*="terminal" i], [class*="writes" i]');
     const isUppercase = style.textTransform === 'uppercase';
-    if (!skipTags.includes(tag) && !inUIContext && !isUppercase) {
+    if (!skipTags.includes(tag) && !inUIContext && !isUppercase && !isNonRenderedText(el, tag, style)) {
       findings.push({ id: 'tiny-text', snippet: `${fontSize}px body text` });
     }
   }
 
+  // --- Undersized functional / UI text ---
+  // Complements `tiny-text` above, which owns long body copy and deliberately
+  // EXEMPTS the UI furniture layer (nav, footer, links, buttons, labels,
+  // uppercase micro-labels). This rule targets exactly that blind spot: the
+  // interactive and short content-bearing text — nav items, buttons, labels,
+  // table cells, meta rows, timecodes — shipped below an 11px floor.
+  //
+  // The live failure it closes: a build shipped its entire furniture layer at
+  // 8px, and the design hook waved it through because 8px had been added to
+  // the DESIGN.md size ramp. Being on the ramp is a token argument, not a
+  // legibility one, so this rule ignores the design system entirely — a value
+  // on the ramp is still flagged.
+  //
+  // Floors: 11px for anything functional. The floor holds inside a footer;
+  // only NON-interactive legal smallprint gets the softer 10px floor. Exempts
+  // sup/sub, visually-hidden (sr-only) text, and code/terminal contexts.
+  // Uppercase letterspaced micro-labels are still functional — not exempt.
+  {
+    const directText = [...el.childNodes]
+      .filter(n => n.nodeType === 3)
+      .map(n => n.textContent || '')
+      .join('')
+      .replace(/\s+/g, ' ')
+      .trim();
+    const dtLen = directText.length;
+    // `option` renders (in native select popups) so it stays a local skip;
+    // script/style/title/noscript/head-descendants and display:none /
+    // visibility:hidden are handled by isNonRenderedText (shared with tiny-text).
+    const UI_SKIP_TAGS = new Set(['sub', 'sup', 'option']);
+    // jsdom resolves the parent chain in resolveFontSizePx, so em/rem/%-sized
+    // text that computes at or above the floor never reaches here. The browser
+    // adapter additionally catches values only resolvable with real layout
+    // (e.g. viewport-relative units, cascade winners set in linked sheets).
+    if (fontSize > 0 && fontSize < 11 && dtLen >= 2 && !UI_SKIP_TAGS.has(tag) && !isNonRenderedText(el, tag, style)) {
+      const EXEMPT_CONTEXT = 'pre, code, kbd, samp, var, svg, [aria-hidden="true"], [class*="terminal" i], [class*="console" i], [class*="code" i], [class*="mock" i], [class*="editor" i], [class*="syntax" i], [class*="diff" i]';
+      const isExemptContext = (el.matches && el.matches(EXEMPT_CONTEXT)) || (el.closest && el.closest(EXEMPT_CONTEXT));
+      if (!isExemptContext && !isVisuallyHidden(el, style)) {
+        const INTERACTIVE = 'a[href], button, summary, label, select, textarea, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="checkbox"], [role="radio"], [role="switch"], [role="treeitem"], [tabindex]';
+        const FURNITURE = 'nav, [role="navigation"], td, th, [role="gridcell"], [role="cell"], caption, figcaption, dt, dd, footer, [class*="meta" i], [class*="label" i], [class*="badge" i], [class*="chip" i], [class*="pill" i], [class*="tag" i], [class*="kicker" i], [class*="eyebrow" i], [class*="breadcrumb" i], [class*="timestamp" i], [class*="category" i], [class*="caption" i], [class*="nav" i]';
+        const SMALLPRINT = 'small, footer, [class*="legal" i], [class*="copyright" i], [class*="fineprint" i], [class*="fine-print" i], [class*="smallprint" i], [class*="small-print" i], [class*="disclaimer" i], [class*="disclosure" i], [class*="footnote" i]';
+        const isInteractive = (el.matches && el.matches(INTERACTIVE)) || (el.closest && el.closest(INTERACTIVE));
+        const isFurniture = (el.matches && el.matches(FURNITURE)) || (el.closest && el.closest(FURNITURE));
+        const isSmallprint = (el.matches && el.matches(SMALLPRINT)) || (el.closest && el.closest(SMALLPRINT));
+        const floor = (!isInteractive && isSmallprint) ? 10 : 11;
+        // Fire on functional text only: interactive, structural furniture, or
+        // any short (<=20-char) run — the label / meta / timecode shape. Long
+        // non-furniture body copy stays with `tiny-text`, so the two rules
+        // never double-flag the same element.
+        if (fontSize < floor && (isInteractive || isFurniture || dtLen <= 20)) {
+          const excerpt = directText.slice(0, 40);
+          findings.push({ id: 'undersized-ui-text', snippet: `${fontSize}px functional text "${excerpt}" (below ${floor}px floor)` });
+        }
+      }
+    }
+  }
+
   // --- All-caps body text ---
   if (hasDirectText && textLen > 30 && style.textTransform === 'uppercase') {
     if (!['h1','h2','h3','h4','h5','h6'].includes(tag)) {
@@ -2314,7 +4399,7 @@ function checkElementQuality(el, style, tag, window) {
   return checkQuality({ el, tag, style, hasDirectText, textLen, fontSize, lineHeightPx, letterSpacingPx, rect: null, win: window });
 }
 
-function checkElementBorders(tag, style, overrides, resolvedRadius) {
+function checkElementBorders(tag, style, overrides, resolvedRadius, el = null) {
   const sides = ['Top', 'Right', 'Bottom', 'Left'];
   const widths = {}, colors = {};
   for (const s of sides) {
@@ -2341,7 +4426,12 @@ function checkElementBorders(tag, style, overrides, resolvedRadius) {
   const radius = resolvedRadius != null
     ? resolvedRadius
     : (parseFloat(style.borderRadius) || 0);
-  return checkBorders(tag, widths, colors, radius);
+  const ownBg = parseAnyColor(style.backgroundColor);
+  return checkBorders(tag, widths, colors, radius, {
+    tabContext: isTabContextElement(el),
+    statusContext: isStatusContextElement(el),
+    badgeLike: !!(ownBg && (ownBg.a ?? 1) > 0.1),
+  });
 }
 
 function checkElementColors(el, style, tag, window, customPropMap, hasAnchorInheritRule) {
@@ -2382,12 +4472,32 @@ function checkElementColors(el, style, tag, window, customPropMap, hasAnchorInhe
     }
   }
 
+  // Own background: resolve var()/oklch() tokens through the custom-property
+  // map first (mirrors the textColor path above). Without this a chip whose
+  // background is `var(--sev)` reads as no-own-bg in the static engine and
+  // the styled-control contrast exception never engages.
+  let ownBg = (customPropMap ? parseColorResolved(style.backgroundColor, customPropMap) : null)
+    || readOwnBackgroundColor(el, style);
+
+  // Full-cover surface pseudo (static): the cascade pass marks elements
+  // whose ::before/::after paints an opaque covering surface. When the
+  // element itself has no usable own background, that pseudo is the real
+  // surface for contrast purposes.
+  let finalEffectiveBg = effectiveBg;
+  if ((!ownBg || (ownBg.a ?? 1) <= 0.5) && typeof window.getPseudoSurface === 'function') {
+    const pseudoSurface = window.getPseudoSurface(el);
+    if (pseudoSurface) {
+      ownBg = pseudoSurface;
+      finalEffectiveBg = pseudoSurface;
+    }
+  }
+
   return checkColors({
     tag,
     textColor,
-    bgColor: readOwnBackgroundColor(el, style),
-    effectiveBg,
-    effectiveBgStops: effectiveBg ? null : resolveGradientStops(el, window),
+    bgColor: ownBg,
+    effectiveBg: finalEffectiveBg,
+    effectiveBgStops: finalEffectiveBg ? null : resolveGradientStops(el, window, customPropMap),
     fontSize: parseFloat(style.fontSize) || 16,
     fontWeight: parseInt(style.fontWeight) || 400,
     hasDirectText,
@@ -2398,6 +4508,50 @@ function checkElementColors(el, style, tag, window, customPropMap, hasAnchorInhe
   });
 }
 
+// Static-engine adapter for hover-state contrast. Relies on the static
+// cascade's hover pass (css-cascade.mjs) exposing a per-element hover style
+// via window.getHoverStyle — present only when a :hover rule changed the
+// element's color or background-color relative to its resting state.
+function checkElementHoverContrast(el, style, tag, window) {
+  if (typeof window.getHoverStyle !== 'function') return [];
+  const hover = window.getHoverStyle(el);
+  if (!hover) return [];
+
+  const directText = [...el.childNodes].filter(n => n.nodeType === 3).map(n => n.textContent).join('');
+  if (directText.trim().length === 0) return [];
+
+  const textColor = parseAnyColor(hover.color);
+  if (!textColor || (textColor.a != null && textColor.a < 1)) return [];
+
+  const restingOwnBg = parseAnyColor(style.backgroundColor);
+  const hoverOwnBg = parseAnyColor(hover.backgroundColor);
+  const ownBg = hoverOwnBg || restingOwnBg;
+
+  // Effective hover background: the element's own hover bg composited over
+  // whatever sits underneath. Bail when the surface can't be resolved to a
+  // solid color — gradient ancestors are handled (as at rest) by the
+  // resting-state check, not duplicated here.
+  let bg = null;
+  if (ownBg && ownBg.a >= 0.99) {
+    bg = ownBg;
+  } else {
+    const under = resolveBackground(el.parentElement || el, window, null);
+    if (!under) return [];
+    bg = ownBg && ownBg.a > 0.1 ? compositeColorOver(ownBg, under) : under;
+  }
+
+  return checkHoverContrast({
+    tag,
+    textColor,
+    bg,
+    ownBgAlpha: ownBg ? ownBg.a ?? 1 : null,
+    fontSize: parseFloat(style.fontSize) || 16,
+    fontWeight: parseInt(style.fontWeight) || 400,
+    hasDirectText: true,
+    isEmojiOnly: isEmojiOnlyText(directText),
+  });
+}
+
 function checkElementIconTile(el, tag, window) {
   if (!HEADING_TAGS.has(tag)) return [];
   const sibling = el.previousElementSibling;
@@ -2466,7 +4620,8 @@ function checkElementHeroEyebrow(el, style, tag, window, customPropMap) {
   return checkHeroEyebrow({
     headingTag: tag,
     headingText: el.textContent || '',
-    headingFontSize: parseFloat(headingFontSizeRaw) || 0,
+    headingFontSize: resolveHeroHeadingSizePx(headingFontSizeRaw),
+    headingInApplicationContext: !!el.closest?.('[role="tabpanel"], [role="dialog"], [role="application"], dialog'),
     siblingTag: sibling.tagName.toLowerCase(),
     siblingText: sibling.textContent || '',
     siblingTextTransform: sibStyle.textTransform || '',
@@ -2474,16 +4629,21 @@ function checkElementHeroEyebrow(el, style, tag, window, customPropMap) {
     siblingLetterSpacing: resolveLengthPx(letterSpacingRaw, siblingFontSize) || 0,
     siblingFontWeight: fontWeightRaw || '',
     siblingColor: colorRaw || '',
+    // Static cascade marks elements matched by a ::before/::after rule
+    // whose geometry is a short chromatic dash (css-cascade.mjs).
+    siblingHasAccentDashPseudo: typeof window.hasAccentDashPseudo === 'function'
+      ? window.hasAccentDashPseudo(sibling)
+      : false,
   });
 }
 
-function checkRepeatedSectionKickersFromDoc(doc, win) {
-  const candidates = collectRepeatedSectionKickerCandidates(
+function checkKickerAboveHeadingFromDoc(doc, win) {
+  const candidates = collectKickerCandidates(
     doc,
     (el) => win.getComputedStyle(el),
     (value, fontSize) => resolveLengthPx(value, fontSize) || 0,
   );
-  return checkRepeatedSectionKickers({ candidates });
+  return checkKickerAboveHeading({ candidates });
 }
 
 function checkElementMotion(tag, style) {
@@ -2497,8 +4657,10 @@ function checkElementMotion(tag, style) {
 }
 
 function checkElementGlow(tag, style, effectiveBg) {
-  if (!style.boxShadow || style.boxShadow === 'none') return [];
-  return checkGlow({ tag, boxShadow: style.boxShadow, effectiveBg });
+  const boxShadow = style.boxShadow && style.boxShadow !== 'none' ? style.boxShadow : '';
+  const textShadow = style.textShadow && style.textShadow !== 'none' ? style.textShadow : '';
+  if (!boxShadow && !textShadow) return [];
+  return checkGlow({ tag, boxShadow, textShadow, effectiveBg });
 }
 
 // ─── Section 6: Page-Level Checks ───────────────────────────────────────────
@@ -2540,12 +4702,6 @@ function checkTypography() {
       if (isBrandFontOnOwnDomain(font)) continue;
       findings.push({ type: 'overused-font', detail: `Primary font: ${font} (${Math.round(share * 100)}% of text)` });
     }
-
-    // Single-font check: only one distinct primary font across all text
-    if (fontUsage.size === 1) {
-      const only = [...fontUsage.keys()][0];
-      findings.push({ type: 'single-font', detail: `only font used is ${only}` });
-    }
   }
 
   const sizes = new Set();
@@ -2608,6 +4764,157 @@ function checkLayout() {
   return findings;
 }
 
+// Heading rhythm (browser-only): a heading binds to the content it
+// introduces, so its rendered space above must exceed its space below.
+// Margins alone can't be trusted (collapsing, flex rows, section padding),
+// so this measures actual getBoundingClientRect gaps between the heading
+// and the nearest content genuinely above / below it. Fires only when two
+// or more headings violate the principle — a single occurrence is noise.
+function checkHeadingRhythmDOM() {
+  const MIN_VIOLATIONS = 2;
+  const CARD_EXEMPT_HEIGHT = 200;
+  const MAX_BELOW_PX = 160; // beyond this the heading isn't binding to nearby content at all
+  const MIN_DEFICIT_PX = 12;
+
+  function isVisibleFlow(el) {
+    const style = getComputedStyle(el);
+    if (style.display === 'none' || style.visibility === 'hidden') return false;
+    if (parseFloat(style.opacity || '1') <= 0.05) return false;
+    if (style.position === 'absolute' || style.position === 'fixed' || style.position === 'sticky') return false;
+    const rect = el.getBoundingClientRect();
+    return rect.width >= 1 && rect.height >= 1;
+  }
+
+  // Edges only count when they share the heading's column — grid layouts
+  // put content beside a heading, and a far-away element in another column
+  // says nothing about the heading's vertical rhythm.
+  function overlapsX(sr, rect) {
+    return Math.min(sr.right, rect.right) - Math.max(sr.left, rect.left) >= 8;
+  }
+
+  // Does this container draw its own top boundary (background, top border,
+  // shadow)? Crossing out of such a container means the container edge is
+  // the separator above the heading, not raw whitespace — exempt.
+  function hasOwnTopBoundary(el) {
+    const style = getComputedStyle(el);
+    const bg = parseAnyColor(style.backgroundColor || '');
+    if (bg && (bg.a ?? 1) > 0.05) return true;
+    if ((parseFloat(style.borderTopWidth) || 0) > 0) return true;
+    if (style.boxShadow && style.boxShadow !== 'none') return true;
+    return false;
+  }
+
+  // Eyebrows, kickers, and index labels sitting directly on top of a
+  // heading belong to the heading's own cluster — space above is measured
+  // from the top of the cluster, not from the label to the heading.
+  function clusterTop(h, rect) {
+    const headingFontSize = parseFloat(getComputedStyle(h).fontSize) || 16;
+    let topEl = h;
+    let top = rect.top;
+    for (let i = 0; i < 3; i++) {
+      const sib = topEl.previousElementSibling;
+      if (!sib || !isVisibleFlow(sib)) break;
+      const sr = sib.getBoundingClientRect();
+      if (!overlapsX(sr, rect)) break;
+      const gap = top - sr.bottom;
+      if (gap < 0 || gap >= 28 || sr.height > 60) break;
+      const text = (sib.textContent || '').trim();
+      const sibFontSize = parseFloat(getComputedStyle(sib).fontSize) || 16;
+      const labelLike = sibFontSize < headingFontSize * 0.75 || text.length <= 40;
+      if (!labelLike || text.length > 80) break;
+      topEl = sib;
+      top = sr.top;
+    }
+    return { topEl, top };
+  }
+
+  // Nearest content edge strictly above the heading cluster. Walks
+  // previous siblings, then out through ancestors. Skips elements that
+  // vertically overlap (flex-row companions, sticky rails) or sit in
+  // another column. Returns null when nothing qualifies — first content
+  // on the page, or the top of a visually bounded container.
+  function edgeAbove(startEl, top, rect) {
+    let node = startEl;
+    while (node && node !== document.body) {
+      let sib = node.previousElementSibling;
+      while (sib) {
+        if (isVisibleFlow(sib)) {
+          const sr = sib.getBoundingClientRect();
+          if (sr.bottom <= top + 2 && overlapsX(sr, rect)) return sr.bottom;
+        }
+        sib = sib.previousElementSibling;
+      }
+      const parent = node.parentElement;
+      if (!parent || parent === document.body) return null;
+      // Leaving a container upward: if it draws its own top edge, that
+      // edge separates the heading from whatever sits above.
+      if (hasOwnTopBoundary(parent)) return null;
+      node = parent;
+    }
+    return null;
+  }
+
+  // Nearest content edge strictly below the heading — the block the
+  // heading introduces. Crosses wrappers freely (headings often share a
+  // row wrapper with an eyebrow or index label).
+  function edgeBelow(h, rect) {
+    let node = h;
+    while (node && node !== document.body) {
+      let sib = node.nextElementSibling;
+      while (sib) {
+        if (isVisibleFlow(sib)) {
+          const sr = sib.getBoundingClientRect();
+          if (sr.top >= rect.bottom - 2 && overlapsX(sr, rect)) return sr.top;
+        }
+        sib = sib.nextElementSibling;
+      }
+      node = node.parentElement;
+    }
+    return null;
+  }
+
+  function insideSmallCard(h) {
+    let cur = h.parentElement;
+    while (cur && cur !== document.body) {
+      if (isCardLikeDOM(cur)) {
+        const cr = cur.getBoundingClientRect();
+        if (cr.height < CARD_EXEMPT_HEIGHT) return true;
+      }
+      cur = cur.parentElement;
+    }
+    return false;
+  }
+
+  const candidates = [];
+  for (const h of document.querySelectorAll('h2, h3, h4')) {
+    if (!isVisibleFlow(h)) continue;
+    const text = (h.textContent || '').trim().replace(/\s+/g, ' ');
+    if (text.length < 3) continue;
+    const rect = h.getBoundingClientRect();
+    const belowTop = edgeBelow(h, rect);
+    if (belowTop == null) continue; // heading introduces nothing measurable
+    const { topEl, top } = clusterTop(h, rect);
+    const aboveBottom = edgeAbove(topEl, top, rect);
+    if (aboveBottom == null) continue; // first content, or bounded container
+    if (insideSmallCard(h)) continue;
+    const above = Math.max(0, top - aboveBottom);
+    const below = Math.max(0, belowTop - rect.bottom);
+    if (below < 6 || below > MAX_BELOW_PX) continue;
+    // Violation: the space above clearly fails to exceed the space below.
+    // Near-equal gaps are ambiguous rather than inverted, so they pass.
+    if (above < below * 0.75 && below - above >= MIN_DEFICIT_PX) {
+      candidates.push({ el: h, tag: h.tagName.toLowerCase(), text: text.slice(0, 60), above, below });
+    }
+  }
+
+  if (candidates.length < MIN_VIOLATIONS) return [];
+  return candidates.map(c => ({
+    type: 'heading-rhythm',
+    detail: `${c.tag} "${c.text}" has ${Math.round(c.above)}px above vs ${Math.round(c.below)}px below — it reads as bound to the block above (${candidates.length} headings on page)`,
+    el: c.el,
+  }));
+}
+
 // Node page-level checks — take document/window as parameters
 
 function checkPageTypography(doc, win) {
@@ -2635,14 +4942,9 @@ function checkPageTypography(doc, win) {
 
   // Check Google Fonts links in HTML
   const html = doc.documentElement?.outerHTML || '';
-  const gfRe = /fonts\.googleapis\.com\/css2?\?family=([^&"'\s]+)/gi;
-  let m;
-  while ((m = gfRe.exec(html)) !== null) {
-    const families = m[1].split('|').map(f => f.split(':')[0].replace(/\+/g, ' ').toLowerCase());
-    for (const f of families) {
-      fonts.add(f);
-      if (OVERUSED_FONTS.has(f)) overusedFound.add(f);
-    }
+  for (const f of extractGoogleFontFamilies(html)) {
+    fonts.add(f);
+    if (OVERUSED_FONTS.has(f)) overusedFound.add(f);
   }
 
   // Also parse raw HTML/style content for font-family (jsdom may not expose all via CSSOM)
@@ -2661,14 +4963,6 @@ function checkPageTypography(doc, win) {
     findings.push({ id: 'overused-font', snippet: `Primary font: ${font}` });
   }
 
-  // Single font
-  if (fonts.size === 1) {
-    const els = doc.querySelectorAll('*');
-    if (els.length >= 20) {
-      findings.push({ id: 'single-font', snippet: `only font used is ${[...fonts][0]}` });
-    }
-  }
-
   // Flat type hierarchy
   const sizes = new Set();
   const textEls = doc.querySelectorAll('h1, h2, h3, h4, h5, h6, p, span, a, li, td, th, label, button, div');
@@ -2755,6 +5049,135 @@ function checkPageLayout(doc, win) {
   return findings;
 }
 
+// ── Repeated text inside one container ──────────────────────────────────────
+// The same literal string rendered 3+ times in structurally different spots
+// inside one bordered/elevated container — typically a status word wired
+// into every slot of a card template. Legitimate repetition is structural:
+// table columns, calendar grids, nav/menu lists, and templated sibling rows
+// all repeat text in *parallel* positions, so occurrences whose element
+// paths inside the container are identical (or live in dedicated repetition
+// structures) never count. Only 3+ occurrences at 3+ distinct structural
+// positions flag.
+
+const REPEATED_TEXT_SKIP_SELECTOR = [
+  'table',
+  'select',
+  'datalist',
+  'nav',
+  'menu',
+  '[role="navigation"]',
+  '[role="menu"]',
+  '[role="menubar"]',
+  '[role="listbox"]',
+  '[role="grid"]',
+  '[role="tablist"]',
+  '[role="radiogroup"]',
+  '[aria-hidden="true"]',
+].join(',');
+
+const REPEATED_TEXT_CONTAINER_TAGS = new Set([
+  'div', 'section', 'article', 'aside', 'main', 'figure', 'form', 'fieldset', 'details', 'li',
+]);
+
+// A container worth attributing text to: visibly bounded (border on most
+// sides or an elevation shadow) and surface-like (radius or own background).
+function isRepeatedTextContainer(style) {
+  if (!style) return false;
+  const hasShadow = !!(style.boxShadow && style.boxShadow !== 'none' && style.boxShadow !== '');
+  const borderSides = ['Top', 'Right', 'Bottom', 'Left']
+    .filter(side => (parseFloat(style[`border${side}Width`]) || 0) >= 1).length;
+  const hasBorder = borderSides >= 3;
+  const hasRadius = (parseFloat(style.borderRadius) || 0) > 0;
+  const bg = parseRgb(style.backgroundColor) || parseAnyColor(style.backgroundColor);
+  const hasBg = !!(bg && (bg.a ?? 1) > 0.1);
+  return isCardLikeFromProps(hasShadow, hasBorder, hasRadius, hasBg);
+}
+
+function collectRepeatedContainerTextFindings(doc, getStyle, opts = {}) {
+  const isVisible = opts.isVisible || (() => true);
+  const findings = [];
+
+  const containers = [];
+  const containerSet = new Set();
+  for (const el of doc.querySelectorAll('*')) {
+    if (!REPEATED_TEXT_CONTAINER_TAGS.has(el.tagName.toLowerCase())) continue;
+    if (el.closest?.(REPEATED_TEXT_SKIP_SELECTOR)) continue;
+    if (!isRepeatedTextContainer(getStyle(el))) continue;
+    containers.push(el);
+    containerSet.add(el);
+  }
+
+  for (const container of containers) {
+    if (!isVisible(container)) continue;
+    const descendants = container.querySelectorAll('*');
+    // Page-scale wrappers that merely happen to carry a background are not
+    // the "one card" this rule reasons about.
+    if (descendants.length > 250) continue;
+
+    const groups = new Map();
+    for (const d of descendants) {
+      // Attribute text to the innermost container only.
+      let anc = d.parentElement;
+      let ownedByInner = false;
+      while (anc && anc !== container) {
+        if (containerSet.has(anc)) { ownedByInner = true; break; }
+        anc = anc.parentElement;
+      }
+      if (ownedByInner) continue;
+      if (d.closest?.(REPEATED_TEXT_SKIP_SELECTOR)) continue;
+      // Icon-font glyph names read as text but render as symbols.
+      if (/icon|material-symbols|(?:^|\s)fa[srlbd]?(?:\s|-|$)/i.test(String(d.getAttribute?.('class') || ''))) continue;
+      if (!isVisible(d)) continue;
+
+      const direct = [...d.childNodes]
+        .filter(n => n.nodeType === 3)
+        .map(n => n.textContent)
+        .join(' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+      if (direct.length < 4 || direct.length > 48) continue;
+      if (!/[a-zA-Z]/.test(direct)) continue;
+
+      // Structural signature: the element path from the occurrence up to
+      // the container. Parallel/templated repetition shares one signature.
+      const sig = [];
+      for (let cur = d; cur && cur !== container; cur = cur.parentElement) {
+        const cls = String(cur.getAttribute?.('class') || '')
+          .trim().split(/\s+/).filter(Boolean).sort().join('.');
+        sig.push(cur.tagName.toLowerCase() + (cls ? `.${cls}` : ''));
+      }
+      if (!groups.has(direct)) groups.set(direct, []);
+      groups.get(direct).push(sig.join('>'));
+    }
+
+    for (const [text, sigs] of groups) {
+      if (sigs.length < 3) continue;
+      if (new Set(sigs).size < 3) continue;
+      findings.push({
+        id: 'repeated-container-text',
+        snippet: `"${text.slice(0, 40)}" rendered ${sigs.length}× in distinct spots inside ${classSelector(container)}`,
+      });
+    }
+  }
+  return findings;
+}
+
+function checkRepeatedContainerTextFromDoc(doc, win) {
+  return collectRepeatedContainerTextFindings(
+    doc,
+    (el) => win.getComputedStyle(el),
+    { isVisible: (el) => String(win.getComputedStyle(el).display || '') !== 'none' },
+  );
+}
+
+function checkRepeatedContainerTextDOM() {
+  return collectRepeatedContainerTextFindings(
+    document,
+    (el) => getComputedStyle(el),
+    { isVisible: isRenderedForBrowserRule },
+  );
+}
+
 // ─── Cream / beige palette (the default "tasteful" AI surface) ────────────────
 // A warm, lightly-tinted off-white page background — light, with R≥G≥B and a
 // small warm tint (not white, not a strong color). The current reflex surface.
@@ -2868,7 +5291,7 @@ function checkElementOversizedH1DOM(el) {
   return checkOversizedH1({ tag, fontSize, headingText, rect, viewportWidth, viewportHeight });
 }
 
-// ─── GPT tell: hairline border + wide diffuse shadow (gated --gpt) ────────────
+// ─── Generated-UI tell: hairline border + wide diffuse shadow ────────────────
 const CSS_COLOR_TOKEN_RE = /(?:rgba?|hsla?|oklch|oklab|lab|lch|color)\([^)]*\)|#[0-9a-fA-F]{3,8}\b|\b(?:black|white|transparent|currentcolor)\b/gi;
 
 function shadowLayerAlpha(layer) {
@@ -3193,9 +5616,645 @@ function checkElementTextOverflowDOM(el) {
   if (el.clientWidth > 0 && delta >= 16) {
     return [{ id: 'text-overflow', snippet: `${classSelector(el)} overflows its box by ${Math.round(delta)}px` }];
   }
+
+  // Inline text owners have no client geometry (clientWidth/scrollWidth are
+  // both 0), so the scrollWidth path above never sees them. Their overflow
+  // registers only on a block ancestor, and that ancestor has no direct text
+  // so the ownership gate skips it. (The shipped miss: a nowrap inline
+  // <span> spilling 45px past its fixed-width grid cell.) Measure the inline
+  // box against the padding box of its nearest block container instead.
+  if (el.clientWidth === 0 && rect && rect.width > 0) {
+    let container = el.parentElement;
+    while (container && container.clientWidth === 0) container = container.parentElement;
+    if (!container) return [];
+    // Transforms make rect comparisons lie; skip anything on that path.
+    for (let p = el; p && p !== container.parentElement; p = p.parentElement) {
+      const t = getComputedStyle(p).transform;
+      if (t && t !== 'none') return [];
+    }
+    const cRect = container.getBoundingClientRect();
+    const contentRight = cRect.left + container.clientLeft + container.clientWidth;
+    const spill = rect.right - contentRight;
+    if (spill >= 16) {
+      return [{ id: 'text-overflow', snippet: `${classSelector(el)} overflows its container by ${Math.round(spill)}px` }];
+    }
+  }
   return [];
 }
 
+// ---------------------------------------------------------------------------
+// Blinking cursor (browser-only)
+// ---------------------------------------------------------------------------
+
+// Block / underscore glyphs commonly used as a fake text cursor.
+const CURSOR_GLYPH_RE = /^[_|▀-▟■▮❙❚｜]$/;
+
+// How far down the page still counts as the first-viewport / hero region.
+// Hero compositions regularly run past a literal viewport height, so the
+// gate is a landing-region budget, not an exact fold line.
+const CURSOR_FIRST_VIEWPORT_PX = 1200;
+
+// Do the named @keyframes only toggle visibility (opacity dropping to ~0 or
+// visibility:hidden), i.e. a blink rather than a fade/move/spin? Walks the
+// live CSSOM; cross-origin sheets are skipped.
+function keyframesToggleVisibilityDOM(name) {
+  if (!name) return false;
+  for (const sheet of document.styleSheets) {
+    let rules;
+    try { rules = sheet.cssRules || sheet.rules; } catch { continue; }
+    if (!rules) continue;
+    const stack = [...rules];
+    while (stack.length) {
+      const rule = stack.shift();
+      if (rule.cssRules && rule.type !== 7) { stack.push(...rule.cssRules); continue; }
+      if (rule.type !== 7 || rule.name !== name) continue; // 7 = KEYFRAMES_RULE
+      let togglesOut = false;
+      for (const frame of rule.cssRules || []) {
+        const fs = frame.style;
+        if (!fs) continue;
+        for (let i = 0; i < fs.length; i++) {
+          const prop = fs[i];
+          if (prop === 'opacity') {
+            if ((parseFloat(fs.getPropertyValue('opacity')) || 0) <= 0.15) togglesOut = true;
+          } else if (prop === 'visibility') {
+            if (/hidden/i.test(fs.getPropertyValue('visibility'))) togglesOut = true;
+          } else if (prop !== 'animation-timing-function') {
+            return false; // keyframes animate something else — not a blink
+          }
+        }
+      }
+      return togglesOut;
+    }
+  }
+  return false;
+}
+
+// Decorative blinking cursor: a small block / underscore element bound to an
+// infinite blink animation, sitting in the first-viewport region of a page.
+// Real editable surfaces (inputs, textareas, contenteditable, role=textbox)
+// draw their own caret and are exempt. Round pulsing dots stay with the
+// pulsing-dot rule.
+function checkElementBlinkingCursorDOM(el) {
+  const tag = el.tagName.toLowerCase();
+  if (['input', 'textarea', 'select', 'img', 'svg', 'script', 'style'].includes(tag)) return [];
+  const style = getComputedStyle(el);
+
+  const iterations = (style.animationIterationCount || '').split(',').map(s => s.trim());
+  if (!iterations.includes('infinite')) return [];
+  const names = (style.animationName || '').split(',').map(s => s.trim()).filter(n => n && n !== 'none');
+  if (names.length === 0) return [];
+  const blinkName = names.find(n => /blink|caret|cursor/i.test(n))
+    || names.find(n => keyframesToggleVisibilityDOM(n));
+  if (!blinkName) return [];
+
+  // Real caret contexts are exempt.
+  if (el.isContentEditable || el.closest('[contenteditable=""], [contenteditable="true"], [role="textbox"]')) return [];
+
+  const rect = el.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) return [];
+
+  // First-viewport gate: the hero cliché, not a footer terminal.
+  const pageTop = rect.top + (window.scrollY || 0);
+  if (pageTop > CURSOR_FIRST_VIEWPORT_PX) return [];
+
+  // Cursor shape: a lone block/underscore glyph, or an empty solid
+  // rectangle sized like a text caret (block or underscore form).
+  const text = (el.textContent || '').trim();
+  const glyphCursor = text.length === 1 && CURSOR_GLYPH_RE.test(text);
+  let blockCursor = false;
+  if (!glyphCursor) {
+    if (text.length > 0 || el.childElementCount > 0) return [];
+    const bg = parseAnyColor(style.backgroundColor || '');
+    const filled = bg && (bg.a ?? 1) > 0.2;
+    const hasBorderFill = ['Left', 'Right', 'Bottom'].some(
+      side => (parseFloat(style[`border${side}Width`]) || 0) >= 1,
+    );
+    if (!filled && !hasBorderFill) return [];
+    const vertical = rect.width >= 1 && rect.width <= 24 && rect.height >= 6 && rect.height <= 48 && rect.height >= rect.width;
+    const underscore = rect.height >= 1 && rect.height <= 6 && rect.width >= 4 && rect.width <= 24;
+    if (!vertical && !underscore) return [];
+    // Round dots are the pulsing-dot rule's territory.
+    const radiusPx = parseFloat(style.borderRadius) || 0;
+    if (radiusPx >= 0.4 * Math.min(rect.width, rect.height)) return [];
+    blockCursor = true;
+  }
+  if (!glyphCursor && !blockCursor) return [];
+
+  // Hero-region promotion: a fake caret blinking in the first ~900px or
+  // inside the page chrome is the shipped hero cliché, not an incidental
+  // flourish. Promote those from the registry's advisory to warning;
+  // lower first-viewport occurrences keep the default severity.
+  const inHeroRegion = pageTop <= 900
+    || !!(el.closest && el.closest('header, nav, [role="banner"], [role="navigation"]'));
+  return [{
+    id: 'blinking-cursor',
+    snippet: `${classSelector(el)} — ${Math.round(rect.width)}x${Math.round(rect.height)}px blinking cursor (animation "${blinkName}") in the first viewport`,
+    ...(inHeroRegion ? { severity: 'warning' } : {}),
+  }];
+}
+
+// ---------------------------------------------------------------------------
+// Content invisible at rest (browser-only, driven by the URL engine)
+// ---------------------------------------------------------------------------
+
+// Tags whose text never renders, or whose hidden state is legitimate UI
+// (templates, dialogs, native select options). Text inside them stays out of
+// both the numerator and the denominator.
+const HIDDEN_TEXT_EXCLUDE_TAGS = new Set([
+  'script', 'style', 'noscript', 'template', 'title', 'head', 'meta', 'link',
+  'option', 'optgroup', 'select', 'datalist', 'dialog',
+]);
+
+// Measure how many text characters currently render invisible (computed
+// opacity ~0 or visibility hidden anywhere on the ancestor chain) versus
+// visible. display:none / [hidden] / aria-hidden subtrees are legitimately
+// hidden UI (menus, tab panels, templates): they are excluded from the
+// denominator entirely rather than counted as invisible.
+function measureHiddenTextDOM() {
+  const cache = new Map();
+  function stateOf(el) {
+    if (!el || el.nodeType !== 1 || el === document.documentElement) return 'visible';
+    const cached = cache.get(el);
+    if (cached) return cached;
+    let state;
+    const tag = el.tagName.toLowerCase();
+    if (HIDDEN_TEXT_EXCLUDE_TAGS.has(tag)) {
+      state = 'excluded';
+    } else {
+      const parentState = stateOf(el.parentElement);
+      if (parentState === 'excluded') {
+        state = 'excluded';
+      } else {
+        const style = getComputedStyle(el);
+        if (style.display === 'none' || el.hidden || el.getAttribute('aria-hidden') === 'true'
+          || String(style.contentVisibility || '').toLowerCase() === 'hidden') {
+          state = 'excluded';
+        } else if (parentState === 'invisible'
+          || (parseFloat(style.opacity) || 0) <= 0.02
+          || /^(hidden|collapse)$/.test(style.visibility)) {
+          state = 'invisible';
+        } else {
+          state = 'visible';
+        }
+      }
+    }
+    cache.set(el, state);
+    return state;
+  }
+
+  let totalChars = 0;
+  let hiddenChars = 0;
+  const hiddenSamples = [];
+  for (const el of document.querySelectorAll('body *')) {
+    let len = 0;
+    for (const node of el.childNodes) {
+      if (node.nodeType === 3) len += node.textContent.replace(/\s+/g, ' ').trim().length;
+    }
+    if (!len) continue;
+    const state = stateOf(el);
+    if (state === 'excluded') continue;
+    totalChars += len;
+    if (state === 'invisible') {
+      hiddenChars += len;
+      if (hiddenSamples.length < 3) {
+        const text = String(el.textContent || '').replace(/\s+/g, ' ').trim().slice(0, 40);
+        if (text) hiddenSamples.push(text);
+      }
+    }
+  }
+  return { totalChars, hiddenChars, hiddenSamples };
+}
+
+// Pure threshold check over a measureHiddenTextDOM() result. The URL engine
+// calls it AFTER a reveal sweep (scroll through the document so every
+// IntersectionObserver / scroll reveal had its chance to fire, then back to
+// the top): a healthy reveal-on-scroll page drops to ~0 invisible text after
+// the sweep, while a page whose reveal script died keeps most of its text at
+// opacity 0 forever. Fires only when the invisible share stays above 30%
+// with a real amount of text behind it.
+function checkContentHiddenAtRest({ totalChars = 0, hiddenChars = 0, hiddenSamples = [] } = {}) {
+  if (totalChars < 200 || hiddenChars < 150) return [];
+  const share = hiddenChars / totalChars;
+  if (share <= 0.3) return [];
+  const sample = hiddenSamples.length ? ` (e.g. "${hiddenSamples[0]}")` : '';
+  return [{
+    id: 'content-hidden-at-rest',
+    snippet: `${Math.round(share * 100)}% of page text (${hiddenChars} of ${totalChars} chars) stays at opacity 0 / visibility hidden after reveal handlers ran${sample}`,
+  }];
+}
+
+// ---------------------------------------------------------------------------
+// Edge-flush cards in horizontal scrollers (browser-only)
+// ---------------------------------------------------------------------------
+
+// A visually-defined card (own opaque background, or borders on 2+ sides)
+// inside a horizontal scroller, sitting flush against one edge of the
+// scroller's clip box at rest while keeping a clear gutter on the other
+// side. The canonical bug: the first snap panel is sized wider than the
+// scroller, so its cards end exactly at the clip edge with their rounded
+// corners cut, while every sibling panel keeps its inset. Cards that extend
+// far past the edge are deliberate peeks and stay exempt.
+function checkEdgeFlushCardsDOM() {
+  const findings = [];
+  const vh = window.innerHeight || 800;
+  const isScroller = (s) => /(auto|scroll)/.test(s.overflowX || '') || /(auto|scroll)/.test(s.overflow || '');
+
+  for (const scroller of document.querySelectorAll('*')) {
+    const style = getComputedStyle(scroller);
+    if (!isScroller(style)) continue;
+    if (scroller.scrollWidth <= scroller.clientWidth + 8) continue;
+    // At rest only: a user-scrolled or snapped-forward scroller legitimately
+    // shows cut cards at both edges.
+    if (scroller.scrollLeft > 4) continue;
+    const scRect = scroller.getBoundingClientRect();
+    if (scRect.width < 120 || scRect.height < 60) continue;
+    // Landing-region gate: the defect matters where the page opens.
+    if (scRect.top + (window.scrollY || 0) > 2 * vh) continue;
+    const contentLeft = scRect.left + scroller.clientLeft;
+    const contentRight = contentLeft + scroller.clientWidth;
+
+    const flush = [];
+    for (const card of scroller.querySelectorAll('*')) {
+      if (!isRenderedForBrowserRule(card)) continue;
+      // Attribute cards to their nearest scroller only (nested scrollers).
+      let owner = card.parentElement;
+      while (owner && owner !== scroller && !isScroller(getComputedStyle(owner))) owner = owner.parentElement;
+      if (owner !== scroller) continue;
+      const cs = getComputedStyle(card);
+      const rect = card.getBoundingClientRect();
+      if (rect.width < 80 || rect.height < 40) continue;
+      const bg = parseAnyColor(cs.backgroundColor || '');
+      const hasBg = !!(bg && (bg.a ?? 1) > 0.5);
+      const borderSides = ['Top', 'Right', 'Bottom', 'Left']
+        .filter(side => (parseFloat(cs[`border${side}Width`]) || 0) > 0).length;
+      if (!hasBg && borderSides < 2) continue;
+      const leftGutter = rect.left - contentLeft;
+      const rightGap = contentRight - rect.right;
+      // Flush right with a left gutter, or the mirror. The -24 floor keeps
+      // deliberately peeking next-cards (cut mid-card) exempt.
+      const flushRight = leftGutter >= 6 && rightGap < 8 && rightGap > -24;
+      const flushLeft = rightGap >= 6 && leftGutter < 8 && leftGutter > -24;
+      if (!flushRight && !flushLeft) continue;
+      flush.push({ card, edge: flushRight ? 'right' : 'left', gap: Math.round(flushRight ? rightGap : leftGutter) });
+    }
+    if (flush.length === 0) continue;
+    const worst = flush.reduce((a, b) => (b.gap < a.gap ? b : a));
+    findings.push({
+      el: scroller,
+      type: 'edge-flush-cards',
+      detail: `${flush.length} card${flush.length === 1 ? '' : 's'} flush against the ${worst.edge} edge of ${classSelector(scroller)} at rest (${worst.gap}px gap, e.g. ${classSelector(worst.card)})`,
+    });
+  }
+  return findings;
+}
+
+// ---------------------------------------------------------------------------
+// Text occlusion / element overlap (browser-only)
+// ---------------------------------------------------------------------------
+
+// An opaque decorated box: a near-solid background fill or two-plus visible
+// borders make it hide whatever sits behind it. Gradient / image fills are
+// deliberately excluded — a scrim gradient over hero imagery is a contrast
+// layer, not an occluder, and belongs to the pixel low-contrast rule.
+function isOpaqueDecoratedBox(cs) {
+  if (!cs) return false;
+  const bg = parseAnyColor(cs.backgroundColor || '');
+  if (bg && (bg.a ?? 1) > 0.6) return true;
+  const borderSides = ['Top', 'Right', 'Bottom', 'Left'].filter((side) => {
+    if ((parseFloat(cs[`border${side}Width`]) || 0) <= 0) return false;
+    const bc = parseAnyColor(cs[`border${side}Color`] || '');
+    return bc && (bc.a ?? 1) > 0.3;
+  }).length;
+  return borderSides >= 2;
+}
+
+// Is this element lifted out of normal flow into a layer that can cover
+// siblings? Two normal-flow blocks stacked vertically cannot truly hide each
+// other's ink — an overlap between their rects is line-box bleed from tight
+// leading (a display headline reaching up over the line before it), not
+// occlusion. Only out-of-flow positioning (absolute / fixed / sticky) moves an
+// element off its own row onto the pixels of another; an in-place transform or
+// relative nudge on a display headline does not.
+function isLayeredElement(el) {
+  for (let cur = el; cur && cur.nodeType === 1 && cur !== document.body; cur = cur.parentElement) {
+    const pos = String(getComputedStyle(cur).position || 'static');
+    if (pos === 'absolute' || pos === 'fixed' || pos === 'sticky') return true;
+  }
+  return false;
+}
+
+function elementDirectText(el) {
+  let t = '';
+  for (const node of el.childNodes || []) {
+    if (node.nodeType === 3) t += node.textContent;
+  }
+  return t.trim();
+}
+
+// Rendered gate that, unlike isRenderedForBrowserRule, does NOT exempt
+// aria-hidden subtrees: a decorative aria-hidden box still paints on screen
+// and can still visually cover real text.
+function isPaintedForOcclusion(el) {
+  for (let cur = el; cur && cur.nodeType === 1; cur = cur.parentElement) {
+    const style = getComputedStyle(cur);
+    const visibility = String(style.visibility || '').toLowerCase();
+    if (style.display === 'none' || visibility === 'hidden' || visibility === 'collapse') return false;
+    if ((parseFloat(style.opacity) || 0) <= 0.05) return false;
+    if (String(style.contentVisibility || '').toLowerCase() === 'hidden') return false;
+  }
+  return true;
+}
+
+// Detects text that is actually painted UNDER an opaque box or another text
+// run (the reader can't read it), plus two structural overlap tells the
+// elementFromPoint probe can't reach: a large headline whose edge tucks behind
+// an opaque card, and an inline element whose leaked padding-box (a common
+// class-name-collision bug) covers a sibling.
+//
+// The occlusion probe is viewport-bound: elementFromPoint only answers for the
+// scan's current viewport (scroll 0), so the ground-truth paths cover the
+// first-viewport composition where collisions matter most. The inline-leak
+// path is pure geometry and runs anywhere on the page.
+const OCCLUSION_TEXT_SKIP_TAGS = new Set(['script', 'style', 'noscript', 'template', 'title']);
+
+function checkTextOcclusionDOM() {
+  const findings = [];
+  const seenVictims = new Set();
+  const vw = window.innerWidth || 1280;
+  const vh = window.innerHeight || 800;
+
+  const isFloated = (cs) => {
+    const f = String(cs.cssFloat || cs.float || 'none').toLowerCase();
+    return f === 'left' || f === 'right';
+  };
+  const isMarqueeish = (el, cs) => {
+    if (el.tagName === 'MARQUEE') return true;
+    const ident = `${el.getAttribute?.('class') || ''} ${el.getAttribute?.('id') || ''}`;
+    if (/\b(marquee|ticker|scroller|carousel|conveyor)\b/i.test(ident)) return true;
+    const anim = String(cs.animationName || '').toLowerCase();
+    return /marquee|ticker|scroll/.test(anim);
+  };
+  // A fixed or sticky overlay (status bar, toolbar, sticky header) floats above
+  // scrolling content by design — whatever sits under it at rest scrolls clear,
+  // so it is not occluding the page.
+  const isPinnedOverlay = (el) => {
+    for (let cur = el; cur && cur.nodeType === 1 && cur !== document.body; cur = cur.parentElement) {
+      const pos = String(getComputedStyle(cur).position || 'static');
+      if (pos === 'fixed' || pos === 'sticky') return true;
+    }
+    return false;
+  };
+
+  // Collect renderable text owners in / near the first viewport for the
+  // elementFromPoint probe. SVG <text> counts too.
+  const textEls = [];
+  for (const el of document.querySelectorAll('body *')) {
+    const tag = el.tagName.toLowerCase();
+    if (OCCLUSION_TEXT_SKIP_TAGS.has(tag)) continue;
+    const inSvg = !!el.closest('svg');
+    if (inSvg && tag !== 'text') continue;
+    const text = inSvg ? (el.textContent || '').trim() : elementDirectText(el);
+    if (text.length < 2) continue;
+    if (!isPaintedForOcclusion(el)) continue;
+    let rect; try { rect = el.getBoundingClientRect(); } catch { continue; }
+    if (rect.width < 6 || rect.height < 6) continue;
+    // Viewport-bound probe: keep text whose box overlaps the live viewport.
+    if (rect.bottom <= 0 || rect.top >= vh) continue;
+    textEls.push({ el, rect, text, inSvg });
+  }
+
+  for (const victim of textEls) {
+    const { el, rect, text } = victim;
+    if (seenVictims.has(el)) continue;
+    const style = getComputedStyle(el);
+    if (isScreenReaderOnlyTextStyle(style, { width: rect.width, height: rect.height, clientWidth: el.clientWidth, clientHeight: el.clientHeight })) continue;
+
+    const cols = Math.max(6, Math.min(30, Math.round(rect.width / 12)));
+    const rows = Math.max(1, Math.min(4, Math.round(rect.height / 14)));
+    let total = 0;
+    let occluded = 0;
+    let occluderEl = null;
+    let occluderKind = '';
+    for (let i = 0; i < cols; i++) {
+      const x = rect.left + rect.width * ((i + 0.5) / cols);
+      if (x < 1 || x > vw - 1) continue;
+      for (let j = 0; j < rows; j++) {
+        const y = rect.top + rect.height * ((j + 0.5) / rows);
+        if (y < 1 || y > vh - 1) continue;
+        total++;
+        const top = document.elementFromPoint(x, y);
+        if (!top) continue;
+        // Text visible here: the probe returns the text itself, a descendant,
+        // or one of its ancestors (the text's own container / background).
+        if (top === el || el.contains(top) || top.contains(el)) continue;
+        const topCs = getComputedStyle(top);
+        if (isFloated(topCs) || isMarqueeish(top, topCs) || isPinnedOverlay(top)) continue;
+        const topTag = top.tagName.toLowerCase();
+        // Text sitting under a raw image/video is contrast territory (deduped
+        // against the pixel low-contrast rule); leave those alone here.
+        if (['img', 'video', 'canvas', 'picture'].includes(topTag)) continue;
+        const topHasText = elementDirectText(top).length > 0 || !!top.closest('svg');
+        if (isOpaqueDecoratedBox(topCs)) {
+          occluded++;
+          if (!occluderEl) { occluderEl = top; occluderKind = 'box'; }
+        } else if (topHasText) {
+          occluded++;
+          if (!occluderEl) { occluderEl = top; occluderKind = 'text'; }
+        }
+      }
+    }
+    if (total === 0 || !occluderEl) continue;
+    const occFrac = occluded / total;
+    // A solid box's paint fills its rect, so box coverage is real at a lower
+    // bar. Text coverage rides on elementFromPoint returning the occluder's box
+    // (line box / container), which can exceed its actual glyph ink, so the
+    // text bar is higher — partial overlaps below it are crowding, not burial.
+    if (occFrac < (occluderKind === 'text' ? 0.45 : 0.3)) continue;
+
+    // (i) Substantial occlusion: a real slab of the text is behind something.
+    if (occluderKind === 'text') {
+      // Two SVG texts inside the same emblem (concentric arcs, monogram) are one
+      // decorative unit, not a collision.
+      const victimSvg = el.closest('svg');
+      const occSvg = occluderEl.closest('svg');
+      if (victimSvg && occSvg && victimSvg === occSvg) continue;
+      // Both sides in plain flow: the overlap is line-box bleed from tight
+      // leading (a big headline reaching up over its own eyebrow), not one text
+      // run painted over another.
+      if (!isLayeredElement(el) && !isLayeredElement(occluderEl)) continue;
+    }
+    seenVictims.add(el);
+    findings.push({
+      el,
+      type: 'text-occlusion',
+      detail: `${classSelector(el)} "${text.slice(0, 24)}" is ${Math.round(occFrac * 100)}% covered by ${occluderKind === 'text' ? 'overlapping text' : 'an opaque element'} (${classSelector(occluderEl)})`,
+    });
+  }
+
+  // (ii) Headline overhanging an opaque card: a display-scale line whose bulk
+  // sits outside a bounded content card but whose edge clips into it. The text
+  // may still paint on top and stay readable, but the two layers were dropped
+  // on the same pixels — a placement collision, not a composition.
+  const cards = [];
+  for (const el of document.querySelectorAll('body *')) {
+    if (el.closest('svg')) continue;
+    if (!isPaintedForOcclusion(el)) continue;
+    const cs = getComputedStyle(el);
+    const bg = parseAnyColor(cs.backgroundColor || '');
+    const bgImg = cs.backgroundImage || '';
+    if (!bg || (bg.a ?? 1) <= 0.7) continue;
+    if (bgImg && bgImg !== 'none' && /(gradient|url)\(/i.test(bgImg)) continue;
+    const hasBorder = ['Top', 'Right', 'Bottom', 'Left'].some((s) => (parseFloat(cs[`border${s}Width`]) || 0) > 0);
+    const hasShadow = cs.boxShadow && cs.boxShadow !== 'none';
+    if (!hasBorder && !hasShadow) continue;
+    if (isPinnedOverlay(el)) continue;
+    let cr; try { cr = el.getBoundingClientRect(); } catch { continue; }
+    if (cr.width < 100 || cr.width > 0.8 * vw || cr.height < 60) continue;
+    cards.push({ el, rect: cr });
+  }
+  for (const victim of textEls) {
+    const { el, rect, text } = victim;
+    if (seenVictims.has(el)) continue;
+    const style = getComputedStyle(el);
+    if ((parseFloat(style.fontSize) || 16) < 40) continue;
+    let lineHeight = parseFloat(style.lineHeight);
+    if (!Number.isFinite(lineHeight)) lineHeight = (parseFloat(style.fontSize) || 16) * 1.2;
+    const centerX = rect.left + rect.width / 2;
+    for (const card of cards) {
+      if (card.el === el || el.contains(card.el) || card.el.contains(el)) continue;
+      const ix = Math.max(0, Math.min(rect.right, card.rect.right) - Math.max(rect.left, card.rect.left));
+      const iy = Math.max(0, Math.min(rect.bottom, card.rect.bottom) - Math.max(rect.top, card.rect.top));
+      if (ix < 8 || iy < 0.5 * lineHeight) continue;
+      // The headline's bulk must sit outside the card — only its edge clips in.
+      if (centerX >= card.rect.left && centerX <= card.rect.right) continue;
+      if (ix > 0.5 * rect.width) continue;
+      seenVictims.add(el);
+      findings.push({
+        el,
+        type: 'text-occlusion',
+        detail: `${classSelector(el)} "${text.slice(0, 24)}" overhangs ${classSelector(card.el)} by ${Math.round(ix)}px — the headline and the card collide`,
+      });
+      break;
+    }
+  }
+
+  // (iii) Inline padding leak: an inline element with an opaque background and
+  // large vertical padding paints a filled block whose padding-box overflows
+  // its line (inline padding reserves no vertical space), so the fill lands on
+  // the content above and below instead of enclosing its own text. The
+  // canonical bug is a class-name collision that hands a decorative marker a
+  // payoff card's padding. The tell is a rendered height several times the line
+  // height, which distinguishes the leak from a padded inline highlight.
+  for (const el of document.querySelectorAll('body *')) {
+    if (el.closest('svg')) continue;
+    if (!isPaintedForOcclusion(el)) continue;
+    const cs = getComputedStyle(el);
+    if (cs.display !== 'inline') continue;
+    const bg = parseAnyColor(cs.backgroundColor || '');
+    if (!bg || (bg.a ?? 1) <= 0.6) continue;
+    const padTop = parseFloat(cs.paddingTop) || 0;
+    const padBottom = parseFloat(cs.paddingBottom) || 0;
+    if (padTop + padBottom < 24) continue;
+    let rect; try { rect = el.getBoundingClientRect(); } catch { continue; }
+    if (rect.width < 12 || rect.height < 24) continue;
+    const fontSize = parseFloat(cs.fontSize) || 16;
+    let lineHeight = parseFloat(cs.lineHeight);
+    if (!Number.isFinite(lineHeight)) lineHeight = fontSize * 1.4;
+    // The padding box has to overflow the line by a clear margin — a padded
+    // inline highlight sits at roughly one line height, the leak at several.
+    if (rect.height < 2.2 * lineHeight) continue;
+    if (seenVictims.has(el)) continue;
+    // Name a neighbour the fill lands on, if one is nearby (paint state aside,
+    // reveal-on-scroll siblings still occupy the space it covers).
+    let overlaps = null;
+    for (const other of el.parentElement ? el.parentElement.children : []) {
+      if (other === el || el.contains(other) || other.contains(el)) continue;
+      if (getComputedStyle(other).display === 'none') continue;
+      const oRect = other.getBoundingClientRect();
+      const ix = Math.max(0, Math.min(rect.right, oRect.right) - Math.max(rect.left, oRect.left));
+      const iy = Math.max(0, Math.min(rect.bottom, oRect.bottom) - Math.max(rect.top, oRect.top));
+      if (ix > 4 && iy > 4 && (other.textContent || '').trim().length > 0) { overlaps = other; break; }
+    }
+    seenVictims.add(el);
+    findings.push({
+      el,
+      type: 'text-occlusion',
+      detail: `${classSelector(el)} is an inline element whose opaque fill leaks ${Math.round(rect.height)}px past its line${overlaps ? ` onto ${classSelector(overlaps)}` : ''}`,
+    });
+  }
+
+  return findings;
+}
+
+// ---------------------------------------------------------------------------
+// First-viewport column overflow — the stretched-hero signature (browser-only)
+// ---------------------------------------------------------------------------
+
+// A multi-column composition that opens the page (grid/flex with two or more
+// side-by-side columns, each a real share of the width) where one column's
+// content runs far past the fold while its sibling fits inside a single
+// viewport. The row stretches to the tall column, so the short one floats in a
+// screen-and-a-half of dead space and the fold falls deep inside a single
+// section. Single-column pages and full-page heroes (no sibling column) are
+// exempt because there is no fitting sibling to contrast against.
+function checkFirstViewportColumnOverflowDOM() {
+  const findings = [];
+  const vw = window.innerWidth || 1280;
+  const vh = window.innerHeight || 800;
+  const isMultiCol = (s) => /(^|inline-)(grid|flex)$/.test(String(s.display || ''));
+
+  for (const el of document.querySelectorAll('body *')) {
+    const style = getComputedStyle(el);
+    if (!isMultiCol(style)) continue;
+    let rect; try { rect = el.getBoundingClientRect(); } catch { continue; }
+    if (rect.width < 0.5 * vw) continue;
+    const pageTop = rect.top + (window.scrollY || 0);
+    const pageBottom = pageTop + rect.height;
+    // The fold must fall inside this container: it opens within the first
+    // viewport and runs past it.
+    if (pageTop >= vh * 0.9 || pageBottom <= vh) continue;
+
+    // Direct children that read as side-by-side columns: a real width share,
+    // not full-bleed (stacked single column), sharing the container's top row.
+    const cols = [];
+    for (const child of el.children) {
+      const cs = getComputedStyle(child);
+      if (cs.display === 'none') continue;
+      if (String(cs.position || '') === 'absolute' || String(cs.position || '') === 'fixed') continue;
+      let cr; try { cr = child.getBoundingClientRect(); } catch { continue; }
+      const wShare = cr.width / rect.width;
+      if (wShare < 0.25 || wShare > 0.9) continue;
+      if (cr.height < 40) continue;
+      // Content extent: how far the child's own content actually reaches,
+      // independent of a stretched row height.
+      let contentBottom = cr.top;
+      for (const d of child.querySelectorAll('*')) {
+        const ds = getComputedStyle(d);
+        if (ds.position === 'absolute' || ds.position === 'fixed') continue;
+        if (ds.display === 'none' || ds.visibility === 'hidden') continue;
+        let dr; try { dr = d.getBoundingClientRect(); } catch { continue; }
+        if (dr.width > 0 && dr.height > 0) contentBottom = Math.max(contentBottom, dr.bottom);
+      }
+      cols.push({ child, top: cr.top, contentH: contentBottom - cr.top });
+    }
+    if (cols.length < 2) continue;
+    // Side-by-side: the two candidate columns must share the top row.
+    cols.sort((a, b) => b.contentH - a.contentH);
+    const tall = cols[0];
+    const shortest = cols[cols.length - 1];
+    if (Math.abs(tall.top - shortest.top) > 0.25 * vh) continue;
+    if (tall.contentH <= vh * 1.4) continue;
+    if (shortest.contentH > vh) continue;
+
+    findings.push({
+      el,
+      type: 'first-viewport-column-overflow',
+      detail: `${classSelector(el)} opens the page with one column running ${Math.round(tall.contentH / vh * 100)}% of the viewport tall while a sibling fits in ${Math.round(shortest.contentH / vh * 100)}% — the fold falls deep inside the section`,
+    });
+  }
+  return findings;
+}
+
 // --- cli/engine/browser/injected/index.mjs ---
 const IS_BROWSER = typeof window !== 'undefined';
 
@@ -3729,7 +6788,11 @@ if (IS_BROWSER) {
   function generateSelector(el) {
     if (el === document.body) return 'body';
     if (el === document.documentElement) return 'html';
-    if (el.id) return '#' + CSS.escape(el.id);
+    // Read via getAttribute when `el.id` is not a string — a <form> with a
+    // named control (e.g. <input name="id">) shadows the builtin getter and
+    // returns the element, producing a garbage `#[object …]` selector (#407).
+    const elId = typeof el.id === 'string' ? el.id : (el.getAttribute('id') || '');
+    if (elId) return '#' + CSS.escape(elId);
 
     const parts = [];
     let current = el;
@@ -4421,7 +7484,11 @@ if (IS_BROWSER) {
         return {
           type: f.type || f.id,
           category: ap ? ap.category : 'quality',
-          severity: ap?.severity || 'warning',
+          severity: f.severity || ap?.severity || 'warning',
+          // Advisory findings (em-dash overuse, etc.) are surfaced but never
+          // treated as failures; carry the flag so the overlay/extension can
+          // render them with the mildest affordance and consumers can filter.
+          advisory: (ap && ap.advisory === true) || f.advisory === true,
           detail: f.detail || f.snippet,
           ignoreValue: f.ignoreValue || f.value || '',
           name: ap ? ap.name : (f.type || f.id),
@@ -4657,16 +7724,16 @@ if (IS_BROWSER) {
     const _ruleOk = (id) => !_disabled.length || !_disabled.includes(id);
     const designSystem = browserDesignSystemConfig();
     const designSeen = { fonts: new Set(), colors: new Set(), radii: new Set() };
-    // Note: provider-gated rules (--gpt / --gemini) are NOT filtered here. In a
-    // real browser env (detector page, live overlay, extension) running every
-    // check is free, so we always surface them; the gating is purely a CLI
-    // output concern, applied in the Node engines' detect* return paths.
+    // All deterministic rules run in the browser and extension path.
 
     for (const el of document.querySelectorAll('*')) {
       // Skip impeccable's own elements and any descendants (overlays, labels, banner, nav buttons)
       if (el.closest('.impeccable-overlay, .impeccable-label, .impeccable-banner, .impeccable-tooltip')) continue;
-      // Skip browser extension elements (Claude, etc.)
-      const elId = el.id || '';
+      // Skip browser extension elements (Claude, etc.). Use getAttribute when
+      // `el.id` is not a string: a <form> with a named control like
+      // <input name="id"> shadows the builtin `id` getter and returns the
+      // element, whose `.startsWith` throws (issue #407).
+      const elId = typeof el.id === 'string' ? el.id : (el.getAttribute('id') || '');
       if (elId.startsWith('claude-') || elId.startsWith('cic-')) continue;
       // Skip the impeccable live-mode overlay (highlight, tooltip, bar, picker, toast).
       // These are inspector chrome, not part of the user's design.
@@ -4676,10 +7743,12 @@ if (IS_BROWSER) {
 
       const findings = [
         ...checkElementBordersDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
+        ...checkElementPseudoStripeDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
         ...checkElementColorsDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
         ...checkElementMotionDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
         ...checkElementGlowDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
         ...checkElementAIPaletteDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
+        ...checkElementRadialSpotlightDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
         ...checkElementIconTileDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
         ...checkElementItalicSerifDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
         ...checkElementQualityDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
@@ -4687,6 +7756,7 @@ if (IS_BROWSER) {
         ...checkElementClippedOverflowDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
         ...checkElementGptBorderShadowDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
         ...checkElementTextOverflowDOM(el).map(f => ({ type: f.id, detail: f.snippet })),
+        ...checkElementBlinkingCursorDOM(el).map(f => ({ type: f.id, detail: f.snippet, ...(f.severity ? { severity: f.severity } : {}) })),
         ...checkElementDesignSystemDOM(el, designSystem, designSeen),
       ].filter(f => _ruleOk(f.type));
 
@@ -4717,7 +7787,7 @@ if (IS_BROWSER) {
       addBrowserFindings(groupMap, document.body, typoFindings);
     }
 
-    const sectionKickerFindings = checkRepeatedSectionKickersDOM()
+    const sectionKickerFindings = checkKickerAboveHeadingDOM()
       .map(f => ({ type: f.id, detail: f.snippet }))
       .filter(f => _ruleOk(f.type));
     if (sectionKickerFindings.length > 0) {
@@ -4725,12 +7795,66 @@ if (IS_BROWSER) {
       addBrowserFindings(groupMap, document.body, sectionKickerFindings);
     }
 
+    const numberedLabelFindings = checkNumberedSectionLabelsDOM()
+      .map(f => ({ type: f.id, detail: f.snippet }))
+      .filter(f => _ruleOk(f.type));
+    if (numberedLabelFindings.length > 0) {
+      pageLevelFindings.push(...numberedLabelFindings);
+      addBrowserFindings(groupMap, document.body, numberedLabelFindings);
+    }
+
+    const repeatedTextFindings = checkRepeatedContainerTextDOM()
+      .map(f => ({ type: f.id, detail: f.snippet }))
+      .filter(f => _ruleOk(f.type));
+    if (repeatedTextFindings.length > 0) {
+      pageLevelFindings.push(...repeatedTextFindings);
+      addBrowserFindings(groupMap, document.body, repeatedTextFindings);
+    }
+
+    // Em-dash overuse (advisory): browser parity with the static/regex path.
+    // Reads rendered body text so it catches dashes written as HTML entities.
+    // serializeFindings stamps the advisory flag from the registry.
+    const emDashFindings = checkEmDashOveruseDOM()
+      .map(f => ({ type: f.id, detail: f.snippet }))
+      .filter(f => _ruleOk(f.type));
+    if (emDashFindings.length > 0) {
+      pageLevelFindings.push(...emDashFindings);
+      addBrowserFindings(groupMap, document.body, emDashFindings);
+    }
+
     const layoutFindings = checkLayout().filter(f => _ruleOk(f.type));
     for (const f of layoutFindings) {
       const el = f.el || document.body;
       addBrowserFindings(groupMap, el, [{ type: f.type, detail: f.detail || f.snippet }]);
     }
 
+    // Heading rhythm (browser-only: needs real layout for the gap math)
+    const headingRhythmFindings = checkHeadingRhythmDOM().filter(f => _ruleOk(f.type));
+    for (const f of headingRhythmFindings) {
+      addBrowserFindings(groupMap, f.el || document.body, [{ type: f.type, detail: f.detail }]);
+    }
+
+    // Edge-flush cards in horizontal scrollers (browser-only: needs real
+    // layout for the scroller clip box vs card rect math)
+    const edgeFlushFindings = checkEdgeFlushCardsDOM().filter(f => _ruleOk(f.type));
+    for (const f of edgeFlushFindings) {
+      addBrowserFindings(groupMap, f.el || document.body, [{ type: f.type, detail: f.detail }]);
+    }
+
+    // Text occlusion / element overlap (browser-only: needs real layout +
+    // elementFromPoint to confirm what actually paints on top)
+    const occlusionFindings = checkTextOcclusionDOM().filter(f => _ruleOk(f.type));
+    for (const f of occlusionFindings) {
+      addBrowserFindings(groupMap, f.el || document.body, [{ type: f.type, detail: f.detail }]);
+    }
+
+    // First-viewport column overflow — the stretched-hero signature
+    // (browser-only: needs real layout for the content-extent math)
+    const colOverflowFindings = checkFirstViewportColumnOverflowDOM().filter(f => _ruleOk(f.type));
+    for (const f of colOverflowFindings) {
+      addBrowserFindings(groupMap, f.el || document.body, [{ type: f.type, detail: f.detail }]);
+    }
+
     // Page-level quality checks (headings, etc.)
     const qualityFindings = checkPageQualityDOM().filter(f => _ruleOk(f.type));
     if (qualityFindings.length > 0) {
@@ -4756,7 +7880,25 @@ if (IS_BROWSER) {
     }
     const htmlPatternFindings = checkHtmlPatterns(docClone.outerHTML);
     if (htmlPatternFindings.length > 0) {
-      const mapped = htmlPatternFindings.map(f => ({ type: f.id, detail: f.snippet })).filter(f => _ruleOk(f.type));
+      const mapped = htmlPatternFindings.map(f => {
+        const item = { type: f.id, detail: f.snippet };
+        if (f.severity) {
+          item.severity = f.severity;
+        } else if (f.id === 'pulsing-dot' && f.selector) {
+          // The string scan promotes header/nav dots on its own; with a live
+          // layout also promote dots resting in the first ~900px of the page
+          // (the hero region), which the source scan cannot measure.
+          try {
+            const dotEl = document.querySelector(f.selector);
+            if (dotEl) {
+              const rect = dotEl.getBoundingClientRect();
+              const pageTop = rect.top + (window.scrollY || 0);
+              if (pageTop <= 900) item.severity = 'error';
+            }
+          } catch { /* unresolvable selector: keep registry severity */ }
+        }
+        return item;
+      }).filter(f => _ruleOk(f.type));
       pageLevelFindings.push(...mapped);
       addBrowserFindings(groupMap, document.body, mapped);
     }
@@ -5130,6 +8272,9 @@ if (IS_BROWSER) {
   window.impeccableDetectAsync = detectAsync;
   window.impeccableScan = scan;
   window.impeccableScanAsync = scanAsync;
+  // Raw measurement for the URL engine's content-hidden-at-rest pass: it
+  // drives a reveal sweep from Node and thresholds the result itself.
+  window.impeccableMeasureHiddenText = measureHiddenTextDOM;
   window.impeccableCollectVisualContrastCandidates = collectVisualContrastCandidates;
   window.impeccableAnalyzeVisualContrast = analyzeVisualContrast;
   window.impeccableGetLastVisualContrastAnalyses = () => lastVisualContrastAnalyses.slice();