Vesper

Build a landing page with SynthesisUI in the system "vesper".
My request: "a landing page"
Before you start: if this project does not have the vesper design system yet, run `npx synthesisui@latest add vesper`. If any SynthesisUI command asks to sign in (or says the system does not exist), run `npx synthesisui@latest login`, tell me to sign in in the browser, and wait.
Fonts: `add` writes a `fonts.ts` that loads this system's type with next/font. Import it in the root layout and put each export's `.variable` on `<body>`, as `add` prints - the templates read those variables. Don't replace it with a Google Fonts link.
Top to bottom, write each section with its template, then render it in one page, with the content written from my request:

1. npx synthesisui@latest template vesper nav-top-bar
   content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
   phone menu: npx synthesisui@latest template vesper phone-menu, then pass it as <AppNav PhoneMenu={PhoneMenu} ... /> so the links stay on phones. Every link that starts with # points at a section of this page: give that section the id; if no section matches, leave the item out and tell me.
   text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"brand":42,"items.label":60}
2. npx synthesisui@latest template vesper hero
   content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
   text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"action.label":26,"line":46,"link.label":56,"name":8,"options.name":118,"specs.label":38,"specs.value":40}
3. npx synthesisui@latest template vesper pricing-lead
   content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
   text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"compare.label":50,"plans.action.label":24,"plans.facts":80,"plans.name":18,"plans.price":7,"plans.who":39,"title":42}
4. npx synthesisui@latest template vesper testimonials-lead
   content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
   text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"all.label":52,"title":42,"voices.detail":40,"voices.name":33,"voices.quote":118}
5. npx synthesisui@latest template vesper closing-band
   content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
   text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"action.label":31,"fact":60,"title":40}
6. npx synthesisui@latest template vesper footer-columns
   content: write it from my request - my words where I gave them; where I did not, short copy that only says what my request says. Never invent numbers, prices, ratings, reviews, client names or contacts: ask me, or leave that part out
   text limits (characters, the most this design holds on desktop and on phones; a list key applies to every item): {"address":98,"brand":29,"columns.links.label":24,"columns.title":35,"email":52,"legal.label":48,"line":112}

Text between asterisks is emphasis: render it as <em>. Keep my words as I wrote them. Where you write the text, stay within each section's text limits.
A button or link whose href is anything other than # goes exactly where I set it - use that address as written. An href of # is yours to point at the right page of this project.

You may go beyond the list: swap a section for another variant of the same kind (`npx synthesisui@latest landing vesper` lists them), reorder the body, or break one layout rule on purpose when my goal calls for it. Tell me which and why.

Main colour: #6476ED. In this project, set the system's primary to it - override `--ds-color-semantic-primary` in the root stylesheet, after the system's - so every button and link uses it.