/*
 * Mentora 2026
 *
 * Colours, fonts and sizes come from theme.json. This sheet is the layout
 * of the header, the footer and the page sections, and the handful of
 * decorations (the rising bars, the stars) that are drawn rather than
 * typed, so they never have to be maintained in the editor.
 *
 * Every class starts mn- so nothing here collides with a plugin.
 *
 * Contents
 *   1. Base
 *   2. Header and menu
 *   3. Buttons and paragraph styles
 *   4. Sections
 *   5. Hero
 *   6. Credentials
 *   7. Story
 *   8. Reviews
 *   9. Topics
 *  10. Videos
 *  11. Plans
 *  12. Course
 *  13. Questions
 *  14. Closing band
 *  15. Footer
 *  16. Ordinary pages and posts
 *  17. Page heading band
 *  18. Steps
 *  19. Reviews page
 *  20. Insights
 *  21. Intro call form
 *  22. Course page
 *  23. Form fields on older pages
 */

/* =====================================================================
   1. Base
   ===================================================================== */

:root {
	--mn-ink: var(--wp--preset--color--ink);
	--mn-slate: var(--wp--preset--color--slate);
	--mn-lede: #33475A;
	--mn-sky: var(--wp--preset--color--sky);
	--mn-mint: var(--wp--preset--color--mint);
	--mn-green: var(--wp--preset--color--green);
	--mn-wash: var(--wp--preset--color--wash);
	--mn-line: var(--wp--preset--color--line);
	--mn-line-strong: var(--wp--preset--color--line-strong);
	--mn-star: var(--wp--preset--color--star);
	--mn-display: var(--wp--preset--font-family--display);
	--mn-r-lg: 26px;
	--mn-r: 22px;
	--mn-r-sm: 16px;
	--mn-gutter: var(--wp--style--root--padding-left, clamp(20px, 5vw, 56px));
	--mn-section: clamp(64px, 9vw, 120px);
	--mn-header-h: 73px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mn-header-h) + var(--wp-admin--admin-bar--height, 0px) + 12px);
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

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

a {
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

img { max-width: 100%; height: auto; }

:focus-visible {
	outline: 3px solid var(--mn-ink);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* The header, the page and the footer sit flush against each other. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* =====================================================================
   2. Header and menu
   ===================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: -webkit-sticky;
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 60;
}

.mn-header {
	background: #FFFFFF;
	border-bottom: 1px solid var(--mn-line);
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* once the page has moved, the header lifts off it (theme.js sets the class) */
.mn-scrolled .mn-header {
	border-bottom-color: transparent;
	box-shadow: 0 10px 30px -18px rgba(31, 46, 58, 0.45);
}

.wp-block-group.mn-header__row {
	gap: 14px 32px;
	padding-block: 14px;
}

.wp-block-group.mn-header__nav {
	gap: 14px 30px;
}

/* The logo is the site title, drawn as the Mentora wordmark. The title is
   still there for screen readers and search engines. */
.mn-logo {
	margin: 0;
	line-height: 1;
	flex: none;
}

.mn-logo a {
	display: block;
	width: 168px;
	aspect-ratio: 504 / 94;
	background: url(../img/logo.png) left center / contain no-repeat;
	overflow: hidden;
	white-space: nowrap;
	text-indent: -200vw;
	color: transparent;
}

.mn-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--mn-ink);
	text-decoration: none;
	padding: 10px 0;
}

.mn-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #0A6E57;
}

/* on a wide screen a line draws in under the link the pointer is on, and
   stays under the page you are on */
@media (min-width: 1000px) {
	.mn-header .wp-block-navigation .wp-block-navigation-item__content {
		background: linear-gradient(currentColor, currentColor) 0 calc(100% - 5px) / 0 2px no-repeat;
		transition: background-size 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s ease;
	}

	.mn-header .wp-block-navigation .wp-block-navigation-item__content:hover,
	.mn-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
	.mn-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
	.mn-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
		background-size: 100% 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mn-header,
	.mn-header .wp-block-navigation .wp-block-navigation-item__content { transition: none; }
}

.mn-header .wp-block-button__link {
	padding: 11px 20px;
	font-size: 1rem;
	white-space: nowrap;
}

/* WordPress swaps the links for a menu button below 600px. Five links, a
   logo and a button need more room than that, so the swap happens at
   1000px here. */
@media (min-width: 600px) and (max-width: 999px) {
	.mn-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.mn-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

@media (max-width: 999px) {
	/* logo, then the button, then the menu button at the far right */
	.mn-header__nav .wp-block-navigation { order: 2; }
}

@media (max-width: 420px) {
	.mn-logo a { width: 128px; }
	.wp-block-group.mn-header__nav { gap: 10px; }
	.mn-header .wp-block-button__link { padding: 10px 14px; font-size: 0.9375rem; }
}

@media (max-width: 345px) {
	.mn-header .wp-block-buttons { display: none; }
}

.mn-header .wp-block-navigation__responsive-container-open svg,
.mn-header .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
	fill: var(--mn-ink);
}

.mn-header .wp-block-navigation__responsive-container-open,
.mn-header .wp-block-navigation__responsive-container-close {
	padding: 8px;
	margin: -8px;
}

/* The open menu. WordPress's own rule for the panel is five classes deep,
   so this one repeats a class to be sure of winning. */
.mn-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open {
	background: #FFFFFF;
	color: var(--mn-ink);
	padding: 22px var(--mn-gutter) 48px;
}

.mn-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	justify-content: flex-start;
	padding-top: 40px;
}

.mn-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
	align-items: stretch;
}

.mn-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--mn-line);
}

.mn-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 17px 0;
	font-size: 1.3rem;
	font-weight: 700;
}

/* =====================================================================
   3. Buttons and paragraph styles
   ===================================================================== */

.wp-block-buttons { gap: 14px 28px; }

.wp-block-button__link {
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}

/* a filled button lifts a little under the pointer and settles when pressed */
@media (hover: hover) {
	.wp-block-button:not(.is-style-text) .wp-block-button__link:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 20px -12px rgba(31, 46, 58, 0.55);
	}
}

.wp-block-button:not(.is-style-text) .wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button .wp-block-button__link,
	.wp-block-button .wp-block-button__link:hover { transform: none; transition: background-color 0.15s ease, color 0.15s ease; }
}

/* Button, "Text link": reads as a link, lines up with a button beside it. */
.wp-block-button.is-style-text .wp-block-button__link {
	background: none;
	color: var(--mn-ink);
	padding: 12px 0;
	border-radius: 0;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

.wp-block-button.is-style-text .wp-block-button__link:hover,
.wp-block-button.is-style-text .wp-block-button__link:focus {
	background: none;
	color: #0A6E57;
}

/* Button, "Dark": white on ink. */
.wp-block-button.is-style-dark .wp-block-button__link {
	background: var(--mn-ink);
	color: #FFFFFF;
}

.wp-block-button.is-style-dark .wp-block-button__link:hover,
.wp-block-button.is-style-dark .wp-block-button__link:focus {
	background: #33495A;
	color: #FFFFFF;
}

p.is-style-kicker {
	font-family: var(--mn-display);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--mn-slate);
}

p.is-style-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--mn-lede);
}

p.is-style-note {
	box-sizing: border-box;
	padding: 18px 22px;
	background: var(--mn-wash);
	border-radius: var(--mn-r-sm);
	color: var(--mn-ink);
	font-weight: 500;
}

p.is-style-small {
	font-size: var(--wp--preset--font-size--small);
}

p.is-style-more {
	font-family: var(--mn-display);
	font-weight: 600;
	font-size: 1.0625rem;
}

p.is-style-more a {
	display: inline-block;
	padding: 10px 0;
}

/* Five stars, drawn in front of whatever the paragraph says. */
p.is-style-stars {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-size: 1rem;
	color: var(--mn-lede);
}

p.is-style-stars::before {
	content: "★★★★★";
	content: "★★★★★" / "";
	color: var(--mn-star);
	font-size: 1.25rem;
	letter-spacing: 2px;
	line-height: 1;
}

/* =====================================================================
   4. Sections
   =====================================================================
   A section is a full-width Group with the class mn-section. Everything
   inside it lines up on the same 1240px column.
   ===================================================================== */

.wp-block-post-content > .mn-section,
.wp-block-post-content > .mn-hero,
.wp-block-post-content > .mn-creds,
.wp-block-post-content > .mn-close {
	margin-block-start: 0;
}

.mn-section {
	padding-block: var(--mn-section);
}

/* the class is doubled so this outranks a block's own margin reset */
.wp-block-group.mn-section.mn-section > * + * {
	margin-block-start: 44px;
}

.mn-section-ruled {
	border-top: 1px solid var(--mn-line);
}

/* A heading on the left with a short line of text to its right. */
.wp-block-group.mn-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
}

.wp-block-group.mn-head > * {
	margin: 0;
}

.mn-head > p {
	max-width: 27em;
}

/* =====================================================================
   5. Hero
   ===================================================================== */

.mn-hero {
	background: linear-gradient(180deg, #CDEBF6 0%, #E7F8FF 46%, #E7F8FF 100%);
	padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 104px);
}

.wp-block-group.mn-hero__cols {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px 64px;
}

.wp-block-group.mn-hero__cols > * {
	margin: 0;
}

.mn-hero__text {
	flex: 1 1 460px;
	min-width: 0;
}

