/**
 * MySPARK landing page.
 *
 * Standalone: this stylesheet is only loaded by the landing template, which
 * renders its own document, so nothing here can reach a portfolio page.
 *
 * The page borrows the builder's own type and accent so the front door and the
 * onboarding flow read as one product: Bricolage Grotesque headings, Source Sans
 * 3 body, and the orange accent the builder already uses.
 */

:root {
	--ml-ink: #0a0d14;
	--ml-ink-soft: #131a26;
	--ml-paper: #fbfaf7;
	--ml-surface: #ffffff;
	--ml-muted: #5b6472;
	--ml-muted-on-dark: rgba(255, 255, 255, .66);
	--ml-rule: rgba(10, 13, 20, .12);
	--ml-rule-dark: rgba(255, 255, 255, .14);
	--ml-accent: #ff6a2b;
	--ml-accent-dark: #d94f12;
	--ml-accent-ink: #3a1402;
	--ml-violet: #6d5efc;
	--ml-radius: 14px;
	--ml-radius-lg: 22px;
	--ml-shell: 1240px;
	--ml-font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
	--ml-font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
	--ml-shadow-soft: 0 24px 60px rgba(10, 13, 20, .10);
	--ml-shadow-lift: 0 18px 40px rgba(10, 13, 20, .14);
}

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

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

body.ml-page {
	margin: 0;
	background: var(--ml-paper);
	color: var(--ml-ink);
	font-family: var(--ml-font-body);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

body.ml-page img { max-width: 100%; height: auto; }

.ml-shell { width: min(var(--ml-shell), 100% - 40px); margin-inline: auto; }

.ml-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 60;
	padding: 10px 16px;
	background: var(--ml-accent);
	color: var(--ml-accent-ink);
	font-weight: 700;
	border-radius: 0 0 var(--ml-radius) 0;
}
.ml-skip:focus { left: 0; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.ml-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 24px;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: var(--ml-font-body);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease;
}

.ml-btn--primary {
	background: var(--ml-accent);
	color: var(--ml-accent-ink);
	box-shadow: 0 6px 0 var(--ml-accent-dark);
}
.ml-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ml-accent-dark); }
.ml-btn--primary:active { transform: translateY(1px); box-shadow: 0 3px 0 var(--ml-accent-dark); }

.ml-btn--quiet {
	background: transparent;
	border-color: var(--ml-rule);
	color: var(--ml-ink);
}
.ml-btn--quiet:hover { border-color: var(--ml-ink); }

.ml-btn--on-dark {
	background: transparent;
	border-color: var(--ml-rule-dark);
	color: #fff;
}
.ml-btn--on-dark:hover { border-color: #fff; }

.ml-btn--small { min-height: 42px; padding: 0 16px; font-size: 15px; }

.ml-btn:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--ml-violet);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ── Navigation ────────────────────────────────────────────────────────── */

.ml-nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(10, 13, 20, .82);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--ml-rule-dark);
}
.ml-nav-inner {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 68px;
}
.ml-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
	color: #fff;
	font-family: var(--ml-font-display);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.02em;
	text-decoration: none;
}
.ml-brand-mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: linear-gradient(135deg, var(--ml-accent), #ffb347);
	color: var(--ml-accent-ink);
	font-size: 15px;
	font-weight: 800;
}
.ml-nav-links { display: flex; align-items: center; gap: 4px; }
.ml-nav-link {
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--ml-muted-on-dark);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.ml-nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.ml-nav .ml-btn { margin-left: 6px; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.ml-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px);
	background: var(--ml-ink);
	color: #fff;
}
.ml-hero::before,
.ml-hero::after {
	content: "";
	position: absolute;
	pointer-events: none;
}
.ml-hero::before {
	inset: -30% -10% auto -10%;
	height: 140%;
	background:
		radial-gradient(42% 48% at 18% 22%, rgba(109, 94, 252, .30), transparent 68%),
		radial-gradient(40% 46% at 78% 12%, rgba(255, 106, 43, .28), transparent 66%),
		radial-gradient(60% 60% at 60% 96%, rgba(255, 179, 71, .12), transparent 70%);
}
.ml-hero::after {
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 92px 92px;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 82%);
}
.ml-hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.ml-eyebrow {
	margin: 0 0 16px;
	color: var(--ml-accent);
	font-size: 13px;
	font-weight: 750;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ml-h1 {
	margin: 0;
	font-family: var(--ml-font-display);
	font-size: clamp(38px, 5.1vw, 68px);
	font-weight: 700;
	line-height: .99;
	letter-spacing: -.035em;
	text-wrap: balance;
}
.ml-h1 em {
	font-style: normal;
	color: var(--ml-accent);
}
.ml-lede {
	max-width: 56ch;
	margin: 20px 0 0;
	color: var(--ml-muted-on-dark);
	font-size: clamp(17px, 1.5vw, 19px);
}
.ml-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 30px 0 0;
}
.ml-hero-note {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	color: var(--ml-muted-on-dark);
	font-size: 14px;
}
.ml-hero-note li { display: flex; align-items: center; gap: 8px; }
.ml-hero-note svg { width: 15px; height: 15px; stroke: var(--ml-accent); fill: none; stroke-width: 2.2; }

