/* Shared trust block (helpers/layouts/trust_block.php). Tokens only; see templates/cmsmart/css/tokens.css.
 * Layout: eyebrow+H2 head, a photo stats band (navy overlay, white figures), rating cards with
 * real brand marks, testimonial cards with real avatars + star ratings, a secondary-button footer.
 */
.cm-trust {
	background: var(--color-section);
	color: var(--color-text);
	padding: var(--sp-section-tight) 0;
	font-size: var(--text-body);
	line-height: var(--lh-body);
	clear: both;
	--cm-trust-link: var(--c-accent-700); /* 6:1 on the section background (accent-600 is 4.1:1) */
	--cm-trust-num: var(--c-navy-500);
	--cm-trust-accent: var(--c-brand-500);
	--cm-trust-mark-bg: var(--c-navy-500);
	--cm-trust-mark-text: var(--c-surface-0);
}
[data-theme="dark"] .cm-trust {
	--cm-trust-link: var(--color-link);
	--cm-trust-num: var(--color-heading);
	--cm-trust-mark-bg: var(--c-navy-400);
}
.cm-trust *, .cm-trust *::before, .cm-trust *::after { box-sizing: border-box; }
.cm-trust__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--sp-16);
}
.cm-trust__head { text-align: center; margin-bottom: var(--sp-32); }
.cm-trust__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(--cm-trust-accent);
}
.cm-trust .cm-trust__title { font-size: var(--text-h2) !important; line-height: var(--lh-heading) !important; } /* template h2/h3 rules were shrinking it */
.cm-trust__title {
	margin: 0 0 var(--sp-8);
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	line-height: var(--lh-heading);
	font-weight: var(--fw-bold);
	color: var(--color-heading);
}
.cm-trust__lede { margin: 0 auto; max-width: 640px; color: var(--color-text-muted); }

/* ---- Stats band: real photo background, deep navy overlay, white figures ----
 * --cm-trust-stats-bg (the photo url()) is set inline by trust_block.php. The
 * image-set() declaration is progressive enhancement over the plain url() one
 * right above it: browsers that don't understand image-set() drop that whole
 * invalid declaration and keep the url() background already in effect. */
.cm-trust__stats-band {
	background-image: linear-gradient(180deg, var(--c-navy-overlay-band-1), var(--c-navy-overlay-band-2)), var(--cm-trust-stats-bg);
	background-image: linear-gradient(180deg, var(--c-navy-overlay-band-1), var(--c-navy-overlay-band-2)), image-set(var(--cm-trust-stats-bg) 1x);
	background-size: cover;
	background-position: center;
	border-radius: var(--r-20);
	box-shadow: var(--shadow-3);
	padding: var(--sp-32) var(--sp-16);
}
.cm-trust__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--c-community-stat-divider);
	border: 1px solid var(--c-community-stat-divider);
	border-radius: var(--r-16);
	overflow: hidden;
}
.cm-trust__stat {
	margin: 0;
	padding: var(--sp-24) var(--sp-16) var(--sp-20);
	background: transparent;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-4);
	min-height: 148px; /* reserve space: no layout shift while counting */
}
.cm-trust__num {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	line-height: var(--lh-tight);
	font-weight: var(--fw-bold);
	color: var(--c-surface-0);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}
/* Short orange rule under each figure; a pseudo-element so the count-up text swap never removes it. */
.cm-trust__num::after {
	content: "";
	display: block;
	width: var(--sp-24);
	height: 3px;
	margin: var(--sp-10) auto var(--sp-4);
	border-radius: var(--r-pill);
	background: var(--cm-trust-accent);
}
.cm-trust__label {
	font-size: var(--fs-15);
	line-height: var(--lh-tight);
	font-weight: var(--fw-semibold);
	color: var(--c-surface-0);
	text-wrap: balance;
}
.cm-trust__note {
	margin-top: auto; /* pin sub-labels to the same baseline in every cell */
	padding-top: var(--sp-4);
	font-size: var(--fs-13);
	line-height: var(--lh-tight);
	color: var(--c-community-on-dark-muted);
}
.cm-trust__source {
	margin: var(--sp-16) 0 0;
	text-align: center;
	font-size: var(--fs-13);
	color: var(--color-text-muted);
}

/* ---- Third-party ratings: cards with a real brand mark, figure, shared meter ---- */
.cm-trust__reviews { margin-top: var(--sp-40); text-align: center; }
.cm-trust__reviews-title {
	margin: 0 0 var(--sp-16);
	font-size: var(--fs-15);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}
