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/overview.mdx

@@ -0,0 +1,52 @@
+---
+title: Site Builder overview
+description: Build a website visually inside WHP — drag-and-drop blocks, ready-made templates, draft / publish workflow.
+sidebar:
+  order: 1
+  badge:
+    text: Beta
+    variant: tip
+---
+
+import Beta from '~/content/partials/beta-callout.mdx';
+import Support from '~/content/partials/support-link.mdx';
+
+<Beta />
+
+**Site Builder** is a visual editor that lives inside WHP. You don't need to know HTML or CSS to use it — drag content blocks onto a page, tweak text and colours in place, and click **Publish** when you're ready. It builds a real static website that's hosted on the WHP site you point it at, so the published output is fast and works exactly like any other site you'd host with us.
+
+![Site Builder landing page](~/assets/screenshots/whp/whp-site-builder-landing.png)
+
+## What you get
+
+- **50+ drag-and-drop content blocks** across Basic, Layout, Sections, Media, and Forms categories.
+- **16 ready-made templates** — restaurant, small business, SaaS landing, agency, medical/dental, portfolio, photography, content creator, event/conference, and more.
+- **Multi-page sites** with a shared header and footer that update everywhere at once.
+- **Image and video uploads** managed in the **Assets** panel.
+- **Mobile-responsive preview** — desktop, tablet, and mobile views from one toggle.
+- **Site Design Tokens** — set your primary, secondary, and accent colours plus heading and body fonts once, and they apply across every block on the site.
+- **Custom head code injection** for analytics, custom fonts, or global CSS.
+- **Save drafts & publish when ready** — your edits don't go live until you click Publish.
+
+## When Site Builder is the right tool
+
+- You want a landing page, marketing site, or small multi-page brochure.
+- You don't want to touch HTML/CSS, but you want more flexibility than a one-size template.
+- You want to ship a draft to a colleague for review before it goes live.
+
+## When it isn't
+
+- You're running a CMS (WordPress, Drupal, etc.) — those run as regular WHP sites of their own, not inside Site Builder.
+- You need server-side dynamic behaviour beyond simple forms — Site Builder produces static pages.
+- You already have a build pipeline (Astro, Hugo, Next.js static export) — keep using that; just deploy the output to a regular WHP site.
+
+## In this section
+
+- **[Getting started](/whp/site-builder/getting-started/)** — open the editor, pick a template or start blank, make your first edit, save and publish.
+- **[Blocks & pages](/whp/site-builder/blocks-and-pages/)** — the block library, adding pages, editing the shared header and footer.
+- **[Styling your site](/whp/site-builder/styling/)** — Site Design Tokens, fonts, advanced styling controls.
+- **[Publishing & code injection](/whp/site-builder/publishing/)** — drafts vs. publish, the device previews, adding custom `<head>` code.
+
+## Still stuck?
+
+<Support />