/**
 * Two independent things live in this file, both enqueued only on their
 * own page (see functions.php, umd_enqueue_assets()) and never on any
 * other route:
 *
 * 1. .umd-maya-page* — MAYA OS's own, fully self-contained design system
 *    (dark navy #071827 / gold #C9A227 / warm white), matching the
 *    reference product page's visual hierarchy. Used only by
 *    render_maya_os().
 * 2. .umd-live-lab-page* / .umd-list--check — Live Training's own small
 *    additions on top of the sitewide .umd-hero2 / .umd-card-grid /
 *    .umd-section--dark components it otherwise reuses. Used only by
 *    render_live_lab().
 *
 * Every class in both groups is prefixed uniquely to its own page, so
 * neither page's styling can leak into the other or into any other route.
 */

/* ------------------------------------------------------- checkmark list */
.umd-list--check {
	list-style: none;
	padding: 0;
}

.umd-list--check li {
	position: relative;
	padding-left: var(--umd-s6);
}

/* Darker than the sitewide --umd-gold on purpose: this sits on white/ivory
   card backgrounds, where the lighter gold token fails contrast. */
.umd-list--check li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: #a3822f;
	font-weight: 700;
}

/* Cross-marker variant — the visual opposite of the checkmark list, used
   for "who this is NOT for" content so the two lists read as a comparison
   rather than two identical bullet styles. */
.umd-list--cross li::before {
	content: "\2715";
	position: absolute;
	left: 0;
	color: rgba(11, 31, 51, 0.4);
	font-weight: 700;
}

/* Icon variant: a real inline SVG replaces the ::before glyph, so the
   checkmark/cross pseudo-element is turned off and the list item switches
   to a flex row instead of text-indent. */
.umd-list--icon li {
	display: flex;
	align-items: flex-start;
	gap: var(--umd-s3);
	padding-left: 0;
}

.umd-list--icon li::before {
	content: none;
}

/* ====================================================================
   MAYA OS page — independent design system
   ==================================================================== */

.umd-maya-page {
	--umd-maya-navy: #071827;
	--umd-maya-gold: #c9a227;
	--umd-maya-warm-white: #f8f5ee;
	--umd-maya-space: clamp(3rem, 6vw, 6rem);

	background: var(--umd-maya-warm-white);
	color: var(--umd-maya-navy);
}

.umd-maya-page__section {
	max-width: var(--umd-content);
	margin: 0 auto;
	padding: var(--umd-maya-space) var(--umd-s5);
}

.umd-maya-page__section--dark {
	max-width: none;
	background: var(--umd-maya-navy);
	color: var(--umd-maya-warm-white);
	text-align: center;
}

/* Explicit, not inherited: theme.json sets a sitewide navy heading colour
   via :where(h1..h6), and an explicitly matched rule always wins over
   inheritance regardless of specificity — so headings on a dark background
   need their own colour declared here or they render navy-on-navy. */
.umd-maya-page__section--dark .umd-maya-page__heading {
	margin-left: auto;
	margin-right: auto;
	color: #ffffff;
}

.umd-maya-page__heading {
	max-width: 720px;
	margin: 0 0 var(--umd-s6);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.25;
	font-weight: 700;
}

.umd-maya-page__body {
	max-width: var(--umd-reading);
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.75;
}

.umd-maya-page__problem {
	text-align: center;
}

.umd-maya-page__problem .umd-maya-page__heading,
.umd-maya-page__problem .umd-maya-page__body {
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------ hero */
.umd-maya-page__hero {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "visual" "text";
	gap: var(--umd-s7);
	padding: var(--umd-s8) var(--umd-s5);
	background: var(--umd-maya-navy);
	color: var(--umd-maya-warm-white);
}

.umd-maya-page__hero-text {
	grid-area: text;
	max-width: 560px;
}

.umd-maya-page__hero-visual {
	grid-area: visual;
}

.umd-maya-page__kicker {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--umd-maya-gold);
}

.umd-maya-page__eyebrow {
	margin: var(--umd-s2) 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(248, 245, 238, 0.75);
}

/* color explicit, not inherited — see the comment on
   .umd-maya-page__section--dark .umd-maya-page__heading above; the same
   sitewide navy heading rule applies to h1 and was making this
   illegible against the dark hero background. */
.umd-maya-page__headline {
	margin: var(--umd-s5) 0 0;
	padding-top: var(--umd-s5);
	border-top: 1px solid rgba(201, 162, 39, 0.4);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.2;
	font-weight: 700;
	color: #ffffff;
}

.umd-maya-page__sub {
	margin: var(--umd-s5) 0 0;
	font-size: 1.125rem;
	line-height: 1.75;
	color: rgba(248, 245, 238, 0.9);
}

