/**
 * PatientVR Base theme styles (Salient child).
 * Design tokens (--msb-*): Appearance → Theme settings; PHP is canonical in msb-salient/inc/msb-design-tokens-core.php (loaded via inc/design-tokens.php). See msb-salient/TOKENS.md.
 *
 * Load order (functions.php): enqueued after Salient’s dynamic-css (or active skin when dynamic is inline).
 * Normal rules here override Salient dynamic CSS; inline style="" on elements still wins unless you use !important.
 */

/* ==========================================================================
   Page layout: header top, footer bottom, main grows (sticky footer)
   ========================================================================== */

html {
	min-height: 100%;

	--nectar-page-text-color: var(--msb-primary-text);
}

body.msb-site,
body:has(.msb-header) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	box-sizing: border-box;
	background-color: transparent;
	color: var(--msb-fg);
	transition: background-color var(--wp--custom--transition--base, 0.2s ease),
		color var(--wp--custom--transition--base, 0.2s ease);
}

/* WP core wraps the template in .wp-site-blocks (body > .wp-site-blocks). It must fill body and be the flex container. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* Theme wrapper: fill .wp-site-blocks and become flex container so .msb-main can grow */
.msb-site-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.msb-site-wrap .msb-main {
	flex: 1 1 auto;
	min-height: 0;
}

