/* ==========================================================================
   Nextrail — motion prototype (revision 2)
   ---------------------------------------------------------------------------
   Brand reconciliation, per review: white editorial canvas, light product
   scenes, vertical hairlines, one restrained signal accent, dark treatment
   confined to the developer band. No page-wide second identity.

   The signal accent is the deployed brand green rather than a new blue: the
   live site, the marketing pages and the docs already use it, and introducing
   blue here would create exactly the third identity this revision removes.
   One token, --mp-signal, changes it everywhere if the owner prefers blue.
   ========================================================================== */

:root {
  --mp-canvas: #f6f7f9;
  --mp-canvas-2: #eef0f3;
  --mp-canvas-3: #e7eaee;
  --mp-ink: #0b0d12;
  --mp-ink-2: #5f6470;
  /* 4.8:1 on white and 4.5:1 on --mp-canvas-2. #8a8f99 was 3.0:1, which made
     the panel bars, scene keys and fine print the least legible text on the
     page. */
  --mp-ink-3: #5c6472;
  --mp-rule: #e9eaec;
  --mp-rule-2: #dddee2;
  --mp-signal: #0f9d63;
  --mp-signal-ink: #086b43;
  --mp-signal-soft: rgba(15, 157, 99, 0.1);
  /* 5.5:1 on white; the amber #b4780a was 3.7:1. */
  --mp-review: #96440a;
  --mp-review-soft: rgba(180, 120, 10, 0.12);
  --mp-dark: #0e1015;
  --mp-dark-2: #161a21;
  --mp-dark-ink: #eef1f5;
  --mp-dark-ink-2: #9aa3af;
  --mp-r-sm: 8px;
  --mp-r-md: 14px;
  --mp-r-lg: 20px;
  --mp-shell: 1200px;
  --mp-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mp-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { scroll-behavior: smooth; }

/* The marketing canvas, scoped to the marketing page. An unscoped `body` rule
   here repainted the console: it turned the payment funnel's headings near-black
   on the dark funnel, because the console reads its colour from the body. */
body.is-landing {
  background: var(--mp-canvas);
  color: var(--mp-ink);
  font-family: var(--mp-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.np main, .np header, .np footer { position: relative; z-index: 1; }

.mp-shell {
  width: 100%;
  max-width: var(--mp-shell);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.mp-mono { font-family: var(--mp-mono); font-variant-numeric: tabular-nums; }
.mp-fine { font-size: 0.875rem; line-height: 1.6; color: var(--mp-ink-3); margin: 0; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--mp-signal);
  outline-offset: 3px;
  border-radius: var(--mp-r-sm);
}

.mp-skip {
  position: fixed;
  left: 1rem;
  top: 0;
  transform: translateY(-120%);
  z-index: 60;
  padding: 0.7rem 1rem;
  border-radius: 0 0 var(--mp-r-sm) var(--mp-r-sm);
  background: var(--mp-ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.86rem;
  text-decoration: none;
}
.mp-skip:focus-visible { transform: translateY(0); }

/* ---------- Header ------------------------------------------------------ */
.mp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--mp-canvas) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mp-rule);
}
.mp-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 62px;
}
.mp-brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; letter-spacing: -0.02em; }
.mp-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--mp-rule-2);
  border-radius: var(--mp-r-sm);
  color: var(--mp-signal);
}
.mp-header-nav { display: flex; gap: 1.4rem; }
.mp-header-nav a { color: var(--mp-ink-2); text-decoration: none; font-size: 0.9rem; font-weight: 500; }
.mp-header-nav a:hover { color: var(--mp-ink); }

/* ---------- Type -------------------------------------------------------- */
.mp-eyebrow {
  margin: 0 0 1rem;
  font-family: var(--mp-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mp-ink-3);
}
.mp-h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.032em;
}
.mp-h1-accent { color: var(--mp-ink-2); }
.mp-h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.024em;
}
.mp-h2-cont { color: var(--mp-ink-2); font-weight: 400; }
.mp-h3 { margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.6rem); font-weight: 600; letter-spacing: -0.018em; line-height: 1.25; }
.mp-lede { margin: 1.4rem 0 0; max-width: 44rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--mp-ink-2); }

