/* ==========================================================================
   M-Power theme styles. Tokens come from theme.json (--wp--preset--*).
   ========================================================================== */

:root {
	--mp-night: var(--wp--preset--color--night);
	--mp-night-deep: var(--wp--preset--color--night-deep);
	--mp-paper: var(--wp--preset--color--paper);
	--mp-line: var(--wp--preset--color--line);
	--mp-muted: var(--wp--preset--color--muted);
	--mp-brass: var(--wp--preset--color--brass);
	--mp-brass-deep: var(--wp--preset--color--brass-deep);
	--mp-brass-light: var(--wp--preset--color--brass-light);
	--mp-marigold: var(--wp--preset--color--marigold);
	--mp-on-night: #D6D8E8;
	--mp-on-night-muted: #A6AAC6;
	--mp-radius: var(--wp--custom--radius--medium, 16px);
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: color-mix(in srgb, var(--mp-brass) 35%, transparent);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--mp-marigold);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Sections carry their own padding, so no gap between header, main and footer. */
.wp-site-blocks > * + * { margin-block-start: 0; }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

.mpower-icon { width: 1.25em; height: 1.25em; flex: none; }

/* Eyebrow labels ---------------------------------------------------------- */

.is-style-eyebrow,
.mpower-eyebrow {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mp-brass-deep);
}

/* Sections ---------------------------------------------------------------- */

.mpower-section {
	padding-block: var(--wp--preset--spacing--60);
}

.mpower-section + .mpower-section:not(.is-style-night, .is-style-mist, .mpower-section--tight) {
	border-top: 1px solid var(--mp-line);
}

.mpower-section--tight { padding-block-start: 0; }

.mpower-section__head {
	display: grid;
	gap: 0.4rem;
	margin-bottom: var(--wp--preset--spacing--50);
}

.mpower-section__head > * { max-width: 40rem; }

.mpower-section__head h2,
.mpower-section__head p { margin: 0; }

.mpower-section__head .mpower-lede { color: var(--mp-muted); font-size: var(--wp--preset--font-size--medium); }

.mpower-note {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	color: var(--mp-muted);
}

/* A section whose only block had nothing to show (no reviews yet) collapses. */
.mpower-section:not(:has(*)) { display: none; }

.is-style-mist { background: var(--wp--preset--color--mist); }

.is-style-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-radius);
	padding: var(--wp--preset--spacing--40);
}

/* Night-sky band ------------------------------------------------------------ */

.is-style-night {
	color: var(--mp-on-night);
	background-color: var(--mp-night-deep);
	background-image:
		radial-gradient(circle at 23px 41px, rgba(255, 255, 255, 0.55) 0 0.8px, transparent 1.4px),
		radial-gradient(circle at 150px 96px, rgba(255, 255, 255, 0.35) 0 0.7px, transparent 1.3px),
		radial-gradient(circle at 97px 170px, rgba(217, 189, 140, 0.6) 0 1px, transparent 1.6px),
		radial-gradient(circle at 211px 229px, rgba(255, 255, 255, 0.4) 0 0.7px, transparent 1.3px),
		radial-gradient(ellipse at 80% 0%, rgba(94, 70, 145, 0.28), transparent 55%),
		linear-gradient(180deg, var(--mp-night-deep) 0%, var(--mp-night) 100%);
	background-size: 241px 241px, 313px 313px, 419px 419px, 263px 263px, 100% 100%, 100% 100%;
}

.is-style-night :is(h1, h2, h3, h4, h5, h6) { color: var(--mp-paper); }
.is-style-night .is-style-eyebrow,
.is-style-night .mpower-eyebrow { color: var(--mp-brass-light); }
.is-style-night .mpower-lede,
.is-style-night .mpower-note { color: var(--mp-on-night-muted); }
.is-style-night a:where(:not(.wp-element-button)) { color: var(--mp-brass-light); }
/* Buttons printed by mpower-core blocks don't get the per-block class that theme.json's outline variation uses. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--mp-night);
	background: transparent;
	border: 1px solid var(--mp-brass);
}
.is-style-night .is-style-outline .wp-block-button__link {
	color: var(--mp-paper);
	border-color: var(--mp-brass-light);
}
.is-style-night .is-style-outline .wp-block-button__link:hover {
	background: rgba(217, 189, 140, 0.12);
}

/* Header -------------------------------------------------------------------- */

.mpower-header {
	background: var(--mp-paper);
	border-bottom: 1px solid var(--mp-line);
	padding-block: 0.85rem;
}

.mpower-header__row { gap: 1.5rem; align-items: center; }

/* The logo mark sits inside the site title's link (inc/logo.php). In the header it spans the name and the tagline. */
.mpower-logo { display: block; flex: none; width: 2.9rem; height: 2.9rem; }
.mpower-logo__grid { stroke: var(--mp-brass); }
.mpower-logo__m { fill: var(--mp-night); stroke: var(--mp-night); }
.mpower-logo__star { fill: var(--mp-marigold); }
.is-style-night .mpower-logo__m { fill: var(--mp-brass-light); stroke: var(--mp-brass-light); }

.mpower-brand { gap: 0.25rem; position: relative; min-height: 2.9rem; padding-left: 3.65rem; justify-content: center; }
.mpower-brand .mpower-logo { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.mpower-brand .wp-block-site-title { letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.mpower-brand .wp-block-site-tagline { margin: 0; }

.mpower-nav .wp-block-navigation-item__content { padding-block: 0.35rem; }
.mpower-nav .wp-block-navigation-item__content:hover { color: var(--mp-brass-deep); }

.mpower-header__actions { gap: 0.9rem; align-items: center; }
.mpower-header__actions .wp-block-search__button {
	background: transparent;
	color: var(--mp-night);
	padding: 0.35rem;
	border: 0;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--mp-paper);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
}

.mpower-brand .wp-block-site-tagline { white-space: nowrap; }

/* Horoscope's 12 rashis: hidden in the desktop menu (Horoscope links to the hub), a grid at the foot of the phone menu. */
.mpower-nav .mpower-nav-rashis > .wp-block-navigation__submenu-container { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .mpower-nav-rashis { order: 99; width: 100%; margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--mp-line); }
/* Core pads submenus by 2rem in the phone menu; the grid needs the full width (hence the long selector). */
.mpower-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .mpower-nav-rashis > .wp-block-navigation__submenu-container {
	display: grid;
	/* The phone menu shrinks to its widest item, so the tiles need a width of their own to fit "Vrishchik". */
	grid-template-columns: repeat(3, minmax(6.25rem, 1fr));
	gap: 0.5rem;
	width: 100%;
	margin-top: 0.75rem;
	padding: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .mpower-nav-rashis .wp-block-navigation__submenu-container > li { width: 100%; }
.wp-block-navigation__responsive-container.is-menu-open .mpower-nav-rashis .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.65rem 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.05rem;
	text-align: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--mp-line);
	border-radius: 12px;
}

/* Core only collapses the menu below 600px; ours collapses below 1100px, where the six links and the actions
   no longer fit on one row (at 1024px "Blog" and the button wrapped). */
@media (max-width: 1099px) {
	.mpower-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.mpower-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.mpower-header .mpower-header__actions { order: 2; margin-left: auto; }
	.mpower-header .mpower-nav { order: 3; }
}

@media (max-width: 781px) {
	.mpower-header .mpower-header__cta,
	.mpower-header .mpower-header__actions .wp-block-search { display: none; }
	.mpower-header__row { gap: 0.75rem; }
	.mpower-header .mpower-header__actions { order: 2; margin-left: auto; }
	.mpower-header .mpower-nav { order: 3; }
	.mpower-brand .wp-block-site-title { font-size: 1.35rem; }
	.mpower-brand .wp-block-site-tagline { font-size: 0.62rem; letter-spacing: 0.14em; }
	.mpower-brand { min-height: 2.4rem; padding-left: 3rem; }
	.mpower-brand .mpower-logo { width: 2.4rem; height: 2.4rem; }
}

/* Hero ---------------------------------------------------------------------- */

/* A looping video of the study at night fills the hero behind the text (assets/js/hero.js). The still frame under it
   shows first, and instead of it for reduced motion, Save-Data and no-JS visitors. A see-through night tint (60% at the
   text, fading to 12% over the sphere) lets the video show behind the text, and a brass grid lies over both. Below
   1024px the picture moves into a band under the text, so the text sits on plain night with the grid. */
