@atelic-action/ui 0.2.0 → 0.4.0

package/README.md

@@ -1,6 +1,6 @@
 # @atelic-action/ui
 
-Shared UI for the Atelic templates: the site chrome (header, menu, footer, sticky CTA bar, and credit band), the scroll spy hook, and the one base stylesheet. The marketing and artifact templates install it instead of carrying their own copies, so a chrome fix lands once and every site picks it up with `bun update`.
+Shared UI for the Atelic templates: the site chrome (header, menu, footer, sticky CTA bar, and credit band), the not found page and the routing that keeps it alive, the scroll spy hook, and the one base stylesheet. The marketing and artifact templates install it instead of carrying their own copies, so a chrome fix lands once and every site picks it up with `bun update`.
 
 The package ships source, not a build. Its TSX and CSS arrive as written and compile inside each site's own Vite.
 
@@ -30,22 +30,26 @@ Import the stylesheets in this order, from the root route or the site's base she
 1. The site's fonts (`fonts.css`)
 2. `@atelic-action/ui/styles/base.css`
 3. `@atelic-action/ui/styles/chrome.css`
-4. The site's own CSS
-5. The site's `theme.css`, last
+4. `@atelic-action/ui/styles/components.css`
+5. The site's own CSS
+6. The site's `theme.css`, last
 
-Both package sheets sit inside `@layer atelic-ui`, so any rule a site writes outside a layer wins over them whatever its specificity. The package reads the theme tokens (`--ink`, `--surface`, `--primary`, `--nav-height`, and the rest) and defines none, so `theme.css` stays the one file a site edits to rebrand. The chrome's buttons wear the site's own `.btn` classes.
+The package sheets sit inside `@layer atelic-ui`, so any rule a site writes outside a layer wins over them whatever its specificity. The package reads the theme tokens (`--ink`, `--surface`, `--primary`, `--nav-height`, and the rest) and defines none, so `theme.css` stays the one file a site edits to rebrand. The chrome's buttons wear the site's own `.btn` classes.
 
 ## What Is Inside
 
 | Import | Exports |
 |---|---|
 | `@atelic-action/ui/chrome` | `SiteHeader`, `SiteMenu`, `Footer`, `CreditBar`, `StickyCTABar`, `BrandLockup`, `SkipLink`, and their prop types |
