/* =============================================================================
 * Current Draw — currentdraw.app
 * UpLate Garage design system + site styles.
 *
 * Dark-first zinc, one earned accent — and that accent is the GAME's, not the
 * studio's. This reverses an earlier decision to dress the site in UpLate
 * Garage yellow "for contrast". design.md is the source of truth and it names
 * #45e3b0 (--copper-bright) the default accent, recoloured per tier at runtime
 * (12V mint / 48V amber / 400V red). A product now on the App Store
 * should lead with its own identity; the studio's yellow now appears only where
 * the parent is actually being credited.
 *
 * Never place the accent on a light surface — mint-on-white fails contrast just
 * as the yellow did.
 *
 * Fonts are self-hosted — no third-party requests anywhere on this site.
 * ========================================================================== */

/* ── Webfonts ───────────────────────────────────────────────────────────────
   Both faces are variable (fvar), so one declaration per unicode-range covers
   the whole weight axis. Non-latin ranges are declared but never fetched for
   English copy — unicode-range gates the download.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("assets/fonts/jetbrains-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("assets/fonts/jetbrains-mono-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("assets/fonts/jetbrains-mono-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("assets/fonts/jetbrains-mono-greek.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("assets/fonts/jetbrains-mono-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("assets/fonts/jetbrains-mono-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("assets/fonts/space-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("assets/fonts/space-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("assets/fonts/space-grotesk-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* ── Color system ───────────────────────────────────────────────────────────
   Dark-first. The zinc scale is the structure; the 12V mint is the single
   accent. "Dark, never black" — the page background is zinc-950, not #000.
   Mint-on-white fails: never place the accent on a light surface. Translucent
   accent reads rgba(var(--accent-rgb), a) so nothing re-states the colour.
   ------------------------------------------------------------------------ */
:root {
  color-scheme: dark;

  /* Brand ---------------------------------------------------------------
     Current Draw is a UpLate Garage app, but it is not the studio. The
     studio's yellow is kept for parent attribution only (the footer line,
     the "A UpLate Garage app" mark). The product's own accent is the 12V
     net — the colour the game actually starts in, and the one the board
     already glows with. Chrome reads var(--accent), never the yellow. */
  --brand-yellow: #eab308;      /* studio yellow — parent attribution only */
  --brand-yellow-hi: #fbbf24;
  --brand-yellow-lo: #ca8a04;
  --brand-black: #09090b;       /* zinc-950 — the icon tile, "dark base" */

  --cd-mint:    #45e3b0;        /* 12V net — the product's accent          */
  --cd-mint-hi: #6bf0c6;        /* hover / lit rim                         */
  --cd-mint-lo: #2bbd8f;        /* press / shadow side                     */
  /* Channels, so glows and washes can carry an alpha without re-stating the
     colour. Anything translucent-accent reads rgba(var(--accent-rgb), a). */
  --cd-mint-rgb: 69, 227, 176;

  /* Zinc neutral scale ------------------------------------------------- */
  --zinc-50:  #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  /* Semantic — surfaces ------------------------------------------------ */
  --bg-base:      var(--zinc-950);
  --bg-raised:    var(--zinc-900);
  --surface-card: var(--zinc-900);
  --surface-hover:var(--zinc-800);
  --surface-inset:#050506;

  /* Semantic — text ---------------------------------------------------- */
  --text-strong: var(--zinc-50);
  --text-body:   var(--zinc-300);
  --text-muted:  var(--zinc-400);
  --text-faint:  var(--zinc-500);
  --text-on-accent: var(--zinc-950);

  /* Semantic — lines --------------------------------------------------- */
  --border:        var(--zinc-800);
  --border-strong: var(--zinc-700);

  /* Accent aliases ----------------------------------------------------- */
  --accent:       var(--cd-mint);
  --accent-hover: var(--cd-mint-hi);
  --accent-press: var(--cd-mint-lo);
  --accent-text:  var(--cd-mint);
  --accent-rgb:   var(--cd-mint-rgb);
  --focus-ring:   var(--cd-mint);

  /* Status ------------------------------------------------------------- */
  --success: #22c55e;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #38bdf8;

  /* Net colours — the game's component identity, quoted on this site
     only as swatches and tier accents (design.md §1). ------------------- */
  --net-cyan:    #45e3e0;
  --net-amber:   #ffb347;
  --net-magenta: #ff5fa8;
  --net-lime:    #9bff5f;
  --net-violet:  #b487ff;
  --tier-12v:    #45e3b0;
  --tier-48v:    #ffb347;
  --tier-400v:   #ff5a52;
}

