/* Hub pages (/platform, /ai, /ai/<slug>, /products, /community/release-notes,
 * /ecommerce/b2b-web-to-print). Tokens only: templates/cmsmart/css/tokens.css.
 * Mobile-first; buttons reuse the canonical .cm-btn--primary/--secondary/--ghost. */

.cm-hub {
	display: block;
	color: var(--color-text);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	background: var(--color-bg);
	overflow-wrap: break-word;
}
.cm-hub *,
.cm-hub *::before,
.cm-hub *::after { box-sizing: border-box; }
.cm-hub img { max-width: 100%; height: auto; }
.cm-hub a { color: var(--color-link); }
.cm-hub a:hover { color: var(--color-link-hover); }

.cm-hub__wrap {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-pad);
}
.cm-hub__narrow { max-width: calc(var(--measure) + 2 * var(--container-pad)); }

/* ---- hero ---- */
.cm-hub__hero {
	background: linear-gradient(135deg, var(--c-navy-500), var(--c-navy-600));
	color: var(--c-surface-0);
	padding: var(--sp-section-tight) 0;
}
.cm-hub__hero--compact { padding: var(--sp-40) 0; }
.cm-hub__hero a:not(.cm-btn) { color: var(--c-surface-0); text-decoration: underline; }
.cm-hub__hero-grid { display: grid; gap: var(--sp-32); align-items: center; }
.cm-hub__eyebrow {
	margin: 0 0 var(--sp-8);
	font-size: var(--fs-13);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-accent-200);
}
.cm-hub__hero .cm-hub__eyebrow a { color: var(--c-accent-200); text-decoration: none; }
.cm-hub__h1 {
	margin: 0 0 var(--sp-16);
	font-size: var(--text-h1);
	line-height: var(--lh-heading);
	font-weight: var(--fw-bold);
	color: var(--c-surface-0);
	max-width: 22ch;
}
.cm-hub__answer {
	margin: 0 0 var(--sp-24);
	font-size: var(--text-lead);
	max-width: var(--measure);
	color: var(--c-surface-0);
}
.cm-hub__hero .cm-hub__meta { color: var(--c-accent-100); }
.cm-hub__hero .cm-btn--ghost,
.cm-hub__cta .cm-btn--ghost {
	color: var(--c-surface-0) !important;
	border-color: var(--c-navy-200);
}
.cm-hub__hero .cm-btn--ghost:hover,
.cm-hub__cta .cm-btn--ghost:hover { background: var(--c-navy-400); }

/* ---- sections ---- */
.cm-hub__section { padding: var(--sp-section-tight) 0; }
.cm-hub__section--alt { background: var(--color-section); }
.cm-hub__h2 {
	margin: 0 0 var(--sp-12);
	font-size: var(--text-h2);
	line-height: var(--lh-heading);
	font-weight: var(--fw-bold);
	color: var(--color-heading);
}
.cm-hub__h3 {
	margin: 0 0 var(--sp-8);
	font-size: var(--text-h4);
	line-height: var(--lh-heading);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}
.cm-hub__h3 a { color: inherit; text-decoration: none; }
.cm-hub__h3 a:hover { color: var(--color-link); }
.cm-hub__lede { margin: 0 0 var(--sp-24); max-width: var(--measure); color: var(--color-text); }
.cm-hub__muted { color: var(--color-text-muted); }
.cm-hub__more { font-weight: var(--fw-semibold); text-decoration: none; }
.cm-hub__split { display: grid; gap: var(--sp-32); align-items: start; }

.cm-hub__actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); }
.cm-hub__actions--center { justify-content: center; }
.cm-hub__actions .cm-btn { text-align: center; }

