/* ==========================================================================
   Home page sections
   Bestsellers · bundles · technology · testimonials. Loaded after style.css.
   ========================================================================== */

/* The floating nav is fixed, so every page needs clearance under it. */
body { padding-top: 0; }
/* Storefront leaves a 4.2358em bottom margin on the otherwise empty homepage
   masthead. Collapse that shell so the hero artwork reaches the viewport edge
   behind the floating navigation, then keep the copy clear of the pills. */
.home.page:not(.page-template-template-homepage) .site-header {
	min-height: 0;
	padding: 0;
	margin-bottom: 0;
}
.mn-hero {
	margin-top: 0;
	padding-top: clamp(5rem, 7vw, 6rem);
}
/* Clearance for the fixed nav pill: it sits 0.9rem from the top and is ~52px
   tall, so anything under 7rem tucks beneath it.
   The breadcrumb is NOT inside .site-content — Storefront puts it in a sibling
   .storefront-breadcrumb — so padding the content alone left it under the nav. */
.site-content { padding-top: 7.5rem; }
.storefront-breadcrumb { padding-top: 7.5rem; }
.storefront-breadcrumb + .site-content { padding-top: 1.25rem; }
.home .site-content { padding-top: 0; }

/* -------------------------------------------------------------- section head */

.mn-sect__head {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.mn-sect__head h2 { margin: 0; max-width: 18ch; }
.mn-sect__aside { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.mn-sect__aside .mn-lede { margin: 0; }
.mn-sect__head--centred {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
}
.mn-sect__head--centred h2 { max-width: 22ch; }
.mn-sect__head--centred .mn-lede { max-width: 52ch; }

.mn-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: 0.95rem;
	font-weight: 500;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.1rem;
}

/* ------------------------------------------------------------- bestsellers */

.mn-pcards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.mn-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: rgba(252, 252, 247, 0.12);
	border: 1px solid rgba(252, 252, 247, 0.18);
	border-radius: var(--r-card);
	padding: 1.75rem 1.25rem 1.5rem;
	transition: background 220ms ease, transform 220ms ease;
}
.mn-pcard:hover { background: rgba(252, 252, 247, 0.17); transform: translateY(-3px); }

.mn-pcard__flag { position: absolute; top: 0.9rem; left: 0.9rem; }

.mn-pcard__code {
	display: inline-block;
	border: 1px solid rgba(252, 252, 247, 0.4);
	border-radius: var(--r-pill);
	padding: 0.2em 0.7em;
	font-size: 0.74rem;
	letter-spacing: 0.02em;
	color: var(--on-dark-2);
	margin-bottom: 0.7rem;
}

.mn-pcard__name {
	color: var(--cream);
	font-size: 1.4rem;
	font-weight: 350;
	letter-spacing: -0.024em;
	line-height: 1.15;
	margin: 0 0 1.1rem;
	min-height: 3.2em;
	display: flex;
	align-items: center;
}

.mn-pcard__media {
	display: block;
	width: 100%;
	margin-bottom: 1.1rem;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(252, 252, 247, 0.9);
}
.mn-pcard__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.mn-pcard__desc {
	color: var(--on-dark-2);
	font-size: 0.88rem;
	line-height: 1.45;
	margin: 0 0 1.25rem;
	min-height: 2.6em;
}

.mn-pcard__cta {
	background: var(--cream);
	color: var(--forest);
	border-color: var(--cream);
	width: 100%;
	margin-top: auto;
}
.mn-pcard__cta:hover { background: var(--lime); border-color: var(--lime); color: var(--forest); }

.mn-pcard__price {
	margin: 0.85rem 0 0;
	font-size: 0.82rem;
	color: var(--on-dark-2);
}
.mn-pcard__price .amount { color: var(--on-dark-2); font-weight: 350; }

/* ----------------------------------------------------------------- bundles */

