/* PureMetrix site chrome — SSOT for Next app + WP theme (docs/home/pages).
 * After edits: Copy-Item web/components/marketing-header.css → theme assets/css/
 */
.px-site-header {
	--px-surface: #eef1f8;
	--px-surface-raised: #ffffff;
	--px-border: #d4dceb;
	--px-text: #1a1a2e;
	--px-muted: #5a6578;
	--px-nav: #2a3142;
	--px-accent: #3d2a7a;
	--px-accent-hover: #4f63b8;
	--px-steel: #6b8ec4;
	--px-on-accent: #ffffff;
	--px-btn-grad: linear-gradient(90deg, #4c3098 0%, #7a5cf5 100%);
	--px-btn-grad-hover: linear-gradient(90deg, #422886 0%, #6d52e0 100%);
	--px-btn-shadow:
		0 12px 28px -12px rgba(61, 42, 122, 0.55),
		0 4px 12px -6px rgba(79, 99, 184, 0.35);
	--px-btn-shadow-hover:
		0 14px 32px -12px rgba(61, 42, 122, 0.6),
		0 6px 14px -6px rgba(79, 99, 184, 0.4);
	--px-max: 80rem;
	--px-radius: 10px;
	--px-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--px-text-sm: clamp(0.8125rem, 0.78rem + 0.25vw, 0.9375rem);
	--px-text-nav: clamp(0.8125rem, 0.78rem + 0.22vw, 0.9375rem);
	--px-text-btn: clamp(0.875rem, 0.84rem + 0.25vw, 1rem);
	/* One logo size token — WP theme, docs, Next app (incl. --app) */
	--px-logo-h: clamp(2.5rem, 2.2rem + 1vw, 3.25rem);
	--px-logo-max-w: min(14rem, 52vw);
	/* Drop nav/actions onto wordmark baseline (tall swoosh sits above letters) */
	--px-nav-baseline-nudge: calc(var(--px-logo-h) * 0.18);
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 2100;
	isolation: isolate;
	font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
	/* White frosted glass. saturate(1) — hero lilac must not tint the bar. */
	box-shadow: none;
	border-bottom: 1px solid rgba(212, 220, 235, 0.7);
	background-color: rgba(255, 255, 255, 0.78);
	background-image: none;
	-webkit-backdrop-filter: blur(18px) saturate(1);
	backdrop-filter: blur(18px) saturate(1);
	padding: 0;
}

@media (prefers-reduced-transparency: reduce) {
	.px-site-header {
		background-color: #ffffff;
		background-image: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		box-shadow:
			0 -32px 0 0 #ffffff,
			0 10px 24px rgba(26, 26, 46, 0.05);
	}
}

/* WordPress admin bar offset (harmless on Next app) */
body.admin-bar .px-site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .px-site-header {
		top: 46px;
	}
}

/* Logged-in app chrome: solid white; scrolls away; StatsExplorer toolbar sticks instead */
.px-site-header--app {
	position: relative;
	background-color: #ffffff;
	background-image: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	/* No bottom border — sticky toolbar sits flush underneath */
	border-bottom: 0;
}

/*
 * Sites list / settings / auth: no sticky toolbar under the header.
 * Match DashboardToolbar elevation so the menu band separates from the page plate.
 */
.px-app-shell:not(:has(.px-sticky-toolbar-bleed)) .px-site-header--app {
	box-shadow: 0 8px 24px -16px rgba(26, 26, 46, 0.18);
}

.px-site-header--app .px-site-header__inner {
	/* Same 1rem inset as marketing — hamburger x-pos must match across routes. */
	max-width: var(--px-app-max, min(80rem, 80%));
	width: 100%;
	padding-left: max(var(--px-app-pad-x, 1rem), env(safe-area-inset-left, 0px));
	padding-right: max(var(--px-app-pad-x, 1rem), env(safe-area-inset-right, 0px));
	padding-bottom: 0.7rem;
	box-sizing: border-box;
}

/* App chrome: slightly smaller wordmark than marketing site. */
.px-site-header--app {
	--px-logo-h: clamp(2rem, 1.85rem + 0.65vw, 2.5rem);
	--px-logo-max-w: min(11.5rem, 48vw);
}

.px-site-header__inner {
	position: relative;
	z-index: 1;
	max-width: var(--px-max);
	margin: 0 auto;
	padding: 0.7rem max(1rem, env(safe-area-inset-right, 0px)) 1.05rem max(1rem, env(safe-area-inset-left, 0px));
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 2vw, 1.5rem);
	box-sizing: border-box;
	min-height: calc(var(--px-logo-h) + 1.85rem);
}

