/**
 * Site chrome — Shopify Templates
 *
 * Loads on every template. Contains the design tokens, the floating pill
 * header, the mobile drawer, the footer and a light harmonisation layer for
 * inner pages so the whole site reads as one theme.
 *
 * Mobile-first. All selectors are `mt-` prefixed.
 *
 * 1. Tokens
 * 2. Shell & accessibility
 * 3. Header
 * 4. Drawer
 * 5. Footer
 * 6. Inner-page harmonisation
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--mt-dark: #12372a;
	--mt-dark-deep: #0f2a1e;
	--mt-lime: #95bf47;
	/* Hover shade of the accent. Derived from the Customizer colour so a
	   custom brand green still brightens correctly on hover. */
	--mt-lime-bright: #a5d24f;
	--mt-lime-ink: #12290b;
	--mt-glow: #d6ff57;
	--mt-bg: #f7f8f4;
	--mt-bg-hero: #f3f8e8;
	--mt-bg-cream: #fffcf5;
	--mt-bg-beige: #f6f1e8;
	--mt-ink: #16211b;
	--mt-muted: #5a6a61;
	--mt-radius: 32px;
	--mt-space: clamp(56px, 7vw, 104px);
	--mt-marquee: 46s;

	--mt-gutter: clamp(20px, 5.6vw, 80px);
	--mt-hair: rgba(0, 0, 0, 0.06);
	--mt-ease: cubic-bezier(0.16, 0.84, 0.36, 1);
	--mt-font: "Plus Jakarta Sans", "Instrument Sans", system-ui, -apple-system, sans-serif;
	--mt-font-body: "Inter", system-ui, -apple-system, sans-serif;
	--mt-nav-h: 78px;
}

@supports (color: color-mix(in srgb, #000, #fff)) {
	:root {
		--mt-lime-bright: color-mix(in srgb, var(--mt-lime) 84%, #ffffff);
	}
}

/* ==========================================================================
   2. Shell & accessibility
   ========================================================================== */

body.mt-shell {
	margin: 0;
	background: var(--mt-bg);
	color: var(--mt-ink);
	font-family: var(--mt-font);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.mt-site {
	position: relative;
}

.mt-skip:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 200;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--mt-dark);
	color: #fff;
	font-size: 15px;
}

.mt-shell :focus-visible {
	outline: 3px solid var(--mt-dark);
	outline-offset: 3px;
	border-radius: 8px;
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.mt-navbar {
	position: relative;
	z-index: 90;
	display: flex;
	justify-content: center;
	padding: 12px clamp(12px, 3vw, 40px);
	transition: padding 0.35s var(--mt-ease);
}

.mt-sticky-nav .mt-navbar {
	position: sticky;
	top: 0;
}

.mt-navbar.is-stuck {
	padding-top: 8px;
	padding-bottom: 8px;
}

.mt-nav {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 16px;
	width: min(1180px, 100%);
	padding: 9px 9px 9px 20px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 999px;
	background: var(--mt-dark);
	box-shadow: 0 18px 40px -18px rgba(18, 55, 42, 0.45);
	transition: box-shadow 0.35s var(--mt-ease);
}

.mt-navbar.is-stuck .mt-nav {
	box-shadow: 0 20px 44px -20px rgba(18, 55, 42, 0.6);
}

/* Brand */
.mt-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	justify-self: start;
	color: #fff;
	text-decoration: none;
}

.mt-brand__logo {
	width: auto;
	max-height: 34px;
}

.mt-brand__mark {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	color: var(--mt-lime);
	transition: transform 0.5s var(--mt-ease);
}

.mt-brand:hover .mt-brand__mark {
	transform: rotate(-8deg) scale(1.08);
}

.mt-brand__mark svg {
	width: 26px;
	height: 26px;
}

.mt-brand__name {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.5px;
}

/* Desktop menu — hidden until there is room for it. */
.mt-nav__menu {
	display: none;
	grid-column: 2;
	justify-self: center;
}

.mt-nav__list {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-nav__list li {
	position: relative;
}

.mt-nav__list a {
	position: relative;
	display: block;
	padding: 6px 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 15.5px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.3s;
}

.mt-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--mt-lime);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.4s var(--mt-ease);
}

.mt-nav__list a:hover {
	color: #fff;
}

.mt-nav__list a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.mt-nav__list .current-menu-item > a,
.mt-nav__list .current_page_item > a,
.mt-nav__list .current-menu-ancestor > a {
	color: var(--mt-lime);
}

.mt-nav__list .current-menu-item > a::after,
.mt-nav__list .current_page_item > a::after {
	transform: scaleX(1);
}

/* One-level dropdown */
.mt-nav__list .sub-menu {
	position: absolute;
	left: 50%;
	top: 100%;
	z-index: 5;
	min-width: 210px;
	margin: 0;
	padding: 10px;
	list-style: none;
	border-radius: 18px;
	background: var(--mt-dark);
	box-shadow: 0 24px 44px -22px rgba(0, 0, 0, 0.8);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity 0.3s, transform 0.35s var(--mt-ease), visibility 0.3s;
}

.mt-nav__list li:hover > .sub-menu,
.mt-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 10px);
}

.mt-nav__list .sub-menu a {
	padding: 9px 12px;
	border-radius: 12px;
	font-size: 14.5px;
	white-space: nowrap;
}

.mt-nav__list .sub-menu a::after {
	display: none;
}

.mt-nav__list .sub-menu a:hover {
	background: rgba(255, 255, 255, 0.08);
}

/* CTA */
.mt-nav__cta {
	display: none;
	position: relative;
	grid-column: 3;
	justify-self: end;
	padding: 11px 24px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--mt-lime);
	color: #12290b;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.35s var(--mt-ease), box-shadow 0.35s var(--mt-ease);
}

