/*
Theme Name: Monza Marketing
Theme URI: https://monza.dev/
Author: Monza Creatives
Description: The monza.dev marketing site. Brand values are taken from the vector logo and the captured Carrd page; the landing layout follows David's page-10 wireframe.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: monza-marketing
*/

/* Self-hosted, latin subset only, served from this origin so no visitor
   request reaches a third party — which is what lets the privacy notice say
   the site contacts nobody else, and removes a render-blocking dependency.

   ⚠️ ONE FILE PER FAMILY, DECLARED AS A WEIGHT RANGE. Google serves Montserrat
   400 and 700 as the SAME bytes (md5-identical) because they are variable
   fonts; two static faces pointing at one variable file is Google's own
   compatibility shim. A range lets the browser use the real weight axis
   instead of synthesising bold — and a synthesised bold would change the
   headline's measured width ratio, which every one-line size on this page is
   derived from. */
@font-face {
	font-family: 'Comfortaa';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('assets/fonts/comfortaa.woff2') format('woff2');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/montserrat.woff2') format('woff2');
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url('assets/fonts/source-sans-3.woff2') format('woff2');
}

/* ---------------------------------------------------------------------------
   Tokens. Every colour here was measured, not chosen: the reds and the rose
   come out of the vector logo, the peach and charcoal off the captured page.
   docs/platform/marketing-snapshot/brand-as-measured.md
   --------------------------------------------------------------------------- */
:root {
	--mz-red: #db0a13;
	--mz-red-dark: #b1080f;
	--mz-rose: #e3b0b0;
	--mz-peach: #ffccb0;
	--mz-peach-deep: #f6b294;
	--mz-charcoal: #3c3d3d;
	--mz-warm-grey: #c7b4b2;
	/* Divider rules: the warm grey was too close to the peach to register as
	   a line at all. Charcoal at a third reads as a rule on both grounds. */
	--mz-rule: rgba(60, 61, 61, 0.33);
	--mz-ink: #262727;
	--mz-ink-soft: #55575a;
	--mz-white: #fff;
	/* The page GROUND is a shade off pure white (David): #fff against the peach
	   band reads as a hard edge, and the join is the most looked-at seam on the
	   page. Kept as its own token because --mz-white is still needed at full
	   strength for ink on the charcoal footer. */
	--mz-ground: #fcfcfc;
	--mz-black: #111112;

	--mz-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
	--mz-body: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;
	--mz-logo: "Comfortaa", "Trebuchet MS", system-ui, sans-serif;

	--mz-gutter: 40px;   /* stepped, not a vw clamp — see the masthead note */
	--mz-measure: 1180px;
	/* Corner rounding, raised from 4px (David). One token, so panels, buttons
	   and the menu move together and cannot drift into three radii.
	   ⛔ NOT the scrollbar: its BAR_RADIUS lives in scrollbar.js and is parity-
	   checked against the Developer's component — changing it here would break
	   that match silently. */
	--mz-radius: 10px;
}

/* The overlay scrollbar's ramp, declared so it can be tuned in devtools without
   a rebuild. ⚠️ These are the SAME names and values as the Developer's
   chrome-rules.css — keep the two in step. */
:root {
	--overlay-scrollbar-thumb: #5b5b5b;
	--overlay-scrollbar-rest: 0.35;
	--overlay-scrollbar-rest-arrow: 0.4;
	--overlay-scrollbar-hover: 0.7;
	--overlay-scrollbar-press: 1;
	--overlay-scrollbar-head-grow: 1.28;
	--overlay-scrollbar-tint: 22%;
	--overlay-scrollbar-tint-press: 40%;
}

/* The native bar is replaced, not hidden behind ours: no layout width is
   reserved either way, so nothing shifts. */
@media (hover: hover) and (pointer: fine) {
	html { scrollbar-width: none; }
	html::-webkit-scrollbar { width: 0; height: 0; }
}

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

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

body {
	margin: 0;
	background: var(--mz-ground);
	color: var(--mz-ink);
	font-family: var(--mz-body);
	/* Source Sans at 200 is on the captured page and is too light to read at
	   body sizes; 400 is the deliberate departure. brand-as-measured.md §2 */
	font-weight: 400;
	font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--mz-display); font-weight: 700; line-height: 1.08; margin: 0; }

a { color: inherit; }

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

