/* 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;
	--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: clamp(2.5rem, 5vw, 4rem);
	/* 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;
}

/* 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: 1rem;
	top: -100px;
	z-index: 10000;
	padding: 0.5rem 1rem;
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: 6px;
	font-weight: 600;
	transition: top 0.2s;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}

.skip-link:focus {
	top: 1rem;
}

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

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

.wrap {
	width: min(1120px, 92vw);
	margin-inline: auto;
	padding-inline: 1rem;
}

.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: min(1200px, 94vw);
	margin-inline: auto;
	padding: 0.65rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	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: min(220px, 50vw);
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	line-height: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: none;
	width: min(var(--site-logo-slot-w), 100%);
	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: 0.75rem;
	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: 1.5rem;
	flex: 1;
	justify-content: flex-end;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem 1rem;
	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: 0.4rem 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: 901px) {
	/*
	 * 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: 1rem;
		row-gap: 0.35rem;
		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: 0.35rem;
	}

	.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: 0.55rem;
	}

	/* 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: 1.35rem 1rem 1.65rem;
		width: min(1120px, 92vw);
		margin-inline: auto;
	}

	.site-nav-mega__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem 3rem;
		align-items: start;
	}

	.site-nav-mega__grid--compact {
		grid-template-columns: minmax(0, 22rem);
		max-width: 28rem;
	}

	.site-nav-mega__heading {
		margin: 0 0 0.65rem;
		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: 0.15rem;
	}

	.site-nav-mega__list a {
		display: block;
		padding: 0.5rem 0.65rem;
		margin: 0 -0.65rem;
		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: 0.35rem;
	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: 0.75rem;
	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: 901px) {
	.site-nav__tail {
		margin-left: 0;
		min-width: min-content;
		flex-shrink: 0;
		gap: 0.65rem;
	}

	.site-nav__cta {
		flex: 0 0 13.5rem;
		flex-shrink: 0;
		width: 13.5rem;
		min-width: 13.5rem;
		max-width: 13.5rem;
		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: 0.4rem 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: 0.65rem 1rem;
	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: 901px) {
	.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: calc(0.4rem + 0.4rem + 1.25em);
		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: 0.45rem;
	}

	.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: 0.45rem;
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

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

	.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: 0.4rem 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: 0.55rem 1.1rem;
	border-radius: 999px;
	font-family: var(--font);
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.25;
	text-decoration: none;
	transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 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 {
	transform: translateY(-1px);
	background: var(--accent-hover);
	color: var(--accent-ink);
	box-shadow: 0 6px 20px rgba(196, 18, 48, 0.3);
}

.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);
	color: var(--accent-ink);
}

.site-btn--lg {
	padding: 0.75rem 1.35rem;
	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: 3.125rem;
}

/* Primary “Get a free quote”: keep static look on hover/focus (no lift or stronger shadow). */
.home-hero__actions .site-btn--primary:hover,
.home-hero__actions .site-btn--primary:focus-visible {
	transform: none;
	background: var(--accent);
	color: var(--accent-ink);
	box-shadow: 0 4px 16px rgba(196, 18, 48, 0.25);
}

