/*
 * ΓΑΛΑ MOO — landing page styles.
 * Every size is expressed in design units (u) of the 1920pt artboard
 * (design/source-pdf/lp-el.pdf), so the page scales proportionally.
 * Mobile (< 768px) re-defines the unit on the content column and adds floors.
 * All selectors are scoped under .moo-page so the host theme is not affected.
 */

@font-face { font-family: "PF Agora Sans Pro"; src: url(../fonts/PFAgoraSansPro-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PF Agora Sans Pro"; src: url(../fonts/PFAgoraSansPro-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PF Agora Sans Pro"; src: url(../fonts/PFAgoraSansPro-Black.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url(../fonts/RobotoCondensed-Black.woff2) format("woff2"); font-weight: 900; font-display: swap; }

/* our blank template (theme styles are not loaded on these pages) */
body.gmc-canvas { margin: 0; padding: 0; background: #a9dde5; }

.moo-page {
	/* tokens */
	--moo-brown: #4f341e;
	--moo-brown-deep: #502d1e;
	--moo-sky: #a9dde5;
	--moo-sky-top: 120, 189, 219;
	--moo-card: #d1edf1;
	--moo-navy: #28427d;
	--moo-white: #fff;
	--moo-placeholder: #c9c9c4; /* design: #e5e5e2, darkened for legibility */
	--moo-font: "PF Agora Sans Pro", "Fira Sans", "Segoe UI", Arial, sans-serif;
	--moo-font-cond: "Roboto Condensed", "Arial Narrow", sans-serif;

	/* 1 design pt -> px */
	--u: calc(min(100vw, 1920px) / 1920);

	position: relative;
	overflow: clip; /* decorations never create scrollbars */
	min-height: 100vh;
	background: var(--moo-sky);
	color: var(--moo-brown);
	font-family: var(--moo-font);
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* resets with zero specificity, so component rules below always win */
:where(.moo-page) *, :where(.moo-page) *::before, :where(.moo-page) *::after { box-sizing: border-box; }
:where(.moo-page) img { display: block; max-width: none; height: auto; }
:where(.moo-page) :is(p, h1, h2, h3, figure) { margin: 0; }
:where(.moo-page) .wp-block-image img { width: 100%; }

/* sky: darker blue fading diagonally from the top right (design soft mask) */
.moo-page::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: calc(1079 * var(--u));
	background: linear-gradient(16deg, rgba(var(--moo-sky-top), 0) 38%, rgba(var(--moo-sky-top), .9) 100%);
	pointer-events: none;
}

/* ---------- sections & layers ---------- */
.moo-sec { position: relative; }
.moo-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.moo-picture { display: contents; } /* a <picture> around a decoration must not change the layout */

/* decorations: positioned from the artboard centre, so they keep their place at any width */
.moo-deco {
	position: absolute;
	z-index: 1;
	left: calc(50% + (var(--x) - 960) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
	transform: rotate(var(--r, 0deg)) scaleX(var(--sx, 1));
	pointer-events: none;
	user-select: none;
}
.moo-deco--back { z-index: 0; }

/* section tops on the artboard (from the flow): hero 0 · story 1160 · csr 2380 · steps 3402 */
.moo-deco--cloud-hero     { --x: 1381;   --y: 207.7;  --w: 1078.5; }
.moo-deco--balloon-bottle-a { --x: 154.3; --y: 506.7; --w: 200.1; --r: -20.6deg; }
.moo-deco--balloon-a      { --x: 1610.2; --y: 712;    --w: 160.7; }

.moo-deco--beanstalk      { --x: 0;      --y: 36.3;    --w: 1920.2; }
.moo-deco--cloud-story    { --x: -388.9; --y: 152.8;  --w: 954; }
.moo-deco--balloon-bottle-b { --x: 257.7; --y: 953.7; --w: 189.5; --r: 5.1deg; }
.moo-deco--balloon-bottle-b { z-index: 2; } /* in front of the CSR clouds, as in the design */

.moo-deco--cloud-csr-1    { --x: -1213.2; --y: -15.1; --w: 1483.2; }
.moo-deco--cloud-csr-2    { --x: 931.7;  --y: 19.1;  --w: 1483.2; --r: 8.3deg; --sx: -1; }
.moo-deco--cloud-csr-3    { --x: -229.8; --y: 88.6;   --w: 1380.3; }
.moo-deco--cloud-csr-4    { --x: 853.9;  --y: 141.4;   --w: 875.7; }
.moo-deco--balloon-b      { --x: 1665.8; --y: 625.6;  --w: 117.4; }

.moo-deco--cloud-steps-1  { --x: 1629.4; --y: 268.4;  --w: 1078.5; }
.moo-deco--cloud-steps-2  { --x: -391.6; --y: 409.1;  --w: 875.7; }

/* ---------- S1 hero ---------- */
.moo-badge { width: calc(396.4 * var(--u)); margin-top: calc(-17.4 * var(--u)); }
.moo-logo { width: calc(517.2 * var(--u)); margin-top: calc(48.4 * var(--u)); }

.moo-h1 {
	margin-top: calc(104 * var(--u));
	font-weight: 900;
	font-size: calc(80.53 * var(--u));
	line-height: 1;
	letter-spacing: -.005em;
}
/* line 1: text + inline MOO badge (inline image inside the heading block) */
.moo-h1 img {
	display: inline-block;
	width: calc(263.8 * var(--u)) !important; /* the editor may write a width */
	height: auto !important;
	margin-left: calc(19 * var(--u));
	vertical-align: middle;
}
.moo-h1 br { display: none; }
/* line 2: the bold word sits on the white ribbon */
.moo-h1 strong {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(938.5 * var(--u));
	height: calc(155.7 * var(--u));
	margin: calc(2 * var(--u)) auto 0;
	padding-bottom: calc(6 * var(--u));
	background: url(../assets/svg/h1-ribbon.svg?v=2) center / 100% 100% no-repeat;
	font-family: var(--moo-font-cond);
	font-weight: 900;
	font-size: calc(126.79 * var(--u));
	color: var(--moo-brown-deep);
	letter-spacing: -.01em;
}

/* ---------- S2 story ---------- */
.moo-sec--story .moo-content { padding-top: calc(76 * var(--u)); }
.moo-text {
	font-size: calc(38 * var(--u));
	line-height: 1.184;
	max-width: calc(1120 * var(--u));
	text-wrap: pretty;
}
.moo-text strong { font-weight: 900; }
.moo-title-jack { width: calc(657.5 * var(--u)); margin-top: calc(38 * var(--u)); }
.moo-text--story2 { max-width: calc(720 * var(--u)); line-height: 1.447; margin-top: calc(47 * var(--u)); }

.moo-claim {
	margin-top: calc(84 * var(--u));
	font-weight: 700;
	font-size: calc(87.27 * var(--u));
	line-height: 1;
	color: var(--moo-brown-deep);
	-webkit-text-stroke: calc(22 * var(--u)) var(--moo-white);
	paint-order: stroke fill;
	letter-spacing: .005em;
}
.moo-claim strong { font-weight: 900; font-size: 1.117em; display: inline-block; margin-bottom: calc(4 * var(--u)); }

/* ---------- S4 CSR ---------- */
.moo-sec--csr .moo-content { padding-top: calc(315.7 * var(--u)); }
.moo-csr {
	width: calc(1322.6 * var(--u));
	min-height: calc(706.6 * var(--u));
	padding: calc(160 * var(--u)) calc(60 * var(--u)) calc(130 * var(--u));
	background: url(../assets/svg/csr-card.svg?v=2) center / 100% 100% no-repeat;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.moo-csr__head { display: flex; align-items: center; text-align: left; }
.moo-csr__logo { width: calc(401.8 * var(--u)); margin-top: calc(10 * var(--u)); }
.moo-csr__title {
	margin-left: calc(54 * var(--u));
	padding-left: calc(54 * var(--u));
	border-left: max(1px, calc(2 * var(--u))) solid var(--moo-brown);
	font-weight: 900;
	font-size: calc(66.08 * var(--u));
	line-height: 1.07;
}
.moo-csr__title em { display: block; font-style: normal; font-weight: 500; }
.moo-csr .moo-text { margin-top: calc(28 * var(--u)); line-height: 1.16; max-width: calc(780 * var(--u)); }

/* ---------- S5 steps ---------- */
.moo-sec--steps .moo-content { padding-top: calc(80 * var(--u)); padding-bottom: calc(160 * var(--u)); }
.moo-steps {
	list-style: none;
	margin: calc(52 * var(--u)) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, calc(306.3 * var(--u)));
	gap: calc(38.7 * var(--u));
	counter-reset: none;
}
.moo-step {
	position: relative;
	height: calc(280.7 * var(--u));
	padding: calc(14 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u));
	background: var(--moo-white);
	border: max(1px, calc(3.36 * var(--u))) solid var(--moo-brown);
	border-radius: calc(20.7 * var(--u));
	display: flex;
	flex-direction: column;
	align-items: center;
}
.moo-step__icon { height: calc(134 * var(--u)); display: flex; align-items: center; justify-content: center; }
.moo-step__icon img { width: calc(var(--iw) * var(--u)); }
.moo-step:nth-child(1) .moo-step__icon img { --iw: 133.9; }
.moo-step:nth-child(2) .moo-step__icon img { --iw: 88.9; }
.moo-step:nth-child(3) .moo-step__icon img { --iw: 169.4; }
.moo-step:nth-child(4) .moo-step__icon img { --iw: 172; }
.moo-step__text { font-weight: 700; font-size: calc(26.97 * var(--u)); line-height: 1.03; max-width: calc(270 * var(--u)); text-wrap: balance; }
/* arrow in the gap after each card except the last */
.moo-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(-29 * var(--u));
	width: calc(25.4 * var(--u));
	height: calc(29 * var(--u));
	transform: translateY(-50%);
	background: url(../assets/svg/step-arrow.svg?v=2) center / contain no-repeat;
}

/* ---------- S6 form title (the form itself is styled by form/css/form.css) ---------- */
.moo-form-title { margin-top: calc(70 * var(--u)); font-weight: 900; font-size: calc(43 * var(--u)); line-height: 1.2; }
.moo-page .moo-entry { margin-top: calc(52 * var(--u)); }

/* ---------- S7 footnote ---------- */
.moo-foot { font-size: calc(38 * var(--u)); margin-top: calc(64 * var(--u)); display: flex; flex-direction: column; gap: calc(32 * var(--u)); line-height: 1.2; }
.moo-foot a { color: inherit; text-decoration: none; }
.moo-foot a:hover, .moo-foot a:focus-visible { text-decoration: underline; }

/* ---------- mobile: unit follows the content column, with legibility floors ---------- */
@media (max-width: 767.98px) {
	.moo-page { --u: calc((100vw - 32px) / 1110); }
	.moo-content { padding-inline: 16px; }

	.moo-text, .moo-foot { font-size: max(18px, calc(38 * var(--u))); line-height: 1.35; }
	.moo-text { max-width: 100%; }
	.moo-h1 { font-size: max(24px, calc(80.53 * var(--u))); }
	.moo-claim { font-size: max(38px, calc(87.27 * var(--u))); -webkit-text-stroke-width: 9px; }
	.moo-title-jack { width: min(80vw, 340px); }
	/* the cloud card goes edge to edge, the content sits well inside its wavy border */
	.moo-csr { width: 100vw; min-height: 0; padding: 76px 46px 70px; }
	.moo-csr__title { font-size: 20px; }
	.moo-csr__logo { width: 118px; }
	.moo-csr__title { margin-left: 12px; padding-left: 12px; }
	.moo-csr .moo-text { margin-top: 20px; max-width: none; }

	.moo-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
	.moo-step { height: auto; min-height: 150px; padding: 10px 10px 14px; border-width: 2px; border-radius: 12px; }
	.moo-step__icon { height: 70px; }
	.moo-step__text { font-size: 15px; max-width: none; line-height: 1.2; }
	.moo-step:nth-child(n) .moo-step__icon img { width: calc(var(--iw) * 0.5px); }
	.moo-step:not(:last-child)::after { display: none; }

	.moo-form-title { font-size: max(20px, calc(43 * var(--u))); }
	.moo-page .moo-entry { margin-top: 18px; }

	/* keep decorations out of the text on small screens */
	/* the designer's mobile beanstalk (06/11): background of the story section,
	   the stalk on the right edge, Jack & friends in the gap between the title
	   and the next text. Anchored to the section BOTTOM: the texts below the
	   gap wrap the same at every width, the paragraph above does not
	   (280px = text top → section bottom, measured 266–298 at 360–430, EL/EN).
	   Its left edge fades out so the clouds never end in a hard line. */
	.moo-sec--story .moo-title-jack { margin-bottom: 54vw; }
	.moo-deco--beanstalk {
		left: auto;
		right: -26vw; /* overflows on the right on purpose: the page clips it */
		top: auto;
		bottom: calc(280px - 136vw);
		width: 118vw;
		height: auto;
		transform: none;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%);
		mask-image: linear-gradient(to right, transparent 0, #000 14%);
	}
	.moo-sec--story .moo-content { padding-bottom: 14vw; }
	.moo-sec--csr { z-index: 1; } /* the beanstalk clouds run under the CSR clouds */
	/* the story texts sit on a soft sky panel (0.8) so they read over the picture */
	.moo-sec--story .moo-text { background: rgba(169, 221, 230, .8); border-radius: 18px; padding: 8px 12px; }

	/* balloons inside the screen: one by the MOO logo, one by the title */
	.moo-deco--balloon-a { --x: 1300; --y: 300; --w: 170; }
	.moo-deco--balloon-bottle-b { --x: 372; --y: 830; z-index: 1; }
	.moo-deco--balloon-b { --w: 260; }
}

/* =========================================================
   Terms & Conditions page (same world: sky, clouds, balloons)
   ========================================================= */
.moo-page--terms .moo-sec--terms-hero .moo-content { padding-bottom: calc(70 * var(--u)); }
.moo-terms-title {
	margin-top: calc(70 * var(--u));
	font-weight: 900;
	font-size: calc(97.5 * var(--u));
	line-height: 1.05;
	color: var(--moo-brown-deep);
	-webkit-text-stroke: calc(22 * var(--u)) var(--moo-white);
	paint-order: stroke fill;
	text-wrap: balance;
}
.moo-terms-sub { margin-top: calc(26 * var(--u)); font-size: calc(38 * var(--u)); }

.moo-sec--terms .moo-content { padding-bottom: calc(220 * var(--u)); }
.moo-terms {
	width: min(100%, calc(1100 * var(--u)));
	padding: calc(80 * var(--u)) calc(90 * var(--u));
	border-radius: calc(48 * var(--u));
	background: rgba(255, 255, 255, .72);
	box-shadow: 0 calc(20 * var(--u)) calc(60 * var(--u)) rgba(79, 52, 30, .08);
	text-align: left;
	font-size: calc(27 * var(--u));
	line-height: 1.6;
	hyphens: manual;
	overflow-wrap: anywhere; /* long URLs in the legal text */
}
.moo-terms h2 { margin: 1.6em 0 .5em; font-weight: 900; font-size: 1.3em; line-height: 1.25; }
.moo-terms h2:first-child { margin-top: 0; }
.moo-terms p, .moo-terms ol { margin: 0 0 .8em; }
.moo-terms ol { padding-left: 1.4em; }
.moo-terms li { margin-bottom: .4em; padding-left: .2em; }
.moo-terms li::marker { font-weight: 900; }
.moo-terms strong { font-weight: 900; }
.moo-terms a { color: var(--moo-navy); }

.moo-btns { display: flex; justify-content: center; margin-top: calc(80 * var(--u)); }
.moo-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: calc(106.4 * var(--u));
	padding: 0 calc(70 * var(--u));
	border-radius: 999px;
	background: var(--moo-navy);
	color: var(--moo-white);
	font: 500 calc(38 * var(--u)) / 1.2 var(--moo-font);
	text-decoration: none;
	transition: filter .2s;
}
.moo-btn .wp-block-button__link:hover { filter: brightness(1.15); }
.moo-btn .wp-block-button__link:focus-visible { outline: 3px solid var(--moo-brown); outline-offset: 3px; }

/* terms decorations (positions on the 1920 artboard, from the section top) */
.moo-deco--t-cloud-1   { --x: 1381;   --y: 207.7; --w: 1078.5; }
.moo-deco--t-cloud-2   { --x: -388.9; --y: 560;   --w: 954; }
.moo-deco--t-balloon-1 { --x: 154.3;  --y: 330;   --w: 200.1; --r: -20.6deg; }
.moo-deco--t-balloon-2 { --x: 1610.2; --y: 640;   --w: 160.7; }
.moo-deco--t-cloud-3   { --x: 1450;   --y: 1500;  --w: 1078.5; }
.moo-deco--t-cloud-4   { --x: -420;   --y: 2600;  --w: 954; }
/* bottom clouds sit at the end of the page, whatever the text length */
.moo-terms-bottom { position: absolute; inset: auto 0 0 0; height: calc(520 * var(--u)); pointer-events: none; }
.moo-terms-bottom .moo-deco { top: auto; bottom: calc(-180 * var(--u)); }
.moo-deco--t-cloud-5 { --x: -229.8; --w: 1380.3; }
.moo-deco--t-cloud-6 { --x: 931.7;  --w: 1483.2; --r: 8.3deg; --sx: -1; }

@media (max-width: 767.98px) {
	.moo-terms-title { font-size: max(36px, calc(97.5 * var(--u))); -webkit-text-stroke-width: 9px; margin-top: 28px; }
	.moo-terms-sub { font-size: 17px; margin-top: 10px; }
	.moo-terms { width: calc(100% + 16px); padding: 28px 22px; border-radius: 22px; font-size: 16px; }
	.moo-btns { margin-top: 32px; width: 100%; }
	.moo-btn, .moo-btn .wp-block-button__link { width: 100%; }
	.moo-btn .wp-block-button__link { min-height: 52px; padding: 0 22px; font-size: 17px; }
	.moo-sec--terms .moo-content { padding-bottom: 120px; }
	.moo-deco--t-cloud-3, .moo-deco--t-cloud-4 { display: none; }
}

/* =========================================================
   Entrance animations — CSS only (no script).
   · First screen: fade up on load, staggered.
   · Everything else: fade up while it enters the viewport (scroll-driven),
     then stays. Browsers without scroll timelines simply show the content.
   · Off for visitors who prefer reduced motion.
   ========================================================= */
@keyframes moo-fade-up {
	from { opacity: 0; transform: translate3d(0, 30px, 0); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	.moo-sec--hero .moo-content > *,
	.moo-sec--terms-hero .moo-content > * {
		animation: moo-fade-up .9s cubic-bezier(.2, .7, .2, 1) both;
	}
	.moo-sec--hero .moo-content > :nth-child(2),
	.moo-sec--terms-hero .moo-content > :nth-child(2) { animation-delay: .15s; }
	.moo-sec--hero .moo-content > :nth-child(3),
	.moo-sec--terms-hero .moo-content > :nth-child(3) { animation-delay: .3s; }

	@supports (animation-timeline: view()) {
		/* items close to the end of the page are left out: they can never scroll
		   high enough to finish, and would stay half-transparent */
		.moo-sec--story .moo-content > *,
		.moo-csr,
		.moo-sec--steps .moo-content > :not(.moo-steps, .moo-entry, .moo-foot),
		.moo-step,
		.moo-terms > :not(:nth-last-child(-n+3)) {
			animation: moo-fade-up linear both;
			/* the timeline's viewport is shortened by 20% at the bottom,
			   so the fade starts a little higher, where the eye already is */
			animation-timeline: view(block 0 20%);
			animation-range: entry 0px entry 220px;
		}
		/* the four step cards follow one another */
		.moo-step:nth-child(2) { animation-range: entry 40px entry 260px; }
		.moo-step:nth-child(3) { animation-range: entry 80px entry 300px; }
		.moo-step:nth-child(4) { animation-range: entry 120px entry 340px; }
	}
}

/* =========================================================
   Scrollbar in the page colours (competition pages only)
   ========================================================= */
html:has(> body.gmc-canvas)::-webkit-scrollbar { width: 12px; }
html:has(> body.gmc-canvas)::-webkit-scrollbar-track { background: #d1edf1; }
html:has(> body.gmc-canvas)::-webkit-scrollbar-thumb { background: #4f341e; border-radius: 0; }
html:has(> body.gmc-canvas)::-webkit-scrollbar-thumb:hover { background: #28427d; }
/* Firefox (no ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar) {
	html:has(> body.gmc-canvas) { scrollbar-color: #4f341e #d1edf1; scrollbar-width: auto; }
}

/* ---------- language switch: round flag of the other language, top right, stays on scroll ---------- */
.moo-lang {
	position: fixed;
	z-index: 50; /* above decorations, the form and the Turnstile widget */
	top: max(14px, calc(36 * var(--u)));
	right: max(14px, calc(44 * var(--u)));
}
/* logged in: below the WordPress admin bar (32px, 46px on narrow screens) */
.admin-bar .moo-lang { top: calc(32px + max(14px, calc(36 * var(--u)))); }
@media (max-width: 782px) { .admin-bar .moo-lang { top: calc(46px + max(14px, calc(36 * var(--u)))); } }
.moo-lang__link {
	display: block;
	width: clamp(36px, calc(52 * var(--u)), 52px);
	height: clamp(36px, calc(52 * var(--u)), 52px);
	border: 3px solid var(--moo-white);
	border-radius: 50%;
	background: var(--moo-white);
	box-shadow: 0 4px 14px rgba(40, 66, 125, .28);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.moo-lang__link img { width: 100%; height: 100%; }
.moo-lang__link:hover { transform: scale(1.08); box-shadow: 0 6px 18px rgba(40, 66, 125, .36); }
.moo-lang__link:focus-visible { outline: 3px solid var(--moo-navy); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .moo-lang__link { transition: none; } .moo-lang__link:hover { transform: none; } }

/* ---------- English page (sections carry .moo-en): differences measured on lp-en.pdf ---------- */
/* shape: at every width */
.moo-en .moo-logo { width: calc(510.5 * var(--u)); }
.moo-en .moo-h1 { font-size: calc(87.91 * var(--u)); }
/* the text sits ~30pt lower against the badge than "middle" gives (measured on the design) */
.moo-en .moo-h1 img { margin-left: calc(27 * var(--u)); vertical-align: calc(-13.5 * var(--u)); }
.moo-en .moo-h1 strong {
	width: calc(692.4 * var(--u));
	height: calc(173.6 * var(--u));
	margin-top: calc(-2 * var(--u));
	padding-bottom: calc(3 * var(--u));
	background-image: url(../assets/svg/h1-ribbon-en.svg?v=1);
}
.moo-en .moo-text b { font-weight: 700; }
.moo-en .moo-text--story2 { line-height: 1.184; }

/* spacing: the 1920 artboard only, the mobile rules above keep their floors */
@media (min-width: 768px) {
	.moo-en .moo-logo { margin-top: calc(71.2 * var(--u)); }
	.moo-en .moo-h1 { margin-top: calc(56 * var(--u)); }
	.moo-en .moo-text--story2 { margin-top: calc(37 * var(--u)); }
	.moo-en .moo-csr .moo-text { max-width: calc(860 * var(--u)); }
	/* the 4th claim line makes the story taller; the CSR card stays where the design has it */
	.moo-sec--csr.moo-en .moo-content { padding-top: calc(240 * var(--u)); }
	.moo-sec--steps.moo-en .moo-content { padding-top: calc(102 * var(--u)); }
	.moo-en .moo-form-title { margin-top: calc(63 * var(--u)); }
}
@media (max-width: 767.98px) {
	.moo-en .moo-h1 { font-size: max(26px, calc(87.91 * var(--u))); }
}