/**
 * Money Saving Help — Pensions: theme styles.
 *
 * Mobile-first. Colours, type sizes and radii come from theme.json tokens, so a
 * brand change is an edit there rather than a hunt through this file. The
 * leadgen-go plugin reads the same tokens, so the quiz, the chat and the
 * popups follow the brand without the plugin knowing which brand it is in.
 *
 * Contents
 *   1. Foundations
 *   2. Header and logo
 *   3. Buttons
 *   4. Hero
 *   5. The pension check (leadgen-go quiz, restyled for this brand)
 *   6. Trust card
 *   7. Section furniture
 *   8. Options
 *   9. How it works
 *  10. Questions
 *  11. Closing call to action
 *  12. Footer
 *  13. Thank-you page
 *  14. Policy pages, 404
 *  15. Full-screen conversation
 */

/* ==========================================================================
   1. Foundations
   ========================================================================== */

:root {
	--msh-header-h: 68px;
	--msh-section: clamp(3.75rem, 8vw, 6.5rem);
	--msh-ease: cubic-bezier(0.22, 1, 0.36, 1);

	--msh-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E");
	--msh-tick-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B83D' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E");
	--msh-info: 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.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 16.5v-5M12 7.8h.01'/%3E%3C/svg%3E");
	--msh-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230862DA' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--msh-plus-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--msh-clock: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");
	--msh-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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--msh-swoosh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 17C74 6 196 3 296 10' fill='none' stroke='%23F5B83D' stroke-width='6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

@media (min-width: 48em) {
	:root { --msh-header-h: 78px; }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	/* Anchor jumps land below the sticky header, not under it. */
	scroll-padding-top: calc(var(--msh-header-h) + 0.75rem);
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* clip, not hidden: hidden makes a scroll container and the header would stop
   sticking. */
.wp-site-blocks { overflow-x: clip; }

img,
svg,
video { max-width: 100%; height: auto; }

h1,
h2,
h3 { text-wrap: balance; }

p,
li { text-wrap: pretty; }

::selection { background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--navy); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 6px;
}

:where(a, button):focus:not(:focus-visible) { outline: none; }

/* Template parts and page sections butt together: the colour changes between
   them are the rhythm, and a block gap would open white seams between them. */
body .wp-site-blocks > * + * { margin-block-start: 0; }
.msh-main:not(.msh-page) > .wp-block-post-content > * { margin-block: 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   2. Header and logo
   ========================================================================== */

/* The template-part wrapper is what sticks. The header inside it is exactly as
   tall as that wrapper, so sticky on the header itself has nowhere to travel
   and scrolls away with the page. */
.wp-site-blocks > .wp-block-template-part:has(> .msh-header:not(.msh-header--minimal)) {
	position: sticky;
	top: 0;
	z-index: 60;
}

.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .msh-header:not(.msh-header--minimal)) { top: 46px; }

@media (min-width: 783px) {
	.admin-bar .wp-site-blocks > .wp-block-template-part:has(> .msh-header:not(.msh-header--minimal)) { top: 32px; }
}

.msh-header {
	position: relative;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: saturate(1.6) blur(12px);
	backdrop-filter: saturate(1.6) blur(12px);
	border-bottom: 1px solid rgba(6, 29, 78, 0.08);
}

.msh-header__inner {
	min-height: var(--msh-header-h);
	gap: 1rem;
}

.msh-header__actions { gap: 1.5rem; }

.msh-header__note {
	display: none;
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	white-space: nowrap;
}

@media (min-width: 60em) {
	.msh-header__note {
		display: inline-flex;
		align-items: center;
		gap: 0.45rem;
	}

	.msh-header__note::before {
		content: "";
		width: 1rem;
		height: 1rem;
		background: var(--wp--preset--color--success);
		-webkit-mask: var(--msh-tick) center / contain no-repeat;
		mask: var(--msh-tick) center / contain no-repeat;
	}
}

/* The minimal header carries only the logo, and stays put: it heads pages
   with one job, where nothing else in it needs to stay in reach. */

.msh-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	color: var(--wp--preset--color--navy);
	line-height: 1;
	text-decoration: none;
}

.msh-logo:hover { color: var(--wp--preset--color--navy); }

.msh-logo__mark {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 9px;
	box-shadow: 0 6px 14px -8px rgba(6, 29, 78, 0.65);
}

.msh-logo__word {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.1em;
	padding-left: 0.65rem;
	border-left: 1px solid rgba(6, 29, 78, 0.16);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 0.95;
}

.msh-logo__accent { color: var(--wp--preset--color--primary); }

@media (min-width: 48em) {
	.msh-logo__mark { width: 44px; height: 44px; border-radius: 10px; }
	.msh-logo__word { font-size: 1.3rem; }
}

