/* ==========================================================================
 * Community portal (WS17, 37-SPEC, David 2026-10-05). Tokens only.
 * Personas (bylines, author box, team pages), CTAs (service = primary, free plugin = soft),
 * compact newsletter, post cards, portal home and hubs. Loaded by views/community/tmpl/default.php.
 * ========================================================================== */

/* One calm page background (WS21 --color-page): community wrappers are never white bands;
   white stays on card surfaces only. */
.bg-white,
#main-wapper,
.uk-container-tuto-con,
.cm-related-band,
.cm-portal { background: var(--color-page); }

/* ---------- persona byline on cards ---------- */
.cm-pbyline { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-13); color: var(--c-ink-500); line-height: 1.3; }
.cm-pbyline__img { flex: none; display: block; width: var(--cm-avatar-sm); height: var(--cm-avatar-sm); border-radius: var(--r-circle); overflow: hidden; background: var(--c-lx-sand); }
.cm-pbyline__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cm-pbyline__txt a { color: var(--c-navy-800); font-weight: var(--fw-semibold); text-decoration: none; }
.cm-pbyline__txt a:hover { text-decoration: underline; }
.meta-info .cm-pbyline { margin: var(--sp-4) 0; }

/* ---------- compact newsletter card (David: about 120 px tall on desktop, one row) ---------- */
.cm-nl {
	display: flex; align-items: center; gap: var(--sp-16) var(--sp-24); flex-wrap: wrap;
	margin: var(--sp-24) 0; padding: var(--sp-16) var(--sp-20);
	background: var(--c-brand-50); border: 1px solid var(--c-lx-line); border-radius: var(--r-16);
}
.cm-nl__value { flex: 1 1 16rem; margin: 0; font-size: var(--fs-14); line-height: 1.45; color: var(--c-ink-700); }
.cm-nl__value strong { display: block; color: var(--c-navy-900); font-size: var(--fs-15); }
.cm-nl__form { flex: 2 1 26rem; display: flex; gap: var(--sp-8); margin: 0; }
.cm-nl__form input[type="text"],
.cm-nl__form input[type="email"] {
	flex: 1 1 0; min-width: 0; min-height: var(--btn-min-h); margin: 0; padding: 0 var(--sp-12);
	border: 1px solid var(--input-border); border-radius: var(--r-pill); background: var(--c-surface-0); font-size: var(--fs-14);
}
.cm-nl__form input:focus { outline: none; border-color: var(--input-border-focus); box-shadow: var(--shadow-focus); }
.cm-nl__btn {
	flex: none; min-height: var(--btn-min-h); padding: 0 var(--sp-20); border: 1px solid var(--c-navy-800); border-radius: var(--r-pill);
	background: var(--c-surface-0); color: var(--c-navy-800); font-weight: var(--fw-semibold); font-size: var(--fs-14); cursor: pointer;
}
.cm-nl__btn:hover { background: var(--c-navy-800); color: var(--c-surface-0); }
.cm-nl__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 767px) {
	.cm-nl { padding: var(--sp-16); }
	.cm-nl__form { flex-direction: column; flex-basis: 100%; }
	.cm-nl__btn { width: 100%; }
}

/* ---------- free plugin card (secondary, soft) ---------- */
.cm-plug {
	display: grid; grid-template-columns: var(--cm-plug-media) 1fr auto; align-items: center; gap: var(--sp-16) var(--sp-20);
	margin: var(--sp-24) 0; padding: var(--sp-12) var(--sp-20) var(--sp-12) var(--sp-12);
	background: var(--c-surface-0); border: 1px solid var(--c-lx-line); border-radius: var(--r-16); box-shadow: var(--shadow-lx-1);
}
.cm-plug__media { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-12); overflow: hidden; background: var(--c-lx-sand); }
.cm-plug__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.cm-plug__eyebrow { margin: 0; font-size: var(--fs-12); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-brand-600); font-weight: var(--fw-semibold); }
.cm-plug__title { margin: var(--sp-2) 0 0; font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-navy-900); line-height: 1.3; }
.cm-plug__text { margin: var(--sp-4) 0 0; font-size: var(--fs-14); line-height: 1.45; color: var(--c-ink-500); }
.post-content .cm-plug p { margin-bottom: 0; }
.cm-plug__btn { white-space: nowrap; min-height: var(--btn-min-h); display: inline-flex; align-items: center; padding: 0 var(--sp-20); border: 1px solid var(--c-navy-800); border-radius: var(--r-pill); color: var(--c-navy-800) !important; font-weight: var(--fw-semibold); text-decoration: none !important; }
.cm-plug__btn:hover { background: var(--c-navy-800); color: var(--c-surface-0) !important; }
@media (max-width: 767px) {
	.cm-plug { grid-template-columns: var(--cm-thumb-xs) 1fr; padding: var(--sp-12); }
	.cm-plug__btn { grid-column: 1 / -1; justify-content: center; }
}

