/*
 * HMCB Canvas — styles for block-built pages that use the "HMCB Canvas (Full Width)" template.
 * Tokens mirror the Help Me Choose Benefits design system. Layout, colors and type sizes that
 * have a block setting are set on the blocks themselves; this file covers the rest
 * (design tokens, component styling, sticky/animated behaviour).
 */

/* ---------- Design tokens ---------- */
:root {
	--green-50: #f4f9ea; --green-100: #e7f3d4; --green-200: #d0e7aa; --green-300: #b8db7f; --green-400: #a0cf55;
	--green-500: #8dc63f; --green-600: #74a62f; --green-700: #5b8324; --green-800: #43601a; --green-900: #2c3f11;
	--navy-50: #f0f0f6; --navy-100: #dcdce9; --navy-200: #b9b9d2; --navy-300: #9091b7; --navy-400: #62638f;
	--navy-500: #3c3c6e; --navy-600: #2a2a61; --navy-700: #1e1d56; --navy-800: #16163e; --navy-900: #0e0e27;
	--sky-50: #edf7fd; --sky-100: #d7edfa; --sky-200: #b0dbf4; --sky-300: #86c8ed; --sky-400: #53b1e3;
	--sky-500: #2e9ad6; --sky-600: #1f7cb0; --sky-700: #185f87; --sky-800: #12455f; --sky-900: #0c2c3c;
	--grey-0: #ffffff; --grey-25: #fafbfc; --grey-50: #f5f6f8; --grey-100: #edeff3; --grey-200: #dfe2e9;
	--grey-300: #c6cad5; --grey-400: #9aa0b0; --grey-500: #737a8c; --grey-600: #565c6c; --grey-700: #3f4452;
	--grey-800: #2a2e39; --grey-900: #1a1d24;

	--surface-page: var(--grey-25);
	--surface-card: var(--grey-0);
	--surface-sunken: var(--grey-50);
	--text-heading: var(--navy-700);
	--text-body: var(--grey-700);
	--text-muted: var(--grey-500);
	--text-faint: var(--grey-400);
	--border-subtle: var(--grey-200);

	--font-sans: "Source Sans 3", "Segoe UI", Frutiger, "Myriad Pro", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--tracking-caps: 0.09em;

	--radius-control: 6px;
	--radius-card: 14px;
	--shadow-1: 0 1px 2px rgba(30, 29, 86, .06), 0 1px 1px rgba(30, 29, 86, .04);
	--shadow-2: 0 2px 6px rgba(30, 29, 86, .07), 0 1px 2px rgba(30, 29, 86, .05);
	--shadow-3: 0 6px 18px rgba(30, 29, 86, .09), 0 2px 6px rgba(30, 29, 86, .05);
	--shadow-4: 0 16px 40px rgba(30, 29, 86, .13), 0 4px 12px rgba(30, 29, 86, .06);
	--shadow-5: 0 28px 64px rgba(14, 14, 39, .28), 0 8px 20px rgba(14, 14, 39, .14);
	--ring-select: 0 0 0 2px var(--green-500);
	--ring-focus: 0 0 0 3px rgba(83, 177, 227, .42);
	--ease-out: cubic-bezier(.22, .61, .36, 1);

	--hmcb-header-offset: 76px;
}

/* ---------- Page base ---------- */
body.hmcb-canvas {
	margin: 0;
	background: var(--surface-page);
	color: var(--text-body);
	font: 400 17px/1.5 var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-wrap: pretty;
}
html:has(body.hmcb-canvas) {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--hmcb-header-offset) + var(--wp-admin--admin-bar--height, 0px));
}
body.hmcb-canvas *,
body.hmcb-canvas *::before,
body.hmcb-canvas *::after {
	box-sizing: border-box;
}
.hmcb-main {
	overflow-x: clip;
}
/* Element defaults use :where() so they add no specificity: any component class below wins. */
:where(body.hmcb-canvas) :where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	color: var(--text-heading);
	font-family: var(--font-sans);
	text-wrap: balance;
}
:where(body.hmcb-canvas) :where(p) {
	margin: 0;
}
:where(body.hmcb-canvas) :where(img) {
	max-width: 100%;
	height: auto;
}
:where(body.hmcb-canvas) :where(a) {
	color: var(--sky-600);
	text-decoration: none;
	transition: color 140ms var(--ease-out);
}
:where(body.hmcb-canvas) :where(a:hover) {
	color: var(--sky-700);
	text-decoration: underline;
}
body.hmcb-canvas :focus-visible {
	outline: none;
	box-shadow: var(--ring-focus);
	border-radius: 3px;
}
body.hmcb-canvas ::selection {
	background: var(--green-200);
	color: var(--navy-800);
}
body.hmcb-canvas .wp-block-image,
body.hmcb-canvas figure {
	margin: 0;
}

/* Editor: give the canvas page the same base type as the front end. */
.editor-styles-wrapper:has(.hmcb-hero) {
	background: var(--surface-page);
	color: var(--text-body);
	font: 400 17px/1.5 var(--font-sans);
}
.editor-styles-wrapper:has(.hmcb-hero) :is(h1, h2, h3, h4) {
	color: var(--text-heading);
	font-family: var(--font-sans);
}
/* Editor: drop the default text margins the editor adds (component rules still win), as on the front end. */
html :where(.editor-styles-wrapper:has(.hmcb-hero)) :is(h1, h2, h3, h4, h5, h6, p) {
	margin: 0;
}
/* Editor: undo the classic editor's block spacing and 840px cap so sections run edge to edge (component rules still win). */
html body:where(.editor-styles-wrapper:has(.hmcb-hero)) :where(.wp-block) {
	max-width: none;
	margin: 0;
}