.px-site-header__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
	flex-shrink: 0;
	z-index: 2;
}

/* Slide chrome away at the footer. Do not transition transform on the
 * default sticky header — it lags 220ms behind scroll over the hero chart. */
.px-site-header.is-near-footer {
	transform: translateY(-100%);
	pointer-events: none;
	transition: transform 0.22s ease;
}

/* Keep header usable while mobile drawer is open */
body.px-nav-open .px-site-header.is-near-footer {
	transform: none;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.px-site-header.is-near-footer {
		transition: none;
	}
}

/* Mobile-first: desktop nav hidden until ≥900px */
.px-site-header__inner > .px-nav {
	display: none;
}

.px-site-header__logo img {
	display: block;
	height: var(--px-logo-h);
	width: auto;
	max-width: var(--px-logo-max-w);
}

.px-site-header .px-nav a,
.px-site-header .px-nav__mega-trigger,
.px-site-header a.px-site-header__login,
.px-site-header button.px-site-header__logout {
	color: var(--px-nav) !important;
	text-decoration: none;
	font-weight: 500;
	font-size: var(--px-text-nav);
	white-space: nowrap;
}

.px-site-header .px-nav a:hover,
.px-site-header .px-nav a[aria-current="page"],
.px-site-header .px-nav__mega-trigger:hover,
.px-site-header .px-nav__mega-trigger[aria-expanded="true"],
.px-site-header a.px-site-header__login:hover,
.px-site-header a.px-site-header__login[aria-current="page"],
.px-site-header button.px-site-header__logout:hover {
	color: var(--px-text) !important;
}

.px-site-header .px-nav a[aria-current="page"] {
	font-weight: 600;
}

.px-nav__mega {
	position: relative;
	display: flex;
	align-items: center;
}

.px-nav__mega-trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border: 0;
	background: transparent;
	color: var(--px-nav) !important;
	font: inherit;
	font-weight: 500;
	font-size: var(--px-text-nav);
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.px-nav__mega-trigger:hover,
.px-nav__mega-trigger[aria-expanded="true"] {
	color: var(--px-text) !important;
}

.px-nav__chevron {
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.12em) rotate(45deg);
	opacity: 1;
	flex-shrink: 0;
}

.px-nav__mega-panel {
	position: absolute;
	top: calc(100% + 0.75rem);
	left: 50%;
	transform: translateX(-50%);
	min-width: 20rem;
	padding: 0.65rem;
	background: #fff;
	border: 1px solid var(--px-border);
	border-radius: 12px;
	box-shadow: 0 18px 40px -24px rgba(61, 42, 122, 0.45);
	z-index: 40;
}

.px-nav__mega-panel--wide {
	left: 0;
	transform: none;
	min-width: 28rem;
	width: max(28rem, 34vw);
	max-width: min(40rem, calc(100vw - 2rem));
}

.px-nav__mega-panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 0.9rem;
}

.px-nav__mega-panel ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.px-nav__mega-panel a {
	display: block;
	padding: 0.7rem 0.75rem;
	border-radius: 8px;
	white-space: normal;
	text-decoration: none;
}

.px-nav__mega-panel a:hover {
	background: var(--px-surface);
}

/* Account settings dropdown (header) — same hover open as Why/How mega */
.px-nav__mega--account .px-nav__mega-panel--account {
	left: auto;
	right: 0;
	transform: none;
	min-width: 15.5rem;
	width: max-content;
	max-width: min(18rem, calc(100vw - 1.5rem));
	padding: 0.45rem;
}

.px-nav__account-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.px-nav__account-item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	min-height: 2.5rem;
	padding: 0.4rem 0.65rem;
	border: 0;
	border-radius: 10px;
	background: transparent;
	/* Match Help mega section titles */
	color: var(--px-text);
	font: inherit;
	font-size: var(--px-text-nav);
	font-weight: 650;
	line-height: 1.35;
	text-decoration: none;
	text-align: left;
	cursor: pointer;
	box-sizing: border-box;
}

/* Mega panel sets `a { display: block }` — keep icon+label flex for Links. */
.px-nav__mega-panel a.px-nav__account-item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.4rem 0.65rem;
	white-space: nowrap;
	color: var(--px-text);
	font-size: var(--px-text-nav);
	font-weight: 650;
}

.px-nav__account-item:hover,
.px-nav__account-item:focus-visible {
	background: rgba(61, 42, 122, 0.04);
	color: var(--px-text);
	outline: none;
}

.px-nav__account-item.is-active {
	background: rgba(61, 42, 122, 0.08);
	color: var(--px-text);
	box-shadow: none;
	outline: none;
}

