/* ============================================================
	   TOKENS
	   ============================================================ */
	:root {

		/* layout */
		--page-width: 80rem;         /* 1280px max content width */
		--content-width: 74rem;      /* 1184px inner column */
		--page-margin: 1.5rem;

		/* borders / radius - px is intentional for hairline precision */
		--border-width: 1px;
		--border-width-strong: 2px;
		--radius-sm: 0.25rem;
		--radius-md: 0.5rem;
		--radius-lg: 0.75rem;

		/* type families */
		--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
		--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

		/* type scale */
		--fs-2xs: 0.6875rem;
		--fs-xs: 0.75rem;
		--fs-sm: 0.875rem;
		--fs-base: 1rem;
		--fs-md: 1.125rem;
		--fs-lg: 1.375rem;
		--fs-xl: 1.75rem;
		--fs-2xl: 2.25rem;
		--fs-3xl: 3rem;

		--lh-tight: 1.15;
		--lh-snug: 1.35;
		--lh-normal: 1.6;

		--tracking-wide: 0.08em;
		--tracking-wider: 0.12em;

		/* spacing scale */
		--space-1: 0.25rem;
		--space-2: 0.5rem;
		--space-3: 0.75rem;
		--space-4: 1rem;
		--space-5: 1.5rem;
		--space-6: 2rem;
		--space-7: 3rem;
		--space-8: 4rem;
		--space-9: 6rem;
		--space-10: 8rem;

		/* color - neutrals */
		--color-bg: #FAFAF8;
		--color-bg-alt: #F2F3F2;
		--color-surface: #FFFFFF;
		--color-border: #E1E4E2;
		--color-border-strong: #CBD1CE;
		--color-text: #14181A;
		--color-text-muted: #565F5E;
		--color-text-faint: #8B9391;
		--color-grid-line: #EEF1EF;
		--color-dot: #DEE4E1;

		/* color - accent (restrained teal, matches existing brand) */
		--color-accent: #2F6F68;
		--color-accent-strong: #1D4842;
		--color-accent-soft: #E6EFEC;

		/* gradient accents - pulled from the OppAlerts / LLM Ranking Factors report brand
		   used sparingly: announcement bar, icon chips, hero panel edge, dominant-tier dot */
		--gradient-teal: linear-gradient(135deg, #0E3E3A 0%, #2F9E8F 100%);
		--gradient-teal-bright: linear-gradient(135deg, #17554E 0%, #3FBBA8 60%, #7FDCC8 100%);
		--gradient-teal-btn: linear-gradient(135deg, #1E5A52 0%, #2C8478 100%);

		/* color - status / secondary accent, used sparingly */
		--color-negative: #A8483C;
		--color-negative-soft: #F5E9E7;

		/* notification badge - brighter/more saturated than --color-negative on
		   purpose, so it reads as "alert" rather than blending with the data-viz red */
		--color-notify: #E5484D;

		/* tier scale for the correlation data - colored pill bg/fg pairs,
		   matching the report app's palette (baseline gray, emerging amber,
		   confirmed teal, strong green, dominant purple). Light-mode values;
		   overridden per theme below. */
		--tier-baseline-bg: #F2F3F2;
		--tier-baseline-fg: #8B9391;
		--tier-emerging-bg: #FBF0DC;
		--tier-emerging-fg: #8A5417;
		--tier-confirmed-bg: #E6EFEC;
		--tier-confirmed-fg: #1D4842;
		--tier-strong-bg: #DCF3E6;
		--tier-strong-fg: #155A32;
		--tier-dominant-bg: #EEE3FA;
		--tier-dominant-fg: #4B1A7E;

		/* dark schematic surface, used only inside the hero product panel */
		--color-panel-dark: #12181A;
		--color-panel-dark-text: #D8E3E0;
		--color-panel-dark-border: #2A3436;

		/* deep teal, used once for the Roadmap section - a dark
		   background with more color than the near-black panels */
		--color-teal-deep: #0E2B28;

		--shadow-none: none;
		--shadow-card: 0 4px 16px rgba(20, 24, 26, 0.07);
	}

	html { color-scheme: dark; }

	/* ============================================================
	   DARK MODE - the site defaults to dark for everyone, regardless
	   of OS/browser preference (design decision: it just looks
	   better). The :root block below overrides the light tokens
	   above unconditionally; checking the nav checkbox is the only
	   way to light mode. Still no JS in the palette itself - a small
	   script in header.php only persists the checkbox state across
	   page loads via localStorage.

	   Deliberately unchanged: the near-black panels (hero, report
	   tabs, CTA) and the deep-teal Roadmap section - they're dark
	   already regardless of mode and don't need to shift.
	   ============================================================ */

	/* dark is the default for everyone */
	:root {
		--color-bg: #0E1416;
		--color-bg-alt: #171D1F;
		--color-surface: #1B2224;
		--color-border: #2B3436;
		--color-border-strong: #414D4F;
		--color-text: #ECEFED;
		--color-text-muted: #A6AEAC;
		--color-text-faint: #74807D;

		--color-accent: #5CC2B3;
		--color-accent-strong: #7FDCC8;
		--color-accent-soft: rgba(92, 194, 179, 0.16);

		--color-negative: #D07567;
		--color-negative-soft: rgba(208, 117, 103, 0.16);

		--color-grid-line: rgba(255,255,255,0.05);
		--color-dot: rgba(255,255,255,0.14);

		--tier-baseline-bg: #1B2224;
		--tier-baseline-fg: #74807D;
		--tier-emerging-bg: rgba(202,111,30,0.18);
		--tier-emerging-fg: #E0A35C;
		--tier-confirmed-bg: rgba(92,194,179,0.16);
		--tier-confirmed-fg: #7FDCC8;
		--tier-strong-bg: rgba(30,132,73,0.22);
		--tier-strong-fg: #6FD695;
		--tier-dominant-bg: rgba(108,52,131,0.28);
		--tier-dominant-fg: #CFA3E8;
	}

	/* checking the box switches to light */
	html:has(#theme-toggle-input:checked) {
		color-scheme: light;

		--color-bg: #FAFAF8;
		--color-bg-alt: #F2F3F2;
		--color-surface: #FFFFFF;
		--color-border: #E1E4E2;
		--color-border-strong: #CBD1CE;
		--color-text: #14181A;
		--color-text-muted: #565F5E;
		--color-text-faint: #8B9391;

		--color-accent: #2F6F68;
		--color-accent-strong: #1D4842;
		--color-accent-soft: #E6EFEC;

		--color-negative: #A8483C;
		--color-negative-soft: #F5E9E7;

		--color-grid-line: #EEF1EF;
		--color-dot: #DEE4E1;

		--tier-baseline-bg: #F2F3F2;
		--tier-baseline-fg: #8B9391;
		--tier-emerging-bg: #FBF0DC;
		--tier-emerging-fg: #8A5417;
		--tier-confirmed-bg: #E6EFEC;
		--tier-confirmed-fg: #1D4842;
		--tier-strong-bg: #DCF3E6;
		--tier-strong-fg: #155A32;
		--tier-dominant-bg: #EEE3FA;
		--tier-dominant-fg: #4B1A7E;
	}

	/* ============================================================
	   RESET / BASE
	   ============================================================ */
	* { box-sizing: border-box; }
	html, body { margin: 0; padding: 0; }
	html { overflow-x: hidden; }

	body {
		background: var(--color-bg);
		color: var(--color-text);
		font-family: var(--font-sans);
		font-size: var(--fs-base);
		line-height: var(--lh-normal);
		overflow-x: hidden;
	}

	a { color: inherit; text-decoration: none; }
	ul { margin: 0; padding: 0; list-style: none; }
	table { border-collapse: collapse; }

	h1, h2, h3, h4, p { margin: 0; }

	.mono {
		font-family: var(--font-mono);
	}

	.eyebrow {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		font-family: var(--font-mono);
		font-size: var(--fs-xs);
		font-weight: 500;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: var(--color-accent);
	}

	.eyebrow::before {
		content: "";
		width: 0.5rem;
		height: 0.5rem;
		background: var(--gradient-teal);
		border-radius: 1px;
		flex-shrink: 0;
	}

	/* ============================================================
	   LAYOUT SHELL
	   ============================================================ */
	.shell {
		width: 100%;
		max-width: var(--content-width);
		margin: 0 auto;
		padding: 0 var(--page-margin);
	}

	section {
		position: relative;
	}

	/* ============================================================
	   FRAME - thin vertical lines bracketing the 1280 column.
	   Wraps every section after the hero. Height is automatic
	   (position:relative + absolute before/after stretch to fit).
	   ============================================================ */
	.frame {
		position: relative;
		max-width: var(--page-width);
		margin: 0 auto;
	}

	.frame::before,
	.frame::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: var(--border-width);
		background: var(--color-border);
		z-index: 1;
	}

	.frame::before { left: 0; }
	.frame::after { right: 0; }

	/* ============================================================
	   DIVIDER - full-viewport-width double hairline between sections,
	   with small dots marking where it crosses the frame's vertical
	   lines (extend.ai's grid-intersection detail).
	   ============================================================ */
	.divider {
		position: relative;
		left: 50%;
		width: 100vw;
		margin-left: -50vw;
		height: calc(var(--border-width) * 2 + 1rem);
	}

	.divider::before,
	.divider::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		height: var(--border-width);
		background: var(--color-border);
	}

	.divider::before { top: 0; }
	.divider::after { bottom: 0; }

	.divider .dot {
		position: absolute;
		width: 0.3125rem;
		height: 0.3125rem;
		border-radius: 50%;
		background: var(--color-border-strong);
		transform: translate(-50%, -50%);
	}

	.divider .dot-l { left: calc(50% - (var(--page-width) / 2)); }
	.divider .dot-r { left: calc(50% + (var(--page-width) / 2)); }
	.divider .dot-top { top: 0; }
	.divider .dot-bottom { top: 100%; }

	/* ============================================================
	   SECTION BACKGROUND PATTERNS - fine grid, large grid, dot grid.
	   Rebuilt without mask-image (that's what caused the earlier
	   shadow-like bleed): any fade is baked in as a second, opaque
	   gradient layer that terminates in --color-bg, so it can never
	   render past this section's own edges.
	   ============================================================ */
	:root {
		--grid-fine-size: 2.5rem;   /* extend.ai-scale small grid */
		--grid-large-size: 5rem;    /* larger schematic grid */
		--dot-grid-size: 1.5rem;
	}

	/* hero: fine grid, fading to solid --color-bg toward the bottom of the section */
	.bg-grid-fine {
		background-image:
			linear-gradient(to bottom, transparent 0%, var(--color-bg) 100%),
			linear-gradient(to right, var(--color-grid-line) var(--border-width), transparent var(--border-width)),
			linear-gradient(to bottom, var(--color-grid-line) var(--border-width), transparent var(--border-width));
		background-size: 100% 100%, var(--grid-fine-size) var(--grid-fine-size), var(--grid-fine-size) var(--grid-fine-size);
		background-repeat: no-repeat, repeat, repeat;
	}

	/* custom data section: larger grid, flat and uniform, no fade needed */
	.bg-grid-large {
		background-image:
			linear-gradient(to right, var(--color-grid-line) var(--border-width), transparent var(--border-width)),
			linear-gradient(to bottom, var(--color-grid-line) var(--border-width), transparent var(--border-width));
		background-size: var(--grid-large-size) var(--grid-large-size);
		background-repeat: repeat;
	}

	/* who this is for: dot grid emerging from the right, fading to solid --color-bg on the left */
	.bg-dot-grid-right {
		background-image:
			linear-gradient(to left, transparent 0%, var(--color-bg) 70%),
			radial-gradient(var(--color-dot) var(--border-width), transparent var(--border-width));
		background-size: 100% 100%, var(--dot-grid-size) var(--dot-grid-size);
		background-repeat: no-repeat, repeat;
	}

	/* reusable: hide the frame's vertical lines behind this section
	   (opaque background + raised stacking order), while content
	   inside can still be laid out with the normal .shell inset */
	.no-frame-lines {
		position: relative;
		z-index: 2;
		background: var(--color-bg);
	}

	/* ============================================================
	   MODELS-SAMPLED STRIP
	   ============================================================ */
	.models-strip {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-6);
		padding: var(--space-5) 0;
		flex-wrap: wrap;
	}

	.models-strip-label {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-text-faint);
		padding-right: var(--space-6);
		border-right: var(--border-width) solid var(--color-border);
	}

	.models-strip-list {
		display: flex;
		align-items: center;
		gap: var(--space-6);
	}

	.models-strip-list span {
		font-size: var(--fs-base);
		font-weight: 600;
		color: var(--color-text-muted);
	}

	.brands-strip {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.brands-strip span {
		display: inline-flex;
		align-items: center;
		font-family: var(--font-mono);
		font-size: var(--fs-sm);
		font-weight: 500;
		letter-spacing: var(--tracking-wide);
		color: var(--color-text-muted);
	}

	.brands-strip span:not(:last-child)::after {
		content: "·";
		margin-left: var(--space-3);
		color: var(--color-border-strong);
	}

	/* ============================================================
	   REPORT SHOWCASE - attio-style horizontal tabs, CSS-only
	   (radio-button technique, no JS). Content lines up with the
	   standard container via .shell / var(--page-width). The frame's
	   vertical lines show at its left/right edges like every other
	   section (Ben 2026-07-19: was raised above them; restored).
	   ============================================================ */
	.report-showcase {
		position: relative;
		background: var(--color-bg);
		padding-top: var(--space-9);
		padding-bottom: var(--space-9);
	}

	.report-switcher {
		position: relative;
		margin-top: var(--space-7);
	}

	.report-switcher input {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	.report-tabbar {
		display: flex;
		max-width: var(--content-width);
		margin: 0 auto;
		border-top: var(--border-width) solid var(--color-border);
		/* left/right edges so the first tab has a left border and the
		   last tab a right border, aligning with the panel frame below */
		border-left: var(--border-width) solid var(--color-border);
		border-right: var(--border-width) solid var(--color-border);
		background: var(--color-surface);
	}

	.report-tabbar label {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-3);
		padding: var(--space-4) var(--space-5);
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--color-text-muted);
		border-right: var(--border-width) solid var(--color-border);
		border-bottom: var(--border-width) solid var(--color-border);
		cursor: pointer;
		transition: background 0.15s ease, color 0.15s ease;
	}

	.report-tabbar label:hover {
		background: var(--color-bg-alt);
		color: var(--color-text);
	}

	.report-tabbar label:last-child { border-right: none; }

	.report-panels {
		max-width: var(--content-width);
		margin: 0 auto;
		background: var(--color-panel-dark);
		border-left: var(--border-width) solid var(--color-panel-dark-border);
		border-right: var(--border-width) solid var(--color-panel-dark-border);
		border-bottom: var(--border-width) solid var(--color-panel-dark-border);
	}

	.report-panel {
		display: none;
		padding: var(--space-3) var(--space-6) var(--space-6);
		min-height: 22rem;
	}

	/* active tab reads as a dark tab, matching the panel below - border
	   darkens rather than an accent-colored underline. Five tabs, one
	   row: AI Search Visibility (original) plus the four new report
	   types (Ben 2026-07-20). */
	#tab-llm:checked ~ .report-tabbar label[for="tab-llm"],
	#tab-cmp:checked ~ .report-tabbar label[for="tab-cmp"],
	#tab-aio:checked ~ .report-tabbar label[for="tab-aio"],
	#tab-organic:checked ~ .report-tabbar label[for="tab-organic"],
	#tab-phrases:checked ~ .report-tabbar label[for="tab-phrases"] {
		color: var(--color-panel-dark-text);
		background: var(--color-panel-dark);
		border-color: var(--color-panel-dark-border);
	}

	#tab-llm:checked ~ .report-panels #panel-llm,
	#tab-cmp:checked ~ .report-panels #panel-cmp,
	#tab-aio:checked ~ .report-panels #panel-aio,
	#tab-organic:checked ~ .report-panels #panel-organic,
	#tab-phrases:checked ~ .report-panels #panel-phrases {
		display: block;
	}

	/* ---- LLM Model Comparison: two <select> pickers above a chart ---- */
	/* Left/right selects sit at the far edges of the panel, same width
	   as the chart below - so "Left Model" lines up over the chart's
	   left column and "Right Model" over its right column, separated
	   by the empty middle instead of huddled together on the left
	   (Ben 2026-07-20). */
	.compare-select-row {
		display: flex;
		justify-content: space-between;
		gap: var(--space-5);
		margin-bottom: var(--space-5);
	}
	.compare-select-label {
		flex: 0 1 16rem;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-text-faint);
	}
	.compare-select-right { text-align: right; align-items: flex-end; }
	.compare-select {
		width: 100%;
		padding: var(--space-2) var(--space-3);
		background: var(--color-surface);
		color: var(--color-text);
		border: var(--border-width) solid var(--color-border);
		border-radius: 4px;
		font-size: var(--fs-xs);
		font-family: var(--font-mono);
		cursor: pointer;
	}

	/* ---- Generic chart box, reused across tabs 01/03/04/05 ---- */
	.report-chart { width: 100%; height: 22rem; }

	/* ---- Nested sub-tabs (tab 04: Mirrored / Rank Slope) - same
	   CSS-only radio technique as the main report tabs, one level deeper
	   and lighter since it already sits inside a dark panel. ---- */
	.sub-tabs { position: relative; margin-top: var(--space-2); }
	.sub-tabs input { position: absolute; opacity: 0; pointer-events: none; }

	.sub-tabbar {
		display: flex;
		gap: var(--space-1);
		margin-bottom: var(--space-4);
		border-bottom: var(--border-width) solid var(--color-panel-dark-border);
	}
	.sub-tabbar label {
		padding: var(--space-2) var(--space-4);
		font-size: var(--fs-xs);
		font-weight: 600;
		color: var(--color-text-faint);
		border-bottom: 2px solid transparent;
		cursor: pointer;
		transition: color 0.15s ease, border-color 0.15s ease;
	}
	.sub-tabbar label:hover { color: var(--color-panel-dark-text); }

	.sub-panel { display: none; }

	#view-mirrored:checked ~ .sub-tabbar label[for="view-mirrored"],
	#view-slope:checked ~ .sub-tabbar label[for="view-slope"] {
		color: var(--color-panel-dark-text);
		border-color: var(--color-accent);
	}
	#view-mirrored:checked ~ .sub-panels #subpanel-mirrored,
	#view-slope:checked ~ .sub-panels #subpanel-slope {
		display: block;
	}

	/* ---- Model checkbox row (Content Phrases by model) - one shared
	   bordered box holding plain checkbox+label pairs, matching the
	   report app's own model-checkbox-table: one row per model family
	   (GPT/Claude/Gemini/DeepSeek/GLM), real checkboxes, not pill
	   buttons (Ben 2026-07-20). ---- */
	.model-checkbox-row {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding: var(--space-4) var(--space-5);
		margin-bottom: var(--space-5);
		background: rgba(255, 255, 255, 0.03);
		border: var(--border-width) solid var(--color-panel-dark-border);
		border-radius: var(--radius-sm);
	}
	.model-checkbox-grid-row {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-5);
	}
	.model-checkbox {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-1) var(--space-3);
		border-radius: var(--radius-sm);
		font-size: var(--fs-sm);
		color: var(--color-panel-dark-text);
		cursor: pointer;
		transition: background 0.15s ease, color 0.15s ease;
	}
	.model-checkbox input[type="checkbox"] {
		width: 1rem;
		height: 1rem;
		accent-color: var(--color-accent);
		cursor: pointer;
	}
	/* checked = reads as "selected", same active language as the report
	   tabs elsewhere on this page (filled background, brighter text) */
	.model-checkbox:has(input:checked) {
		background: var(--color-accent-soft);
		color: var(--color-accent-strong);
		font-weight: 600;
	}

	/* Shown instead of the chart when every model checkbox is unchecked
	   (Top Keywords) - no chart to draw with zero models selected. */
	.chart-empty-state {
		padding: var(--space-8) var(--space-5);
		text-align: center;
		color: var(--color-text-faint);
		font-size: var(--fs-sm);
		border: var(--border-width) dashed var(--color-panel-dark-border);
		border-radius: var(--radius-sm);
	}

	/* ---- Report showcase intro copy + small mono labels, shared by
	   several tabs ---- */
	.quad-intro {
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
		max-width: 60rem;
		margin: 0 0 var(--space-6);
	}
	.quad-col-title {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-text-faint);
	}

	/* ---- AI Search Visibility quad preview (original four-channel tab) ---- */
	.quad-preview {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-5);
	}
	.quad-col {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}
	.quad-col-head {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		margin-bottom: var(--space-4);
	}
	.quad-select {
		width: 100%;
		padding: var(--space-2) var(--space-3);
		background: var(--color-surface);
		color: var(--color-text);
		border: var(--border-width) solid var(--color-border);
		border-radius: 4px;
		font-size: var(--fs-xs);
		font-family: var(--font-mono);
		cursor: pointer;
	}
	.quad-select:disabled { opacity: 0.55; cursor: default; }
	.quad-chart { width: 100%; height: 17rem; }

	@media (max-width: 60rem) {
		.quad-preview { grid-template-columns: repeat(2, 1fr); }
	}
	@media (max-width: 34rem) {
		.quad-preview { grid-template-columns: 1fr; }
	}


	/* generic dark-panel data row, reused across the search/industry tabs */
	.report-row {
		display: grid;
		grid-template-columns: 1fr 6rem 6rem;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-3) 0;
		border-top: var(--border-width) solid var(--color-panel-dark-border);
		font-size: var(--fs-xs);
		color: var(--color-panel-dark-text);
	}

	.report-row:first-of-type { border-top: none; }

	.report-row .num {
		font-family: var(--font-mono);
		text-align: right;
		color: #6FBBB0;
	}

	.report-tier-dot {
		display: inline-block;
		width: 0.4375rem;
		height: 0.4375rem;
		border-radius: 50%;
		margin-right: var(--space-2);
	}

	.report-graph {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 19rem;
	}

	/* ============================================================
	   TESTIMONIALS
	   ============================================================ */
	.testimonial-card {
		background: var(--color-surface);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--space-6);
		display: flex;
		flex-direction: column;
	}

	.testimonial-mark {
		font-family: var(--font-mono);
		font-size: var(--fs-xl);
		color: var(--color-accent);
		line-height: 1;
		margin-bottom: var(--space-3);
	}

	.testimonial-quote {
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
		line-height: var(--lh-normal);
		flex-grow: 1;
	}

	.testimonial-attribution {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		margin-top: var(--space-5);
		padding-top: var(--space-4);
		border-top: var(--border-width) solid var(--color-border);
	}

	.testimonial-avatar {
		width: 2rem;
		height: 2rem;
		border-radius: 50%;
		background: var(--gradient-teal);
		flex-shrink: 0;
	}

	.testimonial-name {
		font-size: var(--fs-sm);
		font-weight: 600;
	}

	.testimonial-role {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	/* ============================================================
	   SECTION BREAKS - two dark bands used sparingly to punctuate
	   the page. "full" runs browser-edge to browser-edge; "contained"
	   stays within the 1280 page container (frame lines still show
	   at its edges, same as any other section).
	   ============================================================ */
	.section-break-full {
		position: relative;
		z-index: 2;
		left: 50%;
		width: 100vw;
		margin-left: -50vw;
		background: var(--color-panel-dark);
		padding: var(--space-7) 0;
	}

	.break-inner {
		max-width: var(--content-width);
		margin: 0 auto;
		padding: 0 var(--page-margin);
		text-align: center;
	}

	.break-label {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: #6FBBB0;
		margin-bottom: var(--space-3);
	}

	.break-heading {
		font-size: var(--fs-lg);
		font-weight: 600;
		color: #FFFFFF;
		max-width: 40rem;
		margin: 0 auto;
		line-height: var(--lh-snug);
	}

	.section-break-contained {
		background: var(--color-panel-dark);
		padding: var(--space-7) 0;
	}

	.break-chips {
		display: flex;
		justify-content: center;
		gap: var(--space-4);
		flex-wrap: wrap;
		margin-top: var(--space-5);
	}

	.break-chip {
		border: var(--border-width) solid var(--color-panel-dark-border);
		border-radius: 999px;
		padding: var(--space-2) var(--space-4);
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-panel-dark-text);
	}

	/* ============================================================
	   PRICING
	   ============================================================ */
	.pricing-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
		align-items: stretch;
	}

	.pricing-card {
		position: relative;
		display: flex;
		flex-direction: column;
		background: var(--color-surface);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--space-6);
	}

	.pricing-card.featured {
		border: var(--border-width-strong) solid var(--color-accent);
		background: var(--color-accent-soft);
	}

	.pricing-badge {
		position: absolute;
		top: -0.75rem;
		left: var(--space-6);
		background: var(--gradient-teal-btn);
		color: #FFFFFF;
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		padding: var(--space-1) var(--space-3);
		border-radius: var(--radius-sm);
	}

	.pricing-name {
		font-size: var(--fs-base);
		font-weight: 600;
	}

	.pricing-desc {
		margin-top: var(--space-2);
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
		min-height: 2.6em;
	}

	.pricing-price-row {
		display: flex;
		align-items: baseline;
		gap: var(--space-2);
		margin: var(--space-5) 0 var(--space-1);
		flex-wrap: wrap;
	}

	.pricing-price {
		font-size: var(--fs-2xl);
		font-weight: 700;
		letter-spacing: -0.01em;
	}

	.pricing-unit {
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
	}

	.pricing-strike {
		font-size: var(--fs-base);
		color: var(--color-text-faint);
		text-decoration: line-through;
	}

	.pricing-launch-note {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-accent-strong);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		margin-bottom: var(--space-4);
	}

	.pricing-card ul {
		margin-top: var(--space-2);
		margin-bottom: var(--space-6);
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		flex-grow: 1;
	}

	.pricing-card ul li {
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
		padding-left: var(--space-4);
		position: relative;
	}

	.pricing-card ul li::before {
		content: "";
		position: absolute;
		left: 0;
		top: calc(0.5em + 3px);
		width: 0.375rem;
		height: var(--border-width-strong);
		background: var(--color-accent);
	}

	.pricing-card .btn {
		justify-content: center;
		width: 100%;
	}

	.pricing-launch-banner {
		text-align: center;
		font-family: var(--font-mono);
		font-size: var(--fs-xs);
		color: var(--color-accent-strong);
		border: var(--border-width) solid var(--color-accent);
		background: var(--color-accent-soft);
		border-radius: var(--radius-sm);
		padding: var(--space-3) var(--space-5);
		margin-bottom: var(--space-7);
	}

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

	.section-head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: var(--space-7);
		gap: var(--space-6);
	}

	.section-head h2 {
		font-size: var(--fs-2xl);
		font-weight: 600;
		letter-spacing: -0.01em;
		line-height: var(--lh-tight);
		margin-top: var(--space-2);
	}

	.section-head .lede {
		max-width: 26rem;
		color: var(--color-text-muted);
		font-size: var(--fs-sm);
		line-height: var(--lh-normal);
	}

	/* ============================================================
	   VIDEO WALKTHROUGH
	   ============================================================ */
	.video-wrap {
		max-width: 48rem;
		margin: 0 auto;
	}

	.video-frame {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		background: var(--color-panel-dark);
		border: var(--border-width) solid var(--color-panel-dark-border);
		border-radius: var(--radius-md);
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.video-play {
		width: 4rem;
		height: 4rem;
		border-radius: 50%;
		background: var(--gradient-teal-btn);
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: filter 0.15s ease, box-shadow 0.15s ease;
	}

	.video-play:hover {
		filter: brightness(1.1);
		box-shadow: 0 0 0 8px rgba(63, 187, 168, 0.15);
	}

	.video-play::after {
		content: "▶";
		color: #FFFFFF;
		font-size: 1.1rem;
		margin-left: 0.2rem;
	}

	.video-caption {
		margin-top: var(--space-3);
		text-align: center;
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	/* ============================================================
	   COMPARISON TABLE
	   ============================================================ */
	.compare-yes {
		color: var(--color-accent-strong);
		font-weight: 700;
	}

	.compare-no {
		color: var(--color-text-faint);
	}

	/* ============================================================
	   SAMPLE REPORT BANNER
	   ============================================================ */
	.sample-banner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-6);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--space-6);
		background: var(--color-surface);
		flex-wrap: wrap;
	}

	.sample-banner h3 {
		font-size: var(--fs-base);
		font-weight: 600;
	}

	.sample-banner p {
		margin-top: var(--space-1);
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
	}

	.sample-banner .btn { flex-shrink: 0; }

	/* ============================================================
	   ROADMAP - deep teal background (distinct from the near-black
	   panels used elsewhere), teasing the future SaaS platform
	   ============================================================ */
	.section-roadmap {
		background: var(--color-teal-deep);
	}

	.section-roadmap .eyebrow { color: #6FBBB0; }
	.section-roadmap .eyebrow::before { background: var(--gradient-teal-bright); }
	.section-roadmap .section-head h2 { color: #FFFFFF; }
	.section-roadmap .section-head .lede { color: rgba(255,255,255,0.65); }

	.roadmap-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		border: var(--border-width) solid rgba(255,255,255,0.14);
		border-radius: var(--radius-md);
		overflow: hidden;
	}

	.roadmap-step {
		padding: var(--space-6) var(--space-5);
		border-right: var(--border-width) solid rgba(255,255,255,0.14);
	}

	.roadmap-step:last-child { border-right: none; }

	.roadmap-status {
		display: inline-block;
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		padding: var(--space-1) var(--space-3);
		border-radius: 999px;
		margin-bottom: var(--space-4);
	}

	.status-live {
		background: rgba(111,187,176,0.15);
		color: #6FBBB0;
		border: var(--border-width) solid rgba(111,187,176,0.4);
	}

	.status-building {
		background: rgba(255,255,255,0.06);
		color: rgba(255,255,255,0.75);
		border: var(--border-width) solid rgba(255,255,255,0.2);
	}

	.status-planned {
		background: transparent;
		color: rgba(255,255,255,0.45);
		border: var(--border-width) solid rgba(255,255,255,0.16);
	}

	.roadmap-step h4 {
		font-size: var(--fs-base);
		font-weight: 600;
		color: #FFFFFF;
		margin-bottom: var(--space-2);
	}

	.roadmap-step p {
		font-size: var(--fs-sm);
		color: rgba(255,255,255,0.6);
	}

	/* ============================================================
	   DASHBOARD / APP PREVIEW GALLERY
	   ============================================================ */
	.gallery-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
	}

	.gallery-card {
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		overflow: hidden;
		background: var(--color-surface);
	}

	.gallery-mock {
		background: var(--color-bg-alt);
		padding: var(--space-5);
		height: 10rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-3);
	}

	.gallery-bar-row {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}

	.gallery-bar-label {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
		width: 4rem;
		flex-shrink: 0;
	}

	.gallery-bar-track {
		flex-grow: 1;
		height: 0.5rem;
		background: var(--color-border);
		border-radius: var(--radius-sm);
		overflow: hidden;
	}

	.gallery-bar-fill {
		height: 100%;
		background: var(--gradient-teal-btn);
	}

	.gallery-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-muted);
	}

	.gallery-dot {
		display: inline-block;
		width: 0.375rem;
		height: 0.375rem;
		border-radius: 50%;
		margin-right: var(--space-2);
	}

	.gallery-label-row {
		padding: var(--space-4);
		border-top: var(--border-width) solid var(--color-border);
	}

	.gallery-label-row .name {
		font-size: var(--fs-sm);
		font-weight: 600;
	}

	.gallery-label-row .tag {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		margin-top: var(--space-1);
	}

	/* ============================================================
	   RESEARCH / BLOG HIGHLIGHTS
	   ============================================================ */
	.blog-card {
		display: flex;
		flex-direction: column;
	}

	.blog-tag {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-accent);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		margin-bottom: var(--space-3);
	}

	.blog-card h3 { margin-bottom: var(--space-2); }

	.blog-meta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: var(--space-5);
		padding-top: var(--space-4);
		border-top: var(--border-width) solid var(--color-border);
	}

	.blog-date {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
	}

	.blog-read-more {
		font-size: var(--fs-sm);
		font-weight: 600;
		color: var(--color-text);
	}

	/* ============================================================
	   FORM ELEMENTS - shared by newsletter + contact form
	   ============================================================ */
	.input-field {
		width: 100%;
		padding: var(--space-3) var(--space-4);
		border: var(--border-width) solid var(--color-border-strong);
		border-radius: var(--radius-sm);
		font-family: var(--font-sans);
		font-size: var(--fs-sm);
		background: var(--color-surface);
		color: var(--color-text);
		transition: border-color 0.15s ease;
	}

	.input-field:hover {
		border-color: var(--color-text-faint);
	}

	.input-field:focus {
		outline: 2px solid var(--color-accent);
		outline-offset: 1px;
		border-color: var(--color-accent);
	}

	textarea.input-field {
		resize: vertical;
		min-height: 6rem;
		font-family: var(--font-sans);
	}

	.form-row { margin-bottom: var(--space-4); }

	.form-label {
		display: block;
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-text-faint);
		margin-bottom: var(--space-2);
	}

	.form-row-split {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-4);
	}

	/* ============================================================
	   NEWSLETTER
	   ============================================================ */
	.newsletter-box {
		max-width: 32rem;
		margin: 0 auto;
		text-align: center;
	}

	.newsletter-form {
		display: flex;
		gap: var(--space-3);
		margin-top: var(--space-5);
	}

	.newsletter-note {
		margin-top: var(--space-3);
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
	}

	/* ============================================================
	   CONTACT FORM - inside the final CTA band
	   ============================================================ */
	.cta-band.with-form {
		display: grid;
		grid-template-columns: 1fr 1.1fr;
		align-items: center;
		gap: var(--space-8);
	}

	.cta-band.with-form h2 { max-width: none; }
	.cta-band.with-form p { max-width: none; }

	.cta-form-card {
		background: var(--color-surface);
		border-radius: var(--radius-md);
		padding: var(--space-6);
	}

	.cta-form-card .form-label { color: var(--color-text-faint); }

	/* ============================================================
	   INTERACTION REFERENCE - a small, removable style-guide section
	   demonstrating every hover state used on the page
	   ============================================================ */
	.interaction-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-5);
	}

	.interaction-item {
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--space-5);
	}

	.interaction-item .label {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-text-faint);
		margin-bottom: var(--space-4);
	}

	.interaction-item .example {
		margin-bottom: var(--space-4);
	}

	.interaction-item .where {
		font-size: var(--fs-xs);
		color: var(--color-text-muted);
	}

	/* ============================================================
	   NAV  (full-bleed - spans the viewport, not just the 1280 page)
	   ============================================================ */
	.nav {
		position: sticky;
		top: 0;
		z-index: 10;
		border-bottom: var(--border-width) solid var(--color-border);
		background: var(--color-surface);
	}

	.nav-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-4) 0;
		max-width: var(--page-width);
		margin: 0 auto;
		padding-left: var(--page-margin);
		padding-right: var(--page-margin);
	}

	.brand {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		font-weight: 600;
		font-size: var(--fs-base);
	}

	.brand-mark {
		position: relative;
		width: 1.75rem;
		height: 1.75rem;
		background: var(--gradient-teal);
		color: #FFFFFF;
		border-radius: var(--radius-sm);
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		font-weight: 600;
		letter-spacing: 0;
		flex-shrink: 0;
	}

	/* notification badge - the ring color matches --color-surface so it reads
	   as a "cutout" against the nav background in both light and dark mode */
	.brand-notify {
		position: absolute;
		top: -0.3125rem;
		right: -0.3125rem;
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		background: var(--color-notify);
		color: #FFFFFF;
		font-family: var(--font-sans);
		font-size: 0.5625rem;
		font-weight: 700;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 2px solid var(--color-surface);
	}

	.brand-sub {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
		font-weight: 400;
		border-left: var(--border-width) solid var(--color-border);
		padding-left: var(--space-3);
		margin-left: var(--space-1);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	.nav-links {
		display: flex;
		align-items: center;
		gap: var(--space-6);
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
	}

	.nav-links a {
		position: relative;
		padding-bottom: 0.2rem;
		transition: color 0.15s ease;
	}

	.nav-links a::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: var(--border-width);
		background: var(--color-text);
		opacity: 0;
		transition: opacity 0.15s ease;
	}

	.nav-links a:hover { color: var(--color-text); }
	.nav-links a:hover::after { opacity: 1; }

	.nav-actions {
		display: flex;
		align-items: center;
		gap: var(--space-4);
	}

	.nav-login {
		font-size: var(--fs-xs);
		color: var(--color-text-muted);
	}

	/* ============================================================
	   THEME TOGGLE - checkbox-driven, no JS. Its checked state is
	   read by html:has(#theme-toggle-input:checked) up in TOKENS,
	   which is what actually swaps the palette. Just an icon - no
	   track, no thumb, no sliding. Moon in light mode (click to go
	   dark), sun in dark mode (click to go light).
	   ============================================================ */
	.theme-toggle {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.375rem;
		height: 1.375rem;
		cursor: pointer;
		color: var(--color-text-muted);
		transition: color 0.15s ease;
	}

	.theme-toggle:hover {
		color: var(--color-text);
	}

	/* tooltip - text swaps between the two states via :has(), same
	   trick used to drive the palette itself */
	.theme-toggle::after {
		content: "Switch to light mode";
		position: absolute;
		top: calc(100% + 0.5rem);
		left: 50%;
		transform: translateX(-50%);
		background: var(--color-panel-dark);
		color: var(--color-panel-dark-text);
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		white-space: nowrap;
		padding: var(--space-1) var(--space-3);
		border-radius: var(--radius-sm);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.15s ease;
		z-index: 20;
	}

	.theme-toggle:hover::after { opacity: 1; }

	.theme-toggle:has(.theme-toggle-input:checked)::after {
		content: "Switch to dark mode";
	}

	.theme-toggle-input {
		position: absolute;
		opacity: 0;
		width: 1px;
		height: 1px;
	}

	.theme-toggle svg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: opacity 0.15s ease;
	}

	/* dark is showing by default → unchecked offers the sun (light),
	   checked (light mode active) offers the moon (back to dark) */
	.icon-moon { opacity: 0; }
	.icon-sun { opacity: 1; }

	.theme-toggle-input:checked ~ .icon-moon { opacity: 1; }
	.theme-toggle-input:checked ~ .icon-sun { opacity: 0; }

	.theme-toggle-input:focus-visible ~ svg {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
		border-radius: 50%;
	}

	/* ============================================================
	   ANNOUNCEMENT BAR (full-bleed, teal gradient)
	   ============================================================ */
	.announcement {
		display: block;
		width: 100%;
		background: var(--gradient-teal);
	}

	.announcement-row {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-3);
		max-width: var(--page-width);
		margin: 0 auto;
		padding: var(--space-3) var(--page-margin);
		flex-wrap: wrap;
	}

	.announcement-badge {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-panel-dark);
		background: #FFFFFF;
		padding: var(--space-1) var(--space-2);
		border-radius: var(--radius-sm);
		flex-shrink: 0;
	}

	.announcement-text {
		font-size: var(--fs-sm);
		color: rgba(255,255,255,0.92);
	}

	.announcement-link {
		font-size: var(--fs-sm);
		font-weight: 600;
		color: #FFFFFF;
		text-decoration: underline;
		text-underline-offset: 0.2em;
		white-space: nowrap;
	}

	/* ============================================================
	   BUTTONS
	   ============================================================ */
	.btn {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		font-family: var(--font-sans);
		font-size: var(--fs-sm);
		font-weight: 600;
		padding: var(--space-3) var(--space-5);
		border-radius: var(--radius-sm);
		border: var(--border-width) solid transparent;
		cursor: pointer;
		transition: filter 0.15s ease, box-shadow 0.15s ease;
	}

	.btn:focus-visible {
		outline: 2px solid var(--color-accent);
		outline-offset: 2px;
	}

	.btn-primary {
		background: var(--gradient-teal-btn);
		color: #FFFFFF;
	}

	.btn-primary:hover {
		filter: brightness(1.06);
		box-shadow: 0 0 0 3px var(--color-accent-soft);
	}

	.btn-primary:active {
		filter: brightness(0.94);
	}

	.btn-secondary {
		background: transparent;
		border-color: var(--color-border-strong);
		color: var(--color-text);
	}

	.btn-secondary:hover {
		border-color: var(--color-text-faint);
		background: var(--color-bg-alt);
	}

	.btn-sm {
		font-size: var(--fs-xs);
		padding: var(--space-2) var(--space-4);
	}

	/* ============================================================
	   HERO
	   ============================================================ */
	.hero-grid {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		gap: var(--space-8);
		align-items: center;
		padding: var(--space-9) 0;
	}

	.hero-copy h1 {
		font-size: var(--fs-3xl);
		font-weight: 700;
		line-height: var(--lh-tight);
		letter-spacing: -0.015em;
		margin-top: var(--space-4);
	}

	.hero-copy p.lede {
		margin-top: var(--space-5);
		font-size: var(--fs-md);
		color: var(--color-text-muted);
		max-width: 34rem;
		line-height: var(--lh-normal);
	}

	.hero-actions {
		display: flex;
		gap: var(--space-4);
		margin-top: var(--space-6);
	}

	.hero-meta {
		display: flex;
		gap: var(--space-6);
		margin-top: var(--space-7);
		padding-top: var(--space-5);
		border-top: var(--border-width) solid var(--color-border);
	}

	.hero-meta-item {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
	}

	.hero-meta-item strong {
		display: block;
		font-family: var(--font-sans);
		font-size: var(--fs-lg);
		color: var(--color-text);
		font-weight: 700;
		letter-spacing: 0;
		text-transform: none;
		margin-bottom: var(--space-1);
	}

	/* ---- product panel (hero visual) ---- */
	.panel {
		background: var(--color-panel-dark);
		border-radius: var(--radius-md);
		overflow: hidden;
		border: var(--border-width) solid var(--color-panel-dark-border);
		position: relative;
	}

	.panel::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: var(--gradient-teal-bright);
	}

	.panel-titlebar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-3) var(--space-4);
		border-bottom: var(--border-width) solid var(--color-panel-dark-border);
	}

	.panel-titlebar .dots {
		display: flex;
		gap: var(--space-2);
	}

	.panel-titlebar .dots span {
		width: 0.5rem;
		height: 0.5rem;
		border: var(--border-width) solid var(--color-panel-dark-border);
		border-radius: 1px;
	}

	.panel-titlebar .label {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
	}

	.panel-body {
		padding: var(--space-5);
	}

	.panel-row-label {
		display: flex;
		justify-content: space-between;
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-panel-dark-text);
		opacity: 0.6;
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		margin-bottom: var(--space-3);
	}

	.signal-row {
		display: grid;
		grid-template-columns: 9rem 1fr 3.5rem;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-2) 0;
		border-top: var(--border-width) solid var(--color-panel-dark-border);
	}

	.signal-row:first-of-type { border-top: none; }

	.signal-name {
		font-size: var(--fs-xs);
		color: var(--color-panel-dark-text);
	}

	.signal-bar-track {
		height: 0.375rem;
		background: rgba(255,255,255,0.08);
		border-radius: var(--radius-sm);
		overflow: hidden;
	}

	.signal-bar-fill {
		height: 100%;
		background: var(--gradient-teal-bright);
		border-radius: var(--radius-sm);
	}

	.signal-value {
		font-family: var(--font-mono);
		font-size: var(--fs-xs);
		color: #6FBBB0;
		text-align: right;
	}

	.panel-footer {
		display: flex;
		justify-content: space-between;
		padding: var(--space-3) var(--space-4);
		border-top: var(--border-width) solid var(--color-panel-dark-border);
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
	}

	/* ============================================================
	   STAT STRIP
	   ============================================================ */
	.stat-strip {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		border-top: var(--border-width) solid var(--color-border);
	}

	.stat-cell {
		padding: var(--space-6) var(--space-5);
		border-right: var(--border-width) solid var(--color-border);
		text-align: center;
	}

	.stat-cell:last-child { border-right: none; }

	.stat-cell .value {
		font-size: var(--fs-xl);
		font-weight: 700;
		letter-spacing: -0.01em;
	}

	.stat-cell .label {
		margin-top: var(--space-1);
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	/* ============================================================
	   CARD GRID - generic bento
	   ============================================================ */
	.grid-2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}

	.grid-3 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-5);
	}

	.grid-6 {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: var(--space-4);
	}

	.card {
		background: var(--color-surface);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--space-6);
	}

	/* ============================================================
	   HOVER: bordered cards, site-wide.
	   Border darkens and a soft shadow appears - no movement, since
	   position shifts on hover make things harder to read/scan.
	   Covers: Who This Is For, Methodology, Industry Bento, Custom
	   Data, Testimonials, Pricing, Blog, and Dashboard Gallery cards.
	   ============================================================ */
	.card,
	.method-card,
	.industry-card,
	.gallery-card,
	.pricing-card,
	.testimonial-card {
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
	}

	.card:hover,
	.method-card:hover,
	.industry-card:hover,
	.gallery-card:hover,
	.pricing-card:hover,
	.testimonial-card:hover {
		border-color: var(--color-border-strong);
		box-shadow: var(--shadow-card);
	}

	/* the featured pricing card keeps its teal border on hover rather
	   than switching to the neutral gray used by every other card */
	.pricing-card.featured:hover {
		border-color: var(--color-accent);
	}

	.card-tight { padding: var(--space-5); }

	.card-label {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2rem;
		height: 2rem;
		background: var(--gradient-teal);
		border-radius: var(--radius-sm);
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		font-weight: 600;
		color: #FFFFFF;
		margin-bottom: var(--space-4);
	}

	.card h3 {
		font-size: var(--fs-base);
		font-weight: 600;
		margin-bottom: var(--space-2);
	}

	.card p {
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
	}

	.card ul {
		margin-top: var(--space-4);
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.card ul li {
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
		padding-left: var(--space-4);
		position: relative;
	}

	.card ul li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0.5em;
		width: 0.375rem;
		height: var(--border-width-strong);
		background: var(--color-accent);
	}

	/* ============================================================
	   METHODOLOGY STEPS
	   ============================================================ */
	.method-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-4);
	}

	.method-card {
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-surface);
		padding: var(--space-5);
	}

	.method-tag {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.75rem;
		height: 1.75rem;
		padding: 0 var(--space-2);
		border-radius: var(--radius-sm);
		background: var(--gradient-teal);
		color: #FFFFFF;
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		font-weight: 600;
		margin-bottom: var(--space-4);
	}

	.method-card h4 {
		font-size: var(--fs-sm);
		font-weight: 600;
		margin-bottom: var(--space-2);
	}

	.method-card p {
		font-size: var(--fs-xs);
		color: var(--color-text-muted);
		line-height: var(--lh-normal);
	}

	/* ============================================================
	   DATA TABLE - signal correlations
	   ============================================================ */
	.data-table {
		width: 100%;
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		overflow: hidden;
		background: var(--color-surface);
		overflow-x: auto;
	}

	.data-table table { width: 100%; }

	.data-table th {
		text-align: left;
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-text-faint);
		font-weight: 500;
		padding: var(--space-4) var(--space-5);
		background: var(--color-bg-alt);
		border-bottom: var(--border-width) solid var(--color-border);
		white-space: nowrap;
	}

	.data-table td {
		padding: var(--space-4) var(--space-5);
		border-bottom: var(--border-width) solid var(--color-border);
		font-size: var(--fs-sm);
		white-space: nowrap;
	}

	.data-table tr:last-child td { border-bottom: none; }

	.data-table tbody tr {
		transition: background 0.1s ease;
	}

	.data-table tbody tr:hover {
		background: var(--color-bg-alt);
	}

	.data-table td.num {
		font-family: var(--font-mono);
		font-size: var(--fs-sm);
	}

	.tier-badge {
		display: inline-flex;
		align-items: center;
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		padding: var(--space-1) var(--space-3);
		border-radius: var(--radius-sm);
		background: var(--tier-confirmed-bg);
		color: var(--tier-confirmed-fg);
	}

	.tier-badge.tier-baseline  { background: var(--tier-baseline-bg);  color: var(--tier-baseline-fg); }
	.tier-badge.tier-emerging  { background: var(--tier-emerging-bg);  color: var(--tier-emerging-fg); }
	.tier-badge.tier-confirmed { background: var(--tier-confirmed-bg); color: var(--tier-confirmed-fg); }
	.tier-badge.tier-strong    { background: var(--tier-strong-bg);    color: var(--tier-strong-fg); }
	.tier-badge.tier-dominant  { background: var(--tier-dominant-bg);  color: var(--tier-dominant-fg); }

	/* ============================================================
	   INDUSTRY BENTO
	   ============================================================ */
	.industry-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4);
	}

	.industry-card {
		display: block;
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-surface);
		padding: var(--space-5);
	}

	.industry-card .top-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: var(--space-4);
		gap: var(--space-3);
	}

	.industry-card h4 {
		font-size: var(--fs-sm);
		font-weight: 600;
	}

	.industry-card .count {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
		margin-top: var(--space-1);
	}

	.industry-card .domains {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-muted);
		line-height: var(--lh-normal);
		padding-top: var(--space-4);
		border-top: var(--border-width) solid var(--color-border);
	}

	.industry-card .signal-line {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: var(--space-4);
		font-size: var(--fs-xs);
		color: var(--color-text-muted);
	}

	.industry-card .signal-line .rho {
		font-family: var(--font-mono);
		font-weight: 600;
	}

	.rho-negative { color: var(--color-negative); }
	.rho-positive { color: var(--color-accent-strong); }

	/* ============================================================
	   ABOUT / EXPERIENCE COLUMNS
	   ============================================================ */
	.about-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}

	.about-copy p + p { margin-top: var(--space-4); }
	.about-copy p { color: var(--color-text-muted); font-size: var(--fs-sm); }

	.exp-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}

	.exp-block {
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--space-5);
	}

	.exp-block .head {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-accent);
		margin-bottom: var(--space-4);
		padding-bottom: var(--space-3);
		border-bottom: var(--border-width) solid var(--color-border);
	}

	.exp-block ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.exp-block li {
		font-size: var(--fs-xs);
		color: var(--color-text-muted);
		padding-left: var(--space-4);
		position: relative;
	}

	.exp-block li::before {
		content: "";
		position: absolute;
		left: 0;
		top: calc(0.5em + 2px);
		width: 0.375rem;
		height: var(--border-width-strong);
		background: var(--color-border-strong);
	}

	/* ============================================================
	   PROCESS STEPS
	   ============================================================ */
	.process-list {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		overflow: hidden;
		background: var(--color-surface);
	}

	.process-step {
		padding: var(--space-6) var(--space-5);
		border-right: var(--border-width) solid var(--color-border);
	}

	.process-step:last-child { border-right: none; }

	.process-num {
		font-family: var(--font-mono);
		font-size: var(--fs-xs);
		color: var(--color-text-faint);
		margin-bottom: var(--space-4);
	}

	.process-step h4 {
		font-size: var(--fs-base);
		font-weight: 600;
		margin-bottom: var(--space-2);
	}

	.process-step p {
		font-size: var(--fs-xs);
		color: var(--color-text-muted);
	}

	/* ============================================================
	   FAQ
	   ============================================================ */
	.faq-list {
		border-top: var(--border-width) solid var(--color-border);
	}

	.faq-group-label {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-accent);
		padding: var(--space-5) var(--space-4) 0;
		margin-top: var(--space-1);
		border-top: var(--border-width) solid var(--color-border);
	}

	.faq-group-label:first-child {
		padding-top: var(--space-4);
		margin-top: 0;
		border-top: none;
	}

	.faq-item {
		display: grid;
		grid-template-columns: 20rem 1fr;
		gap: var(--space-6);
		padding: var(--space-6) var(--space-4);
		margin: 0 calc(var(--space-4) * -1);
		transition: background 0.15s ease;
	}

	.faq-item:hover {
		background: var(--color-bg-alt);
	}

	.faq-item h4 {
		font-size: var(--fs-base);
		font-weight: 600;
	}

	.faq-item p {
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
		max-width: 34rem;
	}

	/* ============================================================
	   FINAL CTA
	   ============================================================ */
	.cta-band {
		background: var(--color-panel-dark);
		border-radius: var(--radius-lg);
		padding: var(--space-8);
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: var(--color-panel-dark-text);
		gap: var(--space-6);
		position: relative;
		overflow: hidden;
	}

	.cta-band::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: var(--gradient-teal-bright);
	}

	.cta-band h2 {
		font-size: var(--fs-2xl);
		color: #FFFFFF;
		font-weight: 600;
		max-width: 28rem;
		line-height: var(--lh-tight);
	}

	.cta-band p {
		margin-top: var(--space-3);
		font-size: var(--fs-sm);
		color: var(--color-text-faint);
		max-width: 26rem;
	}

	.cta-band .btn-primary {
		flex-shrink: 0;
	}

	/* ============================================================
	   FOOTER
	   ============================================================ */
	footer {
		padding: var(--space-8) 0 var(--space-6);
	}

	.footer-grid {
		display: grid;
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
		gap: var(--space-6);
		padding-bottom: var(--space-7);
	}

	.footer-brand p {
		margin-top: var(--space-4);
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
		max-width: 20rem;
	}

	.footer-col .head {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-text-faint);
		margin-bottom: var(--space-4);
	}

	.footer-col ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.footer-col a {
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
	}

	.footer-col a:hover { color: var(--color-text); }

	.footer-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: var(--space-6);
		border-top: var(--border-width) solid var(--color-border);
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.footer-socials {
		display: flex;
		gap: var(--space-5);
	}

	/* ============================================================
	   RESPONSIVE - tablet
	   ============================================================ */
	@media (max-width: 64rem) {

		:root {
			--fs-3xl: 2.5rem;
			--fs-2xl: 1.875rem;
			--space-9: 4rem;
		}

		.nav-links { display: none; }

		.hero-grid { grid-template-columns: 1fr; padding: var(--space-7) 0; }
		.hero-copy p.lede { max-width: none; }

		.grid-2,
		.grid-3,
		.method-grid,
		.industry-grid,
		.pricing-grid { grid-template-columns: repeat(2, 1fr); }

		.stat-strip { grid-template-columns: repeat(3, 1fr); }
		.stat-cell:nth-child(3) { border-right: none; }
		.stat-cell:nth-child(n+4) { border-top: var(--border-width) solid var(--color-border); }

		.process-list { grid-template-columns: repeat(2, 1fr); }
		.process-step:nth-child(2) { border-right: none; }
		.process-step:nth-child(n+3) { border-top: var(--border-width) solid var(--color-border); }

		.about-grid { grid-template-columns: 1fr; gap: var(--space-6); }

		.faq-item { grid-template-columns: 1fr; gap: var(--space-2); }

		.footer-grid { grid-template-columns: 1fr 1fr; row-gap: var(--space-6); }
		.footer-brand { grid-column: 1 / -1; }

		.report-tabbar { flex-wrap: wrap; }
		.report-tabbar label { flex: 1 1 50%; border-bottom: var(--border-width) solid var(--color-border); }

		.gallery-grid { grid-template-columns: repeat(2, 1fr); }

		.roadmap-list { grid-template-columns: 1fr; }
		.roadmap-step { border-right: none; border-bottom: var(--border-width) solid rgba(255,255,255,0.14); }
		.roadmap-step:last-child { border-bottom: none; }

		.cta-band.with-form { grid-template-columns: 1fr; }
	}

	/* ============================================================
	   RESPONSIVE - mobile
	   ============================================================ */
	@media (max-width: 40rem) {

		:root {
			--page-margin: 1rem;
			--fs-3xl: 1.875rem;
			--fs-2xl: 1.5rem;
			--fs-xl: 1.25rem;
			--space-9: 3rem;
			--space-8: 2.5rem;
			--space-7: 2rem;
		}

		.section-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
		.section-head .lede { max-width: none; }

		.hero-actions { flex-direction: column; align-items: stretch; }
		.hero-meta { flex-wrap: wrap; row-gap: var(--space-4); }

		.grid-2,
		.grid-3,
		.grid-6,
		.method-grid,
		.industry-grid,
		.pricing-grid,
		.exp-columns { grid-template-columns: 1fr; }

		.stat-strip { grid-template-columns: repeat(2, 1fr); }
		.stat-cell { border-right: none !important; border-bottom: var(--border-width) solid var(--color-border); }
		.stat-cell:nth-last-child(-n+2) { border-bottom: none; }
		.stat-cell:nth-child(n+3) { border-top: none; }
		.stat-cell:nth-child(even) { border-left: var(--border-width) solid var(--color-border); }

		.process-list { grid-template-columns: 1fr; }
		.process-step { border-right: none !important; border-bottom: var(--border-width) solid var(--color-border); }
		.process-step:last-child { border-bottom: none; }

		.cta-band { flex-direction: column; align-items: flex-start; }
		.cta-band .btn-primary { width: 100%; justify-content: center; }

		.footer-grid { grid-template-columns: 1fr; }
		.footer-brand { grid-column: auto; }

		.footer-bottom { flex-direction: column; align-items: flex-start; }

		.announcement-text { display: none; }

		.report-tabbar { flex-direction: column; }
		.report-tabbar label { border-right: none; border-bottom: var(--border-width) solid var(--color-border); }
		.report-tabbar label:last-child { border-bottom: none; }

		.models-strip { flex-direction: column; gap: var(--space-3); text-align: center; }
		.models-strip-label { border-right: none; padding-right: 0; }
		.models-strip-list { gap: var(--space-4); }

		.gallery-grid { grid-template-columns: 1fr; }

		.roadmap-list { grid-template-columns: 1fr; }
		.roadmap-step { border-right: none; border-bottom: var(--border-width) solid rgba(255,255,255,0.14); }
		.roadmap-step:last-child { border-bottom: none; }

		.cta-band.with-form { grid-template-columns: 1fr; }

		.newsletter-form { flex-direction: column; }
		.form-row-split { grid-template-columns: 1fr; }
		.sample-banner { flex-direction: column; align-items: flex-start; }
		.sample-banner .btn { width: 100%; justify-content: center; }

		/* Two 16rem-basis select columns side by side don't fit a phone
		   screen, each gets squeezed to ~165px and the model name clips
		   against the dropdown arrow (Ben 2026-07-20, LLM Model Comparison
		   tab). Stack them instead. flex-basis is a main-axis measurement,
		   so switching to flex-direction:column without resetting it turns
		   that 16rem into a HEIGHT instead of a width, leaving a ~170px
		   empty gap under each select (caught on a real iPhone after the
		   first mobile pass, missed in emulation - Ben 2026-07-20). */
		.compare-select-row { flex-direction: column; gap: var(--space-3); }
		.compare-select-label { flex: 0 0 auto; }
		.compare-select-right { text-align: left; align-items: flex-start; }

		/* The correlation table's inner <table> was pinned to width:100%,
		   which crushed all 6 columns to fit instead of ever triggering
		   the horizontal scroll .data-table is already set up for (Ben
		   2026-07-20). Give it a floor so it scrolls instead of clipping. */
		.data-table table { min-width: 42rem; }

		/* Nav row overflows off-screen on phone widths otherwise: "FROM BEN
		   WILLS" wraps to three lines and pushes the hamburger toggle and
		   the CTA button past the right edge, out of reach (Ben 2026-07-20). */
		.brand-sub { display: none; }
		.nav-login { display: none; }
		.nav-actions { gap: var(--space-3); }
		.btn.btn-primary.btn-sm { padding-left: var(--space-3); padding-right: var(--space-3); }
	}