@media (max-width: 900px) {
	/* Stable document box + native scrolling (smooth only affects anchor navigation). */
	html {
		scroll-behavior: auto;
		min-height: 100%;
		min-height: 100dvh;
		overflow-x: hidden;
		overscroll-behavior: none;
		overscroll-behavior-y: none;
	}

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

	/* 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 — on mobile equals --header-h (no JS subpixel --site-header-h). */
	.site-main {
		padding-top: var(--header-h);
	}

	.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;
	}

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

	.site-logo {
		min-width: 0;
		--site-logo-slot-w: min(220px, calc(100vw - 7.5rem));
	}

	.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: 1rem 1rem max(1rem, 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: 0.85rem 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: 1.35rem 0 0.85rem 0.75rem;
		width: 100%;
		max-width: none;
	}

	.site-nav-mega__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
		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: 0.85rem;
	}

	.site-nav-mega__heading {
		margin: 0 0 0.5rem;
		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: 0.45rem 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: 0.75rem;
		margin-left: 0;
		margin-top: auto;
		padding-top: 1rem;
		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: 900px) {
	/* 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: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

@media (max-width: 900px) {
	/* 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: 0.65rem;
	}

	.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 0.85rem;
	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 1.75rem;
	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: 901px) {
	.home-hero > .wrap {
		width: min(1280px, 94vw);
	}

	.home-hero__title {
		max-width: min(58rem, 100%);
	}

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

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	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: 0.65rem;
	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: min(100%, 19rem);
}

.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:901px block below. */
@media (min-width: 901px) {
	.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__trigger:focus-visible,
.home-hero__actions .home-call__dial:hover,
.home-hero__actions .home-call__dial:focus-visible,
.home-hero__actions .home-call__copy:not(.home-call__btn--filled):hover,
.home-hero__actions .home-call__copy:not(.home-call__btn--filled):focus-visible {
	background: var(--accent);
	color: var(--accent-ink);
}

/* Copy: reserve width for label vs checkmark (desktop only — mobile uses equal flex + min-inline-size: 0). */
@media (min-width: 901px) {
	.home-hero__actions .home-call__copy {
		min-inline-size: calc(2.7rem + 5.5ch);
	}
}

/* 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,
.home-hero__actions .home-call__choice .site-btn.home-call__btn--filled:focus-visible {
	background: var(--accent);
	color: var(--accent-ink);
	box-shadow: 0 4px 16px rgba(196, 18, 48, 0.25);
	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: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

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

.home-feature {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.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 0.35rem;
	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: 2.5rem;
}

.home-solutions__title {
	font-size: clamp(1.65rem, 3vw, 2.1rem);
	font-weight: 800;
	margin: 0 0 0.5rem;
	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: 1.25rem;
}

@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: 1rem 1rem 0.35rem;
	color: var(--text);
}

.home-tile__text {
	margin: 0 1rem 1.25rem;
	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 0.35rem;
}

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

.home-logos__rule {
	border: none;
	border-top: 1px solid var(--border);
	margin: 0 auto 1.75rem;
	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 -1rem;
	padding: 0.25rem 1rem 0.75rem;
	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: clamp(1.5rem, 4vw, 2.75rem);
	margin: 0;
	padding: 0 1.5rem 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: min(180px, 30vw);
	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: 900px) {
	/*
	 * 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:900px + motion OK.
 */
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
	.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: 56rem;
		margin-inline: auto;
		gap: 1.25rem 1.75rem;
	}
}

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

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

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

.home-about__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.home-about__col {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.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 1rem;
}

.home-about__body {
	color: var(--muted);
	margin: 0 0 1.25rem;
	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 1rem;
}

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

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

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

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

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

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

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

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

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

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.5rem;
	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 0.5rem;
}

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

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

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

.checklist {
	margin: 1rem 0;
	padding-left: 1.2rem;
	color: var(--muted);
}

.checklist li {
	margin-bottom: 0.4rem;
}

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

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

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

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

.page-head__title {
	margin: 0 0 0.5rem;
	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: 46rem;
	color: var(--muted);
}

.page-prose p {
	margin: 0 0 1rem;
}

.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: 1rem 1.25rem;
	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: clamp(1.25rem, 3vw, 1.75rem);
	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: clamp(1rem, 3vw, 1.75rem) min(1.25rem, 4vw);
	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 0.4rem;
	color: var(--text);
}

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

.contact-zoho-shell__frame {
	border-radius: calc(var(--radius) - 4px);
	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: 2rem;
	align-items: start;
}

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

.contact-card {
	padding: 1.25rem 0;
}

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