.px-nav__account-item.is-active .px-nav__account-icon {
	color: var(--px-accent);
}

.px-nav__account-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.125rem;
	height: 1.125rem;
	color: inherit;
	opacity: 0.72;
	flex-shrink: 0;
}

.px-nav__account-icon svg {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
}

.px-nav__account-item--logout {
	font-weight: 500;
	color: var(--px-muted);
}

.px-nav__account-item--logout .px-nav__account-icon {
	opacity: 0.85;
}

.px-nav__account-item--logout:hover,
.px-nav__account-item--logout:focus-visible {
	background: #fef3f2;
	color: #7a271a;
}

.px-site-header__account {
	display: inline-flex;
	align-items: center;
}

.px-mobile-drawer__foot .px-site-header__account {
	width: 100%;
	display: block;
}

.px-mobile-drawer__foot .px-nav__mega--account {
	width: 100%;
	display: block;
}

.px-mobile-drawer__foot .px-nav__mega--account .px-nav__mega-trigger {
	width: 100%;
	justify-content: space-between;
	min-height: 2.75rem;
	padding: 0.5rem 0;
}

.px-mobile-drawer__foot .px-nav__mega-panel--account {
	position: static;
	transform: none;
	left: auto;
	right: auto;
	min-width: 0;
	width: 100%;
	max-width: none;
	margin-top: 0.35rem;
	box-shadow: none;
}

.px-nav__mega-label {
	display: block;
	font-weight: 650;
	color: var(--px-text);
	font-size: var(--px-text-sm);
}

.px-nav__mega-blurb {
	display: block;
	margin-top: 0.2rem;
	font-size: var(--px-text-xs);
	color: var(--px-muted);
	font-weight: 450;
	line-height: 1.4;
}

.px-nav__mega-footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1.25rem;
	margin-top: 0.35rem;
	padding: 0.85rem 0.5rem 0.35rem;
	border-top: 1px solid var(--px-border);
}

.px-nav__mega-footer-title {
	margin: 0 0 0.35rem 0.25rem;
	font-size: var(--px-text-xs);
	font-weight: 650;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--px-muted);
}

.px-nav__mega-footer a {
	padding: 0.35rem 0.5rem;
	font-size: var(--px-text-sm);
	font-weight: 500;
	color: var(--px-text);
}

.px-nav__mobile-group {
	margin: 0;
}

.px-nav__mobile-group summary {
	cursor: pointer;
	font-weight: 500;
	font-size: var(--px-text-nav);
	color: var(--px-nav);
	padding: 0.55rem 0;
	list-style: none;
}

.px-nav__mobile-group summary::-webkit-details-marker {
	display: none;
}

.px-nav__mobile-group a {
	display: block;
	padding: 0.4rem 0 0.4rem 0.75rem;
}

.px-site-header__actions {
	display: none;
	gap: 0.55rem;
	align-items: center;
	flex-shrink: 0;
	z-index: 2;
}

.px-site-header .px-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem clamp(0.9rem, 1.5vw, 1.15rem);
	border-radius: 999px;
	font-family: inherit;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	font-size: var(--px-text-btn);
	line-height: 1.2;
}

.px-btn__short {
	display: none;
}

.px-site-header .px-btn--primary {
	background-color: #4c3098;
	background-image: var(--px-btn-grad);
	color: var(--px-on-accent);
	border-color: transparent;
	border-radius: 999px;
	box-shadow: none;
	text-decoration: none;
	font-weight: 600;
}

/* WooCommerce / page CSS must not restyle site chrome */
.px-site-header a.button,
.px-site-header .button,
.px-site-header button.button,
.woocommerce .px-site-header a.button,
.woocommerce-page .px-site-header a.button {
	background-color: #4c3098 !important;
	background-image: var(--px-btn-grad) !important;
	color: var(--px-on-accent) !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	padding: 0.55rem clamp(0.9rem, 1.5vw, 1.15rem) !important;
	height: auto !important;
	line-height: 1.2 !important;
}

.px-site-header .px-btn--primary:hover {
	background-color: #422886;
	background-image: var(--px-btn-grad-hover);
	border-color: transparent;
	color: var(--px-on-accent);
	box-shadow: none;
}

/* Nav link color (.px-nav a) is more specific — keep CTA label white. */
.px-site-header .px-nav a.px-btn--primary,
.px-mobile-drawer__panel .px-nav a.px-btn--primary {
	color: #ffffff;
	background-color: #4c3098;
	background-image: var(--px-btn-grad);
	border-color: transparent;
	border-radius: 999px;
	box-shadow: none;
	text-align: center;
	font-weight: 600;
}

