## 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/pine-computer/b47ce26e-68eb-4b09-b29e-15beff007c2f-1791612328-3.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/pine-computer/b47ce26e-68eb-4b09-b29e-15beff007c2f-1791612242987-full.webp
- Component on Kage: https://kage.design/component/pine-computer-stats

## Before you start
Ask the user which measurable outcomes are credible for their product and what evidence supports them. Build a trustworthy version using those facts, not the reference claims.

Create a full-width performance-proof section with a saturated mint background. At the top, arrange two or three oversized numeric metrics in a responsive grid, each with a short explanatory label directly beneath. Under each metric, add a simple bordered comparison visualization—such as two horizontal bars, a before/after panel, or a compact benchmark card—with clear labels and no unnecessary decoration. Finish with one sentence explaining the comparison, small footnotes, and a quiet “How we measured” link aligned toward the lower right.

Use mint #16E7A7 as the dominant background, near-black #07110D for type and outlines, and translucent mint/black for chart details. Use very heavy display type for numbers, normal sans-serif for explanations, 1px borders, square corners, and ample vertical spacing. Make charts legible on mobile by stacking them and expose methodology in a modal or expandable disclosure.

Never:
- invent or reuse the reference numbers, footnotes, or copy
- imply unsupported performance claims
- use the reference browser graphics or exact chart design
- use logos or decorative imagery