/* Call button: the secondary route in, so quieter than the gold actions. */
.msh-call {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.35rem 1.1rem 0.35rem 0.35rem;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.msh-call:hover,
.msh-call:focus-visible {
	border-color: rgba(8, 98, 218, 0.45);
	box-shadow: 0 10px 22px -14px rgba(8, 98, 218, 0.7);
	color: var(--wp--preset--color--navy);
	transform: translateY(-1px);
}

.msh-call__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.msh-call__text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.msh-call__label {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.75rem;
	font-weight: 500;
}

.msh-call__number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.msh-call--start {
	padding: 0.7rem 1.25rem;
	border: 0;
	background: var(--wp--preset--color--accent);
}

@media (max-width: 39.9375em) {
	/* On a phone the button is the icon alone: the logo needs the width. */
	.msh-call:not(.msh-call--start) {
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.msh-call:not(.msh-call--start) .msh-call__text { display: none; }
	.msh-call__icon { width: 44px; height: 44px; }
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 56px;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.wp-block-button__link:hover { transform: translateY(-1px); }

/* An arrow on every call to action: it says "this moves you on". */
.wp-block-button__link::after {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: var(--msh-arrow) center / contain no-repeat;
	mask: var(--msh-arrow) center / contain no-repeat;
	transition: transform 220ms var(--msh-ease);
}

.wp-block-button__link:hover::after { transform: translateX(3px); }

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(1rem - 2px) calc(1.9rem - 2px);
	border: 2px solid var(--wp--preset--color--navy);
	background: transparent;
	box-shadow: none;
	color: var(--wp--preset--color--navy);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	color: #fff;
}

/* ==========================================================================
   4. Hero — the form is the page
   ========================================================================== */

/* One headline, one line, then the form. Everything else waits below it. */
.msh-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-top: clamp(1.5rem, 5vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
	color: #fff;
	background:
		radial-gradient(44rem 30rem at 50% 64%, rgba(8, 98, 218, 0.58), transparent 66%),
		radial-gradient(36rem 26rem at 100% 0%, rgba(8, 98, 218, 0.34), transparent 66%),
		radial-gradient(36rem 26rem at 0% 100%, rgba(92, 200, 255, 0.14), transparent 66%),
		linear-gradient(170deg, #0B2A6B 0%, #061D4E 46%, #03133A 100%);
}

/* Texture: a dot grid that fades out, and faint rings centred on the form —
   the coin motif of the logo, at a whisper. */
.msh-hero::before,
.msh-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.msh-hero::before {
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.3px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(60% 55% at 50% 35%, #000 0%, transparent 75%);
	mask-image: radial-gradient(60% 55% at 50% 35%, #000 0%, transparent 75%);
	opacity: 0.5;
}

.msh-hero::after {
	width: 76rem;
	height: 76rem;
	top: 58%;
	left: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0.065) 0 1.5px, transparent 1.5px 76px);
	-webkit-mask-image: radial-gradient(circle, #000 20%, transparent 66%);
	mask-image: radial-gradient(circle, #000 20%, transparent 66%);
}

/* Two lines at every width: "Compare your pension / options for free".
   "Compare your pension" is 11.43em wide in Montserrat Bold, so on a phone the
   size is worked out from the space there is: the viewport less the hero's
   0.75rem gutters, divided by 11.43, with a little to spare. Greedy wrapping,
   because balanced wrapping stranded "Compare" on a line of its own. */
.msh-hero h1 {
	max-width: 20ch;
	margin-top: 0;
	margin-bottom: clamp(1.4rem, 3.5vw, 2.25rem);
	color: #fff;
	font-size: min(2.25rem, calc((100vw - 1.5rem) * 0.0845));
	line-height: 1.12;
	text-wrap: wrap;
}

@media (min-width: 40em) {
	.msh-hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.4rem); }
}

/* The gold words carry a hand-drawn underline. */
.msh-hero h1 mark {
	position: relative;
	background: none !important;
	white-space: nowrap;
}

.msh-hero h1 mark::after {
	content: "";
	position: absolute;
	left: -1%;
	right: -1%;
	bottom: -0.2em;
	height: 0.3em;
	background: var(--msh-swoosh) center / 100% 100% no-repeat;
}

.msh-hero .lgo-quiz {
	max-width: 42rem;
	margin-top: 0;
}

.msh-hero .msh-hero__points {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2.25rem;
	margin-top: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 0;
}

.msh-hero .msh-hero__points > *,
.msh-hero .msh-hero__point > * { margin: 0; }

.msh-hero .msh-hero__point {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.msh-hero__point-icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	color: var(--wp--preset--color--accent);
}

/* On a phone the form takes nearly the full width, and the headline sits
   closer to the header. */
@media (max-width: 39.9375em) {
	.msh-hero.has-global-padding {
		padding-top: 1.25rem;
		padding-inline: 0.75rem;
	}
}

/* Three short reasons fit a phone as a row of three. */
@media (max-width: 39.9375em) {
	.msh-hero .msh-hero__points {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.75rem;
	}

	.msh-hero .msh-hero__point {
		flex-direction: column;
		gap: 0.45rem;
		font-size: 0.8125rem;
		line-height: 1.3;
		text-align: center;
	}
}

.msh-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.msh-eyebrow--on-dark {
	padding: 0.45rem 0.95rem 0.45rem 0.8rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
}

.msh-eyebrow--on-dark::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 4px rgba(245, 184, 61, 0.22);
}

/* ==========================================================================
   5. The pension check
   ========================================================================== */

/* Squared-off answers rather than the plugin's pills: they read as a form,
   and long answers such as "£100,000 – £200,000" wrap more gracefully. */
.lgo-quiz { --lgo-radius-pill: 0.625rem; }

/* The card is the page's one bright object: squarer corners, a gold cap, the
   progress in its own band and a blue glow lifting it off the navy. */
.msh-hero .lgo-quiz {
	--msh-card-pad: clamp(1.1rem, 3.6vw, 2.25rem);
	position: relative;
	overflow: hidden;
	padding: var(--msh-card-pad);
	border-radius: 0.875rem;
	background: #fff;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.1),
		0 34px 70px -26px rgba(0, 6, 28, 0.9),
		0 0 90px -12px rgba(63, 139, 255, 0.5);
}

@media (min-width: 48em) {
	.msh-hero .lgo-quiz { border-radius: 1rem; }
}

.msh-hero .lgo-quiz::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--wp--preset--color--accent);
}

