/* ==========================================================================
   1. TOKENS
   ========================================================================== */

body {
	/* --- Colour ------------------------------------------------------- */
	--mtm-lp-ink: #141616;
	--mtm-lp-ink-soft: #191e1e;
	--mtm-lp-ink-alt: #231f20;
	--mtm-lp-white: #ffffff;
	--mtm-lp-accent: #5700fa;
	--mtm-lp-accent-hover: #4400c9;
	--mtm-lp-success: #1cb588;
	--mtm-lp-border: #d0d0d0;
	--mtm-lp-muted: #a4a4a4;
	--mtm-lp-surface: #f6f6f6;
	--mtm-lp-overlay-border: rgba(255, 255, 255, 0.35);
	/* Figma stat card stroke: #FFFFFF at 20% opacity, 1px, inside. */
	--mtm-lp-stat-border: rgba(255, 255, 255, 0.2);

	/* Contextual roles, remapped per section background. */
	--mtm-lp-text: var(--mtm-lp-ink);
	--mtm-lp-heading: var(--mtm-lp-ink);
	--mtm-lp-eyebrow-color: var(--mtm-lp-accent);

	/* --- Typography --------------------------------------------------- */
	/* Fallbacks matter: with 'Inter' alone, a font failure lands on the browser's
	   default SERIF, which is badly wrong for this design. */
	--mtm-lp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--mtm-lp-weight-regular: 400;
	--mtm-lp-weight-medium: 500;
	--mtm-lp-weight-semibold: 600;

	/* Fluid scale: mobile value → Figma desktop value (1920px canvas). */
	--mtm-lp-size-h1: clamp(2.5rem, 1.833rem + 2.222vw, 4.5rem);        /*  40 → 72px */
	--mtm-lp-size-h2: clamp(2rem, 1.583rem + 1.389vw, 3.25rem);          /*  32 → 52px */
	--mtm-lp-size-h3: clamp(1.5rem, 1.375rem + 0.417vw, 1.875rem);       /*  24 → 30px */
	--mtm-lp-size-lead: clamp(1.125rem, 1rem + 0.417vw, 1.5rem);         /*  18 → 24px */
	--mtm-lp-size-body: clamp(1rem, 0.958rem + 0.139vw, 1.125rem);       /*  16 → 18px */
	--mtm-lp-size-name: clamp(1.125rem, 1.0625rem + 0.2083vw, 1.3125rem);/* 18 → 21px */
	--mtm-lp-size-role: 1rem;                                             /*       16px */
	--mtm-lp-size-small: 1rem;                                            /*       16px */
	--mtm-lp-size-button: clamp(1rem, 0.958rem + 0.139vw, 1.125rem);     /*  16 → 18px */

	/*
	 * Line heights are per-role, not shared: the Figma type scale uses a
	 * different ratio at every step (72/82, 52/62, 30/40, 24/34, 21/31,
	 * 18/28, 16/26, 16/28), so one "tight/snug/normal" trio cannot express it.
	 */
	--mtm-lp-lh-h1: 1.1389;      /* 72/82 */
	--mtm-lp-lh-h2: 1.1923;      /* 52/62 */
	--mtm-lp-lh-h3: 1.3333;      /* 30/40 */
	--mtm-lp-lh-lead: 1.4167;    /* 24/34 */
	--mtm-lp-lh-name: 1.4762;    /* 21/31 */
	--mtm-lp-lh-body: 1.5556;    /* 18/28 */
	--mtm-lp-lh-role: 1.625;     /* 16/26 */
	--mtm-lp-lh-eyebrow: 1.75;   /* 16/28 */
	--mtm-lp-tracking-eyebrow: 0.06em;

	/* --- Spacing ------------------------------------------------------ */
	--mtm-lp-space-2xs: 4px;
	--mtm-lp-space-xs: 8px;
	--mtm-lp-space-sm: 16px;
	--mtm-lp-space-ml: 20px;
	--mtm-lp-space-md: 24px;
	--mtm-lp-space-lg: 30px;
	--mtm-lp-space-xl: 40px;
	--mtm-lp-space-2xl: 48px;
	--mtm-lp-space-3xl: 64px;
	--mtm-lp-space-4xl: clamp(3rem, 1.9167rem + 3.6111vw, 6.25rem);   /*  48 → 100px */
	--mtm-lp-space-5xl: clamp(4rem, 2.8333rem + 3.8889vw, 7.5rem); /* 64 → 120px */

	/* Section rhythm — values taken from the Figma section paddings. */
	--mtm-lp-section-none: 0px;
	--mtm-lp-section-xs: clamp(0.75rem, 0.5833rem + 0.5556vw, 1.25rem);   /* 12 →  20px */
	--mtm-lp-section-sm: clamp(2rem, 1.6667rem + 1.1111vw, 3rem);         /* 32 →  48px */
	--mtm-lp-section-md: clamp(3rem, 2.3333rem + 2.2222vw, 5rem);         /* 48 →  80px */
	--mtm-lp-section-lg: var(--mtm-lp-space-5xl);                       /* 64 → 120px */
	--mtm-lp-section-xl: clamp(4.5rem, 3.2917rem + 4.0278vw, 8.125rem);   /* 72 → 130px */

	/* --- Layout ------------------------------------------------------- */
	--mtm-lp-container: 1280px;
	--mtm-lp-gutter: clamp(20px, 4.1667vw, 80px);
	--mtm-lp-grid-gap: clamp(2rem, 1.2083rem + 2.6389vw, 4.375rem);  /* 32 → 70px */
	--mtm-lp-column-gap: clamp(2.5rem, 0.8333rem + 5.5556vw, 7.5rem); /* 40 → 120px */
	--mtm-lp-card-gap: var(--mtm-lp-space-md);
	--mtm-lp-card-padding: 32px;
	--mtm-lp-results-media-h: clamp(200px, 17.7vw, 340px);
	/* Supplied per-section from the markup (the chosen background image). */
	--mtm-lp-results-bg-image: none;

	/* --- Borders & radius --------------------------------------------- */
	--mtm-lp-radius-sm: 3px;
	--mtm-lp-radius: 4px;
	--mtm-lp-radius-pill: 999px;
	--mtm-lp-border-width: 1px;

	/* --- Elevation ---------------------------------------------------- */
	--mtm-lp-shadow-card: 0 1px 2px rgba(20, 22, 22, 0.04);
	--mtm-lp-shadow-raised: 0 12px 32px rgba(20, 22, 22, 0.12);
	--mtm-lp-focus-ring: 0 0 0 3px rgba(87, 0, 250, 0.35);

	/* --- Buttons ------------------------------------------------------ */
	--mtm-lp-button-padding-y: 18px;
	--mtm-lp-button-padding-x: 21px;
	--mtm-lp-button-gap: 10px;
	--mtm-lp-button-radius: var(--mtm-lp-radius-sm);
	--mtm-lp-button-weight: var(--mtm-lp-weight-semibold);

	/* --- Motion ------------------------------------------------------- */
	--mtm-lp-transition: 180ms ease;
	--mtm-lp-transition-slow: 320ms ease;
	--mtm-lp-marquee-duration: 40s;
}