/* ---------- service CTA (primary) ---------- */
.cm-svc {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-16) var(--sp-24);
	margin: var(--sp-32) 0; padding: var(--sp-24) var(--sp-24);
	background: var(--c-surface-0); border: 1px solid var(--c-lx-line); border-radius: var(--r-16); box-shadow: var(--shadow-lx-1);
}
.cm-svc__body { flex: 1 1 20rem; }
.cm-svc__eyebrow { margin: 0; font-size: var(--fs-12); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-brand-600); font-weight: var(--fw-semibold); }
.cm-svc__title { margin: var(--sp-4) 0 0; font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--fw-semibold); color: var(--c-navy-900); line-height: 1.25; }
.cm-svc__text { margin: var(--sp-8) 0 0; font-size: var(--fs-15); line-height: 1.5; color: var(--c-ink-700); }
.post-content .cm-svc p { margin-bottom: 0; }
.cm-svc__actions { display: flex; align-items: center; gap: var(--sp-16); flex-wrap: wrap; }
.cm-svc__btn { text-decoration: none !important; }
.cm-svc__link { font-size: var(--fs-14); color: var(--c-navy-800) !important; font-weight: var(--fw-semibold); }

/* ---------- end-of-post author box (expert card style, community-scoped) ---------- */
.cm-abox {
	display: grid; grid-template-columns: var(--cm-abox-media) 1fr; gap: var(--sp-20); align-items: start;
	margin: var(--sp-32) 0; padding: var(--sp-16);
	background: var(--c-surface-0); border: 1px solid var(--c-lx-line); border-radius: var(--r-16); box-shadow: var(--shadow-lx-1);
}
.cm-abox__media { display: block; aspect-ratio: 4 / 5; border-radius: var(--r-12); overflow: hidden; background: var(--c-navy-500); }
.cm-abox__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cm-abox__eyebrow { margin: 0; font-size: var(--fs-12); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-ink-500); }
.cm-abox__role { margin: var(--sp-4) 0 0; font-family: var(--font-heading); font-size: var(--fs-18); font-weight: var(--fw-semibold); }
.cm-abox__role a { color: var(--c-navy-900); text-decoration: none; }
.cm-abox__line { margin: var(--sp-8) 0 0; font-size: var(--fs-14); line-height: 1.5; color: var(--c-ink-700); }
.cm-abox__chips, .cm-xcard__chips { list-style: none; margin: var(--sp-12) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.cm-abox__chips li, .cm-xcard__chips--light li { margin: 0; padding: var(--sp-2) var(--sp-8); font-size: var(--fs-12); border: 1px solid var(--c-lx-line); border-radius: var(--r-pill); background: var(--c-surface-50); color: var(--c-ink-700); }
.cm-abox__rev { margin: var(--sp-12) 0 0; font-size: var(--fs-13); color: var(--c-ink-500); }
.cm-abox__more { display: inline-block; margin-top: var(--sp-12); font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-navy-800); }
.post-wrap .cm-abox p { margin-bottom: 0; }
@media (max-width: 560px) { .cm-abox { grid-template-columns: var(--cm-thumb-xs) 1fr; gap: var(--sp-12); } }

