/*
 * Upmoneyday Native — site chrome and generated-page layout.
 *
 * Covers what theme.json cannot express: the plugin-rendered header, navigation,
 * footer, and the shared page/card/FAQ/disclaimer layouts used by the
 * data-driven page types.
 *
 * Constraints encoded here:
 *   - Interactive targets are at least 44x44px.
 *   - Nothing may cause horizontal overflow at 390px.
 *   - Gold (#C9A44F) is an accent only, never long-form text colour.
 *   - Reduced motion is respected for every transition.
 *   - Colour is never the only signal (current page also gets weight + rule).
 */

:root {
	--umd-navy: #0B1F33;
	--umd-ivory: #F7F3EA;
	--umd-charcoal: #263440;
	--umd-teal: #087F7A;
	--umd-gold: #C9A44F;
	--umd-white: #FFFFFF;

	/* Spacing scale: 4 8 12 16 24 32 48 64 80 96 */
	--umd-s1: 4px;
	--umd-s2: 8px;
	--umd-s3: 12px;
	--umd-s4: 16px;
	--umd-s5: 24px;
	--umd-s6: 32px;
	--umd-s7: 48px;
	--umd-s8: 64px;
	--umd-s9: 80px;
	--umd-s10: 96px;

	/* Mirrors theme.json settings.layout.contentSize (--wp--style--global--content-size).
	   Grows past the old flat 1220px above ~1280px viewports instead of leaving
	   fixed empty gutters on wide desktop screens; keep both values in sync. */
	--umd-content: clamp(1220px, 700px + 40.625vw, 1480px);
	--umd-reading: 780px;
	--umd-tap: 44px;
}

/* Never let a wide child scroll the page sideways. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

img,
svg {
	max-width: 100%;
}

/* ---------------------------------------------------------------- skip link */
.umd-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--umd-s3) var(--umd-s5);
	background: var(--umd-navy);
	color: var(--umd-ivory);
	text-decoration: none;
}

.umd-skip-link:focus {
	left: var(--umd-s4);
	top: var(--umd-s4);
}

/* ------------------------------------------------------------------- header */
.umd-header {
	background: var(--umd-ivory);
	border-bottom: 1px solid rgba(11, 31, 51, 0.12);
}

.umd-header__inner {
	max-width: var(--umd-content);
	margin: 0 auto;
	padding: var(--umd-s3) var(--umd-s5);
	display: flex;
	align-items: center;
	gap: var(--umd-s5);
	flex-wrap: nowrap;
}

.umd-header__brand {
	display: inline-flex;
	align-items: center;
	color: var(--umd-navy);
	text-decoration: none;
	flex: 0 0 auto;
}

/* The logo stays deliberately smaller than the navigation. */
.umd-header__brand svg {
	height: 34px;
	width: auto;
	display: block;
}

.umd-header__brand:focus-visible {
	outline: 2px solid var(--umd-teal);
	outline-offset: 3px;
}

/* --------------------------------------------------------------- navigation */
.umd-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.umd-nav__list,
.umd-nav__submenu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.umd-nav__list {
	display: flex;
	align-items: center;
	gap: var(--umd-s2);
	flex-wrap: wrap;
}

.umd-nav__item {
	position: relative;
}

.umd-nav__item > a,
.umd-nav__disclosure {
	display: inline-flex;
	align-items: center;
	gap: var(--umd-s2);
	min-height: var(--umd-tap);
	padding: var(--umd-s2) var(--umd-s3);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--umd-charcoal);
	background: none;
	border: 0;
	border-radius: 6px;
	text-decoration: none;
	cursor: pointer;
}

.umd-nav__item > a:hover,
.umd-nav__disclosure:hover {
	color: var(--umd-navy);
	background: rgba(11, 31, 51, 0.05);
}

.umd-nav__item > a:focus-visible,
.umd-nav__disclosure:focus-visible,
.umd-nav__subitem > a:focus-visible {
	outline: 2px solid var(--umd-teal);
	outline-offset: 2px;
}

/* Current page: weight and an underline rule as well as colour, so the state
   does not depend on hue alone. */
.umd-nav__item > a[aria-current="page"],
.umd-nav__subitem > a[aria-current="page"] {
	color: var(--umd-navy);
	font-weight: 600;
	box-shadow: inset 0 -2px 0 0 var(--umd-gold);
}

.umd-nav__chevron {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 150ms ease;
}

