/* ACCS marketing: Manrope, light UI, brand red; images via /wp-content/uploads (mirror) */

*,
*::before,
*::after {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

:root {
	/* Neutral grays (less blue than prior #f4f6f9 / #eef1f6 family), slightly closer to black. */
	--bg: #e7e7e9;
	--bg2: #ededee;
	--surface: #f3f3f4;
	--text: #141416;
	--muted: #535358;
	--accent: #c41230;
	--accent-hover: #a30f28;
	--accent-ink: #f3f3f4;
	/* Primary / accent-filled controls (.site-btn, contact submit): tighter than former pill. */
	--site-btn-radius: 6px;
	--border: rgba(20, 20, 22, 0.12);
	--radius: 14px;
	--font: "Manrope", system-ui, -apple-system, sans-serif;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--header-h: 72px;
	/* Set from measured .site-header height in site.js (falls back to --header-h). */
	--site-header-h: var(--header-h);
	/* Shared vertical padding for every <section> in main (and footer). */
	--section-padding-y: 64px;
	/* Hero halftone: inline SVG mask (white = show image). Base64 avoids fetch/CORS quirks. */
	--hero-photo-grid-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjMDAwIi8+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjEiIGZpbGw9IiNmZmYiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxNiIgZmlsbD0iI2ZmZiIvPjxjaXJjbGUgY3g9IjQiIGN5PSI0IiByPSIxIiBmaWxsPSIjZmZmIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI0IiByPSIxIiBmaWxsPSIjZmZmIi8+PGNpcmNsZSBjeD0iNCIgY3k9IjEyIiByPSIxIiBmaWxsPSIjZmZmIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMSIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
	/* Smaller = denser repeat of the mask tile (was 16px → 8px → 6px). */
	--hero-halftone-mask-size: 4px;
	/* Hero section halftone background (masked). */
	--hero-halftone-image: url("/wp-content/uploads/2025/09/banner-sephora.jpg");
	/* 1 = full strength; lower lets more of --bg2 show through the halftone. */
	--hero-halftone-opacity: 0.55;
	/* Header / mega / drawer surfaces (light defaults; dark overrides below). */
	--chrome-bg: rgba(240, 240, 242, 0.92);
	--chrome-bg-solid: rgba(242, 242, 244, 0.98);
	--chrome-line: rgba(252, 252, 252, 0.85);
	--input-bg: #fff;
	--subpage-hero-grad-a: #ececed;
	--subpage-hero-grad-b: #e0e0e3;
	--metrics-sticky-th: rgba(238, 238, 240, 0.98);
	--metrics-sticky-corner: rgba(234, 234, 236, 0.99);
}

html {
	scroll-behavior: smooth;
}

/*
 * Dark/light toggle: many components transition background/color/border. Without this,
 * those animate while CSS variables flip instantly, which looks “late”. theme.js sets
 * data-accs-theme-switching only when the scheme actually changes.
 */
html[data-accs-theme-switching="1"],
html[data-accs-theme-switching="1"] *,
html[data-accs-theme-switching="1"] *::before,
html[data-accs-theme-switching="1"] *::after {
	transition-duration: 0ms !important;
	transition-delay: 0ms !important;
	animation-duration: 0ms !important;
	animation-delay: 0ms !important;
}

/* Mobile drawer open: site.js sets this class while body is position:fixed (extra guard for scroll chaining). */
html.site-nav-scroll-locked {
	overflow: hidden;
	overscroll-behavior: none;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

/*
 * Selection policy: only page copy (main/footer prose), form fields, and the skip link;
 * not buttons, button-styled links, logos, or header/nav chrome.
 */
main.site-main,
.site-footer {
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}

main.site-main button,
main.site-main .site-btn,
main.site-main input[type="button"],
main.site-main input[type="submit"],
main.site-main input[type="reset"],
main.site-main [role="button"],
.site-footer button,
.site-footer .site-btn,
.site-footer input[type="button"],
.site-footer input[type="submit"],
.site-footer input[type="reset"],
.site-footer [role="button"] {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

main.site-main img,
.site-footer img,
main.site-main .home-logos__carousel {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

input,
textarea,
select,
[contenteditable="true"] {
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 10000;
	padding: 8px 16px;
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: var(--site-btn-radius);
	font-weight: 600;
	transition: top 0.2s;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}

.skip-link:focus {
	top: 16px;
}

a {
	color: var(--accent);
	text-underline-offset: 0.15em;
}

a:hover {
	color: var(--accent-hover);
}

.wrap {
	width: 100%;
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: 16px;
}

.wrap--narrow {
	max-width: 960px;
}

/* == Header == */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1002;
	background: var(--chrome-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
	box-shadow: 0 1px 0 var(--chrome-line);
}

.site-header__inner {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding: 10.4px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--header-h);
}

/* Light: transparent wordmark PNG. Dark: dedicated white-on-black asset; same slot for both. */
.site-logo {
	--site-logo-slot-w: 220px;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	line-height: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: none;
	width: var(--site-logo-slot-w);
	max-width: 100%;
	height: 40px;
	max-height: 40px;
	flex: 0 1 auto;
	min-width: 0;
	vertical-align: middle;
}

.site-logo img,
.site-logo__mark {
	display: block;
	flex-shrink: 0;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	object-fit: contain;
	object-position: left center;
}

html:not([data-color-scheme="dark"]) .site-logo__mark--dark {
	display: none !important;
}

html[data-color-scheme="dark"] .site-logo__mark--light {
	display: none !important;
}

html[data-color-scheme="dark"] .site-logo__mark--dark {
	display: block !important;
}

/* Top row: logo + mobile menu only. Keeps the drawer <nav> out of the flex row (avoids layout gaps / clipping on small screens). */
.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 0 1 auto;
	min-width: 0;
}

.site-nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	appearance: none;
	-webkit-appearance: none;
}

.site-nav-toggle__bars {
	width: 20px;
	height: 2px;
	background: var(--text);
	box-shadow: 0 -6px 0 var(--text), 0 6px 0 var(--text);
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: 1;
	justify-content: flex-end;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 4px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.site-nav a,
.site-nav__sub-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.25;
	padding: 6.4px 0;
	margin: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: inherit;
}

.site-nav__sub-toggle {
	appearance: none;
	-webkit-appearance: none;
}

.site-nav a:hover,
.site-nav__sub-toggle:hover {
	color: var(--accent);
}

.site-nav__item--mega.is-mega-open .site-nav__sub-toggle,
.site-nav__item--mega.is-open .site-nav__sub-toggle {
	color: var(--accent);
}

.site-nav__item--has-sub {
	position: relative;
}

/* == Full-width mega panels (desktop) == */
@media (min-width: 1100px) {
	/*
	 * Mega panels: position:fixed + full viewport width. Centering with %/translate on the <li> made the
	 * panel align to each nav item (shifted right). Stacking: mega (1) < ::before (2) < inner (3).
	 */
	.site-header {
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-bottom: none;
		box-shadow: none;
	}

	.site-header::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: var(--site-header-h, var(--header-h));
		z-index: 2;
		pointer-events: none;
		background: var(--chrome-bg);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-bottom: 1px solid var(--border);
		box-shadow: 0 1px 0 var(--chrome-line);
	}

	/* Logo | centered primary links | phone + theme; list/tail flatten as grid items of the inner (display:contents on nav). */
	.site-header__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 0;
		column-gap: 16px;
		row-gap: 5.6px;
		min-width: 0;
		z-index: 3;
		justify-content: normal;
	}

	.site-header__bar {
		grid-column: 1;
		justify-self: start;
		align-self: center;
		min-width: 0;
	}

	.site-nav {
		display: contents;
	}

	.site-nav__list {
		grid-column: 2;
		justify-self: center;
		align-self: center;
		align-items: stretch;
		width: max-content;
		max-width: 100%;
		min-width: 0;
		/* Flex gap creates dead zones between items; padding on <li> replaces spacing. */
		column-gap: 0;
		row-gap: 5.6px;
	}

	.site-nav__tail {
		grid-column: 3;
		justify-self: end;
		align-self: center;
		margin-left: 0;
	}

	.site-nav__list > li {
		display: flex;
		align-items: center;
		padding-inline: 8.8px;
	}

	/* Top edge flush with header bottom (no +1px gap; it broke hover paths and showed a hairline). */
	.site-nav-mega {
		position: fixed;
		left: 0;
		right: 0;
		top: var(--site-header-h, var(--header-h));
		width: 100%;
		max-width: none;
		padding-top: 0;
		z-index: 1;
		background: var(--chrome-bg-solid);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-top: 2px solid var(--accent);
		border-bottom: 1px solid var(--border);
		box-shadow: 0 18px 40px rgba(22, 25, 34, 0.08);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: none;
	}

	.site-nav-mega.is-mega-panel-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.site-nav-mega__inner {
		padding: 21.6px 16px 26.4px;
		width: 100%;
		max-width: 1120px;
		margin-inline: auto;
	}

	.site-nav-mega__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px 48px;
		align-items: start;
	}

	.site-nav-mega__grid--compact {
		grid-template-columns: minmax(0, 352px);
		max-width: 448px;
	}

	.site-nav-mega__heading {
		margin: 0 0 10.4px;
		font-size: 0.72rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: var(--accent);
	}

	.site-nav-mega__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 2.4px;
	}

	.site-nav-mega__list a {
		display: block;
		padding: 8px 10.4px;
		margin: 0 -10.4px;
		border-radius: 8px;
		font-size: 0.95rem;
		font-weight: 600;
		color: var(--text);
		text-decoration: none;
		transition: background 0.15s var(--ease), color 0.15s var(--ease);
	}

	.site-nav-mega__list a:hover {
		background: rgba(196, 18, 48, 0.08);
		color: var(--accent);
	}
}

.site-nav__tail {
	display: flex;
	align-items: center;
	gap: 5.6px;
	margin-left: 0;
	flex-shrink: 0;
}

.site-nav__theme {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-nav__cta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	min-width: 0;
}

/* Desktop: fixed slot so collapsed phone ↔ Copy/Call/“Copied” does not shift the rest of the nav. */
@media (min-width: 1100px) {
	.site-nav__tail {
		margin-left: 0;
		min-width: min-content;
		flex-shrink: 0;
		gap: 10.4px;
	}

	.site-nav__cta {
		flex: 0 0 216px;
		flex-shrink: 0;
		width: 216px;
		min-width: 216px;
		max-width: 216px;
		box-sizing: border-box;
		justify-content: center;
		padding-inline: 0;
	}

	.site-nav__cta .home-call--nav-text {
		width: 100%;
		max-width: 100%;
		text-align: center;
	}
}

/* Navbar phone: tap/click reveals plain-text Copy + Call (same behavior as hero home-call). */
.home-call--nav-text .home-call__panel {
	display: inline-block;
	vertical-align: top;
	text-align: inherit;
}

