Unscoped global `.card:hover { ... !important }` leaked from the courses catalog page

Area: Monetization (audit p10) · Surface: /learn/courses (catalog) · Dimension: law-violation · Severity: minor

A page template injects a global, !important card-hover rule. It will override any card's intentional hover treatment elsewhere on the catalog page, and the !important makes it hard to override downstream. Law 1 (polish) and general CSS hygiene: page-level styles should be scoped to the component (e.g. `.course-card:hover`) and live in style.css, not inline in the template with !important.

Evidence

platform/templates/courses/catalog.php:79-81 `<style> .card:hover { border-color: var(--color-primary) !important; box-shadow: 0 4px 20px rgba(44, 124, 255, 0.15); } </style>`. The selector is unscoped (matches every `.card` on the page) and uses `!important`, and is emitted from a page template rather than the stylesheet.

Suggested fix. Give the catalog cards a dedicated class (e.g. `.course-card`), move the hover rule into style.css scoped to that class, and drop the `!important`.

Filed by the automated tenant-app audit and adversarially evidence-verified. Status: verified. Open — not yet actioned.