` / relocate |
+| `src/components/landing/Problem.astro` | Cards → `.card-muted`, red → inside `` only |
+| `src/components/landing/Cta.astro` | Viewport-height, tri-gradient on H2, viking at 30% opacity |
+| `src/components/landing/Install.astro` | Add 3-tab persona picker above install cards |
+| `src/pages/index.astro:2-16` | Import + insert `` and `` |
+
+---
+
+## Task 1 — CSS Tokens (foundation for all other tasks)
+
+**Files:**
+- Modify: `src/styles/global.css`
+
+- [ ] **Step 1: Add spacing tokens after line 64** (`--space-12` line)
+
+```css
+ --space-12: 8.75rem; /* 140px */
+ /* Calm-mode section padding (added for Context Forge redesign) */
+ --space-13: 9rem; /* 144px */
+ --space-14: 11.25rem; /* 180px — final CTA / hero breathing room */
+```
+
+- [ ] **Step 2: Add component tokens before the closing `}` of `:root` (after line 90)**
+
+```css
+ /* Card — muted baseline (no glow, no shadow, neutral) */
+ --card-muted-bg: var(--bg-card);
+ --card-muted-border: var(--border);
+ --card-muted-radius: var(--radius);
+
+ /* Pill — neutral compatibility tag */
+ --pill-bg: var(--bg-card);
+ --pill-border: var(--border-light);
+ --pill-text: var(--text-muted);
+ --pill-padding: 0.5rem 0.875rem;
+
+ /* Section eyebrow — `// 01 — label` mono style */
+ --eyebrow-color: var(--text-dim);
+ --eyebrow-size: var(--text-xs);
+ --eyebrow-font: var(--font-mono);
+ --eyebrow-tracking: 0.08em;
+
+ /* Hero subhead constraint */
+ --hero-subhead-max-w: 32rem;
+```
+
+- [ ] **Step 3: Verify no duplicate token names**
+
+```bash
+grep -n "space-13\|space-14\|card-muted\|pill-bg\|eyebrow-color\|hero-subhead-max-w" src/styles/global.css
+```
+
+Expected: each name appears exactly once.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/styles/global.css
+git commit -m "feat(tokens): add calm-mode spacing, card-muted, pill, eyebrow tokens"
+```
+
+---
+
+## Task 2 — CSS Utilities (landing.css)
+
+**Files:**
+- Modify: `src/styles/landing.css`
+
+- [ ] **Step 1: Add utility section at the end of `landing.css`**
+
+```css
+/* ── Context Forge Redesign — Utility classes ───────────────────────── */
+
+/* Section with calm-mode breathing room */
+.section-calm {
+ padding-block: var(--space-13);
+}
+
+/* Neutral muted card — no glow, no colored border */
+.card-muted {
+ background: var(--card-muted-bg);
+ border: 1px solid var(--card-muted-border);
+ border-radius: var(--card-muted-radius);
+}
+
+/* Compatibility pill — neutral tool tag */
+.pill-neutral {
+ background: var(--pill-bg);
+ border: 1px solid var(--pill-border);
+ color: var(--pill-text);
+ padding: var(--pill-padding);
+ border-radius: var(--radius-pill);
+ font-size: var(--text-xs);
+ font-family: var(--font-body);
+ display: inline-block;
+ white-space: nowrap;
+ transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.pill-neutral:hover {
+ border-color: var(--border-light);
+ color: var(--text-muted);
+}
+
+/* Section eyebrow label — `// 01 — label` mono style */
+.eyebrow {
+ color: var(--eyebrow-color);
+ font-size: var(--eyebrow-size);
+ font-family: var(--eyebrow-font);
+ letter-spacing: var(--eyebrow-tracking);
+ text-transform: uppercase;
+ display: block;
+ margin-bottom: 1rem;
+}
+```
+
+- [ ] **Step 2: Build to confirm no CSS syntax errors**
+
+```bash
+pnpm build 2>&1 | head -30
+```
+
+Expected: build completes with 0 errors.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/styles/landing.css
+git commit -m "feat(styles): add .section-calm, .card-muted, .pill-neutral, .eyebrow utilities"
+```
+
+---
+
+## Task 3 — Hero compression
+
+**Files:**
+- Modify: `src/components/landing/Hero.astro:42-61`
+- Modify: `src/styles/landing.css` (hero-stats, hero-context rules)
+
+The hero-context paragraph (lines 59-61) is a 600-char SEO block that competes with the H1 for visual weight. The stats are over-sized and glowing. Both changes reduce cognitive load above the fold.
+
+- [ ] **Step 1: Wrap `hero-context` in a `` to push it below the visual fold**
+
+Replace `Hero.astro:59-61` (the entire `` block):
+
+```html
+
+ Why RTK? The numbers.
+
+ RTK demonstrably removes an average of 89% of CLI output noise before it enters the AI context window — measured internally across 2,900+ real-world developer commands. The result: AI coding sessions extend by up to 3x, token costs drop 60-90%, and reasoning quality improves because the context window holds code instead of boilerplate. Per-command measurements: cargo test 91.8% savings, git status 80.8%, find 78.3%, grep 49.5%. On pay-per-token setups, a 10-developer team eliminates roughly $1,750/month in wasted spend. RTK is free, open source (MIT), written in Rust — activate with rtk init --global.
+
+
+```
+
+- [ ] **Step 2: Add hero-context-details styles to `landing.css`** (add after `.hero-context` existing rules, or add new block at end):
+
+```css
+/* Hero context — collapsible SEO block */
+.hero-context-details {
+ margin-top: var(--space-5);
+ max-width: var(--hero-subhead-max-w);
+}
+
+.hero-context-toggle {
+ font-size: var(--text-sm);
+ color: var(--text-dim);
+ font-family: var(--font-mono);
+ cursor: pointer;
+ list-style: none;
+ display: flex;
+ align-items: center;
+ gap: 0.4rem;
+}
+
+.hero-context-toggle::before {
+ content: '//';
+ opacity: 0.5;
+}
+
+.hero-context-details[open] .hero-context-toggle {
+ color: var(--text-muted);
+}
+
+.hero-context-details .hero-context {
+ margin-top: var(--space-3);
+ font-size: var(--text-sm);
+ color: var(--text-muted);
+ max-width: var(--hero-subhead-max-w);
+}
+```
+
+- [ ] **Step 3: Downgrade hero stats visually** — find the `.hero-stats`, `.stat-value`, `.stat-label` rules in `landing.css` and update (search for `.stat-value` to find exact lines):
+
+```bash
+grep -n "stat-value\|stat-label\|stat-sep" src/styles/landing.css | head -20
+```
+
+Then update `.stat-value` to reduce from current large size to mono-style:
+
+```css
+/* Hero stats — tertiary, not primary content */
+.hero-stats {
+ display: flex;
+ align-items: center;
+ gap: var(--space-9); /* 64px */
+ margin: var(--space-5) 0;
+}
+
+.stat-value {
+ font-family: var(--font-mono);
+ font-size: 1.5rem;
+ font-weight: 600;
+ color: var(--accent);
+ /* Remove any text-shadow / glow rules here */
+ text-shadow: none;
+ display: block;
+}
+
+.stat-label {
+ font-size: var(--text-xs);
+ color: var(--text-dim);
+ display: block;
+ margin-top: 0.15rem;
+}
+
+.stat-sep {
+ width: 1px;
+ height: 2rem;
+ background: var(--border);
+ flex-shrink: 0;
+}
+```
+
+- [ ] **Step 4: Build and visual check**
+
+```bash
+pnpm build && pnpm preview
+```
+
+Open http://localhost:4321 — confirm: hero H1 is the dominant element, stats are small and mono, the SEO block is collapsed behind a `` toggle.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/components/landing/Hero.astro src/styles/landing.css
+git commit -m "feat(hero): compress stats, collapse SEO paragraph — reduce above-fold cognitive load"
+```
+
+---
+
+## Task 4 — CompatibilityStrip component
+
+**Files:**
+- Create: `src/components/landing/CompatibilityStrip.astro`
+- Modify: `src/styles/landing.css`
+
+A thin strip below the Hero (before Problem) listing the 8 AI tools RTK works with, as neutral pills. Kills the "will this work with my tool?" objection in 2 seconds.
+
+- [ ] **Step 1: Create `CompatibilityStrip.astro`**
+
+```astro
+---
+// CompatibilityStrip — "Works with" pill row (inserted between Hero and Problem)
+const tools = [
+ 'Claude Code',
+ 'Cursor',
+ 'Aider',
+ 'Gemini CLI',
+ 'OpenAI Codex',
+ 'Cline',
+ 'Windsurf',
+ 'GitHub Copilot',
+]
+---
+
+
+
+
Works with
+
+ {tools.map((tool) => (
+ {tool}
+ ))}
+
+
+
` and ``, before ``. This gives Vox and ICM a narrative home on the main landing.
+
+- [ ] **Step 1: Create `Capabilities.astro`**
+
+```astro
+---
+// Capabilities — "Context Forge" suite section
+// Shows RTK + ICM + Vox as a coherent 3-tool suite
+const tools = [
+ {
+ label: 'RTK',
+ verb: 'Compress',
+ color: 'var(--accent)',
+ href: '/#install',
+ description: 'Commands, file reads, tests — compressed 60-90% before they reach your model context. Zero config.',
+ stat: '89% noise removed',
+ },
+ {
+ label: 'ICM',
+ verb: 'Remember',
+ color: 'var(--cyan)',
+ href: '/icm/',
+ description: 'Persistent memory across sessions. Your agent picks up where it left off — decisions, errors, context.',
+ stat: 'Infinite context memory',
+ },
+ {
+ label: 'Vox',
+ verb: 'Speak',
+ color: 'var(--violet)',
+ href: '/vox/',
+ description: 'Voice output for your AI agent. Three TTS backends, four Claude Code integration modes.',
+ stat: '3 TTS backends',
+ },
+]
+---
+
+
+
+
// context forge
+
+ One forge. Three tools.
+
+
RTK, ICM, and Vox share one philosophy: open source, Rust, zero telemetry, local-first.
+
+
+
+```
+
+- [ ] **Step 2: Add styles to `landing.css`**
+
+```css
+/* Capabilities — Context Forge section */
+.capabilities-inner {
+ max-width: var(--max-w);
+ margin-inline: auto;
+ padding-inline: var(--space-6);
+ text-align: center;
+}
+
+.capabilities-title {
+ font-size: clamp(1.75rem, 4vw, 2.5rem);
+ font-weight: 800;
+ letter-spacing: -0.025em;
+ margin: 0 0 var(--space-3);
+}
+
+.capabilities-sub {
+ font-size: var(--text-lg);
+ color: var(--text-muted);
+ max-width: 38rem;
+ margin-inline: auto;
+ margin-bottom: var(--space-9);
+}
+
+.capabilities-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+ gap: var(--space-5);
+ text-align: left;
+}
+
+.capabilities-card {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-4);
+ padding: var(--space-7);
+ text-decoration: none;
+ transition: border-color 0.2s ease, transform 0.2s ease;
+}
+
+.capabilities-card:hover {
+ border-color: var(--border-light);
+ transform: translateY(-2px);
+}
+
+.capabilities-card-header {
+ display: flex;
+ align-items: baseline;
+ gap: var(--space-3);
+}
+
+.capabilities-label {
+ font-family: var(--font-mono);
+ font-size: var(--text-sm);
+ font-weight: 700;
+ letter-spacing: 0.05em;
+}
+
+.capabilities-verb {
+ font-size: var(--text-xl);
+ font-weight: 700;
+ color: var(--text-bright);
+}
+
+.capabilities-desc {
+ font-size: var(--text-sm);
+ color: var(--text-muted);
+ line-height: 1.6;
+ margin: 0;
+ flex: 1;
+}
+
+.capabilities-stat {
+ align-self: flex-start;
+}
+```
+
+- [ ] **Step 3: Build check**
+
+```bash
+pnpm build 2>&1 | grep -iE "error|warning" | head -10
+```
+
+Expected: 0 errors.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/components/landing/Capabilities.astro src/styles/landing.css
+git commit -m "feat(landing): add Capabilities section — Context Forge suite frame (RTK/ICM/Vox)"
+```
+
+---
+
+## Task 6 — Wire new components into index.astro
+
+**Files:**
+- Modify: `src/pages/index.astro:2-16` (imports)
+- Modify: `src/pages/index.astro` (section order in ``)
+
+Insert order: `` → `` → `` → `` → ... (rest unchanged).
+
+- [ ] **Step 1: Add imports after line 4 (`import Hero from ...`)**
+
+```astro
+import Capabilities from '../components/landing/Capabilities.astro'
+import CompatibilityStrip from '../components/landing/CompatibilityStrip.astro'
+```
+
+- [ ] **Step 2: Find the `` and insert the two new components immediately after**
+
+Before:
+```astro
+` only)
+
+**Files:**
+- Modify: `src/components/landing/Problem.astro`
+- Modify: `src/styles/landing.css`
+
+Currently the 3 cards have colored borders/backgrounds (violet/cyan/red). Goal: cards become neutral (`.card-muted`), the problem evidence stays colored but only inside terminal-style code blocks. The icon stroke colors stay as semantic accents.
+
+- [ ] **Step 1: Update problem card structure in `Problem.astro`**
+
+Replace the 3 `` opening tags — add `card-muted` class:
+
+```html
+
+```
+
+(Apply to all 3 cards — lines 13, 28, 42)
+
+- [ ] **Step 2: Replace the `
` elements with terminal-style output**
+
+Replace `Problem.astro:25`:
+```html
+Worse AI reasoning
+```
+With:
+```html
+context_quality: degraded ▼3x shorter sessions
+```
+With:
+```html
+session_remaining: 32% ▼~70% wasted spend
+```
+With:
+```html
+token_waste: $1,750/mo ▲{`// ${label}`}
+```
+
+- [ ] **Step 2: Use `` in each section (replace inline `` in Capabilities)**
+
+In `Capabilities.astro`, replace:
+```astro
+// context forge
+```
+With:
+```astro
+import Eyebrow from './Eyebrow.astro'
+---
+`:
+```astro
+
+```
+
+In `Install.astro` frontmatter:
+```astro
+---
+import Eyebrow from './Eyebrow.astro'
+---
+```
+
+Add before `
`:
+```astro
+`:
+```astro
+
+
+
+
+
+
+
+ Your AI doesn't need to read all that.
+
+
Install rtk. Better code, longer sessions, lower costs.
+
+
+
+
+```
+
+- [ ] **Step 2: Add/update CTA styles in `landing.css`**
+
+```css
+/* CTA — viewport-height version */
+.cta-section--full {
+ min-height: 80vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ overflow: hidden;
+}
+
+.cta-inner {
+ position: relative;
+ z-index: 2;
+ text-align: center;
+ max-width: 680px;
+ margin-inline: auto;
+}
+
+.cta-viking-bg {
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+ pointer-events: none;
+}
+
+.cta-viking-bg img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0.12;
+ filter: grayscale(20%);
+}
+
+.cta-headline {
+ font-size: clamp(2.2rem, 5vw, 3.5rem);
+ font-weight: 800;
+ letter-spacing: -0.03em;
+ line-height: 1.1;
+ margin: var(--space-4) 0 var(--space-5);
+}
+```
+
+- [ ] **Step 3: Build + visual check**
+
+```bash
+pnpm build && pnpm preview
+```
+
+Confirm: CTA section fills ~80vh, headline gradient visible, viking faintly visible at low opacity behind, all share buttons preserved.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/components/landing/Cta.astro src/styles/landing.css
+git commit -m "refactor(cta): viewport-height section, gradient headline, viking background at 12% opacity"
+```
+
+---
+
+## Task 10 — Install section — persona tabs
+
+**Files:**
+- Modify: `src/components/landing/Install.astro`
+- Modify: `src/styles/landing.css`
+
+Add 3-tab persona picker above install cards. Default = "Claude Code". Each tab shows the same install commands (RTK install is identical across tools) but the hook init command differs.
+
+- [ ] **Step 1: Replace `Install.astro` content** (full replacement):
+
+```astro
+---
+// Install section — persona tabs + 3 install methods + hook activation
+import Eyebrow from './Eyebrow.astro'
+
+const personas = [
+ {
+ id: 'claude-code',
+ label: 'Claude Code',
+ initCmd: 'rtk init --claude-code',
+ initNote: 'Installs PreToolUse hook in Claude Code settings.json — every Bash call is rewritten automatically.',
+ },
+ {
+ id: 'cursor',
+ label: 'Cursor',
+ initCmd: 'rtk init --cursor',
+ initNote: 'Configures Cursor\'s .cursorrules to pipe Bash commands through rtk.',
+ },
+ {
+ id: 'other',
+ label: 'Other AI CLI',
+ initCmd: 'rtk init --global',
+ initNote: 'Installs a global shell hook — works with Aider, Gemini CLI, Codex, Windsurf, and any terminal AI tool.',
+ },
+]
+const defaultPersona = personas[0]
+---
+
+
+
+
+
+
+
+
Get started in 30 seconds
+
Install, activate the auto-rewrite hook, and every command is compressed automatically.
+
+
+
+ {personas.map((p, i) => (
+
+ {p.label}
+
+ ))}
+
+
+
+
+
+
Quick Install
+
One-liner for Linux & macOS
+
+
curl -fsSL https://raw.githubusercontent.com/rtk-ai/rtk/refs/heads/master/install.sh | sh
+
+
+
+
+
+
+
Via Homebrew
+
macOS & Linux
+
+
brew install rtk
+
+
+
+
+
+
+
Pre-built Binaries
+
macOS, Linux, Windows
+
+
+
+
+
+
+
Then activate the auto-rewrite hook
+ {personas.map((p, i) => (
+
+ ))}
+
+
+
+ 1
+ curl ... | sh
+
+
+ 2
+ rtk init --claude-code
+
+
+ 3
+ rtk gain
+
+
+
+
+
+
+```
+
+- [ ] **Step 2: Add persona tab styles to `landing.css`**
+
+```css
+/* Persona tabs */
+.persona-tabs {
+ display: flex;
+ gap: var(--space-2);
+ margin-bottom: var(--space-7);
+ border-bottom: 1px solid var(--border);
+ padding-bottom: 0;
+}
+
+.persona-tab {
+ background: none;
+ border: none;
+ border-bottom: 2px solid transparent;
+ padding: var(--space-3) var(--space-5);
+ font-family: var(--font-body);
+ font-size: var(--text-sm);
+ color: var(--text-dim);
+ cursor: pointer;
+ transition: color 0.15s ease, border-color 0.15s ease;
+ margin-bottom: -1px;
+}
+
+.persona-tab:hover {
+ color: var(--text-muted);
+}
+
+.persona-tab--active {
+ color: var(--accent);
+ border-bottom-color: var(--accent);
+}
+
+/* Persona panels */
+.persona-panel {
+ display: block;
+}
+
+.persona-panel[hidden] {
+ display: none;
+}
+```
+
+- [ ] **Step 3: Build + accessibility check**
+
+```bash
+pnpm build 2>&1 | grep -iE "error" | head -10
+```
+
+Also verify: tab keyboard navigation works (Tab → focus tab, Enter/Space → switch persona, panel updates).
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add src/components/landing/Install.astro src/styles/landing.css
+git commit -m "feat(install): persona tabs for Claude Code / Cursor / Other AI CLI"
+```
+
+---
+
+## Task 11 — Final build validation
+
+- [ ] **Step 1: Full production build**
+
+```bash
+pnpm build
+```
+
+Expected: exits 0, no TypeScript errors, no Astro build errors.
+
+- [ ] **Step 2: Check all pages generated**
+
+```bash
+rtk ls dist/ && rtk ls dist/vox/ && rtk ls dist/icm/
+```
+
+Expected: `index.html` at each path.
+
+- [ ] **Step 3: RSS endpoint check**
+
+```bash
+pnpm preview &
+sleep 2
+curl -s http://localhost:4321/rss.xml | head -5
+kill %1
+```
+
+Expected: `.*' | head -1 | python3 -c "import sys, json; json.load(sys.stdin); print('JSON-LD: valid')" 2>&1
+kill %1
+```
+
+Expected: `JSON-LD: valid`
+
+- [ ] **Step 5: WCAG contrast spot-check on new elements**
+
+Manually verify in browser:
+- `.pill-neutral` text (`--text-muted #94a3b8`) on `--bg-card (#0f1629)` → minimum 4.5:1 (check via DevTools contrast checker)
+- `.capabilities-desc` text same
+- `.persona-tab--active` (`--accent #00e599`) on `--bg (#060b18)` → minimum 3:1 for UI components
+
+- [ ] **Step 6: Mobile check (375px viewport)**
+
+In browser DevTools, switch to 375px width. Verify:
+- `CompatibilityStrip` pills wrap cleanly
+- `Capabilities` grid stacks to 1 column
+- Persona tabs scroll horizontally or wrap without overflow
+
+- [ ] **Step 7: Final commit**
+
+```bash
+git add -A
+git commit -m "chore(landing): final validation pass — P0+P1 Context Forge redesign complete"
+```
+
+---
+
+## Out of Scope (P2 — separate plan when ready)
+
+- Comparison table vs LeanCTX / other compressors
+- Section whitespace overhaul (all 11 sections → `--space-13`)
+- `rtk gain` leaderboard
+- Reducing 11 sections to 7-8
+- One-card-style audit pass on CloudWaitlist + ShareGain + FAQ
+- Reveal-on-scroll budget cap (1 per section)
diff --git a/docs/superpowers/plans/2026-05-12-landing-layout-redesign.md b/docs/superpowers/plans/2026-05-12-landing-layout-redesign.md
new file mode 100644
index 0000000..c27cee0
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-12-landing-layout-redesign.md
@@ -0,0 +1,551 @@
+# Landing Layout Redesign — Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the centered "AI template" landing layout with a full left-align editorial design — large section numbers, subtle bg/bg-card banding, 6-section structure, 5 components removed from render.
+
+**Architecture:** Modify shared CSS rules in `landing.css` for global alignment, then update each section component individually to add section numbers and remove Eyebrow references. Remove 5 components from `LandingPage.astro`. Delete orphan files.
+
+**Tech Stack:** Astro 5, CSS custom properties, TypeScript (slideshow.ts). No framework, no test suite — validation is `pnpm build` (0 errors) + browser visual check.
+
+---
+
+## File Map
+
+| File | Change |
+|------|--------|
+| `src/styles/landing.css` | Remove centering from `section h2` + `.section-sub`; add `.section-num`; reduce padding-block; remove bg-alt |
+| `src/components/pages/LandingPage.astro` | Remove 5 component imports + JSX |
+| `src/components/landing/Problem.astro` | Section 01: remove Eyebrow + icon blobs, add section-num, fix bg, left-align |
+| `src/components/landing/DemoSlideshow.astro` | Section 02: add section-num, trim to 4 slides, left-align tabs |
+| `src/scripts/slideshow.ts` | Kill autoplay (set isPaused = true always) |
+| `src/components/landing/Install.astro` | Section 03: remove Eyebrow, add section-num |
+| `src/components/landing/Cta.astro` | Remove dead viking CSS, fix headline weight, remove gradient-text class |
+| `src/pages/preview/index.astro` | Delete |
+| `src/scripts/reveal.ts` | Delete |
+
+---
+
+## Task 1: Global CSS — left-align + section-num
+
+**Files:**
+- Modify: `src/styles/landing.css` (lines ~267–286)
+
+- [ ] **Step 1: Replace `section h2` rule**
+
+Find and replace this block in `landing.css`:
+```css
+section h2 {
+ font-size: clamp(1.75rem, 4vw, 2.5rem);
+ font-weight: 800;
+ text-align: center;
+ letter-spacing: -0.025em;
+ margin-bottom: 20px;
+ color: var(--text-bright);
+}
+```
+With:
+```css
+section h2 {
+ font-size: clamp(1.8rem, 3.5vw, 2.5rem);
+ font-weight: 600;
+ text-align: left;
+ letter-spacing: -0.02em;
+ margin: 0 0 var(--space-4);
+ color: var(--text-bright);
+}
+```
+
+- [ ] **Step 2: Replace `.section-sub` rule**
+
+Find and replace:
+```css
+.section-sub {
+ text-align: center;
+ color: var(--text-muted);
+ font-size: 1.05rem;
+ max-width: 580px;
+ margin: 0 auto 52px;
+}
+```
+With:
+```css
+.section-sub {
+ text-align: left;
+ color: var(--text-muted);
+ font-size: 1.05rem;
+ max-width: 560px;
+ margin: 0 0 var(--space-8);
+}
+```
+
+- [ ] **Step 3: Reduce section padding and add `.section-num`**
+
+Find:
+```css
+section { padding-block: var(--space-13); }
+```
+Replace with:
+```css
+section { padding-block: var(--space-11); }
+
+.section-num {
+ font-family: var(--font-mono);
+ font-size: clamp(2rem, 4vw, 3rem);
+ font-weight: 700;
+ color: var(--border-light);
+ line-height: 1;
+ margin-bottom: var(--space-2);
+ user-select: none;
+}
+```
+
+- [ ] **Step 4: Verify build**
+
+```bash
+pnpm build 2>&1 | tail -5
+```
+Expected: `[build] Complete!` with 0 errors.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/styles/landing.css
+git commit -m "style(landing): left-align sections, add .section-num, tighten padding"
+```
+
+---
+
+## Task 2: LandingPage.astro — remove 5 components
+
+**Files:**
+- Modify: `src/components/pages/LandingPage.astro`
+
+- [ ] **Step 1: Remove imports**
+
+Find and delete these 5 import lines:
+```typescript
+import Capabilities from '../landing/Capabilities.astro'
+import Proof from '../landing/Proof.astro'
+import ToolComparison from '../landing/ToolComparison.astro'
+import CloudWaitlist from '../landing/CloudWaitlist.astro'
+import ShareGain from '../landing/ShareGain.astro'
+```
+
+- [ ] **Step 2: Remove JSX usages**
+
+Find and delete these 5 lines in the template:
+```astro
+
+
+
{t('problem.title', lang)}
+
{t('problem.sub', lang)}
+```
+With:
+```astro
+
+
01
+
{t('problem.title', lang)}
+
{t('problem.sub', lang)}
+```
+
+- [ ] **Step 3: Remove icon blobs from all 3 cards**
+
+In each `.problem-card`, delete the `
...
` block (the SVG icon container). There are 3 to remove — one per card (brain, clock, money).
+
+- [ ] **Step 4: Update scoped styles**
+
+In the `
+```
+
+- [ ] **Step 2: Start dev server and visual check**
+
+```bash
+pnpm dev
+```
+
+Open `http://localhost:4321/` and verify:
+- [ ] All section titles are left-aligned (not centered)
+- [ ] Section numbers 01 / 02 / 03 appear in muted mono above headings
+- [ ] Background banding: Hero (dark) → Problem (slightly lighter) → Demo (dark) → Install (lighter) → CTA (dark) → FAQ (lighter)
+- [ ] Problem cards have no icon blobs
+- [ ] Demo shows 4 tabs only, no auto-advance
+- [ ] CTA headline has accent color on second line, weight 600
+- [ ] No "Works with" duplication
+
+- [ ] **Step 3: Final build**
+
+```bash
+pnpm build 2>&1 | tail -5
+```
+Expected: `[build] Complete!` with 0 errors.
+
+- [ ] **Step 4: Final commit**
+
+```bash
+git add src/components/pages/LandingPage.astro
+git commit -m "feat(landing): finalize layout redesign — left-align, section numbers, 6-section structure"
+```
diff --git a/docs/superpowers/specs/2026-05-12-landing-layout-redesign.md b/docs/superpowers/specs/2026-05-12-landing-layout-redesign.md
new file mode 100644
index 0000000..bdecd81
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-12-landing-layout-redesign.md
@@ -0,0 +1,155 @@
+# Landing Layout Redesign — Design Spec
+**Date:** 2026-05-12
+**Branch:** feat/identity-redesign-v2
+**Status:** Approved, ready for implementation
+
+---
+
+## Context
+
+The current RTK landing page has a "AI template" aesthetic driven by three structural problems:
+1. Every section alternates `bg` / `bg-alt` — the classic generated-page pattern
+2. Too many sections stacked (11) — overwhelming scroll without clear hierarchy
+3. All content centered at 680px — no editorial width, no left-alignment
+
+The Identity Redesign v2 started with palette B (Slate dark) and two-column Hero. This spec defines the full layout system for the landing page and the content redistribution strategy.
+
+---
+
+## Decisions
+
+### 1. Layout direction
+**Full left-align** (Linear / Vercel reference)
+
+- All eyebrows, section numbers, headings, body text — left-aligned
+- `text-align: center` removed everywhere except the CTA section
+- Grids start from the left edge of `--max-w`, not centered within a narrower column
+- `--max-w` stays 1140px; text body capped at ~560px for readability; visuals (terminals, tables) run full width
+
+### 2. Section separation
+**Subtle bg / bg-card banding** — delta quasi invisible (`#0a0f1c` → `#0f1625`)
+
+- No `bg-alt` (`#0d1322`) — replaced by `bg-card` (`#0f1625`) when a section needs background contrast
+- Pattern: Hero on `bg`, Problem on `bg-card`, Demo on `bg`, Install on `bg-card`, CTA on `bg`, FAQ on `bg-card`
+- No `border-bottom` or `border-top` between sections — spacing alone defines rhythm within a band, the color shift does the rest
+- Sections lose `padding-block: var(--space-13)` — tighter at `var(--space-11)` / `var(--space-12)` max
+
+### 3. Section header treatment
+**Large muted number + H2** (editorial)
+
+```
+01 ← font-mono, ~2.5rem, color: var(--border-light)
+Section title here ← H2, font-weight 600, left-aligned
+Short lead text. ← max-width 560px, color: var(--text-muted)
+```
+
+- Number: `font-family: var(--font-mono)`, `font-size: clamp(2rem, 4vw, 3rem)`, `color: var(--border-light)`, `line-height: 1`, `margin-bottom: var(--space-2)`
+- H2: `font-size: clamp(1.8rem, 3.5vw, 2.5rem)`, `font-weight: 600`, `letter-spacing: -0.02em`, `margin: 0 0 var(--space-4)`
+- Lead: `font-size: 1.05rem`, `color: var(--text-muted)`, `max-width: 560px`, `margin: 0 0 var(--space-8)`
+- No eyebrow component above the number — the number IS the section marker
+
+---
+
+## Landing Page Structure
+
+**6 sections only** — strict order:
+
+| # | Section | Component | Background |
+|---|---------|-----------|------------|
+| — | Hero | `Hero.astro` | `var(--bg)` |
+| 01 | Problem | `Problem.astro` | `var(--bg-card)` |
+| 02 | Demo | `DemoSlideshow.astro` | `var(--bg)` |
+| 03 | Install | `Install.astro` | `var(--bg-card)` |
+| — | CTA | `Cta.astro` | `var(--bg)` |
+| — | FAQ | inline in LandingPage | `var(--bg-card)` |
+
+**Removed from landing render** (keep files, they move to subpages):
+- `CompatibilityStrip` — already removed (in Hero)
+- `Capabilities` — content folded into Problem lead text
+- `Proof` — moves to `/savings/`
+- `ToolComparison` — moves to `/vs/`
+- `CloudWaitlist` — moves to `/cloud/`
+- `ShareGain` — moves to `/savings/`
+
+---
+
+## Section-by-Section Design
+
+### Hero (already done ✅)
+Two-column: content left / terminal right. Stats 89% / 24.6M / {stars}. Compat strip below terminal. No changes needed.
+
+### Problem — section 01
+**Layout:** Section number + H2 left, then 3-column card grid full width.
+
+Cards: flat, `bg-elevated` background, left-aligned content inside. Each card:
+- Big stat in `var(--accent)` mono (e.g. `~900 tokens`)
+- Command in `
` tag
+- 1-2 sentences of explanation
+
+Remove the colored icon blobs (brain, clock, dollar) — they read "template". Replace with the stat number as the visual anchor.
+
+### Demo — section 02
+**Layout:** Section number + H2 left. Slideshow tabs left-aligned (not centered). Terminal panel full width.
+
+Reduce from 11 slides to 4: `cargo test`, `git status`, `find`, `git diff`. Kill the 7s auto-rotate (`slideshow.ts:38` — set interval to 0 or remove).
+
+### Install — section 03
+**Layout:** Two-column split — left: number + H2 + persona tabs; right: terminal with command.
+
+Removes the current centered block layout. Persona tabs become a vertical list on the left at mobile, horizontal at desktop.
+
+### CTA
+Centered exception — intentional contrast with the left-aligned rest of the page. Keep `min-height: 80vh`. Remove `cta-viking-bg` styles. Remove gradient headline — plain `var(--text-bright)` with one `var(--accent)` word.
+
+### FAQ
+Left-aligned questions, `` / `` pattern unchanged. No section number — the CTA acts as a visual break before FAQ, so FAQ is a utility section without a number marker.
+
+---
+
+## Content Redistribution (Phase 2)
+
+| Content | From | To | Notes |
+|---------|------|----|-------|
+| ToolComparison | landing | `/vs/` | Full comparison table, all AI tools |
+| Proof (screenshots) | landing | `/savings/` | Real-world rtk gain data |
+| ShareGain | landing | `/savings/` | Paste & share flow |
+| CloudWaitlist | landing | `/cloud/` | Already has product page |
+
+---
+
+## CSS Changes Required
+
+### `landing.css`
+- Remove all `text-align: center` from section rules (except `.cta-section`)
+- Remove `.section-inner > h2::after` (gradient underline)
+- Add `.section-num` utility class (large muted mono number)
+- Remove `.section-sub` max-width centering — replace with `max-width: 560px` left
+- Remove alternating `background` rules between sections
+- Remove `.reveal` and `.gradient-text` references (already done)
+
+### Component scoped styles
+Each component's `
-
-
+