/**
 * footer-variants.css — Layout + theming for the 7 dashboard-selectable
 * footer variants. Targets the data-mvc-footer-style attribute that
 * footer-{variant}.php prints on the <footer> tag itself, so child themes
 * can override one variant without touching the rest.
 *
 * Variants:
 *   classic-4col, split-tagline, centered-stacked, dark-newsletter,
 *   cta-overlap, big-cta-block, pre-footer-card
 *
 * Background tokens (driven by data-mvc-footer-bg):
 *   light  → --mvc-color-surface
 *   muted  → --mvc-color-surface-light
 *   dark   → near-black (#0b0d10)
 *   brand  → --mvc-color-primary
 *   custom → --mvc-footer-bg-custom
 */

/* ─────────────────────────────────────────────────────────────────────────
 * Background resolution
 * ───────────────────────────────────────────────────────────────────────── */

.mvc-footer {
	--mvc-footer-bg: var(--mvc-color-surface, #fff);
	--mvc-footer-fg: var(--mvc-color-text, #111);
	--mvc-footer-muted: var(--mvc-color-text-muted, color-mix(in srgb, currentColor 65%, transparent));
	--mvc-footer-border: var(--mvc-color-border, color-mix(in srgb, currentColor 12%, transparent));
	--mvc-footer-card-bg: color-mix(in srgb, var(--mvc-footer-fg) 4%, var(--mvc-footer-bg));

	background: var(--mvc-footer-bg);
	color: var(--mvc-footer-fg);
}

.mvc-footer[data-mvc-footer-bg="muted"]  { --mvc-footer-bg: var(--mvc-color-surface-light, #f7f7f8); }
.mvc-footer[data-mvc-footer-bg="dark"]   {
	--mvc-footer-bg: #0b0d10;
	--mvc-footer-fg: #ffffff;
	/* WCAG AA on #0b0d10 needs contrast ≥ 4.5:1 for body text. Pure white
	   gives 19.6:1; even the "muted" tier stays at full white so all
	   secondary text (copyright, license, contact rows) is fully legible. */
	--mvc-footer-muted: #ffffff;
	--mvc-footer-border: rgb(255 255 255 / 0.22);
	--mvc-footer-card-bg: rgb(255 255 255 / 0.06);
}
.mvc-footer[data-mvc-footer-bg="brand"]  {
	--mvc-footer-bg: var(--mvc-color-primary);
	--mvc-footer-fg: #ffffff;
	/* Was 70% white — pushed to pure white for ADA AA on brand-blue backgrounds. */
	--mvc-footer-muted: #ffffff;
	--mvc-footer-border: rgb(255 255 255 / 0.28);
	--mvc-footer-card-bg: rgb(255 255 255 / 0.08);
}
.mvc-footer[data-mvc-footer-bg="custom"] { --mvc-footer-bg: var(--mvc-footer-bg-custom, var(--mvc-color-surface)); }

/* Links inside footer inherit the footer fg */
.mvc-footer a {
	color: inherit;
	text-decoration: none;
	transition: opacity .15s ease, color .15s ease;
}
.mvc-footer a:hover,
.mvc-footer a:focus-visible { opacity: .75; }

/* Bottom bar uses the muted color for copyright */
.mvc-footer__copyright,
.mvc-footer__contact-list,
.mvc-footer__contact-line,
.mvc-footer__desc,
.mvc-footer__address,
.mvc-footer__phone,
.mvc-footer__email,
.mvc-footer__newsletter-sub { color: var(--mvc-footer-muted); }

/* Column headings (uppercase eyebrow style) */
.mvc-footer__col-heading {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mvc-footer-fg);
	margin: 0 0 1rem;
}

.mvc-footer__divider {
	border: 0;
	border-top: 1px solid var(--mvc-footer-border);
	margin: 2rem 0;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Newsletter form (shared)
 * ───────────────────────────────────────────────────────────────────────── */

.mvc-footer__newsletter-heading {
	font-weight: 600;
	margin: 0 0 .5rem;
	font-size: 1rem;
}
.mvc-footer__newsletter-sub {
	font-size: .875rem;
	margin: 0 0 1rem;
}
.mvc-footer__newsletter-form {
	display: flex;
	gap: .5rem;
	align-items: stretch;
	max-width: 22rem;
	background: var(--mvc-footer-card-bg);
	border: 1px solid var(--mvc-footer-border);
	border-radius: var(--mvc-radius-md, 999px);
	padding: .25rem;
}
.mvc-footer__newsletter-input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--mvc-footer-fg);
	padding: .55rem .9rem;
	font: inherit;
}
.mvc-footer__newsletter-input::placeholder { color: var(--mvc-footer-muted); }
.mvc-footer__newsletter-input:focus { outline: none; }
.mvc-footer__newsletter-btn {
	border: 0;
	background: var(--mvc-color-btn-bg, var(--mvc-footer-fg));
	color: var(--mvc-color-btn-text, var(--mvc-footer-bg));
	padding: 0 1rem;
	border-radius: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	transition: filter .15s ease;
}
.mvc-footer__newsletter-btn:hover { filter: brightness(.92); }

.mvc-footer__newsletter--stacked .mvc-footer__newsletter-form { flex-direction: column; }
.mvc-footer__newsletter--stacked .mvc-footer__newsletter-btn  { width: 100%; padding: .65rem 1rem; }

/* ─────────────────────────────────────────────────────────────────────────
 * Social — extra sizes / shapes used by variants
 * ───────────────────────────────────────────────────────────────────────── */

.mvc-footer__social-list--vertical {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.mvc-footer__social-list--text {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 0;
	list-style: none;
}
.mvc-footer__social-link--pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--mvc-footer-card-bg);
	border: 1px solid var(--mvc-footer-border);
}
.mvc-footer__social--lg .mvc-footer__social-list {
	display: flex;
	gap: 1rem;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Centered-stacked social chips: solid white circle, brand-blue glyph.
   Variant-scoped (not bg-attribute-scoped) because the centered-stacked
   layout always assumes a dark/brand field — same reasoning as the
   white --mvc-footer__name rule below. This wins over the layout5.css
   translucent default regardless of which dashboard bg option is set. */
.mvc-footer--centered-stacked .mvc-footer__social a,
.mvc-footer--centered-stacked .mvc-footer__social-link {
	background: #ffffff !important;
	color: var(--mvc-color-primary, #1b2b6b) !important;
	opacity: 1 !important;
	border: 1px solid #ffffff;
}
.mvc-footer--centered-stacked .mvc-footer__social a svg,
.mvc-footer--centered-stacked .mvc-footer__social-link svg {
	color: var(--mvc-color-primary, #1b2b6b) !important;
	fill: currentColor;
}
.mvc-footer--centered-stacked .mvc-footer__social a:hover,
.mvc-footer--centered-stacked .mvc-footer__social a:focus-visible,
.mvc-footer--centered-stacked .mvc-footer__social-link:hover,
.mvc-footer--centered-stacked .mvc-footer__social-link:focus-visible {
	background: var(--mvc-color-primary, #1b2b6b) !important;
	color: #ffffff !important;
	opacity: 1 !important;
}
.mvc-footer--centered-stacked .mvc-footer__social a:hover svg,
.mvc-footer--centered-stacked .mvc-footer__social a:focus-visible svg,
.mvc-footer--centered-stacked .mvc-footer__social-link:hover svg,
.mvc-footer--centered-stacked .mvc-footer__social-link:focus-visible svg {
	color: #ffffff !important;
}

/* Third-party newsletter embed wrapper (GHL / Mailchimp / ConvertKit / etc.) */
.mvc-footer__newsletter-embed {
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	/* When this lives inside a flex column (centered-stacked variant),
	   align-self stretches the wrapper to the container's max-width
	   instead of shrinking it to its iframe's intrinsic width. */
	align-self: stretch;
}
.mvc-footer__newsletter-embed iframe {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: 200px;
	border: 0;
	display: block;
	background: transparent;
	box-sizing: border-box;
	/* No fixed `height` — GHL's form_embed.js sets the height attribute on
	   the iframe at runtime based on data-height (default 463px). */
}
/* GHL doesn't wrap its iframe, but other providers (Mailchimp, ConvertKit)
   may inject wrapper divs with inline widths. Force them full-width too. */
.mvc-footer__newsletter-embed > div {
	width: 100% !important;
	max-width: 100% !important;
}
.mvc-footer--centered-stacked .mvc-footer__newsletter-embed,
.mvc-footer--cta-overlap .mvc-footer__newsletter-embed,
.mvc-footer--dark-newsletter .mvc-footer__newsletter-embed {
	max-width: 100%;
}
/* In centered-stacked specifically, the flex column shrinks children
   to content. Force the newsletter wrapper to be at least wide enough
   that GHL's inline Newsletter template doesn't collapse to its
   mobile-stacked breakpoint. Bumped to 900px after observing GHL
   still stacks at 720px — GHL's internal breakpoint sits between
   720-900px. */
.mvc-footer--centered-stacked .mvc-footer__centered-inner > .mvc-footer__newsletter,
.mvc-footer--centered-stacked .mvc-footer__newsletter--embed {
	width: 100% !important;
	min-width: min(900px, 100%) !important;
	max-width: 100% !important;
	align-self: center !important;
	flex: 0 0 auto;
}
.mvc-footer--centered-stacked .mvc-footer__newsletter-embed {
	width: 100% !important;
	min-width: min(900px, 100%) !important;
	max-width: 100% !important;
}
.mvc-footer--centered-stacked .mvc-footer__newsletter-embed iframe {
	width: 100% !important;
	min-width: min(900px, 100%) !important;
}
/* Mobile: below 900px viewport, GHL will stack — that's the correct mobile UX.
   Above 900px, hold the inline layout. */
@media (max-width: 899px) {
	.mvc-footer--centered-stacked .mvc-footer__centered-inner > .mvc-footer__newsletter,
	.mvc-footer--centered-stacked .mvc-footer__newsletter--embed,
	.mvc-footer--centered-stacked .mvc-footer__newsletter-embed,
	.mvc-footer--centered-stacked .mvc-footer__newsletter-embed iframe {
		min-width: 0 !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────────
 * Pre-footer band
 * ───────────────────────────────────────────────────────────────────────── */

.mvc-prefooter {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.mvc-prefooter__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}
.mvc-prefooter__heading {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	margin: 0;
	line-height: 1.2;
}
.mvc-prefooter__sub {
	max-width: 38rem;
	margin: 0;
	color: var(--mvc-color-text-muted);
}
.mvc-prefooter__btn {
	margin-top: .5rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

/* Card layouts */
.mvc-prefooter--card .mvc-prefooter__inner,
.mvc-prefooter--card-with-image .mvc-prefooter__inner {
	background: var(--mvc-color-surface, #fff);
	border: 1px solid var(--mvc-color-border, rgba(0,0,0,.08));
	border-radius: var(--mvc-radius-xl, 20px);
	padding: clamp(2rem, 4vw, 3rem);
	box-shadow: var(--mvc-shadow-card, 0 4px 12px rgba(0,0,0,.06));
}
.mvc-prefooter--card-with-image .mvc-prefooter__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	text-align: left;
	align-items: center;
}
.mvc-prefooter--card-with-image .mvc-prefooter__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .75rem;
}
.mvc-prefooter--card-with-image .mvc-prefooter__visual img {
	width: 100%;
	height: auto;
	border-radius: var(--mvc-radius-lg, 16px);
}
@media (max-width: 767px) {
	.mvc-prefooter--card-with-image .mvc-prefooter__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.mvc-prefooter--card-with-image .mvc-prefooter__content { align-items: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Variant: classic-4col  (default — extends existing layout5.css rules)
 * Layout5.css already styles .mvc-footer__grid; we just add modifiers for
 * extra newsletter column placement.
 * ───────────────────────────────────────────────────────────────────────── */

.mvc-footer--classic-4col .mvc-footer__col--newsletter {
	grid-column: span 1;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Variant: split-tagline  (Azimute)
 * ───────────────────────────────────────────────────────────────────────── */

.mvc-footer--split-tagline .mvc-footer__top { padding: clamp(3rem, 5vw, 4.5rem) 0 2rem; }

.mvc-footer--split-tagline .mvc-footer__split-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}
.mvc-footer--split-tagline .mvc-footer__tagline {
	margin: 0;
	font-size: 1rem;
	color: var(--mvc-footer-muted);
	text-align: right;
}
.mvc-footer--split-tagline .mvc-footer__split-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem;
}
.mvc-footer--split-tagline .mvc-footer__contact-list,
.mvc-footer--big-cta-block .mvc-footer__contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .65rem;
}
.mvc-footer--split-tagline .mvc-footer__contact-item,
.mvc-footer--big-cta-block .mvc-footer__contact-item {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
}
.mvc-footer--split-tagline .mvc-footer__col--meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}
.mvc-footer--split-tagline .mvc-footer__col--meta .mvc-footer__social-list {
	display: flex;
	gap: .5rem;
	padding: 0;
	list-style: none;
	margin: 0;
}
.mvc-footer--split-tagline .mvc-footer__col--meta .mvc-footer__social-link {
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--mvc-color-primary);
	color: #fff;
	align-items: center;
	justify-content: center;
}
@media (max-width: 900px) {
	.mvc-footer--split-tagline .mvc-footer__split-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.mvc-footer--split-tagline .mvc-footer__tagline { text-align: left; }
	.mvc-footer--split-tagline .mvc-footer__split-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.mvc-footer--split-tagline .mvc-footer__split-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Variant: centered-stacked  (slothui)
 * ───────────────────────────────────────────────────────────────────────── */

.mvc-footer--centered-stacked .mvc-footer__top { padding: clamp(3rem, 6vw, 5rem) 0; }
.mvc-footer--centered-stacked .mvc-footer__centered-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.75rem;
	text-align: center;
}
.mvc-footer--centered-stacked .mvc-footer__centered-nav ul,
.mvc-footer--centered-stacked .mvc-footer__centered-nav .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2rem;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
/* Centered-stacked nav is a design-intent dark layout — its sibling
   .mvc-footer__name hardcodes #fff and the logo presumes a dark field.
   Force the nav links to full white at every state regardless of the
   global `a { color: var(--color-link) }` rule in typography.css or any
   bg-preset variable resolution. typography.css sets color on a bare `a`
   selector (specificity 0,0,1,0); this rule is 0,0,3,1 and uses
   !important to also defeat any hover/visited UA rules. */
.mvc-footer--centered-stacked .mvc-footer__centered-nav a,
.mvc-footer--centered-stacked .mvc-footer__centered-nav a:link,
.mvc-footer--centered-stacked .mvc-footer__centered-nav a:visited,
.mvc-footer--centered-stacked .mvc-footer__centered-nav a:hover,
.mvc-footer--centered-stacked .mvc-footer__centered-nav a:focus,
.mvc-footer--centered-stacked .mvc-footer__centered-nav a:focus-visible,
.mvc-footer--centered-stacked .mvc-footer__centered-nav a:active {
	color: #ffffff !important;
	opacity: 1 !important;
	font-weight: 500;
	text-decoration: none;
}
.mvc-footer--centered-stacked .mvc-footer__centered-nav a:hover,
.mvc-footer--centered-stacked .mvc-footer__centered-nav a:focus-visible {
	opacity: 0.85 !important;
}

/* Logo gets bigger in the featured centered position */
.mvc-footer--centered-stacked .mvc-footer__logo-link { display: inline-flex; }
.mvc-footer--centered-stacked .mvc-footer__logo-img {
	height: clamp(100px, 12vw, 140px);
	width: auto;
	max-width: min(340px, 80vw);
	margin-bottom: 0;
	object-fit: contain;
}
.mvc-footer--centered-stacked .mvc-footer__name {
	font-family: var(--font-heading);
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	font-weight: var(--font-weight-bold);
	color: #fff;
	letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Variant: dark-newsletter  (Mystic Studio)
 * ───────────────────────────────────────────────────────────────────────── */

.mvc-footer--dark-newsletter .mvc-footer__top { padding: clamp(3rem, 5vw, 5rem) 0; }
.mvc-footer--dark-newsletter .mvc-footer__dn-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr auto;
	gap: clamp(2rem, 4vw, 4rem);
	align-items: flex-start;
}
.mvc-footer--dark-newsletter .mvc-footer__dn-tagline {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
	margin: 1.5rem 0;
	font-weight: 500;
}
.mvc-footer--dark-newsletter .mvc-footer__dn-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
}
.mvc-footer--dark-newsletter .mvc-footer__dn-cols .mvc-footer__col ul,
.mvc-footer--dark-newsletter .mvc-footer__dn-cols .mvc-footer__col .menu {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding: 0;
	margin: 0;
	list-style: none;
}
.mvc-footer--dark-newsletter .mvc-footer__newsletter-form {
	border-radius: 999px;
}
@media (max-width: 900px) {
	.mvc-footer--dark-newsletter .mvc-footer__dn-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.mvc-footer--dark-newsletter .mvc-footer__dn-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Variant: cta-overlap  (StayClean)
 * ───────────────────────────────────────────────────────────────────────── */

.mvc-footer--cta-overlap { position: relative; padding-top: 4rem; }

.mvc-footer--cta-overlap .mvc-footer__overlap-card {
	margin-top: -6rem;
	margin-bottom: 3rem;
	position: relative;
	z-index: 2;
}
.mvc-footer--cta-overlap .mvc-footer__overlap-inner {
	background: var(--mvc-color-primary);
	color: #fff;
	border-radius: var(--mvc-radius-xl, 20px);
	padding: clamp(2rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 2rem;
	align-items: center;
	box-shadow: 0 12px 40px -8px rgb(0 0 0 / 0.2);
}
.mvc-footer--cta-overlap .mvc-footer__overlap-heading {
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	margin: 0 0 .5rem;
	color: #fff;
}
.mvc-footer--cta-overlap .mvc-footer__overlap-sub {
	margin: 0;
	color: rgb(255 255 255 / 0.85);
}
.mvc-footer--cta-overlap .mvc-footer__overlap-form .mvc-footer__newsletter-form {
	background: rgb(255 255 255 / 0.12);
	border-color: rgb(255 255 255 / 0.2);
}
.mvc-footer--cta-overlap .mvc-footer__overlap-form .mvc-footer__newsletter-input { color: var(--color-brand-light, #fff); }
.mvc-footer--cta-overlap .mvc-footer__overlap-form .mvc-footer__newsletter-input::placeholder { color: rgb(255 255 255 / 0.6); }
.mvc-footer--cta-overlap .mvc-footer__overlap-form .mvc-footer__newsletter-btn {
	background: #fff;
	color: var(--mvc-color-primary);
}
@media (max-width: 767px) {
	.mvc-footer--cta-overlap .mvc-footer__overlap-inner { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Variant: prefooter-overlap
 * Slim CTA band that sits ~50% over the top edge of the footer.
 * ───────────────────────────────────────────────────────────────────────── */

.mvc-footer--prefooter-overlap { position: relative; padding-top: clamp(3rem, 6vw, 5rem); }

.mvc-footer--prefooter-overlap .mvc-footer__pfo-band {
	margin-top: calc(clamp(2rem, 5vw, 4rem) * -1);
	margin-bottom: clamp(1.25rem, 3vw, 2rem);
	position: relative;
	z-index: 2;
}
.mvc-footer--prefooter-overlap .mvc-footer__pfo-inner {
	background: var(--mvc-color-primary);
	color: #fff;
	border-radius: var(--mvc-radius-lg, 14px);
	padding: clamp(1rem, 2.4vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: clamp(1rem, 2vw, 2rem);
	align-items: center;
	box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.25);
}
.mvc-footer--prefooter-overlap .mvc-footer__pfo-heading {
	font-size: clamp(1.05rem, 1.8vw, 1.375rem);
	line-height: 1.25;
	margin: 0 0 .25rem;
	color: #fff;
}
.mvc-footer--prefooter-overlap .mvc-footer__pfo-sub {
	margin: 0;
	color: rgb(255 255 255 / 0.85);
	font-size: .95rem;
}
.mvc-footer--prefooter-overlap .mvc-footer__pfo-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	white-space: nowrap;
}
@media (max-width: 639px) {
	.mvc-footer--prefooter-overlap .mvc-footer__pfo-inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.mvc-footer--prefooter-overlap .mvc-footer__pfo-action { justify-self: center; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Variant: big-cta-block  (UnifiedUI)
 * ───────────────────────────────────────────────────────────────────────── */

.mvc-footer--big-cta-block .mvc-footer__big-cta {
	padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--mvc-footer-border);
}
.mvc-footer--big-cta-block .mvc-footer__big-cta-inner {
	max-width: 42rem;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.mvc-footer--big-cta-block .mvc-footer__big-cta-icon {
	width: 4rem;
	height: 4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mvc-color-primary);
	background: color-mix(in srgb, var(--mvc-color-primary) 12%, transparent);
	border-radius: var(--mvc-radius-md, 12px);
}
.mvc-footer--big-cta-block .mvc-footer__big-cta-heading {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	margin: 0;
	line-height: 1.15;
}
.mvc-footer--big-cta-block .mvc-footer__big-cta-sub {
	max-width: 32rem;
	color: var(--mvc-footer-muted);
	margin: 0;
}
.mvc-footer--big-cta-block .mvc-footer__big-cta-btn {
	margin-top: .5rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}
.mvc-footer--big-cta-block .mvc-footer__big-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2rem;
	padding: clamp(2rem, 4vw, 3.5rem) 0;
}
@media (max-width: 1024px) {
	.mvc-footer--big-cta-block .mvc-footer__big-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.mvc-footer--big-cta-block .mvc-footer__big-grid { grid-template-columns: repeat(2, 1fr); }
	.mvc-footer--big-cta-block .mvc-footer__col--social { grid-column: span 2; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Variant: pre-footer-card  (SquareUI affiliate)
 * Inherits classic grid; just tightens spacing under the card.
 * ───────────────────────────────────────────────────────────────────────── */

.mvc-footer--pre-footer-card .mvc-footer__top { padding-top: 2rem; }

/* ─────────────────────────────────────────────────────────────────────────
 * Bottom-bar shared layout
 * ───────────────────────────────────────────────────────────────────────── */

.mvc-footer__bottom {
	border-top: 1px solid var(--mvc-footer-border);
	/* layout5.css hard-codes color: var(--color-gray-500) on this same
	   selector, which leaks gray text into the bottom bar even when the
	   footer's --mvc-footer-muted token is white. Reset to the footer's
	   own muted token so dark/brand bg cases stay legible. */
	color: var(--mvc-footer-muted) !important;
}
.mvc-footer__bottom-inner,
.mvc-footer__bottom-inner * {
	color: var(--mvc-footer-muted);
}
.mvc-footer__bottom-inner a {
	color: var(--mvc-footer-muted);
}
.mvc-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 0;
	font-size: .875rem;
}
.mvc-footer__bottom-links {
	display: flex;
	gap: 1.25rem;
	align-items: center;
	flex-wrap: wrap;
}
.mvc-footer__bottom-links ul,
.mvc-footer__bottom-links .menu {
	display: flex;
	gap: 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.mvc-footer__review-link,
.mvc-footer__credit-link,
.mvc-footer__privacy-link { text-decoration: underline; }

/* Centered-stacked has its own bottom bar treatment — stacked, centered.
   Copyright + review link share one centered baseline so the review link
   reads as part of the same line rather than floating below the copyright.
   Forces white text since the variant assumes a dark/brand field. */
.mvc-footer--centered-stacked .mvc-footer__bottom-inner {
	justify-content: center;
	text-align: center;
	align-items: baseline;
	color: #ffffff !important;
}
.mvc-footer--centered-stacked .mvc-footer__bottom-inner,
.mvc-footer--centered-stacked .mvc-footer__bottom-inner * {
	color: #ffffff !important;
}
.mvc-footer--centered-stacked .mvc-footer__copyright {
	margin: 0;
	color: #ffffff !important;
}
.mvc-footer--centered-stacked .mvc-footer__bottom-links {
	align-items: baseline;
}
.mvc-footer--centered-stacked .mvc-footer__bottom-links a,
.mvc-footer--centered-stacked .mvc-footer__review-link,
.mvc-footer--centered-stacked .mvc-footer__credit-link,
.mvc-footer--centered-stacked .mvc-footer__privacy-link {
	color: #ffffff !important;
	font-size: inherit;
	line-height: inherit;
	opacity: 1 !important;
}

@media (max-width: 640px) {
	.mvc-footer__bottom-inner {
		justify-content: center;
		text-align: center;
	}
}