/*
 * Castio, the B. Room look (#717). The one stylesheet for every page.
 * Source of truth: docs/designs/brand/BRAND-GUIDE.md, direction B, and its
 * reference rendering docs/designs/brand/preview/brand-variations.html (the B
 * panel). Rules that tests hold this file to: test/room-look-717.test.ts and
 * test/brand-css.test.js.
 *
 *  1. Fonts           7. Footer                13. Closing band
 *  2. Tokens          8. Heroes and the lens   14. Product pictures
 *  3. Base            9. Lens bullets, steps   15. Demo page and form
 *  4. Layout         10. Cards and lists       16. Guides and comparison pages
 *  5. Buttons, pills 11. Tables                17. Legal, not-found page
 *  6. Header and nav 12. Pricing
 *
 * Every colour is a token in :root and every one is in the guide's tables.
 * Nothing below :root writes a colour literal. No shadows, no gradients.
 */

/* 1. Fonts ------------------------------------------------------------------ */

/* One family for everything (guide B): the logo's own face. */
@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* 2. Tokens ----------------------------------------------------------------- */

:root {
	/* Fixed by the logo (guide section 1). */
	--ink: #0b1026;
	--indigo: #4f46e5;
	--indigo-hover: #4338ca;
	--indigo-on-dark: #8b85ff;
	--coral: #ff6b4a;

	/* Shared neutrals (guide section 1). */
	--text: #3d4560;
	--muted: #5a6380;
	--line: #e3e6f0;
	--on-dark: #c8cce6;
	--on-dark-muted: #9aa1c4;
	--success: #0f766e;
	--danger: #b42318;

	/* Room surfaces (guide B): white page, lavender and peach fields, and the
	   body tint on the indigo hero panel. */
	--surface: #ffffff;
	--lavender: #eef0ff;
	--peach: #fff1ec;
	--on-indigo: #e0e3ff;

	/* The example firm's brand, inside product drawings only: the room wears
	   their green, never ours (guide sections 1 and 6). */
	--mock: #1f6f50;
	--mock-soft: #e6f2ec;
	--mock-tile: #2b8a63;
	--mock-room: #0f1a15;
	--mock-tile-bg: #1c2a23;
	--mock-figure: #3e5a4c;
	--mock-control: #24352d;

	/* The real meeting room's background, sampled from the home hero's
	   capture (#825): the frame around it only, never text. */
	--capture-room: #252525;

	/* Type (guide section 2): one family; the scale is 14 to 64. */
	--font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-text: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--text-sm: 14px;
	--text-base: 16px;
	--text-md: 18px;
	--text-lg: 20px;
	--text-xl: 24px;
	--text-2xl: 32px;
	--text-3xl: 40px;
	--text-4xl: 48px;
	--text-5xl: 56px;
	--text-6xl: 64px;

	/* Space (guide section 3): a 4px base, nine steps. */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-16: 64px;
	--space-24: 96px;

	/* The sticky header's row (section 6), which anything scrolled into
	   view has to clear (form fields, #717). */
	--header-height: 72px;

	/* Radius (guide B): pill buttons, 20 cards, 28 panels; 14 for small
	   boxes inside them (icons, inputs, callouts), 8 inside drawings. */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-card: 20px;
	--radius-panel: 28px;
	--radius-pill: 999px;

	/* Layout (guide section 3). */
	--gutter: 20px;
	--max: 1200px;
	/* The reading measure (guide section 2: 60 to 75 characters a line). Set
	   in px, measured: Jakarta's wide "0" makes 68ch about 100 characters of
	   17px body text; 560px lands about 68. */
	--measure: 560px;
}

@media (min-width: 768px) {
	:root {
		--gutter: 32px;
	}
}

/* 3. Base ------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* The hidden attribute always hides, even on a class that sets display
   (.checks is a grid): /demo keeps its install copy hidden this way until
   demo-form.js shows it (#717). */
[hidden] {
	display: none !important;
}

/* The /demo crumb, heading and intro follow the option chosen in the form
   (release prep, #717). From the first paint (review of #740): the head
   script in demo.astro sets data-choice="install" on <html> for
   /demo?want=install before the body paints, so the install copy shows and
   the demo copy hides before demo-form.js (a deferred module) swaps the
   hidden attributes. demo-form.js keeps data-choice in step with the
   radios, so choosing the free demo lifts these rules. Without the script
   the page stays the demo page. */
html[data-choice="install"] [data-copy="demo"] {
	display: none !important;
}

html[data-choice="install"] span[data-copy="install"] {
	display: inline !important;
}

html[data-choice="install"] p[data-copy="install"] {
	display: block !important;
}

/* The /demo terms line ("By requesting the install service...") shows only
   while the install is chosen (RC QA, #717). The head script sets
   data-choice before the body paints and demo-form.js keeps it, and the
   line's hidden attribute, in step with the radios. With no script neither
   runs and the line shows. Once the Stripe links are live the element is
   the subscribe block, the renewal terms with their button (#735). */
html[data-choice="demo"] [data-install-terms] {
	display: none;
}

/* The /demo notes beside the form follow the choice the same way (RC
   follow-ups, #717): the HTML ships the demo's notes shown and the
   install's hidden, which is also the page without scripts. While the
   install is chosen, these show the install's from the first paint;
   demo-form.js keeps the hidden attributes in step with the radios. */
html[data-choice="install"] [data-notes="demo"] {
	display: none !important;
}

html[data-choice="install"] ul[data-notes="install"] {
	display: grid !important;
}

/* Whatever the browser scrolls to (an in-page link, a form field it
   refuses on submit) counts as visible only below the sticky header, so it
   lands there; a field already in the window but under the header is
   scrolled too, which a margin on the field alone does not do (#717).
   Element scroll-margins below add to this. */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
	margin: 0;
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-text);
	font-size: var(--text-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
	body {
		font-size: 17px;
	}
}

h1,
h2,
h3 {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
	word-spacing: 0.08em;
	text-wrap: balance;
	/* A long word in a 40px heading breaks inside the word on a 360px phone
	   rather than pushing the page sideways. An example address in a headline
	   is its own line instead and never breaks (.address-line, #853). */
	overflow-wrap: break-word;
}

h1 {
	font-size: var(--text-3xl);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
}

h2 {
	font-size: var(--text-2xl);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

h3 {
	font-size: var(--text-lg);
	line-height: 1.3;
}

@media (min-width: 768px) {
	h2 {
		font-size: var(--text-3xl);
	}
}

@media (min-width: 1024px) {
	h1 {
		font-size: var(--text-5xl);
	}
}

p {
	margin: 0;
	text-wrap: pretty;
}

/* Links are underlined in text, so they are findable without colour. */
a {
	color: var(--indigo);
	text-decoration: underline;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--indigo-hover);
}

:focus-visible {
	outline: 2px solid var(--indigo);
	outline-offset: 2px;
}

img,
svg {
	display: block;
	max-width: 100%;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* 4. Layout ----------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: calc(var(--max) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.section {
	padding: var(--space-16) 0;
}

@media (min-width: 1024px) {
	.section {
		padding: var(--space-24) 0;
	}
}

/* Alternate sections: lavender and peach, flat fields of the logo's colours. */
.section--tint {
	background: var(--lavender);
}

.section--peach {
	background: var(--peach);
}

.section-head {
	max-width: 720px;
	margin: 0 0 var(--space-12);
}

.section-head p {
	margin-top: var(--space-4);
	font-size: var(--text-md);
}

.lead {
	color: var(--text);
	font-size: var(--text-md);
	line-height: 1.6;
}

@media (min-width: 768px) {
	.lead {
		font-size: var(--text-lg);
	}
}

/* 5. Buttons, pills --------------------------------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 48px;
	padding: var(--space-3) var(--space-6);
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.button--primary {
	background: var(--indigo);
	color: var(--surface);
}

.button--primary:hover {
	background: var(--indigo-hover);
	color: var(--surface);
}

.button--secondary {
	background: transparent;
	border-color: var(--ink);
	color: var(--ink);
}

.button--secondary:hover {
	background: var(--lavender);
	color: var(--ink);
}

/* On an ink band: white fill, indigo text. */
.button--inverse {
	background: var(--surface);
	color: var(--indigo);
}

.button--inverse:hover {
	background: var(--lavender);
	color: var(--indigo-hover);
}

/* The header's small call to action, 44px (guide section 7). Not
   .button--primary, so a page keeps exactly one primary in its content. */
.button--nav {
	min-height: 44px;
	padding: 0 var(--space-4);
	background: var(--indigo);
	color: var(--surface);
}

.button--nav:hover {
	background: var(--indigo-hover);
	color: var(--surface);
}

.button svg {
	flex: none;
	width: 18px;
	height: 18px;
}

.button .arrow {
	transition: transform 0.15s ease;
}

.button:hover .arrow {
	transform: translateX(2px);
}

/* The pill: one per hero, the only place coral sits beside text. */
.pill {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--lavender);
	color: var(--indigo-hover);
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.5;
}

.pill__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--coral);
}