.umd-nav__disclosure[aria-expanded="true"] .umd-nav__chevron {
	transform: rotate(225deg) translateY(-2px);
}

.umd-nav__submenu {
	display: none;
}

.umd-nav__disclosure[aria-expanded="true"] + .umd-nav__submenu {
	display: block;
}

.umd-nav__subitem > a {
	display: block;
	min-height: var(--umd-tap);
	padding: var(--umd-s3) var(--umd-s4);
	font-size: 0.9375rem;
	color: var(--umd-charcoal);
	text-decoration: none;
}

.umd-nav__subitem > a:hover {
	background: rgba(11, 31, 51, 0.05);
	color: var(--umd-navy);
}

/* -------------------------------------------------------- header actions */
.umd-header__actions {
	display: flex;
	align-items: center;
	gap: var(--umd-s4);
	flex: 0 0 auto;
}

.umd-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--umd-s1);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
}

.umd-lang-switch__current {
	font-weight: 700;
	color: var(--umd-navy);
}

.umd-lang-switch__sep {
	color: rgba(11, 31, 51, 0.4);
}

.umd-lang-switch__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--umd-tap);
	min-height: var(--umd-tap);
	color: var(--umd-charcoal);
	text-decoration: underline;
}

.umd-lang-switch__link:hover {
	color: var(--umd-teal);
}

.umd-lang-switch__link:focus-visible {
	outline: 2px solid var(--umd-teal);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ buttons */
.umd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--umd-tap);
	padding: var(--umd-s3) var(--umd-s5);
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

.umd-btn--primary {
	background: var(--umd-navy);
	color: var(--umd-ivory);
}

.umd-btn--primary:hover {
	background: var(--umd-teal);
	color: var(--umd-white);
}

.umd-btn--primary:focus-visible {
	outline: 2px solid var(--umd-navy);
	outline-offset: 3px;
}

.umd-btn--lg {
	padding: var(--umd-s4) var(--umd-s6);
	font-size: 1rem;
}

/* ------------------------------------------------------------ menu toggle */
.umd-menu-toggle {
	display: none;
	align-items: center;
	gap: var(--umd-s2);
	min-width: var(--umd-tap);
	min-height: var(--umd-tap);
	padding: var(--umd-s2) var(--umd-s3);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--umd-navy);
	background: none;
	border: 1px solid rgba(11, 31, 51, 0.25);
	border-radius: 6px;
	cursor: pointer;
}

.umd-menu-toggle:focus-visible {
	outline: 2px solid var(--umd-teal);
	outline-offset: 2px;
}

.umd-menu-toggle__bars,
.umd-menu-toggle__bars::before,
.umd-menu-toggle__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	content: "";
}

.umd-menu-toggle__bars {
	position: relative;
}

.umd-menu-toggle__bars::before {
	position: absolute;
	top: -6px;
}

.umd-menu-toggle__bars::after {
	position: absolute;
	top: 6px;
}

/* --------------------------------------------------------- mobile layout */
@media (max-width: 899px) {
	.umd-header__inner {
		flex-wrap: wrap;
		gap: var(--umd-s3);
	}

	.umd-menu-toggle {
		display: inline-flex;
		order: 2;
		margin-left: auto;
	}

	.umd-header__actions {
		order: 3;
		width: 100%;
		justify-content: space-between;
	}

	.umd-nav {
		order: 4;
		width: 100%;
		display: none;
	}

	.umd-header--menu-open .umd-nav {
		display: block;
	}

	.umd-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		border-top: 1px solid rgba(11, 31, 51, 0.12);
	}

	.umd-nav__item {
		border-bottom: 1px solid rgba(11, 31, 51, 0.08);
	}

	.umd-nav__item > a,
	.umd-nav__disclosure {
		width: 100%;
		justify-content: space-between;
		border-radius: 0;
		padding: var(--umd-s3) var(--umd-s2);
	}

	.umd-nav__submenu {
		padding-left: var(--umd-s4);
		padding-bottom: var(--umd-s2);
	}

	.umd-header__cta {
		flex: 0 1 auto;
	}
}

/* Desktop: submenu becomes a positioned panel. */
@media (min-width: 900px) {
	.umd-nav__submenu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 40;
		min-width: 240px;
		padding: var(--umd-s2);
		background: var(--umd-white);
		border: 1px solid rgba(11, 31, 51, 0.14);
		border-radius: 8px;
		box-shadow: 0 8px 24px rgba(11, 31, 51, 0.1);
	}
}