/* Names who benefits, set apart from the sub-headline with a gold rule so
   "who this is for" reads as its own answer, not a continuation of the
   value proposition sentence above it. */
.umd-maya-page__audience {
	margin: var(--umd-s5) 0 0;
	padding-left: var(--umd-s4);
	border-left: 2px solid var(--umd-maya-gold);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(248, 245, 238, 0.8);
}

.umd-maya-page__creator {
	margin: var(--umd-s6) 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(248, 245, 238, 0.75);
}

.umd-maya-page__creator strong {
	color: var(--umd-maya-warm-white);
}

.umd-maya-page__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--umd-s4);
	margin-top: var(--umd-s6);
}

.umd-maya-page__portrait {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	display: block;
	border-radius: 12px;
	object-fit: cover;
	aspect-ratio: 4 / 5;
}

@media (min-width: 782px) {
	.umd-maya-page__hero {
		grid-template-columns: 6fr 5fr;
		grid-template-areas: "text visual";
		align-items: center;
		padding: var(--umd-s9, 96px) var(--umd-s6);
	}
}

/* Premium button: gold on dark, navy on the warm-white body sections. */
.umd-maya-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--umd-tap, 44px);
	padding: var(--umd-s4) var(--umd-s7);
	border-radius: 6px;
	background: var(--umd-maya-gold);
	color: var(--umd-maya-navy);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color 150ms ease;
}

.umd-maya-btn:hover {
	background: #e0bc3d;
}

/* Secondary hero CTA: ghost button on the dark hero background, so the
   gold-filled primary CTA keeps visual priority. */
.umd-maya-btn--outline {
	background: transparent;
	color: var(--umd-maya-warm-white);
	border: 2px solid rgba(248, 245, 238, 0.55);
}

.umd-maya-btn--outline:hover {
	background: rgba(248, 245, 238, 0.08);
	border-color: var(--umd-maya-warm-white);
}

.umd-maya-page__section:not(.umd-maya-page__section--dark) .umd-maya-btn {
	background: var(--umd-maya-navy);
	color: var(--umd-maya-warm-white);
}

.umd-maya-page__section:not(.umd-maya-page__section--dark) .umd-maya-btn:hover {
	background: #12293d;
}

/* -------------------------------------------------------------- pipeline */
/* Business Context -> Data Layer -> AI Intelligence -> Commercial
   Recommendation -> Business Action. A single vertical flow at every
   viewport — the sequence is the point, not a grid. */
.umd-maya-page__flow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--umd-s3);
	max-width: 480px;
	margin: 0 auto;
}

.umd-maya-page__flow-step {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--umd-s3);
	width: 100%;
	margin: 0;
	padding: var(--umd-s5) var(--umd-s5);
	border: 1px solid rgba(7, 24, 39, 0.14);
	border-radius: 10px;
	background: var(--umd-white);
	text-align: center;
	font-weight: 700;
	color: var(--umd-maya-navy);
}

.umd-maya-page__flow-icon {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--umd-maya-gold);
}

.umd-maya-page__flow-arrow {
	font-size: 1.5rem;
	line-height: 1;
	color: var(--umd-maya-gold);
}

/* ---------------------------------------------------------- system diagram */
/* Input -> Intelligence -> Output. Three big blocks rather than a step
   list — the highest-level "how it works" statement on the page, so it
   gets its own dark section and its own visual language (blocks joined by
   an arrow, not a card grid). Stacks to a vertical column with a rotated
   arrow below 782px instead of shrinking three wide blocks into a narrow
   viewport. */
.umd-maya-page__system-diagram {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--umd-s4);
	max-width: 900px;
	margin: 0 auto;
}

.umd-maya-page__system-block {
	padding: var(--umd-s6) var(--umd-s5);
	border: 1px solid rgba(248, 245, 238, 0.18);
	border-radius: 12px;
	background: rgba(248, 245, 238, 0.04);
	text-align: center;
}

/* Intelligence — the block doing the work, not just passing data through,
   so it carries the gold accent the other two blocks don't. */
.umd-maya-page__system-block--core {
	border-color: var(--umd-maya-gold);
	background: rgba(201, 162, 39, 0.1);
}

.umd-maya-page__system-icon {
	width: 30px;
	height: 30px;
	margin-bottom: var(--umd-s3);
	color: var(--umd-maya-gold);
}

.umd-maya-page__system-label {
	margin: 0 0 var(--umd-s2);
	font-size: 1.125rem;
	font-weight: 700;
	color: #ffffff;
}

.umd-maya-page__system-body {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: rgba(248, 245, 238, 0.8);
}

