/* ai-products.css: /ai catalogue and /ai/<slug> product pages (WS9, CHG-20261004-WS9-*).
 * Builds on hub.css (cm-hub__*). Tokens only. Every navy / photo band is an inset rounded
 * card (David 2026-10-04): the hero uses the shared card vars from templates/cmsmart/css/ui-cards.css
 * (--cm-card-inset / --cm-card-radius / --cm-card-gap); closing band and CTA reuse .cm-hub__band /
 * .cm-hub__cta, which ui-cards.css already turns into inset cards. */

/* ---- hero card ---- */
.cm-aip-hero {
	margin-inline: var(--cm-card-inset, var(--container-pad));
	margin-block: var(--cm-card-gap, var(--sp-24));
	border-radius: var(--cm-card-radius, var(--r-16));
	overflow: hidden;
	background: linear-gradient(135deg, var(--c-navy-500), var(--c-navy-600));
	color: var(--c-surface-0);
}
.cm-aip-hero__grid {
	display: grid;
	gap: var(--sp-32);
	align-items: center;
	padding: var(--sp-32) var(--sp-24);
}
.cm-aip-hero a:not(.cm-btn) { color: var(--c-surface-0); }
.cm-aip-hero .cm-hub__eyebrow,
.cm-aip-hero .cm-hub__eyebrow a { color: var(--c-accent-200); text-decoration: none; }
.cm-aip-hero .cm-hub__h1 { color: var(--c-surface-0); margin-bottom: var(--sp-8); }
.cm-aip-hero__tagline {
	margin: 0 0 var(--sp-12);
	font-size: var(--text-h4);
	font-weight: var(--fw-semibold);
	color: var(--c-accent-100);
}
.cm-aip-hero__intro { margin: 0 0 var(--sp-16); font-size: var(--text-lead); max-width: var(--measure); color: var(--c-surface-0); }
.cm-aip-hero .cm-hub__meta { color: var(--c-accent-100); margin-bottom: var(--sp-16); }
.cm-aip-hero .cm-btn--ghost { color: var(--c-surface-0) !important; border-color: var(--c-navy-200); }
.cm-aip-hero .cm-btn--ghost:hover { background: var(--c-navy-400); }
.cm-aip-frame {
	margin: 0;
	background: var(--c-surface-0);
	border-radius: var(--r-12);
	box-shadow: var(--shadow-3);
	overflow: hidden;
}
.cm-aip-frame img { display: block; width: 100%; height: auto; }
.cm-aip-frame figcaption {
	padding: var(--sp-8) var(--sp-12);
	font-size: var(--fs-13);
	color: var(--color-text-muted);
	background: var(--color-section);
}

/* ---- at a glance ---- */
.cm-aip-glance { padding: var(--sp-16) 0 0; }
.cm-aip-glance__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-12);
	margin: 0;
}
.cm-aip-glance__grid > div {
	padding: var(--sp-12) var(--sp-16);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-12);
}
.cm-aip-glance dt { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--ls-label); }
.cm-aip-glance dd { margin: var(--sp-2) 0 0; font-size: var(--fs-14); color: var(--color-heading); font-weight: var(--fw-semibold); }

/* ---- generic cards / grids ---- */
.cm-aip-grid { display: grid; gap: var(--sp-16); margin: 0; padding: 0; list-style: none; }
.cm-aip-card {
	padding: var(--sp-16) var(--sp-24);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-12);
	box-shadow: var(--shadow-1);
}
.cm-aip-card h3 { margin: 0 0 var(--sp-8); font-size: var(--text-h5); color: var(--color-heading); font-weight: var(--fw-semibold); }
.cm-aip-card p { margin: 0; font-size: var(--fs-14); color: var(--color-text); }
.cm-aip-note {
	margin: var(--sp-16) 0 0;
	padding: var(--sp-16) var(--sp-24);
	background: var(--c-brand-50);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--r-8);
}
.cm-aip-note strong { color: var(--color-heading); }
.cm-aip-lead { font-size: var(--text-lead); max-width: var(--measure); margin: 0 0 var(--sp-16); }
.cm-aip-split { display: grid; gap: var(--sp-32); align-items: start; }