.home-call--nav-text .home-call__trigger--nav-text {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 6.4px 0;
	display: inline-flex;
	align-items: center;
	font: inherit;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.25;
	color: var(--text);
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.home-call--nav-text .home-call__trigger--nav-text:hover,
.home-call--nav-text .home-call__trigger--nav-text:focus-visible {
	color: var(--accent);
	outline: none;
}

.home-call--nav-text .home-call__choice {
	gap: 10.4px 16px;
	align-items: center;
}

/* Navbar: overlay top:0 sat above visually centered <li> links; expanded uses in-flow row so Copy/Call share the same vertical center as the phone trigger. */
@media (min-width: 1100px) {
	.site-nav__cta .home-call--nav-text .home-call__panel {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		min-height: 33px;
		vertical-align: middle;
		box-sizing: border-box;
	}

	.site-nav__cta .home-call--nav-text:not(.is-expanded) .home-call__trigger--nav-text {
		margin-inline: auto;
	}

	.site-nav__cta .home-call--nav-text.is-expanded .home-call__panel {
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		gap: 7.2px;
	}

	.site-nav__cta .home-call--nav-text.is-expanded .home-call__trigger--nav-text {
		display: none;
	}

	.site-nav__cta .home-call--nav-text.is-expanded .home-call__choice {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		gap: 7.2px;
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

@media (max-width: 1099px) {
	.site-nav__cta .home-call--nav-text.is-expanded .home-call__panel {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 16px;
	}

	.site-nav__cta .home-call--nav-text.is-expanded .home-call__trigger--nav-text {
		display: none;
	}

	.site-nav__cta .home-call--nav-text.is-expanded .home-call__choice {
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

.home-call--nav-text .home-call__copy--nav-text,
.home-call--nav-text .home-call__dial--nav-text {
	margin: 0;
	padding: 0;
	display: inline;
	font: inherit;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.25;
	font-family: inherit;
	color: var(--accent);
	text-decoration: none;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

/* Match .site-nav a / __sub-toggle metrics so Copy/Call sit on the same row as other nav labels. */
.site-nav__cta .home-call--nav-text .home-call__copy--nav-text,
.site-nav__cta .home-call--nav-text .home-call__dial--nav-text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6.4px 0;
	color: var(--text);
}

.site-nav__cta .home-call--nav-text .home-call__copy--nav-text:hover,
.site-nav__cta .home-call--nav-text .home-call__copy--nav-text:focus-visible,
.site-nav__cta .home-call--nav-text .home-call__dial--nav-text:hover,
.site-nav__cta .home-call--nav-text .home-call__dial--nav-text:focus-visible {
	color: var(--accent);
	outline: none;
}

.home-call--nav-text .home-call__copy--nav-text:hover,
.home-call--nav-text .home-call__copy--nav-text:focus-visible,
.home-call--nav-text .home-call__dial--nav-text:hover,
.home-call--nav-text .home-call__dial--nav-text:focus-visible {
	color: var(--accent-hover);
	outline: none;
}

.site-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8.8px 17.6px;
	border-radius: var(--site-btn-radius);
	font-family: var(--font);
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.25;
	text-decoration: none;
	transition: box-shadow 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease),
		color 0.18s var(--ease);
	border: 2px solid transparent;
}

button.site-btn {
	margin: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.site-btn--primary {
	background: var(--accent);
	color: var(--accent-ink);
	box-shadow: 0 4px 16px rgba(196, 18, 48, 0.25);
}

.site-btn--primary:hover {
	background: var(--accent-hover);
	color: var(--accent-ink);
	box-shadow: 0 6px 20px rgba(196, 18, 48, 0.3);
}

.site-btn--primary:focus-visible {
	outline: none;
	background: var(--accent-hover);
	color: var(--accent-ink);
	box-shadow:
		0 6px 20px rgba(196, 18, 48, 0.3),
		0 0 0 3px rgba(196, 18, 48, 0.28);
}

.site-btn--ghost {
	border-color: var(--border);
	color: var(--text);
	background: transparent;
}

.site-btn--ghost:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.site-btn--outline {
	border: 2px solid var(--accent);
	color: var(--accent);
	background: transparent;
}

.site-btn--outline:hover {
	background: var(--accent-hover);
	color: var(--accent-ink);
	border-color: var(--accent-hover);
	box-shadow: 0 6px 20px rgba(196, 18, 48, 0.3);
}

.site-btn--outline:focus-visible {
	outline: none;
	background: var(--accent-hover);
	color: var(--accent-ink);
	border-color: var(--accent-hover);
	box-shadow:
		0 6px 20px rgba(196, 18, 48, 0.3),
		0 0 0 3px rgba(196, 18, 48, 0.28);
}

.site-btn--lg {
	padding: 12px 21.6px;
	font-size: 1rem;
}

/* Hero CTAs: same footprint for <a> and <button> (avoids UA button metrics vs link line-height). */
.home-hero__actions .site-btn--lg {
	min-height: 50px;
}

@media (max-width: 1099px) {
	/* Stable document box + native scrolling (smooth only affects anchor navigation). */
	html {
		scroll-behavior: auto;
		min-height: 100%;
		min-height: 100dvh;
		overflow-x: hidden;
		/* none on both axes broke touch pan scrolling on iOS/WebKit public pages; keep x tight only. */
		overscroll-behavior-x: none;
		overscroll-behavior-y: auto;
	}

	body {
		min-height: 100%;
		min-height: 100dvh;
		padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
		overflow-x: hidden;
		overscroll-behavior-x: none;
		overscroll-behavior-y: auto;
	}

	/* Avoid browser “scroll anchoring” nudging scroll when late-loaded content/layout shifts. */
	main.site-main {
		overflow-anchor: none;
	}

	/* Fixed bar (was sticky); height locked to --header-h. JS does not override --site-header-h on mobile. */
	.site-header {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		min-height: var(--header-h);
		box-sizing: border-box;
		background: var(--chrome-bg);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-bottom: 1px solid var(--border);
		box-shadow: 0 1px 0 var(--chrome-line);
		transition: transform 0.22s var(--ease);
	}

	.site-header.site-header--scroll-hidden {
		transform: translateY(-100%);
		pointer-events: none;
	}

	/* Spacer for fixed header: marketing pages only (see .page-metrics override below). */
	.site-main {
		padding-top: var(--header-h);
	}

	/*
	 * Internal portals: `.internal-portal-strip` lives between fixed header and <main>.
	 * Padding main would double-clear the header; offset the strip instead so content aligns
	 * flush under the navbar on narrow viewports.
	 */
	body.page-metrics .internal-portal-strip {
		padding-top: var(--header-h);
	}

	body.page-metrics .site-main {
		padding-top: 0;
	}

	.site-header::before {
		display: none;
	}

	/* Single visible row (logo + hamburger); fixed <nav> is out of flow and must not sit in the same flex row as the bar. */
	.site-header__inner {
		display: block;
	}

	body.page-metrics .site-header__inner {
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
		padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
		box-sizing: border-box;
	}

	.site-header__bar {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.site-logo {
		min-width: 0;
		--site-logo-slot-w: 220px;
	}

	.site-nav-toggle {
		display: flex;
		position: relative;
		z-index: 3;
	}

	/* Drawer: explicit height (mobile vh quirks) + no flex participation from desktop rules */
	.site-nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: var(--site-header-h, var(--header-h));
		z-index: 1001;
		flex: none;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 100%;
		/* Fill space below header; dvh tracks visible viewport on mobile browsers */
		height: calc(100vh - var(--site-header-h, var(--header-h)));
		height: calc(100dvh - var(--site-header-h, var(--header-h)));
		max-height: calc(100vh - var(--site-header-h, var(--header-h)));
		max-height: calc(100dvh - var(--site-header-h, var(--header-h)));
		padding: 16px 16px max(16px, env(safe-area-inset-bottom, 0px));
		gap: 0;
		background: var(--chrome-bg-solid);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		transform: translateX(100%);
		transition: transform 0.25s var(--ease);
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start;
		border-top: 2px solid var(--accent);
		/* Shadow only while open; otherwise it bleeds past translateX(100%) onto the page */
		box-shadow: none;
	}

	.site-nav.is-open {
		transform: translateX(0);
		box-shadow: -8px 0 40px rgba(22, 25, 34, 0.12);
	}

	.site-nav__list {
		flex: 0 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.site-nav__list > li {
		border-bottom: 1px solid var(--border);
	}

	.site-nav a,
	.site-nav__sub-toggle {
		display: block;
		padding: 13.6px 0;
	}

	/* Stack toggle + submenu in document order (submenu directly under the tapped item). */
	.site-nav__list > li.site-nav__item--mega {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.site-nav__item--mega > .site-nav__sub-toggle {
		flex: 0 0 auto;
		width: 100%;
		text-align: left;
	}

	/* Flat submenus: no card chrome; same font stack as primary nav */
	.site-nav-mega {
		position: static;
		width: 100%;
		display: none;
		margin: 0;
		padding: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-top: 1px solid var(--border);
		font-family: var(--font);
	}

	.site-nav-mega.is-mega-panel-open {
		display: block;
	}

	.site-nav-mega__inner {
		padding: 21.6px 0 13.6px 12px;
		width: 100%;
		max-width: none;
	}

	.site-nav-mega__grid {
		grid-template-columns: 1fr;
		gap: 40px;
		align-items: start;
	}

	/* Extra air above 2nd+ section titles (e.g. POINT OF SALE, HELP); grid gap alone wasn’t enough visually */
	.site-nav-mega__section:not(:first-child) {
		padding-top: 13.6px;
	}

	.site-nav-mega__heading {
		margin: 0 0 8px;
		font-family: var(--font);
		font-size: 0.75rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: var(--accent);
	}

	.site-nav-mega__list {
		list-style: none;
		margin: 0;
		padding: 0;
		gap: 0;
	}

	.site-nav-mega__list li {
		margin: 0;
		padding: 0;
		border: none;
	}

	.site-nav-mega__list a {
		display: block;
		padding: 7.2px 0;
		margin: 0;
		border-radius: 0;
		font-family: var(--font);
		font-size: 0.9rem;
		font-weight: 600;
		color: var(--text);
		text-decoration: none;
		transition: color 0.15s var(--ease);
	}

	.site-nav-mega__list a:hover,
	.site-nav-mega__list a:focus-visible {
		color: var(--accent);
		background: transparent;
	}

	.site-nav__tail {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-left: 0;
		margin-top: auto;
		padding-top: 16px;
		border-top: 1px solid var(--border);
		flex-shrink: 0;
	}

	.site-nav__cta {
		flex: 1 1 auto;
		min-width: 0;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.site-nav__theme {
		flex-shrink: 0;
		justify-content: flex-end;
	}
}

/* == Main == */
.site-main {
	min-height: 50vh;
}

/* Consistent top/bottom padding for every content section (templates use <section> per block). */
main.site-main > section {
	padding-block: var(--section-padding-y);
}

/* Home: soft depth on the right edge (lighter than the mobile drawer shadow). */
body.page-home .site-main {
	box-shadow: inset -6px 0 28px -12px rgba(22, 25, 34, 0.055);
}

/* == Home: hero == */
.home-hero {
	position: relative;
	isolation: isolate;
	background-color: var(--bg2);
	border-bottom: 1px solid var(--border);
}

/* Full-section halftone; gaps show --bg2. */
.home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: var(--hero-halftone-opacity);
	background-image: var(--hero-halftone-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-mask-image: var(--hero-photo-grid-mask);
	-webkit-mask-size: var(--hero-halftone-mask-size) var(--hero-halftone-mask-size);
	-webkit-mask-repeat: repeat;
	-webkit-mask-position: 0 0;
	-webkit-mask-mode: luminance;
	mask-image: var(--hero-photo-grid-mask);
	mask-size: var(--hero-halftone-mask-size) var(--hero-halftone-mask-size);
	mask-repeat: repeat;
	mask-position: 0 0;
	mask-mode: luminance;
}

@media (max-width: 1099px) {
	/* Dot-matrix hero photo reads too faint on small screens; +10% opacity vs --hero-halftone-opacity. */
	.home-hero::before {
		opacity: min(1, calc(var(--hero-halftone-opacity) + 0.1));
	}
}

.home-hero > .wrap {
	position: relative;
	z-index: 1;
}

.home-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: start;
}

@media (max-width: 1099px) {
	/* Stack CTAs full width: match “Get a free quote” and phone row; Copy + Call stay one line. */
	.home-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.home-hero__actions > .site-btn--primary {
		width: 100%;
		box-sizing: border-box;
	}

	.home-hero__actions .home-call {
		width: 100%;
		min-width: 0;
	}

	.home-hero__actions .home-call__panel {
		display: block;
		width: 100%;
		box-sizing: border-box;
		min-width: 0;
	}

	.home-hero__actions .home-call.is-expanded .home-call__panel {
		width: 100%;
		min-width: 0;
	}

	.home-hero__actions .home-call__trigger {
		width: 100%;
		box-sizing: border-box;
	}

	.home-hero__actions .home-call__choice {
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
		gap: 10.4px;
	}

	.home-hero__actions .home-call__choice .site-btn,
	.home-hero__actions .home-call__choice a.site-btn {
		flex: 1 1 0;
		width: 100%;
		min-width: 0;
		justify-content: center;
		box-sizing: border-box;
	}

	.home-hero__actions .home-call__copy {
		min-inline-size: 0;
	}
}

.home-hero__title {
	font-size: clamp(1.65rem, 3.15vw, 2.3rem);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0 0 13.6px;
	color: var(--text);
	hyphens: none;
	-webkit-hyphens: none;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.92),
		0 1px 10px rgba(255, 255, 255, 0.45),
		0 1px 2px rgba(22, 25, 34, 0.12);
}

/* Avoid line breaks inside hyphenated terms (browsers may split at the hyphen otherwise). */
.home-hero__nowrap {
	white-space: nowrap;
}

.home-hero__deck {
	font-size: 1.12rem;
	color: var(--muted);
	margin: 0 0 28px;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 1),
		0 0 4px rgba(255, 255, 255, 1),
		0 0 12px rgba(255, 255, 255, 0.98),
		0 0 26px rgba(255, 255, 255, 0.9),
		0 3px 12px rgba(255, 255, 255, 0.72),
		0 1px 3px rgba(22, 25, 34, 0.32),
		0 2px 12px rgba(22, 25, 34, 0.18);
}

@media (min-width: 1100px) {
	.home-hero > .wrap {
		width: 100%;
		max-width: 1280px;
	}

	.home-hero__title {
		max-width: 928px;
	}

	.home-hero__deck {
		max-width: min(72ch, 100%);
	}
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.home-call {
	position: relative;
}

.home-call__panel {
	position: relative;
	display: inline-block;
	vertical-align: top;
}

.home-call__choice {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10.4px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 2;
}

.home-call.is-expanded .home-call__choice {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.home-call__trigger {
	position: relative;
	z-index: 1;
}

.home-call.is-expanded .home-call__trigger {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 0;
}

.home-call.is-expanded .home-call__panel {
	min-width: 304px;
}

.home-call.home-call--nav-text.is-expanded .home-call__panel {
	min-width: max-content;
}

/* Desktop: Copy + Call shrink-wrap; min-width on Copy lives in min-width:1100px block below. */
@media (min-width: 1100px) {
	.home-hero__actions .home-call__choice {
		flex-wrap: nowrap;
		width: max-content;
	}
}

/* Home-call CTAs: #F8F8F8 rest surface; outline buttons need explicit hover/focus so they beat the default-bg rule. */
.home-hero__actions .home-call__trigger,
.home-hero__actions .home-call__dial,
.home-hero__actions .home-call__copy:not(.home-call__btn--filled) {
	background: var(--surface);
}

.home-hero__actions .home-call__trigger:hover,
.home-hero__actions .home-call__dial:hover,
.home-hero__actions .home-call__copy:not(.home-call__btn--filled):hover {
	background: var(--accent-hover);
	color: var(--accent-ink);
	border-color: var(--accent-hover);
	box-shadow: 0 6px 20px rgba(196, 18, 48, 0.3);
}

.home-hero__actions .home-call__trigger:focus-visible,
.home-hero__actions .home-call__dial:focus-visible,
.home-hero__actions .home-call__copy:not(.home-call__btn--filled):focus-visible {
	outline: none;
	background: var(--accent-hover);
	color: var(--accent-ink);
	border-color: var(--accent-hover);
	box-shadow:
		0 6px 20px rgba(196, 18, 48, 0.3),
		0 0 0 3px rgba(196, 18, 48, 0.28);
}

/* Copy: reserve width for label vs checkmark (desktop only; mobile uses equal flex + min-inline-size: 0). */
@media (min-width: 1100px) {
	.home-hero__actions .home-call__copy {
		min-inline-size: 96px;
	}
}

/* Copy / Call after use: same filled look as primary “Get a free quote” (reset when panel closes). */
.home-hero__actions .home-call__choice .site-btn.home-call__btn--filled {
	background: var(--accent);
	color: var(--accent-ink);
	border-color: transparent;
	box-shadow: 0 4px 16px rgba(196, 18, 48, 0.25);
	transform: none;
}

.home-hero__actions .home-call__choice .site-btn.home-call__btn--filled:hover {
	background: var(--accent-hover);
	color: var(--accent-ink);
	box-shadow: 0 6px 20px rgba(196, 18, 48, 0.3);
	transform: none;
}

.home-hero__actions .home-call__choice .site-btn.home-call__btn--filled:focus-visible {
	outline: none;
	background: var(--accent-hover);
	color: var(--accent-ink);
	box-shadow:
		0 6px 20px rgba(196, 18, 48, 0.3),
		0 0 0 3px rgba(196, 18, 48, 0.28);
	transform: none;
}

.home-hero__actions .home-call__check-icon {
	display: block;
}

/* == Home: features band == */
.home-band {
	background: var(--bg);
}

.home-band__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

@media (max-width: 1099px) {
	.home-band__grid {
		grid-template-columns: 1fr;
	}
}

.home-feature {
	display: flex;
	gap: 16px;
	margin-bottom: 28px;
}

.home-feature:last-child {
	margin-bottom: 0;
}

.home-feature__icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(196, 18, 48, 0.08);
	color: var(--accent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-feature__icon svg {
	width: 26px;
	height: 26px;
}

.home-feature__title {
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	margin: 0 0 5.6px;
	color: var(--text);
}

.home-feature__text {
	margin: 0;
	font-size: 0.98rem;
	color: var(--muted);
	line-height: 1.55;
}

.home-band__art img {
	display: block;
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
	height: auto;
}

/* == Home: solutions == */
.home-solutions {
	background: var(--bg2);
}

.home-solutions__head {
	text-align: center;
	margin-bottom: 40px;
}

.home-solutions__title {
	font-size: clamp(1.65rem, 3vw, 2.1rem);
	font-weight: 800;
	margin: 0 0 8px;
	letter-spacing: -0.02em;
}

.home-solutions__subtitle {
	margin: 0;
	color: var(--muted);
	font-size: 1.1rem;
}

.home-solutions__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 1000px) {
	.home-solutions__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.home-solutions__grid {
		grid-template-columns: 1fr;
	}
}

.home-tile {
	background: var(--surface);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	overflow: hidden;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.home-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(22, 25, 34, 0.1);
}

.home-tile__media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #dcdcdf;
}

.home-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.home-tile__title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 16px 16px 5.6px;
	color: var(--text);
}

.home-tile__text {
	margin: 0 16px 20px;
	font-size: 0.92rem;
	color: var(--muted);
	line-height: 1.5;
}

/* == Home: logos == */
.home-logos {
	background: var(--bg);
	border-block: 1px solid var(--border);
}

.home-logos__title {
	text-align: center;
	font-size: 1.25rem;
	font-weight: 800;
	margin: 0 0 5.6px;
}

.home-logos__subtitle {
	text-align: center;
	color: var(--muted);
	margin: 0 0 16px;
	font-size: 1rem;
}

.home-logos__rule {
	border: none;
	border-top: 1px solid var(--border);
	margin: 0 auto 28px;
	max-width: 200px;
}

.home-logos__carousel {
	margin-top: 0;
}

.home-logos__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	touch-action: pan-x;
	margin: 0 -16px;
	padding: 4px 16px 12px;
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
}

.home-logos__viewport::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.home-logos__track {
	display: flex;
	width: max-content;
	flex-shrink: 0;
}

.home-logos__strip {
	display: flex;
	align-items: center;
	gap: 44px;
	margin: 0;
	padding: 0 24px 0 0;
	list-style: none;
	flex-shrink: 0;
}

.home-logos__strip li {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-logos__strip img {
	display: block;
	max-width: 180px;
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
	-webkit-user-drag: none;
	pointer-events: auto;
	filter: grayscale(0.15);
	opacity: 0.92;
	transition: opacity 0.2s, filter 0.2s;
}

.home-logos__strip img:hover {
	opacity: 1;
	filter: none;
}

/* Infinite marquee: translate the track (two duplicate strips). Desktop/tablet; mobile uses scrollLeft in site.js. */
@keyframes home-logos-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.home-logos__viewport {
		overflow: hidden;
		-webkit-overflow-scrolling: auto;
		touch-action: manipulation;
		cursor: default;
	}

	.home-logos__track {
		animation: home-logos-marquee 50s linear infinite;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		will-change: transform;
	}
}

/*
 * Mobile: much faster loop + no edge mask.
 * WebKit often blanks transformed children when the viewport uses -webkit-mask-image + overflow:hidden
 * (logos “vanish”). Fade edges are optional; stability beats the soft mask on narrow screens.
 */
@media (prefers-reduced-motion: no-preference) and (max-width: 1099px) {
	/*
	 * iOS Safari: overflow:hidden + transform on the track can drop painted bitmaps of child <img>s
	 * for stretches of the loop; isolate + own layer reduces “blank strip” flashes.
	 * Duplicate strip imgs use loading="eager" so lazy-load never leaves the second copy empty.
	 */
	.home-logos__viewport {
		mask-image: none;
		-webkit-mask-image: none;
		isolation: isolate;
		transform: translateZ(0);
	}

	.home-logos__track {
		animation-duration: 13s;
	}
}

@media (prefers-reduced-motion: no-preference) and (max-width: 480px) {
	.home-logos__track {
		animation-duration: 11s;
	}
}

/*
 * Mobile: JS scrollLeft marquee (see site.js). Avoids iOS/WebKit blanking transformed <img>
 * stacks under overflow:hidden; class is toggled only at max-width:1099px + motion OK.
 */
@media (prefers-reduced-motion: no-preference) and (max-width: 1099px) {
	.home-logos__carousel--scroll-marquee .home-logos__viewport {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		touch-action: none;
		cursor: default;
		mask-image: none;
		-webkit-mask-image: none;
		isolation: auto;
		transform: none;
		pointer-events: none;
	}

	.home-logos__carousel--scroll-marquee .home-logos__track {
		animation: none !important;
		will-change: auto;
		-webkit-backface-visibility: visible;
		backface-visibility: visible;
	}
}

@media (hover: hover) {
	.home-logos__carousel:hover .home-logos__track {
		animation-play-state: paused;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-logos__viewport {
		overflow: visible;
		mask-image: none;
		-webkit-mask-image: none;
		touch-action: auto;
		cursor: default;
	}

	.home-logos__track {
		animation: none !important;
		width: 100%;
		justify-content: center;
	}

	.home-logos__strip[aria-hidden="true"] {
		display: none;
	}

	.home-logos__strip {
		flex-wrap: wrap;
		justify-content: center;
		padding-right: 0;
		max-width: 896px;
		margin-inline: auto;
		gap: 20px 28px;
	}
}

/* == Home: about == */
.home-about {
	background: var(--bg2);
}

.home-about__grid {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 40px;
	align-items: center;
}

@media (max-width: 1099px) {
	.home-about__grid {
		grid-template-columns: 1fr;
	}
}

.home-about__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.home-about__col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.home-about__photos img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	border: 1px solid var(--border);
	display: block;
}

.home-about__title {
	font-size: clamp(1.65rem, 3vw, 2rem);
	font-weight: 800;
	margin: 0 0 16px;
}

.home-about__body {
	color: var(--muted);
	margin: 0 0 20px;
	font-size: 1.05rem;
	line-height: 1.65;
}

/* == Home: resources strip == */
.home-resources {
	background: var(--bg);
	border-top: 1px solid var(--border);
}

.home-resources__inner {
	display: flex;
	justify-content: center;
	text-align: center;
}

.home-resources__title {
	font-size: 1.5rem;
	font-weight: 800;
	margin: 0 0 16px;
}

/* Legacy sections (inner pages) */
.hero {
	position: relative;
	overflow: hidden;
}

.hero__bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(165deg, #f2f2f3 0%, #e2e2e5 100%);
	pointer-events: none;
	z-index: 0;
}

.hero__content {
	position: relative;
	z-index: 1;
}

.hero__eyebrow {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--muted);
	margin: 0 0 12px;
}

.hero__title {
	font-size: clamp(2rem, 4.5vw, 3.1rem);
	line-height: 1.12;
	letter-spacing: -0.03em;
	margin: 0 0 16px;
	max-width: 18ch;
}

.hero__lead {
	font-size: 1.15rem;
	color: var(--muted);
	max-width: 52ch;
	margin: 0 0 28px;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.section--alt {
	background: #e2e2e5;
	border-block: 1px solid var(--border);
}

.section__title {
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	margin: 0 0 8px;
	letter-spacing: -0.02em;
}

.section__subtitle {
	color: var(--muted);
	margin: 0 0 32px;
	max-width: 50ch;
}

.section__body {
	color: var(--muted);
	margin: 0 0 16px;
	max-width: 58ch;
}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(22, 25, 34, 0.08);
}

.card__title {
	font-size: 1.15rem;
	margin: 0 0 8px;
}

.card__text {
	margin: 0;
	color: var(--muted);
	font-size: 0.98rem;
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

@media (max-width: 800px) {
	.split {
		grid-template-columns: 1fr;
	}
}

.checklist {
	margin: 16px 0;
	padding-left: 19.2px;
	color: var(--muted);
}

.checklist li {
	margin-bottom: 6.4px;
}

.callout {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 28px;
}

.callout__quote {
	font-size: 1.1rem;
	margin: 0 0 16px;
	line-height: 1.5;
}

.callout__note {
	color: var(--muted);
	font-size: 0.9rem;
	margin: 0 0 20px;
}

.page-head {
	padding-block: var(--section-padding-y);
	border-bottom: 1px solid var(--border);
	background: var(--bg2);
}

.page-head__title {
	margin: 0 0 8px;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.page-head__lead {
	margin: 0;
	color: var(--muted);
	max-width: 60ch;
}

.page-head__lead a {
	color: var(--accent);
}

.page-prose {
	max-width: 736px;
	color: var(--muted);
}

.page-prose p {
	margin: 0 0 16px;
}

.page-prose strong {
	color: var(--text);
}

/* Contact: supplies / phone strip (between hero and phone + form). Vertical padding matches other main sections via main.site-main > section. */
.contact-extras-band {
	background: var(--bg);
	border-bottom: 1px solid var(--border);
}

.contact-extras {
	margin: 0;
	padding: 16px 20px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 1px 0 rgba(22, 25, 34, 0.04);
}

.contact-extras__text {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--text);
	text-align: center;
}

.contact-extras__text a {
	font-weight: 600;
}

/* Zoho iframe: card shell so the embed matches site chrome */
.accs-contact-zoho-wrap {
	width: 100%;
}

.accs-contact-zoho-wrap--full {
	max-width: 100%;
}

/* Full-bleed embed: no horizontal inset; iframe height set via Zoho postMessage (+ small min while loading). */
.subpage-band--contact-zoho {
	padding-inline: 0;
}

.subpage-band--contact-zoho > .wrap {
	width: 100%;
	max-width: 100%;
	padding-inline: 0;
	margin-inline: 0;
}

.contact-zoho-shell {
	padding: 28px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 12px 36px rgba(22, 25, 34, 0.06);
}

.contact-zoho-shell.contact-zoho-shell--embed {
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
}

.contact-zoho-shell.contact-zoho-shell--embed .contact-zoho-shell__frame {
	margin: 0;
	padding: 28px 20px;
	border: none;
	border-radius: 0;
	/* Match .subpage-band (same section as this embed). */
	background: var(--bg2);
	box-sizing: border-box;
}

.contact-zoho-shell__title {
	font-size: clamp(1.2rem, 2.2vw, 1.45rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 6.4px;
	color: var(--text);
}

.contact-zoho-shell__lead {
	margin: 0 0 17.6px;
	font-size: 0.98rem;
	color: var(--muted);
	line-height: 1.45;
}

.contact-zoho-shell__frame {
	border-radius: 10px;
	overflow: hidden;
	background: var(--bg2);
	border: 1px solid rgba(22, 25, 34, 0.08);
	line-height: 0;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 32px;
	align-items: start;
}

@media (max-width: 800px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

.contact-card {
	padding: 20px 0;
}

.contact-card__title {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	margin: 20px 0 5.6px;
}

.contact-card__title:first-child {
	margin-top: 0;
}

.contact-card__link {
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--accent);
	text-decoration: none;
}

.contact-iframe {
	display: block;
	width: 100%;
	min-height: 900px;
	border: 0;
	border-radius: 12px;
	/* Match surrounding band (.subpage-band uses --bg2). */
	background: var(--bg2);
	color-scheme: light dark;
}

.accs-contact-zoho-wrap--full .contact-iframe {
	min-height: 1100px;
	border: 0;
}

.contact-forms {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.accs-contact-deploy {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.accs-contact-local-wrap {
	width: 100%;
	max-width: 608px;
	margin-inline: auto;
	padding: 32px;
	box-sizing: border-box;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 12px 36px rgba(22, 25, 34, 0.06);
}

.accs-contact-form {
	max-width: 100%;
}

.accs-contact-lead {
	margin: 0 0 21.6px;
	font-size: 1.02rem;
	line-height: 1.55;
	font-weight: 600;
	color: var(--text);
}

.accs-contact-field {
	margin-bottom: 16.8px;
}

.accs-contact-field:last-of-type {
	margin-bottom: 0;
}

.accs-contact-field label {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--muted);
	margin-bottom: 6.4px;
}

.accs-req {
	color: var(--accent);
}

.accs-contact-field input,
.accs-contact-field textarea {
	width: 100%;
	padding: 11.2px 13.6px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--input-bg);
	color: var(--text);
	font: inherit;
	line-height: 1.45;
	transition:
		border-color 0.15s var(--ease),
		box-shadow 0.15s var(--ease);
}

.accs-contact-field textarea {
	min-height: 136px;
	resize: vertical;
}

.accs-contact-field input::placeholder,
.accs-contact-field textarea::placeholder {
	color: var(--muted);
	opacity: 0.75;
}

.accs-contact-field input:hover,
.accs-contact-field textarea:hover {
	border-color: rgba(196, 18, 48, 0.22);
}

.accs-contact-field input:focus,
.accs-contact-field textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.2);
}

.accs-contact-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.accs-contact-submit {
	margin-top: 17.6px;
	padding: 12.48px 29.6px;
	font: 600 1rem var(--font);
	color: var(--accent-ink);
	background: var(--accent);
	border: none;
	border-radius: var(--site-btn-radius);
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(196, 18, 48, 0.25);
	transition: background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.accs-contact-submit:hover {
	background: var(--accent-hover);
	box-shadow: 0 6px 20px rgba(196, 18, 48, 0.3);
}

.accs-contact-submit:focus-visible {
	outline: none;
	background: var(--accent-hover);
	box-shadow:
		0 6px 20px rgba(196, 18, 48, 0.3),
		0 0 0 3px rgba(196, 18, 48, 0.28);
}

.accs-contact-thanks {
	margin-top: 17.6px;
	padding: 16px 17.6px;
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.35);
	border-radius: var(--radius);
	color: #047857;
	font-weight: 600;
	line-height: 1.5;
}

.site-footer {
	margin-top: 0;
	padding-block: var(--section-padding-y);
	border-top: 1px solid rgba(248, 248, 248, 0.08);
	background: #0e0e0f;
	color: #e8e8ea;
}

.site-footer__inner {
	width: 100%;
	max-width: 1120px;
	margin-inline: auto;
}

.site-footer__brand img {
	opacity: 0.98;
	height: 25px;
	width: auto;
}

.site-footer__brand p {
	color: rgba(248, 248, 248, 0.65);
	font-size: 0.95rem;
	margin: 12px 0 32px;
}

.site-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 24px;
	margin-bottom: 32px;
}

.site-footer__heading {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(248, 248, 248, 0.55);
	margin: 0 0 8px;
}

.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer a {
	color: rgba(248, 248, 248, 0.88);
	text-decoration: none;
	font-size: 0.95rem;
}

.site-footer a:hover {
	color: #F8F8F8;
}

.site-footer li {
	margin-bottom: 5.6px;
}

.site-footer__legal {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(248, 248, 248, 0.45);
}

/* == Subpages (shared with homepage tokens) == */
.tac {
	text-align: center;
}

.subpage-hero {
	position: relative;
	background: linear-gradient(165deg, var(--subpage-hero-grad-a) 0%, var(--subpage-hero-grad-b) 100%);
	border-bottom: 1px solid var(--border);
}

/* Toggle outside .wrap (marketing / portal pages without tab strip); portal toggle lives in .metrics-tabs__list (site.js). */
.subpage-hero__collapse-tools {
	position: absolute;
	top: max(7.2px, env(safe-area-inset-top));
	right: max(10.4px, env(safe-area-inset-right));
	z-index: 4;
	max-width: calc(100% - 20px);
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	pointer-events: none;
}

.subpage-hero__collapse-tools > * {
	pointer-events: auto;
}

/*
 * .subpage-hero--compact > .wrap uses display:flex, which overrides the default hidden attribute.
 * Force-hide collapsed content and remove the gray hero band when the tab-strip toggle is used (.page-metrics portals).
 */
.subpage-hero.subpage-hero--collapsed > .wrap {
	display: none !important;
}

body.page-metrics section.subpage-hero.subpage-hero--collapsed.subpage-hero--collapse-using-portal-tab {
	display: none !important;
	border-bottom: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
}

/* Marketing + portal pages without Hub/Cases strip: thin strip with corner toggle only */
.subpage-hero.subpage-hero--collapsed:not(.subpage-hero--collapse-using-portal-tab) {
	min-height: 0 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	padding-block: 5.6px !important;
	padding-inline: 0 !important;
}

.subpage-hero.subpage-hero--collapsed:not(.subpage-hero--collapse-using-portal-tab)[class*="montage"] {
	padding-bottom: 5.6px !important;
}

@media (max-width: 540px) {
	.subpage-hero.subpage-hero--collapsed:not(.subpage-hero--collapse-using-portal-tab).subpage-hero--clover-montage {
		padding-bottom: 5.6px !important;
	}

	.subpage-hero.subpage-hero--collapsed:not(.subpage-hero--collapse-using-portal-tab).subpage-hero--linga-montage {
		padding-bottom: 5.6px !important;
	}
}

.subpage-hero.subpage-hero--collapsed:not(.subpage-hero--collapse-using-portal-tab) .subpage-hero__collapse-tools {
	position: static;
	width: 100%;
	max-width: none;
	padding-inline: max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-left));
	box-sizing: border-box;
	margin: 0;
	justify-content: flex-end;
}

/* Fallback hero: match portal tab padding so width isn’t a minimal square */
.subpage-hero .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle {
	border: 1px solid var(--border);
	border-radius: 6px;
	background: color-mix(in srgb, var(--surface) 90%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 48px;
	min-height: 44px;
	width: auto;
	height: auto;
	padding: 6.08px 10.4px;
	flex: none;
	margin-left: 0;
	align-self: auto;
	overflow: visible;
	line-height: 0;
	appearance: none;
	-webkit-appearance: none;
}

.subpage-hero .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle .metrics-tabs__tab--subhero-toggle__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
	pointer-events: none;
}

.subpage-hero .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle .metrics-tabs__tab--subhero-toggle__icon svg {
	display: block;
	flex-shrink: 0;
}

html[data-color-scheme="dark"] .subpage-hero .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle {
	background: color-mix(in srgb, var(--surface) 55%, transparent);
}

/* Single-column / text heroes: fixed height + smaller type everywhere --compact is used */
.subpage-hero--compact {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	height: 260px;
	padding-block: 22px;
	padding-inline: 0;
	overflow: hidden;
}

