/* ============================================================================
   Modcado — Elementor bridge

   modcado.css is portable: it targets bare HTML and `.mc-*` components, and
   lives in @layer so an app's own CSS can always win. Elementor's CSS is
   UNLAYERED, which means it beats every layer no matter the specificity — so
   a `.mc-shell` class alone never constrains an Elementor container.

   This file is the adapter, and it is deliberately NOT layered. Everything
   here exists only because Elementor wraps content in its own markup:

     .mc-shell            an Elementor container that should hold the 1320 column
     .mc-brand__mark img  Elementor puts our class on the widget DIV, not the IMG

   Keep design decisions in modcado.css. Keep "because Elementor renders it
   this way" here.
   ========================================================================= */

/* ---- the content column ---------------------------------------------------
   Elementor's e-con-full is width:100% with no max-width. Re-impose the shell,
   using the container's own selector so we out-specify Elementor's rule. */
.elementor .e-con.mc-shell,
.elementor .e-con.mc-shell.e-con-full {
	width: 100%;
	max-width: calc(var(--mc-shell) + var(--mc-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--mc-gutter);
}

/* A full-bleed section must not inherit the kit's boxed content width. */
.elementor .e-con.mc-bleed,
.elementor .e-con.mc-bleed.e-con-full {
	width: 100%;
	max-width: none;
	padding-inline: 0;
}

/* ---- nav ------------------------------------------------------------------ */
/* The blur deliberately does NOT live on this element.
   iOS Safari breaks touch hit-testing for the descendants of an element that
   is both `position: sticky` and `backdrop-filter`-ed: the bar renders, but
   taps inside it land nowhere, which is why the burger was dead on iPhone and
   fine everywhere else. The filter therefore goes on a pseudo-element behind
   the content, which is not interactive and not the sticky box itself.

   That pseudo has to be fully specified: Elementor uses .e-con::before as its
   own background-overlay layer, so every property it sets is restated here
   rather than left to inherit. */
.elementor .e-con.mc-nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: transparent;
	border-bottom: 1px solid var(--mc-line-nav);
	isolation: isolate;
	/* modcado.css sets this too, and it lives in @layer mc.components — which
	   this file outranks only for properties it actually declares. Dropping the
	   declaration here would hand the blur straight back to the layered rule,
	   so it has to be cancelled outright rather than omitted. */
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.elementor .e-con.mc-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	top: 0; right: 0; bottom: 0; left: 0;
	width: auto; height: auto;
	z-index: -1;
	background: rgb(10 13 18 / .88);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	pointer-events: none;
	border-radius: inherit;
}
/* and the control itself sits above that layer, with the touch behaviour iOS
   wants on something it should treat as a button */
.elementor .mc-nav__links .elementor-menu-toggle {
	position: relative;
	z-index: 2;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
.elementor .e-con.mc-nav__in {
	/* the bar is --mc-nav-h tall including its rule, so the row inside gives
	   that border its pixel back */
	min-height: calc(var(--mc-nav-h) - 1px);
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 3vw, 128px);
}

/* ---- brand lockup ---------------------------------------------------------
   Our class lands on the widget wrapper; the size belongs on the image. */
.elementor .e-con.mc-brand {
	flex-direction: row;
	align-items: center;
	gap: clamp(8px, .71vw, 11.4px);
	width: auto;
	flex: 0 0 auto;
}
.mc-brand__mark, .mc-brand__word { width: auto; }
/* Elementor ships `.elementor img{height:auto}` — the SAME specificity as
   `.mc-brand__mark img`, and it loads after us, so it wins on source order.
   Anything that sets an image height here has to out-specify it. */
.elementor .e-con.mc-brand .mc-brand__mark img { height: clamp(28px, 2.5vw, 40px); width: auto; display: block; }
.elementor .e-con.mc-brand .mc-brand__word img { height: clamp(23px, 2.14vw, 34.3px); width: auto; display: block; }
@media (max-width: 480px) {
	.elementor .e-con.mc-brand { gap: 6px; }
	.elementor .e-con.mc-brand .mc-brand__mark img { height: 24px; }
	.elementor .e-con.mc-brand .mc-brand__word img { height: 19px; }
}
@media (max-width: 360px) {
	.elementor .e-con.mc-brand .mc-brand__mark img { height: 22px; }
	.elementor .e-con.mc-brand .mc-brand__word img { height: 16px; }
}

/* ---- widgets inside our components ---------------------------------------
   Elementor gives every widget a bottom margin from the kit's
   space_between_widgets. Inside a Modcado component the gap is the
   container's job, so zero it out. */
.elementor .e-con > .elementor-widget { margin-block-end: 0; }

/* the kit paints body text #FAFAFA; the design's default ink is --mc-t-1,
   and several components rely on inheriting it rather than restating it */
.elementor .e-con { color: var(--mc-t-1); }

/* icon-box titles render as a bare <span> when title_size is "span", so their
   box is the glyph box rather than the line box the design measures from */
.elementor .e-con .elementor-icon-box-title { display: block; }

/* Headings/text widgets: let the design system's type own them rather than the
   kit's Montserrat globals, which came from an unrelated template kit. */
.elementor .e-con .elementor-heading-title,
.elementor .e-con .elementor-widget-text-editor {
	font-family: var(--mc-font);
	color: inherit;
	/* something upstream sets text-wrap:balance on headings, which rebreaks
	   lines the design fixes by measure */
	text-wrap: wrap;
}


/* Elementor's icon-box `position` control is responsive, and with no mobile
   value set it falls back to stacked-and-centred below the tablet breakpoint.
   Every icon-box above is a label beside its icon at every width, so each one
   states its direction rather than inheriting that fallback. */

/* ---- nav menu -------------------------------------------------------------
   Pro's nav-menu widget. The kit's globals would give these Open Sans at
   1.1rem capitalised; the design wants Chakra Petch uppercase at the UI size. */
.elementor .mc-nav__links { width: auto; flex: 0 1 auto; }
.elementor .mc-nav__links .elementor-nav-menu { gap: clamp(15px, 2vw, 32px); }
.elementor .mc-nav__links .elementor-nav-menu--main .elementor-item {
	font-family: var(--mc-font);
	font-size: var(--mc-fs-ui);
	font-weight: 500;
	line-height: 1;
	letter-spacing: var(--mc-track-label);
	text-transform: uppercase;
	color: #fff;
	opacity: .92;
	padding: 0;
	fill: currentColor;
}
.elementor .mc-nav__links .elementor-nav-menu--main .elementor-item:hover,
.elementor .mc-nav__links .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--mc-accent-2);
	opacity: 1;
}

/* Below the dropdown breakpoint the bar keeps only the lockup and the burger,
   the way the design does, and the download CTA moves into the panel. It is a
   real menu item (so it stays editable in Appearance > Menus) that the main
   bar hides and the dropdown paints as a button. */
.elementor .mc-nav__links .elementor-nav-menu--main .mc-nav__cta-m { display: none; }
@media (max-width: 1080px) {
	.elementor .mc-nav__cta { display: none; }
}
/* the widget's Full Width dropdown takes the panel out of flow (otherwise it
   makes the whole menu as wide as the panel and wraps the bar); the design
   hangs it straight off the bar, with none of Pro's 10px float */
/* Pro's script pins the panel under the burger with an inline top; the bar is
   taller than the burger, so the rest of that distance is made up here. */
.elementor .mc-nav__links .elementor-nav-menu--dropdown.elementor-nav-menu__container {
	margin-top: calc((var(--mc-nav-h) - 1px - 44px) / 2);
}
.elementor .mc-nav__links .elementor-nav-menu--dropdown {
	background: var(--mc-bg-deep); border-bottom: 1px solid var(--mc-line-nav);
	box-shadow: 0 24px 40px rgb(0 0 0 / .5);
}
.elementor .mc-nav__links .elementor-nav-menu--dropdown .elementor-item {
	font-family: var(--mc-font); font-size: var(--mc-fs-ui); font-weight: 500;
	letter-spacing: var(--mc-track-label); text-transform: uppercase;
	color: #fff; padding: 14px var(--mc-gutter);
	border-bottom: 1px solid var(--mc-line); background: none;
}
.elementor .mc-nav__links .elementor-nav-menu--dropdown .elementor-item:hover,
.elementor .mc-nav__links .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
	color: var(--mc-accent-2); background: none;
}
.elementor .mc-nav__links .elementor-nav-menu--dropdown .mc-nav__cta-m { padding: 18px var(--mc-gutter) 22px; }
.elementor .mc-nav__links .elementor-nav-menu--dropdown .mc-nav__cta-m .elementor-item {
	--mc-h: clamp(44px, 3.25vw, 52px);
	--mc-cx: calc(var(--mc-h) * .305);
	--mc-cy: calc(var(--mc-h) * .25);
	display: flex; align-items: center; justify-content: center;
	height: var(--mc-h); padding: 0 24px; border-bottom: 0;
	background: var(--mc-accent); color: var(--mc-ink); font-weight: 700;
	clip-path: polygon(var(--mc-cx) 0, 100% 0, 100% calc(100% - var(--mc-cy)),
	                   calc(100% - var(--mc-cx)) 100%, 0 100%, 0 var(--mc-cy));
}
.elementor .mc-nav__links .elementor-nav-menu--dropdown .mc-nav__cta-m .elementor-item:hover {
	background: var(--mc-accent-hi); color: var(--mc-ink);
}
.elementor .mc-nav__links .elementor-menu-toggle {
	width: 44px; height: 44px; background: none; color: #fff; border-radius: 0;
}
.elementor .mc-nav__links .elementor-menu-toggle svg { width: 24px; height: 24px; fill: currentColor; }

/* ---- buttons --------------------------------------------------------------
   Elementor renders <a class="elementor-button">, so the chamfer + notches have
   to be re-applied to that element. The kit also sets a 20px border-radius from
   an unrelated template kit — override it, nothing in this system is round. */
.elementor .mc-btn-w .elementor-button {
	--mc-h: clamp(44px, 3.25vw, 52px);
	--mc-cx: calc(var(--mc-h) * .305);
	--mc-cy: calc(var(--mc-h) * .25);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: clamp(8px, .625vw, 10px);
	height: var(--mc-h);
	padding: 0 calc(var(--mc-h) * .46);
	border: 0;
	border-radius: 0;
	background: var(--mc-accent);
	color: var(--mc-ink);
	font-family: var(--mc-font);
	font-size: var(--mc-fs-ui);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--mc-track-label);
	text-transform: uppercase;
	white-space: nowrap;
	clip-path: polygon(var(--mc-cx) 0, 100% 0, 100% calc(100% - var(--mc-cy)),
	                   calc(100% - var(--mc-cx)) 100%, 0 100%, 0 var(--mc-cy));
	transition: background var(--mc-dur) var(--mc-ease), transform var(--mc-dur) var(--mc-ease);
}
.elementor .mc-btn-w .elementor-button::before,
.elementor .mc-btn-w .elementor-button::after {
	content: "";
	position: absolute;
	width: calc(var(--mc-h) * .06);
	height: calc(100% - var(--mc-h) * .33);
	background: rgb(0 0 0 / .82);
	pointer-events: none;
}
.elementor .mc-btn-w .elementor-button::before { left: calc(var(--mc-h) * .173); top: calc(var(--mc-h) * .21); }
.elementor .mc-btn-w .elementor-button::after  { right: calc(var(--mc-h) * .1);  bottom: calc(var(--mc-h) * .21); }
.elementor .mc-btn-w .elementor-button:hover { background: var(--mc-accent-hi); transform: translateY(-1px); color: var(--mc-ink); }
.elementor .mc-btn-w .elementor-button:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--mc-ink), inset 0 0 0 4px var(--mc-focus);
}
.elementor .mc-btn-w { width: auto; flex: 0 0 auto; }
.elementor .mc-btn-w .elementor-button-content-wrapper { gap: inherit; }
/* size variants, mirroring .mc-btn--md / --sm */
.elementor .mc-btn-w--md .elementor-button { --mc-h: clamp(40px, 2.875vw, 46px); }
.elementor .mc-btn-w--sm .elementor-button { --mc-h: clamp(36px, 2.625vw, 42px); font-size: clamp(11px, .8vw, 12.8px); text-transform: capitalize; }

/* ===========================================================================
   HERO
   Figma 2055:210. Two columns 621fr / 600fr, 119 apart, section padding 86/153.
   ======================================================================== */
.elementor .e-con.mc-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(44px, 5.375vw, 86px) clamp(64px, 9.56vw, 153px);
	background: var(--mc-bg);
}
.elementor .e-con.mc-hero__in {
	display: grid;
	grid-template-columns: minmax(0, 621fr) minmax(0, 600fr);
	gap: clamp(32px, 7.44vw, 119px);
	align-items: center;
}
@media (max-width: 1080px) {
	.elementor .e-con.mc-hero__in { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 7vw, 80px); }
}
.elementor .e-con.mc-hero__copy { gap: clamp(16px, 1.5vw, 24px); align-items: flex-start; width: auto; }
/* the headline pair sits closer together than the stack's own rhythm */
.elementor .e-con.mc-hero__text { gap: clamp(10px, .75vw, 12px); align-items: stretch; width: 100%; padding: 0; }

/* the AI-POWERED badge — an icon-box, so the pill is the inner wrapper */
.elementor .e-con.mc-badge { width: auto; flex: 0 0 auto; padding: 0 0 0 3px; position: relative; }
.elementor .e-con.mc-badge::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0;
	width: clamp(2px, .19vw, 3px); background: var(--mc-accent); z-index: 1;
}
.elementor .mc-badge__in { width: auto; text-align: left; padding: 0; }
.elementor.elementor .e-con .mc-badge__in .elementor-icon-box-wrapper {
	/* Figma "Rectangle 39938" is a vector, not a rectangle: its top-right
	   corner is chamfered 13.5 across by 13 down on a 40-high pill. Both are
	   kept as a share of the height so the cut holds its shape at any width. */
	--mc-badge-h:  clamp(32px, 2.5vw, 40px);
	--mc-badge-cw: calc(var(--mc-badge-h) * 0.33750);
	--mc-badge-ch: calc(var(--mc-badge-h) * 0.32500);
	display: inline-flex; flex-direction: row; align-items: center; gap: clamp(6px, .5vw, 8px);
	height: var(--mc-badge-h); padding: 0 clamp(9px, .75vw, 12px);
	background: rgb(255 255 255 / .12);
	border: 1px solid rgb(34 211 238 / .32);
	text-align: left;
	clip-path: polygon(
		0 0,
		calc(100% - var(--mc-badge-cw)) 0,
		100% var(--mc-badge-ch),
		100% 100%,
		0 100%);
}
/* The clip cuts the top and right borders back to the chamfer, which is right,
   but leaves the diagonal itself bare — a border cannot follow a clip path. The
   missing hairline is drawn as one rotated rule. It lives on .mc-badge rather
   than on the pill because the pill is clipped, and a line sitting exactly on
   that boundary would be halved by it. */
