/*
 * Heartland Surveys — frontend styles.
 * Heartland Dental Blue (#041E41) is the primary color; the accent is a
 * brighter button blue. Both are exposed as CSS variables on the survey
 * wrapper so individual configs can override per-instance.
 */
.survey-enabled {

	header.l-header, footer.l-footer-v2 { display: none; }
	.main { min-height: min-content; }
	.main > :first-child { margin-top: 0 !important; }
	.c-sticky-scroll-menu { display: none;}
	img {margin-top: 0; margin-bottom: 0; }

	/* The page content leaves an empty paragraph block after the shortcode (`<p class="wp-block-paragraph"></p>`). */
	.main > p:empty { display: none; }
	/* Fallback for a "blank" paragraph that isn't strictly :empty (a stray &nbsp; or <br>): it can still hold a line box, but it must not add vertical space of its own. */
	.main > .hls-survey ~ * { margin-top: 0; margin-bottom: 0; }
}

.hls-survey {
	--hls-primary: #041E41;
	--hls-accent: #1E73BE;
	--hls-radius: 12px;
	--hls-border: #E1E4EA;
	--hls-border-dark: #0065AE;
	--hls-bg: #FFFFFF;
	--hls-text: #1A1F2B;
	--hls-muted: #5C6578;
	--hls-success: #082B4E;
	--hls-warn: #E89B2B;
	--hls-danger: #C03A4F;
	--hls-gray-light: #F3F3F3;
	--hls-gray-ice: rgba(210, 208, 206, 1);
	--hls-gray-lead: #545861;
	--hls-black: #000000;
	--hls-hover: #EAEAEA;
	/* Chrome that remains visible above/below the survey. `.survey-enabled`
	   hides the theme header + footer, so it's 0 by default; a template that
	   keeps something on screen can override it per-instance. */
	--hls-viewport-offset: 0px;

	color: var(--hls-text);
	width: 100%;
	margin: 0 auto;
	line-height: 1.5;

	/* Fill at least the viewport, then grow with the content. svh (fallback vh)
	   so mobile browser chrome doesn't push the survey past the visible area. */
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--hls-viewport-offset));
	min-height: calc(100svh - var(--hls-viewport-offset));

	a { color: var(--hls-accent); }
}
.hls-survey * { box-sizing: border-box; margin-top: 0; }

.hls-survey.ungated { display: none; }

/* Screens are rendered one at a time into .hls-mount, so both links in the
   chain have to grow for the active screen to inherit the full height. */
.hls-mount {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.hls-mount > * { flex: 1 1 auto; }

.hls-card {
	background: var(--hls-bg);
	/* border: 1px solid var(--hls-border); */
	border-radius: var(--hls-radius);
	max-width: 1100px;
	padding: 32px 40px;
	margin: 0 auto 60px;
	box-shadow: 0 6px 20px rgba(4, 30, 65, 0.06);
}

.hls-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	color: var(--hls-accent);
	font-weight: 700;
	margin-bottom: 8px;
}
.hls-headline { font-size: 28px; line-height: 1.2; margin: 0 0 12px; color: var(--hls-primary); font-weight: 700; }
.hls-sub { font-size: 16px; margin: 0 0 16px; color: var(--hls-text); }
.hls-sub.strong { font-weight: 600; font-size: 17px; color: var(--hls-text); }
.hls-body { font-size: 15px; color: var(--hls-muted); margin: 0 0 24px; max-width: 640px; }

/* Intro screen — navy two-column hero matching Figma "Start" */
.hls-intro {
	overflow: visible;
}
.hls-intro-card {
	background: var(--hls-primary);
	color: #fff;
	border-radius: 0;
	padding: 0;
	max-width: none;
	margin: 0 auto;
	box-shadow: none;
	overflow: hidden;
	/* Column flex so the two-column hero below absorbs the leftover height
	   under the logo bar and the navy fills the viewport. */
	display: flex;
	flex-direction: column;
}
.hls-intro-logo-bar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 24px 120px;
	background: var(--hls-primary);
}
.hls-intro-logo {
	max-height: 48px;
	width: auto;
	display: block;
	margin: 0 !important;
}
@media (max-width: 720px) {
	.hls-intro-logo-bar { padding: 24px 20px 18px; }
	.hls-intro-logo { max-height: 36px; }
}

