docs(compatibility): redesign — replace giant table with category card grid

The original /for/compatibility used a single ~30-row table with 5 columns.
Looked like a spec sheet, not a marketing page. Replace with:

- Category-grouped card grid (PaaS, serverless, VMs, k8s, agent sandboxes,
  desktop, browser). Each card: platform name + mode badge + 1-line note.
- Mode badges use accent colors (udp = green, compat = blue, proxy = amber,
  wrong runtime = muted italic) and look like the rest of the site instead
  of a CSV.
- Egress models stay as a compact responsive row layout (model / examples /
  today / what's needed). Mobile breakpoint collapses to one column.
- Hero / two-mode cards / v1.10.3 explainer / examples / CTA all keep the
  existing site patterns (.page-head, .zoo-card, .feat-grid, .cta-block).
- All inline styling uses the global CSS variables from global.css so dark
  mode + future palette changes propagate.

Author: teovl