.umd-maya-page__system-arrow {
	align-self: center;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--umd-maya-gold);
	/* Down arrow on the stacked mobile/tablet layout... */
	transform: rotate(90deg);
}

@media (min-width: 782px) {
	.umd-maya-page__system-diagram {
		flex-direction: row;
		align-items: stretch;
	}

	.umd-maya-page__system-block {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.umd-maya-page__system-arrow {
		/* ...horizontal (unrotated) once the diagram lays out in a row. */
		transform: none;
	}
}

/* ------------------------------------------------------------- use cases */
/* Realistic use-case panels: what MAYA OS looks at and what it surfaces,
   per business question. Styled as a compact mockup tile (header bar +
   two-row spec list) rather than a plain card, so it visually differs from
   the capability grid immediately below it. */
.umd-maya-page__usecases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--umd-s5);
}

.umd-maya-page__usecase {
	padding: var(--umd-s5);
	border: 1px solid rgba(7, 24, 39, 0.12);
	border-radius: 10px;
	background: var(--umd-white);
	overflow: hidden;
}

.umd-maya-page__usecase-head {
	display: flex;
	align-items: center;
	gap: var(--umd-s3);
	margin: 0 0 var(--umd-s4);
	padding-bottom: var(--umd-s4);
	border-bottom: 1px solid rgba(7, 24, 39, 0.1);
}

.umd-maya-page__usecase-icon {
	flex: none;
	width: 24px;
	height: 24px;
	color: #a3822f;
}

.umd-maya-page__usecase-title {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--umd-maya-navy);
}

.umd-maya-page__usecase-spec {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--umd-s2) var(--umd-s3);
	margin: 0;
}

.umd-maya-page__usecase-spec dt {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(7, 24, 39, 0.5);
	white-space: nowrap;
}

.umd-maya-page__usecase-spec dd {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--umd-maya-navy);
}

/* ---------------------------------------------------------------- cards */
.umd-maya-page__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: var(--umd-s5);
}

.umd-maya-page__card {
	padding: var(--umd-s6) var(--umd-s5);
	border: 1px solid rgba(7, 24, 39, 0.12);
	border-radius: 10px;
	background: var(--umd-white);
}

.umd-maya-icon {
	width: 32px;
	height: 32px;
	margin-bottom: var(--umd-s4);
	color: #a3822f;
}

.umd-maya-page__card-title {
	margin: 0 0 var(--umd-s2);
	font-size: 1.0625rem;
}

.umd-maya-page__card-body {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--umd-charcoal);
}

.umd-maya-page__final {
	text-align: center;
}

.umd-maya-page__final .umd-maya-page__heading {
	margin-left: auto;
	margin-right: auto;
}

/* ====================================================================
   Live Training page — additions on top of the sitewide .umd-hero2 /
   .umd-card-grid / .umd-section--dark components
   ==================================================================== */

/* ---------------------------------------------------------------- hero */
/* Two-column premium hero: text column with a fluid, clamp()-sized
   headline and fact chips next to the CTA; a decorative layered-card
   visual fills the right column instead of leaving it empty navy space
   (the old .umd-hero2 on this page was a single centred text column on a
   1220px-wide dark band, roughly half of it empty at desktop widths).
   Single column, text first, on mobile -- the hook and CTA must be the
   first thing read, not the graphic. */
.umd-live-lab-page__hero {
	background: var(--umd-navy);
	color: var(--umd-ivory);
	overflow: hidden;
}

.umd-live-lab-page__hero-inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--umd-s7);
	max-width: var(--umd-content);
	margin: 0 auto;
	padding: var(--umd-s8) var(--umd-s5);
}

.umd-live-lab-page__hero-text {
	max-width: var(--umd-reading);
}

.umd-live-lab-page__hero-kicker {
	margin: 0 0 var(--umd-s4);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--umd-gold);
}

/* Fluid so a long Thai or English headline never forces horizontal
   pressure at 320px, and never balloons past a sensible cap at 1440px. */
.umd-live-lab-page__hero-headline {
	margin: 0;
	font-size: clamp(1.75rem, 1.35rem + 2.4vw, 2.75rem);
	line-height: 1.25;
	font-weight: 700;
	color: #ffffff;
}

.umd-live-lab-page__hero-lead {
	max-width: 46ch;
	margin: var(--umd-s5) 0 0;
	font-size: clamp(1rem, 0.94rem + 0.35vw, 1.125rem);
	line-height: 1.75;
	color: rgba(247, 243, 234, 0.88);
}

.umd-live-lab-page__hero-ctas {
	margin: var(--umd-s6) 0 0;
}