.text-link {
	font-weight: 600;
	text-decoration: none;
}

.text-link:hover {
	text-decoration: underline;
}

.text-link svg {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: var(--space-1);
	vertical-align: -3px;
}

.split__more {
	margin-top: var(--space-6);
}

.split__more .text-link {
	white-space: nowrap;
}

/* 6. Header and nav --------------------------------------------------------- */

/* Logo left, links, the install button right (guide section 7). The row is
   72px so the logo keeps the lens height clear above and below it (guide
   section 5); the gap plus the logo's margin keep it clear on the right. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--surface);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--header-height);
}

.logo {
	display: inline-flex;
	flex: none;
	align-items: center;
	text-decoration: none;
}

.logo img {
	width: auto;
	height: 24px;
}

.site-header .logo {
	margin-inline-end: var(--space-2);
}

@media (min-width: 900px) {
	.site-header .logo img {
		height: 28px;
	}
}

.site-header__cta {
	margin-left: auto;
	white-space: nowrap;
}

/* The phone menu toggle: an icon button whose name is the hidden word Menu. */
.site-header__menu-button {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--lavender);
	color: var(--ink);
	cursor: pointer;
}

.site-header__menu-button svg {
	width: 22px;
	height: 22px;
}

/* The menu: a popover on phones (no script needed), inline links from 900px. */
.site-header__nav[popover] {
	inset: var(--header-height) var(--gutter) auto auto;
	width: min(280px, calc(100vw - 2 * var(--gutter)));
	margin: 0;
	padding: var(--space-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--surface);
}

.site-header__nav[popover]:popover-open {
	display: flex;
	flex-direction: column;
}

.site-header__nav a {
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	color: var(--ink);
	font-weight: 500;
	text-decoration: none;
}

.site-header__nav a:hover {
	background: var(--lavender);
	color: var(--ink);
}

@media (min-width: 900px) {
	.site-header__menu-button {
		display: none;
	}

	.site-header__nav[popover] {
		position: static;
		display: flex;
		flex-direction: row;
		gap: var(--space-2);
		width: auto;
		margin-left: var(--space-8);
		padding: 0;
		border: 0;
		background: transparent;
		inset: auto;
	}

	.site-header__nav a {
		padding: var(--space-2) var(--space-3);
	}

	/* In the nav, the underline shows on hover only (guide section 7). */
	.site-header__nav a:hover {
		background: transparent;
		text-decoration: underline;
	}
}

/* 7. Footer ----------------------------------------------------------------- */

/* The ink band with the dark logo closes every page (guide section 7). */
.site-footer {
	padding: var(--space-16) 0 var(--space-8);
	background: var(--ink);
	color: var(--on-dark-muted);
}

.site-footer :focus-visible {
	outline-color: var(--indigo-on-dark);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-8) var(--space-6);
}

.site-footer__grid > :first-child {
	grid-column: 1 / -1;
}

@media (min-width: 1024px) {
	.site-footer__grid {
		/* Logo, then the five SITE-MAP columns (#717). */
		grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 0.8fr;
	}

	.site-footer__grid > :first-child {
		grid-column: auto;
	}
}

.site-footer__tagline {
	max-width: 320px;
	margin-top: var(--space-4);
	color: var(--on-dark);
}

.site-footer__heading {
	margin: 0 0 var(--space-3);
	color: var(--surface);
	font-family: var(--font-display);
	font-size: var(--text-base);
	font-weight: 600;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.site-footer a {
	color: var(--on-dark);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--surface);
	text-decoration: underline;
}

/* A column heading that is also a link (Compare, to /alternatives, B30)
   keeps the heading's colour, not the column links', and is underlined so
   it reads as a link. */
.site-footer .site-footer__heading a {
	color: var(--surface);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__base {
	margin-top: var(--space-12);
	padding-top: var(--space-6);
	border-top: 1px solid var(--text);
	color: var(--on-dark-muted);
}

/* 8. Heroes and the lens ---------------------------------------------------- */

/* The home hero is the indigo "room": a flat panel under the white header
   (the logo never sits on it), one large lens cropped in its corner. */
.hero {
	padding: var(--space-2) 0 0;
}

/* On a phone the panels sit closer to the screen edge (as in the reference
   rendering), so a 40px headline keeps an address like meet.yourfirm.com
   whole on its line. */
@media (max-width: 767px) {
	.hero > .container,
	.page-hero > .container,
	.pricing__top,
	.demo > .container,
	.notfound > .container {
		padding: 0 var(--space-3);
	}
}

.hero__panel {
	position: relative;
	overflow: hidden;
	padding: var(--space-12) var(--space-4);
	border-radius: var(--radius-panel);
	background: var(--indigo);
	color: var(--on-indigo);
}

@media (min-width: 768px) {
	.hero__panel {
		padding: var(--space-16) var(--space-12);
	}
}

@media (min-width: 1024px) {
	.hero__panel {
		padding: var(--space-24) var(--space-16);
	}

	.hero h1 {
		font-size: var(--text-6xl);
	}
}

.hero__panel h1 {
	color: var(--surface);
}

.hero__panel .lead {
	color: var(--on-indigo);
}

.hero__panel :focus-visible {
	outline-color: var(--surface);
}

.hero__panel .pill {
	background: var(--indigo-hover);
	color: var(--surface);
}

.hero__panel .checks li {
	color: var(--surface);
}

.hero__panel .checks li::before {
	color: var(--surface);
}

.hero__panel .button--primary {
	background: var(--surface);
	color: var(--indigo);
}

.hero__panel .button--primary:hover {
	background: var(--lavender);
	color: var(--indigo-hover);
}

.hero__panel .button--secondary {
	border-color: var(--on-indigo);
	color: var(--surface);
}

.hero__panel .button--secondary:hover {
	background: var(--indigo-hover);
	color: var(--surface);
}

/* The lens as the hero's one decorative shape: a ring with the coral dot. */
.lens-deco {
	position: absolute;
	top: -120px;
	right: -110px;
	width: 240px;
	height: 240px;
	border: 34px solid var(--indigo-hover);
	border-radius: var(--radius-pill);
	pointer-events: none;
}

.lens-deco::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 54px;
	height: 54px;
	border-radius: var(--radius-pill);
	background: var(--coral);
	transform: translate(-50%, -50%);
}

@media (min-width: 1024px) {
	.lens-deco {
		top: -170px;
		right: -150px;
		width: 420px;
		height: 420px;
		border-width: 56px;
	}

	.lens-deco::after {
		width: 96px;
		height: 96px;
	}
}

.hero__grid {
	position: relative;
	display: grid;
	gap: var(--space-12);
	align-items: center;
}

.hero__grid > *,
.page-hero__grid > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.hero__grid {
		grid-template-columns: 1.05fr 1fr;
		gap: var(--space-16);
	}
}

.hero__copy .pill {
	margin-bottom: var(--space-6);
}

.hero__sub {
	max-width: 560px;
	margin-top: var(--space-6);
}

.hero__actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-8);
}

/* The hand-drawn underline under "A free" in the home hero (Chris,
   2026-10-08, #717). Coral, the logo's dot: the brand's one accent, warm
   against the cool indigo panel, and never text, so its 2.2:1 on indigo
   carries no reading (BRAND-GUIDE section 2). The two words never part, so
   the stroke always sits under both, on whichever line they land. Width and
   height are in em, so the stroke grows and shrinks with the headline; the
   viewBox's 9:1 matches "A free" at any size, so the curve keeps its shape.
   It sits in the gap under the baseline, where "A free" has no descender,
   clear of the next line's capitals. No animation. The site has no dark
   scheme (no prefers-color-scheme rule), and the panel is indigo in every
   mode, so one colour serves. */