/* ---- meta, badges ---- */
.cm-hub__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-8) var(--sp-12);
	margin: 0 0 var(--sp-12);
	font-size: var(--fs-14);
	color: var(--color-text-muted);
}
.cm-hub__badge {
	display: inline-block;
	padding: var(--sp-2) var(--sp-10);
	border-radius: var(--r-pill);
	font-size: var(--fs-12);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-body);
	background: var(--c-accent-50);
	color: var(--c-accent-800);
}
.cm-hub__badge--ok { background: var(--c-success-bg); color: var(--c-success); }
.cm-hub__badge--dev { background: var(--c-brand-50); color: var(--c-brand-800); }
.cm-hub__badge--custom { background: var(--color-surface-sunken); color: var(--color-heading); }

/* ---- screenshots ---- */
.cm-hub__shot { margin: 0; }
.cm-hub__shot img {
	display: block;
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--r-8);
	box-shadow: var(--shadow-2);
	background: var(--color-surface);
}
.cm-hub__shot figcaption { margin-top: var(--sp-8); font-size: var(--fs-13); color: var(--color-text-muted); }
.cm-hub__hero .cm-hub__shot figcaption { color: var(--c-accent-100); }
.cm-hub__shot--wide { margin-top: var(--sp-16); }
.cm-hub__phones {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-12);
	max-width: var(--measure);
}
.cm-hub__shot--phone img { border-radius: var(--r-16); }

/* ---- platform feature rows ---- */
.cm-hub__features { display: grid; gap: var(--sp-48); }
.cm-hub__feature { display: grid; gap: var(--sp-20); align-items: start; scroll-margin-top: var(--sticky-top-offset); }
.cm-hub__feature-copy p { margin: 0 0 var(--sp-12); }
.cm-hub__feature-shots { display: grid; gap: var(--sp-16); }

/* ---- process steps ---- */
.cm-hub__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-12);
}
.cm-hub__step {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-2) var(--sp-12);
	padding: var(--sp-16);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-8);
}
.cm-hub__step-num {
	grid-row: span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sp-32);
	height: var(--sp-32);
	border-radius: var(--r-circle);
	background: var(--c-navy-500);
	color: var(--c-surface-0);
	font-weight: var(--fw-bold);
	font-size: var(--fs-14);
}
.cm-hub__step-title { font-weight: var(--fw-semibold); color: var(--color-heading); }
.cm-hub__step-text { font-size: var(--fs-14); color: var(--color-text-muted); }

/* ---- cards ---- */
.cm-hub__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-16);
}
.cm-hub__card {
	margin: 0;
	padding: var(--sp-20);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	display: flex;
	flex-direction: column;
}
.cm-hub__card p { margin: 0 0 var(--sp-12); }
.cm-hub__card--custom { background: var(--color-section); box-shadow: none; }
.cm-hub__card-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-8) var(--sp-16);
	margin: auto 0 0;
	padding-top: var(--sp-8);
	font-size: var(--fs-14);
	font-weight: var(--fw-semibold);
}
.cm-hub__card-links a { text-decoration: none; }

.cm-hub__facts { margin: 0 0 var(--sp-12); display: grid; gap: var(--sp-8); font-size: var(--fs-14); }
.cm-hub__facts div { display: grid; gap: var(--sp-2); }
.cm-hub__facts dt { font-weight: var(--fw-semibold); color: var(--color-heading); }
.cm-hub__facts dd { margin: 0; color: var(--color-text); }
.cm-hub__facts--stack {
	padding: var(--sp-20);
	background: var(--color-section);
	border: 1px solid var(--color-border);
	border-radius: var(--r-8);
}

.cm-hub__aside {
	padding: var(--sp-20);
	background: var(--color-section);
	border: 1px solid var(--color-border);
	border-radius: var(--r-8);
}
.cm-hub__section--alt .cm-hub__aside { background: var(--color-surface); }
.cm-hub__aside-title { margin: 0 0 var(--sp-8); font-weight: var(--fw-semibold); color: var(--color-heading); }

