/* =============================================================================
 * Mini Circuits — minicircuits.app
 * UpLate Garage design system + site styles.
 *
 * Dark-first zinc, one earned yellow accent. Note this is the *studio brand*,
 * deliberately not the game's palette: design.md locks the game to green PCB
 * (#04130d / #45e3b0), and the only green surface on this site is the board
 * inside the demo frame. The contrast is the point.
 *
 * 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; brand yellow is the single
   accent. "Dark, never black" — the page background is zinc-950, not #000.
   Yellow-on-white fails: never place the accent on a light surface.
   ------------------------------------------------------------------------ */
:root {
  color-scheme: dark;

  /* Brand -------------------------------------------------------------- */
  --brand-yellow: #eab308;      /* yellow-500 — the one accent           */
  --brand-yellow-hi: #fbbf24;   /* amber-400 — hover / lit rim           */
  --brand-yellow-lo: #ca8a04;   /* yellow-600 — press / shadow side      */
  --brand-black: #09090b;       /* zinc-950 — the icon tile, "dark base" */

  /* 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(--brand-yellow);
  --accent-hover: var(--brand-yellow-hi);
  --accent-press: var(--brand-yellow-lo);
  --accent-text:  var(--brand-yellow);
  --focus-ring:   var(--brand-yellow);

  /* 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(234,179,8,.5), 0 0 20px rgba(234,179,8,.28);
  --glow-accent-soft: 0 0 24px rgba(234,179,8,.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(234,179,8,.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(--brand-yellow); 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(--brand-yellow); color: var(--text-on-accent); }
.ulg-btn--primary:hover:not([disabled]) { background: var(--brand-yellow-hi); color: var(--text-on-accent); box-shadow: var(--glow-accent-soft); }
.ulg-btn--primary:active:not([disabled]) { background: var(--brand-yellow-lo); }
.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(--brand-yellow); }
.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 "COMING SOON" marker. */
.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(--brand-yellow);
  background: color-mix(in srgb, var(--brand-yellow) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-yellow) 34%, transparent);
  border-radius: var(--radius-sm); white-space: nowrap;
}
.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(234,179,8,.35)); }
.mc-brand__name { font: var(--fw-bold) 17px/1 var(--font-display); letter-spacing: -.01em; }

.mc-nav { display: flex; align-items: center; gap: 26px; font-family: var(--font-ui); font-size: var(--text-sm); }
.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 ═══════════════════════════════════════════════════════════════════ */

.mc-hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.mc-hero__board { position: absolute; inset: 0; z-index: 0; }
/* Two passes: the reference's vertical scrim, plus a gentle left-hand wash so
   the copy column reads cleanly when a trace lights up beneath it. The right
   side stays uncovered — that's where the board is meant to be seen. */
.mc-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9,9,11,.82) 0%, rgba(9,9,11,.66) 30%, rgba(9,9,11,.12) 58%, transparent 74%),
    linear-gradient(180deg, rgba(9,9,11,.55) 0%, transparent 22%, transparent 60%, rgba(9,9,11,.35) 100%);
}
.mc-hero__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--container); margin: 0 auto;
  padding: 0 var(--gutter) 8vh;
}
.mc-hero__copy { max-width: 660px; }
.mc-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--brand-yellow); }
.mc-hero__title {
  display: flex; align-items: center; gap: 18px;
  margin: 22px 0 0;
}
.mc-hero__mark { display: block; flex: none; filter: drop-shadow(0 0 22px rgba(234,179,8,.45)); }
.mc-hero h1 {
  margin: 0;
  font: var(--fw-bold) clamp(3rem, 9vw, 6rem)/.92 var(--font-display);
  letter-spacing: -.03em;
  color: var(--text-strong);
}
.mc-hero__lede {
  margin: 26px 0 0;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.5;
  color: var(--text-body); max-width: 38ch;
  /* The living board runs behind this copy — a soft shadow keeps it legible
     wherever a trace lights up underneath. */
  text-shadow: 0 1px 18px rgba(9,9,11,.9);
}
.mc-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mc-hero__note {
  margin: 24px 0 0;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-faint);
}
.mc-hero .mc-chiprow { margin-top: 22px; }

/* ══ 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(--brand-yellow); font-style: normal; }

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

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

.mc-grid { display: grid; gap: 16px; }
.mc-grid--steps  { grid-template-columns: repeat(auto-fit, minmax(210px, 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(--brand-yellow);
}
.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; }

/* ══ Playable demo ══════════════════════════════════════════════════════════ */

.mc-demo__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap; margin-bottom: 28px;
}
.mc-demo__hint {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted);
  background: var(--zinc-900); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
/* 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;
}
.mc-demo__board { display: block; width: 100%; height: 560px; }
.mc-demo__foot {
  margin: 14px 2px 0;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint);
}
/* Shown only if the board can't run (no JS, no custom elements). */
.mc-demo__fallback { padding: 40px 24px; text-align: center; color: #9fd6c2; }

/* ══ 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);
}

/* ══ 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(234,179,8,.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__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(--brand-yellow); }
.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; }
}

@media (max-width: 940px) {
  /* One-page scroll — the nav is a convenience, not the only route.
     Support and Privacy stay reachable in the footer at every width. */
  .mc-nav { display: none; }
}

@media (max-width: 640px) {
  :root { --section-y: 64px; --gutter: 20px; }
  .mc-hero__title { gap: 12px; }
  .mc-hero__mark { width: 48px; height: 48px; }
  /* Copy runs full-width here, so the left wash has nothing to hide behind.
     Swap to a vertical fade: board on show up top, calm ground under the text. */
  .mc-hero__scrim {
    background: linear-gradient(180deg,
      rgba(9,9,11,.55) 0%, rgba(9,9,11,.24) 18%,
      rgba(9,9,11,.68) 42%, rgba(9,9,11,.88) 72%, rgba(9,9,11,.93) 100%);
  }
  .mc-demo__board { height: 560px; }
  .mc-demo__head { align-items: flex-start; }
  .mc-footer__inner { justify-content: flex-start; }
  .mc-doc { padding-top: 48px; }
}

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

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