.px-site-header .px-nav a.px-btn--primary:hover,
.px-mobile-drawer__panel .px-nav a.px-btn--primary:hover {
	color: #ffffff;
	background-color: #422886;
	background-image: var(--px-btn-grad-hover);
	border-color: transparent;
	box-shadow: none;
}

.px-site-header__login {
	display: inline-flex;
	align-items: center;
	color: var(--px-nav);
	text-decoration: none;
	font-weight: 500;
	font-size: var(--px-text-nav);
	line-height: 1;
	padding: 0;
	white-space: nowrap;
}

/* Class display: rules beat bare [hidden] — keep nav-auth hide working. */
.px-site-header__login[hidden],
a.px-site-header__login[hidden],
.px-site-header__account[hidden],
.px-nav__mega[hidden],
[data-px-account-menu][hidden] {
	display: none !important;
}

.px-site-header__login:hover,
.px-site-header__login[aria-current="page"] {
	color: var(--px-text);
}

/* App help — utility link before Account (GA-style placement, labeled). */
.px-site-header__help {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--px-nav);
	text-decoration: none;
	font-family: inherit;
	font-weight: 500;
	font-size: var(--px-text-nav);
	line-height: 1;
	min-height: 36px;
	height: 36px;
	padding: 0;
	white-space: nowrap;
	border: 0;
	background: transparent;
	cursor: pointer;
	box-sizing: border-box;
}

/* EN / Help / Account — one row height, shared optical center. */
.px-site-header__actions > .px-site-header__help-mega,
.px-site-header__actions > .px-site-header__account,
.px-site-header__actions > .px-site-header__locale {
	display: inline-flex;
	align-items: center;
	align-self: center;
	height: 36px;
}

.px-site-header__actions .px-lang-switcher__trigger,
.px-site-header__actions .px-site-header__help,
.px-site-header__actions .px-nav__mega--account > .px-nav__mega-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: var(--px-text-nav);
	font-weight: 500;
	box-sizing: border-box;
}

.px-site-header__actions .px-lang-switcher__trigger .px-lang-switcher__code {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	line-height: 1;
	min-width: 0;
}

.px-site-header__help:hover,
.px-site-header__help:focus-visible,
.px-site-header__help[aria-expanded="true"] {
	color: var(--px-text);
	outline: none;
}

.px-site-header__help-icon {
	flex-shrink: 0;
	display: block;
	width: 1rem;
	height: 1rem;
}

.px-site-header__help > span {
	line-height: 1;
}

.px-site-header__help-mega {
	display: inline-flex;
	align-items: center;
}

.px-nav__mega-panel--help {
	left: auto;
	right: 0;
	transform: none;
	min-width: 17rem;
	max-width: min(22rem, calc(100vw - 1.5rem));
	max-height: min(70vh, 32rem);
	overflow-y: auto;
	padding: 0.65rem 0.85rem 0.75rem;
}

.px-help-mega__home {
	margin: 0 0 0.35rem;
	padding: 0 0 0.45rem;
	border-bottom: 1px solid rgba(26, 26, 46, 0.08);
}

.px-help-mega__home a {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.35rem 0.35rem;
	margin: 0 -0.35rem;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
}

.px-help-mega__home a:hover {
	background: rgba(61, 42, 122, 0.04);
}

.px-help-mega__nav {
	display: block;
}

.px-help-mega__section {
	margin: 0;
	border: 0;
}

.px-help-mega__section + .px-help-mega__section {
	margin-top: 0.05rem;
}

.px-help-mega__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	list-style: none;
	cursor: pointer;
	padding: 0.5rem 0.25rem;
	font-size: var(--px-text-nav, 0.875rem);
	font-weight: 650;
	color: var(--px-text, #1a1a2e);
	user-select: none;
	line-height: 1.35;
}

.px-help-mega__summary::-webkit-details-marker {
	display: none;
}

.px-help-mega__summary::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	flex-shrink: 0;
	opacity: 0.45;
	margin-right: 0.15rem;
}

.px-help-mega__section[open] > .px-help-mega__summary::after {
	transform: rotate(-135deg);
	margin-top: 0.2rem;
}

.px-help-mega__section ul {
	list-style: none;
	margin: 0 0 0.35rem;
	padding: 0 0 0.25rem;
}