.cm-hub__list { margin: 0 0 var(--sp-16); padding-left: var(--sp-20); }
.cm-hub__list li { margin-bottom: var(--sp-8); }
.cm-hub__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-8); }
.cm-hub__links--inline { display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-20); }
.cm-hub__links--center { justify-content: center; margin-top: var(--sp-24); }

/* ---- products ---- */
.cm-hub__products { display: grid; gap: var(--sp-20); }
.cm-hub__product {
	display: flex;
	flex-direction: column;
	padding: var(--sp-24);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	scroll-margin-top: var(--sticky-top-offset);
}
.cm-hub__product--live { border-top: var(--sp-4) solid var(--c-brand-500); }
.cm-hub__product--dev { border-top: var(--sp-4) solid var(--c-navy-300); }
.cm-hub__product > p { margin: 0 0 var(--sp-12); }
.cm-hub__product-full { font-weight: var(--fw-semibold); color: var(--color-heading); }
.cm-hub__product .cm-hub__actions { margin: var(--sp-8) 0 var(--sp-12); }
.cm-hub__paths {
	list-style: none;
	margin: 0 0 var(--sp-12);
	padding: 0;
	display: grid;
	gap: var(--sp-8);
	font-size: var(--fs-14);
}
.cm-hub__paths li { display: grid; grid-template-columns: var(--sp-96) 1fr; gap: var(--sp-8); }
.cm-hub__path-label { font-weight: var(--fw-semibold); color: var(--color-heading); }

/* ---- table (B2B capabilities) ---- */
.cm-hub__tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cm-hub__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-8);
	font-size: var(--fs-14);
}
.cm-hub__table th,
.cm-hub__table td {
	padding: var(--sp-12);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--color-border);
}
.cm-hub__table thead th { background: var(--color-surface-sunken); color: var(--color-heading); font-weight: var(--fw-semibold); }
.cm-hub__table tbody th { font-weight: var(--fw-medium); color: var(--color-heading); }

/* Phones: stack each capability row as a card instead of scrolling sideways. */
@media (max-width: 640px) {
	.cm-hub__tablewrap { overflow-x: visible; }
	.cm-hub__table,
	.cm-hub__table tbody,
	.cm-hub__table tr,
	.cm-hub__table th,
	.cm-hub__table td { display: block; width: 100%; }
	.cm-hub__table { border: 0; background: transparent; }
	.cm-hub__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.cm-hub__table tr {
		margin-bottom: var(--sp-12);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--r-8);
	}
	.cm-hub__table tbody th { font-weight: var(--fw-semibold); }
	.cm-hub__table td { padding-top: 0; }
	.cm-hub__table tr > :last-child { border-bottom: 0; }
	.cm-hub__table td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: var(--sp-4);
		font-size: var(--fs-12);
		font-weight: var(--fw-semibold);
		color: var(--color-text-muted);
		text-transform: uppercase;
	}
}

/* ---- release notes ---- */
.cm-hub__notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-16); }
.cm-hub__note {
	padding: var(--sp-20);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-left: var(--sp-4) solid var(--c-accent-600);
	border-radius: var(--r-8);
}
.cm-hub__note p { margin: 0 0 var(--sp-8); }

/* ---- FAQ ---- */
.cm-hub__faq {
	border-bottom: 1px solid var(--color-border);
	padding: var(--sp-12) 0;
}
.cm-hub__faq summary {
	cursor: pointer;
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
	list-style-position: outside;
}
.cm-hub__faq p { margin: var(--sp-8) 0 0; }

/* ---- closing CTA band ---- */
.cm-hub__cta {
	background: var(--c-navy-500);
	color: var(--c-surface-0);
	padding: var(--sp-section-tight) 0;
	text-align: center;
}
.cm-hub__cta .cm-hub__h2 { color: var(--c-surface-0); }
.cm-hub__cta p { margin: 0 auto var(--sp-20); max-width: var(--measure); }
.cm-hub__cta .cm-hub__links a { color: var(--c-surface-0); }