.subpage-hero--compact > .wrap {
	width: 100%;
	min-height: 0;
	max-height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.subpage-hero--compact .subpage-hero__eyebrow {
	font-size: 0.62rem;
	letter-spacing: 0.11em;
	margin: 0 0 4.8px;
}

.subpage-hero--compact .subpage-hero__title {
	font-size: clamp(0.98rem, 2.35vw, 1.38rem);
	line-height: 1.3;
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0 0 6.4px;
	padding-bottom: 0.08em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.subpage-hero--compact .subpage-hero__lead {
	font-size: 0.8125rem;
	line-height: 1.38;
	color: var(--muted);
	margin: 0 0 5.6px;
	max-width: 50ch;
	margin-inline: auto;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* Cart / pages with two leads: keep total block within fixed hero */
.subpage-hero--compact:has(.subpage-hero__lead ~ .subpage-hero__lead) .subpage-hero__lead {
	-webkit-line-clamp: 2;
}

.subpage-hero--compact .subpage-hero__lead:last-child {
	margin-bottom: 0;
}

/*
 * Shop compact hero: long lead + cart CTA exceeds the generic fixed compact height;
 * without this the flex-centered block clips at the top/bottom.
 */
body.page-shop .subpage-hero--compact {
	height: auto;
	min-height: 320px;
	max-height: none;
	overflow: visible;
	padding-block: 36px;
}

body.page-shop .subpage-hero--compact > .wrap {
	max-height: none;
	overflow: visible;
}

.subpage-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

@media (max-width: 1099px) {
	.subpage-hero__grid {
		grid-template-columns: 1fr;
	}
}

.subpage-hero__eyebrow {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--accent);
	font-weight: 700;
	margin: 0 0 8px;
}

.subpage-hero__title {
	font-size: clamp(1.85rem, 4vw, 2.65rem);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.03em;
	margin: 0 0 12px;
	color: var(--text);
}

.subpage-hero__lead {
	font-size: 1.05rem;
	color: var(--muted);
	margin: 0 0 16px;
	max-width: 52ch;
}

.subpage-hero__figure {
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--border);
	box-shadow: 0 16px 40px rgba(22, 25, 34, 0.08);
}

.subpage-hero__figure img {
	display: block;
	width: 100%;
	height: auto;
}

.subpage-hero__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

.subpage-hero__stack img {
	max-width: 100%;
	height: auto;
}

/* POS vendor hero wordmarks (Clover, LINGA, Dejavoo, Union): white plate + rounded bitmap, same in light and dark */
.subpage-hero__vendor-logo-card {
	display: inline-block;
	max-width: 100%;
	box-sizing: border-box;
	background: #ffffff;
	border: none;
	border-radius: var(--radius);
	padding: 10.4px 13.6px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(22, 25, 34, 0.08);
}

html[data-color-scheme="dark"] .subpage-hero__vendor-logo-card {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.06),
		0 4px 14px rgba(0, 0, 0, 0.28);
}

.subpage-hero__vendor-logo-card img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	border: none;
	border-radius: 0;
}

/* LINGA hero: wordmark above copy column; hero art + stat (overlaps photo bottom-left); images in /static/site/vendor/linga/. */
.subpage-hero--linga-montage .subpage-hero__linga-copy .subpage-hero__linga-logo {
	margin: 0 0 6.4px;
	max-width: 240px;
}

.subpage-hero--linga-montage .subpage-hero__linga-copy .subpage-hero__linga-logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 52px;
	height: auto;
	object-fit: contain;
}

.subpage-hero--linga-montage .subpage-hero__linga-montage {
	--linga-hero-photo-w: 440px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 500px;
	padding: 8px 0 16px;
	isolation: isolate;
}

.subpage-hero--linga-montage .subpage-hero__linga-layer--photo {
	position: absolute;
	z-index: 1;
	right: -1%;
	top: 50%;
	transform: translateY(-50%);
	width: var(--linga-hero-photo-w);
	max-width: 440px;
	aspect-ratio: 1748 / 938;
}

.subpage-hero--linga-montage .subpage-hero__linga-layer--photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius);
	border: none;
	box-shadow: 0 14px 40px rgba(22, 25, 34, 0.12);
}

.subpage-hero--linga-montage .subpage-hero__linga-layer--stat {
	position: absolute;
	z-index: 2;
	left: auto;
	top: auto;
	bottom: 32px;
	right: 400px;
	transform: none;
}

.subpage-hero--linga-montage .pos-stat--linga-hero {
	min-width: 140px;
	max-width: 176px;
	padding: 13.6px 17.6px;
	margin: 0;
	box-shadow: 0 10px 28px rgba(22, 25, 34, 0.08);
}

.subpage-hero--linga-montage .pos-stat__num {
	font-size: 1.35rem;
	line-height: 1.15;
}

@media (max-width: 1099px) {
	.subpage-hero--linga-montage .subpage-hero__linga-montage {
		--linga-hero-photo-w: 360px;
		min-height: 400px;
		margin-top: 12px;
		padding-left: 4px;
		padding-right: 4px;
	}

	.subpage-hero--linga-montage .subpage-hero__linga-layer--stat {
		right: 328px;
		bottom: 20px;
	}

	.subpage-hero--linga-montage .pos-stat--linga-hero {
		min-width: 128px;
		padding: 10.4px 13.6px;
	}

	.subpage-hero--linga-montage .pos-stat__num {
		font-size: 1.2rem;
	}
}

/* LINGA page: clip hero montage; same layered layout at all breakpoints (scaled on narrow screens). */
.subpage-hero--linga-montage {
	overflow-x: clip;
}

@media (max-width: 540px) {
	.subpage-hero--linga-montage .subpage-hero__linga-copy .subpage-hero__linga-logo {
		max-width: 200px;
		margin-bottom: 5.6px;
	}

	.subpage-hero--linga-montage .subpage-hero__linga-copy .subpage-hero__linga-logo img {
		max-height: 44px;
	}

	.subpage-hero--linga-montage .subpage-hero__linga-montage {
		--linga-hero-photo-w: 300px;
		min-height: 320px;
		padding: 7.2px 5.6px 10.4px;
	}

	.subpage-hero--linga-montage .subpage-hero__linga-layer--stat {
		right: 192px;
		bottom: 14px;
	}

	.subpage-hero--linga-montage .pos-stat--linga-hero {
		min-width: 112px;
		padding: 9.6px 12px;
	}

	.subpage-hero--linga-montage .pos-stat__num {
		font-size: 1.1rem;
	}
}

/* Clover hero (montage + copy column; hero art from ACCS media; www.clover.com is SPA-hosted). */
.subpage-hero--clover-montage .subpage-hero__clover-copy .subpage-hero__clover-logo {
	margin: 0 0 6.4px;
	max-width: 280px;
}

.subpage-hero--clover-montage .subpage-hero__clover-copy .subpage-hero__clover-logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 48px;
	height: auto;
	object-fit: contain;
}

.subpage-hero--clover-montage .subpage-hero__clover-montage {
	--clover-hero-photo-w: 380px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 500px;
	padding: 8px 0 16px;
	isolation: isolate;
}

.subpage-hero--clover-montage .subpage-hero__clover-layer--photo {
	position: absolute;
	z-index: 1;
	right: -1%;
	top: 50%;
	transform: translateY(-50%);
	width: var(--clover-hero-photo-w);
	max-width: 380px;
	aspect-ratio: 500 / 596;
	box-sizing: border-box;
	background: #ffffff;
	border: none;
	border-radius: var(--radius);
	padding: 7.2px;
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(22, 25, 34, 0.12);
}

html[data-color-scheme="dark"] .subpage-hero--clover-montage .subpage-hero__clover-layer--photo {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.05),
		0 14px 40px rgba(0, 0, 0, 0.35);
}

.subpage-hero--clover-montage .subpage-hero__clover-layer--photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 11px;
	border: none;
	box-shadow: none;
}

.subpage-hero--clover-montage .subpage-hero__clover-layer--stat {
	position: absolute;
	z-index: 2;
	left: auto;
	top: auto;
	bottom: 38px;
	right: 340px;
	transform: none;
}

.subpage-hero--clover-montage .pos-stat--clover-hero {
	min-width: 140px;
	max-width: 176px;
	padding: 13.6px 17.6px;
	margin: 0;
	box-shadow: 0 10px 28px rgba(22, 25, 34, 0.08);
}

.subpage-hero--clover-montage .pos-stat--clover-hero .pos-stat__num {
	font-size: 1.35rem;
	line-height: 1.15;
}

@media (max-width: 1099px) {
	.subpage-hero--clover-montage .subpage-hero__clover-montage {
		--clover-hero-photo-w: 320px;
		min-height: 400px;
		margin-top: 12px;
		padding-left: 4px;
		padding-right: 4px;
	}

	.subpage-hero--clover-montage .subpage-hero__clover-layer--stat {
		right: 288px;
		bottom: 22px;
	}

	.subpage-hero--clover-montage .pos-stat--clover-hero {
		min-width: 128px;
		padding: 10.4px 13.6px;
	}

	.subpage-hero--clover-montage .pos-stat--clover-hero .pos-stat__num {
		font-size: 1.2rem;
	}
}

.subpage-hero--clover-montage {
	overflow-x: clip;
}

@media (max-width: 540px) {
	.subpage-hero.subpage-hero--clover-montage {
		padding-bottom: 76px;
	}

	.subpage-hero--clover-montage .subpage-hero__clover-copy .subpage-hero__clover-logo {
		max-width: 220px;
		margin-bottom: 5.6px;
	}

	.subpage-hero--clover-montage .subpage-hero__clover-copy .subpage-hero__clover-logo img {
		max-height: 40px;
	}

	.subpage-hero--clover-montage .subpage-hero__clover-montage {
		--clover-hero-photo-w: 260px;
		min-height: 320px;
		padding: 21.6px 5.6px 116px;
	}

	.subpage-hero--clover-montage .subpage-hero__clover-layer--stat {
		right: 152px;
		bottom: 6px;
		transform: translateY(60px);
	}

	.subpage-hero--clover-montage .pos-stat--clover-hero {
		min-width: 112px;
		padding: 9.6px 12px;
	}

	.subpage-hero--clover-montage .pos-stat--clover-hero .pos-stat__num {
		font-size: 1.1rem;
	}
}

/* Dejavoo hero (montage + copy; images in /static/site/vendor/dejavoo/). */
.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-copy .subpage-hero__dejavoo-logo {
	margin: 0 0 6.4px;
	max-width: 300px;
}

.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-copy .subpage-hero__dejavoo-logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 52px;
	height: auto;
	object-fit: contain;
}

.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-montage {
	--dejavoo-hero-photo-w: 420px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 480px;
	padding: 8px 0 16px;
	isolation: isolate;
}

.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-layer--photo {
	position: absolute;
	z-index: 1;
	right: -1%;
	top: 50%;
	transform: translateY(-50%);
	width: var(--dejavoo-hero-photo-w);
	max-width: 420px;
	aspect-ratio: 16 / 9;
}

.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-layer--photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius);
	border: none;
	box-shadow: 0 14px 40px rgba(22, 25, 34, 0.12);
}

.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-layer--stat {
	position: absolute;
	z-index: 2;
	left: auto;
	top: auto;
	bottom: 32px;
	right: 380px;
	transform: none;
}

.subpage-hero--dejavoo-montage .pos-stat--dejavoo-hero {
	min-width: 132px;
	max-width: 160px;
	padding: 13.6px 17.6px;
	margin: 0;
	box-shadow: 0 10px 28px rgba(22, 25, 34, 0.08);
}

.subpage-hero--dejavoo-montage .pos-stat--dejavoo-hero .pos-stat__num {
	font-size: 1.5rem;
	line-height: 1.15;
}

@media (max-width: 1099px) {
	.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-montage {
		--dejavoo-hero-photo-w: 360px;
		min-height: 380px;
		margin-top: 12px;
		padding-left: 4px;
		padding-right: 4px;
	}

	.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-layer--stat {
		right: 328px;
		bottom: 20px;
	}

	.subpage-hero--dejavoo-montage .pos-stat--dejavoo-hero {
		min-width: 120px;
		padding: 10.4px 13.6px;
	}

	.subpage-hero--dejavoo-montage .pos-stat--dejavoo-hero .pos-stat__num {
		font-size: 1.35rem;
	}
}

.subpage-hero--dejavoo-montage {
	overflow-x: clip;
}

@media (max-width: 540px) {
	.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-copy .subpage-hero__dejavoo-logo {
		max-width: 260px;
		margin-bottom: 5.6px;
	}

	.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-copy .subpage-hero__dejavoo-logo img {
		max-height: 44px;
	}

	.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-montage {
		--dejavoo-hero-photo-w: 300px;
		min-height: 300px;
		padding: 7.2px 5.6px 10.4px;
	}

	.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-layer--stat {
		right: 190px;
		bottom: 14px;
	}

	.subpage-hero--dejavoo-montage .pos-stat--dejavoo-hero {
		min-width: 108px;
		padding: 9.6px 12px;
	}

	.subpage-hero--dejavoo-montage .pos-stat--dejavoo-hero .pos-stat__num {
		font-size: 1.2rem;
	}
}

/* Union hero (montage + copy; images served from /static/site/vendor/union/). */
.subpage-hero--union-montage .subpage-hero__union-copy .subpage-hero__union-logo {
	margin: 0 0 6.4px;
	max-width: 280px;
}

.subpage-hero--union-montage .subpage-hero__union-copy .subpage-hero__union-logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 56px;
	height: auto;
	object-fit: contain;
}

.subpage-hero--union-montage .subpage-hero__union-montage {
	--union-hero-photo-w: 420px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 480px;
	padding: 8px 0 16px;
	isolation: isolate;
}

.subpage-hero--union-montage .subpage-hero__union-layer--photo {
	position: absolute;
	z-index: 1;
	right: -1%;
	top: 50%;
	transform: translateY(-50%);
	width: var(--union-hero-photo-w);
	max-width: 420px;
	aspect-ratio: 1024 / 795;
}

.subpage-hero--union-montage .subpage-hero__union-layer--photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: var(--radius);
	border: none;
	box-shadow: 0 14px 40px rgba(22, 25, 34, 0.12);
}

.subpage-hero--union-montage .subpage-hero__union-layer--stat {
	position: absolute;
	z-index: 2;
	left: auto;
	top: auto;
	bottom: 38px;
	right: 380px;
	transform: none;
}

.subpage-hero--union-montage .pos-stat--union-hero {
	min-width: 132px;
	max-width: 168px;
	padding: 13.6px 17.6px;
	margin: 0;
	box-shadow: 0 10px 28px rgba(22, 25, 34, 0.08);
}

.subpage-hero--union-montage .pos-stat--union-hero .pos-stat__num {
	font-size: 1.15rem;
	line-height: 1.15;
}

@media (max-width: 1099px) {
	.subpage-hero--union-montage .subpage-hero__union-montage {
		--union-hero-photo-w: 360px;
		min-height: 380px;
		margin-top: 12px;
		padding-left: 4px;
		padding-right: 4px;
	}

	.subpage-hero--union-montage .subpage-hero__union-layer--stat {
		right: 328px;
		bottom: 22px;
	}

	.subpage-hero--union-montage .pos-stat--union-hero {
		min-width: 118px;
		padding: 10.4px 13.6px;
	}

	.subpage-hero--union-montage .pos-stat--union-hero .pos-stat__num {
		font-size: 1.05rem;
	}
}

.subpage-hero--union-montage {
	overflow-x: clip;
}

@media (max-width: 540px) {
	.subpage-hero.subpage-hero--union-montage {
		padding-bottom: 56px;
	}

	.subpage-hero--union-montage .subpage-hero__union-copy .subpage-hero__union-logo {
		max-width: 240px;
		margin-bottom: 5.6px;
	}

	.subpage-hero--union-montage .subpage-hero__union-copy .subpage-hero__union-logo img {
		max-height: 48px;
	}

	.subpage-hero--union-montage .subpage-hero__union-montage {
		--union-hero-photo-w: 300px;
		min-height: 300px;
		padding: 7.2px 5.6px 48px;
	}

	.subpage-hero--union-montage .subpage-hero__union-layer--stat {
		right: 190px;
		bottom: 6px;
		transform: translateY(30px);
	}

	.subpage-hero--union-montage .pos-stat--union-hero {
		min-width: 108px;
		padding: 9.6px 12px;
	}

	.subpage-hero--union-montage .pos-stat--union-hero .pos-stat__num {
		font-size: 1rem;
	}
}

.page-linga .subpage-split img,
.page-clover .subpage-split img,
.page-dejavoo .subpage-split img,
.page-union .subpage-split img {
	max-width: 100%;
	height: auto;
	display: block;
}

.page-linga .linga-split__lead,
.page-clover .clover-split__lead,
.page-dejavoo .dejavoo-split__lead,
.page-union .union-split__lead {
	margin-top: 12px;
}

.page-linga .linga-solutions__intro,
.page-clover .clover-solutions__intro,
.page-dejavoo .dejavoo-solutions__intro,
.page-union .union-solutions__intro {
	max-width: 672px;
	margin: 8px auto 0;
	color: var(--muted);
	font-size: 1.05rem;
}

.page-linga .linga-solutions-row,
.page-clover .clover-solutions-row,
.page-dejavoo .dejavoo-solutions-row,
.page-union .union-solutions-row {
	list-style: none;
	margin: 28px auto 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 16px;
	max-width: 640px;
}

.page-linga .linga-solutions-row__link,
.page-clover .clover-solutions-row__link,
.page-dejavoo .dejavoo-solutions-row__link,
.page-union .union-solutions-row__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10.4px 20px;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.page-linga .linga-solutions-row__link:hover,
.page-clover .clover-solutions-row__link:hover,
.page-dejavoo .dejavoo-solutions-row__link:hover,
.page-union .union-solutions-row__link:hover {
	border-color: rgba(196, 18, 48, 0.35);
	box-shadow: 0 6px 20px rgba(22, 25, 34, 0.06);
}

.page-linga .diff-card--linga-thumb,
.page-clover .diff-card--clover-thumb,
.page-dejavoo .diff-card--dejavoo-thumb,
.page-union .diff-card--union-thumb {
	padding: 0;
	overflow: hidden;
}

.page-linga .diff-card--linga-thumb .diff-card__thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border: none;
}

/* White image plate inside bordered .diff-card: no second border; edge via shadow only */
.pos-thumb-logo-card {
	background: #ffffff;
	border: none;
	border-radius: var(--radius);
	box-sizing: border-box;
	padding: 16px 19.2px;
	margin: 0 0 13.6px;
	box-shadow: 0 1px 3px rgba(22, 25, 34, 0.07);
}

html[data-color-scheme="dark"] .pos-thumb-logo-card {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.05),
		0 4px 16px rgba(0, 0, 0, 0.22);
}

.pos-thumb-logo-card--split {
	margin-bottom: 0;
}

.pos-thumb-logo-card .diff-card__thumb,
.pos-thumb-logo-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: contain;
	object-position: center;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	background: none;
	border: none;
}

.page-dejavoo .pos-thumb-logo-card img[src$="icons-p-family.png"],
.page-dejavoo .pos-thumb-logo-card .diff-card__thumb[src$="icons-p-family.png"] {
	border-radius: 12px;
}

.pos-thumb-logo-card--split img {
	aspect-ratio: auto;
	max-width: 100%;
	height: auto;
}

.page-clover .diff-card--clover-thumb-icon .pos-thumb-logo-card {
	padding: 21.6px 24px;
}

.page-clover .diff-card--clover-thumb-icon .pos-thumb-logo-card .diff-card__thumb {
	aspect-ratio: auto;
	max-height: 80px;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}

.page-union .diff-card--union-thumb .diff-card__thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: contain;
	object-position: center;
	padding: 20px 24px;
	box-sizing: border-box;
	background: linear-gradient(180deg, #f5f7fb 0%, #ebeefa 100%);
	border: none;
}

.page-linga .diff-card--linga-thumb .diff-card__title,
.page-linga .diff-card--linga-thumb p,
.page-clover .diff-card--clover-thumb .diff-card__title,
.page-clover .diff-card--clover-thumb p,
.page-dejavoo .diff-card--dejavoo-thumb .diff-card__title,
.page-dejavoo .diff-card--dejavoo-thumb p,
.page-union .diff-card--union-thumb .diff-card__title,
.page-union .diff-card--union-thumb p {
	padding-left: 20px;
	padding-right: 20px;
}

.page-linga .diff-card--linga-thumb .diff-card__title,
.page-clover .diff-card--clover-thumb .diff-card__title,
.page-dejavoo .diff-card--dejavoo-thumb .diff-card__title,
.page-union .diff-card--union-thumb .diff-card__title {
	margin-top: 17.6px;
}

.page-dejavoo .diff-card--dejavoo-thumb .diff-card__title,
.page-clover .diff-card--clover-thumb .diff-card__title {
	margin-top: 0;
}

.page-linga .diff-card--linga-thumb p:last-child,
.page-clover .diff-card--clover-thumb p:last-child,
.page-dejavoo .diff-card--dejavoo-thumb p:last-child,
.page-union .diff-card--union-thumb p:last-child {
	padding-bottom: 21.6px;
}

@media (max-width: 1099px) {
	.page-linga .subpage-split,
	.page-clover .subpage-split,
	.page-dejavoo .subpage-split,
	.page-union .subpage-split {
		gap: 20px;
	}

	.page-linga .subpage-split > div:last-child,
	.page-clover .subpage-split > div:last-child,
	.page-dejavoo .subpage-split > div:last-child,
	.page-union .subpage-split > div:last-child {
		order: -1;
	}

	.page-linga .subpage-split .subpage-h2,
	.page-clover .subpage-split .subpage-h2,
	.page-dejavoo .subpage-split .subpage-h2,
	.page-union .subpage-split .subpage-h2 {
		font-size: clamp(1.2rem, 4.5vw, 1.65rem);
	}

	.page-linga .subpage-hero__grid,
	.page-clover .subpage-hero__grid,
	.page-dejavoo .subpage-hero__grid,
	.page-union .subpage-hero__grid {
		gap: 20px;
	}

	.page-linga .subpage-hero__title,
	.page-clover .subpage-hero__title,
	.page-dejavoo .subpage-hero__title,
	.page-union .subpage-hero__title {
		font-size: clamp(1.45rem, 6.2vw, 2.1rem);
	}

	.page-linga .subpage-hero__lead,
	.page-clover .subpage-hero__lead,
	.page-dejavoo .subpage-hero__lead,
	.page-union .subpage-hero__lead {
		max-width: none;
	}
}

@media (max-width: 540px) {
	.page-clover .subpage-hero__grid {
		gap: 37.6px;
	}
}

@media (max-width: 520px) {
	.page-linga .diff-grid,
	.page-clover .diff-grid,
	.page-dejavoo .diff-grid,
	.page-union .diff-grid {
		gap: 16px;
		margin-top: 17.6px;
	}

	.page-linga .diff-card,
	.page-clover .diff-card,
	.page-dejavoo .diff-card,
	.page-union .diff-card {
		padding: 17.6px 16px;
	}

	.page-linga .diff-card--linga-thumb,
	.page-clover .diff-card--clover-thumb,
	.page-dejavoo .diff-card--dejavoo-thumb,
	.page-union .diff-card--union-thumb {
		padding: 0;
	}

	.page-linga .subpage-band .wrap,
	.page-clover .subpage-band .wrap,
	.page-dejavoo .subpage-band .wrap,
	.page-union .subpage-band .wrap {
		padding-left: max(12px, env(safe-area-inset-left));
		padding-right: max(12px, env(safe-area-inset-right));
	}

	.page-linga .subpage-cta .wrap,
	.page-clover .subpage-cta .wrap,
	.page-dejavoo .subpage-cta .wrap,
	.page-union .subpage-cta .wrap {
		padding-left: max(12px, env(safe-area-inset-left));
		padding-right: max(12px, env(safe-area-inset-right));
	}

	.page-linga .subpage-cta .subpage-h2,
	.page-clover .subpage-cta .subpage-h2,
	.page-dejavoo .subpage-cta .subpage-h2,
	.page-union .subpage-cta .subpage-h2 {
		font-size: clamp(1.15rem, 4.8vw, 1.5rem);
		padding-inline: 2.4px;
	}

	.page-linga .subpage-cta p,
	.page-clover .subpage-cta p,
	.page-dejavoo .subpage-cta p,
	.page-union .subpage-cta p {
		display: flex;
		justify-content: center;
	}

	.page-linga .subpage-cta .site-btn--lg,
	.page-clover .subpage-cta .site-btn--lg,
	.page-dejavoo .subpage-cta .site-btn--lg,
	.page-union .subpage-cta .site-btn--lg {
		width: 100%;
		max-width: 352px;
		box-sizing: border-box;
		justify-content: center;
	}
}

