## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/papermark-data-rooms/d90c2ffc-2788-45c6-a044-36fe7b171e0c-1792994579-6.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/papermark-data-rooms/d90c2ffc-2788-45c6-a044-36fe7b171e0c-1792994482140-full.webp
- Component on Kage: https://kage.design/component/papermark-data-rooms-pricing-table

## Before you start
Ask what plans, limits, add-ons, and buying questions matter to the user's product. Apply the principles below to that product.

Build a responsive pricing comparison table with a short heading above it. Use a sticky or visually anchored first column for feature names and a clear header row for plan names. Group rows into logical categories, use alternating very light gray and white row fills, and keep availability indicators consistent with accessible text or icons rather than color alone. Include concise helper text under feature names and a small supplemental section beneath the table for deployment or service options. Use 12–14px table typography, 16–18px plan headers, 14–16px section heading text, 1px neutral dividers (#D9D9D9), 0–6px radii, and strong outer contrast without heavy decoration. On mobile, allow horizontal scrolling while keeping the feature column sticky; ensure the header remains understandable. Highlight one recommended plan with a restrained accent border or background, not a loud badge.

Never: use logos, product names, copy, illustrations, or imagery from the reference.