/*
 * MMC Whitelabel Quote Engine - form styles.
 * Every colour comes from a CSS custom property set per partner, so a
 * whitelabel skin never needs a stylesheet of its own.
 */

.mmcf {
	--ink: #eef2f8;
	--ink-2: #c6d2e2;
	--paper: #1a2c50;
	--paper-2: #1f335c;
	--card: #10213f;
	--line: rgba(255, 255, 255, .12);
	--line-strong: #39507a;
	--muted: #94a6c0;
	--brand: #2bb86a;
	--brand-soft: rgba(43, 184, 106, .16);
	--blue: #5d9bf0;
	--cta: #23b06a;
	--cta-deep: #1b8d52;
	--danger: #e8765d;
	--danger-soft: rgba(232, 118, 93, .16);
	--radius: 14px;
	--shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 18px 40px -18px rgba(0, 0, 0, .55);
	font-family: Arial, Helvetica, sans-serif;
	color: var(--ink);
	line-height: 1.55;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

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

.mmcf .wrap { max-width: 820px; margin: 0 auto; }

.mmcf .card {
	background: var(--card);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}

/* Hero ------------------------------------------------------------- */

.mmcf .hero { padding: 26px 26px 22px; border-bottom: 1px solid var(--line); }

.mmcf .kicker {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 9px;
}

.mmcf .hero h1 {
	margin: 0;
	font-weight: 900;
	font-size: clamp(24px, 4vw, 32px);
	line-height: 1.06;
	letter-spacing: -.02em;
	color: var(--ink);
}

.mmcf .hero h1 em { font-style: normal; color: var(--blue); }
.mmcf .hero p { margin: 10px 0 0; color: var(--muted); font-size: 15.5px; max-width: 56ch; }

.mmcf .trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.mmcf .trust span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 7px 13px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-2);
}

.mmcf .trust span::before { content: "\2713"; color: var(--brand); font-weight: 700; }

/* Accordion --------------------------------------------------------- */

.mmcf .acc { border-bottom: 1px solid var(--line); }
.mmcf .acc:last-of-type { border-bottom: none; }

.mmcf .acc-head {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	cursor: pointer;
	padding: 20px 26px;
	font: inherit;
	color: var(--ink);
}

.mmcf .acc.locked .acc-head { cursor: not-allowed; opacity: .5; }
.mmcf .acc-num { font-weight: 900; color: var(--blue); font-size: 24px; line-height: 1; min-width: 26px; }
.mmcf .acc-title { font-weight: 700; font-size: 16.5px; }

.mmcf .acc-tick {
	margin-left: auto;
	width: 23px;
	height: 23px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	display: none;
	place-items: center;
	font-size: 13px;
	flex-shrink: 0;
}

.mmcf .acc.done .acc-tick { display: grid; }
.mmcf .acc-chev { color: var(--muted); transition: transform .25s; font-size: 13px; }
.mmcf .acc.done .acc-chev { margin-left: 10px; }
.mmcf .acc:not(.done) .acc-chev { margin-left: auto; }
.mmcf .acc.open .acc-chev { transform: rotate(180deg); }

.mmcf .acc-body { display: none; padding: 0 26px 24px; }
.mmcf .acc.open .acc-body { display: block; animation: mmcqFade .28s ease both; }
.mmcf .acc-sub { color: var(--muted); font-size: 14px; margin: -2px 0 18px; }

@keyframes mmcqFade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* Fields ------------------------------------------------------------ */

.mmcf .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mmcf .field { display: flex; flex-direction: column; gap: 7px; text-align: left; }
.mmcf .field.full { grid-column: 1 / -1; }
.mmcf .field.half { grid-column: span 1; }

.mmcf label { font-weight: 500; font-size: 14px; color: var(--ink-2); }
.mmcf label .req { color: var(--cta-deep); }
.mmcf .hint { font-size: 12.5px; color: var(--muted); font-weight: 400; margin: -3px 0 0; }
.mmcf .mmcq-heading { font-size: 16px; margin: 8px 0 0; color: var(--ink); }