.hls-intro-screen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 0;
	/* Grows into whatever the viewport leaves after the logo bar; 660px stays
	   the floor so the hero never collapses on short viewports. */
	flex: 1 1 auto;
	min-height: 660px;
	padding-bottom: 80px;
}
@media (max-width: 900px) {
	.hls-intro-screen { grid-template-columns: 1fr; }
}

.hls-intro-media {
	position: relative;
	overflow: hidden;
	min-height: 320px;
}
.hls-intro-hero {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0 !important;
	border-radius: 0 10px 10px 0;
}

.hls-intro-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 56px 80px 56px 60px;
	color: #fff;
}

.hls-intro-content .hls-eyebrow { color: #6FB4F5; margin-bottom: 12px; }

.hls-intro-headline, h1.hls-intro-headline {
	font-size: 34px;
	font-style: normal;
	line-height: 40px;
	margin: 0 0 18px;
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.hls-intro-subhead {
	font-size: 18px;
	line-height: 1.4;
	margin: 0 0 18px;
	color: #fff;
	font-weight: 600;
}
.hls-intro-body {
	font-size: 14px;
	line-height: 1.7;
	margin: 0 0 20px;
	color: rgba(255,255,255,0.88);
}

.hls-intro-expect { margin-bottom: 20px; padding: 20px 40px; }
.hls-intro-expect-title, h3.hls-intro-expect-title {
	font-size: 18px;
	margin: 0 0 14px;
	color: #fff;
	font-weight: 700;
}
.hls-intro-expect-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
img.hls-intro-check { 
	margin: 0;
}
.hls-intro-expect-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255,255,255,0.95);
}
.hls-intro-check {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	margin-top: 1px;
	display: block;
}
.hls-intro-check-fallback {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #6FE5A0;
	font-weight: 800;
	flex-shrink: 0;
}
.hls-intro-expect-text { flex: 1; }

/* "Start Assessment" CTA — matches Figma (491:5244): white pill, navy text,
   12px Demi Bold, navy chevron. Selector is specificity-bumped so it wins over
   the later .hls-btn base rule. */
.hls-survey .hls-intro-cta {
	align-self: flex-start;
	width: 200px;
	background: #fff;
	color: var(--hls-primary);
	padding: 10px 15px 10px 20px;
	border-radius: 30px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18px;
	line-height: normal;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-shadow: none;
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.hls-survey .hls-intro-cta::after, .hls-results-footer-nav .hls-btn::after {
	content: '';
	width: 24px;
	height: 24px;
	flex: none;
	background: url('../icons/next.svg') center / contain no-repeat;
}
.hls-survey .hls-intro-cta:hover {
	background: var(--hls-hover);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(4, 30, 65, 0.18);
}

.hls-intro-disclaimer {
	padding: 30px 0px 28px;
	font-size: 11px;
	line-height: 1.6;
	color: rgba(255,255,255,0.55);
	margin: 0;
}

@media (max-width: 900px) {
	.hls-intro-logo-bar { padding-bottom: 60px; }
	.hls-intro-media { padding: 0 60px; }
	.hls-intro-hero { border-radius: 10px; }
	.hls-intro-expect { padding: 20px 0; }
}
@media (max-width: 720px) {
	.hls-intro-media { padding: 0 24px; }
	.hls-intro-content { padding: 25px 24px 40px; }
	.hls-intro-disclaimer { padding: 16px 0 24px; }
}


/* Step layout — header / card / footer are siblings, not nested in the card */
.hls-step-layout { display: flex; flex-direction: column; gap: 24px; }
.hls-step-header { text-align: center; padding: 0 40px; }
.hls-step-header .hls-progress { padding: 40px 0 80px; }

.hls-step-pill {
	display: inline-block;
	border: 1px solid var(--hls-border);
	border-radius: 999px;
	padding: 6px 16px;
	font-size: 9px;
	letter-spacing: 2.25px;
	text-transform: uppercase;
	color: var(--hls-gray-lead);
	font-weight: 500;
	margin: 0 auto 16px;
	background: #fff;
}
.hls-step-title { font-size: 38px; line-height: 48px; margin: 0 auto 10px !important; color: var(--hls-primary); max-width: 1100px; font-weight: 500; }
.hls-step-sub { font-size: 16px; line-height: 22px; color: var(--hls-muted); margin: 0 auto; max-width: 1100px; }

@media (max-width: 720px) {
	.hls-step-header { padding: 0 24px; }
	.hls-step-header .hls-progress { padding: 15px 0 25px; }
	.hls-step-pill { display: none; }
}

/* Footer nav bar — fixed navy bar pinned to the bottom of the viewport,
   housing back/next buttons. Content gets bottom padding (below) so the
   bar never overlaps it. */
.hls-step-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--hls-primary);
	padding: 14px 24px;
	box-shadow: 0 -4px 20px rgba(4, 30, 65, 0.12);
	z-index: 10;
}
/* Reserve space so the fixed footer never covers the last of the content. */
.hls-step-layout { padding-bottom: 96px; }
.hls-step-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 1100px;
	margin: 0 auto;
}
.hls-step-footer-spacer { display: inline-block; width: 1px; }
.hls-step-footer .hls-btn-ghost { color: #fff; }
.hls-step-footer .hls-btn-ghost:hover { background: rgba(255,255,255,0.08); }
.hls-step-footer .hls-btn-primary {
	background: #fff;
	color: var(--hls-primary);
	opacity: 0.65;
	cursor: not-allowed;
	transition: background 180ms ease, color 180ms ease, opacity 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.hls-step-footer .hls-btn-primary:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.20); }
