diff --git a/src/lib/components/organisms/ChatCard.svelte b/src/lib/components/organisms/ChatCard.svelte
index 7664f65..10b12a7 100644
--- a/src/lib/components/organisms/ChatCard.svelte
+++ b/src/lib/components/organisms/ChatCard.svelte
@@ -1,20 +1,18 @@
 <script lang="ts">
 	import { reveal } from '$lib/utils/reveal';
+
+	// Twelve bars, tallest in the middle: a voice note that looks like speech.
+	const bars = [3, 6, 10, 14, 9, 16, 12, 18, 8, 13, 6, 4];
 </script>
 
 <!--
-	The whole product in one card, after the three features that make it up:
-	who you are matched with, two messages, a correction, and translation one
-	tap away.
+	The whole product in two cards, after the three features that make it up.
+	Left: who you are matched with, two messages, a correction, and translation
+	one tap away. Right: a translated message, a voice note, a photo, and the
+	streak and tokens that come from showing up.
 -->
-<section class="wrap">
-	<div
-		class="card"
-		role="img"
-		aria-label="A LangX chat: two messages, then a correction"
-		data-reveal
-		use:reveal={{ y: 40 }}
-	>
+<section class="wrap" data-reveal-children use:reveal={{ children: true, stagger: 0.12, y: 40 }}>
+	<div class="card" role="img" aria-label="A LangX chat: two messages, then a correction">
 		<div class="who">
 			<span class="avatar" aria-hidden="true">M</span>
 			<span class="meta">
@@ -24,7 +22,7 @@
 		</div>
 		<p class="bubble theirs">¡Hola! Yo aprendo inglés hace dos años 😄</p>
 		<p class="bubble mine">Estudio español hace dos mes</p>
-		<div class="correction">
+		<div class="note correction">
 			<span class="label">Correction</span>
 			<span class="text">hace dos <s>mes</s> <strong>meses</strong> ✓</span>
 		</div>
@@ -46,15 +44,57 @@
 			Translate
 		</span>
 	</div>
