/* MFC Blocks 1.2.0, PREVIEW ?mfc_quiz=3: the quiz teaser with motion and depth (owner r5: "make it clearly more
   attractive, motion / 3D"). Loaded only with the flag. Same copy, same answers, same click flow as ?mfc_quiz=2.
   - dark card with one blue light (Gladia-style glow behind floating UI), a slow live-chart line drifting behind
   - progress ring 1/3 that fills on entry (Deezer quiz ring), answers as a 3D-tilted card deck (Meiro dark quiz cards)
   - cursor parallax (quiz3.js sets --mx / --my, -1..1), idle float; transform / opacity / stroke only: CLS 0
   - prefers-reduced-motion: everything static, final state. */
body.mfc-b-quiz3 .elementor-element.mfc-q2-host {
	background: #07080B !important; border: 1px solid #1E2128 !important; border-radius: 20px !important;
	box-shadow: 0 40px 80px -48px rgba(0, 40, 120, .55) !important; overflow: hidden; isolation: isolate;
}
.mfc-q3 {
	--mx: 0; --my: 0; position: relative; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: 0; font-family: var(--mfc-b-unica); color: #fff; text-align: left; min-height: 340px;
}
.mfc-q3 * { box-sizing: border-box; }
/* background: chart line + area, drifting slowly; a blue light that follows the cursor a little */
.mfc-q3-bg { position: absolute; inset: auto 0 0 0; height: 62%; pointer-events: none; z-index: 0; overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.mfc-q3-bg svg { display: block; width: 200%; height: 100%; animation: mfc-q3-drift 26s linear infinite; }
.mfc-q3-bg .l { fill: none; stroke: #2F7BFF; stroke-width: 1.6; vector-effect: non-scaling-stroke; opacity: .55;
	stroke-dasharray: 2400; stroke-dashoffset: 0; }
.mfc-q3-bg .a { fill: rgba(0, 106, 255, .07); stroke: none; }
@keyframes mfc-q3-drift { from { transform: translateX(0); } to { transform: translateX(-25%); } }
.mfc-q3-glow {
	position: absolute; z-index: 0; pointer-events: none; width: 520px; height: 520px; right: -120px; top: -180px; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 106, 255, .42), rgba(0, 106, 255, .12) 55%, rgba(0, 106, 255, 0));
	transform: translate3d(calc(var(--mx) * 28px), calc(var(--my) * 22px), 0); transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.mfc-q3-l, .mfc-q3-r { position: relative; z-index: 1; }