.hook-mark {
	position: relative;
	white-space: nowrap;
}

.hook-mark__line {
	position: absolute;
	left: -0.04em;
	bottom: -0.06em;
	width: calc(100% + 0.08em);
	height: 0.24em;
	overflow: visible;
	pointer-events: none;
}

.hook-mark__line path {
	fill: none;
	stroke: var(--coral);
	/* 10 of the viewBox's 20 units over the 0.24em box: about 0.12em, so the
	   stroke reads at a glance and still scales with the headline (it was
	   4.5, a hairline at desktop size; lead's ruling on #852). */
	stroke-width: 10;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (min-width: 560px) {
	.hero__actions {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* Inner pages: the hero is a lavender panel (the reference comparison page). */
.page-hero {
	padding: var(--space-2) 0 0;
}

.page-hero__panel {
	padding: var(--space-8) var(--space-4);
	border-radius: var(--radius-panel);
	background: var(--lavender);
}

@media (min-width: 768px) {
	.page-hero__panel {
		padding: var(--space-12);
	}
}

@media (min-width: 1024px) {
	.page-hero--split .page-hero__panel {
		padding: var(--space-16);
	}
}

.page-hero__panel .pill {
	margin-bottom: var(--space-6);
	background: var(--surface);
}

.page-hero__panel .step {
	background: var(--surface);
}

.page-hero__grid {
	display: grid;
	gap: var(--space-12);
	align-items: center;
}

@media (min-width: 1024px) {
	.page-hero__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-16);
	}
}

.page-hero h1 {
	max-width: 880px;
}

/* An example address in a headline is never split (#853; MESSAGING.md,
   "Own address"). The h1 keeps its brand size; the address, final "."
   included, sits on its own line, and only that line shrinks, and only
   where the column is too narrow for it at the h1's size (BRAND-GUIDE
   section 2, the address-line exception). 100cqi is the column's width;
   the divisor is the address's width in ems in Plus Jakarta Sans 800,
   measured in Chromium ("meet.yourfirm.com." 9.81em, the longest of the
   three headline addresses), plus a little room. The floor still fits a
   320px phone (264px column: 24 x 10). Without container units the line
   wraps at the <wbr> after "meet.", as before #853, so nothing overflows
   or is clipped. */
.address-line {
	display: block;
}

@supports (width: 1cqi) {
	.address-fit {
		container-type: inline-size;
	}

	h1 > .address-line {
		white-space: nowrap;
		font-size: clamp(var(--text-xl), 100cqi / 10, 1em);
	}
}

.page-hero .lead {
	max-width: 600px;
	margin-top: var(--space-6);
}

.page-hero .hero__actions {
	margin-top: var(--space-8);
}

.page-meta {
	margin-top: var(--space-6);
	color: var(--muted);
}

/* "Updated <date>" on guides and comparison pages (#551): sits tight under a
   page-meta line when there is one. */
.page-meta + .page-meta--updated {
	margin-top: var(--space-2);
}

/* Breadcrumbs: Home / This page. */
.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-6);
	padding: 0;
	list-style: none;
	color: var(--muted);
}

.crumbs li + li::before {
	content: "/";
	margin-right: var(--space-2);
	color: var(--muted);
}

.crumbs a {
	color: var(--muted);
	text-decoration: none;
}

.crumbs a:hover {
	color: var(--indigo);
	text-decoration: underline;
}

/* 9. Lens bullets, steps ---------------------------------------------------- */

/* The check bullet is the lens: a ring (indigo on light, white on the hero)
   with the coral dot in its middle. */
.checks {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-6) 0 0;
	padding: 0;
	list-style: none;
}

.checks li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	color: var(--ink);
	font-weight: 500;
}

/* Long items wrap: the lens sits on the first line, on every page (the
   /demo notes wrap to two and three lines on a phone). */
.checks li::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: var(--space-1);
	border: 4px solid currentColor;
	border-radius: var(--radius-pill);
	color: var(--indigo);
}

.checks li::after {
	content: "";
	position: absolute;
	top: 11px;
	left: 7px;
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background: var(--coral);
}

.group .checks li {
	color: var(--text);
	font-weight: 400;
}

/* Steps: three across from 900px, each marked by a lens ring with its number. */
.steps {
	display: grid;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

@media (min-width: 900px) {
	.steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

.step {
	padding: var(--space-6);
	border-radius: var(--radius-card);
	background: var(--lavender);
	counter-increment: step;
}

@media (min-width: 768px) {
	.step {
		padding: var(--space-8);
	}
}

.section--tint .step,
.section--peach .step {
	background: var(--surface);
}

.step::before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--space-6);
	border: 4px solid var(--indigo);
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
}

.step p {
	margin-top: var(--space-3);
}

/* 10. Cards and lists ------------------------------------------------------- */

/* Cards are flat: lavender on white, white on a tinted section. */
.cards {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 1024px) {
	.cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.card {
	padding: var(--space-6);
	border: 0;
	border-radius: var(--radius-card);
	background: var(--lavender);
}

.section--tint .card,
.section--peach .card {
	background: var(--surface);
}

@media (min-width: 768px) {
	.card {
		padding: var(--space-8);
	}
}

.card h3 {
	margin-top: var(--space-6);
}

.card p {
	margin-top: var(--space-3);
}

.card__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--indigo);
}

.section--tint .card__icon,
.section--peach .card__icon {
	background: var(--lavender);
}

.card__icon svg {
	width: 24px;
	height: 24px;
}

.card__icon--accent,
.section--tint .card__icon--accent {
	background: var(--peach);
	color: var(--ink);
}

/* Four cards in a row on wide screens, two on tablets. */
@media (min-width: 640px) {
	.cards--4 {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1100px) {
	.cards--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cards--4 .card {
	padding: var(--space-6);
}

.features {
	display: grid;
	gap: var(--space-8) var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.features {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1024px) {
	.features {
		grid-template-columns: repeat(3, 1fr);
	}
}

.features h3 {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-md);
}

.features h3 svg {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--indigo);
}

.features p {
	margin-top: var(--space-2);
	color: var(--muted);
}

.split {
	display: grid;
	gap: var(--space-12);
	align-items: center;
}

@media (min-width: 1024px) {
	.split {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-16);
	}
}

.split > * {
	min-width: 0;
}

.split__copy p {
	margin-top: var(--space-4);
}

.split__copy .checks {
	margin-top: var(--space-8);
}

/* Feature groups: a card per area, each with a lens list. */
.groups {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 768px) {
	.groups {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1100px) {
	.groups {
		grid-template-columns: repeat(3, 1fr);
	}
}

.group {
	padding: var(--space-8);
	border-radius: var(--radius-card);
	background: var(--lavender);
}

.group h3 {
	margin-top: var(--space-6);
}

.group > p {
	margin-top: var(--space-2);
	color: var(--muted);
}

.group .checks {
	gap: var(--space-3);
}

/* Three search-led sections side by side, each with its own h2. */
.usecases {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 1024px) {
	.usecases {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Four use cases (/for/tutoring) sit two by two, not three and an orphan. */
	.usecases--pairs {
		grid-template-columns: repeat(2, 1fr);
	}
}

.usecase {
	padding: var(--space-8);
	border-radius: var(--radius-card);
	background: var(--lavender);
}

.section--tint .usecase {
	background: var(--surface);
}

.usecase h2 {
	font-size: var(--text-xl);
	line-height: 1.25;
}

.usecase p {
	margin-top: var(--space-3);
}

/* Questions and answers: cards in a grid on inner pages. */
.faq {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 900px) {
	.faq {
		grid-template-columns: 1fr 1fr;
	}
}

.faq__item {
	padding: var(--space-6);
	border-radius: var(--radius-card);
	background: var(--lavender);
}

.section--tint .faq__item {
	background: var(--surface);
}

.faq__item h3 {
	font-size: var(--text-md);
}

.faq__item p {
	margin-top: var(--space-3);
}

.faq__link {
	font-weight: 600;
}

/* The pricing teaser: no figure on inner pages (the pricing gate); the home
   page's cost contrast is the one with figures (free-round brief, #717). */
.price-card {
	display: grid;
	gap: var(--space-6);
	padding: var(--space-8) var(--space-6);
	border-radius: var(--radius-panel);
	background: var(--lavender);
}

.section--tint .price-card {
	background: var(--surface);
}

@media (min-width: 900px) {
	.price-card {
		grid-template-columns: 1fr auto;
		align-items: center;
		padding: var(--space-12);
	}
}

.price-card p {
	max-width: 58ch;
	margin-top: var(--space-3);
}

.price-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-6);
}