.mn-bundle {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.mn-bundle__copy h2 { margin: 1rem 0; }
.mn-bundle__maths {
	background: var(--stone);
	border-radius: var(--r-card);
	padding: 0.9rem 1.15rem;
	font-size: 0.95rem;
	margin-bottom: 1.5rem;
	display: inline-block;
}
.mn-bundle__maths strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.mn-bundle__maths .amount { font-weight: 500; }

.mn-bundle__gallery { display: grid; gap: 1rem; }
.mn-bundle__hero {
	display: block;
	background: var(--stone);
	border-radius: var(--r-sect);
	overflow: hidden;
}
.mn-bundle__hero img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: contain;
	padding: 1.5rem;
}

.mn-bundle__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mn-bundle__tile {
	display: block;
	background: var(--stone);
	border-radius: var(--r-card);
	overflow: hidden;
	text-decoration: none;
	transition: transform 200ms ease;
}
.mn-bundle__tile:hover { transform: translateY(-3px); }
.mn-bundle__tile img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--white);
}
.mn-bundle__tile span {
	display: block;
	padding: 0.7rem 0.85rem 0.9rem;
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--ink-2);
}

/* -------------------------------------------------------------- technology */

.mn-tech {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	padding: clamp(4rem, 8vw, 7rem) 0;
	color: var(--cream);
	background: var(--forest);
}
.mn-tech__art {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The reference's signature: a wide frosted pane floating over the art. */
.mn-tech__panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
	background: rgba(87, 94, 85, 0.35);
	-webkit-backdrop-filter: blur(38px) saturate(1.2);
	backdrop-filter: blur(38px) saturate(1.2);
	border: 1px solid rgba(252, 252, 247, 0.16);
	border-radius: var(--r-sect);
	padding: clamp(2rem, 4vw, 3.5rem);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mn-tech__panel { background: rgba(28, 58, 19, 0.88); }
}
.mn-tech__panel h2 { color: var(--cream); margin: 0 0 1rem; }
.mn-tech__panel .mn-eyebrow { color: var(--lime); }
.mn-tech__panel .mn-lede { color: rgba(252, 252, 247, 0.86); }

.mn-tech__stat {
	display: inline-flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-top: 1.5rem;
	padding: 0.9rem 1.4rem;
	border: 1px solid rgba(252, 252, 247, 0.3);
	border-radius: var(--r-card);
}
.mn-tech__stat-label {
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(252, 252, 247, 0.72);
}
.mn-tech__stat-figure { font-size: 1.6rem; letter-spacing: -0.02em; }

.mn-tech__video {
	position: relative;
	display: block;
	border-radius: var(--r-card);
	overflow: hidden;
	background: rgba(20, 40, 14, 0.5);
	aspect-ratio: 4 / 3;
}
.mn-tech__video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.9;
}
.mn-tech__play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 2rem;
	color: rgba(252, 252, 247, 0.92);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}
.mn-tech__slug {
	position: absolute;
	left: 0.85rem;
	bottom: 0.85rem;
	background: rgba(20, 40, 14, 0.62);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-radius: var(--r-pill);
	padding: 0.3em 0.75em;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(252, 252, 247, 0.9);
}