/* ---------- Buttons ----------------------------------------------------- */
.mp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--mp-r-sm);
  font: 500 0.94rem/1 var(--mp-sans);
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--mp-ease), border-color 160ms var(--mp-ease), background-color 160ms var(--mp-ease);
}
.mp-btn-primary { background: var(--mp-ink); color: #fff; }
.mp-btn-primary:hover { transform: translateY(-1px); }
.mp-btn-ghost { border-color: var(--mp-rule-2); color: var(--mp-ink); background: var(--mp-canvas); }
.mp-btn-ghost:hover { border-color: var(--mp-ink); }
.mp-btn-sm { min-height: 38px; padding: 0 0.85rem; font-size: 0.88rem; }
.mp-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.mp-arrow { display: inline-block; transition: transform 160ms var(--mp-ease); }
.mp-btn:hover .mp-arrow { transform: translateX(4px); }

/* ---------- Pills ------------------------------------------------------- */
.mp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--mp-rule-2);
  background: var(--mp-canvas);
  font-family: var(--mp-mono);
  font-size: 0.8rem;
  color: var(--mp-ink-2);
  white-space: nowrap;
}
.mp-pill--review { color: var(--mp-review); border-color: color-mix(in srgb, var(--mp-review) 40%, var(--mp-rule-2)); background: var(--mp-review-soft); }
.mp-pill--ok { color: var(--mp-signal-ink); border-color: color-mix(in srgb, var(--mp-signal) 40%, var(--mp-rule-2)); background: var(--mp-signal-soft); }
.mp-ok { color: var(--mp-signal-ink); }
.mp-off { color: var(--mp-ink-3); }

/* ============================================================== HERO ==== */
.mp-hero { padding-block: clamp(3rem, 7vw, 6rem) 0; }
.mp-hero-inner { position: relative; }
.mp-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.mp-cta-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.mp-qualify { margin: 0; font-family: var(--mp-mono); font-size: 0.8rem; color: var(--mp-ink-3); max-width: 22rem; }

.mp-hero-stage { position: relative; margin-top: clamp(2.5rem, 6vw, 4.5rem); min-height: 26rem; }
.mp-spine-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mp-spine-path { fill: none; stroke: var(--mp-signal); stroke-width: 1.5; stroke-linecap: round; }

.mp-float {
  position: absolute;
  width: min(22rem, 82%);
  border: 1px solid var(--mp-rule-2);
  border-radius: var(--mp-r-md);
  background: var(--mp-canvas);
  box-shadow: 0 1px 2px rgba(11, 13, 16, 0.04), 0 18px 44px -26px rgba(11, 13, 16, 0.22);
  overflow: hidden;
}
.mp-float header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--mp-rule);
  background: var(--mp-canvas-2);
  font-family: var(--mp-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mp-ink-3);
}
.mp-dots { display: inline-flex; gap: 4px; }
.mp-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--mp-rule-2); }
.mp-float dl { margin: 0; padding: 0.6rem 0.9rem 0.85rem; display: grid; }
.mp-float dl > div { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid var(--mp-rule); }
.mp-float dl > div:last-child { border-bottom: 0; }
.mp-float dt { flex: none; width: 6.5rem; font-family: var(--mp-mono); font-size: 0.8rem; color: var(--mp-ink-3); }
.mp-float dd { margin: 0; font-size: 0.86rem; }
.mp-float-prompt { margin: 0; padding: 0.85rem 0.95rem 0.4rem; font-size: 0.88rem; line-height: 1.5; }
.mp-float-state { list-style: none; margin: 0; padding: 0 0.95rem 0.9rem; display: grid; gap: 0.35rem; }
.mp-float-state li { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.8rem; border-top: 1px dashed var(--mp-rule); padding-top: 0.35rem; }
.mp-float-state b { font-family: var(--mp-mono); font-weight: 500; color: var(--mp-ink-3); }
.mp-float-note { margin: 0; padding: 0 0.95rem 0.95rem; font-size: 0.8rem; color: var(--mp-ink-2); line-height: 1.5; }
.mp-float--review .mp-pill { margin: 0.9rem 0.95rem 0.4rem; }
.mp-float--invoice { left: 0; top: 1.5rem; }
.mp-float--ai { left: 50%; transform: translateX(-50%); top: 5.5rem; }
.mp-float--review { right: 0; top: 1.5rem; }
.mp-scroll-hint { margin: 2.5rem 0 0; font-family: var(--mp-mono); font-size: 0.8rem; color: var(--mp-ink-3); }