.hls-step-footer .hls-btn-primary.is-ready {
	/* background: var(--hls-accent);
	color: #fff; */
	opacity: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(30, 115, 190, 0.45);
}
.hls-step-footer .hls-btn-primary.is-ready:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(30, 115, 190, 0.55); }

/* Progress — segmented pill bar, one segment per step (matches Figma) */
.hls-progress {
	width: 100%;
	margin: 0 auto;
	display: flex;
	gap: 8px;
}
.hls-progress-seg {
	flex: 1 1 0;
	height: 6px;
	border-radius: 999px;
	background: #EAECF1;
	transition: background 250ms ease;
}
.hls-progress-seg.is-complete,
.hls-progress-seg.is-current {
	background: var(--hls-accent);
	box-shadow: 0 2px 6px rgba(30, 115, 190, 0.35), 0 1px 2px rgba(4, 30, 65, 0.15);
}

/* Form */
.hls-form { display: flex; flex-wrap: wrap; gap: 16px; text-align: left; }
.hls-field { display: flex; flex-direction: column; gap: 15px; width: 100%; padding-bottom: 30px;}
.hls-field--half { width: calc(50% - 8px); }
@media (max-width: 720px) { 
	.hls-field { padding-bottom: 0px; }
	.hls-field--half { width: 100%; } 
}
.hls-label { font-weight: 500; font-size: 16px; line-height: 24px; color: var(--hls-black); }
/* Structural h2 around question-style labels (`heading: true` in the survey JSON) - the inner .hls-label carries all styling. */
.hls-question-heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.hls-field-desc { font-size: 13px; color: var(--hls-muted); margin: -2px 0 4px; }
.hls-field--checkbox { padding-bottom: 0; margin-bottom: -16px; }

/* Mobile question carousel (Figma 52:5792) — one question per slide. The nav
   (arrows + "Question X / N") is hidden by default and only the mobile rules
   below reveal it; JS toggles `.is-carousel` on the form at ≤720px. */