/*******************************************************************************
PAGE HEADER - h1 variant of .section-head, for interior page titles
*******************************************************************************/
	.section-head h1 {
		font-size: var(--fs-2xl);
		font-weight: 600;
		letter-spacing: -0.01em;
		line-height: var(--lh-tight);
		margin-top: var(--space-2);
	}


/*******************************************************************************
PROSE - long-form article & text content (blog posts, privacy, terms)

Laid out as a breakout grid: a centered text column sized for readability
(min(40rem, 100%), which collapses to full width on small screens with no
media query needed), while figures, tables, and video embeds span the full
width of the surrounding .shell. Every direct child defaults to the text
column; the three exceptions are opted into the wide track explicitly. No
sidebar involved - this is what lets images/tables run wider than the text
without one. --prose-width is shared with .post-hero-inner so a post's title
block lines up with its own body-text column.
*******************************************************************************/
	:root {
		--prose-width: 48rem;   /* was 40rem; +10% wider (Ben 2026-07-19) */
	}

	.prose {
		display: grid;
		grid-template-columns: 1fr min(var(--prose-width), 100%) 1fr;
		column-gap: var(--space-6);
	}

	.prose > * {
		grid-column: 2;
	}

	.prose > figure,
	.prose > .data-table,
	.prose > .embed-16x9 {
		grid-column: 1 / -1;
	}

	.prose h1 {
		font-size: var(--fs-2xl);
		font-weight: 700;
		line-height: var(--lh-tight);
		margin-top: var(--space-7);
		margin-bottom: var(--space-3);
	}

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

	.prose h2 {
		font-size: var(--fs-xl);
		font-weight: 600;
		margin-top: var(--space-7);
		margin-bottom: var(--space-3);
	}

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

	.prose h3 {
		font-size: var(--fs-lg);
		font-weight: 600;
		margin-top: var(--space-6);
		margin-bottom: var(--space-2);
	}

	.prose h4 {
		font-size: var(--fs-md);
		font-weight: 600;
		margin-top: var(--space-5);
		margin-bottom: var(--space-2);
	}

	.prose p {
		margin-bottom: var(--space-4);
		color: var(--color-text-muted);
		font-size: var(--fs-md);
		line-height: var(--lh-normal);
	}

	.prose ul,
	.prose ol {
		margin: 0 0 var(--space-4);
		padding-left: var(--space-5);
	}

	.prose ul { list-style: disc; }

	.prose ul li,
	.prose ol li {
		margin-bottom: var(--space-2);
		color: var(--color-text-muted);
		font-size: var(--fs-md);
	}

	/* callout card - used for stat pull-outs in posts and quotes on pages.
	   Inline styles inside blockquotes are stripped by
	   OA_CleanBlockquoteInlineStyles in functions.core.php, so these rules
	   are the single source of truth. */
	.prose blockquote {
		margin: var(--space-6) 0;
		padding: var(--space-5) var(--space-6);
		background: var(--color-surface);
		border: var(--border-width) solid var(--color-border);
		border-left: var(--border-width-strong) solid var(--color-accent);
		border-radius: 0 var(--radius-md) var(--radius-md) 0;
		color: var(--color-text);
	}

	.prose blockquote p {
		margin: 0 0 var(--space-3);
		color: var(--color-text);
		font-size: var(--fs-md);
		line-height: var(--lh-snug);
	}

	.prose blockquote p:last-child { margin-bottom: 0; }

	/* the headline stat ("99.3%", "80.5%") reads in accent */
	.prose blockquote strong {
		color: var(--color-accent);
		font-weight: 700;
	}

	/* data-source footnote, mirrors the figcaption treatment minus the
	   uppercase (these run a full sentence long) */
	.prose blockquote small {
		display: block;
		font-family: var(--font-mono);
		font-size: var(--fs-xs);
		color: var(--color-text-faint);
		line-height: var(--lh-snug);
	}

	.prose figure {
		margin: var(--space-7) 0;
	}

	.prose img {
		width: 100%;
		height: auto;
		border-radius: var(--radius-md);
		border: var(--border-width) solid var(--color-border);
		display: block;
	}

	.prose figcaption {
		margin-top: var(--space-2);
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}

	.prose .data-table {
		margin: var(--space-6) 0;
	}

	/* PROSE TABLE - bare <table> tags in blog-post content get wrapped in
	   .prose-table by OA_WrapProseTables (functions.core.php, posts only),
	   so these rules never leak into tables elsewhere on the site. Same
	   card language as .data-table, sized for the 40rem text column, and
	   the wrapper scrolls horizontally on small screens. */
	.prose-table {
		margin: var(--space-6) 0;
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-surface);
		overflow-x: auto;
	}

	.prose-table table {
		width: 100%;
		border-collapse: collapse;
	}

	.prose-table th {
		text-align: left;
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-text-faint);
		font-weight: 500;
		padding: var(--space-3) var(--space-4);
		background: var(--color-bg-alt);
		border-bottom: var(--border-width) solid var(--color-border);
		white-space: nowrap;
	}

	.prose-table td {
		padding: var(--space-3) var(--space-4);
		border-bottom: var(--border-width) solid var(--color-border);
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
		font-variant-numeric: tabular-nums;
	}

	.prose-table td:first-child { color: var(--color-text); }

	.prose-table tr:last-child td { border-bottom: none; }

	.prose-table tbody tr:hover { background: var(--color-bg-alt); }

	.prose a {
		color: var(--color-accent);
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

	.prose strong { color: var(--color-text); }


/*******************************************************************************
AUTH - login page
*******************************************************************************/
	.auth-wrap {
		max-width: 26rem;
		margin: 0 auto;
	}

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

	.auth-links {
		display: flex;
		justify-content: space-between;
		margin-top: var(--space-4);
		font-size: var(--fs-xs);
		color: var(--color-text-muted);
	}

	.auth-links a:hover { color: var(--color-text); }

	.account-wrap { max-width: 40rem; }

	.account-links {
		display: flex;
		flex-direction: column;
		margin-top: var(--space-6);
	}

	.account-link-row {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		padding: var(--space-5) var(--space-6);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		text-decoration: none;
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
	}

	.account-link-row + .account-link-row { margin-top: var(--space-3); }

	.account-link-row:hover {
		border-color: var(--color-border-strong);
		box-shadow: var(--shadow-card);
	}

	.account-link-row-body { flex: 1; min-width: 0; }

	.account-link-row-title {
		color: var(--color-text);
		font-weight: 600;
		margin: 0 0 var(--space-1);
	}

	.account-link-row-desc {
		color: var(--color-text-muted);
		font-size: var(--fs-sm);
		margin: 0;
	}

	.account-link-row-arrow {
		flex-shrink: 0;
		color: var(--color-text-muted);
	}

	.account-link-row:hover .account-link-row-arrow { color: var(--color-accent); }


/*******************************************************************************
BLOG POST - hero title block, meta row, tags, and the generic 16:9 video
embed component
*******************************************************************************/
	.post-hero-inner {
		max-width: var(--prose-width);
		margin: 0 auto;
	}

	.post-meta {
		display: flex;
		align-items: center;
		gap: var(--space-5);
		margin-top: var(--space-6);
		padding-top: var(--space-5);
		border-top: var(--border-width) solid var(--color-border);
		font-family: var(--font-mono);
		font-size: var(--fs-xs);
		color: var(--color-text-faint);
		flex-wrap: wrap;
	}

	.post-meta-item strong {
		font-family: var(--font-sans);
		color: var(--color-text);
		font-weight: 600;
	}

	.post-tags {
		display: flex;
		gap: var(--space-2);
		flex-wrap: wrap;
		margin-top: var(--space-4);
	}

	.post-tag {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-text-muted);
		border: var(--border-width) solid var(--color-border-strong);
		border-radius: 999px;
		padding: var(--space-1) var(--space-3);
	}

	.embed-16x9 {
		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: var(--radius-md);
		overflow: hidden;
		border: var(--border-width) solid var(--color-panel-dark-border);
	}

	.embed-16x9 iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}



