/* theme/assets/css/style.css — base styles on top of tokens. Keep tight; component
   styles belong with their block patterns / template parts. */

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

/* Smooth anchor scrolling; anchors land below the fixed header. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
.md-section, .md-preview { scroll-margin-top: 72px; }

/* Scroll reveal: hidden state only applies once site-fx.js has added
   .md-fx to <html>, so content stays visible without JS. The section itself
   does a soft fade; its card/grid children rise in a small stagger on top,
   which reads as the section "assembling" rather than a single block fade. */
html.md-fx .md-section,
html.md-fx .md-preview {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
html.md-fx .md-section.is-inview,
html.md-fx .md-preview.is-inview {
	opacity: 1;
	transform: none;
}

/* Staggered children inside a revealed section. */
html.md-fx .md-grid > *,
html.md-fx .md-themes-grid > *,
html.md-fx .md-modules-layout > *,
html.md-fx .md-pricing > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
html.md-fx .is-inview .md-grid > *,
html.md-fx .is-inview .md-themes-grid > *,
html.md-fx .is-inview .md-modules-layout > *,
html.md-fx .is-inview .md-pricing > * {
	opacity: 1;
	transform: none;
}
html.md-fx .is-inview .md-grid > *:nth-child(2),
html.md-fx .is-inview .md-themes-grid > *:nth-child(2),
html.md-fx .is-inview .md-pricing > *:nth-child(2) { transition-delay: 0.06s; }
html.md-fx .is-inview .md-grid > *:nth-child(3),
html.md-fx .is-inview .md-themes-grid > *:nth-child(3),
html.md-fx .is-inview .md-pricing > *:nth-child(3) { transition-delay: 0.12s; }
html.md-fx .is-inview .md-grid > *:nth-child(4),
html.md-fx .is-inview .md-themes-grid > *:nth-child(4) { transition-delay: 0.18s; }
html.md-fx .is-inview .md-themes-grid > *:nth-child(5) { transition-delay: 0.24s; }
html.md-fx .is-inview .md-themes-grid > *:nth-child(6) { transition-delay: 0.30s; }

html, body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--body);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* A faint instrument grid behind everything, echoing the app's canvas. It only
   shows through the near-black (default) sections; the lighter --surf panels of
   the --alt sections sit opaque on top, giving the page a textured / clean
   rhythm as you scroll. Fixed so it reads as one continuous canvas. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(var(--border) 1px, transparent 1px),
		linear-gradient(90deg, var(--border) 1px, transparent 1px);
	background-size: 52px 52px;
	opacity: 0.28;
}
.wp-site-blocks { position: relative; z-index: 1; }

a {
	color: var(--accent2);
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}
a:hover { color: var(--accent); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mono);
	font-weight: 400;
	color: var(--text);
	margin: 0 0 0.5em;
}

h3, h4, h5, h6 {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

p { margin: 0 0 1em; }

::selection { background: var(--accent); color: var(--accent-text); }

/* ---------- Wordmark ---------- */
.md-wordmark {
	font-family: var(--body);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0;
	line-height: 1;
}
.md-wordmark .md-wordmark__meter { color: var(--text); }
.md-wordmark .md-wordmark__desk  { color: var(--accent2); }

/* ---------- Logo lockup ---------- */
.md-logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: inherit;
}
.md-logo:hover { color: inherit; }
.md-logo__icon {
	width: 28px;
	height: 28px;
	display: block;
}

/* ---------- Site shell ---------- */
/* Header is fixed at the top — sticky is unreliable across block-theme wrappers
   (a parent overflow somewhere breaks it). Fixed + body spacer = predictable. */
.md-site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 24px;
	border-bottom: 1px solid var(--border);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	z-index: 100;
}

/* Reserve space for the fixed header so page content starts below it. */
.wp-site-blocks { padding-top: 58px; }

.md-site-nav {
	display: flex;
	align-items: center;
	gap: 6px;
}