/* ---------- Shared type roles ---------- */
.hmcb-eyebrow,
.hmcb-eyebrow.wp-block-kadence-advancedheading {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}
.hmcb-eyebrow.is-inline { display: inline-block; }
.hmcb-eyebrow.is-muted { color: var(--text-muted); }
.hmcb-eyebrow.is-green { color: var(--green-700); }
.hmcb-eyebrow.is-sky { color: var(--sky-400); }
.hmcb-lede {
	font-size: 20px;
	line-height: 1.65;
	color: var(--text-body);
}
.hmcb-lead {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--text-heading);
}
.hmcb-small {
	font-size: 15px;
	line-height: 1.5;
}
.hmcb-caption {
	font-size: 13px;
	line-height: 1.4;
	color: var(--text-muted);
}
.hmcb-mono {
	font-family: var(--font-mono);
}
.hmcb-measure-52 { max-width: 52ch; }
.hmcb-measure-56 { max-width: 56ch; }
.hmcb-measure-62 { max-width: 62ch; }
.hmcb-measure-70 { max-width: 70ch; }
.hmcb-measure-74 { max-width: 74ch; }
.hmcb-measure-24ch { max-width: 24ch; }
.hmcb-text-link a,
a.hmcb-text-link {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sky-700);
}

/* Stacks of paragraphs */
.hmcb-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.hmcb-stack > * { margin: 0 !important; }

/* Icons rendered by Kadence (Lucide set registered by the theme) */
.hmcb-icon .kt-svg-icon-wrap,
.hmcb-icon.wp-block-kadence-icon {
	justify-content: flex-start;
	margin: 0;
}
.hmcb-icon .kb-svg-icon-wrap { display: inline-flex; }

/* ---------- Buttons (Kadence advanced buttons) ---------- */
.hmcb-btn .kb-button,
.hmcb-btn .wp-block-kadence-singlebtn {
	font-family: var(--font-sans);
	letter-spacing: -0.01em;
	white-space: nowrap;
	gap: 12px;
	transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), transform 80ms var(--ease-out);
}
.hmcb-btn .kb-button:active { transform: translateY(1px); }
.hmcb-btn .kb-button:hover { text-decoration: none; }

/* ---------- Site header (header-hmcb.php) ---------- */
.hmcb-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 60;
	background: rgba(255, 255, 255, .94);
	border-bottom: 1px solid var(--border-subtle);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-family: var(--font-sans);
}
.hmcb-site-header__bar {
	max-width: 1280px;
	min-height: 76px;
	margin: 0 auto;
	padding: 16px 32px;
	display: flex;
	align-items: center;
	gap: 24px;
}
.hmcb-site-header__logo {
	flex: 0 0 auto;
	line-height: 0;
}
.hmcb-site-header__logo .custom-logo-link {
	display: inline-block;
	line-height: 0;
}
.hmcb-site-header__logo .custom-logo {
	display: block;
	width: auto;
	height: 40px;
	max-width: none;
}
.hmcb-site-header__name {
	font-size: 20px;
	font-weight: 700;
	color: var(--navy-700);
	text-decoration: none;
}
.hmcb-site-nav {
	flex: 1 1 auto;
	min-width: 0;
}
.hmcb-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 24px;
}
.hmcb-menu > li {
	margin: 0;
	padding: 0;
}
.hmcb-menu > li:first-child { margin-left: 24px; }
.hmcb-menu > li.hmcb-nav-secondary { margin-left: auto; }
.hmcb-menu a {
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-body);
	text-decoration: none;
	white-space: nowrap;
}
.hmcb-menu a:hover {
	color: var(--sky-700);
	text-decoration: underline;
}
.hmcb-menu .menu-item-type-post_type.current-menu-item > a,
.hmcb-menu .current_page_parent > a {
	color: var(--navy-700);
	font-weight: 600;
}
.hmcb-menu .hmcb-nav-secondary > a {
	font-weight: 600;
	color: var(--navy-700);
}
.hmcb-menu .hmcb-nav-button > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 20px;
	border: 1px solid var(--green-500);
	border-radius: var(--radius-control);
	background: var(--green-500);
	box-shadow: var(--shadow-1);
	color: var(--navy-800);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.hmcb-menu .hmcb-nav-button > a:hover {
	background: var(--green-600);
	border-color: var(--green-600);
	color: #fff;
	text-decoration: none;
}
.hmcb-menu-toggle {
	display: none;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	margin: 0 -10px 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--navy-700);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.hmcb-menu-toggle__bars,
.hmcb-menu-toggle__bars::before,
.hmcb-menu-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-out);
}
.hmcb-menu-toggle__bars { position: relative; }
.hmcb-menu-toggle__bars::before,
.hmcb-menu-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}
.hmcb-menu-toggle__bars::before { top: -7px; }
.hmcb-menu-toggle__bars::after { top: 7px; }
.hmcb-site-header.is-open .hmcb-menu-toggle__bars { background: transparent; }
.hmcb-site-header.is-open .hmcb-menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.hmcb-site-header.is-open .hmcb-menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1100px) {
	.hmcb-site-header__bar { gap: 16px; }
	.hmcb-menu { gap: 18px; }
	.hmcb-menu > li:first-child { margin-left: 8px; }
}
@media (max-width: 1023px) {
	.hmcb-site-header__logo .custom-logo { height: 36px; }
	.hmcb-menu-toggle { display: inline-flex; }
	.hmcb-site-nav {
		display: flex;
		justify-content: flex-end;
	}
	.hmcb-menu > li { display: none; }
	.hmcb-menu > li.hmcb-nav-button { display: block; }
	.hmcb-site-header.is-open .hmcb-site-nav {
		position: fixed;
		top: calc(var(--hmcb-header-offset) + var(--wp-admin--admin-bar--height, 0px));
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		overflow-y: auto;
		padding: 16px 32px 40px;
		background: #fff;
	}
	.hmcb-site-header.is-open .hmcb-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.hmcb-site-header.is-open .hmcb-menu > li {
		display: block;
		margin: 0;
	}
	.hmcb-site-header.is-open .hmcb-menu > li > a {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--border-subtle);
		color: var(--navy-700);
		font-size: 22px;
		font-weight: 600;
		white-space: normal;
	}
	.hmcb-site-header.is-open .hmcb-menu > li.hmcb-nav-button { margin-top: 24px; }
	.hmcb-site-header.is-open .hmcb-menu > li.hmcb-nav-button > a {
		display: flex;
		height: 52px;
		padding: 0 24px;
		border-bottom: 1px solid var(--green-500);
		color: var(--navy-800);
		font-size: 18px;
	}
	html.hmcb-menu-open { overflow: hidden; }
}
@media (max-width: 420px) {
	.hmcb-site-header__bar { padding: 12px 20px; gap: 12px; }
	.hmcb-site-header__logo .custom-logo { height: 32px; }
	.hmcb-menu .hmcb-nav-button > a { padding: 0 14px; font-size: 16px; }
}