/* ── Typography ─────────────────────────────────────────────────────────────
   Two families: a geometric grotesk for everything you read, a mono for
   everything that ticks. Tabular numbers on anything numeric.
   ------------------------------------------------------------------------ */
:root {
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-ui:      'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-base:16px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 48px;
  --text-5xl: 64px;
  --text-6xl: 84px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-caps:   0.14em;
}

/* ── Spacing, radius, sizing ────────────────────────────────────────────────
   4px base grid. Touch targets never below 44px.
   ------------------------------------------------------------------------ */
:root {
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;  --space-4:  16px;
  --space-5:  20px;  --space-6:  24px;  --space-8:  32px;  --space-10: 40px;
  --space-12: 48px;  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;
  --space-32: 128px;

  /* Radius — the mark is all hard angles, so the system stays crisp. */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;   /* only for dots and status pips */

  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --tap-min:    44px;

  --container: 1120px;
  --gutter:    24px;

  --header-h:  64px;
  --section-y: 96px;
}

/* ── Elevation, glow, motion ────────────────────────────────────────────────
   On a dark base, elevation reads through borders + deep shadows, not lighter
   fills. "Glow is earned": yellow glow marks active/prestige states only.
   ------------------------------------------------------------------------ */
:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
  --shadow-xl: 0 24px 64px rgba(0,0,0,.6);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.03), inset 0 0 0 1px rgba(0,0,0,.3);

  --glow-accent:      0 0 0 1px rgba(var(--accent-rgb),.5), 0 0 20px rgba(var(--accent-rgb),.28);
  --glow-accent-soft: 0 0 24px rgba(var(--accent-rgb),.18);

  --ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--focus-ring);

  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-pop:      cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}

/* ══ Base ═══════════════════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); }
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

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

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: rgba(var(--accent-rgb),.26); color: var(--zinc-50); }

/* Skip link — keyboard users shouldn't have to tab the whole nav. */
.mc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--text-on-accent);
  font: var(--fw-semibold) var(--text-sm)/1 var(--font-ui);
  padding: 12px 18px; border-radius: 0 0 var(--radius-md) 0;
}
.mc-skip:focus { left: 0; color: var(--text-on-accent); }

.mc-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ══ Design-system primitives ═══════════════════════════════════════════════ */

/* Eyebrow / kicker — the studio's all-caps mono label */
.ulg-eyebrow {
  display: inline-block;
  font: var(--fw-medium) var(--text-xs)/1 var(--font-mono);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}
.ulg-eyebrow--accent { color: var(--accent-text); }

/* Button — yellow is the single earned accent; one primary per view. */
.ulg-btn {
  --h: 40px; --px: 16px; --fs: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 var(--px);
  font-family: var(--font-ui); font-weight: var(--fw-semibold);
  font-size: var(--fs); line-height: 1; letter-spacing: -.01em;
  border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-instant) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.ulg-btn:active { transform: translateY(1px); }
.ulg-btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.ulg-btn--sm { --h: 32px; --px: 12px; --fs: 13px; }
.ulg-btn--lg { --h: 48px; --px: 22px; --fs: 15px; }
.ulg-btn--primary { background: var(--accent); color: var(--text-on-accent); }
.ulg-btn--primary:hover:not([disabled]) { background: var(--accent-hover); color: var(--text-on-accent); box-shadow: var(--glow-accent-soft); }
.ulg-btn--primary:active:not([disabled]) { background: var(--accent-press); }
.ulg-btn--secondary { background: var(--zinc-800); color: var(--text-strong); border-color: var(--border-strong); }
.ulg-btn--secondary:hover:not([disabled]) { background: var(--zinc-700); color: var(--text-strong); }
.ulg-btn--ghost { background: transparent; color: var(--text-body); border-color: var(--border); }
.ulg-btn--ghost:hover:not([disabled]) { background: var(--surface-hover); color: var(--text-strong); }
.ulg-btn__icon { display: inline-flex; width: 1.1em; height: 1.1em; flex: none; }
.ulg-btn__icon svg { width: 100%; height: 100%; }

/* Card — the surface primitive. */
.ulg-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  color: var(--text-body);
  padding: var(--space-6);
}
.ulg-card--flush { padding: 0; }
.ulg-card--inset { background: var(--surface-inset); box-shadow: var(--shadow-inset); }