/* Fallbacks when wrapper has no class: single or last div as template root */
body.msb-site > div:only-child,
body:has(.msb-header) > div:only-child {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

body.msb-site > div:last-child,
body:has(.msb-header) > div:last-child {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

body.msb-site > div .msb-main,
body:has(.msb-header) > div .msb-main,
body.msb-site > .msb-main,
body:has(.msb-header) > .msb-main {
	flex: 1 1 auto;
	min-height: 0;
}

/* Header: full-width strip; utility is positioned from header (not inner) to avoid overlap with max-width content */
/* Header bar: theme-aware background and border from design tokens (light/dark). */
.msb-header {
	--msb-header-bar-font-size: 0.8125rem;
	--msb-header-bar-line-height: 1.3;
	flex-shrink: 0;
	position: relative;
	z-index: 10;
	width: 100%;
	margin: 0;
	align-self: flex-start;
	background-color: var(--msb-header-bg);
	color: var(--msb-fg);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease;
}

/* Make the outer template-part wrapper sticky (template part is a <header>). */
.msb-site-wrap > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 10;
	width: 100%;
	background: transparent;
}

/* Fallback for non-standard layouts where the wrapper isn't a direct child. */
header.wp-block-template-part:has(.msb-header) {
	position: sticky;
	top: 0;
	z-index: 10;
	width: 100%;
	background: transparent;
}

/* Salient child: custom header wrapper (replaces #header-outer) — sticky, theme-aware. */
header.msb-header-outer {
	position: sticky;
	top: 0;
	z-index: 10;
	width: 100%;
	color: var(--msb-fg);
	flex-shrink: 0;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Logged-in: stick header below the WordPress admin bar */
body.admin-bar header.msb-header-outer {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* Inside Salient’s material skin, .ocm-effect-wrap-inner has transform, which breaks sticky.
   Use fixed so the header stays at the viewport top; spacer reserves layout space. */
.ocm-effect-wrap header.msb-header-outer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

/* Logged-in: position fixed header below the WordPress admin bar */
body.admin-bar .ocm-effect-wrap header.msb-header-outer {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/*
 * Reserve layout height for position:fixed MSB header (Salient material). Salient’s own JS syncs
 * #header-space to #header-outer only — we don’t use that, so color-scheme.js sets height from
 * header.msb-header-outer and updates --msb-header-spacer-sync. WP admin bar uses html margin-top;
 * spacer height is the header bar only (not admin bar + header).
 */
body.msb-site #header-space.msb-header-spacer,
body:has(.msb-header) #header-space.msb-header-spacer {
	height: var(--msb-header-spacer-sync, 4.25rem);
	min-height: var(--msb-header-spacer-sync, 4.25rem);
	flex-shrink: 0;
	box-sizing: border-box;
}

.msb-header--scrolled {
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

html.msb-dark .msb-header--scrolled {
	background: rgba(0, 0, 0, 0.35);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Toolbar: CTA + region + scheme (in normal flex flow with nav — no absolute overlap) */
.msb-header__toolbar {
	display: flex;
	align-items: center;
	gap: 0.5rem 0.75rem;
	flex-shrink: 0;
	box-sizing: border-box;
}

.msb-header__utility {
	display: flex;
	align-items: center;
	gap: 0.5rem 0.75rem;
	flex-shrink: 0;
	box-sizing: border-box;
}

.msb-header__cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	flex-shrink: 0;
	box-sizing: border-box;
}

/* Phone: accent (primary) — same type metrics as nav + toolbar */
.msb-header__cta-phone {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	margin: 0;
	padding: 0 0.15rem;
	box-sizing: border-box;
	font-size: var(--msb-header-bar-font-size);
	line-height: var(--msb-header-bar-line-height);
	font-weight: 600;
	color: var(--msb-accent);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.msb-header__cta-phone:hover,
.msb-header__cta-phone:focus {
	color: var(--msb-accent);
	opacity: 0.88;
	text-decoration: underline;
	text-underline-offset: 2px;
	outline: none;
}

/* Sign Up / Login: compact buttons aligned with region select + scheme toggle */
.msb-header__cta-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.25rem;
	margin: 0;
	padding: 0 0.65rem;
	box-sizing: border-box;
	font-size: var(--msb-header-bar-font-size);
	line-height: 1.2;
	font-weight: 600;
	color: var(--msb-fg);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--msb-radius-button);
	border: 1px solid var(--msb-nav-border);
	background-color: var(--msb-elevation-level-2);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.msb-header__cta-link:hover,
.msb-header__cta-link:focus {
	background-color: var(--msb-elevation-level-3);
	border-color: var(--msb-med-grey);
	color: var(--msb-accent);
	outline: none;
}

/* Login: filled primary + on-primary contrast text */
.msb-header__cta-link--login {
	background-color: var(--msb-primary-color);
	border-color: var(--msb-primary-color);
	color: var(--msb-primary-contrast, #ffffff);
}

.msb-header__cta-link--login:hover,
.msb-header__cta-link--login:focus {
	filter: brightness(1.06);
	color: var(--msb-primary-contrast, #ffffff);
	outline: none;
}

/* Mobile menu toggle (hamburger) */
.msb-header__menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
	border-radius: var(--msb-radius-button);
	border: 1px solid var(--msb-nav-border);
	background-color: var(--msb-elevation-level-2);
	color: var(--msb-fg);
	cursor: pointer;
	box-sizing: border-box;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.msb-header__menu-toggle:hover,
.msb-header__menu-toggle:focus {
	background-color: var(--msb-elevation-level-3);
	outline: none;
	border-color: var(--msb-med-grey);
}

.msb-header__menu-toggle-bars,
.msb-header__menu-toggle-bars::before,
.msb-header__menu-toggle-bars::after {
	display: block;
	width: 1.125rem;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
	position: relative;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.msb-header__menu-toggle-bars::before,
.msb-header__menu-toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.msb-header__menu-toggle-bars::before {
	top: -6px;
}

.msb-header__menu-toggle-bars::after {
	top: 6px;
}

.msb-header--nav-open .msb-header__menu-toggle-bars {
	background: transparent;
}

.msb-header--nav-open .msb-header__menu-toggle-bars::before {
	top: 0;
	transform: rotate(45deg);
}

.msb-header--nav-open .msb-header__menu-toggle-bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Drawer + backdrop (mobile) */
.msb-header__backdrop {
	position: fixed;
	inset: 0;
	z-index: 1001;
	background: rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.msb-header--nav-open .msb-header__backdrop {
	opacity: 1;
	visibility: visible;
}

.msb-header__drawer {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1002;
	width: min(22rem, 92vw);
	max-width: 100%;
	height: 100vh;
	height: 100dvh;
	box-sizing: border-box;
	padding: 1rem 1.25rem 1.5rem;
	background: var(--msb-header-bg);
	color: var(--msb-fg);
	border-left: 1px solid var(--msb-nav-border);
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.28s ease;
}

html.msb-dark .msb-header__drawer {
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);
}

.msb-header--nav-open .msb-header__drawer {
	transform: translateX(0);
}

body.admin-bar .msb-header__drawer {
	top: var(--wp-admin--admin-bar--height, 32px);
	height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 32px));
}

.msb-header__drawer-inner {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding-top: 0.5rem;
}

.msb-header__nav--drawer .msb-nav__list,
.msb-header__nav--drawer ul.msb-nav__list {
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0.15rem 0;
}

.msb-header__nav--drawer .msb-nav__list a {
	display: block;
	padding: 0.5rem 0;
}

.msb-header__cta--drawer {
	flex-direction: column;
	align-items: stretch;
	gap: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--msb-nav-border);
}

.msb-header__cta--drawer .msb-header__cta-phone {
	white-space: normal;
	min-height: 0;
	padding: 0.35rem 0;
	justify-content: flex-start;
}

.msb-header__cta--drawer .msb-header__cta-link {
	white-space: normal;
	width: 100%;
	min-height: 2.5rem;
	padding: 0.5rem 0.75rem;
	justify-content: center;
}

.msb-header__drawer-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding-top: 1rem;
	margin-top: auto;
	border-top: 1px solid var(--msb-nav-border);
}

body.msb-header-drawer-open {
	overflow: hidden;
}

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

	.msb-header__backdrop,
	.msb-header__drawer {
		display: none;
	}
}

@media (max-width: 899px) {
	.msb-header__nav--desktop,
	.msb-header__toolbar {
		display: none;
	}

	.msb-header__menu-toggle {
		display: inline-flex;
	}

	.msb-header__inner {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0.5rem 0.75rem;
	}

	.msb-header__logo,
	.msb-header__title {
		min-width: 0;
	}
}

@media (max-width: 479px) {
	.msb-header__menu-toggle {
		width: 2.25rem;
		height: 2.25rem;
	}
}

/* Region select: theme-aware, same height as scheme toggle (2.25rem) */
.msb-header__region-select {
	height: 2.25rem;
	box-sizing: border-box;
	font-size: var(--msb-header-bar-font-size, 0.8125rem);
	line-height: var(--msb-header-bar-line-height, 1.3);
	padding: 0 1.75rem 0 0.5rem;
	border-radius: var(--msb-radius-button);
	border: 1px solid var(--msb-nav-border);
	background-color: var(--msb-elevation-level-2);
	color: var(--msb-fg);
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	min-width: 4rem;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.msb-header__region-select:hover,
.msb-header__region-select:focus {
	background-color: var(--msb-elevation-level-3);
	outline: none;
	border-color: var(--msb-med-grey);
}

.msb-header__region-select option {
	background-color: var(--msb-bg);
	color: var(--msb-fg);
}

@media (max-width: 899px) {
	.msb-header__region-select {
		height: 2.25rem;
		font-size: 0.75rem;
		min-width: 3.5rem;
		padding-right: 1.5rem;
	}
}

@media (max-width: 479px) {
	.msb-header__region-select {
		height: 2rem;
		font-size: 0.6875rem;
		min-width: 2.75rem;
		padding: 0 1.25rem 0 0.35rem;
	}
}

.msb-main {
	flex: 1 1 auto;
	min-height: 0; /* allow flex item to shrink/grow correctly */
}

.msb-footer {
	flex-shrink: 0;
	padding: 2rem clamp(1rem, 4vw, 2rem);
	border-top: 1px solid var(--msb-nav-border);
	background: var(--msb-header-bg);
}

/* ==========================================================================
   Header structure (inner = logo + nav; utility is sibling, absolute to .msb-header)
   ========================================================================== */

.msb-header__inner {
	max-width: var(--wp--custom--content-max-width, 1440px);
	margin: 0 auto;
	padding: 0.75rem clamp(1rem, 4vw, 2rem);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1rem 1.5rem;
	justify-content: flex-start;
	min-width: 0;
}

@media (max-width: 899px) {
	.msb-header__inner {
		padding: 0.5rem clamp(0.75rem, 3vw, 1.5rem);
		gap: 0.5rem 1rem;
	}
}

@media (max-width: 479px) {
	.msb-header__inner {
		padding: 0.4rem clamp(0.5rem, 2vw, 1rem);
		gap: 0.4rem 0.75rem;
	}
}

.msb-header__title {
	font-family: var(--msb-font-heading, var(--wp--preset--font-family--poppins, inherit));
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--msb-fg);
	text-decoration: none;
}

.msb-header__logo {
	display: flex;
	align-items: center;
}

.msb-header__logo-img {
	display: block;
	height: 2.5rem;
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

/* Dark mode: invert single dark logo so it reads on dark background */
html.msb-dark .msb-header__logo .msb-header__logo-img {
	filter: invert(100%);
}

.msb-header__nav {
	flex: 1 1 auto;
	min-width: 0;
}

.msb-header__nav--desktop {
	min-width: 0;
}

@media (max-width: 1280px) {
	.msb-header {
		--msb-header-bar-font-size: 0.75rem;
	}

	.msb-header__inner {
		gap: 0.65rem 1rem;
	}

	.msb-header__nav .msb-nav__list,
	.msb-header__nav ul.msb-nav__list {
		gap: 0.25rem 0.85rem;
	}

	.msb-header__cta {
		gap: 0.3rem 0.45rem;
	}
}

.msb-header__nav .msb-nav__list,
.msb-header__nav ul.msb-nav__list,
.msb-nav__list {
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	align-items: center;
	justify-content: flex-end;
}

.msb-header__nav .msb-nav__list li,
.msb-header__nav ul.msb-nav__list li,
.msb-nav__list li {
	list-style: none;
	list-style-type: none;
}

.msb-header__nav .msb-nav__list li::marker,
.msb-nav__list li::marker {
	display: none;
	content: none;
}

.msb-nav__list ul {
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
}

.msb-nav__list a {
	color: var(--msb-fg);
	text-decoration: none;
	font-weight: 500;
}

.msb-nav__list a:hover,
.msb-nav__list a:focus {
	color: var(--msb-accent);
}

/* Desktop header nav (top-level only): match CTA + utility type size and row height */
.msb-header .msb-header__nav--desktop .msb-nav__list > li > a {
	font-size: var(--msb-header-bar-font-size);
	line-height: var(--msb-header-bar-line-height);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 0.1rem;
	box-sizing: border-box;
}

.msb-nav__empty {
	margin: 0;
	font-size: 0.875rem;
	color: var(--msb-muted);
}

/* ==========================================================================
   Color scheme toggle (Material Icons)
   ========================================================================== */

/* Same height as region select (2.25rem) for aligned utility row */
.msb-scheme-toggle {
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	box-sizing: border-box;
	border-radius: var(--msb-radius-button);
	border: 1px solid var(--msb-nav-border);
	background-color: var(--msb-elevation-level-2);
	color: var(--msb-fg);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.msb-scheme-toggle:hover,
.msb-scheme-toggle:focus {
	background-color: var(--msb-elevation-level-3);
	outline: none;
	border-color: var(--msb-med-grey);
}

.msb-scheme-toggle__icon {
	font-size: 1.25rem;
	vertical-align: middle;
}

@media (max-width: 479px) {
	.msb-scheme-toggle {
		width: 2rem;
		height: 2rem;
	}
	.msb-scheme-toggle__icon {
		font-size: 1.125rem;
	}
}

/* Light theme: show moon (switch to dark); dark theme: show sun (switch to light).
   Specificity must beat .material-symbols-outlined { display: inline-block } later in the file. */
.msb-scheme-toggle .msb-scheme-toggle__icon--light {
	display: none !important;
}

.msb-scheme-toggle .msb-scheme-toggle__icon--dark {
	display: inline-block !important;
}

html.msb-dark .msb-scheme-toggle .msb-scheme-toggle__icon--light {
	display: inline-block !important;
}

html.msb-dark .msb-scheme-toggle .msb-scheme-toggle__icon--dark {
	display: none !important;
}

/* ==========================================================================
   Footer structure
   ========================================================================== */

.msb-footer__inner {
	max-width: var(--wp--custom--content-max-width, 1440px);
	margin: 0 auto;
}

.msb-footer .msb-nav__list {
	justify-content: flex-start;
	margin-bottom: 1rem;
}

.msb-footer__meta {
	margin: 0;
	font-size: 0.875rem;
	color: var(--msb-muted);
}

.msb-footer__meta a {
	color: var(--msb-accent);
}

/* ==========================================================================
   MSB Salient footer — 3 widget columns + thin bar (Appearance → Widgets)
   ========================================================================== */

#footer-outer:has(.msb-footer-site) {
	background: transparent;
	padding: 0;
	margin: 0;
	border: none;
}

.msb-footer-site {
	--msb-footer-bg: #121212;
	--msb-footer-bar-bg: #0a0a0a;
	--msb-footer-fg: rgba(255, 255, 255, 0.92);
	--msb-footer-muted: rgba(255, 255, 255, 0.52);
	--msb-footer-link-hover: var(--msb-secondary-color, #d8176f);
	font-family: var(--msb-font-body, inherit);
	color: var(--msb-footer-fg);
}

.msb-footer-site__main {
	background: var(--msb-footer-bg);
	padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 4vw, 3rem);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.msb-footer-site__inner {
	max-width: var(--wp--custom--content-max-width, 1440px);
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
}

.msb-footer-site__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: start;
}

@media (min-width: 900px) {
	.msb-footer-site__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(2rem, 4vw, 3.5rem);
	}
}

.msb-footer-site__col {
	min-width: 0;
}

.msb-footer-site .msb-footer-widget {
	margin: 0 0 1.5rem;
}

.msb-footer-site .msb-footer-widget:last-child {
	margin-bottom: 0;
}

.msb-footer-site .msb-footer-widget__title,
.msb-footer-site .widget-title {
	font-family: var(--msb-font-heading, inherit);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--msb-footer-muted);
	margin: 0 0 1rem;
	border: none;
	padding: 0;
}

.msb-footer-site .widget a {
	color: var(--msb-footer-fg);
	text-decoration: none;
	transition: color 0.2s ease;
}

.msb-footer-site .widget a:hover,
.msb-footer-site .widget a:focus {
	color: var(--msb-footer-link-hover);
}

.msb-footer-site .widget p,
.msb-footer-site .widget li {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--msb-footer-fg);
}

.msb-footer-site .widget p {
	margin: 0 0 0.75rem;
}

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

.msb-footer-site .widget ul li {
	margin: 0 0 0.5rem;
	padding: 0;
}

.msb-footer-site .widget ul li ul {
	margin-top: 0.35rem;
	margin-left: 0;
}

/* Navigation Menu block / classic menu widgets — vertical stack */
.msb-footer-site__col--2 .widget_nav_menu ul.menu {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.msb-footer-site__col--2 .widget_nav_menu ul.menu li {
	margin: 0;
}

.msb-footer-site img {
	max-width: 100%;
	height: auto;
}

/* Social Icons block (core) in footer columns */
.msb-footer-site .wp-block-social-links {
	gap: 0.5rem;
	justify-content: flex-start;
}

.msb-footer-site .wp-block-social-links.is-style-logos-only .wp-block-social-link-anchor {
	padding: 0.35rem;
}

.msb-footer-site .wp-block-social-link {
	color: var(--msb-footer-fg) !important;
}

.msb-footer-site .wp-block-social-link:hover {
	color: var(--msb-footer-link-hover) !important;
	transform: translateY(-1px);
}

/* Newsletter / CF7 in column 3 */
.msb-footer-site__col--3 .wpcf7 {
	margin: 0;
}

.msb-footer-site__col--3 .wpcf7-form label,
.msb-footer-site__col--3 .wpcf7-form > p:first-of-type {
	font-size: 0.9375rem;
	color: var(--msb-footer-fg);
	margin-bottom: 0.65rem;
	display: block;
}

.msb-footer-site__col--3 .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	max-width: 22rem;
	box-sizing: border-box;
	margin-top: 0.35rem;
	padding: 0.65rem 0.85rem;
	border-radius: var(--msb-radius-button-sm, 8px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.96);
	color: #1a1a1a;
	font-size: 0.9375rem;
}