/* ---- steps ---- */
.cm-aip-steps { counter-reset: aip; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-12); }
.cm-aip-steps li {
	counter-increment: aip;
	position: relative;
	padding: var(--sp-12) var(--sp-16) var(--sp-12) calc(var(--sp-16) + var(--sp-40));
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-12);
}
.cm-aip-steps li::before {
	content: counter(aip);
	position: absolute;
	left: var(--sp-12);
	top: var(--sp-12);
	width: var(--sp-24);
	height: var(--sp-24);
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--color-primary);
	color: var(--c-surface-0);
	font-size: var(--fs-13);
	font-weight: var(--fw-bold);
}

/* ---- value table ---- */
.cm-aip-tablewrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--r-12); background: var(--color-surface); }
.cm-aip-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.cm-aip-table th, .cm-aip-table td { padding: var(--sp-12) var(--sp-16); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.cm-aip-table th { background: var(--color-section); color: var(--color-heading); font-weight: var(--fw-semibold); white-space: nowrap; }
.cm-aip-table tr:last-child td { border-bottom: 0; }

/* ---- gallery ---- */
.cm-aip-gallery { display: grid; gap: var(--sp-16); margin: 0; padding: 0; list-style: none; }
.cm-aip-gallery figure { margin: 0; height: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-12); overflow: hidden; box-shadow: var(--shadow-1); }
.cm-aip-gallery a { display: block; background: var(--color-surface-sunken); }
.cm-aip-gallery img { display: block; width: 100%; height: auto; }
.cm-aip-gallery figcaption { padding: var(--sp-8) var(--sp-12); font-size: var(--fs-13); color: var(--color-text-muted); }

/* ---- plans ---- */
.cm-aip-plans { display: grid; gap: var(--sp-12); grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; list-style: none; }
.cm-aip-plan { position: relative; padding: var(--sp-16); text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-12); }
.cm-aip-plan--best { border: 2px solid var(--c-navy-500); padding-top: var(--sp-24); }
.cm-aip-plan__flag { position: absolute; top: calc(-1 * var(--sp-12)); left: var(--sp-16); padding: var(--sp-2) var(--sp-8); border-radius: var(--r-8); background: var(--c-navy-500); color: var(--c-surface-0); font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; }
.cm-aip-plan__name { margin: 0; font-weight: var(--fw-semibold); color: var(--color-heading); }
.cm-aip-plan__price { margin: var(--sp-4, 4px) 0; font-size: var(--text-h3); font-weight: var(--fw-bold); color: var(--color-heading); line-height: var(--lh-tight); }
.cm-aip-plan__price small { font-size: var(--fs-14); font-weight: var(--fw-normal); color: var(--color-text-muted); }
.cm-aip-plan__tokens { margin: 0; font-weight: var(--fw-semibold); color: var(--c-navy-500); font-size: var(--fs-14); }
.cm-aip-plan__per { margin: var(--sp-2) 0 0; font-size: var(--fs-13); color: var(--color-text-muted); }

/* ---- changelog ---- */
.cm-aip-log { list-style: none; margin: 0; padding: 0 0 0 var(--sp-16); border-left: 2px solid var(--color-border); display: grid; gap: var(--sp-24); }
.cm-aip-log li { position: relative; }
.cm-aip-log li::before { content: ""; position: absolute; left: calc(-1 * var(--sp-16) - 6px); top: var(--sp-8); width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); }
.cm-aip-log__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8); margin: 0 0 var(--sp-4, 4px); }
.cm-aip-log__ver { font-size: var(--text-h4); font-weight: var(--fw-bold); color: var(--color-heading); }
.cm-aip-log__date { font-size: var(--fs-13); color: var(--color-text-muted); }
.cm-aip-log h4 { margin: var(--sp-8) 0 var(--sp-2); font-size: var(--fs-13); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--color-text-muted); }
.cm-aip-log ul { margin: 0; padding-left: var(--sp-16); font-size: var(--fs-14); }

