/* ==========================================================================
   Meridian hero flow diagram, v4 (Michelangelo, Nov 2 2026)
   Plain CSS, no JS, no images, no inline styles. Every class is prefixed mdf-
   so it cannot collide with the page's .node / .checks / .chip / .arrow rules.
   Fonts come from the site's /fonts/fonts.css (Instrument Sans, IBM Plex Mono).
   Layout switches on the component's own width (container query), not the
   viewport: wide (>= 66rem) = horizontal rail, narrow = vertical rails.
   ========================================================================== */

.mdf {
  /* palette: live-site tokens (workers.miodiollc.com :root) plus 3 opaque surfaces */
  --mdf-text: #eef3ff;          /* --text */
  --mdf-muted: #8b9bb8;         /* --muted */
  --mdf-code: #c9d4ea;          /* neutral JSON values */
  --mdf-mint: #5ef0c8;          /* --accent */
  --mdf-mint-line: rgba(120, 220, 200, 0.35); /* --line-strong */
  --mdf-mint-dim: rgba(94, 240, 200, 0.12);   /* --accent-dim */
  --mdf-red: #ff7a8a;           /* --danger */
  --mdf-red-line: rgba(255, 122, 138, 0.55);
  --mdf-edge: rgba(140, 170, 220, 0.16);      /* ~ --line */
  --mdf-card: #0d1322;          /* opaque card surface (hides the rail behind it) */
  --mdf-ink: #07090f;           /* --bg, used inside port dots */
  --mdf-font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mdf-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* geometry */
  --mdf-gutter: 1.75rem;        /* panel side padding = rail gutters on phones */
  --mdf-rail: 0.875rem;         /* rail x inside a gutter (gutter / 2) */
  --mdf-gap: 0.75rem;           /* space between check cards */
  --mdf-stroke: 2px;

  container-type: inline-size;
  margin: 0;
  text-align: left;
  font-family: var(--mdf-font);
  color: var(--mdf-text);
}

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

/* zero-specificity resets so component classes always win */
:where(.mdf) :where(p, ol, ul, dl, dd, figcaption) { margin: 0; padding: 0; }
:where(.mdf) :where(ol, ul) { list-style: none; }
.mdf { color-scheme: dark; }

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

/* ---------- shared pieces ---------- */

.mdf-grid {
  position: relative;
  isolation: isolate;
  max-width: 36rem;
  margin: 0 auto;
}

.mdf-colhead {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1.2rem 0 0.85rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  min-height: calc(1.2rem + 0.85rem + 1.375rem);
}
.mdf-num {
  font: 500 0.75rem/1 var(--mdf-mono);
  color: var(--mdf-muted);
  letter-spacing: 0.02em;
}
.mdf-pill {
  margin-left: auto;
  font: 500 0.6875rem/1 var(--mdf-mono);
  color: var(--mdf-mint);
  background: var(--mdf-mint-dim);
  border: 1px solid var(--mdf-mint-line);
  border-radius: 999px;
  padding: 0.3rem 0.55rem;
  line-height: 1;
}

