fix(landing): comparison tables — columns collapsed from pill CSS

[johnnichev]

Summary

Both comparison tables in the landing page had a CSS bug that collapsed every value cell out of table layout, causing all pills to cluster under the selectools column header while the competitor columns sat empty on the right.

Root cause (one line): .cmp-table .yes/.no/.mid { display: inline-block; ... } was applied to <td> elements. display: inline-block on a table cell removes it from CSS table layout and collapses the tbody into an inline flow. The thead kept working because .yes/.no/.mid are only ever on value cells, never on headers.

Fix: wrap each value cell's content in <span class="pill">...</span> and retarget the pill-layout CSS (display: inline-block, padding, border-radius, font sizing, nowrap) to the new .pill class. The <td> stays in proper table-cell layout; the span becomes the rounded pill inside it. Color rules stay on the <td> and cascade to the child span by inheritance — no duplication.

Affects both comparison tables:

• Builder comparison (7 cols × 10 rows) — 60 value cells wrapped
• Framework comparison (4 cols × 15 rows) — 45 value cells wrapped

Net change: +37 / -42 lines. Fewer lines of code despite 105 new span wrappers, because the old td-level white-space: nowrap rule and the consolidated color-on-td rules more than offset the additions.

Verification

Verified locally via Playwright on landing/index.html served from python3 -m http.server:

// Before (bug):
td.yes  → getComputedStyle(...).display === "inline-block"  ❌

// After (fix):
td.yes       → getComputedStyle(...).display === "table-cell"   ✅
td.yes .pill → getComputedStyle(...).display === "inline-block" ✅

Screenshots confirmed both tables render with every column aligned and every pill in its correct column. The cyan left-edge accent on the selectools / Selectools winner column is preserved. Pill colors (cyan-green for yes, gray for no, amber for mid) all render correctly.

Test plan

• Deploy workflow (docs.yml) runs green
• After deploy, visit selectools.dev/#compare and confirm:
  • Feature / selectools / LangGraph Studio / n8n / Flowise / Dify / Rivet headers each sit over their own column
  • Every value pill sits in its correct column
  • Pills are pill-shaped (rounded), not full-width colored cells
  • Winner-column cyan accent line still visible on the selectools column
• Visit selectools.dev/#compare on mobile — horizontal scroll with mask gradient still works (the min-width: 800px on .cmp-table ensures readable columns)
• Hover any row on desktop — subtle cyan tint still applies (the :hover rule targets the tr, unaffected by this fix)

Why this won't regress

The fix removes the only rule that put table cells into non-table display modes. Any future pill-styling tweaks will target .pill (the inner span), which is safe to give any display property because it's not part of the table layout contract. If someone accidentally adds display: inline-block back onto .cmp-table .yes or similar, the tables will break again — but the comment block above the .pill rule explicitly documents why that's dangerous, so the warning is in the code.