/* The comparison pages' opening strengths (alternatives round, #717): five
   short items with an icon each, right under the hero. One column on a
   phone, two from 640px, five in a row from 1240px. The unbreakable example
   address needs about 204px in the brand font and 211px in the fallback
   font before it loads; from 1240px each fifth is about 213px, so the five
   stay even either way (review of #834). */
.strengths-band {
	padding: var(--space-12) 0 var(--space-16);
}

.strengths {
	display: grid;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The band is white, so the icon tile is lavender, as on a white page. */
.strengths .card__icon {
	background: var(--lavender);
}

@media (min-width: 640px) {
	.strengths {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1240px) {
	.strengths {
		grid-template-columns: repeat(5, 1fr);
	}
}

.strengths__title {
	margin-top: var(--space-3);
	color: var(--ink);
	font-weight: 700;
}

.strengths__body {
	margin-top: var(--space-1);
	color: var(--muted);
	overflow-wrap: anywhere;
}

/* A linked body reads as body text with a link's underline, not as a
   second title in indigo. */
.strengths__body .text-link {
	font-weight: 400;
	text-decoration: underline;
}

/* An example address that never breaks, its punctuation included: the
   comparison strengths' "meet.yourcompany.com," (src/layouts/Comparison.astro),
   so no line starts with the comma (#829 follow-up). Headlines use
   .address-line instead (#860). */
.address-whole {
	white-space: nowrap;
}

/* "What you'd pay [competitor] for": one card per need, Castio's side and
   the competitor's side within it, side by side from 768px. */
.pay-grid__source {
	display: block;
	margin-top: var(--space-1);
}

.pay-grid {
	display: grid;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pay-grid__row {
	display: grid;
	gap: var(--space-3);
	padding: var(--space-6);
	border-radius: var(--radius-card);
	background: var(--surface);
}

@media (min-width: 768px) {
	.pay-grid__row {
		grid-template-columns: 2fr 1.5fr 2fr;
		align-items: start;
	}
}

.pay-grid__need {
	color: var(--ink);
	font-weight: 700;
}

.pay-grid__castio,
.pay-grid__them {
	display: grid;
	gap: var(--space-1);
	color: var(--text);
}

.pay-grid__who {
	color: var(--muted);
	font-weight: 600;
}

/* A label can wrap to two lines since the recording row names its rate
   (2026-10-08): the check keeps its size and sits by the first line. */
.pay-grid__included {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--space-2);
	color: var(--indigo-hover);
	font-weight: 700;
}

.pay-grid__included svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

.pay-grid__note {
	color: var(--muted);
}

.pay-grid__sources {
	margin-top: var(--space-6);
	color: var(--muted);
}

.not-yet__line {
	max-width: 58ch;
	margin-top: var(--space-4);
}

/* The home page's sections each end pointing at Get Castio (free-round
   brief, #717): one text link under the section, and where a section makes
   a sourced claim, the source line above it. */
.section-next {
	margin-top: var(--space-8);
	font-weight: 600;
}

.section-sources {
	margin-top: var(--space-6);
	color: var(--muted);
}

/* Related links. */
.cross-links {
	margin-top: var(--space-16);
}

.cross-links h2 {
	font-size: var(--text-xl);
}

.link-cards {
	display: grid;
	gap: var(--space-4);
	margin: var(--space-6) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.link-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.link-cards--3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.link-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	height: 100%;
	padding: var(--space-6);
	border-radius: var(--radius-card);
	background: var(--lavender);
	color: var(--text);
	text-decoration: none;
}

.link-card:hover {
	color: var(--text);
}

.link-card__title {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
}

.link-card:hover .link-card__title {
	color: var(--indigo);
	text-decoration: underline;
}

/* On a lavender band a lavender card disappears: it sits on white, as
   .card does there. */
.section--tint .link-card {
	background: var(--surface);
}

/* The /alternatives hub's cards (#886): a line border, the buttons' arrow,
   and the same answer to hover and keyboard focus, so each reads as a link.
   The last line says what the page covers. */
.link-card--go {
	border: 1px solid var(--line);
	transition: border-color 0.15s ease;
}

.link-card--go .link-card__title {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.link-card--go .arrow {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--indigo);
	transition: transform 0.15s ease;
}

.link-card--go:hover,
.link-card--go:focus-visible {
	border-color: var(--indigo);
}

.link-card--go:focus-visible .link-card__title {
	color: var(--indigo);
	text-decoration: underline;
}

.link-card--go:hover .arrow,
.link-card--go:focus-visible .arrow {
	transform: translateX(2px);
}

.link-card__covers {
	color: var(--muted);
}

/* 11. Tables ---------------------------------------------------------------- */

/* Every table sits in a scroll box (guide section 7): on a phone the table
   keeps its 560px and scrolls inside the box, never the page. The box is a
   focusable, labelled region so a keyboard can scroll it. */
.table-scroll {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--surface);
	-webkit-overflow-scrolling: touch;
}

.table-scroll table {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.table-scroll caption {
	padding: var(--space-4) var(--space-4) 0;
	color: var(--muted);
	text-align: left;
}

.table-scroll th,
.table-scroll td {
	padding: var(--space-4);
	border-top: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.table-scroll thead th {
	border-top: 0;
	background: var(--lavender);
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
}

/* The category column: muted, a label rather than a verdict. */
.table-scroll tbody th,
.table-scroll td:first-child {
	width: 22%;
	color: var(--muted);
	font-weight: 600;
}

.table-scroll td {
	color: var(--text);
}

/* Our column is last and carries the mark; it is never coloured as a winner. */
.table-scroll thead th.compare__castio,
.table-scroll thead th.table__castio {
	background: var(--on-indigo);
}

.compare__mark {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

/* The comparison table on a phone (preview QA, #717): its box is narrower
   than the table's 560px, so Castio's column, last, starts at or past the
   box's edge. A line above the box says the table scrolls and what is past
   the edge. From 600px the whole table fits and the line goes. */
.table-hint {
	margin: 0 0 var(--space-2);
	color: var(--muted);
	font-weight: 600;
}

@media (min-width: 600px) {
	.table-hint {
		display: none;
	}
}

/* The /alternatives hub's table (B30, #881): six columns, Castio's second
   after the category, so it is on screen from the start and the four other
   products scroll inside the box. On a phone the cells keep the 16px
   padding and 880px holds them, which keeps Castio's column inside a 390px
   screen. From 768px the padding grows and the words need 1031px (measured
   in Chromium), so the table is 1040px; that fits the container from 1104px
   (1040 plus two 32px gutters), so the hint, which names the products past
   the edge, shows below 1120px. */
.table-scroll--wide table {
	min-width: 880px;
}

@media (min-width: 768px) {
	.table-scroll--wide table {
		min-width: 1040px;
	}
}

.table-scroll--wide tbody td:first-child {
	width: 12%;
}

/* The row names stay in view while the hub's table scrolls sideways (#886).
   Sticky moves nothing in the layout, so the page is no wider; the cell's
   own background hides the cells passing beneath it (no shadow, B1). */
.table-scroll--wide thead th:first-child,
.table-scroll--wide tbody td:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
}

.table-scroll--wide tbody td:first-child {
	background: var(--surface);
}

@media (min-width: 600px) {
	.table-hint--wide {
		display: block;
	}
}

@media (min-width: 1120px) {
	.table-hint--wide {
		display: none;
	}
}

/* Each competitor fact's vendor page, after the fact. */
.table-source {
	color: var(--muted);
	text-decoration: underline;
}

@media (min-width: 768px) {
	.table-scroll th,
	.table-scroll td {
		padding: var(--space-4) var(--space-6);
	}
}

/* Status labels in the feature table. */
.status {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	font-weight: 600;
	white-space: nowrap;
}

.status--no {
	background: var(--line);
	color: var(--text);
	font-weight: 500;
}

.table-note {
	max-width: var(--measure);
	margin-top: var(--space-6);
	color: var(--muted);
}

/* 12. Pricing --------------------------------------------------------------- */

/* The heading and the three steps sit at page width in a lavender panel
   (#717); below them one column, at most 720px, so the eye goes down, not
   across (guide section 8). The figure is display 800 at 56px with
   Cloudflare's cost under it in body size. */
.pricing__top {
	padding-top: var(--space-2);
}

.pricing__top .steps {
	margin-top: var(--space-8);
}

.pricing__what {
	max-width: 720px;
	margin-top: var(--space-4);
	color: var(--text);
	font-size: var(--text-md);
}

.pricing__grid {
	display: grid;
	gap: var(--space-12);
	max-width: 720px;
	padding-top: var(--space-12);
	padding-bottom: var(--space-24);
}

.pricing__plan {
	margin-top: var(--space-8);
	padding: var(--space-8) var(--space-6);
	border-radius: var(--radius-card);
	background: var(--lavender);
}

.pricing > .pricing__plan:first-child {
	margin-top: 0;
}

@media (min-width: 768px) {
	.pricing__plan {
		padding: var(--space-12);
	}
}

.pricing__plan .pill {
	background: var(--surface);
}

.pricing__label {
	color: var(--indigo-hover);
	font-weight: 600;
}

h2.pricing__label,
h3.pricing__label {
	font-family: inherit;
	font-size: var(--text-md);
	letter-spacing: normal;
	word-spacing: normal;
}

.pricing__figure {
	margin-top: var(--space-4);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.pricing__per {
	color: var(--muted);
	font-family: inherit;
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: normal;
}

.pricing__cloudflare {
	margin-top: var(--space-4);
	color: var(--text);
}

/* The yearly renewal, under the Cloudflare line (#735), and the billing
   portal link at the end of the card once online payment is live. */
.pricing__renews {
	margin-top: var(--space-3);
	color: var(--ink);
	font-weight: 600;
}

/* The refund rule, under the renewal line (terms section 6); the tax is
   in the line under the price (release prep, #717). */
.pricing__fees {
	margin-top: var(--space-2);
	color: var(--text);
}

/* What the $149 buys, under the Cloudflare line (Chris, 2026-10-07). */
.pricing__includes-line {
	margin-top: var(--space-3);
	color: var(--text);
}

.pricing__manage {
	margin-top: var(--space-6);
}

.pricing__includes {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-6);
	padding-left: var(--space-6);
	list-style: disc;
}

.pricing__includes li::marker {
	color: var(--indigo);
}

.pricing__includes .pill {
	margin-left: var(--space-2);
	vertical-align: middle;
}

/* The free self-install is quieter: white with a rule, muted text, no button. */
.pricing__plan--soon {
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
}

.pricing__plan--soon .pricing__label {
	color: var(--muted);
}

/* Card B's heading and its "Coming soon" pill, side by side; the pill is a
   sibling of the h3, outside the heading's name. */
.pricing__label-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.pricing__plan--soon .pill {
	background: var(--lavender);
}

.pricing__plan--soon p {
	margin-top: var(--space-3);
}

.pricing__needs {
	margin-top: var(--space-3);
	color: var(--muted);
}

.pricing__cta {
	width: 100%;
	margin-top: var(--space-6);
}

.pricing__details {
	display: grid;
	gap: var(--space-12);
}

.pricing-detail h2 {
	font-size: var(--text-xl);
}

@media (min-width: 768px) {
	.pricing-detail h2 {
		font-size: var(--text-2xl);
	}
}

.pricing-detail p {
	margin-top: var(--space-4);
}

.pricing-detail + .pricing-detail {
	padding-top: var(--space-12);
	border-top: 1px solid var(--line);
}

.pricing__next {
	margin-top: var(--space-8);
}

/* Get Castio (free-round brief, #717): the two choices, side by side from
   900px and stacked on a phone, on the home page and /pricing. The cards are
   the pricing cards above; the "Install it yourself" card keeps the quieter style and
   holds the one-field "Notify me" form. */
.get-castio__cards {
	display: grid;
	gap: var(--space-6);
}

@media (min-width: 900px) {
	.get-castio__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

.get-castio__cards .pricing__plan {
	margin-top: 0;
}

.notify {
	display: grid;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

/* The label sits close to its own field, as in the /demo form; the button
   keeps 16px from the field. */
.notify .button {
	margin-top: var(--space-2);
}

/* The note lines up with the rest of the card, which is left-aligned. */
.notify .form__fine {
	text-align: left;
}

/* /pricing's cost calculator (B17, #717), after the worked example and the
   recording rates: a bordered panel holding its title (not a heading, so it
   heads nothing after it), three number fields
   (stacked on a phone, side by side from 768px), the recording checkbox
   and the answer behind a 4px indigo rule, like the answer callouts. The
   answer wraps anywhere, so a visitor's largest figures never push the page
   wider than a phone (QA of #872). Hidden until its script runs ([hidden]
   above wins over display). */
.calc {
	display: grid;
	gap: var(--space-4);
	margin-top: var(--space-6);
	padding: var(--space-6);
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--surface);
}

/* Reset .pricing-detail p's top margin: the panel's gap spaces it. */
.calc .calc__title {
	margin-top: 0;
	color: var(--ink);
	font-size: var(--text-lg);
	font-weight: 600;
}

.calc__fields {
	display: grid;
	gap: var(--space-4);
}

@media (min-width: 768px) {
	.calc__fields {
		grid-template-columns: repeat(3, 1fr);
		align-items: end;
	}
}

.calc__result {
	display: grid;
	gap: var(--space-2);
	padding-left: var(--space-4);
	border-left: 4px solid var(--indigo);
	overflow-wrap: anywhere;
}

.calc__total {
	color: var(--ink);
	font-size: var(--text-md);
	font-weight: 600;
}

/* 13. Closing band ---------------------------------------------------------- */

/* h2, one sentence, one button, on an ink panel. Same on every page. */
.cta-band {
	padding: var(--space-16) 0;
}

/* After a white section its own padding is the gap above the band. */
.section:not(.section--tint, .section--peach) + .cta-band {
	padding-top: 0;
}

.cta-band__panel {
	padding: var(--space-12) var(--space-6);
	border-radius: var(--radius-panel);
	background: var(--ink);
	color: var(--on-dark);
}

@media (min-width: 768px) {
	.cta-band__panel {
		padding: var(--space-16) var(--space-12);
	}
}

.cta-band__panel :focus-visible {
	outline-color: var(--indigo-on-dark);
}

.cta-band h2 {
	color: var(--surface);
}

.cta-band p {
	max-width: 54ch;
	margin-top: var(--space-3);
	font-size: var(--text-md);
}

.cta-band .button {
	margin-top: var(--space-6);
}

/* 14. Product pictures -------------------------------------------------------
   The home hero's real capture of the meeting room (#825), then the drawings
   used on the other pages. */

/* The real capture: a framed image, no browser bar, no address. */
.product-shot {
	margin: 0;
}

/* The frame is the <picture>: the room's own background colour as an 8px
   padding, so the rounded corners clip only padding, never the room's corner
   text (QA of #849 on a phone: "Full Screen", the timer). 8px is more than
   the depth a 20px corner cuts (about 6px). */
.product-shot picture {
	display: block;
	padding: var(--space-2);
	border: 1px solid var(--ink);
	border-radius: var(--radius-card);
	background: var(--capture-room);
}

.product-shot img {
	width: 100%;
	height: auto;
}

.product-shot figcaption {
	margin-top: var(--space-3);
	text-align: center;
}

/* The drawings: pictures of the product drawn in HTML and CSS, not
   screenshots. They wear the example firm's green (--mock-*); inside them
   14px text and literal pixels are allowed, because they are scaled UI. */

.mock {
	position: relative;
	margin: 0;
}

.mock__browser {
	overflow: hidden;
	padding: 10px;
	border-radius: var(--radius-card);
	background: var(--surface);
}

.mock__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 4px 10px;
}

.mock__dots {
	display: flex;
	gap: 6px;
}

.mock__dots span {
	width: 9px;
	height: 9px;
	border-radius: var(--radius-pill);
	background: var(--on-indigo);
}

.mock__url {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 6px;
	min-width: 0;
	margin-left: 8px;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	background: var(--lavender);
	color: var(--muted);
	font-size: var(--text-sm);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mock__url svg {
	flex: none;
	width: 12px;
	height: 12px;
	color: var(--success);
}

.mock__room {
	display: grid;
	gap: 10px;
	padding: 10px;
	border-radius: 12px;
	background: var(--mock-room);
}

.mock__roombar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 2px 4px 0;
	color: var(--mock-soft);
	font-size: var(--text-sm);
}

.mock__firm {
	color: var(--mock-soft);
	font-family: var(--font-display);
	font-weight: 600;
}

.mock__rec {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mock__rec::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--danger);
}

.mock__tiles {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
	aspect-ratio: 16 / 9;
}

.mock__tile {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--mock-tile-bg);
}

.mock__tile--main {
	grid-row: span 2;
	outline: 2px solid var(--mock-tile);
	outline-offset: -2px;
}

.mock__figure {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 82%;
	color: var(--mock-figure);
}

.mock__name {
	position: absolute;
	bottom: 6px;
	left: 6px;
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--mock-room);
	color: var(--mock-soft);
	font-size: var(--text-sm);
	line-height: 1.4;
}

