diff --git a/astro.config.mjs b/astro.config.mjs
index 66249c3..8681929 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -23,8 +23,8 @@ export default defineConfig({
 			description:
 				'Self-hosted sandboxes in your own AWS account: a virtual machine per workspace, snapshots with memory, rollback, and a diff of what changed.',
 			// The organization's own mark (spin-stack/brand): the tile on its navy in dark, and clear in light,
-			// where the tile would read as a sticker.
-			logo: { dark: './src/assets/logo.png', light: './src/assets/logo-light.png', alt: 'Spinbox' },
+			// where the tile would read as a sticker. No alt: the name is written beside it.
+			logo: { dark: './src/assets/logo.png', light: './src/assets/logo-light.png', alt: '' },
 			favicon: '/favicon.png',
 			social: [{ icon: 'github', label: 'GitHub', href: 'https://github.com/spin-stack' }],
 			customCss: ['./src/styles/brand-tokens.css', './src/styles/brand-starlight.css', './src/styles/custom.css'],
diff --git a/src/components/Answers.astro b/src/components/Answers.astro
new file mode 100644
index 0000000..6d1fd7b
--- /dev/null
+++ b/src/components/Answers.astro
@@ -0,0 +1,61 @@
+---
+// The straight answers - each a limit row of the status page - as a row of cards, an icon on
+// each. The list stays the page's Markdown, so the twin is the same list (src/lib/pages.ts drops
+// the tag); an icon per answer, in order, and a build that fails when the two counts differ.
+import { iconSVG, type IconName } from '../lib/icons';
+
+interface Props {
+	icons: IconName[];
+}
+const { icons } = Astro.props;
+const html = await Astro.slots.render('default');
+const items = html.match(/<li>/g)?.length ?? 0;
+if (items !== icons.length) throw new Error(`<Answers>: ${items} answers and ${icons.length} icons`);
+let n = 0;
+const drawn = html.replace(/<li>/g, () => `<li><span class="icon">${iconSVG(icons[n++])}</span>`);
+---
+
+<div class="answers" set:html={drawn} />
+
+<style>
+	.answers :global(ul) {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+		gap: 0.75rem;
+		padding: 0;
+		margin: 1.5rem 0 1rem;
+		list-style: none;
+	}
+	.answers :global(li) {
+		display: flex;
+		flex-direction: column;
+		gap: 0.6rem;
+		margin: 0;
+		padding: 1.1rem 1.1rem 1.2rem;
+		border: 1px solid var(--spin-border);
+		border-radius: var(--spin-radius);
+		background: var(--spin-surface);
+		color: var(--spin-muted);
+		font-size: var(--sl-text-sm);
+		transition: border-color var(--spin-duration) var(--spin-ease);
+	}
+	.answers :global(li:hover) {
+		border-color: var(--spin-border-strong);
+	}
+	.answers :global(li strong) {
+		display: block;
+		color: var(--sl-color-white);
+		font-family: var(--sl-font-mono);
+		font-size: var(--sl-text-base);
+		margin-bottom: 0.2rem;
+	}
+	.answers :global(.icon) {
+		display: inline-grid;
+		place-items: center;
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: var(--spin-radius);
+		color: var(--spin-label);
+		background: var(--spin-raised);
+	}
+</style>
diff --git a/src/components/BentoCard.astro b/src/components/BentoCard.astro
index b85ce0f..d46db19 100644
--- a/src/components/BentoCard.astro
+++ b/src/components/BentoCard.astro
@@ -53,16 +53,16 @@ const proof = kind === 'e2e' ? `e2e · ${what}` : kind === 'cli' ? `spin ${what}
 		flex-direction: column;
 		gap: 0.6rem;
 		padding: 1.4rem 1.4rem 1.2rem;
-		border-radius: 18px;
+		border-radius: var(--spin-radius-lg);
 		text-decoration: none;
 		color: var(--sl-color-gray-3);
 		background: color-mix(in srgb, var(--sl-color-gray-6) 70%, transparent);
 		border: 1px solid var(--sl-color-hairline-light);
 		overflow: hidden;
 		transition:
-			transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1),
-			border-color 300ms,
-			box-shadow 300ms;
+			transform var(--spin-duration) var(--spin-ease),
+			border-color var(--spin-duration) var(--spin-ease),
+			box-shadow var(--spin-duration) var(--spin-ease);
 	}
 	.card:hover,
 	.card:focus-visible {
@@ -86,7 +86,7 @@ const proof = kind === 'e2e' ? `e2e · ${what}` : kind === 'cli' ? `spin ${what}
 		place-items: center;
 		width: 2.6rem;
 		height: 2.6rem;
-		border-radius: 12px;
+		border-radius: var(--spin-radius);
 		color: var(--spin-label);
 		background: linear-gradient(135deg, color-mix(in srgb, var(--spin-brand-cyan) 18%, transparent), color-mix(in srgb, var(--spin-brand-blue) 18%, transparent));
 		border: 1px solid color-mix(in srgb, var(--spin-brand-cyan) 28%, transparent);
@@ -122,7 +122,7 @@ const proof = kind === 'e2e' ? `e2e · ${what}` : kind === 'cli' ? `spin ${what}
 		stroke-width: 1.5;
 	}
 	.ring-label {
-		font-size: 10px;
+		font-size: 11px;
 		fill: var(--sl-color-gray-3);
 		letter-spacing: 0.05em;
 	}
@@ -135,7 +135,7 @@ const proof = kind === 'e2e' ? `e2e · ${what}` : kind === 'cli' ? `spin ${what}
 	}
 	@media (prefers-reduced-motion: no-preference) {
 		.r3 {
-			animation: ring-breathe 3.2s ease-in-out infinite alternate;
+			animation: ring-breathe 1.6s ease-in-out 2 alternate;
 		}
 		@keyframes ring-breathe {
 			to {
diff --git a/src/components/Cta.astro b/src/components/Cta.astro
index 2da2c2b..84aaa6a 100644
--- a/src/components/Cta.astro
+++ b/src/components/Cta.astro
@@ -10,7 +10,7 @@ interface Props {
 const { title, links } = Astro.props;
 ---
 
-<section class="cta not-content">
+<section class="cta not-content spin-dark">
 	<div class="mesh" aria-hidden="true"></div>
 	<h2>{title}</h2>
 	<p><slot /></p>
@@ -32,17 +32,17 @@ const { title, links } = Astro.props;
 		overflow: hidden;
 		margin-block: 4rem 1rem;
 		padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
-		border-radius: 24px;
-		background: #0b1120;
-		color: #e6edf6;
+		border-radius: var(--spin-radius-lg);
+		background: var(--spin-page);
+		color: var(--spin-text);
 		text-align: center;
-		border: 1px solid #2a3a58;
+		border: 1px solid var(--spin-border);
 	}
 	.mesh {
 		position: absolute;
 		inset: -40%;
 		z-index: -1;
-		background: conic-gradient(from 180deg at 50% 50%, #0c3c84, #2f6be3, #27bfe8, #5fe3d6, #0c3c84);
+		background: conic-gradient(from 180deg at 50% 50%, var(--spin-brand-deep), var(--spin-brand-blue), var(--spin-brand-cyan), var(--spin-brand-mint), var(--spin-brand-deep));
 		filter: blur(70px);
 		opacity: 0.55;
 	}
@@ -53,12 +53,12 @@ const { title, links } = Astro.props;
 		font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
 		line-height: 1.1;
 		letter-spacing: -0.035em;
-		color: #fff;
+		color: var(--spin-brand-frost);
 	}
 	p {
 		margin: 1rem auto 2rem;
 		max-width: 40rem;
-		color: #c8d3e4;
+		color: var(--spin-text);
 		font-size: var(--sl-text-lg);
 	}
 	.links {
@@ -68,22 +68,12 @@ const { title, links } = Astro.props;
 		gap: 1rem;
 	}
 	.links :global(.sl-link-button.secondary) {
-		color: #fff;
-		border-color: rgb(255 255 255 / 0.4);
+		color: var(--spin-brand-frost);
+		border-color: var(--spin-border-strong);
 	}
 	.links :global(.sl-link-button.primary) {
-		background: #fff;
-		border-color: #fff;
-		color: #0b1120;
-	}
-	@media (prefers-reduced-motion: no-preference) {
-		.mesh {
-			animation: cta-spin 22s linear infinite;
-		}
-		@keyframes cta-spin {
-			to {
-				transform: rotate(1turn);
-			}
-		}
+		background: var(--spin-brand-frost);
+		border-color: var(--spin-brand-frost);
+		color: var(--spin-page);
 	}
 </style>
diff --git a/src/components/Head.astro b/src/components/Head.astro
index d62852a..32ae8d0 100644
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@@ -4,9 +4,17 @@
 // does not resolve.
 import Default from '@astrojs/starlight/components/Head.astro';
 import { twinPath } from '../lib/twin';
+// The faces the first screen sets, fetched with the page: found late, through the stylesheet, a
+// face swaps in after the first paint and the notice and the hero move with it (a layout shift of
+// 0.23 on a phone, measured).
+import sans400 from '@fontsource/ibm-plex-sans/files/ibm-plex-sans-latin-400-normal.woff2?url';
+import sans600 from '@fontsource/ibm-plex-sans/files/ibm-plex-sans-latin-600-normal.woff2?url';
+import mono400 from '@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-400-normal.woff2?url';
+import mono600 from '@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-600-normal.woff2?url';
 
 const base = import.meta.env.BASE_URL.replace(/\/$/, '');
 ---
 
 <Default />
 <link rel="alternate" type="text/markdown" href={`${base}${twinPath(Astro.locals.starlightRoute.id)}`} />
+{[sans400, sans600, mono400, mono600].map((href) => <link rel="preload" as="font" type="font/woff2" href={href} crossorigin />)}
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 7b98f04..ae9847c 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -95,14 +95,15 @@ const rest = cut < 0 ? '' : title.slice(cut + 2);
 		margin: 0;
 	}
 	.hl {
-		background: linear-gradient(100deg, var(--spin-brand-cyan), var(--spin-brand-blue) 55%, var(--spin-brand-mint));
+		/* The mark's lights that may be text on the navy: cyan and mint, never its blue. */
+		background: linear-gradient(100deg, var(--spin-brand-cyan), var(--spin-brand-mint) 55%, var(--spin-brand-cyan));
 		background-size: 200% 100%;
 		-webkit-background-clip: text;
 		background-clip: text;
 		color: transparent;
 	}
 	:global([data-theme='light']) .hl {
-		background-image: linear-gradient(100deg, #0a6fa3, var(--spin-brand-blue) 55%, var(--spin-brand-deep));
+		background-image: linear-gradient(100deg, var(--spin-accent), var(--spin-brand-deep) 55%, var(--spin-accent));
 	}
 	.tagline {
 		font-size: var(--sl-text-lg);
@@ -138,7 +139,7 @@ const rest = cut < 0 ? '' : title.slice(cut + 2);
 	}
 	@media (prefers-reduced-motion: no-preference) {
 		.copy > * {
-			animation: hero-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
+			animation: hero-rise var(--spin-duration-draw) var(--spin-ease) both;
 		}
 		.copy > :nth-child(2) {
 			animation-delay: 80ms;
@@ -149,14 +150,13 @@ const rest = cut < 0 ? '' : title.slice(cut + 2);
 		.copy > :nth-child(4) {
 			animation-delay: 240ms;
 		}
+		/* Once each (palette.toml's [motion]): the light crosses the title, the dot pulses three
+		   times, and both stay as they end. */
 		.hl {
-			animation: hero-sheen 8s ease-in-out infinite alternate;
+			animation: hero-sheen 2.4s var(--spin-ease) 400ms both;
 		}
 		.dot {
-			animation: hero-pulse 2.4s ease-out infinite;
-		}
-		.backdrop {
-			animation: hero-drift 18s ease-in-out infinite alternate;
+			animation: hero-pulse 1.6s ease-out 3;
 		}
 		@keyframes hero-rise {
 			from {
@@ -175,10 +175,5 @@ const rest = cut < 0 ? '' : title.slice(cut + 2);
 				box-shadow: 0 0 0 0.6rem transparent;
 			}
 		}
-		@keyframes hero-drift {
-			to {
-				transform: translate3d(-2%, 3%, 0) scale(1.04);
-			}
-		}
 	}
 </style>
diff --git a/src/components/Icon.astro b/src/components/Icon.astro
index 2cce070..a259a10 100644
--- a/src/components/Icon.astro
+++ b/src/components/Icon.astro
@@ -1,23 +1,11 @@
 ---
-// The landing page's few icons, drawn here (24-unit strokes in the current colour) so the site
-// loads nothing from anyone else.
-const paths = {
-	machine: 'M4 5h16v10H4zM8 19h8M12 15v4M7 9l2 2-2 2M11 13h4',
-	memory: 'M6 4h12v16H6zM9 8h6M9 12h6M9 16h3M3 8h3M3 12h3M3 16h3M18 8h3M18 12h3M18 16h3',
-	diff: 'M7 4v10M7 18v2M4 7h6M17 4v16M14 12h6M12 2v20',
-	shield: 'M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6zM9 12l2 2 4-4',
-	key: 'M14 10a4 4 0 1 0-1.2 2.8L20 20M17 17l2-2M15 15l1.5-1.5',
-	agent: 'M12 3v3M7 7h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3zM9 12h.01M15 12h.01M9 16h6',
-	cloud: 'M7 18a5 5 0 0 1-.6-10A6 6 0 0 1 18 9a4.5 4.5 0 0 1-.5 9zM12 11v5M10 14l2 2 2-2',
-	move: 'M4 12h16M16 8l4 4-4 4M8 8l-4 4 4 4',
-	moon: 'M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z',
-} as const;
+// One of the landing page's icons (src/lib/icons.ts).
+import { iconSVG, type IconName } from '../lib/icons';
+
 interface Props {
-	name: keyof typeof paths;
+	name: IconName;
 }
 const { name } = Astro.props;
 ---
 
-<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-	<path d={paths[name]}></path>
-</svg>
+<Fragment set:html={iconSVG(name)} />
diff --git a/src/components/LayerStack.astro b/src/components/LayerStack.astro
index 90583bd..6479d51 100644
--- a/src/components/LayerStack.astro
+++ b/src/components/LayerStack.astro
@@ -90,7 +90,7 @@ const layers = [
 	   machine writes; then what a diff and a restore do with them. */
 	@media (prefers-reduced-motion: no-preference) {
 		.layer {
-			animation: ls-drop 650ms cubic-bezier(0.2, 0.8, 0.25, 1.15) both;
+			animation: ls-drop var(--spin-duration-draw) var(--spin-ease) both;
 			animation-delay: calc(150ms + var(--i) * 180ms);
 		}
 		.verb .bracket {
@@ -104,13 +104,13 @@ const layers = [
 		}
 		.live {
 			animation:
-				ls-write 1.6s linear infinite,
-				ls-fade 400ms ease-out both;
+				ls-write 1.6s linear 3,
+				ls-fade var(--spin-duration-slow) ease-out both;
 		}
 		.live-top {
 			animation:
-				ls-write 1.6s linear infinite,
-				ls-glow 2.4s ease-in-out infinite alternate;
+				ls-write 1.6s linear 3,
+				ls-glow 2.4s ease-in-out 2 alternate;
 		}
 		@keyframes ls-drop {
 			from {
diff --git a/src/components/Stats.astro b/src/components/Stats.astro
index b532ad3..26765e0 100644
--- a/src/components/Stats.astro
+++ b/src/components/Stats.astro
@@ -61,7 +61,7 @@ const stats = [
 		grid-template-columns: repeat(2, 1fr);
 		gap: 1px;
 		margin-block: 1.5rem 1rem;
-		border-radius: 18px;
+		border-radius: var(--spin-radius-lg);
 		overflow: hidden;
 		background: var(--sl-color-hairline-light);
 		border: 1px solid var(--sl-color-hairline-light);
@@ -85,11 +85,16 @@ const stats = [
 		line-height: 1;
 		letter-spacing: -0.04em;
 		font-variant-numeric: tabular-nums;
-		background: linear-gradient(120deg, var(--spin-brand-cyan), var(--spin-brand-blue));
+		/* Cyan to mint on the navy; on white the accent to the mark's base, which hold AA where the
+		   mark's cyan is 2:1. */
+		background: linear-gradient(120deg, var(--spin-brand-cyan), var(--spin-brand-mint));
 		-webkit-background-clip: text;
 		background-clip: text;
 		color: transparent;
 	}
+	:global([data-theme='light']) .n {
+		background-image: linear-gradient(120deg, var(--spin-accent), var(--spin-brand-deep));
+	}
 	.label {
 		color: var(--sl-color-white);
 		font-weight: 600;
diff --git a/src/components/Story.astro b/src/components/Story.astro
index 80d8377..8a81d97 100644
--- a/src/components/Story.astro
+++ b/src/components/Story.astro
@@ -38,6 +38,7 @@ const screen = steps
 			'</span>',
 	)
 	.join('');
+const plain = esc(steps.map((s) => [...s.commands.map((c) => `$ ${c}`), ...stepOutput(s)].join('\n')).join('\n\n'));
 ---
 
 <section class="story not-content" data-story>
@@ -61,14 +62,18 @@ const screen = steps
 			))
 		}
 	</ol>
-	<div class="term">
+	<div class="term spin-dark">
 		<div class="chrome">
-			<span class="lights" aria-hidden="true"><i /><i /><i /></span>
 			<span class="name">demo — spin</span>
-			<button type="button" class="copy" data-copy={all}>Copy commands</button>
+			<button type="button" class="ctl" data-skip hidden>Skip</button>
+			<button type="button" class="ctl" data-replay hidden>Replay</button>
+			<button type="button" class="ctl" data-copy={all}>Copy commands</button>
 		</div>
-		<pre class="screen" aria-label="The commands and what the diff printed" set:html={screen + '<span class="caret" aria-hidden="true"></span>'} />
+		<pre class="screen" tabindex="0" aria-label="The commands and what the diff printed" set:html={screen + '<span class="caret" aria-hidden="true"></span>'} />
 	</div>
+	<!-- What the terminal types, whole, for a screen reader: the typed one is half written for most
+	     of a minute. -->
+	<pre class="sr-only" set:html={plain} />
 </section>
 
 <script>
@@ -98,7 +103,8 @@ const screen = steps
 				t.replaceWith(frag);
 			}
 		}
-		root.classList.add('armed');
+		const skip = root.querySelector<HTMLButtonElement>('[data-skip]')!;
+		const replay = root.querySelector<HTMLButtonElement>('[data-replay]')!;
 		let run = 0;
 
 		const select = (i: number) =>
@@ -108,8 +114,28 @@ const screen = steps
 			});
 		const show = (el: Element) => el.classList.add('on');
 		const reset = (el: Element) => el.classList.remove('on');
+		const stopBars = () => buttons.forEach((x) => x.querySelector('.bar')?.classList.remove('fill'));
+		// The session whole and still: where a play ends, what Skip and reduced motion show, and
+		// the only state the screen is read in (the typed one is the sr-only copy's).
+		function whole() {
+			run++;
+			stopBars();
+			select(chunks.length - 1);
+			root.querySelectorAll('.line, .ch').forEach(show);
+			screen.removeAttribute('aria-hidden');
+			screen.tabIndex = 0;
+			screen.scrollTop = screen.scrollHeight;
+			skip.hidden = true;
+			replay.hidden = false;
+		}
 
+		// It plays once, from the step asked for to the last, and stops on the whole session:
+		// nothing on the page moves on its own for longer than that (WCAG 2.2.2), and Skip ends it.
 		async function play(i: number, id: number) {
+			screen.setAttribute('aria-hidden', 'true');
+			screen.removeAttribute('tabindex');
+			skip.hidden = false;
+			replay.hidden = true;
 			select(i);
 			chunks.forEach((c, j) => {
 				const lines = c.querySelectorAll('.line, .ch');
@@ -126,41 +152,62 @@ const screen = steps
 					for (const ch of line.querySelectorAll('.ch')) {
 						if (id !== run) return;
 						show(ch);
-						if (!still) await sleep(CHAR_MS);
+						await sleep(CHAR_MS);
 					}
-					if (!still) await sleep(280);
-				} else if (!still) await sleep(OUT_MS);
+					await sleep(280);
+				} else await sleep(OUT_MS);
 			}
 			screen.scrollTop = screen.scrollHeight;
-			if (still) return;
+			if (i === chunks.length - 1) {
+				if (id === run) whole();
+				return;
+			}
 			bar.style.transitionDuration = `${HOLD_MS}ms`;
 			bar.classList.add('fill');
 			await sleep(HOLD_MS);
 			bar.style.transitionDuration = '0ms';
 			bar.classList.remove('fill');
-			if (id !== run) return;
-			if (i === chunks.length - 1) await sleep(1200);
-			if (id === run) play((i + 1) % chunks.length, id);
+			if (id === run) play(i + 1, id);
 		}
 
-		buttons.forEach((b, i) =>
-			b.addEventListener('click', () => {
-				run++;
-				buttons.forEach((x) => x.querySelector('.bar')?.classList.remove('fill'));
-				play(i, run);
-			}),
-		);
-		root.querySelector<HTMLButtonElement>('.copy')?.addEventListener('click', async (e) => {
+		const begin = (i: number) => {
+			run++;
+			stopBars();
+			if (still) whole();
+			else play(i, run);
+		};
+		buttons.forEach((b, i) => b.addEventListener('click', () => begin(i)));
+		skip.addEventListener('click', () => {
+			whole();
+			replay.focus();
+		});
+		replay.addEventListener('click', () => {
+			begin(0);
+			skip.focus();
+		});
+		root.querySelector<HTMLButtonElement>('[data-copy]')?.addEventListener('click', async (e) => {
 			const b = e.currentTarget as HTMLButtonElement;
-			await navigator.clipboard.writeText(b.dataset.copy ?? '');
-			b.textContent = 'Copied';
+			const said = await navigator.clipboard.writeText(b.dataset.copy ?? '').then(
+				() => 'Copied',
+				() => 'Select and copy',
+			);
+			b.textContent = said;
 			setTimeout(() => (b.textContent = 'Copy commands'), 1600);
 		});
+		root.classList.add('armed');
+		if (still) {
+			whole();
+			continue;
+		}
+		select(0);
+		screen.setAttribute('aria-hidden', 'true');
+		screen.removeAttribute('tabindex');
+		skip.hidden = false;
 		const start = new IntersectionObserver(
 			(entries) => {
 				if (!entries.some((e) => e.isIntersecting)) return;
 				start.disconnect();
-				play(0, run);
+				begin(0);
 			},
 			{ threshold: 0.3 },
 		);
@@ -199,6 +246,8 @@ const screen = steps
 		position: relative;
 		margin: 0;
 	}
+	/* Every step's claim is always there: the one being played is marked, not the only one shown,
+	   so the list keeps its height while the terminal plays. */
 	.step {
 		all: unset;
 		box-sizing: border-box;
@@ -207,33 +256,33 @@ const screen = steps
 		grid-template-columns: auto 1fr;
 		gap: 1rem;
 		width: 100%;
+		min-height: var(--spin-target-touch);
 		padding: 1rem 1.1rem 1.1rem;
-		border-radius: 14px;
+		border-radius: var(--spin-radius);
 		border: 1px solid transparent;
 		cursor: pointer;
 		overflow: hidden;
 		transition:
-			background 250ms,
-			border-color 250ms;
+			background var(--spin-duration) var(--spin-ease),
+			border-color var(--spin-duration) var(--spin-ease);
 	}
 	.step:hover {
-		background: color-mix(in srgb, var(--sl-color-gray-6) 60%, transparent);
+		background: var(--spin-accent-hover);
 	}
 	.step:focus-visible {
 		outline: 2px solid var(--sl-color-accent);
 		outline-offset: 2px;
 	}
 	.step[aria-pressed='true'] {
-		background: color-mix(in srgb, var(--sl-color-gray-6) 85%, transparent);
-		border-color: color-mix(in srgb, var(--sl-color-accent) 40%, transparent);
-		box-shadow: 0 10px 40px -18px color-mix(in srgb, var(--spin-brand-blue) 80%, transparent);
+		background: var(--spin-surface);
+		border-color: var(--spin-border-strong);
 	}
 	.num {
 		font-family: var(--sl-font-mono);
-		font-size: 0.85rem;
-		color: var(--sl-color-gray-4);
+		font-size: 0.875rem;
+		color: var(--spin-muted);
 		padding-top: 0.15rem;
-		transition: color 250ms;
+		transition: color var(--spin-duration) var(--spin-ease);
 	}
 	.step[aria-pressed='true'] .num,
 	.step.done .num {
@@ -248,21 +297,17 @@ const screen = steps
 		font-size: 0.75rem;
 		letter-spacing: 0.12em;
 		text-transform: uppercase;
-		color: var(--sl-color-gray-3);
+		color: var(--spin-muted);
 	}
 	.title {
-		font-size: 1.15rem;
+		font-size: 1.125rem;
 		font-weight: 600;
 		color: var(--sl-color-white);
+		padding-right: 6.5rem;
 	}
 	.claim {
-		color: var(--sl-color-gray-3);
+		color: var(--spin-muted);
 		font-size: var(--sl-text-sm);
-		display: none;
-	}
-	.step[aria-pressed='true'] .claim,
-	.story:not(.armed) .claim {
-		display: block;
 	}
 	.bar {
 		position: absolute;
@@ -270,7 +315,7 @@ const screen = steps
 		bottom: 0;
 		height: 2px;
 		width: 0;
-		background: linear-gradient(90deg, var(--spin-brand-cyan), var(--spin-brand-mint));
+		background: var(--spin-accent);
 		transition-property: width;
 		transition-timing-function: linear;
 	}
@@ -280,31 +325,26 @@ const screen = steps
 	.proof {
 		position: absolute;
 		right: 1.1rem;
-		top: 1rem;
+		top: 0.75rem;
+		display: inline-flex;
+		align-items: center;
+		min-height: var(--spin-target);
 		font-size: 0.75rem;
 		font-family: var(--sl-font-mono);
-		color: var(--sl-color-gray-4);
-		text-decoration: none;
-		opacity: 0;
-		transition: opacity 200ms;
-	}
-	li:has(.step[aria-pressed='true']) .proof,
-	.story:not(.armed) .proof {
-		opacity: 1;
+		color: var(--spin-accent-text);
 	}
 	.proof:hover {
-		color: var(--sl-color-accent-high);
+		color: var(--sl-color-white);
 	}
 
-	/* The terminal: a window of the brand's navy in either theme, lit from behind. */
+	/* The terminal: the brand's dark roles in either theme (.spin-dark), its edge lit in the mark's
+	   colours. */
 	.term {
 		position: relative;
-		border-radius: 16px;
-		background: #0b1120;
-		border: 1px solid #2a3a58;
-		box-shadow:
-			0 30px 80px -30px color-mix(in srgb, var(--spin-brand-blue) 75%, transparent),
-			0 0 0 1px rgb(255 255 255 / 0.03) inset;
+		border-radius: var(--spin-radius-lg);
+		background: var(--spin-page);
+		border: 1px solid var(--spin-border);
+		box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--spin-brand-blue) 60%, transparent);
 		overflow: hidden;
 		color-scheme: dark;
 	}
@@ -321,105 +361,101 @@ const screen = steps
 		-webkit-mask-composite: xor;
 		mask-composite: exclude;
 		pointer-events: none;
-		opacity: 0.8;
 	}
 	.chrome {
 		display: flex;
 		align-items: center;
-		gap: 0.75rem;
-		padding: 0.7rem 1rem;
-		border-bottom: 1px solid #1d2a44;
-		background: #0e1628;
+		gap: 0.5rem;
+		padding: 0.5rem 0.75rem 0.5rem 1rem;
+		border-bottom: 1px solid var(--spin-border);
+		background: var(--spin-surface);
 		font-family: var(--sl-font-mono);
-		font-size: 0.8rem;
-		color: #9aa9c2;
-	}
-	.lights {
-		display: inline-flex;
-		gap: 0.4rem;
-	}
-	.lights i {
-		width: 0.7rem;
-		height: 0.7rem;
-		border-radius: 50%;
-		background: #33435f;
-	}
-	.lights i:first-child {
-		background: #f57ab4;
-	}
-	.lights i:nth-child(2) {
-		background: #ffc857;
-	}
-	.lights i:nth-child(3) {
-		background: #3ddc97;
+		font-size: 0.75rem;
+		color: var(--spin-muted);
 	}
 	.name {
 		flex: 1;
-		text-align: center;
 	}
-	.copy {
+	.ctl {
 		all: unset;
+		box-sizing: border-box;
+		min-height: var(--spin-target);
 		cursor: pointer;
-		padding: 0.2rem 0.6rem;
-		border-radius: 6px;
-		border: 1px solid #33435f;
-		color: #c8d3e4;
-		font-size: 0.75rem;
+		padding: 0.25rem 0.6rem;
+		border-radius: var(--spin-radius-sm);
+		border: 1px solid var(--spin-border);
+		color: var(--spin-text);
+		transition: border-color var(--spin-duration-fast) var(--spin-ease);
 	}
-	.copy:hover {
-		border-color: #27bfe8;
-		color: #fff;
+	.ctl[hidden] {
+		display: none;
+	}
+	.ctl:hover {
+		border-color: var(--spin-accent);
 	}
-	.copy:focus-visible {
-		outline: 2px solid #27bfe8;
+	.ctl:focus-visible {
+		outline: 2px solid var(--spin-accent);
+		outline-offset: 1px;
 	}
+	@media (pointer: coarse) {
+		.ctl {
+			min-height: var(--spin-target-touch);
+		}
+	}
+	/* A fixed height, so the page under it stays put while it types; the end scrolls into view. */
 	.screen {
 		margin: 0;
 		padding: 1.1rem 1.25rem 1.4rem;
-		min-height: 19rem;
-		max-height: 24rem;
+		height: 24rem;
 		overflow: auto;
 		font-family: var(--sl-font-mono);
-		font-size: 0.86rem;
+		font-size: 0.875rem;
 		line-height: 1.75;
-		color: #e6edf6;
-		background:
-			radial-gradient(60% 50% at 100% 0%, rgb(39 191 232 / 0.08), transparent 70%),
-			radial-gradient(50% 60% at 0% 100%, rgb(95 227 214 / 0.06), transparent 70%);
+		color: var(--spin-text);
+		background: var(--spin-page);
 		white-space: pre-wrap;
 		word-break: break-word;
 	}
+	.screen:focus-visible {
+		outline: 2px solid var(--spin-accent);
+		outline-offset: -2px;
+	}
 	.screen :global(.prompt) {
-		color: #5fe3d6;
+		color: var(--spin-muted);
 		user-select: none;
 	}
 	.screen :global(.prog) {
-		color: #27bfe8;
+		color: var(--spin-accent);
 		font-weight: 500;
 	}
+	/* A flag wraps whole: a hyphen is a break, and a phone split --wait after its first dash. */
 	.screen :global(.flag) {
-		color: #87d6ef;
+		color: var(--spin-label);
+		white-space: nowrap;
 	}
 	.screen :global(.str) {
-		color: #ffc857;
+		color: var(--spin-warning);
 	}
 	.screen :global(.ph) {
-		color: #b3a5ff;
+		color: var(--spin-muted);
+		font-style: italic;
 	}
 	.screen :global(.out) {
-		color: #c8d3e4;
+		color: var(--spin-text);
 	}
-	.screen :global(.out[data-change='A'] .kind) {
-		color: #3ddc97;
+	/* A change's kind in the colour of what it did to the file, and its letter, so it reads
+	   without the colour: added, modified, deleted. */
+	.screen :global(.out[data-change] .kind) {
 		font-weight: 600;
 	}
+	.screen :global(.out[data-change='A'] .kind) {
+		color: var(--spin-success);
+	}
 	.screen :global(.out[data-change='M'] .kind) {
-		color: #ffc857;
-		font-weight: 600;
+		color: var(--spin-warning);
 	}
 	.screen :global(.out[data-change='D'] .kind) {
-		color: #f57ab4;
-		font-weight: 600;
+		color: var(--spin-error);
 	}
 	.screen :global(.chunk + .chunk)::before {
 		content: '\A';
@@ -447,17 +483,6 @@ const screen = steps
 		width: 0.55em;
 		height: 1.1em;
 		vertical-align: text-bottom;
-		background: #5fe3d6;
-		animation: caret 1s step-end infinite;
-	}
-	@keyframes caret {
-		50% {
-			opacity: 0;
-		}
-	}
-	@media (prefers-reduced-motion: reduce) {
-		.armed :global(.caret) {
-			animation: none;
-		}
+		background: var(--spin-label);
 	}
 </style>
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
index 98a4a1f..3348fde 100644
--- a/src/content/docs/index.mdx
+++ b/src/content/docs/index.mdx
@@ -6,14 +6,15 @@ hero:
   title: A virtual machine per workspace. A snapshot before, a diff after.
   tagline: Sandboxes for people and agents that run in your own AWS account. Take a snapshot with the memory of the running processes, see exactly which files changed, and roll back. A workspace's network stays closed until you open it.
   actions:
-    - text: Evaluate
-      link: overview/
-      icon: right-arrow
     - text: Install on AWS
       link: aws/overview/
+      icon: right-arrow
+    - text: Evaluate
+      link: overview/
       variant: minimal
 ---
 
+import Answers from '../../components/Answers.astro';
 import Bento from '../../components/Bento.astro';
 import BentoCard from '../../components/BentoCard.astro';
 import Cta from '../../components/Cta.astro';
@@ -62,15 +63,19 @@ A workspace nobody uses is suspended with its processes where they are, after as
 
 ## Straight answers
 
+<Answers icons={['cloud', 'chip', 'kernel', 'nogpu', 'region']}>
+
 - **AWS only.** One OpenTofu module installs Spinbox in your account. There is no hosted version.
 - **x86-64 only.** Runners are x86-64 machines with nested virtualization.
 - **Linux guests only.** A workspace boots the kernel Spinbox provides.
 - **No GPUs.** There is no way to ask for a runner of a particular kind.
 - **One region, one control plane.** An installation lives in one AWS region.
 
+</Answers>
+
 Each answer is a limit row of the [status page](/reference/status/), held to the code by a test.
 The rest are on [Limitations](/overview/limitations/).
 
-<Cta title="Sandboxes you own, from the first snapshot." links={[{ text: 'Evaluate', href: 'overview/', variant: 'primary' }, { text: 'Install on AWS', href: 'aws/overview/' }, { text: 'Quickstart', href: 'quickstart/' }, { text: 'For agents', href: 'use/agents/' }]}>
+<Cta title="Sandboxes you own, from the first snapshot." links={[{ text: 'Install on AWS', href: 'aws/overview/', variant: 'primary' }, { text: 'Evaluate', href: 'overview/' }, { text: 'Quickstart', href: 'quickstart/' }, { text: 'For agents', href: 'use/agents/' }]}>
 Read what it is for, what it costs to run, and how to install it.
 </Cta>
diff --git a/src/lib/icons.ts b/src/lib/icons.ts
new file mode 100644
index 0000000..0e0b6aa
--- /dev/null
+++ b/src/lib/icons.ts
@@ -0,0 +1,23 @@
+// The landing page's few icons, drawn here (24-unit strokes in the current colour) so the site
+// loads nothing from anyone else. Icon.astro draws one; Answers.astro puts one on each answer.
+export const icons = {
+	machine: 'M4 5h16v10H4zM8 19h8M12 15v4M7 9l2 2-2 2M11 13h4',
+	memory: 'M6 4h12v16H6zM9 8h6M9 12h6M9 16h3M3 8h3M3 12h3M3 16h3M18 8h3M18 12h3M18 16h3',
+	diff: 'M7 4v10M7 18v2M4 7h6M17 4v16M14 12h6M12 2v20',
+	shield: 'M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6zM9 12l2 2 4-4',
+	key: 'M14 10a4 4 0 1 0-1.2 2.8L20 20M17 17l2-2M15 15l1.5-1.5',
+	agent: 'M12 3v3M7 7h10a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3v-6a3 3 0 0 1 3-3zM9 12h.01M15 12h.01M9 16h6',
+	cloud: 'M7 18a5 5 0 0 1-.6-10A6 6 0 0 1 18 9a4.5 4.5 0 0 1-.5 9zM12 11v5M10 14l2 2 2-2',
+	move: 'M4 12h16M16 8l4 4-4 4M8 8l-4 4 4 4',
+	moon: 'M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z',
+	chip: 'M7 7h10v10H7zM10 10h4v4h-4zM9 3v4M15 3v4M9 17v4M15 17v4M3 9h4M3 15h4M17 9h4M17 15h4',
+	kernel: 'M4 5h16v14H4zM7 10l3 2-3 2M12 15h5',
+	nogpu: 'M3 8h18v9H3zM7 11h3v3H7zM13 11h4M13 14h4M4 3l16 18',
+	region: 'M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12zM12 6.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5z',
+} as const;
+
+export type IconName = keyof typeof icons;
+
+export function iconSVG(name: IconName): string {
+	return `<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${icons[name]}"></path></svg>`;
+}
diff --git a/src/lib/pages.ts b/src/lib/pages.ts
index 3e382bc..96f3b59 100644
--- a/src/lib/pages.ts
+++ b/src/lib/pages.ts
@@ -92,6 +92,7 @@ export function toMarkdown(d: Doc, base: string): string {
 	body = body.replace(/<Story\s*\/>/g, () => storyMarkdown());
 	body = body.replace(/<Stats\s*\/>/g, statusLine);
 	body = body.replace(/<\/?Bento>/g, '');
+	body = body.replace(/<Answers\s[^>]*>|<\/Answers>/g, '');
 	body = body.replace(/<BentoCard\s+([^>]*?)>\n?/g, (_, attrs: string) => {
 		const a = (k: string) => attrs.match(new RegExp(`${k}="([^"]*)"`))?.[1];
 		const feature = a('feature');
diff --git a/src/styles/brand-tokens.css b/src/styles/brand-tokens.css
index 89472e6..6ccfcd5 100644
--- a/src/styles/brand-tokens.css
+++ b/src/styles/brand-tokens.css
@@ -1,5 +1,5 @@
 /* Written by `task palette` from palette.toml (spin-stack/brand). Edit palette.toml, not this file. */
-:root {
+:root, .spin-dark {
 	--spin-accent: #27BFE8;
 	--spin-accent-text: #27BFE8;
 	--spin-border: #33435F;
@@ -60,4 +60,9 @@
 	--spin-radius-lg: 12px;
 	--spin-target: 24px;
 	--spin-target-touch: 44px;
+	--spin-duration-fast: 120ms;
+	--spin-duration: 200ms;
+	--spin-duration-slow: 400ms;
+	--spin-duration-draw: 700ms;
+	--spin-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
 }
diff --git a/src/styles/custom.css b/src/styles/custom.css
index 82c046c..675fd83 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -36,30 +36,18 @@ a[data-feature='built'] {
 	text-underline-offset: 0.2em;
 }
 
-/* The straight answers sit in a grid. */
 [data-has-hero] .sl-markdown-content .sl-heading-wrapper > a {
 	display: none;
 }
-[data-has-hero] .sl-markdown-content .sl-heading-wrapper:has(> h2) + ul {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
-	gap: 0.75rem;
-	padding: 0;
-	list-style: none;
-}
-[data-has-hero] .sl-markdown-content .sl-heading-wrapper:has(> h2) + ul > li {
-	margin: 0;
-	padding: 1rem 1.1rem;
-	border: 1px solid var(--sl-color-hairline-light);
-	border-radius: 0.5rem;
-	background: var(--sl-color-gray-6);
-	color: var(--sl-color-gray-2);
-}
 .status-counts {
 	font-family: var(--sl-font-mono);
 	font-size: var(--sl-text-sm);
 	color: var(--sl-color-gray-3);
 }
+/* The release and the commit on code's ground, where gray-3 is under AA. */
+.status-counts code {
+	color: var(--sl-color-gray-2);
+}
 
 /* The sidebar's current page: the accent as a tint, not a block of it. */
 .sidebar-content a[aria-current='page'],
@@ -115,9 +103,10 @@ h1#_top {
 
 /* The header as glass over the page, on every page. */
 header.header {
-	background-color: color-mix(in srgb, var(--sl-color-bg-nav) 72%, transparent);
+	background-color: color-mix(in srgb, var(--sl-color-bg-nav) 88%, transparent);
+	/* Unprefixed only: with the -webkit- copy after it, the build's minifier kept that one and
+	   dropped this, and Chrome draws no glass for -webkit-. */
 	backdrop-filter: saturate(160%) blur(14px);
-	-webkit-backdrop-filter: saturate(160%) blur(14px);
 }
 
 /* The landing page: its sections a little wider and further apart, their headings large, and
@@ -156,7 +145,7 @@ header.header {
 @keyframes rise-in {
 	from {
 		opacity: 0;
-		transform: translateY(32px) scale(0.985);
+		transform: translateY(32px);
 	}
 }