.mz-shell { width: 100%; max-width: var(--mz-measure); margin-inline: auto; padding-inline: var(--mz-gutter); }

.mz-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--mz-black); color: var(--mz-white);
	padding: 0.75rem 1.25rem; font-family: var(--mz-display); font-weight: 700;
}
.mz-skip:focus { left: 0; }

:where(a, button, summary):focus {
	outline: 3px solid var(--mz-red);
	outline-offset: 3px;
}
:where(a, button, summary):focus:not(:focus-visible) { outline: none; }
:where(a, button, summary):focus-visible {
	outline: 3px solid var(--mz-red);
	outline-offset: 3px;
}

/* --- The logo is type, not artwork -----------------------------------------
   Logo#2.svg, Word.svg and Favicon.svg contain ZERO paths: they are the
   letter "m" and the word "monza" set live in Comfortaa 400. Setting them as
   real text reproduces the mark exactly at any size and avoids the trap that
   an <img src="*.svg"> loads no webfont and would silently fall back.
   --------------------------------------------------------------------------- */
.mz-logo {
	display: inline-flex; flex-direction: column; align-items: center;
	font-family: var(--mz-logo); font-weight: 400; line-height: 1;
	text-decoration: none; color: var(--mz-red);
}
.mz-logo__mark { font-size: 1em; letter-spacing: 0; }
.mz-logo__word { font-size: 0.228em; letter-spacing: 0.02em; margin-top: 0.14em; }
.mz-logo--inline { flex-direction: row; align-items: center; gap: 0.18em; }
.mz-logo--inline .mz-logo__word { font-size: 0.62em; margin-top: 0; }

/* --- Buttons ---------------------------------------------------------------
   "Get Started button — red on black" (wireframe, page 10). The label is
   700/large so the 4.06:1 pair clears AA for large text; hover inverts to a
   solid red so the two states read as one deliberate pair.
   --------------------------------------------------------------------------- */
.mz-btn {
	display: inline-block;
	font-family: var(--mz-display); font-weight: 700; font-size: 1.0625rem;
	letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
	padding: 1rem 2.25rem; border-radius: var(--mz-radius);
	background: var(--mz-black); color: var(--mz-red);
	border: 2px solid var(--mz-black);
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.mz-btn:hover, .mz-btn:focus-visible {
	background: var(--mz-red); color: var(--mz-white); border-color: var(--mz-red);
	transform: translateY(-1px);
}
.mz-btn--ghost {
	background: transparent; color: var(--mz-ink); border-color: currentColor;
}
.mz-btn--ghost:hover, .mz-btn--ghost:focus-visible {
	background: var(--mz-black); color: var(--mz-white); border-color: var(--mz-black);
}

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: 1ms !important; animation-duration: 1ms !important; }
	.mz-btn:hover { transform: none; }
}

/* --- Masthead + the hamburger ----------------------------------------------
   "☰ menu, top left — same as links at foot" (wireframe, page 10).
   --------------------------------------------------------------------------- */
.mz-masthead {
	position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 20;
	/* Whole pixels, not a vw clamp: 3vw is 30.72px at 1024 and 23.04px at 768,
	   and a fractional offset here puts the hamburger's 2px bars across two
	   device rows. verify.mjs pins this. */
	padding-block: 20px;
}
@media (min-width: 900px) { .mz-masthead { padding-block: 32px; } }

/* The page gutter steps in whole pixels for the same reason the masthead does:
   5vw is 51.2px at 1024 and 38.4px at 768, and every box on the page inherits
   that fraction. */
@media (min-width: 600px)  { :root { --mz-gutter: 48px; } }
@media (min-width: 1000px) { :root { --mz-gutter: 64px; } }
/* The row's height must be a WHOLE number. Centring anything inside a row
   whose height comes out fractional — and font metrics make that the normal
   case — lands it on a half pixel, which is what made the hamburger fuzzy.
   Both children get integer heights, so the row does too. */
.mz-masthead__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 40px; }

.mz-navtoggle {
	display: inline-flex; align-items: center; gap: 0.6rem;
	background: none; border: 0; cursor: pointer;
	font-family: var(--mz-display); font-weight: 700; font-size: 0.9rem;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--mz-ink);
	height: 40px; padding: 0 0.5rem; margin-inline-start: -0.5rem;
}
/* Whole pixels only. At 2.5px tall on half-pixel offsets these bars land
   between the device pixels on a 1x screen: the browser anti-aliases them and
   they read as fuzzy and unevenly weighted. 2px bars at 0 / 6 / 12 in a 14px
   box are integers at 1x and still exact at 2x. */