.elementor .e-con.mc-badge::after {
	content: ""; position: absolute; z-index: 2; pointer-events: none;
	--mc-badge-h: clamp(32px, 2.5vw, 40px);
	left: calc(100% - var(--mc-badge-h) * 0.33750);
	top: 0;
	width: calc(var(--mc-badge-h) * 0.46854);
	height: 1px;
	background: rgb(34 211 238 / .32);
	transform-origin: 0 0;
	transform: rotate(43.92deg);
}
.elementor .mc-badge__in .elementor-icon-box-icon { margin: 0; display: flex; }
/* the icon renders as inline SVG, so font-size does nothing to it */
.elementor .mc-badge__in .elementor-icon { color: var(--mc-accent-2); display: flex; }
.elementor .mc-badge__in .elementor-icon-box-title { margin: 0; }
.elementor .mc-badge__in .elementor-icon-box-title span {
	font-family: var(--mc-font); font-size: clamp(13px, 1vw, 16px); font-weight: 400; line-height: 1;
	text-transform: uppercase; letter-spacing: 0;
	background: var(--mc-chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.elementor .mc-badge__in .elementor-icon-box-description { display: none; }

/* headline — "game cheats" is wrapped in <em> and takes the accent */
.elementor .mc-hero__h1 .elementor-heading-title {
	font-family: var(--mc-font); font-size: var(--mc-fs-hero);
	font-weight: 600; line-height: var(--mc-lh-tight);
	letter-spacing: var(--mc-track-head); text-transform: uppercase;
	color: var(--mc-t-0); margin: 0;
}
.elementor .mc-hero__h1 em { font-style: normal; color: var(--mc-accent-2); }
.elementor .mc-hero__sub .elementor-heading-title {
	font-family: var(--mc-font); font-size: var(--mc-fs-sm);
	font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none;
	color: var(--mc-t-1); margin: 0;
}
.elementor .mc-hero__body { max-width: 46ch; }
.elementor .mc-hero__body p {
	font-family: var(--mc-font); font-size: var(--mc-fs-lede);
	line-height: 1.5; color: var(--mc-t-2); margin: 0;
}

/* CTA row */
.elementor .e-con.mc-hero__cta { width: auto; gap: clamp(18px, 2vw, 32px); margin-top: clamp(14px, 1.6vw, 26px); }
.elementor .mc-link-w { width: auto; }
.elementor.elementor .e-con .mc-link-w .elementor-icon-box-wrapper { display: inline-flex; flex-direction: row; align-items: center; gap: clamp(6px, .5vw, 8px); text-align: left; }
.elementor .mc-link-w .elementor-icon-box-icon { margin: 0; display: flex; }
.elementor .mc-link-w .elementor-icon { color: var(--mc-accent-2); font-size: clamp(15px, 1.25vw, 20px); }
.elementor .mc-link-w .elementor-icon-box-title { margin: 0; }
.elementor .mc-link-w .elementor-icon-box-title span {
	font-family: var(--mc-font); font-size: var(--mc-fs-ui); font-weight: 700;
	text-transform: uppercase; letter-spacing: 0; color: var(--mc-accent-2);
	text-decoration: underline; text-underline-offset: 4px;
}
.elementor .mc-link-w .elementor-icon-box-description { display: none; }

/* ---- icon-box corrections -------------------------------------------------
   Two things Elementor does that a selector written against plain HTML misses:

   1. When the icon-box is LINKED, the title's inner node is an <a>, not a
      <span>. Target the child universally.
   2. Elementor renders known Font Awesome names as inline SVG (not an <i>),
      so `font-size` does nothing — the SVG needs an explicit box. Icons it
      does not recognise fall back to an <i> with a webfont it never loads,
      which is why FA6 names like `fa-circle-play` render as nothing at all.
      Stick to FA5 names.                                                     */
.elementor .mc-badge__in .elementor-icon-box-title,
.elementor .mc-badge__in .elementor-icon-box-title > *,
.elementor .mc-link-w .elementor-icon-box-title,
.elementor .mc-link-w .elementor-icon-box-title > *,
.elementor .mc-scan__head .elementor-icon-box-title,
.elementor .mc-scan__head .elementor-icon-box-title > * {
	font-family: var(--mc-font);
	line-height: 1;
	text-decoration: none;
}
.elementor .mc-badge__in .elementor-icon-box-title,
.elementor .mc-badge__in .elementor-icon-box-title > * {
	font-size: clamp(13px, 1vw, 16px); font-weight: 400;
	background: var(--mc-chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.elementor .mc-link-w .elementor-icon-box-title,
.elementor .mc-link-w .elementor-icon-box-title > * {
	font-size: var(--mc-fs-ui); font-weight: 700; text-transform: uppercase;
	color: var(--mc-accent-2); text-decoration: underline; text-underline-offset: 4px;
}
.elementor .mc-scan__head .elementor-icon-box-title,
.elementor .mc-scan__head .elementor-icon-box-title > * {
	font-size: clamp(11px, .81vw, 13px); font-weight: 600; color: var(--mc-t-1);
}
/* size the inline SVG Elementor emits for mapped icons */
.elementor .mc-badge__in .elementor-icon svg { width: clamp(16px, 1.25vw, 20px); height: auto; fill: var(--mc-accent-2); }
.elementor .mc-link-w  .elementor-icon svg { width: clamp(15px, 1.25vw, 20px); height: auto; fill: var(--mc-accent-2); }
.elementor .mc-scan__head .elementor-icon svg { width: clamp(9px, .7vw, 11px); height: auto; fill: var(--mc-ink); }


/* ---- preview --------------------------------------------------------------
   The reference makes .preview a container-query container and sizes every
   child in cqw of it. Elementor containers are not query containers, but
   nothing stops us making this one — which lets the design's own numbers port
   across verbatim instead of being re-derived in vw and drifting. */
.elementor .e-con.mc-preview {
	position: relative;
	width: 100%;
	container-type: inline-size;
	gap: 0;
}
.elementor.elementor .e-con.mc-preview > .elementor-widget.mc-preview__steps { width: 85.8%; margin: 0 auto 4.97cqw; }
.elementor .mc-preview__steps p {
	font-family: var(--mc-font);
	font-size: clamp(11px, 2.33cqw, 14px);
	line-height: 1.4; color: var(--mc-t-3); margin: 0;
	display: flex; align-items: center; flex-wrap: wrap; gap: 1.7cqw;
}
.elementor .mc-preview__steps b { color: var(--mc-t-1); font-weight: 600; }
/* U+2192 is outside our latin subset, so the arrow is drawn, never typed */
.elementor .mc-preview__steps .mc-arw {
	display: inline-block; flex: none;
	width: clamp(12px, 2.67cqw, 16px); aspect-ratio: 16 / 10;
	background: currentColor; color: var(--mc-t-4);
	-webkit-mask: url("img/arrow.svg") no-repeat center / contain;
	mask: url("img/arrow.svg") no-repeat center / contain;
}

.elementor .e-con.mc-preview__frame {
	position: relative;
	width: 85.8%;
	max-width: 85.8%;
	margin-inline: auto;
	padding: 2.05cqw;
	border: 1px solid rgb(221 223 225 / .2);
	gap: 0;
	/* the two cyan corner ticks, the same motif the panels and cards use.
	   Drawn as background bars over the border box because both of the
	   frame's pseudo-elements already carry the HUD and the scanlines. */
	--mc-tick: rgb(34 211 238 / .7);
	background-color: rgb(255 255 255 / .03);
	background-image:
		linear-gradient(var(--mc-tick) 0 0), linear-gradient(var(--mc-tick) 0 0),
		linear-gradient(var(--mc-tick) 0 0), linear-gradient(var(--mc-tick) 0 0);
	background-size: max(11px, 3cqw) 1px, 1px max(11px, 3cqw), max(11px, 3cqw) 1px, 1px max(11px, 3cqw);
	background-position: top right, top right, bottom left, bottom left;
	background-repeat: no-repeat;
	background-origin: border-box;
}
/* the screenshot's own grade: a vignette and the cyan wash over it */
.elementor .mc-preview__shot { position: relative; z-index: 1; line-height: 0; }
.elementor .mc-preview__shot::before,
.elementor .mc-preview__shot::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
}
.elementor .mc-preview__shot::before {
	background: radial-gradient(120% 110% at 50% 40%, rgb(0 0 0 / 0), rgb(0 0 0 / .6));
}
.elementor .mc-preview__shot::after {
	background: var(--mc-accent-2); opacity: .46; mix-blend-mode: overlay;
}
.elementor .e-con.mc-preview__frame > .mc-preview__shot img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 490 / 319; object-fit: cover;
	border: 1px solid rgb(221 223 225 / .05);
}
/* the measurement rails + corner brackets, anchored to the frame exactly as
   in the reference (Figma 2055:652) */
.elementor .e-con.mc-preview__frame::after {
	content: ""; position: absolute;
	left: -6.32cqw; top: -9.63cqw;
	width: 100cqw; aspect-ratio: 600 / 444.55;
	background: url("img/hero-hud.svg") no-repeat center / 100% 100%;
	z-index: 3; pointer-events: none;
}
/* scanline sheen over the screenshot */
.elementor .e-con.mc-preview__frame::before {
	content: ""; position: absolute;
	left: 3.8cqw; top: 2.05cqw;
	width: 79.94cqw; aspect-ratio: 479.621 / 319.431;
	background: url("img/hero-scanlines.svg") no-repeat center / 100% 100%;
	z-index: 2; mix-blend-mode: screen; pointer-events: none;
}

/* the AI Live scan card */
.elementor .e-con.mc-scan {
	position: absolute; align-items: stretch;
	left: -11.7cqw; top: 52.7cqw;
	width: 28.9cqw; min-width: 148px;
	padding: 1.6cqw;
	gap: 1.1cqw;
	z-index: 4;
	background: rgb(34 211 238 / .1);
	border: 1px solid rgb(221 223 225 / .1);
}
/* the glass plate inside it, with a 3.8 dot pinned in each corner. They are
   background layers because a box-shadow offset cannot track a card whose
   width changes. */
.elementor .e-con.mc-scan__card {
	--mc-dot: clamp(3px, .63cqw, 3.8px);
	position: relative; width: 100%; padding: 2.3cqw 2cqw; gap: 1.3cqw;
	background-color: rgb(255 255 255 / .1);
	/* The four corner dots, and beneath them a dark veil.
	   The two tints are Figma's exactly — #22D3EE at 10% on the frame outside,
	   #FFFFFF at 10% here — and they are legible in Figma because the card also
	   carries a background blur, which flattens the artwork behind it. That
	   blur is below too, but backdrop-filter needs compositing: where the
	   machine has it turned off it silently does nothing, and 10% white over a
	   bright game still leaves the checklist hard to read. The veil is what
	   makes the text hold up in that case, and it disappears into the blur
	   where the blur does run.

	   .78 is not arbitrary: the white above it passes 90% of what is behind,
	   so the artwork ends up at .9 x (1 - .78) = 20%. At the .42 this started
	   at it was still coming through at 52%, which is why the checklist stayed
	   hard to read on a bright frame. */
	background-image:
		linear-gradient(#D9D9D9, #D9D9D9), linear-gradient(#D9D9D9, #D9D9D9),
		linear-gradient(#D9D9D9, #D9D9D9), linear-gradient(#D9D9D9, #D9D9D9),
		linear-gradient(rgb(9 12 17 / .78), rgb(9 12 17 / .78));
	background-size: var(--mc-dot) var(--mc-dot), var(--mc-dot) var(--mc-dot),
		var(--mc-dot) var(--mc-dot), var(--mc-dot) var(--mc-dot), cover;
	background-repeat: no-repeat;
	background-position:
		var(--mc-dot) var(--mc-dot),
		calc(100% - var(--mc-dot)) var(--mc-dot),
		var(--mc-dot) calc(100% - var(--mc-dot)),
		calc(100% - var(--mc-dot)) calc(100% - var(--mc-dot)),
		0 0;
	border: 1px solid rgb(255 255 255 / .2);
	backdrop-filter: blur(21px); -webkit-backdrop-filter: blur(21px);
	box-shadow: 0 1px 1px rgb(0 0 0 / .15), 0 1px 13px rgb(0 0 0 / .1);
}
@media (max-width: 1080px) {
	/* the preview centres itself, so the card stops hanging off its left */
	.elementor .e-con.mc-preview { width: min(100%, 600px); margin-inline: auto; }
	.elementor .e-con.mc-scan { left: 0; }
}
@media (max-width: 560px) {
	.elementor .e-con.mc-scan { position: relative; left: 0; top: 0; width: 100%; margin-top: 16px; }
}

/* ---- scan card internals, ported from the reference's cqw values ---------- */
.elementor.elementor .e-con .mc-scan__head .elementor-icon-box-wrapper { display: flex; flex-direction: row; align-items: center; gap: 1.5cqw; text-align: left; }
.elementor .mc-scan__head .elementor-icon-box-icon { margin: 0; display: flex; }
.elementor .mc-scan__head .elementor-icon {
	width: 4.5cqw; height: 4.5cqw; min-width: 23px; min-height: 23px;
	border-radius: .7cqw; display: grid; place-items: center;
	background: linear-gradient(135deg, var(--mc-accent-2), var(--mc-accent-deep));
	color: var(--mc-ink-teal);
}
/* Figma 2055:694 is `tabler-icon-sparkles`, an outlined sparkle stroked in
   #22D3EE — not the filled bullseye the widget was set to. The glyph is
   exported from the .fig and used as a mask, so the shape is the design's and
   the colour stays a token. */
.elementor .mc-scan__head .elementor-icon svg { display: none; }
.elementor .mc-scan__head .elementor-icon::after {
	content: ""; width: 62%; height: 62%;
	background: var(--mc-accent-2);
	-webkit-mask: url("img/ico-scan-sparkle.svg") center / contain no-repeat;
	        mask: url("img/ico-scan-sparkle.svg") center / contain no-repeat;
}
.elementor .mc-scan__head .elementor-icon-box-content { flex: 1; }
.elementor .mc-scan__head .elementor-icon-box-title { margin: 0; }
.elementor .mc-scan__head .elementor-icon-box-title,
.elementor .mc-scan__head .elementor-icon-box-title > * {
	font-size: clamp(11px, 2.54cqw, 15px); font-weight: 600; line-height: 1.5; color: var(--mc-t-1);
}
.elementor .mc-scan__head .elementor-icon-box-description { display: none; }

.elementor .mc-scan__list .elementor-icon-list-items { display: flex; flex-direction: column; gap: .3cqw; padding-left: 1.3cqw; }
/* the widget's own space_between writes a per-item padding; the list spaces
   itself with the container gap instead */
.elementor.elementor .e-con .mc-scan__list .elementor-icon-list-item { align-items: center; gap: .7cqw; padding: 0; margin: 0; }
.elementor .mc-scan__list .elementor-icon-list-icon { width: auto; }
/* Figma 2055:699 `tick-01` is a lighter check than Font Awesome's solid one,
   which reads noticeably heavier at this size. Same masking approach. */
.elementor .mc-scan__list .elementor-icon-list-icon svg { display: none; }
.elementor .mc-scan__list .elementor-icon-list-icon::after {
	content: ""; display: block;
	width: 2.53cqw; height: 2.53cqw; min-width: 10px; min-height: 10px;
	background: var(--mc-accent-2);
	-webkit-mask: url("img/ico-tick.svg") center / contain no-repeat;
	        mask: url("img/ico-tick.svg") center / contain no-repeat;
}
.elementor .mc-scan__list .elementor-icon-list-text {
	font-family: var(--mc-font);
	font-size: clamp(9px, 1.9cqw, 11.4px);
	font-weight: 500; line-height: 1.5; color: #E9E9EA;
	padding-inline-start: 0;
}

/* ===========================================================================
   TRUST STRIP — Figma 2055:1517, 1600x136
   ======================================================================== */
.elementor .e-con.mc-trust { padding-block: clamp(20px, 2vw, 32px); margin-top: clamp(12px, 1.25vw, 20px); background: var(--mc-bg); }
.elementor .e-con.mc-trust__in { flex-direction: row; justify-content: center; gap: clamp(24px, 5.6vw, 90px); flex-wrap: wrap; }
.elementor .mc-trust__item { width: auto; flex: 0 1 auto; }
.elementor.elementor .e-con .mc-trust__item .elementor-icon-box-wrapper { display: flex; flex-direction: row; align-items: center; gap: clamp(8px, .94vw, 15px); text-align: left; }
.elementor .mc-trust__item .elementor-icon-box-icon { margin: 0; display: flex; }
.elementor .mc-trust__item .elementor-icon svg { width: clamp(24px, 2vw, 32px); height: auto; fill: var(--mc-accent-2); }
.elementor .mc-trust__item .elementor-icon-box-title { margin: 0; }
.elementor .mc-trust__item .elementor-icon-box-title,
.elementor .mc-trust__item .elementor-icon-box-title > * {
	font-family: var(--mc-font); font-size: var(--mc-fs-xs);
	font-weight: 500; line-height: 1.5; color: var(--mc-t-1);
	text-transform: none; letter-spacing: 0; display: block; max-width: 14ch;
}
.elementor .mc-trust__item .elementor-icon-box-description { display: none; }

/* ===========================================================================
   SECTION SHELL + CENTRED HEAD
   ======================================================================== */
.elementor .e-con.mc-sec { position: relative; overflow: hidden; padding-block: var(--mc-sec-y); background: var(--mc-bg); }
.elementor .e-con.mc-sec > .mc-shell { gap: clamp(28px, 3.5vw, 56px); }
.elementor .e-con.mc-sec__head { align-items: center; text-align: center; max-width: 1069px; margin-inline: auto; gap: var(--mc-space-3); }

.elementor .mc-eyebrow-w .elementor-heading-title {
	display: inline-flex; align-items: center; gap: clamp(7px, .625vw, 10px);
	font-family: var(--mc-font); font-size: clamp(13px, 1vw, 16px);
	font-weight: 400; line-height: 1; text-transform: none; letter-spacing: 0;
	color: var(--mc-accent-2); margin: 0;
}
.elementor .mc-eyebrow-w .elementor-heading-title::before,
.elementor .mc-eyebrow-w--both .elementor-heading-title::after {
	content: ""; width: clamp(11px, 1vw, 16px); height: 2px; background: currentColor; flex: none;
}
.elementor .mc-h2-w .elementor-heading-title {
	font-family: var(--mc-font); font-size: var(--mc-fs-2xl); font-weight: 600;
	line-height: var(--mc-lh-tight); letter-spacing: var(--mc-track-head);
	text-transform: uppercase; color: var(--mc-t-0); margin: 0; max-width: 819px;
}
.elementor .mc-sec__head .mc-h2-w { display: flex; justify-content: center; }
/* Elementor pins container widgets to max-width:100% with a doubled class,
   so the lede's measure has to out-specify it */
.elementor.elementor .e-con > .elementor-widget.mc-lede-w { max-width: 673px; }
.elementor .e-con.mc-sec__head > .mc-eyebrow-w { margin-block-end: clamp(2px, .25vw, 4px); }
.elementor .mc-lede-w p {
	font-family: var(--mc-font); font-size: var(--mc-fs-lede); line-height: var(--mc-lh-ui);
	margin: 0; background: var(--mc-silver);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ===========================================================================
   COMMUNITY — Figma 2055:1034. Browser 718.8 + gap 45 + sidebar 449.2 = 1213,
   inset 53.5 inside the 1320 column.

   The sidebar carries benefit copy now rather than four short figures, and the
   Figma split left its longest line wrapping twice. It takes 560fr for every
   line to sit on one — measured, not guessed — which the browser column can
   give up without its own rows or filters breaking. The total is still 1168fr,
   so the max-width arithmetic above is unchanged.
   ======================================================================== */
.elementor .e-con.mc-community__grid {
	display: grid;
	grid-template-columns: 608fr 560fr;
	gap: clamp(18px, 2.81vw, 45px);
	width: 91.89%;
	max-width: 1213px;
	margin-inline: auto;
	align-items: stretch;
}
@media (max-width: 1080px) {
	.elementor .e-con.mc-community__grid { grid-template-columns: minmax(0, 1fr); width: 100%; }
}

/* A query container, so the design's cqw values port across — with the padding
   on the INNER box, because a container cannot query itself. */
.elementor .e-con.mc-panel {
	--arm: clamp(11px, 1vw, 16px); --aw: 1.2px;
	--dot: clamp(3px, .25vw, 4px); --din: clamp(4px, .38vw, 6px);
	position: relative; container-type: inline-size;
	border: 1px solid var(--mc-line);
	background-color: var(--mc-panel);
	gap: 0; padding: 0;
}
/* the design system's own panel inset, in cqw of the panel that contains it.
   The landing page only ever used two panels and set their padding directly;
   every panel-based card needs this default. */
.elementor .e-con.mc-panel__in {
	flex: 1; min-width: 0;
	padding: clamp(16px, 4.6cqw, 33px) clamp(14px, 3.49cqw, 25px);
}
.elementor .e-con.mc-browser > .mc-panel__in { padding: 4.604cqw 3.488cqw; gap: clamp(8px, 1.674cqw, 12px); }
.elementor .e-con.mc-side > .mc-panel__in { padding: clamp(24px, 11.404cqw, 51px) clamp(16px, 7.379cqw, 33px); gap: clamp(24px, 9.392cqw, 42px); }

/* Four cyan L-brackets with a dot set inside each, painted as background layers
   so every bracket tracks its own corner. */
.elementor .e-con.mc-panel--marks {
	background-image:
		linear-gradient(var(--mc-accent), var(--mc-accent)), linear-gradient(var(--mc-accent), var(--mc-accent)),
		linear-gradient(var(--mc-accent), var(--mc-accent)), linear-gradient(var(--mc-accent), var(--mc-accent)),
		linear-gradient(var(--mc-accent), var(--mc-accent)), linear-gradient(var(--mc-accent), var(--mc-accent)),
		linear-gradient(var(--mc-accent), var(--mc-accent)), linear-gradient(var(--mc-accent), var(--mc-accent)),
		linear-gradient(#ffffff4d, #ffffff4d), linear-gradient(#ffffff4d, #ffffff4d),
		linear-gradient(#ffffff4d, #ffffff4d), linear-gradient(#ffffff4d, #ffffff4d);
	background-size:
		var(--arm) var(--aw), var(--aw) var(--arm), var(--arm) var(--aw), var(--aw) var(--arm),
		var(--arm) var(--aw), var(--aw) var(--arm), var(--arm) var(--aw), var(--aw) var(--arm),
		var(--dot) var(--dot), var(--dot) var(--dot), var(--dot) var(--dot), var(--dot) var(--dot);
	background-position:
		0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%,
		var(--din) var(--din), calc(100% - var(--din)) var(--din),
		var(--din) calc(100% - var(--din)), calc(100% - var(--din)) calc(100% - var(--din));
	background-repeat: no-repeat;
}

/* ---- filters ---- */
.elementor .e-con.mc-filters { gap: clamp(6px, 1.395cqw, 10px); flex-direction: row; }
.elementor.elementor .e-con .mc-field .elementor-icon-box-wrapper {
	display: flex; flex-direction: row; align-items: center; gap: clamp(6px, 1.395cqw, 10px);
	height: clamp(34px, 5.86cqw, 42px); padding: 0 clamp(10px, 2.093cqw, 15px);
	background: var(--mc-field); border: 1px solid var(--mc-line); text-align: left;
}
.elementor .mc-field--search { flex: 1 1 auto; min-width: 0; }
.elementor .mc-field--drop { width: auto; flex: 0 0 auto; }
.elementor.elementor .e-con .mc-field--drop .elementor-icon-box-wrapper { justify-content: space-between; gap: clamp(6px, 1.1cqw, 8px); }
.elementor .mc-field .elementor-icon-box-icon { margin: 0; display: flex; }
.elementor .mc-field .elementor-icon svg { width: clamp(12px, 2.232cqw, 16px); height: auto; fill: var(--mc-t-4); }
.elementor .mc-field .elementor-icon-box-title { margin: 0; }
.elementor .mc-field .elementor-icon-box-title,
.elementor .mc-field .elementor-icon-box-title > * {
	font-family: var(--mc-font); font-size: clamp(12px, 2.232cqw, 16px);
	font-weight: 400; line-height: 1.25; color: var(--mc-t-3);
	white-space: nowrap; text-transform: none; letter-spacing: 0;
}
.elementor .mc-field .elementor-icon-box-description { display: none; }

/* ---- game row ---- */
.elementor .e-con.mc-gamerow { min-height: clamp(34px, 6.278cqw, 45px); gap: clamp(8px, 1.674cqw, 12px); flex-wrap: wrap; }
.elementor .mc-gamerow__l { width: auto; flex: 0 1 auto; }
.elementor.elementor .e-con .mc-gamerow__l .elementor-icon-box-wrapper { display: flex; flex-direction: row; align-items: center; gap: clamp(6px, 1.395cqw, 10px); text-align: left; }
.elementor .mc-gamerow__l .elementor-icon-box-icon { margin: 0; display: flex; order: 2; }
.elementor .mc-gamerow__l .elementor-icon svg { width: clamp(9px, 1.674cqw, 12px); height: auto; fill: var(--mc-ok); }
.elementor .mc-gamerow__l .elementor-icon-box-content { order: 1; display: flex; align-items: center; gap: clamp(6px, 1.395cqw, 10px); }
.elementor .mc-gamerow__l .elementor-icon-box-title { margin: 0; }
.elementor .mc-gamerow__l .elementor-icon-box-title,
.elementor .mc-gamerow__l .elementor-icon-box-title > * {
	font-family: var(--mc-font); font-size: clamp(14px, 2.511cqw, 18px);
	font-weight: 700; line-height: 1.25; color: var(--mc-t-1); text-transform: uppercase; letter-spacing: 0;
}
.elementor .mc-gamerow__l .elementor-icon-box-description {
	margin: 0; display: inline-flex; align-items: center;
	height: clamp(20px, 3.488cqw, 25px); padding: 0 clamp(7px, 1.395cqw, 10px);
	border-radius: 20px; background: var(--mc-ok-wash); border: 1px solid var(--mc-ok-line);
	color: var(--mc-ok); font-family: var(--mc-font); font-size: clamp(10px, 1.674cqw, 12px);
	font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.elementor .mc-gamerow__meta { width: auto; }
.elementor .mc-gamerow__meta p {
	font-family: var(--mc-font); font-size: clamp(11px, 1.953cqw, 14px);
	color: #AEB3B9; line-height: 1.3; margin: 0; white-space: nowrap;
}

/* ---- cheat rows ---- */
.elementor .e-con.mc-rows { gap: 0; }
.elementor .e-con.mc-row {
	flex-direction: row; align-items: center;
	gap: clamp(6px, 1.116cqw, 8px);
	padding: clamp(9px, 1.814cqw, 13px) min(.558cqw, 4px);
	border-bottom: 1px solid var(--mc-line);
}
.elementor .e-con.mc-rows > .e-con:last-child { border-bottom: 0; }
.elementor .mc-row__main { flex: 1 1 auto; min-width: 0; }
.elementor.elementor .e-con .mc-row__main .elementor-icon-box-wrapper { display: flex; flex-direction: row; align-items: center; gap: clamp(6px, 1.116cqw, 8px); text-align: left; }
.elementor .mc-row__main .elementor-icon-box-icon { margin: 0; display: flex; }
.elementor .mc-row__main .elementor-icon {
	width: clamp(26px, 4.743cqw, 34px); height: clamp(26px, 4.743cqw, 34px);
	border-radius: clamp(6px, 1.256cqw, 9px); display: grid; place-items: center; flex: none;
	background: var(--mc-field); border: 1px solid var(--mc-line);
}
.elementor .mc-row__main .elementor-icon svg { width: clamp(12px, 2.232cqw, 16px); height: auto; fill: var(--mc-accent-2); }
.elementor .mc-row__main .elementor-icon-box-title { margin: 0; }
.elementor .mc-row__main .elementor-icon-box-title,
.elementor .mc-row__main .elementor-icon-box-title > * {
	font-family: var(--mc-font); font-size: clamp(12px, 1.953cqw, 14px);
	font-weight: 600; line-height: 1.5; color: var(--mc-t-1); text-transform: none; letter-spacing: 0;
}
.elementor .mc-row__main .elementor-icon-box-description {
	font-family: var(--mc-font); font-size: clamp(10px, 1.674cqw, 12px);
	line-height: 1.5; color: var(--mc-t-4); margin: 0;
}
.elementor .mc-row__rate { width: auto; flex: 0 0 auto; }
.elementor.elementor .e-con .mc-row__rate .elementor-icon-box-wrapper { display: inline-flex; flex-direction: row; align-items: center; gap: clamp(3px, .558cqw, 4px); text-align: left; }
.elementor .mc-row__rate .elementor-icon-box-icon { margin: 0; display: flex; }
.elementor .mc-row__rate .elementor-icon svg { width: clamp(11px, 1.953cqw, 14px); height: auto; fill: var(--mc-warn); }
.elementor .mc-row__rate .elementor-icon-box-title { margin: 0; }
.elementor .mc-row__rate .elementor-icon-box-title,
.elementor .mc-row__rate .elementor-icon-box-title > * {
	font-family: var(--mc-font); font-size: clamp(11px, 1.814cqw, 13px);
	font-weight: 600; line-height: 1.5; color: var(--mc-warn); text-transform: none; letter-spacing: 0;
}
.elementor .mc-row__rate .elementor-icon-box-description { display: none; }
.elementor .mc-btn-w--row .elementor-button {
	--mc-h: clamp(30px, 5.302cqw, 38px);
	font-size: clamp(11px, 1.953cqw, 14px);
	padding: 0 clamp(9px, 2.511cqw, 18px);
	font-weight: 600; text-transform: capitalize;
}
@media (max-width: 480px) {
	.elementor .e-con.mc-row { flex-wrap: wrap; row-gap: 6px; }
	.elementor .mc-row__main { flex: 1 1 60%; }
}

/* ---- view-all link ---- */
.elementor.elementor .e-con .mc-viewall .elementor-icon-box-wrapper { display: flex; flex-direction: row; align-items: center; gap: clamp(4px, .9cqw, 6px); text-align: left; }
.elementor .mc-viewall .elementor-icon-box-icon { margin: 0; display: flex; }
.elementor .mc-viewall .elementor-icon svg { width: clamp(14px, 2.79cqw, 20px); height: auto; fill: var(--mc-accent-2); }
.elementor .mc-viewall .elementor-icon-box-title { margin: 0; }
.elementor .mc-viewall .elementor-icon-box-title,
.elementor .mc-viewall .elementor-icon-box-title > * {
	font-family: var(--mc-font); font-size: clamp(13px, 2.232cqw, 16px);
	font-weight: 600; line-height: 1.25; color: var(--mc-accent-2);
	text-transform: none; letter-spacing: 0; text-decoration: none;
}
.elementor .mc-viewall .elementor-icon-box-description { display: none; }

/* ---- sidebar ---- */
.elementor .e-con.mc-side__list { gap: clamp(14px, 4.92cqw, 22px); align-items: stretch; }
.elementor.elementor .e-con .mc-side__item .elementor-icon-box-wrapper { display: flex; flex-direction: row; align-items: center; gap: clamp(8px, 2.683cqw, 12px); text-align: left; }
.elementor .mc-side__item .elementor-icon-box-icon { margin: 0; display: flex; }
.elementor .mc-side__item .elementor-icon {
	width: clamp(32px, 9.392cqw, 42px); height: clamp(32px, 9.392cqw, 42px); flex: none;
	display: grid; place-items: center;
	background: var(--mc-accent-wash); border: 1px solid var(--mc-accent-line);
}
.elementor .mc-side__item .elementor-icon svg { width: clamp(14px, 4.472cqw, 20px); height: auto; fill: var(--mc-accent-2); }
.elementor .mc-side__item .elementor-icon-box-title { margin: 0; }
.elementor .mc-side__item .elementor-icon-box-title,
.elementor .mc-side__item .elementor-icon-box-title > * {
	font-family: var(--mc-font); font-size: clamp(15px, 4.472cqw, 20px);
	font-weight: 700; line-height: 1.5; color: var(--mc-t-1); text-transform: none; letter-spacing: 0;
}
.elementor .mc-side__item .elementor-icon-box-description {
	font-family: var(--mc-font); font-size: clamp(12px, 3.578cqw, 16px);
	font-weight: 500; line-height: 1.2; color: var(--mc-t-3); margin: 0;
}
.elementor .e-con.mc-side__in > .mc-btn-w { align-self: flex-start; }

/* ---- corrections ----------------------------------------------------------
   The icon-box lays its icon out as a sibling block of the content, so the
   game row's tick landed on its own line above the title instead of inside
   the chip. Hide the widget's icon and draw the tick on the chip itself. */
.elementor .mc-gamerow__l .elementor-icon-box-icon { display: none; }
.elementor.elementor .e-con .mc-gamerow__l .elementor-icon-box-wrapper { display: flex; flex-direction: row; align-items: center; gap: 0; }
.elementor .mc-gamerow__l .elementor-icon-box-content {
	display: flex; align-items: center; gap: clamp(6px, 1.395cqw, 10px); flex-direction: row;
}
.elementor .mc-gamerow__l .elementor-icon-box-description::before {
	content: ""; flex: none;
	width: clamp(9px, 1.674cqw, 12px); height: clamp(9px, 1.674cqw, 12px);
	margin-inline-end: clamp(3px, .6cqw, 4px);
	background: currentColor;
	-webkit-mask: url("img/tick.svg") no-repeat center / contain;
	mask: url("img/tick.svg") no-repeat center / contain;
}

/* the view-all link sits at the panel's left edge, not centred */
.elementor .mc-viewall { align-self: flex-start; text-align: left; }
.elementor .e-con.mc-browser > .mc-panel__in > .mc-viewall { margin-top: min(.84cqw, 6px); }

/* the headline's line break comes from its 819px measure, which a centred
   flex parent was collapsing */
.elementor .mc-h2-w { width: 100%; }
.elementor .mc-h2-w .elementor-heading-title { margin-inline: auto; }
.elementor .mc-h2-w--left .elementor-heading-title { margin-inline: 0; }

/* Elementor's optimised markup drops .elementor-widget-container, so the
   inline-flex eyebrow sits on the widget's own line box and inherits its
   leading. Making the wrapper a flex container removes the line box. */
.elementor .mc-eyebrow-w { display: flex; }

/* ===========================================================================
   HOW IT WORKS  (.mc-steps)
   The reference nests .step > .step__card so it has four pseudo-elements to
   play with (glow, stroke frame, two brackets). Elementor gives one container
   per card, so the glow is drawn once on the stage as four gradients at the
   cards' computed centres, and the two corner brackets share a single ::after.
   ======================================================================== */
.elementor .e-con.mc-steps {
	position: relative; overflow: hidden;
	padding-block: clamp(48px, 5vw, 80px) clamp(60px, 6.25vw, 100px);
	background:
		linear-gradient(180deg, #040406 0%, rgba(4, 4, 6, .955) 55%, #040406 98%),
		url("img/ai-bg.jpg") center / cover no-repeat;
}
.elementor .e-con.mc-steps > .mc-shell { gap: 0; }

/* -- head: 932 left column + 372 right over a 1320 shell, bottom aligned --- */
.elementor .e-con.mc-steps__head {
	container-type: inline-size;
	flex-direction: row; flex-wrap: wrap;
	gap: clamp(12px, 1.212vw, 16px);
	align-items: flex-end; justify-content: space-between;
}
.elementor .e-con.mc-steps__head-l {
	flex: 1 1 min(100%, 26cqw); max-width: 70.606cqw;
	gap: clamp(12px, 1.515cqw, 20px);
}
.elementor .mc-steps__head-l .mc-h2-w .elementor-heading-title { max-width: 48.409cqw; }
/* Elementor pins every container widget to min-width:0 / max-width:100%, so
   the doubled class is what lets the right column keep a measure and wrap
   under the headline once it no longer fits. */
.elementor.elementor .e-con > .elementor-widget.mc-steps__head-r {
	flex: 0 1 28.182cqw; max-width: 28.182cqw; min-width: min(100%, 240px);
}
.elementor .mc-steps__head-r p {
	font-family: var(--mc-font); font-size: 18px; line-height: 1.5;
	color: var(--mc-t-2); margin: 0;
}
/* The right column wraps under the headline on its own once it can no longer
   sit beside it — its min-width goes to 100%. What does not follow are the two
   caps above: the left column's 70.6% and the headline's 48.4%, both shares of
   the *two-column* arrangement Figma drew. Left in place they hold the headline
   to half the width it now has to itself, and the words stack one per line.
   Released here, so the measure is the one Figma intended while the columns sit
   side by side, and the full width once they do not.

   A container query rather than a viewport one: the wrap depends on how wide
   this head is, which is not the same thing as how wide the window is. */
@container (max-width: 860px) {
	.elementor .e-con.mc-steps__head-l { flex-basis: 100%; max-width: 100%; }
	.elementor .mc-steps__head-l .mc-h2-w .elementor-heading-title { max-width: none; }
	.elementor.elementor .e-con > .elementor-widget.mc-steps__head-r {
		flex-basis: 100%; max-width: 100%;
	}
}

/* -- stage: the 1136.7 x 964 board the four cards are scattered across ----- */
.elementor .e-con.mc-stage {
	--display: block; display: block;
	position: relative; container-type: inline-size;
	width: 100%; max-width: 1136.7px; margin-top: clamp(36px, 5.152%, 68px); margin-inline: auto;
	aspect-ratio: 1136.7 / 964;
	background: url("img/steps-connectors.svg") 0 0 / 100% 100% no-repeat;
	padding: 0;
}
/* the cyan bloom behind the badge (Figma 2055:1546) */
.elementor .e-con.mc-stage::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background: radial-gradient(13.195% 8.22% at 48.735% 8.63%, rgba(4, 211, 247, .40), transparent 70%);
}
/* the four card glows. Each is a 165px circle of 50% cyan blurred by 147px,
   which flattens to a peak alpha near .073 spread over roughly 3 sigma. The
   blur reaches well past the stage, and a background never paints outside
   its own box, so the layer is inset by a full radius and every centre is
   shifted by the same amount (1% of the stage = 1cqw across, .848cqw down). */
.elementor .e-con.mc-stage::after {
	content: ""; position: absolute; inset: -38cqw; pointer-events: none; z-index: 0;
	background:
		radial-gradient(circle 38cqw at 72.23cqw 52.74cqw, rgba(4, 211, 247, .073), rgba(4, 211, 247, .044) 34%, rgba(4, 211, 247, .010) 68%, transparent 100%),
		radial-gradient(circle 38cqw at 125.90cqw 60.04cqw, rgba(4, 211, 247, .073), rgba(4, 211, 247, .044) 34%, rgba(4, 211, 247, .010) 68%, transparent 100%),
		radial-gradient(circle 38cqw at 65.32cqw 85.47cqw, rgba(4, 211, 247, .073), rgba(4, 211, 247, .044) 34%, rgba(4, 211, 247, .010) 68%, transparent 100%),
		radial-gradient(circle 38cqw at 132.33cqw 95.93cqw, rgba(4, 211, 247, .073), rgba(4, 211, 247, .044) 34%, rgba(4, 211, 247, .010) 68%, transparent 100%);
}

/* -- badge pill ----------------------------------------------------------- */
.elementor .e-con.mc-stage__pill {
	position: absolute; left: 35.04%; top: 0; z-index: 4;
	width: 29.67%; height: 6.64%; min-height: 52px;
	flex-direction: row; align-items: center; justify-content: center;
	gap: .8cqw; padding: 0 1.76cqw;
	background:
		radial-gradient(60% 120% at 50% 50%, rgba(4, 211, 247, .35), transparent 70%),
		var(--mc-pill);
	border: 1px solid rgb(34 211 238 / .45);
}
.elementor .e-con.mc-stage__pill::before,
.elementor .e-con.mc-stage__pill::after {
	content: ""; position: absolute; top: -1px; bottom: -1px; width: 3px; background: var(--mc-accent-2);
}
.elementor .e-con.mc-stage__pill::before { left: -1px; }
.elementor .e-con.mc-stage__pill::after { right: -1px; }
.elementor .mc-stage__pill .elementor-widget-image { width: auto; }
.elementor .mc-stage__pill .mc-brand__mark img { height: 2.82cqw; min-height: 22px; width: auto; max-width: none; }
.elementor .mc-stage__pill .mc-brand__word img { height: 2.41cqw; min-height: 19px; width: auto; max-width: none; }

/* -- the cards ------------------------------------------------------------ */
.elementor .e-con.mc-step {
	position: absolute; z-index: 1;
	width: 32.990%; aspect-ratio: 375 / 315;
	flex-direction: column; justify-content: flex-start; align-items: stretch;
	/* Figma "Rectangle 3" — chamfered top-left and bottom-right, the same
	   silhouette as the buttons */
	padding: 4.31cqw 5.11cqw 4.23cqw 2.91cqw;
	gap: 1.06cqw;
	background: rgba(255, 255, 255, .012);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	clip-path: polygon(15.2% 0, 100% 0, 100% 86.67%, 85.87% 100%, 0 100%, 0 18.1%);
}
.elementor .e-con.mc-step--1 { left: 6.914%; top: 16.390%; }
.elementor .e-con.mc-step--2 { left: 60.579%; top: 25%; }
.elementor .e-con.mc-step--3 { left: 0; top: 54.979%; }
.elementor .e-con.mc-step--4 { left: 67.010%; top: 67.324%; }
/* the 2px #434343 stroke, drawn as a masked frame so it follows the chamfer */
.elementor .e-con.mc-step::before {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	box-sizing: border-box; padding: 2px;
	background: var(--mc-edge);
	clip-path: polygon(15.2% 0, 100% 0, 100% 86.67%, 85.87% 100%, 0 100%, 0 18.1%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
}
/* both cyan corner brackets (Figma "Rectangle 39948", 31.4px arms) out of one
   pseudo: four 1.12px bars pinned to the top-right and bottom-left corners */
.elementor .e-con.mc-step::after {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background:
		linear-gradient(var(--mc-accent-2) 0 0) no-repeat top right / 8.373% 1.12px,
		linear-gradient(var(--mc-accent-2) 0 0) no-repeat top right / 1.12px 9.968%,
		linear-gradient(var(--mc-accent-2) 0 0) no-repeat bottom left / 8.373% 1.12px,
		linear-gradient(var(--mc-accent-2) 0 0) no-repeat bottom left / 1.12px 9.968%;
}
.elementor .mc-step > .elementor-widget { width: 100%; }
/* the icon sits 20px above the heading where the flex gap is 12, so the rest
   comes from its own margin — which has to out-specify the widget margin
   reset a few hundred lines up */
.elementor .e-con.mc-step > .elementor-widget.mc-step__ico {
	width: auto; margin-block-end: .7cqw; text-align: left; align-self: flex-start;
}
.elementor .mc-step .mc-step__ico img {
	/* Figma "Icon" 2055:1728 — an 80x80 rotated glass tile, taken from the
	   design rather than rebuilt, so it keeps its blur and gloss */
	width: 7.04cqw; height: 7.04cqw; min-width: 44px; min-height: 44px;
	display: block; object-fit: contain; max-width: none; margin-inline: 0 auto;
}
.elementor .e-con.mc-step > .elementor-widget.mc-step__num {
	position: absolute; right: 3.35cqw; top: 5.02cqw; width: auto; z-index: 4; margin: 0;
}
.elementor .e-con.mc-step .mc-step__num .elementor-heading-title {
	/* header_size "span" renders inline, so it would keep a line box's leading */
	display: block; font-family: var(--mc-font); font-size: clamp(30px, 5.63cqw, 64px);
	font-weight: 700; line-height: 1; margin: 0;
	background: var(--mc-numeral);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	-webkit-text-stroke: 1px var(--mc-numeral-stroke);
}
.elementor .mc-step .mc-step__h .elementor-heading-title {
	font-family: var(--mc-font); font-size: clamp(15px, 1.76cqw, 20px);
	font-weight: 600; line-height: 1.4; letter-spacing: .02em;
	text-transform: uppercase; color: var(--mc-t-0); margin: 0;
}
/* --mc-lit is 0 at rest and 1 once the card has the reader's attention;
   step-focus.js sets it from the card's position as the page scrolls. At 0
   this is exactly the body colour it has always been, so with the script
   absent — or blocked, or reduced-motion — nothing about the copy changes.
   (Not --mc-focus: that is already the design system's focus-ring colour.) */
@property --mc-lit {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}
.elementor .mc-step .mc-step__p p {
	font-family: var(--mc-font); font-size: clamp(13px, 1.41cqw, 16px);
	line-height: 1.6; margin: 0;
	color: color-mix(in srgb, var(--mc-t-0) calc(var(--mc-lit) * 100%), var(--mc-t-2));
}

/* -- below the scatter's comfortable width the board becomes a plain grid.
      The cards stop being absolutely positioned, so every measurement that
      was a share of the stage is restated as a share of a half-track card
      (48.8cqw of the stage) — .mc-step must NOT become a container itself,
      or its own padding would query the stage instead of the card. -------- */
@media (max-width: 1080px) {
	.elementor .e-con.mc-stage {
		--display: grid; display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(16px, 2.4vw, 24px);
		aspect-ratio: auto; background-image: none;
		margin-top: clamp(32px, 4.4vw, 48px);
	}
	.elementor .e-con.mc-stage::before,
	.elementor .e-con.mc-stage::after { display: none; }
	.elementor .e-con.mc-stage__pill {
		position: relative; left: auto; top: auto; grid-column: 1 / -1;
		width: 100%; max-width: min(340px, 80%); height: clamp(48px, 7.8vw, 64px);
		justify-self: center; margin-inline: auto;
	}
	.elementor .mc-stage__pill .mc-brand__mark img { height: clamp(22px, 3.4vw, 30px); }
	.elementor .mc-stage__pill .mc-brand__word img { height: clamp(19px, 2.9vw, 26px); }
	.elementor .e-con.mc-step {
		/* relative, not static: the number is absolute and would otherwise
		   escape to the stage */
		position: relative; inset: auto; width: 100%; aspect-ratio: auto; min-height: 300px;
		padding: clamp(24px, 6.379cqw, 49px) clamp(22px, 7.549cqw, 58px) clamp(24px, 6.246cqw, 48px) clamp(20px, 4.294cqw, 33px);
		gap: clamp(8px, 1.562cqw, 12px);
	}
	.elementor.elementor .e-con.mc-step > .elementor-widget.mc-step__ico { margin-block-end: clamp(6px, 1.039cqw, 8px); }
	.elementor .mc-step .mc-step__ico img { width: clamp(52px, 10.409cqw, 80px); height: clamp(52px, 10.409cqw, 80px); }
	.elementor.elementor .e-con.mc-step > .elementor-widget.mc-step__num { right: clamp(14px, 4.943cqw, 38px); top: clamp(20px, 7.418cqw, 57px); }
	.elementor .e-con.mc-step .mc-step__num .elementor-heading-title { font-size: clamp(34px, 8.330cqw, 64px); }
	.elementor .mc-step .mc-step__h .elementor-heading-title { font-size: clamp(16px, 2.601cqw, 20px); }
	.elementor .mc-step .mc-step__p p { font-size: clamp(13px, 2.082cqw, 16px); }
}
@media (max-width: 640px) {
	.elementor .e-con.mc-stage { grid-template-columns: minmax(0, 1fr); }
	/* one card per row now fills the stage, so the shares go back to 1:1 */
	.elementor .e-con.mc-step {
		padding: clamp(24px, 13.07cqw, 49px) clamp(22px, 15.47cqw, 58px) clamp(24px, 12.8cqw, 48px) clamp(20px, 8.8cqw, 33px);
		gap: clamp(8px, 3.2cqw, 12px);
	}
	.elementor.elementor .e-con.mc-step > .elementor-widget.mc-step__ico { margin-block-end: clamp(6px, 2.13cqw, 8px); }
	.elementor .mc-step .mc-step__ico img { width: clamp(52px, 21.33cqw, 80px); height: clamp(52px, 21.33cqw, 80px); }
	.elementor.elementor .e-con.mc-step > .elementor-widget.mc-step__num { right: clamp(14px, 10.13cqw, 38px); top: clamp(20px, 15.2cqw, 57px); }
	.elementor .e-con.mc-step .mc-step__num .elementor-heading-title { font-size: clamp(34px, 17.07cqw, 64px); }
	.elementor .mc-step .mc-step__h .elementor-heading-title { font-size: clamp(16px, 5.33cqw, 20px); }
	.elementor .mc-step .mc-step__p p { font-size: clamp(13px, 4.267cqw, 16px); }
}


/* ===========================================================================
   SUPPORTED GAMES  (.mc-games)
   Figma 2055:97 — a 1484 content row at (140,80); the carousel column is 983
   and deliberately bleeds 24px past the right edge of the page.
   ======================================================================== */
.elementor .e-con.mc-games {
	position: relative; overflow: hidden;
	background: var(--mc-void);
	padding-block: clamp(48px, 5vw, 80px) clamp(64px, 6.6vw, 106px);
}
/* Figma 2055:99 — the circuit trace, mirrored (svgexp drops the root
   transform, so the flip has to be restored here) and faded out at the tail
   so it never cuts hard at the section boundary. */
.elementor .e-con.mc-games::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	left: 17.25%; top: max(-261px, -16.31vw); right: auto; bottom: auto;
	width: min(420px, 26.25vw); height: auto; aspect-ratio: 420.03 / 822.879;
	background: url("img/deco-trace-tall.svg") 0 0 / 100% 100% no-repeat;
	opacity: .16; mix-blend-mode: screen; transform: scale(-1, -1);
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 94%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 94%);
}
.elementor .e-con.mc-games__in {
	--display: grid; display: grid;
	grid-template-columns: minmax(0, 417px) minmax(0, 1fr);
	gap: clamp(32px, 5.25vw, 84px);
	align-items: start;
}
.elementor .e-con.mc-games__copy { max-width: 417px; gap: clamp(24px, 2.625vw, 42px); align-items: stretch; }
.elementor .e-con.mc-games__head { gap: clamp(10px, 1vw, 16px); align-items: stretch; }
.elementor .mc-h3-w .elementor-heading-title {
	font-family: var(--mc-font); font-size: clamp(26px, 2.6vw, 40px);
	font-weight: 600; line-height: 1.4; letter-spacing: 0;
	text-transform: uppercase; color: var(--mc-t-0); margin: 0;
}
.elementor .mc-silver p, .elementor .mc-silver .elementor-heading-title {
	background: var(--mc-silver);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.elementor .mc-games__lede p {
	font-family: var(--mc-font); font-size: 16px; line-height: 1.6;
	max-width: 379px; margin: 0;
}
/* Figma 2055:146 is a 128x46 button */
/* the 128px floor has to live on the wrapper: on the button itself the
   percentage would resolve against its own shrink-to-fit width */
.elementor .e-con.mc-games__copy > .mc-games__cta { align-self: flex-start; min-width: min(128px, 100%); }
.elementor .mc-games__cta .elementor-button { min-width: 100%; }

/* -- nav row: Figma 2055:159, a 722-wide row — a 501x2 progress track, then
      the two 44px arrows -------------------------------------------------- */
/* Elementor containers default to align-items:center, which would centre the
   rail's negative right margin instead of letting it bleed. */
.elementor .e-con.mc-games__col { min-width: 0; align-items: stretch; gap: 0; }
.elementor .e-con.mc-games__nav {
	flex-direction: row; align-items: center; flex-wrap: nowrap;
	width: 73.45%; height: 44px; padding: 0 0 0 clamp(6px, 2.49%, 18px);
	margin-block-end: clamp(24px, 3vw, 48px);
	gap: clamp(20px, 13.71%, 99px);
}
/* the track is the flex container's own ::before, so the row needs no filler
   element; the played portion is just a second background layer */
.elementor .e-con.mc-games__nav::before {
	/* Elementor absolutely positions .e-con::before for its overlay layer, so
	   this has to be put back in flow to work as the flex track */
	content: ""; position: relative; inset: auto; opacity: 1;
	flex: 1; min-width: 0; width: auto; height: 2px;
	/* the fill was a fixed 37.52% in the mockup; it is now driven by how far
	   the rail has actually been scrolled, and falls back to that same figure
	   when the script has not run */
	background:
		linear-gradient(90deg, #22D3EE, rgb(34 211 238 / .06))
			no-repeat 0 0 / var(--mc-rail-progress, 37.52%) 100%,
		var(--mc-track);
	transition: background-size var(--mc-dur) var(--mc-ease);
}
.elementor .e-con.mc-games__btns {
	flex-direction: row; align-items: center; flex: none; width: auto;
	gap: clamp(8px, 1vw, 16px); padding: 0;
}
.elementor .mc-railbtn { width: auto; flex: none; }
.elementor .mc-railbtn .elementor-icon-wrapper { line-height: 0; }
.elementor .mc-railbtn .elementor-icon {
	--mc-cx: 11px; --mc-cy: 11px;
	width: 44px; height: 44px; display: grid; place-items: center;
	color: #fff; background: none; border: 0; padding: 0;
	box-shadow: inset 0 0 0 1px currentColor;
	clip-path: polygon(var(--mc-cx) 0, 100% 0, 100% calc(100% - var(--mc-cy)),
	                   calc(100% - var(--mc-cx)) 100%, 0 100%, 0 var(--mc-cy));
	transition: color var(--mc-dur) var(--mc-ease);
}
/* mapped Font Awesome names render as inline SVG, so the size has to be set on
   the svg itself — font-size does nothing here */
.elementor .mc-railbtn .elementor-icon svg { width: 24px; height: 24px; fill: currentColor; }
.elementor .mc-railbtn--prev .elementor-icon svg { transform: scaleX(-1); }
.elementor .mc-railbtn--next .elementor-icon { color: var(--mc-accent-2); }
.elementor .mc-railbtn .elementor-icon:hover { color: var(--mc-accent-2); }

/* -- the carousel ----------------------------------------------------------
   Elementor's Nested Carousel, so Swiper owns the loop, the slide transition,
   the drag and the per-breakpoint slide count. Everything below is only about
   making it sit where Figma drew it: the widget's own arrows and pagination
   are switched off in its settings, because the section already has both in
   the row above the cards. */
.elementor .mc-games__carousel {
	width: auto; min-width: 0;
	/* the carousel is 983 in Figma and runs 24px past the page edge, so it
	   pulls itself out of the shell by the gutter plus that overhang */
	margin-right: calc(-1 * var(--mc-gutter) - 24px);
	cursor: grab;
}
/* The carousel has to clip on the left and not on the right. Left, because the
   loop's duplicated slides would otherwise spill out and cover the copy column
   beside it. Right, because the design runs the cards off the edge of the page
   — and plain `overflow: hidden` ends the row at the widget's own right edge,
   which sits 150px short of the viewport, so the third card was cut away
   entirely rather than trailing off.

   A one-sided clip does both: square at the left, effectively unbounded to the
   right. The vertical insets are negative so nothing trims the cards' own
   corner brackets. */
.elementor .mc-games__carousel .e-n-carousel {
	overflow: visible;
	clip-path: inset(-60px -100vw -60px 0);
}
.elementor .mc-games__carousel .swiper-wrapper { align-items: stretch; }
.elementor .mc-games__carousel .swiper-slide { height: auto; }
.elementor .mc-games__carousel:active { cursor: grabbing; }

/* The receding look Figma froze into cards two and three, now applied by
   position: a card to the right of the leading one steps back in scale and
   opacity, and steps forward as it arrives. `--mc-d` is the slide's signed
   distance from the front, written by the adapter.

   It is registered rather than left as a plain custom property, because that
   is what makes it animatable. Transitioning `transform` and `opacity` while
   an *unregistered* property feeds them does not work: the transition starts
   and then sits at its initial value forever, since an unregistered property
   is just a token stream with nothing to interpolate. Registering `--mc-d` as
   a number means the distance itself eases, and the two derived properties
   simply follow it every frame. Same trick as --inv-sweep on the brief. */
@property --mc-d {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}
/* The effect goes on the slide, not on the card inside it. Elementor gives
   every .e-con a standing `transition: ... transform .4s`, and on the card —
   which is also a container-query container — that transition never advances:
   it sits in the `running` state at its initial value forever, so the card
   simply never scales. The .swiper-slide has neither the transition nor the
   containment, and Swiper does not touch individual slide transforms in its
   default effect, so it is free to use. Layout is untouched either way, so the
   card's cqw-based internals are unaffected. */
.elementor .mc-games__carousel .swiper-slide {
	--mc-step: clamp(0, var(--mc-d, 0), 2);
	transform: scale(calc(1 - var(--mc-step) * .075));
	opacity: calc(1 - var(--mc-step) * .28);
	transform-origin: center left;
	/* No transition on --mc-d, deliberately. Any transition started on a slide
	   in this subtree sits in the `running` state and never advances, so the
	   value stays pinned at its initial 0 and no card ever scales. The step is
	   therefore applied outright — which lands at the same moment Swiper starts
	   its own 550ms slide, so the change is carried by that movement rather
	   than happening in still air. */
}

.elementor .e-con.mc-gcard {
	/* percentage padding here would resolve against the RAIL, not the card, so
	   the inset lives on the inner panel in cqw of this card instead */
	position: relative; flex: none; container-type: inline-size; padding: 0;
	align-items: stretch;
	background: rgb(4 211 247 / .02); border: 1px solid #151920;
	--g-r: 90.66cqw; --g-a: .0676;
}
/* Figma drew three cards at falling widths and opacities — a still picture of
   a carousel, where the second and third stand in for cards receding out of
   view. Now that the rail actually moves, every card is a card: same width,
   same weight, and the fade is applied by position instead of by index. */
/* width comes from the widget's slides-per-view, not from here */
.elementor .mc-games__carousel .swiper-slide > .e-con.mc-gcard { width: 100%; }
.elementor .e-con.mc-gcard__in {
	/* Figma "Rectangle 39946": M0,0 L330.2,0 L370.8,39.9 L370.8,421 L41.2,421 L0,377.2 Z
	   — chamfered top-right and bottom-left. */
	/* width:auto so Elementor's --width:100% does not make the panel overflow
	   the inset it is supposed to sit inside */
	position: relative; padding: 0; width: auto; align-self: stretch; gap: 0;
	margin: 6.167cqw 6.024cqw 4.838cqw;
	background: var(--mc-panel-alt);
	clip-path: polygon(0 0, 89.1% 0, 100% 9.5%, 100% 100%, 11.1% 100%, 0 89.6%);
}
/* Figma "Ellipse 2": a 95.3 disc sitting on the panel's bottom edge under the
   title block, blurred by 128 — which flattens to a wide, very faint bloom.
   Each card gets its own radius and peak because the blur is absolute while
   the cards are not. */
.elementor .e-con.mc-gcard__in::before {
	/* above the artwork, below the title block — the reference paints it in DOM
	   order between the two */
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: radial-gradient(circle var(--g-r) at 57.05% 87.08%,
		rgb(11 219 255 / var(--g-a)),
		rgb(11 219 255 / calc(var(--g-a) * .6065)) 33%,
		rgb(11 219 255 / calc(var(--g-a) * .1353)) 67%,
		transparent 100%);
}
/* both cyan corner brackets (Figma "Rectangle 39947/39948") out of one pseudo,
   sized in cqw so the arms stay square whatever the card's aspect ratio */
.elementor .e-con.mc-gcard__in::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background:
		linear-gradient(var(--mc-accent) 0 0) no-repeat top left / 8.531cqw 1.3px,
		linear-gradient(var(--mc-accent) 0 0) no-repeat top left / 1.3px 8.531cqw,
		linear-gradient(var(--mc-accent) 0 0) no-repeat bottom right / 8.531cqw 1.3px,
		linear-gradient(var(--mc-accent) 0 0) no-repeat bottom right / 1.3px 8.531cqw;
}
.elementor .mc-gcard__img { position: static; line-height: 0; }
.elementor .mc-gcard__img img {
	display: block; width: 100%; max-width: none;
	aspect-ratio: 369.5 / 293.8; object-fit: cover;
}

.elementor .e-con.mc-gcard__body {
	position: relative; z-index: 1; align-items: stretch;
	padding: 5.266cqw 7.590cqw 7.780cqw; gap: 2.177cqw;
}
.elementor .mc-gcard__h .elementor-heading-title {
	font-family: var(--mc-font); font-size: clamp(15px, 5.693cqw, 24px);
	font-weight: 600; line-height: 1.4; letter-spacing: .02em;
	text-transform: uppercase; color: var(--mc-t-0); margin: 0;
}
.elementor .e-con.mc-gcard__stats {
	flex-direction: row; justify-content: space-between; align-items: baseline;
	gap: 4cqw; padding: 0; color: var(--mc-t-2);
}
.elementor .mc-gcard__stats .mc-gcard__stat { width: auto; }
.elementor .mc-gcard__stat .elementor-heading-title {
	/* header_size "span" renders inline and would carry the wrapper's leading */
	display: block; font-family: var(--mc-font); font-size: clamp(12px, 4.269cqw, 18px);
	font-weight: 400; line-height: 1.6; letter-spacing: 0;
	text-transform: none; color: var(--mc-t-2); margin: 0; white-space: nowrap;
}

@media (max-width: 1080px) {
	.elementor .e-con.mc-games__in { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 40px); }
	/* one card at a time below the fold, and the overhang is given back so the
	   carousel sits inside the gutter like everything else */
	.elementor .mc-games__carousel { width: 100%; margin-right: 0; }
}

/* ===========================================================================
   FREE BANNER  (.mc-free)
   Figma 2055:750 — a 1249x288 card. The content row (2055:1007) is 1120 wide,
   inset 49 left / 80 right and vertically centred at 68.5. Every length below
   is a ratio of that 1249 card, so the block scales with its own width.
   ======================================================================== */
.elementor .e-con.mc-sec--tight { padding-block-start: 0; }

.elementor .e-con.mc-free {
	container-type: inline-size;
	position: relative; overflow: hidden;
	width: 100%; max-width: 1249px; margin-inline: auto; padding: 0;
	background: var(--mc-panel-dark);
}
/* Figma 2055:752 "Rectangle 43": 1174.7x234.6, flush left, 63 down, 74.3 from
   the right — faded in on three sides so it reads as a lit inner plate */
.elementor .e-con.mc-free::before {
	content: ""; position: absolute; inset: 5.044cqw 5.949cqw 0 0;
	width: auto; height: auto; opacity: 1; z-index: 0;
	background: var(--mc-panel-inner);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 4.5cqw), linear-gradient(90deg, transparent, #000 4.8cqw, #000 calc(100% - 4.8cqw), transparent);
	mask-image: linear-gradient(180deg, transparent, #000 4.5cqw), linear-gradient(90deg, transparent, #000 4.8cqw, #000 calc(100% - 4.8cqw), transparent);
	-webkit-mask-composite: source-in; mask-composite: intersect;
}
/* Figma 2055:828 — the cyan bloom washing up from below the card */
.elementor .e-con.mc-free::after {
	content: ""; position: absolute; left: 50%; bottom: -46%; top: auto;
	width: 95.5cqw; height: 50.5cqw; transform: translateX(-50%);
	background: radial-gradient(closest-side, rgb(4 211 247 / .30), rgb(4 95 123 / .14) 55%, transparent 75%);
	pointer-events: none; z-index: 0;
}
.elementor .e-con.mc-free__in {
	position: relative; z-index: 1;
	flex-direction: row; align-items: center; flex-wrap: wrap;
	width: 100%; gap: clamp(16px, 2.562cqw, 32px);
	padding: clamp(26px, 5.484cqw, 68.5px) clamp(20px, 6.405cqw, 80px)
	         clamp(26px, 5.484cqw, 68.5px) clamp(20px, 3.923cqw, 49px);
}
/* the two decorations ride on the content row's pseudos and are pushed behind
   it; the row fills the card, so their card-relative offsets still hold */
.elementor .e-con.mc-free__in::before,
.elementor .e-con.mc-free__in::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 1;
	background-repeat: no-repeat; background-size: 100% 100%;
}
/* Figma 2055:753: 1223.7 x 209.8 at (-22, 116) inside the 1249 card */
.elementor .e-con.mc-free__in::before {
	left: -1.761cqw; bottom: -3.026cqw; top: auto; right: auto;
	width: 97.974cqw; height: auto; aspect-ratio: 1223.68 / 209.821;
	background-image: url("img/deco-freewave.svg");
}
.elementor .e-con.mc-free__in::after {
	left: 29.94cqw; top: 42%; bottom: auto; right: auto;
	width: 39.81cqw; height: auto; aspect-ratio: 497.211 / 402.009;
	background-image: url("img/deco-particles.svg");
	opacity: .85;
}
.elementor .mc-free__badge { width: auto; flex: none; }
.elementor .mc-free__badge .elementor-heading-title {
	display: grid; place-items: center;
	width: clamp(42px, 4.484cqw, 56px); height: clamp(42px, 4.484cqw, 56px);
	border-radius: 50%; border: 1px solid var(--mc-accent-2);
	color: var(--mc-accent-2);
	font-family: var(--mc-font-num); font-weight: 700;
	font-size: clamp(14px, 1.441cqw, 18px); line-height: 1.5;
	text-transform: none; letter-spacing: 0; margin: 0;
}
.elementor .e-con.mc-free__mid {
	flex: 1 1 0; min-width: min(100%, 240px); align-items: stretch;
	gap: clamp(12px, 1.601cqw, 20px); padding: 0;
}
.elementor .mc-free__h .elementor-heading-title {
	font-family: var(--mc-font); font-size: clamp(20px, 2.562cqw, 32px);
	font-weight: 700; line-height: 1.4; letter-spacing: .02em;
	text-transform: uppercase; color: var(--mc-t-0); margin: 0;
}
.elementor .mc-free__p p {
	font-family: var(--mc-font); font-size: clamp(13px, 1.281cqw, 16px);
	line-height: 1.6; max-width: max(280px, 37.87cqw); margin: 0;
	background: var(--mc-silver);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.elementor .e-con.mc-free__right {
	align-items: flex-end; gap: 0; flex: none; padding: 0;
	width: clamp(150px, 13.691cqw, 171px);
}
.elementor .mc-free__stat { width: 100%; text-align: right; }
.elementor .mc-free__stat p { margin: 0; }
.elementor .mc-free__stat .mc-free__num {
	font-family: var(--mc-font-num); font-weight: 700;
	font-size: clamp(22px, 2.402cqw, 30px); line-height: 1.5; color: var(--mc-t-1);
}
.elementor .mc-free__stat .mc-free__lab {
	font-family: var(--mc-font); font-size: clamp(13px, 1.281cqw, 16px);
	line-height: 1.22; color: var(--mc-t-3);
}
.elementor .mc-free__stat .mc-free__ok {
	font-family: var(--mc-font); font-size: clamp(13px, 1.281cqw, 16px);
	font-weight: 600; line-height: 1.22; color: var(--mc-ok);
	margin-top: clamp(6px, .64cqw, 8px);
}
/* .btn--xs in the reference: the smallest button on the page, sized off the
   card rather than the viewport */
.elementor .e-con.mc-free__right > .mc-btn-w { width: 100%; margin-top: clamp(10px, 1.321cqw, 16.5px); }
.elementor .mc-free__right .mc-btn-w .elementor-button {
	--mc-h: clamp(36px, 3.363cqw, 42px);
	font-size: clamp(11px, 1.023cqw, 12.8px); text-transform: capitalize;
	width: 100%;
}

@media (max-width: 900px) {
	.elementor .mc-free__p p { max-width: none; }
	.elementor .e-con.mc-free__right { align-items: flex-start; width: 100%; }
	.elementor .e-con.mc-free__right > .mc-btn-w { width: auto; align-self: flex-start; }
	.elementor .mc-free__right .mc-btn-w .elementor-button { width: auto; }
	.elementor .mc-free__stat { text-align: left; }
}

/* ===========================================================================
   WHY MODCADO  (.mc-why)
   Figma 2055:2121 — 1600x678, content 1320 wide at y=100 with 80 clear below.
   ======================================================================== */
.elementor .e-con.mc-why {
	position: relative; overflow: hidden;
	padding-block: clamp(56px, 6.25vw, 100px) clamp(48px, 5vw, 80px);
	background: var(--mc-bg);
}
/* Figma 2055:1466 — the same mirrored circuit trace the games section uses */
.elementor .e-con.mc-why::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	left: 16.88%; top: max(-8px, -.5vw); right: auto; bottom: auto;
	width: min(420px, 26.25vw); height: auto; aspect-ratio: 420.03 / 822.879;
	background: url("img/deco-trace-tall.svg") 0 0 / 100% 100% no-repeat;
	opacity: .16; mix-blend-mode: screen; transform: scale(-1, -1);
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 94%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 94%);
}
/* the wide fan sweeping the full width behind the feature grid */
.elementor .e-con.mc-why::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	left: -.875%; top: 7.875vw; right: auto; bottom: auto;
	width: 109.84vw; height: auto; aspect-ratio: 1757.37 / 552.441;
	background: url("img/deco-whyfan.svg") 0 0 / 100% 100% no-repeat;
	opacity: .41;
}
.elementor .e-con.mc-why > .mc-shell { position: relative; z-index: 1; gap: 0; }
.elementor .mc-h2-w--why .elementor-heading-title { max-width: 791px; }
.elementor.elementor .e-con > .elementor-widget.mc-lede-w--why { max-width: 770px; }
.elementor .mc-lede-w--why p { font-weight: 700; }
.elementor .mc-eyebrow-w--bold .elementor-heading-title { font-weight: 700; }

/* three 393.3 columns, 70 apart, 78 between rows (Figma 2055:3359) */
/* Columns live on the container as Elementor's own responsive Columns
   control, so they are editable in the panel. Only the fluid gap stays here. */
.elementor .e-con.mc-why__grid {
	gap: clamp(36px, 4.875vw, 78px) clamp(24px, 4.375vw, 70px);
	margin-top: clamp(32px, 5vw, 80px); padding: 0;
}
.elementor .mc-feat { width: auto; }
/* Elementor writes a per-element `gap:15px` for every icon-box at (0,4,0),
   so anything that owns its own icon spacing has to out-specify that. */
.elementor.elementor .e-con .mc-feat .elementor-icon-box-wrapper {
	display: flex; flex-direction: row; align-items: flex-start; text-align: left; gap: 0;
}
/* the widget's own icon margin is what separates the two columns here, so it
   carries the design gap rather than a flex gap on top of it */
.elementor.elementor .e-con .mc-feat .elementor-icon-box-wrapper .elementor-icon-box-icon {
	flex: none; margin: 2px clamp(8px, .75vw, 12px) 0 0;
}
/* the six tiles share one Figma glyph, so the widget's Font Awesome icon is
   masked over with the real artwork rather than approximated */
.elementor .mc-feat .elementor-icon {
	display: block; background: none; padding: 0; border: 0;
	width: clamp(20px, 1.5vw, 24px); height: clamp(20px, 1.5vw, 24px);
	background-color: var(--mc-accent-2);
	-webkit-mask: url("img/ico-feat.svg") no-repeat center / contain;
	mask: url("img/ico-feat.svg") no-repeat center / contain;
}
.elementor .mc-feat .elementor-icon svg,
.elementor .mc-feat .elementor-icon i { display: none; }
.elementor .mc-feat .elementor-icon-box-content { display: block; }
.elementor .mc-feat .elementor-icon-box-title,
.elementor .mc-feat .elementor-icon-box-title > * {
	font-family: var(--mc-font); font-size: clamp(16px, 1.25vw, 20px);
	font-weight: 600; line-height: 1.4; letter-spacing: .02em;
	text-transform: uppercase; color: var(--mc-t-0);
}
.elementor .mc-feat .elementor-icon-box-title { margin: 0 0 clamp(8px, .75vw, 12px); }
.elementor .mc-feat .elementor-icon-box-description {
	font-family: var(--mc-font); font-size: 16px; font-weight: 700;
	line-height: 1.6; color: var(--mc-t-2); margin: 0;
}

@media (max-width: 1080px) {
	.elementor .e-con.mc-why__grid { gap: clamp(28px, 4.4vw, 44px); }
}
@media (max-width: 640px) {
	.elementor .e-con.mc-why__grid { gap: clamp(24px, 5.6vw, 36px); }
}

/* ===========================================================================
   STATS + FINAL CTA  (.mc-stats / .mc-final)
   Figma 2055:1833 — 1237x637: a 1224x167 stats block, 120 of air, then a
   1237x351 CTA card.
   ======================================================================== */
.elementor .e-con.mc-stats {
	position: relative; overflow: hidden;
	/* the trailing space is the footer's air. It lives here rather than as a
	   margin on the footer so nothing has to paint the document body — this
	   stylesheet loads on every page of the site. */
	padding-block: clamp(64px, 7vw, 112px) clamp(56px, 6.25vw, 100px);
	background: var(--mc-bg);
}
/* Figma 2055:1496 — the wire-grid plate at the right edge */
.elementor .e-con.mc-stats::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	right: max(-19px, -1.19vw); top: min(35.63vw, 570px); left: auto; bottom: auto;
	width: min(209px, 13.06vw); height: auto; aspect-ratio: 209 / 182.253;
	background: url("img/deco-grid.svg") 0 0 / 100% 100% no-repeat;
	-webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%);
	mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%);
}
.elementor .e-con.mc-stats > .mc-shell { position: relative; z-index: 1; gap: 0; }
.elementor .mc-stats__h .elementor-heading-title {
	font-family: var(--mc-font); text-align: center;
	font-size: clamp(24px, 2.3vw, 36px); font-weight: 700; line-height: 1.4;
	letter-spacing: .02em; text-transform: uppercase; color: var(--mc-t-0); margin: 0;
}
/* The column count is a widget setting now - Elementor's own Columns control,
   4 / 2 / 1 across desktop, tablet and mobile - so it is editable in the panel
   rather than here. What stays is what the panel cannot express: a gap that
   ramps with the viewport instead of stepping at a breakpoint, and the measure. */
.elementor .e-con.mc-stats__grid {
	gap: clamp(20px, 2.5vw, 40px); margin-top: clamp(28px, 3vw, 48px);
	max-width: 1088px; margin-inline: auto; padding: 0;
}
.elementor .e-con.mc-stat { gap: clamp(8px, 1vw, 16px); padding: 0; align-items: stretch; }
.elementor .mc-stat__lab .elementor-heading-title {
	display: block; font-family: var(--mc-font); font-size: 16px; font-weight: 500;
	line-height: 21px; color: #D2D2D5; text-transform: none; letter-spacing: 0; margin: 0;
}
.elementor .mc-stat__val .elementor-heading-title {
	display: block; font-family: var(--mc-font);
	font-size: clamp(24px, 2.1vw, 32px); font-weight: 600; line-height: 1;
	color: var(--mc-t-0); text-transform: none; letter-spacing: 0; margin: 0;
}
@media (max-width: 1024px) { .elementor .e-con.mc-stats__grid { gap: clamp(20px, 3.9vw, 32px); } }
@media (max-width: 767px)  { .elementor .e-con.mc-stats__grid { gap: clamp(18px, 5vw, 24px); } }

/* -- the closing card ----------------------------------------------------- */
.elementor .e-con.mc-final {
	container-type: inline-size;
	position: relative; overflow: hidden; padding: 0;
	width: 100%; max-width: 1237px;
	margin: clamp(56px, 7.5vw, 120px) auto 0;
	background: var(--mc-panel-dark);
}
/* Figma 2055:1850 "Rectangle 43": 1164x280.7, flush left, 77 down, 73 from the right */
.elementor .e-con.mc-final::before {
	content: ""; position: absolute; inset: 6.225cqw 5.901cqw 0 0;
	width: auto; height: auto; opacity: 1; z-index: 0;
	background: var(--mc-panel-inner);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 5.7cqw), linear-gradient(90deg, transparent, #000 4.8cqw, #000 calc(100% - 4.8cqw), transparent);
	mask-image: linear-gradient(180deg, transparent, #000 5.7cqw), linear-gradient(90deg, transparent, #000 4.8cqw, #000 calc(100% - 4.8cqw), transparent);
	-webkit-mask-composite: source-in; mask-composite: intersect;
}
.elementor .e-con.mc-final::after {
	content: ""; position: absolute; left: 50%; bottom: -46%; top: auto;
	width: 96.45cqw; height: 50.94cqw; transform: translateX(-50%);
	background: radial-gradient(closest-side, rgb(4 211 247 / .30), rgb(4 95 123 / .14) 55%, transparent 75%);
	pointer-events: none; z-index: 0;
}
.elementor .e-con.mc-final__in {
	position: relative; z-index: 1; align-items: center; text-align: center;
	width: 100%; gap: clamp(14px, 2.102cqw, 26px);
	padding: clamp(36px, 5.578cqw, 69px) clamp(16px, 1.94cqw, 24px);
}
.elementor .e-con.mc-final__in::before,
.elementor .e-con.mc-final__in::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 1;
	background-repeat: no-repeat; background-size: 100% 100%;
}
/* Figma 2055:1851: 1211.9 x 255.7 at (-22, 141) inside the 1237 card */
.elementor .e-con.mc-final__in::before {
	left: -1.778cqw; bottom: -3.694cqw; top: auto; right: auto;
	width: 97.97cqw; height: auto; aspect-ratio: 1211.92 / 255.72;
	background-image: url("img/deco-finalwave.svg");
}
.elementor .e-con.mc-final__in::after {
	left: 29.75cqw; top: 13.1cqw; bottom: auto; right: auto;
	width: 40.2cqw; height: auto; aspect-ratio: 497.211 / 402.009;
	background-image: url("img/deco-particles.svg");
	opacity: .85;
}
.elementor .mc-final__h { width: auto; }
.elementor .mc-final__h .elementor-heading-title {
	max-width: 59.9cqw; font-family: var(--mc-font);
	font-size: clamp(22px, 3.234cqw, 40px); font-weight: 600; line-height: 1.4;
	letter-spacing: .02em; text-transform: uppercase; color: var(--mc-t-0); margin: 0;
}
.elementor.elementor .e-con > .elementor-widget.mc-final__p { max-width: max(280px, 50.04cqw); }
.elementor .mc-final__p p {
	font-family: var(--mc-font); font-size: 16px; line-height: 1.6; margin: 0;
	background: var(--mc-silver);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Figma: 26 inside the text block, 32 down to the button */
.elementor .e-con.mc-final__in > .mc-final__cta { margin-top: clamp(3px, .485cqw, 6px); }

/* ===========================================================================
   FOOTER  (.mc-foot)
   Figma 2055:1262 — 1600x407, content 1222 wide at (188,110) with 72 clear.
   ======================================================================== */
.elementor .e-con.mc-foot {
	position: relative; overflow: hidden;
	background: var(--mc-bg); border-top: 1px solid #161F2D;
	padding-block: clamp(56px, 6.875vw, 110px) clamp(40px, 4.5vw, 72px);
}
/* Figma "Ellipse 1": 517 across at (466,-14) — left of centre, blurred r500.
   Flattened to a gradient: a 500px blur on a 517 disc leaves a very wide,
   very faint wash rather than a disc. */
.elementor .e-con.mc-foot::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none; opacity: 1;
	left: 29.125%; top: max(-14px, -.875vw); right: auto; bottom: auto;
	width: min(517px, 32.3vw); height: auto; aspect-ratio: 1;
	border-radius: 50%; background: rgb(4 211 247 / .21);
	filter: blur(min(250px, 15.625vw));
}
.elementor .e-con.mc-foot__in {
	--mc-shell: 1222px;
	position: relative; z-index: 1; gap: 0;
}
.elementor .e-con.mc-foot__top {
	flex-direction: row; justify-content: space-between; flex-wrap: wrap;
	align-items: flex-start; gap: clamp(24px, 3vw, 48px); padding: 0;
}
/* the footer lockup links to the top, and Elementor wraps the image in an
   inline <a> whose line box would add leading under each logo */
.elementor .e-con.mc-brand .elementor-widget-image a { display: block; line-height: 0; }
.elementor .e-con.mc-foot__brand {
	width: auto; flex: 0 1 auto; align-items: stretch;
	gap: clamp(20px, 2.375vw, 38px); padding: 0;
}
.elementor .mc-foot__links .elementor-icon-list-items {
	display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 32px);
}
.elementor .mc-foot__links .elementor-icon-list-item { margin: 0; padding: 0; }
.elementor .mc-foot__links .elementor-icon-list-icon { display: none; }
.elementor .mc-foot__links .elementor-icon-list-text {
	font-family: var(--mc-font); font-size: 16px; line-height: 24px;
	color: #8896AB; padding: 0; transition: color var(--mc-dur) var(--mc-ease);
}
.elementor .mc-foot__links a:hover .elementor-icon-list-text { color: #fff; }

.elementor .e-con.mc-foot__touch {
	width: auto; flex: 0 1 auto; align-items: flex-end;
	gap: clamp(14px, 1.5vw, 24px); padding: 0;
}
.elementor .mc-foot__touch-h { width: auto; }
.elementor .mc-foot__touch-h .elementor-heading-title {
	font-family: var(--mc-font); font-size: 18px; font-weight: 500;
	line-height: 28px; color: #E9E9EA; text-transform: none; letter-spacing: 0; margin: 0;
}
.elementor .e-con.mc-foot__social {
	flex-direction: row; width: auto; flex: none;
	gap: clamp(6px, .5625vw, 9px); padding: 0;
}
.elementor .mc-social { width: auto; flex: none; }
.elementor .mc-social .elementor-icon-wrapper { line-height: 0; }
.elementor .mc-social .elementor-icon {
	width: clamp(44px, 3.4375vw, 55px); height: clamp(38px, 2.9375vw, 47px);
	display: grid; place-items: center; border-radius: 12px; padding: 0;
	background: var(--mc-tile); border: 1px solid rgb(103 103 103 / .3);
	color: #cfd6e0; transition: border-color var(--mc-dur) var(--mc-ease), color var(--mc-dur) var(--mc-ease);
}
/* Figma draws the 24-unit glyphs at 43-44px inside the 55x47 tiles */
.elementor .mc-social .elementor-icon svg {
	width: clamp(22px, 1.75vw, 28px); height: clamp(22px, 1.75vw, 28px); fill: currentColor;
}
.elementor .mc-social .elementor-icon:hover { border-color: var(--mc-accent-2); color: var(--mc-accent-2); }

.elementor .e-con.mc-foot__bar {
	/* Figma has no rule here — just 100 of air between the row and the credits */
	flex-direction: row; justify-content: space-between; flex-wrap: wrap;
	align-items: baseline; gap: 24px; padding: 0;
	margin-top: clamp(40px, 6.25vw, 100px);
}
.elementor .mc-foot__copy { width: auto; }
.elementor .mc-foot__copy p {
	font-family: var(--mc-font); font-size: 16px; line-height: 24px;
	color: var(--mc-t-5); margin: 0;
}
.elementor .mc-foot__legal { width: auto; }
.elementor .mc-foot__legal .elementor-icon-list-items {
	display: flex; flex-wrap: wrap; gap: clamp(18px, 2.375vw, 38px);
}
.elementor .mc-foot__legal .elementor-icon-list-item { margin: 0; padding: 0; }
.elementor .mc-foot__legal .elementor-icon-list-icon { display: none; }
.elementor .mc-foot__legal .elementor-icon-list-text {
	font-family: var(--mc-font); font-size: 16px; line-height: 24px;
	color: var(--mc-t-5); padding: 0; transition: color var(--mc-dur) var(--mc-ease);
}
.elementor .mc-foot__legal a:hover .elementor-icon-list-text { color: #fff; }

/* Elementor's inline icon-list pads each item with an 8px margin and a 5px
   icon gutter; both lists here space themselves with the container gap. */
.elementor.elementor .e-con .mc-foot__links .elementor-icon-list-items,
.elementor.elementor .e-con .mc-foot__legal .elementor-icon-list-items { margin: 0; }
.elementor.elementor .e-con .mc-foot__links .elementor-icon-list-item,
.elementor.elementor .e-con .mc-foot__legal .elementor-icon-list-item { margin: 0; padding: 0; }
.elementor.elementor .e-con .mc-foot__links .elementor-icon-list-text,
.elementor.elementor .e-con .mc-foot__legal .elementor-icon-list-text { padding: 0; }

@media (max-width: 820px) {
	.elementor .e-con.mc-foot__touch { align-items: flex-start; }
	.elementor .mc-foot__touch-h .elementor-heading-title { text-align: left; }
	.elementor .e-con.mc-foot__bar { margin-top: clamp(32px, 5.85vw, 48px); }
}


/* ===========================================================================
   SECTION DECORATION
   The reference drops these in as <img class="deco">. They carry no meaning
   and nobody should have to step over them in the editor, so here they are
   background layers on the section's own pseudo-elements. Every placement is
   the Figma one, and mirrored artwork gets its transform back (svgexp zeroes
   the root transform on export).
   ======================================================================== */

/* -- hero: the wire-grid plate and the three cyan blooms ------------------ */
/* Figma 2055:388 — the wire-grid plate, on the shell so the section's own
   pseudo-elements are free for the two cyan blooms */
.elementor .e-con.mc-hero > .mc-shell::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none; opacity: 1;
	left: max(-21px, -1.31vw); right: auto; bottom: auto;
	top: calc(min(41vw, 656px) - clamp(44px, 5.375vw, 86px));
	width: min(209px, 13.06vw); height: auto; aspect-ratio: 209 / 182.253;
	background: url("img/deco-grid.svg") 0 0 / 100% 100% no-repeat;
	-webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%);
	mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%);
}
/* the tight 316 disc behind the app window */
.elementor .e-con.mc-hero::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	left: 68.5%; top: min(11.75vw, 188px); right: auto; bottom: auto;
	width: min(19.75vw, 316px); height: min(19.75vw, 316px);
	border-radius: 50%; background: var(--mc-accent); opacity: .55;
	filter: blur(min(10.4vw, 166px));
}
/* the two wide blooms; both carry the same 30px softening in the design,
   so one filtered layer holds them both */