.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: clamp(560px, 65vh, 900px);
	border: 0;
	border-radius: calc(var(--radius) - 2px);
	/* 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: 2rem;
}

.accs-contact-deploy {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.accs-contact-local-wrap {
	width: 100%;
	max-width: min(38rem, 100%);
	margin-inline: auto;
	padding: clamp(1.25rem, 3vw, 2rem);
	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 1.35rem;
	font-size: 1.02rem;
	line-height: 1.55;
	font-weight: 600;
	color: var(--text);
}

.accs-contact-field {
	margin-bottom: 1.05rem;
}

.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: 0.4rem;
}

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

.accs-contact-field input,
.accs-contact-field textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	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: 8.5rem;
	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: 1.1rem;
	padding: 0.78rem 1.85rem;
	font: 600 1rem var(--font);
	color: var(--accent-ink);
	background: var(--accent);
	border: none;
	border-radius: 999px;
	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),
		transform 0.15s var(--ease);
}

.accs-contact-submit:hover {
	background: var(--accent-hover);
}

.accs-contact-submit:focus-visible {
	outline: none;
	box-shadow:
		0 4px 16px rgba(196, 18, 48, 0.28),
		0 0 0 3px rgba(196, 18, 48, 0.28);
}

.accs-contact-submit:active {
	transform: translateY(1px);
}

.accs-contact-thanks {
	margin-top: 1.1rem;
	padding: 1rem 1.1rem;
	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: min(1120px, 92vw);
	margin-inline: auto;
}

.site-footer__brand img {
	opacity: 0.98;
	height: calc(28px * 0.9);
	width: auto;
}

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

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

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

.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: 0.35rem;
}

.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 {
	background: linear-gradient(165deg, var(--subpage-hero-grad-a) 0%, var(--subpage-hero-grad-b) 100%);
	border-bottom: 1px solid var(--border);
}

.subpage-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: center;
}

@media (max-width: 900px) {
	.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 0.5rem;
}

.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 0.75rem;
	color: var(--text);
}

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

.subpage-hero--compact .subpage-hero__lead {
	margin-inline: auto;
}

.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: 1rem;
}

.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: 0.65rem 0.85rem;
	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 0.4rem;
	max-width: min(240px, 72vw);
}

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

.subpage-hero--linga-montage .subpage-hero__linga-montage {
	--linga-hero-photo-w: min(92%, 440px);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(300px, 40vw, 500px);
	padding: 0.5rem 0 1rem;
	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: clamp(0.5rem, 5%, 2rem);
	right: max(0.25rem, calc(var(--linga-hero-photo-w) - 40px));
	transform: none;
}

.subpage-hero--linga-montage .pos-stat--linga-hero {
	min-width: 140px;
	max-width: 11rem;
	padding: 0.85rem 1.1rem;
	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: 900px) {
	.subpage-hero--linga-montage .subpage-hero__linga-montage {
		--linga-hero-photo-w: min(90%, 360px);
		min-height: clamp(260px, 68vw, 400px);
		margin-top: 0.75rem;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	.subpage-hero--linga-montage .subpage-hero__linga-layer--stat {
		right: max(0.2rem, calc(var(--linga-hero-photo-w) - 32px));
		bottom: clamp(0.35rem, 4%, 1.25rem);
	}

	.subpage-hero--linga-montage .pos-stat--linga-hero {
		min-width: 128px;
		padding: 0.65rem 0.85rem;
	}

	.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: min(200px, 78vw);
		margin-bottom: 0.35rem;
	}

	.subpage-hero--linga-montage .subpage-hero__linga-copy .subpage-hero__linga-logo img {
		max-height: min(44px, 12vw);
	}

	.subpage-hero--linga-montage .subpage-hero__linga-montage {
		--linga-hero-photo-w: min(96%, 300px);
		min-height: clamp(220px, 58vw, 320px);
		padding: 0.45rem 0.35rem 0.65rem;
	}

	.subpage-hero--linga-montage .subpage-hero__linga-layer--stat {
		right: max(0.15rem, calc(var(--linga-hero-photo-w) - 28px - 80px));
		bottom: clamp(0.25rem, 3.5%, 0.85rem);
	}

	.subpage-hero--linga-montage .pos-stat--linga-hero {
		min-width: 112px;
		padding: 0.6rem 0.75rem;
	}

	.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 0.4rem;
	max-width: min(280px, 85vw);
}

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

.subpage-hero--clover-montage .subpage-hero__clover-montage {
	--clover-hero-photo-w: min(92%, 380px);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(300px, 42vw, 500px);
	padding: 0.5rem 0 1rem;
	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: 0.45rem;
	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: calc(var(--radius) - 3px);
	border: none;
	box-shadow: none;
}

.subpage-hero--clover-montage .subpage-hero__clover-layer--stat {
	position: absolute;
	z-index: 2;
	left: auto;
	top: auto;
	bottom: clamp(0.85rem, 5.5%, 2.35rem);
	right: max(0.25rem, calc(var(--clover-hero-photo-w) - 40px));
	transform: none;
}

.subpage-hero--clover-montage .pos-stat--clover-hero {
	min-width: 140px;
	max-width: 11rem;
	padding: 0.85rem 1.1rem;
	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: 900px) {
	.subpage-hero--clover-montage .subpage-hero__clover-montage {
		--clover-hero-photo-w: min(88%, 320px);
		min-height: clamp(260px, 68vw, 400px);
		margin-top: 0.75rem;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	.subpage-hero--clover-montage .subpage-hero__clover-layer--stat {
		right: max(0.2rem, calc(var(--clover-hero-photo-w) - 32px));
		bottom: clamp(0.5rem, 4.5%, 1.4rem);
	}

	.subpage-hero--clover-montage .pos-stat--clover-hero {
		min-width: 128px;
		padding: 0.65rem 0.85rem;
	}

	.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: calc(2rem + 2.75rem);
	}

	.subpage-hero--clover-montage .subpage-hero__clover-copy .subpage-hero__clover-logo {
		max-width: min(220px, 88vw);
		margin-bottom: 0.35rem;
	}

	.subpage-hero--clover-montage .subpage-hero__clover-copy .subpage-hero__clover-logo img {
		max-height: min(40px, 12vw);
	}

	.subpage-hero--clover-montage .subpage-hero__clover-montage {
		--clover-hero-photo-w: min(94%, 260px);
		min-height: clamp(220px, 58vw, 320px);
		padding: 1.35rem 0.35rem calc(1.5rem + 60px + 32px);
	}

	.subpage-hero--clover-montage .subpage-hero__clover-layer--stat {
		right: max(0.15rem, calc(var(--clover-hero-photo-w) - 28px - 80px));
		bottom: clamp(0.08rem, 2%, 0.38rem);
		transform: translateY(60px);
	}

	.subpage-hero--clover-montage .pos-stat--clover-hero {
		min-width: 112px;
		padding: 0.6rem 0.75rem;
	}

	.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 0.4rem;
	max-width: min(300px, 88vw);
}

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

.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-montage {
	--dejavoo-hero-photo-w: min(92%, 420px);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(280px, 38vw, 480px);
	padding: 0.5rem 0 1rem;
	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: clamp(0.5rem, 5%, 2rem);
	right: max(0.25rem, calc(var(--dejavoo-hero-photo-w) - 40px));
	transform: none;
}

.subpage-hero--dejavoo-montage .pos-stat--dejavoo-hero {
	min-width: 132px;
	max-width: 10rem;
	padding: 0.85rem 1.1rem;
	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: 900px) {
	.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-montage {
		--dejavoo-hero-photo-w: min(90%, 360px);
		min-height: clamp(250px, 64vw, 380px);
		margin-top: 0.75rem;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-layer--stat {
		right: max(0.2rem, calc(var(--dejavoo-hero-photo-w) - 32px));
		bottom: clamp(0.35rem, 4%, 1.25rem);
	}

	.subpage-hero--dejavoo-montage .pos-stat--dejavoo-hero {
		min-width: 120px;
		padding: 0.65rem 0.85rem;
	}

	.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: min(260px, 90vw);
		margin-bottom: 0.35rem;
	}

	.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-copy .subpage-hero__dejavoo-logo img {
		max-height: min(44px, 12vw);
	}

	.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-montage {
		--dejavoo-hero-photo-w: min(94%, 300px);
		min-height: clamp(210px, 52vw, 300px);
		padding: 0.45rem 0.35rem 0.65rem;
	}

	.subpage-hero--dejavoo-montage .subpage-hero__dejavoo-layer--stat {
		right: max(0.15rem, calc(var(--dejavoo-hero-photo-w) - 30px - 80px));
		bottom: clamp(0.25rem, 3.5%, 0.85rem);
	}

	.subpage-hero--dejavoo-montage .pos-stat--dejavoo-hero {
		min-width: 108px;
		padding: 0.6rem 0.75rem;
	}

	.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 0.4rem;
	max-width: min(280px, 88vw);
}

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

.subpage-hero--union-montage .subpage-hero__union-montage {
	--union-hero-photo-w: min(92%, 420px);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(280px, 38vw, 480px);
	padding: 0.5rem 0 1rem;
	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: clamp(0.85rem, 5.5%, 2.35rem);
	right: max(0.25rem, calc(var(--union-hero-photo-w) - 40px));
	transform: none;
}

.subpage-hero--union-montage .pos-stat--union-hero {
	min-width: 132px;
	max-width: 10.5rem;
	padding: 0.85rem 1.1rem;
	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: 900px) {
	.subpage-hero--union-montage .subpage-hero__union-montage {
		--union-hero-photo-w: min(90%, 360px);
		min-height: clamp(250px, 64vw, 380px);
		margin-top: 0.75rem;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	.subpage-hero--union-montage .subpage-hero__union-layer--stat {
		right: max(0.2rem, calc(var(--union-hero-photo-w) - 32px));
		bottom: clamp(0.5rem, 4.5%, 1.4rem);
	}

	.subpage-hero--union-montage .pos-stat--union-hero {
		min-width: 118px;
		padding: 0.65rem 0.85rem;
	}

	.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: calc(2rem + 1.5rem);
	}

	.subpage-hero--union-montage .subpage-hero__union-copy .subpage-hero__union-logo {
		max-width: min(240px, 90vw);
		margin-bottom: 0.35rem;
	}

	.subpage-hero--union-montage .subpage-hero__union-copy .subpage-hero__union-logo img {
		max-height: min(48px, 13vw);
	}

	.subpage-hero--union-montage .subpage-hero__union-montage {
		--union-hero-photo-w: min(94%, 300px);
		min-height: clamp(210px, 52vw, 300px);
		padding: 0.45rem 0.35rem calc(1.15rem + 30px);
	}

	.subpage-hero--union-montage .subpage-hero__union-layer--stat {
		right: max(0.15rem, calc(var(--union-hero-photo-w) - 30px - 80px));
		bottom: clamp(0.08rem, 2%, 0.38rem);
		transform: translateY(30px);
	}

	.subpage-hero--union-montage .pos-stat--union-hero {
		min-width: 108px;
		padding: 0.6rem 0.75rem;
	}

	.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: 0.75rem;
}

.page-linga .linga-solutions__intro,
.page-clover .clover-solutions__intro,
.page-dejavoo .dejavoo-solutions__intro,
.page-union .union-solutions__intro {
	max-width: 42rem;
	margin: 0.5rem 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: 1.75rem auto 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1rem;
	max-width: 40rem;
}

.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: 0.65rem 1.25rem;
	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: 1rem 1.2rem;
	margin: 0 0 0.85rem;
	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: 1.35rem 1.5rem;
}

.page-clover .diff-card--clover-thumb-icon .pos-thumb-logo-card .diff-card__thumb {
	aspect-ratio: auto;
	max-height: 5rem;
	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: 1.25rem 1.5rem;
	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: 1.25rem;
	padding-right: 1.25rem;
}

.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: 1.1rem;
}

.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: 1.35rem;
}

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

	.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: 1.25rem;
	}

	.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: 2.35rem;
	}
}

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

	.page-linga .diff-card,
	.page-clover .diff-card,
	.page-dejavoo .diff-card,
	.page-union .diff-card {
		padding: 1.1rem 1rem;
	}

	.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(0.75rem, env(safe-area-inset-left));
		padding-right: max(0.75rem, 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(0.75rem, env(safe-area-inset-left));
		padding-right: max(0.75rem, 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: 0.15rem;
	}

	.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: 22rem;
		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 1rem;
	color: var(--text);
}

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

/* Long section titles: stay on one line on desktop (integrations bridge headline). */
.subpage-h2--center.subpage-h2--wide {
	max-width: min(96vw, 72rem);
	padding-inline: 1rem;
	box-sizing: border-box;
}

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