/* The hero's proof is a real portfolio, rendered by the product's own canvas. */
.ml-hero-proof { position: relative; }
.ml-frame {
	border: 1px solid var(--ml-rule-dark);
	border-radius: var(--ml-radius-lg);
	background: #0f131c;
	box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
	overflow: hidden;
}
.ml-frame-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--ml-rule-dark);
	background: rgba(255, 255, 255, .04);
}
.ml-frame-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.ml-frame-url {
	flex: 1 1 auto;
	margin-left: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .35);
	color: rgba(255, 255, 255, .5);
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ml-frame-body {
	position: relative;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: #fff;
}
.ml-hero-badge {
	position: absolute;
	right: -10px;
	bottom: -18px;
	padding: 10px 16px;
	border-radius: 12px;
	background: #fff;
	color: var(--ml-ink);
	box-shadow: var(--ml-shadow-lift);
	font-size: 13px;
	font-weight: 700;
}
.ml-hero-badge span { display: block; color: var(--ml-muted); font-weight: 600; font-size: 12px; }

/* ── Preview frames (shared by hero and example cards) ─────────────────── */

.ml-preview {
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	background: #fff;
	/* A preview's only children are absolutely positioned, so without a ratio it
	   would collapse to zero height and show nothing. */
	aspect-ratio: 4 / 5;
}
/* In the hero the frame already has its own ratio: fill it instead. */
.ml-frame-body .ml-preview { position: absolute; inset: 0; aspect-ratio: auto; }
.ml-preview-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 1280px;
	min-height: 1700px;
	transform: scale(.25);
	transform-origin: top left;
	pointer-events: none;
}
@supports (container-type: inline-size) {
	.ml-preview-inner { transform: scale(calc(100cqw / 1280)); }
}
.ml-preview::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 26%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .96));
	pointer-events: none;
}

/* ── Strip ─────────────────────────────────────────────────────────────── */

.ml-strip { border-bottom: 1px solid var(--ml-rule); background: var(--ml-surface); }
.ml-strip-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 26px;
	padding: 16px 0;
	color: var(--ml-muted);
	font-size: 14px;
}
.ml-strip strong { color: var(--ml-ink); font-weight: 700; }
.ml-strip-item { display: inline-flex; align-items: center; gap: 8px; }
.ml-strip-item::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ml-accent);
}

/* ── Sections ──────────────────────────────────────────────────────────── */

.ml-section { padding: clamp(56px, 7vw, 96px) 0; }
.ml-section--surface { background: var(--ml-surface); border-block: 1px solid var(--ml-rule); }
.ml-section-head { max-width: 760px; margin: 0 0 clamp(30px, 4vw, 52px); }
.ml-h2 {
	margin: 0;
	font-family: var(--ml-font-display);
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.028em;
	text-wrap: balance;
}
.ml-section-lede { margin: 14px 0 0; color: var(--ml-muted); font-size: 18px; }
.ml-kicker {
	margin: 0 0 12px;
	color: var(--ml-accent-dark);
	font-size: 13px;
	font-weight: 750;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* ── Feature cards ─────────────────────────────────────────────────────── */

.ml-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ml-feature {
	padding: 24px;
	border: 1px solid var(--ml-rule);
	border-radius: var(--ml-radius);
	background: var(--ml-surface);
}
.ml-feature-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 16px;
	border-radius: 11px;
	background: linear-gradient(135deg, rgba(255, 106, 43, .16), rgba(109, 94, 252, .16));
	color: var(--ml-ink);
}
.ml-feature-icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ml-feature h3 { margin: 0 0 6px; font-family: var(--ml-font-display); font-size: 19px; font-weight: 700; letter-spacing: -.015em; }
.ml-feature p { margin: 0; color: var(--ml-muted); font-size: 15px; }

/* ── Example gallery ───────────────────────────────────────────────────── */