/* ==========================================================================
   2. SCOPED RESET
   Only touches elements inside this template's own wrappers.
   ========================================================================== */

.mtm-lp-header,
.mtm-lp-main,
.mtm-lp-footer {
	box-sizing: border-box;
	font-family: var(--mtm-lp-font);
	color: var(--mtm-lp-text);
}

.mtm-lp-header *,
.mtm-lp-header *::before,
.mtm-lp-header *::after,
.mtm-lp-main *,
.mtm-lp-main *::before,
.mtm-lp-main *::after,
.mtm-lp-footer *,
.mtm-lp-footer *::before,
.mtm-lp-footer *::after {
	box-sizing: border-box;
}

.mtm-lp-main :where(img),
.mtm-lp-header :where(img),
.mtm-lp-footer :where(img) {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
}
.mtm-lp-section :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, figcaption),
.mtm-lp-footer :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, figcaption) {
	margin: 0;
	padding: 0;
}

.mtm-lp-section :where(ul, ol),
.mtm-lp-footer :where(ul, ol) {
	list-style: none;
}

.mtm-lp-section :where(blockquote) {
	border: 0;
	quotes: none;
	font-size: inherit;
}

.mtm-lp-section :where(blockquote)::before,
.mtm-lp-section :where(blockquote)::after {
	content: none;
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.mtm-lp-container {
	width: 100%;
	max-width: calc(var(--mtm-lp-container) + (var(--mtm-lp-gutter) * 2));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--mtm-lp-gutter);
	padding-right: var(--mtm-lp-gutter);
}

.mtm-lp-section {
	position: relative;
	background-color: var(--mtm-lp-section-bg, transparent);
}

/* Background variants remap the contextual colour roles. */
.mtm-lp-section--bg-white {
	--mtm-lp-section-bg: var(--mtm-lp-white);
}

.mtm-lp-section--bg-muted {
	--mtm-lp-section-bg: var(--mtm-lp-surface);
}

.mtm-lp-section--bg-ink {
	--mtm-lp-section-bg: var(--mtm-lp-ink);
	--mtm-lp-text: var(--mtm-lp-white);
	--mtm-lp-heading: var(--mtm-lp-white);
	--mtm-lp-eyebrow-color: var(--mtm-lp-white);
}

.mtm-lp-section--bg-accent {
	--mtm-lp-section-bg: var(--mtm-lp-accent);
	--mtm-lp-text: var(--mtm-lp-white);
	--mtm-lp-heading: var(--mtm-lp-white);
	--mtm-lp-eyebrow-color: var(--mtm-lp-white);
}

/* Section spacing modifiers. */
.mtm-lp-section--pt-none { padding-top: var(--mtm-lp-section-none); }
.mtm-lp-section--pt-xs   { padding-top: var(--mtm-lp-section-xs); }
.mtm-lp-section--pt-sm   { padding-top: var(--mtm-lp-section-sm); }
.mtm-lp-section--pt-md   { padding-top: var(--mtm-lp-section-md); }
.mtm-lp-section--pt-lg   { padding-top: var(--mtm-lp-section-lg); }
.mtm-lp-section--pt-xl   { padding-top: var(--mtm-lp-section-xl); }

.mtm-lp-section--pb-none { padding-bottom: var(--mtm-lp-section-none); }
.mtm-lp-section--pb-xs   { padding-bottom: var(--mtm-lp-section-xs); }
.mtm-lp-section--pb-sm   { padding-bottom: var(--mtm-lp-section-sm); }
.mtm-lp-section--pb-md   { padding-bottom: var(--mtm-lp-section-md); }
.mtm-lp-section--pb-lg   { padding-bottom: var(--mtm-lp-section-lg); }
.mtm-lp-section--pb-xl   { padding-bottom: var(--mtm-lp-section-xl); }

/* ==========================================================================
   4. TYPOGRAPHY HELPERS
   ========================================================================== */