/* ---------- team pages: expert cards (same language as the approved .cm-hub__pcard--exp) ---------- */
.cm-portal__wrap { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.cm-portal__crumbs { padding-top: var(--sp-16); }
.cm-portal__sec { padding-top: var(--sp-48); }
.cm-eyebrow-lx { margin: 0; font-size: var(--lx-eyebrow-size); letter-spacing: var(--lx-eyebrow-track); text-transform: uppercase; color: var(--c-brand-600); font-weight: var(--fw-semibold); }
.cm-teamhero { padding-top: var(--sp-32); padding-bottom: var(--sp-32); }
.cm-teamhero__h1, .cm-xprofile__h1 { margin: var(--sp-8) 0 0; font-family: var(--font-heading); font-size: var(--text-h1); font-weight: var(--fw-semibold); color: var(--c-navy-900); line-height: var(--lh-heading); text-wrap: balance; }
.cm-teamhero__lede { max-width: var(--lx-lede-measure); margin: var(--sp-12) 0 0; font-size: var(--text-lead); color: var(--c-ink-500); line-height: 1.55; }
.cm-xgrid { list-style: none; margin: 0; padding: 0 0 var(--sp-48); display: grid; gap: var(--sp-20); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .cm-xgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cm-xgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cm-xgrid--sm { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.cm-xcard { margin: 0; border-radius: var(--r-16); overflow: hidden; background: var(--c-navy-500); box-shadow: var(--shadow-2); transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.cm-xcard:hover { transform: translateY(calc(-1 * var(--sp-4))); box-shadow: var(--shadow-3); }
.cm-xcard__link { display: flex; flex-direction: column; height: 100%; color: var(--c-surface-0); text-decoration: none !important; }
.cm-xcard__media { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.cm-xcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cm-xcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 80%, var(--c-navy-500)); }
.cm-xcard__body { position: relative; flex: 1 1 auto; margin-top: calc(-1 * var(--sp-24)); padding: 0 var(--sp-16) var(--sp-16); }
.cm-xcard__role { margin: 0; font-family: var(--font-heading); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-surface-0); line-height: 1.3; }
.cm-xcard__line { margin: var(--sp-4) 0 0; font-size: var(--fs-13); line-height: 1.45; color: var(--c-accent-100); }
.cm-xcard__chips li { margin: 0; padding: var(--sp-2) var(--sp-8); font-size: var(--fs-12); border: 1px solid var(--c-navy-300); border-radius: var(--r-pill); background: var(--c-navy-overlay-soft); color: var(--c-surface-0); }
.cm-xcard__count { margin: var(--sp-12) 0 0; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--c-brand-400); }
.cm-xgrid--sm .cm-xcard__role { font-size: var(--fs-13); }
@media (max-width: 560px) { .cm-xcard__line { font-size: var(--fs-12); } .cm-xcard__chips li:nth-child(n+3) { display: none; } }
@media (prefers-reduced-motion: reduce) { .cm-xcard { transition: none; } .cm-xcard:hover { transform: none; } }

.cm-xprofile { display: grid; grid-template-columns: minmax(0, var(--cm-xprofile-media)) 1fr; gap: var(--lx-split-gap); align-items: center; margin-top: var(--sp-24); padding: var(--sp-24); background: var(--c-surface-0); border-radius: var(--cm-card-radius, var(--r-20)); box-shadow: var(--shadow-lx-1); }
.cm-xprofile__media { margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-16); overflow: hidden; background: var(--c-navy-500); }
.cm-xprofile__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cm-xprofile__line { margin: var(--sp-12) 0 0; font-size: var(--text-lead); line-height: 1.5; color: var(--c-ink-700); }
.cm-xprofile__exp { margin: var(--sp-16) 0 0; padding-left: var(--sp-20); color: var(--c-ink-700); font-size: var(--fs-15); line-height: 1.55; }
.cm-xprofile__exp li { margin-bottom: var(--sp-8); }
.cm-xprofile__cat { margin: var(--sp-16) 0 0; font-size: var(--fs-14); color: var(--c-ink-500); }
.cm-xprofile__actions { display: flex; align-items: center; gap: var(--sp-20); flex-wrap: wrap; margin-top: var(--sp-24); }
.cm-xprofile__link { font-weight: var(--fw-semibold); color: var(--c-navy-800); }
@media (max-width: 767px) { .cm-xprofile { grid-template-columns: 1fr; padding: var(--sp-16); } .cm-xprofile__media { max-width: var(--cm-xprofile-media); } }

/* ---------- section heads, lists, post cards ---------- */
.cm-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-16); margin-bottom: var(--sp-20); }
.cm-sechead__h2 { margin: 0; font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--fw-semibold); color: var(--c-navy-900); line-height: var(--lh-heading); }
.cm-sechead__meta, .cm-sechead__more { margin: 0; font-size: var(--fs-14); color: var(--c-ink-500); }
.cm-sechead__more { font-weight: var(--fw-semibold); color: var(--c-navy-800); white-space: nowrap; }
.cm-list { display: grid; gap: var(--sp-16); }
.cm-pager { display: flex; justify-content: space-between; gap: var(--sp-16); margin: var(--sp-24) 0 0; font-weight: var(--fw-semibold); }
.cm-empty { color: var(--c-ink-500); }

