Vitals

Build a health, fitness or wellness product site using the "Vitals" theme — Clean clinical green for health products that need to feel safe and legible.

## Art direction
Reassuring and unembellished. Soft mint-grey canvas, white cards with 12px radii and a hairline border, and a single signal green reserved for the primary action and 'good' states. Data is the decoration: rings, sparklines and stat tiles drawn in CSS/SVG. Nothing is dark, nothing is loud, and every claim sits next to its source.

## Colour palette (use these exact values)
- Background: #F4F7F5
- Surface / cards: #FFFFFF
- Primary text: #10221A
- Secondary text: #55705F
- Accent (buttons, links, active state): #12B76A
- Text on accent: #FFFFFF
- Borders / dividers: #DCE7E0
Use exactly one accent. Everything that needs emphasis earns it through weight, scale or space instead of a second colour.

## Typography
- Headings: "Inter", system-ui, sans-serif
- Body: "Inter", system-ui, sans-serif
- Plain and legible by design: 44px/650 headlines, 17/1.7 body, and a minimum body size of 16px anywhere on the page. Numbers and vitals are set in tabular figures at 32px/600 so they line up in columns.

## Page structure
1. Header: wordmark, four nav links, a 'Sign in' text link and a green 'Get started' button.
2. Hero split: an outcome headline, two sentences, a primary CTA, a reassurance line about cancellation, and on the right a white card showing a progress ring plus three stat tiles.
3. Trust row: four items — regulatory or certification marks, clinician count, member count, average rating.
4. How it works: three numbered steps with a CSS-drawn illustration each and one sentence of copy.
5. A results panel: a sparkline chart card beside a two-paragraph explanation, with a footnote citing the study.
6. Programme cards: three plans, each with a duration, what is included as a checked list, and a price.
7. Clinician profiles: a four-column grid with portraits, names, credentials and specialties.
8. Safety and privacy band: what is stored, what is shared, and who to contact, in plain language.
9. FAQ accordion covering eligibility, cost, cancellation and data.
10. Footer with medical disclaimer, licences, and links.

## Components and detailing
Stat tiles are white, 12px radius, 1px `#DCE7E0` border, with a muted 12px label above a 32px tabular number. Progress rings are SVG strokes in accent over a `#DCE7E0` track. Buttons are 46px, 10px radius, solid accent for primary. Checklists use a filled green circle with a white tick. Every claim card has a 12px muted footnote slot beneath it.

## Motion
Gentle and functional: rings and sparklines draw in over 800ms once on scroll-in, numbers count up only if they finish within 600ms, and cards do not move on hover — only the border tints. Nothing pulses; this is not a game.

## Copy and imagery
Plain-language, cautious, and cited. Never imply a medical outcome you cannot source; put the source under the claim. Prices, cancellation terms and what is not included are stated on the page, not in a modal. Use 'people' and 'members', not 'users'.

## Non-negotiables
- Responsive from 360px through desktop — no horizontal scrolling at any width.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.