.subpage-h3 {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
	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: 2rem;
}

/* 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: min(46rem, 100%);
	box-sizing: border-box;
}

.subpage-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: center;
}

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

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

@media (max-width: 900px) {
	.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: clamp(0.75rem, 2.5vw, 1.25rem);
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1;
	min-width: 0;
	background: #ffffff;
	border: none;
	border-radius: var(--radius);
	padding: clamp(1.1rem, 4vw, 2rem);
	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: 1rem 0 0;
	padding-left: 1.2rem;
	color: var(--muted);
}

.subpage-list li {
	margin-bottom: 0.5rem;
}

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

.subpage-crm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.65rem;
	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: 46rem;
	margin-inline: auto;
}

.subpage-followup {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: clamp(2.5rem, 6vw, 4.5rem);
	row-gap: 2rem;
	align-items: center;
}

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

@media (max-width: 900px) {
	.subpage-followup {
		grid-template-columns: 1fr;
		column-gap: normal;
		row-gap: clamp(1.75rem, 4vw, 2.5rem);
	}
}

.team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.15rem 1rem;
}

@media (max-width: 900px) {
	.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: 0.55rem 0 0.2rem;
}

.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: 2rem;
	align-items: start;
}

@media (max-width: 900px) {
	.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: 1.25rem;
	margin-top: 1.5rem;
}

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

.diff-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.35rem 1.25rem;
}

.diff-card__icon {
	display: block;
	margin-bottom: 0.75rem;
}

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

.diff-card p {
	margin: 0 0 0.65rem;
	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: 2rem;
	align-items: center;
}

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

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

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

/* About: money-saving services (integrations-style card grid) */
.savings-section__head {
	text-align: center;
	margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.savings-section__head .subpage-hero__eyebrow {
	margin-bottom: 0.5rem;
}

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

.savings-grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: min(100%, 58rem);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem 1.25rem;
	counter-reset: savings-i;
}