.px-help-mega__section a {
	display: block;
	padding: 0.35rem 0.5rem;
	margin: 0;
	border-radius: 6px;
	color: var(--px-nav, #5a6578);
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
}

.px-help-mega__section a:hover {
	color: var(--px-text, #1a1a2e);
	background: rgba(61, 42, 122, 0.04);
}

.px-mobile-drawer__foot .px-site-header__help-mega {
	width: 100%;
	display: block;
}

.px-mobile-drawer__foot .px-site-header__help-mega .px-nav__mega-trigger {
	width: 100%;
	justify-content: flex-start;
	min-height: 2.75rem;
	padding: 0.5rem 0;
}

.px-mobile-drawer__foot .px-nav__mega-panel--help {
	position: static;
	transform: none;
	left: auto;
	right: auto;
	min-width: 0;
	width: 100%;
	max-width: none;
	max-height: none;
	margin-top: 0.35rem;
	box-shadow: none;
	padding: 0.35rem 0 0.5rem;
}

.px-mobile-drawer__foot .px-site-header__help {
	width: 100%;
	min-height: 2.75rem;
	justify-content: flex-start;
	padding: 0.5rem 0;
}

.px-site-header__logout {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--px-nav);
	font-family: inherit;
	font-weight: 500;
	font-size: var(--px-text-nav);
	padding: 0;
	margin: 0;
	min-height: 0;
	height: auto;
	white-space: nowrap;
	cursor: pointer;
	line-height: 1;
	transition: color 0.15s ease;
}

.px-site-header__logout:hover {
	color: var(--px-text);
}

.px-nav__mobile-logout {
	display: block;
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	padding: 0.4rem 0;
	font-family: inherit;
	font-size: var(--px-text-nav);
	font-weight: 500;
	color: var(--px-muted);
	cursor: pointer;
	transition: color 0.15s ease;
}

.px-nav__mobile-logout:hover {
	color: var(--px-text);
}

.px-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--px-radius);
	color: var(--px-nav);
	flex-shrink: 0;
	position: relative;
	z-index: 1201;
}

.px-nav-toggle:hover {
	background: var(--px-surface);
}

.px-nav-toggle__lines,
.px-nav-toggle__lines::before,
.px-nav-toggle__lines::after {
	display: block;
	width: 1.15rem;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease;
}

.px-nav-toggle__lines {
	position: relative;
}

.px-nav-toggle__lines::before,
.px-nav-toggle__lines::after {
	content: "";
	position: absolute;
	left: 0;
}

.px-nav-toggle__lines::before {
	top: -6px;
}

.px-nav-toggle__lines::after {
	top: 6px;
}

/* Hamburger → X when open */
.px-nav-toggle[aria-expanded="true"] .px-nav-toggle__lines {
	background: transparent;
}

.px-nav-toggle[aria-expanded="true"] .px-nav-toggle__lines::before {
	top: 0;
	transform: rotate(45deg);
}

.px-nav-toggle[aria-expanded="true"] .px-nav-toggle__lines::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.px-nav-toggle__lines,
	.px-nav-toggle__lines::before,
	.px-nav-toggle__lines::after {
		transition: none;
	}
}

@media (max-width: 899px) {
	.px-site-header {
		/* Same compact logo height on theme, docs, and app */
		--px-logo-h: clamp(2rem, 1.9rem + 0.55vw, 2.5rem);
		--px-logo-max-w: min(12rem, 48vw);
		--px-nav-baseline-nudge: 0;
	}

	.px-site-header__inner {
		min-height: calc(var(--px-logo-h) + 1.35rem);
		padding-top: 0.5rem;
		padding-bottom: 0.7rem;
	}

	.px-site-header__logo {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.px-site-header__logo img {
		height: var(--px-logo-h);
		max-width: var(--px-logo-max-w);
		transform: none;
	}

	/* Right thumb: hamburger on the trailing edge; logo stays centered. */
	.px-nav-toggle {
		margin-left: auto;
	}

	/* App: same centered logo as marketing; Account/CTA live in drawer */
	.px-site-header--app .px-site-header__inner {
		gap: 0.5rem;
		min-width: 0;
		overflow-x: clip;
	}

	.px-site-header--app .px-site-header__account {
		display: none; /* Account menu lives in the drawer on narrow viewports */
	}

	.px-site-header--app .px-site-header__login {
		display: none;
	}

	.px-site-header--app .px-btn--primary {
		flex-shrink: 0;
	}

	.px-site-header--app .px-btn__full {
		display: none;
	}

	.px-site-header--app .px-btn__short {
		display: inline;
	}
}

@media (min-width: 900px) {
	.px-nav-toggle {
		display: none;
	}

	.px-site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: clamp(1rem, 2vw, 1.75rem);
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}

	.px-site-header__logo {
		position: static;
		transform: none;
		flex-shrink: 0;
		justify-self: start;
		align-self: center;
		grid-column: 1;
	}

	.px-site-header__inner > .px-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: clamp(1rem, 2vw, 1.75rem);
		margin-right: 0;
		justify-self: center;
		align-self: center;
		grid-column: 2;
		padding-bottom: 0;
		transform: translateY(var(--px-nav-baseline-nudge));
	}

	.px-site-header__inner > .px-nav > a {
		display: inline-flex;
		align-items: center;
		line-height: 1;
	}

	.px-site-header__actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.85rem;
		flex-shrink: 0;
		justify-self: end;
		align-self: center;
		grid-column: 3;
		padding-bottom: 0;
		transform: translateY(var(--px-nav-baseline-nudge));
	}

	.px-site-header__actions > a,
	.px-site-header__actions > button {
		display: inline-flex;
		align-items: center;
		line-height: 1;
	}

	.px-site-header__actions > .px-btn {
		line-height: 1.2;
	}
}

