/*
 Theme Name:   Astra Child
 Theme URI:    http://localhost:8888/
 Description:  Astra child theme for custom marketing pages.
 Author:       jarsanders
 Author URI:   http://localhost:8888/
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  astra-child
*/

/* ---------------------------------------------------------------
   Self-hosted fonts (no third-party Google Fonts connection).
   Variable woff2, latin subset, served from the theme. URLs are
   relative to this stylesheet (astra-child/).
   --------------------------------------------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/inter-latin-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 100 800;
	font-display: swap;
	src: url('assets/fonts/sora-latin-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------
   Custom marketing-page styles go below this line.
   --------------------------------------------------------------- */

/* ===============================================================
   MLT ACADEMY — DESIGN SYSTEM
   Tokens, base styles, and reusable components.
   Page styles are scoped under .mlt-home so nothing leaks into
   Tutor LMS, wp-admin, or other pages.
   =============================================================== */

:root {
	/* Brand blues — sampled from the logo (cropped-academy-trans-logo.webp) */
	--mlt-blue-50:  #E9F6FD;
	--mlt-blue-100: #D4EEFC;
	--mlt-sky:      #53BEEA;  /* logo sphere highlight — accents & light bands */
	--mlt-blue:     #1668CC;  /* logo royal/azure blue, AA-tuned for text (5.4:1) */
	--mlt-blue-700: #1259AE;  /* hover / darker */
	--mlt-blue-900: #143A6B;  /* logo sphere navy — headings, high contrast (~12:1) */

	/* Orange accent — cleaner, more vivid logo orange; the page's focal color */
	--mlt-orange:     #F97316;  /* vivid logo orange — reserved for CTA & key accents */
	--mlt-orange-600: #E8650D;  /* hover */
	--mlt-orange-700: #C2510D;  /* AA-safe deep orange (4.7:1 on white) */

	/* Neutrals */
	--mlt-white:    #FFFFFF;
	--mlt-bg:       #FCFBF8;   /* subtle warm off-white — softer than pure white */
	--mlt-bg-tint:  #F1F7FB;   /* light band background */
	--mlt-band-blue: #DBEAFB;  /* clean true-blue section band — bento / curriculum / FAQ */
	--mlt-band-line: rgba(22, 104, 204, 0.13);   /* soft brand-blue hairline — crisp band edges */
	--mlt-ink:      #16202B;   /* body text (~15:1 on white) */
	--mlt-ink-soft: #4A5A6A;   /* muted text (~7:1 on white) */
	--mlt-line:     #E2E9F0;   /* hairlines */

	/* Typography */
	--mlt-font:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mlt-font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mlt-h1:   clamp(2rem, 1.35rem + 2.9vw, 3.25rem);
	--mlt-h2:   clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
	--mlt-h3:   clamp(1.2rem, 1.07rem + 0.6vw, 1.5rem);
	--mlt-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);

	/* Spacing scale */
	--mlt-s1: 0.5rem;  --mlt-s2: 1rem;   --mlt-s3: 1.5rem;
	--mlt-s4: 2rem;    --mlt-s5: 3rem;   --mlt-s6: 4rem;

	/* Layout */
	--mlt-container: 1180px;
	--mlt-container-narrow: 820px;
	--mlt-radius: 14px;
	--mlt-radius-sm: 10px;
	--mlt-shadow:    0 10px 30px rgba(16, 78, 138, 0.08);
	--mlt-shadow-lg: 0 24px 60px rgba(16, 78, 138, 0.16);
	--mlt-section-y: clamp(3rem, 2rem + 5vw, 6rem);
}

/* ---- Base (scoped) -------------------------------------------- */
.mlt-home,
.mlt-about,
.mlt-contact,
.mlt-catalog,
.mlt-legal {
	font-family: var(--mlt-font);
	color: var(--mlt-ink);
	background: var(--mlt-bg);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
.mlt-home :where(*, *::before, *::after),
.mlt-about :where(*, *::before, *::after),
.mlt-contact :where(*, *::before, *::after),
.mlt-catalog :where(*, *::before, *::after),
.mlt-legal :where(*, *::before, *::after) { box-sizing: border-box; }

.mlt-container {
	width: 100%;
	max-width: var(--mlt-container);
	margin-inline: auto;
	padding-inline: clamp(1rem, 0.5rem + 2.5vw, 2rem);
}
.mlt-container--narrow { max-width: var(--mlt-container-narrow); }

.mlt-section { padding-block: var(--mlt-section-y); }
.mlt-section--tint { background: var(--mlt-bg-tint); }
.mlt-section--blue {
	background: linear-gradient(135deg, var(--mlt-blue), var(--mlt-blue-900));
	color: #fff;
}

/* Headings & text */
/* Wrapped in :where() so these defaults carry ZERO specificity — any
   component heading class (.mlt-hero__title, .mlt-bento__heading, …) wins. */
:where(.mlt-home h1, .mlt-home h2, .mlt-home h3,
       .mlt-about h1, .mlt-about h2, .mlt-about h3,
       .mlt-contact h1, .mlt-contact h2, .mlt-contact h3,
       .mlt-catalog h1, .mlt-catalog h2, .mlt-catalog h3,
       .mlt-legal h1, .mlt-legal h2, .mlt-legal h3) {
	margin: 0 0 var(--mlt-s3);
	font-family: var(--mlt-font-display);
	color: var(--mlt-blue-900);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}
:where(.mlt-home h1, .mlt-about h1, .mlt-contact h1, .mlt-catalog h1) { font-size: var(--mlt-h1); }
:where(.mlt-home h2, .mlt-about h2, .mlt-contact h2, .mlt-catalog h2) { font-size: var(--mlt-h2); }
:where(.mlt-home h3, .mlt-about h3, .mlt-contact h3, .mlt-catalog h3) { font-size: var(--mlt-h3); }
.mlt-section--blue :where(h1, h2, h3) { color: #fff; }

.mlt-lead {
	font-size: var(--mlt-lead);
	line-height: 1.65;
	color: var(--mlt-ink-soft);
}
.mlt-section--blue .mlt-lead { color: rgba(255, 255, 255, 0.92); }

.mlt-eyebrow {
	display: inline-block;
	margin-bottom: var(--mlt-s2);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mlt-blue);
}

/* ---- Buttons (reusable component, used site-wide) ------------- */
.mlt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 44px;            /* guaranteed tap target — Astra scales the root to 91.2% on mobile */
	padding: 0.9rem 1.6rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font: 700 1.0625rem/1.1 var(--mlt-font);
	text-decoration: none;
	cursor: pointer;
	transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.mlt-btn--primary {
	background: var(--mlt-orange);
	color: #fff;
	box-shadow: 0 10px 22px rgba(242, 106, 27, 0.30);
}
.mlt-btn--primary:hover,
.mlt-btn--primary:focus-visible {
	background: var(--mlt-orange-600);
	color: #fff;
	transform: translateY(-2px);
}
.mlt-btn--lg { font-size: 1.1875rem; padding: 1.05rem 2.1rem; }
.mlt-btn--ghost { background: transparent; color: var(--mlt-blue); border-color: currentColor; }
.mlt-btn--ghost:hover,
.mlt-btn--ghost:focus-visible { background: var(--mlt-blue); color: #fff; }

/* ---- Accessibility -------------------------------------------- */
.mlt-home a:focus-visible,
.mlt-home button:focus-visible,
.mlt-about a:focus-visible,
.mlt-about button:focus-visible,
.mlt-contact a:focus-visible,
.mlt-contact button:focus-visible,
.mlt-catalog a:focus-visible,
.mlt-catalog button:focus-visible,
.mlt-legal a:focus-visible,
.mlt-btn:focus-visible {
	outline: 3px solid var(--mlt-blue);
	outline-offset: 3px;
	border-radius: 4px;
}
.mlt-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
	.mlt-home *, .mlt-about *, .mlt-contact *, .mlt-catalog *, .mlt-legal *, .mlt-btn { transition: none !important; }
}

/* ===============================================================
   SECTION 1 — HEADER / NAV  (styles Astra's existing header)
   Desktop row: logo (left) · menu (centered in container) ·
   Enroll (pinned far right), tightened to one clean line.
   =============================================================== */

/* Logo — height-locked, middle-ground size so the tagline stays legible. */
#masthead .site-logo-img .custom-logo-link img,
#masthead img.custom-logo {
	height: 74px !important;
	width: auto !important;
	max-width: none !important;
}

/* Hide the redundant site-title text; the logo carries the brand. */
#masthead .site-title {
	display: none;
}

/* Tighten the bar — trim Astra's vertical dead space. */
#masthead .ast-primary-header-bar {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

/* Desktop three-zone layout via a 1fr/auto/1fr grid: the equal side
   columns force the menu to the TRUE center of the container. */
#ast-desktop-header .ast-builder-grid-row {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	position: relative;
}
#ast-desktop-header .site-header-primary-section-left {
	grid-column: 1;
	justify-self: start;          /* logo hugs the left */
	z-index: 2;
}
#ast-desktop-header .site-header-primary-section-right {
	grid-column: 2;               /* menu sits dead-center */
}
/* Keep the menu wrappers unpositioned so Enroll anchors to the grid row. */
#ast-desktop-header .ast-builder-menu-1,
#ast-desktop-header .ast-main-header-bar-alignment,
#ast-desktop-header .main-header-bar-navigation,
#ast-desktop-header #primary-site-navigation-desktop,
#ast-desktop-header .main-navigation,
#ast-desktop-header .main-header-menu {
	position: static;
}
#ast-desktop-header .main-header-menu .mlt-enroll {
	position: absolute;           /* lift Enroll out of the centered group */
	right: 0;                     /* …and pin it to the far right */
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
}

/* Enroll button — compact rounded RECTANGLE, clearly a button (not a circle). */
.main-header-menu .mlt-enroll > .menu-link {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.15rem !important;   /* override Astra's tall menu-link padding */
	background: var(--mlt-orange);
	color: #fff !important;
	border-radius: 8px;
	font-weight: 700;
	line-height: 1.2;
	transition: background-color .15s ease, transform .15s ease;
}
.main-header-menu .mlt-enroll > .menu-link:hover,
.main-header-menu .mlt-enroll > .menu-link:focus-visible {
	background: var(--mlt-orange-600);
	color: #fff !important;
	transform: translateY(-1px);
}

/* Mobile / off-canvas — smaller logo, Enroll as a full-width button. */
@media (max-width: 921px) {
	#masthead .site-logo-img .custom-logo-link img,
	#masthead img.custom-logo {
		height: 56px !important;
	}
	.main-header-menu .mlt-enroll > .menu-link {
		display: block;
		text-align: center;
		margin-top: 0.5rem;
		padding-top: 0.9rem !important;      /* ≥44px tap target in the off-canvas menu */
		padding-bottom: 0.9rem !important;
	}
}