.savings-grid li {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	margin: 0;
	padding: 1rem 1.1rem 1rem 1rem;
	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 2rem;
	min-width: 2rem;
	height: 2rem;
	margin-top: 0.05rem;
	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: 0.2rem;
	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: 1.5rem 1.25rem;
	align-items: center;
	justify-items: center;
}

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

@media (min-width: 901px) {
	.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: clamp(0.85rem, 2.2vw, 1.25rem);
	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: clamp(0.65rem, 2.2vw, 1.05rem);
	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: 901px) {
	.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: 2rem;
}

.pos-stat {
	text-align: center;
	padding: 1rem 1.5rem;
	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: 0.25rem;
}

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

.pos-stat__label {
	margin: 0.35rem 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: 52rem;
	margin-inline: auto;
}

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

.union-split__art {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

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

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

.union-pill-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 1.5rem 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: 1rem 1.1rem;
}

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

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

.union-mid__accent {
	color: #f87171;
}

.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 1.5rem;
}

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

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

.testimonial-card p {
	margin: 0 0 1rem;
	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: 1.5rem;
}

@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: 1rem 1rem 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: 0.5rem 1rem 1.15rem;
	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: 2.5rem;
	padding-bottom: 3.5rem;
}

.blog-post-back {
	margin: 0 0 1.5rem;
	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: 1.5rem;
}

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

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

