/**
 * MyPlate — app landing page.
 *
 * A faithful transcription of the Figma landing (1440 x 6156). Every desktop
 * measurement below is the design value in px, expressed through --u so the
 * whole composition scales as one piece:
 *
 *   --u = 1px at >= 1440, and shrinks proportionally below that.
 *
 * So `calc(var(--u) * 783)` reads as "783px in the design". At 1440 the page
 * is pixel-identical to Figma; narrower viewports zoom it down intact until
 * the mobile breakpoint, where the layout reflows properly (the Figma file
 * has no mobile frames — see the note at the bottom of this file).
 *
 * Colour and type come from theme.json (--wp--custom--landing--*), so the
 * landing shares the site's token system and its self-hosted Poppins.
 */

/* -------------------------------------------------- *
 * Canvas + tokens
 * -------------------------------------------------- */

/*
 * Sections are full-bleed, content is contained. --canvas is the 1440 design
 * column (90% of the viewport below that, matching the rest of the site);
 * --bleed is the gap from the viewport edge to that column, which the
 * background and the full-width composites use to reach the edges.
 */
.mpl-page {
	/* --vw is the viewport width, held in a variable so it can be pinned in tests. */
	--vw: 100vw;

	background: var(--wp--custom--landing--page);
	overflow-x: clip;
}

/*
 * The canvas uses the same container rule as the rest of the site, so the
 * landing lines up with the header: min(1440px, 90%) of the usable width.
 */
.mpl {
	container-type: inline-size;
	width: min(var(--wp--custom--landing--width), 90%);
	margin-inline: auto;
}

.mpl-inner {
	--u: 1px;

	--ink: var(--wp--custom--landing--ink);
	--body: var(--wp--custom--landing--body);
	--muted: var(--wp--custom--landing--muted);
	--green: var(--wp--custom--landing--green);
	--green-bright: var(--wp--custom--landing--green-bright);
	--highlight: var(--wp--custom--landing--highlight);
	--star: var(--wp--custom--landing--star);
	--rule: var(--wp--custom--landing--rule);
	--divider: var(--wp--custom--landing--divider);
	--dark: var(--wp--custom--landing--dark);

	--bleed: calc((var(--vw) - var(--u) * 1440) / 2);

	position: relative;
	height: calc(var(--u) * 5550);
	font-family: var(--wp--preset--font-family--sans);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

@supports (width: 1cqw) {
	.mpl-inner {
		--u: calc(100cqw / 1440);
	}
}

/* Sections are placed on the canvas at their design coordinates. */
.mpl-sec {
	position: absolute;
	left: 0;
	width: 100%;
}

/* Wrapper for the two full-width composites; inert until mobile. */
.mpl-scroller {
	display: contents;
}

/* Absolutely placed artwork. Every piece carries its design box. */
.mpl-art {
	position: absolute;
	display: block;
	pointer-events: none;
	user-select: none;
}

/*
 * Resets carry zero specificity — the whole selector is inside :where() — so
 * any component class beats them no matter which stylesheet it lives in.
 * A reset at class weight (0,1,0) silently ate the store-badge text colour
 * once the badge moved to theme.css, which loads earlier in the cascade.
 */
:where(.mpl-inner) img {
	max-width: none;
}

:where(.mpl-inner) :is(p, h1, h2, ul) {
	margin: 0;
	padding: 0;
}

:where(.mpl-inner) ul {
	list-style: none;
}

:where(.mpl-inner) a {
	text-decoration: none;
	color: inherit;
}

/* Green marker behind a phrase — a 42px block, 6px proud of the text. */
.mpl-mark {
	background-image: linear-gradient(var(--highlight), var(--highlight));
	background-repeat: no-repeat;
	background-size: 100% calc(var(--u) * 42);
	background-position: 0 calc(var(--u) * 4);
	border-radius: calc(var(--u) * 6);
	padding-inline: calc(var(--u) * 6);
	margin-inline: calc(var(--u) * -6);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Shared section furniture: heading, lead, rule, kicker. */
.mpl-copy {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mpl-h2 {
	font-size: calc(var(--u) * 40);
	line-height: calc(var(--u) * 50);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ink);
	margin-bottom: calc(var(--u) * 20);
}

.mpl-lead {
	font-size: calc(var(--u) * 16);
	line-height: calc(var(--u) * 28);
	font-weight: 400;
	color: var(--body);
	margin-bottom: calc(var(--u) * 19.1);
}

.mpl-rule {
	width: calc(var(--u) * 22.7);
	height: calc(var(--u) * 2);
	background: var(--green);
	margin-bottom: calc(var(--u) * 19);
}

.mpl-kicker {
	font-size: calc(var(--u) * 20);
	line-height: calc(var(--u) * 28);
	font-weight: 600;
	color: var(--ink);
}

/*
 * Figma's auto-height text boxes are not exactly lines x line-height, so the
 * headings are pinned to their measured design heights. Everything that flows
 * after them (lead, rule, kicker) then lands on its Figma coordinate exactly.
 */
.mpl-hero__title {
	height: calc(var(--u) * 125.7);
}

.mpl-goals__copy .mpl-h2 {
	height: calc(var(--u) * 45);
}

.mpl-day__copy .mpl-h2 {
	height: calc(var(--u) * 103);
}

.mpl-recipes__copy .mpl-h2 {
	height: calc(var(--u) * 110);
}

.mpl-progress__copy .mpl-h2 {
	height: calc(var(--u) * 103);
}

/*
 * Focus. The theme's default ring is the brand green, which disappears against
 * the green buttons and the CTA panel, so landing controls use the ink colour —
 * and the near-black app badges flip to white.
 */
.mpl-inner :is(a, button):focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
	border-radius: calc(var(--u) * 4);
}

.mpl-inner .mp-store:focus-visible {
	outline-color: #fff;
}

/* Pill button. */
.mpl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 12);
	height: calc(var(--u) * 48);
	padding-inline: calc(var(--u) * 24);
	border: 0;
	border-radius: calc(var(--u) * 100);
	background: var(--green);
	color: #fff;
	font-family: inherit;
	font-size: calc(var(--u) * 16);
	line-height: 1.2;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 160ms ease, transform 160ms ease;
}