.wp-block-group.mn-hero__text > * {
	margin-block: 0;
}

.wp-block-group.mn-hero__text > * + * {
	margin-block-start: 26px;
}

.mn-hero__text > p.is-style-kicker {
	font-size: 1.125rem;
}

.wp-block-group.mn-hero__intro {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 18px;
	max-width: 37em;
}

.wp-block-group.mn-hero__intro > * {
	margin: 0;
}

.mn-hero__face {
	flex: none;
}

.mn-hero__face img {
	display: block;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #FFFFFF;
	box-sizing: border-box;
}

.mn-hero__text .wp-block-buttons {
	align-items: center;
}

.mn-hero__text .wp-block-button:not(.is-style-text) .wp-block-button__link {
	font-size: 1.125rem;
	padding: 16px 30px;
}

/* The picture. Three bars rise from left to right and the photograph is
   the fourth and tallest. The bars are drawn here as backgrounds, so the
   block in the editor is nothing but an ordinary image. Each bar is 7.5%
   of the width; the odd-looking positions are what put them 2.6% apart. */
.mn-hero__visual {
	flex: 1.25 1 420px;
	min-width: 0;
	max-width: 620px;
	height: clamp(360px, 26vw + 190px, 540px);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='14' fill='%2363D6FF'/%3E%3C/svg%3E") 0 100% / 7.5% 34% no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='14' fill='%236CE0B6'/%3E%3C/svg%3E") 10.919% 100% / 7.5% 55% no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' rx='14' fill='%2363C26F'/%3E%3C/svg%3E") 21.838% 100% / 7.5% 77% no-repeat;
}

.wp-block-image.mn-hero__photo {
	margin: 0 0 0 30.3%;
	height: 100%;
}

/* the editor wraps the picture in one more box */
.mn-hero__photo > div {
	height: 100%;
}

.mn-hero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 46% 50%;
	border-radius: var(--mn-r-lg);
	box-shadow: 0 28px 56px -28px rgba(31, 46, 58, 0.55);
}

/* =====================================================================
   6. Credentials
   ===================================================================== */

.mn-creds {
	border-bottom: 1px solid var(--mn-line);
	padding-block: 22px;
}

.wp-block-group.mn-creds__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 34px;
	font-size: 1rem;
	color: var(--wp--preset--color--muted);
}

.wp-block-group.mn-creds__row > * {
	margin: 0;
}

/* The logo files carry a lot of empty space around the mark, so each is
   pulled in a little, top and bottom, to sit on the line of the text. */
.wp-block-image.mn-cred {
	flex: none;
	margin-block: -20px;
}

.mn-cred img {
	display: block;
	width: 132px;
	height: auto;
	mix-blend-mode: multiply;
}

/* Some marks fill their file and some sit small inside it. Add one of
   these two classes to a logo to even them up. */
.mn-cred-large img { width: 196px; }
.mn-cred-small img { width: 112px; }
.wp-block-image.mn-cred-large { margin-block: -40px; }

/* =====================================================================
   7. Story
   ===================================================================== */

.wp-block-group.mn-story__cols {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 56px 72px;
}

.wp-block-group.mn-story__cols > * {
	margin: 0;
}

.mn-story__visual {
	flex: 1 1 420px;
	min-width: 0;
	position: relative;
	padding-bottom: 56px;
	max-width: 600px;
}

.wp-block-image.mn-story__photo {
	margin: 0;
	width: 88%;
}

.mn-story__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3.6;
	object-fit: cover;
	border-radius: var(--mn-r-lg);
}

.wp-block-image.mn-story__inset {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 42%;
	margin: 0;
}

.mn-story__inset img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--mn-r);
	outline: 8px solid #FFFFFF;
}

.mn-story__text {
	flex: 1 1 420px;
	min-width: 0;
}

.wp-block-group.mn-story__text > * {
	margin-block: 0;
}

.wp-block-group.mn-story__text > * + * {
	margin-block-start: 22px;
}

.wp-block-group.mn-facts {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px 28px;
	padding-top: 6px;
}

@media (min-width: 480px) {
	.wp-block-group.mn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the width at which the story is one column, but a wide one */
@media (min-width: 700px) and (max-width: 1013px) {
	.wp-block-group.mn-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* beside some text in a two-column section, the facts keep to one line */
.wp-block-group.mn-split > .wp-block-group.mn-facts > * {
	margin: 0;
}

/* three facts in a row: add the class mn-facts-three */
@media (min-width: 480px) {
	.wp-block-group.mn-facts.mn-facts-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wp-block-group.mn-facts > * {
	margin: 0;
}

/* One fact: a bold figure with a line of text beneath. In the editor it is
   a single paragraph, figure in bold, then a line break. */
.mn-facts > p {
	border-top: 3px solid var(--mn-sky);
	padding-top: 12px;
	font-size: 1rem;
	line-height: 1.4;
}

.mn-facts > p:nth-child(4n + 2) { border-top-color: var(--mn-mint); }
.mn-facts > p:nth-child(4n + 3) { border-top-color: var(--mn-green); }
.mn-facts > p:nth-child(4n + 4) { border-top-color: var(--mn-slate); }

.mn-facts > p strong {
	display: block;
	margin-bottom: 2px;
	font-family: var(--mn-display);
	font-weight: 800;
	font-size: 1.625rem;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--mn-ink);
}

.mn-facts > p br {
	display: none;
}

/* =====================================================================
   8. Reviews
   =====================================================================
   A review is a Quote block with the class mn-review: the words, a small
   round photo, and the citation (name in bold, line break, what they do).
   The stars are drawn.
   ===================================================================== */

.wp-block-quote.mn-review {
	margin: 0;
	border: 0;
	background: #FFFFFF;
	border-radius: var(--mn-r);
	padding: 28px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	gap: 18px 12px;
	align-items: center;
	box-sizing: border-box;
}

.mn-review::before {
	content: "★★★★★";
	content: "★★★★★" / "Five stars";
	grid-column: 1 / -1;
	color: var(--mn-star);
	font-size: 1.125rem;
	letter-spacing: 2px;
	line-height: 1;
}

.wp-block-quote.mn-review > * {
	margin: 0;
}

.mn-review > p {
	grid-column: 1 / -1;
	align-self: start;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--mn-lede);
}

.mn-review > .wp-block-image {
	grid-column: 1;
}

.mn-review > .wp-block-image img {
	display: block;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
}

.mn-review > cite {
	grid-column: 2;
	font-style: normal;
	font-size: 0.9375rem;
	line-height: 1.35;
}

/* a review with no photo: the name takes the full width */
.mn-review > cite:first-of-type:nth-child(2) {
	grid-column: 1 / -1;
}

.mn-review > cite strong {
	display: block;
	font-size: 1rem;
	color: var(--mn-ink);
}

.mn-review > cite br {
	display: none;
}

/* The lead review: the same block, larger. */
.wp-block-quote.mn-review-lead {
	border-radius: var(--mn-r-lg);
	padding: clamp(26px, 4vw, 52px);
	gap: 24px 14px;
}

.mn-review-lead::before {
	font-size: 1.375rem;
	letter-spacing: 3px;
}

.mn-review-lead > p {
	font-family: var(--mn-display);
	font-weight: 600;
	font-size: clamp(1.3rem, 1rem + 1.3vw, 2rem);
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--mn-ink);
}

.mn-review-lead > .wp-block-image img {
	width: 56px;
	height: 56px;
}

.mn-review-lead > cite {
	font-size: 1rem;
}

.mn-review-lead > cite strong {
	font-size: 1.125rem;
}

.wp-block-group.mn-reviews__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 20px;
}

.wp-block-group.mn-reviews__grid > * {
	margin: 0;
}

/* =====================================================================
   9. Topics
   ===================================================================== */

.wp-block-group.mn-topics__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 36px 48px;
}

.wp-block-group.mn-topics__grid > * {
	margin: 0;
}

.mn-topics__grid > .wp-block-group::before {
	content: "";
	display: block;
	width: 44px;
	height: 6px;
	border-radius: 3px;
	margin-bottom: 16px;
	background: var(--mn-sky);
}

.mn-topics__grid > .wp-block-group:nth-child(3n + 2)::before { background: var(--mn-mint); }
.mn-topics__grid > .wp-block-group:nth-child(3n + 3)::before { background: var(--mn-green); }

.mn-topics__grid > .wp-block-group > * {
	margin-block: 0;
}

.mn-topics__grid > .wp-block-group > * + * {
	margin-block-start: 8px;
}

/* =====================================================================
   10. Videos
   =====================================================================
   Each video is an ordinary YouTube embed block. The theme draws it as a
   still with a play button and only loads the player on a click.
   ===================================================================== */

.wp-block-group.mn-videos__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px 20px;
	align-items: start;
}

.wp-block-group.mn-videos__grid > * {
	margin: 0;
}

/* in between: the first video across the top, the other two beneath */
@media (min-width: 560px) and (max-width: 859px) {
	.wp-block-group.mn-videos__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mn-videos__grid > :first-child {
		grid-column: 1 / -1;
	}
}

@media (min-width: 860px) {
	.wp-block-group.mn-videos__grid {
		grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
	}

	.mn-videos__grid > :first-child {
		grid-row: span 2;
	}
}

.wp-block-embed.mn-video {
	margin: 0;
}