.mtm-lp-section h1,
.mtm-lp-section h2,
.mtm-lp-section h3,
.mtm-lp-section h4 {
	font-family: var(--mtm-lp-font);
	font-weight: var(--mtm-lp-weight-semibold);
	color: var(--mtm-lp-heading);
	letter-spacing: -0.01em;
}

/*
 * No `text-wrap: balance` here: it evens out line lengths and so changes where
 * headings break, which pulls them away from the line breaks in the design.
 */

.mtm-lp-eyebrow {
	font-size: var(--mtm-lp-size-small);
	line-height: var(--mtm-lp-lh-eyebrow);
	font-weight: var(--mtm-lp-weight-medium);
	letter-spacing: var(--mtm-lp-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--mtm-lp-eyebrow-color);
}

.mtm-lp-prose {
	font-size: var(--mtm-lp-size-body);
	line-height: var(--mtm-lp-lh-body);
	font-weight: var(--mtm-lp-weight-regular);
	color: var(--mtm-lp-text);
}

.mtm-lp-prose--lead {
	font-size: var(--mtm-lp-size-lead);
	line-height: var(--mtm-lp-lh-lead);
}

.mtm-lp-prose p {
	margin: 0 0 1em;
}

.mtm-lp-prose p:last-child {
	margin-bottom: 0;
}

.mtm-lp-prose ul,
.mtm-lp-prose ol {
	margin: 0 0 1em;
	padding-left: 1.25em;
	list-style: disc;
}

.mtm-lp-prose ol {
	list-style: decimal;
}

.mtm-lp-prose li + li {
	margin-top: 0.35em;
}

.mtm-lp-prose a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.mtm-lp-prose strong {
	font-weight: var(--mtm-lp-weight-semibold);
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.mtm-lp-button,
.mtm-lp-button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mtm-lp-button-gap);
	padding: var(--mtm-lp-button-padding-y) var(--mtm-lp-button-padding-x);
	border: var(--mtm-lp-border-width) solid transparent;
	border-radius: var(--mtm-lp-button-radius);
	font-family: var(--mtm-lp-font);
	font-size: var(--mtm-lp-size-button);
	line-height: var(--mtm-lp-lh-body);
	font-weight: var(--mtm-lp-button-weight);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--mtm-lp-transition), color var(--mtm-lp-transition),
		border-color var(--mtm-lp-transition), transform var(--mtm-lp-transition);
	-webkit-appearance: none;
	appearance: none;
}

.mtm-lp-button--icon-left {
	flex-direction: row-reverse;
}

.mtm-lp-button__label {
	display: inline-block;
}

.mtm-lp-button .mtm-lp-icon {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
}

/* Primary — purple. */
.mtm-lp-button--primary,
.mtm-lp-button--primary:visited {
	background-color: var(--mtm-lp-accent);
	color: var(--mtm-lp-white);
}

.mtm-lp-button--primary:hover,
.mtm-lp-button--primary:focus-visible {
	background-color: var(--mtm-lp-accent-hover);
	color: var(--mtm-lp-white);
}

/* Secondary — dark; used on purple backgrounds. */
.mtm-lp-button--secondary,
.mtm-lp-button--secondary:visited {
	background-color: var(--mtm-lp-ink);
	color: var(--mtm-lp-white);
}

.mtm-lp-button--secondary:hover,
.mtm-lp-button--secondary:focus-visible {
	background-color: var(--mtm-lp-ink-soft);
	color: var(--mtm-lp-white);
}

.mtm-lp-button--secondary:focus-visible {
	box-shadow: 0 0 0 3px var(--mtm-lp-overlay-border);
}

/* Link — text + arrow, no chrome. Inherits the surrounding text colour. */
.mtm-lp-button--link {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--mtm-lp-text);
	gap: var(--mtm-lp-space-xs);
}

.mtm-lp-button--link:hover,
.mtm-lp-button--link:focus-visible {
	background: none;
	color: var(--mtm-lp-text);
	transform: none;
}

.mtm-lp-button--link:hover .mtm-lp-button__label,
.mtm-lp-button--link:focus-visible .mtm-lp-button__label {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.mtm-lp-button--link .mtm-lp-icon {
	transition: transform var(--mtm-lp-transition);
}

.mtm-lp-button--link:hover .mtm-lp-icon {
	transform: translateX(3px);
}

.mtm-lp-button--link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	box-shadow: none;
}

/* Ghost — outlined. */
.mtm-lp-button--ghost {
	background-color: transparent;
	border-color: currentColor;
	color: var(--mtm-lp-text);
}

.mtm-lp-button--ghost:hover,
.mtm-lp-button--ghost:focus-visible {
	background-color: var(--mtm-lp-ink);
	border-color: var(--mtm-lp-ink);
	color: var(--mtm-lp-white);
}

/* ==========================================================================
   6. HEADER
   ========================================================================== */

.mtm-lp-header {
	background-color: var(--mtm-lp-white);
	padding-top: var(--mtm-lp-space-md);
	padding-bottom: clamp(1.5rem, 1.0833rem + 1.3889vw, 2.75rem); /* 24 → 44px */
}

.mtm-lp-header__logo,
.mtm-lp-header__title {
	display: inline-block;
	text-decoration: none;
	color: var(--mtm-lp-ink);
}

.mtm-lp-header__logo-img {
	width: auto;
	max-width: clamp(96px, 7.7vw, 148px);
	height: auto;
}

.mtm-lp-header__title {
	font-size: var(--mtm-lp-size-h3);
	font-weight: var(--mtm-lp-weight-semibold);
}