/* ==================================================== VERTICAL STRIPS === */
.mp-strips { padding-block: clamp(4rem, 9vw, 8rem); border-top: 1px solid var(--mp-rule); }
.mp-strips-head { display: grid; gap: 0.8rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.mp-strip-stage { position: relative; overflow: hidden; }

/* ---- The strip band -----------------------------------------------------
   Twelve window strips over one composed console. Each strip shows its own
   twelfth: `.mp-arch-canvas` is twelve strips wide and is pulled left by one
   strip per column, so the twelve together are the whole drawing. The strips
   are pushed apart by a transform (never by a layout change), so the reader's
   scroll can close the gaps without reflowing anything.
   Default state is the merged console: no offset, no clip — which is what a
   reader with JavaScript off, or with reduced motion, should get. */
.mp-arch {
  --mp-arch-gap: 0px;
  --mp-arch-cut: 14px;
  --mp-arch-h: 17rem;
  display: flex;
  justify-content: center;
  width: 100%;
  height: var(--mp-arch-h);
}
.mp-arch-strip {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  transform: translateX(
    calc(var(--k) * var(--mp-arch-gap) - 5.5 * var(--mp-arch-gap))
  );
}
.mp-arch-canvas {
  display: grid;
  grid-template-rows: auto 1fr;
  width: calc(100% * 12);
  height: 100%;
  border: 1px solid var(--mp-rule-2);
  border-radius: var(--mp-r-md);
  background: var(--mp-canvas);
  overflow: hidden;
  transform: translateX(calc(-100% * var(--k) / 12));
}
/* One composed console instead of twelve window copies: the canvas is its own
   width, the strip carries no offset, and the panel is as tall as its content
   rather than a fixed stage sized for strips that no longer exist. */
.mp-arch--single { height: auto; }
.mp-arch--single .mp-arch-strip { transform: none; flex: 1 1 auto; }
.mp-arch--single .mp-arch-canvas { width: 100%; transform: none; }
.mp-arch-bar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--mp-rule);
  background: var(--mp-canvas-2);
}
.mp-arch-dots { display: inline-flex; gap: 4px; }
.mp-arch-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--mp-rule-2); }
.mp-arch-title { font-family: var(--mp-mono); font-size: 0.8rem; color: var(--mp-ink-3); }
.mp-arch-zones { display: grid; grid-template-columns: repeat(6, 1fr); min-height: 0; }
/* Six columns of console do not fit a phone: they were clipped at 390. Two
   columns of three, with the rules turned to match. */
@media (max-width: 760px) {
  .mp-arch-zones { grid-template-columns: repeat(2, 1fr); }
  .mp-z { border-right: 0; border-bottom: 1px solid var(--mp-rule); }
  .mp-z:nth-child(2n) { border-right: 0; }
  .mp-z:nth-last-child(-n + 2) { border-bottom: 0; }
  .mp-z:nth-child(odd) { border-right: 1px solid var(--mp-rule); }
}
.mp-z { display: grid; grid-template-rows: auto 1fr; gap: 0.5rem; padding: 0.85rem 0.9rem 1rem; border-right: 1px solid var(--mp-rule); min-width: 0; }
.mp-z:last-child { border-right: 0; }
.mp-z-k { margin: 0; font-family: var(--mp-mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mp-ink-3); }
.mp-z-log { margin: 0; display: grid; gap: 0.35rem; align-content: start; font-family: var(--mp-mono); font-size: 0.8rem; line-height: 1.4; color: var(--mp-ink-2); }
.mp-z-log span { display: block; padding-bottom: 0.3rem; border-bottom: 1px solid var(--mp-rule); }
.mp-z-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; align-content: start; }
.mp-z-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; font-size: 0.8rem; line-height: 1.35; color: var(--mp-ink-2); }
.mp-z-rows li + li { padding-top: 0.4rem; border-top: 1px solid var(--mp-rule); }
.mp-z--trace li::before,
.mp-z--check li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mp-signal); flex: none; margin-right: 0.35rem; }
.mp-z--trace li.is-ok::before,
.mp-z--check li.is-ok::before { background: var(--mp-signal); }
.mp-z--check li.is-review::before { background: var(--mp-review); }
.mp-z--trace li,
.mp-z--check li { justify-content: flex-start; }
.mp-z-v { color: var(--mp-ink-3); }
.mp-z-map { width: 100%; height: auto; }
.mp-z-line { stroke: var(--mp-rule-2); stroke-width: 1.4; }
.mp-z-node { fill: var(--mp-signal); }
.mp-z-gate { stroke: var(--mp-review); stroke-width: 2; }
.mp-arch-caption { margin: 1.4rem 0 0; max-width: 46rem; font-size: 0.86rem; line-height: 1.6; color: var(--mp-ink-3); }
.mp-strip-panels { position: relative; z-index: 1; margin-top: clamp(2rem, 4vw, 3rem); }
.mp-layer-panel { border: 1px solid var(--mp-rule-2); border-radius: var(--mp-r-lg); background: var(--mp-canvas); padding: clamp(1.5rem, 3vw, 2.5rem); }
.mp-panel-k { margin: 0 0 0.6rem; font-family: var(--mp-mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mp-ink-3); }
.mp-layer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1px; margin-top: 1.5rem; background: var(--mp-rule); border: 1px solid var(--mp-rule); }
.mp-layer-cell { background: var(--mp-canvas); padding: 1.1rem 1.2rem 1.3rem; }
.mp-layer-cell span { font-size: 0.8rem; color: var(--mp-signal-ink); }
.mp-layer-cell b { display: block; margin: 0.35rem 0 0.4rem; font-size: 0.98rem; }
.mp-layer-cell p { margin: 0; font-size: 0.86rem; color: var(--mp-ink-2); line-height: 1.5; }