.mpower-hero {
	--mp-hero-scrim: 12 16 41; /* night-deep as RGB channels, for the scrim's alpha steps */
	--mp-hero-cell: 72px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-content: center;
	min-height: clamp(34rem, 52vw, 50rem);
	/* The quick-action cards overlap the bottom spacing-50 of the hero. */
	padding-block: var(--wp--preset--spacing--60) calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--50));
	background: var(--mp-night-deep);
}

.mpower-hero > .mpower-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	max-width: none;
	margin: 0 !important;
}

.mpower-hero__media :is(img, video) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% 50%;
}

.mpower-hero__video { opacity: 0; transition: opacity 1.2s ease; }
.mpower-hero__media.has-video .mpower-hero__video { opacity: 1; }

.mpower-hero__media::after {
	/* Where the text column ends: the container's left edge plus the widest hero line. */
	--mp-hero-text-end: calc(max(var(--wp--style--root--padding-left, 1.5rem), (100% - 1200px) / 2) + 40rem);
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgb(var(--mp-hero-scrim) / 0.55), rgb(var(--mp-hero-scrim) / 0) 30%),
		linear-gradient(90deg, rgb(var(--mp-hero-scrim) / 0.6), rgb(var(--mp-hero-scrim) / 0.45) var(--mp-hero-text-end), rgb(var(--mp-hero-scrim) / 0.12) calc(var(--mp-hero-text-end) + 30%));
}

/* The grid, like the Vastu grid in the logo: fine brass lines, and squares a little lighter or darker than their
   neighbours (assets/img/hero-grid.svg, 8 × 5, repeated). Its lines start at the text column's left edge, and it fades
   towards the right so the sphere stays clear. Above the video and its tint, below the text. */
.mpower-hero::after {
	--mp-hero-grid-x: max(var(--wp--style--root--padding-left, 1.5rem), (100vw - 1200px) / 2);
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(90deg, rgb(217 189 140 / 0.13) 1px, transparent 1px),
		linear-gradient(180deg, rgb(217 189 140 / 0.13) 1px, transparent 1px),
		url("../img/hero-grid.svg");
	background-size:
		var(--mp-hero-cell) var(--mp-hero-cell),
		var(--mp-hero-cell) var(--mp-hero-cell),
		calc(var(--mp-hero-cell) * 8) calc(var(--mp-hero-cell) * 5);
	background-position: var(--mp-hero-grid-x) 0;
	-webkit-mask-image: linear-gradient(90deg, #000 45%, rgb(0 0 0 / 0.35));
	mask-image: linear-gradient(90deg, #000 45%, rgb(0 0 0 / 0.35));
}

.mpower-hero > .mpower-hero__content { width: 100%; margin-block: 0; }
.mpower-hero__content > * { max-width: 40rem; }
.mpower-hero h1 { margin-block: 0.5rem 1.25rem; }
.mpower-hero__lede {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--mp-on-night);
	max-width: 34rem;
	margin-bottom: 2rem;
}

.mpower-hero__pause {
	position: absolute;
	z-index: 1;
	right: max(var(--wp--style--root--padding-right, 1.5rem), (100% - 1200px) / 2);
	bottom: calc(var(--wp--preset--spacing--50) + 1rem);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.25rem;
	margin: 0 !important;
	padding: 0.4rem 0.9rem 0.4rem 0.75rem;
	font: 600 0.8rem/1 var(--wp--preset--font-family--body);
	letter-spacing: 0.04em;
	color: var(--mp-paper);
	background: rgb(var(--mp-hero-scrim) / 0.75);
	border: 1px solid rgb(217 189 140 / 0.45);
	border-radius: 999px;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.mpower-hero__pause[hidden] { display: none; }
.mpower-hero__pause:hover { background: rgb(var(--mp-hero-scrim) / 0.85); border-color: var(--mp-brass-light); }
.mpower-hero__pause svg { width: 0.8rem; height: 0.8rem; }
.mpower-hero__pause .is-play,
.mpower-hero__pause.is-paused .is-pause { display: none; }
.mpower-hero__pause.is-paused .is-play { display: block; }

@media (max-width: 1023px) {
	.mpower-hero {
		--mp-hero-band: clamp(15rem, 72vw, 30rem);
		--mp-hero-cell: 48px;
		display: block;
		min-height: 0;
		padding-block: var(--wp--preset--spacing--60) calc(var(--mp-hero-band) - 2rem);
	}
	.mpower-hero > .mpower-hero__media { top: auto; height: var(--mp-hero-band); }
	.mpower-hero__media :is(img, video) { object-position: 90% 60%; }
	.mpower-hero__media::after {
		background: linear-gradient(180deg, var(--mp-night-deep), rgb(var(--mp-hero-scrim) / 0.7) 20%, rgb(var(--mp-hero-scrim) / 0) 55%);
	}
	/* The grid covers the text and the picture band alike, fading a little towards the bottom. */
	.mpower-hero::after {
		-webkit-mask-image: linear-gradient(180deg, #000 55%, rgb(0 0 0 / 0.5));
		mask-image: linear-gradient(180deg, #000 55%, rgb(0 0 0 / 0.5));
	}
	/* Bottom left, over the dark wall, so it doesn't cover the diya. */
	.mpower-hero__pause { right: auto; left: var(--wp--style--root--padding-left, 1.25rem); }
}

/* Rashi medallions ------------------------------------------------------------ */

.mpower-rashis {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 2rem 1rem;
}

.mpower-rashi {
	display: grid;
	justify-items: center;
	gap: 0.1rem;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

.mpower-rashi__medallion {
	width: clamp(76px, 9vw, 104px);
	aspect-ratio: 1;
	margin-bottom: 0.7rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--mp-brass-light);
	background:
		radial-gradient(circle at 30% 25%, rgba(217, 189, 140, 0.18), transparent 55%),
		var(--mp-night);
	box-shadow:
		inset 0 0 0 1px rgba(217, 189, 140, 0.45),
		inset 0 0 0 6px var(--mp-night),
		inset 0 0 0 7px rgba(217, 189, 140, 0.22);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mpower-rashi__medallion .mpower-icon { width: 46%; height: 46%; }

.mpower-rashi:hover .mpower-rashi__medallion,
.mpower-rashi:focus-visible .mpower-rashi__medallion {
	transform: translateY(-3px);
	box-shadow:
		inset 0 0 0 1px rgba(217, 189, 140, 0.7),
		inset 0 0 0 6px var(--mp-night),
		inset 0 0 0 7px rgba(217, 189, 140, 0.35),
		0 12px 28px rgba(20, 26, 58, 0.22);
}

.mpower-rashi__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3rem;
	line-height: 1.1;
}

.mpower-rashi__meta {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mp-muted);
}

/* Tags ------------------------------------------------------------------------ */

[data-element="fire"] { --mp-el: var(--wp--custom--element--fire); }
[data-element="earth"] { --mp-el: var(--wp--custom--element--earth); }
[data-element="air"] { --mp-el: var(--wp--custom--element--air); }
[data-element="water"] { --mp-el: var(--wp--custom--element--water); }
[data-element="space"] { --mp-el: var(--wp--custom--element--space); }

.mpower-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.15rem 0.7rem;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 600;
	/* The element colour darkened towards night, so the label keeps 4.5:1 on its own tint. */
	color: color-mix(in srgb, var(--mp-el, var(--mp-brass-deep)) 72%, var(--mp-night));
	background: color-mix(in srgb, var(--mp-el, var(--mp-brass)) 11%, white);
}

.mpower-tag::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.mpower-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
}

.mpower-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 600;
	color: var(--mp-night);
	text-decoration: none;
}

.mpower-link-arrow .mpower-icon { width: 1.1em; height: 1.1em; transition: transform 0.2s ease; }
.mpower-link-arrow:hover .mpower-icon { transform: translateX(3px); }

/* Service cards --------------------------------------------------------------- */

.mpower-services {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
	gap: 1.25rem;
}