.msh-hero .lgo-quiz__progress {
	margin: calc(-1 * var(--msh-card-pad)) calc(-1 * var(--msh-card-pad)) clamp(1.15rem, 3vw, 1.6rem);
	padding: calc(0.95rem + 4px) var(--msh-card-pad) 1rem;
	border-bottom: 1px solid #E3EAF6;
	background: #F4F8FE;
}

.msh-hero .lgo-quiz__progress-track { background: #DCE6F4; }

.lgo-quiz__progress { margin-bottom: 1.35rem; }
.lgo-quiz__progress-head { margin-bottom: 0.6rem; }

.lgo-quiz__progress-label {
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: -0.005em;
}

.lgo-quiz__progress-value {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 700;
}

.lgo-quiz__progress-track {
	height: 8px;
	background: #E8EEF8;
}

.lgo-quiz__progress-bar {
	/* A sliver even at 0%, so the bar reads as a bar from the first question. */
	min-width: 10px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, #3FA2FF 100%);
}

.lgo-quiz__question {
	margin-bottom: 1.1rem;
	color: var(--wp--preset--color--navy);
	font-size: 1.4rem;
	letter-spacing: -0.02em;
	line-height: 1.25;
	text-wrap: balance;
}

@container (min-width: 26rem) {
	.lgo-quiz__question { font-size: 1.5rem; }
}

/* With the room the centred layout gives it, the form gets bigger targets. */
@container (min-width: 34rem) {
	.lgo-quiz__question { font-size: 1.7rem; }
	.lgo-quiz__options { gap: 0.75rem; }
	.lgo-pill { min-height: 66px; }
	.lgo-pill__label { font-size: 1.125rem; }
	.lgo-field__control { min-height: 62px; }
}

/* Helper text under the question, not the plugin's green reassurance box. */
.lgo-quiz__subtitle {
	margin: -0.55rem 0 1.1rem;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.9375rem;
	text-align: left;
}

.lgo-quiz__options { gap: 0.65rem; }

.lgo-pill {
	justify-content: flex-start;
	min-height: 60px;
	padding: 0.85rem 3.1rem 0.85rem 1.1rem;
	border: 1.5px solid #D5DEEC;
	background: #fff;
	box-shadow: 0 1px 2px rgba(6, 29, 78, 0.04);
	transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.lgo-pill:hover {
	border-color: #9EBDEB;
	background: #F8FBFF;
	box-shadow: 0 10px 22px -16px rgba(8, 98, 218, 0.6);
}

.lgo-pill.is-selected,
.lgo-pill:has(.lgo-pill__input:checked) {
	border-color: var(--wp--preset--color--primary);
	background: #F2F7FF;
	box-shadow: 0 0 0 3px rgba(8, 98, 218, 0.12);
}

.lgo-pill__label {
	color: var(--wp--preset--color--ink);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
}

/* A radio you can see before choosing, filled once chosen. */
.lgo-pill__check {
	right: 1rem;
	width: 22px;
	height: 22px;
	opacity: 1;
	transform: translateY(-50%);
	background: #fff;
	box-shadow: inset 0 0 0 2px #C5D0E2;
	transition: background-color 160ms ease, box-shadow 160ms ease;
}

.lgo-pill:hover .lgo-pill__check { box-shadow: inset 0 0 0 2px #8FB2E8; }

.lgo-pill:has(.lgo-pill__input:checked) .lgo-pill__check {
	transform: translateY(-50%);
	background: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 5px #fff, 0 0 0 2px var(--wp--preset--color--primary);
}

.lgo-pill__icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
	transition: background-color 160ms ease, color 160ms ease;
}

.lgo-pill__icon svg { width: 24px; height: 24px; }

.lgo-pill:has(.lgo-pill__input:checked) .lgo-pill__icon {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.lgo-quiz__options--grid .lgo-pill { padding: 0.8rem 2.4rem 0.8rem 1rem; }
.lgo-quiz__options--grid .lgo-pill__check { right: 0.8rem; width: 20px; height: 20px; }

.lgo-quiz__options--grid .lgo-pill:has(.lgo-pill__icon) {
	min-height: 120px;
	padding: 1.1rem 0.75rem 1rem;
}

.lgo-quiz__options--grid .lgo-pill:has(.lgo-pill__icon) .lgo-pill__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
}

.lgo-quiz__options--grid .lgo-pill:has(.lgo-pill__icon) .lgo-pill__check,
.lgo-quiz__options--grid .lgo-pill:has(.lgo-pill__icon):has(.lgo-pill__input:checked) .lgo-pill__check {
	top: 0.7rem;
	right: 0.7rem;
	transform: none;
}

.lgo-quiz__note {
	position: relative;
	margin: 0.9rem 0 0;
	padding: 0.7rem 0.85rem 0.7rem 2.3rem;
	border-radius: 0.5rem;
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.lgo-quiz__note::before {
	content: "";
	position: absolute;
	left: 0.8rem;
	top: 0.8rem;
	width: 1rem;
	height: 1rem;
	background: var(--wp--preset--color--primary);
	-webkit-mask: var(--msh-info) center / contain no-repeat;
	mask: var(--msh-info) center / contain no-repeat;
}

/* Contact fields */

.lgo-field__control {
	min-height: 58px;
	padding: 0 1rem;
	border: 1.5px solid #CFD9EA;
	border-radius: 0.625rem;
	background: #fff;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.lgo-field__control:hover { border-color: #AFC3E4; }

.lgo-field__control:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 4px rgba(8, 98, 218, 0.14);
}

.lgo-field__input {
	min-height: 56px;
	font-size: 1.0625rem;
}

.lgo-field__icon { color: #8A97B1; }

.lgo-field.has-error .lgo-field__control { box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.1); }

.lgo-field__error { font-weight: 500; }

.lgo-field__label { color: var(--wp--preset--color--navy); }

.lgo-quiz__consents {
	margin-top: 1rem;
	padding: 0.95rem 1rem;
	border-radius: 0.625rem;
	background: var(--wp--preset--color--surface-alt);
}

.lgo-consent__box {
	border-color: #B5C3DA;
	border-radius: 6px;
}

.lgo-consent__label:has(.lgo-consent__input:checked) .lgo-consent__box {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
}

.lgo-consent__text {
	color: #3D4966;
	font-size: 0.8125rem;
	line-height: 1.55;
}

.lgo-quiz__legal {
	color: #6B7690;
	font-size: 0.75rem;
}

/* Navigation */

.lgo-quiz__nav { margin-top: 1.25rem; }

.lgo-quiz__nav .lgo-btn--primary {
	min-height: 54px;
	padding-inline: 1.9rem;
	border-radius: 0.625rem;
	box-shadow: 0 12px 24px -14px rgba(8, 98, 218, 0.85);
}

.lgo-quiz__nav .lgo-btn--ghost {
	color: var(--wp--preset--color--ink-muted);
	font-weight: 600;
}

.lgo-btn--submit {
	min-height: 60px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--navy);
	font-size: 1.125rem;
	font-weight: 700;
	box-shadow: 0 16px 30px -16px rgba(233, 162, 27, 0.95);
}

.lgo-btn--submit:hover {
	background: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--navy);
}

/* Each question slides in rather than blinking into place. */
@media (prefers-reduced-motion: no-preference) {
	.lgo-quiz.is-enhanced .lgo-quiz__step.is-active {
		animation: msh-step-in 380ms var(--msh-ease) both;
	}
}

@keyframes msh-step-in {
	from { opacity: 0; transform: translateX(14px); }
	to { opacity: 1; transform: none; }
}

/* Compact on a phone. Keyed to the card's own width rather than the screen's,
   so it follows the form wherever it sits. The aim is a whole question —
   progress, question, every answer, the note and the buttons — on one screen
   without scrolling. Answers stay at least 48px tall, the smallest target
   people hit reliably, and inputs stay at 16px or more, below which iOS zooms
   the page on focus. */
@container (max-width: 26rem) {
	.msh-hero .lgo-quiz__progress {
		margin-bottom: 1rem;
		padding-top: calc(0.7rem + 4px);
		padding-bottom: 0.75rem;
	}

	.lgo-quiz__progress-head { margin-bottom: 0.45rem; }

	.lgo-quiz__question {
		margin-bottom: 0.8rem;
		font-size: 1.25rem;
	}

	.lgo-quiz__options { gap: 0.5rem; }

	.lgo-pill {
		min-height: 50px;
		gap: 0.65rem;
		padding: 0.55rem 2.6rem 0.55rem 0.8rem;
	}

	.lgo-pill__label { font-size: 1rem; }

	.lgo-pill__check {
		right: 0.8rem;
		width: 20px;
		height: 20px;
	}

	.lgo-pill__icon {
		width: 34px;
		height: 34px;
		border-radius: 9px;
	}

	.lgo-pill__icon svg { width: 20px; height: 20px; }

	.lgo-quiz__options--grid .lgo-pill { padding: 0.55rem 2.2rem 0.55rem 0.8rem; }

	.lgo-quiz__options--grid .lgo-pill:has(.lgo-pill__icon) {
		min-height: 92px;
		padding: 0.75rem 0.6rem;
	}

	.lgo-quiz__options--grid .lgo-pill:has(.lgo-pill__icon) .lgo-pill__icon {
		width: 42px;
		height: 42px;
	}

	.lgo-quiz__note {
		margin-top: 0.6rem;
		padding: 0.55rem 0.75rem 0.55rem 2.1rem;
		font-size: 0.78rem;
	}

	.lgo-quiz__note::before { top: 0.66rem; left: 0.72rem; }

	.lgo-quiz__subtitle { margin-bottom: 0.8rem; font-size: 0.875rem; }

	.lgo-field__control { min-height: 52px; }
	.lgo-field__input { min-height: 50px; }

	.lgo-quiz__nav { margin-top: 0.85rem; }
	.lgo-quiz__nav .lgo-btn--primary { min-height: 48px; }

	.lgo-btn--submit {
		min-height: 54px;
		font-size: 1.0625rem;
	}
}

/* ==========================================================================
   6. Trust card
   ========================================================================== */

.msh-main > .wp-block-post-content > .msh-trust {
	position: relative;
	z-index: 3;
	margin-top: calc(-1 * clamp(4.5rem, 8vw, 5.5rem));
}

.msh-trust__card {
	display: grid;
	gap: 1.25rem;
	padding: 1.5rem;
	border: 1px solid rgba(6, 29, 78, 0.06);
	border-radius: 1.5rem;
	background: #fff;
	box-shadow: 0 30px 60px -32px rgba(6, 29, 78, 0.4), 0 4px 12px -6px rgba(6, 29, 78, 0.08);
}

.msh-trust__card > * { margin: 0 !important; }

.msh-trust__lead {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.55;
}

.msh-trust__lead strong {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.msh-trust__points {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.msh-trust__points li {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	color: var(--wp--preset--color--navy);
	font-size: 0.96875rem;
	font-weight: 600;
	line-height: 1.35;
}

.msh-trust__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}

@media (min-width: 40em) and (max-width: 59.9375em) {
	.msh-trust__points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.msh-trust__points li { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 60em) {
	.msh-trust__card {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
		align-items: center;
		gap: 2rem;
		padding: 1.75rem 2rem;
	}

	.msh-trust__lead {
		padding-right: 2rem;
		border-right: 1px solid var(--wp--preset--color--border);
	}

	.msh-trust__points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   7. Section furniture
   ========================================================================== */

.msh-section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.msh-section-head > * { max-width: 46rem; margin-block: 0; }
.msh-section-head h2 { margin-bottom: 1rem; }

.msh-section-head--center { text-align: center; }
.msh-section-head--center > * { margin-inline: auto; }

.msh-section-head__intro {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
}

.msh-callout {
	position: relative;
	margin-top: 1.75rem !important;
	padding: 1rem 1.25rem 1rem 3rem;
	border: 1px solid #F3DDA4;
	border-radius: 1rem;
	background: var(--wp--preset--color--accent-soft);
	color: #5C4300;
	font-size: var(--wp--preset--font-size--small);
}

.msh-callout::before {
	content: "";
	position: absolute;
	left: 1.1rem;
	top: 1.15rem;
	width: 1.2rem;
	height: 1.2rem;
	background: #B47A00;
	-webkit-mask: var(--msh-info) center / contain no-repeat;
	mask: var(--msh-info) center / contain no-repeat;
}

.msh-callout strong { color: #3D2D00; }

/* ==========================================================================
   8. Options
   ========================================================================== */

.msh-options { padding-block: var(--msh-section); }

.msh-options__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
	gap: 1.25rem;
}

.msh-options__grid > * { margin: 0 !important; }

.msh-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 1.35rem;
	background: #fff;
	box-shadow: 0 1px 2px rgba(6, 29, 78, 0.04);
	transition: transform 320ms var(--msh-ease), box-shadow 320ms ease, border-color 320ms ease;
}

.msh-card:hover {
	border-color: #D2DDF0;
	box-shadow: 0 30px 50px -32px rgba(6, 29, 78, 0.42);
	transform: translateY(-4px);
}

.msh-card > * { margin: 0 !important; }

.msh-card__art {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	border-bottom: 1px solid #EEF2F9;
	background: radial-gradient(120% 95% at 50% 0%, #E7F0FE 0%, #F5F8FE 58%, #fff 100%);
}

.msh-card__art svg {
	width: 86%;
	height: auto;
	filter: drop-shadow(0 12px 16px rgba(6, 29, 78, 0.1));
	transition: transform 420ms var(--msh-ease);
}

.msh-card:hover .msh-card__art svg { transform: scale(1.04); }

.msh-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.35rem 1.4rem 1.6rem;
}

.msh-card__body > * { margin: 0; }

.msh-card__tag {
	align-self: flex-start;
	margin-bottom: 0.85rem !important;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-dark);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.msh-card__title {
	margin-bottom: 0.55rem !important;
	font-size: 1.35rem;
	letter-spacing: -0.02em;
}

.msh-card__text {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.96875rem;
	line-height: 1.62;
}

/* ==========================================================================
   9. How it works
   ========================================================================== */

.msh-process {
	--msh-steps-gap: 2rem;
	padding-block: var(--msh-section);
	background: linear-gradient(180deg, var(--wp--preset--color--surface-alt) 0%, #fff 100%);
	text-align: center;
}

.msh-process .msh-process__title { margin: 0 0 clamp(2rem, 4vw, 3rem); }

/* Centred under the heading: one icon, one line of title, one line of text. */
.msh-process .msh-steps {
	display: grid;
	gap: var(--msh-steps-gap);
	max-width: 58rem;
	margin: 0 auto;
}

.msh-process .msh-steps > *,
.msh-process .msh-step > * { margin: 0; }

.msh-step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.msh-process .msh-step__head {
	position: relative;
	display: block;
	width: 64px;
	height: 64px;
	margin-bottom: 1rem;
}

.msh-step__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--border), 0 16px 30px -18px rgba(6, 29, 78, 0.5);
}

.msh-step__icon svg { width: 26px; height: 26px; }

.msh-step__num {
	position: absolute;
	top: -4px;
	right: -6px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px #fff;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.8125rem;
	font-weight: 700;
}

.msh-process .msh-step__title {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
}

.msh-step__text {
	display: block;
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.96875rem;
}

/* On a wide screen, a dashed path joins each icon to the next. It runs from
   just past one icon's edge to just short of the next one's, both centred in
   their columns. */
@media (min-width: 48em) {
	.msh-process .msh-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.msh-step:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 32px;
		left: calc(50% + 32px + 1rem);
		right: calc(-50% - var(--msh-steps-gap) + 32px + 1rem);
		border-top: 2px dashed #C3D1EA;
	}
}

.msh-process .msh-process__free {
	margin-top: clamp(2.25rem, 5vw, 3rem);
	color: var(--wp--preset--color--ink-muted);
}

.msh-process__free strong { color: var(--wp--preset--color--navy); }

.msh-process .msh-process__cta { margin-top: 1.5rem !important; }

/* ==========================================================================
   10. Questions
   ========================================================================== */

.msh-faq { padding-block: var(--msh-section); }

/* Straight after "How it works", the two sections' padding would stack into
   a gap twice the size of any other on the page. */
.msh-main:not(.msh-page) > .wp-block-post-content > .msh-process + .msh-faq { padding-top: 0; }

.msh-faq h2 { margin: 0 0 clamp(1.5rem, 3vw, 2rem); }

.msh-faq__list {
	display: grid;
	gap: 0.75rem;
}

.msh-faq__list > * { margin: 0 !important; }

/* Each question is a card. */
.wp-block-details {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 1rem;
	background: #fff;
	transition: border-color 200ms ease, box-shadow 260ms ease;
}

.wp-block-details:hover { border-color: #C9D7EE; }

.wp-block-details[open]:not(.is-closing) {
	border-color: #BFD3F4;
	box-shadow: 0 18px 40px -28px rgba(6, 29, 78, 0.45);
}

.wp-block-details summary {
	position: relative;
	display: block;
	padding: 1.15rem 4rem 1.15rem 1.35rem;
	border-radius: 1rem;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
	transition: color 160ms ease;
}

.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::marker { content: ""; }
.wp-block-details summary:hover { color: var(--wp--preset--color--primary); }
.wp-block-details summary:focus-visible { outline-offset: -3px; }

/* A plus that turns into a minus: two bars drawn as gradients, so the upright
   can shrink away as the answer opens. */
.wp-block-details summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1.1rem;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
		var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
	transition: background-size 280ms var(--msh-ease), background-color 200ms ease, color 200ms ease, transform 280ms var(--msh-ease);
}

.wp-block-details[open]:not(.is-closing) summary::after {
	background-color: var(--wp--preset--color--primary);
	background-size: 12px 2px, 2px 0;
	color: #fff;
	transform: rotate(180deg);
}

/* The answer lines up under its question and stays clear of the button. */
.wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 4rem 1.25rem 1.35rem;
	color: var(--wp--preset--color--ink-muted);
	font-size: 1rem;
	line-height: 1.65;
}