/* Accessibility helpers (the legacy stylesheet is not loaded on these pages) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: 12px 20px;
	background: #fff;
	color: var(--navy-700);
	font-weight: 600;
	border-radius: var(--radius-control);
	box-shadow: var(--shadow-3);
}

/* ---------- Hero ---------- */
.hmcb-hero.wp-block-cover {
	padding: 0;
	align-items: flex-end;
	background-color: var(--navy-800);
	overflow: hidden;
}
.hmcb-hero .wp-block-cover__image-background {
	inset: -6% -4% -6% -4%;
	width: 108%;
	height: 112%;
	max-width: none;
	max-height: none;
	transform: translate3d(0, var(--hmcb-parallax, 0px), 0);
	animation: hmcbPan 28s var(--ease-out) both;
	will-change: transform;
}
.hmcb-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: none;
	color: #fff;
}
.hmcb-hero__title { max-width: 15ch; }
.hmcb-hero__lede { max-width: 52ch; text-wrap: pretty; }
.hmcb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}
.hmcb-hero__actions > * { margin: 0 !important; }
.hmcb-hero__link { display: flex; }
.hmcb-hero__link a {
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .5);
	padding-bottom: 2px;
}
.hmcb-hero__link a:hover {
	color: #fff;
	text-decoration: none;
	border-bottom-color: #fff;
}

/* Hero: animated employee-experience card */
.hmcb-quiz {
	position: relative;
	width: 100%;
	max-width: 420px;
	margin-left: auto;
	background: var(--surface-card);
	border-radius: 20px;
	box-shadow: var(--shadow-5);
	overflow: hidden;
	padding: 20px 24px 24px;
	min-height: 300px;
	color: var(--text-body);
	text-align: left;
}
.hmcb-quiz__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}
.hmcb-quiz__privacy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: nowrap;
}
.hmcb-quiz__privacy p {
	font-size: 13px;
	line-height: 1.4;
	color: var(--green-700);
	white-space: nowrap;
}
.hmcb-quiz__privacy .kb-svg-icon-wrap { color: var(--green-700); }
.hmcb-quiz__q {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-heading);
	min-height: 56px;
	margin: 0 0 16px;
}
.hmcb-quiz__options {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hmcb-quiz__opt {
	min-height: 48px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	border-radius: var(--radius-control);
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-body);
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.hmcb-quiz__opt.is-hot {
	background: var(--grey-50);
	border-color: var(--grey-300);
}
.hmcb-quiz__opt.is-picked {
	background: var(--green-100);
	border-color: var(--green-500);
	box-shadow: var(--ring-select);
}
.hmcb-quiz__result {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.hmcb-quiz__result > * { margin: 0 !important; }

/* Quiz states (JS adds .is-live to the card). Without JS the result slide shows. */
.hmcb-quiz.is-live .hmcb-quiz__slide,
.hmcb-quiz.is-live .hmcb-quiz__meta { display: none; }
.hmcb-quiz.is-live .hmcb-quiz__slide.is-active { display: block; }
.hmcb-quiz.is-live .hmcb-quiz__slide.is-active.hmcb-quiz__result { display: flex; animation: hmcbFade 340ms var(--ease-out) both; }
.hmcb-quiz.is-live.is-asking .hmcb-quiz__meta { display: flex; }
.hmcb-quiz:not(.is-live) .hmcb-quiz__slide:not(.hmcb-quiz__result),
.hmcb-quiz:not(.is-live) .hmcb-quiz__meta { display: none; }
html.hmcb-js .hmcb-quiz:not(.is-live) .hmcb-quiz__meta { display: flex; }
html.hmcb-js .hmcb-quiz:not(.is-live) .hmcb-quiz__slide { display: none; }
html.hmcb-js .hmcb-quiz:not(.is-live) .hmcb-quiz__meta + .hmcb-quiz__slide { display: block; }
.editor-styles-wrapper .hmcb-quiz .hmcb-quiz__slide,
.editor-styles-wrapper .hmcb-quiz .hmcb-quiz__meta { display: block; }
.editor-styles-wrapper .hmcb-quiz .hmcb-quiz__meta { display: flex; }
.editor-styles-wrapper .hmcb-quiz .hmcb-quiz__slide + .hmcb-quiz__slide { margin-top: 24px; padding-top: 24px; border-top: 1px dashed var(--grey-300); }

/* ---------- Recommendation cards ---------- */
.hmcb-rec {
	background: var(--surface-card);
	border: 1px solid var(--grey-300);
	border-radius: var(--radius-card);
	overflow: hidden;
}
.hmcb-rec.is-recommended {
	background: var(--green-50);
	border-color: var(--green-400);
	box-shadow: var(--shadow-2);
}
.hmcb-rec.is-skip {
	background: var(--grey-50);
	border-color: var(--grey-300);
}
.hmcb-rec__head {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
}
.hmcb-rec__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: var(--surface-card);
	border: 1px solid var(--grey-300);
}
.hmcb-rec.is-recommended .hmcb-rec__icon { border-color: var(--green-400); color: var(--green-600); }
.hmcb-rec.is-skip .hmcb-rec__icon { color: var(--grey-500); }
.hmcb-rec__icon .kb-svg-icon-wrap { color: inherit; }
.hmcb-rec__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hmcb-rec__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.hmcb-rec__plan {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.22;
	color: var(--text-heading);
}
.hmcb-rec__cost {
	flex: 0 0 auto;
	text-align: right;
}
.hmcb-rec__price {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--text-heading);
	font-variant-numeric: tabular-nums;
}
.hmcb-rec__period {
	font-size: 13px;
	line-height: 1.4;
	color: var(--text-muted);
}
.hmcb-rec__why {
	border-top: 1px solid var(--grey-300);
}
.hmcb-rec.is-recommended .hmcb-rec__why { border-top-color: var(--green-400); }
.hmcb-rec__why-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 8px 20px;
}
.hmcb-rec__why-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.hmcb-rec__why-label p {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}
.hmcb-rec.is-recommended .hmcb-rec__why-row { color: var(--green-600); }
.hmcb-rec.is-skip .hmcb-rec__why-row { color: var(--grey-500); }
.hmcb-rec__why-row p,
.hmcb-rec__why-row .kb-svg-icon-wrap { color: inherit; }
.hmcb-rec__reason {
	padding: 0 20px 20px;
	font-size: 17px;
	line-height: 1.5;
	color: var(--text-body);
}