.elementor .e-con.mc-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 1;
	width: auto; height: auto; filter: blur(min(1.9vw, 30px));
	background:
		radial-gradient(min(23.94vw, 383px) min(12.645vw, 202.5px)
			at calc(88.2% + min(23.94vw, 383px)) calc(min(9.16vw, 147px) + min(12.645vw, 202.5px)),
			rgb(5 211 247 / .4), transparent 70%),
		radial-gradient(min(21.715vw, 347.5px) min(11.47vw, 183.5px)
			at calc(56.4% + min(21.715vw, 347.5px)) calc(min(18.23vw, 292px) + min(11.47vw, 183.5px)),
			rgb(4 211 247 / .4), transparent 70%);
}
.elementor .e-con.mc-hero > .mc-shell { position: relative; z-index: 1; }

/* -- trust strip: the same plate, mirrored, hard against the right edge --- */
.elementor .e-con.mc-trust { position: relative; overflow: hidden; }
.elementor .e-con.mc-trust::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none; opacity: 1;
	right: 0; top: min(7.31vw, 117px); left: auto; bottom: auto;                   /* Figma 2055:745 */
	width: min(209px, 13.06vw); height: auto; aspect-ratio: 209 / 182.253;
	background: url("img/deco-grid.svg") 0 0 / 100% 100% no-repeat;
	transform: scaleX(-1);
	-webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%);
	mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%);
}
.elementor .e-con.mc-trust > .mc-shell { position: relative; z-index: 1; }