.cm-pc { position: relative; display: grid; grid-template-columns: minmax(0, 40%) 1fr; gap: var(--sp-16) var(--sp-20); padding: var(--sp-12); background: var(--c-surface-0); border: 1px solid var(--c-lx-line); border-radius: var(--r-16); box-shadow: var(--shadow-lx-1); transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.cm-pc:hover { box-shadow: var(--shadow-lx-2); transform: translateY(calc(-1 * var(--sp-2))); }
.cm-pc__media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-12); overflow: hidden; background: var(--c-lx-sand); }
.cm-pc__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--thumb-pos, center); }
.cm-pc__play { position: absolute; left: 50%; top: 50%; width: var(--cm-play); height: var(--cm-play); transform: translate(-50%, -50%); border-radius: var(--r-circle); background: var(--c-navy-overlay-strong); }
.cm-pc__play::after { content: ""; position: absolute; inset: 30% 28% 30% 38%; background: var(--c-surface-0); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cm-pc__body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.cm-pc__type { margin: 0; font-size: var(--fs-12); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-brand-600); font-weight: var(--fw-semibold); }
.cm-pc__title { margin: 0; font-family: var(--font-heading); font-size: var(--fs-18); font-weight: var(--fw-semibold); line-height: 1.3; }
.cm-pc__title a { color: var(--c-navy-900); text-decoration: none; }
.cm-pc__title a::after { content: ""; position: absolute; inset: 0; }
.cm-pc__title a:hover { color: var(--c-navy-600); }
.cm-pc__ex { margin: 0; font-size: var(--fs-14); line-height: 1.5; color: var(--c-ink-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-pc .cm-pbyline { position: relative; z-index: 1; margin-top: auto; }
.cm-pc--sm { grid-template-columns: var(--cm-thumb-sm) 1fr; padding: var(--sp-8); box-shadow: none; }
.cm-pc--sm .cm-pc__title { font-size: var(--fs-15); }
.cm-pc--sm .cm-pc__type { font-size: var(--fs-11); }
.cm-pc--sm .cm-pbyline__img { display: none; }
.cm-pc--tall { display: block; padding: 0; overflow: hidden; border: 0; min-height: 100%; }
.cm-pc--tall .cm-pc__media { aspect-ratio: 4 / 5; border-radius: 0; height: 100%; }
.cm-pc--tall .cm-pc__body { position: absolute; inset: auto 0 0 0; padding: var(--sp-48) var(--sp-20) var(--sp-20); background: linear-gradient(180deg, transparent, var(--c-lx-scrim-strong)); }
.cm-pc--tall .cm-pc__type { color: var(--c-brand-400); }
.cm-pc--tall .cm-pc__title { font-size: var(--fs-20); }
.cm-pc--tall .cm-pc__title a { color: var(--c-surface-0); }
@media (max-width: 767px) {
	.cm-pc { grid-template-columns: 1fr; }
	.cm-pc--sm { grid-template-columns: var(--cm-thumb-xs) 1fr; }
	.cm-pc__title { font-size: var(--fs-16); }
}
@media (prefers-reduced-motion: reduce) { .cm-pc { transition: none; } .cm-pc:hover { transform: none; } }

/* ---------- fit inside legacy article wrappers (flex rows, big paragraph rhythm, uppercase buttons) ---------- */
.cm-nl, .cm-plug, .cm-svc, .cm-abox { box-sizing: border-box; width: 100%; flex: 1 1 100%; max-width: 100%; }
.cm-nl__value { flex-basis: 12rem; }
.cm-nl__form { flex-basis: 24rem; }
.cm-nl__btn, .cm-plug__btn, .cm-svc__btn { text-transform: none; letter-spacing: normal; }
.post-content .cm-plug p, .post-content .cm-svc p, .post-wrap .cm-abox p, .cm-nl p { line-height: 1.45; padding: 0; }
.post-content .cm-plug .cm-plug__title, .post-content .cm-plug .cm-plug__text { margin-top: var(--sp-4); }
.cm-abox__role a, .cm-abox__more, .cm-svc__link { text-decoration: none; }
.cm-abox__role a:hover, .cm-abox__more:hover, .cm-svc__link:hover { text-decoration: underline; }
.cm-plug__body { min-width: 0; }
/* specificity over legacy ".post-content p" / "button" rules */
.cm-nl .cm-nl__form, .cm-nl .cm-nl__value { min-width: 0; }
.cm-nl .cm-nl__form input { width: 100%; }
.cm-nl .cm-nl__btn, .cm-plug .cm-plug__btn, .cm-svc .cm-svc__btn { text-transform: none; }
.cm-nl .cm-nl__value { font-size: var(--fs-14); }
.cm-plug .cm-plug__eyebrow, .cm-svc .cm-svc__eyebrow, .cm-abox .cm-abox__eyebrow { font-size: var(--fs-12); line-height: 1.3; }
.cm-plug .cm-plug__title { font-size: var(--fs-16); line-height: 1.3; }
.cm-plug .cm-plug__text, .cm-abox .cm-abox__line { font-size: var(--fs-14); line-height: 1.45; }
.cm-svc .cm-svc__title { font-size: var(--text-h4); line-height: 1.25; }
.cm-svc .cm-svc__text { font-size: var(--fs-15); line-height: 1.5; }
.cm-abox .cm-abox__rev { font-size: var(--fs-13); }

/* ==================== P1: portal home (37-SPEC 2.1) ==================== */
.cm-portal--home { padding-bottom: var(--sp-48); }
.cm-portal__sec { padding-top: var(--lx-section-y-tight); }

/* hero: statement inset card (photo + left navy scrim), never full-bleed */
.cm-phero { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--lx-split-gap); align-items: center; margin-top: var(--sp-16); padding: var(--sp-48); border-radius: var(--cm-card-radius); overflow: hidden; background: var(--c-navy-900); box-shadow: var(--shadow-lx-3); isolation: isolate; }
.cm-phero__bg { position: absolute; inset: 0; z-index: -1; }
.cm-phero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cm-phero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-lx-scrim-strong) 0%, var(--c-lx-scrim-mid) 55%, var(--c-lx-scrim-soft) 100%); }
.cm-eyebrow-lx--dark { color: var(--c-brand-400); }
.cm-phero__h1 { margin: var(--sp-12) 0 0; max-width: 18ch; font-family: var(--font-heading); font-size: var(--lx-hero-h1); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--c-surface-0); text-wrap: balance; }
.cm-phero__lede { max-width: var(--lx-lede-measure); margin: var(--sp-16) 0 0; font-size: var(--text-lead); line-height: 1.55; color: var(--c-lx-on-dark-muted); }
.cm-phero__search { display: flex; gap: var(--sp-8); max-width: 34rem; margin: var(--sp-24) 0 0; padding: var(--sp-4); background: var(--c-surface-0); border-radius: var(--r-pill); box-shadow: var(--shadow-lx-2); }
.cm-phero__search input { flex: 1 1 auto; min-width: 0; min-height: var(--btn-min-h); margin: 0; padding: 0 var(--sp-16); border: 0; border-radius: var(--r-pill); background: transparent; font-size: var(--fs-15); box-shadow: none; }
.cm-phero__search input:focus { outline: none; box-shadow: var(--shadow-focus); }
.cm-phero__search button { flex: none; min-height: var(--btn-min-h); padding: 0 var(--sp-24); border: 0; border-radius: var(--r-pill); background: var(--c-navy-800); color: var(--c-surface-0); font-weight: var(--fw-semibold); text-transform: none; cursor: pointer; }
.cm-phero__popular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin: var(--sp-16) 0 0; font-size: var(--fs-13); color: var(--c-lx-on-dark-muted); }
.cm-phero__popular a { padding: var(--sp-4) var(--sp-12); border: 1px solid var(--c-lx-line-dark); border-radius: var(--r-pill); color: var(--c-surface-0); text-decoration: none; }
.cm-phero__popular a:hover { background: var(--c-navy-overlay-soft); }
.cm-phero__feature { align-self: stretch; display: flex; flex-direction: column; gap: var(--sp-8); }
.cm-phero__flabel { margin: 0; font-size: var(--fs-12); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-brand-400); font-weight: var(--fw-semibold); }
.cm-phero__feature .cm-pc--tall { flex: 1 1 auto; box-shadow: var(--shadow-lx-3); }
.cm-phero__feature .cm-pc--tall .cm-pc__media { aspect-ratio: auto; min-height: 100%; }
@media (max-width: 900px) {
	.cm-phero { grid-template-columns: 1fr; padding: var(--sp-32) var(--sp-20); }
	.cm-phero__bg::after { background: linear-gradient(180deg, var(--c-lx-scrim-strong), var(--c-lx-scrim-mid)); }
	.cm-phero__feature .cm-pc--tall .cm-pc__media { aspect-ratio: 16 / 10; }
}