.mtm-lp-header__logo:focus-visible,
.mtm-lp-header__title:focus-visible {
	outline: 2px solid var(--mtm-lp-accent);
	outline-offset: 4px;
}

/* ==========================================================================
   7. HERO
   ========================================================================== */

.mtm-lp-hero__grid {
	display: grid;
	/* Figma 589:621 of the 1280 row — kept proportional so it scales. */
	grid-template-columns: minmax(0, 589fr) minmax(0, 621fr);
	gap: var(--mtm-lp-grid-gap);
	align-items: center;
}

.mtm-lp-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mtm-lp-space-lg);
}

.mtm-lp-hero__heading {
	font-size: var(--mtm-lp-size-h1);
	line-height: var(--mtm-lp-lh-h1);
}

.mtm-lp-hero__body {
	max-width: 34ch;
}

.mtm-lp-hero__content .mtm-lp-button {
	margin-top: var(--mtm-lp-space-xs);
}

/*
 * Figma applies a saturation of -100 to this image (paintFilter vibrance: -1);
 * the source asset itself is full colour, so the desaturation belongs in CSS.
 */
.mtm-lp-hero__image {
	width: 100%;
	aspect-ratio: 621 / 578;
	border-radius: var(--mtm-lp-radius);
	object-fit: cover;
	object-position: 33% 0;
	filter: grayscale(1);
}

@media (max-width: 900px) {
	.mtm-lp-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mtm-lp-hero__body {
		max-width: none;
	}

	.mtm-lp-hero__media {
		order: -1;
	}
}

/* ==========================================================================
   8. LOGO STRIP
   ========================================================================== */

/*
 * Figma nests a 64px-padded block inside the section's 20px padding, so the
 * strip has its own inner rhythm rather than relying on section spacing alone.
 */
.mtm-lp-section--logos .mtm-lp-container {
	padding-top: var(--mtm-lp-logos-inset);
	padding-bottom: var(--mtm-lp-logos-inset);
}

.mtm-lp-section--logos {
	--mtm-lp-logos-inset: clamp(2rem, 1.3333rem + 2.2222vw, 4rem); /* 32 → 64px */
}

.mtm-lp-logos__intro {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mtm-lp-space-2xl);
	margin-bottom: var(--mtm-lp-space-2xl);
	font-size: var(--mtm-lp-size-body);
	line-height: var(--mtm-lp-lh-body);
	color: var(--mtm-lp-text);
	text-align: center;
}

.mtm-lp-logos__intro::before,
.mtm-lp-logos__intro::after {
	content: "";
	flex: 1 1 0;
	height: var(--mtm-lp-border-width);
	background-color: var(--mtm-lp-border);
}

/*
 * Figma's text node is 763px wide, but the same string needs 765px in the
 * browser, so transcribing 763 exactly forced a second line. This cap is a
 * guard for very wide viewports, not a wrap point — the flanking rules absorb
 * whatever space the text does not use.
 */
.mtm-lp-logos__intro span {
	flex: 0 1 auto;
	max-width: 820px;
}

.mtm-lp-logos {
	--mtm-lp-logo-gap: var(--mtm-lp-space-2xl);
	/* Figma: two 260px-wide fade overlays, one per edge. */
	--mtm-lp-logo-fade: clamp(48px, 13.54vw, 260px);
	position: relative;
	overflow: hidden;
}

/*
 * Edge fades so logos dissolve instead of being cut off mid-glyph. Figma draws
 * these as two 260x80 rectangles filled white -> transparent, the right one
 * mirrored. They inherit the section background so the fade still matches if the
 * section colour changes.
 */
.mtm-lp-logos::before,
.mtm-lp-logos::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--mtm-lp-logo-fade);
	z-index: 2;
	pointer-events: none;
}

.mtm-lp-logos::before {
	left: 0;
	background-image: linear-gradient(
		to right,
		var(--mtm-lp-section-bg, var(--mtm-lp-white)),
		rgba(255, 255, 255, 0)
	);
}

.mtm-lp-logos::after {
	right: 0;
	background-image: linear-gradient(
		to left,
		var(--mtm-lp-section-bg, var(--mtm-lp-white)),
		rgba(255, 255, 255, 0)
	);
}

/*
 * The viewport is the single animated element. Both tracks live inside it, so
 * they share one transform and cannot drift apart.
 */
.mtm-lp-logos__viewport {
	display: flex;
	gap: var(--mtm-lp-logo-gap);
}

.mtm-lp-logos__track {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--mtm-lp-logo-gap);
	flex: 1 1 auto;
	min-width: 0;
}

/* Figma logo row is a fixed 80px tall. */
.mtm-lp-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.mtm-lp-logos__img {
	width: auto;
	max-width: clamp(96px, 10vw, 176px);
	max-width: 100%;
	max-height: 55px;
	height: auto;
	object-fit: contain;
}

/*
 * Marquee variant. Scrolls RIGHT: the viewport starts shifted left by exactly one
 * "track + gap" and travels back to 0, so logos enter from the left edge and move
 * rightwards.
 *
 * The start offset must be exact or the loop restart shows as a jump. Viewport
 * width W = 2T + g (two tracks of width T plus one gap). One full "track + gap"
 * step is T + g, and 50% of W is only (T + g/2) — hence the extra half-gap. At
 * that offset track 2 sits exactly where track 1 does at 0, so the restart is
 * invisible.
 */
.mtm-lp-logos--scroll .mtm-lp-logos__viewport {
	width: max-content;
	animation: mtm-lp-marquee var(--mtm-lp-marquee-duration) linear infinite;
	will-change: transform;
}