/* Primary CTA on this dark hero: solid gold background, dark navy text,
   min 48px tap height. The sitewide .umd-btn--primary default (navy
   background, ivory text -- correct on light sections) rendered as a
   navy button on this hero's navy background, close to zero contrast
   with its surroundings, which read as plain text rather than a
   clickable control. Scoped to this hero only. */
.umd-live-lab-page__hero-ctas .umd-btn--primary {
	width: 100%;
	gap: var(--umd-s3);
	min-height: 48px;
	padding: var(--umd-s4) var(--umd-s6);
	background: var(--umd-gold);
	color: var(--umd-navy);
	font-weight: 700;
}

.umd-live-lab-page__hero-ctas .umd-btn--primary:hover {
	background: #e0bc3d;
	color: var(--umd-navy);
}

.umd-live-lab-page__hero-ctas .umd-btn--primary:focus-visible {
	outline: 3px solid var(--umd-ivory);
	outline-offset: 2px;
}

@media (min-width: 480px) {
	.umd-live-lab-page__hero-ctas .umd-btn--primary {
		width: auto;
	}
}

.umd-live-lab-page__cta-arrow {
	transition: transform 150ms ease;
}

.umd-btn:hover .umd-live-lab-page__cta-arrow {
	transform: translateX(3px);
}

.umd-live-lab-page__hero-cta-support {
	margin: var(--umd-s3) 0 0;
	font-size: 0.875rem;
	color: rgba(247, 243, 234, 0.75);
}

/* Fact pills, in an explicit grid rather than a loosely wrapped flex row
   -- five items (date/time/price/replay/e-book) did not divide evenly
   across a flex-wrap row, so the fifth (e-book) always fell alone onto
   its own line with no intentional treatment. Shared with the price
   section's own four-item fact strip further down the page (see
   .umd-live-lab-page__fact-grid--offer), so both use one consistent
   pill component. */
.umd-live-lab-page__fact-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--umd-s3);
	margin: var(--umd-s5) 0 0;
}

.umd-live-lab-page__fact-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--umd-s2);
	height: 100%;
	padding: var(--umd-s3) var(--umd-s4);
	border: 1px solid rgba(247, 243, 234, 0.22);
	border-radius: 10px;
	background: rgba(247, 243, 234, 0.06);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--umd-ivory);
	text-align: center;
}

.umd-live-lab-page__fact-pill-icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--umd-gold);
}

/* Hero's fact grid has 5 items: 2 columns on mobile with the 5th
   (e-book) spanning the full row instead of sitting alone; 3 columns at
   600px+ with the 5th spanning the remaining two columns on its own row.
   Either way the last pill always has an intentional, full-width slot. */
.umd-live-lab-page__hero-text .umd-live-lab-page__fact-pill:last-child {
	grid-column: 1 / -1;
}

@media (min-width: 600px) {
	.umd-live-lab-page__hero-text .umd-live-lab-page__fact-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.umd-live-lab-page__hero-text .umd-live-lab-page__fact-pill:last-child {
		grid-column: span 2;
	}
}

/* Decorative layered-card visual: manual work -> AI workflow -> clearer
   decisions -> business results. Vertical at every width by default, so
   it never needs its own responsive layout; the desktop grid just gives
   it a column to sit in. */
.umd-live-lab-page__hero-visual {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--umd-s3);
	max-width: 360px;
	width: 100%;
	margin: 0 auto;
}

/* Every card is the same width by construction: no per-card margin
   overrides. The previous version staggered cards with alternating
   left/right margins for a "layered" feel, which subtracted a different
   amount of width from each card (measured live: 352px / 384px / 352px /
   384px) -- the actual cause of the reported misalignment. The one
   allowed difference between cards is colour, on the last card only,
   which changes nothing about its box geometry. */
.umd-live-lab-page__hv-card {
	display: flex;
	align-items: center;
	gap: var(--umd-s4);
	width: 100%;
	padding: var(--umd-s5);
	border: 1px solid rgba(247, 243, 234, 0.16);
	border-radius: 12px;
	background: rgba(247, 243, 234, 0.05);
	backdrop-filter: blur(2px);
}

.umd-live-lab-page__hv-card--4 {
	border-color: var(--umd-gold);
	background: rgba(201, 164, 79, 0.12);
}

.umd-live-lab-page__hv-icon {
	flex: none;
	width: 26px;
	height: 26px;
	color: var(--umd-gold);
}

.umd-live-lab-page__hv-label {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--umd-ivory);
}

.umd-live-lab-page__hv-arrow {
	align-self: center;
	font-size: 1.125rem;
	line-height: 1;
	color: rgba(247, 243, 234, 0.5);
}