/* Badges */
.hmcb-badge {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	padding: 3px 8px;
	border-radius: 3px;
	border: 1px solid var(--grey-200);
	background: var(--grey-100);
	color: var(--grey-600);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	white-space: nowrap;
}
.hmcb-badge.is-plain {
	letter-spacing: 0;
	text-transform: none;
}
.hmcb-badge.is-recommended {
	background: var(--green-100);
	color: var(--green-800);
	border-color: var(--green-300);
}
.hmcb-badge.is-skip {
	background: var(--grey-50);
	color: var(--grey-500);
	border-color: var(--grey-300);
}

/* ---------- Benefit-type ticker ---------- */
.hmcb-types__bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 24px;
}
.hmcb-types__label {
	flex: 0 0 auto;
}
.hmcb-types__track {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hmcb-types__track .kt-svg-icon-list {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: max-content;
	column-gap: 32px !important;
	row-gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.hmcb-types__track.is-running .kt-svg-icon-list {
	animation: hmcbTrack 40s linear infinite;
}
.hmcb-types__track .kt-svg-icon-list-item-wrap {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	white-space: nowrap;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-body);
}
.hmcb-types__track .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}
.hmcb-types__track:hover .kt-svg-icon-list { animation-play-state: paused; }
.hmcb-types__track.is-static {
	-webkit-mask-image: none;
	mask-image: none;
}
.hmcb-types__track.is-static .kt-svg-icon-list {
	flex-wrap: wrap !important;
	width: auto;
	row-gap: 8px !important;
}

/* ---------- Cards ---------- */
.hmcb-card {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-1);
	transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.hmcb-card:hover {
	box-shadow: var(--shadow-2);
}
.hmcb-outcome {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
}
.hmcb-outcome:hover { transform: translateY(-2px); }
.hmcb-outcome p {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--text-heading);
}
.hmcb-feature {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
}
.hmcb-feature h3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}
.hmcb-feature p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-body);
}
.hmcb-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 20px;
}
.hmcb-grid > * { margin: 0 !important; }
.hmcb-grid.is-tight { gap: 16px; }

/* ---------- The gap ---------- */
.hmcb-gap__media {
	position: sticky;
	top: calc(96px + var(--wp-admin--admin-bar--height, 0px));
	align-self: start;
}
.hmcb-gap__photo {
	border-radius: 24px;
	overflow: hidden;
	height: clamp(320px, 42vw, 560px);
}
.hmcb-gap__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translateY(var(--hmcb-img-shift, 0px)) scale(1.08);
	will-change: transform;
}
.hmcb-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 24px;
	margin-top: 40px !important;
	padding-top: 24px;
	border-top: 1px solid var(--border-subtle);
}
.hmcb-stats > * { margin: 0 !important; }
.hmcb-stat__num {
	font-weight: 700;
	font-size: clamp(34px, 3.6vw, 52px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--navy-700);
	font-variant-numeric: tabular-nums;
}
.hmcb-stat__label {
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-muted);
	margin-top: 8px !important;
}

/* ---------- Who we are ---------- */
.hmcb-who p { color: rgba(255, 255, 255, .82); }
.hmcb-who .hmcb-lead { color: #fff; }

/* ---------- Pillars ---------- */
.hmcb-pillars__list > .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 8vw, 120px);
	padding-bottom: 20vh;
}
/* Let the aside's inner wrapper fill the row so the sticky panel has room to travel. */
.hmcb-pillars__aside > .kt-inside-inner-col { flex: 1 1 auto; }
.hmcb-pillar {
	min-height: 40vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
.hmcb-pillar > * { margin: 0 !important; }
.hmcb-pillar__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--grey-100);
	color: var(--grey-500);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	transition: background 340ms var(--ease-out), color 340ms var(--ease-out);
}
.hmcb-pillar.is-active .hmcb-pillar__num {
	background: var(--green-500);
	color: var(--navy-700);
}
.hmcb-pillar__body { max-width: 56ch; }
.hmcb-panel {
	position: sticky;
	top: calc(120px + var(--wp-admin--admin-bar--height, 0px));
	height: min(560px, 70vh);
	border-radius: 24px;
	overflow: hidden;
	background: var(--surface-sunken);
}
.hmcb-panel__view {
	position: absolute !important;
	inset: 0;
	margin: 0 !important;
	opacity: 0;
	transition: opacity 520ms var(--ease-out);
	padding: clamp(24px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
.hmcb-panel__view.is-active { opacity: 1; }
.hmcb-panel:not(.is-live) .hmcb-panel__view:first-child { opacity: 1; }
.hmcb-panel__view.is-photo { padding: 0; }
.hmcb-panel__view.is-photo .wp-block-image,
.hmcb-panel__view.is-photo .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hmcb-panel__view.is-lift { gap: 20px; }
.hmcb-note {
	position: absolute;
	left: clamp(20px, 3vw, 40px);
	right: clamp(20px, 3vw, 40px);
	bottom: clamp(20px, 3vw, 40px);
	padding: 20px;
	background: rgba(255, 255, 255, .94);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-3);
	display: flex;
	align-items: center;
	gap: 16px;
}
.hmcb-note p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-heading);
}
.hmcb-note.is-split { justify-content: space-between; padding: 16px 20px; left: 24px; right: 24px; bottom: 24px; }
.hmcb-note .hmcb-mono {
	font-size: 13px;
	color: var(--green-700);
	white-space: nowrap;
}
.editor-styles-wrapper .hmcb-panel,
.editor-styles-wrapper .hmcb-step__visual { height: auto; position: relative; }
.editor-styles-wrapper .hmcb-panel__view { position: relative !important; opacity: 1; }
.editor-styles-wrapper .hmcb-note { position: relative; left: auto; right: auto; bottom: auto; }

/* Rule rows (pillar panel + step 1) */
.hmcb-rule {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 16px 20px;
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
}
.hmcb-rule.has-shadow { box-shadow: var(--shadow-1); }
.hmcb-rule > * { margin: 0 !important; }
.hmcb-rule .hmcb-badge { white-space: normal; }
.hmcb-rule__who {
	font-size: 13px;
	line-height: 1.4;
	color: var(--text-muted);
}
.hmcb-rule__what {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-heading);
	margin-top: 2px !important;
}