.cm-trust__asof { font-weight: var(--fw-normal); color: var(--color-text-muted); }
.cm-trust__badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-16);
}
.cm-trust__badges li { margin: 0; flex: 0 1 300px; display: flex; }
.cm-trust__badge {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--sp-16);
	padding: var(--sp-16) var(--sp-20);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	color: var(--color-text);
	text-align: left;
	text-decoration: none;
	transition: box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.cm-trust__badge:hover {
	border-color: var(--color-border-strong);
	box-shadow: var(--card-shadow-hover);
	transform: translateY(-1px);
	color: var(--color-text);
	text-decoration: none;
}
.cm-trust__mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--r-circle);
	background: var(--cm-trust-mark-bg);
	color: var(--cm-trust-mark-text);
	font-family: var(--font-heading);
	font-size: var(--fs-18);
	font-weight: var(--fw-bold);
	line-height: 1;
	overflow: hidden;
}
/* Facebook/Trustpilot/Reviews.io marks are their own art (SVG circle or logo image): no background box of ours behind them. */
.cm-trust__mark--facebook,
.cm-trust__mark--trustpilot,
.cm-trust__mark--reviewsio {
	background: transparent;
}
.cm-trust__mark-svg,
/* `.cm-trust` prefix (not just the component class) is deliberate: some page templates
 * wrap the whole page in a builder container with its own `img{max-width:100%;height:auto}`
 * reset (1 class + 1 type = higher specificity than a lone class). Every fixed-size <img>
 * in this file is double-scoped so our sizing always wins regardless of host page markup. */
.cm-trust .cm-trust__mark-img { display: block; width: 40px; height: 40px; border-radius: var(--r-circle); }
/* Trustpilot ships a wide wordmark+star SVG (not a square icon): the 40x40 circular "mark"
 * slot (sized and clipped for an icon like the Facebook "f") would crop most of it away, so
 * this mark gets its own auto-width, unclipped, non-circular box instead. */
.cm-trust .cm-trust__mark--trustpilot {
	width: auto;
	height: 26px;
	border-radius: 0;
	overflow: visible;
}
.cm-trust .cm-trust__mark--trustpilot .cm-trust__mark-img {
	width: auto;
	height: 26px;
	max-width: 120px;
	border-radius: 0;
	object-fit: contain;
}
.cm-trust .cm-trust__quote-verified-logo,
.cm-trust .cm-trust__avatarwall-logo-img {
	width: auto;
	border-radius: 0;
	object-fit: contain;
}
.cm-trust .cm-trust__quote-verified-logo { height: 16px; max-width: 72px; }
.cm-trust .cm-trust__avatarwall-logo-img { height: 22px; max-width: 100px; }
/* Light/dark logo swap (no white variant shipped for Reviews.io, so that one is untouched).
 * `.cm-trust` prefix on the light-mode default: see the specificity note above. The
 * `[data-theme="dark"]` rules are already a 2-selector attribute+class match, so they win
 * regardless. */
.cm-trust .cm-trust__mark-img--dark { display: none; }
[data-theme="dark"] .cm-trust__mark-img--light { display: none; }
[data-theme="dark"] .cm-trust__mark-img--dark { display: block; }
.cm-trust__badge-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.cm-trust__badge-name {
	font-size: var(--fs-12);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--color-text-muted);
}
.cm-trust__badge-score { line-height: var(--lh-tight); color: var(--color-text-muted); font-size: var(--fs-13); }
.cm-trust__badge-score strong {
	font-family: var(--font-heading);
	font-size: var(--text-h4);
	font-weight: var(--fw-bold);
	color: var(--cm-trust-num);
}
.cm-trust__meter {
	display: block;
	height: 6px;
	border-radius: var(--r-pill);
	background: var(--color-surface-sunken);
	overflow: hidden;
}
.cm-trust__meter > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--cm-trust-accent);
}
.cm-trust__recommend {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
	font-size: var(--fs-12);
	font-weight: var(--fw-semibold);
	color: var(--cm-trust-accent);
}
.cm-trust__recommend-icon { flex: none; }
.cm-trust__badge-count { font-size: var(--fs-12); line-height: var(--lh-tight); color: var(--color-text-muted); }
.cm-trust__badge-arrow { flex: none; color: var(--color-text-muted); transition: transform var(--dur-fast) ease, color var(--dur-fast) ease; }
.cm-trust__badge:hover .cm-trust__badge-arrow { transform: translateX(3px); color: var(--cm-trust-accent); }

/* ---- Avatar wall: real reviewer photos, 2-row auto-scrolling marquee (owner request) ----
 * Each row's track is rendered twice in the markup (trust_block.php) and this animates it
 * exactly -50%, so the loop is seamless with no JS. Row B scrolls the opposite direction. */