.mn-video__link {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	overflow: hidden;
	background: var(--mn-slate);
}

.mn-video__still,
.mn-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mn-video__still {
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mn-video__link:hover .mn-video__still {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.mn-video__still { transition: none; }
	.mn-video__link:hover .mn-video__still { transform: none; }
}

.mn-video__play {
	position: absolute;
	left: 14px;
	bottom: 14px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 76'%3E%3Cpath d='M31 25.5v25l21-12.5z' fill='%2312303A'/%3E%3C/svg%3E") center / 100% no-repeat;
	box-shadow: 0 10px 28px -8px rgba(18, 48, 58, 0.7);
	transition: transform 0.15s ease;
}

.mn-video__link:hover .mn-video__play {
	transform: scale(1.08);
}

.mn-video figcaption {
	margin: 10px 0 0;
	font-family: var(--mn-display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--mn-ink);
	text-align: left;
}

.mn-videos__grid > :first-child .mn-video__link {
	border-radius: var(--mn-r);
}

@media (min-width: 860px) {
	.mn-videos__grid > :first-child .mn-video__play {
		left: 22px;
		bottom: 22px;
		width: 68px;
		height: 68px;
	}
}

.mn-videos__grid > :first-child figcaption {
	margin-top: 14px;
	font-size: 1.375rem;
	line-height: 1.25;
}

.wp-block-group.mn-videos__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
}

.wp-block-group.mn-videos__more > * {
	margin: 0;
}

/* =====================================================================
   11. Plans
   =====================================================================
   Four cards. On a wide screen they stand on one baseline and step up in
   height from left to right, the way the bars in the logo do. Each card's
   colour is its Group background, set in the editor.
   ===================================================================== */

.wp-block-group.mn-plans__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

.wp-block-group.mn-plans__grid > * {
	margin: 0;
}

@media (min-width: 640px) {
	.wp-block-group.mn-plans__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1120px) {
	.wp-block-group.mn-plans__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: end;
	}

	.mn-plans__grid > .mn-plan:nth-child(1) { min-height: 430px; }
	.mn-plans__grid > .mn-plan:nth-child(2) { min-height: 500px; }
	.mn-plans__grid > .mn-plan:nth-child(3) { min-height: 570px; }
	.mn-plans__grid > .mn-plan:nth-child(4) { min-height: 640px; }
}

.wp-block-group.mn-plan {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border-radius: var(--mn-r-lg);
	padding: 30px 28px;
	color: var(--mn-ink);
}

.wp-block-group.mn-plan > * {
	margin: 0;
}

.mn-plan h3 {
	color: inherit;
	margin-bottom: 6px;
}

.mn-plan .mn-plan__label {
	font-size: 0.9375rem;
	margin-bottom: 6px;
}

.mn-plan .mn-plan__price {
	font-family: var(--mn-display);
	font-weight: 800;
	font-size: 2.75rem;
	line-height: 1;
	letter-spacing: -0.03em;
	margin-bottom: 6px;
}

.mn-plan .mn-plan__per {
	font-size: 1rem;
	margin-bottom: 20px;
}

.mn-plan ul.wp-block-list,
.mn-plan .mn-plan__text {
	flex: 1 1 auto;
	margin-bottom: 20px;
	font-size: 1.0625rem;
	line-height: 1.45;
}

.mn-plan ul.wp-block-list {
	padding-left: 20px;
}

.mn-plan ul.wp-block-list li + li {
	margin-top: 8px;
}

.mn-plan .wp-block-buttons {
	margin-top: auto;
}

.mn-plan .wp-block-button {
	width: 100%;
}

.mn-plan .wp-block-button__link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 14px 20px;
	background: var(--mn-ink);
	color: #FFFFFF;
}

.mn-plan .wp-block-button__link:hover,
.mn-plan .wp-block-button__link:focus {
	background: #33495A;
	color: #FFFFFF;
}

/* Founder Counsel: the dark card. It is the top step and it leads to the
   advisory site, so it is the one card that is not a pastel. */
.wp-block-group.mn-plan-dark {
	color: #E7F8FF;
}

.mn-plan-dark .mn-plan__label { color: var(--mn-sky); }
.mn-plan-dark .mn-plan__per { color: #B9D3DF; }
.mn-plan-dark .mn-plan__text { color: #D6EDF6; }

.mn-plan-dark .wp-block-button__link {
	background: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--aqua-ink);
}

.mn-plan-dark .wp-block-button__link:hover,
.mn-plan-dark .wp-block-button__link:focus {
	background: #0FCFA2;
	color: var(--wp--preset--color--aqua-ink);
}

.mn-plan-dark :focus-visible {
	outline-color: #FFFFFF;
}

/* =====================================================================
   12. Course
   ===================================================================== */

.wp-block-group.mn-course__cols {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px 72px;
}

.wp-block-group.mn-course__cols > * {
	margin: 0;
}

.wp-block-image.mn-course__img {
	flex: 1.2 1 400px;
	min-width: 0;
	max-width: 680px;
}

.mn-course__img img {
	display: block;
	width: 100%;
	height: auto;
}

.mn-course__text {
	flex: 1 1 380px;
	min-width: 0;
}

.wp-block-group.mn-course__text > * {
	margin-block: 0;
}

.wp-block-group.mn-course__text > * + * {
	margin-block-start: 20px;
}

.wp-block-group.mn-course__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
}

.wp-block-group.mn-course__buy > * {
	margin: 0;
}

.mn-price {
	font-family: var(--mn-display);
	font-weight: 800;
	font-size: 1.625rem;
	line-height: 1;
	color: var(--mn-ink);
}

/* =====================================================================
   13. Questions
   =====================================================================
   Each question is a Details block.
   ===================================================================== */

.wp-block-group.mn-section.mn-faqs > * + * {
	margin-block-start: 0;
}

.wp-block-group.mn-faqs > h2 {
	margin-bottom: 36px;
}

.mn-faqs .wp-block-details {
	border-top: 1px solid var(--mn-line-strong);
	padding: 20px 0;
}

.mn-faqs .wp-block-details:last-of-type {
	border-bottom: 1px solid var(--mn-line-strong);
}

.mn-faqs .wp-block-details summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	cursor: pointer;
	list-style: none;
	font-family: var(--mn-display);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--mn-ink);
}

.mn-faqs .wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* a plus that turns into a minus */
.mn-faqs .wp-block-details summary::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 5px;
	background:
		linear-gradient(var(--mn-ink), var(--mn-ink)) center / 100% 2px no-repeat,
		linear-gradient(var(--mn-ink), var(--mn-ink)) center / 2px 100% no-repeat;
	transition: background-size 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the upright stroke shrinks away as the mark turns */
.mn-faqs .wp-block-details[open] summary::after {
	background-size: 100% 2px, 2px 0;
	transform: rotate(180deg);
}

/* The answer slides open in browsers that can animate to a height of "auto"
   (Chrome and Edge today). Elsewhere it opens at once, as it always has. */
