/* LX Europe — Trade More Earn More. Scoped under .lx-eu-page. Desktop first, then breakpoints. */

.lx-eu-page {
	--eu-teal:      #17a0b0;
	--eu-teal-deep: #0f7f92;
	--eu-page-teal: #579fc8;

	--eu-glass-line: rgba(255, 255, 255, 0.72);
	--eu-blur: blur(16px) saturate(1.15);

	--eu-ink:   #0d2b45;
	--eu-body:  #33505f;
	--eu-muted: #8a969b;
	--eu-field: #d9dee1;

	/* Shared by the tier panel's padding and the steps card's margin. */
	--eu-panel-pad: 1.75rem;

	--eu-ease: cubic-bezier(0.33, 1, 0.68, 1);

	/* Art is sized by HEIGHT to pin its ground line: h = podium-base-y / 0.444, w = h x 1.573. Change one, change both. */
	--eu-art-w: 2523px;
	--eu-art-h: 1604px;
}

.lx-eu-page {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 0;
	background-color: var(--eu-page-teal);
	background-image: linear-gradient(180deg,
		#a7cbea 0%, #b4d3ee 10%, #cbe3f7 20%, #f3f7fc 30%, #beddf0 40%,
		#9ac9e4 50%, #84bcdb 60%, #73b1d4 70%, #63a8ce 80%, #58a2ca 90%,
		var(--eu-page-teal) 100%);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% max(var(--eu-art-h), calc(100vw / 1.573));
	color: var(--eu-body);
	font-family: 'Roboto', Arial, Helvetica, sans-serif;
	overflow-x: hidden;
	isolation: isolate;
}

.lx-eu-page::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: max(var(--eu-art-h), calc(100vw / 1.573));
	background-image: var(--eu-art, none);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: max(var(--eu-art-w), 100vw) auto;
	/* Fades the art's bottom edge into the gradient; a hard cut leaves a Mach band. */
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 90px), transparent 100%);
	        mask-image: linear-gradient(180deg, #000 calc(100% - 90px), transparent 100%);
	pointer-events: none;
	z-index: 0;
}

.lx-eu-page > * {
	position: relative;
	z-index: 1;
}

/* Added by the JS to every ancestor, so Avada's `.container { overflow: hidden }` cannot clip the 100vw shell. */
.lx-eu-host {
	overflow: visible !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.lx-eu-page *,
.lx-eu-page *::before,
.lx-eu-page *::after { box-sizing: border-box; }

.lx-eu-inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* The theme uses !important on a `html:not(...)` selector, so beating it needs both. */
html body.lx-eu-landing header.lx-custom-header,
html body.lx-eu-landing header.lx-mobile-header,
html body.lx-eu-landing .lx-mobile-menu-container,
html body:has(.lx-eu-page) header.lx-custom-header,
html body:has(.lx-eu-page) header.lx-mobile-header,
html body:has(.lx-eu-page) .lx-mobile-menu-container {
	display: none !important;
}

/* This padding moves the mascot's podium — change it and re-measure --eu-art-h. */
.lx-eu-logo {
	padding: 0.85rem 0 0.5rem;
	text-align: center;
}

.lx-eu-logo img {
	display: inline-block;
	width: 148px;
	max-width: 50%;
	height: auto;
}

.lx-eu-hero {
	padding: 3.5rem 0 4.5rem;
}

.lx-eu-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: start;
	gap: 3rem;
}

.lx-eu-hero-art {
	text-align: center;
}

.lx-eu-title {
	margin: 0;
	padding: 0;
	line-height: 0;
	border: 0;
}

.lx-eu-title img {
	display: inline-block;
	width: 100%;
	max-width: 400px;
	height: auto;
	margin-bottom: 0.6rem;
}

.lx-eu-dates {
	display: inline-block;
	margin: 2.4rem 0 0;
	padding: 0.36rem 1.15rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.62);
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #1479a6;
}

.lx-eu-mascot {
	display: block;
	width: 100%;
	max-width: 470px;
	height: auto;
	margin: 1.2rem auto 1.5rem;
}

.lx-eu-form-col {
	display: flex;
	justify-content: flex-end;
	padding-top: 1.5rem;
}

.lx-eu-form-card {
	width: 100%;
	max-width: 560px;
	border-radius: 4px;
	padding: 0.5rem 2.5rem 2.75rem;
}

.lx-eu-form-card .wpcf7 { margin: 0; }
.lx-eu-form-card .wpcf7-form > p { margin: 0 0 1rem; }
.lx-eu-form-card .wpcf7-form p:last-of-type { margin-bottom: 0; }

.lx-eu-form-card .wpcf7-form-control-wrap:not(.wpcf7-acceptance) { display: block; }

