docs(site-builder): add 5-article Site Builder section (Beta)

Adds /whp/site-builder/ with overview, getting-started, blocks-and-pages,
styling, and publishing. Wired as a 'Site Builder' sidebar group with a
Beta badge.

- Captured real screenshots via the demo account through a redaction
  step (server names, domain, demo-user all swapped for placeholders)
- New beta-callout partial shared across all 5 articles
- capture-site-builder.ts is local-only (uses tools/screenshots/.env
  for demo creds, never runs in CI)

src/content/docs/whp/site-builder/getting-started.mdx

@@ -0,0 +1,105 @@
+---
+title: Getting started
+description: Open Site Builder, pick a template or start from scratch, make your first edits, and publish.
+sidebar:
+  order: 2
+---
+
+import { Steps, Aside } from '@astrojs/starlight/components';
+import Beta from '~/content/partials/beta-callout.mdx';
+import SignIn from '~/content/partials/signing-in.mdx';
+import Support from '~/content/partials/support-link.mdx';
+
+<Beta />
+
+## Before you start
+
+- A **site** added in WHP that you want Site Builder to manage. Any container type works — Site Builder writes its output to the site's docroot when you publish, so a **Static HTML** site is the cleanest fit.
+- About 10–15 minutes for your first walkthrough.
+
+## Sign in to WHP
+
+<SignIn />
+
+## Open Site Builder
+
+<Steps>
+
+1. In the sidebar, click **Site Builder**. You'll see a card for each site on your account.
+   ![Site Builder landing — list of your sites](~/assets/screenshots/whp/whp-site-builder-landing.png)
+
+2. Click **Build Site** on the site you want to edit. The visual editor opens.
+
+</Steps>
+
+## Pick a template (or start blank)
+
+The editor opens onto an empty canvas, but the fastest way to get a real-looking site is to start from one of the 16 included templates.
+
+<Steps>
+
+1. Click **Templates** in the top bar.
+   ![Templates picker](~/assets/screenshots/whp/whp-site-builder-templates.png)
+
+2. Browse the categories: **Business**, **Creative**, **Personal**, **Community**, or **All**. Each card shows the template name, a tag (Business / Creative / etc.), a short description, and the page count.
+
+3. Click a template to preview and apply. Most templates ship as multi-page sites with their own header, footer, and a few sample pages so you can see structure right away.
+
+</Steps>
+
+<Aside type="tip">
+  Applying a template replaces the current site contents. If you've already made edits, save first (or duplicate the site) so you can roll back.
+</Aside>
+
+If you'd rather start from scratch, skip Templates — the empty canvas with just a Header placeholder is the right starting point.
+
+## Make your first edit
+
+The editor has three panels:
+
+- **Left:** the **Blocks** panel (also **Pages**, **Layers**, **Assets**).
+- **Centre:** the canvas — what your visitors will see.
+- **Right:** the **Styles** panel.
+
+<Steps>
+
+1. From the **Blocks** panel, drag a **Heading** block onto the canvas.
+
+2. Click the heading on the canvas. An inline toolbar appears; type to replace the text.
+
+3. Drag a **Text** block underneath and add a sentence or two.
+
+4. Drag a **Button** block next. Click it, set its label and link in the right-side panel.
+
+</Steps>
+
+You've built your first page. The header at the top is the **shared header** — every page on the site uses it.
+
+## Preview the result
+
+The top bar has three device toggles next to the site name: **desktop**, **tablet**, **mobile**. Click each to see how your page looks at that width. The **Preview** button opens a full-window preview without the editor chrome.
+
+## Save vs. publish
+
+Two distinct actions:
+
+- **Save** stores a draft. Your changes are kept on the server but the live site is unchanged.
+- **Publish** writes the rendered HTML and assets to the site's docroot. Your visitors see the new version on the next request.
+
+<Aside type="tip">
+  Save often as you work — every Save is a checkpoint. Publish only when you're happy with what you've built.
+</Aside>
+
+## Get back to the Site Builder list
+
+Click **Back to Panel** in the top-left of the editor. You can come back any time and continue from where you left off.
+
+## What's next
+
+- **[Blocks & pages](/whp/site-builder/blocks-and-pages/)** — the rest of the block library, and how to add more pages.
+- **[Styling your site](/whp/site-builder/styling/)** — set your colours and fonts in one place.
+- **[Publishing & code injection](/whp/site-builder/publishing/)** — add analytics, custom fonts, or global CSS.
+
+## Still stuck?
+
+<Support />