/* =================================================================
   Wraps legacy main.css inside CSS @layer(legacy) so Tailwind v4
   utilities (which live inside @layer utilities) can override.

   Why this file exists:
   main.css has dozens of homemade Tailwind-style utility classes —
   .grid-cols-2, .grid-cols-3, .text-center, .text-primary, .bg-primary,
   .mb-4, .mt-6, .py-8, .p-4, .flex, .flex-col, .items-center, .gap-N,
   .rounded, .rounded-lg, .rounded-full — all declared unlayered.

   The CSS layer cascade gives unlayered styles strictly higher
   priority than any layered styles, regardless of selector specificity.
   So `class="sm:grid-cols-4"` from Tailwind (in @layer utilities)
   silently loses to main.css's `.grid-cols-2`, and Tailwind appears
   broken. This is the same bug class that previously broke .btn-primary
   and h1 typography utilities — but with a much wider blast radius
   because so many utility names overlap.

   By @import-ing main.css INTO @layer(legacy), all main.css rules
   become layered. Tailwind's @layer utilities still loads later
   (base.html order: main-layered.css → site-chrome.css → exit-intent.css
   → tailwind.css), so within the layered cascade Tailwind utilities
   win on source order. Pages that currently use main.css's utility
   classes still work because nothing else is competing in the
   `legacy` layer.

   Browser support: CSS @layer is supported in Safari 15.4+ (Mar 2022),
   Chrome 99+ (Mar 2022), Firefox 97+ (Feb 2022). Below that, the
   cascade falls back to no-layer behavior, which is what we have today.
   ================================================================= */

@import url("./main.436edf8eb62f.css") layer(legacy);