.subpage-h2 {
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
	color: var(--text);
}

.subpage-h2--center {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}

/* Long section titles: stay on one line on desktop (integrations bridge headline). */
.subpage-h2--center.subpage-h2--wide {
	max-width: 1152px;
	padding-inline: 16px;
	box-sizing: border-box;
}

@media (max-width: 1099px) {
	.subpage-h2--center.subpage-h2--wide {
		max-width: 100%;
		padding-inline: 0;
	}
}

.subpage-h3 {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--text);
}

.subpage-band {
	background: var(--bg2);
}

.subpage-band--muted {
	background: linear-gradient(180deg, #e2e2e5 0%, var(--bg) 100%);
	border-block: 1px solid var(--border);
}

.subpage-band--dark {
	background: linear-gradient(135deg, #141415 0%, #0b0b0c 100%);
	color: #e8e8ea;
	border: none;
}

.subpage-band--dark .subpage-h2 {
	color: #F8F8F8;
}

.subpage-band__footer {
	margin-top: 32px;
}

/* payment-terminals, processors & blog footer: .page-prose has max-width; center the block on the page, not only text inside it */
.subpage-band__footer.tac .page-prose {
	margin-inline: auto;
	text-align: center;
	width: fit-content;
	max-width: 736px;
	box-sizing: border-box;
}

.subpage-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.subpage-split--reverse {
	direction: rtl;
}

.subpage-split--reverse > * {
	direction: ltr;
}

@media (max-width: 1099px) {
	.subpage-split,
	.subpage-split--reverse {
		grid-template-columns: 1fr;
		direction: ltr;
	}
}

.subpage-split__logos {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1;
	min-width: 0;
	background: #ffffff;
	border: none;
	border-radius: var(--radius);
	padding: 32px;
	box-shadow: 0 1px 3px rgba(22, 25, 34, 0.07);
}

html[data-color-scheme="dark"] .subpage-split__logos {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.05),
		0 4px 16px rgba(0, 0, 0, 0.22);
}

.subpage-split__logos img {
	display: block;
	width: auto;
	max-width: 88%;
	height: auto;
	max-height: 40%;
	min-height: 0;
	object-fit: contain;
	flex-shrink: 1;
	border: none;
	border-radius: 0;
}

.subpage-list {
	margin: 16px 0 0;
	padding-left: 19.2px;
	color: var(--muted);
}

.subpage-list li {
	margin-bottom: 8px;
}

.subpage-list strong {
	color: var(--text);
}

.subpage-crm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10.4px;
	max-width: 420px;
	margin-inline: auto;
}

.subpage-crm-grid img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	border: 1px solid var(--border);
	display: block;
}

.subpage-crm-grid img:first-child {
	grid-column: 1 / -1;
}

.subpage-narrow {
	max-width: 736px;
	margin-inline: auto;
}

.subpage-followup {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 72px;
	row-gap: 32px;
	align-items: center;
}

.subpage-followup img {
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

@media (max-width: 1099px) {
	.subpage-followup {
		grid-template-columns: 1fr;
		column-gap: normal;
		row-gap: 40px;
	}
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18.4px 16px;
}

@media (max-width: 1099px) {
	.team-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.team-grid {
		grid-template-columns: 1fr;
	}
}

.team-card {
	text-align: center;
}

.team-card img {
	width: 100%;
	max-width: 200px;
	margin-inline: auto;
	display: block;
	aspect-ratio: 1;
	height: auto;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid var(--border);
}

.team-card__name {
	font-size: 1rem;
	font-weight: 800;
	margin: 8.8px 0 3.2px;
}

.team-card__role {
	margin: 0;
	font-size: 0.78rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.about-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

@media (max-width: 1099px) {
	.about-split {
		grid-template-columns: 1fr;
	}
}

.about-split__video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: #000;
}

.about-split__video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.diff-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 24px;
}

@media (max-width: 1099px) {
	.diff-grid {
		grid-template-columns: 1fr;
	}
}

.diff-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 21.6px 20px;
}

.diff-card__icon {
	display: block;
	margin-bottom: 12px;
}

.diff-card__title {
	font-size: 1.05rem;
	font-weight: 800;
	margin: 0 0 8px;
	color: var(--text);
}

.diff-card p {
	margin: 0 0 10.4px;
	font-size: 0.98rem;
	color: var(--muted);
	line-height: 1.55;
}

.diff-card p:last-child {
	margin-bottom: 0;
}

.five-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
}

.five-split__art {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}

.five-split__art img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid var(--border);
}

@media (max-width: 1099px) {
	.five-split {
		grid-template-columns: 1fr;
	}
}

/* About: money-saving services (integrations-style card grid) */
.savings-section__head {
	text-align: center;
	margin-bottom: 40px;
}

.savings-section__head .subpage-hero__eyebrow {
	margin-bottom: 8px;
}

.savings-section__head .subpage-h2 {
	margin-bottom: 0;
}

.savings-grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 928px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 13.6px 20px;
	counter-reset: savings-i;
}

.savings-grid li {
	display: flex;
	gap: 13.6px;
	align-items: flex-start;
	margin: 0;
	padding: 16px 17.6px 16px 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 1px 0 rgba(22, 25, 34, 0.04);
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--text);
}

.savings-grid li::before {
	content: counter(savings-i);
	counter-increment: savings-i;
	flex: 0 0 32px;
	min-width: 32px;
	height: 32px;
	margin-top: 0.8px;
	border-radius: 999px;
	background: rgba(196, 18, 48, 0.1);
	color: var(--accent);
	font-size: 0.68rem;
	font-weight: 800;
	line-height: 2rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
	padding-inline: 3.2px;
	box-sizing: border-box;
}

@media (max-width: 700px) {
	.savings-grid {
		grid-template-columns: 1fr;
	}
}

.logo-wall {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 24px 20px;
	align-items: center;
	justify-items: center;
}

.logo-wall img {
	max-width: 200px;
	height: auto;
	object-fit: contain;
	filter: grayscale(0.1);
	opacity: 0.95;
}

@media (min-width: 1100px) {
	.logo-wall:not(.logo-wall--tiles) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.logo-wall:not(.logo-wall--tiles) img {
		flex: 0 0 auto;
	}
}

/* Payment terminals & processors: equal square tiles, full-color logos on white (light + dark). */
.logo-wall.logo-wall--tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 20px;
	align-items: stretch;
	justify-items: stretch;
}

.logo-wall.logo-wall--tiles .logo-wall__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	aspect-ratio: 1;
	padding: 17px;
	background: #ffffff;
	border-radius: var(--radius);
	box-shadow: 0 1px 3px rgba(22, 25, 34, 0.07);
}

html[data-color-scheme="dark"] .logo-wall.logo-wall--tiles .logo-wall__tile {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.05),
		0 4px 16px rgba(0, 0, 0, 0.22);
}

.logo-wall.logo-wall--tiles img {
	display: block;
	max-width: 88%;
	max-height: 52%;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: none;
	opacity: 1;
	mix-blend-mode: normal;
	-webkit-user-drag: none;
}

@media (min-width: 1100px) {
	.logo-wall.logo-wall--tiles {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}
}

.pos-stat-band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 32px;
}

.pos-stat {
	text-align: center;
	padding: 16px 24px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	min-width: 180px;
}

.pos-stat__icon {
	font-size: 1.5rem;
	display: block;
	margin-bottom: 4px;
}

.pos-stat__num {
	font-size: 2rem;
	font-weight: 800;
	color: var(--accent);
	margin: 0;
	line-height: 1;
}

.pos-stat__label {
	margin: 5.6px 0 0;
	font-size: 0.9rem;
	color: var(--muted);
}

/* Hero stat links to vendor pages; :~:text=… highlights the cited phrase in supporting browsers. */
a.pos-stat.pos-stat--cite {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition:
		border-color 0.18s var(--ease),
		box-shadow 0.18s var(--ease),
		transform 0.18s var(--ease);
}

a.pos-stat.pos-stat--cite:hover {
	border-color: rgba(196, 18, 48, 0.35);
	box-shadow: 0 10px 28px rgba(22, 25, 34, 0.1);
	transform: translateY(-2px);
}

a.pos-stat.pos-stat--cite:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.pos-stat-band__media img {
	max-height: 420px;
	width: auto;
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

.subpage-cta {
	background: linear-gradient(90deg, rgba(196, 18, 48, 0.07), rgba(22, 25, 34, 0.05));
	border-block: 1px solid var(--border);
}

.subpage-cta .subpage-h2 {
	max-width: 832px;
	margin-inline: auto;
}

.union-split {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 32px;
	align-items: center;
}

.union-split__art {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.union-split__art img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid var(--border);
}

@media (max-width: 1099px) {
	.union-split {
		grid-template-columns: 1fr;
	}
}

.union-pill-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 24px 0;
}

@media (max-width: 800px) {
	.union-pill-grid {
		grid-template-columns: 1fr;
	}
}

.union-pill {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px 17.6px;
}

.union-pill__title {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--accent);
	margin: 0 0 8px;
}

.union-pill__list {
	margin: 0;
	padding-left: 17.6px;
	color: var(--muted);
	font-size: 0.95rem;
}

.union-mid__accent {
	color: #f87171;
}

.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 24px;
}

@media (max-width: 1099px) {
	.testimonial-grid {
		grid-template-columns: 1fr;
	}
}

.testimonial-card {
	margin: 0;
	padding: 21.6px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.testimonial-card p {
	margin: 0 0 16px;
	font-size: 1rem;
	color: var(--text);
	line-height: 1.55;
}

.testimonial-card footer {
	font-size: 0.9rem;
	color: var(--muted);
}

.testimonial-card cite {
	font-style: normal;
	font-weight: 600;
	color: var(--text);
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 1000px) {
	.blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.blog-grid {
		grid-template-columns: 1fr;
	}
}

.blog-card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.blog-card:hover,
.blog-card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 14px 36px rgba(22, 25, 34, 0.1);
}

.blog-card:has(.blog-card__link:focus-visible) {
	box-shadow:
		0 0 0 2px var(--accent),
		0 14px 36px rgba(22, 25, 34, 0.1);
}

/* Stretched overlay link: entire card is clickable (image, title, excerpt). */
.blog-card__link {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.blog-card__link:focus-visible {
	outline: none;
}

.blog-card:focus-within .blog-card__title {
	color: var(--accent);
}

.blog-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #dcdcdf;
}

.blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-card__title {
	position: relative;
	z-index: 0;
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0;
	padding: 16px 16px 0;
	color: var(--text);
	transition: color 0.2s var(--ease);
}

.blog-card:hover .blog-card__title {
	color: var(--accent);
}

.blog-card__excerpt {
	position: relative;
	z-index: 0;
	margin: 0;
	padding: 8px 16px 18.4px;
	font-size: 0.92rem;
	color: var(--muted);
	line-height: 1.5;
	flex: 1;
}

/* Mirrored WordPress post body (nine featured posts from /blog/) inside new site chrome */
.blog-post-band {
	padding-top: 40px;
	padding-bottom: 56px;
}

.blog-post-back {
	margin: 0 0 24px;
	font-size: 0.95rem;
}

.blog-post-back a {
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
}

.blog-post-back a:hover {
	text-decoration: underline;
}

.blog-post-mirror .uicore-single-header {
	margin-bottom: 24px;
}

.blog-post-mirror .entry-title {
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	font-weight: 800;
	line-height: 1.2;
	margin: 0 0 12px;
	letter-spacing: -0.02em;
	color: var(--text);
}

.blog-post-mirror .uicore-entry-meta {
	font-size: 0.9rem;
	color: var(--muted);
	margin-bottom: 20px;
}

.blog-post-mirror .uicore-entry-meta a {
	color: var(--accent);
	text-decoration: none;
}

.blog-post-mirror .uicore-entry-meta a:hover {
	text-decoration: underline;
}

.blog-post-mirror .uicore-meta-separator {
	display: inline-block;
	width: 5.6px;
	height: 5.6px;
	border-radius: 50%;
	background: var(--border);
	margin: 0 8px;
	vertical-align: middle;
	opacity: 0.9;
}

.blog-post-mirror .uicore-feature-img-wrapper {
	margin: 0 0 24px;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--border);
	background: var(--surface);
}

.blog-post-mirror .uicore-feature-img-wrapper img {
	width: 100%;
	height: auto;
	display: block;
}

.blog-post-mirror .entry-content {
	max-width: none;
}

.blog-post-mirror .entry-content h2 {
	font-size: 1.25rem;
	margin-top: 28px;
	margin-bottom: 10.4px;
	font-weight: 700;
	color: var(--text);
}

.blog-post-mirror .entry-content p {
	margin-bottom: 16px;
}

.blog-post-mirror .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 11px;
}

.blog-post-mirror .h5-size {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--muted);
}

.blog-post-mirror .mt-md {
	margin-top: 16px;
}

/* Shop page: cart CTA under hero (badge synced by cart.js with nav) */
.shop-hero__cart {
	margin: 20px 0 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}

.shop-hero-cart-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.shop-hero-cart-btn__icon {
	flex-shrink: 0;
	display: block;
}

.shop-hero-cart-btn .site-nav-cart-badge {
	position: static;
	transform: none;
	margin-left: 2.4px;
}

.shop-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 1099px) {
	.shop-grid {
		grid-template-columns: 1fr;
	}
}

.shop-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	display: flex;
	flex-direction: column;
	/* Stretch cross-axis so children (esp. media link) aren’t sized to ~300px image intrinsic width */
	align-items: stretch;
	min-width: 0;
}

.shop-card__media {
	display: block;
	/* Span full card width including horizontal padding (20px + 20px) */
	box-sizing: border-box;
	width: calc(100% + 40px);
	margin: -20px -20px 16px;
	border-radius: var(--radius) var(--radius) 0 0;
	overflow: hidden;
	background: #f0f2f6;
}

.shop-card__media img {
	width: 100%;
	max-width: none;
	height: auto;
	display: block;
}

.shop-card__title {
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0 0 8px;
}

.shop-card__title a {
	color: var(--text);
	text-decoration: none;
}

.shop-card__title a:hover {
	color: var(--accent);
}

.shop-card__price {
	margin: 0 0 12px;
	font-size: 1.1rem;
}

.shop-card__was {
	text-decoration: line-through;
	color: var(--muted);
	font-size: 0.95rem;
	margin-right: 5.6px;
}

.shop-card__note {
	margin: 0 0 16px;
	font-size: 0.95rem;
	color: var(--muted);
	line-height: 1.5;
	flex: 1;
}

.shop-card__qty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	width: 100%;
	margin: 0 0 12px;
}

.shop-card__qty-label {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.shop-card__qty-inner {
	flex: 0 1 auto;
}

.shop-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10.4px;
	align-items: center;
	width: 100%;
	margin-top: auto;
	padding-top: 4px;
}

.shop-card__primary {
	min-width: 148px;
}

.shop-card__primary--remove {
	border-color: rgba(180, 60, 50, 0.55);
	color: #a03830;
}

.shop-card__primary--remove:hover,
.shop-card__primary--remove:focus-visible {
	border-color: #a03830;
	color: #822a24;
}

.site-nav-mega__cart-link {
	display: inline-flex;
	align-items: center;
	gap: 7.2px;
	flex-wrap: nowrap;
}

.site-nav-mega__cart-icon {
	flex-shrink: 0;
	vertical-align: middle;
}

.site-nav-mega__cart-label {
	position: relative;
	display: inline-block;
	padding-inline-end: 0.15em;
}

.site-nav-mega__cart-link .site-nav-cart-badge {
	position: absolute;
	z-index: 1;
	top: -0.35em;
	right: -0.15em;
	transform: translate(107%, 0%);
}

.site-nav-cart-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 21.6px;
	min-height: 21.6px;
	padding: 0 5.6px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font-size: 0.7rem;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.site-nav-cart-badge[data-cart-count="0"] {
	background: rgba(22, 25, 34, 0.2);
	color: var(--text);
}

/* Cart page (lines rendered by cart.js) */
.cart-page__inner {
	max-width: 1152px;
}

.cart-empty {
	text-align: center;
	padding: 32px 16px;
}

.cart-empty__text {
	font-size: 1.1rem;
	margin: 0 0 16px;
}

/* Lines + sticky summary (desktop) / stacked (mobile) */
.cart-layout {
	display: grid;
	gap: 20px 28px;
	align-items: stretch;
	grid-template-columns: 1fr;
	grid-template-areas:
		"heading"
		"lines"
		"summary"
		"checkout";
}

.cart-layout__heading {
	grid-area: heading;
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--text);
	letter-spacing: 0.02em;
}

.cart-layout__lines {
	grid-area: lines;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.cart-layout__summary {
	grid-area: summary;
	min-width: 0;
	display: flex;
	flex-direction: column;
	/* Sticks in the viewport while scrolling checkout; must stay shorter than the lines column (see desktop align-self). */
	position: sticky;
	top: calc(var(--site-header-h, var(--header-h)) + 16px);
	z-index: 4;
}

.cart-layout__checkout {
	grid-area: checkout;
	min-width: 0;
}

@media (min-width: 1100px) {
	.cart-layout {
		grid-template-columns: minmax(0, 1fr) 296px;
		grid-template-areas:
			"heading heading"
			"lines summary"
			"checkout checkout";
		gap: 24px 32px;
	}

	/* Natural-height column so sticky pins the card; if we stretch to row height, the whole column scrolls away. */
	.cart-layout__summary {
		align-self: start;
	}
}

.cart-lines-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.cart-line {
	display: grid;
	grid-template-columns: 80px 1fr auto auto auto;
	gap: 16px 20px;
	align-items: center;
	padding: 16px 18.4px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	width: 100%;
	box-sizing: border-box;
}

.cart-line__top,
.cart-line__actions {
	display: contents;
}

.cart-line__media {
	border-radius: 8px;
	overflow: hidden;
	background: var(--bg2);
	border: 1px solid var(--border);
}

.cart-line__img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.cart-line__title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 5.6px;
}

.cart-line__meta {
	margin: 0;
	font-size: 0.9rem;
	color: var(--muted);
}

.cart-line__qty {
	display: inline-flex;
	align-items: center;
	gap: 5.6px;
}

@media (max-width: 700px) {
	.cart-line {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 13.6px;
		padding: 16px 16px 16.8px;
	}

	.cart-line__top,
	.cart-line__actions {
		display: flex;
	}

	.cart-line__top {
		flex-direction: row;
		align-items: flex-start;
		gap: 13.6px;
	}

	.cart-line__media {
		flex: 0 0 76px;
		max-width: 76px;
	}

	.cart-line__main {
		flex: 1;
		min-width: 0;
	}

	.cart-line__actions {
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 10.4px 16px;
		padding-top: 13.6px;
		border-top: 1px solid var(--border);
	}

	.cart-line__qty {
		order: 1;
	}

	.cart-line__total {
		order: 2;
		font-size: 1.15rem;
	}

	.cart-line__remove {
		order: 3;
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
}

.cart-qty-btn {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--surface);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	color: var(--text);
}

.cart-qty-btn:hover,
.cart-qty-btn:focus-visible {
	border-color: var(--accent);
	color: var(--accent);
}

.cart-qty-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.cart-qty-input {
	width: 48px;
	padding: 5.6px 4px;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	font-family: inherit;
}

.cart-line__total {
	font-weight: 800;
	font-size: 1.05rem;
	white-space: nowrap;
}

.cart-line__remove-btn {
	padding: 6.4px 12px;
	font-size: 0.88rem;
}

.cart-summary {
	margin: 0;
	padding: 18.4px 19.2px;
	background: var(--bg2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	width: 100%;
	box-sizing: border-box;
}

.cart-layout__summary .cart-summary {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.cart-summary__eyebrow {
	margin: 0 0 8px;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}

.cart-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin: 0 0 10.4px;
	font-size: 1.1rem;
}

.cart-summary__value {
	font-size: 1.35rem;
	color: var(--accent);
}

.cart-summary__note {
	margin: 0;
	font-size: 0.88rem;
	color: var(--muted);
	line-height: 1.45;
}

.cart-layout__checkout .cart-pay {
	margin-top: 0;
}

@media (min-width: 1100px) {
	.cart-layout__checkout .cart-pay {
		max-width: none;
	}
}

.cart-pay {
	margin-top: 32px;
	padding: 21.6px 20px 24px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	max-width: 704px;
	box-sizing: border-box;
}

.cart-pay--disabled {
	opacity: 0.95;
}

.cart-pay__title {
	margin: 0 0 8px;
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--text);
}

.cart-pay__lede {
	margin: 0 0 16px;
	font-size: 0.92rem;
	color: var(--muted);
	line-height: 1.5;
}

.cart-pay__lede a {
	font-weight: 600;
}

.cart-pay__hint {
	margin: 13.6px 0 5.6px;
	font-size: 0.85rem;
	color: var(--muted);
}

.cart-pay__fineprint {
	margin: 0 0 8px;
	font-size: 0.82rem;
	color: var(--muted);
	line-height: 1.45;
	max-width: 640px;
}

.cart-checkout__section {
	margin: 0 0 21.6px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.cart-checkout__section--inline {
	margin-bottom: 12px;
}

.cart-checkout__legend {
	float: none;
	width: auto;
	padding: 0;
	margin: 0 0 10.4px;
	font-size: 1rem;
	font-weight: 800;
	color: var(--text);
}

.cart-checkout__grid {
	display: grid;
	gap: 10.4px 16px;
	margin-bottom: 5.6px;
}

@media (min-width: 520px) {
	.cart-checkout__grid--2 {
		grid-template-columns: 1fr 1fr;
	}
}

.cart-checkout__label {
	display: block;
	margin: 10.4px 0 3.2px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--text);
}

.cart-checkout__label:first-of-type,
.cart-checkout__grid + .cart-checkout__label {
	margin-top: 0;
}

.cart-checkout__req {
	color: var(--accent);
	font-weight: 700;
}

.cart-checkout__fine {
	font-weight: 500;
	color: var(--muted);
	font-size: 0.88em;
}

.cart-checkout__textarea {
	min-height: 44px;
	resize: vertical;
}

.cart-checkout__check {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.92rem;
	color: var(--text);
	cursor: pointer;
}

.cart-checkout__check input {
	margin-top: 3.2px;
	flex-shrink: 0;
}

.cart-pay__input {
	display: block;
	width: 100%;
	max-width: 352px;
	box-sizing: border-box;
	margin: 0 0 5.6px;
	padding: 8px 10.4px;
	font: inherit;
	font-size: 0.95rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--input-bg);
	color: var(--text);
}

.cart-pay__input--full {
	max-width: none;
}

.cart-pay__input--zip {
	max-width: 160px;
}

.cart-pay__input--exp {
	max-width: 104px;
	font-variant-numeric: tabular-nums;
}

.cart-pay__input--cvv {
	max-width: 96px;
}

.cart-pay__input:focus {
	outline: 2px solid rgba(196, 18, 48, 0.35);
	outline-offset: 1px;
}

.cart-pay__actions {
	margin: 16px 0 0;
}

.cart-pay__msg {
	margin-top: 16px;
	padding: 10.4px 12px;
	border-radius: 8px;
	font-size: 0.92rem;
	line-height: 1.45;
}

.cart-pay__msg--err {
	background: rgba(196, 18, 48, 0.08);
	color: var(--text);
	border: 1px solid rgba(196, 18, 48, 0.22);
}