/* ===============================================================
   SECTION 2 — HERO  (asymmetric two-column with layered visual)
   =============================================================== */
.mlt-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(2.5rem, 2rem + 3.5vw, 5rem);
	background: var(--mlt-bg);
}
/* Atmospheric depth — soft, heavily-blurred brand glows on each side */
.mlt-hero::before,
.mlt-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
}
.mlt-hero::before {
	width: 42rem;
	height: 42rem;
	top: -14rem;
	left: -16rem;
	background: radial-gradient(circle, var(--mlt-blue), transparent 70%);
	opacity: 0.07;
}
.mlt-hero::after {                 /* warm glow pooled under the CTA — guides the eye + balances the left */
	width: 34rem;
	height: 34rem;
	left: -6rem;
	bottom: -9rem;
	background: radial-gradient(circle, var(--mlt-orange), transparent 70%);
	opacity: 0.08;
}
.mlt-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 900px) {
	.mlt-hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

/* Left — copy: oversized headline, even vertical rhythm */
.mlt-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 38rem;
}
.mlt-hero__title {
	margin: 0;
	font-size: clamp(2.6rem, 1.5rem + 4.1vw, 4.15rem);   /* oversized display type */
	line-height: 1.0;                                    /* tight leading — one solid block */
	letter-spacing: -0.03em;
	font-weight: 800;
	color: var(--mlt-blue-900);
}
.mlt-hl { color: var(--mlt-orange); }   /* orange key-phrase accent in the H1 */
.mlt-hero__subhead {
	margin: clamp(1rem, 1.8vw, 1.4rem) 0 0;
	max-width: 34ch;
	font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
	font-weight: 500;
	line-height: 1.45;
	color: var(--mlt-ink-soft);    /* medium-dark grey — secondary to the H1 */
}
.mlt-hero__body {
	margin: clamp(0.85rem, 1.4vw, 1.15rem) 0 0;
	max-width: 42ch;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--mlt-ink-soft);
}
.mlt-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: clamp(1.25rem, 2.2vw, 1.7rem) 0 0;
	padding: 0;
	list-style: none;
}
.mlt-trust-badge {                 /* understated — never competes with the CTA */
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.8rem;
	background: var(--mlt-blue-50);
	border: 1px solid var(--mlt-line);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--mlt-ink-soft);
}
.mlt-trust-badge svg { width: 13px; height: 13px; color: var(--mlt-blue); flex: none; }
.mlt-hero__actions { margin: clamp(1.4rem, 2.2vw, 1.85rem) 0 0; }

/* Right — layered visual composition */
.mlt-hero__visual {
	position: relative;            /* photo foundation + floating card cluster */
	justify-self: center;
	width: 100%;
	max-width: 32rem;
	margin-inline: auto;
}
.mlt-hero__blob {
	position: absolute;
	inset: -8% -9%;
	border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
	background: linear-gradient(150deg, var(--mlt-sky), var(--mlt-blue) 55%, var(--mlt-blue-900));
	opacity: 0.14;
	filter: blur(8px);
	z-index: 0;
}
/* Photo — the foundational visual */
.mlt-hero__photo {
	position: relative;
	z-index: 1;
	aspect-ratio: 5 / 4;
	border-radius: 22px;
	overflow: hidden;
	border: 1px solid var(--mlt-line);
	box-shadow: var(--mlt-shadow-lg);
}
.mlt-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;       /* person right, open desk/window space left */
}
/* Card cluster — slick UI over the photo's open LEFT side, clear of the face */
.mlt-hero__cluster {
	position: absolute;
	z-index: 2;
	left: -1.25rem;
	top: 50%;
	transform: translateY(-50%);
	width: 44%;
	max-width: 13.5rem;
}
.mlt-hero__card {
	position: relative;
	z-index: 2;
	width: 100%;
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: 20px;
	box-shadow: var(--mlt-shadow-lg);
	overflow: hidden;
}
.mlt-hero__card-top {
	padding: 1.3rem 1.3rem 1.45rem;
	background: linear-gradient(135deg, var(--mlt-blue), var(--mlt-blue-900));
	color: #fff;
}
.mlt-hero__play {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	margin-bottom: 0.8rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.mlt-hero__play svg { width: 18px; height: 18px; fill: #fff; margin-left: 3px; }
.mlt-hero__card-eyebrow {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.9;
}
.mlt-hero__card-body { padding: 1.2rem 1.3rem 1.4rem; }
.mlt-hero__card-title {
	margin: 0 0 0.85rem;
	font-size: 1.15rem;
	line-height: 1.25;
	font-weight: 800;
	color: var(--mlt-blue-900);
}
.mlt-hero__card-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 1.2rem;
	font-size: 0.8rem;
	color: var(--mlt-ink-soft);
}
.mlt-hero__card-meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0;
}
.mlt-hero__card-meta span:nth-child(odd)  { padding-right: 0.7rem; }
.mlt-hero__card-meta span:nth-child(even) { padding-left: 0.85rem; border-left: 1px solid var(--mlt-line); }
.mlt-hero__card-meta span:nth-child(n + 3) { border-top: 1px solid var(--mlt-line); }
.mlt-hero__card-meta svg { width: 15px; height: 15px; color: var(--mlt-blue); flex: none; }
.mlt-hero__progress {
	height: 8px;
	border-radius: 999px;
	background: var(--mlt-blue-50);
	overflow: hidden;
}
.mlt-hero__progress span {
	display: block;
	height: 100%;
	width: 72%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--mlt-blue), var(--mlt-sky));
}
.mlt-hero__badge {
	position: absolute;
	top: -0.9rem;                  /* sits decisively ON the card's top-right corner */
	right: -0.9rem;
	z-index: 3;
	width: 96px;
	height: 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: 50%;
	box-shadow: 0 14px 30px rgba(16, 78, 138, 0.16);   /* matches the card */
	animation: mlt-float 5s ease-in-out infinite;
}
.mlt-hero__badge b { font-size: 1.5rem; line-height: 1; font-weight: 800; color: var(--mlt-blue-900); }
.mlt-hero__badge-unit {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mlt-ink-soft);
}
.mlt-hero__badge-org {
	margin-top: 3px;
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--mlt-ink-soft);
}
.mlt-hero__chip {
	position: absolute;
	bottom: -1rem;                 /* overlaps the card's bottom-left corner */
	left: -1rem;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.7rem 0.95rem;
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: 14px;
	box-shadow: 0 16px 36px rgba(16, 78, 138, 0.16);   /* matches the card */
	animation: mlt-float 6s ease-in-out infinite reverse;
}
.mlt-hero__chip-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: var(--mlt-blue-50);
	color: var(--mlt-blue);
}
.mlt-hero__chip-icon svg { width: 21px; height: 21px; }
.mlt-hero__chip-text strong { display: block; font-size: 0.85rem; color: var(--mlt-blue-900); }
.mlt-hero__chip-text small { display: block; font-size: 0.72rem; color: var(--mlt-ink-soft); }

@keyframes mlt-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
	.mlt-hero__badge, .mlt-hero__chip { animation: none; }
}
@media (max-width: 899px) {
	/* Stacked: the card sits fully BELOW the photo — never over the person. */
	.mlt-hero__cluster {
		position: relative;
		left: auto;
		top: auto;
		bottom: auto;
		transform: none;
		width: 86%;
		max-width: 20rem;
		margin: -2.25rem auto 0;
	}
}
@media (max-width: 520px) {
	.mlt-hero__badge { width: 74px; height: 74px; top: -0.75rem; right: -0.4rem; }
	.mlt-hero__badge b { font-size: 1.15rem; }
	.mlt-hero__chip { left: -0.4rem; bottom: -0.6rem; }
}

/* ===============================================================
   HERO — wave divider, scroll-reveal, refined hover
   =============================================================== */

/* Organic wave at the hero's bottom edge */
.mlt-hero__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 1;
	line-height: 0;
	pointer-events: none;
}
.mlt-hero__wave svg {
	display: block;
	width: 100%;
	height: clamp(38px, 6vw, 76px);
}

/* Refined hover — the card lifts, the CTA deepens its glow */
.mlt-hero__card {
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
.mlt-hero__visual:hover .mlt-hero__card {
	transform: translateY(-6px);
	box-shadow: 0 34px 70px rgba(16, 78, 138, 0.20);
}
.mlt-btn--primary:hover,
.mlt-btn--primary:focus-visible {
	box-shadow: 0 16px 34px rgba(249, 115, 22, 0.40);
}

/* Scroll-reveal — only armed once JS flags <html>.mlt-js */
.mlt-js .mlt-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--d, 0) * 90ms);
	will-change: opacity, transform;
}
.mlt-js .mlt-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.mlt-js .mlt-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Scroll-draw connector lines — SVG stroke-dashoffset, same observer + .mlt-js gate.
   Each path carries pathLength="1", so a single dash of length 1 is the whole line:
   offset 0 = fully drawn (the default / no-JS state — never blank), offset 1 = hidden.
   Only "draws" once .mlt-js arms the hidden state and the observer adds .is-visible. */
.mlt-draw__line { stroke-dasharray: 1; }
.mlt-js .mlt-draw .mlt-draw__line {
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1);
	transition-delay: calc(var(--draw-d, 0) * 1ms);
}
.mlt-js .mlt-draw.is-visible .mlt-draw__line { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
	.mlt-js .mlt-draw .mlt-draw__line { stroke-dashoffset: 0; transition: none; }
}

/* ===============================================================
   SECTION 3 — VALUE PROP as an editorial bento grid (Stripe-quiet)
   The hero's wave is tinted to match so it flows into this band.
   =============================================================== */
.mlt-hero__wave path { fill: var(--mlt-band-blue); }   /* ties the wave to the band below */

.mlt-value { background: var(--mlt-band-blue); }