@supports (interpolate-size: allow-keywords) {
	.mn-faqs .wp-block-details {
		interpolate-size: allow-keywords;
	}

	.mn-faqs .wp-block-details::details-content {
		block-size: 0;
		overflow: hidden;	/* hidden, not clip: the answer's top margin must stay inside */
		opacity: 0;
		transition: block-size 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, content-visibility 0.4s allow-discrete;
	}

	.mn-faqs .wp-block-details[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mn-faqs .wp-block-details summary::after,
	.mn-faqs .wp-block-details::details-content { transition: none; }
}

.mn-faqs .wp-block-details > :not(summary) {
	margin: 12px 0 0;
	max-width: 44em;
}

/* The questions keep a readable width, but start at the same left edge as
   every other section, not centred. */
.wp-block-group.mn-faqs.is-layout-constrained > * {
	margin-left: max(0px, calc((100% - 77.5rem) / 2)) !important;
}

.wp-block-group.mn-section.mn-faqs > p.is-style-more {
	margin-block-start: 22px;
}

/* =====================================================================
   14. Closing band
   ===================================================================== */

.mn-close {
	position: relative;
	overflow: hidden;
	padding-block: clamp(64px, 9vw, 112px);
	color: #D6EDF6;
}

.wp-block-group.mn-close > * {
	position: relative;
	z-index: 1;
}

.wp-block-group.mn-close__inner > * {
	margin-block: 0;
}

.wp-block-group.mn-close__inner > * + * {
	margin-block-start: 22px;
}

.mn-close h2 {
	color: #FFFFFF;
	font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
	line-height: 1.05;
	max-width: 12em;
}

.mn-close p {
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	max-width: 30em;
}

.mn-close .wp-block-button__link {
	font-size: 1.125rem;
	padding: 16px 30px;
}

.mn-close :focus-visible {
	outline-color: #FFFFFF;
}

/* The three bars, standing on the bottom edge at the right of the column.
   Each is the same tall bar in its own colour, hung below the edge so only
   its top shows: 46%, 72% and all of it. --mn-bar1 to 3 say how far each has
   risen, from 0 (flat) to 1 (its full height). theme.js lets them rise once,
   when the band scrolls into view. */
@property --mn-bar1 { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --mn-bar2 { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --mn-bar3 { syntax: "<number>"; inherits: false; initial-value: 1; }

.mn-close::after {
	--mn-bars-h: 220px;
	content: "";
	position: absolute;
	z-index: 0;
	right: max(var(--mn-gutter), calc((100% - 77.5rem) / 2));
	bottom: 0;
	width: calc(var(--mn-bars-h) * 300 / 220);
	height: var(--mn-bars-h);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 89.33 220' preserveAspectRatio='none'%3E%3Cpath fill='%2363D6FF' d='M0 220V20A20 20 0 0 1 20 0h49.33a20 20 0 0 1 20 20v200z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 89.33 220' preserveAspectRatio='none'%3E%3Cpath fill='%236CE0B6' d='M0 220V20A20 20 0 0 1 20 0h49.33a20 20 0 0 1 20 20v200z'/%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 89.33 220' preserveAspectRatio='none'%3E%3Cpath fill='%2363C26F' d='M0 220V20A20 20 0 0 1 20 0h49.33a20 20 0 0 1 20 20v200z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 29.777% 100%;
	background-position:
		0 calc(var(--mn-bars-h) * (1 - 0.46 * var(--mn-bar1, 1))),
		50% calc(var(--mn-bars-h) * (1 - 0.72 * var(--mn-bar2, 1))),
		100% calc(var(--mn-bars-h) * (1 - var(--mn-bar3, 1)));
}

.mn-close.is-waiting::after {
	--mn-bar1: 0;
	--mn-bar2: 0;
	--mn-bar3: 0;
}

.mn-close.is-risen::after {
	animation:
		mn-bar1 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
		mn-bar2 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both,
		mn-bar3 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

@keyframes mn-bar1 { from { --mn-bar1: 0; } to { --mn-bar1: 1; } }
@keyframes mn-bar2 { from { --mn-bar2: 0; } to { --mn-bar2: 1; } }
@keyframes mn-bar3 { from { --mn-bar3: 0; } to { --mn-bar3: 1; } }

@media (prefers-reduced-motion: reduce) {
	.mn-close.is-risen::after { animation: none; }
}

@media (max-width: 999px) {
	.mn-close {
		padding-bottom: calc(clamp(64px, 9vw, 112px) + 150px);
	}

	.mn-close::after {
		--mn-bars-h: 160px;
	}
}

/* =====================================================================
   15. Footer
   ===================================================================== */

.mn-footer {
	background: #FFFFFF;
	border-top: 1px solid var(--mn-line);
	padding-block: 56px 40px;
	font-size: 1rem;
}

.wp-block-group.mn-footer__top {
	gap: 36px 64px;
	align-items: flex-start;
}

.mn-footer__brand {
	flex: 1 1 280px;
	min-width: 0;
}

.wp-block-group.mn-footer__brand > * {
	margin-block: 0;
}

.wp-block-group.mn-footer__brand > * + * {
	margin-block-start: 14px;
}

.mn-footer__brand p {
	max-width: 22em;
}

.wp-block-group.mn-footer__nav {
	flex: 2 1 420px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: 28px 32px;
}

.wp-block-group.mn-footer__nav > *,
.wp-block-group.mn-footer__col > * {
	margin: 0;
}

.mn-footer__title {
	font-family: var(--mn-display);
	font-weight: 700;
	color: var(--mn-ink);
	padding-bottom: 8px;
}

.mn-footer__col ul.wp-block-list {
	list-style: none;
	padding: 0;
}

.mn-footer__col li a {
	display: inline-block;
	padding: 6px 0;
	color: var(--wp--preset--color--body);
	text-decoration: none;
}

.mn-footer__col li a:hover {
	color: #0A6E57;
	text-decoration: underline;
}

.wp-block-group.mn-footer__bottom {
	margin-block-start: 40px;
	border-top: 1px solid var(--mn-line);
	padding-top: 24px;
	gap: 10px 32px;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

.wp-block-group.mn-footer__bottom > * {
	margin: 0;
}

/* =====================================================================
   16. Ordinary pages and posts
   ===================================================================== */

main.mn-page {
	padding-block: clamp(40px, 6vw, 80px) var(--mn-section);
}

main.mn-page > .wp-block-post-title {
	margin-bottom: 0;
}

/* An ordinary page (the Page template): its title sits in the heading band,
   in line with the column of text beneath it. */
main.mn-page.mn-page-banded {
	padding-top: 0;
}

main.mn-page-banded > .mn-pagehead {
	margin-block: 0;
	padding-block: clamp(36px, 5vw, 64px) clamp(32px, 4.5vw, 56px);
}

main.mn-page-banded > .mn-pagehead > .wp-block-post-title {
	margin-block: 0;
}

main.mn-page-banded > .wp-block-post-content {
	margin-block-start: clamp(36px, 5vw, 64px);
}

.mn-post__date {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.mn-post__image img {
	border-radius: var(--mn-r);
}

.mn-page .wp-block-post-content h2 {
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
	margin-block-start: 2.2em;
}

.mn-page .wp-block-post-content h3 {
	margin-block-start: 1.8em;
}

/* Category and other archive pages: the heading band, then the same cards
   as Insights (section 20). */
main.mn-archive > .mn-pagehead {
	margin-block-start: 0;
}

.mn-archive .is-style-kicker a {
	color: inherit;
	text-decoration: none;
}

.mn-archive .is-style-kicker a:hover {
	text-decoration: underline;
}

.mn-archive .wp-block-term-description {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.mn-archive .wp-block-term-description > :last-child {
	margin-bottom: 0;
}

.mn-archive .wp-block-query-pagination {
	margin-top: 56px;
	gap: 8px 20px;
	font-family: var(--mn-display);
	font-weight: 600;
}

/* =====================================================================
   17. Page heading band
   =====================================================================
   The top of every page that is not the home page: a Group with the class
   mn-pagehead holding the page's heading and a line or two beneath.
   ===================================================================== */

.wp-block-post-content > .mn-pagehead {
	margin-block-start: 0;
}

.mn-pagehead {
	background: linear-gradient(180deg, #CDEBF6 0%, #E7F8FF 60%, #E7F8FF 100%);
	padding-block: clamp(44px, 6vw, 84px) clamp(40px, 5.5vw, 72px);
}

.wp-block-group.mn-pagehead__inner > * {
	margin-block: 0;
	max-width: 44rem;
}

.wp-block-group.mn-pagehead__inner > * + * {
	margin-block-start: 18px;
}

.mn-pagehead h1 {
	font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.2rem);
	line-height: 1.06;
}

/* a section whose text keeps to a readable width, left-aligned */
.wp-block-group.mn-prose > * {
	max-width: 44rem;
	margin-block: 0;
}

.wp-block-group.mn-prose > * + * {
	margin-block-start: 20px;
}

.wp-block-group.mn-prose > h2 + * {
	margin-block-start: 22px;
}

/* two columns: the main text, and something beside it */
.wp-block-group.mn-split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 44px 72px;
}

.wp-block-group.mn-split > * {
	margin: 0;
	min-width: 0;
}

.mn-split > :first-child {
	flex: 1 1 380px;
}

.mn-split > :last-child {
	flex: 1.25 1 440px;
}

.wp-block-group.mn-split > .wp-block-group > * {
	margin-block: 0;
}

.wp-block-group.mn-split > .wp-block-group > * + * {
	margin-block-start: 20px;
}

/* on a narrow screen the form comes before the notes about it */
@media (max-width: 899px) {
	.mn-contact .mn-split > :last-child {
		order: -1;
	}
}

/* the same, with both columns equal */
.mn-split.mn-split-even > * {
	flex: 1 1 380px;
}

/* straight after the heading band, a tinted section needs less air on top */
.mn-pagehead + .mn-section.has-wash-background-color {
	padding-top: 8px;
}

/* =====================================================================
   18. Steps
   =====================================================================
   A Group with the class mn-steps holding one Group per step. The numbers
   are drawn, so adding or removing a step renumbers the rest.
   ===================================================================== */

.wp-block-group.mn-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 28px 40px;
	counter-reset: mn-step;
}

.wp-block-group.mn-steps > * {
	margin: 0;
	counter-increment: mn-step;
	border-top: 3px solid var(--mn-sky);
	padding-top: 18px;
}

.mn-steps > :nth-child(3n + 2) { border-top-color: var(--mn-mint); }
.mn-steps > :nth-child(3n + 3) { border-top-color: var(--mn-green); }

.mn-steps > .wp-block-group::before {
	content: counter(mn-step);
	display: block;
	margin-bottom: 8px;
	font-family: var(--mn-display);
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--mn-ink);
}

.mn-steps > .wp-block-group > * {
	margin-block: 0;
}

.mn-steps > .wp-block-group > * + * {
	margin-block-start: 8px;
}

/* in the narrow column beside the form, the steps stack */
.mn-split .wp-block-group.mn-steps {
	grid-template-columns: minmax(0, 1fr);
}

/* =====================================================================
   19. Reviews page
   =====================================================================
   The same Quote blocks as the home page, in a Group with the class
   mn-reviews__wall. They flow into as many columns as fit, each card as
   tall as its words.
   ===================================================================== */

.wp-block-group.mn-reviews__wall {
	display: block;
	columns: 3 300px;
	column-gap: 20px;
}

.wp-block-group.mn-reviews__wall > .wp-block-quote.mn-review {
	margin: 0 0 20px;
	break-inside: avoid;
	grid-template-rows: none;
}

/* a card on a white section needs an edge */
.mn-on-white .mn-review {
	background: var(--mn-wash);
}

/* =====================================================================
   20. Insights
   =====================================================================
   A Query Loop inside a Group with the class mn-posts.
   ===================================================================== */

.mn-posts .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 44px 28px;
}

.mn-posts .wp-block-post-template > li {
	margin: 0;
}

.mn-posts .wp-block-post-template > li > * {
	margin-block: 0;
}

.mn-posts .wp-block-post-template > li > * + * {
	margin-block-start: 12px;
}

.mn-posts .wp-block-post-featured-image {
	margin-bottom: 18px;
	border-radius: var(--mn-r);
	overflow: hidden;
	background: var(--mn-wash);
}

.mn-posts .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mn-posts .wp-block-post-featured-image a:hover img {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.mn-posts .wp-block-post-featured-image img { transition: none; }
	.mn-posts .wp-block-post-featured-image a:hover img { transform: none; }
}

.mn-posts .wp-block-post-title {
	font-size: 1.5rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.mn-posts .wp-block-post-title a {
	text-decoration: none;
}

.mn-posts .wp-block-post-title a:hover {
	text-decoration: underline;
}

.mn-posts .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.mn-posts .wp-block-post-excerpt__more-text {
	margin: 10px 0 0;
	font-family: var(--mn-display);
	font-weight: 600;
	font-size: 1.0625rem;
}

/* The whole card is the link: the title's link is stretched over it. */
.mn-posts .wp-block-post-template > li {
	position: relative;
}

.mn-posts .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--mn-r);
}

.mn-posts .wp-block-post-title a:focus-visible {
	outline: none;
}

.mn-posts .wp-block-post-title a:focus-visible::after {
	outline: 3px solid var(--mn-ink);
	outline-offset: 6px;
}

.mn-posts .wp-block-post-template > li:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.mn-posts .wp-block-post-template > li:hover .wp-block-post-title a {
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
	.mn-posts .wp-block-post-template > li:hover .wp-block-post-featured-image img { transform: none; }
}

/* A post marked Sticky in WordPress is larger when it comes first, which it
   does on Insights. On a category page posts stay in date order, so it is
   only larger there if it happens to be the newest. */
@media (min-width: 760px) {
	.mn-posts .wp-block-post-template > li.mn-sticky:first-child {
		grid-column: span 2;
		display: flex;
		flex-direction: column;
	}

	.mn-posts li.mn-sticky:first-child .wp-block-post-featured-image {
		flex: 1 1 auto;
		min-height: 0;
	}

	.mn-posts li.mn-sticky:first-child .wp-block-post-featured-image a {
		display: block;
		height: 100%;
	}

	.mn-posts li.mn-sticky:first-child .wp-block-post-featured-image img {
		height: 100%;
		min-height: 320px;
		aspect-ratio: 16 / 9;
	}

	.mn-posts li.mn-sticky:first-child .wp-block-post-title {
		font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem);
		line-height: 1.12;
		max-width: 22ch;
	}

	.mn-posts li.mn-sticky:first-child .wp-block-post-excerpt__excerpt {
		font-size: 1.125rem;
		max-width: 38rem;
	}
}

/* three columns: the sticky post is two wide and two deep */
@media (min-width: 1130px) {
	.mn-posts .wp-block-post-template > li.mn-sticky:first-child {
		grid-row: span 2;
	}
}

/* Cards share their rows: every picture in a row is the same height and the
   text beneath starts on the same line, and the sticky post's picture ends
   level with the picture beside it. Each card takes two rows of the grid, one
   for its picture and one for its text (a Group with the class mn-card__text).
   The sticky post, at three columns, takes four: its picture fills three. */
.wp-block-group.mn-card__text > * {
	margin-block: 0;
}

.wp-block-group.mn-card__text > * + * {
	margin-block-start: 12px;
}

@supports (grid-template-rows: subgrid) {
	.mn-posts .wp-block-post-template {
		row-gap: 0;
		margin-bottom: -44px;
	}

	.mn-posts .wp-block-post-template > li,
	.mn-posts .wp-block-post-template > li.mn-sticky:first-child {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
		margin-bottom: 44px;
	}

	.mn-posts .wp-block-post-template > li > * {
		margin-block: 0;
		min-width: 0;
	}

	.mn-posts .wp-block-post-template > li > .wp-block-post-featured-image {
		grid-row: 1;
		margin-bottom: 18px;
	}

	.mn-posts .wp-block-post-template > li > .mn-card__text {
		grid-row: 2;
	}

	@media (min-width: 1130px) {
		.mn-posts .wp-block-post-template > li.mn-sticky:first-child {
			grid-row: span 4;
		}

		.mn-posts .wp-block-post-template > li.mn-sticky:first-child > .wp-block-post-featured-image {
			grid-row: 1 / span 3;
		}

		.mn-posts .wp-block-post-template > li.mn-sticky:first-child > .mn-card__text {
			grid-row: 4;
		}
	}
}

/* =====================================================================
   21. Intro call form
   =====================================================================
   Printed by the [mentora_apply] shortcode.
   ===================================================================== */

.mn-form {
	background: #FFFFFF;
	border: 1px solid var(--mn-line);
	border-radius: var(--mn-r-lg);
	padding: clamp(22px, 3.5vw, 40px);
	box-shadow: 0 30px 60px -40px rgba(31, 46, 58, 0.35);
	scroll-margin-top: calc(var(--mn-header-h) + 24px);
}

.mn-form form {
	margin: 0;
}

.mn-field-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	gap: 0 20px;
}