.md-nav-link {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text2);
	padding: 8px 14px;
	border-radius: var(--r-control);
	border: 1px solid transparent;
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.md-nav-link:hover {
	color: var(--text);
	border-color: var(--border);
	background: var(--surf2);
}
/* Scroll-spy: section currently in view (set by site-fx.js). */
.md-nav-link.is-current {
	color: var(--text);
	border-color: var(--border);
	background: var(--surf2);
}
.md-nav-link--cta {
	color: var(--text);
	border-color: var(--border2);
	background: var(--surf2);
}
.md-nav-link--cta:hover {
	color: var(--accent-text);
	background: var(--accent);
	border-color: var(--accent);
}

/* ---------- Cart link (header) ---------- */
.md-nav-link--cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	color: var(--text2);
}
.md-nav-link--cart svg { display: block; }
.md-nav-link--cart:hover {
	color: var(--text);
	border-color: var(--border);
	background: var(--surf2);
}
.md-nav-cart__count {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--accent-text);
	background: var(--accent);
	border-radius: 999px;
	min-width: 16px;
	height: 16px;
	padding: 0 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
/* Hide the badge when the cart is empty (no count rendered or "0"). */
.md-nav-cart__count:empty,
.md-nav-cart__count[data-count="0"] { display: none; }

.md-site-footer {
	border-top: 1px solid var(--border);
	color: var(--text2);
	font-size: 13px;
	margin-top: 80px;
}
.md-footer__inner {
	display: grid;
	grid-template-columns: 1.2fr 2fr;
	gap: 48px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 24px 32px;
}
.md-footer__brand .md-logo { margin-bottom: 12px; }
.md-footer__tagline {
	color: var(--text3);
	font-size: 12px;
	font-family: var(--mono);
	margin: 0;
	max-width: 32ch;
}
.md-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.md-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.md-footer__social svg { flex: 0 0 auto; }
.md-footer__col { display: flex; flex-direction: column; gap: 8px; }
.md-footer__head {
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--text3);
	margin-bottom: 8px;
}
.md-footer__col a {
	color: var(--text2);
	font-size: 13px;
	line-height: 1.4;
}
.md-footer__col a:hover { color: var(--text); }
/* Business / legal info line (registered address, phone, email, KvK, VAT, currency). */
.md-footer__legal {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px 20px;
	border-top: 1px solid var(--border);
	padding-top: 20px;
	font-size: 11px;
	line-height: 1.7;
	color: var(--text3);
}
.md-footer__legal a { color: var(--text2); }
.md-footer__legal a:hover { color: var(--text); }
.md-footer__rule {
	border-top: 1px solid var(--border);
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 24px;
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--text3);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.md-footer__live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
@media (max-width: 720px) {
	.md-footer__inner { grid-template-columns: 1fr; gap: 32px; }
	.md-footer__cols  { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ---------- Hero ----------
   Asymmetric: copy left, a live mini meter-module right. A faint canvas grid
   sits behind the whole hero, like the app's own canvas. */
.md-hero {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(56px, 9vw, 130px) 24px clamp(32px, 6vw, 64px);
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
	gap: clamp(32px, 6vw, 80px);
	align-items: center;
	text-align: left;
}
/* A soft accent glow anchored behind the hero meter, on top of the global
   canvas grid. Centred and faded so it never reaches the hero edges (no hard
   cut on the right). */
.md-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 46% 58% at 63% 46%,
		color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 68%);
}
.md-hero__copy { position: relative; }
.md-hero__eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--accent2);
	margin-bottom: 24px;
}
.md-hero__tagline {
	font-family: var(--mono);
	font-size: clamp(28px, 4.5vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	max-width: 16ch;
	margin: 0 0 24px;
	color: var(--text);
}
.md-hero__sub {
	margin: 0 0 32px;
	max-width: 46ch;
	color: var(--text2);
	font-size: 16px;
	line-height: 1.55;
}
.md-hero__cta {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: flex-start;
}

@media (max-width: 880px) {
	.md-hero {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.md-hero__meter { justify-content: flex-start; }
}

/* ---------- Hero meter module ----------
   Styled like a real MeterDesk module frame: surf2 body, border2 frame,
   radius 10, header strip, dB scale, signal-zone bars with peak-hold ticks.
   Bars are injected and driven by site-fx.js. */
.md-hero__meter {
	position: relative;
	display: flex;
	justify-content: center;
}
.md-meter-module {
	width: min(100%, 330px);
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	box-shadow: var(--shadow-frame);
	overflow: hidden;
}
.md-meter-module__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 9px 12px;
	border-bottom: 1px solid var(--border);
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text2);
}
.md-meter-module__footer {
	display: flex;
	justify-content: space-between;
	padding: 7px 12px 9px;
	border-top: 1px solid var(--border);
	font-family: var(--mono);
	font-size: 8px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--text3);
}