.mn-tech__notes { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.mn-tech__notes li {
	padding: 0.7rem 0;
	border-bottom: 1px solid rgba(252, 252, 247, 0.16);
	font-size: 0.9rem;
	color: rgba(252, 252, 247, 0.82);
	line-height: 1.45;
}
.mn-tech__notes strong { display: block; color: var(--cream); font-weight: 500; }

/* ------------------------------------------------------------ testimonials */

.mn-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.mn-quote {
	margin: 0;
	background: var(--white);
	border-radius: var(--r-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.mn-quote__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: linear-gradient(145deg, var(--stone), #dfe0d6);
	display: grid;
	place-items: center;
	color: inherit;
	text-decoration: none;
}
.mn-quote__play {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3.8rem;
	height: 3.8rem;
	padding-left: 0.15rem;
	border-radius: 50%;
	background: rgba(252, 252, 247, 0.92);
	box-shadow: 0 8px 28px -8px rgba(20, 40, 14, 0.5);
	font-size: 1.2rem;
	color: var(--forest);
	transition: transform 180ms ease, background 180ms ease;
}
.mn-quote__media:hover .mn-quote__play,
.mn-quote__media:focus-visible .mn-quote__play {
	background: var(--lime);
	transform: scale(1.06);
}
.mn-quote__media:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.mn-quote__media .mn-tech__slug {
	background: rgba(28, 58, 19, 0.72);
	color: var(--cream);
}
.mn-quote blockquote { margin: 0; padding: 1.35rem 1.5rem 0.5rem; }
.mn-quote blockquote p {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.45;
	letter-spacing: -0.015em;
	color: var(--ink);
}
.mn-quote figcaption {
	margin-top: auto;
	padding: 0.75rem 1.5rem 1.5rem;
	font-size: 0.82rem;
	color: var(--ink-3);
}
.mn-quotes__note {
	margin-top: 1.5rem;
	font-size: 0.82rem;
	color: var(--ink-3);
	text-align: center;
}

/* ----------------------------------------------------------------- footer */

/* Background image behind the footer, washed back under a forest scrim. */
.site-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--mn-footer-art);
	background-size: cover;
	background-position: center 65%;
}
.site-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(28, 58, 19, 0.94) 0%, rgba(20, 40, 14, 0.97) 100%);
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
	.mn-pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.mn-sect__head { grid-template-columns: 1fr; align-items: start; }
	.mn-bundle { grid-template-columns: 1fr; }
	.mn-tech__panel { grid-template-columns: 1fr; }
	.mn-quotes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.mn-pcards { grid-template-columns: 1fr; }
	.mn-pcard__name { min-height: 0; }
	.mn-bundle__strip { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
	.mn-bundle__tile span { padding: 0.5rem 0.55rem 0.7rem; font-size: 0.74rem; }
}

/* ==========================================================================
   Topic pages — Science, Learn, About
   ========================================================================== */

.mn-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.mn-topics--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mn-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

.mn-topic {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: var(--r-card);
	overflow: hidden;
	transition: transform 200ms ease;
}
.mn-topic:hover { transform: translateY(-3px); }

.mn-topic__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: linear-gradient(150deg, var(--stone), #e2e3da);
	display: grid;
	place-items: center;
	overflow: hidden;
}
.mn-topic__media img { width: 62%; height: 100%; object-fit: contain; }
.mn-topic__blank { display: block; width: 100%; height: 100%; }