/* category tiles */
.cm-ctiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lx-grid-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .cm-ctiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cm-ctile { margin: 0; }
.cm-ctile a { display: flex; flex-direction: column; height: 100%; background: var(--c-surface-0); border: 1px solid var(--c-lx-line); border-radius: var(--r-16); overflow: hidden; box-shadow: var(--shadow-lx-1); text-decoration: none !important; transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.cm-ctile a:hover { box-shadow: var(--shadow-lx-2); transform: translateY(calc(-1 * var(--sp-2))); }
.cm-ctile__media { display: block; aspect-ratio: 3 / 2; background: var(--c-lx-sand); overflow: hidden; }
.cm-ctile__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-ctile__body { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-16); flex: 1 1 auto; }
.cm-ctile__name { font-family: var(--font-heading); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-navy-900); line-height: 1.3; }
.cm-ctile__line { font-size: var(--fs-13); line-height: 1.45; color: var(--c-ink-500); }
.cm-ctile__count { margin-top: auto; padding-top: var(--sp-8); font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--c-brand-600); }

/* magazine band: latest + picks */
.cm-mag { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--lx-split-gap); align-items: start; }
.cm-sechead__h2--sm { font-size: var(--text-h4); }
.cm-picks { list-style: none; margin: 0 0 var(--sp-24); padding: 0; display: grid; gap: var(--sp-8); }
.cm-picks li { margin: 0; }
.cm-mag__side .cm-plug { grid-template-columns: 1fr; padding: var(--sp-12); }
.cm-mag__side .cm-plug__btn { justify-self: start; }
@media (max-width: 1023px) { .cm-mag { grid-template-columns: 1fr; } }

/* bento: 1 tall + stacked horizontals */
.cm-bento { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--lx-grid-gap); align-items: stretch; }
.cm-bento__stack { display: grid; gap: var(--lx-grid-gap); align-content: start; }
.cm-bento__tall .cm-pc--tall { height: 100%; }
@media (max-width: 767px) { .cm-bento { grid-template-columns: 1fr; } .cm-bento__tall .cm-pc--tall .cm-pc__media { aspect-ratio: 16 / 10; } }