.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: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: var(--border);
	margin: 0 0.5rem;
	vertical-align: middle;
	opacity: 0.9;
}

.blog-post-mirror .uicore-feature-img-wrapper {
	margin: 0 0 1.5rem;
	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: 1.75rem;
	margin-bottom: 0.65rem;
	font-weight: 700;
	color: var(--text);
}

.blog-post-mirror .entry-content p {
	margin-bottom: 1rem;
}

.blog-post-mirror .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: calc(var(--radius) * 0.75);
}

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

.blog-post-mirror .mt-md {
	margin-top: 1rem;
}

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

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

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

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

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

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

.shop-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.25rem;
	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 (1.25rem + 1.25rem) */
	box-sizing: border-box;
	width: calc(100% + 2.5rem);
	margin: -1.25rem -1.25rem 1rem;
	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 0.5rem;
}

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

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

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

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

.shop-card__note {
	margin: 0 0 1rem;
	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: 0.5rem 0.75rem;
	width: 100%;
	margin: 0 0 0.75rem;
}

.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: 0.65rem;
	align-items: center;
	width: 100%;
	margin-top: auto;
	padding-top: 0.25rem;
}

.shop-card__primary {
	min-width: 9.25rem;
}

.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: 0.45rem;
	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: 1.35rem;
	min-height: 1.35rem;
	padding: 0 0.35rem;
	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: min(72rem, 100%);
}

.cart-empty {
	text-align: center;
	padding: 2rem 1rem;
}

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

/* Lines + sticky summary (desktop) / stacked (mobile) */
.cart-layout {
	display: grid;
	gap: 1.25rem 1.75rem;
	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)) + 1rem);
	z-index: 4;
}

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

@media (min-width: 900px) {
	.cart-layout {
		grid-template-columns: minmax(0, 1fr) min(18.5rem, 26vw);
		grid-template-areas:
			"heading heading"
			"lines summary"
			"checkout checkout";
		gap: 1.5rem 2rem;
	}

	/* 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: 1rem;
	width: 100%;
}

.cart-line {
	display: grid;
	grid-template-columns: 5rem 1fr auto auto auto;
	gap: 1rem 1.25rem;
	align-items: center;
	padding: 1rem 1.15rem;
	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 0.35rem;
}

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

.cart-line__qty {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

@media (max-width: 700px) {
	.cart-line {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.85rem;
		padding: 1rem 1rem 1.05rem;
	}

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

	.cart-line__top {
		flex-direction: row;
		align-items: flex-start;
		gap: 0.85rem;
	}

	.cart-line__media {
		flex: 0 0 4.75rem;
		max-width: 4.75rem;
	}

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

	.cart-line__actions {
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.65rem 1rem;
		padding-top: 0.85rem;
		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: 2.25rem;
	height: 2.25rem;
	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: 3rem;
	padding: 0.35rem 0.25rem;
	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: 0.4rem 0.75rem;
	font-size: 0.88rem;
}

.cart-summary {
	margin: 0;
	padding: 1.15rem 1.2rem;
	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 0.5rem;
	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: 1rem;
	margin: 0 0 0.65rem;
	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: 900px) {
	.cart-layout__checkout .cart-pay {
		max-width: none;
	}
}

.cart-pay {
	margin-top: 2rem;
	padding: 1.35rem 1.25rem 1.5rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	max-width: min(44rem, 100%);
	box-sizing: border-box;
}

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

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

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

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

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

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

.cart-checkout__section {
	margin: 0 0 1.35rem;
	padding: 0;
	border: 0;
	min-width: 0;
}

.cart-checkout__section--inline {
	margin-bottom: 0.75rem;
}

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

.cart-checkout__grid {
	display: grid;
	gap: 0.65rem 1rem;
	margin-bottom: 0.35rem;
}

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

.cart-checkout__label {
	display: block;
	margin: 0.65rem 0 0.2rem;
	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: 2.75rem;
	resize: vertical;
}

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

.cart-checkout__check input {
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.cart-pay__input {
	display: block;
	width: 100%;
	max-width: 22rem;
	box-sizing: border-box;
	margin: 0 0 0.35rem;
	padding: 0.5rem 0.65rem;
	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: 10rem;
}

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

.cart-pay__input--cvv {
	max-width: 6rem;
}

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

.cart-pay__actions {
	margin: 1rem 0 0;
}

.cart-pay__msg {
	margin-top: 1rem;
	padding: 0.65rem 0.75rem;
	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: 1.25rem;
	max-width: min(44rem, 100%);
}

@media (min-width: 900px) {
	.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 2rem;
	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: 2rem 0 0.75rem;
	color: var(--text);
}

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

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

/* --- Host metrics (/accs-local/metrics/): subpage-hero + band; content in .metrics-page-band__inner --- */
.page-metrics .metrics-page-hero {
	padding-block: clamp(2rem, 4vw, 2.75rem) 1.25rem;
}

.page-metrics .metrics-page-hero__lead {
	margin-inline: auto;
	max-width: 40ch;
}

.page-metrics .metrics-page-band {
	--metrics-band-pt: clamp(0.75rem, 2.5vw, 1.25rem);
	padding-block: var(--metrics-band-pt) clamp(2.5rem, 5vw, 3.5rem);
	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: clamp(1.5rem, 3vw, 2rem);
}

.page-metrics .metrics-page-band__inner--auth {
	padding-top: clamp(0.35rem, 1.5vw, 0.75rem);
}

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

.page-metrics .metrics-page__eyebrow {
	margin: 0 0 0.2rem;
	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);
}

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