.mpower-service {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1.5rem 1.5rem 1.25rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mpower-service:hover {
	border-color: color-mix(in srgb, var(--mp-brass) 55%, var(--mp-line));
	box-shadow: var(--wp--preset--shadow--soft);
}

.mpower-service .mpower-tag { align-self: flex-start; }
.mpower-service h3 { margin: 0.35rem 0 0; font-size: 1.55rem; }

/* Seven services fill two rows of four when the first (Vastu, the signature service) spans two columns. */
@media (min-width: 1000px) {
	.mpower-services { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.mpower-services > .mpower-service:first-child {
		grid-column: span 2;
		color: var(--mp-on-night);
		background:
			radial-gradient(ellipse at 100% 0%, rgba(94, 70, 145, 0.35), transparent 60%),
			var(--mp-night);
		border-color: var(--mp-night);
	}

	.mpower-services > .mpower-service:first-child h3 { color: var(--mp-paper); font-size: 2rem; }
	.mpower-services > .mpower-service:first-child p { max-width: 30rem; font-size: 1.05rem; }
	.mpower-services > .mpower-service:first-child .mpower-service__modes,
	.mpower-services > .mpower-service:first-child .mpower-service__price { color: var(--mp-on-night-muted); }
	.mpower-services > .mpower-service:first-child .mpower-service__foot { border-top-color: rgba(217, 189, 140, 0.25); }
	.mpower-services > .mpower-service:first-child .mpower-link-arrow { color: var(--mp-brass-light); }
	.mpower-services > .mpower-service:first-child .mpower-tag { background: rgba(217, 189, 140, 0.14); color: var(--mp-brass-light); }
}
.mpower-service p { margin: 0; }
.mpower-service__modes { font-size: 0.9rem; color: var(--mp-muted); }

.mpower-service__foot {
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--mp-line);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
}

.mpower-service__price { font-size: 0.92rem; color: var(--mp-muted); }

/* Product cards (home band and shop) ------------------------------------------------------------
   The range is what the site sells, so on the night band each product sits on a white card that lifts off the
   dark, with its line drawing (or photo) on a spotlit night stage inside. */

.mpower-products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
	gap: 1.25rem;
}

.mpower-product {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0.7rem 1.15rem 1.25rem;
	color: var(--mp-night);
	background: var(--wp--preset--color--white);
	border-radius: var(--mp-radius);
	box-shadow:
		0 0 0 1px rgba(217, 189, 140, 0.45),
		0 28px 56px -26px rgba(4, 6, 20, 0.9);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mpower-product:hover,
.mpower-product:focus-within {
	transform: translateY(-4px);
	box-shadow:
		0 0 0 1px var(--mp-brass-light),
		0 36px 64px -24px rgba(4, 6, 20, 0.95);
}

.mpower-product__art {
	aspect-ratio: 4 / 3;
	margin: 0 -0.45rem 0.7rem;
	border-radius: 11px;
	display: grid;
	place-items: center;
	overflow: hidden;
	color: var(--mp-brass-light);
	background:
		radial-gradient(circle at 50% 60%, rgba(236, 160, 60, 0.5), rgba(224, 138, 30, 0.12) 42%, transparent 70%),
		linear-gradient(180deg, #1B2150, var(--mp-night-deep));
}

.mpower-product__art svg { width: 50%; height: auto; filter: drop-shadow(0 0 10px rgba(236, 160, 60, 0.4)); }
.mpower-product__art--photo img { width: 100%; height: 100%; object-fit: cover; }

.mpower-product__variant {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mp-brass-deep);
}

.mpower-product h3 { margin: 0; font-size: 1.4rem; }

/* The name's link covers the whole card; the button sits above it. */
.mpower-product h3 a { color: var(--mp-night); text-decoration: none; }
.mpower-product h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mpower-product h3 a:focus-visible { outline: none; }
.mpower-product:has(h3 a:focus-visible) { outline: 2px solid var(--mp-marigold); outline-offset: 3px; }

.mpower-product__line { margin: 0; font-size: 0.95rem; color: var(--mp-muted); }

.mpower-product__foot {
	margin-top: auto;
	padding-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
}

.mpower-product__price {
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--mp-night);
	font-variant-numeric: tabular-nums;
}

.mpower-product__foot > a {
	position: relative;
	z-index: 1;
	font-size: 0.9rem;
}

.mpower-product .mpower-product__add {
	padding: 0.55rem 1rem 0.5rem;
	font-size: 0.9rem;
	text-decoration: none;
}

.mpower-product .mpower-product__add.loading { opacity: 0.6; pointer-events: none; }
.mpower-product .mpower-product__add.added::after { content: " ✓"; }

.mpower-product .mpower-product__action,
.mpower-product .added_to_cart {
	padding: 0.5rem 0.95rem 0.45rem;
	border: 1px solid var(--mp-brass);
	border-radius: 999px;
	color: var(--mp-night);
	font-weight: 600;
	text-decoration: none;
}

.mpower-product .mpower-product__action:hover,
.mpower-product .added_to_cart:hover { background: var(--wp--preset--color--mist); }

/* After an add, WooCommerce puts "View cart" next to the button. */
.mpower-product .added_to_cart { flex-basis: 100%; text-align: center; }

.mpower-products__more { margin-top: var(--wp--preset--spacing--50); justify-content: space-between; }
.mpower-products__more p { margin: 0; }
.is-style-night .mpower-products__more .mpower-link-arrow { color: var(--mp-brass-light); }

/* Product comparison: a table on wide screens, one card per product on phones ------------- */

.mpower-compare {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-radius);
	font-size: 0.98rem;
}

.mpower-compare :is(th, td) {
	padding: 1rem 1.1rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--mp-line);
}

.mpower-compare tbody tr:last-child :is(th, td) { border-bottom: 0; }

.mpower-compare thead th {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mp-muted);
}

.mpower-compare tbody th { font-weight: 600; width: 24%; }
.mpower-compare tbody th a { color: var(--mp-night); text-decoration: none; }
.mpower-compare tbody th a:hover { color: var(--mp-brass-deep); }
.mpower-compare__size { color: var(--mp-brass-deep); white-space: nowrap; }
.mpower-compare__price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.mpower-compare tr.is-current :is(th, td) { background: color-mix(in srgb, var(--mp-marigold) 7%, white); }
.mpower-compare tr.is-current th { box-shadow: inset 3px 0 0 var(--mp-marigold); }

.mpower-compare__here {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mp-brass-deep);
}

@media (max-width: 781px) {
	.mpower-compare,
	.mpower-compare tbody { display: block; background: none; border: 0; }
	.mpower-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.mpower-compare tbody { display: grid; gap: 0.9rem; }

	.mpower-compare tr {
		display: grid;
		gap: 0.55rem;
		padding: 1.1rem 1.15rem;
		background: var(--wp--preset--color--white);
		border: 1px solid var(--mp-line);
		border-radius: var(--mp-radius);
	}

	.mpower-compare tr.is-current { background: color-mix(in srgb, var(--mp-marigold) 7%, white); border-color: color-mix(in srgb, var(--mp-marigold) 45%, var(--mp-line)); }
	.mpower-compare tr.is-current :is(th, td) { background: none; box-shadow: none; }

	.mpower-compare :is(th, td) { display: block; width: auto; padding: 0; border: 0; }
	.mpower-compare tbody th { width: auto; font-size: 1.1rem; }
	.mpower-compare td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; }

	.mpower-compare td::before {
		content: attr(data-label);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--mp-muted);
		padding-top: 0.2rem;
	}
}

/* Shop assurances ------------------------------------------------------------------------ */

.mpower-trust {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.75rem 1.5rem;
}

.mpower-trust li { display: grid; gap: 0.35rem; align-content: start; }
.mpower-trust h3 { margin: 0.5rem 0 0; font-size: 1.25rem; }
.mpower-trust p { margin: 0; color: var(--mp-muted); font-size: 0.95rem; }

.mpower-trust__icon {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--mp-brass-deep);
	background: color-mix(in srgb, var(--mp-brass) 12%, white);
}

.mpower-trust__icon .mpower-icon { width: 22px; height: 22px; }

@media (max-width: 900px) {
	.mpower-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
	.mpower-trust { grid-template-columns: minmax(0, 1fr); }
}

/* Quick actions --------------------------------------------------------------- */

.mpower-quick-band { padding-block: 0 var(--wp--preset--spacing--50); }

.mpower-quicks {
	list-style: none;
	margin: calc(-1 * var(--wp--preset--spacing--50)) 0 0;
	padding: 0;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.mpower-quicks > li,
.mpower-products > li { display: flex; }

.mpower-quick {
	flex: 1;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	column-gap: 0.9rem;
	row-gap: 0.15rem;
	padding: 1.15rem 1.2rem;
	color: inherit;
	text-decoration: none;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-radius);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.mpower-quick:hover { border-color: color-mix(in srgb, var(--mp-brass) 60%, var(--mp-line)); transform: translateY(-2px); }

.mpower-quick__icon {
	grid-row: 1 / 3;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--mp-brass-deep);
	background: color-mix(in srgb, var(--mp-brass) 12%, white);
}

.mpower-quick__icon .mpower-icon { width: 22px; height: 22px; }
.mpower-quick__title { font-weight: 600; line-height: 1.3; align-self: end; }
.mpower-quick__text { font-size: 0.88rem; line-height: 1.45; color: var(--mp-muted); }