/* Bar rows (participation lift + dashboard). Bars are drawn by canvas.js from the numbers in the text. */
.hmcb-lift__row,
.hmcb-dash__row {
	margin: 0 !important;
}
.hmcb-lift__head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px !important;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-body);
}
.hmcb-lift__head > * { margin: 0 !important; }
.hmcb-lift__head .hmcb-mono { color: var(--text-heading); }
.hmcb-bar {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: var(--grey-200);
	overflow: hidden;
}
.hmcb-bar__from,
.hmcb-bar__to {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
}
.hmcb-bar__from { background: var(--grey-400); }
.hmcb-bar__to {
	background: var(--green-500);
	border-radius: 999px;
	transition: width 520ms var(--ease-out);
}
.hmcb-dash__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 52px;
	gap: 16px;
	align-items: center;
}
.hmcb-dash__row > * { margin: 0 !important; }
.hmcb-dash__label {
	display: block;
	font-size: 13px;
	line-height: 1.4;
	color: var(--text-body);
	margin-bottom: 6px !important;
}
.hmcb-dash__row .hmcb-bar { height: 8px; }
.hmcb-dash__row .hmcb-bar__to { transition: width 620ms var(--ease-out); }
.hmcb-dash__row.is-skip .hmcb-bar__to { background: var(--grey-400); }
.hmcb-dash__val {
	font-family: var(--font-mono);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: var(--text-heading);
	text-align: right;
}

/* ---------- Proof ---------- */
.hmcb-proof__brand {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px !important;
}
.hmcb-proof__brand > * { margin: 0 !important; }
.hmcb-proof__logo img {
	width: 140px;
	height: 40px;
	object-fit: cover;
	display: block;
}
.hmcb-proof__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.hmcb-proof__stats > * { margin: 0 !important; }
.hmcb-proof__nums {
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.hmcb-proof__nums > * { margin: 0 !important; }
.hmcb-proof__from {
	font-size: 20px;
	line-height: 1;
	color: var(--text-faint);
}
.hmcb-proof__big {
	font-size: clamp(36px, 4vw, 56px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--navy-700);
	font-variant-numeric: tabular-nums;
}
.hmcb-proof__big.is-green { color: var(--green-700); }
.hmcb-proof__note {
	margin: 24px 0 12px !important;
	font-size: 17px;
	line-height: 1.5;
	color: var(--text-body);
}
.hmcb-proof__label {
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-body);
	margin-top: 8px !important;
}
.hmcb-quote-card {
	margin: 0;
	padding: clamp(24px, 3vw, 40px);
	background: var(--surface-card);
	border-radius: 20px;
	box-shadow: var(--shadow-3);
}
.hmcb-quote.wp-block-quote {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
}
.hmcb-quote.wp-block-quote p {
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 400;
	line-height: 1.45;
	color: var(--text-heading);
	font-style: normal;
}
.hmcb-quote__by {
	display: flex;
	align-items: center;
	gap: 16px;
}
.hmcb-quote__by > * { margin: 0 !important; }
.hmcb-quote__by img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.hmcb-quote__by p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-muted);
}

/* ---------- How it works ---------- */
.hmcb-how__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 40px !important;
}
.hmcb-how__head > * { margin: 0 !important; }
.hmcb-dots {
	display: flex;
	gap: 8px;
}
.hmcb-dots button {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--border-subtle);
	background: var(--surface-card);
	color: var(--grey-600);
	font: 700 15px/1 var(--font-sans);
	cursor: pointer;
	transition: background 220ms var(--ease-out), color 220ms var(--ease-out);
}
.hmcb-dots button[aria-pressed="true"] {
	background: var(--green-500);
	color: var(--navy-700);
}
.hmcb-steps {
	display: grid;
	gap: 24px;
}
.hmcb-steps > .hmcb-step { margin: 0 !important; }
html.hmcb-js .hmcb-steps > .hmcb-step { grid-area: 1 / 1; }
html.hmcb-js .hmcb-steps:not(.is-live) > .hmcb-step:not(:first-child) { visibility: hidden; }
.hmcb-step {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 20px;
	align-items: stretch;
}
.hmcb-step > * { margin: 0 !important; }
.hmcb-steps.is-live > .hmcb-step {
	visibility: hidden;
	pointer-events: none;
}
.hmcb-steps.is-live > .hmcb-step.is-active {
	visibility: visible;
	pointer-events: auto;
}
.hmcb-steps.is-live > .hmcb-step .hmcb-step__visual {
	opacity: 0;
	transition: opacity 420ms var(--ease-out);
}
.hmcb-steps.is-live > .hmcb-step.is-active .hmcb-step__visual { opacity: 1; }
.hmcb-steps.is-live > .hmcb-step.is-active .hmcb-step__title { animation: hmcbUp 420ms var(--ease-out) both; }
.hmcb-steps.is-live > .hmcb-step.is-active .hmcb-step__body { animation: hmcbFade 520ms var(--ease-out) both; }
.hmcb-step__card {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: 24px;
	padding: clamp(24px, 3vw, 40px);
	box-shadow: var(--shadow-2);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 360px;
}
.hmcb-step__card > * { margin: 0 !important; }
.hmcb-step__card .hmcb-eyebrow { margin-bottom: 12px !important; }
.hmcb-step__title { margin-bottom: 16px !important; }
.hmcb-step__progress {
	margin-top: 24px !important;
	height: 3px;
	border-radius: 999px;
	background: var(--grey-100);
	overflow: hidden;
}
.hmcb-step__progress span {
	display: block;
	height: 100%;
	background: var(--green-500);
	transition: width 340ms var(--ease-out);
}
.hmcb-step__visual {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	min-height: 360px;
	background: var(--surface-sunken);
	padding: clamp(24px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}
.hmcb-step__visual > * { margin: 0 !important; }
.hmcb-step__visual.is-dash { gap: 16px; }
.hmcb-step__visual.is-photo { padding: 0; }
.hmcb-step__visual.is-photo > .wp-block-image {
	position: absolute;
	inset: 0;
}
.hmcb-step__visual.is-photo > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Choose your side ---------- */
.hmcb-sides__intro { margin-bottom: 40px; }
.hmcb-sides {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 20px;
}
.hmcb-sides > * { margin: 0 !important; }
.hmcb-side.wp-block-cover {
	height: 420px;
	min-height: 420px;
	border-radius: 24px;
	overflow: hidden;
	cursor: pointer;
	box-shadow: var(--shadow-2);
	padding: clamp(24px, 3vw, 40px);
	align-items: flex-end;
	transition: box-shadow 220ms var(--ease-out);
}
.hmcb-side.wp-block-cover:hover { box-shadow: var(--shadow-4); }
.hmcb-side .wp-block-cover__image-background {
	transition: transform 620ms var(--ease-out);
}
.hmcb-side.is-open .wp-block-cover__image-background { transform: translateY(-3%); }
.hmcb-side .wp-block-cover__inner-container {
	width: 100%;
	color: #fff;
}
.hmcb-side .wp-block-cover__inner-container > * { margin: 0 !important; }
.hmcb-side .hmcb-side__title { margin-bottom: 12px !important; }
.hmcb-side .hmcb-side__body { margin-bottom: 16px !important; }
.hmcb-side__body {
	font-size: 17px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .86);
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 520ms var(--ease-out), opacity 420ms var(--ease-out), margin 520ms var(--ease-out);
}
.hmcb-side.is-open .hmcb-side__body {
	max-height: 240px;
	opacity: 1;
}
.hmcb-side__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--green-500);
}
.hmcb-side__cta::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--hmcb-arrow) center / contain no-repeat;
	mask: var(--hmcb-arrow) center / contain no-repeat;
}
.hmcb-side__cta.is-open-label { display: none; }
.hmcb-side.is-open .hmcb-side__cta.is-closed-label { display: none; }
.hmcb-side.is-open .hmcb-side__cta.is-open-label { display: inline-flex; }
.editor-styles-wrapper .hmcb-side__body { max-height: none; opacity: 1; }
.editor-styles-wrapper .hmcb-side__cta.is-open-label { display: inline-flex; }