.mtm-lp-logos--scroll .mtm-lp-logos__track {
	flex: 0 0 auto;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

@keyframes mtm-lp-marquee {
	from { transform: translateX(calc(-50% - (var(--mtm-lp-logo-gap) / 2))); }
	to   { transform: translateX(0); }
}

/* The flanking rules have no room to read as rules on a narrow screen. */
@media (max-width: 640px) {
	.mtm-lp-logos__intro::before,
	.mtm-lp-logos__intro::after {
		display: none;
	}

	.mtm-lp-logos__intro {
		gap: 0;
	}
}

/* ==========================================================================
   9. CTA BAND
   ========================================================================== */

.mtm-lp-cta__inner {
	display: flex;
	flex-direction: column;
	gap: var(--mtm-lp-space-xl);
}

.mtm-lp-cta--center .mtm-lp-cta__inner {
	align-items: center;
	text-align: center;
}

.mtm-lp-cta--left .mtm-lp-cta__inner {
	align-items: flex-start;
	text-align: left;
}

.mtm-lp-cta__heading {
	font-size: var(--mtm-lp-size-h2);
	line-height: var(--mtm-lp-lh-h2);
	max-width: 1136px;
}

.mtm-lp-cta__body {
	max-width: 918px;
}

/* The heading/body pair sits closer together than the button. */
.mtm-lp-cta__heading + .mtm-lp-cta__body {
	margin-top: calc(var(--mtm-lp-space-sm) - var(--mtm-lp-space-xl));
}

/* ==========================================================================
   9b. CHOICE CARDS  ("Which One Sounds Like You?")
   ========================================================================== */

/* Figma: eyebrow is muted grey here, not the accent. */
.mtm-lp-section--choice {
	--mtm-lp-eyebrow-color: var(--mtm-lp-muted);
}

.mtm-lp-choice__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--mtm-lp-space-xs);
	text-align: center;
	margin-bottom: var(--mtm-lp-space-3xl);
}

.mtm-lp-choice__heading {
	font-size: var(--mtm-lp-size-h2);
	line-height: var(--mtm-lp-lh-h2);
}

.mtm-lp-choice__list {
	display: grid;
	gap: var(--mtm-lp-space-lg);
}

.mtm-lp-choice__list--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mtm-lp-choice__list--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mtm-lp-choice__card {
	display: flex;
	flex-direction: column;
	gap: var(--mtm-lp-space-md);
}

.mtm-lp-choice__media {
	overflow: hidden;
	border-radius: var(--mtm-lp-radius);
}

.mtm-lp-choice__image {
	width: 100%;
	aspect-ratio: 625 / 318;
	object-fit: cover;
}

.mtm-lp-choice__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mtm-lp-space-sm);
	padding: 0 var(--mtm-lp-space-md);
}

.mtm-lp-choice__card-heading {
	font-size: var(--mtm-lp-size-h3);
	line-height: var(--mtm-lp-lh-h3);
}

.mtm-lp-choice__content .mtm-lp-button--link {
	margin-top: var(--mtm-lp-space-2xs);color: var(--mtm-lp-white);
}

@media (max-width: 900px) {
	.mtm-lp-choice__list--cols-2,
	.mtm-lp-choice__list--cols-3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.mtm-lp-choice__content {
		padding: 0;
	}
}

/* ==========================================================================
   10. FEATURE LIST
   ========================================================================== */

.mtm-lp-features__grid {
	display: grid;
	grid-template-columns: minmax(0, 405px) minmax(0, 1fr);
	gap: var(--mtm-lp-column-gap);
	align-items: start;
}

.mtm-lp-features__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mtm-lp-space-xl);
}

.mtm-lp-features__heading {
	font-size: var(--mtm-lp-size-h2);
	line-height: var(--mtm-lp-lh-h2);
}

.mtm-lp-features__intro .mtm-lp-eyebrow + .mtm-lp-features__heading {
	margin-top: calc(var(--mtm-lp-space-sm) - var(--mtm-lp-space-xl));
}

.mtm-lp-features__list {
	display: grid;
	gap: var(--mtm-lp-space-2xl) var(--mtm-lp-space-lg);
}

.mtm-lp-features__list--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mtm-lp-features__list--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mtm-lp-features__item {
	display: flex;
	flex-direction: column;
	gap: var(--mtm-lp-space-sm);
	padding-right: var(--mtm-lp-space-md);
}

.mtm-lp-features__number {
	font-size: var(--mtm-lp-size-body);
	line-height: 1;
	font-weight: var(--mtm-lp-weight-regular);
	color: var(--mtm-lp-muted);
	font-variant-numeric: tabular-nums;
}

.mtm-lp-features__item-title {
	font-size: var(--mtm-lp-size-h3);
	line-height: var(--mtm-lp-lh-h3);
}

@media (max-width: 900px) {
	.mtm-lp-features__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.mtm-lp-features__list--cols-2,
	.mtm-lp-features__list--cols-3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.mtm-lp-features__item {
		padding-right: 0;
	}
}

/* ==========================================================================
   11. MEDIA + PANEL
   ========================================================================== */

.mtm-lp-panel__grid {
	display: grid;
	/* Figma 608:672 of the 1280 row — proportional, no fixed px. */
	grid-template-columns: minmax(0, 608fr) minmax(0, 672fr);
	align-items: stretch;
}

.mtm-lp-panel--image-right .mtm-lp-panel__grid {
	grid-template-columns: minmax(0, 672fr) minmax(0, 608fr);
}

.mtm-lp-panel--image-right .mtm-lp-panel__media {
	order: 2;
}