/* -- community: the wide circuit trace ----------------------------------- */
.elementor .e-con.mc-sec--community::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	left: 2.06%; top: min(.94vw, 15px); right: auto; bottom: auto;                 /* Figma 2055:1244 */
	width: min(700px, 43.75vw); height: auto; aspect-ratio: 700 / 650;
	background: url("img/deco-trace-wide.svg") 0 0 / 100% 100% no-repeat;
	opacity: .16; mix-blend-mode: screen; transform: scale(-1, -1);
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 94%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 94%);
}
.elementor .e-con.mc-sec > .mc-shell { position: relative; z-index: 1; }

/* -- how it works: a soft cyan ellipse upper-left, plate lower-right ------ */
.elementor .e-con.mc-steps::before {
	/* Figma "Ellipse 23": 862x781 at (314, 2628), mirrored XY — so it sits in
	   the upper left of the section, not the lower right. */
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	left: 19.63%; top: min(17.88vw, 286px); right: auto; bottom: auto;
	width: min(862px, 53.875vw); height: min(781px, 48.81vw);
	background: var(--mc-accent); opacity: .07; border-radius: 50%;
	filter: blur(min(200px, 12.5vw));
}
.elementor .e-con.mc-steps::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none; opacity: 1;
	right: 0; top: min(51.06vw, 817px); left: auto; bottom: auto;                  /* Figma 2055:24 */
	width: min(209px, 13.06vw); height: auto; aspect-ratio: 209 / 182.253;
	background: url("img/deco-grid.svg") 0 0 / 100% 100% no-repeat;
	-webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%);
	mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%);
}
.elementor .e-con.mc-steps > .mc-shell { position: relative; z-index: 1; }