.msb-footer-site__col--3 .wpcf7-form-control:focus {
	outline: 2px solid var(--msb-secondary-color, #d8176f);
	outline-offset: 1px;
}

.msb-footer-site__col--3 .wpcf7-submit {
	margin-top: 0.75rem;
	padding: 0.65rem 1.5rem;
	border: none;
	border-radius: var(--msb-radius-button, 12px);
	background: var(--msb-secondary-color, #d8176f);
	color: var(--msb-secondary-contrast, #fff);
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.15s ease;
}

.msb-footer-site__col--3 .wpcf7-submit:hover {
	filter: brightness(1.08);
}

.msb-footer-site__col--3 .wpcf7-response-output {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	border-radius: var(--msb-radius-button-sm, 8px);
}

/* Thin bottom bar */
.msb-footer-site__bar {
	background: var(--msb-footer-bar-bg);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding: 0.65rem clamp(1rem, 4vw, 2rem);
}

.msb-footer-site__bar-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
}

.msb-footer-site__copyright {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--msb-footer-muted);
}

.msb-footer-site__copyright a {
	color: var(--msb-footer-muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.msb-footer-site__copyright a:hover {
	color: var(--msb-footer-fg);
}

.msb-footer-site__bar-social {
	margin: 0;
}

.msb-footer-site__social-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.msb-footer-site__social-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.msb-footer-site__social-list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--msb-footer-muted);
	text-indent: -9999px;
	overflow: hidden;
	position: relative;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.msb-footer-site__social-list a:hover,
.msb-footer-site__social-list a:focus {
	color: var(--msb-footer-fg);
}

/* Icon masks for common networks (add menu links with full URLs) */
.msb-footer-site__social-list a::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.msb-footer-site__social-list a[href*="facebook.com"]::after,
.msb-footer-site__social-list a[href*="fb.com"]::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

.msb-footer-site__social-list a[href*="instagram.com"]::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}

.msb-footer-site__social-list a[href*="linkedin.com"]::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}