.mpl-btn:hover {
	filter: brightness(0.95);
}

.mpl-btn:active {
	transform: translateY(1px);
}

/* -------------------------------------------------- *
 * Background — soft glow field
 *
 * In Figma these are large gradient shapes sitting under a full-page panel
 * with a 220px background blur. Reproducing that literally would cost serious
 * paint time, so the already-diffuse result is expressed as gradients that
 * fade out inside their own footprint.
 *
 * They all live on one element as stacked background layers rather than a
 * dozen positioned children: a single paint layer instead of a dozen large
 * overlapping ones, which also avoids a first-paint compositing glitch.
 * -------------------------------------------------- */

.mpl-bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--bleed) * -1);
	width: var(--vw);
	overflow: hidden;
	pointer-events: none;
	background-repeat: no-repeat;
	background-image:
		radial-gradient(closest-side, rgba(239, 255, 168, 0.62), rgba(245, 255, 205, 0.24) 62%, rgba(239, 255, 168, 0) 100%) /* hero warm glow */,
		radial-gradient(closest-side, rgba(157, 194, 93, 0.30), rgba(157, 194, 93, 0.10) 58%, rgba(157, 194, 93, 0) 100%) /* hero green glow */,
		radial-gradient(closest-side, rgba(242, 253, 121, 0.34), rgba(242, 253, 121, 0) 100%) /* cards band, left */,
		radial-gradient(closest-side, rgba(183, 245, 132, 0.32), rgba(183, 245, 132, 0) 100%) /* cards band, centre */,
		radial-gradient(closest-side, rgba(255, 241, 181, 0.30), rgba(255, 241, 181, 0) 100%) /* cards band, right */,
		radial-gradient(closest-side, rgba(237, 255, 103, 0.30), rgba(237, 255, 103, 0) 100%) /* day glow, warm */,
		radial-gradient(closest-side, rgba(189, 255, 103, 0.28), rgba(189, 255, 103, 0) 100%) /* day glow, green */,
		radial-gradient(closest-side, rgba(237, 255, 103, 0.26), rgba(214, 255, 161, 0.16) 58%, rgba(237, 255, 103, 0) 100%) /* progress glow */;
	background-position:
		calc(var(--bleed) + var(--u) * 646) calc(var(--u) * -57),
		calc(var(--bleed) + var(--u) * 840) calc(var(--u) * 28),
		calc(var(--bleed) + var(--u) * 30) calc(var(--u) * 896),
		calc(var(--bleed) + var(--u) * 430) calc(var(--u) * 846),
		calc(var(--bleed) + var(--u) * 910) calc(var(--u) * 946),
		calc(var(--bleed) + var(--u) * 681) calc(var(--u) * 2261),
		calc(var(--bleed) + var(--u) * 778) calc(var(--u) * 2262),
		calc(var(--bleed) + var(--u) * 719) calc(var(--u) * 4234);
	background-size:
		calc(var(--u) * 569) calc(var(--u) * 579),
		calc(var(--u) * 673) calc(var(--u) * 689),
		calc(var(--u) * 620) calc(var(--u) * 560),
		calc(var(--u) * 780) calc(var(--u) * 660),
		calc(var(--u) * 640) calc(var(--u) * 540),
		calc(var(--u) * 614) calc(var(--u) * 768),
		calc(var(--u) * 603) calc(var(--u) * 686),
		calc(var(--u) * 741) calc(var(--u) * 781);
}