/* Stat — mono digits for anything that ticks. */
.ulg-stat { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-ui); }
.ulg-stat__label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint);
}
.ulg-stat__value {
  font-family: var(--font-mono); font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums; color: var(--text-strong);
  font-size: var(--text-3xl); line-height: 1; letter-spacing: -.01em;
}
.ulg-stat__value--accent { color: var(--accent); }
.ulg-stat__unit { font-family: var(--font-mono); font-size: .5em; color: var(--text-faint); }

/* Chip — a mono pill. Optional leading swatch via .mc-swatch. */
.mc-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .06em;
  color: var(--text-body); background: var(--zinc-900);
  border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 8px 13px;
}
.mc-chip--solid { background: var(--zinc-800); }
.mc-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; background: currentColor; }
.mc-chiprow { display: flex; gap: 10px; flex-wrap: wrap; }

/* Status pill — the pulsing live marker. Since launch it is also the one
   download link present on every page, including 404, so it carries link
   states as well as the dot. */
.mc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .02em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: var(--radius-sm); white-space: nowrap;
  text-decoration: none;
}
.mc-pill--live {
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.mc-pill--live:hover {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}
.mc-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor; animation: mcPulse 2.4s ease-in-out infinite;
}
.mc-dot--lg { width: 7px; height: 7px; box-shadow: 0 0 10px currentColor; }

@keyframes mcPulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } }

/* ══ Section rhythm ═════════════════════════════════════════════════════════ */

.mc-section { padding: var(--section-y) var(--gutter); border-top: 1px solid var(--border); }
.mc-section--alt { background: var(--zinc-950); }
.mc-section--first { border-top: 0; }

.mc-h2 {
  margin: var(--space-4) 0 0;
  font: var(--fw-bold) clamp(1.8rem, 4vw, 2.7rem)/1.08 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.mc-lede {
  margin: var(--space-4) 0 0;
  font-size: 1.1rem; line-height: 1.6; color: var(--text-body);
  max-width: 60ch;
}

/* ══ Header ═════════════════════════════════════════════════════════════════ */

.mc-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(9, 9, 11, .72);
  border-bottom: 1px solid var(--border);
}
.mc-header__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.mc-brand { display: flex; align-items: center; gap: 10px; color: var(--text-strong); }
.mc-brand:hover { color: var(--text-strong); }
.mc-brand__mark { display: block; flex: none; filter: drop-shadow(0 0 8px rgba(var(--accent-rgb),.35)); }
.mc-brand__name { font: var(--fw-bold) 17px/1 var(--font-display); letter-spacing: -.01em; }

/* `min-width: 0` used to sit here. It let the nav shrink below its content
   while every link is `nowrap`, so instead of shedding cleanly the last item
   — Privacy — was squeezed out of the header with nothing to show for it.
   The nav now holds its content width and sheds in the ordered steps below. */
.mc-nav {
  display: flex; align-items: center; gap: 26px; flex: 0 1 auto;
  font-family: var(--font-ui); font-size: var(--text-sm);
}
/* Support, Privacy and Accessibility are the links Apple expects to find, so
   they are the last things to go — the in-page anchors shed around them. */
.mc-nav a:not(.mc-nav__sec) { flex: none; }
/* A label must never break mid-phrase. The header is a fixed 64px, so a nav item
   wrapping to two lines does not make the header taller — it spills out of it. */
.mc-nav a { white-space: nowrap; }
.mc-nav a { color: var(--text-muted); transition: color var(--dur-fast) var(--ease-standard); }
.mc-nav a:hover { color: var(--text-strong); }
/* The page you're on shouldn't only be marked for screen readers. */
.mc-nav a[aria-current="page"] { color: var(--text-strong); }

/* ══ Hero ═══════════════════════════════════════════════════════════════════

   The hero is the site's own section pattern at full scale — eyebrow, one
   declarative line, then the subject in a framed board. It reuses
   .mc-demo__frame rather than restating it, so the live board here and the
   still capture at #demo are visibly the same object.

   What was here before: a full-bleed board behind a scrim, with the copy
   floating on top. Every variant of that needed the board darkened to stay
   legible, which meant hiding the best thing on the page. Framing it instead
   removes the conflict entirely — nothing overlaps, so nothing needs a wash.
   ═══════════════════════════════════════════════════════════════════════════ */

