/* =========================================================================
   mercury.warren.digital
   Warren Velazquez, Staff Design Operations Program Manager application.

   Built with Mercury's published design language, from values readable in
   their own shipped stylesheet. No Mercury logo, no Arcadia font files, no
   copied code. Inter Tight and Inter stand in for arcadiaDisplay and arcadia.

   Four rules make this read as Mercury. Break any one and it stops:
     1. ALL DARK. mercury.com/command never alternates light and dark. It
        picks one and holds it, separating surfaces with background steps
        and 1px borders.
     2. NO SHADOWS. Elevation is a background step, not a blur.
     3. NO BOLD. Display type sits at 480, never 600 or 700.
     4. THE ACCENT IS RARE. On their own pages #5266eb appears about six
        times, almost always a button. Spend it on the one thing that matters
        per screen.
   ========================================================================= */

:root {
  /* surfaces, darkest to lightest */
  --bg: #10101a;
  --bg-2: #171721;
  --surf: #1e1e2a;
  --surf-2: #272735;
  --line: #afb2ce29;
  --line-2: #afb2ce47;

  /* Mercury's own frosted-surface tokens, read from their shipped stylesheet.
     These are real values, not an invented glass effect: they ship
     --surface-frosted, --border-frosted and --blur-md exactly like this.
     As of v4 these are THE surface treatment for every card and panel on the
     page, not a one-off for the hero quote. */
  --frost: #70739326;
  --frost-2: #7073931a;   /* nested blocks inside a glass card */
  --frost-line: #70739338;
  --frost-line-2: #70739352;
  --blur: 12px;

  /* Light. Gradients are permitted on this page for light only: ambient pools
     behind glass, and beams travelling along a line. Never for a surface fill,
     never for a button, never as brand. */
  --beam: #8fa2ff;

  /* text */
  --tx: #ededf3;
  --tx-2: #c3c3cc;
  --tx-3: #9d9da8;

  /* accent, flat, no gradient */
  --ac: #5266eb;
  --ac-h: #4354c8;
  --ac-a: #3442a6;
  --ac-t: #5266eb2e;
  --pale: #cdddff;

  /* status. Lightened for dark surfaces, and every state also carries a
     non-colour cue so nothing depends on colour vision. */
  --ok: #95d5af;
  --warn: #e3d0a0;
  --bad: #f0a3c4;

  --w-display: 480;

  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 9999px;

  /* Spacing scale. Mercury's own layout gaps run 4 / 8 / 12 / 16 / 32 / 40,
     skipping 24 between 16 and 32. Three padding sizes and three gap sizes,
     and nothing off the scale. Every value below used to be an ad-hoc number
     like 26px or 44px, which is what made the rhythm feel unresolved. */
  --pad-lg: 32px;   /* big cards, panels, the relay panes */
  --pad: 24px;      /* slides, quotes, inner blocks */
  --pad-sm: 16px;   /* bezels, chips, tight interiors */
  --gap: 24px;      /* between sibling cards in a grid */
  --gap-lg: 40px;   /* between blocks inside a section */
  --stack: 16px;    /* between paragraphs */

  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-c: 0.15s;
  --t-m: 0.3s;

  --container: 1200px;
  --measure: 640px;
  --nav-h: 72px;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}

/* The nav is sticky, so every jump target needs clearance. */
[id] { scroll-margin-top: calc(var(--nav-h) + 28px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--tx-2);
  font: 400 16px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { display: block; }

h1, h2, h3, h4 {
  font-family: "Inter Tight", "Inter", sans-serif;
  font-weight: var(--w-display);
  color: var(--tx);
  margin: 0;
}

p, ul, ol, dl, figure, blockquote { margin: 0; }

a { color: var(--pale); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }

:focus-visible { outline: 2px solid var(--pale); outline-offset: 3px; border-radius: var(--r-sm); }

.mc-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ac); color: #fff;
  padding: 12px 20px; border-radius: var(--r); z-index: 200;
}
.mc-skip:focus { left: 12px; top: 12px; }

.mc-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- type ---------- */

.mc-h1 { font-size: clamp(2.25rem, 1.2rem + 4vw, 3.5625rem); line-height: 1.08; }
.mc-h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.625rem); line-height: 1.14; letter-spacing: 0.01em; }
.mc-h3 { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem); line-height: 1.2; letter-spacing: 0.01em; }
.mc-h4 { font-size: 1.3125rem; line-height: 1.25; letter-spacing: 0.01em; }
.mc-h5 { font-size: 1.0625rem; line-height: 1.35; }

.mc-lead { font-size: 1.125rem; font-weight: 350; line-height: 1.5; color: var(--tx-2); }
.mc-body { font-size: 1rem; line-height: 1.6; color: var(--tx-2); }
.mc-body + .mc-body { margin-top: var(--stack); }
.mc-muted { color: var(--tx-3); }
.mc-fine { font-size: 0.8125rem; line-height: 1.6; color: var(--tx-3); }
.mc-cap { font-size: 0.75rem; line-height: 1.5; color: var(--tx-3); margin-top: 12px; }
.mc-cap b { color: var(--tx-2); font-weight: 500; }

.mc-kick {
  font-size: 0.75rem; line-height: 1.4;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tx-3); font-weight: 500; margin: 0 0 14px;
}

.mc-measure { max-width: var(--measure); }
.mc-mt-8 { margin-top: 8px; } .mc-mt-12 { margin-top: 12px; }
.mc-mt-16 { margin-top: 16px; } .mc-mt-32 { margin-top: 32px; } .mc-mt-40 { margin-top: 40px; }

/* ---------- layout ---------- */

.mc-wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* Ambient light per section. Each section gets two soft pools placed
   differently, so the glass has something to catch and the page has depth
   without a single shadow. Positions are set per section below rather than
   repeating, which is what would make it read as wallpaper. */
.mc-sec { padding: 128px 0; position: relative; }
.mc-sec-alt { background: var(--bg-2); }

.mc-sec::before {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(680px 420px at var(--g1x, 14%) var(--g1y, 16%), rgba(82, 102, 235, 0.15), transparent 68%),
    radial-gradient(560px 380px at var(--g2x, 86%) var(--g2y, 84%), rgba(140, 160, 255, 0.08), transparent 70%);
}
.mc-sec > .mc-wrap { position: relative; z-index: 1; }

#ai        { --g1x: 80%; --g1y: 14%; --g2x: 8%;  --g2y: 86%; }
#relay     { --g1x: 12%; --g1y: 22%; --g2x: 90%; --g2y: 78%; }
#tools     { --g1x: 50%; --g1y: 10%; --g2x: 15%; --g2y: 90%; }
#fleet     { --g1x: 88%; --g1y: 20%; --g2x: 20%; --g2y: 85%; }
#thesis    { --g1x: 10%; --g1y: 12%; --g2x: 82%; --g2y: 70%; }
#fit       { --g1x: 76%; --g1y: 18%; --g2x: 18%; --g2y: 88%; }
#adoption  { --g1x: 18%; --g1y: 30%; --g2x: 84%; --g2y: 80%; }
#external  { --g1x: 84%; --g1y: 16%; --g2x: 12%; --g2y: 84%; }
#work      { --g1x: 14%; --g1y: 10%; --g2x: 88%; --g2y: 76%; }
#references{ --g1x: 60%; --g1y: 20%; --g2x: 10%; --g2y: 86%; }
#plan      { --g1x: 20%; --g1y: 14%; --g2x: 80%; --g2y: 82%; }
#contact   { --g1x: 30%; --g1y: 40%; --g2x: 86%; --g2y: 70%; }
.mc-head { margin-bottom: 56px; }
.mc-head .mc-lead { margin-top: 18px; }