.mdf-card,
.mdf-check,
.mdf-out {
  position: relative;
  z-index: 2;
  border-radius: 12px;
  border: 1px solid var(--mdf-edge);
  background: var(--mdf-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 32px -12px rgba(0, 0, 0, 0.6);
}

/* agent: the unsigned tx */
.mdf-agent { padding: 0.95rem 1rem 1rem; }
.mdf-tag {
  display: inline-block;
  font: 500 0.75rem/1 var(--mdf-mono);
  color: var(--mdf-text);
  border: 1px dashed rgba(140, 170, 220, 0.45);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.75rem;
}
.mdf-tx { font: 400 0.75rem/1.65 var(--mdf-mono); }
.mdf-tx div { display: grid; grid-template-columns: 3rem minmax(0, 1fr); }
.mdf-tx dt { color: var(--mdf-muted); }
.mdf-tx dd { color: var(--mdf-code); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the read-only panel (narrow: the .mdf-panel box; wide: drawn by the li) */
.mdf-step--checks { position: relative; }
.mdf-panel {
  position: relative;
  border: 1px solid var(--mdf-mint-line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(94, 240, 200, 0.075), rgba(94, 240, 200, 0.012) 55%, rgba(94, 240, 200, 0.03)),
    rgba(8, 12, 21, 0.72);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(160, 255, 230, 0.06);
  padding: 0 var(--mdf-gutter) var(--mdf-gutter);
}

/* a check card */
.mdf-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name price"
    "q    q"
    "json json";
  align-content: start;
  padding: 0.9rem 1rem 1rem;
}
.mdf-check-name { grid-area: name; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.mdf-price { grid-area: price; font: 400 0.75rem/1.75 var(--mdf-mono); color: var(--mdf-muted); }
.mdf-q { grid-area: q; font-size: 0.875rem; color: var(--mdf-muted); line-height: 1.4; margin-top: 0.1rem; }
.mdf-json {
  grid-area: json;
  display: block;
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(140, 170, 220, 0.18);
  font: 400 0.75rem/1.6 var(--mdf-mono);
  color: var(--mdf-code);
  background: none;
}
.mdf-ln { display: block; padding-left: 2ch; text-indent: -2ch; }
.mdf-json .v { white-space: nowrap; }
.mdf-json .k { color: var(--mdf-muted); }
.mdf-json .v-ok { color: var(--mdf-mint); }
.mdf-json .v-bad { color: var(--mdf-red); font-weight: 500; }

/* the flagged branch: an alternate result of the same Drift check (dashed
   border = conditional, not a step); it sits outside the panel */
.mdf-branch {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "if"
    "q"
    "json";
  align-content: start;
  padding: 0.9rem 1rem 1rem;
  border-radius: 12px;
  border: 1px dashed var(--mdf-red-line);
  background: linear-gradient(180deg, rgba(255, 122, 138, 0.1), rgba(255, 122, 138, 0) 70%), var(--mdf-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 190, 198, 0.06),
    0 0 0 4px rgba(255, 122, 138, 0.06),
    0 14px 36px -14px rgba(255, 90, 110, 0.35);
}
.mdf-branch .mdf-json { border-top-color: rgba(255, 122, 138, 0.28); }
.mdf-branch-if { grid-area: if; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--mdf-red); }

/* outcomes */
.mdf-outs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mdf-gap); }
.mdf-out { padding: 0.85rem 1rem 0.9rem; }
.mdf-out strong { display: block; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.mdf-out span { display: block; margin-top: 0.2rem; font-size: 0.8125rem; line-height: 1.4; color: var(--mdf-muted); }
.mdf-out--sign {
  border-color: var(--mdf-mint-line);
  background: linear-gradient(180deg, rgba(94, 240, 200, 0.1), rgba(94, 240, 200, 0.02)), var(--mdf-card);
}
.mdf-out--sign strong { color: var(--mdf-mint); }
.mdf-out--stop {
  border-color: var(--mdf-red-line);
  background: linear-gradient(180deg, rgba(255, 122, 138, 0.13), rgba(255, 122, 138, 0.03)), var(--mdf-card);
  box-shadow:
    inset 0 1px 0 rgba(255, 190, 198, 0.06),
    0 0 0 4px rgba(255, 122, 138, 0.07),
    0 16px 40px -14px rgba(255, 90, 110, 0.4);
}
.mdf-out--stop strong { color: var(--mdf-red); }

/* caption */
.mdf-caption {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--mdf-muted);
}
.mdf-src a { padding-block: 0.5rem; color: var(--mdf-mint); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(94, 240, 200, 0.4); }
.mdf-src a:hover { text-decoration-color: currentColor; }
.mdf-src a:focus-visible { outline: 2px solid var(--mdf-mint); outline-offset: 0; border-radius: 4px; }