/* ---- catalogue cards (/ai) ---- */
.cm-aip-cat { display: grid; gap: var(--sp-24); margin: 0; padding: 0; list-style: none; }
.cm-aip-prod {
	display: grid;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--r-16);
	box-shadow: var(--shadow-2);
	overflow: hidden;
}
.cm-aip-prod__media { margin: 0; background: var(--color-surface-sunken); display: flex; align-items: center; justify-content: center; padding: var(--sp-16); }
.cm-aip-prod__media img { display: block; width: 100%; height: auto; border-radius: var(--r-8); border: 1px solid var(--color-border); background: var(--c-surface-0); }
.cm-aip-prod__body { padding: var(--sp-24); display: grid; gap: var(--sp-8); align-content: start; }
.cm-aip-prod__body h3 { margin: 0; font-size: var(--text-h3); line-height: var(--lh-heading); }
.cm-aip-prod__body h3 a { color: var(--color-heading); text-decoration: none; }
.cm-aip-prod__body h3 a:hover { color: var(--color-link-hover); }
.cm-aip-prod__tag { margin: 0; font-weight: var(--fw-semibold); color: var(--c-navy-500); }
.cm-aip-prod__body p { margin: 0; }
.cm-aip-prod__ul { margin: 0; padding-left: var(--sp-16); font-size: var(--fs-14); }

/* ---- tablet / desktop ---- */
@media (min-width: 640px) {
	.cm-aip-glance__grid { grid-template-columns: repeat(4, 1fr); }
	.cm-aip-grid--2, .cm-aip-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.cm-aip-gallery { grid-template-columns: repeat(2, 1fr); }
	.cm-aip-plans { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 900px) {
	.cm-aip-hero__grid { grid-template-columns: 1.05fr 1fr; padding: var(--sp-48) var(--sp-40); gap: var(--sp-40); }
	.cm-aip-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.cm-aip-split { grid-template-columns: 1.1fr 1fr; }
	.cm-aip-prod { grid-template-columns: 1fr 1.1fr; }
	.cm-aip-cat li:nth-child(even) .cm-aip-prod__media { order: 2; }
	.cm-aip-gallery--n3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.cm-aip-hero__grid { padding: var(--sp-24) var(--sp-16); }
	.cm-aip-card, .cm-aip-prod__body { padding: var(--sp-16); }
}

.cm-aip-fine { margin: var(--sp-16) 0 0; font-size: var(--fs-13); color: var(--color-text-muted); }
@media (min-width: 900px) { .cm-aip-split.cm-aip-split--one { grid-template-columns: 1fr; } }

/* ---- feature capture thumbnails + /ai card strip ---- */
.cm-aip-card--feat { display: grid; gap: var(--sp-8); align-content: start; }
.cm-aip-thumb { margin: 0 0 var(--sp-4, 4px); border: 1px solid var(--color-border); border-radius: var(--r-8); overflow: hidden; background: var(--color-surface-sunken); }
.cm-aip-thumb img { display: block; width: 100%; height: auto; }
.cm-aip-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); margin: var(--sp-4, 4px) 0; padding: 0; list-style: none; align-items: start; }
.cm-aip-strip li { border: 1px solid var(--color-border); border-radius: var(--r-8); overflow: hidden; background: var(--color-surface-sunken); }
.cm-aip-strip img { display: block; width: 100%; height: auto; }

/* ---- brand pass: horizontal feature cards, tall-card group, horizontal gallery cards, clips ---- */
.cm-aip-grid--feat { display: grid; gap: var(--sp-16); margin: 0; padding: 0; list-style: none; }
.cm-aip-card--feat { padding: 0; overflow: hidden; display: grid; gap: 0; align-content: stretch; }
.cm-aip-card--feat .cm-aip-thumb { margin: 0; border: 0; border-radius: 0; aspect-ratio: 3 / 2; background: var(--color-surface-sunken); }
.cm-aip-card--feat .cm-aip-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.cm-aip-card--feat .cm-aip-card__body { padding: var(--sp-16) var(--sp-24); }
.cm-aip-card--feat .cm-aip-card__body h3 { margin: 0 0 var(--sp-8); font-size: var(--text-h5); }

