v3 Responsive — EN Homepage Reconcile 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: Reconcile www/v3/en/index.html to the structure of the now-responsive www/v3/de/index.html so the EN homepage is fully responsive — the last failing page in the all-pages harness.

Architecture: A structural diff (DE vs EN, text ignored) shows that 8 of EN's 9 sections are exactly DE in its pre-homepage-responsive state — every difference is one of the homepage plan's structural edits, all language-independent (class/style attributes, in-body <style> blocks). So those edits transfer verbatim. The 9th section, integration-orbit, genuinely differs: EN uses an older JS-animated .motion-canvas diagram (plus a 212-line inline <script>); DE uses a newer static, responsive .rings-* SVG diagram. The reconcile re-applies the homepage's structural edits to EN and ports DE's .rings-* orbit into EN (EN's English copy in the orbit's left column is already correct and is kept).

Tech Stack: Static HTML/CSS, vanilla JS. Playwright (Chromium) harness for verification.

Scope

This is Plan 3 of sub-project A (spec: docs/superpowers/specs/2026-05-14-v3-responsive-all-pages-design.md). After this plan the all-pages harness should be fully green (0 failures). The spec's "polish tier" section-by-section pass is a possible later plan, to be confirmed with the user.

en-only content note (spec's "en-only content checkpoint"): the only genuinely en-only content is EN's .motion-canvas orbit — an older, JS-animated implementation of the same "systems in orbit" concept. Reconciling to DE replaces it with DE's static, responsive .rings-* version (same concept, same node set, same English prose in the left column). EN's animated-canvas variant is superseded, not lost content. This was the intent of the user's "reconcile en to match de" decision; it is called out here per the spec.

Prerequisites

Worktree: /Users/maximilianbrandstaetter/Orcha/.claude/worktrees/website-v3-mobile-responsive, branch website-v3-mobile-responsive. Run all commands from here.

Local server: serves www/ at http://127.0.0.1:8123. Restart if down:

pkill -f "http.server 8123"; cd /Users/maximilianbrandstaetter/Orcha/.claude/worktrees/website-v3-mobile-responsive/www && (python3 -m http.server 8123 --bind 127.0.0.1 >/tmp/orcha-v3-www.log 2>&1 &)

Harness: www/v3/dev/screenshot.mjs, run from www/v3/dev/. Filter: node screenshot.mjs en-home.
Reference: the homepage plan docs/superpowers/plans/2026-05-14-homepage-mobile-responsive.md documents the exact edits this plan re-applies to EN. The structural diff confirmed EN's anchor strings are identical to DE's pre-responsive state.
responsive.css already defines all the classes used below (.case-grid, .security-split, .security-certs, .security-cert, .pricing-header, .pricing-factors, .home-footer-grid, .home-footer-bottom); product.css carries the shared responsive layer. Both are loaded by every page; EN just needs the responsive.css <link> added (Task 1).

File Structure

File	Status	Responsibility
`www/v3/en/index.html`	modify	All changes are in this one file: add the `responsive.css` link; re-apply the homepage structural edits to the 8 shared sections; port DE's `.rings-*` orbit (markup + in-body `<style>`), removing EN's `.motion-canvas` diagram + its inline `<script>`.

DE's www/v3/de/index.html is the read-only source for the orbit port.

Task 1: Add responsive.css link + misc structural edits

Files: Modify www/v3/en/index.html

Step 1: Link responsive.css

Find:

<link rel="stylesheet" href="../css/product.css?v=checklist">

Replace with:

<link rel="stylesheet" href="../css/product.css?v=checklist">
<link rel="stylesheet" href="../css/responsive.css?v=checklist">

Step 2: Remove inline padding from the #north-star section

Find: <section id="north-star" style="padding: 120px 0; background: var(--bg-3);"> Replace with: <section id="north-star" style="background: var(--bg-3);">

Step 3: Remove inline padding from the #support section

Find: <section id="support" style="padding: 120px 0;"> Replace with: <section id="support">

Step 4: Add the phone breakpoint to the #north-star in-body <style> block

Find (the end of the #north-star <style> block — the last rule of its @media (max-width: 780px) block, then </style>):

          .ns-fan-dests { height: auto; padding: 0; gap: 10px; }
        }
      </style>

Replace with:

          .ns-fan-dests { height: auto; padding: 0; gap: 10px; }
        }
        @media (max-width: 480px) {
          .ns-bignum { font-size: 60px; }
          .ns-card { padding: 24px 22px 20px; min-height: auto; }
          .ns-card-claim { font-size: 21px; }
          .ns-card--wide .ns-card-claim { font-size: 23px; }
          .ns-cal-row { gap: 6px; }
          .ns-cal-dot { width: 12px; height: 12px; }
        }
      </style>