/* the little cyan chamfered chip with the mark, sitting on the screenshot
   (Figma: 62.2 / 45.8 of the preview, 7.9 tall) */
.elementor .e-con.mc-preview > .elementor-widget.mc-preview__chip {
	position: absolute; left: 62.2cqw; top: 45.8cqw; width: auto; z-index: 4;
	height: max(34px, 7.9cqw); padding: 0 2.2cqw;
	display: inline-flex; align-items: center;
	background: linear-gradient(135deg, var(--mc-accent-2), var(--mc-teal-deep, #0F766E));
	clip-path: polygon(24% 0, 100% 0, 100% 76%, 76% 100%, 0 100%, 0 24%);
}
.elementor .mc-preview__chip img {
	height: max(16px, 3.7cqw); width: auto; max-width: none; display: block;
	filter: brightness(0) saturate(100%) invert(6%);
}
@media (max-width: 480px) { .elementor .e-con.mc-preview > .mc-preview__chip { display: none; } }


/* ===========================================================================
   DESIGN SYSTEM, UNLAYERED
   modcado.css keeps its components in @layer mc.components so a host stylesheet
   can always win. On an Elementor page the kit's CSS is unlayered, so it always
   does — headings come back Montserrat, title-case and left-aligned. These
   restate the same components outside the layer, and target the element inside
   the widget rather than the wrapper Elementor puts our class on.
   ======================================================================== */

/* ---- headings ----------------------------------------------------------- */
.elementor .e-con .mc-h1 .elementor-heading-title {
	font-family: var(--mc-font); font-size: var(--mc-fs-hero);
	line-height: var(--mc-lh-tight); letter-spacing: var(--mc-track-head);
	font-weight: 600; text-transform: uppercase; color: var(--mc-t-0); margin: 0;
}
.elementor .e-con .mc-h2 .elementor-heading-title {
	font-family: var(--mc-font); font-size: var(--mc-fs-2xl);
	line-height: var(--mc-lh-tight); letter-spacing: var(--mc-track-head);
	font-weight: 600; text-transform: uppercase; color: var(--mc-t-0); margin: 0;
}
.elementor .e-con .mc-h4 .elementor-heading-title {
	font-family: var(--mc-font); font-size: var(--mc-fs-xs);
	line-height: var(--mc-lh-head); letter-spacing: var(--mc-track-label);
	font-weight: 600; text-transform: uppercase; color: var(--mc-t-1); margin: 0;
}
.elementor .e-con .mc-h5 .elementor-heading-title {
	font-family: var(--mc-font); font-size: var(--mc-fs-2xs);
	line-height: var(--mc-lh-head); letter-spacing: var(--mc-track-label);
	font-weight: 600; text-transform: uppercase; color: var(--mc-t-1); margin: 0;
}
.elementor .e-con .mc-h1 em,
.elementor .e-con .mc-h2 em { font-style: normal; color: var(--mc-accent-2); }

/* ---- eyebrow: a rule, the label, and optionally a rule after it ---------- */
.elementor .e-con .mc-eyebrow { display: flex; }
.elementor .e-con .mc-eyebrow .elementor-heading-title {
	display: inline-flex; align-items: center; gap: clamp(7px, .625vw, 10px);
	font-family: var(--mc-font); font-size: clamp(13px, 1vw, 16px);
	font-weight: 400; line-height: var(--mc-lh-flat);
	letter-spacing: 0; text-transform: none; color: var(--mc-accent-2); margin: 0;
}
.elementor .e-con .mc-eyebrow .elementor-heading-title::before,
.elementor .e-con .mc-eyebrow--both .elementor-heading-title::after {
	content: ""; flex: none; width: clamp(11px, 1vw, 16px); height: 2px; background: currentColor;
}

/* ---- standfirst --------------------------------------------------------- */
.elementor .e-con .mc-lede p {
	font-family: var(--mc-font); font-size: var(--mc-fs-lede);
	line-height: var(--mc-lh-ui); color: var(--mc-t-2); margin: 0;
}

/* ---- big numerals ------------------------------------------------------- */
.elementor .e-con .mc-numeral .elementor-heading-title,
.elementor .e-con .mc-numeral {
	font-weight: 700; line-height: 1;
	background: var(--mc-numeral);
	-webkit-background-clip: text; background-clip: text; color: transparent;
	-webkit-text-stroke: 1px var(--mc-numeral-stroke-long);
}

/* ---- chips -------------------------------------------------------------- */
.elementor .e-con .mc-chip { width: auto; }
.elementor .e-con .mc-chip .elementor-heading-title {
	display: inline-flex; align-items: center; gap: clamp(3px, .3vw, 4px);
	height: clamp(20px, 1.56vw, 25px); padding: 0 clamp(7px, .63vw, 10px);
	border-radius: var(--mc-radius-pill);
	border: var(--mc-hairline) solid var(--mc-accent-line);
	background: var(--mc-accent-wash); color: var(--mc-accent-2);
	font-family: var(--mc-font); font-size: var(--mc-fs-micro);
	font-weight: 600; line-height: 1.35; letter-spacing: 0;
	text-transform: none; white-space: nowrap; margin: 0;
}
.elementor .e-con .mc-chip--ok .elementor-heading-title {
	background: var(--mc-ok-wash); border-color: var(--mc-ok-line); color: var(--mc-ok);
}
.elementor .e-con .mc-chip--warn .elementor-heading-title {
	background: var(--mc-warn-wash); border-color: rgb(251 191 36 / .3); color: var(--mc-warn);
}

/* ---- section + centred head --------------------------------------------- */
.elementor .e-con.mc-section { position: relative; padding-block: var(--mc-sec-y); overflow: hidden; }
.elementor .e-con.mc-section__head {
	align-items: center; text-align: center;
	gap: var(--mc-space-3); max-width: 1069px; margin-inline: auto;
}
.elementor .e-con.mc-section__head .mc-h2 .elementor-heading-title { max-width: 819px; margin-inline: auto; }
.elementor .e-con.mc-section__head .mc-lede p { max-width: 673px; margin-inline: auto; }
.elementor .e-con.mc-section__head .mc-eyebrow { justify-content: center; }

/* ---- chamfered card ----------------------------------------------------- */
.elementor .e-con.mc-card {
	position: relative;
	background: rgb(255 255 255 / .012);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	clip-path: polygon(15.2% 0, 100% 0, 100% 86.67%, 85.87% 100%, 0 100%, 0 18.1%);
	padding: clamp(24px, 2.6vw, 42px) clamp(22px, 2.9vw, 46px);
}

/* ---- the ghost button --------------------------------------------------- */
.elementor .e-con .mc-btn-w--ghost .elementor-button {
	background: transparent; color: var(--mc-accent-2);
	box-shadow: inset 0 0 0 var(--mc-hairline) currentColor;
}
.elementor .e-con .mc-btn-w--ghost .elementor-button::before,
.elementor .e-con .mc-btn-w--ghost .elementor-button::after { display: none; }
.elementor .e-con .mc-btn-w--ghost .elementor-button:hover {
	background: var(--mc-accent-wash); color: var(--mc-accent-2);
}


/* ===========================================================================
   PSEUDO-ELEMENTS ON A CONTAINER
   Elementor's `.e-con::before` is its background-overlay layer: absolutely
   positioned, pinned to all four edges and sized to the container. Anything
   this stylesheet draws on a container's pseudo-element inherits that
   geometry, and the draft's decorations set only the two offsets they care
   about — so a bracket meant for the top right keeps Elementor's `left: 0`
   and lands in the wrong corner. Clear the slate; the rules below then say
   only what they mean.
   ======================================================================== */
.elementor .e-con[class*="inv-"]::before,
.elementor .e-con[class*="inv-"]::after {
	left: auto; right: auto; top: auto; bottom: auto;
	width: auto; height: auto;
	border-radius: 0; opacity: 1; mix-blend-mode: normal;
}

/* ===========================================================================
   INVESTOR BRIEF  (.inv-*)
   Generated from invest/invest.css by bridge_invest.py — selectors re-anchored
   for Elementor's wrappers, everything else the draft's own CSS unchanged, so
   the draft stays the source of truth for this page.
   ======================================================================== */
/* ===========================================================================
   modcado.com/invest — page layer
   ===========================================================================
   Sits on top of theme/modcado.css and adds only the layouts that page needs.
   Written unlayered on purpose: modcado.css lives in @layer mc.*, so these
   rules win without a specificity fight — the same arrangement the WordPress
   bridge (hello-elementor-child/assets/elementor.css) uses.

   TRANSPOSING TO ELEMENTOR
   Every rule below is keyed to a single class, and containers/widgets are
   never selected through their parent's tag. To port a rule, prefix it:

       .inv-hero__in           →  .elementor .e-con.inv-hero__in
       .inv-reason p           →  .elementor .inv-reason p

   Elementor pins a few things at (0,4,0) that will need out-specifying, all
   of them already met on the landing page:
       gap: 15px            on every icon-box wrapper
       max-width: 100%      on every container widget
       min-width: 0         on every container widget
       margin-block-end     on widgets (already zeroed by the bridge)
   ======================================================================== */

/* ---- page-local tokens -------------------------------------------------- */
:root {
	--inv-gap:  clamp(16px, 1.75vw, 28px);   /* between sibling cards        */
	--inv-gap-l: clamp(24px, 2.8vw, 45px);   /* between grid columns         */
	--inv-pad:  clamp(20px, 2vw, 32px);      /* inside a plain (unpanelled)  */
	                                         /* block                        */
}

/* Sections alternate ground so the page reads in bands rather than one slab. */
.elementor .e-con.inv-problem,
.elementor .e-con.inv-proto,
.elementor .e-con.inv-timeline,
.elementor .e-con.inv-comp,
.elementor .e-con.inv-team { background: var(--mc-bg); }
.elementor .e-con.inv-primer,
.elementor .e-con.inv-why,
.elementor .e-con.inv-compare,
.elementor .e-con.inv-fin,
.elementor .e-con.inv-adv,
.elementor .e-con.inv-funds { background: var(--mc-void); }

/* a section that paints edge to edge and carries the AI texture */
.elementor .e-con.mc-bleed { width: 100%; max-width: none; }
.elementor .e-con.inv-vision,
.elementor .e-con.inv-pricing {
	background:
		linear-gradient(180deg, #040406 0%, rgb(4 4 6 / .955) 55%, #040406 98%),
		url("img/ai-bg.jpg") center / cover no-repeat;
}

/* Every section stacks head → body with one rhythm. This is its own class,
   not `.mc-section > .mc-shell`, so the four grid shells below are not
   fighting a descendant rule for their display — and so each container
   maps to exactly one Elementor layout mode. */
.elementor .e-con.inv-stack { display: flex; flex-direction: column; gap: var(--mc-space-6); }




/* ===========================================================================
   1. HERO
   ======================================================================== */
.elementor .e-con.inv-hero { position: relative; padding-block: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 112px); overflow: hidden; }
/* the same cyan bloom the landing page's hero carries, so the two pages read
   as one site */
.elementor .e-con.inv-hero::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	filter: blur(min(1.9vw, 30px));
	background:
		radial-gradient(min(23.94vw, 383px) min(12.6vw, 202px)
			at calc(84% + min(23.94vw, 383px)) calc(min(9.16vw, 147px) + min(12.6vw, 202px)),
			rgb(5 211 247 / .30), transparent 70%),
		radial-gradient(min(21.7vw, 347px) min(11.5vw, 183px)
			at calc(50% + min(21.7vw, 347px)) calc(min(18.2vw, 292px) + min(11.5vw, 183px)),
			rgb(4 211 247 / .26), transparent 70%);
}
.elementor .e-con.inv-hero > .mc-shell { position: relative; z-index: 1; }
.elementor .e-con.inv-hero__in {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: var(--inv-gap-l); align-items: center;
}
.elementor .e-con.inv-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--mc-space-4); }
.elementor .inv-hero__eyebrow { margin-bottom: calc(var(--mc-space-2) * -1); }
.elementor .inv-hero__h1 em { font-style: normal; color: var(--mc-accent-2); }
.elementor .inv-hero__lede { max-width: 46ch; }
.elementor .e-con.inv-hero__cta { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); flex-wrap: wrap; margin-top: var(--mc-space-3); }
.elementor .inv-hero__alt { font-size: var(--mc-fs-ui); font-weight: 700; text-transform: uppercase; }
.elementor .inv-hero__meta { font-size: var(--mc-fs-small); color: var(--mc-t-4); margin: 0; }

/* the three headline numbers */
.elementor .e-con.inv-hero__stats-in { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 38px); }
.elementor .e-con.inv-figure { display: flex; flex-direction: column; gap: var(--mc-space-1); }
.elementor .inv-figure__value { font-size: clamp(30px, 3.2vw, 50px); }
.elementor .inv-figure__value .elementor-heading-title { font-size: clamp(30px, 3.2vw, 50px); }
.elementor .inv-figure__label { font-size: var(--mc-fs-small); color: var(--mc-t-3); line-height: var(--mc-lh-ui); }
.elementor .inv-figure__label .elementor-heading-title { font-size: var(--mc-fs-small); color: var(--mc-t-3); line-height: var(--mc-lh-ui); }

@media (max-width: 900px) {
	.elementor .e-con.inv-hero__in { grid-template-columns: minmax(0, 1fr); }
}


/* ===========================================================================
   2. THE PROBLEM
   ======================================================================== */
/* Columns live on the container as Elementor's own responsive Columns
   control, so they are editable in the panel. Only the fluid gap stays here. */
.elementor .e-con.inv-split { gap: var(--inv-gap); }
.elementor .e-con.inv-note {
	display: flex; flex-direction: column; gap: var(--mc-space-3);
	padding: var(--inv-pad);
	background: var(--mc-panel-alt);
	border: var(--mc-hairline) solid var(--mc-line);
	border-left: 3px solid var(--mc-line-2);
}
.elementor .e-con.inv-note--accent { border-left-color: var(--mc-accent); }
.elementor .e-con.inv-note p { margin: 0; color: var(--mc-t-2); }



/* ===========================================================================
   3. PRIMER
   ======================================================================== */
.elementor .e-con.inv-primer__in {
	display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
	gap: var(--inv-gap-l); align-items: start;
}
.elementor .e-con.inv-primer__copy { display: flex; flex-direction: column; gap: var(--mc-space-4); }
.elementor .e-con.inv-primer__copy p { margin: 0; color: var(--mc-t-2); max-width: 60ch; }

/* the "simple example" card reuses the chamfered card from the system */
.elementor .e-con.inv-example {
	/* no container-type here: .mc-card is auto-width in this layout, and
	   inline-size containment would collapse it to its own padding */
	display: flex; flex-direction: column; gap: var(--mc-space-3);
	padding: clamp(26px, 2.4vw, 38px) clamp(28px, 2.9vw, 46px) clamp(26px, 2.4vw, 38px) clamp(22px, 2vw, 32px);
}
.elementor .e-con.inv-example p { margin: 0; color: var(--mc-t-2); }
.elementor .e-con.inv-example kbd {
	display: inline-block; padding: 2px 7px;
	font-family: var(--mc-font); font-size: .9em; font-weight: 600;
	color: var(--mc-accent-2);
	background: var(--mc-accent-wash);
	border: var(--mc-hairline) solid var(--mc-accent-line);
}

@media (max-width: 900px) { .elementor .e-con.inv-primer__in { grid-template-columns: minmax(0, 1fr); } }


/* ===========================================================================
   4. WORKING PROTOTYPE
   ======================================================================== */
.elementor .e-con.inv-proto__in {
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--inv-gap-l); align-items: center;
}
.elementor .e-con.inv-proto__copy { display: flex; flex-direction: column; gap: var(--mc-space-4); }
.elementor .e-con.inv-proto__copy p { margin: 0; color: var(--mc-t-2); }
.elementor .inv-proto__lead { margin: var(--mc-space-2) 0 0; color: var(--mc-t-1); }
.elementor .inv-proto__lead .elementor-heading-title { margin: var(--mc-space-2) 0 0; color: var(--mc-t-1); }

/* ticked list — the same tick the landing page's game rows use */
.elementor .inv-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(8px, .9vw, 12px); }
.elementor .inv-ticks li {
	display: flex; align-items: flex-start; gap: clamp(8px, .75vw, 12px);
	font-size: var(--mc-fs-body); line-height: var(--mc-lh-ui); color: var(--mc-t-2);
}
.elementor .inv-ticks li::before {
	content: ""; flex: none; margin-top: .45em;
	width: clamp(10px, .85vw, 13px); height: clamp(10px, .85vw, 13px);
	background: var(--mc-accent-2);
	-webkit-mask: url("img/tick.svg") no-repeat center / contain;
	mask: url("img/tick.svg") no-repeat center / contain;
}
.elementor .inv-ticks li b { color: var(--mc-t-0); font-weight: 600; }

/* the app screenshot in the same chamfered frame the landing page uses */
.elementor .e-con.inv-proto__shot {
	position: relative; margin: 0;
	padding: clamp(8px, .9vw, 14px);
	background: rgb(255 255 255 / .03);
	border: var(--mc-hairline) solid rgb(221 223 225 / .2);
}
.elementor .e-con.inv-proto__shot::before,
.elementor .e-con.inv-proto__shot::after {
	content: ""; position: absolute; width: clamp(11px, 1.1vw, 18px); aspect-ratio: 1;
	border: 1px solid var(--mc-accent-line-strong, rgb(34 211 238 / .7)); pointer-events: none;
}
.elementor .e-con.inv-proto__shot::before { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.elementor .e-con.inv-proto__shot::after { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
.elementor .e-con.inv-proto__shot img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) { .elementor .e-con.inv-proto__in { grid-template-columns: minmax(0, 1fr); } }


/* ===========================================================================
   5. WHY INVEST
   ======================================================================== */
/* Columns live on the container as Elementor's own responsive Columns
   control, so they are editable in the panel. Only the fluid gap stays here. */
.elementor .e-con.inv-reasons { gap: var(--inv-gap); }
.elementor .e-con.inv-reason {
	display: flex; flex-direction: column; gap: var(--mc-space-3);
	min-height: clamp(240px, 22vw, 300px);
	padding: clamp(26px, 2.4vw, 38px) clamp(28px, 2.9vw, 46px) clamp(26px, 2.4vw, 38px) clamp(22px, 2vw, 32px);
}
.elementor .inv-reason__num { font-size: clamp(28px, 2.6vw, 40px); }
.elementor .inv-reason__num .elementor-heading-title { font-size: clamp(28px, 2.6vw, 40px); }
.elementor .e-con.inv-reason p { margin: 0; color: var(--mc-t-2); }



/* ===========================================================================
   6. PROBLEMS ↔ SOLUTIONS
   ======================================================================== */
/* Columns live on the container as Elementor's own responsive Columns
   control, so they are editable in the panel. Only the fluid gap stays here. */
.elementor .e-con.inv-compare__grid { gap: var(--inv-gap); align-items: stretch; }
.elementor .e-con.inv-col { height: 100%; }
.elementor .e-con.inv-col--solution { background-color: var(--mc-panel); border-color: var(--mc-accent-line); }
.elementor .e-con.inv-col__in { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 30px); }
.elementor .inv-col__title { color: var(--mc-t-0); }
.elementor .inv-col__title .elementor-heading-title { color: var(--mc-t-0); }
.elementor .e-con.inv-col--solution .inv-col__title { color: var(--mc-accent-2); }
.elementor .inv-col--solution .inv-col__title .elementor-heading-title { color: var(--mc-accent-2); }
.elementor .e-con.inv-point { display: flex; flex-direction: column; gap: var(--mc-space-2); }
.elementor .e-con.inv-point p { margin: 0; color: var(--mc-t-2); font-size: var(--mc-fs-small); line-height: var(--mc-lh-body); }



/* ===========================================================================
   7. VISION
   ======================================================================== */
.elementor .e-con.inv-quote {
	margin: 0; padding: clamp(20px, 2.2vw, 36px) clamp(22px, 2.6vw, 42px);
	border-left: 3px solid var(--mc-accent);
	background: rgb(4 211 247 / .04);
}
.elementor .e-con.inv-quote p {
	margin: 0; font-size: var(--mc-fs-sm); line-height: var(--mc-lh-ui);
	font-weight: 500; color: var(--mc-t-0);
}
/* Columns live on the container as Elementor's own responsive Columns
   control, so they are editable in the panel. Only the fluid gap stays here. */
.elementor .e-con.inv-vision__grid { gap: var(--inv-gap); }
.elementor .e-con.inv-block {
	display: flex; flex-direction: column; gap: var(--mc-space-3);
	padding: var(--inv-pad);
	background: rgb(255 255 255 / .02);
	border-top: 2px solid var(--mc-accent);
}
.elementor .inv-block__step {
	font-size: var(--mc-fs-micro); font-weight: 700; line-height: 1;
	letter-spacing: var(--mc-track-label); text-transform: uppercase;
	color: var(--mc-accent-2);
}
.elementor .inv-block__step .elementor-heading-title {
	font-size: var(--mc-fs-micro); font-weight: 700; line-height: 1;
	letter-spacing: var(--mc-track-label); text-transform: uppercase;
	color: var(--mc-accent-2);
}
.elementor .e-con.inv-block p { margin: 0; color: var(--mc-t-2); font-size: var(--mc-fs-small); line-height: var(--mc-lh-body); }