/* ☠️ THREE REAL SPANS, NOT TWO PSEUDO-ELEMENTS AND A SPAN.
   Geometry was already identical — measured at device-pixel ratios 1, 2 and 3,
   all three bars are 2px on whole device pixels — yet the middle one read as
   thinner on a real phone. The only asymmetry left was the ELEMENT KIND: a
   pseudo-element and a child are not obliged to take the same rasterisation
   path, and the middle bar was also the only one transitioning `opacity`
   rather than `transform`, which is exactly what gets promoted to its own
   compositing layer. Same element, same declarations, same transition list on
   all three removes the whole class of cause rather than guessing which half
   of it was true. */
/* The height and spacing are OVERRIDDEN from nav.js with values rounded to
   whole device pixels — see the note there. These are the fallback if script
   does not run, and the shape it draws either way. */
.mz-navtoggle__bars { display: block; width: 24px; height: 14px; position: relative; --mz-bar-h: 2px; --mz-bar-gap: 6px; }
.mz-navtoggle__bars span {
	position: absolute; inset-inline: 0; height: var(--mz-bar-h);
	background: currentColor; border-radius: 0;
	transition: transform 180ms ease, opacity 120ms ease;
}
.mz-navtoggle__bars span:nth-child(1) { top: 0; }
.mz-navtoggle__bars span:nth-child(2) { top: var(--mz-bar-gap); }
.mz-navtoggle__bars span:nth-child(3) { top: calc(var(--mz-bar-gap) * 2); }
.mz-navtoggle[aria-expanded="true"] .mz-navtoggle__bars span:nth-child(1) { transform: translateY(var(--mz-bar-gap)) rotate(45deg); }
.mz-navtoggle[aria-expanded="true"] .mz-navtoggle__bars span:nth-child(2) { opacity: 0; }
.mz-navtoggle[aria-expanded="true"] .mz-navtoggle__bars span:nth-child(3) { transform: translateY(calc(var(--mz-bar-gap) * -1)) rotate(-45deg); }

/* display:flex, not the default block: an inline-flex logo sits on a text
   baseline, and the line box adds the parent's strut — which is where the
   fractional height came from, and with it the half-pixel hamburger. */
.mz-masthead__logo { display: flex; align-items: center; font-size: 2rem; margin-inline-start: auto; }

/* ALWAYS the wordmark, never the mark: the letter m already appears at full
   size as the watermark straddling the peach/white seam, so repeating it in
   the corner says the same thing twice (David). The anchor's aria-label
   carries the name regardless. */
.mz-masthead .mz-logo__mark { display: none; }
.mz-masthead .mz-logo__word { display: block; font-size: 1em; margin-top: 0; }

.mz-nav[hidden] { display: none; }
.mz-navwrap { position: relative; display: flex; align-items: center; }
.mz-nav {
	position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0;
	min-width: 15rem;
	background: var(--mz-ground); color: var(--mz-ink);
	border-radius: var(--mz-radius);
	box-shadow: 0 18px 44px rgba(60, 61, 61, 0.22);
	padding: 0.75rem;
}
.mz-nav ul { list-style: none; margin: 0; padding: 0; }
.mz-nav a {
	display: block; padding: 0.75rem 0.9rem; text-decoration: none;
	font-family: var(--mz-display); font-weight: 700; font-size: 0.95rem;
	border-radius: calc(var(--mz-radius) - 4px);
}
.mz-nav a:hover, .mz-nav a:focus-visible { background: var(--mz-peach); color: var(--mz-ink); }