/* Free tools grid ------------------------------------------------------------------ */

.mpower-toolgrid { display: grid; gap: 1rem; margin-block: var(--wp--preset--spacing--50); }
.mpower-toolgrid__title { margin: 1rem 0 0; font-size: var(--wp--preset--font-size--large); }
.mpower-quicks.mpower-quicks--grid { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mpower-quicks--grid .mpower-quick { box-shadow: none; }

@media (max-width: 900px) {
	.mpower-quicks.mpower-quicks--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.mpower-quicks.mpower-quicks--grid { grid-template-columns: minmax(0, 1fr); }
	.mpower-quicks--grid .mpower-quick { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; }
	.mpower-quicks--grid .mpower-quick__icon { grid-row: 1 / 3; }
	.mpower-quicks--grid .mpower-quick__text { display: block; }
}

/* Founder teaser ---------------------------------------------------------------- */

.mpower-founder { gap: var(--wp--preset--spacing--60); }

.mpower-portrait {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 380px;
	margin-inline: auto;
	border-radius: 200px 200px 16px 16px;
	display: grid;
	place-items: center;
	overflow: hidden;
	color: var(--mp-brass-light);
	background:
		radial-gradient(circle at 50% 38%, rgba(217, 189, 140, 0.16), transparent 60%),
		var(--mp-night);
}

.mpower-portrait__ring {
	position: absolute;
	inset: 18px;
	border: 1px solid rgba(217, 189, 140, 0.35);
	border-radius: 190px 190px 10px 10px;
}

.mpower-portrait__mark {
	font-family: var(--wp--preset--font-family--display);
	font-size: 6rem;
	line-height: 1;
	opacity: 0.85;
}

.mpower-portrait__note {
	position: absolute;
	bottom: 1.6rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mp-on-night-muted);
}

.mpower-signs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2.25rem;
	margin: 1.5rem 0;
	padding: 1rem 0;
	border-block: 1px solid var(--mp-line);
}

.mpower-signs dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mp-muted); }
.mpower-signs dd { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 1.35rem; }

/* The two founders side by side under arches, the son's portrait set a little lower (patterns/founder.php). */
.mpower-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	max-width: 440px;
	margin-inline: auto;
	padding-bottom: 2.5rem;
}
.mpower-duo__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 200px 200px 14px 14px;
	box-shadow: 0 18px 36px -22px rgb(12 16 41 / 0.55);
}
.mpower-duo__photo--second { transform: translateY(2.5rem); }

/* About: the founders ------------------------------------------------------------ */

/* The header's column is left-aligned in the page width (a constrained layout would centre a narrower group). */
.mpower-about-intro > * { max-width: 44rem; }
.mpower-about-intro h1 { margin-block: 0.4rem 0.9rem; }
.mpower-about-intro .wp-block-post-excerpt__excerpt { margin: 0; }
.mpower-about-story { padding-block-start: 0; }

/* Their years of practice, on a card over the edge of the header (as on the tool pages). */
.mpower-founder-stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	background: var(--wp--preset--color--white);
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-radius);
	box-shadow: 0 18px 40px -26px rgb(12 16 41 / 0.4);
}
/* Three classes: WordPress's own ":root :where(.is-layout-constrained) > :first-child" rule sets it to 0. */
.mpower-about-story .wp-block-post-content > .mpower-founder-stats { margin-block-start: -3rem; }
.mpower-founder-stats > * { margin: 0; }
.mpower-founder-stat { padding: 1.35rem 1.6rem; }
.mpower-founder-stat + .mpower-founder-stat { border-left: 1px solid var(--mp-line); }
.mpower-founder-stat p { margin: 0; }
.mpower-founder-stat .mpower-founder-stat__num { font-family: var(--wp--preset--font-family--display); font-size: 2.6rem; line-height: 1; color: var(--mp-brass-deep); }
.mpower-founder-stat .mpower-founder-stat__label { margin-top: 0.5rem; font-weight: 600; line-height: 1.3; }
.mpower-founder-stat .mpower-founder-stat__who { margin-top: 0.15rem; font-size: 0.9rem; color: var(--mp-muted); }

/* A profile each: the portrait under an arch with a brass outline set off behind it, mirrored for the second. */
.mpower-profile { gap: var(--wp--preset--spacing--60); margin-block-start: var(--wp--preset--spacing--70); }
.mpower-profile__photo { position: relative; isolation: isolate; max-width: 380px; margin: 0 auto 1.1rem; }
.mpower-profile__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 200px 200px 16px 16px; }
.mpower-profile__photo::before {
	content: "";
	position: absolute;
	inset: 1.1rem -1.1rem -1.1rem 1.1rem;
	z-index: -1;
	border: 1px solid var(--mp-brass);
	border-radius: 200px 200px 16px 16px;
}
.mpower-profile__photo::after {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgb(255 255 255 / 0.5);
	border-radius: 186px 186px 10px 10px;
	pointer-events: none;
}
.mpower-profile--reverse .mpower-profile__photo::before { inset: 1.1rem 1.1rem -1.1rem -1.1rem; }
.mpower-profile .is-style-eyebrow { margin: 0; }
.mpower-prose .mpower-profile h2 { margin: 0.35rem 0 1rem; font-size: var(--wp--preset--font-size--xx-large); }
.mpower-profile--reverse + .wp-block-heading { margin-top: var(--wp--preset--spacing--70); }

@media (min-width: 782px) {
	.mpower-profile--reverse { flex-direction: row-reverse; }
}

/* How it works ------------------------------------------------------------------ */

.mpower-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	counter-reset: none;
}

.mpower-steps li { display: grid; gap: 0.4rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--mp-brass); }
.mpower-step__n { font-family: var(--wp--preset--font-family--display); font-size: 2.2rem; line-height: 1; color: var(--mp-brass-deep); }
.mpower-steps h3 { margin: 0.4rem 0 0; font-size: 1.3rem; }
.mpower-steps p { margin: 0; color: var(--mp-muted); }

/* Reviews and FAQ blocks ------------------------------------------------------ */

.mpower-reviews {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 1.25rem;
}

.mpower-review {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.5rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-radius);
}

.mpower-review blockquote { margin: 0; font-size: 1.05rem; }
.mpower-review blockquote p { margin: 0 0 0.5rem; }
.mpower-review__who { margin: auto 0 0; display: grid; font-size: 0.92rem; }
.mpower-review__who span { color: var(--mp-muted); }
.mpower-stars { color: var(--mp-marigold); letter-spacing: 0.12em; }
.mpower-stars__off { color: var(--mp-line); }

.mpower-faq { max-width: 52rem; border-top: 1px solid var(--mp-line); }
.mpower-faq__item { border-bottom: 1px solid var(--mp-line); }

.mpower-faq__item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 0;
	font-weight: 600;
	font-size: 1.05rem;
}

.mpower-faq__item summary::-webkit-details-marker { display: none; }

.mpower-faq__item summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--mp-brass-deep);
	border-bottom: 1.5px solid var(--mp-brass-deep);
	transform: rotate(45deg) translateY(-3px);
	transition: transform 0.2s ease;
}

.mpower-faq__item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.mpower-faq__answer { padding-bottom: 1.1rem; color: var(--mp-muted); max-width: 44rem; }
.mpower-faq__answer p { margin: 0 0 0.75rem; }

/* Single consultation ------------------------------------------------------------ */

.mpower-service-hero .mpower-section__head { margin-bottom: var(--wp--preset--spacing--40); }
.mpower-service-hero .wp-block-post-excerpt__excerpt { margin: 0; }
.mpower-service-hero .mpower-note { margin: 0.25rem 0 0; }
.mpower-prose { font-size: 1.125rem; }
.mpower-prose h2 { margin: var(--wp--preset--spacing--50) 0 0.75rem; font-size: var(--wp--preset--font-size--large); }
.mpower-prose h3 { margin: 1.75rem 0 0.5rem; font-size: 1.25rem; }
/* Only plain lists in running text: tool and card lists inside the prose set their own spacing. */
.mpower-prose :is(.wp-block-list, ul:not([class]), ol:not([class])) > li + li { margin-top: 0.35rem; }

/* Tool pages -------------------------------------------------------------------- */

/* Tool pages open on a star map (generated with Higgsfield). Its constellations sit on the right; the scrim holds
   the text column at 84% night or more, which keeps even the muted lede above 5:1 over the brightest star. */