@media (min-width: 900px) {
	.umd-live-lab-page__hero-inner {
		grid-template-columns: 6fr 5fr;
		align-items: center;
		padding: var(--umd-s9, 80px) var(--umd-s6);
	}

	.umd-live-lab-page__hero-visual {
		max-width: 400px;
	}
}

/* Gold-highlighted phrase inside the hero headline (dark background). */
.umd-live-lab-page__hl {
	color: var(--umd-gold);
}

/* Section-heading floor for this page only: .umd-section__title has no
   explicit font-size of its own anywhere in the sitewide stylesheets
   (site.css only sets its margin/line-height), so it was rendering at
   the browser's default h2 size relative to the inherited body font --
   measured live at a flat 30px regardless of viewport, never scaling up
   on a wide screen. Scoped under .umd-live-lab-page so no other page's
   section headings change. */
.umd-live-lab-page .umd-section__title {
	font-size: clamp(1.875rem, 1.3rem + 3vw, 2.875rem);
}

/* Who-should-join card icon, sits above the numbered badge. */
.umd-live-lab-page__card-icon {
	width: 28px;
	height: 28px;
	margin-bottom: var(--umd-s3);
	color: var(--umd-teal);
}

.umd-live-lab-page__offer {
	text-align: center;
}

.umd-live-lab-page__offer .umd-section__title {
	margin-left: auto;
	margin-right: auto;
}

.umd-live-lab-page__offer-subheading {
	max-width: var(--umd-reading);
	margin: 0 auto var(--umd-s6);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: rgba(247, 243, 234, 0.85);
}

.umd-live-lab-page__fact-grid--offer {
	max-width: 640px;
	margin: 0 auto var(--umd-s7);
}

/* Price section's fact strip has exactly 4 items -- a clean 2x2 on
   mobile, one row of 4 at 600px+, no orphan to manage. */
