/* 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; }
}