/* ==========================================================================
   NARROW (default, < 66rem component width): vertical, two rails.
   Mint rail on the left gutter = the tx moving through every check to Sign.
   Red rail on the right gutter = leaves the flagged check, runs to Stop.
   ========================================================================== */

.mdf-track { display: none; }

.mdf-step { position: relative; }
.mdf-step--agent,
.mdf-step--out { padding-inline: 0; }
.mdf-step--agent .mdf-colhead,
.mdf-step--out .mdf-colhead { padding-left: calc(var(--mdf-gutter) + 1px); padding-right: calc(var(--mdf-gutter) + 1px); }

/* agent -> panel connector */
.mdf-step--agent { padding-bottom: 1.75rem; }
.mdf-step--agent::after {
  content: "";
  position: absolute;
  left: calc(var(--mdf-rail) + 1px - var(--mdf-stroke) / 2);
  bottom: 0;
  height: 1.75rem;
  width: var(--mdf-stroke);
  background: linear-gradient(var(--mdf-mint-line), var(--mdf-mint));
}

/* the mint rail through the panel, plus its travelling pulse */
.mdf-step--checks::before,
.mdf-step--checks::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}
.mdf-step--checks::before {
  left: calc(var(--mdf-rail) - var(--mdf-stroke) / 2);
  width: var(--mdf-stroke);
  background: var(--mdf-mint);
  opacity: 0.85;
}
.mdf-step--checks::after {
  left: calc(var(--mdf-rail) - 4px);
  width: 8px;
  background: radial-gradient(closest-side, rgba(200, 255, 240, 0.95), rgba(94, 240, 200, 0.4) 50%, transparent) no-repeat;
  background-size: 8px 64px;
  background-position: 0 -64px;
  animation: mdf-pulse-y 3.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes mdf-pulse-y {
  0% { background-position: 0 -64px; }
  70%, 100% { background-position: 0 calc(100% + 64px); }
}

.mdf-checks { display: grid; gap: var(--mdf-gap); }

/* stub from the mint rail into each card, with a port dot on the card edge */
.mdf-check::before {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  left: calc(-1 * (var(--mdf-gutter) - var(--mdf-rail)) - 1px);
  width: calc(var(--mdf-gutter) - var(--mdf-rail) + 4px);
  height: 8px;
  background:
    radial-gradient(circle at calc(100% - 4px) 50%, var(--mdf-ink) 2px, var(--mdf-mint) 2.5px, var(--mdf-mint) 3.5px, transparent 4px),
    linear-gradient(var(--mdf-mint), var(--mdf-mint)) 0 50% / calc(100% - 6px) var(--mdf-stroke) no-repeat;
}

/* red: elbow out of Drift, down the right gutter, through the flagged branch, to Stop */
.mdf-check.has-branch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  width: calc(var(--mdf-gutter) - var(--mdf-rail) + var(--mdf-stroke) / 2 - 1px);
  height: calc(50% + 1px + var(--mdf-gap));
  border-top: var(--mdf-stroke) solid var(--mdf-red);
  border-right: var(--mdf-stroke) solid var(--mdf-red);
  border-top-right-radius: 10px;
}
.mdf-check.has-branch ~ .mdf-check::after {
  content: "";
  position: absolute;
  top: calc(-1px - var(--mdf-gap));
  bottom: -1px;
  left: calc(100% + var(--mdf-gutter) - var(--mdf-rail) - var(--mdf-stroke) / 2);
  width: var(--mdf-stroke);
  background: var(--mdf-red);
}
.mdf-check.has-branch ~ .mdf-check:last-child::after { bottom: calc(-2px - var(--mdf-gutter)); }
/* the branch leaves the panel on the red side, in the Stop column: the red
   line enters its top edge and leaves its bottom edge, then runs on to Stop */