/* rails: vertical cards, scroll-snap on phones */
.cm-rail { display: grid; gap: var(--lx-grid-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cm-rail--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cm-pc--v { grid-template-columns: 1fr; align-content: start; }
.cm-pc--v .cm-pc__title { font-size: var(--fs-16); }
@media (max-width: 1023px) { .cm-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
	.cm-rail, .cm-rail--3 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--sp-12); padding-bottom: var(--sp-8); }
	.cm-rail > * { flex: 0 0 82%; scroll-snap-align: start; }
}

/* video facade */
.cm-vid { margin: 0; }
.cm-vid__facade { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-16); overflow: hidden; aspect-ratio: 16 / 9; background: var(--c-navy-900); cursor: pointer; box-shadow: var(--shadow-lx-1); }
.cm-vid__facade img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-vid__dur { position: absolute; right: var(--sp-8); bottom: var(--sp-8); padding: var(--sp-2) var(--sp-8); border-radius: var(--r-4); background: var(--c-navy-overlay-strong); color: var(--c-surface-0); font-size: var(--fs-12); }
.cm-vid__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-16); }
.cm-vid__title { margin: var(--sp-12) 0 0; font-family: var(--font-heading); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--c-navy-900); line-height: 1.3; }

/* about + closing CTA (light inset cards) */
.cm-pabout { padding: var(--sp-24); background: var(--c-surface-0); border: 1px solid var(--c-lx-line); border-radius: var(--r-16); }
.cm-pabout .cm-answer { max-width: var(--measure); margin: var(--sp-12) 0 0; font-size: var(--fs-16); line-height: 1.65; color: var(--c-ink-700); }
.cm-pcta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-24); padding: var(--sp-32); background: var(--c-lx-ivory); border: 1px solid var(--c-lx-line); border-radius: var(--cm-card-radius); box-shadow: var(--shadow-lx-1); }
.cm-pcta .cm-eyebrow-lx--dark { color: var(--c-brand-600); }
.cm-pcta__body { flex: 1 1 22rem; }
.cm-pcta__h2 { margin: var(--sp-8) 0 0; font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--fw-semibold); color: var(--c-navy-900); line-height: var(--lh-heading); }
.cm-pcta__text { margin: var(--sp-8) 0 0; max-width: var(--lx-lede-measure); font-size: var(--fs-16); color: var(--c-ink-700); line-height: 1.55; }
.cm-pcta__actions { display: flex; align-items: center; gap: var(--sp-20); flex-wrap: wrap; }
.cm-pcta__link { font-weight: var(--fw-semibold); color: var(--c-navy-800); }
.cm-portal__end .cm-nl { margin-top: var(--sp-24); }

/* ==================== P2: category + sub-category hubs (37-SPEC 2.2-2.3) ==================== */
.cm-hubtop { margin-top: var(--sp-24); }
.cm-hubanswer { padding: var(--sp-20) var(--sp-24); background: var(--c-surface-0); border: 1px solid var(--c-lx-line); border-radius: var(--r-16); box-shadow: var(--shadow-lx-1); }
.cm-hubanswer .cm-answer { max-width: var(--measure); margin: 0; font-size: var(--fs-16); line-height: 1.65; color: var(--c-ink-700); }
.cm-hubstart { padding-top: var(--sp-32); padding-bottom: var(--sp-8); }
.cm-bento--start .cm-bento__stack { gap: var(--sp-8); }
.cm-bento--start .cm-pc--sm { background: var(--c-surface-0); }
.cm-hub-latest { margin: var(--sp-24) 0 var(--sp-16); font-size: var(--text-h3); }
.cm-hubbottom .cm-portal__wrap { padding: 0; }
.cm-hubbottom .cm-portal__sec { padding-top: var(--sp-40); }
.cm-ctiles--svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .cm-ctiles--svc { grid-template-columns: 1fr; } }
.cm-faq { margin: 0 0 var(--sp-8); background: var(--c-surface-0); border: 1px solid var(--c-lx-line); border-radius: var(--r-12); }
.cm-faq summary { padding: var(--sp-16) var(--sp-20); font-weight: var(--fw-semibold); color: var(--c-navy-900); cursor: pointer; list-style-position: inside; }
.cm-faq p { margin: 0; padding: 0 var(--sp-20) var(--sp-16); font-size: var(--fs-15); line-height: 1.6; color: var(--c-ink-700); }
.cm-hubbottom .cm-rail--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .cm-hubbottom .cm-rail--3 { display: flex; } }

/* WS17: keep headings exactly as written (legacy rules Title-Cased card titles and the TOC). */
.block-cat-community .entry-title, .block-cat-community .entry-title a, .post-wrap .meta-info .post-title, #box-table-of-content a, .section-nav a, #banner-ft-comm h1 { text-transform: none; }
.cm-bento--start .cm-pc--v .cm-pc__title { font-size: var(--fs-18); }
/* End-of-post cards share one column, radius and shadow (David 2026-10-05). */
.post-wrap .cm-svc, .post-wrap .cm-plug, .post-wrap .cm-abox { margin-left: 0; margin-right: 0; }