Step 5: Remove the stray closing </div>s in the #agents section

Find:

      <!-- ============================================== -->

        </div>
      </div>
    </div>
  </section>

Replace with:

      <!-- ============================================== -->
    </div>
  </section>

Step 6: Verify structure

node -e "const c=require('fs').readFileSync('www/v3/en/index.html','utf8'); const o=(c.match(/<div\b/g)||[]).length, cl=(c.match(/<\/div>/g)||[]).length; console.log('div open',o,'close',cl,'delta',o-cl)"

The delta must be lower (closer to 0) by 2 than before this task — i.e. you removed 2 stray </div>s. (It will not be exactly 0 yet — the orbit section, fixed in Task 4, still has its own structure.) Then grep -c 'responsive.css' www/v3/en/index.html → 1.

Step 7: Commit

git add www/v3/en/index.html
git commit -m "feat(v3): EN homepage — link responsive.css + misc structural responsive edits"

Files: Modify www/v3/en/index.html

Step 1: #case testimonial carousel → class

Find: <div class="testimonial-carousel grid" data-interval="6000" style="grid-template-columns:1.1fr 0.9fr;gap:80px;align-items:start;"> Replace with: <div class="testimonial-carousel grid case-grid" data-interval="6000">

Step 2: #pricing header → class

Find: <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:56px;"> Replace with: <div class="pricing-header">

Step 3: #pricing factors grid → class

Find: <div class="grid" style="grid-template-columns:repeat(3,1fr);gap:16px;"> Replace with: <div class="grid pricing-factors">

Step 4: footer 5-col grid → class

Find: <div style="display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;border-top:1px solid color-mix(in oklab,var(--bg),transparent 78%);padding-top:40px;"> Replace with: <div class="home-footer-grid">

Step 5: footer bottom bar → class

Find: <div style="margin-top:40px;padding-top:24px;border-top:1px solid color-mix(in oklab,var(--bg),transparent 78%);display:flex;justify-content:space-between;font-size:12px;color:color-mix(in oklab,var(--bg),transparent 25%);"> Replace with: <div class="home-footer-bottom">

Step 6: Verify

grep -cF 'grid-template-columns:1.1fr 0.9fr' www/v3/en/index.html   # expect 0
grep -cF 'grid-template-columns:1.4fr 1fr 1fr 1fr 1fr' www/v3/en/index.html   # expect 0
grep -c 'class="pricing-header"\|class="grid pricing-factors"\|class="home-footer-grid"\|class="home-footer-bottom"\|case-grid' www/v3/en/index.html   # expect 5

Then cd www/v3/dev && node screenshot.mjs en-home — en-home may still fail (the orbit is Task 4) but the overflow at 320/375 should be smaller than the +256/+201px baseline. Open shots/en-home-768.png — desktop-ish layout intact.

Step 7: Commit

git add www/v3/en/index.html
git commit -m "feat(v3): EN homepage — make case/pricing/footer grids responsive"

Task 3: #security grid class swaps

Files: Modify www/v3/en/index.html

Step 1: #security split grid → class

Find: <div class="grid" style="grid-template-columns:1fr 1fr;gap:80px;align-items:start;"> Replace with: <div class="grid security-split">