.px-site-header--app .px-nav--spacer {
	display: none;
}

/* Admin utility link — sits left of locale in header actions */
.px-site-header__admin-link {
	display: inline-flex;
	align-items: center;
	color: #b0b8c8;
	font-size: var(--px-text-nav);
	font-weight: 500;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.px-site-header__admin-link:hover,
.px-site-header__admin-link:focus-visible {
	color: #8b95a8;
	outline: none;
}

.px-site-header__admin-link[aria-current="page"] {
	color: #8b95a8;
}

.px-mobile-drawer__foot .px-site-header__admin-link {
	display: flex;
	width: 100%;
	min-height: 2.75rem;
	align-items: center;
	padding: 0.5rem 0;
	margin-bottom: 0.15rem;
}

/* Legacy class kept for any leftover markup */
.px-nav__admin-link {
	color: #b0b8c8 !important;
	font-weight: 500;
}

.px-nav__admin-link:hover {
	color: #8b95a8 !important;
}

/* Admin Badge in header actions */
.px-site-header__admin-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	background: rgba(61, 42, 122, 0.08);
	border: 1px solid rgba(61, 42, 122, 0.22);
	color: var(--px-accent);
	font-size: var(--px-text-xs);
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.px-site-header__admin-badge:hover {
	background: var(--px-accent);
	border-color: var(--px-accent);
	color: #ffffff;
	transform: translateY(-1px);
}

.px-site-header__admin-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #10b981;
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
	flex-shrink: 0;
}

.px-site-header__admin-badge:hover .px-site-header__admin-dot {
	background: #34d399;
	box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35);
}

.px-mobile-drawer[hidden] {
	display: none !important;
}

.px-mobile-drawer:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: block;
	pointer-events: auto;
}

.px-mobile-drawer__backdrop {
	position: absolute;
	inset: 0;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: rgba(26, 26, 46, 0.5);
}

.px-mobile-drawer__panel {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	min-height: 0;
	max-height: min(100dvh, 100vh);
	height: auto;
	padding: 4.5rem 1.25rem calc(1.35rem + env(safe-area-inset-bottom, 0px));
	background: #ffffff;
	border: 0;
	border-radius: 0 0 1.15rem 1.15rem;
	box-shadow:
		0 24px 48px -20px rgba(26, 26, 46, 0.35),
		0 1px 0 rgba(26, 26, 46, 0.08);
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow-x: clip;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	animation: px-sheet-in 0.22s ease-out;
	isolation: isolate;
}

@keyframes px-sheet-in {
	from {
		opacity: 0;
		transform: translateY(-0.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.px-mobile-drawer__panel {
		animation: none;
	}
}

.px-mobile-drawer__panel .px-nav {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.15rem;
	flex: 1 1 auto;
}

.px-mobile-drawer__panel .px-nav > a,
.px-mobile-drawer__panel .px-nav__mobile-group > summary {
	display: flex;
	align-items: center;
	min-height: 2.85rem;
	padding: 0.55rem 0.15rem;
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--px-text);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 220, 235, 0.7);
}

/* Foot already has border-top — drop last nav row border to avoid double rule */
.px-mobile-drawer__panel .px-nav > a:last-child,
.px-mobile-drawer__panel .px-nav > .px-nav__mobile-group:last-child {
	border-bottom: 0;
}

.px-mobile-drawer__panel .px-nav > a:hover,
.px-mobile-drawer__panel .px-nav__mobile-group > summary:hover {
	color: var(--px-text);
}

.px-mobile-drawer__panel .px-nav a[aria-current="page"] {
	color: var(--px-text);
	font-weight: 650;
}

.px-mobile-drawer__panel .px-nav__mobile-group {
	border-bottom: 1px solid rgba(212, 220, 235, 0.7);
}