.lx-eu-form-card input[type="text"],
.lx-eu-form-card input[type="email"],
.lx-eu-form-card input[type="tel"],
.lx-eu-form-card input[type="number"],
.lx-eu-form-card select,
.lx-eu-form-card textarea {
	width: 100%;
	height: auto;
	padding: 0.95rem 1.1rem;
	background: #fff;
	border: 1px solid var(--eu-field);
	border-radius: 4px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--eu-ink);
	box-shadow: none;
	transition: border-color 0.2s var(--eu-ease), box-shadow 0.2s var(--eu-ease);
}

.lx-eu-form-card ::placeholder { color: #9aa4a9; opacity: 1; }

.lx-eu-form-card input:focus,
.lx-eu-form-card select:focus,
.lx-eu-form-card textarea:focus {
	outline: none;
	border-color: var(--eu-teal);
	box-shadow: 0 0 0 3px rgba(23, 160, 176, 0.14);
}

.lx-eu-form-card .wpcf7-form > .label { margin: 0 0 1rem; }

/* Not a flex row: the loose text node and the <a> would split into separate items. */
.lx-eu-form-card .agreedataclm {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--eu-body);
}

.lx-eu-form-card .agreedataclm .wpcf7-form-control-wrap,
.lx-eu-form-card .agreedataclm .wpcf7-acceptance,
.lx-eu-form-card .agreedataclm .wpcf7-list-item {
	display: inline;
	margin: 0;
}

.lx-eu-form-card .agreedatabox {
	width: 16px;
	height: 16px;
	margin-right: 0.5rem;
	vertical-align: -2px;
	accent-color: var(--eu-teal);
	cursor: pointer;
}

.lx-eu-form-card .wpcf7-acceptance .wpcf7-list-item { margin: 0; }

.lx-eu-form-card .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--eu-body);
	cursor: pointer;
}

.lx-eu-form-card .wpcf7-acceptance input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 0.15rem;
	accent-color: var(--eu-teal);
	cursor: pointer;
}

.lx-eu-form-card .wpcf7-acceptance .wpcf7-list-item-label { flex: 1; }

.lx-eu-form-card a {
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

.lx-eu-form-card a:hover { color: var(--eu-teal); }

.lx-eu-page .lx-eu-form-card .wpcf7-submit,
.lx-eu-page .lx-eu-form-card input[type="submit"] {
	display: inline-block;
	min-width: 168px;
	padding: 0.85rem 2rem;
	background: var(--eu-teal);
	border: 0;
	border-radius: 4px;
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.2s var(--eu-ease), transform 0.2s var(--eu-ease);
}

.lx-eu-page .lx-eu-form-card .wpcf7-submit:hover { background: var(--eu-teal-deep); }
.lx-eu-page .lx-eu-form-card .wpcf7-submit:active { transform: translateY(1px); }

.lx-eu-form-card .lx-eu-submit-row,
.lx-eu-form-card #cfsubmit {
	margin-top: 1.5rem;
	text-align: center;
}

.lx-eu-form-card .wpcf7-spinner { margin: 0 0 0 0.75rem; }

.lx-eu-form-card .wpcf7-not-valid-tip {
	margin-top: 0.4rem;
	font-size: 0.85rem;
	color: #d63d3d;
}

.lx-eu-form-card input.wpcf7-not-valid,
.lx-eu-form-card select.wpcf7-not-valid { border-color: #d63d3d; }

.lx-eu-form-card .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.85rem 1rem;
	border-width: 1px;
	border-radius: 4px;
	font-size: 0.92rem;
	line-height: 1.5;
}

.lx-eu-form-card form.sent .wpcf7-response-output {
	border-color: var(--eu-teal);
	background: rgba(23, 160, 176, 0.08);
	color: var(--eu-teal-deep);
}

.lx-eu-tiers { padding: 1rem 0 2.5rem; }

.lx-eu-panel {
	position: relative;
	padding: var(--eu-panel-pad) var(--eu-panel-pad) 2rem;
}

.lx-eu-panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2.4rem;
}

.lx-eu-page .lx-eu-panel-title {
	flex: 1;
	margin: 0;
	font-size: 2.3rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.005em;
	text-align: center;
	color: var(--eu-ink);
}

.lx-eu-page .lx-eu-panel-title span { color: #1279a6; }

.lx-eu-panel-art {
	flex: 0 0 auto;
	width: auto;
	max-width: 260px;
	max-height: 120px;
	height: auto;
	margin: -3.25rem 0 -1rem;
	pointer-events: none;
}

.lx-eu-tier-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-template-rows: auto auto auto auto;
	gap: 0.85rem;
}