.wp-block-details > :not(summary) + :not(summary) { padding-top: 0; }

@media (prefers-reduced-motion: no-preference) {
	.wp-block-details[open]:not(.is-closing) > :not(summary) {
		animation: msh-answer-in 360ms var(--msh-ease) both;
	}
}

@keyframes msh-answer-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 39.9375em) {
	.wp-block-details summary { padding: 1rem 3.5rem 1rem 1.1rem; font-size: 1rem; }
	.wp-block-details summary::after { right: 0.85rem; }
	.wp-block-details > :not(summary) { padding: 0 1.1rem 1.1rem; font-size: 0.9375rem; }
}

/* ==========================================================================
   11. Closing call to action
   ========================================================================== */

.msh-cta { padding-bottom: var(--msh-section); }

.msh-cta__panel {
	position: relative;
	isolation: isolate;
	display: grid;
	gap: 1rem;
	align-items: center;
	overflow: hidden;
	padding: clamp(2.25rem, 6vw, 4.25rem) clamp(1.5rem, 6vw, 4.5rem);
	border-radius: 2rem;
	color: #fff;
	background:
		radial-gradient(40rem 26rem at 100% 0%, rgba(8, 98, 218, 0.66), transparent 60%),
		linear-gradient(160deg, #0B2A6B 0%, #061D4E 55%, #03133A 100%);
	box-shadow: 0 40px 80px -44px rgba(3, 19, 58, 0.7);
}

.msh-cta__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1.3px);
	background-size: 22px 22px;
	-webkit-mask-image: radial-gradient(60% 80% at 0% 100%, #000, transparent 70%);
	mask-image: radial-gradient(60% 80% at 0% 100%, #000, transparent 70%);
}

.msh-cta__panel > * { margin: 0 !important; }
.msh-cta__copy > * { margin-block: 0; }

.msh-cta__copy h2 {
	max-width: 17ch;
	margin: 0.35rem 0 1.75rem;
	color: #fff;
}

.msh-cta__art { display: none; }

@media (min-width: 52em) {
	.msh-cta__panel { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }

	.msh-cta__art { display: block; }

	.msh-cta__art svg {
		display: block;
		width: 100%;
		max-width: 340px;
		margin-inline: auto;
	}
}

@media (min-width: 52em) and (prefers-reduced-motion: no-preference) {
	.msh-cta__art svg { animation: msh-float 7s ease-in-out infinite; }
}

@keyframes msh-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.msh-footer {
	padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
	background: var(--wp--preset--color--navy-deep);
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--wp--preset--font-size--small);
}