/* ------------------------------------------------------- generated pages */
.umd-page {
	max-width: var(--umd-content);
	margin: 0 auto;
	padding: var(--umd-s7) var(--umd-s5) var(--umd-s9);
}

.umd-hero {
	max-width: var(--umd-reading);
	margin-bottom: var(--umd-s8);
}

.umd-eyebrow {
	margin: 0 0 var(--umd-s3);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--umd-teal);
}

.umd-hero__title {
	margin: 0 0 var(--umd-s5);
	line-height: 1.2;
}

.umd-hero__lead {
	margin: 0 0 var(--umd-s5);
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--umd-charcoal);
}

.umd-section {
	max-width: var(--umd-reading);
	margin: 0 0 var(--umd-s8);
}

.umd-section__title {
	margin: 0 0 var(--umd-s4);
	line-height: 1.3;
}

.umd-section p {
	line-height: 1.78;
	margin: 0 0 var(--umd-s4);
}

.umd-list {
	margin: 0 0 var(--umd-s4);
	padding-left: var(--umd-s5);
}

.umd-list li {
	margin-bottom: var(--umd-s3);
	line-height: 1.7;
}

.umd-list--numbered {
	list-style: decimal;
}

/* ------------------------------------------------------------------ flow */
/* Sitewide "disconnected functions -> one system" process diagram. Wraps
   freely at any width instead of relying on a fixed column count, so it
   never needs a separate mobile layout -- narrow viewports just wrap to
   more rows, each node keeping the same size. */
.umd-flow__caption {
	margin: 0 0 var(--umd-s5);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--umd-teal);
}

.umd-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--umd-s3);
	margin-bottom: var(--umd-s8);
}

.umd-flow__node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--umd-s2);
	width: 92px;
	padding: var(--umd-s4) var(--umd-s2);
	text-align: center;
	background: var(--umd-white);
	border: 1px solid rgba(11, 31, 51, 0.14);
	border-radius: 10px;
}

.umd-flow__node--outcome {
	background: var(--umd-navy);
	border-color: var(--umd-navy);
}

.umd-flow__node--outcome .umd-flow__label {
	color: var(--umd-ivory);
}

.umd-flow__node--outcome .umd-flow__icon {
	color: var(--umd-gold);
}

.umd-flow__icon {
	width: 24px;
	height: 24px;
	color: var(--umd-teal);
}

.umd-flow__label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--umd-navy);
}

.umd-flow__arrow {
	flex: none;
	font-size: 1.25rem;
	color: var(--umd-gold);
}

@media (max-width: 480px) {
	.umd-flow__node {
		width: 76px;
	}
}

/* ------------------------------------------------------------- icon grid */
/* Opt-in visual variant of a plain bulleted list — see icon_grid_block() in
   class-content.php. Same auto-fit/minmax pattern as .umd-card-grid, so it
   inherits the same guaranteed single-column mobile stacking. */
.umd-icon-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--umd-s4);
	margin: 0 0 var(--umd-s4);
}

.umd-icon-grid__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--umd-s2);
	padding: var(--umd-s5) var(--umd-s4);
	background: var(--umd-white);
	border: 1px solid rgba(11, 31, 51, 0.14);
	border-radius: 10px;
}

.umd-icon-grid__icon {
	width: 26px;
	height: 26px;
	color: var(--umd-teal);
}

.umd-icon-grid__label {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--umd-navy);
}

/* ----------------------------------------------------------------- cards */
.umd-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--umd-s5);
	margin-bottom: var(--umd-s8);
}

.umd-card {
	padding: var(--umd-s6) var(--umd-s5);
	background: var(--umd-white);
	border: 1px solid rgba(11, 31, 51, 0.14);
	border-radius: 10px;
}

.umd-card__badge-icon {
	width: 26px;
	height: 26px;
	margin-bottom: var(--umd-s3);
	color: var(--umd-teal);
}

.umd-card__status {
	margin: 0 0 var(--umd-s3);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--umd-teal);
}

.umd-card__title {
	margin: 0 0 var(--umd-s3);
	font-size: 1.25rem;
	line-height: 1.3;
}

.umd-card__title a {
	color: var(--umd-navy);
	text-decoration: none;
}

.umd-card__title a:hover {
	text-decoration: underline;
}