.mlt-bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 800px) {
	.mlt-bento {
		grid-template-columns: repeat(4, 1fr);
		gap: clamp(1rem, 1.4vw, 1.5rem);   /* uniform 16–24px gaps */
	}
	.mlt-bento__anchor { grid-column: 1 / 3; grid-row: 1 / 3; }
	.mlt-bento__wide { grid-column: span 2; }
}
.mlt-bento__tile {
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: var(--mlt-radius);
	padding: clamp(1.25rem, 2vw, 1.6rem);
	box-shadow: 0 1px 2px rgba(16, 78, 138, 0.05);   /* hairline, restrained */
}
.mlt-bento__anchor {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--mlt-s2);
	padding: clamp(1.75rem, 3vw, 2.5rem);
}
.mlt-bento__heading {
	margin: 0;
	font-size: clamp(1.65rem, 1.2rem + 1.6vw, 2.3rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}
.mlt-bento__lead {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--mlt-ink-soft);
}
.mlt-bento__fact {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
}
.mlt-bento__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--mlt-blue-50);
	color: var(--mlt-blue);
}
.mlt-bento__icon svg { width: 20px; height: 20px; }
.mlt-bento__fact p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.45;
	font-weight: 500;
	color: var(--mlt-ink);
}
.mlt-bento__fact.mlt-bento__wide {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
}
.mlt-bento__tile--blue {
	background: linear-gradient(150deg, var(--mlt-blue), var(--mlt-blue-900));
	border-color: transparent;
}
.mlt-bento__tile--blue .mlt-bento__icon {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}
.mlt-bento__tile--blue p { color: #fff; }

/* ===============================================================
   SECTION 4 — FEATURED COURSE SHOWCASE
   One spotlighted course; .mlt-courses is grid-ready for more.
   =============================================================== */
.mlt-course-section { background: var(--mlt-bg); }
.mlt-courses {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2rem);   /* gap for a future multi-course grid */
}
.mlt-course {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: 20px;
	box-shadow: var(--mlt-shadow-lg);
}
@media (min-width: 860px) {
	.mlt-course { grid-template-columns: 1.6fr 1fr; }
}
.mlt-course__detail { padding: clamp(1.75rem, 3.5vw, 3rem); }
.mlt-course__title {
	margin: 0 0 var(--mlt-s2);
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}
.mlt-course__desc {
	margin: 0 0 var(--mlt-s4);
	max-width: 46ch;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--mlt-ink-soft);
}
.mlt-course__subhead {
	margin: 0 0 var(--mlt-s3);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mlt-blue);
}
.mlt-course__sections {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.55rem 1.5rem;
	margin: 0 0 var(--mlt-s4);
	padding: 0;
	list-style: none;
	counter-reset: mlt-sec;
}
@media (min-width: 560px) {
	.mlt-course__sections { grid-template-columns: 1fr 1fr; }
}
.mlt-course__sections li {
	counter-increment: mlt-sec;
	display: flex;
	align-items: baseline;
	gap: 0.65rem;
	font-size: 0.95rem;
	color: var(--mlt-ink);
}
.mlt-course__sections li::before {
	content: counter(mlt-sec, decimal-leading-zero);
	flex: none;
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--mlt-blue);
}
.mlt-course__includes {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: var(--mlt-s3) 0 0;
	border-top: 1px solid var(--mlt-line);
	list-style: none;
}
.mlt-course__includes li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	font-size: 0.95rem;
	color: var(--mlt-ink);
}
.mlt-course__inc-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--mlt-blue-50);
	color: var(--mlt-blue);
}
.mlt-course__inc-icon svg { width: 17px; height: 17px; }

/* Action / pricing panel — distinct tinted column that anchors the CTA */
.mlt-course__action {
	display: flex;
	flex-direction: column;
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--mlt-blue-50);
	border-top: 1px solid var(--mlt-line);
}
@media (min-width: 860px) {
	.mlt-course__action {
		border-top: 0;
		border-left: 1px solid var(--mlt-line);
	}
}
.mlt-price__amount {
	display: block;
	font-family: var(--mlt-font-display);
	font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}
.mlt-price__terms {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.9rem;
	color: var(--mlt-ink-soft);
}
.mlt-course__cta { width: 100%; }
.mlt-price__reassure {
	display: grid;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
	color: var(--mlt-ink);
}
.mlt-price__reassure li { display: flex; align-items: center; gap: 0.55rem; }
.mlt-price__reassure svg { flex: none; width: 16px; height: 16px; color: var(--mlt-blue); }

/* Certificate-outcome graphic — echoes the hero's card + floating badge + blur.
   Swap the .mlt-outcome figure for an <img> later, or add one alongside it. */
.mlt-outcome {
	position: relative;
	align-self: center;
	width: 100%;
	max-width: 22rem;          /* fills the panel; only caps on very wide (mobile) panels */
	margin-top: auto;          /* anchor the graphic to the bottom of the panel */
	padding-top: 1.5rem;       /* room for the larger overhanging seal */
}
.mlt-outcome__blob {
	position: absolute;
	inset: 8% 4% 2%;
	border-radius: 44% 56% 60% 40% / 46% 44% 56% 54%;
	background: linear-gradient(150deg, var(--mlt-sky), var(--mlt-blue) 60%, var(--mlt-blue-900));
	opacity: 0.13;
	filter: blur(16px);
	z-index: 0;
}
.mlt-outcome__card {
	position: relative;
	z-index: 1;
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: 16px;
	box-shadow: var(--mlt-shadow-lg);
	overflow: hidden;
}
.mlt-outcome__top {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 1rem 1.2rem;
	background: linear-gradient(135deg, var(--mlt-blue), var(--mlt-blue-900));
	color: #fff;
}
.mlt-outcome__award {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	border: 1.5px solid rgba(255, 255, 255, 0.5);
}
.mlt-outcome__award svg { width: 20px; height: 20px; }
.mlt-outcome__kicker {
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	opacity: 0.92;
}
.mlt-outcome__body { padding: 1.2rem 1.2rem 1.3rem; }
.mlt-outcome__course {
	display: block;
	font-family: var(--mlt-font-display);
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1.25;
	color: var(--mlt-blue-900);
}
.mlt-outcome__note {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.78rem;
	line-height: 1.55;
	color: var(--mlt-ink-soft);
}
.mlt-outcome__foot {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-top: 1.05rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--mlt-line);
	font-size: 0.74rem;
	color: var(--mlt-ink-soft);
}
.mlt-outcome__foot-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--mlt-blue-50);
	color: var(--mlt-blue);
}
.mlt-outcome__foot-icon svg { width: 14px; height: 14px; }
.mlt-outcome__foot strong { color: var(--mlt-blue-900); font-weight: 600; }
.mlt-outcome__seal {
	position: absolute;
	top: 0.55rem;
	right: -0.7rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--mlt-blue), var(--mlt-blue-900));
	color: #fff;
	border: 3px solid #fff;
	box-shadow: 0 10px 22px rgba(16, 78, 138, 0.24);
}
.mlt-outcome__seal svg { width: 25px; height: 25px; }

/* ===============================================================
   SECTION 5 — PROOF / CREDIBILITY  (confident navy band)
   A distinct dark treatment for page rhythm; the numbers carry it.
   =============================================================== */
.mlt-proof {
	background:
		radial-gradient(70% 60% at 50% 0%, rgba(59, 169, 224, 0.14), transparent 70%),
		linear-gradient(160deg, var(--mlt-blue-900), #0e2b4d);
	color: #fff;
}
.mlt-proof__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 880px) {
	.mlt-proof__grid { grid-template-columns: 0.8fr 1.2fr; }
}
.mlt-proof__photo {
	width: 100%;
	max-width: 24rem;
	margin: 0 auto;
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 28px 60px rgba(0, 0, 0, 0.4);
}
.mlt-proof__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 45%;   /* keep all three people framed */
}
.mlt-proof__heading {
	margin: 0 0 var(--mlt-s3);
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #fff;
}
.mlt-proof__body {
	margin: 0;
	max-width: 40rem;
	font-size: 1.05rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.82);
}
.mlt-proof__stats {
	display: grid;
	gap: 0;
	margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.mlt-stat {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 1.1rem;
	padding: 1.1rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	text-align: left;
}
.mlt-stat:first-child {
	border-top: 0;
	padding-top: 0;
}
.mlt-stat__num {
	font-family: var(--mlt-font-display);
	font-size: clamp(1.9rem, 1.5rem + 1.1vw, 2.4rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
	white-space: nowrap;
}
.mlt-stat__label {
	font-size: 0.92rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.72);
}

/* ===============================================================
   SECTION 6 — TRANSFORMATION  (two starting points, one destination)
   =============================================================== */
.mlt-transform { background: var(--mlt-bg); }
.mlt-transform__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: center;
	margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
@media (min-width: 880px) {
	.mlt-transform__top { grid-template-columns: 1.05fr 0.95fr; }
}
.mlt-transform__intro {
	max-width: 36rem;
}
.mlt-transform__heading {
	margin: 0 0 var(--mlt-s3);
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}
.mlt-transform__body {
	margin: 0;
	max-width: 36rem;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--mlt-ink-soft);
}
.mlt-transform__photo {
	border-radius: 20px;
	overflow: hidden;
	border: 1px solid var(--mlt-line);
	box-shadow: var(--mlt-shadow-lg);
}
.mlt-transform__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: center;
}
.mlt-paths { max-width: 56rem; margin: 0 auto; }
.mlt-paths__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}
@media (min-width: 680px) {
	.mlt-paths__row { grid-template-columns: 1fr 1fr; }
}
.mlt-path {
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: var(--mlt-radius);
	box-shadow: var(--mlt-shadow);
	padding: clamp(1.5rem, 3vw, 2rem);
	text-align: center;
}
.mlt-path__icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--mlt-s2);
	border-radius: 14px;
	background: var(--mlt-blue-50);
	color: var(--mlt-blue);
}
.mlt-path__icon svg { width: 25px; height: 25px; }
.mlt-path__title {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	color: var(--mlt-blue-900);
}
.mlt-path__desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--mlt-ink-soft);
}
.mlt-paths__merge { display: none; }
@media (min-width: 680px) {
	.mlt-paths__merge {
		display: block;
		height: 44px;
	}
	.mlt-paths__merge svg { display: block; width: 100%; height: 100%; }
	.mlt-paths__merge path {
		fill: none;
		stroke: var(--mlt-sky);
		stroke-width: 2;
		stroke-linecap: round;
	}
}
.mlt-paths__dest {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	max-width: 36rem;
	margin: 1.25rem auto 0;
	padding: 1rem 1.5rem;
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: 16px;
	box-shadow: var(--mlt-shadow-lg);
}
@media (min-width: 680px) {
	.mlt-paths__dest { margin-top: 0; }
}
.mlt-paths__dest-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--mlt-blue), var(--mlt-blue-900));
	color: #fff;
	box-shadow: 0 8px 18px rgba(16, 78, 138, 0.22);
}
.mlt-paths__dest-icon svg { width: 21px; height: 21px; }
.mlt-paths__dest-text {
	font-size: 1rem;
	line-height: 1.4;
	color: var(--mlt-blue-900);
}
.mlt-paths__dest-text strong { font-weight: 700; }

/* ===============================================================
   SECTION 7 — CURRICULUM  (browsable bento-style module grid)
   =============================================================== */