.lx-eu-tier {
	display: grid;
	grid-row: span 4;
	grid-template-rows: subgrid;
	justify-items: center;
	align-content: start;
	padding: 0 0 1.25rem;
	border-radius: 14px;
	overflow: hidden;        /* clips the band's square top corners */
	background: rgba(255, 255, 255, 0.74);
	-webkit-backdrop-filter: var(--eu-blur);
	        backdrop-filter: var(--eu-blur);
	border: 1px solid var(--eu-glass-line);
	box-shadow: 0 10px 26px rgba(10, 68, 90, 0.10);
	text-align: center;
	transition: transform 0.25s var(--eu-ease), box-shadow 0.25s var(--eu-ease);
}

.lx-eu-tier:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 34px rgba(10, 68, 90, 0.16);
	box-shadow:
		0 16px 34px rgba(10, 68, 90, 0.16),
		0 6px 20px color-mix(in srgb, var(--tier, var(--eu-teal)) 40%, transparent);
}

.lx-eu-tier-name {
	justify-self: stretch;
	margin: 0 0 0.9rem;
	padding: 0.55rem 0.4rem;
	/* Flat colour first: without color-mix() the gradient is dropped and this shows. */
	background-color: var(--tier, var(--eu-teal-deep));
	background-image: linear-gradient(100deg,
		color-mix(in srgb, var(--tier, var(--eu-teal-deep)) 78%, #000) 0%,
		var(--tier, var(--eu-teal-deep)) 20%,
		color-mix(in srgb, var(--tier, var(--eu-teal-deep)) 58%, #fff) 46%,
		var(--tier, var(--eu-teal-deep)) 70%,
		color-mix(in srgb, var(--tier, var(--eu-teal-deep)) 74%, #000) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.42),
		inset 0 -1px 0 rgba(0, 0, 0, 0.2);
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
}

.lx-eu-tier-lots {
	margin: 0;
	padding: 0 0.4rem;
	line-height: 1.1;
}

.lx-eu-tier-num {
	display: block;
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--tier, var(--eu-ink));
}

.lx-eu-tier-unit {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--eu-muted);
}

.lx-eu-tier-art {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.7rem 0.5rem 0.65rem;
}

.lx-eu-tier-art img {
	display: block;
	width: 100%;
	max-width: 136px;
	height: 114px;
	object-fit: contain;
}

.lx-eu-tier-reward {
	margin: 0;
	padding: 0 0.55rem;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--eu-ink);
}

@media (prefers-reduced-motion: reduce) {
	.lx-eu-tier { transition: none; }
	.lx-eu-tier:hover { transform: none; }
}

.lx-eu-steps { padding: 0 0 7rem; }

.lx-eu-legal {
	margin: 0;
	padding: 0 24px 2rem;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #fff;
}

.lx-eu-steps-card {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: auto auto auto;
	gap: 0;
	background: rgba(255, 255, 255, 0.74);
	-webkit-backdrop-filter: var(--eu-blur);
	        backdrop-filter: var(--eu-blur);
	border: 1px solid var(--eu-glass-line);
	border-radius: 14px;
	margin: 0 var(--eu-panel-pad);
	padding: 1.9rem 1rem;
	box-shadow: 0 10px 26px rgba(10, 68, 90, 0.10);
}

.lx-eu-step {
	position: relative;
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	justify-items: center;
	align-content: start;
	text-align: center;
	padding: 0 1.75rem;
}

.lx-eu-step + .lx-eu-step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4%;
	bottom: 4%;
	width: 1px;
	background: linear-gradient(180deg,
		transparent, rgba(13, 43, 69, 0.16), transparent);
}

.lx-eu-step-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.7rem;
}

.lx-eu-step-icon {
	display: block;
	width: 34px;
	height: 34px;
	margin: 0;
	color: var(--eu-teal);
}

.lx-eu-page .lx-eu-step-title {
	margin: 0 0 0.4rem;
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--eu-ink);
}

.lx-eu-step-desc {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--eu-body);
	max-width: 19rem;
}

/* Applied by the JS once the section scrolls into view. */
.lx-eu-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s var(--eu-ease), transform 0.6s var(--eu-ease);
}

.lx-eu-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lx-eu-reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 1024px) {
	.lx-eu-page {
		--eu-art-w: 2650px;
		--eu-art-h: 1685px;
	}

	.lx-eu-logo { padding: 1.2rem 0 0.25rem; }

	.lx-eu-hero { padding: 2.5rem 0 3.5rem; }

	.lx-eu-hero-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.5rem;
	}

	.lx-eu-form-col {
		justify-content: center;
		padding-top: 0;
	}

	.lx-eu-dates      { font-size: 0.8rem; padding: 0.34rem 1.05rem; margin-top: 1.7rem; }
	.lx-eu-title img  { max-width: 470px; margin-bottom: 0; }
	.lx-eu-mascot     { max-width: 560px; }

	.lx-eu-page .lx-eu-panel-title {
		font-size: 2.1rem;
		text-shadow: 0 1px 12px rgba(255, 255, 255, 0.5);
	}

	.lx-eu-page .lx-eu-panel-title span { color: #064a63; }
	.lx-eu-panel-art   { max-width: 190px; max-height: 92px; margin-top: -2.25rem; }

	.lx-eu-tier-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lx-eu-tier-num  { font-size: 1.7rem; }
	.lx-eu-tier-art img { max-width: 160px; height: 128px; }
	.lx-eu-tier-reward  { font-size: 0.84rem; }

	.lx-eu-steps-card {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding: 1.6rem 0.75rem;
	}

	.lx-eu-step { padding: 0 1.1rem; }
	.lx-eu-step-badge { margin-bottom: 0.6rem; }
	.lx-eu-step-icon  { width: 30px; height: 30px; }

	.lx-eu-page .lx-eu-step-title { font-size: 1rem; }
	.lx-eu-step-desc  { font-size: 0.82rem; }
}

