/* MFC home film 1.0.0 (owner 21 Oct): the film beside the four steps (chapters), and the payout planet in "Verify, don't trust.".
   Light section stays light: one dark film card, calm list of steps. Scoped to body.mfc-hf-on / .mfc-pl. */

/* ---------- Film + chapters ---------- */
html body.mfc-hf-on .mfc-b-steps .e-con.mfc-hf-host {
	display: grid !important; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 56px; row-gap: 48px; align-items: center !important;
}
html body.mfc-hf-on .mfc-hf-host > .elementor-element-50321345 { grid-column: 1 / -1; }
html body.mfc-hf-on .mfc-hf-host > .mfc-hf-fw { grid-column: 1; grid-row: 2; width: 100% !important; max-width: 100% !important; margin: 0 !important; }
html body.mfc-hf-on .mfc-hf-host > .mfc-hf-ch { grid-column: 2; grid-row: 2; }

.mfc-hf-film {
	position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: #05070B; isolation: isolate;
	box-shadow: 0 34px 64px -34px rgba(0, 30, 90, .5), 0 0 0 1px rgba(10, 11, 13, .06);
}
.mfc-hf-poster, .mfc-hf-poster img, .mfc-hf-v { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mfc-hf-poster img { object-fit: cover; }
.mfc-hf-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .55)); }
.mfc-hf-v { object-fit: contain; background: #000; z-index: 2; }
.mfc-hf-film.is-on .mfc-hf-play, .mfc-hf-film.is-on .mfc-hf-poster { visibility: hidden; }
button.mfc-hf-play {
	position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0 !important; border-radius: 0;
	background: transparent !important; box-shadow: none !important; cursor: pointer; color: #fff; font: inherit; text-align: left;
}
.mfc-hf-pi {
	position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; display: grid; place-items: center;
	background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.mfc-hf-pi svg { width: 28px; height: 28px; margin-left: 3px; color: #fff; }
button.mfc-hf-play:hover .mfc-hf-pi, button.mfc-hf-play:focus-visible .mfc-hf-pi { transform: scale(1.06); background: #006AFF; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 0 36px rgba(0, 106, 255, .65); }
button.mfc-hf-play:focus-visible { outline: 2px solid #006AFF; outline-offset: -4px; }
.mfc-hf-pl { position: absolute; inset-inline-start: 24px; bottom: 20px; display: flex; align-items: baseline; gap: 10px; font: 500 16px/1.2 var(--mfc-b-unica, inherit); color: #fff; letter-spacing: -.005em; }
.mfc-hf-pl small { font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }

/* steps -> chapters: one vertical list (the live step copy and facts stay) */
html body.mfc-hf-on .mfc-b-steps .elementor-element.elementor-element-6302ba8a.mfc-hf-ch { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; grid-auto-rows: auto !important; gap: 4px !important; }
html body.mfc-hf-on .mfc-b-steps .elementor-element-6302ba8a.mfc-hf-ch > .e-con.e-con {
	flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 16px !important;
	padding: 14px 12px 16px !important; border-radius: 14px !important; transition: background-color .2s ease;
}
html body.mfc-hf-on .mfc-b-steps .elementor-element-6302ba8a.mfc-hf-ch > .e-con.e-con::after { display: none !important; }
html body.mfc-hf-on .mfc-b-steps .elementor-element-6302ba8a.mfc-hf-ch > .e-con.e-con:hover { background-color: #F4F6FA !important; }
html body.mfc-hf-on .mfc-b-steps .elementor-element-6302ba8a.mfc-hf-ch > .e-con.e-con[data-hf-on] { background-color: #EEF4FF !important; }
html body.mfc-hf-on .mfc-hf-ch :is(.elementor-element-19190a4e, .elementor-element-7da0e2a8, .elementor-element-2bd79475, .elementor-element-3d1dfe79) {
	position: static !important; flex: 1 1 auto !important; width: auto !important; padding: 6px 0 0 !important; padding-inline-end: 44px !important; gap: 6px !important;
}
html body.mfc-hf-on .mfc-hf-ch :is(.elementor-element-73e771d7, .elementor-element-14648572, .elementor-element-58033538, .elementor-element-2ef23cc3) .elementor-heading-title { font-size: 18px !important; }
html body.mfc-hf-on .mfc-hf-ch :is(.elementor-element-2f95db8c, .elementor-element-5059e5f7, .elementor-element-362b9c07, .elementor-element-34c46a85) .elementor-heading-title { font-size: 14.5px !important; }
html body.mfc-hf-on .mfc-hf-ch .elementor-widget-html:is(.elementor-element-f0d2e1s0, .elementor-element-f0d2e1s1, .elementor-element-f0d2e1s2, .elementor-element-f0d2e1s3) { padding-top: 6px !important; }
html body.mfc-hf-on .mfc-hf-ch .elementor-widget.number { box-shadow: inset 0 0 0 1.5px #006AFF !important; transition: background-color .2s ease; }
html body.mfc-hf-on .mfc-hf-host.mfc-hf-run .mfc-hf-ch > .e-con:first-child:not([data-hf-on]) .elementor-widget.number { background: #fff !important; }
html body.mfc-hf-on .mfc-hf-host.mfc-hf-run .mfc-hf-ch > .e-con:first-child:not([data-hf-on]) .elementor-widget.number .elementor-heading-title.elementor-heading-title { color: #006AFF !important; -webkit-text-fill-color: #006AFF !important; }
html body.mfc-hf-on .mfc-hf-ch > .e-con[data-hf-on] .elementor-widget.number { background: #006AFF !important; }
html body.mfc-hf-on .mfc-hf-ch > .e-con[data-hf-on] .elementor-widget.number .elementor-heading-title.elementor-heading-title { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body.mfc-hf-on .mfc-hf-ch .elementor-widget-html.mfc-hf-chw { position: static !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }
button.mfc-hf-go {
	position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0 !important; border-radius: 14px;
	background: transparent !important; box-shadow: none !important; cursor: pointer; font: inherit; color: inherit;
}
button.mfc-hf-go:focus-visible { outline: 2px solid #006AFF; outline-offset: 0; }
.mfc-hf-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mfc-hf-tc { position: absolute; top: 22px; inset-inline-end: 14px; font: 400 13px/1 var(--mfc-b-unica, inherit); color: #5B616E; font-variant-numeric: tabular-nums; pointer-events: none; }
.mfc-hf-ch > .e-con[data-hf-on] .mfc-hf-tc { color: #006AFF; }
/* progress: a track from each dot down the step, the blue part follows the film */
.mfc-hf-bar { position: absolute; top: 58px; bottom: -12px; inset-inline-start: 29px; width: 2px; border-radius: 2px; background: #E3E8F2; pointer-events: none; overflow: hidden; }
.mfc-hf-ch > .e-con:last-child .mfc-hf-bar { bottom: 16px; }
.mfc-hf-bar::after { content: ""; position: absolute; inset: 0; background: #006AFF; transform-origin: 50% 0; transform: scaleY(var(--hf-p, 0)); transition: transform .3s linear; }

@media (max-width: 1024px) {
	html body.mfc-hf-on .mfc-b-steps .e-con.mfc-hf-host { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	html body.mfc-hf-on .mfc-hf-host > .mfc-hf-ch { grid-column: 1; grid-row: 3; }
}
@media (max-width: 767px) {
	html body.mfc-hf-on .mfc-b-steps .e-con.mfc-hf-host { row-gap: 24px; }
	.mfc-hf-film { border-radius: 16px; margin: 0 -4px; }
	.mfc-hf-pi { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
	.mfc-hf-pi svg { width: 24px; height: 24px; }
	.mfc-hf-pl { inset-inline-start: 16px; bottom: 14px; font-size: 15px; }
	html body.mfc-hf-on .mfc-b-steps .elementor-element-6302ba8a.mfc-hf-ch > .e-con.e-con { padding: 12px 8px 14px !important; }
	.mfc-hf-bar { top: 54px; inset-inline-start: 25px; }
	.mfc-hf-tc { top: 20px; inset-inline-end: 10px; }
}
@media (prefers-reduced-motion: reduce) {
	.mfc-hf-pi, .mfc-hf-bar::after, html body.mfc-hf-on .mfc-b-steps .elementor-element-6302ba8a.mfc-hf-ch > .e-con.e-con { transition: none !important; }
}

/* ---------- Payout planet (inside "Verify, don't trust.", between the head and the strips) ---------- */
.mfc-pl { position: relative; height: 400px; margin: 24px 0 -24px; pointer-events: none; }
.mfc-pl-cv { position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; display: block; }
@media (max-width: 1024px) { .mfc-pl { height: 330px; } }
@media (max-width: 767px) { .mfc-pl { height: 260px; margin: 8px 0 -16px; } }