/* ====================================================== JOURNEY ========= */
.mp-journey { border-top: 1px solid var(--mp-rule); }
.mp-journey-head { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: 0.8rem; }
.mp-journey-viewport { padding-bottom: clamp(3rem, 6vw, 5rem); }
.mp-journey-grid { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }

.mp-rail { position: sticky; top: 92px; display: grid; gap: 1.5rem; }
.mp-id-block { display: grid; gap: 0.4rem; padding: 1.1rem 1.2rem; border: 1px solid var(--mp-rule-2); border-radius: var(--mp-r-md); background: var(--mp-canvas); }
.mp-id { margin: 0; font-size: 0.82rem; color: var(--mp-signal-ink); }
.mp-id-supplier { margin: 0; font-size: 1rem; font-weight: 600; }
.mp-id-value { margin: 0.2rem 0 0.6rem; font-size: 0.82rem; color: var(--mp-ink-2); }

.mp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; border-left: 1px solid var(--mp-rule); }
.mp-steps button {
  position: relative;
  display: flex;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.3rem 0.5rem 1rem;
  border: 0;
  background: none;
  color: var(--mp-ink-3);
  font: 500 0.92rem/1.35 var(--mp-mono);
  text-align: left;
  cursor: pointer;
  transition: color 200ms var(--mp-ease);
}
.mp-steps button span { font-family: var(--mp-sans); }
.mp-steps button::before { content: ""; position: absolute; left: -1px; top: 0.55rem; width: 2.5px; height: 18px; border-radius: 2px; background: transparent; }
.mp-steps button[aria-current="true"] { color: var(--mp-ink); }
.mp-steps button[aria-current="true"]::before { background: var(--mp-signal); }

.mp-stage-stack { position: relative; }
.mp-scene {
  display: grid;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid var(--mp-rule-2);
  border-radius: var(--mp-r-lg);
  background: var(--mp-canvas);
  box-shadow: 0 1px 2px rgba(11, 13, 16, 0.04), 0 18px 44px -30px rgba(11, 13, 16, 0.2);
}
.mp-scene-head { display: grid; gap: 0.5rem; }
.mp-scene-k { margin: 0; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mp-ink-3); }
.mp-scene[data-scene="04-authorise"] { border-color: color-mix(in srgb, var(--mp-signal) 40%, var(--mp-rule-2)); }

/* The skip link is the journey's only escape hatch, so it has to look like one.
   Unstyled it inherited the body ink and read as another line of the heading. */
.mp-skip-journey {
  display: inline-block;
  font-size: 0.86rem;
  color: var(--mp-ink-2);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}
.mp-skip-journey:hover { color: var(--mp-ink); }

/* =========================================== PINNED / SCRUB (desktop) ===
   The stage is one window the six scenes take turns in, so the scenes have to sit
   on top of each other rather than one after another. Without this block the
   six scenes stack in normal flow — a 4300px column inside a pinned viewport —
   and the reader only ever sees whichever scene happens to be near the top,
   which is why the stage read as empty between stations.
   Ported from motion-prototype.css, where the journey was designed. The width
   band is 768px, not the prototype's 1040px, because the journey module pins
   from 768px up (`isCompact` is `max-width: 767px`): between 768 and 1039 the
   stage is pinned with the same scroll story, and it needs the same overlay or
   it shows the same empty stage on a tablet. */