/* --- Hero ------------------------------------------------------------------ */
.mz-hero {
	position: relative;
	min-height: 90vh;                 /* "full width, ~90vh" — wireframe */
	min-height: 90svh;
	display: flex; align-items: center;
	background: var(--mz-peach);
	background-image: radial-gradient(115% 85% at 78% 12%, var(--mz-peach-deep) 0%, transparent 62%);
	/* NOT clipped: the watermark deliberately crosses into the band below so
	   the letter reads whole. The hero is raised a layer so the overhang paints
	   over the white band's background rather than under it — the hero's own
	   background still stops at its box, so only the glyph crosses. */
	overflow: visible;
	z-index: 1;
	padding-block: clamp(7rem, 16vh, 11rem) clamp(3rem, 8vh, 5rem);
}
.mz-hero__inner { position: relative; z-index: 2; }
/* ⭐ THE COPY COLUMN AS A NUMBER. Both hero sizes below are this width DIVIDED
   by a measured ratio, so the box has to exist as a value: `.mz-shell` caps at
   --mz-measure and pads by the stepped gutter, then this box caps at 62rem.
   ⛔ Keep in step with `.mz-shell` and `--mz-gutter` — nothing checks it. */
/* ⭐ THE HERO'S CONTENT IS CENTRED IN ITS COLUMN (David, s162).
   ⚠️ Every OTHER band on the site still starts on the gutter, and verify.mjs
   still asserts that — the masthead, the panels, the footer. The hero is the
   deliberate exception, so the gutter check excludes it BY NAME rather than
   being loosened, and asserts the centring in its place. ☠️ Do not read this as
   permission to centre anything else: "hero copy centred rather than
   gutter-aligned" was once a defect these checks caught. */
.mz-hero__copy {
	margin-inline: auto;
	text-align: center;
	max-width: 62rem;
	--mz-box: min(62rem, min(var(--mz-measure), 100vw) - 2 * var(--mz-gutter));
	/* The headline size, held as a value because the strapline is derived from
	   it rather than from the box — see the strapline's own note. Anything that
	   resizes the headline (the short-landscape rule near the end of this file)
	   must move THIS, so the two stay in proportion. */
	--mz-h1: min(5.25rem, var(--mz-box) / 11.55);
}
/* ⭐ THE FORMULA AND ITS CAPTION SHARE ONE SHRINK-WRAPPED BOX, so the strapline
   justifies to the headline's REAL ink width rather than to the column. That
   is David's rule stated exactly: `width: fit-content` makes this box the wider
   of its two children, the headline is always the wider one by construction,
   and no constant has to model it. ⛔ The alternative — justifying to the column
   — is what shipped first, and it silently allowed a 38px disagreement. */
.mz-hero__formula { width: fit-content; max-width: 100%; margin-inline: auto; }
/* The formula must NEVER wrap: nowrap makes a regression impossible to miss,
   because it would overflow and verify.mjs fails on overflow. */
.mz-hero h1 {
	letter-spacing: -0.02em;
	line-height: 1.06;
	white-space: nowrap;
}
/* ONE LINE, ALWAYS — David, and stacking the terms reads as a wrap too.
   ⭐ The size is the copy box DIVIDED by the line's measured width ratio, not
   a linear vw fit. MEASURED 2026-09-09 at six font sizes: set solid the formula
   is 11.31x its own font-size wide (11.26–11.49 across the six — the spread is
   glyph-advance rounding, which differs by device). The 11.55 divisor leaves 2%
   for that spread — measured worst case, the formula ends 1.4px past the
   column, inside a gutter of 40px or more.
   ☠️ A LINEAR FIT IS WHAT WAS HERE BEFORE — `calc(9.36vw - 8.5px)`, derived
   from a stale 10.47 — and it ran the headline up to 38px PAST the copy column
   into the gutter. The page never overflowed, so nothing caught it, and the
   strapline's "spans the same width as the formula" rule was measuring the
   BOX rather than the formula.
   ⚠️ The 11.31 is for THIS text in Montserrat with regular-weight operators
   and the controlled gaps below. It was 12.15 with literal word-spaces, and
   11.73 before the operators were lightened. Re-measure if any of that
   changes — it decides the type size at every width. */
/* Spacing around the operators is set here, not by literal spaces in the
   markup: a word-space is ~0.26em each side, and three operators were spending
   2.04em of the line on air. Controlled gaps recover that as type size. */
.mz-hero h1 .mz-term { display: inline-flex; align-items: baseline; gap: 0.2em; }
/* Needs to out-specify `.mz-hero h1 > span { display: block }` above, which
   otherwise wins and silently kills the gap between the terms. */
.mz-hero h1 > .mz-hero__line1 { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0.2em; }
.mz-hero h1 { font-size: var(--mz-h1); }
.mz-hero h1 > span { display: block; }
/* The formula expanded, term by term, in the same order. The three subjects
   are emphasised so the sentence reads back as the equation above it. */