/* -------------------------------------------------- *
 * 2. Hero  (design y 70 – 804)
 * -------------------------------------------------- */


.mpl-hero {
	top: calc(var(--u) * 0);
	height: calc(var(--u) * 734);
}

.mpl-hero__copy {
	position: absolute;
	left: calc(var(--u) * 67);
	top: calc(var(--u) * 128.2);
	width: calc(var(--u) * 682);
}

/* rating row */
.mpl-rating {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 8);
	height: calc(var(--u) * 24.6);
}

.mpl-rating__avatars {
	position: relative;
	width: calc(var(--u) * 61);
	height: calc(var(--u) * 24.6);
	flex: none;
}

.mpl-rating__avatars img {
	position: absolute;
	top: 0;
	width: calc(var(--u) * 24);
	height: calc(var(--u) * 24);
	border-radius: 50%;
}

.mpl-rating__avatars img:nth-child(1) {
	left: 0;
}

.mpl-rating__avatars img:nth-child(2) {
	left: calc(var(--u) * 18);
}

.mpl-rating__avatars img:nth-child(3) {
	left: calc(var(--u) * 37);
}

.mpl-rating__score {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 4);
}

.mpl-rating__score img {
	width: calc(var(--u) * 15.7);
	height: calc(var(--u) * 14);
}

.mpl-rating__score span {
	font-size: calc(var(--u) * 12);
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
}

.mpl-rating__label {
	font-size: calc(var(--u) * 12);
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--muted);
}

.mpl-hero__title {
	margin-top: calc(var(--u) * 13.3);
	width: calc(var(--u) * 845);
	font-size: calc(var(--u) * 50);
	line-height: calc(var(--u) * 60);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--ink);
}

.mpl-hero__title s {
	font-weight: 300;
	text-decoration-line: line-through;
	text-decoration-thickness: from-font;
	text-decoration-skip-ink: none;
}

.mpl-hero__title em {
	font-style: normal;
	color: var(--green);
}

.mpl-hero__lead {
	margin-top: calc(var(--u) * 20);
	width: calc(var(--u) * 641);
	font-size: calc(var(--u) * 16);
	line-height: calc(var(--u) * 28);
	color: rgba(0, 0, 0, 0.85);
}

/*
 * The design sets these two lines in Fustat, which is narrower than Poppins.
 * Keeping the theme's Poppins (and the design's 147x54 badge) means holding
 * both lines on one line each with a touch of negative tracking.
 */

/* store badges */
.mpl-stores {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 16);
	margin-top: calc(var(--u) * 40);
}

/* The shared badge component, scaled to the landing canvas. */
.mpl-inner .mp-store {
	--s: var(--u);
}

/* fact strip */
.mpl-facts {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 28);
	margin-top: calc(var(--u) * 40);
	height: calc(var(--u) * 27);
}

.mpl-facts li {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 8);
}

.mpl-facts li img {
	width: calc(var(--u) * 24);
	height: calc(var(--u) * 24);
}

.mpl-facts li span {
	font-size: calc(var(--u) * 14);
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--ink);
	white-space: nowrap;
}

/* The design bolds the first item; the set reads better at one weight. */

.mpl-facts__sep {
	width: 1px;
	height: calc(var(--u) * 14);
	background: var(--divider);
	flex: none;
}

.mpl-hero__art {
	left: calc(var(--u) * 783);
	top: calc(var(--u) * 39.7);
	width: calc(var(--u) * 556.6);
	height: calc(var(--u) * 623.4);
}

.mpl-hero__leaf {
	left: calc(var(--u) * 1311);
	top: calc(var(--u) * 73);
	width: calc(var(--u) * 52);
	height: calc(var(--u) * 43.3);
}

.mpl-hero__squiggle {
	left: calc(var(--u) * 860);
	top: calc(var(--u) * 624);
	width: calc(var(--u) * 46);
	height: calc(var(--u) * 24);
}

/* -------------------------------------------------- *
 * 3. Why  (design y 804 – 1660)
 * -------------------------------------------------- */

.mpl-why {
	top: calc(var(--u) * 734);
	height: calc(var(--u) * 856);
}

.mpl-pill {
	position: absolute;
	left: calc(var(--u) * 646);
	top: calc(var(--u) * 27);
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 8);
	height: calc(var(--u) * 32);
	padding: calc(var(--u) * 4) calc(var(--u) * 8);
	border-radius: calc(var(--u) * 30);
	background: var(--dark);
	color: #fff;
	font-size: calc(var(--u) * 16);
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.mpl-pill i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--u) * 20);
	height: calc(var(--u) * 20);
	border-radius: 50%;
	background: var(--green);
	flex: none;
}

