/* MFC design 2 Nov 2026 (mfc-design1102.php). Every rule is scoped by body.d11-<key>; key off = rule gone. */

/* ================= compare: opaque table header + one full-width fixed plan bar (d11.js) ================= */
html body.d11-compare .mpc-t thead th { position: static !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: #fff !important; }
html body.d11-compare .mpc-t thead th.is-rec { background: #F1F6FF !important; }
.d11-cbar { position: fixed; left: 0; right: 0; top: var(--d11-top, 72px); z-index: 998; height: var(--d11-bh, 76px); background: #fff; border-bottom: 1px solid #E4E7EB; box-shadow: 0 10px 24px -18px rgba(10, 11, 13, .35); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, visibility 0s linear .16s; font-family: "Neue Haas Unica", "Helvetica Neue", Arial, sans-serif; color: #0A0B0D; -webkit-font-smoothing: antialiased; }
.d11-cbar.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .16s ease; }
.d11-cbar-c { position: absolute; top: 0; bottom: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 16px; min-width: 0; }
.d11-cbar-c.is-rec { background: #F1F6FF; box-shadow: inset 0 3px 0 #006AFF; }
.d11-cbar-n { font: 500 15px/1.2 "Neue Haas Unica", "Helvetica Neue", Arial, sans-serif !important; color: #0A0B0D !important; text-decoration: none !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d11-cbar-r { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.d11-cbar-p { font: 400 13px/1.2 "Neue Haas Unica", "Helvetica Neue", Arial, sans-serif; color: #5B616E; white-space: nowrap; }
.d11-cbar-p b { font: 500 17px/1.2 "Neue Haas Unica", "Helvetica Neue", Arial, sans-serif; color: #0A0B0D; letter-spacing: -.01em; }
.d11-cbar-go { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid #D5D9DF; background: #fff; color: #0A0B0D !important; font: 500 13px/1 "Neue Haas Unica", "Helvetica Neue", Arial, sans-serif !important; text-decoration: none !important; white-space: nowrap; }
.d11-cbar-go svg { width: 11px; height: 9px; }
.d11-cbar-go.is-rec { background: #006AFF; border-color: #006AFF; color: #fff !important; box-shadow: inset 0 2.4px 1.2px rgba(255,255,255,.2), inset 0 -2.4px 1.2px rgba(0,0,0,.2), 0 1px 2px rgba(10,11,13,.22); }
.d11-cbar-go:hover { border-color: #006AFF; }
.d11-cbar-go:focus-visible, .d11-cbar-n:focus-visible { outline: 2px solid #006AFF; outline-offset: 2px; border-radius: 6px; }
@media (max-width: 767px) {
	.d11-cbar { height: var(--d11-bh, 64px); }
	.d11-cbar-c { left: 0 !important; right: 0; width: auto !important; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; }
	.d11-cbar-c:not(.is-on) { display: none; }
	.d11-cbar-c.is-rec { background: #fff; box-shadow: none; }
	.d11-cbar-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
	.d11-cbar-r { flex: none; }
	.d11-cbar-r .d11-cbar-p { display: none; }
	.d11-cbar-go { min-height: 44px; padding: 0 18px; font-size: 15px !important; border-radius: 12px; }
	.d11-cbar-t .d11-cbar-p { display: block; }
}
@media (min-width: 768px) {
	.d11-cbar-t .d11-cbar-p { display: none; }
	/* tablet: narrow columns (~116 px): name, then price + an arrow-only Choose */
	.d11-cbar.is-narrow .d11-cbar-c { padding: 0 10px; }
	.d11-cbar.is-narrow .d11-cbar-n { font-size: 13px !important; }
	.d11-cbar.is-narrow .d11-cbar-p { font-size: 0; }
	.d11-cbar.is-narrow .d11-cbar-p b { font-size: 16px; }
	.d11-cbar.is-narrow .d11-cbar-go { width: 32px; padding: 0; font-size: 0 !important; gap: 0; }
	.d11-cbar.is-narrow .d11-cbar-go svg { width: 12px; height: 10px; }
}
@media (prefers-reduced-motion: reduce) { .d11-cbar, .d11-cbar.on { transition: none; } }

/* ================= card: product hero coins at the outer corners, chip under the card ================= */
/* CSS fallback card (before / without WebGL): coins outside the card box */
html body.d11-card .mpp-fb .mpp-coin, html body.d11-card .mpp-fb .mpp-orb { left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; }
html body.d11-card .mpp-fb .mpp-coin:not(.c2):not(.c3) { left: -4% !important; top: 2% !important; }
html body.d11-card .mpp-fb .mpp-coin.c2 { right: -3% !important; top: -6% !important; }
html body.d11-card .mpp-fb .mpp-coin.c3 { right: -5% !important; bottom: 4% !important; }
html body.d11-card .mpp-fb .mpp-orb { left: -2% !important; bottom: 0 !important; }
/* the chip sits under the card (WebGL: d11 hero3d.js sets top/left from the projected card) */
html body.d11-card .mpp-stage > .mpp-chip ~ .mpp-chip { top: auto !important; bottom: -34px !important; left: calc(44% - 105px) !important; right: auto !important; }
@media (max-width: 980px) {
	html body.d11-card .mpp-stage > .mpp-chip ~ .mpp-chip { left: calc(50% - 105px) !important; }
}
@media (max-width: 760px) {
	html body.d11-card .mpp-fb .mpp-fbcard { width: min(420px, 80%); }
	html body.d11-card.d28 .mpp .mpp-fb .mpp-fbcard::before { background-size: 92px auto, auto, auto !important; background-position: 18px 18px, 0 0, 0 0 !important; }
	html body.d11-card.d28 .mpp .mpp-fb .mpp-fbcard { padding: 18px 18px !important; }
	html body.d11-card.d28 .mpp .mpp-fb .mpp-fbcard .fb-badge { font-size: 12px !important; padding: 4px 9px !important; max-width: 52%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	html body.d11-card .mpp-fb .mpp-coin { width: 44px !important; height: 44px !important; }
	html body.d11-card .mpp-fb .mpp-coin::after { font-size: 20px !important; }
	html body.d11-card .mpp-fb .mpp-coin.c2 { width: 36px !important; height: 36px !important; }
	html body.d11-card .mpp-fb .mpp-coin.c3 { width: 40px !important; height: 40px !important; }
	html body.d11-card .mpp-fb .mpp-orb { width: 26px !important; height: 26px !important; }
	html body.d11-card .mpp-fb .mpp-coin:not(.c2):not(.c3) { left: 4% !important; top: -6% !important; }
	html body.d11-card .mpp-fb .mpp-coin.c2 { right: 5% !important; top: -3% !important; }
	html body.d11-card .mpp-fb .mpp-coin.c3 { right: 6% !important; bottom: -8% !important; }
	html body.d11-card .mpp-fb .mpp-orb { left: 7% !important; bottom: -4% !important; }
	html body.d11-card .mpp-stage > .mpp-chip ~ .mpp-chip { left: calc(50% - 85px) !important; bottom: -46px !important; }
	/* WebGL canvas centred on the viewport (it ran 190 px wider than the stage to the right: card cut at the edge) */
	html body.d11-card .mpp-3d.d11-3d canvas { left: 50% !important; right: auto !important; top: -60px !important; bottom: auto !important; width: 100vw !important; height: calc(100% + 100px) !important; transform: translateX(-50%); }
}

/* ================= blog: light article body, dark cover/hero and dark closing band ================= */
html body.d11-blog.mfc-bv2 .bv2-body, html body.d11-blog.mfc-bv2 .bv2-related {
	--bv2-surface: #F4F5F7; --bv2-line: rgba(10, 11, 13, .10); --bv2-line-2: rgba(10, 11, 13, .18);
	--bv2-text: #0A0B0D; --bv2-body: #2B2F36; --bv2-muted: #4A505B; --bv2-dim: #5B616E; --bv2-link: #0057D9;
	position: relative; isolation: isolate; color: var(--bv2-body);
}
/* white band, full width; the standard horizon (BG-v1 flipped, as on /blog/) opens it under the hero */
html body.d11-blog.mfc-bv2 .bv2-body { border-top: 0; margin-top: 8px; padding-top: calc(200px + 56px); padding-bottom: 24px; }
html body.d11-blog.mfc-bv2 .bv2-body::before { content: ""; position: absolute; z-index: -1; top: 198px; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: #fff; }
html body.d11-blog.mfc-bv2 .bv2-body::after { content: ""; position: absolute; z-index: -1; top: 0; height: 202px; left: calc(50% - 50vw); right: calc(50% - 50vw); background: url("/wp-content/uploads/2026/01/BG-v1.png") 50% 50% / 100% 100% no-repeat; transform: scaleY(-1); pointer-events: none; }
html body.d11-blog.mfc-bv2 .bv2-aside { top: 112px; }
html body.d11-blog.mfc-bv2 .bv2-related { padding-top: 72px; padding-bottom: 104px; }
html body.d11-blog.mfc-bv2 .bv2-related::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: #fff; }
html body.d11-blog.mfc-bv2 .bv2-body + .bv2-cta, html body.d11-blog.mfc-bv2 .bv2-related + .bv2-cta { margin-top: 0 !important; }
html body.d11-blog.mfc-bv2 .bv2-body + .bv2-cta::before, html body.d11-blog.mfc-bv2 .bv2-related + .bv2-cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; background: url("/wp-content/uploads/2026/01/BG-v1.png") 50% 50% / 100% 100% no-repeat; pointer-events: none; }
html body.d11-blog.mfc-bv2 .bv2-related + .bv2-cta, html body.d11-blog.mfc-bv2 .bv2-body + .bv2-cta { padding-top: calc(160px + 56px) !important; }
/* reading surface */
html body.d11-blog.mfc-bv2 .bv2-main { max-width: 720px; }
html body.d11-blog.mfc-bv2 .bv2-prose > p:first-child { color: #1F2329; }
html body.d11-blog.mfc-bv2 .bv2-prose a { text-decoration-color: rgba(0, 87, 217, .35); }
html body.d11-blog.mfc-bv2 .bv2-prose code { background: rgba(10, 11, 13, .06); }
html body.d11-blog.mfc-bv2 .bv2-prose th { background: #F4F5F7 !important; color: #4A505B !important; }
html body.d11-blog.mfc-bv2 .bv2-prose .bv2-table { background: #fff; }
html body.d11-blog.mfc-bv2 .bv2-prose li::marker { color: #8A9099; }
html body.d11-blog.mfc-bv2 .bv2-prose blockquote > p:first-child > strong:first-child { color: #0057D9; }
html body.d11-blog.mfc-bv2 .bv2-prose .bv2-cards li { background: #fff; box-shadow: 0 1px 2px rgba(10, 11, 13, .04); }
/* formula cards stay one dark object on the light page */
html body.d11-blog.mfc-bv2 .bv2-prose .bv2-formula { background: #0E1014; border-color: rgba(77, 148, 255, .28); color: #F2F4F7; box-shadow: 0 18px 40px -28px rgba(10, 11, 13, .5); }
html body.d11-blog.mfc-bv2 .bv2-prose .bv2-formula::before { color: #6AA6FF; }
html body.d11-blog.mfc-bv2 .bv2-prose .bv2-formula code { color: #F2F4F7; }
html body.d11-blog.mfc-bv2 .bv2-toc a b { color: #8A9099; }
html body.d11-blog.mfc-bv2 .bv2-toc a[aria-current="true"] b { color: #0057D9; }
html body.d11-blog.mfc-bv2 .bv2-rules { background: #F4F5F7; }
html body.d11-blog.mfc-bv2 .bv2-rules__list div { border-bottom-color: rgba(10, 11, 13, .08); }
html body.d11-blog.mfc-bv2 .bv2-toc-m { background: #F4F5F7; }
/* related cards: white cards, the HTML covers stay dark */
html body.d11-blog.mfc-bv2 .bv2-related .bv2-card { background: #fff; border-color: rgba(10, 11, 13, .1); box-shadow: 0 1px 2px rgba(10, 11, 13, .04); }
html body.d11-blog.mfc-bv2 .bv2-related .bv2-card:hover { border-color: rgba(10, 11, 13, .2); box-shadow: 0 12px 28px -16px rgba(10, 11, 13, .25); }
html body.d11-blog.mfc-bv2 .bv2-related .bv2-card__media { border-bottom: 0; }
html body.d11-blog.mfc-bv2 .bv2-related .bv2-card__date { color: #5B616E; }
@media (max-width: 1024px) {
	html body.d11-blog.mfc-bv2 .bv2-body { padding-top: calc(120px + 32px); }
	html body.d11-blog.mfc-bv2 .bv2-body::before { top: 118px; }
	html body.d11-blog.mfc-bv2 .bv2-body::after { height: 122px; }
	html body.d11-blog.mfc-bv2 .bv2-main { max-width: none; }
}
@media (max-width: 767px) {
	html body.d11-blog.mfc-bv2 .bv2-body { padding-top: calc(72px + 28px); }
	html body.d11-blog.mfc-bv2 .bv2-body::before { top: 70px; }
	html body.d11-blog.mfc-bv2 .bv2-body::after { height: 74px; }
	html body.d11-blog.mfc-bv2 .bv2-related { padding-top: 48px; padding-bottom: 64px; }
	html body.d11-blog.mfc-bv2 .bv2-related + .bv2-cta::before, html body.d11-blog.mfc-bv2 .bv2-body + .bv2-cta::before { height: 72px; }
	html body.d11-blog.mfc-bv2 .bv2-related + .bv2-cta, html body.d11-blog.mfc-bv2 .bv2-body + .bv2-cta { padding-top: calc(72px + 40px) !important; }
}

/* ================= contrast ================= */
/* price labels on black: #5D646B (3.5:1) -> #8A9099 (6.4:1) */
html body.d11-contrast .mfct .mfct-seg .btn[aria-checked="false"] i { color: #8A9099 !important; }
html body.d11-contrast .mfc-q3 .mfc-q3-step { color: #8A9099 !important; }
/* grey on white: system "secondary" #5B616E */
html body.d11-contrast .mfc-ww-board-top span, html body.d11-contrast .mfc-ww-board-top .mfc-ww-live { color: #5B616E !important; }
html body.d11-contrast .mpc-gs, html body.d11-contrast .mpc-t td em { color: #5B616E !important; }
html body.d11-contrast .tp .demo .tk-url, html body.d11-contrast .tp .tk-url, html body.d11-contrast .tp .demo-cap { color: #8A9099 !important; }

/* ================= ui12: UI text >= 12 px ================= */
html body.d11-ui12 .mfc-rb-cal i { font-size: 12px !important; }
html body.d11-ui12 .mfct .mfct-cur button { font-size: 12px !important; }
html body.d11-ui12 .mfct-bar small { font-size: 12px !important; }
html body.d11-ui12 .mpc .mpc-badge { font-size: 12px !important; }
html body.d11-ui12 .mpp-chip { font-size: max(12px, 1em); }

/* ================= curpill: the $/EUR toggle on phones (was a 64 px circle) ================= */
@media (pointer: coarse) {
	html body.d11-curpill .mfct .mfct-cur button { box-sizing: border-box !important; min-height: 44px !important; height: 44px; min-width: 56px !important; padding: 0 14px !important; line-height: 1 !important; border-radius: 999px !important; }
}

/* ================= tap: hit areas >= 44 px on phones (visual size unchanged where it would change the design) ================= */
@media (max-width: 767px) and (pointer: coarse) {
	html body.d11-tap .mfct .mfct-seg .btn, html body.d11-tap .ap-seg button, html body.d11-tap .mfct .mfct-add-h, html body.d11-tap .mpc-chips label { min-height: 44px !important; box-sizing: border-box; }
	html body.d11-tap .mfc-hv-ctl .mfc-hv-btn { width: 44px !important; height: 44px !important; }
	html body.d11-tap .glass-switcher .mfc-ls__btn { min-height: 44px !important; box-sizing: border-box; }
	html body.d11-tap .mfc-btn--quiet .elementor-button { min-height: 44px !important; box-sizing: border-box; display: inline-flex !important; align-items: center; }
	html body.d11-tap .mpc-go, html body.d11-tap .mfc-ww-more { min-height: 44px !important; box-sizing: border-box; display: inline-flex !important; align-items: center; }
	/* invisible hit area around small text links and icons */
	html body.d11-tap a.mfc-aud-switch, html body.d11-tap .mfc-rb-chips .mfc-rb-chat, html body.d11-tap .elementor-icon-wrapper a.elementor-icon, html body.d11-tap .elementor-location-header .elementor-hidden-desktop > a, html body.d11-tap .mpc-phi a.mpc-name { position: relative; }
	html body.d11-tap a.mfc-aud-switch::after, html body.d11-tap .mfc-rb-chips .mfc-rb-chat::after, html body.d11-tap .elementor-icon-wrapper a.elementor-icon::after, html body.d11-tap .elementor-location-header .elementor-hidden-desktop > a::after, html body.d11-tap .mpc-phi a.mpc-name::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
}

/* ================= e404: the 404 page on the design system ================= */
html body.d11-e404.error404 { background: #fff; }
html body.d11-e404.error404 [data-elementor-type="error-404"] > .e-con:first-child {
	position: relative; isolation: isolate; min-height: 0 !important; padding: 168px 24px 150px !important; margin: 0 !important; overflow: hidden;
	background: radial-gradient(ellipse 72% 84% at 50% 0%, rgba(10,11,13,0) 0, rgba(10,11,13,0) 93%, rgba(77,141,255,.10) 96.6%, rgba(150,190,255,.45) 98.9%, #E6EFFF 99.55%, #fff 100%) 50% 100% / 100% 170px no-repeat, #0A0B0D !important;
}
html body.d11-e404.error404 [data-elementor-type="error-404"] > .e-con:first-child > .e-con { gap: 18px !important; }
html body.d11-e404.error404 [data-elementor-type="error-404"] h1.elementor-heading-title { margin: 0; font: 500 clamp(72px, 12vw, 132px)/1 "Neue Haas Unica", "Helvetica Neue", Arial, sans-serif !important; letter-spacing: -.04em !important; color: #fff !important; }
html body.d11-e404.error404 [data-elementor-type="error-404"].elementor-location-single .e-con h1.elementor-heading-title span.mfc-accent-gradient { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: #fff !important; color: #fff !important; }
html body.d11-e404.error404 [data-elementor-type="error-404"] p.elementor-heading-title { text-transform: none !important; letter-spacing: -.01em !important; font: 500 clamp(22px, 3vw, 30px)/1.2 "Neue Haas Unica", "Helvetica Neue", Arial, sans-serif !important; color: #C9CED6 !important; }
html body.d11-e404.error404 .mfc-ds-after { background: #fff; }
html body.d11-e404.error404 .mfc-404 { padding-top: 8px; }
@media (max-width: 767px) {
	html body.d11-e404.error404 [data-elementor-type="error-404"] > .e-con:first-child { padding: 128px 16px 104px !important; background-size: 100% 96px, auto !important; }
}

/* ================= lesson: hero art = the lesson's own diagram ================= */
html body.d11-lesson .s2-v3-hi.d11-hi { width: clamp(300px, 34vw, 460px); }
html body.d11-lesson .s2-v3-hi.d11-hi .d11-hfig { margin: 0 !important; padding: 18px 18px 14px; box-shadow: 0 30px 60px -30px rgba(0, 80, 255, .45); }
html body.d11-lesson .s2-v3-hi.d11-hi .d11-hfig .dr { stroke-dashoffset: 0 !important; }
@media (max-width: 900px) {
	html body.d11-lesson .s2-v3-hi.d11-hi { width: 100%; max-width: 420px; }
}

/* ================= hero1: one heading in the /compare-plans/ hero (QA B15) ================= */
html body.d11-hero1:has(.mfc-mp-hero) .elementor-element.elementor-element-678e524f { display: none !important; }
html body.d11-hero1:has(.mfc-mp-hero) .e-con:has(> .elementor-element-678e524f) { padding-top: 8px !important; }