/*
 * LifeStamp branding, matched to the "BP Quiz Build + funnel - ML V2"
 * assessment (assets/css/assessment.css in that plugin): its black, bone and
 * white palette, its type scale, its button treatment, and the masthead and
 * footer bar it frames every screen with.
 *
 * Loaded after build/style-quiz.css and scoped one level deeper
 * (`.ml-brand .ml-quiz …`), so it wins without touching the built bundle,
 * whose source is not shipped in this copy of the plugin. The fonts are the
 * ones the bundle already self-hosts: Neue Haas Display for body copy and
 * Freight Big Cmp Pro Bold Italic for headings, the same pair BP uses.
 *
 * The operator's Appearance colours still apply: they arrive as `--ml-bg`,
 * `--ml-accent`, `--ml-fg`, `--ml-muted` and `--ml-faint` in the inline
 * style on `.ml-brand` and `.ml-quiz`, and everything below reads them
 * rather than hard-coding the ink.
 */

/* ---- Frame: masthead, content, footer bar. */

.ml-brand {
	--ml-bone: #edece6;
	--ml-border: #cbc9c0;
	/* Square, as on lifestampbranding.com: LifeStamp's fields, buttons and
	 * cards have sharp edges, so BP's 2px rounding is dropped. */
	--ml-brand-radius: 0;

	background: var( --ml-bg, #fff );
	color: var( --ml-fg, #111 );
	color-scheme: light;
	display: flex;
	flex-direction: column;
	font-family: "NeueHaas", "Neue Haas Display", arial, helvetica, sans-serif;
	line-height: 1.5;
	min-height: 100vh;
	padding: 0;
	box-sizing: border-box;

	/* Full-bleed breakout, as in BP: Astra's content column would otherwise
	 * hold the frame to the theme's content width, and its block-layout rule
	 * out-specifies a single class, hence !important. */
	max-width: none !important;
	margin-left: calc( 50% - 50vw ) !important;
	margin-right: calc( 50% - 50vw ) !important;
}

/* 100vw counts the scrollbar and % does not, so the breakout overshoots by
 * half a scrollbar on each side; clip it on pages that carry a quiz only. */
html:has( .ml-brand ),
body:has( .ml-brand ) {
	overflow-x: hidden;
}

/* The preview screen is already full width, with its own bar above. */
body.ml-preview {
	background: #fff;
}

body.ml-preview .ml-brand {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The operator's preview bar, lined up with the masthead under it: the same
 * 96px gutters, the frame's border and muted grey, square corners. */
body.ml-preview .ml-preview-bar {
	background: #fff;
	border-bottom: 1px solid #cbc9c0;
	font-family: "NeueHaas", "Neue Haas Display", arial, helvetica, sans-serif;
	height: 56px;
	padding: 0 96px;
}

body.ml-preview .ml-preview-brand {
	font-family: "FreightBig", "Freight Big Cmp Pro", georgia, serif;
	font-size: 20px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

body.ml-preview .ml-preview-badge {
	border: 1px solid #cbc9c0;
	border-radius: 0;
	color: #595951;
	font-size: 11px;
	letter-spacing: 0.08em;
	line-height: 1.5;
	padding: 4px 10px;
}

body.ml-preview .ml-preview-exit,
body.ml-preview .ml-preview-exit:visited {
	color: #595951;
	font-size: 13px;
	text-decoration: underline;
}

body.ml-preview .ml-preview-exit:hover,
body.ml-preview .ml-preview-exit:focus {
	color: #111;
}

@media ( max-width: 820px ) {
	body.ml-preview .ml-preview-bar {
		padding: 0 24px;
	}
}

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

/* Colours from ML Quiz → Header, set inline on the element; the defaults
 * are LifeStamp's black header with white type. */
.ml-brand-masthead {
	align-items: center;
	background: var( --ml-header-bg, #000 );
	color: var( --ml-header-text, #fff );
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	padding: 26px 96px;
}

.ml-brand-word,
.ml-brand-word:visited {
	color: inherit !important;
	font-family: georgia, serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-decoration: none !important;
	text-transform: uppercase;
}

.ml-brand-word:hover,
.ml-brand-word:focus {
	color: inherit !important;
	text-decoration: underline !important;
}

/* !important: the theme's own `img { height: auto }` style rules would
 * otherwise draw the logo at its full 1024px upload size. */
.ml-brand .ml-brand-logo {
	display: block;
	height: 48px !important;
	max-width: 280px !important;
	object-fit: contain;
	object-position: left center;
	width: auto !important;
}

.ml-brand-kicker {
	color: var( --ml-header-text, #fff );
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ml-brand > .ml-quiz {
	align-self: stretch;
	flex: 1 0 auto;
}

.ml-brand-footer {
	border-top: 1px solid var( --ml-border );
	color: var( --ml-muted, #595951 );
	display: flex;
	flex-wrap: wrap;
	font-size: 11px;
	gap: 8px 24px;
	justify-content: space-between;
	letter-spacing: 0.06em;
	padding: 18px 96px;
	text-transform: uppercase;
}

/* ---- Palette and base type inside the quiz. */

.ml-brand .ml-quiz {
	--ml-surface: #fff;
	--ml-surface-ink: #111;
	--ml-border: #cbc9c0;
	--ml-border-hover: #111;
	--ml-danger: #b3261e;
	--ml-t: 180ms;
	--ml-ease: ease;
	--ml-display: "FreightBig", "Freight Big Cmp Pro", georgia, "Times New Roman", serif;
	--ml-body: "NeueHaas", "Neue Haas Display", arial, helvetica, sans-serif;

	font-size: 16px;
	line-height: 1.5;
}

/* The quiz column is the bundle's own .quiz-wrap (centred, 52px 24px 100px
 * padding), widened from 920px so the answer cards have room on desktop.
 * Only the masthead and footer run full width. */
.ml-brand .ml-quiz .quiz-wrap {
	max-width: 1320px;
}

/* ---- Headings: Freight Big bold italic, BP's scale. */

.ml-brand .ml-quiz .intro-title,
.ml-brand .ml-quiz .question-prompt,
.ml-brand .ml-quiz .capture-title,
.ml-brand .ml-quiz .results-name,
.ml-brand .ml-quiz .result-card-name,
.ml-brand .ml-quiz .cta-title,
.ml-brand .ml-quiz .transition-text {
	font-family: var( --ml-display );
	font-style: italic;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ml-brand .ml-quiz .intro-title,
.ml-brand .ml-quiz .results-name {
	font-size: 96px;
	line-height: 100px;
	margin-bottom: 24px;
}

.ml-brand .ml-quiz .question-prompt,
.ml-brand .ml-quiz .capture-title {
	font-size: 40px;
	line-height: 1.15;
	margin-bottom: 24px;
}

/* The question itself: 46px on desktop, 38px on mobile. */
.ml-brand .ml-quiz .question-prompt {
	font-size: 46px;
}

/* "Your Results Are Ready": 52px on desktop, 48px on mobile. */
.ml-brand .ml-quiz .capture-title {
	font-size: 52px;
}

@media ( max-width: 767px ) {
	.ml-brand .ml-quiz .question-prompt {
		font-size: 38px;
	}

	.ml-brand .ml-quiz .capture-title {
		font-size: 48px;
	}
}

.ml-brand .ml-quiz .result-card-name {
	font-size: 32px;
	line-height: 1.15;
}

/* "Explore the Full Brand Personality Guide": 40px on desktop, 32px on mobile. */
.ml-brand .ml-quiz .cta-title {
	font-size: 40px;
	line-height: 1.15;
	margin-bottom: 14px;
}

@media ( max-width: 767px ) {
	.ml-brand .ml-quiz .cta-title {
		font-size: 32px;
	}
}

.ml-brand .ml-quiz .transition-text {
	color: var( --ml-fg );
	font-size: 26px;
}

/* ---- Body copy and eyebrows. */

.ml-brand .ml-quiz .intro-body,
.ml-brand .ml-quiz .capture-body,
.ml-brand .ml-quiz .results-blend,
.ml-brand .ml-quiz .cta-body,
.ml-brand .ml-quiz .result-def {
	font-size: 16px;
	line-height: 1.6;
}

.ml-brand .ml-quiz .intro-rule {
	background: var( --ml-fg );
}

.ml-brand .ml-quiz .intro-badge,
.ml-brand .ml-quiz .capture-eyebrow,
.ml-brand .ml-quiz .results-eyebrow,
.ml-brand .ml-quiz .progress-label,
.ml-brand .ml-quiz .rep-title,
.ml-brand .ml-quiz .result-card-label {
	color: var( --ml-muted );
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---- Progress: BP's 3px rounded meter. */

.ml-brand .ml-quiz .progress-track {
	border-radius: 0;
	height: 3px;
}

.ml-brand .ml-quiz .progress-fill {
	border-radius: 0;
	transition: width 200ms ease;
}

/* ---- Answer options: white tiles, bone on hover, ink when picked. */

.ml-brand .ml-quiz .opt {
	background: var( --ml-surface ) !important;
	border: 1px solid var( --ml-border );
	border-radius: var( --ml-brand-radius );
	color: var( --ml-surface-ink ) !important;
	font: inherit;
	padding: 14px 16px;
	transition: border-color 150ms ease, background 150ms ease, transform 180ms ease;
}

.ml-brand .ml-quiz .opt:hover:not( .is-selected ):not( .is-disabled ),
.ml-brand .ml-quiz .opt:focus:not( .is-selected ):not( .is-disabled ) {
	background: var( --ml-bone ) !important;
	border-color: var( --ml-surface-ink );
}

.ml-brand .ml-quiz .opt.is-selected,
.ml-brand .ml-quiz .opt.is-selected:hover,
.ml-brand .ml-quiz .opt.is-selected:focus {
	background: var( --ml-surface-ink ) !important;
	border-color: var( --ml-surface-ink );
	color: var( --ml-surface ) !important;
}

/* Image tiles keep their white card when picked, as in the bundle. */
.ml-brand .ml-quiz .opt.opt-image.is-selected,
.ml-brand .ml-quiz .opt.opt-image.is-selected:hover,
.ml-brand .ml-quiz .opt.opt-image.is-selected:focus {
	background: var( --ml-surface ) !important;
	color: var( --ml-surface-ink ) !important;
}

/* Image and icon tiles lay out their own insides; BP's tile padding is for
 * plain-text options only, and on an image tile it frames the photo. */
.ml-brand .ml-quiz .opt.opt-image {
	padding: 0;
}

.ml-brand .ml-quiz .opt.opt-icon {
	padding: 20px 14px 16px;
}

/* Answer text in BP's choice face: Neue Haas Display regular, 15px,
 * stepping up to medium once picked. */
.ml-brand .ml-quiz .opt-text,
.ml-brand .ml-quiz .opt-label {
	font-family: var( --ml-body );
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
}

.ml-brand .ml-quiz .opt.is-selected .opt-text,
.ml-brand .ml-quiz .opt.is-selected .opt-label {
	font-weight: 500;
}

.ml-brand .ml-quiz .opt-body {
	padding: 14px 16px;
}

/* "Select up to 4": BP's helper line — small, regular, muted. */
.ml-brand .ml-quiz .question-limit {
	color: var( --ml-muted );
	font-family: var( --ml-body );
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
}

.ml-brand .ml-quiz .opt-checkbox {
	border: 1.5px solid var( --ml-border );
	border-radius: var( --ml-brand-radius );
	height: 18px;
	width: 18px;
}

.ml-brand .ml-quiz .opt-check {
	border-radius: var( --ml-brand-radius );
}

.ml-brand .ml-quiz .opt-icon-wrap,
.ml-brand .ml-quiz .opt-scene {
	background: var( --ml-bone );
}

/* The bundle fixes the picture at 118px tall, which leaves a thin strip
 * once the cards widen. A 4:3 frame grows with the card instead, at every
 * screen width. */
.ml-brand .ml-quiz .opt-scene {
	aspect-ratio: 4 / 3;
	height: auto;
}

/* ---- Buttons: a port of BP's three, `.bbra-btn-primary`,
 * `.bbra-next-btn` and `.bbra-link-btn`, with the per-screen sizes BP gives
 * each one.
 *
 *   ML button                      BP counterpart
 *   intro Begin    (.next-btn)     landing CTA    (.bbra-landing-cta)
 *   question Next  (.quiz-nav …)   question Next  (.bbra-question-nav …)
 *   Reveal results (.submit-btn)   inquiry submit (.bbra-inquiry-submit …)
 *   results CTA    (.dl-btn)       plan CTA       (.bbra-plan-cta-btn)
 *   Back / Restart                 .bbra-link-btn.bbra-back-btn
 */

/* .bbra-btn-primary */
.ml-brand .ml-quiz .next-btn,
.ml-brand .ml-quiz .submit-btn,
.ml-brand .ml-quiz .dl-btn,
.ml-brand .ml-quiz .dl-btn:visited {
	align-items: center;
	background: var( --ml-accent ) !important;
	border: none !important;
	border-radius: var( --ml-brand-radius );
	box-shadow: none !important;
	color: var( --ml-accent-ink ) !important;
	cursor: pointer;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.5;
	padding: 12px 20px;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, filter 180ms ease;
}

/* Hover holds the ink — Astra paints buttons blue on hover/focus site-wide —
 * and BP's primary lifts 1px and eases to 90% opacity. */
.ml-brand .ml-quiz .next-btn:hover,
.ml-brand .ml-quiz .next-btn:focus,
.ml-brand .ml-quiz .next-btn:active,
.ml-brand .ml-quiz .submit-btn:hover,
.ml-brand .ml-quiz .submit-btn:focus,
.ml-brand .ml-quiz .submit-btn:active,
.ml-brand .ml-quiz .dl-btn:hover,
.ml-brand .ml-quiz .dl-btn:focus,
.ml-brand .ml-quiz .dl-btn:active {
	background: var( --ml-accent ) !important;
	color: var( --ml-accent-ink ) !important;
	opacity: 0.9;
}

.ml-brand .ml-quiz .next-btn:hover,
.ml-brand .ml-quiz .submit-btn:not( :disabled ):hover,
.ml-brand .ml-quiz .dl-btn:hover {
	transform: translateY( -1px );
}

/* The bundle's arrow, drawn to BP's: 1em square, a hairline stroke. */
.ml-brand .ml-quiz .next-btn svg,
.ml-brand .ml-quiz .submit-btn svg,
.ml-brand .ml-quiz .dl-btn svg {
	flex-shrink: 0;
	height: 1em;
	stroke-width: 2.2;
	width: 1em;
}

/* .bbra-btn-primary:disabled — the submit while it is sending. */
.ml-brand .ml-quiz .submit-btn:disabled,
.ml-brand .ml-quiz .submit-btn:disabled:hover {
	cursor: not-allowed;
	opacity: 0.4;
	transform: none;
}

/* .bbra-next-btn: the "go forward" buttons — Next and the submit — glow a
 * touch on hover, slide their arrow 4px and press down 1px. */
.ml-brand .ml-quiz .quiz-nav .next-btn,
.ml-brand .ml-quiz .submit-btn {
	column-gap: 10px;
	display: flex;
	justify-content: center;
}

.ml-brand .ml-quiz .quiz-nav .next-btn svg,
.ml-brand .ml-quiz .submit-btn svg {
	transition: transform 180ms ease;
}

.ml-brand .ml-quiz .quiz-nav .next-btn:hover,
.ml-brand .ml-quiz .submit-btn:not( :disabled ):hover {
	filter: brightness( 1.15 );
}

.ml-brand .ml-quiz .quiz-nav .next-btn:hover svg,
.ml-brand .ml-quiz .submit-btn:not( :disabled ):hover svg {
	transform: translateX( 4px );
}

.ml-brand .ml-quiz .quiz-nav .next-btn:active,
.ml-brand .ml-quiz .submit-btn:not( :disabled ):active {
	transform: translateY( 1px );
}

/* .bbra-pulse: BP gives Next a small "reward" pulse the moment the first
 * answer enables it. The bundle adds `is-visible` at exactly that moment,
 * so the animation keys off it. */
@keyframes ml-btn-pulse {
	0% { transform: scale( 1 ); }
	50% { transform: scale( 1.015 ); }
	100% { transform: scale( 1 ); }
}

.ml-brand .ml-quiz .quiz-nav .next-btn.is-visible {
	animation: ml-btn-pulse 260ms ease;
}

/* Intro Begin = .bbra-landing-cta: content-width, roomier padding. */
.ml-brand .ml-quiz .screen > .next-btn {
	column-gap: 8px;
	display: inline-flex;
	margin-top: 0;
	padding: 14px 24px;
	width: auto;
}

/* Reveal My Results = .bbra-inquiry-submit .bbra-btn-primary: full width. */
.ml-brand .ml-quiz .submit-btn {
	margin-top: 4px;
	width: 100%;
}

/* Results CTA = .bbra-plan-cta-btn: an inline primary, content-width, with
 * the same forward arrow, padding and hover as the section buttons. */
.ml-brand .ml-quiz .dl-btn {
	column-gap: 10px;
	display: inline-flex;
	margin-top: 8px;
	padding: 14px 26px;
	width: auto;
}

.ml-brand .ml-quiz .dl-btn svg {
	transition: transform 180ms ease;
}

.ml-brand .ml-quiz .dl-btn:hover {
	filter: brightness( 1.15 );
}

.ml-brand .ml-quiz .dl-btn:hover svg {
	transform: translateX( 4px );
}

/* .bbra-link-btn:focus-visible and .bbra-btn-primary's equivalent. */
.ml-brand .ml-quiz .next-btn:focus-visible,
.ml-brand .ml-quiz .submit-btn:focus-visible,
.ml-brand .ml-quiz .dl-btn:focus-visible,
.ml-brand .ml-quiz .back-btn:focus-visible,
.ml-brand .ml-quiz .restart-btn:focus-visible {
	outline: 2px solid var( --ml-fg );
	outline-offset: 2px;
}

/* Back / Start over and Restart = .bbra-link-btn.bbra-back-btn: a muted,
 * underlined text link in the body face, no box, nudging left on hover. The
 * bundle prints the arrow as part of the label, so it moves with the text. */
.ml-brand .ml-quiz .back-btn,
.ml-brand .ml-quiz .back-btn:hover,
.ml-brand .ml-quiz .back-btn:focus,
.ml-brand .ml-quiz .back-btn:active,
.ml-brand .ml-quiz .restart-btn,
.ml-brand .ml-quiz .restart-btn:hover,
.ml-brand .ml-quiz .restart-btn:focus,
.ml-brand .ml-quiz .restart-btn:active {
	align-items: center;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var( --ml-muted ) !important;
	column-gap: 10px;
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	font: inherit;
	letter-spacing: normal;
	min-width: 0;
	opacity: 1;
	padding: 4px 0;
	text-decoration: underline;
	text-transform: none;
	transition: transform 180ms ease;
}

.ml-brand .ml-quiz .back-btn:hover,
.ml-brand .ml-quiz .restart-btn:hover {
	transform: translateX( -3px );
}

.ml-brand .ml-quiz .back-btn {
	margin: 0;
}

/* Restart sits under the results at the left edge, only as wide as its
 * label. Every state is listed because the link-button rule above sets
 * `display: inline-flex` on :hover too, which would otherwise change how the
 * link is placed while the cursor is on it. */
.ml-brand .ml-quiz .restart-btn,
.ml-brand .ml-quiz .restart-btn:hover,
.ml-brand .ml-quiz .restart-btn:focus,
.ml-brand .ml-quiz .restart-btn:active {
	display: flex;
	margin: 28px auto 0 0;
	width: fit-content;
}

/* BP's question-nav row: Back on the left, Next filling most of the row. */
.ml-brand .ml-quiz .quiz-nav {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-top: 20px;
}

@media ( min-width: 821px ) {
	.ml-brand .ml-quiz .quiz-nav {
		margin-top: 44px;
	}

	/* Content-width, like BP's section buttons, rather than BP's 86% bar. */
	.ml-brand .ml-quiz .quiz-nav .next-btn {
		padding: 14px 26px;
		width: auto;
	}
}

/* Phones: Next first and full, Back compact on its right; the DOM order —
 * and so the tab order — stays Back, then Next. */
@media ( max-width: 820px ) {
	.ml-brand .ml-quiz .quiz-nav {
		flex-direction: row-reverse;
	}

	.ml-brand .ml-quiz .quiz-nav .next-btn {
		flex: 1 1 auto;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ml-brand .ml-quiz .next-btn,
	.ml-brand .ml-quiz .submit-btn,
	.ml-brand .ml-quiz .dl-btn,
	.ml-brand .ml-quiz .back-btn,
	.ml-brand .ml-quiz .restart-btn,
	.ml-brand .ml-quiz .next-btn svg,
	.ml-brand .ml-quiz .submit-btn svg,
	.ml-brand .ml-quiz .dl-btn svg {
		animation: none !important;
		transition: none;
	}

	.ml-brand .ml-quiz .next-btn:hover,
	.ml-brand .ml-quiz .next-btn:active,
	.ml-brand .ml-quiz .submit-btn:hover,
	.ml-brand .ml-quiz .submit-btn:active,
	.ml-brand .ml-quiz .dl-btn:hover,
	.ml-brand .ml-quiz .back-btn:hover,
	.ml-brand .ml-quiz .restart-btn:hover,
	.ml-brand .ml-quiz .next-btn:hover svg,
	.ml-brand .ml-quiz .submit-btn:hover svg,
	.ml-brand .ml-quiz .dl-btn:hover svg {
		filter: none;
		transform: none;
	}
}

/* ---- Lead-capture form. */

.ml-brand .ml-quiz .form-lbl {
	color: var( --ml-fg );
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

/* Body copy as wide as the form below it, with the guide's points one per
 * line (assets/js/quiz.js splits them out at each "•"). */
.ml-brand .ml-quiz .capture-body {
	margin-bottom: 32px;
	max-width: none;
}

.ml-brand .ml-quiz .capture-lead {
	margin: 0 0 10px;
}

.ml-brand .ml-quiz .capture-points {
	display: flex;
	flex-direction: column;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ml-brand .ml-quiz .capture-points li {
	align-items: flex-start;
	display: flex;
	gap: 12px;
	margin: 0;
}

/* A small square marker, the results screen's .s-dot. */
.ml-brand .ml-quiz .capture-points li::before {
	background: var( --ml-fg );
	content: "";
	flex-shrink: 0;
	height: 5px;
	margin-top: 0.65em;
	width: 5px;
}

/* One grid: two equal columns, the same gutter across and down. */
.ml-brand .ml-quiz .form-row-2 {
	column-gap: 16px;
}

.ml-brand .ml-quiz .form-field {
	gap: 8px;
	margin-bottom: 20px;
}

/* Every control the same 50px height and square-edged — !important on the
 * corners because themes round inputs with their own element rules. */
.ml-brand .ml-quiz .form-inp {
	border: 1px solid var( --ml-border );
	border-radius: 0 !important;
	font-size: 16px;
	height: 50px;
	line-height: 24px;
	min-height: 50px;
	padding: 12px 14px;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

/* Room for the bundle's chevron. */
.ml-brand .ml-quiz select.form-inp {
	padding-right: 38px;
}

.ml-brand .ml-quiz .submit-btn {
	border-radius: 0 !important;
	min-height: 50px;
}

.ml-brand .ml-quiz .form-inp:focus {
	border-color: var( --ml-surface-ink ) !important;
	box-shadow: 0 0 0 3px rgba( 17, 17, 17, 0.08 ) !important;
	outline: none !important;
}

.ml-brand .ml-quiz .form-inp.is-invalid {
	border-color: var( --ml-danger );
}

.ml-brand .ml-quiz .privacy {
	color: var( --ml-muted );
	font-size: 12px;
}

/* ---- Results. */

/* The blend sentence runs the full column, wrapping only when it must. */
.ml-brand .ml-quiz .results-blend {
	color: var( --ml-fg );
	margin-bottom: 32px;
}

/* An archetype's image inside its result card. On desktop it takes a left
 * column beside the definition and content blocks and stays in view while
 * the text beside it scrolls. Mobile stacks the two, image first. */
.ml-brand .ml-quiz .result-card-body.has-image {
	align-items: start;
	display: grid;
	gap: 40px;
	grid-template-columns: minmax( 0, 5fr ) minmax( 0, 7fr );
}

/* A closed card keeps its body hidden: the grid display above would
 * otherwise outrank the browser's own [hidden] rule and show it anyway. */
.ml-brand .ml-quiz .result-card-body[hidden],
.ml-brand .ml-quiz .result-card-body.has-image[hidden] {
	display: none;
}

.ml-brand .ml-quiz .result-img-wrap {
	background: none;
	margin: 0;
	max-height: none;
	position: sticky;
	top: 24px;
}

/* Every result image the same size: the column's full width at 3:2, the
 * shape most of the archetype images already are (The Magician, The
 * Explorer, The Sage, 653x435). Shown at their own shapes, a landscape image
 * came out short and a portrait one (The Everyman, The Hero, 503x893) tall,
 * so no two cards matched. An image of another shape is cropped to fill the
 * frame, never stretched, and aimed above its centre so a face stays in
 * view. Mobile uses the same frame. */
.ml-brand .ml-quiz .result-img {
	aspect-ratio: 3 / 2;
	display: block;
	height: auto;
	max-height: none;
	max-width: 100%;
	object-fit: cover;
	object-position: center 25%;
	width: 100%;
}

@media ( max-width: 767px ) {
	.ml-brand .ml-quiz .result-card-body.has-image {
		display: block;
	}

	.ml-brand .ml-quiz .result-img-wrap {
		margin-bottom: 20px;
		position: static;
	}

	/* Every result the same size: the card's full width at 3:2, which is
	 * the shape of most of the images. A portrait image is cropped to fit,
	 * and aimed above its centre so a face stays in the frame. */
	.ml-brand .ml-quiz .result-img {
		aspect-ratio: 3 / 2;
		max-height: none;
		object-fit: cover;
		object-position: center 25%;
		width: 100%;
	}
}

/* The optional image from ML Quiz → Results Page, full width above the cards. */
.ml-brand .ml-quiz .results-img-wrap {
	background: var( --ml-bone );
	margin-bottom: 32px;
	overflow: hidden;
}

.ml-brand .ml-quiz .results-img {
	display: block;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	width: 100%;
}

.ml-brand .ml-quiz .result-card {
	background: var( --ml-bone );
	border: 1px solid var( --ml-border );
	border-radius: var( --ml-brand-radius );
}

/* Black with white text, on every card. */
.ml-brand .ml-quiz .result-match-pct {
	background: #000;
	border-radius: 0;
	color: #fff;
}

.ml-brand .ml-quiz .tag {
	border: 1px solid var( --ml-border );
	border-radius: 0;
	color: var( --ml-fg );
	font-size: 14px;
	padding: 8px 16px;
}

/* A dark panel, so the offer reads as its own block after the result cards;
 * its button is reversed to white on ink to stay the strongest thing in it. */
.ml-brand .ml-quiz .cta-box {
	background: #111;
	border: none;
	border-radius: 0;
	margin: 48px 0 24px;
	padding: 48px;
}

.ml-brand .ml-quiz .cta-box .cta-title,
.ml-brand .ml-quiz .cta-box .cta-body {
	color: #fff;
}

.ml-brand .ml-quiz .cta-box .dl-btn,
.ml-brand .ml-quiz .cta-box .dl-btn:visited,
.ml-brand .ml-quiz .cta-box .dl-btn:hover,
.ml-brand .ml-quiz .cta-box .dl-btn:focus,
.ml-brand .ml-quiz .cta-box .dl-btn:active {
	background: #fff !important;
	color: #111 !important;
}

.ml-brand .ml-quiz .cta-box .dl-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media ( max-width: 767px ) {
	.ml-brand .ml-quiz .cta-box {
		padding: 32px 24px;
	}
}

/* ---- Sections, step tracker and saved progress (assets/js/quiz.js),
 * ported from BP's .bbra-navrail, .bbra-progress-compact,
 * .bbra-section-transition and .bbra-resume-banner. */

.ml-brand .ml-quiz .ml-navrail {
	margin-bottom: 40px;
}

/* One step per question, spread across the column. */
.ml-brand .ml-quiz .ml-navrail-steps {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ml-brand .ml-quiz .ml-navrail-steps li {
	margin: 0;
	padding: 0;
}

/* A reachable step is a link back to its question. */
.ml-brand .ml-quiz button.ml-navrail-step,
.ml-brand .ml-quiz button.ml-navrail-step:hover,
.ml-brand .ml-quiz button.ml-navrail-step:focus {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	cursor: pointer;
	padding: 0;
}

.ml-brand .ml-quiz button.ml-navrail-step:hover .ml-navrail-dot {
	border-color: var( --ml-fg ) !important;
	transform: scale( 1.1 );
}

.ml-brand .ml-quiz button.ml-navrail-step:focus-visible {
	outline: 2px solid var( --ml-fg );
	outline-offset: 3px;
}

.ml-brand .ml-quiz .ml-navrail-step.is-locked {
	cursor: default;
	opacity: 0.45;
}

.ml-brand .ml-quiz .ml-navrail-step {
	align-items: center;
	color: var( --ml-muted );
	display: flex;
	font-size: 13px;
	gap: 8px;
	line-height: 1;
	white-space: nowrap;
}

.ml-brand .ml-quiz .ml-navrail-dot {
	align-items: center;
	transition: transform 150ms ease, border-color 150ms ease;
	background: var( --ml-surface );
	border: 1px solid var( --ml-border );
	border-radius: 50%;
	color: var( --ml-muted );
	display: flex;
	flex-shrink: 0;
	font-family: georgia, serif;
	font-size: 12px;
	font-style: italic;
	height: 28px;
	justify-content: center;
	line-height: 1;
	width: 28px;
}

.ml-brand .ml-quiz .ml-navrail-step.is-done .ml-navrail-dot,
.ml-brand .ml-quiz .ml-navrail-step.is-current .ml-navrail-dot {
	background: var( --ml-fg );
	border-color: var( --ml-fg );
	color: var( --ml-bg, #fff );
}

.ml-brand .ml-quiz .ml-navrail-step.is-current {
	color: var( --ml-fg );
	font-weight: 700;
}

.ml-brand .ml-quiz .ml-navrail-meter {
	background: var( --ml-border );
	border-radius: 0;
	height: 3px;
	margin-top: 16px;
	overflow: hidden;
}

.ml-brand .ml-quiz .ml-navrail-meter-fill {
	background: var( --ml-fg );
	height: 100%;
	transition: width 200ms ease;
}

.ml-brand .ml-quiz .ml-navrail-count-row {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
}

/* Set like .ml-navrail-question, which shares this row. */
.ml-brand .ml-quiz .ml-navrail-count {
	color: var( --ml-muted );
	font-size: 11px;
	letter-spacing: 0.08em;
	margin-left: auto;
	text-align: right;
	text-transform: uppercase;
}

.ml-brand .ml-quiz .ml-progress-compact {
	display: none;
}

.ml-brand .ml-quiz .ml-sr-only {
	border: 0;
	clip: rect( 0, 0, 0, 0 );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* Narrow screens trade the step names for one segmented bar per section. */
@media ( max-width: 1024px ) {
	.ml-brand .ml-quiz .ml-navrail-steps,
	.ml-brand .ml-quiz .ml-navrail-meter,
	.ml-brand .ml-quiz .ml-navrail-count {
		display: none;
	}

	.ml-brand .ml-quiz .ml-progress-compact {
		display: block;
	}

	/* Set like the wide-screen count row: uppercase, tracked out. */
	.ml-brand .ml-quiz .ml-progress-compact-top {
		align-items: baseline;
		color: var( --ml-muted );
		display: flex;
		font-size: 11px;
		gap: 12px;
		justify-content: space-between;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.ml-brand .ml-quiz .ml-progress-compact-segs {
		display: flex;
		gap: 6px;
		margin-top: 12px;
	}

	.ml-brand .ml-quiz .ml-progress-seg {
		background: var( --ml-border );
		border-radius: 0;
		flex: 1 1 0;
		height: 6px;
		overflow: hidden;
		position: relative;
	}

	.ml-brand .ml-quiz .ml-progress-seg.is-current {
		box-shadow: 0 0 0 1px var( --ml-fg );
	}

	.ml-brand .ml-quiz .ml-progress-seg-fill {
		background: var( --ml-fg );
		border-radius: inherit;
		inset: 0 auto 0 0;
		position: absolute;
		transition: width 200ms ease;
	}

	.ml-brand .ml-quiz .ml-navrail-count-row {
		margin-top: 10px;
	}
}

/* BP's .bbra-question-counter, moved onto the count row under the meter. */
.ml-brand .ml-quiz .ml-navrail-question {
	color: var( --ml-muted );
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Narrow screens already show "Question X of Y" above the segmented bars. */
@media ( max-width: 1024px ) {
	.ml-brand .ml-quiz .ml-navrail-question {
		display: none;
	}
}

/* Revisiting an answered question: Next is already there, no pulse. */
.ml-brand .ml-quiz .quiz-nav .next-btn.is-settled {
	animation: none;
}

/* BP's .bbra-link-btn, for "Review this section" and "Start over instead". */
.ml-brand .ml-quiz .ml-link-btn,
.ml-brand .ml-quiz .ml-link-btn:hover,
.ml-brand .ml-quiz .ml-link-btn:focus,
.ml-brand .ml-quiz .ml-link-btn:active {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var( --ml-muted ) !important;
	cursor: pointer;
	font: inherit;
	letter-spacing: normal;
	padding: 4px 0;
	text-decoration: underline;
	text-transform: none;
}

.ml-brand .ml-quiz .ml-link-btn:hover {
	color: var( --ml-fg ) !important;
}

.ml-brand .ml-quiz .ml-link-btn:focus-visible {
	outline: 2px solid var( --ml-fg );
	outline-offset: 2px;
}

/* BP's .bbra-back-btn spacing above the capture screen. */
.ml-brand .ml-quiz .ml-capture-back {
	margin-bottom: 16px;
}

/* BP's .bbra-resume-banner, as a slim bone strip heading the page: the
 * message on the left, the way out on the right, clear of the tracker. */
.ml-brand .ml-quiz .ml-resume-banner {
	align-items: center;
	background: var( --ml-bone );
	border-left: 2px solid var( --ml-fg );
	color: #111;
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
	gap: 6px 24px;
	justify-content: space-between;
	margin-bottom: 36px;
	padding: 14px 20px;
}

.ml-brand .ml-quiz .ml-resume-banner .ml-link-btn,
.ml-brand .ml-quiz .ml-resume-banner .ml-link-btn:hover,
.ml-brand .ml-quiz .ml-resume-banner .ml-link-btn:focus {
	color: #111 !important;
	flex-shrink: 0;
	font-size: 13px;
	padding: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.ml-brand .ml-quiz .ml-navrail-meter-fill,
	.ml-brand .ml-quiz .ml-progress-seg-fill,
	.ml-brand .ml-quiz .ml-navrail-dot {
		transition: none;
	}

	.ml-brand .ml-quiz button.ml-navrail-step:hover .ml-navrail-dot {
		transform: none;
	}
}

/* ---- Small screens: BP's 24px gutters, 50px display headings. */

@media ( max-width: 820px ) {
	.ml-brand-masthead,
	.ml-brand-footer {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media ( max-width: 480px ) {
	.ml-brand .ml-quiz .intro-title,
	.ml-brand .ml-quiz .results-name {
		font-size: 50px;
		line-height: 50px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ml-brand .ml-quiz .opt,
	.ml-brand .ml-quiz .form-inp {
		transition: none;
	}

	.ml-brand .ml-quiz .opt:hover {
		transform: none !important;
	}
}

/* ---- Share your result: a button, and the dialog it opens. ---- */

/* The title on the left, the share button top right; on phones the button
 * drops under the title. */
.ml-brand .ml-quiz .results-head {
	align-items: flex-start;
	display: flex;
	gap: 24px;
	justify-content: space-between;
}

.ml-brand .ml-quiz .results-head-title {
	min-width: 0;
}

.ml-brand .ml-quiz .ml-share {
	flex-shrink: 0;
}

.ml-brand .ml-quiz .results-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin-top: 40px;
}

/* The row owns the spacing; its items bring none of their own. */
.ml-brand .ml-quiz .results-actions > *,
.ml-brand .ml-quiz .results-actions .restart-btn {
	margin: 0 !important;
}

/* Platform buttons: a square icon tile each. */
.ml-brand .ml-quiz .ml-share-btn.is-icon {
	height: 48px;
	justify-content: center;
	padding: 0;
	width: 48px;
}

.ml-brand .ml-quiz .ml-share-open,
.ml-brand .ml-quiz .ml-share-open:visited {
	font-size: 16px;
	font-weight: 700;
	gap: 10px;
	letter-spacing: 0.04em;
	padding: 14px 24px;
	text-transform: uppercase;
}

@media ( max-width: 767px ) {
	.ml-brand .ml-quiz .results-head {
		flex-direction: column;
		gap: 0;
	}

	.ml-brand .ml-quiz .ml-share {
		margin-bottom: 24px;
	}
}

.ml-brand .ml-quiz .ml-share-dialog {
	background: var( --ml-surface, #fff );
	border: 1px solid var( --ml-border );
	border-radius: var( --ml-brand-radius );
	color: var( --ml-fg, #111 );
	max-height: calc( 100vh - 32px );
	max-width: min( 680px, calc( 100vw - 32px ) );
	padding: 0;
	width: 100%;
}

.ml-brand .ml-quiz .ml-share-dialog::backdrop {
	background: rgba( 0, 0, 0, 0.6 );
}

.ml-brand .ml-quiz .ml-share-dialog-inner {
	padding: 24px;
}

.ml-brand .ml-quiz .ml-share-dialog-head {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 16px;
}

.ml-brand .ml-quiz .ml-share-title {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.ml-brand .ml-quiz .ml-share-close {
	align-items: center;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	color: var( --ml-fg, #111 ) !important;
	cursor: pointer;
	display: inline-flex;
	margin: -8px -8px -8px 0;
	padding: 8px;
}

.ml-brand .ml-quiz .ml-share-close:focus-visible {
	outline: 2px solid var( --ml-fg, #111 );
}

.ml-brand .ml-quiz .ml-share-banner {
	border: 1px solid var( --ml-border );
	display: block;
	height: auto;
	margin-bottom: 16px;
	width: 100%;
}

.ml-brand .ml-quiz .ml-share-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ml-brand .ml-quiz .ml-share-btn,
.ml-brand .ml-quiz .ml-share-btn:visited {
	align-items: center;
	background: var( --ml-surface, #fff ) !important;
	border: 1px solid var( --ml-border ) !important;
	border-radius: var( --ml-brand-radius );
	box-shadow: none !important;
	color: var( --ml-fg, #111 ) !important;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	line-height: 1.5;
	padding: 9px 16px;
	text-decoration: none !important;
	transition: border-color var( --ml-t, 180ms ) ease;
}

.ml-brand .ml-quiz .ml-share-btn:hover,
.ml-brand .ml-quiz .ml-share-btn:focus-visible {
	border-color: var( --ml-border-hover, #111 ) !important;
	color: var( --ml-fg, #111 ) !important;
}

.ml-brand .ml-quiz .ml-share-btn:focus-visible {
	outline: 2px solid var( --ml-fg, #111 );
	outline-offset: 2px;
}

.ml-brand .ml-quiz .ml-share-status {
	color: var( --ml-muted, #585858 );
	display: block;
	font-size: 13px;
	margin-top: 8px;
	min-height: 1.5em;
}

.ml-brand .ml-quiz .ml-take-quiz {
	margin-top: 32px;
}

.ml-brand .ml-quiz .ml-take-quiz-link,
.ml-brand .ml-quiz .ml-take-quiz-link:visited {
	align-items: center;
	color: var( --ml-fg, #111 ) !important;
	display: inline-flex;
	font-size: 15px;
	font-weight: 500;
	gap: 8px;
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.ml-brand .ml-quiz .ml-take-quiz-link:hover,
.ml-brand .ml-quiz .ml-take-quiz-link:focus {
	color: var( --ml-fg, #111 ) !important;
	text-decoration-thickness: 2px;
}

.ml-brand .ml-quiz .ml-take-quiz-link:focus-visible {
	outline: 2px solid var( --ml-fg, #111 );
	outline-offset: 3px;
}