Comparison Table

Build a comparison table section for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A section with an h2 heading, then a real HTML table:
- Three columns: features, my product, one competitor.
- First column lists feature names (row headers). My product's column is visually emphasized: accent-color header, subtle tinted background, slightly bolder values.
- Cells are primarily yes/no: a checkmark icon for yes, a muted cross for no, with occasional short text where a boolean does not fit.

DATA AND HONESTY
- Features and values live in one config structure with a clearly marked TODO for my real comparison data. Every competitor cell must be accurate and verifiable when I fill it in; add a comment reminding me that false comparative claims are a legal risk, not just bad form.
- Competitor names are placeholders ("Competitor A") until I confirm I want to name them; naming real competitors is my call, noted in a TODO.
- If a value is unknown, the cell shows a neutral dash, never an assumed "no".

BEHAVIOR
- On narrow screens the table scrolls horizontally inside its own container (the page never scrolls sideways), with the feature column sticky on the left.

QUALITY
- Semantic table markup: caption (visually hidden is fine), thead with th scope="col", feature cells as th scope="row".
- Checkmark and cross icons carry aria-labels ("Yes"/"No") or visually hidden text; color is never the only signal.
- Zebra striping or row borders for scannability; WCAG AA contrast throughout, including on the emphasized column.
- Comfortable cell padding; the table never exceeds its container without the scroll wrapper.

QUESTIONS
- Before you build, find or ask for: my real comparison data for every cell, and whether to name the competitors. Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.