.msh-footer a {
	color: #fff;
	text-decoration: none;
}

.msh-footer a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.msh-footer__top {
	display: grid;
	gap: 1.75rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.msh-footer__top > * { margin: 0 !important; }

@media (min-width: 48em) {
	.msh-footer__top {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

}


.msh-footer .msh-logo { color: #fff; }
.msh-footer .msh-logo__word { border-color: rgba(255, 255, 255, 0.2); }
.msh-footer .msh-logo__accent { color: #8DB9FF; }
.msh-footer .msh-logo__mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.msh-footer .msh-logo:hover { text-decoration: none; }

.msh-footer__links {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.msh-footer__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 500;
}

@media (min-width: 48em) {
	.msh-footer__links {
		display: flex;
		gap: 2rem;
	}
}

.msh-footer__legal {
	display: grid;
	gap: 0.75rem;
	padding-top: 1.75rem;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.8125rem;
	line-height: 1.6;
}

.msh-footer__legal > * {
	max-width: 62rem;
	margin: 0 !important;
}

/* Room for the chat launcher, so the last lines are never under it. */
@media (max-width: 47.9375em) {
	.msh-footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   13. Thank-you page
   ========================================================================== */

.msh-thanks {
	padding-block: clamp(2rem, 5vw, 3.5rem) var(--msh-section);
	background:
		radial-gradient(56rem 26rem at 50% -4rem, #E3EEFE 0%, transparent 70%),
		var(--wp--preset--color--surface);
}

.msh-thanks__card {
	padding: clamp(2rem, 5vw, 3.25rem);
	border-radius: 1.75rem;
	background: #fff;
	box-shadow: 0 40px 80px -48px rgba(6, 29, 78, 0.55), 0 0 0 1px rgba(6, 29, 78, 0.06);
	text-align: center;
}

.msh-thanks__card > * { margin-block: 0; }

.msh-thanks__check {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	margin: 0 auto 1.35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--success-soft);
	box-shadow: 0 0 0 10px rgba(22, 163, 74, 0.06);
	color: var(--wp--preset--color--success);
}

.msh-thanks__tick {
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: msh-draw 600ms 250ms var(--msh-ease) forwards;
}

@media (prefers-reduced-motion: reduce) {
	.msh-thanks__tick { stroke-dashoffset: 0; animation: none; }
}

@keyframes msh-draw {
	to { stroke-dashoffset: 0; }
}

.msh-thanks__card h1 { margin-bottom: 0.75rem; }

.msh-thanks__lead {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--large);
}

.msh-thanks__partner {
	margin: 0.35rem 0 1.4rem !important;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.msh-thanks__card .msh-thanks__eta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	padding: 0.7rem 1.15rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary-dark);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
}

.msh-thanks__eta::before {
	content: "";
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	background: currentColor;
	-webkit-mask: var(--msh-clock) center / contain no-repeat;
	mask: var(--msh-clock) center / contain no-repeat;
}

.msh-next { margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; }
.msh-next > * { margin-block: 0; }
.msh-next h2 { margin-bottom: 1.25rem; }

.msh-next .msh-next__list {
	display: grid;
	gap: 0.85rem;
	margin: 0;
}

.msh-next .msh-next__list > *,
.msh-next .msh-next__item > * { margin: 0; }

.msh-next .msh-next__item {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 1.1rem;
	background: #fff;
	color: var(--wp--preset--color--ink);
}

.msh-next__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
}

.msh-next--faq { display: grid; gap: 0.75rem; }
.msh-next--faq > * { margin: 0 !important; }
.msh-next--faq h2 { margin-bottom: 0.5rem !important; }

/* ==========================================================================
   14. Policy pages, 404
   ========================================================================== */

.msh-page {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--msh-section);
}

.msh-page__title {
	margin-bottom: 1.75rem;
	font-size: var(--wp--preset--font-size--xx-large);
}

.msh-legal .wp-block-post-content {
	font-size: 1rem;
	line-height: 1.75;
}

.msh-legal .wp-block-post-content h2 {
	margin-top: 2.5rem;
	font-size: var(--wp--preset--font-size--large);
}

.msh-legal .wp-block-post-content :where(ul, ol) { padding-left: 1.25rem; }
.msh-legal .wp-block-post-content li { margin-bottom: 0.35rem; }

.msh-legal .wp-block-post-content hr {
	margin-block: 2rem;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}

.msh-404 {
	padding-block: var(--msh-section);
	text-align: center;
}

.msh-404 .wp-block-buttons { justify-content: center; }

/* ==========================================================================
   15. Full-screen conversation
   ========================================================================== */

/* The chat owns the viewport on its own template: a flex column pins the
   header and gives the conversation exactly what is left, so the page never
   scrolls and the composer stays reachable above the keyboard. */
.page-template-page-chat .wp-site-blocks {
	display: flex;
	flex-direction: column;
	height: 100dvh;
}

.page-template-page-chat .msh-chat-main {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.page-template-page-chat .msh-chat-main > .wp-block-post-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.page-template-page-chat .lgo-chat {
	flex: 1;
	height: auto;
	min-height: 0;
	max-width: none;
	margin-inline: 0;
}

/* On a wide screen the conversation is a column, not a strip: a 1440px-wide
   chat header puts the adviser's name a long way from the messages. */
@media (min-width: 64em) {
	.page-template-page-chat .msh-chat-main { background: var(--wp--preset--color--surface-alt); }

	.page-template-page-chat .lgo-chat {
		width: min(100%, 50rem);
		margin-inline: auto;
		box-shadow: 0 0 0 1px var(--wp--preset--color--border), 0 30px 60px -40px rgba(6, 29, 78, 0.35);
	}
}

.page-template-page-chat .msh-header { position: static; }
.page-template-page-chat .lgo-sticky-call { display: none; }