/* David's strapline, sitting tight under the formula as its caption rather
   than competing with the sentence below it. */
/* NEVER WRAPS, at any width — David, and explicitly "even if the font size
   needs to be lowered a lot". Same construction as the headline: the copy box
   DIVIDED by the line's measured width ratio.
   ⭐ MEASURED 2026-09-09: set solid and UNTRACKED the line is 28.84x its own
   font-size wide, and each 0.01em of tracking adds 0.44x — 44 steps, being the
   43 characters and the trailing one Chrome adds after the last. So at the
   0.12em set below it is 34.12x. The 36 divisor leaves 5% for glyph-advance
   rounding, which moves the untracked ratio between 28.0x and 30.2x depending
   on how the device positions glyphs (measured in three rendering modes).
   ⚠️ The 28.84 belongs to THIS sentence in Montserrat, uppercased. Re-measure
   if the words, the font, the weight, text-transform or the tracking change:
   a longer strapline does not wrap, it OVERFLOWS, and verify.mjs fails on
   overflow. The 1.375rem cap stops the line being LARGER at 768 than on a
   desktop, which the size table made obvious and the eye would not have. */
.mz-hero__strap {
	margin: 0.55em 0 0;
	font-family: var(--mz-display); font-weight: 400;
	/* ⭐ THE STRAPLINE TAKES THE FULL INK, NOT THE SOFT ONE (David, s162: "needs
	   to be darker"). It is the headline's caption and reads at 7-22px in caps,
	   where --mz-ink-soft goes indistinct against the peach. */
	line-height: 1.3; color: var(--mz-ink);
	text-transform: uppercase;
	/* ⭐ TRACKING CARRIES THE SPARE SPACE, NOT THE WORD GAPS ALONE (David,
	   2026-09-09). The line is justified to the copy box below 820px, and
	   whatever the size formula does not spend has to go somewhere. At 0.05em
	   all of it landed in five word gaps: MEASURED 7.13px of padding per gap on
	   average over 320–819px, more than three times a natural word space, which
	   is what made the line read as gappy. 0.12em spends most of it between the
	   letters instead and takes the word-gap padding to 4.91px on the same sweep.
	   ⛔ 0.12em and the 36 divisor MOVE TOGETHER — the tracking is inside the
	   ratio the divisor is derived from. 0.12 is also the largest that never
	   overflows the box in any of the three rendering modes tested. */
	letter-spacing: 0.12em;
	white-space: nowrap;
	/* ⭐ DERIVED FROM THE HEADLINE, not from the column: 11.55 / 36 = 0.3208, so
	   this is the same as box/36 wherever the headline is sized off the box, and
	   it still holds where something else sizes the headline. */
	font-size: min(1.375rem, var(--mz-h1) * 0.3208);
}
/* ⭐ The strapline's ink is set to span exactly the same width as the formula
   above it (David). `text-align-last: justify` takes up whatever the size
   formula and the tracking have not spent, and CANNOT overflow, which is why
   it is still the right tool for the REMAINDER: the size formula keeps its
   margin and the justification spends the rest.
   ⚠️ It can only distribute across WORD gaps — CSS justification has no
   per-letter mode that any shipping browser implements (`text-justify:
   inter-character` is Firefox-only), so the letters are opened by the tracking
   above instead, which is a computed value rather than a distributed one.
   ⛔ Only below 820px — measured as the width at which the 1.375rem cap starts
   to bind, above which the line is far shorter than the box and stretching it
   would read as broken rather than set. ⚠️ Safari 14 and 15 ignore
   text-align-last; they fall back to the ragged version, which is what ships
   today. */
@media (max-width: 819px) {
	.mz-hero__strap { text-align: justify; text-align-last: justify; }
}


/* This line must not wrap mid-phrase, ever.
   MEASURED, not estimated: set solid it is 35.19x its own font-size wide, and
   its longest clause is 15.71x. So one line needs container/35.19 — which is
   28px at 1440 but only 8px at 320, i.e. unreadable. The rule therefore is:
   above 700px it is one line, sized off the viewport with the stepped gutters
   subtracted; below that it may break, but only ever at a comma, because each
   clause is its own nowrap span. verify.mjs pins both halves. */