.cart-pay__msg--ok {
	background: rgba(34, 120, 70, 0.1);
	color: var(--text);
	border: 1px solid rgba(34, 120, 70, 0.25);
}

.cart-pay__msg--warn {
	background: rgba(180, 120, 20, 0.1);
	color: var(--text);
	border: 1px solid rgba(180, 120, 20, 0.28);
}

.cart-pay__msg--pending {
	background: rgba(40, 90, 160, 0.08);
	color: var(--text);
	border: 1px solid rgba(40, 90, 160, 0.22);
}

.cart-pay-msg--outcome {
	margin-top: 20px;
	max-width: 704px;
}

@media (min-width: 1100px) {
	.cart-layout__checkout .cart-pay-msg--outcome {
		max-width: none;
	}
}

.cart-pay__blocked {
	margin: 0;
	font-size: 0.95rem;
	color: var(--muted);
	line-height: 1.5;
}

.pci-feature-img {
	margin: 0 0 32px;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--border);
}

.pci-feature-img img {
	display: block;
	width: 100%;
	height: auto;
}

.pci-prose h2 {
	font-size: 1.25rem;
	font-weight: 800;
	margin: 32px 0 12px;
	color: var(--text);
}

.pci-prose h2:first-child {
	margin-top: 0;
}

.pci-prose ul {
	color: var(--muted);
	line-height: 1.6;
}

/* Portal tab strips: shared single-line row height (Hub/Cases/Setup reference) */
.page-metrics {
	--metrics-tab-row-min-h: 26px;
	/* Active tab accent (internal strip + CRM/orders subnav + host-metrics tabs): flush with row bottom */
	--metrics-tab-active-bar-h: 3px;
}

/* Sticky in-page tab rows: Hub/Cases/Setup + Real-Time/Stacks/Load only (not the CRM|Metrics|Orders strip) */
.page-metrics #metrics-dashboard-tabs > .metrics-tabs__list,
.page-metrics #metrics-dashboard-tabs > .metrics-tabs__list-shell > .metrics-tabs__list,
.page-metrics .metrics-tabs--crm-subnav .metrics-tabs__list,
.page-metrics .metrics-tabs--orders-subnav .metrics-tabs__list {
	position: sticky;
	top: var(--site-header-h, var(--header-h));
	z-index: 1000;
	box-shadow: 0 1px 0 rgba(22, 25, 34, 0.07);
}

html[data-color-scheme="dark"] .page-metrics #metrics-dashboard-tabs > .metrics-tabs__list,
html[data-color-scheme="dark"] .page-metrics #metrics-dashboard-tabs > .metrics-tabs__list-shell > .metrics-tabs__list,
html[data-color-scheme="dark"] .page-metrics .metrics-tabs--crm-subnav .metrics-tabs__list,
html[data-color-scheme="dark"] .page-metrics .metrics-tabs--orders-subnav .metrics-tabs__list {
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

/* --- Internal portal pages: .subpage-hero--compact.metrics-page-hero; lead width below --- */
.page-metrics .metrics-page-hero__lead {
	margin-inline: auto;
	max-width: 42ch;
}

.page-metrics .metrics-page-band {
	--metrics-band-pt: 20px;
	padding-block: var(--metrics-band-pt) 56px;
	overflow-x: clip;
	/* .subpage-hero already has border-bottom; drop muted band top border to avoid a double 1px line */
	border-top: none;
}

.page-metrics .metrics-page-band__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	min-width: 0;
}

.page-metrics .metrics-page-band__inner--auth {
	padding-top: 12px;
}

.page-metrics .metrics-page__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 24px;
	margin: 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--border);
}

.page-metrics .metrics-page__eyebrow {
	margin: 0 0 3.2px;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: var(--accent);
}

.page-metrics .metrics-page__session-title {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--text);
}

/* Internal portal: global strip below marketing header (CRM | Host metrics | Orders | Sign out) */
.page-metrics .internal-portal-strip {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 0;
	margin-top: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0;
}

/* Flush hero (first section) to portal strip and remove extra band under hero: global section
   padding-bottom would sit inside .subpage-hero background and skew vertical balance */
.page-metrics main.site-main > section:first-child {
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * Portal strip is already full-width in the page flow (sits between header and <main>).
 * Do not use the same 100vw / negative-margin breakout as in-page tab rows inside `.wrap`:
 * that pattern duplicates viewport sizing with `.metrics-tabs__list` globals and can widen
 * the document (scrollbar / shell wrapping), which breaks the fixed marketing header on mobile.
 */
.page-metrics .internal-portal-strip .internal-portal-strip__row.metrics-tabs__list {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
	border-bottom: 1px solid var(--border);
	background: var(--bg2);
	box-sizing: border-box;
	padding-inline-end: env(safe-area-inset-right, 0px);
	min-width: 0;
}

.page-metrics .internal-portal-strip .internal-portal-strip__signout-form {
	display: contents;
}

.page-metrics .internal-portal-strip a.metrics-tabs__tab {
	text-decoration: none;
}

.page-metrics .internal-portal-strip button.metrics-tabs__tab {
	width: 100%;
}

/* Active tab: surface fill + accent bar flush to bottom edge (matches internal portal strip; avoids inset shadow gap). */
.page-metrics .internal-portal-strip .metrics-tabs__tab[aria-current="page"],
.page-metrics .internal-portal-strip .metrics-tabs__tab.metrics-tabs__tab--active,
.page-metrics .metrics-tabs--crm-subnav .metrics-tabs__tab[aria-current="page"],
.page-metrics .metrics-tabs--crm-subnav .metrics-tabs__tab.metrics-tabs__tab--active,
.page-metrics .metrics-tabs--orders-subnav .metrics-tabs__tab[aria-current="page"],
.page-metrics .metrics-tabs--orders-subnav .metrics-tabs__tab.metrics-tabs__tab--active,
.page-metrics .metrics-tabs__tab[aria-selected="true"] {
	color: var(--text);
	background-color: var(--surface);
	box-shadow: none;
}

.page-metrics .internal-portal-strip .metrics-tabs__tab[aria-current="page"]:not(.metrics-tabs__tab--subhero-toggle)::after,
.page-metrics .internal-portal-strip .metrics-tabs__tab.metrics-tabs__tab--active:not(.metrics-tabs__tab--subhero-toggle)::after,
.page-metrics .metrics-tabs--crm-subnav .metrics-tabs__tab[aria-current="page"]:not(.metrics-tabs__tab--subhero-toggle)::after,
.page-metrics .metrics-tabs--crm-subnav .metrics-tabs__tab.metrics-tabs__tab--active:not(.metrics-tabs__tab--subhero-toggle)::after,
.page-metrics .metrics-tabs--orders-subnav .metrics-tabs__tab[aria-current="page"]:not(.metrics-tabs__tab--subhero-toggle)::after,
.page-metrics .metrics-tabs--orders-subnav .metrics-tabs__tab.metrics-tabs__tab--active:not(.metrics-tabs__tab--subhero-toggle)::after,
.page-metrics .metrics-tabs__tab[aria-selected="true"]:not(.metrics-tabs__tab--subhero-toggle)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--metrics-tab-active-bar-h);
	background: var(--accent);
	pointer-events: none;
	z-index: 1;
}

.page-metrics .metrics-tabs--crm-subnav a.metrics-tabs__tab,
.page-metrics .metrics-tabs--orders-subnav a.metrics-tabs__tab {
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.page-metrics .metrics-page__logout {
	margin: 0;
	align-self: center;
}

/* Ghost CTAs in metrics portals: 1px border to match fields/dividers (.site-btn base uses 2px). */
.page-metrics .site-btn.site-btn--ghost {
	border-width: 1px;
}

.page-metrics .site-btn.site-btn--outline {
	border-width: 1px;
}

.page-metrics .crm-setup__columns {
	gap: 36px 52px;
	align-items: start;
}

@media (min-width: 1100px) {
	.page-metrics .crm-setup__columns > div:first-child {
		padding-right: 8px;
	}
	.page-metrics .crm-setup__columns > div:last-child {
		padding-left: 20px;
		border-left: 1px solid var(--border);
	}
}

/* CRM Setup tab */
.page-metrics .crm-setup-btn-sm {
	font-size: 0.85rem;
	padding: 6.08px 13.6px;
}

/* Contacts tables: pause/remove/authorize share width */
.page-metrics .crm-setup-contact-action-btn.crm-setup-btn-sm {
	min-width: 132px;
}

.page-metrics .crm-setup-connect-shell {
	max-width: 832px;
	margin: 0;
}

.page-metrics .crm-setup-connect-simple {
	margin: 16px 0 0;
	text-align: start;
}

.page-metrics .crm-setup-stack {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: 0;
}

.page-metrics .crm-setup-section {
	margin: 0;
	padding: 0;
	border: none;
}

.page-metrics .crm-setup-section + .crm-setup-section {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--border);
}

.page-metrics .crm-setup-stack > .crm-setup-details--footer {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}

.page-metrics .crm-setup-mailboxes-strip {
	margin: 13.6px 0 0;
	padding: 10.4px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

.page-metrics .crm-setup-mailboxes-strip__row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 7.2px;
	padding: 7.2px 0;
}

.page-metrics .crm-setup-mailboxes-strip__main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.page-metrics .crm-setup-mailbox-public {
	margin: 0;
}

.page-metrics .crm-setup-mailbox-public__label {
	display: flex;
	align-items: flex-start;
	gap: 7.2px;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--muted);
	cursor: pointer;
	max-width: 672px;
}

.page-metrics .crm-setup-mailbox-public__label input {
	margin-top: 2.88px;
	flex-shrink: 0;
}

.page-metrics .crm-setup-mailboxes-strip__row + .crm-setup-mailboxes-strip__row {
	border-top: 1px solid var(--border);
}

.page-metrics .crm-setup-mailboxes-strip__email {
	font-weight: 700;
	font-size: 0.98rem;
	word-break: break-all;
}

.page-metrics .crm-setup-mailboxes-strip__hint {
	margin: 9.6px 0 0;
	padding-top: 8px;
	border-top: 1px solid var(--border);
	font-size: 0.88rem;
	line-height: 1.45;
}

.page-metrics .crm-setup-mailboxes-strip__hint--follow {
	border-top: none;
	padding-top: 0;
	margin-top: 5.6px;
}

.page-metrics .crm-setup-connect-shell .crm-setup-details {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}

.page-metrics .crm-setup-details {
	margin-top: 21.6px;
	border-top: 1px solid var(--border);
	padding-top: 16px;
}

.page-metrics .crm-setup-details__summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--muted);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 7.2px;
}

.page-metrics .crm-setup-details__summary::-webkit-details-marker {
	display: none;
}

.page-metrics .crm-setup-details__summary::before {
	content: "\276F";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: block;
	line-height: 1rem;
	text-align: center;
	font-size: 0.62rem;
	opacity: 0.55;
	transition: transform 0.12s ease;
	transform: rotate(0deg);
}

.page-metrics details.crm-setup-details[open] > .crm-setup-details__summary::before {
	transform: rotate(90deg);
}

.page-metrics .crm-setup-details__summary:hover {
	color: var(--text);
}

.page-metrics .crm-setup-details__body {
	margin-top: 13.6px;
	padding-top: 4px;
}

.page-metrics .crm-setup-details__body .metrics-page-prose {
	margin-bottom: 10.4px;
}

.page-metrics .crm-setup-contact-form {
	max-width: none;
	margin-top: 16px;
	margin-bottom: 20px;
}

/* Authorized contacts: add-contact form left, table right on wide viewports */
.page-metrics .crm-setup-contacts-split {
	--crm-contacts-add-panel-min-h: 584px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
	margin-top: 16px;
}

.page-metrics .crm-setup-contacts-split__list {
	min-width: 0;
}

.page-metrics .crm-setup-contacts-split__add-heading,
.page-metrics .crm-setup-contacts-split__list-heading {
	margin: 0 0 13.6px;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text);
	line-height: 1.25;
}

@media (max-width: 959px) {
	.page-metrics .crm-setup-contacts-split {
		gap: 0;
	}

	.page-metrics .crm-setup-contacts-split__list {
		margin-top: 32px;
		padding-top: 28px;
		border-top: 1px solid var(--border);
	}
}

.page-metrics .crm-setup-contacts-split .crm-setup-contact-form {
	margin-top: 0;
	margin-bottom: 0;
}

.page-metrics .crm-setup-contacts-split .crm-setup-table-wrap {
	margin-top: 0;
}

/* CRM contacts: card panels (add form, authorized + derived lists) */
.page-metrics .crm-setup-add-contact-panel,
.page-metrics .crm-setup-whitelist-list-panel,
.page-metrics .crm-setup-derived-list-panel,
.page-metrics .crm-hub-cases-panel {
	padding: 20px 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

.page-metrics .crm-setup-add-contact-panel {
	display: flex;
	min-height: var(--crm-contacts-add-panel-min-h);
	box-sizing: border-box;
}

.page-metrics .crm-setup-add-contact-panel .crm-setup-contact-form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.page-metrics .crm-setup-whitelist-list-panel .crm-setup-whitelist-toolbar,
.page-metrics .crm-setup-derived-list-panel .crm-setup-whitelist-toolbar,
.page-metrics .crm-hub-cases-panel .crm-setup-whitelist-toolbar {
	margin-top: 0;
}

.page-metrics .crm-setup-whitelist-list-panel .crm-setup-table-wrap,
.page-metrics .crm-setup-derived-list-panel .crm-setup-table-wrap,
.page-metrics .crm-hub-cases-panel .crm-hub-cases-table {
	margin-top: 0;
	border: none;
	border-radius: 0;
	background: transparent;
}

/* Add contact: label above field, full-width stack */
.page-metrics .crm-setup-contacts-split__add .metrics-auth__form.crm-setup-contact-form {
	max-width: none;
}

.page-metrics .crm-setup-contacts-split__add .crm-setup-contact-form__row--aligned {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 13.6px;
}

.page-metrics .crm-setup-contacts-split__add .crm-setup-contact-form__row--aligned .crm-setup-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 4.8px;
	min-width: 0;
	width: 100%;
	flex: 0 0 auto;
}

.page-metrics .crm-setup-contacts-split__add .crm-setup-contact-form__row--aligned .metrics-auth__input {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.page-metrics .crm-setup-contacts-split__add .crm-setup-contact-form__row--aligned .crm-setup-contact-form__submit {
	align-self: flex-start;
	padding-bottom: 0;
	padding-top: 2.4px;
}

@media (min-width: 960px) {
	.page-metrics .crm-setup-contacts-split {
		grid-template-columns: minmax(272px, 352px) minmax(0, 1fr);
		gap: 32px 36px;
	}

	.page-metrics .crm-setup-contacts-split__add {
		grid-column: 1;
		grid-row: 1;
		padding-right: 32px;
		border-right: 1px solid var(--border);
	}

	.page-metrics .crm-setup-contacts-split__list {
		grid-column: 2;
		grid-row: 1;
	}

	/* Companies directory (etc.): list-only split with no left "add" column, so use full band width */
	.page-metrics .crm-setup-contacts-split:has(> .crm-setup-contacts-split__list:only-child) {
		grid-template-columns: minmax(0, 1fr);
	}

	.page-metrics .crm-setup-contacts-split:has(> .crm-setup-contacts-split__list:only-child) .crm-setup-contacts-split__list {
		grid-column: 1;
		grid-row: 1;
	}
}

.page-metrics .crm-setup-contact-form__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px 20px;
}

.page-metrics .crm-setup-contact-form__field {
	flex: 1 1 192px;
	min-width: 0;
}

.page-metrics .crm-setup-contact-form__field--note {
	flex: 2 1 224px;
}

.page-metrics .crm-setup-add-contact-panel .crm-setup-contact-form__field--note {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.page-metrics .crm-setup-add-contact-panel .crm-contact-notes-editor-wrap {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 328px;
}

.page-metrics .crm-setup-add-contact-panel .crm-contact-notes-editor-wrap .ql-container.ql-snow {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
}

.page-metrics .crm-setup-add-contact-panel .crm-contact-notes-editor-wrap .ql-editor {
	flex: 1 1 auto;
	min-height: 328px;
}

.page-metrics .crm-setup-contact-form__submit {
	flex: 0 0 auto;
	padding-bottom: 2.4px;
}

.page-metrics .crm-setup-optional {
	font-weight: 400;
	color: var(--muted);
	font-size: 0.88em;
}

.page-metrics .crm-setup-table-wrap {
	margin-top: 4px;
}

/* CRM authorized contact detail (contacts tab) */
.page-metrics .crm-contact-detail-panel {
	margin-top: 20px;
	padding: 20px 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	/* Reduce viewport jumps when nested editors resize or programmatically update. */
	overflow-anchor: none;
}

.page-metrics .crm-contact-detail-panel__title {
	margin: 0 0 5.6px;
	font-size: 1.15rem;
}

.page-metrics .crm-contact-detail-panel__hint {
	margin: 0 0 16px;
	font-size: 0.92rem;
}

.page-metrics .crm-contact-detail-panel__form {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.page-metrics .crm-contact-detail-sections {
	display: flex;
	flex-direction: column;
	gap: 21.6px;
}

.page-metrics .crm-contact-detail-section {
	margin: 0;
	padding: 0;
	border: none;
}

.page-metrics .crm-contact-detail-section__title {
	margin: 0 0 9.6px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--muted);
}

.page-metrics .crm-contact-detail-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 13.6px 17.6px;
	align-items: start;
}

.page-metrics .crm-contact-detail-grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 704px;
}

.page-metrics .crm-contact-detail-grid--stack {
	display: flex;
	flex-direction: column;
	gap: 13.6px;
}

.page-metrics .crm-contact-field {
	display: flex;
	flex-direction: column;
	gap: 4.8px;
	min-width: 0;
}

.page-metrics .crm-contact-field--full {
	width: 100%;
}

.page-metrics .crm-contact-field .metrics-auth__label {
	font-size: 0.8125rem;
	line-height: 1.3;
	font-weight: 600;
}

.page-metrics .crm-contact-field .metrics-auth__input {
	width: 100%;
	box-sizing: border-box;
}

.page-metrics .crm-contact-field__input--readonly {
	background: rgba(22, 25, 34, 0.04);
	cursor: default;
}

html[data-color-scheme="dark"] .page-metrics .crm-contact-field__input--readonly {
	background: rgba(255, 255, 255, 0.05);
}

.page-metrics .crm-contact-field-row {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(88px, 136px);
	gap: 13.6px 17.6px;
	width: 100%;
}

.page-metrics .crm-contact-detail-notes {
	min-height: 88px;
	resize: vertical;
	font-family: inherit;
}
.page-metrics .crm-contact-detail-panel__actions {
	margin-top: 20px;
}

.page-metrics .crm-company-client-form .crm-contact-detail-panel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10.4px 13.6px;
}

/* Authorized contacts table: same row highlight as hub case rows (hover + selected) */
.page-metrics .crm-setup-whitelist-table.metrics-table-scroll tbody tr.crm-setup-whitelist-row--selectable:hover td {
	background: rgba(22, 25, 34, 0.045);
}

.page-metrics .crm-setup-whitelist-table.metrics-table-scroll tbody tr.crm-setup-whitelist-row--selected td {
	background: rgba(22, 25, 34, 0.045);
}

html[data-color-scheme="dark"] .page-metrics .crm-setup-whitelist-table.metrics-table-scroll tbody tr.crm-setup-whitelist-row--selectable:hover td,
html[data-color-scheme="dark"] .page-metrics .crm-setup-whitelist-table.metrics-table-scroll tbody tr.crm-setup-whitelist-row--selected td {
	background: rgba(255, 255, 255, 0.045);
}

/* From your cases: same neutral row hover as hub / authorized contacts */
.page-metrics .crm-setup-derived-table.metrics-table-scroll tbody tr.crm-contacts-derived-row:hover td {
	background: rgba(22, 25, 34, 0.045);
}

html[data-color-scheme="dark"] .page-metrics .crm-setup-derived-table.metrics-table-scroll tbody tr.crm-contacts-derived-row:hover td {
	background: rgba(255, 255, 255, 0.045);
}

.page-metrics .crm-setup-whitelist-table tbody tr.crm-setup-whitelist-row--selectable {
	cursor: pointer;
}

/* Authorized contacts + Hub cases: slightly taller rows, room around stacked/split action controls */
.page-metrics .crm-setup-whitelist-table.metrics-table--dense thead th,
.page-metrics .crm-setup-whitelist-table.metrics-table--dense tbody td,
.page-metrics .crm-hub-cases-table.metrics-table--dense thead th,
.page-metrics .crm-hub-cases-table.metrics-table--dense tbody td {
	padding: 9.92px 11.2px;
}

.page-metrics .crm-setup-whitelist-table tbody tr.crm-setup-whitelist-row--selectable:focus {
	outline: none;
}

@media (max-width: 1099px) {
	.page-metrics .crm-contact-detail-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.page-metrics .crm-contact-detail-grid,
	.page-metrics .crm-contact-detail-grid--two {
		grid-template-columns: 1fr;
		max-width: none;
	}

	.page-metrics .crm-contact-field-row {
		grid-template-columns: 1fr;
	}
}

.page-metrics .crm-setup-actions-col {
	width: 1%;
	white-space: nowrap;
}

.page-metrics .crm-setup-row-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.page-metrics .crm-setup-row-actions--gap {
	gap: 11.2px;
}

.page-metrics .crm-setup-inline-form {
	display: inline;
	margin: 0;
}

.page-metrics .crm-setup-status {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 3.2px 8px;
	border-radius: 6px;
}

.page-metrics .crm-setup-status--on {
	background: rgba(34, 139, 87, 0.12);
	color: #1e7a4d;
}

html[data-color-scheme="dark"] .page-metrics .crm-setup-status--on {
	background: rgba(74, 222, 128, 0.12);
	color: #86efad;
}

.page-metrics .crm-setup-status--off {
	background: rgba(22, 25, 34, 0.08);
	color: var(--muted);
}

html[data-color-scheme="dark"] .page-metrics .crm-setup-status--off {
	background: rgba(255, 255, 255, 0.06);
}

.page-metrics .crm-setup-row--paused td:first-child code {
	opacity: 0.85;
}

.page-metrics .crm-setup-remove-btn {
	color: var(--muted);
}

.page-metrics .crm-setup-remove-btn:hover {
	color: var(--accent);
}

/* Internal user settings */
.page-metrics .internal-settings-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}

.page-metrics .internal-settings-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 840px) {
	.page-metrics .internal-settings-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px;
	}
}

.page-metrics .internal-settings-section {
	display: flex;
	flex-direction: column;
	gap: 10.4px;
	min-width: 0;
}

.page-metrics .internal-settings-section .metrics-page-prose {
	margin: 0 0 4px;
}

.page-metrics .internal-settings-time-preview {
	margin-top: 5.6px;
}

.page-metrics .metrics-page-note {
	margin: 0;
	color: var(--muted);
	font-size: 0.98rem;
	line-height: 1.55;
}

.page-metrics .metrics-page-note--warn {
	color: var(--text);
	padding: 13.6px 16px;
	border-radius: 10px;
	background: rgba(196, 18, 48, 0.06);
	border: 1px solid rgba(196, 18, 48, 0.2);
}

.page-metrics .metrics-page-note--ok {
	color: var(--text);
	padding: 13.6px 16px;
	border-radius: 10px;
	background: rgba(22, 120, 72, 0.09);
	border: 1px solid rgba(22, 120, 72, 0.24);
}

/* Fixed toast: refresh feedback must not reflow the page */
.page-metrics .crm-refresh-toast {
	position: fixed;
	left: 50%;
	bottom: 21.6px;
	z-index: 9000;
	max-width: min(576px, calc(100vw - 32px));
	margin: 0;
	padding: 12px 18.4px;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--text);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(calc(100% + 24px));
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