.mc-hero {
  padding: clamp(48px, 7vw, 84px) var(--gutter) var(--section-y);
  border-bottom: 1px solid var(--border);
}
.mc-hero__title {
  margin: var(--space-4) 0 0;
  font: var(--fw-bold) clamp(2.6rem, 6.6vw, 4.4rem)/.96 var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.mc-hero__lede { max-width: 54ch; }
.mc-hero__cta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 20px; margin-top: var(--space-6);
}
.mc-hero__quiet {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong); padding-bottom: 3px;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.mc-hero__quiet:hover { color: var(--text-strong); border-color: var(--accent); }

.mc-hero__chips { margin-top: var(--space-5); }

/* The board as a surface. Negative gutter margins let it out of the section's
   own padding — no 100vw, which would overflow by the width of a scrollbar.
   aspect-ratio reserves the band before the shot decodes, and object-position
   holds the busy middle of the run rather than the empty top third. */
.mc-hero__bleed {
  position: relative;
  overflow: hidden;
  background: var(--surface-inset);
  /* The capture is 1600px wide. Past that it upscales and goes soft, so the
     band stops bleeding at the source's own width and centres instead — a
     slightly inset board beats a blurry one. Below 1600 it bleeds edge to
     edge, which is every phone and most laptops. */
  max-width: 1600px;
  margin: clamp(36px, 5vw, 60px) auto 0;
  /* 21/8 cut 45% of the board away. 2/1 keeps the band cinematic but shows
     nearly three-quarters of the run. */
  aspect-ratio: 2 / 1;
}
@media (max-width: 1600px) {
  .mc-hero__bleed { max-width: none; margin-inline: calc(-1 * var(--gutter)); }
}
.mc-hero__shot {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
}
/* Bleed into the page rather than stopping at a hard edge, so it reads as the
   page's own surface and not a pasted rectangle. */
.mc-hero__bleed::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 42%; z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9,9,11,0), var(--bg-base));
}
@media (max-width: 760px) { .mc-hero__bleed { aspect-ratio: 4 / 3; } }  /* mobile already reads well — unchanged */

/* ── Motion ───────────────────────────────────────────────────────────────
   Every from-state below is armed only once js/motion.js sets its flag on
   <html>. With JS off — or the file 404ing — none of these selectors match and
   the page is simply complete. Content is revealed, never withheld. */
[data-motion="on"] [data-rise] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease-standard), transform .7s var(--ease-standard);
}
[data-motion="on"] [data-rise][data-shown] { opacity: 1; transform: none; }

/* ── Skeletons ────────────────────────────────────────────────────────────
   Every shot on this page is a real capture at 1600px or a 512px tile, so on
   a slow connection the reserved box sat empty and dark. A skeleton fills it
   with something deliberate, then hands over to the image.

   Armed by [data-skel-on], which motion.js sets even under reduced motion —
   the placeholder is layout, not decoration. Reduced motion drops the sweep
   below, not the skeleton. */
[data-skel-on] [data-skel] { position: relative; overflow: hidden; }
[data-skel-on] [data-skel]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(69,227,176,0) 20%,
      rgba(69,227,176,.07) 42%,
      rgba(69,227,176,0) 64%) var(--skel-x, -140%) 0 / 240% 100% no-repeat,
    var(--surface-inset);
  animation: mcSkel 1.5s var(--ease-standard) infinite;
  transition: opacity .45s var(--ease-standard);
}
[data-skel-on] [data-skel][data-ready]::after { opacity: 0; animation: none; }
[data-skel-on] [data-skel] img { opacity: 0; transition: opacity .5s var(--ease-standard); }
[data-skel-on] [data-skel][data-ready] img { opacity: 1; }
@keyframes mcSkel { from { background-position: -140% 0, 0 0; }
                    to   { background-position:  240% 0, 0 0; } }

@media (prefers-reduced-motion: reduce) {
  [data-motion="on"] [data-rise] { opacity: 1; transform: none; transition: none; }
  /* Keep the placeholder, drop the sweep and the fade. */
  [data-skel-on] [data-skel]::after { animation: none; transition: none; }
  [data-skel-on] [data-skel] img { transition: none; }
}

/* ══ Ticker ═════════════════════════════════════════════════════════════════ */