.mpower-tool-hero {
	--mp-text-end: calc(max(var(--wp--style--root--padding-left, 1.5rem), (100% - 1200px) / 2) + 40rem);
	padding-block-end: calc(var(--wp--preset--spacing--60) + 3rem);
	background-color: var(--mp-night-deep);
	background-image:
		linear-gradient(90deg, rgb(12 16 41 / 0.9), rgb(12 16 41 / 0.84) var(--mp-text-end), rgb(12 16 41 / 0.15) calc(var(--mp-text-end) + 30%)),
		url("../img/star-map-1280.webp");
	background-image:
		linear-gradient(90deg, rgb(12 16 41 / 0.9), rgb(12 16 41 / 0.84) var(--mp-text-end), rgb(12 16 41 / 0.15) calc(var(--mp-text-end) + 30%)),
		image-set(url("../img/star-map-1280.webp") 1x, url("../img/star-map-1920.webp") 2x);
	background-size: cover;
	background-position: 100% 50%;
}
.mpower-tool-hero .wp-block-post-excerpt__excerpt { margin: 0; }
.mpower-tool-body { padding-block-start: 0; }
.mpower-tool-body .mpower-tool { margin-top: -3rem; margin-bottom: var(--wp--preset--spacing--60); position: relative; }
.mpower-tool-body h2 { margin-top: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--large); }
.mpower-tool-body .mpower-block-section { margin-top: var(--wp--preset--spacing--60); }

/* 404: a compass on a hilltop under the Milky Way (generated with Higgsfield). Text on the left over a scrim of 84%
   night or more; below 782px the picture drops into a band under the text. */
.mpower-lost {
	--mp-text-end: calc(max(var(--wp--style--root--padding-left, 1.5rem), (100% - 1200px) / 2) + 36rem);
	display: grid;
	align-content: center;
	min-height: clamp(34rem, 72vh, 48rem);
	background-color: var(--mp-night-deep);
	background-image:
		linear-gradient(90deg, rgb(12 16 41 / 0.9), rgb(12 16 41 / 0.84) var(--mp-text-end), rgb(12 16 41 / 0) calc(var(--mp-text-end) + 25%)),
		url("../img/lost-1280.webp");
	background-image:
		linear-gradient(90deg, rgb(12 16 41 / 0.9), rgb(12 16 41 / 0.84) var(--mp-text-end), rgb(12 16 41 / 0) calc(var(--mp-text-end) + 25%)),
		image-set(url("../img/lost-1280.webp") 1x, url("../img/lost-1920.webp") 2x);
	background-size: cover;
	background-position: 50% 60%;
}
.mpower-lost > .mpower-lost__text { width: 100%; margin-block: 0; }
.mpower-lost__text > * { max-width: 36rem; }
.mpower-lost__text p:not(.is-style-eyebrow) { color: var(--mp-on-night); }

@media (max-width: 781px) {
	.mpower-lost {
		align-content: start;
		min-height: 0;
		padding-block-end: 17rem;
		background-image:
			linear-gradient(180deg, var(--mp-night-deep) calc(100% - 26rem), rgb(12 16 41 / 0.84) calc(100% - 17rem), rgb(12 16 41 / 0.1) calc(100% - 11rem)),
			url("../img/lost-768.webp");
		background-image:
			linear-gradient(180deg, var(--mp-night-deep) calc(100% - 26rem), rgb(12 16 41 / 0.84) calc(100% - 17rem), rgb(12 16 41 / 0.1) calc(100% - 11rem)),
			image-set(url("../img/lost-768.webp") 1x, url("../img/lost-1280.webp") 2x);
		background-size: 100% 100%, auto 26rem;
		background-position: 0 0, 86% 100%;
		background-repeat: no-repeat;
	}
}

/* Closing call to action -------------------------------------------------------- */

.mpower-cta h2 { margin-block: 0.4rem 0.75rem; }

/* Style guide specimens ----------------------------------------------------- */

.mpower-swatches {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
	gap: 1.25rem 1rem;
}

.mpower-swatch__chip {
	height: 76px;
	border-radius: 12px;
	border: 1px solid rgba(20, 26, 58, 0.1);
	margin-bottom: 0.55rem;
}

.mpower-swatch strong { display: block; font-weight: 600; }
.mpower-swatch small { display: block; color: var(--mp-muted); font-size: 0.85rem; line-height: 1.4; }
.mpower-swatch code { font-size: 0.78rem; color: var(--mp-muted); }

.mpower-specimen {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	gap: 1rem 2rem;
	align-items: baseline;
	padding-block: 1.1rem;
	border-top: 1px solid var(--mp-line);
}

.mpower-specimen > :first-child {
	font-size: 0.8rem;
	color: var(--mp-muted);
	line-height: 1.4;
}

.mpower-specimen :is(h1, h2, h3, p) { margin: 0; }

.mpower-groups {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.mpower-groups h3 { font-size: var(--wp--preset--font-size--medium); margin: 0 0 1rem; }

/* Forms ---------------------------------------------------------------------- */

.mpower-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1rem;
	max-width: 46rem;
}

.mpower-field { display: grid; gap: 0.35rem; align-content: start; }
.mpower-field--wide { grid-column: 1 / -1; }
.mpower-field label { font-size: 0.92rem; font-weight: 600; }
.mpower-field small { font-size: 0.82rem; color: var(--mp-muted); }

.mpower-form :is(input, select, textarea) {
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 0.9rem;
	font: inherit;
	color: inherit;
	background: var(--wp--preset--color--white);
	border: 1px solid #D3D1DC;
	border-radius: 10px;
	box-shadow: inset 0 1px 2px rgba(20, 26, 58, 0.04);
}

.mpower-form :is(input, select, textarea):focus {
	border-color: var(--mp-brass);
	outline: 2px solid color-mix(in srgb, var(--mp-marigold) 55%, transparent);
	outline-offset: 1px;
}

.mpower-form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.mpower-form__actions .wp-element-button { border: 0; cursor: pointer; }

/* Footer --------------------------------------------------------------------- */

.mpower-footer { padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); }

.mpower-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
	gap: 2.5rem 2rem;
}

.mpower-footer__brand .wp-block-site-title { letter-spacing: 0.08em; text-transform: uppercase; }
.mpower-footer__brand .wp-block-site-title a { color: var(--mp-paper); display: inline-flex; align-items: center; gap: 0.85rem; }
.mpower-footer__brand p { color: var(--mp-on-night-muted); max-width: 22rem; }

.mpower-footer .is-style-eyebrow { margin-bottom: 0.9rem; }

.mpower-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.4rem;
	font-size: 0.95rem;
}

.mpower-footer ul.mpower-footer__rashis { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }

.is-style-night.mpower-footer a:where(:not(.wp-element-button)) { color: var(--mp-on-night); text-decoration: none; }
.is-style-night.mpower-footer a:where(:not(.wp-element-button)):hover { color: var(--mp-brass-light); }

.mpower-footer__legal {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: 1.25rem;
	border-top: 1px solid rgba(217, 189, 140, 0.2);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	font-size: 0.85rem;
	color: var(--mp-on-night-muted);
}

.mpower-footer__legal p { margin: 0; max-width: 46rem; }

/* Mini-cart drawer (opens from the header on every page) ------------------------------ */

