feat: add infrastructure flow and official iconography

tests/browser/accessibility-axe.spec.ts

@@ -61,11 +61,11 @@ async function enterState(
       page.getByRole("button", { name: "Mute sound" }),
     ).toBeVisible();
   } else if (state === "static") {
+    await page.getByRole("button", { name: "Drive settings" }).click();
     await page.getByLabel("Quality control").selectOption("static");
-    await expect(
-      page.getByRole("button", { name: "Enable motion" }),
-    ).toBeVisible();
+    await expect(page.getByRole("status")).toContainText("Motion: static");
   } else if (state === "reduced-motion") {
+    await page.getByRole("button", { name: "Drive settings" }).click();
     await expect(page.getByRole("status")).toContainText(
       "reduced motion requested",
     );

tests/browser/no-javascript.spec.ts

@@ -130,7 +130,6 @@ const expectedVisibleTextSegments = (
     ...section('infrastructure', [
       content.infrastructure.title,
       content.infrastructure.summary,
-      ...content.infrastructure.bands.map((band) => band.title),
       content.infrastructure.title,
       ...content.infrastructure.bands.map(
         (band) => `${band.title}: ${band.summary}`,

tests/browser/responsive-layout.spec.ts

@@ -158,6 +158,35 @@ test('uses a stable tablet rhythm and a single readable mobile column with usabl
   await capture(page, testInfo, 'information-layer-mobile.png');
 });
 
+test('turns the infrastructure route from a horizontal trust flow into a readable mobile stack', async ({ page }, testInfo) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await loadInformationLayer(page);
+
+  const desktop = await page.locator('[data-testid="infrastructure-flow"] [data-infrastructure-node]').evaluateAll((nodes) =>
+    nodes.map((node) => {
+      const rect = node.getBoundingClientRect();
+      return { id: node.getAttribute('data-infrastructure-node'), left: rect.left, top: rect.top, bottom: rect.bottom, width: rect.width };
+    }),
+  );
+  expect(desktop.slice(0, 4).every((node) => Math.abs(node.top - desktop[0]!.top) <= 1)).toBe(true);
+  expect(desktop[4]!.top).toBeGreaterThanOrEqual(desktop[3]!.bottom);
+  expect(desktop.slice(0, 4).every((node, index, nodes) => index === 0 || node.left > nodes[index - 1]!.left)).toBe(true);
+  await capture(page, testInfo, 'infrastructure-flow-desktop.png');
+
+  await page.setViewportSize({ width: 320, height: 800 });
+  await loadInformationLayer(page);
+  const mobile = await page.locator('[data-testid="infrastructure-flow"] [data-infrastructure-node]').evaluateAll((nodes) =>
+    nodes.map((node) => {
+      const rect = node.getBoundingClientRect();
+      return { left: rect.left, top: rect.top, bottom: rect.bottom, width: rect.width };
+    }),
+  );
+  expect(mobile.every((node) => Math.abs(node.left - mobile[0]!.left) <= 1)).toBe(true);
+  expect(mobile.every((node) => node.width >= 200)).toBe(true);
+  expect(mobile.every((node, index, nodes) => index === 0 || node.top > nodes[index - 1]!.bottom)).toBe(true);
+  await capture(page, testInfo, 'infrastructure-flow-mobile.png');
+});
+
 test('keeps the compact HUD in one safe lower row without covering the road corridor', async ({ page }) => {
   for (const viewport of [
     { width: 320, height: 800 },