.mfc-q3-l { padding: 40px 40px 40px 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; }
.mfc-q3 .mfc-q2-eb { margin: 6px 0 0; font-size: 13px; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; color: #9AA0AB; }
.mfc-q3 .mfc-q2-h { margin: 0; font-family: inherit; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; font-weight: 500; color: #fff; text-transform: none; }
.mfc-q3 .mfc-q2-p { margin: 0; font-size: 16px; line-height: 1.5; color: #AEB3BC; max-width: 380px; }
/* progress ring */
.mfc-q3-ring { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.mfc-q3-ring svg { position: absolute; inset: 0; width: 64px; height: 64px; transform: rotate(-90deg); overflow: visible; }
.mfc-q3-ring circle { fill: none; stroke-width: 4; }
.mfc-q3-ring .t { stroke: #1E2128; }
.mfc-q3-ring .v { stroke: #2F7BFF; stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--o); filter: drop-shadow(0 0 6px rgba(47, 123, 255, .9)); transition: stroke-dashoffset 1.2s cubic-bezier(.2, .7, .2, 1) .2s; }
.mfc-q3-ring b { position: relative; font-size: 20px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.mfc-q3-ring small { font-size: 12px; color: #6B717C; margin-left: 1px; }
.mfc-q3-ring::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(47, 123, 255, .18); animation: mfc-q3-pulse 2.8s ease-out infinite; }
@keyframes mfc-q3-pulse { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.25); opacity: 0; } }
body .mfc-q3 .mfc-q2-more {
	all: unset; cursor: pointer; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mfc-b-unica);
	font-size: 14px; font-weight: 500; color: #fff; padding: 2px 0;
}
body .mfc-q3 .mfc-q2-more:hover { text-decoration: underline; }
body .mfc-q3 .mfc-q2-more:focus-visible { outline: 2px solid #4D8DFF; outline-offset: 3px; border-radius: 4px; }
.mfc-q3 .mfc-q2-more svg { width: 12px; height: 10px; }
/* right: question + the 3D deck */
.mfc-q3-r { padding: 36px 64px 40px 12px; display: flex; flex-direction: column; justify-content: center; gap: 12px; perspective: 1000px; }
.mfc-q3-step { margin: 0; font-size: 13px; color: #6B717C; font-variant-numeric: tabular-nums; }
.mfc-q3 .mfc-q2-q { margin: 0 0 6px; font-size: 22px; line-height: 1.25; font-weight: 500; color: #fff; letter-spacing: -.01em; }
.mfc-q3-deck {
	display: grid; gap: 12px; transform-style: preserve-3d;
	transform: rotateX(calc(8deg - var(--my) * 6deg)) rotateY(calc(-14deg + var(--mx) * 10deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
body .mfc-q3 .mfc-q3-a {
	all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px;
	border-radius: 14px; color: #fff; font-family: var(--mfc-b-unica); text-align: left;
	background: linear-gradient(160deg, rgba(36, 40, 50, .92), rgba(18, 20, 26, .92)); border: 1px solid #2A2D33;
	box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
	transform: translateZ(calc(var(--i) * -18px + 24px)) translateX(calc(var(--i) * 18px));
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .2s ease, box-shadow .3s ease;
	animation: mfc-q3-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -3s);
}
@keyframes mfc-q3-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.mfc-q3-a i { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #5B616E; transition: border-color .2s ease, box-shadow .2s ease; }
.mfc-q3-a span { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mfc-q3-a b { font-size: 16.5px; font-weight: 500; line-height: 1.25; color: #fff; }
.mfc-q3-a small { font-size: 13px; line-height: 1.35; color: #9AA0AB; }
.mfc-q3-a svg { flex: 0 0 12px; width: 12px; height: 10px; color: #6B717C; transition: transform .2s ease, color .2s ease; }
body .mfc-q3 .mfc-q3-a:hover, body .mfc-q3 .mfc-q3-a:focus-visible {
	border-color: #2F7BFF; transform: translateZ(56px) translateX(calc(var(--i) * 18px - 6px));
	box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .95), 0 0 0 1px rgba(47, 123, 255, .35), 0 0 28px -4px rgba(47, 123, 255, .45);
}
.mfc-q3-a:hover i, .mfc-q3-a:focus-visible i { border-color: #2F7BFF; box-shadow: inset 0 0 0 4px #14161B, inset 0 0 0 10px #2F7BFF; }
.mfc-q3-a:hover svg, .mfc-q3-a:focus-visible svg { color: #fff; transform: translateX(3px); }
body .mfc-q3 .mfc-q3-a:focus-visible { outline: 2px solid #4D8DFF; outline-offset: 3px; }
/* entry (quiz3.js adds .q3-pre before the card is in view, .q3-in when it is) */
.mfc-q3.q3-pre .mfc-q3-ring .v { stroke-dashoffset: var(--c); }
.mfc-q3.q3-pre .mfc-q3-a { opacity: 0; scale: .92; }
.mfc-q3.q3-in .mfc-q3-a { transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .2s ease, box-shadow .3s ease, opacity .6s ease calc(.25s + var(--i) * .14s), scale .8s cubic-bezier(.2, .7, .2, 1) calc(.25s + var(--i) * .14s); }
.mfc-q3.q3-pre .mfc-q3-bg .l { stroke-dashoffset: 2400; }
.mfc-q3.q3-in .mfc-q3-bg .l { transition: stroke-dashoffset 2.4s ease .1s; }
@media (max-width: 900px) {
	.mfc-q3 { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.mfc-q3-l { padding: 28px 22px 8px; }
	.mfc-q3-r { padding: 16px 22px 28px; }
	.mfc-q3 .mfc-q2-h { font-size: 26px; }
	.mfc-q3 .mfc-q2-q { font-size: 19px; }
	.mfc-q3-deck { transform: rotateX(calc(6deg - var(--my) * 4deg)) rotateY(calc(-6deg + var(--mx) * 6deg)); }
	body .mfc-q3 .mfc-q3-a { transform: translateZ(calc(var(--i) * -10px + 8px)) translateX(calc(var(--i) * 6px)); min-height: 68px; }
	body .mfc-q3 .mfc-q3-a:hover, body .mfc-q3 .mfc-q3-a:focus-visible { transform: translateZ(20px); }
	.mfc-q3-deck { margin-right: 8px; }
	.mfc-q3-glow { width: 360px; height: 360px; right: -140px; top: -140px; }
	.mfc-q3-bg { height: 40%; }
	.mfc-q3 .mfc-q2-more { order: 9; }
}
@media (prefers-reduced-motion: reduce) {
	.mfc-q3-bg svg, .mfc-q3-ring::after, body .mfc-q3 .mfc-q3-a { animation: none !important; }
	.mfc-q3-glow, .mfc-q3-deck, body .mfc-q3 .mfc-q3-a, .mfc-q3-ring .v { transition: none !important; }
	.mfc-q3-deck { transform: rotateX(6deg) rotateY(-10deg); }
}

/* plan finder link under "Start the quiz" (plan-finder kit 20261017) */
body .mfc-q3 .mfc-q2-pf { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #9AA0AB; text-decoration: none; }
body .mfc-q3 .mfc-q2-pf:hover { color: #fff; text-decoration: underline; }
body .mfc-q3 .mfc-q2-pf:focus-visible { outline: 2px solid #4D8DFF; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 900px) { .mfc-q3 .mfc-q2-pf { order: 10; } }
[dir="rtl"] .mfc-q2-pf svg { transform: scaleX(-1); }