.mlt-curric {
	background: var(--mlt-band-blue);
	border-block: 1px solid var(--mlt-band-line);
}
.mlt-curric__intro {
	max-width: 46rem;
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
}
.mlt-curric__heading {
	margin: 0 0 var(--mlt-s3);
	font-size: clamp(1.8rem, 1.25rem + 2vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}
.mlt-curric__lead {
	margin: 0 auto;
	max-width: 40rem;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--mlt-ink-soft);
}
.mlt-curric__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 1.5vw, 1.25rem);
}
@media (min-width: 560px) {
	.mlt-curric__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
	.mlt-curric__grid { grid-template-columns: repeat(4, 1fr); }
}
.mlt-curric-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	padding: clamp(1.3rem, 2vw, 1.6rem);
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: var(--mlt-radius);
	box-shadow: 0 1px 2px rgba(16, 78, 138, 0.05);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mlt-curric-tile:hover {
	transform: translateY(-3px);
	box-shadow: var(--mlt-shadow);
	border-color: var(--mlt-blue-100);
}
.mlt-curric-tile__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: 0.2rem;
	border-radius: 13px;
	background: linear-gradient(150deg, var(--mlt-blue), var(--mlt-blue-900));
	box-shadow: 0 6px 14px rgba(22, 104, 204, 0.28);
	font-family: var(--mlt-font-display);
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.mlt-curric-tile__name {
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mlt-blue-900);
}
.mlt-curric-tile__desc {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--mlt-ink-soft);
}

/* ===============================================================
   SECTION 8 — HOW IT WORKS  (linear 3-step path)
   =============================================================== */
.mlt-howto { background: var(--mlt-bg); }
.mlt-howto__heading {
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}
.mlt-steps {
	position: relative;
	max-width: 60rem;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.25rem;
}
.mlt-howto__line { display: none; }   /* connector only shown when the steps sit in a row */
@media (min-width: 760px) {
	.mlt-steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
	.mlt-howto__line {            /* the progression line connecting the three steps */
		display: block;
		position: absolute;
		top: 28px;
		left: 16.66%;
		right: 16.66%;
		height: 2px;
		z-index: 0;
	}
	.mlt-howto__line path {
		fill: none;
		stroke: var(--mlt-blue-100);
		stroke-width: 2;
		stroke-linecap: round;
	}
}
.mlt-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.mlt-step__num {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--mlt-s2);
	border-radius: 50%;
	background: linear-gradient(150deg, var(--mlt-blue), var(--mlt-blue-900));
	color: #fff;
	box-shadow: 0 8px 18px rgba(16, 78, 138, 0.22);
}
.mlt-step__num span {
	font-family: var(--mlt-font-display);
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1;
}
.mlt-step__title {
	margin: 0 0 0.5rem;
	font-size: 1.2rem;
	color: var(--mlt-blue-900);
}
.mlt-step__desc {
	margin: 0;
	max-width: 18rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--mlt-ink-soft);
}
.mlt-howto__cta {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
}

/* ===============================================================
   SECTION 9 — FAQ  (native <details> accordion + FAQPage JSON-LD)
   =============================================================== */
.mlt-faq {
	background: var(--mlt-band-blue);
	border-block: 1px solid var(--mlt-band-line);
}
.mlt-faq__heading {
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}
.mlt-faq__list {
	max-width: 46rem;
	margin: 0 auto;
	display: grid;
	gap: 1rem;
}
.mlt-faq-item {
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: var(--mlt-radius);
	box-shadow: 0 1px 2px rgba(16, 78, 138, 0.05);
	overflow: hidden;
}
.mlt-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.1rem, 2vw, 1.35rem) clamp(1.25rem, 2.5vw, 1.6rem);
	cursor: pointer;
	font-family: var(--mlt-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mlt-blue-900);
	list-style: none;
}
.mlt-faq-q::-webkit-details-marker { display: none; }
.mlt-faq-q:focus-visible {
	outline: 3px solid var(--mlt-blue);
	outline-offset: -3px;
	border-radius: var(--mlt-radius);
}
.mlt-faq-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--mlt-blue-50);
	color: var(--mlt-blue);
	transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.mlt-faq-icon svg { width: 16px; height: 16px; }
.mlt-faq-item[open] .mlt-faq-icon {
	transform: rotate(180deg);
	background: var(--mlt-blue);
	color: #fff;
}
.mlt-faq-a {
	overflow: hidden;          /* clip during the JS height animation */
	padding: 0 clamp(1.25rem, 2.5vw, 1.6rem) clamp(1.2rem, 2vw, 1.4rem);
}
.mlt-faq-a p {
	margin: 0;
	max-width: 62ch;
	font-size: 0.98rem;
	line-height: 1.7;
	color: var(--mlt-ink-soft);
}

/* ===============================================================
   SECTION 10 — FINAL CTA BAND  (bold closing moment)
   =============================================================== */
.mlt-final {
	position: relative;
	overflow: hidden;
	text-align: center;
	background:
		radial-gradient(80% 120% at 50% -10%, rgba(83, 190, 234, 0.22), transparent 60%),
		linear-gradient(135deg, var(--mlt-blue), var(--mlt-blue-900));
	color: #fff;
}
.mlt-final__inner {
	position: relative;
	z-index: 1;
	max-width: 44rem;
	margin: 0 auto;
}
.mlt-final__heading {
	margin: 0 0 var(--mlt-s3);
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
}
.mlt-final__sub {
	margin: 0 auto clamp(2rem, 4vw, 2.75rem);
	max-width: 40rem;
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.85);
}
.mlt-final__reassure {
	margin: clamp(1.25rem, 2.5vw, 1.6rem) 0 0;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.7);
}

/* ===============================================================
   SITE FOOTER — replaces the default Astra footer
   =============================================================== */
.mlt-footer {
	font-family: var(--mlt-font);
	background: linear-gradient(180deg, var(--mlt-blue-900), #0d2748);
	color: rgba(255, 255, 255, 0.7);
}
.mlt-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3rem);
	padding-block: clamp(2.75rem, 5vw, 4rem);
}
@media (min-width: 600px) {
	.mlt-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 920px) {
	.mlt-footer__grid { grid-template-columns: 2.2fr 1fr 1fr 1fr; }
}
.mlt-footer__logo {
	display: inline-block;
	padding: 0.55rem 0.8rem;
	background: #fff;
	border-radius: 12px;
}
.mlt-footer__logo img {
	display: block;
	height: 40px;
	width: auto;
}
.mlt-footer__about {
	margin: 1.1rem 0 0;
	max-width: 30rem;
	font-size: 0.92rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.62);
}
.mlt-footer__heading {
	margin: 0 0 1rem;
	font-family: var(--mlt-font-display);
	font-size: 0.95rem;
	font-weight: 700;
	color: #fff;
}
.mlt-footer__col ul {
	display: grid;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mlt-footer__col a {
	font-size: 0.92rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color .15s ease;
}
.mlt-footer__col a:hover { color: #fff; }
.mlt-footer a:focus-visible {
	outline: 2px solid var(--mlt-sky);
	outline-offset: 3px;
	border-radius: 3px;
}
.mlt-footer__soon {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.42);
}
.mlt-footer__soon em {
	font-style: normal;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.7);
}
.mlt-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.mlt-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.4rem 1.5rem;
	padding-block: 1.4rem;
	font-size: 0.82rem;
	color: rgba(255, 255, 255, 0.5);
}
.mlt-footer__bottom-inner p { margin: 0; }

/* ===============================================================
   ABOUT PAGE  (scoped under .mlt-about — never leaks site-wide)
   Shares the homepage system: Sora headings, brand colors, the
   warm-white / soft-blue / navy rhythm, soft shadows, scroll-reveal.
   =============================================================== */

/* Placeholder flags — deliberately loud so unconfirmed copy is obvious
   in preview. Remove the markup once real content is supplied. */
.mlt-flag {
	display: inline-block;
	margin-right: 0.4rem;
	padding: 0.15em 0.55em;
	border-radius: 6px;
	background: #FFE8C2;
	border: 1px solid #F2B872;
	color: #8A4B00;
	font-family: var(--mlt-font);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
	white-space: nowrap;
}
.mlt-flag--on-dark {
	background: rgba(255, 209, 130, 0.18);
	border-color: rgba(255, 209, 130, 0.5);
	color: #FFD27A;
}

/* ---- Hero / intro band (warm off-white) ---- */
.mlt-about-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--mlt-bg);
}
.mlt-about-hero::before {           /* soft brand glow, echoing the homepage hero */
	content: "";
	position: absolute;
	z-index: 0;
	width: 40rem; height: 40rem;
	top: -16rem; right: -14rem;
	border-radius: 50%;
	background: radial-gradient(circle, var(--mlt-blue), transparent 70%);
	opacity: 0.06;
	filter: blur(90px);
	pointer-events: none;
}
.mlt-about-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}
@media (min-width: 900px) {
	.mlt-about-hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}
.mlt-about-hero__copy { max-width: 38rem; }
.mlt-about-hero__title {
	margin: 0;
	font-size: clamp(2.4rem, 1.6rem + 3vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--mlt-blue-900);
}
.mlt-about-hero__intro {
	margin: clamp(1rem, 2vw, 1.5rem) 0 0;
	max-width: 44ch;
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.65;
	color: var(--mlt-ink-soft);
}
/* Hero visual — portrait photo, framed like the site's other images. */
.mlt-about-hero__photo {
	position: relative;
	width: 100%;
	max-width: 23rem;            /* keep the tall portrait from dominating the column */
	margin-inline: auto;
}
.mlt-about-hero__photo::before {     /* faint brand glow behind the photo (as on the homepage) */
	content: "";
	position: absolute;
	inset: -8% -9%;
	border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
	background: linear-gradient(150deg, var(--mlt-sky), var(--mlt-blue) 55%, var(--mlt-blue-900));
	opacity: 0.14;
	filter: blur(8px);
	z-index: 0;
}
.mlt-about-hero__photo img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
	border-radius: 22px;
	border: 1px solid var(--mlt-line);
	box-shadow: var(--mlt-shadow-lg);
}

/* ---- Shared card language (mission + approach) ---- */
.mlt-about-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 1.5vw, 1.25rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 720px) {
	.mlt-about-cards { grid-template-columns: repeat(3, 1fr); }
}
.mlt-about-card {
	padding: clamp(1.4rem, 2.5vw, 1.85rem);
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: var(--mlt-radius);
	box-shadow: 0 1px 2px rgba(16, 78, 138, 0.05);
	transition: transform .2s ease, box-shadow .2s ease;
}
.mlt-about-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--mlt-shadow);
}
.mlt-about-card--accent { border-top: 3px solid var(--mlt-blue); }
.mlt-about-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.1rem;
	color: var(--mlt-blue-900);
}
.mlt-about-card__desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--mlt-ink-soft);
}