.umd-card__body {
	margin: 0 0 var(--umd-s4);
	line-height: 1.7;
	color: var(--umd-charcoal);
}

.umd-card__meta {
	margin: 0 0 var(--umd-s3);
	font-size: 0.875rem;
	color: var(--umd-charcoal);
}

/* AI Projects landing page only: the featured Pilot spotlight, visually
   distinguished from the plain archive cards by a gold left border and
   extra padding rather than a different colour scheme -- it stays part of
   the same card family instead of introducing a second card component. */
.umd-card--featured {
	padding: var(--umd-s7) var(--umd-s6);
	border-color: var(--umd-gold);
	border-left-width: 4px;
	margin-bottom: var(--umd-s6);
}

/* --------------------------------------------------------------- example */
/* AI Projects Pilot detail page only: the illustrative Input / AI-assisted
   process / Review / Output example, laid out as an even grid so no column
   reads more "finished" than another. Reuses .umd-flow__caption for the
   "Illustrative workflow example" label rather than introducing a second
   eyebrow style. */
.umd-example {
	padding: var(--umd-s6) var(--umd-s5);
	background: var(--umd-white);
	border: 1px solid rgba(11, 31, 51, 0.14);
	border-radius: 10px;
	margin-bottom: var(--umd-s4);
}

.umd-example__title {
	margin: 0 0 var(--umd-s5);
	font-size: 1.125rem;
	line-height: 1.4;
}

.umd-example__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--umd-s5);
}

.umd-example__group-title {
	margin: 0 0 var(--umd-s3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--umd-navy);
}

.umd-example__group .umd-list {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ takeaway */
/* Insights Pilot article only: the single most important line from the
   article's own takeaways list, pulled forward right after the hero. Dark
   navy card with a gold label mirrors .umd-flow__node--outcome's treatment
   of a highlighted end state, so the accent language stays consistent
   sitewide rather than introducing a new colour pairing. */
.umd-takeaway {
	max-width: var(--umd-reading);
	margin: 0 0 var(--umd-s8);
	padding: var(--umd-s5) var(--umd-s6);
	background: var(--umd-navy);
	border-radius: 10px;
}

.umd-takeaway__label {
	margin: 0 0 var(--umd-s3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--umd-gold);
}

.umd-takeaway__text {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--umd-ivory);
}

/* ------------------------------------------------------------------- FAQ */
.umd-faq {
	border-top: 1px solid rgba(11, 31, 51, 0.14);
}

.umd-faq__item {
	border-bottom: 1px solid rgba(11, 31, 51, 0.14);
}

.umd-faq__question {
	margin: 0;
	font-size: 1rem;
}

.umd-faq__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--umd-s4);
	width: 100%;
	min-height: var(--umd-tap);
	padding: var(--umd-s4) var(--umd-s2);
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.55;
	text-align: left;
	color: var(--umd-navy);
	background: none;
	border: 0;
	cursor: pointer;
}

.umd-faq__trigger:hover {
	color: var(--umd-teal);
}

.umd-faq__trigger:focus-visible {
	outline: 2px solid var(--umd-teal);
	outline-offset: -2px;
}

.umd-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.umd-faq__icon::before,
.umd-faq__icon::after {
	position: absolute;
	background: currentColor;
	content: "";
}

.umd-faq__icon::before {
	top: 6px;
	left: 0;
	width: 14px;
	height: 2px;
}

.umd-faq__icon::after {
	top: 0;
	left: 6px;
	width: 2px;
	height: 14px;
	transition: transform 150ms ease;
}

.umd-faq__trigger[aria-expanded="true"] .umd-faq__icon::after {
	transform: scaleY(0);
}

/* Collapsed by default; assets/js/faq.js adds .is-open. A <noscript> override
   in the rendered markup reveals every panel when scripting is unavailable. */
.umd-faq__panel {
	display: none;
	padding: 0 var(--umd-s2) var(--umd-s5);
}

.umd-faq__panel.is-open {
	display: block;
}

.umd-faq__panel p {
	margin: 0;
	line-height: 1.8;
	color: var(--umd-charcoal);
}

/* ------------------------------------------------------- disclosure notes */
.umd-disclaimer {
	margin: 0 0 var(--umd-s6);
	padding: var(--umd-s4) var(--umd-s5);
	background: rgba(11, 31, 51, 0.04);
	border-left: 3px solid var(--umd-gold);
	border-radius: 4px;
}