.mock__controls {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.mock__control {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-pill);
	background: var(--mock-control);
	color: var(--mock-soft);
}

.mock__control svg {
	width: 16px;
	height: 16px;
}

.mock__control--brand {
	background: var(--mock-tile);
	color: var(--surface);
}

.mock__control--leave {
	width: 48px;
	background: var(--danger);
	color: var(--surface);
}

/* The join page card that overlaps the frame: the firm's logo lives there. */
.mock__join {
	position: relative;
	width: min(280px, 88%);
	margin: -16px 0 0 16px;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--surface);
}

@media (min-width: 1024px) {
	.mock__join {
		position: absolute;
		bottom: calc(-1 * var(--space-8));
		left: calc(-1 * var(--space-8));
		width: 240px;
		margin: 0;
	}

	/* The join card covers the frame's lower left, so the controls sit to
	   the right of it, whole, instead of half hidden under its edge. */
	.mock__controls {
		justify-content: flex-end;
	}
}

.mock__join-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mock__join-logo {
	display: grid;
	flex: none;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--mock);
	color: var(--surface);
	font-family: var(--font-display);
	font-weight: 800;
}

.mock__join-firm {
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.2;
}

.mock__join-note {
	color: var(--muted);
	font-size: var(--text-sm);
	line-height: 1.4;
}