Step 2: #security cert grid container → class

Find: <div class="grid" style="grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);"> Replace with: <div class="security-certs">

Step 3: #security 6 cert cells → class

Replace all occurrences (2 — cells 1 & 2) of: <div style="padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:140px;display:flex;flex-direction:column;justify-content:space-between;"> with: <div class="security-cert">

Replace all occurrences (2 — cells 4 & 5) of: <div style="padding:28px;border-right:1px solid var(--line);min-height:140px;display:flex;flex-direction:column;justify-content:space-between;"> with: <div class="security-cert">

Replace the single occurrence (cell 3) of: <div style="padding:28px;border-bottom:1px solid var(--line);min-height:140px;display:flex;flex-direction:column;justify-content:space-between;"> with: <div class="security-cert">

Replace the single occurrence (cell 6) of: <div style="padding:28px;min-height:140px;display:flex;flex-direction:column;justify-content:space-between;"> with: <div class="security-cert">

Step 4: Verify

grep -c '<div class="security-cert">' www/v3/en/index.html   # expect 6
grep -c 'padding:28px;border\|padding:28px;min-height:140px;display:flex' www/v3/en/index.html   # expect 0

Then cd www/v3/dev && node screenshot.mjs en-home — no new failures vs Task 2.

Step 5: Commit

git add www/v3/en/index.html
git commit -m "feat(v3): EN homepage — make security section responsive"

Task 4: Port DE's responsive `.rings-*` orbit into EN

This replaces EN's older JS-animated .motion-canvas orbit diagram with DE's static, responsive .rings-* SVG diagram. EN's orbit section's left column (the <h2>, <p class="lede">, and .motion-props block) is already correct English and is kept — only the right-column diagram, the orbit's in-body <style> block, and the now-unused inline <script> change. de/index.html is the read-only source.

Files: Modify www/v3/en/index.html (source: www/v3/de/index.html)

Step 1: Remove inline padding from EN's #integration-orbit section

In www/v3/en/index.html, find: <section id="integration-orbit" style="padding: 120px 0; background: var(--bg);"> Replace with: <section id="integration-orbit" style="background: var(--bg);">

Step 2: Replace EN's right-column diagram with DE's .rings-* diagram

In de/index.html, the orbit section's right column is the block <div class="rings-diagram-wrap"> … </div> — the sibling of the left-column <div> that contains .motion-props, inside <div class="motion-layout" …>. Read that exact block from de/index.html (it is language-neutral: SVG, positioned .rings-node tiles with brand names, ring labels FINANCE · ERP / BANKING / COMMS · STORAGE, hub Orcha / Orchestration).

In www/v3/en/index.html, find EN's right-column diagram block — <div class="motion-diagram-wrap"> … </div> (containing .motion-canvas-outer / .motion-canvas id="motionCanvas" / .motion-node tiles / .data-mote elements), the sibling of EN's .motion-props left column inside EN's <div class="motion-layout" …>. Replace EN's <div class="motion-diagram-wrap">…</div> block with DE's <div class="rings-diagram-wrap">…</div> block verbatim.

Step 3: Delete EN's orbit animation <script>

EN has a standalone inline <script> block immediately after the #integration-orbit </section> — it begins <script>\n(function () {\n var canvas = document.getElementById('motionCanvas'); and animates the now-removed canvas. Delete the entire <script> … </script> block (and the blank line around it). DE has no such script — confirm afterward that EN's remaining <script> tags match DE's set (chrome.js, hero.js, home-pipeline.js, testimonials.js).

Step 4: Replace EN's orbit <style> block with DE's