.px-mobile-drawer__panel .px-nav__mobile-group > summary {
	border-bottom: 0;
	width: 100%;
	justify-content: space-between;
}

.px-mobile-drawer__panel .px-nav__mobile-group > summary::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.55;
	flex-shrink: 0;
	margin-right: 0.25rem;
	transition: transform 0.15s ease;
}

.px-mobile-drawer__panel .px-nav__mobile-group[open] > summary::after {
	transform: rotate(-135deg);
	margin-top: 0.2rem;
}

.px-mobile-drawer__panel .px-nav__mobile-group a {
	display: block;
	padding: 0.55rem 0.15rem 0.55rem 0.85rem;
	font-size: var(--px-text-nav);
	font-weight: 450;
	color: var(--px-muted);
	text-decoration: none;
	min-height: 2.5rem;
}

.px-mobile-drawer__panel .px-nav__mobile-group a:hover {
	color: var(--px-text);
}

/* Who it's for / Compare (and similar Why footer cols) */
.px-mobile-drawer__panel .px-nav__mobile-footer {
	display: flex;
	flex-direction: column;
	gap: 0.95rem;
	margin: 0.55rem 0 0.15rem;
	padding: 0.85rem 0.15rem 0.35rem;
	border-top: 1px solid rgba(212, 220, 235, 0.85);
}

.px-mobile-drawer__panel .px-nav__mobile-footer-col {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.px-mobile-drawer__panel .px-nav__mobile-footer .px-nav__mega-footer-title {
	margin: 0 0 0.2rem;
	padding: 0 0.1rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--px-muted);
	line-height: 1.3;
}

.px-mobile-drawer__panel .px-nav__mobile-footer-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.1rem 0.65rem;
}

.px-mobile-drawer__panel .px-nav__mobile-footer-links a {
	display: flex;
	align-items: center;
	min-height: 2.45rem;
	padding: 0.4rem 0.1rem;
	margin: 0;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--px-text);
	text-decoration: none;
	border-radius: 6px;
}

.px-mobile-drawer__panel .px-nav__mobile-footer-links a:hover,
.px-mobile-drawer__panel .px-nav__mobile-footer-links a:active {
	color: var(--px-text);
}

/* Compare labels are longer — single column */
.px-mobile-drawer__panel .px-nav__mobile-footer-col[data-px-footer-col="compare"] .px-nav__mobile-footer-links {
	grid-template-columns: 1fr;
}

.px-mobile-drawer__foot {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-top: 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--px-border);
}

/* Auth / appChrome: foot is primary content — no orphan divider above empty nav */
.px-mobile-drawer__panel--solo .px-mobile-drawer__foot {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.px-mobile-drawer__foot .px-site-header__login,
.px-mobile-drawer__foot a.px-site-header__login {
	align-self: flex-start;
	font-size: var(--px-text-btn);
	font-weight: 600;
	color: var(--px-nav);
	text-decoration: none;
	padding: 0.25rem 0;
}

.px-mobile-drawer__foot .px-btn--primary,
.px-mobile-drawer__panel .px-nav > a.px-btn--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.85rem;
	margin-top: 0;
	padding: 0.75rem 1.15rem;
	border-radius: 999px;
	border: 0;
	border-bottom: 0;
	background-color: #4c3098;
	background-image: var(--px-btn-grad);
	color: var(--px-on-accent);
	font-weight: 600;
	font-size: var(--px-text-btn);
	text-decoration: none;
	box-sizing: border-box;
	box-shadow: none;
}

.px-mobile-drawer__foot .px-btn--primary:hover,
.px-mobile-drawer__panel .px-nav > a.px-btn--primary:hover {
	background-image: var(--px-btn-grad-hover);
	color: var(--px-on-accent);
}

.px-mobile-drawer__foot .px-nav__mobile-logout {
	align-self: flex-start;
	width: auto;
	padding: 0.25rem 0;
	font-size: var(--px-text-btn);
	font-weight: 500;
	color: var(--px-muted);
}

.px-mobile-drawer__foot .px-nav__mobile-logout:hover {
	color: var(--px-text);
}

body.px-nav-open {
	overflow: hidden;
	touch-action: none;
	overscroll-behavior: none;
}

html.px-nav-open {
	overflow: hidden;
}

/* Solid header while menu open — no glass bleed-through */
body.px-nav-open .px-site-header {
	background-color: #ffffff;
	background-image: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: 0 1px 0 rgba(26, 26, 46, 0.08);
}