.mt-nav__cta::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 -60%;
	width: 45%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-18deg);
	transition: left 0.65s var(--mt-ease);
}

.mt-nav__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -12px rgba(149, 191, 71, 0.95);
}

.mt-nav__cta:hover::before {
	left: 130%;
}

/* Burger */
.mt-burger {
	justify-self: end;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	cursor: pointer;
}

.mt-burger span {
	display: block;
	width: 18px;
	height: 2px;
	margin: 4px auto;
	border-radius: 2px;
	background: #fff;
	transition: transform 0.4s var(--mt-ease), opacity 0.25s;
}

.mt-burger.is-open span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.mt-burger.is-open span:nth-child(2) {
	opacity: 0;
}

.mt-burger.is-open span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   4. Drawer
   ========================================================================== */

.mt-drawer {
	position: fixed;
	inset: 74px 12px auto;
	z-index: 88;
	max-height: calc(100vh - 96px);
	padding: 12px;
	overflow-y: auto;
	border-radius: 24px;
	background: var(--mt-dark);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
	opacity: 0;
	transform: translateY(-14px);
	transition: opacity 0.3s, transform 0.4s var(--mt-ease);
}

.mt-drawer.is-open {
	opacity: 1;
	transform: none;
}

.mt-drawer__list,
.mt-drawer__list .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-drawer__list a {
	display: block;
	padding: 13px 16px;
	border-radius: 14px;
	color: #fff;
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
}

.mt-drawer__list a:hover {
	background: rgba(255, 255, 255, 0.08);
}

.mt-drawer__list .sub-menu a {
	padding-left: 30px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.75);
}

.mt-drawer__cta {
	display: block;
	margin-top: 6px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--mt-lime);
	color: #12290b;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

/* ==========================================================================
   5. Footer
   ========================================================================== */

.mt-footer {
	position: relative;
	margin-top: clamp(48px, 6vw, 90px);
	border-radius: 32px 32px 0 0;
	background: var(--mt-dark);
	color: #fff;
	overflow: hidden;
}

.mt-footer::before {
	content: "";
	position: absolute;
	right: -20%;
	top: 12%;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: var(--mt-glow);
	opacity: 0.1;
	pointer-events: none;
}

.mt-footer__inner {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding: clamp(40px, 6vw, 80px) var(--mt-gutter) 0;
}

.mt-footer__grid {
	display: grid;
	gap: 32px;
}

.mt-footer__logo {
	color: #fff;
}

.mt-footer__logo .mt-brand__name {
	font-size: 26px;
}

.mt-footer__about {
	margin: 18px 0 0;
	max-width: 34ch;
	font-family: var(--mt-font-body);
	font-size: 15px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.72);
}

.mt-fcol__title {
	margin: 0 0 18px;
	font-size: 16.5px;
	font-weight: 700;
}

.mt-fcol__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-fcol__list li {
	margin-bottom: 13px;
}

.mt-fcol__list a {
	font-family: var(--mt-font-body);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
	transition: color 0.3s, padding-left 0.35s var(--mt-ease);
}

.mt-fcol__list a:hover {
	color: #fff;
	padding-left: 5px;
}

.mt-fcol__list .current-menu-item > a {
	color: var(--mt-lime);
}

.mt-footer__cta a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
}

.mt-footer__cta-line {
	display: block;
	font-size: clamp(26px, 6vw, 44px);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -1.2px;
}

.mt-footer__cta-row {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 10px;
}

.mt-footer__ring {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	flex: none;
	border: 1px solid var(--mt-lime);
	border-radius: 50%;
	color: var(--mt-lime);
	transition: background 0.4s, color 0.4s, transform 0.5s var(--mt-ease);
}

.mt-footer__ring svg {
	width: 22px;
	height: 22px;
}

.mt-footer__cta a:hover .mt-footer__ring {
	background: var(--mt-lime);
	color: var(--mt-dark);
	transform: rotate(45deg) scale(1.06);
}

.mt-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: clamp(36px, 5vw, 60px);
	padding: 22px 0 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mt-footer__copy {
	margin: 0;
	font-family: var(--mt-font-body);
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.75);
}

.mt-socials {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mt-socials a {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	color: var(--mt-lime);
	transition: background 0.3s, transform 0.4s var(--mt-ease);
}

.mt-socials svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.mt-socials a:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateY(-3px);
}

/* ==========================================================================
   6. Inner-page harmonisation
   ========================================================================== */

.mt-shell .site-main {
	position: relative;
}

.mt-shell:not(.home) .site-main {
	/* Inner templates set their own width with .mt-wrap. */
	padding-bottom: clamp(32px, 5vw, 72px);
}

/*
 * These used to be blanket colour rules for inner pages, written while the old
 * Webflow templates were still in place. Now that every template is ours they
 * only cause trouble: a two-class selector like this outranks a component's
 * own class, so a dark section's white heading silently rendered dark. The
 * base reset already sets heading and body colour; components own the rest.
 */
.mt-shell:not(.home) .site-main a:not(.mt-btn):not([class*="mt-"]) {
	text-underline-offset: 3px;
}

.mt-shell .entry-content img,
.mt-shell .wp-post-image {
	border-radius: 18px;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
	.mt-shell *,
	.mt-shell *::before,
	.mt-shell *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 700px) {
	.mt-footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}

	.mt-footer__brand {
		grid-column: 1;
	}

	.mt-footer__cta {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1100px) {
	.mt-nav {
		grid-template-columns: 1fr auto 1fr;
		padding-left: 24px;
	}

	.mt-nav__menu,
	.mt-nav__cta {
		display: block;
	}

	.mt-burger,
	.mt-drawer {
		display: none;
	}

	.mt-footer__grid {
		grid-template-columns: 1.35fr 0.7fr 0.9fr 0.8fr 1.3fr;
		gap: 32px;
	}

	.mt-footer__cta {
		grid-column: 5;
		text-align: right;
	}

	.mt-footer__cta-row {
		justify-content: flex-end;
	}

	.mt-footer__ring {
		width: 64px;
		height: 64px;
	}
}