@media (min-width: 600px) {
	.umd-live-lab-page__fact-grid--offer {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---- two-column layout: schedule left, the value-stack card right.
   Single column below 900px. */
.umd-live-lab-page__offer-grid {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: var(--umd-s6);
	max-width: 920px;
	margin: 0 auto;
	text-align: left;
}

@media (min-width: 900px) {
	.umd-live-lab-page__offer-grid {
		grid-template-columns: 1.1fr 1fr;
	}
}

/* ---- schedule (left): compact bordered cards in a tight stack, not a
   timeline. The previous dot-plus-connecting-line design needed a 32px
   gap and a 40px dot per step to read cleanly, which was the direct
   cause of this section's excessive height (measured live at ~880px
   before this change). A bordered card needs no such spacing to look
   intentional. */
.umd-live-lab-page__schedule {
	display: flex;
	flex-direction: column;
	gap: var(--umd-s3);
}

.umd-live-lab-page__schedule-card {
	padding: var(--umd-s4) var(--umd-s5);
	border: 1px solid rgba(247, 243, 234, 0.16);
	border-radius: 10px;
	background: rgba(247, 243, 234, 0.04);
}

/* Previously reused .umd-card__status (a 12px, teal, uppercase status-
   badge class from the sitewide card component) to show the time --
   measured live at 12px, and teal-on-navy falls under the 4.5:1 contrast
   floor for text this size. Replaced with a properly sized, ivory/gold
   label built for this dark section rather than borrowed from a
   different component with a different job. */
.umd-live-lab-page__schedule-time {
	margin: 0 0 var(--umd-s2);
	font-size: 1rem;
	font-weight: 700;
	color: var(--umd-gold);
}

.umd-live-lab-page__schedule-title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.4;
	font-weight: 600;
	color: var(--umd-ivory);
}

.umd-live-lab-page__schedule-body {
	margin: var(--umd-s2) 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(247, 243, 234, 0.75);
}

/* ---- value card (right): the section's visually prominent element.
   Order follows the approved hierarchy -- eyebrow, price (the strongest
   visual element on the card), a short offer description, the inclusion
   checklist, the CTA with its supporting line, and the price note as
   trailing fine print. */
.umd-live-lab-page__value-card {
	padding: var(--umd-s6) var(--umd-s5);
	border: 1px solid rgba(201, 164, 79, 0.4);
	border-radius: 14px;
	background: rgba(247, 243, 234, 0.05);
	text-align: center;
}

.umd-live-lab-page__price-eyebrow {
	margin: 0 0 var(--umd-s3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--umd-gold);
}

.umd-live-lab-page__price {
	margin: 0 0 var(--umd-s3);
	font-size: clamp(2.5rem, 6vw, 3.25rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--umd-gold);
}

.umd-live-lab-page__price-description {
	max-width: 40ch;
	margin: 0 auto var(--umd-s6);
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(247, 243, 234, 0.88);
}

.umd-live-lab-page__price-cta-support {
	margin: var(--umd-s3) 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(247, 243, 234, 0.75);
}

.umd-live-lab-page__price-note {
	margin: var(--umd-s5) 0 0;
	padding-top: var(--umd-s5);
	border-top: 1px solid rgba(247, 243, 234, 0.14);
}

.umd-live-lab-page__price-note p {
	margin: 0 0 var(--umd-s2);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: rgba(247, 243, 234, 0.65);
}

.umd-live-lab-page__price-note p:last-child {
	margin-bottom: 0;
}

.umd-live-lab-page__value-cta .umd-btn--primary {
	width: 100%;
	gap: var(--umd-s3);
	min-height: 48px;
	padding: var(--umd-s4) var(--umd-s6);
	background: var(--umd-gold);
	color: var(--umd-navy);
	font-weight: 700;
}

.umd-live-lab-page__value-cta .umd-btn--primary:hover {
	background: #e0bc3d;
}

.umd-live-lab-page__value-cta .umd-btn--primary:focus-visible {
	outline: 3px solid var(--umd-ivory);
	outline-offset: 2px;
}

@media (min-width: 480px) {
	.umd-live-lab-page__value-cta .umd-btn--primary {
		width: auto;
	}
}

/* -------------------------------------------------------------- anchor nav */
/* In-page jump links, right after the hero. A single horizontally
   scrolling, snapping row rather than a wrapping list, so it never grows
   the page's vertical rhythm at any width -- it just scrolls. Labels are
   short, fixed nav words (see render_live_lab()), not each section's own
   full-sentence heading -- that was the actual mobile defect: pills over
   200px wide from a heading like "คุณกำลังเจอปัญหาเหล่านี้หรือไม่?" made
   the row unusable, not the scroll mechanism itself. */
.umd-live-lab-page__anchor-nav {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	gap: var(--umd-s3);
	margin: 0 0 var(--umd-s6);
	padding: var(--umd-s2) var(--umd-s5) var(--umd-s3);
	-webkit-overflow-scrolling: touch;
	/* Fades the row's edges so a partly-visible pill reads as "more to
	   scroll" instead of looking clipped/broken. No-op once every pill
	   fits without scrolling. */
	mask-image: linear-gradient(to right, transparent 0, #000 var(--umd-s5), #000 calc(100% - var(--umd-s5)), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--umd-s5), #000 calc(100% - var(--umd-s5)), transparent 100%);
}

/* Hide the scrollbar itself; the mask fade above is the scroll affordance. */
.umd-live-lab-page__anchor-nav {
	scrollbar-width: none;
}

.umd-live-lab-page__anchor-nav::-webkit-scrollbar {
	display: none;
}

.umd-live-lab-page__anchor-nav a {
	flex: none;
	scroll-snap-align: start;
	display: inline-flex;
	align-items: center;
	min-height: var(--umd-tap);
	padding: 0 var(--umd-s4);
	border-radius: 999px;
	background: var(--umd-ivory);
	color: var(--umd-navy);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.umd-live-lab-page__anchor-nav a:first-child {
	scroll-margin-left: var(--umd-s5);
}

.umd-live-lab-page__anchor-nav a:hover {
	background: var(--umd-teal);
	color: var(--umd-white);
}

.umd-live-lab-page__anchor-nav a:focus-visible {
	outline: 2px solid var(--umd-teal);
	outline-offset: 2px;
}

.umd-live-lab-page__anchor-nav a:active {
	background: var(--umd-navy);
	color: var(--umd-white);
}

/* Six short pills comfortably fit one row well within a 1220px content
   width, so scrolling is a mobile-only affordance -- at 782px+ the row
   wraps normally and centres instead of staying pinned to the left edge
   of a horizontally-scrolling strip, which read as crowded/off-balance
   on wider screens even though nothing was actually cut off. */
@media (min-width: 782px) {
	.umd-live-lab-page__anchor-nav {
		flex-wrap: wrap;
		justify-content: center;
		overflow-x: visible;
		padding: var(--umd-s2) 0 var(--umd-s3);
		mask-image: none;
		-webkit-mask-image: none;
	}

	.umd-live-lab-page__anchor-nav a:first-child {
		scroll-margin-left: 0;
	}
}

/* Keeps the sticky header from covering an anchored section's heading when
   the anchor nav (or any other in-page link) jumps to it. */
#umd-live-lab-problem,
#umd-live-lab-who,
#umd-live-lab-transform,
#umd-live-lab-modules,
#umd-live-lab-instructor,
#umd-live-lab-faq,
#umd-live-lab-agenda {
	scroll-margin-top: 96px;
}

/* ----------------------------------------------------------- trust strip */
/* Quick reassurance badges, right under the hero. A single wrapping row so
   it never needs its own mobile layout — it just wraps to more lines. */
.umd-live-lab-page__trust-section {
	margin-bottom: var(--umd-s6);
}

.umd-live-lab-page__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--umd-s3) var(--umd-s5);
}