.mc-ticker {
  overflow: hidden; border-bottom: 1px solid var(--border);
  background: var(--zinc-950); white-space: nowrap;
}
.mc-ticker__track { display: inline-flex; animation: mcTicker 38s linear infinite; will-change: transform; }
.mc-ticker__row {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); padding: 14px 0;
}
.mc-ticker__row span { padding: 0 22px; }
.mc-ticker__row i { color: var(--accent); font-style: normal; }

@keyframes mcTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ══ How it plays ═══════════════════════════════════════════════════════════ */

.mc-grid { display: grid; gap: 16px; }
/* Six steps in a fixed 3×2, not auto-fit. auto-fit with a 210px floor packed
   five cards onto one row at full width and left a lone orphan below; pinning
   three columns keeps the rows even and gives each card ~1.7× the width, so
   the copy no longer sets in a narrow ribbon. */
.mc-grid--steps  { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .mc-grid--steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .mc-grid--steps { grid-template-columns: 1fr; } }
.mc-grid--notes  { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.mc-grid--tiers  { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.mc-grid--shots  { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.mc-grid--stats  { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 32px; }
.mc-grid--split  { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; }

.mc-step__num {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .18em; color: var(--accent);
}
.mc-step h3, .mc-note h3 {
  margin: 10px 0 8px;
  font: var(--fw-semibold) 1.2rem/1.2 var(--font-display);
  color: var(--text-strong);
}
.mc-step p, .mc-note p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--text-muted); }
.mc-note h3 { margin-top: 0; font-size: 1.12rem; }
.mc-note__icon { display: block; margin-bottom: 14px; }

.mc-statband {
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}
/* "Nets · kinds · tiers" needs two lines at most widths; reserving that much
   for every label keeps the six values sitting on one line together. */
.mc-statband .ulg-stat { justify-content: flex-end; }
.mc-statband .ulg-stat__label { min-height: 2em; }

/* ══ The board ══════════════════════════════════════════════════════════════ */

.mc-demo__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap; margin-bottom: 28px;
}
/* The one green surface on the site — the game's own board, framed. */
.mc-demo__frame {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl), 0 0 60px -24px rgba(69,227,176,.35);
  background: #04130d;
}
.mc-demo__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(69,227,176,.14);
  background: rgba(6,26,19,.6);
}
.mc-demo__light { width: 11px; height: 11px; border-radius: 50%; flex: none; background: currentColor; }
.mc-demo__label {
  margin-left: 8px; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .1em; color: #5f9d87;
}
figure.mc-demo__frame { margin: 0; }
.mc-demo__shot { display: block; width: 100%; height: auto; }
.mc-demo__foot {
  margin: 14px 2px 0;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint);
}

/* ══ Voltage tiers ══════════════════════════════════════════════════════════ */

.mc-tier {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mc-tier__rail { height: 3px; background: currentColor; box-shadow: 0 0 16px currentColor; }
.mc-tier__body { padding: 26px 24px; }
.mc-tier__volts {
  font: var(--fw-bold) 2.4rem/1 var(--font-mono);
  letter-spacing: -.01em;
  color: currentColor;
}
.mc-tier__name {
  margin-top: 8px;
  font: var(--fw-semibold) .95rem/1.2 var(--font-display);
  color: var(--text-strong);
}
.mc-tier__body p { margin: 10px 0 16px; font-size: .92rem; line-height: 1.5; color: var(--text-muted); }
.mc-tier__meta {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint);
  border-top: 1px solid var(--border); padding-top: 12px;
}
.mc-tier--12v  { color: var(--tier-12v); }
.mc-tier--48v  { color: var(--tier-48v); }
.mc-tier--400v { color: var(--tier-400v); }
.mc-tier--12v  .mc-tier__volts { text-shadow: 0 0 22px rgba(69,227,176,.5); }
.mc-tier--48v  .mc-tier__volts { text-shadow: 0 0 22px rgba(255,179,71,.5); }
.mc-tier--400v .mc-tier__volts { text-shadow: 0 0 22px rgba(255,90,82,.5); }

/* ══ Game Center gallery ════════════════════════════════════════════════════ */

.mc-grouplabel {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 14px;
}
.mc-shot {
  margin: 0;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.mc-shot img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.mc-shot figcaption {
  padding: 9px 12px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted);
  border-top: 1px solid var(--border);
}

/* ══ Board finishes ═════════════════════════════════════════════════════════ */

