quiver-cli 0.8.0 → 1.0.0

package/template/.agents/skills/design/impeccable/scripts/detector/rules/checks.mjs

@@ -1,5 +1,7 @@
 import {
   BORDER_SAFE_TAGS,
+  EM_DASH_CHARS_PER_DASH,
+  EM_DASH_FLOOR,
   GENERIC_FONTS,
   KNOWN_SERIF_FONTS,
   OVERUSED_FONTS,
@@ -18,13 +20,21 @@ import {
   parseRgb,
   relativeLuminance,
 } from '../shared/color.mjs';
+import { extractGoogleFontFamilies } from '../shared/fonts.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'];
 
@@ -40,10 +50,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` });
+      }
     }
   }
 
@@ -65,23 +85,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);
@@ -111,7 +153,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])}` });
         }
       }
     }
@@ -157,6 +203,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;
@@ -302,26 +369,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.
@@ -342,23 +440,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}"`,
   }));
 }
 
@@ -407,52 +513,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;
+}
+
+// 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;
+}
 
-    // 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]));
+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' });
     }
   }
@@ -460,38 +1461,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);
   }
@@ -515,7 +1526,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]+/)
@@ -526,7 +1537,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]})` });
@@ -537,7 +1548,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);
@@ -547,33 +1558,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 });
+  }
+
+  // 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 });
   }
 
-  // --- Provider tells (gated): repeating-gradient stripes (GPT) ---
-  if (/repeating-(?:linear|radial|conic)-gradient\s*\(/i.test(html)) {
+  // --- 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.
   {
@@ -585,12 +1617,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;
@@ -614,7 +1646,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);
@@ -636,6 +1672,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 || '';
@@ -648,7 +1696,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.
@@ -668,7 +1718,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:
@@ -684,41 +1735,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.
@@ -752,6 +1828,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 [];
@@ -764,7 +1877,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) {
@@ -777,11 +1988,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,
@@ -842,6 +2066,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 [];
@@ -853,6 +2092,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 || '',
@@ -860,6 +2100,7 @@ function checkElementHeroEyebrowDOM(el) {
     siblingLetterSpacing: parseFloat(sibStyle.letterSpacing) || 0,
     siblingFontWeight: sibStyle.fontWeight || '',
     siblingColor: sibStyle.color || '',
+    siblingHasAccentDashPseudo: domAccentDashPseudo(sibling),
   });
 }
 
@@ -924,8 +2165,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;
@@ -945,13 +2188,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 };
@@ -989,6 +2397,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;
 }
 
@@ -1001,7 +2444,7 @@ function parseColorResolved(str, customPropMap) {
   return parseAnyColor(resolved);
 }
 
-const REPEATED_KICKER_SKIP_SELECTOR = [
+const KICKER_SKIP_SELECTOR = [
   'nav',
   'form',
   'table',
@@ -1020,7 +2463,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',
@@ -1038,23 +2481,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;
@@ -1062,47 +2514,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),
     });
@@ -1110,13 +2597,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) {
@@ -1135,7 +2786,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);
@@ -1158,7 +2816,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) {
@@ -1215,7 +2873,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']);
@@ -1339,6 +3122,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
@@ -1349,8 +3181,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)
@@ -1618,11 +3455,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)) {
@@ -1715,7 +3608,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) {
@@ -1742,7 +3635,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) {
@@ -1783,12 +3681,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,
@@ -1799,6 +3717,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;
@@ -1867,7 +3829,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 || '',
@@ -1875,16 +3838,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) {
@@ -1898,8 +3866,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 ───────────────────────────────────────────
@@ -1941,12 +3911,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();
@@ -2009,6 +3973,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) {
@@ -2036,14 +4151,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)
@@ -2062,14 +4172,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');
@@ -2156,6 +4258,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.
@@ -2269,7 +4500,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) {
@@ -2594,22 +4825,675 @@ 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;
+}
+
 export {
+  CSS_NAMED_COLORS,
   checkBorders,
   isEmojiOnlyText,
   checkColors,
+  checkHoverContrast,
+  checkElementHoverContrast,
+  parseColorMix,
+  compositeColorOver,
   isCardLikeFromProps,
   checkIconTile,
   resolveSerif,
   checkItalicSerif,
   isAccentColor,
   checkHeroEyebrow,
-  checkRepeatedSectionKickers,
+  checkKickerAboveHeading,
   checkMotion,
   checkGlow,
+  scanCssTextForGlow,
+  scanCssTextForGridBackground,
+  scanCssTextForRadialHalo,
+  scanCssTextForPseudoStripe,
+  scanCssTextForInsetStripe,
+  scanCssTextForMarquee,
+  collectMarqueeKeyframes,
+  collectCssCustomProps,
+  cssLengthToPx,
+  scanCssTextForPulsingDot,
+  scanHtmlForShapeAssembledIllustration,
+  buildHtmlPatternCorpora,
   checkHtmlPatterns,
   readOwnBackgroundColor,
   resolveBackground,
@@ -2627,12 +5511,28 @@ export {
   parseAnyColor,
   parseColorResolved,
   cleanInlineText,
-  isRepeatedKickerCandidate,
-  collectRepeatedSectionKickerCandidates,
-  checkRepeatedSectionKickersDOM,
+  isKickerCandidate,
+  collectKickerCandidates,
+  checkKickerAboveHeadingDOM,
+  parseNumberedLabelText,
+  isNumberedSectionLabelCandidate,
+  collectNumberedSectionLabelCandidates,
+  checkNumberedSectionLabels,
+  checkNumberedSectionLabelsFromDoc,
+  checkNumberedSectionLabelsDOM,
+  checkEmDashOveruse,
+  checkEmDashOveruseDOM,
+  isRepeatedTextContainer,
+  collectRepeatedContainerTextFindings,
+  checkRepeatedContainerTextFromDoc,
+  checkRepeatedContainerTextDOM,
+  checkElementPseudoStripeDOM,
   checkElementMotionDOM,
   checkElementGlowDOM,
   checkElementAIPaletteDOM,
+  checkElementRadialSpotlightDOM,
+  checkElementRadialSpotlight,
+  checkRadialSpotlight,
   resolveFontSizePx,
   resolveLengthPx,
   checkQuality,
@@ -2645,7 +5545,7 @@ export {
   checkElementIconTile,
   checkElementItalicSerif,
   checkElementHeroEyebrow,
-  checkRepeatedSectionKickersFromDoc,
+  checkKickerAboveHeadingFromDoc,
   checkElementMotion,
   checkElementGlow,
   checkTypography,
@@ -2668,4 +5568,13 @@ export {
   checkElementClippedOverflowDOM,
   isScreenReaderOnlyTextStyle,
   checkElementTextOverflowDOM,
+  checkHeadingRhythmDOM,
+  checkElementBlinkingCursorDOM,
+  measureHiddenTextDOM,
+  checkContentHiddenAtRest,
+  checkEdgeFlushCardsDOM,
+  isOpaqueDecoratedBox,
+  isLayeredElement,
+  checkTextOcclusionDOM,
+  checkFirstViewportColumnOverflowDOM,
 };