@media (min-width: 768px) {
  .mp-journey.is-pinned .mp-journey-viewport { height: calc(100svh - 62px); overflow: hidden; }
  .mp-journey.is-pinned .mp-journey-grid { height: 100%; align-items: center; }
  .mp-journey.is-pinned .mp-rail { position: static; align-self: center; }
  .mp-journey.is-pinned .mp-stage-stack { position: relative; height: 100%; }
  .mp-journey.is-pinned .mp-scene {
    position: absolute;
    inset: 0;
    margin: auto;
    height: fit-content;
    max-height: 100%;
    overflow-y: auto;
  }
}

/* =============================================== NARROW / MOBILE ========
   Below 768px the journey does not pin at all: the module lays the six scenes
   out in reading order and the rail becomes a row of pills. Without this block
   the grid keeps its two columns at 390px — a 15rem rail beside a 108px stage
   — and the six scenes line up vertically inside it.
   Ported from motion-prototype.css, minus the rules for sections the page no
   longer carries. */
@media (max-width: 767px) {
  .mp-journey-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .mp-rail { position: static; }
  .mp-spine-svg { display: none; }
  .mp-steps { display: flex; flex-wrap: wrap; gap: 0.4rem; border-left: 0; }
  .mp-steps button { width: auto; min-height: 44px; padding: 0.5rem 0.85rem; border: 1px solid var(--mp-rule-2); border-radius: 999px; }
  .mp-steps button::before { display: none; }
  .mp-steps button[aria-current="true"] { border-color: var(--mp-signal); }
}

.mp-panel { border: 1px solid var(--mp-rule); border-radius: var(--mp-r-md); background: var(--mp-canvas); overflow: hidden; }
.mp-panel--accent { border-color: color-mix(in srgb, var(--mp-signal) 35%, var(--mp-rule-2)); }
.mp-panel-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--mp-rule); background: var(--mp-canvas-2); font-family: var(--mp-mono); font-size: 0.8rem; color: var(--mp-ink-3); }
.mp-panel-foot { margin: 0; padding: 0.8rem 0.95rem 0.95rem; font-size: 0.82rem; color: var(--mp-ink-2); }

.mp-scope, .mp-partner-list { list-style: none; margin: 0; padding: 0.6rem 0.95rem 0.9rem; display: grid; gap: 0.45rem; }
.mp-scope li, .mp-partner-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.88rem; }
.mp-scope b, .mp-partner-list b { font-family: var(--mp-mono); font-weight: 500; font-size: 0.8rem; }

.mp-map { display: grid; grid-template-columns: 1fr 3rem 1fr; gap: 0.75rem; align-items: stretch; }
.mp-map dl, .mp-review-sheet dl { margin: 0; padding: 0.6rem 0.95rem 0.9rem; display: grid; }
.mp-map dl > div, .mp-review-sheet dl > div { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--mp-rule); }
.mp-map dl > div:last-child, .mp-review-sheet dl > div:last-child { border-bottom: 0; }
.mp-map dt, .mp-review-sheet dt { flex: none; width: 8rem; font-family: var(--mp-mono); font-size: 0.8rem; color: var(--mp-ink-3); }
.mp-map dd, .mp-review-sheet dd { margin: 0; font-size: 0.88rem; }
.mp-map-wire { position: relative; }
.mp-map-wire span { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--mp-signal); transform: scaleX(0); transform-origin: left center; }

.mp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--mp-rule); border: 1px solid var(--mp-rule); border-radius: var(--mp-r-md); overflow: hidden; }
.mp-checks li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; background: var(--mp-canvas); font-size: 0.9rem; }
.mp-checks li b { font-family: var(--mp-mono); font-size: 0.82rem; font-weight: 500; }
.mp-checks .is-ok b { color: var(--mp-signal-ink); }
.mp-checks .is-review b { color: var(--mp-review); }

.mp-handover { display: grid; gap: 1rem; }
.mp-agent-line { margin: 0; padding: 0.9rem 1rem 1rem; font-size: 0.9rem; color: var(--mp-ink-2); }
.mp-agent-line b { color: var(--mp-ink); }
.mp-review-sheet { border-color: color-mix(in srgb, var(--mp-signal) 40%, var(--mp-rule-2)); }
.mp-review-sheet .mp-panel-bar { background: var(--mp-signal-soft); color: var(--mp-signal-ink); }
.mp-fido { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin: 0.4rem 0.95rem 0.9rem; padding: 0.8rem 0.9rem; border: 1px solid var(--mp-rule-2); border-radius: var(--mp-r-sm); background: var(--mp-canvas-2); transition: border-color 200ms var(--mp-ease), background-color 200ms var(--mp-ease); }
.mp-fido.is-approved { border-color: color-mix(in srgb, var(--mp-signal) 45%, var(--mp-rule-2)); background: var(--mp-signal-soft); }
.mp-fido-key { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--mp-ink); color: #fff; flex: none; }
.mp-fido.is-approved .mp-fido-key { background: var(--mp-signal); }
.mp-fido-copy { display: grid; gap: 0.1rem; flex: 1 1 10rem; }
.mp-fido-copy b { font-size: 0.86rem; }
.mp-fido-copy small { font-size: 0.8rem; color: var(--mp-ink-2); }
.mp-fido-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; padding: 0 0.95rem 1rem; }
.mp-sim-note { flex: 1 1 12rem; }