/* ==========================================================================
   7. Colour hardening (header, footer, buttons)
   --------------------------------------------------------------------------
   Inheritance loses to any direct element rule, so the chrome declares its own
   colours explicitly rather than relying on a parent. Keeps plugin stylesheets
   from repainting the header and footer.
   ========================================================================== */

.mt-navbar,
.mt-navbar a,
.mt-brand,
.mt-brand__name,
.mt-drawer a,
.mt-footer,
.mt-footer a,
.mt-footer h2,
.mt-footer h3,
.mt-footer p {
	-webkit-text-fill-color: currentColor;
}

.mt-nav__list > li > a {
	color: rgba(255, 255, 255, 0.9);
}

.mt-nav__list > li > a:hover,
.mt-nav__list .sub-menu a {
	color: #fff;
}

.mt-nav__cta,
.mt-drawer__cta {
	color: #12290b;
	-webkit-text-fill-color: #12290b;
}

.mt-footer .mt-fcol__title,
.mt-footer .mt-footer__cta-line,
.mt-footer .mt-brand__name {
	color: #fff;
}

.mt-footer .mt-footer__about,
.mt-footer .mt-footer__copy {
	color: rgba(255, 255, 255, 0.72);
}

.mt-footer .mt-fcol__list a {
	color: rgba(255, 255, 255, 0.78);
}

.mt-footer .mt-fcol__list a:hover {
	color: #fff;
}

/* ==========================================================================
   8. Footer refinements
   ========================================================================== */

.mt-footer {
	isolation: isolate;
}

/* Softer, larger ambient glow that matches the design's corner circle. */
.mt-footer::before {
	right: -14%;
	top: 6%;
	width: min(620px, 70vw);
	height: min(620px, 70vw);
	background: radial-gradient(circle at 50% 50%, var(--mt-glow) 0%, rgba(214, 255, 87, 0) 68%);
	opacity: 0.16;
	filter: blur(2px);
}

.mt-footer__grid {
	align-items: start;
	row-gap: 40px;
}

.mt-footer__brand .mt-brand {
	gap: 12px;
}

.mt-footer__brand .mt-brand__mark svg {
	width: 30px;
	height: 30px;
}

.mt-fcol__title {
	font-size: 17px;
	letter-spacing: -0.2px;
}

.mt-fcol__list li {
	margin-bottom: 12px;
}

/* Links slide with a transform (no reflow) and fade in a lime marker. */
.mt-fcol__list a {
	position: relative;
	display: inline-block;
	padding-left: 0;
	transition: color 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-fcol__list a::before {
	content: "";
	position: absolute;
	left: -14px;
	top: 50%;
	width: 6px;
	height: 1.5px;
	border-radius: 2px;
	background: var(--mt-lime);
	opacity: 0;
	transform: translateY(-50%) scaleX(0.2);
	transform-origin: right;
	transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-fcol__list a:hover {
	padding-left: 0;
	transform: translateX(10px);
}

.mt-fcol__list a:hover::before {
	opacity: 1;
	transform: translateY(-50%) scaleX(1);
}

/* Footer call to action */
.mt-footer__cta a {
	display: inline-block;
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-footer__cta a:hover {
	transform: translateY(-3px);
}

.mt-footer__cta-line {
	letter-spacing: -1.6px;
}

.mt-footer__ring {
	position: relative;
	overflow: hidden;
	transition: color 0.35s ease, border-color 0.35s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The fill grows from the centre instead of snapping on. */
.mt-footer__ring::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--mt-lime);
	transform: scale(0);
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-footer__ring svg {
	position: relative;
	z-index: 1;
	transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-footer__cta a:hover .mt-footer__ring {
	transform: none;
	color: var(--mt-dark);
	border-color: var(--mt-lime);
}

.mt-footer__cta a:hover .mt-footer__ring::before {
	transform: scale(1);
}

.mt-footer__cta a:hover .mt-footer__ring svg {
	transform: rotate(45deg);
}

/* Bottom bar */
.mt-footer__bottom {
	border-top-color: rgba(255, 255, 255, 0.12);
}

.mt-socials a {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	transition: background 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-socials svg {
	width: 17px;
	height: 17px;
}

.mt-socials a:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-4px);
}

/* ==========================================================================
   9. Header polish
   ========================================================================== */

.mt-nav {
	transition: box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.4s ease;
}

.mt-navbar.is-stuck .mt-nav {
	background: color-mix(in srgb, var(--mt-dark) 94%, #000);
	backdrop-filter: saturate(140%) blur(6px);
}

.mt-nav__list > li > a::after {
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-nav__cta,
.mt-brand__mark,
.mt-burger span {
	transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-duration: 0.45s;
}

.mt-nav__cta:active {
	transform: translateY(0) scale(0.98);
	transition-duration: 0.12s;
}

@media (prefers-reduced-motion: reduce) {
	.mt-fcol__list a:hover,
	.mt-footer__cta a:hover,
	.mt-socials a:hover {
		transform: none;
	}
}

/* ==========================================================================
   10. Base reset
   --------------------------------------------------------------------------
   The theme carries its own minimal reset — only what a content site actually
   needs. No normalize.css, no framework.
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

img,
picture,
video {
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-family: var(--mt-font);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.9px;
	color: var(--mt-ink);
}

p, ul, ol, dl, figure, table, pre, blockquote {
	margin: 0 0 1.15em;
}

a {
	color: var(--mt-dark);
}

/* ==========================================================================
   11. Content templates (blog, single, page, 404, comments)
   ========================================================================== */

.mt-wrap {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: var(--mt-gutter);
}

/*
 * Reading column for articles, legal pages and product descriptions.
 *
 * Note what this number actually controls. `.mt-wrap` is border-box and
 * carries `padding-inline: var(--mt-gutter)`, which reaches 80px a side on a
 * desktop viewport — so the old 820px box left a text measure of just 660px,
 * while the cover image directly above ran the full 1280px. The column read as
 * a narrow ribbon under a wide picture, which is what made it look wrong
 * rather than merely modest.
 *
 * 900px puts the measure at ~740px. With the 18px body size set on .mt-prose
 * that is about 80 characters a line — a shade above the classic 65–75 ideal,
 * but the 1.75 line height carries it, and it sits far better against the
 * full-width media around it.
 */
.mt-wrap--narrow {
	max-width: 900px;
}

/* Page hero */
.mt-phero {
	padding: clamp(28px, 5vw, 64px) 0 clamp(20px, 3vw, 36px);
}

.mt-phero__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-family: var(--mt-font-body);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mt-muted);
}

.mt-phero__eyebrow a {
	color: var(--mt-muted);
	text-decoration: none;
	transition: color 0.3s ease;
}

.mt-phero__eyebrow a:hover {
	color: var(--mt-dark);
}

.mt-phero__title {
	margin: 0;
	font-size: clamp(30px, 5.4vw, 52px);
	line-height: 1.1;
	letter-spacing: -1.6px;
	color: var(--mt-ink);
}

.mt-phero__intro,
.mt-phero__meta {
	margin: 16px 0 0;
	max-width: 60ch;
	font-family: var(--mt-font-body);
	font-size: 16px;
	line-height: 1.62;
	color: var(--mt-muted);
}

.mt-phero__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
}

/* Post grid */
.mt-postgrid {
	display: grid;
	gap: 20px;
	margin: 0 0 clamp(32px, 5vw, 56px);
	padding: 0;
	list-style: none;
}

.mt-pcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 10px;
	border-radius: 24px;
	background: #fff;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-pcard:hover {
	transform: translateY(-6px);
	box-shadow: 0 34px 58px -40px rgba(18, 55, 42, 0.55);
	transition-duration: 0.3s;
}

.mt-pcard__media {
	position: relative;
	display: block;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 390 / 293;
}

.mt-pcard__img,
.mt-pcard__media .mt-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-pcard:hover .mt-pcard__img {
	transform: scale(1.05);
}

.mt-pcard__tag {
	position: absolute;
	left: 12px;
	top: 12px;
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--mt-lime);
	color: #14290a;
	font-family: var(--mt-font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.mt-pcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 14px 14px;
}

.mt-pcard__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--mt-font-body);
	font-size: 14px;
	color: #3c4a42;
}