.wc-block-mini-cart__drawer .wc-block-mini-cart__title { font-family: var(--wp--preset--font-family--display); font-weight: 400; }
.wc-block-mini-cart__drawer .wc-block-components-product-name { font-weight: 600; color: var(--mp-night); text-decoration: none; }
.wc-block-mini-cart__drawer a.wc-block-components-product-name:hover { color: var(--mp-brass-deep); }
.wc-block-mini-cart__drawer .wc-block-components-product-metadata { color: var(--mp-muted); font-size: 0.9rem; }
.wc-block-mini-cart__drawer .wc-block-cart-item__image img { border-radius: 10px; }
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector,
.wc-block-mini-cart__drawer .wc-block-components-quantity-selector::after { border-radius: 999px; border-color: #C9C7D3; }
.wc-block-mini-cart__drawer .wc-block-components-button:not(.is-link) { border-radius: 999px; font-weight: 600; min-height: 52px; }
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart.wc-block-components-button { background: transparent; color: var(--mp-night); border: 1px solid var(--mp-brass); }
.wc-block-mini-cart__drawer .mpower-mini-cart-empty { margin: var(--wp--preset--spacing--50) 0 1rem; font-size: var(--wp--preset--font-size--large); text-align: center; }

/* Phone bottom bar and WhatsApp button --------------------------------------- */

.mpower-phone-bar { display: none; }

.mpower-whatsapp {
	position: fixed;
	right: 1.25rem;
	bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
	z-index: 50;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.15rem 0.7rem 0.95rem;
	border-radius: 999px;
	color: var(--mp-paper);
	background: var(--mp-night);
	border: 1px solid rgba(217, 189, 140, 0.4);
	box-shadow: 0 10px 28px rgba(12, 16, 41, 0.28);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
}

.mpower-whatsapp:hover { color: var(--mp-paper); background: #1D2450; }
.mpower-whatsapp .mpower-icon { color: var(--mp-brass-light); width: 22px; height: 22px; }

/* Responsive ------------------------------------------------------------------ */

@media (max-width: 1000px) {
	.mpower-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mpower-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
	.mpower-rashis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mpower-quicks,
	.mpower-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
	body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
	body.mpower-no-phone-bar { padding-bottom: 0; }

	.mpower-whatsapp { display: none; }

	.mpower-phone-bar {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 50;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		padding: 0.45rem 0.25rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
		background: rgba(12, 16, 41, 0.96);
		border-top: 1px solid rgba(217, 189, 140, 0.25);
		backdrop-filter: blur(10px);
	}

	.mpower-phone-bar a {
		display: grid;
		justify-items: center;
		gap: 0.15rem;
		padding-block: 0.25rem;
		color: var(--mp-on-night);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.02em;
		text-decoration: none;
	}

	/* Book, the third of five, is the one to press. */
	.mpower-phone-bar a:nth-child(3) { color: var(--mp-marigold); }
	.mpower-phone-bar .mpower-icon { width: 22px; height: 22px; }

	.mpower-specimen { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* Narrow phones (360px Android, 320px SE): the logo, name, tagline, account, cart and menu button fit one row. */
@media (max-width: 400px) {
	.mpower-header__row { gap: 0.5rem; }
	.mpower-header .mpower-header__actions { gap: 0.1rem; }
	.mpower-brand { min-height: 2.15rem; padding-left: 2.65rem; }
	.mpower-brand .mpower-logo { width: 2.15rem; height: 2.15rem; }
	.mpower-brand .wp-block-site-title { font-size: 1.2rem; }
	.mpower-brand .wp-block-site-tagline { font-size: 0.56rem; letter-spacing: 0.1em; }
}

@media (max-width: 600px) {
	.mpower-rashis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 0.5rem; }
	.mpower-form { grid-template-columns: 1fr; }
	.mpower-steps { grid-template-columns: 1fr; }
	.mpower-cta .wp-block-buttons { justify-content: flex-start; }

	.mpower-quicks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
	.mpower-quick { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 0.6rem; padding: 1rem; }
	.mpower-quick__icon { grid-row: auto; width: 40px; height: 40px; }
	.mpower-quick__title { align-self: start; font-size: 0.98rem; }
	.mpower-quick__text { display: none; }

	.mpower-rashi__lord { display: none; }
	.mpower-portrait { max-width: 260px; }
	.mpower-portrait__mark { font-size: 4.5rem; }
	.mpower-duo { max-width: 340px; }
	/* One stat per row, the number beside its label. */
	.mpower-founder-stats { grid-template-columns: minmax(0, 1fr); }
	.mpower-founder-stat { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 0.9rem; align-items: center; padding: 0.9rem 1.1rem; }
	.mpower-founder-stat + .mpower-founder-stat { border-left: 0; border-top: 1px solid var(--mp-line); }
	.mpower-founder-stat .mpower-founder-stat__num { grid-row: 1 / 3; font-size: 2.1rem; }
	.mpower-founder-stat .mpower-founder-stat__label { margin-top: 0; }
	.mpower-profile { margin-block-start: var(--wp--preset--spacing--60); }
	.mpower-profile__photo { max-width: 290px; }

	.mpower-product {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-rows: auto auto 1fr auto;
		column-gap: 1rem;
		row-gap: 0.2rem;
		padding: 0.9rem;
	}
	.mpower-product > :not(.mpower-product__art) { grid-column: 2; }
	.mpower-product__art { grid-row: 1 / -1; aspect-ratio: 1; margin: 0; align-self: start; }
	.mpower-product__art svg { width: 70%; }
	.mpower-product h3 { font-size: 1.2rem; }
	.mpower-product__line { font-size: 0.88rem; }
	.mpower-product__foot { padding-top: 0.45rem; }
	.mpower-product__price { font-size: 1rem; }

	.mpower-service { padding: 1.25rem 1.25rem 1rem; }
}

@media (max-width: 781px) {
	.mpower-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.mpower-hero__video { transition: none; }
	.mpower-rashi__medallion,
	.mpower-service,
	.mpower-product,
	.mpower-link-arrow .mpower-icon { transition: none; }
}

/* Contact page: the form card beside the details ---------------------------------------------- */

.mpower-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.mpower-contact-grid > * { margin: 0; }

.mpower-contact-form {
	margin-top: -3rem;
	position: relative;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-radius);
	box-shadow: var(--wp--preset--shadow--soft);
}

/* Fluent Forms, in the site's own field and button style */
.mpower-contact-form .fluentform .ff-el-group { margin-bottom: 1.1rem; }
.mpower-contact-form .fluentform .ff-el-input--label label { font-size: 0.92rem; font-weight: 600; color: var(--mp-night); }
.mpower-contact-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--wp--preset--color--kumkum); }
.mpower-contact-form .fluentform .ff-el-form-control {
	min-height: 48px;
	padding: 0.65rem 0.9rem;
	font: inherit;
	color: var(--mp-night);
	background-color: var(--wp--preset--color--white);
	border: 1px solid #D3D1DC;
	border-radius: 10px;
	box-shadow: inset 0 1px 2px rgba(20, 26, 58, 0.04);
}
.mpower-contact-form .fluentform textarea.ff-el-form-control { min-height: 8rem; }
.mpower-contact-form .fluentform .ff-el-form-control:focus { border-color: var(--mp-brass); outline: 2px solid color-mix(in srgb, var(--mp-marigold) 55%, transparent); outline-offset: 1px; }
.mpower-contact-form .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--wp--preset--color--kumkum); }
.mpower-contact-form .fluentform .error { color: var(--wp--preset--color--kumkum); font-size: 0.88rem; }
.mpower-contact-form .fluentform .ff-btn-submit.wp-element-button {
	padding: 0.8rem 1.6rem 0.75rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mp-night);
	background: var(--mp-marigold);
	border: 0;
	border-radius: 999px;
	opacity: 1;
}
.mpower-contact-form .fluentform .ff-btn-submit.wp-element-button:hover { background: #F09B32; }
.mpower-contact-form .ff-message-success { padding: 1.1rem 1.25rem; border: 1px solid color-mix(in srgb, #3B7A4A 45%, white); border-radius: 12px; background: #F3F8F3; box-shadow: none; }
.mpower-contact-form .ff-message-success p { margin: 0; }

.mpower-contact { display: grid; gap: 1.25rem; }
.mpower-contact > * { margin: 0; }
.mpower-contact__whatsapp { display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start; text-decoration: none; }
.mpower-contact__whatsapp .mpower-icon { width: 20px; height: 20px; }

.mpower-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.mpower-contact__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: start; }
.mpower-contact__list strong { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mp-muted); }
.mpower-contact__list small { display: block; color: var(--mp-muted); }
.mpower-contact__list a { color: var(--mp-night); font-weight: 600; overflow-wrap: anywhere; }
.mpower-contact__icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--mp-brass-deep); background: color-mix(in srgb, var(--mp-brass) 12%, white); }
.mpower-contact__icon .mpower-icon { width: 20px; height: 20px; }

.mpower-contact__grievance { padding-top: 1.1rem; border-top: 1px solid var(--mp-line); }
.mpower-contact__grievance h2 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.mpower-contact__grievance p { margin: 0 0 0.6rem; font-size: 0.95rem; }
.mpower-contact__business { font-size: 0.88rem; color: var(--mp-muted); }

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

/* FAQ page: one group per topic */
.mpower-faq-page { display: grid; gap: var(--wp--preset--spacing--50); }
.mpower-faq-group { scroll-margin-top: 1.5rem; }
.mpower-faq-group h2 { margin: 0 0 0.5rem; font-size: var(--wp--preset--font-size--large); }
.mpower-faq-sub { scroll-margin-top: 1.5rem; }
.mpower-faq-sub h3 { margin: 1.75rem 0 0.4rem; font-size: 1.2rem; color: var(--mp-brass-deep); }
.mpower-faq-group > .mpower-faq + .mpower-faq-sub h3 { margin-top: 2rem; }