/* ---- Mission band (soft blue) ---- */
.mlt-about-mission {
	background: var(--mlt-band-blue);
	border-block: 1px solid var(--mlt-band-line);
}
.mlt-about-mission__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}
@media (min-width: 880px) {
	/* Image-left / text-right (zigzag vs. the rest of the page). Photo is
	   second in the DOM — text-first on mobile — and pulled left here. */
	.mlt-about-mission__top { grid-template-columns: 0.95fr 1.05fr; }
	.mlt-about-mission__photo { order: -1; }
}
.mlt-about-mission__photo {
	position: relative;
}
.mlt-about-mission__photo::before {  /* faint brand glow behind the photo (as on the homepage) */
	content: "";
	position: absolute;
	inset: -8% -9%;
	border-radius: 42% 58% 60% 40% / 45% 45% 55% 55%;
	background: linear-gradient(150deg, var(--mlt-sky), var(--mlt-blue) 55%, var(--mlt-blue-900));
	opacity: 0.16;
	filter: blur(8px);
	z-index: 0;
}
.mlt-about-mission__photo img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: center;
	border-radius: 22px;
	border: 1px solid var(--mlt-line);
	box-shadow: var(--mlt-shadow-lg);
}
.mlt-about-mission__intro,
.mlt-about-approach__intro { max-width: 46rem; }
.mlt-about-mission__heading,
.mlt-about-approach__heading {
	margin: 0 0 var(--mlt-s3);
	font-size: clamp(1.8rem, 1.25rem + 2vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}
.mlt-about-mission__lead,
.mlt-about-approach__lead {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--mlt-ink-soft);
}

/* ---- Company band (navy credibility, like the homepage proof) ---- */
.mlt-about-company {
	background:
		radial-gradient(70% 60% at 50% 0%, rgba(59, 169, 224, 0.14), transparent 70%),
		linear-gradient(160deg, var(--mlt-blue-900), #0e2b4d);
	color: #fff;
}
.mlt-about-company .mlt-eyebrow { color: var(--mlt-sky); }   /* readable on navy */
.mlt-about-company__intro { max-width: 46rem; }
.mlt-about-company__heading {
	margin: 0 0 var(--mlt-s3);
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.6rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #fff;
}
.mlt-about-company__lead {
	margin: 0;
	max-width: 44rem;
	font-size: 1.05rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.82);
}
.mlt-about-company__lead + .mlt-about-company__lead { margin-top: 1.1rem; }
.mlt-about-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;                                  /* hairline separators via grid gap */
	margin-top: clamp(2.5rem, 5vw, 3.5rem);    /* lets the heading + copy breathe above */
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--mlt-radius);
	overflow: hidden;
}
@media (min-width: 560px) { .mlt-about-stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .mlt-about-stats { grid-template-columns: repeat(4, 1fr); } }
.mlt-about-stat {
	padding: clamp(1.25rem, 2.5vw, 1.6rem);
	background: linear-gradient(160deg, var(--mlt-blue-900), #0e2b4d);
}
.mlt-about-stat__num {
	display: block;
	font-family: var(--mlt-font-display);
	font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.55rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: #fff;
}
.mlt-about-stat__label {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.7);
}
/* ---- Approach band (warm off-white) ---- */
.mlt-about-approach { background: var(--mlt-bg); }

/* ---- Closing CTA (navy gradient, like the homepage final CTA) ---- */
.mlt-about-cta {
	background: linear-gradient(135deg, var(--mlt-blue), var(--mlt-blue-900));
	color: #fff;
	text-align: center;
}
.mlt-about-cta__inner { max-width: 44rem; margin-inline: auto; }
.mlt-about-cta__heading {
	margin: 0 0 var(--mlt-s2);
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
}
.mlt-about-cta__sub {
	margin: 0 0 clamp(1.75rem, 3vw, 2.25rem);
	font-size: 1.1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

/* ===============================================================
   CONTACT PAGE  (scoped under .mlt-contact — never leaks site-wide)
   Shares the design system; the form card is the focal point.
   =============================================================== */

/* ---- Hero / intro band (warm off-white, centered) ---- */
.mlt-contact-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--mlt-bg);
	/* Tighter than the default section rhythm — it's just a heading + one line. */
	padding-block: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem) clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
}
.mlt-contact-hero::before {           /* soft brand glow, echoing the other heroes */
	content: "";
	position: absolute;
	z-index: 0;
	width: 40rem; height: 40rem;
	top: -20rem; left: 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, var(--mlt-blue), transparent 70%);
	opacity: 0.06;
	filter: blur(90px);
	pointer-events: none;
}
.mlt-contact-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 40rem;
	text-align: center;
}
.mlt-contact-hero__title {
	margin: 0;
	font-size: clamp(2.4rem, 1.6rem + 3vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--mlt-blue-900);
}
.mlt-contact-hero__intro {
	margin: clamp(1rem, 2vw, 1.5rem) auto 0;
	max-width: 36rem;
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.65;
	color: var(--mlt-ink-soft);
}

/* ---- Form band (soft blue) — two columns: form + reassurance panel ---- */
.mlt-contact-form {
	background: var(--mlt-band-blue);
	border-block: 1px solid var(--mlt-band-line);
}
.mlt-contact-form__grid {
	max-width: 62rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3.25rem);
	align-items: start;
}
@media (min-width: 860px) {
	.mlt-contact-form__grid { grid-template-columns: 1.05fr 0.85fr; }
}
.mlt-contact-form__card {
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: 20px;
	box-shadow: var(--mlt-shadow-lg);
	padding: clamp(1.75rem, 4vw, 2.75rem);
}

/* Right column — "what you can reach us about" reassurance panel */
.mlt-contact-aside__heading {
	margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem);
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.7rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--mlt-blue-900);
}
.mlt-contact-aside__list {
	display: grid;
	gap: clamp(1rem, 2vw, 1.4rem);
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	padding: 0;
	list-style: none;
}
.mlt-contact-point {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}
.mlt-contact-point__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--mlt-line);
	color: var(--mlt-blue);
	box-shadow: 0 4px 12px rgba(16, 78, 138, 0.08);
}
.mlt-contact-point__icon svg { width: 22px; height: 22px; }
.mlt-contact-point__text {
	font-size: 1rem;
	line-height: 1.5;
	color: var(--mlt-ink);
}
.mlt-contact-aside__note {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--mlt-ink-soft);
}

/* Right column — "before you write us" FAQ self-serve block + enroll line.
   Each is separated from the block above by a hairline divider. */
.mlt-contact-aside__block,
.mlt-contact-aside__enroll {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--mlt-band-line);
}
.mlt-contact-aside__subhead {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
	color: var(--mlt-blue-900);
}
.mlt-contact-aside__lead {
	margin: 0 0 0.9rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--mlt-ink-soft);
}
.mlt-contact-links {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mlt-contact-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--mlt-blue);
	text-decoration: none;
}
.mlt-contact-links a svg {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--mlt-blue);
	transition: transform .15s ease;
}
.mlt-contact-links a:hover span,
.mlt-contact-links a:focus-visible span { text-decoration: underline; }
.mlt-contact-links a:hover svg { transform: translateX(2px); }

.mlt-contact-aside__enroll {
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--mlt-ink-soft);
}
.mlt-contact-aside__enroll a {       /* secondary — deliberately NOT the orange CTA */
	font-weight: 700;
	color: var(--mlt-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mlt-contact-aside__enroll a:hover,
.mlt-contact-aside__enroll a:focus-visible { color: var(--mlt-blue-700); }

/* Privacy reassurance under the form */
.mlt-contact-form__privacy {
	margin: 1rem 0 0;
	text-align: center;
	font-size: 0.85rem;
	color: var(--mlt-ink-soft);
}
/* Required-field marker in the local placeholder (WPForms renders its own on prod) */
.mlt-cph-req { color: var(--mlt-orange-700); }

/* ===============================================================
   COURSES (CATALOG) PAGE  (scoped under .mlt-catalog — never leaks)
   Marketing/catalog landing that links out to the Tutor course; it
   never rebuilds the course, enrollment, or checkout.
   =============================================================== */

/* ---- Hero / catalog intro (warm off-white, centered) ---- */
.mlt-catalog-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--mlt-bg);
	padding-block: clamp(2.75rem, 2rem + 3.5vw, 4.5rem) clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}
.mlt-catalog-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	width: 44rem; height: 44rem;
	top: -22rem; left: 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, var(--mlt-blue), transparent 70%);
	opacity: 0.06;
	filter: blur(90px);
	pointer-events: none;
}
.mlt-catalog-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 46rem;
	text-align: center;
}
.mlt-catalog-hero__title {
	margin: 0;
	font-size: clamp(2.4rem, 1.6rem + 3vw, 3.5rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--mlt-blue-900);
}
.mlt-catalog-hero__intro {
	margin: clamp(1rem, 2vw, 1.5rem) auto 0;
	max-width: 40rem;
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.65;
	color: var(--mlt-ink-soft);
}

/* ---- Trust strip (warm off-white, white pill bar) ---- */
.mlt-catalog-trust {
	background: var(--mlt-bg);
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.mlt-catalog-trust__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem clamp(1.5rem, 3vw, 2.5rem);
	margin: 0;
	padding: clamp(1rem, 2vw, 1.4rem) clamp(1.25rem, 2.5vw, 2rem);
	list-style: none;
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: 16px;
	box-shadow: var(--mlt-shadow);
}
.mlt-catalog-trust__item {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--mlt-ink);
}
.mlt-catalog-trust__item svg { flex: none; width: 18px; height: 18px; color: var(--mlt-blue); }

/* ---- Flagship showcase (soft-blue band, white card) ---- */
.mlt-catalog-flagship {
	background: var(--mlt-band-blue);
	border-block: 1px solid var(--mlt-band-line);
}
.mlt-catalog-flagship__card {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: 22px;
	box-shadow: var(--mlt-shadow-lg);
}
@media (min-width: 880px) {
	.mlt-catalog-flagship__card { grid-template-columns: 1.6fr 1fr; }
}
.mlt-catalog-flagship__main { padding: clamp(1.75rem, 3.5vw, 3rem); }
.mlt-catalog-flagship__title {
	margin: 0 0 var(--mlt-s2);
	font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}