.mn-topic__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; }
.mn-topic__body h3 { margin: 0.15rem 0 0.6rem; font-size: 1.25rem; }
.mn-topic__body p { margin: 0; color: var(--ink-2); font-size: 0.95rem; line-height: 1.45; }
.mn-topic__meta {
	margin-top: 0.9rem !important;
	font-size: 0.78rem;
	color: var(--clay);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@media (max-width: 960px) {
	.mn-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.mn-topics, .mn-topics--two, .mn-posts { grid-template-columns: 1fr; }
}

/* Footer brand mark — cream colourway, since the footer is always forest. */
.mn-footer-brand { margin-bottom: 2.25rem; }
.mn-footer-brand img { display: block; width: 96px; height: 96px; }

@media (max-width: 640px) {
	.mn-footer-brand img { width: 72px; height: 72px; }
}

/* ==========================================================================
   Card elevation
   White cards on a cream ground have almost no edge of their own. Rather than
   darken the ground or add a hard border, they get a layered shadow: a tight
   contact shadow, a mid diffusion, and a wide ambient one. That reads as depth
   rather than as an outline, and keeps the surface calm.
   ========================================================================== */

:root {
	--lift-1:
		0 1px 2px rgba(28, 58, 19, 0.05),
		0 4px 10px -4px rgba(28, 58, 19, 0.07),
		0 14px 28px -12px rgba(28, 58, 19, 0.10);
	--lift-2:
		0 2px 4px rgba(28, 58, 19, 0.06),
		0 8px 18px -6px rgba(28, 58, 19, 0.10),
		0 28px 48px -16px rgba(28, 58, 19, 0.16);
	--edge: 1px solid rgba(28, 58, 19, 0.07);
}

ul.products li.product,
.mn-prop,
.mn-panel,
.mn-quote,
.mn-topic,
.mn-bundle__tile,
.mn-bundle__hero {
	border: var(--edge);
	box-shadow: var(--lift-1);
	transition: box-shadow 240ms ease, transform 240ms ease;
}

ul.products li.product:hover,
.mn-quote:hover,
.mn-topic:hover,
.mn-bundle__tile:hover,
.mn-bundle__hero:hover {
	box-shadow: var(--lift-2);
	transform: translateY(-4px);
}

/* A hair of tint under the product shot so the image bed separates from the
   card body without introducing a rule. */
ul.products li.product img,
.mn-pcard__media img { background: #F7F7F3; }

/* The frosted panels carry their own depth; a second shadow muddies them. */
.mn-collect-panel,
.mn-tech__panel { border: 1px solid rgba(255, 255, 255, 0.6); }

@media (prefers-reduced-motion: reduce) {
	ul.products li.product:hover,
	.mn-quote:hover,
	.mn-topic:hover,
	.mn-bundle__tile:hover,
	.mn-bundle__hero:hover { transform: none; }
}

.mn-topic__source {
	margin-top: 0.85rem !important;
	font-size: 0.82rem;
	color: var(--ink-3);
}
.mn-topic__source a { color: var(--sage); text-underline-offset: 2px; }
.mn-topic__meta + .mn-topic__source,
.mn-topic__source + .mn-topic__meta { margin-top: 0.4rem !important; }

/* ==========================================================================
   Click-to-load video
   The poster is local markup; the iframe only appears after a click, so the
   page makes no request to Google for anyone who merely scrolls past.
   ========================================================================== */

.mn-video { position: relative; width: 100%; }
.mn-video iframe,
.mn-video__trigger {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--r-card);
}
.mn-video__trigger {
	display: block;
	padding: 0;
	margin: 0;
	background: var(--stone);
	overflow: hidden;
	cursor: pointer;
	transition: transform 220ms ease;
}
.mn-video__trigger img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-video__trigger:hover { transform: scale(1.008); }

.mn-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 68px;
	height: 68px;
	padding-left: 3px;                 /* optically centre the triangle */
	border-radius: 50%;
	background: rgba(252, 252, 247, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--forest);
	box-shadow: 0 8px 28px -8px rgba(20, 40, 14, 0.5);
	transition: background 200ms ease, transform 200ms ease;
}
.mn-video__trigger:hover .mn-video__play { background: var(--lime); transform: translate(-50%, -50%) scale(1.06); }

.mn-video__credit {
	position: absolute;
	left: 0;
	bottom: -1.75rem;
	margin: 0;
	font-size: 0.76rem;
	color: var(--ink-3);
}
.mn-tech .mn-video__credit { color: rgba(252, 252, 247, 0.72); }
.mn-tech .mn-video__credit a { color: rgba(252, 252, 247, 0.92); }

.mn-video--empty {
	display: grid;
	place-items: center;
	background: var(--stone);
	border-radius: var(--r-card);
	position: relative;
}

/* Second technology band */
.mn-tech2 {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.mn-tech2__copy h2 { margin: 0 0 1rem; }
.mn-tech2__note {
	margin-top: 1.25rem;
	font-size: 0.84rem;
	color: var(--ink-3);
	padding-top: 0.9rem;
	border-top: 1px solid var(--rule);
}

@media (max-width: 960px) {
	.mn-tech2 { grid-template-columns: 1fr; }
}

/* Locally stored YouTube poster stills for the official video-link cards. */
.mn-quote__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(0.82);
}
.mn-quote__play {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(252, 252, 247, 0.88);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--forest);
	font-size: 1.15rem;
	padding-left: 3px;
	box-shadow: 0 6px 20px -6px rgba(20, 40, 14, 0.4);
}
.mn-quote__media .mn-tech__slug { z-index: 1; }