/* ---------- Combo meter (hero) ----------
   Faithful to the desktop Combo module: outer LUFS bars (blue), inner L/R
   sample-peak bars (green/orange/red), unlit zone tints behind the fills,
   white peak-hold lines, dashed loudness-target line at -18.
   Colour values are copied from the app's meter-draw.js, not approximated.
   Scale: 0 at the top, -70 at the floor; the green/yellow boundary sits at
   -18 (74.3% up) and yellow/red at -3 (95.7% up). */
.md-combo {
	position: relative;
	display: grid;
	grid-template-columns: 24px 1fr 1fr 28px 1fr 1fr 24px;
	gap: 5px;
	padding: 12px 10px 4px;
	height: 360px;
}
.md-combo__target {
	position: absolute;
	left: 10px;
	right: 10px;
	top: calc(12px + (100% - 16px) * 0.257);
	border-top: 2px dashed rgba(110, 170, 255, 0.85);
	z-index: 3;
	pointer-events: none;
}
.md-combo__scale {
	position: relative;
	font-family: var(--mono);
	font-size: 7px;
	letter-spacing: 0.02em;
	pointer-events: none;
}
.md-combo__scale span {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	transform: translateY(-50%);
	color: rgba(200, 220, 240, 0.38);
}
.md-combo__scale--lufs span { color: rgba(80, 130, 220, 0.7); }
.md-combo__scale span.hot   { color: #cc4444; }
.md-combo__scale span.warm  { color: #c07820; }
.md-combo__scale span.key   { color: rgba(255, 255, 255, 0.65); }

.md-cbar {
	position: relative;
	background: #060809;
	border-radius: 2px;
	overflow: hidden;
}
/* Unlit zone tints, always visible behind the fill. */
.md-cbar--peak::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(26, 170, 128, 0.08) 0%,  rgba(26, 170, 128, 0.08) 74.3%,
		rgba(212, 130, 10, 0.13) 74.3%, rgba(212, 130, 10, 0.13) 95.7%,
		rgba(204, 40, 40, 0.17) 95.7%, rgba(204, 40, 40, 0.17) 100%
	);
}
.md-cbar--lufs::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(26, 100, 220, 0.09) 0%,  rgba(26, 100, 220, 0.09) 74.3%,
		rgba(204, 40, 40, 0.15) 74.3%, rgba(204, 40, 40, 0.15) 100%
	);
}
.md-cbar__fill {
	position: absolute;
	inset: 0;
	clip-path: inset(74% 0 0 0);
	z-index: 1;
}
.md-cbar--peak .md-cbar__fill {
	background: linear-gradient(
		to top,
		#0a4035 0%, #1aaa80 72.3%,
		#d4820a 74.3%, #d4820a 93.7%,
		#cc2828 95.7%, #cc2828 100%
	);
}
.md-cbar--lufs .md-cbar__fill {
	background: linear-gradient(
		to top,
		#0a3888 0%, #1a5acc 72.3%,
		#2d7aee 74.3%, #2d7aee 93.7%,
		#cc2828 95.7%, #cc2828 100%
	);
}
.md-cbar__peak {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	background: rgba(255, 255, 255, 0.8);
	bottom: 70%;
	z-index: 2;
}
.md-combo__labels {
	display: grid;
	grid-template-columns: 24px 1fr 1fr 28px 1fr 1fr 24px;
	gap: 5px;
	padding: 0 10px 10px;
	font-family: var(--mono);
	font-size: 8px;
	letter-spacing: 0.1em;
	text-align: center;
	color: var(--text2);
}
.md-combo__labels .is-lufs  { color: rgba(100, 150, 230, 0.9); }
.md-combo__labels .is-scale { color: rgba(200, 220, 240, 0.38); }