.page-metrics .crm-refresh-toast.crm-refresh-toast--visible {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.page-metrics .crm-refresh-toast.crm-refresh-toast--ok {
	border-color: rgba(22, 120, 72, 0.38);
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(22, 120, 72, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	.page-metrics .crm-refresh-toast {
		transition: opacity 0.12s ease, visibility 0.12s ease;
		transform: translateX(-50%);
	}
	.page-metrics .crm-refresh-toast.crm-refresh-toast--visible {
		transform: translateX(-50%);
	}
}

.page-metrics .crm-company-clients {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.page-metrics .crm-company-clients__editor .crm-contact-detail-panel__form {
	margin-top: 5.6px;
}

.page-metrics .crm-company-clients__table-wrap {
	margin-bottom: 0;
}

.page-metrics .crm-company-clients .metrics-table thead th:last-child,
.page-metrics .crm-company-clients .metrics-table tbody td:last-child {
	white-space: normal;
	vertical-align: middle;
	min-width: 188px;
	width: 188px;
	box-sizing: border-box;
}

.page-metrics .crm-company-clients .metrics-table tbody td:last-child {
	padding: 5.6px;
}

.page-metrics .crm-company-clients .crm-setup-row-actions.crm-setup-row-actions--gap {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	align-content: stretch;
	gap: 5.6px;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.page-metrics .crm-company-clients .crm-setup-row-actions.crm-setup-row-actions--gap > .site-btn.crm-setup-btn-sm {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 2.88px 8.8px;
	min-height: 0;
	font-size: 0.8125rem;
	line-height: 1.2;
	white-space: nowrap;
	justify-content: center;
	text-align: center;
	border-width: 1px;
}

.page-metrics .crm-company-clients .crm-setup-row-actions.crm-setup-row-actions--gap > .metrics-table__muted {
	display: block;
	text-align: center;
	padding: 2.88px 5.6px;
	font-size: 0.8125rem;
	line-height: 1.2;
	margin: 0;
}

.page-metrics .metrics-page-note code,
.page-metrics .metrics-page-prose code {
	font-size: 0.88em;
	background: rgba(22, 25, 34, 0.06);
	padding: 1.6px 5.6px;
	border-radius: 6px;
}

.page-metrics .metrics-page-prose {
	margin: 0 0 16px;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

/* CRM cases tile grid (/accs-local/crm/cases/) */
.page-metrics .crm-cases-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 20px 21.6px;
	margin-top: 5.6px;
}

.page-metrics .crm-cases-toolbar {
	margin-top: 5.6px;
	margin-bottom: 4px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10.4px;
}

.page-metrics .crm-hub-cases-toolbar {
	margin-bottom: 10.4px;
}

.page-metrics .crm-setup-whitelist-toolbar {
	margin-top: 0;
	margin-bottom: 10.4px;
}

.page-metrics .crm-cases-search-input {
	min-width: min(100%, 352px);
	max-width: 100%;
	box-sizing: border-box;
}

.page-metrics .crm-cases-sort-select,
.page-metrics .crm-cases-scope-select {
	min-width: min(100%, 208px);
	max-width: 100%;
	box-sizing: border-box;
}

.page-metrics .crm-cases-lazy-sentinel {
	height: 1px;
	margin-top: 8px;
	pointer-events: none;
}

.page-metrics .crm-cases-toast {
	position: fixed;
	bottom: max(16px, env(safe-area-inset-bottom));
	left: 50%;
	transform: translateX(-50%);
	z-index: 1200;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10.4px 13.6px;
	max-width: min(608px, calc(100vw - 32px));
	padding: 12px 16px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--chrome-bg-solid);
	box-shadow: 0 12px 40px rgba(22, 25, 34, 0.14);
}

.page-metrics .crm-cases-toast[hidden] {
	display: none !important;
}

.page-metrics .crm-cases-toast__text {
	flex: 1 1 224px;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--text);
	line-height: 1.35;
}

.page-metrics .crm-cases-toast__reload {
	flex-shrink: 0;
	font-size: 0.8rem;
	padding: 6.08px 12px;
}

.page-metrics .crm-cases-toast__dismiss {
	appearance: none;
	flex-shrink: 0;
	margin: 0;
	padding: 2.4px 7.2px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: var(--muted);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}

.page-metrics .crm-cases-toast__dismiss:hover {
	color: var(--text);
	background: rgba(22, 25, 34, 0.06);
}

html[data-color-scheme="dark"] .crm-cases-toast__dismiss:hover {
	background: rgba(255, 255, 255, 0.06);
}

/* In-page modal (replaces window.confirm / alert on portal pages) */
.site-modal {
	position: fixed;
	inset: 0;
	z-index: 1400;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
		max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	box-sizing: border-box;
}

.site-modal[hidden] {
	display: none !important;
}

.site-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(11, 11, 12, 0.55);
	backdrop-filter: blur(4px);
}

.site-modal__dialog {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: min(416px, calc(100vw - 32px));
	padding: 20px 21.6px 18.4px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--chrome-bg-solid);
	box-shadow: 0 16px 48px rgba(22, 25, 34, 0.22);
}

html[data-color-scheme="dark"] .site-modal__dialog {
	box-shadow: 0 20px 56px rgba(0, 0, 0, 0.45);
}

.site-modal__title {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--text);
}

.site-modal__message {
	margin: 0 0 18.4px;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--muted);
}

.site-modal__extra {
	margin: 0 0 16px;
}

.site-modal__extra[hidden] {
	display: none !important;
}

.site-modal__check-label {
	display: flex;
	align-items: flex-start;
	gap: 8.8px;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--text);
	cursor: pointer;
}

.site-modal__check-label input {
	margin-top: 3.2px;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
}

.site-modal__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8.8px 10.4px;
}

.site-modal--alert .site-modal__actions {
	justify-content: flex-end;
}

.page-metrics #crm-cases-refresh.crm-cases-refresh--pulse {
	animation: crm-cases-refresh-pulse 1.35s ease-in-out infinite;
}

@keyframes crm-cases-refresh-pulse {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(196, 18, 48, 0.35);
	}
	50% {
		box-shadow: 0 0 0 8px rgba(196, 18, 48, 0);
	}
}

@keyframes crm-sync-spin {
	to {
		transform: rotate(360deg);
	}
}

.page-metrics .site-btn.crm-sync-busy {
	position: relative;
	pointer-events: none;
	color: transparent !important;
}

.page-metrics .site-btn.crm-sync-busy::after {
	content: "";
	position: absolute;
	left: calc(50% - 8px);
	top: calc(50% - 8px);
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 2px solid rgba(22, 25, 34, 0.14);
	border-top-color: var(--accent);
	animation: crm-sync-spin 0.65s linear infinite;
}

html[data-color-scheme="dark"] .page-metrics .site-btn.crm-sync-busy::after {
	border-color: rgba(255, 255, 255, 0.14);
	border-top-color: var(--accent);
}

.page-metrics .site-btn.site-btn--primary.crm-sync-busy::after {
	border-color: rgba(255, 255, 255, 0.28);
	border-top-color: rgba(255, 255, 255, 0.98);
}

.page-metrics .crm-case-tile {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: 256px;
	padding: 16px 16.8px 13.6px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 4px 20px rgba(22, 25, 34, 0.06);
}

html[data-color-scheme="dark"] .page-metrics .crm-case-tile {
	box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

.page-metrics .crm-case-tile__top {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin-bottom: 5.6px;
}

.page-metrics .crm-case-tile__open {
	flex-shrink: 0;
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--accent);
}

.page-metrics .crm-case-tile__open:hover {
	text-decoration: underline;
}

.page-metrics .crm-case-tile__case-id {
	display: inline-flex;
	align-items: center;
	gap: 7.2px;
	min-width: 0;
	flex: 1 1 auto;
}

.page-metrics .crm-case-tile__copy {
	flex-shrink: 0;
	padding: 4.48px 7.2px;
	border-radius: 6px;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.2;
}

.page-metrics .crm-case-tile__id-short {
	min-width: 0;
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.page-metrics .crm-case-tile__updated {
	display: block;
	margin: 0 0 3.2px;
	font-size: 0.78rem;
	color: var(--muted);
}

.page-metrics .crm-case-tile__assignee {
	margin: 0 0 10.4px;
	font-size: 0.76rem;
	line-height: 1.35;
}

.page-metrics .crm-case-tile__title-form {
	margin: 0 0 10.4px;
}

.page-metrics .crm-case-tile__title-label,
.page-metrics .crm-case-tile__status-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.page-metrics .crm-case-tile__title-row {
	display: flex;
	align-items: stretch;
	gap: 7.2px;
}

.page-metrics .crm-case-tile__title-input {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.3;
	color: var(--text);
	background: rgba(22, 25, 34, 0.04);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 7.2px 8.8px;
}

html[data-color-scheme="dark"] .page-metrics .crm-case-tile__title-input {
	background: rgba(255, 255, 255, 0.05);
}

.page-metrics .crm-case-tile__title-input:focus {
	outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
	outline-offset: 1px;
}

.page-metrics .crm-case-tile__title-save {
	flex-shrink: 0;
	align-self: stretch;
	font-size: 0.82rem;
	padding: 5.6px 10.4px;
}

.page-metrics .crm-case-tile__preview-wrap {
	flex: 1 1 auto;
	min-height: 0;
	margin-bottom: 12px;
	overflow: hidden;
}

.page-metrics .crm-case-tile__preview {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.page-metrics .crm-case-tile__preview--empty {
	font-style: italic;
	opacity: 0.85;
}

.page-metrics .crm-case-tile__status-form {
	margin-top: auto;
	padding-top: 10.4px;
	border-top: 1px solid var(--border);
	width: 100%;
	box-sizing: border-box;
}

.page-metrics .crm-case-tile__status-select {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 8.8px 10.4px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: 8px;
	cursor: pointer;
}

.page-metrics .crm-case-tile__status-select:focus {
	outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
	outline-offset: 1px;
}

/* Hub recent cases: row opens case; Copy ID stops propagation */
.page-metrics .crm-hub-cases-table tbody tr.crm-hub-case-row {
	cursor: pointer;
}

/* Neutral row hover (avoid accent tint reading purple/magenta on dark rows). */
.page-metrics .crm-hub-cases-table.metrics-table-scroll tbody tr.crm-hub-case-row:hover td {
	background: rgba(22, 25, 34, 0.045);
}

html[data-color-scheme="dark"] .page-metrics .crm-hub-cases-table.metrics-table-scroll tbody tr.crm-hub-case-row:hover td {
	background: rgba(255, 255, 255, 0.045);
}

/*
 * Case ID cell: absolute inset fill keeps row-height hit area; inner controls stay compact + centered.
 */
.page-metrics .crm-hub-cases-table.metrics-table-scroll tbody tr.crm-hub-case-row td.crm-hub-case-row__id-cell {
	position: relative;
	height: 1px;
	padding: 0;
	vertical-align: top;
	box-sizing: border-box;
	max-width: none;
	width: auto;
	white-space: nowrap;
}

.page-metrics .crm-hub-cases-table tbody tr.crm-hub-case-row td.crm-hub-case-row__id-cell .crm-hub-case-row__id-fill {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 7.2px;
	padding: 0 8.8px;
	box-sizing: border-box;
}

.page-metrics .crm-hub-cases-table tbody tr.crm-hub-case-row td.crm-hub-case-row__id-cell .crm-hub-case-row__copy {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin: 0;
	padding: 4.48px 7.2px;
	border-radius: 6px;
	font-size: 0.72rem;
	font-weight: 700;
}

/* Hub Subject column width (not sticky; wide sticky column hid the rest of the table on horizontal scroll) */
.page-metrics .crm-hub-cases-table .metrics-table thead th.crm-hub-cases-table__subject,
.page-metrics .crm-hub-cases-table .metrics-table tbody td.crm-hub-cases-table__subject {
	min-width: 352px;
	max-width: 672px;
	vertical-align: middle;
	box-sizing: border-box;
}

.page-metrics .crm-hub-cases-table tbody tr.crm-hub-case-row td.crm-hub-case-row__id-cell .crm-hub-case-row__id-measure {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 7.2px;
	padding: 0 8.8px;
	box-sizing: border-box;
	height: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
}

.page-metrics .crm-hub-cases-table tbody tr.crm-hub-case-row td.crm-hub-case-row__id-cell .crm-hub-case-row__copy-sizer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
	padding: 4.48px 7.2px;
	border-radius: 6px;
	font-size: 0.72rem;
	font-weight: 700;
	border: 1px solid var(--border);
}

.page-metrics .crm-hub-cases-table tbody tr.crm-hub-case-row td.crm-hub-case-row__id-cell .crm-hub-case-row__id-short-sizer {
	font-weight: 600;
	line-height: 1.3;
	font-size: 0.84rem;
	color: var(--muted);
}

.page-metrics .crm-hub-cases-table tbody tr.crm-hub-case-row td.crm-hub-case-row__id-cell .crm-hub-case-row__id-short {
	flex: 0 1 auto;
	min-width: 0;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.page-metrics .crm-hub-cases-table tbody tr.crm-hub-case-row .crm-case-tile__title-input,
.page-metrics .crm-hub-cases-table tbody tr.crm-hub-case-row .crm-case-tile__status-select,
.page-metrics .crm-hub-cases-table tbody tr.crm-hub-case-row .crm-case-tile__title-save {
	cursor: auto;
}

.page-metrics .crm-hub-cases-table tbody tr.crm-hub-case-row .crm-case-tile__title-save {
	cursor: pointer;
}

/* Hub: Updated column fits “YYYY-MM-DD HH:MM UTC” on one line */
.page-metrics .crm-hub-cases-table th.crm-hub-cases-table__updated,
.page-metrics .crm-hub-cases-table td.crm-hub-cases-table__updated {
	white-space: nowrap;
	min-width: 204px;
	width: 1%;
	vertical-align: middle;
}

.page-metrics .crm-hub-cases-table td.crm-hub-cases-table__updated time {
	white-space: nowrap;
}

/* Hub recent cases: Subject | Case ID | Status | Updated | Assigned | Latest message */
.page-metrics .crm-hub-cases-table .crm-case-tile__title-form {
	margin: 0;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.page-metrics .crm-hub-cases-table .crm-case-tile__title-row {
	flex-wrap: wrap;
	gap: 5.6px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	align-items: center;
}

.page-metrics .crm-hub-cases-table .crm-case-tile__title-input {
	flex: 1 1 192px;
	min-width: 0;
	max-width: 100%;
	font-size: 0.82rem;
	padding: 5.6px 7.2px;
}

.page-metrics .crm-hub-cases-table .crm-case-tile__title-save {
	flex: 0 0 auto;
	padding: 4.48px 7.2px;
	font-size: 0.72rem;
}

.page-metrics .crm-hub-cases-table .crm-case-tile__status-form {
	margin: 0;
	padding: 0;
	border: none;
	width: 100%;
	min-width: 160px;
}

.page-metrics .crm-hub-cases-table .crm-case-tile__status-select {
	font-size: 0.82rem;
	padding: 6.08px 7.2px;
}

.page-metrics .crm-hub-cases-table td.crm-hub-cases-table__preview {
	vertical-align: middle;
	max-width: 448px;
	min-width: 0;
	width: 1%;
	overflow: hidden;
}

.page-metrics .crm-hub-cases-table td.crm-hub-cases-table__preview .crm-case-tile__preview {
	display: block;
	margin: 0;
	max-width: 100%;
	font-size: 0.82rem;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.page-metrics .crm-hub-cases-table td.crm-hub-cases-table__preview .crm-case-tile__preview--empty {
	margin: 0;
	font-size: 0.82rem;
	color: var(--muted);
}

/* CRM portal layout helpers (/accs-local/crm/) */
.page-metrics .email-case-plan {
	max-width: 832px;
	margin: 0;
}

.page-metrics .email-case-plan__section {
	margin: 32px 0 0;
	padding: 0;
	border: none;
}

.page-metrics .email-case-plan__section:first-child {
	margin-top: 0;
}

.page-metrics .email-case-plan__title {
	margin: 0 0 12px;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.page-metrics .email-case-plan__lede {
	margin: 0 0 10.4px;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text);
	opacity: 0.92;
}

.page-metrics .email-case-plan ul,
.page-metrics .email-case-plan ol {
	margin: 0 0 16px 18.4px;
	padding: 0;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

.page-metrics .email-case-plan li {
	margin: 5.6px 0;
}

.page-metrics .email-case-plan li ul {
	margin-bottom: 5.6px;
}

.page-metrics .email-case-plan__split {
	display: grid;
	gap: 16px;
}

@media (min-width: 1100px) {
	.page-metrics .email-case-plan__split--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.page-metrics .email-case-plan__callout {
	margin: 16px 0;
	padding: 13.6px 16px;
	border-radius: 10px;
	background: var(--surface);
	border: 1px solid var(--border);
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--muted);
}

.page-metrics .email-case-plan__callout strong {
	color: var(--text);
}

/* Case detail header: same 2-col grid as .crm-case-detail-layout so Copy+ID align with main column */
.page-metrics .crm-case-detail-page-head.metrics-page__head {
	display: block;
}

.page-metrics .crm-case-detail-head__align-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	width: 100%;
	align-items: center;
}

.page-metrics .crm-case-detail-head__titles {
	min-width: 0;
}

.page-metrics .crm-case-detail-head__actions {
	justify-content: flex-start;
}

@media (min-width: 840px) {
	.page-metrics .crm-case-detail-head__align-grid {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
		gap: 32px;
	}

	.page-metrics .crm-case-detail-head__actions {
		justify-content: flex-end;
	}
}

/* Case detail: left column = CRM/Case stack; right column = copy·id / status stack (conversation width); All cases in sidebar column, vertically centered with grid */
.page-metrics .crm-case-detail-head__head-main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px 24px;
	width: 100%;
	min-width: 0;
}

.page-metrics .crm-case-detail-head__cluster {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}

.page-metrics .crm-case-detail-head__cluster--left .metrics-page__session-title {
	margin: 0;
}

.page-metrics .crm-case-detail-head__cluster--right {
	align-items: flex-end;
	text-align: right;
}

.page-metrics .crm-case-detail-head__case-id {
	flex: 0 0 auto;
	margin: 0;
	width: auto;
	justify-content: flex-end;
}

.page-metrics .crm-case-detail-head__meta {
	margin: 0;
	max-width: 100%;
	text-align: right;
	line-height: 1.35;
}

/* Space below page head border: padding avoids margin collapse with in-article siblings */
.page-metrics #crm-case-detail > .crm-case-detail-layout {
	margin-top: 0;
	padding-top: 40px;
}

.page-metrics .crm-case-detail-contact-lead {
	margin: 0 0 10px;
	font-size: 0.88rem;
	line-height: 1.45;
}

.page-metrics .crm-case-detail-contact-mail {
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
}

.page-metrics .crm-case-detail-contact-mail:hover {
	text-decoration: underline;
}

.page-metrics .crm-case-detail-contact-manage {
	margin: 14px 0 0;
}

.page-metrics .crm-case-detail-desc {
	width: 100%;
	min-width: 0;
	margin: 0;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.page-metrics .crm-case-detail-description .crm-case-detail-desc__head {
	flex-shrink: 0;
	margin: 0;
	padding: 15px 18px 17px;
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface) 93%, var(--border));
	border-radius: var(--crm-case-main-radius, 16px) var(--crm-case-main-radius, 16px) 0 0;
	overflow: hidden;
}

.page-metrics .crm-case-detail-description .crm-case-detail-desc__heading {
	margin: 0 0 4px;
}

.page-metrics .crm-case-detail-description .crm-case-detail-desc__byline {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.45;
}

.page-metrics .crm-case-detail-description .crm-case-detail-desc__surface {
	border: none;
	border-radius: 0 0 var(--crm-case-main-radius, 16px) var(--crm-case-main-radius, 16px);
	background: color-mix(in srgb, var(--surface) 91%, var(--border));
	overflow: hidden;
	transition: box-shadow 0.15s ease;
}

.page-metrics .crm-case-detail-description .crm-case-detail-desc__surface[data-desc-editable="1"]:not(.is-editing):hover {
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 72%, var(--accent));
	cursor: text;
}

.page-metrics .crm-case-detail-description .crm-case-detail-desc__surface.is-editing {
	overflow: visible;
	background: var(--surface);
}

.page-metrics .crm-case-detail-description .crm-case-detail-desc__preview-wrap {
	min-height: 0;
	max-height: none;
	overflow: visible;
	padding: 15px 18px 17px;
}

.page-metrics .crm-case-detail-desc__preview {
	min-height: 40px;
	max-height: none;
}

.page-metrics .crm-case-reply__editor-wrap.crm-rich-field--autogrow .ql-editor {
	min-height: 64px;
	max-height: none;
	overflow-y: visible;
	overflow-x: hidden;
}

.page-metrics .crm-case-reply__editor-wrap.crm-rich-field--autogrow .ql-container.ql-snow {
	height: auto !important;
}

.page-metrics .crm-contact-notes-editor-wrap .ql-toolbar.ql-snow {
	padding: 4.48px 5.6px;
}

.page-metrics .crm-contact-notes-editor-wrap .ql-toolbar.ql-snow .ql-formats {
	margin-right: 5.6px;
}

.page-metrics .crm-case-detail-description .crm-case-detail-desc__placeholder {
	margin: 0 0 6px;
}

.page-metrics .crm-case-detail-description .crm-case-detail-desc__edit {
	padding: 12px 18px 16px;
	background: transparent;
}

.page-metrics .crm-case-detail-desc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

/* CRM case detail: the primary column stacks description + messages; JS moves the single sidebar
   between description/messages on narrow screens and back to the grid sidebar on desktop. */
.page-metrics .crm-case-detail-primary {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	align-self: start;
}

.page-metrics .crm-case-detail-description {
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-self: stretch;
	align-items: stretch;
	--crm-case-main-radius: 16px;
	border-radius: var(--crm-case-main-radius);
	border: 1px solid var(--border);
	background: var(--surface);
	overflow: visible;
}

.page-metrics .crm-hub-whiteboard {
	margin-bottom: 24px;
}

@media (min-width: 960px) {
	.page-metrics .crm-hub-whiteboard {
		margin-bottom: 32px;
	}
}

.page-metrics .crm-case-detail-layout {
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 840px) {
	.page-metrics .crm-case-detail-primary {
		gap: 16px;
	}

	.page-metrics .crm-case-detail-layout {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
		gap: 32px;
		align-items: start;
	}
}

.page-metrics .crm-case-detail-sidebar {
	min-width: 0;
	align-self: start;
}

.page-metrics .crm-case-detail-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-self: stretch;
	width: 100%;
	min-height: 288px;
	--crm-case-main-radius: 16px;
	border-radius: var(--crm-case-main-radius);
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: none;
	/* Allow Quill link tooltip (and similar) to extend past the card edge; inner surfaces carry matching radius. */
	overflow: visible;
}

.page-metrics .crm-case-detail-sidebar__card {
	margin: 0 0 16px;
	padding: 16px 18px;
	border-radius: 12px;
	background: var(--surface);
	border: 1px solid var(--border);
}

.page-metrics .crm-case-detail-sidebar__card:last-child {
	margin-bottom: 0;
}

.page-metrics .crm-case-detail-sidebar__title {
	margin: 0 0 12px;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.02em;
}

.page-metrics .crm-case-detail-meta {
	margin: 0;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 6px 12px;
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--muted);
}

.page-metrics .crm-case-detail-meta dt {
	margin: 0;
	font-weight: 600;
	color: var(--text);
	opacity: 0.85;
}

.page-metrics .crm-case-detail-meta dd {
	margin: 0;
	min-width: 0;
}

.page-metrics .crm-case-detail-meta__code {
	font-size: 0.8rem;
	word-break: break-all;
}

.page-metrics .crm-case-detail-meta__code--break {
	word-break: break-all;
	display: inline-block;
	max-width: 100%;
}