/* Policy pages: readable prose, the draft note under the title, links to the others at the foot */
.mpower-policy-hero { padding-block: var(--wp--preset--spacing--50); }
.mpower-policy-hero .mpower-section__head { margin: 0; }
.mpower-policy-hero h1 { margin: 0.25rem 0 0.25rem; }
.mpower-page-meta { display: grid; gap: 0.75rem; }
.mpower-page-meta .mpower-note { margin: 0; }
.is-style-night .mpower-page-meta .mpower-draft { color: var(--mp-brass-light); background: rgba(217, 189, 140, 0.08); border-color: rgba(217, 189, 140, 0.5); }
.mpower-draft {
	padding: 0.7rem 0.9rem;
	border: 1px dashed var(--mp-brass);
	border-radius: 10px;
	font-size: 0.88rem;
	color: var(--mp-brass-deep);
	background: color-mix(in srgb, var(--mp-brass) 7%, white);
}
.mpower-policy .mpower-prose h2 { margin-top: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--large); }
.mpower-policy .mpower-prose h3 { margin-top: 1.75rem; font-size: 1.25rem; }
.mpower-policy /* Only plain lists in running text: tool and card lists inside the prose set their own spacing. */
.mpower-prose :is(.wp-block-list, ul:not([class]), ol:not([class])) > li + li { margin-top: 0.35rem; }
.mpower-policy-links { margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--mp-line); }
.mpower-policy-links h2 { margin: 0 0 0.75rem; font-size: 1.25rem; }
.mpower-policy-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mpower-policy-links a { display: inline-block; padding: 0.45rem 0.95rem; border: 1px solid var(--mp-line); border-radius: 999px; color: var(--mp-night); font-weight: 600; text-decoration: none; }
.mpower-policy-links a:hover { border-color: var(--mp-brass); }
.mpower-policy-links a[aria-current] { background: var(--mp-night); border-color: var(--mp-night); color: var(--mp-paper); }

/* Consultation images: across the top of each card, and beside the text in each consultation page's hero */
.mpower-service.has-image { overflow: hidden; }
.mpower-service__img {
	display: block;
	width: calc(100% + 3rem);
	max-width: none;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: -1.5rem -1.5rem 0.6rem;
	object-fit: cover;
}

.mpower-service-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}
.mpower-service-hero__grid > * { margin: 0; }
.mpower-service-hero__img { margin: 0; }
.mpower-service-hero__img img {
	border-radius: var(--mp-radius);
	box-shadow: 0 0 0 1px rgba(217, 189, 140, 0.25), 0 24px 60px rgba(0, 0, 0, 0.35);
}

@media (max-width: 900px) {
	.mpower-service-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--50); }
	.mpower-service-hero__img { max-width: 34rem; }
}

/* The wide first card gets a wider crop, so it's about as tall as the two cards beside it. */
@media (min-width: 1000px) {
	.mpower-services > .mpower-service:first-child .mpower-service__img { aspect-ratio: 3 / 1; }
}

@media (max-width: 600px) {
	.mpower-service__img { width: calc(100% + 2.5rem); margin: -1.25rem -1.25rem 0.5rem; }
}

/* Consultations: the All consultations page and each consultation's page ------------------------------ */

.mpower-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: var(--wp--preset--spacing--50); }
.mpower-chips[hidden] { display: none; }
.mpower-chips__label { margin-right: 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mp-brass-deep); }
.mpower-chip {
	appearance: none;
	padding: 0.5rem 1rem 0.45rem;
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--mp-night);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--mp-line);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.mpower-chip:hover { border-color: var(--mp-brass); }
.mpower-chip[aria-pressed="true"] { color: var(--mp-paper); background: var(--mp-night); border-color: var(--mp-night); }

.mpower-consults {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
	gap: 1.25rem;
}
.mpower-consult {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mpower-consult:hover { border-color: color-mix(in srgb, var(--mp-brass) 55%, var(--mp-line)); box-shadow: var(--wp--preset--shadow--soft); }
.mpower-consult[hidden] { display: none; }
.mpower-consult__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mpower-consult__body { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem 1.4rem 1.4rem; }
.mpower-consult__top { display: flex; align-items: center; gap: 0.6rem; }
.mpower-consult__icon { width: 2.4rem; height: 2.4rem; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--mp-brass-deep); background: color-mix(in srgb, var(--mp-brass) 12%, white); }
.mpower-consult__icon .mpower-icon { width: 1.3rem; height: 1.3rem; }
.mpower-consult h3 { margin: 0.2rem 0 0; font-size: 1.5rem; }
.mpower-consult h3 a { color: inherit; text-decoration: none; }
.mpower-consult h3 a:hover { color: var(--mp-brass-deep); }
.mpower-consult__lede { margin: 0; color: var(--mp-muted); }
.mpower-consult__gets,
.mpower-checks { list-style: none; margin: 0; padding: 0; display: grid; }
.mpower-consult__gets { gap: 0.35rem; margin-top: 0.2rem; font-size: 0.94rem; }
.mpower-consult__gets li,
.mpower-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.55rem; }
.mpower-consult__gets .mpower-icon,
.mpower-checks .mpower-icon { width: 1.1em; height: 1.1em; margin-top: 0.2em; color: var(--mp-brass-deep); }
.mpower-consult__facts {
	margin: 0.4rem 0 0;
	padding-top: 0.9rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	border-top: 1px solid var(--mp-line);
}
.mpower-consult__facts > .mpower-consult__ways { grid-column: 1 / -1; }
.mpower-consult__facts dt,
.mpower-price-block dt,
.mpower-package dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mp-brass-deep); }
.mpower-consult__facts dd { margin: 0.2rem 0 0; font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.mpower-consult__foot { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.mpower-consult__foot .wp-block-button__link { padding: 0.6rem 1.35rem 0.55rem; font-size: 0.95rem; }

/* The hero's price, duration and ways, over the night band. */
.mpower-service-section--facts { margin-top: 1.5rem; }
.mpower-price-block { margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; }
.is-style-night .mpower-price-block dt { color: var(--mp-brass-light); }
.mpower-price-block dd { margin: 0.3rem 0 0; font-weight: 600; }
.is-style-night .mpower-price-block dd { color: var(--mp-paper); }
.mpower-price-block dd.mpower-price-block__price { font-family: var(--wp--preset--font-family--display); font-size: 1.45rem; font-weight: 400; line-height: 1.1; }
.mpower-service-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.mpower-service-section--facts .mpower-page-meta { margin-top: 1.25rem; }

.mpower-service-intro .mpower-prose { margin-bottom: var(--wp--preset--spacing--60); }
.mpower-service-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.mpower-service-try { margin: 1.25rem 0 0; }
.mpower-service-try .mpower-link-arrow { color: var(--mp-brass-deep, #806236); }
.mpower-service-duo h2 { margin: 0.35rem 0 1.25rem; font-size: var(--wp--preset--font-size--x-large); }
.mpower-service-duo .is-style-eyebrow { margin: 0; }
.mpower-checks { gap: 0.8rem; font-size: 1.05rem; }
.mpower-numbered { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: mpower-step; }
.mpower-numbered li { counter-increment: mpower-step; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: start; gap: 0.9rem; font-size: 1.05rem; }
.mpower-numbered li::before {
	content: counter(mpower-step);
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1rem;
	color: var(--mp-brass-deep);
	background: color-mix(in srgb, var(--mp-brass) 14%, white);
}
.mpower-numbered li > span { padding-top: 0.25rem; }
.mpower-service-card { padding: 1.5rem 1.6rem; background: var(--wp--preset--color--white); border: 1px solid var(--mp-line); border-radius: var(--mp-radius); }
.mpower-service-duo--cards .mpower-service-card h2 { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--large); }
.mpower-service-card .mpower-note { margin: 1.1rem 0 0; }

.mpower-packages {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 1.25rem;
}
.mpower-package { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.5rem; background: var(--wp--preset--color--white); border: 1px solid var(--mp-line); border-radius: var(--mp-radius); }
.mpower-package h3 { margin: 0; font-size: 1.35rem; }
.mpower-package__price { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; }
.mpower-package dl { margin: 0.4rem 0 1rem; display: grid; gap: 0.45rem; }
.mpower-package dl div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: baseline; gap: 0.5rem; }
.mpower-package dd { margin: 0; font-weight: 600; }
.mpower-package .wp-block-button__link { height: auto; margin-top: auto; align-self: flex-start; }

.mpower-compare--consults tbody th { width: 22%; }
.mpower-compare__book { text-align: right; white-space: nowrap; }

@media (max-width: 781px) {
	.mpower-service-duo { grid-template-columns: minmax(0, 1fr); }
	.mpower-compare__book { text-align: left; }
}


/* Blog, articles, search and reviews ------------------------------------------------------------ */

.mpower-blog-cats ul,
.mpower-blog-cats__list { list-style: none; margin: 0 0 var(--wp--preset--spacing--50); padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
a.mpower-chip { display: inline-block; text-decoration: none; }
a.mpower-chip[aria-current="page"] { color: var(--mp-paper); background: var(--mp-night); border-color: var(--mp-night); }

.mpower-posts .wp-block-post-template { gap: 1.5rem; }
.mpower-post-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--mp-line);
	border-radius: var(--mp-radius);
}
.mpower-post-card .wp-block-post-featured-image { margin: -1.25rem -1.25rem 0.5rem; }
.mpower-post-card .wp-block-post-title { margin: 0; }
.mpower-post-card .wp-block-post-title a { color: var(--mp-night); text-decoration: none; }
.mpower-post-card .wp-block-post-title a:hover { color: var(--mp-brass-deep); }
.mpower-post-card .wp-block-post-excerpt { margin: 0; color: var(--mp-muted); }
.mpower-post-card .wp-block-post-excerpt__excerpt { margin: 0; }
.mpower-post-card .mpower-post-meta { margin-top: auto; padding-top: 0.5rem; }
.mpower-post-meta { margin: 0; font-size: 0.88rem; color: var(--mp-muted); }
.mpower-empty { max-width: 44rem; padding: 1.75rem 2rem; background: var(--wp--preset--color--white); border: 1px dashed var(--mp-line); border-radius: var(--mp-radius); }
.mpower-empty h2 { margin-top: 0; font-size: var(--wp--preset--font-size--large); }

.mpower-post-hero { padding-bottom: var(--wp--preset--spacing--40); }
.mpower-post-hero .wp-block-post-title { margin: 0.4rem 0 0.75rem; }
.mpower-post-hero .wp-block-post-excerpt { margin: 0 0 0.75rem; font-size: var(--wp--preset--font-size--medium); color: var(--mp-muted); }
.mpower-post-hero .wp-block-post-excerpt__excerpt { margin: 0; }
.mpower-post-image { margin-top: 1.5rem; }
.mpower-post-image img { border-radius: var(--mp-radius); }
.mpower-post-body { padding-top: var(--wp--preset--spacing--40); }
.mpower-post-layout { display: grid; grid-template-columns: 14rem minmax(0, 46rem); justify-content: center; align-items: start; gap: clamp(2rem, 5vw, 4rem); }
.mpower-post-layout:not(:has(.mpower-toc)) { grid-template-columns: minmax(0, 46rem); }
.mpower-toc { position: sticky; top: 1.5rem; font-size: 0.92rem; }
.mpower-toc__title { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mp-brass-deep); }
.mpower-toc ol { list-style: none; margin: 0.6rem 0 0; padding: 0; border-left: 1px solid var(--mp-line); }
.mpower-toc a { display: block; padding: 0.35rem 0 0.35rem 1rem; line-height: 1.35; color: var(--mp-muted); text-decoration: none; }
.mpower-toc a:hover { color: var(--mp-night); }
.mpower-post-main > * + * { margin-top: var(--wp--preset--spacing--50); }
.mpower-post-main .mpower-prose h2 { scroll-margin-top: 1.5rem; }