.cm-aip-tall { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-16); grid-template-columns: repeat(2, 1fr); }
.cm-aip-tallcard { position: relative; margin: 0; border-radius: var(--r-16); overflow: hidden; background: var(--c-navy-600); box-shadow: var(--shadow-2); }
.cm-aip-tallcard figure { margin: 0; aspect-ratio: 4 / 5; }
.cm-aip-tallcard figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-aip-tallcard__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-40) var(--sp-16) var(--sp-16); color: var(--c-surface-0); background: linear-gradient(to top, var(--c-navy-overlay-strong), var(--c-navy-overlay-soft) 60%, transparent); }
.cm-aip-tallcard__body h3, .cm-aip-tallcard__body h3 a { margin: 0 0 var(--sp-4, 4px); font-size: var(--text-h5); color: var(--c-surface-0); text-decoration: none; font-weight: var(--fw-semibold); }
.cm-aip-tallcard__body p { margin: 0; font-size: var(--fs-13); color: var(--c-accent-100); }
.cm-aip-tallcard__n { display: inline-grid; place-items: center; width: var(--sp-24); height: var(--sp-24); margin-bottom: var(--sp-8); border-radius: 50%; background: var(--color-primary); color: var(--c-surface-0); font-size: var(--fs-13); font-weight: var(--fw-bold); }

.cm-aip-hcards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-24); }
.cm-aip-hcard { display: grid; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-16); box-shadow: var(--shadow-1); overflow: hidden; }
.cm-aip-hcard figure { margin: 0; background: var(--color-surface-sunken); }
.cm-aip-hcard figure a { display: block; }
.cm-aip-hcard figure img { display: block; width: 100%; height: auto; }
.cm-aip-hcard__body { padding: var(--sp-24); align-self: center; }
.cm-aip-hcard__body h3 { margin: 0 0 var(--sp-8); font-size: var(--text-h4); color: var(--color-heading); }
.cm-aip-hcard__body p { margin: 0; }

.cm-aip-clips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-24); }
.cm-aip-clip { margin: 0; }
.cm-aip-clip__btn { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-16); overflow: hidden; cursor: pointer; background: var(--c-navy-600); box-shadow: var(--shadow-2); }
.cm-aip-clip__btn img { display: block; width: 100%; height: auto; }
.cm-aip-clip__play { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .2s; }
.cm-aip-clip__play::before { content: ""; width: var(--sp-48); height: var(--sp-48); border-radius: 50%; background: var(--color-primary); }
.cm-aip-clip__play::after { content: ""; position: absolute; margin-left: var(--sp-4, 4px); border-left: var(--sp-16) solid var(--c-surface-0); border-top: var(--sp-8) solid transparent; border-bottom: var(--sp-8) solid transparent; }
.cm-aip-clip__btn[aria-pressed="true"] .cm-aip-clip__play { opacity: 0; }
.cm-aip-clip__btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
.cm-aip-clip__cap { margin: var(--sp-8) 0 0; font-size: var(--fs-14); color: var(--color-text-muted); }