/* ===========================================================================
   8. TIMELINE
   ======================================================================== */
/* Columns live on the container as Elementor's own responsive Columns
   control, so they are editable in the panel. Only the fluid gap stays here. */
.elementor .e-con.inv-phases {
	list-style: none; margin: 0; padding: 0; gap: var(--inv-gap);
}
.elementor .e-con.inv-phase {
	position: relative; display: flex; flex-direction: column; gap: var(--mc-space-2);
	padding: clamp(26px, 2.6vw, 40px) 0 0;
	border-top: 2px solid var(--mc-track);
}
/* the marker that sits on the rail */
.elementor .e-con.inv-phase::before {
	content: ""; z-index: 1;
	position: absolute; top: -7px; left: 0;
	width: 12px; height: 12px; background: var(--mc-accent);
	box-shadow: 0 0 0 4px var(--mc-bg), 0 0 18px rgb(4 211 247 / .6);
}
.elementor .e-con.inv-phase:first-child { border-top-color: var(--mc-accent); }
.elementor .inv-phase__when {
	font-size: var(--mc-fs-micro); font-weight: 700; line-height: 1;
	letter-spacing: var(--mc-track-label); text-transform: uppercase; color: var(--mc-accent-2);
}
.elementor .inv-phase__when .elementor-heading-title {
	font-size: var(--mc-fs-micro); font-weight: 700; line-height: 1;
	letter-spacing: var(--mc-track-label); text-transform: uppercase; color: var(--mc-accent-2);
}
.elementor .e-con.inv-phase p { margin: var(--mc-space-1) 0 0; color: var(--mc-t-2); font-size: var(--mc-fs-small); line-height: var(--mc-lh-body); }



/* ===========================================================================
   9. FINANCIALS
   ======================================================================== */
/* Columns live on the container as Elementor's own responsive Columns
   control, so they are editable in the panel. Only the fluid gap stays here. */
.elementor .e-con.inv-years { gap: var(--inv-gap); align-items: stretch; }
.elementor .e-con.inv-year { height: 100%; }
.elementor .e-con.inv-year__in { display: flex; flex-direction: column; gap: var(--mc-space-2); }
.elementor .inv-year__when { font-size: var(--mc-fs-micro); font-weight: 600; letter-spacing: var(--mc-track-label); text-transform: uppercase; color: var(--mc-t-4); }
.elementor .inv-year__when .elementor-heading-title { font-size: var(--mc-fs-micro); font-weight: 600; letter-spacing: var(--mc-track-label); text-transform: uppercase; color: var(--mc-t-4); }
.elementor .inv-year__arr { font-size: clamp(32px, 3.4vw, 54px); margin-top: var(--mc-space-1); }
.elementor .inv-year__arr .elementor-heading-title { font-size: clamp(32px, 3.4vw, 54px); margin-top: var(--mc-space-1); }
.elementor .inv-year__arr-label { font-size: var(--mc-fs-small); color: var(--mc-t-3); margin-bottom: var(--mc-space-3); }
.elementor .inv-year__arr-label .elementor-heading-title { font-size: var(--mc-fs-small); color: var(--mc-t-3); margin-bottom: var(--mc-space-3); }
.elementor .e-con.inv-year--hero { background-color: var(--mc-panel-alt); border-color: var(--mc-accent-line); }
.elementor .inv-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mc-space-2); }
.elementor .inv-facts li {
	display: flex; align-items: baseline; gap: var(--mc-space-2);
	font-size: var(--mc-fs-small); line-height: var(--mc-lh-ui); color: var(--mc-t-2);
	padding-top: var(--mc-space-2); border-top: var(--mc-hairline) solid var(--mc-line);
}
.elementor .inv-facts li b { color: var(--mc-t-0); font-weight: 600; font-variant-numeric: tabular-nums; }



/* ===========================================================================
   10. COMPETITIVE ADVANTAGES
   ======================================================================== */
.elementor .inv-adv__group {
	font-size: var(--mc-fs-2xs); font-weight: 700; line-height: 1;
	letter-spacing: var(--mc-track-label); text-transform: uppercase;
	color: var(--mc-accent-2);
	display: flex; align-items: center; gap: clamp(10px, 1vw, 16px);
	margin: 0;
}
.elementor .inv-adv__group .elementor-heading-title {
	font-size: var(--mc-fs-2xs); font-weight: 700; line-height: 1;
	letter-spacing: var(--mc-track-label); text-transform: uppercase;
	color: var(--mc-accent-2);
	display: flex; align-items: center; gap: clamp(10px, 1vw, 16px);
	margin: 0;
}
.elementor .inv-adv__group::after { content: ""; flex: 1; height: 1px; background: var(--mc-line); }
/* Columns live on the container as Elementor's own responsive Columns
   control, so they are editable in the panel. Only the fluid gap stays here. */
.elementor .e-con.inv-adv__grid { gap: var(--inv-gap); }
.elementor .inv-adv__card {
	display: flex; flex-direction: column; gap: var(--mc-space-3);
	padding: var(--inv-pad);
	background: var(--mc-tile-ground, rgb(255 255 255 / .02));
	border: var(--mc-hairline) solid var(--mc-line);
}
.elementor .inv-adv__card p { margin: 0; color: var(--mc-t-2); font-size: var(--mc-fs-small); line-height: var(--mc-lh-body); }



/* ===========================================================================
   11. COMPETITION
   ======================================================================== */
/* the three phases hold 4, 2 and 2 rivals — letting each panel find its own
   height beats three equal columns two-thirds full of nothing */
/* Columns live on the container as Elementor's own responsive Columns
   control, so they are editable in the panel. Only the fluid gap stays here. */
.elementor .e-con.inv-comp__groups { gap: var(--inv-gap); align-items: start; }
.elementor .e-con.inv-comp__in { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 26px); }
.elementor .inv-comp__title { color: var(--mc-t-0); }
.elementor .inv-comp__title .elementor-heading-title { color: var(--mc-t-0); }
.elementor .e-con.inv-rival { display: flex; flex-direction: column; gap: var(--mc-space-2); }
.elementor .e-con.inv-rival__head { display: flex; align-items: center; justify-content: space-between; gap: var(--mc-space-3); flex-wrap: wrap; }
.elementor .e-con.inv-rival p { margin: 0; color: var(--mc-t-3); font-size: var(--mc-fs-small); line-height: var(--mc-lh-body); }
.elementor .inv-rival__url { display: block; margin-top: var(--mc-space-1); color: var(--mc-t-5); font-size: var(--mc-fs-micro); }



/* ===========================================================================
   12. REVENUE MODEL
   ======================================================================== */
/* Columns live on the container as Elementor's own responsive Columns
   control, so they are editable in the panel. Only the fluid gap stays here. */
.elementor .e-con.inv-plans { gap: var(--inv-gap); align-items: stretch; }
.elementor .e-con.inv-plan { height: 100%; }
.elementor .e-con.inv-plan--feature { background-color: var(--mc-panel-alt); border-color: var(--mc-accent-line); }
.elementor .e-con.inv-plan__in { display: flex; flex-direction: column; gap: var(--mc-space-3); }
.elementor .inv-plan__price { margin: 0 0 var(--mc-space-3); display: flex; align-items: baseline; gap: var(--mc-space-2); flex-wrap: wrap; }
/* the price is a text widget: the draft lays out its two spans on the element
   itself, but Elementor puts the class on the wrapper and the spans in a <p> */
.elementor .inv-plan__price p { margin: 0 0 var(--mc-space-3); display: flex; align-items: baseline; gap: var(--mc-space-2); flex-wrap: wrap; }
.elementor .inv-plan__amount { font-size: clamp(28px, 2.8vw, 44px); }
.elementor .inv-plan__per { font-size: var(--mc-fs-small); color: var(--mc-t-3); }



/* ===========================================================================
   13. USE OF FUNDS
   ======================================================================== */
.elementor .e-con.inv-funds__in {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--inv-gap-l); align-items: center;
}
.elementor .e-con.inv-funds__copy { display: flex; flex-direction: column; gap: var(--mc-space-4); }
.elementor .e-con.inv-funds__copy p { margin: 0; color: var(--mc-t-2); }
.elementor .inv-funds__raise { color: var(--mc-accent-2); }
.elementor .inv-funds__foot { font-size: var(--mc-fs-small); color: var(--mc-t-4); }

.elementor .e-con.inv-alloc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(12px, 1.2vw, 18px); }
.elementor .e-con.inv-alloc__row { display: flex; align-items: flex-start; gap: clamp(10px, 1vw, 16px); }
.elementor .e-con.inv-alloc__row::before {
	/* a flex item, not a decoration: Elementor's absolute would take it out
	   of the row entirely */
	content: ""; position: relative; flex: none;
	width: 12px; height: 12px; margin-top: .35em;
	background: var(--mc-accent);
}
.elementor .e-con.inv-alloc__row:nth-child(2)::before { background: var(--mc-accent-2); opacity: .62; }
.elementor .e-con.inv-alloc__row:nth-child(3)::before { background: var(--mc-t-4); }
.elementor .inv-alloc__pct {
	flex: none; width: 3.2em; font-weight: 700; font-variant-numeric: tabular-nums;
	color: var(--mc-t-0); font-size: var(--mc-fs-body);
}
.elementor .inv-alloc__pct .elementor-heading-title {
	flex: none; width: 3.2em; font-weight: 700; font-variant-numeric: tabular-nums;
	color: var(--mc-t-0); font-size: var(--mc-fs-body);
}
.elementor .inv-alloc__body { color: var(--mc-t-2); font-size: var(--mc-fs-small); line-height: var(--mc-lh-body); }
.elementor .inv-alloc__body b { color: var(--mc-t-1); font-weight: 600; }

/* the pie, as a ring — no chart library, one conic-gradient */
.elementor .e-con.inv-donut { position: relative; margin: 0; display: grid; place-items: center; aspect-ratio: 1; width: min(100%, 380px); justify-self: center; }
.elementor .e-con.inv-donut::before {
	content: ""; z-index: 0;
	position: absolute; inset: 0; border-radius: 50%;
	background: conic-gradient(
		var(--mc-accent)                 0    50%,
		rgb(34 211 238 / .62)           50%   80%,
		var(--mc-t-4)                   80%  100%);
	-webkit-mask: radial-gradient(circle, transparent 57%, #000 57.5%);
	mask: radial-gradient(circle, transparent 57%, #000 57.5%);
}
.elementor .e-con.inv-donut__center { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--mc-space-1); text-align: center; }
.elementor .inv-donut__total { font-size: clamp(30px, 3vw, 46px); }
.elementor .inv-donut__total .elementor-heading-title { font-size: clamp(30px, 3vw, 46px); }
.elementor .inv-donut__label { font-size: var(--mc-fs-small); color: var(--mc-t-3); }
.elementor .inv-donut__label .elementor-heading-title { font-size: var(--mc-fs-small); color: var(--mc-t-3); }

@media (max-width: 900px) { .elementor .e-con.inv-funds__in { grid-template-columns: minmax(0, 1fr); } }


/* ===========================================================================
   14. TEAM
   ======================================================================== */
/* Columns live on the container as Elementor's own responsive Columns
   control, so they are editable in the panel. Only the fluid gap stays here. */
.elementor .e-con.inv-people { gap: var(--inv-gap); align-items: stretch; }
.elementor .e-con.inv-person { height: 100%; }
.elementor .e-con.inv-person__in { display: flex; flex-direction: column; gap: var(--mc-space-3); }
.elementor .e-con.inv-person__head { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 18px); }
.elementor .inv-person__photo {
	flex: none; width: clamp(64px, 5.5vw, 88px); aspect-ratio: 1;
	object-fit: cover; display: block;
	border: var(--mc-hairline) solid var(--mc-accent-line);
	clip-path: polygon(18% 0, 100% 0, 100% 82%, 82% 100%, 0 100%, 0 18%);
}
.elementor .e-con.inv-person__id { display: flex; flex-direction: column; gap: var(--mc-space-1); }
.elementor .inv-person__role { font-size: var(--mc-fs-small); color: var(--mc-accent-2); }
.elementor .inv-person__role .elementor-heading-title { font-size: var(--mc-fs-small); color: var(--mc-accent-2); }
.elementor .e-con.inv-person p { margin: 0; color: var(--mc-t-2); font-size: var(--mc-fs-small); line-height: var(--mc-lh-body); }
.elementor .inv-person__link { align-self: flex-start; margin-top: var(--mc-space-1); font-size: var(--mc-fs-small); font-weight: 600; }



/* ===========================================================================
   15. CLOSING CTA
   ======================================================================== */
.elementor .e-con.inv-cta { padding-block: clamp(48px, 5vw, 80px) clamp(64px, 7vw, 112px); }
.elementor .e-con.inv-cta__card {
	/* width:100% matters — a query container's fit-content width ignores its
	   contents, and `margin-inline:auto` would otherwise leave it at zero */
	position: relative; container-type: inline-size; overflow: hidden;
	background: var(--mc-panel-dark);
	width: 100%; max-width: 1237px; margin-inline: auto;
}
.elementor .e-con.inv-cta__card::before {
	content: ""; position: absolute; inset: 6.2cqw 5.9cqw 0 0;
	background: var(--mc-panel-inner);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 5.7cqw), linear-gradient(90deg, transparent, #000 4.8cqw, #000 calc(100% - 4.8cqw), transparent);
	mask-image: linear-gradient(180deg, transparent, #000 5.7cqw), linear-gradient(90deg, transparent, #000 4.8cqw, #000 calc(100% - 4.8cqw), transparent);
	-webkit-mask-composite: source-in; mask-composite: intersect;
}
.elementor .e-con.inv-cta__card::after {
	content: ""; position: absolute; left: 50%; bottom: -46%;
	width: 96.45cqw; height: 50.94cqw; transform: translateX(-50%);
	background: radial-gradient(closest-side, rgb(4 211 247 / .30), rgb(4 95 123 / .14) 55%, transparent 75%);
	pointer-events: none;
}
.elementor .e-con.inv-cta__in {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: clamp(14px, 2.1cqw, 26px);
	padding: clamp(36px, 5.58cqw, 69px) clamp(16px, 1.94cqw, 24px);
}
.elementor .inv-cta__h { max-width: 60cqw; }
.elementor .e-con.inv-cta__row { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 20px); flex-wrap: wrap; justify-content: center; margin-top: var(--mc-space-2); }
.elementor .inv-cta__meta { font-size: var(--mc-fs-small); color: var(--mc-t-4); margin: var(--mc-space-3) 0 0; }


/* ===========================================================================
   DECORATION
   ===========================================================================
   The draft read flat next to the landing page, which layers a trace, a grid
   plate, a bloom or a wave behind almost every band. Same vocabulary here, the
   same art files, the same technique: one absolutely-positioned pseudo-element
   per decoration, always behind the shell.

   Two rules keep this transposable:
     · every decoration lives on a SECTION's ::before / ::after, never on a
       content box, so no Elementor widget has to carry one;
     · every section that has one lifts its shell to z-index 1.

   The traces are mirrored because svgexp zeroes an SVG's root transform on
   export, so the flip has to be put back in CSS — same as on the landing page.
   ======================================================================== */

.elementor .e-con.inv-hero,
.elementor .e-con.inv-problem,
.elementor .e-con.inv-primer,
.elementor .e-con.inv-proto,
.elementor .e-con.inv-why,
.elementor .e-con.inv-compare,
.elementor .e-con.inv-vision,
.elementor .e-con.inv-timeline,
.elementor .e-con.inv-fin,
.elementor .e-con.inv-adv,
.elementor .e-con.inv-comp,
.elementor .e-con.inv-pricing,
.elementor .e-con.inv-funds,
.elementor .e-con.inv-team { position: relative; overflow: hidden; }

.elementor .e-con.inv-hero > .mc-shell,
.elementor .e-con.inv-problem > .mc-shell,
.elementor .e-con.inv-primer > .mc-shell,
.elementor .e-con.inv-proto > .mc-shell,
.elementor .e-con.inv-why > .mc-shell,
.elementor .e-con.inv-compare > .mc-shell,
.elementor .e-con.inv-vision > .mc-shell,
.elementor .e-con.inv-timeline > .mc-shell,
.elementor .e-con.inv-fin > .mc-shell,
.elementor .e-con.inv-adv > .mc-shell,
.elementor .e-con.inv-comp > .mc-shell,
.elementor .e-con.inv-pricing > .mc-shell,
.elementor .e-con.inv-funds > .mc-shell,
.elementor .e-con.inv-team > .mc-shell { position: relative; z-index: 1; }

/* ---- shared recipes ----------------------------------------------------- */

/* the circuit trace: faint, screen-blended, tail faded so it never cuts hard
   at a section edge */
.elementor .e-con.inv-problem::before,
.elementor .e-con.inv-vision::before,
.elementor .e-con.inv-adv::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	opacity: .16; mix-blend-mode: screen; transform: scale(-1, -1);
	background-repeat: no-repeat; background-size: 100% 100%;
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 94%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 94%);
}

/* the wire-grid plate, masked to a soft disc */
.elementor .e-con.inv-hero::before,
.elementor .e-con.inv-primer::before,
.elementor .e-con.inv-timeline::before,
.elementor .e-con.inv-comp::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	width: min(209px, 13.06vw); height: auto; aspect-ratio: 209 / 182.253;
	background: url("img/deco-grid.svg") 0 0 / 100% 100% no-repeat;
	-webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%);
	mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%);
}

/* ---- per-section placement ---------------------------------------------- */

/* hero — the plate low on the left, the way the landing hero carries it */
.elementor .e-con.inv-hero::before { left: max(-21px, -1.31vw); bottom: clamp(-40px, -2.5vw, -10px); }

/* problem — the wide trace, top left, mirrored */
.elementor .e-con.inv-problem::before {
	left: 2.06%; top: min(.94vw, 15px);
	width: min(700px, 43.75vw); aspect-ratio: 700 / 650;
	background-image: url("img/deco-trace-wide.svg");
}

/* primer — plate hard against the right edge */
.elementor .e-con.inv-primer::before { right: 0; top: min(6vw, 96px); transform: scaleX(-1); }

/* prototype — a bloom under the app frame */
.elementor .e-con.inv-proto::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	right: 4%; top: 26%;
	width: min(620px, 40vw); aspect-ratio: 1; border-radius: 50%;
	background: var(--mc-accent); opacity: .085;
	filter: blur(min(170px, 11vw));
}

/* why — the big soft ellipse the how-it-works band uses */
.elementor .e-con.inv-why::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	left: 22%; top: min(10vw, 160px);
	width: min(862px, 53.9vw); height: min(781px, 48.8vw);
	background: var(--mc-accent); opacity: .07; border-radius: 50%;
	filter: blur(min(200px, 12.5vw));
}

/* compare — particles drifting behind the two panels */
.elementor .e-con.inv-compare::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	left: 50%; top: -6%; transform: translateX(-50%);
	width: min(760px, 52vw); aspect-ratio: 497.211 / 402.009;
	background: url("img/deco-particles.svg") 0 0 / 100% 100% no-repeat;
	opacity: .5;
}

/* vision — trace at the left, over the AI texture */
.elementor .e-con.inv-vision::before {
	left: 12%; top: max(-120px, -8vw);
	width: min(420px, 26.25vw); aspect-ratio: 420.03 / 822.879;
	background-image: url("img/deco-trace-tall.svg");
}

/* timeline — plate at the right, below the rail */
.elementor .e-con.inv-timeline::before { right: 0; bottom: clamp(-30px, -2vw, -8px); }

/* financials — a bloom sitting under the year-5 card */
.elementor .e-con.inv-fin::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	right: 2%; bottom: -6%;
	width: min(700px, 46vw); aspect-ratio: 1; border-radius: 50%;
	background: var(--mc-accent); opacity: .09;
	filter: blur(min(190px, 12vw));
}

/* advantages — trace at the right, mirrored back the other way */
.elementor .e-con.inv-adv::before {
	right: -2%; top: max(-90px, -6vw); left: auto;
	width: min(420px, 26.25vw); aspect-ratio: 420.03 / 822.879;
	background-image: url("img/deco-trace-tall.svg");
}

/* competition — plate top right, kept faint so the dense copy still reads */
.elementor .e-con.inv-comp::before { right: 2%; top: min(4vw, 64px); opacity: .7; }

/* pricing — the wave that closes the free banner on the landing page, run
   along the bottom edge of the band */
.elementor .e-con.inv-pricing::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	left: -1.8%; bottom: clamp(-26px, -1.6vw, -8px);
	width: 103%; aspect-ratio: 1223.68 / 209.821;
	background: url("img/deco-freewave.svg") 0 0 / 100% 100% no-repeat;
	opacity: .8;
}

/* funds — a bloom behind the ring */
.elementor .e-con.inv-funds::after {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	right: 8%; top: 50%; transform: translateY(-50%);
	width: min(560px, 36vw); aspect-ratio: 1; border-radius: 50%;
	background: var(--mc-accent); opacity: .10;
	filter: blur(min(150px, 10vw));
}

/* team — the wide fan, the one piece of art on the site big enough to sit
   behind a four-card grid without reading as a sticker */
.elementor .e-con.inv-team::before {
	content: ""; position: absolute; z-index: 0; pointer-events: none;
	left: -.9%; top: 18%;
	width: 109.84vw; aspect-ratio: 1757.37 / 552.441;
	background: url("img/deco-whyfan.svg") 0 0 / 100% 100% no-repeat;
	opacity: .5;
}

/* closing card — the finalwave and the particles, exactly as the landing
   page's last card carries them. The card already spends both of its own
   pseudo-elements on the inner plate and the bloom, so these ride on the
   content row and are pushed behind it. */
.elementor .e-con.inv-cta__in::before,
.elementor .e-con.inv-cta__in::after {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	background-repeat: no-repeat; background-size: 100% 100%;
}
.elementor .e-con.inv-cta__in::before {
	left: -1.8cqw; bottom: -3.7cqw;
	width: 97.97cqw; aspect-ratio: 1211.92 / 255.72;
	background-image: url("img/deco-finalwave.svg");
}
.elementor .e-con.inv-cta__in::after {
	left: 29.75cqw; top: 13.1cqw;
	width: 40.2cqw; aspect-ratio: 497.211 / 402.009;
	background-image: url("img/deco-particles.svg");
	opacity: .85;
}

/* ---- the app screenshot ---------------------------------------------------
   Straight photography sat oddly inside a UI frame, so the shot takes the
   product frame's own grade: a vignette and the scanline sheen, two of the
   three layers the landing page stacks over its hero preview. */
.elementor .e-con.inv-shot-grade { position: relative; display: block; line-height: 0; }
.elementor .e-con.inv-shot-grade::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: radial-gradient(120% 110% at 50% 40%, rgb(0 0 0 / 0), rgb(0 0 0 / .55));
}
.elementor .e-con.inv-shot-grade::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: url("img/hero-scanlines.svg") no-repeat center / 100% 100%;
	mix-blend-mode: screen; opacity: .9;
}
.elementor .e-con.inv-proto__shot::before,
.elementor .e-con.inv-proto__shot::after { z-index: 2; }


/* ---- Elementor's widget wrappers ------------------------------------------
   The three widgets this page leans on wrap their content in markup the draft
   does not have. Rather than rewrite the draft's selectors, the wrappers are
   flattened so the design's own rules keep matching. */

/* icon-list: the design draws its own tick from `li::before`, so the widget's
   icon slot goes, and the <ul> - not the wrapper div - carries the layout. */
.elementor .e-con .inv-ticks .elementor-icon-list-icon,
.elementor .e-con .inv-facts .elementor-icon-list-icon { display: none; }
.elementor .e-con .inv-ticks .elementor-icon-list-items,
.elementor .e-con .inv-facts .elementor-icon-list-items {
	display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none;
}
.elementor .e-con .inv-ticks .elementor-icon-list-items { gap: clamp(8px, .9vw, 12px); }
.elementor .e-con .inv-facts .elementor-icon-list-items { gap: var(--mc-space-2); }
/* only the widget's own margin goes; the draft gives a fact row its own
   padding-top and rule, and space_between is already 0 on the widget */
.elementor.elementor .e-con .inv-ticks .elementor-icon-list-item,
.elementor.elementor .e-con .inv-facts .elementor-icon-list-item { margin: 0; }
.elementor .e-con .inv-ticks .elementor-icon-list-text,
.elementor .e-con .inv-facts .elementor-icon-list-text {
	padding: 0; color: inherit; font-size: inherit; line-height: inherit;
}
/* the draft sets the row's figure and its label apart with a flex gap on
   the row's own children; the widget wraps both in one span, so the gap has
   nothing to act on and the figure has to carry it */
.elementor .e-con .inv-facts .elementor-icon-list-text > b:first-child {
	margin-inline-end: var(--mc-space-2);
}
/* the item can be wrapped in a full-width anchor; it must not swallow the row */
.elementor .e-con .inv-ticks .elementor-icon-list-item > a,
.elementor .e-con .inv-facts .elementor-icon-list-item > a { display: contents; }