.mz-hero__expand {
	margin: clamp(1.6rem, 3vw, 2.5rem) 0 0;
	font-family: var(--mz-display); font-weight: 400;
	font-size: clamp(0.875rem, 4.6vw, 1.0625rem);
	line-height: 1.5; max-width: none; color: var(--mz-ink);
}
/* ALL on one line, or ALL on their own — never the two-line middle state,
   which reads as a sentence that broke rather than one that was set (David).
   Above 700px the whole line fits; below it each clause takes its own line and
   the leading opens so three lines do not read as one block. */
.mz-hero__expand .mz-clause { white-space: nowrap; display: block; }
.mz-hero__expand .mz-clause-group { display: contents; }
@media (max-width: 699px) { .mz-hero__expand { line-height: 1.8; } }

/* 700-999: the copy box is the viewport less a 32px gutter each side. */
@media (min-width: 700px) and (max-width: 999px) {
	.mz-hero__expand { white-space: nowrap; font-size: calc(2.80vw - 3.2px); }
	.mz-hero__expand .mz-clause { display: inline; }
}
/* 1000+: gutter steps to 64px each side, and the copy box caps at 992px. */
@media (min-width: 1000px) {
	.mz-hero__expand { white-space: nowrap; font-size: min(1.72rem, calc(2.80vw - 3.8px)); }
	.mz-hero__expand .mz-clause { display: inline; }
}
.mz-hero__expand b { font-weight: 700; color: var(--mz-red); }
/* The operators carry the brand red, the same convention as the "?" on
   "What is Monza?" — so the formula reads as one. */
.mz-hero h1 .mz-op { color: var(--mz-red); font-weight: 400; }
/* ⭐ The lede sits BELOW the call to action (David, 2026-09-09), so the two
   gaps swapped with it: the button keeps the larger space above it that used
   to sit under the lede, and the lede keeps the smaller one. The hero's
   overall rhythm is unchanged — only the order is. */
.mz-hero__lede {
	/* ⚠️ DOUBLED from clamp(1.5rem, 3vw, 2rem) — David, s162. The lede reads as a
	   trailing note under the button rather than a caption attached to it. */
	margin: clamp(3rem, 6vw, 4rem) 0 0;
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	max-width: 42rem; margin-inline: auto; color: var(--mz-ink-soft);
}
.mz-hero__cta {
	display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center;
	justify-content: center;
	margin-top: clamp(2rem, 4vw, 2.75rem);
}

/* A quiet oversized watermark of the mark itself, clipped by the band. */
.mz-hero__watermark {
	position: absolute; z-index: 1; pointer-events: none; user-select: none;
	right: clamp(0.5rem, 3vw, 3rem); bottom: -0.22em;
	font-family: var(--mz-logo); font-weight: 400; line-height: 0.8;
	font-size: clamp(11rem, 30vw, 26rem);
	/* A deeper peach, not white: it has to read on the peach band AND on the
	   white one it now crosses into, and white would simply vanish below the
	   join. */
	color: var(--mz-peach-deep); opacity: 0.55;
}
@media (max-width: 720px) { .mz-hero__watermark { opacity: 0.45; } }

/* --- Band 2: the two panels ------------------------------------------------
   "white background, two side-by-side panels: What is Monza? | Our Core Aim"
   with the "?" in red — wireframe, page 10.
   --------------------------------------------------------------------------- */
.mz-intro { position: relative; z-index: 0; background: var(--mz-ground); padding-block: clamp(4rem, 9vw, 7.5rem); }
.mz-intro__grid {
	display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.mz-intro__grid { grid-template-columns: 1fr 1fr; }
	.mz-panel + .mz-panel {
		padding-inline-start: clamp(2.5rem, 5vw, 4.5rem);
		border-inline-start: 1px solid var(--mz-warm-grey);
	}
}
.mz-panel h2 {
	font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
	margin-bottom: 1.25rem;
}
.mz-panel h2 .mz-q { color: var(--mz-red); }
.mz-panel p { margin: 0 0 1.15rem; }
.mz-panel p:last-child { margin-bottom: 0; }
/* The same formula as the headline, in the same order, inside body copy. */
.mz-formula { font-weight: 600; white-space: nowrap; }
.mz-formula .mz-op { color: var(--mz-red); font-weight: 400; padding-inline: 0.06em; }
.mz-panel__kicker {
	display: block; font-family: var(--mz-display); font-weight: 700;
	font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--mz-red); margin-bottom: 0.75rem;
}