.px-mobile-drawer {
	--px-surface: #eef1f8;
	--px-surface-raised: #ffffff;
	--px-border: #d4dceb;
	--px-text: #1a1a2e;
	--px-muted: #5a6578;
	--px-accent: #3d2a7a;
	--px-accent-hover: #4f63b8;
	--px-on-accent: #ffffff;
	--px-btn-grad: linear-gradient(90deg, #4c3098 0%, #7a5cf5 100%);
	--px-btn-grad-hover: linear-gradient(90deg, #422886 0%, #6d52e0 100%);
	--px-btn-shadow:
		0 12px 28px -12px rgba(61, 42, 122, 0.55),
		0 4px 12px -6px rgba(79, 99, 184, 0.35);
	--px-btn-shadow-hover:
		0 14px 32px -12px rgba(61, 42, 122, 0.6),
		0 6px 14px -6px rgba(79, 99, 184, 0.4);
	--px-radius: 10px;
	--px-text-nav: clamp(0.8125rem, 0.78rem + 0.22vw, 0.9375rem);
	--px-text-btn: clamp(0.875rem, 0.84rem + 0.25vw, 1rem);
	font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

/* Language switcher — text trigger + listbox (header, drawer, settings) */
.px-lang-switcher.w-full {
	width: 100%;
}

.px-lang-switcher.w-full .px-lang-switcher__trigger {
	width: 100%;
}

/* Drawer foot: open into panel (left edge), left-align like Help/Account rows */
.px-mobile-drawer__foot .px-lang-switcher {
	width: 100%;
	align-self: stretch;
}

.px-mobile-drawer__foot .px-lang-switcher__trigger {
	width: 100%;
	justify-content: flex-start;
	min-height: 2.75rem;
	padding: 0.5rem 0;
}

.px-mobile-drawer__foot .px-lang-switcher__menu {
	top: auto;
	bottom: calc(100% + 0.35rem);
	left: 0;
	right: auto;
}

.px-lang-switcher {
	--px-surface-raised: #ffffff;
	--px-border: #d4dceb;
	--px-text: #1a1a2e;
	--px-muted: #5a6578;
	--px-accent: #3d2a7a;
	--px-accent-subtle: rgba(61, 42, 122, 0.08);
	--px-accent-subtle-hover: rgba(61, 42, 122, 0.16);
	--px-radius-pill: 999px;
	--px-shadow-lg: 0 12px 28px -12px rgba(26, 26, 46, 0.18),
		0 4px 12px -6px rgba(26, 26, 46, 0.1);
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

.px-lang-switcher__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: auto;
	min-height: 36px;
	padding: 0;
	box-sizing: border-box;
	border-radius: 0;
	color: var(--px-nav);
	background: transparent;
	border: 0;
	font-family: inherit;
	font-size: var(--px-text-nav);
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	cursor: pointer;
	transition: color 0.2s ease;
}

.px-lang-switcher__trigger:hover,
.px-lang-switcher.is-open .px-lang-switcher__trigger {
	color: var(--px-text);
	background: transparent;
}

.px-lang-switcher__trigger .px-lang-switcher__code {
	min-width: 0;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

.px-lang-switcher__trigger:focus-visible,
.px-lang-switcher__option:focus-visible {
	outline: 2px solid var(--px-accent);
	outline-offset: 2px;
}

.px-lang-switcher__chevron {
	display: block;
	width: 0.35rem;
	height: 0.35rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.72;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.px-lang-switcher.is-open .px-lang-switcher__chevron {
	transform: rotate(225deg);
}

.px-lang-switcher__menu {
	position: absolute;
	top: calc(100% + 0.35rem);
	right: 0;
	left: auto;
	z-index: 10050;
	min-width: 9.5rem;
	max-height: min(16rem, 70vh);
	overflow-y: auto;
	margin: 0;
	padding: 0.35rem;
	list-style: none;
	border-radius: 8px;
	background: var(--px-surface-raised);
	border: 1px solid var(--px-border);
	box-shadow: var(--px-shadow-lg);
}

.px-lang-switcher__menu:not([hidden]) {
	display: block;
}

.px-lang-switcher__menu li + li {
	margin-top: 0.15rem;
}

.px-lang-switcher__option {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	padding: 0.45rem 0.55rem;
	box-sizing: border-box;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--px-muted);
	text-align: left;
	font: inherit;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}

.px-lang-switcher__option:hover,
.px-lang-switcher__option:focus-visible {
	color: var(--px-text);
	background: var(--px-accent-subtle);
}

.px-lang-switcher__option.is-active {
	color: var(--px-text);
	background: var(--px-accent-subtle);
}

.px-lang-switcher__code {
	flex-shrink: 0;
	min-width: 1.75rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.px-lang-switcher__label {
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
}