/* ---- trust block spacing when embedded ---- */
.cm-hub .cm-trust { margin: 0; }

/* ---- tablet / desktop ---- */
@media (min-width: 768px) {
	.cm-hub__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cm-hub__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cm-hub__feature-shots--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cm-hub__actions--end { justify-content: flex-start; }
}
@media (min-width: 992px) {
	.cm-hub__hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
	.cm-hub__split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
	.cm-hub__feature { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sp-32); }
	.cm-hub__products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cm-hub__cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cm-hub__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cm-hub__actions--end { justify-content: flex-end; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
	.cm-hub .cm-btn { transition: none; transform: none !important; }
}

/* ======================================================================
 * Solution-page anatomy (12-SPEC): centred section heads, image cards,
 * image/text rows, a navy band and a product gallery, so the hub pages read
 * like /webtoprint and the plugin page instead of a text document.
 * Tokens only; no new colours or fonts.
 * ==================================================================== */

/* ---- centred section head with a one-line subtitle ---- */
.cm-hub__head {
	max-width: var(--measure);
	margin: 0 auto var(--sp-32);
	text-align: center;
}
.cm-hub__head .cm-hub__h2 { margin-bottom: var(--sp-8); }
.cm-hub__head p { margin: 0; color: var(--color-text-muted); font-size: var(--text-lead); }
.cm-hub__lede--center { margin-left: auto; margin-right: auto; text-align: center; }
.cm-hub__phones { margin: 0 auto; }
.cm-hub__band .cm-hub__head p,
.cm-hub__cta .cm-hub__head p { color: var(--c-accent-100); }

/* ---- hero visual ---- */
.cm-hub__hero .cm-hub__shot img { border-color: var(--c-navy-400); box-shadow: var(--shadow-3); }
.cm-hub__shot--flat img { box-shadow: none; }
.cm-hub__shot--pad img { padding: var(--sp-12); }

/* ---- image cards ---- */
.cm-hub__mcards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-20);
}
.cm-hub__mcard {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
}
.cm-hub__mcard-media {
	margin: 0;
	aspect-ratio: 16 / 9;
	background: var(--color-section);
	border-bottom: 1px solid var(--color-border);
	overflow: hidden;
}
.cm-hub__mcard-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cm-hub__mcard-media--contain { padding: var(--sp-12); }
.cm-hub__mcard-media--contain img { object-fit: contain; object-position: center; }
.cm-hub__mcard-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--sp-20);
}
.cm-hub__mcard-body p { margin: 0 0 var(--sp-12); }
.cm-hub__mcard--custom { background: var(--color-section); box-shadow: none; }

/* ---- image / text rows (alternating on desktop) ---- */
.cm-hub__rows { display: grid; gap: var(--sp-48); }
.cm-hub__row { display: grid; gap: var(--sp-24); align-items: center; scroll-margin-top: var(--sticky-top-offset); }
.cm-hub__row-copy .cm-hub__h3 { font-size: var(--text-h3); margin-bottom: var(--sp-12); }
.cm-hub__row-copy p { margin: 0 0 var(--sp-12); }
.cm-hub__row-copy .cm-hub__meta { margin-bottom: var(--sp-8); }

/* ---- navy band with a visual ---- */
.cm-hub__band {
	background: linear-gradient(135deg, var(--c-navy-500), var(--c-navy-600));
	color: var(--c-surface-0);
	padding: var(--sp-section-tight) 0;
}
.cm-hub__band .cm-hub__h2,
.cm-hub__band .cm-hub__h3 { color: var(--c-surface-0); }
.cm-hub__band p { color: var(--c-surface-0); }
.cm-hub__band a:not(.cm-btn) { color: var(--c-surface-0); text-decoration: underline; }
.cm-hub__band .cm-btn--ghost { color: var(--c-surface-0) !important; border-color: var(--c-navy-200); }
.cm-hub__band .cm-btn--ghost:hover { background: var(--c-navy-400); }
.cm-hub__band .cm-hub__checks li::before { color: var(--c-accent-200); }
.cm-hub__band-grid { display: grid; gap: var(--sp-32); align-items: center; }
.cm-hub__band .cm-hub__shot img { border-color: var(--c-navy-400); }