.mn-field {
	margin: 0 0 18px;
	min-width: 0;
}

.mn-field label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--mn-display);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--mn-ink);
}

.mn-field__opt {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
}

.mn-field input,
.mn-field select,
.mn-field textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 12px 14px;
	font: inherit;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--mn-ink);
	background-color: #FFFFFF;
	border: 1px solid #9DB9C7;
	border-radius: 12px;
	-webkit-appearance: none;
	appearance: none;
}

.mn-field select {
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231F2E3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}

.mn-field textarea {
	min-height: 8.5em;
	resize: vertical;
}

.mn-field input::placeholder,
.mn-field textarea::placeholder {
	color: #7B8E9B;
	opacity: 1;
}

.mn-field input:focus,
.mn-field select:focus,
.mn-field textarea:focus {
	outline: 3px solid var(--mn-sky);
	outline-offset: 1px;
	border-color: var(--mn-ink);
}

.mn-field-bad input,
.mn-field-bad select,
.mn-field-bad textarea {
	border-color: #B3261E;
}

.mn-field__err {
	display: block;
	margin-top: 6px;
	font-size: 0.9375rem;
	color: #B3261E;
}

.mn-field-actions {
	margin: 6px 0 0;
}

.mn-field-actions button {
	cursor: pointer;
	font-size: 1.125rem;
	padding: 16px 30px;
}

.mn-form__note {
	margin: 14px 0 0;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

.mn-form__msg {
	margin: 0 0 16px;
	font-family: var(--mn-display);
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--mn-ink);
}

.mn-form__msg-bad {
	padding: 14px 18px;
	font-size: 1.0625rem;
	color: #8C1D18;
	background: #FCEEED;
	border-radius: 12px;
}

.mn-form-sent > p:last-child {
	margin-bottom: 0;
}

/* the field people never see */
.mn-pot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =====================================================================
   22. Course page
   ===================================================================== */

.wp-block-group.mn-parts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 32px 44px;
}

.wp-block-group.mn-parts > * {
	margin: 0;
	border-top: 3px solid var(--mn-sky);
	padding-top: 16px;
}

.mn-parts > :nth-child(3n + 2) { border-top-color: var(--mn-mint); }
.mn-parts > :nth-child(3n + 3) { border-top-color: var(--mn-green); }

.mn-parts > .wp-block-group > * {
	margin-block: 0;
}

.mn-parts > .wp-block-group > p {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

.mn-parts > .wp-block-group > h3 {
	margin-top: 2px;
}

.mn-parts ul.wp-block-list {
	margin-top: 10px;
	padding-left: 20px;
	font-size: 1.0625rem;
}

.mn-parts ul.wp-block-list li + li {
	margin-top: 4px;
}

/* the picture at the top of the course page, on a white card */
.mn-coursehead .wp-block-image.mn-course__img {
	background: #FFFFFF;
	border-radius: var(--mn-r);
	padding: clamp(12px, 2vw, 24px);
	box-sizing: border-box;
}

.mn-coursehead .mn-course__text {
	flex: 1 1 380px;
}

/* a plain list with ticks */
ul.wp-block-list.is-style-ticks {
	list-style: none;
	padding-left: 0;
}

ul.wp-block-list.is-style-ticks li {
	position: relative;
	padding-left: 32px;
}

ul.wp-block-list.is-style-ticks li + li {
	margin-top: 10px;
}

ul.wp-block-list.is-style-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--mn-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.6' fill='none' stroke='%2312303A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* =====================================================================
   23. Form fields on older pages
   =====================================================================
   Pages not yet rebuilt still carry forms from plugins. These rules have
   no weight of their own (that is what :where does), so a plugin that
   styles its own fields always wins.
   ===================================================================== */

main :where(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], textarea, select) {
	max-width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	font: inherit;
	color: var(--mn-ink);
	background-color: #FFFFFF;
	border: 1px solid #9DB9C7;
	border-radius: 12px;
}