.mdf-branch {
  width: calc((100% - var(--mdf-gap)) / 2);
  margin: var(--mdf-branch-gap, 1.5rem) 0 0 auto;
}
.mdf-branch::before,
.mdf-branch::after {
  content: "";
  position: absolute;
  right: calc(var(--mdf-rail) + 1px - 4px);
  width: 8px;
}
.mdf-branch::before {
  top: calc(-1px - var(--mdf-branch-gap, 1.5rem));
  height: calc(var(--mdf-branch-gap, 1.5rem) + 5px);
  background:
    radial-gradient(circle at 50% calc(100% - 4px), var(--mdf-ink) 2px, var(--mdf-red) 2.5px, var(--mdf-red) 3.5px, transparent 4px),
    linear-gradient(var(--mdf-red), var(--mdf-red)) 50% 0 / var(--mdf-stroke) calc(100% - 6px) no-repeat;
}
.mdf-branch::after {
  bottom: -5px;
  height: 8px;
  background: radial-gradient(circle at 50% 50%, var(--mdf-ink) 2px, var(--mdf-red) 2.5px, var(--mdf-red) 3.5px, transparent 4px);
}

.mdf-lane { display: none; }

/* panel -> outcomes: mint down the left, red down the right */
.mdf-step--out::before,
.mdf-step--out::after {
  content: "";
  position: absolute;
  top: 0;
  height: calc(100% - 3rem);
  width: var(--mdf-stroke);
}
.mdf-step--out::before { left: calc(var(--mdf-rail) + 1px - var(--mdf-stroke) / 2); background: var(--mdf-mint); }
.mdf-step--out::after { right: calc(var(--mdf-rail) + 1px - var(--mdf-stroke) / 2); background: var(--mdf-red); }
.mdf-step--out .mdf-colhead { padding-top: 1.1rem; padding-bottom: 0.9rem; }

.mdf-outs { position: relative; z-index: 2; }
.mdf-out::before {
  content: "";
  position: absolute;
  top: -9px;
  border: 5px solid transparent;
  border-bottom: 0;
  border-top-width: 8px;
}
.mdf-out--sign::before { left: calc(var(--mdf-rail) - 5px); border-top-color: var(--mdf-mint); }
.mdf-out--stop::before { right: calc(var(--mdf-rail) - 5px); border-top-color: var(--mdf-red); }
.mdf-out--sign { padding-left: calc(var(--mdf-gutter) - 1px + 0.25rem); }
.mdf-out--stop { padding-right: calc(var(--mdf-gutter) - 1px + 0.25rem); }

/* phones (component < 30rem, i.e. viewports up to ~510px): the branch spans
   the card column under the panel (same inset as the check cards, clear of
   the mint rail). The red lane keeps running down the right gutter from
   Drift to Stop, and the branch hooks onto it with a stub and port dot on
   its right edge, like the check cards hook onto the mint rail. */
@container (max-width: 29.99rem) {
  .mdf-branch {
    width: auto;
    margin: var(--mdf-branch-gap, 1.5rem) calc(var(--mdf-gutter) + 1px) 0;
  }
  .mdf-branch::before {
    top: calc(50% - 4px);
    right: calc(-1 * (var(--mdf-gutter) - var(--mdf-rail)) - 1px);
    width: calc(var(--mdf-gutter) - var(--mdf-rail) + 4px);
    height: 8px;
    background:
      radial-gradient(circle at 4px 50%, var(--mdf-ink) 2px, var(--mdf-red) 2.5px, var(--mdf-red) 3.5px, transparent 4px),
      linear-gradient(var(--mdf-red), var(--mdf-red)) 100% 50% / calc(100% - 6px) var(--mdf-stroke) no-repeat;
  }
  .mdf-branch::after {
    top: calc(-1px - var(--mdf-branch-gap, 1.5rem));
    bottom: -1px;
    right: auto;
    left: calc(100% + var(--mdf-gutter) - var(--mdf-rail) - var(--mdf-stroke) / 2);
    width: var(--mdf-stroke);
    height: auto;
    background: var(--mdf-red);
  }
  /* align the last mint and red segments and both arrowheads with the lines
     above them (each is 1px off in the shared narrow rule) */
  .mdf-step--out::before { left: calc(var(--mdf-rail) - var(--mdf-stroke) / 2); }
  .mdf-out--sign::before { left: calc(var(--mdf-rail) - 6px); }
  .mdf-step--out::after { right: calc(var(--mdf-rail) + 2px - var(--mdf-stroke) / 2); }
  .mdf-out--stop::before { right: calc(var(--mdf-rail) - 4px); }
}