/* ---- product gallery ---- */
.cm-hub__gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-16);
}
.cm-hub__gallery figure { margin: 0; text-align: center; }
.cm-hub__gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--color-border);
	border-radius: var(--r-12);
	background: var(--color-section);
}
.cm-hub__gallery figcaption { margin-top: var(--sp-8); font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--color-heading); }

/* ---- check list ---- */
.cm-hub__checks { list-style: none; margin: 0 0 var(--sp-16); padding: 0; display: grid; gap: var(--sp-10); }
.cm-hub__checks li { position: relative; padding-left: var(--sp-30); }
.cm-hub__checks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	width: var(--sp-20);
	text-align: center;
	font-weight: var(--fw-bold);
	color: var(--c-success);
}

/* ---- numbered steps with a screenshot beside them ---- */
.cm-hub__howto { display: grid; gap: var(--sp-32); align-items: start; }
.cm-hub__howto ol { margin: 0; padding: 0; list-style: none; counter-reset: cm-howto; display: grid; gap: var(--sp-16); }
.cm-hub__howto ol li {
	counter-increment: cm-howto;
	position: relative;
	padding: var(--sp-16) var(--sp-16) var(--sp-16) calc(var(--sp-40) + var(--sp-16));
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-8);
}
.cm-hub__howto ol li::before {
	content: counter(cm-howto);
	position: absolute;
	left: var(--sp-16);
	top: var(--sp-16);
	width: var(--sp-32);
	height: var(--sp-32);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-circle);
	background: var(--c-brand-500);
	color: var(--c-surface-0);
	font-weight: var(--fw-bold);
	font-size: var(--fs-14);
}

/* ---- release notes: list + sticky "how to update" rail ---- */
.cm-hub__notes-layout { display: grid; gap: var(--sp-32); align-items: start; }
.cm-hub__note--thumb { display: grid; gap: var(--sp-16); }
.cm-hub__note-thumb { margin: 0; }
.cm-hub__note-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border: 1px solid var(--color-border);
	border-radius: var(--r-8);
	background: var(--color-section);
}
.cm-hub__note--latest { border-left-color: var(--c-brand-500); box-shadow: var(--card-shadow); }
.cm-hub__rail { display: grid; gap: var(--sp-16); }
.cm-hub__product-media {
	margin: calc(-1 * var(--sp-24)) calc(-1 * var(--sp-24)) var(--sp-16);
	aspect-ratio: 16 / 10;
	background: var(--color-section);
	border-bottom: 1px solid var(--color-border);
	overflow: hidden;
}
.cm-hub__product-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-hub__gallery-cta { margin: var(--sp-24) 0 0; }
.cm-hub__rail .cm-hub__aside p { margin: 0 0 var(--sp-12); }

@media (min-width: 768px) {
	.cm-hub__mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cm-hub__gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cm-hub__note--thumb { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
@media (min-width: 992px) {
	.cm-hub__mcards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cm-hub__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-48); }
	.cm-hub__row:nth-child(even) .cm-hub__row-media { order: 2; }
	.cm-hub__band-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-48); }
	.cm-hub__howto { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
	.cm-hub__notes-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
	.cm-hub__rail { position: sticky; top: var(--sticky-top-offset); }
}

/* ======================================================================
 * Ecommerce Projects (25-SPEC): photo hero/band variants, team role cards.
 * Tokens only; reuses .cm-hub__cards / .cm-hub__mcards / .cm-hub__row /
 * .cm-hub__steps / .cm-hub__band for everything else on the page.
 * ==================================================================== */