/* ---------- Status dot (header strip, footer statusbar) ---------- */
.md-status-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
	animation: md-pulse 2.6s ease-in-out infinite;
}
@keyframes md-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
	.md-status-dot { animation: none; }
}

/* ---------- App preview (homepage) ---------- */
.md-preview {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px clamp(20px, 4vw, 40px);
	position: relative;
}
.md-preview__wrap { position: relative; }
.md-preview__img {
	display: block;
	width: 100%;
	height: auto;
}
.md-preview__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 55%;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		color-mix(in srgb, var(--bg) 40%, transparent) 35%,
		color-mix(in srgb, var(--bg) 75%, transparent) 65%,
		var(--bg) 100%
	);
}
@media (max-width: 720px) {
	.md-preview { padding-left: 12px; padding-right: 12px; }
}

/* ---------- Buttons ---------- */
.md-btn {
	display: inline-block;
	font-family: var(--mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text);
	background: var(--surf3);
	border: 1px solid var(--border);
	padding: 12px 20px;
	border-radius: var(--r-control);
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.md-btn:hover {
	color: var(--text);
	border-color: var(--accent2);
	background: var(--surf3);
}
.md-btn--primary {
	background: var(--accent);
	color: var(--accent-text);
	border-color: var(--accent);
}
.md-btn--primary:hover {
	color: var(--accent-text);
	background: color-mix(in srgb, var(--accent) 85%, white);
	border-color: var(--accent2);
}
.md-btn--disabled,
.md-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}
/* Tactile press on real buttons. */
.md-btn:not(.md-btn--disabled):active { transform: translateY(1px); }

/* ---------- Detail polish: keyboard focus ----------
   A clear focus ring for keyboard users only (:focus-visible), so mouse clicks
   stay clean. One consistent accent ring everywhere interactive. */
a:focus-visible,
button:focus-visible,
.md-btn:focus-visible,
.md-nav-link:focus-visible,
.md-module-list li:focus-visible,
.md-logo:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--accent2);
	outline-offset: 2px;
	border-radius: var(--r-control);
}