main :where(input[type="submit"], button[type="submit"]) {
	cursor: pointer;
	padding: 14px 26px;
	font-family: var(--mn-display);
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--aqua-ink);
	background: var(--wp--preset--color--aqua);
	border: 0;
	border-radius: 999px;
}

/* =====================================================================
   24. Articles
   =====================================================================
   What a blog post is made of, all ordinary blocks: paragraphs, headings,
   lists, images, galleries, quotes, a table, Media & Text. Everything sits
   in the one reading column. Nothing here needs a class typing in, except
   the few named below.

   Quote styles (Styles panel): Default, "Message example" and "Message
   not to send".
   Media & Text classes: mn-tool (a small logo beside a few lines),
   mn-aside (a photo beside a few paragraphs).
   Table class: mn-pairs (two columns, the right-hand one picked out).
   Gallery class: mn-shots (screenshots shown whole, not cropped).
   Group classes reused from the home page: mn-facts, mn-topics__grid.

   Most of these rules are not tied to the post template, so the blocks
   look the same in the editor as they do on the site.
   ===================================================================== */

/* --- the reading column: a little larger and looser than a page --- */

.mn-post .wp-block-post-content {
	--mn-measure: 43rem;	/* the column width set in the Single Post template */
	margin-block-start: clamp(28px, 4vw, 44px);
	font-size: 1.125rem;
	line-height: 1.7;
}

.mn-post .wp-block-post-content > p.is-style-lede {
	font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.4rem);
}

.mn-post .wp-block-post-content h3 {
	font-size: 1.375rem;
}

/* --- lists --- */

.mn-post .wp-block-post-content :is(ul, ol).wp-block-list:not(.is-style-ticks) {
	padding-left: 1.3em;
}

.mn-post .wp-block-post-content .wp-block-list li + li {
	margin-top: 0.4em;
}

.mn-post .wp-block-post-content ol.wp-block-list li::marker {
	font-family: var(--mn-display);
	font-weight: 700;
	color: var(--mn-ink);
}

/* --- images standing on their own in the column --- */

:is(.mn-post .wp-block-post-content, .is-root-container) > figure.wp-block-image {
	margin-block: 2em;
}

:is(.mn-post .wp-block-post-content, .is-root-container) > .wp-block-image img {
	border-radius: var(--mn-r-sm);
	box-shadow: 0 0 0 1px var(--mn-line);
}

.wp-block-image > figcaption {
	margin: 12px 0 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	text-align: left;
}

/* --- galleries --- */

.wp-block-gallery.has-nested-images {
	--wp--style--unstable-gallery-gap: 12px;
	gap: 12px;
	margin-block: 2em;
}

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: 14px;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	margin: 0;
	border-radius: 0 0 14px 14px;
	padding: 28px 14px 12px;
	font-size: 0.875rem;
	line-height: 1.4;
	color: #FFFFFF;
	text-align: left;
}

/* on a phone, one picture to a row: two across is too small to read */
@media (max-width: 480px) {
	.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
		width: 100%;
	}
}

/* A set of screenshots: shown whole, with a hairline round each. */
.wp-block-gallery.mn-shots {
	align-items: flex-start;
}

.wp-block-gallery.mn-shots figure.wp-block-image img {
	box-shadow: 0 0 0 1px var(--mn-line);
}

/* --- quotes (the reviews have their own look, under 8) --- */

.wp-block-quote:not(.mn-review) {
	margin-block: 2em;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--mn-mint);
	font-family: var(--mn-display);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.45;
	color: var(--mn-ink);
}

.wp-block-quote:not(.mn-review) > * {
	margin-block: 0;
}

.wp-block-quote:not(.mn-review) > * + * {
	margin-block-start: 0.7em;
}

.wp-block-quote:not(.mn-review) em {
	font-style: normal;
}

.wp-block-quote:not(.mn-review) cite {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-style: normal;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

/* A message as it would be typed: a speech bubble, not a pull quote. It
   hugs its text and keeps to the left edge of the reading column. */
.wp-block-quote:is(.is-style-message, .is-style-message-bad) {
	width: fit-content;
	max-width: min(100%, 34rem);
	margin-block: 1.5em;
	padding: 18px 22px;
	border: 0;
	border-radius: 20px 20px 20px 6px;
	background: var(--mn-wash);
	font-family: inherit;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.55;
}

.is-layout-constrained > .wp-block-quote:is(.is-style-message, .is-style-message-bad) {
	margin-left: max(0px, calc((100% - var(--mn-measure, var(--wp--style--global--content-size))) / 2)) !important;
}

.wp-block-quote.is-style-message-bad {
	background: #FDECEA;
	box-shadow: inset 0 0 0 1px #F3C4BF;
}

/* --- tables --- */

.wp-block-table {
	margin-block: 2em;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table :is(td, th) {
	padding: 14px 18px;
	border: 0;
	border-top: 1px solid var(--mn-line-strong);
	text-align: left;
	vertical-align: top;
}

.wp-block-table tr:last-child :is(td, th) {
	border-bottom: 1px solid var(--mn-line-strong);
}

/* left: the generalist. right: the specialist, in bold on a tint. */
.wp-block-table.mn-pairs td:last-child {
	background: var(--mn-wash);
	font-weight: 600;
	color: var(--mn-ink);
}

/* --- Media & Text --- */

.wp-block-media-text {
	margin-block: 2em;
	gap: 0 28px;
}

.wp-block-media-text > .wp-block-media-text__content {
	padding: 0;
}

.wp-block-media-text > .wp-block-media-text__content > * {
	margin-block: 0;
}

.wp-block-media-text > .wp-block-media-text__content > * + * {
	margin-block-start: 0.8em;
}

.wp-block-media-text > .wp-block-media-text__media img {
	border-radius: var(--mn-r-sm);
}

/* a logo beside a few lines; on a phone the logo sits small above them */
@media (min-width: 601px) {
	.wp-block-media-text.mn-tool {
		grid-template-columns: 96px minmax(0, 1fr) !important;
		gap: 0 26px;
	}
}

@media (max-width: 600px) {
	.wp-block-media-text.mn-tool.is-stacked-on-mobile > .wp-block-media-text__media {
		max-width: 60px;
		margin-bottom: 14px;
	}
}

.wp-block-media-text.mn-tool {
	margin-block: 1.75em;
}

.wp-block-media-text.mn-tool > .wp-block-media-text__media img {
	border-radius: 22%;
	box-shadow: 0 0 0 1px var(--mn-line);
}

.wp-block-media-text.mn-tool h3 {
	font-size: 1.25rem;
	margin-block-start: 0;
}

/* a photo beside a few paragraphs: on a phone the photo goes on top, small */
@media (max-width: 600px) {
	.wp-block-media-text.mn-aside.is-stacked-on-mobile > .wp-block-media-text__media {
		max-width: 220px;
		margin-bottom: 18px;
	}
}

/* --- pieces borrowed from the home page, sized for the reading column --- */

.mn-post .wp-block-group.mn-facts {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 28px;
	margin-block: 2em;
}

@media (max-width: 479px) {
	.mn-post .wp-block-group.mn-facts { grid-template-columns: minmax(0, 1fr); }
}

.mn-post .wp-block-group.mn-topics__grid {
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: 28px 36px;
	margin-block: 2em;
}

.mn-post .mn-topics__grid h3 {
	font-size: 1.1875rem;
	margin-block-start: 0;
}

.mn-post p.is-style-note {
	margin-block: 2em;
	font-family: var(--mn-display);
	font-weight: 700;
	font-size: 1.25rem;
}

/* =====================================================================
   25. Shop: basket, checkout, account
   =====================================================================
   WooCommerce's own pages, built from its shortcodes. The markup is
   WooCommerce's, so these rules follow its class names. Nothing here
   changes what the shop does; it is only how it looks.

   The checkout has its own template (Checkout, in the Site Editor) with a
   header that is just the logo, so nothing on the page leads away from
   paying.
   ===================================================================== */

/* One width for the shop's pages: WooCommerce sets its own parts to
   1000px, so the title and anything typed on the page match it. */
:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) .wp-site-blocks > main {
	--wp--style--global--content-size: 1000px;
	--wp--style--global--wide-size: 1000px;
}

:is(.woocommerce-cart, .woocommerce-checkout, .woocommerce-account) main .wp-block-post-content > .woocommerce {
	max-width: 1000px;
}

main.mn-shop {
	padding-block: clamp(32px, 5vw, 64px) var(--mn-section);
}

main.mn-shop > .wp-block-post-title {
	margin-bottom: clamp(20px, 3vw, 36px);
	font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* --- notices --- */

.woocommerce .wc-block-components-notice-banner {
	margin-block: 0 24px;
	padding: 14px 18px;
	border: 0;
	border-radius: 14px;
	background: var(--mn-wash);
	color: var(--mn-ink);
	font-size: 1rem;
}

.woocommerce .wc-block-components-notice-banner.is-error {
	background: #FDECEA;
}

.woocommerce .wc-block-components-notice-banner.is-success {
	background: #E5F8EF;
}

.woocommerce .wc-block-components-notice-banner > svg {
	background-color: var(--mn-ink);
	fill: #FFFFFF;
}

.woocommerce .wc-block-components-notice-banner.is-error > svg {
	background-color: #B3261E;
}

.woocommerce .wc-block-components-notice-banner .button {
	margin-left: auto;
}

/* --- fields --- */

.woocommerce form .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--mn-ink);
}