.mock__join-field {
	margin-top: 14px;
	padding: 8px 12px;
	border: 1px solid var(--muted);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-size: var(--text-sm);
}

.mock__join-button {
	margin-top: 8px;
	padding: 8px 12px;
	border-radius: var(--radius-pill);
	background: var(--mock);
	color: var(--surface);
	font-size: var(--text-sm);
	font-weight: 600;
	text-align: center;
}

/* The branding settings panel beside "Your brand" (mirrors Admin, Branding). */
.brand-panel {
	margin: 0;
	padding: var(--space-6);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	background: var(--surface);
}

.brand-panel__title {
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
}

.brand-panel__rows {
	display: grid;
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
}

.brand-panel__rows li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-top: 1px solid var(--line);
}

.brand-panel__value {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--ink);
	font-weight: 500;
	white-space: nowrap;
}

.swatch {
	width: 24px;
	height: 24px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--mock);
}

.swatch--room {
	background: var(--mock-room);
}

.swatch--text {
	border-color: var(--muted);
	background: var(--surface);
}

.brand-panel__logo {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-sm);
	background: var(--mock);
	color: var(--surface);
	font-family: var(--font-display);
	font-weight: 800;
}

/* The host's new-meeting form, in the example firm's colours. */
.mock-setup {
	margin: 0;
	padding: var(--space-6);
	border-radius: var(--radius-card);
	background: var(--surface);
}

.mock-setup__title {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
}

.mock-setup__label {
	margin-top: 14px;
	margin-bottom: 6px;
	color: var(--muted);
	font-size: var(--text-sm);
	font-weight: 600;
}

.mock-setup__field {
	margin-top: 12px;
	padding: 8px 12px;
	border: 1px solid var(--muted);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-size: var(--text-sm);
}

.mock-setup__label + .mock-setup__field {
	margin-top: 0;
}

.mock-setup__seg {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	border-radius: 12px;
	background: var(--lavender);
}

.mock-setup__seg span {
	flex: 1;
	padding: 6px 8px;
	border-radius: var(--radius-sm);
	color: var(--text);
	font-size: var(--text-sm);
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
}

.mock-setup__seg .is-on {
	background: var(--mock);
	color: var(--surface);
}

.mock-setup__pair {
	display: grid;
	gap: 0 12px;
}

@media (min-width: 480px) {
	.mock-setup__pair {
		grid-template-columns: 1fr 1.4fr;
	}
}

.mock-setup__toggles {
	display: grid;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.mock-setup__toggles li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--line);
	color: var(--ink);
	font-size: var(--text-sm);
	font-weight: 500;
}

.mock-setup__value {
	color: var(--mock);
	font-weight: 600;
}

.mock-setup__switch {
	position: relative;
	flex: none;
	width: 36px;
	height: 20px;
	border-radius: var(--radius-pill);
	background: var(--muted);
}

.mock-setup__switch::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: var(--radius-pill);
	background: var(--surface);
}

.mock-setup__switch.is-on {
	background: var(--mock);
}

.mock-setup__switch.is-on::after {
	left: 18px;
}

.mock-setup__button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin-top: 12px;
	border-radius: var(--radius-pill);
	background: var(--mock);
	color: var(--surface);
	font-weight: 600;
}

/* What runs in your own Cloudflare account (home trust section, BACKLOG B23
   (b), src/components/OwnAccountDiagram.astro). Boxes and real text, one
   layout top to bottom at every width: the parties outside (clients and
   Cloudflare above, Castio (us) below), arrows with their labels, and the
   account box in the middle, whose three items sit side by side from 1024px.
   Every label is 16px or more and wraps inside its box, so a 320px phone
   never scrolls sideways. White on the tinted section, no shadows. */
.own-account {
	max-width: 880px;
	margin: 0 0 var(--space-12);
}

.own-account__drawing {
	display: grid;
	justify-items: center;
	gap: var(--space-2);
	text-align: center;
	color: var(--ink);
}

.own-account__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
	width: 100%;
	max-width: 640px;
}

/* Castio (us) sits under both of its arrows: the row and the box share one
   width, so each arrow lands on the box. */
.own-account__row--us,
.own-account__node--us {
	max-width: 400px;
}

.own-account__party {
	display: grid;
	justify-items: center;
	gap: var(--space-2);
}

.own-account__node {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	font-weight: 700;
	line-height: 1.3;
}

.own-account__node--us {
	width: 100%;
	border-color: var(--indigo);
}

/* An arrow with its label beside it, so the arrow runs straight from one
   box to the next. */
.own-account__flow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	color: var(--text);
	line-height: 1.3;
	text-align: left;
}

.own-account__arrow {
	flex: none;
	width: 24px;
	height: 40px;
	fill: none;
	stroke: var(--indigo);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.own-account__arrow--up {
	transform: rotate(180deg);
}

.own-account__box {
	display: grid;
	gap: var(--space-4);
	width: 100%;
	padding: var(--space-4);
	border: 2px solid var(--indigo);
	border-radius: var(--radius-panel);
	background: var(--surface);
}

.own-account__title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 800;
	line-height: 1.3;
}

.own-account__items {
	display: grid;
	gap: var(--space-3);
}

.own-account__item {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--lavender);
	color: var(--text);
	line-height: 1.3;
}

.own-account__item strong {
	color: var(--ink);
	font-size: var(--text-md);
	font-weight: 700;
}

.own-account__caption {
	margin-top: var(--space-6);
	color: var(--muted);
}

.own-account__caption + .own-account__caption {
	margin-top: var(--space-2);
}

.own-account__words {
	margin-top: var(--space-3);
	color: var(--text);
}

.own-account__words summary {
	cursor: pointer;
	color: var(--indigo);
	font-weight: 600;
}

.own-account__words ul {
	margin-top: var(--space-3);
	padding-left: var(--space-6);
	list-style: disc;
}

.own-account__words li + li {
	margin-top: var(--space-2);
}

@media (min-width: 768px) {
	.own-account__box {
		padding: var(--space-6);
	}
}