.mpl-pill i img {
	width: calc(var(--u) * 10);
	height: calc(var(--u) * 14);
}

.mpl-why__title {
	position: absolute;
	left: calc(var(--u) * 223);
	top: calc(var(--u) * 79);
	width: calc(var(--u) * 994);
	text-align: center;
	font-size: calc(var(--u) * 40);
	line-height: calc(var(--u) * 50);
	font-weight: 600;
	color: var(--ink);
}

/*
 * The white wave behind the diet cards. In Figma the shape is 2129 wide and
 * runs well past the 1440 frame, which clips it — so it is rebuilt from the
 * vector's own path here and allowed to reach the viewport edges. It sits
 * behind the card artwork, which keeps its design size.
 */
.mpl-diets__wave {
	left: min(calc(var(--u) * -290), calc(var(--bleed) * -1));
	top: calc(var(--u) * -349.7);
	width: max(calc(var(--u) * 2129), var(--vw));
	height: calc(var(--u) * 1085);
}

/*
 * These two compositions are drawn to the 1440 frame and already bleed off its
 * edges in the design. Stretching them to the viewport scales them up, which
 * crops the outer cards and makes them tall enough to collide with the section
 * below — so they stay at canvas size. Only the background reaches the edges.
 */

.mpl-why__art {
	left: 0;
	top: calc(var(--u) * 98);
	width: calc(var(--u) * 1440);
	height: calc(var(--u) * 758);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--u) * 70), #000 calc(100% - var(--u) * 70), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--u) * 70), #000 calc(100% - var(--u) * 70), transparent 100%);
}

/* -------------------------------------------------- *
 * 4. Built around your goals  (design y 1660 – 2340)
 * -------------------------------------------------- */

.mpl-goals {
	top: calc(var(--u) * 1590);
	height: calc(var(--u) * 680);
}

.mpl-goals__blob {
	left: calc(var(--u) * 40.4);
	top: calc(var(--u) * 50.8);
	width: calc(var(--u) * 708);
	height: calc(var(--u) * 568.4);
}


/*
 * The dashed amber outline behind each phone cluster. Rotated, so it is placed
 * by the centre of its own unrotated box; CSS `dashed` cannot express the
 * design's 24/24 pattern, hence an SVG.
 */
.mpl-goals__dash {
	left: calc(var(--u) * 243.95);
	top: calc(var(--u) * 9.5);
	width: calc(var(--u) * 305.1);
	height: calc(var(--u) * 587);
	transform: rotate(15.8deg);
}

.mpl-goals__art {
	left: calc(var(--u) * 25.2);
	top: calc(var(--u) * 62.7);
	width: calc(var(--u) * 719.4);
	height: calc(var(--u) * 557.3);
}

.mpl-goals__badge {
	left: calc(var(--u) * 958.3);
	top: calc(var(--u) * -186);
	width: calc(var(--u) * 75.6);
	height: calc(var(--u) * 92);
}

.mpl-goals__copy {
	left: calc(var(--u) * 792);
	top: calc(var(--u) * 185);
	width: calc(var(--u) * 512);
}

/* -------------------------------------------------- *
 * 5. Open the app  (design y 2340 – 2960)
 * -------------------------------------------------- */

.mpl-day {
	top: calc(var(--u) * 2270);
	height: calc(var(--u) * 620);
}

.mpl-day__copy {
	left: calc(var(--u) * 116);
	top: calc(var(--u) * 180.5);
	width: calc(var(--u) * 559);
}

.mpl-day__art {
	left: calc(var(--u) * 735);
	top: calc(var(--u) * 29);
	width: calc(var(--u) * 560.8);
	height: calc(var(--u) * 606.1);
}

.mpl-day__arrow {
	left: calc(var(--u) * 496);
	top: calc(var(--u) * 210.3);
	width: calc(var(--u) * 307.7);
	height: calc(var(--u) * 139.8);
}

.mpl-day__spark {
	left: calc(var(--u) * 853.5);
	top: calc(var(--u) * 9.5);
	width: calc(var(--u) * 39);
	height: calc(var(--u) * 41.4);
}

.mpl-day__dot {
	left: calc(var(--u) * 1258.5);
	top: calc(var(--u) * 555.5);
	width: calc(var(--u) * 27.7);
	height: calc(var(--u) * 31.4);
}

/* -------------------------------------------------- *
 * 6. More flavor  (design y 2960 – 3700)
 * -------------------------------------------------- */

.mpl-diets {
	top: calc(var(--u) * 2890);
	height: calc(var(--u) * 740);
}