.umd-disclaimer p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.75;
	color: var(--umd-charcoal);
}

.umd-disclaimer--draft {
	border-left-color: var(--umd-teal);
}

.umd-attribution {
	margin: var(--umd-s4) 0 0;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--umd-charcoal);
}

.umd-price-note {
	margin: 0 0 var(--umd-s5);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--umd-charcoal);
}

/* -------------------------------------------------------------------- CTA */
.umd-cta {
	margin: 0 0 var(--umd-s6);
}

.umd-cta__note {
	margin: var(--umd-s3) 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--umd-charcoal);
}

/* ------------------------------------------------------------------ footer */
.umd-footer {
	background: var(--umd-navy);
	color: var(--umd-ivory);
	padding: var(--umd-s9) var(--umd-s5) var(--umd-s6);
	/* Extra bottom padding on devices with a home-indicator / gesture bar,
	   so footer content and legal links are never obscured. calc() with a
	   plain fallback first keeps this a no-op everywhere else. */
	padding-bottom: max(var(--umd-s6), env(safe-area-inset-bottom, 0px));
}

.umd-footer__inner {
	max-width: var(--umd-content);
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: var(--umd-s7);
}

.umd-footer__brand svg {
	height: 30px;
	width: auto;
	color: var(--umd-ivory);
}

.umd-footer__tagline {
	margin: var(--umd-s4) 0 var(--umd-s3);
	font-size: 0.9375rem;
	line-height: 1.7;
	color: rgba(247, 243, 234, 0.85);
}

.umd-footer__contact a,
.umd-footer__list a {
	color: var(--umd-ivory);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.umd-footer__contact a:hover,
.umd-footer__list a:hover {
	color: var(--umd-gold);
}

.umd-footer__heading {
	margin: 0 0 var(--umd-s4);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--umd-gold);
}

.umd-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.umd-footer__list li {
	margin-bottom: var(--umd-s3);
}

.umd-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--umd-tap);
	font-size: 0.9375rem;
	line-height: 1.6;
}

.umd-footer__bottom {
	max-width: var(--umd-content);
	margin: var(--umd-s8) auto 0;
	padding-top: var(--umd-s5);
	border-top: 1px solid rgba(247, 243, 234, 0.18);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--umd-s4) var(--umd-s6);
}

.umd-footer__bottom .umd-lang-switch__current {
	color: var(--umd-ivory);
}

.umd-footer__bottom .umd-lang-switch__sep {
	color: rgba(247, 243, 234, 0.5);
}

.umd-footer__bottom .umd-lang-switch__link {
	color: var(--umd-ivory);
}

.umd-footer__bottom .umd-lang-switch__link:hover {
	color: var(--umd-gold);
}

.umd-footer__disclosure,
.umd-footer__legal,
.umd-footer__copyright {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.7;
	color: rgba(247, 243, 234, 0.8);
}

.umd-footer__disclosure,
.umd-footer__legal {
	flex: 1 1 320px;
}

/* ------------------------------------------------- Live Lab sales page */
.umd-status-badge {
	display: inline-block;
	margin: 0 0 var(--umd-s4);
	padding: var(--umd-s1) var(--umd-s4);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--umd-navy);
	background: rgba(201, 164, 79, 0.16);
	border: 1px solid var(--umd-gold);
	border-radius: 999px;
}

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

.umd-hero__date {
	margin: 0 0 var(--umd-s4);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--umd-navy);
}

.umd-hero__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--umd-s3);
	margin: 0 0 var(--umd-s4);
}

.umd-hero__price-kicker {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--umd-teal);
}

.umd-hero__price-amount {
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--umd-navy);
}

.umd-hero__value-line {
	margin: 0 0 var(--umd-s6);
	font-size: 0.9375rem;
	color: var(--umd-charcoal);
}

.umd-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--umd-s5);
}

.umd-hero__secondary {
	margin: 0;
	padding-top: var(--umd-s3);
}

.umd-hero__secondary a {
	font-weight: 600;
	color: var(--umd-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Diagnose -> context -> instruction -> output -> review -> action, shown as
   a plain numbered flow rather than a diagram — clear at 320px without an
   SVG that would need its own responsive handling. */
.umd-framework-flow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--umd-s3);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--umd-s5);
	counter-reset: umd-flow;
}