+| `@atelic-action/ui/components` | `NotFound` and its prop types (see [The Not Found Page](#the-not-found-page)) |
 | `@atelic-action/ui/email` | The email components, the theme provider, the plain text helpers, and their prop types (see [Email](#email)) |
 | `@atelic-action/ui/email/render` | `renderEmail` and `renderFailureEmail`, the only entry that imports `react-dom/server` |
 | `@atelic-action/ui/tokens` | `Palette`, `atelicPalette`, `Fonts`, `atelicFonts`, `toThemeCSS`, `themeTokenMap` |
 | `@atelic-action/ui/hooks` | `useScrollSpy` and its `PageStop` type |
+| `@atelic-action/ui/routing` | `staticNotFoundRouting`, the router options behind the not found page |
 | `@atelic-action/ui/styles/base.css` | Resets, the `.mkt` canvas, typography, and layout helpers |
 | `@atelic-action/ui/styles/chrome.css` | Styles for everything under `chrome` |
+| `@atelic-action/ui/styles/components.css` | Layout defaults for everything under `components` |
 
 Every component renders from props alone. None reads a config file or a router, so a site maps its own config onto the props in its shell:
 
@@ -69,6 +73,37 @@ import { Footer, SiteHeader, SkipLink, StickyCTABar } from "@atelic-action/ui/ch
 
 The menu is a native `<dialog>` opened with `showModal()`, so Escape, focus containment, and focus return come from the browser.
 
+## The Not Found Page
+
+`NotFound` is the page an unknown path renders: a headline, a row of popular pages, and the closing call to action. It renders the body only, so a site wraps it in its own shell, and it wears the site's own classes (`.page-hero`, `.eyebrow`, `.lead`, `.final-cta`, `.btn`).
+
+On a statically prerendered TanStack Start site the markup is the easy part. The host serves the `/404` prerender for every miss, and the page survives hydration only with three pieces in the site:
+
+1. **A catch all route**, `src/routes/$.tsx`, rendering the site's page (noindexed). Never a dedicated `/404` route: an unknown path then matches only the root, TanStack's hydrate throws, and the page goes blank.
+2. **The router options:** `createRouter({ routeTree, ...staticNotFoundRouting(NotFoundPage) })`. A miss hydrates through its pending state first, so pending has to render the same page or React reports a mismatch.
+3. **The build:** a `{ path: "/404", prerender: { enabled: true }, sitemap: { exclude: true } }` entry in the Vite `pages` list, and a copy of `dist/client/404/index.html` to `dist/client/404.html`.
+
+```tsx
+// src/shared/components/NotFoundPage.tsx
+import { NotFound } from "@atelic-action/ui/components";
+
+export function NotFoundPage() {
+	return (
+		<SiteShell site={site}>
+			<NotFound
+				title="This page wandered off."
+				lead="The link may be old, or the page may have moved."
+				links={site.nav.filter((item) => item.to !== "/").map(({ label, to }) => ({ label, href: to }))}
+				closing={{ eyebrow: "Back on Track", title: "Let's get you where you were headed." }}
+				primaryCTA={site.cta}
+			/>
+		</SiteShell>
+	);
+}
+```
+
+`staticNotFoundRouting` is for prerendered sites only. On a live app the pending state is a real loading moment and the page would flash through every slow load, so an app sets `defaultNotFoundComponent` alone. A browser test is the only proof any of this works; template-marketing's `e2e/not-found.spec.ts` is the one to copy.
+
 ## Email
 
 `@atelic-action/ui/email` is the runner email design as React components, ported one to one from the jq library the runners compose their mail from (homebase `runners/lib/email.jq`). The components are born inline: every layout is a table, every style is an inline style object, and there is no CSS file and no `className`, because Gmail strips a style block and ignores media queries on some accounts. The same components therefore mount on a web page as happily as they render into a mail client.
@@ -110,6 +145,31 @@ const html = renderEmail({
 });
 ```
 
+### Mobile First
+
+Runner emails are mobile first. A layout that squashes on a phone is fixed here, in the components every runner shares, never in a report page. A fixed column table is for numbers alone and never carries a name; names go in a `RecordStack`.
+
+`RecordStack` takes `records`, each a `RecordStackItem` (`title`, `url`, `meta`, `note`), and renders one table row per record: the title on its own line at 15px, bold and wrapping freely, linked when `url` is set; a mono meta line beneath it with the items joined by middle dots (empty items drop); an optional note beneath that; a hairline between records and none after the last. No cell carries a width, so a name of any length wraps at 320 pixels instead of squashing. `recordStackText(records)` is its plain text twin: each title on its own line under a two space indent, the meta and the note wrapped under a four space indent, a blank line between records, and no line past `textWidth` (68 columns, indent included).
+
+`StatStrip` lays its stats out as inline block cells with an 88 pixel floor inside one centered cell, so six or seven stats flow onto a second row on a phone rather than shrinking. Each stat takes an optional `delta` (`"+3 · +12%"`), set small and muted under its label.
+
+```tsx
+const records = [
+	{ title: "Pinewood Cabinetry", url: "https://example.test", meta: ["Lead", "Longmont", "fit 14"], note: "Answered the audit inside a day." },
+];
+
+<Card>
+	<Row last={false}>
+		<StatStrip stats={[{ n: 6, label: "Lead", delta: "+3 · +12%" }, { n: 2, label: "MQL" }]} />
+	</Row>
+	<Row last>
+		<RecordStack records={records} />
+	</Row>
+</Card>;
+
+const text = recordStackText(records);
+```
+
 `renderEmail` builds the document shell itself and puts only the rows through React, because React emits no doctype, React 19 hoists and reorders head tags, and it would escape the `>` in `details>summary`. `renderFailureEmail` is the same shell around `FailurePage`. Both live at `@atelic-action/ui/email/render`, apart from the components, so a site that mounts a component on a page never pulls React's server renderer into its browser bundle.
 
 ### The Mapping
@@ -143,7 +203,8 @@ Where the jq takes a pre rendered html string (`$rows`, `$body_html`, `$cells_ht
 | `sub_eyebrow` | `SubEyebrow` | `text` |
 | `badge` | `Badge` | `letter` |
 | `day_strip` | `DayStrip` | `days`, `last` |
-| `stat_strip` | `StatStrip` | `stats` |
+| `stat_strip` | `StatStrip` | `stats`, each with an optional `delta` (the component wraps where the jq does not) |
+| none | `RecordStack` | `records` (born here on 2026-09-24, with no jq counterpart) |
 | `records` | `Records` | `columns`, `rows`; a cell's `html` is a `ReactNode` |
 | `masthead` | `Masthead` | `title`, `wordmark` (defaults to `atelic`) |
 | `title_card` | `TitleCard` | `eyebrowText`, `headlineLines`, `lede`, `stats` (the rows under the lede, in place of the jq's `$stats_html`) |
@@ -151,7 +212,7 @@ Where the jq takes a pre rendered html string (`$rows`, `$body_html`, `$cells_ht
 | `page` | `renderEmail` | `title`, `preheader`, `children`, `palette`, `fonts` |
 | `failure_page` | `renderFailureEmail`, or `FailurePage` as body rows | `runnerTitle`, `eyebrowText`, `reason`, `logTail` |
 
-The plain text alternative part ports as plain functions with no React anywhere in them: `spaces`, `rpad`, `lpad`, `wrap`, `textRule`, `textSection`, `textRead`, `textBar`, `textTarget`, `textTableGrid`, `textTable`, plus `asciiUpcase` and `asciiDowncase`. Every width counts Unicode codepoints, the way jq's `length` does.
+The plain text alternative part ports as plain functions with no React anywhere in them: `spaces`, `rpad`, `lpad`, `wrap`, `textRule`, `textSection`, `textRead`, `textBar`, `textTarget`, `textTableGrid`, `textTable`, `recordStackText`, `textWidth`, plus `asciiUpcase` and `asciiDowncase`. Every width counts Unicode codepoints, the way jq's `length` does.
 
 `tst/email/expected/` holds frozen goldens generated from the jq library, and the component tests compare the rendered DOM against them. See that folder's README before touching one.
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/ui",
-	"version": "0.2.0",
+	"version": "0.4.0",
 	"description": "Shared UI for the Atelic templates: site chrome, base styles, and the component library they install",
 	"type": "module",
 	"license": "UNLICENSED",
@@ -19,12 +19,15 @@
 	],
 	"exports": {
 		"./chrome": "./src/chrome/index.ts",
+		"./components": "./src/components/index.ts",
 		"./email": "./src/email/index.ts",
 		"./email/render": "./src/email/render.tsx",
 		"./hooks": "./src/hooks/index.ts",
+		"./routing": "./src/routing/index.ts",
 		"./tokens": "./src/tokens/index.ts",
 		"./styles/base.css": "./src/styles/base.css",
 		"./styles/chrome.css": "./src/styles/chrome.css",
+		"./styles/components.css": "./src/styles/components.css",
 		"./package.json": "./package.json"
 	},
 	"scripts": {

package/src/components/NotFound.tsx

@@ -0,0 +1,87 @@
+import type { ReactNode } from "react";
+import { newTabProps } from "../lib/newTabProps";
+import type { CallToAction, NavLink } from "../types";
+
+export interface NotFoundProps {
+	/** The kicker above the headline. Defaults to "404". */
+	eyebrow?: string;
+	title: ReactNode;
+	lead?: ReactNode;
+	/** A short list of pages worth landing on, usually the nav without Home. */
+	links?: NavLink[];
+	/** The heading and accessible name of the links row. Defaults to "Popular Pages". */
+	linksLabel?: string;
+	/** The closing section's kicker and headline. */
+	closing: { eyebrow?: string; title: ReactNode };
+	/** The site's primary conversion action, rendered first. */
+	primaryCTA: CallToAction;
+	/** The ghost action beside it. Defaults to "Back to Home" at "/". */
+	secondary?: NavLink;
+}
+
+/**
+ * The page a missing path renders: a headline, a row of popular pages, and
+ * the closing call to action. It renders the page body only; a site wraps it
+ * in its own shell, as it does every page. The markup wears the site's own
+ * classes (.page-hero, .eyebrow, .lead, .final-cta, .btn), so a site that
+ * styles them gets its own look, and components.css covers the layout where
+ * it does not.
+ *
+ * Keeping it alive through hydration takes routing as well as markup; see
+ * staticNotFoundRouting in the routing entry.
+ */
+export function NotFound({
+	eyebrow = "404",
+	title,
+	lead,
+	links = [],
+	linksLabel = "Popular Pages",
+	closing,
+	primaryCTA,
+	secondary = { label: "Back to Home", href: "/" },
+}: NotFoundProps) {
+	return (
+		<>
+			<section className="page-hero not-found-hero">
+				<div className="wrap">
+					<span className="eyebrow">{eyebrow}</span>
+					<h1>{title}</h1>
+					{lead && <p className="lead">{lead}</p>}
+				</div>
+			</section>
+			{links.length > 0 && (
+				<section className="section not-found-links">
+					<div className="wrap center">
+						<span className="eyebrow center">{linksLabel}</span>
+						<nav aria-label={linksLabel} className="cta-row center">
+							{links.map((link) => (
+								<a key={link.href} className="btn btn-ghost" href={link.href}>
+									{link.label}
+								</a>
+							))}
+						</nav>
+					</div>
+				</section>
+			)}
+			<section className="section final-cta surface-alt not-found-closing">
+				<div className="wrap center">
+					{closing.eyebrow && <span className="eyebrow center">{closing.eyebrow}</span>}
+					<h2>{closing.title}</h2>
+					<div className="cta-row center">
+						<a
+							className="btn btn-primary btn-lg"
+							href={primaryCTA.href}
+							{...newTabProps(primaryCTA.href, primaryCTA.external)}
+						>
+							{primaryCTA.label}
+							<span className="arrow">{"→"}</span>
+						</a>
+						<a className="btn btn-ghost btn-lg" href={secondary.href}>
+							{secondary.label}
+						</a>
+					</div>
+				</div>
+			</section>
+		</>
+	);
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export { NotFound, type NotFoundProps } from "./NotFound";

package/src/email/index.ts

@@ -56,6 +56,8 @@ export {
 	type GroupRowProps,
 	ReadBlock,
 	type ReadBlockProps,
+	RecordStack,
+	type RecordStackProps,
 	Records,
 	type RecordsCell,
 	type RecordsColumn,
@@ -77,6 +79,8 @@ export {
 	asciiDowncase,
 	asciiUpcase,
 	lpad,
+	type RecordStackItem,
+	recordStackText,
 	rpad,
 	spaces,
 	type TextTarget,
@@ -87,6 +91,7 @@ export {
 	textTable,
 	textTableGrid,
 	textTarget,
+	textWidth,
 	wrap,
 } from "./text";
 export {

package/src/email/scoreboard.tsx

@@ -1,4 +1,5 @@
 import { Fragment, type ReactNode } from "react";
+import type { RecordStackItem } from "./text";
 import { eyebrowStyle, tableReset, useEmailTheme } from "./theme";
 
 /*
@@ -323,50 +324,159 @@ export function DayStrip({ days, last }: DayStripProps) {
 	);
 }
 
-export type StatStripEntry = { n: string | number; label: string };
+export type StatStripEntry = {
+	n: string | number;
+	label: string;
+	/** A change beside the number, small and muted under the label: "+3 · +12%". */
+	delta?: string;
+};
 export type StatStripProps = { stats: StatStripEntry[] };
 
-/** A row of big numbers over eyebrow labels. */
+/**
+ * A strip of big numbers over eyebrow labels. Each stat is an inline block
+ * cell with a floor on its width inside one centered cell, so six or seven
+ * stats flow onto a second row on a phone instead of shrinking to nothing.
+ */
 export function StatStrip({ stats }: StatStripProps) {
 	const { palette, fonts } = useEmailTheme();
-	const width = `${Math.floor(100 / stats.length)}%`;
+	const share = `${Math.floor(100 / Math.max(stats.length, 1))}%`;
 	return (
 		<table {...tableReset} width="100%">
 			<tbody>
 				<tr>
-					{stats.map((entry, i) => (
-						<td
-							// biome-ignore lint/suspicious/noArrayIndexKey: a stat's position is its identity
-							key={i}
-							width={width}
-							style={{
-								padding: "12px 6px 10px",
-								borderTop: `2px solid ${palette.ink}`,
-								textAlign: "center",
-								verticalAlign: "top",
-							}}
-						>
-							<span
+					<td align="center" style={{ textAlign: "center" }}>
+						{stats.map((entry, i) => (
+							<div
+								// biome-ignore lint/suspicious/noArrayIndexKey: a stat's position is its identity
+								key={i}
 								style={{
-									fontFamily: fonts.sans,
-									fontSize: "22px",
-									fontWeight: "600",
-									letterSpacing: "-0.02em",
-									color: palette.ink,
+									display: "inline-block",
+									width: share,
+									minWidth: "88px",
+									boxSizing: "border-box",
+									verticalAlign: "top",
+									padding: "12px 6px 10px",
+									borderTop: `2px solid ${palette.ink}`,
+									textAlign: "center",
 								}}
 							>
-								{String(entry.n)}
-							</span>
-							<br />
-							<span style={{ ...eyebrowStyle(fonts), color: palette.faint }}>{entry.label}</span>
-						</td>
-					))}
+								<span
+									style={{
+										fontFamily: fonts.sans,
+										fontSize: "22px",
+										fontWeight: "600",
+										letterSpacing: "-0.02em",
+										color: palette.ink,
+									}}
+								>
+									{String(entry.n)}
+								</span>
+								<br />
+								<span style={{ ...eyebrowStyle(fonts), color: palette.faint }}>{entry.label}</span>
+								{entry.delta ? (
+									<>
+										<br />
+										<span
+											style={{ fontFamily: fonts.mono, fontSize: "11px", color: palette.faint }}
+										>
+											{entry.delta}
+										</span>
+									</>
+								) : null}
+							</div>
+						))}
+					</td>
 				</tr>
 			</tbody>
 		</table>
 	);
 }
 
+export type { RecordStackItem };
+export type RecordStackProps = { records: RecordStackItem[] };
+
+/**
+ * One record per row, stacked: the title on its own line, a mono meta line
+ * under it, an optional note under that. No column cells and no fixed widths,
+ * so a name of any length wraps instead of squashing on a phone. A fixed
+ * column table is for numbers alone; names go here.
+ */
+export function RecordStack({ records }: RecordStackProps) {
+	const { palette, fonts } = useEmailTheme();
+	return (
+		<table {...tableReset} width="100%" style={{ fontFamily: fonts.sans, color: palette.ink }}>
+			<tbody>
+				{records.map((record, i) => {
+					const last = i === records.length - 1;
+					const meta = record.meta.filter((m) => m !== "");
+					return (
+						// biome-ignore lint/suspicious/noArrayIndexKey: a record's position is its identity
+						<tr key={i}>
+							<td
+								style={{
+									padding: `${i === 0 ? "0" : "12px"} 0 ${last ? "0" : "12px"}`,
+									verticalAlign: "top",
+									...(last ? {} : { borderBottom: `1px solid ${palette.line}` }),
+								}}
+							>
+								<div
+									style={{
+										fontSize: "15px",
+										fontWeight: "600",
+										lineHeight: "1.35",
+										color: palette.ink,
+										wordBreak: "break-word",
+									}}
+								>
+									{record.url ? (
+										<a
+											href={record.url}
+											style={{
+												color: palette.ink,
+												textDecoration: "none",
+												borderBottom: `1px solid ${palette.accent}`,
+											}}
+										>
+											{record.title}
+										</a>
+									) : (
+										record.title
+									)}
+								</div>
+								{meta.length > 0 ? (
+									<div
+										style={{
+											fontFamily: fonts.mono,
+											fontSize: "12px",
+											lineHeight: "1.5",
+											color: palette.faint,
+											marginTop: "4px",
+										}}
+									>
+										{meta.join(" · ")}
+									</div>
+								) : null}
+								{record.note ? (
+									<div
+										style={{
+											fontSize: "13px",
+											lineHeight: "1.5",
+											color: palette.dim,
+											marginTop: "6px",
+										}}
+									>
+										{record.note}
+									</div>
+								) : null}
+							</td>
+						</tr>
+					);
+				})}
+			</tbody>
+		</table>
+	);
+}
+
 export type RecordsColumn = {
 	label: string;
 	/** Aligns the column right and keeps its cells on one line. */

package/src/email/text.ts

@@ -37,16 +37,25 @@ export function lpad(value: string, width: number): string {
 	return spaces(width - codepoints(value)) + value;
 }
 
-/** Prose wrapped at 66 columns under a two space indent. */
-export function wrap(text: string): string {
+/** The widest a plain text line runs, indent included: two spaces and 66 columns of prose. */
+export const textWidth = 68;
+
+/** Prose broken into lines of at most `columns` codepoints, each under `indent`. */
+function wrapIndented(text: string, indent: number): string {
+	const columns = textWidth - indent;
 	const lines = [""];
 	for (const word of text.split(" ")) {
 		const last = lines[lines.length - 1];
 		if (codepoints(last) === 0) lines[lines.length - 1] = word;
-		else if (codepoints(last) + 1 + codepoints(word) > 66) lines.push(word);
+		else if (codepoints(last) + 1 + codepoints(word) > columns) lines.push(word);
 		else lines[lines.length - 1] = `${last} ${word}`;
 	}
-	return lines.map((line) => `  ${line}`).join("\n");
+	return lines.map((line) => `${spaces(indent)}${line}`).join("\n");
+}
+
+/** Prose wrapped at 66 columns under a two space indent. */
+export function wrap(text: string): string {
+	return wrapIndented(text, 2);
 }
 
 export const textRule = "=".repeat(64);
@@ -114,3 +123,34 @@ export function textTableGrid(
 export function textTable(cols: string[], rows: string[][], right: number[]): string {
 	return textTableGrid(cols, rows, right, null);
 }
+
+/**
+ * One record in a stack: what `RecordStack` renders and `recordStackText`
+ * writes. It lives here, with no React, so a plain text renderer can import it.
+ */
+export type RecordStackItem = {
+	title: string;
+	/** Links the title when set; the plain text twin leaves it out. */
+	url?: string | null;
+	/** Facts joined by a middle dot on the line under the title; empty items drop. */
+	meta: string[];
+	note?: string;
+};
+
+/**
+ * The plain text twin of `RecordStack`: each title on its own line under a
+ * two space indent, the meta joined by middle dots and the note beneath it,
+ * both wrapped under a four space indent, a blank line between records. No
+ * line runs past `textWidth`.
+ */
+export function recordStackText(records: RecordStackItem[]): string {
+	return records
+		.map((record) => {
+			const lines = [wrapIndented(record.title, 2)];
+			const meta = record.meta.filter((m) => m !== "");
+			if (meta.length > 0) lines.push(wrapIndented(meta.join(" · "), 4));
+			if (record.note) lines.push(wrapIndented(record.note, 4));
+			return lines.join("\n");
+		})
+		.join("\n\n");
+}

package/src/routing/index.ts

@@ -0,0 +1,31 @@
+/**
+ * The router options that keep a not found page alive on a statically
+ * prerendered TanStack Start site. Spread them into createRouter:
+ *
+ *   createRouter({ routeTree, ...staticNotFoundRouting(NotFoundPage) })
+ *
+ * The static host serves the /404 prerender for every unknown path, and it
+ * takes a catch all route (src/routes/$.tsx rendering the same page) plus
+ * these two options to survive hydration:
+ *
+ * - The splat gives the client a match below the root. With a dedicated
+ *   /404 route instead, an unknown path matches only the root, hydrate takes
+ *   its SPA branch, throws, and the page goes blank.
+ * - The splat's match id still carries the path, so it differs from the
+ *   dehydrated /404 match and hydrate renders the pending state first.
+ *   Pending as the page itself keeps that first render identical to the
+ *   server HTML; the default null is a hydration mismatch.
+ *
+ * Static sites only. On a live app the pending state is a real loading
+ * moment, and this would flash the not found page through every slow load;
+ * an app sets defaultNotFoundComponent alone.
+ *
+ * Generic over the page so the router checks it against its own component
+ * type; the package stays free of any router import.
+ */
+export function staticNotFoundRouting<Page>(page: Page) {
+	return {
+		defaultNotFoundComponent: page,
+		defaultPendingComponent: page,
+	};
+}

package/src/styles/components.css

@@ -0,0 +1,20 @@
+/* Layout defaults for the components under src/components. A site's own
+   classes (.page-hero, .eyebrow, .lead, .btn) arrive unlayered and win, so
+   these only fill in where a site does not style them. */
+@layer atelic-ui {
+	.mkt .not-found-hero {
+		padding-top: calc(var(--nav-height, 72px) + clamp(40px, 7vw, 86px));
+		padding-bottom: clamp(28px, 5vw, 60px);
+	}
+	.mkt .not-found-hero h1 {
+		margin: 16px 0 0;
+	}
+	.mkt .not-found-hero .lead {
+		margin-top: 22px;
+		max-width: 56ch;
+	}
+	.mkt .not-found-links .cta-row,
+	.mkt .not-found-closing .cta-row {
+		margin-top: 22px;
+	}
+}