.ml-examples {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ml-example {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ml-rule);
	border-radius: var(--ml-radius-lg);
	background: var(--ml-surface);
	box-shadow: 0 2px 0 rgba(10, 13, 20, .04);
	overflow: hidden;
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.ml-example:hover,
.ml-example:focus-within { transform: translateY(-5px); box-shadow: var(--ml-shadow-lift); border-color: rgba(10, 13, 20, .26); }
/* One real link per card, stretched over the card. The preview must never be
   nested inside it: an anchor cannot contain the portfolio's own anchors, and
   the parser clones the outer one when it tries. */
.ml-example-open {
	color: inherit;
	font-family: var(--ml-font-display);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.015em;
	text-decoration: none;
}
.ml-example-open::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--ml-radius-lg); }
.ml-example-open:focus-visible { outline: 3px solid var(--ml-violet); outline-offset: 3px; }
.ml-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.ml-example-frame { border-bottom: 1px solid var(--ml-rule); }
.ml-example-frame .ml-preview { aspect-ratio: 4 / 5; }
.ml-example-meta { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.ml-example-label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	color: var(--ml-muted);
	font-size: 14px;
	font-weight: 600;
}
.ml-example-label span { font-size: 13px; }
.ml-example-blurb { margin: 0; color: var(--ml-muted); font-size: 14px; }
.ml-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ml-chip {
	padding: 3px 9px;
	border: 1px solid var(--ml-rule);
	border-radius: 999px;
	color: var(--ml-muted);
	font-size: 11px;
	font-weight: 650;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ── Steps ─────────────────────────────────────────────────────────────── */

.ml-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ml-step;
}
.ml-step {
	position: relative;
	padding: 22px 22px 24px;
	border: 1px solid var(--ml-rule);
	border-radius: var(--ml-radius);
	background: var(--ml-surface);
}
.ml-step::before {
	counter-increment: ml-step;
	content: counter(ml-step, decimal-leading-zero);
	display: block;
	margin-bottom: 12px;
	color: var(--ml-accent-dark);
	font-family: var(--ml-font-display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .06em;
}
.ml-step h3 { margin: 0 0 6px; font-family: var(--ml-font-display); font-size: 18px; font-weight: 700; }
.ml-step p { margin: 0; color: var(--ml-muted); font-size: 15px; }
.ml-step-note { margin-top: 10px; font-size: 13px; color: var(--ml-muted); }

/* ── Token fallback note ───────────────────────────────────────────────── */

.ml-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 34px;
	padding: 18px 22px;
	border: 1px dashed var(--ml-rule);
	border-radius: var(--ml-radius);
	color: var(--ml-muted);
	font-size: 15px;
}
.ml-note strong { color: var(--ml-ink); }

/* ── Closing call to action ────────────────────────────────────────────── */

.ml-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(52px, 7vw, 88px) 0;
	background: var(--ml-ink);
	color: #fff;
}
.ml-cta::before {
	content: "";
	position: absolute;
	inset: -40% -20% auto -20%;
	height: 160%;
	background: radial-gradient(48% 52% at 24% 30%, rgba(255, 106, 43, .30), transparent 66%),
		radial-gradient(42% 50% at 82% 20%, rgba(109, 94, 252, .26), transparent 66%);
	pointer-events: none;
}
.ml-cta-inner { position: relative; z-index: 2; display: grid; gap: 26px; justify-items: start; }
.ml-cta h2 { margin: 0; font-family: var(--ml-font-display); font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1.03; }
.ml-cta p { max-width: 62ch; margin: 0; color: var(--ml-muted-on-dark); font-size: 18px; }

/* ── Footer ────────────────────────────────────────────────────────────── */

.ml-footer { padding: 40px 0 52px; background: var(--ml-ink); color: var(--ml-muted-on-dark); border-top: 1px solid var(--ml-rule-dark); }
.ml-footer-inner { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; }
.ml-footer strong { color: #fff; font-family: var(--ml-font-display); font-size: 17px; letter-spacing: -.01em; }
.ml-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; }
.ml-footer a { color: var(--ml-muted-on-dark); font-size: 14px; text-decoration: none; }
.ml-footer a:hover { color: #fff; }
.ml-fineprint { width: 100%; margin: 6px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .45); }

/* ── Reveal on scroll (opt-in, motion-safe) ────────────────────────────── */