@media (max-width: 760px) { .mc-sec { padding: 80px 0; } .mc-head { margin-bottom: 40px; } }

/* ---------- buttons ---------- */

.mc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 22px; border: 0;
  border-radius: var(--r-pill);
  background: var(--ac); color: #fff;
  font: 500 16px/1 "Inter", sans-serif;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-c) var(--ease);
}
.mc-btn:hover { background: var(--ac-h); color: #fff; text-decoration: none; }
.mc-btn:active { background: var(--ac-a); }

.mc-btn-ghost {
  background: #afb2ce29; border: 1px solid var(--line-2); color: var(--tx);
}
.mc-btn-ghost:hover { background: var(--ac-t); color: #fff; }

.mc-row-btn { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.mc-circ {
  width: 44px; height: 44px; border-radius: 50%;
  background: #afb2ce29; border: 1px solid var(--line-2);
  color: var(--tx); font-size: 20px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--t-c) var(--ease);
}
.mc-circ:hover { background: var(--ac-t); }
.mc-circ[disabled] { opacity: 0.35; cursor: default; }

/* ---------- nav ---------- */

.mc-nav {
  position: sticky; top: 0; z-index: 99;
  min-height: var(--nav-h);
  background: rgba(16, 16, 26, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.mc-nav-inner { min-height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.mc-logo {
  font-family: "Inter Tight", sans-serif; font-weight: 500; font-size: 1rem;
  letter-spacing: 0.01em; color: var(--tx); text-decoration: none; white-space: nowrap;
}
.mc-logo:hover { color: var(--tx); text-decoration: none; }
.mc-logo span { color: var(--ac); }

.mc-nav-links { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.mc-nav-links a { font-size: 0.875rem; color: var(--tx-3); white-space: nowrap; transition: color var(--t-c) var(--ease); }
.mc-nav-links a:hover { color: var(--tx); text-decoration: none; }

@media (max-width: 1180px) {
  .mc-nav-inner { flex-wrap: wrap; padding-top: 12px; padding-bottom: 4px; }
  .mc-nav-inner > nav { order: 3; width: 100%; }
  .mc-nav-links {
    overflow-x: auto; scroll-snap-type: x proximity; gap: 20px;
    padding: 4px 24px 12px; margin: 0 -24px; scrollbar-width: none;
  }
  .mc-nav-links::-webkit-scrollbar { display: none; }
  .mc-nav-links li { scroll-snap-align: start; flex: none; }
}
@media (max-width: 400px) { .mc-logo { font-size: 0.9375rem; } }

/* ---------- hero ---------- */

.mc-hero { padding: 96px 0 88px; }
.mc-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px; align-items: center;
}
.mc-hero h1 { max-width: 20ch; }
.mc-hero .mc-lead { margin-top: 26px; max-width: 54ch; }
.mc-br { display: none; }

@media (min-width: 1100px) { .mc-br { display: inline; } }
@media (max-width: 900px) {
  .mc-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* The graphic leads on narrow screens, because it explains the headline
     faster than the paragraph under it does. */
  .mc-hero-art { order: -1; max-width: 460px; }
}

.mc-tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: var(--r-pill);
  background: var(--ac-t); border: 1px solid var(--line-2);
  color: var(--tx); font-size: 0.8125rem; margin-bottom: 30px;
}
.mc-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pale); flex: none; }

/* ---------- hero visualisation ----------
   The argument of the whole page in one picture: unstructured work arrives
   from everywhere, passes one review point, and lands as a sequenced plan.
   Movement carries the meaning here, so it is deliberately not decorative:
   the travelling dots are the work, the check mark is the human, and the
   capacity strip is what you can see once the plan exists.               */

.mc-hero-art { margin: 0; }
.mc-viz { width: 100%; height: auto; display: block; overflow: visible; }

.mc-viz-cap {
  margin-top: 18px; font-size: 0.8125rem; line-height: 1.55;
  color: var(--tx-3); max-width: 42ch;
}

/* the mess drifts, slowly and out of sync */
.mc-viz-scatter { transition: transform 0.5s var(--ease-out); will-change: transform; }
.mc-viz-scatter circle { animation: mc-breathe 7s var(--ease) infinite alternate; }
.mc-viz-scatter circle:nth-child(2n) { animation-duration: 9.5s; animation-delay: -2.4s; }
.mc-viz-scatter circle:nth-child(3n) { animation-duration: 12s; animation-delay: -5.1s; }
.mc-viz-scatter circle:nth-child(5n) { animation-duration: 8.2s; animation-delay: -1.3s; }
@keyframes mc-breathe { from { opacity: .28; } to { opacity: .95; } }

.mc-viz-assets rect { animation: mc-float 11s var(--ease) infinite alternate; transform-box: fill-box; transform-origin: center; }
.mc-viz-assets rect:nth-child(2n) { animation-duration: 14s; animation-delay: -4s; }
.mc-viz-assets rect:nth-child(3n) { animation-duration: 9s; animation-delay: -7s; }
@keyframes mc-float {
  from { transform: translate(0, 0) rotate(-2deg); opacity: .5; }
  to   { transform: translate(5px, -7px) rotate(2.5deg); opacity: .95; }
}

/* the streams draw themselves, then hold */
.mc-viz-paths use {
  stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: mc-draw 2.4s var(--ease-out) forwards;
  opacity: .55;
}
.mc-viz-paths use:nth-child(2) { animation-delay: .18s; }
.mc-viz-paths use:nth-child(3) { animation-delay: .36s; }
@keyframes mc-draw { to { stroke-dashoffset: 0; } }

/* Light running down each stream. A short bright dash chased along a very
   long gap reads as a pulse rather than a marching-ants dash.
   The drop-shadow here is the ONE place a shadow is allowed on this page: it
   is a glow on a beam of light, not elevation under a surface. Do not take
   this as licence to shadow a card. */
.mc-viz-pulse use {
  stroke: #8fa2ff;
  stroke-width: 2.2;
  stroke-dasharray: 22 1000;
  filter: drop-shadow(0 0 5px rgba(130, 152, 255, 0.85));
  animation: mc-stream 3.6s linear infinite;
  opacity: 0;
}
.mc-viz-pulse use:nth-child(1) { animation-delay: 1.5s; }
.mc-viz-pulse use:nth-child(2) { animation-delay: 2.1s; animation-duration: 3s; }
.mc-viz-pulse use:nth-child(3) { animation-delay: 1.8s; animation-duration: 4.2s; }
@keyframes mc-stream {
  0%   { stroke-dashoffset: 300; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.mc-viz-lab text { opacity: 0; animation: mc-fade .8s var(--ease-out) 1.1s forwards; }
@keyframes mc-fade { to { opacity: 1; } }

/* work moving along the streams. The dots fade in and out at the ends so
   they do not appear to pop into existence. */
.mc-viz-travel circle { animation: mc-pulse 3.6s linear infinite; }
.mc-viz-travel circle:nth-child(2) { animation-duration: 3.6s; animation-delay: 1.2s; }
.mc-viz-travel circle:nth-child(3) { animation-duration: 3.6s; animation-delay: 2.4s; }
.mc-viz-travel circle:nth-child(4) { animation-duration: 3s; animation-delay: .5s; }
.mc-viz-travel circle:nth-child(5) { animation-duration: 3s; animation-delay: 1.8s; }
.mc-viz-travel circle:nth-child(6) { animation-duration: 4.2s; animation-delay: .9s; }
.mc-viz-travel circle:nth-child(7) { animation-duration: 4.2s; animation-delay: 2.6s; }
@keyframes mc-pulse {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}

/* the review point registers each arrival */
.mc-viz-ping {
  transform-box: fill-box; transform-origin: center;
  animation: mc-ping 1.5s var(--ease-out) infinite;
}
@keyframes mc-ping {
  0%   { transform: scale(1); opacity: .8; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* the plan assembles, one row at a time */
.mc-viz-row { opacity: 0; transform: translateX(-8px); transform-box: view-box; animation: mc-row .6s var(--ease-out) forwards; }
.mc-viz-row.r1 { animation-delay: 1.4s; }
.mc-viz-row.r2 { animation-delay: 1.65s; }
.mc-viz-row.r3 { animation-delay: 1.9s; }
.mc-viz-row.r4 { animation-delay: 2.15s; }
.mc-viz-row.r5 { animation-delay: 2.4s; }
@keyframes mc-row { to { opacity: 1; transform: none; } }

/* The panel registers the arrivals. The border warms and the approved row
   glows, on the same rhythm as the streams, so the two halves of the picture
   feel connected rather than adjacent. */
.mc-viz-plan > rect { animation: mc-panel 3.6s var(--ease) 3.2s infinite; }
@keyframes mc-panel {
  0%, 100% { stroke: #afb2ce47; }
  46%      { stroke: #7085f0; }
}

.mc-viz-row.r3 rect {
  animation: mc-row-glow 3.6s var(--ease) 3.4s infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes mc-row-glow {
  0%, 100% { fill: #5266eb; }
  46%      { fill: #7183ff; }
}

/* The capacity strip. Pressure travels across the twelve weeks rather than
   sitting still, because that is the actual point of a twelve week horizon:
   the hot week is coming, and you can see it before you are standing in it. */
.mc-viz-heat > g {
  cursor: pointer;
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.18s var(--ease-out);
}
/* Every week is always filled. This is capacity, not a progress bar, so there
   is no such thing as an empty week: a week with nothing booked is green, not
   blank. Green for headroom, amber at capacity, red over it. */
/* The stagger lives here rather than in a style attribute on each cell. The
   Content-Security-Policy has no 'unsafe-inline' for styles, so inline custom
   properties are silently dropped in production. Anything positional or
   animated must be expressed in this file. */
.mc-viz-heat rect {
  fill: #6fbf94;
  animation: mc-load 7.2s var(--ease) infinite;
}
.mc-viz-heat > g:nth-child(1) rect  { animation-delay: 0s; }
.mc-viz-heat > g:nth-child(2) rect  { animation-delay: 0.42s; }
.mc-viz-heat > g:nth-child(3) rect  { animation-delay: 0.84s; }
.mc-viz-heat > g:nth-child(4) rect  { animation-delay: 1.26s; }
.mc-viz-heat > g:nth-child(5) rect  { animation-delay: 1.68s; }
.mc-viz-heat > g:nth-child(6) rect  { animation-delay: 2.10s; }
.mc-viz-heat > g:nth-child(7) rect  { animation-delay: 2.52s; }
.mc-viz-heat > g:nth-child(8) rect  { animation-delay: 2.94s; }
.mc-viz-heat > g:nth-child(9) rect  { animation-delay: 3.36s; }
.mc-viz-heat > g:nth-child(10) rect { animation-delay: 3.78s; }
.mc-viz-heat > g:nth-child(11) rect { animation-delay: 4.20s; }
.mc-viz-heat > g:nth-child(12) rect { animation-delay: 4.62s; }
@keyframes mc-load {
  0%, 40%   { fill: #6fbf94; }
  52%       { fill: #d9c489; }
  62%       { fill: #e8789f; }
  72%       { fill: #d9c489; }
  84%, 100% { fill: #6fbf94; }
}

/* Hovering or focusing anywhere in the strip holds the wave still, so you can
   actually read it. This is the interaction, and it is also the reason the
   strip is keyboard reachable. */
.mc-viz-heat:hover rect,
.mc-viz-heat:focus-within rect { animation-play-state: paused; }

.mc-viz-heat > g:hover,
.mc-viz-heat > g:focus-visible { transform: scaleY(1.3); outline: none; }
.mc-viz-heat > g:focus-visible rect { stroke: var(--tx); stroke-width: 1.4; }

/* Everything above is motion, so all of it stops. The SMIL travellers are
   paused separately in app.js, because CSS cannot reach them. */
@media (prefers-reduced-motion: reduce) {
  .mc-viz-scatter circle { animation: none; opacity: .7; }
  .mc-viz-assets rect { animation: none; opacity: .8; }
  .mc-viz-paths use { animation: none; stroke-dashoffset: 0; }
  .mc-viz-lab text { animation: none; opacity: 1; }
  .mc-viz-travel { display: none; }
  .mc-viz-ping { display: none; }
  .mc-viz-pulse { display: none; }
  .mc-viz-row { animation: none; opacity: 1; transform: none; }
  .mc-viz-row.r3 rect { animation: none; fill: #5266eb; }
  .mc-viz-plan > rect { animation: none; }
  /* The wave stops, so the strip freezes on a readable state instead of a
     flat one: three weeks at capacity, one over, the rest with headroom. */
  .mc-viz-heat rect { animation: none; }
  .mc-viz-heat > g:nth-child(7) rect,
  .mc-viz-heat > g:nth-child(8) rect,
  .mc-viz-heat > g:nth-child(10) rect { fill: #d9c489; }
  .mc-viz-heat > g:nth-child(9) rect { fill: #e8789f; }
}

/* Frosted, not bordered. Mercury uses translucent frosted fills over the dark
   canvas for their secondary surfaces, and a quote is exactly the kind of
   thing that should feel like it is floating over the page rather than boxed
   into it. The accent rule on the left is gone: it was doing the job the dots
   now do, and it made the card look like a pull quote in a magazine. */
/* Glass needs something behind it or it is just a translucent rectangle. The
   glow lives on this wrapper rather than on the card itself, because
   backdrop-filter creates a stacking context: a ::before inside the card would
   paint on top of the frosted fill instead of behind it. As a preceding
   sibling context it sits underneath, and the blur actually has something to
   catch. This is the one gradient on the page. It is a pool of light, not a
   brand gradient, and it must not become one. */
.mc-pull-wrap { position: relative; max-width: var(--measure); margin-top: var(--gap-lg); }
.mc-pull-wrap::before {
  content: "";
  position: absolute; inset: -40px -30px -30px -60px;
  pointer-events: none;
  background:
    radial-gradient(220px 150px at 16% 26%, rgba(82, 102, 235, 0.34), transparent 70%),
    radial-gradient(280px 170px at 84% 84%, rgba(140, 160, 255, 0.16), transparent 72%);
  filter: blur(20px);
}

.mc-pull {
  position: relative;
  padding: var(--pad-lg);
  background: var(--frost);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  border: 1px solid var(--frost-line);
  border-radius: var(--r-2xl);
}

/* All three references occupy the same grid cell, so the card is as tall as
   the longest one and nothing jumps as they cross-fade. */
.mc-pull-stage { display: grid; }
.mc-pq {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease-out), visibility 0s linear 0.5s;
}
.mc-pq.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }

.mc-pull blockquote { color: var(--tx); font-size: 1rem; line-height: 1.55; margin-bottom: 14px; }

/* The visible bar is 26x4, but the hit area is 44px tall. A 4px touch target
   is unusable on a phone and fails 2.5.8 besides. */
.mc-pull-dots { display: flex; gap: 4px; margin-top: 10px; margin-left: -6px; }
.mc-pull-dots button {
  width: 38px; height: 44px; padding: 0; border: 0;
  background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mc-pull-dots button::after {
  content: ""; display: block; width: 26px; height: 4px;
  border-radius: var(--r-pill); background: #5d5f77;
  transition: background-color var(--t-c) var(--ease);
}
.mc-pull-dots button:hover::after { background: #8a8ca6; }
.mc-pull-dots button[aria-pressed="true"]::after { background: var(--ac); }
.mc-pull-dots button:focus-visible { outline: 2px solid var(--pale); outline-offset: -4px; border-radius: var(--r); }
.mc-cite-name { color: var(--tx); font-weight: 500; display: block; font-size: 0.875rem; }
.mc-cite-role { color: var(--tx-3); display: block; font-size: 0.875rem; margin-top: 2px; }

.mc-hero .mc-fine { margin-top: 28px; max-width: var(--measure); }

/* ---------- stat strip ---------- */

.mc-strip { background: var(--surf); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--gap-lg) 0; }
.mc-strip-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.mc-stat { padding: 0 var(--pad-lg); border-left: 1px solid var(--line); }
.mc-stat:first-child { padding-left: 0; border-left: 0; }
.mc-stat-fig {
  font-family: "Inter Tight", sans-serif; font-weight: var(--w-display);
  font-size: 1.375rem; line-height: 1.22; letter-spacing: 0.01em; color: var(--tx);
}
.mc-stat-lab { margin-top: 10px; font-size: 0.8125rem; line-height: 1.5; color: var(--tx-3); }

@media (max-width: 900px) {
  .mc-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; }
  .mc-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
  .mc-strip-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .mc-stat { padding-left: 0; border-left: 0; }
}

/* ---------- cards, panels, splits ---------- */

/* ---------- the glass system ----------
   Every card and panel on this page is the same frosted surface. It is not a
   one-off treatment for the hero quote: it is THE surface, and the ambient
   light behind each section is what gives the blur something to catch.

   backdrop-filter is expensive, and thirty of them on a phone is not a trade
   worth making, so below 760px the fill and border stay and the blur drops.
   It still reads as glass because the translucency is doing most of the work. */
.mc-card, .mc-panel, .mc-q, .mc-slide, .mc-relay-pane, .mc-record,
.mc-shot, .mc-squads, .mc-acc, .mc-wcard, .mc-note, .mc-decisions,
.mc-consol-out, .mc-chart {
  background: var(--frost);
  border: 1px solid var(--frost-line);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
}

@media (max-width: 760px) {
  .mc-card, .mc-panel, .mc-q, .mc-slide, .mc-relay-pane, .mc-record,
  .mc-shot, .mc-squads, .mc-acc, .mc-wcard, .mc-note, .mc-decisions,
  .mc-consol-out, .mc-chart {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: #1e1e2acc;
  }
}

/* Blocks nested inside a glass card go one step lighter and never blur again.
   Stacked backdrop filters are both expensive and visually muddy. */
.mc-quotecell, .mc-mail, .mc-steps-inline > div, .mc-cell, .mc-handoff > div,
.mc-consol-in li, .mc-flow li, .mc-relay-tabs label {
  background: var(--frost-2);
}

.mc-card {
  border-radius: var(--r-2xl); padding: var(--pad-lg);
}
.mc-card h3 + .mc-body, .mc-card h4 + .mc-body { margin-top: var(--stack); }
/* A bezel around a framed list, not a second card. The inner block carries
   its own border, so this padding wants to be tight. */
.mc-card-art { padding: var(--pad-sm); display: flex; flex-direction: column; justify-content: center; }

.mc-panel { border-radius: var(--r-2xl); padding: var(--pad-lg); }

.mc-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--r-pill);
  background: var(--ac-t); color: var(--pale);
  font-size: 0.8125rem; font-weight: 500; margin-bottom: 18px;
}

.mc-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: center; }
.mc-split-copy .mc-h3 + .mc-body { margin-top: 16px; }
@media (max-width: 860px) { .mc-split { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.mc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .mc-two { grid-template-columns: minmax(0, 1fr); } }

.mc-note {
  margin-top: var(--gap-lg); padding: var(--pad); max-width: 76ch;
  border-left: 2px solid var(--ac) !important;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  font-size: 1rem; line-height: 1.6; color: var(--tx-2);
}

/* ---------- the propose/confirm flow ---------- */

.mc-flow {
  list-style: none; display: grid; gap: 1px;
  background: var(--frost-line); border: 1px solid var(--frost-line);
  border-radius: var(--r-lg); overflow: hidden;
  position: relative;
}
/* A light runs down the numbers, so the five steps read as one sequence
   rather than five stacked rows. It has to sit above the row fills. */
.mc-flow::after {
  content: ""; position: absolute; left: 27px; z-index: 2;
  width: 5px; height: 5px; margin-left: -2px; border-radius: 50%;
  background: var(--beam);
  filter: drop-shadow(0 0 7px rgba(130, 152, 255, 0.95));
  animation: mc-spine-run 4.5s var(--ease) infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .mc-flow::after { display: none; } }
.mc-flow li { padding: 16px 18px 16px 52px; position: relative; }
.mc-flow-n {
  position: absolute; left: 18px; top: 17px;
  width: 20px; height: 20px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--surf); color: var(--tx-3); font-size: 0.6875rem;
}
.mc-flow b { display: block; color: var(--tx); font-weight: 500; font-size: 0.9375rem; }
.mc-flow span:last-child { color: var(--tx-3); font-size: 0.8125rem; }
.mc-flow-gate { background: var(--ac) !important; }
.mc-flow-gate .mc-flow-n { background: rgba(255,255,255,.22); color: #fff; }
.mc-flow-gate b { color: #fff; }
.mc-flow-gate span:last-child { color: var(--pale); }

/* ---------- comparison ---------- */

/* Warren's four decisions. This replaced a side-by-side table of Vizor against
   Mercury Command, which no matter how it was laid out kept reading as "I built
   the same thing." A comparison cannot be de-emphasised into not being a
   comparison, so the comparison is gone: these are his calls, on his tool, and
   Command is now a single sentence at the end. Do not reintroduce a two-column
   product layout here. */
.mc-decisions {
  margin-top: var(--gap-lg);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: var(--r-2xl); overflow: hidden;
}
/* Dividers as borders rather than a 1px grid gap showing a background through,
   because the container is translucent now and a gap would show the page. */
.mc-decisions article { padding: var(--pad-lg); }
.mc-decisions article:nth-child(odd) { border-right: 1px solid var(--frost-line); }
.mc-decisions article:nth-child(-n+2) { border-bottom: 1px solid var(--frost-line); }
@media (max-width: 760px) {
  .mc-decisions article:nth-child(odd) { border-right: 0; }
  .mc-decisions article:nth-child(-n+3) { border-bottom: 1px solid var(--frost-line); }
}
.mc-dec-n {
  display: block; margin-bottom: 14px;
  font-size: 0.75rem; letter-spacing: 0.1em; color: var(--pale); font-weight: 500;
}
.mc-decisions h3 { margin-bottom: 10px; }
.mc-decisions p { font-size: 0.9375rem; line-height: 1.6; color: var(--tx-2); }

@media (max-width: 760px) { .mc-decisions { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Relay stepper (radio + CSS, no JS) ---------- */

.mc-relay { position: relative; }
.mc-relay-in { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.mc-relay-tabs {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; margin-bottom: 24px;
}
.mc-relay-tabs label {
  background: var(--surf); padding: 16px 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 0.875rem; color: var(--tx-3); cursor: pointer;
  transition: background-color var(--t-c) var(--ease), color var(--t-c) var(--ease);
}
.mc-relay-tabs label:hover { background: var(--surf-2); color: var(--tx); }
.mc-relay-n {
  width: 22px; height: 22px; border-radius: var(--r-pill); flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--surf-2); color: var(--tx-3); font-size: 0.6875rem;
}

/* The radios are visually hidden but keyboard-reachable, so the focus ring
   has to be drawn on the label the reader can actually see. */
.mc-relay-in:nth-of-type(1):focus-visible ~ .mc-relay-tabs label:nth-child(1),
.mc-relay-in:nth-of-type(2):focus-visible ~ .mc-relay-tabs label:nth-child(2),
.mc-relay-in:nth-of-type(3):focus-visible ~ .mc-relay-tabs label:nth-child(3),
.mc-relay-in:nth-of-type(4):focus-visible ~ .mc-relay-tabs label:nth-child(4),
.mc-relay-in:nth-of-type(5):focus-visible ~ .mc-relay-tabs label:nth-child(5),
.mc-relay-in:nth-of-type(6):focus-visible ~ .mc-relay-tabs label:nth-child(6) {
  outline: 2px solid var(--pale); outline-offset: -2px;
}

.mc-relay-in:nth-of-type(1):checked ~ .mc-relay-tabs label:nth-child(1),
.mc-relay-in:nth-of-type(2):checked ~ .mc-relay-tabs label:nth-child(2),
.mc-relay-in:nth-of-type(3):checked ~ .mc-relay-tabs label:nth-child(3),
.mc-relay-in:nth-of-type(4):checked ~ .mc-relay-tabs label:nth-child(4),
.mc-relay-in:nth-of-type(5):checked ~ .mc-relay-tabs label:nth-child(5),
.mc-relay-in:nth-of-type(6):checked ~ .mc-relay-tabs label:nth-child(6) {
  background: var(--surf-2); color: var(--tx);
}
.mc-relay-in:nth-of-type(1):checked ~ .mc-relay-tabs label:nth-child(1) .mc-relay-n,
.mc-relay-in:nth-of-type(2):checked ~ .mc-relay-tabs label:nth-child(2) .mc-relay-n,
.mc-relay-in:nth-of-type(3):checked ~ .mc-relay-tabs label:nth-child(3) .mc-relay-n,
.mc-relay-in:nth-of-type(4):checked ~ .mc-relay-tabs label:nth-child(4) .mc-relay-n,
.mc-relay-in:nth-of-type(5):checked ~ .mc-relay-tabs label:nth-child(5) .mc-relay-n,
.mc-relay-in:nth-of-type(6):checked ~ .mc-relay-tabs label:nth-child(6) .mc-relay-n {
  background: var(--ac); color: #fff;
}

/* No align-items here on purpose. The record card needs its grid area to be
   full height for position:sticky to have anywhere to travel, so the card
   itself uses align-self:start instead. */
.mc-relay-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 900px) {
  .mc-relay-body { grid-template-columns: minmax(0, 1fr); }
  /* A scroll rail beats a 3x2 grid here: the six steps are a sequence, and
     wrapping them onto two rows breaks the left-to-right reading of it. */
  .mc-relay-tabs {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; border-radius: var(--r-lg);
  }
  .mc-relay-tabs::-webkit-scrollbar { display: none; }
  .mc-relay-tabs label { flex: 0 0 auto; scroll-snap-align: start; min-height: 52px; }
}

.mc-relay-panes { position: relative; }
.mc-relay-pane {
  display: none;
  border-radius: var(--r-2xl); padding: var(--pad-lg);
}
.mc-relay-pane h3 + .mc-body { margin-top: var(--stack); }
.mc-relay-in:nth-of-type(1):checked ~ .mc-relay-body #rp1,
.mc-relay-in:nth-of-type(2):checked ~ .mc-relay-body #rp2,
.mc-relay-in:nth-of-type(3):checked ~ .mc-relay-body #rp3,
.mc-relay-in:nth-of-type(4):checked ~ .mc-relay-body #rp4,
.mc-relay-in:nth-of-type(5):checked ~ .mc-relay-body #rp5,
.mc-relay-in:nth-of-type(6):checked ~ .mc-relay-body #rp6 { display: block; }

.mc-sheets { display: flex; gap: 10px; margin-top: 22px; align-items: flex-end; }
.mc-sheets span {
  flex: 1; background: var(--surf-2); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); height: 68px;
}
.mc-sheets span:nth-child(2) { height: 52px; }
.mc-sheets span:nth-child(3) { height: 80px; }
.mc-sheets span:nth-child(4) { height: 44px; }
.mc-sheets span:nth-child(5) { height: 74px; }
.mc-sheets span:nth-child(6) { height: 58px; }

.mc-quotecell, .mc-mail {
  margin-top: 22px; padding: 16px 18px;
  background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.mc-cell-lbl { display: block; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 10px; }
.mc-quotecell p, .mc-mail p { color: var(--tx); font-size: 0.9375rem; line-height: 1.5; }
.mc-chips { display: flex; gap: 8px; margin-top: 14px; }
.mc-chips span {
  font-size: 0.6875rem; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--surf); color: var(--tx-3); border: 1px solid var(--line);
}
.mc-chips span.on { background: var(--ac-t); color: var(--pale); border-color: var(--line-2); }

.mc-norm { list-style: none; margin-top: 22px; }
.mc-norm li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.875rem;
}
.mc-norm li:first-child { border-top: 0; }
.mc-norm span { color: var(--tx-3); }
.mc-norm b { color: var(--pale); font-weight: 500; margin-left: auto; }
.mc-norm .mc-null { color: var(--bad); }
.mc-norm-gap { margin-top: 6px; }

.mc-rank { list-style: none; margin-top: 22px; }
.mc-rank li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 0; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--tx);
}
.mc-rank li:first-child { border-top: 0; }
.mc-rank b { color: var(--tx-3); font-weight: 400; margin-left: auto; font-size: 0.8125rem; }
.mc-rank-t { color: var(--tx); }
.mc-lane {
  font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-sm); flex: none;
}
.mc-lane.now { background: var(--ac); color: #fff; }
.mc-lane.next { background: var(--surf-2); color: var(--tx-2); }
.mc-lane.hold { background: rgba(240,163,196,.16); color: var(--bad); border: 1px solid rgba(240,163,196,.4); }

.mc-handoff { display: flex; align-items: center; gap: 18px; margin-top: 22px; }
.mc-handoff > div { flex: 1; background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }
.mc-handoff p { color: var(--tx); font-size: 0.9375rem; }
.mc-handoff-arrow { color: var(--pale); font-size: 1.25rem; flex: none; }

.mc-record {
  border-radius: var(--r-2xl); padding: var(--pad);
  position: sticky; top: calc(var(--nav-h) + 24px); align-self: start;
}
@media (max-width: 900px) { .mc-record { position: static; } }
.mc-record-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
  font-size: 0.8125rem; color: var(--tx-3);
}
.mc-record-head > span:first-child { color: var(--tx); font-weight: 500; }
.mc-record-n { color: var(--pale); font-weight: 500; }
.mc-record-fields { margin-top: 4px; }
.mc-record-fields .f {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(-3px);
  /* visibility, not just opacity, so a screen reader does not read the rows
     that have not been filled in yet. Otherwise it would announce both the
     missing owner and the resolved owner at the same time. */
  visibility: hidden;
  transition: opacity var(--t-m) var(--ease-out), transform var(--t-m) var(--ease-out),
    visibility 0s linear var(--t-m);
  max-height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; border-bottom-color: transparent;
}
.mc-record-fields dt { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx-3); flex: none; }
.mc-record-fields dd { margin: 0; font-size: 0.875rem; color: var(--tx); text-align: right; }
.mc-record-fields dd.miss { color: var(--bad); }

/* reveal fields cumulatively as the step advances */
.mc-relay-in:nth-of-type(2):checked ~ .mc-relay-body .f2,
.mc-relay-in:nth-of-type(3):checked ~ .mc-relay-body .f2,
.mc-relay-in:nth-of-type(4):checked ~ .mc-relay-body .f2,
.mc-relay-in:nth-of-type(5):checked ~ .mc-relay-body .f2,
.mc-relay-in:nth-of-type(6):checked ~ .mc-relay-body .f2,
.mc-relay-in:nth-of-type(3):checked ~ .mc-relay-body .f3,
.mc-relay-in:nth-of-type(4):checked ~ .mc-relay-body .f3,
.mc-relay-in:nth-of-type(5):checked ~ .mc-relay-body .f3,
.mc-relay-in:nth-of-type(6):checked ~ .mc-relay-body .f3,
.mc-relay-in:nth-of-type(4):checked ~ .mc-relay-body .f4,
.mc-relay-in:nth-of-type(5):checked ~ .mc-relay-body .f4,
.mc-relay-in:nth-of-type(6):checked ~ .mc-relay-body .f4,
.mc-relay-in:nth-of-type(5):checked ~ .mc-relay-body .f5,
.mc-relay-in:nth-of-type(6):checked ~ .mc-relay-body .f5,
.mc-relay-in:nth-of-type(6):checked ~ .mc-relay-body .f6 {
  opacity: 1; transform: none; max-height: 80px; visibility: visible;
  transition-delay: 0s;
  padding-top: 11px; padding-bottom: 11px; border-bottom-color: var(--line);
}
/* the missing-owner row disappears once step 4 fills it */
.mc-relay-in:nth-of-type(4):checked ~ .mc-relay-body .f3.gap,
.mc-relay-in:nth-of-type(5):checked ~ .mc-relay-body .f3.gap,
.mc-relay-in:nth-of-type(6):checked ~ .mc-relay-body .f3.gap {
  opacity: 0; max-height: 0; visibility: hidden;
  padding-top: 0; padding-bottom: 0; border-bottom-color: transparent;
}

.mc-relay-in:nth-of-type(1):checked ~ .mc-relay-body .mc-record-n::after { content: "1"; }
.mc-relay-in:nth-of-type(2):checked ~ .mc-relay-body .mc-record-n::after { content: "2"; }
.mc-relay-in:nth-of-type(3):checked ~ .mc-relay-body .mc-record-n::after { content: "3"; }
.mc-relay-in:nth-of-type(4):checked ~ .mc-relay-body .mc-record-n::after { content: "4"; }
.mc-relay-in:nth-of-type(5):checked ~ .mc-relay-body .mc-record-n::after { content: "5"; }
.mc-relay-in:nth-of-type(6):checked ~ .mc-relay-body .mc-record-n::after { content: "6"; }

/* ---------- carousel ---------- */

.mc-carousel { position: relative; }
.mc-carousel-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, calc(33.333% - 16px));
  gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; scrollbar-width: none;
}
.mc-carousel-track::-webkit-scrollbar { display: none; }
@media (max-width: 1000px) { .mc-carousel-track { grid-auto-columns: minmax(0, calc(50% - 12px)); } }
@media (max-width: 700px) { .mc-carousel-track { grid-auto-columns: minmax(0, 86%); } }

.mc-slide {
  scroll-snap-align: start;
  border-radius: var(--r-2xl); overflow: hidden;
  display: flex; flex-direction: column;
}
.mc-slide-art { background: var(--frost-2); border-bottom: 1px solid var(--frost-line); aspect-ratio: 16 / 10; overflow: hidden; }
.mc-slide-art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mc-slide-art--diagram { display: flex; align-items: center; justify-content: center; padding: 24px; }
.mc-slide-body { padding: var(--pad); }
.mc-slide-body header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.mc-slide-body dt { margin-top: 16px; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pale); font-weight: 500; }
.mc-slide-body dd { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--tx-2); }

.mc-pill { font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--tx-3); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 4px 11px; }

.mc-carousel-ctl { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; }
.mc-carousel-count { font-size: 0.875rem; color: var(--tx-3); }
.mc-carousel-count b { color: var(--tx); font-weight: 500; }
.mc-carousel-btns { display: flex; gap: 10px; }

.mc-mini-funnel { display: grid; grid-template-columns: repeat(3, 26px); gap: 8px; justify-content: center; align-content: center; position: relative; padding-bottom: 54px; }
.mc-mini-funnel span { height: 34px; background: var(--surf); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.mc-mini-funnel span:nth-child(2) { height: 26px; }
.mc-mini-funnel span:nth-child(4) { height: 40px; }
.mc-mini-funnel span:nth-child(5) { height: 28px; }
.mc-mini-funnel i { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 106px; height: 34px; border-radius: var(--r-sm); background: var(--ac); }

/* ---------- fleet screenshots ---------- */

.mc-shot { border-radius: var(--r-2xl); padding: var(--pad-sm); overflow: hidden; }
.mc-shot img { width: 100%; height: auto; border-radius: var(--r-lg); }
.mc-shot figcaption { margin-top: 16px; padding: 0 8px 6px; font-size: 0.8125rem; line-height: 1.55; color: var(--tx-3); }
.mc-shot-inline { padding: 12px; }
.mc-shot-inline img { border-radius: var(--r); }

.mc-squads { display: grid; gap: 12px; margin-top: var(--gap); padding: var(--pad); border-radius: var(--r-2xl); }
.mc-squads > div { font-size: 0.875rem; line-height: 1.6; color: var(--tx-2); }
.mc-squad-n { display: inline-block; min-width: 116px; color: var(--pale); font-weight: 500; }
@media (max-width: 620px) { .mc-squad-n { display: block; min-width: 0; margin-bottom: 2px; } }

/* ---------- thesis ---------- */

.mc-bets { display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-bets > article:last-child { grid-column: 1 / -1; }
@media (max-width: 900px) { .mc-bets { grid-template-columns: minmax(0, 1fr); } }

.mc-chart { margin: var(--gap) 0; padding: var(--pad); border-radius: var(--r-lg); }
.mc-chart figcaption { margin-top: 16px; font-size: 0.75rem; line-height: 1.5; color: var(--tx-3); }
.mc-chart figcaption b { color: var(--tx-2); font-weight: 500; }

.mc-wait { position: relative; padding-bottom: 24px; }
.mc-wait-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) 42px; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 0.75rem; }
.mc-wait-row > span { color: var(--tx-3); }
/* Bar widths in the stylesheet, not inline, for the CSP reason above.
   These are multiples of the typical wait for each stage. */
.mc-wait-row i { display: block; height: 13px; border-radius: var(--r-sm); background: #6f7086; }
.mc-wait-row:nth-child(1) i { width: 29%; }
.mc-wait-row:nth-child(2) i { width: 35%; }
.mc-wait-row:nth-child(3) i { width: 26%; }
.mc-wait-row:nth-child(4) i { width: 97%; }
.mc-wait-row:nth-child(5) i { width: 32%; }
.mc-wait-row b { color: var(--tx-3); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.mc-wait-row.over i { background: var(--warn); }
.mc-wait-row.over > span, .mc-wait-row.over b { color: var(--warn); }
.mc-wait-base { position: absolute; top: 0; bottom: 24px; left: 72px; right: 52px; pointer-events: none; }
.mc-wait-base::before { content: ""; position: absolute; top: -2px; bottom: 0; left: 29%; border-right: 1px dashed var(--tx-3); }
.mc-wait-base span { position: absolute; left: 29%; bottom: -19px; transform: translateX(-50%); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }

.mc-steps-inline { display: grid; gap: 14px; margin: 22px 0; }
.mc-steps-inline > div { padding: 16px 18px; background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.mc-steps-inline b { color: var(--pale); font-weight: 500; display: block; margin-bottom: 4px; }
.mc-steps-inline span { font-size: 0.9375rem; line-height: 1.5; color: var(--tx-2); }

.mc-nots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 32px; }
@media (max-width: 760px) { .mc-nots { grid-template-columns: minmax(0, 1fr); } }
.mc-not p { font-size: 0.9375rem; line-height: 1.55; color: var(--tx-2); margin-top: 8px; }
.mc-not-tag { display: inline-block; font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bad); font-weight: 500; margin-bottom: 8px; }
.mc-not-tag.warn { color: var(--warn); }
.mc-learned { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 32px; }
.mc-learned p { font-size: 0.9375rem; line-height: 1.6; color: var(--tx-2); margin-top: 8px; }

/* ---------- accordion ---------- */

.mc-acc { border-radius: var(--r-2xl); overflow: hidden; }
.mc-acc-group {
  padding: 20px 28px 12px; font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pale); font-weight: 500;
  background: var(--frost-2); border-bottom: 1px solid var(--frost-line);
}
.mc-item { border-bottom: 1px solid var(--frost-line); }
.mc-item:last-child { border-bottom: 0; }
.mc-item summary {
  display: flex; align-items: center; gap: 20px; justify-content: space-between;
  padding: 22px 28px; cursor: pointer; list-style: none;
  transition: background-color var(--t-c) var(--ease);
}
.mc-item summary::-webkit-details-marker { display: none; }
.mc-item summary:hover { background: var(--surf-2); }
.mc-item-t { color: var(--tx); font-size: 1rem; line-height: 1.45; }
.mc-item[open] summary { background: var(--surf-2); }
.mc-item[open] .mc-item-t { color: #fff; }
.mc-item-b { padding: 0 28px 24px; }
.mc-item-b p { font-size: 0.9375rem; line-height: 1.6; color: var(--tx-2); max-width: 78ch; }

.mc-mark { font-size: 0.75rem; padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap; flex: none; }
.mc-mark.met { background: rgba(149,213,175,.14); color: var(--ok); border: 1px solid rgba(149,213,175,.32); }
.mc-mark.part { background: rgba(227,208,160,.14); color: var(--warn); border: 1px solid rgba(227,208,160,.34); }

@media (max-width: 620px) {
  .mc-item summary { flex-wrap: wrap; gap: 12px; padding: 20px; }
  .mc-item-b { padding: 0 20px 20px; }
  .mc-acc-group { padding-left: 20px; padding-right: 20px; }
}

/* ---------- consolidation diagram ---------- */

.mc-consol { display: grid; grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr); gap: 12px; align-items: center; }
.mc-consol-in { list-style: none; display: grid; gap: 6px; }
.mc-consol-in li {
  font-size: 0.75rem; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--surf-2); border: 1px dashed var(--line-2); color: var(--tx-3);
}
.mc-consol-in li.on { border-style: solid; border-color: var(--ac); color: var(--tx); background: var(--ac-t); }
.mc-consol-mid { height: 1px; background: var(--line-2); position: relative; }
.mc-consol-mid::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid var(--line-2); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.mc-consol-out { border-radius: var(--r-lg); padding: var(--pad) 18px; text-align: center; }
.mc-consol-out b { display: block; color: var(--tx); font-size: 1.125rem; font-family: "Inter Tight", sans-serif; font-weight: var(--w-display); }
.mc-consol-out span { display: block; font-size: 0.8125rem; color: var(--tx-3); margin-top: 6px; }
.mc-consol-pct { color: var(--pale) !important; }
@media (max-width: 520px) {
  .mc-consol { grid-template-columns: minmax(0,1fr); }
  .mc-consol-mid { width: 1px; height: 28px; margin: 0 auto; }
  .mc-consol-mid::after { right: -4px; top: auto; bottom: -1px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid var(--line-2); border-bottom: 0; }
}

/* ---------- found / not found ---------- */

.mc-find { list-style: none; }
.mc-find li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px;
  padding: 13px 0; border-top: 1px solid var(--line);
  font-size: 0.9375rem; line-height: 1.5; color: var(--tx-2);
}
.mc-find li:first-child { border-top: 0; padding-top: 16px; }
.mc-find b { color: var(--tx); font-weight: 500; }
.mc-fi { font-weight: 500; line-height: 1.5; }
.mc-fi.yes { color: var(--ok); }
.mc-fi.no { color: var(--bad); }

/* ---------- pulse spine ----------
   A hairline connecting a run of related blocks, with a light travelling down
   it. Used where the order is the point: the ninety day plan, the external
   presence steps, and the career list. The line says "these belong together",
   the light says "this moves".

   The travelling dot is a plain element, not a gradient. Only the glow around
   it is a filter, on the same terms as the hero beams. */
.mc-spine { position: relative; }
.mc-spine::before,
.mc-spine::after {
  content: ""; position: absolute;
  left: var(--spine-x, 0px);
  pointer-events: none;
}
.mc-spine::before {
  top: 0; bottom: 0; width: 1px;
  background: var(--frost-line-2);
}
.mc-spine::after {
  width: 5px; height: 5px; margin-left: -2px; border-radius: 50%;
  background: var(--beam);
  filter: drop-shadow(0 0 7px rgba(130, 152, 255, 0.95));
  animation: mc-spine-run 5.5s var(--ease) infinite;
}
@keyframes mc-spine-run {
  0%   { top: 0; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .mc-spine::after { display: none; } }
/* Collapsed layouts put the label above the content, so the spine has nowhere
   sensible to sit. */
@media (max-width: 640px) { .mc-spine::before, .mc-spine::after { display: none; } }

/* ---------- plan / steps ---------- */

.mc-plan, .mc-plan-steps { list-style: none; }
/* The spine sits in the gutter between the label column and the content. */
.mc-plan { --spine-x: 100px; }
.mc-plan-steps { --spine-x: 100px; }
.mc-hist { --spine-x: 118px; }
.mc-plan li, .mc-plan-steps li {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 24px;
  padding: 26px 0; border-top: 1px solid var(--line);
}
.mc-plan li:first-child, .mc-plan-steps li:first-child { border-top: 0; }
.mc-plan-steps { margin-top: 28px; }
.mc-when { font-size: 0.8125rem; color: var(--tx-3); padding-top: 4px; }
.mc-plan h3, .mc-plan-steps h4 { margin-bottom: 8px; }
.mc-plan p, .mc-plan-steps p { font-size: 0.9375rem; line-height: 1.6; color: var(--tx-2); }
.mc-out { margin-top: 10px; color: var(--tx-3) !important; }
.mc-out b { color: var(--pale); font-weight: 500; }
@media (max-width: 640px) { .mc-plan li, .mc-plan-steps li { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* ---------- work cards ---------- */

.mc-work { display: grid; gap: 24px; }
.mc-wcard {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  border-radius: var(--r-2xl); overflow: hidden;
}
.mc-wcard:nth-child(even) .mc-wcard-art { order: 2; }
.mc-wcard-art { background: var(--frost-2); overflow: hidden; min-height: 260px; }
.mc-wcard-art img { width: 100%; height: 100%; object-fit: cover; }
.mc-wcard-b { padding: var(--pad-lg); display: flex; flex-direction: column; justify-content: center; gap: 12px; align-items: flex-start; }
.mc-wcard-b p { font-size: 0.9375rem; line-height: 1.6; color: var(--tx-2); }
@media (max-width: 820px) {
  /* Five tall stacked cards is a long scroll on a phone. Swipe instead. */
  .mc-work {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(0, 86%);
    gap: var(--gap);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -24px; padding: 0 24px 8px;
  }
  .mc-work::-webkit-scrollbar { display: none; }
  .mc-wcard { grid-template-columns: minmax(0, 1fr); scroll-snap-align: start; }
  .mc-wcard:nth-child(even) .mc-wcard-art { order: 0; }
  .mc-wcard-art { min-height: 0; aspect-ratio: 16 / 9; }
  .mc-wcard-b { padding: var(--pad); }
}

.mc-hist { list-style: none; margin-top: 32px; }
.mc-hist li {
  display: grid; grid-template-columns: 136px 260px minmax(0, 1fr); gap: 22px;
  padding: 16px 0; border-top: 1px solid var(--line); font-size: 0.9375rem;
}
.mc-hist li:first-child { border-top: 0; }
.mc-hist li > span:first-child { color: var(--tx-3); font-size: 0.8125rem; padding-top: 2px; }
.mc-hist b { color: var(--tx); font-weight: 500; }
.mc-hist li > span:last-child { color: var(--tx-3); }
@media (max-width: 820px) { .mc-hist li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* ---------- quotes ---------- */

/* Four references, so two columns rather than three. A 3-up grid would leave
   the fourth stranded on its own row. */
.mc-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 700px) {
  .mc-quotes {
    grid-auto-flow: column; grid-template-columns: none;
    grid-auto-columns: minmax(0, 86%);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -24px; padding: 0 24px 8px;
  }
  .mc-quotes::-webkit-scrollbar { display: none; }
  .mc-q { scroll-snap-align: start; }
}
.mc-q { border-radius: var(--r-2xl); padding: var(--pad); display: flex; flex-direction: column; }
.mc-q blockquote { margin-bottom: 20px; color: var(--tx-2); font-size: 0.9375rem; line-height: 1.6; }
.mc-q figcaption { margin-top: auto; }

/* ---------- contact ---------- */

.mc-contact { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: center; }
.mc-portrait { width: 200px; height: 200px; border-radius: var(--r-2xl); object-fit: cover; border: 1px solid var(--line-2); }
@media (max-width: 720px) {
  .mc-contact { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mc-portrait { width: 132px; height: 132px; }
}

/* ---------- footnote markers and inline panel ---------- */

.mc-fn { font-size: 0.62em; vertical-align: super; line-height: 0; color: var(--pale); padding: 0 1px; margin-left: 1px; }
.mc-fn:hover { text-decoration: underline; }

.mc-fn-inline { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-m) var(--ease-out); margin-top: 12px; }
.mc-fn-inline.is-open { grid-template-rows: 1fr; }
.mc-fn-inline > div { overflow: hidden; }
.mc-fn-body {
  border-left: 2px solid var(--ac); background: var(--surf-2);
  padding: 15px 18px; font-size: 0.875rem; line-height: 1.6; color: var(--tx-2);
  border-radius: 0 var(--r) var(--r) 0;
}
.mc-fn-body b { color: var(--tx); font-weight: 500; }

/* ---------- footnotes block ---------- */

.mc-footnotes { background: var(--bg-2); border-top: 1px solid var(--line); padding: 104px 0; }
.mc-fnlist { list-style: none; max-width: 780px; }
.mc-fnlist li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px;
  padding: 18px 14px; border-top: 1px solid var(--line);
  font-size: 0.9375rem; line-height: 1.65; color: var(--tx-2); border-radius: var(--r);
}
.mc-fnlist li:first-child { border-top: 0; }
.mc-fnlist li:target { background: var(--ac-t); }
.mc-fnlist li:target .mc-fnnum { color: var(--pale); }
.mc-fnnum { color: var(--tx-3); font-variant-numeric: tabular-nums; }
.mc-fnlist b { color: var(--tx); font-weight: 500; }
.mc-fnback { display: inline-block; margin-left: 6px; font-size: 0.8125rem; white-space: nowrap; }

/* ---------- footer ---------- */

.mc-footer { background: var(--bg); border-top: 1px solid var(--line); padding: 60px 0 44px; }
.mc-footer-top { display: flex; flex-wrap: wrap; gap: 24px 40px; justify-content: space-between; align-items: flex-start; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.mc-footer-links { display: flex; flex-wrap: wrap; gap: 24px; font-size: 0.875rem; }
.mc-footer-bar { padding-top: 26px; font-size: 0.75rem; color: var(--tx-3); line-height: 1.7; max-width: 780px; }

/* ---------- reveal ---------- */

.mc-reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-m) var(--ease-out), transform var(--t-m) var(--ease-out); }
.mc-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .mc-reveal { opacity: 1; transform: none; } }