/*
 * The cards row is assembled from its parts instead of one flattened export:
 * the white cloud above, then the connecting string, then the five cards at
 * their design coordinates. Exporting it as a single image baked the cloud in
 * at frame width, so its edge showed as a seam against the page — and against
 * the background gradients, which read as separate bands of white.
 */

/*
 * The wave carries its scallops on the top edge. In the design that edge is
 * covered by further white shapes, so the band fades in softly at the top and
 * only the bottom scallops read. This is that cover: a soft fade into white
 * that meets the wave where it is solid.
 */
.mpl-diets__topfade {
	left: calc(var(--bleed) * -1);
	top: calc(var(--u) * -60);
	width: var(--vw);
	height: calc(var(--u) * 360);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 55%, #ffffff 100%);
}

.mpl-diets__string {
	left: min(calc(var(--u) * -406.5), calc(var(--bleed) * -1));
	top: calc(var(--u) * -51.5);
	width: max(calc(var(--u) * 2189), var(--vw));
	height: calc(var(--u) * 426);
}

.mpl-diets__row {
	display: contents;
}

.mpl-diet {
	position: absolute;
}

.mpl-diet--1 {
	left: calc(var(--u) * 59.1);
	top: calc(var(--u) * 267.5);
	width: calc(var(--u) * 235.2);
	height: calc(var(--u) * 311.1);
}

.mpl-diet--2 {
	left: calc(var(--u) * 322.2);
	top: calc(var(--u) * 267);
	width: calc(var(--u) * 235.2);
	height: calc(var(--u) * 312);
}

.mpl-diet--3 {
	left: calc(var(--u) * 585.4);
	top: calc(var(--u) * 247.9);
	width: calc(var(--u) * 269.2);
	height: calc(var(--u) * 352.8);
}

.mpl-diet--4 {
	left: calc(var(--u) * 882.6);
	top: calc(var(--u) * 267.5);
	width: calc(var(--u) * 235.2);
	height: calc(var(--u) * 311.1);
}

.mpl-diet--5 {
	left: calc(var(--u) * 1145.8);
	top: calc(var(--u) * 267.5);
	width: calc(var(--u) * 235.2);
	height: calc(var(--u) * 311.1);
}

.mpl-diets__title {
	position: absolute;
	left: calc(var(--u) * 265);
	top: calc(var(--u) * 96.9);
	width: calc(var(--u) * 910);
	text-align: center;
	font-size: calc(var(--u) * 40);
	line-height: calc(var(--u) * 50);
	font-weight: 600;
	color: var(--ink);
}

.mpl-diets__lead {
	position: absolute;
	left: calc(var(--u) * 265);
	top: calc(var(--u) * 162);
	width: calc(var(--u) * 910);
	text-align: center;
	font-size: calc(var(--u) * 16);
	line-height: calc(var(--u) * 28);
	color: var(--body);
}

.mpl-diets__cta {
	position: absolute;
	left: calc(var(--u) * 636);
	top: calc(var(--u) * 641);
	width: calc(var(--u) * 169);
	box-shadow: var(--wp--custom--landing--shadow-btn-lg);
}

/* -------------------------------------------------- *
 * 7. Discover recipes  (design y 3700 – 4340)
 * -------------------------------------------------- */

.mpl-recipes {
	top: calc(var(--u) * 3630);
	height: calc(var(--u) * 640);
}

.mpl-recipes__blob {
	left: calc(var(--u) * 4.9);
	top: calc(var(--u) * 110.2);
	width: calc(var(--u) * 665.3);
	height: calc(var(--u) * 481.3);
}


.mpl-recipes__dash {
	left: calc(var(--u) * 218.4);
	top: calc(var(--u) * 71.55);
	width: calc(var(--u) * 257.2);
	height: calc(var(--u) * 532.9);
	transform: rotate(-0.36deg);
}

.mpl-recipes__art {
	left: calc(var(--u) * 98);
	top: calc(var(--u) * 86.1);
	width: calc(var(--u) * 500);
	height: calc(var(--u) * 521);
}

.mpl-recipes__copy {
	left: calc(var(--u) * 768);
	top: calc(var(--u) * 200);
	width: calc(var(--u) * 512);
}

/* -------------------------------------------------- *
 * 8. See your progress  (design y 4340 – 5020)
 * -------------------------------------------------- */

.mpl-progress {
	top: calc(var(--u) * 4270);
	height: calc(var(--u) * 680);
}

.mpl-progress__copy {
	left: calc(var(--u) * 116);
	top: calc(var(--u) * 222);
	width: calc(var(--u) * 548);
}

.mpl-progress__art {
	left: calc(var(--u) * 796.8);
	top: calc(var(--u) * 107.1);
	width: calc(var(--u) * 534.2);
	height: calc(var(--u) * 540.8);
}