/*******************************************************************************
FOOTER SOCIAL ICONS - hoverable icon boxes carried over from the previous
theme's footer, restyled with the v2 tokens. Replaces the plain text links
in .footer-socials.
*******************************************************************************/
	.footer-socials a {
		width: 2rem;
		height: 2rem;
		display: flex;
		align-items: center;
		justify-content: center;
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-sm);
		color: var(--color-text-faint);
		transition: border-color 0.15s ease, color 0.15s ease;
	}

	.footer-socials a:hover {
		border-color: var(--color-accent);
		color: var(--color-accent);
	}

	.footer-socials svg {
		width: 1rem;
		height: 1rem;
		fill: currentColor;
	}


/*******************************************************************************
PAGINATION - styles WordPress's the_posts_pagination() output on the blog
listing and archive templates.
*******************************************************************************/
	.pagination {
		margin-top: var(--space-7);
	}

	.pagination .nav-links {
		display: flex;
		justify-content: center;
		gap: var(--space-2);
		flex-wrap: wrap;
	}

	.pagination .page-numbers {
		font-family: var(--font-mono);
		font-size: var(--fs-xs);
		color: var(--color-text-muted);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-sm);
		padding: var(--space-2) var(--space-3);
	}

	.pagination a.page-numbers:hover {
		border-color: var(--color-accent);
		color: var(--color-accent);
	}

	.pagination .page-numbers.current {
		background: var(--color-accent-soft);
		border-color: var(--color-accent);
		color: var(--color-accent-strong);
	}