.mlt-catalog-flagship__desc {
	margin: 0 0 var(--mlt-s4);
	max-width: 48ch;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--mlt-ink-soft);
}
.mlt-catalog-specs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	margin: 0 0 var(--mlt-s4);
	padding: 0;
	list-style: none;
	background: var(--mlt-line);
	border: 1px solid var(--mlt-line);
	border-radius: 14px;
	overflow: hidden;
}
@media (min-width: 540px) {
	.mlt-catalog-specs { grid-template-columns: repeat(3, 1fr); }
}
.mlt-catalog-spec {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: clamp(0.9rem, 2vw, 1.15rem);
	background: #fff;
}
.mlt-catalog-spec__num {
	font-family: var(--mlt-font-display);
	font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--mlt-blue);
}
.mlt-catalog-spec__label {
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--mlt-ink-soft);
}
.mlt-catalog-flagship__cert {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	margin: 0;
	padding: clamp(1rem, 2vw, 1.25rem);
	background: var(--mlt-blue-50);
	border-radius: 14px;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--mlt-ink);
}
.mlt-catalog-flagship__cert-text { min-width: 0; }
.mlt-catalog-flagship__cert strong { color: var(--mlt-blue-900); }
.mlt-catalog-flagship__cert-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--mlt-line);
	color: var(--mlt-blue);
}
.mlt-catalog-flagship__cert-icon svg { width: 20px; height: 20px; }
.mlt-catalog-flagship__buy {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background: var(--mlt-blue-50);
	border-top: 1px solid var(--mlt-line);
}
.mlt-catalog-flagship__buy-inner {
	display: flex;
	flex-direction: column;
	gap: clamp(1.1rem, 2.5vw, 1.5rem);
}
@media (min-width: 880px) {
	.mlt-catalog-flagship__buy { border-top: 0; border-left: 1px solid var(--mlt-line); }
}
.mlt-catalog-price__amount {
	display: block;
	font-family: var(--mlt-font-display);
	font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}
.mlt-catalog-price__terms {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.9rem;
	color: var(--mlt-ink-soft);
}
.mlt-catalog-flagship__cta { width: 100%; }
.mlt-catalog-flagship__includes {
	display: grid;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.92rem;
	color: var(--mlt-ink);
}
.mlt-catalog-flagship__includes li { display: flex; align-items: flex-start; gap: 0.55rem; }
.mlt-catalog-flagship__includes svg { flex: none; width: 16px; height: 16px; margin-top: 0.15rem; color: var(--mlt-blue); }

/* ---- Local-only placeholder (replaced by the real WPForms form on prod) ---- */
.mlt-contact-form__placeholder { display: grid; gap: 1.25rem; }
.mlt-cph-field { display: grid; gap: 0.5rem; }
.mlt-cph-label {
	font-family: var(--mlt-font-display);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--mlt-blue-900);
}
.mlt-cph-input {
	height: 48px;
	border: 1px solid var(--mlt-line);
	border-radius: 10px;
	background: var(--mlt-bg);
}
.mlt-cph-input--area { height: 120px; }
.mlt-cph-button {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 0.25rem;
	padding: 0.8rem 1.8rem;
	border-radius: 999px;
	background: var(--mlt-orange);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 10px 22px rgba(242, 106, 27, 0.30);
}
.mlt-contact-form__preview-note {
	margin: 1.25rem 0 0;
	text-align: center;
	font-size: 0.8rem;
	color: var(--mlt-ink-soft);
	opacity: 0.85;
}

/* ===============================================================
   COURSES (CATALOG) — Phase 1 additions: sticky-rail support + the
   path-to-eligibility signature element.
   =============================================================== */

/* ---- Path to certification eligibility (warm off-white) ---- */
.mlt-catalog-path { background: var(--mlt-bg); }
.mlt-catalog-path__intro {
	max-width: 46rem;
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
}
.mlt-catalog-path__heading {
	margin: 0 0 var(--mlt-s3);
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}
.mlt-catalog-path__lead {
	margin: 0 auto;
	max-width: 40rem;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--mlt-ink-soft);
}
.mlt-catalog-steps { position: relative; }
.mlt-catalog-steps__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.25rem;
}
@media (min-width: 860px) {
	.mlt-catalog-steps__list {
		grid-template-columns: repeat(5, 1fr);
		gap: 1rem;
	}
}
.mlt-catalog-steps__line { display: none; }   /* connector only when steps sit in a row */
@media (min-width: 860px) {
	.mlt-catalog-steps__line {       /* draws left -> right through the five nodes */
		display: block;
		position: absolute;
		top: 27px;
		left: 10%;
		right: 10%;
		height: 2px;
		z-index: 0;
	}
	.mlt-catalog-steps__line path {
		fill: none;
		stroke: var(--mlt-blue-100);
		stroke-width: 2;
		stroke-linecap: round;
	}
}
.mlt-catalog-step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.mlt-catalog-step__num {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin-bottom: var(--mlt-s2);
	border-radius: 50%;
	background: linear-gradient(150deg, var(--mlt-blue), var(--mlt-blue-900));
	color: #fff;
	font-family: var(--mlt-font-display);
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 8px 18px rgba(16, 78, 138, 0.22);
}
.mlt-catalog-step__title {
	margin: 0 0 0.4rem;
	font-size: 1.1rem;
	color: var(--mlt-blue-900);
}
.mlt-catalog-step__desc {
	margin: 0;
	max-width: 18rem;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--mlt-ink-soft);
}
/* Unmissable honest clarifier — navy callout */
.mlt-catalog-clarifier {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	max-width: 52rem;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.4rem, 3vw, 2rem);
	background:
		radial-gradient(80% 120% at 0% 0%, rgba(59, 169, 224, 0.16), transparent 60%),
		linear-gradient(150deg, var(--mlt-blue-900), #0e2b4d);
	color: #fff;
	border-radius: 16px;
	box-shadow: var(--mlt-shadow-lg);
}
.mlt-catalog-clarifier__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}
.mlt-catalog-clarifier__icon svg { width: 22px; height: 22px; }
.mlt-catalog-clarifier__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}
.mlt-catalog-clarifier__text strong { color: #fff; }

/* ===============================================================
   COURSES (CATALOG) — Phase 2: curriculum, why-MLT, proof, audience
   =============================================================== */

/* Shared centered intro for the catalog content sections */
.mlt-catalog-curric__intro,
.mlt-catalog-why__intro,
.mlt-catalog-audience__intro {
	max-width: 46rem;
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
	text-align: center;
}
.mlt-catalog-curric__heading,
.mlt-catalog-why__heading,
.mlt-catalog-audience__heading {
	margin: 0 0 var(--mlt-s3);
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}
.mlt-catalog-curric__lead,
.mlt-catalog-why__lead,
.mlt-catalog-audience__lead {
	margin: 0 auto;
	max-width: 42rem;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--mlt-ink-soft);
}

/* ---- Curriculum explorer (soft-blue band, accordion) ---- */
.mlt-catalog-curric {
	background: var(--mlt-band-blue);
	border-block: 1px solid var(--mlt-band-line);
}
.mlt-catalog-curric__list {
	max-width: 52rem;
	margin: 0 auto;
	display: grid;
	gap: 0.75rem;
}
.mlt-catalog-curric-item {
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: var(--mlt-radius);
	box-shadow: 0 1px 2px rgba(16, 78, 138, 0.05);
	overflow: hidden;
}
.mlt-catalog-curric-q {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: clamp(1rem, 2vw, 1.25rem) clamp(1.1rem, 2.5vw, 1.5rem);
	cursor: pointer;
	list-style: none;
}
.mlt-catalog-curric-q::-webkit-details-marker { display: none; }
.mlt-catalog-curric-q:focus-visible {
	outline: 3px solid var(--mlt-blue);
	outline-offset: -3px;
	border-radius: var(--mlt-radius);
}
.mlt-catalog-curric-num {
	flex: none;
	font-family: var(--mlt-font-display);
	font-size: 1rem;
	font-weight: 800;
	color: var(--mlt-blue);
	font-variant-numeric: tabular-nums;
}
.mlt-catalog-curric-name {
	flex: 1;
	font-family: var(--mlt-font-display);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mlt-blue-900);
}
.mlt-catalog-curric-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--mlt-blue-50);
	color: var(--mlt-blue);
	transition: transform .25s ease;
}
.mlt-catalog-curric-icon svg { width: 16px; height: 16px; }
.mlt-catalog-curric-item[open] .mlt-catalog-curric-icon { transform: rotate(180deg); }
.mlt-catalog-curric-a { padding: 0 clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.1rem, 2.5vw, 1.4rem); }
.mlt-catalog-curric-a p {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--mlt-ink-soft);
}
@media (prefers-reduced-motion: no-preference) {
	.mlt-catalog-curric-item[open] .mlt-catalog-curric-a { animation: mlt-acc-in .28s ease; }
}
@keyframes mlt-acc-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* ---- Why MLT (warm off-white, centered-icon cards) ---- */
.mlt-catalog-why { background: var(--mlt-bg); }
.mlt-catalog-why__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 760px) {
	.mlt-catalog-why__grid { grid-template-columns: repeat(3, 1fr); }
}
.mlt-catalog-why-card {
	padding: clamp(1.5rem, 2.5vw, 2rem);
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: var(--mlt-radius);
	box-shadow: 0 1px 2px rgba(16, 78, 138, 0.05);
	text-align: center;
}
.mlt-catalog-why-card__icon {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--mlt-s2);
	border-radius: 14px;
	background: var(--mlt-blue-50);
	color: var(--mlt-blue);
}
.mlt-catalog-why-card__icon svg { width: 24px; height: 24px; }
.mlt-catalog-why-card__title { margin: 0 0 0.5rem; font-size: 1.15rem; color: var(--mlt-blue-900); }
.mlt-catalog-why-card__desc { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--mlt-ink-soft); }

/* ---- Proof (navy band, single attributed stat) ---- */
.mlt-catalog-proof {
	background:
		radial-gradient(70% 60% at 50% 0%, rgba(59, 169, 224, 0.14), transparent 70%),
		linear-gradient(160deg, var(--mlt-blue-900), #0e2b4d);
	color: #fff;
}
.mlt-catalog-proof__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3rem);
	align-items: center;
}
@media (min-width: 820px) {
	.mlt-catalog-proof__grid { grid-template-columns: 1.1fr 0.9fr; }
}
.mlt-catalog-proof .mlt-eyebrow { color: var(--mlt-sky); }
.mlt-catalog-proof__heading {
	margin: 0 0 var(--mlt-s3);
	font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.6rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: #fff;
}
.mlt-catalog-proof__body { margin: 0; max-width: 40rem; font-size: 1.05rem; line-height: 1.75; color: rgba(255, 255, 255, 0.82); }
.mlt-catalog-proof__stat {
	margin: 0;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	text-align: center;
}
.mlt-catalog-proof__label {
	display: inline-block;
	margin-bottom: 0.85rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}
.mlt-catalog-proof__num {
	display: block;
	font-family: var(--mlt-font-display);
	font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
}
.mlt-catalog-proof__caption { margin: 0.6rem 0 0; font-size: 0.95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
.mlt-catalog-proof__note {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.82rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.62);
}