/* Generic external link icon when URL does not match above */
.msb-footer-site__social-list a:not([href*="facebook.com"]):not([href*="fb.com"]):not([href*="instagram.com"]):not([href*="linkedin.com"])::after {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3h2.997v5h-2V6.497l-2.583 2.583-1.414-1.414L15.583 5H14V3zM5 5h5v2H7v12h10v-5h2v7H5V5z'/%3E%3C/svg%3E");
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3h2.997v5h-2V6.497l-2.583 2.583-1.414-1.414L15.583 5H14V3zM5 5h5v2H7v12h10v-5h2v7H5V5z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Post list shortcode — custom tile grid (.msb-post-list--tiles)
   ========================================================================== */

.msb-post-list--tiles .msb-post-list__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: var(--wp--preset--spacing--40, 1.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.msb-post-list--tiles .msb-post-list__tile {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.msb-post-list--tiles .msb-post-list__tile-link {
	position: relative;
	display: block;
	height: 100%;
	min-height: 0;
	color: inherit;
	text-decoration: none;
	border-radius: var(--msb-radius-button-sm, 6px);
	overflow: hidden;
	outline-offset: 2px;
}

.msb-post-list--tiles .msb-post-list__tile-link:focus-visible {
	outline: 2px solid var(--msb-accent, #27cfc3);
	outline-offset: 2px;
}

.msb-post-list--tiles .msb-post-list__media {
	position: relative;
	aspect-ratio: 4 / 3;
	width: 100%;
	background-color: var(--msb-muted-bg, var(--msb-nav-border, #e6e6e6));
	overflow: hidden;
}

.msb-post-list--tiles .msb-post-list__media--placeholder {
	min-height: 12rem;
}

.msb-post-list--tiles .msb-post-list__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msb-post-list--tiles .msb-post-list__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	text-align: left;
	padding: var(--wp--preset--spacing--40, 1.25rem);
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.78) 0%,
		rgba(0, 0, 0, 0.35) 45%,
		transparent 100%
	);
	pointer-events: none;
}

.msb-post-list--tiles .msb-post-list__tile-title {
	margin: 0 0 0.35rem;
	font-family: var(--msb-font-heading, inherit);
	font-size: clamp(1rem, 2.5vw, 1.25rem);
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.msb-post-list--tiles .msb-post-list__meta-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15rem 0.35rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.92);
}

.msb-post-list--tiles .msb-post-list__date {
	color: inherit;
}

.msb-post-list--tiles .msb-post-list__meta-sep {
	color: rgba(255, 255, 255, 0.65);
	font-weight: 400;
}

.msb-post-list--tiles .msb-post-list__category {
	color: inherit;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   Post list pagination
   -------------------------------------------------------------------------- */

.msb-post-list__pagination {
	margin-top: var(--wp--preset--spacing--50, 1.75rem);
	padding-top: var(--wp--preset--spacing--40, 1.25rem);
	border-top: 1px solid var(--msb-nav-border, rgba(0, 0, 0, 0.08));
}

.msb-post-list__pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.msb-post-list__pagination .page-numbers li {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-flex;
	align-items: center;
}

.msb-post-list__pagination .page-numbers a,
.msb-post-list__pagination .page-numbers span:not(.dots) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 0.6rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	color: var(--msb-fg, #1a1a1a);
	background: var(--msb-surface-elevated, rgba(0, 0, 0, 0.04));
	border: 1px solid var(--msb-nav-border, rgba(0, 0, 0, 0.1));
	border-radius: 999px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.msb-post-list__pagination .page-numbers a:hover {
	background: var(--msb-accent, #27cfc3);
	color: var(--msb-accent-contrast, #fff);
	border-color: var(--msb-accent, #27cfc3);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.msb-post-list__pagination .page-numbers a:focus-visible {
	outline: 2px solid var(--msb-accent, #27cfc3);
	outline-offset: 2px;
}

.msb-post-list__pagination .page-numbers span.current {
	background: var(--msb-accent, #27cfc3);
	color: var(--msb-accent-contrast, #fff);
	border-color: var(--msb-accent, #27cfc3);
	font-weight: 600;
	cursor: default;
}

.msb-post-list__pagination .page-numbers span.dots {
	display: inline-flex;
	min-width: auto;
	padding: 0 0.35rem;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	color: var(--msb-muted, #888);
	background: transparent;
	border: none;
	border-radius: 0;
}

.msb-post-list__pagination .page-numbers .prev a,
.msb-post-list__pagination .page-numbers .next a {
	min-width: auto;
	padding: 0 0.85rem;
	gap: 0.35rem;
}

.msb-post-list__pagination-arrow {
	font-size: 1.1rem;
	line-height: 1;
	font-weight: 600;
}

@media only screen and (max-width: 480px) {
	.msb-post-list__pagination-prev-text,
	.msb-post-list__pagination-next-text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ==========================================================================
   Layout width utilities (for custom blocks)
   ========================================================================== */

.msb-content-width {
	max-width: var(--wp--style--global--content-size, 1280px);
	margin-left: auto;
	margin-right: auto;
}

.msb-wide-width {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Default icon set: Material Symbols Outlined (Google Fonts)
   Use: <span class="msb-icon" aria-hidden="true">home</span>
   Icon names: https://fonts.google.com/icons
   ========================================================================== */

.msb-icon,
.material-symbols-outlined {
	font-family: "Material Symbols Outlined";
	font-weight: 400;
	font-style: normal;
	font-size: 1.25em;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	vertical-align: -0.2em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.msb-icon--sm { font-size: 1rem; }
.msb-icon--lg { font-size: 1.5rem; }
.msb-icon--xl { font-size: 2rem; }
.msb-icon--w600 { font-weight: 600; }

/* ==========================================================================
   Theme variable aliases (page builder / Salient content)
   Maps MSB Customizer tokens to Salient’s --primary, --main-background, etc.
   Light/dark: html.msb-light / html.msb-dark (and .light-theme / .dark-theme).
   Layout surfaces follow --msb-elevation-* / greys so global token edits propagate.
   Salient legacy names --elevation-level-* mirror --msb-elevation-level-*.
   ========================================================================== */

html.msb-light,
.light-theme {
	--primary: var(--msb-primary-color);
	--secondary: var(--msb-secondary-color);
	--success: var(--msb-success-color);
	--info: var(--msb-info-color);
	--warn: var(--msb-warn-color);
	--error: var(--msb-error-color, #da1e28);
	--dark-grey: var(--msb-dark-grey);
	--med-grey: var(--msb-med-grey);
	--light-grey: var(--msb-light-grey);
	--main-background: var(--msb-elevation-level-1);
	--alt-background: var(--msb-elevation-level-2);
	--main-toolbar-1: var(--msb-light-grey);
	--main-toolbar-2: var(--msb-elevation-level-2);
	--main-text: var(--msb-primary-text);
	--primary-shadow-universal: 0px 2px 5px #0000001a;
	--nectar-bg-color: var(--msb-elevation-level-1);
	--primary-font: var(--msb-font-heading, 'Poppins'), sans-serif;
	--elevation-level-1: var(--msb-elevation-level-1);
	--elevation-level-2: var(--msb-elevation-level-2);
	--elevation-level-3: var(--msb-elevation-level-3);
	--elevation-level-4: var(--msb-elevation-level-4);
	--elevation-level-5: var(--msb-elevation-level-5);
	--elevation-shadow: var(--msb-elevation-shadow);
}

html.msb-dark,
.dark-theme {
	--primary: var(--msb-primary-color);
	--secondary: var(--msb-secondary-color);
	--success: var(--msb-success-color);
	--info: var(--msb-info-color);
	--warn: var(--msb-warn-color);
	--error: var(--msb-error-color, #da1e28);
	--dark-grey: var(--msb-dark-grey);
	--med-grey: var(--msb-med-grey);
	--light-grey: var(--msb-light-grey);
	/* Main = base canvas (el-1); alt = slightly raised band (el-2) — same semantics as light. */
	--main-background: var(--msb-elevation-level-1);
	--alt-background: var(--msb-elevation-level-2);
	--main-toolbar-1: var(--msb-elevation-level-1);
	--main-toolbar-2: var(--msb-elevation-level-2);
	--main-text: var(--msb-primary-text);
	--primary-shadow-universal: 0px 2px 5px #0000001a;
	--nectar-bg-color: var(--msb-elevation-level-1);
	--primary-font: var(--msb-font-heading, 'Poppins'), sans-serif;
	--elevation-level-1: var(--msb-elevation-level-1);
	--elevation-level-2: var(--msb-elevation-level-2);
	--elevation-level-3: var(--msb-elevation-level-3);
	--elevation-level-4: var(--msb-elevation-level-4);
	--elevation-level-5: var(--msb-elevation-level-5);
	--elevation-shadow: var(--msb-elevation-shadow);
}

/*
 * MSB child theme: use --msb-page-shell / --msb-page-alt in this file’s rules instead of Salient’s
 * --main-background / --alt-background (those names exist only for Salient core / builder CSS).
 * Mapping matches the bridge: shell = main canvas (el-1), alt = secondary surface (el-2) in both schemes.
 */
html.msb-light,
.light-theme {
	--msb-page-shell: var(--msb-elevation-level-1);
	--msb-page-alt: var(--msb-elevation-level-2);
}

html.msb-dark,
.dark-theme {
	--msb-page-shell: var(--msb-elevation-level-1);
	--msb-page-alt: var(--msb-elevation-level-2);
}

/*
 * Marketing / builder gradients (fixed brand stops).
 * Not wired to Customizer --msb-* tokens; .heading-gradient* uses var(--msb-primary-color) for base fill.
 * To tie stops to tokens, add --msb-gradient-* in PHP (see TOKENS.md).
 */
html {
	--gradient-accent-color: linear-gradient(81.02deg, #EF3A4B -23.47%, #D8176F 45.52%, #F7743C 114.8%);
	--gradient-extra-color-1: linear-gradient(81.02deg, #0397AC -23.47%, #00B38B 45.52%, #00BE63 114.8%);
	--gradient-extra-color-2: linear-gradient(81.02deg, #2291E0 -23.47%, #1ac0de 45.52%, #15E0B8 114.8%);
	--gradient-extra-color-3: linear-gradient(81.02deg, #F6D61F -23.47%, #F6B31F 45.52%, #F6881F 114.8%);
}

::-webkit-scrollbar {
	width: 4px;
	overflow-y: scroll;
	background: var(--msb-light-grey, #d4d1cf);
	box-shadow: inset 0 0 4px #707070;
}

::-webkit-scrollbar-thumb {
	background: var(--msb-med-grey, #8b8b8e);
	border-radius: 10px;
}

.interact-filter-row::-webkit-scrollbar {
	height: 6px;
	overflow-y: scroll;
	background: var(--msb-light-grey, #d4d1cf);
	box-shadow: inset 0 0 4px #707070;
	border-radius: 10px;
}

.interact-filter-row::-webkit-scrollbar-thumb {
	background: var(--msb-med-grey, #8b8b8e);
	border-radius: 10px;
}

/* ==========================================================================
   Heading and button gradients (page builder)
   ========================================================================== */

.heading-gradient {
	background-color: var(--msb-primary-color);
	background-image: linear-gradient(81.02deg, #EF3A4B -23.47%, #D8176F 45.52%, #F7743C 114.8%);
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.heading-gradient-accent-one {
	background-color: var(--msb-success-color);
	background-image: linear-gradient(81.02deg, #0397AC -23.47%, #00B38B 45.52%, #00BE63 114.8%);
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.heading-gradient-accent-two {
	background-color: var(--msb-info-color);
	background-image: linear-gradient(81.02deg, #2291E0 -23.47%, #1ac0de 45.52%, #15E0B8 114.8%);
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.heading-gradient-accent-three {
	background-color: var(--msb-warn-color);
	background-image: linear-gradient(81.02deg, #F6D61F -23.47%, #F6B31F 45.52%, #F6881F 114.8%);
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.custom-gradient-btn {
	background-size: 200% auto !important;
	background-image: linear-gradient(81.02deg, #EF3A4B -23.47%, #D8176F 45.52%, #F7743C 114.8%);
	transition: all 0.3s ease-in-out !important;
}

.custom-gradient-btn:hover {
	background-position: 60% center !important;
	cursor: pointer;
}

.custom-gradient-btn-accent-one {
	background-size: 200% auto !important;
	background-image: linear-gradient(81.02deg, #0397AC -23.47%, #00B38B 45.52%, #00BE63 114.8%);
	transition: all 0.3s ease-in-out !important;
}

.custom-gradient-btn-accent-one:hover {
	background-position: 60% center !important;
	cursor: pointer;
}

.custom-gradient-btn-accent-two {
	background-size: 200% auto !important;
	background-image: linear-gradient(81.02deg, #2291E0 -23.47%, #1ac0de 45.52%, #15E0B8 114.8%);
	transition: all 0.3s ease-in-out !important;
}

.custom-gradient-btn-accent-two:hover {
	background-position: 60% center !important;
	cursor: pointer;
}

.custom-gradient-btn-accent-three {
	background-size: 200% auto !important;
	background-image: linear-gradient(81.02deg, #F6D61F -23.47%, #F6B31F 45.52%, #F6881F 114.8%);
	transition: all 0.3s ease-in-out !important;
}

.custom-gradient-btn-accent-three:hover {
	background-position: 60% center !important;
	cursor: pointer;
}

.custom-gradient-form-btn {
	width: 100% !important;
	background-size: 200% auto !important;
	background-image: linear-gradient(81.02deg, #EF3A4B -23.47%, #D8176F 45.52%, #F7743C 114.8%);
	transition: all 0.3s ease-in-out !important;
}

.custom-gradient-form-btn:hover {
	background-position: 60% center !important;
	cursor: pointer;
}

/* ==========================================================================
   Layout and form (page builder)
   ========================================================================== */

.flex-btn-row {
	display: flex;
	margin-top: 30px;
}

.flex-btn-row p {
	flex: 1 !important;
}

.bottom-gradient::after,
.hero-row::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: -32%;
	width: 163%;
	height: 100px;
	background: linear-gradient(to bottom, transparent, var(--msb-page-alt));
	z-index: 3;
}

.image-form-wrap {
	display: flex;
	height: 800px;
	border-radius: 30px;
	overflow: hidden;
	background-color: var(--msb-page-alt);
	box-shadow: var(--msb-elevation-shadow);
}

.form-image-con {
	width: 400px;
}

.form-image {
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}

.image-wrap-form {
	flex: 1;
	padding: 15px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
}

.flex-form-field input,
.flex-form-field select {
	background-color: var(--msb-elevation-level-2);
	color: var(--msb-primary-text);
}

.flex-form-field .wpcf7-form-control-wrap {
	padding-top: 10px;
}

.flex-form-hidden-row {
	visibility: hidden;
	height: 0;
	width: 0;
	padding: 0;
	margin: 0;
}

.theme-switcher {
	position: fixed;
	top: 30px;
	right: 30px;
	z-index: 99999;
	transform: translateY(-50%);
	transition: all ease 0.2s;
}

#theme-switcher-btn {
	cursor: pointer;
	transition: all ease 0.2s;
	color: white;
}

#theme-switcher-btn:hover {
	opacity: 0.8;
	transition: all ease 0.2s;
}

@media (max-width: 767px) {
	.theme-switcher {
		display: none;
	}
}

@media (min-width: 768px) {
	.theme-switcher {
		display: block;
	}
}

@media (max-width: 768px) {
	.form-image-con {
		display: none;
	}
}

/* ==========================================================================
   Salient row backgrounds (light/dark aware)
   ========================================================================== */

.dark-theme .hero-row .row-bg-overlay,
html.msb-dark .hero-row .row-bg-overlay {
	background: linear-gradient(170deg, rgba(42, 11, 14, 0.89) 0%, rgb(33, 33, 33) 56%, rgb(18, 18, 18) 100%) !important;
	transition: color ease 0.2s;
}

.scrolling-tab-mobile-title .menu-content {
	color: var(--msb-primary-text) !important;
	transition: color ease 0.2s;
}

.pillar-row .row-bg-overlay,
.pillar-row .row-bg {
	background-color: var(--msb-page-alt) !important;
	transition: color ease 0.2s;
}

.pillar-row-main .row-bg-overlay,
.pillar-row-main .row-bg {
	background-color: var(--msb-page-shell) !important;
	transition: color ease 0.2s;
}

.pillar-row-tooltwo .row-bg-overlay,
.pillar-row-tooltwo .row-bg {
	background-color: var(--msb-elevation-level-2) !important;
	transition: color ease 0.2s;
}

.top-down-bg .row-bg-overlay {
	background: linear-gradient(to bottom, var(--msb-page-alt) 0%, var(--msb-elevation-level-2) 100%) !important;
	transition: color ease 0.2s;
}

.down-top-bg .row-bg-overlay {
	background: linear-gradient(to bottom, var(--msb-elevation-level-2) 0%, var(--msb-page-alt) 100%) !important;
	transition: color ease 0.2s;
}

.container-wrap {
	background-color: var(--msb-page-shell) !important;
}

.auto_meta_overlaid_spaced .masonry-blog-item .inner-wrap,
.nectar-recent-post-bg-wrap {
	border-radius: 10px !important;
}

/* ==========================================================================
   Footer and primary row (page builder)
   ========================================================================== */

.footer-logo-cont img {
	width: 75% !important;
}

.footer-form-header span,
.footer-form-msg span {
	color: white !important;
}

.flex-footer-form-row {
	display: flex;
	align-items: baseline;
	gap: 5px;
}

.footer-form-sumbit {
	height: 48px;
}

.primary-row h2,
.primary-row span {
	color: #ffffff !important;
}

.primary-row .row-bg {
	background-color: #ef3a4d !important;
}

/* Hide CF7’s global message bar on legacy/plain forms; MSB layout shows it (see “Contact Form 7 — MSB”). */
.wpcf7-form:not(:has(.contact-form)) .wpcf7-response-output {
	display: none !important;
}

.wp-block-social-links li {
	padding: 0 !important;
}

/* ==========================================================================
   Video and interact grid (page builder)
   ========================================================================== */

.home-video-wrapper {
	border-radius: 30px;
	overflow: hidden;
	width: 600px;
	height: 600px;
}

.home-video-wrapper video {
	width: 100%;
	height: 100%;
}

@media (min-width: 1480px) {
	#demo-btn {
		margin-left: 15px;
	}
}

@media (min-width: 1000px) {
	.interact-grid-container {
		--items-per-screen: 4;
	}
}

@media (min-width: 768px) and (max-width: 999px) {
	.interact-grid-container {
		--items-per-screen: 2;
	}
}

@media (max-width: 767px) {
	.interact-grid-container {
		--items-per-screen: 1;
	}
}

.interact-grid-container {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	transition: all ease 0.2s;
}

.interact-item {
	flex: 0 0 calc(100% / var(--items-per-screen) - 22.5px);
	transition: all ease 0.2s;
	cursor: pointer;
	position: relative;
}

.interact-item:hover {
	transition: all ease 0.2s;
	background-color: #D4D1CF;
	border-radius: 10px;
	transform: scale(1.05);
	z-index: 10;
}

.interact-details {
	transition: all ease 0.2s;
}

.interact-item:hover .interact-details {
	transition: all ease 0.2s;
	transform: scale(0.95);
}

.interact-image {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 180px;
	background-color: #D4D1CF;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 15px;
	background-size: cover;
}

.interact-details span {
	display: block;
}

.interact-name {
	font-size: 22px;
	font-weight: 600;
	padding-bottom: 15px;
}

.interact-description {
	font-size: 18px;
	line-height: 23px;
	font-weight: 300;
}

.interact-filter-row {
	display: flex;
	gap: 15px;
	flex-wrap: nowrap;
	padding-bottom: 30px;
	overflow-x: auto;
	white-space: nowrap;
}

.interact-filter-chip {
	border: 1px solid var(--msb-primary-color);
	border-radius: 50px;
	padding: 5px 20px;
	color: var(--msb-primary-color);
	cursor: pointer;
	transition: all 0.25s;
}

.interact-filter-chip:hover {
	background-color: #F85E6D;
	color: white;
	transition: all 0.25s;
}

.interact-filter-chip.cat-active {
	background-color: #DB0F22;
	color: white;
	transition: all 0.25s;
}

.interact-icon {
	font-size: 50px !important;
	height: 50px;
	width: 50px;
	color: white;
}

.menu-title-text span {
	color: var(--msb-primary-color);
	font-weight: 600;
	font-size: 22px;
	transition: 0.2s ease all;
}

.menu-title-text span:hover {
	color: var(--msb-med-grey);
	transition: 0.2s ease all;
}

/* ==========================================================================
   Pricing (page builder)
   ========================================================================== */

.pricing-main {
	display: flex;
	justify-content: center;
	gap: 30px;
}

.pricing-flex {
	display: flex;
}

.pricing-gap {
	gap: 30px;
}

.pricing-main-inner {
	border-radius: 10px;
	overflow: hidden;
}

.pricing-image {
	width: 400px;
	position: relative;
	overflow: hidden;
}

.pricing-image img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

.pricing-details-cont {
	background-color: var(--msb-page-alt);
	padding: 60px 30px 30px;
	position: relative;
}

.pricing-details-inner {
	width: 250px;
	height: 400px;
}

.pricing-header {
	margin-bottom: 15px;
	min-height: 50px;
}

.pricing-header span {
	font-size: 26px;
	font-weight: 600;
}

.pricing-description {
	margin-bottom: 30px;
}

.pricing-info-cont {
	margin-bottom: 20px;
}

.pricing-currency,
.pricing-info {
	font-size: 30px;
}

.pricing-info {
	font-weight: 600;
}

.pricing-list {
	margin-bottom: 30px;
}

.pricing-list-header span {
	font-weight: 500;
}

.pricing-btn {
	text-decoration: none;
	padding: 10px 0;
	width: 100%;
	text-align: center;
	background-color: var(--msb-warn-color);
	display: block;
	border-radius: 10px;
	color: var(--msb-primary-text);
	font-weight: 600;
	font-size: 18px;
	transition: all ease 0.2s;
	cursor: pointer;
}

.pricing-btn:hover {
	transition: all ease 0.2s;
	opacity: 0.75;
}

.pricing-btn-cont {
	position: absolute;
	bottom: 30px;
	width: calc(100% - 60px);
	left: 30px;
	right: 30px;
}

.headset-included-for-mike {
	position: absolute;
	bottom: 30px;
	left: 30px;
	width: 120px;
	height: 120px;
	display: flex;
	border-radius: 100px;
	background-color: var(--msb-success-color);
	color: white;
	padding: 15px;
	text-align: center;
	align-items: center;
}

.headset-included-for-mike span {
	font-weight: 600;
	font-size: 18px;
}

.option-save-cont {
	position: absolute;
	top: 26px;
	right: -40px;
	transform: rotate(25deg);
	background-color: var(--msb-success-color);
	width: 230px;
	text-align: center;
	color: white;
}

.option-saveimg-cont {
	position: absolute;
	top: 45px;
	right: -90px;
	transform: rotate(30deg);
	background-color: var(--msb-success-color);
	width: 350px;
	text-align: center;
	color: white;
}

.pricing-available {
	font-size: 10px;
	display: block;
	margin-top: 10px;
	bottom: -25px;
	position: absolute;
}

@media (min-width: 0) and (max-width: 999px) {
	.pricing-flex {
		flex-direction: column;
	}
	.pricing-details-cont {
		overflow: hidden;
	}
}

@media (min-width: 0) and (max-width: 1399px) {
	.pricing-image {
		display: none;
	}
	.sml-show {
		display: block;
	}
}

@media (min-width: 1400px) {
	.sml-show {
		display: none;
	}
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.chart-source {
	font-size: 14px;
	font-style: italic;
}

.meta-comment-count {
	display: none !important;
}

.mb-2 {
	margin-bottom: 8px !important;
}

/* Salient: do not force --msb-primary-text on every .span_12.dark p — that breaks rows with a
   dark background (Salient row "Text color: Dark" + dark BG = unreadable). Prefer Row → Text color → Light when the BG is dark. */

/* Studio template defaults (#testimonials) use text_color="dark" over a dark image — quotes need light copy. */
#testimonials .testimonial_slider blockquote,
#testimonials .testimonial_slider blockquote p {
	color: var(--msb-primary-text);
}

#testimonials .testimonial_slider blockquote .title {
	color: rgba(255, 255, 255, 0.65);
	color: color-mix(in srgb, var(--msb-primary-text) 65%, transparent);
}

#testimonials .testimonial_slider .controls ul li .pagination-switch {
	border-color: rgba(255, 255, 255, 0.45);
}

#testimonials .testimonial_slider .controls ul li .pagination-switch.active,
#testimonials .testimonial_slider .controls ul li .pagination-switch:hover {
	background-color: var(--msb-primary-text);
	border-color: var(--msb-primary-text);
}

/* Minimal style: salient-shortcodes uses #000 + only .span_12.light for white — .dark columns miss those rules. */
#testimonials .testimonial_slider[data-style="minimal"] .testimonial-next-prev .next:after,
#testimonials .testimonial_slider[data-style="minimal"] .testimonial-next-prev .prev:after {
	background-color: var(--msb-primary-text);
}

#testimonials .testimonial_slider[data-style="minimal"] .testimonial-next-prev .next:before,
#testimonials .testimonial_slider[data-style="minimal"] .testimonial-next-prev .prev:before,
#testimonials .testimonial_slider[data-style="minimal"] .controls .out-of,
#testimonials .testimonial_slider[data-style="minimal"] .controls .total,
#testimonials .testimonial_slider[data-style="minimal"] .controls .control-wrap ul li {
	color: var(--msb-primary-text);
}

/* What Users Say: same pattern — row text_color=dark on a dark BG; VC Text Block inherits unreadable copy.
   body.msb-page-what-users-say is added in functions.php (slug-based; works across multisite). */
body.msb-page-what-users-say .row_col_wrap_12.span_12.dark .wpb_text_column.wpb_content_element :is(p, li) {
	color: var(--msb-primary-text);
}

.full-width-section > .col.span_12.dark, .full-width-content > .col.span_12.dark {
    color: var(--msb-primary-text);
}

/* ==========================================================================
   Contact Form 7 — MSB global form (.contact-form)
   Reusable layout: same class names work in Elementor HTML, blocks, or CF7.
   Requires wrapper class="contact-form" on the form template (see inc/contact-form-7-msb.php).
   ========================================================================== */

/* Do not force display:block — CF7 hides this on .init / .resetting / .submitting; our old !important broke that. */
.wpcf7-form:has(.contact-form).init .wpcf7-response-output,
.wpcf7-form:has(.contact-form).resetting .wpcf7-response-output,
.wpcf7-form:has(.contact-form).submitting .wpcf7-response-output {
	display: none !important;
}

.wpcf7-form:has(.contact-form) .wpcf7-response-output {
	clear: both;
	margin: 1.25rem 0 0;
	padding: 0.85rem 1rem;
	border-radius: var(--msb-radius-button-sm);
	font-size: 0.9375rem;
	line-height: 1.45;
	border: 1px solid var(--msb-nav-border);
	background: var(--msb-elevation-level-2);
	color: var(--msb-fg);
}

.wpcf7-form:has(.contact-form) .wpcf7-response-output.wpcf7-mail-sent-ok {
	border-color: color-mix(in srgb, var(--msb-success-color) 45%, var(--msb-nav-border));
	background: color-mix(in srgb, var(--msb-success-color) 12%, var(--msb-elevation-level-2));
}

.wpcf7-form:has(.contact-form) .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-form:has(.contact-form) .wpcf7-response-output.wpcf7-mail-sent-ng {
	border-color: color-mix(in srgb, var(--msb-error-color) 50%, var(--msb-nav-border));
	background: color-mix(in srgb, var(--msb-error-color) 10%, var(--msb-elevation-level-2));
}

.contact-form {
	position: relative;
	--msb-form-gap: 1.25rem;
	--msb-form-input-radius: var(--msb-radius-button-sm);
	--msb-form-input-bg: var(--msb-elevation-level-2);
	--msb-form-input-border: var(--msb-nav-border);
	--msb-form-focus-ring: rgb(var(--msb-primary-color-rgb) / 0.35);
	color: var(--msb-fg);
	font-family: var(--msb-font-body, inherit);
}

.contact-form--compact {
	--msb-form-gap: 0.85rem;
}

.contact-form .form-container {
	display: flex;
	flex-direction: column;
	gap: var(--msb-form-gap);
	max-width: 42rem;
}

.contact-form .form-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--msb-form-gap);
	align-items: flex-start;
	margin: 0;
}

.contact-form .form-row-two-col .form-field {
	flex: 1 1 calc(50% - var(--msb-form-gap) / 2);
	min-width: min(100%, 12rem);
}

.contact-form .form-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.contact-form .form-field-full {
	flex: 1 1 100%;
}

.contact-form .form-label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--msb-fg);
}

.contact-form .form-label .form-required {
	color: var(--msb-error-color);
	font-weight: 700;
}

.contact-form .form-legend {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0;
	margin: 0 0 0.35rem;
	color: var(--msb-fg);
}

.contact-form fieldset.form-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.contact-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	margin: 0;
}

.contact-form .form-input,
.contact-form input.form-input,
.contact-form textarea.form-input,
.contact-form select.form-input {
	appearance: none;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0.65rem 0.9rem;
	font: inherit;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--msb-fg);
	background-color: var(--msb-form-input-bg);
	border: 1px solid var(--msb-form-input-border);
	border-radius: var(--msb-form-input-radius);
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.contact-form textarea.form-input {
	min-height: 7rem;
	resize: vertical;
}

.contact-form .form-input::placeholder {
	color: var(--msb-muted);
	opacity: 1;
}

.contact-form .form-input:hover {
	border-color: color-mix(in srgb, var(--msb-med-grey) 70%, var(--msb-primary-color));
}

.contact-form .form-input:focus {
	outline: none;
	border-color: var(--msb-accent);
	box-shadow: 0 0 0 3px var(--msb-form-focus-ring);
}

.contact-form .wpcf7-not-valid.form-input,
.contact-form input.form-input.wpcf7-not-valid,
.contact-form textarea.form-input.wpcf7-not-valid,
.contact-form select.form-input.wpcf7-not-valid {
	border-color: var(--msb-error-color);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--msb-error-color) 35%, transparent);
}

/* Per-field errors: override Salient CF7 (#fff chip, negative top) for MSB form tokens */
.wpcf7-form:has(.contact-form) .contact-form .wpcf7-not-valid-tip {
	position: static;
	top: auto;
	display: block;
	width: fit-content;
	max-width: 100%;
	margin-top: 0.35rem;
	padding: 0.4rem 0.65rem;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--msb-error-color);
	background: color-mix(in srgb, var(--msb-error-color) 12%, var(--msb-form-input-bg)) !important;
	border: 1px solid color-mix(in srgb, var(--msb-error-color) 38%, var(--msb-form-input-border)) !important;
	border-radius: var(--msb-form-input-radius);
	box-shadow: none;
	box-sizing: border-box;
}

/* Dark VC rows: Salient .dark still uses theme error hue with readable surface */
.row.dark .wpcf7-form:has(.contact-form) .contact-form .wpcf7-not-valid-tip,
.span_12.dark .wpcf7-form:has(.contact-form) .contact-form .wpcf7-not-valid-tip {
	background: color-mix(in srgb, var(--msb-error-color) 16%, rgba(255, 255, 255, 0.07)) !important;
	border-color: color-mix(in srgb, var(--msb-error-color) 50%, rgba(255, 255, 255, 0.12)) !important;
}

.contact-form .form-toggle-group .wpcf7-form-control.wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.contact-form .form-toggle-group .wpcf7-list-item {
	display: inline-flex;
	margin: 0;
}

.contact-form .form-toggle-group .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.55rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	color: var(--msb-fg);
	background: var(--msb-form-input-bg);
	border: 1px solid var(--msb-form-input-border);
	border-radius: var(--msb-radius-button);
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease;
}

.contact-form .form-toggle-group .wpcf7-list-item label:hover {
	border-color: color-mix(in srgb, var(--msb-accent) 45%, var(--msb-form-input-border));
}

.contact-form .form-toggle-group input[type='radio'] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.contact-form .form-toggle-group .wpcf7-list-item label:has(input:focus-visible) {
	outline: 2px solid var(--msb-accent);
	outline-offset: 2px;
}

.contact-form .form-toggle-group .wpcf7-list-item label:has(input:checked) {
	background: color-mix(in srgb, var(--msb-accent) 14%, var(--msb-form-input-bg));
	border-color: var(--msb-accent);
	color: var(--msb-fg);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--msb-accent) 25%, transparent);
}

.contact-form .form-row-submit .form-field {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
}

.contact-form .form-submit-btn,
.contact-form input.form-submit-btn.wpcf7-submit {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.65rem 1.75rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	cursor: pointer;
	color: var(--msb-accent-contrast, #ffffff);
	background: var(--msb-accent);
	border: 1px solid transparent;
	border-radius: var(--msb-radius-button);
	box-shadow: var(--msb-elevation-shadow);
	transition:
		background-color 0.2s ease,
		transform 0.15s ease,
		box-shadow 0.2s ease,
		opacity 0.2s ease;
}

.contact-form .form-submit-btn:hover,
.contact-form input.form-submit-btn.wpcf7-submit:hover {
	filter: brightness(1.05);
	box-shadow: 0 4px 14px rgb(var(--msb-primary-color-rgb) / 0.28);
}

.contact-form .form-submit-btn:active,
.contact-form input.form-submit-btn.wpcf7-submit:active {
	transform: translateY(1px);
}

.contact-form .form-submit-btn:disabled,
.contact-form input.form-submit-btn.wpcf7-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

.contact-form .form-submitting {
	display: none;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--msb-muted);
}

/* CF7 adds class "submitting" on the form element while the request is in flight */
form.wpcf7-form.submitting .contact-form .form-submitting {
	display: inline-block !important;
}

form.wpcf7-form.submitting .contact-form .form-submit-btn,
form.wpcf7-form.submitting .contact-form input.form-submit-btn.wpcf7-submit {
	pointer-events: none;
	opacity: 0.65;
}

.contact-form .wpcf7-spinner {
	margin: 0;
	vertical-align: middle;
}

/* Split / tracking fields: keep out of layout (still submitted) */
.contact-form .form-hidden-fields {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	border: 0 !important;
	white-space: nowrap !important;
}

/* Country <select> (server-rendered list + optional flag emoji): chevron */
.contact-form select.msb-country-select.form-input,
.contact-form select.msb-country-select-server.form-input {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238b8b8e' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	padding-right: 2.25rem;
}

/* Country combobox (search + listbox); ISO2 lives in hidden CF7 field */
.contact-form .msb-country-autocomplete {
	position: relative;
	width: 100%;
}

.contact-form .msb-country-ac__inner {
	position: relative;
}

.contact-form .msb-country-ac__list {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 0.25rem);
	z-index: 40;
	margin: 0;
	padding: 0.2rem 0;
	list-style: none;
	max-height: min(18rem, 55vh);
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	font-family: inherit;
	color: var(--msb-fg);
	background-color: var(--msb-form-input-bg);
	border: 1px solid var(--msb-form-input-border);
	border-radius: var(--msb-form-input-radius);
	box-shadow:
		var(--msb-elevation-shadow, 0 0.35rem 1.25rem rgb(0 0 0 / 0.12)),
		0 0 0 1px color-mix(in srgb, var(--msb-form-input-border) 55%, transparent);
}

/* Open list uses position:fixed via JS so VC/Salient overflow:hidden ancestors do not clip */
.contact-form .msb-country-ac__list.msb-country-ac__list--fixed {
	position: fixed;
}

/* Let the panel escape column overflow when ancestors use :has() (modern browsers) */
.wpb_wrapper:has(.contact-form .msb-country-autocomplete),
.vc_column-inner:has(.contact-form .msb-country-autocomplete) {
	overflow: visible;
}

.contact-form .form-field:has(.msb-country-autocomplete),
.contact-form .form-row:has(.msb-country-autocomplete) {
	overflow: visible;
}

.contact-form .msb-country-ac__list[hidden] {
	display: none !important;
}

.contact-form .msb-country-ac__list [role="option"] {
	margin: 0;
	padding: 0.55rem 0.9rem;
	font: inherit;
	font-size: 1rem;
	line-height: 1.45;
	color: inherit;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.contact-form .msb-country-ac__list [role="option"]:hover {
	background-color: color-mix(in srgb, var(--msb-fg) 7%, var(--msb-form-input-bg));
}

.contact-form .msb-country-ac__list [role="option"][aria-selected="true"] {
	background-color: color-mix(in srgb, var(--msb-accent) 14%, var(--msb-form-input-bg));
	box-shadow: inset 3px 0 0 var(--msb-accent);
}

.contact-form .msb-country-ac__list [role="option"][aria-selected="true"]:hover {
	background-color: color-mix(in srgb, var(--msb-accent) 20%, var(--msb-form-input-bg));
}

/* Salient VC: “dark” row text is often light; keep panel + options on same surfaces as inputs */
.row.dark .contact-form .msb-country-ac__list,
.span_12.dark .contact-form .msb-country-ac__list {
	color: var(--msb-fg);
	background-color: var(--msb-form-input-bg);
	border-color: var(--msb-form-input-border);
}

.row.dark .contact-form .msb-country-ac__list [role="option"]:hover,
.span_12.dark .contact-form .msb-country-ac__list [role="option"]:hover {
	background-color: color-mix(in srgb, var(--msb-fg) 9%, var(--msb-form-input-bg));
}

/* Visually attach open list to the search field (same width already; shared edge) */
.contact-form .msb-country-autocomplete:has(.msb-country-ac__list:not([hidden])) .msb-country-ac__search {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: color-mix(in srgb, var(--msb-form-input-border) 65%, var(--msb-form-input-bg));
}

.contact-form .msb-country-autocomplete:has(.msb-country-ac__list:not([hidden])) .msb-country-ac__search:focus {
	border-bottom-color: color-mix(in srgb, var(--msb-accent) 35%, var(--msb-form-input-border));
	box-shadow: 0 0 0 3px var(--msb-form-focus-ring);
}

.contact-form .msb-country-ac__list:not([hidden]) {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top-color: color-mix(in srgb, var(--msb-form-input-border) 65%, var(--msb-form-input-bg));
}

/* ==========================================================================
   PatientVR pricing ([msb_pricing_section])
   ========================================================================== */

/*
 * VC rows with Text color “Dark” (.span_12.dark) set column color to --msb-primary-text (light copy).
 * Pricing uses MSB surfaces (elev-1/2) — reset to semantic fg/muted so table + Meta for Work stay readable
 * in both html.msb-light / .msb-dark and inside Salient dark columns.
 */
#msb-pvr-pricing.pvr-pricing-section {
	color: var(--msb-fg);
}

.span_12.dark #msb-pvr-pricing,
.row.dark #msb-pvr-pricing {
	color: var(--msb-fg);
}

.msb-pricing-region-banner {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: var(--msb-radius-card, 12px);
	border: 1px solid var(--msb-nav-border);
	background: color-mix(in srgb, var(--msb-accent) 8%, var(--msb-elevation-level-2));
	color: var(--msb-fg);
}

.msb-pricing-region-banner__text {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.msb-pricing-region-banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.msb-pricing-region-banner__link {
	font-weight: 600;
	color: var(--msb-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.msb-pricing-region-banner__link--primary {
	font-weight: 700;
}

.msb-pricing-region-banner__dismiss {
	font: inherit;
	font-size: 0.8125rem;
	padding: 0.35rem 0.75rem;
	border-radius: var(--msb-radius-button);
	border: 1px solid var(--msb-nav-border);
	background: var(--msb-elevation-level-2);
	color: var(--msb-fg);
	cursor: pointer;
}

.msb-pricing-region-banner__dismiss:hover {
	background: var(--msb-elevation-level-3);
}

/* Site-wide AU/IN mismatch hint (below header; same visual language as pricing region banner) */
.msb-region-hint {
	width: 100%;
	box-sizing: border-box;
	padding: 0.65rem clamp(1rem, 4vw, 2rem);
	border-bottom: 1px solid var(--msb-nav-border);
	background: color-mix(in srgb, var(--msb-accent) 10%, var(--msb-elevation-level-2));
	color: var(--msb-fg);
	flex-shrink: 0;
	z-index: 9;
}

.msb-region-hint__inner {
	max-width: var(--wp--custom--content-max-width, 1440px);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
}

.msb-region-hint__text {
	margin: 0;
	flex: 1 1 12rem;
	min-width: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.msb-region-hint__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.msb-region-hint__switch {
	font-weight: 700;
	color: var(--msb-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.msb-region-hint__switch:hover,
.msb-region-hint__switch:focus {
	color: var(--msb-fg);
}

.msb-region-hint__dismiss {
	font: inherit;
	font-size: 0.8125rem;
	padding: 0.35rem 0.75rem;
	border-radius: var(--msb-radius-button);
	border: 1px solid var(--msb-nav-border);
	background: var(--msb-elevation-level-2);
	color: var(--msb-fg);
	cursor: pointer;
}

.msb-region-hint__dismiss:hover,
.msb-region-hint__dismiss:focus {
	background: var(--msb-elevation-level-3);
}

.pvr-pricing-section {
	padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem);
	font-family: var(--msb-font-body, inherit);
}

.pvr-pricing-controls {
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.pvr-pricing-controls__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(1rem, 3vw, 1.75rem);
	flex-wrap: wrap;
}

.pvr-pricing-toggle-group {
	display: inline-flex;
	align-items: center;
	background: var(--msb-elevation-level-1);
	border: 1px solid var(--msb-nav-border);
	border-radius: var(--msb-radius-button-sm, 12px);
	padding: 0.25rem;
	gap: 0.25rem;
	box-shadow: var(--msb-elevation-shadow, none);
}

.msb-dark .pvr-pricing-toggle-group {
	background: var(--msb-elevation-level-2);
}

.pricing-toggle-btn {
	padding: 0.65rem 1.35rem;
	border: none;
	background: transparent;
	color: var(--msb-med-grey);
	border-radius: calc(var(--msb-radius-button-sm, 12px) - 2px);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.pricing-toggle-btn--active {
	background: var(--gradient-extra-color-1, var(--msb-accent));
	color: #fff;
}

.pvr-pricing-currency-row {
	display: flex;
	align-items: center;
	gap: 0.75rem 1rem;
}

.pvr-pricing-currency-label {
	font-size: 0.875rem;
	color: var(--msb-med-grey);
	font-weight: 500;
}

.pvr-pricing-currency-select {
	padding: 0.6rem 1rem;
	border: 1px solid var(--msb-nav-border);
	border-radius: var(--msb-radius-button-sm, 8px);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--msb-fg);
	background: var(--msb-elevation-level-1);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pvr-pricing-currency-select:hover {
	border-color: var(--msb-med-grey);
}

.pvr-pricing-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(1.75rem, 4vw, 2.75rem);
	margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.pvr-pricing-card {
	position: relative;
	overflow: hidden;
	background: var(--msb-elevation-level-1);
	border: 1px solid var(--msb-nav-border);
	border-radius: var(--msb-radius-button, 16px);
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
	box-shadow: var(--msb-elevation-shadow, 0 0.35rem 1.25rem rgb(0 0 0 / 0.08));
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.2s ease;
}

.msb-dark .pvr-pricing-card {
	background: var(--msb-elevation-level-2);
}

.pvr-pricing-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--msb-fg) 12%, transparent);
}

.pvr-pricing-card__accent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
}

.pvr-pricing-card__accent--public {
	background: var(--gradient-accent-color, var(--nectar-accent-color));
}

.pvr-pricing-card__accent--managed {
	background: var(--gradient-extra-color-1, var(--nectar-extra-color-1));
}

.pvr-pricing-header {
	margin-bottom: 1.5rem;
}

.pvr-pricing-title {
	font-size: clamp(1.2rem, 2.5vw, 1.5rem);
	font-weight: 600;
	font-family: var(--msb-font-heading, var(--msb-font-body, inherit));
	color: var(--msb-fg);
	margin: 0;
	letter-spacing: -0.02em;
}

.pvr-pricing-price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.pvr-pricing-price .pvr-currency {
	font-size: 32px;
	font-weight: 700;
	color: var(--nectar-accent-color);
	line-height: 1;
}

.pvr-pricing-card--managed .pvr-pricing-price .pvr-currency {
	color: var(--nectar-extra-color-1);
}

.pvr-pricing-price .pvr-amount {
	font-size: clamp(2.75rem, 8vw, 4rem);
	font-weight: 700;
	color: var(--msb-fg);
	line-height: 1;
}

.pvr-pricing-price .pvr-period {
	font-size: 0.9375rem;
	color: var(--msb-med-grey);
	font-weight: 500;
	margin-left: 0.5rem;
}

.pvr-pricing-badge {
	display: inline-block;
	color: #fff;
	padding: 0.4rem 1rem;
	border-radius: var(--msb-radius-button, 12px);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 1rem;
}

.pvr-pricing-badge--public {
	background: var(--gradient-accent-color, var(--nectar-accent-color));
}

.pvr-pricing-badge--managed {
	background: var(--gradient-extra-color-1, var(--nectar-extra-color-1));
}

.pvr-pricing-spacer {
	margin-bottom: 1.5rem;
	height: 20px;
}

.pvr-pricing-setup {
	margin-bottom: 1.5rem;
}

.pvr-pricing-setup__inner {
	font-size: 0.8125rem;
	color: var(--msb-med-grey);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.25rem;
	justify-content: center;
	flex-wrap: wrap;
}

.pvr-pricing-description p {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--msb-med-grey);
	margin: 0 0 1rem;
}

.pvr-pricing-full {
	font-size: 0.875rem;
	color: var(--msb-med-grey);
	font-style: italic;
}

.pvr-pricing-compare {
	margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.pvr-pricing-compare__title {
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 700;
	font-family: var(--msb-font-heading, var(--msb-font-body, inherit));
	color: var(--msb-fg);
	text-align: center;
	margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
	letter-spacing: -0.02em;
}

.span_12.dark .pvr-pricing-compare__title,
.row.dark .pvr-pricing-compare__title {
	color: var(--msb-fg);
}

/* Outer card: clip to radius (fixes jagged / misaligned bottom corners). */
.pvr-pricing-table-wrap {
	overflow: hidden;
	background: var(--msb-elevation-level-1);
	border: 1px solid var(--msb-nav-border);
	border-radius: var(--msb-radius-button, 16px);
	box-shadow: var(--msb-elevation-shadow, 0 0.35rem 1.25rem rgb(0 0 0 / 0.08));
}

html.msb-dark .pvr-pricing-table-wrap,
.msb-dark .pvr-pricing-table-wrap {
	background: var(--msb-elevation-level-2);
	border-color: var(--msb-nav-border);
}

/* Inner: horizontal scroll only; table paints flush inside the card */
.pvr-pricing-table-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	width: 100%;
}

.pvr-pricing-table-scroll:focus-visible {
	outline: 2px solid var(--msb-accent);
	outline-offset: 2px;
}

.pvr-pricing-table {
	width: 100%;
	min-width: 32rem;
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 0!important;
	border: 1px solid var(--msb-nav-border);
	border-radius: var(--msb-radius-button, 16px);
	overflow: hidden;
}

#msb-pvr-pricing .pvr-pricing-table col.pvr-pricing-table__col-feature {
	width: 44%;
}

#msb-pvr-pricing .pvr-pricing-table col.pvr-pricing-table__col-public,
#msb-pvr-pricing .pvr-pricing-table col.pvr-pricing-table__col-enterprise {
	width: 28%;
}

.pvr-pricing-table caption {
	caption-side: bottom;
	padding: 0.65rem 0.5rem 0;
	font-size: 0.8125rem;
	color: var(--msb-med-grey);
	text-align: center;
}

.pvr-pricing-table th,
.pvr-pricing-table td {
	padding: clamp(0.75rem, 2vw, 1.1rem) clamp(0.85rem, 2.5vw, 1.35rem);
	font-size: 0.9375rem;
	border-bottom: 1px solid var(--msb-nav-border);
	vertical-align: middle;
}

.pvr-pricing-table thead th {
	text-align: left;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.35;
	background: var(--gradient-accent-color, var(--nectar-accent-color));
	border-bottom: 1px solid color-mix(in srgb, #fff 22%, transparent);
}

.pvr-pricing-table thead th:not(:first-child) {
	text-align: center;
}

.pvr-pricing-table .pvr-pricing-table__th-managed {
	background: var(--gradient-extra-color-1, var(--nectar-extra-color-1));
	border-bottom-color: color-mix(in srgb, #fff 22%, transparent);
}

/* Body row headers + cells */
#msb-pvr-pricing .pvr-pricing-table tbody th[scope='row'],
#msb-pvr-pricing .pvr-pricing-table tbody td {
	background-color: var(--msb-elevation-level-1);
	color: var(--msb-fg);
	font-weight: 400;
	text-align: center;
}

#msb-pvr-pricing .pvr-pricing-table tbody th[scope='row'] {
	font-weight: 500;
	text-align: left;
}

html.msb-dark #msb-pvr-pricing .pvr-pricing-table tbody th[scope='row'],
html.msb-dark #msb-pvr-pricing .pvr-pricing-table tbody td,
.msb-dark #msb-pvr-pricing .pvr-pricing-table tbody th[scope='row'],
.msb-dark #msb-pvr-pricing .pvr-pricing-table tbody td {
	background-color: var(--msb-elevation-level-2);
}

#msb-pvr-pricing .pvr-pricing-table tbody tr:nth-child(even) th[scope='row'],
#msb-pvr-pricing .pvr-pricing-table tbody tr:nth-child(even) td:not(.pvr-pricing-table__cell-managed) {
	background-color: color-mix(in srgb, var(--msb-fg) 4%, var(--msb-elevation-level-1));
}

html.msb-dark #msb-pvr-pricing .pvr-pricing-table tbody tr:nth-child(even) th[scope='row'],
html.msb-dark #msb-pvr-pricing .pvr-pricing-table tbody tr:nth-child(even) td:not(.pvr-pricing-table__cell-managed),
.msb-dark #msb-pvr-pricing .pvr-pricing-table tbody tr:nth-child(even) th[scope='row'],
.msb-dark #msb-pvr-pricing .pvr-pricing-table tbody tr:nth-child(even) td:not(.pvr-pricing-table__cell-managed) {
	background-color: color-mix(in srgb, var(--msb-fg) 6%, var(--msb-elevation-level-2));
}

#msb-pvr-pricing .pvr-pricing-table tbody td.pvr-pricing-table__cell-managed {
	background-color: color-mix(in srgb, var(--nectar-extra-color-1) 12%, var(--msb-elevation-level-1));
	color: var(--msb-fg);
}

html.msb-dark #msb-pvr-pricing .pvr-pricing-table tbody td.pvr-pricing-table__cell-managed,
.msb-dark #msb-pvr-pricing .pvr-pricing-table tbody td.pvr-pricing-table__cell-managed {
	background-color: color-mix(in srgb, var(--nectar-extra-color-1) 20%, var(--msb-elevation-level-2));
}

#msb-pvr-pricing .pvr-pricing-table tbody tr:last-child th,
#msb-pvr-pricing .pvr-pricing-table tbody tr:last-child td {
	border-bottom: none;
}

.pvr-pricing-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

.pvr-pricing-check--public {
	background: var(--gradient-accent-color, var(--nectar-accent-color));
}

.pvr-pricing-check--managed {
	background: var(--gradient-extra-color-1, var(--nectar-extra-color-1));
}

.pvr-pricing-dash {
	color: var(--msb-med-grey);
	opacity: 0.85;
	font-size: 1.15rem;
}

.pvr-pricing-mfw {
	margin-bottom: clamp(2rem, 4vw, 2.5rem);
}

#msb-pvr-pricing .pvr-pricing-mfw__inner {
	background-color: var(--msb-elevation-level-2);
	border-radius: var(--msb-radius-button, 16px);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	border: 1px solid var(--msb-nav-border);
	border-left-width: 4px;
	border-left-color: var(--nectar-extra-color-1);
	color: var(--msb-fg);
	box-shadow: var(--msb-elevation-shadow, none);
}

html.msb-dark #msb-pvr-pricing .pvr-pricing-mfw__inner,
.msb-dark #msb-pvr-pricing .pvr-pricing-mfw__inner {
	background-color: var(--msb-elevation-level-3);
	border-color: var(--msb-nav-border);
}

#msb-pvr-pricing .pvr-pricing-mfw__inner h3 {
	font-size: clamp(1.2rem, 2.5vw, 1.5rem);
	font-weight: 700;
	font-family: var(--msb-font-heading, var(--msb-font-body, inherit));
	color: var(--msb-fg);
	margin: 0 0 1rem;
	letter-spacing: -0.02em;
}

#msb-pvr-pricing .pvr-pricing-mfw__inner p {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--msb-med-grey);
	margin: 0 0 1.25rem;
}

#msb-pvr-pricing .pvr-pricing-mfw__inner > p.pvr-pricing-mfw__lead {
	font-weight: 600;
	color: var(--msb-fg);
	margin-bottom: 0;
}

#msb-pvr-pricing .pvr-pricing-mfw__inner ul {
	margin: 0 0 1rem;
	padding-left: 1.35rem;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--msb-med-grey);
}

#msb-pvr-pricing .pvr-pricing-mfw__inner li {
	margin-bottom: 0.45rem;
}

#msb-pvr-pricing .pvr-pricing-mfw__inner > p.pvr-pricing-mfw__footer {
	margin-top: 1.5rem;
	margin-bottom: 0;
	font-weight: 500;
	color: var(--msb-med-grey);
}