/* ==================== Persona expert card in dark heroes (WS17, David 2026-10-05) ====================
 * Same language as the approved /ecommerce-projects expert cards (.cm-hub__pcard--exp): tall natural
 * portrait (object-fit cover, never stretched), navy gradient overlay on the lower part holding the text. */
.cm-xhero { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sp-12); width: 100%; }
.cm-xhero .cm-xhero__card { position: relative; display: block; overflow: hidden; padding: 0; border-radius: var(--r-20); background: var(--c-navy-500); box-shadow: var(--shadow-2); color: var(--c-surface-0); text-decoration: none !important; transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.cm-xhero .cm-xhero__card:hover { transform: translateY(calc(-1 * var(--sp-4))); box-shadow: var(--shadow-3); }
.cm-xhero .cm-xhero__media { position: relative; display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0; background: var(--c-navy-500); }
.cm-xhero .cm-xhero__media img { position: static; display: block; width: 100%; height: 100%; max-width: none; min-height: 0; object-fit: cover; object-position: center 25%; transform: none; opacity: 1; transition: transform var(--lx-dur) var(--lx-ease); }
.cm-xhero .cm-xhero__card:hover .cm-xhero__media img { transform: scale(1.04); }
.cm-xhero .cm-xhero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--c-lx-scrim-mid) 66%, var(--c-navy-900) 100%); pointer-events: none; }
.cm-xhero .cm-xhero__body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-24); }
.cm-xhero .cm-xhero__eyebrow { margin: 0; font-size: var(--fs-12); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-brand-400); font-weight: var(--fw-semibold); line-height: 1.3; }
.cm-xhero .cm-xhero__role { margin: 0; font-family: var(--font-heading); font-size: var(--fs-20); font-weight: var(--fw-semibold); color: var(--c-surface-0); line-height: 1.25; }
.cm-xhero .cm-xhero__line { margin: 0; font-size: var(--fs-14); line-height: 1.45; color: var(--c-accent-100); }
.cm-xhero .cm-xhero__chips { list-style: none; margin: var(--sp-8) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.cm-xhero .cm-xhero__chips li { margin: 0; padding: var(--sp-2) var(--sp-8); font-size: var(--fs-12); line-height: 1.4; border: 1px solid var(--c-navy-300); border-radius: var(--r-pill); background: var(--c-navy-overlay-soft); color: var(--c-surface-0); }
.cm-xhero .cm-xhero__more { margin-top: var(--sp-8); font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--c-surface-0); }
.cm-xhero .cm-xhero__card:hover .cm-xhero__more { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .cm-xhero .cm-xhero__card, .cm-xhero .cm-xhero__media img { transition: none; } .cm-xhero .cm-xhero__card:hover, .cm-xhero .cm-xhero__card:hover .cm-xhero__media img { transform: none; } }
.cm-xhero__team { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-16); }
.cm-xhero__teamlabel { width: 100%; font-size: var(--fs-12); color: var(--c-lx-on-dark-muted); }
.cm-xhero__mini { display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--c-surface-0) !important; font-size: var(--fs-13); text-decoration: none !important; }
.cm-xhero__mini img { width: var(--cm-avatar-sm); height: var(--cm-avatar-sm); border-radius: var(--r-circle); object-fit: cover; object-position: center 30%; border: 2px solid var(--c-lx-line-dark); }
.cm-xhero__mini:hover span { text-decoration: underline; }

/* tutorial hero right column: the card fills the column */
#banner-ft-comm .col-md-4 .cm-xhero { margin-top: 0; }

/* category / sub-category hero: text left, tall expert card right (~380px at 1440) */
.cm-listing-banner .uk-container:has(> .cm-xhero) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--cm-xhero-w)); gap: var(--lx-split-gap); align-items: center; }
.cm-listing-banner .uk-container:has(> .cm-xhero) .cm-listing-banner__inner { max-width: 60ch; }
@media (max-width: 900px) {
	.cm-listing-banner .uk-container:has(> .cm-xhero) { grid-template-columns: 1fr; gap: var(--sp-20); }
}
/* phones: full width under the hero copy, 4:3 with the same overlay */
@media (max-width: 767px) {
	.cm-xhero .cm-xhero__media { aspect-ratio: 4 / 3; }
	.cm-xhero .cm-xhero__media img { object-position: center 20%; }
	.cm-xhero .cm-xhero__media::after { background: linear-gradient(180deg, transparent 25%, var(--c-lx-scrim-mid) 50%, var(--c-navy-900) 100%); }
	.cm-xhero .cm-xhero__body { padding: var(--sp-16); }
	.cm-xhero .cm-xhero__role { font-size: var(--fs-18); }
	.cm-xhero .cm-xhero__line { font-size: var(--fs-13); }
}