.mc-finish { display: grid; gap: clamp(22px, 3vw, 36px); align-items: start; }
@media (min-width: 940px) {
  .mc-finish { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
.mc-finish__stage { min-width: 0; }

/* Framed like the board still above, but neutral: the frame must not tint a finish. */
.mc-finish__frame {
  position: relative;
  aspect-ratio: var(--finish-ratio, 1.4515);   /* set by make-finish-shots.py output */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--surface-inset);
}

/* The four captures are stacked. `visibility` (not `display`) hides the inactive
   ones: it takes them out of the accessibility tree so a screen reader reads one
   board rather than four, while still letting the browser fetch them, which
   `display: none` would defer.
   ⚠ DO NOT ADD A TRANSITION HERE. These are driven by `:has(input:checked)`
   below, and this browser does not reliably re-evaluate `:has()` when a radio's
   checked state changes: the selector stops matching — `stage.matches(...)`
   returns false — while the *transitioned* property keeps its stale computed
   value, so every finish you visit stays visible and you end up with all four at
   once. Forcing a restyle clears it, which is how it was pinned down. Without a
   transition the same selectors are correct on every click. The crossfade this
   used to have is not worth the bug; restoring it needs a different mechanism,
   not a shorter duration. */
.mc-finish__shot {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0; visibility: hidden;
}
/* Fallback if :has() is unavailable — the default finish still shows. */
.mc-finish__shot--soldermask { opacity: 1; visibility: visible; }

.mc-finish__stage:has(input:checked) .mc-finish__shot { opacity: 0; visibility: hidden; }
.mc-finish__stage:has(input[value="soldermask"]:checked) .mc-finish__shot--soldermask,
.mc-finish__stage:has(input[value="bareBoard"]:checked)  .mc-finish__shot--bareBoard,
.mc-finish__stage:has(input[value="blueprint"]:checked)  .mc-finish__shot--blueprint,
.mc-finish__stage:has(input[value="drafting"]:checked)   .mc-finish__shot--drafting {
  opacity: 1; visibility: visible;
}

/* Caption follows the same checked radio — no script anywhere in this section.
   The first rule retracts the no-:has() fallback below, which would otherwise
   leave the Soldermask caption showing alongside the selected one. */
.mc-finish:has(input:checked) .mc-finish__copy > div { display: none; }
.mc-finish:has(input[value="soldermask"]:checked) [data-finish-copy="soldermask"],
.mc-finish:has(input[value="bareBoard"]:checked)  [data-finish-copy="bareBoard"],
.mc-finish:has(input[value="blueprint"]:checked)  [data-finish-copy="blueprint"],
.mc-finish:has(input[value="drafting"]:checked)   [data-finish-copy="drafting"] {
  display: grid;
}


/* ── switcher ──────────────────────────────────────────────────────────────
   Real radios, so arrow keys, focus and screen-reader grouping are free. */
.mc-finish__switch {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 10px; margin: 14px 0 0; padding: 0; border: 0; min-width: 0;
}
.mc-finish__legend {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.mc-finish__opt {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px;
  padding: 10px 12px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  /* ⚠ No transition — see the warning on .mc-finish__shot. `:has(input:checked)`
     below changes border-color and background, and with a transition on those
     the accent never left Soldermask no matter which swatch was clicked. */
}
.mc-finish__opt:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.mc-finish__opt input {
  /* Visually hidden but still rendered, focusable and exposed to assistive tech.
     `opacity: 0` can drop a control out of the accessibility tree; clip-path does not. */
  position: absolute; width: 1px; height: 1px; margin: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.mc-finish__opt:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-card));
}
.mc-finish__opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mc-finish__optname {
  font-size: var(--text-sm); color: var(--text-body); line-height: 1.2;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-finish__opt:has(input:checked) .mc-finish__optname { color: var(--text-strong); }

/* A chip of the board itself: substrate gradient with a conductor across it. */
.mc-finish__swatch {
  width: 30px; height: 22px; flex: none;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.10);
  position: relative; overflow: hidden;
}
.mc-finish__swatch::after {
  content: ""; position: absolute; left: 4px; right: 4px; top: 50%;
  height: 2px; transform: translateY(-50%); border-radius: 2px;
}
.mc-finish__swatch--soldermask { background: radial-gradient(120% 120% at 40% 30%, #0A241A, #04130D); }
.mc-finish__swatch--soldermask::after { background: #1F8F6F; }
.mc-finish__swatch--bareboard  { background: radial-gradient(120% 120% at 40% 30%, #16291A, #0A150E); }
.mc-finish__swatch--bareboard::after  { background: #8A5A2B; }
.mc-finish__swatch--blueprint  { background: radial-gradient(120% 120% at 40% 30%, #123A63, #081D36); }
.mc-finish__swatch--blueprint::after  { background: #E8F1FB; height: 1.5px; }
.mc-finish__swatch--drafting   { background: radial-gradient(120% 120% at 40% 30%, #EDE4D0, #CDBF9F); }
.mc-finish__swatch--drafting::after   { background: #2B3A42; height: 1.5px; }

/* ── free / paid tag ───────────────────────────────────────────────────────── */
.mc-finish__tag {
  flex: none;
  display: inline-flex; align-items: center; height: 19px; padding: 0 7px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-faint);
  background: var(--zinc-900); border: 1px solid var(--border);
  border-radius: 999px; white-space: nowrap;
}
.mc-finish__tag--free {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* ── caption ───────────────────────────────────────────────────────────────── */
/* Hidden by default; the :has() rules above reveal the selected one. Without
   :has(), every caption stays hidden except the one the fallback rule shows. */
.mc-finish__copy > div { display: none; gap: 10px; }
.mc-finish__copy > div[data-finish-copy="soldermask"] { display: grid; }
.mc-finish__name {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0;
  font: var(--fw-bold) 1.4rem/1.15 var(--font-display);
  color: var(--text-strong); letter-spacing: var(--tracking-tight);
}
.mc-finish__copy p { margin: 0; color: var(--text-muted); font-size: 1rem; }
.mc-finish__copy strong { color: var(--text-body); }
.mc-finish__foot {
  margin: clamp(22px, 3vw, 32px) 2px 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: var(--text-sm); max-width: 76ch;
}
.mc-finish__foot strong { color: var(--text-body); }

/* ══ Pricing ════════════════════════════════════════════════════════════════ */

.mc-price {
  position: relative; overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: clamp(28px, 5vw, 52px);
}
.mc-price__wash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 12% 0%, rgba(var(--accent-rgb),.08), transparent 60%);
}
.mc-price__inner { position: relative; }
.mc-price__headline {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: var(--space-4);
}
.mc-price__big {
  font: var(--fw-bold) clamp(2.4rem, 6vw, 3.4rem)/1 var(--font-display);
  color: var(--text-strong); letter-spacing: var(--tracking-tight);
}
.mc-price__sub { font-size: 1.05rem; color: var(--text-muted); max-width: 44ch; }
.mc-price__sub strong { color: var(--text-body); }
.mc-price .mc-chiprow { margin-top: var(--space-6); }

.mc-price__items {
  display: grid; gap: 16px; margin-top: var(--space-7, 34px);
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.mc-price__item {
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px 22px;
}
.mc-price__itemhead {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.mc-price__itemhead h3 {
  margin: 0; font: var(--fw-bold) 1.15rem/1.2 var(--font-display);
  color: var(--text-strong); letter-spacing: var(--tracking-tight);
}
.mc-price__kind {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint);
}
.mc-price__item > p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.mc-price__item strong { color: var(--text-body); }
.mc-price__list {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; gap: 7px;
}
.mc-price__list li {
  position: relative; padding-left: 20px;
  font-size: var(--text-sm); color: var(--text-muted);
}
.mc-price__list li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: .8;
}

.mc-price__cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.mc-price__note {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-faint);
}

/* ══ Support / privacy blurbs ═══════════════════════════════════════════════ */

.mc-blurb h2 {
  margin: var(--space-4) 0 0;
  font: var(--fw-semibold) 1.6rem/1.15 var(--font-display);
  color: var(--text-strong);
}
.mc-blurb p { margin: 14px 0 0; font-size: 1rem; line-height: 1.6; color: var(--text-muted); }
.mc-blurb__mail { font-family: var(--font-mono); font-size: .95rem; border-bottom: 1px solid var(--border); }
.mc-blurb__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); }

/* ══ Footer ═════════════════════════════════════════════════════════════════ */

.mc-footer { border-top: 1px solid var(--border); padding: 40px var(--gutter) 56px; }
.mc-footer__inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center;
}
.mc-footer__links { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint); }
.mc-footer__links a { color: var(--text-muted); }
.mc-footer__links a:hover { color: var(--text-strong); }

/* ══ Document pages (privacy, support, 404) ═════════════════════════════════ */

.mc-doc { max-width: 72ch; margin: 0 auto; padding: 72px var(--gutter) 96px; }
.mc-doc h1 {
  margin: var(--space-4) 0 0;
  font: var(--fw-bold) clamp(2rem, 5vw, 2.8rem)/1.08 var(--font-display);
  letter-spacing: var(--tracking-tight); color: var(--text-strong);
}
.mc-doc h2 {
  margin: 48px 0 0;
  font: var(--fw-semibold) 1.35rem/1.2 var(--font-display);
  color: var(--text-strong);
}
.mc-doc h3 {
  margin: 28px 0 0;
  font: var(--fw-semibold) 1.05rem/1.25 var(--font-display);
  color: var(--text-strong);
}
.mc-doc p, .mc-doc li { font-size: 1rem; line-height: 1.65; color: var(--text-body); }
.mc-doc p { margin: 14px 0 0; }
.mc-doc ul { margin: 14px 0 0; padding-left: 1.2em; }
.mc-doc li { margin-top: 8px; }
.mc-doc li::marker { color: var(--accent); }

/* Tables inside a doc page. Wrapped in their own scroller so a wide one never
   makes the whole page scroll sideways on a phone. */
.mc-table {
  width: 100%; margin: 18px 0 0;
  border-collapse: collapse;
  font-size: var(--text-sm);
  display: block; overflow-x: auto;      /* the scroller */
  -webkit-overflow-scrolling: touch;
}
.mc-table thead th {
  text-align: left; white-space: nowrap;
  padding: 8px 14px 8px 0;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border-strong);
}
.mc-table td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-body); vertical-align: top;
}
.mc-table tbody tr:last-child td { border-bottom: 0; }
.mc-table td:first-child {
  font-family: var(--font-mono); color: var(--text-faint); white-space: nowrap;
}
.mc-doc__lede { font-size: 1.1rem; color: var(--text-body); }
.mc-doc__meta {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint);
}
.mc-doc__back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--text-xs); }