@media (min-width: 1024px) {
	.own-account__items {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 15. Demo page and form ---------------------------------------------------- */

/* The intro and the form share one lavender panel; the form is a white card. */
.demo {
	padding: var(--space-2) 0 var(--space-16);
}

.demo__grid {
	display: grid;
	gap: var(--space-12);
}

.demo__grid > * {
	min-width: 0;
}

/* One column, below 1024px (RC QA, #717): someone who came for the free
   demo meets the form before the $149 install card. The intro's blocks
   join the page grid (display: contents) so `order` can put the form
   between the intro copy and the card. An install arrival keeps the card
   where it was, above the form, beside the install copy. From 1024px the
   two columns are unchanged. */
@media (max-width: 1023px) {
	.demo__grid {
		gap: 0;
	}

	.demo__intro {
		display: contents;
	}

	.demo__intro > * {
		min-width: 0;
	}

	.demo__grid > .form {
		order: 1;
		margin-top: var(--space-12);
	}

	[data-install-offer] {
		order: 2;
		margin-top: var(--space-4);
	}

	html[data-want="install"] [data-install-offer] {
		order: 0;
		margin-top: 0;
	}
}

@media (min-width: 1024px) {
	.demo__grid {
		grid-template-columns: 1fr 480px;
		gap: var(--space-16);
		align-items: start;
	}
}

.demo__sub {
	max-width: 520px;
	margin-top: var(--space-6);
}

.demo__intro .checks {
	margin-top: var(--space-8);
}

.demo__note {
	max-width: 520px;
	margin-top: var(--space-6);
	color: var(--muted);
}

.demo__intro .pricing__plan {
	background: var(--surface);
}

.form {
	display: grid;
	gap: var(--space-6);
	padding: var(--space-6);
	border-radius: var(--radius-card);
	background: var(--surface);
}

/* When the browser scrolls to a field it refuses (an empty required field),
   the html scroll padding keeps it below the sticky header and this margin
   keeps the field's label in view too (label line plus the field's gap,
   about 34px), so the "fill in this field" bubble points at a field the
   visitor can see (RC QA, #717). */
.form input {
	scroll-margin-top: var(--space-8);
}

@media (min-width: 768px) {
	.form {
		padding: var(--space-8);
	}
}

.field {
	display: grid;
	gap: var(--space-2);
}

.field__label {
	color: var(--ink);
	font-weight: 600;
}

/* Inputs show a border a visitor can see (3:1 against white). */
.field__input {
	width: 100%;
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--muted);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	transition: border-color 0.15s ease;
}

.field__input::placeholder {
	color: var(--muted);
}

.field__input:focus-visible {
	outline: 2px solid var(--indigo);
	outline-offset: 1px;
	border-color: var(--indigo);
}

.field__input[aria-invalid="true"] {
	border-color: var(--danger);
}

/* "What would you like?" on /demo (#693): a fieldset of two radio rows. */
.field--choice {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.field__choice {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 48px;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--muted);
	border-radius: var(--radius-md);
	background: var(--surface);
	color: var(--ink);
	cursor: pointer;
}

.field__choice input {
	accent-color: var(--indigo);
}

.field__choice:has(input:checked) {
	border-color: var(--indigo);
	background: var(--lavender);
}

.field__choice:has(input:focus-visible) {
	outline: 2px solid var(--indigo);
	outline-offset: 1px;
}

.field--choice[aria-invalid="true"] .field__choice {
	border-color: var(--danger);
}

.field__error {
	color: var(--danger);
}

.form__submit {
	width: 100%;
	margin-top: var(--space-2);
}

.form__submit:disabled {
	cursor: progress;
	opacity: 0.7;
}

.form__status:empty {
	display: none;
}

.form__status[data-state="success"],
.form__status[data-state="error"] {
	padding: var(--space-4);
	border-radius: var(--radius-md);
	color: var(--ink);
}

.form__status[data-state="success"] {
	background: var(--mock-soft);
}

.form__status[data-state="error"] {
	background: var(--peach);
}

.form__fine {
	color: var(--muted);
	text-align: center;
}

/* "Subscribe: $149 a year" on /demo, once the Stripe links are live (#735).
   The automatic renewal terms sit directly above the button and must be
   clear and conspicuous (California Bus. & Prof. Code section 17601(c)):
   full-size ink text on a lavender panel with an indigo rule, set apart
   from the grey fine print of the form, never smaller than the text
   around it. */
.subscribe {
	display: grid;
	gap: var(--space-4);
}

.subscribe__terms {
	padding: var(--space-4);
	border-left: 4px solid var(--indigo);
	border-radius: var(--radius-md);
	background: var(--lavender);
	color: var(--ink);
	font-size: var(--text-base);
}

.subscribe__button {
	width: 100%;
}

.subscribe__ask {
	padding-top: var(--space-4);
	border-top: 1px solid var(--line);
	color: var(--text);
}

/* With the subscribe block on the page the submit button ships secondary
   (one primary at a time, BRAND section 9). The block is hidden while the
   free demo is chosen, so the submit is the primary again then. On a page
   without the block the submit is already primary and this changes
   nothing. */
html[data-choice="demo"] .form__submit {
	background: var(--indigo);
	border-color: transparent;
	color: var(--surface);
}

html[data-choice="demo"] .form__submit:hover {
	background: var(--indigo-hover);
	color: var(--surface);
}

/* 16. Guides and comparison pages -------------------------------------------
 * The /alternatives/* comparison template (layouts/Comparison.astro) and the
 * guide template (layouts/Guide.astro): the table first, then the reading
 * column (--measure, 560px) with "On this page" sticky beside it from 1024px.
 */

.compare {
	padding: var(--space-12) 0 var(--space-16);
}

.compare h2 {
	margin-bottom: var(--space-6);
}

/* The comparison hero is compact (guide section 8: the table goes above the
   fold on desktop). From 1024px the h1 sits beside the intro and the asks, at
   the phone heading size, and the table's heading tightens, so the table's
   header and first row are on the first screen at 1366x768. Below 1024px the
   h1 and the intro stack with no grid gap: the lead's own 24px margin is the
   space, as on every other hero (#723). */
.page-hero__compact {
	display: grid;
}

@media (min-width: 1024px) {
	.page-hero__panel--compact {
		padding: var(--space-8) var(--space-12);
	}

	.page-hero__compact {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-12);
		align-items: start;
	}

	.page-hero__panel--compact h1 {
		font-size: var(--text-3xl);
	}

	.page-hero__panel--compact .lead {
		margin-top: 0;
		font-size: var(--text-md);
	}

	.page-hero__panel--compact .page-meta--updated {
		margin-top: var(--space-3);
	}

	.page-hero__panel--compact .hero__actions {
		margin-top: var(--space-6);
	}

	.page-hero__panel--compact .crumbs ol {
		margin-bottom: var(--space-4);
	}

	.compare {
		padding-top: var(--space-8);
	}

	.compare h2 {
		margin-bottom: var(--space-4);
		font-size: var(--text-xl);
	}
}

/* At 1024 to 1279px each column is about 400px, too narrow for both asks on
   one row; stacked, they pushed the table's first row below a 1024x768 fold.
   Narrower panel sides and column gap, and the header button's 16px side
   padding on the asks, put both asks on one row (#723). */
@media (min-width: 1024px) and (max-width: 1279px) {
	.page-hero__panel--compact {
		padding-inline: var(--space-8);
	}

	.page-hero__compact {
		gap: var(--space-8);
	}

	.page-hero__panel--compact .hero__actions .button {
		padding-inline: var(--space-4);
	}
}

/* The setup prerequisite and the second pair of asks, under the table. */
.setup-line {
	max-width: var(--measure);
}

.setup-line p {
	color: var(--ink);
	font-size: var(--text-md);
}

/* The band's heading (#821) sits over the line as a section head's does. */
.setup-line h2 + p {
	margin-top: var(--space-4);
}

.setup-line .hero__actions {
	margin-top: var(--space-6);
}

.prose {
	max-width: var(--measure);
}

.prose > :first-child {
	margin-top: 0;
}

.prose h2 {
	margin-top: var(--space-16);
	font-size: var(--text-2xl);
	scroll-margin-top: var(--space-2); /* plus the html scroll padding: 96px */
}

.prose h3 {
	margin-top: var(--space-12);
	scroll-margin-top: var(--space-2); /* plus the html scroll padding: 96px */
}

.prose h2 + p,
.prose h3 + p {
	margin-top: var(--space-4);
}

.prose p,
.prose ul,
.prose ol {
	margin-top: var(--space-4);
}