.mtm-lp-panel__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--mtm-lp-radius) 0 0 var(--mtm-lp-radius);
}

.mtm-lp-panel--image-right .mtm-lp-panel__media {
	border-radius: 0 var(--mtm-lp-radius) var(--mtm-lp-radius) 0;
}

.mtm-lp-panel__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 21% 50%;
}

.mtm-lp-panel__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--mtm-lp-space-xl);
	padding: var(--mtm-lp-space-4xl) var(--mtm-lp-space-2xl);
	border-radius: 0 var(--mtm-lp-radius) var(--mtm-lp-radius) 0;
	background-color: var(--mtm-lp-panel-bg);
	color: var(--mtm-lp-panel-text);
}

.mtm-lp-panel--image-right .mtm-lp-panel__content {
	border-radius: var(--mtm-lp-radius) 0 0 var(--mtm-lp-radius);
}

.mtm-lp-panel--ink {
	--mtm-lp-panel-bg: var(--mtm-lp-ink);
	--mtm-lp-panel-text: var(--mtm-lp-white);
}

.mtm-lp-panel--accent {
	--mtm-lp-panel-bg: var(--mtm-lp-accent);
	--mtm-lp-panel-text: var(--mtm-lp-white);
}

.mtm-lp-panel--muted {
	--mtm-lp-panel-bg: var(--mtm-lp-surface);
	--mtm-lp-panel-text: var(--mtm-lp-ink);
}

.mtm-lp-panel__content .mtm-lp-panel__heading,
.mtm-lp-panel__content .mtm-lp-prose {
	color: var(--mtm-lp-panel-text);
}

.mtm-lp-panel__heading {
	font-size: var(--mtm-lp-size-h2);
	line-height: var(--mtm-lp-lh-h2);
}

.mtm-lp-panel__heading + .mtm-lp-panel__body {
	margin-top: calc(var(--mtm-lp-space-sm) - var(--mtm-lp-space-xl));
}

@media (max-width: 900px) {
	.mtm-lp-panel__grid,
	.mtm-lp-panel--image-right .mtm-lp-panel__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mtm-lp-panel__media,
	.mtm-lp-panel--image-right .mtm-lp-panel__media {
		order: -1;
		border-radius: var(--mtm-lp-radius) var(--mtm-lp-radius) 0 0;
	}

	.mtm-lp-panel__image {
		aspect-ratio: 16 / 10;
		height: auto;
	}

	.mtm-lp-panel__content,
	.mtm-lp-panel--image-right .mtm-lp-panel__content {
		border-radius: 0 0 var(--mtm-lp-radius) var(--mtm-lp-radius);
		padding: var(--mtm-lp-space-xl) var(--mtm-lp-space-md);
	}
}

/* ==========================================================================
   12. RESULTS / STATS
   ========================================================================== */

.mtm-lp-section--results {
	background-color: var(--mtm-lp-ink);
	overflow: hidden;
	--mtm-lp-text: var(--mtm-lp-white);
	--mtm-lp-heading: var(--mtm-lp-white);
	--mtm-lp-eyebrow-color: var(--mtm-lp-white);
}

/* Backdrop as a section background; the URL arrives via a custom property. */
.mtm-lp-results--has-bg {
	background-image: var(--mtm-lp-results-bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.mtm-lp-results__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--mtm-lp-space-xl);
	align-items: center;
}

/* With a foreground image the section becomes media + stats side by side. */
.mtm-lp-results--has-media .mtm-lp-results__grid {
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
}

.mtm-lp-results--has-media.mtm-lp-results--left .mtm-lp-results__grid {
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
}

.mtm-lp-results--has-media.mtm-lp-results--left .mtm-lp-results__media {
	order: 2;
}

.mtm-lp-results__media {
	min-width: 0;
}

/*
 * In the design the laptop is taller than the section's content box and bleeds
 * into the 80px padding rather than stretching the section. Capping its height
 * and pulling it back with negative block margins reproduces that: the row is
 * still sized by the stat cards, so the section stays at the Figma height.
 */
.mtm-lp-results__media-img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: var(--mtm-lp-results-media-h);
	height: auto;
	margin-block: calc(var(--mtm-lp-space-xl) * -1);
	margin-inline: auto;
	object-fit: contain;
}

/* Without a foreground image the stats sit on one side, as before. */
.mtm-lp-results:not(.mtm-lp-results--has-media) .mtm-lp-results__grid {
	justify-items: end;
}

.mtm-lp-results--left:not(.mtm-lp-results--has-media) .mtm-lp-results__grid {
	justify-items: start;
}

.mtm-lp-results__content {
	display: flex;
	flex-direction: column;
	gap: var(--mtm-lp-space-lg);
	width: 100%;
	min-width: 0;
	max-width: 520px;
}

.mtm-lp-results__list {
	display: flex;
	flex-direction: column;
	gap: var(--mtm-lp-space-md);
}

