v1.0 to v1.0

+ - The hero opens with one claim and one CTA; below it sits a two-pane

+ scene: an nvim TUI running a coding CLI and the Riffpad phone app, on the

+ same session. The TUI waits for approval; the phone shows the approval

+ card — the product, not a metaphor.

+ The hero scene is a screenshot of a real session, so it keeps one palette:

+ **Catppuccin Mocha in both page themes**. The TUI pane and the phone next to

+ it share the same fixed ramp; only `tui-bg` follows the theme, because the

+ dark page needs a three-step stack — page `crust` (`#11111B`) < panes

+ `mantle` (`#181825`) < muted band `base` (`#1E1E2E`) — so the panes lift off

+ the band instead of dissolving into it. Light keeps `base` and is unchanged.

+ | `tui-bg` | `#1E1E2E` light / `#181825` dark | TUI body and phone screen (base on Latte pages, mantle on Mocha pages) |

+ | `tui-hairline` | `rgba(205,214,244,0.14)` | Panel outline (command bar, TUI, phone) — same in both themes |

+ | `tui-divider` | `rgba(205,214,244,0.10)` | Inner separators: tabline edge, statusline top, sheet/card rules |

+ | `tui-border` | `#45475A` | Interaction-only emphasis (hover/focus). Never a static frame — on the dark surfaces it reads as a selection ring |

+ | `tui-surface` | `#313244` | Statusline, selected option, hairline rules (surface0) |

+ | `tui-fg` | `#CDD6F4` | TUI text (text) |

+ | `tui-mute` | `#6C7086` | Gutter numbers, hints (overlay0) |

+ | `tui-mauve` | `#CBA6F7` | `NORMAL` block, user prompt, running dots (mauve) |

+ | `tui-green` | `#A6E3A1` | `●` tool rows, `✓` approved (green) |

+ | `tui-blue` | `#89B4FA` | Approval panel border, `❯` selected option (blue) |

+ | `tui-red` | `#F38BA8` | `✗` rejected (red) |

+ | `display-xl` | `clamp(36px, 5.4vw, 84px)` (78px at 1440) | 700 | 1.04 | -0.03em | Hero headline |

+ ### Section rhythm

+

+ Backgrounds alternate screen by screen. Odd screens sit on `canvas` (left

+ transparent, so the 40px lattice shows through); even screens are flat

+ `surface-muted` full-bleed bands whose content still fits the 1200 container:

+

+ | # | Block | Background |

+ |---|---|---|

+ | 1 | Hero copy | `canvas` |

+ | 2 | Scene (TUI + phone) | `surface-muted` band |

+ | 3 | Architecture | `canvas` |

+ | 4 | How it works | `surface-muted` band |

+ | 5 | Security | `canvas` |

+ | 6 | FAQ | `surface-muted` band |

+ | 7 | CTA | `canvas` |

+ | 8 | Footer | `surface` + 1px `hairline` top rule |

+

+ Bands carry their own vertical breathing room (`py-16`, `py-24` from `sm`

+ up) so panes never touch the band edge, and their top edge always starts

+ below the fold — the hero copy keeps the first screen to itself.

+

+ - One column, left-aligned: `// remote control for cli agents` label, then a

+ near-full-width display headline (`clamp(36px, 5.4vw, 84px)`, `1.04`

+ leading — ~10 of the 12 columns at 1440), **one** line of supporting copy,

+ the CTA row, and the install command line.

+ - The primary CTA is the loudest thing on the page: accent fill, `64px`

+ tall, `18px` label, full-width on mobile; `Read the docs` sits next to it

+ as a small plain underlined text link — a full step below it in weight.

+ - The install command is a single full-width line on the same Mocha surface

+ as the TUI panes (`tui-bg` / `tui-hairline`, square, no shadow): `❯` in

+ mauve, the command in mono, `COPY` as a bordered cell of fixed width (88px)

+ on the right. No label row, no card, no tagline. The cell is wide enough for

+ `COPIED ✓`, so the label swap never moves the divider.

+ - `// v0.2.6 · self-hosted · e2e` closes that row at the far right (static

+ text, `xl` and up) — never a graphic.

+ - The copy block owns the whole first screen: it is `100svh - 56px` tall