.prose ul,
.prose ol {
	padding-left: var(--space-6);
}

.prose li + li {
	margin-top: var(--space-2);
}

.prose li::marker {
	color: var(--indigo);
}

.prose .table-scroll {
	margin-top: var(--space-6);
}

/* The answer box: one sentence, an indigo rule on its left (guide section 7). */
.answer {
	padding: var(--space-4) var(--space-6);
	border-left: 4px solid var(--indigo);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	background: var(--lavender);
	color: var(--ink);
	font-weight: 600;
}

/* "On this page": a box under the hero on a phone, sticky beside the text
   from 1024px. */
.article__grid {
	display: grid;
	/* minmax(0, 1fr), not the implicit auto column: a wide table inside the
	   article scrolls in its own box instead of widening the page. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-12);
}

@media (min-width: 1024px) {
	.article__grid {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--space-16);
		align-items: start;
	}
}

.toc {
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-card);
	background: var(--lavender);
}

@media (min-width: 1024px) {
	.toc {
		position: sticky;
		top: 96px;
		padding: 0 0 0 var(--space-6);
		border-left: 1px solid var(--line);
		border-radius: 0;
		background: none;
	}
}

.toc__title {
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
}

.toc ol {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}

.toc a {
	color: var(--muted);
	text-decoration: none;
}

.toc a:hover {
	color: var(--indigo);
	text-decoration: underline;
}

/* A guide's hero: copy beside a drawing, no buttons (text before any ask). */
.guide-hero__grid {
	display: grid;
	gap: var(--space-12);
	align-items: center;
}

.guide-hero__grid > * {
	min-width: 0;
}

@media (min-width: 1024px) {
	.guide-hero__grid {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: var(--space-16);
	}
}

/* The cut-off, drawn: a call timer at its limit and the notice that follows. */
.timer,
.bill {
	max-width: 360px;
	padding: var(--space-8);
	border-radius: var(--radius-card);
	background: var(--ink);
	color: var(--on-dark);
}

.timer__label,
.bill__label {
	color: var(--on-dark-muted);
}

.timer__value {
	margin-top: var(--space-2);
	color: var(--surface);
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.timer__toast {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--peach);
	color: var(--ink);
	font-weight: 600;
}

.timer__toast::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--danger);
}

/* The bill, drawn: a cost guide's hero (#549). The lines are what a team
   pays for, the total is the year. */
.bill__lines {
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
}

.bill__lines li {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--text);
	font-variant-numeric: tabular-nums;
}

.bill__total {
	margin-top: var(--space-4);
	color: var(--surface);
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* The FAQ inside an article is a ruled list, not the card grid. */
.prose .faq {
	display: block;
	margin-top: var(--space-6);
}

.prose .faq__item {
	padding: var(--space-6) 0;
	border-top: 1px solid var(--line);
	border-radius: 0;
	background: none;
}

.prose .faq__item:last-child {
	border-bottom: 1px solid var(--line);
}

.prose .faq__item h3 {
	margin-top: 0;
	font-size: var(--text-lg);
}

.prose .faq__item p {
	margin-top: var(--space-3);
}

.sources {
	margin-top: var(--space-16);
	padding-top: var(--space-6);
	border-top: 1px solid var(--line);
	color: var(--muted);
}

.sources h2 {
	margin-top: 0;
	font-size: var(--text-lg);
}

.sources ul {
	margin: var(--space-3) 0 0;
	padding-left: var(--space-6);
}

.sources li + li {
	margin-top: var(--space-2);
}

.sources a {
	overflow-wrap: anywhere;
}

/* 17. Legal, not-found page ------------------------------------------------- */

/* The terms and the privacy policy (src/layouts/Legal.astro) look like a
   document: one reading column, no hero, no colour field, numbered headings,
   the date at the top. The contents list sits under the heading on a phone
   and becomes a sticky column beside the text from 1024px. */
.legal {
	padding: var(--space-12) 0 var(--space-16);
	background: var(--surface);
}

@media (min-width: 1024px) {
	.legal {
		padding: var(--space-16) 0 var(--space-24);
	}
}

.legal__doc {
	display: grid;
	gap: var(--space-8);
	max-width: var(--measure);
}

@media (min-width: 1024px) {
	.legal__doc {
		grid-template-columns: 240px minmax(0, var(--measure));
		grid-template-areas:
			". head"
			"toc body";
		column-gap: var(--space-16);
		row-gap: var(--space-12);
		justify-content: center;
		max-width: none;
	}

	.legal__head {
		grid-area: head;
	}

	/* The terms' 18 entries are taller than a 1280x800 window, so the list
	   scrolls inside itself, kept clear of the window's bottom edge (RC QA,
	   #717). */
	.legal__toc {
		grid-area: toc;
		position: sticky;
		top: 96px;
		align-self: start;
		max-height: calc(100vh - 96px - var(--space-6));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.legal__body {
		grid-area: body;
	}
}

.legal__date {
	margin-top: var(--space-4);
	color: var(--muted);
}

.legal__toc {
	padding: var(--space-4) var(--space-6);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}

/* 4px inside the scrolling box keeps a link's focus ring (2px, offset 2px)
   from being clipped; the negative margin keeps the text where it was. */
@media (min-width: 1024px) {
	.legal__toc {
		margin: calc(-1 * var(--space-1));
		padding: var(--space-1);
		border: 0;
	}
}

.legal__toc-title {
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
}

.legal__toc-list {
	display: grid;
	gap: var(--space-2);
	margin: var(--space-3) 0 0;
	padding: 0;
	list-style: none;
}

.legal__toc-list a {
	color: var(--text);
	text-decoration: none;
}

.legal__toc-list a:hover {
	color: var(--indigo);
	text-decoration: underline;
}

.legal__body {
	line-height: 1.7;
}

.legal__body section {
	margin-top: var(--space-12);
	scroll-margin-top: var(--space-2); /* plus the html scroll padding: 96px */
}

.legal__body h2 {
	font-size: var(--text-xl);
}

@media (min-width: 768px) {
	.legal__body h2 {
		font-size: var(--text-2xl);
	}
}

.legal__body p,
.legal__body ul {
	margin-top: var(--space-4);
}

/* Subheadings (privacy section 3) belong to the text below them, so they get
   more space above than below (#805). */
.legal__body h3 {
	margin-top: var(--space-8);
}

.legal__body h2 + h3 {
	margin-top: var(--space-4);
}

.legal__body h3 + p,
.legal__body h3 + ul {
	margin-top: var(--space-2);
}

.legal__body ul {
	display: grid;
	gap: var(--space-2);
	margin-bottom: 0;
	padding-left: var(--space-6);
}

.legal__body li::marker {
	color: var(--indigo);
}

/* Numbered headings for a document whose heading text carries no numbers:
   the numbers are drawn, the wording stays as drafted. */
.legal--count .legal__toc-list,
.legal--count .legal__body {
	counter-reset: legal;
}

.legal--count .legal__toc-list li,
.legal--count .legal__body h2 {
	counter-increment: legal;
}

.legal--count .legal__toc-list a::before,
.legal--count .legal__body h2::before {
	content: counter(legal) ". ";
}

.legal__intro {
	color: var(--ink);
	font-size: var(--text-md);
}

/* The not-found page (src/pages/404.astro): a lavender panel, the way home,
   and a few likely pages as white cards. */
.notfound {
	padding: var(--space-2) 0 var(--space-16);
}

.notfound__code {
	margin-bottom: var(--space-4);
	color: var(--indigo-hover);
	font-family: var(--font-display);
	font-size: var(--text-md);
	font-weight: 700;
}

.notfound__sub {
	max-width: 600px;
	margin-top: var(--space-6);
}

.notfound__actions {
	margin-top: var(--space-8);
}

.notfound__links {
	display: grid;
	gap: var(--space-3);
	margin: var(--space-12) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.notfound__links {
		grid-template-columns: 1fr 1fr;
	}
}

.notfound__link {
	display: grid;
	align-content: start;
	gap: var(--space-1);
	height: 100%;
	padding: var(--space-6);
	border-radius: var(--radius-card);
	background: var(--surface);
	text-decoration: none;
}

.notfound__label {
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
}

.notfound__link:hover .notfound__label {
	color: var(--indigo);
	text-decoration: underline;
}

.notfound__note {
	color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
	}
}