/* ---- Who it's for (warm off-white, icon-left cards) ---- */
.mlt-catalog-audience { background: var(--mlt-bg); }
.mlt-catalog-audience__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2vw, 1.25rem);
	max-width: 56rem;
	margin: 0 auto;
}
@media (min-width: 680px) {
	.mlt-catalog-audience__grid { grid-template-columns: 1fr 1fr; }
}
.mlt-catalog-audience-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: clamp(1.25rem, 2.5vw, 1.6rem);
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: var(--mlt-radius);
	box-shadow: 0 1px 2px rgba(16, 78, 138, 0.05);
}
.mlt-catalog-audience-card__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--mlt-blue-50);
	color: var(--mlt-blue);
}
.mlt-catalog-audience-card__icon svg { width: 22px; height: 22px; }
.mlt-catalog-audience-card__title { margin: 0 0 0.3rem; font-size: 1.08rem; color: var(--mlt-blue-900); }
.mlt-catalog-audience-card__desc { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--mlt-ink-soft); }

/* ===============================================================
   COURSES (CATALOG) — Phase 3: final CTA + coming-soon
   =============================================================== */

/* ---- Risk-reversal + final CTA (navy gradient) ---- */
.mlt-catalog-final {
	background: linear-gradient(135deg, var(--mlt-blue), var(--mlt-blue-900));
	color: #fff;
	text-align: center;
}
.mlt-catalog-final__inner { max-width: 44rem; margin-inline: auto; }
.mlt-catalog-final__heading {
	margin: 0 0 var(--mlt-s2);
	font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
}
.mlt-catalog-final__sub {
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	font-size: 1.1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}
.mlt-catalog-final__actions { margin: 0 0 1.1rem; }
.mlt-catalog-final__reassure {
	margin: 0;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.75);
}
.mlt-catalog-final__reassure a {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mlt-catalog-final__reassure a:hover,
.mlt-catalog-final__reassure a:focus-visible { color: rgba(255, 255, 255, 0.82); }

/* ---- Coming-soon teasers (warm off-white, muted dashed cards) ---- */
.mlt-catalog-soon { background: var(--mlt-bg); }
.mlt-catalog-soon__intro {
	max-width: 46rem;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	text-align: center;
}
.mlt-catalog-soon__heading {
	margin: 0 0 var(--mlt-s3);
	font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}
.mlt-catalog-soon__lead {
	margin: 0 auto;
	max-width: 38rem;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--mlt-ink-soft);
}
.mlt-catalog-soon__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2vw, 1.25rem);
	max-width: 48rem;
	margin: 0 auto;
}
@media (min-width: 600px) {
	.mlt-catalog-soon__grid { grid-template-columns: 1fr 1fr; }
}
.mlt-catalog-soon-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: transparent;
	border: 1px dashed var(--mlt-line);   /* dashed reads as "not yet available" */
	border-radius: var(--mlt-radius);
}
.mlt-catalog-soon-card__badge {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--mlt-blue-50);
	color: var(--mlt-blue);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.mlt-catalog-soon-card__title { margin: 0; font-size: 1.2rem; color: var(--mlt-blue-900); }

/* ===============================================================
   LEGAL / POLICY PAGES  (scoped under .mlt-legal)
   Plain, legible text layout — narrow measure, generous spacing.
   Styles target the_content() output (headings, lists, links).
   =============================================================== */
.mlt-legal { background: var(--mlt-bg); }
.mlt-legal__inner {
	max-width: 46rem;            /* comfortable reading measure (~70ch) */
	margin: 0 auto;
	padding: clamp(2.5rem, 2rem + 4vw, 5rem) clamp(1rem, 0.5rem + 2.5vw, 2rem) clamp(3rem, 2rem + 5vw, 6rem);
}
.mlt-legal__head {
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
	padding-bottom: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
	border-bottom: 1px solid var(--mlt-line);
}
.mlt-legal__title {
	margin: 0;
	font-size: clamp(2rem, 1.5rem + 2vw, 2.85rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--mlt-blue-900);
}

/* Body — the_content() output */
.mlt-legal__body {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--mlt-ink);
}
.mlt-legal__body > :first-child { margin-top: 0; }
.mlt-legal__body .mlt-legal-dates {
	margin-bottom: 2em;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--mlt-ink-soft);
}
.mlt-legal__body .mlt-legal-dates strong { color: var(--mlt-ink); }
.mlt-legal__body p { margin: 0 0 1.15em; }
.mlt-legal__body h2 {
	margin: 2.25em 0 0.6em;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--mlt-blue-900);
}
.mlt-legal__body h3 {
	margin: 1.8em 0 0.5em;
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mlt-blue-900);
}
.mlt-legal__body ul,
.mlt-legal__body ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.mlt-legal__body li { margin: 0 0 0.5em; }
.mlt-legal__body li::marker { color: var(--mlt-ink-soft); }
.mlt-legal__body a {
	color: var(--mlt-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.mlt-legal__body a:hover,
.mlt-legal__body a:focus-visible { color: var(--mlt-blue-700); }
.mlt-legal__body strong { color: var(--mlt-blue-900); font-weight: 700; }
.mlt-legal__body hr {
	margin: 2.5em 0;
	border: 0;
	border-top: 1px solid var(--mlt-line);
}
/* Contact / address blocks read cleanly without italics */
.mlt-legal__body address {
	font-style: normal;
	line-height: 1.7;
	color: var(--mlt-ink-soft);
}
.mlt-legal__body blockquote {
	margin: 0 0 1.15em;
	padding: 0.25em 0 0.25em 1.1em;
	border-left: 3px solid var(--mlt-line);
	color: var(--mlt-ink-soft);
}

/* ===============================================================
   HEADER ACCOUNT CONTROL  (.mlt-account)
   Avatar chip + name pill that opens a compact icon dropdown on
   desktop and a distinct card in the off-canvas menu. Explicit
   line-heights below override the ~80px Astra forces on header
   menu items (which otherwise inflates the dropdown).
   =============================================================== */
.mlt-account { font-family: var(--mlt-font); }

/* Avatar — initials in a brand-gradient disc */
.mlt-account__avatar {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--mlt-blue), var(--mlt-blue-900));
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
}

/* Toggle (logged-in) / sign-in link (logged-out) share a pill */
.mlt-account__toggle,
.mlt-account--out .mlt-account__signin {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.3rem 0.65rem 0.3rem 0.4rem;
	background: none;
	border: 0;
	border-radius: 999px;
	font: inherit;
	line-height: 1.2;
	color: var(--mlt-blue-900);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease;
}
.mlt-account__toggle:hover,
.mlt-account.is-open .mlt-account__toggle,
.mlt-account--out .mlt-account__signin:hover { background: var(--mlt-blue-50); }
.mlt-account__greeting {
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--mlt-blue-900);
}
.mlt-account__name { font-weight: 700; }
.mlt-account__caret {
	flex: none;
	width: 13px;
	height: 13px;
	color: var(--mlt-ink-soft);
	transition: transform .2s ease;
}
.mlt-account.is-open .mlt-account__caret { transform: rotate(180deg); }
.mlt-account--out .mlt-account__ic { flex: none; width: 20px; height: 20px; color: var(--mlt-blue); }

/* Dropdown */
.mlt-account__menu {
	display: none;
	min-width: 12rem;
	padding: 0.35rem;
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: 14px;
	box-shadow: var(--mlt-shadow-lg);
	line-height: 1.3;
}
.mlt-account.is-open .mlt-account__menu { display: block; }
.mlt-account__item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 0.65rem;
	border-radius: 9px;
	color: var(--mlt-ink);
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}
.mlt-account__item .mlt-account__ic { flex: none; width: 17px; height: 17px; color: var(--mlt-ink-soft); }
.mlt-account__item:hover,
.mlt-account__item:focus-visible { background: var(--mlt-blue-50); color: var(--mlt-blue-900); }
.mlt-account__item:hover .mlt-account__ic,
.mlt-account__item:focus-visible .mlt-account__ic { color: var(--mlt-blue); }
.mlt-account__item--signout {
	margin-top: 0.3rem;
	padding-top: 0.65rem;
	border-top: 1px solid var(--mlt-line);
}

.mlt-account__toggle:focus-visible,
.mlt-account__item:focus-visible,
.mlt-account__signin:focus-visible {
	outline: 3px solid var(--mlt-blue);
	outline-offset: 2px;
}

/* The account name is a click-to-open button, so a mouse click would otherwise
   leave that focus ring "stuck" as a blue oval around the name. Drop the ring
   for mouse/pointer focus and while the menu is open (the rotated caret + open
   panel already signal state). A keyboard user tabbing to the CLOSED button
   still gets the ring above, so accessibility is preserved. */
.mlt-account__toggle:focus:not(:focus-visible),
.mlt-account--out .mlt-account__signin:focus:not(:focus-visible),
.mlt-account.is-open .mlt-account__toggle:focus {
	outline: none;
}

/* ---- Header logo lockup: globe image + live "MLT Academy" + tagline ----
   Replaces the baked-in raster logo so the tagline stays crisp and legible at
   any size. Scoped to .mlt-logo; revert by removing the get_custom_logo filter. */
.mlt-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
	line-height: 1;
}
.mlt-logo__globe {
	height: 52px !important;
	width: auto !important;
	max-width: none !important;
	flex: none;
	display: block;
}
.mlt-logo__text {
	display: flex;
	flex-direction: column;
	gap: 0.14rem;
	white-space: nowrap;
}
.mlt-logo__name {
	font-family: var(--mlt-font-display, 'Sora', sans-serif);
	font-weight: 800;
	font-size: 1.8rem;
	letter-spacing: -0.01em;
	line-height: 1;
}
.mlt-logo__mlt { color: var(--mlt-orange); }
.mlt-logo__academy { color: var(--mlt-blue); }
.mlt-logo__tagline {
	font-family: var(--mlt-font, 'Inter', sans-serif);
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--mlt-ink, #334155);
}
@media (max-width: 600px) {
	.mlt-logo__globe { height: 42px !important; }
	.mlt-logo__name { font-size: 1.4rem; }
	.mlt-logo__tagline { font-size: 0.6rem; letter-spacing: 0.03em; }
}

/* ---- Desktop: inline beside Enroll, dropdown anchored under the name ---- */
#ast-desktop-header .mlt-account {
	position: absolute;
	right: var(--mlt-account-right, 6.5rem);   /* clears the fixed-width Enroll button to its right */
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
}
#ast-desktop-header .mlt-account__menu {
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	z-index: 100;
}

/* ---- Off-canvas mobile menu: one strong account card ----
   A single card: tinted profile header (avatar + two-line greeting) over
   full-width action rows split by a hairline. No nested boxes. */