/* ---------- Sections ---------- */
.md-section {
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(60px, 10vw, 120px) 24px;
}
.md-section--alt {
	background: var(--surf);
	max-width: none;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.md-section--alt > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

.md-section__head {
	text-align: center;
	max-width: 700px;
	margin: 0 auto clamp(40px, 6vw, 64px);
}
.md-section__label {
	font-family: var(--mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--accent2);
	margin-bottom: 16px;
}
.md-section__idx {
	color: var(--text3);
	margin-right: 12px;
}
/* Tick rule under each section head, like the scale of a meter. */
.md-section__head::after {
	content: '';
	display: block;
	width: 121px;
	height: 8px;
	margin: 24px auto 0;
	background-image: repeating-linear-gradient(
		90deg,
		var(--border2) 0, var(--border2) 1px,
		transparent 1px, transparent 12px
	);
}
.md-section__title {
	font-family: var(--mono);
	font-size: clamp(24px, 3.5vw, 32px);
	line-height: 1.15;
	letter-spacing: -0.005em;
	margin: 0;
}

.md-muted {
	color: var(--text2);
	text-align: center;
	font-size: 14px;
	max-width: 52ch;
	margin: 0 auto;
}

/* ---------- Grid + cards ---------- */
.md-grid {
	display: grid;
	gap: 16px;
}
.md-grid--3 {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.md-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.md-card {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	padding: 24px;
	box-shadow: var(--shadow-frame);
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.md-card:hover {
	border-color: var(--accent2);
	transform: translateY(-2px);
	box-shadow: var(--shadow-elevated);
}
.md-card__kind {
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--accent2);
	margin-bottom: 12px;
}
.md-card__title {
	font-family: var(--mono);
	font-size: 18px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 10px;
	color: var(--text);
}
.md-card__body {
	color: var(--text2);
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

/* ---------- Module categories (homepage) ---------- */
.md-module-cat {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	padding: 24px;
	box-shadow: var(--shadow-frame);
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.md-module-cat__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--border);
}
.md-module-cat__name {
	font-family: var(--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--accent2);
}
.md-module-cat__count {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--text3);
}
.md-module-cat__count::after {
	content: ' modules';
	color: var(--text3);
}
.md-module-cat__lede {
	color: var(--text2);
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}
.md-module-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.md-module-list li {
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--text2);
	padding: 5px 9px;
	background: var(--surf3);
	border: 1px solid var(--border);
	border-radius: var(--r-control);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.md-module-list li {
	cursor: pointer;
	user-select: none;
}
.md-module-list li:hover {
	color: var(--text);
	border-color: var(--accent2);
}
.md-module-list li:focus-visible {
	outline: none;
	border-color: var(--accent);
	color: var(--text);
}
.md-module-list li.is-active {
	color: var(--accent-text);
	background: var(--accent);
	border-color: var(--accent);
}

/* ---------- Example canvases ---------- */
.md-canvas-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
}
.md-canvas {
	margin: 0;
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	overflow: hidden;
	box-shadow: var(--shadow-frame);
	display: flex;
	flex-direction: column;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.md-canvas:hover {
	border-color: var(--accent2);
	transform: translateY(-1px);
}
.md-canvas__shot {
	background: var(--bg);
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
}
.md-canvas__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.md-canvas__shot img.is-placeholder {
	width: auto;
	height: 96px;
	object-fit: contain;
	opacity: 0.5;
}
.md-canvas__cap {
	padding: 18px 20px 22px;
}
.md-canvas__name {
	font-family: var(--mono);
	font-size: 15px;
	color: var(--text);
	margin-bottom: 6px;
}
.md-canvas__desc {
	color: var(--text2);
	font-size: 13px;
	line-height: 1.5;
}

/* ---------- Themes ---------- */
.md-themes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}
.md-theme {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	padding: 22px;
	box-shadow: var(--shadow-frame);
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.md-theme[data-theme] { cursor: pointer; }
.md-theme:hover {
	border-color: var(--accent2);
	transform: translateY(-1px);
}
/* Currently applied theme: accent ring + an "Active" marker. */
.md-theme.is-active {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent), var(--shadow-frame);
}
.md-theme.is-active .md-theme__head::after {
	content: 'Active';
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-text);
	background: var(--accent);
	padding: 3px 8px;
	border-radius: var(--r-control);
	margin-left: auto;
	align-self: center;
}
.md-theme__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}
.md-theme__name {
	font-family: var(--mono);
	font-size: 15px;
	color: var(--text);
}
.md-theme__tag {
	font-family: var(--mono);
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent2);
	border: 1px solid var(--border);
	padding: 3px 8px;
	border-radius: var(--r-control);
}
.md-theme__swatches {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 0;
	border-radius: var(--r-control);
	overflow: hidden;
	border: 1px solid var(--border);
}
.md-theme__swatches span {
	display: block;
	aspect-ratio: 1;
}
.md-theme__desc {
	color: var(--text2);
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}

/* ---------- Modules: 2-column layout with persistent preview ---------- */
.md-modules-layout {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 32px;
	align-items: start;
}
@media (max-width: 860px) {
	.md-modules-layout { grid-template-columns: 1fr; }
}
.md-modules-nav {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.md-modules-preview {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	padding: 28px;
	box-shadow: var(--shadow-frame);
	position: sticky;
	top: 80px;
	min-height: 460px;
}
@media (max-width: 860px) {
	.md-modules-preview { position: static; }
}

.md-modules-preview__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
}
.md-modules-preview__hint {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--text3);
	text-align: center;
	max-width: 32ch;
}