/* ==========================================================================
   WIDE (>= 66rem component width): one horizontal rail.
   Columns: agent | c1 | panel | c2 | outcome. Rows: column heads | rail | red lane.
   Panel and outcome column share the outer rows through subgrid, so the
   red lane, Stop and the rail line up exactly without magic numbers.
   ========================================================================== */

@container (min-width: 66rem) {
  .mdf-grid {
    max-width: none;
    display: grid;
    grid-template-columns: 10.5rem 2.5rem minmax(0, 1fr) 2.75rem 9.75rem;
    grid-template-rows: auto auto 3rem auto;
  }

  .mdf-steps {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }

  .mdf-step {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
  }
  .mdf-step--agent { grid-column: 1; padding-bottom: 0; }
  .mdf-step--agent::after { display: none; }
  .mdf-step--agent .mdf-colhead,
  .mdf-step--out .mdf-colhead { padding-left: 0; padding-right: 0; padding-top: 1.2rem; padding-bottom: 0.85rem; }
  .mdf-step--agent .mdf-agent { grid-row: 2; align-self: center; }
  .mdf-agent::after {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    right: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mdf-ink);
    box-shadow: 0 0 0 1.5px var(--mdf-mint);
  }

  /* the li spans all four rows; the panel itself is drawn by ::before over
     rows 1 and 2 plus a 1.25rem bottom pad, so it ends right under the cards
     and the flagged branch sits outside it, below Drift */
  .mdf-step--checks {
    grid-column: 3;
    grid-template-columns: var(--mdf-gutter-w, 1.25rem) minmax(0, 1fr) var(--mdf-gutter-w, 1.25rem);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .mdf-step--checks::before {
    position: static;
    z-index: 0;
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    margin-bottom: calc(-1 * var(--mdf-gutter-w, 1.25rem));
    width: auto;
    opacity: 1;
    border: 1px solid var(--mdf-mint-line);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(94, 240, 200, 0.075), rgba(94, 240, 200, 0.012) 55%, rgba(94, 240, 200, 0.03)),
      rgba(8, 12, 21, 0.72);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(160, 255, 230, 0.06);
  }
  .mdf-step--checks::after { display: none; }
  .mdf-panel { display: contents; }
  .mdf-step--checks .mdf-colhead { grid-column: 2; grid-row: 1; position: relative; z-index: 1; }
  .mdf-checks {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  /* port dots where the rail enters and leaves each card */
  .mdf-check::before,
  .mdf-check::after,
  .mdf-check.has-branch::after,
  .mdf-check.has-branch ~ .mdf-check::after {
    content: "";
    position: absolute;
    top: calc(50% - 4px);
    bottom: auto;
    left: auto;
    right: auto;
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: var(--mdf-ink);
    box-shadow: 0 0 0 1.5px var(--mdf-mint);
  }
  .mdf-check::before { left: -5px; }
  .mdf-check::after,
  .mdf-check.has-branch::after,
  .mdf-check.has-branch ~ .mdf-check::after { right: -5px; display: none; }
  .mdf-checks .mdf-check:last-child::after { display: block; }

  /* red: dot on Drift's bottom edge, down to the flagged branch, right to Stop */
  .mdf-checks .mdf-check.has-branch::after {
    display: block;
    top: auto;
    bottom: -5px;
    left: calc(50% - 4px);
    right: auto;
    box-shadow: 0 0 0 1.5px var(--mdf-red);
  }
  /* the branch is 3.75rem wider than a check card (so the flags value stays
     on one line) and centred under Drift. Stop sits in the same row, right
     aligned with Simulate, so the red run is short:
     gap = card width + 1rem - 9.75rem (Stop) - 3.75rem / 2
         = branch padding-box width + 2px - 14.375rem */
  .mdf-branch {
    grid-column: 2;
    grid-row: 4;
    justify-self: start;
    width: calc((100% - 2rem) / 3 + 3.75rem);
    margin: 0 0 0 calc((100% - 2rem) / 3 - 0.875rem);
  }
  .mdf-branch::before {
    top: calc(-3rem - 1px);
    right: auto;
    left: calc(50% - var(--mdf-stroke) / 2);
    width: var(--mdf-stroke);
    height: 3rem;
    background: var(--mdf-red);
  }
  .mdf-branch::after {
    top: calc(50% - var(--mdf-stroke) / 2);
    bottom: auto;
    right: auto;
    left: calc(100% + 1px);
    width: calc(100% + 2px - 14.375rem - 9px);
    height: var(--mdf-stroke);
    background: var(--mdf-red);
  }
  .mdf-lane {
    display: block;
    position: absolute;
    top: calc(50% - 5px);
    left: calc(200% + 3px - 14.375rem - 9px);
    border: 5px solid transparent;
    border-right: 0;
    border-left: 9px solid var(--mdf-red);
  }

  /* the outcome li spans panel, c2 and outcome columns so Stop can sit in the
     branch row next to the flagged card while Sign stays at the end of the rail */
  .mdf-step--out { grid-column: 3 / 6; grid-template-columns: subgrid; }
  .mdf-step--out .mdf-colhead { grid-column: 3; }
  .mdf-step--out::before,
  .mdf-step--out::after { display: none; }
  .mdf-outs {
    grid-column: 1 / -1;
    grid-row: 2 / 5;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    gap: 0;
  }
  .mdf-out--sign { grid-column: 3; grid-row: 1; }
  .mdf-out--stop {
    grid-column: 1;
    grid-row: 3;
    justify-self: end;
    width: 9.75rem;
    margin-right: var(--mdf-gutter-w, 1.25rem);
  }
  .mdf-out { align-self: center; padding: 0.85rem 1rem 0.9rem; }
  .mdf-out::before { display: none; }

  /* the mint rail: agent -> through all three cards -> Sign */
  .mdf-track {
    display: block;
    position: relative;
    z-index: 1;
    grid-column: 2 / 5;
    grid-row: 2;
    align-self: center;
    height: 8px;
    margin-right: 1px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(200, 255, 240, 0.95), rgba(94, 240, 200, 0.4) 50%, transparent) no-repeat;
    background-size: 72px 8px;
    background-position: -72px 0;
    animation: mdf-pulse-x 3.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  }
  .mdf-track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 9px;
    top: calc(50% - var(--mdf-stroke) / 2);
    height: var(--mdf-stroke);
    background: linear-gradient(90deg, var(--mdf-mint-line), var(--mdf-mint) 18%);
  }
  .mdf-track::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(50% - 5px);
    border: 5px solid transparent;
    border-right: 0;
    border-left: 9px solid var(--mdf-mint);
  }
  @keyframes mdf-pulse-x {
    0% { background-position: -72px 0; }
    70%, 100% { background-position: calc(100% + 72px) 0; }
  }
}

/* motion is decoration only: switch it off when asked */
@media (prefers-reduced-motion: reduce) {
  .mdf-track,
  .mdf-step--checks::after { animation: none; background-image: none; }
}