/*******************************************************************************
AUTH MESSAGES - error/success notices on the login, lost-password, and
logout templates (session messages from functions.login.php).
*******************************************************************************/
	.auth-msg {
		border: var(--border-width) solid var(--color-border-strong);
		border-radius: var(--radius-sm);
		padding: var(--space-3) var(--space-4);
		margin-bottom: var(--space-5);
		font-size: var(--fs-sm);
		color: var(--color-text);
	}

	.auth-msg p { margin: 0 0 var(--space-2); }
	.auth-msg p:last-child { margin-bottom: 0; }

	.auth-msg-error {
		border-color: var(--color-negative);
		background: var(--color-negative-soft);
	}

	.auth-msg-success {
		border-color: var(--color-accent);
		background: var(--color-accent-soft);
	}

	.auth-actions {
		display: flex;
		gap: var(--space-3);
		margin-top: var(--space-5);
		flex-wrap: wrap;
	}

	.auth-form-footnote {
		margin-bottom: var(--space-5);
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
		line-height: var(--lh-normal);
	}

	.form-check-row {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-bottom: var(--space-4);
		font-size: var(--fs-sm);
		color: var(--color-text-muted);
	}

	.form-check-row input[type="checkbox"] {
		accent-color: var(--color-accent);
	}


/*******************************************************************************
FLUENT FORMS - styles Fluent Forms shortcode embeds site-wide to match the
design's .input-field / .form-label / .btn-primary styling, so a form built
in the FF admin drops in looking native (contact page, homepage CTA card,
newsletter box). Class names verified against the FF markup on
oppalerts.com (frm-fluent-form, ff-el-group, ff-el-input--label,
ff-el-form-control, ff-t-container, ff-btn-submit, ...).
*******************************************************************************/
	.frm-fluent-form .ff-el-group {
		margin-bottom: var(--space-4);
	}

	.frm-fluent-form .ff-el-form-control {
		width: 100%;
		padding: var(--space-3) var(--space-4);
		border: var(--border-width) solid var(--color-border-strong);
		border-radius: var(--radius-sm);
		font-family: var(--font-sans);
		font-size: var(--fs-sm);
		background: var(--color-surface);
		color: var(--color-text);
		transition: border-color 0.15s ease;
	}

	.frm-fluent-form .ff-el-form-control:hover {
		border-color: var(--color-text-faint);
	}

	.frm-fluent-form .ff-el-form-control:focus {
		outline: 2px solid var(--color-accent);
		outline-offset: 1px;
		border-color: var(--color-accent);
	}

	.frm-fluent-form textarea.ff-el-form-control {
		resize: vertical;
		min-height: 6rem;
	}

	.frm-fluent-form .ff-el-input--label label {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-text-muted);
	}

	/* multi-column rows (e.g. name fields side by side) */
	.frm-fluent-form .ff-t-container {
		display: flex;
		gap: var(--space-4);
	}

	.frm-fluent-form .ff-t-cell { flex: 1; }

	@media (max-width: 40rem) {
		.frm-fluent-form .ff-t-container { flex-direction: column; gap: 0; }
	}

	.frm-fluent-form .ff-btn-submit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		gap: var(--space-2);
		font-family: var(--font-sans);
		font-size: var(--fs-sm);
		font-weight: 600;
		padding: var(--space-3) var(--space-5);
		border-radius: var(--radius-sm);
		border: var(--border-width) solid transparent;
		cursor: pointer;
		background: var(--gradient-teal-btn);
		color: #FFFFFF;
	}

	.frm-fluent-form .ff-btn-submit:hover {
		filter: brightness(1.08);
	}

	/* validation + success/error messages */
	.frm-fluent-form .ff-el-is-error .ff-el-form-control {
		border-color: var(--color-negative);
	}

	.frm-fluent-form .error,
	.frm-fluent-form .text-danger {
		color: var(--color-negative);
		font-size: var(--fs-xs);
		margin-top: var(--space-1);
	}

	.ff-message-success {
		border: var(--border-width) solid var(--color-accent);
		background: var(--color-accent-soft);
		border-radius: var(--radius-sm);
		padding: var(--space-3) var(--space-4);
		font-size: var(--fs-sm);
		color: var(--color-text);
		margin-top: var(--space-4);
	}

	.ff_form_instance_hide { display: none; }