/* The lime tick beside a post's date. Named .mt-bar in the card markup. */
.mt-bar {
	display: block;
	width: 3px;
	height: 16px;
	border-radius: 2px;
	background: var(--mt-lime);
}

.mt-pcard__meta .mt-dot,
.mt-phero__meta .mt-dot {
	background: var(--mt-lime);
}

.mt-pcard__title {
	margin: 14px 0 0;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -0.4px;
}

.mt-pcard__title a {
	color: var(--mt-ink);
	text-decoration: none;
}

.mt-pcard__excerpt {
	margin: 10px 0 0;
	font-family: var(--mt-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--mt-muted);
}

.mt-pcard__link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	padding: 8px 18px;
	border: 1px solid rgba(18, 55, 42, 0.2);
	border-radius: 999px;
	color: var(--mt-dark);
	font-family: var(--mt-font-body);
	font-size: 14.5px;
	text-decoration: none;
	transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-pcard__link svg {
	width: 14px;
	height: 14px;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-pcard__link:hover {
	background: var(--mt-dark);
	border-color: var(--mt-dark);
	color: #fff;
	transform: translateY(-2px);
}

.mt-pcard__link:hover svg {
	transform: translateX(4px);
}

/* Single post */
.mt-single__cover {
	margin: 0 auto clamp(24px, 4vw, 44px);
}

.mt-single__cover img {
	width: 100%;
	border-radius: 28px;
}

.mt-prose {
	font-family: var(--mt-font-body);
	/* Up from 17px. A wider column needs slightly larger type or the line
	   count per paragraph climbs and the measure starts to feel thin. */
	font-size: 18px;
	line-height: 1.75;
	color: var(--mt-ink);
}

.mt-prose > * + * {
	margin-top: 1.15em;
}

.mt-prose h2 {
	margin: 1.8em 0 0.5em;
	font-size: clamp(24px, 3vw, 32px);
}

.mt-prose h3 {
	margin: 1.6em 0 0.4em;
	font-size: clamp(20px, 2.4vw, 24px);
}

.mt-prose p,
.mt-prose li {
	color: #37443c;
}

.mt-prose a {
	color: var(--mt-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.3s ease;
}

.mt-prose a:hover {
	color: #2b6a3c;
}

.mt-prose img,
.mt-prose .wp-block-image img {
	border-radius: 20px;
}

.mt-prose blockquote {
	margin: 1.6em 0;
	padding: 22px 26px;
	border-left: 3px solid var(--mt-lime);
	border-radius: 0 18px 18px 0;
	background: var(--mt-bg-cream);
	font-size: 18px;
}

.mt-prose blockquote p:last-child {
	margin-bottom: 0;
}

.mt-prose code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--mt-bg-beige);
	font-size: 0.9em;
}

.mt-prose pre {
	padding: 20px;
	border-radius: 18px;
	background: var(--mt-dark);
	color: #eaf3e2;
	overflow-x: auto;
}

