diff --git a/CLAUDE.md b/CLAUDE.md
index 014543bb5f..c1fc62eab5 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -27,6 +27,7 @@ pnpm lint:linkcheck   # Link validation (runs build first)
 pnpm lint:linkcheck:nobuild  # Link validation (skip build)
 pnpm lint:slugcheck   # Validate slugs match across languages
 pnpm lint:dualrender  # Validate IoT Hub server/client card render parity (needs a build)
+pnpm lint:landmarks   # One <main> per page + marketing table integrity (needs a build)
 pnpm format           # Format with Prettier
 ```
 
@@ -90,6 +91,8 @@ Use the `edit-doc` skill for full props, usage examples, and authoring rules for
 - **InstallationCardGrid** — installation option card grid
 - **RuleNodeCardGrid** — rule node category card grid
 - **DocLink** — product-aware internal links (always use instead of bare markdown links)
+- **DataTable** — semantic shell for comparison tables (caption → optional colgroup → `th scope="col"` header → tbody slot); callers pass `<tr>` rows whose first cell is `<th scope="row">`. `scrollable` wraps the table in a `role="region"` named from the caption, which `initScrollRegions` drops again on viewports where the table does not overflow. Styling contract: the caller's `<style>` must be `is:global`, nested under the caller's own class — scoped rules cannot match the shell DataTable renders
+- **DataTableValue** — one comparison cell's value, always as text; icons are decorative, an empty value fails the build
 - **Code blocks** — `maxLines`, `collapsible`, `wrap`, `download='file.ext'` meta options; `<Code>` component for dynamic code
 
 ### Product System
@@ -259,3 +262,5 @@ GitHub Actions runs: `astro check`, `eslint`, `slugcheck`.
 `lint:linkcheck` runs in a separate CI pipeline (not GitHub Actions) because it needs a full build. It must also pass before a PR can merge — so run it locally before requesting review, especially when adding, renaming, or removing pages, changing redirects, or editing internal links. Use `pnpm lint:linkcheck` for a clean check, or `pnpm lint:linkcheck:nobuild` if you already produced a build in this session and just want to re-validate links.
 
 `lint:dualrender` also needs a build and is **not wired into any pipeline yet** — run `pnpm lint:dualrender` by hand after a build when touching IoT Hub listing cards, their clone templates, or `iot-hub-listing-card-bind.ts`. It checks that the server render and the client-cloned render of a card still agree; breaking that is silent, since the page builds, typechecks and lints clean and only renders wrong once results come back from the API.
+
+`lint:landmarks` also needs a build and is not wired into a pipeline yet — run `pnpm lint:landmarks` by hand after a build when adding pages or layouts, or touching the marketing comparison tables. It asserts exactly one `<main>` per built page (Starlight emits one; a page-level `<main>` is always a nested duplicate) and that the marketing tables keep captions and carry every value as text. Both defects are silent: the page builds, typechecks and lints clean.
diff --git a/package.json b/package.json
index 8183fca159..45070daf6c 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "lint:eslint": "eslint .",
     "lint:steps": "node --experimental-transform-types ./scripts/lint-steps.ts",
     "lint:dualrender": "node --experimental-transform-types ./scripts/lint-dual-render.ts",
+    "lint:landmarks": "node --experimental-transform-types ./scripts/lint-landmarks.ts",
     "lint:redirects": "node --experimental-transform-types ./scripts/check-redirect-chains.ts",
     "netlify:build": "pnpm ${NETLIFY_BUILD_SCRIPT:-build}",
     "lunaria:build": "node --experimental-transform-types ./scripts/lunaria.mts",
diff --git a/scripts/lint-landmarks.ts b/scripts/lint-landmarks.ts
new file mode 100644
index 0000000000..fa558da1f9
--- /dev/null
+++ b/scripts/lint-landmarks.ts
@@ -0,0 +1,143 @@
+/**
+ * Checks two invariants that are invisible when broken — the page builds,
+ * typechecks, lints and visually renders fine — in the built output.
+ *
+ * One <main> per page: BaseLayout renders through <StarlightPage>, which emits
+ * its own <main id="_top">, so a page-level <main> is always a second, nested
+ * landmark. Pages get copied from older templates, which is how twenty of them
+ * had accumulated one before this check existed.
+ *
+ * Table integrity on the marketing pages listed in TABLE_PAGES: every table
+ * has a caption, no cell is empty (a screen reader or a text extraction reads
+ * nothing where the eye sees an icon), and no cell is self-closed (the source
+ * of the "Stray end tag" validator error). Scoped to marketing pages — docs
+ * tables are Markdown-authored and out of scope.
+ *
+ * Usage:
+ *   pnpm lint:landmarks          (after a build)
+ */
+
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path';
+
+const ROOT = 'dist';
+
+/** Pages whose tables are held to the caption/no-empty-cell contract.
+ *  allowEmpty grants a page a ceiling of intentionally blank cells. */
+const TABLE_PAGES: { page: string; allowEmpty?: number }[] = [
+	{ page: 'pricing' },
+	{ page: 'products/paas' },
+	{ page: 'products/thingsboard-edge' },
+	{ page: 'products/thingsboard-pe' },
+	{ page: 'google-iot-core-alternative' },
+	{ page: 'ce-vs-pe-diff' },
+	{ page: 'use-cases/scada' },
+	// The project timeline is a schedule, not a value matrix: a blank cell
+	// means the step is inactive that week, and every filled cell states its
+	// own duration, so a blank carries no value a reader loses.
+	{ page: 'services/development-services', allowEmpty: 49 },
+];
+
+function walkHtml(dir: string): string[] {
+	const files: string[] = [];
+	for (const entry of readdirSync(dir, { withFileTypes: true })) {
+		const fullPath = join(dir, entry.name);
+		if (entry.isDirectory()) files.push(...walkHtml(fullPath));
+		else if (entry.name.endsWith('.html')) files.push(fullPath);
+	}
+	return files;
+}
+
+/** Comments can legally contain "<main", so they never count. */
+const stripComments = (html: string): string => html.replace(/<!--[\s\S]*?-->/g, '');
+
+const cellText = (cell: string): string =>
+	cell
+		.replace(/<[^>]+>/g, ' ')
+		.replace(/&nbsp;/g, ' ')
+		.replace(/\s+/g, ' ')
+		.trim();
+
+let hasErrors = false;
+const fail = (msg: string): void => {
+	console.error(msg);
+	hasErrors = true;
+};
+
+try {
+	statSync(ROOT);
+} catch {
+	console.error(`No ${ROOT}/ directory — run a build first.`);
+	process.exit(1);
+}
+
+// ── one <main> per page ─────────────────────────────────────────────────────
+const pages = walkHtml(ROOT);
+let mainOk = 0;
+let stubs = 0;
+for (const page of pages) {
+	const html = stripComments(readFileSync(page, 'utf-8'));
+	// Astro emits redirect entries as bare meta-refresh stubs with no layout —
+	// not pages anyone lands on in production (the edge 301 wins), so exempt.
+	if (html.includes('<meta http-equiv="refresh"')) {
+		stubs += 1;
+		continue;
+	}
+	const mains = html.match(/<main[\s>]/g)?.length ?? 0;
+	if (mains === 1) mainOk += 1;
+	else fail(`${relative(ROOT, page)}: ${mains} <main> landmarks (want exactly 1)`);
+}
+
+// ── table integrity on the marketing pages ──────────────────────────────────
+for (const { page, allowEmpty = 0 } of TABLE_PAGES) {
+	const file = join(ROOT, page, 'index.html');
+	let html: string;
+	try {
+		html = stripComments(readFileSync(file, 'utf-8'));
+	} catch {
+		fail(`${page}: missing from the build — page renamed, or the list above is stale`);
+		continue;
+	}
+
+	const selfClosed = html.match(/<t[dh][^>]*\/>/g)?.length ?? 0;
+	if (selfClosed > 0) fail(`${page}: ${selfClosed} self-closing <td/>/<th/> cell(s)`);
+
+	const tables = html.match(/<table[\s\S]*?<\/table>/g) ?? [];
+	if (tables.length === 0) {
+		fail(`${page}: no tables found — page restructured, or the list above is stale`);
+		continue;
+	}
+
+	let empty = 0;
+	for (const [i, table] of tables.entries()) {
+		const caption = table.match(/<caption[^>]*>([\s\S]*?)<\/caption>/);
+		if (!caption || !cellText(caption[1])) {
+			fail(`${page}: table ${i + 1} of ${tables.length} has no caption text`);
+		}
+		for (const cell of table.match(/<(?:td|th)\b[^>]*>[\s\S]*?<\/(?:td|th)>/g) ?? []) {
+			if (!cellText(cell)) empty += 1;
+		}
+	}
+	if (empty > allowEmpty) {
+		fail(
+			`${page}: ${empty} empty cell(s)` +
+				(allowEmpty ? ` — ${allowEmpty} are allowed for the timeline` : '') +
+				`; a cell must carry its value as text, visible or visually hidden`
+		);
+	}
+}
+
+if (hasErrors) {
+	console.error(`
+Error: the invariant(s) above no longer hold. A second <main> usually means a
+page template still declares its own landmark — Starlight already provides
+one, so the page element should be a <div>. An empty cell usually means an
+icon lost its visually hidden text — render values through DataTableValue, or
+add a <span class="visually-hidden"> beside the icon.`);
+	process.exit(1);
+}
+
+console.log(
+	`✓ one <main> on ${mainOk}/${pages.length - stubs} pages (${stubs} redirect stubs exempt); ` +
+		`table contract holds on ${TABLE_PAGES.length} marketing pages.`
+);
diff --git a/src/components/DataTable.astro b/src/components/DataTable.astro
new file mode 100644
index 0000000000..6fa12471d4
--- /dev/null
+++ b/src/components/DataTable.astro
@@ -0,0 +1,136 @@
+---
+/**
+ * DataTable — semantic shell for the site's comparison tables.
+ *
+ * Emits caption → colgroup → thead (th scope="col") → tbody slot. Callers pass only
+ * <tr> rows whose first cell is a <th scope="row">.
+ *
+ * Sets no width, padding, border, border-collapse, table-layout, row height or icon
+ * size. The callers disagree on all of them — Pricing collapses its borders while the
+ * Edge matrix separates them by 16px — so appearance stays entirely with the caller.
+ *
+ * Styling contract: a caller moving its table shell in here must switch its <style>
+ * block to `is:global`, nested under its own class, in the same commit. Astro hashes
+ * every compound, so a caller's `tbody tr th { … }` stops matching as soon as tbody
+ * carries this component's hash instead of the caller's.
+ */
+import type { DataTableColumn } from '@models/data-table';
+import { slugId } from '@util/slug-id';
+
+interface Props {
+	/** Emitted as `<caption>`. Required — every table needs an accessible name. */
+	caption: string;
+	/** Show the caption. When false it stays in the a11y tree at zero layout cost. */
+	captionVisible?: boolean;
+	/** Visually hidden text appended to the caption — context the visible caption
+	 *  doesn't show, e.g. what is being compared. Include any separator. */
+	captionSr?: string;
+	captionClass?: string;
+	columns: DataTableColumn[];
+	/** Class on the `<table>` element — where the caller's CSS attaches. */
+	class?: string;
+	/** Emit a `<colgroup>`. Off for callers that size columns on the header cells. */
+	colgroup?: boolean;
+	/** Collapse the header row to zero height, e.g. when the visible header sits outside the table. */
+	headerHidden?: boolean;
+	/** Wrap in a keyboard-scrollable region, named from the caption. */
+	scrollable?: boolean;
+	scrollClass?: string;
+	/** Overrides the derived id. Needed only when one page has two identical captions. */
+	captionId?: string;
+}
+
+const {
+	caption,
+	captionVisible = false,
+	captionSr,
+	captionClass,
+	columns,
+	class: className,
+	colgroup = true,
+	headerHidden = false,
+	scrollable = false,
+	scrollClass,
+	captionId,
+} = Astro.props;
+
+// `||` not `??`: a caller computing the override from data can hand us an empty
+// string, which would emit id="" and leave the scroll region unnamed.
+const id = captionId?.trim() || slugId(caption, 'dt-caption');
+
+// Fragment collapses to nothing, so the table is unwrapped unless `scrollable`.
+const Wrapper = scrollable ? 'div' : Fragment;
+const wrapperProps = scrollable
+	? { class: scrollClass, role: 'region', 'aria-labelledby': id, tabindex: '0', 'data-scroll-region': true }
+	: {};
+
+/** Renders a header label, turning newlines into line breaks. */
+const labelLines = (label: string) => label.split('\n');
+---
+
+<Wrapper {...wrapperProps}>
+	<table class={className}>
+		<caption id={id} class:list={[captionClass, { 'dt-caption--hidden': !captionVisible }]}>
+			{captionVisible ? caption : <span class="visually-hidden">{caption}</span>}
+			{captionSr && <span class="visually-hidden">{captionSr}</span>}
+		</caption>
+		{colgroup && (
+			<colgroup>
+				{columns.map((col) => (
+					<col class={col.colClass} style={col.width ? `width:${col.width}` : undefined} />
+				))}
+			</colgroup>
+		)}
+		<thead class:list={[{ 'dt-thead--hidden': headerHidden }]}>
+			<tr>
+				{columns.map((col) => (
+					<th scope="col" class={col.thClass} style={col.thStyle}>
+						{col.label ? (
+							labelLines(col.label).map((line, i, all) =>
+								i < all.length - 1 ? (
+									<>
+										{line}
+										<br />
+									</>
+								) : (
+									line
+								)
+							)
+						) : (
+							<span class="visually-hidden">{col.srLabel ?? 'Feature'}</span>
+						)}
+					</th>
+				))}
+			</tr>
+		</thead>
+		<tbody>
+			<slot />
+		</tbody>
+	</table>
+</Wrapper>
+
+<script>
+	import { initScrollRegions } from '@util/scroll-regions';
+	initScrollRegions();
+</script>
+
+<style lang="scss" is:global>
+	@use '../styles/variables' as *;
+
+	/* Global for two reasons: tbody rows are caller-authored slot content, so a
+	   scoped rule could never match a span a caller writes into its rows; and it
+	   must stay unlayered to beat Starlight's layered .sr-only, which is missing
+	   entirely on LegalLayout pages. */
+	.visually-hidden {
+		@include visually-hidden;
+	}
+
+	.dt-caption--hidden {
+		@include caption-hidden;
+	}
+
+	.dt-thead--hidden th {
+		@include caption-hidden;
+		border: 0;
+	}
+</style>
diff --git a/src/components/DataTableValue.astro b/src/components/DataTableValue.astro
new file mode 100644
index 0000000000..86cff65340
--- /dev/null
+++ b/src/components/DataTableValue.astro
@@ -0,0 +1,71 @@
+---
+/**
+ * DataTableValue — renders one comparison cell's value as text, always.
+ *
+ * Icons are decorative (`aria-hidden`); the value itself is a text node, visible when
+ * the design shows text and visually-hidden when the design shows only an icon. That is
+ * what makes a cell readable by screen readers and by plain-text extraction.
+ *
+ * Never put `aria-label` on an `<Icon>`: astro-icon spreads props onto a bare `<svg>`
+ * with no `role="img"`, so the name is announced unreliably and extraction sees nothing.
+ */
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+	value: boolean | string;
+	/** Icon for `true`. */
+	yesIcon?: string;
+	yesClass?: string;
+	/** Icon for `false`. Without one the cell shows nothing — the value is still text. */
+	noIcon?: string;
+	noClass?: string;
+	yesText?: string;
+	noText?: string;
+}
+
+const {
+	value,
+	yesIcon = 'tabler:check',
+	yesClass,
+	noIcon,
+	noClass,
+	yesText = 'Yes',
+	noText = 'No',
+} = Astro.props;
+
+// A blank value would render a blank cell, which is the one thing this component
+// exists to prevent. Fail the build rather than ship it: the caller either has a
+// real value or wants an explicit one like 'N/A'.
+if (typeof value === 'string' && !value.trim()) {
+	throw new Error(
+		'DataTableValue: `value` is an empty string, which would render an empty cell. ' +
+			'Pass a real value, or one of Yes / No / N/A.'
+	);
+}
+---
+
+{
+	value === true ? (
+		<>
+			<Icon name={yesIcon} class={yesClass} aria-hidden="true" />
+			<span class="visually-hidden">{yesText}</span>
+		</>
+	) : value === false ? (
+		<>
+			{noIcon && <Icon name={noIcon} class={noClass} aria-hidden="true" />}
+			<span class="visually-hidden">{noText}</span>
+		</>
+	) : (
+		value
+	)
+}
+
+<style lang="scss" is:global>
+	@use '../styles/variables' as *;
+
+	// Declared here as well as in DataTable: this component can be used inside a
+	// hand-written table, and without the rule the value text would be visible.
+	.visually-hidden {
+		@include visually-hidden;
+	}
+</style>
diff --git a/src/components/IotHub/CategoryInfoSections.astro b/src/components/IotHub/CategoryInfoSections.astro
index 069b8e77e5..19d70f2bb1 100644
--- a/src/components/IotHub/CategoryInfoSections.astro
+++ b/src/components/IotHub/CategoryInfoSections.astro
@@ -22,7 +22,7 @@ function assertNever(block: never): never {
 {
 	info && info.length > 0 && (
 		<div class="ih-info">
-			{info.map((block) =>
+			{info.map((block, i) =>
 				block.kind === 'prose' ? (
 					<SectionAbout heading={block.heading} body={block.body} />
 				) : block.kind === 'bullets' ? (
@@ -33,6 +33,7 @@ function assertNever(block: never): never {
 						intro={block.intro}
 						columns={block.columns}
 						rows={block.rows}
+						captionId={`ih-table-${categorySlug}-${i}`}
 					/>
 				) : block.kind === 'steps' ? (
 					<SectionHowItWorks
diff --git a/src/components/IotHub/SectionTable.astro b/src/components/IotHub/SectionTable.astro
index 4ef6823ea6..ed44c3a151 100644
--- a/src/components/IotHub/SectionTable.astro
+++ b/src/components/IotHub/SectionTable.astro
@@ -1,19 +1,27 @@
 ---
+import { slugId } from '@util/slug-id';
+
 interface Props {
 	heading: string;
 	intro?: string;
 	columns: string[];
 	rows: string[][];
+	/** Overrides the derived id. Needed only when one page has two identical headings. */
+	captionId?: string;
 }
 
-const { heading, intro, columns, rows } = Astro.props;
+const { heading, intro, columns, rows, captionId } = Astro.props;
+
+const id = captionId?.trim() || slugId(heading, 'ih-table');
 ---
 
 <section class="ih-table">
 	<h2 class="ih-table__title">{heading}</h2>
 	{intro && <p class="ih-table__intro">{intro}</p>}
-	<div class="ih-table__scroll">
+	<div class="ih-table__scroll" role="region" aria-labelledby={id} tabindex="0" data-scroll-region>
 		<table class="ih-table__table">
+			{/* Hidden: the <h2> above already shows this text. */}
+			<caption id={id} class="ih-table__caption">{heading}</caption>
 			<thead>
 				<tr>
 					{columns.map((col) => <th scope="col">{col}</th>)}
@@ -34,6 +42,11 @@ const { heading, intro, columns, rows } = Astro.props;
 	</div>
 </section>
 
+<script>
+	import { initScrollRegions } from '@util/scroll-regions';
+	initScrollRegions();
+</script>
+
 <style lang="scss">
 	@use '../../styles/_variables.scss' as *;
 	@use '../../styles/_iot-hub.scss' as *;
@@ -52,6 +65,10 @@ const { heading, intro, columns, rows } = Astro.props;
 		@include iot-hub-section-intro;
 	}
 
+	.ih-table__caption {
+		@include caption-hidden;
+	}
+
 	.ih-table__scroll {
 		overflow-x: auto;
 		// Rounded outer frame (matches buttons/cards); cells draw only inner
diff --git a/src/components/Landing/ComparisonMatrix.astro b/src/components/Landing/ComparisonMatrix.astro
index 70e337a130..3d53746cd1 100644
--- a/src/components/Landing/ComparisonMatrix.astro
+++ b/src/components/Landing/ComparisonMatrix.astro
@@ -1,5 +1,8 @@
 ---
 import { Icon } from 'astro-icon/components';
+import DataTable from '@components/DataTable.astro';
+import DataTableValue from '@components/DataTableValue.astro';
+import type { DataTableColumn } from '@models/data-table';
 
 interface Column {
 	/** Column header label. Use \n for line breaks. */
@@ -22,30 +25,82 @@ interface Row {
 
 interface Props {
 	title?: string;
+	/** Table's accessible name. Defaults to `title`, which rarely names what is compared. */
+	caption?: string;
 	columns: Column[];
 	rows: Row[];
 	/** Remove the default 60px top margin (use when matrix is directly below another section). */
 	noTopMargin?: boolean;
 }
 
-const { title, columns, rows, noTopMargin = false } = Astro.props;
+const { title, caption, columns, rows, noTopMargin = false } = Astro.props;
+
+// Values are read positionally against `columns`, so a length mismatch would
+// otherwise fail deep in the render with an opaque error.
+const mismatch = rows.find((row) => row.values.length !== columns.length);
+if (mismatch) {
+	throw new Error(
+		`ComparisonMatrix: row "${mismatch.label}" has ${mismatch.values.length} values but ${columns.length} columns are defined.`
+	);
+}
+
+// Geometry shared between the table's stylesheet and the decorative column
+// backgrounds. The backgrounds are absolutely positioned boxes pinned above
+// the table, so anything that changes the table's height detaches them; the
+// stylesheet reads these same values through the custom properties set on the
+// section, so a change here moves both layers together. Desktop values only —
+// the backgrounds are display:none below md, where the rows size themselves.
+const HEADER_ROW_H = 152; // thead tr height
+const BODY_ROW_H = 64; // tbody tr height
+const TABLE_TOP_MARGIN = 64; // table margin-top
+const TITLE_LINE_H = 63; // h2 line-height at md+
+const BG_TAIL = 44; // how far the backgrounds run past the last row
+const RULE_TOP = 108; // horizontal rule inside each background, from its top
+const RULE_W = 2;
+const FEATURE_COL_PCT = 40; // row-header column width — every viewport, both layers
 
 const numCols = columns.length;
-const colWidthPct = (100 - 40) / numCols;
+const colWidthPct = (100 - FEATURE_COL_PCT) / numCols;
 // when noTopMargin and no title: backgrounds start at 0 (table also has margin-top:0)
-const colTopOffset = title ? 127 : (noTopMargin ? 0 : 64);
-const colHeight = 152 + rows.length * 64 + 44;
+const colTopOffset = title ? TITLE_LINE_H + TABLE_TOP_MARGIN : noTopMargin ? 0 : TABLE_TOP_MARGIN;
+const colHeight = HEADER_ROW_H + rows.length * BODY_ROW_H + BG_TAIL;
 
 function colBgImage(col: Column): string {
 	const border = col.borderColor ?? col.accentColor;
 	if (col.highlight) {
-		return `linear-gradient(to bottom, ${col.accentColor} 108px, transparent 108px)`;
+		return `linear-gradient(to bottom, ${col.accentColor} ${RULE_TOP}px, transparent ${RULE_TOP}px)`;
 	}
-	return `linear-gradient(to bottom, transparent 108px, ${border} 108px, ${border} 110px, transparent 110px)`;
+	return `linear-gradient(to bottom, transparent ${RULE_TOP}px, ${border} ${RULE_TOP}px, ${border} ${RULE_TOP + RULE_W}px, transparent ${RULE_TOP + RULE_W}px)`;
 }
+
+// No colgroup: widths ride on the header cells, as they did before. Static
+// declarations live in the stylesheet (.feature-col width, thead centring);
+// only the per-column width and colour custom properties are inline.
+const dtColumns: DataTableColumn[] = [
+	{ thClass: 'feature-col' },
+	...columns.map((col) => ({
+		label: col.label,
+		thClass: col.highlight ? 'col-highlighted' : undefined,
+		thStyle: {
+			width: `${colWidthPct}%`,
+			'--col-color': col.highlight ? '#fff' : col.accentColor,
+			'--col-color-mobile': col.accentColor,
+		},
+	})),
+];
 ---
 
-<section id="matrix" class:list={[{ 'no-top-margin': noTopMargin }]}>
+<section
+	id="matrix"
+	class:list={['comparison-matrix', { 'no-top-margin': noTopMargin }]}
+	style={{
+		'--matrix-header-row-h': `${HEADER_ROW_H}px`,
+		'--matrix-body-row-h': `${BODY_ROW_H}px`,
+		'--matrix-table-top': `${TABLE_TOP_MARGIN}px`,
+		'--matrix-title-lh': `${TITLE_LINE_H}px`,
+		'--matrix-feature-col-w': `${FEATURE_COL_PCT}%`,
+	}}
+>
 	<div class="matrix-inner">
 		<div class="backg-matrix" aria-hidden="true">
 			{
@@ -57,10 +112,24 @@ function colBgImage(col: Column): string {
 						: 'none';
 					return (
 						<div
-							style={`width:${colWidthPct}%;position:absolute;z-index:0;top:${colTopOffset}px;right:${rightPct}%;padding:0 7px;`}
+							style={{
+								width: `${colWidthPct}%`,
+								position: 'absolute',
+								'z-index': 0,
+								top: `${colTopOffset}px`,
+								right: `${rightPct}%`,
+								padding: '0 7px',
+							}}
 						>
 							<div
-								style={`height:${colHeight}px;border-radius:12px;border:2px solid ${border};background-image:${colBgImage(col)};background-origin:border-box;box-shadow:${shadow};`}
+								style={{
+									height: `${colHeight}px`,
+									'border-radius': '12px',
+									border: `2px solid ${border}`,
+									'background-image': colBgImage(col),
+									'background-origin': 'border-box',
+									'box-shadow': shadow,
+								}}
 							/>
 						</div>
 					);
@@ -70,83 +139,45 @@ function colBgImage(col: Column): string {
 
 		{title && <h2>{title}</h2>}
 
-		<table>
-			<thead>
-				<tr>
-					<td style="width:40%" />
-					{
-						columns.map((col) => {
-							const lines = col.label.split('\n');
-							return (
-								<th
-									scope="col"
-									class:list={[{ 'col-highlighted': col.highlight }]}
-									style={`width:${colWidthPct}%;text-align:center;--col-color:${col.highlight ? '#fff' : col.accentColor};--col-color-mobile:${col.accentColor};--col-accent:${col.accentColor};`}
-								>
-									{lines.map((line, li) =>
-										li < lines.length - 1 ? (
-											<>
-												{line}
-												<br />
-											</>
-										) : (
-											line
-										)
-									)}
-								</th>
-							);
-						})
-					}
-				</tr>
-			</thead>
-			<tbody>
-				{
-					rows.map((row) => (
-						<tr>
-							<th scope="row">
-								{row.href ? (
-									<a href={row.href}>
-										{row.label}
-										<Icon
-											name="tabler:help-circle-filled"
-											class="faq-icon"
-											aria-hidden="true"
-										/>
-									</a>
-								) : (
-									row.label
-								)}
-							</th>
-							{row.values.map((val, i) => {
-								const col = columns[i];
-								return (
-									<td style={`--col-color:${col.accentColor};`}>
-										{val === true && (
-											<Icon name="tabler:check" aria-label="Available" />
-										)}
-										{val === false && (
-											<Icon
-												name="tabler:x"
-												class="disabled"
-												aria-label="Not available"
-											/>
-										)}
-										{typeof val === 'string' && val}
-									</td>
-								);
-							})}
-						</tr>
-					))
-				}
-			</tbody>
-		</table>
+		{/* Caption hidden: the decorative column backgrounds are positioned off
+		    hardcoded row metrics, so the table must add no height of its own. */}
+		<DataTable caption={caption ?? title ?? 'Feature comparison'} columns={dtColumns} colgroup={false}>
+			{
+				rows.map((row) => (
+					<tr>
+						<th scope="row">
+							{row.href ? (
+								<a href={row.href}>
+									{row.label}
+									<Icon
+										name="tabler:help-circle-filled"
+										class="faq-icon"
+										aria-hidden="true"
+									/>
+								</a>
+							) : (
+								row.label
+							)}
+						</th>
+						{row.values.map((val, i) => (
+							<td style={`--col-color:${columns[i].accentColor};`}>
+								<DataTableValue value={val} noIcon="tabler:x" noClass="disabled" />
+							</td>
+						))}
+					</tr>
+				))
+			}
+		</DataTable>
 	</div>
 </section>
 
-<style lang="scss">
+<style lang="scss" is:global>
 	@use '../../styles/variables' as *;
 
-	#matrix {
+	/* Global, not scoped: the table shell now comes from DataTable, and Astro
+	   hashes every compound — a scoped `thead tr th` would stop matching. Every
+	   rule is nested under .comparison-matrix so nothing leaks. */
+	.comparison-matrix {
 		margin: 60px calc(-50vw + 50%) 0;
 		padding: 72px max(calc(50vw - 50%), 1.25rem) 112px;
 		position: relative;
@@ -159,169 +190,169 @@ function colBgImage(col: Column): string {
 				margin-top: 0;
 			}
 		}
-	}
 
-	.matrix-inner {
-		position: relative;
-		max-width: 1400px;
-		margin: 0 auto;
-	}
-
-	h2 {
-		color: $color-dark;
-		font-weight: $font-weight-semibold;
-		font-size: 22px;
-		line-height: 40px;
-		margin: 0;
-		position: relative;
-		z-index: 1;
-
-		@include media-up(md) {
-			font-size: $font-size-6xl;
-			line-height: 63px;
+		.matrix-inner {
+			position: relative;
+			max-width: 1400px;
+			margin: 0 auto;
 		}
-	}
 
-	// ── Decorative column backgrounds ─────────────────────────────
-	.backg-matrix {
-		position: relative;
-		margin: 0 -20px;
-		width: calc(100% + 40px);
+		h2 {
+			color: $color-dark;
+			font-weight: $font-weight-semibold;
+			font-size: 22px;
+			line-height: 40px;
+			margin: 0;
+			position: relative;
+			z-index: 1;
 
-		@include media-down(md) {
-			display: none;
+			@include media-up(md) {
+				font-size: $font-size-6xl;
+				line-height: var(--matrix-title-lh);
+			}
 		}
-	}
 
-	// ── Table ─────────────────────────────────────────────────────
-	table {
-		width: calc(100% + 40px);
-		margin: 64px -20px 16px;
-		table-layout: fixed;
-		border: none;
-		border-collapse: collapse;
-		position: relative;
-		z-index: 1;
+		// ── Decorative column backgrounds ─────────────────────────────
+		.backg-matrix {
+			position: relative;
+			margin: 0 -20px;
+			width: calc(100% + 40px);
 
-		@include media-down(md) {
-			width: 100%;
-			margin-left: 0;
-			margin-right: 0;
+			@include media-down(md) {
+				display: none;
+			}
 		}
 
-		:global(svg) {
-			font-size: 25px;
-			width: 25px;
-			height: 25px;
+		// ── Table ─────────────────────────────────────────────────────
+		table {
+			width: calc(100% + 40px);
+			margin: var(--matrix-table-top) -20px 16px;
+			table-layout: fixed;
+			border: none;
+			border-collapse: collapse;
+			position: relative;
+			z-index: 1;
 
-			&.disabled {
-				opacity: 0.2;
+			@include media-down(md) {
+				width: 100%;
+				margin-left: 0;
+				margin-right: 0;
 			}
 
-			@include media-down(md) {
-				width: 18px;
-				height: 18px;
+			svg {
+				font-size: 25px;
+				width: 25px;
+				height: 25px;
+
+				&.disabled {
+					opacity: 0.2;
+				}
+
+				@include media-down(md) {
+					width: 18px;
+					height: 18px;
+				}
 			}
 		}
-	}
 
-	thead tr {
-		height: 152px;
+		thead tr {
+			height: var(--matrix-header-row-h);
 
-		@include media-down(md) {
-			height: 80px;
-		}
+			@include media-down(md) {
+				height: 80px;
+			}
 
-		td {
-			width: 40%;
-		}
+			.feature-col {
+				width: var(--matrix-feature-col-w);
+			}
 
-		th {
-			color: var(--col-color);
-			text-align: center;
-			vertical-align: middle;
-			font-weight: $font-weight-semibold;
-			font-size: 11px;
-			padding: 0 0 40px;
+			th {
+				color: var(--col-color);
+				text-align: center;
+				vertical-align: middle;
+				font-weight: $font-weight-semibold;
+				font-size: 11px;
+				padding: 0 0 40px;
 
-			@include media-up(md) {
-				font-size: 20px;
+				@include media-up(md) {
+					font-size: 20px;
 
-				&.col-highlighted {
-					border-radius: 12px 12px 0 0;
+					&.col-highlighted {
+						border-radius: 12px 12px 0 0;
+					}
 				}
-			}
 
-			@include media-down(md) {
-				color: var(--col-color-mobile);
-				padding: 0 4px 16px;
-				font-size: 10px;
-				line-height: 1.3;
+				@include media-down(md) {
+					color: var(--col-color-mobile);
+					padding: 0 4px 16px;
+					font-size: 10px;
+					line-height: 1.3;
+				}
 			}
 		}
-	}
-
-	tbody tr {
-		background-color: transparent;
-		height: 64px;
 
-		@include media-down(md) {
-			height: auto;
-			min-height: 48px;
-		}
+		tbody tr {
+			background-color: transparent;
+			height: var(--matrix-body-row-h);
 
-		th {
-			font-weight: $font-weight-semibold;
-			font-size: 12px;
-			padding-left: 20px;
-			padding-right: 12px;
-			text-align: left;
-			color: $color-dark;
-			word-wrap: break-word;
+			@include media-down(md) {
+				height: auto;
+				min-height: 48px;
+			}
 
-			a {
+			th {
+				font-weight: $font-weight-semibold;
+				font-size: 12px;
+				padding-left: 20px;
+				padding-right: 12px;
+				text-align: left;
 				color: $color-dark;
-				text-decoration: none;
+				word-wrap: break-word;
+
+				a {
+					color: $color-dark;
+					text-decoration: none;
 
-				&:hover {
-					text-decoration: underline;
+					&:hover {
+						text-decoration: underline;
+					}
+
+					.faq-icon {
+						display: inline-block;
+						width: 16px;
+						height: 16px;
+						font-size: 16px;
+						vertical-align: super;
+						margin-left: 3px;
+						opacity: 0.5;
+					}
 				}
 
-				:global(.faq-icon) {
-					display: inline-block;
-					width: 16px;
-					height: 16px;
-					font-size: 16px;
-					vertical-align: super;
-					margin-left: 3px;
-					opacity: 0.5;
+				@include media-up(md) {
+					font-size: 18px;
+					padding-right: 48px;
 				}
-			}
 
-			@include media-up(md) {
-				font-size: 18px;
-				padding-right: 48px;
+				@include media-down(md) {
+					padding: 8px;
+					font-size: 11px;
+				}
 			}
 
-			@include media-down(md) {
-				padding: 8px;
+			td {
+				color: var(--col-color);
+				text-align: center;
+				font-weight: $font-weight-semibold;
 				font-size: 11px;
-			}
-		}
 
-		td {
-			color: var(--col-color);
-			text-align: center;
-			font-weight: $font-weight-semibold;
-			font-size: 11px;
-
-			@include media-up(md) {
-				font-size: 20px;
-			}
+				@include media-up(md) {
+					font-size: 20px;
+				}
 
-			@include media-down(md) {
-				font-size: 11px;
-				padding: 8px 2px;
+				@include media-down(md) {
+					font-size: 11px;
+					padding: 8px 2px;
+				}
 			}
 		}
 	}
diff --git a/src/components/Landing/ComparisonTable.astro b/src/components/Landing/ComparisonTable.astro
index bfe6f46d72..c7f1be71db 100644
--- a/src/components/Landing/ComparisonTable.astro
+++ b/src/components/Landing/ComparisonTable.astro
@@ -1,5 +1,7 @@
 ---
+import DataTable from '@components/DataTable.astro';
 import SmartImage from '@components/SmartImage.astro';
+import type { DataTableColumn } from '@models/data-table';
 import { externalLinkAttrs } from '@util/external-links';
 
 interface ComparisonRow {
@@ -20,6 +22,9 @@ interface ComparisonGroup {
 
 interface Props {
 	title?: string;
+	/** Appended to each group's caption, visually hidden, so a table lifted out of
+	 *  the page still says what is being compared. */
+	captionContext?: string;
 	groups?: ComparisonGroup[];
 	peColor?: string;
 	centerTitle?: boolean;
@@ -30,6 +35,7 @@ interface Props {
 
 const {
 	title = 'Feature comparison',
+	captionContext = 'ThingsBoard Community Edition compared with Professional Edition',
 	groups: propGroups,
 	peColor = '#038f7e',
 	centerTitle = false,
@@ -111,6 +117,14 @@ const defaultGroups: ComparisonGroup[] = [
 ];
 
 const groups = propGroups ?? defaultGroups;
+
+// Announced column headers. The visible labels are the header card above the
+// tables, so each table's own header row renders at zero height (headerHidden).
+const dtColumns: DataTableColumn[] = [
+	{ label: 'Features', colClass: 'c-feature' },
+	{ label: 'Community Edition', colClass: 'c-ce' },
+	{ label: 'Professional Edition', colClass: 'c-pe' },
+];
 ---
 
 <section
@@ -123,7 +137,9 @@ const groups = propGroups ?? defaultGroups;
 	<div class:list={['comparison-inner', { 'comparison-inner--fixed': fixedMaxWidth }]}>
 		<h2 class="comparison-title">{title}</h2>
 
-		<div class="comparison-header">
+		{/* Visual column labels only — the announced headers live in each table's
+		    hidden thead, so this card must not be read a second time. */}
+		<div class="comparison-header" aria-hidden="true">
 			<div class="col-feature">Features</div>
 			<div class="col-ce">
 				<span class="long">Community Edition</span>
@@ -135,17 +151,30 @@ const groups = propGroups ?? defaultGroups;
 			</div>
 		</div>
 
-		{groups.map((group) => (
-			<div class="comparison-group">
-				<div class="group-header">
-					<span>{group.category}</span>
-				</div>
-				{group.rows.map((row) => {
-					const Tag = row.href ? 'a' : 'div';
-					return (
-						<Tag href={row.href} class="comparison-row" {...externalLinkAttrs(row.href)}>
-							<div class="col-feature">{row.label}</div>
-							<div class="col-ce">
+		{groups.map((group) => {
+			// A group containing any text-link cell gets wider value columns at mobile.
+			// Column widths are table-wide, so this applies to the whole group.
+			const hasCellLink = group.rows.some((row) => row.ceLinkHref || row.peLinkHref);
+			return (
+				<DataTable
+					caption={group.category}
+					captionSr={` — ${captionContext}`}
+					captionVisible={true}
+					captionClass="group-caption"
+					columns={dtColumns}
+					headerHidden={true}
+					class={`comparison-group${hasCellLink ? ' comparison-group--link-cells' : ''}`}
+				>
+					{group.rows.map((row) => (
+						<tr data-row-link={row.href ? 'true' : undefined}>
+							<th scope="row" class="col-feature">
+								{row.href ? (
+									<a href={row.href} {...externalLinkAttrs(row.href)}>{row.label}</a>
+								) : (
+									row.label
+								)}
+							</th>
+							<td class="col-ce">
 								{row.ceText ? (
 									row.ceLinkHref ? (
 										<a href={row.ceLinkHref} target="_blank" rel="noopener noreferrer" class="cell-link">{row.ceText}</a>
@@ -153,17 +182,15 @@ const groups = propGroups ?? defaultGroups;
 										<span>{row.ceText}</span>
 									)
 								) : row.ce ? (
-									<SmartImage
-										src="/src/assets/images/landings/pe/blue-mark.svg"
-										alt="Available in Community Edition"
-										width="20"
-										height="20"
-									/>
+									<>
+										<SmartImage src="/src/assets/images/landings/pe/blue-mark.svg" alt="" width="20" height="20" />
+										<span class="visually-hidden">Yes</span>
+									</>
 								) : (
-									<span class="empty" aria-hidden="true">&nbsp;</span>
+									<span class="visually-hidden">No</span>
 								)}
-							</div>
-							<div class="col-pe">
+							</td>
+							<td class="col-pe">
 								{row.peText ? (
 									row.peLinkHref ? (
 										<a href={row.peLinkHref} target="_blank" rel="noopener noreferrer" class="cell-link pe-link">{row.peText}</a>
@@ -171,27 +198,28 @@ const groups = propGroups ?? defaultGroups;
 										<span>{row.peText}</span>
 									)
 								) : row.pe ? (
-									<SmartImage
-										src="/src/assets/images/landings/pe/green-mark.svg"
-										alt="Available in Professional Edition"
-										width="20"
-										height="20"
-									/>
+									<>
+										<SmartImage src="/src/assets/images/landings/pe/green-mark.svg" alt="" width="20" height="20" />
+										<span class="visually-hidden">Yes</span>
+									</>
 								) : (
-									<span class="empty" aria-hidden="true">&nbsp;</span>
+									<span class="visually-hidden">No</span>
 								)}
-							</div>
-						</Tag>
-					);
-				})}
-			</div>
-		))}
+							</td>
+						</tr>
+					))}
+				</DataTable>
+			);
+		})}
 	</div>
 </section>
 
-<style lang="scss">
+<style lang="scss" is:global>
 	@use '../../styles/variables' as *;
 
+	/* Global, not scoped: the table shell comes from DataTable and Astro hashes
+	   every compound, so scoped rules would stop matching the table, caption and
+	   thead it renders. Every rule nests under .comparison-table so nothing leaks. */
 	.comparison-table {
 		position: relative;
 		width: 100%;
@@ -238,212 +266,243 @@ const groups = propGroups ?? defaultGroups;
 		@media screen and (max-width: 768px) {
 			padding: 3rem 1.25rem;
 		}
-	}
 
-	.comparison-inner {
-		position: relative;
-		z-index: 1;
-		max-width: 1200px;
-		margin: 0 auto;
+		.comparison-inner {
+			position: relative;
+			z-index: 1;
+			max-width: 1200px;
+			margin: 0 auto;
 
-		@media screen and (min-width: 1500px) {
-			max-width: 1400px;
-		}
-
-		&--fixed {
 			@media screen and (min-width: 1500px) {
-				max-width: 1200px;
+				max-width: 1400px;
 			}
-		}
-	}
-
-	.comparison-title {
-		font-size: $font-size-4xl;
-		font-weight: $font-weight-medium;
-		line-height: 1.33;
-		color: #202020;
-		margin: 0 0 2rem;
-		text-align: left;
 
-		[data-center-title] & {
-			text-align: center;
-		}
-
-		@media screen and (max-width: 900px) {
-			font-size: $font-size-3xl;
+			&--fixed {
+				@media screen and (min-width: 1500px) {
+					max-width: 1200px;
+				}
+			}
 		}
-	}
 
-	.comparison-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		background-color: $color-white;
-		border-radius: 4px;
-		height: 84px;
-		margin-bottom: 4px;
-		// Match the body rows' 20px horizontal padding so the flex columns
-		// distribute over the same width. Without this, header columns are
-		// 40px wider than body columns and the header labels sit ~13-18px
-		// to the right of the checkmarks below them.
-		padding: 0 1.25rem;
-
-		.col-feature {
-			flex: 1;
-			font-size: $font-size-2xl;
+		.comparison-title {
+			font-size: $font-size-4xl;
 			font-weight: $font-weight-medium;
-			line-height: 2.25rem;
-			color: $color-text-primary;
+			line-height: 1.33;
+			color: #202020;
+			margin: 0 0 2rem;
+			text-align: left;
 
 			@media screen and (max-width: 900px) {
-				margin-left: 0;
-				text-align: left;
+				font-size: $font-size-3xl;
 			}
 		}
 
-		.col-ce {
-			flex: 1;
+		&[data-center-title] .comparison-title {
 			text-align: center;
-			font-size: $font-size-2xl;
-			font-weight: $font-weight-medium;
-			line-height: 2.25rem;
-			color: #0d417b;
+		}
 
-			@media screen and (max-width: 900px) {
-				flex: 0.3;
+		.comparison-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			background-color: $color-white;
+			border-radius: 4px;
+			height: 84px;
+			margin-bottom: 4px;
+			// Match the body rows' 20px horizontal padding so the flex columns
+			// distribute over the same width. Without this, header columns are
+			// 40px wider than body columns and the header labels sit ~13-18px
+			// to the right of the checkmarks below them.
+			padding: 0 1.25rem;
+
+			.col-feature {
+				flex: 1;
+				font-size: $font-size-2xl;
+				font-weight: $font-weight-medium;
+				line-height: 2.25rem;
+				color: $color-text-primary;
+
+				@media screen and (max-width: 900px) {
+					margin-left: 0;
+					text-align: left;
+				}
 			}
 
-			@media screen and (max-width: 500px) {
-				// Tight CE/PE columns at narrow viewports: smaller flex pushes
-				// them rightward (Features eats the extra space) and brings
-				// the two icon columns closer together. Must match the body
-				// row .col-ce flex so headers sit centered above the
-				// checkmarks below.
-				flex: 0.18;
-			}
-		}
+			.col-ce {
+				flex: 1;
+				text-align: center;
+				font-size: $font-size-2xl;
+				font-weight: $font-weight-medium;
+				line-height: 2.25rem;
+				color: #0d417b;
 
-		.col-pe {
-			flex: 1;
-			text-align: center;
-			font-size: $font-size-2xl;
-			font-weight: $font-weight-medium;
-			line-height: 2.25rem;
-			color: var(--comparison-pe-color, #038f7e);
+				@media screen and (max-width: 900px) {
+					flex: 0.3;
+				}
 
-			@media screen and (max-width: 900px) {
-				flex: 0.3;
+				@media screen and (max-width: 500px) {
+					// Tight CE/PE columns at narrow viewports: smaller flex pushes
+					// them rightward (Features eats the extra space) and brings
+					// the two icon columns closer together. Must match the body
+					// row .col-ce flex so headers sit centered above the
+					// checkmarks below.
+					flex: 0.18;
+				}
 			}
 
-			@media screen and (max-width: 500px) {
-				flex: 0.18;
-			}
-		}
+			.col-pe {
+				flex: 1;
+				text-align: center;
+				font-size: $font-size-2xl;
+				font-weight: $font-weight-medium;
+				line-height: 2.25rem;
+				color: var(--comparison-pe-color, #038f7e);
 
-		.short {
-			display: none;
-		}
+				@media screen and (max-width: 900px) {
+					flex: 0.3;
+				}
 
-		@media screen and (max-width: 900px) {
-			.long {
-				display: none;
+				@media screen and (max-width: 500px) {
+					flex: 0.18;
+				}
 			}
+
 			.short {
-				display: inline;
+				display: none;
+			}
+
+			@media screen and (max-width: 900px) {
+				.long {
+					display: none;
+				}
+				.short {
+					display: inline;
+				}
 			}
 		}
-	}
 
-	.comparison-group {
-		background-color: $color-white;
-		border-radius: 4px;
-		padding: 4px;
-		margin-bottom: 4px;
-	}
+		// The white card is drawn as a 4px border rather than padding: a caption is a
+		// sibling of the table's grid box, so the table's own padding, background and
+		// radius never reach it. Splitting the frame across both boxes — and the radius
+		// with it — reproduces the card exactly; the inner corners compute to 4-4 = 0,
+		// matching the square corners of the header bar today.
+		.comparison-group {
+			width: 100%;
+			table-layout: fixed;
+			border-collapse: separate;
+			border-spacing: 0;
+			margin-bottom: 4px;
+			background-color: $color-white;
+			border: 4px solid $color-white;
+			border-top: 0;
+			border-radius: 0 0 4px 4px;
+
+			// Column widths, measured from the flex layout these tables replaced, not
+			// derived: each column is its flex share of (content − 40px), with the
+			// row's 20px side padding folded into the first and last columns so the
+			// divider spans the full card. A calc() containing a percentage is
+			// silently dropped on <col>, so plain percentages, one set per block.
+			//
+			// Inputs per block — content = card width minus the 2×4px frame:
+			//   base:  content 1192 (card 1200), flex shares 1 / 1 / 1
+			//   ≥1500: content 1392 (card 1400), shares 1 / 1 / 1
+			//   ≤900:  content ≈816.6 (900 viewport − scrollbar − 2×30px page
+			//          padding − frame), shares 1 / 0.3 / 0.3
+			//   ≤500:  content 452 (500 − 2×20px − frame), shares 1 / 0.18 / 0.18
+			//   ≤430:  content 327 (measured at 375), shares 1 / 0.18 / 0.18
+			// value % = share/Σshares × (content−40)/content, ±20px on the outer
+			// columns. The literals carry the browser's own flex rounding — they sit
+			// within 0.002% of the formula — so re-measure rather than recompute if
+			// the paddings, frame or breakpoints ever change.
+			.c-feature { width: 33.8926%; }
+			.c-ce { width: 32.2148%; }
+			.c-pe { width: 33.8926%; }
 
-	.group-header {
-		display: flex;
-		align-items: center;
-		padding: 0.625rem 1.25rem;
-		font-weight: $font-weight-medium;
-		font-size: 1.125rem;
-		line-height: 1.875rem;
-		color: #3b3c3c;
-		background-color: #f5f9f8;
-		border-bottom: none;
-	}
+			@media screen and (min-width: 1500px) {
+				.c-feature { width: 33.8123%; }
+				.c-ce { width: 32.3755%; }
+				.c-pe { width: 33.8123%; }
+			}
 
-	.comparison-row {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 12px 20px;
-		// `min-height` (not `max-height`) so single-line rows keep their
-		// comfortable 50px baseline but multi-line wrapped labels
-		// ("X.509 certificate chain authentication", "MQTT sessions and
-		// subscriptions management" on mobile) can grow to fit instead
-		// of overflowing past their border-bottom into the next row.
-		min-height: 50px;
-		border-bottom: 2px solid #e0e0e0;
-		text-decoration: none;
-		text-decoration-color: #212121;
-		position: relative;
-		transition: background $transition-base;
+			@media screen and (max-width: 900px) {
+				.c-feature { width: 61.8886%; }
+				.c-ce { width: 17.8311%; }
+				.c-pe { width: 20.2803%; }
+			}
 
-		&:last-child {
-			border-bottom: none;
-			min-height: 48px;
+			@media screen and (max-width: 500px) {
+				.c-feature { width: 71.4469%; }
+				.c-ce { width: 12.0642%; }
+				.c-pe { width: 16.4889%; }
+			}
+
+			@media screen and (max-width: 430px) {
+				.c-feature { width: 70.6514%; }
+				.c-ce { width: 11.6177%; }
+				.c-pe { width: 17.7309%; }
+			}
 		}
 
-		// Hover is gated behind `@media (hover: hover) and (min-width: 901px)`:
-		// - the hover query stops touch devices from firing the effect on
-		//   tap-and-drag (no real hover state),
-		// - the width query stops it from firing on mobile width even in
-		//   Chrome dev-tools' responsive mode (where the primary input
-		//   stays "mouse" and the hover query still resolves to true).
-		// On narrow viewports the multi-line wrapped labels are tall
-		// enough that the +1px font-grow + line-height: 28px overflows
-		// the row's 50px max-height and overlaps neighbors.
-		@media (hover: hover) and (min-width: 901px) {
-			&[href]:hover {
-				background-color: #f9f9f9;
-				text-decoration: underline;
-				text-decoration-color: #212121;
+		// Was a flex row; a caption is a block box, so the flex centring is dropped and
+		// the alignment made explicit (a caption is centred by default).
+		.group-caption {
+			padding: 0.625rem 1.25rem;
+			font-weight: $font-weight-medium;
+			font-size: 1.125rem;
+			line-height: 1.875rem;
+			color: #3b3c3c;
+			background-color: #f5f9f8;
+			text-align: left;
+			border: 4px solid $color-white;
+			border-bottom: 0;
+			border-radius: 4px 4px 0 0;
+		}
 
-				&::before {
-					content: '';
-					height: 44px;
-					display: block;
-					border: 1px solid #00695c;
-					position: absolute;
-					left: 0;
-				}
+		// Rows are <tr> now. Padding and the divider live on the cells: a table row
+		// ignores both padding and border in the separated model.
+		.comparison-group tbody tr {
+			transition: background $transition-base;
+		}
 
-				.col-feature {
-					font-size: 15px;
-					line-height: 28px;
-				}
+		.comparison-group tbody th,
+		.comparison-group tbody td {
+			height: 50px;
+			padding: 12px 0;
+			vertical-align: middle;
+			border-bottom: 2px solid #e0e0e0;
+		}
 
-				.col-ce,
-				.col-pe {
-					:global(img) {
-						width: 24px;
-						height: 24px;
-					}
-				}
-			}
+		.comparison-group tbody th { padding-left: 20px; }
+		.comparison-group tbody td:last-child { padding-right: 20px; }
+
+		.comparison-group tbody tr:last-child > * {
+			height: 48px;
+			border-bottom: none;
 		}
 
-		.col-feature {
-			flex: 1;
+		// The row link lives in the row header and is stretched over the label cell, so
+		// the accessible name is the feature label rather than the whole row's text.
+		// The cell, not the row, is the containing block: WebKit does not reliably
+		// honour `position` on a <tr>, and the fallback ancestor would be
+		// .comparison-inner — one row's overlay would then cover every table.
+		.comparison-group tbody th.col-feature {
+			position: relative;
 			font-size: $font-size-sm;
 			font-weight: $font-weight-normal;
 			line-height: 1.5rem;
 			color: #212121;
+			text-align: left;
 			transition: font-size 0.3s;
 
-			@media screen and (max-width: 900px) {
-				padding-right: 0;
+			a {
+				color: inherit;
+				text-decoration: none;
+
+				&::after {
+					content: '';
+					position: absolute;
+					inset: 0;
+				}
 			}
 
 			@media screen and (max-width: 500px) {
@@ -451,51 +510,72 @@ const groups = propGroups ?? defaultGroups;
 			}
 		}
 
-		.col-ce,
-		.col-pe {
-			flex: 1;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			// Allow shrinking + text wrap so cells with free-form text
-			// (e.g. "Coming soon", "Advanced (coming soon)") don't
-			// overflow the column border on narrow viewports.
-			min-width: 0;
+		.comparison-group tbody td.col-ce,
+		.comparison-group tbody td.col-pe {
 			text-align: center;
 			overflow-wrap: break-word;
 
-			:global(img) {
+			// The mark is a block-level <img> (every image on the landing pages is), so
+			// text-align cannot centre it.
+			img {
 				width: 20px;
 				height: 20px;
-				// `.col-ce` is itself a flex container, and the parent row has
-				// `min-width: 0` on this cell so the cell can collapse when a
-				// neighbour row contains an unbreakable token like
-				// "(MQTT/CoAP/HTTP/SNMP/LWM2M)". Without `flex-shrink: 0`,
-				// the img's default flex-shrink: 1 lets it shrink with the cell
-				// and the icon renders smaller in that row only.
-				flex-shrink: 0;
+				margin-inline: auto;
 			}
+		}
 
-			@media screen and (max-width: 900px) {
-				flex: 0.3;
-			}
+		// Hover is gated behind `@media (hover: hover) and (min-width: 901px)`:
+		// - the hover query stops touch devices from firing the effect on
+		//   tap-and-drag (no real hover state),
+		// - the width query stops it from firing on mobile width even in
+		//   Chrome dev-tools' responsive mode (where the primary input
+		//   stays "mouse" and the hover query still resolves to true).
+		@media (hover: hover) and (min-width: 901px) {
+			// The tint deliberately spans the whole row even though only the label
+			// cell navigates: it marks the row being read, and the cursor already
+			// marks where the link is.
+			.comparison-group tbody tr[data-row-link]:hover {
+				background-color: #f9f9f9;
 
-			@media screen and (max-width: 500px) {
-				// Mirror the header CE/PE flex so icon cells stay narrow and
-				// right-aligned at mobile.
-				flex: 0.18;
-
-				// Cells with link text (e.g. "Community", "Advanced + SLA"
-				// in the Support Model row) widen to keep the labels from
-				// overflowing into each other. Icon-only cells stay at 0.18
-				// so checkmarks remain tightly grouped under the headers.
-				&:has(.cell-link) {
-					flex: 0.45;
+				// Font grows but the line box does not: bumping line-height too made the
+				// row taller on hover, so the table shifted under the pointer.
+				th.col-feature {
+					font-size: 15px;
+
+					a {
+						text-decoration: underline;
+						text-decoration-color: #212121;
+					}
+				}
+
+				// Centred rather than offset by a constant, so it stays put on the taller
+				// rows that a wrapped label produces.
+				th.col-feature::before {
+					content: '';
+					height: 44px;
+					display: block;
+					border: 1px solid #00695c;
+					position: absolute;
+					left: 0;
+					top: 50%;
+					transform: translateY(-50%);
+				}
+
+				td.col-ce,
+				td.col-pe {
+					img {
+						width: 24px;
+						height: 24px;
+					}
 				}
 			}
 		}
 
-		.cell-link {
+		.comparison-group .cell-link {
+			// Above any stretched row-link overlay, so both stay clickable on a row
+			// that has an href as well as cell links.
+			position: relative;
+			z-index: 1;
 			font-size: $font-size-sm;
 			color: $color-primary;
 			text-decoration: none;
@@ -508,5 +588,24 @@ const groups = propGroups ?? defaultGroups;
 				color: var(--comparison-pe-color, #{$color-pe});
 			}
 		}
+
+		// Widths are table-wide, so a group with any text-link cell widens every row in
+		// that group — exact for a single-row group, an accepted shift otherwise.
+		// Same inputs as the blocks above, with flex shares 1 / 0.45 / 0.45.
+		@media screen and (max-width: 500px) {
+			.comparison-group--link-cells {
+				.c-feature { width: 52.3987%; }
+				.c-ce { width: 21.5883%; }
+				.c-pe { width: 26.0130%; }
+			}
+		}
+
+		@media screen and (max-width: 430px) {
+			.comparison-group--link-cells {
+				.c-feature { width: 52.3097%; }
+				.c-ce { width: 20.7871%; }
+				.c-pe { width: 26.9033%; }
+			}
+		}
 	}
 </style>
diff --git a/src/components/Landing/EdgeComparisonMatrix.astro b/src/components/Landing/EdgeComparisonMatrix.astro
index 62053081fc..ab857ee005 100644
--- a/src/components/Landing/EdgeComparisonMatrix.astro
+++ b/src/components/Landing/EdgeComparisonMatrix.astro
@@ -1,391 +1,330 @@
 ---
-import { Icon } from 'astro-icon/components';
-
-interface MatrixRow {
-	label: string;
-	labelHref?: string;
-	labelExtra?: { text: string; href: string };
-	gateway: boolean | string;
-	edge: boolean | string;
-	server: boolean | string;
+import DataTable from '@components/DataTable.astro';
+import DataTableValue from '@components/DataTableValue.astro';
+import type { DataTableColumn } from '@models/data-table';
+import { EDGE_VS_GATEWAY_ROWS, type EdgeMatrixRow } from '@data/comparison/edge-vs-gateway';
+
+interface Props {
+	rows?: EdgeMatrixRow[];
 }
 
-const rows: MatrixRow[] = [
-	{ label: 'ThingsBoard Server Required', gateway: true, edge: true, server: 'N/A' },
-	{
-		label: 'Data Collection',
-		labelHref: '/docs/reference/architecture/performance/',
-		gateway: true,
-		edge: true,
-		server: true,
-	},
-	{
-		label: 'Core Protocols Support (MQTT, HTTP, CoAP, etc.)',
-		labelHref: '/docs/apis-and-sdks/',
-		gateway: true,
-		edge: true,
-		server: true,
-	},
-	{
-		label: 'Peripheral Infrastructure Protocols Support (Modbus, BACNet, BLE, etc.)',
-		labelHref: '/docs/iot-gateway/',
-		gateway: true,
-		edge: false,
-		server: false,
-	},
-	{
-		label: 'Data Processing and Analysis',
-		labelHref: '/docs/user-guide/',
-		gateway: false,
-		edge: true,
-		server: true,
-	},
-	{
-		label: 'Real-Time HMI Dashboards',
-		labelHref: '/docs/user-guide/dashboards/',
-		labelExtra: { text: 'SCADA-like HMI Dashboards', href: '/docs/user-guide/scada/' },
-		gateway: false,
-		edge: true,
-		server: true,
-	},
-	{
-		label: 'Alarms & Notifications',
-		labelHref: '/docs/user-guide/alarms/',
-		gateway: false,
-		edge: true,
-		server: true,
-	},
-	{
-		label: 'Asset Management',
-		labelHref: '/docs/user-guide/assets/',
-		gateway: false,
-		edge: true,
-		server: true,
-	},
-	{
-		label: 'Offline Data Computing and Storage (Remote Site Scenarios)',
-		labelHref: '/docs/edge/key-concepts/edge-instance/',
-		gateway: 'Data Collection',
-		edge: true,
-		server: false,
-	},
-	{
-		label: 'Multi-Tenancy Support',
-		labelHref: '/docs/user-guide/multi-tenancy/',
-		gateway: false,
-		edge: false,
-		server: true,
-	},
-	{ label: 'Hardware Resources Usage', gateway: 'Low', edge: 'Medium to Low', server: 'High to Medium' },
+const { rows = EDGE_VS_GATEWAY_ROWS } = Astro.props;
+
+// Widths are emitted inline as well as via the col classes: inline is immune to any
+// later specificity drift, and a fixed table with unreachable col widths silently
+// falls back to equal quarters. Both sides read these constants — the stylesheet
+// through the custom properties set on the section — so the pair cannot drift.
+const FEATURE_COL_PCT = 40; // row-header column
+const VALUE_COL_PCT = 20; // each of the three product columns
+
+const columns: DataTableColumn[] = [
+	{ colClass: 'col-feature', width: `${FEATURE_COL_PCT}%`, thClass: 'feature' },
+	{ label: 'IoT\nGateway', colClass: 'col-gateway', width: `${VALUE_COL_PCT}%`, thClass: 'gateway' },
+	{ label: 'ThingsBoard\nEdge', colClass: 'col-edge', width: `${VALUE_COL_PCT}%`, thClass: 'edge' },
+	{ label: 'ThingsBoard\nServer', colClass: 'col-server', width: `${VALUE_COL_PCT}%`, thClass: 'server' },
 ];
 ---
 
-<section id="matrix">
+<section
+	id="matrix"
+	class="edge-matrix"
+	style={{
+		'--edge-feature-col-w': `${FEATURE_COL_PCT}%`,
+		'--edge-value-col-w': `${VALUE_COL_PCT}%`,
+	}}
+>
 	<div class="main-content">
 		<h2>Which ThingsBoard Product Is Right for You?</h2>
 
-		<table>
-			<colgroup>
-				<col class="col-feature" />
-				<col class="col-gateway" />
-				<col class="col-edge" />
-				<col class="col-server" />
-			</colgroup>
-			<thead>
-				<tr>
-					<td></td>
-					<th class="gateway" scope="col">IoT<br />Gateway</th>
-					<th class="edge" scope="col">ThingsBoard<br />Edge</th>
-					<th class="server" scope="col">ThingsBoard<br />Server</th>
-				</tr>
-			</thead>
-			<tbody>
-				{
-					rows.map((row) => (
-						<tr>
-							<th scope="row">
-								{row.labelHref ? (
-									<>
-										<a href={row.labelHref}>{row.label}</a>
-										{row.labelExtra && (
-											<>
-												{' '}and{' '}
-												<a href={row.labelExtra.href}>{row.labelExtra.text}</a>
-											</>
-										)}
-									</>
-								) : (
-									row.label
-								)}
-							</th>
-							{(['gateway', 'edge', 'server'] as const).map((col) => {
-								const val = row[col];
-								return (
-									<td>
-										{val === true && <Icon name="tabler:check" aria-label="Available" />}
-										{val === false && (
-											<Icon name="tabler:x" class="disabled" aria-label="Not available" />
-										)}
-										{typeof val === 'string' && val}
-									</td>
-								);
-							})}
-						</tr>
-					))
-				}
-			</tbody>
-		</table>
+		{/* Caption hidden: the <h2> above already shows this text. */}
+		<DataTable caption="Which ThingsBoard Product Is Right for You?" columns={columns}>
+			{
+				rows.map((row) => (
+					<tr>
+						<th scope="row">
+							{row.labelHref ? (
+								<>
+									<a href={row.labelHref}>{row.label}</a>
+									{row.labelExtra && (
+										<>
+											{' '}and{' '}
+											<a href={row.labelExtra.href}>{row.labelExtra.text}</a>
+										</>
+									)}
+								</>
+							) : (
+								row.label
+							)}
+						</th>
+						{(['gateway', 'edge', 'server'] as const).map((col) => (
+							<td>
+								<DataTableValue
+									value={row[col]}
+									noIcon="tabler:x"
+									noClass="disabled"
+								/>
+							</td>
+						))}
+					</tr>
+				))
+			}
+		</DataTable>
 	</div>
 </section>
 
-<style lang="scss">
+<style lang="scss" is:global>
 	@use '../../styles/variables' as *;
 
-	#matrix {
+	/* Global, not scoped: the table shell comes from DataTable and Astro hashes
+	   every compound, so scoped rules would stop matching. Everything nests under
+	   .edge-matrix so the bare h2/table/thead/tbody selectors cannot leak. */
+	.edge-matrix {
 		max-width: 1400px;
 		margin: 0 auto;
 		padding: 60px 20px 88px;
-	}
-
-	.main-content {
-		position: relative;
-	}
-
-	h2 {
-		text-align: center;
-		margin-bottom: 48px;
-		font-size: 42px;
-		font-weight: 600;
-		color: #212529;
-	}
-
-	table {
-		width: 100%;
-		border-collapse: separate;
-		border-spacing: 16px 0;
-		table-layout: fixed;
-		border: none;
 
-		.col-feature {
-			width: 40%;
+		.main-content {
+			position: relative;
 		}
 
-		.col-gateway,
-		.col-edge,
-		.col-server {
-			width: 20%;
-		}
-	}
-
-	thead {
-		background: white;
-
-		td {
-			border: none;
-			background: transparent;
-		}
-
-		th {
-			padding: 20px 12px;
+		h2 {
 			text-align: center;
-			vertical-align: middle;
+			margin-bottom: 48px;
+			font-size: 42px;
 			font-weight: 600;
-			font-size: 18px;
-			line-height: 1.3;
-			color: white;
-			border: none;
+			color: #212529;
+		}
 
-			&.gateway {
-				background: #7a4dc3;
-				border-radius: 12px 12px 0 0;
-				box-shadow: 0 -2px 8px rgba(122, 77, 195, 0.15);
-			}
+		table {
+			width: 100%;
+			border-collapse: separate;
+			border-spacing: 16px 0;
+			table-layout: fixed;
+			border: none;
 
-			&.edge {
-				background: #009688;
-				border-radius: 12px 12px 0 0;
-				box-shadow: 0 -2px 8px rgba(0, 150, 136, 0.15);
+			.col-feature {
+				width: var(--edge-feature-col-w);
 			}
 
-			&.server {
-				background: #2a7dec;
-				border-radius: 12px 12px 0 0;
-				box-shadow: 0 -2px 8px rgba(42, 125, 236, 0.15);
+			.col-gateway,
+			.col-edge,
+			.col-server {
+				width: var(--edge-value-col-w);
 			}
 		}
-	}
 
-	tbody {
-		th {
-			font-weight: 600;
-			font-size: 16px;
-			line-height: 1.4;
-			padding: 16px 12px 16px 0;
-			color: #212529;
-			text-align: left;
-			border: none;
+		thead {
 			background: white;
 
-			a {
-				color: #212529;
+			th {
+				padding: 20px 12px;
+				text-align: center;
+				vertical-align: middle;
 				font-weight: 600;
-				font-size: 16px;
-				text-decoration: none;
+				font-size: 18px;
+				line-height: 1.3;
+				color: white;
+				border: none;
+
+				&.gateway {
+					background: #7a4dc3;
+					border-radius: 12px 12px 0 0;
+					box-shadow: 0 -2px 8px rgba(122, 77, 195, 0.15);
+				}
 
-				&:hover {
-					color: #009688;
-					text-decoration: underline;
+				&.edge {
+					background: #009688;
+					border-radius: 12px 12px 0 0;
+					box-shadow: 0 -2px 8px rgba(0, 150, 136, 0.15);
+				}
+
+				&.server {
+					background: #2a7dec;
+					border-radius: 12px 12px 0 0;
+					box-shadow: 0 -2px 8px rgba(42, 125, 236, 0.15);
 				}
 			}
-		}
 
-		td {
-			text-align: center;
-			vertical-align: middle;
-			font-weight: 600;
-			font-size: 15px;
-			padding: 16px 8px;
-			background: white;
-			border: none;
+			// The label column has no header of its own; it stays blank, as the
+			// empty <td> here used to.
+			.feature {
+				padding: 0;
+				background: transparent;
+			}
+		}
 
-			:global(svg) {
-				width: 20px;
-				height: 20px;
+		tbody {
+			th {
+				font-weight: 600;
+				font-size: 16px;
+				line-height: 1.4;
+				padding: 16px 12px 16px 0;
+				color: #212529;
+				text-align: left;
+				border: none;
+				background: white;
 
-				&.disabled {
-					opacity: 0.3;
+				a {
+					color: #212529;
+					font-weight: 600;
+					font-size: 16px;
+					text-decoration: none;
+
+					&:hover {
+						color: #009688;
+						text-decoration: underline;
+					}
 				}
 			}
 
-			&:nth-child(2) {
-				color: #7a4dc3;
-				border-left: 2px solid #7a4dc3;
-				border-right: 2px solid #7a4dc3;
+			td {
+				text-align: center;
+				vertical-align: middle;
+				font-weight: 600;
+				font-size: 15px;
+				padding: 16px 8px;
+				background: white;
+				border: none;
+
+				svg {
+					width: 20px;
+					height: 20px;
+
+					&.disabled {
+						opacity: 0.3;
+					}
+				}
 
-				:global(svg) {
+				&:nth-child(2) {
 					color: #7a4dc3;
-				}
-			}
+					border-left: 2px solid #7a4dc3;
+					border-right: 2px solid #7a4dc3;
 
-			&:nth-child(3) {
-				color: #009688;
-				border-left: 2px solid #009688;
-				border-right: 2px solid #009688;
+					svg {
+						color: #7a4dc3;
+					}
+				}
 
-				:global(svg) {
+				&:nth-child(3) {
 					color: #009688;
-				}
-			}
+					border-left: 2px solid #009688;
+					border-right: 2px solid #009688;
 
-			&:nth-child(4) {
-				color: #2a7dec;
-				border-left: 2px solid #2a7dec;
-				border-right: 2px solid #2a7dec;
+					svg {
+						color: #009688;
+					}
+				}
 
-				:global(svg) {
+				&:nth-child(4) {
 					color: #2a7dec;
+					border-left: 2px solid #2a7dec;
+					border-right: 2px solid #2a7dec;
+
+					svg {
+						color: #2a7dec;
+					}
 				}
 			}
-		}
 
-		tr:last-child td {
-			&:nth-child(2) {
-				border-bottom: 3px solid #7a4dc3;
-				border-radius: 0 0 12px 12px;
-			}
+			tr:last-child td {
+				&:nth-child(2) {
+					border-bottom: 3px solid #7a4dc3;
+					border-radius: 0 0 12px 12px;
+				}
 
-			&:nth-child(3) {
-				border-bottom: 3px solid #009688;
-				border-radius: 0 0 12px 12px;
-			}
+				&:nth-child(3) {
+					border-bottom: 3px solid #009688;
+					border-radius: 0 0 12px 12px;
+				}
 
-			&:nth-child(4) {
-				border-bottom: 3px solid #2a7dec;
-				border-radius: 0 0 12px 12px;
+				&:nth-child(4) {
+					border-bottom: 3px solid #2a7dec;
+					border-radius: 0 0 12px 12px;
+				}
 			}
 		}
-	}
-
-	@media screen and (max-width: 1000px) {
-		#matrix {
-			padding: 40px 12px 60px;
-		}
 
-		h2 {
-			font-size: 26px;
-			line-height: 38px;
-			margin-bottom: 24px;
-		}
+		@media screen and (max-width: 1000px) {
+			& {
+				padding: 40px 12px 60px;
+			}
 
-		table {
-			border-spacing: 10px 0;
-		}
+			h2 {
+				font-size: 26px;
+				line-height: 38px;
+				margin-bottom: 24px;
+			}
 
-		thead th {
-			padding: 12px 4px;
-			font-size: 13px;
-		}
+			table {
+				border-spacing: 10px 0;
+			}
 
-		tbody {
-			th {
+			thead th {
+				padding: 12px 4px;
 				font-size: 13px;
-				padding: 10px 6px 10px 0;
+			}
 
-				a {
+			tbody {
+				th {
 					font-size: 13px;
+					padding: 10px 6px 10px 0;
+
+					a {
+						font-size: 13px;
+					}
 				}
-			}
 
-			td {
-				font-size: 12px;
-				padding: 10px 4px;
+				td {
+					font-size: 12px;
+					padding: 10px 4px;
 
-				:global(svg) {
-					width: 16px;
-					height: 16px;
+					svg {
+						width: 16px;
+						height: 16px;
+					}
 				}
 			}
 		}
-	}
-
-	@media screen and (max-width: 576px) {
-		#matrix {
-			padding: 20px 6px 40px;
-		}
 
-		h2 {
-			font-size: 20px;
-			line-height: 28px;
-			margin-bottom: 16px;
-		}
+		@media screen and (max-width: 576px) {
+			& {
+				padding: 20px 6px 40px;
+			}
 
-		table {
-			border-spacing: 6px 0;
-		}
+			h2 {
+				font-size: 20px;
+				line-height: 28px;
+				margin-bottom: 16px;
+			}
 
-		thead th {
-			padding: 8px 2px;
-			font-size: 10px;
-			line-height: 1.3;
-		}
+			table {
+				border-spacing: 6px 0;
+			}
 
-		tbody {
-			th {
+			thead th {
+				padding: 8px 2px;
 				font-size: 10px;
-				padding: 8px 4px 8px 0;
+				line-height: 1.3;
+			}
 
-				a {
+			tbody {
+				th {
 					font-size: 10px;
+					padding: 8px 4px 8px 0;
+
+					a {
+						font-size: 10px;
+					}
 				}
-			}
 
-			td {
-				font-size: 10px;
-				padding: 8px 2px;
+				td {
+					font-size: 10px;
+					padding: 8px 2px;
 
-				:global(svg) {
-					width: 14px;
-					height: 14px;
+					svg {
+						width: 14px;
+						height: 14px;
+					}
 				}
 			}
 		}
diff --git a/src/components/Landing/PaasComparisonMatrix.astro b/src/components/Landing/PaasComparisonMatrix.astro
index aa7377fe2a..64d2e1d10e 100644
--- a/src/components/Landing/PaasComparisonMatrix.astro
+++ b/src/components/Landing/PaasComparisonMatrix.astro
@@ -62,4 +62,9 @@ const rows = [
 ];
 ---
 
-<ComparisonMatrix title="Feature Comparison Matrix" columns={columns} rows={rows} />
+<ComparisonMatrix
+	title="Feature Comparison Matrix"
+	caption="ThingsBoard Community Edition, Professional Edition and Cloud: feature comparison"
+	columns={columns}
+	rows={rows}
+/>
diff --git a/src/components/Pagination/PerPageSelector.astro b/src/components/Pagination/PerPageSelector.astro
index 675826f75c..7c33a75e29 100644
--- a/src/components/Pagination/PerPageSelector.astro
+++ b/src/components/Pagination/PerPageSelector.astro
@@ -1,6 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import Chevron from '@components/Chevron.astro';
+import { slugId } from '@util/slug-id';
 import { PAGINATION_STRINGS } from './pagination-shared';
 
 interface Props {
@@ -14,11 +15,7 @@ const { perPage, idBase } = Astro.props;
 
 const perPageOptions = [perPage, perPage * 2, perPage * 3];
 // Deterministic instance-unique label id (reproducible SSR output).
-const slug = idBase
-	.toLowerCase()
-	.replace(/[^a-z0-9]+/g, '-')
-	.replace(/^-+|-+$/g, '');
-const labelId = `tb-pagination-pp-${slug || 'nav'}`;
+const labelId = slugId(idBase, 'tb-pagination-pp');
 ---
 
 <div class="tb-pagination__per-page" data-per-page-root data-per-page={perPage}>
diff --git a/src/components/Pricing/ComparisonTable.astro b/src/components/Pricing/ComparisonTable.astro
index d28c065071..1daa21dab3 100644
--- a/src/components/Pricing/ComparisonTable.astro
+++ b/src/components/Pricing/ComparisonTable.astro
@@ -1,10 +1,15 @@
 ---
 import { Icon } from 'astro-icon/components';
+import DataTable from '@components/DataTable.astro';
+import DataTableValue from '@components/DataTableValue.astro';
+import type { DataTableColumn } from '@models/data-table';
 import type { ComparisonRow } from '@data/pricing/types.ts';
 
 interface Props {
 	title?: string;
 	subtitle?: string;
+	/** Table's accessible name. Defaults to `title`, which rarely names the product. */
+	caption?: string;
 	headers: string[];
 	rows: ComparisonRow[];
 }
@@ -12,114 +17,117 @@ interface Props {
 const {
 	title = 'Additional features',
 	subtitle = 'Extra details and upgrade options for all subscription plans.',
+	caption,
 	headers,
 	rows,
 } = Astro.props;
+
+// Widths are emitted inline on <col>, which `table-layout: fixed` honours in every
+// browser; the per-class width rules below are a redundant fallback. Both sides read
+// these constants — the stylesheet through the custom properties set on the section —
+// so the pair cannot drift.
+const FEATURE_COL_PCT = 30; // row-header column
+const PLAN_COL_PCT = 17.5; // each plan column
+
+const columns: DataTableColumn[] = [
+	{ width: `${FEATURE_COL_PCT}%`, thClass: 'pc-comparison-feature-col' },
+	...headers.map((h) => ({ label: h, width: `${PLAN_COL_PCT}%`, thClass: 'pc-comparison-plan-col' })),
+];
 ---
 
-<div class="comparison-section">
-	<h3 class="comparison-title">{title}</h3>
-	{subtitle && <p class="comparison-subtitle">{subtitle}</p>}
-
-	<div class="comparison-table-wrap">
-		<table class="comparison-table">
-			{/* Authoritative column widths for `table-layout: fixed`.
-				 Setting widths via <col> is honored by every browser and
-				 survives any specificity drift on the per-class width rules
-				 below — those become a redundant fallback. */}
-			<colgroup>
-				<col style="width: 30%" />
-				{headers.map(() => (
-					<col style="width: 17.5%" />
-				))}
-			</colgroup>
-			<thead>
-				<tr>
-					<th class="comparison-feature-col"></th>
-					{headers.map((h) => (
-						<th class="comparison-plan-col">{h}</th>
-					))}
-				</tr>
-			</thead>
-			<tbody>
-				{rows.map((row) => {
-					// For rows with an (i) tooltip, bond the icon to the last
-					// word of the label via a nowrap span so the icon never
-					// orphans onto its own line at narrow viewports. Rows
-					// without a tooltip render the label as-is so long ones
-					// like "Dedicated customer success engineer" wrap freely.
-					const hasTip = !!(row.faqId || row.faqTooltip);
-					const lastSpace = hasTip ? row.feature.lastIndexOf(' ') : -1;
-					const head = lastSpace !== -1 ? row.feature.slice(0, lastSpace + 1) : '';
-					const tail = lastSpace !== -1 ? row.feature.slice(lastSpace + 1) : row.feature;
-					return (
-					<tr>
-						<td class="comparison-feature-name">
-							{hasTip ? (
-								<>
-									{head}<span class="comparison-feature-tail">{tail}<span class="comparison-tooltip-trigger" data-faq-id={row.faqId}>
-										<Icon name="tabler:info-circle" class="comparison-tooltip-icon" />
-										{row.faqTooltip && (
-											<span class="comparison-tooltip">
-												<span class="comparison-tooltip-arrow"></span>
-												<span class="comparison-tooltip-body">
-													<span set:html={row.faqTooltip} />
-													{row.autoTooltip && row.faqId && <span class="comparison-tooltip-readmore"> read more</span>}
-												</span>
-											</span>
-										)}
-									</span></span>
-								</>
-							) : (
-								row.feature
-							)}
-						</td>
-						{row.values.map((val) => (
-							<td class="comparison-cell">
-								{val === true ? (
-									<Icon name="tabler:check" class="comparison-check" />
-								) : val === false ? (
-									<span></span>
-								) : val.toLowerCase() === 'contact us' ? (
-									<a href="/contact-us/" class="comparison-link">Contact us</a>
-								) : (
-									<span class="comparison-text">{val}</span>
+<div
+	class="pc-comparison-section"
+	style={{
+		'--pc-feature-col-w': `${FEATURE_COL_PCT}%`,
+		'--pc-plan-col-w': `${PLAN_COL_PCT}%`,
+	}}
+>
+	<h3 class="pc-comparison-title">{title}</h3>
+	{subtitle && <p class="pc-comparison-subtitle">{subtitle}</p>}
+
+	{/* Caption hidden: the <h3> above already shows this text. */}
+	<DataTable
+		caption={caption ?? title}
+		columns={columns}
+		class="pc-comparison-table"
+		scrollable={true}
+		scrollClass="pc-comparison-table-wrap"
+	>
+		{rows.map((row) => {
+			// For rows with an (i) tooltip, bond the icon to the last
+			// word of the label via a nowrap span so the icon never
+			// orphans onto its own line at narrow viewports. Rows
+			// without a tooltip render the label as-is so long ones
+			// like "Dedicated customer success engineer" wrap freely.
+			const hasTip = !!(row.faqId || row.faqTooltip);
+			const lastSpace = hasTip ? row.feature.lastIndexOf(' ') : -1;
+			const head = lastSpace !== -1 ? row.feature.slice(0, lastSpace + 1) : '';
+			const tail = lastSpace !== -1 ? row.feature.slice(lastSpace + 1) : row.feature;
+			return (
+			<tr>
+				<th scope="row" class="pc-comparison-feature-name">
+					{hasTip ? (
+						<>
+							{head}<span class="pc-comparison-feature-tail">{tail}<span class="pc-comparison-tooltip-trigger" data-faq-id={row.faqId}>
+								<Icon name="tabler:info-circle" class="pc-comparison-tooltip-icon" aria-hidden="true" />
+								{row.faqTooltip && (
+									<span class="pc-comparison-tooltip">
+										<span class="pc-comparison-tooltip-arrow"></span>
+										<span class="pc-comparison-tooltip-body">
+											<span set:html={row.faqTooltip} />
+											{row.autoTooltip && row.faqId && <span class="pc-comparison-tooltip-readmore"> read more</span>}
+										</span>
+									</span>
 								)}
-							</td>
-						))}
-					</tr>
-					);
-				})}
-			</tbody>
-		</table>
-	</div>
+							</span></span>
+						</>
+					) : (
+						row.feature
+					)}
+				</th>
+				{row.values.map((val) => (
+					<td class="pc-comparison-cell">
+						{typeof val === 'boolean' ? (
+							// `false` stays visually blank by design; the value is text-only.
+							<DataTableValue value={val} yesClass="pc-comparison-check" />
+						) : val.toLowerCase() === 'contact us' ? (
+							<a href="/contact-us/" class="pc-comparison-link">Contact us</a>
+						) : (
+							<span class="pc-comparison-text">{val}</span>
+						)}
+					</td>
+				))}
+			</tr>
+			);
+		})}
+	</DataTable>
 </div>
 
 <style lang="scss" is:global>
 	@use '../../styles/variables' as *;
 
-	.comparison-section {
+	.pc-comparison-section {
 		margin-bottom: $spacing-16;
 	}
 
-	.comparison-title {
+	.pc-comparison-title {
 		@include subsection-title;
 		color: var(--color-text);
 		margin: 0 0 $spacing-2;
 	}
 
-	.comparison-subtitle {
+	.pc-comparison-subtitle {
 		@include text-m;
 		color: var(--color-text-secondary);
 		margin: 0 0 $spacing-6;
 	}
 
-	.comparison-table-wrap {
+	.pc-comparison-table-wrap {
 		overflow-x: auto;
 		-webkit-overflow-scrolling: touch;
 	}
 
-	.comparison-table {
+	.pc-comparison-table {
 		width: 100%;
 		border-collapse: collapse;
 		table-layout: fixed;
@@ -130,7 +138,7 @@ const {
 		}
 	}
 
-	.comparison-table thead th {
+	.pc-comparison-table thead th {
 		padding: $spacing-4 $spacing-3;
 		font-size: $font-size-lg;
 		font-weight: $font-weight-bold;
@@ -144,24 +152,26 @@ const {
 		}
 	}
 
-	.comparison-feature-col {
+	.pc-comparison-feature-col {
 		text-align: left !important;
-		width: 30%;
+		width: var(--pc-feature-col-w);
 	}
 
-	.comparison-plan-col {
-		width: 17.5%;
+	.pc-comparison-plan-col {
+		width: var(--pc-plan-col-w);
 	}
 
-	.comparison-table tbody tr {
+	.pc-comparison-table tbody tr {
 		border-bottom: 1px solid var(--sl-color-gray-5);
 	}
 
-	.comparison-feature-name {
+	.pc-comparison-feature-name {
 		padding: $spacing-3 $spacing-3 $spacing-3 0;
 		font-size: $font-size-sm;
 		font-weight: $font-weight-medium;
 		color: var(--color-text);
+		// <th> would otherwise centre this column.
+		text-align: left;
 		white-space: nowrap;
 
 		@include media-down(md) {
@@ -173,11 +183,11 @@ const {
 	// Bonds the last word of the feature label to the (i) tooltip icon so
 	// they wrap together — otherwise the icon orphans onto its own line when
 	// the label wraps to two lines on narrow viewports.
-	.comparison-feature-tail {
+	.pc-comparison-feature-tail {
 		white-space: nowrap;
 	}
 
-	.comparison-cell {
+	.pc-comparison-cell {
 		padding: $spacing-3;
 		text-align: center;
 		vertical-align: middle;
@@ -187,19 +197,19 @@ const {
 		}
 	}
 
-	.comparison-check {
+	.pc-comparison-check {
 		width: 16px;
 		height: 16px;
 		color: var(--color-primary);
 	}
 
-	.comparison-text {
+	.pc-comparison-text {
 		font-size: $font-size-sm;
 		font-weight: $font-weight-medium;
 		color: var(--color-text);
 	}
 
-	.comparison-link {
+	.pc-comparison-link {
 		font-size: $font-size-sm;
 		font-weight: $font-weight-medium;
 		color: var(--color-primary);
@@ -211,14 +221,14 @@ const {
 	}
 
 	// ─── Tooltip trigger + popup (same pattern as plan feature tooltips) ───
-	.comparison-tooltip-trigger {
+	.pc-comparison-tooltip-trigger {
 		position: relative;
 		display: inline;
 		cursor: pointer;
 		margin-left: 0;
 	}
 
-	.comparison-tooltip-icon {
+	.pc-comparison-tooltip-icon {
 		width: 14px;
 		height: 14px;
 		color: var(--color-text);
@@ -229,12 +239,12 @@ const {
 		transition: color 0.2s ease, opacity 0.2s ease;
 	}
 
-	.comparison-tooltip-trigger:hover .comparison-tooltip-icon {
+	.pc-comparison-tooltip-trigger:hover .pc-comparison-tooltip-icon {
 		color: var(--color-primary);
 		opacity: 1;
 	}
 
-	.comparison-tooltip {
+	.pc-comparison-tooltip {
 		position: fixed;
 		z-index: 99999;
 		pointer-events: none;
@@ -258,14 +268,14 @@ const {
 		}
 	}
 
-	.comparison-tooltip.pricing-tooltip--visible {
+	.pc-comparison-tooltip.pricing-tooltip--visible {
 		opacity: 1;
 		visibility: visible;
 		pointer-events: none;
 		&.pricing-tooltip--interactive { pointer-events: auto; }
 	}
 
-	.comparison-tooltip-arrow {
+	.pc-comparison-tooltip-arrow {
 		flex-shrink: 0;
 		width: 0;
 		height: 0;
@@ -285,7 +295,7 @@ const {
 		}
 	}
 
-	.comparison-tooltip-readmore {
+	.pc-comparison-tooltip-readmore {
 		color: var(--color-primary);
 		cursor: pointer;
 
@@ -294,7 +304,7 @@ const {
 		}
 	}
 
-	.comparison-tooltip-body {
+	.pc-comparison-tooltip-body {
 		display: block;
 		padding: $spacing-3;
 		background: var(--color-bg-surface);
diff --git a/src/components/Pricing/PlanFeatureItem.astro b/src/components/Pricing/PlanFeatureItem.astro
index f04dec78b3..16997a0b87 100644
--- a/src/components/Pricing/PlanFeatureItem.astro
+++ b/src/components/Pricing/PlanFeatureItem.astro
@@ -166,7 +166,7 @@ const classes = [
 
 		.plan-feature-tooltip-arrow,
 		.addon-tooltip-arrow,
-		.comparison-tooltip-arrow,
+		.pc-comparison-tooltip-arrow,
 		.sub-tab-tooltip-arrow {
 			border-right-color: transparent;
 			border-left-color: var(--sl-color-gray-5);
diff --git a/src/components/UseCase/ComparisonTable.astro b/src/components/UseCase/ComparisonTable.astro
index 3de884e515..d67b015dfd 100644
--- a/src/components/UseCase/ComparisonTable.astro
+++ b/src/components/UseCase/ComparisonTable.astro
@@ -14,18 +14,22 @@ const { title, rows } = Astro.props;
 
 	{/* Desktop table */}
 	<table class="uc-comparison__table">
+		{/* Hidden: the <h2> above already shows this text. */}
+		<caption class="uc-comparison__caption">{title}: high-performance compared with traditional</caption>
 		<thead>
 			<tr>
-				<th class="uc-comparison__th-criteria"></th>
-				<th>High-performance</th>
-				<th>Traditional</th>
+				<th scope="col" class="uc-comparison__th-criteria">
+					<span class="visually-hidden">Criteria</span>
+				</th>
+				<th scope="col">High-performance</th>
+				<th scope="col">Traditional</th>
 			</tr>
 		</thead>
 		<tbody>
 			{
 				rows.map((row, i) => (
 					<tr class={i % 2 === 0 ? 'uc-comparison__row--alt' : ''}>
-						<td class="uc-comparison__td-criteria">{row.criteria}</td>
+						<th scope="row" class="uc-comparison__row-criteria">{row.criteria}</th>
 						<td>{row.highPerformance}</td>
 						<td>{row.traditional}</td>
 					</tr>
@@ -65,6 +69,14 @@ const { title, rows } = Astro.props;
 		}
 	}
 
+	.visually-hidden {
+		@include visually-hidden;
+	}
+
+	.uc-comparison__caption {
+		@include caption-hidden;
+	}
+
 	// ── Desktop table ──
 	.uc-comparison__table {
 		width: 100%;
@@ -83,7 +95,9 @@ const { title, rows } = Astro.props;
 			background: $color-text-primary;
 		}
 
-		th {
+		// Scoped to thead: the white text belongs to the dark header row only, and
+		// the row headers in tbody are <th> too.
+		thead th {
 			@include text-table-header;
 			padding: 16px 24px;
 			text-align: left;
@@ -99,9 +113,12 @@ const { title, rows } = Astro.props;
 			width: 35%;
 		}
 
-		td {
+		td,
+		tbody th {
 			@include text-table-cell;
 			padding: 16px 24px;
+			// <th> would otherwise centre; every cell in this table is left-aligned.
+			text-align: left;
 			color: var(--color-text-secondary);
 			border-left: 1px solid var(--color-border-light);
 			border-top: 1px solid var(--color-border-light);
@@ -111,7 +128,7 @@ const { title, rows } = Astro.props;
 			}
 		}
 
-		.uc-comparison__td-criteria {
+		.uc-comparison__row-criteria {
 			font-weight: $font-weight-semibold;
 			color: var(--color-text);
 		}
diff --git a/src/data/comparison/edge-vs-gateway.ts b/src/data/comparison/edge-vs-gateway.ts
new file mode 100644
index 0000000000..d190105aad
--- /dev/null
+++ b/src/data/comparison/edge-vs-gateway.ts
@@ -0,0 +1,84 @@
+/** One feature row of the IoT Gateway / Edge / Server comparison. */
+export interface EdgeMatrixRow {
+	label: string;
+	labelHref?: string;
+	/** Second link appended to the label with "and". */
+	labelExtra?: { text: string; href: string };
+	gateway: boolean | string;
+	edge: boolean | string;
+	server: boolean | string;
+}
+
+export const EDGE_VS_GATEWAY_ROWS: EdgeMatrixRow[] = [
+	{ label: 'ThingsBoard Server Required', gateway: true, edge: true, server: 'N/A' },
+	{
+		label: 'Data Collection',
+		labelHref: '/docs/reference/architecture/performance/',
+		gateway: true,
+		edge: true,
+		server: true,
+	},
+	{
+		label: 'Core Protocols Support (MQTT, HTTP, CoAP, etc.)',
+		labelHref: '/docs/apis-and-sdks/',
+		gateway: true,
+		edge: true,
+		server: true,
+	},
+	{
+		label: 'Peripheral Infrastructure Protocols Support (Modbus, BACNet, BLE, etc.)',
+		labelHref: '/docs/iot-gateway/',
+		gateway: true,
+		edge: false,
+		server: false,
+	},
+	{
+		label: 'Data Processing and Analysis',
+		labelHref: '/docs/user-guide/',
+		gateway: false,
+		edge: true,
+		server: true,
+	},
+	{
+		label: 'Real-Time HMI Dashboards',
+		labelHref: '/docs/user-guide/dashboards/',
+		labelExtra: { text: 'SCADA-like HMI Dashboards', href: '/docs/user-guide/scada/' },
+		gateway: false,
+		edge: true,
+		server: true,
+	},
+	{
+		label: 'Alarms & Notifications',
+		labelHref: '/docs/user-guide/alarms/',
+		gateway: false,
+		edge: true,
+		server: true,
+	},
+	{
+		label: 'Asset Management',
+		labelHref: '/docs/user-guide/assets/',
+		gateway: false,
+		edge: true,
+		server: true,
+	},
+	{
+		label: 'Offline Data Computing and Storage (Remote Site Scenarios)',
+		labelHref: '/docs/edge/key-concepts/edge-instance/',
+		gateway: 'Data Collection',
+		edge: true,
+		server: false,
+	},
+	{
+		label: 'Multi-Tenancy Support',
+		labelHref: '/docs/user-guide/multi-tenancy/',
+		gateway: false,
+		edge: false,
+		server: true,
+	},
+	{
+		label: 'Hardware Resources Usage',
+		gateway: 'Low',
+		edge: 'Medium to Low',
+		server: 'High to Medium',
+	},
+];
diff --git a/src/layouts/CaseStudyLayout.astro b/src/layouts/CaseStudyLayout.astro
index d7c07f68a8..4faf9b7ebc 100644
--- a/src/layouts/CaseStudyLayout.astro
+++ b/src/layouts/CaseStudyLayout.astro
@@ -39,14 +39,14 @@ const ogImage = ogImageProp ?? getOgImageUrl(Astro.url.pathname);
 	preloadLcpImage={preloadLcpImage}
 	jsonLd={jsonLd}
 >
-	<main class="case-study-page" data-slug={pageSlug}>
+	<div class="case-study-page" data-slug={pageSlug}>
 		<div class="case-study-breadcrumb">
 			<Breadcrumbs
 				items={[{ label: 'Case Studies', href: '/case-studies/' }, { label: breadcrumb }]}
 			/>
 		</div>
 		<slot />
-	</main>
+	</div>
 </BaseLayout>
 
 <script>
diff --git a/src/layouts/LegalLayout.astro b/src/layouts/LegalLayout.astro
index 2dcfe2a127..3aa62d3df5 100644
--- a/src/layouts/LegalLayout.astro
+++ b/src/layouts/LegalLayout.astro
@@ -33,9 +33,11 @@ const ogImage = ogImageProp ?? getOgImageUrl(Astro.url.pathname);
 		<link rel="shortcut icon" type="image/svg+xml" href="/favicon.svg" />
 	</head>
 	<body>
-		<div class="legal-page">
+		{/* <main>, not a div: these pages do not route through Starlight, so nothing
+		    else supplies the landmark. */}
+		<main class="legal-page">
 			<slot />
-		</div>
+		</main>
 	</body>
 </html>
 
diff --git a/src/layouts/UseCaseLayout.astro b/src/layouts/UseCaseLayout.astro
index e435615960..b14d2acd9c 100644
--- a/src/layouts/UseCaseLayout.astro
+++ b/src/layouts/UseCaseLayout.astro
@@ -14,9 +14,9 @@ const ogImage = ogImageProp ?? getOgImageUrl(Astro.url.pathname);
 ---
 
 <BaseLayout headerVariant="solid-border" title={title} description={description} ogImage={ogImage}>
-	<main class="use-case-page" data-slug={pageSlug}>
+	<div class="use-case-page" data-slug={pageSlug}>
 		<slot />
-	</main>
+	</div>
 </BaseLayout>
 
 <style lang="scss" is:global>
diff --git a/src/models/data-table.ts b/src/models/data-table.ts
new file mode 100644
index 0000000000..42d68883fa
--- /dev/null
+++ b/src/models/data-table.ts
@@ -0,0 +1,22 @@
+/** Column descriptor for `DataTable.astro`. */
+export interface DataTableColumn {
+	/** Header text. `\n` becomes a `<br />`. Omit for the row-header column — the
+	 *  cell then carries visually hidden text (`srLabel`) instead. */
+	label?: string;
+	/** Visually-hidden header text used when `label` is absent. Defaults to `'Feature'`. */
+	srLabel?: string;
+	/**
+	 * Width for the matching `<col>`, emitted inline. Inline is the only form that
+	 * survives a scoped-style hash change, so prefer it over CSS where the width is
+	 * static. Use `colClass` instead when the width varies by breakpoint — a `calc()`
+	 * containing a percentage is silently dropped on `<col>`.
+	 */
+	width?: string;
+	/** Class on the `<col>`, for callers that key widths or column paint off it. */
+	colClass?: string;
+	/** Class on the `<th scope="col">`, e.g. to neutralise an inherited `thead th` rule. */
+	thClass?: string;
+	/** Inline declarations on the `<th scope="col">` — an object for per-column
+	 *  custom properties (diffable per property, no hand-glued semicolons). */
+	thStyle?: string | Record<string, string | number>;
+}
diff --git a/src/pages/404.astro b/src/pages/404.astro
index a41d097c7d..c9393ed624 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -7,7 +7,7 @@ import BaseLayout from '@layouts/BaseLayout.astro';
 	description="The page you are looking for doesn't exist or has been moved."
 	noIndex={true}
 >
-	<main class="error-page">
+	<div class="error-page">
 		<div class="error-page__container">
 			<div class="error-page__code">404</div>
 			<h1 class="error-page__title">Page Not Found</h1>
@@ -28,7 +28,7 @@ import BaseLayout from '@layouts/BaseLayout.astro';
 				</ul>
 			</div>
 		</div>
-	</main>
+	</div>
 </BaseLayout>
 
 <style lang="scss" is:global>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 1022054079..92798908fb 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -46,7 +46,7 @@ const blogUrl = new URL('/blog/', Astro.site).href;
 		},
 	}}
 >
-	<main class="blog-page">
+	<div class="blog-page">
 		{/* Runs synchronously before children are parsed so CSS animation's "from" keyframe
 		    is in effect the moment elements exist — no flash of final state. */}
 		<script is:inline>
@@ -232,7 +232,7 @@ const blogUrl = new URL('/blog/', Astro.site).href;
 				<Pagination mode="interactive" hidden ariaLabel="Blog pagination" />
 			</div>
 		</div>
-	</main>
+	</div>
 </BlogLayout>
 
 <script>
@@ -327,7 +327,7 @@ const blogUrl = new URL('/blog/', Astro.site).href;
 
 	readUrlParams();
 
-	// The inline script at the top of <main> may have added .is-entering before children painted.
+	// The inline script at the top of .blog-page may have added .is-entering before children painted.
 	// Clean it up after animations finish so future filter/pagination doesn't re-trigger anything.
 	const blogPage = document.querySelector('.blog-page') as HTMLElement | null;
 	if (blogPage?.classList.contains('is-entering')) {
diff --git a/src/pages/case-studies/index.astro b/src/pages/case-studies/index.astro
index f508b69c73..f0f738d562 100644
--- a/src/pages/case-studies/index.astro
+++ b/src/pages/case-studies/index.astro
@@ -26,7 +26,7 @@ const filterValues = caseStudyCategories.map((cat) => ({
 	title="IoT Case Studies"
 	description="Discover how companies in retail, energy, logistics, and more drive digital transformation with ThingsBoard's IoT platform to boost efficiency, growth, and innovation."
 >
-	<main class="cs-index">
+	<div class="cs-index">
 		<!-- Hero featured card -->
 		<section class="cs-index-hero">
 			<h1>Case studies</h1>
@@ -133,7 +133,7 @@ const filterValues = caseStudyCategories.map((cat) => ({
 			</div>
 			<NButton href="/contact-us/" target="_blank">Contact Us</NButton>
 		</div>
-	</main>
+	</div>
 </BaseLayout>
 
 <script>
diff --git a/src/pages/ce-vs-pe-diff/index.astro b/src/pages/ce-vs-pe-diff/index.astro
index cd1e98f5c8..8fb91f142b 100644
--- a/src/pages/ce-vs-pe-diff/index.astro
+++ b/src/pages/ce-vs-pe-diff/index.astro
@@ -60,160 +60,168 @@ import LegalLayout from '../../layouts/LegalLayout.astro';
 		<hr />
 
 		<h2>Feature Comparison</h2>
-		<table>
-			<thead>
-				<tr>
-					<th>Feature Category</th>
-					<th>Feature</th>
-					<th>Community Edition</th>
-					<th>Professional Edition</th>
-				</tr>
-			</thead>
-			<tbody>
-				<tr>
-					<td rowspan="6">Platform Core</td>
-					<td>Multi-Tenancy</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Scalability (Clustering)</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Rule Engine &amp; Data Processing</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>AI Models and AI Rule nodes</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>End-user real-time dashboards</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Mobile Application</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td rowspan="4">Device Management</td>
-					<td>Device &amp; Asset Modeling</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Device Claiming &amp; Provisioning API</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Bulk Device and Asset Provisioning via CSV</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>OTA Updates</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td rowspan="4">Connectivity</td>
-					<td>Standard IoT Protocols (MQTT/CoAP/HTTP/SNMP/LWM2M)</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Industrial IoT Gateway (Modbus, OPC-UA, BACnet, etc.)</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>LPWAN Integrations (LoRaWAN, Sigfox)</td>
-					<td>No</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>System Integrations (AWS IoT, Azure IoT, PubSub, Kafka)</td>
-					<td>No</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td rowspan="5">Security &amp; Admin</td>
-					<td>User Management</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Audit Logging</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Advanced Role-Based Access Control (RBAC)</td>
-					<td>No</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Single Sign-On (SSO) / OAuth2</td>
-					<td>No</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Secrets Storage</td>
-					<td>No</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td rowspan="4">Go-to-Market</td>
-					<td>White-Labeling</td>
-					<td>No</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Reporting &amp; Scheduling</td>
-					<td>No</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Solution Templates</td>
-					<td>No</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Device Payload Codec Library (400+)</td>
-					<td>No</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td rowspan="3">Deployment Options</td>
-					<td>Self-Managed (On-premise/Cloud)</td>
-					<td>Yes</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Managed Public Cloud</td>
-					<td>No</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Managed Private Cloud</td>
-					<td>No</td>
-					<td>Yes</td>
-				</tr>
-				<tr>
-					<td>Support</td>
-					<td>Support Model</td>
-					<td>Community</td>
-					<td>Advanced + SLA</td>
-				</tr>
-			</tbody>
-		</table>
+		{/* The table scrolls in this wrapper rather than being display:block itself,
+		    which would strip its table role. */}
+		<div class="table-scroll" role="region" aria-labelledby="feature-comparison-caption" tabindex="0" data-scroll-region>
+			<table>
+				{/* Hidden: the <h2> above already shows this text. */}
+				<caption id="feature-comparison-caption" class="table-caption"
+					>ThingsBoard Community Edition compared with Professional Edition: feature comparison</caption
+				>
+				<thead>
+					<tr>
+						<th scope="col">Feature Category</th>
+						<th scope="col">Feature</th>
+						<th scope="col">Community Edition</th>
+						<th scope="col">Professional Edition</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<th rowspan="6">Platform Core</th>
+						<th scope="row">Multi-Tenancy</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Scalability (Clustering)</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Rule Engine &amp; Data Processing</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">AI Models and AI Rule nodes</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">End-user real-time dashboards</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Mobile Application</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th rowspan="4">Device Management</th>
+						<th scope="row">Device &amp; Asset Modeling</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Device Claiming &amp; Provisioning API</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Bulk Device and Asset Provisioning via CSV</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">OTA Updates</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th rowspan="4">Connectivity</th>
+						<th scope="row">Standard IoT Protocols (MQTT/CoAP/HTTP/SNMP/LWM2M)</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Industrial IoT Gateway (Modbus, OPC-UA, BACnet, etc.)</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">LPWAN Integrations (LoRaWAN, Sigfox)</th>
+						<td>No</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">System Integrations (AWS IoT, Azure IoT, PubSub, Kafka)</th>
+						<td>No</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th rowspan="5">Security &amp; Admin</th>
+						<th scope="row">User Management</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Audit Logging</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Advanced Role-Based Access Control (RBAC)</th>
+						<td>No</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Single Sign-On (SSO) / OAuth2</th>
+						<td>No</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Secrets Storage</th>
+						<td>No</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th rowspan="4">Go-to-Market</th>
+						<th scope="row">White-Labeling</th>
+						<td>No</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Reporting &amp; Scheduling</th>
+						<td>No</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Solution Templates</th>
+						<td>No</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Device Payload Codec Library (400+)</th>
+						<td>No</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th rowspan="3">Deployment Options</th>
+						<th scope="row">Self-Managed (On-premise/Cloud)</th>
+						<td>Yes</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Managed Public Cloud</th>
+						<td>No</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th scope="row">Managed Private Cloud</th>
+						<td>No</td>
+						<td>Yes</td>
+					</tr>
+					<tr>
+						<th>Support</th>
+						<th scope="row">Support Model</th>
+						<td>Community</td>
+						<td>Advanced + SLA</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
 
 		<hr />
 
@@ -270,6 +278,13 @@ import LegalLayout from '../../layouts/LegalLayout.astro';
 		</div>
 
 	</div>
+
+	{/* Inside the layout: content placed after </LegalLayout> is emitted after
+	    </html>, as the anchor-js tags below already are. */}
+	<script>
+		import { initScrollRegions } from '@util/scroll-regions';
+		initScrollRegions();
+	</script>
 </LegalLayout>
 
 <script
@@ -280,6 +295,8 @@ import LegalLayout from '../../layouts/LegalLayout.astro';
 <script is:inline>anchors.add();</script>
 
 <style lang="scss">
+	@use '../../styles/_variables.scss' as v;
+
 	// Reset LegalLayout's .legal-page container styles
 	// !important needed because our :global rules are injected before LegalLayout's styles
 	:global(.legal-page) {
@@ -396,18 +413,38 @@ import LegalLayout from '../../layouts/LegalLayout.astro';
 			font-size: 1em;
 		}
 
+		// Horizontal scroll lives on the wrapper, so the table keeps its role.
+		.table-scroll {
+			overflow-x: auto;
+			margin-bottom: 16px;
+
+			// The p/ol/table/pre rule above gives every table a 16px bottom margin;
+			// the wrapper is a block formatting context, so that margin cannot
+			// collapse out of it and the gap below the card would double.
+			table {
+				margin-bottom: 0;
+			}
+		}
+
+		.table-caption {
+			@include v.caption-hidden;
+		}
+
 		table {
-			display: block;
 			width: 100%;
-			overflow: auto;
 			border-spacing: 0;
 			border-collapse: collapse;
-			margin-bottom: 16px;
 
-			th {
+			thead th {
 				font-weight: 600;
 			}
 
+			// The category and feature cells are <th> now; they read as body text.
+			tbody th {
+				font-weight: 400;
+				text-align: start;
+			}
+
 			th,
 			td {
 				padding: 6px 13px;
diff --git a/src/pages/clients-feedback/index.astro b/src/pages/clients-feedback/index.astro
index c9d8880d89..ed203752ea 100644
--- a/src/pages/clients-feedback/index.astro
+++ b/src/pages/clients-feedback/index.astro
@@ -22,7 +22,7 @@ const allCards = feedbackCategories.flatMap((cat) =>
 	description="Read what our clients say about ThingsBoard IoT platform. Real feedback from companies in smart energy, agriculture, smart buildings, telecom, and more."
 	customTitle={true}
 >
-	<main class="cf-index">
+	<div class="cf-index">
 		{/* Hero */}
 		<section class="cf-hero">
 			<h1>ThingsBoard Clients Feedback</h1>
@@ -61,7 +61,7 @@ const allCards = feedbackCategories.flatMap((cat) =>
 			</div>
 			<NButton href="/contact-us/" target="_blank">Contact Us</NButton>
 		</div>
-	</main>
+	</div>
 </BaseLayout>
 
 <script>
diff --git a/src/pages/google-iot-core-alternative/index.astro b/src/pages/google-iot-core-alternative/index.astro
index a60298686a..bf0a3941e7 100644
--- a/src/pages/google-iot-core-alternative/index.astro
+++ b/src/pages/google-iot-core-alternative/index.astro
@@ -133,7 +133,12 @@ const concepts = [
 		</section>
 
 		<!-- Comparison matrix -->
-		<ComparisonMatrix columns={matrixColumns} rows={matrixRows} noTopMargin />
+		<ComparisonMatrix
+			caption="Google IoT Core compared with ThingsBoard Professional Edition"
+			columns={matrixColumns}
+			rows={matrixRows}
+			noTopMargin
+		/>
 		<div class="matrix-note page-container">
 			<p>
 				Learn more about ThingsBoard features <a href="/docs/pe/why-thingsboard/">in the ThingsBoard overview</a>.
diff --git a/src/pages/iot-hub/[category]/[...page].astro b/src/pages/iot-hub/[category]/[...page].astro
index 885424db12..23bc0df13c 100644
--- a/src/pages/iot-hub/[category]/[...page].astro
+++ b/src/pages/iot-hub/[category]/[...page].astro
@@ -87,7 +87,7 @@ const hasFaq = !!getCategoryFaq(category);
 ---
 
 <BaseLayout title={title} description={description}>
-	<main
+	<div
 		class="iot-hub-cat"
 		data-iot-hub-search-root
 		data-item-type={itemType}
@@ -173,7 +173,7 @@ const hasFaq = !!getCategoryFaq(category);
 		<ListingCardTemplate variant="preview" titleAs="h2" />
 		<ListingCardTemplate variant="compact" titleAs="h2" />
 		<IotHubRuntimeConfig />
-	</main>
+	</div>
 </BaseLayout>
 
 <style lang="scss">
diff --git a/src/pages/iot-hub/[category]/[slug].astro b/src/pages/iot-hub/[category]/[slug].astro
index 50e8e54b93..7aa1f293f3 100644
--- a/src/pages/iot-hub/[category]/[slug].astro
+++ b/src/pages/iot-hub/[category]/[slug].astro
@@ -53,7 +53,7 @@ recordSitemapLastmod(Astro.url.pathname, detail.updatedTime);
 ---
 
 <BaseLayout title={title} description={description} ogImage={ogImageUrl}>
-	<main class="iot-hub-detail">
+	<div class="iot-hub-detail">
 		<div class="iot-hub-detail__center">
 			<div class="iot-hub-detail__container">
 				<DetailHero detail={detail} categorySlug={category!} />
@@ -72,7 +72,7 @@ recordSitemapLastmod(Astro.url.pathname, detail.updatedTime);
 				<CreatorCTA category={category} />
 			</div>
 		</div>
-	</main>
+	</div>
 </BaseLayout>
 
 <style lang="scss">
diff --git a/src/pages/iot-hub/creator/[id]/[...page].astro b/src/pages/iot-hub/creator/[id]/[...page].astro
index 616b8ee7b1..fd317137c5 100644
--- a/src/pages/iot-hub/creator/[id]/[...page].astro
+++ b/src/pages/iot-hub/creator/[id]/[...page].astro
@@ -136,7 +136,7 @@ const description = categoryList
 ---
 
 <BaseLayout title={title} description={description}>
-	<main
+	<div
 		class="iot-hub-creator"
 		data-iot-hub-search-root
 		data-creator-id={id}
@@ -180,7 +180,7 @@ const description = categoryList
 			</div>
 		</div>
 		<IotHubRuntimeConfig />
-	</main>
+	</div>
 </BaseLayout>
 
 <style lang="scss">
diff --git a/src/pages/iot-hub/index.astro b/src/pages/iot-hub/index.astro
index 0fc0f41da1..12d7ef2476 100644
--- a/src/pages/iot-hub/index.astro
+++ b/src/pages/iot-hub/index.astro
@@ -53,7 +53,7 @@ const description =
 ---
 
 <BaseLayout title={title} description={description} customTitle>
-	<main class="iot-hub-home">
+	<div class="iot-hub-home">
 		<section class="iot-hub-home__top">
 			<div class="iot-hub-home__bg" aria-hidden="true">
 				<div class="iot-hub-home__pattern"></div>
@@ -119,7 +119,7 @@ const description =
 				<CategoryFaq categorySlug="index" />
 			</div>
 		</div>
-	</main>
+	</div>
 </BaseLayout>
 
 <style lang="scss">
diff --git a/src/pages/iot-hub/search/[...page].astro b/src/pages/iot-hub/search/[...page].astro
index 8592cb14ed..fa701f7028 100644
--- a/src/pages/iot-hub/search/[...page].astro
+++ b/src/pages/iot-hub/search/[...page].astro
@@ -81,7 +81,7 @@ const description = isFirstPage ? baseDescription : `${baseDescription} (page ${
 ---
 
 <BaseLayout title={title} description={description}>
-	<main
+	<div
 		class="iot-hub-search"
 		data-iot-hub-search-root
 		data-base-path="/iot-hub/search/"
@@ -118,7 +118,7 @@ const description = isFirstPage ? baseDescription : `${baseDescription} (page ${
 			</div>
 		</div>
 		<IotHubRuntimeConfig />
-	</main>
+	</div>
 </BaseLayout>
 
 <style lang="scss">
diff --git a/src/pages/partners/hardware/[slug].astro b/src/pages/partners/hardware/[slug].astro
index 05bd9065bb..dd9ef7bc77 100644
--- a/src/pages/partners/hardware/[slug].astro
+++ b/src/pages/partners/hardware/[slug].astro
@@ -71,10 +71,13 @@ const linkCategories = Object.entries(partner.links).filter(([, links]) => links
 			<div class="specs-table">
 				<h2>Specifications</h2>
 				<table>
+					{/* Hidden: the <h2> above already shows this text. No <thead> — the
+					    table is key/value, so there are no column headers to name. */}
+					<caption class="specs-table__caption">{partner.name} hardware specifications</caption>
 					{
 						partner.connectivity.length > 0 && (
 							<tr>
-								<th>Connectivity</th>
+								<th scope="row">Connectivity</th>
 								<td>
 									<div class="chip-list">
 										{partner.connectivity.map((c) => (
@@ -88,7 +91,7 @@ const linkCategories = Object.entries(partner.links).filter(([, links]) => links
 					{
 						partner.industry.length > 0 && (
 							<tr>
-								<th>Industry</th>
+								<th scope="row">Industry</th>
 								<td>
 									<div class="chip-list">
 										{partner.industry.map((i) => (
@@ -102,7 +105,7 @@ const linkCategories = Object.entries(partner.links).filter(([, links]) => links
 					{
 						partner.useCase.length > 0 && (
 							<tr>
-								<th>Use Cases</th>
+								<th scope="row">Use Cases</th>
 								<td>
 									<div class="chip-list">
 										{partner.useCase.map((u) => (
@@ -116,7 +119,7 @@ const linkCategories = Object.entries(partner.links).filter(([, links]) => links
 					{
 						partner.hardwareTypes.length > 0 && (
 							<tr>
-								<th>Hardware Types</th>
+								<th scope="row">Hardware Types</th>
 								<td>
 									<div class="chip-list">
 										{partner.hardwareTypes.map((h) => (
@@ -287,6 +290,10 @@ const linkCategories = Object.entries(partner.links).filter(([, links]) => links
 			border-bottom: 1px solid var(--color-border);
 		}
 
+		&__caption {
+			@include caption-hidden;
+		}
+
 		th {
 			text-align: left;
 			padding: 0.75rem 1rem 0.75rem 0;
diff --git a/src/pages/pricing/index.astro b/src/pages/pricing/index.astro
index 5e57958282..bfc9f5ccb2 100644
--- a/src/pages/pricing/index.astro
+++ b/src/pages/pricing/index.astro
@@ -188,7 +188,7 @@ const tbmqSubTabs = enrichTabs([
 	description="ThingsBoard IoT Platform pricing — compare Free, Cloud, Private Cloud, and Self-Managed plans with transparent subscription and perpetual licensing."
 >
 	<PricingBackground />
-	<main class="pricing-page">
+	<div class="pricing-page">
 		<PricingHero />
 		<ProductTabs />
 
@@ -263,7 +263,11 @@ const tbmqSubTabs = enrichTabs([
 					/>
 				</PlanCardGrid>
 				<AddOnsSection addOns={tbPrivateCloudAddOns} />
-				<ComparisonTable headers={pcFeatureHeaders} rows={enrichRows(pcFeatureRows)} />
+				<ComparisonTable
+					caption="ThingsBoard Private Cloud: additional features by plan"
+					headers={pcFeatureHeaders}
+					rows={enrichRows(pcFeatureRows)}
+				/>
 			</section>
 
 			<!-- TB Self-managed -->
@@ -535,7 +539,7 @@ const tbmqSubTabs = enrichTabs([
 				))
 			}
 		</div>
-	</main>
+	</div>
 
 	<!-- Calculator modals (rendered outside main flow) -->
 	<TbPaygCalculator />
@@ -600,17 +604,17 @@ const tbmqSubTabs = enrichTabs([
 		// initPricing() runs exactly once per full page load — this project has
 		// no ClientRouter / View Transitions, so the document is never reused
 		// across navigations. A single plain listener on the persistent
-		// `main.pricing-page` root is all that's needed; no AbortController or
+		// `.pricing-page` root is all that's needed; no AbortController or
 		// per-run bookkeeping.
 		{
-			const pricingRoot = document.querySelector('main.pricing-page');
+			const pricingRoot = document.querySelector('.pricing-page');
 			pricingRoot?.addEventListener('click', (e) => {
 				const t = e.target as HTMLElement;
 				if (!t || typeof t.closest !== 'function') return;
 
 				// Tooltip-info icons that double as "scroll to FAQ" buttons.
 				// Skip if the click landed on a link inside the tooltip body.
-				const faqJump = t.closest<HTMLElement>('.sub-tab-info, .plan-feature-info, .addon-tooltip-trigger, .comparison-tooltip-trigger');
+				const faqJump = t.closest<HTMLElement>('.sub-tab-info, .plan-feature-info, .addon-tooltip-trigger, .pc-comparison-tooltip-trigger');
 				if (faqJump) {
 					if (t.closest('a')) return;
 					e.stopPropagation();
@@ -736,7 +740,7 @@ const tbmqSubTabs = enrichTabs([
 			updateUrl();
 		}
 
-		// `.product-tab` click is delegated above on `main.pricing-page`.
+		// `.product-tab` click is delegated above on `.pricing-page`.
 
 		// ─── FAQ context mapping ───
 		// Maps sub-tab ID to FAQ context ID(s)
@@ -839,7 +843,7 @@ const tbmqSubTabs = enrichTabs([
 			updateUrl();
 		}
 
-		// `.sub-tab` click is delegated above on `main.pricing-page`.
+		// `.sub-tab` click is delegated above on `.pricing-page`.
 
 		// ─── Helper: scroll to FAQ item (activates the owning pricing tab first) ───
 		function scrollToFaqItem(faqId: string) {
@@ -883,7 +887,7 @@ const tbmqSubTabs = enrichTabs([
 			}
 		}
 
-		// `.sub-tab-info` click (FAQ scroll) is delegated above on `main.pricing-page`.
+		// `.sub-tab-info` click (FAQ scroll) is delegated above on `.pricing-page`.
 
 		// ─── Shared tooltip system: JS-only visibility ───
 		let activePricingTip: { trigger: Element; tooltip: HTMLElement } | null = null;
@@ -957,7 +961,7 @@ const tbmqSubTabs = enrichTabs([
 			requestAnimationFrame(() => {
 				const tipRect = tooltip.getBoundingClientRect();
 				const arrow = tooltip.querySelector(
-					'.plan-feature-tooltip-arrow, .addon-tooltip-arrow, .comparison-tooltip-arrow, .sub-tab-tooltip-arrow'
+					'.plan-feature-tooltip-arrow, .addon-tooltip-arrow, .pc-comparison-tooltip-arrow, .sub-tab-tooltip-arrow'
 				) as HTMLElement | null;
 				let left = rect.right + 4;
 				let flipped = false;
@@ -1050,8 +1054,8 @@ const tbmqSubTabs = enrichTabs([
 		// doesn't compete with the LCP frame. First hover within ~50 ms of
 		// page-load might miss a tooltip; acceptable trade-off since the
 		// content isn't blocked, just the tooltip behavior.
-		// `.plan-feature-info` / `.addon-tooltip-trigger` / `.comparison-tooltip-trigger`
-		// click → scroll-to-FAQ is delegated above on `main.pricing-page`.
+		// `.plan-feature-info` / `.addon-tooltip-trigger` / `.pc-comparison-tooltip-trigger`
+		// click → scroll-to-FAQ is delegated above on `.pricing-page`.
 		const bindAllPricingTooltips = () => {
 			$$('.sub-tab-info').forEach((info) => {
 				const tooltip = info.querySelector('.sub-tab-tooltip') as HTMLElement | null;
@@ -1065,8 +1069,8 @@ const tbmqSubTabs = enrichTabs([
 				const tooltip = trigger.querySelector('.addon-tooltip') as HTMLElement | null;
 				if (tooltip) bindPricingTooltip(trigger, tooltip);
 			});
-			$$('.comparison-tooltip-trigger').forEach((trigger) => {
-				const tooltip = trigger.querySelector('.comparison-tooltip') as HTMLElement | null;
+			$$('.pc-comparison-tooltip-trigger').forEach((trigger) => {
+				const tooltip = trigger.querySelector('.pc-comparison-tooltip') as HTMLElement | null;
 				if (tooltip) bindPricingTooltip(trigger, tooltip);
 			});
 		};
@@ -1107,7 +1111,7 @@ const tbmqSubTabs = enrichTabs([
 			regionCheckbox.addEventListener('change', () => {
 				setRegion(regionCheckbox.checked);
 			});
-			// `.region-toggle-label` click is delegated above on `main.pricing-page`;
+			// `.region-toggle-label` click is delegated above on `.pricing-page`;
 			// it flips `regionCheckbox.checked` and dispatches `change`, which
 			// the handler above picks up.
 
@@ -1163,7 +1167,7 @@ const tbmqSubTabs = enrichTabs([
 					}
 				});
 			});
-			// `.billing-toggle-label` click is delegated above on `main.pricing-page`;
+			// `.billing-toggle-label` click is delegated above on `.pricing-page`;
 			// it flips `checkbox.checked` and dispatches `change`, which the
 			// handler above picks up.
 		});
diff --git a/src/pages/products/mobile-pe/index.astro b/src/pages/products/mobile-pe/index.astro
index f358f8d4b7..b59847c06b 100644
--- a/src/pages/products/mobile-pe/index.astro
+++ b/src/pages/products/mobile-pe/index.astro
@@ -9,7 +9,7 @@ import MobileFeatureBlock from '../../../components/Landing/MobileFeatureBlock.a
 	title="ThingsBoard PE Mobile Application"
 	description="ThingsBoard PE Mobile Application is an open-source project based on Flutter. Build your own advanced IoT mobile application with minimum coding efforts."
 >
-	<main>
+	<div class="page-body">
 		<div id="overflow">
 			<section id="intro">
 				<div class="intro-inner">
@@ -176,7 +176,7 @@ import MobileFeatureBlock from '../../../components/Landing/MobileFeatureBlock.a
 				</div>
 			</section>
 		</div>
-	</main>
+	</div>
 </BaseLayout>
 
 <style lang="scss" is:global>
@@ -186,7 +186,7 @@ import MobileFeatureBlock from '../../../components/Landing/MobileFeatureBlock.a
 <style lang="scss">
 	@use '../../../styles/variables' as *;
 
-	main {
+	.page-body {
 		width: 100%;
 	}
 
diff --git a/src/pages/products/mobile/index.astro b/src/pages/products/mobile/index.astro
index 8e45408540..b16c8afb52 100644
--- a/src/pages/products/mobile/index.astro
+++ b/src/pages/products/mobile/index.astro
@@ -9,7 +9,7 @@ import MobileFeatureBlock from '../../../components/Landing/MobileFeatureBlock.a
 	title="ThingsBoard Mobile Application"
 	description="ThingsBoard Mobile Application is an open-source project based on Flutter. Build your own IoT mobile application with minimum coding efforts."
 >
-	<main>
+	<div class="page-body">
 		<div id="overflow">
 			<section id="intro">
 				<div class="intro-inner">
@@ -126,7 +126,7 @@ import MobileFeatureBlock from '../../../components/Landing/MobileFeatureBlock.a
 				</div>
 			</section>
 		</div>
-	</main>
+	</div>
 </BaseLayout>
 
 <style lang="scss" is:global>
@@ -140,7 +140,7 @@ import MobileFeatureBlock from '../../../components/Landing/MobileFeatureBlock.a
 <style lang="scss">
 	@use '../../../styles/variables' as *;
 
-	main {
+	.page-body {
 		width: 100%;
 	}
 
diff --git a/src/pages/products/paas/index.astro b/src/pages/products/paas/index.astro
index 025ba3464b..2856254e53 100644
--- a/src/pages/products/paas/index.astro
+++ b/src/pages/products/paas/index.astro
@@ -41,7 +41,7 @@ const cards = [
 	title="ThingsBoard Cloud"
 	description="ThingsBoard Cloud — fully managed, scalable, fault-tolerant IoT platform with Professional Edition features and no self-hosting required."
 >
-	<main>
+	<div class="page-body">
 		<Hero
 			product={Products.PAAS}
 			title="ThingsBoard Cloud"
@@ -101,14 +101,14 @@ const cards = [
 				<a href="/products/paas/privacy-policy/" class="privacy-link">ThingsBoard Cloud Privacy policy</a>
 			</section>
 		</section>
-	</main>
+	</div>
 </BaseLayout>
 
 <style is:global lang="scss">
 	@use '../../../styles/landing';
 	@use '../../../styles/variables' as *;
 
-	main {
+	.page-body {
 		width: 100%;
 	}
 
diff --git a/src/pages/products/thingsboard-edge/index.astro b/src/pages/products/thingsboard-edge/index.astro
index 14ab79205e..73d203542c 100644
--- a/src/pages/products/thingsboard-edge/index.astro
+++ b/src/pages/products/thingsboard-edge/index.astro
@@ -19,7 +19,7 @@ import { Products } from '@models/site.models';
 	description="Comprehensive software solutions for edge computing, providing data analysis and management at the source of data creation."
 	gitHubPlatform={Products.EDGE}
 >
-	<main>
+	<div class="page-body">
 		<Hero
 			product={Products.EDGE}
 			title="Open Source IoT Edge Computing"
@@ -115,7 +115,7 @@ import { Products } from '@models/site.models';
 			<EdgeBottomFeatures />
 			<EdgeBottom />
 		</section>
-	</main>
+	</div>
 </BaseLayout>
 
 <style lang="scss" is:global>
@@ -123,7 +123,7 @@ import { Products } from '@models/site.models';
 		--tb-main-color: #00796b;
 	}
 
-	main {
+	.page-body {
 		width: 100%;
 	}
 
diff --git a/src/pages/products/thingsboard-pe/index.astro b/src/pages/products/thingsboard-pe/index.astro
index 16289761cd..d58277a99b 100644
--- a/src/pages/products/thingsboard-pe/index.astro
+++ b/src/pages/products/thingsboard-pe/index.astro
@@ -16,7 +16,7 @@ import { Products } from '@models/site.models';
 	title="ThingsBoard Professional Edition"
 	description="Advanced ThingsBoard IoT Platform distribution with white-labeling, advanced RBAC, platform integrations, entity groups, scheduler, reporting, and more."
 >
-	<main>
+	<div class="page-body">
 		<Hero
 			product={Products.PE}
 			title="ThingsBoard Professional Edition"
@@ -177,14 +177,14 @@ import { Products } from '@models/site.models';
 				</div>
 			</section>
 		</section>
-	</main>
+	</div>
 </BaseLayout>
 
 <style is:global lang="scss">
 	@use '../../../styles/landing';
 	@use '../../../styles/variables' as *;
 
-	main {
+	.page-body {
 		width: 100%;
 	}
 
diff --git a/src/pages/services/development-services/index.astro b/src/pages/services/development-services/index.astro
index ec586c000d..063e3395fd 100644
--- a/src/pages/services/development-services/index.astro
+++ b/src/pages/services/development-services/index.astro
@@ -30,7 +30,7 @@ const customerLogos = [
 	title="Custom IoT Development | 3X Faster Delivery & Fixed Cost"
 	description="ThingsBoard IoT development services — 3× faster delivery, 2× lower TCO, and high-quality scalable solutions backed by deep IoT expertise."
 >
-	<main class="page-wrap">
+	<div class="page-body">
 		<!-- spacer for fixed header -->
 		<section class="hero"></section>
 
@@ -1075,16 +1075,20 @@ const customerLogos = [
 					</h3>
 					<div class="table-container">
 						<table>
+							{/* Hidden: the <h3> above already shows this text. */}
+							<caption class="fast-delivery-caption"
+								>ThingsBoard fast delivery: why each capability matters and what it gives</caption
+							>
 							<thead>
 								<tr>
-									<th></th>
-									<th>Why it matters</th>
-									<th>What it gives</th>
+									<th scope="col"><span class="visually-hidden">Capability</span></th>
+									<th scope="col">Why it matters</th>
+									<th scope="col">What it gives</th>
 								</tr>
 							</thead>
 							<tbody>
 								<tr>
-									<td>ThingsBoard at the Core</td>
+									<th scope="row">ThingsBoard at the Core</th>
 									<td
 										>We build on ThingsBoard's micro-service stack and re-using components instead of wiring them from
 										scratch</td
@@ -1092,22 +1096,22 @@ const customerLogos = [
 									<td>8× faster process: regular 8-month MVP delivered in just 1 month</td>
 								</tr>
 								<tr>
-									<td>Low-code accelerators</td>
+									<th scope="row">Low-code accelerators</th>
 									<td>Dashboards, workflows, and rules are configured, not coded</td>
 									<td>About 70 % of UI built via drag-and-drop</td>
 								</tr>
 								<tr>
-									<td>Vertical starter kits</td>
+									<th scope="row">Vertical starter kits</th>
 									<td>Reusable blueprints for 10+ industries cut uncertainty and tighten estimates.</td>
 									<td>40 – 50 % of configuration is reused across engagements</td>
 								</tr>
 								<tr>
-									<td>Architecture-as-a-Service</td>
+									<th scope="row">Architecture-as-a-Service</th>
 									<td>Scaling, HA, observability, and DevOps patterns come pre-hardened and cloud-agnostic</td>
 									<td>Scalable production-ready setup for 50k msg/s deployed in 5–8 days</td>
 								</tr>
 								<tr>
-									<td>Fixed-price transparency</td>
+									<th scope="row">Fixed-price transparency</th>
 									<td>Budget is locked on day one; no surprises down the line</td>
 									<td>Projects delivered on agreed cost and timeline</td>
 								</tr>
@@ -1231,22 +1235,26 @@ const customerLogos = [
 					</p>
 					<div class="table-container">
 						<table class="timeline-table">
+							{/* Hidden: the <h2> above already shows this text. */}
+							<caption class="timeline-caption"
+								>Project implementation timeline: which weeks each step runs</caption
+							>
 							<thead>
 								<tr>
-									<th>Steps</th>
-									<th>Week 1</th>
-									<th>Week 2</th>
-									<th>Week 3</th>
-									<th>Week 4</th>
-									<th>Week 5</th>
-									<th>Week 6</th>
-									<th>Week 7</th>
-									<th>Week 8</th>
+									<th scope="col">Steps</th>
+									<th scope="col">Week 1</th>
+									<th scope="col">Week 2</th>
+									<th scope="col">Week 3</th>
+									<th scope="col">Week 4</th>
+									<th scope="col">Week 5</th>
+									<th scope="col">Week 6</th>
+									<th scope="col">Week 7</th>
+									<th scope="col">Week 8</th>
 								</tr>
 							</thead>
 							<tbody id="timeline-body">
 								<tr>
-									<td>01. Technical Workshop</td>
+									<th scope="row">01. Technical Workshop</th>
 									<td
 										><div class="expansion-cell first">
 											<p>1-3 sessions</p><p>
@@ -1258,7 +1266,7 @@ const customerLogos = [
 									<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
 								</tr>
 								<tr>
-									<td>02. Scope &amp; Proposal</td>
+									<th scope="row">02. Scope &amp; Proposal</th>
 									<td></td>
 									<td
 										><div class="expansion-cell second">
@@ -1272,7 +1280,7 @@ const customerLogos = [
 									<td></td><td></td><td></td><td></td><td></td><td></td>
 								</tr>
 								<tr>
-									<td>03. Project Kick-off</td>
+									<th scope="row">03. Project Kick-off</th>
 									<td></td><td></td>
 									<td
 										><div class="expansion-cell third">
@@ -1285,7 +1293,7 @@ const customerLogos = [
 									<td></td><td></td><td></td><td></td><td></td>
 								</tr>
 								<tr>
-									<td>04. Iterative Development</td>
+									<th scope="row">04. Iterative Development</th>
 									<td></td><td></td><td></td>
 									<td
 										><div class="expansion-cell fourth">
@@ -1299,7 +1307,7 @@ const customerLogos = [
 									<td></td><td></td><td></td><td></td>
 								</tr>
 								<tr>
-									<td>05. Iterative Testing &amp; Validation</td>
+									<th scope="row">05. Iterative Testing &amp; Validation</th>
 									<td></td><td></td><td></td><td></td>
 									<td
 										><div class="expansion-cell fifth">
@@ -1313,7 +1321,7 @@ const customerLogos = [
 									<td></td><td></td><td></td>
 								</tr>
 								<tr>
-									<td>06. Deployment</td>
+									<th scope="row">06. Deployment</th>
 									<td></td><td></td><td></td><td></td><td></td><td></td>
 									<td
 										><div class="expansion-cell sixth">
@@ -1326,7 +1334,7 @@ const customerLogos = [
 									<td></td>
 								</tr>
 								<tr>
-									<td>07. Support &amp; Maintenance</td>
+									<th scope="row">07. Support &amp; Maintenance</th>
 									<td></td><td></td><td></td><td></td><td></td><td></td>
 									<td
 										><div class="expansion-cell seventh">
@@ -1939,7 +1947,7 @@ const customerLogos = [
 				</section>
 			</div>
 		</div>
-	</main>
+	</div>
 </BaseLayout>
 
 <!-- MODAL -->
@@ -2512,6 +2520,8 @@ const customerLogos = [
 </script>
 
 <style lang="scss">
+	@use '../../../styles/_variables.scss' as v;
+
 	// ── Scroll animations ─────────────────────────────────────────────────────
 	:global(.animation-prepare) {
 		opacity: 0;
@@ -3112,7 +3122,7 @@ const customerLogos = [
 
 	// ≤959px
 	@media (max-width: 959px) {
-		.page-wrap {
+		.page-body {
 			overflow: hidden;
 		}
 
@@ -4487,6 +4497,14 @@ const customerLogos = [
 			color: #212121;
 		}
 
+		.visually-hidden {
+			@include v.visually-hidden;
+		}
+
+		.fast-delivery-caption {
+			@include v.caption-hidden;
+		}
+
 		.mobile-container {
 			display: none;
 		}
@@ -4529,7 +4547,9 @@ const customerLogos = [
 				width: 35%;
 			}
 
-			tbody td:first-child {
+			// :is(td, th) — the row labels are <th>, so a td-only selector would
+			// leave the label column unstyled.
+			tbody :is(td, th):first-child {
 				font-weight: 400;
 				color: #212529;
 				width: 30%;
@@ -4542,7 +4562,7 @@ const customerLogos = [
 				width: 35%;
 			}
 
-			tr:last-child td {
+			tr:last-child :is(td, th) {
 				border-bottom: none;
 			}
 		}
@@ -4550,7 +4570,10 @@ const customerLogos = [
 
 	// ≤1279px — fast delivery
 	@media (max-width: 1279px) {
-		.fast-delivery table td {
+		// tbody th included: the row labels are <th>, and would otherwise keep the
+		// narrower base padding in the 960–1279px band.
+		.fast-delivery table td,
+		.fast-delivery table tbody th {
 			padding: 20px;
 		}
 	}
@@ -4816,12 +4839,18 @@ const customerLogos = [
 			width: 100%;
 			max-width: 1400px;
 
+			.timeline-caption {
+				@include v.caption-hidden;
+			}
+
 			.timeline-table {
 				width: 100%;
 				border-collapse: separate;
 				table-layout: fixed;
 
-				th {
+				// thead-only: the step labels in tbody are <th> too, and must not
+				// take the header font or the header underline.
+				thead th {
 					padding: 12px 0;
 					font-size: 18px;
 					font-weight: 500;
@@ -4857,7 +4886,7 @@ const customerLogos = [
 						&:hover {
 							background-color: #f2f7fe;
 						}
-						&:hover td:first-child {
+						&:hover :is(td, th):first-child {
 							font-weight: 500;
 						}
 					}
@@ -4866,12 +4895,14 @@ const customerLogos = [
 						padding: 12px 0;
 					}
 
-					td:first-child {
+					:is(td, th):first-child {
 						padding: 16px 0 16px 8px;
 						font-size: 16px;
 						font-weight: 400;
 						line-height: 28px;
 						color: #212121;
+						// <th> would otherwise centre the step label.
+						text-align: start;
 						vertical-align: top;
 						letter-spacing: 0.15px;
 					}
diff --git a/src/pages/services/index.astro b/src/pages/services/index.astro
index 933032d73d..d0d414c055 100644
--- a/src/pages/services/index.astro
+++ b/src/pages/services/index.astro
@@ -106,7 +106,7 @@ const recommendations = [
 	customTitle
 	description="Professional support, managed platform operations, and on-demand experts — everything you need to run ThingsBoard with confidence."
 >
-	<main class="services-page">
+	<div class="services-page">
 		{/* ── Hero ────────────────────────────────────────────────────── */}
 		<section class="sp-hero">
 			<div class="sp-container sp-hero__inner">
@@ -620,7 +620,7 @@ const recommendations = [
 				</div>
 			</div>
 		</section>
-	</main>
+	</div>
 </BaseLayout>
 
 <script>
diff --git a/src/pages/services/trainings/index.astro b/src/pages/services/trainings/index.astro
index fd5dab7de7..d3becc0c98 100644
--- a/src/pages/services/trainings/index.astro
+++ b/src/pages/services/trainings/index.astro
@@ -13,10 +13,8 @@ import { courses } from '@data/trainings';
 	title="ThingsBoard Training Sessions | Expert IoT Workshops"
 	description="Practical ThingsBoard training led by experts — 15 two-hour sessions for teams up to 8 engineers, covering visualization, admin, SCADA, and more."
 >
-	<main>
-		<HeroSection />
-		<InfoCardsSection />
-		<CoursesSection courses={courses} />
-		<StatisticsSection />
-	</main>
+	<HeroSection />
+	<InfoCardsSection />
+	<CoursesSection courses={courses} />
+	<StatisticsSection />
 </BaseLayout>
diff --git a/src/pages/use-cases/index.astro b/src/pages/use-cases/index.astro
index 7941cc3b18..665b720453 100644
--- a/src/pages/use-cases/index.astro
+++ b/src/pages/use-cases/index.astro
@@ -12,7 +12,7 @@ import { useCaseItems } from '@data/use-cases';
 	title="IoT Use Cases"
 	description="Explore ThingsBoard IoT use cases — smart energy, SCADA, fleet tracking, healthcare, environment monitoring with ready-to-use dashboards and architectures."
 >
-	<main class="uc-index">
+	<div class="uc-index">
 		{/* Hero */}
 		<section class="uc-index-hero">
 			<div class="uc-index-hero-left">
@@ -71,7 +71,7 @@ import { useCaseItems } from '@data/use-cases';
 				{ label: 'IoT development services', href: '/services/development-services/', variant: 'outlined' },
 			]}
 		/>
-	</main>
+	</div>
 </BaseLayout>
 
 <style lang="scss" is:global>
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 88b67b6484..157c4cab36 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -499,6 +499,33 @@ $z-tooltip: 1200;
 	justify-content: space-between;
 }
 
+// Hides content visually while leaving it in the a11y tree and in extracted text.
+// clip-path rather than a negative margin, which would skew the scrollWidth of an
+// overflow-x container.
+@mixin visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	border: 0;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+// Hides a <caption> — or a header row's cells — while keeping its semantics.
+// The box is zeroed rather than positioned: `position: absolute` blockifies
+// display, stripping the caption role, and the columnheader mapping when used
+// on <th>. Add `border: 0` alongside it on header cells that carry one.
+@mixin caption-hidden {
+	padding: 0;
+	height: 0;
+	line-height: 0;
+	font-size: 0;
+	overflow: hidden;
+	color: transparent;
+}
+
 // Container mixin
 @mixin container {
 	width: 100%;
diff --git a/src/util/scroll-regions.ts b/src/util/scroll-regions.ts
new file mode 100644
index 0000000000..0f1960fbb5
--- /dev/null
+++ b/src/util/scroll-regions.ts
@@ -0,0 +1,40 @@
+/**
+ * Keeps scrollable regions honest. The markup ships tabindex="0" and
+ * role="region" so a keyboard user can scroll the region even without JS; this
+ * removes both whenever the region does not actually overflow — a region that
+ * cannot scroll is a needless tab stop, and with an accessible name it also
+ * clutters the landmark list. Watches both the region and its content, since a
+ * font swap can change scrollWidth without moving the region's own box.
+ *
+ * The `role` of a `[data-scroll-region]` element belongs to this function: it sets
+ * `region` and removes it again, so a consumer ships `role="region"` in the markup
+ * and never any other role — one placed here would be stripped on the first layout
+ * where the region fits.
+ */
+export function initScrollRegions(): void {
+	const regions = document.querySelectorAll<HTMLElement>('[data-scroll-region]');
+	if (regions.length === 0) return;
+
+	const sync = (el: HTMLElement): void => {
+		if (el.scrollWidth > el.clientWidth) {
+			el.setAttribute('tabindex', '0');
+			el.setAttribute('role', 'region');
+		} else {
+			el.removeAttribute('tabindex');
+			el.removeAttribute('role');
+		}
+	};
+
+	const observer = new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			const region = (entry.target as HTMLElement).closest<HTMLElement>('[data-scroll-region]');
+			if (region) sync(region);
+		}
+	});
+
+	for (const el of regions) {
+		sync(el);
+		observer.observe(el);
+		if (el.firstElementChild) observer.observe(el.firstElementChild);
+	}
+}
diff --git a/src/util/slug-id.ts b/src/util/slug-id.ts
new file mode 100644
index 0000000000..a3c274000e
--- /dev/null
+++ b/src/util/slug-id.ts
@@ -0,0 +1,28 @@
+/**
+ * Deterministic, human-readable element id from a text and a namespace prefix —
+ * table caption ids and pagination label ids that `aria-labelledby` points at.
+ *
+ * Two calls with the same text produce the same id. That cannot be resolved
+ * here — a component cannot see its siblings — so a caller rendering two
+ * instances with identical texts on one page must pass distinct ids instead.
+ */
+export function slugId(text: string, prefix: string): string {
+	const slug = text
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, '-')
+		.replace(/^-|-$/g, '');
+
+	// Slugifying keeps Latin alphanumerics only, so a text in any of the site's
+	// non-Latin locales reduces to nothing. Fall back to a hash of the original
+	// rather than emitting a bare prefix, which would collide with every other one.
+	return `${prefix}-${slug || hash(text)}`;
+}
+
+/** Short, stable, non-cryptographic digest — only needs to differ per input. */
+function hash(text: string): string {
+	let h = 0;
+	for (let i = 0; i < text.length; i += 1) {
+		h = (h * 31 + text.charCodeAt(i)) | 0;
+	}
+	return Math.abs(h).toString(36);
+}