@media (min-width: 640px) {
	.cm-aip-grid--feat { grid-template-columns: repeat(2, 1fr); }
	.cm-aip-card--feat { grid-template-columns: 40% 1fr; }
	.cm-aip-card--feat .cm-aip-thumb { aspect-ratio: auto; min-height: 100%; }
	.cm-aip-clips { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.cm-aip-tall { grid-template-columns: repeat(4, 1fr); }
	.cm-aip-hcard { grid-template-columns: 1.3fr 1fr; }
	.cm-aip-hcards .cm-aip-hcard:nth-child(even) figure { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.cm-aip-clip__play { transition: none; }
}

/* ==========================================================================
 * WS18 luxury polish (CHG-20261005-WS18-01): real-photo backgrounds under a navy scrim,
 * calmer section rhythm, refined hairlines / elevation, one clear CTA per block.
 * Every dark band stays an inset rounded card (ui-cards.css); photos are decorative <img>
 * layers (.cm-aip-bg, view aiBg()) so they ship as 800/1600 srcset. Tokens only.
 * ========================================================================== */

/* photo layer + scrim: the card clips it (overflow:hidden already set by ui-cards.css / hero) */
.cm-aip .cm-aip-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	pointer-events: none;
}
.cm-aip-hero--photo,
.cm-aip-photoband,
.cm-aip-prod__media,
.cm-aip-more__media { position: relative; isolation: isolate; overflow: hidden; }
.cm-aip-hero--photo::after,
.cm-aip-photoband::after,
.cm-aip-prod__media::after,
.cm-aip-more__media::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cm-aip-hero--photo::after { background: linear-gradient(100deg, var(--c-lx-scrim-strong) 0%, var(--c-lx-scrim-strong) 34%, var(--c-lx-scrim-mid) 100%); }
.cm-aip-photoband::after { background: linear-gradient(180deg, var(--c-navy-overlay-band-1), var(--c-navy-overlay-band-2)); }
.cm-aip-photoband--split::after { background: linear-gradient(100deg, var(--c-lx-scrim-strong) 0%, var(--c-lx-scrim-strong) 40%, var(--c-lx-scrim-mid) 100%); }
.cm-aip-prod__media::after,
.cm-aip-more__media::after { background: linear-gradient(180deg, var(--c-lx-scrim-mid), var(--c-lx-scrim-soft)); }
.cm-aip-hero__grid,
.cm-aip-photoband > .cm-hub__wrap { position: relative; z-index: 1; }

/* hero: more air, quieter eyebrow, sharper frame */
.cm-aip-hero__grid { padding: var(--sp-60) var(--lx-hero-pad-x, var(--sp-24)); }
.cm-aip-hero .cm-hub__eyebrow { font-size: var(--lx-eyebrow-size); letter-spacing: var(--lx-eyebrow-track); text-transform: uppercase; font-weight: var(--fw-semibold); }
.cm-aip-hero .cm-hub__h1 { font-size: var(--text-h1); max-width: 24ch; letter-spacing: var(--ls-heading); }
.cm-aip-hero__intro { color: var(--c-lx-on-dark-muted); }
.cm-aip-hero .cm-hub__actions { margin-top: var(--sp-24); gap: var(--sp-16); }
.cm-aip-hero .cm-btn--ghost,
.cm-aip-photoband .cm-btn--ghost { border-color: var(--c-lx-on-dark-muted); border-style: solid; border-width: 1.5px; }
.cm-aip-hero .cm-btn--ghost:hover,
.cm-aip-photoband .cm-btn--ghost:hover { background: var(--c-lx-line-dark); }
.cm-aip-frame { border-radius: var(--lx-radius-media); box-shadow: var(--shadow-lx-3); border: 1px solid var(--c-lx-line-dark); }
.cm-aip-frame figcaption { background: var(--c-lx-ivory); }

/* section rhythm + warm ivory instead of flat grey */
.cm-aip .cm-hub__section { padding-block: var(--lx-section-y-tight); }
.cm-aip .cm-hub__section--alt { background: var(--c-lx-ivory); }
.cm-aip .cm-hub__head { max-width: var(--lx-head-max); margin-bottom: var(--lx-head-gap); }
.cm-aip-glance { padding-top: var(--sp-32); }
.cm-aip-glance__grid > div { border-color: var(--c-lx-line); border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); padding: var(--sp-16) var(--sp-20); }

/* cards: hairline + layered elevation, calm hover lift */
.cm-aip-card,
.cm-aip-hcard,
.cm-aip-steps li,
.cm-aip-plan { border-color: var(--c-lx-line); border-radius: var(--lx-radius-sm); }
.cm-aip-card,
.cm-aip-hcard { box-shadow: var(--shadow-lx-1); }
.cm-aip-plan--best { box-shadow: var(--shadow-lx-2); }
.cm-aip-note { border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-1); }
.cm-aip-tallcard,
.cm-aip-clip__btn { border-radius: var(--lx-radius-sm); box-shadow: var(--shadow-lx-2); }
.cm-aip-tallcard__body { padding-top: var(--sp-60); background: linear-gradient(to top, var(--c-lx-scrim-strong), var(--c-lx-scrim-mid) 65%, transparent); }
.cm-aip-tallcard__body p { color: var(--c-lx-on-dark-muted); }