/* ---- photo hero (navy overlay over --cm-hero-bg, set inline per page) ---- */
.cm-hub__hero--photo {
	background-image: linear-gradient(180deg, var(--c-navy-overlay-band-1), var(--c-navy-overlay-band-2)), var(--cm-hero-bg);
	background-size: cover;
	background-position: center;
}
@media (max-width: 640px) {
	.cm-hub__hero--photo {
		background-image: linear-gradient(180deg, var(--c-navy-overlay-band-1), var(--c-navy-overlay-band-2)), var(--cm-hero-bg-sm, var(--cm-hero-bg));
	}
}

/* ---- photo band (navy overlay over --cm-band-bg, set inline per page) ---- */
.cm-hub__band--photo {
	background-image: linear-gradient(180deg, var(--c-navy-overlay-band-1), var(--c-navy-overlay-band-2)), var(--cm-band-bg);
	background-size: cover;
	background-position: center;
}

/* ---- team role cards: icon tile (AM/PM) or real photo (BA/Dev & QA) ---- */
.cm-hub__roles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-24);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cm-hub__role {
	margin: 0;
	padding: var(--sp-20);
	text-align: center;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
}
.cm-hub__role-icon,
.cm-hub__role-photos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	margin: 0 0 var(--sp-12);
}
.cm-hub__role-icon {
	width: 84px;
	height: 84px;
	margin-left: auto;
	margin-right: auto;
	border-radius: var(--r-circle);
	background: var(--color-section);
	color: var(--c-navy-500);
	box-shadow: 0 0 0 3px var(--c-surface-0), 0 0 0 5px var(--c-navy-200);
}
.cm-hub__role-photo {
	width: 84px;
	height: 84px;
	border-radius: var(--r-circle);
	object-fit: cover;
	box-shadow: 0 0 0 3px var(--c-surface-0), 0 0 0 5px var(--c-brand-200);
}
.cm-hub__role-photos .cm-hub__role-photo + .cm-hub__role-photo { margin-left: calc(-1 * var(--sp-16)); }
.cm-hub__role-title { margin: 0 0 var(--sp-4); font-weight: var(--fw-semibold); color: var(--color-heading); }
.cm-hub__role-text { margin: 0; font-size: var(--fs-14); color: var(--color-text-muted); }

/* ---- volumes band stats (shown on .cm-hub__band--photo) ---- */
.cm-hub__volstats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-24);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	text-align: center;
}
.cm-hub__volstats li { display: grid; gap: var(--sp-4); }
.cm-hub__volnum { font-size: var(--fs-40); font-weight: var(--fw-bold); color: var(--c-surface-0); }
.cm-hub__vollabel { font-size: var(--fs-14); color: var(--c-accent-100); }
.cm-hub__volnote {
	margin: var(--sp-24) auto 0;
	max-width: var(--measure);
	font-size: var(--fs-13);
	color: var(--c-accent-100);
	text-align: center;
}

@media (min-width: 768px) {
	.cm-hub__roles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cm-hub__volstats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Owner 2026-10-02: buttons in sentence case, same as project/service detail. */
.cm-hub .cm-btn { text-transform: none; letter-spacing: 0; }

/* ---- delivery-team strip: photo + job title only (no names) ---- */
.cm-hub__strip {
	list-style: none;
	margin: var(--sp-32) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sp-16);
}
.cm-hub__strip-item { margin: 0; text-align: center; }
.cm-hub__strip-photo {
	display: block;
	width: 100%;
	max-width: 120px;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0 auto var(--sp-8);
	object-fit: cover;
	border-radius: var(--r-circle);
	border: 2px solid var(--color-border);
	background: var(--color-section);
}
.cm-hub__strip-title { display: block; font-size: var(--fs-14); color: var(--color-text-muted); }
@media (max-width: 640px) {
	.cm-hub__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.cm-hub__strip { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}