/* Bounded at both ends: rules a phone must NOT inherit. */
@media (min-width: 768px) and (max-width: 1024px) {
	.lx-eu-mascot { margin: 1.5rem auto; }
}

@media (max-width: 767px) {
	.lx-eu-inner { padding: 0 16px; }

	.lx-eu-page {
		--eu-art-w: 1704px;
		--eu-art-h: 1083px;
		--eu-panel-pad: 1rem;
	}

	.lx-eu-logo { padding: 0.85rem 0 0; }
	.lx-eu-logo img { width: 124px; }

	.lx-eu-hero { padding: 2.5rem 0 1.5rem; }
	.lx-eu-hero-grid { gap: 2rem; }

	/* Off `width`, not `max-width` — a phone is narrower than the cap, so the cap never bites. */
	.lx-eu-title img { width: 90%; max-width: 423px; margin-bottom: 0.5rem; }

	.lx-eu-dates  { font-size: 0.76rem; padding: 0.32rem 0.95rem; letter-spacing: 0.05em; margin-top: 1.15rem; }
	.lx-eu-mascot { margin-top: 2rem; }

	.lx-eu-form-card { padding: 1.75rem 1.25rem 2rem; }

	.lx-eu-form-card input[type="text"],
	.lx-eu-form-card input[type="email"],
	.lx-eu-form-card input[type="tel"],
	.lx-eu-form-card input[type="number"],
	.lx-eu-form-card select,
	.lx-eu-form-card textarea {
		padding: 0.85rem 1rem;
		font-size: 16px;              /* stops iOS zooming the page on focus */
	}

	.lx-eu-page .lx-eu-form-card .wpcf7-submit { width: 100%; }

	.lx-eu-tiers { padding: 0.5rem 0 2.5rem; }
	.lx-eu-panel { padding: 1.25rem var(--eu-panel-pad) 1.5rem; }

	.lx-eu-panel-head {
		flex-direction: column;
		align-items: center;
		gap: 0.75rem;
		margin-bottom: 1.9rem;
	}

	.lx-eu-page .lx-eu-panel-title { font-size: 1.7rem; text-align: center; }

	.lx-eu-panel-art {
		order: -1;
		margin: -2rem 0 0;
		max-width: 180px;
		max-height: 84px;
	}

	.lx-eu-tier-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		justify-items: center;
		gap: 0.7rem;
	}

	/* max-width, not grid padding: padding would cramp a 320px phone. */
	.lx-eu-tier {
		grid-row: auto;
		grid-template-rows: none;
		width: 100%;
		max-width: 300px;
		padding: 0 0 2rem;
	}

	.lx-eu-tier-name   { margin-bottom: 1.9rem; font-size: 1rem; }
	.lx-eu-tier-num    { font-size: 1.55rem; margin-top: 1rem; }
	.lx-eu-tier-art    { padding: 0.6rem 0.5rem 0.55rem; }
	.lx-eu-tier-art img { max-width: 150px; height: 122px; }
	.lx-eu-tier-reward { font-size: 0.95rem; }

	.lx-eu-steps { padding: 0 0 2rem; }
	.lx-eu-legal { padding: 0 16px 2.25rem; font-size: 0.82rem; }

	.lx-eu-steps-card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		padding: 0.5rem 1.25rem;
	}

	.lx-eu-step {
		grid-row: auto;
		grid-template-rows: none;
		padding: 1.4rem 0;
	}

	.lx-eu-step + .lx-eu-step::before {
		left: 8%;
		right: 8%;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
		background: linear-gradient(90deg,
			transparent, rgba(13, 43, 69, 0.16), transparent);
	}

	.lx-eu-step-badge { margin-bottom: 0.6rem; }
	.lx-eu-step-icon  { width: 31px; height: 31px; }
	.lx-eu-page .lx-eu-step-title { font-size: 1.02rem; }
	.lx-eu-step-desc  { font-size: 0.84rem; }
}