.mpl-progress__berry {
	left: calc(var(--u) * 508);
	top: calc(var(--u) * 404);
	width: calc(var(--u) * 254);
	height: calc(var(--u) * 64);
}

.mpl-progress__spark {
	left: calc(var(--u) * 797.5);
	top: calc(var(--u) * 162.5);
	width: calc(var(--u) * 39);
	height: calc(var(--u) * 41.4);
}

.mpl-progress__dot {
	left: calc(var(--u) * 1322.5);
	top: calc(var(--u) * 641.5);
	width: calc(var(--u) * 27.7);
	height: calc(var(--u) * 31.4);
}

/* -------------------------------------------------- *
 * 9. CTA  (design y 5020 – 5620)
 * -------------------------------------------------- */

.mpl-cta {
	top: calc(var(--u) * 4950);
	height: calc(var(--u) * 600);
}

.mpl-cta__panel {
	position: absolute;
	left: calc(var(--u) * 64);
	top: calc(var(--u) * 176);
	width: calc(var(--u) * 1312);
	height: calc(var(--u) * 370);
	border-radius: calc(var(--u) * 35);
	background: linear-gradient(100deg, var(--green-bright) 2%, var(--green) 100%);
	overflow: hidden;
}

.mpl-cta__eyebrow {
	position: absolute;
	left: calc(var(--u) * 40);
	top: calc(var(--u) * 51.3);
	font-size: calc(var(--u) * 20);
	line-height: calc(var(--u) * 26);
	font-weight: 500;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: calc(var(--u) * 0.5);
}

.mpl-cta__title {
	position: absolute;
	left: calc(var(--u) * 40);
	top: calc(var(--u) * 104.3);
	width: calc(var(--u) * 464);
	font-size: calc(var(--u) * 40);
	line-height: calc(var(--u) * 61);
	font-weight: 700;
	color: #fff;
}

.mpl-cta__underline {
	left: calc(var(--u) * 45);
	top: calc(var(--u) * 226);
	width: calc(var(--u) * 179);
	height: calc(var(--u) * 15);
}

.mpl-cta__actions {
	position: absolute;
	left: calc(var(--u) * 40);
	top: calc(var(--u) * 246.3);
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 13);
}

.mpl-glass {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: calc(var(--u) * 12);
	height: calc(var(--u) * 48);
	padding-inline: calc(var(--u) * 24);
	border: 1px solid #fff;
	border-radius: calc(var(--u) * 300);
	font-family: inherit;
	font-size: calc(var(--u) * 16);
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--wp--custom--landing--shadow-glass);
	-webkit-backdrop-filter: blur(calc(var(--u) * 17));
	backdrop-filter: blur(calc(var(--u) * 17));
	transition: background-color 160ms ease;
}

.mpl-glass--solid {
	width: calc(var(--u) * 178);
	background: rgba(255, 255, 255, 0.8);
	color: var(--ink);
	font-weight: 600;
}

.mpl-glass--solid:hover {
	background: #fff;
}

.mpl-glass--ghost {
	width: calc(var(--u) * 194);
	gap: calc(var(--u) * 4);
	background: transparent;
	color: #fff;
	font-weight: 500;
}

.mpl-glass--ghost:hover {
	background: rgba(255, 255, 255, 0.15);
}

.mpl-glass--ghost img {
	width: calc(var(--u) * 12);
	height: calc(var(--u) * 12);
}

.mpl-cta__couple {
	left: calc(var(--u) * 594);
	top: calc(var(--u) * 29.9);
	width: calc(var(--u) * 650);
	height: calc(var(--u) * 547);
	z-index: 2;
}

/* clipped inside the panel */
.mpl-cta__ring {
	left: calc(var(--u) * 1175);
	top: calc(var(--u) * 37);
	width: calc(var(--u) * 137);
	height: calc(var(--u) * 309);
}

.mpl-cta__bowl {
	left: calc(var(--u) * 1206);
	top: calc(var(--u) * 62);
	width: calc(var(--u) * 106);
	height: calc(var(--u) * 245);
}

.mpl-cta__leaf-1 {
	left: calc(var(--u) * 511);
	top: calc(var(--u) * 178);
	width: calc(var(--u) * 64);
	height: calc(var(--u) * 65);
}

.mpl-cta__leaf-2 {
	left: calc(var(--u) * 1154);
	top: calc(var(--u) * 32);
	width: calc(var(--u) * 46);
	height: calc(var(--u) * 49);
}

.mpl-cta__spark {
	left: calc(var(--u) * 596);
	top: calc(var(--u) * 21);
	width: calc(var(--u) * 45);
	height: calc(var(--u) * 51);
	z-index: 3;
}