.hls-carousel-nav { display: none; }
@media (max-width: 720px) {
	.hls-card.hls-step {
		overflow: hidden;
		padding-left: 24px;
		padding-right: 24px;
		/* The card is a flex item of .hls-step-layout, so it defaults to
		   min-width:auto and refuses to shrink below its content's intrinsic
		   width. The nowrap carousel makes that intrinsic width exceed the
		   viewport, ballooning the card (and the 100%-wide form/slides) wider
		   than the screen — slides get clipped. min-width:0 lets the card track
		   the viewport instead. */
		min-width: 0;
		max-width: 100%;

		.hls-form { padding: 0 20px; }
		.hls-disclaimer { padding-top: 20px; }
	}
	/* Peek carousel (Figma "Step 2 - Mobile", node 79:6359): each question is its
	   own white card. One card is fully visible with a 24px left margin, and the
	   next card peeks past a 16px gap. The outer step card becomes a transparent,
	   clipping viewport; the white-card styling + padding move onto each slide. */
	.hls-card.hls-step:has(.hls-form.is-carousel) {
		background: transparent;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 20px; /* room so slide drop-shadows aren't clipped below */
	}
	.hls-form.is-carousel {
		flex-wrap: nowrap;
		gap: 16px;
		width: 100%;
		max-width: 100%;
		align-items: flex-start; /* cards keep their natural height; JS sets the
		   track height to the active card so the nav sits right beneath it */
		/* Distance to advance per slide, as a fraction of the track's own width:
		   one card (100% − 24px left pad − 51px reserve = 100% − 75px) + 16px gap
		   = 100% − 59px. The JS transform multiplies this by the slide index. It's
		   expressed relative to the track width (not a measured pixel offset) so it
		   stays correct even when applied during render(), before the rebuilt step
		   is attached and laid out. Keep in sync with the field flex-basis + gap. */
		--hls-slide-advance: calc(100% - 59px);
		transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), height 250ms ease;
		will-change: transform;
	}
	/* 24px left margin before the first card. The selector matches the nested
	   `.hls-card.hls-step .hls-form { padding }` specificity (0,3,0) so it wins. */
	.hls-card.hls-step .hls-form.is-carousel { padding: 0 0 0 24px; }
	.hls-form.is-carousel > .hls-field {
		/* Card scales with the viewport but reserves 51px against the form's
		   content box (viewport − 24px left pad): 16px gap + ~35px peek of the
		   next card. On a 375px screen this yields the Figma 300px card. */
		flex: 0 0 calc(100% - 51px);
		min-width: 0;
		box-sizing: border-box;
		overflow-wrap: anywhere;
		/* white question card */
		background: #fff;
		border: 0.5px solid #f3f3f3;
		border-radius: 8px;
		box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.04);
		padding: 30px 20px;
	}
	/* Inside a carousel card, stack radio/checkbox options one per line rather
	   than wrapping them into multiple pills per row (Figma "Step 2 - Mobile"). */
	.hls-form.is-carousel .hls-options {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
	}
	.hls-carousel-nav {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-top: 24px;
	}
	.hls-carousel-counter {
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.18px;
		color: var(--hls-gray-lead);
		white-space: nowrap;
	}
	.hls-carousel-arrow {
		width: 24px;
		height: 24px;
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--hls-primary);
		cursor: pointer;
	}
	.hls-carousel-arrow:disabled { opacity: 0.3; cursor: default; }
	.hls-carousel-arrow svg { width: 100%; height: 100%; display: block; }
}

.hls-input {
	border: 1px solid var(--hls-border);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 14px;
	font-family: inherit;
	font-weight: 400;
	line-height: 24px;
	background: #F4F6FA;
	color: var(--hls-text);
	width: 100%;
	transition: background 140ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.hls-input:focus,
.hls-input.is-filled,
.hls-input:not(:placeholder-shown) {
	background: #fff;
	border-color: var(--hls-border);
}
/* Active/focus state - Figma (491:4002): light-grey border + soft drop shadow; outline suppressed for pointer focus only, keyboard keeps the ring (2.4.7). */
.hls-input:focus { border-color: var(--hls-gray-light); box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.04); }
.hls-input:focus:not(:focus-visible) { outline: none; }
.hls-textarea { resize: vertical; min-height: 80px; }

@media (max-width: 540px) {
	.hls-input, .hls-textarea {
		font-size: 16px;
	}
}

/* Dropdown — chevron-down icon + gray placeholder text (Figma 10:8337).
   Selector is specificity-bumped (.hls-survey .hls-select) so the chevron
   survives the `background:` shorthand on .hls-input:not(:placeholder-shown),
   which always matches <select> and would otherwise reset background-image. */