.mt-prose ul,
.mt-prose ol {
	padding-left: 1.3em;
}

.mt-prose table {
	width: 100%;
	border-collapse: collapse;
}

.mt-prose th,
.mt-prose td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--mt-hair);
	text-align: left;
}

/* Tags, post nav, pagination */
.mt-tags a {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--mt-bg-beige);
	color: var(--mt-dark);
	font-family: var(--mt-font-body);
	font-size: 13.5px;
	text-decoration: none;
	transition: background 0.3s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-tags a:hover {
	background: var(--mt-lime);
	transform: translateY(-2px);
}

.mt-postnav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
	margin: clamp(32px, 4vw, 48px) 0;
	padding-top: 24px;
	border-top: 1px solid var(--mt-hair);
	font-family: var(--mt-font-body);
	font-size: 15px;
}

.mt-postnav a {
	color: var(--mt-dark);
	text-decoration: none;
	transition: color 0.3s ease;
}

.mt-postnav a:hover {
	color: #2b6a3c;
}

.mt-pagination {
	margin-bottom: clamp(32px, 5vw, 60px);
	font-family: var(--mt-font-body);
}

.mt-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mt-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid rgba(18, 55, 42, 0.16);
	border-radius: 999px;
	color: var(--mt-dark);
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-pagination .page-numbers:hover {
	transform: translateY(-2px);
	background: var(--mt-bg-beige);
}

.mt-pagination .page-numbers.current {
	background: var(--mt-dark);
	border-color: var(--mt-dark);
	color: #fff;
}

/* Empty states, search form */
.mt-empty {
	padding: clamp(32px, 6vw, 72px) 0 clamp(40px, 7vw, 90px);
	text-align: center;
}

.mt-empty p {
	margin-inline: auto;
	max-width: 52ch;
	font-family: var(--mt-font-body);
	color: var(--mt-muted);
}

.mt-empty .mt-btn {
	margin-top: 8px;
}

.search-form {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin: 22px auto 26px;
	max-width: 460px;
}

.search-form label {
	flex: 1;
}

.search-form .search-field {
	width: 100%;
	padding: 14px 20px;
	border: 1px solid rgba(18, 55, 42, 0.18);
	border-radius: 999px;
	background: #fff;
	font-family: var(--mt-font-body);
	font-size: 15px;
}

.search-form .search-submit {
	padding: 14px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--mt-dark);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease;
}

.search-form .search-submit:hover {
	transform: translateY(-2px);
	background: var(--mt-dark-deep);
}

/* Comments */
.mt-comments {
	margin: clamp(32px, 5vw, 60px) 0 clamp(40px, 6vw, 80px);
	padding-top: 28px;
	border-top: 1px solid var(--mt-hair);
	font-family: var(--mt-font-body);
}

.mt-comments__title {
	font-family: var(--mt-font);
	font-size: 22px;
}

.mt-comments__list,
.mt-comments__list .children {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.mt-comments__list .children {
	margin-left: 22px;
	padding-left: 18px;
	border-left: 1px solid var(--mt-hair);
}

.mt-comments__list li article {
	margin-bottom: 18px;
	padding: 18px 20px;
	border-radius: 20px;
	background: #fff;
}

.mt-comments .comment-form input:not([type="submit"]),
.mt-comments .comment-form textarea {
	width: 100%;
	margin-top: 6px;
	padding: 12px 16px;
	border: 1px solid rgba(18, 55, 42, 0.18);
	border-radius: 16px;
	background: #fff;
	font-size: 15px;
}

.mt-comments .comment-form .submit {
	margin-top: 12px;
	padding: 15px 30px;
	border: 0;
	border-radius: 999px;
	background: var(--mt-dark);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease;
}

.mt-comments .comment-form .submit:hover {
	transform: translateY(-2px);
	background: var(--mt-dark-deep);
}

/* Widgets */
.mt-widget {
	margin-bottom: 26px;
	padding: 22px;
	border-radius: 22px;
	background: #fff;
	font-family: var(--mt-font-body);
}

.mt-widget__title {
	font-family: var(--mt-font);
	font-size: 18px;
}

/* Placeholder used before artwork is uploaded. */
.mt-ph {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 140px;
	background: linear-gradient(140deg, #e9ede2, #c6d1b4 55%, #9aa886);
}

@media (min-width: 600px) {
	.mt-postgrid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1000px) {
	.mt-postgrid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}
}

/* ==========================================================================
   12. Blog archive & single
   ========================================================================== */

.mt-blogh {
	padding: clamp(28px, 5vw, 64px) 0 clamp(20px, 3vw, 36px);
}

.mt-blogh__eyebrow {
	margin: 0 0 14px;
	font-family: var(--mt-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--mt-muted);
}

.mt-blogh__title {
	margin: 0;
	max-width: 22ch;
	font-size: clamp(32px, 5.2vw, 54px);
	line-height: 1.08;
	letter-spacing: -1.8px;
	color: var(--mt-ink);
}

.mt-blogh__intro {
	margin: 18px 0 0;
	max-width: 58ch;
	font-family: var(--mt-font-body);
	font-size: 16.5px;
	line-height: 1.62;
	color: var(--mt-muted);
}

.mt-blogh__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 26px;
}

.mt-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid rgba(18, 55, 42, 0.18);
	border-radius: 999px;
	font-family: var(--mt-font-body);
	font-size: 14.5px;
	color: var(--mt-dark);
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.4s var(--mt-ease);
}

.mt-chip span {
	font-size: 12px;
	opacity: 0.6;
}

.mt-chip:hover {
	transform: translateY(-2px);
	border-color: var(--mt-dark);
}

.mt-chip.is-active {
	background: var(--mt-dark);
	border-color: var(--mt-dark);
	color: #fff;
}