:root {
	--hmcb-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--hmcb-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}

/* ---------- Comparison table ---------- */
.hmcb-compare__intro { margin-bottom: 32px; }
.hmcb-table.wp-block-table {
	margin: 0;
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	background: var(--surface-card);
}
.hmcb-table table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: 15px;
	line-height: 1.5;
}
.hmcb-table th,
.hmcb-table td {
	border: 0;
	padding: 12px 16px;
	text-align: left;
	vertical-align: middle;
}
.hmcb-table thead {
	border: 0;
}
.hmcb-table thead th {
	white-space: nowrap;
	background: var(--surface-sunken);
	border-bottom: 1px solid var(--border-subtle);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--text-muted);
}
.hmcb-table tbody td {
	color: var(--text-body);
	border-bottom: 1px solid var(--border-subtle);
}
.hmcb-table tbody tr:last-child td { border-bottom: 0; }
.hmcb-table tbody tr:nth-child(even) { background: var(--grey-25); }
.hmcb-table figcaption { display: none; }

/* ---------- FAQ ---------- */
.hmcb-faq {
	border-bottom: 1px solid var(--border-subtle);
}
.hmcb-faq__item.wp-block-details {
	border-top: 1px solid var(--border-subtle);
	margin: 0 !important;
}
.hmcb-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 44px;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--text-heading);
	transition: color 220ms var(--ease-out);
}
.hmcb-faq__item summary::-webkit-details-marker { display: none; }
.hmcb-faq__item summary::marker { content: ""; }
.hmcb-faq__item summary::after {
	content: "";
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--green-700);
	-webkit-mask: var(--hmcb-plus) center / contain no-repeat;
	mask: var(--hmcb-plus) center / contain no-repeat;
	transition: transform 220ms var(--ease-out);
}
.hmcb-faq__item[open] summary { color: var(--green-800); }
.hmcb-faq__item[open] summary::after { transform: rotate(45deg); }
.hmcb-faq__item summary:focus-visible { box-shadow: var(--ring-focus); }
.hmcb-faq__item > :not(summary) {
	margin: 0 !important;
	padding: 0 0 24px;
	max-width: 68ch;
	font-size: 17px;
	line-height: 1.5;
	color: var(--text-body);
}
@supports (interpolate-size: allow-keywords) {
	.hmcb-faq { interpolate-size: allow-keywords; }
	.hmcb-faq__item::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size 340ms var(--ease-out), content-visibility 340ms allow-discrete;
	}
	.hmcb-faq__item[open]::details-content { block-size: auto; }
}

/* ---------- Final call to action ---------- */
.hmcb-cta.wp-block-cover {
	background-color: var(--navy-800);
	padding: 0;
	margin-top: clamp(64px, 10vw, 136px);
}
.hmcb-cta .wp-block-cover__image-background { opacity: .35; }
.hmcb-cta .wp-block-cover__inner-container {
	width: 100%;
	color: #fff;
}
.hmcb-cta__inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}
.hmcb-cta__inner > * { margin-left: auto !important; margin-right: auto !important; }
.hmcb-cta__lede {
	max-width: 58ch;
	color: rgba(255, 255, 255, .82);
}
.hmcb-cta__note {
	margin-top: 24px;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .66);
}
.hmcb-cta__demos {
	margin-top: 12px !important;
	font-size: 15px;
	line-height: 1.9;
	color: rgba(255, 255, 255, .66);
}
.hmcb-cta__demos span { margin: 0 8px; }
.hmcb-cta__demos a {
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid rgba(255, 255, 255, .4);
	padding-bottom: 1px;
}
.hmcb-cta__demos a:hover {
	color: #fff;
	text-decoration: none;
	border-bottom-color: #fff;
}

/* ---------- Site footer (footer-hmcb.php) ---------- */
/* The homepage's former in-content header and footer rows are replaced by the theme's. */
.hmcb-main > .hmcb-header,
.hmcb-main > .hmcb-footer { display: none !important; }