.umd-live-lab-page__trust-item {
	display: flex;
	align-items: center;
	gap: var(--umd-s2);
	padding: var(--umd-s2) var(--umd-s4);
	border: 1px solid rgba(11, 31, 51, 0.14);
	border-radius: 999px;
	background: var(--umd-white);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--umd-navy);
	white-space: nowrap;
}

.umd-live-lab-page__trust-icon {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--umd-teal);
}

/* -------------------------------------------------------------- compare */
/* Who-should-join vs who-should-NOT-join, side by side so the "is this for
   me" question answers itself in one glance. Stacks to a single column
   below 782px rather than shrinking two columns into a narrow viewport. */
.umd-live-lab-page__compare {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--umd-s7);
}

@media (min-width: 782px) {
	.umd-live-lab-page__compare {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.umd-live-lab-page__compare-heading {
	margin: 0 0 var(--umd-s5);
	font-size: 1.25rem;
	line-height: 1.3;
}

.umd-live-lab-page__compare-col--yes .umd-live-lab-page__compare-heading {
	color: var(--umd-teal);
}

.umd-live-lab-page__compare-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--umd-s4);
}

.umd-live-lab-page__compare-col--no {
	padding: var(--umd-s5);
	background: var(--umd-white);
	border: 1px solid rgba(11, 31, 51, 0.12);
	border-radius: 10px;
}

/* Gold accent on dark sections within this page (why-start-now), instead
   of the sitewide icon-grid's default teal — keeps the premium dark-
   navy/gold rhythm consistent wherever this page goes dark. */
.umd-live-lab-page .umd-section--dark .umd-icon-grid__icon {
	color: var(--umd-gold);
}

/* -------------------------------------------------------- transform diagram */
/* Manual work vs. an AI workflow, plus the six-step process underneath
   showing how the shift happens. Both parts share one box component,
   .umd-live-lab-page__tf-box, so every box in this section -- the two
   comparison cards and the six flow steps -- has identical padding,
   border, radius and icon treatment. This replaced two different card
   systems (a 340px comparison card next to the sitewide .umd-flow
   component's fixed 92px nodes, which wrapped to 88-112px tall
   inconsistently depending on label length): one shell, reused, sized by
   its grid/flex container rather than a fixed pixel width, so height
   still equalises correctly however long the Thai or English text runs.
   Single column at every width for the flow (a vertical process reads
   the same way whether the viewport is 320px or 1440px, so there is no
   separate mobile layout to keep in sync with a desktop one); the
   comparison becomes two columns only at 782px+, where there is room for
   both without cramping either. */
.umd-live-lab-page__tf-box {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	padding: var(--umd-s5);
	border: 1px solid rgba(11, 31, 51, 0.14);
	border-radius: 10px;
	background: var(--umd-white);
}

.umd-live-lab-page__tf-box-content {
	width: 100%;
	min-width: 0;
}

.umd-live-lab-page__tf-icon {
	flex: none;
	width: 26px;
	height: 26px;
	margin-bottom: var(--umd-s3);
	color: var(--umd-teal);
}

.umd-live-lab-page__tf-label {
	margin: 0 0 var(--umd-s4);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(11, 31, 51, 0.55);
}

.umd-live-lab-page__tf-label--after {
	color: var(--umd-teal);
}

/* ---- before/after comparison: single column, two equal columns at 782px+ */
.umd-live-lab-page__tf-compare {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: var(--umd-s5);
	max-width: 760px;
	margin: 0 auto;
}

.umd-live-lab-page__tf-arrow {
	justify-self: center;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--umd-gold);
	transform: rotate(90deg);
}

@media (min-width: 782px) {
	.umd-live-lab-page__tf-compare {
		grid-template-columns: 1fr auto 1fr;
		align-items: stretch;
		gap: var(--umd-s6);
	}

	.umd-live-lab-page__tf-compare .umd-live-lab-page__tf-box {
		height: 100%;
	}

	.umd-live-lab-page__tf-arrow {
		align-self: center;
		transform: none;
	}
}

/* ---- six-step "how the shift happens" flow: always a single column of
   equal-width boxes, connected by centered down-arrows. Icon sits beside
   the label rather than above it -- a one-line step needs no vertical
   stack -- but the box shell itself is identical to the comparison
   cards above. */