.md-modules-preview__head {
	border-bottom: 1px solid var(--border);
	padding-bottom: 16px;
	margin-bottom: 20px;
}
.md-modules-preview__kind {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent2);
	margin-bottom: 6px;
}
.md-modules-preview__title {
	font-family: var(--mono);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.005em;
	color: var(--text);
	margin: 0;
}
.md-modules-preview__image {
	background: var(--surf3);
	border: 1px solid var(--border);
	border-radius: var(--r-frame);
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	/* Fixed height so every preview takes the same visual real estate, no matter
	   the screenshot's native aspect ratio. The img inside contains itself to
	   this box — tall modules render narrower, wide modules render shorter. */
	height: 380px;
}
.md-modules-preview__image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.md-modules-preview__description {
	color: var(--text);
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 20px;
}
.md-modules-preview__settings-label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent2);
	margin-bottom: 10px;
}
.md-modules-preview__settings {
	list-style: none;
	padding: 0;
	margin: 0;
}
.md-modules-preview__settings li {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--text);
	padding: 8px 12px;
	border: 1px solid var(--border);
	background: var(--surf3);
	border-radius: var(--r-control);
	margin-bottom: 6px;
	line-height: 1.4;
}

.md-card__status {
	display: inline-block;
	margin-top: 16px;
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	padding: 4px 8px;
	border-radius: var(--r-control);
	border: 1px solid var(--border);
	color: var(--text2);
}
.md-card__status--soon {
	color: var(--yellow);
	border-color: color-mix(in srgb, var(--yellow) 35%, transparent);
}

/* ---------- Page head (downloads / pricing / about / contact / account) ---------- */
.md-page-head {
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(48px, 8vw, 96px) 24px clamp(24px, 4vw, 40px);
	text-align: center;
}
.md-page-head__label {
	font-family: var(--mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--accent2);
	margin-bottom: 16px;
}
.md-page-head__title {
	font-family: var(--mono);
	font-size: clamp(28px, 4.5vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
}
.md-page-head__sub {
	color: var(--text2);
	max-width: 56ch;
	margin: 0 auto;
}

.md-section__foot {
	margin-top: 32px;
}

/* ---------- Download cards (page-downloads) ---------- */
.md-dl-card {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	padding: 28px;
	box-shadow: var(--shadow-frame);
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: border-color var(--dur) var(--ease);
}
.md-dl-card:hover { border-color: var(--accent2); }
.md-dl-card__kind {
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--accent2);
	margin-bottom: 6px;
}
.md-dl-card__title {
	font-family: var(--mono);
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	margin: 0;
	color: var(--text);
}
.md-dl-card__body {
	color: var(--text2);
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
}
.md-dl-card__meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}
.md-dl-card__platform,
.md-dl-card__version {
	padding: 4px 8px;
	border: 1px solid var(--border);
	border-radius: var(--r-control);
	color: var(--text2);
}
/* Inside the dl-card meta row, the status chip sits in-line with the platform —
   no top margin (that one's for cards where the status stacks below the body). */
.md-dl-card__meta .md-card__status { margin-top: 0; }
.md-dl-card__cta { margin-top: auto; }
.md-dl-card__trial {
	display: block;
	margin-top: 10px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: var(--text3);
}

/* ---------- Pricing tiers ---------- */
.md-pricing { align-items: stretch; }
.md-tier {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-shadow: var(--shadow-frame);
	position: relative;
}
.md-tier--featured {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent), var(--shadow-frame);
}
.md-tier__badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--accent);
	color: var(--accent-text);
	font-family: var(--mono);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	padding: 4px 10px;
	border-radius: var(--r-control);
}
/* Finetuning label: orange signal-zone, meaning not decoration. */
.md-tier__wip {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--orange);
	color: var(--bg);
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	padding: 4px 12px;
	border-radius: var(--r-control);
	white-space: nowrap;
}
.md-wip {
	display: inline-block;
	background: var(--orange);
	color: var(--bg);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	padding: 4px 12px;
	border-radius: var(--r-control);
	margin: 0 0 14px;
}
.md-tier__name {
	font-family: var(--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--text2);
	margin-bottom: 8px;
}
.md-tier__price {
	font-family: var(--mono);
	font-size: 36px;
	line-height: 1;
	color: var(--text);
}
.md-tier__amount { letter-spacing: -0.01em; }
.md-tier__note {
	color: var(--text2);
	font-size: 13px;
	margin-top: 6px;
}
.md-tier__features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--text);
	font-size: 13px;
	border-top: 1px solid var(--border);
	padding-top: 16px;
}
.md-tier__features li::before {
	content: '+ ';
	color: var(--accent2);
	font-family: var(--mono);
	margin-right: 6px;
}
.md-tier > .md-btn { margin-top: auto; text-align: center; }
/* When a tier has a primary Order + a secondary Upgrade button, only the first
   is pushed to the bottom; the ghost sits right under it. */