#ast-hf-mobile-menu .mlt-account {
	position: static;
	display: block;
	margin: 1.25rem 1.25rem 0.5rem;
}
#ast-hf-mobile-menu .mlt-account--in {
	background: #fff;
	border: 1px solid var(--mlt-line);
	border-radius: 16px;
	box-shadow: 0 6px 20px rgba(16, 78, 138, 0.07);
	overflow: hidden;
}

/* Profile header band */
#ast-hf-mobile-menu .mlt-account__toggle {
	width: 100%;
	justify-content: flex-start;
	gap: 0.85rem;
	padding: 0.9rem 1rem;
	background: var(--mlt-blue-50);
	border-radius: 0;
	pointer-events: none;   /* a heading; the rows below are the actions */
}
#ast-hf-mobile-menu .mlt-account__avatar { width: 44px; height: 44px; font-size: 0.92rem; }
#ast-hf-mobile-menu .mlt-account--in .mlt-account__greeting {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.05rem;
}
#ast-hf-mobile-menu .mlt-account__hi { font-size: 0.78rem; font-weight: 600; color: var(--mlt-ink-soft); }
#ast-hf-mobile-menu .mlt-account__name { font-size: 1.08rem; font-weight: 700; color: var(--mlt-blue-900); }
#ast-hf-mobile-menu .mlt-account__caret { display: none; }

/* Action rows */
#ast-hf-mobile-menu .mlt-account__menu {
	display: block;
	position: static;
	min-width: 0;
	margin: 0;
	padding: 0.35rem;
	background: none;
	border: 0;
	box-shadow: none;
}
#ast-hf-mobile-menu .mlt-account__item {
	gap: 0.85rem;
	min-height: 50px;
	margin: 0;
	padding: 0.8rem 0.75rem;
	background: none;
	border: 0;
	border-radius: 10px;
	font-size: 1rem;
	color: var(--mlt-blue-900);
}
#ast-hf-mobile-menu .mlt-account__item .mlt-account__ic { width: 19px; height: 19px; color: var(--mlt-blue); }
#ast-hf-mobile-menu .mlt-account__item--signout {
	margin-top: 0.15rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--mlt-line);
	border-radius: 0 0 10px 10px;
	color: var(--mlt-ink);
}
#ast-hf-mobile-menu .mlt-account__item:active { background: var(--mlt-blue-50); }

/* Logged-out — a single clean tappable sign-in row */
#ast-hf-mobile-menu .mlt-account--out .mlt-account__signin {
	width: 100%;
	justify-content: flex-start;
	gap: 0.7rem;
	min-height: 50px;
	padding: 0.8rem 0.9rem;
	background: var(--mlt-blue-50);
	border: 1px solid var(--mlt-line);
	border-radius: 12px;
}

/* ============================================================
   MOBILE OFF-CANVAS MENU — full layout (mobile only)
   Astra renders the mobile menu as "dropdown" content
   (.ast-mobile-header-content): an absolutely-positioned, content-height
   panel — which is why the page (home hero) used to show through below it.

   Design: a full-height, opaque drawer. Nav links sit as even rows at the
   top; the account block is grouped DIRECTLY under the nav as a contained
   module — NOT pinned to the far bottom. (Pinning hid the Sign-out row
   behind the Tutor LMS fixed bottom bar and forced scrolling; with few menu
   items, keeping everything top-grouped means every action is visible at a
   glance.) Generous bottom padding keeps content clear of that bottom bar.
   All scoped to the mobile header content / mobile menu id — desktop header
   is never touched.
   ============================================================ */

/* Full-height, opaque panel (open state only — matches Astra's display:block
   selector, so the menu still hides when closed and no page shows through). */
.ast-main-header-nav-open.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content {
	min-height: calc(100vh - 80px);
	min-height: calc(100dvh - 80px);
	background: #fff;
}

/* Menu list: top-aligned, even rhythm. Bottom padding clears the Tutor LMS
   fixed bottom bar (~64px) plus the device safe-area so nothing hides under it. */
#ast-hf-mobile-menu {
	margin: 0;
	padding: 0.4rem 0 calc(72px + env(safe-area-inset-bottom, 0px));
	list-style: none;
}

/* ---- Nav links: designed rows (leading icon + label), not plain text ----
   Larger type, comfortable tap height, even rhythm. The leading icons (added
   for the mobile menu only) share the account card's stroke style and left
   alignment, so the nav and the account card read as one designed surface. */
#ast-hf-mobile-menu > .menu-item {
	margin: 0;
	border: 0;
}
#ast-hf-mobile-menu > .menu-item > .menu-link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-height: 56px;
	margin: 2px 0.75rem;
	padding: 0.7rem 1.1rem;
	border-radius: 14px;
	font-family: var(--mlt-font);
	font-size: 1.15rem;            /* ~18.5px — deliberate, scannable */
	font-weight: 500;
	line-height: 1.25;
	color: var(--mlt-blue-900);
	transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
/* Leading icon — muted by default; aligned with the account card's icons. */
#ast-hf-mobile-menu .mlt-nav-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	color: var(--mlt-ink-soft);
	transition: color 0.16s ease;
}
#ast-hf-mobile-menu .mlt-nav-ic svg { width: 23px; height: 23px; }
#ast-hf-mobile-menu .mlt-nav-txt { flex: 1 1 auto; min-width: 0; }

/* Tap / hover feedback */
#ast-hf-mobile-menu > .menu-item > .menu-link:hover,
#ast-hf-mobile-menu > .menu-item > .menu-link:active {
	background: var(--mlt-blue-50);
}

/* Current page — tinted fill, semibold, orange left accent bar + orange icon
   (orange used sparingly, purely to mark "you are here"). */
#ast-hf-mobile-menu > .menu-item.current-menu-item > .menu-link,
#ast-hf-mobile-menu > .menu-item.current_page_item > .menu-link,
#ast-hf-mobile-menu > .menu-item.current-menu-ancestor > .menu-link {
	background: var(--mlt-blue-50);
	color: var(--mlt-blue-900);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--mlt-orange);
}
#ast-hf-mobile-menu > .menu-item.current-menu-item > .menu-link .mlt-nav-ic,
#ast-hf-mobile-menu > .menu-item.current_page_item > .menu-link .mlt-nav-ic,
#ast-hf-mobile-menu > .menu-item.current-menu-ancestor > .menu-link .mlt-nav-ic {
	color: var(--mlt-orange);
}

/* ---- Account: a contained module grouped right under the nav ----
   A single bordered card: tinted profile header (avatar + greeting) over
   full-width action rows split by a hairline. Anchored under the nav with a
   small gap — visible immediately, no scrolling, no collision with the
   bottom bar. */
#ast-hf-mobile-menu .mlt-account {
	margin: 1.1rem 0.75rem 0;
	padding: 0;
	border: 1px solid var(--mlt-line);
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
}
#ast-hf-mobile-menu .mlt-account--in,
#ast-hf-mobile-menu .mlt-account--out {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	overflow: visible;
}

/* Profile header: tinted band (avatar + two-line greeting). */
#ast-hf-mobile-menu .mlt-account__toggle {
	width: 100%;
	justify-content: flex-start;
	gap: 0.9rem;
	padding: 0.95rem 1.1rem;
	background: var(--mlt-blue-50);
	border-radius: 0;
	pointer-events: none;          /* a heading; the rows below are the actions */
}
#ast-hf-mobile-menu .mlt-account__avatar { width: 46px; height: 46px; font-size: 0.95rem; }
#ast-hf-mobile-menu .mlt-account--in .mlt-account__greeting {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.05rem;
}
#ast-hf-mobile-menu .mlt-account__hi { font-size: 0.78rem; font-weight: 600; color: var(--mlt-ink-soft); }
#ast-hf-mobile-menu .mlt-account__name { font-size: 1.1rem; font-weight: 700; color: var(--mlt-blue-900); }

/* Action rows: clean full-width rows divided by a hairline. */
#ast-hf-mobile-menu .mlt-account__menu {
	display: block;
	position: static;
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}
#ast-hf-mobile-menu .mlt-account__item {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 0.9rem 1.1rem;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: 1.04rem;
	color: var(--mlt-blue-900);
}
#ast-hf-mobile-menu .mlt-account__item--signout {
	margin-top: 0;
	padding-top: 0.9rem;
	border-top: 1px solid var(--mlt-line);
	border-radius: 0;
	color: var(--mlt-ink);
}
#ast-hf-mobile-menu .mlt-account__item:active { background: var(--mlt-blue-50); }

/* Logged-out — one clean full-width sign-in row in the same slot. */
#ast-hf-mobile-menu .mlt-account--out .mlt-account__signin {
	width: 100%;
	justify-content: flex-start;
	gap: 0.9rem;
	min-height: 54px;
	padding: 0.95rem 1.1rem;
	background: var(--mlt-blue-50);
	border: 0;
	border-radius: 0;
	font-size: 1.04rem;
	font-weight: 600;
	color: var(--mlt-blue-900);
}

/* ---- Refined entrance motion ----
   As the drawer opens, the panel fades in and its rows stagger up — fast
   (≤300ms) and subtle. Scoped to the open state so it replays on every open.
   Fully disabled under prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
	.ast-main-header-nav-open.ast-header-break-point .ast-mobile-header-content {
		animation: mltDrawerFade 220ms ease both;
	}
	.ast-main-header-nav-open.ast-header-break-point #ast-hf-mobile-menu > .menu-item:not(.mlt-account),
	.ast-main-header-nav-open.ast-header-break-point #ast-hf-mobile-menu > .mlt-account {
		animation: mltMenuRowIn 300ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}
	.ast-main-header-nav-open.ast-header-break-point #ast-hf-mobile-menu > .menu-item:nth-child(1) { animation-delay: 40ms; }
	.ast-main-header-nav-open.ast-header-break-point #ast-hf-mobile-menu > .menu-item:nth-child(2) { animation-delay: 75ms; }
	.ast-main-header-nav-open.ast-header-break-point #ast-hf-mobile-menu > .menu-item:nth-child(3) { animation-delay: 110ms; }
	.ast-main-header-nav-open.ast-header-break-point #ast-hf-mobile-menu > .menu-item:nth-child(4) { animation-delay: 145ms; }
	.ast-main-header-nav-open.ast-header-break-point #ast-hf-mobile-menu > .menu-item:nth-child(5) { animation-delay: 180ms; }
	.ast-main-header-nav-open.ast-header-break-point #ast-hf-mobile-menu > .menu-item:nth-child(6) { animation-delay: 215ms; }
	.ast-main-header-nav-open.ast-header-break-point #ast-hf-mobile-menu > .mlt-account { animation-delay: 245ms; }
}
@keyframes mltDrawerFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes mltMenuRowIn {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}