.umd-live-lab-page__tf-flow-heading {
	margin: var(--umd-s7) 0 var(--umd-s5);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: center;
	color: rgba(11, 31, 51, 0.55);
}

.umd-live-lab-page__tf-flow {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--umd-s3);
	max-width: 480px;
	margin: 0 auto;
}

.umd-live-lab-page__tf-flow .umd-live-lab-page__tf-box {
	flex-direction: row;
	align-items: center;
	gap: var(--umd-s4);
}

.umd-live-lab-page__tf-flow .umd-live-lab-page__tf-icon {
	margin-bottom: 0;
}

.umd-live-lab-page__tf-flow-label {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--umd-navy);
}

.umd-live-lab-page__tf-flow-arrow {
	align-self: center;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--umd-gold);
}

/* --------------------------------------------------------- module accordion */
/* The six-module curriculum: one accordion, scoped on top of the shared
   .umd-faq / .umd-faq__item / .umd-faq__trigger / .umd-faq__panel rules
   (same component the FAQ section uses) via the
   .umd-live-lab-page__module-accordion wrapper class, so these rules
   never affect the FAQ or any other .umd-faq user on the site.
   Collapsed row: icon, then module number, then title, then the shared
   plus/minus indicator at the far right (already animated -- see
   .umd-faq__icon -- and, by the sitewide reduced-motion rule in
   base.css, that transition is already a no-op when the visitor has
   requested reduced motion). */
.umd-live-lab-page__module-accordion .umd-faq__trigger {
	min-height: 48px;
}

.umd-live-lab-page__module-accordion .umd-faq__label {
	display: flex;
	align-items: center;
	gap: var(--umd-s3);
	/* Takes the remaining row width so a long title wraps within its own
	   space instead of overflowing past the plus/minus icon -- flex
	   items don't shrink below their content's intrinsic width unless
	   min-width is reset. */
	flex: 1 1 auto;
	min-width: 0;
}

.umd-live-lab-page__module-icon {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--umd-teal);
}

.umd-live-lab-page__module-accordion .umd-module__number {
	flex: none;
	margin: 0;
}

.umd-live-lab-page__module-title {
	min-width: 0;
	overflow-wrap: break-word;
}

/* Expanded panel: a light ivory tint, visually attached to the row it
   belongs to, distinct from the plain white/transparent background the
   FAQ's own panels use elsewhere. */
.umd-live-lab-page__module-accordion .umd-faq__panel.is-open {
	background: var(--umd-ivory);
	border-radius: 8px;
	padding: var(--umd-s3) var(--umd-s4) var(--umd-s4);
}

/* ---------------------------------------------------------- receive cards */
/* Single column on mobile (plenty of room per card); exactly 2 columns
   at 600px+ -- overriding the shared .umd-card-grid's auto-fit, which
   resolved to 3 columns at wide viewports and left the 4th card alone in
   an unmatched row. Two even rows of two let CSS Grid's default
   same-row stretch equalise height within each row. */
.umd-live-lab-page__receive-grid {
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.umd-live-lab-page__receive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.umd-live-lab-page__receive-card {
	text-align: left;
}

.umd-live-lab-page__receive-icon {
	width: 28px;
	height: 28px;
	margin-bottom: var(--umd-s3);
	color: #a3822f;
}

/* -------------------------------------------------------------- instructor */
/* Name / positioning / description. The section heading ("ผู้สอน" / "Your
   Instructor") already serves as the eyebrow, so no separate eyebrow line
   is repeated here. */
.umd-live-lab-page__instructor {
	max-width: var(--umd-reading);
}

.umd-live-lab-page__instructor-name {
	margin: 0 0 var(--umd-s2);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--umd-navy);
}

.umd-live-lab-page__instructor-positioning {
	margin: 0 0 var(--umd-s4);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--umd-teal);
}

.umd-live-lab-page__instructor-description {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--umd-charcoal);
}

/* ------------------------------------------------------------- includes */
/* The value card's inclusion list, inside .umd-live-lab-page__value-card
   -- a left-aligned vertical stack (not a centred wrapped row) so six
   items of varying label length line up cleanly regardless of how many
   fit per line. */
.umd-live-lab-page__includes {
	display: flex;
	flex-direction: column;
	gap: var(--umd-s3);
	list-style: none;
	margin: 0 0 var(--umd-s6);
	padding: 0;
	text-align: left;
}

.umd-live-lab-page__includes li {
	display: flex;
	align-items: center;
	gap: var(--umd-s3);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--umd-ivory);
}

.umd-live-lab-page__includes-icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--umd-gold);
}