Demo page: the running product beside the case for it

A page to present this to a client. Left column is the real app in the phone
frame — live, swipeable, the same deck and the same data, not a screenshot.
Right column is what somebody needs in order to judge it: how to get in, what it
does, what it is built on.

Credentials, both sides
- A one-sided demo of a two-sided marketplace shows half a product, so the panel
  carries a customer AND a tradesperson, each with a copy button. Reading a
  phone number off a screen into a form while a client watches is a small
  humiliation; mistyping one is a worse one.
- dev-login grows from one pinned number to a named DEMO_ACCOUNTS list. The
  three guards are unchanged — not production, explicitly enabled, and the
  number must be on the list. Both accounts map to seeded users that already own
  jobs, conversations and a completed booking, so the screens have something in
  them rather than five empty states.
- The page SAYS SO when sign-in is unavailable rather than letting somebody
  discover it mid-meeting. A fixed passcode is a login bypass and must never
  ship live; the honest fix for demoing against production is a real account and
  a real SMS, not a fourth flag.

Content lives in arrays at the top of demo-panel, so adding a feature or
swapping a dependency is one line and the layout is untouched. Four labelled
placeholder slots — roadmap, pricing, metrics, case study — reserve the space
and make it obvious what belongs where.

A deliberate exception to DESIGN.md §1.0 and §4, which ban desktop layouts and
marketing pages, and it is noted as one in the file. This is a frame around the
running app for a laptop, not a product screen; the app inside is untouched and
still mobile-only. Below `lg` the panel stacks under the phone, because a client
who opens the link on their own phone should still be able to read it.

Verified: both demo accounts complete the real OTP path end to end.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

DESIGN.md

@@ -300,25 +300,38 @@ Overlay stamps: `SEND JOB` in `go-600`, `PASS` in `stop-500`, 4px border, ±12°
 
 **The action row** is five circles, in one fixed order:
 
-| | Action | Size | Ink |
-|---|---|---|---|
-| 1 | Rewind — bring the last card back | 44px | `ink-600` |
-| 2 | Pass | **64px** | `stop-500` |
-| 3 | Watch — tell me when they are free | 44px | `brand-500` |
-| 4 | Send this job | **64px** | `go-600` |
-| 5 | Ask a question | 44px | `ink-950` |
+| | Action | Size | Fill | Icon |
+|---|---|---|---|---|
+| 1 | Rewind — bring the last card back | 44px | `inset` | `ink-600` |
+| 2 | Pass | **64px** | `stop-500` | white |
+| 3 | Watch — tell me when they are free | 44px | `inset` | `ink-600` |
+| 4 | Send this job | **64px** | `go-600` | white |
+| 5 | Ask a question | 44px | `inset` | `ink-600` |
 
-Two sizes, and the size *is* the hierarchy: the two decisions that end the card
-are 64px and reach the thumb first; the three that do not are 44px — still the
-minimum target from §8, never smaller. Gaps are 16px between a small and a large,
-24px between the two larges, so the pair still reads as the pair.
+Three rules make this row, and they are worth stating because the first version
+broke all three — five hues, five shadows, five outlined rings:
 
-All five are 2px bordered circles on `ink-0`. A control whose state persists —
-watch — fills with its own colour when active, and its label changes with it;
-selection is never carried by fill alone (§8).
+- **Two colours, not five.** Only the two actions that decide the card carry
+  colour, and they take the exact hues of the drag stamps they mirror. The three
+  helpers are ink. A helper competing with a decision is noise.
+- **No elevation.** §5 already lists three shadows on a screen as a Don't, and
+  the first version gave all five their own. Flat discs, every one — a shadow
+  under a tinted circle muddies the colour it is meant to sit on. Size and hue
+  carry the hierarchy; nothing needs to float.
+- **Solid, not ring and not tint.** A filled disc with a white glyph is
+  unambiguous at a glance and holds its weight above a full-bleed photo. An
+  outlined ring reads as a diagram of a button; a pastel tint reads as a sticker.
+
+Size is the hierarchy: 64px for the two decisions, 44px for the helpers — the
+§8 floor, never smaller. Gaps are 20px, widest around the pair so it reads as a
+pair rather than as items 2 and 4 of five.
+
+Watch is the one control whose state persists, and inverts to a solid `accent`
+disc when on. Its label changes with it — selection is never carried by fill
+alone (§8).
 
 Rewind is `disabled` with nothing to undo rather than hidden. A row that changes
-length as you swipe moves the two buttons underneath your thumb.
+length as you swipe moves the two big buttons out from under your thumb.
 
 ---