.woocommerce form .form-row .required {
	color: #B3261E;
	text-decoration: none;
}

.woocommerce form .form-row :is(input.input-text, textarea, select) {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font: inherit;
	color: var(--mn-ink);
	background: #FFFFFF;
	border: 1px solid #9DB9C7;
	border-radius: 12px;
}

.woocommerce form .form-row textarea {
	min-height: 96px;
}

.woocommerce form .form-row :is(input.input-text, textarea, select):focus-visible {
	outline: 3px solid var(--mn-sky);
	outline-offset: 1px;
	border-color: var(--mn-ink);
}

/* the country and county pickers */
.woocommerce form .form-row .select2-container {
	display: block;
	height: auto;
}

.woocommerce form .form-row .select2-container .select2-selection--single {
	height: 50px;
	margin: 0;
	padding: 0;
	border: 1px solid #9DB9C7;
	border-radius: 12px;
	background: #FFFFFF;
}

.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 14px;
	line-height: 48px;
	color: var(--mn-ink);
}

.woocommerce form .form-row .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 10px;
	height: 48px;
}

.woocommerce form .form-row.woocommerce-invalid :is(input.input-text, select),
.woocommerce form .form-row.woocommerce-invalid .select2-selection {
	border-color: #B3261E;
}

/* --- checkout: details on the left, the order and payment on the right --- */

.woocommerce-checkout form.checkout h3 {
	margin: 0 0 18px;
	font-size: 1.375rem;
}

.woocommerce-checkout #customer_details.col2-set > :is(.col-1, .col-2) {
	float: none;
	width: 100%;
	max-width: none;
}

.woocommerce-checkout #customer_details .woocommerce-additional-fields {
	margin-top: 12px;
}

.woocommerce-checkout #order_review {
	position: relative;
	padding: clamp(18px, 3vw, 26px);
	border-radius: var(--mn-r);
	background: var(--mn-wash);
}

@media (min-width: 900px) {
	.woocommerce-checkout form.checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
		grid-template-rows: auto 1fr;	/* the heading's row stays the heading's height */
		gap: 0 clamp(32px, 5vw, 72px);
		align-items: start;
	}

	.woocommerce-checkout form.checkout > #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.woocommerce-checkout form.checkout > #order_review_heading {
		grid-column: 2;
		grid-row: 1;
	}

	.woocommerce-checkout form.checkout > #order_review {
		grid-column: 2;
		grid-row: 2;
	}
}

@media (max-width: 899px) {
	.woocommerce-checkout form.checkout > #order_review_heading {
		margin-top: 28px;
	}
}

.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 20px;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

.woocommerce table.shop_table :is(th, td) {
	padding: 12px 0;
	border: 0;
	border-top: 1px solid var(--mn-line-strong);
	text-align: left;
	vertical-align: top;
	font-weight: 400;
	color: var(--mn-ink);
}

.woocommerce table.shop_table thead :is(th, td) {
	border-top: 0;
	padding-top: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
}

.woocommerce table.shop_table :is(th, td):last-child {
	text-align: right;
	white-space: nowrap;
}

.woocommerce table.shop_table tfoot th {
	font-weight: 600;
}

.woocommerce table.shop_table tr.order-total :is(th, td) {
	font-family: var(--mn-display);
	font-weight: 800;
	font-size: 1.25rem;
}

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods > li {
	margin: 0;
	padding: 0;
}

.woocommerce-checkout #payment ul.payment_methods > li > label {
	font-weight: 600;
	color: var(--mn-ink);
}

.woocommerce-checkout #payment div.payment_box {
	margin: 12px 0 0;
	padding: 16px;
	border-radius: 14px;
	background: #FFFFFF;
	color: var(--wp--preset--color--body);
	font-size: 0.9375rem;
}

.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

.woocommerce-checkout #payment div.payment_box fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Stripe's card boxes: the number itself is typed inside Stripe's frame */
.woocommerce-checkout #payment .wc-stripe-elements-field {
	height: auto;
	margin: 0;
	padding: 14px;
	border: 1px solid #9DB9C7;
	border-radius: 12px;
	background: #FFFFFF;
}

.woocommerce-checkout #payment div.payment_box div.form-row {
	box-sizing: border-box;
	margin: 0 0 12px;
	padding: 0;
}

.woocommerce-checkout #payment div.payment_box div.form-row:is(.form-row-first, .form-row-last) {
	width: 48%;
}

.woocommerce-checkout #payment div.payment_box > p:first-child,
.woocommerce-checkout #payment #stripe-payment-data > p:first-child {
	margin-top: 0;
}

.woocommerce-checkout #payment .woocommerce-SavedPaymentMethods-saveNew label {
	display: inline;
	font-weight: 400;
}

.woocommerce-checkout #payment .wc-saved-payment-methods {
	margin: 8px 0;
	padding: 0;
	list-style: none;
}

.woocommerce-checkout #payment div.form-row.place-order {
	margin: 0;
	padding: 0;
}

.woocommerce-checkout #payment #place_order {
	float: none;
	width: 100%;
	padding: 16px 26px;
	font-size: 1.125rem;
}

.woocommerce-checkout .woocommerce-privacy-policy-text {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* --- coupon box on the checkout --- */

.woocommerce form.checkout_coupon {
	margin: 0 0 24px;
	padding: 18px;
	border: 1px solid var(--mn-line-strong);
	border-radius: 14px;
}

/* --- buttons WooCommerce draws itself --- */

.woocommerce :is(a.button, button.button, input.button):not(.wp-element-button) {
	padding: 12px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--mn-ink);
	color: #FFFFFF;
	font-family: var(--mn-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
}

.woocommerce :is(a.button, button.button, input.button).alt:not(.wp-element-button),
.woocommerce a.checkout-button {
	background: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--aqua-ink);
}

/* --- basket --- */

.woocommerce-cart table.cart td.product-thumbnail img {
	width: 72px;
	border-radius: 12px;
}

.woocommerce-cart table.cart td.actions {
	padding-top: 18px;
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	float: none;
	margin-bottom: 12px;
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	width: auto;
	flex: 1 1 180px;
	padding: 11px 14px;
	border: 1px solid #9DB9C7;
	border-radius: 12px;
	font: inherit;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	max-width: 27rem;
	margin-left: auto;
	padding: clamp(18px, 3vw, 26px);
	border-radius: var(--mn-r);
	background: var(--mn-wash);
	box-sizing: border-box;
}

.woocommerce-cart .cart_totals h2 {
	margin: 0 0 14px;
	font-size: 1.375rem;
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	margin: 0;
	padding: 16px 26px;
	font-size: 1.125rem;
	text-align: center;
}

/* --- account: the log-in form --- */

.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register,
.woocommerce form.lost_reset_password {
	max-width: 27rem;
	margin: 0;
	padding: clamp(18px, 3vw, 26px);
	border: 0;
	border-radius: var(--mn-r);
	background: var(--mn-wash);
}

.woocommerce-account .woocommerce > h2 {
	margin-top: 0;
	font-size: 1.375rem;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.woocommerce-account .woocommerce-MyAccount-navigation :is(a, li.is-active a) {
	color: var(--mn-ink);
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: 100%;
}

/* --- a single product (the Power Hour) ---
   WooCommerce's own template, tidied: no breadcrumb, category line, tab bar
   or related products, so the page is the picture, the price and the button. */
.single-product main .wc-block-breadcrumbs,
.single-product main .wp-block-woocommerce-product-meta,
.single-product main .wp-block-woocommerce-related-products,
.single-product main .woocommerce-tabs ul.tabs,
.single-product main .woocommerce-Tabs-panel > h2:first-child {
	display: none;
}

.single-product main.wp-block-group {
	padding-block: clamp(32px, 5vw, 64px) var(--mn-section);
}

.single-product main .wc-block-store-notices {
	margin-block: 0;
}

.single-product main > .wp-block-columns {
	gap: clamp(28px, 5vw, 72px);
	align-items: flex-start;
	margin-block: 0;
}

.single-product main > .wp-block-columns > .wp-block-column:first-child {
	flex: 0 1 440px;
}

.single-product main > .wp-block-columns > .wp-block-column:last-child {
	flex: 1 1 420px;
}

.single-product main > .wp-block-columns > .wp-block-column:last-child > * {
	margin-block: 0;
	max-width: 40rem;
}

.single-product main > .wp-block-columns > .wp-block-column:last-child > * + * {
	margin-block-start: 18px;
}

.single-product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.single-product .woocommerce-product-gallery__wrapper {
	border-radius: var(--mn-r-lg);
	overflow: hidden;
}

.single-product .woocommerce-product-gallery img {
	display: block;
	width: 100%;
	height: auto;
}

.single-product main h1.wp-block-post-title {
	font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.2rem);
	line-height: 1.06;
}

.single-product main .wp-block-woocommerce-product-price .amount {
	font-family: var(--mn-display);
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--mn-ink);
}

.single-product main .wp-block-post-excerpt__excerpt {
	font-size: 1.125rem;
}

.single-product main form.cart {
	margin: 6px 0 0;
}

.single-product main .wp-block-woocommerce-product-details {
	margin-block-start: clamp(40px, 6vw, 72px);
	padding-top: clamp(32px, 4vw, 48px);
	border-top: 1px solid var(--mn-line);
}

.single-product main .woocommerce-Tabs-panel {
	margin: 0;
	padding: 0;
}