.hls-survey .hls-select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url('../icons/chevron-down.svg');
	background-repeat: no-repeat;
	background-position: calc(100% - 15px) center;
	background-size: 14px 8px;
	padding-right: 40px;
}
.hls-survey .hls-select.is-placeholder { color: #747474; }

/* Pill-style radio options */
.hls-options { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.hls-options--checkbox_cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.hls-option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 999px;
	cursor: pointer;
	background: #fff;
	transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
	font-size: 14px;
}
.hls-options--checkbox_cards .hls-option { border-radius: 10px; justify-content: flex-start; }
.hls-option:hover { border-color: var(--hls-accent); }
.hls-option.is-selected {
	border: 1.5px solid var(--hls-border);
	background: rgba(249, 250, 251, 1); /*rgba(30, 115, 190, 0.08);*/
	color: var(--hls-primary);
	font-weight: 600;
}
.hls-option input { accent-color: var(--hls-accent); margin: 0; }
.hls-option-label { font-weight: 600; font-size: 12px; color: var(--hls-primary); }

@media (max-width: 720px) {
	.hls-option.is-selected { width: 100%; }
}


/* Checkbox row (single checkbox with label + description) */
.hls-checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: 8px;
	cursor: pointer;
}
.hls-checkbox-row input { margin-top: 3px; accent-color: var(--hls-accent); flex-shrink: 0; }
.hls-checkbox-body { font-size: 13px; }
.hls-checkbox-label { font-weight: 600; color: var(--hls-text); }
.hls-checkbox-desc { font-size: 12px; color: var(--hls-muted); margin-top: 4px; }