.mp-receipt-transform { display: grid; grid-template-columns: 1fr 2.5rem 1fr; gap: 0.75rem; align-items: center; }
.mp-transform-arrow { text-align: center; color: var(--mp-signal); font-size: 1.3rem; }
.mp-receipt p, .mp-receipt-transform > .mp-panel > p { margin: 0; padding: 0.7rem 0.95rem; font-size: 0.88rem; }
.mp-receipt .mp-mono { color: var(--mp-ink-3); font-size: 0.8rem; }

.mp-prove { display: grid; gap: 1px; background: var(--mp-rule); border: 1px solid var(--mp-rule); border-radius: var(--mp-r-md); overflow: hidden; }
.mp-prove .mp-panel { border: 0; border-radius: 0; }
.mp-prove p { margin: 0; padding: 0.8rem 0.95rem 0.9rem; font-size: 0.84rem; }

.mp-after { margin: 0; padding: 1rem clamp(1.15rem, 4vw, 2.5rem); max-width: var(--mp-shell); margin-inline: auto; font-family: var(--mp-mono); font-size: 0.8rem; color: var(--mp-ink-3); }

/* =========================================================== AI ========= */
/* ==========================================================================
   AI operations — the hand-off (finished 2026-10-01)
   ---------------------------------------------------------------------------
   Prompt → agent → authority. One stage window holds all three beats: the
   chrome and the readout stay put while the beat inside swaps, so the band
   reads as a single instrument. Wide screens with motion advance the stepper
   themselves until the reader takes over; narrow screens and reduced motion
   get the three beats in reading order, prompts already written.
   ========================================================================== */