.single-product main .woocommerce-Tabs-panel > * {
	max-width: 44rem;
}

/* =====================================================================
   26. Course and lessons
   =====================================================================
   LearnDash draws the course outline, the lesson video and the buttons
   itself, and takes its colours from LearnDash > Settings > General
   (Accent colour). The theme only gives those pages a plain frame: the
   title, the course picture, the content. No date, and no mentoring band
   under a lesson somebody has paid for.
   ===================================================================== */

main.mn-course > .wp-block-post-title {
	margin-bottom: clamp(18px, 3vw, 30px);
}

.mn-course .wp-block-post-content {
	margin-block-start: clamp(20px, 3vw, 32px);
}

/* a lesson's text keeps to a comfortable line; the video can be wider */
.mn-lesson .ld-tabs-content :is(p, ul, ol) {
	max-width: 43rem;
}

/* =====================================================================
   27. Terms
   =====================================================================
   A Group with the class mn-terms holding one Group per term: a heading,
   then its paragraphs. On a wide screen the heading sits to the left of
   the text. Terms are numbered; add mn-terms-plain to leave the numbers off.
   ===================================================================== */

.wp-block-group.mn-terms {
	counter-reset: mn-term;
}

.wp-block-group.mn-terms + .wp-block-group.mn-terms {
	margin-block-start: 0;
}

.wp-block-group.mn-terms > .wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
	margin: 0;
	padding-block: 28px;
	border-top: 1px solid var(--mn-line);
}

.wp-block-group.mn-terms > .wp-block-group > * {
	margin: 0;
	max-width: 44rem;
}

.mn-terms > .wp-block-group > :is(h2, h3) {
	font-size: 1.375rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.mn-terms:not(.mn-terms-plain) > .wp-block-group > :is(h2, h3) {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.mn-terms:not(.mn-terms-plain) > .wp-block-group > :is(h2, h3)::before {
	counter-increment: mn-term;
	content: counter(mn-term, decimal-leading-zero);
	flex: none;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--muted);
}

/* the unnumbered rows line up with the numbered titles above them */
.mn-terms.mn-terms-plain > .wp-block-group > :is(h2, h3) {
	padding-left: calc(0.875rem * 1.3 + 14px);
}

@media (min-width: 860px) {
	.wp-block-group.mn-terms > .wp-block-group {
		grid-template-columns: minmax(0, 19rem) minmax(0, 44rem);
		gap: 14px clamp(32px, 5vw, 72px);
		padding-block: 34px;
	}

	.mn-terms > .wp-block-group > * {
		grid-column: 2;
	}

	.mn-terms > .wp-block-group > :is(h2, h3) {
		grid-column: 1;
		grid-row: 1;
	}
}

/* =====================================================================
   28. Motion
   =====================================================================
   Everything here plays once and then stays put. One curve throughout: a
   quick start that eases to a stop.

   - On the home page the three bars beside the photo grow as the page opens.
   - The four plan cards start level and rise to their stepped heights.
   - Further down a page, cards and columns arrive as they scroll into view,
     their coloured rule drawing in from the left and review stars filling.
     Anything already on screen when the page opens is left alone.
   - The closing band's bars (section 14).

   A line of script in the page head adds the class mn-motion to the page,
   and only when the visitor has not asked their device for less motion.
   theme.js does the watching: it adds mn-wait to things below the screen
   and is-in when they come into view. Without either, nothing is hidden and
   nothing moves. The editor never has these classes.
   ===================================================================== */

/* --- the hero's bars (home page) --- */
@property --mn-hbar1 { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --mn-hbar2 { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --mn-hbar3 { syntax: "<number>"; inherits: false; initial-value: 1; }

.mn-motion .mn-hero__visual {
	background-size:
		7.5% calc(34% * var(--mn-hbar1, 1)),
		7.5% calc(55% * var(--mn-hbar2, 1)),
		7.5% calc(77% * var(--mn-hbar3, 1));
	animation:
		mn-hbar1 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both,
		mn-hbar2 1s cubic-bezier(0.22, 1, 0.36, 1) 0.27s both,
		mn-hbar3 1s cubic-bezier(0.22, 1, 0.36, 1) 0.39s both;
}

@keyframes mn-hbar1 { from { --mn-hbar1: 0; } to { --mn-hbar1: 1; } }
@keyframes mn-hbar2 { from { --mn-hbar2: 0; } to { --mn-hbar2: 1; } }
@keyframes mn-hbar3 { from { --mn-hbar3: 0; } to { --mn-hbar3: 1; } }

/* --- the plan cards ---
   Where they stand as four stepped bars, they begin the height of the first
   card and each rises to its own, carrying its heading and price with it.
   The card is trimmed from the top (clip-path) and its text moved down by
   the same amount, so nothing on the page is pushed about while it happens. */
@media (min-width: 1120px) {
	.mn-motion .mn-plans__grid > .mn-plan:nth-child(2) { --mn-grow: 70px; --mn-late: 0.06s; }
	.mn-motion .mn-plans__grid > .mn-plan:nth-child(3) { --mn-grow: 140px; --mn-late: 0.16s; }
	.mn-motion .mn-plans__grid > .mn-plan:nth-child(4) { --mn-grow: 210px; --mn-late: 0.26s; }

	.mn-motion .mn-plans__grid:not(.is-in) > .mn-plan {
		clip-path: inset(var(--mn-grow, 0px) 0 0 0 round var(--mn-r-lg));
	}

	.mn-motion .mn-plans__grid:not(.is-in) > .mn-plan > :not(.wp-block-buttons) {
		transform: translateY(var(--mn-grow, 0px));
	}

	.mn-motion .mn-plans__grid.is-in > .mn-plan {
		animation: mn-plan-rise 1s cubic-bezier(0.22, 1, 0.36, 1) var(--mn-late, 0s) backwards;
	}

	.mn-motion .mn-plans__grid.is-in > .mn-plan > :not(.wp-block-buttons) {
		animation: mn-plan-text 1s cubic-bezier(0.22, 1, 0.36, 1) var(--mn-late, 0s) backwards;
	}

	/* While a card is short there is not always room for its list above the
	   button, so the list (or the paragraph on the dark card) fades in as
	   the card rises. Name, price and button are there from the start. */
	.mn-motion .mn-plans__grid:not(.is-in) > .mn-plan > :is(ul, .mn-plan__text) {
		opacity: 0;
	}

	.mn-motion .mn-plans__grid.is-in > .mn-plan > :is(ul, .mn-plan__text) {
		animation:
			mn-plan-text 1s cubic-bezier(0.22, 1, 0.36, 1) var(--mn-late, 0s) backwards,
			mn-plan-fade 0.7s ease calc(var(--mn-late, 0s) + 0.3s) backwards;
	}
}

@keyframes mn-plan-rise {
	from { clip-path: inset(var(--mn-grow, 0px) 0 0 0 round var(--mn-r-lg)); }
	to { clip-path: inset(0 0 0 0 round var(--mn-r-lg)); }
}

@keyframes mn-plan-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes mn-plan-text {
	from { transform: translateY(var(--mn-grow, 0px)); }
	to { transform: none; }
}

/* --- arriving as it scrolls into view --- */
.mn-wait {
	opacity: 0;
	transform: translateY(18px);
}

.mn-wait.is-in {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.6s ease var(--mn-d, 0s),
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--mn-d, 0s);
}

/* the short coloured bar above a topic draws in from the left */
.mn-topics__grid > .mn-wait::before {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--mn-d, 0s) + 0.2s);
}

.mn-topics__grid > .mn-wait.is-in::before {
	transform: none;
}

/* the rule above a step or a fact does the same, right across */
.mn-steps > .mn-wait,
.mn-facts > .mn-wait {
	position: relative;
	border-top-color: transparent;
}

.mn-steps > .mn-wait::after,
.mn-facts > .mn-wait::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -3px;
	height: 3px;
	background: var(--mn-sky);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--mn-d, 0s) + 0.15s);
}

.mn-steps > .mn-wait.is-in::after,
.mn-facts > .mn-wait.is-in::after {
	transform: none;
}

.mn-steps > .mn-wait:nth-child(3n + 2)::after,
.mn-facts > .mn-wait:nth-child(4n + 2)::after { background: var(--mn-mint); }

.mn-steps > .mn-wait:nth-child(3n + 3)::after,
.mn-facts > .mn-wait:nth-child(4n + 3)::after { background: var(--mn-green); }

.mn-facts > .mn-wait:nth-child(4n + 4)::after { background: var(--mn-slate); }

/* a review's five stars fill from left to right */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.mn-review.mn-wait::before {
		justify-self: start;
		background: linear-gradient(90deg, var(--mn-star) 50%, #D5E3EA 50%) 100% 0 / 200% 100% no-repeat;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		transition: background-position 0.9s ease calc(var(--mn-d, 0s) + 0.3s);
	}

	.mn-review.mn-wait.is-in::before {
		background-position: 0 0;
	}
}

/* Belt and braces: if the page has been told to keep still, or is being
   printed, nothing waits and nothing moves. */
@media (prefers-reduced-motion: reduce), print {
	.mn-wait,
	.mn-wait.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.mn-hero__visual,
	.mn-plans__grid > .mn-plan,
	.mn-plans__grid > .mn-plan > * {
		animation: none !important;
		clip-path: none !important;
		transform: none !important;
	}
}