/* "below them, a Get started button — mobile only" — wireframe, page 10. */
.mz-intro__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }
@media (min-width: 900px) { .mz-intro__cta { display: none; } }

/* --- Footer ---------------------------------------------------------------- */
.mz-footer {
	background: var(--mz-charcoal); color: var(--mz-white);
	padding-block: clamp(3rem, 7vw, 4.5rem);
}
.mz-footer__inner {
	display: flex; flex-wrap: wrap; gap: 2.5rem;
	justify-content: space-between; align-items: flex-start;
}
.mz-footer__brand { display: flex; flex-direction: column; gap: 1rem; }
/* Wordmark only, at the same drawn height the mark had: both strings are
   all-lowercase in Comfortaa, so equal font-size means equal x-height, which
   is the height either one actually occupies. */
.mz-footer .mz-logo { color: var(--mz-white); font-size: 2rem; }
.mz-footer .mz-logo__mark { display: none; }
.mz-footer .mz-logo__word { color: var(--mz-rose); font-size: 1em; margin-top: 0; }
.mz-footer__strap {
	font-family: var(--mz-display); font-size: 0.85rem;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--mz-warm-grey);
}
.mz-footer nav ul {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
}
.mz-footer nav a {
	text-decoration: none; font-family: var(--mz-display); font-weight: 700;
	font-size: 0.95rem; color: var(--mz-white);
	border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.mz-footer nav a:hover, .mz-footer nav a:focus-visible { border-bottom-color: var(--mz-red); }
.mz-footer__legal {
	width: 100%; margin-top: clamp(2rem, 5vw, 3rem);
	padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.16);
	font-size: 0.9rem; color: var(--mz-warm-grey);
}
.mz-footer__legal p { margin: 0; }

/* --- Mobile hardening -------------------------------------------------------
   Every page on this site is built mobile-first and must survive a narrow
   phone, a short landscape phone and a long unbroken word.
   --------------------------------------------------------------------------- */
body { overflow-wrap: break-word; }

/* A phone held sideways has almost no height; a 90vh hero would fill it with
   nothing but the headline and hide the button below the fold. */
@media (max-height: 560px) and (orientation: landscape) {
	.mz-hero {
		min-height: auto;
		padding-block: clamp(5.25rem, 19vh, 6.5rem) 1.25rem;
	}
	/* A 360px-tall screen cannot afford a 58px logo AND four lines of hero
	   above the button, so the masthead shrinks and the hero keeps its CTA. */
	.mz-masthead { padding-block: 12px; }
	.mz-masthead__logo { font-size: 1.5rem; }
	/* Keep the call to action above the fold without letting the headline
	   run up under the menu bar. */
	.mz-hero__copy { --mz-h1: clamp(1.75rem, 1.1rem + 2.4vw, 2.5rem); }
	.mz-hero__cta { margin-top: 0.9rem; }
	.mz-hero__lede { margin-block: 1.2rem 0; font-size: 1rem; }
	.mz-hero__watermark { font-size: 14rem; }
}

/* The smallest phones still in use (320x568). Without this the headline runs
   to five lines and pushes the call to action off the first screen. */
@media (max-width: 360px) {
	.mz-hero { padding-block: clamp(5.5rem, 13vh, 7rem) 2rem; }
	.mz-hero__cta { margin-top: 1.5rem; }
	.mz-hero__lede { margin-block: 2rem 0; font-size: 1.0625rem; }
}

@media (max-width: 560px) {
	.mz-masthead__logo { font-size: 1.75rem; }
	.mz-navtoggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.mz-nav { inset-inline-start: 0; min-width: 13rem; }
	.mz-btn { display: block; text-align: center; }
	.mz-hero__cta .mz-btn { display: inline-block; }
}

/* --- The content pages ------------------------------------------------------
   A slim peach band carrying the title, then prose on white. The landing keeps
   the tall hero to itself; these are pages you read.
   --------------------------------------------------------------------------- */