.hmcb-site-footer {
	background: var(--navy-800);
	border-top: 1px solid rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .66);
	font-family: var(--font-sans);
}
body:not(.page-template-page-canvas) .hmcb-site-footer { margin-top: clamp(64px, 10vw, 136px); }
.hmcb-site-footer__main {
	max-width: 1280px;
	margin: 0 auto;
	padding: 72px 32px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
}
.hmcb-site-footer__brand .custom-logo-link {
	display: inline-block;
	line-height: 0;
	margin-bottom: 20px;
}
.hmcb-site-footer__brand .custom-logo {
	display: block;
	width: auto;
	height: 36px;
	max-width: none;
}
.hmcb-site-footer__tag {
	margin: 0;
	max-width: 32ch;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .66);
}
.hmcb-site-footer__nav { grid-column: span 3; }
.hmcb-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}
.hmcb-footer-menu > li,
.hmcb-footer-menu .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.hmcb-footer-menu .sub-menu li { margin: 0; }
.hmcb-footer-menu__heading {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--sky-400);
}
.hmcb-footer-menu a {
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
}
.hmcb-footer-menu a:hover {
	color: #fff;
	text-decoration: underline;
}
.hmcb-site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.hmcb-site-footer__bottom-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 20px 32px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}
.hmcb-site-footer__bottom-inner p {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .55);
}
@media (max-width: 1024px) {
	.hmcb-site-footer__main {
		grid-template-columns: minmax(0, 1fr);
		padding: 56px 32px;
	}
	.hmcb-site-footer__nav { grid-column: auto; }
}
@media (max-width: 600px) {
	.hmcb-site-footer__main { padding: 40px 32px; }
	.hmcb-footer-menu { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Inner pages: hero band (blog, documents) ---------- */
.hmcb-page-hero {
	background: radial-gradient(360px circle at calc(100% - 160px) 100px, #2a3e75 0%, #1e1d56 70%);
	color: #fff;
}
.hmcb-page-hero__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 104px) 32px;
}
.hmcb-page-hero__eyebrow { margin-bottom: 16px !important; }
.hmcb-page-hero__title,
.hmcb-page-hero__content :is(h1, h2) {
	max-width: 20ch;
	margin: 0 0 16px;
	font-size: clamp(30px, 3.8vw, 52px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #fff;
}
.hmcb-page-hero__title:last-child { margin-bottom: 0; }
.hmcb-page-hero__content p,
.hmcb-page-hero__lede,
.hmcb-page-hero__lede p {
	max-width: 62ch;
	margin: 0;
	font-size: 20px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .82);
}

/* ---------- Blog index and related posts ---------- */
.hmcb-blog__list,
.hmcb-related {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 96px) 32px 0;
}
.hmcb-related__title {
	margin: 0 0 32px;
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.hmcb-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 24px;
}
.hmcb-post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-1);
	transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.hmcb-post-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-3);
}
.hmcb-post-card:focus-within { box-shadow: var(--ring-focus), var(--shadow-3); }
.hmcb-post-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--grey-100);
}
.hmcb-post-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hmcb-post-card__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px;
}
.hmcb-post-card__date {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--green-700);
}
.hmcb-post-card__title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}
.hmcb-post-card__title a {
	color: var(--text-heading);
	text-decoration: none;
}
.hmcb-post-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.hmcb-post-card__title a:focus-visible { box-shadow: none; }
.hmcb-post-card:hover .hmcb-post-card__title a { color: var(--sky-700); }
.hmcb-post-card__excerpt {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--text-body);
}
.hmcb-post-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sky-700);
}
.hmcb-post-card__more::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: var(--hmcb-arrow) center / contain no-repeat;
	mask: var(--hmcb-arrow) center / contain no-repeat;
}
.hmcb-blog .pagination { margin-top: 48px; }
.hmcb-blog .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.hmcb-blog .page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-subtle);
	border-radius: 22px;
	background: var(--surface-card);
	color: var(--text-body);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.hmcb-blog a.page-numbers:hover {
	border-color: var(--grey-300);
	color: var(--sky-700);
	text-decoration: none;
}
.hmcb-blog .page-numbers.current {
	background: var(--green-500);
	border-color: var(--green-500);
	color: var(--navy-800);
}
.hmcb-blog__empty { font-size: 17px; }

/* Call to action panel (blog index and posts) */
.hmcb-cta-panel {
	max-width: 1280px;
	margin: clamp(56px, 8vw, 96px) auto 0;
	padding: 0 32px;
}
.hmcb-cta-panel__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	padding: clamp(32px, 5vw, 64px);
	border-radius: 28px;
	background: var(--green-50);
}
.hmcb-cta-panel__content { max-width: 62ch; }
.hmcb-cta-panel__content :is(h1, h2, h3, h4) {
	margin: 0 0 8px;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.hmcb-cta-panel__content p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
}
.hmcb-cta-panel__content p + p { margin-top: 12px; }
.hmcb-footer-menu li {
	font-size: 15px;
	line-height: 1.5;
}
@media (max-width: 1023px) {
	/* A backdrop filter would trap the fixed menu panel inside the header bar. */
	.hmcb-site-header.is-open {
		background: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.hmcb-menu-toggle { margin-left: auto; }
}
.hmcb-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 52px;
	padding: 0 32px;
	border: 1px solid var(--green-500);
	border-radius: var(--radius-control);
	background: var(--green-500);
	box-shadow: var(--shadow-1);
	color: var(--navy-800);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.hmcb-button::after {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--hmcb-arrow) center / contain no-repeat;
	mask: var(--hmcb-arrow) center / contain no-repeat;
}
.hmcb-button:hover {
	background: var(--green-600);
	border-color: var(--green-600);
	color: #fff;
	text-decoration: none;
}