.hls-btn {
	border: 0;
	border-radius: 999px;
	padding: 13px 28px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18px;
	cursor: pointer;
	font-family: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
}
.hls-btn-primary { background: var(--hls-accent); color: #fff; }
.hls-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(30, 115, 190, 0.30); }
.hls-btn-ghost { background: transparent; color: var(--hls-primary); border: 1.5px solid transparent; padding-left: 8px; }
.hls-nav-icon { width: 18px; height: 18px; flex: none; }
.hls-btn-outline { background: #fff; color: var(--hls-primary); border: 1.5px solid var(--hls-primary); }
.hls-btn-outline:hover { background: var(--hls-primary); color: #fff; }

/* "Email Me a Copy" pill — Figma 491:4633 */
.hls-btn-email {
	background: rgba(4, 30, 65, 0.05);
	color: var(--hls-primary);
	border: 2px solid var(--hls-primary);
	border-radius: 30px;
	padding: 10px 25px;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18px;
	display: flex; 
	width: 200px; 
	margin: 10px auto 0; 
	justify-content: center;
}
.hls-btn-email:hover { background: var(--hls-primary); color: #fff; }
.hls-btn-email:hover .hls-btn-icon { filter: brightness(0) invert(1); }
.hls-btn-icon { width: 24px; height: 24px; flex: none; }

.hls-link { background: none; border: 0; color: #fff; cursor: pointer; font-family: inherit; font-size: 14px; padding: 8px 0; }

/* ─── Keyboard focus visibility (WCAG 2.4.7) ─────────────────────────────────
   One shared ring, keyboard/non-pointer focus only - Figma pointer states above stay untouched. */
.hls-survey :focus-visible {
	outline: 3px solid var(--hls-accent);
	outline-offset: 2px;
}
/* One indicator per control: the pill/row carries the ring, so kill the inner input's own outline and box-shadow (ours, UA, or theme ring) - otherwise they stack into a double focus ring. */
.hls-survey .hls-option input:focus,
.hls-survey .hls-checkbox-row input:focus {
	outline: none;
	box-shadow: none;
}
.hls-option:has(input:focus-visible),
.hls-checkbox-row:has(input:focus-visible) {
	outline: 3px solid var(--hls-accent);
	outline-offset: 2px;
}
/* The accent ring fails contrast on navy - use white there. */
.hls-intro-card :focus-visible,
.hls-step-footer :focus-visible,
.hls-results-footer-nav :focus-visible { outline-color: #fff; }
/* Programmatic focus targets on screen transitions (focusScreenTop: progress bar / headings) - not interactive, so no ring. */
.hls-mount [tabindex="-1"]:focus { outline: none; }

/* Scroll-on-focus must clear the fixed footer nav (WCAG 2.4.11); the focusin watcher in survey.js covers browsers that ignore scroll-margin on focus. */
.hls-survey a,
.hls-survey button,
.hls-survey input,
.hls-survey select,
.hls-survey textarea {
	scroll-margin-top: 24px;
	scroll-margin-bottom: 110px; /* fixed footer (~70px) + breathing room */
}

/* Reduced motion - programmatic scrolling switches to behavior:auto in survey.js. */
@media (prefers-reduced-motion: reduce) {
	.hls-survey *,
	.hls-survey *::before,
	.hls-survey *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* Errors */
.hls-error-msg { color: #B0263F; font-size: 12px; margin-top: 4px; }
.hls-error { color: #B0263F; padding: 12px; }

/* ─── Scorecard results ──────────────────────────────────────────────────── */
.hls-scorecard { padding: 24px 0 60px; max-width: 1100px; margin: 0 auto; }
.hls-scorecard-title {
	font-size: 56px;
	text-align: center;
	color: var(--hls-primary);
	margin: 0 0 32px;
	font-weight: 300;
	letter-spacing: -0.01em;
	line-height: 62px;
}
.hls-scorecard-title strong { font-weight: 700; }
.hls-scorecard .hls-section-heading h4 { font-size: 22px; }

@media (max-width: 800px) {
	.hls-intro {
		.hls-intro-cta { width: 100%; justify-content: center; }
	}
	.hls-scorecard {
		padding: 24px 24px 60px;

		.hls-cta-card { text-align: center; }
		.hls-disclaimer { text-align: center; }		
		.hls-btn-email { width: 100%; justify-content: center; }
	}
 }

/* Top headline banner — color + icon vary by headline_id */
.hls-headline-banner {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	color: #fff;
	border-radius: 14px;
	padding: 28px 32px;
	margin-bottom: 32px;
	box-shadow: 0 8px 28px rgba(4, 30, 65, 0.14);
	transition: background 200ms ease;
}
.hls-headline-banner--strong,
.hls-headline-banner--default {
	background-color: #004D83;
}
.hls-headline-banner--balanced,
.hls-headline-banner--solid {
	background-color: var(--hls-gray-lead);
}
.hls-headline-banner--improvement {
	background-color: #082B4E;
}

.hls-headline-icon {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	align-self: center;
	line-height: 1;

	transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.hls-headline-icon svg,
.hls-headline-icon img {
	width: 100%;
}

.hls-headline-title, h3.hls-headline-title { font-size: 28px; margin: 4px 0 10px; font-weight: 600; line-height: 40px; color: #fff; }
.hls-headline-desc { font-size: 14px; opacity: 0.95; margin: 0; line-height: 1.6; }

/* Save or share card */
.hls-share {
	background: #fff;
	border: 1px solid var(--hls-border);
	border-radius: 12px;
	padding: 20px 24px;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	margin-bottom: 24px;
}
.hls-share h4 { font-size: 17px; margin: 0 0 4px; color: var(--hls-primary); font-weight: 700; }
.hls-share p { font-size: 13px; margin: 0; color: var(--hls-muted); }

/* Section card */
.hls-section {
	background: #fff;
	border: 1px solid var(--hls-border);
	border-radius: 14px;
	padding: 28px;
	margin-bottom: 16px;
	box-shadow: 0 2px 10px rgba(4, 30, 65, 0.04);
}
.hls-section-head {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding-bottom: 20px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--hls-border);
}
.hls-section-heading { display: flex; align-items: center; gap: 16px; }
.hls-section-icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
}
.hls-section-icon img,
.hls-section-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.hls-section-text h4 { font-size: 18px; margin: 0 0 4px; color: var(--hls-primary); font-weight: 700; }
.hls-section-text p { font-size: 13px; margin: 0; color: var(--hls-muted); line-height: 1.5; }
.hls-section-badge {
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	background: var(--hls-gray-light);
}

/* Collapsible body — when collapsed, show only the first row of cards (3 cards) */
.hls-section-body { overflow: hidden; transition: max-height 250ms ease; }
.hls-section.is-collapsed .hls-card-grid > .hls-result-card:nth-child(n+4) { display: none; }

/* Card grid — 3 columns on desktop, responsive */
.hls-card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
@media (max-width: 800px) { .hls-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.hls-card-grid { grid-template-columns: 1fr; }
	/* Stack the icon above the body and center the banner text. */
	.hls-headline-banner {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

.hls-result-card {
	background: #fff;
	border: 1px solid var(--hls-border);
	border-radius: 10px;
	padding: 18px 20px;
	display: flex; flex-direction: column; gap: 8px;
	min-height: 0;
}
.hls-result-card h4 { font-size: 16px; margin: 0; color: var(--hls-primary); font-weight: 500; line-height: 1.3; }
.hls-result-card p { font-size: 12.5px; margin: 0; color: var(--hls-muted); line-height: 1.55; }

/* View More / View Less toggle — full-width card-bottom bar (Figma 23:9538) */
.hls-section-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* Full-bleed: span the section content width plus its 28px padding on each
	   side so the bar reaches the card edges. calc() (not width:auto) so a
	   <button>'s intrinsic shrink-wrap can't keep it narrow. */
	width: calc(100% + 56px);
	margin: 28px -28px -28px;
	padding: 20px;
	border: 0;
	border-top: 1px solid #D2D0CE;
	border-radius: 0 0 14px 14px;
	background: #F9FAFB;
	color: var(--hls-primary);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18px;
	line-height: normal;
	cursor: pointer;
	transition: background 120ms ease;
}
.hls-section-toggle:hover { background: #F1F3F6; }
.hls-section-toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	flex: none;
}
.hls-section-toggle-icon svg { display: block; width: 24px; height: 24px; }

/* Final footer CTA card */
.hls-cta-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--hls-border);
	border-radius: 14px;
	padding: 28px;
	margin-top: 24px;
	box-shadow: 0 2px 10px rgba(4, 30, 65, 0.04);
}
.hls-cta-card h4 { font-size: 19px; margin: 0 0 8px; color: var(--hls-primary); font-weight: 700; }
.hls-cta-card > p { font-size: 14px; color: var(--hls-muted); margin: 0 0 18px; }
.hls-cta-card .hls-checkbox-row { margin-bottom: 14px; border: 1px solid var(--hls-border); transition: border-color 120ms ease; }
/* connect_specialist checked → darken the row outline */
.hls-cta-card .hls-checkbox-row:has(input:checked) { border-color: var(--hls-border-dark); }
.hls-cta-card .hls-btn-primary  { margin-top: 10px; background: var(--hls-accent); color: #fff; opacity: 1; cursor: pointer; }
.hls-cta-card .hls-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(30, 115, 190, 0.40); }
/* Mobile: disclaimer sits in-flow, centered above the button (Figma 79:5620). */
.hls-cta-card .hls-disclaimer, .hls-step .hls-disclaimer { text-align: left; font-size: 11px; color: var(--hls-muted); margin-top: 12px; position: relative; }
.hls-cta-card .hls-disclaimer::before {
	content: "";
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	margin-right: 6px;
	vertical-align: -0.2em;
	background-image: url('../icons/info.svg');
	background-repeat: no-repeat;
	background-size: contain;
}
/* Desktop: disclaimer moves up beside the headline, pinned top-right (Figma 491:4619). */
@media (min-width: 800px) {
	.hls-cta-card .hls-disclaimer {
		position: absolute;
		top: 28px;
		right: 28px;
		margin-top: 0;
		text-align: right;
	}
}

/* Step-card disclaimer (e.g. Step 1 lead form) + gated-form disclaimer — lock icon */
.hls-step .hls-disclaimer,
.hls-gate .hls-disclaimer {
	position: relative;
	padding-left: calc(1.2em + 6px);
}
.hls-step .hls-disclaimer::before,
.hls-gate .hls-disclaimer::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.2em;
	height: 1.2em;
	background-image: url('../icons/lock.svg');
	background-repeat: no-repeat;
	background-size: contain;
}

/* Understanding box */
/* Understanding box — Figma 96:11446: light-grey card, info icon + title row, body below */
.hls-understanding {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--hls-gray-light);
	border-radius: 8px;
	padding: 40px;
	margin-top: 16px;
}
.hls-understanding-head { display: flex; align-items: center; gap: 15px; }
.hls-understanding-icon {
	flex: none;
	width: 24px;
	height: 24px;
	background: url('../icons/info.svg') center / contain no-repeat;
}
.hls-understanding-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
	color: var(--hls-text);
}
.hls-understanding-body {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	color: var(--hls-text);
}
#hls-footer-cta { margin-top: 60px; }

/* Results fine-print disclaimer — sits below the footer CTA, above the fixed
   footer nav. Extra bottom margin keeps the last line clear of the sticky bar. */
.hls-results-disclaimer {
	margin: 60px 0;
	font-size: 11px;
	line-height: 1.6;
	color: var(--hls-muted);
}

/* Results footer nav (sticky navy bar) */
.hls-results-footer-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--hls-primary);
	padding: 14px 24px;
	box-shadow: 0 -4px 20px rgba(4, 30, 65, 0.12);
	z-index: 10;
	
	display: flex; align-items: center; justify-content: space-between;
}
.hls-results-footer-nav .hls-link { color: #fff; opacity: 0.9; }
.hls-results-footer-nav .hls-link:hover { opacity: 1; }
.hls-link--restart { display: inline-flex; align-items: center; gap: 6px; }
.hls-restart-icon { width: 16px; height: 16px; flex: none; }
.hls-results-footer-nav .hls-btn-primary {
	background: #fff;
	color: var(--hls-primary);
	border: 0;
	opacity: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	text-decoration: none;
}
.hls-results-footer-nav .hls-btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

@media (max-width: 800px) {
	.hls-results-footer-nav { padding: 10px;} 
}


/* ─── Gated results: blurred preview + overlay ────────────────────────────── */
/* The blurred preview is purely decorative: it's pulled out of flow and pinned
   behind the gate so the container's height is driven by the gate form alone.
   The gate then overlays it with a fade-to-white gradient — only the first
   section header peeks through the transparent top. This is height-independent,
   so it lines up regardless of how tall the preview is (mobile stacks its
   skeleton cards, making the preview far taller than desktop). `overflow:hidden`
   clips the preview to the gate's height when the preview is the taller of the two. */
.hls-gated { position: relative; overflow: hidden; }
.hls-blurred-preview {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	filter: blur(2px);
	opacity: 0.6;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	z-index: 1;
}
.hls-skeleton-line { height: 8px; background: #E2E5EB; border-radius: 4px; margin-bottom: 6px; }
.hls-skeleton-line--sm { width: 60%; }
.hls-gate {
	position: relative;
	margin: 0 auto 60px;
	max-width: 100%;
	/* Top ~130px fades from transparent to solid white so the first blurred
	   section header shows through; everything below is solid white. */
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0.9) 600px, #fff 130px);
	padding: 110px 32px 32px;
	/* border: 1px solid var(--hls-border);
	border-top: 0;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(4, 30, 65, 0.14); */
	z-index: 2;
}
.hls-gate .content {
	max-width: 875px;
	margin: 0 auto;
}
.hls-gate h3 { font-size: 22px; margin: 0 0 8px; color: var(--hls-primary); font-weight: 700; text-align: center; }
.hls-gate .content p { font-size: 14px; color: var(--hls-muted); margin: 0 0 18px; text-align: center; }
.hls-gate .hls-expect-list { margin-bottom: 30px; list-style: none; padding-left: 0px;
	/* -webkit-columns: 2; -moz-columns: 2; columns: 2;  */
	display: flex; flex-wrap: wrap; gap: 16px; 
}
.hls-gate .hls-expect-list li {
	font-size: 12px;
	box-sizing: border-box; 
	/* Subtract half of the gap size to make two perfectly even columns */
	width: calc(50% - 8px); 
}
.hls-gate .hls-expect-list li::before {
	content: "✓";
	padding-right: 10px;
	color: var(--hls-accent);
}
.hls-gate .hls-form { 
	margin-top: 8px; 

	.hls-field { padding-bottom: 10px; }
}
.hls-gate .hls-error-msg--form { text-align: center; margin: 10px 0 0; }
.hls-gate .hls-btn { display: block; margin: 14px auto 0; }
/* Keep the email pill's label+icon flex layout while centering it in the modal. */
.hls-gate .hls-btn-email { display: flex; width: fit-content; }
@media (max-width: 800px) { 
	.hls-gate {
		.hls-disclaimer { text-align: center; }		
		.hls-btn-email { width: 100%; justify-content: center; }
		.hls-gate .hls-expect-list { 
			flex-direction: column;
			li { width: 100%; }
		}
	}
}