/* Same border weight for <a> and <button> ghost CTAs in the portal header (logout was 1px; links kept default 2px). */
.page-metrics .metrics-page__head-actions .site-btn--ghost {
	border-width: 1px;
}

.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: 0.85rem 1rem;
	border-radius: 10px;
	background: rgba(196, 18, 48, 0.06);
	border: 1px solid rgba(196, 18, 48, 0.2);
}

.page-metrics .metrics-page-note code,
.page-metrics .metrics-page-prose code {
	font-size: 0.88em;
	background: rgba(22, 25, 34, 0.06);
	padding: 0.1rem 0.35rem;
	border-radius: 6px;
}

.page-metrics .metrics-page-prose {
	margin: 0 0 1rem;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.55;
}

.page-metrics .metrics-auth__hint {
	margin: 0 0 1rem;
}

.page-metrics .metrics-auth__err {
	margin: 0 0 1rem;
	color: var(--accent);
	font-weight: 600;
	font-size: 0.95rem;
}

.page-metrics .metrics-auth__form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 22rem;
}

.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: 0.65rem 0.85rem;
	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: 0.25rem;
}

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

.page-metrics .metrics-live__intro-text {
	flex: 1 1 12rem;
	min-width: 0;
}

.page-metrics .metrics-live__heading {
	margin: 0 0 0.35rem;
	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: 0.85rem;
}

@media (min-width: 640px) {
	.page-metrics .metrics-live__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.page-metrics .metrics-live__stat {
	padding: 0.85rem 0.95rem;
	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 0.5rem;
}

.page-metrics .metrics-live__stat-main {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 0.65rem;
}

.page-metrics .metrics-live__stat--load .metrics-live__stat-main {
	margin-bottom: 0.45rem;
}

.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: 0.55rem 0 0;
	border-top: 1px solid var(--border);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.page-metrics .metrics-live__fact {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: baseline;
	gap: 0.35rem 0.65rem;
}

.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: 0.55rem 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: 0.85rem;
}

.page-metrics .metrics-historical__title {
	margin: 0 0 0.35rem;
	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: 901px) {
	.page-metrics .metrics-historical__subtitle {
		max-width: none;
	}
}

.page-metrics .metrics-meta-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.page-metrics .metrics-meta-chips__item {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.4rem 0.65rem;
	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%, 14rem);
}

.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;
	margin-top: 0.25rem;
	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: 0.7rem 0.9rem;
	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: 0.15rem 0.4rem;
	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: 22rem;
}

.page-metrics .metrics-table-wrap--deploy {
	margin-top: 0;
	margin-bottom: 1.25rem;
}

.page-metrics .metrics-deploy {
	margin-bottom: 1.35rem;
}

.page-metrics .metrics-deploy__head {
	margin-bottom: 0.75rem;
}

.page-metrics .metrics-deploy__title {
	margin: 0 0 0.35rem;
	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: 1rem 0 0.35rem;
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--text);
}