#msb-pvr-pricing .pvr-pricing-note {
	text-align: center;
	padding: clamp(1.15rem, 3vw, 1.5rem);
	background-color: var(--msb-elevation-level-1);
	border: 1px solid var(--msb-nav-border);
	border-radius: var(--msb-radius-button-sm, 12px);
	margin-bottom: 0.5rem;
	color: var(--msb-fg);
	box-shadow: var(--msb-elevation-shadow, none);
}

html.msb-dark #msb-pvr-pricing .pvr-pricing-note,
.msb-dark #msb-pvr-pricing .pvr-pricing-note {
	background-color: var(--msb-elevation-level-2);
}

#msb-pvr-pricing .pvr-pricing-note p {
	font-size: 0.9375rem;
	color: var(--msb-med-grey);
	margin: 0;
	font-style: italic;
	line-height: 1.55;
}

#msb-pvr-pricing .pvr-pricing-conversion-note {
	margin-top: clamp(1.25rem, 3vw, 1.75rem);
	text-align: center;
	padding: 0.85rem 1.15rem;
	background: var(--msb-elevation-level-1);
	border: 1px solid var(--msb-nav-border);
	border-radius: var(--msb-radius-button-sm, 8px);
	color: var(--msb-fg);
}

html.msb-dark #msb-pvr-pricing .pvr-pricing-conversion-note,
.msb-dark #msb-pvr-pricing .pvr-pricing-conversion-note {
	background: var(--msb-elevation-level-2);
}

#msb-pvr-pricing .pvr-pricing-conversion-note p {
	font-size: 0.8125rem;
	color: var(--msb-med-grey);
	margin: 0;
	line-height: 1.55;
}

@media (max-width: 768px) {
	.pvr-pricing-section {
		padding-left: clamp(0.75rem, 4vw, 1.25rem);
		padding-right: clamp(0.75rem, 4vw, 1.25rem);
	}

	.pvr-pricing-container {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.pvr-pricing-price {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.pvr-pricing-price .pvr-period {
		margin-left: 0;
	}
}