/* icon-box: these cards carry no icon at all, and the per-element gap:15px
   would otherwise open a hole where one would have been */
.elementor.elementor .e-con .inv-adv__card .elementor-icon-box-wrapper {
	display: flex; flex-direction: column; align-items: stretch;
	text-align: left; gap: var(--mc-space-3);
}
.elementor .e-con .inv-adv__card .elementor-icon-box-icon { display: none; }
.elementor .e-con .inv-adv__card .elementor-icon-box-title { margin: 0; }
.elementor .e-con .inv-adv__card .elementor-icon-box-title,
.elementor .e-con .inv-adv__card .elementor-icon-box-title > * {
	font-family: var(--mc-font); font-size: var(--mc-fs-xs);
	font-weight: 600; line-height: var(--mc-lh-head);
	letter-spacing: var(--mc-track-label); text-transform: uppercase; color: var(--mc-t-1);
}
.elementor .e-con .inv-adv__card .elementor-icon-box-description {
	margin: 0; color: var(--mc-t-2);
	font-size: var(--mc-fs-small); line-height: var(--mc-lh-body);
}

/* image: the widget centres its image and caps it at the container width */
.elementor .e-con .inv-person__photo,
.elementor .e-con .inv-proto__shot { line-height: 0; }
.elementor .e-con .inv-proto__shot img { display: block; width: 100%; height: auto; max-width: none; }

/* button widgets: the draft styles a real <a class="mc-link">, Elementor puts
   that class on the wrapper and renders the kit's yellow pill inside it */
.elementor .e-con .mc-link-w .elementor-button {
	background: none; border: 0; border-radius: 0; padding: 0; height: auto;
	font-family: var(--mc-font); font-size: var(--mc-fs-ui); font-weight: 700;
	line-height: 1; letter-spacing: var(--mc-track-label); text-transform: uppercase;
	color: var(--mc-accent-2);
	text-decoration: underline; text-underline-offset: 4px;
	transition: color var(--mc-dur) var(--mc-ease);
}
.elementor .e-con .mc-link-w .elementor-button::before,
.elementor .e-con .mc-link-w .elementor-button::after { display: none; }
.elementor .e-con .mc-link-w .elementor-button:hover { background: none; color: var(--mc-t-0); transform: none; }
.elementor .e-con .mc-link-w { width: auto; }


/* ===========================================================================
   INVESTOR BRIEF — MOTION AND STATE
   A deck read in one scroll needs a little life, but the copy is the point, so
   this stays to three things: bands arrive as you reach them, anything that is
   a card answers the pointer, and the funding ring draws itself.

   All of it is progressive. The reveal runs on a scroll-driven timeline, which
   needs no JavaScript and simply does not apply where it is unsupported — the
   page is fully readable either way — and the whole block yields to
   prefers-reduced-motion.
   ======================================================================== */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {

		@keyframes inv-rise {
			from { opacity: 0; transform: translateY(18px); }
			to   { opacity: 1; transform: none; }
		}

		/* one reveal per band: the head, then whatever body it introduces */
		.elementor .e-con.inv-hero__copy,
		.elementor .e-con.inv-hero__stats,
		.elementor .e-con.mc-section__head,
		.elementor .e-con.inv-split,
		.elementor .e-con.inv-reasons,
		.elementor .e-con.inv-phases,
		.elementor .e-con.inv-years,
		.elementor .e-con.inv-adv__grid,
		.elementor .e-con.inv-plans,
		.elementor .e-con.inv-people,
		.elementor .e-con.inv-comp__groups,
		.elementor .e-con.inv-compare__grid,
		.elementor .e-con.inv-proto__shot,
		.elementor .e-con.inv-donut,
		.elementor .e-con.inv-cta__card {
			animation: inv-rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 42%;
		}

		/* the hero is already in view on load, so it plays on its own clock */
		.elementor .e-con.inv-hero__copy,
		.elementor .e-con.inv-hero__stats {
			animation: inv-rise .55s cubic-bezier(.22, .61, .36, 1) both;
			animation-timeline: auto;
		}
		.elementor .e-con.inv-hero__stats { animation-delay: .12s; }
	}
}

/* ---- the funding ring draws itself ---------------------------------------
   An animatable custom property lets one conic-gradient sweep from nothing to
   its final split; without @property support the ring simply starts finished. */
@property --inv-sweep {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 100%;
}
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		@keyframes inv-draw { from { --inv-sweep: 0%; } to { --inv-sweep: 100%; } }
		.elementor .e-con.inv-donut::before {
			animation: inv-draw linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 45%;
		}
	}
}
.elementor .e-con.inv-donut::before {
	background: conic-gradient(
		var(--mc-accent)      0                                    calc(var(--inv-sweep) * .5),
		rgb(34 211 238 / .62) calc(var(--inv-sweep) * .5)          calc(var(--inv-sweep) * .8),
		var(--mc-t-4)         calc(var(--inv-sweep) * .8)          var(--inv-sweep),
		rgb(255 255 255 / .04) var(--inv-sweep)                    100%);
}

/* ---- cards answer the pointer --------------------------------------------
   Every card in the deck shares one response: the hairline picks up the accent
   and the card lifts a hair. Nothing moves far enough to reflow its neighbours. */
.elementor .e-con.inv-rival,
.elementor .e-con.inv-plan,
.elementor .e-con.inv-year,
.elementor .e-con.inv-person,
.elementor .e-con.inv-note,
.elementor .e-con.inv-block,
.elementor .e-con .inv-adv__card {
	transition: border-color var(--mc-dur) var(--mc-ease),
	            transform var(--mc-dur) var(--mc-ease),
	            box-shadow var(--mc-dur) var(--mc-ease);
}
.elementor .e-con.inv-rival:hover,
.elementor .e-con.inv-plan:hover,
.elementor .e-con.inv-year:hover,
.elementor .e-con.inv-person:hover,
.elementor .e-con.inv-note:hover,
.elementor .e-con.inv-block:hover,
.elementor .e-con .inv-adv__card:hover {
	border-color: var(--mc-accent-line);
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgb(0 0 0 / .35);
}
@media (prefers-reduced-motion: reduce) {
	.elementor .e-con.inv-rival:hover,
	.elementor .e-con.inv-plan:hover,
	.elementor .e-con.inv-year:hover,
	.elementor .e-con.inv-person:hover,
	.elementor .e-con.inv-note:hover,
	.elementor .e-con.inv-block:hover,
	.elementor .e-con .inv-adv__card:hover { transform: none; }
}

/* the highlighted plan keeps its accent edge on hover rather than losing it */
.elementor .e-con.inv-plan--feature:hover { border-color: var(--mc-accent-2); }

/* ---- keyboard users get the same affordances ----------------------------- */
.elementor .e-con .mc-link-w .elementor-button:focus-visible,
.elementor .e-con .mc-btn-w .elementor-button:focus-visible,
.elementor .e-con .mc-social .elementor-icon:focus-visible {
	outline: 2px solid var(--mc-accent-2);
	outline-offset: 3px;
}

/* ---- the hero panel gets the product's own scanline sheen ---------------- */
.elementor .e-con.inv-hero__stats { position: relative; overflow: hidden; }
.elementor .e-con.inv-hero__stats::after {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: url("img/hero-scanlines.svg") no-repeat center / 100% 100%;
	opacity: .18; mix-blend-mode: screen;
}
.elementor .e-con.inv-hero__stats > * { position: relative; z-index: 1; }

/* ===========================================================================
   THE WRAPPER IS NOT THE COMPONENT
   A class like `mc-btn` names an element in the design system. Elementor puts
   it on the widget's wrapper div and renders the real element inside, and
   because modcado.css is layered, its rule still paints that wrapper — so the
   pill, the border, the notches and the eyebrow's rule all get drawn twice,
   once around the widget and once around the thing inside it.

   The rules above dress the inner element. These strip the wrapper back to a
   plain box so it stops competing with them.

   The badge shows why this matters beyond a doubled hairline: its pill is
   clipped to a chamfer, and the wrapper behind it is not. Painted, the
   wrapper's square corner sits in the notch and the cut reads as a border left
   hanging in mid-air.
   ======================================================================== */
.elementor .e-con .elementor-widget.mc-btn,
.elementor .e-con .elementor-widget.mc-link,
.elementor .e-con .elementor-widget.mc-chip,
.elementor .e-con .elementor-widget.mc-badge__in,
.elementor .e-con .elementor-widget.mc-eyebrow,
.elementor .e-con .elementor-widget.mc-numeral,
.elementor .e-con .elementor-widget.mc-h1,
.elementor .e-con .elementor-widget.mc-h2,
.elementor .e-con .elementor-widget.mc-h4,
.elementor .e-con .elementor-widget.mc-h5 {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	height: auto;
	min-height: 0;
	box-shadow: none;
	clip-path: none;
	-webkit-text-stroke: 0;
	color: inherit;
	transition: none;
}
.elementor .e-con .elementor-widget.mc-btn::before,
.elementor .e-con .elementor-widget.mc-btn::after,
.elementor .e-con .elementor-widget.mc-link::before,
.elementor .e-con .elementor-widget.mc-link::after,
.elementor .e-con .elementor-widget.mc-chip::before,
.elementor .e-con .elementor-widget.mc-chip::after,
.elementor .e-con .elementor-widget.mc-eyebrow::before,
.elementor .e-con .elementor-widget.mc-eyebrow::after {
	content: none;
	display: none;
}
/* the eyebrow's wrapper still has to lay its own line out */
.elementor .e-con .elementor-widget.mc-eyebrow { display: flex; }

/* ---- the eyebrow carries an icon, not a rule ------------------------------
   The design's dash reads as a stray mark once it is a widget's pseudo-element
   sitting beside a wrapper. Each band names its own Font Awesome glyph in the
   widget instead, so the mark is a setting someone can change. */
.elementor.elementor .e-con .mc-eyebrow .elementor-icon-box-wrapper {
	display: inline-flex; flex-direction: row; align-items: center;
	gap: clamp(7px, .625vw, 10px); text-align: left;
}
.elementor .e-con .mc-eyebrow .elementor-icon-box-icon { margin: 0; display: flex; }
.elementor .e-con .mc-eyebrow .elementor-icon {
	display: flex; color: var(--mc-accent-2); background: none; padding: 0; border: 0;
}
.elementor .e-con .mc-eyebrow .elementor-icon svg {
	width: clamp(12px, .95vw, 15px); height: auto; fill: currentColor;
}
.elementor .e-con .mc-eyebrow .elementor-icon-box-title { margin: 0; }
.elementor .e-con .mc-eyebrow .elementor-icon-box-title,
.elementor .e-con .mc-eyebrow .elementor-icon-box-title > * {
	font-family: var(--mc-font); font-size: clamp(13px, 1vw, 16px);
	font-weight: 400; line-height: var(--mc-lh-flat);
	letter-spacing: 0; text-transform: none; color: var(--mc-accent-2);
}
.elementor .e-con .mc-eyebrow .elementor-icon-box-description { display: none; }
.elementor .e-con.mc-section__head .mc-eyebrow { justify-content: center; }

/* ---- the app screenshot's sheen -------------------------------------------
   hero-scanlines.svg is drawn for a box of its own proportions; stretched to
   fill this frame it collapses into one bright streak across the middle. A
   repeating gradient tiles at any size and cannot streak. */
.elementor .e-con.inv-shot-grade::after {
	background: repeating-linear-gradient(180deg,
		rgb(255 255 255 / .05) 0 1px, rgb(255 255 255 / 0) 1px 3px);
	mix-blend-mode: screen; opacity: .6;
}

/* ===========================================================================
   MOBILE
   Three things Elementor's own responsive defaults do to a narrow viewport
   that the design does not ask for.
   ======================================================================== */

/* 1. A container is 100% wide and containers wrap on mobile, so a row whose
      children are themselves containers always breaks — the team card's name
      could never sit beside its portrait. This row is a lockup: it stays one. */
.elementor .e-con.inv-person__head { flex-wrap: nowrap; }
.elementor .e-con.inv-person__id { width: auto; flex: 1 1 auto; min-width: 0; }

/* 2. The trust strip centres its items and wraps them. Once they stack, centring
      leaves every line starting at a different x — align them to the gutter the
      rest of the page uses instead. */
@media (max-width: 620px) {
	.elementor .e-con.mc-trust__in {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: clamp(16px, 4vw, 24px);
	}
	.elementor .mc-trust__item { width: 100%; }
	.elementor.elementor .e-con .mc-trust__item .elementor-icon-box-wrapper { justify-content: flex-start; }
	.elementor .mc-trust__item .elementor-icon-box-title,
	.elementor .mc-trust__item .elementor-icon-box-title > * { max-width: none; }
}

/* 3. The scan card inherits the kit's centred alignment, which pulls its head
      and its list into the middle of a card whose text is left-aligned. */
.elementor .e-con.mc-scan__card { align-items: stretch; }
.elementor.elementor .e-con .mc-scan__head .elementor-icon-box-wrapper { justify-content: flex-start; }


/* ---- grid children keep their share ---------------------------------------
   Elementor's Columns control emits `repeat(N, 1fr)`, where `1fr` is
   `minmax(auto, 1fr)` - a cell whose content has a wide min-content size can
   push its track past an equal share. The hand-written rules these replaced
   used `minmax(0, 1fr)`; this restores that floor without taking the column
   count back off the widget. */
.elementor .e-con.e-grid > .e-con,
.elementor .e-con.e-grid > .elementor-widget { min-width: 0; }


/* ===========================================================================
   THE PASSWORD GATE  (.mc-gate)
   WordPress replaces a protected page's content with a form, so this renders
   inside the site's own header and footer with no Elementor data behind it.
   That means no `.elementor` ancestor to lean on and no container queries —
   every length here is viewport-fluid, and the selectors carry their own
   weight against the kit's form styles.
   ======================================================================== */
.mc-gate {
	display: flex; align-items: center; justify-content: center;
	min-height: min(66svh, 680px);
	padding: clamp(48px, 8vw, 112px) var(--mc-gutter, clamp(20px, 4vw, 48px));
}

.mc-gate .mc-gate__card {
	position: relative;
	display: flex; flex-direction: column; align-items: flex-start;
	gap: clamp(14px, 1.6vw, 20px);
	width: 100%; max-width: 540px;
	padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 44px);
	background-color: rgb(255 255 255 / .022);
	border: var(--mc-hairline) solid var(--mc-line);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	/* the four cyan L-brackets the panels and cards use, one gradient an arm
	   so each bracket tracks its own corner rather than a shared box */
	--mc-bk: var(--mc-accent-2); --mc-bkl: clamp(14px, 1.5vw, 20px); --mc-bkt: 1px;
	background-image:
		linear-gradient(var(--mc-bk) 0 0), linear-gradient(var(--mc-bk) 0 0),
		linear-gradient(var(--mc-bk) 0 0), linear-gradient(var(--mc-bk) 0 0),
		linear-gradient(var(--mc-bk) 0 0), linear-gradient(var(--mc-bk) 0 0),
		linear-gradient(var(--mc-bk) 0 0), linear-gradient(var(--mc-bk) 0 0);
	background-size:
		var(--mc-bkl) var(--mc-bkt), var(--mc-bkt) var(--mc-bkl),
		var(--mc-bkl) var(--mc-bkt), var(--mc-bkt) var(--mc-bkl),
		var(--mc-bkl) var(--mc-bkt), var(--mc-bkt) var(--mc-bkl),
		var(--mc-bkl) var(--mc-bkt), var(--mc-bkt) var(--mc-bkl);
	background-position:
		top left, top left, top right, top right,
		bottom left, bottom left, bottom right, bottom right;
	background-repeat: no-repeat;
	background-origin: border-box;
}

.mc-gate .mc-gate__eyebrow {
	display: inline-flex; align-items: center; gap: clamp(7px, .6vw, 9px);
	margin: 0; color: var(--mc-accent-2);
	font-family: var(--mc-font); font-size: var(--mc-fs-2xs);
	font-weight: 600; line-height: 1; letter-spacing: var(--mc-track-label);
	text-transform: uppercase;
}
.mc-gate .mc-gate__lock { width: 1.15em; height: 1.15em; flex: none; }

.mc-gate .mc-gate__h {
	margin: 0; color: var(--mc-t-0);
	font-family: var(--mc-font); font-size: var(--mc-fs-2xl);
	font-weight: 600; line-height: var(--mc-lh-tight);
	letter-spacing: var(--mc-track-head); text-transform: uppercase;
}
.mc-gate .mc-gate__lede {
	margin: 0; color: var(--mc-t-2);
	font-family: var(--mc-font); font-size: var(--mc-fs-small);
	line-height: var(--mc-lh-body);
}

/* ---- the field and its button --------------------------------------------
   One row that wraps rather than shrinking: a password field squeezed to
   120px beside a button is worse than two full-width rows. */
.mc-gate .mc-gate__row {
	display: flex; flex-wrap: wrap; gap: clamp(10px, 1vw, 14px);
	width: 100%; margin-top: clamp(4px, .6vw, 8px);
}
.mc-gate .mc-gate__label {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}
.mc-gate .mc-gate__input {
	flex: 1 1 12rem; min-width: 0;
	height: var(--mc-gate-h, clamp(44px, 3.25vw, 52px));
	margin: 0; padding: 0 clamp(14px, 1.2vw, 18px);
	background: var(--mc-field); color: var(--mc-t-0);
	border: var(--mc-hairline) solid var(--mc-line-2); border-radius: 0;
	font-family: var(--mc-font); font-size: var(--mc-fs-ui);
	letter-spacing: .04em;
	transition: border-color var(--mc-dur) var(--mc-ease),
	            box-shadow var(--mc-dur) var(--mc-ease);
}
.mc-gate .mc-gate__input::placeholder { color: var(--mc-t-3); opacity: 1; letter-spacing: 0; }
.mc-gate .mc-gate__input:hover { border-color: var(--mc-accent-line); }
.mc-gate .mc-gate__input:focus,
.mc-gate .mc-gate__input:focus-visible {
	outline: none; border-color: var(--mc-accent-2);
	box-shadow: 0 0 0 3px var(--mc-accent-wash);
}
.mc-gate .mc-gate__input[aria-invalid="true"] { border-color: var(--mc-danger); }
.mc-gate .mc-gate__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--mc-danger-wash); }

/* the primary button, same chamfer and notches as .mc-btn */
.mc-gate .mc-gate__btn {
	--mc-h: var(--mc-gate-h, clamp(44px, 3.25vw, 52px));
	--mc-cx: calc(var(--mc-h) * .305);
	--mc-cy: calc(var(--mc-h) * .25);
	position: relative; flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	height: var(--mc-h); padding: 0 calc(var(--mc-h) * .46);
	border: 0; border-radius: 0; cursor: pointer;
	background: var(--mc-accent); color: var(--mc-ink);
	font-family: var(--mc-font); font-size: var(--mc-fs-ui); font-weight: 700;
	line-height: 1; letter-spacing: var(--mc-track-label); text-transform: uppercase;
	white-space: nowrap;
	clip-path: polygon(var(--mc-cx) 0, 100% 0, 100% calc(100% - var(--mc-cy)),
	                   calc(100% - var(--mc-cx)) 100%, 0 100%, 0 var(--mc-cy));
	transition: background var(--mc-dur) var(--mc-ease), transform var(--mc-dur) var(--mc-ease);
}
.mc-gate .mc-gate__btn::before,
.mc-gate .mc-gate__btn::after {
	content: ""; position: absolute; pointer-events: none;
	width: calc(var(--mc-h) * .06); height: calc(100% - var(--mc-h) * .33);
	background: rgb(0 0 0 / .82);
}
.mc-gate .mc-gate__btn::before { left: calc(var(--mc-h) * .173); top: calc(var(--mc-h) * .21); }
.mc-gate .mc-gate__btn::after  { right: calc(var(--mc-h) * .1);  bottom: calc(var(--mc-h) * .21); }
.mc-gate .mc-gate__btn:hover { background: var(--mc-accent-hi); transform: translateY(-1px); }
.mc-gate .mc-gate__btn:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--mc-ink), inset 0 0 0 4px var(--mc-focus);
}

/* ---- the line WordPress never printed ------------------------------------
   Idle it is a hint; after a failed submit it is the answer to "did I mistype
   or is this link dead?", which the default form leaves the visitor guessing. */
.mc-gate .mc-gate__msg {
	margin: 0; color: var(--mc-t-3);
	font-family: var(--mc-font); font-size: var(--mc-fs-2xs);
	line-height: var(--mc-lh-body); letter-spacing: 0;
}
.mc-gate .mc-gate__msg.is-error {
	display: flex; align-items: flex-start; gap: 8px;
	padding: clamp(8px, .8vw, 11px) clamp(10px, 1vw, 14px);
	background: var(--mc-danger-wash);
	border-left: 2px solid var(--mc-danger);
	color: var(--mc-danger); font-size: var(--mc-fs-small); font-weight: 500;
}
.mc-gate .mc-gate__msg.is-error::before { content: "!"; font-weight: 700; line-height: inherit; }

.mc-gate .mc-gate__foot {
	margin: 0; color: var(--mc-t-3);
	font-family: var(--mc-font); font-size: var(--mc-fs-2xs); line-height: var(--mc-lh-body);
}
.mc-gate .mc-gate__foot a {
	color: var(--mc-accent-2); text-decoration: underline; text-underline-offset: 3px;
}
.mc-gate .mc-gate__foot a:hover { color: var(--mc-t-0); }

/* ---- the header on a gated page -------------------------------------------
   Every item in the section nav is an in-page anchor into content this page is
   not rendering, so each one is a link that appears to do nothing. The logo and
   the mailto stay: both still go somewhere. */
body.mc-gated .elementor-location-header nav,
body.mc-gated .elementor-location-header .elementor-nav-menu__container,
body.mc-gated .elementor-location-header .elementor-widget-nav-menu { display: none; }

@media (max-width: 480px) {
	.mc-gate .mc-gate__input,
	.mc-gate .mc-gate__btn { flex: 1 1 100%; }
	.mc-gate .mc-gate__btn { justify-content: center; }
}


/* ===========================================================================
   AUTOFILL
   Chrome paints a saved credential with its own opaque yellow, using an
   internal background that `background-color` cannot reach — over a dark field
   that lands as mustard. The one thing that does reach it is an inset shadow
   large enough to cover the box, with the text colour forced separately. The
   absurd transition delay is the standard trick for the yellow flash Chrome
   animates in before the shadow settles.

   This sits in the general layer, not with the legacy pages: the password gate
   is exactly the kind of field a browser offers to fill.
   ======================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 100vmax var(--mc-field) inset !important;
	        box-shadow: 0 0 0 100vmax var(--mc-field) inset !important;
	-webkit-text-fill-color: var(--mc-t-0) !important;
	caret-color: var(--mc-t-0);
	border-color: var(--mc-line-2);
	transition: background-color 8000s ease-in-out 0s;
}
input:-webkit-autofill:focus {
	border-color: var(--mc-accent-2);
}

/* ===========================================================================
   THE TWO PAGES THAT PREDATE THE DESIGN  (/home/, /vision/)
   Kept live for a week while the new site takes over, so these are dressed
   rather than rebuilt: the kit already hands them the palette and the type,
   and what is left is the handful of places the old template kit's per-element
   styling still shows through.

   This is the one block in the file that uses !important, and deliberately.
   Elementor writes those settings at selectors like
       .elementor-250 .elementor-element.elementor-element-x .elementor-button[type="submit"]
   which is (0,5,0); out-specifying that per rule means stacking class
   repetitions that would have to be re-guessed every time a widget is touched.
   These two pages are scheduled to go, and a temporary block that reliably
   wins is worth more here than one that is elegant and silently stops working.
   Delete the whole block with the pages.
   ======================================================================== */

/* the iridescent stock render has no place in the palette, and tinting it only
   flooded the container - it covers the right-hand half and a blended
   background-colour paints the rest. It goes; what is left is the flat dark
   panel the rest of the site uses. */
body.page-id-250 .elementor-element-111e0c5 { background-image: none !important; }
body.page-id-250 .e-con { border-radius: 0 !important; }

/* the login card: the old kit drew a white field and a grey pill */
body.page-id-250 .elementor-field-textual,
body.page-id-250 .elementor-field-group .elementor-field {
	height: clamp(44px, 3.25vw, 52px) !important;
	padding: 0 clamp(14px, 1.2vw, 18px) !important;
	background-color: var(--mc-field) !important;
	color: var(--mc-t-0) !important;
	border: var(--mc-hairline) solid var(--mc-line-2) !important;
	border-radius: 0 !important;
	font-family: var(--mc-font) !important;
	font-size: var(--mc-fs-ui) !important;
	letter-spacing: .04em;
}
body.page-id-250 .elementor-field::placeholder { color: var(--mc-t-3) !important; opacity: 1; letter-spacing: 0; }
body.page-id-250 .elementor-field:focus {
	outline: none;
	border-color: var(--mc-accent-2) !important;
	box-shadow: 0 0 0 3px var(--mc-accent-wash) !important;
}