.page-metrics .crm-case-detail-meta__btn {
	margin-top: 6px;
	display: inline-flex;
	padding: 4px 9px;
	font-size: 0.8rem;
}

.page-metrics .crm-case-detail-assign-self {
	margin: 12px 0 0;
}

.page-metrics .crm-case-detail-assign-self__btn {
	width: 100%;
	box-sizing: border-box;
	justify-content: center;
	font-size: 0.82rem;
}

.page-metrics .crm-case-detail-assign-self__btn:disabled,
.page-metrics .crm-case-detail-assign-self__btn[disabled] {
	opacity: 0.42;
	cursor: not-allowed;
	color: var(--muted);
}

.page-metrics .crm-case-detail-form-row {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}

.page-metrics .crm-case-detail-form-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.page-metrics .crm-case-detail-select {
	flex: 1 1 160px;
	min-width: 0;
}

/* Space after Status control before Visibility label (Case controls card only). */
.page-metrics .crm-case-detail-sidebar__card:first-of-type .crm-case-detail-select + .crm-case-detail-label {
	margin-top: 14px;
}

.page-metrics .crm-case-detail-label {
	display: block;
	margin: 0 0 6px;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--text);
}

.page-metrics .crm-case-detail-stack {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 12px;
}

.page-metrics .crm-case-detail-stack:first-child {
	margin-top: 0;
}

.page-metrics .crm-case-detail-stack--tight-top {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}

.page-metrics .crm-case-detail-muted-gap {
	margin: 8px 0 0;
	font-size: 0.88rem;
}

.page-metrics .crm-case-detail-share-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	font-size: 0.88rem;
}

.page-metrics .crm-case-detail-share-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: 7px 0;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--border);
}

.page-metrics .crm-case-detail-share-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.page-metrics .crm-case-detail-share-list__who {
	font-weight: 600;
	color: var(--text);
}

.page-metrics .crm-case-detail-participants {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.88rem;
	line-height: 1.5;
}

.page-metrics .crm-case-detail-participants li {
	margin: 6px 0;
}

.page-metrics .crm-case-detail-participants__row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 8px 10px;
	width: 100%;
	box-sizing: border-box;
}

.page-metrics .crm-case-detail-participants__main {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px 10px;
	min-width: 0;
	flex: 1 1 auto;
}

.page-metrics .crm-case-detail-participants__email {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: inherit;
}

.page-metrics .crm-case-detail-participants__role {
	flex-shrink: 0;
	font-size: 0.92em;
}

.page-metrics .crm-case-detail-participant-remove {
	flex-shrink: 0;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.125em;
	height: 1.125em;
	margin: 0;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--border) 88%, var(--text));
	border-radius: 4px;
	background: color-mix(in srgb, var(--surface) 94%, var(--border));
	color: var(--muted);
	font-family: inherit;
	font-size: 1em;
	line-height: 1;
	cursor: pointer;
	transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.page-metrics .crm-case-detail-participant-remove:hover {
	color: var(--text);
	border-color: color-mix(in srgb, var(--border) 40%, var(--text));
	background: color-mix(in srgb, var(--surface) 88%, var(--border));
}

.page-metrics .crm-case-detail-participant-remove:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--text) 45%, var(--border));
	outline-offset: 2px;
}

.page-metrics .crm-case-detail-main__bar {
	flex-shrink: 0;
	margin: 0;
	padding: 15px 18px 17px;
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface) 93%, var(--border));
	border-radius: var(--crm-case-main-radius, 16px) var(--crm-case-main-radius, 16px) 0 0;
	overflow: hidden;
}

.page-metrics .crm-case-detail-main__bar-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
}

.page-metrics .crm-case-detail-main__bar-top .crm-case-detail-main__heading {
	margin-bottom: 0;
}

.page-metrics .crm-case-detail-main__heading {
	margin: 0 0 6px;
	font-size: 0.76rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.page-metrics .crm-case-detail-main__hint {
	margin: 5px 0 0;
	font-size: 0.82rem;
	line-height: 1.45;
}

.page-metrics .crm-case-detail-main__hint code {
	font-size: 0.78rem;
}

.page-metrics .crm-case-thread {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 34px 18px 20px;
	min-height: 96px;
	background: color-mix(in srgb, var(--surface) 91%, var(--border));
	border-radius: 0 0 var(--crm-case-main-radius, 16px) var(--crm-case-main-radius, 16px);
	/* overflow visible: Quill link tooltip in reply panel lives inside this subtree */
}

.page-metrics .crm-case-thread__empty {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 32px 16px;
	text-align: center;
	font-size: 0.92rem;
	line-height: 1.45;
	border-radius: 12px;
	border: 1px dashed color-mix(in srgb, var(--border) 75%, var(--muted));
	background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.page-metrics .crm-case-msg {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	align-self: stretch;
	margin: 0;
	padding: 16px 20px;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	/* Shared rhythm for header/meta/body/technical spacing inside each message. */
	--crm-case-msg-rhythm: 12px;
	--crm-case-body-line-gap: 7px;
}

.page-metrics .crm-case-msg + .crm-case-msg {
	border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
}

.page-metrics .crm-case-msg--new {
	margin: 0;
	padding-block: 16px;
	border-radius: 12px;
	background: rgba(22, 25, 34, 0.045);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 76%, transparent);
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

html[data-color-scheme="dark"] .page-metrics .crm-case-msg--new {
	background: rgba(255, 255, 255, 0.045);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 76%, transparent);
}

.page-metrics .crm-case-msg--in,
.page-metrics .crm-case-msg--out {
	align-self: stretch;
	margin-left: 0;
	margin-right: 0;
}

.page-metrics .crm-case-msg__top {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px 12px;
	width: 100%;
	min-width: 0;
	margin-bottom: 6px;
	box-sizing: border-box;
}

.page-metrics .crm-case-msg__meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	min-width: 0;
}

.page-metrics .crm-case-msg__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.page-metrics .crm-case-msg__badge {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.page-metrics .crm-case-msg__time {
	font-size: 0.78rem;
	color: var(--muted);
}

.page-metrics .crm-case-msg__from {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.35;
	word-break: break-word;
}

.page-metrics .crm-case-msg__subject {
	margin: 0 0 var(--crm-case-msg-rhythm);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--text);
	line-height: 1.35;
}

.page-metrics .crm-case-msg__from:last-child {
	margin-bottom: var(--crm-case-msg-rhythm);
}

.page-metrics .crm-case-msg__body--html {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--text);
	white-space: normal;
	overflow-wrap: anywhere;
	overflow-x: auto;
	word-break: break-word;
}

/* Sender wrappers often carry giant margins/min-heights; CRM overrides rein in vertical rhythm. */
.page-metrics .crm-case-msg__body--html :where(p, div, blockquote, h1, h2, h3, h4, h5, h6, ul, ol, li) {
	margin-block: 0 !important;
	min-height: 0 !important;
}

.page-metrics .crm-case-msg__body--html > :where(p, div, blockquote, table, ul, ol) + :where(p, div, blockquote, table, ul, ol) {
	margin-top: var(--crm-case-body-line-gap) !important;
}

.page-metrics .crm-case-msg__body--html :where(ul, ol) {
	padding-inline-start: 18px;
}

/* Older messages embed deeper quote chains; sender line-height/padding stacks visually, so unify rhythm. */
.page-metrics .crm-case-msg__body--html *:not(pre):not(code) {
	line-height: inherit !important;
}

.page-metrics .crm-case-msg__body--html blockquote {
	margin-inline: 0 !important;
	padding-block: 0 !important;
	padding-inline: 0 0 0 10px !important;
	border-left: 2px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.page-metrics .crm-case-msg__body--html img,
.page-metrics .crm-case-msg__body--html svg {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.page-metrics .crm-case-msg__body--html table {
	max-width: 100%;
	border-collapse: collapse;
}

.page-metrics .crm-case-msg__body--html pre,
.page-metrics .crm-case-msg__body--html code {
	white-space: pre-wrap;
	word-break: break-word;
	line-height: 1.45;
}

.page-metrics .crm-case-msg__body {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--text);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.page-metrics .crm-case-msg__attachments {
	margin-top: var(--crm-case-msg-rhythm);
	margin-bottom: 16px;
	padding: 14px 15px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: color-mix(in srgb, var(--surface) 94%, var(--border));
	font-size: 0.88rem;
	line-height: 1.45;
}

.page-metrics .crm-case-msg__attachments-title {
	margin: 0 0 8px;
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.page-metrics .crm-case-msg__attachments-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.page-metrics .crm-case-msg__attachments-list li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
}

.page-metrics .crm-case-msg__attachment-link {
	font-weight: 700;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
}

.page-metrics .crm-case-msg__tech {
	margin-top: 0;
	font-size: 0.78rem;
}

.page-metrics .crm-case-msg__body + .crm-case-msg__tech,
.page-metrics .crm-case-msg__attachments + .crm-case-msg__tech {
	margin-top: 16px;
}

.page-metrics .crm-case-msg__tech > summary {
	cursor: pointer;
	user-select: none;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: inherit;
}

.page-metrics .crm-case-msg__tech > summary::-webkit-details-marker {
	display: none;
}

.page-metrics .crm-case-msg__tech > summary::before {
	content: "\276F";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	display: block;
	line-height: 16px;
	text-align: center;
	font-size: 0.58rem;
	opacity: 0.5;
	transition: transform 0.12s ease;
}

.page-metrics details.crm-case-msg__tech[open] > summary::before {
	transform: rotate(90deg);
}

.page-metrics .crm-case-msg__tech-row {
	margin: 6px 0 0;
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 6px;
	align-items: baseline;
	color: var(--muted);
}

.page-metrics .crm-case-msg__tech-row code {
	font-size: 0.72rem;
	word-break: break-all;
}

.page-metrics .crm-case-thread > .crm-case-reply:not(:first-child) {
	border-top: 1px solid var(--border);
}

.page-metrics .crm-case-reply {
	flex-shrink: 0;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	margin-top: 0;
	padding: 16px 18px 19px;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface) 88%, var(--border));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-color-scheme="dark"] .page-metrics .crm-case-reply {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Compose (/cases/new/): match reply panel chrome outside of thread */
.page-metrics .crm-compose-panel.crm-case-reply {
	margin-top: 0;
	border-radius: 12px;
	border: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-color-scheme="dark"] .page-metrics .crm-compose-panel.crm-case-reply {
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.page-metrics .crm-compose-panel__row {
	margin-top: 0;
	margin-bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 18px;
}

.page-metrics .crm-compose-panel__row .crm-setup-contact-form__field {
	flex: 0 0 auto;
	width: 100%;
	min-width: 0;
}

.page-metrics .crm-compose-contact-field > .metrics-page-note {
	margin-top: 7px;
}

.page-metrics .crm-compose-contact-field {
	width: 100%;
	min-width: 0;
}

.page-metrics .crm-compose-form.crm-case-detail-stack {
	gap: 12px;
}

.page-metrics .crm-compose-contact-picker {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.page-metrics .crm-compose-contact-picker__dropdown {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.page-metrics .crm-compose-contact-picker__search-row {
	display: flex;
	align-items: stretch;
	gap: 7px;
	width: 100%;
	box-sizing: border-box;
}

.page-metrics .crm-compose-contact-picker__search-row .crm-compose-contact-picker__search {
	flex: 1;
	min-width: 0;
	width: 100%;
	box-sizing: border-box;
}

.page-metrics .crm-compose-send-mode {
	margin-top: 8px;
}

.page-metrics .crm-compose-send-mode__label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.92rem;
	line-height: 1.35;
	cursor: pointer;
}

.page-metrics .crm-compose-send-mode__label input {
	margin-top: 3px;
	flex-shrink: 0;
}

.page-metrics .crm-compose-actions-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin-top: 6px;
}

.page-metrics .crm-compose-actions-row__secondary {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	align-items: center;
}

.page-metrics .crm-compose-drafts-band {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid var(--border);
}

.page-metrics .crm-compose-drafts-band__title {
	margin: 0 0 6px;
	font-size: 1.2rem;
}

.page-metrics .crm-compose-drafts-band__lead {
	margin: 0 0 16px;
	font-size: 0.92rem;
	line-height: 1.45;
}

.page-metrics .crm-compose-drafts-grid {
	margin-top: 4px;
}

.page-metrics .crm-compose-drafts-empty {
	margin: 6px 0 0;
}

.page-metrics .crm-compose-draft-tile {
	min-height: 0;
}

.page-metrics .crm-compose-draft-tile__badge {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.page-metrics .crm-compose-draft-tile__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
	align-items: center;
}

.page-metrics .crm-compose-draft-tile__subject {
	margin: 0 0 6px;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text);
}

.page-metrics .crm-compose-recipient-chips {
	list-style: none;
	margin: 7px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 7px;
	box-sizing: border-box;
}

.page-metrics .crm-compose-recipient-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 4px 6px;
	max-width: 100%;
	padding: 4px 7px;
	border-radius: 999px;
	border: 1px solid var(--border);
	background: var(--input-bg);
	font-size: 0.82rem;
	line-height: 1.25;
	box-sizing: border-box;
}

.page-metrics .crm-compose-recipient-chips__email {
	word-break: break-all;
	font-weight: 600;
}

.page-metrics .crm-compose-recipient-chips__remove {
	appearance: none;
	margin: 0;
	padding: 0 2px;
	border: none;
	border-radius: 4px;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
}

.page-metrics .crm-compose-recipient-chips__remove:hover,
.page-metrics .crm-compose-recipient-chips__remove:focus-visible {
	color: var(--accent);
	outline: none;
}

.page-metrics .crm-compose-contact-emails-fields:empty {
	display: none;
}

.page-metrics .crm-compose-result-cases,
.page-metrics .crm-compose-result-failures {
	margin: 8px 0 0;
	padding-left: 18px;
	font-size: 0.92rem;
	line-height: 1.45;
}

.page-metrics .crm-compose-result-partial {
	margin-top: 12px !important;
}

.page-metrics #crm-compose-result:not([hidden]) {
	display: block;
}

.page-metrics .crm-compose-contact-picker__search {
	width: 100%;
	box-sizing: border-box;
}

.page-metrics .crm-compose-contact-picker__list {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 6;
	margin: 5px 0 0;
	padding: 4px;
	max-height: 224px;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--input-bg);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
	box-sizing: border-box;
}

.page-metrics .crm-compose-contact-picker__list[hidden] {
	display: none !important;
}

.page-metrics .crm-compose-contact-picker__option {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	width: 100%;
	margin: 0;
	padding: 7px 9px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: 0.92rem;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
}

.page-metrics .crm-compose-contact-picker__option:hover,
.page-metrics .crm-compose-contact-picker__option:focus-visible {
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	outline: none;
}

.page-metrics .crm-compose-contact-picker__option[aria-selected="true"] {
	background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.page-metrics .crm-compose-contact-picker__option--hidden {
	display: none !important;
}

.page-metrics .crm-compose-contact-picker__email {
	font-weight: 600;
	word-break: break-all;
}

.page-metrics .crm-compose-contact-picker__note {
	font-size: 0.88rem;
}

.page-metrics .crm-company-picker__hint {
	margin: 0 0 6px;
	font-size: 0.88rem;
	line-height: 1.35;
}

.page-metrics .crm-company-picker__row {
	display: flex;
	align-items: stretch;
	gap: 7px;
	width: 100%;
	box-sizing: border-box;
}

.page-metrics .crm-company-picker__row .crm-compose-contact-picker__search {
	flex: 1 1 auto;
	min-width: 0;
}

.page-metrics .crm-company-picker__add {
	flex: 0 0 auto;
	align-self: stretch;
	white-space: nowrap;
	font-size: 0.88rem;
	padding-left: 10px;
	padding-right: 10px;
}

.page-metrics .crm-case-reply__head-title {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--text);
	text-transform: none;
	letter-spacing: -0.02em;
}

.page-metrics .crm-case-reply__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 6px;
}

.page-metrics .crm-case-reply__close {
	flex-shrink: 0;
}

.page-metrics .crm-case-reply__target {
	margin: 0 0 10px;
	font-size: 0.84rem;
	line-height: 1.4;
}

.page-metrics .crm-case-reply__target:empty {
	display: none;
}

.page-metrics .crm-case-msg__actions {
	flex-shrink: 0;
	margin: 0;
	margin-left: auto;
	align-self: flex-start;
}

.page-metrics .crm-case-msg__reply-btn {
	font-size: 0.78rem;
	padding: 4px 9px;
}

.page-metrics .crm-case-reply__hint {
	margin: 0 0 12px;
	font-size: 0.85rem;
}

.page-metrics .crm-case-reply__form {
	width: 100%;
	max-width: none;
	min-width: 0;
	margin-top: 0;
	box-sizing: border-box;
}

.page-metrics .crm-case-reply__form > button[type="submit"] {
	width: 100%;
	justify-content: center;
}

.page-metrics .crm-case-reply__subject {
	width: 100%;
	box-sizing: border-box;
}

.page-metrics .crm-case-reply__editor-wrap {
	width: 100%;
	max-width: 100%;
	border-radius: 10px;
	/* Quill places .ql-tooltip inside .ql-container; overflow:hidden clipped it. */
	overflow: visible;
	border: 1px solid var(--border);
	background: var(--surface);
}

.page-metrics .crm-case-reply__editor-wrap .ql-toolbar.ql-snow {
	border-radius: 10px 10px 0 0;
	border: none;
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--surface) 94%, var(--border));
	padding: 6px 7px;
}

.page-metrics .crm-case-reply__editor-wrap .ql-toolbar.ql-snow .ql-formats {
	margin-right: 7px;
}

.page-metrics .crm-case-reply__editor-wrap .ql-container.ql-snow {
	border: none;
	border-radius: 0 0 10px 10px;
	overflow: visible;
	position: relative;
	font-family: var(--font);
	font-size: 0.92rem;
	color: var(--text);
}

.page-metrics .crm-case-message__body,
.page-metrics .crm-case-message__body * {
	font-family: var(--font);
}

.page-metrics .crm-case-reply__editor-wrap .ql-editor {
	min-height: 160px;
	max-height: 416px;
	overflow-y: auto;
	overflow-x: hidden;
	font-family: var(--font);
	line-height: 1.55;
	padding: 10px 14px;
	border-radius: 0 0 10px 10px;
}

/* Quill link tooltip: match metrics chrome (Snow defaults are light theme + blue links). */
.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip {
	background-color: var(--chrome-bg-solid);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
	padding: 7px 10px;
	max-width: min(352px, calc(100% - 20px));
	box-sizing: border-box;
	white-space: normal;
	z-index: 3;
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip::before {
	color: var(--muted);
	line-height: 1.35;
	margin-right: 8px;
	vertical-align: middle;
}

/*
 * Hide URL input only when not editing. A broader selector below beat Snow’s
 * `.ql-editing input { display: inline-block }` and kept the field permanently hidden.
 */
.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip:not(.ql-editing) input[type="text"] {
	display: none !important;
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip.ql-editing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px 9px;
	min-width: min(100%, 304px);
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip.ql-editing::before {
	flex: 0 0 auto;
	margin-right: 0;
	align-self: center;
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip.ql-editing input[type="text"] {
	display: inline-block !important;
	flex: 1 1 160px;
	min-width: 160px;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--input-bg);
	color: var(--text);
	font: inherit;
	font-size: 0.88rem;
	height: auto;
	min-height: 32px;
	padding: 6px 8px;
	vertical-align: middle;
	-webkit-user-select: text;
	user-select: text;
	cursor: text;
	position: relative;
	z-index: 1;
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip.ql-editing a.ql-action {
	flex: 0 0 auto;
	align-self: center;
	margin-left: 0;
	padding: 4px 12px;
	border-radius: var(--site-btn-radius, 6px);
	background: var(--accent);
	color: var(--accent-ink) !important;
	font-weight: 600;
	font-size: 0.82rem;
	text-decoration: none;
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
	border-right: none;
	content: "Save";
	padding-right: 0;
	color: inherit;
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip input[type="text"]:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip a {
	line-height: 1.35;
	color: var(--accent);
	font-weight: 600;
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip a.ql-preview {
	color: var(--text);
	max-width: 192px;
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip:not(.ql-editing) a.ql-action::after {
	border-right-color: var(--border);
	color: inherit;
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip a.ql-remove {
	color: var(--muted);
	font-weight: 600;
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-tooltip a.ql-remove::before {
	color: inherit;
	font-weight: 600;
}

.page-metrics .crm-case-reply__editor-wrap .ql-editor a {
	color: var(--accent);
	text-underline-offset: 0.12em;
}

.page-metrics .crm-case-reply__editor-wrap .ql-editor.ql-blank::before {
	left: 14px;
	right: 14px;
	font-style: normal;
	color: var(--muted);
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-picker {
	color: var(--text);
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-stroke {
	stroke: var(--text);
}

.page-metrics .crm-case-reply__editor-wrap .ql-snow .ql-fill {
	fill: var(--text);
}

.page-metrics .metrics-auth__hint {
	margin: 0 0 16px;
}

.page-metrics .metrics-auth__err {
	margin: 0 0 16px;
	color: var(--accent);
	font-weight: 600;
	font-size: 0.95rem;
}

.page-metrics .metrics-auth__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 352px;
}

.page-metrics .metrics-auth__label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--text);
}

.page-metrics .metrics-auth__input {
	font-family: var(--font);
	font-size: 1rem;
	padding: 10.4px 13.6px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: var(--input-bg);
	color: var(--text);
	-webkit-user-select: text;
	user-select: text;
}

.page-metrics .metrics-auth__btn {
	align-self: flex-start;
	margin-top: 4px;
}

/* Live WebSocket block (sits in band; individual stats keep their tiles) */
.page-metrics .metrics-live {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
	border-radius: 0;
}

.page-metrics .metrics-live__intro {
	margin-bottom: 17.6px;
}

.page-metrics .metrics-live__intro-text {
	flex: 1 1 192px;
	min-width: 0;
}

.page-metrics .metrics-live__heading {
	margin: 0 0 5.6px;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -0.02em;
}

.page-metrics .metrics-live__lede {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--muted);
}

.page-metrics .metrics-live__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 13.6px;
}

@media (min-width: 640px) {
	.page-metrics .metrics-live__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.page-metrics .metrics-live__stat {
	padding: 13.6px 15.2px;
	border-radius: 10px;
	background: var(--surface);
	border: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 100%;
}

.page-metrics .metrics-live__stat--span {
	grid-column: 1 / -1;
}

@media (min-width: 640px) {
	.page-metrics .metrics-live__stat--span {
		grid-column: span 2;
	}
}

.page-metrics .metrics-live__stat-top {
	margin: 0 0 8px;
}

.page-metrics .metrics-live__stat-main {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10.4px;
}

.page-metrics .metrics-live__stat--load .metrics-live__stat-main {
	margin-bottom: 7.2px;
}

.page-metrics .metrics-live__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.page-metrics .metrics-live__path {
	font-weight: 600;
	opacity: 0.85;
}

.page-metrics .metrics-live__value {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--text);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.page-metrics .metrics-live__value--loads {
	font-size: 1.12rem;
	font-weight: 700;
	letter-spacing: 0;
}

.page-metrics .metrics-live__facts {
	margin: 0;
	padding: 8.8px 0 0;
	border-top: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 6.4px;
}

.page-metrics .metrics-live__fact {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: 5.6px 10.4px;
}

.page-metrics .metrics-live__fact dt {
	margin: 0;
	padding: 0;
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.page-metrics .metrics-live__fact dd {
	margin: 0;
	padding: 0;
	justify-self: end;
	text-align: right;
	font-size: 0.78rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--text);
	line-height: 1.3;
	min-width: 0;
	word-break: break-word;
}

.page-metrics .metrics-live__loads-hint {
	margin: 0;
	padding: 8.8px 0 0;
	border-top: 1px solid var(--border);
	font-size: 0.72rem;
	line-height: 1.4;
	color: var(--muted);
}

.page-metrics .metrics-live__meter {
	height: 7px;
	border-radius: 999px;
	background: rgba(22, 25, 34, 0.08);
	overflow: hidden;
	flex-shrink: 0;
}

.page-metrics .metrics-live__meter-fill {
	height: 100%;
	width: 0%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--accent) 0%, #e85a6f 100%);
	transition: width 0.35s var(--ease);
}

/* Historical / table */
.page-metrics .metrics-historical__head {
	margin-bottom: 13.6px;
}

.page-metrics .metrics-historical__title {
	margin: 0 0 5.6px;
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -0.02em;
}

.page-metrics .metrics-historical__subtitle {
	margin: 0;
	font-size: 0.88rem;
	color: var(--muted);
	line-height: 1.45;
	max-width: 50ch;
}

@media (min-width: 1100px) {
	.page-metrics .metrics-historical__subtitle {
		max-width: none;
	}
}

.page-metrics .metrics-meta-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.page-metrics .metrics-meta-chips__item {
	display: inline-flex;
	align-items: baseline;
	gap: 6.4px;
	padding: 6.4px 10.4px;
	border-radius: 8px;
	font-size: 0.86rem;
	color: var(--text);
	background: rgba(22, 25, 34, 0.04);
	border: 1px solid var(--border);
}

.page-metrics .metrics-meta-chips__item--wide {
	flex: 1 1 auto;
	min-width: min(100%, 224px);
}

.page-metrics .metrics-meta-chips__key {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
}

.page-metrics .metrics-table-wrap {
	overflow-x: auto;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-top: 4px;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--input-bg);
}

.page-metrics .metrics-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.page-metrics .metrics-table th,
.page-metrics .metrics-table td {
	padding: 11.2px 14.4px;
	text-align: left;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
}

.page-metrics .metrics-table th {
	background: rgba(22, 25, 34, 0.035);
	font-weight: 700;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.page-metrics .metrics-table tbody tr:hover td {
	background: rgba(196, 18, 48, 0.03);
}

.page-metrics .metrics-table tbody tr:last-child td {
	border-bottom: none;
}

.page-metrics .metrics-table__num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.page-metrics .metrics-table__customer code {
	font-size: 0.9em;
	font-weight: 600;
	background: rgba(22, 25, 34, 0.06);
	padding: 2.4px 6.4px;
	border-radius: 6px;
}

.page-metrics .metrics-table__accent {
	color: var(--accent);
}

.page-metrics .metrics-table__muted {
	font-size: 0.86rem;
	color: var(--text);
	line-height: 1.45;
}

.page-metrics .metrics-table__cell-long {
	max-width: 352px;
}

.page-metrics .metrics-table-wrap--deploy {
	margin-top: 0;
	margin-bottom: 20px;
}

.page-metrics .metrics-deploy {
	margin-bottom: 21.6px;
}

.page-metrics .metrics-deploy__head {
	margin-bottom: 12px;
}

.page-metrics .metrics-deploy__title {
	margin: 0 0 5.6px;
	font-size: 1.1rem;
	font-weight: 800;
	color: var(--text);
	letter-spacing: -0.02em;
}

.page-metrics .metrics-deploy__subtitle {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--muted);
}

.page-metrics .metrics-deploy__code {
	font-size: 0.88em;
	font-weight: 600;
	word-break: break-word;
}

.page-metrics .metrics-deploy__units {
	display: inline-block;
	max-width: 100%;
}

.page-metrics .metrics-deploy__map-title {
	margin: 16px 0 5.6px;
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--text);
}

.page-metrics .metrics-deploy__map-lede {
	margin: 0 0 8px;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--muted);
}

.page-metrics .metrics-deploy__service-list {
	margin: 0;
	padding-left: 18.4px;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--text);
}

.page-metrics .metrics-deploy__service-list li {
	margin-bottom: 5.6px;
}

.page-metrics .metrics-table--deploy th:nth-child(3),
.page-metrics .metrics-table--deploy th:nth-child(4) {
	min-width: 128px;
}

/* Wider dashboard column for large customer / service matrices */
.page-metrics .metrics-page-band__inner--wide {
	width: 100%;
	max-width: 1440px;
}

.page-metrics .metrics-table-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin: 0 0 8px;
}