.umd-framework-flow li {
	display: flex;
	align-items: center;
	gap: var(--umd-s2);
	padding: var(--umd-s2) var(--umd-s4);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--umd-navy);
	background: var(--umd-ivory);
	border-radius: 999px;
	counter-increment: umd-flow;
}

.umd-framework-flow li::before {
	content: counter(umd-flow);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 0.75rem;
	color: var(--umd-white);
	background: var(--umd-teal);
	border-radius: 50%;
}

/* Tinted / dark section bands: contained within the page's max-width rather
   than full-bleed, so the alternating rhythm reads clearly without breaking
   out of the reading column at any viewport. */
.umd-section--tint,
.umd-section--dark {
	max-width: var(--umd-content);
	padding: var(--umd-s7) var(--umd-s6);
	border-radius: 16px;
}

.umd-section--tint {
	background: var(--umd-ivory);
}

.umd-section--dark {
	background: var(--umd-navy);
	color: var(--umd-ivory);
}

.umd-section--dark .umd-section__title {
	color: var(--umd-ivory);
}

.umd-section--dark .umd-list li {
	color: var(--umd-ivory);
}

.umd-section--dark a {
	color: var(--umd-gold);
}

.umd-module-grid .umd-module {
	position: relative;
}

.umd-module__number {
	margin: 0 0 var(--umd-s3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--umd-gold);
}

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

.umd-ebook__subtitle {
	margin: 0 0 var(--umd-s5);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--umd-charcoal);
}

.umd-ebook__contents {
	columns: 2;
	column-gap: var(--umd-s6);
}

.umd-ebook__contents li {
	break-inside: avoid;
}

.umd-ebook__note {
	margin: var(--umd-s4) 0 0;
	font-size: 0.875rem;
	font-style: italic;
	color: var(--umd-charcoal);
}

.umd-replay-note {
	margin: 0 0 var(--umd-s4);
	font-size: 1rem;
	color: var(--umd-navy);
}

.umd-list--conditions li {
	font-size: 0.9375rem;
	color: var(--umd-charcoal);
}

/* The offer card: visually prominent but not a full-bleed billboard — same
   card language as the rest of the page, just with a heavier border and the
   price emphasised. */
.umd-offer {
	max-width: var(--umd-reading);
	padding: var(--umd-s7) var(--umd-s6);
	background: var(--umd-white);
	border: 2px solid var(--umd-navy);
	border-radius: 16px;
}

.umd-offer__name {
	margin: 0 0 var(--umd-s2);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--umd-charcoal);
}

.umd-offer__kicker {
	margin: 0 0 var(--umd-s2);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--umd-teal);
}

.umd-offer__amount {
	margin: 0 0 var(--umd-s5);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--umd-navy);
}

.umd-offer__includes {
	margin-bottom: var(--umd-s5);
}

.umd-offer__reassurance {
	margin: var(--umd-s4) 0 0;
	font-size: 0.875rem;
	color: var(--umd-charcoal);
}

.umd-final-cta .umd-section__title {
	max-width: var(--umd-reading);
}

.umd-final__name {
	margin: 0 0 var(--umd-s2);
	font-size: 1.0625rem;
	font-weight: 700;
}

.umd-final__date,
.umd-final__price {
	margin: 0 0 var(--umd-s2);
	font-size: 1rem;
	color: rgba(247, 243, 234, 0.85);
}

.umd-final__secondary {
	margin: var(--umd-s4) 0 0;
}

.umd-final__secondary a {
	color: var(--umd-gold);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.umd-section--dark .umd-btn--primary {
	background: var(--umd-gold);
	color: var(--umd-navy);
}

.umd-section--dark .umd-btn--primary:hover {
	background: var(--umd-white);
}

.umd-section--dark .umd-cta__note {
	color: rgba(247, 243, 234, 0.8);
}

/* MAYA OS page styling moved to its own dedicated stylesheet,
   assets/css/maya-os-experience.css (conditionally enqueued only on that
   page) — see docs/maya-os-complete-migration-inventory.md. */

/* Mobile: stack the hero CTAs and price line, keep the offer amount from
   overflowing at 320px. */
@media (max-width: 599px) {
	.umd-hero__price-amount {
		font-size: 1.75rem;
	}

	.umd-offer__amount {
		font-size: 2rem;
	}

	.umd-ebook__contents {
		columns: 1;
	}

	.umd-section--tint,
	.umd-section--dark {
		padding: var(--umd-s6) var(--umd-s4);
		border-radius: 12px;
	}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}