.mmcf input,
.mmcf select,
.mmcf textarea {
	font-family: inherit;
	font-size: 15px;
	color: var(--ink);
	-webkit-text-fill-color: var(--ink);
	caret-color: var(--ink);
	background: var(--paper);
	border: 1.5px solid var(--line-strong);
	border-radius: 10px;
	padding: 12px 13px;
	width: 100%;
	transition: .18s;
	appearance: none;
}

.mmcf select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6b80' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 38px;
	cursor: pointer;
}

.mmcf input:focus,
.mmcf select:focus {
	outline: none;
	border-color: var(--blue);
	background: var(--card);
	box-shadow: 0 0 0 4px rgba(79, 143, 224, .16);
}

.mmcf input:-webkit-autofill,
.mmcf input:-webkit-autofill:hover,
.mmcf input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ink) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--paper) inset !important;
	transition: background-color 9999s ease-out 0s;
}

.mmcf input::placeholder { color: #9aa6b6; -webkit-text-fill-color: #9aa6b6; }
.mmcf input.filled,
.mmcf select.filled { border-color: var(--brand); }
.mmcf .input-ok { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-soft) !important; }
.mmcf .input-bad { border-color: var(--danger) !important; }

/* Honeypot: off-screen, never focusable. */
.mmcf .mmcq-hp {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* Conditional fields */
.mmcf .gate { display: none; }
.mmcf .gate.is-shown { display: flex; }
.mmcf .gate.is-shown[data-counter-group] { display: block; }

/* Option cards ------------------------------------------------------ */

.mmcf .opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.mmcf .opts.opts-stack { grid-template-columns: 1fr; }

.mmcf .opt {
	text-align: left;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	padding: 13px 16px 13px 44px;
	border-radius: 10px;
	border: 1.5px solid var(--line-strong);
	background: var(--paper);
	color: var(--ink);
	transition: .15s;
	position: relative;
}

.mmcf .opt::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--line-strong);
	transition: .15s;
}

.mmcf .opt:hover { border-color: var(--blue); }
.mmcf .opt.sel { background: var(--blue); color: #0b1b35; border-color: var(--blue); }
.mmcf .opt.sel::before { border-color: #0b1b35; background: radial-gradient(circle, #0b1b35 0 5px, transparent 6px); }
.mmcf .opts-bad .opt { border-color: var(--danger); }

/* Checkbox chips ---------------------------------------------------- */

.mmcf .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mmcf .chip { position: relative; cursor: pointer; }
.mmcf .chip input { position: absolute; opacity: 0; pointer-events: none; }

.mmcf .chip span {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 14px;
	border-radius: 11px;
	border: 1.5px solid var(--line-strong);
	background: var(--paper);
	font-weight: 500;
	font-size: 14.5px;
	transition: .16s;
	height: 100%;
}

.mmcf .chip span::before {
	content: "";
	width: 19px;
	height: 19px;
	border-radius: 6px;
	flex-shrink: 0;
	border: 1.5px solid var(--line-strong);
	background: var(--card);
	transition: .16s;
}

.mmcf .chip:hover span { border-color: var(--brand); }

/* A choice that does not apply to this answer. Explicit, so a future display
   rule on .chip cannot quietly beat the browser's own hidden styling. */
.mmcf .chip[hidden] { display: none; }

/* Marks a cover we have suggested for this kind of business. It sits inside
   the chip's label, pushed to the end, and must never look like a control. */
.mmcf .chip-tag {
	margin-left: auto;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	font-style: normal;
	color: var(--brand);
	background: var(--brand-soft);
	padding: 3px 7px;
	border-radius: 6px;
	white-space: nowrap;
}
.mmcf .chip input:checked + span { border-color: var(--brand); background: var(--brand-soft); font-weight: 600; }

.mmcf .chip input:checked + span::before {
	background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center no-repeat;
	border-color: var(--brand);
}

/* Counter groups ---------------------------------------------------- */

.mmcf .veh-grid { display: flex; flex-direction: column; gap: 4px; }

.mmcf .veh-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
}

.mmcf .veh-row:last-child { border-bottom: none; }
.mmcf .veh-label { font-size: 14.5px; color: var(--ink); font-weight: 500; }
.mmcf .stepper { display: flex; align-items: center; flex-shrink: 0; }

.mmcf .stepper button {
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 9px;
	cursor: pointer;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--blue);
	color: #0b1b35;
	transition: .15s;
}