+ (the header offset) and vertically centred, so nothing else may peek above

+ the fold. The scene band (TUI + phone) starts on the next screen, as its

+ own full-bleed block.

+ ### Device scene (hero) — nvim TUI + phone

+ - Two panes, top-aligned and bottom-aligned: the wide pane is a Neovim

+ session (TUI, `2fr`), the narrow one is the Riffpad phone (`1fr`, capped at

+ 320px). No connector, divider or caption between them — the gap carries the

+ relationship.

+ - The TUI pane is a screenshot, not a window: no traffic lights, no window

+ title bar, no shadow. It is flat and square with a 1px `tui-hairline`

+ outline, and it always renders Catppuccin **Mocha**, in both page themes.

+ Panes sit above the band on fill alone (page `crust` < panes `mantle` <

+ band `base`) — the frame stays a hairline, never a bright ring.

+ - Chrome, top to bottom: a `tui-surface` tabline (file name tab + modified

+ `+`), the transcript, the statusline. Nothing else.

+ - Gutter: plain absolute line numbers (`1…N`) in `tui-mute`; the cursor line

+ is `tui-fg`. No relative numbers.

+ - Content: the user prompt (`❯`, mauve), a mute "thought 4s · read 3 files"

+ line, `●` tool calls with `└` sub-lines, then the agent's pending

+ `Bash(rm src/old.ts)` call.

+ - While the approval is pending, a four-line `tui-blue` bordered panel sits

+ inside the pane: `Bash command`, the command itself, then `❯ 1. Yes`

+ (selected, `tui-surface` fill) and `2. No`. No prose, no key-hint footer.

+ - The panel lives in a **fixed-height slot** (96px, 110px from `sm`), so

+ resolving the approval leaves the pane, the band and everything below it at

+ exactly the same size — the result line takes the last transcript row and

+ the slot simply empties.

+ - Statusline (single row, `tui-surface`): `NORMAL` mode block (mauve fill,

+ `tui-bg` text), the file path, then right-aligned `claude · utf-8 · 37%`.

+ - The phone is the same Mocha ramp and the same flat geometry: 12px radius

+ at most, 1px `tui-hairline`, **no shadow in either theme** (no bezel either —

+ the phone is a pane, not a device impression). It stretches to

+ the pane's height so both bottom edges line up.

+ - Phone content: session bar with `● synced`, the metadata chips, six

+ finished tool rows (enough to fill the pane's height — never a blank band

+ under the header), the pending `$ rm src/old.ts` row, then an approval

+ sheet pinned to the bottom edge — status dot, summary, `Approve` /

+ `Reject` (44px tall).

+ - The scene is interactive: approving/rejecting on the phone drops the TUI

+ approval panel and swaps the pane's `Waiting for approval…` line **in

+ place** for `✓ approved from phone · rm src/old.ts` (green) or `✗ rejected

+ from phone · agent paused` (red) — no stale waiting row above the result.

+ The phone sheet collapses to an `Approved` / `Rejected` chip.

+ - Static SVG of the system, straight lanes only: `client` (your phone) ⇄

+ The dashes are fixed (`strokeDasharray="6 6"`) — no scrolling dash and no

+ travelling packets.

+ - Node accent dots are solid; the diagram scrolls horizontally below ~680px.

+ - **None.** The page is static: no scroll reveals, no marquees, no travelling

+ packets, no pulsing dots, no `transition-*` anywhere. `ScrollReveal` and

+ every `@keyframes` were removed, and there is no reduced-motion media query

+ left to write because nothing moves.

+ - Hover and state changes are instantaneous: colour and border swap on the

+ same frame (primary CTA darkens one step, links go `mute` → `ink`).

+ - Nothing animates in or out; a section is fully painted the moment it is

+ scrolled to.

+ - Show the product as an nvim TUI + phone; the approval card is the hero.

+ | ≥1024px | Hero copy fills the fold, scene splits 2fr/1fr (TUI + phone, equal heights); 3-step row with dashed connector; bento 7/5 spans |

+ | 768–1023px | Hero scene stacks (TUI, hairline, centred phone); bento keeps 7/5 spans |

+ | <768px | Single column; hero display 28px; CTA full-width; bento stacks 1×1; nav collapses |