.page-metrics .metrics-deploy__map-lede {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--muted);
}

.page-metrics .metrics-deploy__service-list {
	margin: 0;
	padding-left: 1.15rem;
	font-size: 0.86rem;
	line-height: 1.55;
	color: var(--text);
}

.page-metrics .metrics-deploy__service-list li {
	margin-bottom: 0.35rem;
}

.page-metrics .metrics-table--deploy th:nth-child(3),
.page-metrics .metrics-table--deploy th:nth-child(4) {
	min-width: 8rem;
}

/* Wider dashboard column for large customer / service matrices */
.page-metrics .metrics-page-band__inner--wide {
	width: min(1440px, 96vw);
}

.page-metrics .metrics-table-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0 0 0.5rem;
}

.page-metrics .metrics-table-toolbar__search {
	flex: 1 1 12rem;
	min-width: min(100%, 14rem);
}

.page-metrics .metrics-table-toolbar__input {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0.45rem 0.65rem;
	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: 0.35rem;
}

/* Scroll regions: tall tables stay on screen; sticky header + sticky customer column */
.page-metrics .metrics-table-wrap.metrics-table-scroll {
	overflow: auto;
	max-height: min(65vh, 720px);
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
}

.page-metrics .metrics-table-scroll .metrics-table {
	min-width: min(100%, 52rem);
}

.page-metrics .metrics-table--dense th,
.page-metrics .metrics-table--dense td {
	padding: 0.45rem 0.55rem;
	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: 12rem;
}

.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: 28rem;
	word-break: break-word;
}

.page-metrics .metrics-table__cell-nowrap {
	white-space: nowrap;
}

.page-metrics .metrics-deploy__coverage-scroll {
	max-height: min(50vh, 480px);
	overflow: auto;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--input-bg);
	overscroll-behavior: contain;
	padding: 0.5rem 0.65rem;
	margin-top: 0.35rem;
}

.page-metrics .metrics-deploy__service-list--grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.page-metrics .metrics-deploy__coverage-item {
	display: grid;
	grid-template-columns: minmax(5rem, 10rem) 1fr;
	gap: 0.5rem 1rem;
	align-items: start;
	padding-bottom: 0.5rem;
	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: 0.3rem 0.45rem;
}

.page-metrics .metrics-deploy__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.1rem 0.35rem;
	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: full-width segmented bar (Real-time | Stacks | Load share) */
.page-metrics .metrics-page-band__inner > #metrics-dashboard-tabs {
	margin-top: calc(-1 * var(--metrics-band-pt));
}

.page-metrics .metrics-tabs {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.page-metrics .metrics-tabs--single .metrics-tabs__panel {
	margin: 0;
}

/* Full viewport width: break out of .wrap horizontal padding (1rem each side) */
.page-metrics .metrics-tabs__list {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	align-items: stretch;
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 0;
	box-sizing: border-box;
	border-radius: 0;
	border: none;
	border-bottom: 1px solid var(--border);
	background: var(--bg2);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	margin-bottom: clamp(0.5rem, 1.5vw, 0.85rem);
}

.page-metrics .metrics-tabs__tab {
	appearance: none;
	flex: 1 1 0;
	min-width: 7rem;
	margin: 0;
	padding: 0.65rem 0.75rem;
	font: inherit;
	font-size: 0.82rem;
	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.25;
}

.page-metrics .metrics-tabs__tab:last-child {
	border-right: none;
}

.page-metrics .metrics-tabs__tab:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.45);
}

.page-metrics .metrics-tabs__tab[aria-selected="true"] {
	color: var(--text);
	background: var(--surface);
	box-shadow: inset 0 -2px 0 var(--accent);
}

.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: clamp(0.65rem, 2vw, 0.85rem);
	/* Match space below session rule to space above (tab bar margin + this padding) */
	margin-bottom: calc(clamp(0.5rem, 1.5vw, 0.85rem) + clamp(0.65rem, 2vw, 0.85rem));
}

.page-metrics .metrics-tabs--single .metrics-page__head--below-tabs {
	/* No tab strip: only pad-top sits above the session row */
	margin-bottom: clamp(0.65rem, 2vw, 0.85rem);
}

.page-metrics .metrics-tabs__panel[hidden] {
	display: none !important;
}

.page-metrics .metrics-page__head-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	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: min(55vh, 32rem);
	padding: 1rem 1.1rem;
	margin: 0 0 1rem;
	background: rgba(0, 0, 0, 0.045);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 0.5rem;
}

/* ---- 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: 900px) {
	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: 0.45rem;
	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;
}