.mp-hand { padding-block: clamp(4rem, 9vw, 8rem); border-top: 1px solid var(--mp-rule); }
.mp-hand-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 1040px) {
  .mp-hand-grid { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); align-items: start; }
}
/* — the stepper — */
.mp-hand-nav { display: grid; gap: 0.7rem; align-content: start; }
.mp-hand-step {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  padding: 0.85rem 1rem 0.95rem;
  border: 1px solid var(--mp-rule);
  border-radius: var(--mp-r-md);
  /* The card recedes by its surface, not by its opacity. At `opacity: 0.62`
     the station number came out #a3a8b0 (2.4:1) and the caption #9c9fa6
     (2.7:1) on white — the least legible words on the page, and a failure of
     WCAG 2.2 AA. Dimming the surface keeps the hierarchy and the text. */
  background: var(--mp-canvas-2);
  border-color: var(--mp-rule);
  color: var(--mp-ink-2);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s var(--mp-ease), border-color 0.25s var(--mp-ease),
    color 0.25s var(--mp-ease), transform 0.25s var(--mp-ease);
}
.mp-hand-step:hover { background: var(--mp-canvas); border-color: var(--mp-rule-2); }
.mp-hand-step[aria-pressed="true"] {
  background: var(--mp-canvas);
  color: var(--mp-ink);
  border-color: color-mix(in srgb, var(--mp-ink) 35%, var(--mp-rule));
  transform: translateX(2px);
}
.mp-hand-n { font: 500 0.8rem/1 var(--mp-mono); color: var(--mp-ink-3); }
.mp-hand-t { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.mp-hand-c { font-size: 0.84rem; line-height: 1.5; color: var(--mp-ink-2); }
.mp-hand-bar {
  display: block;
  height: 2px;
  margin-top: 0.65rem;
  background: var(--mp-ink);
  transform: scaleX(0);
  transform-origin: left center;
}
.mp-hand.is-live .mp-hand-step.is-playing .mp-hand-bar {
  animation: mp-hand-fill 6.2s linear forwards;
}
@keyframes mp-hand-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.mp-hand-hint {
  margin: 0.2rem 0 0;
  font: 400 0.8rem/1.6 var(--mp-mono);
  color: var(--mp-ink-3);
}
/* — the stage: one window, three beats — */
.mp-hand-stage {
  border: 1px solid var(--mp-rule-2);
  border-radius: var(--mp-r-lg);
  background: var(--mp-canvas);
  box-shadow: 0 1px 2px rgba(11, 13, 16, 0.04), 0 24px 60px -34px rgba(11, 13, 16, 0.24);
  overflow: hidden;
}
.mp-hand-chrome {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--mp-rule);
  font: 400 0.8rem/1.4 var(--mp-mono);
  color: var(--mp-ink-3);
}
.mp-hand-dots { display: inline-flex; gap: 0.3rem; }
.mp-hand-dots i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--mp-rule-2);
}
.mp-hand-chip {
  margin-left: auto;
  font: 500 0.8rem/1.4 var(--mp-mono);
  color: var(--mp-signal-ink);
}
.mp-hand-body {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: 1.35rem 1.4rem 1.2rem;
  min-height: 17rem;
  background: linear-gradient(180deg, var(--mp-canvas), var(--mp-canvas-2));
}
.mp-hand-beat { display: grid; align-content: start; gap: 0.9rem; }
.mp-hand-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin: 0;
  padding: 0.7rem 1.1rem 0.8rem;
  border-top: 1px solid var(--mp-rule);
  font: 400 0.8rem/1.5 var(--mp-mono);
  color: var(--mp-ink-3);
}
/* — 01 · prompt — */
.mp-hand-ask {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.55;
  min-height: 4.4rem;
}
.mp-hand-caret {
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--mp-ink);
  animation: mp-caret 1.06s steps(1, end) infinite;
}
.mp-hand-meta {
  margin: 0;
  font: 400 0.8rem/1.6 var(--mp-mono);
  color: var(--mp-ink-3);
}
.mp-hand-wire { display: block; width: 100%; height: 34px; }
.mp-hand-wire-track { fill: none; stroke: var(--mp-rule-2); stroke-width: 1; }
.mp-hand-wire-signal {
  fill: none;
  stroke: var(--mp-signal);
  stroke-width: 3;
  stroke-dasharray: 130 546;
}
.mp-hand.is-prompt .mp-hand-wire-signal { animation: mp-hand-wire 2.2s linear infinite; }
@keyframes mp-hand-wire {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -676; }
}
/* — 02 · agent — */
.mp-hand-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.mp-hand-rows li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--mp-canvas-3);
  font-size: 0.98rem;
}
.mp-hand-rows li:last-child { border-bottom: 0; }
.mp-hand-mark {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mp-signal-soft);
  color: var(--mp-signal-ink);
}
.mp-hand-mark svg { width: 15px; height: 15px; }
.mp-hand-tick {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16;
}
.mp-hand.is-agent .mp-hand-tick { animation: mp-hand-tick 0.5s ease-out both; }
.mp-hand-rows li:nth-child(2) .mp-hand-tick { animation-delay: 0.18s; }
.mp-hand-rows li:nth-child(3) .mp-hand-tick { animation-delay: 0.36s; }
@keyframes mp-hand-tick {
  from { stroke-dashoffset: 16; }
  to { stroke-dashoffset: 0; }
}
.mp-hand-rows .is-review .mp-hand-mark { background: var(--mp-review-soft); color: var(--mp-review); }
.mp-hand-rows .is-review b { color: var(--mp-review); font-weight: 600; }
.mp-hand-draft {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin: 0;
  padding-top: 0.2rem;
  font: 400 0.8rem/1.6 var(--mp-mono);
  color: var(--mp-ink-3);
}
.mp-hand-draft div { display: flex; gap: 0.45rem; }
.mp-hand-draft dd { margin: 0; color: var(--mp-ink); font-weight: 500; }
/* — 03 · authority — */
.mp-hand-rail { padding-top: 0.2rem; }
.mp-hand-rail svg { display: block; width: 100%; height: 64px; }
.mp-hand.is-gate .mp-hand-signal { animation: mp-hand-signal 1.8s linear 1; }
@keyframes mp-hand-signal {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -440; }
}
.mp-hand.is-gate .mp-hand-halo { animation: mp-hand-halo 1.6s ease-out 1s 1 both; }
@keyframes mp-hand-halo {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}
.mp-hand-halo { transform-box: fill-box; transform-origin: center; }
.mp-hand-lock { display: grid; gap: 1rem; }
@media (min-width: 720px) { .mp-hand-lock { grid-template-columns: 1fr 1fr; } }
/* The two group headings carried the last eyebrow costume on the page: 10.5px
   uppercase mono, which is what every section used to wear above its title. The
   words stay exactly as they are — they are the product's boundary, not a label
   — but they are set as words now, at reading size. */