/* ---------- Blog post ---------- */
.hmcb-article__head {
	max-width: 864px;
	margin: 0 auto;
	padding: clamp(56px, 8vw, 96px) 32px 0;
}
.hmcb-article__head .hmcb-eyebrow {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}
.hmcb-article__head .hmcb-eyebrow a {
	color: inherit;
	text-decoration: none;
}
.hmcb-article__head .hmcb-eyebrow a:hover { text-decoration: underline; }
.hmcb-article__title {
	margin: 0;
	font-size: clamp(30px, 3.8vw, 48px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.hmcb-article__media {
	max-width: 1104px;
	margin: 40px auto 0 !important;
	padding: 0 32px;
}
.hmcb-article__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
}
.hmcb-article__body {
	max-width: 864px;
	margin: 0 auto;
	padding: 48px 32px 0;
}

/* ---------- Document pages (privacy policy, agreements) ---------- */
.hmcb-doc__body {
	max-width: 924px;
	margin: 0 auto;
	padding: clamp(48px, 6vw, 80px) 32px 0;
}

/* Long-form text */
.hmcb-prose {
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-body);
	overflow-wrap: break-word;
}
.hmcb-prose > * { margin-top: 0; margin-bottom: 0; }
.hmcb-prose > * + * { margin-top: 1.1em; }
.hmcb-prose :is(h1, h2) {
	margin-top: 1.8em;
	font-size: clamp(24px, 2.4vw, 30px);
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.hmcb-prose h3 {
	margin-top: 1.6em;
	font-size: 21px;
	line-height: 1.3;
}
.hmcb-prose :is(h4, h5, h6) {
	margin-top: 1.4em;
	font-size: 17px;
	line-height: 1.4;
}
.hmcb-prose :is(h1, h2, h3, h4, h5, h6) + * { margin-top: .6em; }
.hmcb-prose :is(ul, ol) { padding-left: 1.4em; }
.hmcb-prose li + li { margin-top: .4em; }
.hmcb-prose li > :is(ul, ol) { margin-top: .4em; }
.hmcb-prose a {
	color: var(--sky-700);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hmcb-prose a:hover { color: var(--sky-800); }
.hmcb-prose strong { color: var(--text-heading); }
.hmcb-prose img {
	height: auto;
	border-radius: var(--radius-card);
}
.hmcb-prose figure {
	margin-left: 0;
	margin-right: 0;
}
.hmcb-prose :is(figcaption, .wp-element-caption) {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--text-muted);
	text-align: center;
}
.hmcb-prose :is(blockquote, .wp-block-quote) {
	margin-left: 0;
	margin-right: 0;
	padding-left: 24px;
	border-left: 4px solid var(--green-500);
	font-size: 20px;
	line-height: 1.5;
	color: var(--text-heading);
}
.hmcb-prose :is(blockquote, .wp-block-quote) p { color: inherit; }
.hmcb-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.hmcb-prose :is(th, td) {
	padding: 10px 12px;
	border-bottom: 1px solid var(--border-subtle);
	text-align: left;
	vertical-align: top;
}
.hmcb-prose hr {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid var(--border-subtle);
}

/* ---------- Contact page ---------- */
.hmcb-contact__alt {
	margin-top: 24px !important;
	font-size: 17px;
	line-height: 1.6;
}
.hmcb-contact__alt a {
	font-weight: 600;
	color: var(--sky-700);
}
.hmcb-contact-card {
	padding: clamp(24px, 3vw, 40px);
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: 20px;
	box-shadow: var(--shadow-3);
}
.hmcb-contact-form .wpcf7-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
}
.hmcb-contact-form .contact__form--full,
.hmcb-contact-form .contact__form--submit,
.hmcb-contact-form .wpcf7-response-output { grid-column: 1 / -1; }
.hmcb-contact-form .contact__form--input {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 8px;
}
.hmcb-contact-form .contact__form--input > label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--text-heading);
}
.hmcb-contact-form .contact__form--input > span:not(.wpcf7-form-control-wrap) {
	font-size: 13px;
	color: var(--text-muted);
}
.hmcb-contact-form .wpcf7-form-control-wrap { flex: 1 0 100%; }
.hmcb-contact-form :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	width: 100%;
	min-height: 48px;
	padding: 11px 14px;
	border: 1px solid var(--grey-300);
	border-radius: var(--radius-control);
	background: #fff;
	color: var(--text-heading);
	font: 400 17px/1.5 var(--font-sans);
	transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.hmcb-contact-form textarea {
	display: block;
	min-height: 168px;
	resize: vertical;
}
.hmcb-contact-form :is(input, textarea)::placeholder { color: var(--grey-400); }
.hmcb-contact-form :is(input, textarea):focus {
	outline: none;
	border-color: var(--sky-500);
	box-shadow: var(--ring-focus);
}
.hmcb-contact-form .wpcf7-not-valid { border-color: #c4320a; }
.hmcb-contact-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 13px;
	color: #c4320a;
}
.hmcb-contact-form .contact__form--submit {
	display: flex;
	align-items: center;
	gap: 12px;
}
.hmcb-contact-form .wpcf7-submit {
	height: 52px;
	padding: 0 32px;
	border: 1px solid var(--green-500);
	border-radius: var(--radius-control);
	background: var(--green-500);
	box-shadow: var(--shadow-1);
	color: var(--navy-800);
	font: 700 20px/1 var(--font-sans);
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.hmcb-contact-form .wpcf7-submit:hover {
	background: var(--green-600);
	border-color: var(--green-600);
	color: #fff;
}
.hmcb-contact-form .wpcf7-response-output {
	margin: 0 !important;
	padding: 12px 16px !important;
	border-radius: var(--radius-control);
	font-size: 15px;
	line-height: 1.5;
}
@media (max-width: 600px) {
	.hmcb-contact-form .wpcf7-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Motion ---------- */
@keyframes hmcbUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes hmcbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hmcbTrack { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hmcbPan { from { translate: 0 0; } to { translate: -4% 0; } }

.hmcb-anim-up { animation: hmcbUp 760ms var(--ease-out) both; }
.hmcb-anim-fade { animation: hmcbFade 700ms var(--ease-out) both; }
.hmcb-delay-1 { animation-delay: 120ms; }
.hmcb-delay-2 { animation-delay: 220ms; }
.hmcb-delay-3 { animation-delay: 320ms; animation-duration: 860ms; }

/* Scroll reveal: hidden only once canvas.js has started (html.hmcb-js). */
html.hmcb-js .hmcb-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 620ms var(--ease-out) var(--hmcb-delay, 0ms), transform 620ms var(--ease-out) var(--hmcb-delay, 0ms), box-shadow 220ms var(--ease-out);
}
html.hmcb-js .hmcb-reveal.is-visible {
	opacity: 1;
	transform: none;
}
html.hmcb-js .hmcb-outcome.hmcb-reveal.is-visible:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
	.hmcb-anim-up, .hmcb-anim-fade { animation: none; }
	html.hmcb-js .hmcb-reveal { opacity: 1; transform: none; transition: none; }
	.hmcb-types__track.is-running .kt-svg-icon-list { animation: none; }
	.hmcb-hero .wp-block-cover__image-background { transform: none; animation: none; }
	html:has(body.hmcb-canvas) { scroll-behavior: auto; }
}