.page-metrics .metrics-table-toolbar__search {
	flex: 1 1 192px;
	min-width: min(100%, 224px);
}

.page-metrics .metrics-table-toolbar__input {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 7.2px 10.4px;
	font: inherit;
	font-size: 0.88rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--input-bg);
	color: var(--text);
}

.page-metrics .metrics-table-toolbar__input:focus {
	outline: 2px solid rgba(196, 18, 48, 0.35);
	outline-offset: 1px;
}

.page-metrics .metrics-table-toolbar__meta {
	margin: 0;
	font-size: 0.8rem;
	color: var(--muted);
	white-space: nowrap;
}

.page-metrics .metrics-deploy__coverage-toolbar {
	margin-top: 5.6px;
}

/* Scroll regions: tall tables stay on screen; sticky header + sticky customer column */
.page-metrics .metrics-table-wrap.metrics-table-scroll {
	overflow: auto;
	max-height: 720px;
	/* Keep sideways pan inside the table; let vertical wheel chain to the page when appropriate. */
	overscroll-behavior-x: contain;
	overscroll-behavior-y: auto;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

.page-metrics .metrics-table-scroll .metrics-table {
	min-width: min(100%, 832px);
}

.page-metrics .metrics-table--dense th,
.page-metrics .metrics-table--dense td {
	padding: 7.2px 8.8px;
	font-size: 0.84rem;
	line-height: 1.35;
}

.page-metrics .metrics-table-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--metrics-sticky-th);
	border-bottom: 1px solid var(--border);
	box-shadow: none;
	backdrop-filter: blur(4px);
}

.page-metrics .metrics-table-scroll thead th.metrics-table__sticky-left {
	left: 0;
	z-index: 4;
	background: var(--metrics-sticky-corner);
	border-right: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	box-shadow: none;
}

.page-metrics .metrics-table-scroll tbody td.metrics-table__sticky-left {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--input-bg);
	border-right: 1px solid var(--border);
	box-shadow: none;
	max-width: 192px;
}

.page-metrics .metrics-table-scroll tbody tr:hover td.metrics-table__sticky-left {
	background: rgba(196, 18, 48, 0.05);
}

.page-metrics .metrics-table-scroll tbody tr:hover td:not(.metrics-table__sticky-left) {
	background: rgba(196, 18, 48, 0.03);
}

.page-metrics .metrics-table__cell-services {
	max-width: 448px;
	word-break: break-word;
}

.page-metrics .metrics-table__cell-nowrap {
	white-space: nowrap;
}

.page-metrics .metrics-deploy__coverage-scroll {
	max-height: 480px;
	overflow: auto;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--input-bg);
	overscroll-behavior: contain;
	padding: 8px 10.4px;
	margin-top: 5.6px;
}

.page-metrics .metrics-deploy__service-list--grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.page-metrics .metrics-deploy__coverage-item {
	display: grid;
	grid-template-columns: minmax(80px, 160px) 1fr;
	gap: 8px 16px;
	align-items: start;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--border);
	font-size: 0.82rem;
	line-height: 1.4;
}

.page-metrics .metrics-deploy__coverage-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

@media (max-width: 640px) {
	.page-metrics .metrics-deploy__coverage-item {
		grid-template-columns: 1fr;
	}
}

.page-metrics .metrics-deploy__coverage-svc code {
	font-weight: 700;
	font-size: 0.88em;
}

.page-metrics .metrics-deploy__coverage-customers {
	display: flex;
	flex-wrap: wrap;
	gap: 4.8px 7.2px;
}

.page-metrics .metrics-deploy__chip {
	display: inline-flex;
	align-items: center;
	padding: 1.6px 5.6px;
	border-radius: 6px;
	background: rgba(22, 25, 34, 0.06);
	border: 1px solid var(--border);
}

.page-metrics .metrics-deploy__chip code {
	font-size: 0.82em;
	font-weight: 600;
	background: none;
	padding: 0;
}

/* Tabbed dashboard / CRM subnav: tuck first control row into band top padding (same alignment) */
.page-metrics .metrics-page-band__inner > #metrics-dashboard-tabs,
.page-metrics .metrics-page-band__inner > .metrics-tabs--crm-subnav,
.page-metrics .metrics-page-band__inner > .metrics-tabs--orders-subnav {
	margin-top: -20px;
}

/* Internal auth & similar: collapse strip is injected by JS (server class avoids :has() FOUC and older browsers).
   Cancels band top padding + negative tab-shell margin that otherwise exposes main --bg between hero and strip. */
.page-metrics .metrics-page-band.metrics-page-band--flush-subhero {
	padding-top: 0;
}

.page-metrics .metrics-page-band.metrics-page-band--flush-subhero
	.metrics-page-band__inner > .metrics-tabs--crm-subnav,
.page-metrics .metrics-page-band.metrics-page-band--flush-subhero
	.metrics-page-band__inner > .metrics-tabs--orders-subnav {
	margin-top: 0;
}

.page-metrics .metrics-page-band.metrics-page-band--flush-subhero .metrics-page-band__inner--auth,
.page-metrics .metrics-page-band.metrics-page-band--flush-subhero .metrics-page-band__inner--wide {
	padding-top: 0;
}

.page-metrics .metrics-tabs {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	min-width: 0;
	max-width: 100%;
}

.page-metrics .metrics-tabs.metrics-tabs--crm-subnav,
.page-metrics .metrics-tabs.metrics-tabs--orders-subnav {
	gap: 32px;
	padding: 0;
}

/*
 * CRM section tabs (Hub | Contacts | …) sit inside `.wrap`. The global `.metrics-tabs__list`
 * full-bleed (100vw + negative margins) is meant for dashboard strips; here it widens the
 * document and pushes the fixed header / menu past the viewport on narrow screens.
 */
.page-metrics .metrics-tabs--crm-subnav > .metrics-tabs__list,
.page-metrics .metrics-tabs--crm-subnav > .metrics-tabs__list-shell > .metrics-tabs__list {
	width: 100dvw;
	max-width: 100dvw;
	margin-left: calc(50% - 50dvw);
	margin-right: calc(50% - 50dvw);
	margin-bottom: 0;
	box-sizing: border-box;
}

.page-metrics .metrics-tabs__panel {
	padding: 0;
	margin: 0;
}

/* Full viewport width: break out of .wrap horizontal padding (16px each side).
   Right edge: safe-area only (no fixed gutter; large padding-inline-end read as a gap beside the collapse toggle). */
.page-metrics .metrics-tabs__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	align-items: stretch;
	width: 100vw;
	max-width: 100vw;
	height: var(--metrics-tab-row-min-h);
	min-height: var(--metrics-tab-row-min-h);
	max-height: var(--metrics-tab-row-min-h);
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
	padding-inline-end: env(safe-area-inset-right, 0px);
	box-sizing: border-box;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid var(--border);
	background: var(--bg2);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	margin-bottom: 13.6px;
}

/* Orders status tabs: nav lives alone inside wrapper to preserve spacing before page header without extra list margin. */
.page-metrics .metrics-tabs.metrics-tabs--orders-subnav {
	margin-bottom: 13.6px;
}

.page-metrics .metrics-tabs--orders-subnav > .metrics-tabs__list,
.page-metrics .metrics-tabs--orders-subnav > .metrics-tabs__list-shell > .metrics-tabs__list {
	margin-bottom: 0;
}

/* Desktop / tablet: wrapper is layout-transparent so tab strips + sticky behave unchanged */
@media (min-width: 1100px) {
	.page-metrics .metrics-tabs__list-shell {
		display: contents;
	}

	.page-metrics .metrics-tabs__scroll-indicator {
		display: none !important;
	}
}

.page-metrics .metrics-tabs__tab {
	appearance: none;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 6.08px 10.4px;
	box-sizing: border-box;
	font: inherit;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--muted);
	background: transparent;
	border: none;
	border-radius: 0;
	border-right: 1px solid var(--border);
	cursor: pointer;
	transition: color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
	text-align: center;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * Portal strips use <button> for Sign out and host-metrics tabs; those nodes sit outside <main>,
 * so UA button metrics can win over .metrics-tabs__tab unless reset with matching specificity.
 */
.page-metrics button.metrics-tabs__tab:not(.metrics-tabs__tab--subhero-toggle) {
	box-sizing: border-box;
	margin: 0;
	padding: 6.08px 10.4px;
	border-radius: 0;
	background: transparent;
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	appearance: none;
	-webkit-appearance: none;
}

.page-metrics .metrics-tabs__tab:last-child {
	border-right: none;
}

/* Mobile: scrollable tab chips + custom scroll-position indicator (no native scrollbar) */
@media (max-width: 1099px) {
	.page-metrics .metrics-tabs__list-shell {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		margin-bottom: 13.6px;
	}

	.page-metrics .metrics-tabs--crm-subnav > .metrics-tabs__list-shell,
	.page-metrics .metrics-tabs--orders-subnav > .metrics-tabs__list-shell,
	.page-metrics .internal-portal-strip > .metrics-tabs__list-shell {
		margin-bottom: 0;
	}

	/* Portal + CRM section shells stay within document width (no 100vw breakout on shell). */
	.page-metrics .internal-portal-strip > .metrics-tabs__list-shell {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		min-width: 0;
	}

	.page-metrics .metrics-tabs--crm-subnav > .metrics-tabs__list-shell {
		width: 100dvw;
		max-width: 100dvw;
		margin-left: calc(50% - 50dvw);
		margin-right: calc(50% - 50dvw);
		min-width: 0;
	}

	.page-metrics .metrics-tabs__list-shell > .metrics-tabs__list,
	.page-metrics .internal-portal-strip .metrics-tabs__list-shell > .internal-portal-strip__row.metrics-tabs__list {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
	}

	.page-metrics .metrics-tabs--crm-subnav > .metrics-tabs__list-shell > .metrics-tabs__list,
	.page-metrics .metrics-tabs--crm-subnav > .metrics-tabs__list-shell > .metrics-tabs__scroll-indicator {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.page-metrics .metrics-tabs__list {
		touch-action: pan-x pinch-zoom;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.page-metrics .metrics-tabs__list::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	/* Synthetic scroll thumb: width / position driven by --tabs-thumb-* on shell (site.js) */
	.page-metrics .metrics-tabs__scroll-indicator {
		position: relative;
		flex-shrink: 0;
		width: 100%;
		max-width: 100%;
		height: 2px;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
		border-radius: 1px;
		background: color-mix(in srgb, var(--muted) 22%, white);
		overflow: hidden;
		pointer-events: none;
		opacity: 1;
		transition: opacity 0.2s ease;
	}

	html[data-color-scheme="dark"] .page-metrics .metrics-tabs__scroll-indicator {
		background: color-mix(in srgb, var(--border) 85%, transparent);
	}

	.page-metrics .metrics-tabs__list-shell--no-overflow .metrics-tabs__scroll-indicator {
		opacity: 0;
		height: 0;
		margin-top: 0;
		margin-bottom: 0;
	}

	.page-metrics .metrics-tabs__scroll-indicator__thumb {
		position: absolute;
		top: 0;
		left: calc(var(--tabs-thumb-left-pct, 0) * 1%);
		height: 100%;
		width: calc(var(--tabs-thumb-w-pct, 100) * 1%);
		border-radius: 1px;
		background: color-mix(in srgb, var(--muted) 24%, var(--border));
		transition: left 0.14s ease-out, width 0.14s ease-out;
		will-change: left, width;
	}

	html[data-color-scheme="dark"] .page-metrics .metrics-tabs__scroll-indicator__thumb {
		background: color-mix(in srgb, var(--muted) 38%, white);
	}

	.page-metrics .metrics-tabs__tab:not(.metrics-tabs__tab--subhero-toggle) {
		flex: 0 0 auto;
		min-width: min(140px, 38vw);
		max-width: none;
		overflow: visible;
		text-overflow: clip;
		padding-inline: 13.6px;
	}

	.page-metrics .internal-portal-strip button.metrics-tabs__tab:not(.metrics-tabs__tab--subhero-toggle) {
		width: auto;
		min-width: min(140px, 38vw);
	}
}

@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
	.page-metrics .metrics-tabs__scroll-indicator__thumb,
	.page-metrics .metrics-tabs__scroll-indicator {
		transition: none;
	}
}

.page-metrics .metrics-tabs__list.metrics-tabs__list--toggle-row {
	justify-content: flex-end;
}

.page-metrics .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle {
	/* Same vertical rhythm as Hub/Cases/Setup; flex centers chevron (grid + % heights skewed it). */
	flex: 0 0 auto;
	flex-shrink: 0;
	align-self: stretch;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	max-width: none;
	padding: 6.08px 10.4px;
	margin: 0;
	margin-left: auto;
	height: auto;
	width: auto;
	aspect-ratio: unset;
	font-size: inherit;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 0;
	box-shadow: none;
	margin-bottom: 0;
	min-height: 0;
	overflow: visible;
	white-space: normal;
	text-overflow: clip;
	appearance: none;
	-webkit-appearance: none;
}

.page-metrics .metrics-tabs__list:not(.metrics-tabs__list--toggle-row) .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle {
	border-left: 1px solid var(--border);
}

/* Toggle-only row (host-metrics single-tab, standalone TPNs strip): same divider as a real tab */
.page-metrics .metrics-tabs__list.metrics-tabs__list--toggle-row > .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle {
	border-left: 1px solid var(--border);
}

.page-metrics .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle .metrics-tabs__tab--subhero-toggle__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
	pointer-events: none;
}

.page-metrics .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle .metrics-tabs__tab--subhero-toggle__icon svg {
	display: block;
	flex-shrink: 0;
	vertical-align: middle;
}

.page-metrics .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle .metrics-tabs__tab--subhero-toggle__icon[hidden] {
	display: none !important;
}

/* Toggle in hero (no Hub|Cases row): padding-driven width */
.page-metrics .subpage-hero .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 48px;
	min-height: var(--metrics-tab-row-min-h);
	width: auto;
	height: auto;
	padding: 6.08px 10.4px;
	flex: none;
	align-self: auto;
	margin-left: 0;
	overflow: visible;
	aspect-ratio: unset;
	line-height: 0;
	appearance: none;
	-webkit-appearance: none;
}

.page-metrics .subpage-hero .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle .metrics-tabs__tab--subhero-toggle__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	line-height: 0;
	pointer-events: none;
}

.page-metrics .subpage-hero .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle .metrics-tabs__tab--subhero-toggle__icon svg {
	display: block;
	flex-shrink: 0;
	vertical-align: middle;
}

html[data-color-scheme="dark"] .page-metrics .metrics-tabs__tab.metrics-tabs__tab--subhero-toggle:hover {
	background: rgba(255, 255, 255, 0.06);
}

.page-metrics .metrics-tabs__tab:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.45);
}

.page-metrics .metrics-tabs__tab:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.page-metrics .metrics-tabs__tab.metrics-tabs__tab--stuck {
	color: var(--accent);
}

.page-metrics .metrics-tabs__tab.metrics-tabs__tab--stuck:hover {
	color: var(--accent);
}

.page-metrics .metrics-tabs__tab.metrics-tabs__tab--stuck[aria-selected="true"] {
	color: var(--accent);
}

.page-metrics .metrics-deploy__name-stuck,
.page-metrics .metrics-deploy__name-stuck code {
	color: var(--accent);
}

.page-metrics .metrics-deploy__chip--stuck {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.page-metrics .metrics-deploy__chip--stuck code {
	color: var(--accent);
}

.page-metrics .metrics-page__head--below-tabs {
	margin-top: 0;
	padding-top: 13.6px;
	/* Match space below session rule to space above (tab bar margin + this padding) */
	margin-bottom: 27.2px;
}

.page-metrics .metrics-tabs--single .metrics-page__head--below-tabs {
	/* No tab strip: only pad-top sits above the session row */
	margin-bottom: 13.6px;
}

.page-metrics .metrics-tabs__panel[hidden] {
	display: none !important;
}

.page-metrics .metrics-page__head-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.page-metrics pre.orders-detail__json {
	font-size: 0.8125rem;
	line-height: 1.45;
	overflow: auto;
	max-height: 512px;
	padding: 16px 17.6px;
	margin: 0 0 16px;
	background: rgba(0, 0, 0, 0.045);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
}

/* ---- Dark theme: dark surfaces, light type --- */
html[data-color-scheme="dark"] {
	color-scheme: dark;
	/* Near-black neutrals (less blue than #12151c / #1a1f2c). */
	--bg: #0b0b0c;
	--bg2: #0f0f10;
	--surface: #141415;
	--text: #ececed;
	--muted: #9a9a9e;
	--accent: #c41230;
	--accent-hover: #e63a52;
	--accent-ink: #f3f3f4;
	--border: rgba(255, 255, 255, 0.08);
	--chrome-bg: rgba(11, 11, 12, 0.92);
	--chrome-bg-solid: rgba(11, 11, 12, 0.98);
	--chrome-line: rgba(255, 255, 255, 0.06);
	--input-bg: #181819;
	--subpage-hero-grad-a: #0e0e0f;
	--subpage-hero-grad-b: #080808;
	--metrics-sticky-th: rgba(18, 18, 19, 0.98);
	--metrics-sticky-corner: rgba(22, 22, 23, 0.99);
	--hero-halftone-opacity: 0.45;
}

html[data-color-scheme="dark"] body.page-home .site-main {
	box-shadow: inset -6px 0 28px -12px rgba(0, 0, 0, 0.35);
}

html[data-color-scheme="dark"] .site-nav-mega {
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

@media (max-width: 1099px) {
	html[data-color-scheme="dark"] .site-nav.is-open {
		box-shadow: -8px 0 40px rgba(0, 0, 0, 0.45);
	}
}

html[data-color-scheme="dark"] .page-metrics pre.orders-detail__json {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
}

html[data-color-scheme="dark"] .subpage-band--muted {
	background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
}

html[data-color-scheme="dark"] .hero__bg {
	background: linear-gradient(165deg, var(--bg2) 0%, var(--bg) 100%);
}

html[data-color-scheme="dark"] .accs-contact-local-wrap {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.04),
		0 12px 40px rgba(0, 0, 0, 0.35);
}

html[data-color-scheme="dark"] .accs-contact-thanks {
	color: #a7f3d0;
	background: rgba(16, 185, 129, 0.12);
	border-color: rgba(52, 211, 153, 0.35);
}

/* Home hero: light type over photo */
html[data-color-scheme="dark"] .home-hero__title {
	color: #ffffff;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.65),
		0 2px 28px rgba(0, 0, 0, 0.45),
		0 0 1px rgba(0, 0, 0, 0.5);
}

html[data-color-scheme="dark"] .home-hero__deck {
	color: rgba(255, 255, 255, 0.94);
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.55),
		0 2px 20px rgba(0, 0, 0, 0.4);
}

.site-header__bar-tools {
	display: flex;
	align-items: center;
	gap: 7.2px;
	flex-shrink: 0;
}

.site-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.site-theme-toggle:hover,
.site-theme-toggle:focus-visible {
	border-color: var(--accent);
	color: var(--accent);
	outline: none;
}

.site-theme-toggle:focus-visible {
	box-shadow: 0 0 0 3px rgba(196, 18, 48, 0.25);
}

.site-theme-toggle svg {
	display: block;
	flex-shrink: 0;
}

html[data-color-scheme="dark"] .site-theme-toggle:focus-visible {
	box-shadow: 0 0 0 3px rgba(232, 72, 95, 0.35);
}

html:not([data-color-scheme="dark"]) .site-theme-toggle__sun {
	display: none;
}

html[data-color-scheme="dark"] .site-theme-toggle__moon {
	display: none;
}