.mp-hand-group h3 {
  margin: 0 0 0.5rem;
  font: 600 0.95rem/1.3 var(--mp-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--mp-ink);
}
.mp-hand-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mp-hand-chiplet {
  display: inline-block;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--mp-rule-2);
  font: 400 0.8rem/1.5 var(--mp-mono);
}
.mp-hand-group.is-may .mp-hand-chiplet {
  border-color: color-mix(in srgb, var(--mp-signal) 35%, var(--mp-rule-2));
  background: var(--mp-signal-soft);
  color: var(--mp-signal-ink);
}
.mp-hand-group.is-never .mp-hand-chiplet {
  border-color: color-mix(in srgb, var(--mp-review) 40%, var(--mp-rule-2));
  background: var(--mp-review-soft);
  color: var(--mp-review);
}
.mp-hand-note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--mp-ink-2);
}
/* — wide + motion: one beat at a time inside the fixed window — */
.mp-hand.is-live .mp-hand-body { min-height: 19rem; }
.mp-hand.is-live .mp-hand-beat {
  position: absolute;
  inset: 1.35rem 1.4rem 1.2rem;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.35s var(--mp-ease), transform 0.35s var(--mp-ease);
}
.mp-hand.is-live .mp-hand-beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* ==========================================================================
   The payment journey — the spine (2026-10-01)
   ---------------------------------------------------------------------------
   The pinned walkthrough keeps its scroll interactivity; what it gains is the
   instrument around it: a spine down the step list that fills with the reader's
   own scroll, a station readout in the stage's own chrome, the fourth station
   marked as the gate in amber, and a focus treatment on each scene as it lands
   (the interface sharpening rather than simply fading in). All of it is painted
   from the pinned timeline's progress, so scrolling up reverses it exactly.
   ========================================================================== */
.mp-journey-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--mp-rule);
  font: 400 0.8rem/1.5 var(--mp-mono);
  color: var(--mp-ink-3);
}
.mp-journey-readout b {
  color: var(--mp-ink);
  font-weight: 500;
}
.mp-journey-readout .is-gate {
  color: var(--mp-review);
}
.mp-steps { position: relative; }
.mp-spine {
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 1px;
  overflow: visible;
  pointer-events: none;
}
.mp-spine-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mp-spine-track { stroke: var(--mp-rule-2); stroke-width: 1.5; }
.mp-spine-run { stroke: var(--mp-signal); stroke-width: 1.5; stroke-linecap: round; }
.mp-steps li.is-past button { color: var(--mp-ink-3); }
.mp-steps li.is-past button::before { background: var(--mp-rule-2); }
.mp-steps button::before {
  width: 3px;
  height: 20px;
}
.mp-steps li[data-step-gate="true"] button::before {
  background: color-mix(in srgb, var(--mp-review) 45%, transparent);
}
.mp-steps li[data-step-gate="true"] button[aria-current="true"]::before {
  background: var(--mp-review);
}
.mp-step-gate {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid color-mix(in srgb, var(--mp-review) 40%, var(--mp-rule-2));
  border-radius: 999px;
  /* The smallest text on the page was this chip at 9px, in the uppercase mono
     the art direction retired. It is a state name, so it is set as one. */
  font: 600 0.8rem/1.4 var(--mp-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--mp-review);
}
/* Each scene resolves into focus as it lands, and softens as it leaves: the
   card scales a hair and clears a 4 px blur. Scrolling back reverses it. */
.mp-scene-focus {
  transform-origin: center top;
  will-change: transform, filter;
}
/* The one place the page renders the gate: the fourth station, in amber. */
.mp-journey.is-at-gate .mp-id-block {
  border-color: color-mix(in srgb, var(--mp-review) 45%, var(--mp-rule-2));
}
@media (prefers-reduced-motion: reduce) {
  /* The prototype turned smooth scrolling off for readers who asked for less
     motion; the port kept `html { scroll-behavior: smooth }` unconditional, so
     every anchor link still animated for exactly the people who opted out. */
  html { scroll-behavior: auto; }
  .mp *,
  .mp *::before,
  .mp *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
  .mp-scene-focus {
    filter: none !important;
    transform: none !important;
  }
}

/* The specimen mark on the one customer quote, wherever it appears. */
.mp-specimen {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--mp-rule-2);
  border-radius: 999px;
  font: 500 0.8rem/1.5 var(--mp-mono);
  color: var(--mp-ink-3);
}