+
+	<div
+		class="card"
+		role="img"
+		aria-label="A LangX chat: a translated message, a voice note, a photo, and a streak"
+	>
+		<div class="who">
+			<span class="avatar green" aria-hidden="true">K</span>
+			<span class="meta">
+				<span class="name">Kenji</span>
+				<span class="langs">speaks Japanese · learning English</span>
+			</span>
+		</div>
+		<p class="bubble theirs">6時に駅で会おう！</p>
+		<div class="note translation">
+			<span class="label">Translation</span>
+			<span class="text">Let's meet at the station at 6!</span>
+		</div>
+		<div class="bubble mine voice">
+			<span class="play" aria-hidden="true">
+				<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"
+					><path d="M7 4v16l13-8z" /></svg
+				>
+			</span>
+			<span class="wave" aria-hidden="true">
+				{#each bars as h}<i style="height:{h}px" />{/each}
+			</span>
+			<span class="length">0:07</span>
+		</div>
+		<div class="bubble theirs photo">
+			<span class="picture" aria-hidden="true">☕</span>
+			<span class="caption">駅前のカフェ</span>
+		</div>
+		<div class="earned">
+			<span>🔥 12-day streak</span>
+			<span>+20 tokens today</span>
+		</div>
+	</div>
 </section>
 
 <style lang="scss">
 	@import '$lib/scss/breakpoints.scss';
 
 	.wrap {
-		max-width: 400px;
+		max-width: 840px;
 		margin: 0 auto;
 		padding: 110px 0 0;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		gap: 24px;
+		align-items: start;
 
 		@include for-phone-only {
 			padding-top: 72px;
@@ -91,6 +131,11 @@
 		font-weight: 800;
 		font-size: 0.875rem;
 		color: var(--color--accent-shade);
+
+		&.green {
+			background: var(--color--success-tint);
+			color: var(--color--success);
+		}
 	}
 
 	.meta {
@@ -131,11 +176,9 @@
 		border-bottom-right-radius: 4px;
 	}
 
-	.correction {
-		align-self: flex-end;
+	.note {
 		max-width: 85%;
-		border: 2px solid var(--color--success);
-		background: var(--color--success-tint);
+		border: 2px solid;
 		border-radius: var(--radius-lg);
 		padding: 8px 14px;
 		display: flex;
@@ -148,18 +191,34 @@
 		font-weight: 700;
 		letter-spacing: 0.05em;
 		text-transform: uppercase;
-		color: var(--color--success);
 	}
 
 	.text {
 		font-size: 0.875rem;
+	}
+
+	.correction {
+		align-self: flex-end;
+		border-color: var(--color--success);
+		background: var(--color--success-tint);
+
+		.label,
+		strong {
+			color: var(--color--success);
+		}
 
 		s {
 			color: var(--color--text-tertiary);
 		}
+	}
 
-		strong {
-			color: var(--color--success);
+	.translation {
+		align-self: flex-start;
+		border-color: var(--color--accent-tint);
+		background: var(--color--accent-tint);
+
+		.label {
+			color: var(--color--accent-shade);
 		}
 	}
 
@@ -173,4 +232,82 @@
 		font-weight: 600;
 		color: var(--color--accent);
 	}
+
+	// A voice note: play, the shape of the sound, how long it is.
+	.voice {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 8px 14px 8px 10px;
+	}
+
+	.play {
+		width: 26px;
+		height: 26px;
+		border-radius: 50%;
+		background: rgba(255, 255, 255, 0.25);
+		display: grid;
+		place-items: center;
+	}
+
+	.wave {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+		height: 18px;
+
+		i {
+			display: block;
+			width: 3px;
+			border-radius: 2px;
+			background: currentColor;
+			opacity: 0.9;
+		}
+	}
+
+	.length {
+		font-size: 0.75rem;
+		font-variant-numeric: tabular-nums;
+		opacity: 0.85;
+	}
+
+	// A photo: the tile stands in for the picture, the caption is the message.
+	.photo {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+		padding: 6px 6px 8px;
+	}
+
+	.picture {
+		width: 150px;
+		height: 96px;
+		border-radius: 12px;
+		background: linear-gradient(135deg, var(--color--accent-tint), var(--color--success-tint));
+		display: grid;
+		place-items: center;
+		font-size: 1.75rem;
+	}
+
+	.caption {
+		padding: 0 8px;
+		font-size: 0.875rem;
+	}
+
+	.earned {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+		padding-top: 12px;
+		border-top: 1px solid var(--color--border);
+
+		span {
+			font-size: 0.75rem;
+			font-weight: 700;
+			padding: 4px 10px;
+			border-radius: var(--radius-pill);
+			background: var(--color--muted);
+			color: var(--color--text-shade);
+		}
+	}
 </style>
diff --git a/src/lib/components/organisms/NotFound.svelte b/src/lib/components/organisms/NotFound.svelte
new file mode 100644
index 0000000..785dfe2
--- /dev/null
+++ b/src/lib/components/organisms/NotFound.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+	import Button from '$lib/components/atoms/Button.svelte';
+
+	/** The HTTP status; anything but 404 is "something went wrong". */
+	export let status = 404;
+
+	$: missing = status === 404;
+</script>
+
+<div class="missing">
+	<div class="copy">
+		<span class="eyebrow">{status}</span>
+		<h1>{missing ? 'Nothing here, sorry.' : 'Something went wrong.'}</h1>
+		<p class="lede">
+			{missing
+				? 'The page moved or never existed. The homepage has everything that does.'
+				: 'Reload the page, or start again from the homepage.'}
+		</p>
+		<Button href="/" variant="secondary">Back to the start</Button>
+	</div>
+	{#if missing}
+		<!-- The one chat that fits a missing page: a question, a slip, a correction. -->
+		<div class="chat" aria-hidden="true">
+			<span class="bubble theirs">¿Dónde está la página?</span>
+			<span class="bubble mine">No sé, aquí no esta 🤷</span>
+			<span class="note"><s>esta</s> <strong>está</strong> ✓</span>
+		</div>
+	{/if}
+</div>
+
+<style lang="scss">
+	.missing {
+		min-height: 60vh;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 48px;
+		padding: var(--space-2xl) 0;
+	}
+
+	.copy {
+		flex: 1 1 320px;
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 12px;
+
+		h1 {
+			margin: 0;
+			max-width: 16ch;
+		}
+
+		.lede {
+			margin: 0 0 12px;
+		}
+	}
+
+	.chat {
+		flex: 0 1 340px;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	.bubble {
+		max-width: 85%;
+		padding: 10px 14px;
+		border-radius: var(--radius-lg);
+		font-size: 0.9375rem;
+		line-height: 1.45;
+	}
+
+	.theirs {
+		align-self: flex-start;
+		background: var(--color--muted);
+		border-bottom-left-radius: 4px;
+	}
+
+	.mine {
+		align-self: flex-end;
+		background: var(--color--accent);
+		color: var(--color--accent-contrast);
+		border-bottom-right-radius: 4px;
+	}
+
+	.note {
+		align-self: flex-end;
+		border: 2px solid var(--color--success);
+		background: var(--color--success-tint);
+		border-radius: var(--radius-lg);
+		padding: 8px 14px;
+		font-size: 0.875rem;
+
+		s {
+			color: var(--color--text-tertiary);
+		}
+
+		strong {
+			color: var(--color--success);
+		}
+	}
+</style>
diff --git a/src/lib/components/organisms/PageHeader.svelte b/src/lib/components/organisms/PageHeader.svelte
index 1248b71..3336323 100644
--- a/src/lib/components/organisms/PageHeader.svelte
+++ b/src/lib/components/organisms/PageHeader.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
+	/** The small blue word above the title, the way the homepage sections open. */
+	export let eyebrow: string | undefined = undefined;
 	export let title: string;
 	export let lede: string | undefined = undefined;
 </script>
 
 <header class="page-header">
+	{#if eyebrow}<span class="eyebrow">{eyebrow}</span>{/if}
 	<h1>{title}</h1>
 	{#if lede}<p class="lede">{lede}</p>{/if}
 </header>
@@ -14,7 +17,7 @@
 	.page-header {
 		display: flex;
 		flex-direction: column;
-		gap: var(--space-sm);
+		gap: 12px;
 		padding: var(--space-2xl) 0 var(--space-xl);
 
 		@include for-phone-only {
@@ -22,7 +25,14 @@
 		}
 
 		h1 {
+			margin: 0;
 			max-width: 20ch;
 		}
+
+		.lede {
+			margin: 0;
+			font-size: 1.0625rem;
+			line-height: 1.65;
+		}
 	}
 </style>
diff --git a/src/lib/components/organisms/PlanCards.svelte b/src/lib/components/organisms/PlanCards.svelte
index bfdf715..1f0dc41 100644
--- a/src/lib/components/organisms/PlanCards.svelte
+++ b/src/lib/components/organisms/PlanCards.svelte
@@ -1,15 +1,23 @@
 <script lang="ts">
 	import { plans, planNotes } from '$lib/data/plans';
 	import { reveal } from '$lib/utils/reveal';
+
+	/**
+	 * `detailed` is the plans page: the notes under each point are shown, and
+	 * the section title is left to the page header above.
+	 */
+	export let detailed = false;
 </script>
 
 <!-- Three cards from plans.ts, so a limit that changes there changes here. -->
-<section id="plans" class="plans">
-	<header class="head" data-reveal use:reveal>
-		<span class="eyebrow">Plans</span>
-		<h2>Free is a real plan, not a trial</h2>
-		<p>Each tier only lists what's new. Prices are set per region and shown in the app.</p>
-	</header>
+<section id="plans" class="plans" class:detailed>
+	{#if !detailed}
+		<header class="head" data-reveal use:reveal>
+			<span class="eyebrow">Plans</span>
+			<h2>Free is a real plan, not a trial</h2>
+			<p>Each tier only lists what's new. Prices are set per region and shown in the app.</p>
+		</header>
+	{/if}
 
 	<div class="grid" data-reveal-children use:reveal={{ children: true, stagger: 0.1 }}>
 		{#each plans as plan}
@@ -21,8 +29,11 @@
 				<ul class="rows" role="list">
 					{#each plan.points as point}
 						<li>
-							{point.label}{#if point.pending}
-								<span class="soon">Coming soon</span>{/if}
+							<span class="label">
+								{point.label}{#if point.pending}
+									<span class="soon">Coming soon</span>{/if}
+							</span>
+							{#if detailed && point.note}<small>{point.note}</small>{/if}
 						</li>
 					{/each}
 				</ul>
@@ -42,6 +53,14 @@
 		@include for-phone-only {
 			padding-top: 72px;
 		}
+
+		&.detailed {
+			padding-top: 0;
+
+			.grid {
+				margin-top: 0;
+			}
+		}
 	}
 
 	.head {
@@ -118,6 +137,15 @@
 		padding: 10px 0;
 		font-size: 0.9375rem;
 		line-height: 1.5;
+		display: flex;
+		flex-direction: column;
+		gap: 3px;
+	}
+
+	small {
+		font-size: 0.8125rem;
+		line-height: 1.45;
+		color: var(--color--text-shade);
 	}
 
 	.soon {
diff --git a/src/lib/components/organisms/PlanUsageCard.svelte b/src/lib/components/organisms/PlanUsageCard.svelte
new file mode 100644
index 0000000..3cfca3c
--- /dev/null
+++ b/src/lib/components/organisms/PlanUsageCard.svelte
@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { reveal } from '$lib/utils/reveal';
+
+	// What a Fluent day looks like inside the app. The 300 is Fluent's
+	// translation cap in `data/plans.ts`; the 12 is a morning's use.
+	const used = 12;
+	const cap = 300;
+</script>
+
+<div
+	class="card"
+	role="img"
+	aria-label="A Fluent account's day: unlimited chats, 12 of 300 translations used, two languages each way"
+	data-reveal
+	use:reveal={{ y: 40 }}
+>
+	<div class="head">
+		<span class="plan">Fluent</span>
+		<span class="since">your plan · since March</span>
+	</div>
+	<ul class="rows" role="list">
+		<li>
+			<span class="k">New conversations today</span>
+			<span class="v">Unlimited</span>
+		</li>
+		<li>
+			<span class="k">Translations today</span>
+			<span class="v tabular">{used} of {cap}</span>
+			<span class="bar" aria-hidden="true"><i style="width:{(used / cap) * 100}%" /></span>
+		</li>
+		<li>
+			<span class="k">Learning</span>
+			<span class="chips" aria-hidden="true"><span>Español</span><span>日本語</span></span>
+		</li>
+		<li>
+			<span class="k">Native</span>
+			<span class="chips" aria-hidden="true"><span>English</span><span>Türkçe</span></span>
+		</li>
+		<li>
+			<span class="k">Filters</span>
+			<span class="v">country · age · level · gender · city</span>
+		</li>
+	</ul>
+</div>
+
+<style lang="scss">
+	.card {
+		background: var(--color--surface);
+		border: 2px solid var(--color--accent);
+		border-radius: var(--radius-xl);
+		padding: 24px;
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.head {
+		display: flex;
+		align-items: baseline;
+		gap: 10px;
+		padding-bottom: 12px;
+		border-bottom: 1px solid var(--color--border);
+	}
+
+	.plan {
+		font-family: var(--font--title);
+		font-weight: 900;
+		font-size: 1.25rem;
+		color: var(--color--accent-shade);
+	}
+
+	.since {
+		font-size: 0.75rem;
+		color: var(--color--text-shade);
+	}
+
+	li {
+		padding: 12px 0;
+		border-bottom: 1px solid var(--color--border);
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 6px 12px;
+
+		&:last-child {
+			border-bottom: 0;
+			padding-bottom: 0;
+		}
+	}
+
+	.k {
+		flex: 1 1 auto;
+		font-size: 0.875rem;
+		color: var(--color--text-shade);
+	}
+
+	.v {
+		font-family: var(--font--title);
+		font-weight: 800;
+		font-size: 0.9375rem;
+	}
+
+	.bar {
+		flex: 1 0 100%;
+		height: 6px;
+		border-radius: var(--radius-pill);
+		background: var(--color--muted);
+		overflow: hidden;
+
+		i {
+			display: block;
+			height: 100%;
+			border-radius: inherit;
+			background: var(--color--accent);
+		}
+	}
+
+	.chips {
+		display: flex;
+		gap: 6px;
+
+		span {
+			font-family: var(--font--title);
+			font-weight: 800;
+			font-size: 0.8125rem;
+			padding: 3px 10px;
+			border-radius: var(--radius-pill);
+			border: 1px solid var(--color--border);
+		}
+	}
+</style>
diff --git a/src/lib/components/organisms/Pricing.svelte b/src/lib/components/organisms/Pricing.svelte
index 378e3e0..8840719 100644
--- a/src/lib/components/organisms/Pricing.svelte
+++ b/src/lib/components/organisms/Pricing.svelte
@@ -1,172 +1,18 @@
 <script lang="ts">
-	import { plans, planNotes } from '$lib/data/plans';
+	import PlanCards from '$lib/components/organisms/PlanCards.svelte';
 	import AppStores from '$lib/components/molecules/AppStores.svelte';
-	import PhoneFrame from '$lib/components/phone/PhoneFrame.svelte';
-	import PaywallScreen from '$lib/components/phone/PaywallScreen.svelte';
-	import UiIcon from '$lib/components/atoms/UiIcon.svelte';
 	import { ownsPrimary } from '$lib/stores/cta';
 </script>
 
-<section id="pricing" class="pricing">
-	<div class="plans">
-		{#each plans as plan}
-			<article class="plan">
-				<header>
-					<h2>{plan.name}</h2>
-					<p class="tagline">{plan.tagline}</p>
-				</header>
-				<ul class="rows" role="list">
-					{#each plan.points as point}
-						<li>
-							<UiIcon name="check" size={16} strokeWidth={3} />
-							<div class="point">
-								<span class="label">
-									{point.label}
-									{#if point.pending}<em>Coming soon</em>{/if}
-								</span>
-								{#if point.note}<small>{point.note}</small>{/if}
-							</div>
-						</li>
-					{/each}
-				</ul>
-			</article>
-		{/each}
+<!-- The homepage's three cards with their notes shown, and the one yellow button. -->
+<PlanCards detailed />
 
-		<div class="fine">
-			{#each planNotes as note}
-				<p>{note}</p>
-			{/each}
-		</div>
-
-		<div class="cta" use:ownsPrimary>
-			<AppStores primary size="lg" />
-		</div>
-	</div>
-
-	<div class="device">
-		<div class="sticky">
-			<PhoneFrame
-				label="The plans screen in the app: Fluent and Polyglot benefits, with the price shown per region"
-			>
-				<PaywallScreen />
-			</PhoneFrame>
-		</div>
-	</div>
-</section>
+<div class="cta" use:ownsPrimary>
+	<AppStores primary size="lg" />
+</div>
 
 <style lang="scss">
-	@import '$lib/scss/breakpoints.scss';
-
-	.pricing {
-		display: grid;
-		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
-		gap: var(--space-2xl);
-		align-items: start;
-		padding-bottom: var(--space-2xl);
-
-		@include for-tablet-portrait-down {
-			grid-template-columns: 1fr;
-			gap: var(--space-xl);
-		}
-	}
-
-	.plans {
-		display: flex;
-		flex-direction: column;
-		border-top: 1px solid var(--color--border);
-	}
-
-	.plan {
-		padding: var(--space-lg) 0;
-		border-bottom: 1px solid var(--color--border);
-
-		h2 {
-			font-size: 1.75rem;
-		}
-	}
-
-	.tagline {
-		margin: 4px 0 var(--space-sm);
-		font-size: 1rem;
-		color: var(--color--text-shade);
-	}
-
-	.rows li {
-		display: flex;
-		gap: 12px;
-		padding: 11px 0;
-		color: var(--color--accent);
-
-		:global(svg) {
-			margin-top: 4px;
-		}
-	}
-
-	.point {
-		display: flex;
-		flex-direction: column;
-		gap: 3px;
-		color: var(--color--text);
-		font-size: 1rem;
-		line-height: 1.45;
-	}
-
-	.label em {
-		font-style: normal;
-		font-size: 0.6875rem;
-		font-weight: 700;
-		text-transform: uppercase;
-		letter-spacing: 0.04em;
-		color: var(--color--text-quiet);
-		margin-left: 6px;
-		white-space: nowrap;
-	}
-
-	small {
-		font-size: 0.875rem;
-		line-height: 1.45;
-		color: var(--color--text-shade);
-	}
-
-	.fine {
-		display: flex;
-		flex-direction: column;
-		gap: 6px;
-		padding: var(--space-md) 0;
-		font-size: 0.875rem;
-		color: var(--color--text-quiet);
-		max-width: 62ch;
-
-		p {
-			margin: 0;
-		}
-	}
-
 	.cta {
-		padding: var(--space-xs) 0 0;
-	}
-
-	.device {
-		--phone-zoom: 0.8;
-		display: flex;
-		justify-content: center;
-
-		@include for-tablet-portrait-down {
-			justify-content: flex-start;
-			--phone-zoom: 0.72;
-		}
-
-		@include for-phone-only {
-			--phone-zoom: 0.66;
-		}
-	}
-
-	.sticky {
-		position: sticky;
-		top: calc(var(--header-height) + 24px);
-
-		@include for-tablet-portrait-down {
-			position: static;
-		}
+		padding: var(--space-lg) 0 var(--space-2xl);
 	}
 </style>
diff --git a/src/lib/components/organisms/RestoreCard.svelte b/src/lib/components/organisms/RestoreCard.svelte
new file mode 100644
index 0000000..1930d80
--- /dev/null
+++ b/src/lib/components/organisms/RestoreCard.svelte
@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { legacyTokenDivisor, welcomeBackBonus } from '$lib/data/token';
+	import { reveal } from '$lib/utils/reveal';
+
+	/** What a returning v1 user sees. The 20 carried-over tokens are a demo balance. */
+	const carried = 20;
+</script>
+
+<div
+	class="card"
+	role="img"
+	aria-label="The welcome-back screen: your handle, imported conversations, converted tokens and a frozen streak"
+	data-reveal
+	use:reveal={{ y: 40 }}
+>
+	<div class="hello">
+		<span class="wave" aria-hidden="true">👋</span>
+		<span class="title">Welcome back</span>
+		<span class="sub">Your v1 account moved with you. Here's what returned.</span>
+	</div>
+	<ul class="rows" role="list">
+		<li>
+			<span class="glyph" aria-hidden="true">@</span>
+			<span class="text">
+				<span class="k">@sofia is still yours</span>
+				<span class="d">Handles carried over. Nobody took it.</span>
+			</span>
+		</li>
+		<li>
+			<span class="glyph" aria-hidden="true">💬</span>
+			<span class="text">
+				<span class="k">12 conversations imported</span>
+				<span class="d">Full history, both sides.</span>
+			</span>
+		</li>
+		<li>
+			<span class="glyph" aria-hidden="true">🪙</span>
+			<span class="text">
+				<span class="k">{carried + welcomeBackBonus} tokens</span>
+				<span class="d">
+					{carried} carried over at the new rate (÷{legacyTokenDivisor}), plus a {welcomeBackBonus}-token
+					welcome bonus.
+				</span>
+			</span>
+		</li>
+		<li>
+			<span class="glyph" aria-hidden="true">🔥</span>
+			<span class="text">
+				<span class="k">34-day streak, frozen</span>
+				<span class="d">Restore it with tokens whenever you like.</span>
+			</span>
+		</li>
+	</ul>
+	<span class="go" aria-hidden="true">Start exploring</span>
+</div>
+
+<style lang="scss">
+	.card {
+		background: var(--color--surface);
+		border: 2px solid var(--color--border);
+		border-radius: var(--radius-xl);
+		padding: 24px;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.hello {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		text-align: center;
+		gap: 6px;
+		padding-bottom: 12px;
+	}
+
+	.wave {
+		font-size: 2.5rem;
+		line-height: 1;
+	}
+
+	.title {
+		font-family: var(--font--title);
+		font-weight: 900;
+		font-size: 1.375rem;
+		margin-top: 6px;
+	}
+
+	.sub {
+		font-size: 0.875rem;
+		line-height: 1.5;
+		color: var(--color--text-shade);
+		max-width: 30ch;
+	}
+
+	li {
+		display: flex;
+		gap: 12px;
+		padding: 12px 0;
+		border-top: 1px solid var(--color--border);
+	}
+
+	.glyph {
+		flex: 0 0 24px;
+		font-size: 1rem;
+		font-family: var(--font--title);
+		font-weight: 800;
+		color: var(--color--accent);
+	}
+
+	.text {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+
+	.k {
+		font-family: var(--font--title);
+		font-weight: 800;
+		font-size: 0.9375rem;
+	}
+
+	.d {
+		font-size: 0.8125rem;
+		line-height: 1.45;
+		color: var(--color--text-shade);
+	}
+
+	// Looks like the app's yellow button; it is a picture of one.
+	.go {
+		margin-top: 8px;
+		text-align: center;
+		padding: 14px;
+		border-radius: var(--radius-lg);
+		background: var(--color--primary);
+		color: var(--color--on-primary);
+		box-shadow: 0 4px 0 var(--color--primary-shade);
+		font-family: var(--font--title);
+		font-weight: 800;
+		font-size: 0.875rem;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+	}
+</style>
diff --git a/src/lib/components/organisms/WelcomeBack.svelte b/src/lib/components/organisms/WelcomeBack.svelte
index 7ff40bb..6849a12 100644
--- a/src/lib/components/organisms/WelcomeBack.svelte
+++ b/src/lib/components/organisms/WelcomeBack.svelte
@@ -1,8 +1,7 @@
 <script lang="ts">
 	import { legacyTokenDivisor, welcomeBackBonus } from '$lib/data/token';
 	import AppStores from '$lib/components/molecules/AppStores.svelte';
-	import PhoneFrame from '$lib/components/phone/PhoneFrame.svelte';
-	import WelcomeBackScreen from '$lib/components/phone/WelcomeBackScreen.svelte';
+	import RestoreCard from '$lib/components/organisms/RestoreCard.svelte';
 	import { ownsPrimary } from '$lib/stores/cta';
 </script>
 
@@ -104,13 +103,9 @@
 		</div>
 	</div>
 
-	<div class="device">
+	<div class="aside">
 		<div class="sticky">
-			<PhoneFrame
-				label="The welcome-back screen: your handle, imported conversations, converted tokens and a frozen streak"
-			>
-				<WelcomeBackScreen />
-			</PhoneFrame>
+			<RestoreCard />
 		</div>
 	</div>
 </section>
@@ -195,24 +190,16 @@
 		padding: var(--space-md) 0 0;
 	}
 
-	.device {
-		--phone-zoom: 0.8;
+	.aside {
 		display: flex;
 		justify-content: center;
-
-		@include for-tablet-portrait-down {
-			justify-content: flex-start;
-			--phone-zoom: 0.72;
-		}
-
-		@include for-phone-only {
-			--phone-zoom: 0.66;
-		}
 	}
 
 	.sticky {
 		position: sticky;
 		top: calc(var(--header-height) + 24px);
+		width: 100%;
+		max-width: 400px;
 
 		@include for-tablet-portrait-down {
 			position: static;
diff --git a/src/lib/scss/_typography.scss b/src/lib/scss/_typography.scss
index 693ba73..fdc3e33 100644
--- a/src/lib/scss/_typography.scss
+++ b/src/lib/scss/_typography.scss
@@ -63,6 +63,11 @@ h5 {
 	color: var(--color--text);
 }
 
+// Page titles carry the heaviest weight, as the homepage's do.
+h1 {
+	font-weight: 900;
+}
+
 // The small blue word above a section title: what the section is about.
 .eyebrow {
 	display: block;
diff --git a/src/routes/(site)/404/+page.svelte b/src/routes/(site)/404/+page.svelte
index 1e2bf4d..82dac2e 100644
--- a/src/routes/(site)/404/+page.svelte
+++ b/src/routes/(site)/404/+page.svelte
@@ -1,38 +1,10 @@
 <script lang="ts">
-	import Button from '$lib/components/atoms/Button.svelte';
+	import NotFound from '$lib/components/organisms/NotFound.svelte';
 	import Seo from '$lib/components/atoms/Seo.svelte';
 </script>
 
 <Seo title="Page not found" path="/404" />
 
 <div class="container">
-	<div class="missing">
-		<span class="code">404</span>
-		<h1>Nothing here, sorry.</h1>
-		<p class="lede">The page moved or never existed. The homepage has everything that does.</p>
-		<Button href="/" variant="secondary">Back to the start</Button>
-	</div>
+	<NotFound status={404} />
 </div>
-
-<style lang="scss">
-	.missing {
-		min-height: 60vh;
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		justify-content: center;
-		gap: var(--space-sm);
-		padding: var(--space-2xl) 0;
-	}
-
-	.code {
-		font-family: var(--font--title);
-		font-weight: 800;
-		font-size: 0.875rem;
-		color: var(--color--text-quiet);
-	}
-
-	h1 {
-		max-width: 16ch;
-	}
-</style>
diff --git a/src/routes/(site)/blog/+page.svelte b/src/routes/(site)/blog/+page.svelte
index df7a551..2172535 100644
--- a/src/routes/(site)/blog/+page.svelte
+++ b/src/routes/(site)/blog/+page.svelte
@@ -19,6 +19,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Blog"
 		title="Blog"
 		lede="Notes on language exchange, learning habits, and how LangX is built."
 	/>
diff --git a/src/routes/(site)/tools/+page.svelte b/src/routes/(site)/tools/+page.svelte
index 898a116..e099f28 100644
--- a/src/routes/(site)/tools/+page.svelte
+++ b/src/routes/(site)/tools/+page.svelte
@@ -146,7 +146,7 @@
 
 <div class="container">
 	<header class="hero">
-		<p class="kicker">Free · no account · yours to download</p>
+		<span class="eyebrow">Free · no account · yours to download</span>
 		<h1>Tools for the part<br />nobody sells you.</h1>
 		<p class="lede">
 			The vocabulary, the frequency, the raw lists — the unglamorous half of learning a language,
@@ -217,17 +217,9 @@
 		}
 	}
 
-	.kicker {
-		font-size: 0.6875rem;
-		font-weight: 700;
-		letter-spacing: 0.04em;
-		text-transform: uppercase;
-		color: var(--color--text-quiet);
-		margin-bottom: var(--space-xs);
-	}
-
 	h1 {
 		max-width: 20ch;
+		margin-top: 12px;
 	}
 
 	.lede {
diff --git a/src/routes/(site)/tools/alphabet/+page.svelte b/src/routes/(site)/tools/alphabet/+page.svelte
index cae2c60..197d337 100644
--- a/src/routes/(site)/tools/alphabet/+page.svelte
+++ b/src/routes/(site)/tools/alphabet/+page.svelte
@@ -20,6 +20,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		title="Alphabets"
 		lede="Every letter of {ALPHABETS.length} writing systems, with what each one is called and roughly how it sounds. The scripts here are the ones you cannot guess your way through."
 	/>
diff --git a/src/routes/(site)/tools/alphabet/[language]/+page.svelte b/src/routes/(site)/tools/alphabet/[language]/+page.svelte
index bbb8dd7..4a78424 100644
--- a/src/routes/(site)/tools/alphabet/[language]/+page.svelte
+++ b/src/routes/(site)/tools/alphabet/[language]/+page.svelte
@@ -69,6 +69,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		{title}
 		lede="{count} letters, each with its name and roughly the sound it makes. The sounds are English approximations — enough to sound a word out, not enough to pass for a local."
 	/>
diff --git a/src/routes/(site)/tools/guess-the-language/+page.svelte b/src/routes/(site)/tools/guess-the-language/+page.svelte
index e6d9d80..c7fbee5 100644
--- a/src/routes/(site)/tools/guess-the-language/+page.svelte
+++ b/src/routes/(site)/tools/guess-the-language/+page.svelte
@@ -105,6 +105,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		title="Which language is this?"
 		lede="Ten words a day, drawn from the {WORD_LISTS.length} lists. Each one appears in exactly one of
 		them — no word here belongs to two languages, so there are no trick questions."
diff --git a/src/routes/(site)/tools/meaning-quiz/+page.svelte b/src/routes/(site)/tools/meaning-quiz/+page.svelte
index ccfca68..fb2f861 100644
--- a/src/routes/(site)/tools/meaning-quiz/+page.svelte
+++ b/src/routes/(site)/tools/meaning-quiz/+page.svelte
@@ -13,6 +13,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		title="Do you know what these words mean?"
 		lede="Ten words a day, four meanings each. Every word comes from the first fifteen hundred its
 		language uses most, so these are words you would actually meet."
diff --git a/src/routes/(site)/tools/meaning-quiz/[language]/+page.svelte b/src/routes/(site)/tools/meaning-quiz/[language]/+page.svelte
index 38d700f..90faec2 100644
--- a/src/routes/(site)/tools/meaning-quiz/[language]/+page.svelte
+++ b/src/routes/(site)/tools/meaning-quiz/[language]/+page.svelte
@@ -98,6 +98,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		title="What do these {meta.name} words mean?"
 		lede="Ten words a day, all of them from the first fifteen hundred {meta.name} uses most — so these are
 		words you would meet, not dictionary curiosities."
diff --git a/src/routes/(site)/tools/most-common-words/[language]/+page.svelte b/src/routes/(site)/tools/most-common-words/[language]/+page.svelte
index cfa70a9..c0825d2 100644
--- a/src/routes/(site)/tools/most-common-words/[language]/+page.svelte
+++ b/src/routes/(site)/tools/most-common-words/[language]/+page.svelte
@@ -231,6 +231,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		{title}
 		lede="Ranked by how often each word turns up in everyday {meta.name}, with its meaning in English."
 	/>
diff --git a/src/routes/(site)/tools/say/+page.svelte b/src/routes/(site)/tools/say/+page.svelte
index 00806ab..d46c77b 100644
--- a/src/routes/(site)/tools/say/+page.svelte
+++ b/src/routes/(site)/tools/say/+page.svelte
@@ -53,6 +53,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		title="Say it in {WORD_LISTS.length} languages"
 		lede="{nf.format(
 			SAY_WORDS.length
diff --git a/src/routes/(site)/tools/say/[word]/+page.svelte b/src/routes/(site)/tools/say/[word]/+page.svelte
index eccf992..80752c6 100644
--- a/src/routes/(site)/tools/say/[word]/+page.svelte
+++ b/src/routes/(site)/tools/say/[word]/+page.svelte
@@ -85,6 +85,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		{title}
 		lede="Every one of these is a word that turns up in ordinary speech, not a dictionary curiosity — the number beside it is where it ranks in that language."
 	/>
diff --git a/src/routes/(site)/tools/similar/+page.svelte b/src/routes/(site)/tools/similar/+page.svelte
index e87f69b..1f5dda3 100644
--- a/src/routes/(site)/tools/similar/+page.svelte
+++ b/src/routes/(site)/tools/similar/+page.svelte
@@ -17,6 +17,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		title="If you know one, you already know some of the other"
 		lede="{LANGUAGE_PAIRS.length} pairs where words are written identically and mean the same thing, inside
 		the two thousand each language uses most. Sorted by how much they share."
diff --git a/src/routes/(site)/tools/similar/[pair]/+page.svelte b/src/routes/(site)/tools/similar/[pair]/+page.svelte
index adef33a..f4ad9b1 100644
--- a/src/routes/(site)/tools/similar/[pair]/+page.svelte
+++ b/src/routes/(site)/tools/similar/[pair]/+page.svelte
@@ -66,6 +66,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		{title}
 		lede="Among the two thousand words each language uses most, these are written identically and carry
 		the same meaning in both. If you have one of the two, this is the part you do not have to learn."
diff --git a/src/routes/(site)/tools/vocabulary-test/+page.svelte b/src/routes/(site)/tools/vocabulary-test/+page.svelte
index 01ad053..3ff1e27 100644
--- a/src/routes/(site)/tools/vocabulary-test/+page.svelte
+++ b/src/routes/(site)/tools/vocabulary-test/+page.svelte
@@ -19,6 +19,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		title="How many words do you know?"
 		lede="Forty-two words drawn from across the whole frequency range — the commonest through to the
 		rare. Mark the ones you know and see roughly how much of the language that covers. Two minutes, no
diff --git a/src/routes/(site)/tools/vocabulary-test/[language]/+page.svelte b/src/routes/(site)/tools/vocabulary-test/[language]/+page.svelte
index 3a34e31..a4fed08 100644
--- a/src/routes/(site)/tools/vocabulary-test/[language]/+page.svelte
+++ b/src/routes/(site)/tools/vocabulary-test/[language]/+page.svelte
@@ -141,6 +141,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		title="How many {meta.name} words do you know?"
 		lede="{total} words, drawn from every part of the {nf.format(
 			meta.count
diff --git a/src/routes/(site)/tools/word-game/+page.svelte b/src/routes/(site)/tools/word-game/+page.svelte
index c38b73e..5ad1be0 100644
--- a/src/routes/(site)/tools/word-game/+page.svelte
+++ b/src/routes/(site)/tools/word-game/+page.svelte
@@ -16,6 +16,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		title="Five letters, once a day"
 		lede="Guess the day's word in six tries. Every answer comes from the words that language uses most,
 		so a puzzle is never a word nobody has met."
diff --git a/src/routes/(site)/tools/word-game/[language]/+page.svelte b/src/routes/(site)/tools/word-game/[language]/+page.svelte
index a7fc312..6bac329 100644
--- a/src/routes/(site)/tools/word-game/[language]/+page.svelte
+++ b/src/routes/(site)/tools/word-game/[language]/+page.svelte
@@ -171,6 +171,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Tools"
 		title="{meta.name} in five letters"
 		lede="A new word every day, taken from the {meta.name} words that come up most in ordinary speech. Six
 		tries. Green is right, yellow is in the word somewhere."
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 4c357d3..c474768 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -2,7 +2,7 @@
 	import { page } from '$app/stores';
 	import Header from '$lib/components/organisms/Header.svelte';
 	import Footer from '$lib/components/organisms/Footer.svelte';
-	import Button from '$lib/components/atoms/Button.svelte';
+	import NotFound from '$lib/components/organisms/NotFound.svelte';
 </script>
 
 <svelte:head>
@@ -13,40 +13,8 @@
 
 <main>
 	<div class="container">
-		<div class="missing">
-			<span class="code">{$page.status}</span>
-			<h1>{$page.status === 404 ? 'Nothing here, sorry.' : 'Something went wrong.'}</h1>
-			<p class="lede">
-				{$page.status === 404
-					? 'The page moved or never existed. The homepage has everything that does.'
-					: 'Reload the page, or start again from the homepage.'}
-			</p>
-			<Button href="/" variant="secondary">Back to the start</Button>
-		</div>
+		<NotFound status={$page.status} />
 	</div>
 </main>
 
 <Footer />
-
-<style lang="scss">
-	.missing {
-		min-height: 60vh;
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		justify-content: center;
-		gap: var(--space-sm);
-		padding: var(--space-2xl) 0;
-	}
-
-	.code {
-		font-family: var(--font--title);
-		font-weight: 800;
-		font-size: 0.875rem;
-		color: var(--color--text-quiet);
-	}
-
-	h1 {
-		max-width: 16ch;
-	}
-</style>
diff --git a/src/routes/cookie-policy/+page.svelte b/src/routes/cookie-policy/+page.svelte
index 2ea4d2c..5b20d08 100644
--- a/src/routes/cookie-policy/+page.svelte
+++ b/src/routes/cookie-policy/+page.svelte
@@ -4,6 +4,10 @@
 </script>
 
 <div class="container">
-	<PageHeader title="Cookie Policy" lede="Which cookies LangX uses, and how to control them." />
+	<PageHeader
+		eyebrow="Legal"
+		title="Cookie Policy"
+		lede="Which cookies LangX uses, and how to control them."
+	/>
 	<CookiePolicy />
 </div>
diff --git a/src/routes/data-deletion/+page.svelte b/src/routes/data-deletion/+page.svelte
index 1c6d31e..1222ac6 100644
--- a/src/routes/data-deletion/+page.svelte
+++ b/src/routes/data-deletion/+page.svelte
@@ -4,6 +4,10 @@
 </script>
 
 <div class="container">
-	<PageHeader title="Data Deletion" lede="How to delete your account and the data it holds." />
+	<PageHeader
+		eyebrow="Legal"
+		title="Data Deletion"
+		lede="How to delete your account and the data it holds."
+	/>
 	<DataDeletion />
 </div>
diff --git a/src/routes/privacy-policy/+page.svelte b/src/routes/privacy-policy/+page.svelte
index 3e5d835..ec643eb 100644
--- a/src/routes/privacy-policy/+page.svelte
+++ b/src/routes/privacy-policy/+page.svelte
@@ -4,6 +4,10 @@
 </script>
 
 <div class="container">
-	<PageHeader title="Privacy Policy" lede="What LangX collects, why, and what it never touches." />
+	<PageHeader
+		eyebrow="Legal"
+		title="Privacy Policy"
+		lede="What LangX collects, why, and what it never touches."
+	/>
 	<PrivacyPolicy />
 </div>
diff --git a/src/routes/pro/+page.svelte b/src/routes/pro/+page.svelte
index 2ffe236..f6f1bb8 100644
--- a/src/routes/pro/+page.svelte
+++ b/src/routes/pro/+page.svelte
@@ -1,12 +1,46 @@
 <script lang="ts">
 	import PageHeader from '$lib/components/organisms/PageHeader.svelte';
+	import PlanUsageCard from '$lib/components/organisms/PlanUsageCard.svelte';
 	import Pricing from '$lib/components/organisms/Pricing.svelte';
 </script>
 
 <div class="container">
-	<PageHeader
-		title="Free is a real plan. Fluent lifts its limits. Polyglot adds what only it has."
-		lede="Replying and correcting are unlimited on every plan. Prices are shown in the app."
-	/>
+	<div class="intro">
+		<PageHeader
+			eyebrow="Plans"
+			title="Free is a real plan. Fluent lifts its limits. Polyglot adds what only it has."
+			lede="Replying and correcting are unlimited on every plan. Prices are shown in the app."
+		/>
+		<div class="card">
+			<PlanUsageCard />
+		</div>
+	</div>
 	<Pricing />
 </div>
+
+<style lang="scss">
+	@import '$lib/scss/breakpoints.scss';
+
+	// The title on the left, and on the right what a paid day looks like.
+	.intro {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 24px 56px;
+		padding-bottom: var(--space-xl);
+
+		:global(.page-header) {
+			flex: 1 1 340px;
+			padding-bottom: 0;
+		}
+	}
+
+	.card {
+		flex: 1 1 300px;
+		max-width: 400px;
+
+		@include for-phone-only {
+			max-width: none;
+		}
+	}
+</style>
diff --git a/src/routes/terms-conditions/+page.svelte b/src/routes/terms-conditions/+page.svelte
index b6793e3..3ce0cea 100644
--- a/src/routes/terms-conditions/+page.svelte
+++ b/src/routes/terms-conditions/+page.svelte
@@ -4,6 +4,10 @@
 </script>
 
 <div class="container">
-	<PageHeader title="Terms & Conditions" lede="The terms you agree to when you use LangX." />
+	<PageHeader
+		eyebrow="Legal"
+		title="Terms & Conditions"
+		lede="The terms you agree to when you use LangX."
+	/>
 	<TermsAndConditions />
 </div>
diff --git a/src/routes/welcome-back/+page.svelte b/src/routes/welcome-back/+page.svelte
index 9ce9d1d..0ad9090 100644
--- a/src/routes/welcome-back/+page.svelte
+++ b/src/routes/welcome-back/+page.svelte
@@ -5,6 +5,7 @@
 
 <div class="container">
 	<PageHeader
+		eyebrow="Coming from v1"
 		title="Welcome back"
 		lede="LangX v2 is a rebuild, not an update on top of the old app. Here is everything that changes for you, including the parts we would rather you heard from us than discovered."
 	/>