/*******************************************************************************
PAGE HERO - title-only variant of the blog post hero, used by page.php.
The rule is the same line the post hero gets from .post-meta's top border,
without the meta row.
*******************************************************************************/
	.page-hero-rule {
		margin-top: var(--space-6);
		border-top: var(--border-width) solid var(--color-border);
	}

/*******************************************************************************
VENDOR CARDS - recommended-vendors page. Link list inside cards + the
closing disclosure note.
*******************************************************************************/
	.vendor-links a {
		color: var(--color-accent);
		font-weight: 600;
	}

	.vendor-links a:hover {
		color: var(--color-accent-strong);
	}

	.vendor-disclosure {
		margin-top: var(--space-7);
		padding: var(--space-4) var(--space-5);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-bg-alt);
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		color: var(--color-text-faint);
		text-align: center;
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
	}


/*******************************************************************************
MOBILE NAV - CSS-only disclosure for .nav-links, which the base styles hide
below 64rem. Same checkbox + :has() pattern the dark-mode toggle uses; the
checkbox lives in .nav-actions and the panel drops below the sticky nav bar.
No JS.
*******************************************************************************/
	.nav-menu-input {
		position: absolute;
		opacity: 0;
		width: 1px;
		height: 1px;
	}

	.nav-menu-toggle { display: none; }

	@media (max-width: 64rem) {

		.nav-menu-toggle {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2rem;
			height: 2rem;
			cursor: pointer;
			color: var(--color-text-muted);
			transition: color 0.15s ease;
		}

		.nav-menu-toggle:hover { color: var(--color-text); }

		.nav-menu-toggle svg {
			width: 1.375rem;
			height: 1.375rem;
		}

		.nav-menu-input:focus-visible + .nav-menu-toggle {
			outline: 2px solid var(--color-accent);
			outline-offset: 2px;
			border-radius: var(--radius-sm);
		}

		/* hamburger ↔ close swap */
		.nav-menu-toggle .icon-close { display: none; }
		.nav:has(.nav-menu-input:checked) .nav-menu-toggle .icon-menu { display: none; }
		.nav:has(.nav-menu-input:checked) .nav-menu-toggle .icon-close { display: block; }

		/* dropdown panel - .nav is position:sticky, so this anchors to it
		   and sits over the page content */
		.nav:has(.nav-menu-input:checked) .nav-links {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			gap: 0;
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background: var(--color-surface);
			border-bottom: var(--border-width) solid var(--color-border);
			padding: var(--space-2) var(--page-margin) var(--space-4);
			z-index: 40;
		}

		.nav:has(.nav-menu-input:checked) .nav-links a {
			padding: var(--space-4) 0;
			border-bottom: var(--border-width) solid var(--color-border);
		}

		.nav:has(.nav-menu-input:checked) .nav-links a:last-child {
			border-bottom: none;
		}

		/* the desktop hover-underline doesn't make sense in a list */
		.nav:has(.nav-menu-input:checked) .nav-links a::after { display: none; }
	}