.mtm-lp-results__card {
	display: flex;
	flex-direction: column;
	gap: var(--mtm-lp-space-ml);
	padding: var(--mtm-lp-space-lg);
	border: var(--mtm-lp-border-width) solid var(--mtm-lp-stat-border);
	border-radius: var(--mtm-lp-radius);
	background-color: var(--mtm-lp-accent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.mtm-lp-results__card-heading {
	font-size: var(--mtm-lp-size-h3);
	line-height: var(--mtm-lp-lh-h3);
	color: var(--mtm-lp-white);
}

.mtm-lp-results__card-body {
	font-weight: var(--mtm-lp-weight-medium);
	color: var(--mtm-lp-white);
}

@media (max-width: 900px) {
	.mtm-lp-results--has-media .mtm-lp-results__grid,
	.mtm-lp-results--has-media.mtm-lp-results--left .mtm-lp-results__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mtm-lp-results--has-media.mtm-lp-results--left .mtm-lp-results__media {
		order: 0;
	}

	.mtm-lp-results__content {
		max-width: none;
	}

	/* Stacked: no bleed, the laptop just sits above the stats. */
	.mtm-lp-results__media-img {
		margin-block: 0;
		max-height: none;
		width: 100%;
	}
}

/* ==========================================================================
   13. TESTIMONIALS
   ========================================================================== */

.mtm-lp-testimonials__head {
	display: flex;
	flex-direction: column;
	gap: var(--mtm-lp-space-sm);
	align-items: center;
	text-align: center;
	margin-bottom: var(--mtm-lp-space-3xl);
}

.mtm-lp-testimonials__heading {
	font-size: var(--mtm-lp-size-h2);
	line-height: var(--mtm-lp-lh-h2);
}

.mtm-lp-testimonials__intro {
	font-size: var(--mtm-lp-size-body);
	line-height: var(--mtm-lp-lh-body);
	color: var(--mtm-lp-text);
}

/*
 * Explicit columns, not CSS multi-column: multi-column re-balances every card
 * when the collapsed ones are revealed, which reshuffled cards that were already
 * on screen. Fixed columns keep each card where it is and append the extras to
 * the bottom of their own column, matching the design's expanded state.
 */
.mtm-lp-testimonials__grid {
	--mtm-lp-testi-columns: 3;
	display: grid;
	grid-template-columns: repeat(var(--mtm-lp-testi-columns), minmax(0, 1fr));
	gap: var(--mtm-lp-card-gap);
	align-items: start;
}

.mtm-lp-testimonials__col {
	display: flex;
	flex-direction: column;
	gap: var(--mtm-lp-card-gap);
	min-width: 0;
}

.mtm-lp-testimonial {
	display: flow-root;
	margin: 0;
	padding: var(--mtm-lp-space-xs);
	border: var(--mtm-lp-border-width) solid transparent;
	border-radius: var(--mtm-lp-radius);
	background-color: var(--mtm-lp-card-bg);
	color: var(--mtm-lp-card-text);
}

.mtm-lp-testimonial--light {
	--mtm-lp-card-bg: var(--mtm-lp-white);
	--mtm-lp-card-text: var(--mtm-lp-ink);
	--mtm-lp-card-meta: var(--mtm-lp-ink);
	border-color: var(--mtm-lp-border);
}

.mtm-lp-testimonial--dark {
	--mtm-lp-card-bg: var(--mtm-lp-ink);
	--mtm-lp-card-text: var(--mtm-lp-white);
	--mtm-lp-card-meta: var(--mtm-lp-border);
}

.mtm-lp-testimonial__content {
	display: flex;
	flex-direction: column;
	gap: var(--mtm-lp-space-md);
	padding: var(--mtm-lp-card-padding);
}

.mtm-lp-testimonial__mark {
	display: block;
	color: var(--mtm-lp-card-text);
	line-height: 0;
	margin-bottom: var(--mtm-lp-space-xs);
}

.mtm-lp-testimonial__mark svg {
	width: 36px;
	height: 32px;
}

.mtm-lp-testimonial__quote {
	font-size: var(--mtm-lp-size-body);
	line-height: var(--mtm-lp-lh-body);
	font-style: italic;
	color: var(--mtm-lp-card-text);
}

.mtm-lp-testimonial__meta {
	display: flex;
	flex-direction: column;
	gap: var(--mtm-lp-space-2xs);
}

.mtm-lp-testimonial__name {
	font-size: var(--mtm-lp-size-name);
	line-height: var(--mtm-lp-lh-name);
	font-weight: var(--mtm-lp-weight-semibold);
	color: var(--mtm-lp-card-text);
}

.mtm-lp-testimonial__role {
	font-size: var(--mtm-lp-size-role);
	line-height: var(--mtm-lp-lh-role);
	color: var(--mtm-lp-card-meta);
}

/* Video card. */
.mtm-lp-testimonial__media {
	position: relative;
	border-radius: var(--mtm-lp-radius);
	overflow: hidden;
	background-color: var(--mtm-lp-ink);
	aspect-ratio: 395 / 222;
}

.mtm-lp-testimonial__play {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mtm-lp-testimonial__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mtm-lp-transition-slow);
}

.mtm-lp-testimonial__play:hover .mtm-lp-testimonial__poster,
.mtm-lp-testimonial__play:focus-visible .mtm-lp-testimonial__poster {
	transform: scale(1.03);
}

.mtm-lp-testimonial__play:focus-visible {
	outline: 3px solid var(--mtm-lp-accent);
	outline-offset: -3px;
}

.mtm-lp-testimonial__play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(48px, 4vw, 68px);
	height: clamp(48px, 4vw, 68px);
	pointer-events: none;
}

.mtm-lp-testimonial__play-icon svg {
	width: 100%;
	height: 100%;
}

.mtm-lp-testimonial__video,
.mtm-lp-testimonial__media iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

/*
 * Self-hosted videos carry no play badge: hovering previews them, so the frame
 * is never covered. The oEmbed variant keeps its badge because it cannot be
 * previewed and still needs a click target.
 */
.mtm-lp-testimonial__media[data-mtm-lp-video] {
	cursor: pointer;
}

.mtm-lp-testimonial__media.is-playing {
	cursor: default;
}

