## 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/is-team/5ec87905-607a-4eeb-afa3-a1b534169c52-1789538686-8.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/is-team/5ec87905-607a-4eeb-afa3-a1b534169c52-1789538583775-full.webp
- Component on Kage: https://kage.design/component/is-team-pricing-table

## Before you start
Ask me about my plan names, pricing model, billing cadence, limits, feature groups, and which tier should be recommended. Then build a comparison that reflects my product rather than the reference.

Build a transparent pricing section with a left-aligned serif heading and concise subtitle, followed by a monthly/annual billing toggle. Use four plan headers in aligned columns: plan name, price, billing note, and compact CTA. Highlight one recommended plan with a slightly darker border or small badge, not a heavy color block. Below, create a wide comparison table with a fixed first label column and grouped rows such as workspace, collaboration, AI, advanced, and support. Use thin #EAEAEA horizontal rules, generous 14–18px row heights, checkmarks and em dashes centered in plan columns, and small info icons for ambiguous limits. Keep colors white, #111, #777, and a restrained accent around #E2A93A or the brand's own accent. Make the header sticky on desktop if helpful, allow horizontal scrolling on mobile, and keep buttons 36–42px tall with 8–999px radius depending on style.

Never use the reference's logo, product name, copy, illustrations, imagery, exact prices, plan names, or exact feature limits.