/* /ai catalogue cards: photo-backed media pane with the real capture floating on it */
.cm-aip-cat { gap: var(--lx-grid-gap); }
.cm-aip-prod { border-color: var(--c-lx-line); border-radius: var(--lx-radius); box-shadow: var(--shadow-lx-1); }
.cm-aip-prod__media { padding: var(--sp-40) var(--sp-30); background: var(--c-navy-800); align-items: center; }
.cm-aip-prod__media a { position: relative; z-index: 1; display: block; width: 100%; }
.cm-aip-prod__media a img { border: 1px solid var(--c-lx-line-dark); border-radius: var(--r-12); box-shadow: var(--shadow-lx-3); }
.cm-aip-prod__body { padding: var(--sp-40) var(--sp-32); gap: var(--sp-12); }
.cm-aip-prod__body .cm-hub__meta { margin: 0; }
.cm-aip-prod__tag { color: var(--c-navy-500); font-size: var(--text-lead); line-height: var(--lh-tight); }
.cm-aip-prod .cm-hub__facts { margin: var(--sp-4) 0 0; padding-top: var(--sp-12); border-top: 1px solid var(--c-lx-line); }
.cm-aip-prod .cm-hub__facts dt { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--ls-label); }
.cm-aip-prod .cm-hub__facts dd { margin: var(--sp-2) 0 0; }
.cm-aip-prod .cm-hub__card-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-12) var(--sp-24); margin: var(--sp-8) 0 0; }
.cm-aip-prod .cm-btn--secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--lx-chip);
	padding: var(--sp-8) var(--sp-24);
	border: 1.5px solid var(--btn-secondary-border);
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--btn-secondary-text);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}
.cm-aip-prod .cm-btn--secondary:hover { background: var(--c-brand-50); }

/* "More Cmsmart AI products" cards on the product pages: photo + capture, never text-only */
.cm-aip-card--more { padding: 0; overflow: hidden; display: grid; align-content: start; }
.cm-aip-more__media { display: grid; place-items: center; padding: var(--sp-30) var(--sp-24); background: var(--c-navy-800); }
.cm-aip-more__media img:not(.cm-aip-bg) { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-height: calc(var(--sp-96) * 2); object-fit: cover; object-position: top left; border: 1px solid var(--c-lx-line-dark); border-radius: var(--r-12); box-shadow: var(--shadow-lx-3); background: var(--c-surface-0); }
.cm-aip-card--more .cm-aip-card__body { padding: var(--sp-24); display: grid; gap: var(--sp-8); }
.cm-aip-card--more h3 { margin: 0; font-size: var(--text-h4); }
.cm-aip-card--more h3 a { color: var(--color-heading); text-decoration: none; }
.cm-aip-card--more .cm-hub__more { color: var(--color-link); }

/* photo-backed bands + closing CTA (inset cards, centred actions for centred copy) */
.cm-hub__band.cm-aip-photoband,
.cm-hub__cta.cm-aip-photoband { padding-block: var(--lx-section-y-tight); }
.cm-aip-photoband .cm-hub__h2 { font-size: var(--text-h2); letter-spacing: var(--ls-heading); }
.cm-aip-photoband p,
.cm-hub__band.cm-aip-photoband p,
.cm-hub__cta.cm-aip-photoband p { color: var(--c-lx-on-dark-muted); }
.cm-aip-photoband .cm-hub__actions { margin-top: var(--sp-24); gap: var(--sp-16); }
.cm-aip-photoband .cm-btn--primary { box-shadow: var(--shadow-lx-cta); }
.cm-aip-photoband .cm-hub__shot img { border-radius: var(--lx-radius-media); box-shadow: var(--shadow-lx-3); border: 1px solid var(--c-lx-line-dark); }

@media (min-width: 900px) {
	.cm-aip-prod { grid-template-columns: 1fr 1.05fr; }
	.cm-aip-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
@media (min-width: 992px) {
	.cm-aip .cm-aip-hero__grid > .cm-aip-frame img { object-position: center; }
}
@media (max-width: 640px) {
	.cm-aip-hero__grid { padding: var(--sp-32) var(--sp-20); }
	.cm-aip-prod__media { padding: var(--sp-24) var(--sp-16); }
	.cm-aip-prod__body { padding: var(--sp-24) var(--sp-20); }
	.cm-aip-hero .cm-hub__actions .cm-btn,
	.cm-aip-photoband .cm-hub__actions .cm-btn { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
	.cm-aip-prod,
	.cm-aip-card,
	.cm-aip-tallcard { transition: box-shadow var(--lx-dur-hover) var(--lx-ease), transform var(--lx-dur-hover) var(--lx-ease); }
	.cm-aip-prod:hover,
	.cm-aip-card--more:hover,
	.cm-aip-tallcard:hover { transform: translateY(calc(-1 * var(--sp-4))); box-shadow: var(--shadow-lx-2); }
}