.mtm-lp-testimonial__video:focus-visible {
	outline: 3px solid var(--mtm-lp-accent);
	outline-offset: -3px;
}

/*
 * "Click for sound" hint: only visible while a preview is playing that the
 * browser forced to be muted (no user gesture yet). Delete this block to hide
 * the hint entirely.
 */
.mtm-lp-testimonial__sound-hint {
	position: absolute;
	right: var(--mtm-lp-space-xs);
	bottom: var(--mtm-lp-space-xs);
	z-index: 2;
	display: none;
	align-items: center;
	gap: var(--mtm-lp-space-2xs);
	padding: 6px 10px;
	border-radius: var(--mtm-lp-radius-sm);
	background-color: rgba(20, 22, 22, 0.72);
	color: var(--mtm-lp-white);
	font-size: 0.8125rem;
	line-height: 1.2;
	font-weight: var(--mtm-lp-weight-medium);
	pointer-events: none;
}

.mtm-lp-testimonial__media.is-muted-fallback .mtm-lp-testimonial__sound-hint {
	display: inline-flex;
}

/* Collapsed by "Load More" (JS only — no-JS shows everything). */
.mtm-lp-testimonial.is-collapsed {
	display: none;
}

.mtm-lp-testimonials__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--mtm-lp-space-xl);
}

.mtm-lp-testimonials__actions[hidden] {
	display: none;
}

/*
 * Only the count changes per breakpoint. A small script reads this value and
 * redistributes the cards between the real column elements, which keeps the
 * masonry look AND keeps every card's position fixed when "Load More" runs.
 * Dissolving the columns with `display: contents` instead let the row-major grid
 * reorder the column-major DOM, which moved cards that were already on screen.
 */
@media (max-width: 1024px) {
	.mtm-lp-testimonials__grid {
		--mtm-lp-testi-columns: 2;
	}
}

@media (max-width: 640px) {
	.mtm-lp-testimonials__grid {
		--mtm-lp-testi-columns: 1;
	}
}

@media (max-width: 640px) {
	.mtm-lp-testimonial__content {
		padding: var(--mtm-lp-space-md);
	}
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */

/* Figma: 48px section padding, plus 24px inside the content row. */
.mtm-lp-footer {
	background-color: var(--mtm-lp-ink);
	color: var(--mtm-lp-white);
	padding-top: var(--mtm-lp-section-sm);
	padding-bottom: var(--mtm-lp-section-sm);
}

.mtm-lp-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--mtm-lp-space-md);
	padding-top: var(--mtm-lp-space-md);
	padding-bottom: var(--mtm-lp-space-md);
}

.mtm-lp-footer__logo {
	display: inline-block;
	flex: 0 0 auto;
}

.mtm-lp-footer__logo-img {
	width: clamp(96px, 7.7vw, 148px);
	height: auto;
	aspect-ratio: 148 / 120;
	object-fit: contain;
}

.mtm-lp-footer__links {
	display: flex;
	align-items: center;
	gap: var(--mtm-lp-space-md);
	flex-wrap: wrap;
}

.mtm-lp-footer__link-item + .mtm-lp-footer__link-item {
	padding-left: var(--mtm-lp-space-md);
	border-left: var(--mtm-lp-border-width) solid rgba(255, 255, 255, 0.16);
}

.mtm-lp-footer__link,
.mtm-lp-footer__link:visited {
	font-size: var(--mtm-lp-size-body);
	line-height: var(--mtm-lp-lh-body);
	font-weight: var(--mtm-lp-weight-regular);
	color: var(--mtm-lp-white);
	text-decoration: none;
}

.mtm-lp-footer__link:hover,
.mtm-lp-footer__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.mtm-lp-footer__link:focus-visible {
	outline: 2px solid var(--mtm-lp-white);
	outline-offset: 3px;
}

.mtm-lp-footer__copyright {
	font-size: var(--mtm-lp-size-body);
	line-height: var(--mtm-lp-lh-body);
	color: var(--mtm-lp-muted);
}

@media (max-width: 780px) {
	.mtm-lp-footer__inner {
		justify-content: center;
		text-align: center;
	}
}

/* ==========================================================================
   15. UTILITIES & REDUCED MOTION
   ========================================================================== */

.mtm-lp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mtm-lp-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: var(--mtm-lp-space-sm) var(--mtm-lp-space-md);
	background-color: var(--mtm-lp-ink);
	color: var(--mtm-lp-white);
	font-family: var(--mtm-lp-font);
	font-size: var(--mtm-lp-size-body);
	text-decoration: none;
}

.mtm-lp-skip-link:focus {
	left: var(--mtm-lp-space-sm);
	top: var(--mtm-lp-space-sm);
}

.mtm-lp-empty {
	padding-top: var(--mtm-lp-space-xl);
	padding-bottom: var(--mtm-lp-space-xl);
	font-family: var(--mtm-lp-font);
	color: var(--mtm-lp-muted);
}

@media (prefers-reduced-motion: reduce) {
	.mtm-lp-logos--scroll .mtm-lp-logos__viewport {
		animation: none;
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
	}

	.mtm-lp-logos--scroll .mtm-lp-logos__track:nth-child(2) {
		display: none;
	}

	.mtm-lp-logos--scroll .mtm-lp-logos__track {
		flex-wrap: wrap;
		justify-content: center;
	}

	.mtm-lp-button,
	.mtm-lp-testimonial__poster {
		transition: none;
	}

	.mtm-lp-button:hover,
	.mtm-lp-button:focus-visible {
		transform: none;
	}
}