body.page-id-250 .elementor-form .elementor-button,
body.page-id-250 .elementor-form .elementor-button[type="submit"] {
	--mc-h: clamp(44px, 3.25vw, 52px);
	--mc-cx: calc(var(--mc-h) * .305);
	--mc-cy: calc(var(--mc-h) * .25);
	height: var(--mc-h) !important;
	padding: 0 calc(var(--mc-h) * .46) !important;
	border: 0 !important;
	border-radius: 0 !important;
	background-color: var(--mc-accent) !important;
	color: var(--mc-ink) !important;
	font-family: var(--mc-font) !important;
	font-size: var(--mc-fs-ui) !important;
	font-weight: 700 !important;
	letter-spacing: var(--mc-track-label);
	text-transform: uppercase;
	clip-path: polygon(var(--mc-cx) 0, 100% 0, 100% calc(100% - var(--mc-cy)),
	                   calc(100% - var(--mc-cx)) 100%, 0 100%, 0 var(--mc-cy));
	transition: background-color var(--mc-dur) var(--mc-ease), transform var(--mc-dur) var(--mc-ease);
}
body.page-id-250 .elementor-form .elementor-button:hover {
	background-color: var(--mc-accent-hi) !important;
	transform: translateY(-1px);
}
body.page-id-250 .elementor-form .elementor-button svg,
body.page-id-250 .elementor-form .elementor-button i { color: var(--mc-ink) !important; fill: var(--mc-ink) !important; }

/* the contact strip picks up the accent like every other icon row here */
body.page-id-250 .elementor-icon-list-icon svg { fill: var(--mc-accent-2) !important; }
body.page-id-250 .elementor-icon-list-icon i { color: var(--mc-accent-2) !important; }

/* /vision/ is the deck itself behind the gate: give the embed the bracketed
   frame the panels use rather than a bare browser plugin box */
body.page-id-341 .elementor-widget-epap_protected_file {
	display: block; padding: clamp(10px, 1vw, 16px);
	background: rgb(255 255 255 / .022);
	border: var(--mc-hairline) solid var(--mc-line);
}
body.page-id-341 .elementor-widget-epap_protected_file embed,
body.page-id-341 .elementor-widget-epap_protected_file iframe,
body.page-id-341 .elementor-widget-epap_protected_file object {
	display: block; width: 100%; min-height: min(78svh, 900px); border: 0;
}


/* ---- the rail's own controls ----------------------------------------------
   The arrows were anchors to #games, which did nothing but jump the page.
   They drive the rail now, and say so when there is nowhere further to go. */
.elementor .mc-railbtn a { cursor: pointer; }
.elementor .mc-railbtn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.elementor .mc-railbtn { transition: opacity var(--mc-dur) var(--mc-ease); }



/* ===========================================================================
   LEGAL DOCUMENTS  (.mc-legal)
   Terms, and whatever joins it. A long read rather than a composition, so the
   rules here are about one thing: a measure that stays comfortable, and a
   rhythm that makes seventeen numbered sections scannable. Everything is built
   from real heading and text widgets, so the copy stays editable in the panel.
   ======================================================================== */
/* The measure goes on the content, not on the shell. .mc-shell is the page
   frame — full width, with the gutters — and it says so at a specificity
   (.mc-shell.e-con-full) that a single class here cannot outrank anyway.
   Constraining the two blocks inside it keeps that division intact. */
.elementor .e-con.mc-legal__in { gap: var(--mc-space-6); }
.elementor .e-con.mc-legal__head,
.elementor .e-con.mc-legal__body {
	/* ~74 characters at the body size — past that the eye loses the line */
	width: 100%; max-width: 74ch; margin-inline: auto;
}
.elementor .e-con.mc-legal__head { gap: var(--mc-space-3); }
.elementor .e-con.mc-legal__body { gap: 0; }

/* the document title is not a hero headline: the display size is dialled back
   so it reads as the top of a page rather than a landing banner */
.elementor .mc-legal .mc-h1 .elementor-heading-title { font-size: var(--mc-fs-lg); }

.elementor .mc-legal__meta p {
	font-family: var(--mc-font); font-size: var(--mc-fs-ui);
	letter-spacing: var(--mc-track-label); text-transform: uppercase;
	color: var(--mc-t-3); margin: 0;
}
.elementor .mc-legal .mc-lede p { font-size: var(--mc-fs-lede); color: var(--mc-t-2); }
.elementor .mc-legal .mc-lede p + p { margin-top: var(--mc-space-3); }

/* a hairline under the head, so the document proper starts somewhere */
.elementor .e-con.mc-legal__head { padding-bottom: var(--mc-space-5); border-bottom: var(--mc-hairline) solid var(--mc-line); }

/* ---- section headings ----------------------------------------------------
   Margin-top on the heading rather than gap on the list, so the space belongs
   to the section it opens and the first one does not get an orphan gap. */
.elementor .mc-legal__h .elementor-heading-title {
	font-family: var(--mc-font); font-size: var(--mc-fs-xs);
	font-weight: 600; line-height: var(--mc-lh-head);
	letter-spacing: var(--mc-track-label); text-transform: uppercase;
	color: var(--mc-t-0); margin: 0;
}
.elementor .e-con.mc-legal__body > .elementor-widget.mc-legal__h { margin-top: var(--mc-space-6); }
.elementor .e-con.mc-legal__body > .elementor-widget.mc-legal__h:first-child { margin-top: 0; }

/* ---- subheadings ----------------------------------------------------------
   A second level, for documents that need one. Deliberately not uppercase:
   the section headings above are, and repeating that flattens the hierarchy
   rather than deepening it. Sentence case at a smaller size reads as a step
   down without needing a rule or an indent. */
.elementor .mc-legal__sub .elementor-heading-title {
	font-family: var(--mc-font); font-size: var(--mc-fs-2xs);
	font-weight: 600; line-height: var(--mc-lh-head);
	letter-spacing: 0; text-transform: none;
	color: var(--mc-t-1); margin: 0;
}
.elementor .e-con.mc-legal__body > .elementor-widget.mc-legal__sub { margin-top: var(--mc-space-5); }

/* ---- prose ---------------------------------------------------------------- */
.elementor .mc-legal__p {
	font-family: var(--mc-font); font-size: var(--mc-fs-body);
	line-height: var(--mc-lh-body); color: var(--mc-t-2);
	margin-top: var(--mc-space-3);
}
.elementor .mc-legal__p p { margin: 0; }
.elementor .mc-legal__p p + p,
.elementor .mc-legal__p p + ul,
.elementor .mc-legal__p ul + p { margin-top: var(--mc-space-3); }
.elementor .mc-legal__p strong { color: var(--mc-t-1); font-weight: 600; }
.elementor .mc-legal__p a { color: var(--mc-accent-2); text-decoration: underline; text-underline-offset: 3px; }
.elementor .mc-legal__p a:hover { color: var(--mc-t-0); }

/* the list marker is the system's own tick-less dash, in the accent, so a
   clause list reads as part of the design rather than a browser default */
/* A paragraph that is entirely bold in the source is the document raising its
   voice — "these remain on your computer". Rendered as a wall of bold it just
   reads loud; given an accent edge it reads as the point being made. */
.elementor .mc-legal__p p.mc-legal__note {
	padding: var(--mc-space-3) 0 var(--mc-space-3) var(--mc-space-4);
	border-left: 2px solid var(--mc-accent-2);
	background: linear-gradient(90deg, var(--mc-accent-wash), transparent 70%);
	color: var(--mc-t-1);
}
.elementor .mc-legal__p p.mc-legal__note strong { color: var(--mc-t-0); }

.elementor .mc-legal__p ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--mc-space-2); }
.elementor .mc-legal__p li { position: relative; padding-left: var(--mc-space-4); }
.elementor .mc-legal__p li::before {
	content: ""; position: absolute; left: 0; top: calc(var(--mc-lh-body) * .5em);
	width: clamp(7px, .55vw, 10px); height: var(--mc-hairline);
	background: var(--mc-accent-2);
}

/* ==== community: benefits instead of counts ==============================
   The four sidebar rows used to be figures. They are claims now, which
   changes what the row has to do: the title is a label rather than a number,
   the description can run to two lines, and the icon has to sit against the
   first line instead of floating in the middle of a block that grew.        */
.elementor.elementor .e-con .mc-side__item .elementor-icon-box-wrapper { align-items: flex-start; }
.elementor .mc-side__item .elementor-icon-box-title,
.elementor .mc-side__item .elementor-icon-box-title > * {
	font-size: clamp(13px, 3.8cqw, 16px); letter-spacing: .06em;
	text-transform: uppercase; color: var(--mc-t-0);
}
/* One step down from the 16px cap. The size is a share of the panel, so a
   wider panel would otherwise scale the type up by the same proportion it
   gained and the longest line would still wrap; capping lower is what turns
   the extra width into line length. */
.elementor .mc-side__item .elementor-icon-box-description {
	line-height: 1.45; font-size: clamp(12px, 3.578cqw, 15px);
}

/* The free panel's circle was a second copy of the price. The price now sits
   in the column that is actually read, so the circle becomes a mark.        */
.elementor .mc-free__badge .elementor-icon {
	display: grid; place-items: center;
	width: clamp(42px, 4.484cqw, 56px); height: clamp(42px, 4.484cqw, 56px);
	border-radius: 50%; border: 1px solid var(--mc-accent-2);
}
.elementor .mc-free__badge .elementor-icon svg {
	width: clamp(16px, 1.8cqw, 24px); height: auto; fill: var(--mc-accent-2);
}

/* ==== how the community verifies cheats ==================================
   Replaces the four figures that used to close the page. A member count
   proves less than an account of what actually happens to a cheat before
   anyone downloads it, and unlike the counts it stays true.
   Sizing is in vw here, matching the rest of this section — mc-stats is not
   a container-query container, its neighbours already ramp on the viewport. */
.elementor .mc-stats__lede p {
	font-family: var(--mc-font); text-align: center;
	font-size: clamp(14px, 1.125vw, 18px); line-height: 1.6;
	color: var(--mc-t-2); margin: clamp(10px, 1vw, 16px) auto 0; max-width: 62ch;
}

.elementor .e-con.mc-verify {
	gap: clamp(16px, 1.6vw, 26px); margin: clamp(28px, 3vw, 48px) auto 0;
	max-width: 1088px; padding: 0; flex-wrap: wrap; align-items: stretch;
}
.elementor .e-con.mc-verify__card {
	flex: 1 1 320px; min-width: 0; padding: clamp(18px, 1.8vw, 28px);
	gap: clamp(12px, 1.2vw, 18px);
	background: var(--mc-panel); border: 1px solid var(--mc-line);
}
.elementor .e-con.mc-verify__head { gap: clamp(10px, 1vw, 14px); padding: 0; }
.elementor .mc-verify__num { flex: none; width: auto; }
.elementor .mc-verify__num .elementor-heading-title {
	display: grid; place-items: center;
	width: clamp(26px, 2.1vw, 32px); height: clamp(26px, 2.1vw, 32px);
	border-radius: 50%; border: 1px solid var(--mc-accent-2);
	background: var(--mc-accent-wash); color: var(--mc-accent-2);
	font-family: var(--mc-font-num); font-weight: 700;
	font-size: clamp(12px, .95vw, 15px); line-height: 1;
	text-transform: none; letter-spacing: 0; margin: 0;
}
.elementor .mc-verify__h .elementor-heading-title {
	font-family: var(--mc-font); font-size: clamp(14px, 1.15vw, 18px);
	font-weight: 700; line-height: 1.3; letter-spacing: .06em;
	text-transform: uppercase; color: var(--mc-t-0); margin: 0;
}
.elementor .e-con.mc-verify__body {
	gap: clamp(12px, 1.2vw, 18px); padding: 0; align-items: flex-start;
}
.elementor .mc-verify__ico { flex: none; width: auto; }
.elementor .mc-verify__ico .elementor-icon {
	display: grid; place-items: center; flex: none;
	width: clamp(34px, 2.8vw, 44px); height: clamp(34px, 2.8vw, 44px);
	border: 1px solid var(--mc-accent-line); background: var(--mc-accent-wash);
}
.elementor .mc-verify__ico .elementor-icon svg {
	width: clamp(16px, 1.35vw, 22px); height: auto; fill: var(--mc-accent-2);
}
.elementor .mc-verify__p p {
	font-family: var(--mc-font); font-size: clamp(13px, 1.05vw, 16px);
	line-height: 1.55; color: var(--mc-t-2); margin: 0;
}

/* The join between the two steps: a shield sitting on a dashed rule. The rule
   is drawn as two halves so the shield can knock a hole in it without needing
   a background that matches whatever it happens to sit on. */
.elementor .e-con.mc-verify__link {
	flex: none; width: clamp(64px, 6vw, 96px); padding: 0;
	justify-content: center; position: relative;
}
.elementor .e-con.mc-verify__link::before,
.elementor .e-con.mc-verify__link::after {
	content: ""; position: absolute; top: 50%;
	border-top: 1px dashed var(--mc-accent-line);
}
.elementor .e-con.mc-verify__link::before { left: 0;  right: calc(50% + clamp(20px, 1.7vw, 26px)); }
.elementor .e-con.mc-verify__link::after  { right: 0; left:  calc(50% + clamp(20px, 1.7vw, 26px)); }
.elementor .mc-verify__shield { width: auto; }
.elementor .mc-verify__shield .elementor-icon {
	display: grid; place-items: center; position: relative; z-index: 1;
	width: clamp(36px, 3vw, 46px); height: clamp(36px, 3vw, 46px);
	background: var(--mc-bg); border: 1px solid var(--mc-accent-line);
}
.elementor .mc-verify__shield .elementor-icon svg {
	width: clamp(15px, 1.3vw, 20px); height: auto; fill: var(--mc-accent-2);
}

.elementor .e-con.mc-verify__foot {
	gap: clamp(8px, .8vw, 12px); padding: 0;
	margin-top: clamp(18px, 1.8vw, 28px); justify-content: center;
}
.elementor .mc-verify__fico { flex: none; width: auto; }
.elementor .mc-verify__fico .elementor-icon svg {
	width: clamp(14px, 1.1vw, 18px); height: auto; fill: var(--mc-accent-2);
}
.elementor .mc-verify__ftxt { width: auto; }
.elementor .mc-verify__ftxt p {
	margin: 0; display: flex; align-items: center; flex-wrap: wrap;
	gap: clamp(10px, 1vw, 16px);
	font-family: var(--mc-font); font-size: clamp(13px, 1.05vw, 16px); line-height: 1.5;
}
.elementor .mc-verify__ftxt .mc-verify__ok { color: var(--mc-accent-2); font-weight: 600; }
.elementor .mc-verify__ftxt .mc-verify__alt {
	color: var(--mc-t-3); padding-left: clamp(10px, 1vw, 16px);
	border-left: 1px solid var(--mc-line-2);
}

/* Stacked, the dashed rule would point across the gap rather than along it,
   so it goes; the shield alone still reads as the join. */
@media (max-width: 860px) {
	.elementor .e-con.mc-verify { flex-direction: column; }
	.elementor .e-con.mc-verify__link {
		width: 100%; padding: clamp(2px, 1vw, 6px) 0;
	}
	.elementor .e-con.mc-verify__link::before,
	.elementor .e-con.mc-verify__link::after { display: none; }
}

/* Once the closing line wraps, the rule that separated the two phrases ends up
   hanging at the start of the second one. Below this width it is a stack, so
   the separator goes and the phrases centre instead. */
/* Narrow, the sentence needs the whole width, so a row leaves the shield
   stranded against the left edge looking like a stray glyph. Stacked and
   centred it reads as a mark on the line it belongs to. The rule that
   separated the two phrases goes for the same reason it did before — once
   they are on separate lines it has nothing to separate. */
@media (max-width: 560px) {
	.elementor .e-con.mc-verify__foot { flex-direction: column; gap: clamp(6px, 1.6vw, 9px); }
	.elementor .mc-verify__ftxt { flex: 0 0 auto; width: 100%; }
	.elementor .mc-verify__ftxt p { justify-content: center; text-align: center; gap: 2px 10px; }
	.elementor .mc-verify__ftxt .mc-verify__alt { border-left: 0; padding-left: 0; }
}

/* ---- verification block, narrow widths ---------------------------------
   Two Elementor container defaults bite here.

   Its containers wrap on mobile, and its widgets are full-width inside one,
   so a two-item row puts the second item on its own line — the icon ended up
   stacked above the copy instead of beside it. These rows are always rows.

   And a flex-basis is a main-axis measurement: once mc-verify turns into a
   column the cards' `flex: 1 1 320px` stops describing a width and starts
   describing a height, with grow pulling every card out to match the tallest.
   That is where the empty space under the copy came from. */
.elementor .e-con.mc-verify__head { flex-wrap: nowrap; }

.elementor .mc-verify__h,
.elementor .mc-verify__p { width: auto; min-width: 0; flex: 1 1 auto; }

/* The closing line is centred as a pair. Letting its text grow pushes the
   shield out to the edge once the text wraps, which reads as a stray icon
   rather than a mark on the sentence — so it hugs its content instead. */
.elementor .mc-verify__ftxt { width: auto; min-width: 0; flex: 0 1 auto; }

@media (max-width: 860px) {
	.elementor .e-con.mc-verify__card { flex: 0 0 auto; }
}

/* ==== aligned to Figma version 2 (node 4105:79) =========================
   The designer's file moved on after the local export. What follows is the
   presentation half of that revision; the copy half lives in the page data. */

/* -- the cheat browser --------------------------------------------------
   The row led with a tick before; it leads with the game's own art now, so
   the tick moves into the title where it belongs. */
.elementor .mc-gamerow__art { flex: none; width: auto; }
.elementor .mc-gamerow__art img {
	display: block; width: clamp(76px, 8.4cqw, 112px); height: auto;
	aspect-ratio: 112 / 63; object-fit: cover;
	border: 1px solid var(--mc-line);
}

/* the invented "N uses" line is gone, so the row is a single line and the
   title should not sit above an empty box */
.elementor .mc-row__main .elementor-icon-box-description:empty { display: none; }
.elementor.elementor .e-con .mc-row__main .elementor-icon-box-wrapper { align-items: center; }

/* Install carries a download glyph in this revision */
.elementor .mc-btn-w--row .elementor-button-icon svg {
	width: clamp(10px, 1.1cqw, 13px); height: auto; fill: currentColor;
}
.elementor .mc-btn-w--row .elementor-button-content-wrapper {
	display: flex; align-items: center; gap: clamp(5px, .6cqw, 8px);
}

/* -- the diamond tile ---------------------------------------------------
   Used for the free panel's mark and for each verification card. It is a
   rounded square turned 45 degrees, so the glyph inside is turned back the
   other way to stay upright. */
.elementor .mc-free__badge .elementor-icon,
.elementor .mc-verify__ico .elementor-icon {
	border-radius: clamp(8px, .8vw, 12px);
	border: 1px solid var(--mc-line-2);
	background: linear-gradient(135deg, #1B2530 0%, #0E1219 100%);
	transform: rotate(45deg);
}
.elementor .mc-free__badge .elementor-icon svg,
.elementor .mc-verify__ico .elementor-icon svg {
	transform: rotate(-45deg);
}
.elementor .mc-free__badge .elementor-icon {
	width: clamp(40px, 4.2cqw, 54px); height: clamp(40px, 4.2cqw, 54px);
}

/* -- the single-player disclaimer -------------------------------------- */
.elementor .e-con.mc-why__note {
	gap: clamp(8px, .8vw, 12px); padding: 0;
	margin-top: clamp(26px, 2.6vw, 44px); justify-content: center;
}
.elementor .mc-why__nico { flex: none; width: auto; }
.elementor .mc-why__nico .elementor-icon svg {
	width: clamp(15px, 1.2vw, 19px); height: auto; fill: var(--mc-accent-2);
}
.elementor .mc-why__ntxt { width: auto; min-width: 0; flex: 0 1 auto; }
.elementor .mc-why__ntxt p {
	margin: 0; font-family: var(--mc-font);
	font-size: clamp(13px, 1.05vw, 16px); line-height: 1.5; color: var(--mc-t-2);
}
.elementor .mc-why__ntxt .mc-why__nb { color: var(--mc-accent-2); font-weight: 600; }

/* -- verification cards, this revision ---------------------------------
   Icon above the heading rather than beside the copy, the step number set
   inline with the title instead of in a ring, and the card marked by two
   corner brackets rather than a full frame. */
.elementor .e-con.mc-verify__card {
	background: var(--mc-panel-alt);
	border: 0;
	padding: clamp(22px, 2.2vw, 34px);
	gap: clamp(12px, 1.2vw, 18px);
	position: relative;
}
/* top-right and bottom-left only, matching the file */
.elementor .e-con.mc-verify__card::before,
.elementor .e-con.mc-verify__card::after {
	content: ""; position: absolute;
	width: clamp(14px, 1.3vw, 20px); height: clamp(14px, 1.3vw, 20px);
	border: 0 solid var(--mc-accent);
}
.elementor .e-con.mc-verify__card::before {
	top: 0; right: 0; border-top-width: 1.2px; border-right-width: 1.2px;
}
.elementor .e-con.mc-verify__card::after {
	bottom: 0; left: 0; border-bottom-width: 1.2px; border-left-width: 1.2px;
}

.elementor .mc-verify__ico { flex: none; width: auto; align-self: flex-start; }
.elementor .mc-verify__ico .elementor-icon {
	width: clamp(44px, 3.6vw, 58px); height: clamp(44px, 3.6vw, 58px);
	margin-left: clamp(6px, .6vw, 10px);
}
.elementor .mc-verify__ico .elementor-icon svg {
	width: clamp(18px, 1.5vw, 24px); height: auto; fill: var(--mc-accent-2);
}

/* the number is type now, not a badge */
.elementor .mc-verify__num .elementor-heading-title {
	display: inline; width: auto; height: auto;
	border: 0; border-radius: 0; background: none;
	color: var(--mc-t-0); font-family: var(--mc-font);
	font-size: clamp(14px, 1.15vw, 18px); font-weight: 700;
	line-height: 1.3; letter-spacing: .06em; margin: 0;
}
.elementor .e-con.mc-verify__head { gap: clamp(5px, .5vw, 8px); align-items: baseline; }

/* the join is a hexagon in this revision */
.elementor .mc-verify__shield .elementor-icon {
	border: 0; background: none;
	width: clamp(40px, 3.4vw, 52px); height: clamp(40px, 3.4vw, 52px);
	clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
	background-color: var(--mc-bg);
	box-shadow: 0 0 0 1px var(--mc-accent-line) inset;
}

/* Version 2 gives each feature its own glyph. The block above masks a single
   shared marker (ico-feat.svg) over all six and hides the widget's own icon —
   correct when every feature carried the same placeholder, wrong now. Let the
   real icon through, in the tile the rest of the page uses for one. */
.elementor .mc-feat .elementor-icon {
	display: grid; place-items: center;
	width: clamp(34px, 2.8vw, 44px); height: clamp(34px, 2.8vw, 44px);
	background: var(--mc-accent-wash);
	border: 1px solid var(--mc-accent-line);
	-webkit-mask: none; mask: none;
}
.elementor .mc-feat .elementor-icon svg {
	display: block; width: clamp(16px, 1.35vw, 22px); height: auto;
	fill: var(--mc-accent-2);
}
.elementor.elementor .e-con .mc-feat .elementor-icon-box-wrapper .elementor-icon-box-icon {
	margin: 0 clamp(12px, 1.1vw, 18px) 0 0;
}

/* The disclaimer runs to several lines on a phone, which leaves the shield
   centred against a paragraph instead of marking its first line. Same fix as
   the verification block's closing line: stack and centre. */
@media (max-width: 560px) {
	.elementor .e-con.mc-why__note { flex-direction: column; gap: clamp(6px, 1.6vw, 9px); }
	.elementor .mc-why__ntxt { flex: 0 0 auto; width: 100%; }
	.elementor .mc-why__ntxt p { text-align: center; }
}

/* ---- verification card corners, corrected -----------------------------
   These were meant to sit diagonally — top-right and bottom-left — and both
   ended up stacked on the left edge instead.

   Elementor gives every .e-con a ::before it uses as a full-bleed background
   overlay, anchored `top:0; left:0`. Setting only `right:0` on ours left that
   `left:0` in place, and a box with left, right AND width specified is
   over-constrained: in a left-to-right document the browser keeps left and
   discards right. So the mark obediently drew its top+right borders at the
   top-LEFT corner. Each side that is not wanted has to be cleared explicitly. */
.elementor .e-con.mc-verify__card::before,
.elementor .e-con.mc-verify__card::after {
	width: clamp(15px, 1.35vw, 21px);
	height: clamp(15px, 1.35vw, 21px);
	border: 0 solid var(--mc-accent);
	background: none;
	pointer-events: none;
}
.elementor .e-con.mc-verify__card::before {
	top: 0; right: 0; bottom: auto; left: auto;
	border-top-width: 1px; border-right-width: 1px;
}
.elementor .e-con.mc-verify__card::after {
	bottom: 0; left: 0; top: auto; right: auto;
	border-bottom-width: 1px; border-left-width: 1px;
}