/* -------------------------------------------------- *
 * Reduced motion / print
 * -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mpl-inner * {
		transition: none !important;
	}
}

/* -------------------------------------------------- *
 * Mobile + tablet
 *
 * The Figma file contains no mobile frames, so this layout is a considered
 * interpretation rather than a transcription: the absolute canvas is dropped,
 * sections return to normal flow, two-column blocks stack copy-then-artwork,
 * and type returns to readable absolute sizes.
 * -------------------------------------------------- */

@media (max-width: 859px) {
	/*
	 * The canvas keeps a 5% gutter on desktop; on a phone the sections add
	 * their own 20px, so the two stacked up to ~40px a side and squeezed the
	 * artwork down to about two-thirds of the screen. One gutter is enough.
	 */
	.mpl {
		width: 100%;
	}

	.mpl-inner {
		height: auto;
		padding-bottom: 3rem;
	}

	.mpl-bg {
		display: none;
	}

	.mpl-sec {
		position: static;
		height: auto !important;
		top: auto;
		padding-inline: 20px;
	}

	.mpl-copy,
	.mpl-hero__title,
	.mpl-hero__lead,
	.mpl-pill,
	.mpl-why__title,
	.mpl-diets__title,
	.mpl-diets__lead,
	.mpl-diets__cta,
	.mpl-hero__copy,
	.mpl-cta__eyebrow,
	.mpl-cta__title,
	.mpl-cta__actions {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		max-width: none;
		text-align: left;
	}

	/*
	 * Each cluster carries 8-16% transparent margin, so a plain 100% width
	 * left the artwork looking shrunken. These widths are 100 / content
	 * fraction, measured per asset, so the artwork itself spans the column.
	 */
	.mpl-art {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		margin-inline: auto;
	}

	.mpl-hero__art { width: 114%; margin-inline: -7%; }
	.mpl-goals__art { width: 119%; margin-inline: -9.5%; }
	.mpl-day__art { width: 120%; margin-inline: -10%; }
	.mpl-recipes__art { width: 109%; margin-inline: -4.5%; }
	.mpl-progress__art { width: 117%; margin-inline: -8.5%; }
	.mpl-cta__couple { width: 118%; margin-inline: -9%; }

	/* decorative-only pieces are noise on a small screen */
	.mpl-hero__leaf,
	.mpl-hero__squiggle,
	.mpl-day__arrow,
	.mpl-day__spark,
	.mpl-day__dot,
	.mpl-progress__berry,
	.mpl-progress__spark,
	.mpl-progress__dot,
	.mpl-diets__wave,
	.mpl-diets__string,
	.mpl-diets__topfade,
	.mpl-goals__blob,
	.mpl-goals__dash,
	.mpl-recipes__dash,
	.mpl-goals__badge,
	.mpl-recipes__blob,
	.mpl-cta__underline,
	.mpl-cta__ring,
	.mpl-cta__bowl,
	.mpl-cta__leaf-1,
	.mpl-cta__leaf-2,
	.mpl-cta__spark {
		display: none;
	}

	/* hero */
	.mpl-hero {
		padding-top: 8px;
	}

	.mpl-rating {
		height: auto;
		flex-wrap: wrap;
		gap: 8px;
	}

	.mpl-rating__avatars {
		width: 61px;
		height: 24px;
	}

	.mpl-rating__avatars img {
		width: 24px;
		height: 24px;
	}

	.mpl-rating__avatars img:nth-child(2) {
		left: 18px;
	}

	.mpl-rating__avatars img:nth-child(3) {
		left: 37px;
	}

	.mpl-rating__score img {
		width: 15.7px;
		height: 14px;
	}

	.mpl-rating__score span,
	.mpl-rating__label {
		font-size: 12px;
	}

	.mpl-hero__title {
		margin-top: 18px;
		font-size: 34px;
		line-height: 42px;
	}

	.mpl-hero__lead {
		margin-top: 14px;
		font-size: 15px;
		line-height: 26px;
	}

	.mpl-stores {
		flex-wrap: wrap;
		margin-top: 24px;
		gap: 12px;
	}

	/*
	 * The badge scales with the canvas on desktop; once the layout reflows the
	 * canvas unit is ~0.27, which would render it at a quarter size.
	 */
	.mpl-inner .mp-store {
		--s: 1px;
	}

	.mpl-facts {
		margin-top: 22px;
		height: auto;
		flex-wrap: wrap;
		gap: 10px 16px;
	}

	.mpl-facts li img {
		width: 22px;
		height: 22px;
	}

	.mpl-facts li span {
		font-size: 12px;
	}

	.mpl-facts .mpl-facts__sep {
		display: none;
	}

	.mpl-hero__art {
		margin-top: 28px;
		max-width: 420px;
	}

	/* shared section rhythm */
	.mpl-why,
	.mpl-goals,
	.mpl-day,
	.mpl-diets,
	.mpl-recipes,
	.mpl-progress,
	.mpl-cta {
		margin-top: 56px;
	}

	.mpl-copy {
		display: block;
	}

	.mpl-h2,
	.mpl-hero__title,
	.mpl-goals__copy .mpl-h2,
	.mpl-day__copy .mpl-h2,
	.mpl-recipes__copy .mpl-h2,
	.mpl-progress__copy .mpl-h2 {
		height: auto;
	}

	.mpl-h2 {
		font-size: 28px;
		line-height: 36px;
		margin-bottom: 14px;
	}

	.mpl-lead {
		font-size: 15px;
		line-height: 26px;
		margin-bottom: 16px;
	}

	.mpl-rule {
		width: 22.7px;
		height: 2px;
		margin-bottom: 16px;
	}

	.mpl-kicker {
		font-size: 17px;
		line-height: 25px;
	}

	.mpl-mark {
		background-size: 100% 1.15em;
		background-position: 0 0.12em;
		border-radius: 4px;
		padding-inline: 4px;
		margin-inline: -4px;
	}

	.mpl-copy + .mpl-art,
	.mpl-why__title + .mpl-art,
	.mpl-diets__lead + .mpl-art {
		margin-top: 24px;
	}

	.mpl-pill {
		display: inline-flex;
		width: auto;
		height: 32px;
		margin-bottom: 14px;
		padding: 4px 8px;
		border-radius: 30px;
		font-size: 14px;
	}

	.mpl-pill i {
		width: 20px;
		height: 20px;
	}

	.mpl-pill i img {
		width: 10px;
		height: 14px;
	}

	.mpl-why__title,
	.mpl-diets__title {
		font-size: 28px;
		line-height: 36px;
	}

	.mpl-diets__lead {
		margin-top: 12px;
		font-size: 15px;
		line-height: 26px;
	}

	.mpl-diets__cta {
		align-self: center;
		width: auto;
		margin-top: 24px;
		height: 48px;
		padding-inline: 24px;
		font-size: 16px;
	}

	/*
	 * These two are single 1440-wide compositions. Shrunk to a phone they are
	 * illegible and cropping them loses cards, so they scroll instead.
	 */
	.mpl-scroller,
	.mpl-diets__row {
		scrollbar-width: thin;
		scrollbar-color: rgba(40, 43, 42, 0.2) transparent;
	}

	.mpl-scroller::-webkit-scrollbar,
	.mpl-diets__row::-webkit-scrollbar {
		height: 4px;
	}

	.mpl-scroller::-webkit-scrollbar-thumb,
	.mpl-diets__row::-webkit-scrollbar-thumb {
		background: rgba(40, 43, 42, 0.2);
		border-radius: 4px;
	}

	.mpl-scroller {
		display: block;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		margin-inline: -20px;
		padding-inline: 20px;
	}

	.mpl-why__art {
		width: 880px;
		max-width: none;
	}

	/*
	 * The artwork precedes the copy in the markup because the desktop layout
	 * places everything absolutely. Once it reflows the copy has to lead in
	 * every section — a screenshot with no heading above it carries no
	 * context, and a consistent text-then-image rhythm is easier to scan.
	 */
	.mpl-goals,
	.mpl-recipes {
		display: flex;
		flex-direction: column;
	}

	.mpl-goals__copy,
	.mpl-recipes__copy {
		order: 1;
	}

	.mpl-goals__art,
	.mpl-recipes__art {
		order: 2;
		margin-top: 24px;
	}

	.mpl-diets {
		display: flex;
		flex-direction: column;
	}

	.mpl-diets__title { order: 1; }
	.mpl-diets__lead { order: 2; }
	.mpl-diets__row { order: 3; }
	.mpl-diets__cta { order: 4; }

	.mpl-diets__row {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		margin-block: 24px;
		margin-inline: -20px;
		padding-inline: 20px;
	}

	.mpl-diet {
		position: static;
		flex: none;
		width: min(74vw, 290px);
		height: auto;
	}

	.mpl-diet--3 {
		width: min(84vw, 331px);
	}

	/* CTA */
	.mpl-cta__panel {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		padding: 28px 22px 0;
		border-radius: 24px;
	}

	.mpl-cta__eyebrow {
		font-size: 14px;
		line-height: 20px;
		letter-spacing: 0.5px;
	}

	.mpl-cta__title {
		margin-top: 10px;
		font-size: 28px;
		line-height: 38px;
	}

	.mpl-cta__actions {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin-top: 20px;
	}

	.mpl-glass--solid,
	.mpl-glass--ghost {
		width: auto;
		height: 44px;
		padding-inline: 20px;
		font-size: 15px;
	}

	.mpl-cta__couple {
		display: block;
		max-width: none;
		margin-top: 12px;
	}

	/* footer */

}