.cm-trust__avatarwall { margin-top: var(--sp-40); }
.cm-trust__avatarwall-caption {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-8) var(--sp-12);
	margin: 0 0 var(--sp-20);
	text-align: center;
	font-size: var(--fs-14);
	font-weight: var(--fw-semibold);
	color: var(--color-heading);
}
.cm-trust__avatarwall-logo { display: inline-flex; align-items: center; }
.cm-trust__avatarwall-rows {
	display: flex;
	flex-direction: column;
	gap: var(--sp-12);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cm-trust__avatarwall-row { overflow: hidden; }
.cm-trust__avatarwall-row--b { display: none; }
.cm-trust__avatarwall-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: var(--sp-12);
	animation: cm-trust-marquee-left 42s linear infinite;
}
.cm-trust__avatarwall-row--a .cm-trust__avatarwall-track { animation-name: cm-trust-marquee-left; }
.cm-trust__avatarwall-row--b .cm-trust__avatarwall-track { animation-name: cm-trust-marquee-right; }
.cm-trust__avatarwall-row:hover .cm-trust__avatarwall-track,
.cm-trust__avatarwall-row:focus-within .cm-trust__avatarwall-track { animation-play-state: paused; }
.cm-trust__avatarwall-item {
	flex: none;
	display: block;
	width: 42px;
	height: 42px;
	margin-right: -14px; /* slight overlap */
	border-radius: var(--r-circle);
	box-shadow: 0 0 0 2px var(--color-surface);
	transition: transform var(--dur-fast) ease;
}
.cm-trust__avatarwall-item:hover { transform: translateY(-3px) scale(1.08); z-index: 1; }
.cm-trust .cm-trust__avatarwall-item img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--r-circle);
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--color-surface), var(--shadow-1);
}
/* Member wall (corporate look, owner 2026-10-02): large rounded-square tiles on white, no
 * overlap, so faces and company logos read as clients rather than a crowd of small dots. */
.cm-trust__avatarwall--members .cm-trust__avatarwall-caption { font-size: var(--fs-16); }
.cm-trust__avatarwall--members .cm-trust__avatarwall-track { gap: var(--sp-16); animation-duration: 90s; }
.cm-trust__avatarwall--members .cm-trust__avatarwall-rows { gap: var(--sp-16); }
.cm-trust__avatarwall-item--member {
	width: 76px;
	height: 76px;
	margin-right: 0;
	border-radius: var(--r-12);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-1);
	overflow: hidden;
}
.cm-trust__avatarwall-item--member:hover { transform: none; }
.cm-trust .cm-trust__avatarwall-item--member img {
	border-radius: 0;
	box-shadow: none;
}
@media (max-width: 767px) {
	.cm-trust__avatarwall-item--member { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
	.cm-trust__avatarwall-track .is-dup { display: none; } /* static wrap: drop the loop copy */
}
@keyframes cm-trust-marquee-left {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@keyframes cm-trust-marquee-right {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}
@media (min-width: 768px) {
	.cm-trust__avatarwall-row--b { display: block; }
}
@media (prefers-reduced-motion: reduce) {
	.cm-trust__avatarwall-track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}
	.cm-trust__avatarwall-track a[aria-hidden="true"] { display: none; } /* drop the duplicate loop copy when static */
	.cm-trust__avatarwall-rows { mask-image: none; -webkit-mask-image: none; }
}

/* ---- Star rows (Reviews.io card + testimonial rating): shared two-layer glyph technique ---- */
.cm-trust__stars {
	position: relative;
	display: inline-block;
	font-size: var(--fs-14);
	line-height: 1;
	letter-spacing: 2px;
}
.cm-trust__stars-bg { color: var(--color-border-strong); }
.cm-trust__stars-fg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--cm-trust-accent);
}

/* ---- Testimonials: real avatars, star rating, decorative quote mark ---- */
.cm-trust__quotes {
	margin-top: var(--sp-40);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-20);
}
.cm-trust__quote {
	position: relative;
	margin: 0;
	padding: var(--sp-24);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--sp-12);
	transition: box-shadow var(--dur-fast) ease;
}
.cm-trust__quote:hover { box-shadow: var(--card-shadow-hover); }
/* Trustpilot quote text: clamp to 6 lines so varying review lengths (80-400 chars) keep card heights even. */
.cm-trust__quote blockquote p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
	overflow: hidden;
}
/* Big decorative quote mark behind the text, not in the flow (no extra height to reserve). */
.cm-trust__quote-mark {
	position: absolute;
	top: -.15em;
	left: var(--sp-12);
	font-family: Georgia, "Times New Roman", serif; /* the Poppins glyph reads as two slashes */
	font-size: var(--fs-120);
	font-weight: var(--fw-bold);
	line-height: 1;
	color: var(--cm-trust-accent);
	opacity: .2;
	z-index: 0;
	pointer-events: none;
}
.cm-trust__quote > *:not(.cm-trust__quote-mark) { position: relative; z-index: 1; }
.cm-trust__quote blockquote { margin: 0; padding: 0; border: 0; font-size: var(--fs-15); line-height: var(--lh-body); color: var(--color-text); }
.cm-trust__quote blockquote p { margin: 0; font-size: inherit; line-height: inherit; }
.cm-trust__quote figcaption {
	margin-top: auto;
	padding-top: var(--sp-16);
	border-top: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	gap: var(--sp-12);
}
.cm-trust__avatar-wrap { position: relative; flex: none; width: 48px; height: 48px; }
/* `.cm-trust` prefix: see the note above .cm-trust__mark-img -- wins over a host page's
 * generic img{height:auto} reset even when the photo itself isn't a square crop. */