.md-tier > .md-btn + .md-btn { margin-top: -12px; }

/* Ghost button: a quieter secondary action (e.g. the Pro Pack upgrade link). */
.md-btn--ghost {
	background: transparent;
	border-color: var(--border2);
	color: var(--text2);
	font-size: 10px;
}
.md-btn--ghost:hover {
	background: var(--surf3);
	border-color: var(--accent2);
	color: var(--text);
}

/* ---------- Callout ---------- */
.md-callout {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
}
.md-callout__label {
	font-family: var(--mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--accent2);
}
.md-callout__body {
	color: var(--text);
	font-size: 16px;
	margin: 0;
}

/* ---------- Prose pages (about / contact / account) ---------- */
.md-prose {
	max-width: 720px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--text);
}
.md-prose--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.md-prose p { margin: 0 0 1.2em; }

/* ---------- Legal pages (Privacy / Terms) ---------- */
.md-legal {
	font-size: 15px;
	line-height: 1.65;
	color: var(--text);
	padding-bottom: 48px;
}
.md-legal__updated {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text3);
	margin: 0 0 24px;
}
.md-legal__lead {
	font-size: 16px;
	color: var(--text);
	margin: 0 0 28px;
}
.md-legal h2 {
	font-family: var(--mono);
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: none;
	color: var(--text);
	margin: 36px 0 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}
.md-legal p { margin: 0 0 1em; color: var(--text2); }
.md-legal strong { color: var(--text); font-weight: 600; }
.md-legal ul {
	margin: 0 0 1.2em;
	padding-left: 0;
	list-style: none;
}
.md-legal li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 8px;
	color: var(--text2);
}
.md-legal li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	background: var(--accent2);
	border-radius: 1px;
}
.md-legal a { color: var(--accent2); }
.md-legal a:hover { color: var(--accent); }
.md-legal__company {
	background: var(--surf2);
	border: 1px solid var(--border2);
	border-radius: var(--r-frame);
	padding: 18px 20px;
	margin: 0 0 8px;
}
.md-legal__company-head {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent2);
	margin-bottom: 8px;
}
.md-legal__company p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.7; }

.md-prose code {
	background: var(--surf3);
	border: 1px solid var(--border);
	padding: 1px 6px;
	border-radius: var(--r-control);
	font-family: var(--mono);
	font-size: 0.85em;
}
.md-kv {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 12px 24px;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 24px 0;
	margin: 0 0 32px;
}
.md-kv dt {
	font-family: var(--mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--text2);
	padding-top: 2px;
}
.md-kv dd {
	margin: 0;
	color: var(--text);
}
@media (max-width: 600px) {
	.md-kv { grid-template-columns: 1fr; gap: 4px 0; }
	.md-kv dd { margin-bottom: 12px; }
}

/* Centred variant — single column, every row stacked + centred. Selector is
   .md-kv.md-kv--center (specificity 0,2,0) and placed after the base .md-kv
   so it wins the grid layout cleanly. */
.md-kv.md-kv--center {
	display: block;
	grid-template-columns: none;
	max-width: 460px;
	margin: 0 auto;
	text-align: center;
	padding: 24px 0;
}
.md-kv.md-kv--center dt {
	display: block;
	margin-top: 16px;
	padding: 0;
	text-align: center;
}
.md-kv.md-kv--center dt:first-child { margin-top: 0; }
.md-kv.md-kv--center dd {
	display: block;
	margin: 4px 0 0;
	text-align: center;
}

/* ---------- WP block adjustments ---------- */
.wp-block-post-title,
.wp-block-post-content {
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}
.wp-block-post-title {
	padding-top: 60px;
	font-family: var(--mono);
	font-size: clamp(28px, 5vw, 48px);
	letter-spacing: -0.01em;
}
.wp-block-post-content { padding-bottom: 60px; }