/*******************************************************************************
PROSE HR - section separators inside long-form content (used by the About
page story, which also uses inline float styles on its images like the
original oppalerts.com page).
*******************************************************************************/
	.prose hr {
		border: none;
		border-top: var(--border-width) solid var(--color-border);
		margin: var(--space-7) 0;
	}

/*******************************************************************************
SELF-HOSTED FONTS - Inter (variable 400–700) and JetBrains Mono (variable
400–600), downloaded from Google Fonts and served from the theme's fonts/
directory. Latin, latin-ext, and greek subsets (greek covers the ρ used in
the correlation tables). Replaces the fonts.googleapis.com stylesheet -
the enqueue in functions.php is commented out. Same fonts are used by the
0.v2/reports project, so these files cover it too.
*******************************************************************************/
	@font-face {
		font-family: 'Inter';
		font-style: normal;
		font-weight: 400 700;
		font-display: swap;
		src: url('fonts/inter-greek.woff2') format('woff2');
		unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
	}

	@font-face {
		font-family: 'Inter';
		font-style: normal;
		font-weight: 400 700;
		font-display: swap;
		src: url('fonts/inter-latin.woff2') format('woff2');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	@font-face {
		font-family: 'Inter';
		font-style: normal;
		font-weight: 400 700;
		font-display: swap;
		src: url('fonts/inter-latin-ext.woff2') format('woff2');
		unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}

	@font-face {
		font-family: 'JetBrains Mono';
		font-style: normal;
		font-weight: 400 600;
		font-display: swap;
		src: url('fonts/jetbrains-mono-greek.woff2') format('woff2');
		unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
	}

	@font-face {
		font-family: 'JetBrains Mono';
		font-style: normal;
		font-weight: 400 600;
		font-display: swap;
		src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

	@font-face {
		font-family: 'JetBrains Mono';
		font-style: normal;
		font-weight: 400 600;
		font-display: swap;
		src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
		unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}

/*******************************************************************************
BRAND SCALE-UP - the logo (mark, badge, wordmark, byline) runs ~20% larger
than the v2 base, matching the reports project's header where the badge
number reads clearly at a glance. Overrides the NAV block values above.
*******************************************************************************/
	.brand {
		font-size: 1.2rem;                /* was var(--fs-base) = 1rem */
	}

	.brand-mark {
		width: 2.125rem;                  /* was 1.75rem */
		height: 2.125rem;
		font-size: 0.8125rem;             /* was var(--fs-2xs) = 0.6875rem */
		border-radius: var(--radius-md);
	}

	.brand-notify {
		width: 1.1875rem;                 /* was 1rem */
		height: 1.1875rem;
		top: -0.375rem;
		right: -0.375rem;
		font-size: 0.6875rem;             /* was 0.5625rem */
	}

	.brand-sub {
		font-size: var(--fs-xs);          /* was var(--fs-2xs) */
	}

/*******************************************************************************
VERSION NOTE - small mono label above section heads marking which report
version the data below comes from (used on the homepage correlation table
and industry grid until V2 ships).
*******************************************************************************/
	.version-note {
		font-family: var(--font-mono);
		font-size: var(--fs-2xs);
		text-transform: uppercase;
		letter-spacing: var(--tracking-wide);
		color: var(--color-accent);
		margin-bottom: var(--space-3);
	}

/*******************************************************************************
HERO H1 TINTS - "AI Search Visibility" carries a faint hint of the brand
teal; the surrounding lines are pulled slightly toward gray. Both are
mixed from the theme tokens, so they track dark/light mode automatically.
Browsers without color-mix() fall back to the plain heading color.
*******************************************************************************/
	.hero-h1-brand {
		color: color-mix(in srgb, var(--color-text) 24%, var(--color-accent) 76%);
		text-shadow: 0 0 32px color-mix(in srgb, var(--color-accent) 22%, transparent);
	}

	.hero-h1-dim {
		color: color-mix(in srgb, var(--color-text) 60%, var(--color-text-muted) 40%);
	}

/*******************************************************************************
NEWSLETTER FORM - Fluent Forms inside the .newsletter-box: a narrow
centered column, stacked fields with the submit button below (FF's
natural layout). The field labels are visually hidden (kept for screen
readers) since the placeholders already carry them.
*******************************************************************************/
	.newsletter-box .frm-fluent-form {
		max-width: 22rem;
		margin: var(--space-5) auto 0;
		text-align: left;
	}

	.newsletter-box .frm-fluent-form .ff-el-group {
		margin-bottom: var(--space-3);
	}

	.newsletter-box .frm-fluent-form .ff-el-input--label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.newsletter-box .frm-fluent-form .ff_submit_btn_wrapper {
		margin-bottom: 0;
		margin-top: var(--space-4);
	}

/*******************************************************************************
FOOTER GRID WIDTHS - brand column takes 1/3 of the row; the remaining 2/3
splits Services 40% / Resources 40% / Company 20% (5:4:4:2 overall).
Scoped to desktop so the tablet/mobile stacking rules above still apply.
*******************************************************************************/
	@media (min-width: 64rem) {
		.footer-grid {
			grid-template-columns: 5fr 4fr 4fr 2fr;
		}
	}

/*******************************************************************************
STAT STRIP - 4 COLUMNS. The strip now holds 8 cells (and will grow), so
the base 6-column grid becomes 4 columns / rows of 4 on desktop, with the
border pattern adjusted (no right border at row ends, top borders between
rows). Also generalizes the tablet 3-column border rule from the fixed
nth-child(3) to every 3rd cell so any cell count works.
*******************************************************************************/
	@media (min-width: 64rem) {
		.stat-strip { grid-template-columns: repeat(4, 1fr); }
		.stat-cell:nth-child(4n) { border-right: none; }
		.stat-cell:nth-child(n+5) { border-top: var(--border-width) solid var(--color-border); }
	}

	@media (max-width: 64rem) and (min-width: 40.001rem) {
		.stat-cell:nth-child(3n) { border-right: none; }
	}

/* ============================================================
   STAT-STRIP-5 + MODELS COLUMNS: ported from the
   AI-Search-Visibility overview page so the homepage's headline
   stats and Models Sampled list match it (Ben, 2026-07-19).
   stat-strip-5 = 10 cells as two rows of five; a 1px grid gap
   over --color-border draws the separators, so no per-cell
   border math is needed and it works at any column count.
   Appended last so it wins the equal-specificity .stat-cell
   responsive rules above.
   ============================================================ */
	.stat-strip-5 {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: var(--border-width);
		background: var(--color-border);
		border: var(--border-width) solid var(--color-border);
		border-top: var(--border-width) solid var(--color-border);
	}
	.stat-strip-5 .stat-cell {
		border: none;
		background: var(--color-bg);
	}
	@media (max-width: 64rem) {
		.stat-strip-5 { grid-template-columns: repeat(3, 1fr); }
	}
	@media (max-width: 40rem) {
		.stat-strip-5 { grid-template-columns: repeat(2, 1fr); }
	}

	/* Models Sampled: one column per provider, models under each header. */
	.models-strip-cols { align-items: flex-start; }
	.models-strip-cols .models-strip-label { padding-top: 0.25rem; }
	.models-strip-grid {
		display: flex;
		gap: 3rem;
		flex-wrap: wrap;
		justify-content: center;
	}
	.models-col {
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
	}
	.models-col-head {
		font-size: 1rem;
		font-weight: 600;
		color: var(--color-text-muted);
		margin-bottom: 0.25rem;
		padding-bottom: 0.375rem;
		border-bottom: var(--border-width) solid var(--color-border);
	}
	.models-col span {
		font-family: var(--font-mono);
		font-size: 0.75rem;
		color: var(--color-text-faint);
		white-space: nowrap;
	}

/*******************************************************************************
FLUENTCART CUSTOMER PORTAL - the account dashboard (Dashboard / Purchase
History / Subscription Plans / Downloads / Profile) is a Vue + Element Plus
app whose colours are ALL driven by CSS custom properties (--el-* and
--fct-customer-dashboard-*) that the plugin defines on :root with light-mode
values. That makes the whole portal render light-on-dark on our dark theme.

Fix: re-point those tokens at the theme's own --color-* tokens. Because the
theme tokens already flip between dark (default) and light (nav toggle), this
single block themes the portal correctly in BOTH modes - no separate dark
override needed.

CRITICAL - why this is scoped to :root, not the portal container: the plugin
declares MANY tokens as aliases (e.g. --el-input-bg-color: var(--el-fill-color-
blank), --fct-...-title-color: var(--fct-...-primary-text-color)) on :root.
An alias declared on :root is resolved to a concrete colour ON :root and then
inherited down as that frozen value, so overriding only the *base* token on a
descendant (the container) never thaws the alias - the white cards/inputs/table
headers and dark titles stayed broken. Overriding the base tokens on the SAME
element the plugin declares them on (html/:root) makes every alias recompute.

We still keep it OFF the shop/checkout (which reuse Element Plus) with :has():
the block only applies to the <html> of a page that actually contains the
portal container, and its specificity beats the plugin's plain :root so it wins
regardless of stylesheet load order.
*******************************************************************************/
	html:root:has(.fct-customer-dashboard-app-container) {
		/* surfaces */
		--el-bg-color:                var(--color-surface);
		--el-bg-color-page:           var(--color-bg-alt);
		--el-bg-color-overlay:        var(--color-surface);
		--el-fill-color-blank:        var(--color-surface);
		--el-fill-color:              var(--color-bg-alt);
		--el-fill-color-light:        var(--color-bg-alt);
		--el-fill-color-lighter:      var(--color-bg-alt);
		--el-fill-color-dark:         var(--color-border);
		--el-fill-color-darker:       var(--color-border);
		--el-mask-color:              color-mix(in srgb, var(--color-bg) 85%, transparent);

		/* text */
		--el-text-color-primary:      var(--color-text);
		--el-text-color-regular:      var(--color-text);
		--el-text-color-secondary:    var(--color-text-muted);
		--el-text-color-placeholder:  var(--color-text-faint);
		--el-text-color-disabled:     var(--color-text-faint);

		/* borders */
		--el-border-color:            var(--color-border-strong);
		--el-border-color-light:      var(--color-border);
		--el-border-color-lighter:    var(--color-border);
		--el-border-color-extra-light:var(--color-border);
		--el-border-color-dark:       var(--color-border-strong);
		--el-border-color-darker:     var(--color-border-strong);
		--el-border-color-hover:      var(--color-text-faint);

		/* FluentCart dashboard chrome (sidebar, nav, titles, dividers) */
		--fct-customer-dashboard-primary-text-color:   var(--color-text);
		--fct-customer-dashboard-secondary-text-color: var(--color-text-muted);
		--fct-customer-dashboard-text-color:           var(--color-text-muted);
		--fct-customer-dashboard-border-color:         var(--color-border);
		--fct-customer-dashboard-divider-color:        var(--color-border);
		--fct-customer-dashboard-nav-text-color:       var(--color-text-muted);
		--fct-customer-dashboard-nav-active-bg-color:  var(--color-surface);
		--fct-customer-dashboard-nav-active-text-color:var(--color-text);
		--fct-customer-dashboard-nav-active-bar-color: var(--color-accent);

		/* primary action button: pin to the plugin's navy so it keeps white-text
		   contrast in BOTH modes (it would otherwise inherit the light text
		   colour above and vanish) */
		--fct-customer-dashboard-btn-bg-color:         #253241;
		--fct-customer-dashboard-btn-border-color:     #253241;

		/* logout button -> theme's negative tokens (both modes) */
		--fct-customer-dashboard-logout-btn-bg-color:       var(--color-negative-soft);
		--fct-customer-dashboard-logout-btn-hover-bg-color: color-mix(in srgb, var(--color-negative) 24%, transparent);
		--fct-customer-dashboard-logout-btn-text-color:     var(--color-negative);
	}

/*******************************************************************************
FLUENTCART CUSTOMER PORTAL - PART 2: width + hardcoded-colour overrides.

Two things the token remap above cannot do:

1) WIDTH. The portal renders (customer-profile block) inside page.php's
   <div class="prose">, a 3-col grid that clamps ordinary children to
   --prose-width (a narrow readability column) - which is why the portal was
   far narrower than the page title. We break it out to the full .shell width
   exactly the way the theme lets figures/tables break out.

2) HARDCODED COLOURS. FluentCart ships compiled Tailwind utilities with literal
   light-mode RGBs, many flagged !important (white card/icon backgrounds, grey
   button bg, navy/grey text, light borders). CSS variables cannot reach those,
   so we override the specific component classes with theme tokens, scoped under
   the portal root with enough specificity (+ !important) to win. Everything
   uses --color-* tokens, so light mode still matches the plugin's original look.
*******************************************************************************/

	/* 1) break the portal out of the narrow prose column -> full shell width.
	   The 2nd selector catches whatever direct child of .prose contains the
	   portal (WP may wrap shortcode output in a <p>/<div>); grid items are
	   direct children of .prose, so that wrapper is the one that must span. */
	.prose > .fct_customer_profile_wrap,
	.prose > *:has(.fct_customer_profile_wrap) {
		grid-column: 1 / -1;
	}

	/* 2) hardcoded-colour overrides. FC_ = portal-root scope, specific enough
	   to beat the plugin's own !important rules regardless of load order. */

	/* white / near-white surfaces -> theme surface */
	.fct-customer-root-container .fluent-cart-customer-profile-app .fct-customer-address-list,
	.fct-customer-root-container .fluent-cart-customer-profile-app .icon-button,
	.fct-customer-root-container .fluent-cart-customer-profile-app .fct-empty-icon-box,
	.fct-customer-root-container .fluent-cart-customer-profile-app .form-input-group select {
		background-color: var(--color-surface) !important;
		border-color: var(--color-border) !important;
	}

	/* light-grey table header -> theme */
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-table th.el-table__cell {
		background-color: var(--color-bg-alt) !important;
	}
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-table th.el-table__cell.is-leaf {
		border-color: var(--color-border) !important;
	}

	/* hardcoded navy text -> theme primary text */
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-table td.el-table__cell,
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-alert,
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-alert__description,
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-breadcrumb__inner,
	.fct-customer-root-container .fluent-cart-customer-profile-app .additional-info,
	.fct-customer-root-container .fluent-cart-customer-profile-app .form-input-group select,
	.fct-customer-root-container .fluent-cart-customer-profile-app .fct-customer-dashboard-empty-state h4,
	.fct-customer-root-container .fluent-cart-customer-profile-app .fct-customer-address-list {
		color: var(--color-text) !important;
	}

	/* hardcoded grey text -> theme muted text */
	.fct-customer-root-container .fluent-cart-customer-profile-app .fct-customer-dashboard-empty-state p,
	.fct-customer-root-container .fluent-cart-customer-profile-app .icon-button,
	.fct-customer-root-container .fluent-cart-customer-profile-app .fct-empty-text p {
		color: var(--color-text-muted) !important;
	}

	/* icons that hardcode navy -> inherit their context colour */
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-icon {
		color: currentColor !important;
	}

	/* buttons: default (grey bg / navy text) -> theme surface button */
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-button {
		background-color: var(--color-surface) !important;
		border-color: var(--color-border-strong) !important;
		color: var(--color-text) !important;
	}
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-button:hover,
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-button:focus {
		background-color: var(--color-bg-alt) !important;
		border-color: var(--color-text-faint) !important;
		color: var(--color-text) !important;
	}
	/* filled / primary buttons: keep dark-navy + white text (fine in both modes) */
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-button.el-button--primary,
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-button.is-primary {
		background-color: #253241 !important;
		border-color: #253241 !important;
		color: #fff !important;
	}

	/* disabled input (e.g. the Email field): its wrapper hardcodes a near-white
	   !important bg, and the value uses -webkit-text-fill-color so plain color
	   is not enough. Give it a muted-dark surface + readable text. */
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-input.is-disabled .el-input__wrapper {
		background-color: var(--color-bg-alt) !important;
	}
	.fct-customer-root-container .fluent-cart-customer-profile-app .el-input.is-disabled .el-input__inner {
		color: var(--color-text-muted) !important;
		-webkit-text-fill-color: var(--color-text-muted) !important;
	}