.cm-trust .cm-trust__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--r-circle);
	box-shadow: 0 0 0 2px var(--color-surface), var(--shadow-1);
}
.cm-trust__avatar--photo { object-fit: cover; }
.cm-trust__avatar--fallback {
	background: linear-gradient(135deg, var(--c-brand-400), var(--cm-trust-accent));
	color: var(--c-surface-0);
	font-family: var(--font-heading);
	font-size: var(--fs-16);
	font-weight: var(--fw-bold);
	line-height: 1;
}
.cm-trust .cm-trust__avatar-chip {
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 20px;
	height: 20px;
	border-radius: var(--r-8);
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--color-surface), var(--shadow-1);
}
.cm-trust__who { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.cm-trust__name { font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--color-heading); }
.cm-trust__meta { font-size: var(--fs-13); line-height: var(--lh-tight); color: var(--color-text-muted); }
.cm-trust__country { display: flex; align-items: center; gap: var(--sp-4); }

/* ---- "Verified on Trustpilot" footer link on each Trustpilot quote card ----
 * Color/underline come from the shared `.cm-trust a:not(.cm-trust__badge):not(.cm-btn)`
 * rule further down (same treatment as "See how it works" etc.); only layout here. */
.cm-trust__quote-verified {
	margin-top: var(--sp-12);
	padding-top: var(--sp-12);
	border-top: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	gap: var(--sp-8);
	font-size: var(--fs-13);
	font-weight: var(--fw-semibold);
}
/* full product name, at most two lines; the year always sits on its own line below */
.cm-trust__product {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.cm-trust__foot {
	margin: var(--sp-40) 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-16) var(--sp-24);
	text-align: center;
	font-size: var(--fs-14);
	color: var(--color-text-muted);
}
.cm-trust a:not(.cm-trust__badge):not(.cm-btn) { color: var(--cm-trust-link); text-decoration: underline; text-underline-offset: 2px; }
.cm-trust a:not(.cm-trust__badge):not(.cm-btn):hover { color: var(--color-link-hover); }
.cm-trust a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: var(--shadow-focus); }
.cm-trust__foot .cm-trust__link.cm-btn { font-weight: var(--fw-semibold); }

@media (min-width: 768px) {
	.cm-trust__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cm-trust__quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* reserve two product lines so the caption dividers line up across the row */
	.cm-trust__product { min-height: calc(2em * 1.2); }
}
@media (min-width: 1024px) {
	.cm-trust__stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
	.cm-trust__stats-band { padding: var(--sp-20) var(--sp-12); }
	.cm-trust__stat { padding: var(--sp-20) var(--sp-12) var(--sp-16); min-height: 136px; }
	.cm-trust__label { font-size: var(--fs-14); }
	.cm-trust__badges li { flex-basis: 100%; }
	.cm-trust__quote-mark { font-size: var(--fs-108); }
}
@media (prefers-reduced-motion: reduce) {
	.cm-trust__badge, .cm-trust__badge-arrow, .cm-trust__quote { transition: none; }
	.cm-trust__badge:hover { transform: none; }
}

/* ---- Foot row polish (2026-10-03): guaranteed gap under the quote cards, WorkSuite line wraps inside the container ---- */
.cm-trust .cm-trust__foot {
	margin-top: var(--sp-48) !important;
	row-gap: var(--sp-16);
	column-gap: var(--sp-24);
}
.cm-trust .cm-trust__foot .cm-trust__wsuite {
	flex: 1 1 280px;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	text-wrap: balance;
	text-align: left;
}
@media (max-width: 1023px) {
	.cm-trust .cm-trust__foot { flex-direction: column; margin-top: var(--sp-40) !important; }
	.cm-trust .cm-trust__foot .cm-trust__wsuite { flex: 0 1 auto; text-align: center; max-width: 36em; }
}