.mz-pagehead {
	background: var(--mz-peach);
	background-image: radial-gradient(120% 140% at 85% 0%, var(--mz-peach-deep) 0%, transparent 65%);
	padding-block: clamp(7rem, 16vh, 10rem) clamp(2.5rem, 6vw, 4rem);
}
.mz-pagehead h1 {
	font-size: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
	letter-spacing: -0.02em;
}
.mz-pagehead__stand {
	margin: clamp(0.85rem, 2vw, 1.25rem) 0 0;
	max-width: 46rem;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
	color: var(--mz-ink-soft);
}

.mz-prose { background: var(--mz-ground); padding-block: clamp(3.5rem, 8vw, 6rem); }
.mz-prose--tint { background: var(--mz-peach); }
/* Left, not centred: every band on the site starts on the same gutter. */
.mz-prose__narrow { max-width: 46rem; }
.mz-prose h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem); margin-bottom: 1rem; }
.mz-prose p { margin: 0 0 1.15rem; }
.mz-prose p:last-child { margin-bottom: 0; }

.mz-cards { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .mz-cards { grid-template-columns: 1fr 1fr; } }
.mz-card__kicker {
	display: block; font-family: var(--mz-display); font-weight: 700;
	font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--mz-red); margin-bottom: 0.6rem;
}

.mz-note {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--mz-rule);
	max-width: 52rem; color: var(--mz-ink-soft);
}

/* --- "What are you?" -------------------------------------------------------
   Four audiences on the landing page, because the objection it answers is a
   landing-page objection: that Monza is not for real app development.
   --------------------------------------------------------------------------- */
/* Needs to out-specify `.mz-prose h2 { margin-bottom: 1rem }` — the SECOND
   time a one-class rule here has silently lost to a class+element one, and
   both times it was only visible as a measurement. */
.mz-prose .mz-audience__title { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Each audience sits on its own panel: four statements read as four things
   rather than one column of prose, and the red cap ties them to the accents
   the rest of the page uses (the "?" and the formula's operators). */
.mz-cards--panels { gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.mz-cards--panels .mz-card {
	position: relative;
	background: var(--mz-ground);
	border-radius: var(--mz-radius);
	padding: clamp(1.5rem, 3vw, 2rem);
	/* The cap is 6px, so the top padding gains 6 to keep the inner space equal
	   on all four sides — the rule sits INSIDE the panel, not above it. */
	padding-top: calc(clamp(1.5rem, 3vw, 2rem) + 6px);
	/* Two layers: a tight one that seats the panel on the ground, and a wide
	   soft one that lifts it. A single blur reads as haze rather than height. */
	box-shadow: 0 2px 4px rgba(60, 61, 61, 0.10), 0 10px 28px rgba(60, 61, 61, 0.18);
	overflow: hidden;
}
.mz-cards--panels .mz-card::before {
	content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
	height: 6px; background: var(--mz-red);
}
/* Set in caps by CSS, not typed in caps: the source stays sentence case, so
   what a screen reader announces and what a search result shows are still
   ordinary words. Caps need a little tracking or they set too tight. */
.mz-cards--panels .mz-card h2,
.mz-cards--panels .mz-card h3 {
	font-family: var(--mz-display); font-weight: 700;
	font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
	text-transform: uppercase; letter-spacing: 0.05em;
	margin: 0 0 0.7rem;
}
.mz-cards--panels .mz-card p { color: var(--mz-ink-soft); }
.mz-cards--panels .mz-card p:last-child { margin-bottom: 0; }
/* ⭐ NO RULE. This closed the peach band under a 1px grey line; it is now the
   first thing on the ground band below it, and a change of background separates
   two things better than a hairline drawn across one. */
.mz-audience__close { max-width: 52rem; }
.mz-audience__close p { color: var(--mz-ink-soft); }
.mz-audience__close strong { color: var(--mz-ink); }
.mz-textlink {
	font-family: var(--mz-display); font-weight: 700; font-size: 0.95rem;
	color: var(--mz-ink); text-decoration: none;
	border-bottom: 2px solid var(--mz-red); padding-bottom: 2px;
}
.mz-textlink:hover, .mz-textlink:focus-visible { color: var(--mz-red); }

.mz-footer__legalnav { display: flex; gap: 1.5rem; margin-bottom: 0.75rem; }
.mz-footer__legalnav a {
	font-family: var(--mz-display); font-weight: 700; font-size: 0.85rem;
	color: var(--mz-warm-grey); text-decoration: none;
}
.mz-footer__legalnav a:hover, .mz-footer__legalnav a:focus-visible { color: var(--mz-white); }