.mc-deflist { margin: 14px 0 0; }
.mc-deflist dt {
  margin-top: 18px;
  font: var(--fw-semibold) 1rem/1.3 var(--font-display); color: var(--text-strong);
}
.mc-deflist dd { margin: 6px 0 0; color: var(--text-muted); line-height: 1.6; }

/* Centred single-message page (404). */
.mc-mid {
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 64px var(--gutter);
}

/* ══ Responsive ═════════════════════════════════════════════════════════════ */

/* Seven items need a tighter gap before the container reaches its max width,
   or the nav wraps to a second line and breaks the 64px header. */
@media (max-width: 1120px) {
  .mc-nav { gap: 16px; }
}

/* Shed the nav in the order things can be reached another way, rather than
   dropping all of it at one breakpoint.
   `.mc-nav__sec` links are in-page anchors — the page scrolls, so losing them
   costs a convenience. The rest are separate pages, and the header is the only
   route to them apart from the footer, so they survive longest. */
/* The section links always come first in the nav, so counting <a> from the
   front only ever lands on them — which keeps these steps working on the home
   page (six section links) and the sub-pages (five) alike. Shedding from the
   back means the doc links get their room before anything is squeezed out. */
@media (max-width: 1080px) {
  .mc-nav__sec:nth-of-type(n+4) { display: none; } /* keep the first three */
}
@media (max-width: 1000px) {
  .mc-nav__sec:nth-of-type(n+2) { display: none; } /* keep "How it plays" */
}
@media (max-width: 940px) {
  .mc-nav__sec { display: none; }                  /* all in-page anchors */
  .mc-nav { gap: 20px; }
}
@media (max-width: 760px) {
  /* Only the three doc links are left by now; close the gap so all three
     still fit beside the wordmark and the pill rather than one dropping off. */
  .mc-nav { gap: 12px; }
}
@media (max-width: 580px) {
  /* Genuinely no room beside the wordmark and the status pill — and the three
     doc links go together or not at all, so none of them is quietly dropped.
     The footer carries Support, Privacy and Accessibility at every width. */
  .mc-nav { display: none; }
}

@media (max-width: 640px) {
  :root { --section-y: 64px; --gutter: 20px; }
  .mc-demo__head { align-items: flex-start; }
  .mc-footer__inner { justify-content: flex-start; }
  .mc-doc { padding-top: 48px; }
}

@media (max-width: 420px) {
  .mc-brand__name { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mc-ticker__track, .mc-dot { animation: none !important; }
}