.mpower-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding-top: 1.5rem; border-top: 1px solid var(--mp-line); }
.mpower-share p { margin: 0; font-weight: 600; }
.mpower-share ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mpower-share a { display: inline-block; padding: 0.4rem 0.9rem; font-size: 0.9rem; font-weight: 600; color: var(--mp-night); text-decoration: none; border: 1px solid var(--mp-line); border-radius: 999px; }
.mpower-share a:hover { border-color: var(--mp-brass); }

.mpower-author { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem; background: var(--wp--preset--color--mist); border-radius: var(--mp-radius); }
.mpower-author__mark { width: 4rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-family: var(--wp--preset--font-family--display); font-size: 1.8rem; color: var(--mp-brass-light); background: var(--mp-night); }
.mpower-author p { margin: 0; }
.mpower-author__label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mp-brass-deep); }
.mpower-author__name { font-family: var(--wp--preset--font-family--display); font-size: 1.3rem; }
.mpower-author .mpower-author__bio { margin: 0.35rem 0 0.6rem; color: var(--mp-muted); }

.mpower-related { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); }
.mpower-related:not(:has(.mpower-related__go)),
.mpower-related:not(:has(.mpower-related__more)) { grid-template-columns: minmax(0, 1fr); }
.mpower-related h2 { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--large); }
.mpower-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.mpower-related__item { padding: 1.1rem 1.25rem; background: var(--wp--preset--color--white); border: 1px solid var(--mp-line); border-radius: 14px; }
.mpower-related__kind { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mp-brass-deep); }
.mpower-related__item a { display: block; margin-top: 0.2rem; font-size: 1.1rem; font-weight: 600; color: var(--mp-night); text-decoration: none; }
.mpower-related__item a:hover { color: var(--mp-brass-deep); }
.mpower-related__item p { margin: 0.25rem 0 0; font-size: 0.92rem; color: var(--mp-muted); }
.mpower-related__more li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--mp-line); }
.mpower-related__more a { font-weight: 600; color: var(--mp-night); text-decoration: none; }
.mpower-related__more span { flex: none; font-size: 0.85rem; color: var(--mp-muted); }

.mpower-search-form { max-width: 40rem; margin-top: 1.5rem; }
.mpower-search { display: grid; gap: var(--wp--preset--spacing--50); }
.mpower-search-group h2 { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 1rem; font-size: var(--wp--preset--font-size--large); }
.mpower-search-group h2 span { font-family: var(--wp--preset--font-family--body); font-size: 0.9rem; color: var(--mp-muted); }
.mpower-search-group ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 0.9rem; }
.mpower-search-group li { padding: 1rem 1.2rem; background: var(--wp--preset--color--white); border: 1px solid var(--mp-line); border-radius: 14px; }
.mpower-search-group li a { font-size: 1.05rem; font-weight: 600; color: var(--mp-night); text-decoration: none; }
.mpower-search-group li a:hover { color: var(--mp-brass-deep); }
.mpower-search-group li p { margin: 0.3rem 0 0; font-size: 0.92rem; color: var(--mp-muted); }
.mpower-search-empty h2 { margin-top: 0; font-size: var(--wp--preset--font-size--large); }

.mpower-reviews-empty { max-width: 40rem; }
.mpower-reviews-empty h2 { margin: 0.35rem 0 0.75rem; }
.mpower-review-share { max-width: 44rem; margin-top: var(--wp--preset--spacing--50); padding: 1.75rem; color: var(--mp-on-night); background: var(--mp-night); border-radius: var(--mp-radius); }
.mpower-review-share h2 { margin: 0 0 0.5rem; font-size: var(--wp--preset--font-size--large); color: var(--mp-paper); }
.mpower-review-share p { margin: 0 0 1.1rem; }
.mpower-review-share .mpower-note { margin: 1.1rem 0 0; color: var(--mp-on-night-muted); }
.mpower-review-summary { display: grid; gap: 0.5rem; margin-bottom: var(--wp--preset--spacing--50); }
.mpower-review-summary p { margin: 0; }
.mpower-review-summary__score strong { font-family: var(--wp--preset--font-family--display); font-size: 2.6rem; font-weight: 400; }
.mpower-review-summary ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.92rem; color: var(--mp-muted); }
.mpower-review-summary li { display: flex; gap: 0.4rem; }
.mpower-review-summary li strong { color: var(--mp-night); }
.mpower-review[hidden] { display: none; }

.mpower-coming-soon { min-height: 100vh; display: grid; align-content: center; padding-block: var(--wp--preset--spacing--70); }
.mpower-coming-soon .mpower-coming-soon__brand { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 1.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.mpower-coming-soon .mpower-coming-soon__brand a { color: var(--mp-paper); text-decoration: none; display: inline-flex; align-items: center; gap: 1rem; }
.mpower-coming-soon .mpower-logo { width: 3.4rem; height: 3.4rem; }
.mpower-coming-soon h1 { margin: 0.5rem 0 1rem; }
.mpower-coming-soon .mpower-coming-soon__contact { color: var(--mp-on-night); }

@media (max-width: 900px) {
	.mpower-post-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.mpower-toc { position: static; padding: 1rem 1.25rem; background: var(--wp--preset--color--mist); border-radius: 14px; }
	.mpower-related { grid-template-columns: minmax(0, 1fr); }
}