/* Featured post */
.mt-feat {
	display: grid;
	gap: 0;
	margin-bottom: clamp(28px, 4vw, 48px);
	border: 1px solid rgba(18, 55, 42, 0.12);
	border-radius: 28px;
	background: #fff;
	overflow: hidden;
	transition: box-shadow 0.5s var(--mt-ease);
}

.mt-feat:hover {
	box-shadow: 0 40px 70px -50px rgba(18, 55, 42, 0.55);
}

.mt-feat__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.mt-feat__img,
.mt-feat__media .mt-ph {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s var(--mt-ease);
}

.mt-feat:hover .mt-feat__img { transform: scale(1.04); }

.mt-feat__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(24px, 3vw, 44px);
}

.mt-feat__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-family: var(--mt-font-body);
	font-size: 14px;
	color: var(--mt-muted);
}

.mt-feat__tag {
	padding: 5px 13px;
	border-radius: 999px;
	background: var(--mt-lime);
	color: #14290a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.mt-feat__title {
	margin: 16px 0 0;
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.16;
	letter-spacing: -1px;
}

.mt-feat__title a {
	color: var(--mt-ink);
	text-decoration: none;
}

.mt-feat__excerpt {
	margin: 14px 0 26px;
	max-width: 56ch;
	font-family: var(--mt-font-body);
	font-size: 16px;
	line-height: 1.62;
	color: var(--mt-muted);
}

.mt-feat .mt-btn { align-self: flex-start; }

@media (min-width: 900px) {
	.mt-feat { grid-template-columns: 1.05fr 0.95fr; }
	.mt-feat__media { aspect-ratio: auto; height: 100%; min-height: 340px; }
}

/* Reading progress */
.mt-progress {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 95;
	height: 3px;
	background: transparent;
	pointer-events: none;
}

.mt-progress span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(90deg, var(--mt-lime), var(--mt-glow));
}

/* Share row */
.mt-share {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: clamp(28px, 4vw, 44px) 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--mt-hair);
}

.mt-share__label {
	margin-right: 4px;
	font-family: var(--mt-font-body);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mt-muted);
}

.mt-share__link {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(18, 55, 42, 0.16);
	border-radius: 50%;
	background: #fff;
	color: var(--mt-dark);
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease, transform 0.42s var(--mt-ease);
}

.mt-share__link:hover {
	background: var(--mt-dark);
	color: #fff;
	transform: translateY(-3px);
}

.mt-share__link svg { width: 16px; height: 16px; }

.mt-share__copy.is-copied {
	background: var(--mt-lime);
	border-color: var(--mt-lime);
	color: #14290a;
}

/* Author box */
.mt-author {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin: 26px 0 0;
	padding: 24px 26px;
	border: 1px solid var(--mt-hair);
	border-radius: 24px;
	background: #fff;
}

.mt-author__avatar {
	border-radius: 50%;
	flex: none;
}

.mt-author__name {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.3px;
	color: var(--mt-ink);
}

.mt-author__bio {
	margin: 8px 0 0;
	font-family: var(--mt-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--mt-muted);
}

.mt-single__related { margin-top: clamp(36px, 5vw, 64px); }

.mt-single__more {
	margin: 0 0 24px;
	font-size: clamp(22px, 2.6vw, 28px);
	letter-spacing: -0.8px;
	color: var(--mt-ink);
}

@media (prefers-reduced-motion: reduce) {
	.mt-chip:hover,
	.mt-share__link:hover,
	.mt-feat:hover .mt-feat__img { transform: none; }
}

/* ==========================================================================
   12b. Buttons — site-wide primitive
   --------------------------------------------------------------------------
   These lived in home.css, which only loads on the front page. Any other
   template using .mt-btn — the product page's closing call to action, a block
   dropped on a landing page — rendered a bare link. They belong here.
   home.css repeats the same declarations, so nothing changes on the homepage.
   ========================================================================== */