.ml-page--animated .ml-reveal { opacity: 0; transform: translateY(14px); }
.ml-page--animated .ml-reveal.ml-revealed { opacity: 1; transform: none; transition: opacity 520ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.ml-page--animated .ml-reveal,
	.ml-page--animated .ml-reveal.ml-revealed { opacity: 1; transform: none; transition: none; }
	.ml-example-link:hover { transform: none; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
	.ml-hero-inner { grid-template-columns: 1fr; }
	.ml-hero-badge { right: 12px; bottom: 12px; }
}

@media (max-width: 760px) {
	body.ml-page { font-size: 16px; }
	.ml-nav-links { display: none; }
	.ml-nav-inner { min-height: 60px; }
	.ml-examples { gap: 20px; }
	.ml-hero { padding-top: 40px; }
	.ml-frame-url { display: none; }
}

@media (max-width: 520px) {
	.ml-shell { width: min(var(--ml-shell), 100% - 28px); }
	.ml-btn { width: 100%; }
	.ml-actions { gap: 10px; }
}

@media print {
	.ml-nav, .ml-cta, .ml-frame-bar { display: none; }
	.ml-preview::after { display: none; }
	body.ml-page { background: #fff; }
	.ml-hero, .ml-cta, .ml-footer { background: #fff; color: #000; }
}


/* ══════════════════════════════════════════════════════════════════════════
   Wave 33 — colour, imagery and rhythm. Purely additive: every rule below
   decorates markup that already existed or decorates the new sections only, and
   the preview-frame rules above are untouched.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
	--ml-teal: #0f9d8f;
	--ml-pink: #ef4d8b;
	--ml-amber: #f5a524;
	--ml-blue: #2f7df6;
	--ml-glow: 0 26px 60px -32px rgba(255, 106, 43, .6);
}

/* ── Hero: coloured light behind the promise ─────────────────────────────── */

.ml-hero { position: relative; }
.ml-hero-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ml-hero-glow span { position: absolute; border-radius: 50%; filter: blur(70px); }
.ml-hero-glow span:nth-child(1) { width: 560px; height: 560px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(255, 106, 43, .55), rgba(255, 106, 43, 0) 70%); }
.ml-hero-glow span:nth-child(2) { width: 520px; height: 520px; bottom: -220px; left: -140px; background: radial-gradient(circle, rgba(109, 94, 252, .5), rgba(109, 94, 252, 0) 70%); }
.ml-hero-glow span:nth-child(3) { width: 420px; height: 420px; top: 34%; left: 46%; background: radial-gradient(circle, rgba(15, 157, 143, .38), rgba(15, 157, 143, 0) 70%); }
.ml-hero-inner { position: relative; z-index: 1; }

.ml-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 20px; padding: 0; list-style: none; }
.ml-hero-chips li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	color: #eaeef6;
	font-size: 14px;
	font-weight: 600;
}
.ml-chip-icon { width: 16px; height: 16px; fill: none; stroke: var(--ml-accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ── Counts strip: real numbers, each on its own colour ──────────────────── */

.ml-section--tight { padding: 10px 0 0; }
.ml-visually-hidden-print { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ml-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.ml-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 20px 24px;
	border: 1px solid var(--ml-rule);
	border-radius: var(--ml-radius-lg);
	background: var(--ml-surface);
	box-shadow: 0 2px 0 rgba(10, 13, 20, .04);
}
.ml-stat b { font-family: var(--ml-font-display); font-size: 32px; line-height: 1.1; letter-spacing: -.03em; }
.ml-stat span:last-child { color: var(--ml-muted); font-size: 14px; }
.ml-stat-plate { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 14px; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.ml-stat-plate .ml-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ml-plate--a { background: linear-gradient(135deg, #ff8a4c, #e8481c); }
.ml-plate--b { background: linear-gradient(135deg, #8b7bff, #5b46f0); }
.ml-plate--c { background: linear-gradient(135deg, #2ed3c0, #0f9d8f); }
.ml-plate--d { background: linear-gradient(135deg, #ff8fb8, #e63f7f); }
.ml-plate--e { background: linear-gradient(135deg, #eea219, #bd6f06); }

/* ── Feature tiles: a colour per idea ───────────────────────────────────── */

.ml-feature { position: relative; overflow: hidden; }
.ml-feature::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; opacity: .9; }
.ml-feature-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 15px; color: #fff; box-shadow: var(--ml-glow); }
.ml-feature-icon .ml-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ml-feature--a .ml-feature-icon, .ml-feature--a::before { background: linear-gradient(135deg, #ff8a4c, #e8481c); }
.ml-feature--b .ml-feature-icon, .ml-feature--b::before { background: linear-gradient(135deg, #8b7bff, #5b46f0); }
.ml-feature--c .ml-feature-icon, .ml-feature--c::before { background: linear-gradient(135deg, #2ed3c0, #0f9d8f); }
.ml-feature--d .ml-feature-icon, .ml-feature--d::before { background: linear-gradient(135deg, #ff8fb8, #e63f7f); }
.ml-feature--e .ml-feature-icon, .ml-feature--e::before { background: linear-gradient(135deg, #eea219, #bd6f06); }
.ml-feature--f .ml-feature-icon, .ml-feature--f::before { background: linear-gradient(135deg, #6aa8ff, #2f7df6); }
.ml-feature--g .ml-feature-icon, .ml-feature--g::before { background: linear-gradient(135deg, #7ee0a8, #17a35f); }
.ml-feature--h .ml-feature-icon, .ml-feature--h::before { background: linear-gradient(135deg, #f0a6ff, #a855f7); }
.ml-feature { transition: transform 200ms ease, box-shadow 200ms ease; }
.ml-feature:hover { transform: translateY(-4px); box-shadow: var(--ml-shadow-lift); }

/* ── Styles and templates: show the range, do not describe it ───────────── */

/* Four columns, because the registry now holds twenty styles and a grid whose
   column count divides the item count is what keeps the last row even. */
.ml-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ml-style {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--ml-rule);
	border-radius: 12px;
	background: var(--ml-surface);
	transition: transform 180ms ease, box-shadow 180ms ease;
}
.ml-style:hover { transform: translateY(-3px); box-shadow: var(--ml-shadow-lift); }
.ml-style-chip { flex: none; width: 48px; height: 48px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(10, 13, 20, .12); }
.ml-style b { font-family: var(--ml-font-display); font-size: 15px; letter-spacing: -.01em; }

.ml-templates { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ml-template {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 2px;
	align-items: center;
	padding: 16px 18px;
	border: 1px solid var(--ml-rule);
	border-radius: 14px;
	background: var(--ml-surface);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.ml-template:hover { transform: translateY(-3px); box-shadow: var(--ml-shadow-lift); border-color: rgba(255, 106, 43, .35); }
.ml-template-mark { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #fff; }
.ml-template-mark .ml-icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ml-template b { font-family: var(--ml-font-display); font-size: 15px; letter-spacing: -.015em; }
.ml-template-note { color: var(--ml-muted); font-size: 13px; line-height: 1.45; }
.ml-template--1 .ml-template-mark { background: linear-gradient(135deg, #ff8a4c, #e8481c); }
.ml-template--2 .ml-template-mark { background: linear-gradient(135deg, #8b7bff, #5b46f0); }
.ml-template--3 .ml-template-mark { background: linear-gradient(135deg, #2ed3c0, #0f9d8f); }
.ml-template--4 .ml-template-mark { background: linear-gradient(135deg, #ff8fb8, #e63f7f); }
.ml-template--5 .ml-template-mark { background: linear-gradient(135deg, #eea219, #bd6f06); }
.ml-template--6 .ml-template-mark { background: linear-gradient(135deg, #6aa8ff, #2f7df6); }

/* ── Artwork band: the page's own images, not a stock photo ─────────────── */

.ml-band { margin-top: 64px; padding: 72px 0 72px; background: linear-gradient(180deg, #0a0d14 0%, #141a2a 100%); color: #fff; }
.ml-band-head { max-width: 720px; }
.ml-band .ml-h2 { color: #fff; }
.ml-band .ml-section-lede { color: rgba(255, 255, 255, .74); }
.ml-band-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 34px 0 0; padding: 0 24px; list-style: none; max-width: 1280px; }
.ml-band-tile { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .8); transition: transform 220ms ease; }
.ml-band-tile:hover { transform: translateY(-4px) scale(1.01); }
.ml-band-tile img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; }

/* ── Closing call to action: artwork behind a gradient, not a flat bar ──── */

.ml-cta { position: relative; overflow: hidden; }
.ml-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	/* A scrim over the artwork keeps the closing copy readable whatever the
	   poster behind it looks like. */
	background-image: linear-gradient(rgba(6, 9, 16, .62), rgba(6, 9, 16, .62)), url("../band/violet.svg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.ml-cta > * { position: relative; z-index: 1; }

@media (max-width: 1180px) {
	/* Twelve styles and eighteen templates divide evenly by six, four, three and
	   two — those are the column counts used, so no row is ever left ragged. */
	.ml-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ml-templates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
	.ml-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.ml-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ml-templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ml-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ml-band-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 18px; }
}
@media (max-width: 460px) {
	.ml-stats { grid-template-columns: 1fr; }
}
@media print {
	.ml-hero-glow, .ml-band-row, .ml-cta::before { display: none; }
	.ml-band { background: #fff; color: #000; }
}