/* answer-first box: standard inset card, full width, readable measure */
.cm-hubanswer { border-left-width: 1px; }
.cm-hubanswer .cm-answer { max-width: 75ch; width: 100%; }
.cm-listing-banner .uk-container:has(> .cm-xhero) { padding-right: var(--sp-32); }
@media (max-width: 900px) { .cm-listing-banner .uk-container:has(> .cm-xhero) { padding-right: 0; } .cm-listing-banner .cm-xhero { padding: 0 var(--sp-20); } }
/* hub hero grid: hide clearfix pseudo elements so they are not grid items */
.cm-listing-banner .uk-container:has(> .cm-xhero)::before, .cm-listing-banner .uk-container:has(> .cm-xhero)::after { content: none; display: none; }
.cm-listing-banner .uk-container:has(> .cm-xhero) > .cm-listing-banner__inner { grid-column: 1; grid-row: 1; }
.cm-listing-banner .uk-container:has(> .cm-xhero) > .cm-xhero { grid-column: 2; grid-row: 1; }
@media (max-width: 900px) { .cm-listing-banner .uk-container:has(> .cm-xhero) > .cm-xhero { grid-column: 1; grid-row: 2; } }
/* tutorial hero: legacy #banner-ft-comm p rules would inflate the overlay text */
#banner-ft-comm .cm-xhero p { margin: 0; }
#banner-ft-comm .cm-xhero .cm-xhero__eyebrow { font-size: var(--fs-12); line-height: 1.3; color: var(--c-brand-400); }
#banner-ft-comm .cm-xhero .cm-xhero__role { font-size: var(--fs-20); line-height: 1.25; color: var(--c-surface-0); }
#banner-ft-comm .cm-xhero .cm-xhero__line { font-size: var(--fs-14); line-height: 1.45; color: var(--c-accent-100); }
@media (max-width: 767px) { #banner-ft-comm .cm-xhero .cm-xhero__role { font-size: var(--fs-18); } #banner-ft-comm .cm-xhero .cm-xhero__line { font-size: var(--fs-13); } }

/* ==================== Card consistency (WS17, David 2026-10-05) ====================
 * Horizontal cards: media column stretches the full card height (38%), title 2 lines, excerpt 2 lines,
 * byline 1 line pinned at the bottom; equal heights in every list. Vertical cards: flex column, no gaps. */
.cm-pc { align-items: stretch; }
.cm-pc--h { grid-template-columns: minmax(0, 38%) 1fr; }
.cm-pc--h .cm-pc__media, .cm-pc--sm .cm-pc__media { aspect-ratio: auto; height: 100%; min-height: var(--cm-thumb-sm); }
.cm-pc__title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-pc .cm-pbyline { max-width: 100%; overflow: hidden; white-space: nowrap; }
.cm-pc .cm-pbyline__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-pc__type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-pc--v { display: flex; flex-direction: column; height: 100%; }
.cm-pc--v .cm-pc__media { flex: none; aspect-ratio: 16 / 9; }
.cm-pc--v .cm-pc__body { flex: 1 1 auto; }
.cm-list, .cm-picks, .cm-bento__stack { grid-auto-rows: 1fr; }
.cm-picks li, .cm-picks .cm-pc { height: 100%; }
/* legacy screenshots inside the shared capture frame: whole capture visible, never a hard crop */
.cm-pc .cm-pc__media--cap { padding: var(--sp-8); }
.cm-pc .cm-pc__media--cap img { object-fit: contain; object-position: center; border-radius: var(--r-8); }
@media (max-width: 767px) {
	.cm-pc--h, .cm-pc--sm { grid-template-columns: 1fr; }
	.cm-pc--h .cm-pc__media, .cm-pc--sm .cm-pc__media { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
	.cm-list, .cm-picks, .cm-bento__stack { grid-auto-rows: auto; }
}

/* related posts under tutorials: the portal card, 3 columns, equal heights */
.cm-related-grid { display: grid; gap: var(--lx-grid-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1023px) { .cm-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .cm-related-grid { grid-template-columns: 1fr; } }
.cm-related-band .related-post-title { text-transform: none; }

/* expert card on phones: keep the face clear, overlay holds eyebrow, role and link only */
@media (max-width: 767px) {
	.cm-xhero .cm-xhero__line, .cm-xhero .cm-xhero__chips { display: none; }
	.cm-xhero .cm-xhero__media img { object-position: center 15%; }
	.cm-xhero .cm-xhero__media::after { background: linear-gradient(180deg, transparent 50%, var(--c-lx-scrim-mid) 70%, var(--c-navy-900) 100%); }
}

/* category tiles: one treatment, real photo 3:2 + subtle navy overlay */
.cm-ctile__media { position: relative; }
.cm-ctile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--c-lx-scrim-soft) 100%); pointer-events: none; }
/* free-plugin card actions: "Get it free" + ghost "Try the live demo" (WS17) */
.cm-plug__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-8); }
.cm-plug__actions .cm-demo-cta { min-height: var(--btn-min-h); justify-content: center; text-transform: none; white-space: nowrap; text-decoration: none !important; }
@media (max-width: 767px) { .cm-plug__actions { grid-column: 1 / -1; } }