.mt-shell .mt-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 15px 30px;
	border-radius: 999px;
	font-family: var(--mt-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.125;
	letter-spacing: -0.2px;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	cursor: pointer;
	transition: transform 0.42s var(--mt-ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease, outline-offset 0.42s var(--mt-ease);
}

.mt-shell .mt-btn--solid {
	background: var(--mt-dark);
	color: #fff;
	border: 0;
	outline: 1px solid var(--mt-dark);
	outline-offset: 4.5px;
}

.mt-shell .mt-btn--solid:hover {
	background: var(--mt-dark-deep);
	transform: translateY(-3px);
	outline-offset: 6.5px;
}

.mt-shell .mt-btn--ghost {
	border: 1.6px solid rgba(18, 55, 42, 0.5);
	color: var(--mt-dark);
	background: transparent;
	padding: 19.5px 34px;
}

.mt-shell .mt-btn--ghost:hover {
	background: var(--mt-dark);
	border-color: var(--mt-dark);
	color: #fff;
	transform: translateY(-3px);
}

.mt-shell .mt-btn--lime {
	background: var(--mt-lime);
	color: var(--mt-lime-ink);
	border: 0;
	outline: 1px solid var(--mt-lime);
	outline-offset: 4.5px;
}

.mt-shell .mt-btn--lime:hover {
	background: var(--mt-lime-bright);
	transform: translateY(-3px);
	outline-offset: 6.5px;
}

.mt-shell .mt-btn--outline-lime {
	border: 1.4px solid var(--mt-lime);
	color: var(--mt-lime);
	background: transparent;
	padding: 19.5px 34px;
}

.mt-shell .mt-btn--outline-lime:hover {
	background: var(--mt-lime);
	color: var(--mt-lime-ink);
	transform: translateY(-3px);
}

.mt-shell .mt-btn:active {
	transform: translateY(-1px) scale(0.985);
	transition-duration: 0.12s;
}

/* ==========================================================================
   13. Action rows — two buttons stay on one line
   --------------------------------------------------------------------------
   Measured across every template at 360, 390, 768 and 1024px: seven button
   pairs were wrapping onto two lines. Rather than patch each one, every action
   row now shares the same behaviour — never wrap, shrink instead, and split the
   width evenly once the screen is narrow. Labels wrap inside the button, which
   keeps the pair balanced without having to shorten copy.
   ========================================================================== */

.mt-shell .mt-hero__actions,
.mt-shell .mt-showcase__actions,
.mt-shell .mt-thm__actions,
.mt-shell .mt-thm__head-cta,
.mt-shell .mt-sup__actions,
.mt-shell .mt-ph__actions,
.mt-shell .mt-cta__actions,
.mt-shell .mt-prod__links,
.mt-shell .mt-svc__cta {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}

.mt-shell .mt-hero__actions > .mt-btn,
.mt-shell .mt-showcase__actions > .mt-btn,
.mt-shell .mt-thm__actions > .mt-btn,
.mt-shell .mt-thm__head-cta > .mt-btn,
.mt-shell .mt-sup__actions > .mt-btn,
.mt-shell .mt-ph__actions > .mt-btn,
.mt-shell .mt-cta__actions > .mt-btn,
.mt-shell .mt-prod__links > .mt-btn {
	flex: 0 1 auto;
	min-width: 0;
	text-align: center;
	overflow-wrap: anywhere;
}

/* The docs link sits beside the demo button rather than under it. */
.mt-shell .mt-prod__links > .mt-prod__doclink {
	flex: 0 0 auto;
	align-self: center;
	white-space: nowrap;
}

@media (max-width: 780px) {
	.mt-shell .mt-hero__actions,
	.mt-shell .mt-showcase__actions,
	.mt-shell .mt-thm__actions,
	.mt-shell .mt-thm__head-cta,
	.mt-shell .mt-sup__actions,
	.mt-shell .mt-ph__actions,
	.mt-shell .mt-cta__actions,
	.mt-shell .mt-prod__links {
		gap: 12px;
	}

	.mt-shell .mt-hero__actions > .mt-btn,
	.mt-shell .mt-showcase__actions > .mt-btn,
	.mt-shell .mt-thm__actions > .mt-btn,
	.mt-shell .mt-thm__head-cta > .mt-btn,
	.mt-shell .mt-sup__actions > .mt-btn,
	.mt-shell .mt-ph__actions > .mt-btn,
	.mt-shell .mt-cta__actions > .mt-btn,
	.mt-shell .mt-prod__links > .mt-btn {
		/* Equal halves, so neither button looks like the afterthought. */
		flex: 1 1 0;
		padding: 14px 12px;
		font-size: 14.5px;
		line-height: 1.25;
	}

	/* The offset ring needs less room when the buttons sit this close. */
	.mt-btn--solid,
	.mt-btn--lime {
		outline-offset: 3px;
	}

	.mt-btn--solid:hover,
	.mt-btn--lime:hover {
		outline-offset: 4px;
	}

	.mt-btn--ghost,
	.mt-btn--outline-lime {
		padding: 15px 12px;
	}

	.mt-shell .mt-prod__links > .mt-prod__doclink {
		font-size: 13.5px;
	}
}

/* ==========================================================================
   14. Touch behaviour
   --------------------------------------------------------------------------
   Hover states never fire on a touchscreen, so anything that *only* appeared
   on hover was invisible to phone users — link underlines, arrows, the card
   cues. On touch devices those affordances are shown by default and the cards
   answer a tap with a short press state instead.
   ========================================================================== */

@media (hover: none) {
	/* Press feedback in place of hover lift. */
	.mt-fcard:active,
	.mt-scard:active,
	.mt-tcard:active,
	.mt-bcard:active,
	.mt-tf:active,
	.mt-pcard:active,
	.mt-sup__link:active,
	.mt-cnt__method:active,
	.mt-steps__item:active,
	.mt-tier:active,
	.mt-prod__high:active {
		transform: translate3d(0, -3px, 0);
		transition-duration: 0.16s;
	}

	/* Cues that were hover-only are permanent affordances on touch. */
	.mt-svc__link i { width: 30px; }

	.mt-thm__link-label::after,
	.mt-svc__card .mt-svc__link-label::after,
	.mt-sup__cue::after {
		transform: scaleX(1);
		transform-origin: left;
		opacity: 0.35;
	}

	.mt-scard__arrow,
	.mt-svc__arrow {
		background: rgba(255, 255, 255, 0.08);
	}

	/* The pointer glow can never be positioned on touch — hide it entirely. */
	.mt-svc__spot,
	.mt-sup__spot {
		display: none;
	}

	/* Nothing should get stuck in a hover state after a tap. */
	.mt-btn:hover,
	.mt-chip:hover,
	.mt-share__link:hover {
		transform: none;
	}
}

/* Comfortable tap targets and no grey flash on tap. */
a,
button,
[role="button"],
input[type="submit"] {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

@media (max-width: 780px) {
	.mt-chip {
		min-height: 42px;
		padding-block: 10px;
	}

	.mt-share__link {
		width: 42px;
		height: 42px;
	}

	.mt-socials a {
		width: 40px;
		height: 40px;
	}

	.mt-acc__q,
	.mt-thm__row-btn {
		min-height: 56px;
	}
}

/* ==========================================================================
   15. Cross-browser guards
   ========================================================================== */

.mt-navbar.is-stuck .mt-nav {
	-webkit-backdrop-filter: saturate(140%) blur(6px);
}

/* Safari needs the prefixed sticky in older versions. */
.mt-svc__rail-in,
.mt-prod__aside,
.mt-svc__item {
	position: -webkit-sticky;
	position: sticky;
}

/* iOS momentum scrolling inside the horizontal strips. */
.mt-prod__thumbs,
.mt-blogh__filters {
	-webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   16. Final QA pass
   --------------------------------------------------------------------------
   Fixes found while testing the templates at 360, 390, 768, 1024 and 1440px.
   ========================================================================== */

/* 1. Anchor links landed under the sticky header. */
:target,
[id^="mt-"],
.mt-section,
.mt-prod__hero {
	scroll-margin-top: calc(var(--mt-nav-h, 78px) + 20px);
}

/* 2. iOS zooms the page when a focused input is under 16px. */
@media (max-width: 780px) {
	.mt-cnt__field input,
	.mt-cnt__field select,
	.mt-cnt__field textarea,
	.mt-news__input,
	.search-form .search-field {
		font-size: 16px;
	}
}

/* 3. Focus rings were dark-on-dark inside the dark sections. */
.mt-services :focus-visible,
.mt-sup__box :focus-visible,
.mt-cta__box :focus-visible,
.mt-ph__box :focus-visible,
.mt-footer :focus-visible,
.mt-nav :focus-visible,
.mt-drawer :focus-visible {
	outline-color: var(--mt-glow);
}

/* 4. Long URLs pasted into posts pushed the article wider than the column. */
.mt-prose,
.mt-prose p,
.mt-prose li,
.mt-tcard__quote {
	overflow-wrap: break-word;
}

.mt-prose pre {
	max-width: 100%;
}

/* 5. Tables in posts scroll rather than stretching the page. */
.mt-prose table {
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

/* 6. Embeds keep their ratio instead of overflowing. */
.mt-prose iframe,
.mt-prose video {
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: 18px;
}

/* 7. Category chips scroll sideways on a phone instead of stacking four deep. */
@media (max-width: 640px) {
	.mt-blogh__filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 6px;
		scrollbar-width: none;
	}

	.mt-blogh__filters::-webkit-scrollbar {
		display: none;
	}

	.mt-chip {
		flex: 0 0 auto;
	}
}

/* 8. The mobile buy bar must not sit on top of the footer's last row. */
@media (max-width: 999px) {
	body.single-download .mt-footer__bottom,
	body.single-product .mt-footer__bottom {
		padding-bottom: 84px;
	}
}

/* 9. Drawer scrolls if a long menu outgrows the screen. */
.mt-drawer {
	max-height: calc(100dvh - 100px);
	overscroll-behavior: contain;
}

/* 10. Stop a stray element from ever creating sideways scroll. */
html,
body.mt-shell {
	max-width: 100%;
}

/* 11. Print: drop the chrome, keep the words. */
@media print {
	.mt-navbar,
	.mt-drawer,
	.mt-footer,
	.mt-prod__bar,
	.mt-share,
	.mt-progress {
		display: none !important;
	}

	.mt-prose {
		font-size: 12pt;
	}
}

/* 12. Tap targets: the brand mark and footer links were under 40px tall. */
.mt-brand {
	min-height: 44px;
}

.mt-fcol__list a {
	display: inline-block;
	padding-block: 7px;
}

.mt-fcol__list li {
	margin-bottom: 6px;
}

.mt-phero__eyebrow a,
.mt-prod__crumbs a {
	display: inline-block;
	padding-block: 6px;
}

/* ==========================================================================
   17. Bottom promo bar
   --------------------------------------------------------------------------
   Pinned to the bottom, dismissible, and hidden until the script confirms it
   has not already been closed — so it can never flash on screen and then
   disappear. It is `hidden` in the markup, which also means a visitor with no
   JavaScript is never shown a bar they cannot close.
   ========================================================================== */

.mt-promo {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 92;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 12px 12px 20px;
	border-radius: 18px;
	box-shadow: 0 26px 50px -26px rgba(18, 55, 42, 0.7);
	opacity: 0;
	transform: translateY(120%);
	transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-promo.is-in {
	opacity: 1;
	transform: none;
}

.mt-promo--dark {
	background: var(--mt-dark);
	color: #fff;
}

.mt-promo--lime {
	background: var(--mt-lime);
	color: #14290a;
}

.mt-promo--mint {
	background: #dff0e3;
	color: var(--mt-dark);
	border: 1px solid rgba(18, 55, 42, 0.12);
}

.mt-promo__text {
	flex: 1;
	margin: 0;
	font-family: var(--mt-font-body);
	font-size: 15px;
	line-height: 1.45;
}

.mt-promo__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 8px;
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.mt-promo--dark .mt-promo__link {
	color: var(--mt-glow);
}

.mt-promo__link svg {
	width: 14px;
	height: 14px;
	transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-promo__link:hover svg {
	transform: translateX(4px);
}

.mt-promo__close {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: inherit;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mt-promo--lime .mt-promo__close,
.mt-promo--mint .mt-promo__close {
	background: rgba(18, 55, 42, 0.12);
}

.mt-promo__close:hover {
	transform: rotate(90deg);
	background: rgba(255, 255, 255, 0.24);
}

.mt-promo__close svg {
	width: 15px;
	height: 15px;
}

/* When the bar is up, the product buy bar sits above it rather than under. */
body.mt-promo-open .mt-prod__bar {
	bottom: 84px;
}

@media (max-width: 640px) {
	.mt-promo {
		left: 8px;
		right: 8px;
		bottom: 8px;
		padding: 12px 10px 12px 16px;
		border-radius: 16px;
	}

	.mt-promo__text {
		font-size: 14px;
	}

	.mt-promo__link {
		display: block;
		margin: 6px 0 0;
	}

	body.mt-promo-open .mt-prod__bar {
		bottom: 108px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mt-promo {
		transition: none;
	}
}