Both files have a near-bottom in-body <style> block beginning .motion-layout { . DE's version contains .motion-layout + the .rings-* rules (the responsive ones — .rings-canvas { width: min(600px, 92vw); … }, the @media tile-shrink rules, etc.). EN's version contains .motion-layout + the .motion-* rules. Read DE's entire <style>…</style> block (the one starting with .motion-layout {) and replace EN's entire corresponding <style>…</style> block with it verbatim.

Step 5: Verify

node -e "const c=require('fs').readFileSync('www/v3/en/index.html','utf8'); const o=(c.match(/<div\b/g)||[]).length, cl=(c.match(/<\/div>/g)||[]).length; console.log('div delta',o-cl)"

Expect div delta 0 (the file is now structurally balanced). Confirm no leftover motion-canvas / motionCanvas / data-mote references: grep -c 'motionCanvas\|motion-canvas\|data-mote' www/v3/en/index.html → 0. Then:

cd www/v3/dev && node screenshot.mjs en-home

Expected: en-home ok at all 5 widths. Open shots/en-home-375.png — the orbit diagram fits with all nodes visible (matching shots/de-home-375.png); open shots/en-home-1280.png — desktop orbit matches DE's.

Step 6: Commit

git add www/v3/en/index.html
git commit -m "feat(v3): EN homepage — port DE's responsive rings orbit"

Task 5: Full-sweep verification

Files: none (verification only — unless a fix is needed)

Step 1: Full 30-page harness sweep

cd /Users/maximilianbrandstaetter/Orcha/.claude/worktrees/website-v3-mobile-responsive/www/v3/dev && node screenshot.mjs

Expected: 0 overflow failures — every one of the 30 pages ok at all 5 widths. If any page fails, diagnose and fix before proceeding.

Step 2: Desktop + parity spot-check

Open shots/en-home-1280.png and compare to shots/de-home-1280.png — the EN homepage should now match the DE homepage structurally (same orbit, same section layout). Open shots/en-home-375.png and shots/en-home-320.png — every section responsive, no overflow, hamburger nav.

Step 3: Update the baseline record

Edit www/v3/dev/foundation-baseline.md — update it to record that the all-pages harness is fully green (0 failures) after the EN homepage reconcile. Commit:

git add www/v3/dev/foundation-baseline.md
git commit -m "docs(v3): all 30 v3 pages pass the responsive harness"

Self-Review

Checked against docs/superpowers/specs/2026-05-14-v3-responsive-all-pages-design.md:

Spec §Design.3 (EN homepage reconcile): Tasks 1-4 reconcile en/index.html to DE's responsive structure — the 8 shared sections via the homepage plan's structural edits (Tasks 1-3), the orbit via a port (Task 4). The spec's "en-only content checkpoint" is addressed in the Scope section's "en-only content note" — the only en-only content is the superseded animated orbit, and the user's brainstorming decision was explicitly "reconcile en to match de." ✔
Spec acceptance criteria (no horizontal overflow on all 30 pages): Task 5 Step 1 verifies the full sweep is green. ✔
Spec §Design.4 (section-page polish tier): explicitly out of scope here; flagged as a possible later plan in Scope. ✔

Placeholder scan: Tasks 1-3 have exact find/replace strings. Task 4 Steps 2 & 4 are "copy this exact, precisely-identified block from de/index.html verbatim" operations — the content is fully determined by the source file and the block boundaries are given by exact anchor classes; this is a port, not a placeholder. No "TBD"/"handle edge cases"/etc.

Type/name consistency: all swapped class names (case-grid, pricing-header, pricing-factors, home-footer-grid, home-footer-bottom, security-split, security-certs, security-cert) are defined in responsive.css (verified — they were created by the homepage plan). The orbit classes (rings-*, motion-layout, motion-props) come verbatim from de/index.html. EN's anchor strings were verified identical to DE's pre-responsive state via the structural diff. The north-star @media 480 block is byte-identical to the one in de/index.html.

v3 Responsive — EN Homepage Reconcile Implementation Plan

Scope

Prerequisites

File Structure

Task 1: Add responsive.css link + misc structural edits

Task 2: #case, #pricing, and footer grid class swaps

Task 3: #security grid class swaps

Task 4: Port DE's responsive .rings-* orbit into EN

Task 5: Full-sweep verification

Self-Review

Task 4: Port DE's responsive `.rings-*` orbit into EN