.mmcf .stepper button:hover { filter: brightness(1.08); }
.mmcf .stepper button.step-down { background: var(--paper-2); color: var(--ink-2); }

.mmcf .stepper input {
	width: 62px;
	text-align: center;
	margin: 0 8px;
	padding: 9px 4px;
	-moz-appearance: textfield;
	appearance: textfield;
}

.mmcf .stepper input::-webkit-outer-spin-button,
.mmcf .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mmcf .core-cover {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	background: var(--brand-soft);
	border: 1px solid var(--brand);
	border-radius: 12px;
	padding: 15px 17px;
}

.mmcf .core-tick {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	flex-shrink: 0;
}

.mmcf .core-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.mmcf .core-desc { font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }

/* Address block ----------------------------------------------------- */

.mmcf .control { display: flex; flex-direction: column; gap: 6px; }
.mmcf .sublabel { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.mmcf .addr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mmcf [data-lookup="address"] { gap: 12px; }

/* Status + autocomplete --------------------------------------------- */

.mmcf .fstatus { font-size: 12.5px; font-weight: 600; margin-top: 3px; display: none; align-items: center; gap: 6px; }
.mmcf .fstatus.show { display: flex; }
.mmcf .fstatus.ok { color: var(--brand); }
.mmcf .fstatus.bad { color: var(--danger); }
.mmcf .fstatus.checking { color: var(--muted); }
.mmcf .fstatus.ok::before { content: "\2713"; }
.mmcf .fstatus.bad::before { content: "\2715"; }

.mmcf .spin {
	width: 13px;
	height: 13px;
	border: 2px solid var(--line-strong);
	border-top-color: var(--brand);
	border-radius: 50%;
	animation: mmcqSpin .7s linear infinite;
	display: inline-block;
}

@keyframes mmcqSpin { to { transform: rotate(360deg); } }

.mmcf .ac-wrap { position: relative; }

.mmcf .ac-list {
	position: absolute;
	z-index: 40;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	background: var(--card);
	border: 1.5px solid var(--line-strong);
	border-radius: 10px;
	box-shadow: 0 16px 34px -12px rgba(16, 33, 63, .5);
	max-height: 280px;
	overflow: auto;
	display: none;
}

.mmcf .ac-list.show { display: block; }

.mmcf .ac-item {
	padding: 11px 14px;
	font-size: 14px;
	cursor: pointer;
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: center;
	gap: 9px;
}

.mmcf .ac-item:last-child { border-bottom: none; }
.mmcf .ac-item:hover { background: var(--brand-soft); }
.mmcf .ac-item .chev { margin-left: auto; color: var(--muted); font-weight: 700; }
.mmcf .ac-empty { padding: 11px 14px; font-size: 13.5px; color: var(--muted); }
.mmcf .ac-sub2 { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Consent + actions -------------------------------------------------- */

.mmcf .consent {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px 17px;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.6;
	margin-top: 22px;
}

.mmcf .consent a { color: var(--brand); font-weight: 600; text-decoration: none; }
.mmcf .consent a:hover { text-decoration: underline; }

.mmcf .agree { display: flex; align-items: flex-start; gap: 11px; margin-top: 14px; cursor: pointer; }
.mmcf .agree input { position: absolute; opacity: 0; }

.mmcf .agree .box {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border: 1.5px solid var(--line-strong);
	background: var(--card);
	flex-shrink: 0;
	margin-top: 1px;
	transition: .16s;
}

.mmcf .agree input:checked + .box {
	background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center no-repeat;
	border-color: var(--brand);
}

.mmcf .agree-label { font-weight: 500; font-size: 14px; color: var(--ink); }
.mmcf .acc-actions { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.mmcf .sec-err {
	display: none;
	width: 100%;
	background: var(--danger-soft);
	border: 1px solid var(--danger);
	color: var(--danger);
	border-radius: 10px;
	padding: 10px 13px;
	font-size: 13px;
	font-weight: 600;
	margin: 0;
}

.mmcf .sec-err.show { display: block; }

.mmcf .btn-next {
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	border: none;
	cursor: pointer;
	padding: 12px 28px;
	border-radius: 10px;
	background: var(--blue);
	color: #0b1b35;
	transition: .18s;
}

.mmcf .btn-next:hover { filter: brightness(1.08); }

.mmcf .btn-submit {
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	border: none;
	cursor: pointer;
	padding: 15px 30px;
	border-radius: 12px;
	width: 100%;
	background: linear-gradient(135deg, var(--cta), var(--cta-deep));
	color: #fff;
	transition: .18s;
}

.mmcf .btn-submit:hover { transform: translateY(-1px); }
.mmcf .btn-submit:disabled { opacity: .7; cursor: default; transform: none; }

/* Confirmation, shown in place on the partner's own page ------------------ */
.mmcf .mmcq-thanks { padding: 48px 28px 44px; text-align: center; }
.mmcf .mmcq-thanks:focus { outline: none; }
.mmcf .mmcq-thanks-mark { color: var(--cta); margin: 0 auto 18px; line-height: 0; }
.mmcf .mmcq-thanks h2 { margin: 0 0 12px; font-size: 26px; line-height: 1.25; }
.mmcf .mmcq-thanks-lead { margin: 0 auto 26px; max-width: 46ch; color: var(--ink-2); font-size: 16px; }

.mmcf .mmcq-thanks-ref {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 28px;
	margin: 0 0 26px;
	border: 1px solid var(--line);
	border-radius: calc(var(--radius) - 4px);
	background: var(--field-bg);
}
.mmcf .mmcq-thanks-ref-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.mmcf .mmcq-thanks-ref strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; letter-spacing: .08em; }
.mmcf .mmcq-thanks-ref-note { font-size: 12px; color: var(--muted); }

.mmcf .mmcq-thanks-next { margin: 0 auto 22px; max-width: 52ch; color: var(--ink-2); }
.mmcf .mmcq-thanks-contact { margin: 0 auto 24px; color: var(--muted); font-size: 15px; }
.mmcf .mmcq-thanks-contact a { color: var(--accent); }
.mmcf .mmcq-thanks-cta { margin: 0; }
.mmcf .mmcq-thanks-cta .btn { display: inline-block; text-decoration: none; }

@media (max-width: 520px) {
	.mmcf .mmcq-thanks { padding: 36px 20px 32px; }
	.mmcf .mmcq-thanks h2 { font-size: 22px; }
	.mmcf .mmcq-thanks-ref { display: flex; width: 100%; }
}

/* Standalone whitelabel page ---------------------------------------- */

body.mmcq-quote-page {
	margin: 0;
	background: #1a2c50;
	font-family: Arial, Helvetica, sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.mmcq-page-header {
	padding: 22px 26px;
	max-width: 820px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 16px;
}

.mmcq-logo { display: block; }
.mmcq-wordmark { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.mmcq-header-extra { margin-left: auto; color: #c6d2e2; font-size: 14px; }
.mmcq-page-main { flex: 1; padding: 0 18px 40px; }

.mmcq-page-footer {
	padding: 22px 26px 34px;
	max-width: 820px;
	margin: 0 auto;
	width: 100%;
	color: var(--muted, #94a6c0);
	font-size: 13px;
}

.mmcq-legal { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 14px; }
.mmcq-legal a { color: var(--ink-2, #c6d2e2); text-decoration: none; }
.mmcq-legal a:hover { text-decoration: underline; }
.mmcq-powered { margin-left: auto; opacity: .75; }

/* Our mark, and who is regulated ------------------------------------
 *
 * A disclosure rather than decoration, which is why it is not part of the
 * chrome an embed drops and why it is painted from the partner's own palette:
 * it has to read clearly on a white brand and a near-black one alike.
 */
.mmcq-providedby {
	background: var(--card, #10213f);
	border-bottom: 1px solid var(--line-strong, #39507a);
	width: 100%;
}

.mmcq-providedby-inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 7px 26px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	font-size: 12px;
	line-height: 1;
	color: var(--muted, #94a6c0);
}

.mmcq-provided-label { letter-spacing: .02em; }
.mmcq-provided-link { display: inline-flex; align-items: center; text-decoration: none; }
.mmcq-provided-logo { display: block; width: auto; }
.mmcq-provided-name { font-weight: 700; color: var(--ink-2, #c6d2e2); font-size: 13px; }
.mmcq-provided-link:hover .mmcq-provided-name { text-decoration: underline; }

.mmcq-operator-footer {
	border-top: 1px solid var(--line-strong, #39507a);
	padding-top: 16px;
	margin-top: 4px;
}

.mmcq-page-footer:first-child > .mmcq-operator-footer,
.mmcq-operator-footer:first-child {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

.mmcq-disclosure {
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--muted, #94a6c0);
	max-width: 78ch;
}

.mmcq-disclosure a { color: var(--ink-2, #c6d2e2); }

.mmcq-operator-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 14px 0 0;
}

.mmcq-operator-links a {
	color: var(--blue, #5d9bf0);
	text-decoration: none;
	font-size: 13px;
}

.mmcq-operator-links a:hover { text-decoration: underline; }

.mmcq-copyright {
	background: var(--card, #10213f);
	border-top: 1px solid var(--line-strong, #39507a);
	width: 100%;
}

.mmcq-copyright p {
	max-width: 820px;
	margin: 0 auto;
	padding: 16px 26px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2, #c6d2e2);
}

/* Responsive --------------------------------------------------------- */

@media (max-width: 600px) {
	.mmcf .grid,
	.mmcf .chips,
	.mmcf .addr-two { grid-template-columns: 1fr; }
	.mmcf .hero,
	.mmcf .acc-head,
	.mmcf .acc-body { padding-left: 18px; padding-right: 18px; }
	.mmcf .acc-title { font-size: 15.5px; }
	.mmcf .acc-actions { align-items: stretch; }
	.mmcf .btn-next { width: 100%; }
	.mmcq-legal { flex-direction: column; gap: 8px; }
	.mmcq-powered { margin-left: 0; }
	.mmcq-providedby-inner { justify-content: center; padding: 8px 16px; }
	.mmcq-operator-links { gap: 8px 16px; }
	.mmcq-copyright p { padding: 14px 16px; }
}

/* Accessibility ------------------------------------------------------
 *
 * Group labels replace the bare <label> that used to sit above options,
 * counters and the address block. A <label> with nothing to point at is
 * announced as an empty label, so those became a span the group is
 * pointed at by id instead - they must still look identical.
 */
.mmcf .mmcq-grouplabel { font-weight: 500; font-size: 14px; color: var(--ink-2); }
.mmcf .mmcq-grouplabel .req { color: var(--cta-deep); }

/* Available to a screen reader, invisible on screen. */
.mmcf .mmcq-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Options are now keyboard-navigable, so focus has to be visible. */
.mmcf .opt:focus-visible,
.mmcf .acc-head:focus-visible,
.mmcf .stepper button:focus-visible,
.mmcf .btn-next:focus-visible,
.mmcf .btn-submit:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.mmcf input:focus-visible,
.mmcf select:focus-visible,
.mmcf textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

/* A field flagged invalid reads as invalid without relying on colour. */
.mmcf [aria-invalid="true"] { border-color: var(--danger); }

/* Sending overlay --------------------------------------------------------- *
 * Covers the form while the submission is in flight. The ring spins, then
 * becomes a tick. It sits over the card rather than replacing it, so nothing
 * reflows and the page does not jump under the customer.                     */
.mmcf .mmcq-sending {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: color-mix(in srgb, var(--page-bg) 88%, transparent);
	opacity: 0;
	transition: opacity .24s ease;
}
/* Older browsers get a plain background rather than nothing. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.mmcf .mmcq-sending { background: var(--page-bg); }
}
.mmcf .mmcq-sending.is-visible { opacity: 1; }

.mmcf .mmcq-sending-inner { text-align: center; color: var(--ink); max-width: 30ch; }
.mmcf .mmcq-sending-ring { color: var(--cta); display: block; margin: 0 auto 20px; }

.mmcf .mmcq-ring-track { opacity: .18; }

.mmcf .mmcq-ring-spin {
	stroke-dasharray: 46 200;
	transform-origin: 50% 50%;
	animation: mmcq-ring-turn 1.05s linear infinite;
}

.mmcf .mmcq-ring-tick {
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
}

/* On success the spinner stops, the ring closes, and the tick draws itself. */
.mmcf .mmcq-sending.is-done .mmcq-ring-spin {
	animation: none;
	stroke-dasharray: 145 145;
	transform: rotate(-90deg);
	transition: stroke-dasharray .34s ease-out;
}
.mmcf .mmcq-sending.is-done .mmcq-ring-track { opacity: .28; }
.mmcf .mmcq-sending.is-done .mmcq-ring-tick {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset .36s cubic-bezier(.2, .8, .3, 1) .26s;
}

.mmcf .mmcq-sending-title { margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.mmcf .mmcq-sending-note { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }

@keyframes mmcq-ring-turn {
	to { transform: rotate(360deg); }
}

/* A spinning ring is exactly what somebody turning motion down does not want.
   They still get the state changes, just without anything moving. */
@media (prefers-reduced-motion: reduce) {
	.mmcf .mmcq-sending,
	.mmcf .mmcq-ring-spin,
	.mmcf .mmcq-ring-tick,
	.mmcf .mmcq-sending.is-done .mmcq-ring-spin,
	.mmcf .mmcq-sending.is-done .mmcq-ring-tick {
		animation: none;
		transition: none;
	}
	.mmcf .mmcq-sending { opacity: 1; }
	.mmcf .mmcq-ring-spin { stroke-dasharray: 145 145; transform: rotate(-90deg); transform-origin: 50% 50%; }
	.mmcf .mmcq-sending.is-done .mmcq-ring-tick { stroke-dashoffset: 0; }
}

.mmcf .mmcq-thanks-email {
	display: inline-flex;
	align-items: flex-start;
	gap: 9px;
	text-align: left;
	margin: 0 auto 22px;
	max-width: 46ch;
	padding: 12px 16px;
	border: 1px solid var(--line);
	border-radius: calc(var(--radius) - 6px);
	background: var(--field-bg);
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.5;
}
.mmcf .mmcq-thanks-email svg { flex: none; margin-top: 2px; color: var(--accent); }

/* ---------------------------------------------------------------------------
 * Embedded in a page on the partner's own website.
 *
 * The frame is kept exactly as tall as its contents by the loader script, so
 * there is no scrollbar of ours and nothing here may assume one. Anything that
 * belongs to a page rather than to a form is gone: no page background, no
 * margins, no minimum height.
 * ------------------------------------------------------------------------- */
body.mmcq-embedded {
	margin: 0;
	padding: 0;
	min-height: 0;
	overflow-x: hidden;
}

body.mmcq-embedded .mmcq-page-main {
	padding: 0;
	min-height: 0;
}

body.mmcq-embedded .mmcq-page-footer {
	padding: 14px 16px 18px;
	margin-top: 4px;
}

/* The anchor the sending overlay is positioned against. */
body.mmcq-embedded .mmcf {
	position: relative;
}

/*
 * position:fixed inside a frame covers the frame's viewport, and the frame's
 * viewport is its entire height - which is most of the reason a naive embed
 * feels broken. Pinned to the step the customer is actually looking at
 * instead; form.js sets the offset.
 */
body.mmcq-embedded .mmcf .mmcq-sending {
	position: absolute;
	inset: auto 0 0 0;
	top: 0;
	align-items: flex-start;
	padding-top: 44px;
	min-height: 320px;
}

@media (max-width: 600px) {
	body.mmcq-embedded .mmcf .mmcq-sending {
		padding-top: 28px;
		min-height: 260px;
	}
}

/* The strip and the copyright bar inside a frame ----------------------
 *
 * They stay - the customer is in the same position on the partner's own page
 * as they are on the sub-domain - but they lose the page's side gutters, since
 * the frame is already sitting inside the partner's own layout.
 */
body.mmcq-embedded .mmcq-providedby-inner { padding: 6px 4px; }
body.mmcq-embedded .mmcq-copyright p { padding: 12px 4px; font-size: 12.5px; }
body.mmcq-embedded .mmcq-operator-footer { padding-top: 14px; }

@media (max-width: 600px) {
	body.mmcq-embedded .mmcq-providedby-inner { padding: 6px 4px; }
	body.mmcq-embedded .mmcq-copyright p { padding: 12px 4px; }
}

/* A line of explanation under an option card's label. Cover levels need it:
   the name of a cover type tells most people nothing about what it pays for,
   and putting all three definitions in the hint above the group makes the
   reader hold them in their head while they choose. */
.mmcf .opt small {
	display: block;
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.45;
	margin-top: 4px;
	opacity: .8;
}

/* Registration lookup: a plate box with a button beside it. */
.mmcf .reglookup { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.mmcf .reglookup input {
	flex: 1 1 180px;
	min-width: 150px;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}
.mmcf .reg-btn {
	font: inherit;
	font-weight: 700;
	font-size: 14.5px;
	border: none;
	cursor: pointer;
	border-radius: 10px;
	padding: 0 20px;
	background: var(--blue);
	color: #0b1b35;
	white-space: nowrap;
	transition: .15s;
}
.mmcf .reg-btn:hover { filter: brightness(1.08); }
.mmcf .reg-btn:disabled { opacity: .6; cursor: default; }
.mmcf .reg-result {
	margin-top: 12px;
	padding: 12px 15px;
	border-radius: 10px;
	background: var(--brand-soft);
	border: 1px solid var(--brand);
	font-size: 14px;
	color: var(--ink);
	font-weight: 600;
}
.mmcf .reg-result[hidden] { display: none; }

/* ---------------------------------------------------------------------------
 * The routing gate, and the steps it holds back.
 *
 * The gate is the "is this even the right form" question. It keeps the card's
 * panel styling but loses the header button and the number, because it is not
 * a step of the quote - numbering it would tell the customer they are a fifth
 * of the way through a form they may be about to be sent away from.
 * ------------------------------------------------------------------------ */
.mmcf .mmcq-gate .acc-body { display: block; padding-top: 22px; }
.mmcf .mmcq-gate-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 4px;
}
.mmcf .mmcq-gate .acc-sub { margin: 0 0 14px; }

/* Held back until the gate is answered: one question to start with, not a
 * wall of them. display:none rather than visibility, so nothing inside is
 * focusable or announced while it is waiting. */
.mmcf .mmcq-steps.is-waiting { display: none; }

/* An answer this product cannot serve. Styled like an error because that is
 * what it is from the customer's side - they cannot continue - but it carries
 * a way onward rather than just refusing. */
.mmcf .mmcq-blocked {
	margin-top: 12px;
	padding: 12px 15px;
	border-radius: 10px;
	background: var(--danger-soft);
	border: 1px solid rgba( 232, 118, 93, .5 );
	color: #f3b3a4;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.55;
}
.mmcf .mmcq-blocked a { color: #fff; font-weight: 700; text-decoration: underline; }
.mmcf .opt.opt-blocked { border-color: var(--danger); background: var(--danger-soft); color: #f3b3a4; }
.mmcf .opt.opt-blocked::before { border-color: var(--danger); }